声明默认值在配置

Question

我有一个情况我有在列布局具有交替宽度的多个组件，即0.75然后0.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配置没有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); 
    } 
});