PDA

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



KrishnaSai436
27 Jun 2016, 9:38 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
});
}
});