Question

我的情况是我在列布局中有许多组件，其宽度是交替的，即 .75 ，然后 .25 。

Ext.define('MyApp.view.TestView', {
    extend: 'Ext.panel.Panel',
    layout: 'column',

    items: [{
        xtype: 'textfield',
        columnWidth: .75
    }, {
        xtype: 'textfield',
        columnWidth: .25,
    }, {
        xtype: 'textfield',
        columnWidth: .75
    }, {
        xtype: 'textfield',
        columnWidth: .25,
    }, {
        xtype: 'textfield',
        columnWidth: .75
    }, {
        xtype: 'textfield',
        columnWidth: .25,
    }

    ]
});

Ext.onReady(function() {
    Ext.create('MyApp.view.TestView', {
        renderTo: Ext.getBody(),
        width: 400
    });
});

有没有办法在配置对象中存储这两个值？每次有人想要宽度变化时我都不想改变一切。我无法设置默认值，因为它不只是我想要更改的一个值。

我当时认为可能以某种方式将这些值应用于构造函数中的配置对象，或者我认为可能存在这样的解决方案：

Ext.define('MyApp.view.TestView', {
    extend: 'Ext.panel.Panel',
    layout: 'column',

    config: {
        colWidth1: .75,
        colWidth2: .25
    }


    items: [{
        xtype: 'textfield',
        columnWidth: 'colWidth1'
    }, {
        xtype: 'textfield',
        columnWidth: 'colWidth2'
    }, {
        xtype: 'textfield',
        columnWidth: 'colWidth1'
    }, {
        xtype: 'textfield',
        columnWidth: 'colWidth2'
    }, {
        xtype: 'textfield',
        columnWidth: 'colWidth1'
    }, {
        xtype: 'textfield',
        columnWidth: 'colWidth2'
    }

    ]
});

Ext.onReady(function() {
    Ext.create('MyApp.view.TestView', {
        renderTo: Ext.getBody(),
        width: 400
    });
});

https://fiddle.sencha.com/#fiddle/1ccj

Answer 1

最简单的选择是在initComponent方法中定义项目，因为我不认为可以使用声明性配置将内容链接到配置选项。

不幸的是，我认为您不能使用ViewModel和bind配置，因为columnWidth配置没有设置器。

查看这个小提琴的例子 - https://fiddle.sencha.com/fiddle/1ccq/

Ext.define('MyApp.view.TestView', {
    extend: 'Ext.panel.Panel',
    layout: 'column',


    initComponent: function(){
        var colWidth1 = .75,
            colWidth2 = .25;

        Ext.apply(this, {
            items: [{
                xtype: 'textfield',
                columnWidth: colWidth1
            }, {
                xtype: 'textfield',
                columnWidth: colWidth2
            }, {
                xtype: 'textfield',
                columnWidth: colWidth1
            }, {
                xtype: 'textfield',
                columnWidth: colWidth2
            }, {
                xtype: 'textfield',
                columnWidth: colWidth1
            }, {
                xtype: 'textfield',
                columnWidth: colWidth2
            }
            ]
        });

        this.callParent(arguments);
    }
});

在Config中声明默认值

1 个答案: