Home » Sencha Touch » Sencha Touch Views

Sencha Touch Views

Welcome to the second module of this series. In this module we will learn about sencha touch views, various view components provided by Sencha touch, component lifecycle, how to bind click events. Moving forward we will learn about different type of Sencha touch layouts and lastly we will learn how to create and customize sencha touch message box and dialog box.

Sencha touch Views are the Visual components that are displayed to user. Any container or component displayed on screen is view. User directly interact with these views and controller performs actions based on the user’s input.

Below are the topics that we will cover in this module:

  • Views Basic properties
  • Components
  • Component Lifecycle
  • Component Docking
  • Component Aligning
  • Ext.Xtemplate
  • Containers
  • Container Basics
  • Layout Manager
  • Class hierarchy and layout
  • hbox, Vbox, fit, Card layout
  • Toolbars, titlebar, buttons
  • Tabpanel
  • Adding animation to Card and tab layout
  • Navigation View
  • Carousel
  • Alerts
  • Message Box

 

 Views Basic properties

In Sencha touch most of the views are subclass of Ext.component which means they all have same set of properties, events and methods.

Below are few properties that are commonly used in views:

 app.js

Ext.Viewport.add({
      xtype: 'panel',
      border:'5',
      cls:'component-style',
      html: '<h6>This is First sample</h6>',
      centered:true,
      height:400,
      width:600,
      padding: '2 3 4 5',
      scrollable:true,
     //styleHtmlContent:true,
     //hidden:true,
     style:{
        color:'red',
        'font-size':'1em'
     },
     listeners: {
         initialize: function() {
              Ext.Msg.alert('Initialized Panel’, ‘This is the Initialized panel');
          },
          items:[{
               xtype:'component',
               contentEl:'id_loginForm'
           }]
      }
});

 html:

<div id="id_loginForm">
     <input type="text" placeholder="Username"/><br/>
     <input type="text" placeholder="Password"/>
</div>

css:

.component-style{
   background-color: #fff;
}

In above code snippet I have added a panel to viewport. This panel has few configurations that are commonly used almost in every view. So let’s go through each config one by one.

border – sets component’s border width in given px. In our case border width of panel is 5px.

cls – Class name that we want to apply on given component. In our case we are applying “component-style” class to the panel which will add white background color.

html – this property displays the given value on screen. In our case it will display “This is First sample”.

centered – this property aligns the component to the center of screen if true. By default it is false.

height – set the height of component in px.

width – set the width of component in px.

padding- set the padding of component in px. In our case padding will be “2 3 4 5″ which means 2px top, 3px right, 4px bottom, 5px left.

scrollable – This property tells whether the component should be scrollable or not. It is always a good practice to set scrollable to “true” if we are dealing with large data. By default it is false. Setting this property to true do not display the scrollbar by default, scroll bars are visible only when user scroll the content.

styleHtmlContent: This property is by default false, setting it to true render the content as HTML. To see the difference, copy/paste the above code and uncomment styleHtmlContent.

hidden -hides the component if set to true.

style – this config sets the style of component. To apply multiple styles on component we can use key-value pair as we used above. In our case the panel will have a font-size of 1em and text-color as red.

listeners – this config will add listeners to that component. Listeners are another important concept of Sencha because they define how to handle events. In our case, as soon as the panel gets initialized the alert message will be displayed saying “Initialized Panel”. We will cover them later in detail.

Items: items are used to add nested components inside component i.e. the child items of the component. In our case we are nesting one more component inside panel.

contentEl – This config basically sets the already defined component in given component. In our case “id_loginForm” (defined in html) will be added as an item of our panel. contentEl property takes css selectors.

 

Components

  •       Showing, hiding and destroying component:

Most of the UI classes in Sencha touch are subclass of Ext.component. Components can be hidden, shown and destroyed at any point of time.

Below code show how to hide, show and display panel with button click.

