刚刚学习ExtJS ,备注一哈代码 防止忘记。。。

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<link href="resources/css/ext-all.css" rel="stylesheet" />
<script src="JS/ext-all.js"></script>
<script src="JS/ext-lang-zh_CN.js"></script>
<script type="text/javascript">
Ext.onReady(function () {
Ext.QuickTips.init();//支持Tips提示
Ext.form.Field.prototype.megTarget = 'side';//提示的方式
Ext.apply(Ext.form.VTypes, {
password: function(val, field) {
if (field.confirmTo) {
var pwd = Ext.get(field.confirmTo);
return (val == pwd.getValue());
}
return true;
}
});
var form1 = new Ext.form.FormPanel({
width: 400,autoHeight:true,
renderTo: "myform",
frame: true,
title: "用户信息",
items: [{
xtype: "fieldset",
checkboxToggle: true,
checkboxName: "checkInfo",
title: "选填信息",
defaultType: "textfield",
width: 380,
autoHeight: true,
items: [{
name: "UserName",
id: "UserName",
fieldLabel: "用户名称",
xtype: "textfield",
emptyText: "请输入用户名称!",
anchor:"96%"
}, {
name: "UserPwd",
id: "UserPwd",
fieldLabel: "用户密码",
xtype: "textfield",
emptyText: "请输入用户密码!",
inputType: "password", //输入的类型
anchor: "96%",
allowBlank: false,//是否允许为空
blankText:"密码不能为空!" },
{
fieldLabel: "确认密码",
id: "confirmpass",
name: "confirmpass",
inputType: "password", //输入的类型
vtype: "password",
vtypeText: "两次输入的密码不一至!",
confirmTo: "UserPwd",
anchor:"96%"
},
{
fieldLabel: "Emial",
vtype: "email",
vtypeText: "不是有效的邮箱地址!",
name:"txtEmial",
anchor:"96%"
}
]
}
, { xtype: "fieldset",
collapsible: true,
title:"详细信息",
width: 380,
defaultType: "textfield",
items: [{
fieldLabel: "爱好",
name: "hbody",
value: '呵呵 上网',
anchor: "96%" }, {
xtype: "combo",
name: "sex",
store: ["男", "女", "保密"],
fieldLabel: "性别",
anchor:"96%",
emptyText: "请选择姓别"
}]
}
,
{
xtype: "fieldset",
title: "业务爱好",
width: 380,
labelWidth: 100,
labelAlign:"left",
autoHeight: true,
items: [
{
frame:true,
xtype: "panel",
layout: "column",
fieldLable: "爱好",
items: [
{
columnWidth: 2,
xtype: "checkbox",
boxLabel: "足球"
},
{
columnWidth: 2,
xtype: "checkbox",
boxLabel: "篮球"
},
{
columnWidth: 2,
xtype: "checkbox",
boxLabel: "乒乓球"
},
{
columnWidth: 2,
xtype: "checkbox",
boxLabel: "羽毛球"
}, ,
{
columnWidth: 2,
xtype: "checkbox",
boxLabel: "排球",
checked:true
}
]
}
]
}
],
buttonAlign: "center",
buttons:[{text:"确认"},{text:"取消"}]
}); });
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="myform"> </div>
</form>
</body>
</html>

