Page 1 of 2 12 LastLast
Results 1 to 10 of 14

Thread: Missing filter icons after migrating from Ext JS 2.x to 3.1.1

  1. #1
    Sencha User
    Join Date
    Aug 2010
    Posts
    62

    Default Missing filter icons after migrating from Ext JS 2.x to 3.1.1

    Hallo there,

    I had to migrate an application from ExtJS 2.x to 3.1.1. This works now but I recognized that the grid filter icons are not shown anymore. The code is the usual used one, I think:

    Code:
    Ext.onReady(function() {
        /* Store changes to grid, etc. in a cookie. */
        Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
         Ext.ux.menu.RangeMenu.prototype.icons = {
           gt: '/serv/servlet/Repository/Root/KPortal/extjs/examples/grid-filtering/img/greater_then.png', 
           lt: '/serv/servlet/Repository/Root/KPortal/extjs/examples/grid-filtering/img/less_then.png',
           eq: '/serv/servlet/Repository/Root/KPortal/extjs/examples/grid-filtering/img/equals.png'
         };
         Ext.ux.grid.filter.StringFilter.prototype.icon = '/serv/servlet/Repository/Root/KPortal/extjs/examples/grid-filtering/img/find.png';
         ...
    I tried to find the icons manually in the browser. This works, so I'm sure they exist on the server. Does anyone know this kind of problem?

    Thanks & greetings
    Thomas

  2. #2
    Sencha User Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246

    Default

    The Ext 3 GridFilters works with iconCls and not with icon.

  3. #3
    Sencha User
    Join Date
    Aug 2010
    Posts
    62

    Default

    Does this mean I simply have to modify the code? (prototype.icon to iconCls and what about prototype.icons?)

  4. #4
    Sencha User Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246

    Default

    No, iconCls holds a css class name and you need to have a css rule for this class name that specifies a background-image.

  5. #5
    Sencha User
    Join Date
    Aug 2010
    Posts
    62

    Default

    Ah, okay. I do not have to change the code but build up a css rule? Hm, do you have an example how to build up such a rule? Thanks! :-)

  6. #6
    Sencha User Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246

    Default

    Do you want this for all gridfilters? In that case you could just replace the default iconCls:
    Code:
    .ux-gridfilter-text-icon {
      background-image: url(/serv/servlet/Repository/Root/KPortal/extjs/examples/grid-filtering/img/find.png) !important;
    }
    .ux-rangemenu-gt {
      background-image: url(/serv/servlet/Repository/Root/KPortal/extjs/examples/grid-filtering/img/greater_then.png) !important;
    }
    .ux-rangemenu-lt {
      background-image: url(/serv/servlet/Repository/Root/KPortal/extjs/examples/grid-filtering/img/less_then.png) !important;
    }
    .ux-rangemenu-eq {
      background-image: url(/serv/servlet/Repository/Root/KPortal/extjs/examples/grid-filtering/img/equals.png) !important;
    }
    Last edited by Condor; 22 Oct 2010 at 6:57 AM. Reason: Changed order

  7. #7
    Sencha User
    Join Date
    Aug 2010
    Posts
    62

    Default

    Thanks! :-) This is for the string filter, only? Do I have to build up css rules for the other grid filters, too? Think so. Hm, so the rule for the string filter is called ux-gridfilter-text-icon. How can I find the names for the other icons (greater_then.png, etc...)?

  8. #8
    Sencha User
    Join Date
    Aug 2010
    Posts
    62

    Default

    Uh, thanks a lot!!! :-)

  9. #9
    Sencha User
    Join Date
    Aug 2010
    Posts
    62

    Default

    Uh, but this has a bug, I think. Now the filters for number columns look like this:

    gridfiltererrors.jpg

    What's that now?

  10. #10
    Sencha User Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246

    Default

    These are all the images you have to specify, in the correct order:
    Code:
    .ux-filtered-column.sort-asc .x-grid3-sort-icon {
      background-image: url(../images/sort_filtered_asc.gif) !important;
    }
    .ux-filtered-column.sort-desc .x-grid3-sort-icon {
      background-image: url(../images/sort_filtered_desc.gif) !important;
    }
    .ux-gridfilter-text-icon {
      background-image: url(../images/find.png) !important;
    }
    .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;
    }

Page 1 of 2 12 LastLast

Similar Threads

  1. Grid Filter Icons broken in 2.3.0
    By Samuel.reed in forum Ext 2.x: Bugs
    Replies: 2
    Last Post: 13 Oct 2010, 7:05 AM
  2. 3.2.0 TreeNode Icons Missing
    By D.Russo in forum Ext 3.x: Help & Discussion
    Replies: 0
    Last Post: 6 Apr 2010, 1:22 PM
  3. Icons are missing
    By MartinElkjaer in forum Ext GWT: Help & Discussion (1.x)
    Replies: 2
    Last Post: 22 Jan 2009, 5:14 AM
  4. Missing Icons
    By neall in forum Ext 2.x: Help & Discussion
    Replies: 4
    Last Post: 18 Dec 2007, 9:18 AM
  5. [docs] Missing inherited icons for 1.1
    By Skeleton in forum Community Discussion
    Replies: 2
    Last Post: 2 Aug 2007, 2:47 AM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •