PDA

View Full Version : Sencha Touch 2 MVC NestedList Problem



mickey35vn
22 Mar 2012, 8:11 PM
Hi,

In my test MVC application, I used the nested list to display the blog. After the tree store is loaded, no thing is displayed on screen.

Here is code of my application, please help me understand what I'm doing wrong.

Thanks a lot.

BlogView.js

Ext.define('Sencha.view.BlogView', { extend : 'Ext.Container',
xtype : 'blogview',
requires : [ 'Ext.NestedList' ],
config : {
items : [ {
xtype : 'nestedlist',
title : 'Blog',
displayField : 'title',
store : 'BlogStore',
detailCard : {
xtype : 'panel',
scrollable : true,
styleHtmlContent : true,
html : 'You are viewing the detail card!'
}
}, {
xtype : 'button',
text : 'Back',
id : 'backButton'
} ]
}
});

BlogStore.js

Ext.define('Sencha.store.BlogStore', { extend : 'Ext.data.TreeStore',


config : {
model : 'Sencha.model.BlogModel',
proxy : {
type : 'ajax',
url : 'data/blog.json',
reader : {
type : 'json',
rootProperty : 'responseData.feed.entries'
}
},
root : {
leaf : false
},
listeners : {
load : function(store, records, successful, operation) {
console.log('oh yeahhhhhhhhh');
}
}
}


});

BlogModel.js

Ext.define('Sencha.model.BlogModel', { extend : 'Ext.data.Model',
config : {
fields : [ {
name : 'title',
type : 'string'
}, {
name : 'link',
type : 'string'
}, {
name : 'author',
type : 'string'
}, {
name : 'contentSnippet',
type : 'string'
}, {
name : 'content',
type : 'string'
}, {
name : 'leaf',
type : 'boolean',
defaultValue : true
} ]
}
});

mitchellsimoens
23 Mar 2012, 5:14 AM
Your nestedlist doesn't know what size to have. You either need to give it a size or give it's parent a layout.

mickey35vn
25 Mar 2012, 6:54 PM
Thanks a lot.

mickey35vn
25 Mar 2012, 11:52 PM
When set the size of the nested list, we need to give it a exactly size, so I give it's parent a layout as below:



Ext.define('Sencha.view.BlogView', { extend : 'Ext.Container',
xtype : 'blogview',
layout: 'vbox',
requires : [ 'Ext.NestedList' ],
config : {
items : [ {
xtype : 'nestedlist',
title : 'Blog',
flex: 1,
displayField : 'title',
store : 'BlogStore',
detailCard : {
xtype : 'panel',
scrollable : true,
styleHtmlContent : true,
html : 'You are viewing the detail card!'
}
}, {
xtype : 'button',
text : 'Back',
id : 'backButton'
} ]
}
});

But it don't work :s

mickey35vn
27 Mar 2012, 10:15 PM
Please help me find the solution for this case. Thanks

mitchellsimoens
28 Mar 2012, 4:42 AM
Inspect the DOM, look to see what is going on. Do you need to have align : 'stretch' in your layout config?

nagwww
28 Mar 2012, 3:06 PM
I am having the same problem.

mickey35vn
29 Mar 2012, 8:15 PM
Have align : 'stretch' but still don't see anything



Ext.define('Sencha.view.BlogView', { extend : 'Ext.Container',
xtype : 'blogview',
layout : {
type : 'vbox',
align : 'stretch'
},
requires : [ 'Ext.NestedList' ],
config : {
items : [ {
xtype : 'nestedlist',
title : 'Blog',
flex : 1,
displayField : 'title',
store : 'BlogStore',
detailCard : {
xtype : 'panel',
scrollable : true,
styleHtmlContent : true,
html : 'You are viewing the detail card!'
}
}, {
xtype : 'button',
text : 'Back',
id : 'backButton'
} ]
}
});

dishwashwebdesign
10 Apr 2012, 4:01 AM
hey.
i am kinda having the same issues. only i want to get a nestedlist on top and a localstorage list underneath. its not really cooperating yet :)
did you manage to get that nestedist showing up properly now?

anilgs
12 Apr 2012, 8:17 AM
I was also having a similar problem. I got it working simply by rearranging my model attributes.
For eg: whenever I had name as the second attribute in the list, I too would get a blank screen. However, after re-arranging it shows up fine. I suspect there is something weird happening with NestedList. Also, when I select an item within the list, I get a record passed into the event handler. However, that record object does not have the 'permalink' attribute of my model. It does have id, leaf and name attributes.

Ext.define("RDMobile.model.ProductCategory", {
extend: 'Ext.data.Model',
config : {
fields: [{
name: "id", type: "int",
name: "permalink", type: "string",
name: "leaf", type: "boolean",
name: "name", type: "string",
}]



}
});

anilgs
12 Apr 2012, 7:30 PM
My mistake....Actually, the syntax for the field definition was incorrect. Now, things are working correctly for me.

Ext.define("RDMobile.model.ProductCategory", {
extend: 'Ext.data.Model',
config : {
fields: [{name: "id", type: "int"},
{name: "permalink", type: "string"},
{name: "leaf", type: "boolean"},
{name: "name", type: "string"}
]



}
});