Looking for pointers on customizing a TreeStore

[jholloway7]

I'm pretty new to ExtJS and having a bit of difficulty wrapping my head around the TreeStore/Proxy pattern, in particular making a custom remote call to load the nodes for a tree.Panel.

The application I'm currently building is wizard-like. I have a checkable tree allowing users to choose a few items and then a form allowing the user customize a few properties on those items (step 1). The user then clicks a Next button.

At that point I want to build a new tree.Panel by gathering up the working objects, POST-ing them to my server as JSON. The server will then perform some business logic and return the nodes for the new tree panel (step 2).

I'm having difficulty finding the proper hooks in the TreeStore/Proxy for "gathering up the working objects, POST-ing them to my server as JSON".

Searching around, I see some examples that override the Proxy's 'doRequest'.

Ext.define('My.Step2Tree', {
  extend: 'Ext.tree.Panel',
  requires: [
    'Ext.data.TreeStore'
  ],
   initComponent: function() {
    this.store = Ext.create('Ext.data.TreeStore', {
      proxy: {
          type: 'ajax',
          url: 'theurl/'
      }, 
      actionMethods: {
        'read': 'POST'
      },
      doRequest: function(operation, callback, scope)  {
          // build JSON object
          // Make request
      }
    });


    this.callParent(arguments);
  }
});

This is what I have so far. Am I looking to totally override the 'doRequest' method like this? Or is there a better (i.e. more idiomatic) hook where I can simply provide a JSON object for the POST data? It feels like I'm going against the grain here. Am I approaching the problem incorrectly? I.e, should this all be model-driven instead of just using the default tree node data structures?

Thanks

[jholloway7]

The solution I came up with was to not use a Proxy, making the Ajax call inside my handler and using 'setRootNode' to modify the contents of the tree.

Ext.define('My.Step2Tree', {
  extend: 'Ext.tree.Panel',

  // ...

  initComponent: function() {
    // Start with an empty store since the initial load is going to be
    // asynchronous
    this.nullStore = Ext.create('Ext.data.TreeStore', {
      root: {}
    });
    this.store = this.nullStore;


    this.callParent(arguments);
  },


  loadTree: function(jsonData) {
    // Invoked from the appropriate event handler


    var tree = this;
    tree.disable();


    var url = '...' ;
    Ext.Ajax.request({
      url: url,
      method: 'POST',
      jsonData: jsonData,
      success: function(response) {
          var treeData = Ext.JSON.decode(response.responseText);
          tree.setRootNode(treeData);
          tree.enable();
      }
    });
  },
  // ...

[scottmartin]

Thank you for posting your solution.

Scott