touch 1.1 form 例子

Ext.setup({
    icon: 'icon.png',
    tabletStartupScreen: 'tablet_startup.png',
    phoneStartupScreen: 'phone_startup.png',
    glossOnIcon: false,
    onReady: function() {

        var form;
        
        Ext.regModel('User', {                       //创建模型
            fields: [
                {name: 'name',     type: 'string'},
                {name: 'password', type: 'password'},
                {name: 'email',    type: 'string'},
                {name: 'url',      type: 'string'},
                {name: 'rank',     type: 'string'},
                {name: 'enable',   type: 'boolean'},
                {name: 'cool',     type: 'boolean'},
                {name: 'color',    type: 'string'},
                {name: 'team',     type: 'string'},
                {name: 'secret',   type: 'boolean'}
            ]
        });
        
         Ext.regModel('Ranks', {                //创建模型
            fields: [
                {name: 'rank',     type: 'string'},
                {name: 'title',    type: 'string'}
            ]
         });
        
        var ranksStore = new Ext.data.JsonStore({       //创建Json
           data : [
                { rank : 'master',  title : 'Master'},
                { rank : 'padawan', title : 'Student'},
                { rank : 'teacher', title : 'Instructor'},
                { rank : 'aid',     title : 'Assistant'}
           ],
           model : 'Ranks',
           autoLoad : true,
           autoDestroy : true
        });
        
        var formBase = {
            scroll: 'vertical',
            url   : 'postUser.php',
            standardSubmit : false,
            items: [{
                    xtype: 'fieldset',    //form 域
                    title: 'Personal Info',   // 域标题显示文字
                    instructions: 'Please enter the information above.', //域结尾显示文字
                    defaults: {
                        required: true,
                        labelAlign: 'left',  //控件显示位置
                        labelWidth: '40%'  // label 占行比例
                    },
                    items: [
                    {
                        xtype: 'textfield',      //文本框
                        name : 'name',
                        label: 'Name',
                        useClearIcon: true,   //当在文本框内输入文字时  显示删除文字的图标
                        autoCapitalize : false   //获取时文字转为大写？ 未实验    
                    }, {
                        xtype: 'passwordfield',  //密码框
                        name : 'password',
                        label: 'Password',
                        useClearIcon: false
                    }, {
                        xtype: 'textfield',
                        name : 'disabled',
                        label: 'Disabled',
                        //disabled: true,          //控件不可用
						inputType : "file",           //选择文件
                        useClearIcon: true          
                    }, {
                        xtype: 'emailfield',        //邮箱框
                        name : 'email',
                        label: 'Email',
                        placeHolder: '[e-mail]',  //默认显示文字
                        useClearIcon: true
                    }, {
                        xtype: 'urlfield',     //网址框
                        name : 'url',
                        label: 'Url',
                        placeHolder: 'http://sencha.com',
                        useClearIcon: true
                    }, {
                        xtype: 'checkboxfield',         //复选框
                        name : 'cool',
                        label: 'Cool',
                        value: true    // 值
                    }, {
                        xtype: 'spinnerfield',  //HTML5 数字字段
                        name : 'spinner',
                        label: 'Spinner'
                    }, {
                        xtype: 'selectfield',   //选择框
                        name : 'rank',
                        label: 'Rank',
                        valueField : 'rank',     //值     用数据中的 rank 字段
                        displayField : 'title',  //显示用数据中的title字段
                        store : ranksStore       //数据源
                    }, {
                        xtype: 'hiddenfield',    //隐藏域
                        name : 'secret',
                        value: 'false'
                    }, {
                        xtype : 'textareafield', //大文本域
                        name  : 'bio',
                        label : 'Bio',
                        maxLength : 60,          //长度最大值
                        maxRows : 10             //高度最大值
                    }, {
                        xtype: 'sliderfield',    //滑动选择数值
						value   : 5,             //当前值
           				minValue: 0,             //最小值
            			maxValue: 10,            //最大值
                        name : 'height',         
                        label: 'Height'
                    }, {
                        xtype: 'togglefield',    //切换框       选择是否
                        name : 'enable',
                        label: 'Security Mode'
                    }, {
                        xtype: 'radiofield',     //单选
                        name: 'team',            //同名为一组
                        label: 'Red Team',
                        value : 'redteam'
                    }, {
                        xtype: 'radiofield',
                        name: 'team',
                        label: 'Blue Team',
                        value: 'blueteam'
                    }]
                }, {
                    xtype: 'fieldset',              //新的域
                    title: 'Favorite color',
                    defaults: { xtype: 'radiofield' },  //默认类型 单选框
                    items: [
                        { 
							name : 'color',             
							label: 'Red', 
							value : 'red' 
						},
                        { 
							name : 'color', 
							label: 'Green' , 
							checked : true,             //默认选择
							value : 'green'
						}
                    ]
                }, {
                    xtype: 'fieldset',               //新的域
                    title: 'HTML5',
                    items: [{
                        xtype: 'numberfield',          //数字框                 
                        name: 'number',
                        label: 'Number',
                        maxValue : 20,            //最大值   就算设定最大值和最小值  也可以手动输入 大于这个值的数
                        minValue : 2              //最小值
                    }, {
                        xtype: 'emailfield',
                        name: 'email2',
                        label: 'Email',
                        useClearIcon: true
                    }, {
                        xtype: 'urlfield',
                        name: 'url2',
                        label: 'URL',
                        useClearIcon: true
                    }]
                },{
	                xtype: 'fieldset',
	                title: 'Single Select (in fieldset)',
	                items: [{
	                    xtype: 'selectfield',
	                    name: 'options',
	                    options: [
	                        {text: 'This is just a big select with text that is overflowing',  value: '1'},
	                        {text: 'Another item', value: '2'}
	                    ]
	                }]
				}, {
                    xtype: 'fieldset',
                    title: 'Single Text (in fieldset)',
                    items: [{
                        xtype: 'textfield',
                        name: 'single_text',
                        useClearIcon: true
                    }]
                }, {
                    xtype: 'fieldset',
                    title: 'Single Toggle (in fieldset)',
                    items: [{
                        xtype: 'togglefield',
                        name: 'single_toggle',
                        value : 1
                    }]
                }, {
                    xtype: 'fieldset',
                    title: 'Single Slider (in fieldset)',
                    items: [{
                        xtype: 'sliderfield',
                        name: 'single_slider',
                        value : 60
                    }]
                }
            ],
            listeners : {
                submit : function(form, result){                                //表单提交成功
					alert();
                    console.log('success', Ext.toArray(arguments));
                },
                exception : function(form, result){
					
                    console.log('failure', Ext.toArray(arguments));             //表单提交异常
                }
            },
        
            dockedItems: [               
                {
                    xtype: 'toolbar',                //工具栏
                    dock: 'bottom',                  //按钮
                    items: [
                        {
                            text: 'Load Model',      //标题
                            ui: 'round',             //使用 圆形  UI
                            handler: function() {    //点击触发事件
                                formBase.user = Ext.ModelMgr.create({  //创建一个 ModelMgr
                                    'name'    : 'Akura',
                                    'password': 'secret',
                                    'email'   : '[e-mail]',
                                    'url'     : 'http://sencha.com',
                                    'single_slider': 20,
                                    'enable'  : 1,
                                    'cool'    : true,
                                    'team'    : 'redteam',
                                    'color'   : 'blue',
                                    'rank'    : 'padawan',
                                    'secret'  : true,
                                    'bio'     : 'Learned the hard way !'
                                }, 'User');  //模型使用上面的 User
        
                                form.loadModel(formBase.user);    //获取模型
                            }
                        },
                        {xtype: 'spacer'},  //空出中间位置
                        {
                            text: 'Reset',      
                            handler: function() {
                                form.reset();   //  复位
                            }
                        },
                        {
                            text: 'Save',
                            ui: 'confirm',       //使用 确认　UI
                            handler: function() {
                                if(formBase.user){
                                    form.updateRecord(formBase.user, true);
                                }
                                form.submit({　　　//提交
                                    waitMsg : {message:'Submitting', cls : 'demos-loading'}//载入层
                                });
                            }
                        }
                    ]
                }
            ]
        };
        
        if (Ext.is.Phone) {
            formBase.fullscreen = true;
        } else {
            Ext.apply(formBase, {
                autoRender: true,
                floating: true,
                modal: true,
                centered: true,
                hideOnMaskTap: false,
                height: 585,
                width: 680
            });
        }
        
        form = new Ext.form.FormPanel(formBase);
        form.show();
    }
});