Hybrid View

  1. #1
    Touch Premium Member
    Join Date
    Aug 2010
    Posts
    195
    Vote Rating
    2
    hitman01 is on a distinguished road

      0  

    Default Button In a Template

    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
    195
    Vote Rating
    2
    hitman01 is on a distinguished road

      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
    16
    tomalex0 will become famous soon enough

      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
    195
    Vote Rating
    2
    hitman01 is on a distinguished road

      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
    BrightSoul is on a distinguished road

      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
    sosy is on a distinguished road

      0  

    Default Thank you

    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
    Ext JS Premium Member
    Join Date
    Oct 2010
    Posts
    103
    Vote Rating
    6
    abierbaum is on a distinguished road

      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.

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

Thread Participants: 14

Tags for this Thread