Sencha Architect 3.5 / ExtJS 6.0.X - Cannot import Charts - Build Error - extjs

I'm currently using Sencha Architect 3.5 and ExtJS 6.0.X, and I am having trouble importing the Charts library/js file needed.
I have a panel with a ColumnChart/CartesianChart on it, I've also set the Store and column values in anticipation of the actual data that I'll be getting from my database.
However, after refreshing and loading my Web App, I got the following error:
GET http://localhost/MyApp/ext/classic/classic/src/chart/series/Bar.js net:: ERR_ABORTED 404 (Not Found)
GET http://localhost/MyApp/ext/classic/classic/src/chart/axis/Category.js net:: ERR_ABORTED 404 (Not Found)
GET http://localhost/MyApp/ext/classic/classic/src/chart/series/Numeric.js net:: ERR_ABORTED 404 (Not Found)
GET http://localhost/MyApp/ext/classic/classic/src/chart/CartesianChart.js net:: ERR_ABORTED 404 (Not Found)
Here's what I've done so far:
I've added in "ext-charts" to my app.json file in the project folder root, under the requires segment. However, did this not work as I'm working on ExtJS 6.0.X, not ExtJS5.
I've also tried adding in "sencha-charts", "charts", instead of "ext-charts", but to no avail, I still got the same error.
Of course just adding in those lines in the app.json file was insufficient, as this document from Sencha shows, I also had to run sencha app build on my project's root folder using terminal.
I opened a terminal window and then navigated to my project's root folder and executed sencha app build. However, I then encountered this error:
Sencha Cmd v6.1.2.15
[INF] Processing Build Descriptor : default
[WRN] Failed to resolve package theme-crisp64796bdf-bf6a-417b-b82d-1b8f7f35f246
[ERR] Cannot satisfy requirements for "core" !
[ERR] The following versions cannot be satisfied:
[ERR] classic: core (No matches!)
[ERR] charts: core (No matches!)
[ERR] Cannot resolve package requirements
I also tried to do it without Sencha Cmd, by adding in:
<script type="text/javascript" src="ext/build/packages/charts/classic/charts.js"></script>
<link rel="stylesheet" type="text/css" href="ext/build/packages/charts/classic/classic/resources/charts-all.css">
To my index.html file, making sure to uncheck "Overwrite index.html on save" in SenchaArchitect, while keeping the "charts" line in the "requires" part of app.json. However, that too did not help.
Not sure how I'm supposed to proceed from here.
Here are the versions of the important software:
Operating System: MacOS 10.13.6 (High Sierra)
SenchaArchitect Version: 3.5.1.348
SenchaArchitect Channel: 3.5-stable
SenchaArchitect Platform: 0.36.7
Sencha CMD: 6.1.2.15
Framework: ExtJS 6.0.X
Ruby and JRE are both installed and are detected by SenchaArchitect

Related

Glyphicons and fonts not working with Express server and create-react-app build

