Ext.form.Panel表单面板各组件介绍

最新推荐文章于 2024-03-26 17:18:18 发布
最新推荐文章于 2024-03-26 17:18:18 发布
阅读量6.4k 收藏 2
点赞数 2
分类专栏： Extjs
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/trassion/article/details/9093781
版权

1、Ext.form.FormPanel支持的主要表单组件

ExtJS表单组件说明Xtype类型
Ext.form.field.CheckBox复选框checkboxfield
Ext.form.CheckBoxGroup复选框组checkboxgroup
Ext.form.field.ComboBox下拉列表框combo
Ext.form.field.Date日期选择框datefield
Ext.form.field.Display文本显示组件displayfield
Ext.form.field.FieldContainer字段容器fieldcontainer
Ext.form.field.FieldSet字段集fieldset
Ext.form.field.Hidden隐藏域hiddenfield
Ext.form.field.HtmlEditerHTML文本编辑器htmleditor
Ext.form.Label标签字段label
Ext.form.field.Number数字输入框numberfield
Ext.form.field.Radio单选框radio
Ext.form.RadioGroup单选框组radiogroup
Ext.form.field.Spinner微调组件spinnerfield
Ext.form.field.TextArea多行文本框textareafield
Ext.form.field.Text单行文本框textfield
Ext.form.field.Time时间选择框timefield
Ext.form.field.Trigger触发器按钮文本框triggerfield
Ext.form.field.File文本框上传字段filefield

2、Ext.form.Panel主要配置项目表

配置项类型说明
buttonsArray一个按钮（Ext.button.Button）配置对象数组，按钮将被添加到表单页脚中
layoutString表单布局
minButtonWidthNumber表单按钮的最小宽度，默认为75px
pollForChangesBoolean是否循环检查表单值的变化
pollIntervalNumber循环检查表单值的时间间隔，默认为500ms
itemsMixed一个子元素或子元素的数组
titleString表单标题

3、Ext.form.FormPanel常用方法表

方法名说明
checkChange:void强制检查每个表单字段是否发生了变化
getForm():Ext.form.BasicForm获取表单面板对应的基本表单对象
load(Object options):void加载表单内容
startPolling(Number interval):void

开始循环检查表单值是否发生了变化

参数说明：

interval：循环检查的时间，单位ms

stopPolling:void停止startPolling启动的内置任务
submit(Object options):void提交表单内容

4、Ext.form.field.Base主要配置项目表

配置项类型说明
dirtyClsString设置表单值被修改后的样式
fieldClsString设置表单字段的样式，默认为“x-form-field”
focusClsString设置表单字段获得焦点时的样式，默认为“x-form-focus”
idString控件的唯一标识，默认系统自动生成一个唯一标识
inputIdString这个id将被应用于生成的input元素，默认情况下这个id自动生成，如果手工配置id则需保证这个id的唯一性
invalidTextString设置表单值无效且并没有提供信息时的显示文字
inputTypeString字段类型，默认为text
nameString字段名，默认为undefined
readOnlyBoolean设置字段是否只读，默认为false。
Mixin:Ext.form.field.Field
disabledBooleantrue则禁用组件，默认为false。禁用状态下的组件将不被提交
submitValueBoolean设置表单字段非禁用状态下是否提交表单值，默认为true
validateOnChangeBoolean设置是否在值发生变化时立刻校验的有效性，默认为true
valueMixed字段的初始化值
Mixing:Ext.form.Labelable
activeErrorString如果设置该值，则组件第一次被渲染时该值将被作为错误信息展示，默认为undefined，组件创建之后可以使用setActiveError和unsetActiveError进行修改
activeErrorTplExt.XTemplate错误信息模板
autoFitErrorsBoolean设置为true则自动调节组件体范围，以便在组件范围内显示“side”或“under”状态的错误信息，默认为true
fieldLabelString设置字段标签，它将与labelSeparator一起被添加，它的位置尺寸决定于labelAlign，labelWidth和labelPad配置项，默认为undefined
hideEmptyLabelBoolean设置为true则完全隐藏内容为空的标签
hideLabelBoolean设置为true则完全隐藏表单标签（fieldLabel和labelSeparator），默认为false
labelAlignString

设置表单标签filedLabel的位置，

有效值：left：

标签在字段左边。top：

标签在字段上面。

right：标签在字段右边。

labelPadNumber设置表单标签与表单字段值之间的空白间距，默认为5px
labelSeparatorString设置表单标签与表单字段之间的分隔符
labelStyleString设置一个直接应用于标签元素的样式字符串，默认为undefined
labelWidthNumber设置表单标签宽度，仅当labelAlign设置为“left”或“right”时生效，默认为100px
labelableRenderTplArray/String/Ext.Template表单标签模板
msgTargetString

