Javascript Sencha touch 2.0 can'；t在视口上设置activeitem

我现在正在玩sencha touch 2.0，我有以下问题

我试图在视口中设置activeitem，但根据调试控制台，无法识别该函数。是的，我的布局=卡片

谁能告诉我怎样才能改变我的观点

这是我的密码

这就是错误的地方：

//这就是问题所在

                    App.view.Viewport.setActiveItem("App.view.user.Index",{
                        type: "slide",
                        direction: "left"
                    });

我也试过了

this.App.view.Viewport.setActiveItem("App.view.user.Index",{
                        type: "slide",
                        direction: "left"
                    });

但这会产生相同的错误：setActiveItem不存在：

Uncaught TypeError: Object function () {
                    return this.constructor.apply(this, arguments);
                } has no method 'setActiveItem'

如果需要，请查看其余代码：App.js

Ext.Loader.setConfig(
{ 
    enabled: true ,
    paths:{
        //set application path 
        App: 'app'
    }

});

// Main application entry point
Ext.application({
    name: 'App',  
        //Define all models and controllers in the application
        //Views do not have to be defined these are defined in the controllers

        //Models 

        //Controllers
        controllers: ['User'],
        //automatically create a viewport(template) instance/object  app/Viewport.js
        autoCreateViewport: true,
    launch: function() {              


    }
});

视口

Ext.define('App.view.Viewport', {
    extend: 'Ext.viewport.Default',
    xtype: "Viewport",


    config: {


        fullscreen:true,
        layout:     "card",
        items:[
            {
                xtype: "panel",
                scrollable:true,
                items: [
                    {
                        xtype:"toolbar",
                        title:"Test app"
                    },
                    {
                        xtype:"UserLoginView",
                        id: "LoginForm"
                    }
                ]
            }
        ]
    }

});

发生一切的控制器

//Define controller name 
Ext.define('App.controller.User', {
    //Extend the controller class
    extend: 'Ext.app.Controller',
    views: ['user.Login','user.Index'],
    refs: [
        {
            selector:"#userLogin",
            ref: 'LoginUserLogin'
        },
        {
            selector:"#userPassword",
            ref: "LoginUserPassword"
        },
        {
            selector: "Viewport",
            ref: "Viewport"
        },
        {
            selector: "UserIndex",
            ref: "UserIndex"
        }
    ],
    //define associated views with this controller


    init: function()
    {
        //do something and setup listeners

        //setup listeners 
        this.control({
            '#UserLoginButon' : {
                tap : this.login

            }
        });
    },

    //handle
    login : function  (object)
    {
        //iniate loading screen for user
        var loadingScreen = new Ext.LoadMask(Ext.getBody(),{msg: ""});
        loadingScreen.show();


        //get form values 
        var username = this.getLoginUserLogin().getValue();
        var password = this.getLoginUserPassword().getValue();

        //check for empty fields
        if(username == "" || password == "")
        {
            loadingScreen.hide();
            Ext.Msg.alert("Foutmelding","Je dient alle velden in te vullen.");
        }
        else
        {
            Ext.Ajax.request(
            {
                url: '../backend/users/login/'+username+'/'+password,
                method: 'post',
                failure : function(response)
                {
                    loadingScreen.hide();
                    data = Ext.decode(response.responseText);
                    Ext.Msg.alert('Login Error', data.errorMessage, Ext.emptyFn);
                },
                success: function(response, opts) 
                {
                    data = Ext.decode(response.responseText);

                    if (data == true)
                    {
                        loadingScreen.hide();
                        Ext.Msg.alert("ingelogd!","welkom");

                        //THIS IS WHERE IT GOES WRONG 
                        App.view.Viewport.setActiveItem("App.view.user.Index",{
                            type: "slide",
                            direction: "left"
                        });




                    } else 
                    {
                        loadingScreen.hide();
                        Ext.Msg.alert("Foutmelding","Gebruikersnaam of wachtwoord klopt niet.");
                    }
                }
            });




        }
         console.log(App);









    },
    loginRequest : function (username, password)
    {

    }



});

---

不能通过类名引用面板，它没有引用面板的实例。使用控制器选择器或

Ext.ComponentQuery.query（选择器）

（返回数组）

你可以（应该？我做过）做这样的事情：

var indexPanel = Ext.create('App.view.user.Index');
Ext.Viewport.add(indexPanel)
Ext.Viewport.setActiveItem(indexPanel)

{
    xtype: 'button',
    text: 'detail view!',
    go: 'my-detail',
    width: '20%'
}

---

不能通过类名引用面板，它没有引用面板的实例。使用控制器选择器或

Ext.ComponentQuery.query（选择器）

（返回数组）

你可以（应该？我做过）做这样的事情：

var indexPanel = Ext.create('App.view.user.Index');
Ext.Viewport.add(indexPanel)
Ext.Viewport.setActiveItem(indexPanel)

{
    xtype: 'button',
    text: 'detail view!',
    go: 'my-detail',
    width: '20%'
}

---

根据Sencha论坛上的这篇文章，您不应该在Sencha Touch 2中直接调用Ext.Viewport，因此我尝试创建自己的Viewport类，它成功了，下面是我所做的：

app.js

