Results 1 to 8 of 8

Thread: Changing images in tree panel structure

  1. #1
    Sencha Premium Member
    Join Date
    Feb 2013
    Location
    Bangalore, India
    Posts
    68
    Answers
    1

    Default Answered: Changing images in tree panel structure

    Hi,
    I have a tree panel.
    How i will change the image of task folder. (please see image)
    Is there any way to set our own image?
    Can someone please help.
    thanks.
    Attached Images Attached Images

  2. See if this works for you:
    http://jsfiddle.net/slemmon/eVcAd/

  3. #2
    Sencha User slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    6,165
    Answers
    505

    Default

    You can use the icon
    http://docs.sencha.com/extjs/4.2.0/#...rface-cfg-icon
    and iconCls
    http://docs.sencha.com/extjs/4.2.0/#...ce-cfg-iconCls
    configs of nodeInterface.

    So, in your store config you could do something like:
    Code:
    var store = Ext.create('Ext.data.TreeStore', {
        root: {
            expanded: true,
            children: [{
                    text: "detention",
                    leaf: true,
                    iconCls: 'my-icon-class'
                }, {
                    text: "homework",
                    expanded: true,
                    children: [{
                            text: "book report",
                            leaf: true
                        }, {
                            text: "algebra",
                            leaf: true
                        }
                    ]
                }, {
                    text: "buy lottery tickets",
                    leaf: true
                }
            ]
        }
    });

  4. #3
    Sencha Premium Member
    Join Date
    Feb 2013
    Location
    Bangalore, India
    Posts
    68
    Answers
    1

    Default

    Thanks for reply,

    yes i am doing the same. i have json file, within this i am doing

    Here is my json data.

    Code:
    {"text":".","children": [
        {
            task:'Blend',
            iconCls:'task-folder-arrow',
            expanded: true,
            children:[{
                    task:'Blend Requirement',
                    leaf:true,
                    iconCls:'task'
                },{
                    task:'Blend Management',
                    leaf:true,
                    iconCls:'task'
                },{
                    task:'Blend Production',
                    leaf:true,
                    iconCls:'task'
                },{
                    task: 'Blend Staging',
                    leaf: true,
                    iconCls: 'task'
                }]
        },{
            task:'Finished Goods',
            iconCls:'task-folder-arrow',
            children:[{
                    task:'FG Management',
                    leaf:true,
                    iconCls:'task'
                },{
                    task:'FG Production',
                    leaf:true,
                    iconCls:'task'
                },{
                    task:'Release to Warehouse',
                    leaf:true,
                    iconCls:'task'
                }]
        }, {
        task:'Print Order Management',
        iconCls:'task',
        leaf: true,
        }
    ]}
    But still it showing default only.
    I am not getting where i am doing wrong.

    please help?

  5. #4
    Sencha User slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    6,165
    Answers
    505

    Default

    See if this works for you:
    http://jsfiddle.net/slemmon/eVcAd/

  6. #5
    Sencha Premium Member
    Join Date
    Feb 2013
    Location
    Bangalore, India
    Posts
    68
    Answers
    1

    Default

    Hi Slemmon,

    Thanks a lot, its work for me

  7. #6
    Sencha Premium Member
    Join Date
    Feb 2013
    Location
    Bangalore, India
    Posts
    68
    Answers
    1

    Default

    Hi thanks,

    When i will set iconCls for nodes, its work fine
    But when i will set for root then before expending its show mine cls but after expending its taking default one. (As i shown in image)

    How i can avoid this by default?
    Attached Images Attached Images

  8. #7
    Sencha User slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    6,165
    Answers
    505

    Default

    Try with:

    Code:
    .test
    {
        background-image: url('http://www.sfartscommission.org/gallery/wp-content/themes/mimbopro/images/icon_flickr.png');
    }
    
    
    
    
    .x-grid-tree-node-expanded .test
    {
        background-image: url('http://wakoopa.com/images/logo_icon.png?1363962553');
    }

  9. #8
    Sencha Premium Member
    Join Date
    Feb 2013
    Location
    Bangalore, India
    Posts
    68
    Answers
    1

    Default

    Thanks a lot,

    Its worked for me.

Posting Permissions

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