如何在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