Nested List, Multiple Layouts

Question

In Sencha Touch 2.1, I have the following nested list defined:

xtype: 'NestedList',
docked: 'top',
ui: 'light',
store: treeStore,
detailCard: true,
detailContainer: // Reference to a Another Panel

I can get the Nested List to appear, but adding items via JSON is proving problematic. Here's a sample of my JSON:

[
    {
       "BranchID" : 4,
       "BranchName" : "Branch Name",
       "Jobs" : [
          {
             "JobOrderID" : 75,
             "JobTitle" : "Job Title",
             "leaf" : true
          }
       ]
    }
]

And here is my Tree Store and List Item:

// Define a List Item:
Ext.define('Branch', {
    extend: 'Ext.data.Model',
    config: {
        fields: [
            'BranchID',
            'BranchName'
        ]
    }
});

var treeStore = Ext.create('Ext.data.TreeStore', {
    model: 'Branch',
    defaultRootProperty: 'items',
    proxy: {
        type: 'ajax',
        url: 'data/region.php'
    }
});

I can see that data/region.php is being called, and it's correctly returning JSON - but the list items do not show up. How do I get the list items to show up?

Additionally, I'd like to use a different layout for the leaf nodes - and to have those leaf nodes pull up a request in a separate panel. How do I identify the panel, so I can reference it in the DetailContainer section of my NestedList?

What I'm looking for:

1. List of Branches
2. Tap on a Branch, list all jobs
3. Tap a job, details show in other panel.

I've read the documentation, but it seems a little sparse on more complex implementations.

Answer 1

From my Sencha Experience, my advice would be never to use Ext.NestedList. Of course they are quite handy when your model is very simple but hard to customize when you model contains associations for instance.

So what I would do (and did) is to use an Ext.navigation.View and push new lists as you tap on items of previous lists. This is the exact same concept as a Ext.NestedList so it won't overload your application.

Here is an example based on your data

If you have any question feel free to ask

Hope this helped

Answer 2

I think your defaultRootProperty is wrong for the treeStore.

It should be

defaultRootProperty: 'Jobs',

API reference