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.
  |
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?");
}
});
No comments:
Post a Comment
NO JUNK, Please try to keep this clean and related to the topic at hand.
Comments are for users to ask questions, collaborate or improve on existing.