ExtJS4 grid表头分层并赋值
2016-08-26 14:49
381 查看
效果图:
Ext.define('V5.cxb.view.Grid', {
extend : 'Ext.grid.Panel',
columnLines : true,
xtype : 'cxbGrid',
border : 0,
id : 'cxb',
views : ['V5.cxb.view.DgEdit'],
requires : ['V5.cxb.view.DgEdit', 'V5.cxb.view.Tree'],
store : Ext.create('Ext.data.Store', {
fields : ['ywzl','ywdy',"name1", "name2", 'wt','gz','jy'],
data : [{
'ywzl':'业务条线1',
'ywdy':'业务单元1',
'name1' :'<a href="#">印章管理-张三</a>',
'name2' :'张霞</font> 李四',
'wt':'0',
'gz':'1',
'jy':'2'
}, {
'ywzl':'业务条线1',
'ywdy':'业务单元1',
'name1' : '<a href="#">信息的真实性、准确性-张霞</a>',
'name2' : '张霞',
'wt':'0',
'gz':'1',
'jy':'5'
}, {
'ywzl':'业务条线1',
'ywdy':'业务单元1',
'name1' : '<a href="#">督导检查-李艳</a>',
'name2' : '李艳',
'wt':'0',
'gz':'1',
'jy':'2'
}, {
'ywzl':'业务条线1',
'ywdy':'业务单元1',
'name1' : '<a href="#">员工异常行为管理-张三</a>',
'name2' : '张三',
'wt':'1',
'gz':'1',
'jy':'4'
}, {
'ywzl':'业务条线1',
'ywdy':'业务单元1',
'name1' : '<a href="#">人员招聘-李艳</a>',
'name2' : '李艳',
'wt':'0',
'gz':'1',
'jy':'1'
}, {
'ywzl':'业务条线1',
'ywdy':'业务单元1',
'name1' : '<a href="#">融资性担保公司-张三</a>',
'name2' : '张三',
'wt':'0',
'gz':'1',
'jy':'1'
}, {
'ywzl':'业务条线1',
'ywdy':'业务单元1',
'name1' : '<a href="#">房地产估价机构-张三</a>',
'name2' : '张三',
'wt':'0',
'gz':'1',
'jy':'4'
}, {
'ywzl':'业务条线1',
'ywdy':'业务单元1',
'name1' : '<a href="#">不良资产转让清收-张三</a>',
'name2' : '张霞',
'wt':'0',
'gz':'1',
'jy':'2'
}, {
'ywzl':'业务条线1',
'ywdy':'业务单元1',
'name1' : '<a href="#">不良资产核销问责-张三</a>',
'name2' : '张三',
'wt':'0',
'gz':'1',
'jy':'1'
}, {
'ywzl':'业务条线1',
'ywdy':'业务单元1',
'name1' : '<a href="#">不良资产重组-张三</a>',
'name2' : '李四',
'wt':'0',
'gz':'1',
'jy':'1'
}, {
'ywzl':'业务条线1',
'ywdy':'业务单元1',
'name1' : '<a href="#">张三-以物抵债-张三</a>',
'name2' : '李四',
'wt':'0',
'gz':'2',
'jy':'4'
}]
}),
selModel : Ext.create('Ext.selection.CheckboxModel', {
mode : "SIMPLE",
checkOnly:true,
width : 100
}),
columns : {
items : [{
text : '业务条线',
align:'center',
flex : 1,
dataIndex : 'ywzl'
},{
text : '业务单元',
align:'center',
flex : 1,
dataIndex : 'ywdy'
},{
text : '控制环节',
flex : 2,
dataIndex : 'name1'
}, {
text : '创建人',
align:'center',
flex : 1,
dataIndex : 'name2'
}, {
text : '问题性质',
columns:[{text:'问题',dataIndex:'wt',align:'center'},{text:'关注',dataIndex:'gz',align:'center'},{text:'建议',dataIndex:'jy',align:'center'}],
flex : 2,
dataIndex : 'name3'
},{
header : "附件",
flex : 1,
align:'center',
dataIndex : 'name5',
renderer : function() {
return '<a href="javascript:void(0)" id="upload" color="blue"><img src="1.jpg" height="14px"/></a>'
}
}]
}
}
});
Ext.define('V5.cxb.view.Grid', {
extend : 'Ext.grid.Panel',
columnLines : true,
xtype : 'cxbGrid',
border : 0,
id : 'cxb',
views : ['V5.cxb.view.DgEdit'],
requires : ['V5.cxb.view.DgEdit', 'V5.cxb.view.Tree'],
store : Ext.create('Ext.data.Store', {
fields : ['ywzl','ywdy',"name1", "name2", 'wt','gz','jy'],
data : [{
'ywzl':'业务条线1',
'ywdy':'业务单元1',
'name1' :'<a href="#">印章管理-张三</a>',
'name2' :'张霞</font> 李四',
'wt':'0',
'gz':'1',
'jy':'2'
}, {
'ywzl':'业务条线1',
'ywdy':'业务单元1',
'name1' : '<a href="#">信息的真实性、准确性-张霞</a>',
'name2' : '张霞',
'wt':'0',
'gz':'1',
'jy':'5'
}, {
'ywzl':'业务条线1',
'ywdy':'业务单元1',
'name1' : '<a href="#">督导检查-李艳</a>',
'name2' : '李艳',
'wt':'0',
'gz':'1',
'jy':'2'
}, {
'ywzl':'业务条线1',
'ywdy':'业务单元1',
'name1' : '<a href="#">员工异常行为管理-张三</a>',
'name2' : '张三',
'wt':'1',
'gz':'1',
'jy':'4'
}, {
'ywzl':'业务条线1',
'ywdy':'业务单元1',
'name1' : '<a href="#">人员招聘-李艳</a>',
'name2' : '李艳',
'wt':'0',
'gz':'1',
'jy':'1'
}, {
'ywzl':'业务条线1',
'ywdy':'业务单元1',
'name1' : '<a href="#">融资性担保公司-张三</a>',
'name2' : '张三',
'wt':'0',
'gz':'1',
'jy':'1'
}, {
'ywzl':'业务条线1',
'ywdy':'业务单元1',
'name1' : '<a href="#">房地产估价机构-张三</a>',
'name2' : '张三',
'wt':'0',
'gz':'1',
'jy':'4'
}, {
'ywzl':'业务条线1',
'ywdy':'业务单元1',
'name1' : '<a href="#">不良资产转让清收-张三</a>',
'name2' : '张霞',
'wt':'0',
'gz':'1',
'jy':'2'
}, {
'ywzl':'业务条线1',
'ywdy':'业务单元1',
'name1' : '<a href="#">不良资产核销问责-张三</a>',
'name2' : '张三',
'wt':'0',
'gz':'1',
'jy':'1'
}, {
'ywzl':'业务条线1',
'ywdy':'业务单元1',
'name1' : '<a href="#">不良资产重组-张三</a>',
'name2' : '李四',
'wt':'0',
'gz':'1',
'jy':'1'
}, {
'ywzl':'业务条线1',
'ywdy':'业务单元1',
'name1' : '<a href="#">张三-以物抵债-张三</a>',
'name2' : '李四',
'wt':'0',
'gz':'2',
'jy':'4'
}]
}),
selModel : Ext.create('Ext.selection.CheckboxModel', {
mode : "SIMPLE",
checkOnly:true,
width : 100
}),
columns : {
items : [{
text : '业务条线',
align:'center',
flex : 1,
dataIndex : 'ywzl'
},{
text : '业务单元',
align:'center',
flex : 1,
dataIndex : 'ywdy'
},{
text : '控制环节',
flex : 2,
dataIndex : 'name1'
}, {
text : '创建人',
align:'center',
flex : 1,
dataIndex : 'name2'
}, {
text : '问题性质',
columns:[{text:'问题',dataIndex:'wt',align:'center'},{text:'关注',dataIndex:'gz',align:'center'},{text:'建议',dataIndex:'jy',align:'center'}],
flex : 2,
dataIndex : 'name3'
},{
header : "附件",
flex : 1,
align:'center',
dataIndex : 'name5',
renderer : function() {
return '<a href="javascript:void(0)" id="upload" color="blue"><img src="1.jpg" height="14px"/></a>'
}
}]
}
}
});
相关文章推荐
- extjs4 grid column filter 对于多层表头,不能给当前有filter 的column增加css的解决办法
- ExtJS4学习--多表头Grid
- Extjs:把EditorGridPanel表头的全选checkbox去掉
- EXTJS4 grid表头重复的问题
- ExtJS4学习笔记(六)---多表头Grid
- Extjs学习 Grid多表头
- extjs 构建gridpanel多表头
- ExtJS Grid表头下拉菜单错乱问题
- EXTjs grid双层表头的实现
- extjs grid隐藏表头
- Extjs4 grid 表头header点击事件获取
- ExtJS中,将Grid表头中的全选复选框取消复选
- Extjs grid表头换行
- ExtJs获取grid表头的checkBox
- extjs中grid对于其中表单的表头的读取以及是否隐藏的判断
- 关于EXTJS 2.2.1版本在IE环境下Grid组件表头下拉菜单图标错位问题的解决
- 根据Extjs中grid列表表头自动排序导出数据的实例
- EXTJS中,取得当前grid下标,给可编辑表格赋值
- extjs grid 不显示表头
- ExtJS3 - 如何实现多表头Grid