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

Question

我对与 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中，我为网格添加了一些数据。我为列 Id.

设置了 class hidden-xs hidden-sm of bootstrap

问题是：当我re-size小浏览器或extra-small时，只有headerId消失了，但Id列没有消失。如何在 re-size 小浏览器或 extra-small 浏览器中消失列 ID。在这种情况下请帮助我。

Answer 1

您可以使用 extjs5 中的 responsive 插件根据 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传递给我们的setter:

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

这是一个fiddle demonstrating the working example.

我正在为 600 下的 width 打电话给 small，为上面的所有事情打电话给 medium。您可以根据需要调整这些参数。

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

Hidden column of grid in EXT JS 5.0 when using bootstrap

extjs

twitter-bootstrap