PDA

View Full Version : [SOLVED] How to add horizontal scroll in gridPanel



yagi
20 Jun 2010, 11:55 PM
Hi all..

I want to add horizontal scroll in my gridPanel, I'm following this http://www.java2s.com/Code/JavaScript/Ext-JS/GridPanelFramedwithCheckboxSelectionandHorizontalScrolling.htm

but I don't find any horizontal scroll code.

Can someone help me to show the code for adding horizontal scroll please?

Thanks

Condor
21 Jun 2010, 12:05 AM
A GridPanel supports scrolling by default. It must however be configured with a width+height (or be in a layout that manages the width+height) and not have autoHeight:true.

yagi
21 Jun 2010, 12:24 AM
A GridPanel supports scrolling by default. It must however be configured with a width+height (or be in a layout that manages the width+height) and not have autoHeight:true.


Thanks Condor for the reply.

I have set width and height of the gridPanel but it doesn't work :(.


Here is my code :


newhid.core.vims_comp_group.grid = Ext.extend(Ext.grid.GridPanel,{
constructor: function(config)
{
config = config || {};
config.id = config.id || 'site_grid';
config.title = config.title || 'VIMS Component Management List';
config.viewConfig = {forceFit:true};
config.height = config.height || 200;
config.width = config.width || 500;
config.border = config.border || true;
config.deferredRender = true;
config.stripeRows = true;
config.loadMask = true;
config.ds = new newhid.core.vims_comp_group.store();

// Row Action
config.rowActions = new Ext.ux.grid.RowActions({
actions:[{
iconCls:'manage',
qtip:'Manage',
style:'margin:5 0 0 5px'
},{
iconCls:'icon-edit-record',
qtip:'Edit',
style:'margin:5 0 0 5px'
},{
iconCls:'icon-copy2',
qtip:'Copy',
style:'margin:5 0 0 5px'
},{
iconCls:'icon-minus'
,qtip:'Delete Record'
,style:'margin:5 0 0 5px'
}],


callbacks:{
'manage': function(grid, record, action, row, col)
{
Ext.Ajax.request
({

});
},
'icon-edit-record': function(grid, record, action,row, col) {
config.actionButtons.form.getForm().loadRecord(record);
// console.log(record);

fleet = Ext.getCmp('fleetCombo');
fleet.store.load({
params:{'site': Ext.getCmp('siteCombo').getValue()}
});

prefix = Ext.getCmp('prefixCombo');
prefix.store.load({
params:{'site': Ext.getCmp('siteCombo').getValue(),
'fleet' : Ext.getCmp('fleetCombo').getValue()
}
});

customer = Ext.getCmp('customerCombo');
customer.store.load({
params:{'site': Ext.getCmp('siteCombo').getValue()}
});
},
'icon-copy2': function(grid,record,action,row,col)
{
var rec = record.copy();
//rec.data.id = '';
rec.data.serialnumber='';
rec.data.eqplan='';
config.actionButtons.form.getForm().loadRecord(rec);

// console.log(record);

fleet = Ext.getCmp('fleetCombo');
fleet.store.load({
params:{'site': Ext.getCmp('siteCombo').getValue()}
});

prefix = Ext.getCmp('prefixCombo');
prefix.store.load({
params:{'site': Ext.getCmp('siteCombo').getValue(),
'fleet' : Ext.getCmp('fleetCombo').getValue()
}
});

customer = Ext.getCmp('customerCombo');
customer.store.load({
params:{'site': Ext.getCmp('siteCombo').getValue()}
});
},

'icon-minus': function(grid, record, action, row, col){
Ext.MessageBox.confirm('Message', 'Are you sure to delete this Site?', function(btn, text){
if(btn == 'yes')
{

Ext.Ajax.request
({
url: newhid.core.vims_comp_group.controller +'/delete',
params: {serialnumber: record.data.serialnumber, idprefix: record.data.idprefix, idsite: record.data.idsite, idfleet: record.data.idfleet, eqplan: record.data.eqplan },
callback: function(options, success, response)
{
if(success)
{
//Ext.getCmp('site_grid').getStore().reload();
config.ds.reload();
//console.log(record);
}
else
{
Ext.MessageBox.alert('Saving Site Failed..',response.responseText);
}
}
});
//console.log(record);

}
});

}

}
});


config.columns = [
new Ext.grid.RowNumberer(),
{header: "Site", width: 2, sortable:true, dataIndex:'idsite'},
{header: "Fleet", width: 5, sortable: true, dataIndex: 'idfleet'},
{header: "Prefix", width: 5, sortable: true, dataIndex: 'idprefix'},
{header: "Component Code", width: 5, sortable: true, dataIndex: 'component_code'},
{header: "Modifier", width: 3, sortable: true, dataIndex: 'idmodifier'},
{header: "Order Index", align: 'center', width: 4, sortable: true, dataIndex: 'order_index'},
config.rowActions
];

config.bbar = config.bbar || new Ext.PagingToolbar({
pageSize: 20,
store: config.ds,
displayInfo: true,
displayMsg: 'Displaying data {0} - {1} of {2}',
emptyMsg: 'No data display'
})

config.search = new Ext.ux.grid.Search({
iconCls:'icon-zoom',
store: config.ds,
//,readonlyIndexes:['modified']
//,disableIndexes:['pctChange']
searchText:'Search',
minChars:2,
autoFocus:true,
align: 'right',
mode:'remote',
position:'top',
//shortcutKey:'r',
//shortcutModifier:'alt',
paramNames:
{
fields:'fields',
query:'query'
},
//tbPosition: 15,

onTriggerSearch:function() {
if(!this.field.isValid()) {
return;
}
var val = this.field.getValue();
var store = config.ds;

// grid's store filter

// clear start (necessary if we have paging)
if(store.lastOptions && store.lastOptions.params) {
store.lastOptions.params[store.paramNames.start] = 0;
}

// get fields to search array
var fields = [];
this.menu.items.each(function(item) {
if(item.checked) {
fields.push(item.dataIndex);
}
});

// add fields and query to baseParams of store
delete(store.baseParams[this.paramNames.fields]);
delete(store.baseParams[this.paramNames.query]);
if (store.lastOptions && store.lastOptions.params) {
delete(store.lastOptions.params[this.paramNames.fields]);
delete(store.lastOptions.params[this.paramNames.query]);
}
if(fields.length) {
store.baseParams[this.paramNames.fields] = Ext.encode(fields);
store.baseParams[this.paramNames.query] = val;
}

// reload store
store.reload();



}

})

config.tbar=[
{
text: 'Copy',
iconCls:'icon-copy2'
//handler: displayFormWindow
},'-',
{
text: 'Edit',
iconCls:'icon-edit-record'
//handler: displayFormWindow
},'-',
{
text: 'Delete',
iconCls:'icon-minus'
//handler: displayFormWindow
},'-'
]

config.plugins = [config.rowActions, config.search];



newhid.core.vims_comp_group.grid.superclass.constructor.call(this, config);
}

, storeLoad: function(){
this.grid.getStore().load();
}

});


