PDA

View Full Version : How to load my custom Viewport from app.js



mchourishi
6 May 2016, 4:22 AM
My server wont allow to create folders all I have is to create files, but autoCreateViewport : true searches for Viewport.js in view directory.

I tried autoCreateViewport to set it to false and then in launch function writing code for Viewport but that didnt helped though. The file loads but doesn't display anything.

From my html file I am calling app.js .

Below is my app.js code


Ext.ns('App');

Ext.Loader.setConfig({ enabled: true, disableCaching : true });
Ext.Loader.setPath('MyApp', 'app');
//Ext.require(['MyApp.view.Viewport']);

Ext.application({
name : 'MyApp',
autoCreateViewport : true,

controllers : [
'Navigation',
// 'Settings'
],

launch : function() {
if (Ext.isIE && Ext.ieVersion < 9) {
Ext.Msg.alert('Outdated browser detected', 'This sample only works in modern browsers (IE9+)');
}
}
});



And Viewport.js


Ext.define("MyApp.view.Viewport", {
extend : 'Ext.Viewport',
layout : 'border',
requires : [
//'MyApp.view.ResourceSchedule',
'MyApp.view.Gantt',
//'MyApp.view.ResourceList',
//'MyApp.view.ResourceHistogram',
//'MyApp.model.Resource'
],

initComponent : function() {

this.taskStore = new MyApp.store.TaskStore({
calendarManager : new Gnt.data.CalendarManager({ calendarClass : 'Gnt.data.calendar.BusinessTime' })
});

var cm = new Gnt.data.CrudManager({
autoLoad : true,
taskStore : this.taskStore,
transport : {
load : {
url : 'data.js'
},
sync : {
url : 'TODO'
}
}
});

this.gantt = new MyApp.view.Gantt({
id : 'ganttchart',
crudManager : cm,
startDate : new Date(2010, 0, 11)
});

Ext.apply(this, {
items : [
{
xtype : 'navigation',
id : 'navigation'
},
{
xtype : 'container',
itemId : 'maincontainer',
region : 'center',
layout : { type : 'vbox', align : 'stretch' },
items : this.gantt
},
/* {
xtype : 'settings'
}*/
]
});

this.callParent(arguments);
}
});

mitchellsimoens
6 May 2016, 4:32 AM
The issue is with Ext.Loader, Fiddle throws all the code inline within a single <script> (they aren't real files) so the order isn't based on what is being required but more usually how it shows in the file tree in the UI. So if Viewport.js comes after app.js (which it shouldn't) the Ext JS doesn't yet know about Viewport.js code and will then attempt to load the file.

This is something that is being planned for Fiddle 2 to fix the order of the code.