Hybrid View

    Thank you for reporting this bug. We will make it our priority to review this report.
  1. #1
    Ext JS Premium Member
    Join Date
    Sep 2007
    Location
    Pennsyvania, USA
    Posts
    232
    Vote Rating
    0
    fzammetti is on a distinguished road

      0  

    Default [FIXED][3.0] Icons in tree different in v3

    [FIXED][3.0] Icons in tree different in v3


    Hi folks... in v2.2.0 I was doing this to add a node to a tree:

    Code:
    newTaskNode.appendChild(new Ext.tree.TreeNode({
      id : newID, text : inResourceRecord.get("name"),
      icon : "img/resource.gif"
    }));
    Now, that still essentially works in v3, but the problem is that my icon is being overlayed on top of the default node icons. It seems obvious to me that it's because the default icons are put there via background images, so my icon specification sits on top of it (that seems to be supported by the documentation which actually says that it's preferred to use iconCls rather than icon).

    However, I'd really like to change my existing code as little as possible, so my question is how can I turn off the background images? I tried setting iconCls to null in this config, but that didn't work (makes sense). I also tried creating a style class:

    Code:
    .cssnobg : {background-image:none;}
    ...and applied that via iconCls, but that didn't work either. Any pointers?

    Thanks,
    Frank

  2. #2
    Sencha - Community Support Team jsakalos's Avatar
    Join Date
    Apr 2007
    Location
    Slovakia
    Posts
    27,506
    Vote Rating
    373
    jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future

      0  

    Default


    Since Ext 2.0 I've never done it with icon, only with iconCls. I guess it should work in Ext 3 too. Or a bug?
    Jozef Sakalos, aka Saki

    Education, extensions and services for developers at new http://extjs.eu
    News: Grid Search Plugin, ExtJS 5 Complex Data Binding using MVVM


  3. #3
    Ext JS Premium Member
    Join Date
    Sep 2007
    Location
    Pennsyvania, USA
    Posts
    232
    Vote Rating
    0
    fzammetti is on a distinguished road

      0  

    Default


    Can you give me an example of how you do it with iconCls? What does your style definition look like? I would prefer not to do that, seems like it should work as it does in v2, but I've also got to get this done one way or another so I'll change it if I have to.

  4. #4
    Sencha - Community Support Team jsakalos's Avatar
    Join Date
    Apr 2007
    Location
    Slovakia
    Posts
    27,506
    Vote Rating
    373
    jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future

      0  

    Default


    If we're talking about tree, I just return iconCls in json. Like:
    PHP Code:
    {"text":"Node 2","iconCls":"icon-save", .... } 
    You can see many custom icons here: http://filetree.extjs.eu
    Jozef Sakalos, aka Saki

    Education, extensions and services for developers at new http://extjs.eu
    News: Grid Search Plugin, ExtJS 5 Complex Data Binding using MVVM


  5. #5
    Ext JS Premium Member
    Join Date
    Sep 2007
    Location
    Pennsyvania, USA
    Posts
    232
    Vote Rating
    0
    fzammetti is on a distinguished road

      0  

    Default


    I actually meant what does the definition of icon-save look like? I've just played with a bunch of settings around iconCls and cls, with various style definitions, and none of them are working, so I'm hoping I just botched the style definition.

    FYI, this is manually adding nodes to an already constructed tree, although I'd hope that wouldn't matter.

  6. #6
    Sencha - Community Support Team jsakalos's Avatar
    Join Date
    Apr 2007
    Location
    Slovakia
    Posts
    27,506
    Vote Rating
    373
    jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future

      0  

    Default


    All are like this:
    Code:
    .icon-graph {
        background-image:url(../img/silk/icons/chart_curve.png) ! important;
    }
    .icon-chart {
        background-image:url(../img/silk/icons/chart_bar.png) ! important;
    }
    .icon-prefs {
        background-image:url(../img/silk/icons/application_form.png) ! important;
    }
    .icon-ok {
        background-image:url(../img/icons/ok16.png) ! important;
    }
    .icon-view-tile {
        background-image:url(../img/silk/icons/application_view_tile.png) ! important;
    }
    .icon-check, .icon-check-off {
        background-image:url(../ext/resources/images/default/menu/unchecked.gif) ! important;
    }
    .icon-check-on {
        background-image:url(../ext/resources/images/default/menu/checked.gif) ! important;
    }
    .icon-stat-data {
        background-image:url(../img/icons/kate_16.png) ! important;
    }
    Jozef Sakalos, aka Saki

    Education, extensions and services for developers at new http://extjs.eu
    News: Grid Search Plugin, ExtJS 5 Complex Data Binding using MVVM