Строка сетки не меняет высоту, когда я скрываю столбец с изображением внутри - PullRequest
Новая
       10

Строка сетки не меняет высоту, когда я скрываю столбец с изображением внутри

1 голос
/ 18 августа 2011

Ext JS 4.0.2.У меня есть сетка, и в каждой строке есть столбец с отображением изображения (100x100).Когда сетка отображается, каждая строка имеет высоту около 120 пикселей.Когда я скрываю столбец с изображением внутри, я хочу изменить высоту строк, чтобы они имели высоту как одну текстовую строку.Как это сделать?Я посмотрел на 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
    }
}); });

1 Ответ

1 голос
/ 25 апреля 2012

Вопрос довольно старый, но я думаю, что мой ответ может кому-то помочь. 

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.

И, конечно, обратное будет применяться при отображении столбца изображения.

...