PDA

View Full Version : Scrollbar in gridpanel



sathishkumar4
19 Jun 2009, 8:07 PM
Hi,
I need to include scrollbar in this gridpanel,Can you guys suggest me how to implement it,and I've attached the screen shot of my Page.



Ext.onReady(function() {

var names = Ext.data.Record.create([

{
name: 'firstName'
},
{
name: 'lastName'
}]);

var myReader = new Ext.data.JsonReader({
totalProperty: "results",
root: "rows",

/* bbar: new Ext.PagingToolbar({
pageSize: 3,
store: JsonStore
}) */

// id: "id"
},
names);

var JsonStore = new Ext.data.JsonStore({

proxy: new Ext.data.HttpProxy({
url: 'ajax.jsp',
reader: myReader,
root: 'rows',
totalProperty: 'results',
id: 'id',
fields: ['firstName', 'lastName'],
view: new Ext.grid.GroupingView()

}),

});
JsonStore.load();

// create the Grid
var grid = new Ext.grid.GridPanel({
store: JsonStore,
frame: true,
columns: [
//{id:'id'},
{
header: "FirstName",
width: 75
},
{
header: "LastName",
width: 75
},

],
// autoScroll:true,


listeners: {
render: function(c) {

// CSBfleXcroll();
}
},
//stripeRows: true,
//autoExpandColumn: 'FirstName',
height: 350,
width: 600,
// title:'Array Grid'
});

var combo = new Ext.form.ComboBox({
store: JsonStore,
displayField: 'firstName',
fieldLabel: 'Names',
typeAhead: true,
mode: 'remote',
forceSelection: true,
triggerAction: 'all',
emptyText: 'Select...',
selectOnFocus: true,
width: 150,
});

var userform = new Ext.form.FormPanel({

renderTo: document.body,
frame: true,
title: 'UserRegistration',
width: 350,
items: [{

xtype: 'textfield',
id: 'firstName',
fieldLabel: 'firstName',
name: 'firstName',
allowBlank: false,
width: 150,
},
{
xtype: 'textfield',
id: 'lastName',
fieldLabel: 'lastName',
name: 'lastName',
allowBlank: false,
width: 150,
},
combo, grid,

],

buttons: [{
text: 'submit',
handler: callAjax

},
{
text: 'cancel',
handler: callAjax
}]

});

});

callAjax = function() {

var firstName = Ext.fly("firstName").getValue();
var lastName = Ext.fly("lastName").getValue();

Ext.Ajax.request({
url: 'ajax.jsp',
params: {
firstName: firstName,
lastName: lastName,
},

success: function(res, request) {

// JsonStore.load();
Ext.MessageBox.alert('Success', res.responseText);
},
failure: function(res, request) {
Ext.MessageBox.alert('Failure', res.responseText);

},

});
}

Animal
19 Jun 2009, 10:35 PM
As I posted before, a GridPanel which is sized (as you have done) will get a scrollbar when necessary

As you can SEE, the data does not overflow. Therefore no scrollbar 8-|

sathishkumar4
20 Jun 2009, 1:14 AM
Hi animal,
Thanks,Now I reduced the height of the grid panel,I'm getting scroll bar,and for paging the grid,what I need to do.

Animal
20 Jun 2009, 1:54 AM
Read the example code in your SDK.

Read the docs.