How to replace the image?

Below code displays the tree structure.When i click on the image Pic.gif,it has to get replaced by new image.Similarly pic1.gif to new image,pic6.gif to new image.Can you help mw with the code where exactly it fits in this code ????

var children = [{
    text: 'family',
    icon: 'pic1.gif',
    children: [{
        text: 'parent1',
        icon: 'pic2.gif',
        children: [{
            icon: 'pic3.gif',
            text: 'children1',
            leaf: true},
        {
            icon: 'pic4.gif',
            text: 'children2',
            leaf: true},
        {
            icon: 'pic5.gif',
            text: 'children3',
            leaf: true}]}],

    },
{
    text: 'Parent2',
    icon: 'pic6.gif',
    children: [{
        icon: 'pic7.gif',
        text: 'children4',
        leaf: true},
    {
        icon: 'pic8.gif',
        text: 'children5',
        leaf: true},
    {
        icon: 'pic9.gif',
        text: "children6",
        leaf: true}]}];
Ext.onReady(function() {
    var tree = new Ext.tree.TreePanel({
        loader: new Ext.tree.TreeLoader(),
        width: 1000,
        height: 1000,
        renderTo: Ext.getBody(),
        root: new Ext.tree.AsyncTreeNode({
            expanded: false,
            leaf: false,
            icon: 'pic.gif'

            ,
            text: 'Head',
            childre开发者_JAVA技巧n: children
        })
    });
});

You need to trigger the icon change when the node is expanded using the beforeexpand listener:

var children = [{
    text: 'family',
    icon: 'pic1.gif',
    listeners: {
       'beforeexpand': function(node) {
           node.setIcon('newImage.gif');
       }
    }
    children: [{
    //...

You can repeat that for your other node also.