如何獲得ExtJs中的行標題功能？

我想呈現像描述如下：如何獲得ExtJs中的行標題功能？

+-----------------+------------+---------------+ 
|     | Column 1 | Column 2 | 
+------------------------------+---------------+ 
| Row Header 1 | ...  |    | 
+------------------------------+---------------+ 
| Row Header 2 |   |    | 
+------------------------------+---------------+ 
| Row Header 3 |   |    | 
+----------------------------------------------+

我的理解，實現列標題的方式，有很多可用的文件也是如此。例如http://docs.sencha.com/extjs/4.2.3/extjs-build/examples/build/KitchenSink/ext-theme-neptune/#grouped-header-grid

但我不能得到一個有行標題。如何從Jason文件中獲取並呈現與行和列屬性相對應的數據？

來源

2014-09-25 Snehal Masne

因此，網格將有三列：

columns:[{ 
    dataIndex:'rowHeader' 
},{ 
    text:'Column 1', 
    dataIndex:'column1' 
},{ 
    text:'Column 2', 
    dataIndex:'column2' 
}]

，並從商店與模型加載數據fields:['rowHeader','column1','column2']

這會，如果它是一個JSON店，預計該數據將由服務器以格式提交給他

{success:true,data:[ 
    {rowHeader:'RowHeader 1',column1:'',column2:''}, 
    {rowHeader:'RowHeader 2',column1:'',column2:''}, 
    {rowHeader:'RowHeader 3',column1:'',column2:''} 
]}

如果要顯示以其他格式出現的數據，例如常用於稀疏矩陣格式：

{rowHeader:'RowHeader 1',columnHeader:'ColumnHeader 1',value:''}, 
{rowHeader:'RowHeader 2',columnHeader:'ColumnHeader 1',value:''}, 
{rowHeader:'RowHeader 3',columnHeader:'ColumnHeader 1',value:''}, 
{rowHeader:'RowHeader 1',columnHeader:'ColumnHeader 2',value:''}, 
{rowHeader:'RowHeader 2',columnHeader:'ColumnHeader 2',value:''}, 
{rowHeader:'RowHeader 3',columnHeader:'ColumnHeader 2',value:''}, 
{rowHeader:'RowHeader 1',columnHeader:'ColumnHeader 3',value:''}, 
{rowHeader:'RowHeader 2',columnHeader:'ColumnHeader 3',value:''}, 
{rowHeader:'RowHeader 3',columnHeader:'ColumnHeader 3',value:''}

，你必須將數據手動轉換成上述格式，因爲ExtJS的電網只是不能處理不具有每行一個記錄任何格式。

如果你想知道如何使細胞的rowHeader看起來像頭：

基本上，它歸結爲定義tdCls，也可能渲染器，在列。你可能想看看API文檔在http://docs.sencha.com/extjs/4.2.2/#!/api/Ext.grid.column.Column-cfg-tdCls和http://docs.sencha.com/extjs/4.2.2/#!/api/Ext.grid.column.Column-cfg-renderer

然後，有在http://skirtlesden.com/articles/styling-extjs-grid-cells

來源

2014-09-25 12:41:16 Alexander

在我的情況下，列將被動態加載，這意味着我們不知道它們有多少，因此無法修復Json文件中的字段。但你的回答仍然給了我一些方向，我可以用它來渲染東西。非常感謝！ – 2014-09-26 10:05:29

如果您也對如何處理之前評論中提到的場景有所瞭解，那將會很棒。 – 2014-09-26 10:07:47

亞歷山大，請在這裏回答相關問題：http://stackoverflow.com/questions/28342132/how-to-have-headers-in-first-column-instead-of-regular-headers-in-top-row – 2015-02-05 10:57:53

該如何風格的ExtJS網格單元格指南如果您還沒有一個固定的JSON結構，你將不得不發送一個模式。我會建議使用即時可用的json格式，用於grid.reconfigure。

{"schema":[{dataIndex:'t1',name:'T1'}],"data":[{t1:'Val'},{t1:'Valo'}]}

現在，你就不會這樣把之前加載到店直接，但使用Ext.Ajax.request，然後準備商店（只需創建一個新的從架構中的字段）和電網（grid.reconfigure(columns,store)）數據使用store.loadRawData進入商店。

來源

2014-09-26 11:00:43 Alexander