-<!DOCTYPE html><html><head><title>Sencha Documentation Project</title><link rel="stylesheet" href="../reset.css" type="text/css"><link rel="stylesheet" href="../prettify.css" type="text/css"><link rel="stylesheet" href="../prettify_sa.css" type="text/css"><script type="text/javascript" src="../prettify.js"></script></head><body onload="prettyPrint()"><pre class="prettyprint"><pre><span id='Ext-grid.feature.Grouping'>/**
+<!DOCTYPE html>
+<html>
+<head>
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+ <title>The source code</title>
+ <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
+ <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
+ <style type="text/css">
+ .highlight { display: block; background-color: #ddd; }
+ </style>
+ <script type="text/javascript">
+ function highlight() {
+ document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
+ }
+ </script>
+</head>
+<body onload="prettyPrint(); highlight();">
+ <pre class="prettyprint lang-js"><span id='Ext-grid-feature-Grouping'>/**
</span> * @class Ext.grid.feature.Grouping
* @extends Ext.grid.feature.Feature
*
eventSelector: '.' + Ext.baseCSSPrefix + 'grid-group-hd',
constructor: function() {
- this.collapsedState = {};
- this.callParent(arguments);
+ var me = this;
+
+ me.collapsedState = {};
+ me.callParent(arguments);
},
-<span id='Ext-grid.feature.Grouping-event-groupclick'> /**
+<span id='Ext-grid-feature-Grouping-event-groupclick'> /**
</span> * @event groupclick
* @param {Ext.view.Table} view
* @param {HTMLElement} node
- * @param {Number} unused
- * @param {Number} unused
+ * @param {String} group The name of the group
* @param {Ext.EventObject} e
*/
-<span id='Ext-grid.feature.Grouping-event-groupdblclick'> /**
+<span id='Ext-grid-feature-Grouping-event-groupdblclick'> /**
</span> * @event groupdblclick
* @param {Ext.view.Table} view
* @param {HTMLElement} node
- * @param {Number} unused
- * @param {Number} unused
+ * @param {String} group The name of the group
* @param {Ext.EventObject} e
*/
-<span id='Ext-grid.feature.Grouping-event-groupcontextmenu'> /**
+<span id='Ext-grid-feature-Grouping-event-groupcontextmenu'> /**
</span> * @event groupcontextmenu
* @param {Ext.view.Table} view
* @param {HTMLElement} node
- * @param {Number} unused
- * @param {Number} unused
+ * @param {String} group The name of the group
* @param {Ext.EventObject} e
*/
-<span id='Ext-grid.feature.Grouping-event-groupcollapse'> /**
+<span id='Ext-grid-feature-Grouping-event-groupcollapse'> /**
</span> * @event groupcollapse
* @param {Ext.view.Table} view
* @param {HTMLElement} node
- * @param {Number} unused
- * @param {Number} unused
+ * @param {String} group The name of the group
* @param {Ext.EventObject} e
*/
-<span id='Ext-grid.feature.Grouping-event-groupexpand'> /**
+<span id='Ext-grid-feature-Grouping-event-groupexpand'> /**
</span> * @event groupexpand
* @param {Ext.view.Table} view
* @param {HTMLElement} node
- * @param {Number} unused
- * @param {Number} unused
+ * @param {String} group The name of the group
* @param {Ext.EventObject} e
*/
-<span id='Ext-grid.feature.Grouping-cfg-groupHeaderTpl'> /**
+<span id='Ext-grid-feature-Grouping-cfg-groupHeaderTpl'> /**
</span> * @cfg {String} groupHeaderTpl
* Template snippet, this cannot be an actual template. {name} will be replaced with the current group.
* Defaults to 'Group: {name}'
*/
groupHeaderTpl: 'Group: {name}',
-<span id='Ext-grid.feature.Grouping-cfg-depthToIndent'> /**
+<span id='Ext-grid-feature-Grouping-cfg-depthToIndent'> /**
</span> * @cfg {Number} depthToIndent
* Number of pixels to indent per grouping level
*/
collapsedCls: Ext.baseCSSPrefix + 'grid-group-collapsed',
hdCollapsedCls: Ext.baseCSSPrefix + 'grid-group-hd-collapsed',
-<span id='Ext-grid.feature.Grouping-cfg-groupByText'> /**
-</span> * @cfg {String} groupByText Text displayed in the grid header menu for grouping by header
- * (defaults to 'Group By This Field').
+<span id='Ext-grid-feature-Grouping-cfg-groupByText'> /**
+</span> * @cfg {String} groupByText Text displayed in the grid header menu for grouping by header.
*/
groupByText : 'Group By This Field',
-<span id='Ext-grid.feature.Grouping-cfg-showGroupsText'> /**
-</span> * @cfg {String} showGroupsText Text displayed in the grid header for enabling/disabling grouping
- * (defaults to 'Show in Groups').
+<span id='Ext-grid-feature-Grouping-cfg-showGroupsText'> /**
+</span> * @cfg {String} showGroupsText Text displayed in the grid header for enabling/disabling grouping.
*/
showGroupsText : 'Show in Groups',
-<span id='Ext-grid.feature.Grouping-cfg-hideGroupedHeader'> /**
-</span> * @cfg {Boolean} hideGroupedHeader<tt>true</tt> to hide the header that is currently grouped (defaults to <tt>false</tt>)
+<span id='Ext-grid-feature-Grouping-cfg-hideGroupedHeader'> /**
+</span> * @cfg {Boolean} hideGroupedHeader<tt>true</tt> to hide the header that is currently grouped.
*/
hideGroupedHeader : false,
-<span id='Ext-grid.feature.Grouping-cfg-startCollapsed'> /**
-</span> * @cfg {Boolean} startCollapsed <tt>true</tt> to start all groups collapsed (defaults to <tt>false</tt>)
+<span id='Ext-grid-feature-Grouping-cfg-startCollapsed'> /**
+</span> * @cfg {Boolean} startCollapsed <tt>true</tt> to start all groups collapsed
*/
startCollapsed : false,
-<span id='Ext-grid.feature.Grouping-cfg-enableGroupingMenu'> /**
-</span> * @cfg {Boolean} enableGroupingMenu <tt>true</tt> to enable the grouping control in the header menu (defaults to <tt>true</tt>)
+<span id='Ext-grid-feature-Grouping-cfg-enableGroupingMenu'> /**
+</span> * @cfg {Boolean} enableGroupingMenu <tt>true</tt> to enable the grouping control in the header menu
*/
enableGroupingMenu : true,
-<span id='Ext-grid.feature.Grouping-cfg-enableNoGroups'> /**
-</span> * @cfg {Boolean} enableNoGroups <tt>true</tt> to allow the user to turn off grouping (defaults to <tt>true</tt>)
+<span id='Ext-grid-feature-Grouping-cfg-enableNoGroups'> /**
+</span> * @cfg {Boolean} enableNoGroups <tt>true</tt> to allow the user to turn off grouping
*/
enableNoGroups : true,
store = view.store,
groupToggleMenuItem;
+ me.lastGroupField = me.getGroupField();
+
if (me.lastGroupIndex) {
store.group(me.lastGroupIndex);
}
me.callParent();
groupToggleMenuItem = me.view.headerCt.getMenu().down('#groupToggleMenuItem');
groupToggleMenuItem.setChecked(true, true);
- view.refresh();
+ me.refreshIf();
},
disable: function() {
var me = this,
view = me.view,
store = view.store,
+ remote = store.remoteGroup,
groupToggleMenuItem,
lastGroup;
lastGroup = store.groupers.first();
if (lastGroup) {
me.lastGroupIndex = lastGroup.property;
- store.groupers.clear();
+ me.block();
+ store.clearGrouping();
+ me.unblock();
}
me.callParent();
groupToggleMenuItem = me.view.headerCt.getMenu().down('#groupToggleMenuItem');
groupToggleMenuItem.setChecked(true, true);
groupToggleMenuItem.setChecked(false, true);
- view.refresh();
+ if (!remote) {
+ view.refresh();
+ }
+ },
+
+ refreshIf: function() {
+ if (this.blockRefresh !== true) {
+ this.view.refresh();
+ }
},
getFeatureTpl: function(values, parent, x, xcount) {
// perhaps rename to afterViewRender
attachEvents: function() {
var me = this,
- view = me.view,
- header, headerId, menu, menuItem;
+ view = me.view;
view.on({
scope: me,
if (me.enableGroupingMenu) {
me.injectGroupingMenu();
}
-
- if (me.hideGroupedHeader) {
- header = view.headerCt.down('gridcolumn[dataIndex=' + me.getGroupField() + ']');
- headerId = header.id;
- menu = view.headerCt.getMenu();
- menuItem = menu.down('menuitem[headerId='+ headerId +']');
- if (menuItem) {
- menuItem.setChecked(false);
- }
- }
+ me.lastGroupField = me.getGroupField();
+ me.block();
+ me.onGroupChange();
+ me.unblock();
},
injectGroupingMenu: function() {
showGroupsText = me.showGroupsText,
enableNoGroups = me.enableNoGroups,
groupMenuItemClick = Ext.Function.bind(me.onGroupMenuItemClick, me),
- groupToggleMenuItemClick = Ext.Function.bind(me.onGroupToggleMenuItemClick, me)
+ groupToggleMenuItemClick = Ext.Function.bind(me.onGroupToggleMenuItemClick, me);
// runs in the scope of headerCt
return function() {
var o = Ext.grid.header.Container.prototype.getMenuItems.call(this);
o.push('-', {
+ iconCls: Ext.baseCSSPrefix + 'group-by-icon',
itemId: 'groupMenuItem',
text: groupByText,
handler: groupMenuItemClick
},
-<span id='Ext-grid.feature.Grouping-method-onGroupMenuItemClick'> /**
+<span id='Ext-grid-feature-Grouping-method-onGroupMenuItemClick'> /**
</span> * Group by the header the user has clicked on.
* @private
*/
onGroupMenuItemClick: function(menuItem, e) {
- var menu = menuItem.parentMenu,
+ var me = this,
+ menu = menuItem.parentMenu,
hdr = menu.activeHeader,
- view = this.view;
+ view = me.view,
+ store = view.store,
+ remote = store.remoteGroup;
- delete this.lastGroupIndex;
- this.enable();
- view.store.group(hdr.dataIndex);
- this.pruneGroupedHeader();
-
+ delete me.lastGroupIndex;
+ me.block();
+ me.enable();
+ store.group(hdr.dataIndex);
+ me.pruneGroupedHeader();
+ me.unblock();
+ if (!remote) {
+ view.refresh();
+ }
+ },
+
+ block: function(){
+ this.blockRefresh = this.view.blockRefresh = true;
+ },
+
+ unblock: function(){
+ this.blockRefresh = this.view.blockRefresh = false;
},
-<span id='Ext-grid.feature.Grouping-method-onGroupToggleMenuItemClick'> /**
+<span id='Ext-grid-feature-Grouping-method-onGroupToggleMenuItemClick'> /**
</span> * Turn on and off grouping via the menu
* @private
*/
this[checked ? 'enable' : 'disable']();
},
-<span id='Ext-grid.feature.Grouping-method-pruneGroupedHeader'> /**
+<span id='Ext-grid-feature-Grouping-method-pruneGroupedHeader'> /**
</span> * Prunes the grouped header from the header container
* @private
*/
return '';
},
-<span id='Ext-grid.feature.Grouping-method-onRowFocus'> /**
+<span id='Ext-grid-feature-Grouping-method-onRowFocus'> /**
</span> * When a row gains focus, expand the groups above it
* @private
*/
}
},
-<span id='Ext-grid.feature.Grouping-method-expand'> /**
+<span id='Ext-grid-feature-Grouping-method-expand'> /**
</span> * Expand a group by the groupBody
- * @param {Ext.core.Element} groupBd
+ * @param {Ext.Element} groupBd
* @private
*/
expand: function(groupBd) {
view.fireEvent('groupexpand');
},
-<span id='Ext-grid.feature.Grouping-method-collapse'> /**
+<span id='Ext-grid-feature-Grouping-method-collapse'> /**
</span> * Collapse a group by the groupBody
- * @param {Ext.core.Element} groupBd
+ * @param {Ext.Element} groupBd
* @private
*/
collapse: function(groupBd) {
},
onGroupChange: function(){
- this.view.refresh();
+ var me = this,
+ field = me.getGroupField(),
+ menuItem;
+
+ if (me.hideGroupedHeader) {
+ if (me.lastGroupField) {
+ menuItem = me.getMenuItem(me.lastGroupField);
+ if (menuItem) {
+ menuItem.setChecked(true);
+ }
+ }
+ if (field) {
+ menuItem = me.getMenuItem(field);
+ if (menuItem) {
+ menuItem.setChecked(false);
+ }
+ }
+ }
+ if (me.blockRefresh !== true) {
+ me.view.refresh();
+ }
+ me.lastGroupField = field;
+ },
+
+<span id='Ext-grid-feature-Grouping-method-getMenuItem'> /**
+</span> * Gets the related menu item for a dataIndex
+ * @private
+ * @return {Ext.grid.header.Container} The header
+ */
+ getMenuItem: function(dataIndex){
+ var view = this.view,
+ header = view.headerCt.down('gridcolumn[dataIndex=' + dataIndex + ']'),
+ menu = view.headerCt.getMenu();
+
+ return menu.down('menuitem[headerId='+ header.id +']');
},
-<span id='Ext-grid.feature.Grouping-method-onGroupClick'> /**
+<span id='Ext-grid-feature-Grouping-method-onGroupClick'> /**
</span> * Toggle between expanded/collapsed state when clicking on
* the group.
* @private
// events that are fired on the view. Chose not to return the actual
// group itself because of its expense and because developers can simply
// grab the group via store.getGroups(groupName)
- getFireEventArgs: function(type, view, featureTarget) {
+ getFireEventArgs: function(type, view, featureTarget, e) {
var returnArray = [type, view, featureTarget],
groupBd = Ext.fly(featureTarget.nextSibling, '_grouping'),
groupBdId = Ext.getDom(groupBd).id,
prefix = view.id + '-gp-',
groupName = groupBdId.substr(prefix.length);
- returnArray.push(groupName);
+ returnArray.push(groupName, e);
return returnArray;
}
});
-</pre></pre></body></html>
\ No newline at end of file
+</pre>
+</body>
+</html>
git.ithinksw.org / extjs.git / blobdiff