Friday 12 April 2013

How to display Panel popup on Button tap in Sencha Touch 2

Today, we are going to see how we can display panel popup when user click/tap on button. For this, sencha touch provides showBy() function, which is used to shows a component by another component. The Component will appear in a rounded blackbox with a tip pointing to a reference component.This method accepts the following parameters
  • component: The target component to show by.
  • alignment: The specific alignmnet(optional).
Let me demonstrate this with an example, First we will display a Button with name "Companies", by clicking on that, we will show a panel as a popup which will display list of companies with a tip pointing to button. Now, Let's see the implementation.

Define a Store

Let's create a Companies store that contains fields company and added list of companies under data config property. Instead of hard coding company list, you can load companies from web services using Ajax Proxy URL property.  
Ext.define('MyApp.store.CompaniesStore', {
    extend: 'Ext.data.Store',

    config: {
        data: [
            {
                company: 'Microsoft'
            },
            {
                company: 'Google'
            },
            {
                company: 'Amazon'
            },
            {
                company: 'Apple'
            },
            {
                company: 'IBM'
            },
            {
                company: 'Dell'
            },
            {
                company: 'Others'
            }
        ],
        storeId: 'CompaniesStore',
        fields: [
            {
                name: 'company'
            }
        ]
    }
});

Define a Panel

let's create a panel with class name as 'Companies' which extends Ext.Panel Class and alias name is set as companies. We are going to configure panel properties (width, height, itemId and so on) using config property.

Now, We are going to add a list component (Ext.list) as the items for panel component and assign the above registered companies store using store config. We also defined a itemTpl config, which act as the HTML template for the list. This List will loop the store records and display in list as items using itemTpl.
Ext.define('MyApp.view.Companies', {

    extend: 'Ext.Panel',
    alias: 'widget.companies',

    config: {
        height: '50%',
        itemId: 'companies',
        left: '5%',
        padding: 10,
        top: '0%',
        width: '40%',
        hideOnMaskTap: true,
        modal: true,
        items: [
            {
                xtype: 'list',
                height: '100%',
                itemTpl: [
                    '<div>{company}</div>'
                ],
                store: 'CompaniesStore'
            }
        ]
    }
});

Define a Button
Ext.define('MyApp.view.MyContainer', {
    extend: 'Ext.Container',

    config: {
        items: [
            {
                xtype: 'button',
                itemId: 'mybutton',
                text: 'Companies'
            }
        ]
    }
});

Define a Controller class

This controller class is used to get the reference of companies view component using ref config property. Also using control config property, we have attached  tap event to the button. When controller catches the tap event for the button, it will call the onMybuttonTap() function.

Inside onMybuttonTap() function, we are displaying companies view component as the popup windows by button component using showBy().
Ext.define('MyApp.controller.MyController', {
    extend: 'Ext.app.Controller',

    config: {
        refs: {
            companiesView: {
                autoCreate: true,
                selector: '#companies',
                xtype: 'companies'
            }
        },

        control: {
            "button#mybutton": {
                tap: 'onMybuttonTap'
            }
        }
    },

    onMybuttonTap: function(button, e, options) {

        var me = this;
        var popup = me.getCompaniesView();
        popup.showBy(button);

    }
});

When i run this in Google Chrome, Following is the output


Hope, you enjoyed this post.


10 comments:

  1. I am searching for this topic. You really saved my development time. Nice Post. Thanks a lot

    ReplyDelete
  2. Hi,

    I a'm new with Sencha Control.

    I want to display model popup on button click like your demo, i unable to do this, can you provide and video on this topic.

    Your help is great appreciated.
    Thanks in advance.

    ReplyDelete
    Replies
    1. Hi Pravesh,
      The above one is display modal Popup Box. If you require modaless Popup Box, You need to set 'modal' configuration to false in the Panel View Component.

      Thanks..

      Delete
  3. This is exactly what I have been looking for, but I only get a white box, no list (box looks great!). I even set the empty text and set the store to a different list to make sure I wasn't just pulling up no data.

    Any clues what would cause the list to just not show up?

    ReplyDelete
  4. Answered my own question... for no reason at all I tried adding layout: 'fit'... and it started working.

    Anyway great post.

    ReplyDelete
    Replies
    1. Hi Kevin,

      Thanks for your appreciation. Happy that your issue is resolved by yourself.

      Thanks
      Suresh

      Delete
  5. Hmm weird, i dont get the getCompaniesView() part. Where does that come from?

    ReplyDelete
    Replies
    1. Roy,
      It will be created from the 'companiesView' name from 'refs' configuration. Sencha touch will automatically attach 'get' keyword and make first list of name in CAPS. So it will be getCompaniesView.

      Delete
  6. Hi,
    Thanks for the tutorial. But Please let me know what if i want to close this popup on button click. how i can achieve this.

    ReplyDelete
  7. hi.. thanks a lot.. you saved my time..

    ReplyDelete

Related Posts Plugin for WordPress, Blogger...