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
如果我想把分组标题前的加号或减号改成复选框,应该怎么写