2

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

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

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

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

有没有更好的方法？

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

在视图中，我使用（本地 ID）定义我的组件，该组件lid必须是唯一的，但不是全局唯一的，例如id.

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

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

...

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

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

4

2 回答 2

2

使用Ext.getCmp, orExt.get在技术上较慢，并且有缺陷：

  1. 如果您有 2 个带有 的按钮id="button"，将返回哪一个？总的来说，这只会破坏你的程序——你提到了这一点。
  2. 您现在必须向客户端发送更多代码（例如，为每个组件添加额外的代码id='my-unique-id'- 虽然这有点迂腐
  3. 对我来说最大的一个：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()，尽管这通常是可以避免的。

于 2012-07-31T11:37:30.923 回答
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];

Actually, this is one of the most powerful and less known features of Ext JS 4. Be descriptive, use query() instead of Ext.getCmp() and you'll get much better code: easy to read and maintain.

于 2012-07-31T17:45:09.557 回答