PDA

View Full Version : Grid Scroll bar not coming inside tab panel



sam.arulprakash
2 Sep 2010, 2:21 AM
Hi all,

in my page i have a viewport,which is occupied by panel and TabPanel.
In this tab panel one of the tab is added with Grid.

So,finally i have added grid inside my tab panel.
In this code my grid's scrollbar not visible.

i have tried many things like autoHeight,height:'auto' nothing works inside tab panel

please post your suggestions.

Thanks in advance.
Thanks& Regards,
Arul Prakash.M





<script language="javascript" type="text/javascript">
var grid_ds;
var grid;
Ext.onReady(function(){
Ext.BLANK_IMAGE_URL = './ext/resources/images/default/s.gif';
Ext.QuickTips.init();
grid_ds = new Ext.data.Store
({
proxy: new Ext.data.HttpProxy
({
url: "PhaerosWebControls/MdWrapper.asmx/GetShips",
method: "POST",
disableCaching: true
}),
reader: new Ext.data.XmlReader
({
record: 'Rows',
id: 'SHPFLAG',
totalRecords: 'totalRecords'
},['SHPFLAG','SHPNAME']),
autoLoad: true
});

grid = new Ext.grid.GridPanel(
{
store: grid_ds,
colModel: new Ext.grid.ColumnModel
({
columns:[
{id :'SHPFLAG',header:'SHPFLAG',
sortable: true, dataIndex: 'SHPFLAG'},
{header: 'SHPNAME',dataIndex: 'SHPNAME'}
]
}),
title:'test',
sm: new Ext.grid.RowSelectionModel({singleSelect:true}),
renderTo:'divGrid',
autoHeight:true,
bbar: new Ext.PagingToolbar
({
xtype: 'paging',
pageSize: 3,
store: grid_ds,
displayInfo: true,
emptyMsg: "No data to display"
})

});
});
</script>
<script language="javascript">

var TabPanel1;
var panel1;


Ext.onReady(function(){
panel1 =new Ext.Panel
({
renderTo: 'divPanel',
autoWidth:false,
autoHeight:true
});

TabPanel1 = new Ext.TabPanel({
renderTo: 'divTabContainer',
autoWidth:false,
autoHeight:true,
activeTab: 0,
forceFit:true,
enableTabScroll:true,
frame:true,
border: true,
resizeTabs:true,
maskDisabled:true,
monitorResize:true,
layoutOnTabChange:true,
deferredRender:true,
items:[grid]
});


var viewport1 = new Ext.Viewport({

layout: "border",
items: [{
region:'center',
xtype:'panel',
layout:'fit',
border:true,
split:true,
itemID:'pnl1',
items:[panel1]
},{
region:'south',
xtype:'panel',
layout:'fit',
border:true,
split:true,
itemID:'pnl2',
minHeight:100,
height:200,
items:[TabPanel1]
}],
renderTo: Ext.getBody()
});

viewport1.on('afterlayout', function()
{

});



});


</script>

Condor
2 Sep 2010, 2:57 AM
1. Your layout is overnested. panel1 and TabPanel1 should BE the center and south regions.
2. Do NOT use renderTo in components that are included in a layout.
3. Do NOT use autoWidth or autoHeight in a layout that manages either the width or height (border layout manages both).
4. Do NOT use monitorResize:true on components that are managed by a layout.

sam.arulprakash
2 Sep 2010, 3:30 AM
Thanks condor.
After made all correction ,that you have mentioned my code works fine.


Thank you very much.


<script language="javascript" type="text/javascript">
var grid_ds;
var grid;
Ext.onReady(function(){
Ext.BLANK_IMAGE_URL = './ext/resources/images/default/s.gif';
Ext.QuickTips.init();
grid_ds = new Ext.data.Store
({
proxy: new Ext.data.HttpProxy
({
url: "PhaerosWebControls/MdWrapper.asmx/GetShips",
method: "POST",
disableCaching: true
}),
reader: new Ext.data.XmlReader
({
record: 'Rows',
id: 'SHPFLAG',
totalRecords: 'totalRecords'
},['SHPFLAG','SHPNAME']),
autoLoad: true
});

grid = new Ext.grid.GridPanel(
{
store: grid_ds,
colModel: new Ext.grid.ColumnModel
({
columns:[
{id :'SHPFLAG',header:'SHPFLAG',
sortable: true, dataIndex: 'SHPFLAG'},
{header: 'SHPNAME',dataIndex: 'SHPNAME'}
]
}),
title:'test',
sm: new Ext.grid.RowSelectionModel({singleSelect:true}),
//renderTo:'divGrid',
//autoHeight:true,
bbar: new Ext.PagingToolbar
({
xtype: 'paging',
pageSize: 3,
store: grid_ds,
displayInfo: true,
emptyMsg: "No data to display"
})

});
});
</script>
<script language="javascript">

