PDA

View Full Version : How to include the gridfilters ux images?



murrah
12 Nov 2013, 12:09 AM
Hi.

I am using Ext.ux.grid.FiltersFeature and Ext.ux.grid.filter.NumericFilter with ExtJS4.2 and sencha Cmd 3.1.2

The numeric filter appears on the grid and works correctly except that the icons for = > < are not visible. I have built the production build (which often fixes missing css issues) but that didnt help.

It seems that it isnt including the ext/src/ux/grid/images in the build. I cant work out how to explicitly tell it about those images. I guess I will need to amend a config file somewhere (although even though it is a "ux" it is part of the ExtJS library).

Can anyone help please?

Thanks,
Murray

burnnat
12 Nov 2013, 8:28 AM
You'll need to copy those images to the resources folder of your app (or custom theme, if you're using one). Sencha Cmd should automatically copy over anything under resources into the final build directory.

murrah
12 Nov 2013, 12:56 PM
Thanks. Yes, I tried that and the images are copied across. They still dont appear though! I have been digging around trying to find the scss file that is using them but cant locate it. The css file is here:
myapp/ext/src/ux/grid/css/RangeMenu.css
and it contains:

.ux-rangemenu-gt {
background-image: url(../images/greater_than.png) !important;
}
but if the RangeMenu.css is also not in the build then of course the images wont display.

So, this workaround works:
1. Copy the myapp/ext/src/ux/grid/css folder to myapp/resources (ie myapp/resources/css/RangeMenu.css and myapp/resources/css/GridFilters.css)

2. Edit myapp index.html and add
<link rel="stylesheet" href="resources/css/GridFilters.css"/>
<link rel="stylesheet" href="resources/css/RangeMenu.css"/>
3. Build (sencha app build production)

The question is: since the filters components are part of the Ext library (albeit as UX), what is missing in the build config that the components resources are not automatically included just like all the other components?

Thanks for your help,
Murray

burnnat
12 Nov 2013, 3:14 PM
What's missing is that those CSS files aren't integrated with the SASS theme like the standard component styles are; that's why you can't find a SCSS file referencing them. What you can do is basically write your own - convert those CSS styles into SCSS (you can even include them as-is, since SCSS is a superset of CSS) and include those in the theme.

So in this case you'd add a RangeMenu.scss file to your sass/src/ux/grid directory. (You may need to tweak the path to the images, perhaps using the ExtJS theme-background-image SASS function. I haven't tried it, so I'm not sure.) That will automatically include the styles when the RangeMenu class is included, removing the need for the extra stylesheets in your index.html.

murrah
13 Nov 2013, 12:33 AM
OK. Finally solved. There was a bit more to it! Here are the steps:

1. Copy the images from myapp/ext/src/ux/grid/images to myapp/resources/images

2. Copy the files in myapp/ext/src/ux/grid/css folder to:
myapp/sass/src/ux/grid/menu/RangeMenu.scss (the js class is Ext.ux.grid.menu.RangeMenu)
myapp/sass/src/ux/grid/FiltersFeature.scss (the js class is Ext.ux.grid.FiltersFeature, not GridFilters)

3. Create a file: myapp/sass/etc/all.scss with the following contents:
@import "../src/ux/grid/menu/RangeMenu.scss";
@import "../src/ux/grid/FiltersFeature.scss";

4. Edit RangeMenu.scss and FiltersFeature.scss to change the background-image url to remove the relative path eg change url(../images/greater_than.png) to url(images/greater_than.png). See below.

5. A further problem with the grid filters was that the grid columns were not changing style when a filter was active. The css needed !important (see below)

FiltersFeauture.scss
/*
* GridFilters Styles (FiltersFeature)
*/

.ux-filtered-column {
font-style: italic !important;
font-weight: bold !important;
color: red !important; /* Optional, just to make it really obvious! */
}

.ux-gridfilter-text-icon {
background-image: url(images/find.png) !important;
}
RangeMenu.scss
/*
* RangeMenu Styles
*/

.ux-rangemenu-icon {
display: block;
height: 16px;
background: no-repeat 5px center;
}

.ux-rangemenu-gt {
background-image: url(images/greater_than.png) !important;
}

.ux-rangemenu-lt {
background-image: url(images/less_than.png) !important;
}

