使用引导程序时EXT JS 5.0中网格的隐藏列

Hien Ngo 发表于 Dev

玄恩

与Bootstrap集成时，我对ExtJs 5.0有疑问。我创建gridPanel

var cellEditing = Ext.create('Ext.grid.Panel', {

        plugins : [Ext.create('Ext.grid.plugin.CellEditing', 
        {
            clicksToEdit : 2
        })],
        columnLines: true,  
        // Add store 
        store:'ABC.store.StudentStore',
        columns:[
            {
                xtype: 'gridcolumn',
                header : 'Id',
                dataIndex:'id',
                hidden : false,
                width : 35,
                cls:'hidden-xs hidden-sm',
                hideable: false
            }, 
            {
                header : 'First Name',
                xtype: 'numbercolumn',
                dataIndex:'fName',
                flex : 1,
                field : 
                {
                    xtype: 'numberfield'
                }
            }, 
            {
                xtype: 'gridcolumn',
                header : 'Middle Name',
                dataIndex:'mName',
                flex : 1,
                editor : 
                {
                    xtype: 'textfield',
                    selectOnFocus: true,
                    allowBlank : true
                }
            }
        ],
        renderTo: Ext.getBody()
    }

    );

在中StudentStore，我为网格添加了一些数据。我hidden-xs hidden-sm为column设置了引导程序类Id。

问题是：当我将浏览器的大小调整为小号或超小号时，只有标题Id消失了，而列Id却没有消失。调整浏览器大小（较小或较小）时如何消失列ID。在这种情况下请帮助我。

周杰夫

您可以使用responsiveextjs5中的插件根据调整列width。

添加responsive到您的插件数组：

plugins: ['responsive'],

config为更改以下内容的方法定义columns：

config: {
                columnLayout: 'large'
            },

setter为此属性添加一个：

updateColumnLayout: function(size) {
                switch (size) {
                case 'small':
                        if(!this.columns[0].setVisible)
                            this.columns[0].hidden = true;
                        else
                            this.columns[0].setVisible(false);
                    break;
                case 'medium':
                        if(!this.columns[0].setVisible)
                            this.columns[0].hidden = false;
                        else
                            this.columns[0].setVisible(true);
                    break;
                case 'large':
                    break;
                }
            },

定义中responsiveConfig的size通过，从而使我们的二传手：

responsiveConfig: {
                'width <= 600': {
                    columnLayout: 'small'
                },
                'width > 600': {
                    columnLayout: 'medium'
                },
                'width >= 1600': {
                    columnLayout: 'medium'
                }
            },

这是一个小提琴，演示了工作示例。

我打电话small了width“项下的600和medium一切之上。您可以根据需要调整这些参数。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。