Extjs:Window之窗口创建

来源：互联网发布：cisco 端口turnk配置编辑：程序博客网时间：2024/05/21 17:27

创建一个窗口

Ext.onReady(function(){//Ext.create方法相当于创建一个实例对象Ext.create('Ext.window.Window',{title:'我的第一个组件,window' ,width:400 , //Number型  也可以是字符串类型  width: '90%'height:300 ,layout:'fit' ,constrain:true ,//限制窗口不超出浏览器边界modal:true ,//设置一个模态窗口//plain:true ,//窗体主体部分背景颜色透明icon:'...',//字符串参数,图片的路径//iconCls:'' ,   //CSS样式x:50 ,                           //起始位置y:50 ,                          //起始位置autoScroll:true,//添加滚动条html:'<div style=width:200px;height:200px>我是一个div</div><div style=width:200px;height:200px>我是第二个div</div>' ,//constrainHeader:true,//不允许该窗口的title超出浏览器边界renderTo:Ext.getBody()//新创建的组件 渲染到什么位置}).show();});

点击一个按钮 ,打开一个新的窗体 window重复创建的问题

//第一种实现

//JQuery code: var btn = $('#btn'); var dombtn = btn.get(0);

var btn = Ext.get('btn');//这个元素是经过Ext包装的一个Ext的Dom对象//alert(btn.dom.value);

btn.on('click',function(){

if(!Ext.getCmp('mywin')){

Ext.create('Ext.window.Window',{

id:'mywin' ,//如果你给组件加了一个id 那么这个组件就会被Ext所管理

title:'新窗体' ,

height:300 ,

width:400 ,

renderTo:Ext.getBody() //,

//modal:true //也可以通过设置模态窗口,使得按钮无法被多次点击

}).show();

}

});

第二种实现
var win = Ext.create('Ext.window.Window',{

title:'新窗体' ,

height:300 ,

width:400 ,
renderTo:Ext.getBody() ,

closeAction:'hide' //closeAction默认是destroy

});

Ext.get('btn').on('click',function(){

win.show();

});

}

点击一个按钮 ,打开一个新的窗体 window重复创建的问题

//第一种实现

{CSDN:CODE:

//JQuery code: var btn = $('#btn'); var dombtn = btn.get(0);

var btn = Ext.get('btn');//这个元素是经过Ext包装的一个Ext的Dom对象//alert(btn.dom.value);

btn.on('click',function(){

if(!Ext.getCmp('mywin')){

Ext.create('Ext.window.Window',{

id:'mywin' ,//如果你给组件加了一个id 那么这个组件就会被Ext所管理

title:'新窗体' ,

height:300 ,

width:400 ,

renderTo:Ext.getBody() //,

//modal:true //也可以通过设置模态窗口,使得按钮无法被多次点击

}).show();

}

});

}

第二种实现

{CSDN:CODE:

var win = Ext.create('Ext.window.Window',{

title:'新窗体' ,

height:300 ,

width:400 ,
renderTo:Ext.getBody() ,

closeAction:'hide' //closeAction默认是destroy

});

Ext.get('btn').on('click',function(){

win.show();

});

}

0 0