Ext.ux.GroupingListView

[crp_spaeth]

Hi all,

I really Love the new ListView comeing with Extjs 3.0 but I had to use the normal GridPanel I i would like to have Grouping.

Since the ListView is much much faster than the GridPanel, I decided to Extend it and add the grouping ability to it.

See what I came up with.



Ext.ux.GroupedListView = Ext.extend(Ext.ListView, {

/**
* @cfg {Boolean} startCollapsed true to start all groups collapsed (defaults to false)
*/
startCollapsed : false,

/**
* @cfg {Array} startExpanded An Array of GroupeId's that should start Collapsed
*/
startExpanded : [],

groupState : {},

initComponent : function(){
var collapsedClass = '';
if(this.startCollapsed) {
collapsedClass = ' x-grid-group-collapsed';
}
this.tpl = new Ext.XTemplate(
'<tpl for="rows">',
// grouping header
'<tpl if="xindex == 1 || parent.rows[xindex-1].group_index != parent.rows[xindex-2].group_index">',
'<div class="x-grid-group {[this.getCollapseClass(values)]}" groupeindex="{group_index}">',
'<div class="x-grid-group-hd"><div class="x-grid-group-title">{group_index} ', '</div></div>',
'<div class="x-grid-group-body">',
'</tpl>', // endof grouping header
// row template
'<dl>',
'<tpl for="parent.columns">',
'<dt style="width:{[values.width*100]}%;text-align:{align};">',
'<em unselectable="on"<tpl if="cls"> class="{cls}</tpl>">',
'{[values.tpl.apply(parent)]}',
'</em></dt>',
'</tpl>',
'<div class="x-clear"></div>',
'</dl>',
// endof row template
// grouping footer
'<tpl if="xindex == (xcount) || this.isBigger(xindex, (xcount-1)) || parent.rows[xindex-1].group_index != parent.rows[xindex].group_index"> ',
'</div>',
'</div>',
'</tpl>',
// endof grouping footer

'</tpl>',
'<div class="dataview-border"></div>',{
isBigger : function(isbigger, than) {
return isbigger > than;
},
getCollapseClass : function(values){
return values.group_collapsed ? ' x-grid-group-collapsed' : '';
}
}
);
Ext.ux.GroupedListView.superclass.initComponent.apply(this, arguments);
},

prepareData : function(recData, index, record){
var data = {},
groupId = record.data[record.store.groupField];

Ext.apply(data, recData);
data.group_index = groupId;
if(!this.groupState[groupId]) {
this.groupState[groupId] = this.startCollapsed && (this.startExpanded.indexOf(groupId) ==-1) ? false : true;
}
console.log(groupId, this.groupState[groupId]);
data.group_collapsed = !this.groupState[groupId];
return data;
},

onRender : function(){
Ext.ux.GroupedListView.superclass.onRender.apply(this, arguments);
this.innerBody.on('mousedown', this.interceptMouse, this);
},

interceptMouse : function(e){
var hd = e.getTarget('.x-grid-group-hd', this.innerBody);
if(hd){
e.stopEvent();
this.toggleGroup(hd.parentNode);
}
},



/**
* 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){
var gel = Ext.get(group);
var groupIndex = gel.getAttribute('groupeindex');
expanded = Ext.isDefined(expanded) ? expanded : gel.hasClass('x-grid-group-collapsed');
this.groupState[groupIndex] = expanded;
gel[expanded ? 'removeClass' : 'addClass']('x-grid-group-collapsed');
}

});


Ext.reg('grouinglistview', Ext.ux.GroupedListView);



ExampleUsage:



var dummyData = [
['3m Co',71.72,0.02,0.03,'4/2 12:00am', 'Manufacturing'],
['Alcoa Inc',29.01,0.42,1.47,'4/1 12:00am', 'Manufacturing'],
['Altria Group Inc',83.81,0.28,0.34,'4/3 12:00am', 'Manufacturing'],
['American Express Company',52.55,0.01,0.02,'4/8 12:00am', 'Finance'],
['American International Group, Inc.',64.13,0.31,0.49,'4/1 12:00am', 'Services'],
['AT&T Inc.',31.61,-0.48,-1.54,'4/8 12:00am', 'Services'],
['Boeing Co.',75.43,0.53,0.71,'4/8 12:00am', 'Manufacturing'],
['Caterpillar Inc.',67.27,0.92,1.39,'4/1 12:00am', 'Services'],
['Citigroup, Inc.',49.37,0.02,0.04,'4/4 12:00am', 'Finance'],
['E.I. du Pont de Nemours and Company',40.48,0.51,1.28,'4/1 12:00am', 'Manufacturing'],
['Exxon Mobil Corp',68.1,-0.43,-0.64,'4/3 12:00am', 'Manufacturing'],
['General Electric Company',34.14,-0.08,-0.23,'4/3 12:00am', 'Manufacturing'],
['General Motors Corporation',30.27,1.09,3.74,'4/3 12:00am', 'Automotive'],
['Hewlett-Packard Co.',36.53,-0.03,-0.08,'4/3 12:00am', 'Computer'],
['Honeywell Intl Inc',38.77,0.05,0.13,'4/3 12:00am', 'Manufacturing'],
['Intel Corporation',19.88,0.31,1.58,'4/2 12:00am', 'Computer'],
['International Business Machines',81.41,0.44,0.54,'4/1 12:00am', 'Computer'],
['Johnson & Johnson',64.72,0.06,0.09,'4/2 12:00am', 'Medical'],
['JP Morgan & Chase & Co',45.73,0.07,0.15,'4/2 12:00am', 'Finance'],
['McDonald\'s Corporation',36.76,0.86,2.40,'4/2 12:00am', 'Food'],
['Merck & Co., Inc.',40.96,0.41,1.01,'4/2 12:00am', 'Medical'],
['Microsoft Corporation',25.84,0.14,0.54,'4/2 12:00am', 'Computer'],
['Pfizer Inc',27.96,0.4,1.45,'4/8 12:00am', 'Services', 'Medical'],
['The Coca-Cola Company',45.07,0.26,0.58,'4/1 12:00am', 'Food'],
['The Home Depot, Inc.',34.64,0.35,1.02,'4/8 12:00am', 'Retail'],
['The Procter & Gamble Company',61.91,0.01,0.02,'4/1 12:00am', 'Manufacturing'],
['United Technologies Corporation',63.26,0.55,0.88,'4/1 12:00am', 'Computer'],
['Verizon Communications',35.57,0.39,1.11,'4/3 12:00am', 'Services'],
['Wal-Mart Stores, Inc.',45.45,0.73,1.63,'4/3 12:00am', 'Retail'],
['Walt Disney Company (The) (Holding Company)',29.89,0.24,0.81,'4/1 12:00am', 'Services']
];

Ext.onReady(function(){
var reader = new Ext.data.ArrayReader({}, [
{name: 'company'},
{name: 'price', type: 'float'},
{name: 'change', type: 'float'},
{name: 'pctChange', type: 'float'},
{name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'},
{name: 'industry'},
{name: 'desc'}
]);

var store = new Ext.data.GroupingStore({
reader: reader,
data: dummyData,
sortInfo:{field: 'company', direction: "ASC"},
groupField:'industry'
});

var listView = new Ext.ux.GroupedListView({
store: store,
multiSelect: true,
emptyText: 'No images to display',
reserveScrollOffset: true,

startCollapsed : true,
startExpanded : ['Computer', 'Manufacturing'],
columns: [{
header: 'Company',
width: .5,
dataIndex: 'company'
},{
header: 'Last Modified',
width: .35,
dataIndex: 'lastChange',
tpl: '{lastChange:date("m-d h:i a")}'
},{
header: 'Price',
dataIndex: 'price',
align: 'right'
}]
});

// put it in a Panel so it looks pretty
var panel = new Ext.Panel({
id:'images-view',
width:425,
height:250,
collapsible:true,
layout:'fit',
title:'Simple ListView <i>(0 items selected)</i>',
items: listView
});
panel.render(document.body);

// little bit of feedback
listView.on('selectionchange', function(view, nodes){
var l = nodes.length;
var s = l != 1 ? 's' : '';
panel.setTitle('Simple ListView <i>('+l+' item'+s+' selected)</i>');
});
})

[KRavEN]

Thank you for sharing. I needed this.

[KRavEN]

If you add an overClass to the GroupingListView config like 'x-grid3-row-over' it doesn't behave properly. The row gets bigger because of the added border causing the list to jump a bit.

[ravigupta84]

22429


Here is the Grid collapsable icon in the attached image. I need a tooltip for this.


OrderDenomDtlGridSummary = Ext.extend(Ext.grid.EditorGridPanel, {

initComponent: function() {



this.view = new Ext.grid.GroupingView({
forceFit:true,
monitorResize :true,
monitorWindowResize:true,
getRowClass : function (record,meta, index) {
if (record.data.denominationId < 0) {
return 'x-grid3-tr-orderTotal';
}
},
startGroup: myTpl
});

var detailRecord = Ext.data.Record.create([
{name:'currencyId'},
{name:'denominationId'},
{name:'fitness'}

]);
var denomStore = new Ext.data.GroupingStore({
reader: new Ext.data.JsonReader({root: "rows"},detailRecord),
sortInfo:{field: 'fitness', direction: "ASC"},
groupField:'fitness'
});

this.store = denomStore;

}
}

=====================================

this.OrderDenomDtlGridSummary = new OrderDenomDtlGridSummary({
currencyCountry:this.currency,
serviceType:this.serviceType,
anchor:'100%',
collapsible: true,//
title: '<cl:message code="title" />',
toggleTip: {
text: '<cl:message code="Collapse" />'
},
listeners: {
render: function(c){
c.toggleTip.target = c.tools['toggle'];
Ext.QuickTips.register(c.toggleTip);
},
expand: function(c){
c.toggleTip.text = '<cl:message code="Collapse" />';
},
collapse: function(c){
c.toggleTip.text = '<cl:message code="Expand" />';
}

}
});
Please do the needful

[ravigupta84]

I have found the code for Grouping view - see the below code. I need a tooltip for the above images

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}",
gidSeed :1000,
initTemplates : function() {
Ext.grid.GroupingView.superclass.initTemplates
.call(this);


this.endGroup = "</div></div>"
},
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)
}
},
toggleGroup : function(c, b) {
this.grid.stopEditing(true);
c = Ext.getDom(c);
var a = Ext.fly(c);
b = b !== undefined ? b : a
.hasClass("x-grid-group-collapsed");
this.state[a.dom.id] = b;
a[b ? "removeClass" : "addClass"]
("x-grid-group-collapsed")
},
expandAllGroups : function() {
this.toggleAllGroups(true)
},
collapseAllGroups : function() {
this.toggleAllGroups(false)
},
getGroupId : function(g) {
var d = this.grid.getGridEl().id;
var c = this.getGroupField();
var e = this.cm.findColumnIndex(c);
var b = this.cm.config[e];
var h = b.groupRenderer || b.renderer;
var a = this.getGroup(g, {
data : {}
}, h, 0, e, this.ds);
return d + "-gp-" + c + "-"
+ Ext.util.Format.htmlEncode(g)
}
});


Last edited by ravigupta84 (http://www.sencha.com/forum/posthistory.php?p=514322); Today at 5:36 PM. Reason: Removed extra code

[KRavEN]

This extension is for a ListView. You're asking about GroupingView for a grid. Go ask on the help forum.

[KRavEN]

Anyone using this have any ideas on how to add an array of values objects for each grouping to the values object that is passed to the template?

With GroupingView you can access values.rs in the template and rs is an array of all the values objects for that grouping.

There doesn't look to be an easy way to do that with the way the grouping is implemented with this ux. This implementation is of course faster, but now I can't override the header template and add counts to the header like I could with GroupingView.

[KRavEN]

Okay, I added the values.rs array similar to how GroupingView does it. I also added groupRenderer similar to GroupingView. Finally I renamed the ux to Ext.ux.list.GroupingListView to be more consistent with Ext naming.

Still to do figure out a way to handle if grouping is turned off in the store and then the store is reloaded. Right now this creates an empty group at the start of the list.

EDIT
24 Sep 2010 - added toggleAllGroups, expandAllGroups, collapseAllGroups methods


Ext.ns('Ext.ux.list');
Ext.ux.list.GroupingListView = Ext.extend(Ext.ListView, {

/**
* @cfg {Boolean} startCollapsed true to start all groups collapsed (defaults
* to false)
*/
startCollapsed : false,

/**
* @cfg {Array} startExpanded An Array of GroupeId's that should start
* Collapsed
*/
startExpanded : [],

groupHeaderTpl : '<tpl if="xindex == 1 || parent.rows[xindex-1].group_index != parent.rows[xindex-2].group_index">'
+ '<div class="x-grid-group {[this.getCollapseClass(values)]}" group-index="{group_index}">'
+ '<div class="x-grid-group-hd">'
+ '<div class="x-grid-group-title">'
+ '{group_index} '
+ '</div>'
+ '</div>'
+ '<div class="x-grid-group-body">' +
'</tpl>',

groupFooterTpl : '<tpl if="xindex == (xcount) || this.isBigger(xindex, (xcount-1)) || parent.rows[xindex-1].group_index != parent.rows[xindex].group_index"> '
+ '</div></div></tpl>',

groupState : {},

initComponent : function() {
var collapsedClass = '';
if (this.startCollapsed) {
collapsedClass = ' x-grid-group-collapsed';
}
this.tpl = new Ext.XTemplate(
'<tpl for="rows">',
// grouping header
this.groupHeaderTpl,
// endof grouping header

// row template
'<dl class="x-grid3-row {[xindex % 2 === 0 ? "" : "x-grid3-row-alt"]}">',
'<tpl for="parent.columns">',
'<dt style="width:{[values.width*100]}%;text-align:{align};">',
'<em unselectable="on"<tpl if="cls"> class="{cls}</tpl>">',
'{[values.tpl.apply(parent)]}',
'</em>',
'</dt>',
'</tpl>',
'<div class="x-clear"></div>',
'</dl>',
// endof row template

// grouping footer
this.groupFooterTpl,
// endof grouping footer

'</tpl>',
'<div class="dataview-border"></div>', {
isBigger : function(isbigger, than) {
return isbigger > than;
},
getCollapseClass : function(values) {
return values.group_collapsed ? ' x-grid-group-collapsed' : '';
}
}
);
Ext.ux.list.GroupingListView.superclass.initComponent.apply(this, arguments);
},

collectData : function(records, startIndex) {
var rs = [], groups = {}, groupRs = [], j;
for (var i = 0, len = records.length; i < len; i++) {
rs[i] = this.prepareData(records[i].data, startIndex + i, records[i]);

if (i == 0 || rs[i]['group_index'] != rs[i - 1]['group_index']) {
if (i > 0) {
groups[j] = groupRs;
groupRs = [];
}
j = rs[i]['group_index'];
}
groupRs.push(rs[i]);
}

// add the final array of rs objects
groups[j] = groupRs;

Ext.each(rs, function(item, index) {
item.rs = groups[item.group_index];
});

return {
columns : this.columns,
rows : rs
}
},

prepareData : function(recData, index, record) {
var data = {}, groupId = record.data[record.store.groupField];

groupId = this.groupRenderer ? this.groupRenderer(groupId, index, record) : String(groupId);

Ext.apply(data, recData);
data.group_index = groupId;
if (!this.groupState[groupId]) {
this.groupState[groupId] = this.startCollapsed && (this.startExpanded.indexOf(groupId) == -1)
? false : true;
}
data.group_collapsed = !this.groupState[groupId];
return data;
},

onRender : function() {
Ext.ux.list.GroupingListView.superclass.onRender.apply(this, arguments);
this.innerBody.on('mousedown', this.interceptMouse, this);
},

interceptMouse : function(e) {
var hd = e.getTarget('.x-grid-group-hd', this.innerBody);
if (hd) {
e.stopEvent();
this.toggleGroup(hd.parentNode);
}
},

/**
* 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) {
var gel = Ext.get(group);
var groupIndex = gel.getAttribute('group-index');
expanded = Ext.isDefined(expanded) ? expanded : gel.hasClass('x-grid-group-collapsed');
this.groupState[groupIndex] = 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.innerBody.dom.childNodes;
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);
}
});

Ext.reg('groupinglistview', Ext.ux.list.GroupingListView);