学习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"}
]
}
);
相关文章
其实这一个总是很容易解决，只要在Ext.onReady()方法之前（或者方法的第一句）加上下面这一句代码就解决了！2010-12-12
昨天刚接触到Extjs，简单写了篇学习笔记，今天继续。2008-12-12
ExtJS4终于出了正式版，体验一下面官方推荐的向对象编程最佳实践 过去的做法是new对象或者Ext.create一个对象，每个对象都要先实例化才能使用2011-05-05
Ext.util.Observable有一个重要的功能，可以为某个事件设置拦截器，统一管理方法的处罚。使用capture()和releaseCapture()来实现这个功能。2010-01-01
ExtJs 3.1 XmlTreeLoader Example Error
ExtJs 3.1的XmlTreeLoader例子折腾了我近一个下午加晚上，官方的例子没有问题，可以加载xml的数据，本地IIS死活不行2010-02-02
ExtJS accordion布局使用说明，需要的朋友可以参考下。2009-10-10
学习ExtJS前提条件，大家要想学习，需要一些基础知识。2009-10-10
Extjs中ComboBoxTree实现的下拉框树效果(自写)
最近涉及到的一个项目中，需要实现ComboBoxTree的效果，由于在Extjs中是没有这种效果，所以看看别人的资料自己写了一个，感兴趣的朋友可以参考下哈2013-05-05
ExtJS 中Window的窗口最大化只需将maximizable属性设置为true即可，点击最大化按钮就可以将窗体最大化，最小化的操作类似将minimizable设置为true，即可以看到窗体的最小化按钮，但是点击此按钮并不会出发任何操作，Ext没有为窗口预设最小化的任何操作，需要自己自定义最小化功能。2009-11-11
Extjs4.0 ComboBox如何实现三级联动，许多网友都很好奇这个问题，明确的一点是在extjs4.0中要使用load来获取数据，到底如何实现，下面小编为大家分享具体步骤2016-05-05
最新评论