在ExtJs 4中如何引用网格中的工具栏按钮

Question

我希望您能在控制器中定义一个引用，以便在选择更改时启用/禁用删除按钮。但是我做得不对，因此getDelButton（）方法会返回未定义。请帮忙……

控制器：

 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,
        },

提前感谢...

- fadh

---

如果您得到了所需的答案，请接受它，或者如果没有得到您需要的内容，请添加评论。 - LittleTreeX

Answer 1

您的选择器可能有三个问题：

1. 组件和id选择器之间不应该有空格。使用：button#delete。
2. 正如nscrob所提到的，您可能需要使用gridpanel而不是grid。
3. button不是grid的直接子级。在这种情况下，它很可能是toolbar的直接子级。这意味着您必须采取更多类似于以下内容的操作：gridpanel > toolbar > button#delete或gridpanel button#delete。

关于上面提到的第3点，>选择器表示父级的直接子级。这意味着字面上是父级的子级，而不仅仅是嵌套链中的某个组件。如果您只想在gridpanel中获取一个按钮，则使用gridpanel button。这将搜索所有gridpanel的子级，并在所有这些子级中查找与button匹配的任何内容。但请注意，以这种方式使用它将返回gridpanel中的所有按钮（除非当然您指定了id）。

最后，在firebug中使用控制台将极大地帮助您。打开firebug，在控制台中可以运行命令。因此，加载网格并运行以下命令：Ext.ComponentQuery.query('gridpanel > toolbar > button#delete')，看看返回了什么。这样，您就不必反复从代码和浏览器窗口刷新之间来回切换了。请记住，query()返回一个数组。

- LittleTreeX

---

但我认为第二个不是原因。否则，Sencha在“使用refs”部分的文档中将有无效的示例。 - Molecular Man

我并不是ExtJS大师。然而，当我尝试在Ext.ComponentQuery.query()中使用选择器时，除非我使用gridpanel而不是grid，否则它将无法正常工作。我很好奇为什么会这样，如果我弄清楚了，我会在这里发布。感谢你的+1！ - LittleTreeX

Answer 2

我曾经遇到过类似的问题，最后发现是网格选择器的问题。通常情况下，选择器使用xtype，而网格则使用grid或gridpanel。尝试使用selector: 'gridpanel >button #delete'。

- nscrob

Answer 3

检查itemId属性。

- Marko