Ext.setup({
   onReady:function(){
      var userPanel = Ext.create('Ext.Panel',{
      html:"Display Panel",
   });

   var btn_hidePanel = Ext.create('Ext.Button',{
      text:'Hide Panel'
   });

   btn_hidePanel.on({
      tap:function(){
         if(userPanel.isHidden()){
          // do not do anything if panel is already hidden
         }else{
          userPanel.hide();
         }
      }
   });

   var btn_ShowPanel = Ext.create('Ext.Button',{
      text:'Show Panel',
      listeners:{
         tap:function(){
          if(userPanel.isHidden()){
            userPanel.show();
          }else{
            // do not do anything if panel is already shown
          }
         }
      }
   });

   var btn_destroyPanel = Ext.create('Ext.Button',{
      text:'Destroy Panel',
      listeners:{
         tap:function(){
          userPanel.destroy(); // will destroy the panel
         }
      }
   });

   var buttonPanel = Ext.create('Ext.Panel',{
      docked:'left', // docking the panel to left of the screen
      items:[btn_ShowPanel, btn_hidePanel, btn_destroyPanel]
   });

   Ext.Viewport.add({
      xtype:'panel',
      items:[buttonPanel,userPanel]
   });
 }
});

 

<span style="font-size: medium; font-family: Georgia, 'Times New Roman', 'Bitstream Charter', Times, serif; line-height: 19px;">- In above code I have created:</span>

- Above code have three buttons “Show Panel”, “Hide Panel” and “Destroy Panel”; one main panel “UserPanel” which we will hide, show and destroy respectively; another panel “buttonPanel” which will hold all the three buttons and finally a viewport to hold both the panels.

 - You must have noticed buttonPanel has a config called “docked” whose value is left, which means this panel will be docked at left of the screen. I will cover “dock” later in this section.

- Hide and show could have been achieved by using single button but I just wanted to show two different ways of adding click events to the button, that is why I have separate show and hide buttons. One way to add listeners is, by defining tap event in button variable itself like I did in “btn_ShowPanel” and “btn_destroyPanel”. Other way is, by attaching tap event using on() method (on() method is used to append event handler on an element.) as I did for “btn_hidePanel“.

 -  At last I am adding  “xtype:panel” to viewport and then adding “buttonPanel” and “userPanel” as child items of that panel.

- Tapping on “Show panel” button will check whether the panel is hidden or not. This check can be achieved by using panel.isHidden() which will return Boolean value. If the panel is hidden then show it else don’t do anything. Same check goes with “Hide panel”.

- To destroy the panel I am using panel.destroy(). destory() method is very important because it helps to keep the DOM lightweight. It is always a good practice to destroy the component whenever it is not needed; this keeps the DOM lightweight and results in optimized performance. Once you destroy the panel, show and hide will not work because the panel will no longer be available.

 

  •  Component Lifecycle: 

Each component in Sencha touch has a lifecycle which mainly comprise of 5 stages – initialize, painted, show, hide and destroy.

Below is the sample which has a panel with all these methods, to demonstrate component lifecycle I am using the same panel from previous example: 

var userPanel = Ext.create('Ext.Panel',{
   html:"Display Panel",
   listeners:{
      initialize:function(){
        console.log("component initialized");
      },
      show:function(){
        console.log("component shown");
      },
      destroy:function(){
        console.log("component destroyed");
      },
      hide:function(){
         console.log("component hidden");
      },
      painted:function(){
        console.log("component painted");
      }
   }
});

 initialize() method will be called once the component is initialized.

painted() method will be called once the panel is painted on screen.

show() method will be called when panel is shown on screen.

hide() method is called whenever we hide the panel.

destroy() method is called whenever the panel is destroyed.

So the description of almost every method is pretty much straight forward. But there are few important points; like initialize() method gets called only once (i.e. when the component is initialized) and painted() methods get called every time the component is painted on screen. To check this scenario let’s run the code and check the console. Below is the set of actions and their result with reason: 

-> Start the application

//console: component initialized - because the panel has been initialized for the first time.
//console: component painted - because the panel has been painted on screen.

-> Now click hide button

//console: component hidden - because the panel has been hidden by using panel.hide() method.

 -> Now click show button

//console: component painted - because the panel has been re-painted on screen
//console: component shown - because panel has been shown on screen.

 -> Now click destroy

//console: component destroyed - because panel has been destroyed

 -> Now click show or hide

//console: Nothing will happen because the panel no longer exists.
  •  Component Docking

- docking is another important config of Sencha touch components. It helps to dock the component on the screen. You can add this config to any of the Sencha touch component.

- Possible values of docking are left, top, right or bottom.

In above example we used docked config in “buttonPanel” which will dock all the buttons to the left of the screen.

 

  • Ext.Xtemplate

Ext.Xtemplate is basically used to render the template. Let’s take a look at the example to understand it better. 

