ExtJs Grid GroupingView 单击分组标题不展开子项目2

上一篇文章写的程序可以封装在一个文件里，比如：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);
 });

 

 

 

 http://blog.sina.com.cn/s/blog_454fbf740100gjqe.html