PDA

View Full Version : How to config serval "feature"s in a grid and toggle between them?



hexawing
2 Sep 2011, 9:58 PM
var groupingFeature = Ext.create('Ext.grid.feature.Grouping');
Ext.create('Ext.grid.Panel', {
// other options
features: [groupingFeature]
});

Can I add a new feature into the [groupingFeature] array? How to do?
And if there are serval features, how can I toggle them?

skirtle
3 Sep 2011, 3:08 PM
Features have disable() and enable() methods that should allow you to turn them on or off. If that doesn't work for some specific combination of features then you'll have to be specific about which features you're trying to use.

hexawing
4 Sep 2011, 10:23 PM
I found I can use serval features like this:


var groupingFeature = Ext.create('Ext.grid.feature.Grouping',{
id: 'group',
ftype: 'groupingsummary',
groupHeaderTpl: '{name}',
hideGroupedHeader: true,
enableGroupingMenu: false
});
var abstractSummaryFeature = Ext.create('Ext.grid.feature.AbstractSummary',{
id: 'summary',
ftype: 'abstractsummary',
hideGroupedHeader: false,
enableGroupingMenu: true
});
Ext.create('Ext.grid.Panel', {
// other options
dockedItems: [{
dock: 'top',
xtype: 'toolbar',
items: [{
tooltip: 'Change the feature',
text: 'Change',
handler: function(){
var view = Ext.getCmp('sell_quote_item_grid').getView();
view.getFeature('group').disable();//do you mean this way?
view.getFeature('summary').enable();//I tried but failed...
view.refresh();
}
}]
}],
features: [groupingFeature, abstractSummaryFeature]
});

skirtle
5 Sep 2011, 3:39 AM
AbstractSummary is an abstract class, you can't use it as a feature.
Either use ftype or Ext.create(), not both.
There's a bug in the Grouping feature whereby it throws an error is you try to disable/enable it when there is no grouping menu.


Here's a complete example that worked for me, 4.0.2 and 4.0.6.


var store = new Ext.data.ArrayStore({
fields: ['type', 'name'],
groupField: 'type',
data: [
['A', 'Tom'],
['A', 'Bob'],
['B', 'Paul']
]
});

var groupingFeature = {
enableGroupingMenu: false,
ftype: 'grouping',
groupHeaderTpl: '{name}',
hideGroupedHeader: true,
id: 'group'
};

var summaryFeature = {
disabled: true,
ftype: 'summary',
id: 'summary'
};

Ext.create('Ext.grid.Panel', {
features: [groupingFeature, summaryFeature],
renderTo: Ext.getBody(),
store: store,
columns: [
{dataIndex: 'name', header: 'Name', summaryType: 'count'},
{dataIndex: 'type', header: 'Type', summaryType: 'count'}
],
tbar: [
{
text: 'Summary',
handler: function(){
var view = this.up('gridpanel').getView();

try {
// Swallow bug in disable() method wth enableGroupingMenu: false
view.getFeature('group').disable();
}
catch(ex) {
}

view.getFeature('summary').enable();
view.refresh();
}
}, {
text: 'Grouping',
handler: function(){
var view = this.up('gridpanel').getView();

view.getFeature('summary').disable();

try {
// Swallow bug in enable() method wth enableGroupingMenu: false
view.getFeature('group').enable();
}
catch(ex) {
}

view.refresh();
}
}
]
});

hexawing
5 Sep 2011, 6:07 PM
@skirtle,
Thank you! Your code does work! But, I still have a question:
How can I find which ftype should I use? In API, the hierarchy is like this:
Ext.grid.feature.Feature
->Ext.grid.feature.AbstractSummary
--->Ext.grid.feature.Summary
->Ext.grid.feature.Chunking
->Ext.grid.feature.Grouping
--->Ext.grid.feature.GroupingSummary
I thought ftype corresponds to the class name, but it seems not...

skirtle
5 Sep 2011, 6:21 PM
Really? I thought they all were the same.

If you open the docs and click on the green class name at the top it'll open up the source code. Search for alias. The last bit of the alias is the ftype.

hexawing
5 Sep 2011, 6:31 PM
emmm....I thougth, Ext.grid.feature.AbstractSummary and Ext.grid.feature.Grouping are the same level, so I can use "abstractSummary" as an ftype, but you said not...(:|

skirtle
5 Sep 2011, 6:43 PM
The level they are at is irrelevant. AbstractSummary is an abstract class. It is designed to be extended, not instantiated. It is extended by both Summary and GroupingSummary (via a mixin). You should use one of these two classes instead.