用ext grid 怎样做到复杂的表头设计？

Question

表头有多行组成，并且表头的线（有的单元格的线）可以设置不显示，

Answer 1

Ext.namespace("Ext.ux.plugins");
Ext.ux.plugins.GroupHeaderGrid = function(config) {
Ext.apply(this, config);
};Ext.extend(Ext.ux.plugins.GroupHeaderGrid, Ext.util.Observable, {
init: function(grid) {
var v = grid.getView();
v.beforeMethod('initTemplates', this.initTemplates);
v.renderHeaders = this.renderHeaders.createDelegate(v, [v.renderHeaders]);
        v.afterMethod('onColumnWidthUpdated', this.updateGroupStyles);
        v.afterMethod('onAllColumnWidthsUpdated', this.updateGroupStyles);
v.afterMethod('onColumnHiddenUpdated', this.updateGroupStyles);
v.getHeaderCell = this.getHeaderCell;
v.updateSortIcon = this.updateSortIcon;
v.getGroupStyle = this.getGroupStyle;
}, initTemplates: function() {
var ts = this.templates || {};
if (!ts.gcell) {
ts.gcell = new Ext.Template(
'<td class="x-grid3-hd {cls} x-grid3-td-{id}" style="{style}">',
'<div {tooltip} class="x-grid3-hd-inner x-grid3-hd-{id}" unselectable="on" style="{istyle}">{value}</div>',
'</td>'
);
}
this.templates = ts;
}, renderHeaders: function(renderHeaders) {
var ts = this.templates, rows = [], tw = this.getTotalWidth();
for (var i = 0; i < this.cm.rows.length; i++) {
var r = this.cm.rows[i], cells = [], col = 0;
for (var j = 0; j < r.length; j++) {
var c = r[j];
c.colspan = c.colspan || 1;
c.col = col;
col += c.colspan;
var gs = this.getGroupStyle(c);
cells[j] = ts.gcell.apply({
id: c.id || i + '-' + col,
cls: c.header ? 'ux-grid-hd-group-cell' : 'ux-grid-hd-nogroup-cell',
style: 'width:' + gs.width + ';' + (gs.hidden ? 'display:none;' : '') + (c.align ? 'text-align:' + c.align + ';' : ''),
tooltip: c.tooltip ? (Ext.QuickTips.isEnabled() ? 'ext:qtip' : 'title') + '="' + c.tooltip + '"' : '',
value: c.header || '&#160;',
istyle: c.align == 'right' ? 'padding-right:16px' : ''
});
}
rows[i] = ts.header.apply({
tstyle: 'width:' + tw + ';',
cells: cells.join('')
});
}
rows[rows.length] = renderHeaders.call(this);
return rows.join('');
}, getGroupStyle: function(c) {
var w = 0, h = true;
for (var i = c.col; i < c.col + c.colspan; i++) {
if (!this.cm.isHidden(i)) {
var cw = this.cm.getColumnWidth(i);
if(typeof cw == 'number'){
w += cw;
}
h = false;
}
}
return {
width: (Ext.isBorderBox ? w : Math.max(w - this.borderWidth, 0)) + 'px',
hidden: h
}
}, updateGroupStyles: function(col) {
var tables = this.mainHd.query('.x-grid3-header-offset > table'), tw = this.getTotalWidth();
for (var i = 0; i < tables.length; i++) {
tables[i].style.width = tw;
if (i < this.cm.rows.length) {
var cells = tables[i].firstChild.firstChild.childNodes;
for (var j = 0; j < cells.length; j++) {
var c = this.cm.rows[i][j];
if ((typeof col != 'number') || (col >= c.col && col < c.col + c.colspan)) {
var gs = this.getGroupStyle(c);
cells[j].style.width = gs.width;
cells[j].style.display = gs.hidden ? 'none' : '';
}
}
}
}
}, getHeaderCell : function(index){
return this.mainHd.query('td.x-grid3-cell')[index];
}, updateSortIcon : function(col, dir){
var sc = this.sortClasses;
var hds = this.mainHd.select('td.x-grid3-cell').removeClass(sc);
hds.item(col).addClass(sc[dir == "DESC" ? 1 : 0]);
}
});Ext.onReady(function(){
Ext.BLANK_IMAGE_URL="../../../../../resources/images/default/s.gif";
var GroupHeaderGrid = function() {
     GroupHeaderGrid.superclass.constructor.call(this, {
     title: '表头合并范例',
     renderTo : "groupHeaderGrid",
     height : 200,
store: new Ext.data.SimpleStore({
fields: ['name', 'sex', 'position', 'record', 'university', 'middleSchool', 'primarySchool'],
data: [['张三','男','项目经理','本科','XX大学','XX中学','XX小学'],
   ['李四','男','技术总监','硕士','XX大学','XX中学','XX小学'],
   ['刘虹','女','技术架构师','专科','XX大学','XX中学','XX小学']]
}),
colModel: new Ext.grid.ColumnModel({
columns: [
{header: "姓名", width: 120,  dataIndex: 'name'},
{header: "性别", width: 120,  dataIndex: 'sex'},
{header: "职位", width: 120,  dataIndex: 'position'},
{header: "学历", width: 120,  dataIndex: 'record'},
{header: "就读大学", width: 120,  dataIndex: 'university'},
{header: "就读中学", width: 120,  dataIndex: 'middleSchool'},
{header: "就读小学", width: 120,  dataIndex: 'primarySchool'}
],
defaultSortable: true,
rows: [[
{},
{},
{},
{},
{header: '教育经历', colspan: 3, align: 'center'}

]
]
}),
enableColumnMove: false,
viewConfig: {
forceFit: true
},
plugins: [new Ext.ux.plugins.GroupHeaderGrid()]
        });
};
Ext.extend(GroupHeaderGrid, Ext.grid.GridPanel);
new GroupHeaderGrid();

    var hideMask = function () {
        Ext.get('loading').remove();
        Ext.fly('loading-mask').fadeOut({
            remove:true
        });
    }.defer(250);
});
这个是扩展的

Answer 2

ext3.0中有多表头的扩展组件。但是没有设置是否显示线条的功能，不够灵活

Answer 3

TO：二楼，
这个是用EXT2。0还是3。0实现的呀？妈呀，也太复杂了耶！！

Answer 4

TO；三楼，
3。0中example的grid中的例子有吗，今天找了下，没看到呢，哪个是多表头的扩展组件啊，再给指点下呗，谢了，呵

Answer 5

多表头的例子:http://www.sencha.com/deploy/dev/examples/grid/ColumnHeaderGroup.html