当我隐藏内部有图像的列时，网格行不会改变高度

Question

扩展JS 4.0.2。我有网格，每行都有显示图像的列（100x100）。当网格渲染时，每行的高度约为 120px。当我隐藏带有图像的列时，我想更改行的高度，以便它们的高度像一个文本行。怎么做呢？我查看了 http: //docs.sencha.com/ext-js/4-0/#/api/Ext.grid.column.Column-cfg-hideMode 但它没有达到我想要的效果。

已更新 代码：

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

当隐藏列时，每行仍然有足够的高度来显示图像，我希望它们具有像没有图像列一样的高度

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

Answer 1

这个问题相当老了，但我认为我的回答可能会对某人有所帮助。

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

因为 ExtJS 没有提供直接与网格中的行进行通信的方法，所以我尝试查询行，然后修改 DOM。

当然，显示图像列时将应用相反的情况。