您的位置:首页 > Web前端 > JavaScript

extjs 3.4 使用XTemplate 改变grid行的显示方式

2012-08-10 16:27 316 查看
为了对grid的行显示变得多样式,使内容的布局更定制。

效果图:



代码:

var data = [
{ 'id': 1, 'name': '小王', 'sex': '男' },
{ 'id': 2, 'name': '小李', 'sex': '男' },
{ 'id': 3, 'name': '小兰', 'sex': '女' }
];

var store = new Ext.data.JsonStore({
data: data,
fields: ['id', 'name', 'sex']
});

//创建模板
var tplCum = new Ext.XTemplate(
'<div><table style="border-bottom-style: groove; border-bottom-width: thin">',
'<tr>                                                              ',
'<td style="width:35px"></td>                                      ',
'    <td style="width:300px">                                      ',
'        <table><tr>                                               ',
'        <td style="width:100px">姓名:{name}</td>                 ',
'        <td style="width:100px">性别:{sex}</td>                  ',
'        <td >邮箱:</td>                                          ',
'        </tr></table>                                             ',
'        </td>                                                     ',
'    <td style="width:20px"></td>                                 ',
'</tr>                                                             ',
'<tr style="height:30px;color:blue;vertical-align: middle;">      ',
'    <td >意见:</td>                                              ',
'    <td ></td>                                                    ',
'    <td >提出时间:{Time}</td>                                    ',
'</tr>                                                             ', //每行以逗号隔开
'</table></div>                                                    '  //最后一行不用逗号
);

var AdviceGrid = new Ext.grid.GridPanel({
store: store,
height:300,
region: 'center',
autoScroll: true,
containerScroll: true,
stripeRows: true,
frame: true,
loadMask: {
msg: '数据加载中,请稍等......'
},
cm: new Ext.grid.ColumnModel([new Ext.grid.RowNumberer(),
{ header: "编号", dataIndex: "Id", tooltip: "编号", sortable: true, hidden: true, width: 50 },
//模板
{ text: '描述', xtype: 'templatecolumn', tpl: tplCum, width: 400 },
//按钮
{ header: "", dataIndex: "c_reply", width: 50,
renderer: function (value, cellmeta) { return "<INPUT type='button' value='回复'>";}
},
{ header: "", dataIndex: "c_agree", width: 50,
renderer: function (value, cellmeta) { return "<INPUT type='button' value='采纳'>"; }
}

]),
tbar: [{
pressed: true,
enableToggle: true,
text: 'add',
id: '_btnShowRead',
iconCls: 'add',
handler: function () {

}
}, '-', {
pressed: true,
enableToggle: true,
text: 'edit',
id: '_btnShowAll',
iconCls: 'edit',
handler: function () {

}
}],
bbar: new Ext.PagingToolbar({
pageSize: 20,
store: store,
displayInfo: true
})
});


Ps:模板要注意的地方{name}获取store里的值。

{ text: '描述', xtype: 'templatecolumn', tpl: tplCum, width: 400 },这句是设置模板列
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: 
相关文章推荐