上一篇文章写的程序可以封装在一个文件里,比如:GroupingViewExpend.js
仅仅哪些程序还是不足实现所有效果的,下面的代码估计就有帮助了:
var realheight = document.documentElement.clientHeight;
var RowCount = Math.floor((realheight-300)/24);
if (RowCount<0){RowCount=1;}
var reader11 = new Ext.data.JsonReader({
root: 'data',
totalProperty: 'totalCount'
},[
{name: 'proj_id'},
{name: 'proj_bh'},
{name: 'proj_mc'},
{name: 'dwgc_bh'},
{name: 'dwgc_mc'},
{name: 'proj_jsdw'},
{name: 'proj_wtdw'},
{name: 'proj_zxlx'},
{name: 'dwgc_xmfzr'},
{name: 'dwgc_htqd'},
{name: 'dwgc_lxr'},
{name: 'dwgc_zt'},
{name: 'dwgc_djsj'},
{name: 'proj_ssje'}
]);
var gs11= new Ext.data.GroupingStore({
proxy: new Ext.data.HttpProxy({
url: contextPath + '/servlets/XiangMuGuanLi_WeiWanCheng'
}),
reader: reader11,
groupField: 'proj_id',
sortInfo:{field: 'bh', direction: "ASC"},
remoteSort: true
});
//未完成的项目内容-start//
var weiwanchengxiangmu = new Ext.grid.GridPanel({
ds: gs11,
height: 100,
frame: false,
border: false,
loadMask : true,
bodyStyle: 'width:100%',
stripeRows: true,//斑马线效果
columns: [
//new Ext.grid.RowNumberer(),
new Ext.grid.RowNumberer({
renderer : function(v, p, record, rowIndex){
if(this.rowspan){
p.cellAttr = 'rowspan="'+this.rowspan+'"';
}
if(Ext.isEmpty(this.lastGroupId)||this.lastGroupId!=record._groupId){
this._index=1;
}else{
this._index++;
}
this.lastGroupId = record._groupId;
return this._index;
}
}),
{header: '项目ID', dataIndex: 'proj_id', width: 70, hidden:true},
{header: '项目编号', dataIndex: 'proj_bh', width: 100, hidden:true},
{header: '单位工程编号', dataIndex: 'dwgc_bh', width: 120},
{header: '单位工程名称', dataIndex: 'dwgc_mc', width: 160},
{header: '建设单位', dataIndex: 'proj_jsdw', width: 160, hidden:true},
{header: '委托单位', dataIndex: 'proj_wtdw', width: 160, hidden:true},
{header: '咨询类型', dataIndex: 'proj_zxlx', width: 100},
{header: '项目负责人', dataIndex: 'dwgc_xmfzr', width: 70},
{header: '合同签订', dataIndex: 'dwgc_htqd', width: 70},
{header: '联系人', dataIndex: 'dwgc_lxr', width: 70},
{header: '状态', dataIndex: 'dwgc_zt', width: 70},
{header: '登记时间', dataIndex: 'dwgc_djsj', width: 120},
{header: '送审金额', dataIndex: 'proj_ssje', width: 80}
],
view: new Ext.grid.GroupingView({
columnsText:'显示列/隐藏列',
enableGroupingMenu: false,
//groupByText:'按此分组', //当enableGroupingMenu为true时显示
//showGroupsText:'是否显示分组', //当enableGroupingMenu为true时显示
emptyGroupText:'<font style="color:#333">空</font>',
hideGroupedColumn: false,
//forceFit: true, //字段自适应屏幕宽度
startCollapsed: true,//一开始进到grid这页,它的group是合起还是展开
groupTextTpl: '<span style="font-size:12px;">'+
'<input type="radio" id="wmradio{[values.rs[0].data["proj_id"]]}" name="isOn"> '+
'项目编号:{[values.rs[0].data["proj_bh"]]},'+
'项目名称:{[values.rs[0].data["proj_mc"]]},'+
'建设单位:{[values.rs[0].data["proj_jsdw"]]},'+
'委托单位:{[values.rs[0].data["proj_wtdw"]]} '+
'({["单位工程数:"]}{[values.rs.length]} {["个"]})'+
'</span>'
}),
bbar: new Ext.PagingToolbar({
pageSize: RowCount,
store: gs11,
displayInfo: true,
displayMsg: '显示第 {0} 条到 {1} 条记录,一共 {2} 条',
emptyMsg: "没有记录"
}),
tbar: [{
text: '查看项目详细信息',
iconCls: 'icon-xmxq-found',
handler : function(){
alert('function is null , call the manager to add it');
}
},'-',{
text: '修改项目登记信息',
iconCls: 'icon-xmdj-modify',
handler : function(){
alert('function is null , call the manager to add it');
}
},'-',{
text: '删除项目',
iconCls: 'icon-xm-del',
handler : function(){
alert('function is null , call the manager to add it');
}
},'-',{
text: '咨询项目EXCEL报表',
iconCls: 'icon-zxxm-report',
handler : function(){
alert('function is null , call the manager to add it');
}
},'-',{
text: '咨询项目EXCEL报表(A3)',
iconCls: 'icon-zxxm-report-a3',
handler : function(){
alert('function is null , call the manager to add it');
}
},'-',{
text: '修改项目安排信息',
iconCls: 'icon-xmap-modify',
handler : function(){
alert('function is null , call the manager to add it');
}
},'-',{
text: '查看财务收款记录',
iconCls: 'icon-cwscjl-view',
handler : function(){
alert('function is null , call the manager to add it');
}
}]
});
weiwanchengxiangmu.addListener('cellclick',function(grid, rowIndex, col, e){
var record = weiwanchengxiangmu.getStore().getAt(rowIndex); //Get the Record
var fieldName = weiwanchengxiangmu.getColumnModel().getDataIndex(1); //Get field 0 name
var data = record.get(fieldName);
document.getElementById("wmradio"+data).checked=true;
//版本:ext3.0,id格式:ext-gen24-gp-proj_id-1-hd
changebgcolor(listcount,"ext-gen24-gp-proj_id-"+data+"-hd");
});
weiwanchengxiangmu.addListener('rowdblclick',function(grid, rowIndex, e){
var record = weiwanchengxiangmu.getStore().getAt(rowIndex); //Get the Record
var fieldName = weiwanchengxiangmu.getColumnModel().getDataIndex(3); //Get field 0 name
var data = record.get(fieldName);
alert('选中行的单位工程编号是:'+data);
});
//未完成的项目内容-end/
//=================================================================================
有几个地方需要注意一下,我在下面列一下:
1...............................................
//实现分组下的行数从1开始到总数,每个分组都是从1开始的哦~
new Ext.grid.RowNumberer({
renderer : function(v, p, record, rowIndex){
if(this.rowspan){
p.cellAttr = 'rowspan="'+this.rowspan+'"';
}
if(Ext.isEmpty(this.lastGroupId)||this.lastGroupId!=record._groupId){
this._index=1;
}else{
this._index++;
}
this.lastGroupId = record._groupId;
return this._index;
}
})
2..............................................
//分组标题内容显示自定义内容,包括radio组件,注意id的命名哦~
groupTextTpl: '<span style="font-size:12px;">'+
'<input type="radio" id="wmradio{[values.rs[0].data["proj_id"]]}" name="isOn"> '+
'项目编号:{[values.rs[0].data["proj_bh"]]},'+
'项目名称:{[values.rs[0].data["proj_mc"]]},'+
'建设单位:{[values.rs[0].data["proj_jsdw"]]},'+
'委托单位:{[values.rs[0].data["proj_wtdw"]]} '+
'({["单位工程数:"]}{[values.rs.length]} {["个"]})'+
'</span>'
3...............................................
//cellclick事件,单击cell时,自动选中当前所在组的标题
weiwanchengxiangmu.addListener('cellclick',function(grid, rowIndex, col, e){
var record = weiwanchengxiangmu.getStore().getAt(rowIndex); //Get the Record
var fieldName = weiwanchengxiangmu.getColumnModel().getDataIndex(1); //Get field 0 name
var data = record.get(fieldName);
document.getElementById("wmradio"+data).checked=true;
//版本:ext3.0,id格式:ext-gen24-gp-proj_id-1-hd
changebgcolor(listcount,"ext-gen24-gp-proj_id-"+data+"-hd");
});
//rowdblclick事件,双击一行时,弹出信息
weiwanchengxiangmu.addListener('rowdblclick',function(grid, rowIndex, e){
var record = weiwanchengxiangmu.getStore().getAt(rowIndex); //Get the Record
var fieldName = weiwanchengxiangmu.getColumnModel().getDataIndex(3); //Get field 0 name
var data = record.get(fieldName);
alert('选中行的单位工程编号是:'+data);
});