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);
}
Related
I am in to developing a large client side app with very complex views on each modules using Extjs5. I have developed apps in Extjs but they all compile to a single app.js file. So based on the complexity of the views in all the app mockups I am estimating the size of the app will be around 20MB to 25MB even after compiled.
I was thinking to split the modules as separate applications and create a master app with tabs or something, which triggered will be loading individual apps in a iFrame within the master app. But I doubt if the iframe behaviors are altered in different browsers or deprecated in any future browser releases, that will be another big problem.
So is there any way in sencha cmd, which compiles app in separate files based on modules and load them on demand out of the box ?
If not what is the advisable solution I should be going ahead with.
Starting with Sencha Cmd 6.5 you can split your code into multiple files. To achieve this, you have to split your code into exjts packages if it’s not already done:
In the end, you should have a similar folder structure to this:
workspaceDir
|
+->appA
+->appB
+->packages
|
+-> local
|
+->CoreComponents
+->ProcurementModule
+->ForumModule
+->BOMModule
+->ReportModule
In your app.json file you could add/move your packages from requires to uses. As a last step you have to add the new package-loader to the requires array in app.json.
You end up with something like that:
{
// [...]
"uses": [
"ProcurementModule",
"ForumModule",
"BOMModule",
"ReportModule"
],
"requires": [
"CoreComponents",
"package-loader"
]
// [...]
}
Next you need to start your Sencha Cmd build with the additional flag -uses.
If you do this, Sencha Cmd will build your optional packages first and add them to the resource folder in your build output directory.
sencha app build -uses production
It is important, that you don't have any references to classes in optional packages from your main application. Otherwise your build will fail.
Since your optional packages are not loaded automatically on page startup you need to trigger the loading process manually. I do it usually within the routing process of my AppControllers.
Here an example:
Ext.define('MyApp.view.main.MainController', {
extend: 'Ext.app.ViewController',
requires: [
'Ext.Package'
],
routes: {
'forum': {
before: 'loadForum',
action: 'showView'
}
},
loadForum(action) {
if (Ext.Package.isLoaded('ForumModule')) {
action.resume();
} else {
//Loading mask code here [...]
Ext.defer(() => { // it needs some time to show up the loading mask
Ext.Package.load('ForumModule').then(() => {
//Remove loading mask code here [...]
action.resume(); //proceed router process; all package files loaded
});
}, 500);
}
},
showView() {
this.getView().add({xclass: 'ForumModule.view.MainView'});
}
});
More information on this topic:
http://docs.sencha.com/cmd/guides/whats_new_cmd65.html#whats_new_cmd65_-_dynamic_package_loading
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 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.