CODEWITHSUNDEEP
javascriptextjs
David
David

Reputation: 4281

How to use customize on tree data

I have a treepanel where i want to use my own customize image which can change after click on paraent element. Currently i am getting arrow and folder. I want my own image.

Here is my tree.

var root = {
    expanded: true,
    children: [{
        text: "Configure Application",
        expanded: true,
        children: [{
            text: "Manage Application",
            leaf: true
        }, {
            text: "Scenario",
            leaf: true
        }]
    }, {
        text: "User Configuration",
        expanded: true,
        children: [{
            text: "Manage User",
            leaf: true
        }, {
            text: "User rights",
            leaf: true
        }]
    }, {
        text: "Test Configuration",
        //leaf: true,
        expanded: true,
        children: [{
            text: "Manage User",
            leaf: true
        }, {
            text: "User rights",
            leaf: true
        }]
    }]
};

Ext.create('Ext.panel.Panel', {
    width: 500,
    height: 500,
    title: 'Border Layout',
    layout: 'border',
    items: [{
        title: 'West Region is collapsible',
        region:'west',
        xtype: 'panel',
        margin: '5 0 0 5',
        width: 200,
        collapsible: true,   // make collapsible
        id: 'west-region-container',
        layout: {
            type: "vbox",
            align: "stretch"
        },
        items:[{
            xtype: 'panel',
            width : 200,
            margin: '5 0 0 5',
            layout: {
                type: "vbox",
                align: "stretch"
            },
            items:[]
        },{
            xtype: 'treepanel',
           // useArrows: true,
            autoScroll: false,
            animate: true,
            enableDD: false,
            title: 'Configuration',
            width: 200,
            height: 400,
            rootVisible: false,
            store: Ext.create('Ext.data.TreeStore', {
                root: root
            }),
            listeners: {
                itemclick: function(s, r) {
                    alert(r.data.text);
                }
            }
        }]


    }],
    renderTo: Ext.getBody()
});

I am using useArrow. I have two images which i want to change on click of item, but first i am not able to load image on tree item. I want only on paraent elemnt not on child element. Any leads will be thankfull.

Upvotes: 0

Views: 74

Answers (1)

Zhorov
Zhorov

Reputation: 29963

If I understand your question correct, this may help you. This works for me (with ExtJS 4.2). I want to note, that I rarely customize ExtJS controls with CSS, so just test this more carefully.

Set icon when creating tree (first parent node with icon, second with CSS):

var root = {
    expanded: true,
    children: [{
        text: "ICON Configuration",
        icon: 'first.png',
        expanded: true,
        children: [{
            text: "Manage Application",
            leaf: true
        }, {
            text: "Scenario",
            leaf: true
        }]
    }, {
        text: "CSS Configuration",
        iconCls: 'testtree-node-firsticon-parent',
        cls: 'testtree-node-text-parent',
        expanded: true,
        children: [{
            text: "Manage User",
            leaf: true
        }, {
            text: "User rights",
            leaf: true
        }]
    }]
};

When parent node is clicked, change parent icon (first parent node with icon, second with CSS):

...
if (!r.data.leaf) {
    if (r.data.text == 'CSS Configuration') {
        r.set('iconCls', 'testtree-node-secondicon-parent');
    } else {
        r.set('icon', 'second.png');
    }   
}
...

CSS:

.testtree-node-firsticon-parent { 
    background: url('first.png') !important;
}
.testtree-node-secondicon-parent { 
    background: url('second.png') !important;
}
.testtree-node-text-parent { 
    font-weight: bold !important;
    font-size: 14px !important;
}

Upvotes: 1

Related Questions