0
樹面板和存儲內存管理ExtJS的TreePanel中內存管理問題
嗨， 我是新來的Ext JS，並不能找到一個答案，我的問題。 我有一個TreePanel和一個包含一些過濾器的菜單。當我更換過濾器時，我必須重新加載樹。所以我在菜單上有一個監聽器，當選擇完成時，它調用loadElementContent。內容每次都能正確加載，唯一的問題是內存消耗只是上升和下降。我已經嘗試銷燬每個節點，當我從樹中刪除它時，我嘗試使用elemStore.removeAll（）從商店中刪除元素，但似乎沒有任何效果。 任何幫助將不勝感激。代碼如下：
樹控制器：
Ext.define('myController.Index', {
extend: 'Ext.app.Controller',
stores: ['Elements'],
models: ['Element'],
views: ['index.MainTabPanel', 'GenericTree'],
refs: [
{
ref: 'elementsTree',
selector: 'maintabpanel generictree[name=myTree]'
}
],
init: function() {
this.control({
'viewport > maintabpanel': {
render: this.onMainTabPanelRender,
myEvent: this.buttonHandler
}
});
},
setProxyParameters: function(proxy) {
proxy.extraParams.filter_key = 12;
return proxy;
},
onMainTabPanelRender: function() {
this.on('onElemStoreLoadSucces', this.onElemStoreLoadSuccess);
},
loadElementContent: function() {
var elemStore = this.getElementsStore();
elemStore.setProxy(
this.setProxyParameters(
elemStore.getProxy()));
elemStore.load({
scope: this,
callback: function(elements, elOperation, elSuccess) {
if (elSuccess) {
this.fireEvent('onElemStoreLoadSucces');
} else {
Ext.Error.raise(new Mytils.JSONError
(elemStore.getProxy(), elOperation));
}
}
});
},
onElemStoreLoadSuccess: function() {
this.loadTree(this.getElementsStore().getRange());
},
loadTree: function(elements) {
var root = this.getElementsTree().getRootNode();
this.clearChildNode(root);
this.appendChildrentToNode(root, elements);
console.log(root);
},
clearChildNode: function(node) {
console.log('removing children');
while (node.firstChild) {
node.removeChild(node.firstChild);
}
},
appendChildrentToNode: function(root, elements) {
console.log('appending children');
Ext.Array.each(elements, function(element) {
element.set('ischecked', 0);
element.set('name', element.get('element_id'));
element.set('leaf', true);
root.appendChild(element);
});
},
buttonHandler: function() {
this.loadElementContent();
}
});
代理：
/**
* This class is merely an Ext.data.proxy.Ajax, using a JSON reader
* and writer, and with some preset config properties.
*/
Ext.define('myUtils.MyAjaxProxy', {
extend: 'Ext.data.proxy.Ajax',
alias: 'proxy.myajax',
constructor: function (config) {
// Preset some config options, if not specified differently.
Ext.applyIf(config, {
// By default, the JSON requests are sent with a 'start', 'page' and 'limit' parameters.
// As long as data is retrieved all at once, these are not needed, so remove them:
startParam: undefined,
pageParam: undefined,
limitParam: undefined,
// By default, a parameter with the name "_dc" ("disable caching") and a random value is added to each request,
// to prevent caching of the response and enforce each request to be handled by the server.
// Set this config parameter to false to eliminate the _dc parameter and thus enable caching:
// noCache: false,
reader: {
type: 'json',
// The names of the fields in a JSON response containing the success/failure status,
// and (in case of error) the corresponding error message.
successProperty: 'success',
messageProperty: 'error_msg'
},
writer: {
// Configure the writer to only POST modified fields.
writeAllFields: false
}
});
myUtils.MyAjaxProxy.superclass.constructor.call(this, config);
}
});
商店：
Ext.define('myStore.Elements', {
extend: 'Ext.data.Store',
requires: ['myUtils.GsaAjaxProxy'],
model: 'myModel.Element',
//autoLoad: true,
proxy: {
type: 'myajax',
url: getApiURL('getElements'),
reader: {
root: 'elements'
}
}
});
型號：
Ext.define('myModel.Element', {
extend: 'Ext.data.Model',
fields: ['key',
'element_key',
'element_id',
'element_value'
]
});