extJs 2.0学习笔记(Ext.Panel篇二)

这一篇翻译自extJs 2.0官方文档。花了我一个晚上加一个上午的时间才搞定。这篇是关于config的。

　　我在网上查了很久，关于ExtJs的core部分的中文文档还是有不少，但是关于panel，window这些呢就好像不大齐全，而且，在js堂，它的文档翻译还在1.1。所以呢想翻译出来，以后大家也好查阅。

　　本人js水平、英文水平都有限，还好，通过看源代码两相印证，终于还是搞出来了。欢迎各位提出宝贵的意见。事实上，只要搞定了panel，其也组件的config差不多。大同小异。嘿嘿。一通百通啊。

activeItem : String/Number

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

allowDomMove;Boolean

是否可以在组件呈现的过程中移动组件的dom节点。默认值为true。

animCollapse : Boolean

设置是否在面板收缩时起用动画，如果Ext.Fx有效(被包含进来)则默认为true,否则为false。

applyTo:Mixed

x-panel对应的div的id。

autoDestroy : Boolean

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

autoHeight : Boolean

如果为true,把this.el.dom.style.height='auto'。默认值为false。

autoScroll : Boolean

为true时，则把this.body.dom.style.overflow='auto'。默认值为false。

autoShow : Boolean

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

autoWidth : Boolean

同autoHeight一样。。

baseCls : String

this.baseCls的class(默认值为'x-panel')

bbar : Object/Array

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

bodyBorder : Boolean

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

bodyStyle : String/Object/Function

要应用到this.el上的css class。它的格式需求与Ext.Element.applyStyle一样，默认值为null。

border : Boolean

也是设this.body的边框的，默认值为true，此时，默认情况下边框为2px。当然，它还会被bodyBorder影响。

buttonAlign : String

加入到面板中的按钮的对齐方式，合法值为：'right','left','cente',默认值为'right'。

buttons : Array

Ext.Button的config数组，用于加入按钮到面板的footer中。

cls : String

this.el的class。

collapseFirst : Boolean

当显示title bar时，是否总把收缩、展开按钮放在所有其他按钮的前面。默认值为true。

collapsed : Boolean

在呈现时，是收缩还是展开。为true则收缩，默认值为false。

collapsedCls : String

当面板处于收缩状态时，this.el所对应的class，默认值为'x-panel-collapsed'。

collapsible : Boolean

此面板是否可收缩或者说是否能显示收缩、伸展按钮。真为显示。默认值为false。

contentEl : String

一个已存在的dom的id。作用是用于在afterRender后把它this.body.dom.appendChild掉。默认值为''。

ctCls : String

设this.container的class。

defaultType : String

当在构造函数中用items填加新成员时，如果没有设xType，那么就会以这个默认类型为xType加入组件。默认值为'panel'。

defaults : Object

加入此组件的所有子组件的默认config。如果这些加入的子组件设了config的话就以新设的为准。例如：{bodyStyle:'padding:15px'}。

disabledClass : String

当组件被设成disabled时的css，默认值为："x-item-disabled"。

draggable : Boolean

是否能被拖动。默认值为false。当然也可以是一个Ext.Panel.DD
config。Ext.Panel.DD是一个internal但非公开的类(我没有找到它的源代码)，它的作用是移动一个proxy元素
(Element)以代替本应跟随鼠标移动的panel.el。但是它在拖动过程中、放下时不提供任何其他动作，也就是说，如果你不作处理的话，鼠标一
松，panel仍然在老地方。它是Ext.dd.DragSource的子类，所以，必须通过实现Ext.dd.DragDrop的方法来产生动作。示例
代码如下：

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();

elements : String

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

floating : Boolean

为true的话，它会使panel.el.style.position=absolute。并且，默认情况下带有shimming和shadow。为false则不改变原有显示方式。

注
意：把floating设为true会导致panel以offsets大量负偏移的方式隐藏。这个诸　位试一下就晓得了。所以呢，如果设了
floating=true。那么，你render后最好还要setPostion(x,y)一下。当然如果你让面板浮动，也要把width设成一个固定
值，不然，它会向右扩展到viewport的边缘。

footer : Boolean

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

