Hybrid View

  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
    36,754
    Vote Rating
    827
    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
    226
    Vote Rating
    2
    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

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi