ツリーパネルとストアメモリ管理
こんにちは、私は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'
]
});