panel组件学习(一)常见属性学习

?1）?、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元素里面
??? 16.contentEl：（id）呈现哪个html元素里面，把el内的内容呈现
??? 17.renderTo：（id）呈现在哪个html元素里面 //关于这三个参数的区别(个人认为：applyTo和RenderTo强调to到html元素中，contentEl则是html元素到ext组件中去)：

Ext.onReady(function(){
??? var p=new Ext.Panel({
??? ??? ??? id:"panel1", title:"标题",
??? ??? ??? collapsible:true,
??? ??? ??? renderTo:"container",
??? ??? ??? closable:true,
??? ??? ??? width:300,
??? ??? ??? height:200,
??? ??? ??? tbar:[{text:"按钮1"},{text:"按钮2"}], //顶部工具栏
??? ??? ??? bbar:[{text:"按钮1"},{text:"按钮2"}], //底部工具栏
??? ??? ??? html:"内容",
??? ??? ??? buttons:[{//footer部工具栏
??? ??? ??? ??? ??? text:"按钮1",
??? ??? ??? ??? ??? handler:function(){
??? ??? ??? ??? ??? ??? Ext.MessageBox.alert("我是按钮1","我是通过按钮1激发出来的弹出框！")
??? ??? ??? ??? ??? }
??? ??? ??? ??? },{
??? ??? ??? ??? ??? text:"按钮2"
??? ??? ??? ??? }
??? ??? ??? ],
??? ??? ??? tools:[{id:"save"},
??? ??? ??? ??? ??? {id:"help"},
??? ??? ??? ??? ??? {id:"up"},
??? ??? ??? ??? ??? {id:"close",handler:function(){
??? ??? ??? ??? ??? ??? Ext.MessageBox.alert("工具栏按钮","工具栏上的关闭按钮时间被激发了")}
??? ??? ??? ??? ??? }
??? ??? ??? ]
??? });

})

tools工具栏中的id枚举值为：