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    ]});


原创粉丝点击