Extjs с использованием методов up и down

Я пытаюсь использовать 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, так много вещей может пройти по моей голове > __ <.

Ответ 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'), и он будет работать после изменения типа родительского контейнера.

Ответ 2

Симматики методов вверх и вниз следуют классу ComponentQuery. Настоятельно рекомендуем вам ознакомиться с документами API по этому вопросу. Также см. Ниже, чтобы начать работу с ExtJS.

Удачи!


Я просто собираюсь оставить это здесь для вас.

Это начальный список ресурсов, которые я собрал для своих коллег: Очевидно, что ссылки относятся к ExtJS4.1, но не стесняйтесь использовать их для последней версии.

API: http://docs.sencha.com/ext-js/4-1/

Примеры:      http://dev.sencha.com/deploy/ext-4.1.0-gpl/examples/

Руководства:   http://docs.sencha.com/ext-js/4-1/#!/guide

Ресурсы:

Форум Sencha:    http://www.sencha.com/forum/

StackOverflow:    fooobar.com/questions/tagged/...

Инструменты:

Плагин Firebug (Иллюстрации для разработчиков)

http://www.illuminations-for-developers.com/

Как начать работу

1. Scroll through the Examples to get ideas of what you want to build.
2. Read through these Guides :
    ○ Getting Started
    ○ Class System
    ○ MVC
    ○ Layouts
    ○ Components
    ○ Data Package

Как только вы знакомы с этими понятиями, решите, какие компоненты вы будете использовать, и более подробно рассмотрите конкретные руководства в разделе "Компоненты". Я бы также посоветовал прочитать учебники по архитектуре приложений.

Ответ 3

У меня были проблемы с использованием Ext.getCmp("id"), поэтому лучшее решение кажется Ext.up/down(), и объяснил это очень хорошо в этой теме:

https://www.sencha.com/forum/showthread.php?258048-Clarify-getCmp-vs-Up-down,

Надеюсь, что это поможет любому, кто, похоже, не понимает этого.