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
分享到:
相关推荐
1. `form`:`Ext.FormPanel`是EXT JS中的表单面板,它是一个容器,可以容纳各种表单字段和其他组件。表单面板允许你定义布局、提交行为以及处理表单数据的方法。 2. `checkbox`:`Ext.form.Checkbox`是用于创建复选...
Ext.form.FormPanel = Ext.FormPanel; // 示例:创建一个简单的FormPanel var form1 = new Ext.form.FormPanel({ width: 350, frame: true, // 圆角和浅蓝色背景 renderTo: "form1", // 指定渲染的位置 title: ...
- `layout`: 使用了`"form"`布局,这是Ext中专门为表单设计的布局方式。 - `labelWidth`: 统一设置了所有字段标签的宽度。 - `autoScroll`: 设置为`true`,当表单内容超出容器时自动显示滚动条。 #### 字段配置 ...
**2.16 Form Panel (Ext.FormPanel)** - **xtype**: `form` - **功能描述**:Form Panel 是一个包含表单字段的面板。 - **主要用途**:用于创建和管理表单,支持数据验证和提交。 **2.17 Checkbox (Ext.form....
本文将深入探讨“Ext table布局实例”以及“formpanel的table布局”,帮助开发者更好地理解和运用这两种布局方式。 首先,我们要理解什么是Ext table布局。Ext table布局主要用于显示数据,它基于HTML的`<table>`...
1. **`form`** - `Ext.FormPanel`或`Ext.form.FormPanel`,表单面板组件,用于创建表单并管理其字段。 2. **`checkbox`** - `Ext.form.Checkbox`,多选框组件,用于创建多选输入。 3. **`combo`** - `Ext.form....
var formPanel = Ext.create('Ext.form.Panel', { width: 300, height: 200, title: '简单表单', layout: 'form', items: [/* 表单字段将在这里定义 */] }); ``` 3. **添加表单字段**:使用 `items` 配置项...
首先,Ext.FormPanel是ExtJS中用于创建表单的主要组件,它允许我们构建复杂的表单布局并处理用户输入的数据。 1. **Checkbox简单示例** Checkbox在ExtJS中用于创建复选框,可以用来让用户选择多个选项。在示例中,...
在EXT JS这个强大的JavaScript框架中,FormPanel是用于创建表单的重要组件,它允许开发者构建交互式的、数据驱动的Web应用程序。FormPanel不仅提供了一种布局管理方式,还支持各种表单元素,如文本框、复选框、下拉...
ExtJs 4.0的FormPanel对象提供了`getForm()`方法获取表单实例,然后通过`form.submit()`或`form.serialize()`方法完成数据的序列化。 4. **表单提交过程** - **创建表单组件**:首先,定义一个FormPanel,并在其...
- **FormPanel**: `Ext.FormPanel`,表单容器。 - **Checkbox**: `Ext.form.Checkbox`,复选框。 - **ComboBox**: `Ext.form.ComboBox`,下拉选择框。 - **DateField**: `Ext.form.DateField`,日期输入框。 - ...
提交 `Ext.form.FormPanel` 表单可以通过调用 `form.submit()` 方法来实现。该方法接受一个配置对象,其中可以指定服务器端的 URL、提交成功或失败后的回调函数等。 ```javascript formPanel.getForm().submit({ ...
- **Form Components**: 用于构建表单的组件,如`Ext.FormPanel`,`Ext.form.Checkbox`,`Ext.form.TextField`等。 - **Chart Components**: 提供了各种图表组件,如`Ext.chart.Chart`,`Ext.chart.BarChart`,`Ext....
var formPanel = Ext.create('Ext.form.Panel', { layout: 'form', items: [] }); ``` 2. **定义表单字段**: 根据需求,我们可以定义各种类型的字段。例如,添加一个文本字段: ```javascript var ...
- **Ext.form.FormPanel**: 创建表单的容器,支持多种表单元素和验证。 - **Ext.form.Field**: 表单字段类,如文本框、选择框、日期选择器等。 - **Ext.form.BasicForm**: 提供表单的提交和数据验证功能。 7. **...
**Ext.FormPanel** - **描述**: 表单面板,用于组织和管理表单元素。 - **用途**: 创建复杂的表单,如用户注册、登录表单。 **Ext.form.Checkbox** - **描述**: 多选框,用于选择一个或多个选项。 - **用途**: 问卷...
var treeCombo = Ext.create('Ext.form.field.Tree', { fieldLabel: '选择节点', displayField: 'text', valueField: 'id', store: treeStore, queryMode: 'local' }); var formPanel = Ext.create('Ext....
`Ext.form.FormPanel`是Ext框架中用于处理表单的主要组件之一,它提供了一系列的方法来管理和提交表单数据。 - **submit方法**:`FormPanel.getForm().submit()`方法用于提交当前表单。该方法支持传递一些参数,如`...
- **`Class`**: `Ext.FormPanel/Ext.form.FormPanel` - **描述**: 表单面板,用于组织表单字段。 2. **`checkbox`:** - **`xtype`**: `checkbox` - **`Class`**: `Ext.form.Checkbox` - **描述**: 复选框组件...