ExtJs TreePanel内存管理问题

Question

树面板和存储内存管理

嗨， 我是 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'
  ]
});

Answer 1

我不确定这是否有帮助，因为我不使用自定义代理，但我只是按如下方式定义我的商店。然后要重新加载数据，我只需调用 myTree.getStore().load();我没见过内存问题

store=Ext.create( 'Ext.data.TreeStore',//
        {
            id:ts_id,
            storeId:ts_id,
            remoteSort:false,model:dv_model_id,
                    folderSort: true,
                    sortOnLoad:false,

            proxy: 
            {
                type: 'rest',
                url: this.url
            },
            extraParams:{season_id: proxy_sesaon_id }
            ,listeners:
            {
                load:{scope:this,fn:function()
                {
                    //default is to load as collapsed: this keeps all folders open all the time
                    this.expandAll();   
                }}
            }