Include EXTJS 5 library in web application

3
votes

I have got extjs 5 which contains many folders (.sencha, build, cmd, examples, licences, overrides, packages, plugins, src, and welcome). I want to use charts in a web application, so what I did is that I copy/paste ext-all-debug.js file that was in the build folder. This gave me the possibility to display a panel, but there was no css. So I copy/paste the css files that I found in \ext-5.1.0\build\packages\ext-theme-neptune\build\resources. So the panel is displaying fine with css.

Then I want to use charts, but, for a reason I don't understand, charts are not included in ext-all-debug.js file. So I copy/paste "ext-charts-debug.js". And now I'm able to display simple cartesian charts (others do not work), but their behaviour is not normal (wrong axis, legend always in bottom when it locked it right or left, etc.). The code I wrote to display the chart has been tested on sencha fiddle and is working perfectly.

So my question is: What should I inlcude in my web application lib folder to let me use EVERY sencha components (with css). Thanks a lot !

PS: Here is my current web application lib folder: web application lib folder

1
extjswebincludeextjs5
I can't really begin to stress that the documentation probably has this covered better than I could begin to explain. docs.sencha.com/extjs/5.1/getting_started/getting_started.html – Rob Schmuecker
Hi Rob, thanks a lot for this quick feedbck :) ! I have been reading your link, but it does not help me. I would like to add that I do not have a extjs web application, but a simple personal web application. I do not use sencha cmd at all ;) ! – JkSuf
Just run the application out of the root of the codebase with all the things that come in the downloaded file. – Rob Schmuecker
if you are using sencha command, there is a place in the generated app.json file to place the two debug links (for extjs charts and extjs minified) and then you do an app refresh to get it compiled. Here is a similar question i answered a few days ago – weeksdev

1 Answers

4
votes

For ExtJS 5 you really should read the documentation on Sencha Command, it's by far the easiest way to get your project running.

If you really want to manually add the files, copy the build folder from the ExtJS Framework to your project's folder and then add this to your index.html: 

<link rel="stylesheet" href="build/packages/ext-theme-crisp/build/resources/ext-theme-crisp-all.css" />
<link rel="stylesheet" href="build/packages/sencha-charts/build/crisp/resources/sencha-charts-all.css" />
<script src="build/ext-all-debug.js"></script>
<script src="build/packages/sencha-charts/build/sencha-charts.js"></script>

Your Sencha Charts are not being displayed correctly because you forgot to add the css for your sencha charts theme.

PS: Really, really read the docs on Sencha Command.