无废话ExtJs 教程四[表单：FormPanel]
继上一节内容，我们在窗体里加了个表单。如下所示代码区items:form。
1. index.jsp代码如下：
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>My JSP 'index.jsp' starting page</title>
<!--ExtJs框架开始-->
<script type="text/javascript" src="Ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="Ext/ext-all.js"></script>
<link rel="stylesheet" type="text/css" href="Ext/resources/css/ext-all.css" />
<!--ExtJs框架结束-->
<!--
<script type="text/javascript" src="study/helloWorld.js"></script>
<script type="text/javascript" src='study/window.js'></script>
-->
<!--调用/study/formPanel.js 实现表单 -->
<script type="text/javascript" src='study/formPanel.js'></script>
</head>
<body>
<!-- <input id='hello' type='button' value='click'> -->
<div id="hello"> </div>
<br>
</body>
</html>2. formPanel.js
Ext.onReady(function(){
var form = new Ext.FormPanel({
frame:true,
style:'margin:15px',
title:'FormPanel',
html:'This is the formPanel part..'
});
new Ext.Window({
html:'This is the windows part...',
items:form,
width:477,
height:177,
minimizable:true,
maximizable:true,
closeable:true
}).show();
});同时也可以如下：
Ext.onReady(function(){
new Ext.Window({
html:'This is the windows part...',
width:477,
height:177,
minimizable:true,
maximizable:true,
closeable:true,
items:[new Ext.FormPanel({
frame:true,
style:'margin:25px',
title:'FormPanel',
html:'This is the formPanel part..'
})]
}).show();
});说明1：
(1)var form = new Ext.form.FormPanel({}):创建一个新的form表单对象。
(2)title: '表单标题'：表单的标题，如果不加的话，不会出现上面的浅色表单标题栏。
(3)style: 'margin:10px':表单的样式，加了个外10px的外边距。
(4)html: '<div style="padding:10px">这里表单内容</div>'：表单内显示html的内容。
说明2
form 组件常用的：属性、方法及事件
一、属性
width:整型，表单宽度。
height:整型，表单高度。
url:字符串，表单提交地址。
二、方法
reset:表单重置。
isValid:表单是否验证全部通过。
submit:表单提交。
3. 效果如下：
![无废话ExtJs 教程四[表单：FormPanel]](https://cdn.ancii.com/article/image/v1/xu/R7/E9/9ERu7xJyTqCFW_cllJux0Mp_80uPLRnGBDUptGwNa0OfjT38WFiiFfP6ygrmaVHUFXSi4ExmZ-jSUEqWXLsgr933KCvDT1-2bWlEFHXPaL9Edjb9Re9KZbTBMheHfPhc.png "无废话ExtJs 教程四[表单：FormPanel]")
相关推荐
lupeng 2020-11-14
sjcheck 2020-11-10
sjcheck 2020-11-03
meylovezn 2020-08-28
owhile 2020-08-18
Francismingren 2020-08-17
pythonclass 2020-07-29
sunzhihaofuture 2020-07-19
爱读书的旅行者 2020-07-07
行吟阁 2020-07-05
tianqi 2020-07-05
行吟阁 2020-07-04
冰蝶 2020-07-04
lyg0 2020-07-04
owhile 2020-07-04
opspider 2020-06-28
lengyu0 2020-06-28
tianqi 2020-06-21
dadaooxx 2020-06-16