Sencha Touch floating Panel Example

How to display a form in Sencha Touch that overlays the existing screen more like a popup window


In this example we have List of items and a button for some action. When the user taps on the button or an item on the row the floating panel shows up. If you save the form or tap outside the form panel on the mask it will hide the form.


Sencha Touch floating Panel Example
Sencha Touch floating Panel Example

Application HTML source - index.html

<!DOCTYPE html>
<html>
<head>
<title>Sencha Touch Floating Panel Example</title>
<link rel="stylesheet"
 href="sencha-touch/resources/css-debug/sencha-touch.css"
 type="text/css">
<script type="text/javascript"
 src="sencha-touch/sencha-touch-all-debug.js"></script>
<script type="text/javascript">
Ext.Loader.setConfig({ 
 enabled: true 
});

Ext.application({
    
 name: 'myApp',
 appFolder: 'app/floatingPanel',
 
 requires: [
               'myApp.view.SomeList',
               'myApp.view.SomeForm'
               ], 
               
    views : ['SomeList'],           
    controllers: ['MyController'],
    
    launch: function() {
     console.log('Application launch');
     Ext.create('Ext.Container', {
      fullscreen: true,
      layout: 'vbox',
         items: [{
                xtype : 'toolbar',
                docked: 'top',
                items: [{
                         xtype: 'button',
                          text: 'Sample Button'
                        }
                      ]
            },{
          flex: 1,
          xtype: 'someList'
            }]
     });
    }
    
});
</script>
</head>
<body>
</body>
</html>

Display List of Items - SomeList.js

Ext.define('myApp.view.SomeList', {
    extend: 'Ext.dataview.List',
    alias : 'widget.someList',
    
    config: {
     data: [
             { text: 'This is line no. 1' },
             { text: 'This is line no. 2' },
             { text: 'This is line no. 3' },
             { text: 'This is line no. 4' }
         ],
     
     itemTpl: '{text}'
    
    } 
});

Our Floating Panel for display - SomeForm.js

Ext.define('myApp.view.SomeForm', {
    extend: 'Ext.form.Panel',
    alias : 'widget.someForm',
    
    config: {
     
     // We give it a left and top property
     //to make it floating by default
        left: 0,
        top: 0,

        // Make it modal so you can click the mask to hide the overlay
        modal: true,
        hideOnMaskTap: true,

        // Set the width and height of the panel
        width: 400,
        height: 200,
     layout: {
            type: 'vbox',
        },
        defaults: {
            margin: '0 0 5 0',
            labelWidth: '40%'
        },
        items: [
            {
       xtype: 'textfield',
       name: 'inputText',
       label: 'Input Text',
       itemId: 'inputText'
   }, 
   {
                xtype: 'numberfield',
                label: 'Input Number',
                name: 'inputNumber'
            },    
   {
                xtype: 'button',
                text: 'Save Form',
                itemId: 'save'
            }
            
        ]
    }
  
});

Application controller source - MyController.js

Ext.define('myApp.controller.MyController', {
 extend : 'Ext.app.Controller',

 config: {
  profile: Ext.os.deviceType.toLowerCase(),
  control: {
   'someList': {
    activate: 'onActivate',
    itemtap: 'onSelectRow'
   },
   'container button' : {
    tap : 'onButtonClick' 
   },
   'someForm button[itemId=save]' : {
    tap : 'onSaveForm' 
   }
  }  

 },

 onActivate: function() {
  console.log('Main container is active');
 },

 onButtonClick: function(button) {
  console.log('Button Click');
  var someForm = Ext.Viewport.down('someForm');
  //create the form if it doesn't exists
  if(!someForm){
   someForm = Ext.widget('someForm');
  } 
  someForm.reset();
  someForm.showBy(button);

 },

 onSaveForm: function(button) {
  console.log('Button Click for Save');
  var form = button.up('panel');
  //do your processing here
  form.hide();
 },

 onSelectRow: function(view, index, target, record, event) {
  console.log('Clicked on a Row');
  var someForm = Ext.Viewport.down('someForm');
  //create the form if it doesn't exists
  if(!someForm){
   someForm = Ext.widget('someForm');
  } 
  someForm.getComponent('inputText').setValue(record.get('text'));
  someForm.showBy(target, "tl-bl?");
 }

});

References