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

 

Ext.js入门:面板(五)的更多相关文章

  1. Ext.js入门:TreePanel(九)

    一:最简单的树 二:通过TreeNode自定义静态树 三:用TreeLoader加载数据生成树 四:解决IE下非正常加载节点问题 五:使用TreeNodeUI 六:带有checkbox的树 七:编辑树 ...

  2. Ext.js入门:TabPanel组件(八)

    一:TabPanel组件简介 二:简单代码示例 三:使用iframe作为tab的标签页内容 四:动态添加tabpanel的标签页 五:为tabpanel标签页添加右键菜单 方式一: <html ...

  3. Ext.js入门:Window对象与FormPanel(六)

    一:Ext.Window类 二:Ext.Window类实例 三:Ext.FormPanel类 四:Ext.FormPanel类实例   1.类Ext.Window 包: Ext 定义的文件 Windo ...

  4. Ext.js入门:模板(四)

    1.Ext.DomHelper简介2.Template语法使用简介3.Template简单应用4.Template中使用转换函数5.使用模板的自定义接口6.XTemplate应用 一:Ext.DomH ...

  5. Ext.js入门

    一:ExtJs简介: ExtJs通常简称为Ext,它是一个非常优秀的Ajax框架,用Javascript编写,它与后台技术无关,可以用来开发具有炫丽外观的富客户端应用.Ext所开发的多彩界面吸引了许多 ...

  6. Ext JS学习第五天 Ext_window组件(一)

    此文来记录学习笔记 •第一个组件:Ext.window.Window.对于组件,也就是Ext最吸引开发者的地方,那么我们要真正的使用Ext的组件,首先必须学会阅读API文档. –xtype:组件的别名 ...

  7. Ext JS学习第五天 我们所熟悉的javascript(四)

    此文用来记录学习笔记: •javascript之对象.面向对象 •可能对于高级语言你可能了解甚至精通OOP面向对象,那么对于javascript你又熟悉多少呢?我们一起来学习javascript面向对 ...

  8. Ext.js入门:常用组件与综合案例(七)

    一:datefield简单示例 二:timefield简单示例 三:numberfield简单示例 四:FormPanel提交   datefield简单示例: <html xmlns=&quo ...

  9. Ext.js入门(二)

        ExtJs OOP基础 一:ExtJs中的面向对象 1.ExtJs中命名空间的定义        Ext中的命名空间类似于C#中的namespace和java中的包,用来对工程中的类进行更好的 ...

随机推荐

  1. 学习windows编程 day4 之 映射模式

    LRESULT CALLBACK WndProc(HWND hwnd, UINT message, WPARAM wParam, LPARAM lParam) { HDC hdc; PAINTSTRU ...

  2. FZU - 1989 AntiAC

     Problem 1989 AntiAC Accept: 93    Submit: 444Time Limit: 4000 mSec    Memory Limit : 32768 KB  Prob ...

  3. QMouseEvent鼠标事件

    Qt中的QMouseEvent一般只涉及鼠标左键或右键的单击.释放等操作,而对鼠标滚轮的响应则通过QWheeEvent来处理

  4. slice() 和splice()

    splice() 方法与 slice() 方法的作用是不同的,splice() 方法会直接对数组进行修改. 1, splice() 方法向/从数组中添加/删除项目,然后返回被删除的项目. splice ...

  5. P3806 【模板】点分治1(CDQ分治)

    题目链接:https://www.luogu.org/problemnew/show/P3806 题目大意:中文题目 具体思路:直接dfs好像会超时,然后我们就开始想优化的方法,然后就是一个CDQ入门 ...

  6. 电子邮件和URL输入控件

    HTML5还引入了让用户输入邮箱地址和URL的输入控件.那些不支持这类输入控件的浏览器会把他们当成普通文本框来处理. <!DOCTYPE html> <!-- To change t ...

  7. 当WebView运行在特权进程时抛出安全异常,Hook方式解决方案(包含对Android 8.0的处理)

    1.问题起源报错语句是:java.lang.UnsupportedOperationException: For security reasons, WebView is not allowed in ...

  8. 使用xmanager图形化远程连接rhel6

    使用xmanager图形化远程连接rhel6 xmanager中Xbrowser可以提供图形化桌面远程.和vnc比,可以类似于本地一样用户切换. 操作步骤: linux服务端: 1:查看/etc/in ...

  9. proc文件系统、sysfs文件系统、kobject操作

    Proc文件系统是提供一个接口给用户,让用户可以查看系统运行的一些状态信息,让用户修改内核的一些参数,比方说printk的打印级别就可以通过proc去修改 Sysfs文件系统, Sysfs is a ...

  10. java多线程系列五、并发容器

    一.ConcurrentHashMap 1.为什么要使用ConcurrentHashMap 在多线程环境下,使用HashMap进行put操作会引起死循环,导致CPU利用率接近100%,HashMap在 ...