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,536
    Vote Rating
    380
    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,536
    Vote Rating
    380
    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,536
    Vote Rating
    380
    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


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

      0  

    Default


    Hmm, no dice. No matter what I do it always insists on using the default icons. I tried using both iconCls and cls, with a style specification like you show here (which is in fact what I had before, except for important, which I tried adding too). *Seems* like a bug at the moment.

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

      0  

    Default


    Here's an example to demonstrate this:

    Code:
    <html>
      <head>
        <title>Test</title>
        <link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css">
        <script type="text/javascript" src="ext/adapter/ext/ext-base.js"></script>
        <script type="text/javascript" src="ext/ext-all.js"></script>
        <style>
          .bgproject : { background-image:url(img/project.gif) ! important; }
          .bgtask : { background-image:url(img/task.gif) ! important; }
          .bgresource : { background-image:url(img/resource.gif) ! important; }
        </style>
        <script>
          Ext.onReady(function() {
    
            new Ext.tree.TreePanel({
              layout : "fit", id : "projectsTree", title : "Project View",
              root : new Ext.tree.TreeNode( { id : "root", text : "Projects" } ),
            });
    
            vp = new Ext.Viewport({
              layout : "border", items : [
                { region : "center", html : "Center" },
                {
                  region : "west", width : 200,
                  items : [ Ext.getCmp("projectsTree") ]
                }
              ]
            });
    
            var pRootNode = Ext.getCmp("projectsTree").getRootNode();
            var newProjectNode = pRootNode.appendChild(new Ext.tree.TreeNode({
              id : "p1", text : "Project 1",
              /*icon : "img/project.gif"*/
              /*iconCls : "bgproject"*/
              cls : "bgtask"
            }));
            var newTaskNode = newProjectNode.appendChild(new Ext.tree.TreeNode({
              id : "t1", text : "task1",
              /*icon : "img/task.gif"*/
              /*iconCls : "bgtask"*/
              cls : "bgtask"
            }));
            newTaskNode.appendChild(new Ext.tree.TreeNode({
              id : "r1", text : "resource1",
              /*icon : "img/resource.gif"*/
              /*iconCls : "bgresource"*/
              cls : "bgresource"
            }));
            pRootNode.expand();
    
          });
        </script>
      </head>
      <body></body>
    </html>
    ...and here are the icons I'm using in the img directory below the directory this HTML file is in:

    project.gif - project.gif
    task.gif - task.gif
    resource.gif - resource.gif

    Note that in the code I have three config possibilities there, two commented out... the only one that is working for me AT ALL is icon... both iconCls and cls seem to have no effect.

    I'm still holding out hope that I've just done something really stupid here, but if not then I'm going to have to cut bait here soon and just not use my custom icons, but if someone can confirm this and possibly get a fix into SVN in the next few hours, that would be my preference.

  9. #9
    Touch Premium Member letssurf's Avatar
    Join Date
    Jan 2008
    Location
    Northampton, UK
    Posts
    88
    Vote Rating
    1
    letssurf is on a distinguished road

      0  

    Default


    You CSS style is invalid.

    Code:
    .bgproject : { url(img/project.gif) ! important; }
    should be more like

    Code:
    .bgproject : { background-image: url(img/project.gif) ! important; }
    James Demspter

    the one constant in life, is change.

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

      0  

    Default


    Oh duh... now I gotta go home and check if I actually had it screwed up or if I typed it wrong into the message here... hoping it's the later, but expecting it's the former Stupid-a** typo either way... I'll let you know in a few hours if that's what it is...