Ext2.0的form例子

作者在 2008-03-24 13:29:57 发布以下内容
        今天看到这里,就做了个简单的form。不得不说Ext的控件的确强大!外观很漂亮,而且一些简单的验证功能也不需要我们自己去编写,只需要我们在控件中添加相应属性即可。
        form.html:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">

<title>Form</title>

<link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css" />

<script type="text/javascript" src="ext/adapter/ext//ext-base.js" ></script>

<script type="text/javascript" src="ext/ext-all.js" ></script>

<script type="text/javascript" src="js/form.js" ></script>

</head>

<body>

<div id="form"></div>

</body>

</html>
        然后是form.js:

Ext.onReady(function(){

Ext.QuickTips.init();

Ext.form.Field.prototype.msgTarget = 'side';

var form = new Ext.FormPanel({

title: 'Form',

labelAlign:'left',

buttonAlign:'center',

renderTo:'form',

width:600,

frame:true,

items: [{

xtype:'textfield',

name:'name',

allowBlank:false,

fieldLabel:'Name'

},{

xtype:'textfield',

inputType:'password',

name:'password',

fieldLabel:'Password'

},{

xtype:'numberfield',

name:'age',

fieldLabel:'Age'

},{

xtype:'timefield',

name:'time',

allowBlank:false,

fieldLabel:'Current Time'

},{

xtype:'textfield',

name:'name',

vtype:'url',

fieldLabel:'Personal Site'

},{

xtype:'textfield',

name:'email',

vtype:'email',

fieldLabel:'E-mail'

},{

xtype:'radio',

fieldLabel:'Sex',

boxLabel:'Male',

name:'sex',

checked:true,

inputValue:'male'

},{

xtype:'radio',

labelSeparator:'',

boxLabel:'Female',

name:'sex',

inputValue:'female'

},{

xtype:'datefield',

fieldLabel:'Birthday',

format:'Y-m-d',

name:'birthday'

},{

xtype:'combo',

store:new Ext.data.SimpleStore({

fields:['returnValue', 'textValue'],

data:[

[1, 'January'],

[2, 'Febuary'],

[3, 'March'],

[4, 'April'],

[5, 'May'],

[6, 'June'],

[7, 'July'],

[8, 'August'],

[9, 'September'],

[10, 'October'],

[11, 'November'],

[12, 'December']

]

}),

valueField:'returnValue',

displayField:'textValue',

mode:'local',

forceSelection:true,

blankText:'Please select a month',

emptyText:'Select a month',

hiddenName:'month',

editable:false,

triggerAction:'all',

allowBlank:false,

fieldLabel:'Month Selection',

name:'month'

},{

xtype:'checkbox',

fieldLabel:'Character',

boxLabel:'Michael Scofield',

name:'character',

inputValue:'1'

},{

xtype:'checkbox',

labelSeparator:'',

boxLabel:'Lincoln Burrows',

name:'character',

inputValue:'2'

},{

xtype:'checkbox',

labelSeparator:'',

boxLabel:'T-bag',

name:'character',

inputValue:'3'

},{

xtype:'checkbox',

labelSeparator:'',

boxLabel:'John Abruzzi',

name:'character',

inputValue:'4'

},{

xtype:'checkbox',

labelSeparator:'',

boxLabel:'Westmoreland',

name:'character',

inputValue:'5'

},{

xtype:'textarea',

name:'msg',

width:200,

fieldLabel:'Message'

}],

buttons:[{

text:'Submit'

},{

text:'Cancel',

handler:function(){

simpleForm.form.reset();

}

}]

});

});
        代码中开头两行的作用是设置出错信息的提示以及信息的出现位置,这里是出现在控件左边。提交按钮的动作暂时没有定义。Cancel按钮就是重置form的内容。

Ext2.0 | 阅读 11568 次
文章评论,共0条
游客请输入验证码