ExtJS入门教程：探索ExtJS的FormPanel与表单控件

31 浏览量更新于2024-08-31 收藏 271KB PDF 举报

"了解Extjs中的表单处理是Web开发中的重要技能，特别是对于那些使用Extjs框架的人来说。本文将深入探讨Extjs Form，包括其基本概念、常用的表单组件以及如何在实践中创建和使用表单。 Extjs Form是基于传统的HTML表单进行封装的组件，提供了更丰富的功能和更简便的服务器通信方式。核心组件是Ext.form.BasicForm，但实际开发中更常用的是Ext.form.FormPanel，它继承自Panel，不仅具备界面布局能力，还内含一个BasicForm实例，用于处理数据的提交和加载。表单组件在Extjs中扮演着关键角色，例如TextField（文本字段）、NumberField（数字字段）、Radio（单选按钮）和CheckBox（复选框）等。这些组件通常拥有额外的功能，如数据验证，使开发者能够构建更加健壮的表单。为了更好地理解Extjs Form的使用，我们可以创建一个简单的示例。假设我们已经建立了一个ASP.NET站点，并将Extjs库添加到其中，接下来创建一个名为`forms.htm`的页面。在该页面中，我们需要设置FormPanel并添加所需的表单项。以下是一个基本的HTML和JavaScript代码示例： ```html <!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> <title>Extjs FormPanel</title> <link rel="Stylesheet" type="text/css" href="ext-3.1.0/resources/css/ext-all.css"/> <style type="text/css"> .allow-float{clear:none!important;} .stop-float{clear:both!important;} .float-left{float:left;} </style> <script type="text/javascript" src="ext-3.1.0/adapter/ext/ext-base.js"></script> <script type="text/javascript" src="ext-3.1.0/ext-all.js"></script> </head> <body> <script type="text/javascript"> Ext.onReady(function(){ var formPanel = new Ext.form.FormPanel({ title: '表单示例', width: 400, bodyPadding: 10, items: [{ fieldLabel: '姓名', xtype: 'textfield', name: 'name' }, { fieldLabel: '年龄', xtype: 'numberfield', name: 'age' }, { fieldLabel: '性别', xtype: 'radiofield', name: 'gender', boxLabel: '男', checked: true }, { fieldLabel: '爱好', xtype: 'checkboxfield', name: 'hobby', boxLabel: '阅读' }], buttons: [{ text: '提交', handler: function(){ // 提交表单逻辑 } }] }); formPanel.render('form-div'); }); </script> <div id="form-div"></div> </body> </html> ``` 在这个示例中，我们创建了一个FormPanel，设置了标题、宽度和内边距。接着，我们添加了几个表单项：一个文本字段（`textfield`）用于输入姓名，一个数字字段（`numberfield`）用于输入年龄，一个单选按钮（`radiofield`）用于选择性别，以及一个复选框（`checkboxfield`）用于选择爱好。最后，我们定义了一个按钮，当点击时可以触发提交表单的逻辑。通过这种方式，Extjs Form使得构建复杂的Web表单变得轻松且直观。开发者可以根据需求添加更多的表单组件，实现更丰富的用户交互和数据验证。同时，利用Extjs的API，可以方便地处理表单数据的提交，与后端服务器进行通信，从而完成数据的保存或查询操作。"

Extjs学习笔记之二学习笔记之二初识初识Extjs之之Form

form恐怕是Web开发中最常用的控件了，Extjs对普通的html form进行了一些封装，使其具有基本的外观和一些

简便的和服务器进行通信的方法。

Extjs中的表单组件是Ext.form.BasicForm，不过最简单最常用的是Ext.form.FormPanel控件，它继承自Panel，具有一定的界

面显示控制能力，它其中包含着一个BasicForm对象，用来执行向服务器提交，加载等动作。Extjs也对常用的html表单项进行

了封装，提供了一些额外的功能，比如数据验证。实际使用的时候只要向FormPanel中添加这些表单项即可。常见的表单项

有，TextField，NumberField,Radio,CheckBox等。

下面通过一个例子来介绍基本Form的使用。由于使用Form要和服务器端程序交互，方便起见，新建一个asp.net站点，把extjs

的所有文件都添加到站点下面，再新建一个forms.htm文件，作为此次的样例文件，如下图：

image

下面为forms.htm添加代码，主要是为FormPanel添加表单项：

复制代码代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-

transitional.dtd">

<head>

<title>Extjs FormPanel</title>

.allow-float{clear:none !important;}

.stop-float{ clear:both !important;}

.float-left{float:left;}

</style>

Ext.onReady(function() {

Ext.BLANK_IMAGE_URL = 'ext-3.1.0/resources/images/default/s.gif';

Ext.QuickTips.init(); //初始化信息提示功能

var loginForm = new Ext.form.FormPanel({

title: 'A Simple FormPanel',

height: 300,

width: 300,

frame: true,

labelSeparator: ':',

labelWidth: 60,

labelAlign: 'right',

applyTo: 'form',

items: [

new Ext.form.TextField({

id: 'Name',

fieldLabel: 'Name',

allowBlank: false,

blankText: '必填字段',

msgTarget: 'qtip'

}),

new Ext.form.TextField({

id:'Password',

fieldLabel: 'Password',

allowBlank: false,

inputType: 'password',

blankText: '必填字段',

//msgTarget: 'qtip'

下载后可阅读完整内容，剩余4页未读，立即下载

weixin_38741996

粉丝: 45
资源: 932

ExtJS入门教程：探索ExtJS的FormPanel与表单控件

ExtJs学习笔记：优缺点与深入探索

ExtJs学习笔记：优缺点与关键技术探讨

ExtJs学习笔记：从基础到高级探索

Extjs学习笔记之一 初识Extjs之MessageBox

Extjs学习笔记之三 extjs form更多的表单项

Extjs学习笔记之七 布局

Extjs学习笔记之六 面版

Extjs学习笔记

ExtJs学习笔记 ExtJs Api

Extjs学习笔记之四 工具栏和菜单

最新资源

Extjs学习笔记之一初识Extjs之MessageBox

Extjs学习笔记之七布局

Extjs学习笔记之六面版

Extjs学习笔记之四工具栏和菜单