Ext grid合并单元格

最新推荐文章于 2019-04-01 13:12:40 发布

works001

最新推荐文章于 2019-04-01 13:12:40 发布

阅读量446

点赞数

分类专栏： Ext 文章标签： EXT 单元测试 CSS JavaScript HTML ViewUI

本文链接：https://blog.csdn.net/works001/article/details/83641170

版权

Ext 专栏收录该内容

39 篇文章 0 订阅

订阅专栏

1.js代码
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:'xiaowang@easyjf.com',
sex:'男',
bornDate:'1991-4-4'},
{id:2,
name:'小李',
email:'xiaoli@easyjf.com',
sex:'男',
bornDate:'1992-5-6'},
{id:3,
name:'小兰',
email:'xiaoxiao@easyjf.com',
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:"学生基本信息管理",
height:200,
width:600,
cm:colM,
store:store,
view:new MyGridView(viewConfig),
autoExpandColumn:3
});
});

2.html代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>extjs示例测试</title>
<link rel="stylesheet" type="text/css" href="plugins/extjs/ext-2.0/resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="manage/skins/default/stylesheets/style.css" />
<link href="/stylesheet/vifir.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="plugins/extjs/ext-2.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="plugins/extjs/ext-2.0/ext-all.js"></script>
<script type="text/javascript" src="editor.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>

程序运行效果

转自 http://www.vifir.com/bbs/html/20080625/1441807.html

works001

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Ext grid合并单元格

1.js代码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 =...
复制链接

扫一扫

专栏目录