EXTJs 表单控件
来源:互联网 发布:mac下安装php开发环境 编辑:程序博客网 时间:2024/06/01 07:57
TextField 文本输入控件
<html><head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>Ext Buttons</title> <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css"/> <script type="text/javascript" src="../../adapter/ext/ext-base.js"></script> <script type="text/javascript" src="../../ext-all.js"></script> <script type="text/javascript" src="../examples.js"></script><script type="text/javascript">Ext.onReady(function(){//Ext.form.TextFieldvar textField = new Ext.form.TextField({fieldLabel:'用户名',allowBlank:false,//不允许为空emptyText:'请填写用户名',//输入为空时提示的默认信息maxLength:10,//限制输入的数据在5-10之间minLength:5,});//Ext.form.FormPanelvar form = new Ext.form.FormPanel({title:'表单控件',frame:true,items:[textField],renderTo:'form'});});</script></head><body><div id = "form" style = "width:700px;"></div><br></body></html>
TextArea多行文本输入控件
//Ext.form.TextAreavar textArea = new Ext.form.TextArea({width:200,//宽度grow:true,//当值为 true 时表示字段可以根据内容自动伸缩preventScrollbars:true,//防止出现滚动条,如果超出会自动隐藏fieldLabel:'自我介绍',allowBlank:false,//不允许为空emptyText:'空',//输入为空时提示的默认信息maxLength:100,//限制输入的数据在10-100之间minLength:10,});//Ext.form.FormPanelvar form = new Ext.form.FormPanel({title:'表单控件',frame:true,items:[textArea],renderTo:'form'});
当grow:false preventScrollbars:false时如果内容超出显示范围会出现滚动条
DateField日期输入控件
//Ext.form.DateFieldvar dateField = new Ext.form.DateField({fieldLabel:'生日',emptyText:'请选择',//输入为空时提示的默认信息format:'Y-m-d',//用以覆盖本地化的默认日期格式化字串disableDays:[0,6]//一个以字串形式表示的禁用的日期数组});//Ext.form.FormPanelvar form = new Ext.form.FormPanel({title:'表单控件',frame:true,items:[dateField],renderTo:'form'});
TimeField时间输入控件
//Ext.form.TimeFieldvar timeField = new Ext.form.TimeField({fieldLabel:'时间',emptyText:'请选择',//输入为空时提示的默认信息minValue:'10:30 AM',//起始时间maxValue:'14:00 PM',//结束时间increment:30//时间间隔为30分钟});//Ext.form.FormPanelvar form = new Ext.form.FormPanel({title:'表单控件',frame:true,items:[timeField],renderTo:'form'});
HtmlEditor在线编辑器
//Ext.form.HtmlEditorvar htmlEditor = new Ext.form.HtmlEditor({fieldLabel:'留言',enableAlignments:true,//允许居左、居中、居右按钮(默认为 true)。enableColors:true,//允许前景/高亮颜色按钮enableFontSize:true,//允许增大/缩小字号按钮(默认为 true)。enableFont:true,//允许字体选项。enableFormat:true,//允许粗体、斜体和下划线按钮(默认为 true)。enableLinks:true,//允许创建链接按钮。enableLists:true,//允许项目和列表符号按钮。enableSourceEdit:true,//允许切换到源码编辑按钮。});//Ext.form.FormPanelvar form = new Ext.form.FormPanel({title:'表单控件',frame:true,items:[htmlEditor],renderTo:'form'});
ComboBox
//ComboBoxvar data = [['0','学生'],['1','教师'],['2','工程师'],['3','农民']];var store = new Ext.data.SimpleStore({fields:['value','text'],data:data});var combo = new Ext.form.ComboBox({store:store,//store用来为ComboBox提供数据emptyText:'请选择',triggerAction:'all',//query 会根据输入信息自动匹配 all 显示所有数据mode:'local',//在本地读取数据valueField:'value',//与store定义中的名字一样。正是根据他们之间的对应关系来显示数据。displayField:'text',applyTo:'combo',//显示位置,需要与<input id = "combo" type = "text">对应value:'学生'//设置默认值});
监听事件:
var ReportFaultTypeSchoolCbox = new Ext.form.ComboBox({ fieldLabel: '校区', width:200, editable: false, //不允许输入 name: 'School', id: "School", hiddenName: "reportFaultTypeSchool", store: ReportFaultTypeSchoolStore, emptyText: '--请选择--', allowBlank: false, //不允许为空 blankText: '请选择校区', //错误提示信息 mode: 'remote', displayField: 'reportFaultTypeName', valueField: 'reportFaultTypeId', triggerAction: 'all' }); //监听事件 ReportFaultTypeSchoolCbox.on("select",function(comboBox){ alert(comboBox.getValue()+"-"+comboBox.getRawValue()); });
select转换成ComboBox
//select转换成ComboBoxvar comboFromSelect = new Ext.form.ComboBox({emptyText:'请选择',triggerAction:'all',//query 会根据输入信息自动匹配 all 显示所有数据mode:'local',//在本地读取数据transform:'comboFS'});
在Html中需要有select下拉框。
<select id = "comboFS"><option value = "0">苹果</option><option value = "1">葡萄</option><option value = "2">香蕉</option><option value = "3">菠萝</option></select>
checkbox多选框
<html><head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>Ext Buttons</title> <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css"/> <script type="text/javascript" src="../../adapter/ext/ext-base.js"></script> <script type="text/javascript" src="../../ext-all.js"></script> <script type="text/javascript" src="../examples.js"></script><script type="text/javascript">Ext.onReady(function(){Ext.QuickTips.init();//Ext.form.FormPanelvar form = new Ext.form.FormPanel({title:'表单控件',frame:true,items:[{xtype:'fieldset',title:'选择你喜欢的运动',autoHeight:true,defaultType:'checkbox',hideLabels:true,items:[{boxLabel:'足球',inputValue:'1'},{boxLabel:'篮球',inputValue:'2'},{boxLabel:'乒乓球',inputValue:'3'},{boxLabel:'羽毛球',inputValue:'4'}]}],renderTo:'form'});});</script></head><body><div id = "form" style = "width:700px;"></div></body></html>
radio单选按钮
<html><head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>Ext Buttons</title> <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css"/> <script type="text/javascript" src="../../adapter/ext/ext-base.js"></script> <script type="text/javascript" src="../../ext-all.js"></script> <script type="text/javascript" src="../examples.js"></script><script type="text/javascript">Ext.onReady(function(){Ext.QuickTips.init();//Ext.form.FormPanelvar form = new Ext.form.FormPanel({title:'表单控件',frame:true,items:[{xtype:'fieldset',title:'性别',autoHeight:true,defaultType:'radio',hideLabels:true,items:[{boxLabel:'男',inputValue:'1',checked:true,name:'radio'},{boxLabel:'女',inputValue:'2',name:'radio'},]}],renderTo:'form'});});</script></head><body><div id = "form" style = "width:700px;"></div></body></html>
监听事件:
{ xtype:"fieldset", title: "附件", layout:"form", autoHeight:true, style:'padding-left:10px;', items:[ { xtype:'radiogroup', fieldLabel: '是否上传附件', defaultType:'radio', id:'RadioGroup', hideLabels:true, items:[ {boxLabel:'是',inputValue:'1',name:'radio'}, {boxLabel:'否',inputValue:'2',name:'radio',checked:true} ], listeners: { "change": function() { alert("value:"+Ext.getCmp("RadioGroup").getValue().inputValue); } } } ] }
综合运用
<html><head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>Ext Buttons</title> <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css"/> <script type="text/javascript" src="../../adapter/ext/ext-base.js"></script> <script type="text/javascript" src="../../ext-all.js"></script> <script type="text/javascript" src="../examples.js"></script><script type="text/javascript">Ext.onReady(function(){//工作+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++var dataWork = [['0','学生'],['1','教师'],['2','工程师'],['3','农民']];var storeWork = new Ext.data.SimpleStore({fields:['value','text'],data:dataWork});var comboWork = new Ext.form.ComboBox({fieldLabel:'工作',store:storeWork,//store用来为ComboBox提供数据emptyText:'请选择',triggerAction:'all',//query 会根据输入信息自动匹配 all 显示所有数据mode:'local',//在本地读取数据valueField:'value',//与store定义中的名字一样。正是根据他们之间的对应关系来显示数据。displayField:'text',value:'学生'//设置默认值});//++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++//Ext.form.DateFieldvar birthdayField = new Ext.form.DateField({fieldLabel:'生日',emptyText:'请选择',//输入为空时提示的默认信息format:'Y-m-d',//用以覆盖本地化的默认日期格式化字串disableDays:[0,6],//一个以字串形式表示的禁用的日期数组name:'birthday',});//+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++var sexField = new Ext.form.ComboBox({fieldLabel:'性别',name:'sex',store:new Ext.data.SimpleStore({fields:['value','text'],data:[['0','男'],['1','女']]}),//storedisplayField:'text',valueField:'value',mode:'local',emptyText:'请选择',});//+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++var userField = new Ext.form.TextField({fieldLabel:'用户名',allowBlank:false,//不允许为空emptyText:'请填写用户名',//输入为空时提示的默认信息maxLength:10,//限制输入的数据在5-10之间minLength:5,name:'username',});//+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++var passwordField = new Ext.form.NumberField({fieldLabel:'密码',allowBlank:false,//不允许为空emptyText:'请填写密码',//输入为空时提示的默认信息name:'password',});//+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++var textArea = new Ext.form.TextArea({width:200,//宽度grow:false,//当值为 true 时表示字段可以根据内容自动伸缩preventScrollbars:false,//防止出现滚动条,如果超出会自动隐藏fieldLabel:'自我介绍',allowBlank:false,//不允许为空emptyText:'空',//输入为空时提示的默认信息maxLength:100,//限制输入的数据在10-100之间minLength:10,});//+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++//Ext.form.FormPanelvar form = new Ext.form.FormPanel({labelAlign:'right',labelWidth:50,title:'用户注册',frame:true,width:650,items:[{layout:'column',items:[//+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++{columnWidth:.7,layout:'form',defaultType:'textfield',defaults:{width:300},autoHeight:true,xtype:'fieldset',title:'基本信息',items:[userField,passwordField,sexField,birthdayField,comboWork,textArea,]//items},//+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++{columnWidth:.3,layout:'form',items:[{xtype:'fieldset',title:'你喜欢的运动?',autoHeight:true,defaultType:'checkbox',style:'margin-left:10px;',bodyStyle:'margin-left:10px;',items:[{boxLabel:'足球',name:'check',value:'1',checked:true},{boxLabel:'篮球',name:'check',value:'2'},{boxLabel:'羽毛球',name:'check',value:'3'},{boxLabel:'乒乓球',name:'check',value:'4'},]},{xtype:'fieldset',title:'你喜欢听音乐吗?',autoHeight:true,defaultType:'radio',style:'margin-left:10px;',bodyStyle:'margin-left:10px;',items:[{boxLabel:'YES',name:'radio',value:'1',checked:true},{boxLabel:'NO',name:'radio',value:'2'},]},]//items}]//items},{layout:'form',labelAlign:'top',items:[{xtype:'htmleditor',fieldLabel:'留言',id:'editor',anchor:'98%',}]}],//itemsbuttons:[{text:'保存'},{text:'读取'},{text:'取消'},],renderTo:'form'});});</script></head><body><div id = "form"></div></body></html>
自动把数据填充到表单中
添加数据与修改数据的操作时相辅相成的。如果进行修改还是使用原来的表单,我们需要做的就是在表单显示时为每个控件赋予对应的数据。我们知道Ext.form.Field都有setValue()函数,可以设置表单中对应控件的数据。这样会出现一个问题:每个控件都取出来,然后再赋值,另外很多数据要进行类型的转换,实在是很麻烦。
我们不在使用setValue()函数而是使用了Ext.data.JsonReader来负责数据的读取和转换操作。
后台传过来的数据是只有一个元素的JSON数组,如下:
[{text:’textField’,number:12.34,date:’2008-01-01 00:00:00’,combo:1}]
这里提供了字符串,数字,日期等类型的数据,表单中需要配置对应的reader,如下:
var reader = new Ext.data.JsonReader({},[{name:’text’,type:’string’},{name:’number’,type:’float’},{name:’date’,type:’date’,dateFormat:’Y-m-dTH:i:s’},{name:’combo’,type:’int’},]);
现在我们将设置好的reaer放到表单中,后台返回的JSON会在这里被JsonReader转换成对应的数据类型,供表单使用:
var form = new Ext.form.FormPanel({title:’form’,frame:’true’,labelWidth:50,reader:reader,items:[{xtype:’textfield’,name:’text’}]});
当调用form.load()函数时,表单会使用Ajax去后台读取需要的数据。如果调用load()时没有使用任何参数,load()函数就会使用表单对应的url参数。不过表单中设置的url一般是提交数据的网址,为了不将提交和读取这两个操作混在一起,我们建议另外定义一个专门用来读取数据的url,如下:
{text:’读取’,handler:function(){form.getForm().load({url:’json.txt’});}}
现在我们为load()传递一个url参数,指定读取数据的网址。这个网址返回的信息就是上面提到的用于向表单填充数据的JSON字符串,这样就实现了自动为表单中的各个组件填充数据的功能。
窗体window
//var win = new Ext.Window({}):创建一个新的Window窗体对象。var win = new Ext.Window({title: "查看报障", //窗体的标题iconCls: 'bzcl', //一个能提供背景图片的CSS样式类,用于面板头部的图标width: 400, //宽度autoHeight:true,//高度,自适应closeAction: 'close',//当关闭按钮被点击时执行的动作 "close"释放窗体所占内存,"hide"隐藏窗体plain: true,//true表示强制与背景色保持协调modal:true,//屏蔽其他控件,只有这个窗体可操作draggable: false,//是否可拖动closable: true,//是否可关闭maximizable:true,//是否可以最大化minimizable:true,//是否可以最小化resizable: true,//是否可以调整窗体大小layout: "form",items: [ form ]});
- ExtJS 3.4 表单控件
- ExtJs表单控件
- EXTJs 表单控件
- ExtJS表单控件
- Extjs表单控件入门
- ExtJs简单form表单控件
- Extjs-表单与输入控件
- ExtJS form表单控件创建
- ExtJs教程----设置表单控件的只读
- extjs表单
- Extjs 表单输入控件显示以及赋值获取值
- 『ExtJS』表单(一)常用表单控件及内置验证
- 『ExtJS』表单(一)常用表单控件及内置验证
- extjs 表单验证实例
- extjs 表单验证实例
- extjs 表单验证实例
- Extjs表单生成器
- extjs 表单验证实例
- Codeforces Round #180 (Div. 2)
- svn3种访问方式svn:// file:/// http://
- 我常上的一些网站
- Windows消息大全,MFC编程--控件类名
- 在JS中访问JSP Request中的变量
- EXTJs 表单控件
- MyEclipse maven 只能从本地库找添加依赖的jar问题解决
- Razor模块的一些说明
- 关于MVC里的TempData与ViewData
- Python支持中文汉字编码经验总结
- C#中Split用法-字符串分割
- Windows 8 下sql server express 2005安装
- csapp2e 家庭作业 2.76
- 浅谈网站路径分析