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
分享到:
相关推荐
Extjs4 表单从数据库读取数据映射到对应的字段中显示
-Window的实例方法GetCloseReference等以及ActiveWindow的静态方法GetCloseReference等,其中的Close全部改为Hide。 -增加TabStrip中Tab控件可关闭属性EnableClose(默认为false)以及两个方法GetShowReference和...
3. ExtJs2.0学习系列(3)--Ext.Window 4. ExtJs2.0学习系列(4)--Ext.FormPanel之第一式 5. ExtJs2.0学习系列(5)--Ext.FormPanel之第二式 6. ExtJs2.0学习系列(6)--Ext.FormPanel之第三式(ComboBox篇) 7. ExtJs2.0学习...
Ext3.0的个人笔记及例子,包括按钮,表单及验证,panel,window,TabPanel,treePanel,formPanel,gridPanel,viewPort等主要控件
使用到的Ext组件 这个Demo涉及到Ext中的GridPanel,FormPanel和Window三个组件。效果图现在开始讲解代码,首先看一下创建GridPanel的代码片段 代码如下://定义数据列表面板类 PersonListGridPanel = Ext.extend(Ext...
1、演示常用控件使用如:TabPanl,GridPanel,TreePanel,Menu,FormPanel,Window,ux等等。 2、演示控件封装如:表格控件,文本框控件,布局控件,列表控件,图表控件,分页控件等等。 3、演示插件使用和封装插件、...
第十四章:Panel的子类——Window窗口 85 一、概述 85 二、Ext.Window类 85 三、实现Window的最小化功能 87 四、小结 91 第十五章:Panel的子类——FormPanel 93 一、无处不在的表单 93 二、Ext.form.FormPanel类 93...
CheckBox(复选框)主要用来接收用户选择的选项 如图所示(请忽略UI的不好看): 该弹出窗口的主要代码如下: 代码如下: var win = new Ext.Window({ modal : true, title : ‘确定要拒绝该表吗?’, width : 500, ...
Js代码 代码如下:var xjjlEditForm = new Ext.FormPanel({…….省略form中的定义内容……..});然后定义编辑按钮要调用的函数showeditPanel(同时定义一个加载form的window): Js代码 代码如下://–编辑按钮调用的...
三、将ext-2.3.0、CKEditor 3.0.1、ckfinder_asp_1.4,取出解压后的文件夹,真接放到站点根目录,目录结构为: WEBROOT |--ckeditor |--finder |--ext-2.3.0 |--js |--css 修改ckeditor目录下的config.js如下...