Ext.js入门：面板（五）

最新推荐文章于 2024-07-29 13:58:45 发布

weixin_30338461

最新推荐文章于 2024-07-29 13:58:45 发布

阅读量71

点赞数

文章标签： javascript xhtml ViewUI

原文链接：http://www.cnblogs.com/sunliyuan/p/5839181.html

版权

一：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>

(带顶部，底部，脚部工具栏的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("工具栏按钮","工具栏上的关闭按钮时间被激发了")}}],

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则是加在指定元素之内。

转载于:https://www.cnblogs.com/sunliyuan/p/5839181.html

weixin_30338461

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Ext.js入门：面板（五）

一：Ext.Panel类简介二：Ext.Panel类常用属性方法与事件三：Ext.Panel实例运用1.Ext.Panel类简介类 Ext.Panel 包： Ext 定义的文件： Panel.js 类全称： Ext.Panel 继承自于： Ext.Container说明：面板是一种面向用户界面构建应用程序最佳的单元块，一种特定功能和结构化...
复制链接

扫一扫