PDA

View Full Version : Getting List To Render



arandlett
14 Dec 2011, 9:42 AM
I have looked at multiple examples and have tried to follow each but can't get the list to show up in my Media View. The data in the store loads fine from external file. However the list never renders on screen.

- app.js

Ext.Loader.setConfig({
enabled:true,
paths:{
MonkTouch: 'app'
}
});
Ext.application({
name: 'MonkTouch',
autoCreateViewport : true,
controllers: [
'Media',
'Articles'
],
launch : function(){
Ext.create('MonkTouch.view.Viewport');
}
});


- Viewport.js

Ext.define('MonkTouch.view.Viewport',{
extend: 'Ext.TabPanel',
config: {
fullscreen:true,
activeItem:0,
tabBarPosition:'bottom',
tabBar:{
layout:{
pack:'center',
align:'center'
},
scrollable:{
direction:'horizontal',
indecators:false
}
},
items:[
{
title : 'Media',
iconCls : 'action',
xtype : 'medialist'
},
{
title : 'Articles',
iconCls : 'organize',
xtype : 'articlelist'
}
]
}
});


- media.js //controller

Ext.define("MonkTouch.controller.Media",{
extend: 'Ext.app.Controller',
config:{
fullscreen: true,
layout:{
type:'card',
align:'stretch'
}
},
views : ['Media'],
models : ['Media'],
stores : ['Media'],
init : function(){
this.control({
'Media' : {
itemtap : this.onItemTap,
destroy : this.onViewDestroy
}
});
},
onItemTap : function(list, index){
console.log(list);
console.log(index);
},
onViewDestroy : function(){}
});


-media.js //view

Ext.define('MonkTouch.view.Media',{
extend : 'Ext.Panel',
xtype : 'medialist',
defaults: {
styleHtmlContent: true
},
models : ['Media'],
stores : ['Media'],
config: {
items:[
{
xtype : 'list',
title : 'Media List',
store : 'Media',
itemTpl : '{title}'
},
{
xtype : 'titlebar',
title : 'Media',
docked : 'top',
align : 'center'
}]
}
});

- media.js //store


Ext.define('MonkTouch.store.Media',{
extend: 'Ext.data.Store',
model: 'MonkTouch.model.Media',

autoLoad: true,
root:{},
proxy:{
type:'ajax',
url:'/lib/mk-modules/media.php',
reader:{
type:'json',
root:'items'
}
}
});

mitchellsimoens
14 Dec 2011, 12:54 PM
You store does have data in it? If you inspect the DOM, do you see a lot of empty divs?

arandlett
14 Dec 2011, 1:01 PM
I have a local php file which returns the JSON which I confirm is working, but the list never generates after that data is received.

Yes there is empty divs.

arandlett
14 Dec 2011, 1:05 PM
As I inspected it more there is content in the list items however it is not visible.

mitchellsimoens
14 Dec 2011, 1:06 PM
Try putting layout : 'fit' in the config Object of your MonkTouch.view.Media class. Your list is wanting a height.

arandlett
14 Dec 2011, 1:23 PM
Before you posted back the first time I had changed my app.js to this:

Ext.Loader.setConfig({
enabled:true,
paths:{
MonkTouch: 'app'
}
});
Ext.require(['MonkTouch.store.Media']);
Ext.application({
name: 'MonkTouch',
appFolder: 'app',
autoCreateViewport : true,
controllers: [
'Media',
'Articles'
],
stores : ['Media'],
models : ['Media'],
launch : function(){
Ext.create('MonkTouch.view.Viewport');
}
});


This change allowed the items to render in but not be visible. However if I reverted back to what I originally posted there were no items at all. In addition leaving the configuration like this and adding layout:fit to the MonkTouch.view.Media file did not make the list items visible.

mitchellsimoens
14 Dec 2011, 1:29 PM
So when you inspected the DOM you kept going down till you saw a bunch of the same looking divs? And they had text within them that would show the list is getting populated from the store?

And your MonkTouch.view.Media class looks like this:


Ext.define('MonkTouch.view.Media', {
extend : 'Ext.Panel',
xtype : 'medialist',

models : ['Media'],
stores : ['Media'],

config: {
layout : 'fit',
items:[
{
xtype : 'list',
title : 'Media List',
store : 'Media',
itemTpl : '{title}'
},
{
xtype : 'titlebar',
title : 'Media',
docked : 'top',
align : 'center'
}]
}
});

arandlett
14 Dec 2011, 2:17 PM
I had layout:fit in the wrong place when I added it to the view config object the items showed up. However the list items only showed with my app.js file changed to what I have below not like I had originally posted? Why is that?


Ext.Loader.setConfig({
enabled:true,
paths:{
MonkTouch: 'app'
}
});


Ext.require(['MonkTouch.store.Media']);
Ext.application({
name: 'MonkTouch',
appFolder: 'app',
autoCreateViewport : true,
controllers: [
'Media',
'Articles'
],
stores : ['Media'],
models : ['Media'],
launch : function(){
Ext.create('MonkTouch.view.Viewport');
}
});

arandlett
15 Dec 2011, 7:52 AM
From most examples I have seen shouldn't I be able to call

models: ['Media'],
stores : ['Media']
in the controller instead of the app.js file?

Why would I need the require:['MonkTouch.store.Media'] in the app.js file as well to get the list to work?

mitchellsimoens
15 Dec 2011, 8:25 AM
I put mine in the controller not app.js

I created a simple MVC app using PR3 that you can check out:

http://www.sencha.com/forum/showthread.php?162016-Simple-MVC-example

arandlett
15 Dec 2011, 8:37 AM
I tried that and the list wouldn't show up at all. I had saw your example so that is why i am confused.

mitchellsimoens
15 Dec 2011, 8:39 AM
I tried that and the list wouldn't show up at all. I had saw your example so that is why i am confused.

Ah... I think I know. I think its a racing issue since you are using storeId and then on your list you are defining the store as a string.

arandlett
15 Dec 2011, 9:17 AM
I went to use a more generic view for the list as you did and called the store within that. That worked. Thanks for the assistance! Curious why is using class as you did instead of calling id better?

mitchellsimoens
15 Dec 2011, 9:21 AM
I went to use a more generic view for the list as you did and called the store within that. That worked. Thanks for the assistance! Curious why is using class as you did instead of calling id better?

I just saw a commit that may change this as using the string like that *should* work and not overriding the constructor would be a better way if you want to have a global store be used.