如何在ExtJS 4.0.5中即时更改配置选项（minWidth）？

Question

我有一个Ext.window.Window组件，在配置选项中设置了minHeight和minWidth，如下所示：

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

现在，我想在像这样的函数中更改这些属性：

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

但是Extender 4.0.5中尚不存在该Setter。 （在更高版本中会）

我也尝试这样做：

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

但它也不起作用。

提前致谢。

Answer 1

在ExtJS 窗口中 ，可以在更改配置值后使用updateLayout方法。

updateLayout更新此组件的布局。 如果此更新影响了此组件ownerCt，则将调用该组件的updateLayout方法来执行布局。 否则，将仅布局此组件（及其子项）。

在这里，我创建了sencha小提琴演示。 它将显示工作方式，希望这将帮助您解决问题或达到您的要求。

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": "lisa@simpsons.com",
                    "phone": "555-111-1224"
                }, {
                    'name': 'Bart',
                    "email": "bart@simpsons.com",
                    "phone": "555-222-1234"
                }, {
                    'name': 'Homer',
                    "email": "home@simpsons.com",
                    "phone": "555-222-1244"
                }, {
                    'name': 'Marge',
                    "email": "marge@simpsons.com",
                    "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();