extjs使用up和down方法 [英] extjs using up and down methods

问题描述

我试图使用 up 和 down 来调用而不是 Ext。 getCmp 但我不太了解它。我有这个代码

I'm trying to use up and down to call rather than Ext.getCmp but I'm not quite understanding it. I have this code

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很新，所以很多东西可能会超过我的头> __<。

What I'm confused on is why I need the hashtag in wildAnimal to get this working. Also when I switch Ext.form.Panel to widget.window the listeners code stops working. My code creates a window but I can't pass the value of the combobox like I can when it's a form panel. As I understand it up is used to find stuff from the parent class. When using a widget.window do I call this.up(widget)? I can't get that to work. Also I'm very new to Ext JS so many things may go over my head >__<.

推荐答案

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

The up and down methods are used to traverse the component tree.

当选择器使用 up 和 down 时，默认选择器会检查组件的xtype。所以 up（'form'）意味着继续上升组件树，直到找到一个表单。 #wildAnimal 选择器意味着继续上去，直到找到id ='wildAnimal'的组件。如果您没有选择器使用 up（），则返回父容器。

When using up and down with selectors, the default selector checks the xtype of the component. So up('form') means "keep going up the component tree until you find a form." The #wildAnimal selector means "keep going up until you find the component where id == 'wildAnimal'". If you use up() with no selectors, it returns the parent container.

如果您决定使用 Ext.window.Window 而不是 Ext.form.Panel 您需要更改所有出现的与 up（'窗口'）。否则，如果你知道myCombo和wildAnimal是兄弟组件，你可以使用 up（）。down（'＃wildAnimal'），它将在更改后工作父容器的类型。

If you decide to use Ext.window.Window instead of Ext.form.Panel you would need to change all occurrences of up('form') with up('window'). Otherwise, if you know that "myCombo" and "wildAnimal" are sibling components you can just use up().down('#wildAnimal') and it will work after changing the type of parent container.

这篇关于extjs使用up和down方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！