ExtJS Grid: Defining and switchnig between multiple column sets

[Ninjax]

Hi Sencha friends,

i was looking for the possiblity to define multiple views for a grid e.g.:

View "Default":
Name, Description, Category, Price, ..................
View "Smart"
Name, Price

The user should be able to switch between the views, using a dropdown in the right of the header, instead of unchecking the columns one by one manually.
This feature can be found e.g. MS SharePoint Tables

Can this feature be used in ExtJS Grids ?
I haven't seen it in all the provided Grid Examples.

THX
Ninjax

[redraid]

See http://docs.sencha.com/ext-js/4-1/#!/api/Ext.grid.Panel-method-reconfigure

[Ninjax]

Big Thx !
Are there eventually some examples how it can look like somewhere?

Thx
Ninjax

[redraid]

Ext.create('Ext.data.Store', {
storeId:'simpsonsStore',
fields:['name', 'email', 'phone'],
data:{'items':[
{ 'name': 'Lisa', "email":"lisa@simpsons.com", "phone":"555-111-1224" },
{ 'name': 'Bart', "email":"bart@simpsons.com", "phone":"555-222-1234" },
{ 'name': 'Homer', "email":"home@simpsons.com", "phone":"555-222-1244" },
{ 'name': 'Marge', "email":"marge@simpsons.com", "phone":"555-222-1254" }
]},
proxy: {
type: 'memory',
reader: {
type: 'json',
root: 'items'
}
}
});

var columns1 = [
{ text: 'Name', dataIndex: 'name' },
{ text: 'Email', dataIndex: 'email', flex: 1 }
];
var columns2 = [
{ text: 'Name', dataIndex: 'name' },
{ text: 'Phone', dataIndex: 'phone' }
];

Ext.create('Ext.grid.Panel', {
title: 'Simpsons',
store: Ext.data.StoreManager.lookup('simpsonsStore'),
columns: columns1,
height: 200,
width: 400,
renderTo: Ext.getBody(),
tbar: [
{
text: 'columns 1', handler: function (btn) {
var grid = btn.up('grid');
// reconfigure only columns if you want change store pass in 1st arg
grid.reconfigure(null, columns1);
}
},
{
text: 'columns 2', handler: function (btn) {
var grid = btn.up('grid');
grid.reconfigure(null, columns2);
}
}
]
});​

demo: http://jsfiddle.net/UAn68/1/

[Ninjax]

Very big THX !!!
GREAT WORK !!!