Ext JS 4 - как изменить содержимое элемента, на который нельзя ссылаться по идентификатору

Question

Буду очень признателен за любую помощь по следующей проблеме:

Мне нужно иметь возможность изменять содержимое элемента (div или текстовое поле), но проблема в том, что будет несколько экземпляров одного и того же окна, поэтому я не могу использовать идентификаторы div.

Я попробовал этот маленький пример:

var myBtnHandler = function(btn) {
    myPanel.items.items[0].html = "Changed by click!";
    myPanel.doLayout();
}

var fileBtn = new Ext.Button({
    text : 'Change',
    handler : myBtnHandler
});

var panel1 = {
    html : 'Original content.'
};

var myPanel = new Ext.Window({
    title : 'How to change it?',
    items : [
        panel1,
        fileBtn
    ]
});
myPanel.items.items[0].html = "Changed on load!";
myPanel.show();

Ссылка на элемент с помощью myPanel.items.items [0] работает при загрузке, но не работает, когда он находится в обработчике кнопок - это проблема, связанная с областью действия? Как ссылаться на элемент без его идентификатора?

Большое спасибо,

H.

Answer 1

Проблема не имеет ничего общего с областью действия.Когда вы устанавливаете свойство html в первый раз, компонент еще не был отрисован, поэтому при первоначальном рендеринге он будет считывать свойство html из компонента.Во второй раз вы просто устанавливаете свойство объекта, оно никак не отреагирует.

Вместо этого вам следует использовать метод update ().

Ext.require('*');

Ext.onReady(function() {
    var myBtnHandler = function(btn) {
        myPanel.items.first().update("Changed by click!");
    }
    var fileBtn = new Ext.Button({
        text: 'Change',
        handler: myBtnHandler
    });

    var panel1 = {
        html: 'Original content.'
    };

    var myPanel = new Ext.Window({
        title: 'How to change it?',
        items: [panel1, fileBtn]
    });
    myPanel.items.items[0].html = "Changed on load!";
    myPanel.show();
});

Answer 2

Есть несколько функций, которые проходят через элементы, принадлежащие контейнеру. Попробуйте использовать, например, down ():

btn = panel.down('button');

Где параметр 'button' будет означать 'дать мне элемент, тип которого равен' button '. Проверьте Sencha doc для запроса различных элементов тоже: http://docs.sencha.com/ext-js/4-0/#!/api/Ext.ComponentQuery

Answer 3

Исходя из ответа Ша.Чтобы поставить его совет в контексте с вашим примером.

var myBtnHandler = function(btn) {
    btn.up('window').down('panel').update('Changed by click!');
}

var fileBtn = new Ext.Button({
    text : 'Change',
    handler : myBtnHandler
});

var panel1 = {
    html : 'Original content.'
};

var myPanel = new Ext.Window({
    title : 'How to change it?',
    items : [
        panel1,
        fileBtn
    ]
});

myPanel.show();
myPanel.update('Changed on load!');