Sencha touch 2 从Main.js中删除后，控制器找不到视图

我对Sencha很陌生，所以这可能是一个新手错误：）

我正在尝试在Sencha中实现页面导航。下面的场景有效

我有一个Main.js，有一个主屏幕和一个登录屏幕。当我输入凭据时，我被转发到Home.js

但是，我现在想从主视图中删除Home，因为它只能在登录后显示。但是，从Main.js中删除xtype home之后，就再也找不到它了。我不明白为什么

Main.js

config : {
    tabBarPosition : 'bottom',

    items : [{
        xtype : 'startview',
    }, {
        xtype : 'contactform'
    }, {
        xtype : 'loginform'
    }, {
        xtype : 'createaccountform'
    }, {
        xtype : 'homeview' REMOVING THIS MAKES THE HOME undefined in the controller
    }]
}

Ext.define('MyApp.view.Home', {
extend : 'Ext.tab.Panel',
id : 'home',
xtype : 'homeview',
requires : ['Ext.TitleBar', 'Ext.Video'],
config : {
    title : 'Home',
    iconCls : 'home',
    tabBarPosition : 'bottom',

    items : [{
        xtype : 'searchview',
    }, {
        xtype : 'profileview'
    }, {
        xtype : 'messagesview'
    }, {
        xtype : 'sensesview'
    }]

}

views : ['Start', 'Main', 'Contact', 'Login', 'CreateAccount', 'Home', 'Messages', 'Profile', 'Search', 'Senses'],

controllers : ['LoginController'],

我的控制器

Ext.define("MyApp.controller.LoginController", {
extend : "Ext.app.Controller",

xtype : 'logincontroller',

requires : ['Ext.app.Router', 'MyApp.view.Home'],

config : {
    refs : {
        loginForm : "#loginFormPanel",
        home : 'homeview'
    },

    routes : {
        login : 'authenticateuser'
    },
    control : {
        'button[action=login]' : {
            tap : "authenticateUser"
        }
    },
    views : ['Login', 'Home']
},

authenticateUser : function(button) {

            **// WHEN REMOVING xtype: homeview from MAIN this getter returns undefined (??)**
    var activeView = this.getHome(); 

    this.getLoginForm().submit({
        url : 'php/process_login.php',
        method : 'POST',
        success : function(form, result) {

            alert('Success and moving to home ' + activeView);
            Ext.Viewport.setActiveItem(activeView);
        },
        failure : function(form, result) {

            alert('2');

            Ext.Msg.alert('Error', 'failure....' + result);
        }
    });
}
});

Home.js

config : {
    tabBarPosition : 'bottom',

    items : [{
        xtype : 'startview',
    }, {
        xtype : 'contactform'
    }, {
        xtype : 'loginform'
    }, {
        xtype : 'createaccountform'
    }, {
        xtype : 'homeview' REMOVING THIS MAKES THE HOME undefined in the controller
    }]
}

Ext.define('MyApp.view.Home', {
extend : 'Ext.tab.Panel',
id : 'home',
xtype : 'homeview',
requires : ['Ext.TitleBar', 'Ext.Video'],
config : {
    title : 'Home',
    iconCls : 'home',
    tabBarPosition : 'bottom',

    items : [{
        xtype : 'searchview',
    }, {
        xtype : 'profileview'
    }, {
        xtype : 'messagesview'
    }, {
        xtype : 'sensesview'
    }]

}

views : ['Start', 'Main', 'Contact', 'Login', 'CreateAccount', 'Home', 'Messages', 'Profile', 'Search', 'Senses'],

controllers : ['LoginController'],

}))

app.js

config : {
    tabBarPosition : 'bottom',

    items : [{
        xtype : 'startview',
    }, {
        xtype : 'contactform'
    }, {
        xtype : 'loginform'
    }, {
        xtype : 'createaccountform'
    }, {
        xtype : 'homeview' REMOVING THIS MAKES THE HOME undefined in the controller
    }]
}

Ext.define('MyApp.view.Home', {
extend : 'Ext.tab.Panel',
id : 'home',
xtype : 'homeview',
requires : ['Ext.TitleBar', 'Ext.Video'],
config : {
    title : 'Home',
    iconCls : 'home',
    tabBarPosition : 'bottom',

    items : [{
        xtype : 'searchview',
    }, {
        xtype : 'profileview'
    }, {
        xtype : 'messagesview'
    }, {
        xtype : 'sensesview'
    }]

}

views : ['Start', 'Main', 'Contact', 'Login', 'CreateAccount', 'Home', 'Messages', 'Profile', 'Search', 'Senses'],

controllers : ['LoginController'],

那么，如何确保我仍然在控制器中获得对主页的引用（从主服务器中删除后）

谢谢你的帮助，

---

Coen

您想给

主页

一个

项目id

而不是

id

Ext.define('MyApp.view.Home', {
    extend : 'Ext.tab.Panel',
    itemId : 'home',
    xtype : 'homeview',
    ...
});

现在，在控制器中，您希望像这样引用它：

...
config : {
refs : {
    loginForm : "#loginFormPanel",
    home : {
            autoCreate: true,
            selector: '#home',
            xtype: 'homeview'
        }
},
...

---

您想给

Home

一个

itemId

而不是

id

Ext.define('MyApp.view.Home', {
    extend : 'Ext.tab.Panel',
    itemId : 'home',
    xtype : 'homeview',
    ...
});

现在，在控制器中，您希望像这样引用它：

...
config : {
refs : {
    loginForm : "#loginFormPanel",
    home : {
            autoCreate: true,
            selector: '#home',
            xtype: 'homeview'
        }
},
...

---

谢谢，就这样！带有选择器的自动创建部件：）谢谢，就是这样！使用选择器自动创建零件：）