Extjs4.0.7中的Window 的 frame 属性的问题

最新推荐文章于 2015-08-17 11:40:50 发布

原创最新推荐文章于 2015-08-17 11:40:50 发布 · 266 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#ext #js #javascript #extjs4 #ViewUI

Extjs 专栏收录该内容

1 篇文章

订阅专栏

本文探讨了在ExtJS4.0.7中使用Window组件时，frame属性对窗口显示效果的影响。通过对比设置frame为true和false的情况，展示了窗口的不同呈现方式，并提供了相关代码示例和对应的效果图，帮助开发者理解这一特性的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在Extjs4.0.7中Ext.window.Window设置frame：true的会出现问题
js代码



// JavaScript Document

Ext.onReady(function(){

					var _window = Ext.create('Ext.window.Window',{
									id:"loginWindow",
									title:'登录',		
									frame:true,
									width:230,		
									height:120,									
									plain:true,
									labelWidth:45,		
									resizable:false,
									buttonAlign:'center',
									collapsed:true,
									closeAction:'hide',
									defaults:{
										xtype:'textfield',
										width:180
									},		
									bodyStyle:{
										padding:'3px'
									},
									items:[
										{
											id:"account",
											fieldLabel:"帐号",
											width:300
										},{

											fieldLabel:"密码",
											id:'password',
											inputType:"password",
											width:300
										}
									],
									buttons:[
										{
											text:'确定',
											handler:function(){
												var account = Ext.getCmp("account").getValue();
												var password = Ext.getCmp("password").getValue();
												alert("用户名:" + account + " ,密码:" + password);
											}
										},{
											text:'取消',
											handler:function(){
												_window.hide();
											}
										}
									],
									listeners:{
										'show':function(){
											alert("窗体显现");	
										},
										'hide':function(){
											alert("窗体隐藏");
										},
										'close':function(){
											alert("窗体关闭");
										}
									}
						});		


						_window.show();	






});

效果图1：

[img]http://dl.iteye.com/upload/attachment/0067/3796/fb396e23-248e-3531-a7e6-21658b323e19.jpg[/img]

当设置frame:false


// JavaScript Document

Ext.onReady(function(){

					var _window = Ext.create('Ext.window.Window',{
									id:"loginWindow",
									title:'登录',		
									frame:false,
									width:230,		
									height:120,									
									plain:true,
									labelWidth:45,		
									resizable:false,
									buttonAlign:'center',
									collapsed:true,
									closeAction:'hide',
									defaults:{
										xtype:'textfield',
										width:180
									},		
									bodyStyle:{
										padding:'3px'
									},
									items:[
										{
											id:"account",
											fieldLabel:"帐号",
											width:300
										},{

											fieldLabel:"密码",
											id:'password',
											inputType:"password",
											width:300
										}
									],
									buttons:[
										{
											text:'确定',
											handler:function(){
												var account = Ext.getCmp("account").getValue();
												var password = Ext.getCmp("password").getValue();
												alert("用户名:" + account + " ,密码:" + password);
											}
										},{
											text:'取消',
											handler:function(){
												_window.hide();
											}
										}
									],
									listeners:{
										'show':function(){
											alert("窗体显现");	
										},
										'hide':function(){
											alert("窗体隐藏");
										},
										'close':function(){
											alert("窗体关闭");
										}
									}
						});		


						_window.show();	






});