Ext.setup({
   onReady:function(){
      var userData = Ext.create('Ext.XTemplate',
        '<h4>{title}</h4>'+
        '<div>Username: {username}</div><div>emailID: {email}</div><div>country: {country}</div>'
      );

      var userPanel = Ext.create('Ext.Panel',{
          tpl:userData,
          centered:true,
          data:{
             title:'User Information',
             username:'Himanshu Chahar',
             email:'himanshuchahar@gmail.com',
             country:'India'
          }
       });

      Ext.Viewport.add(userPanel);
    }
});

- In above example we have userData variable which will create Ext.Xtemplate which will be used to render UI.

- Next is the “userpanel” which will create a panel.

- tpl – we basically pass our template to this config. In our case we use “userData” variable to define template, so we will pass “userData” to tpl config.

- data – This is an object which we pass to Ext.Xtemplate. Ext.Xtemplate takes this object and renders the values.

 

Containers

Container is a subclass of Ext.component, so container is nothing but a component with additional features, like container can have child components, container can add and remove other components. Basically, containers are used to have nested items or views. Viewport is also a container which we used in previous example to add child items.

Now let’s create a simple container to get a better understanding.

Ext.setup({
   onReady:function(){
      var redPanel = {
         title:'Red',
         html:'Red Panel',
         flex:1,
         style:{
          'background-color':'red'
         }
      }
      var greenPanel = Ext.create("Ext.Panel",{
         title:'Green',
         html:'Green Panel',
         flex:1,
         style:{
            'background-color':'green'
         }
      });

      var bluePanel = {
         title:'Blue',
         html:'Blue Panel',
         flex:1,
         style:{
          'background-color':'blue'
         }
       }

      var mainPanel = Ext.create('Ext.Panel',{
          items:[redPanel,greenPanel,bluePanel]
      });

      Ext.Viewport.add(mainPanel);
   }
});

Above example shows the usage of container. I have three panels’ redPanel, greenPanel and bluePanel. I can either create an object as i did for redPanel and bluePanel or I can create a panel like I did for greenPanel.

In mainPanel I am adding all the three panels and then adding that panel to Viewport. The important point to note here is we have not added any DOM element to redPanel and bluePanel, they are just objects but when we add them as a child item in mainPanel they get rendered as a <div> element.

So in simple words by default every component in Sencha touch is rendered as a <div> element.

 

- auto, hbox, Vbox, fit, Card layout

Sencha touch has different type of layout to position the content on the screen.

To show all these layouts I will be using the above code only and will add layout config in mainPanel.

 

  • auto:

auto is a default layout of Sencha touch; that means if we do not define any layout, all the components will be arranged using auto layout.

var mainPanel = Ext.create(‘Ext.Panel’,{

       layout:{
            type:'auto'
        },
        items:[redPanel,greenPanel,bluePanel]
});

  

  • fit:

fit layout is same as auto layout, the only difference is it makes the last child item to occupy the fullscreen space. 

var mainPanel = Ext.create('Ext.Panel',{
     layout:{
         type:'fit'
     },
     items:[redPanel,greenPanel,bluePanel]
});

 // Will display bluePanel on screen.

 

  • Card:

Card layout arranges items in form of card deck. Which means each item acts as a card and decked over the other card. Each item in card layout occupies the fullscreen space.

By default first child is active. To change the active item dynamically we can use panel.setActiveItem(item_index). 

var mainPanel = Ext.create('Ext.Panel',{
      layout:{
         type:'card'
      },
      items:[redPanel,greenPanel,bluePanel]
});

mainPanel.setActiveItem(1);

 // will display greenPanel on screen.

setActiveItem() method takes 0 based index value so passing 1 will make second child item active.

Till now all the layout options display only one component on the screen. But what if you want to display multiple components on the screen? Answer is “vbox” and “hbox”; these are two most commonly used layouts in every application.

Before going deeper into these layouts let’s read about flex, align and pack.

 

  • flex:

In vbox and hbox layout, every item in the panel only occupies its own space and leave remaining space blank. To make the panels occupy the whole space we use flex, flex is the relative attribute.

