ch07、ExtJs 4 中的Form表单控件详解

合集下载

Form表单

Form表单由输⼊框、选择器、单选框、多选框等控件组成，⽤以收集、校验、提交数据典型表单包括各种表单项，⽐如输⼊框、选择器、开关、单选框、多选框等。

在 Form 组件中，每⼀个表单域由⼀个 Form-Item 组件构成，表单域中可以放置各种类型的表单控件，包括 Input、Select、Checkbox、Radio、Switch、DatePicker、TimePicker1<el-form ref="form" :model="form" label-width="80px">2<el-form-item label="活动名称">3<el-input v-model=""></el-input>4</el-form-item>5<el-form-item label="活动区域">6<el-select v-model="form.region" placeholder="请选择活动区域">7<el-option label="区域⼀" value="shanghai"></el-option>8<el-option label="区域⼆" value="beijing"></el-option>9</el-select>10</el-form-item>11<el-form-item label="活动时间">12<el-col :span="11">13<el-date-picker type="date" placeholder="选择⽇期" v-model="form.date1" style="width: 100%;"></el-date-picker>14</el-col>15<el-col class="line" :span="2">-</el-col>16<el-col :span="11">17<el-time-picker type="fixed-time" placeholder="选择时间" v-model="form.date2" style="width: 100%;"></el-time-picker>18</el-col>19</el-form-item>20<el-form-item label="即时配送">21<el-switch v-model="form.delivery"></el-switch>22</el-form-item>23<el-form-item label="活动性质">24<el-checkbox-group v-model="form.type">25<el-checkbox label="美⾷/餐厅线上活动" name="type"></el-checkbox>26<el-checkbox label="地推活动" name="type"></el-checkbox>27<el-checkbox label="线下主题活动" name="type"></el-checkbox>28<el-checkbox label="单纯品牌曝光" name="type"></el-checkbox>29</el-checkbox-group>30</el-form-item>31<el-form-item label="特殊资源">32<el-radio-group v-model="form.resource">33<el-radio label="线上品牌商赞助"></el-radio>34<el-radio label="线下场地免费"></el-radio>35</el-radio-group>36</el-form-item>37<el-form-item label="活动形式">38<el-input type="textarea" v-model="form.desc"></el-input>39</el-form-item>40<el-form-item>41<el-button type="primary" @click="onSubmit">⽴即创建</el-button>42<el-button>取消</el-button>43</el-form-item>44</el-form>45<script>46 export default {47 data() {48return {49 form: {50 name: '',51 region: '',52 date1: '',53 date2: '',54 delivery: false,55 type: [],56 resource: '',57 desc: ''58 }59 }60 },61 methods: {62 onSubmit() {63 console.log('submit!');64 }65 }66 }67</script>View CodeW3C 标准中有如下：When there is only one single-line text input field in a form, the user agent should accept Enter in that field as a request tosubmit the form.即：当⼀个 form 元素中只有⼀个输⼊框时，在该输⼊框中按下回车应提交该表单。

ch06_ExtJs 4 中的数据操作

ExtJs 4 中的数据操作讲师：风舞烟目录：1.Ext.Ajax2.Ext.data.Proxy3.Ext.data.Model4.Ext.data.Store5.综合示例内容：1.Ext.Ajaxajax几个常用的参数如下:success Function 指定当Ajax请求执行成功后执行的回调函数，传递给回调函数两个参数，第一个参数response表示执行Ajax请求的XMLHttpRequet对象，第二个参数表示执行request方法时的options对象。

failure Function指定当请求出现错误时执行的回调函数，传递给回调函数两个参数，第一个参数response表示执行Ajax请求的XMLHttpRequet对象，第二个参数表示执行request 方法时的options对象。

scope Object 指定回调函数的作用域，默认为浏览器window。

form Object/String 指定要提交的表单id或表单数据对象。

isUpload Boolean 指定要提交的表单是否是文件上传表单，默认情况下会自动检查。

headers Object 指定请求的Header信息。

xmlData Object 指定用于发送给服务器的xml文档,如果指定了该属性则其它地方设置的参数将无效。

jsonData Object/String 指定需要发送给服务器端的JSON数据。

如果指定了该属性则其它的地方设置的要发送的参数值将无效。

disableCaching Boolean 是否禁止cache。

例1通过客户端向服务端发送Ajax请求，可以“直接”调用MVC的action方法，并传递参数，action返回值可以是普通字符串，也可以是json对象。

