学习ExtJS form布局
更新时间：2009年10月08日 00:03:52 作者：
ExtJS form布局使用说明，需要的朋友可以参考下。
一、 Form布局由类Ext.layout.FormLayout定义，名称为form，是一种专门用于管理表单中输入字段的布局，这种布局主要用于在程序中创建表单字段或表单元素等使用。
hideLabels：tru表示隐藏标签，默认为false。
labelAlign：标签队齐方式left、right、center,默认为left。
Ext.onReady(function(){
var _panel = new Ext.Panel({
title:"人员信息",
renderTo:Ext.getBody(),
frame:true,
width:500,
height:300,
layout:"form",
hideLabels:false,
labelAlign:"right",
height:120,
defaultType: 'textfield',
items:[
{fieldLabel:"姓名",name:"name"},
{fieldLabel:"请输入地址",name:"address"},
{fieldLabel:"请输入电话",name:"tel"}
]
}
);
二、在实际应用中，Ext.form.FormPanel这个类默认布局使用的是Form布局，因此我们直接使用FormPanel即可。上面的例子可改写成如下的形式：
Ext.onReady(function(){
var _panel = new Ext.FormPanel({
title:"人员信息",
renderTo:Ext.getBody(),
frame:true,
width:500,
height:300,
hideLabels:false,
labelAlign:"right",
height:120,
defaultType: 'textfield',
items:[
{fieldLabel:"姓名",name:"name"},
{fieldLabel:"请输入地址",name:"address"},
{fieldLabel:"请输入电话",name:"tel"}
]
}
);
hideLabels：tru表示隐藏标签，默认为false。
labelAlign：标签队齐方式left、right、center,默认为left。
复制代码 代码如下:
Ext.onReady(function(){
var _panel = new Ext.Panel({
title:"人员信息",
renderTo:Ext.getBody(),
frame:true,
width:500,
height:300,
layout:"form",
hideLabels:false,
labelAlign:"right",
height:120,
defaultType: 'textfield',
items:[
{fieldLabel:"姓名",name:"name"},
{fieldLabel:"请输入地址",name:"address"},
{fieldLabel:"请输入电话",name:"tel"}
]
}
);
二、在实际应用中，Ext.form.FormPanel这个类默认布局使用的是Form布局，因此我们直接使用FormPanel即可。上面的例子可改写成如下的形式：
复制代码 代码如下:
Ext.onReady(function(){
var _panel = new Ext.FormPanel({
title:"人员信息",
renderTo:Ext.getBody(),
frame:true,
width:500,
height:300,
hideLabels:false,
labelAlign:"right",
height:120,
defaultType: 'textfield',
items:[
{fieldLabel:"姓名",name:"name"},
{fieldLabel:"请输入地址",name:"address"},
{fieldLabel:"请输入电话",name:"tel"}
]
}
);
相关文章
extjs 列表框(multiselect)的动态添加列表项的方法
最近公司一个项目,因为要使用div模拟的窗口,因为久闻extjs的大名,因此就想在项目中使用一下.首先下载了multiselect的extjs3.0 demo.看到的代码这里我就不粘贴了.2009-07-07
ExtJS由一系列的类库组成，一旦页面成功加载了ExtJS库后，我们就可以在页面中通过javascript调用ExtJS的类及控件来实现需要的功能。2009-04-04
Extjs学习笔记之一 初识Extjs之MessageBox
去官网下载好extjs的压缩包，解压缩之后得到如下目录结构。2010-01-01
面版表示页面上的一块相对独立的区域，利用传统的html+css要构建灵活统一的区域并非易事。2010-01-01
Extjs 继承Ext.data.Store不起作用原因分析及解决
有关Extjs 继承Ext.data.Store 不起作用的原因有很多种，接下来与大家分享下，本人遇到的，这个Store写出来之后 是不会起到作用的，感兴趣的朋友可以看下详细的原因及解决方法2013-04-04
在Ext的使用过程中，一不留心就出现了乱码，包括在客户端提交给服务器的数据中出现了乱码和服务器端返回给客户端的数据中出现了乱码，下面简单分析一下出现乱码的原因。2009-04-04
Ext.util.Observable有一个重要的功能，可以为某个事件设置拦截器，统一管理方法的处罚。使用capture()和releaseCapture()来实现这个功能。2010-01-01
Extjs组件的定义在网上看到了一个实例，于是拷了下来留着以后用，现在把它晒出来与大家一起分享，感兴趣的各位可不要错过了哈2013-06-06
extjs grid设置某列背景颜色和字体颜色的实现步骤，需要的朋友可以参考下。2010-09-09
本文介绍在桌面程序开发中很常用也很简单的工具栏和菜单，但是在通常的web开发中，要实现好工具栏和菜单并非易事，然而extjs使我们能够用类似桌面程序开发的方法来开发web的工具栏和菜单。2010-01-01
最新评论