javascriptextjssencha-cmd

Compile extjs-all with only required components


I'm new in the extjs world. Currently I'm trying to remove unnecessary components from my ext-all.js file. How and where I can tell to the sencha cmd which components compile in my ext-all.js to make use, for example, only of the grid?

Note: I'm trying to use extjs without the directory structure recommended by the sencha's guides.


Solution

  • Did you create your app with Sencha Cmd?

    You are taking the wrong end. You don't have to remove unused code from ext-all.js.

    You should not use ext-all.js at all. Sencha Cmd analyses your code and adds only those classes in the built app.js, that you really need.

    After your comment, things become more clear.

    How ExtJs works : You have a single, empty html file. All the layout is generated by JavaScript. Data is fetched via Ajax and managed in stores. There is never a page reload, and there is one single optimized js and css file in production. Also, there is a clear difference between development and production build, the latter contains only the minimal, minified code.

    If you want to use symfony and extjs together, I think the first principle should be: Do symfony the symfony way, and do ExtJs te ExtJs way.

    With this in mind I think you have two main options:

    1. Embrace ExtJs: Opt for a single page app, ExtJs for the frontend, symfony for the backend, nest custom html inside ExtJs panels.
    2. Use ExtJs as topping: go for a Symfony app, with here a ExtJs grid, and there an ExtJs chart. Create ExtJs widgets inside symfony html. You then have to find how to work with data, because the ExtJs way is quite different...

    Either way, you will have a ExtJs directory structure nested into the Symfony directories. Sencha Cmd will build the ExtJs part and generate one single Js and one CSS file. This file will be optimized for your app. You will have one optimized js file not one for each page. Finally this is a better optimization, because you will load the whole js only once.