reference - ExtJs 4对网格中工具栏按钮的引用

我想在 Controller 内定义一个ref，以在选择更改时启用/禁用删除按钮。但是我做错了，所以getDelButton()-Method传递的是未定义的。请帮忙...

Controller :

 refs:[
      { ref: 'tabPanel', selector: 'viewport > tabPanel' },
      { ref: 'grid', selector: 'tabPanel > usermanagementgrid' },
      { ref: 'delButton', selector: 'grid > button #delete'}
],

...

this.getDelButton().setDisabled(false);

查看定义:

dockedItems: [{
        xtype: 'toolbar',
        items : [ {
            xtype: 'button',
            id: 'delete',
            iconCls: 'drop-add',
            text: 'Add',
            tooltip: 'Press to add a new user.',
            action: 'addUser',
            scope: this,
        },

提前致谢...

最佳答案

您的选择器可能会遇到3个问题:

组件和id选择器之间不应有空格。使用:button#delete。

如nscrob所述，您可能需要使用gridpanel而不是grid。

button不是grid的直接子代。在这种情况下，它很可能是toolbar的直接子代。这意味着您必须执行更多类似的操作:gridpanel > toolbar > button#delete或gridpanel button#delete。

在上面的＃3中，>选择器表示父级的DIRECT CHILD。从字面上看，这意味着父级的子级，而不仅仅是嵌套链中某个位置的组件。如果您只想在gridpanel中拉一个按钮，请使用gridpanel button。这将搜索gridpanel的所有子代，并在所有这些子代中搜索与button匹配的任何内容。但是请注意，以这种方式使用它会返回gridpanel中的所有按钮(除非您指定id)。

最后，在Firebug中使用控制台将对您带来极大的帮助。打开firebug，然后在控制台中可以运行命令。因此，加载网格并运行以下命令:Ext.ComponentQuery.query('gridpanel > toolbar > button#delete')，看看返回了什么。这样，您就不必继续在代码中来回移动并刷新浏览器窗口。请记住，query()返回一个数组。

GridPanel

reference - ExtJs 4对网格中工具栏按钮的引用