设置错误信息提示位置，

有效值包括：

qtip：显示一个浮动的提示消息

title：显示一个浏览器浮动提示消息

under：在字段下面显示一个提示消息

side：在字段右边显示一个提示消息

none：不显示提示消息

[element id]：直接将错误消息添加到指定元素的innerHTML属性

preventMarkBooleantrue则不显示错误消息，默认为false

5、简单实例

代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Ext.form.Panel</title>
    <link href="ext-4.0.7-gpl/resources/css/ext-all.css" rel="stylesheet" type="text/css" />
    <script src="ext-4.0.7-gpl/bootstrap.js" type="text/javascript"></script>
    <script type="text/javascript">
        Ext.onReady(function () {
            Ext.QuickTips.init();
            var form = new Ext.form.Panel({
                title: "表单",
                height: 120,
                width: 200,
                frame: true,
                collapsible: true,
                renderTo: Ext.getBody(),
                defaults: {
                    autoFitErrors: "false",
                    labelSeparator: "：",
                    labelWidth: 50,
                    width: 150,
                    allowBlank: false,
                    blankText: "必填",
                    msgTarget: "qtip"
                },
                items: [{
                    xtype: "textfield",
                    fieldLabel: "姓名"
                }, {
                    xtype: "numberfield",
                    fieldLabel: "年龄"
                }]
            });
        });
    </script>
</head>
<body style="margin: 30px">
</body>
</html>


trassion
关注
专栏目录
[Ext JS]3.2 表单(Form)及表单元素
oscar999的专栏
03-27 1478
表单用于收集用户的信息，在HTML中对应`<form>`标签，使用`<input>`标签在表单下添加输入框。 在Ext JS中，表单是面板的一种，对应的类是`Ext.form.Panel`，除了输入框，Ext JS提供了丰富多样的表单元素组件，并称这些组件为表单字段（Form Fields）
(16)ExtJS之comboBox本地数据源、Ext.form.Label标签、Ext.form.FieldSet字段集
虚心求学_一点一滴
02-27 1929
//1:comboBox本地数据源 /*Ext.onReady(function(){ //创建数据源模型 Ext.regModel('PostInfo',{ fields:[{name:'province'},{name:'post'}] }); //定义组合框中显示的数据源 var postStore=Ext.create('Ext.data.Store',{
Ext.form.Panel表单面板
weixin_33951761的博客
04-15 328
1、Ext.form.FormPanel支持的主要表单组件 ExtJS表单组件说明Xtype类型 Ext.form.field.CheckBox 复选框 checkboxfield Ext.form.CheckBoxGroup 复选框组 checkboxgroup Ext.form.field.ComboBox 下拉列表框 combo Ex...
表单Ext.form.FormPanel
weixin_33782386的博客
06-24 275
1、表单 对于传统的b/s应用来说，数据录入元素是放在表单&lt;form&gt;标签里面的。而对于ExtJS应用来说，则可以直接使用FormPanel控件来存放表单中的元素。FormPanel继承自Panel，在Panel的基础上提供与表单相关的各种特性，比如可以指定表单提交的url、指定表单提交方式、是否是二进制提交等；另外FormPanel固定使用form布局，前面关于布局一节中的内容我们...
ExtJs学习系列(4)--Ext.FormPanel
缭绕
06-07 4290
首先弄清楚这个问题，创建的时候： //查看源代码便知，两种方法是一样的 Ext.form.FormPanel = Ext.FormPanel; html代码--> body> div id="form1">div> body> //js代码 var form1 = new Ext.form.FormPanel({        width:350,
ExtJS笔记--Ext.form.FormPanel(二)
wjt276的专栏
09-12 359
  1、layout : String  此容器所使用的布局类型。如不指定，则使用缺省的Ext.layout.ContainerLayout类型。 当中有效的值可以是：accordion、anchor、border、cavd、column、fit、form和table。 针对所选择布局类型，可指定#layoutConfig进一步配置。   2、layoutConfig : Object...
