1. #1
    Sencha User
    Join Date
    Feb 2012
    Location
    Katzenellenbogen
    Posts
    51
    Vote Rating
    1
    Moinsen is on a distinguished road

      0  

    Default TreeStore content filled with own function

    TreeStore content filled with own function


    Hi,

    i am looking for a way to get my TreeStore content from my own function. Now i get the content with a JSON proxy and the corresponing URL which works perfect. But i want to change this to a server function call.

    Code:
    Ext.define('TreeModel', {
      extend: 'Ext.data.Model',
      fields: [
      { name: 'text', type: 'string', defaultValue: null },
      { name: 'parentId', type: 'string', defaultValue: null },
      { name: 'index', type: 'int', defaultValue: null },
      { name: 'depth', type: 'int', defaultValue: 0 },
      { name: 'expanded', type: 'bool', defaultValue: false, persist: false },
      { name: 'expandable', type: 'bool', defaultValue: true, persist: false },
      { name: 'checked', type: 'auto', defaultValue: null },
      { name: 'leaf', type: 'bool', defaultValue: false, persist: false },
      { name: 'cls', type: 'string', defaultValue: null, persist: false },
      { name: 'icon', type: 'string', defaultValue: null, persist: false },
      { name: 'iconCls', type: 'string', defaultValue: null, persist: false },
      { name: 'iconQtip', type: 'string', defaultValue: null, persist: false },
      { name: 'root', type: 'boolean', defaultValue: false, persist: false },
      { name: 'isLast', type: 'boolean', defaultValue: false, persist: false },
      { name: 'isFirst', type: 'boolean', defaultValue: false, persist: false },
      { name: 'allowDrop', type: 'boolean', defaultValue: true, persist: false },
      { name: 'allowDrag', type: 'boolean', defaultValue: true, persist: false },
      { name: 'loaded', type: 'boolean', defaultValue: false, persist: false },
      { name: 'loading', type: 'boolean', defaultValue: false, persist: false },
      { name: 'href', type: 'string', defaultValue: null, persist: false },
      { name: 'hrefTarget', type: 'string', defaultValue: null, persist: false },
      { name: 'qtip', type: 'string', defaultValue: null, persist: false },
      { name: 'qtitle', type: 'string', defaultValue: null, persist: false },
      { name: 'id', type: 'string', defaultValue: null, persist: false },
      { name: 'allowDelete', type: 'boolean', defaultValue: false, persist: false }
      ]
    });
    
    Code:
    var store = Ext.create('Ext.data.TreeStore', {
      model: 'TreeModel',
      proxy: {
        type: 'ajax',
        url : 'data/MenuTree.json'
      }
    });
    var myAPMenu = Ext.create('Ext.tree.Panel', {
      store:store,
      flex:1,
      maxWidth: 300,
      rootVisible:false
    });
    and finally MenuTree.json file:

    Code:
    { text: 'Root', expanded:true, children:[
        {text:'CRM', id:'crm', icon: 'css/images/crm.png', cls: 'treeFontLarge',  children:[
            {text:'Adressen', id:'adressen', qtip:'Adressen', leaf:true, icon: 'css/images/record-page.png', cls: 'treeFontMiddle', allowDelete:true},
            {text:'Aktivität bearbeiten', id:'aktivitaet', qtip:'Aktivität bearbeiten', leaf:true, icon: 'css/images/record-page.png', cls: 'treeFontMiddle', allowDelete:true},
            {text:'To-Do-Liste heute', id:'todotoday', qtip:'To-Do-Liste heute', leaf:true, icon: 'css/images/table-page.png', cls: 'treeFontMiddle', allowDelete:true},
            {text:'To-Do-Liste bis heute', id:'todotilltoday', qtip:'To-Do-Liste bis heute', leaf:true, icon: 'css/images/table-page.png', cls: 'treeFontMiddle', allowDelete:true}
          ]},
        {text:'Portale', id:'portale', icon: 'css/images/portale.png', cls: 'treeFontLarge', children:[
            {text:'CRM heute', id:'crmtoday', leaf:true, qtip:'CRM heute', icon: 'css/images/record-page.png', cls: 'treeFontMiddle', allowDelete:true},
            {text:'Aktivitätenportal', id:'activity', leaf:true, qtip:'Aktivitätenportal', icon: 'css/images/record-page.png', cls: 'treeFontMiddle', allowDelete:true},
            {text:'Adressenportal', id:'adress', leaf:true, qtip:'Adressenportal', icon: 'css/images/record-page.png', cls: 'treeFontMiddle', allowDelete:true}
          ]},
        {text:'Stammdaten', id:'stammdaten', qtip:'Das sind die Stammdaten', icon:'css/images/stammdaten.png', cls: 'treeFontLarge', children:[
            {text: 'Artikel', id:'artikel', leaf: true, qtip:'Artikel Stamm', icon:'css/images/show-as-table.png', cls:'treeFontMiddle', allowDelete:true}
          ]}   
      ]
    }
    
    Now i did my own function: getGUIComponent(String para). The function returns a String containing the JSON. How to change from this proxy call to my function call? Is it better to return a JSON-Object?

    I tried a direct proxy. Something like this:

    Code:
    var store = Ext.create('Ext.data.TreeStore', {
      model: 'TreeModel',
        proxy: {
            type: 'direct',
            reader: 'json',
            directFn: getGUIComponent
        }
    });
    But no success and what about the parameter for getGUIComponent? The problem is to fill the TreeStore. If you have a JSON containing labels, textfields ... you can simply add them to a form. But this thing first must put into that store.

    What is the best way to do this? Can anybody give me some help? Maybe a code snippet?

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,647
    Vote Rating
    898
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    is getGUIComponent a valid Direct method?
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Sencha User
    Join Date
    Feb 2012
    Location
    Katzenellenbogen
    Posts
    51
    Vote Rating
    1
    Moinsen is on a distinguished road

      0  

    Question


    Mitchell, sorry for unclear description and ugly code format.

    The problem is not client - server communication. The problem is just transferring the json data to the store.
    As described before if the json contains parts of a panel you can simply add it.

    Code:
    getGUIComponent(contentActionPanel, {
      callback: function(s) {
        var newComponent = eval(s);
        actionPanel.add(newComponent); // add the component to the Panel
        actionPanel.doLayout();
      }  
    });
    But if you are getting informations for treepanels or even comboboxes, you have to convert the json data to a store. It shouldn't be too difficult because if you use the standard mechnism with ajax proxy in json format getting data from a specified url this is done automatically.

    Just to make it clear this is one of my experiments:

    Code:
    var store = Ext.create('Ext.data.TreeStore', {
      model: 'TreeModel',
      storeId: 'TreeModel',
      data: treeModelData,
      proxy: {
            type: 'ajax',
            reader: {
                type: 'json'
            }
        }
    });
    
    getGUIComponent("MenuTree", {
      callback: function(s) {
        //decode the json packet...
        var json = Ext.decode(s);
        store.data = json; 
        store.load();
      }  
    });
    But it results in: Cannot call method 'indexOf' of undefined, in store.load().

    Thank you!

  4. #4
    Sencha Premium Member
    Join Date
    Dec 2011
    Posts
    236
    Vote Rating
    3
    ypandey is on a distinguished road

      0  

    Default


    Hi,

    Even I am facing this issue. I want to load the store with data which I have cached. How do I load the records in the treestore. Also in treestore we do not have methods loadData/ loadRecords (as in data store).

    Thanks

Thread Participants: 2