PDA

View Full Version : Problem defining custom UI for Tab Panel in Ext JS 4.2.1



jhoweaa
5 Mar 2014, 8:14 AM
I'm using Ext JS 4.2.1.744 with Sencha Cmd 3.1.1.274 and I'm trying to generate a new custom UI for my tabpanel using the extjs-tab-panel-ui mixin. I've created my own theme and created a Panel.scss file in the directory 'my-theme/sass/src/tab'. The content of the file currently contains the following:



@include extjs-tab-panel-ui (
$ui: 'maintabs',
$ui-tab-background-color: red,
$ui-strip-height: 38


in my Viewport.js (I'm basically playing with the default generated app as a starting point), I have the following panel definition snippet:



{
region: 'center',
xtype: 'tabpanel',
ui: 'maintabs',
items: [
... some simple tab panels
]
}


When I build my app, I get several Theme image not found errors like this:



WARNING: @theme-background-image: Theme image not found: images/tab-bar/maintabs-scroll-left-top.gif ...
WARNING: @theme-background-image: Theme image not found: images/tab-bar/maintabs-scroll-left-bottom.gif

... etc ...



When I view the application, I can see that my tab panel has the 'x-panel-maintabs' class assigned to it, but the tabs don't look any different than when I don't specify the ui.

When I had worked with the 4.1 version of Ext JS I remember having a problem with images not being found and I seem to recall having to do something with the theme.html file and creating a custom.js file in the slice-src directory. With the new themeing stuff in 4.2 I have no idea what I need to do to make my custom UI work.


Any help regarding this issue would be greatly appreciated.

Thanks.

Jim

Gary Schlosberg
12 Mar 2014, 9:25 AM
I noticed you are using 4.2.1.744, which is not a stable release. Probably not the issue, but worth eliminating as a potential problem. The 4.2.1 release was 4.2.1.883.

jhoweaa
12 Mar 2014, 9:29 AM
It wasn't the release. I subsequently used the 4.2.1.883 release and now I'm using the 4.2.2 release and I still have the same problem. My guess is that there is something I'm not specifying or configuring just right, but I don't know what it is.

agunescu
18 Sep 2015, 11:11 AM
Various components have images relating the the component’s “default” ui (Buttons, Menus, etc.). When you create a custom ui for one of these components you’ll notice when the theme is compiled it warns that images for your theme were not found.

WARNING: @theme-background-image: Theme image not found:

While refreshing the theme / app, Sencha Cmd will be looking for images using the ui name in place of “default” in the image name.

For example, if you create a mixin ui with a name of “admin” for small Buttons Sencha Cmd will warn that “admin-small-arrow.png” was not found.

The solution to this warning is to copy over any image assets with ‘default’ in the file name from the theme you’re extending into the custom theme’s “resources/images” directory.

You’ll then rename those files and replace “default” with the name of your custom ui. So, in the case of the “admin” button ui in your custom theme extending Neptune you would copy the “default” images from the “ext/packages/ext-theme-neptune/resources/images/button” folder and paste them into “packages/my-custom-theme/resources/images/button/”. You’ll then rename all “default” instances to “admin”.

More details here, at the bottom: https://docs.sencha.com/extjs/5.1/core_concepts/theming.html