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();
}
});
?