1. #1
    Sencha Premium Member
    Join Date
    Aug 2012
    Posts
    8
    Vote Rating
    0
    jholloway7 is on a distinguished road

      0  

    Default Looking for pointers on customizing a TreeStore

    Looking for pointers on customizing a TreeStore


    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'.

    Code:
    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
    Last edited by jholloway7; 1 Aug 2012 at 9:52 AM. Reason: simplify code

  2. #2
    Sencha Premium Member
    Join Date
    Aug 2012
    Posts
    8
    Vote Rating
    0
    jholloway7 is on a distinguished road

      0  

    Default


    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.

    Code:
    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();
          }
        });
      },
      // ...

  3. #3
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,007
    Vote Rating
    458
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      0  

    Default


    Thank you for posting your solution.

    Scott

Thread Participants: 1

Tags for this Thread