Page 1 of 3 123 LastLast
Results 1 to 10 of 23

Thread: Button In a Template

  1. #1
    Touch Premium Member
    Join Date
    Aug 2010
    Posts
    199
    Vote Rating
    2
      0  

    Default Button In a Template

    Is it possible to add a Sencha button into a template?

  2. #2
    Touch Premium Member
    Join Date
    Aug 2010
    Posts
    199
    Vote Rating
    2
      0  

    Default

    Will renderTpl work somehow?

  3. #3
    Sencha User tomalex0's Avatar
    Join Date
    Apr 2009
    Location
    San Jose, CA
    Posts
    589
    Vote Rating
    20
      0  

    Default

    Code:
                    xtype:'dataview',
    		scroll:false,
    		singleSelect: true,
                    itemSelector: 'div.testbutton',
    		store:  teststore,
    		tpl: new Ext.XTemplate(
    			'<tpl for=".">',
    				'<div class="testbutton" id="renderbutton"></div>',
                            '</tpl>'),
                    listeners:{
                        afterrender:function(){
                                new Ext.Button({
    					text:'Button',
    					ui:'action',
    					renderTo:'renderbutton'
    				});
                        }
                   }
    This may come handy for rendering button in Templates.

  4. #4
    Touch Premium Member
    Join Date
    Aug 2010
    Posts
    199
    Vote Rating
    2
      0  

    Default

    Thank you, I think thats what I'm looking for.

  5. #5
    Sencha User
    Join Date
    Feb 2008
    Location
    Italy
    Posts
    20
    Vote Rating
    0
      0  

    Default

    Hello, I had a similar need for inserting a component inside a template. I can't use the proposed solution though since my templates are in separate files and I don't like much the idea of having parts of the template in a file and other parts (the components) somewhere else.

    I came up with an override of XTemplate that allows me to do the following:

    Code:
    <tpl for=".">
    Click here: {[ this.addCmp({xtype:"button", text:"OK"}) ]}
    </tpl>
    Here's the code for the override.
    Code:
    (function () {
        var originalOverwrite = Ext.XTemplate.prototype.overwrite;
    
        Ext.override(Ext.XTemplate, {
            overwrite: function () {
                //execute the base overwrite method
                originalOverwrite.apply(this, arguments);
    
                //then, render any components that addCmp might have added
                while (this.templateComponents.length > 0) {
                    var el = this.templateComponents.shift();
                    if (Ext.get(el.renderTo) != null) {
                        var newel = new Ext.create(el);
                    }
                }
            },
    
            //an array to store the initialconfigs of the components-to-be
            templateComponents:[],
    
            //Pushes an initialConfig to the array so that
            //a component can be later created and rendered.
            //It also generates a div container for the component 
            //with a random id if no id was provided
            addCmp: function (initConfig) {
                var wrapperId = "ext-comp-wrapper-";
                if (initConfig.id != void (0)) {
                    wrapperId += initialConfig.id;
                } else {
                    wrapperId += Math.random().toString().replace(".", "");
                }
                initConfig.renderTo = wrapperId;
                this.templateComponents.push(initConfig);
                return '<div id="' + wrapperId + '"></div>';
            }
        });
    })();
    You can insert any component but be aware of a few restrictions:
    • Lazy instantiation must be used and an xtype must be provided;
    • Always use double quotes (e.g xtype:"button"), cause single quotes don't work and Sencha 0.98 will throw an "Unexpected identifier" error;
    • The whole instruction must be on a single line, you'll get an error otherwise;
    • Watch out when you mix square and curly brackets, the template parser might get confused (eg. {xtype:"tabpanel", items:[{title:"Tab1"}]} ). Just add a space to avoid confusion. (eg. {xtype:"tabpanel", items:[{title:"Tab1"}]<spaceHere>} )


    May I suggest something similar to be added in a future version of Sencha? Or is there already a simpler way to do this?

  6. #6
    Sencha User sosy's Avatar
    Join Date
    Jun 2010
    Location
    Bremen, but Dutch origin
    Posts
    64
    Vote Rating
    0
      0  

    Default Thank you

    @Brightsoul, well i implanted it and the button is rendered, i did not find another way to handle this untill now.

    But there is a slight problem for me, i would like to know an item id, but cant pass the data to an handler.

    I am using it in an dataview, and i want 2 buttons, one for showing details, one to add the item to an store.

    Code:
    var dataview = new Ext.DataView({
        store: itemStore,
           tpl  : new Ext.XTemplate(
            '<ul>',
                '<tpl for=".">',
                    '<li class="phone" id="itemID{id}" >',
                        '<div class="itemPic" id="boxPic{id}" onclick="onPic({id})">',
                        '<img width="64" height="64" src="images/phones/{code}.png" />',
                        '</div>',
                        '<div class="itemText">',
                            '<strong>{name}</strong>',
                        '</div>',
                        '<div class="itemPrice">',
                            '<span>{price} &euro;</span>',
                        '</div>',
                        '{[ this.addCmp({xtype:"button", text:"OK", handler:function fn(){ alert("okay") } }) ]}',
                    '</li>',
                '</tpl>',
            '</ul>'
        )
    The alert("okay") is working just fine, if i put an +id alert("okay "+id) to it, it will pass me the ext-gen id, if i put an
    this.id i will see the id of the template.

    So now i would like to pass the id of the item, passed by the store.

    And i cant find a way to get this. If i try an alert("okay "+{id}) it throws an error:

    missing ) after argument list

    So now i am stucked, has anyone an solution???

    Regards
    Sosy
    I prefer an sister in the red-light district, to an brother with internet explorer..

  7. #7
    Sencha User sosy's Avatar
    Join Date
    Jun 2010
    Location
    Bremen, but Dutch origin
    Posts
    64
    Vote Rating
    0
      0  

    Default another solution

    Well, after i could not manage to get the above code working, i created an alternative:

    Code:
    var dataview = new Ext.DataView({
        store: itemStore,
           tpl  : new Ext.XTemplate(
            '<ul>',
                '<tpl for=".">',
                    '<li class="item" id="itemID{id}" >',
                        '<div class="itemPic" id="boxPic{id}">',
                        '<img width="64" height="64" src="images/phones/{code}.png" />',
                        '</div>',
                        '<div class="itemText">',
                            '<strong>{name}</strong>',
                        '</div>',
                        '<div class="itemPrice">',
                            '<span>{price} &euro;</span>',
                        '</div><br /><br />'
                        
                        + '<img id="nodeInfo_{id}" class="infoButt" style="width:32px;height:32px;" src="images/det32.png" '
                        + 'ONMOUSEOVER="this.src=\'images/det32o.png\'" '
                        + 'ONMOUSEOUT="this.src=\'images/det32.png\'" /><img src="images/s.png" style="width:19px; height:1px;" /><span><img src="images/s.png" style="width:19px; height:19px;" /></span>'
                        + '<img id="nodeAdd_{id}" class="infoButt" style="width:135px;height:32px;" src="images/addcart1.png" '
                        + 'ONMOUSEOVER="this.src=\'images/addcart2.png\'" '
                        + 'ONMOUSEOUT="this.src=\'images/addcart1.png\'" /><img src="images/s.png" style="width:19px; height:1px;" /><br />',
                        
                    '</li>',
                '</tpl>',
            '</ul>'
        )
        ,id                : 'items',
        itemSelector    : 'li.item',
        overClass       : 'item-hover',
        singleSelect    : true,
        height            : '100%',
        autoScroll      : true,
        autoWidth        : true,
        listeners         : 
        {
            scope        : this
            ,click        : 
            {
                fn: function(dataView, index, element, e) 
                {
                    
                    var selNode = dataview.getSelectedRecords();
                    var id        = selNode[0].data.id;
                    var itemID    = "itemID"+id;
                    var em        = dataView.isSelected(element);
                    var pc        = Ext.get('nodeInfo_' + id).dom.src.indexOf('images/det32o.png');
                    var cc        = Ext.get('nodeAdd_' + id).dom.src.indexOf('images/addcart2.png');
                    if (pc==38)
                    {
                        showInfo(id)
                    }
                    if (cc==38)
                    {
                        var name    = selNode[0].data.name;
                        var price    = selNode[0].data.price;
                        var code    = selNode[0].data.code;
                        var add2Cart = 
                        {
                            url            : 'modules/h!s_cart.php',
                            method        : 'post',
                            params        : 
                            {
                                cmd            : 'add'
                                ,id            : id
                                ,name        : name
                                ,price        : price
                                ,code        : code
                            },        
                            success    : function(response, options) 
                            {
                                done    = Ext.decode(response.responseText).done;
                                aant    = Ext.decode(response.responseText).aant;
                                if (done=='1')
                                {
                                    var myFieldset2 = Ext.getCmp('loginPanel');
                                    //myFieldset2.collapse(true);
                                    Ext.fly('isCart').update(+aant+' Artikel im Einkaufswagen');
                                    miniCartStore.reload();
                                }
                                else
                                {
                                    alert("er is iets niet goed");
                                }
                            },
                            failure: function(response)
                            {
                                var result=response.responseText;
                                Ext.MessageBox.alert('error','could not connect to the language file. retry later');        
                            }            
                        };
                        Ext.Ajax.request(add2Cart);
                    }
                    Ext.get(itemID).stopFx();            
                    Ext.get(itemID).fadeIn
                    ({
                        endOpacity    : 0, //can be any value between 0 and 1 (e.g. .5)
                        easing        : 'elasticBoth',
                        duration    : 2,
                        remove        : false,
                        useDisplay    : false
                    });                
                }
            }
        }
    });
    Which will make it look (with correct css) like this

    cart.jpg

    Now i have the possibility to 1) show details on the item, and 2) add it to an database (cart)..

    Hope it helps someone!?

    Regards
    Sosy
    I prefer an sister in the red-light district, to an brother with internet explorer..

  8. #8
    Sencha User
    Join Date
    Feb 2008
    Location
    Italy
    Posts
    20
    Vote Rating
    0
      0  

    Default

    Hello there, try using values.id, like this:

    {[ this.addCmp({xtype:"button", text:"OK", handler:function fn(){ alert("okay" + values.id); } }) ]}

    This was also a problem I had.

  9. #9
    Ext JS Premium Member
    Join Date
    Oct 2010
    Posts
    103
    Vote Rating
    7
      0  

    Default

    This is an awesome extension. I wish it was part of the toolkit proper.

    The only issue I am running into is that it would be much more powerful if there was a way to get a scope into the template so I could add handlers that point at specific callbacks on other objects. Does anyone know a good way to get a scope into the template evaluation. (in particular when used with an Ext.List).

    Once again, great extension.

  10. #10
    Ext User
    Join Date
    Nov 2010
    Posts
    43
    Vote Rating
    0
      0  

    Default

    Guys,

    This can be a great help to me.
    I have a situation like:

    console.log('override');

    (function () {
    var originalOverwrite = Ext.XTemplate.prototype.overwrite;

    Ext.override(Ext.XTemplate, {
    overwrite: function () {
    //execute the base overwrite method
    originalOverwrite.apply(this, arguments);

    //then, render any components that addCmp might have added
    while (this.templateComponents.length > 0) {
    var el = this.templateComponents.shift();
    if (Ext.get(el.renderTo) != null) {
    var newel = new Ext.create(el);
    }
    }
    },

    //an array to store the initialconfigs of the components-to-be
    templateComponents:[],

    //Pushes an initialConfig to the array so that
    //a component can be later created and rendered.
    //It also generates a div container for the component
    //with a random id if no id was provided
    addCmp: function (initConfig) {
    var wrapperId = "ext-comp-wrapper-";
    if (initConfig.id != void (0)) {
    wrapperId += initialConfig.id;
    } else {
    wrapperId += Math.random().toString().replace(".", "");
    }
    initConfig.renderTo = wrapperId;
    this.templateComponents.push(initConfig);
    return '<div id="' + wrapperId + '"></div>';
    }
    });
    })();

    console.log('template');

    var xtemp = new Ext.XTemplate(
    '<tpl for=".">',
    '<div id="topo"/>',
    '<span id="tituloTxt">{txt}</span>',
    '{[ this.addCmp({xtype:"panel", id:"conteudop", html:"OK", fullscreen: false }) ]}',
    '<div id="base"/>',
    '</tpl>'
    );

    Ext.setup({
    tabletStartupScreen: 'tablet_startup.png',
    phoneStartupScreen: 'phone_startup.png',
    icon: 'icon.png',
    glossOnIcon: false,
    onReady: function() {
    var teste = new Ext.Component({
    fullscreen: true,
    defaults: {
    flex: 1
    },
    tpl: xtemp
    });

    teste.update({txt:'aaa'});


    }
    });

    where I want to insert a panel in a component. The template is working, APART from the insertion of the panel. If I remove the addCmp call, it works as needed. What is the deal here, is it a limitation of the idea? I feel it is not, and I'm missing something on the usage of override.

    Thanks for any input!

    Cheers,
    Wellington Lacerda
    Spiritus Mundi Ltd

Page 1 of 3 123 LastLast

Similar Threads

  1. DataView Template with button
    By tzander in forum Ext 2.x: Help & Discussion
    Replies: 4
    Last Post: 10 Apr 2013, 11:23 AM
  2. button rendering problem with own template
    By bernd01 in forum Ext 3.x: Help & Discussion
    Replies: 0
    Last Post: 3 Jun 2010, 1:37 PM
  3. Button sprite template
    By deanna in forum Ext 3.x: Help & Discussion
    Replies: 4
    Last Post: 3 Mar 2010, 8:07 AM
  4. Is it possible to insert button into template?
    By atchijov in forum Ext 3.x: Help & Discussion
    Replies: 4
    Last Post: 19 Jul 2009, 1:27 AM
  5. [FIXED][1.1] Little bug in Button Template ?
    By lioledingue in forum Ext GWT: Bugs (1.x)
    Replies: 1
    Last Post: 6 Oct 2008, 2:20 PM

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •