ExtJS的 - 最好的方式來顯示我使用ExtJS的數據

Question

，我想顯示像波紋管

我的動態數據我使用的xtype：displayfield，但我認爲這不是很好，我不能用它來製作像我圖片

items: [ 

    { 
      xtype: 'displayfield', 
      style: 'border: 1px solid #CCCCCC', 
      fieldLabel: 'a', 
      name: 'a', 
      value: 'a' 
     }, { 
      xtype: 'displayfield', 
      style: 'border: 1px solid #CCCCCC', 
      fieldLabel: 'b', 
      name: 'b', 
      value: 'b' 
    }], 

有什麼想法嗎？怎麼做，謝謝

Answer 1

對於這樣一個複雜的佈局，並考慮到你顯然只需要顯示數據，我會去與一個組件custom template。通過這種方式，您可以使用HTML & CSS進行演示。

這裏的，例如如何使一個可重複使用的面板：

Ext.define('My.BudgetPanel', { 
    extend: 'Ext.Panel' 

    ,tpl: '<table>' 
     // notice template variables 
     + '<tr><td>{definedProject}</td><td>{definedPM}</td></tr>' 
     + '</table>' 
}); 

您可以在創建它傳遞您的數據：

var panel = Ext.create('My.BudgetPanel', { 
    data: { 
     definedProject: 'My Project' 
     ,definedPM: 'Foo Bar' 
    } 
}); 

你還可以用新的數據後更新：

panel.update({definedProject: 'My Project 2', definedPM: 'Baz Bat'});