Sencha CMD - defining meta class definition - extjs

I have a workspace project that includes an ExtJS app, Touch app, and a set of files that are shared between the two projects set up like this
WorkspaceFolder
ExtJSAppFolder
TouchAppFolder
SharedCodeFolder
I have the SharedCodeFolder referenced in the bootstrap loader and the ExtJS/Touch applications load in the browser fine
bootstrap.js
Ext.Loader.addClassPathMappings({
"ExtJSApp": "app",
"Ext": "../ext/src",
"Ext.rtl.EventObjectImpl": "../ext/src/rtl/EventObject.js",
'SharedCode': '../SharedCodeFolder/'
});
but when I try to use Sencha Cmd to build, it's giving me this error
[ERR] failed to find meta class definition for name
ExtJSApp.store.SharedCode.store.StoreFile
How do I tell Sencha Cmd to not append the ExtJS app namespace to the name of the SharedCode file? It should be looking for
SharedCode.store.StoreFile
not
ExtJSApp.store.SharedCode.store.StoreFile

You can add the SharedCodeFolder path to your workspace.classpath in the WorkspaceFolder/.sencha/workspace/sencha.cfg file:
workspace.classpath=${workspace.dir}/SharedCodeFolder
See here for more info:
http://docs.sencha.com/ext-js/4-2/#!/guide/command_workspace-section-7

Related

For sencha app build , do we need to include all js files related to view in main.js(portal.js)?

I am using sencha cmd 6 for building my application.
my folder structure is
classic
src
model
view
account
jobs
portal
portal.js
controller
store
production build process execution is successful but when i load that build its giving .js file not found error.
So i include all js files in folder structure into main js portal.js then .js error is removed and build works.
But i dont want to include all these list of files in one single js, so can we skip the js include part from portal.js and use any property or attribute to include all js files ?
You can specify with * like 'Ext.chart.*' in requires section of Ext.app.Application.
Hope this helps.

How to include Ext.ux.LiveSearchGridPanel in Sencha ExtJS v6?

While executing sencha app watch We are getting the following exception:
[ERR] Failed to resolve dependency Ext.ux.LiveSearchGridPanel for file myapp.vie
w.staticData.StaticDataGrid
[ERR]
[ERR] BUILD FAILED
[ERR] com.sencha.exceptions.ExNotFound: Unknown definition for dependency : Ext.
ux.LiveSearchGridPanel
[ERR] at sun.reflect.Native
[ERR] MethodAccessorImpl.invoke(Unknown Source)
We have tried to hardcode the path where this extension is located via the paths attribute in Application configuration as is suggested in the following stack overflow answers: How do you include a UX class in the MVC pattern? but nothing worked. Perhaps we have misunderstood how to configure the path in the loader as it is not something we have needed in the past.
Note: we are using the latest Sencha Cmd version v6.0.2.14 and the latest ExtJS v6.0.1
Any ideas are welcome
The Ext.ux namespace is being moved from the examples/ux/ directory in Ext JS 4.x to the ux package in Ext JS 6.x. Therefore, in your app.json you need to require the ux package so that Cmd will include it, you'll need to use sencha app watch, sencha app refresh or sencha app build to regenerate the bootstrap data that hold information like file location for classes. Then you should be able to require/extend Ext.ux.LiveSearchGridPanel.
Inside app.json you should change this:
"requires": [
"font-awesome"
],
into this:
"requires": [
"font-awesome",
"ux"
],
According to this link this class is for ExtJS 4.2.2 and therefore is not supported in your ExtJS version.

EXT JS 5.1 Minified Core Frame work when developing

