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');
    }
});

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