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
Related
I'm using create-react-app and Semantic UI React to create a web part for SharePoint. (2016 on-prem. Started as 2013, so I wasn't able to use SPFx, so it's just regular old React.)
I created the solution as a Farm solution, so I could map the Layouts folder, and the CRA build output (.js and .css files) is getting deployed to the Layouts folder. I've also mapped the 16 hive folder on the dev server as a drive on my development machine, so part of my development process has been, after running npm run build, to copy the bundles directly over to the server so I can check on my changes/progress etc., without going through the usual SharePoint deployment process.
I have only ever copied the .js and .css files, and the icons used to work.
Now however, the icons are not showing up any more, and it looks like the code is trying to load icons.[hash].woff2, icons.[hash].woff and icons.[hash].ttf from the build/static/media folder in the CRA app.
Specifically, I'm seeing 404s for
https://servername/static/media/icons.[hash].woff2 etc.
Now, I would prefer to get the icons bundled in with the regular .css (and/or .js) files, so I don't have to worry about the media folder. However, I don't really have a problem with having to deploy the icon files in a media folder as well, but I would need the React build to know the correct place to look for them which would not be in
https://servername/static/media
it would be more like
https://servername/sites/my-site/_layouts/path/to/my/feature/media
So how can I either
get the icons bundled in the .css/.js files
or
indicate to CRA/Webpack the place where those files will actually end up, so the app is looking for them in the right place?
Bypassed the problem by switching from bundling the Semantic UI CSS to pulling it from the official CDN, which makes it pull the icons from a CDN somewhere, so I don't have to deal with them.
I recently bought an Angular admin dashboard theme
(http://flatfull.com/themes/angular/angular/#/app/dashboard-v1) and I'm interested in using it in an existing angular app. This seemed straightforward till I realized that the angular theme is an independently operable app with its own bower,package,grunt files. I guess one way to integrate the theme is to copy the html/cs/jss files into the existing app manually, but is there a better way to do so? Like installing it via bower or something?
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.
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.