Ext.FormPanel 学习示例

2024-03-24 00:08
文章标签 学习 示例 ext formpanel

本文主要是介绍Ext.FormPanel 学习示例,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

的FormPanel,也是继承panel组件的使用。
首先弄清楚这个问题,创建的时候: 

// 查看源代码便知,两种方法是一样的
Ext.form.FormPanel  =  Ext.FormPanel;

我们还是从最简单的代码实例开始吧:

<!-- html代码 -->
< body >
< div  id ="form1" ></ div >
</ body >

 

复制代码
// js代码
var  form1  =   new  Ext.form.FormPanel({
       width:
350 ,
       frame:
true , // 圆角和浅蓝色背景
       renderTo: " form1 " , // 呈现
       title: " FormPanel " ,
       bodyStyle:
" padding:5px 5px 0 " ,
       items:[
          {
            fieldLabel:
" UserName " , // 文本框标题
            xtype: " textfield " , // 表单文本框
            name: " user " ,
            id:
" user " ,
            width:
200
          },
          {
            fieldLabel:
" PassWord " ,
            xtype:
" textfield " ,
            name:
" pass " ,
            id:
" pass " ,
            width:
200
          }
       ],
       buttons:[{text:
" 确定 " },{text: " 取消 " ,handler: function (){alert( " 事件! " );}}]
    });
复制代码


都是通过items属性参数把表单元素添加到这个表单中。
我们发现两个文本框的类型和狂度是一样的,我们还可以把items里面的相同项提取出来,以简化代码:

复制代码
// 简化代码,和上面的代码效果一样
var  form1  =   new  Ext.form.FormPanel({
       width:
350 ,
       frame:
true ,
       renderTo:
" form1 " ,
       title:
" FormPanel " ,
       bodyStyle:
" padding:5px 5px 0 " ,
       defaults:{width:
200 ,xtype: " textfield " },//*****简化****//
       items:[
          {
            fieldLabel:
" UserName " ,
            
// xtype:"textfield",
            name: " user " ,
            id:
" user " ,
            
// width:200
          },
          {
            fieldLabel:
" PassWord " ,
            
// xtype:"textfield",
            name: " pass " ,
            id:
" pass " ,
            inputType:
" password " ,
            
// width:200
          }
       ],
       buttons:[{text:
" 确定 " },{text: " 取消 " ,handler: function (){alert();}}]
    });
复制代码

关于inputType,参数如下:

// input的各种类型(这个大家都知道,就只列了几个典型的)
radio
check
text(默认)
file
password等等

关于FormPanel的配置参数,请主要参考panel的参数,这里列举另外两个:

1 .labelAlign:fieldlabel的排列位置,默认为 " left " ,其他两个枚举值是 " center " , " right "
2 .labelWidth:fieldlabel的占位宽
3 .method: " get " " post "
4 .url: " 提交的地址 "

5 .submit:提交函数  // 稍后我们一起详细分析

因为内容太多,我们先看一个例子。
1.FormPanel的fieldset应用

复制代码
// 把前面代码重写items属性
items:[
          {
            xtype:
' fieldset ' ,
            title: 
' 个人信息 ' ,
            collapsible: 
true ,
            autoHeight:
true ,
            width:
330 ,
            defaults: {width: 
150 },
            defaultType: 
' textfield ' ,
            items :[{
                    fieldLabel: 
' 爱好 ' ,
                    name: 
' hobby ' ,
                    value: 
' www.cnblogs.com '
                },{
                    xtype:
" combo " ,
                    name: 
' sex ' ,
                    store:[
" " , " " , " 保密 " ],//数据源为一数组
                    fieldLabel:
" 性别 " ,
                    emptyText:
' 请选择性别. '
                }]
            }
       ]
复制代码


这里的combox组件只是简单的演示,具体还是要深入了解,我们会在以后的内容中详细探讨。
2.关于xtype的类型,在extjs的form表单(其他的请参考api)中已经定义的有:

复制代码
Form components
---------------------------------------
form             Ext.FormPanel
checkbox         Ext.form.Checkbox
combo            Ext.form.ComboBox
datefield        Ext.form.DateField
field            Ext.form.Field
fieldset         Ext.form.FieldSet
hidden           Ext.form.Hidden
htmleditor       Ext.form.HtmlEditor
label            Ext.form.Label
numberfield      Ext.form.NumberField
radio            Ext.form.Radio
textarea         Ext.form.TextArea
textfield        Ext.form.TextField
timefield        Ext.form.TimeField
trigger          Ext.form.TriggerField
复制代码

