Groupingview structure:
The group header grouptexttpl is decorated with two div, and when MouseDown, Ext looks for the object of the CSS class= ". X-grid-group-hd" and, if found, the action to expand or close. The plus or minus sign before the title is also controlled by the background of the CSS.
If you don't want to expand or close by clicking on the group header, simply place grouptexttpl on the outside of <div class= "X-grid-group-title" > and add a span to GROUPTEXTTPL, Define a CSS for span (this CSS class does not exist, such as: class= "None_expand_class"), and then add judgment in Interceptmouse if it is in ". X-grid-group-hd" and not " None_expand_class "to be closed or expanded.
example, add a pop-up box before grouping, and open a new window when the button is clicked without lifting or expanding the group:
Ext-all.js file:
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 file:
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> ', ' {[Values.rs[0].data. HH]} '),
GROUPTEXTTPL: ' ' + 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,//whether to group
gfields:fields,//Field Column
Gsortinfo: {field: ' HH ', direction: ' ASC '},//sort
Ggroupfield: ' HH '//Group column
});
Reference: http://guohong18.iteye.com/blog/669883
Groupingview Click the group title does not expand, or click the title section of the text does not expand