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

Question

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

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

Answer 1

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

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

在这个小提琴中，我使用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();
    }
});