1. #1
    Sencha User
    Join Date
    Nov 2011
    Posts
    11
    Vote Rating
    0
    xixichensh is on a distinguished road

      0  

    Post Unanswered: how to custom a button in the sencha touch list

    Unanswered: how to custom a button in the sencha touch list


    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:
    Code:
    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:
    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

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,220
    Answers
    3522
    Vote Rating
    859
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    Are you using Sencha Touch 1 or Sencha Touch 2?
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Sencha User
    Join Date
    Nov 2011
    Posts
    11
    Vote Rating
    0
    xixichensh is on a distinguished road

      0  

    Post sencha 2

    sencha 2


    Quote Originally Posted by mitchellsimoens View Post
    Are you using Sencha Touch 1 or Sencha Touch 2?
    i know i use the sencha 1.1 grammer in sencha 2........

  4. #4
    Sencha User
    Join Date
    Nov 2010
    Posts
    15
    Answers
    3
    Vote Rating
    0
    sangampandey is on a distinguished road

      0  

    Default


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