首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > JavaScript >

ExtJs-Panel解读

2012-11-06 
ExtJs---Panel解读Ext – Panel API解读?? 1:activeItem : String/Number????? 用于设置当前的活动子组件,

ExtJs---Panel解读

Ext – Panel API解读

?? 1:activeItem : String/Number

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

?? 2allowDownMove : 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

·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也

?

?

热点排行