1. #1
    Sencha User
    Join Date
    Sep 2010
    Posts
    42
    Vote Rating
    0
    ravigupta84 is on a distinguished road

      0  

    Default Unable to change the header width while changeing the column width dynamically

    Unable to change the header width while changeing the column width dynamically


    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);
    }
    }

  2. #2
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    91
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      0  

    Default


    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.

  3. #3
    Sencha User
    Join Date
    Sep 2010
    Posts
    42
    Vote Rating
    0
    ravigupta84 is on a distinguished road

      0  

    Default


    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.
    Last edited by ravigupta84; 23 Nov 2010 at 5:13 AM. Reason: want to add more information

  4. #4
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    91
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      0  

    Default


    Did you configure your grid with an autoExpandColumn or with forceFit:true?

  5. #5
    Sencha User
    Join Date
    Sep 2010
    Posts
    42
    Vote Rating
    0
    ravigupta84 is on a distinguished road

      0  

    Default


    We are using the same. it's not working

  6. #6
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    91
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      0  

    Default


    Quote Originally Posted by ravigupta84 View Post
    We are using the same. it's not working
    "the same" what?

  7. #7
    Sencha User
    Join Date
    Sep 2010
    Posts
    42
    Vote Rating
    0
    ravigupta84 is on a distinguished road

      0  

    Default


    We are using the below code. it's not working

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

  8. #8
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    91
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      0  

    Default


    That's a completely bogus config!

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

  9. #9
    Sencha User
    Join Date
    Sep 2010
    Posts
    42
    Vote Rating
    0
    ravigupta84 is on a distinguished road

      0  

    Default


    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);

    }
    },

  10. #10
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    91
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      0  

    Default


    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).

Similar Threads

  1. grid column width - works just for the header
    By christian.schmuelling in forum Ext GWT: Discussion
    Replies: 7
    Last Post: 18 May 2011, 9:18 PM
  2. Adjusting column width dynamically
    By himan in forum Ext: Q&A
    Replies: 0
    Last Post: 26 Apr 2010, 9:13 PM
  3. Grid column width does not match header width
    By nutflakes in forum Ext 2.x: Help & Discussion
    Replies: 6
    Last Post: 15 Jun 2008, 10:38 PM
  4. How to set Grid column width according to the title text width
    By maya in forum Ext 1.x: Help & Discussion
    Replies: 1
    Last Post: 30 Jul 2007, 4:53 PM

Thread Participants: 1