PDA

View Full Version : Tab inside a grid.



rishisaraf11
8 Nov 2011, 5:29 AM
Hi Guys,

I am just wondering if its possible to add tabs inside a extjs grid. Actually my grid have more than 120 columns , so user have to scroll a lot to see all columns. To improve the view i am thinking of grouping the columns and putting each group in a tab. So on load user will see some mandatory columns and different tabs. To see the group info he/she can click on tab and see the the group info along with mandatory columns.

Regards
Rishi Saraf

mitchellsimoens
8 Nov 2011, 8:19 AM
Don't see why it couldn't be done... I personally wouldn't want to do it but I would start with creating a custom grid view.

Also, what framework and version so I can move to the correct forum?

rishisaraf11
9 Nov 2011, 2:00 AM
Hi Mitchell,

Actually currently we are using plain JSP and java script. Since it is getting difficult to maintain this application we are thinking of moving to some intelligent UI framework like ext JS. One of the criteria of using any framework will be the possibility of building user friendly and intelligent grid which can accommodate more than 100 columns and 1000 of rows. To avoid lot of horizontal scrolling I thought of this tab based grid.

Regards
Rishi Saraf

skirtle
9 Nov 2011, 2:15 AM
ExtJS has built-in support for hiding/showing columns via a menu in the column headers. If you use grouped headers then several columns can be shown/hidden at once. Thought occurs that with a bit of JavaScript and some CSS trickery you could simulate tabbing that way.

See:

http://dev.sencha.com/deploy/ext-4.0.2a/examples/grid/group-header-grid.html

mitchellsimoens
9 Nov 2011, 4:18 AM
If you want tabs... you can do it the opposite... have many grids in many tabs using the same Store.... that way it is all "out-of-the-box" stuff.

skirtle
9 Nov 2011, 4:41 AM
Using separate grids could be awkward for selections and vertical scrollbars. Not sure whether you can share a selection model between grids. If all the grids aren't in sync it could quickly get confusing.

mitchellsimoens
9 Nov 2011, 5:06 AM
Using separate grids could be awkward for selections and vertical scrollbars. Not sure whether you can share a selection model between grids. If all the grids aren't in sync it could quickly get confusing.

Wouldn't see why you wouldn't be able to since the records will be the same... I'm almost intrigued to try myself :)

rishisaraf11
9 Nov 2011, 5:21 AM
[QUOTE=skirtle;670673]ExtJS has built-in support for hiding/showing columns via a menu in the column headers. If you use grouped headers then several columns can be shown/hidden at once. Thought occurs that with a bit of JavaScript and some CSS trickery you could simulate tabbing that way.

skirtle I am aware about show and hide functionality but I don't want to use it because when user will try to see all the columns which is very likely to happen then he/she will have to do a lot of scrolling. And I am sure they will not like it.Basically currently we have grid something like below. When user click on + sign he/she see field inside that group. At a time only one group can be expanded using + . I wanted something similar in extjs grid .

29172

rishisaraf11
9 Nov 2011, 5:33 AM
Wouldn't see why you wouldn't be able to since the records will be the same... I'm almost intrigued to try myself :)
Mitchell Skirtle is correct. Having a separate grid inside a tab will not be very good user experience specially during sorting. Moreover we want to put some field in common view so that user can see them always . As telephone number in
below image. But yeah I'll try your suggestion and will see how it looks.

29173

Thanks :).

mitchellsimoens
9 Nov 2011, 5:42 AM
Sorting, filtering, selecting work across tabs (tested in both 4.0.7 and 4.1-PR1):


