Extjs.FormPanel

刚刚学习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相关推荐

ExtJS FormPanel不执行校验
经检查问题原因在于使用了 validator 属性. 使用validator属性,必须添加返回值.不添加返回值,就会出现FormPanel不执行校验的问题. 转载于:https://www.cnblo ...
ExtJs FormPanel布局
FormPanel有两种布局:form和column,form是纵向布局,column为横向布局.默认为后者.使用layout属性定义布局类型.对于一个复杂的布局表单,最重要的是正确分割,分割结果直接 ...
Extjs FormPanel/TabPanel/GridPanel混合
tabPanel包含两个FormPanel Ext.onReady(function () {var tabsDemo = new Ext.TabPanel({renderTo: Ext.getBod ...
extjs FormPanel更改为普通表单提交,提交到iframe显示
BasicForm提交源代码: * @return {BasicForm} this */ submit : function(options){ options = options || {}; i ...
Extjs formpanel加载数据的两种方式
1.formpanel数据源和grid相同,使用Form.getForm().loadRecord(row);则数据便可自动加载在formpanel中对应的控件. 2.formpanel数据源是单独的 ...
extjs 提交表单给php,JavaScript_Extjs学习笔记之二初识Extjs之Form，Extjs中的表单组件是Ext.form.Basic - phpStudy...
Extjs学习笔记之二初识Extjs之Form Extjs中的表单组件是Ext.form.BasicForm,不过最简单最常用的是Ext.form.FormPanel控件,它继承自Panel,具有一 ...
电脑开机启动php,window_Win10开机自动启动在哪?win10如何设置软件开机启动?，windows 10系统的开机启动项如果 - phpStudy...
Win10开机自动启动在哪?win10如何设置软件开机启动? windows 10系统的开机启动项如果过多的话,会影响电脑的开机速度,而WIN10系统同以往的Window操作系统开机启动不一样,在开始 ...
【ExtJS】FormPanel 布局(一)
准备工作,布置一个最简单的Form,共5个组件,都为textfield. 1 Ext.onReady(function(){ 2 Ext.create('Ext.form.Panel', { 3 wi ...
ExtJs 备忘录（3）—— Form表单（三） [ 数据验证 ]
正文一.资料 1.1. 表单提示的方式设置,如: Ext.form.Field.prototype.msgTarget='side' 该设置为枚举值:'qtip','side','title','u ...

Extjs.FormPanel

Extjs.FormPanel相关推荐

最新文章

热门文章