Ext.onReady(
function()
{
//win.show();
AddGuestInfoWin.show();
}
);
//----------------------------------Ext Window Component Test start
var win = new Ext.Window({title:"Hello",width:300,height:200,html:'<h1>Hello World~!</h1>'});
//----------------------------------Ext Window Component Test end
//----------------------------------Ext Window & FormPanel Component start
//---------------------------------Ext Form Component start
var AddGuestInfofp=new Ext.form.FormPanel({
width:375,
height:210,
plain:true,//吴磊查看了API后发现没有这个属性存在,不知道是不是API中的资料不全,怀疑是Ext组织有意隐藏。
layout:"form",
defaultType:"textfield",
labelWidth:75,
baseCls:"x-plain",
//锚点布局-
defaults:{anchor:"95%",msgTarget:"side"},
buttonAlign:"center",
bodyStyle:"padding:0 0 0 0",
items:[{
name:"guestname",
fieldLabel:"<font color=red>客人姓名</font>",
allowBlank:false,
blankText:"客人姓名不允许为空"
},{
name:"guestcardid",
fieldLabel:"身份证号",
allowBlank:false,
blankText:"身份证号不允许为空",
regex:/^[0-9.]{15,18}$/,
regexText:"身份证号为15-18位数字组成"
},{
name:"guestsexs",
xtype:"combo",
fieldLabel:"客人性别",
//传入后台真实值value field /value
hiddenName:"guestsex",
readOnly:true,
mode:"local",
displayField:"show",
valueField:"value",
triggerAction:"all",
value:"0",
store:new Ext.data.SimpleStore({
fields:["show","value"],
data:[["男","0"],["女","1"]]
})
},{
name:"guestmobile",
fieldLabel:"电话号码",
allowBlank:false,
blankText:"电话号码不允许为空",
regex:/^[0-9.]{8,13}$/,
regexText:"电话号码为8-13位数字组成"
},{
name:"guestaddress",
xtype:"textfield",
fieldLabel:"客人地址",
allowBlank:false,
blankText:"客人地址不允许为空",
regex:/^[\s\S]{1,50}$/,
regexText:"客人地址请不要超过50个字符"
}]
});
//---------------------------------Ext Form Component end
//----------------------------------Ext Window Component start
var AddGuestInfoWin=new Ext.Window({
title:"添加客人信息",
width:410,
height:235,
plain:true,//金山词霸:无装饰的,简易的,不复杂的;素净的,清淡的,朴素的,简朴的
iconCls:"addicon",
resizable:false,//不可以随意改变大小
//draggable:false,//是否可以拖动
defaultType:"textfield",
labelWidth:100,
collapsible:true, //允许缩放条
closeAction : 'hide',
closable:true,
//plain : true,//--这里好像是和上面重复了,不知道是故意这么做的,还是bug了。
modal: 'true', //弹出模态窗体//如果没有这个设置那么就没有锁定效果
buttonAlign:"center",
bodyStyle:"padding:10px 0 0 15px",
//------------form component start
items:[AddGuestInfofp],
//------------form component end
listeners:{
"show":function()
{
AddGuestInfofp.getForm().reset();//当window show事件发生时清空一下表单
}
},
//下面是三个按钮和按钮各自的事件定义
//---------------buttons start
buttons:[{
text:"保存信息",
minWidth:70,
handler:function()
{
if(AddGuestInfofp.getForm().isValid())
{
//弹出效果
Ext.MessageBox.show({
msg: '正在保存,请稍等...',
progressText: 'Saving...',
width:300,
wait:true,
waitConfig: {interval:200},
icon:'download',
animEl: 'saving'
});
setTimeout(function(){Ext.MessageBox.hide();}, 1000);
AddGuestInfofp.form.submit({
url:"URL/OpenRoomInfo/SaveGuestInfo.aspx",
method:"POST",
success:function(form,action)
{
//成功后
var flag=action.result.success;
if(flag=="true")
{
//填 写开房房间信息
AddGuestInfoWin.hide();
OpenRoomInfoWin.show();
}
},
failure:function(form,action)
{
Ext.MessageBox.alert("提示!","保存房间类型信息失败!");
}
});
}//if end here
}//handler end here
},{
text:"重置",
minWidth:70,
qtip:"重置数据",
handler:function()
{
AddGuestInfofp.getForm().reset();
}
},{
text:"取 消",
minWidth:70,
handler:function()
{
AddGuestInfoWin.hide();
}
}]
//---------------buttons end
});
//----------------------------------Ext Window Component end
//----------------------------------Ext Window & FormPanel Component end
分享到:
相关推荐
这涉及到监听窗口的关闭事件('beforeclose')并检查数据是否已修改: 1. 监听'beforeclose'事件: 我们需要在创建Window实例时添加一个事件监听器,检查数据状态: ```javascript myWindow.on('beforeclose', ...
在本篇文章中,我们将深入探讨如何使用Extjs4中的FormPanel组件从后台加载JSON数据,并将其映射到表单的各个字段中进行显示。这是一项非常实用的技术,尤其是在需要动态填充表单的情况下。 ### 一、Extjs4 ...
在本文中,我们将深入探讨如何使用ExtJS进行面向对象的开发,特别关注如何构建GridPanel、FormPanel和Window组件。作者通过一个简单的示例程序,展示了如何在学习Ext的过程中实践面向对象编程,以及如何实现数据展示...
首先,Swing组件是Java AWT(Abstract Window Toolkit)的扩展,提供了更多的组件类型和自定义选项。其中包括按钮(JButton)、文本字段(JTextField)、密码字段(JPasswordField)、标签(JLabel)、选择框...
同时,在`Window`中包含了之前创建的`FormPanel`。 ```javascript var win = new Ext.Window({ el: 'hello-win', draggable: false, resizable: false, layout: "form", width: 400, height: 210, ...
2. 添加一个FileUpload组件到FormPanel中,设置文件输入字段的名称。 ```java FileUpload fileUpload = new FileUpload(); fileUpload.setName("file"); form.add(fileUpload); ``` 3. 创建一个按钮,当用户点击按钮...
- `Ext.form.Action.Submit`:当用户选择文件并触发提交操作时,`FormPanel`会触发一个`submit`动作,将文件数据发送到服务器。 2. **异步上传**: - `Ajax上传`:`Ext`支持使用Ajax进行文件上传,这意味着文件...
课程大纲覆盖了ExtJS的基础组件和功能,包括信息提示框、面板(Panel)、工具栏、菜单栏、窗口(Window)等。此外,还详细讲解了布局方式,如ViewPort和TabPanel,以及FormPanel、TreePanel、GridPanel等关键组件的...
2. **组件使用**:使用ExtJS的FormPanel或Window组件来构建登录界面,包括用户名输入框(TextField)、密码输入框(PasswordField)、登录按钮(Button)等。 3. **事件处理**:绑定按钮点击事件,当用户点击登录...
1、演示常用控件使用如:TabPanl,GridPanel,TreePanel,Menu,FormPanel,Window,ux等等。 2、演示控件封装如:表格控件,文本框控件,布局控件,列表控件,图表控件,分页控件等等。 3、演示插件使用和封装插件、...
在EXTJS中,我们可以使用FormPanel或Window组件创建一个输入框,让用户输入新的文件名,然后通过Ajax请求将新名字发送到服务器,执行实际的重命名操作。服务器端则需要处理这个请求,找到对应的文件,更新其名称,并...
#### TreePanel与FormPanel:构建复杂用户界面的基石 `TreePanel` 和 `FormPanel` 是EXT框架中用于构建复杂用户界面的重要组件。 - **TreePanel**:作为树形数据展示的核心组件,`TreePanel` 提供了强大的树状数据...
- 展示如何使用Flex布局和其他布局策略来组织FormPanel内部元素。 3. **表单初始化** - 讲解如何预填充表单数据以及如何根据服务器响应动态更新表单状态。 #### 十九、表格组件——GridPanel 1. **表格与...
5. **Window(窗口)**:Window组件是一个浮动的Panel,常用于弹出式对话框。它可以设置大小、位置、是否可拖动、是否可关闭等属性,并且可以包含任何其他组件。 6. **TabPanel(选项卡面板)**:TabPanel允许在一...
3. **AJAX上传**:使用ExtJS的Ajax请求(`Ext.Ajax.request`)或者FormPanel的submit方法,将文件数据发送到后台服务器。通常,文件内容会被转换成Base64编码或使用FormData对象封装。 4. **文件类型验证**:在前端...
"28-表单FormPanel控件的使用.doc"讲述了ExtJs中的表单组件,包括创建表单、添加字段、验证用户输入以及提交数据等操作。表单组件在数据收集和用户交互中扮演着重要角色。 最后,"ext-3.4.1"可能是一个包含ExtJs...
这可能是一个目录结构,包含了多个子文件夹,每个子文件夹代表一个特定的EXTASP控件,如GridPanel、FormPanel、Window等。每个子文件夹内会有HTML、CSS、JavaScript以及可能的C#或VB.NET代码文件,这些文件展示了...