X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/6746dc89c47ed01b165cc1152533605f97eb8e8d..f562e4c6e5fac7bcb445985b99acbea4d706e6f0:/docs/source/Grouping.html diff --git a/docs/source/Grouping.html b/docs/source/Grouping.html index a984ce92..1d1740b8 100644 --- a/docs/source/Grouping.html +++ b/docs/source/Grouping.html @@ -3,8 +3,8 @@ The source code - - + + @@ -59,8 +59,10 @@ Ext.define('Ext.grid.feature.Grouping', { eventSelector: '.' + Ext.baseCSSPrefix + 'grid-group-hd', constructor: function() { - this.collapsedState = {}; - this.callParent(arguments); + var me = this; + + me.collapsedState = {}; + me.callParent(arguments); }, /** @@ -120,33 +122,31 @@ Ext.define('Ext.grid.feature.Grouping', { hdCollapsedCls: Ext.baseCSSPrefix + 'grid-group-hd-collapsed', /** - * @cfg {String} groupByText Text displayed in the grid header menu for grouping by header - * (defaults to 'Group By This Field'). + * @cfg {String} groupByText Text displayed in the grid header menu for grouping by header. */ groupByText : 'Group By This Field', /** - * @cfg {String} showGroupsText Text displayed in the grid header for enabling/disabling grouping - * (defaults to 'Show in Groups'). + * @cfg {String} showGroupsText Text displayed in the grid header for enabling/disabling grouping. */ showGroupsText : 'Show in Groups', /** - * @cfg {Boolean} hideGroupedHeader<tt>true</tt> to hide the header that is currently grouped (defaults to <tt>false</tt>) + * @cfg {Boolean} hideGroupedHeader<tt>true</tt> to hide the header that is currently grouped. */ hideGroupedHeader : false, /** - * @cfg {Boolean} startCollapsed <tt>true</tt> to start all groups collapsed (defaults to <tt>false</tt>) + * @cfg {Boolean} startCollapsed <tt>true</tt> to start all groups collapsed */ startCollapsed : false, /** - * @cfg {Boolean} enableGroupingMenu <tt>true</tt> to enable the grouping control in the header menu (defaults to <tt>true</tt>) + * @cfg {Boolean} enableGroupingMenu <tt>true</tt> to enable the grouping control in the header menu */ enableGroupingMenu : true, /** - * @cfg {Boolean} enableNoGroups <tt>true</tt> to allow the user to turn off grouping (defaults to <tt>true</tt>) + * @cfg {Boolean} enableNoGroups <tt>true</tt> to allow the user to turn off grouping */ enableNoGroups : true, @@ -156,33 +156,46 @@ Ext.define('Ext.grid.feature.Grouping', { 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) { @@ -222,8 +235,7 @@ Ext.define('Ext.grid.feature.Grouping', { // perhaps rename to afterViewRender attachEvents: function() { var me = this, - view = me.view, - header, headerId, menu, menuItem; + view = me.view; view.on({ scope: me, @@ -237,16 +249,10 @@ Ext.define('Ext.grid.feature.Grouping', { 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() { @@ -279,6 +285,7 @@ Ext.define('Ext.grid.feature.Grouping', { 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 @@ -301,15 +308,30 @@ Ext.define('Ext.grid.feature.Grouping', { * @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; }, /** @@ -366,7 +388,7 @@ Ext.define('Ext.grid.feature.Grouping', { /** * Expand a group by the groupBody - * @param {Ext.core.Element} groupBd + * @param {Ext.Element} groupBd * @private */ expand: function(groupBd) { @@ -387,7 +409,7 @@ Ext.define('Ext.grid.feature.Grouping', { /** * Collapse a group by the groupBody - * @param {Ext.core.Element} groupBd + * @param {Ext.Element} groupBd * @private */ collapse: function(groupBd) { @@ -407,7 +429,41 @@ Ext.define('Ext.grid.feature.Grouping', { }, 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; + }, + + /** + * 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 +']'); }, /**