EXT.form组件
10-26
1. `form`：`Ext.FormPanel`是EXT JS中的表单面板，它是一个容器，可以容纳各种表单字段和其他组件。表单面板允许你定义布局、提交行为以及处理表单数据的方法。 2. `checkbox`：`Ext.form.Checkbox`是用于创建复选...
extjs4的Ext.frorm.Panel控件属性说明和表单控件说明
04-18
主要用例子说明extjs4的form表单的运用，其中有表单属性说明，表单控件运用说明如： title:'表单', //表单标题 bodyStyle:'padding:5 5 5 5', //表单边距 height:120, //表单高度 width:200, //表单宽度 ...
EXT dojochina文本框示例Ext.form.TextField.rar
03-09
1. **基本用法**：最简单的使用方式是在表单（`Ext.form.Panel`）中创建一个`Ext.form.TextField`，用于用户输入文本。例如： ```javascript var form = new Ext.form.Panel({ items: [{ xtype: 'textfield', ...
ExtJS笔记--Ext.form.FormPanel(一)
wjt276的专栏
09-12 1382
Ext.form.FormPanel    类全称： Ext.form.FormPanel 继承自于： Ext.Panel   配置项   1、formId : String  （可选的）FORM标签的id（默认是自动生成的）。   2、labelWidth : Number  标签的宽度。该属性级联于子容器。    3、 itemCls : String  关于容...
Ext_基本表单_Ext.form.BasicForm
66
04-11 4968
/*Ext.form.BasicForm基本表单组件，提供对表单动作的支持并负责初始化已有字段组件默认采用Ajax方式进行异步数据提交，如要用原始方法提交表单可覆盖表单的onSubmit及Submit方法######################################################################################
ExtJS 基础解析之【Ext.FormPanel】之一
weixin_34037515的博客
08-19 112
今天我和大家继续分享ExtJS！OK!上篇中我们分享了Ext.window的简单使用，今天我们要看看强大的FormPanel,也是继承panel组件的使用。首先弄清楚这个问题，创建的时候： //查看源代码便知，两种方法是一样的Ext.form.FormPanel = Ext.FormPanel;我们还是从最简单的代码实例开始吧：<!--html代码--><body>&lt...
Ext.Net-----FormPanel(表单面板 属性|方法|事件)
最新发布
five_s的博客
03-26 620
Ext.Net
Ext.FormPanel
IT技术交流
09-12 125
1、Ext.FormPanel参数内容 FromPanel组件，它继承自panel.其中属性可参考panel。 关于xtype的类型，在extjs的form表单中已经定义的有： form Ext.FormPanel checkbox Ext.form.Checkbox combo Ext.form.ComboBox...
Ext.form.FormPanel
zhaoqian888的专栏
10-10 119
3、Ext.form.FormPanel 配置项： items：一个元素或元素数组 buttons：一个按钮配置对象的数组，按钮将被添加到表单页脚中 buttonAlign：按钮的对齐方式，可选值有left、center、right，默认为center labelWidth：表单标签的...
Ext JS表单Ext.form.FormPanel
Coco5419的博客
11-05 495
1、表单 对于传统的b/s应用来说，数据录入元素是放在表单<form>标签里面的。而对于ExtJS应用来说，则可以直接使用FormPanel控件来存放表单中的元素。FormPanel继承自Panel，在Panel的基础上提供与表单相关的各种特性，比如可以指定表单提交的url、指定表单提交方式、是否是二进制提交等；另外FormPanel固定使用form布局，前面关于布局一节中...
extjs Ext.form.Panel 表单面板学习
西京刀客
06-17 1960
⭐️来自很多年前的extjs笔记，只是一个归档，不做更新！⭐️
Ext.form.FormPanel 样例
05-26
以下是一个基本的 Ext.form.FormPanel 样例： ```javascript Ext.onReady(function(){ Ext.create('Ext.form.Panel', { renderTo: Ext.getBody(), title: '简单表单', width: 300, bodyPadding: 10, defaultType: 'textfield', items: [{ fieldLabel: '姓名', name: 'name', allowBlank: false }, { fieldLabel: '密码', name: 'password', inputType: 'password', allowBlank: false }, { xtype: 'checkbox', fieldLabel: '已婚', name: 'married' }], buttons: [{ text: '重置', handler: function() { this.up('form').getForm().reset(); } }, { text: '提交', formBind: true, handler: function() { var form = this.up('form').getForm(); if (form.isValid()) { form.submit({ url: 'submit.php', success: function(form, action) { Ext.Msg.alert('成功', action.result.msg); }, failure: function(form, action) { Ext.Msg.alert('失败', action.result.msg); } }); } } }] }); }); ``` 这个样例创建了一个简单的表单，包含了一个文本框、一个密码框和一个复选框，以及两个按钮：一个用于重置表单，另一个用于提交表单。当用户点击“提交”按钮时，表单将被提交到一个名为“submit.php”的服务器端脚本进行处理。如果表单提交成功，将会弹出一个“成功”提示框，否则将会弹出一个“失败”提示框。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

trassion

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值