PDA

View Full Version : gridPanel no scrollbar in Internet Explorer



michim
19 Mar 2010, 6:30 AM
Hi,
I have a gridPanel with some columns that are larger(the sum of all the columns lengths) than the width of the gridPanel. In Firefox it displays a horizontal scrollbar but in IE it just resizes to a bigger width. That would not be such a great problem but it doesn´t resize the title of the gridPanel. Is there a way around that?(besides deleting the title)


Ext.ns("incAdminApp");


Ext.BLANK_IMAGE_URL = "./ExtJS31/resources/images/default/s.gif";

incAdminApp.panouCentral = Ext.extend(Ext.Panel,{
border: false,
layout: 'fit',
title : 'yo',
autoScroll: true,
afterRender: function(){
incAdminApp.panouCentral.superclass.afterRender.apply(this,arguments);
}
});

Ext.reg('panouCentral',incAdminApp.panouCentral);

incAdminApp.panouPac1 = Ext.extend(Ext.Panel,{
border: true,
title: 'Panel 2',
layout: 'absolute',
initComponent: function(){
var config = {
items:[
{
id: 'pAGrid1',
x: 30,
y: 20,
region: 'center',
xtype: 'grid',
width: '600',
height: 300,
autoScroll: true,

store: new Ext.data.JsonStore({
autoDestroy: true,
url: '../Altele/grid-filter.json',
remoteSort: false,
sortInfo: {
field: 'company',
direction: 'ASC'
},
storeId: 'myJsonStore',
idPropery: 'id',
root: 'data',
totalPropery: 'total',
autoLoad: true,
fields:[
{
name: 'id'
},
{
name: 'company'
},
{
name: 'price',
type: 'float'
},
{
name: 'date'
},
{
name: 'visible',
type: 'boolean'
},
{
name: 'size'
}
]

}),
colModel: new Ext.grid.ColumnModel({
columns: [
{
header: 'Id',
sortable: true,
dataIndex: 'id'
},
{
header: 'Company',
sortable: true,
dataIndex: 'company'
},
{
header:'Price',
sortable: true,
dataIndex: 'price'
},
{
header: 'Date',
sortable: true,
dataIndex: 'date'
},
{
header: 'Visible',
sortable: true,
dataIndex: 'visible'
},
{
header: 'Size',
sortable: true,
dataIndex: 'size'
}
]
}),

stripeRows: true,
title : 'My Grid Test',
stateful : true,


loadMsk: true
},
{
xtype: 'panel',
region: 'center',
x: 50,
y: 300,
width: 100,
height: 200,
title: 'Panel X'
}

]
};

Ext.apply(this,Ext.apply(this.initialConfig,config));
incAdminApp.panouPac1.superclass.initComponent.apply(this,arguments);
},

afterRender: function(){
incAdminApp.panouPac1.superclass.afterRender.apply(this,arguments);
}

});

Ext.reg('panouPac1',incAdminApp.panouPac1);


//entry point
Ext.onReady(function(){

Ext.QuickTips.init();
var viewport = new Ext.Viewport({
layout: 'fit',
id : 'vp',
items: [

{
region: 'center',
xtype: 'panouCentral',
margins: '5 5 5 0',
cls: 'cpanels',
id: 'panCe',
autoScroll: true,

items:[{
xtype: 'panouPac1',
id: 'mypanel',
autoScroll: true

}]
}
]
});
});

23 Mar 2010, 7:33 AM
no need to set autoScroll to true. it's ignored.

What version of iE?

23 Mar 2010, 7:33 AM
btw, absolute layout does not proive any resizing of child items.

michim
23 Mar 2010, 8:13 AM
It's IE 8.0.6001.18882.
The 'absolute' layout is there because I'm experimenting with ExtJs. Thanks.

23 Mar 2010, 8:17 AM
if you render a grid panel to a viewport with the fit layout, does it work?

michim
23 Mar 2010, 10:50 PM
if you render a grid panel to a viewport with the fit layout, does it work?
It works that way but it fills the screen(because of the fit layout).

24 Mar 2010, 3:44 AM
is there enough data to scroll through?

Animal
24 Mar 2010, 4:12 AM
So you have a layout:'fit' Viewport which contains a layout: 'fit' Panel which contains a layout: 'absolute' Panel which contains a GridPanel?????????????????????

Don't do this stuff at random.

What is it that you are trying to do? Decide, then work towards it.

24 Mar 2010, 4:14 AM
Nige, when learning this stuff, people ted to do random things :(