PDA

View Full Version : Left-side navigationView in SenchaTouch (A question about Ext.data.TreeStore)



modcarl
6 Mar 2011, 6:27 AM
I want to dynamically set up the left-side navigation menu just like iPad-style.
So, I make some modification on the demo example. You could also visit this official example here.


sink.StructureStore = new Ext.data.TreeStore({
model: 'Demo',
//root: {
// items: sink.Structure
//},
proxy: {
type: 'ajax',
url: 'words.json',
reader: {
type: 'json',
root: 'items'
}
}
});


For easier implementation, I try to get the JSON data from the "words.json". (Ideally, JSONP type is better...tried, but no luck.)

Here is the content of "words.json":


{
text: 'User Interface',
cls: 'launchscreen',
items: [{
text: 'Buttons',
card: demos.Buttons,
source: 'src/demos/buttons.js',
leaf: true
},
{
text: 'Forms',
card: demos.Forms,
source: 'src/demos/forms.js',
leaf: true
},
{
text: 'List',
card: demos.List,
source: 'src/demos/list.js',
leaf: true
}]
}

It ends up nothing appearing. What's wrong? Do I mistake it? (API here)

What do I want to do?

Like a dictionary, left side are those navigation items of word. On clicking it, the meaning of the word will be showed in right-side view.

I can't run NestedList example in sencha framework. Clicking on the table cell and push another view on it (i.e., in Sencha: NestedList) is what I want to do.

Have tried and no luck:

1. use the NestedList example
2. replace proxy with ScriptTagProxy (JSONP)
3. use easier proxy implementation (showed in the code)

I am not so sure whether my description is clear enough or not, feel free to tell me which part is unclear. And thanks in advance!

6 Mar 2011, 7:25 AM
is words.json in the same directory as the page that you're using to launch your ST code?

modcarl
6 Mar 2011, 5:01 PM
Yes.

modcarl
6 Mar 2011, 11:47 PM
I figured it out, but now the problem is the type of "card".

The model definition:


Ext.regModel('Demo', {
fields: [
{name: 'text', type: 'string'},
{name: 'source', type: 'string'},
{name: 'preventHide', type: 'boolean'},
{name: 'cardSwitchAnimation'},
{name: 'card'}
]
});



And the following items work well when directly embedded in the code.


[{
"text": "User Interface",
"cls": "launchscreen",
"items":[{
"text": "Buttons",
"card": "demos.Buttons",
"source": "src/demos/buttons.js",
"leaf": true
}]

}]


But when I pulled it out to "words.json", it generated the JSON parsing warning. (double-quoted)

After experiment, only text field in the regModel works fine.
What should the type of objects be?
Thanks!