PDA

View Full Version : Right way to override core class method using MVC



michal.ciasnocha
4 Dec 2013, 6:45 AM
I have been searching for solution how to access nested models in a grid. One possibility is described on stackoverflow (http://stackoverflow.com/questions/16005891/ext-js-4-use-an-model-association-to-render-a-grid-display-value) where the point is patching the class Ext.view.Table. As a beginner using MVC architecture I don't know how to override one specific method of the class Ext.view.Table. Modified code should look like this:



Ext.view.Table.prototype.renderCell = function(column, record, recordIndex, rowIndex, columnIndex, out) { var me = this, selModel = me.selModel, cellValues = me.cellValues, classes = cellValues.classes, // fieldValue = record.data[column.dataIndex]; // patched fieldValue = null, cellTpl = me.cellTpl, fullIndex, value, clsInsertPoint; // Patch start if (column.dataIndex && column.dataIndex.indexOf('.') > 0) { var associationParts = column.dataIndex.split('.'), v = record; for (var i = 0; i < associationParts.length-1; i++) { v = v['get' + associationParts[i].charAt(0).toUpperCase() + associationParts[i].slice(1)](); } fieldValue = v.get(associationParts[associationParts.length-1]); } else { fieldValue = record.data[column.dataIndex]; } // Patch end cellValues.record = record; cellValues.column = column; cellValues.recordIndex = recordIndex; cellValues.rowIndex = rowIndex; cellValues.columnIndex = columnIndex; cellValues.cellIndex = columnIndex; cellValues.align = column.align; cellValues.tdCls = column.tdCls; cellValues.innerCls = column.innerCls; cellValues.style = cellValues.tdAttr = ""; cellValues.unselectableAttr = me.enableTextSelection ? '' : 'unselectable="on"'; if (column.renderer && column.renderer.call) { fullIndex = me.ownerCt.columnManager.getHeaderIndex(column); value = column.renderer.call(column.scope || me.ownerCt, fieldValue, cellValues, record, recordIndex, fullIndex, me.dataSource, me); if (cellValues.css) { // This warning attribute is used by the compat layer // TODO: remove when compat layer becomes deprecated record.cssWarning = true; cellValues.tdCls += ' ' + cellValues.css; delete cellValues.css; } } else { value = fieldValue; } cellValues.value = (value == null || value === '') ? '&#160;' : value; // Calculate classes to add to cell classes[1] = column.getCellId(); // On IE8, array[len] = 'foo' is twice as fast as array.push('foo') // So keep an insertion point and use assignment to help IE! clsInsertPoint = 2; if (column.tdCls) { classes[clsInsertPoint++] = column.tdCls; } if (me.markDirty && record.isModified(column.dataIndex)) { classes[clsInsertPoint++] = me.dirtyCls; } if (column.isFirstVisible) { classes[clsInsertPoint++] = me.firstCls; } if (column.isLastVisible) { classes[clsInsertPoint++] = me.lastCls; } if (!me.enableTextSelection) { classes[clsInsertPoint++] = me.unselectableCls; } if (cellValues.tdCls) { classes[clsInsertPoint++] = cellValues.tdCls; } if (selModel && selModel.isCellModel && selModel.isCellSelected(me, recordIndex, columnIndex)) { classes[clsInsertPoint++] = (me.selectedCellCls); } // Chop back array to only what we've set classes.length = clsInsertPoint; cellValues.tdCls = classes.join(' '); cellTpl.applyOut(cellValues, out); // Dereference objects since cellValues is a persistent var in the XTemplate's scope chain cellValues.column = null;};

I also looked at thread (http://www.sencha.com/forum/showthread.php?261361) where is the same problem solved so I copied file Table.js from ext/src/view/Table.js, changed necessary lines, but ended up with error after adding overrides directory to classpath:

"The following classes are not declared even if their files have been loaded: 'overrides.view.Table'. Please check the source code of their corresponding files for possible typos: 'overrides/view/Table.js ".

Environment

ExtJS 4.2.2.1144, Sencha CMD v3.1.2.342, Chrome 31.0.1650.57

Thank you for help.

scottmartin
4 Dec 2013, 10:29 AM
You can use the following. Simply place in the 'overrides' dir and add the requires to your app.



Ext.define('Ext.view.override.Table', { // name what you want; just not same as base
override: 'Ext.view.Table',


renderCell: function(column, record, recordIndex, rowIndex, columnIndex, out) {
// make changes to this function to fit your needs
}

});

michal.ciasnocha
5 Dec 2013, 1:04 AM
Thank you, it works great!

mr.Anderson
6 Dec 2013, 3:00 PM
What about the base class which have mistakes and i am want fix his. Class is base for many others classes. how that is do?

scottmartin
6 Dec 2013, 3:56 PM
Using the same method. The other classes will inherit.