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:
I've read the documentation, but it seems a little sparse on more complex implementations.
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With