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

Posted 2020-08-02 zhouyeqin

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"上，才进行收起或展开操作。 

示例，在分组前加个弹出框，当点击按钮时打开新窗口，而不收起或展开分组：

ext-all.js文件：

Ext.grid.GroupingView = Ext
  .extend(
    Ext.grid.GridView,
    {
     groupByText : "Group By This Field",
     showGroupsText : "Show in Groups",
     hideGroupedColumn : false,
     showGroupName : true,
     startCollapsed : false,
     enableGrouping : true,
     enableGroupingMenu : true,
     enableNoGroups : true,
     emptyGroupText : "(None)",
     ignoreAdd : false,
     groupTextTpl : "{text}",
     groupMode : "value",
     cancelEditOnToggle : true,
     initTemplates : function() {
      Ext.grid.GroupingView.superclass.initTemplates
        .call(this);
      this.state = {};
      var a = this.grid.getSelectionModel();
      a.on(a.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>"
      }
     }, 

processEvent : function(b, i) {
      Ext.grid.GroupingView.superclass.processEvent.call(
        this, b, i);
      var h = i.getTarget(".x-grid-group-hd", this.mainBody);
      var noneExpand = i.getTarget(‘.group_none_expand‘, this.mainBody);
      if (h) {
       var g = this.getGroupField(), d = this.getPrefix(g), a = h.id
         .substring(d.length), c = new RegExp("gp-"
         + Ext.escapeRe(g) + "--hd");
       a = a.substr(0, a.length - 3);
       if (a || c.test(h.id)) {
        this.grid.fireEvent("group" + b, this.grid, g,
          a, i)
       }
       if (b == "mousedown" && i.button == 0&& !noneExpand) {
        this.toggleGroup(h.parentNode)
       }
      }
     },

toggleGroup : function(c, b) {
      var a = Ext.get(c), d = Ext.util.Format
        .htmlEncode(a.id);
      b = Ext.isDefined(b) ? b : a
        .hasClass("x-grid-group-collapsed");
      if (this.state[d] !== b) {
       if (this.cancelEditOnToggle !== false) {
        this.grid.stopEditing(true)
       }
       this.state[d] = b;
       a[b ? "removeClass" : "addClass"]
         ("x-grid-group-collapsed")
      }
     }

});

example.js文件：

ExampleGrid = new Wg.Grid( {
  url : grid_url,
  el : ‘grid‘,
  title:prepay_debt_userDebtMgt.resourceBundle.Grid.USEDEBTLIST ,
  heightPercent : 0.85,
  tbar:toolbar,
  cModel : _cm,
  view: new Ext.grid.GroupingView({
             forceFit: false,
             groupTextTplNoneExpend:String.format(‘<a class="set" title="‘+prepay_debt_userDebtMgt.resourceBundle.Grid.HKPZ+‘" href="javascript:hkpz(\‘{0}\‘);"></a>&nbsp;&nbsp;‘, ‘{[values.rs[0].data.HH]}‘),
             groupTextTpl:‘&nbsp;&nbsp;‘+ prepay_debt_userDebtMgt.resourceBundle.Grid.HH +‘:‘+‘{[values.rs[0].data.HH]}     ‘+prepay_debt_userDebtMgt.resourceBundle.Grid.SYZEZE+‘{[values.rs[0].data.ZSYZW]}‘+cu+‘ ({[values.rs.length]}{[values.rs.length > 1 ? "‘+prepay_debt_userDebtMgt.resourceBundle.Grid.records+‘" : "‘+prepay_debt_userDebtMgt.resourceBundle.Grid.record+‘"]})‘          
   }),  
  isGrouping: true,//是否分组
  gFields: fields,//字段列
  gSortInfo: {field: ‘HH‘, direction: "ASC"},//排序
  gGroupField: ‘HH‘ //分组列
 });

参照：http://guohong18.iteye.com/blog/669883