1. #1
    Sencha User
    Join Date
    Feb 2012
    Vote Rating
    waqasaslammmeo is on a distinguished road


    Default How to add button in Xtemplate in Extjs

    hello teachers !

    i am a newbie in extjs , so please try to help me in very simple way , now here is my prob, i am using xtemplate and i am showing phone no and email ids of my users , now i want to show the edit button with every record , for this , i tried so many times but failed , i can add the html button with <input type="button" value = "Edit">
    but this is not what i want , i want to show the extjs button , how can i do this , is it possible in extjs 3.2 or not , or there is a better way to perform this action .
    please me in this , and if possible then please give me some code to understand it ,

    best Regards ,

    Muhammad Waqas Aslam

  2. #2
    Sencha User sword-it's Avatar
    Join Date
    May 2012
    Vote Rating
    sword-it is just really nice sword-it is just really nice sword-it is just really nice sword-it is just really nice




    If you want to create an ext button in template first you should wait the rendering process or overwrite process of tpl( means rendering your html elements in the dom ).After that you can create the customized ext components into the rendered html like:
           Ext.create({            xtype: 'container'            , renderTo:Ext.getBody()            , tpl: new Ext.XTemplate(                '{Name}',                 '<div class="button"></div>'            )            , data: { Name: 'Aslan' }            , listeners: {                afterrender: function (container) {                    var btn = Ext.get(container.el.query('div.button')[0])                    Ext.create({                        xtype: 'button'                        , renderTo: btn                        , text:'Click Me'                        , listeners: {                            click: function () {                                alert('clicked');                            }                        }                    })                }            }        })
    But this does not seems good, you should try to look at "itemSelector" property of Ext.DataView class (http://docs.sencha.com/ext-js/3-4/#!/api/Ext.DataView).
    sword-it.com, Sencha Developer House in Turkey - Istanbul University Technopark Suite 204.

Thread Participants: 1

Tags for this Thread