.ux-rangemenu-eq {
background-image: url(images/equals.png) !important;
}

6. Build (sencha app build production)

Thanks for your help @burnnat :)
Murray
PS: I will mark this as the best answer unless someone suggests something better.

burnnat
13 Nov 2013, 7:04 AM
I think it shouldn't be necessary to add the @import statements to etc/all.scss - I forgot that the default SASS namespace for apps is different than for theme packages, so I think the reason sass/src/ux/grid/menu/RangeMenu.scss isn't being automatically included in the build is that it's being interpreted as MyApp.ux.grid.RangeMenu rather than Ext.ux.grid.RangeMenu. You can change this in your .sencha/app/sencha.cfg file like so:


app.sass.namespace=Ext

I think that should cause those files to be auto-included in the build, and if you're lucky it may also remove the need for the !important modifiers too. (Since etc/all.scss is included before the "normal" component styles, I suspect the ordering of the CSS rules may have caused the RangeMenu CSS rules to be overridden by later ones.)

murrah
13 Nov 2013, 12:44 PM
... You can change this in your .sencha/app/sencha.cfg file like so:


app.sass.namespace=Ext

Yes that works.


I think that should cause those files to be auto-included in the build, and if you're lucky it may also remove the need for the !important modifiers too....

That is also true.

However, as a test, I added some custom css to a custom component that I use in the app and of course changing the app.sass.namespace to Ext means that it cant then include my app's custom scss. So, it seems that if an app requires custom css it is better to leave app.sass.namespace=App and @import the scss files via a sass/etc/all.scss file for both the Ext.ux and App.whatever files.

Given the number of questions about how to include css in the build process I am surprised the Sencha Cmd docs are not more specific about these common use-cases, especially given that the GridFilters component ships with the library! Oh well, perhaps this forum post goes some way to explaining those situations.

Thanks again @burnnat
Murray

burnnat
13 Nov 2013, 12:49 PM
However, as a test, I added some custom css to a custom component that I use in the app and of course changing the app.sass.namespace to Ext means that it cant then include my app's custom scss.

No, you should be able do both! I didn't know you had custom component styles as well. :) In that case, you just need to set your namespace to be empty:

app.sass.namespace=

Then you can add your SCSS files as sass/src/Ext/ux/grid/menu/RangeMenu.scss and sass/src/App/custom/Whatever.scss and so on.


I am surprised the Sencha Cmd docs are not more specific about these common use-cases, especially given that the GridFilters component ships with the library!

I agree, some cleanup of the docs would be nice. All of this information is in there, but it's scattered across multiple guides so it's not always easy to put the pieces together. :)

murrah
13 Nov 2013, 5:11 PM
Ok, this has been very enlightening. Thanks burnnat!

Here is my summary so that Sencha Cmd will include the scss files for the Ext library, my Ext library extentions and overrrides, and my App components. This is not about "themeing" - it is about slightly adjusting whatever theme you are using.

Take for example the following JS classes required by my application (namespace is 'App'):

Ext.grid.Panel // a standard Ext library component
Ext.ux.grid.FiltersFeature // an Ext library ux component
Ext.ux.grid.menu.RangeMenu // an Ext library ux component
Ext.cux.toolbar.PagingOptions // my custom "standard" extention of Ext.toolbar.Paging component
App.view.vIngredientList // a grid view component in my application

Assume that each of those components require specific css (eg App.view.vIngredientList has it's own bodyCls). To have Sencha Cmd include the required css classes, I have set up the following:

1. Edit .sencha/app/sencha.cfg and set
app.sass.namespace= ie empty.

2. CSS classes need to be in files with extention .scss So, in myapp/sass/src folder, add the css as scss files:46827
Note that the file
myapp/ext/src/ux/grid/css/GridFilters.css is renamed as
sass/src/Ext/ux/grid/FiltersFeature.scss because the Ext component that uses that css is actually called
Ext.ux.grid.FiltersFeature and for the mapping between the JS file and the scss file to work the path and name must be the same.

3. Copy the image files to myapp/resources/images. Sencha Cmd will include the contents of the resources folder. The url parameters of the background-images are set as per this example:
.ux-rangemenu-gt {
background-image: url(images/greater_than.png) !important;
}ie the path starts with images/ but is actually build/app/production/resources/images

4. Build (sencha app build production)

I hope this helps others,
Murray