请求可以添加自定义头信息Ext.onReady(function() {new Ext.Button({renderTo: "div1",text: "后台Ajax提交",handler: function() {Ext.Ajax.request({url: 'Ajax_Func1',headers: {'userHeader': 'userMsg' },params: { a: 10, b: 20 },method: 'GET',success: function(response, options) {Ext.MessageBox.alert('成功', '从服务端获取结果: ' +response.responseText);},failure: function(response, options) {Ext.MessageBox.alert('失败', '请求超时或网络故障,错误编号：' + response.status);}});},id: "bt1" });});后台返回的数据如：{success:true,msg:"ok"}例2异步请求，返回json结果Ext.onReady(function() {new Ext.Button({renderTo: "div1",text: "后台Ajax提交方式2返回JSON",handler: function() {Ext.Ajax.request({url: 'Ajax_Func2',params: { n: 10 },method: 'POST',callback: function(options, success, response) {if(success) {var responseJson = Ext.JSON.decode(response.responseText);Ext.Msg.alert("成功", options.params.n + "的平方是：<font color='red'>" + responseJson.n1 + "</font><br />"+ options.params.n + "的累加是：<fontcolor='red'>" + responseJson.n2 + "</font>");} else{Ext.Msg.confirm('失败','请求超时或网络故障,错误编号：[' +response.status + ']是否要重新发送？', function(btn) {if (btn == 'yes') {Ext.Ajax.request(options);}});}}});}});});服务端返回数据形如：{ success:true,n1:100,n2:20}例3异步请求事件。

JSform表单操作大全

JSform表单操作⼤全表单是⼀个⽹站的重要组成内容，是动态⽹页的⼀种主要的表现形式，它主要⽤于实现收集浏览者的信息或实现搜索等功能。

JavaScript 对表单的处理是作为⼀个对象来处理的。

在 JavaScript 中，根据其作⽤，对象主要分为 JavaScript 内置对象、DOM 对象和 BOM（浏览器）对象。

表单属于 DOM 对象，所以对表单对象的处理可以使⽤DOM。

1. 表单对象⼀个 form 对象代表⼀个 HTML 表单，在 HTML 页⾯中由 <form> 标签对构成。

JavaScript 运⾏引擎会⾃动为每⼀个表单标签建⽴⼀个表单对象。

对 form 对象的操作需要使⽤它的属性或⽅法。

form 对象的常⽤属性和⽅法分别见表 1 和表 2。

表 1：form 对象常⽤属性属性描述action设置或返回表单的 action 属性elements表⽰包含表单中所有表单元素的数组，使⽤索引引⽤其中的元素length返回表单中的表单元素数⽬method设置或返回将数据发送到服务器的 HTTP ⽅法name设置或返回表单的名称target设置或返回表单提交的数据所显⽰的 frame 或窗⼝onreset在重置表单元素之前调⽤事件处理⽅法onsubmit在提交表单之前调⽤事件处理⽅法表 2：form 对象常⽤⽅法⽅法描述reset()把表单的所有输⼊元素重置为它们的默认值submit()提交表单获取表单的⽅式有以下⼏种：通过 document 的 forms 属性：document.forms[索引值]，索引值从 0 开始。

直接引⽤表单的 name 属性：document.formName。

通过表单的 ID：调⽤ document.getElementById() ⽅法。

通过表单的 name 属性：调⽤ document.getElementsByName() [表单索引]⽅法。

通过表单标签：调⽤ document.getElementsByTagName() [表单索引]⽅法。

ExtJs4.0入门教程

ExtJS简介

ExtJS显示效果示例1
ExtJS简介

ExtJS显示效果示例2
ExtJS简介

认识ExtJS的开发包
要开始ExtJS之旅的第一步是要获得开发包，可以从官方网站/下载。下载地址是 /products/extjs/downloa d
•
ExtJS组件之Panel

•
控件
控件(widgets)：控件是指可以直接在页面中创建的可视化组件，比如面板、选项板、表格、树、窗口、菜单、工具栏、按钮等等，在我们的应用程序中可以直接通过应用这些控件来实现友好、交互性强的应用程序的UI。
ExtJS基础组件

•
组件分类举例
容器组件：如toolbar、pagingtoolbar、panel、 form、menu、treePanel、gridPanel、window等。工具栏及菜单栏组件：如tbseparator（工具栏分隔符）、menuitem（菜单项）等。表单及元素组件：如checkboxfield（复选框）、 combo(下拉列表)、datefield（日期选择项）等。其他组件（包括图表、视图、编辑、按钮组件）：如chart、button。
• • • • •
• •
ExtJS简介

ExtJS API文档
ExtJS简介

•
从Hello World开始
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> <link rel='stylesheet' type='text/css' href='./ext/resources/css/ext-all.css'> <script type="text/javascript" src="./ext/bootstrap.js"></script> <script type="text/javascript"> Ext.onReady(function(){ Ext.MessageBox.alert('helloWorld',"I'm coming"); }); </script> </head> <body> </body> </html>

js中form的用法

js中form的用法一、什么是HTML表单？HTML表单（Form）是一种用于在网页中收集用户输入信息并将其发送到服务器的机制。

它是构建交互式网页的关键组成部分之一。

通过表单，我们可以向用户展示各种输入字段和选项，并根据用户的填写内容进行相应的处理。

二、表单的基本结构在使用JavaScript操作表单之前，先了解下HTML表单的基本结构。

一个简单的表单通常由以下几个重要元素组成：1. 表单标签（form）：用来包裹整个表单内容，并指定提交数据时所调用的服务器端脚本或URL。

2. 输入字段元素：包括文本框、密码框、下拉选择框、复选框等，用来接收用户输入或选择。

3. 提交按钮（submit）：当用户填写完毕后，点击此按钮将触发提交表单数据到服务器端。

三、访问和修改表单元素的值使用JavaScript操作表单元素可以获取到用户填写或选择的值，并根据实际需求进行相应处理。

1. 获取元素对象：通过JavaScript可以通过ID、标签名等方式获取到对应的HTML元素对象，在这里我们需要获取具体某个输入字段对象。

例如：```javascriptvar inputElement = document.getElementById('inputId'); // 通过id获取输入字段对象```2. 获取值属性：通过获取元素对象后，可以使用.value属性来访问到元素的值。

例如：```javascriptvar inputValue = inputElement.value; // 获取输入字段的值```3. 修改值属性：同样，我们也可以修改元素对象的值。

例如：```javascriptinputElement.value = '新的值'; // 修改输入字段的值为'新的值'```四、表单校验与提交处理在实际应用中，表单校验是保证用户输入符合要求并确保数据安全性的重要一环。

ExtJs学习资料17Ext.form.FormPanel表单对象操作说明