Ext.onReady(function() {

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

var store = Ext.create('Ext.data.ArrayStore', {
fields: [
{name: 'company'},
{name: 'price', type: 'float'},
{name: 'change', type: 'float'},
{name: 'pctChange', type: 'float'},
{name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
],
data: myData
});

var selModel = Ext.create('Ext.selection.RowModel', {
mode : 'SIMPLE'
});

var tabpanel = Ext.create('Ext.tab.Panel', {
renderTo : Ext.getBody(),
width : 400,
height : 400,

items : [
{
xtype : 'gridpanel',
title : 'Grid 1',
store : store,
selModel : selModel,
columns : [
{
text : 'Company',
flex : 1,
sortable : false,
dataIndex : 'company'
},
{
text : 'Price',
width : 75,
sortable : true,
renderer : 'usMoney',
dataIndex : 'price'
}
],
viewConfig : {
stripeRows : true
}
},
{
xtype : 'gridpanel',
title : 'Grid 2',
store : store,
selModel : selModel,
columns : [
{
text : 'Change',
width : 75,
sortable : true,
dataIndex : 'change'
},
{
text : '% Change',
width : 75,
sortable : true,
dataIndex : 'pctChange'
},
{
text : 'Last Updated',
width : 85,
sortable : true,
renderer : Ext.util.Format.dateRenderer('m/d/Y'),
dataIndex : 'lastChange'
}
],
viewConfig : {
stripeRows : true
}
}
]
});

});

This is what you wanted no?

rishisaraf11
9 Nov 2011, 6:33 AM
Sorting, filtering, selecting work across tabs (tested in both 4.0.7 and 4.1-PR
This is what you wanted no?

Thanks Mitchell for your effort. Actually I want something like below . So in below image country and city are common fields and grid1 , grid2 contain other fields . User will always have a view of country ,city .
29178
Thanks and Regards
Rishi Saraf

mitchellsimoens
9 Nov 2011, 6:39 AM
Like this?


Ext.onReady(function() {

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

var store = Ext.create('Ext.data.ArrayStore', {
fields: [
{name: 'company'},
{name: 'price', type: 'float'},
{name: 'change', type: 'float'},
{name: 'pctChange', type: 'float'},
{name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
],
data: myData
});

var selModel = Ext.create('Ext.selection.RowModel', {
mode : 'SIMPLE'
});

var panel = Ext.create('Ext.panel.Panel', {
renderTo : Ext.getBody(),
width : 600,
height : 400,
layout : {
type : 'hbox',
align : 'stretch'
},

items : [
{
xtype : 'gridpanel',
flex : 1,
store : store,
selModel : selModel,
title : 'Left Grid',
columns : [
{
text : 'Company',
flex : 1,
sortable : false,
dataIndex : 'company'
}
],
viewConfig : {
stripeRows : true
}
},
{
xtype : 'tabpanel',
flex : 1,
items : [
{
xtype : 'gridpanel',
title : 'Grid 1',
store : store,
selModel : selModel,
columns : [
{
text : 'Price',
width : 75,
sortable : true,
renderer : 'usMoney',
dataIndex : 'price'
},
{
text : 'Last Updated',
width : 85,
sortable : true,
renderer : Ext.util.Format.dateRenderer('m/d/Y'),
dataIndex : 'lastChange'
}
],
viewConfig : {
stripeRows : true
}
},
{
xtype : 'gridpanel',
title : 'Grid 2',
store : store,
selModel : selModel,
columns : [
{
text : 'Change',
width : 75,
sortable : true,
dataIndex : 'change'
},
{
text : '% Change',
width : 75,
sortable : true,
dataIndex : 'pctChange'
}
],
viewConfig : {
stripeRows : true
}
}
]
}
]
});

});

mitchellsimoens
9 Nov 2011, 6:40 AM
Have to admit... really like this UI

rishisaraf11
9 Nov 2011, 7:01 AM
Like this?



Yes Mitchell something like this only :). But I wanted to get rid of two vertical scroll bars and have one which can control scrolling of both the panels(common grid and tab grid.). Also if it can be done in seamless manner so that user don't get a feel that these are two separate component then I think my job will be done.

Thanks
Rishi Saraf

mitchellsimoens
9 Nov 2011, 7:20 AM
Ah, that's where it gets super fun of syncing the scrolls. Basically you have to get the offset of the grid being scrolled and scroll the others. Not too hard