is there any mistakes in my code?

yagi
21 Jun 2010, 12:28 AM
A GridPanel supports scrolling by default. It must however be configured with a width+height (or be in a layout that manages the width+height) and not have autoHeight:true.

Thanks Condor for your reply.

I have set width and height of the gridPanel, but the horizontal scroll doesn't appear.

Here is my code :


newhid.core.vims_comp_group.grid = Ext.extend(Ext.grid.GridPanel,{
constructor: function(config)
{
config = config || {};
config.id = config.id || 'site_grid';
config.title = config.title || 'VIMS Component Management List';
config.viewConfig = {forceFit:true};
config.height = config.height || 200;
config.width = config.width || 500;
config.border = config.border || true;
config.deferredRender = true;
config.stripeRows = true;
config.loadMask = true;
config.ds = new newhid.core.vims_comp_group.store();

// Row Action
config.rowActions = new Ext.ux.grid.RowActions({
actions:[{
iconCls:'manage',
qtip:'Manage',
style:'margin:5 0 0 5px'
},{
iconCls:'icon-edit-record',
qtip:'Edit',
style:'margin:5 0 0 5px'
},{
iconCls:'icon-copy2',
qtip:'Copy',
style:'margin:5 0 0 5px'
},{
iconCls:'icon-minus'
,qtip:'Delete Record'
,style:'margin:5 0 0 5px'
}],


callbacks:{
'manage': function(grid, record, action, row, col)
{
Ext.Ajax.request
({

});
},
'icon-edit-record': function(grid, record, action,row, col) {
config.actionButtons.form.getForm().loadRecord(record);
// console.log(record);

fleet = Ext.getCmp('fleetCombo');
fleet.store.load({
params:{'site': Ext.getCmp('siteCombo').getValue()}
});

prefix = Ext.getCmp('prefixCombo');
prefix.store.load({
params:{'site': Ext.getCmp('siteCombo').getValue(),
'fleet' : Ext.getCmp('fleetCombo').getValue()
}
});

customer = Ext.getCmp('customerCombo');
customer.store.load({
params:{'site': Ext.getCmp('siteCombo').getValue()}
});
},
'icon-copy2': function(grid,record,action,row,col)
{
var rec = record.copy();
//rec.data.id = '';
rec.data.serialnumber='';
rec.data.eqplan='';
config.actionButtons.form.getForm().loadRecord(rec);

// console.log(record);

fleet = Ext.getCmp('fleetCombo');
fleet.store.load({
params:{'site': Ext.getCmp('siteCombo').getValue()}
});

prefix = Ext.getCmp('prefixCombo');
prefix.store.load({
params:{'site': Ext.getCmp('siteCombo').getValue(),
'fleet' : Ext.getCmp('fleetCombo').getValue()
}
});

customer = Ext.getCmp('customerCombo');
customer.store.load({
params:{'site': Ext.getCmp('siteCombo').getValue()}
});
},

'icon-minus': function(grid, record, action, row, col){
Ext.MessageBox.confirm('Message', 'Are you sure to delete this Site?', function(btn, text){
if(btn == 'yes')
{

Ext.Ajax.request
({
url: newhid.core.vims_comp_group.controller +'/delete',
params: {serialnumber: record.data.serialnumber, idprefix: record.data.idprefix, idsite: record.data.idsite, idfleet: record.data.idfleet, eqplan: record.data.eqplan },
callback: function(options, success, response)
{
if(success)
{
//Ext.getCmp('site_grid').getStore().reload();
config.ds.reload();
//console.log(record);
}
else
{
Ext.MessageBox.alert('Saving Site Failed..',response.responseText);
}
}
});
//console.log(record);

}
});

}

}
});


config.columns = [
new Ext.grid.RowNumberer(),
{header: "Site", width: 2, sortable:true, dataIndex:'idsite'},
{header: "Fleet", width: 5, sortable: true, dataIndex: 'idfleet'},
{header: "Prefix", width: 5, sortable: true, dataIndex: 'idprefix'},
{header: "Component Code", width: 5, sortable: true, dataIndex: 'component_code'},
{header: "Modifier", width: 3, sortable: true, dataIndex: 'idmodifier'},
{header: "Order Index", align: 'center', width: 4, sortable: true, dataIndex: 'order_index'},
config.rowActions
];

config.bbar = config.bbar || new Ext.PagingToolbar({
pageSize: 20,
store: config.ds,
displayInfo: true,
displayMsg: 'Displaying data {0} - {1} of {2}',
emptyMsg: 'No data display'
})

config.search = new Ext.ux.grid.Search({
iconCls:'icon-zoom',
store: config.ds,
//,readonlyIndexes:['modified']
//,disableIndexes:['pctChange']
searchText:'Search',
minChars:2,
autoFocus:true,
align: 'right',
mode:'remote',
position:'top',
//shortcutKey:'r',
//shortcutModifier:'alt',
paramNames:
{
fields:'fields',
query:'query'
},
//tbPosition: 15,

onTriggerSearch:function() {
if(!this.field.isValid()) {
return;
}
var val = this.field.getValue();
var store = config.ds;

// grid's store filter

// clear start (necessary if we have paging)
if(store.lastOptions && store.lastOptions.params) {
store.lastOptions.params[store.paramNames.start] = 0;
}

// get fields to search array
var fields = [];
this.menu.items.each(function(item) {
if(item.checked) {
fields.push(item.dataIndex);
}
});

// add fields and query to baseParams of store
delete(store.baseParams[this.paramNames.fields]);
delete(store.baseParams[this.paramNames.query]);
if (store.lastOptions && store.lastOptions.params) {
delete(store.lastOptions.params[this.paramNames.fields]);
delete(store.lastOptions.params[this.paramNames.query]);
}
if(fields.length) {
store.baseParams[this.paramNames.fields] = Ext.encode(fields);
store.baseParams[this.paramNames.query] = val;
}

// reload store
store.reload();



}

})

config.tbar=[
{
text: 'Copy',
iconCls:'icon-copy2'
//handler: displayFormWindow
},'-',
{
text: 'Edit',
iconCls:'icon-edit-record'
//handler: displayFormWindow
},'-',
{
text: 'Delete',
iconCls:'icon-minus'
//handler: displayFormWindow
},'-'
]

config.plugins = [config.rowActions, config.search];



newhid.core.vims_comp_group.grid.superclass.constructor.call(this, config);
}

, storeLoad: function(){
this.grid.getStore().load();
}

});