1、引入ExtJs框架文件（存入Global.js文件中）document.write("<link rel=\"stylesheet\" type=\"text/css\" href=\"../extjs/resources/css/ext-all.css\"/> "); document.write("<script type=\"text/javascript\" src=\"../extjs/adapter/ext/ext-base.js\"></script>");document.write("<script type=\"text/javascript\" src=\"../extjs/ext-all.js\"></script>");document.write("<script type=\"text/javascript\" src=\"../extjs/ext-lang-zh_CN.js\"></script>");2、引入Global.js文件<script type="text/javascript" src="Global.js"></script><style type="text/css">.icon{background:url(icon.gif) 0 4px no-repeat !important}</style>3、效果图===================================================================================================================== 4、JS源代码<script type="text/javascript">Ext.onReady(function(){//--开始-->; //初始化提示信息实例Value Description----------- --------------------------------------------qtip当鼠标从输入栏移过时显示一个quick tiptitle 显示一个默认的浏览器弹出标题属性under在输入栏下显示一个块状div,包含出错文本side 在输入栏右侧显示一个突出的出错图标[element id] 直接在指定元素的innerHTML中加入出错文本----------------------------------------------------------"side";//======================正则表达式自定义========================"jack Val"]=/^[\u4E00-\u9FA5]+$/; //允许输入//"jack Mask"]=/^[A-Za-z]+$/; //输入指定的字符,除此之外不响应"jack Text"]="只能输汉字"; //提示信息"jack"]=function(v){ //检测函数return "jackVal"].test(v);}//======================附加正则表达式自定义========================Ext.applyIf(,{"telphone":function(_v){return/(^\d{3}\-\d{7,8}$)|(^\d{4}\-\d{7,8}$)|(^\d{3}\d{7,8}$)|(^\d{4}\d{7,8}$)|(^\d{7,8}$)/.test(_v);},"telphone Text":"请输入合法的电话号码","telphone Mask":/[0-9\-]/i,"mobile":function(_v){return/^1[1-9][0-9]\d{8}$/.test(_v);},"mobile Text":"请输入合法手机号码","mobile Mask":/[0-9]/i});//=====================定义简单数据源===============================var myStore=newfields:["txtValue","txtName"],data:[["1","喜剧"],["2","悲剧"],["3","动作"]]});//==============定义动态数据源(从服务器端获取数据)====================var dynamicStore=new/*服务器端返回信息格式:<%@LANGUAGE="VBSCRIPT" CODEPAGE="65001"%><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <%response.Clear()response.Write("{rows:[{txtValue:""1"",txtName:""喜剧"",sortOrder:0},")response.Write("{txtValue:""2"",txtName:""悲剧"",sortOrder:1},")response.Write("{txtValue:""3"",txtName:""动作"",sortOrder:2},")response.Write("{txtValue:""4"",txtName:""爱情"",sortOrder:3}]}") %>*///DataReader对象,它处理数据对象并返回,reader:newfields:["txtValue","txtName"],root:"rows"}),//如果传入此值,store将在被创建后使用autoLoad对象作为参数自动调用load方法autoLoad:true,//Proxy对象,提供访问数据对象的方法proxy:new url:"getJsonData.asp" })});//dynamicStore.load(); //使用配置的Reader从Proxy中加载Record缓存//================================================================var movie_form;if(!movie_form){movie_form=newid:"myForm", //组件唯一的id(默认值为一个自动生成的id)title:"电影信息表单", //panel头部显示的标题文字(默认值为 '')//autoWidth:true, //宽度充满整个文档的宽度width:460,//表单的宽度autoHeight:true,//表单自适应高度//height:400,//表单的高度// frame:如果为true,panel具有全部阴影(指在panel的整个body区域全部填充背景),//否则只在四周渲染一个1像素的边框(默认值为false)frame:true,iconCls:"icon", //提供一个被用作header图标的背景图片(默认值为 '')// monitorValid:如果为true,form监控自己的客户端校验状态,并使用校验状态循环触发事件.//如果需要在按钮上使用配置值formBind:true,将按钮绑定到表单的校验状态,那么该项必须为truemonitorValid:true,labelWidth:80,labelAlign:"right",//collapsible:如果为true，panel是可收缩的，并且有一个收起/展开按钮自动被渲染到它的头部工具区域，//否则panel的大小是固定的，没有按钮(默认值为 false)。

表单及其控件的了解

表单及其控件的了解了解表单及其控件1.form:表单标签表单属性：action:表单提交到哪里method:以什么方式去提交到action指定的地址，有get和post,默认为gettarget:在哪打开窗口placeholder:表示在文本框里面默认显示什么文字2.form里面含有的控件：input:select:option:textarea:3.表单控件的属性input属性：文本框：text< input type="text" ></input>密码框：password<input type="password"></input>普通按钮：button<input type="button"></input>单选按钮：radio<input type="radio"></input>复选框：checkbox<input type="checkbox"></input>提交按钮：submit<input type="submit"></input>重置按钮：reset<input type="reset"></input>select下拉列表里面的选项option属性：multiple<select multiple="multiple"><option ></option></select>textarea控件属性：cols,rows，他们是指该文本框的可见宽度<form><textarea cols="3" rows="2"></textarea></form>。

form表单中的属性和标签

form表单中的属性和标签表单标签：form(⾮常重要，必须掌握)form标签⽤于获取⽤户跟浏览器交互(包含输⼊，选择，上传⽂件等操作)的数据，并将数据打包发给服务端属性action：控制数据的提交路径action=""：默认向当前页⾯所在的地址提交数据action="全路径"：向当前的绝对路径的地址提交数据action="/index/"：后缀⽂件，将该后缀跟当前页⾯的地址进⾏拼接，并将数据提交到这个页⾯中method：控制数据的提交⽅式(也就是请求⾸⾏中的请求⽅式)，默认getmethod="get"：提交⽅式为get⽅式method="post"：提交⽅式为post⽅式enctype：控制数据提交的编码格式，默认为application/x-www-form-urlencodedenctype="application/x-www-form-urlencoded"：只能提交数据enctype="multipart/form-data"：可发送提交⽂件请求form中的标签input：⽂本框(百变⾦刚)，可通过type属性设置成不同类型的⽂本框type="text" 普通⽂本框<p><label for="name">⽤户名：<input type="text" id="name" value="username" placeholder="⽤户名⽂本框"></label></p>type="password" 密⽂⽂本框在该⽂本框输⼊任何⽂本，都会⽤密⽂的形式显⽰<p><label for="pwd">密码：<input type="password" id="pwd" placeholder="密码⽂本框"></label></p>type="date" ⽇历⽂本框<label for="birth">⽣⽇：<input type="date" id="birth"></label></p>type="radio" 单选按钮<p><label>性别：<input type="radio" name="gender" checked>男<input type="radio" name="gender">⼥</label></p>type="checkbox" 复选按钮<p><label>爱好：<input type="checkbox" name="hobby">阅读<input type="checkbox" name="hobby">K歌<input type="checkbox" name="hobby">跑步<input type="checkbox" name="hobby">画画</label></p>type="file" 上传⽂件按钮<p><label for="open"><input type="file" id="open"></label>type="button" 普通按钮，没有任何功能，后期可⾃定义功能<label for="button"><input type="button" id="button" value="普通按钮"></label>type="submit" 提交按钮，将当前按钮所在form标签中的数据提交到服务端，请求⽅式为POST <label for="submit"><input type="submit" id="submit" value="提交"></label>type="reset"：重置按钮，将将当前按钮所在form标签中的数据清空<label for="reset"><input type="reset" id="reset" value="重置"></label>button：按钮<label for="cancel"><button id="cancel">取消</button></label>select：下拉框，跟option搭配使⽤<p><label>省份：<select id="provences" multiple><option value="">北京</option><option value="">上海</option><option value="">⼴州</option><option value="">深圳</option><option value="">武汉</option><option value="">西安</option></select></label></p>textarea：多⾏⽂本框<p><label for="textarea">个⼈简介：<textarea name="" id="textarea" cols="60" rows="10"></textarea></label></p>。

FORM表单

■
示例： <form action="/a.jsp" method="POST"> 请填入电话号码：请填入电话号码： <input type="text" name="phone" value="" size="10" maxlength="8"> </form> 见示例p04.html ◎ 见示例
<form action="/a.jsp" method="get"> 请填入您的姓名：您的姓名张三" 请填入您的姓名：<input type="text" name="name" value="张三 size="10" maxlength="4"><br> 张三请填入电话号码：请填入电话号码：<input type="text" name="phone" value="" size="10" maxlength="8">    <input type="submit" value="提交提交"> 提交 </form>
见示例p03.htmlቤተ መጻሕፍቲ ባይዱ◎ 见示例
text （单行文本输入框）单行文本输入框本输入框）
<input type="text" name="age" value="20" size="2" maxlength="255"> ■ 主要属性

表单控件的使用

单选框控件的属性设置
name
用于标识单选框的名称，在提交表单时使用。
disabled
禁用单选框，用户无法选择该选项。
value
单选框的唯一标识符，当用户选择该选项并提交表单时，该值会被发送到服务器。
checked
设置单选框为默认选中状态。
单选框控件的使用场景
调查问卷
在调查问卷中，可以使用单选框让用户在一组选项中选择一个答案。
表单控件的分类
总结词
表单控件可以根据其用途和功能进行分类。
详细描述
根据用途和功能，表单控件可以分为以下几类：输入框、选择器、开关、滑块、上传控件等。每种类型的控件都有其特定的使用场景和功能特点，以满足用户的不同需求。
表单控件的发展历程
总结词
表单控件的发展历程可以追溯到早期的Web开发。
详细描述
在早期的Web开发中，表单控件相对简单，主要用于简单的数据提交。随着Web技术的不断发展，表单控件的功能和外观也日益丰富和多样化，支持更多的交互和定制化需求。如今，表单控件已经成为Web界面设计中不可或缺的一部分，为提升用户体验和实现用户交互提供了强大的支持。
02
文本框控件
文本框控件的概述
文本框控件是一种常见的表单控件，用于获取用户输入的文本信息。它通常用于表单中需要用户输入文本的场景，如填写姓名、地址、电话号码等。
复选框常用于多选调查问卷、表单提交等场景，方便用户快速选
择多个选项。
复选框控件的属性设置
name
复选框的名称，用于标识该复选框的唯一性。
value
复选框的值，当用户选中该复选框时，该值会被提交给服务器。
disabled
是否禁用该复选框，禁用后的复选框无法进行选择操作。

1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。