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

最新推荐文章于 2020-05-09 16:29:49 发布

最新推荐文章于 2020-05-09 16:29:49 发布 · 189 阅读

文章标签：

#EXT #CSS

EXT、JS 专栏收录该内容

2 篇文章

订阅专栏

本文介绍如何在ExtJS中使用Grid分组视图(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>'
        })
    });