Extjs.FormPanel的更多相关文章

  1. ExtJS FormPanel不执行校验

    经检查问题原因在于使用了 validator 属性. 使用validator属性,必须添加返回值.不添加返回值,就会出现FormPanel不执行校验的问题.

  2. ExtJs FormPanel布局

    FormPanel有两种布局:form和column,form是纵向布局,column为横向布局.默认为后者.使用layout属性定义布局类型.对于一个复杂的布局表单,最重要的是正确分割,分割结果直接 ...

  3. Javascript - 学习总目录

    Javascript - 操作符 Javascript - 数据类型 Javascrip - 语句 Javascript - 函数 Javascript - 预编译与函数词法作用域 Javascrip ...

  4. 无废话ExtJs 入门教程四[表单:FormPanel]

    无废话ExtJs 入门教程四[表单:FormPanel] extjs技术交流,欢迎加群(201926085) 继上一节内容,我们在窗体里加了个表单.如下所示代码区的第28行位置,items:form. ...

  5. Extjs关于FormPanel布局

    Extjs关于FormPanel布局 FormPanel有两种布局:form和column,form是纵向布局,column为横向布局.默认为后者.使用layout属性定义布局类型.对于一个复杂的布局 ...

  6. 【ExtJS】FormPanel表单验证

    在Extjs中,FormPane表单提供了各种各样的验证. 在表单验证前需要在onReady的function({})内添加以下代码: Ext.QuickTips.init();    //为组件提供 ...

  7. 【ExtJS】 FormPanel与ComboBox的集成以及值的获取

    var formPanel = Ext.create("Ext.form.Panel",{ title : 'formPanel', width : 400, url : 'asd ...

  8. ExtJs 使用点滴 十三 在FormPanel 嵌入按钮

    Ext.onReady(function () { //初始化标签中的Ext:Qtip属性. Ext.QuickTips.init(); Ext.form.Field.prototype.msgTar ...

  9. ExtJs学习笔记之FormPanel组件

    FormPanel组件 FormPanel 为 form 表单提供了一个标准的容器. 本质上还是一个标准的 Ext.panel.Panel, 只是自动创建了一个 BasicForm 来管理所有添加到 ...

随机推荐

  1. [Xamarin] 使用Webview 來做APP (转帖)

    有時候,企業要求的沒有這麼多,他原本可能官方網站就已經有支援Mobile Web Design 他只需要原封不動的開發一個APP 也或是,他只是要型錄型,或是問卷調查的型的APP,這時候透過類似像if ...

  2. 谷歌发布的首款基于HTTP/2和protobuf的RPC框架:GRPC

    Google 刚刚开源了grpc,  一个基于HTTP2 和 Protobuf 的高性能.开源.通用的RPC框架.Protobuf 本身虽然提供了RPC  的定义语法,但是一直以来,Google 只开 ...

  3. Edge.js:让.NET和Node.js代码比翼齐飞

    通过Edge.js项目,你可以在一个进程中同时运行Node.js和.NET代码.在本文中,我将会论述这个项目背后的动机,并描述Edge.js提供的基本机制.随后将探讨一些Edge.js应用场景,它在这 ...

  4. Meteor + node-imap(nodejs) + mailparser(nodejs) 实现完整收发邮件

    版本信息: Meteor:windows MIS安装  0.6.4 node-imap:npm指定的0.8.0版,不是默认的0.7.x版. mailparser:npm安装0.3.6 以下是记录踩到的 ...

  5. .NET中操作IPicture、IPictureDisp的小随笔

    [题外话] 最近在做一个调用某实验仪器的程序,这个仪器提供了Windows上COM的接口.调用仪器的时候需要传输图片,提供的接口里使用了IPicture这个接口,由于以前没接触过,所以查找了一些资料, ...

  6. js框架模版

    (function() { //注册命名空间zzw到window对象上 window['zzw'] = {} //定义一个$函数 function $() { alert("hello $& ...

  7. ASP.NET MVC 过滤器(四)

    ASP.NET MVC 过滤器(四) 前言 前一篇对IActionFilter方法执行过滤器在框架中的执行过程做了大概的描述,本篇将会对IActionFilter类型的过滤器使用来做一些介绍. ASP ...

  8. Android学习第二天-android常用命令

    上一篇文章中,我们重点讲解了adb的常用命令,下面我们一起来看看其它常用的命令 2 android 2.1 查看机器上所有已经安装的Android版本和AVD设备 2.1.1查看机器上已经安装的AVD ...

  9. shell使用攻略

    shell 是什么 ~ $ ls /bin/*sh /bin/bash /bin/csh /bin/ksh /bin/sh /bin/tcsh /bin/zsh 是什么 kernel shell 命令 ...

  10. 为CentOS7(文字界面操作)系统安装gnome图形界面程序

    1.安装gnome sudo yum groupinstall "GNOME Desktop" "Graphical Administration Tools" ...