Ext grid合并单元格

babydeed

浏览: 238793 次
性别:
来自: 北京

最近访客更多访客>>

xuganggogo

lieutc2010

asd1112131

stranger306

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

EXT 单元测试 CSS JavaScript HTML

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

分享到：

java 日期工具类 | Ext中如何使窗体总在最前面

2010-06-09 16:04
浏览 5546
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论