当前位置: 代码迷 >> Web前端 >> GroupingView点击分组题目不展开,或点击标题后文字不展开
  详细解决方案

GroupingView点击分组题目不展开,或点击标题后文字不展开

热度:83   发布时间:2012-10-25 10:58:57.0
GroupingView点击分组标题不展开,或点击标题后文字不展开
GroupingView结构:
   分组标题groupTextTpl是用两个DIV 来进行修饰的,在mouseDown时,EXT会查找css class=".x-grid-group-hd"的对象,如果找到则进行展开或收起的操作。而其标题前的加号或减号也是通过css进行背景控制的。
   如果不希望点击分组标题就进行展开或收起的操作,只需将groupTextTpl放到<div class="x-grid-group-title">的外面,并在groupTextTpl外加个span,给span定义一个CSS(不存在这个CSS class也可以,如:class="none_expand_class"),然后在interceptMouse增加判断,如果是在“.x-grid-group-hd”并且不在"none_expand_class"上,才进行收起或展开操作。

下面示例,在分组标题后加个链接,当点击链接时要打开新窗口,而不收起或展开grid
扩展:
Ext.ns("Ext.ux.grid.GroupingViewCustom");

Ext.ux.grid.GroupingViewCustom = function(config) {
                Ext.apply(this, config);
};

Ext.ux.grid.GroupingViewCustom = Ext.extend(Ext.grid.GroupingView, {
   //该字段存放分组标题后的链接文字,如果不想点击分组标题时就展开,也可将分组标题写在此处,而groupTextTpl为空即可。
    groupTextTplNoneExpend : '',

    // private
    initTemplates : function(){
        Ext.grid.GroupingView.superclass.initTemplates.call(this);
        this.state = {};

        var sm = this.grid.getSelectionModel();
        sm.on(sm.selectRow ? 'beforerowselect' : 'beforecellselect',
                this.onBeforeRowSelect, this);

        if(!this.startGroup){
            this.startGroup = new Ext.XTemplate(
                '<div id="{groupId}" class="x-grid-group {cls}">',
                    '<div id="{groupId}-hd" class="x-grid-group-hd" style="{style}"><div class="x-grid-group-title">', this.groupTextTpl ,
                     '<span class="group_none_expand">',this.groupTextTplNoneExpend,'</span>','</div></div>',
                     '<div id="{groupId}-bd" class="x-grid-group-body">'
            );
        }
        this.startGroup.compile();
        if(!this.endGroup){
            this.endGroup = '</div></div>';
        }

        this.endGroup = '</div></div>';
    },

    // private
    interceptMouse : function(e){
        var hd = e.getTarget('.x-grid-group-hd', this.mainBody);
         var noneExpand = e.getTarget('.group_none_expand', this.mainBody);
        if(hd && !noneExpand){
            e.stopEvent();
            this.toggleGroup(hd.parentNode);
        }
    }
});

使用:
    var grid_dqjkdpb_qfzc = new Ext.grid.GridPanel({
                     height:200,
        store: store_dqjkdpb,
        columns: [
                {header: '公司', width: 60, dataIndex: 'zgs',hidden:true},
            {id:'yyb',header: '营业部', width: 60, dataIndex: 'yyb'},
            {header: 'CRC',  width: 50, renderer:renderChjg, dataIndex: 'crcch'},
            {header: '付费</BR>陈列', width: 50, renderer:renderChjg, dataIndex: 'ffclch'},
            {header: '冰箱日</BR>常查核', width: 50, renderer:renderChjg, dataIndex: 'bxrcch'},
            {header: '经销商', width: 50, renderer:renderChjg, dataIndex: 'jxsch'},
            {header: '事业群</BR>专案', width: 50, renderer:renderChjg, dataIndex: 'qzach'}
        ],
        view: new Ext.ux.grid.GroupingViewCustom({
            forceFit: true,
           // startCollapsed: true,
            groupTextTpl: '{text}',
            groupTextTplNoneExpend:'<a href="yysdetail.htm" target="_blank">查看营业所明细</a>'
        })
    }); 
1 楼 yjugdumc 2010-08-30  
如果我想把分组标题前的加号或减号改成复选框,应该怎么写