继上一节内容，我们在窗体里加了个表单。如下所示代码区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系列教程十八[继承：Extend]"中，我们主要关注的是ExtJS中的类继承机制，这是一个核心特性，它允许开发者创建可复用和可扩展的组件结构。在JavaScript中，继承是通过原型链实现的，而在ExtJS中，它被...
在"动态添加表单"这个主题中，我们将深入探讨如何在ExtJS中实现表单的动态创建和管理。 首先，我们要理解表单（Form）在ExtJS中的基本概念。表单是数据输入和验证的核心组件，可以包含各种字段类型，如文本框、下拉...
在"无废话ExtJS 系统教程十四[列表：GridPanel]"中，我们将会深入探讨如何有效地使用GridPanel来创建高效的、功能丰富的数据列表。 GridPanel是ExtJS中的核心组件之一，它允许用户以表格形式展示大量数据，并支持...
本教程将深入探讨ExtJS中的Combobox组件，包括其基本用法、配置选项、事件处理和自定义功能。 1. **Combobox的基本结构** - Combobox由两个主要部分组成：文本输入框和下拉列表。用户可以在输入框中键入文字，或者...
FormPanel 是 ExtJS 中的一个核心组件，用于创建和处理表单元素，包括输入字段、按钮、选择框等。它提供了丰富的功能，如数据验证、远程提交、异步加载等，是构建用户交互界面的关键部分。 在ExtJS中，FormPanel是...
标题中的“无废话ExtJs 教程十二[员工信息表Demo：AddUser]”表明这是一个关于ExtJs的实战教程，具体是实现一个员工信息表的添加用户（AddUser）功能。ExtJs是一款强大的JavaScript库，主要用于构建桌面级的Web应用...
《无废话ExtJs系列教程十五：树：TreePanel》 ExtJs是一个强大的JavaScript库，用于构建富客户端Web应用。在本教程中，我们将深入探讨一个重要的组件——TreePanel，它是ExtJs用来展示层次结构数据的工具，常用于...
ExtJs 4.0 提供了多种类型的表单字段，如文本输入框、密码框、选择框等，以及表单容器，如Panel、FormPanel。这些组件允许开发者创建复杂且功能完备的表单。表单字段可以通过配置项定义，包括字段类型、验证规则、...
NULL 博文链接：https://huiqinbo.iteye.com/blog/2217105
本文将深入探讨如何在ExtJs中使用`FormPanel`组件结合`form`和`column`布局属性来实现横向布局，即在一个表单中元素能够按照列分布，形成一种更为直观和用户友好的界面设计。 ### 一、理解`FormPanel`及其属性 `...
总之，"无废话ExtJs 系统教程十九[动态复选框：RemoteCheckboxGroup]"是一个帮助开发者掌握如何在ExtJS应用中实现动态复选框组件的资源。通过学习和实践，你可以创建出更加灵活和高效的用户界面，同时利用源码和工具...
extjs教程,extjs教程,extjs教程,extjs教程,extjs教程,extjs教程,extjs教程,extjs教程,extjs教程,extjs教程
ExtJS的表单使用FormPanel容器 表单使用的布局方式：form和formtable布局 ExtJS的表单和html的form标签是相似的，新建一个FormPanel实际上就是新建一个html的form标签，只是添加许多Ext的样式而已
ExtJS教程全面介绍了ExtJS框架的基本功能和高级特性，适用于有Web开发经验的开发者，尤其是希望快速构建丰富用户界面的人员。ExtJS是一个基于JavaScript的开源前端框架，它提供了丰富的用户界面组件和数据处理机制，...
Extjs教程源码 介： ***************第一部分基础知识**************** 第一讲: EXTJS4.0概述和HelloWorld程序 第二讲: EXTJS4.0的新特性 第三讲: EXTJS4.0数据模型——Model 第四讲: EXTJS4.0的数据代理——Proxy ...
在本篇文章中，我们将深入探讨如何使用Extjs4中的FormPanel组件从后台加载JSON数据，并将其映射到表单的各个字段中进行显示。这是一项非常实用的技术，尤其是在需要动态填充表单的情况下。 ### 一、Extjs4 ...
在ExtJS中，表单面板（FormPanel）是创建表单的基础。FormPanel继承自Panel组件，因此它具有Panel的所有属性。创建一个简单的表单面板可以通过以下代码实现： ```javascript var myFormPanel = new Ext.form....