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.
Related
Finally, I thought of moving my project from Eclipse to IDE to IntelliJ. So, I carried out the following steps:
1. Installed Codenameone plugin in IntelliJ.
2. Import existing project to IntelliJ. Now I project structure is as shown in the figure.
Here, CodenameOne-Project is the main project including source folders images and all. The common and barcode-common consists of java classes required for main project(i.e.CodenameOne-Project). So, I am able to import CodenameOne-Project in IntelliJ, and if I add other folder as module by adding dependency and all, it dont look like CodenameOne project anymore. I cant properly import complete project. Any help on this would be very helpful. Thanks
P.S: I want to maintain same project structure.
We don't support importing projects between IDE's as our project structure is IDE agnostic. The IDE won't recognize that and would fail. The right thing to do is create a new project with the same package name/main class name as your existing project then copy your src & res directories on top of the new project and copy codenameone_settings.properties on top of the new project file.
i'm working on an ionic v1 (and angular 1) project which is completed using basic ionic UI. I came across various themes on ionic marketplace. How do i integrate a new ionic theme to my existing app.
I'm assuming you have Ionic setup in your local machine.
Once you've purchased and downloaded the files of the theme you want to use, create an ionic1 project. Note this will work only with Ionic1, and not Ionic2. Use the following command to create an ionic1 project:
ionic start myApp blank --type ionic1
When your project has been created, go to the /www folder in your project directory, delete all files in here, and copy the theme's files you've downloaded here.
Run ionic serve and your project should have integrated with the theme.
PS. you might have to replace the project scss folder with that of the theme's if available.
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 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.
I used Sencha Cmd to generate workspace, app, package, custom theme, and edited my custom theme package.json to extend ext-theme-gray.
But when I refresh the app and build the package, my app does not reflect the gray theme.
I should mention that the ExtJS 4.2 docs on themes mentions the standard theme folders should be in my workspace packages folder by now, but they were not, though I followed the instructions to generate workspace/package exactly.
So I copied the ext-theme-gray folder to my packages folder and then did app refresh and package build.
But my UI still does not reflect the gray theme.
Am I missing something?
I needed to specify the custom theme here:
extApps/usx/.sencha/app/sencha.cfg
You have to specify your new/custom theme on your project's config file found on .sencha/app/sencha.cfg.
app.theme=my-custom-theme
#app.theme=ext-theme-classic
Then execute sencha app refresh from your project's root directory.