Twitter bootstrap 使用引导时EXT JS 5.0中网格的隐藏列

当与引导集成时，我对ExtJS5.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

中，我为网格添加了一些数据。 我为列

Id

设置引导的类

hidden xs hidden sm

问题是：当我为小型或超小型浏览器重新调整浏览器大小时，只有标题

Id

消失，但列

Id

不消失。如何在为小型或超小型浏览器重新调整浏览器大小时消除列Id。

---

在这种情况下，请帮助我。

您可以使用extjs5中的

responsive

插件根据

宽度调整列

向您的插件阵列添加
responsive
：

plugins: ['responsive'],

为更改
列的方法定义
配置
：

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
中定义要传递给我们的setter的
size
：

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

responsiveConfig:{
“宽度600”：{
专栏布局：“中等”
},
“宽度>=1600”：{
专栏布局：“中等”
}
},

这是一本书

我打电话给
small
查询
600
下的
width
，打电话给
medium
查询上面的所有内容。您可以根据需要调整这些参数。
因为您使用的是ExtJS5，所以可以使网格响应。不能对“消失”列使用纯引导吗？