PDA

View Full Version : [Risolto]TabPanelScrollbar:plz make work this simple example



stranieroinpatria
19 Apr 2011, 3:16 AM
Hi all,
i need to make works this simple example to understand the behaviour of TabPanel.
I read a lot of thread about it and the answer is often
-make the item (grid in this example) directly child of tabpanel
or
-set grid size fixed to fill the entire space of tab

BUT
my target is to obtain an item of the tab with size greater than the tab size so the tab must have scrollbar
I can't set the item(grid) directly child of tabpanel because the tabpanel layout fix the size of the tab so you can't have scrollbars

This code build the tabpanel:


var vp=new Ext.Viewport({

layout:'border',
id:'view1',
items:[
{
xtype:'panel',
region:'north',
title:'north'
},{
xtype:'panel',
region:'east',
title:'east'
},{
xtype:'panel',
region:'center',
title:'center',
items:[
{
xtype:'tabpanel',
title:'Tabpanel',
id:'tabpanel',
activeTab:'tab',
autoWidth:false,
autoHeight:false,
defaults:{autoScroll:true},
items:
[
{
xtype:'panel',
title:'grid',
id:'tab',
autoWidth:false,
autoHeight:false,
defaults:{autoScroll:true},

items:grid
}
]
}
]
},{
xtype:'panel',
region:'west',
title:'west'
}

]
});
vp.show();

alert("tabpanel: " + Ext.getCmp('tabpanel').getWidth() +"\ngrid: " + Ext.getCmp('grid').getWidth());

And this code build the grid (taken from ext example)



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']
];
function change(val) {
if (val > 0) {
return '<span style="color:green;">' + val + '</span>';
} else if (val < 0) {
return '<span style="color:red;">' + val + '</span>';
}
return val;
}

function pctChange(val) {
if (val > 0) {
return '<span style="color:green;">' + val + '%</span>';
} else if (val < 0) {
return '<span style="color:red;">' + val + '%</span>';
}
return val;
}
var store = new 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'}
]
});

store.loadData(myData);

// create the Grid
var grid = new Ext.grid.GridPanel({
store: store,
columns: [
{
id :'company',
header : 'Company',
width : 500,
sortable : true,
dataIndex: 'company'
},
{
header : 'Price',
width : 75,
sortable : true,
renderer : 'usMoney',
dataIndex: 'price'
},
{
header : 'Change',
width : 75,
sortable : true,
dataIndex: 'change'
},
{
header : '% Change',
width : 75,
sortable : true,
dataIndex: 'pctChange'
},
{
header : 'Last Updated',
width : 300,
sortable : true,
dataIndex: 'lastChange'
},

],
stripeRows: true,
autoExpandColumn: 'company',
height: 1000,
width: 2000,
title: 'Array Grid',
id:'grid',
// config options for stateful behavior
stateful: true,
autoscroll:true,
stateId: 'grid'
});
The alert result is

tabpanel: 1297
grid: 2000

but no scrollbar appears

Please help me,
thank's for your attention

stranieroinpatria
19 Apr 2011, 4:22 AM
my target is to have a Portal inside a tab with:
-dynamic number of columns
-fixed size of each columns

So if I add a column, I need that portal raise his width

Please some help!!

stranieroinpatria
19 Apr 2011, 5:56 AM
Found the solution:
The TabPanel is not receiving a height from its surrounding layout due to how it is being placed, so I must insert a layout fit in the center region