日期:2014-05-16  浏览次数:20467 次

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