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中，我为网格添加了一些数据。我为列hidden-xs hidden-sm设置了引导程序的Id类。

问题是：当我针对小型或超小型重新调整浏览器大小时，只有标头Id消失，但列Id不会消失。如何在重新调整浏览器大小或超小的时候消失列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中定义以传递给我们的二传手：

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

这是fiddle demonstrating the working example。

我在small和width下为600调用了medium以获取上述所有内容。您可以根据需要调整这些参数。

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

1 个答案: