Question

在ExtJS 4中获取组件有两种主要方法。通过全局ID或相对路径。

ID方法的好处是可以在视图中找到与其实际位置无关的任何组件。因此，当视图发生变化时，系统仍然有效。但随着系统变得越来越大，我需要使用带有命名空间的ID，并实现一些机制来为组件的多个实例生成唯一ID。

当我使用相对导航和组件查询时，我不必担心ID，只需导航，例如，从单击的按钮导航到我想要更改的网格并执行此操作。但是当视图发生变化时，查询可能不再起作用，系统就会中断。

所以这两种方法似乎都不是最理想的。

有没有更好的方法？

在阅读完答案后，我正在使用这种方法：

在视图中，我使用lid（本地ID）定义我的组件，该组件必须是其兄弟姐妹的唯一，但不像id那样是全局唯一的。

现在我可以使用这样的查询：

someWindowInstances[0].query( 'button[lid=myButton]' );

...

someWindowInstances[n].query( 'button[lid=myButton]' );

这使得“myButton”可以在窗口中的任何位置，如果窗口视图发生变化，我仍然可以找到它。

Answer 1

使用Ext.getCmp或Ext.get在技术上较慢，并且有陷阱：

如果您有2个id="button"按钮，哪一个会被退回？总的来说，这只会破坏你的计划 - 你提到这个。
您现在必须向客户端发送更多代码（例如，对于您额外id='my-unique-id'的每个组件 - 虽然这有点迂腐
对我来说最大的一个：Ext.get执行dom查找，Ext.getCmp查看this.all [id] 这比引用对象慢。 http://jsperf.com/ext-js-reference-vs-lookup

当我说引用对象时，我的意思是：

var grid=Ext.create('Ext.grid.Grid');
var Button =Ext.create('Ext.Button',handler:function(){
    grid.refresh();    
})

或者如果网格距离范围太远，我将使用事件监听器：

Ext.Panel.getComponent(0).on("change",function(){ // can also use "getComponent("name)
    grid.refresh},
this);

这确实有点笨重，并且有其自身的缺点，因为你时不时地有 Ext.getCompenent(0).items.items[0].getComponent[1 ].refresh()，虽然这通常是可以避免的。

Answer 2

如果通过相对路径表示query（）方法，那么这就是要走的路。不要忘记，您不仅可以通过DOM属性查询组件，还可以通过其xtype和基本上任何对象属性查询组件。像这样：

var panel = new Ext.panel.Panel({
    items: [{
        xtype: 'button',
        prop:  'foo'
    }],

    renderTo: Ext.getBody()
});

var button = panel.query('button[prop="foo"]')[0];

实际上，这是Ext JS 4最强大和最不为人知的功能之一。具有描述性，使用query（）而不是Ext.getCmp（），您将获得更好的代码：易于阅读和维护。

ExtJS 4中的ID与相对路径

2 个答案: