关于extjs表单布局的几种方式
一、用column布局
layout:'column',
defaults:{
style:'float:left;margin:4px;',
columnWidth: 0.49,
msgTarget: 'side'
}, defaultType:'textfield',
fieldDefaults:{
labelAlign:'right',
labelWidth:
}, items:[
{
allowBlank: false,
fieldLabel: '上级编码',
name: 'parentOrganizationCode',
},
{
fieldLabel: '状态',
name: 'enable',
},
{
allowBlank: false,
fieldLabel: '组织架构编码',
name: 'organizationCode'
},
{
allowBlank: false,
fieldLabel: '组织架构名称',
name: 'organizationName',
},
{
fieldLabel: '联系人',
name: 'contactName',
},
{
fieldLabel: '联系方式',
name: 'contactPhone',
},
{
fieldLabel: '地址',
name: 'contactAddress',
columnWidth: 0.98
},
{
fieldLabel: '备注',
name: 'note',
columnWidth: 0.98
}
]
二、anchor套hbox布局
items: [{
xtype: 'fieldset',
title: 'Your Contact Information',
defaultType: 'textfield',
layout: 'anchor',
defaults: {
anchor: '100%'
},
items: [{
xtype: 'fieldcontainer',
fieldLabel: 'Name',
layout: 'hbox',
combineErrors: true,
defaultType: 'textfield',
defaults: {
hideLabel: 'true'
},
items: [{
name: 'firstName',
fieldLabel: 'First Name',
flex: 2,
emptyText: 'First',
allowBlank: false
}, {
name: 'lastName',
fieldLabel: 'Last Name',
flex: 3,
margin: '0 0 0 6',
emptyText: 'Last',
allowBlank: false
}]
}, {
xtype: 'container',
layout: 'hbox',
defaultType: 'textfield',
margin: '0 0 5 0',
items: [{
fieldLabel: 'Email Address',
name: 'email',
vtype: 'email',
flex: 1,
allowBlank: false
}, {
fieldLabel: 'Phone Number',
labelWidth: 100,
name: 'phone',
width: 200,
emptyText: 'xxx-xxx-xxxx',
maskRe: /[\d\-]/,
regex: /^\d{3}-\d{3}-\d{4}$/,
regexText: 'Must be in the format xxx-xxx-xxxx'
}]
}]
}
三、column套form布局
layout: 'column', defaults: {
layout: 'form',
xtype: 'container',
defaultType: 'textfield',
style: 'width: 50%'
}, items: [{
items: [
{ fieldLabel: 'First Name' },
{ fieldLabel: 'Last Name' },
{ fieldLabel: 'Phone Number' },
{ fieldLabel: 'Email Address' }
]
}, {
items: [
{ fieldLabel: 'Street Address 1' },
{ fieldLabel: 'Street Address 2' },
{ fieldLabel: 'City, State' },
{ fieldLabel: 'ZIP code' }
]
}],
------------------------------------------------
着急记一下,写的不清楚,有时间再改一下
关于extjs表单布局的几种方式的更多相关文章
- asp.net mvc表单提交的几种方式
asp.net MVC中form提交和控制器接受form提交过来的数据 MVC中form提交和在控制器中怎样接受 1.cshtml页面form提交2.控制器处理表单提交数据4种方式方法1:使用传统的R ...
- Form 表单提交的几种方式
简单的总结一下form表单提交的几种方式:1.最简单的方式 就用form的submit提交方式,这种提交方式是不需要回调函数的 这种方式最近到一个form提供action路径后台接受就可以< ...
- asp.net 登陆验证 Form表单验证的3种方式 FormsAuthentication.SetAuthCookie;FormsAuthentication.RedirectFromLoginPage;FormsAuthenticationTicket
我们在登陆成功后,使用下面的3种方法,都是同一个目的:创建身份验证票并将其附加到 Cookie, 当我们用Forms认证方式的时候,可以使用HttpContext.Current.User.Ident ...
- JS表单提交的几种方式
第一种方式 : 表单提交,在 form 标签中增加 onsubmit 事件来判断表单是否提交成功 <script type="text/javascript"> fun ...
- JQuery插件使用之Validation 快速完成表单验证的几种方式
JQuery的Validation插件可以到http://plugins.jquery.com/上去下载.今天来分享一下,关于这个插件的使用. 简易使用 这第一种方式可谓是傻瓜式的使用,我们只需要按照 ...
- Day20-单表中获取表单数据的3种方式
1. 搭建环境请参考:http://www.cnblogs.com/momo8238/p/7508677.html 2. 创建表结构 models.py from django.db import m ...
- flask表单提交的两种方式
一.通用方式 通用方式就是使用ajax或者$.post来提交. 前端html <form method="post" action="/mockservice&qu ...
- 表单提交的3种方式,http post的contentType
application/x-www-form-urlencoded:窗体数据被编码为名称/值对.这是标准的编码格式.这是默认的方式 multipart/form-data:窗体数据被编码为一条消息,页 ...
- extjs表单验证
extjs表单验证 //放在onReady的function(){}中 Ext.QuickTips.init(); //为组件提供提示信息功能,form的主要提示信息就是客户端验证的错误信息. Ext ...
随机推荐
- 微信小程序scroll标签的测试
一:testscroll.wxml的代码如下.testview.js自动生成示例代码 //testscroll.wxml <view class="section__title&quo ...
- java--利用exe4j生成.exe的可执行文件
工具:eclipse,exe4j,jre,这三个都可以直接在官方网站下载,下面所用到的都是最新版的. 前期准备:用eclipse编好需要生成.exe文件的project,另外exe4j需要一个注册码, ...
- 201521123005 《java程序设计》 第六周学习总结
1. 本周学习总结 1.1 面向对象学习暂告一段落,请使用思维导图,以封装.继承.多态为核心概念画一张思维导图,对面向对象思想进行一个总结. 注1:关键词与内容不求多,但概念之间的联系要清晰,内容覆盖 ...
- 201521123072《Java程序》第二周总结
201521123072<Java程序>第二周总结 标签(空格分隔): Java学习 [TOC] 1,本周小结 1,字符串的使用, (字符串变量作为对象来处理),所以字符串相等就要用到eq ...
- Sublime Text 2 -Sidebar 背景色调整为黑色
Sublime Text 2 编辑器: Ctrl+` 输入安装代码,安装package control 插件 ctrl+shift+P : Package install 为什么装不上了呢?出现了什么 ...
- 201521123054 《Java程序设计》第13周学习总结
1. 本周学习总结 2. 书面作业 1. 网络基础 1.1 比较ping www.baidu.com与ping cec.jmu.edu.cn,分析返回结果有何不同?为什么会有这样的不同? ping c ...
- java System.currentTimeMillis()毫秒值和具体日期值互相转换
System.currentTimeMillis()与日期 间是可以相互转换的,通过 SimpleDateFormat dateformat = new SimpleDateFormat(" ...
- centos 7(Linux) 下yum安装mysql
1:查询centos7 中是否有可安装的mysql.命令查询 yum list mysql* 没有可安装的mysql软件... 2:sudo rpm -Uvh http://dev.mysql.com ...
- [UIKit学习]01.关于UIView,frame,bounds,center
UIView是Cocoa大多控件的父类,本身不带事件. UIView的常见用法 @property(nonatomic,readonly) UIView *superview; 获得自己的父控件对象 ...
- [转]iOS 应用程序的生命周期
OS的应用程序的生命周期,还有程序是运行在前台还是后台,应用程序各个状态的变换,这些对于开发者来说都是很重要的. iOS系统的资源是有限的,应用程序在前台和在后台的状态是不一样的.在后台时,程序会受到 ...