extjs Ext.form.Panel 表单面板学习

西京刀客

于 2023-06-17 22:40:09 发布

阅读量1.7k

点赞数

分类专栏： web前端/桌面前端/js/ts/ui设计/ 文章标签：前端 extjs

本文链接：https://blog.csdn.net/inthat/article/details/131265611

版权

web前端/桌面前端/js/ts/ui设计/ 专栏收录该内容

74 篇文章 19 订阅

订阅专栏

Ext.form.Panel xtype: form

⭐️来自很多年前的extjs笔记，只是一个归档，不做更新！⭐️

概述

FormPanel provides a standard container for forms. It is essentially a standard Ext.panel.Panel which automatically creates a Ext.form.Basic for managing any Ext.form.field.Field objects that are added as descendants of the panel. It also includes conveniences for configuring and working with the BasicForm and the collection of Fields.

表单面板提供一个标准的容器为表单forms。它本质上是一个面板组件（Ext.panel.Panel）可以自动创建一个表单管理许多添加到这个表单上的Ext.form.field.Field对象。它很方便的配置和工作通过基础表单加fiels集合。

Layout

By default, FormPanel is configured with Ext.layout.container.Anchor for the layout of its immediate child items. This can be changed to any of the supported container layouts. The layout of sub-containers is configured in the standard way.

默认情况下，表单面板通过Ext.layout.container.Anchor组件配置直接子组件的布局。它可以被改变被任何支持的容器布局。子容器的布局配置是一种标准方式。

BasicForm

FormPanel class accepts all of the config options supported by the Ext.form.Basic class, and will pass them along to the internal BasicForm when it is created.

表单面板类支持接收所有的来自Ext.form.Basic类支持的配置项，传递配置项给内部的BasicForm，当表单面板创建时。

The following events fired by the BasicForm will be re-fired by the FormPanel and can therefore be listened for on the FormPanel itself:

下面被BasicForm触发的事件将被重新触发通过表单面板，因此，可以表单面板可以监听自身。

beforeaction
actionfailed
actioncomplete
validitychange
dirtychange

Field Defaults

The fieldDefaults config option conveniently allows centralized configuration of default values for all fields added as descendants of the FormPanel. Any config option recognized by implementations of Ext.form.Labelable may be included in this object. See the fieldDefaults documentation for details of how the defaults are applied.

fieldDefaults配置项方便你集中配置默认值给所有的field的默认值。所有的配置项都识别Ext.form.Labelable。查看fieldDefaults文档了解应用默认值详细信息。

Form Validation

With the default configuration, form fields are validated on-the-fly while the user edits their values. This can be controlled on a per-field basis (or via the fieldDefaults config) with the field config properties Ext.form.field.Field#validateOnChange and Ext.form.field.Base#checkChangeEvents, and the FormPanel’s config properties pollForChanges and pollInterval.

Any component within the FormPanel can be configured with formBind: true. This will cause that component to be automatically disabled when the form is invalid, and enabled when it is valid. This is most commonly used for Button components to prevent submitting the form in an invalid state, but can be used on any component type.

入恩和在表单面板中的组件可以配置 formBind:true。可以是组件自动失效（diaabled）当表单非法无效，自动生效当表单有效。最长用在按钮（button）组件上阻止提交表单以一个无效的状态，但是它也可以用在任何组件类型上。

For more information on form validation see the following:

更多有关表单验证的信息，查看一下内容：

Ext.form.field.Field#validateOnChange
pollForChanges and pollInterval
Ext.form.field.VTypes
BasicForm.doAction clientValidation notes

Form Submission

By default, Ext Forms are submitted through Ajax, using Ext.form.action.Action. See the documentation for Ext.form.Basic for details.

默认情况下，Ext表单提交通过Ajax，使用using Ext.form.action.Action。查看文档关于Ext.form.Basic了解更多。

Ext.form.Basic

概述

Provides input field management, validation, submission, and form loading services for the collection of Ext.form.field.Field instances within a Ext.container.Container. It is recommended that you use a Ext.form.Panel as the form container, as that has logic to automatically hook up an instance of Ext.form.Basic (plus other conveniences related to field configuration.)

提供输入字段管理，检验，提交以及从服务器端加载在容器（Ext.container.Container）中的字段实例。推荐您使用Ext.form.Panel作为表单容器，因为它有一些逻辑自动与Ext.form.Basic实例进行搭档工作（另外其他便利就是field表单元素配置）。

Form Actions

表单动作

The Basic class delegates the handling of form loads and submits to instances of Ext.form.action.Action. See the various Action implementations for specific details of each one’s functionality, as well as the documentation for doAction which details the configuration options that can be specified in each action call.

基类处理表单加载和提交到Ext.form.action.Action实例。查看各种动作的实现每个特定功能的详细内容，也可查看关于doAction文档,该文档描述了每一个动作调用的配置项。

The default submit Action is Ext.form.action.Submit, which uses an Ajax request to submit the form’s values to a configured URL. To enable normal browser submission of an Ext form, use the standardSubmit config option.

默认的提交动作是Ext.form.action.Submit，它使用Ajax请求提交表单的值到配置的URL。为了使通用的浏览器提交Ext表单，使用standardSubmit配置项。

File uploads

文件上传

File uploads are not performed using normal ‘Ajax’ techniques; see the description for hasUpload for details. If you’re using file uploads you should read the method description.

文件上传不使用通常的’Ajax’技术；查看hasUpload的描述，了解更多。如果你正在使用文件上传你应该阅读方法描述。

