CODEWITHSUNDEEP
twitter-bootstrapextjs
Hien Ngo
Hien Ngo

Reputation: 273

Hidden column of grid in EXT JS 5.0 when using bootstrap

I has question about ExtJs 5.0 when intergrated with bootstrap. I create 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()
    }

    );

in StudentStore, I add some data for grid. I set class hidden-xs hidden-sm of bootstrap for column Id.

Question is: When I re-size browser for small or extra-small, only header Id is disappear, but column Id is not disappear. How to disappear column Id when re-size browser for small or extra-small. Please help me in this case.

Upvotes: 2

Views: 776

Answers (1)

weeksdev
weeksdev

Reputation: 4355

You can use the responsive plugin in extjs5 to adjust the columns based on the width.

Add responsive to your plugins array:

plugins: ['responsive'],

define a config for the method to change the columns:

config: {
                columnLayout: 'large'
            },

Add a setter for this property:

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;
                }
            },

Define in the responsiveConfig the size to pass through to our setter:

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

Here is a fiddle demonstrating the working example.

I'm calling small for width's under 600 and medium for everything above. You can adjust these parameters to your needs.

Upvotes: 2

Related Questions