extjs 3.4 使用XTemplate 改变grid行的显示方式
2012-08-10 16:27
316 查看
为了对grid的行显示变得多样式,使内容的布局更定制。
效果图:
代码:
Ps:模板要注意的地方{name}获取store里的值。
效果图:
代码:
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 },这句是设置模板列
相关文章推荐
- ExtJS 使用点滴 二 如何使用XTemplate基于同行的其他列的值,改变当前列的显示样式
- ExtJS中grid按照使用Expand插件、分组显示、中文拼音首字母排序、改变行背景、列背景、静态数据分页综合案例
- SharePoint 2013 中使用JSLink 来改变列表中某个字段或view(视图)的显示方式
- ExtJs学习笔记(21)-使用XTemplate结合WCF显示数据
- MYSQL:使用/G参数改变输出结果集的显示方式
- extjs中第一次访问有效,第二次访问出现部分组件无法显示的,动态改变组件的label值的方法,ExtJs中组件最好少使用ID属性(推荐更多使用Name属性)
- MYSQL:使用\G参数改变输出结果集的显示方式
- ios--MBProgressHUD(使用方式一)--在事件的执行过程中显示+指定显示时间长短
- 帝国 标签模板 使用程序代码 自定义 时间显示方式
- 使用递归的方式显示tree
- 如何使用JS等比例改变显示图片的大小
- 使用ExtJS GridPanel从Web Service 获取、绑定和显示数据
- [转载] 使用IValueConverter接口实现自定义绑定数据的显示方式
- shell中使用echo命令改变输出显示样式
- 在Extjs3.4中使用CKEditor3.6.1
- ExtTag,如果你不想写extjs那么麻烦的代码可以尝试使用html方式的方法来创建extjs控件.
- 使用ExtJs 来显示数据,并实现数据的分页功能
- GridView使用技巧之:根据绑定的内容改变单元格(或者行)的显示样式
- 利用vmstat命令监控Linux资源使用并将数据通过图形化方式显示
- 使用Windows API获取和改变当前显示设置