Ext JS 中有没有办法判断组件是动态宽度还是静态宽度？

Question

我正在寻找一种方法来确定 Ext JS 组件是具有动态宽度还是静态宽度。例如，如果文本字段的宽度配置设置为 50，则无论父容器的宽度如何，该配置的静态宽度都会为 50。如果同一个组件的 flex 为 1，则组件的宽度将改为根据父容器的大小调整大小。同时，我知道组件的父容器布局也会影响子组件的宽度。

如何确定组件的宽度是否会随着父容器的大小而改变？

Answer 1

是的，您可以使用 initialConfig 的 ExtJS 组件。

initialConfig 对象在组件创建期间传递给构造函数。

在这个FIDDLE中，我使用window 和textfield 创建了一个演示。我在window 上实现了一个resize 事件并获取组件的动态宽度。我希望这将帮助/指导您实现您的要求。

代码片段

Ext.application({
    name: 'Fiddle',

    launch: function () {
        Ext.define('DemoModel', {
            extend: 'Ext.app.ViewModel',
            alias: 'viewmodel.demomodel',
            data: {
                textFieldWidth: null,
                initialWidth: null
            }
        });
        Ext.create('Ext.window.Window', {
            title: 'DEMO',
            viewModel: {
                type: 'demomodel'
            },
            width: 400,
            minWidth: 400,
            layout: {
                type: 'vbox',
                align: 'stretch'
            },
            bodyPadding: 10,
            items: [{
                xtype: 'textfield',
                width: 50,
                anchor: '100%',
                emptyText: 'Enter value here...',
                fieldLabel: 'Demo TEXT'
            }, {
                xtype: 'displayfield',
                fieldLabel: 'initial Width',
                bind: '{initialWidth}'
            }, {
                xtype: 'displayfield',
                fieldLabel: 'Dyanamic Width',
                bind: '{textFieldWidth}'
            }],
            listeners: {
                resize: function (cmp) {
                    var viewModel = cmp.getViewModel(),
                        textfield = cmp.down('textfield');
                    viewModel.set({
                        textFieldWidth: textfield.getWidth(),
                        initialWidth: textfield.initialConfig.width
                    });
                }
            }
        }).show();
    }
});