frame : Boolean

为true的话呢就就在panel外面加上自定义的圆角边框，为false的话就是1px宽的长方形边框。

header : Boolean

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

headerAsText : Boolean

为真是在header中显示title，为假时隐藏它。默认值为true.

height : Number

panel的高度，默认为auto。

hideBorders : Boolean

为true时，隐藏panel的所有子组件的边框，为false则尊从子组件原有边框设置。

hideCollapseTool : Boolean

当collapsible=true且hideCollapseTool=true时，则隐藏控制收缩、伸展的那个按钮，为false时就显示它，默认值为false。

hideMode : String

隐藏模式，有三种： "visibility" (css visibility),
"offsets" (negative offset position) and "display" (css display) -
defaults to "display"。

hideParent : Boolean

用于设置是否隐藏组件的容器，即component.container。

html : String/Object

一个html碎片，或者是满足DomHelper语法的object，它用于设置panel的body部分的内容。默认值为''。

iconCls : String

用于设置header上的图标的class。例如：.my-icon { background: url(../images/my-icon.gif) 0 6px no-repeat !important;}

id : String

一个为component统一分配的id值。默认值为panel.el.id。

items : Mixed

单个成员或一个子组件的数组。每个成员都可以是任何从Ext.Component继承的object。

它的成员可以是component的引用，这样就会马上render，也可以是component的config。这时就会lazy render。当然，在config中，要注意加上xtype。这个东西不用讲了吧。

关于xtype的所有取值情况，请见Ext.Component.xtype的config说明。里面有讲到。关于它的值，其实很多例子上都有，如果传一个成员，则像：items:{……},传多个的话呢，就像：[{……},{……}]。

keys : Object/Array

一个keyMap config object。用于设置快捷键的。默认值为null。

layout : String

设置panel.container的布局。如果没有设置，那么默认为
Ext.layout.ContainerLayout，合法的值有：absolute, accordion, anchor, border,
card, column, fit, form和table。如果要设置布局的细节，则要用到layoutConfig了。

layoutConfig : Object

用于设置布局细节的，当layout有合法设置时它才有效果。如果要知道关于这个config的设置细节，请见各布局类：

Ext.layout.Absolute

Ext.layout.Accordion

Ext.layout.AnchorLayout

Ext.layout.BorderLayout

Ext.layout.CardLayout

Ext.layout.ColumnLayout

Ext.layout.FitLayout

Ext.layout.FormLayou

Ext.layout.TableLayout

listeners : Object

一个config对象用于包含一个或多个事件handler，它被addListener使用来注册事件。

maskDisabled : Boolean

是否在panel.disabled的时候显示mask。为true显示。反之不显示。

默认情况下，panel哪怕在disabled时，它的子元素也显示得很正常，用户根本不知道这个panel被禁用了，这给用户带来困扰，但是，有了mask，用户就能得到提示，哦，这个panel是不可用的，被禁用了。这给用户带来了新的体验。

minButtonWidth : Number

panel上所有按钮的最小宽度，单位是px。

monitorResize : Boolean

为true时，它自动监控window的resize事件，并且让viewport因此而变化。这个东西的经典应用就是为layout服务，而不用我们手工去调整某些组件的大小来适应窗口大小的变化。

overCls : String

当鼠标放到panel.el上面时的class。最爽的是，当鼠标out时，它会被自动删除，从而产生hover效果。

pageX : Number

组件相对于页面的x坐标

pageY : Number

组件相对于页面的y坐标

plugins : Object/Array

一个对象或对象数组，它为component提供自定义的功能。每个对象都是一个插件的引用，当然，前提是这个插件定义了init方法，在component初始化时，这个init方法将被调用。没用着。不说了。难翻译啊。

renderTo : Mixed

Ext.get(panel.renderTo)就是panel.container。用语言说不清楚，这样直接了当。

shadow : Boolean/String

为true就给panel显示一个阴影，为false不显示。当然，也可设置成为shadow的类型，详情见Ext.Shadow、Ext.Shadow.mode。注意，这个选项只有在floating = true时才发生作用。

shadowOffset : Number

阴影偏移，默认值为4，只有在floating = true时才发生作用。

