X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/c930e9176a5a85509c5b0230e2bff5c22a591432..7a654f8d43fdb43d78b63d90528bed6e86b608cc:/docs/source/GroupingView.html diff --git a/docs/source/GroupingView.html b/docs/source/GroupingView.html deleted file mode 100644 index f85429fc..00000000 --- a/docs/source/GroupingView.html +++ /dev/null @@ -1,520 +0,0 @@ - - - The source code - - - - -
/** - * @class Ext.grid.GroupingView - * @extends Ext.grid.GridView - * Adds the ability for single level grouping to the grid. A {@link Ext.data.GroupingStore GroupingStore} - * must be used to enable grouping. Some grouping characteristics may also be configured at the - * {@link Ext.grid.Column Column level}
- *

Sample usage:

- *

-var grid = new Ext.grid.GridPanel({
-    // A groupingStore is required for a GroupingView
-    store: new {@link Ext.data.GroupingStore}({
-        autoDestroy: true,
-        reader: reader,
-        data: xg.dummyData,
-        sortInfo: {field: 'company', direction: 'ASC'},
-        {@link Ext.data.GroupingStore#groupOnSort groupOnSort}: true,
-        {@link Ext.data.GroupingStore#remoteGroup remoteGroup}: true,
-        {@link Ext.data.GroupingStore#groupField groupField}: 'industry'
-    }),
-    colModel: new {@link Ext.grid.ColumnModel}({
-        columns:[
-            {id:'company',header: 'Company', width: 60, dataIndex: 'company'},
-            // {@link Ext.grid.Column#groupable groupable}, {@link Ext.grid.Column#groupName groupName}, {@link Ext.grid.Column#groupRender groupRender} are also configurable at column level
-            {header: 'Price', renderer: Ext.util.Format.usMoney, dataIndex: 'price', {@link Ext.grid.Column#groupable groupable}: false},
-            {header: 'Change', dataIndex: 'change', renderer: Ext.util.Format.usMoney},
-            {header: 'Industry', dataIndex: 'industry'},
-            {header: 'Last Updated', renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}
-        ],
-        defaults: {
-            sortable: true,
-            menuDisabled: false,
-            width: 20
-        }
-    }),
-
-    view: new Ext.grid.GroupingView({
-        {@link Ext.grid.GridView#forceFit forceFit}: true,
-        // custom grouping text template to display the number of items per group
-        {@link #groupTextTpl}: '{text} ({[values.rs.length]} {[values.rs.length > 1 ? "Items" : "Item"]})'
-    }),
-
-    frame:true,
-    width: 700,
-    height: 450,
-    collapsible: true,
-    animCollapse: false,
-    title: 'Grouping Example',
-    iconCls: 'icon-grid',
-    renderTo: document.body
-});
- * 
- * @constructor - * @param {Object} config - */ -Ext.grid.GroupingView = Ext.extend(Ext.grid.GridView, { - -
/** - * @cfg {String} groupByText Text displayed in the grid header menu for grouping by a column - * (defaults to 'Group By This Field'). - */ - groupByText : 'Group By This Field', -
/** - * @cfg {String} showGroupsText Text displayed in the grid header for enabling/disabling grouping - * (defaults to 'Show in Groups'). - */ - showGroupsText : 'Show in Groups', -
/** - * @cfg {Boolean} hideGroupedColumn true to hide the column that is currently grouped (defaults to false) - */ - hideGroupedColumn : false, -
/** - * @cfg {Boolean} showGroupName If true will display a prefix plus a ': ' before the group field value - * in the group header line. The prefix will consist of the {@link Ext.grid.Column#groupName groupName} - * (or the configured {@link Ext.grid.Column#header header} if not provided) configured in the - * {@link Ext.grid.Column} for each set of grouped rows (defaults to true). - */ - showGroupName : true, -
/** - * @cfg {Boolean} startCollapsed true to start all groups collapsed (defaults to false) - */ - startCollapsed : false, -
/** - * @cfg {Boolean} enableGrouping false to disable grouping functionality (defaults to true) - */ - enableGrouping : true, -
/** - * @cfg {Boolean} enableGroupingMenu true to enable the grouping control in the column menu (defaults to true) - */ - enableGroupingMenu : true, -
/** - * @cfg {Boolean} enableNoGroups true to allow the user to turn off grouping (defaults to true) - */ - enableNoGroups : true, -
/** - * @cfg {String} emptyGroupText The text to display when there is an empty group value (defaults to '(None)'). - * May also be specified per column, see {@link Ext.grid.Column}.{@link Ext.grid.Column#emptyGroupText emptyGroupText}. - */ - emptyGroupText : '(None)', -
/** - * @cfg {Boolean} ignoreAdd true to skip refreshing the view when new rows are added (defaults to false) - */ - ignoreAdd : false, -
/** - * @cfg {String} groupTextTpl The template used to render the group header (defaults to '{text}'). - * This is used to format an object which contains the following properties: - *
    - *
  • group : String

    The rendered value of the group field. - * By default this is the unchanged value of the group field. If a {@link Ext.grid.Column#groupRenderer groupRenderer} - * is specified, it is the result of a call to that function.

  • - *
  • gvalue : Object

    The raw value of the group field.

  • - *
  • text : String

    The configured header (as described in {@link #showGroupName}) - * if {@link #showGroupName} is true) plus the rendered group field value.

  • - *
  • groupId : String

    A unique, generated ID which is applied to the - * View Element which contains the group.

  • - *
  • startRow : Number

    The row index of the Record which caused group change.

  • - *
  • rs : Array

    Contains a single element: The Record providing the data - * for the row which caused group change.

  • - *
  • cls : String

    The generated class name string to apply to the group header Element.

  • - *
  • style : String

    The inline style rules to apply to the group header Element.

  • - *

- * See {@link Ext.XTemplate} for information on how to format data using a template. Possible usage:

-var grid = new Ext.grid.GridPanel({
-    ...
-    view: new Ext.grid.GroupingView({
-        groupTextTpl: '{text} ({[values.rs.length]} {[values.rs.length > 1 ? "Items" : "Item"]})'
-    }),
-});
-     * 
- */ - groupTextTpl : '{text}', -
/** - * @cfg {Function} groupRenderer This property must be configured in the {@link Ext.grid.Column} for - * each column. - */ - - // private - gidSeed : 1000, - - // 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( - '
', - '
', this.groupTextTpl ,'
', - '
' - ); - } - this.startGroup.compile(); - this.endGroup = '
'; - }, - - // private - findGroup : function(el){ - return Ext.fly(el).up('.x-grid-group', this.mainBody.dom); - }, - - // private - getGroups : function(){ - return this.hasRows() ? this.mainBody.dom.childNodes : []; - }, - - // private - onAdd : function(){ - if(this.enableGrouping && !this.ignoreAdd){ - var ss = this.getScrollState(); - this.refresh(); - this.restoreScroll(ss); - }else if(!this.enableGrouping){ - Ext.grid.GroupingView.superclass.onAdd.apply(this, arguments); - } - }, - - // private - onRemove : function(ds, record, index, isUpdate){ - Ext.grid.GroupingView.superclass.onRemove.apply(this, arguments); - var g = document.getElementById(record._groupId); - if(g && g.childNodes[1].childNodes.length < 1){ - Ext.removeNode(g); - } - this.applyEmptyText(); - }, - - // private - refreshRow : function(record){ - if(this.ds.getCount()==1){ - this.refresh(); - }else{ - this.isUpdating = true; - Ext.grid.GroupingView.superclass.refreshRow.apply(this, arguments); - this.isUpdating = false; - } - }, - - // private - beforeMenuShow : function(){ - var item, items = this.hmenu.items, disabled = this.cm.config[this.hdCtxIndex].groupable === false; - if((item = items.get('groupBy'))){ - item.setDisabled(disabled); - } - if((item = items.get('showGroups'))){ - item.setDisabled(disabled); - item.setChecked(!!this.getGroupField(), true); - } - }, - - // private - renderUI : function(){ - Ext.grid.GroupingView.superclass.renderUI.call(this); - this.mainBody.on('mousedown', this.interceptMouse, this); - - if(this.enableGroupingMenu && this.hmenu){ - this.hmenu.add('-',{ - itemId:'groupBy', - text: this.groupByText, - handler: this.onGroupByClick, - scope: this, - iconCls:'x-group-by-icon' - }); - if(this.enableNoGroups){ - this.hmenu.add({ - itemId:'showGroups', - text: this.showGroupsText, - checked: true, - checkHandler: this.onShowGroupsClick, - scope: this - }); - } - this.hmenu.on('beforeshow', this.beforeMenuShow, this); - } - }, - - // private - onGroupByClick : function(){ - this.grid.store.groupBy(this.cm.getDataIndex(this.hdCtxIndex)); - this.beforeMenuShow(); // Make sure the checkboxes get properly set when changing groups - }, - - // private - onShowGroupsClick : function(mi, checked){ - if(checked){ - this.onGroupByClick(); - }else{ - this.grid.store.clearGrouping(); - } - }, - -
/** - * Toggles the specified group if no value is passed, otherwise sets the expanded state of the group to the value passed. - * @param {String} groupId The groupId assigned to the group (see getGroupId) - * @param {Boolean} expanded (optional) - */ - toggleGroup : function(group, expanded){ - this.grid.stopEditing(true); - group = Ext.getDom(group); - var gel = Ext.fly(group); - expanded = expanded !== undefined ? - expanded : gel.hasClass('x-grid-group-collapsed'); - - this.state[gel.dom.id] = expanded; - gel[expanded ? 'removeClass' : 'addClass']('x-grid-group-collapsed'); - }, - -
/** - * Toggles all groups if no value is passed, otherwise sets the expanded state of all groups to the value passed. - * @param {Boolean} expanded (optional) - */ - toggleAllGroups : function(expanded){ - var groups = this.getGroups(); - for(var i = 0, len = groups.length; i < len; i++){ - this.toggleGroup(groups[i], expanded); - } - }, - -
/** - * Expands all grouped rows. - */ - expandAllGroups : function(){ - this.toggleAllGroups(true); - }, - -
/** - * Collapses all grouped rows. - */ - collapseAllGroups : function(){ - this.toggleAllGroups(false); - }, - - // private - interceptMouse : function(e){ - var hd = e.getTarget('.x-grid-group-hd', this.mainBody); - if(hd){ - e.stopEvent(); - this.toggleGroup(hd.parentNode); - } - }, - - // private - getGroup : function(v, r, groupRenderer, rowIndex, colIndex, ds){ - var g = groupRenderer ? groupRenderer(v, {}, r, rowIndex, colIndex, ds) : String(v); - if(g === ''){ - g = this.cm.config[colIndex].emptyGroupText || this.emptyGroupText; - } - return g; - }, - - // private - getGroupField : function(){ - return this.grid.store.getGroupState(); - }, - - // private - afterRender : function(){ - Ext.grid.GroupingView.superclass.afterRender.call(this); - if(this.grid.deferRowRender){ - this.updateGroupWidths(); - } - }, - - // private - renderRows : function(){ - var groupField = this.getGroupField(); - var eg = !!groupField; - // if they turned off grouping and the last grouped field is hidden - if(this.hideGroupedColumn) { - var colIndex = this.cm.findColumnIndex(groupField); - if(!eg && this.lastGroupField !== undefined) { - this.mainBody.update(''); - this.cm.setHidden(this.cm.findColumnIndex(this.lastGroupField), false); - delete this.lastGroupField; - }else if (eg && this.lastGroupField === undefined) { - this.lastGroupField = groupField; - this.cm.setHidden(colIndex, true); - }else if (eg && this.lastGroupField !== undefined && groupField !== this.lastGroupField) { - this.mainBody.update(''); - var oldIndex = this.cm.findColumnIndex(this.lastGroupField); - this.cm.setHidden(oldIndex, false); - this.lastGroupField = groupField; - this.cm.setHidden(colIndex, true); - } - } - return Ext.grid.GroupingView.superclass.renderRows.apply( - this, arguments); - }, - - // private - doRender : function(cs, rs, ds, startRow, colCount, stripe){ - if(rs.length < 1){ - return ''; - } - var groupField = this.getGroupField(), - colIndex = this.cm.findColumnIndex(groupField), - g; - - this.enableGrouping = !!groupField; - - if(!this.enableGrouping || this.isUpdating){ - return Ext.grid.GroupingView.superclass.doRender.apply( - this, arguments); - } - var gstyle = 'width:'+this.getTotalWidth()+';'; - - var gidPrefix = this.grid.getGridEl().id; - var cfg = this.cm.config[colIndex]; - var groupRenderer = cfg.groupRenderer || cfg.renderer; - var prefix = this.showGroupName ? - (cfg.groupName || cfg.header)+': ' : ''; - - var groups = [], curGroup, i, len, gid; - for(i = 0, len = rs.length; i < len; i++){ - var rowIndex = startRow + i, - r = rs[i], - gvalue = r.data[groupField]; - - g = this.getGroup(gvalue, r, groupRenderer, rowIndex, colIndex, ds); - if(!curGroup || curGroup.group != g){ - gid = gidPrefix + '-gp-' + groupField + '-' + Ext.util.Format.htmlEncode(g); - // if state is defined use it, however state is in terms of expanded - // so negate it, otherwise use the default. - var isCollapsed = typeof this.state[gid] !== 'undefined' ? !this.state[gid] : this.startCollapsed; - var gcls = isCollapsed ? 'x-grid-group-collapsed' : ''; - curGroup = { - group: g, - gvalue: gvalue, - text: prefix + g, - groupId: gid, - startRow: rowIndex, - rs: [r], - cls: gcls, - style: gstyle - }; - groups.push(curGroup); - }else{ - curGroup.rs.push(r); - } - r._groupId = gid; - } - - var buf = []; - for(i = 0, len = groups.length; i < len; i++){ - g = groups[i]; - this.doGroupStart(buf, g, cs, ds, colCount); - buf[buf.length] = Ext.grid.GroupingView.superclass.doRender.call( - this, cs, g.rs, ds, g.startRow, colCount, stripe); - - this.doGroupEnd(buf, g, cs, ds, colCount); - } - return buf.join(''); - }, - -
/** - * Dynamically tries to determine the groupId of a specific value - * @param {String} value - * @return {String} The group id - */ - getGroupId : function(value){ - var gidPrefix = this.grid.getGridEl().id; - var groupField = this.getGroupField(); - var colIndex = this.cm.findColumnIndex(groupField); - var cfg = this.cm.config[colIndex]; - var groupRenderer = cfg.groupRenderer || cfg.renderer; - var gtext = this.getGroup(value, {data:{}}, groupRenderer, 0, colIndex, this.ds); - return gidPrefix + '-gp-' + groupField + '-' + Ext.util.Format.htmlEncode(value); - }, - - // private - doGroupStart : function(buf, g, cs, ds, colCount){ - buf[buf.length] = this.startGroup.apply(g); - }, - - // private - doGroupEnd : function(buf, g, cs, ds, colCount){ - buf[buf.length] = this.endGroup; - }, - - // private - getRows : function(){ - if(!this.enableGrouping){ - return Ext.grid.GroupingView.superclass.getRows.call(this); - } - var r = []; - var g, gs = this.getGroups(); - for(var i = 0, len = gs.length; i < len; i++){ - g = gs[i].childNodes[1].childNodes; - for(var j = 0, jlen = g.length; j < jlen; j++){ - r[r.length] = g[j]; - } - } - return r; - }, - - // private - updateGroupWidths : function(){ - if(!this.enableGrouping || !this.hasRows()){ - return; - } - var tw = Math.max(this.cm.getTotalWidth(), this.el.dom.offsetWidth-this.scrollOffset) +'px'; - var gs = this.getGroups(); - for(var i = 0, len = gs.length; i < len; i++){ - gs[i].firstChild.style.width = tw; - } - }, - - // private - onColumnWidthUpdated : function(col, w, tw){ - Ext.grid.GroupingView.superclass.onColumnWidthUpdated.call(this, col, w, tw); - this.updateGroupWidths(); - }, - - // private - onAllColumnWidthsUpdated : function(ws, tw){ - Ext.grid.GroupingView.superclass.onAllColumnWidthsUpdated.call(this, ws, tw); - this.updateGroupWidths(); - }, - - // private - onColumnHiddenUpdated : function(col, hidden, tw){ - Ext.grid.GroupingView.superclass.onColumnHiddenUpdated.call(this, col, hidden, tw); - this.updateGroupWidths(); - }, - - // private - onLayout : function(){ - this.updateGroupWidths(); - }, - - // private - onBeforeRowSelect : function(sm, rowIndex){ - if(!this.enableGrouping){ - return; - } - var row = this.getRow(rowIndex); - if(row && !row.offsetParent){ - var g = this.findGroup(row); - this.toggleGroup(g, true); - } - } -}); -// private -Ext.grid.GroupingView.GROUP_ID = 1000;
- - \ No newline at end of file