PDA

View Full Version : Scrollbar problem in grid



Nithya
1 Dec 2009, 4:29 AM
Am trying to add a grid to the center region of a viewport, in a tab.
The code fragment for the grid is given below...
My problem here is i dont get the scrollbar for the grid(the grid data is more than the specified width here.).
however when resizing, i could see the vertical scrollbar,
when the size is reduced, i dont get any scrollbar (here i would expect both horizontal & vertical scrollbars).

I am new to extjs and any help would be great...



function createTestTabContent() {
var testTab = Ext.getCmp('testTab');
testTab.add({
xytpe: 'panel',
border: false,
html: '<div id="grid-example" width:100% style="font-size: 9pt;margin: 5px" overflow:hidden></div>'
});
testTab.doLayout();
}

Ext.onReady(function(){

var myData = [
['3m Co',71.72,0.02,0.03],
['Test Company Inc',29.01,0.42,1.47],
['Test Company Group Inc',83.81,0.28,0.34],
['Test Company 1 Company',52.55,0.01,0.02],
['Test Company International Group, Inc.',64.13,0.31,0.49],
['Test Company Inc.',31.61,-0.48,-1.54],
['Test Company Co.',75.43,0.53,0.71],
['Test Company 2.',67.27,0.92,1.39],
['Test Company, Inc.',49.37,0.02,0.04]

];
// create the data store
var store = new Ext.data.ArrayStore({
fields: [
{name: 'company'},
{name: 'price', type: 'float'},
{name: 'change', type: 'float'},
{name: 'pctChange', type: 'float'}

]
});
store.loadData(myData);
// create the Grid
var grid = new Ext.grid.GridPanel({
store: store,
layout: 'fit',
layoutConfig: {
autoWidth: false
},
columns: [
{id:'company',header: "Company", width: 160, sortable: true, dataIndex: 'company'},
{header: "Price", width: 75, sortable: true, dataIndex: 'price'},
{header: "Change", width: 75, sortable: true, dataIndex: 'change'},
{header: "% Change", width: 75, sortable: true, dataIndex: 'pctChange'}
],
stripeRows: true,
autoExpandColumn: 'company',
height:200,
width:600,
frame:true,
border:true,
autoScroll:true,
title:'Grid Sample'
});
grid.render('grid-example');
});


Thanks in advance...

Condor
1 Dec 2009, 4:51 AM
Do NOT render inside a layout!!!

Use:

tabPanel.add(gridPanel);
tabPanel.doLayout();

Nithya
1 Dec 2009, 10:26 PM
Thanks Condor for your immediate attention...
however i tried adding the grid to the panel as per your suggestion, but still i dont get the scrollbar.
Am i missing something......




//grid.render('grid-example') added the below ones instead of this.



var testTab = Ext.getCmp('testTab ');

testTab.add(grid);




testTab.doLayout();

Animal
1 Dec 2009, 11:35 PM
http://i131.photobucket.com/albums/p286/TimeTrialAnimal/dont-render.jpg

I assume that testTab is a TabPanel

Nithya
2 Dec 2009, 10:00 PM
Hi,
Yes, the testTab is a TabPanel.
I expect the grid to display the scrollbar when the width exceeds the panel width.
I have attached the screenshot for the problem.
still not solved, any suggestions?

Thanks,
Nithya

Condor
2 Dec 2009, 11:25 PM
What exactly is testTab? It looks like it is a panel without a layout.

Animal
3 Dec 2009, 12:15 AM
Princple: Add child items to Containers.

So add an Ext.grid.GridPanel to and Ext.TabPanel.

No intervening containers, no rendering that's it.

Nithya
3 Dec 2009, 1:39 AM
Hi,
Thanks for your suggestions....
tried as you said, still the scrollbar is missing.
The tabPanel is in fit layout of the center region, ...
please find the code below...






{
xtype: 'panel',
region: 'center',
border: false,
layout: 'fit',
defaults:

{
border: 'true'

},

items: createTabs()

}



function createTabs() {


var myData = [

['3m Co',71.72,0.02,0.03],

['Test Company Inc',29.01,0.42,1.47],
['Test Company Group Inc',83.81,0.28,0.34],
['Test Company 1 Company',52.55,0.01,0.02],
['Test Company International Group, Inc.',64.13,0.31,0.49],
['Test Company Inc.',31.61,-0.48,-1.54],
['Test Company Co.',75.43,0.53,0.71],
['Test Company 2.',67.27,0.92,1.39],
['Test Company, Inc.',49.37,0.02,0.04]



];




// create the data store

var store = new Ext.data.ArrayStore({

fields: [
{name: 'company'},
{name: 'price', type: 'float'},
{name: 'change', type: 'float'},
{name: 'pctChange', type: 'float'}

]

});

store.loadData(myData);




// create the Grid

var grid = new Ext.grid.GridPanel({

store: store,
columns: [
{id:'company',header: "Company", width: 160, sortable: true, dataIndex: 'company'},
{header: "Price", width: 75, sortable: true, dataIndex: 'price'},
{header: "Change", width: 75, sortable: true, dataIndex: 'change'},
{header: "% Change", width: 75, sortable: true, dataIndex: 'pctChange'}
],
stripeRows: true,
autoExpandColumn: 'company',
frame:true,
border:true,
width:600,
autoHeight: true,
autoWidth:false,
title:'Grid Sample'

});


var tabs = new Ext.TabPanel({

border: false,

plain: true,
items: [{
title: 'Test Tab',
id: 'testTab',
width:'100%',
items:[grid]

},{

title: 'test tab2',

id: 'testTab2'
}]
});
}





Thanks

Animal
3 Dec 2009, 2:01 AM
You you did not read what I said then?

Put the GridPanel in the TabPanel.

Not in a no-layout Panel in a TabPanel.

READ your code.

Nithya
3 Dec 2009, 3:54 AM
Thanks Animal,
Got your point, Now the columns are resizing when expanding or collapsing,
yet i dont get the scrollbar.
I have more than 10 columns to be displayed in the grid...

Nithya
4 Dec 2009, 4:21 AM
Hi All,
Thanks for your help....
setting the width and height to the grid, and setting the autoWidth and autoHeight to false solved my problem.
The scrollbar is now rendered.
Thanks,
Nithya :)