PDA

View Full Version : How to implement overrides?



jivex5k
16 Jun 2017, 9:03 AM
So I'm having trouble implementing an override, specifically in where to store the override and how to add it to the application. I'd like to implement this override:




Ext.override(Ext.grid.feature.GroupStore, {
processStore: function(store) {
var me = this,
groups = store.getGroups(),
groupCount = groups.length,
i,
group,
groupPlaceholder,
data = me.data,
oldGroupCache = me.groupingFeature.groupCache,
groupCache = me.groupingFeature.clearGroupCache(),
collapseAll = me.groupingFeature.startCollapsed;


if (data) {
data.clear();
} else {
data = me.data = new Ext.util.MixedCollection(false, Ext.data.Store.recordIdFn);
}


if (store.getCount()) {


// Upon first process of a loaded store, clear the "always" collapse" flag
// DISABLED ONLY THIS =>>> me.groupingFeature.startCollapsed = false;


for (i = 0; i < groupCount; i++) {


// group contains eg
// { children: [childRec0, childRec1...], name: <group field value for group> }
group = groups[i];


// Cache group information by group name
groupCache[group.name] = group;
group.isCollapsed = collapseAll || (oldGroupCache[group.name] && oldGroupCache[group.name].isCollapsed);


// If group is collapsed, then represent it by one dummy row which is never visible, but which acts
// as a start and end group trigger.
if (group.isCollapsed) {
group.placeholder = groupPlaceholder = new store.model(null, 'group-' + group.name + '-placeholder');
groupPlaceholder.set(me.getGroupField(), group.name);
groupPlaceholder.rows = groupPlaceholder.children = group.children;
groupPlaceholder.isCollapsedPlaceholder = true;
data.add(groupPlaceholder);
}


// Expanded group - add the group's child records.
else {
data.insert(me.data.length, group.children);
}
}
}
}
});



Following guides like this: https://stackoverflow.com/questions/18249715/steps-to-overriding-sencha-extjs-standard-component-functionality-ext-tree-pane
It doesn't say anything about where to store the override and how to include it in your application. Any help would be greatly appreciated.

jivex5k
19 Jun 2017, 6:59 AM
Well I've gotten further with it, but still running into issues:

I've stored the override and have it required by the grid panel that uses it, but it's complaining about missing functions. I've included this.callParent(arguments) in the constructor of the override, then defined the function with the fix afterwards thinking that this would initialize all other functions in the class first and then overwrite the one I need fixed:



Ext.define('Mayhem.overrides.GroupStore', {
override: 'Ext.grid.feature.GroupStore',
constructor: function (config) {
this.callParent(arguments);
},
processStore: function(store) {
var me = this,
groups = store.getGroups(),
groupCount = groups.length,
i,
group,
groupPlaceholder,
data = me.data,
oldGroupCache = me.groupingFeature.groupCache,
groupCache = me.groupingFeature.clearGroupCache(),
collapseAll = me.groupingFeature.startCollapsed;




if (data) {
data.clear();
} else {
data = me.data = new Ext.util.MixedCollection(false, Ext.data.Store.recordIdFn);
}




if (store.getCount()) {




// Upon first process of a loaded store, clear the "always" collapse" flag
// DISABLED ONLY THIS =>>> me.groupingFeature.startCollapsed = false;




for (i = 0; i < groupCount; i++) {




// group contains eg
// { children: [childRec0, childRec1...], name: <group field value for group> }
group = groups[i];




// Cache group information by group name
groupCache[group.name] = group;
group.isCollapsed = collapseAll || (oldGroupCache[group.name] && oldGroupCache[group.name].isCollapsed);




// If group is collapsed, then represent it by one dummy row which is never visible, but which acts
// as a start and end group trigger.
if (group.isCollapsed) {
group.placeholder = groupPlaceholder = new store.model(null, 'group-' + group.name + '-placeholder');
groupPlaceholder.set(me.getGroupField(), group.name);
groupPlaceholder.rows = groupPlaceholder.children = group.children;
groupPlaceholder.isCollapsedPlaceholder = true;
data.add(groupPlaceholder);
}




// Expanded group - add the group's child records.
else {
data.insert(me.data.length, group.children);
}
}
}
}
});


I've got this file required by my grid:


requires: ['Mayhem.data.models.TherapySales',
'Mayhem.overrides.GroupStore'],


I'm getting an exception that it's missing a function:


Uncaught TypeError: me.getGroupField is not a function
at constructor.processStore (GroupStore.js?_dc=1497883804826:50)
at constructor.onRefresh (ext-all-dev.js:161336)
at constructor.fire (ext-all-dev.js:16638)
at constructor.continueFireEvent (ext-all-dev.js:18525)
at constructor.fireEventArgs (ext-all-dev.js:18496)
at constructor.prototype.fireEventArgs (ext-all-dev.js:61808)
at constructor.fireEvent (ext-all-dev.js:18473)
at constructor.loadRecords (ext-all-dev.js:107230)
at constructor.loadRawData (ext-all-dev.js:107165)
at constructor.setRecord (TherapyBreakdown.js?_dc=1497883804824:34)


Changing callParent to callSuper gets a different exception:


Uncaught TypeError: Cannot read property 'getRange' of undefined
at constructor.getRange (ext-all-dev.js:161203)
at constructor.getViewRange (ext-all-dev.js:138279)
at constructor.refresh (ext-all-dev.js:138199)
at constructor.callParent (ext-all-dev.js:7387)
at constructor.refresh (ext-all-dev.js:139746)
at constructor.callParent (ext-all-dev.js:7387)
at constructor.refresh (ext-all-dev.js:154078)
at ext-all-dev.js:138652
at ext-all-dev.js:3754


I feel like I'm close...

jivex5k
19 Jun 2017, 11:31 AM
I ended up just pasting the entire GroupStore definition into the override file with a single line commented out. It works but it would be nice to not have to resort to that when I only want to overload a single function.