PDA

View Full Version : Unable to change the header width while changeing the column width dynamically



ravigupta84
23 Nov 2010, 2:58 AM
At run time i want to hide and unhide some column. here is the code for this. i am able to do this.

but the problem is width for the column is very less, unable to set the columnwidth.

so i tried by writing theline - columnModel.setColumnWidth(columnArray[i], 55, false);
but it's not working.

var columnModel = this.denomEditGrid.getColumnModel();

var columnArray = [""];
columnArray [0] = columnModel.findColumnIndex('defaultOrder');
columnArray [1] = columnModel.findColumnIndex('shipinSplitPrecent');
columnArray [2] = columnModel.findColumnIndex('shipoutSplitPrecent');
columnArray [3] = columnModel.findColumnIndex('roundingMethod');
columnArray [4] = columnModel.findColumnIndex('billsPerStrap');
columnArray [5] = columnModel.findColumnIndex('soRoundingMethod');
columnArray [6] = columnModel.findColumnIndex('soBillsPerStrap');

if(this.denomPatternFormPanel.getForm().findField('type').getValue() === 'LOCP'){
for (var i = 0; i < columnArray.length; i++) {
columnModel.setHidden(columnArray[i], false);
columnModel.setColumnWidth(columnArray[i], 55, false);
}
}else{
for (var i = 0; i < columnArray.length; i++) {
columnModel.setHidden(columnArray[i], true);
columnModel.setColumnWidth(columnArray[i], 55, false);
}
}

Condor
23 Nov 2010, 4:03 AM
The extra 'false' in the setColumnWidth command suppresses the widthchange event, so the grid doesn't get notified.

Either use 'true', or call grid.getView().refresh(true) after updating the columnmodel.

ravigupta84
23 Nov 2010, 5:09 AM
it is not working properly. some column are resized and some are not get fitted in the layout.
I do not want to set the width explicitly. it should be automatically get fitted into the layout?
Please do the needful.
The extra 'true' in the setColumnWidth command suppresses the widthchange event not 'false' as mentioned in the API 3.3.0.
So i used false.

I do not know why header and column are not synchronized while setting the width. it must be synchronized.

Condor
23 Nov 2010, 5:15 AM
Did you configure your grid with an autoExpandColumn or with forceFit:true?

ravigupta84
23 Nov 2010, 5:48 AM
We are using the same. it's not working :(

Condor
23 Nov 2010, 5:58 AM
We are using the same. it's not working :(

"the same" what?

ravigupta84
23 Nov 2010, 6:09 AM
We are using the below code. it's not working

viewConfig: {
forceFit: true,
forceLayout : true,
autoExpandColumn :true,
autoFill : true,
},

Condor
23 Nov 2010, 6:23 AM
That's a completely bogus config!

Lookup each of these config options and determine which one you actually want to use!

ravigupta84
23 Nov 2010, 7:40 AM
i used each view config option separately but all are not working.
Actually i have 2 grids- grid 1 and grid 2.
On double click on any row of grid1, grid 2 will be displayed. grid 2 has many columns.
Based on some condition few columns will be hide/visible as toggle columns.

Here is the code


