如何在extjs中組頁眉網格？

Question

如何組低於ExtJS的像網格標題：

| -------------- A1頭 ------------ | - ------------ B1標題 --------------- |

| ---- A2Header --- | --- A3Header --- | ---- B2Header --- | --- B3Header ------ |

| ----- A2Data ------ | ---- A3數據------ | ----- B2數據------ | ----- B3數據------- |

| ----- A2數據------ | ---- A3數據------ | ----- B2數據------ | ----- B3數據------- |

我的代碼的ExtJS：

plColModel = new Ext.grid.ColumnModel([ 

    new Ext.grid.RowNumberer(), 
    { header: "A2Header", dataIndex: 'A2Data' }, 
    { header: "A3Header", dataIndex: 'A3Data' }, 
    { header: "B2Header", dataIndex: 'B2Data' }, 
    { header: "B3Header", dataIndex: 'B3Data' } 
     ]); 

Answer 1

是指這樣的：

ColumnHeaderGroup

Answer 2

我記得我已經花了很多時間試圖瞭解在煎茶提供ColumnHeaderGroup的示例代碼。我幾天前製作了一個6級的列組標題，這並不困難。

把所有的列標題的對象爲下列頭對象鍵。最後頭的追隨者將成爲列的屬性：

var chstructure = { 
    'A1 header' : { 
     'A2Header' : {'A2Data' : {'A2Data' : {'dataIndex' : 'A2', 'width' : 100}}}, 
     'A3Header' : {'A3Data' : {'A3Data' : {'dataIndex' : 'A3', 'width' : 100}}} 
    }, 
    'B1 header' : { 
     'B2Header' : {'B2Data' : {'B2Data' : {'dataIndex' : 'B2', 'width' : 100}}}, 
     'B3Header' : {'B3Data' : {'B3Data' : {'dataIndex' : 'B3', 'width' : 100}}} 
    } 
}; 

你需要一些陣列把標題中：這些陣列將是您的列標題組中的行。您還需要一個fields數組：它將包含商店的字段。不要忘了初始化一些列跨度變量（我將它們命名爲len個ñ），將保留合併單元格每個列標題的計數（在這個例子中'A1 header'有2個孩子和'A2Header'只有1個），有的寬變量（wid n），用於每個報頭的寬度。

var Row1contents = [], Row2contents = [], Row3contents = [], Row4contents = []; 
var len1 = 0, len2 = 0, len3=0, wid1 = 0, wid2 = 0, wid3 = 0; 
var fields = []; 

現在，您可能最終會解析chstructure以檢索列標題。使用Ext.iterate爲：

Ext.iterate (chstructure, function(Row1, Row1structure){ 
    Ext.iterate (Row1structure, function(Row2, Row2structure){ 
     Ext.iterate (Row2structure, function(Row3, Row3structure){ 
      Ext.iterate (Row3contents, function(Row4, Row4structure){ 
       len1++;len2++;len3++; 
       wid1+=Row4structure['width']; 
       wid2+=Row4structure['width']; 
       wid3+=Row4structure['width']; 
       Row4contents.push({ 
        dataIndex: Row4structure['dataIndex'], 
        header: Row4, 
        width: Row4structure['width'] 
       }); 
       fields.push({ 
        type: 'int', // may be 'string' 
        name: Row4structure['dataIndex'] 
       }); 
      }); 
      Row3contents.push({ 
       header: Row3, 
       width: wid3, 
       colspan: len3 
      }); 
      len3=wid3=0; 
     }); 
     Row2contents.push({ 
      header: Row2, 
      width: wid2, 
      colspan: len2 
     }); 
     len2=wid2=0; 
    }); 
    Row1contents.push({ 
     header: Row1, 
     width: wid1, 
     colspan: len1 
    }); 
    len1=wid1=0; 
}); 

查看4個陣列在控制檯，並確保它們包含您設置的所有數據。最後一步是配置GridHeaderGroup插件的網格寬度。使用屬性

plugins: [new Ext.ux.grid.ColumnHeaderGroup({ 
    rows: [Row1Group, Row2Group, Row3Group] 
}); 

設置columns : Row4contents爲網格和fields : fields爲網格的商店。

快樂編碼！

Answer 3

下面是煎茶

http://dev.sencha.com/deploy/ext-3.4.0/examples/pivotgrid/people.html