PDA

View Full Version : Ext.ux.EnhancedGrid



mschwartz
7 Jan 2011, 9:21 AM
I love the ExtJS grids, but I'm not entirely happy with how they function. I wrote this EnhancedGrid extension to simplify creating grids, and to make them function a bit better. There's more that can be done with it, but it should be a great start for those who need what it does and want to hack on it to better suit their needs. An obvious thing to add to it is support for multiselect - it only supports singleSelect: true at the moment.

So what does it do?

1) If you have a grid with 10 rows and you select one, you can click on the panel below the rows and the selected one becomes unselected (e.g. none selected).

2) If you provide an updateToolbar() method, it will automatically be called when a row is selected or deselected. How many grids have I made that have a toolbar where the buttons need to be sensitive to what's selected (e.g. some enabled, some disabled)?

3) You specify one of your columns as id: 'expando' and that becomes the autoExpandColumn automatically.

4) On afterrender and activate, it will automatically force its store to reload, if the store is a remote one. This is typical in my application requirements.

5) You provide config members contextmenu: function, and dblclick: function. These will be called with the selected record and event as arguments.

6) I find using this class reduces the number of lines of code I typically use to create a grid by about 1/2, making my code much smaller (to download) and easier to maintain.




Ext.namespace('Ext.ux');

Ext.ux.EnhancedGrid = Ext.extend(Ext.grid.GridPanel, {
initComponent: function() {
var grid = this;
var sm = new Ext.grid.RowSelectionModel({
singleSelect: true,
listeners: {
rowselect: function() {
grid.updateToolbar && grid.updateToolbar();
},
rowdeselect: function() {
grid.updateToolbar && grid.updateToolbar();
}
}
});
var config = {
sm: sm,
autoSizeColumns: true,
autoExpandColumn: 'expando',
autoFill: true,
stripeRows: true,
trackMouseOver: true,
loadMask: true
};
Ext.apply(this, Ext.apply(this.initialConfig, config));

Ext.ux.EnhancedGrid.superclass.initComponent.apply(this, arguments);
this.on({
click: function(e) {
if (e.getTarget('.x-grid3-row') !== null || e.getTarget('.x-grid3-hd') !== null) {
return;
}
sm.clearSelections();
},
rowclick: function(grid, rowIndex, e) {
if (e.ctrlKey || e.shiftKey) {
return true;
}
if (sm.isSelected(rowIndex)) {
sm.clearSelections();
sm.selectRow(rowIndex);
}
else {
sm.clearSelections();
}
return true;
},
rowdblclick: function(grid, rowIndex, e) {
var record = this.store.getAt(rowIndex);
record = record.data;
sm.clearSelections();
sm.selectRow(rowIndex);
grid.dblclick && grid.dblclick(record, e);
},
rowcontextmenu: function(grid, rowIndex, e) {
e.stopEvent();
var record = this.store.getAt(rowIndex).data;
grid.contextmenu && grid.contextmenu(record, e);
},
activate: function() {
if (this.store.url) {
this.store.reload();
}
},
afterrender: function() {
if (this.store.url) {
this.store.reload();
}
}
});
}
});
Ext.reg('ux-enhanced-grid', Ext.ux.EnhancedGrid);