Panel with nested list - no data reflecting on screen

[minajagi]

Hi,
This is my first shot at Sencha touch and I don't have a Ext JS background as well.
I used the first app with Sencha touch from the documentation and have added a new tab to that example.This is the tab that I have now a problem with.
I have a servlet that returns to me a list of clients.I intend to display this list on the screen and on tap of each client open some details about the client.
I have created a model and a store .I see that the server side is working well however the data even though i see them as sop statements on server side i can't see a thing coming up on the browser.
I have even added the Panel that houses my nestedlist to viewport but apart from the tab header i don't see anything.Would appreciate if anyone can take a look at my javascript and help to get this working.





Ext.define('Client', {
extend: 'Ext.data.Model',
fields: [
{name: 'clientName',type: 'string'}
]
});
// create the data store
var clientStore = Ext.create('Ext.data.Store', {
model: 'Client',
autoLoad: true,
type: 'tree',
proxy: {
type: 'ajax',
url: 'client/GetClient.action'
, reader: {
type: 'json',
rootProperty: 'objects'
}
}
});

Ext.create('Ext.DataView', {
fullscreen: true,
cls: 'clientView',
store:clientStore
});



//We've added a third and final item to our tab panel - scroll down to see it
Ext.application({
name: 'Sencha',

launch: function() {
console.log("App launch");
var panel = Ext.create("Ext.tab.Panel", {
fullscreen: true,
tabBarPosition: 'bottom',


items: [
{
title: 'Home',
iconCls: 'home',
cls: 'home',
html: [
'<img width="65%" src="http://staging.sencha.com/img/sencha.png" />',
'<h1>Welcome to Sencha Touch</h1>',
"<p>You're creating the Getting Started app. This demonstrates how ",
"to use tabs, lists and forms to create a simple app</p>",
'<h2>Sencha Touch 2</h2>'
].join("")
},
{
xtype: 'nestedlist',
title: 'Blog',
iconCls: 'star',
displayField: 'title',


store: {
type: 'tree',


fields: [
'title', 'link', 'author', 'contentSnippet', 'content',
{name: 'leaf', defaultValue: true}
],


root: {
leaf: false
},


proxy: {
type: 'jsonp',
url: 'https://ajax.googleapis.com/ajax/services/feed/load?v=1.0&q=http://feeds.feedburner.com/SenchaBlog',
reader: {
type: 'json',
rootProperty: 'responseData.feed.entries'
}
}
},


detailCard: {
xtype: 'panel',
scrollable: true,
styleHtmlContent: true
},


listeners: {
itemtap: function(nestedList, list, index, element, post) {
this.getDetailCard().setHtml(post.get('content'));
}
}
},
{
title:'Client List'
,iconCls:'user'
,xtype: 'nestedlist'
,store: {
model: 'Client',
autoLoad: true,
type: 'tree',
proxy: {
type: 'ajax',
url: 'client/GetClient.action',
reader: {
type: 'json',
root: 'data'
}
}
}

},
//this is the new item
{
title: 'Contact',
iconCls: 'user',
xtype: 'formpanel',
url: 'contact.php',
layout: 'vbox',


items: [
{
xtype: 'fieldset',
title: 'Contact Us',
instructions: '(email address is optional)',
items: [
{
xtype: 'textfield',
label: 'Name'
},
{
xtype: 'emailfield',
label: 'Email'
},
{
xtype: 'textareafield',
label: 'Message'
}
]
},
{
xtype: 'button',
text: 'Send',
ui: 'confirm',
handler: function() {
this.up('formpanel').submit();
}
}
]
}
]
});
Ext.Viewport.add(panel);
}
});

[mitchellsimoens]

Two things


You should not use Ext.create before Ext.application#launch method is fired. Interactions of that component will be lost.
If a component is going to be an item of another component, you should not use the fullscreen config. The fullscreen config will make that component be added to Ext.Viewport and not the component you are expecting.