14-Ext_Window
示例代码1:
Ext.onReady(function(){
//var lp = new LP();
//lp.render(Ext.getBody());
var _loginBox = new Ext.Window({
title : '登陆',
width : 265,
deferHeight:true,//true表示根据外置的组建计算高度,false表示允许该组建自行设置高度,默认为false
resizable:false, //是否可以调整大小写
closable:true, //是否有右上角的关闭按钮
collapsible:true,//是否可以折叠,右上角的折叠按钮
animCollapse:false,//折叠时,是否有动画效果,默认为有
minimizable:true, //是否有最小化按钮,需要自己实现最小化功能
maximizable:true, //是否现实最大化按钮
closeAction:'close',//点击关闭按钮是触发的事件,默认为先hide后close,如果设置其为close那么也是先hide后close
hideMode:'display', //这个组建是怎么隐藏的.可支持的值有visibility,offsets(偏移),默认为display
//draggable:false, //是否允许拖动window,默认为true
//constrain:true,//约束window在视图内显示,默认为false,即不约束
constrainHeader:true,//约束window拖手在视图内现实,默认为false,即不约束
//plain:true, //使内部的背景色接近与外面
//headerAsText:false, //是否现实头部标题,默认为true
layout:'form',
frame:true,
labelWidth : 57,
labelAlign : 'right',
buttonAlign :'center',
minButtonWidth:70,//此面板上按钮的最小宽度,默认为75
//defaultType:'textfield',//容器的默认类型,默认为panel
defaults : {xtype:'textfield',width:150},
bodyStyle:'padding:5px;',
listeners:{
'show':function(){alert("show事件");}, //拥有show事件
'hide':function(){alert("hide事件");}, //拥有hide事件 点击关闭(右上角X)也会触发hide事件
'close':function(){alert("close事件");}, //拥有close事件 点击关闭按钮时,也会激活close事件
'minimize':function(){alert("minimize最小化事件")}, //拥有最小化事件
'maximize':function(){alert("maximize最大化事件")}, //拥有最大化事件 最大化后复原,有复原事件
'restore':function(){alert("restore最大化后复原事件")}, //最大化后复原事件
'collapse':function(){alert("collapse折叠事件")} //折叠事件
},
items:[{ //此容器的组建集合
id : 'username',
fieldLabel : '用户名'
},{
id : 'password',
fieldLabel : '密 码'
}],
buttons:[{ //此容器的按钮集合
text : '登陆',
handler:function(){
alert(String.format('用户名是:{0}\n密码是:{1}',Ext.getCmp('username').getValue(),Ext.getCmp('password').getValue()));
}
},{
text:'注册',
handler : function(){
alert('注册');
}
},{
text : '退出',
handler:function(){
_loginBox.hide();
}
}]
});
_loginBox.show('hello');
})
示例代码2:
Ext.onReady(function(){
var _window = new Ext.Window({
title:'测试',
layout:'form',
width:250,
labelWidth:60,
labelAlign:'right',
buttonAlign:'center',
bodyStyle:'padding:5px;',
defaults:{xtype:'textfield',width:140},
items:[{
id:'text1',
fieldLabel:'帐户'
},{
id:'text2',
fieldLabel:'密码'
}],
buttons:[{
text:'按钮',
handler:function(){
// alert(Ext.getCmp('text1').getValue()); 第一种得到容器内组建的办法,通过id
// alert(this.ownerCt.items.first().getValue()); //ownerCt属性,可以得到包含他的容器组建,容器访问其组建,可以使用items
var _collection = this.ownerCt.items;
alert(String.format('帐户:{0},密码:{1}',_collection.itemAt(0).getValue(), _collection.itemAt(1).getValue() ));
/*
这里的items属性返回的是MixedCollection集合
MixedCollection中的方法:
first() 集合的第一个元素
itemAt(Number index) 根据索引找到item元素
*/
}
}]
});
_window.show();
})
综合示例
Ext.BLANK_IMAGE_URL = './ext/resources/images/default/s.gif';
Ext.onReady(function(){
Ext.get('btn').on('click',function(){
_window.show('btn');
});
var JOB = Ext.data.Record.create([{
name:'job'
}]);
var _window = new Ext.Window({
title:'添加人员',
width:500,
// height:400,
closeAction:'hide',
resizable:false,
plain:true, //window有该属性
items:[{
baseCls:'x-plain',//panel没有plain属性,所以只能使用该样式
layout:'column',
style:'padding:5px;',
items:[{
columnWidth:.5,
layout:'form',
defaultType:'textfield',
labelWidth:55,
//labelAlign:'right',
defaults:{width:160},
baseCls:'x-plain', //panel没有plain属性,所以只能使用该样式
items:[{
fieldLabel:'姓名'
},{
fieldLabel:'年龄',
value:26,
id:'age',
readOnly:true
},{
xtype:'datefield',
fieldLabel:'出生日期',
format:'Y-m-d', //format方法
value:'1984-05-17', //默认值 这里需要注意的是:日期和月份为双数
minValue:'1970-01-01',
maxValue:'2000-01-01', //最大最小日期 默认为null
readOnly:true, //只读
listeners:{
'blur':function(_df){
/*
这里做了一个 出生日期 和 年龄 的级联
*/
var _age = _df.ownerCt.findById('age'); //获得年龄(age)框里的值
_age.setValue(new Date().getFullYear() - _df.getValue().getFullYear());
}
}
},{
fieldLabel:'联系电话'
},{
fieldLabel:'手机号码'
},{
fieldLabel:'电子邮件'
},{
fieldLabel:'性别',
xtype:'combo',
width:100,
readOnly:true,
triggerAction:'all', //该属性值默认为query,即:按照文本里面已有的内容进行匹配显示
store:new Ext.data.SimpleStore({ //设定数据
fields:['sex'],
data:[['男'],['女']]
}),
mode:'local', //combobox的读取模式 有local和remote(远程)
displayField:'sex' //指定其现实的列
}]
},{
columnWidth:.5,
layout:'form',
baseCls:'x-plain', //panel没有plain属性,所以只能使用该样式
labelWidth:60,
items:[{
id:'personImg',
xtype:'textfield',
inputType:'image', //textfield 中的inputType 可以是 image,password,或者file
fieldLabel:'个人照片' ,
width:150,
height:175,
style:'border:solid 2px #fcf'
}]
}]
},{
layout:'form',
defaultType:'textfield',
style:'padding:5px;',
baseCls:'x-plain', //panel没有plain属性,所以只能使用该样式
labelWidth:55,
defaults:{
width:395
// anchor:'90%' //锚点布局
},
items:[{
fieldLabel:'身份证号'
},{
fieldLabel:'具体地址'
},{
xtype:'panel',
anchor:'93%',
baseCls:'x-plain',
layout:'column',
items:[{
columnWidth:.48,
layout:'form',
labelWidth:55,
baseCls:'x-plain',
defaults:{xtype:'combo'},
items:[{
xtype:'combo',
id:'job',
fieldLabel:'职位',
width:140,
triggerAction:'all',
readOnly:true,
store:new Ext.data.SimpleStore({
fields:['job'],
data:[['软件工程师'],['硬件工程师'],['网路工程师']]
}),
displayField:'job',
mode:'local',
listeners:{
'select':function(_combo, _record, _index){ //select 只有在选中选项时才触发,setValue不会触发该事件
// alert(_record.get('job'));
_combo['selectItem'] = _record;
}
}
}]
},{
columnWidth:.17,
baseCls:'x-plain',
style:'float:left',
defaults:{xtype:'button'},
items:[{
text:'添加职位',
handler:function(_df){
var _window = _df.ownerCt.ownerCt;
var _job = _window.findById('job');
Ext.Msg.prompt('请输入职位的名称','职位名称',function(_btn, _msg){ //prompt组建中的函数 第一个参数可以获得点击了那个按钮,第二个参数可以获得输入的值
if(_btn == 'ok'){
var _store = this.store;
var _newStoreItem = new JOB({
job:_msg
});
_store.insert(0,_newStoreItem);
this.setValue(_msg);
this['selectItem'] = _newStoreItem;
}
},_job);
}
}]
},{
columnWidth:.17,
baseCls:'x-plain',
items:[{
xtype:'button',
text:'修改职位',
handler:function(){
var _window = this.ownerCt.ownerCt;
var _job = _window.findById('job');
if(_job['selectItem'] != null)
{
Ext.Msg.prompt('请输入修改后的职位名称','职位名称',function(_btn, _msg){ //prompt组建中的函数 第一个参数可以获得点击了那个按钮,第二个参数可以获得输入的值
if(_btn == 'ok'){
this['selectItem'].set('job',_msg);
this.setValue(_msg);
}
},_job,false,_job.getValue());
}
}}]
},{
columnWidth:.17,
baseCls:'x-plain',
items:[{
xtype:'button',
text:'删除职位',
handler:function(){
var _window = this.ownerCt.ownerCt;
var _job = _window.findById('job');
if(_job['selectItem'] != null)
{
Ext.Msg.confirm('系统提示','你确认删除当前职位吗?',function(_btn){
if(_btn == 'yes'){
this.store.remove(this['selectItem']); //删除
if(_job.store.getCount() >0){ //getCount()可以获得store中recode的数量
this.setValue(this.store.getAt(0).get('job'));
this['selectItem'] = this.store.getAt(0);
}else{
this.setValue('');
this['selectItem'] = null;
}
}
},_job);
}
}
}]
}]
}]
}],
showLocal:false, //自定义属性,以防止加载多次图片
listeners:{
/*
重要说明: 由于window内部的组建是在window show的时候才将其内部的dom元素插入页面而不是render时
*/
'show':function(_df){
if(!_window['showLocal'])
{
alert('加载图片');
_window.findById('personImg').getEl().dom.src='img/P1060188.JPG';
// _window.findByType('textfield')[7].getEl().dom.src='img/P1060188.JPG'; //所有容器都有方法findByType('xtype')[n] 可以找到容器内的item元素
_window['showLocal']=true; //将showLocal自定义属性设置为true 那么下次再show的时候就不会再重新加载了
}
var _job = _df.findById('job');
var _store = _job.store; //通过combo的属性得到其 store
_job.setValue(_store.getAt(0).get('job')); //设置初始值: _store.getAt(0)得到一行数据 get('列名') 获得具体的值
//Ext.getCmp('personImg').
_job['selectItem'] = _store.getAt(0);
}
},
buttons:[{
text:'确定',
handler:function(){
alert('第二个按钮是:'+_window.buttons[1].text); // Ext中buttons返回的是button数组
}
},{
text:'取消',
handler:function(){
_window.hide();
}
}]
});
});
综合示例2:
/// <reference path="../ext/vswd-ext_2.0.2.js" />
Ext.BLANK_IMAGE_URL = './ext/resources/images/default/s.gif';
Ext.QuickTips.init();//初始化提示信息
Ext.form.Field.prototype.msgTarget="side";//让提示信息在边上显示
Ext.onReady(function(){
Ext.applyIf(Ext.form.VTypes, {
"telphone":function(_v){ //验证函数 返回true or false
return /(^\d{3}\-\d{7,8}$)|(^\d{3}\d{7,8}$)|(^\d{4}\d{7,8}$)|(^\d{7,8}$)/.test(_v);
},
"telphoneText":"该输入项必须是电话号码格式,格式如: 0514-87315143,051487315143,87315143", //上面函数返回false时返回的提示
"telphoneMask":/[0-9\-]/i, //xxxMask为键盘可以输入的键
"mobile":function(_v){ //验证函数 返回true or false
return /^1[1-9][0-9]\d{8}$/.test(_v);
},
"mobileText":"该输入项必须是手机号码格式,格式如: 13952569274", //上面函数返回false时返回的提示
"mobileMask":/[0-9]/i //xxxMask为键盘可以输入的键
})
var JOB = Ext.data.Record.create([{
name:'job'
}]);
var _window = new Ext.form.FormPanel({
renderTo:Ext.getBody(),
title:'添加人员',
waitMsgTarget:true, //将等待进度条限制到该组件范围内
url:'http://localhost:8080/test/test_ajax.do', //url
listeners:{
'requestcomplete':function(_form, _action){ //回调函数
alert(_action.response.responseText);
}
},
errorReader:new Ext.data.XmlReader({ //reader
record:''
},[]),
frame:true,
width:500,
// height:400,
closeAction:'hide',
resizable:false,
plain:true, //window有该属性
buttonAlign:'right',
items:[{
baseCls:'x-plain',//panel没有plain属性,所以只能使用该样式
layout:'column',
style:'padding:5px;',
items:[{
columnWidth:.5,
layout:'form',
defaultType:'textfield',
labelWidth:55,
//labelAlign:'right',
defaults:{width:160},
baseCls:'x-plain', //panel没有plain属性,所以只能使用该样式
items:[{
name:'username',
fieldLabel:'姓名',
emptyText:'请输入姓名',
regex:/^[\u4e00-\u9FA5]+$/,
regexText:'只能输入汉字',
allowBlank:false,
maxLength:4,
minLength:2
},{
fieldLabel:'年龄',
value:26,
id:'age',
readOnly:true
},{
xtype:'datefield',
fieldLabel:'出生日期',
format:'Y-m-d', //format方法
value:'1984-05-17', //默认值 这里需要注意的是:日期和月份为双数
minValue:'1970-01-01',
maxValue:'2000-01-01', //最大最小日期 默认为null
readOnly:true, //只读
listeners:{
'blur':function(_df){
/*
这里做了一个 出生日期 和 年龄 的级联
*/
var _age = _df.ownerCt.findById('age'); //获得年龄(age)框里的值
_age.setValue(new Date().getFullYear() - _df.getValue().getFullYear());
}
}
},{
fieldLabel:'联系电话',
vtype:'telphone'
},{
fieldLabel:'手机号码',
vtype:'mobile'
},{
fieldLabel:'电子邮件',
vtype:'email'
},{
fieldLabel:'性别',
xtype:'combo',
width:100,
readOnly:true,
triggerAction:'all', //该属性值默认为query,即:按照文本里面已有的内容进行匹配显示
store:new Ext.data.SimpleStore({ //设定数据
fields:['sex'],
data:[['男'],['女']]
}),
mode:'local', //combobox的读取模式 有local和remote(远程)
displayField:'sex' //指定其现实的列
}]
},{
columnWidth:.5,
layout:'form',
baseCls:'x-plain', //panel没有plain属性,所以只能使用该样式
labelWidth:60,
items:[{
id:'personImg',
xtype:'textfield',
inputType:'image', //textfield 中的inputType 可以是 image,password,或者file
fieldLabel:'个人照片' ,
width:150,
height:175,
style:'border:solid 2px #fcf',
listeners:{
'render':function(){
this.getEl().dom.src='img/P1060188.JPG';
}
}
}]
}]
},{
layout:'form',
defaultType:'textfield',
style:'padding:5px;',
baseCls:'x-plain', //panel没有plain属性,所以只能使用该样式
labelWidth:55,
defaults:{
width:395
// anchor:'90%' //锚点布局
},
items:[{
fieldLabel:'身份证号'
},{
fieldLabel:'具体地址'
},{
xtype:'panel',
anchor:'93%',
baseCls:'x-plain',
layout:'column',
items:[{
columnWidth:.48,
layout:'form',
labelWidth:55,
baseCls:'x-plain',
defaults:{xtype:'combo'},
items:[{
xtype:'combo',
id:'job',
fieldLabel:'职位',
width:140,
triggerAction:'all',
readOnly:true,
store:new Ext.data.SimpleStore({
fields:['job'],
data:[['软件工程师'],['硬件工程师'],['网路工程师']]
}),
displayField:'job',
mode:'local',
listeners:{
'select':function(_combo, _record, _index){ //select 只有在选中选项时才触发,setValue不会触发该事件
// alert(_record.get('job'));
_combo['selectItem'] = _record;
}
}
}]
},{
columnWidth:.17,
baseCls:'x-plain',
style:'float:left',
defaults:{xtype:'button'},
items:[{
text:'添加职位',
handler:function(_df){
var _window = _df.ownerCt.ownerCt;
var _job = _window.findById('job');
Ext.Msg.prompt('请输入职位的名称','职位名称',function(_btn, _msg){ //prompt组建中的函数 第一个参数可以获得点击了那个按钮,第二个参数可以获得输入的值
if(_btn == 'ok'){
var _store = this.store;
var _newStoreItem = new JOB({
job:_msg
});
_store.insert(0,_newStoreItem);
this.setValue(_msg);
this['selectItem'] = _newStoreItem;
}
},_job);
}
}]
},{
columnWidth:.17,
baseCls:'x-plain',
items:[{
xtype:'button',
text:'修改职位',
handler:function(){
var _window = this.ownerCt.ownerCt;
var _job = _window.findById('job');
if(_job['selectItem'] != null)
{
Ext.Msg.prompt('请输入修改后的职位名称','职位名称',function(_btn, _msg){ //prompt组建中的函数 第一个参数可以获得点击了那个按钮,第二个参数可以获得输入的值
if(_btn == 'ok'){
this['selectItem'].set('job',_msg);
this.setValue(_msg);
}
},_job,false,_job.getValue());
}
}}]
},{
columnWidth:.17,
baseCls:'x-plain',
items:[{
xtype:'button',
text:'删除职位',
handler:function(){
var _window = this.ownerCt.ownerCt;
var _job = _window.findById('job');
if(_job['selectItem'] != null)
{
Ext.Msg.confirm('系统提示','你确认删除当前职位吗?',function(_btn){
if(_btn == 'yes'){
this.store.remove(this['selectItem']); //删除
if(_job.store.getCount() >0){ //getCount()可以获得store中recode的数量
this.setValue(this.store.getAt(0).get('job'));
this['selectItem'] = this.store.getAt(0);
}else{
this.setValue('');
this['selectItem'] = null;
}
}
},_job);
}
}
}]
}]
}]
}],
showLocal:false, //自定义属性,以防止加载多次图片
listeners:{
/*
重要说明: 由于window内部的组建是在window show的时候才将其内部的dom元素插入页面而不是render时
*/
/*
'show':function(_df){
if(!_window['showLocal'])
{
_window.findById('personImg').getEl().dom.src='img/P1060188.JPG';
// _window.findByType('textfield')[7].getEl().dom.src='img/P1060188.JPG'; //所有容器都有方法findByType('xtype')[n] 可以找到容器内的item元素
_window['showLocal']=true; //将showLocal自定义属性设置为true 那么下次再show的时候就不会再重新加载了
}
var _job = _df.findById('job');
var _store = _job.store; //通过combo的属性得到其 store
_job.setValue(_store.getAt(0).get('job')); //设置初始值: _store.getAt(0)得到一行数据 get('列名') 获得具体的值
//Ext.getCmp('personImg').
_job['selectItem'] = _store.getAt(0);
}
*/
},
buttons:[{
text:'确定',
handler:function(){
this.ownerCt.getForm().submit({waitTitle:'提交',waitMsg:'数据提交中'}); //提交
}
},{
text:'导入',
handler:function(){
//this.ownerCt.getForm().load(); //加载--还没有实现
//Ext.Msg.alert('系统提示','该功能还未实现!');
/* var _store = new Ext.data.Store();
var _data = ['name','sex']; //字段名数组
var _record = new Ext.data.Record(_data); //创建record
_record.set("name","王五"); //向_record中放值
_record.set("sex","男");
_store.add(_record);
alert('_store中有'+_store.getCount()+'条数据');
alert("姓名 : "+_store.getAt(0).get("name"));
*/
}
},{
text:'取消',
handler:function(){
this.ownerCt.getForm().reset();//reset
}
}]
});
});
1844
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
