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.
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 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'],
// ...
});
I'm struggling to get DeftJs working with Sencha Cmd. At first I suspected Cmd 4, but I've also tried with Cmd 3 with exactly the same result, so I reckon I'm just missing something.
I'm getting the error "Cannot set property 'instance' of undefined" when Ext.onReady() is being called. Ext.app.Application is not being defined when it should be:
Ext.onReady(function() {
// this won't be called until App has been created and its requires have been met...
Ext.app.Application.instance = new App(); // Ext.app.Application is undefined.
});
I am following the instructions for Using Sencha Cmd (with DeftJs 0.9+ only) at https://github.com/deftjs/DeftJS/wiki/Adding-Deft-JS-to-Your-Application#using-sencha-cmd-with-deft-js-09-only
Would be very grateful for any clues as to what's going wrong.
In your Application.js file (found in the app folder of your project) make sure you include Ext.app.Application in your requires.
Ext.define("Phoenix.Application", {
extend: "Deft.mvc.Application",
requires: [
"Deft.mixin.Controllable",
"Deft.mixin.Injectable",
// other required files,
"Ext.app.Application" // <=========== HERE'S THE MISSING PIECE
],
init: function() {
this.beforeInit();
Deft.Injector.configure(this.buildInjectorConfiguration());
//Deft.promise.Deferred.enableLogging = false;
return this.afterInit();
},
// other startup code
});