ExtJs中window与panel的使用(一)

gongm_24 · 发表于 2013-2-8 00:28:05

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>

		自动登录	找回密码
密码			立即注册