CLDenominationGrid = Ext.extend(CLEditGrid, {
viewConfig: {
forceFit: true
},
defaults :{
width: 130
},
enableColumnHide:true,
loadMask: true,

clStoreConfig: {
clUrl: CorpointWebController.denomPattern.url,
clRecord: Ext.data.Record.create([{
name: 'denominationId'
}, {
name: 'currencyName'
}, {
name: 'fitness'
}, {
name: 'name'
}, {
name: 'minimum'
}, {
name: 'maximum'
}, {
name: 'defaultOrder'
}, {
name: 'shipinSplitPrecent'
}, {
name: 'shipoutSplitPrecent'
}, {
name: 'sortOrder'
}, {
name: 'roundingMethod'
}, {
name: 'billsPerStrap'
}, {
name: 'soRoundingMethod'
}, {
name: 'soBillsPerStrap'
}, {
name: 'currencyId'
}, {
name: 'hopper'
}, {
name: 'denominationPatternID'
}, {
name: 'fitnessId'
}]),
clRecordId: 'denominationId' + 'currencyName' + 'fitness' + 'name' + 'currencyId' + 'hopper' + 'denominationPatternID' + 'fitnessId'
},
initComponent: function() {
summary = new Ext.ux.grid.GridSummary();

this.plugins = summary;

var denomGridrecords = Ext.data.Record.create([]);


var denopatternsCheckbox = new Ext.grid.CheckboxSelectionModel();
this.sm = denopatternsCheckbox;
var thisGrid = this;

this.columns = [denopatternsCheckbox, {
id: 'name',
header: '<cl:message code="corpoint.denom.edit.denom.details.currency"/>',
tooltip: '<cl:message code="corpoint.denom.edit.denom.details.currency"/>',
autoExpandColumn :true,
sortable: true,
dataIndex: 'currencyName',
renderer: this.displayDenomValInToolTip
}, {
header: '<cl:message code="corpoint.denom.edit.denom.details.fitness"/>',
tooltip: '<cl:message code="corpoint.denom.edit.denom.details.fitness"/>',
autoExpandColumn :true,
sortable: true,
dataIndex: 'fitness',
renderer: this.displayDenomValInToolTip
}, {
header: '<cl:message code="corpoint.denom.edit.denom.details.denomination"/>',
tooltip: '<cl:message code="corpoint.denom.edit.denom.details.denomination"/>',
autoExpandColumn :true,
sortable: true,
dataIndex: 'name',
renderer: this.displayDenomValInToolTip
},{
header: '<cl:message code="corpoint.denom.edit.denom.details.defaultOrderAmt"/>',
tooltip: '<cl:message code="corpoint.denom.edit.denom.details.defaultOrderAmt"/>',
sortable: true,
//hidden:this.noLOCPType,
autoExpandColumn :true,
dataIndex: 'defaultOrder',
renderer: this.displayDenomValInToolTip
},{
header: '<cl:message code="corpoint.denom.edit.denom.details.shipInPerc"/>',
tooltip: '<cl:message code="corpoint.denom.edit.denom.details.shipInPerc"/>',
sortable: true,
autoExpandColumn :true,
//hidden:this.noLOCPType,
dataIndex: 'shipinSplitPrecent',
renderer: this.displayDenomValInToolTip
},{
header: '<cl:message code="corpoint.denom.edit.denom.details.shipOutPerc"/>',
tooltip: '<cl:message code="corpoint.denom.edit.denom.details.shipOutPerc"/>',
sortable: true,
//hidden:this.noLOCPType,
autoExpandColumn :true,
dataIndex: 'shipoutSplitPrecent',
renderer: this.displayDenomValInToolTip
}, {
header: '<cl:message code="corpoint.denom.edit.denom.details.sortOrder"/>',
tooltip: '<cl:message code="corpoint.denom.edit.denom.details.sortOrder"/>',
sortable: true,
autoExpandColumn :true,
dataIndex: 'sortOrder',
editor: new Ext.form.NumberField({
allowBlank: false,
allowNegative: false,
minValue:0,
maxLength: 14
}),
renderer:function(value, metadata, record, rowIndex, colIndex, store) {
metadata.css = 'x-grid3-cell-editAdj';
return value;
}
},{
header: '<cl:message code="corpoint.denom.edit.denom.details.siRounding"/>',
tooltip: '<cl:message code="corpoint.denom.edit.denom.details.siRounding"/>',
sortable: true,
//hidden:this.noLOCPType,
autoExpandColumn :true,
dataIndex: 'roundingMethod',
renderer: this.displayDenomValInToolTip
},{
header: '<cl:message code="corpoint.denom.edit.denom.details.siStrapCount"/>',
tooltip: '<cl:message code="corpoint.denom.edit.denom.details.siStrapCount"/>',
sortable: true,
autoExpandColumn :true,
dataIndex: 'billsPerStrap',
//hidden:this.noLOCPType,
renderer: this.displayDenomValInToolTip
},{
header: '<cl:message code="corpoint.denom.edit.denom.details.soRounding"/>',
tooltip: '<cl:message code="corpoint.denom.edit.denom.details.soRounding"/>',
sortable: true,
//hidden:this.noLOCPType,
autoExpandColumn :true,
dataIndex: 'soRoundingMethod',
renderer: this.displayDenomValInToolTip
},{
header: '<cl:message code="corpoint.denom.edit.denom.details.soStrapCount"/>',
tooltip: '<cl:message code="corpoint.denom.edit.denom.details.soStrapCount"/>',
sortable: true,
//hidden:this.noLOCPType,
autoExpandColumn :true,
dataIndex: 'soBillsPerStrap',
renderer: this.displayDenomValInToolTip
}];

CLDenominationGrid.superclass.initComponent.call(this);
}
});

