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

Question

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

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

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

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

但是 Setter 在 ExtJS 4.0.5 中还不存在。（在以后的版本中会）

我也试过这样做：

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

但它也不起作用。

提前致谢。

Answer 1

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

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

我在这里创建了 sencha fiddle 演示。它将显示工作原理，希望这将帮助您解决问题或实现您的要求。

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

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

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

javascript

extjs

extjs4

single-page-application