ExtJs中window与panel的使用(一)

gongm_24

浏览: 144003 次
性别:
来自: 深圳

最近访客更多访客>>

mittermeyer

smilefei

zgycsmb

alex079

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

JS_ExtJS

EXT JavaScript CSS HTML Swing

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>

分享到：

ExtJS入门-HelloWorld | ExtJS入门-设置基础页

2010-11-29 17:30
浏览 1377
评论(1)
分类:Web前端
查看更多

1 楼 a744273237 2015-05-10

对的,说的很好 .

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论