在配置中声明默认值 [英] Declaring Default Values in Config

问题描述

在一种情况下，我在列布局中有多个具有交替宽度的组件，即 .75 然后是 .25 .

I have a situation where I have a number of components in a column layout with alternating width, ie .75 then .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
    });
});

有什么方法可以将这两个值存储在配置对象中?我不想每次有人要更改宽度时都必须更改所有内容.我无法设置默认值，因为它不仅是我要更改的值.

Is there any way of storing these two values in a config object? I don't want to have to change everything every time someone wants a width change. I can't set a default value, because it is not just one value which i want to change.

我在考虑可能以某种方式将这些值应用于构造函数中的config对象，或者我在考虑可能存在如下所示的解决方案:

I was thinking that it might be possible somehow to apply these values to the config object in a constructor, or I was thinking there might be a possible solution that looks like this :

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

推荐答案

最简单的选择是在initComponent方法中定义项目，因为我认为不可能使用声明性配置将事物链接到config选项.

The simplest option would be to define the items in the initComponent method as I don't think it's possible to link things to config options using declarative configuration.

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

Unfortunately I don't think you can use a ViewModel and the bind config as the columnWidth config doesn't have a setter.

以这个小提琴为例- 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);
    }
});

这篇关于在配置中声明默认值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！