不早了,FormPanel还有很多的东西要了解,但是今天不能再讲了,太多了,大家都没有兴致看下去,明天继续。

这篇关于Ext.FormPanel 学习示例的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/839944

相关文章

PostgreSQL中rank()窗口函数实用指南与示例

《PostgreSQL中rank()窗口函数实用指南与示例》在数据分析和数据库管理中,经常需要对数据进行排名操作,PostgreSQL提供了强大的窗口函数rank(),可以方便地对结果集中的行进行排名... 目录一、rank()函数简介二、基础示例:部门内员工薪资排名示例数据排名查询三、高级应用示例1. 每

使用Python删除Excel中的行列和单元格示例详解

《使用Python删除Excel中的行列和单元格示例详解》在处理Excel数据时,删除不需要的行、列或单元格是一项常见且必要的操作,本文将使用Python脚本实现对Excel表格的高效自动化处理,感兴... 目录开发环境准备使用 python 删除 Excphpel 表格中的行删除特定行删除空白行删除含指定

SpringBoot线程池配置使用示例详解

《SpringBoot线程池配置使用示例详解》SpringBoot集成@Async注解,支持线程池参数配置(核心数、队列容量、拒绝策略等)及生命周期管理,结合监控与任务装饰器,提升异步处理效率与系统... 目录一、核心特性二、添加依赖三、参数详解四、配置线程池五、应用实践代码说明拒绝策略(Rejected

SQL中如何添加数据(常见方法及示例)

《SQL中如何添加数据(常见方法及示例)》SQL全称为StructuredQueryLanguage,是一种用于管理关系数据库的标准编程语言,下面给大家介绍SQL中如何添加数据,感兴趣的朋友一起看看吧... 目录在mysql中,有多种方法可以添加数据。以下是一些常见的方法及其示例。1. 使用INSERT I

SpringBoot中SM2公钥加密、私钥解密的实现示例详解

《SpringBoot中SM2公钥加密、私钥解密的实现示例详解》本文介绍了如何在SpringBoot项目中实现SM2公钥加密和私钥解密的功能,通过使用Hutool库和BouncyCastle依赖,简化... 目录一、前言1、加密信息(示例)2、加密结果(示例)二、实现代码1、yml文件配置2、创建SM2工具

MySQL 定时新增分区的实现示例

《MySQL定时新增分区的实现示例》本文主要介绍了通过存储过程和定时任务实现MySQL分区的自动创建,解决大数据量下手动维护的繁琐问题,具有一定的参考价值,感兴趣的可以了解一下... mysql创建好分区之后,有时候会需要自动创建分区。比如,一些表数据量非常大,有些数据是热点数据,按照日期分区MululbU

Python函数作用域示例详解

《Python函数作用域示例详解》本文介绍了Python中的LEGB作用域规则,详细解析了变量查找的四个层级,通过具体代码示例,展示了各层级的变量访问规则和特性,对python函数作用域相关知识感兴趣... 目录一、LEGB 规则二、作用域实例2.1 局部作用域(Local)2.2 闭包作用域(Enclos

C++20管道运算符的实现示例

《C++20管道运算符的实现示例》本文简要介绍C++20管道运算符的使用与实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧... 目录标准库的管道运算符使用自己实现类似的管道运算符我们不打算介绍太多,因为它实际属于c++20最为重要的

Java中调用数据库存储过程的示例代码

《Java中调用数据库存储过程的示例代码》本文介绍Java通过JDBC调用数据库存储过程的方法,涵盖参数类型、执行步骤及数据库差异,需注意异常处理与资源管理,以优化性能并实现复杂业务逻辑,感兴趣的朋友... 目录一、存储过程概述二、Java调用存储过程的基本javascript步骤三、Java调用存储过程示

ModelMapper基本使用和常见场景示例详解

《ModelMapper基本使用和常见场景示例详解》ModelMapper是Java对象映射库,支持自动映射、自定义规则、集合转换及高级配置(如匹配策略、转换器),可集成SpringBoot,减少样板... 目录1. 添加依赖2. 基本用法示例:简单对象映射3. 自定义映射规则4. 集合映射5. 高级配置匹