1

可能重复：
Extjs4.1、up() down() 与 Ext.getCmp()

我使用 ExtJS（总是使用第 4 版）进行了很多工作，但我仍然无法理解什么是检索组件的正确方法。

有很多方法可以做到这一点，都是全局的：

  • Ext.getCmp ()
  • Ext.ComponentQuery.query ()

和内部：

  • Ext.container.AbstractContainer.down ()
  • Ext.container.AbstractContainer.up ()
  • Ext.container.AbstractContainer.nextSibling ()
  • Ext.container.AbstractContainer.nextNode ()
  • Ext.container.AbstractContainer.previousSibling ()
  • Ext.container.AbstractContainer.previousNode ()
  • Ext.container.AbstractContainer.child ()
  • Ext.container.AbstractContainer.findParent ()
  • Ext.container.AbstractContainer.findParentBy ()
  • Ext.container.AbstractContainer.query ()
  • Ext.container.AbstractContainer.queryBy ()
  • Ext.container.AbstractContainer.queryById ()

现在，如果我为每个组件（如按钮、复选框、网格等）使用id，我肯定会始终得到它们，即使主容器的布局发生变化：我可以按照全局方式进行操作。但是，这种搜索可能会影响应用程序的性能：老实说，我不知道如何Ext.getCmp ()工作，但我认为搜索是在整个变量命名空间中完成的。

所以，这个问题导致我偶尔遵循第二种方式。当我更改主容器的布局时，问题就来了。举个例子如下：

Ext.create ('Ext.panel.Panel', {
    title: 'Main Container' ,
    width: 300 ,
    renderTo: Ext.getBody () ,
    items: [{
        xtype: 'textfield' ,
        fieldLabel: 'First name'
    } , {
        xtype: 'textfield' ,
        id: 'tfLastName' ,
        fieldLabel: 'Last name'
    } , {
        xtype: 'checkbox' ,
        boxLabel: 'Alive'
    }] ,

    bbar: {
        xtype: 'toolbar' ,
        items: [{
            xtype: 'button' ,
            text: 'Get CheckBox' ,
            // Gets the checkbox starting from the second textfield (Last Name)
            handler: function (btn) {
                var tfLastName = Ext.getCmp ('tfLastName');
                console.log (tfLastName.nextSibling ('checkbox'));
            }
        }]
    }
});

当我单击Get Checkbox按钮时，它会返回我请求的复选框，但是如果我更改主容器项目的顺序（假设将复选框声明放在姓氏文本字段之前），它会按预期返回 null。现在，这就是问题所在：我不想在更改视图时更改逻辑。

所以，我的问题是：

  • 是否存在允许我在不使用 ID 的情况下检索组件并在视图更改时保持逻辑不变的功能？
  • 是否存在进行组件检索的正确方法？如果是，是什么？
4

0 回答 0