PDA

View Full Version : [3.??] Horizontal scroll bar doesn't appear after ColumnModel update



McCornic
12 Jun 2009, 12:30 AM
The horizontal scroll bar doesn't appeared after the update of the ColumnModel.
On ie7, firefox, chrome.
I have to call the private function updateAllColumnWidths to get the scroll bar.


...

this.gridPanel.show();//must be rendered !also

this.gridPanel.getColumnModel().setConfig(newCM);
this.gridPanel.getView().updateAllColumnWidths();//Bug Ext 3.x

this.gridPanel.getStore().load({callback:function(){//asynchrone !!
this.gridPanel.getView().refresh(true);//update the grid
}, scope:this
});

...

I hope this can help you...

mystix
12 Jun 2009, 12:32 AM
please post a simple test case as per
71015

Animal
12 Jun 2009, 1:06 AM
This is what the reconfigure call is for.

McCornic
12 Jun 2009, 1:41 AM
Thank for your response.
Animal, I tried the reconfigure function before to post.
That function doesn't work too.
I got exaclty the same issue...

...
this.gridPanel.show();//must be rendered !also

this.gridPanel.reconfigure(this.gridPanel.getStore(),new Ext.grid.ColumnModel(newCM));
//this.gridPanel.getColumnModel().setConfig(newCM);
this.gridPanel.getView().updateAllColumnWidths();//Bug Ext 3.x

this.gridPanel.getStore().load({callback:function(){//asynchrone !!
this.gridPanel.getView().refresh(true);//update the grid
}, scope:this
});
...

McCornic
26 Jun 2009, 12:12 AM
Ext version tested:
Ext 3.0RC2

Browser versions tested against:

IE8
FF3.5 (firebug 1.4.0.b2 installed)

Operating System:

WinXP Pro

Description:
See previous posts


Test Case:




