PDA

View Full Version : vertical scrollbar in ExtJS GridPanel



Higgs.Boson
7 May 2013, 6:17 AM
I'm working on a project where I have a GridPanel on a page. The panel can display any number of rows. When the number of rows is too large, GridPanel doesn't display an vertical scrollbars. Here is the code:

Ext.onReady(function(){ var myData = [
['start'],['1'], ['2'], ['3'], ['4'], ['5'], ['6'], ['7'], ['8'], ['9'], ['10'], ['11'], ['12'], ['13'],
['14'], ['15'], ['16'], ['17'], ['18'], ['19'], ['20'], ['21'], ['22'], ['23'], ['24'], ['25'],
['26'], ['27'], ['28'], ['29'], ['30'], ['31'], ['32'], ['33'], ['34'], ['35'], ['36'], ['end']
];


var store = new Ext.data.ArrayStore({
fields: [ {name: 'values'} ]
});


store.loadData(myData);


var grid = new Ext.grid.GridPanel({
store: store,
columns: [{ header: 'values', dataIndex: 'values'}]
});


new Ext.Viewport({
padding:10,
layout:'fit',
items: [{
xtype: 'tabpanel',
items: [{
title: 'Tab1',
items: [grid]
}]
}],
renderTo: Ext.getBody()
});

});

Note, that the total number of rows greater than 36. In my window display only 29 rows:
43604

droessner
7 May 2013, 7:44 AM
Try adding layout: 'fit' to the Tab 1 component.

Higgs.Boson
7 May 2013, 9:19 AM
Yes, it's work. But I was wrong. I simplified example, and deleted from it all complex chunks of code. In my version it doesn't work. My complex code:


Ext.onReady(function(){
var myData = [
['start'],['1'], ['2'], ['3'], ['4'], ['5'], ['6'], ['7'], ['8'], ['9'], ['10'], ['11'], ['12'], ['13'],
['14'], ['15'], ['16'], ['17'], ['18'], ['19'], ['20'], ['21'], ['22'], ['23'], ['24'], ['25'],
['26'], ['27'], ['28'], ['29'], ['30'], ['31'], ['32'], ['33'], ['34'], ['35'], ['36'], ['end']
];


var store = new Ext.data.ArrayStore({
fields: [ {name: 'values'} ]
});


store.loadData(myData);
var Panel1 = new Ext.Panel({
tbar: {
items: [{ xtype: 'button', text: 'Add' }, {xtype: 'button',text: 'New Message'}]
}
});
var grid = new Ext.grid.GridPanel({
store: store,
columns: [{ header: 'values', dataIndex: 'values'}]
});


new Ext.Viewport({
padding:10,
layout:'fit',
items: [{
xtype: 'tabpanel',
items: [{
title: 'Tab1',
items: [Panel1,grid]
}]
}],
renderTo: Ext.getBody()
});
});


Help me please in that version of code

droessner
7 May 2013, 9:24 AM
It depends on how you want to display Panel1 and grid. I'm assuming you are looking for something like this:



var grid = new Ext.grid.GridPanel({
store: store,
flex: 1,
columns: [{ header: 'values', dataIndex: 'values'}]
});




new Ext.Viewport({
padding:10,
layout:'fit',
items: [{
xtype: 'tabpanel',
items: [{
title: 'Tab1',
layout: {
type: 'vbox',
align: 'stretch'
},
items: [Panel1,grid]
}]
}],
renderTo: Ext.getBody()
});

Higgs.Boson
7 May 2013, 9:32 AM
It is work!!! Thank you very much!!!!!