聲明默認值在配置

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); 
    } 
});