Sencha Touch adalah kerangka HTML5 untuk pengembangan aplikasi berbasis sentuhan.
Sebuah aplikasi yang ditulis menggunakan kerangka kerja ini dapat dijalankan-tanpa ada perubahan-di IOS, Android,
dan Blackberry perangkat berbasis sentuhan. Kerangka kerja ini datang bersama dengan berbagai built-in UI
komponen mirip dengan orang yang kita lihat pada platform mobile yang berbeda, dirancang dengan baik
dengan paket data yang efisien untuk bekerja dengan beragam sumber data sisi klien atau server-side.
Selain itu, kerangka kerja ini juga menawarkan API untuk bekerja dengan DOM dan itu membawa pada
diperpanjang untuk setiap aspek , yang merupakan kombinasi yang setiap perusahaan mencari
dan mengharapkan kerangka kerja.
yang dilakukan pertama kali adalah
1.buka teks editor
2.tulis source codenya berikut ini:
Ext.setup({
onReady: function() {
var form;
//form and related fields config
var formBase = {
//enable vertical scrolling in case the form exceeds the page height
scroll:'vertical',
url: 'http://localhost/test.php',
items: [{//add a fieldset
xtype: 'fieldset',
title: 'Personal Info',
instructions: 'Please enter the information above.',
//apply the common settings to all the child items of the fieldset
defaults: {
required: true,
//required field
labelAlign: 'left',
labelWidth: '40%'
},
items: [
{//add a text field
xtype: 'textfield',
name : 'name',
label: 'Name',
useClearIcon: true,//shows the clear icon in the field when user types
autoCapitalize : false
}, {//add a password field
xtype: 'passwordfield',
name : 'password',
label: 'Password',
useClearIcon: false
}, {
xtype: 'passwordfield',
name : 'reenter',
label: 'Re-enter Password',
useClearIcon: true
}, {//add an email field
xtype: 'emailfield',
name : 'email',
label: 'Email',
placeHolder: 'you@sencha.com',
useClearIcon: true
}]
}
],
listeners : {
//listener if the form is submitted, successfully
submit : function(form, result){
console.log('success', Ext.toArray(arguments));
},
//listener if the form submission fails
exception : function(form, result){
console.log('failure', Ext.toArray(arguments));
}
},
//items docked to the bottom of the form
dockedItems: [
{
xtype: 'toolbar',
dock: 'bottom',
items: [
{
text: 'Reset',
handler: function() {
form.reset(); //reset the fields
}
},
{
text: 'Save',
ui: 'confirm',
handler: function() {
//submit the form data to the url
form.submit();
}
}
]
}
]
};
if (Ext.is.Phone) {
formBase.fullscreen = true;
} else { //if desktop
Ext.apply(formBase, {
autoRender: true,
floating: true,
modal: true,
centered: true,
hideOnMaskTap: false,
height: 385,
width: 480
});
}
//create form panel
form = new Ext.form.FormPanel(formBase);
form.show(); //render the form to the body
}
});
3simpan file dengan nama yang kamu sukai jangan lupa belakangnya .js kalo aku memilih ch106.js
4 sisipkan kedalam html
contohnya seperti ini
simpan dengan terserah kamu pilih yang mana dengan diahiri .html kalo aku milih sc2.html
lalu jalankan dengan browser di emulator, atau diberikan ke server lalu di test dengan entah itu hp android, tablet blackbery, ataupun iphone dan ipad kalau terpaksa ga ada pake aja google chrome
inilah hasilnya:
