I have question about the best way to implement correctly my code.
I have this in app.js
/*** EXT LOADER ENABLE & PATH ***/
Ext.Loader.setConfig(
{
enabled : true,
application : 'MyApp'
});
Ext.log('--- APPLICATION --- Loading Elasticsearch configuration');
Ext.define('MyApp.configuration.elastic',
{
singleton : true,
...
loadElasticConfiguration: function()
{
// ExtDirect or ajax call in order to set configuration
}
});
MyApp.configuration.elastic.loadElasticConfiguration();
Ext.onReady(function()
{});
Ext.create('MyApp.Application');
This is working well but I do not like to have lots of code is app.js.
Is there a way to "export" the "MyApp.configuration.elastic" code to a specific file and call it. I have tried via Ext.require but others files which needs this config are loaded before ...
If anyone has a clue.
Have a good day !
If you want to use Ext.require you will need to create your application within the Ext.onReady listener:
Ext.require('MyApp.configuration.elastic');
Ext.onReady(function(){
Ext.create('MyApp.Application');
});
Alternatively, this should also work as it will make your application's main class require the config class:
Ext.define('MyApp.Application', {
requires: ['MyApp.configuration.elastic'],
// ...
});
Related
i would like to consolidate the url base for my RESTFul API in a single place in my app built with Sencha Touch. Where is the best place i can put it?
There is a obvious option to store it in localStorage, but is this a good practice ?
When I want to support MVC structure I create file Config.js and put it in application tree in the following place:
in Config.js:
Ext.define('MyApp.config.Config', {
singleton: true,
config: { /** here you can put any objects of your choice that will be accessible globally**/
baseURL : Ext.os.is.Android ? 'http://live_url_here.com' : 'http://localhost/testing_locally',
topBannerUrl : 'http://some_url/banner.png',
anotherGlobalParam : true
},
constructor: function(config) {
this.initConfig(config);
return this;
}
});
Those config parameters will be visible in the whole application.
You may get them:
MyApp.config.Config.getBaseImgURL(); /* returns 'http://some_url/banner.png' */
MyApp.config.Config.getAnotherGlobalParam(); /* returns true */
or set:
MyApp.config.Config.setBaseImgURL('new_url');
MyApp.config.Config.setAnotherGlobalParam(false);
This solution may be especially handy when your project requires many configuration parameters.
I hope it will work for you as well.
Always keep your url base in a seperate file like util.js(utility.js). Your file path should be app > util > Util.js. You can keep your common functions like animateItem, showLoading/hideLoading, custom functions, etc over here so that you can use the same function throughout the app. To load this file in your app do this:
app.js
Ext.application({
name: 'HelloWorld',
requires: [
'HelloWorld.util.Util'
],
view: []
})
For best practices in sencha touch you can see this: Sencha Touch Blog
+1 for Anubis recommendation.
Something like this:
Ext.define('MyApp.Const', {
statics:{
url1:'....',
url2:'....'
}
})
Then you can access your urls with:
MyApp.Const.url1
Of course you must require Const class but you don't need to instantiate it.
I'm trying to create a search form view based on the following example of Sencha :
http://try.sencha.com/touch/2.0.0/examples/list-search/viewer.html
I made a few changes just not to create the view by code but export it in a view.
To set up the store, i use this in the config :
store: Preconisations.app.getStoreAdherents(),
where Preconisations is my project name and getStoreAdherents the function set in the app.js:
getStoreAdherents: function () {
if (!this.storeAdherents) {
var gestionAdherent = new DAL_Adherent(); // custom classes
var tc = gestionAdherent.GetAll(); // and functions which returns a json string with data
this.storeAdherents = Ext.create('Ext.data.Store', {
model: "Preconisations.model.ADHERENT",
data: tc,
sorters: 'nom',
groupField: 'code'
});
}
return this.storeAdherents;
}
Now, everything works fine but when i make the testing or the production build, i've got this error :
Uncaught TypeError: Cannot call method 'getStoreAdherents' of undefined
at the store definition...
Maybe, there's a better way to set up the store by code but i can't understand why it's working in developpement and not with the production or testing build...
Is anyone had this problem ? Or how do you set up dynamically a store with a function ?
Thanks... I'm banging my head on the wall on this one...
It is clear that you have a build dependency issue in Ext Build. In the code snippet posted, there is a chance that you missed to add "Preconisations.model.ADHERENT" to a class path. If so, please add the following to your app.js
requires: ["Preconisations.model.ADHERENT"]
If the issue persist, Please do the following diagnostics :
Run your app (development mode) in Google Chrome with the Console open; Look for warnings that states a particular class is being synchronously loaded and add requires statement for those classes.
In fact i think there's a bug in setting a store dynamically in the config.
I found this workaround which work in developpement and in build production :
I don't specify a store : xxxx in the view.
Instead, in a controller i put this code in the launch function :
this.getMainView().setStore(this.getStoreAdherents());
where getMainView is a reference to my view.
That's all !
I'm trying to get a basic custom property editor sorted out for an Umbraco 7.0.1 solution but it looks like I've missed something somewhere because Angular can't recognise the controller function being called. I need another pair of eyes over this.
I've pretty much copied and pasted the example provided on Umbraco's site to start with and was intending to flesh it out afterwards. Here's what I have so far:
package.manifest
{
//you can define multiple editors
propertyEditors: [
{
/*this must be a unique alias*/
alias: "AcuIT.Multidate",
/*the name*/
name: "Multidate Picker",
/*the html file we will load for the editor*/
editor: {
view: "~/App_Plugins/Multidate/multidate.html"
}
}
]
,
//array of files we want to inject into the application on app_start
javascript: [
'~/App_Plugins/Multidate/multidate.controller.js'
]
}
multidate.html
<div ng-controller="AcuIT.MultidateController">
<textarea ng-model="model.value"></textarea>
</div>
multidate.controller.js
angular.module("umbraco")
.controller("AcuIT.MultidateController",
function () {
alert("The controller has landed");
});
Finally, here is the error I'm seeing in the browser console:
Error: Argument 'AcuIT.MultidateController' is not a function, got
undefined
at Error ()
It's probably a name or a path I've missed somewhere but I can't spot it yet. Any pointers appreciated.
Restart app pool and refresh browser to include the files from the manifest
I'm using the Sencha Command Line 3 tools with a newly generated Sencha Touch 2 application.
Assuming my app.js file looks like this:
Ext.application({
name: "CA",
event_code: "test123",
launch: function() {
console.log("application launched!");
}
});
My views and object stores depend on generating a URL based on CA.app.event_code equaling "test123";
During development in the browser, everything works fine, CA.app returns the variables I need.
When I compile my application with sencha app build and try to run the minified version in the browser, I get an error like this:
Error evaluating http://localhost:8888/app.js with message: TypeError: Cannot read property 'event_code' of undefined localhost:11
I'm not entirely sure why this is happening or how I can fix it. I am open to any and all ideas or suggestions, any pointers in the right direction will be greatly appreciated.
Ran into the exact same issue. You have no access to the namespaced app within the views... really sucks that they let you in development and not when built. Anyway, I got around it by adding a static helper class and using that all over my app:
In /app/util/Helper.js:
Ext.define('MyApp.util.Helper', {
singleton: true,
alternateClassName: 'Helper',
config: {
foo: "bar",
bat: "baz"
},
staticFunction: function() {
// whatever you need to do...
}
});
Then in your view or controller:
Ext.define('MyApp.view.SomeView', {
...
requires: ['Events.util.Helper'],
...
someViewFunction: function() {
var someValue = Helper.staticFunction();
// and you can use Helper.foo or Helper.bat in here
}
});
For reference, here's some documentation on Sencha Singletons. And one important note: make sure that your Helper singleton is in it's own file! If it's small, you may be inclined to put it at the bottom of your app.js, and things will work at first, and the build process will work, but the code will not. Don't worry, the build process puts all of your JS code in one big, compressed file anyway.
I used the command sencha create jsb -a http://myserver/myapp/app.html -p apps.jsb3 -v
This created the file apps.jsb3, and when i opened this file, it contained all the definitions for Models and Stores (but, no controllers).
Then i followed with the command ;
sencha build -p apps.jsb3 -v -d . and this created 2 files. app.all.js which is a compressed form of the model, store and the app.js (and it also includes the definition of the controllers of the application as found in the app.js)
ex : ....controllers:["Person","Pers... likewise
and then all-classes.js has all the models, and stores (and again no controllers)
Then i included the following to my app.html file
<script type="text/javascript" src="extjs/ext.js"></script>
<script type="text/javascript" src="app-all.js"></script>
Finally, i copied the app-all.js, all-classes.js, app.html to another folder in the server. and this folder is called SERVERFOLDER2.
Now, when i type http://myserver/SERVERFOLDER2/app.html it says that "NetworkError: 404 Not Found - http://myserver/SERVERFOLDER2/app/controller/Person.js?_dc=1347636548640".
Why is this, and how can i resolve this ?
UPDATE APP.JS
Ext.Loader.setConfig({
enabled: true
});
Ext.require('Ext.container.Viewport' );
Ext.application({
requires: [
'MyApp.Names',
'Ext.window.MessageBox'
],
models: [
'PersonModel',
'SchoolModel'
],
stores: [
'PersonStore',
'SchoolStore' ,
'GenderStore
],
views: [
'UserPanel',
'SchoolViewPanel',
'UpdateSchoolWindow'
],
controllers: [
'SchoolController',
'PersonController',
'UserActionController',
],
name: 'MyApp',
refs:
[{
ref: 'viewport',
selector: 'viewport'
}],
launch: function() {
Ext.create('Ext.container.Viewport', {
layout: 'card',
items: [
{
xtype: 'panel',
items: {
xtype: 'UserPanel'
}
}
]
});
},
userSuccess: function() {
var st = Ext.getStore('PersonStore');
st.on('load', this.onSuccess, this, {
single: true,
delay: 100
});
st.load();
},
onSuccess: function() {
this.getViewport().getLayout().setActiveItem(1);
}
});
The process you describe looks good to me.
The problem you should focus on is why the generated jsb3 file does't include the controller classes. All the steps that follow seem to work correctly, but the application does not fire up in the end because the packaging process does not include your controller class files.
Ext.Loader kicks in and tries to dynamically ('on demand') load the controller class file - the goal here is not to fix the path configuration for Ext.Loader to find the controller class, but rather to make sure the controller classes are included in the jsb3 file from step 1 in the first place.
I assume that your application starts up fine when launching it via http://myserver/myapp/app.html in the non-packaged state (with only ext-dev.js and no ext-all.js, app.all.js or whatsoever).
I further assume that you can observe messages on the console that say something along the lines of:
Synchronously loading 'app.controller.Person'. Consider adding Ext.require() above Ext.onReady
This means that your class dependencies are not configured correctly. The controller class is not picked up as dependency and therefore not pre-loaded before your application starts.
The packaging process (your first step) relies on the dependencies to generate the jsb3 file. It will not pick up dependencies loaded synchronously on demand.
Solution
The goal is to remove any synchronous on-demand loading when you start your application. If you are successful, the packaging process should be fixed as well.
As a quick workaround you could simply Ext.require your controller classes above your Ext.onReady or Ext.application call.
However, controller classes should be automatically added as dependency by the framework. If they are not, then either your configuration is faulty or there it is a bug in ExtJs.