Grid row doesn't change height when i hide column with image inside

Question

Ext JS 4.0.2. I have grid, and every row has column which display image (100x100). When grid is rendered every row has height about 120px. When i hide column with image inside i want to change height of rows so they have height like a one text line. How to do it? I looked at http://docs.sencha.com/ext-js/4-0/#/api/Ext.grid.column.Column-cfg-hideMode but it doesn't do what i want.

updated code:

Ext.onReady(function() {


var myData = [
    ['3m Co','logo-small.png'],
    ['Alcoa Inc','logo-small.png'],
    ['Altria Group Inc','logo-small.png']
];


// create the data store
var store = Ext.create('Ext.data.ArrayStore', {
    fields: [
       {name: 'company'},
       'url'
    ],
    data: myData
});

// create the Grid
var grid = Ext.create('Ext.grid.Panel', {
    store: store,
    stateful: true,
    stateId: 'stateGrid',
    columns: [
        {
            text     : 'Company',
            flex     : 1,
            dataIndex: 'company'
        } ,
        {
            text     : 'Image',
            width: 200,
            hidden: true,
            hideMode: 'display',
            renderer : function(value){
                return '<img src="'+value+'">';
            },
            dataIndex: 'url'
        }

    ],
    height: 350,
    width: 600,
    title: 'Array Grid',
    renderTo: 'grid-example',
    viewConfig: {
        stripeRows: true
    }
}); });

when column is hidden each row has still enough height to display image, i want them to have height like there is no image column

Ext.onReady(function() {
 var myData = [
    ['3m Co','logo-small.png'],
    ['Alcoa Inc','logo-small.png'],
    ['Altria Group Inc','logo-small.png']
];


// create the data store
var store = Ext.create('Ext.data.ArrayStore', {
    fields: [
       {name: 'company'},
       'url'
    ],
    data: myData
});

// create the Grid
var grid = Ext.create('Ext.grid.Panel', {
    store: store,
    stateful: true,
    stateId: 'stateGrid',
    columns: [
        {
            text     : 'Company',
            flex     : 1,
            dataIndex: 'company'
        }  

    ],
    height: 350,
    width: 600,
    title: 'Array Grid',
    renderTo: 'grid-example',
    viewConfig: {
        stripeRows: true
    }
}); });

Have you already tried to change image css? Something like z-index, or position... — Xupypr MV
I didn't try this. I wanted to know if there is a simple/elegant solution in extjs, without changing image styles or extending grid component. — Dariusz Pawusiak

U and me U and me · Accepted Answer · 2012-04-25T16:30:16

The question is rather old, but I think my answer may help someone.

Ext.onReady(function() {
var myData = [
    {company: '3m Co',url: 'logo-small.png'},
    {company: 'Alcoa Inc',url: 'logo-small.png'},
    {company: 'Altria Group Inc',url: 'logo-small.png'}
];


// create the data store
var store = Ext.create('Ext.data.Store', {
    fields: [
       'company',
       'url'
    ],
    data: myData
});

// create the Grid
var grid = Ext.create('Ext.grid.Panel', {
    store: store,
    stateful: true,
    stateId: 'stateGrid',
    columns: [
        {
            text     : 'Company',
            flex     : 1,
            dataIndex: 'company'
        } ,
        {
            text     : 'Image',
            flex: 1,
            renderer : function(value){
                return '<img src="'+value+'">';
            },
            dataIndex: 'url'
        }

    ],
    height: 350,
    width: 600,
    title: 'Array Grid',
    renderTo: 'grid-example',
    listeners: {
        columnhide: function(a, b, c) {
            var cell = this.getEl().query('.x-grid-cell');
            for(var i = 0; i < cell.length; i++) {
                if (i%2 != 0) 
                    cell[i].style.display = "none";

            }
        }
    },
    viewConfig: {
        stripeRows: true
    }
}); 
});

Because ExtJS does not provide a way to directly communicate with the rows in grid, I try querying the rows, then modifying the DOM.

And of course the reverse will be applied when showing the image column.

Grid row doesn't change height when i hide column with image inside

1 Answers