Sencha Touch 2.0 Form表单示例

Step 1: 首先声明定义一个FormPanel，如下：

Ext.define('FormPanel', {
extend: 'Ext.Panel',
config: {}
});

Step 2: 现在给这个FormPanel加上标题栏

Ext.define('FormPanel', {
extend: 'Ext.Panel',
config: {
fullscreen: true,//设置全屏
scrollable: {
direction: 'vertical'//设置允许垂直滚动
},
padding: 10,
items:[{
xtype: 'titlebar',//标题栏
title: 'Form Demo',//标题
docked: 'top'//位置，top表示顶部
}]
}
});

Step 3: 添加表单组件，这里只列出SenchaTouch提供的部分组件，其余的可参考api，http://docs.sencha.com/touch/2-0/

Ext.define('FormPanel', {
extend: 'Ext.Panel',

config: {
fullscreen: true,//设置全屏
scrollable: {
direction: 'vertical'//设置允许垂直滚动
},
padding: 10,
items: [{
xtype: 'fieldset',
defaults: {
xtype: 'textfield'//设置默认组件类型为文本域
},
items: [{
label: 'Firstname',
name: 'firstname'
}, {
label: 'Secondname',
name: 'secondname'
}, {
xtype: 'datepickerfield',//日期选择域
label: 'Birthday',
name: 'birthday',
value: new Date()
}, {
xtype: 'togglefield',//开关组件
label: 'Gender',
value: 1
}, {
xtype: 'checkboxfield',//复选框组件
label: 'Favorite',
value: 1
}, {
xtype: 'textareafield',//多行文本域
label: 'Description',
name: 'description'
}]
}, {
xtype: 'panel',
layout: 'hbox',
items: [{
xtype: 'button',
flex: 1,
text: 'Submit',
ui: 'decline'
}, {
xtype: 'button',
flex: 1,
text: 'Cancel',
ui: 'confirm'
}]
}, {
xtype: 'titlebar',//标题栏
title: 'Form Demo',//标题
docked: 'top'//位置，top表示顶部
}]
}
});

Step 4: 上面已经声明了一个FormPanel，接下来就使用这个表单

Ext.application({
launch: function(){
Ext.create('FormPanel');
}
});

这样子，一个简单的表单就创建好了。运行结果如下：演示