Problem with a basic application (viewport view and autoCreateViewport config) [Archive]

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