ExtJs学习笔记之FormPanel组件
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组件的更多相关文章
- ExtJs学习笔记之ComboBox组件
ComboBox组件 (1)ComboBox控件支持自动完成.远程加载.和许多其他特性. (2)ComboBox就像是传统的HTML文本 <input> 域和 <select> ...
- ExtJs学习笔记之Button组件
按钮Button组件 可以使用该组件的创建简单的按钮. 可以自定义属性包括 aligned icons, dropdown menus, tooltips 和 sizing options. 当出发点 ...
- ExtJs学习笔记之Window组件
Window窗体组件 window是一个指定的打算作为一个应用程序窗口的面板,默认窗口是浮动的,resizable, 并且draggable,默认的,窗体靠document.body呈现. 1.示例: ...
- 【React】react学习笔记02-面向组件编程
react学习笔记02-面向组件编程 面向组件编程,直白来说,就是定义组件,使用组件. 以下内容则简单介绍下组建的声明与使用,直接复制demo观测结果即可. 步骤: 1.定义组件 a.轻量组件-函 ...
- Extjs 学习笔记1
学习笔记 目 录 1 ExtJs 4 1.1 常见错误处理 4 1.1.1 多个js文件中有相同的控件,切换时无法正常显示 4 1.1.2 Store的使用方法 4 1.1.3 gridPanel ...
- ExtJs学习笔记之学习小结LoginDemo
ExtJs学习小结LoginDemo 1.示例:(登录界面) <!DOCTYPE html> <html> <head> <meta charset=&quo ...
- Java学习笔记--Swing用户界面组件
很多与AWT类似. 事件处理参考:Java学习笔记--AWT事件处理 1.设计模式: 模型:存储内容视图:显示内容控制器:处理用户输入· 2. 文本输入常用组件 2.1 文本域: JLabel lab ...
- Netty学习笔记(二)——netty组件及其用法
1.Netty是 一个异步事件驱动的网络应用程序框架,用于快速开发可维护的高性能协议服务器和客户端. 原生NIO存在的问题 1) NIO的类库和API繁杂,使用麻烦:需要熟练掌握Selector.Se ...
- extjs 学习笔记（二）
EXTJS实用开发指南 1. 要使用ExtJS 框架的页面中一般包括下面几句: <link rel="stylesheet" type="text/css" ...
随机推荐
- JS回车键处理
HTML <input type="text" id="keyword" name="keyword" autocomplete=&q ...
- WCF之多个终结点
1.服务端配置如下(一个Service节点下可有多个endpoint,): <system.serviceModel> <services> <service name= ...
- 【转】ChainMapper 实例理解二
package com.oncedq.code; import java.io.DataInput; import java.io.DataOutput; import java.io.IOExcep ...
- Spring mvc源码url路由-我们到底能走多远系列(38)
我们到底能走多远系列38 扯淡: 马航的事,挺震惊的.还是多多珍惜身边的人吧. 主题: Spring mvc 作为表现层的框架,整个流程是比较好理解的,毕竟我们做web开发的,最早也经常接触的就是一个 ...
- The Hidden Pitfalls of AsyncTask
http://logc.at/2011/11/08/the-hidden-pitfalls-of-asynctask/
- sdust 2410 Mine Number
今天看了3个这种题了 枚举第一行即可 #include<cstdio> #include<cstring> #include<iostream> #include ...
- db2 字符串转换 数字
今天使用聚合函数的时候 发现 varchar类型的是不可用的,所以呢就开始想办法解决 用到了转换函数cast(s.score as bigint) 然后有一个问题就是如果数据为空的话就会发生转换错误. ...
- 放课后的约定 by：S_H_Y
题目背景 十年.十年前.天空的蔚蓝,云彩的舒软.我,怎么会认识你.洁白的,洁白的,十年前.我无法忘却.终究是小时候的约定.记忆被困在冻土里,有时我不认识那天的我.难道一切,都锁在心里面了吗? 题目描述 ...
- codevs3872 邮递员送信（SPFA）
邮递员送信 时间限制: 1 Sec 内存限制: 64 MB提交: 10 解决: 5[提交][状态][讨论版] 题目描述 有一个邮递员要送东西,邮局在节点1.他总共要送N-1样东西,其目的地分别是2 ...
- JS版百度地图API
地图的构建非常简单,官方的API文档也写得很清晰,我只做一总结: 一起jquery,17jquery 一.引入JS :这个很容易理解,既然是调用JS版的百度地图,肯定得引用外部的JS文件了,而这个文件 ...