Is there any mistakes in my code?

yagi
21 Jun 2010, 1:17 AM
A GridPanel supports scrolling by default. It must however be configured with a width+height (or be in a layout that manages the width+height) and not have autoHeight:true.

Thanks Condor for your reply..

I have set width and height of the gridPanel, but the horizontal scroll doesn't appear.
Here is my code:


newhid.core.vims_comp_group.grid = Ext.extend(Ext.grid.GridPanel,{
constructor: function(config)
{
config = config || {};
config.id = config.id || 'site_grid';
config.title = config.title || 'VIMS Component Management List';
config.viewConfig = {forceFit:true};
config.height = config.height || 200;
config.width = config.width || 500;
config.border = config.border || true;
config.deferredRender = true;
config.stripeRows = true;
config.loadMask = true;
config.ds = new newhid.core.vims_comp_group.store();
config.listeners = {
rowclick : function(grid,rowIndex,e){
var record = grid.getStore().getAt(rowIndex);
var id = record.get('idsite');
// var id = record.data.idsite;
console.log(id);

}}

// Row Action
config.rowActions = new Ext.ux.grid.RowActions({
actions:[{
iconCls:'manage',
qtip:'Manage',
style:'margin:5 0 0 5px'
},{
iconCls:'icon-edit-record',
qtip:'Edit',
style:'margin:5 0 0 5px'
},{
iconCls:'icon-copy2',
qtip:'Copy',
style:'margin:5 0 0 5px'
},{
iconCls:'icon-minus'
,qtip:'Delete Record'
,style:'margin:5 0 0 5px'
}],


callbacks:{
'manage': function(grid, record, action, row, col)
{
Ext.Ajax.request
({
url: '<a href="tes.html"></a>',
// params: {serialnumber: record.data.serialnumber, idprefix: record.data.idprefix, idsite: record.data.idsite, idfleet: record.data.idfleet, eqplan: record.data.eqplan },
// callback: function(options, success, response)
// {
// if(success)
// {
// config.ds.reload();
// }
// else
// {
// Ext.MessageBox.alert('Saving Site Failed..',response.responseText);
// }
// }
});
},
'icon-edit-record': function(grid, record, action,row, col) {
config.actionButtons.form.getForm().loadRecord(record);
// console.log(record);

fleet = Ext.getCmp('fleetCombo');
fleet.store.load({
params:{'site': Ext.getCmp('siteCombo').getValue()}
});

prefix = Ext.getCmp('prefixCombo');
prefix.store.load({
params:{'site': Ext.getCmp('siteCombo').getValue(),
'fleet' : Ext.getCmp('fleetCombo').getValue()
}
});

customer = Ext.getCmp('customerCombo');
customer.store.load({
params:{'site': Ext.getCmp('siteCombo').getValue()}
});
},
'icon-copy2': function(grid,record,action,row,col)
{
var rec = record.copy();
//rec.data.id = '';
rec.data.serialnumber='';
rec.data.eqplan='';
config.actionButtons.form.getForm().loadRecord(rec);

// console.log(record);

fleet = Ext.getCmp('fleetCombo');
fleet.store.load({
params:{'site': Ext.getCmp('siteCombo').getValue()}
});

prefix = Ext.getCmp('prefixCombo');
prefix.store.load({
params:{'site': Ext.getCmp('siteCombo').getValue(),
'fleet' : Ext.getCmp('fleetCombo').getValue()
}
});

customer = Ext.getCmp('customerCombo');
customer.store.load({
params:{'site': Ext.getCmp('siteCombo').getValue()}
});
},

'icon-minus': function(grid, record, action, row, col){
Ext.MessageBox.confirm('Message', 'Are you sure to delete this Site?', function(btn, text){
if(btn == 'yes')
{

Ext.Ajax.request
({
url: newhid.core.vims_comp_group.controller +'/delete',
params: {serialnumber: record.data.serialnumber, idprefix: record.data.idprefix, idsite: record.data.idsite, idfleet: record.data.idfleet, eqplan: record.data.eqplan },
callback: function(options, success, response)
{
if(success)
{
//Ext.getCmp('site_grid').getStore().reload();
config.ds.reload();
//console.log(record);
}
else
{
Ext.MessageBox.alert('Saving Site Failed..',response.responseText);
}
}
});
//console.log(record);

}
});

}

}
});

config.columns = [
new Ext.grid.RowNumberer(),
{header: "Site", width: 2, sortable:true, dataIndex:'idsite'},
{header: "Fleet", width: 5, sortable: true, dataIndex: 'idfleet'},
{header: "Prefix", width: 5, sortable: true, dataIndex: 'idprefix'},
{header: "Component Code", width: 5, sortable: true, dataIndex: 'component_code'},
{header: "Modifier", width: 5, sortable: true, dataIndex: 'idmodifier'},
{header: "Manage", width: 5, sortable: true, dataIndex: 'manage'},
{header: "Order Index", align: 'center', width: 4, sortable: true, dataIndex: 'order_index'},
config.rowActions
];

config.bbar = config.bbar || new Ext.PagingToolbar({
pageSize: 20,
store: config.ds,
displayInfo: true,
displayMsg: 'Displaying data {0} - {1} of {2}',
emptyMsg: 'No data display'
})

config.search = new Ext.ux.grid.Search({
iconCls:'icon-zoom',
store: config.ds,
//,readonlyIndexes:['modified']
//,disableIndexes:['pctChange']
searchText:'Search',
minChars:2,
autoFocus:true,
align: 'right',
mode:'remote',
position:'top',
//shortcutKey:'r',
//shortcutModifier:'alt',
paramNames:
{
fields:'fields',
query:'query'
},
//tbPosition: 15,

onTriggerSearch:function() {
if(!this.field.isValid()) {
return;
}
var val = this.field.getValue();
var store = config.ds;

// grid's store filter

// clear start (necessary if we have paging)
if(store.lastOptions && store.lastOptions.params) {
store.lastOptions.params[store.paramNames.start] = 0;
}

// get fields to search array
var fields = [];
this.menu.items.each(function(item) {
if(item.checked) {
fields.push(item.dataIndex);
}
});

// add fields and query to baseParams of store
delete(store.baseParams[this.paramNames.fields]);
delete(store.baseParams[this.paramNames.query]);
if (store.lastOptions && store.lastOptions.params) {
delete(store.lastOptions.params[this.paramNames.fields]);
delete(store.lastOptions.params[this.paramNames.query]);
}
if(fields.length) {
store.baseParams[this.paramNames.fields] = Ext.encode(fields);
store.baseParams[this.paramNames.query] = val;
}

// reload store
store.reload();



}

})

config.tbar=[
{
text: 'Copy',
iconCls:'icon-copy2'
//handler: displayFormWindow
},'-',
{
text: 'Edit',
iconCls:'icon-edit-record'
//handler: displayFormWindow
},'-',
{
text: 'Delete',
iconCls:'icon-minus'
//handler: displayFormWindow
},'-'
]

config.plugins = [config.rowActions, config.search];
newhid.core.vims_comp_group.grid.superclass.constructor.call(this, config);
}
, storeLoad: function(){
this.grid.getStore().load();
}
});


is there any mistake in my code?

Condor
21 Jun 2010, 1:43 AM
forceFit:true will auto-adjust the width of the columns so no horizontal scroll will be needed.

yagi
21 Jun 2010, 5:41 PM
forceFit:true will auto-adjust the width of the columns so no horizontal scroll will be needed.

Yeah.., I see.
The problem is I still used forceFit:true so the horizontal scroll didn't appear.
It works well now

Thanks Condor for your help..
:)