目标：

      了解ExtJS中panel的组件

       在vs项目中应用panel组件

       扩展Extjs中panel功能

　　  介绍继承与panel的子组件及其应用

内容：

      面板包括5个部分：header,tbar,body,bbar,buttons

      panel作为面板组件在项目中出现，可以作为其他组件的容器

      panel组件的子类组件包括TabPanel,GridPanel,FormPanel,TreePanel组件，

      所以非常有必要介绍Panel组件的配置参数和相关的属性、方法。

panel组件的属性 
 1 1.autoLoad：有效的url字符串，把那个url中的body中的数据加载显示，但是可能没有样式和js控制，只是html数据
 2  2.autoScroll:设为true则内容溢出的时候产生滚动条，默认为false
 3  3.autoShow:设为true显示设为"x-hidden"的元素，很有必要，默认为false
 4  4.bbar:底部条，显示在主体内，//代码：bbar:[{text:'底部工具栏bottomToolbar'}],
 5  5.tbar:顶部条，显示在主体内，//代码:tbar:[{text:'顶部工具栏topToolbar'}],
 6 6.buttons:按钮集合，自动添加到footer中（footer参数，显示在主体外）//代码：buttons:[{text:"按钮位于footer"}]
 7 7.buttonAlign:footer中按钮的位置，枚举值为："left","right","center",默认为right
 8 8.collapsible：设为true，显示右上角的收缩按钮，默认为false
 9 9.draggable:true则可拖动，但需要你提供操作过程，默认为false
10 10.html:主体的内容
11 11.id：id值，通过id可以找到这个组件，建议一般加上这个id值
12 12.width：宽度
13 13.height：高度
14 13.title:标题
15 14.titleCollapse：设为true，则点击标题栏的任何地方都能收缩，默认为false.
16 15.applyTo：（id）呈现在哪个html元素里面
17 16.contentEl：（id）呈现哪个html元素里面，把el内的内容呈现
18 17.renderTo：（id）呈现在哪个html元素里面
19

 实例讲解：

<script type="text/javascript">
    function Read1() {
        var json={
        Name:"陈建强",
        Sex:"男",
        Age:26,
        Married:false,
        Marks:[
        { name:"语文",Mark:90},
        { name:"数学",Mark:98}
        ],
        Address:{
        City:"武汉",
        Street:"光谷大道"
        }
        }
        var MyPanel=new Ext.Panel({
            title:"面板应用",
            collapsible:true,
            titleCollapse:true,
            renderTo:Ext.getBody(),
            x:500,
            y:50,
            width:300,
            height:200,
            frame:true,
            floating:true,//当设置floating为true时x,y项才有效
            draggable:true,
            html:"<font color='red'>用户名:"+json.Name+"</font>"+'<br>'+"年龄:"+json.Age+"<br>数学成绩:"+json.Marks[1].Mark+"<br>所在地址:"+json.Address.City+json.Address.Street
           
        });
       
        
    }
    Ext.onReady(Read1);
    </script>

    在上面的javascript代码中我们可以看到定义了一个Read1方法里面又定义了一个json变量和一个panel变量

    其中json的介绍我们在第二课中已经介绍了不在赘述

    对于panel是我们定义的一个面板对象 var Mypanel=new Ext.panel(Config配置属性项)

    注意：当floating:true时x,y项才有用，当frame:true时园角边框出现同时内容背景面板改变颜色

    title:标题

    width:宽度

    height:高度

    x:面板在网页x坐标

    y:面板在网页Y左边

    html:面板内容

    frame:ture 园角边框

    draggable:true  是否可以拖动面板  但是不可以定位

    titleCollapse:true  点击标题栏收缩面板

    collapsible:true  显示收缩按钮

    renderto:id1  在id1上显示面板

    ApplyTo:id1  在id1后面显示面板

    autoLoad:url   自动加载url页面内容到面板

    autoScroll:ture  自动出现滚动条

    autoShow:ture  显示x-hidden

    tbar:顶部栏

    bbar:顶部栏

    buttons:按钮集

    buttonAlign:按钮对其

效果图显示：

toos:[{id:'save'},{id:'help'},{id:right},{id:left}] //自定义面板右上角按钮

items:[{new Ext.button({text:'按钮'})}]  //为面板添加组件

contentEl:id2,

autoLoad:Data5.html, //不好加载aspx页面数据

面板体加载资源的方法：加载内部资源用contentEl:id,  加载外部资源用autoLoad:url

 设计可以拖动的面板：只要改写draggable 和 endDrag 属性就可以了

 draggable:{
                   insertProxy: false,//拖动时不虚线显示原始位置
                   onDrag : function(e){
                    var pel = this.proxy.getEl();
                       this.x = pel.getLeft(true);
                       this.y = pel.getTop(true);//获取拖动时panel的坐标
            var s = this.panel.getEl().shadow;
            if (s){
                s.realign(this.x, this.y, pel.getWidth(), pel.getHeight());
            }
            },
            endDrag : function(e){
                      this.panel.setPosition(this.x, this.y);//移动到最终位置
                }
            }

本课源码：

