PDA

View Full Version : Autoheight & Scrollbar Horizontal tabpanel



vaucer
4 Feb 2010, 9:35 AM
Hello,

I try to make a tabpanel with subtabs which contain grid and panel binding like (binding example).

I experencied two issue: first i added option autoheight (note that don't work if i use just "autoheight:true," option, but i must to use option " defaults:{autoHeight:true}") this solution is OK on Firefox but don't work in IE i get my tabpanel minified like this :
file:///C:/Users/Vaucer/AppData/Local/Temp/moz-screenshot.png
http://img202.imageshack.us/img202/679/tabpanel.png

And my second problem is that the horizonal scrollbar not appear for my grids.

Thx you very much for your help, or if you have other way for my project.

And big sorry for my bad english. :s

In fact i want binding grid to a form with my grid in north position and my form in south and i need to have subtabs which contain simple grid without form binding.

my mainscript

/*!
* Ext JS Library 3.1.0
* Copyright(c) 2006-2009 Ext JS, LLC
* licensing@extjs.com
* http://www.extjs.com/license
*/

Ext.onReady(function() {

var store = new Ext.data.Store({
url: 'js/sheldon.xml',
reader: new Ext.data.XmlReader({
record: 'Item',
id: 'ASIN',
totalRecords: '@total'
}, [
{name: 'Author', mapping: 'ItemAttributes > Author'},
'Title',
'Manufacturer',
'ProductGroup',
'DetailPageURL'
])
});


var grid = new Ext.grid.GridPanel({
store:store,
columns: [
{header: "Author", width: 120, dataIndex: 'Author', sortable: true},
{header: "Title", width: 180, dataIndex: 'Title', sortable: true},
{header: "Manufacturer", width: 115, dataIndex: 'Manufacturer', sortable: true},
{header: "Product Group", width: 100, dataIndex: 'ProductGroup', sortable: true}
],
sm: new Ext.grid.RowSelectionModel({singleSelect: true}),
viewConfig: {
forceFit: true
},
height:410,
split: true,
region: 'north'
});

var bookTplMarkup = [
'Title: <a href="{DetailPageURL}" target="_blank">{Title}</a><br/>',
'Author: {Author}<br/>',
'Manufacturer: {Manufacturer}<br/>',
'Product Group: {ProductGroup}<br/>'
];
var bookTpl = new Ext.Template(bookTplMarkup);



var ct = new Ext.Panel({

frame: true,
title: 'Journal des incidents',
width: 930,
height: 746,
layout: 'border',
items: [
grid,
{
id: 'detailPanel',
region: 'center',
bodyStyle: {
background: '#ffffff',
padding: '7px'
},
html: 'Please select a book to see additional details.'
}
]
})
grid.getSelectionModel().on('rowselect', function(sm, rowIdx, r) {
var detailPanel = Ext.getCmp('detailPanel');
bookTpl.overwrite(detailPanel.body, r.data);
});
store.load();

var tp = new Ext.TabPanel({
renderTo: 'apac-top',
id: 'main-tabs',
width: 930,
defaults:{autoHeight:true},
activeTab: 0,
items: [{
xtype: 'tabpanel',
title: 'Tab 1',
id: 'tab1',
activeTab: 0,
tabPosition: 'bottom',

items: [{
title: 'Sub-tab 1',
id: 'subtab1',
items:[ct]
},{
title: 'Sub-tab 2',
id: 'subtab2',
items:[{
title: 'Tab 1',
xtype: 'editorgrid',
store:store,
columns: [
{header: "Author", width: 120, dataIndex: 'Author', sortable: true},
{header: "Title", width: 180, dataIndex: 'Title', sortable: true},
{header: "Manufacturer", width: 115, dataIndex: 'Manufacturer', sortable: true},
{header: "Product Group", width: 100, dataIndex: 'ProductGroup', sortable: true}
],
sm: new Ext.grid.RowSelectionModel({singleSelect: true}),
viewConfig: {
forceFit: true
},
height:446,
width:930,
split: true,
region: 'north'

}]
},{
title: 'Sub-tab 3',
id: 'subtab3'
}]

},{
title: 'Tab 2',
id: 'tab2'
},{
title: 'Tab 3',
id: 'tab3'
},{
title: 'Tab 4',
id: 'tab4'
},{
title: 'Tab 5',
id: 'tab5'
}]

});

});

vaucer
4 Feb 2010, 10:56 AM
It's ok for scrollbar issue, i added autoscroll option to my subtabs and i have removed option ""forcefit in my grid and now its ok for horizontal scrolling.

But i still have my problem with autoheight option...