`
- 浏览:
165892 次
- 性别:
- 来自:
成都
-
看看强大的FormPanel,也是继承panel组件的使用。
首先弄清楚这个问题，创建的时候： //查看源代码便知，两种方法是一样的
Ext.form.FormPanel = Ext.FormPanel;我们还是从最简单的代码实例开始吧：
<!--html代码-->
<body>
<div id="form1"></div>
</body>
//js代码
var form1 = new Ext.form.FormPanel({
width:350,
frame:true,//圆角和浅蓝色背景
renderTo:"form1",//呈现
title:"FormPanel",
bodyStyle:"padding:5px 5px 0",
items:[
{
fieldLabel:"UserName",//文本框标题
xtype:"textfield",//表单文本框
name:"user",
id:"user",
width:200
},
{
fieldLabel:"PassWord",
xtype:"textfield",
name:"pass",
id:"pass",
width:200
}
],
buttons:[{text:"确定"},{text:"取消",handler:function(){alert("事件！");}}]
});
都是通过items属性参数把表单元素添加到这个表单中。
我们发现两个文本框的类型和狂度是一样的，我们还可以把items里面的相同项提取出来，以简化代码：
//简化代码，和上面的代码效果一样
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:[
{
fieldLabel:"UserName",
//xtype:"textfield",
name:"user",
id:"user",
//width:200
},
{
fieldLabel:"PassWord",
//xtype:"textfield",
name:"pass",
id:"pass",
inputType:"password",
//width:200
}
],
buttons:[{text:"确定"},{text:"取消",handler:function(){alert();}}]
});关于inputType,参数如下：
//input的各种类型（这个大家都知道，就只列了几个典型的）
radio
check
text(默认)
file
password等等关于FormPanel的配置参数，请主要参考panel的参数，这里列举另外两个：
1.labelAlign:fieldlabel的排列位置，默认为"left"，其他两个枚举值是"center","right"
2.labelWidth:fieldlabel的占位宽
3.method:"get"或"post"
4.url："提交的地址"
5.submit:提交函数 //稍后我们一起详细分析因为内容太多，我们先看一个例子。
1.FormPanel的fieldset应用
//把前面代码重写items属性
items:[
{
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:'请选择性别.'
}]
}
]
这里的combox组件只是简单的演示，具体还是要深入了解，我们会在以后的内容中详细探讨。
2.关于xtype的类型，在extjs的form表单（其他的请参考api）中已经定义的有：
Form components
---------------------------------------
form Ext.FormPanel
checkbox Ext.form.Checkbox
combo Ext.form.ComboBox
datefield Ext.form.DateField
field Ext.form.Field
fieldset Ext.form.FieldSet
hidden Ext.form.Hidden
htmleditor Ext.form.HtmlEditor
label Ext.form.Label
numberfield Ext.form.NumberField
radio Ext.form.Radio
textarea Ext.form.TextArea
textfield Ext.form.TextField
timefield Ext.form.TimeField
trigger Ext.form.TriggerField
分享到：
相关推荐
在EXTJS框架中，`Ext.FormPanel`和`Ext.Ajax.request`提供了两种不同的异步提交方法，它们各自有其特点和适用场景。下面我们将详细探讨这两种方式的区别。 1. **Ext.FormPanel的异步提交** `Ext.FormPanel` 是...
首先，Ext.FormPanel是ExtJS中用于创建表单的主要组件，它允许我们构建复杂的表单布局并处理用户输入的数据。 1. **Checkbox简单示例** Checkbox在ExtJS中用于创建复选框，可以用来让用户选择多个选项。在示例中，...
1. `form`：`Ext.FormPanel`是EXT JS中的表单面板，它是一个容器，可以容纳各种表单字段和其他组件。表单面板允许你定义布局、提交行为以及处理表单数据的方法。 2. `checkbox`：`Ext.form.Checkbox`是用于创建复选...
在这个例子中，通过`new Ext.FormPanel`来创建了一个表单面板，并设置了一些关键属性： - `frame`: 设置为`true`，表示表单周围有一个边框。 - `width` 和 `height`: 分别设置了表单的宽度和高度。 - `layout`: ...
【EXTJS】Ext.AJAX与FormPanel在登录案例中的应用 EXTJS是一个强大的JavaScript库，主要用于构建富客户端Web应用程序。在EXTJS中，Ext.AJAX和Ext.FormPanel是两个核心组件，它们分别用于异步与服务器进行数据交互和...
**2.16 Form Panel (Ext.FormPanel)** - **xtype**: `form` - **功能描述**：Form Panel 是一个包含表单字段的面板。 - **主要用途**：用于创建和管理表单，支持数据验证和提交。 **2.17 Checkbox (Ext.form....
Ext.FormPanel是EXTJS中用于创建表单的组件，可以方便地进行动态编辑和验证。前端代码定义了FormPanel，并在用户提交表单时，利用Ext.AJAX发送请求。与HTML form表单不同，Ext.FormPanel提供了更高级的表单管理功能...
var store = Ext.create('Ext.data.Store', { model: 'Employee', proxy: { type: 'ajax', url: '/api/employees', reader: { type: 'json', rootProperty: 'data' } }, autoLoad: true }); ``` 3. **...
- `form`：`Ext.FormPanel` 或 `Ext.form.FormPanel`，用于创建表单的容器。 - `checkbox`：`Ext.form.Checkbox`，多选框组件。 - `combo`：`Ext.form.ComboBox`，下拉选择框。 - `datefield`：`Ext.form....
接下来将详细介绍文档中提到的几个核心概念，包括`Ext.MessageBox`、`Ext.Panel`、`Ext.Window`、`Ext.FormPanel`、`Ext.TabPanel`、`Ext.XTemplate`和`Ext.TreePanel`以及如何在Extjs中实现主题（换肤）功能。...
- **Form Components**: 用于构建表单的组件，如`Ext.FormPanel`，`Ext.form.Checkbox`，`Ext.form.TextField`等。 - **Chart Components**: 提供了各种图表组件，如`Ext.chart.Chart`，`Ext.chart.BarChart`，`Ext....
Form组件，即`Ext.form.FormPanel`，用于创建和管理表单数据。它可以包含各种输入控件，如文本字段、复选框、下拉列表等。表单数据可以方便地提交到服务器，或者与数据存储进行双向绑定。下面是一个创建简单表单的...
this.formpanel = new Ext.FormPanel({ items: [{ fieldLabel: ‘代码’, name: ‘FCode’, anchor:’100%’, id: ‘fid’ },{ fieldLabel: ‘名称’, name: ‘FName’, anchor:’100%’ // anchor width by ...
var formPanel = Ext.create('Ext.container.Container', { layout: 'fit', items: [treeCombo] }); Ext.create('Ext.container.Viewport', { layout: 'fit', items: [formPanel] }); } }); ``` 在给定的...
var form = new Ext.form.FormPanel({ title: ' 用户登录 ', frame: true, items: [textfield], renderTo: document.body }); ``` 方法二是直接在FormPanel配置中定义items，像这样： ```javascript var form ...
在 Ext.js 中，可以使用 FormPanel 的 validate 事件来实现用户名验证机制。在 FormPanel 中，可以使用 validator 函数来检测用户输入的用户名是否已经存在于数据库中。 在上面的代码中，我们可以看到使用了 Ext....
为了创建一个UploadDialog，你可以使用`Ext.window.Window`或`Ext.container.Viewport`来创建一个弹出窗口，里面包含一个`Ext.form.FormPanel`，并在其中添加`FileField`。当用户选择文件并点击提交按钮时，ExtJS会...
formPanel.getForm().submit({ url: '/submit.php', success: function(form, action) { // 成功回调 }, failure: function(form, action) { // 失败回调 } }); ``` #### 七、Ext.data.Store -- ExtJS 的...