CODEWITHSUNDEEP
sencha-touch-2
twktue
twktue

Reputation: 71

Is it possible to insert EXT Components into an XTemplate?

I have an XTemplate and I would like to add some actual EXT widgets inside the template so that I have template code rendered above and below the widgets. Let's say I have a "dataview" with the following itemTpl defined:

    itemTpl: [
        '<tpl for=".">',
        '<div class="song-page-header">',
        '   <div class="artwork"><img src="{artwork}"/></div>',
        '   <h1>{title}</h1>',
        '   <h2>{artist}</h2>',
        '   <h3>Genre: {genre}</h3>',
        '   <p>{copyright}</p>',
        '</div>',

        /* Ext.Button should go here */

        '<tpl for="offers">',
        '   <p>{offer_id}: {offer_type}, {price}</p>',
        '</tpl>',
        '</tpl>'
    ]

Is it possible to define a real Ext.Button there (and not just some HTML approximating the behavior of an Ext.Button)? I don't care if it has to be applied after the fact, but I can't seem to find the correct event handler to use to be able to insert a button there. The Sencha documentation sucks so any help would be greater appreciated.

Upvotes: 2

Views: 3105

Answers (2)

jakeforaker
jakeforaker

Reputation: 1657

Actually you can do this, you just have to be a little bit creative.

Check out my blog post here: http://jakes-hackerblog.herokuapp.com/blog/2013/05/23/a-fresh-rails-blog/

Essentially, you put some dynamic div element in your template 

                '<div id="box-holder">' +
                    '<div id="box-{schoolpersonid}"></div>'+
                '</div>'+

Then you use the use "renderTo" within your button config, calling it in a refresh funciton:

    listeners: {

        'refresh': function(records) {

            var storeRecords = records._store._data.items;

            for(var i = 0; i < storeRecords.length; i++){

                var data = storeRecords[i].data;
                var renderTo = this.element.select('#box-' + data.schoolpersonid).elements[0];

                var button1 = new Ext.Button({
                    action:             'doPresent',
                    xtype:              'button',
                    align:              'right',
                    text:               'Present',
                    ui:                 'present',
                    renderTo:            renderTo,
                    schoolpersonid:      data.schoolpersonid
                });
            }
        }
    },

Upvotes: 2

Eli
Eli

Reputation: 14827

I think XTemplate does not support this feature due to managment and performance of Sencha Touch framework.

Secondly, you cannot do like that because basically you're trying to merge between HTML and javascript inside your itemTpl when sencha template only allow html structure.

In order to address this scenario, you may take a look at Component Dataview

Upvotes: 0

Related Questions