PDA

View Full Version : How to build a form for mobile device with Sencha Touch



tmyonline
2 May 2011, 7:46 PM
Hi Guys, I need to build a web form that accepts user's entries for mobile device. I was looking at the Sencha Touch API Doc http://dev.sencha.com/deploy/touch/docs/ but was not able to get the form displayed. Below is the code that I copied & pasted from the Sencha Touch API Doc:



<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Hello World</title>
<link href="lib/touch/resources/css/sencha-touch.css" rel="stylesheet" type="text/css" />
<script src="lib/touch/sencha-touch.js" type="text/javascript"></script>
<script type="text/javascript">

var form = new Ext.form.FormPanel({
items: [
{
xtype: 'textfield',
name : 'first',
label: 'First name'
},
{
xtype: 'textfield',
name : 'last',
label: 'Last name'
},
{
xtype: 'numberfield',
name : 'age',
label: 'Age'
},
{
xtype: 'urlfield',
name : 'url',
label: 'Website'
}
]
});

Ext.regModel('User', {
fields: [
{name: 'first', type: 'string'},
{name: 'last', type: 'string'},
{name: 'age', type: 'int'},
{name: 'url', type: 'string'}
]
});

var user = Ext.ModelMgr.create({
first: 'Ed',
last : 'Spencer',
age : 24,
url : 'http://extjs.com'
}, 'User');

form.load(user);

</script>
</head>
<body>

</body>
</html>
When I loaded it in Chrome & Firefox, the form never appeared. It just showed an empty white screen. Any idea ? Thanks.

ChillsNL
2 May 2011, 11:29 PM
First, can you put your code between the '
& ' tags? It's better looking for the people who are willing to help you out of your problems.

Second, after taking a look at my code, your missing a few parts for your form. I am willing to put my code here for you so you can have a look on how to make a form suitable for webdevices.


GW.LoginForm =
{
scroll : 'vertical',
standardSubmit : false,
items :
[{
xtype : 'fieldset',
title : 'title',
instructions : 'random text',
defaults :
{
required : true,
labelAlign : 'left',
labelWidth : '40%'
},
items:
[{
xtype : 'textfield',
name : 'name',
label : 'Name',
useClearIcon : true,
autoCapitalize : false
},{
xtype : 'passwordfield',
name : 'password',
label : 'Password',
useClearIcon : false
}]
}],
dockedItems:
[{
xtype : 'toolbar',
dock : 'bottom',
layout : 'card',
items:
[{
text : 'button',
ui : 'action',
handler : function ()
{

}
}]
}]
};

if (Ext.is.Phone)
{
GW.LoginForm.fullscreen = true;
}
else
{
Ext.apply(GW.LoginForm,
{
autoRender : true,
floating : true,
modal : true,
centered : true,
hideOnMaskTap : false,
height : 385,
width : 480
});
}

This code makes an form, but doesn't make it visable for you yet.


FWM.LoginForm = new Ext.form.FormPanel(GW.LoginForm);
FWM.LoginForm.show()

With that piece of code, you make it an object and make it show up in your screen.

Good luck.

mitchellsimoens
3 May 2011, 4:38 AM
Or just simple add 'fullscreen : true' or "renderTo : 'someEl' " to his FormPanel.

tmyonline
3 May 2011, 9:54 AM
Thanks guys. Also, ChillsNL, I assume the code you wrote is JavaScript and not PHP as indicated, right ?

Do you know where in the Sencha Touch API Documentation I can find the generic Sencha Touch format for coding a form ? Thanks.

tmyonline
3 May 2011, 4:03 PM
Hi ChillsNL, per your suggestion, I revised the code as shown below but somehow the form still did not appear. Any idea ? Thanks.



<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Hello World</title>
<link href="lib/touch/resources/css/sencha-touch.css" rel="stylesheet" type="text/css" />
<script src="lib/touch/sencha-touch.js" type="text/javascript"></script>
<script type="text/javascript">
GW.LoginForm =
{
scroll : 'vertical',
standardSubmit : false,
items :
[{
xtype : 'fieldset',
title : 'title',
instructions : 'random text',
defaults :
{
required : true,
labelAlign : 'left',
labelWidth : '40%'
},
items:
[{
xtype : 'textfield',
name : 'name',
label : 'Name',
useClearIcon : true,
autoCapitalize : false
},{
xtype : 'passwordfield',
name : 'password',
label : 'Password',
useClearIcon : false
}]
}],
dockedItems:
[{
xtype : 'toolbar',
dock : 'bottom',
layout : 'card',
items:
[{
text : 'button',
ui : 'action',
handler : function ()
{

}
}]
}]
};

if (Ext.is.Phone) {
GW.LoginForm.fullscreen = true;
}

else {
Ext.apply(GW.LoginForm, {
autoRender : true,
floating : true,
modal : true,
centered : true,
hideOnMaskTap : false,
height : 385,
width : 480
});
}


FWM.LoginForm = new Ext.form.FormPanel(GW.LoginForm);
FWM.LoginForm.show();
</script>
</head>
<body>

</body>
</html>

Jack9
4 May 2011, 5:42 PM
2 Problems. First, drop this in Chrome or Firefox and you can see the javascript errors hinting at the problems. The global javascript object window contains all others. Some browsers require you to attach objects to it explicitly. See the code below. I declare the globals then your code attaches children. Not all of the 'window.' are necessary, but it should be remembered. Second, you Ext tries to render the form when show() is called. Calling show() in the header, there's no valid place to put it! Put the javascript in the body and it will naturally render to the body tag. This is the purpose of attributes like 'renderTo' you see in "regular" Sencha (dunno if they work or exist in Sencha Touch, I haven't used them recently). The code below is "fixed"...for the most part.


<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Hello World</title>
<link href="lib/touch/resources/css/sencha-touch.css" rel="stylesheet" type="text/css" />
<script src="lib/touch/sencha-touch.js" type="text/javascript"></script>
</head>
<body id='test'>
<script type="text/javascript">
window.GW = {};
window.FWM = {};
window.GW.LoginForm =
{
scroll : 'vertical',
standardSubmit : false,
items :
[{
xtype : 'fieldset',
title : 'title',
instructions : 'random text',
defaults :
{
required : true,
labelAlign : 'left',
labelWidth : '40%'
},
items:
[{
xtype : 'textfield',
name : 'name',
label : 'Name',
useClearIcon : true,
autoCapitalize : false
},{
xtype : 'passwordfield',
name : 'password',
label : 'Password',
useClearIcon : false
}]
}],
dockedItems:
[{
xtype : 'toolbar',
dock : 'bottom',
layout : 'card',
items:
[{
text : 'button',
ui : 'action',
handler : function ()
{

}
}]
}]
};

if (Ext.is.Phone) {
window.GW.LoginForm.fullscreen = true;
}

else {
Ext.apply(GW.LoginForm, {
autoRender : true,
floating : true,
modal : true,
centered : true,
hideOnMaskTap : false,
height : 385,
width : 480
});
}


window.FWM.LoginForm = new Ext.form.FormPanel(window.GW.LoginForm);
window.FWM.LoginForm.show();
</script>
</body>
</html>