ExtJs20学习系列--ExtPanel.doc

ExtJs2.0学习系列(2)--Ext.Panel 今天介绍extjs中的Panel组件。 //html代码div?id=container????/div //js代码var?p?=?new?Ext.Panel({????????title:?My?Panel,//标题????????collapsible:true,//右上角上的那个收缩按钮，设为false则不显示????????renderTo:?container,//这个panel显示在html中id为container的层中????????width:400,????????height:200,????????html:?p我是内容，我包含的html可以被执行！/p//panel主体中的内容，可以执行html代码????}); //配置参数(只列举部分常用参数)1.autoLoad：有效的url字符串，把那个url中的body中的数据加载显示，但是可能没有样式和js控制，只是html数据2.autoScroll:设为true则内容溢出的时候产生滚动条，默认为false3.autoShow:设为true显示设为x-hidden的元素，很有必要，默认为false4.bbar:底部条，显示在主体内，//代码：bbar:[{text:底部工具栏bottomToolbar}],5.tbar:顶部条，显示在主体内，//代码:tbar:[{text:顶部工具栏topToolbar}],6.buttons:按钮集合，自动添加到footer中（footer参数，显示在主体外）//代码：buttons:[{text:按钮位于footer}]7.buttonAlign:footer中按钮的位置，枚举值为：left,right,center,默认为right8.collapsible：设为true，显示右上角的收缩按钮，默认为false9.draggable:true则可拖动，但需要你提供操作过程，默认为false10.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组件中去)：英文如下（本人英语poor，不敢乱翻译）：contentEl?-?This?config?option?is?used?to?take?existing?content?and?place?it?in?the?body?of?a?new?panel.?It?is?not?going?to?be?the?actual?panel?itself.?(It?will?actually?copy?the?innerHTML?of?the?el?and?use?it?for?the?body).?You?should?add?either?the?x-hidden?or?the?x-hide-display?CSS?class?to?prevent?a?brief?flicker?of?the?content?before?it?is?rendered?to?the?panel.?applyTo?-?This?config?option?allows?you?to?use?pre-defined?markup?to?create?an?entire?Panel.?By?entire,?I?mean?you?can?include?the?header,?tbar,?body,?footer,?etc.?These?elements?must?be?in?the?correct?order/hierarchy.?Any?components?which?are?not?found?and?need?to?be?created?will?be?autogenerated.?renderTo?-?This?config?option?allows?you?to?render?a?Panel?as?its?created.?This?would?be?the?same?as?saying?myPanel.render(ELEME