Gelmiş geçmiş en büyük porno sitemiz olan 2pe de her zaman en kaliteli pornoları sunmayı hedefledik. Diğer video sitemiz olan vuam da ise hd porno ağırlıklı çalışmalara başladık.

  1. #1
    Sencha User
    Join Date
    Mar 2010
    Posts
    2
    Vote Rating
    0
    Natalia R is on a distinguished road

      0  

    Question How to set custom icon for tree node in ExtJS 4?

    How to set custom icon for tree node in ExtJS 4?


    I cannot figure this out.
    Even demo examples with custom icons on screenshot are now actually all with standard icons.

    How to set custom icon for a tree node?

  2. #2
    Ext JS Premium Member
    Join Date
    Mar 2009
    Location
    San Mateo, CA
    Posts
    32
    Vote Rating
    4
    bergstyle is on a distinguished road

      0  

    Default


    I use good old fashion CSS overrides for Hub List. Here is my css file.

    PHP Code:
    /* Replaces default tree node yellow 
       folder icon with an OSX style one
    */
    #containerTreePanel .x-tree-icon-parent {
        
    background-imageurl("images/icon-fldr-default-closed.png");
    }

    /* This is the open state of the yellow
       folder icon.
    */
    #containerTreePanel .x-grid-tree-node-expanded .x-tree-icon-parent {
        
    background-imageurl("images/icon-fldr-default-closed.png");
        
    padding-top1px;
    }

    /* Replaces the default tree node leaf
       icon with Hub List list icon
    */
    #containerTreePanel .x-tree-icon-leaf {
        
    background-imageurl("images/icon-sdbar-list.png");
        
    width14px;

    Last edited by bergstyle; 26 Jun 2011 at 7:47 PM. Reason: fixed typos

  3. #3
    Ext JS Premium Member
    Join Date
    Mar 2011
    Posts
    2
    Vote Rating
    1
    budnik is on a distinguished road

      0  

    Default


    We got solution from Evan Trimboli.

    It's rather simple:

    node.set('iconCls', your-icon-class);

  4. #4
    Sencha User
    Join Date
    Jul 2010
    Posts
    1
    Vote Rating
    2
    Skiff_ is on a distinguished road

      2  

    Default


    You can do this while defining the store:

    Code:
    { text: "Some text", expanded: true, iconCls: 'ico-test', children: [ ] }
    and your css class:

    Code:
    .ico-test { background-color:#352788; width:15px; height:15px; background-image:none !important; }

  5. #5
    Sencha User ordinary_guy's Avatar
    Join Date
    Apr 2011
    Location
    London
    Posts
    8
    Vote Rating
    0
    ordinary_guy is on a distinguished road

      0  

    Default


    Quote Originally Posted by budnik View Post
    We got solution from Evan Trimboli.

    It's rather simple:

    node.set('iconCls', your-icon-class);
    Hmmm, this only seems to work if the node is not-expanded. Once the node is expanded it reverts to the standard open folder icon and the iconCls added to the node/model is ignored.

  6. #6
    Ext JS Premium Member ligaard's Avatar
    Join Date
    Apr 2011
    Location
    Copenhagen, Denmark
    Posts
    66
    Vote Rating
    0
    ligaard is on a distinguished road

      0  

    Default


    Quote Originally Posted by budnik View Post
    We got solution from Evan Trimboli.

    It's rather simple:

    node.set('iconCls', your-icon-class);
    How do I get a node object in the first place?

  7. #7
    Sencha User
    Join Date
    Feb 2010
    Posts
    6
    Vote Rating
    0
    Pascal KEMAJOU is on a distinguished road

      0  

    Default


    I found that if you do like this

    "children": [{
    "text": "Go jogging",
    "leaf": true,
    "checked": true,
    "iconCls":"sys-car"
    },{

    You get the Resulttreepanel.png

  8. #8
    Sencha User
    Join Date
    Aug 2011
    Posts
    1
    Vote Rating
    1
    lexsidev is on a distinguished road

      1  

    Default expanded/not expanded nodes

    expanded/not expanded nodes


    Quote Originally Posted by ordinary_guy View Post
    Hmmm, this only seems to work if the node is not-expanded. Once the node is expanded it reverts to the standard open folder icon and the iconCls added to the node/model is ignored.
    To have expanded/not expanded nodes keep your icon you can add .x-tree-lines before your class selector in your css.
    If you set the node's iconCls property to node-icon, add the following to your css and it works wether or not the node is expanded :
    Code:
    .x-tree-lines img.node-icon{
        width:16px;
        background-image:url('/resources/images/admin-user.png')
    }

  9. #9
    Ext JS Premium Member tvanzoelen's Avatar
    Join Date
    Apr 2008
    Location
    Groningen - Netherlands
    Posts
    1,111
    Vote Rating
    30
    tvanzoelen has a spectacular aura about tvanzoelen has a spectacular aura about tvanzoelen has a spectacular aura about

      0  

    Default


    just put this model on your tree and the icon property on the node will work. In that case css classes are not needed.

    Code:
    Ext.define('TreeModel', {
        extend: 'Ext.data.Model',
        fields: [
            { name: 'text', type: 'string', defaultValue: null },
            { name: 'parentId', type: 'string', defaultValue: null },
            { name: 'index', type: 'int', defaultValue: null },
            { name: 'depth', type: 'int', defaultValue: 0 },
            { name: 'expanded', type: 'bool', defaultValue: false, persist: false },
            { name: 'expandable', type: 'bool', defaultValue: true, persist: false },
            { name: 'checked', type: 'auto', defaultValue: null },
            { name: 'leaf', type: 'bool', defaultValue: false, persist: false },
            { name: 'cls', type: 'string', defaultValue: null, persist: false },
            { name: 'icon', type: 'string', defaultValue: null, persist: false },
            { name: 'iconCls', type: 'string', defaultValue: null, persist: false },
            { name: 'iconQtip', type: 'string', defaultValue: null, persist: false },
            { name: 'root', type: 'boolean', defaultValue: false, persist: false },
            { name: 'isLast', type: 'boolean', defaultValue: false, persist: false },
            { name: 'isFirst', type: 'boolean', defaultValue: false, persist: false },
            { name: 'allowDrop', type: 'boolean', defaultValue: true, persist: false },
            { name: 'allowDrag', type: 'boolean', defaultValue: true, persist: false },
            { name: 'loaded', type: 'boolean', defaultValue: false, persist: false },
            { name: 'loading', type: 'boolean', defaultValue: false, persist: false },
            { name: 'href', type: 'string', defaultValue: null, persist: false },
            { name: 'hrefTarget', type: 'string', defaultValue: null, persist: false },
            { name: 'qtip', type: 'string', defaultValue: null, persist: false },
            { name: 'qtitle', type: 'string', defaultValue: null, persist: false }
        ]
    });

  10. #10
    Ext JS Premium Member Asken's Avatar
    Join Date
    Feb 2010
    Location
    sweden
    Posts
    117
    Vote Rating
    0
    Asken is an unknown quantity at this point

      0  

    Default


    Quote Originally Posted by lexsidev View Post
    To have expanded/not expanded nodes keep your icon you can add .x-tree-lines before your class selector in your css.
    If you set the node's iconCls property to node-icon, add the following to your css and it works wether or not the node is expanded :
    Code:
    .x-tree-lines img.node-icon{
        width:16px;
        background-image:url('/resources/images/admin-user.png')
    }
    I couldn't get it to work with the above. I used this instead if someone is interested:
    Code:
    .x-grid-cell-inner img.node-icon {
        width:16px;
        background-image:url('/resources/images/admin-user.png')
    }
    Kristian Ask
    United Nations OPS