PDA

View Full Version : scrollbars for grid



crazy
12 Jul 2009, 8:26 PM
I am a new one with ext js.
in my following code:

window.on('show', function () {
var sm = new xg.CheckboxSelectionModel();
var grid2 = new xg.GridPanel({
enableDragDrop: true,
ddGroup: 'grid2tree',
ds: new Ext.data.Store({
reader: reader,
data: xg.dummyData
}),
cm: new xg.ColumnModel([
sm,
{id:'company',header: "col1", width: 200, sortable: true, dataIndex: 'company'},
{header: "col2", width: 120, sortable: true, dataIndex: 'price'},
{header: "Col3", width: 120, sortable: true, dataIndex: 'change'},
{header: "%col4", width: 120, sortable: true, dataIndex: 'pctChange'},
{header: "col5", width: 135, sortable: true, dataIndex: 'lastChange'}
]),
sm: sm,
autoWidth: true,
autoHeight: true,
setAutoResizable:false,
.
.
.

when i select a row and go down, window size is reducing and grid grows outside the window. how can i give scroll bars.........
plz help

jay@moduscreate.com
13 Jul 2009, 4:51 AM
your code is notvery descriptive to the problem. what are you doing on the window's show event?

Animal
13 Jul 2009, 4:53 AM
It's a duplicate post and he's hoping to get a different answer. But the answer is the same.

Yuo MUST size the Grid.

crazy
16 Jul 2009, 8:38 PM
Ext.onReady(function(){
Ext.QuickTips.init();

var xg = Ext.grid;
var comp;
var reader = new Ext.data.ArrayReader({}, [
{name: 'company'},
{name: 'price', type: 'float'},
{name: 'change', type: 'float'},
{name: 'pctChange', type: 'float'},
{name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
]);
var window = new Ext.Window({
id: 'elWindow',
title: 'Query Results',
//layout: 'fit',
width: 800,
height: 600 //, autoScroll: true
});
window.on('show', function () {
var sm = new xg.CheckboxSelectionModel();
var grid2 = new xg.GridPanel({
// enableDragDrop: true,
// ddGroup: 'grid2tree',
ds: new Ext.data.Store({
reader: reader,
data: xg.dummyData
}),
cm: new xg.ColumnModel([
sm,
{id:'company',header: "Company", width: 200, sortable: true, dataIndex: 'company'},
{header: "Price", width: 120, sortable: true, dataIndex: 'price'},
{header: "Change", width: 120, sortable: true, dataIndex: 'change'},
{header: "% Change", width: 120, sortable: true, dataIndex: 'pctChange'},
{header: "Last Updated", width: 135, sortable: true, dataIndex: 'lastChange'}
]),

items:
[{
tbar:
[
new Ext.Toolbar.Button({
text: 'tool0',
handler: function(){
//Load New Form
}
}),
new Ext.Toolbar.Button({
text: 'tool1',
handler: function(){
if(comp?true:false)
alert(comp);
}
}),
new Ext.Toolbar.Button({
text: 'tool2',
handler: function(){

var id = selRecordStore["company"];
}
})
]
}],
sm: new Ext.grid.CheckboxSelectionModel({
//singleSelect: true,
listeners: {
rowselect: function(smObj, rowIndex, record) {
selRecordStore = record;comp=selRecordStore.get('company');
}}
}),
height: 400,
// autoWidth: false,
// autoHeight: false,
// setAutoResizable: false,
autoScroll: true,
frame:true,
// title:'Framed with Checkbox Selection and Horizontal Scrolling',
// iconCls:'icon-grid',

renderTo: window.getUpdater().el
});
});
window.show(document.body);
});

Sorry this is my code. this is a duplicate code.
i want to open a new window on a button click.
when this code works, window and the grid is there.
but when i drag the scrollbar down, i cant see the last row

plz help

crazy
16 Jul 2009, 10:29 PM
Sorry that was my fault.
i got what i want.

crazy
17 Jul 2009, 2:39 AM
hello
i just want to create a report for my query results.
is there any default report formats in ext js
anyone plz help