var TabPanel1;
var panel1;


Ext.onReady(function(){
panel1 =new Ext.Panel
({
renderTo: 'divPanel',
autoWidth:false,
autoHeight:true
});

TabPanel1 = new Ext.TabPanel({
renderTo: 'divTabContainer',
// autoWidth:false,
// autoHeight:true,
activeTab: 0,
forceFit:true,
enableTabScroll:true,
frame:true,
border: true,
resizeTabs:true,
maskDisabled:true,
//monitorResize:true,
layoutOnTabChange:true,
deferredRender:false,
items:[grid]
});


var viewport1 = new Ext.Viewport({

layout: "border",
items: [{
region:'center',
xtype:'panel',
layout:'fit',
border:true,
split:true,
itemID:'pnl1',
items:[panel1]
},{
region:'south',
xtype:'panel',
layout:'fit',
border:true,
split:true,
itemID:'pnl2',
minHeight:100,
height:200,
items:[TabPanel1]
}],
renderTo: Ext.getBody()
});

viewport1.on('afterlayout', function()
{

});



});


</script>

Condor
2 Sep 2010, 3:42 AM
You only did something with #3.

I suggest you update to code on all 4 points I mentioned.

sam.arulprakash
7 Sep 2010, 12:20 AM
Sorry for the late reply Condor.Now only i have seen your comments.

Only one question condor.
you have said this layout is over nested?...
is this any way to write this code in simplified manner?


Thanks condor.

This one is correct code.(This includes your suggestions in #2)


<script language="javascript">

var TabPanel1;
var panel1;

Ext.onReady(function(){

panel1 =new Ext.Panel ({ });

TabPanel1 = new Ext.TabPanel
({
activeTab: 0,
forceFit:true,
enableTabScroll:true,
frame:true,
border: true,
resizeTabs:true,
maskDisabled:true,
layoutOnTabChange:true,
deferredRender:false,
items:[grid]
});


var viewport1 = new Ext.Viewport
({
layout: "border",
items: [{
region:'center',
xtype:'panel',
layout:'fit',
border:true,
split:true,
itemID:'pnl1',
items:[panel1]
},{
region:'south',
xtype:'panel',
layout:'fit',
border:true,
split:true,
itemID:'pnl2',
minHeight:100,
height:200,
items:[TabPanel1]
}]
});
});


</script>

Animal
7 Sep 2010, 12:40 AM
It works but it is overnested.

There's no point in wrapping each Panel in a layout:'fit' Panel.

sam.arulprakash
7 Sep 2010, 1:00 AM
Thanks animal for your valuable reply.

But if i comment [layout:'fit'] then,i get some unexpected result.(Grid Panel Get shrinks inside a tabpanel).
As per the document TabPanel(Header,Footer) uses layout:'fit' panel.But not items right?....
if i have overlooked anything please point it to me a right one?......

Thanks & Regards,
Arul Prakash.M

Animal
7 Sep 2010, 1:08 AM
DO NOT WRAP!

Condor
7 Sep 2010, 1:17 AM
What I and Animal are getting at is this:

{
region:'center',
xtype:'panel',
layout:'fit',
border:true,
split:true,
itemID:'pnl1',
items:[panel1]
}
should be:

panel1
and panel1 should be configured with

region:'center',
border:true,
split:true,
itemId:'pnl1'

sam.arulprakash
7 Sep 2010, 1:28 AM
Sorry for my confusion Animal.
Finally its come to end and now i am clear with this.

Thanks Hot Animal & Cool Condor.

Thanks & Regards,
Arul Prakash.M