extjs 使用 up 和 down 方法

Question

我正在尝试使用 up和 down打电话而不是 Ext.getCmp但我不太了解它。我有这个代码

listeners: {
    'change': function(field, selectedValue) {
        // Ext.getCmp('wildAnimal').setValue(selectedValue);
        this.up('form').down('#wildAnimal').setValue(selectedValue);
    }
}

在这个更大的代码中

Ext.define('ryan', {
    constructor: function() {
        Ext.create('Ext.form.Panel', {
            bodyStyle: {"background-color":"green"},
            name: 'mypanel',
            title: 'Animal sanctuary, one animal per location  ',
            width: 300,
            bodyPadding: 10,
            test: 'mycat',
            style: 'background-color: #Fdd;',
            renderTo: Ext.getBody(),
            items: [{
                itemId: 'button1',
                xtype: 'button',
                text: 'click the button',
                handler: function() {
                    alert('(<^_^>)');
                }
            },{
                itemId: 'wildAnimal',
                xtype: 'textfield',
                fieldLabel: 'animal:',
                name: 'myanimal'
            },{
                itemId: 'myCombo',
                xtype: 'combo',
                fieldLabel: 'choose your animal',
                store: animals,
                queryMode: 'local',
                displayField: 'name',
                listeners: {
                    'change': function(field, selectedValue) {
                        // Ext.getCmp('wildAnimal').setValue(selectedValue);
                        this.up('form').down('#wildAnimal').setValue(selectedValue);
                    }
                }
            }]
        });
    }
});

var animals = Ext.create('Ext.data.Store', {
    fields: ['itemId', 'name'],
    data: [{
        "itemId": 'mycat',
        "name": "mycat"
    },{
        "itemId" : 'mydog', 
        "name": "mydog"
    },{
        'itemId' : 'sbBarGirls', 
        "name": "BarGirls-when-drunk"
    }]
});

Ext.onReady(function() {
    var a = Ext.create('ryan');
    var b = Ext.create('ryan');
});

我感到困惑的是为什么我需要 wildAnimal 中的主题标签让这个工作。同样，当我切换 Ext.form.Panel 时至 widget.window监听器代码停止工作。我的代码创建了一个窗口，但我无法像在表单面板中那样传递组合框的值。据我了解 up用于从父类中查找内容。使用 widget.window 时我要打电话吗 this.up(widget) ?我不能让它工作。此外，我对 Ext JS 还很陌生，所以很多事情可能会超出我的脑海>__<。

Answer 1

up和 down方法用于遍历组件树。

使用时 up和 down对于选择器，默认选择器会检查组件的 xtype。所以up('form')意思是“继续沿着组件树向上，直到找到一个表单。” #wildAnimal选择器的意思是“继续向上直到找到 id == 'wildAnimal' 的组件”。如果您使用 up()没有选择器，它返回父容器。

如果您决定使用 Ext.window.Window而不是 Ext.form.Panel您需要更改所有出现的 up('form')与 up('window') .否则，如果您知道“myCombo”和“wildAnimal”是兄弟组件，您可以使用 up().down('#wildAnimal')并且在更改父容器的类型后它将起作用。