无废话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">&nbsp;</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]

无废话ExtJs 教程四[表单：FormPanel]

相关推荐