1. #1
    Sencha User
    Join Date
    Jun 2010
    Posts
    134
    Vote Rating
    -1
    dbottillo is an unknown quantity at this point

      0  

    Default How to create this layout

    How to create this layout


    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:

    Code:
    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

  2. #2
    Sencha - Community Support Team
    Join Date
    Jun 2010
    Posts
    220
    Vote Rating
    0
    meyerovb is on a distinguished road

      0  

    Default


    This should give you an idea of where to head:

    Code:
    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);
                        }
                    }
                }
            });
        }
    });

  3. #3
    Sencha User
    Join Date
    Jun 2010
    Posts
    134
    Vote Rating
    -1
    dbottillo is an unknown quantity at this point

      0  

    Default


    ok thank you!

    i have almost finished creating the template

    if have more questions, i'll ask here

    Thank you for the help

    Daniele

  4. #4
    Sencha User
    Join Date
    Jun 2010
    Posts
    134
    Vote Rating
    -1
    dbottillo is an unknown quantity at this point

      0  

    Default


    thank you meyerovb for help

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

    in my template:
    Code:
                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

  5. #5
    Sencha User
    Join Date
    Mar 2007
    Location
    Haarlem, Netherlands
    Posts
    1,243
    Vote Rating
    8
    TommyMaintz will become famous soon enough

      0  

    Default


    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:

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

  6. #6
    Sencha User
    Join Date
    Jun 2010
    Posts
    134
    Vote Rating
    -1
    dbottillo is an unknown quantity at this point

      0  

    Default


    ok thank you for reply

    i try this but it doesnt'work
    Code:
     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

Similar Threads

  1. how to create quadro border Layout ?
    By Atum in forum Ext GWT: Discussion
    Replies: 0
    Last Post: 15 Mar 2010, 11:31 PM
  2. Create a linebreak within a column layout -
    By phpfreak in forum Ext 2.x: Help & Discussion
    Replies: 1
    Last Post: 11 Dec 2009, 3:31 PM
  3. How to create this Layout
    By bodiam in forum Ext 2.x: Help & Discussion
    Replies: 1
    Last Post: 1 Apr 2008, 10:30 AM
  4. is it possible to create this layout ?
    By DeeZ in forum Ext 2.x: Help & Discussion
    Replies: 5
    Last Post: 11 Oct 2007, 8:05 AM
  5. How to create a tool bar without layout
    By ali_mcs3_qau in forum Ext 1.x: Help & Discussion
    Replies: 1
    Last Post: 26 Jun 2007, 3:51 AM

Thread Participants: 2

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar