How do I change config options (minWidth) on the fly in ExtJS 4.0.5?

Question

I have an Ext.window.Window Component with minHeight and minWidth set in the config options like so:

config: {
         minWidth: 860,
         minHeight: 580
        },

Now I want to change these properties in a function like so:

Ext.getCmp('x').setMinWidth(1280);

but that Setter doesn't exist in ExtJS 4.0.5 yet. (In later versions it does)

I also tried doing this:

Ext.getCmp('x').config.minWidth = 1280;

but it also doesn't work.

Thanks in advance.

Answer 1

In ExtJS Window you can use updateLayout method after changing config value.

updateLayout updates this component's layout. If this update effects this components ownerCt, that component's updateLayout method will be called to perform the layout instead. Otherwise, just this component (and its child items) will layout.

Here I have created and sencha fiddle demo. It will show how is working, Hope this will help you to solve your problem or achieve your requirement.

Ext.create('Ext.window.Window', {
    title: 'Hello',
    minWidth: 400,
    minHeight: 300,
    layout: 'vbox',
    items: [{ // Let's put an empty grid in just to illustrate fit layout
        xtype: 'grid',
        flex: 1,
        width: '100%',
        border: false,
        store: {
            fields: ['name', 'email', 'phone'],
            data: {
                'items': [{
                    'name': 'Lisa',
                    "email": "[email protected]",
                    "phone": "555-111-1224"
                }, {
                    'name': 'Bart',
                    "email": "[email protected]",
                    "phone": "555-222-1234"
                }, {
                    'name': 'Homer',
                    "email": "[email protected]",
                    "phone": "555-222-1244"
                }, {
                    'name': 'Marge',
                    "email": "[email protected]",
                    "phone": "555-222-1254"
                }]
            },
            proxy: {
                type: 'memory',
                reader: {
                    type: 'json',
                    root: 'items'
                }
            }
        },
        columns: [{
            text: 'Name',
            dataIndex: 'name'
        }, {
            text: 'Email',
            dataIndex: 'email',
            flex: 1
        }, {
            text: 'Phone',
            dataIndex: 'phone'
        }],
    }, {
        xtype:'button',
        text: 'Update min height and width with Random Number',
        height: 40,
        margin: 10,
        width:'100%',
        renderTo: Ext.getBody(),
        handler: function () {
            /**
             * Returns a random integer between min (inclusive) and max (inclusive)
             * Using Math.round() will give you a non-uniform distribution!
             */
            function getRandomInt(min, max) {
                return Math.floor(Math.random() * (max - min + 1)) + min;
            }

            var num = getRandomInt(300, 600),
                wind = this.up('window');
            wind.minHeight = num;
            wind.minWidth = num;
            wind.updateLayout();
        }
    }]
}).show();