PDA

View Full Version : ScrollBar in grid



sathishkumar4
18 Jun 2009, 5:06 PM
I'm need to scrollbar to the grid,give me some ideas to do to...









Ext.onReady(function(){

var names = Ext.data.Record.create([
{name: 'firstName'},
{name: 'lastName'}
]);


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

}, names);


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

}),
reader: myReader,
sortInfo: {field: 'firstName', field: 'lastName'},
url: 'ajax.jsp',
// baseParams: {type: 'edit_categories'}
});
userGroup.load();




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





// create the Grid
var grid = new Ext.grid.GridPanel({
store: userGroup,
//autoScroll:true,
containerScroll: true,

listeners: {
render: function(c){
// CSBfleXcroll();

}
},
frame:true,
columns: [
//{id:'id'},
{header: "FirstName", width: 75},
{header: "LastName", width: 75},

],
//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);

},


});
}

mjlecomte
18 Jun 2009, 7:18 PM
Read here:http://extjs.com/learn/Ext_Forum_Help#How_to_post_code_properly

Post a screenshot of what you have so far.

Animal
18 Jun 2009, 9:52 PM
A GridPanel which you size explicitly (as you have done), and which is not configured with autoHeight will get scrollbars if needed.