ExtJs中window与panel的应用(一)
日期：2014-05-16 浏览次数：20446 次
ExtJs中window与panel的使用(一)
extjs的语法很像java，对于这些组件的使用基本都是面向对象的。今天这部分内容，和swing 非常相似。
现亮一个window给大家看看：
对于这种var win = new Ext.Window()方式创建对象是不是感觉很亲切？
看看就这么2行代码产生的效果吧：
漂亮并不需要写多少代码。其实这里还有很多可以添加的效果，比如常见的：
plain:true,（默认不是）
resizable:false,(是否可以改变大小，默认可以)
maximizable:true,（是否增加最大化，默认没有）
draggable:false,（是否可以拖动，默认可以）
minimizable:true,（是否增加最小化，默认无）
closable:false,（是否显示关闭，默认有关闭）
//几个前面没有介绍的参数
1.closeAction:枚举值为：close(默认值)，当点击关闭后，关闭window窗口 hide,关闭后，只是hidden窗口
3.constrain：true则强制此window控制在viewport，默认为false
4.modal:true为模式窗口，后面的内容都不能操作，默认为false
5.plain：//true则主体背景透明，false则主体有小差别的背景色，默认为false
而pannel 和window是差不多的，比如构造参数我都可以直接通用:
extjs的语法很像java，对于这些组件的使用基本都是面向对象的。今天这部分内容，和swing 非常相似。
现亮一个window给大家看看：
<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd" >
< html >
< head >
< meta http-equiv ="Content-Type" content ="text/html; charset=UTF-8" />
< link rel ="stylesheet" type ="text/css" href ="ext/resources/css/ext-all.css" >
< script type ="text/javascript" src ="ext/ext-base.js" ></ script >
< script type ="text/javascript" src ="ext/ext-all.js" ></ script >
< title > 学习ExtJS之Panel </ title >
< script type ="text/javascript" >
Ext.onReady( function ()
{
var win = new Ext.Window(
{
title: " 标题 " ,
width: 300 ,
height: 200 ,
html:' < h1 > hello,my name is 274 !</ h1 > '
});
win.show();
});
</ script >
</ head >
< body >
</ body >
</ html >
对于这种var win = new Ext.Window()方式创建对象是不是感觉很亲切？
看看就这么2行代码产生的效果吧：
漂亮并不需要写多少代码。其实这里还有很多可以添加的效果，比如常见的：
plain:true,（默认不是）
resizable:false,(是否可以改变大小，默认可以)
maximizable:true,（是否增加最大化，默认没有）
draggable:false,（是否可以拖动，默认可以）
minimizable:true,（是否增加最小化，默认无）
closable:false,（是否显示关闭，默认有关闭）
//几个前面没有介绍的参数
1.closeAction:枚举值为：close(默认值)，当点击关闭后，关闭window窗口 hide,关闭后，只是hidden窗口
3.constrain：true则强制此window控制在viewport，默认为false
4.modal:true为模式窗口，后面的内容都不能操作，默认为false
5.plain：//true则主体背景透明，false则主体有小差别的背景色，默认为false
而pannel 和window是差不多的，比如构造参数我都可以直接通用:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css">
<script type="text/javascript" src="ext/ext-base.js"></script>
<script type="text/javascript" src="ext/ext-all.js"></script>
<title>学习ExtJS之Panel</title>
<script type="text/javascript">
Ext.onReady(function()
{
var panel = new Ext.Panel(
{
title:"标题",
width:300,
height:200,
html:'<h1>hello,my name is 274!</h1>'
});
//win.show();
panel.render("hello");
});
</script>
<style>
body
{
padding:40px;
}
</style>
</head>
<body>
<div id="hello">
</div>
</body>
</html>
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
