PDA

View Full Version : How do I create a ExtJS 4.2 app custom theme based on the Codaxy Basic theme?



xjscrafter
13 Feb 2014, 7:16 AM
I have used Sencha Cmd to generate a workspace, app, package and custom theme.

Rather than extend one of the standard ExtJS themes (Neptune, Gray, etc), I want my custom app theme to use the Codaxy Basic theme which my company purchased.

But their theme does not seem to fully on par with the Neptune, Gray, etc. themes, so how do I customize my theme?

Am I required to extend some theme when creating my custom theme, or can I simply just place sass and css files in the theme folders as necessary?

Thanks much in advance.

xjscrafter
13 Feb 2014, 10:09 AM
The following is the folder structure of the Codaxy Basic theme. The css folder are files I will not use, as they are just if you want to apply their theme and never customize it.

According to Codaxy, the sass folder contains files allowing you to customize their theme. Here is an example of one of their sass files:


$custom-panel-background-color:$custom-ui-base-color;
$custom-panel-background-gradiant:color_stops(lighten($custom-panel-background-color,2),darken($custom-panel-background-color,1));
$custom-panel-header-border-color:darken($custom-ui-base-color,5);
$custom-panel-header-text-color:white;
$custom-panel-header-highlight:rgba(white,0.1) 0 1px inset;
$custom-panel-header-text-shadow:rgba(black,0.25) -1px -1px;




47920

The themes folder seems to hold the most promise. But there are many sub-folders here. There are overrides:


@mixin accordion-override

There are ui defined:


@mixin panel-ui

And then there are many other files under the default folder. So I'm not sure how to use this Codaxy theme in my newly generated ExtJS 4.2 workspace/package/custom theme structure.

Any ideas? Codaxy claims the theme is supported by ExtJS 4.2, but they do not give sufficient instructions to implement it as I have described.

scottmartin
13 Feb 2014, 11:08 AM
In looking at their page, the install is a bit off from what i would expect.



Extract the basic package zip file.
Include basic-core.css stylesheet in your Ext application page.
Include ui CSS files for ui styles you want to use (for example, if you want to use blue and green ui styles, you should include basic-ui-blue.css and basic-ui-green.css).
Refresh your browser.


Do you try to build, or change any settings in your sencha.cfg?

Do they not offer support, as the procedure for themes has changed a bit from each release.

xjscrafter
13 Feb 2014, 11:19 AM
Before I changed our app structure to support Sencha Cmd folder structure, all I did to use their theme in the past was to place their basic-core.css and basic-ui-all.css files inside the extjs422/resources/css folder, where extjs422 is the ExtJS 4.2.2 sdk we are using.

<link rel="stylesheet" type="text/css" href="./libs/resources/css/basic-light/basic-core.css">
<link rel="stylesheet" type="text/css" href="./libs/resources/css/basic-light/basic-ui-all.css">

I emailed the company, but they did not offer much help.

So I'm facing the task of which of their files to copy where.

This is compounded by the complexity of the ExtJS 4.2 theming model. I love the power, and will study it till I master ExtJS 4.2 theming, but in the meantime, I have to deal with:

theme-level etc folder
theme-level var folder
theme-level src folder

app-level etc folder
app-level var folder
app-level src folder

So for the Codaxy files, what to put where becomes the all-encompassing question. :)

JoelRSimpson
3 Mar 2014, 4:56 PM
I'm in the exact same place. Have Codaxy basic, use Sencha Architect, trying to get it all to play nice. Any new discoveries?

xjscrafter
3 Mar 2014, 6:29 PM
From my investigation, if you're using ExtJS 4.2.1, just reference the Codaxy css files properly and you should be all set.

But for 4.2.2, basically I think you may need to see what they were doing and do it yourself in a custom theme.

At least that's what I seemed to see.