代码 
  1 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Ext5.aspx.cs" Inherits="EXT1.Ext5" %>
  2 
  3 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  4 
  5 <html xmlns="http://www.w3.org/1999/xhtml" >
  6 <head runat="server">
  7     <title>第五课,ExtJS中面板应用</title>
  8     <script src="ext-3.2.0/adapter/ext/ext-base.js" type="text/javascript"></script>
  9     <link href="ext-3.2.0/resources/css/ext-all.css" rel="stylesheet" type="text/css" />
 10     <script src="ext-3.2.0/ext-all.js" type="text/javascript"></script>
 11     <script type="text/javascript">
 12     function Read1() {
 13         var json={
 14         Name:"陈建强",
 15         Sex:"男",
 16         Age:26,
 17         Married:false,
 18         Marks:[
 19         { name:"语文",Mark:90},
 20         { name:"数学",Mark:98}
 21         ],
 22         Address:{
 23         City:"武汉",
 24         Street:"光谷大道"
 25         }
 26         }
 27         var MyPanel=new Ext.Panel({
 28             title:"面板应用",
 29             collapsible:true,
 30             titleCollapse:true,
 31             renderTo:Ext.getBody(),
 32             x:500,
 33             y:50,
 34             width:300,
 35             height:200,
 36             frame:true,
 37             floating:true,//当设置floating为true时x,y项才有效
 38             draggable:{ 
 39                    insertProxy: false,//拖动时不虚线显示原始位置 
 40                   onDrag : function(e){ 
 41                     var pel = this.proxy.getEl(); 
 42                        this.x = pel.getLeft(true); 
 43                        this.y = pel.getTop(true);//获取拖动时panel的坐标 
 44             var s = this.panel.getEl().shadow; 
 45             if (s){ 
 46                 s.realign(this.x, this.y, pel.getWidth(), pel.getHeight()); 
 47             } 
 48             }, 
 49             endDrag : function(e){ 
 50                       this.panel.setPosition(this.x, this.y);//移动到最终位置 
 51                 } 
 52             },
 53             html:"<font color='red'>用户名:"+json.Name+"</font>"+'<br>'+"年龄:"+json.Age+"<br>数学成绩:"+json.Marks[1].Mark+"<br>所在地址:"+json.Address.City+json.Address.Street
 54             
 55         });
 56     }
 57     function Read2() {
 58         var json={
 59         Name:"陈建强",
 60         Sex:"男",
 61         Age:26,
 62         Married:false,
 63         Marks:[
 64         { name:"语文",Mark:90},
 65         { name:"数学",Mark:98}
 66         ],
 67         Address:{
 68         City:"武汉",
 69         Street:"光谷大道"
 70         }
 71         }
 72         var MyJson={
 73             title:"面板应用",
 74             width:400,
 75             height:300,
 76             x:500,
 77             y:50,
 78             floating:true,
 79             applyTo:id1,
 80             //frame:true,
 81             draggable:true,
 82             titleCollapse:true,//只有当设置了collapsible:true是此属性才有意义
 83             collapsible:true,
 84             bbar:[{text:'状态栏'},{text:'状态栏2'}],
 85             tbar:[{text:'工具栏'}],
 86             tools:[{id:'toggle'},{id:'close'},{id:'maximize'},{id:'save'},{id:'refresh'}],
 87             bodystyle:'background-color:#FFBFEE',
 88             buttons:[new Ext.Button({text:'底部'})],
 89             bodyBorder:true,
 90             //contentEl:id2,
 91             autoLoad:'MyPages/Data5.html',//<a href="MyPages/Data5.aspx">MyPages/Data5.aspx</a>
 92             
 93             html:"<font color='red'>用户名:"+json.Name+"</font>"+'<br>'+"年龄:"+json.Age+"<br>数学成绩:"+json.Marks[1].Mark+"<br>所在地址:"+json.Address.City+json.Address.Street
 94         };
 95         var MyPanel=new Ext.Panel(MyJson).show();
 96     }
 97     function Read3() {
 98         var Mypanel=new Ext.Panel({
 99            title:'Extjs面板应用',
100            html:'面板内容', 
101            floating:true,
102            x:450,
103            y:50,
104            //modal:true,
105            width:450,
106            height:350,
107            renderTo:Ext.getBody(),
108            frame:true,
109            collapsible:true,
110            titleCollapse:true,
111            draggable:{ 
112                    insertProxy: false,//拖动时不虚线显示原始位置 
113                   onDrag : function(e){ 
114                     var pel = this.proxy.getEl(); 
115                        this.x = pel.getLeft(true); 
116                        this.y = pel.getTop(true);//获取拖动时panel的坐标 
117             var s = this.panel.getEl().shadow; 
118             if (s){ 
119                 s.realign(this.x, this.y, pel.getWidth(), pel.getHeight()); 
120             } 
121             }, 
122             endDrag : function(e){ 
123                       this.panel.setPosition(this.x, this.y);//移动到最终位置 
124                 } 
125             },
126             autoLoad:'MyPages/Data5.html',//加载了外部资源后html属性内容无效了
127             contentEl:id2,//加载的内部资源时html属性内容有效
128             tbar:[{text:"打开",handler:Read1},{text:"保存"},{text:"关闭"}],
129             bbar:[{text:"状态1"},{text:"状态2"},{text:"状态3"}],
130             buttons:[{text:"按钮1", handler:Read1},{text:"按钮2"}],
131             //buttonsAlign:'right',
132             tools:[{id:'save'},{id:'help',handler:function () {alert("你需要我的帮助");}}]
133         });
134     }
135     Ext.onReady(Read3);
136     </script>
137 </head>
138 <body>
139     <form id="form1" runat="server">
140     <div   id="id1">
141     
142     </div>
143     <div id="id2" visible=true>
144     
145     </div>
146     </form>
147 </body>
148 </html>
149