Dimitri
Dimitri

Reputation: 2878

Can I change property of panel dynamically in Ext JS?

So I have a following View that extends the Ext.panel.Panel

Ext.define('SomeView', {
    extend: 'Ext.panel.Panel',
    alias: 'someview',
    title: 'Some View',
    closable: true,
    initComponent: function () {
        this.itemId = 'someView';
        this.callParent(arguments);
    },

    layout: {
        type: 'vbox',
        align: 'stretch'
    },

    items: [
        {
            xtype: 'container',
            layout: 'hbox',
            items: [
                {
                    xtype: 'container',
                    itemId: 'someContainer',
                    tpl: '<h2>{someProperty}</h2>',
                    flex: 1
                },
    // other code omitted for brevity
});

I initialize the view like this.

var panel = Ext.create('someview', {
   someProperty: 'Some Value'
});

After the view is shown the parameter that I pass to someProperty is shown as well. But the thing is, I want to change someProperty after the view is shown. Can I do that? and if yes, how ? I mean I can change it like this

panel.someProperty = 'Some New Value';

but the view does not get effected itself.

Upvotes: 0

Views: 3210

Answers (1)

kevhender
kevhender

Reputation: 4405

You will want to add a member function to your panel class to do the actual work of updating what is shown on the screen:

setSomeProperty: function(prop) {
    this.down('#someContainer').update({someProperty: prop});
}

Upvotes: 1

Related Questions