I have been playing with the state stuff and decided to create a statefull tree panel, There are several examples laying around so it is just a matter of choosing one and porting it to 4.0. I wanted one that saved the expanded/collapsed state. So here is an example of an extended class.
PHP Code:
/*
* File: TreePanel.js
* Date: 26-Jul-2011
* By : Kevin L. Esteb
*
* This module extends Ext.tree.Panel to allow for the saving of the
* expanded/collapse state of the tree.
*
*/
Ext.define('XAS.desktop.lib.TreePanel', {
extend: 'Ext.tree.Panel',
alias: 'xas.treepanel',
uses: [
'Ext.tree.Panel'
],
initComponent: function() {
Ext.apply(this, {
stateful: true,
stateId: this.id + '-state',
stateEvents: ['itemcollapse','itemexpand']
});
this.callParent(this);
},
getState: function() {
var nodes = [], state = this.callParent();
var getPath = function(node, field, separator) {
field = field || node.idProperty;
separator = separator || '/';
var path = [node.get(field)], parent = node.parentNode;
while (parent) {
path.unshift(parent.get(field));
parent = parent.parentNode;
}
return separator + path.join(separator);
};
this.getRootNode().eachChild(function(child) {
// function to store state of tree recursively
var storeTreeState = function(node, expandedNodes) {
if (node.isExpanded() && node.childNodes.length > 0) {
expandedNodes.push(getPath(node, 'text'));
node.eachChild(function(child) {
storeTreeState(child, expandedNodes);
});
}
};
storeTreeState(child, nodes);
});
Ext.apply(state, {
expandedNodes: nodes
});
return state;
},
applyState: function(state) {
var nodes = state.expandedNodes || [],
len = nodes.length;
this.collapseAll();
for (var i = 0; i < len; i++) {
if (typeof nodes[i] != 'undefined') {
this.expandPath(nodes[i], 'text');
}
}
this.callParent(arguments);
}
});
This does everything that I want. When the class initializes, the applyState() method is called, when you expand a node, the getState() method is called and that state is saved. So I decided to try a plugin. Here is the code for that:
PHP Code:
/*
* File: TreePanel.js
* Date: 26-Jul-2011
* By : Kevin L. Esteb
*
* This module is a plugin to Ext.tree.Panel that allows
* it to save the expanded/collapse state of the tree.
*
*/
Ext.define('Ext.ux.state.plugins.TreePanel', {
extend: 'Ext.AbstractPlugin',
alias: 'state.plugins.treepanel',
uses: [
'Ext.AbstractPlugin'
],
init: function(treePanel) {
if (treePanel.stateEvents) {
treePanel.stateEvents.push('itemcollapse');
treePanel.stateEvents.push('itemexpand');
} else {
treePanel.stateEvents = [];
treePanel.stateEvents.push('itemcollapse');
treePanel.stateEvents.push('itemexpand');
};
if (! treePanel.stateId) {
treePanel.stateId = treePanel.id + '-state';
}
if (! treePanel.state) {
treePanel.state = true;
}
treePanel.getState = this.getState;
treePanel.applyState = this.applyState;
},
getState: function() {
var nodes = [], state = Ext.tree.Panel.superclass.getState.apply(this);
var getPath = function(node, field, separator) {
field = field || node.idProperty;
separator = separator || '/';
var path = [node.get(field)], parent = node.parentNode;
while (parent) {
path.unshift(parent.get(field));
parent = parent.parentNode;
}
return separator + path.join(separator);
};
this.getRootNode().eachChild(function(child) {
// function to store state of tree recursively
var storeTreeState = function(node, expandedNodes) {
if (node.isExpanded() && node.childNodes.length > 0) {
expandedNodes.push(getPath(node, 'text'));
node.eachChild(function(child) {
storeTreeState(child, expandedNodes);
});
}
};
storeTreeState(child, nodes);
});
Ext.apply(state, {
expandedNodes: nodes
});
return state;
},
applyState: function(state) {
var nodes = state.expandedNodes || [], len = nodes.length;
this.collapseAll();
for (var i = 0; i < len; i++) {
if (typeof nodes[i] != 'undefined') {
this.expandPath(nodes[i], 'text');
}
}
Ext.tree.Panel.superclass.applyState.apply(this, arguments);
}
});
This code is basically the same as the extended class. It sorta works most of the time. When the plugin initializes it doesn't call the applyState() method, when a node is expanded or collapsed it sometimes calls the getState() method. The state is sometimes saved. So I must be missing something with plugins. Anybody have any suggestions.
Creating a statefull tree panel
Reply With Quote