Groupingview Click the group title does not expand, or click the title section of the text does not expand

Source: Internet
Author: User

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>&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,//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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.