Dynamic grid column resizing

[astuteq]

Hello,

I try to resize grid columns at runtime.
This is no problem with Ext 3, but it does not seem to work in Ext 4.
There is no columnModel and nothing comparable...

I have 2 grids. If the columns of grid one are resized, the columns of grid 2 must also be resized.


This works with Ext 3:

grid.on('columnresize', function (columnIndex, newSize){
                    //change the width of the column at the depending grid                    var sg = Ext.getCmp(Skm.SUMMARY_GRID);                    var cm = sg.getColumnModel();                    cm.setColumnWidth(columnIndex, newSize);                }); 

Any Idea how I can do this in Ext 4?
This does not work:

                 sg.columns[index].setSize(width); 

Thanks,
Stefan

[scottmartin]

Have a look at: grid.headerCt

Scott.

[astuteq]

Thanks for the reply.
This ends with the same error I get with what I have tried before.

I tried:

grid.headerCt.getHeaderAtIndex(0).setWidth(100) 

I get the error:

TypeError: 'undefined' is not an object (evaluating 'viewContext.tableContext.getProp')    ColumnLayout.js:101 

Is this the correct way to do the resizing?

Stefan

[scottmartin]

See the following:

Ext.create('Ext.data.Store', {
    storeId:'simpsonsStore',
    fields:['name', 'email', 'change'],
    data:{'items':[
        { 'name': 'Lisa',  "email":"lisa@simpsons.com",  "change":100  },
        { 'name': 'Bart', "email":"bart@simpsons.com", "change":-20  },
        { 'name': 'Homer', "email":"home@simpsons.com",  "change":23   },
        { 'name': 'Marge', "email":"marge@simpsons.com", "change":-11   }
    ]},
    proxy: {
        type: 'memory',
        reader: {
            type: 'json',
            root: 'items'
        }
    }
});

var grid = Ext.create('Ext.grid.Panel', {
    title: 'Simpsons',
    store: Ext.data.StoreManager.lookup('simpsonsStore'),
    columns: [
        { header: 'Name',  dataIndex: 'name' },
        { header: 'Email', dataIndex: 'email', flex: 1 },
        { header: 'Change', dataIndex: 'change', tdCls: 'x-change-cell' }
    ],
    height: 200,
    width: 400,
    renderTo: Ext.getBody()
});

Ext.create('Ext.Button', {
    text: 'Click me',
    renderTo: Ext.getBody(),
    handler: function() {
        grid.headerCt.items.items[0].setWidth(300);
    }
});
​

Scott.

[astuteq]

Hi Scott,
thanks for the reply.

What I forgot to mention is that I do not show the headers of the. Exactly this is the problem.
If you hide the headers, your suggested solution does not work.

So, I have no idea how to solve this issue.

Stefan

[tempvalue]

I thing you can use gridpanel columns -> items or columns itself for this purpose.(in some examples columns:{items:[] } is used instead of columns:[])

Each column item has a width property. After you create your gridpanel you can reach your columns object. In this array find items(or if columns is an array use it directly) and for any item you can call setWidth(px).

An example columns object:

columns:{ items:[{ text:"Column A" dataIndex:"field_A"},{ text:"Column B", dataIndex:"field_B"},...], defaults:{ flex:1}}

An example columns array from sencha web site:

columns:[{ header:'Name', dataIndex:'name', sortable:false, hideable:false, flex:1},{ header:'Email', dataIndex:'email', hidden:true},{ header:'Phone', dataIndex:'phone', width:100}]

[evant]

@OP That certainly looks like a bug. Will check into it.

[astuteq]

Thanks!

I have just verified that it is a bug.

Double-checked with version 4.0.7 - Scott's example is working as explained.
Switching to 4.1.1 - the example does not work as soon as "hideHeaders" is true.

Please move this to the bug forum.

Stefan

[Daniil]

+1

I am getting the same error when a grid is initially rendered. Though I am in trouble to reproduce it with simple example.

For now, I worked it around replacing

if (viewContext && !ownerContext.state.overflowAdjust.width && !ownerContext.gridContext.heightModel.shrinkWrap) {

with

if (viewContext && viewContext.tableContext && !ownerContext.state.overflowAdjust.width && !ownerContext.gridContext.heightModel.shrinkWrap) {

within the calculate function of the Ext.grid.ColumnLayout class.

I.e. added the check

&& viewContext.tableContext