/**
* A ConsultationPanel correspond to the complete page for querying request results.
*/
Ext.ux.ConsultationPanel = Ext.extend(Ext.Panel, {

region :'center',
layout :'border',
cls:'genapp_consultation_panel',
border :false,
renderTo:'page',

initComponent : function() {

this.height= Ext.getBody().getViewSize().height - 220;

Ext.EventManager.onWindowResize(
function(w, h){
var newSize = {
width:Ext.getBody().getViewSize().width - 120,
height:Ext.getBody().getViewSize().height - 220,
};
this.setSize(newSize);
},
this
);

// The JRC Request Data Store
var JRCRequestDS = new Ext.data.JsonStore({
url: base_url + 'query/ajaxgetjrcrequest',
method: 'POST',
autoLoad: true
});

// The JRC Request ComboBox
var jrcRequestComboBox = new Ext.form.ComboBox( {
name :'JRCRequest',
hiddenName :'JRCRequest',
hideLabel :true,
store : JRCRequestDS,
editable :false,
displayField :'label',
valueField :'id',
forceSelection :false,
mode :'local',
typeAhead :true,
width :340,
maxHeight :100,
triggerAction :'all',
loadingText :"searching...",
selectOnFocus :true,
disableKeyFilter :true,
listeners : {
scope :this,
'select' : {
fn : function(combo, record, index) {
Ext.Ajax.request( {
url :base_url + 'query/ajaxgetforms',
success :this.updateWestPanels,
method: 'POST',
params : {
JRCRequest :record.data.id
},
scope :this
});
},
scope :this
}
}
});

// The JRC Request Panel
var jrcRequestPanel = new Ext.Panel( {
id: 'JRCRequestForm',
region :'north',
layout: 'form',
height:60,
frame:true,
margins:'5 0 5 0',
title :'JRC request',
items :jrcRequestComboBox
});

// The Forms Panel (will contain the forms)
this.formsPanel = new Ext.form.FieldSet( {
id : 'QueryForm',
region :'center',
autoScroll:true,
cls:'genapp_query_formspanel',
frame:true,
margins:'5 0 5 0',
title :'Forms Panel'
});

this.gridDSReader = new Ext.data.ArrayReader();

// Creates a reader metadata update function
this.gridDSReader.updateMetadata = function(meta){
delete this.ef;
this.meta = meta;
this.recordType = Ext.data.Record.create(meta.fields);
this.onMetaChange(meta, this.recordType, {metaData:meta});
}

var grid_ds = new Ext.data.Store({
// store configs
autoDestroy: true,
url: base_url + 'query/ajaxgetgridrows',
// reader configs
reader:this.gridDSReader
});

//grid for result
this.gridPanel = new Ext.grid.GridPanel({
frame: true,
collapsible: true,
titleCollapse: true,
title :'Grid Result',
layout: 'fit',
autoScroll: true,
loadMask: true,
viewConfig: {
autoFill:true,
emptyText : 'No result',
deferEmptyText : true
},
store: grid_ds,
trackMouseOver:false,
sm: new Ext.grid.RowSelectionModel({singleSelect:true}),
cm: new Ext.grid.ColumnModel({}),
bbar: new Ext.PagingToolbar({
pageSize: Genapp.grid.pagesize,
store: grid_ds,
displayInfo: true
})
});

this.mapPanel = new Ext.ux.MapPanel();

// The Result Panel
this.centerPanel = new Ext.TabPanel( {
id :'QueryResult',
activeItem: 0,
margins:'5 5 5 0',
frame:true,
region :'center',
title :'Result Panel',
items :[this.mapPanel,this.gridPanel]
});

// The west panel contains the JRC Requests list and the corresponding forms
var queryFormPanel = new Ext.FormPanel( {
id :'queryForm',
region :'west',
title :"Query Panel",
width :370,
frame:true,
margins:'5 5 5 5',
layout:'border',
items : [ jrcRequestPanel, this.formsPanel ],
bbar: [{
xtype: 'tbbutton',
text: "Reset",
tooltipType: 'title',
tooltip:"<?php echo $this->translate('ConsultationFormResetTip'); ?>",
handler: this.resetRequest,
scope:this
},{
xtype: 'tbfill'
},{
xtype: 'tbbutton',
text: "<b>Search</b>",
tooltipType: 'title',
tooltip:"Search",
scope:this,
handler: this.submitRequest
}]
});

if (!this.items) {
this.items = [ queryFormPanel, this.centerPanel ];
}
Ext.ux.ConsultationPanel.superclass.initComponent.call(this);
},

/**
* Update the Forms Panel by adding the Panel corresponding to the selected JRC Request
*/
updateWestPanels : function(response, opts) {
var forms = Ext.decode(response.responseText);
this.formsPanel.removeAll(true);
for ( var i = 0; i < forms.data.length; i++) {
this.formsPanel.add(
new Ext.ux.FieldForm({
title :forms.data[i].label,
id :forms.data[i].id
})
);
}
this.formsPanel.doLayout();
},

/**
* Submit the request and get the description of the result columns
*/
submitRequest : function(){
this.centerPanel.activate(this.gridPanel);
this.gridPanel.loadMask.show();
this.clearGrid();
this.formsPanel.findParentByType('form').getForm().submit({
url: base_url + 'query/ajaxgetgridcolumns',
success : function(form, action)
{
// Creation of the column model and the reader metadata fields
var columns = action.result.columns;
var newCM = new Array();
var newRF = new Array();
var columnConf;
var readerFieldsConf;
for(var i=0; i<columns.length;i++){
columnConf = {
header:columns[i].label,
sortable:true,
dataIndex:columns[i].name,
width:100
};
readerFieldsConf = {
name: columns[i].name
};
switch(columns[i].type){
case 'STRING':
columnConf.xtype='gridcolumn';
readerFieldsConf.type='string';
break;
case 'INT':
readerFieldsConf.type='int';
case 'NUMERIC':
case 'RANGE':
columnConf.xtype='numbercolumn';
readerFieldsConf.type='float';
break;
case 'DATE':
columnConf.xtype='datecolumn';
columnConf.format = 'm/d/Y';
readerFieldsConf.type='date';
readerFieldsConf.dateFormat='d-m-Y H:i:s';
break;
default:
columnConf.xtype='gridcolumn';
readerFieldsConf.type='auto';
break;
}
newCM.push(columnConf);
newRF.push(readerFieldsConf);
}

// Updates of the store reader metadata
this.gridDSReader.updateMetadata({
root: 'rows',
fields: newRF,
totalProperty:'total'
});

// Updates of the column model
//this.gridPanel.reconfigure(this.gridPanel.getStore(),new Ext.grid.ColumnModel(newCM));
this.gridPanel.getColumnModel().setConfig(newCM);
this.gridPanel.getView().updateAllColumnWidths();//Bug Ext 3.0

// Updates the rows
this.gridPanel.getStore().load({
params:{
start: 0,
limit: Genapp.grid.pagesize
},
callback : function(){
// update the result layer of the map
resultLayer = this.mapPanel.map.getLayersByName('result_locations')[0];
//resultLayer.redraw();
resultLayer.mergeNewParams({"_olSalt": Math.random()}); // we add random param to force the redraw
},
scope:this
});
},
failure : function(form, action)
{
Ext.Msg.alert('Error :', action.result.errorMessage);
this.gridPanel.loadMask.hide();
},
scope:this
});
},


resetRequest:function(){
},


/**
* Clears the grid
*/
clearGrid : function (){
var gridDs = this.gridPanel.getStore();
if(gridDs.getCount() != 0){
// Reset the paging toolbar
this.gridPanel.getBottomToolbar().reset();
}
if(this.gridPanel.rendered){
// Remove the column headers
this.gridPanel.getColumnModel().setConfig({});
// Remove the horizontal scroll bar if present
this.gridPanel.getView().updateAllColumnWidths();//Bug Ext 3.0
}
}
});



