如何从ExtJS中同一级别的按钮引用容器

Question

我有一个像下面这样的结构。

我可以使用up.down引用（从按钮处理程序）我的组件，但我想知道是否有更正确的方法来执行此操作。

   Ext.application({
        name: 'MyApp',
        launch: function () {
            Ext.create('Ext.container.Viewport', {
                items: [
                    {
                        tpl: 'Name: {first} {last}',
                        data: {
                            first: 'Peter',
                            last: 'Kellner'
                        },
                        padding: 20,
                        width: 200,
                        height: 200,
                        style: {
                            border: '2px solid red'
                        },
                        resizable: true,
                        itemId: 'myComponentItemId',
                        listener: {
                            resize: {
                                fn: function(component, width, height) {
                                    console.log("w/h:" + width + " " + height);
                                }
                            }
                        }
                    },{
                        xtype: 'button',
                        text: "Disable",
                        handler: function () {
                            debugger;
                            this.up().down('#myComponentItemId').disable();
                        }
                    }
                ]
            });
        }
    });

Answer 1

将.up.down用于您要执行的操作是正确的。你可以使用类似的东西：

.up('form').down('button#login')

另一方面，您在代码中使用的内容不正确：this.up().down('#myComponentItemId')。您必须将组件选择器作为参数传递给.up()。

.up.down的替代方案是.nextSibling和.previousSibling。类似，但更常见的还有.nextNode和.previousNode。