How does one enable the loader when using ext.application?
Ext.application({
name: 'App',
launch: function () {
Ext.Loader.setConfig({enabled:true});
Ext.Loader.setPath('App','js/App');
Ext.create('App.view.SomeView');//this blows up in my face
}
});
This is what I'm currently doing, and its trying to open:
./App/view/SomeView
instead of
./js/App/view/SomeView
you can add appFolder like this:
Ext.Loader.setConfig({enabled:true});
Ext.application({
name: 'App',
appFolder: 'js/App', // maybe '/js/App'
launch: function () {
Ext.create('App.view.SomeView');
}
});
Maybe your code would work too, but you have to move your loader config out of launch() method because it fires after application is created and I guess that causes your problem.
Related
According to the docs, when building universal app with sencha cmd, one can set the app's main view using either mainView config or within the launch() method of Ext.app.Application (using setMainView method) like this:
Ext.application({
name: 'Fiddle',
launch: function () {
var app = this.getApplication();
//app.setMainView('MyApp.view.main.Main');
//app.setMainView({xtype: 'app-main'});
},
mainView: 'MyApp.view.main.Main'
});
...
A fiddle is available here: Sencha Fiddle
And, it works with the classic toolkit, but when using modern one, the things can get wrong.
If you are using the mainView config - it works as expected (this is by default when you execute sencha generate app).
If you are using the setMainView() method, however, it depends of the parameter type you pass:
you will get a blank screen when you pass the full class name of the view as string ('MyApp.view.main.Main'). The view is created (reachable via Ext.ComponentQuery.query('app-main') within the console), but is invisible
you will get an error when you pass a config object for the view ({xtype: 'app-main'})
You can try it in the Fiddle above by commenting/uncommenting rows 7,8,11 (make sure a modern toolkit is selected before hitting Run).
Any idea how to resolve this, pls?
The ability to use the launch method logic is vital - for example if you are trying to implement an app with login functionality.
If modern add the main view to the viewport otherwise just set the main view
Ext.application({
name: 'Fiddle',
launch: function () {
if (Ext.isModern) {
Ext.Viewport.add([{
xtype: 'app-main'
}]);
} else {
var app = this.getApplication();
app.setMainView('MyApp.view.main.Main');
}
},
});
Ext.define('MyApp.view.main.Main', {
extend: 'Ext.panel.Panel',
xtype: 'app-main',
title: 'Panel Title',
html: 'panel body data...'
});
I am trying to clean up and restructure my javascript in my app, but once I change it it stops working. I am using ext scheduler in my app so that might be the problem. Here is how I want to set up
/ext/scheduler-3.0.0(all core code for schedule components go here)
/ext-all.js
/myscheduler(custom code for schedule components go here)
--/global/
----/view/
------globalscheduling.js
/model/
And This is how I start my app
ExtLatest.Loader.setConfig({enabled: true});
ExtLatest.define("scheduler.Application", {
extend: "Ext.app.Application",
requires: ["myscheduler.global.view.globalschedulegrid"],
name: "scheduler",
appFolder: "",
launch: function () {
getData()
}
});
However extjs still trying to go to https://c.na17.visual.force.com/apex/myscheduler/global/view/globalschedulegrid.js to find my view file what I doing wrong here?
Ext.Loader.setPath('myscheduler.global.view.globalschedulegrid', 'path to my scheduler');
OR
Ext.Loader.setConfig({
paths: {
'myscheduler': 'myscheduler',
}
});
Link to 5.0 Doc (Not sure which version you are using but it's the same)
5.1 as noted in the title. I didn't have to set the path for globalschedulegrid. Just specifying the paths in setConfig like this
ExtLatest.Loader.setConfig({enabled: true,
paths: {
'scheduler': "{!URLFOR($Resource.ConnectWeb, 'scripts/libs/scheduler')}"
}
});
I'm using this tutorial to create a slide navigation using sencha touch
http://innofied.com/simplest-slide-navigation-with-sencha-touch-2-2/
When implementing this in ibm worklight i dont know how to use app.js in worklight
THE app.js :
Ext.application({
name: 'SlideNav',
requires: [
'Ext.MessageBox'
],
views: [
'Viewport',
'Main',
'Navigation'
],
controllers : ['App'],
icon: {
'57': 'resources/icons/Icon.png',
'72': 'resources/icons/Icon~ipad.png',
'114': 'resources/icons/Icon#2x.png',
'144': 'resources/icons/Icon~ipad#2x.png'
},
isIconPrecomposed: true,
startupImage: {
'320x460': 'resources/startup/320x460.jpg',
'640x920': 'resources/startup/640x920.png',
'768x1004': 'resources/startup/768x1004.png',
'748x1024': 'resources/startup/748x1024.png',
'1536x2008': 'resources/startup/1536x2008.png',
'1496x2048': 'resources/startup/1496x2048.png'
},
launch: function() {
// Destroy the #appLoadingIndicator element
Ext.fly('appLoadingIndicator').destroy();
// Initialize the main view
Ext.Viewport.add(Ext.create('SlideNav.view.Viewport'));
},
onUpdated: function() {
Ext.Msg.confirm(
"Application Update",
"This application has just successfully been updated to the latest version. Reload now?",
function(buttonId) {
if (buttonId === 'yes') {
window.location.reload();
}
}
);
}
});
On worklight we have one main file that we use to initiate the app :
main.js:
window.$ = WLJQ;
function wlCommonInit(){
initializeSenchaApp();
}
function initializeSenchaApp(){
WL.Logger.debug("Initializing Sencha Touch code");
Ext.application({
name: 'Ersal',
views: ['Login','Home'],
controllers: ['Login'],
launch: function () {
Ext.Viewport.add([
{ xtype: 'loginview' },
{ xtype: 'mainmenuview' }
]);
//Ext.create('Ersal.view.Login');
}
});
}
It's not necessary to work with the app.js. You can only edit your main.js and add your medels, controllers and views.
Here is the code:
function wlCommonInit(){
initializeSenchaApp();
}
function initializeSenchaApp(){
WL.Logger.debug("Initializing Sencha Touch code");
Ext.application({
name: 'YouApp',
requires: ['Ext.Menu', 'YouApp.components.MenuButton'],
views: ['Home'],
models: ['Movie'],
controllers: ['Home'],
launch: function () {
Ext.getBody().removeCls('loading');
Ext.Viewport.add([
{ xtype: 'mainmenuview' },
]);
}
});
}
Wish it helps
It is not necessarily to create a separate app.js file, it is sufficient to use an existing main.js file.
If you want to include sencha plug-in in your application you have to set the loader path in main.js file as like this:
Ext.Loader.setPath({
'Ext.ux':'ux'
});
If you want to use the content of App.js in main.js, you have to load app.js before main.js in your HTML file, so make sure the ordering is correct. If it says that Ext is undefined, it probably is because you have the <script> tag that loads main.js before the one for App.js, so if that is the case, switch them around.
I wanna implement the Name Space concept in my JavaScript code, I am using ExtJS, but I don't know where to start, anyone could help me? The site example is very short.
Here is a good sample How do I declare a namespace in JavaScript?
and here is too https://developer.mozilla.org/en-US/docs/XUL/School_tutorial/JavaScript_Object_Management
Actually in ExtJS4 the App name is your name space. So for example if you define your app this way:
Ext.application({
name: 'MyApp',
appFolder: 'app',
autoCreateViewport: true,
controllers: [
'MyController'
],
launch: function() {
console.log('hello');
// This is fired as soon as the page is ready
}
});
then all of your components you define need to be namespaced with MyApp. So a controller becomes MyApp.controller.MyController and a view becomes MyApp.view.InboxGrid
In the 4.0.2a docs: http://docs.sencha.com/ext-js/4-0/#/...pp.Application
I see this:
Ext.application({
name: 'MyApp',
launch: function() {
Ext.create('Ext.container.Viewport', {
items: {
html: 'My App'
}
});
}
});
"This does several things. First it creates a global variable called 'MyApp' - all of your Application's classes (such as its Models, Views and Controllers) will reside under this single namespace, which drastically lowers the chances of colliding global variables."
When I run this code, I do not see a global variable called MyApp... does anybody else have this problem?
Here is my entire app (in a single HTML page):
<!DOCTYPE html>
<html>
<head>
<title>Testing ExtJS 4</title>
<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css" />
<script type="text/javascript" src="extjs/ext-all-debug-w-comments.js"></script>
<script type="text/javascript">
Ext.application({
name: 'MyApp',
launch: function() {
Ext.create('Ext.container.Viewport', {
items: {
html: 'My App'
}
});
}
});
Ext.onReady(function() {
alert(typeof MyApp);
});
</script>
</head>
<body></body>
</html>
it's not working because as the api states (guide/mvc application architecture):
"... All Ext JS 4 applications should only use a single global variable, with all of the application's classes nested inside it...".
If you try with this code:
Ext.application({
name: 'MyApp',
appFolder: '/app',
autoCreateViewport: true,
launch: function() {
console.log(MyApp);
}
});
you will see that the global variable exists. You don't need to access the application from any other place than the application itself
I get the same error, and here are what I found.
In index.html:
Ext.Loader.setConfig({enabled:true});
Ext.application({
name: 'MyApp',
controllers: ['Test'],
launch: function() {
Ext.create('Ext.container.Viewport', {
items: {
html: 'My App'
}
});
}
});
Ext.onReady(function() {
alert(typeof MyApp);
});
Create a small controller: app/controller/Test.js (/app has the same parent folder as /extjs)
Ext.define('MyApp.controller.Test', {
extend: 'Ext.app.Controller',
init: function() {
console.log('The controller was initialised');
}
});
When running, in Firebug you will see the MyApp global variable. However, a messagebox of 'undefined' still appeared for alert statement.
IMHO MyApp is an object to "maintains references to all of the models, views and controllers used by the app". Maybe extjs use some type of class "Dynamic loading"; so it will not create that global variable until there is something (controllers, views, models) to contain inside (I am not sure of this). In this case the variable must be created to contain the controller Test. However, I cannot explain the 'undefined' message for alert. Maybe at that time the Ext object is ready but "Dynamic loading" to create the viewport and the variable MyApp is not finished (not sure).
Hope this help.