请问Ext 单元格怎么合并

我唯一不多的几个demo 送给你了别忘了结贴啊~~~
MyGridView = Ext.extend(Ext.grid.GridView, {
renderHeaders : function() {
var cm = this.cm, ts = this.templates;
var ct = ts.hcell, ct2 = ts.mhcell; var cb = [], sb = [], p = {}, mcb = [];
for (var i = 0, len = cm.getColumnCount(); i < len; i++) {
p.id = cm.getColumnId(i);
p.value = cm.getColumnHeader(i) || "";
p.style = this.getColumnStyle(i, true);
if (cm.config[i].align == 'right') {
p.istyle = 'padding-right:16px';
}
cb[cb.length] = ct.apply(p);
if (cm.config[i].mtext)
mcb[mcb.length] = ct2.apply({
value : cm.config[i].mtext,
mcols : cm.config[i].mcol
});
}
var s = ts.header.apply({
cells : cb.join(""),
tstyle : 'width:' + this.getTotalWidth() + ';',
mergecells : mcb.join("")
});
return s;
}
});
viewConfig = {
templates : {
header : new Ext.Template(
'<table border="0" cellspacing="0" cellpadding="0" style="{tstyle}">',
'<thead><tr class="x-grid3-hd-row">{mergecells}</tr>'
+ '<tr class="x-grid3-hd-row">{cells}</tr></thead>',
"</table>"),
mhcell : new Ext.Template(
'<td class="x-grid-cell" colspan="{mcols}"><div align="center"><b>{value}</b></div>',
"</td>")
}
};
Ext.onReady(function() {
var data = [{
id : 1,
name : '小王',
email : '[email protected]',
sex : '男',
bornDate : '1991-4-4'
}, {
id : 2,
name : '小李',
email : '[email protected]',
sex : '男',
bornDate : '1992-5-6'
}, {
id : 3,
name : '小兰',
email : '[email protected]',
sex : '女',
bornDate : '1993-3-7'
}];
var store = new Ext.data.JsonStore({
data : data,
fields : ["id", "name", "sex", "email", {
name : "bornDate",
type : "date",
dateFormat : "Y-n-j"
}]
}); var colM = new Ext.grid.ColumnModel([{
header : "姓名",
mtext : "基本信息",
mcol : 2,
dataIndex : "name",
sortable : true,
editor : new Ext.form.TextField()
}, {
header : "性别",
dataIndex : "sex",
editor : new Ext.form.ComboBox({
transform : "sexList",
triggerAction : 'all',
lazyRender : true
})
}, {
header : "出生日期",
dataIndex : "bornDate",
mtext : "其它信息",
mcol : 2,
width : 120,
renderer : Ext.util.Format.dateRenderer('Y年m月d日'),
editor : new Ext.form.DateField({
format : 'Y年m月d日'
})
}, {
header : "电子邮件",
dataIndex : "email",
sortable : true,
editor : new Ext.form.TextField()
}]); var grid = new Ext.grid.EditorGridPanel({
renderTo : "hello",
title : "合并单元格DEMO",
height : 200,
width : 600,
cm : colM,
store : store,
view : new MyGridView(viewConfig),
autoExpandColumn : 3
});
});
html部分
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>ccc.html</title>

    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
   <!-这里换成你的Ext引用文件路径别复制我的哈呵呵-->
    <link rel="stylesheet" type="text/css" href="ext-2.0/resources/css/ext-all.css">
<script type="text/javascript" src="ext-2.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-2.0/ext-all.js"></script>

  </head>

  <body>
  <div id="box"></div>
<div id="hello"></div>
<select name="sexList" id="sexList" style="display: none;">
      <option>男</option>
      <option>女</option>
</select>  </body>
</html>

调试易

请问Ext 单元格怎么合并

解决方案 »