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
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 try migrate a developement environment to production with SDK Sencha tool.
But the proccess of building exclude of the "app-all.js" all models and stores defined in my App folder.
Only loads views and controllers. Any ideas why does this happen ?
Regards !.
Edit form more info:
For example mi cocina.js works as an app.js:
Ext.Loader.setConfig({
enabled : true,
paths: {
Ext: 'vendor/ext/src',
My: 'app'
}
});
Ext.application({
name: 'Alnitak',
appFolder: 'app',
controllers: ['Env','Cocina'],
launch: function(){
...
}
});
An the cocina controller:
Ext.define('Alnitak.controller.Cocina', {
extend: 'Ext.app.Controller',
store: [
'PlatosArmados',
'Niveles',
'Submenues',
'AlumnosPlato'
],
model: [
'PlatoArmado',
'Nivel',
'Submenu',
'AlumnoPlato'
],
views: [
'grid.PlatoArmado',
'grid.AlumnoPlato'
],
init: function() { ...}
});
What i have modify ?
Assuming you mean Sencha Command and not SDK, you have to change a few things:
Specify all your js paths in .sencha/app/sencha.cfg (parent folder is enough)
Build a new template app (http://docs.sencha.com/cmd/) and follow the pattern, not the Sencha Architect pattern for the Loader you use above. Sencha Cmd has its own way of handling javascript loading. You would not need to specify the paths with Ext.Loader.setConfig()
If you want to use the Architect pattern though, here's the guide.
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.
Is there someone here who made a MVC application using EXTJS 4 BETA 3? and works fine??
please help me how?, ..
I have followed step by step here .. and #Abdel Olakara help
but there is still an error ... here my firebug
[Ext.Loader] Synchronously loading 'AM.controller.Users'; consider adding
Ext.require('AM.controller.Users') above Ext.onReady
[Ext.Loader] Synchronously loading 'AM.store.Users'; consider adding
Ext.require('AM.store.Users') above Ext.onReady
this.getView('Viewport') is null
When i read this at the forum ... there are still some bug with MVC guide ...
so, if you ever make it works.. how?
this is my Application.js :
Ext.Loader.setConfig({enabled:true});
Ext.create('Ext.app.Application', {
name: 'AM',
controllers: [
'Users'
],
views: [
'user.List'
],
launch: function() {
Ext.create('Ext.container.Viewport', {
layout: 'fit',
items: {
xtype: 'userlist'
}
});
}
});
i'm trying to learn MVC in Extjs...
sorry if my english bad..
Well, I think I should take back my words! I had some success after going through sencha blog. And finally, got my MVC "Skeleton" running!
Here is the working code:
Ext.Loader.setConfig({enabled:true});
Ext.create('Ext.app.Application', {
name: 'AM',
autoCreateViewport: false,
controllers: [],
launch: function() {
Ext.create('Ext.container.Viewport', {
layout: 'fit',
items: [
{
xtype: 'panel',
title: 'Users',
html : 'List of users will go here'
}
]
});
}
});
Please note that, the code is very minimal and have removed the common errors reported in forums and here. The next step would be to start playing with this code and add controllers, views etc onto it!
I will keep updating this answer going forward.
Update: The first two error mentioned are not actually errors. They are warnings and application works fine even if they display these warnings. The third error you mentioned is a stopper!
Solution to Viewport problem Here are two ways to solve it.
Use the autoCreateViewport: false, property and define your viewport (I see that you have defined your viewport in launch method)
Create a Viewport.js and save it in view folder. In this case, I felt my launch method empty and moved the viewport code to Viewport.js file. But I do get an error:
Uncaught TypeError: Cannot call method 'create' of null
I do use ExtJS 4.1.
In my code [Ext.Loader] Synchronously loading 'OOO.store.News'; consider adding
Ext.require('OOO.store.News') above Ext.onReady warning message was invoked if I place
stores: [
'News',
],
in my app/Application.js file instead of app/controller/OOO.js file.
So put stores:[], in controller file.