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: 'you@sencha.com',//默认显示文字 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' : 'saru@sencha.com', '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(); }});
页:
[1]