shim : Boolean

是否为组件创建shim，什么是shim呢？存在这样的情况，用div做的菜单，但是，好死不死有个
applet或flash盖在上面的话，那菜单就会被盖在下面。这件事情曾经一度让b/s人员郁闷，ext提供一个通用的解决方案，在要避免这个问题的组
件的同一位置创建一个与它大小一样的iframe，且使得这个组件的z-index大于iframe。由于iframe不会被其他东西遮住，所以，z-
index在iframe之上的东西也不会被遮，iframe相当于个垫子，把我们要用的东西垫高了，而shim英语里面也是薄垫片的意思。高呼
extjs万岁。当然，iframe的src必须为''。

stateEvents : Array

事件数组，当这此事件触发时，组件状态被保存。

stateId : String

用于管理组件状态的id,默认值为组件的id.

stateful : Boolean

一个标志，它表示组件在创建时是否从某个地方加载组件状态。哪些属性能作为状态保存呢？只有internal属性可以。

为了让组件状态能保存，组件状态管理器提供者必须实现Ext.state.Provider，也就是要实重写它的set、get方法以保存/重读键/值对，一个内键的提供者是： Ext.state.CookieProvider。

为当前页面设置状态提供者的方法如下：

Ext.state.Manager.setProvider(new Ext.state.CookieProvider());

组件试图在stateEvents里面配置了事件时保存状态。你可以自己写点代码进行一处理，如在：beforestaterestore, staterestore, beforestatesave和statesave事件的处理代码中。

style : String

一个应用于panel.el上的样式，语法必须满足Ext.Element.applyStyles的接口。

tabTip : String

当panel是Ext.TabPanel中的一页时，为这个panel设tooltips的。不过，在render之前得先调用Ext.QuickTips.init()初始化一下。

tbar : Object/Array

panel顶部的工具栏，它可以是一个Ext.Toolbar，也可以是一个按钮数组或一个按钮的config。注意：在render之后，这个引用就没用了。如果要处理它请使用getTopToolbar。

title : String

显示在panel的header中的标题，当title被设置时，header就会被创建，除非header
被设成false。如果你需要title,但不是在panel创建时，而是在之后的某个时刻，这时你需要为title设置一个非空值(如一个空格)或者是
把header设为true。这样，panel在创建时才会创建header，不然，header将不会被创建。

titleCollapse : Boolean

当collapsible = true且titleCollapse=true时，用户点击panel标题栏的任意一处都会产生折叠/伸展效果，否则则只能通过单击那个按钮(上文有讲到)来产生这个效果了。

tools : Array

一个工具栏按钮数组，这个工具栏非同一般哦，不是tbar，也不是bbar，而是header上的标题栏，header上的标题栏是怎样的概念？你看到的panel的关闭按钮这个钮，超爽吧。每个工具栏元素以一个Element引用的方式向开发人员公开，通过

　　　tools.<tool-type>的方式引用。暴爽。

每个工具栏成员的config要包含下面属性：

id:string

　　必需的，工具栏按钮的类型，可取值如下：

toggle (Created by default when collapsible is true)

close

minimize

maximize

restore

gear

pin

unpin

right

left

up

down

refresh

minus

plus

help

search

save

print

handler : Function

必需，当按钮被单击时被执行。它的参数说明如下：

　　event:Ext.EventObject

　　toolel:Ext.Element

　　Panel : Ext.Panel宿主panel

scope : Object

qtip:String/Object

一个tips字符串或者是tips config，用于Ext.QuickTip.register.

hidden : Boolean

on : Object

自定义事件处理器的config，为addListener所用。

示例如下：

tools:[{

id:'refresh',

qtip: 'Refresh form Data',

// hidden:true,

handler: function(event, toolEl, panel){

// refresh logic

}

}]

　　注意：除了toggle之外，其他工具栏成员都只是提供一个可视化的图标，没有任何功能，所以，如果你要加入它们，得自己写处理函数。

width : Number

component的宽度，单位用px，默认值为：auto。

x : Number

获得组件的x,相当于panel.el.style.left

xtype : String

这个东西不用说了，见Ext.Component的config里面的xtype。

y : Number

与x同理。