ExtJs---Panel解读

Ext – Panel API解读

1：activeItem : String/Number       用于设置当前的活动子组件，取值为此组件的序号或者是id。但是它只能用于那种一次只能显示一个子组件的布局类。例如：Ext.layout.Accordion、Ext.layout.CardLayout、Ext.layout.fitLayout。

2：allowDownMove : Boolean 是否可以再组件呈现的过程中移除DOM节点(默认是true)。

3 :anchor : String                                                  3.0之后补充的      可以理解为容器的固定布局,相应的还有form、absolute。

4:animCollapse : Boolean  设置在面板收缩时是否启用动画，如果Ext.Fx这个类(被包含进来)有效，则默认为true，否则为false。

5:applyTo : Mixed      x-panel对应DIV的id。

6:autoDestory : Bollean      如果要把一个子组件从panel中移除且此值为true，则在移除的过程当中会自动的销毁此组件，反之则不会，必须要手工的默认销毁，默认值为true。

7：autoHeight : Boolean       如果为true，则把 this.el.dom.style.height=’auto’。默认为false。

8：autoLoad : Object/String/Function       有效的URL。

9：autoScoll : Boolean       为true时，则把this.el.dom.style.overflow = ‘true’;默认为false。

10：autoShow : Boolean       为true时，检查组件是否被设成为隐藏，如果有，则移除这个效果。

11：autoWidth : Boolean       如果为true，则把this.el.dom.style.width=’auto’。默认为false。

12：baseCls : String        this.baseCls的class(默认值为’x-panel’)。

13：bbar : Object/Array        面板底部的工具栏，他可以是一个Ext.Toolbar的对象，也可以是一个toolbar的config对象，或者是一个要加入到工具栏按钮的config的数组。注意：这个属性在render后就无效了，如果要在render后使用它，请使用getBottomToolbar获得引用。

14: bbarCfg : Object                                                3.0之后补充的        元素对应指定的元素结构。

15:bodyBoder : Boolean       如果为true则为this.el对应的元素显示边框，默认为true，这个只在border==true时才有效。如果border == true且bodyBoder == false，那么将显示1px的inset边框。给予this.el.inset的效果。

16:bodyCfg : Object

17: bodyStyle : String/Object/Function       要应用到this.el上的css class。它的格式需求与Ext.Element.applyStyle一样，默认为null。

18: border : Boolean      也是用来设置边框的，默认情况下位2px，当然了还会受到bodyBorder的影响。

19: bufferResize : Boolean/Number      缓冲大小，默认值为100毫秒

20: buttonAlign : String      加入到面板中按钮的对齐方式，四个值:’cente’、’right’、’left’，默认为’right’。

21: buttons : Array      Ext.Button的config数组，用于加入到面板的footer中。

22: bwrapCfg : Object      元素规格对象指定元素结构

23:clearCls : String      清除渲染div的样式(默认为’x-form-clear-left’)。

24: closable : Boolean      用来显示/隐藏窗口右上角关闭按钮，默认为false。

25: cls : String      this.el的class。(添加一个额外可选的css)

26: collapseFirst : Boolean      当显示 title bar时，是否总把收缩、展开按钮放在其它按钮的前面。默认是true。

27 : collapsed : Boolean      在呈现时，是收缩还是展开。为true表示收缩。默认值为false。

28 : collapseCls : String      当面板处于收缩状态时，this.el所对应的class。默认值:’x-panel-collapse’。

29: collapsibale : Boolean      此面板是否可收缩或者说是否能显示收缩、伸展按钮。True表示显示。默认值为false.

30 : ContentEl : String      ·applyTo：（id）呈现在哪个html元素里面。 ·contentEl：（id）呈现哪个html元素里面，把el内的内容呈现。 ·renderTo：（id）呈现在哪个html元素里面。

31 : ctCls : String      设this.container的class。(添加一个额外可选的css)

32 : defaultType : String       当在构造函数中用items添加新成员时，如果没有设定xType， 那么就会以这个默认的类型xType加入组件。默认是：’panel’。

33 : defaults : Object       加入此组件的所有子组件的config，如果这些加入的组件设置了config的话就以新设的为准。例如：{bodyStyle:’padding:15px’}。

34 : disabled : Boolean       设置这个面板为禁用状态(默认值为false)。

35 : disabledClass : String      当组件被设成disbaled是的css，默认值为’x-item-disabled’。

36 : draggable : Boolean/Object       是否能被拖动。默认值为false。当然也可以是一个Ext.Panel.DD.config。Ext.Panel.DD 是一个intenal但非公开的类。它的作用是移动一个proxy元素(Element)以替代本应跟随鼠标移动的panel.el。但是它在拖动过程中、放下时不提供任何动作，也就是说：如果你不做处理的话，鼠标一松，panel任然在老地方。它是Ext.dd.DragSource的一个子类。所以必须通过实现Ext.dd.DargDrop的方法来产生动作： new Ext.Panel({     title: 'Drag me',     x: 100,     y: 100,     renderTo: Ext.getBody(),     floating: true,     frame: true,     width: 400,     height: 200,     draggable: { //      Config option of Ext.Panel.DD class. //      It's a floating Panel, so do not show a placeholder proxy in the original position.         insertProxy: false,   //      Called for each mousemove event while dragging the DD object.         onDrag : function(e){ //          Record the x,y position of the drag proxy so that we can //          position the Panel at end of drag.             var pel = this.proxy.getEl();             this.x = pel.getLeft(true);             this.y = pel.getTop(true);   //          Keep the Shadow aligned if there is one.             var s = this.panel.getEl().shadow;             if (s) {                 s.realign(this.x, this.y, pel.getWidth(), pel.getHeight());             }         },   //      Called on the mouseup event.         endDrag : function(e){             this.panel.setPosition(this.x, this.y);         }     } }).show();

37 : elements : String     一个panel有五部分: header、tbar、body、bbar、footer。Elements就是保存了当前panel包含的几个部分，例如，一个panel有header、body，那么elements==’body,header’,默认值是：body。

38 : fbar : Object/Array                                              3.0之后补充的     Toolbar对象，Toolbar配置，Buttons/Button数组的配置，描述了panel的底部元素(Element)。

39 : fieldLabel : String                                              3.0之后补充的 面板中输入框显示的名字。 new Ext.FormPanel({     height: 100,     renderTo: Ext.getBody(),     items: [{         xtype: 'textfield',         fieldLabel: 'Name'     }] });

40 : floating : Mixed    为true的话，它会使panel.el.style.position=absolute。并且，默认情况下带有shimming和shadow。为false则不改变原有显示方式。 注意：把floating设为true会导致panel以offsets大量负偏移的方式隐藏。这个诸　位试一下就晓得了。所以呢，如果设了floating=true。那么，你render后最好还要setPostion(x,y)一下。当然如果你让面板浮动，也要把width设成一个固定值，不然，它会向右扩展到viewport的边缘。

41 : footer : Boolean     为true表明要创建footer，为false则不创建。默认情况下，如果对footer没有什么特殊的，那么当一个或多个按钮被加到footer上面时，footer会自动创建。

42 : footerCfg : Object     面板底部的css

43 : forceLayout : Boolean     如果为true，容器将显示最初的布局的显示、隐藏布局。这个选项在容器中是比较有用的。默认为：false。

44 : frame : Boolean     如果为true，就在panel的外面加上自定义的圆角边框。为false就是1px的长方形边框.

45 : header : Boolean      如果为true时，header被创建，反之不被创建。默认情况下，当header不处于特殊情况时，如果title被设置，它会自动被创建，如果title被设置，但是header为false，那么header也