1. #1
    Sencha User
    Join Date
    Oct 2012
    Posts
    9
    Vote Rating
    0
    MtoW is on a distinguished road

      0  

    Default Unanswered: Treestore doesn't create Items

    Unanswered: Treestore doesn't create Items


    I have a filled treestore.
    The only problem when I console.log the store en look into the data, I see that the array 'items' is 0 (zero).
    The array 'all' has all the data, but there aren't any items created.
    I need to use the items attribute, so why is items empty?

    treestore config:
    Code:
    autoLoad: true,
    model: 'App.model.Items',
            defaultRootProperty: 'children',
    
    
    
            proxy: {
                type: 'ajax',
                url: 'jsonUrl',
                reader: {
                    type: 'json'
                }
            }
    model
    Code:
    Ext.define('App.model.Items', {    extend: 'Ext.data.Model',
        config: {
                fields: [{
                    name: 'text',
                    type: 'string'
                },
                {
                    name: 'name',
                    type: 'string'
                },
                {
                    name: 'leaf',
                    type: 'bool'
                }]
        }
    });
    json snippet
    Code:
    children: 
    [
    • {
      • id: "1",
      • text: "text",
      • name: "name",
      • image: "imgUrl",
      • leaf: false,
      • children: [
        • {
          • id: "12",
          • text: "text",
          • name: "",
          • image: "imgUrl",
          • leaf: true
          },
        • {
          • id: "13",
          • text: "text",
          • name: "",
          • image: "imgUrl",
          • leaf: true
          },
        • {
          • id: "27",
          • text: "text",
          • name: "",
          • image: "imgUrl",
          • leaf: true
          }
        ]
      },
    • {
      • id: "6",
      • text: "text",
      • name: "name",
      • image: "imgUrl",
      • leaf: false,
      • children: [
        • {
          • id: "16",
          • text: "text",
          • name: "",
          • image: "imgUrl",
          • leaf: true
          },
        • {
          • id: "17",
          • text: "text",
          • name: "",
          • image: "imgUrl",
          • leaf: true
          },
        • {
          • id: "28",
          • text: "text",
          • name: "",
          • image: "imgUrl",
          • leaf: true
          }
        ]
      }, etc ...

  2. #2
    bricemason's Avatar
    Join Date
    Jan 2008
    Location
    Upstate NY
    Posts
    280
    Answers
    49
    Vote Rating
    44
    bricemason has a spectacular aura about bricemason has a spectacular aura about bricemason has a spectacular aura about

      0  

    Default


    You're code example is less than complete and I don't understand exactly what you're asking help with. However given what you've provided, I have pieced together a working example of loading your tree store with the model you have defined and some cleaned up json data based on your snippets.

    items.json
    Code:
    {
        "children": [
            {
                "id": "1",
                "text": "text",
                "name": "name",
                "image": "imgUrl",
                "leaf": false,
                "children": [
                    {
                        "id": "12",
                        "text": "text",
                        "name": "",
                        "image": "imgUrl",
                        "leaf": true
                    }
                ]
            }
        ]
    }
    App.model.Items
    Code:
    Ext.define('App.model.Items', {
        extend: 'Ext.data.Model',
    
    
        config: {
            fields: [
                {
                    name: 'text',
                    type: 'string'
                },
                {
                    name: 'name',
                    type: 'string'
                },
                {
                    name: 'leaf',
                    type: 'bool'
                }
            ]
        }
    });
    App.store.MyTreeStore:
    Code:
    Ext.define('App.store.MyTreeStore', {
        extend: 'Ext.data.TreeStore',
        requires: [
            'App.model.Items'
        ],
    
    
        config: {
            storeId: 'mytree',
            autoLoad: true,
            model: 'App.model.Items',
            defaultRootProperty: 'children',
    
    
            proxy: {
                type: 'ajax',
                url: 'data/items.json',
                reader: {
                    type: 'json'
                }
            }
        }
    });
    App.view.Main:
    Code:
    Ext.define('App.view.Main', {
        extend: 'Ext.tab.Panel',
        xtype: 'main',
        requires: [
            'Ext.dataview.NestedList'
        ],
        config: {
            tabBarPosition: 'bottom',
    
    
            items: [
                {
                    xtype: 'nestedlist',
                    title: 'Welcome',
                    iconCls: 'home',
                    title: 'Items',
                    displayField: 'id',
                    store: 'mytree'
                }
            ]
        }
    });
    If this isn't what you're looking for, please post a clearer explanation of what you need help with along with any additional code if necessary.

    Brice
    Brice Mason
    Front End Developer
    Modus Create

    @bricemason
    bricemason.com

    Sencha Touch Screencasts
    Vimeo - Sencha Touch Channel

    Github Projects:
    Sencha Cordova Builder enables the automatic creation, building, and running of PhoneGap (Cordova) projects with Sencha Touch.

    Am I Sencha Touch Ready? checks your system to determine what you need to do to start Sencha Touch development. If you're having trouble getting up and running, try this out.

    Sencha Tools Bridge allows Sencha SDK Tools to co-exist with Sencha Cmd on the same system.

  3. #3
    Sencha User
    Join Date
    Oct 2012
    Posts
    9
    Vote Rating
    0
    MtoW is on a distinguished road

      0  

    Default


    Well, I use a plugin for an Accordion list. This uses the 'items' array inside the treestore.
    I have 2 stores: one who is loaded from JSON and an other is loaded from hardcoded data.

    The hardcoded data looks like this:
    Code:
    root: {            items: [{
                    text: 'text',
                    name: 'name',
                    items: [
                        {
                            text: 'text',
                            type: 'type',
                            leaf: true
                        },
                        {
                            text: 'text',
                            items: [
                                {
                                    text: 'text',
                                    type: 'type',
                                    checked: false,
                                    leaf: true
                                },
                                {
                                    text: 'text',
                                    type: 'type',
                                    checked: false,
                                    leaf: true
                                }
                            ]
                        },
                        {
                            text: 'text',
                            items: [
                                {
                                    text: 'text',
                                    leaf: true
                                },
                                {
                                    text: 'text',
                                    leaf: true
                                },
                                {
                                    text: 'text',
                                    leaf: true
                                },
                                {
                                    text: 'text',
                                    leaf: true
                                },
                                {
                                    text: 'text',
                                    leaf: true
                                },
                            ]
                        }
                    ]
                }, {
                    text: 'text',
                    name: 'name',
                    items: [{
                        text: 'text',
                        leaf: true
                    }, {
                        text: 'text',
                        leaf: true
                    }]
                }]
            }
    And the differences I can find between the two is this:
    consolelog-of-stores.jpg

  4. #4
    bricemason's Avatar
    Join Date
    Jan 2008
    Location
    Upstate NY
    Posts
    280
    Answers
    49
    Vote Rating
    44
    bricemason has a spectacular aura about bricemason has a spectacular aura about bricemason has a spectacular aura about

      0  

    Default


    That latest snippet of json is invalid. It's hard to determine what the issues are here if you don't provide good data for us to work with.

    Given the example I provided to you earlier, if you loaded that up and hooked in a load handler to that tree store you'd see all the data in the all array and the first 'branch' in the items array. Aside from that, I would think the plugin would be using the store interface methods to interact with the data rather than the direct items.

    I would double-check in your code that:
    1. Your json is valid and that if it's remote data, you're not trying to work with it until it's fully loaded.
    2. Your defined model matches the json data that's coming back
    3. Review what the plugin is doing
    Aside from dumping the tree store, a nice easy way you could use to validate your tree store loading is to just slap a NestedList view on it and browse the data.

    If you're still stuck, post a link to where we can get the accordion list plugin as well as any relevant code.

    Brice
    Brice Mason
    Front End Developer
    Modus Create

    @bricemason
    bricemason.com

    Sencha Touch Screencasts
    Vimeo - Sencha Touch Channel

    Github Projects:
    Sencha Cordova Builder enables the automatic creation, building, and running of PhoneGap (Cordova) projects with Sencha Touch.

    Am I Sencha Touch Ready? checks your system to determine what you need to do to start Sencha Touch development. If you're having trouble getting up and running, try this out.

    Sencha Tools Bridge allows Sencha SDK Tools to co-exist with Sencha Cmd on the same system.

Thread Participants: 1