How to create this layout

[dbottillo]

Hi to everyone,

i'm trying to use Sencha to create a mobile web application

layout that i want to create is: a title bar up in every page, body of the page and a bottom bar

i try this:

Ext.setup({
    icon: 'icon.png',
    tabletStartupScreen: 'tablet_startup.png',
    phoneStartupScreen: 'phone_startup.png',
    glossOnIcon: false,
    onReady: function() {
        var tabpanel = new Ext.TabPanel({
            tabBar: {
                dock: 'bottom',
                layout: {
                    pack: 'center'
                }
            },
            fullscreen: true,
            ui: 'light',
            animation: {
                type: 'slide',
                cover: true
            },
            defaults: {
                scroll: 'vertical'
            },
            items: [{
                title: 'Offer',
                html: '<div style="width: 100%; background-color: black;color: white; font-size: 20px; padding: 5px;">Mobile widget Title</div>Offer</p>',
                iconCls: 'info',
                cls: 'card1'
            }, {
                title: 'Search',
                html: '<h1>Favorites Card</h1>',
                iconCls: 'search',
                cls: 'card2',
        addEvents : function(o){
            alert("ciao");
            }
            }, {
                title: 'Settings',
                html: '<h1>Settings Card</h1>',
                cls: 'card4',
                iconCls: 'settings'
            }, {
                title: 'Refresh',
                html: '<h1>Refresh</h1>',
                cls: 'card4',
                iconCls: 'Refresh'
            }]
        });
    }
});

The title bar i put in the html of the first item...i have to put in every html item?
In second time, i'm trying to put an onclick event in one of the item of the toolbar...
i want that Refresh item don't put a new html in the panel...but just refresh the current panel...any hint? ( i try addEvents in the code but it fire when i load the page not when i click on the button)

i'm new with Sencha (and also Ext)

thank you

Daniele

[meyerovb]

This should give you an idea of where to head:

Ext.setup({
    onReady: function () {
        new Ext.TabPanel({
            fullscreen: true,
            animation: { type: 'cube', direction: 'down' },
            tabBar: { dock: 'bottom', layout: { pack: 'center'} },
            dockedItems: [{ id: 'topToolbar', dock: 'top', xtype: 'toolbar', title: 'My title'}],
            items: [{ title: 'Title 1', html: 'card1', iconCls: 'settings' },
                    { title: 'Title 2', html: 'card2', iconCls: 'favorites',
                        listeners: {
                            activate: function () {
                                this.add({ html: 'hi' });
                                this.doLayout();
                            }
                        }
                    }],
            defaults: {
                listeners: {
                    beforeactivate: function () {
                        Ext.getCmp('topToolbar').setTitle(this.title);
                    }
                }
            }
        });
    }
});

[dbottillo]

ok thank you!

i have almost finished creating the template

if have more questions, i'll ask here

Thank you for the help

Daniele

[dbottillo]

thank you meyerovb for help

now i wonder to know hot to put an element inside a template..
i explain better

in my template:

            tpl: [

                  '<tpl for=".">',   

            '<div style="width: 90%; height: 70px; margin: 5px auto; background-color: white">',
                '<div style="width: 90px; float:left">',
                    '<img src="{img}" style="margin-top: 5px; margin-left: 5px;" alt="{alt}" />',                    
                '</div>',
                '<div style="float:left; font-size: 12px">',
                    '<span style="font-size: 18px; color: darkblue; font-weight: bold">{name}</span><br/><br/>',
                    '{text}',
                '</div>',
                '<div style="width: 50px; float:right">',
                    'HERE',                    
                '</div>',
            '</div>',
            '<div style="clear:both"></div>',

                  '</tpl>'
            ],

where there is written 'HERE', i want to put a button that lead the page to a new section (in this section i want also to return back)

how can i do this? i didn't find anything about insert an Ext.component inside a template! maybe i have to define the element out of the template and refer to it? but how?

thank you to everyone

Daniele

[TommyMaintz]

Unfortunately there is no easy way to put a component inside a Template. The easiest way to achieve this is to put the markup for a button inside your template. You can use the debugger tool in chrome or safari to check what the markup looks like for the button you want. Then you attach a listener to the container that uses the template, delegated to your buttons that handles the tapping of them. Something like:

listeners: {
    tap: {
        fn: function(e, target) {
            // do something here
        },
        delegate: 'div.x-button'
    }
}

[dbottillo]

ok thank you for reply

i try this but it doesnt'work

 var offerte = new Ext.Component({
           title: 'Title',  
       iconCls: 'more',
       scroll: 'vertical',
           tpl: [
                  '<tpl for=".">',   
            '<div style="width: 90%; height: 70px; margin: 5px auto; background-color: white">',
                '<div style="width: 90px; float:left">',
                    '<img src="{img}" style="margin-top: 5px; margin-left: 5px;" alt="{alt}" />',                    
                '</div>',
                '<div style="float:left; font-size: 12px">',
                    '<span style="font-size: 18px; color: darkblue; font-weight: bold">{name}</span><br/><br/>',
                    'da 500 €',
                '</div>',
                '<div style="width: 50px; float:right">',
                    '<div class="x-button">bla bla</div>',                    
                '</div>',
            '</div>',
            '<div style="clear:both"></div>',
                  '</tpl>'
            ],
        listeners: {
            beforeactivate: function () {
                        Ext.getCmp('topToolbar').setTitle(this.title);
                    },
            tap: {
                fn: function(e, target) {
                   alert("hello");
                },
                delegate: 'div.x-button'
                }        
                }
        });

if i click on 'bla bla' div it doesn't appear alert hello!

where is the problem?

Thank you

Daniele