Question

当我定义一个视图类时，我必须为子组件设置很多重复的配置。

以下是一个例子：

Ext.define('TEST.view.transaction.TransactionEditor', {
    extend: 'Ext.form.Panel',
    ...
    items: [{
        ...
        labelWidth:80,
        width: 230,
        tdAttrs: { style: 'padding: 10px 20px 10px 20px;' },
        ...
    },{
        ...
        labelWidth:80,
        width: 230,
        tdAttrs: { style: 'padding: 10px 20px 10px 20px;' }
        ...
    },
    ...
    ],
    ...
}

如您所见，labelWidth，width和style重复多次。我想使用一些常量或变量而不是这些幻数。在EXTJS中执行此操作的正确方法是什么？

更新：以下两种方法效果不佳。

使用默认值适用于labelWidth和width，但不适用于tdAttrs。

通过使用initComponent方法，组件停止显示。

initComponent：function（）{

    var tdAttrs = { style: 'padding: 10px 20px 10px 20px;' };
    Ext.apply(this,{
        items:[{
            tdAttrs:tdAttrs
        }]}
    );
    this.callParent(arguments);
},

UPDATE2：

我解决了tdAttrs无法使用方法1的问题.tdAttrs应该放在布局配置下而不是默认值。我不知道为什么，但这是工作代码。

layout: {
    type: 'table',
    // The total column count must be specified here
    columns: 4,
    tdAttrs: { style: 'padding: 5px 10px 5px 10px;' }
},
defaults:{
    labelWidth:70,
    width: 210
},
items: [/* include child components here */
    {
        ...
    },
    {
        ...
    },
    ...
]

对于initComponent方法，我仍然不知道如何做到这一点。请帮忙。

Answer 1

ExtJS中有各种DRY (Don't Repeat Yourself)方法。

如果在容器的所有适用子项中重复这些值，您可以使用defaults：

'It''s my Foo Bar'

如果他们不是，你可以定义变量：

Ext.define('TEST.view.transaction.TransactionEditor', {
    extend: 'Ext.form.Panel',
    defaults:{
        labelWidth:80,
        width: 230,
        tdAttrs: { style: 'padding: 10px 20px 10px 20px;' },
        queryMode:'local' // EXAMPLE: this will be added to all fields, but only have effect in combos!
    },

但不推荐，因为您有一个全局变量的混乱。将整个项目定义放入initComponent会更好，因为这样，变量就会保留在范围内：

var labelWidth=80,
...
Ext.define('TEST.view.transaction.TransactionEditor', {
    extend: 'Ext.form.Panel',
    ...
        labelWidth:labelWidth,

或者，如果所有这些都是某个xtype，但是跨多个容器，则派生一个特殊的Ext.define('TEST.view.transaction.TransactionEditor', { extend: 'Ext.form.Panel', initComponent:function() { var labelWidth = 80, width = 230; Ext.apply(this,{ items:[{ ... labelWidth:labelWidth, width: width, ... },{ ... labelWidth:labelWidth, width: width, ... }, ... ], ... } }); this.callParent(arguments); }，而不是

xtype

使用

items:[{
   xtype:'textfield',
   labelWidth:125,
},{
   xtype:'textfield',
   labelWidth:125,
},{
   xtype:'textfield',
   labelWidth:125,

将mytextfield定义为

items:[{
   xtype:'mytextfield'
},{
   xtype:'mytextfield'
},{
   xtype:'mytextfield'

Extjs 6：处理重复配置的最佳实践是什么

1 个答案: