转载自:http://lucky16.iteye.com/blog/1490278
一、效果图
先用美图勾引那些驻足观望之人:
二、代码讲解
注意代码中的EXT js引入路径, 需要根据你的实际情况进行引入,否者可能出现错误
- <html>
- <head>
- <title>系统登录</title>
- <metacharset="UTF-8"/>
- <linkrel="stylesheet"type="text/css"href="extjs/resources/css/ext-all.css"/>
- <style>
- </style>
- <scripttype="text/javascript"src="extjs/ext-base.js"></script>
- <scripttype="text/javascript"src="extjs/ext-all.js"></script>
- <scripttype="text/javascript"src="extjs/ext-lang-zh_CN.js"></script>
- </head>
- <body>
- <formid="form1"runat="server">
- <scripttype="text/javascript">
- Ext.onReady(function(){
- Ext.QuickTips.init();
- Ext.form.Field.prototype.msgTarget='side';
- varform1=newExt.FormPanel({
- layout:'form',
- collapsible:true,
- autoHeight:true,
- frame:true,
- renderTo:Ext.getBody(),
- title:'<centerstyle="curor:hand"onclick="window.location.reload();">表单控件</center>',
- style:'margin-left:auto;margin-right:auto;width:500px;margin-top:8px;',
- //设置标签对齐方式
- labelAlign:'right',
- //设置标签宽
- labelWidth:170,
- //设置按钮的对齐方式
- buttonAlign:'center',
- //默认元素属性设置
- defaults:{
- width:180
- },
- items:[{
- fieldLabel:'文本框控件',
- name:'TextBox',
- xtype:'textfield'
- //,readOnly:true//只读
- //,emptyText:'请输入数据'//为空时显示的文本,注意不是value
- },{
- fieldLabel:'只允许输入数字',
- name:'TextBoxNumber',
- xtype:'numberfield'
- //,allowDecimals:false//允许小数点
- //,allowNegative:false,//允许负数
- //,maxValue:1000//最大值
- //,minValue:0//最小值
- },{
- fieldLabel:'下拉框控件',
- name:'DropDownList',
- xtype:'combo',
- //mode:'local',
- displayField:"Name",
- //设置为选项的value的字段
- valueField:"Id",
- //是否可以输入,还是只能选择下拉框中的选项
- editable:false,
- typeAhead:true,
- //必须选择一项
- //forceSelection:true,
- //输入部分选项内容匹配的时候显示所有的选项
- triggerAction:'all',
- //selectOnFocus:true,
- //数据
- store:newExt.data.SimpleStore({
- fields:['Id','Name'],
- data:[[1,'男'],[0,'女']]
- })
- },{
- fieldLabel:'日历控件',
- xtype:'datefield',
- name:'DateControl',
- format:"Y-m-d",
- editable:false
- //,默认当前日期
- //value:newDate().dateFormat('Y-m-d')
- },{
- fieldLabel:'单选控件',
- xtype:'radiogroup',
- name:'Radios',
- items:[{
- name:'RadioItems',
- boxLabel:'选我',
- inputValue:'1',
- checked:true
- },{
- name:'RadioItems',
- boxLabel:'选我吧',
- inputValue:'0'
- }]
- },{
- fieldLabel:'复选控件',
- xtype:'checkboxgroup',
- name:'Checkboxs'
- //columns属性表示用2行来显示数据
- ,
- columns:2,
- items:[{
- name:'CheckboxItems',
- boxLabel:'香蕉',
- inputValue:'A'
- },{
- name:'CheckboxItems',
- boxLabel:'苹果',
- inputValue:'B'
- },{
- name:'CheckboxItems',
- boxLabel:'橘子',
- inputValue:'C'
- },{
- name:'CheckboxItems',
- boxLabel:'桃子',
- inputValue:'D'
- }]
- },{
- fieldLabel:'文本域控件',
- xtype:'textarea',
- value:'可以输好多字!',
- height:50
- },{
- fieldLabel:'时间控件',
- xtype:'timefield'
- //格式化输出默认为"g:iA"
- //"g:ia|g:iA|g:ia|g:iA|h:i|g:i|H:i|ga|ha|gA|ha|ga|gA|gi|hi|gia|hia|g|H"
- ,
- format:'H:i'
- //时间间隔(分钟)
- ,
- increment:60
- },{
- fieldLabel:'标签页',
- xtype:'fieldset',
- title:'标签页',
- autoHeight:true,
- items:[{
- xtype:'panel',
- title:'标签页中的面板',
- frame:true,
- height:50
- }]
- },{
- fieldLabel:'在线编辑器',
- xtype:'htmleditor',
- width:260,
- height:100
- //以下为默认选项,其他请参照源代码
- //,enableColors:false
- //,enableFormat:true
- //,enableFontSize:true
- //,enableAlignments:true
- //,enableLists:true
- //,enableSourceEdit:true
- //,enableLinks:true
- //,enableFont:true
- }],
- buttons:[{
- text:"保存",
- handler:function(){
- MsgInfo('保存');
- }
- },{
- text:"取消",
- handler:function(){
- form1.form.reset();
- }
- }]
- });
- functionMsgInfo(str_msg){
- Ext.MessageBox.show({
- title:'提示',
- msg:str_msg,
- width:400,
- icon:Ext.MessageBox.INFO,
- buttons:Ext.MessageBox.OK
- });
- }
- });
- </script>
- </form>
- </body>
- </html>