When developing I want to use a a minified .js file of Ext JS 5.1 like they do on Sencha Fiddle. It looks like you can use the cdn link from Sencha but when I use this in the index file it fails.
Is there something I need to be doing in the bootstrap.js file to make it use just a link instead of the Ext Js 5 root folder? I want to use the same link for multiple apps hosted on a server for an enterprise situation.
Also, the Chrome Dev Tools running super slow having to load each file. I want to use one minified file to make this useful again.
I'm not positive how you could use the cdn file referenced in the sencha fiddle website. Adding that link directly to the app while using the microloader would cause errors. The microloader in extjs5 automatically figures out which files to load in the framework.
However, you can achieve a similar goal of using a minified version of the extjs framework if you are using sencha cmd.
They detail how to setup your project to use the minified or developer copy of extjs5 instead of loading all the seperate files in this forum post
Here are the changes to make to your project documented to stack overflow in case that forum post is no longer available:
Step One
make sure you are using a version of sencha cmd greater than 5.0.2.
To determine your version of sencha cmd you can type the following in the command prompt:
sencha which
If you have an older version of sencha cmd you can download the latest copy here
Thanks to Niederee for this little advice, do a sencha app upgrade on your app to make sure it's tied to the latest sencha command build
sencha app upgrade
Step Two
Adjust your app.json manifest file to load the ext-all-rtl-debug.js . Add this file to the "js":[] array in the file:
"js": [
{
"path": "${ext.dir}/build/ext-all-rtl-debug.js" // new default for generated apps
},
{
"path": "app.js",
"bundle": true
}
],
You can also add sencha charts if they are required to get that minified build too:
{
"path": "${ext.dir}/packages/sencha-charts/build/sencha-charts-debug.js"
},
Optionally you can also adjust the cache preferences based on dev/production
Add this additionally to the app.json file:
"development": {
"loader": {
"cache": true
}
},
"production": {
"loader": {
"cache": "${build.timestamp}"
}
}
Step Three
In the command prompt run the following sencha command to refresh your application's bootstrap manifest.
sencha app refresh

Default app generated successfully but not working

I am new to Sencha Touch and Sencha Command. I downloaded the requisite tools to build a Sencha Touch app. When I use the following command in Sencha Command, the app is generated fine but when I try to access it using the browser I see only the loader.
sencha -sdk touch-2.3.1 generate app MyApp ./MyApp
When viewed on Firefox, it shows following errors in the console.
TypeError: Ext.Loader is undefined bootstrap.js: 7
TypeError: Ext.application is not a function app.js: 50
On some investigation, I found that it is looking for the above mentioned files in a directory named touch directly under http://localhost/. Whereas I have Sencha framework and my app under http://localhost/sencha/touch-2.3.1 and http://localhost/sencha/MyApp.
Some files under MyApp directory have the path mentioned to touch directory as ../../../../touch. If I copy the framework in http://localhost/touch it works fine.
Why should this happen? Shouldn't my app refer to http://localhost/sencha/touch-2.3.1 folder for dependencies?
I am using the default configuration to build a default application. Can someone guide me what I might be doing wrong?
Sencha Cmd assumes that your app runs at the root of the web server... so if you're running it from a subfolder, you might see problems like this.
You can set the correct paths manually to your resources in app.js
//at the very top, before Ext.appliction()
Ext.Loader.setConfig({
enabled: true,
paths: {
'Ext' : '../touch',
'My' : 'app' //or wherever
}
});
I think that should solve your problem, if I understand it correctly.

SenchaTouch Error while Building with SenchaCmd: Failed to find file(s) for depdency reference

When I want to build my app with SenchaCmd I get the following error:
Failed to find file(s) for depdency reference /workspace/SmartphoneClient/app.js::ExtRequire::Ext.ux.picker.DateTime
This is how my app.js looks:
Ext.Loader.setPath({
'Ext': 'touch/src',
'CatchMyPain': 'app',
'Ext.ux': 'extensions/ux'
});
Ext.require('Ext.ux.picker.DateTime');
Ext.require('Ext.ux.field.DateTimePicker');
The two files DateTime and DateTimePicker are in the correct folders under extension/ux/field/DateTimePicker.js and extensions/ux/picker/DateTime.js
The app works fine with the Chrome Browser and on Safari mobile Browser. There I get no Messages or Errors in the Console.
Where could be my error?
Because Sencha CMD build cannot automatically resolve the paths from the loader. However it uses classpath. This should be defined in the config file (as as comma seperated list). I haven't tested it thought because I use the sencha compile command (see bellow)
From the docs:
The sencha app build command knows where to find the source of your application due to the app.classpath configuration value stored in ".sencha/app/sencha.cfg". By default, this value is:
app.classpath=${app.dir}/app
Adding directories to this comma-separated list informs the compiler where to find the source code required to build the application.
Yours should be: app.classpath=${app.dir}/app, ${app.dir}/extensions/ux
If you use the sencha compile command:
sencha compile -classpath=./extensions/ux -classpath=./app page -in index.html -out test.html
I had to add the directory into the classpath of .sencha/app/sencha.cfg
app.classpath=${app.dir}/app.js,${app.dir}/app,${app.dir}/extensions
this way the senchaCMD found all the files.

Resources