Ext.setup({
   onReady:function(){
      var redPanel = {
            title:'Red',
            html:'Red Panel',
            flex:1,
            style:{
               'background-color':'red'
            }
       }

       var greenPanel = Ext.create("Ext.Panel",{
             title:'Green',
             html:'Green Panel',
             flex:1,
             style:{
                'background-color':'green'
             }
        });

        var bluePanel = {
              title:'Blue',
              html:'Blue Panel',
              flex:1,
              style:{
                  'background-color':'blue'
              }
         }

         var mainPanel = Ext.create('Ext.Panel',{
               layout:{
                 type: 'hbox'
               },
               items:[redPanel,greenPanel,bluePanel]
          });

          Ext.Viewport.add(mainPanel);
     }
});

 

In above code I have flex 1 for each panel, so each item would be in ratio 1:1:1.

If we want greenPanel to be twice of redPanel and bluePanel to be thrice of redPanel then the flex should 1:2:3 respectively for each panel.

 

  • pack:

pack config basically tells how the child items will positioned in your current layout manager. For example if we have 

layout:{
   type:'hbox',
   pack:'center'
}

the child items will be packed horizontally centered. 

If we have 

layout:{
  type:'vbox',
  pack:'center'
}

then the child items will be packed vertically centered. 

the possible values of pack are: 

left/start : child items are positioned to the left of screen.

right/end : child items are positioned to the right of screen.

center : child items are positioned in center of screen.

justify : child items are positioned evenly across the container. 

left/start is the default value for pack.

 

  • align:

Just like pack, align config basically tells how the child items will aligned across opposite axis of your current layout manager. For example if we have 

layout:{
   type: 'vbox',
   align:'center'
}

Then the child items will be aligned horizontally centered.

Possible values for align are:

start : child items are packed together at left side of container

center : child items are packed together at mid-width of container

end : child items are packed together at right side of container

stretch : child items are stretched vertically to fill the height of the container 

 

stretch is the default value for align. 

Now let’s see them in action.

 

- hbox and vbox

hbox and vbox position the components on horizontal axis and vertical axis respectively. 

Ext.setup({
   onReady:function(){
      var redPanel = {
            title:'Red',
            html:'Red Panel',
            style:{
                'background-color':'red'
             }
        };

        var greenPanel = {
             title:'Green',
             html:'Green Panel',
             style:{
                 'background-color':'green'
             }
         };

         var bluePanel = {
               title:'Blue',
               html:'Blue Panel',
               style:{
                   'background-color':'blue'
                }
          };

           var mainPanel = Ext.create('Ext.Container',{
               fullscreen:true,
               layout:{
                  type: 'hbox',
                  pack:'center',
                  align:'end'
               },
               items:[redPanel,greenPanel,bluePanel]
           });

            Ext.Viewport.add(mainPanel);
     }
});

 Try changing the value of align and pack and check out all the combinations.

 

Carousel

Carousel in Sencha touch allows the user to swipe left-to-right or  top-to-bottom with finger sliding. Carousel displays only one page a time and internally uses card layout. 

Ext.setup({
   onReady:function(){
      var redPanel = {
          title:'Red',
          html:'Red Panel',
          style:{
              'background-color':'red'
          }
       };

       var greenPanel = {
           title:'Green',
           html:'Green Panel',
           style:{
               'background-color':'green'
           }
         };

         var bluePanel = {
            title:'Blue',
            html:'Blue Panel',
            style:{
               'background-color':'blue'
            }
         };

         var mainPanel = Ext.create('Ext.Carousel',{
             fullscreen:true,
             items:[redPanel,greenPanel,bluePanel]
          });

         Ext.Viewport.add(mainPanel);
     }
});

The code is same as previous examples, the only difference is we have changed the view type to Ext.carousel which will render the items in form of card and with swipe functionality.

Carousel automatically adds bullets at the bottom of the screen which indicates the number of items in carousel and active item.

In above code, user can swipe the items horizontally.

To change direction, add direction:’vertical’ property to mainPanel. Adding this attribute will allow user to swipe the items vertically i.e. from top to bottom.

 

Tabpanel

Just like carousel, Sencha touch tabPanel widget also displays only one item at a time and uses card layout internally. The only difference is it adds buttons for each item, by using which user can switch between pages. 

Ext.setup({
   onReady:function(){
      var redPanel = {
          title:'Red',
          html:'Red Panel',
          style:{
            'background-color':'red'
          }
       };

       var greenPanel = {
           title:'Green',
           html:'Green Panel',
           style:{
              'background-color':'green'
           }
        };

        var bluePanel = {
           title:'Blue',
           html:'Blue Panel',
           style:{
              'background-color':'blue'
           }
        };

        var mainPanel = Ext.create('Ext.TabPanel',{
            fullscreen:true,
            items:[redPanel,greenPanel,bluePanel]
        });

         Ext.Viewport.add(mainPanel);
    }
});

