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, поэтому многие вещи могут возникнуть у меня в голове>__<.

Источник

3 ответа

Решение

up а также down методы используются для обхода дерева компонентов.

Когда используешь up а также down при использовании селекторов селектор по умолчанию проверяет тип x компонента. Так up('form') означает "продолжай идти вверх по дереву компонентов, пока не найдешь форму". #wildAnimal Селектор означает "продолжайте идти вверх, пока не найдете компонент, где id == 'wildAnimal'". Если вы используете up() без селекторов возвращает родительский контейнер.

Если вы решили использовать Ext.window.Window вместо Ext.form.Panel вам нужно будет изменить все вхождения up('form') с up('window'), В противном случае, если вы знаете, что "myCombo" и "wildAnimal" являются компонентами одного уровня, вы можете просто использовать up().down('#wildAnimal') и он будет работать после изменения типа родительского контейнера.

Источник

Симоника методов up и down соответствует классу 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/

Ресурсы:

Форум Сенчи: http://www.sencha.com/forum/

Stackru: https://stackru.com/questions/tagged/extjs

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

Firebug Plugin (Подсветка для разработчиков)

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

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

Источник

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

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

Надеюсь, это поможет всем, кто, кажется, не понимает этого.

Источник
Другие вопросы по тегам