AJAX in Nested List

[creator]

Hello guys,

i am in trouble with some code. My idea is to load list entries with AJAX.

My Code:



Ext.setup({
icon: 'icon.png',
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
glossOnIcon: false,
onReady: function() {

phome = new Ext.Panel({

html: '<p id="home-headline">Sencha</p><p id="home-content">Eine kleine Testapplikation</p>'
});

function showRecent() {
Ext.Ajax.request({
url: './get_text.php',
success: function(e) {
var obj = Ext.util.JSON.decode(e.responseText);
var guests = obj.guests;
if (guests) {
var html = tpl.applyTemplate(guests);
Ext.getCmp('recentTab').update(html);
}
}
});
}

// store with data
var data = {
text: 'Sencha',

items: [{
text: 'smsvongesternnacht',


items: [ {
id: 'recentTab',
listeners: {
'beforeshow': showRecent
}
}]


},{
text: 'Empty Category',
items: []
}]
};
Ext.regModel('ListItem', {
fields: [{name: 'text', type: 'string'}]
});
var store = new Ext.data.TreeStore({
model: 'ListItem',
root: data,
proxy: {
type: 'ajax',
reader: {
type: 'tree',
root: 'items'
}
}
});
var ptut = new Ext.NestedList({
fullscreen: true,
title: 'Pages',
displayField: 'text',
store: store
});



new Ext.TabPanel({
tabBar: {
dock: 'bottom',
layout: {
pack: 'center'
}
},
fullscreen: true,
ui: 'dark',
cardSwitchAnimation: {
type: 'slide',
cover: true
},

defaults: {
scroll: 'vertical'
},
items: [{
title: 'Home',
items: [phome],
iconCls: 'home',
cls: 'card1'
}, {
title: 'pages',
items:[ptut],
iconCls: 'favorites',
cls: 'card2',
badgeText: '4'
}
]
});
}
});



On loading the list entry, i got an error (sencha-touch.js):
"sencha-touch.js:6: Uncaught Error: You are using a ServerProxy but have not supplied it with a url".

Did anyone know a solution?

greets

[Bucs]

Where is you url property for reading the tree data from the server? If you specify 'ajax' as the reader type, it implies a server side proxy so you need to supply a url of where to get the data. Also, the tree data a little more complicated than the normal ajax json reader...be sure to study the API docs and the examples as your data will need to be supplied in a specific way. Offhand, I forgot which example uses a tree store, but there should be one there. I think the nestedList example is one though (from Touch 1.1 download).



var store = new Ext.data.TreeStore({
model: 'ListItem',
url: '/path/to/treeData.json'
root: data,
proxy: {
type: 'ajax',
reader: {
type: 'tree',
root: 'items'
}
}
});

[creator]

Thanks to your reply.

Believe, we are mean different things?

I am only want to get the text from on .php file. The .php file its okay. Output:

,items: [{text: 'bla'}]

The snippet who should get it:

var data = {
text: 'Sencha',

items: [{
text: 'test',
url: './get_bla.php'

}]
};


Thanks in advance.

[Bucs]

Well, regardless...that is a problem as well that you will encounter when you fix the other. Are you getting data back to the success callback, or not? What errors are reported in Chrome in the XHR tab. You need to provide a little more info to get better help. You may want to not use the "." in your pathing. If you need to access sub directories, you may be better off adding a Virtual directory below where your files are and path from there.

[creator]

I believe, i am starting on the wrong way. it sucks at the moment.

What i want to have:

- a list, with different points/items.
- the last item should open a text, like from a php file. (AJAX, i think)
- a tabbar, with different points

Please correct me, if i am on the wrong way. ;)

My idea is to have an panel with a tabbar, like:

new Ext.TabPanel({
tabBar: {
dock: 'bottom',
layout: {
pack: 'center'
}
},
fullscreen: true,
ui: 'dark',
cardSwitchAnimation: {
type: 'slide',
cover: true
},

defaults: {
scroll: 'vertical'
},
items: [{
title: 'Home',
items: [phome],
iconCls: 'home',
cls: 'card1'
}, {
title: 'pages',
items:[ptut],
iconCls: 'favorites',
cls: 'card2',
badgeText: '4'
}
]
});


"ptut" -card should include a nestledlist. Here i want to have my different items. The items on the first level are fixed. To this point, it's okay.

The question is, how can i fill the lower level with a text from a php file? Important, i do not want to have further items, only a text in the nestleslist. My experimentations, you can see in der posts before.

i will be happy, if one of you can support me. ;)

greets