how to custom a button in the sencha touch list

[xixichensh]

hi,i am doing a list like tree.
picture:
311.jpg

clicked the blue button and refresh side bar

like that :

654.jpg

i try two soluton.

1.i cancel the blue button and write a <img src=""....> in the itemtpl,eg:

itemTpl: '<div class="contact2"><strong>{MetricName}</strong><img style="float:right" src="/image/notification_error_meitu_1.jpg"/></div>',

but i meet a problem that i cannot bind a click function bind to the img.........

i give up.....

2.i try still use the blue button,but i don't konw how to control its show or

hide,if a tree have not child item,i want to hide the button.

i give up again......

3.third times, i find a passage that decribe how to custom a list,but when i copy

these code to my sencha touch project.........the button haven't apper...... i

feel very strange.

append code:

Ext.regModel('Example',{
    fields:['id','text']
});

Ext.regStore('MyStore',{
    model :'Example',
    data:[
        {id : '0', text : 'aaaa'},
        {id : '1', text : 'bbbb'},
        {id : '2', text : 'cccc'},
        {id : '3', text : 'dddd'}
    ]
});

var myApp =new Ext.Application({    //利用框架的Application类的构造函数构造一个应用
    name: 'myApp',        //为这个应用指定名称
//useLoadMask: true,
    launch: function () {            //这是程序的入口
var list =new Ext.List({
            itemTpl : new Ext.XTemplate(
                '<div>{text}</div>',
                '<div style="float:right" id="button_{id}"></div>'),//这里的id让后面可以找到这个div并将按钮渲染到这个div中
            store : 'MyStore',
            isAfterrendered : false,    //添加一个变量，用于检测afterrender是否已经发生
            listeners : {
                afterrender : function() {            //afterrender事件只有list首次载入的时候才会触发。
this.isAfterrendered =true;    //这个this是指list
                    console.log('afterrender');        //请在调试状态下查看事件发生的顺序
                },
                update : function() {    //update事件在render（渲染）之前执行一次，渲染完毕
//后又会执行一次。以后在list内容发生改变时执行。
                    console.log('update');
                    if (this.isAfterrendered) {
                        Ext.each(Ext.StoreMgr.lookup('MyStore').data.items,//对MyStore的每一条数据执行一次循环
function(arrayItem, index) {
                                new Ext.Button({
                                    iconMask : true,
                                    ui : 'plain',    //按钮背景透明
                                    iconCls : 'delete',
                                    renderTo : 'button_'+ arrayItem.data.id
                                });
                            });
                    }
                }
        
            }
        });
        
        var panel =new Ext.Panel({
            fullscreen : true, //设为全屏就会显示出来
            items : list
        });
    }
});

passage run picture.........
58.jpg

Could you give some advices......thanks

[mitchellsimoens]

Are you using Sencha Touch 1 or Sencha Touch 2?

[xixichensh]

Are you using Sencha Touch 1 or Sencha Touch 2?

i know i use the sencha 1.1 grammer in sencha 2........

[sangampandey]

can you ellaborate on this I know the Solution because I have done the custom button with three different states
normal,pressed and selected