PDA

View Full Version : [ExtJS 4.0.2] [including Bugfix] Select items on non-rendered views



Felicitus
11 Jun 2011, 11:06 PM
Hi,

setting a selection on views which aren't rendered yet won't work, but give a JavaScript error instead. Before 4.0.2, it was possible to listen for the "render" event and then select the nodes. However, with 4.0.2, it seems that the store binding was moved, so simply waiting for the "render" event doesn't work.

Here's a bugfix:



/**
* Bugfix for selection on views which aren't bound
*/
Ext.selection.Model.override({
/**
* @private
* Defines if the selection model is already bound to a store.
*/
bound: false,

constructor: function (cfg) {
/**
* @event _bind
* Fires as soon as a store is bound
*/
this.addEvents("_bind");

this.callOverridden(arguments);
},
select: function(records, keepExisting, suppressEvent) {
// Check if we are bound to a store. If not, delay the select operation until the store is bound
if (this.bound) {
this.doSelect(records, keepExisting, suppressEvent);
} else {
this.on("_bind", function () {
this.doSelect(records, keepExisting, suppressEvent);
}, this, { single: true });
}

},
bind: function(store, initial) {
this.callOverridden(arguments);

this.bound = true;
this.fireEvent("_bind");
}
});


I'm not sure if the bugfix is a good way doing it, but it did help in my case.

My use case for this is an async-loading TreePanel sitting behind a Ext.form.field.Picker. The TreePanel's store is immediately loaded after displaying the Picker field, and yet the problem with late store binding hit me with the update.

I also wish to share two overrides which don't belong to the bug, but to the same topic:



Ext.tree.View.override({
/**
* Expands all parent nodes so the child is visible.
* @param {Ext.data.Model} record The record to make visible
*/
ensureVisible: function (record) {
if (!record) { return; }

if (record.parentNode) {
record.parentNode.expand();
this.ensureVisible(record.parentNode);
}
},
/**
* Scrolls the specified record node into view
* @param {Ext.data.Model} record The record to scroll into view
*/
scrollIntoView: function (record) {
var node = this.getNode(record);

if (node) {
node.scrollIntoView(this.getEl());
}
}
});


Maybe I missed something, but I couldn't find those methods anywhere in ExtJS4 - I believe they were present in ExtJS3.

bergstyle
17 Jun 2011, 11:17 AM
Yeah trying to select nodes on render or afterrender doesn't work. As an alternative you can do it when the load event fires on the TreePanel.


load: function(store, records, success, options) {
this.getView().select(0); // this references TreePanel despite API docs
}