PDA

View Full Version : MVC No output in DataView



Ooypunk
21 Oct 2011, 10:55 PM
The grand plan: in this application I am building (MVC), I have several tab-panels, and in one of those tabs I want to make an Explorer clone. So that tab is divided in two columns: 1 for the directories, 1 for the contents of a selected directory. The first column is a Tree, and is working now.

Now, for the second column: I looked in the examples, and I thought DataView would be the solution. So I looked it up in the manual, and I saw there an example that I tried. That didn't work right, because it makes the application load ALL ExtJS files, instead of only what is needed, like it does now (5 files or so).

Anyway, that isn't my main concern now. First, the DataView panel looks funny: it's all blue. Not like a Panel should look, which is white, with blue borders and a bar at the top for the title.

Second: the store isn't called. I have tried autoLoad, but that only makes the store load, it doesn't make the panel display the data.

Here's the code for the view

Ext.define('TB.view.bestand.Centre' ,{
extend: 'Ext.view.View',
alias : 'widget.bestandCentre',

store: 'Bestanden',

tpl: [
'<tpl for=".">',
'<div class="thumb-wrap" id="{name}">',
'<div class="thumb"><img src="{url}" title="{name}"></div>',
'<span class="x-editable">{name}</span></div>',
'</tpl>',
'<div class="x-clear"></div>'
],

multiSelect: true,
trackOver: true,
overItemCls: 'x-item-over',
itemSelector: 'div.thumb-wrap',
emptyText: 'No data to display',
});

The store:

Ext.define('TB.store.Bestanden', {
extend: 'Ext.data.Store',

model: 'TB.model.Bestand',

proxy: {
type : 'ajax',
url : 'ajax/bestanden/getdircontent.php'
},
reader: {
type: 'json',
root: 'bestanden'
},

folderSort: true,

sorters: [{
property: 'text',
direction: 'ASC'
}]
});

And the controller:

Ext.define('TB.controller.Bestanden_Centre', {
extend: 'Ext.app.Controller',

stores: ['Bestanden'],

models: ['Bestand'],

views: [
'bestand.Centre'
]

});

Ooypunk
30 Oct 2011, 12:57 PM
*bump*

twaindev
30 Oct 2011, 3:07 PM
You'll have to add a storeId (http://docs.sencha.com/ext-js/4-0/#!/api/Ext.data.AbstractStore-cfg-storeId) to the store's definition otherwise the store isn't registered with the store manager, so try adding this:


...
storeId: 'Bestanden',
...

BTW Did you notice there is an extra comma in this piece of code?


...
itemSelector: 'div.thumb-wrap',
emptyText: 'No data to display', <--- extra comma
});

Ooypunk
31 Oct 2011, 3:27 PM
Tried it, but it didn't work. :(

twaindev
31 Oct 2011, 3:38 PM
Based on your code above I've put together the example below that does load the store and show data.


Ext.onReady(function() {

Ext.define('TB.model.Bestand', {
extend: 'Ext.data.Model',

fields: ['url', 'name']
});

Ext.define('TB.store.Bestanden', {
extend: 'Ext.data.Store',

model: 'TB.model.Bestand',

storeId: 'Bestanden',

data: [{ url:'img/item.png',name:'Test 1'},{ url:'img/item.png',name:'Test 2'},{ url:'img/item.png',name:'Test 3'}],

autoLoad: true,

folderSort: true,

sorters: [
{
property: 'text',
direction: 'ASC'
}
]
}).create();

Ext.define('TB.view.bestand.Centre', {
extend: 'Ext.view.View',
alias : 'widget.bestandCentre',

store: 'Bestanden',

tpl: [
'<tpl for=".">',
'<div class="thumb-wrap" id="{name}">',
'<div class="thumb"><img src="{url}" title="{name}"></div>',
'<span class="x-editable">{name}</span></div>',
'</tpl>',
'<div class="x-clear"></div>'
],

multiSelect: true,
trackOver: true,
overItemCls: 'x-item-over',
itemSelector: 'div.thumb-wrap',
emptyText: 'No data to display',
title: 'Test'
});

var x = Ext.widget('bestandCentre', {
renderTo: Ext.getBody()
}).center();
});

If this doesn't help it is best if you post a runnable example for us to test.

JambaFun
31 Oct 2011, 3:49 PM
Hey twaindev,

Just a quick note! You don't need to set a storeId if you add the store to your controller (like Ooypunk did). Any store added to a loaded controller is automatically added to the StoreManager and can thus be referenced by it's name from views etc. Read here: http://docs.sencha.com/ext-js/4-0/#!/guide/mvc_pt2

twaindev
31 Oct 2011, 4:02 PM
My bad. You're right. I needed the storeId in my test, because it doesn't use MVC.

Necros
3 Jan 2012, 4:03 AM
Where do you call xtype: 'bestandCentre'?

Ooypunk
3 Jan 2012, 8:58 AM
In this view:

Ext.define('TB.view.bestand.Main' ,{
extend : 'Ext.panel.Panel',
alias : 'widget.bestandMain',

layout : 'border',
title : 'Bestanden',
iconCls : 'bestanden',
items : [
{
region : 'west',
id : 'bestandenTree',
title : 'Mappen',
split : true,
width : 200,
minSize : 175,
maxSize : 400,
xtype : 'bestandLeft'
},
{
region : 'center',
id : 'bestandenMain',
title : 'Inhoud',
xtype : 'bestandCentre'
}
]

});
, which is called in the Viewport:

Ext.define('TB.view.Viewport', {
extend: 'Ext.container.Viewport',

loadMask: true,

layout: {
type : 'hbox',
pack : 'center',
align : 'top'
},
items: [
{
width : 800,
height : 500,
// minHeight: 400,
// maxHeight: 400,
layout: 'fit',
items : [{
xtype: 'tabpanel',
items: [
{
xtype: 'gebruikerList'
},
{
xtype: 'lidList'
},
{
title: 'Ambachten',
html: 'div_ambachten',
iconCls: 'ambachten'
},
{
title: 'Media',
html: 'div_media',
iconCls: 'media'
},
{
title: 'Links',
html: 'div_links',
iconCls: 'links'
},
{
title: 'Agenda',
html: 'Agenda',
iconCls: 'agenda'
},
{
xtype: 'bestandMain'
}
]
}]
}
]

});

el_chief
3 Jan 2012, 11:29 AM
Make sure you load the controller before the view.

Ext poops the bed if you try to load a view with a store before loading the controller

Ooypunk
3 Jan 2012, 11:31 AM
Make sure you load the controller before the view.

Ext poops the bed if you try to load a view with a store before loading the controllerHow can I find out?

Necros
3 Jan 2012, 1:03 PM
In your previous posts you wrote:


views: [ 'bestand.Centre' ]

But also you have
xtype: 'bestandMain', etc


Why did not you wrote
bestandMain and bestandLeft

in your views config option?

Can you give a link to your app?

Ooypunk
3 Jan 2012, 2:15 PM
In your previous posts you wrote:


views: [ 'bestand.Centre' ]

But also you have
xtype: 'bestandMain', etc



Why did not you wrote
bestandMain and bestandLeft


in your views config option?

Can you give a link to your app?Because Main contains Left and Centre panels?
I'm not sure I fully understand your question. :s

And no, there is no such link; the application only lives locally.

Necros
3 Jan 2012, 2:20 PM
Can you zip it and post here?

Btw, mb this example will help you: http://techknowfreak.com/demo/om/index.htm

Ooypunk
4 Jan 2012, 11:47 AM
Let's see if this works:
30453

To keep it small, I stripped all that I could.
Hope this helps.