PDA

View Full Version : Howto to make fixed grid header inside a tapanel's tab



pebblesbysea
29 Apr 2013, 6:07 AM
I have created a grid (xtype:grid) with "tabPanel.add()" function - this creates a grid in a new tab under tabPanel.

The grid also has a "tbar" with pagination bar and other buttons. Now I am trying to make this tbar and column header fixed in position and only rows scrollable - just like excel sheet.

Instead what it creates is a grid with complete tab scrolling including the tbar and rows.

Is there any way that header and tbar become fixed in its positions and scrollbar is created only for rows and tab or window?


tabPanel.add({
plain : false,
region : 'center',
activeTab : 0,
xtype : 'grid',
id : 'myGrid',
layout : 'fit',
store : gridStore,
selType : selType,
frame : true,
scroll : 'vertical',
selModel : selModel,
columns : gridColumns,
stripeRows : true,
..........,
listeners: .......................,
tbar: Ext.create('Ext.toolbar.Toolbar', {
......................
}),
});

43417

rafaelrp
29 Apr 2013, 6:20 AM
you can create a toolbar separately and put them in the items array of the tab panel.



items: [toolbar, grid]


if you want to use the add() function just add first the toolbar and then add the grid.


tabPanel.add(toolbar);
tabPanel.add(grid);


or in mvc arch, just add the xtypes


items[
{xtype: 'toolbarGrid'},
{xtype: 'gridList', title: 'Title'}
]

pebblesbysea
29 Apr 2013, 9:35 PM
thank you rafaelrp.

That helped, I created two items in tabpanel one a toolbar with autoscroll:false and one the gridpanel with autoscroll:true.

Now I am facing a new problem which is that if I do not specify "height" parameter in grid, scrollbars do not appear. And that is I don't want to do as window can be resized and new content can be added in other regions of tabpanel and it should be flexible enough of resize on its own.

I have made sure that layout should stick to "fit" but there are some top level regions which have different layouts.

Any help (:|

slemmon
1 May 2013, 1:32 PM
See if this example helps at all:



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


var grid = Ext.create('Ext.grid.Panel', {
title: 'Simpsons',
store: Ext.data.StoreManager.lookup('simpsonsStore'),
columns: [
{ text: 'Name', dataIndex: 'name' },
{ text: 'Email', dataIndex: 'email', flex: 1 },
{ text: 'Phone', dataIndex: 'phone' }
],
height: 200,
width: 400
});


Ext.create('Ext.tab.Panel', {
width: 300,
height: 200,
activeTab: 0,
items: [grid],
renderTo : Ext.getBody()
});