I'm trying to create a simple grid in my sencha project that extends 'Ext.grid.Panel'.
When I make from sencha cmd the "sencha app build" command, I have the exception: "Unknown definition for dependency : Ext.grid.Panel".
Actually I don't have it in my sencha folder, so how can I add it?
Thanks in advance
Just like this inside the app.js
Ext.application({
name: 'AppName',
requires: [
'Ext.grid.Panel',
'Ext.MessageBox'
]
...
Related
I want to use Ext.ux.colorpick.Field (modern toolkit), but can not figure out what should I require for it to work.
I've tried ext-ux-colorpick package within app.json, but it leads to an error:
Failed to resolve dependency Ext.form.field.Picker for file Ext.ux.colorpick.Field.
Any suggestions?
If you want to use ux widgets you need to require it in app.json like:
"requires": [
"ux"
],
And in app.js or in some Ext.app.Controller add in requires.
requires: ['Ext.ux.colorpick.Field']
Solution was to:
1 - Install package with npm install #sencha/ext-ux (not globally).
2 - Change packages path in the workspace.json to ${workspace.dir}/node_modules/#sencha:
"packages": {
"dir": "${workspace.dir}/node_modules/#sencha",
"extract": "${workspace.dir}/node_modules/#sencha/remote"
}
3 - Add ux to the requires in the app.json.
I'm using NVD3 with sencha touch (2.3.1), and after building for production I get the error mentioned in the title.
I did everything according to the instructions:
https://github.com/woodenconsulting/OpenCharts-For-Sencha-Touch-and-ExtJS.
I noticed that the Sencha CMD has obfuscated the files of the library (d3.min.js and nv.d3.min.js), into the build folder, for example, the file: d3.min.js.
The original file starts with this:
!function(){function n(n){return null!=n&&!isNaN(n)}...
After build it become like this:
function _17932636d3fbdb626cc81cd279db37fe71ecf72d(){};!function(){function hY(a){return null!=a&&!isNaN(a)}...
Does anyone have any idea what could be?
Thanks!
Solved!
I included the option "includeInBundle":true in the path in the app.json.
"js": [
{
"path": "OpenCharts/lib/d3.min.js",
"includeInBundle":true
}, {
"path": "OpenCharts/lib/nv.d3.min.js",
"includeInBundle":true
},
.
.
.
.
],
Thanks
I'm new to Ext and it's my first contact with this framework and I'm creating java web app. Here is my folder structure:
src
--main
--webapp
--index
--application
--controller
--Index.js
--model
--store
--view
--MainPanel.js
--Index.js
--resources
--WEB-INF
--Index.jsp
Here is webapp/Index/Index.js
Ext.application({
name: 'Spring_Ext',
appFolder: '/index/application',
controllers: [
'Index'
]
});
And here is webapp/index/application/controller/Index.js
Ext.define('Spring_Ext.controller.Index',{
extend: 'Ext.app.Controller',
views: ['MainPanel'],
init: function(){
....
}
....
});
When I run it on tomcat in chrome I get error saying it cannot found(404)
GET http://localhost:8081/index/application/controller/Index.js?_dc=1425849848988 ext-all-debug.js:6262
and when looking in source tab in chrome developer in index folder there isn't application folder with MVC structure, but only Index.js.
Thats because at the index.js level of your directory structure you are already in /index/application/
Extjs is now looking for the same path and cannot find it. Instead just specify '/' for you appFolder config. You might even not need to set this as it may default to this already
No need for appFolder. And in your source tab there is no application folder with mvc because your controller hasn't loaded successfully. Try giving the whole path of MainPanel in our controller like this
Views: Spring_Ext.view.MainPanel
I'm getting following error when i execute sencha app build
[ERR] BUILD FAILED
[ERR] com.sencha.exceptions.ExBuild: com.sencha.exceptions.ExBuild: Failed to find any files for extjs-build\app\app\Application.js::ClassRequire::Object
extjs-build\app\app\Application.js looks like
Ext.define('PM.app.Application', {
extend: 'Ext.app.Application',
requires: [
'PM.Object'
]
}
A file for class PM.Object exists. The path is: extjs-build\app\Object.js and extends Ext.Object with some extra functions:
PM.Object = Ext.apply(Ext.Object, {
...: function() {}
}
The extjs-build\.sencha\app\sencha.cfg file:
# The path(s) to application javascript sources (comma separated)
app.classpath=${app.dir}/app
My Directory looks like:
/extjs-build/
.sencha/
app/
app/
Application.js
data/
SomeStore.js
app.js
Object.js
ext/
src/
I'm running sencha app build from /extjs-build/
Ext.Loader handles the issue correct (/extjs-build/app/app.js)
Ext.Loader.setConfig({
paths: {
'PM': './extjs-build/app'
}
});
Ext.application('PM.app.Application');
Any suggestions?
Your PM.Object path (extjs-build\app) is outside the build directory of you app (extjs-build\app\app)
I suspect you are running sencha app build in extjs-build\app which means the compiler will look for js files in extjs-build\app\app\ (this is because app.classpath=${app.dir}/app)
In your sencha.cfg you can change the classpath. Or move that file into the extjs-build/app/app directory.
I solved this issue by adding an empty
Ext.define('PM.Object', {
});
in file extjs-build/app/Object.js.
I have generated a project using Sencha cmd. This creates a nice folder named 'overrides' where I have put my overridden Ext.Ajax class. I then include it in my app.js file like so
requires: [
'overrides.Ajax'
]
This works just fine when using my app, however when I try to build it using Sencha cmd I get the following error:
[ERR] BUILD FAILED
[ERR] com.sencha.exceptions.BasicException: The following error occurred while e
xecuting this line:
[ERR] Z:\public_html\LoginScreen\.sencha\app\build-impl.xml:469: com.sencha.exce
ptions.ExBuild: com.sencha.exceptions.ExBuild: Failed to find any files for Z:\p
ublic_html\LoginScreen\app\app.js::ClassRequire::overrides.Ajax
Does anyone know how to properly include files that are inside the overrides folder?
Turns out I needed to edit the .sencha/app/sencha.cfg file, adding the following to the end of the app.classpath
,${app.dir}/overrides
Thanks to Mitchell over at the official Sencha forums for helping me out!
http://www.sencha.com/forum/showthread.php?261361-Properly-using-the-overrides-folder-generated-by-Sencha-Cmd-for-Ext-Js-4.2
For Ext 5 user, you can specify "overrides folder" in app.json. Example:
"overrides": "${app.dir}/overrides",
You probably need path defined in your loader config for overrides.
Something like this:
Ext.Loader.setConfig({
paths: {
'Ext.ux': 'js/extjs/ux',
'overrides' : 'somepath/to/overrides',
'Skirtle.CTemplate':'js/extjs/ux/SkirtleCTemplate.js' //<-- specific component
}
});
For me just the
requires: [
'overrides.Ajax'
]
didn't work I had to add
requires: [
'MyApp.overrides.Ajax'
]
And it worked :)
Also the vars
// #require #packageOverrides
// #require #appOverrides
don't do anything for me, so the steps are
add the ,${app.dir}/overrides in the sencha.cfg
add the requires in the app.js inside the Ext.application
Tested in Sencha Cmd v4.0.2.67