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.
Related
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
I'm trying to set up extjs framework and getting and error 'ext' is not present in the current workspace
root#samuel-pc:~/Documents/code/test# sencha app install --framework=/home/samuel/Downloads/ext-6.5.0
Sencha Cmd v6.5.0.180
[INF] Using existing workspace at /home/samuel/Documents/code/test
[WRN] Workspace may not be initialized properly, consider including the --frameworks switch.
[ERR] Framework 'ext' is not present in the current workspace.
Check your workspace.json file; there the ext property maybe missed maybe because of sencha workspace init command; add the ext property as follows according to your ExtJS version.
"frameworks": {
"ext": {
"path":"ext",
"version":"6.2.1.167"
}
}
THE PROBLEM
I am trying to integrate yfiles for HTML into an Angular 2 application that uses the Angular CLI. I am using the latest version of Angular 2 and the latest BETA release of the CLI.
I have installed the types using npm install --save #types/yfiles.
I have placed the required yfiles folders in my project and have updated angular-cli.json to include the required sytles and scripts:
"styles": [
"../lib/yfiles.css"
],
"scripts": [
"../lib/license.js",
"../lib/yfiles/view-component.js",
"../lib/yfiles/view-layout-bridge.js",
"../lib/yfiles/layout-hierarchic.js",
"../lib/yfiles/layout-tree.js",
"../lib/yfiles/router-polyline.js",
"../lib/yfiles/router-other.js"
],
I have confirmed that a build includes these scripts in the bundled scripts output after running ng build.
When trying to reference yfiles the autocomplete works in the IDE (latest Webstorm):
graphComponent: yfiles.view.GraphComponent;
constructor(private element: ElementRef,
injector: Injector,
resolver: ComponentFactoryResolver) { }
ngAfterViewInit() {
let containerDiv:HTMLDivElement =
this.element.nativeElement.getElementsByClassName('graph-control-container')
[0];
this.graphComponent = new yfiles.view.GraphComponent(containerDiv);
}
The project compiles and runs when ng serve is issued BUT when I navigate to a route that activates the component that is trying to use yfiles, an error is thrown and reported in the console:
error_handler.js:54 EXCEPTION: Uncaught (in promise): Error: Error in ./BrowseVisualisationsComponent class BrowseVisualisationsComponent - inline template:0:0 caused by: Cannot read property 'GraphComponent' of undefined
I have tried importing the yfiles modules - for example:
import 'yfile/view-component'
This just prevents ng serve from building the application:
ERROR in ./src/app/shared/table-relationship-visualisation/table-relationship-visualisation.component.ts
Module not found: Error: Can't resolve 'yfiles/view-component' in '/home/VMdev/Documents/iotahoe_client/src/app/shared/table-relationship-visualisation'
# ./src/app/shared/table-relationship-visualisation/table-relationship-visualisation.component.ts 12:0-31
# ./src/app/app.module.ts
# ./src/main.ts
# multi main
Any assistance appreciated.
The scripts provided in the app.scripts array will just be loaded as if they would have been referenced with regular <script> tags - no module resolving will take place at all.
However, the yFiles modules you provided in the scripts array are "meta modules" that would load the actual implementation files using AMD/CommonJS-style define/require statements.
Therefore, in order to load the yFiles functionality with angular-cli, you will have to provide the actual implementation files directly:
"scripts": [
"./assets/yfiles/license.js",
"./assets/yfiles/lib/yfiles/impl/lang.js",
"./assets/yfiles/lib/yfiles/impl/graph-core.js",
"./assets/yfiles/lib/yfiles/impl/core-lib.js",
"./assets/yfiles/lib/yfiles/impl/graph-styles-core.js",
"./assets/yfiles/lib/yfiles/impl/graph-styles-default.js",
"./assets/yfiles/lib/yfiles/impl/algorithms.js",
"./assets/yfiles/lib/yfiles/impl/graph-styles-template.js",
"./assets/yfiles/lib/yfiles/impl/graph-styles-other.js",
"./assets/yfiles/lib/yfiles/impl/graph-binding.js",
"./assets/yfiles/lib/yfiles/impl/layout-core.js",
"./assets/yfiles/lib/yfiles/impl/graph-layout-bridge.js",
"./assets/yfiles/lib/yfiles/impl/layout-polyline.js",
"./assets/yfiles/lib/yfiles/impl/layout-router.js",
"./assets/yfiles/lib/yfiles/impl/layout-tree.js",
"./assets/yfiles/lib/yfiles/impl/layout-hierarchic.js"
],
It's unfortunate that the modules can't be resolved automatically with this approach even though the yFiles modules adhere to the UMD pattern, but I don't see a better option to make this work with angular-cli right now.
To generate the list of the yFiles implementation modules in the correct order, you can use our yeoman generator with the "script-tags" option:
https://www.npmjs.com/package/generator-yfiles-app
I have an extJs 4 app that is extending 3rd party non-extJs classes. I just can't seem to build the app. It keeps giving me the error below. Objective is to minify the app with appropriate dependencies since it is taking longer time to load both libraries and slowing down the application.
I am using Sencha Cmd v4.0.4.84.
/*********************************************/
C2008: Requirement had no matching files
[ERR]
[ERR] BUILD FAILED
[ERR] com.sencha.exceptions.ExBuild: Failed to find any files
/*********************************************/
Any help is truly appreciated.
So far I have tried:
1) modified app/.sencha/app/sencha.cfg classpath to include the external library. No luck.
2) Added to section of the index.html. No luck.
3) Added loaders and set path of the external library. No luck.
External library is already on my local machine inside of the app folder.
Anyone out there?
I take you out for a lunch if you help me resolve this issue. No seriously!
This is really a showstopper for me.
Thank you,
Ritesh
Issue is resolved in the Sencha Forum post below.
http://www.sencha.com/forum/showthread.php?285252-Sencha-Cmd-build-ExtJs-with-external-library&p=1043385#post1043385
If you can't get to the link then....
If a testing build works and production build does not you might try disabling optimizations. If you look in ".sencha/app/production.defaults.properties" you will see the various settings that make production builds unique.
Try adding this setting:
build.optimize=${build.optimize.disable}
Hope this will help someone.
Thanks,
Ritesh
You cannot extend a 3rd party class as Ext.define expects that all classes inherit from Ext.Base what is unlikely for non-ext 3rd party lib.
Of course, you can use a third party lib by including its javascript outside of <x-compile> block in your index.html
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