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
});
Related
I am swapping out one IndexedDb wrapper(localForage) for another(Dexie) and I am unable to run the application because the recommended way to integrate it within the ExtJs framework is not working for me. What have I done wrong?
My current version/s of ExtJs:
framework: 6.6.0.258
Cmd: v6.6.0.13
Dexie version is latest
The Dexie documentation recommends that you set up your database like this
var db = new Dexie("MyDatabase");
db.version(1).stores({
myStoreName, "++id, indexOne, indexTwo",
myOtherStoreName, "++id, indexOne, indexTwo",
});
myExtJsFile.js
Ext.define('DataLayer.Inferface', {
extend: 'Ext.Component',
xtype: 'DLInterface',
config: {
stuff...
db: new Dexie("mydatabaseName"),
}
The way that the ExtJs documentation recommends using an external library is to reference it in the app.json file in the js array
app.json
"js": [
{
"path": "${framework.dir}/build/ext-all-rtl-debug.js"
},
{
"path": "dexie.js" //Dexie is located in the same folder as app.json
},
I get a successful build yet when I go to deploy it(run locally) I get the run-time error listed in the title of this question. I am aware that the intellisense in VSCode isn't working all that good, so I didn't really think much of it when I was not appearing to have access to the global Dexie object.
I have tried several different ways, and places to load this library with m=no luck. I would use a CDN, but it is an offline capable app so I really want the library locally. How should I be getting, referencing, and using 3rd party libraries in Ext?
Thanks.
If You use external library in Ext.define, try to include external libraries before extjs libraries (ext-all-rtl-debug.js, app.js etc.).
Another solution - don`t attach remote libraries on class defines - use initialize/initComponent instead. Example:
Ext.define('DataLayer.Inferface', {
extend: 'Ext.Component',
xtype: 'DLInterface',
config: {
stuff...
},
initComponent: function () {
this.db=new Dexie("mydatabaseName");
this.callParent(arguments);
}
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 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.