<!--<br />
<br />
Code highlighting produced by Actipro CodeHighlighter (freeware)<br />
http://www.CodeHighlighter.com/<br />
<br />
--><%@ page contentType="text/html;charset=UTF-8"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>onReady</title>
<link rel="stylesheet" type="text/css"
href="/ext/resources/css/ext-all.css" />
<script type="text/javascript" src="/ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="/ext/ext-all.js"></script>
<script type="text/javascript">
function myPanel()
{
itemsA = [
{
fieldLabel:"UserName",//文本框标题
name:"user",
id:"user",
},
{
fieldLabel:"PassWord",
inputType:"password",
name:"pass",
id:"pass",
}
];
itemsB = [
{
xtype:'fieldset',
title: '个人信息',
collapsible: true,
autoHeight:true,
width:330,
defaults: {width: 150},
defaultType: 'textfield',
items :[{
fieldLabel: '爱好',
name: 'hobby',
value: 'www.cnblogs.com'
},{
xtype:"combo",
name: 'sex',
store:["男","女","保密"],//数据源为一数组
fieldLabel:"性别",
emptyText:'请选择性别.'
}]
}
];
var form1 = new Ext.form.FormPanel(
{
width:350,
frame:true,//圆角和浅蓝色背景
renderTo:"form1",//呈现
title:"FormPanel",
bodyStyle:"padding:5px 5px 0",
defaults:{width:200,xtype:"textfield"},
items:itemsB,
buttons:[{text:"确定"},{text:"取消",handler:function(){alert("事件！");}}]
});
}
Ext.onReady(myPanel);
</script>
</head>
<body>
<div id="form1"></div>
</body>
</html>
分享到：
相关推荐
1. `form`：`Ext.FormPanel`是EXT JS中的表单面板，它是一个容器，可以容纳各种表单字段和其他组件。表单面板允许你定义布局、提交行为以及处理表单数据的方法。 2. `checkbox`：`Ext.form.Checkbox`是用于创建复选...
根据给定的信息，本文将详细解释“Ext 添加功能form表单实例”的知识点，这主要针对Ext初学者。本文会从创建表单、字段定义、验证规则以及提交逻辑等方面进行深入探讨。 ### Ext 添加功能form表单实例 #### 表单...
**2.16 Form Panel (Ext.FormPanel)** - **xtype**: `form` - **功能描述**：Form Panel 是一个包含表单字段的面板。 - **主要用途**：用于创建和管理表单，支持数据验证和提交。 **2.17 Checkbox (Ext.form....
在Ext JS中，`Ext.form_load`涉及到的主要知识点是FormPanel的数据加载机制，这包括了对FormPanel的form对象、BasicForm、doAction方法、Ext.form.Action对象以及JsonReader的使用。以下是对这些概念的详细解释： 1...
- `form`：`Ext.FormPanel` 或 `Ext.form.FormPanel`，用于创建表单的容器。 - `checkbox`：`Ext.form.Checkbox`，多选框组件。 - `combo`：`Ext.form.ComboBox`，下拉选择框。 - `datefield`：`Ext.form....
(1)Ext.FormPanel f.getForm().submit({ url:”……”, params:{ XX:xx …..} success: function (c,v,e) { //e: 触发事件 var json=Ext.decode(v.response.responseText); }, failure:function(c,v,e){} }) (2)Ext....
首先，Ext.FormPanel是ExtJS中用于创建表单的主要组件，它允许我们构建复杂的表单布局并处理用户输入的数据。 1. **Checkbox简单示例** Checkbox在ExtJS中用于创建复选框，可以用来让用户选择多个选项。在示例中，...
**Ext.FormPanel** - **描述**: 表单面板，用于组织和管理表单元素。 - **用途**: 创建复杂的表单，如用户注册、登录表单。 **Ext.form.Checkbox** - **描述**: 多选框，用于选择一个或多个选项。 - **用途**: 问卷...
- **FormPanel**: `Ext.FormPanel`，表单容器。 - **Checkbox**: `Ext.form.Checkbox`，复选框。 - **ComboBox**: `Ext.form.ComboBox`，下拉选择框。 - **DateField**: `Ext.form.DateField`，日期输入框。 - ...
var form = new Ext.form.FormPanel({ title: ' 用户登录 ', frame: true, items: [textfield], renderTo: document.body }); ``` 方法二是直接在FormPanel配置中定义items，像这样： ```javascript var form ...
Ext Form 是 Ext JS 库中的一个关键组件，用于创建丰富的、交互式的网页表单。它在Web应用程序中扮演着至关重要的角色，允许用户输入、编辑和提交数据。本示例旨在展示如何使用 Ext Form 来构建基本的表单结构以及与...
【EXTJS】Ext.AJAX与FormPanel在登录案例中的应用 EXTJS是一个强大的JavaScript库，主要用于构建富客户端Web应用程序。在EXTJS中，Ext.AJAX和Ext.FormPanel是两个核心组件，它们分别用于异步与服务器进行数据交互和...
- **`Class`**: `Ext.FormPanel/Ext.form.FormPanel` - **描述**: 表单面板，用于组织表单字段。 2. **`checkbox`:** - **`xtype`**: `checkbox` - **`Class`**: `Ext.form.Checkbox` - **描述**: 复选框组件...
1. **`form`** - `Ext.FormPanel`或`Ext.form.FormPanel`，表单面板组件，用于创建表单并管理其字段。 2. **`checkbox`** - `Ext.form.Checkbox`，多选框组件，用于创建多选输入。 3. **`combo`** - `Ext.form....
- **创建表单组件**：首先，定义一个FormPanel，并在其内部添加所需的表单字段，例如`Ext.form.field.Text`、`Ext.form.field.Date`等。 - **配置表单行为**：为FormPanel设置action属性，指定提交的URL，或者在...
- **Form Components**: 用于构建表单的组件，如`Ext.FormPanel`，`Ext.form.Checkbox`，`Ext.form.TextField`等。 - **Chart Components**: 提供了各种图表组件，如`Ext.chart.Chart`，`Ext.chart.BarChart`，`Ext....
在EXT JS这个强大的JavaScript框架中，FormPanel是用于创建表单的重要组件，它允许开发者构建交互式的、数据驱动的Web应用程序。FormPanel不仅提供了一种布局管理方式，还支持各种表单元素，如文本框、复选框、下拉...
3. **定义列模型（ColumnModel）**： 在GridPanel中，你需要定义列模型来展示数据。对于日期列，你可以使用`renderer`来指定一个日期格式化函数。例如： ```javascript var cm = new Ext.grid.ColumnModel({ ...