Above code will add tabBar with three buttons at top of the screen.

So by default tab is docked at the top of the screen, to position it at bottom, use tabBarPosition:’bottom’ in mainPanel.

the lower tabBar allows to add icon also to each button. To do that use iconCls:”iconClassName”

Below code will display bottom tabBar with icon on each button. 

Ext.setup({
   onReady:function(){
      var redPanel = {
           title:'Home',
           html:'Home Panel',
           iconCls:'home',
           style:{
              'background-color':'red'
           }
        }; 

       var greenPanel = {
           title:'Setting',
           html:'Setting Panel',
           iconCls:'settings',
           style:{
               'background-color':'green'
           }
        };

        var bluePanel = {
             title:'More',
             html:'More Panel',
             iconCls:'more',
             style:{
                  'background-color':'blue'
              }
         };

        var mainPanel = Ext.create('Ext.TabPanel',{
             fullscreen:true,
             tabBarPosition:'bottom',
             items:[redPanel,greenPanel,bluePanel]
         });

        Ext.Viewport.add(mainPanel);
    }
});

The only difference is, I have added iconCls to each item and added tabBarPosition:’bottom’ to the mainPanel

There are 100′s of icon classes supported by sencha touch iconCls config which can easily ne found on internet.

 

Animated navigation in Card and tab layout

So far we have seen how to navigate between pages by using tabpanel. Page navigation in tabPanel uses slide animation by default, but animation can be changed by using animation property. 

var mainPanel = Ext.create('Ext.TabPanel',{
    fullscreen:true,
    tabBarPosition:'bottom',
    layout:{
        animation:{
            type:'cube'
        }
     },
     items:[redPanel,greenPanel,bluePanel]
});

Above code will add cube animation to the panel. The other type of animations that Sencha touch supports are fade, pop, slide and flip.

We can change the animation speed also by adding duration config. 

var mainPanel = Ext.create('Ext.TabPanel',{
       fullscreen:true,
       tabBarPosition:'bottom',
       layout:{
          animation:{
             type:'cube',
             duration:3000 // duration in milliseconds
          }
        },
        items:[redPanel,greenPanel,bluePanel]
});

 

Navigation View

Sencha touch NavigationView displays one view at a time and allows us to navigate between views, it internally uses card layout. NavigationView displays titleBar at the top of the screen and allows to push and pop views at any time. 

var navigationView = Ext.create('Ext.NavigationView',{
    fullscreen: true,
    items: [{
         title: 'MainPanel',
         items: [{
           xtype: 'button',
           text: 'Display second panel',
             handler: function() {
              navigationView.push({
                 title: 'Child Panel',
                 html: 'Child Panel'
              });
           }
        }]
     }]
});

Ext.Viewport.add(navigationView);

 - Above code shows very basic usage of navigationView. We will cover more about navigationView in store and model module.

 

TitleBar and toolbars

In Sencha touch, titlebar are used as a docked item and displayed at top of the screen, you can add item to titlebars.

toolbars are also same as titlebars, the only difference is in titleBar the title is aligned in the middle by default.

We can dock both to top, right, bottom and left of the screen.

Below example shows how to add titleBar. 

var titleBar = Ext.create('Ext.TitleBar',{
   docked:'top',
   title:'Hello World',
   items:[{
      iconCls:'home',
      align:'left',
      listeners:{
        tap:function(){
           console.log("Navigate to home page");
        }
      }
    },{
        iconCls:'settings',
        align:'right',
        listeners:{
          tap:function(){
            console.log("Navigate to settings page");
          }
        }
    }]
});

Ext.Viewport.add(titleBar);

 -This example will add titlebar at top of the screen, toolBar can also be added in the same way.

- In above example we are adding only icon buttons. 

We can also add text to buttons. 

var titleBar = Ext.create('Ext.TitleBar',{
   docked:'top',
   title:'Hello World',
   items:[{
      iconCls:'home',
      align:'left',
      text:'back',
      ui:'back',
      listeners:{
         tap:function(){
            console.log("Navigate to home page");
         }
      }
   },{
      iconCls:'settings',
      align:'right',
      listeners:{
         tap:function(){
            console.log("Navigate to settings page");
         }
       }
   },{
      align:'right',
      ui:'forward',
      text:'forward',
      listeners:{
        tap:function(){
            console.log("Move Forward");
        }
      }
  }]
});

