PDA

View Full Version : Problem with a basic application (viewport view and autoCreateViewport config)



kimimsc
3 Dec 2011, 7:40 AM
Hi,

I am trying to build a basic ext4 application. When i put the whole code in the launch element of Ext.Application, everything is working fine.

But when i tried to put the code in viewport.js and to use the autoCreateViewport config, i've got a blank page.

Here is the code:

app.js


Ext.Loader.setConfig({
enabled:true
});

Ext.application({
name: 'EC',

appFolder: 'js_app',
autoCreateViewport: true
});


Viewport.js


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

//requires: ['EC.view.AccordionNavigation'],

layout: 'border',

initComponent: function() {
Ext.apply(this, {
items: [{
region: 'north',
html: '',
autoHeight: true,
border: false
},{
region: 'west',
collapsible: true,
title: 'Navigation',
split: true,
width: 200,
xtype: 'panel',
layout: 'accordion',
items: [{
title: 'Panel 1',
html: 'Panel content!'
},{
title: 'Panel 2',
html: 'Panel content!'
},{
title: 'Panel 3',
html: 'Panel content!'
}]
},{
region: 'east',
title: 'East Panel',
collapsible: true,
split: true,
width: 200
},{
region: 'center',
xtype: 'tabpanel',
enableTabScroll:true,
activeTab: 0,
items: [{
title: 'Accueil',
iconCls: 'home'
},{
title: 'Tableau de bord',
iconCls: 'dashboard'
}]
}]
});

this.callParent();
}
});



Merci d'avance. ;)

karpatyx@ya.ru
3 Dec 2011, 4:05 PM
Did you put your viewport file to js_app/view/Viewport.js? This is the folder/file where ExtJS will look for it.

kimimsc
4 Dec 2011, 12:40 AM
Yes i did.

kimimsc
5 Dec 2011, 10:00 AM
Any ideas?

karpatyx@ya.ru
6 Dec 2011, 2:33 AM
Any ideas?
Yes. The problem is not in loading viewport itself but in loading additional xtypes - layouts and tabpanels.
Please work on your references.

See console to check real reasons! I used chrome's standard developer's tools and they clearly showed everything.

I commented some items in your Viewport.js and it could be shown for me:


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

//requires: ['EC.view.AccordionNavigation'],


// layout: 'border',


initComponent: function() {
Ext.apply(this, {
items: [{
region: 'north',
html: '',
autoHeight: true,
border: false
},{
region: 'west',
collapsible: true,
title: 'Navigation',
split: true,
width: 200,
xtype: 'panel',
// layout: 'accordion',
items: [{
title: 'Panel 1',
html: 'Panel content!'
},{
title: 'Panel 2',
html: 'Panel content!'
},{
title: 'Panel 3',
html: 'Panel content!'
}]
},{
region: 'east',
title: 'East Panel',
collapsible: true,
split: true,
width: 200
},{
region: 'center',
xtype: 'button',
}]
});


this.callParent();
}
});

kimimsc
6 Dec 2011, 11:20 AM
Actually that wasn't the problem. It was because of a 'wrong' path to the js_app/ directory.
Zend was looking for the file in [...]/public/js_app/view/ instead of [...]/js_app/view.

Strangley firebug wasn't showing any warnings whereas the chrome dev tool was.
I had not thought of trying it on chrome.

Thank you anyway for your help