Question

I would really appreciate any help with the following problem:

I need to be able to change content of an item (div or textfield) but the problem is that there are going to be multiple instances of the same window so I cannot use div IDs.

I tried this little example:

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();

Referencing an element by myPanel.items.items[0] works on load but does not work when it’s in the button handler – is it a scope-related problem? How to reference an element without its ID?

Thank you very much,

H.

Answer 1

The problem has nothing to do with scope. The first time you set the html property, the component has not yet been rendered, so on initial render it will read the html property off the component. The second time, you’re just setting a property on an object, it’s not going to react in any way.

Instead, you should use the update() method.

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();
});