常用配置项：

padding ：指定这个组件的padding
Ext.Component
view source
padding : Number / String
Specifies the padding for this component. The padding can be a single numeric value to apply to all sides or it can be a CSS style specification for each style, for example: ‘10 5 3 10’ (top, right, bottom, left).
defaults 这个配置可以配置默认值为每一个它的组件。这样可以统一条件每个组件之间的距离。


	// defaults are applied to items, not the container 注意defaults写在外面，但是里面的配置应用到每个组件上
	defaults: {margin: '10 10 10 10'},

//api的例子
defaults: { // defaults are applied to items, not the container
	scrollable: true
},
items: [
	// default will not be applied here, panel1 will be scrollable: false
	{
		xtype: 'panel',
		id: 'panel1',
		scrollable: false
	},
	// this component will have scrollable: true
	new Ext.panel.Panel({
		id: 'panel2'
	})
]

scrollable: true 指定是否又滚动条。记录panel可以配滚动条- -

总结

表单
对于传统的B/S应用来说，数据录入元素是放在表单标签里面。而对于ExtJS应用来说，则可以直接使用FormPanel控件来存放表单中的元素。
FormPanel继承自Panel，在Panel的基础上提供与表单相关的特性，比如可以指定表单提交的url、指定表单提交方式、是否是二进制提交等；另外，FormPanel固定使用form布局，form布局也就是专门用于组织包含输入元素的布局。
BasicForm
表单面板FormPanel包含一个form属性，该属性是一个Ext.form.BasicForm类型的对象，可以直接访问，也可以通过getForm()方法得到。
BasicForm表示基本的表单，包含了submit、load、reset等方法，用来取代传统表单中的submit、reset等方法，通过调用这些方法可以实现提交表单、表单信息重置等操作。
Field，表单元素
Field代表各种各样的的数据录入项。在程序中，我们一般直接使用Field子类包括Checkbox,CheckboxGroup,CompositeField,DisplayField,Hidden,HtmlEditor,SliderField,TextField等。

Field组件一般包含一个fieldLabel属性及name属性。fieldLabel是在Component中定义的，用来定义字段的元素。

表单动作Ext.form.Action
表单动作包括表单内容提交submit，表单数据价值load两种。默认情况下都是通过ajax的方式向服务器段发送数据。
form.Panel布局
在Extjs Form中，默认的布局方式是layout:‘anchor’

anchor默认每行只显示一个控件，如果我们要在一行显示多个，需要将这些控件放在一个container中，并设置contaier的layout为hbox。
关于表单布局中使用百分比对表单进行布局处理，因此表单布局继承自anchor布局天生就支持百分比参数。

表单布局有两种布局，form和colum，form是纵向的，colum为横向。默认为后者。落实到任何一个表单组建后，最后总是form布局。在column布局中，童年columnWidth可以指定列所占宽度按的百分比，如占50%，宽度为.5。

布局其实由行和列组成，分成从左往右叫column，和从上往下form。
整个大的表单是form布局。如下实现一行多列。。。

//如下，容器指定layout为column，子组件中配columnWidth
Ext.create('Ext.form.Panel', {
	//id:'equipment_config_panel',
	width: '100%',
	height:'100%',
	border:false,
	bodyPadding : 10,
	collapsible: false,  
	closable: false,
	items:[
	{
		xtype: 'displayfield',
		fieldLabel: '产品型号',
		columnWidth:0.88,
		value:obj != null?obj.Product:''
	},
	{
		xtype:'container',
		layout:'column',
		anchor:'100%',
		items:[
			{
				xtype: 'displayfield',
				fieldLabel: '设备名称',
				columnWidth:0.88,
				value:obj != null?obj.Host:''
			},

Form和Form Basic
extjs Form和Form Basic是两个东西，Form提供界面的展示，而Form Basic则提供数据的处理、验证等功能，而Form Panel在创建的时候，都会绑定一个Form Basic，我们可以通过方法getForm来获取：
form.getForm();
编辑表单，这种情况就是，你表单里面有你之前的选择配置结果。思路，使用表单对象的setValues方法，解析服务器端的json，然后，它会自然把能前端对应的name，全部setValue。从而实现编辑表单的已配置选项。

//var form = xxx			
var result = Ext.decode(resp)[0];			
form.getForm().setValues(result);
dialog.formData = result;

还有一些字段，是那种，前端是一组相同name提交给后台是个数据，在后台，组合成一个字符串存储在一个字段中，思路:
在从后台取出数据时，组装成前端想要的结构（就是前端）。
对于那种在表单中加入非表单字段的，如grid，单独加载服务器返回的store，操作思路就是操作store：注意使用sotre的：loadData()方法，把从库中取到的数组，直接赋给store。

var riskFunc = result['riskFunc'];
console.log(riskFunc);
var gridFormStore = Ext.getCmp('riskFunc').getStore();
console.log(gridFormStore);
gridFormStore.removeAll();
/*
var rurl = '/JF/PolicyConfig_SqlInjectRule/getSqlInjectRuleById?ruleset_id='+record.get('id');
gridFormStore.proxy.url=rurl;
gridFormStore.proxy.type='ajax';
gridFormStore.reload();
*/

gridFormStore.loadData(riskFunc);
//loadData():   使用这个方法很赞，如果数据已经是正确格式，（它不需要通过reader的处理）；如果你需要解析数据结构使用Ext.data.proxy.Memory or loadRawData。loadData是载入对象;loadRawdata是直接载入服务返回的json；