Ext.js入门：面板（五）

Ext.js入门：面板（五）

一：Ext.Panel类简介

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

三：Ext.Panel实例运用

1.Ext.Panel类简介

Ext.Panel

包： Ext

定义的文件： Panel.js

Ext.Panel 继承自于： Ext.Container

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

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

2.实例：

(带顶部，底部，脚部工具栏的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:标题

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

简单的说，

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

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

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。