Steps to reproduce the problem:

set a new grid column model config
refresh the view (the horizontal scroll bar is missing)The result that was expected:
set a new grid column model config
refresh the view (the horizontal scroll bar is present)

The result that occurs instead:

set a new grid column model config
refresh the view (the horizontal scroll bar is missing)

Debugging already done:
set a new grid column model config
update all the columns width with the private fct updateAllColumnWidth:
this.gridPanel.getView().updateAllColumnWidths();

not need to refresh the view (the horizontal scroll bar is present)

Possible fix:
Do an updateAllColumnsWidths into the setConfig function.

McCornic
19 Oct 2009, 1:44 AM
Hi,

I found what was the mistake...
The gridPanel is include into a tabpanel and when I do my update, the gridPanel is not actived. If I activate the gridPanel before the update it's working fine!

I hoppe that solution can help someone else...
Regards

ruralclimber
19 Oct 2009, 1:46 PM
this looks like a bug in ExtJS, even in 3.x.

As McCornic has already noticed, the scroll bars will not appear in inactive tab panels.

that is, in order to show the scroll bars, the grid (girdView, more exactly) has to be refreshed after the parent tabPanel becomes active.

for example, if you have multiple tab panels and each of them contains one grid. the scroll bars only show up for the initial active grid. when you switch to other tabs, the scroll bar does not appear. you have to refresh the gridview in the code to display the scroll bar after that tab becomes the current active tab.

IHB1
18 Nov 2009, 2:37 AM
Thanks, ruralclimber & McCornic!!..your suggestions have helped solve the horizontal scrolling problem I was facing..

As suggested by ruralclimber, for horizontal scrolling of grids attached to inactive tabs of a tabpanel, one has to execute the tabpanel layout first and only after that refresh the Grid View of the grid ( grid.getView().refresh(true); )..