如何从控制器中获取视图中的元素?

时间:2013-02-13 09:37:07

标签: extjs sencha-touch sencha-touch-2

我正在使用Sencha Touch 2,0,1。

我需要从Controller中的View中获取一个元素。

目前我使用此方法正确获取View,但我无法在View中获取Item。我没有得到任何错误,只是测试未定义。

有什么想法吗?

在控制器中:

var test = this.getDetailView().items['editButton'];

视图中的代码:

Ext.define('XXX.view.DetailView',{
   ...

   items: [

        {
            xtype: 'button',
            text: 'Edit XXX',
            ui: 'custom-btn-dwn-timetable',
            itemId: 'editButton'
        }
  ],
    ...
}

3 个答案:

答案 0 :(得分:5)

还有其他几种方法可以获得对编辑按钮的引用。您可以将编辑按钮连接为参考,如下所示:

Ext.define('MyApp.Controller', {
    extend: 'Ext.app.Controller',

    config: {
        refs: {
            editButton: '#editButton'
        }
    },

然后在您的控制器中,您可以调用自动生成的getter this.getEditButton()来获取实际的编辑按钮组件。

您可以做的另一件事是将编辑按钮保存为视图中的实例变量,如下所示:

Ext.define('XXX.view.DetailView',{
   ...

   items: [

        this.editButton = Ext.widget{(
            xtype: 'button',
            text: 'Edit XXX',
            ui: 'custom-btn-dwn-timetable',
            itemId: 'editButton'
        )}
  ],
    ...
}

现在,您需要访问控制器中的按钮:this.getDetailView().editButton

一般情况下,如果元素是您经常访问的元素,则应该保存对它的引用,而不是查询DOM(以避免不必要的性能影响)。由于执行堆栈,使用Ext.getCmp()的速度也较慢(每次只需要通过ComponentManager获取引用)。

答案 1 :(得分:2)

在这种情况下,您可以使用Ext.ComponentQuery来获取按钮:

Ext.ComponentQuery.query('#editButton')[1];

答案 2 :(得分:1)

您可以尝试将按钮ID设置为edit,然后

Ext.getCmp('edit').hide();