`
gtgt1988
  • 浏览: 114290 次
  • 性别: Icon_minigender_1
  • 来自: 合肥
社区版块
存档分类
最新评论

Ext.form.FormPanel对象的学习布局

 
阅读更多

UserPhoneTestWin = Ext.extend(Ext.Window, {
	constructor : function() {
		var tmId = "";
		//copy 参数属性到当前对象
		var cfg = cfg || {};
		this.initCom();
		UserPhoneTestWin.superclass.constructor.call(this, {
			title:'按用户号码',
			id:'_userTest',
			width:500,
			height:180,
			frame :true,
			border:false
		}); 
	},
	initCom:function(){
		 var form = new FormPanel();
		 this.items=[form];
	}
});


FormPanel = new  Ext.extend(Ext.form.FormPanel,{
	constructor : function() {
		var tmId = "";
		//copy 参数属性到当前对象
		var cfg = cfg || {};
		this.initCom();
		UserPhoneTestWin.superclass.constructor.call(this, {
			width:490,
			height:150,
			frame :true,
			border:false,
			items: [{
				xtype: 'panel',
				layout: 'column',
				style: 'margin: 20px 0 0 10px;',
				items: [
				        {
				        	columnWidth: .8,
				        	layout: 'form',
				        	labelWidth: 60,
				        	labelAlign:"right",
				        	style: 'margin: 6px 0 0 30px;',
				        	items: this.userphoneText
				        },{
				        	columnWidth: .8,
				        	layout: 'form',
				        	style: 'margin: 5px 0 0 110px;',
				        	items: this.info
				        },{
				        	columnWidth: .8,
				        	layout: 'form',
				        	style: 'margin: 5px 0 0 110px;',
				        	items: this.showInfo
				        }
				]
			}],
			buttonAlign:'center',
			buttons:[{text:'测试',id:'save',iconCls:'save',handler:this.doTest,scope:this},
				     {text:'重置',iconCls:'delete',handler:this.doCancel,scope:this},
				     {text:'关闭',iconCls:'close',handler:this.doClose,scope:this}]
			
		}); 
	},
	
	initCom:function(){
		this.userphoneText = new Ext.form.TextField({
			allowBlank : false,
			width : 240,
			id : '_userphone',
			fieldLabel : '用户号',
			regex: /(^[0-9]{3,4}\-[0-9]{7,8}$)|(^[0-9]{7,8}$)|(^\([0-9]{3,4}\)[0-9]{3,8}$)|(^0{0,1}13[0-9]{9}$)/,
			regexText: '请输入正确的用户号码格式',
			listeners: {
	        	'focus': {fn: this.promptInfo, scope: this}
	        }
		});
		
		this.info = new  Ext.form.Label({
			id:'_info',
			text: '请输入电话号码或宽带账号',
			hidden: true,
			style: 'font-size:13px;color:red;'
		});
		
		this.showInfo = new  Ext.form.Label({
			id:'_showInfo',
			text: '该账号不存在,请重新输入',
			hidden: true,
			style: 'font-size:13px;color:red;'
		});
	},
	promptInfo:function(){
		this.info.hide();
		this.showInfo.hide();
	},
	doTest:function(){
		var phoneNumber = Ext.getCmp('_userphone').getValue();
		if(phoneNumber == null || phoneNumber==""){
			Ext.getCmp('_info').show();
			Ext.getCmp('_showInfo').hide();
		}else{
			Ext.getCmp('_info').hide();
			QueryTestResultManager.saveOdnNumberTestTask(phoneNumber,function(data){
				if(data == ""){
					Ext.getCmp('_showInfo').show();
				}else if(data != null && data != ""){
					tmId = data;
					var fulls = "left=0,top=0,location=yes,resizable=yes";    //定义弹出窗口的参数
					if (window.screen) {
						var ah = screen.availHeight - 30;
						var aw = screen.availWidth - 10;
						fulls += ",height=" + ah;
						fulls += ",width=" + aw;
					}
//					
				}
			},this);
		}
	},
	doCancel:function(){
		Ext.getCmp('_userphone').reset();
	},
	doClose:function(){
		Ext.getCmp('_userTest').close();
	}
});
	


 
 
  • 大小: 4.8 KB
分享到:
评论

相关推荐

    EXT.form组件

    1. `form`:`Ext.FormPanel`是EXT JS中的表单面板,它是一个容器,可以容纳各种表单字段和其他组件。表单面板允许你定义布局、提交行为以及处理表单数据的方法。 2. `checkbox`:`Ext.form.Checkbox`是用于创建复选...

    Ext的FormPanel组件

    Ext.form.FormPanel = Ext.FormPanel; // 示例:创建一个简单的FormPanel var form1 = new Ext.form.FormPanel({ width: 350, frame: true, // 圆角和浅蓝色背景 renderTo: "form1", // 指定渲染的位置 title: ...

    Ext 添加功能form表单实例

    - `layout`: 使用了`"form"`布局,这是Ext中专门为表单设计的布局方式。 - `labelWidth`: 统一设置了所有字段标签的宽度。 - `autoScroll`: 设置为`true`,当表单内容超出容器时自动显示滚动条。 #### 字段配置 ...

    Ext组件描述,各个组件含义

    **2.16 Form Panel (Ext.FormPanel)** - **xtype**: `form` - **功能描述**:Form Panel 是一个包含表单字段的面板。 - **主要用途**:用于创建和管理表单,支持数据验证和提交。 **2.17 Checkbox (Ext.form....

    Ext table布局实例 formpanel的table布局

    本文将深入探讨“Ext table布局实例”以及“formpanel的table布局”,帮助开发者更好地理解和运用这两种布局方式。 首先,我们要理解什么是Ext table布局。Ext table布局主要用于显示数据,它基于HTML的`<table>`...

    ExtJs组件类的对应表

    1. **`form`** - `Ext.FormPanel`或`Ext.form.FormPanel`,表单面板组件,用于创建表单并管理其字段。 2. **`checkbox`** - `Ext.form.Checkbox`,多选框组件,用于创建多选输入。 3. **`combo`** - `Ext.form....

    Ext Form 示例

    var formPanel = Ext.create('Ext.form.Panel', { width: 300, height: 200, title: '简单表单', layout: 'form', items: [/* 表单字段将在这里定义 */] }); ``` 3. **添加表单字段**:使用 `items` 配置项...

    .archExtJs2.0学习系列(7)--Ext.FormPanel之第四式(其他组件示例篇).doc

    首先,Ext.FormPanel是ExtJS中用于创建表单的主要组件,它允许我们构建复杂的表单布局并处理用户输入的数据。 1. **Checkbox简单示例** Checkbox在ExtJS中用于创建复选框,可以用来让用户选择多个选项。在示例中,...

    extJs中关于formPanel动态添加组件的验证问题

    在EXT JS这个强大的JavaScript框架中,FormPanel是用于创建表单的重要组件,它允许开发者构建交互式的、数据驱动的Web应用程序。FormPanel不仅提供了一种布局管理方式,还支持各种表单元素,如文本框、复选框、下拉...

    ExtJs4.0 表单提交Demo

    ExtJs 4.0的FormPanel对象提供了`getForm()`方法获取表单实例,然后通过`form.submit()`或`form.serialize()`方法完成数据的序列化。 4. **表单提交过程** - **创建表单组件**:首先,定义一个FormPanel,并在其...

    Extjs实用教程

    - **FormPanel**: `Ext.FormPanel`,表单容器。 - **Checkbox**: `Ext.form.Checkbox`,复选框。 - **ComboBox**: `Ext.form.ComboBox`,下拉选择框。 - **DateField**: `Ext.form.DateField`,日期输入框。 - ...

    老师整理的extjs学习笔记

    提交 `Ext.form.FormPanel` 表单可以通过调用 `form.submit()` 方法来实现。该方法接受一个配置对象,其中可以指定服务器端的 URL、提交成功或失败后的回调函数等。 ```javascript formPanel.getForm().submit({ ...

    Ext js Xtype

    - **Form Components**: 用于构建表单的组件,如`Ext.FormPanel`,`Ext.form.Checkbox`,`Ext.form.TextField`等。 - **Chart Components**: 提供了各种图表组件,如`Ext.chart.Chart`,`Ext.chart.BarChart`,`Ext....

    ExtJs 动态添加表单

    var formPanel = Ext.create('Ext.form.Panel', { layout: 'form', items: [] }); ``` 2. **定义表单字段**: 根据需求,我们可以定义各种类型的字段。例如,添加一个文本字段: ```javascript var ...

    Ext3.0 api帮助文档

    - **Ext.form.FormPanel**: 创建表单的容器,支持多种表单元素和验证。 - **Ext.form.Field**: 表单字段类,如文本框、选择框、日期选择器等。 - **Ext.form.BasicForm**: 提供表单的提交和数据验证功能。 7. **...

    extjs控件列表

    **Ext.FormPanel** - **描述**: 表单面板,用于组织和管理表单元素。 - **用途**: 创建复杂的表单,如用户注册、登录表单。 **Ext.form.Checkbox** - **描述**: 多选框,用于选择一个或多个选项。 - **用途**: 问卷...

    Extjs4 下拉树 TreeCombo

    var treeCombo = Ext.create('Ext.form.field.Tree', { fieldLabel: '选择节点', displayField: 'text', valueField: 'id', store: treeStore, queryMode: 'local' }); var formPanel = Ext.create('Ext....

    Ext与后台数据库交互

    `Ext.form.FormPanel`是Ext框架中用于处理表单的主要组件之一,它提供了一系列的方法来管理和提交表单数据。 - **submit方法**:`FormPanel.getForm().submit()`方法用于提交当前表单。该方法支持传递一些参数,如`...

    Extjs xtype集合

    - **`Class`**: `Ext.FormPanel/Ext.form.FormPanel` - **描述**: 表单面板,用于组织表单字段。 2. **`checkbox`:** - **`xtype`**: `checkbox` - **`Class`**: `Ext.form.Checkbox` - **描述**: 复选框组件...

Global site tag (gtag.js) - Google Analytics