我在网上找到了许多Sencha Touch示例,但实际上并没有将重点放在适当的 View 封装上。因此,即使按钮深深嵌套在 View 中, Controller 也会监听每个按钮的事件。换句话说, View 的内部泄漏永远不是一件好事。

我找到了一个很好的教程,它鼓励您创建有意义的 View ,以监听本地事件并引发有意义的业务事件等。

http://miamicoder.com/2012/how-to-create-a-sencha-touch-2-app-part-2/

但是,到目前为止,我仍然无法真正弄清楚的一件事是如何最好地缓存嵌套的组件实例。考虑以下示例:

Ext.define("NotesApp.view.NotesListContainer", {
    extend: "Ext.Container",
    alias: "widget.noteslistcontainer",

    initialize: function () {

        this.callParent(arguments);

        var newButton = {
            xtype: "button",
            text: 'New',
            ui: 'action',
            handler: this.onNewButtonTap,
            scope: this
        };

        var topToolbar = {
            xtype: "toolbar",
            title: 'My Notes',
            docked: "top",
            items: [
                { xtype: 'spacer' },
                newButton
            ]
        };

        this.add([topToolbar]);
    },
    onNewButtonTap: function () {
        console.log("newNoteCommand");
        this.fireEvent("newNoteCommand", this);
    },
    config: {
        layout: {
            type: 'fit'
        }
    }
});

假设我们要向setSpecialUIState添加方法NotesListContainer。调用它时,我们想对newButton做一些事情(例如,将其隐藏)。如何在不滥用newButton的情况下访问Ext.getComp()实例?我可以将其设置为实例变量吗?规范的方式如何?

更新

我只是按照尼古拉·鲍里西克(Nikolaj Borisik)的建议尝试了这一点。
    this._newButton = this.add([{
            xtype: "button",
            text: 'New',
            ui: 'action',
            handler: this.onNewButtonTap,
            scope: this
        }];

就像魅力一样。我只是不知道这样做是惯用的还是我可能没有任何缺点。否则,我强烈建议您这样做。除了Sencha之外,最好是撰写有意义的 View 以抽象出一致的UI部分。这比将每个按钮泄漏到 Controller 并直接摆弄它们要好得多。

所以我想知道这种方法是否有缺点?

最佳答案

除了使用getComponent(),我看到两个选项:

1使用Ext.create(...)作为实例组件

initialize: function () {
   this.callParent(arguments);
   this.newButton = Ext.create('Ext.Button',{
      xtype: "button",
      text: 'New',
      ui: 'action',
      handler: this.onNewButtonTap,
      scope: this
   });
   //....
},

setSpecialUIState : function(){
   this.newButton.hide()
}

2将此逻辑移入 Controller 并使用refs部分

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

        config : {
            refs :{
                newButton : '#noteList [itemId=newButton]'
            },

            control :{
                newButton : {
                    tap : 'onNewButtonTap'
                }
            }

        },

        onNewButtonTap : function(){
            console.log('on new Button tap');
        },

        setSpecialUIState : function(){
           this.getNewButton.hide()
        }

    });



Ext.define("NotesApp.view.NotesListContainer", {
    extend :"Ext.Container",
    alias  :"widget.noteslistcontainer",
    id     :'noteList',
    config:{
        items:[
            {
                xtype  :"toolbar",
                title  :'My Notes',
                docked :"top",
                items:[
                    { xtype:'spacer' },
                    {
                        xtype   :"button",
                        text    :'New',
                        ui      :'action',
                        itemId  :'newButton'
                    }
                ]
            }
        ]

    }
});

我更喜欢第二种选择

我使用两个选项,但情况不同。我认为第一种选择更适合可以在应用程序其他部分甚至其他项目中重用的组件。但是,当我们创建一些只能使用一次的 View 时,我认为没有必要从 View 中触发自定义事件。我们编写更多代码,并将其复制。是的,'newNoteCommand'比'tap'更清晰,但是{control:'#noteList [itemId ='newButton']为我们提供了所有必要的信息。其次,当我们对组件进行深层嵌套时,为什么我更喜欢第二种选择。在这种情况下,我们应该在第一个组件中触发事件,而不是从其父级触发事件等等,直到 Controller 有机会处理它。

10-01 16:40
查看更多