Getting List To Render

[arandlett]

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]

You store does have data in it? If you inspect the DOM, do you see a lot of empty divs?

[arandlett]

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]

As I inspected it more there is content in the list items however it is not visible.

[mitchellsimoens]

Try putting layout : 'fit' in the config Object of your MonkTouch.view.Media class. Your list is wanting a height.

[arandlett]

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]

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]

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]

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]

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]

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]

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]

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]

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.