Ext.Loader.setConfig({enabled:true});
Ext.application({
        name: 'MyApp',
        controllers: ['MyController'],
        autoCreateViewport: true,
        launch: function() {
            console.log('launch!');
        }
    });

view/Viewport.js

Ext.define('MyApp.view.Viewport', {
extend: 'Ext.Container',
xtype: 'my-viewport',
config: {
    layout: {
        type: 'card',
        animation: {
            type: 'slide',
            direction: 'left'
        }
    },
    fullscreen: true,
    items: [{xtype: 'my-list'}, {xtype: 'my-detail'}]
}
});

controller/MyController.js

Ext.define('MyApp.controller.MyController', {
extend: 'Ext.app.Controller',
views: ['Navbar', 'List', 'Detail'],
init: function() {
    console.log('MyController init');

    this.control({
        'button[go]': {
                tap: function(btn) {
                    viewport = Ext.ComponentQuery.query('my-viewport');
                    target = Ext.ComponentQuery.query(btn.go);
                    viewport[0].setActiveItem(target[0]);
                }
            }
    });
}
});

此控制器基本上会查找任何带有“go”参数的按钮，并将ActiveItem（）设置为该值，因此您只需告诉按钮转到视图的xtype，如下所示：

var indexPanel = Ext.create('App.view.user.Index');
Ext.Viewport.add(indexPanel)
Ext.Viewport.setActiveItem(indexPanel)

{
    xtype: 'button',
    text: 'detail view!',
    go: 'my-detail',
    width: '20%'
}

---

根据Sencha论坛上的这篇文章，您不应该在Sencha Touch 2中直接调用Ext.Viewport，因此我尝试创建自己的Viewport类，它成功了，下面是我所做的：

app.js

Ext.Loader.setConfig({enabled:true});
Ext.application({
        name: 'MyApp',
        controllers: ['MyController'],
        autoCreateViewport: true,
        launch: function() {
            console.log('launch!');
        }
    });

view/Viewport.js

Ext.define('MyApp.view.Viewport', {
extend: 'Ext.Container',
xtype: 'my-viewport',
config: {
    layout: {
        type: 'card',
        animation: {
            type: 'slide',
            direction: 'left'
        }
    },
    fullscreen: true,
    items: [{xtype: 'my-list'}, {xtype: 'my-detail'}]
}
});

controller/MyController.js

Ext.define('MyApp.controller.MyController', {
extend: 'Ext.app.Controller',
views: ['Navbar', 'List', 'Detail'],
init: function() {
    console.log('MyController init');

    this.control({
        'button[go]': {
                tap: function(btn) {
                    viewport = Ext.ComponentQuery.query('my-viewport');
                    target = Ext.ComponentQuery.query(btn.go);
                    viewport[0].setActiveItem(target[0]);
                }
            }
    });
}
});

此控制器基本上会查找任何带有“go”参数的按钮，并将ActiveItem（）设置为该值，因此您只需告诉按钮转到视图的xtype，如下所示：

var indexPanel = Ext.create('App.view.user.Index');
Ext.Viewport.add(indexPanel)
Ext.Viewport.setActiveItem(indexPanel)

{
    xtype: 'button',
    text: 'detail view!',
    go: 'my-detail',
    width: '20%'
}

---

好极了，我似乎能胜任这项工作！我是否可以保留App.view.Viewport中的工具栏，但这会消失。您可以有一个包装容器，其中包含两个项目，一个是工具栏（停靠：'top'），另一个是另一个容器，您可以保留“活动”面板。因此，您可以通过控制器或componentQuery中的引用引用第二项，并销毁其中的内容，添加新面板并将其设置为活动面板。我身上没有任何精确功能的代码示例，但您可以尝试使用它。是否有可能轻松地将indexPanel添加到已存在和已创建的视口中？我猜这是一个非常常见的过程，这就是我上面给你的代码所做的，将它添加到视口中。你可以在任何面板上这样做，这取决于它的布局。panel.add（）。。在我谈到我自己的扩展视口的类之后，我认为您可能必须执行panel.layout（）或doLayout（）（很抱歉，我对javascript mvc和sencha系统有点陌生）所以我现在要做的是用componentquery选择，然后添加我的项目，并设置一个activeitem，这听起来有点低效。看起来很好！我是否可以保留App.view.Viewport中的工具栏，但这会消失。您可以有一个包装容器，其中包含两个项目，一个是工具栏（停靠：'top'），另一个是另一个容器，您可以保留“活动”面板。因此，您可以通过控制器或componentQuery中的引用引用第二项，并销毁其中的内容，添加新面板并将其设置为活动面板。我身上没有任何精确功能的代码示例，但您可以尝试使用它。是否有可能轻松地将indexPanel添加到已存在和已创建的视口中？我猜这是一个非常常见的过程，这就是我上面给你的代码所做的，将它添加到视口中。你可以在任何面板上这样做，这取决于它的布局。panel.add（）。。在我谈到我自己的扩展视口的类之后，我想您可能必须执行panel.layout（）或doLayout（）（很抱歉，我对javascript mvc和sencha系统有点陌生），所以我现在要做的是使用componentquery选择，然后添加我的项，并设置一个activeitem听起来有点低效。