Ext.Viewport.add(titleBar);

- In above example I am adding three buttons. First and last button has a ui property which changes the ui of button.

 

Message Box

Sencha touch provides number of ways to display messages. In this topic we will cover alerts, prompts and confirm messages

 

  • Alerts

Sencha touch alert display the standard alert box with Ok button. We can set title and message of an alert box. 

var displayAlert = Ext.create('Ext.Button',{
   text:'Current time',
   listeners:{
     tap:function(){
       Ext.Msg.alert("Current Time", new Date());
     }
   }
});

Ext.Viewport.add({
   xtype:'container',
   fullscreen:true,
   items:[displayAlert]
});

 

Above code have button “Current Time”; I have attached a tap listener to that button, tapping on that will open an alert box and will display current time.

 

  • Confirm

Sencha touch confirm message can be created by using Ext.Msg.comfirm() which displays title, message and yes/no buttons. 

var displayAlert = Ext.create('Ext.Button',{
   text:'Display Alert',
   listeners:{
     tap:function(){
       Ext.Msg.confirm('Recommendation','Would you like to recommend this articel?',function(e){
          if(e=='yes'){
             console.log("Thanks for the Recommendation");
          }
          else{
             console.log("CLOSE");
           }
        });
     }
   }
});

Ext.Viewport.add({

   xtype:'container',

   fullscreen:true,

   items:[displayAlert]

});

- Confirm message take four parameters, first parameter is the title of message, second parameter is the message to be displayed, third parameter is the callback function which will called when user clicks on “yes” and “no” button, forth parameter is optional where you can pass context.

- Tapping on yes and no button automatically close the dialog box. 

 

  • Prompt

Sencha touch prompt can be created by using Ext.Msg.Prompt() which displays title, message, OK/Cancel buttons and text box to enter some text. The prompt can be a single-line or multi-line textbox. If a callback function is passed it will be called after the user clicks either of the buttons; and the id of the button that was clicked (could also be the top-right close button) and the text that was entered will be passed as two parameters to the callback. 

var displayAlert = Ext.create('Ext.Button',{
   text:'Display Alert',
   listeners:{
     tap:function(){
        Ext.Msg.prompt('Recommendation','Write your Recommendation',function(e,value){
          if(e=="ok"){
            console.log(value);

          }else{
             console.log("close");
          }
       },null);
      }
   }
});

Ext.Viewport.add({
    xtype:'container',
    fullscreen:true,
    items:[displayAlert]
});

- Above example will prompt user to enter the text, if user clicks on Ok button the entered value be logged. Tapping on cancel will close the dialog box.

- By default single-line textbox will be displayed. To display multi-line textbox you can set optional multiLine parameter to true.

- You can pass default value of the text input element in optional “value” parameter.

- You can pass additional options also like placeHolder. 

Below example show how to set the values in prompt.

Ext.Msg.prompt('Recommendation','Write your Recommendation’, function(e,value){
   if(e=="ok"){
      console.log(value);
   }else{
      console.log("close");
   }
},
null, // scope
true,// multiline
"Nice article", // default value
{
   placeHolder:'Write Recommendation' //additional options
});

Till now we have learned about three native message boxes that are provided by Sencha touch, but what if we want our own dialog box? Answer is Show() method.

- Show() method allows us to set specified configuration.

- All the above message box use show method internally.

Let’s take a look at show method 

Ext.Msg.show({
   title: 'Recommendation', // title of message box
   message: 'Write your Recommendation', // message displayed in message box
   prompt : { maxlength : 160, placeHolder : "Write Recommendation" }, // display the prompt and set its configuration
   fn: function(e,value) {  // callback function
      if(e=="submit"){
        console.log("Submit my Recommendation"+value);
      }
      else if(e=="later"){
        console.log("Remind me later");
      }
      else{
        console.log("close");
      }
   },
   buttons: [{text:'Submit',itemId:'submit'},{text:'Later',itemId:'later'},{text:'Cancel',itemId:'cancel'}] // buttons to be displayed on message box
});

This code will create custom dialog box. You can have any number of buttons in your custom dialog.

This is all about Sencha touch view, in next module you will learn how controller can be used with views, how model/store data can be displayed in view and other important concepts about sencha touch views.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>