主要原理:
利用{html : '<pre> </pre>'}填充空格:
var Text1 = new Ext.form.TextField({
fieldLabel : 'Text1',
name : 'creator',
width : 100
});
var Text2 = new Ext.form.NumberField({
fieldLabel : 'Text2',
name : 'orderId',
width : 100
});
var Text3 = new Ext.form.DateField({
fieldLabel : '到',
name : 'Text3',
width : 100,
value : null,
format : 'Y-m-d'
});
var searchBtn2 = new Ext.Button({
text : '查询2'
});
var resetBtn2 = new Ext.Button({
text : '重置2'
})
var formPanel = new Ext.form.FormPanel({
height : 100,
layout : 'table',
layoutConfig : {
columns : 2
},frame : true,
defaults : {
bodyStyle : 'padding: 0px;',
border : false
},
labelAlign : 'right',
labelWidth : 100,
items : [{
layout : 'form',
items : [Text1]
}, {
layout : 'form',
items : [Text2]
}, {
layout : 'form',
items : [Text3]
}, {
layout : 'table',
items : [{html : '<pre> </pre>'}, searchBtn2, resetBtn2]
}]
});
若按钮紧挨着一个输入框:
{
layout : 'table',
items : [{layout : 'form',items : [txt1]},
{layout : 'form',items : [btn1]}
]
}
- 大小: 2.6 KB
分享到:
相关推荐
**2.16 Form Panel (Ext.FormPanel)** - **xtype**: `form` - **功能描述**:Form Panel 是一个包含表单字段的面板。 - **主要用途**:用于创建和管理表单,支持数据验证和提交。 **2.17 Checkbox (Ext.form....
- **Form Components**: 用于构建表单的组件,如`Ext.FormPanel`,`Ext.form.Checkbox`,`Ext.form.TextField`等。 - **Chart Components**: 提供了各种图表组件,如`Ext.chart.Chart`,`Ext.chart.BarChart`,`Ext....
- `form`:`Ext.FormPanel` 或 `Ext.form.FormPanel`,用于创建表单的容器。 - `checkbox`:`Ext.form.Checkbox`,多选框组件。 - `combo`:`Ext.form.ComboBox`,下拉选择框。 - `datefield`:`Ext.form....
1. **`form`** - `Ext.FormPanel`或`Ext.form.FormPanel`,表单面板组件,用于创建表单并管理其字段。 2. **`checkbox`** - `Ext.form.Checkbox`,多选框组件,用于创建多选输入。 3. **`combo`** - `Ext.form....
1. **`form`:** 表单面板组件,用于创建表单,通过`Ext.FormPanel/Ext.form.FormPanel`类实现。 2. **`checkbox`:** 多选框组件,通过`Ext.form.Checkbox`类实现。 3. **`combo`:** 下拉框组件,用于创建下拉列表...
formPanel.getForm().submit({ url: '/submit.php', success: function(form, action) { // 成功回调 }, failure: function(form, action) { // 失败回调 } }); ``` #### 七、Ext.data.Store -- ExtJS 的...
- **`hidden` (Ext.form.Hidden)**: 表单隐藏域组件,用于在表单中包含隐藏的信息。 - **`htmleditor` (Ext.form.HtmlEditor)**: HTML编辑器组件,允许用户编辑HTML内容。 - **`label` (Ext.form.Label)**: 标签组件...
- **FormPanel**: `Ext.FormPanel`,表单容器。 - **Checkbox**: `Ext.form.Checkbox`,复选框。 - **ComboBox**: `Ext.form.ComboBox`,下拉选择框。 - **DateField**: `Ext.form.DateField`,日期输入框。 - ...
formPanel.getForm().submit({ url: 'upload.php', // 服务器端处理文件的URL method: 'POST', enctype: 'multipart/form-data', params: {action: 'upload'}, // 添加额外参数 success: function(form, action...
**Ext.FormPanel** - **描述**: 表单面板,用于组织和管理表单元素。 - **用途**: 创建复杂的表单,如用户注册、登录表单。 **Ext.form.Checkbox** - **描述**: 多选框,用于选择一个或多个选项。 - **用途**: 问卷...
3. **创建Upload Form**:使用`Ext.form.Basic`或`Ext.form.FormPanel`来封装FileField和其他字段。确保表单具有`enctype="multipart/form-data"`属性,这是上传文件所必需的。 4. **定义上传处理函数**:通常,...
首先,我们需要在JSP页面中创建一个EXT3.0的FormPanel。这个表单通常包含一个FileUploadField,用户可以通过它选择要上传的文件。例如: ```html <%@ taglib prefix="ext" uri="http://extjs.com/tags" %> ... ...
- **示例**: `formPanel.getForm().findField('username').validateValue('')`。 #### 十七、FormPanel 布局与初始化 **17.1 布局** - **类型**: 包括 `form`, `vbox`, `hbox` 等布局方式。 - **示例**: `layout:...
- **`Class`**: `Ext.FormPanel/Ext.form.FormPanel` - **描述**: 表单面板,用于组织表单字段。 2. **`checkbox`:** - **`xtype`**: `checkbox` - **`Class`**: `Ext.form.Checkbox` - **描述**: 复选框组件...
对于复杂组件的布局,应尽量避免使用form布局,特别是在form中嵌套其他布局的情况,因为这也可能导致IE6兼容性问题,而应该使用hbox或vbox布局。 通过本笔记的学习,可以掌握ExtJS在前端开发中的应用,理解各个组件...
var Printreport_panel = new Ext.form.FormPanel({ frame: false, border: false, preventBodyReset: false, height: 400, layout: 'fit', items: [{ border: false, xtype: 'htmleditor', name: 'Conten'...
if (formPanel.getForm().isValid()) { formPanel.getForm().submit({ url: 'upload.php', // 服务器端处理文件上传的脚本 method: 'POST', success: function(form, action) { Ext.Msg.alert('成功', '文件已...
在EXTJS中,我们可以使用`Ext.form.field.File`组件来创建这个输入字段,它提供了友好的用户界面,允许用户选择本地文件。 ```javascript var form = Ext.create('Ext.form.Panel', { title: 'File Upload Form', ...