ExtJs中window与panel的应用(一) _JavaScript

ExtJs中window与panel的使用(一)
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>