CODEWITHSUNDEEP
sencha-touchextjssencha-touch-2
james lewis
james lewis

Reputation: 2532

Sencha Touch - display button underneath template

I'm trying to create a panel from a template using the Sencha Touch 2 framework but I'm having a little trouble. What I'd like to do is display the HTML template followed by a button underneath - an example of this using HTML instead of a template would be:

Ext.define('GS.view.Home', {

extend: 'Ext.Panel',

config: {
    title: 'Home',
    items: [
        {
            xtype: 'panel',
            html: [
                '<img src="resources/images/someImage.gif"/>',
                '<h1>A Header</h1>',
                "<p>some text</p>"
            ].join("")
        },
        {
            xtype: 'button',
            text: 'Click Me',
            ui: 'forward'
        }
    ]
}
});

Which looks like this when rendered:

button on bottom

What I'd like to do is load a panel using a template instead but still have a button underneath. My code currently looks something like this:

var tpl = new Ext.XTemplate(
    '<img src="resources/images/someImage.gif"/>',
    '<h1>A Header</h1>',
    '<p>some text</p>',
    {
        // XTemplate configuration:
        compiled: true
    }
);
Ext.define('GS.view.Home', {

    extend: 'Ext.Panel',
    xtype: 'home',
    config: {
        title: 'Home',
        tpl: tpl,
        data: [],
        items: [

            {
                xtype: 'button',
                text: 'Click Me',
                ui: 'forward'
            }
        ]
    }
});

But this results in the button being placed above the template HTML:

enter image description here

I've also tried adding a panel to the items array with the tpl value set to the template but this results in no HTML being rendered at all.

Anyone know how I can use a template but still have a button at the bottom? If your answer is to just include a button with the correct class name into the template html then how do I link it back to the controller? (I'd usually use the itemId config property).

Cheers,

James

Upvotes: 0

Views: 1150

Answers (1)

Claude
Claude

Reputation: 9980

There is a difference between your two approaches: the first one has a panel, that contains a pannel with the html, and the button.. The second one has a panel that contains both the html and the button (and I guess then sencha puts the html under the button).

Using two panels in the bottom solution should do the trick:

Ext.define('GS.view.Home', {

    extend: 'Ext.Panel',
    xtype: 'home',
    config: {
        title: 'Home',
        items: [
           {
               xtype: 'panel',
               tpl: tpl,
               data: [],
            },

            {
                xtype: 'button',
                text: 'Click Me',
                ui: 'forward'
            }
        ]
    }
});

Upvotes: 2

Related Questions