3、Ext组件Panel面板使用

来源：互联网发布：山寨币源码编辑：程序博客网时间：2024/04/30 00:41

先写一个demo

创建panel.html

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title><!-- 第一步引入Ext的样式文件 --><link type="text/css" rel="stylesheet"href="ext-3.4.1/resources/css/ext-all.css"></link><!-- 引入Ext库文件，底层驱动 --><script src="ext-3.4.1/adapter/ext/ext-base.js"></script><!-- 引入ext-all --><script src="ext-3.4.1/ext-all.js"></script><script src="panel.js"></script></head><body><div id="p"></div></body></html>

创建panel.js

var panel;// 更新页面里面的组件function updatePanel1() {    panel.add({                title : "面板2"            });    var p2 = panel.getComponent(2);    alert(p2.title);    panel.remove(p2);    panel.doLayout();    alert("添加成功");}Ext.onReady(function() {    var btn = new Ext.Button({                text : "按钮1"            });    panel = new Ext.Panel({                width : 500,                height : 400,                collapsible : true,                tools : [{                            id : "save"                        }, {                            id : "print",                            handler : function() {                                window.print();                            }                        }],                // 顶部工具栏toptoolbar                tbar : [{                            text : "保存"                        }, {                            text : "关闭"                        }],                // 底部工具栏bottomtoolbar                bbar : [{                            text : "添加内容",                            handler : updatePanel1                        }, {                            text : "更新内容",                            handler : function() {                                // panel.load("news2.html");                                panel.body.update("<h1>新的内容</h1>" + new Date());                            }                        }],                title : "我的面板",                buttonAlign : "center",                // 这是bottom                buttons : [{                            text : "确定"                        }, {                            text : "取消"                        }],                // html:"<h1>这是面板的Body区域</h1>"                // autoLoad:"news.html"                items : [btn, {                            xtype : "button",                            text : "按钮2"                        }, {                            title : "面板3",                            height : 100,                            border : true                        }]            });    // render后面的参数可以是一个字符串代表id，或者是dom节点，或者是Ext.get返回的一个Element    // panel.render("p");    new Ext.Viewport({                layout : "border",                items : [{                            region : "north",                            height : 100,                            title : "顶部工具Logo及Banner"                        }, {                            region : "west",                            width : 150,                            title : "菜单位"                        }, {                            region : "center",                            title : "主区域"                        }]            });});

执行效果如下：
这里写图片描述

知识点解析

collapsible

True表示为面板是可收缩的，并自动渲染一个展开/收缩的轮换按钮在头部工具条。false表示为保持面板为一个静止的尺寸（缺省为false）。

tools

一个按钮配置组成的数组，加入到头部的工具条区域。渲染过程中，每一项工具都保存为Element对象，都集中保存在属性tools.之中。每个工具配置可包含下列属性：

id: String 必须要的

toggle 当collapsible为true时自动创建。(Created by default when collapsible is true)

close

minimize

maximize

restore

gear

pin

unpin

right

left

up

down

refresh

minus

plus

help

search

save

print

handler: Function 必须要的，点击后执行的函数。它传入的参数有：

event：单击事件

toolEL：工具元素

panel：面板

tc

tbar

面板顶部的工具条。此项可以是Ext.Toolbar的实例、工具条的配置对象，或由按钮配置项对象构成的数组，以加入到工具条中。注意，此项属性渲染过后就不可用了，应使用getTopToolbar的方法代替。

bbar

面板底部的工具条。此项可以是Ext.Toolbar的实例、工具条的配置对象，或由按钮配置项对象构成的数组，以加入到工具条中。注意，此项属性渲染过后就不可用了，应使用getBottomToolbar的方法代替。

buttonAlign

在此面板上的按钮的对齐方式,有效值是’right,’ ‘left’ and ‘center’（默认为 ‘right’）。

getComponent( String/Number comp )

由id或索引直接返回容器的子组件。
参数项：

comp：String/Number
子组件的id或index

返回值：

Ext.component
Ext.Component

remove( Component/String component , Boolean autoDestroy )

从此容器中移除某个组件。执行之前触发beforeremove事件，移除完毕后触发remove事件。

doLayout( Boolean shallow )

重新计算容器的布局尺寸。当有新组件加入到已渲染容器或改变子组件的大小/位置之后，就需要执行此函数。
参数项：

shallow : Boolean （可选的）True表示只是计算该组件的布局，而子组件则有需要才自动计算（默认为false每个子容器就调用doLayout）。

0 0