学习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"}
]
}
);

赞 (0)

相关推荐

  • 学习ExtJS form布局

    一. Form布局由类Ext.layout.FormLayout定义,名称为form,是一种专门用于管理表单中输入字段的布局,这种布局主要用于在程序中创建表单字段或表单元素等使用. hideLabels:tru表示隐藏标签,默认为false. labelAlign:标签队齐方式left.right.center,默认为left. 复制代码 代码如下: Ext.onReady(function(){ var _panel = new Ext.Panel({ title:"人员信息", r

  • 学习ExtJS Column布局

    一.属性(构造参数) baseCls:"x-plain" Panel背景色颜色. layout:"column" Panel进行列布局. 在子元素中指定使用columnWidth或width来指定子元素所占的列宽度. columnWidth表示使用百分比的形式指定列宽度. width则是使用绝对象素的方式指定列宽度,在实际应用中可以混合使用两种方式. 二.应用举例 复制代码 代码如下: Ext.onReady(function(){ new Ext.Window({

  • 学习ExtJS fit布局使用说明

    一.Fit布局,子元素将自动填满整个父容器(对元素设置宽度无效),如果容器组件中有多个子元素,则只会显示第一个子元素. 二.应用举例 复制代码 代码如下: Ext.onReady(function(){ new Ext.Panel({ renderTo:Ext.getBody(), title:"容器组件", layout:"fit", width:500, height:100, items:[{title:"子元素1",html:"

  • 学习ExtJS accordion布局

    一.Accordion布局由类Ext.layout.Accordion定义,表示可折叠的布局,点击每一个子元素的头部名称或右边的按钮,则会展开该面板,并收缩其它已经展开的面板. layoutConfig:true表示在执行展开折叠时启动动画效果,默认值为false. 二.应用举例 复制代码 代码如下: Ext.onReady(function(){ var _panel = new Ext.Panel({ title:"人员信息", renderTo:Ext.getBody(), fr

  • 学习ExtJS table布局

    一.Table布局由类Ext.layout.TableLayout定义,类以于html中的table,可以对行或列进行合并. layoutConfig使用columns指定父容器分成3列, rowspan合并行数目. colspan合并列数目. 二.应用举例 复制代码 代码如下: Ext.onReady(function(){ var _panel = new Ext.Panel({ title:"人员信息", renderTo:Ext.getBody(), width:500, he

  • 学习ExtJS border布局

    一.Border布局由类Ext.layout.BorderLayout定义,布局名称为border.该布局把容器分成东南西北中五个区域,分别由east,south, west,north, cente来表示,在往容器中添加子元素的时候,我们只需要指定这些子元素所在的位置,Border布局会自动把子元素放到布局指定的位置. 二.应用举例 复制代码 代码如下: Ext.onReady(function(){ new Ext.Viewport({ layout:"border", items

  • 学习ExtJS（一） 之基础前提

    一.学习ExtJS前提 1.Javascript 2.JSON(减肥的XML) 3.Java(C#) 4.Web Services 5.HTML DOM 6.AJAX 二.配置ExtJS运行环境 1.CSS文件:resources\css\ext-all.css 2.底层支持文件:adapter\ext\ext-base.js 3.环境文件:ext-all.js 官方网站地址 http://www.extjs.com

  • BootStrap学习系列之布局组件(下拉,按钮组[toolbar],上拉)

    布局组件 下拉按钮 <div class="dropdown"> <button class="btn dropdown-toggle" id='drop1' data-toggle="dropdown"> 帮助<span class="caret"></span> </button> <ul class="dropdown-menu" ro

  • React特征学习之Form格式示例详解

    React特征学习之Form格式示例详解

    目录 Form 样式 React hook Form 样式 首先来看一个简单Form, 式样如下 import * as React from 'react'; const LoginForm = () => { return ( <form> <div> // Notice: 这里要用htmlFor,相当于id <label htmlFor="email">Email</label> <input id="emai

  • Extjs学习笔记之七 布局

    Extjs Layout Browser . Extjs3.1.0 版本支持17种,下面挑一些重要的简要的说明一下,要看效果,去上面给的链接,不再贴图了.给Panel设置Layout的方法是一样的,就是设置Panel的Layout配置项.1. AbsoluteLayout 可以通过Panel内部组件的决定位置来布局.通过x,y来指定. 示例用法: 复制代码 代码如下: new Ext.Panel({ layout: 'absolute', title: 'AbsuluteLayout', ren

随机推荐