`
fireinjava
  • 浏览: 481327 次
  • 性别: Icon_minigender_1
  • 来自: 福州
社区版块
存档分类
最新评论

Ext.Button 在Ext.form.FormPanel中的定位

    博客分类:
  • Ext
阅读更多

主要原理:
利用{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
分享到:
评论
5 楼 yourgame 2009-07-30  
extjs3.0貌似有 fbar可以利用  这样就好看多了
4 楼 yourgame 2009-07-30  
fireinjava 写道
atian25 写道
没看明白想干嘛?
想填充空格? 用全角空格或者&nbps;

一样的,只是如果按钮前是很长的空格的话用<pre></pre>中间用按TAB键,代码会少点而已

方法不错.值得借鉴.不过把按钮放到这个里面不怎么美观
3 楼 damoqiongqiu 2009-07-09  
也是一种办法,不过FormPanel里面的布局确实不太好弄,如果不想写CSS的话。
2 楼 fireinjava 2009-07-08  
atian25 写道
没看明白想干嘛?
想填充空格? 用全角空格或者&nbps;

一样的,只是如果按钮前是很长的空格的话用<pre></pre>中间用按TAB键,代码会少点而已
1 楼 atian25 2009-07-05  
没看明白想干嘛?
想填充空格? 用全角空格或者&nbps;

相关推荐

    Ext组件描述,各个组件含义

    **2.16 Form Panel (Ext.FormPanel)** - **xtype**: `form` - **功能描述**:Form Panel 是一个包含表单字段的面板。 - **主要用途**:用于创建和管理表单,支持数据验证和提交。 **2.17 Checkbox (Ext.form....

    Ext js Xtype

    - **Form Components**: 用于构建表单的组件,如`Ext.FormPanel`,`Ext.form.Checkbox`,`Ext.form.TextField`等。 - **Chart Components**: 提供了各种图表组件,如`Ext.chart.Chart`,`Ext.chart.BarChart`,`Ext....

    ExtJs_xtype一览

    - `form`:`Ext.FormPanel` 或 `Ext.form.FormPanel`,用于创建表单的容器。 - `checkbox`:`Ext.form.Checkbox`,多选框组件。 - `combo`:`Ext.form.ComboBox`,下拉选择框。 - `datefield`:`Ext.form....

    ExtJs组件类的对应表

    1. **`form`** - `Ext.FormPanel`或`Ext.form.FormPanel`,表单面板组件,用于创建表单并管理其字段。 2. **`checkbox`** - `Ext.form.Checkbox`,多选框组件,用于创建多选输入。 3. **`combo`** - `Ext.form....

    extJs xtype 类型

    1. **`form`:** 表单面板组件,用于创建表单,通过`Ext.FormPanel/Ext.form.FormPanel`类实现。 2. **`checkbox`:** 多选框组件,通过`Ext.form.Checkbox`类实现。 3. **`combo`:** 下拉框组件,用于创建下拉列表...

    老师整理的extjs学习笔记

    formPanel.getForm().submit({ url: '/submit.php', success: function(form, action) { // 成功回调 }, failure: function(form, action) { // 失败回调 } }); ``` #### 七、Ext.data.Store -- ExtJS 的...

    ExtJs xtype一览

    - **`hidden` (Ext.form.Hidden)**: 表单隐藏域组件,用于在表单中包含隐藏的信息。 - **`htmleditor` (Ext.form.HtmlEditor)**: HTML编辑器组件,允许用户编辑HTML内容。 - **`label` (Ext.form.Label)**: 标签组件...

    Extjs实用教程

    - **FormPanel**: `Ext.FormPanel`,表单容器。 - **Checkbox**: `Ext.form.Checkbox`,复选框。 - **ComboBox**: `Ext.form.ComboBox`,下拉选择框。 - **DateField**: `Ext.form.DateField`,日期输入框。 - ...

    ext多文件上传

    formPanel.getForm().submit({ url: 'upload.php', // 服务器端处理文件的URL method: 'POST', enctype: 'multipart/form-data', params: {action: 'upload'}, // 添加额外参数 success: function(form, action...

    extjs控件列表

    **Ext.FormPanel** - **描述**: 表单面板,用于组织和管理表单元素。 - **用途**: 创建复杂的表单,如用户注册、登录表单。 **Ext.form.Checkbox** - **描述**: 多选框,用于选择一个或多个选项。 - **用途**: 问卷...

    Extjs upload(ext官网例子)

    3. **创建Upload Form**:使用`Ext.form.Basic`或`Ext.form.FormPanel`来封装FileField和其他字段。确保表单具有`enctype="multipart/form-data"`属性,这是上传文件所必需的。 4. **定义上传处理函数**:通常,...

    EXT3.0 JSP上传

    首先,我们需要在JSP页面中创建一个EXT3.0的FormPanel。这个表单通常包含一个FileUploadField,用户可以通过它选择要上传的文件。例如: ```html &lt;%@ taglib prefix="ext" uri="http://extjs.com/tags" %&gt; ... ...

    Extjs中文教程2.x

    - **示例**: `formPanel.getForm().findField('username').validateValue('')`。 #### 十七、FormPanel 布局与初始化 **17.1 布局** - **类型**: 包括 `form`, `vbox`, `hbox` 等布局方式。 - **示例**: `layout:...

    Extjs xtype集合

    - **`Class`**: `Ext.FormPanel/Ext.form.FormPanel` - **描述**: 表单面板,用于组织表单字段。 2. **`checkbox`:** - **`xtype`**: `checkbox` - **`Class`**: `Ext.form.Checkbox` - **描述**: 复选框组件...

    ExtJS使用笔记

    对于复杂组件的布局,应尽量避免使用form布局,特别是在form中嵌套其他布局的情况,因为这也可能导致IE6兼容性问题,而应该使用hbox或vbox布局。 通过本笔记的学习,可以掌握ExtJS在前端开发中的应用,理解各个组件...

    extjs中利用htmleditor与第三方打印插件Lodop结合使用WEB打印功能

    var Printreport_panel = new Ext.form.FormPanel({ frame: false, border: false, preventBodyReset: false, height: 400, layout: 'fit', items: [{ border: false, xtype: 'htmleditor', name: 'Conten'...

    Extjs2.x 实现文件上传组件

    if (formPanel.getForm().isValid()) { formPanel.getForm().submit({ url: 'upload.php', // 服务器端处理文件上传的脚本 method: 'POST', success: function(form, action) { Ext.Msg.alert('成功', '文件已...

    ext上传文件例子文章

    在EXTJS中,我们可以使用`Ext.form.field.File`组件来创建这个输入字段,它提供了友好的用户界面,允许用户选择本地文件。 ```javascript var form = Ext.create('Ext.form.Panel', { title: 'File Upload Form', ...

Global site tag (gtag.js) - Google Analytics