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

来源：互联网发布：magnet仿真软件下载编辑：程序博客网时间：2024/05/01 22:15

ExtJs 3.0 Grid GroupingView 点击分组标题不展开子项目，双击才展开怎样实现？

ExtJs中的分组表格应用中，怎样实现单击分组标题选中该标题，双击或点击加号展开子项目？

默认是单击分组标题展开子项目。

我需要双击分组标题展开子项目；

单击分组标题，分组标题不展开，而是变为选中状态。

不知道该怎样实现？

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

调试了一天了，终于有点思路了，下面是我的解决方法：

自己总结出来的代码，能实现功能，若有更好的方法或者建议请指教!

加上一点效果，分组标题背景色效果：

//time1和time2控制双击效果；当time2-time1<300ms时，认为是双击
var time1 = 1;
var time2 = 1;

//用于判断双击的是否同一个分组标题
var extid='',extid2='';

//list存放标题id，用于实现单击分组标题显示背景色效果
var list = new Array(100);

//listcount：实际每页分组数
var listcount;

Ext.override(Ext.grid.GroupingView, {
 interceptMouse : function(e){
 var hd = e.getTarget('.x-grid-group-hd', this.mainBody);

 //////////////////////////////////////
 //hd!=null这个必须使用，为空时说明点击的不是分组标题，而是表格某行，
 // 不写当点击分组内容时firebug会报错
 if (hd != null){
 //获取当前分组标题的id赋给extid
 extid2 = extid;
 extid = hd.id;

 //下面是实现标题上的单选按钮选中效果：
 // 获取的id格式为： ext-gen24-gp-proj_id-1-hd ， ext-gen24-gp-proj_id-84-hd
 // 取其中的"id-"到"-hd"之间的数加上"wmradio"赋给wmradio_id
 // 例：wmradio_id="wmradio1"
 var left = extid.indexOf("id-")+3;
 var right = extid.indexOf("-hd");
 var wmradio_id = "wmradio"+extid.substring(left,right);
 document.getElementById(wmradio_id).checked=true;

 //背景色改变
 changebgcolor(listcount,extid);

 //下面是实现双击效果，当满足(time2-time1<300)&&(time2-time1>0)时，展开分组标题
 if(hd){
 e.stopEvent();
 if (e.button == 0){
 time1 = time2;
 time2 = new Date().getTime();
 if ((extid==extid2)&&(time2-time1<300)&&(time2-time1>0)){
 this.toggleGroup(hd.parentNode);
 }
 }
 }
 }
 //////////////////////////////////////
 },
 doRender : function(cs, rs, ds, startRow, colCount, stripe){
 if(rs.length < 1){
 return '';
 }
 var groupField = this.getGroupField(),
 colIndex = this.cm.findColumnIndex(groupField),
 g;

this.enableGrouping = !!groupField;

if(!this.enableGrouping || this.isUpdating){
 return Ext.grid.GroupingView.superclass.doRender.apply(
 this, arguments);
 }
 var gstyle = 'width:' + this.getTotalWidth() + ';',
 gidPrefix = this.grid.getGridEl().id,
 cfg = this.cm.config[colIndex],
 groupRenderer = cfg.groupRenderer || cfg.renderer,
 prefix = this.showGroupName ? (cfg.groupName || cfg.header)+': ' : '',
 groups = [],
 curGroup, i, len, gid;

 //////////////////////////////////
 //实际每页分组数清零
 listcount = 0;
 //////////////////////////////////

 for(i = 0, len = rs.length; i < len; i++){
 var rowIndex = startRow + i,
 r = rs[i],
 gvalue = r.data[groupField];

 g = this.getGroup(gvalue, r, groupRenderer, rowIndex, colIndex, ds);
 if(!curGroup || curGroup.group != g){
 gid = this.constructId(gvalue, gidPrefix, groupField, colIndex);

 /////////////////////////////////////////////
 list[listcount++] = gid+'-hd';
 /////////////////////////////////////////////

 var isCollapsed = typeof this.state[gid] !== 'undefined' ? !this.state[gid] : this.startCollapsed;
 var gcls = isCollapsed ? 'x-grid-group-collapsed' : '';
 curGroup = {
 group: g,
 gvalue: gvalue,
 text: prefix + g,
 groupId: gid,
 startRow: rowIndex,
 rs: [r],
 cls: gcls,
 style: gstyle
 };
 groups.push(curGroup);
 }else{
 curGroup.rs.push(r);
 }
 r._groupId = gid;
 }

 var buf = [];
 for(i = 0, len = groups.length; i < len; i++){
 g = groups[i];
 this.doGroupStart(buf, g, cs, ds, colCount);
 buf[buf.length] = Ext.grid.GroupingView.superclass.doRender.call(
 this, cs, g.rs, ds, g.startRow, colCount, stripe);

            this.doGroupEnd(buf, g, cs, ds, colCount);
        }
        return buf.join('');
    },
    constructId : function(value, prefix, field, idx){
        var cfg = this.cm.config[idx],
            groupRenderer = cfg.groupRenderer || cfg.renderer,
            val = (this.groupMode == 'value') ? value : this.getGroup(value, {data:{}}, groupRenderer, 0, idx, this.ds);

        return prefix + '-gp-' + field + '-' + Ext.util.Format.htmlEncode(val);
    }

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

source:http://blog.sina.com.cn/s/blog_454fbf740100gjig.html
});