PDA

View Full Version : ExtJS Grid: Defining and switchnig between multiple column sets



Ninjax
27 Sep 2012, 12:40 AM
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
27 Sep 2012, 1:16 AM
See http://docs.sencha.com/ext-js/4-1/#!/api/Ext.grid.Panel-method-reconfigure

Ninjax
27 Sep 2012, 1:49 AM
Big Thx !
Are there eventually some examples how it can look like somewhere?

Thx
Ninjax

redraid
27 Sep 2012, 3:32 AM
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
2 Oct 2012, 5:12 AM
Very big THX !!!
GREAT WORK !!!