I generated ExtJs5 application skeleton using sencha utility. I don't use generated app.js during development, instead I am working from application home directory using autogenerated index.html.
It works pretty slow because browser loads ~500 JavaScript files and stylesheets before it starts loading my own classes & styles.
Is there a way to preload all ExtJs resources in several files? In prev. versions of ExtJs there was ext-all.js file. But in the recent ExtJs version this file does not actually contain all classes but rather references to them for later loading.
There is still full ext-all[-debug].js but not in Ext unzipped root but in build subdirectory.
Related
I have multiple ExtJS apps based on a custom theme say "my-ux-theme" (extension of "ext-theme-crisp").
I have bunch of .SCSS files repeated in each one of the apps. Every time I make any change to the theme, I have to make change in each of the SCSS files across the apps.
I want to centralize my theme
I am planning to attach "my-ux-theme" to the KitchenSink application and then I am building the entire KitchenSink which produces the .CSS files I need. I then deploy this CSS to my CDN and linking all my apps to this theme (CSS files). Is this a good approach?
Is this a safe assumption that KitchenSink is a big app covering all the components in ExtJS and is generating all the CSS I would ever need?
Can you all please suggest?
The basic question is when we do Sencha Command on an ExtJS application (sencha app build) then the generated CSS files by the theme covers only those components which are used/present in the application? Or it doesn't matter?
Using Kitchen Sink does not feel right to me, Here is what you can do.
Create a Sencha Work Space
Create a Theme Package
Build the Theme Package using "sencha package build"
It will generate one single CSS file for your theme in build/resource/theme-name-all.css
Here are commands for it
sencha -sdk {path/to/Ext-JS-5-SDK} generate workspace my-workspace
sencha generate package -type theme my-custom-theme
sencha package build
I am trying to create production build through the command "sencha app build production"(sencha 5.1.3). It gets created but some of the view is not being served.can some one suggest that how I should ensure all the required js file has been loaded so that the minified app.js should serve fine. Or there are some other steps to create the production build.(I am using sencha 5.1.3)
In order to have all files included you have have to reference them somewhere with one of the config requires, uses, controllers, stores, views, etc.
Sencha cmd determines also the order of inclusion with these configurations.
The theming guide says to run Sencha Cmd to:
- setup the workspace
- generate a test app to test the custom theme
The test app created in the theming guide is located inside the workspace folder. My question is, does the app that will use the theme need to be located inside the workspace folder? Or can it reside elsewhere, and it simply uses the built custom theme?
We have an existing app that we now want to use a custom theme, so the app is not inside a workspace. Can I just create the workspace for the custom theme, and make changes for styling necessary to implement the theme? Do I need to make configuration changes in the generated workspace so it is aware of the location of the code for the app which is not in the workspace?
Thanks in advance!
As far as I know, your project, where you wanted to apply the theme, must be generated by Sencha CMD. After generating the project, copy everything from the existing project to the new sencha cmd-generated project.
On the terminal, execute sencha generate theme my-custom-theme on the application directory. Your my-custom-theme will be created on the packages directory of your project folder. In order to use this theme, edit sencha.cfg found on the [project folder]/.sencha/app/. Change the app-theme to app.theme=my-custom-theme.
In order for the changes to take effect, execute sencha app refresh.
The theme, i.e. .scss files, eventually converted into a CSS file. You need to include this generated CSS file in your index.html. This is regardless of how you get or generate the CSS file.
I do not think your existing project need to be inside your new 4.2 theme project. However, it is much easier to test if you are creating a new theme and they reside in the same project.
It is not difficult to put your existing .js files into 4.2 project. I had to replace the app directory from the old project and some update to files. You can find the details in the ExtJS upgrade guide.
In the new Sencha Architect 3, there's an added feature of Application Styling. See here: http://docs.sencha.com/architect/3/#!/guide/styling
I'm not sure but I think you can import your current ExtJS project into the Architect and start styling your application.
I have a mobile application crated using sencha touch. The app skeleton was generated by sencha app generate. So it contains app.json, app.js etc files and folders. But as I have a lot of extra js files I used a .jsb3 file to build the project. So right now I build it by
sencha build -p /path/to/project.jsb3 -d target/folder/
Now I want to make this build system latest Sencha Cmd 4.0 compatible. How do I do it?
As Lorenz Meyer points out, you can try to use the "requires" keyword on the relevant classes to include your extra JS code. This assumes the JS files you're talking about adhere to the Sencha class system.
Additionally, Sencha Touch's app.json file has a "js" array you could use - this array loads arbitrary JS resources, even ones which don't adhere to Sencha's class system.
You could also use Sencha Cmd to manually compile the additional resources... but that's an advanced topic and would require detailed knowledge of your code to really offer advice.
If all else fails you can just include these JS files in your index.html, loading them from the /resources/ folder (which gets automatically copied into your build output).
At the end of the day, there's no specific migration path for your case - but the above methods are generally the ways to go.
Another point to think about is that each file should contain one class defined by 'Ext.define' and whose name corresponds to the file path ( e.g. The file in /app/view/Main.js should contain the class AppName.view.Main.
I don't know if this is a prerequisite for using Sencha cmd 4.0 or if it is only recommended.
You should not include the javascript files manually in your HTML, as long as they contain ExtJs code and not plain javascript or third-party scripts. Sencha cmd also compresses the files using YUI compressor and builds the theme css in such a way that it only contains required code.
Looking at the deploy process for an ExtJS 4 application I performed the following steps (using SDK Tools 2.0.0-beta3):
sencha create jsb -a http://localhost:8080/myapp/ -p app.jsb3
sencha build -p app.jsb3 -d .
This created for me all-classes.js and app-all.js. The next step was to switch form ext-all.js to ext.js. Doing that my app stop working. Looking at the console, I noticed that Ext tried to load the required classes separately, from a src folder.
src/AbstractPlugin.js?_dc=1372193551701
So, I'm assuming that ext.js requires the src folder that have the unminified version of the components, and it will do one request for each component that my view require, correct?
In this case ext-all.js would be a better option, but it load all components, even the ones that I don't need (1MB size).
Is there some way to build an ext.js version only with the required components (maybe with SDK tools)?
These 2 files serve different purposes. ext.js contains the core functionality needed to run an application, while ext-all.js contains all of the framework code. The first one will require your components to correctly use the requires and uses config properties to organize your code dependencies properly. Then, when you run Sencha Command to build the app, all of your classes will be combined with the core from ext.js, and all your other dependencies from the ExtJS library that you included, and put into that app-all.js file.
If you are trying to use the Sencha SDK to build your app, I would strongly recommend upgrading to the latest version (Sencha Command version 3, available here: http://www.sencha.com/products/sencha-cmd/download) - they have fixed many, many bugs, and it works very well out of the box using the tutorial located here: http://docs.sencha.com/extjs/4.2.1/#!/guide/command.