I am getting error in the browser console:
Failed to decode downloaded font "localhost:5000/static/media/fontname.##$.woff"
OTS parsing error: invalid version tag
Found few solutions/hacks like adding a homepage:"./" to package.json. But none of them worked.
Any real fix for this ?
Found the fix.
All the fonts and images go to the /static/media inside the build folder. Express needs a proper mapping of these folders to access files in the same.
`app.use('/static/media', express.static(path.join(__dirname, '/client/build/static/media/'), {maxAge: 3600000}));

Errors After Upgrading from EXTJS 4.2 to EXTJS 6.x

So far, I've done the upgrade in two ways:
1) I set up a fresh sencha app generate [appName] and transferred the 4.2 files and directories to 6.x. After setting them up, an error occurs when doing a sencha app build:
The following error occurred while executing this line:
/var/www/html/backoffice-test/EcommBackoffice/.sencha/app/build-impl.xml:381: The following error occurred while executing this line:
/var/www/html/backoffice-test/EcommBackoffice/.sencha/app/init-impl.xml:382: com.sencha.exceptions.ExNotFound: Unknown definition for dependency : Ext.ux.grid.filters.Filters
rareyes#MAKDL-RAREYES:/var/www/html/backoffice-test/EcommBackoffice$
Along with this, upon loading the app, the console error is giving out these lines:
http://localhost:1841/EcommBackoffice/Overrides/view/Table.js?_dc=1452581765612`
http://localhost:1841/EcommBackoffice/Overrides/selection/Model.js?_dc=1452581765612`
[E] [Ext.Loader] Some requested files failed to load.
[E] [Loader] The following classes failed to load:
[E] [Loader] Overrides.view.Table from Overrides/view/Table.js
[E] [Loader] Overrides.selection.Model from Overrides/selection/Model.js
[E] [Loader] EcommBackoffice.Application from app/Application.js
2) Being stucked on the first one, my second approach was to simply do a sencha app upgrade -ext on the existing application. It successfully updated except when doing a sencha app build it gives out a similar error such as:
The following error occurred while executing this line:
/var/www/html/backoffice-2.0/src/main/webapp/.sencha/app/build-impl.xml:381: The following error occurred while executing this line:
/var/www/html/backoffice-2.0/src/main/webapp/.sencha/app/init-impl.xml:382: com.sencha.exceptions.ExNotFound: Unknown definition for dependency : Ext.ux.grid.FiltersFeature
and a short console error of: Uncaught ReferenceError: Ext is not defined
This occurs when I edit index.html and replace x-compile snippet:
<!-- <x-compile> -->
<!-- <x-bootstrap> -->
<link rel="stylesheet" href="bootstrap.css">
<script src="ext/ext-all-debug-w-comments.js"></script>
<script src="bootstrap.js"></script>
<!-- </x-bootstrap> -->
<script src="app.js"></script>
<!-- </x-compile> -->
to this:
<script id="microloader" data-app="a32fd6d2-db0c-4c4b-a6a2-4185b3ee3fd4" type="text/javascript" src="bootstrap.js"></script>
Prior to editing index.html, a different error is being thrown with x-compile:
/.sencha/app/init-impl.xml:382: com.sencha.exceptions.ExBuild: Mixed-Mode x-compile and microload markup is currently unsupported
This is the reason why I opted for the supported Microloader provided by 6.x
I am quite on a lost here. ExtJS apparently has no proper Sencha guide to upgrade directly from 4.x to 6.x. It only does a one step higher upgrade such as 4.x to 5.x, and 5.x to 6.x. Even then, the guide for these are not very clear and IMHO, lacks documentation.
Anyone who can point where the problem is with the errors I provided?
Well, the Cmd error message says it loud and clear:
Unknown definition for dependency : Ext.ux.grid.filters.Filters
This means that ExtJS6 does not provide Ext.ux.grid.filter.Filters, which is required somewhere in your application.
As the Ext documentation states, everything from Ext.ux namespace is not upgrade-safe, because it is user-provided content that Sencha has found useful and added to the Ext zip file. Normally, you would just search the internet for available ExtJS 6.0.x implementations of the ux features that are missing from the official zip file; or write them yourself.
But for your special case, I believe that they moved gridfilters from ux into the official branch in ExtJS 4.2.x, then removed the alias in ExtJS 5, and finally, in ExtJS 6, they replaced the feature with a plugin.
So please have a look at Ext.grid.filters.Filters, I believe it does what you need, but you would have to rewrite parts of your code to make use of it. (change the require, move the reference from features to plugins, possibly account for other changes.)
I think that the second error message ("[E] [Ext.Loader] Some requested files failed to load.") means the same as the first one, and I would expect something like requires:['Ext.ux.grid.filters.Filters'] in Overrides/view/Table.js. (Overrides.selection.Model isn't loaded because it requires Overrides.view.Table, and EcommBackoffice.Application isn't loaded because it references Overrides.selection.Model)

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.

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.

Sencha touch build error when native packaging for ios !AMDeviceSecureInstallApplication

When i try to package my application natively for IOS in Sencha Touch 2.1 it gives me this error:
Sencha Cmd v3.0.0.250
[ERR]
!AMDeviceSecureInstallApplication
The application was successfully packaged
The application was successfuly signed
[ERR] stbuild exited with non-zero code : 1
It's not working with Xcode please any help will be appreciated.
This is my packager.json
{
"applicationName":"Demoedifarm",
"applicationId":"com.palapa.demoedifarm",
"bundleSeedId":"S5583Y6VFB",
"versionString":"1.0",
//"versionCode":"1",
"icon": {
"57":"resources/icons/Icon.png",
"72":"resources/icons/Icon~ipad.png",
"114":"resources/icons/Icon#2x.png",
"144":"resources/icons/Icon~ipad#2x.png"
},
"inputPath":"./",
"outputPath":"../build/",
"configuration":"Debug",
"platform":"iOS",
"deviceType":"iPad",
"certificateAlias":"iPhone Developer",
//"certificatePassword":"",
"provisionProfile":"/Users/palapa1/Library/MobileDevice/Provisioning Profiles/CA412FD2-60D6-407E-B7AD-A34637A8FF55.mobileprovision",
//"sdkPath":"/path/to/android-sdk",
//"sdkPath":"/path/to/android-sdk",
//"androidAPILevel":"8",
/*"permissions":[
"INTERNET",
"ACCESS_NETWORK_STATE",
"CAMERA",
"VIBRATE",
"ACCESS_FINE_LOCATION",
"ACCESS_COARSE_LOCATION",
"CALL_PHONE"],*/
"minOSVersion": "4.2.1",
"orientations": [
"landscapeLeft",
"landscapeRight"
]
}
I'm running a more recent version of Sencha Cmd (3.1), and I believe the command syntax has changed slightly, but I hit this same error so I figured I'd put an answer out just in case it helps someone.
If I run the following command:
sencha app package run myConfigFile.json
Then it fails with the same error, and I don't know what the problem is. However if I change the config file so it is targeting the iOS Simulator (the 'platform' property) then it works fine (the simulator opens automatically).
If I run this command instead:
sencha app package build myConfigFile.json
Then it completes successfully, and I end up with a MyApp.app file in the output folder.
If I have the XCode Organizer window open, I can then drag this file onto the 'Applications' folder underneath my attached phone and it will deploy/install the app for me.
If you use a provisioning profile you need to set
"configuration":"Release"
instead of Debug in packager.json. That's a bug in the docs.
Also, see this post for a good tutorial: http://frightanic.com/software-development/sencha-touch-native-packaging-for-ios-done-right/

Resources