PDA

View Full Version : How to freeze the checkbox column in Ext grid



KrishnaSai436
27 Jun 2016, 9:53 PM
Hi All,
i have Ext grid with selType as checkboxmodel, and the remaining columns are dynamic. My requirement is like i want to freeze the checkbox column when the user scrolls to right. Below is the ext grid view. How can i acheive this. i tried by putting locked: true within the selModel,but i didn't worked. Please suggest any possibility. Thanks in advance.



Ext.define('OfferManagement.view.ComponentGrid', { extend: 'Ext.grid.Panel',
alias: 'widget.componentgrid',
columnLines: true,
multiSelect: true,
selModel: {
selType: 'checkboxmodel', // rowmodel is the default selection model
mode: 'MULTI' // Allows selection of multiple rows
},
viewConfig: {
preserveScrollOnRefresh: true
},
cls: 'wrap-column-headers',
bodyCls: 'darklines',
height: 280,
isReadonly: false,


initComponent: function () {
this.plugins = this.createPlugins();
this.createItems();




Ext.apply(this, {
bbar: [this.updateKeyFieldsButton,
this.massUpdateButton,
this.clearFiltersButton,
this.addConfigurationButton,
this.deleteConfigurationButton,
this.componentAddOnButton],
header: {
defaults: { margin: '0 2 0 0' },
titlePosition: 0,
items: [this.resetGridButton,
this.exportButton,
this.importButton,
{ xtype: 'tbspacer', width: 10 },
{
xtype: 'rowcountbutton',
text: 'Small Grid',
pressed: true,
toggleGroup: this.title,
margin:'0 2 0 2'
},
{
xtype: 'rowcountbutton',
text: 'Medium Grid',
toggleGroup: this.title,
margin: '0 2 0 2'
},
{
xtype: 'rowcountbutton',
text: 'Large Grid',
toggleGroup: this.title,
margin: '0 2 0 2'
}
]
}
});


this.callParent(arguments);
},


createPlugins: function () {
return [
this.editPlugin = Ext.create('Ext.grid.plugin.CellEditing', { clicksToEdit: 2 }),
this.bufferedRenderer = Ext.create('Ext.grid.plugin.BufferedRenderer', { trailingBufferZone: 2, leadingBufferZone: 2 })
];
},


createItems: function () {
this.resetGridButton = Ext.create('Ext.Button', {
text: 'Reset Grid'
});
this.exportButton = Ext.create('Ext.Button', {
text: 'Export',
action: 'exportComponentGridData',
disabled: false
});
this.importButton = Ext.create('Ext.Button', {
text: 'Import',
action: 'importData',
format: 'excel',
disabled: false
});
this.addConfigurationButton = Ext.create('Ext.Button', {
text: 'Add Configuration',
action: 'addConfiguration',
disabled: this.isReadonly
});


this.clearFiltersButton = Ext.create('Ext.Button', {
text: 'Clear Filters',
disabled: true
});


this.cloneButton = Ext.create('Ext.Button', {
text: 'Clone Configuration',
action: 'cloneConfiguration',
disabled: true
});


this.componentAddOnButton = Ext.create('Ext.Button', {
text: 'Add Sub-Components',
action: 'componentAddOn',
disabled: true
});


this.deleteConfigurationButton = Ext.create('Ext.Button', {
text: 'Delete Configuration',
action: 'deleteConfiguration',
disabled: true
});


this.massUpdateButton = Ext.create('Ext.Button', {
text: 'Mass Update',
action: 'showMassUpdate',
disabled: true
});


this.updateKeyFieldsButton = Ext.create('Ext.Button', {
text: 'Update Key Fields',
action: 'showUpdateKeyFields',
disabled: true
});
}
});

StuartAshworth
28 Jun 2016, 12:08 AM
If you set the column you want frozen with the locked config it should keep it static. Check out the docs here - http://docs.sencha.com/extjs/4.2.2/#!/api/Ext.grid.column.Column-cfg-locked

Essentially this creates two grids beside each other. One with the locked columns and one without. The one without scrolls horizontally while the other remains static.

KrishnaSai436
28 Jun 2016, 12:57 AM
Thank you StuartAshworth for your reply, actually in my grid i have not defined the checkbox in a column instead i have the selType as checkboxmodel where i cannot set the locked property to true like other grid columns.i have to override the checkboxmodel to make that column to lock. I am not sure how can i overrode that.Could you please suggest how can i achieve.

mhenn
10 Mar 2017, 2:49 AM
Thank you StuartAshworth for your reply, actually in my grid i have not defined the checkbox in a column instead i have the selType as checkboxmodel where i cannot set the locked property to true like other grid columns.i have to override the checkboxmodel to make that column to lock. I am not sure how can i overrode that.Could you please suggest how can i achieve.

I'm using this override in ExtJS 5.1.3:
1rr5

Instead of just checking for the existence of locked header columns it also checks for the property "lockable" of the gridpanel and will add the checkbox column as locked if that is set to true. The lockable mixin sets the lockable property to true, if 'enableLocking' config property is set to true in grid.