sencha touch 2 优化答案

【问题标题】：sencha touch 2 optimizationsencha touch 2 优化
【发布时间】：2012-05-19 21:27:21
【问题描述】：

附件是我的控制器文件..我基本上想切换视图..在带有 2 个按钮的容器中添加和删除面板..在主页和流行按钮的方法中我一次又一次地使用 Ext.create 不会这使我的应用程序过载，因为我不会破坏我的视图，而是添加和删除它们.. 我的主要问题是 我如何为这种情况创建全局 var，就像我只创建一次 var homepanel = Ext.create然后当我想从我的 mainContainer 中删除或添加它时，我可以重用该 var .. 需要对此进行认真的指导 .. 搜索了整个文档，但我对此一无所知

Ext.define('app.controller.MainController', {
extend: 'Ext.app.Controller',

config: {
    refs: {
        homeBtn: '#homeBtn',
        popularBtn: '#popularBtn',

        homePanel: '#homePanel',
        mainContainer: '#mainContainer'
    },
    control: {
        homeBtn:{
            tap: 'homeBtnAction'
        },
        popularBtn:{
            tap: 'popularBtnAction'
        }
    }
},


launch: function(app) {
    this.callParent(arguments);

    console.log("main launched");

    var mainCont = this.getMainContainer();
    var homepanel = Ext.create('app.view.Home.HomePanel');

    mainCont.add(homepanel);

    console.log("homePanelAdded");
},

homeBtnAction: function(){
    console.log("home page called");

    var mainCont = this.getMainContainer();
    var homepanel = Ext.create('app.view.Home.HomePanel');
    var popularpanel = Ext.create('app.view.Popular.PopularPanel');

    mainCont.remove(popularpanel);
    mainCont.add(homepanel);
},

popularBtnAction: function(){
    console.log("popular page called");

    var mainCont = this.getMainContainer();
    var homepanel = Ext.create('app.view.Home.HomePanel');
    var popularpanel = Ext.create('app.view.Popular.PopularPanel');

    mainCont.remove(homepanel);
    mainCont.add(popularpanel);
}
});

注意：我使用 Ext.define 创建视图并使用 MVC 结构。

【问题讨论】：

标签： sencha-touch-2

【解决方案1】：

使用这个，

var homepanel = this.getHomePanel() || Ext.create('app.view.Home.HomePanel');

如果 this.getHomePanel() 没有返回任何内容，它将为您创建面板。之后，您将使用已创建的面板。

其他注意事项，除非您以某种方式操作按钮，否则无需为它们提供 id 或 ref。

像这样在视图中设置按钮

{
xtype : 'button',
text : 'Home Panel',
action : 'goHome'
}

然后在你的控制器的控制部分使用这个

'button[action=goHome] : 
 {
  tap: 'homeBtnAction'
 }

【讨论】：

我正在使用 id，因为我的按钮有图像，需要在点击时更改。我也可以这样做： mainCont.removeAll(true,true);这将删除我的 mainCont 中的所有现有面板并销毁它们。我还是会接受你的回答。感谢您提供更多信息。我不知道这个 var homepanel = this.getHomePanel() || Ext.create('app.view.Home.HomePanel');

【解决方案2】：

一个选项是：在“启动”中，您创建两个视图（使用 Ext.Create）并在操作按钮回调中使用 Ext.getCmp 来检索先前创建的视图。

【讨论】：