Ext.js入门：面板（五）

一：Ext.Panel类简介

二：Ext.Panel类常用属性方法与事件

三：Ext.Panel实例运用

1.Ext.Panel类简介

类 Ext.Panel

包： Ext

定义的文件： Panel.js

类全称： Ext.Panel 继承自于： Ext.Container

说明：面板是一种面向用户界面构建应用程序最佳的单元块，一种特定功能和结构化组件。

面板包含有底部和顶部的工具条，连同单独的头部、底部和body部分。它提供内建都得可展开和可闭合的行为，

连同多个内建的可制定的行为的工具按钮。面板可简易地置入任意的容器或布局，而面板和渲染管线（rendering pipeline）则由框架完全控制。

2.实例：

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link href="Ext/resources/css/ext-all.css" rel="stylesheet" type="text/css" />
    <script src="Ext/adapter/ext/ext-base.js" type="text/javascript"></script>
    <script src="Ext/ext-all.js" type="text/javascript"></script> 
    <script type="text/javascript">
        Ext.onReady(function() {
            var p = new Ext.Panel({
                title: "My Panel",
                collapsible: true,
                x: 100,
                y: 100,
                width: 400,
                height: 300,
                floating: true, //设置面板浮动
                frame: true, //设置完全透明和阴影效果
                //draggable:true,
                draggable: {
                    insertProxy: false, //去掉虚边框
                    onDrag: function(e) {
                        var pel = this.proxy.getEl();  //得到当前的元素
                        this.x = pel.getLeft(true); //得到拖动时新的panel的x轴坐标
                        this.y = pel.getTop(true); //得到拖动时新的panel的y轴坐标
                        var s = this.panel.getEl().shadow; //得到拖动panel时的阴影对象
                        if (s) {
                            s.realign(this.x, this.y, pel.getWidth(), pel.getHeight());
                            //设置阴影和新的panel一致
                        }
                    },
                    endDrag: function(e) {
                        this.panel.setPosition(this.x, this.y);
                    }
                },
                html: "<p>我是内容</p>",
                renderTo: "container",
                buttonAlign: "center",

                tbar: [{ text: "工具栏1" }, { text: "工具栏2", handler: function() { alert("ok"); } }],
                bbar: [{ text: "状态栏1" }, { text: "状态栏2", handler: function() { alert("状态栏2"); } }],
                buttons: [{ text: "注册" }, { text: "退出", handler: function() { p.hide(); } }],
                tools:[{id:"save"},{id:"help"},{id:"up"},{id:"close",handler:function(){Ext.MessageBox.alert("工具栏按钮","工具栏上的关闭按钮时间被激发了")}}]

            });

            //alert(document.getElementById("container").outerHTML);

            // p.render("container");

        });
    </script>  
</head>
<body>
   <div id="container"></div>
</body>
</html>

aaarticlea/png;base64,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" alt="" />

(带顶部，底部，脚部工具栏的panel ):

           var p=new Ext.Panel({

                    id:"panel1",

                    title:"标题",

                    collapsible:true,

                    renderTo:"container",

                    closable:true,

                    width:400,

                    height:300,

                    tbar:[{text:"按钮1"},{text:"按钮2"}], //顶部工具栏

                    bbar:[{text:"按钮1"},{text:"按钮2"}],  //底部工具栏

                    html:"内容",

                    buttons: [{ text: "按钮1" }, { text: "按钮2"}] //footer部工具栏

               });

（标准Panel工具栏）

//添加下面的代码到panel配置参数中tools:
[{id:"save"},{id:"help"},{id:"up"},{id:"close",handler:function(){Ext.MessageBox.alert("工具栏按钮","工具栏上的关闭按钮时间被激发了")}}],

aaarticlea/png;base64,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" alt="" />

3.Ext.Panel类常用属性方法与事件

panel组件的子类组件包括TabPanel,GridPanel,

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

//配置参数(只列举部分常用参数)
1.autoLoad：有效的url字符串，把那个url中的body中的数据加载显示，但是可能没有样式和js控制，只是html数据
2.autoScroll:设为true则内容溢出的时候产生滚动条，默认为false
3.autoShow:设为true显示设为"x-hidden"的元素，很有必要，默认为false

4.bbar:底部条，显示在主体内，//代码：bbar:[{text:'底部工具栏bottomToolbar'}],
5.tbar:顶部条，显示在主体内，//代码:tbar:[{text:'顶部工具栏topToolbar'}],

}6.buttons:按钮集合，自动添加到footer中（footer参数，显示在主体外）//代码：buttons:[{text:"按钮位于footer"}]
7.buttonAlign:footer中按钮的位置，枚举值为："left","right","center",默认为right

8.collapsible：设为true，显示右上角的收缩按钮，默认为false
9.draggable:true则可拖动，但需要你提供操作过程，默认为false

10.html:主体的内容
11.id：id值，通过id可以找到这个组件，建议一般加上这个id值
12.width：宽度
13.height：高度
13.title:标题

14.titleCollapse：设为true，则点击标题栏的任何地方都能收缩，默认为false.
15.applyTo：（id）呈现在哪个html元素里面
17.renderTo：（id）呈现在哪个html元素里面
注：

1、renderTo与render方法对应
2、applyTo与applyToMarkup方法对应

简单的说，

applyTo是将组件加在了指定元素之后，

而renderTo则是加在指定元素之内。