FormPanel组件

　　FormPanel 为 form 表单提供了一个标准的容器. 本质上还是一个标准的 Ext.panel.Panel, 只是自动创建了一个 BasicForm 来管理所有添加到 Panel中的Ext.form.field.Field 对象. 可以快捷方便地进行 配置以及处理 BasicForm 和 表单域.

1、示例：

　　在window窗体中添加一个FormPanel组件

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

<link rel="stylesheet" type="text/css" href="../ext-js-4.2.1/resources/css/ext-all.css" />

<script type="text/javascript" src="../ext-js-4.2.1/ext-all.js"></script>

<script type="text/javascript" src="../ext-js-4.2.1/locale/ext-lang-zh_CN.js"></script>

<script type="text/javascript">

    Ext.onReady(function() {

        var form = new Ext.form.FormPanel({

            frame : true,

            title : '表单标题',

            style : 'margin:10px',

//             draggable : true,        //可拖拽

            html : '<div style ="padding:10px">这里是表单内容</div>'

        });

        var win = new Ext.Window({

            title : '窗体window',

            width : 500,

            height : 200,

            draggable : true,

            html : '<div>这里是窗体的内容</div>',

            resizable : true,

            modal : true,

            closable : true,

            maximizable : true,

            minimizable : true,

            items : form

        });

        win.show();

        });

</script>

</head>

<body>

    <!--

     说明：

     (1)var form = new Ext.form.FormPanel({}):创建一个新的form表单对象。

     (2)title: '表单标题'：表单的标题，如果不加的话，不会出现上面的浅色表单标题栏。

     (3)style: 'margin:10px':表单的样式，加了个外10px的外边距。

     (4)html: '<div style="padding:10px">这里表单内容</div>'：表单内显示html的内容。

     (5)frame:true：true 为 Panel 填充画面,默认为false.

 -->

</body>

</html>

2：效果图：

3：常用属性及方法：

（1）属性：

　　width:整型，表单宽度。

　　height:整型，表单高度。

　　url:字符串，表单提交地址。

　　frame:true 为 Panel 填充画面,默认为false。

（2）方法：

　　reset:表单重置。

　　isValid:表单是否验证全部通过。

　　submit:表单提交

ExtJs学习笔记之FormPanel组件的更多相关文章

  1. ExtJs学习笔记之ComboBox组件

    ComboBox组件 (1)ComboBox控件支持自动完成.远程加载.和许多其他特性. (2)ComboBox就像是传统的HTML文本 <input> 域和 <select> ...

  2. ExtJs学习笔记之Button组件

    按钮Button组件 可以使用该组件的创建简单的按钮. 可以自定义属性包括 aligned icons, dropdown menus, tooltips 和 sizing options. 当出发点 ...

  3. ExtJs学习笔记之Window组件

    Window窗体组件 window是一个指定的打算作为一个应用程序窗口的面板,默认窗口是浮动的,resizable, 并且draggable,默认的,窗体靠document.body呈现. 1.示例: ...

  4. 【React】react学习笔记02-面向组件编程

    react学习笔记02-面向组件编程 面向组件编程,直白来说,就是定义组件,使用组件. 以下内容则简单介绍下组建的声明与使用,直接复制demo观测结果即可. 步骤: 1.定义组件   a.轻量组件-函 ...

  5. Extjs 学习笔记1

    学习笔记 目   录 1 ExtJs 4 1.1 常见错误处理 4 1.1.1 多个js文件中有相同的控件,切换时无法正常显示 4 1.1.2 Store的使用方法 4 1.1.3 gridPanel ...

  6. ExtJs学习笔记之学习小结LoginDemo

    ExtJs学习小结LoginDemo 1.示例:(登录界面) <!DOCTYPE html> <html> <head> <meta charset=&quo ...

  7. Java学习笔记--Swing用户界面组件

    很多与AWT类似. 事件处理参考:Java学习笔记--AWT事件处理 1.设计模式: 模型:存储内容视图:显示内容控制器:处理用户输入· 2. 文本输入常用组件 2.1 文本域: JLabel lab ...

  8. Netty学习笔记(二)——netty组件及其用法

    1.Netty是 一个异步事件驱动的网络应用程序框架,用于快速开发可维护的高性能协议服务器和客户端. 原生NIO存在的问题 1) NIO的类库和API繁杂,使用麻烦:需要熟练掌握Selector.Se ...

  9. extjs 学习笔记（二）

    EXTJS实用开发指南 1. 要使用ExtJS 框架的页面中一般包括下面几句: <link rel="stylesheet" type="text/css" ...

随机推荐

  1. Android Glide加载图片时转换为圆形、圆角、毛玻璃等图片效果

     Android Glide加载图片时转换为圆形.圆角.毛玻璃等图片效果 附录1简单介绍了Android开源的图片加载框架.在实际的开发中,虽然Glide解决了快速加载图片的问题,但还有一个问题悬 ...

  2. arcgis显示其他国家语言

    接手一个韩国的项目,需要在arcmap中配置一个韩国地图并发布到arcserver中进行切图,给的韩国地图的shapefile文件中属性字段都是韩文的,在中文的系统中,arcMap中显示的韩文都是乱码 ...

  3. Magento给新产品页面添加分页

    本文介绍如何让magento创建一个带分页功能的新到产品页面,方便我们在首页或者其它CMS Page调用和展示新到产品. 在Magento我们经常有的做法是建立一个可以调用新产品的block,然后通过 ...

  4. Magento速度优化

    一.Magento Compiler可以提高 25% 到 50% 速度 Magento的性能一直是大家比较关心的焦点,现在Magento最新的版本 1.3.2.2 增加了 Magento Compil ...

  5. Day04_JAVA语言基础第四天

    1.循环(掌握) 1.什么时候使用(理解) 如果我们发现有很多重复内容的时候就要使用循环 2.好处(理解) 让我们的代码看起来更精炼了 3.循环的组成(理解) 1 初始化条件:一般定义的是一个初始变量 ...

  6. 相对URL拼接为绝对URL的过程

    URL有两种方式:绝对的和相对的. 绝对URL中包含有访问资源的所需的全部信息 举一个例子: <HTML> <HEAD><TITLE>Joe's Tools< ...

  7. Linux下使用fdisk发现磁盘空间和使用mount挂载文件系统

    若在安装Linux系统时没有想好怎么使用服务器,开始时只分了一部分给根目录.后面需要再使用时,可以通过几下一步进行分区和挂载文件系统. 看磁柱数使用情况 fdisk -l Disk /dev/sda: ...

  8. UVa 10900 - So you want to be a 2n-aire?

    题目大意: 一个答题赢奖金的问题,玩家初始的金额为1,给出n,表示有n道题目,t表示说答对一道题目的概率在t到1之间,每次面对一道题,可以选择结束游戏,获得当前奖金:回答下一道问题,答对的概率p在t到 ...

  9. 83. Remove Duplicates from Sorted List

    Given a sorted linked list, delete all duplicates such that each element appear only once. For examp ...

  10. SpringMVC使用@ResponseBody时返回json的日期格式、@DatetimeFormat使用注意

    一.SpringMVC使用@ResponseBody时返回json的日期格式 前提了解: @ResponseBody 返回json字符串的核心类是org.springframework.http.co ...