Ext.reg('xclfw-denominationGrid', CLDenominationGrid);
===========================================================
listeners: {
rowdblclick: function(grid, index, e) {
Ext.getCmp(this.compIds.denomPatternCenterPanelId).setVisible(true);
Ext.getCmp(this.compIds.denomPatternTabPanelId).setVisible(true);
Ext.getCmp(this.compIds.denomPatternTabPanelId).setActiveTab(0);
var records = this.store.getAt(index);
this.denomEditGrid.showDenominationEditGrid(records.data);
Ext.getCmp(this.compIds.denomPatternCenterPanelId).doLayout();
this.denomDetailTbar.enable();
this.denomPatternFormPanel.editPattern(records.data);

var columnModel = this.denomEditGrid.getColumnModel();

var columnArray = [""];
columnArray [0] = columnModel.findColumnIndex('defaultOrder');
columnArray [1] = columnModel.findColumnIndex('shipinSplitPrecent');
columnArray [2] = columnModel.findColumnIndex('shipoutSplitPrecent');
columnArray [3] = columnModel.findColumnIndex('roundingMethod');
columnArray [4] = columnModel.findColumnIndex('billsPerStrap');
columnArray [5] = columnModel.findColumnIndex('soRoundingMethod');
columnArray [6] = columnModel.findColumnIndex('soBillsPerStrap');

var columnWidth = new Number(230);
if(this.denomPatternFormPanel.getForm().findField('type').getValue() === 'LOCP'){
for (var k = 0; k < columnArray.length; k++) {
columnModel.setHidden(columnArray[k], false);
if (k === 0) {
columnModel.setColumnWidth(columnArray[k], columnWidth, false);
}
else {
columnModel.setColumnWidth(columnArray[k], 110, false);
}
}
}else{
for (var l = 0; l < columnArray.length; l++) {
columnModel.setHidden(columnArray[l], true);
if (l === 0) {
columnModel.setColumnWidth(columnArray[l], columnWidth, false);
}
else {
columnModel.setColumnWidth(columnArray[l], 110, false);
}

}
}
this.denomEditGrid.getView().refresh(true);

}
},

Condor
23 Nov 2010, 8:01 AM
Creating a grid with that many hidden columns is going to be slow.

Maybe you should reconfigure the grid with only the visible columns (use ColumnModel.setConfig).

ravigupta84
23 Nov 2010, 9:48 PM
Can you please explain it more specifically.

Can you write some code changes in the above code.
ColumnModel.getConfig is not available in API instead of this 'config' property is specified but it is returning column array. :(

Condor
23 Nov 2010, 11:48 PM
No, it's setConfig, not getConfig.

You call setConfig with the new column config (create a new config with only the columns you need).