`

ExtJs---Panel解读

 
阅读更多

Ext – Panel API解读

   1activeItem : String/Number

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

   2allowDownMove : Boolean

是否可以再组件呈现的过程中移除DOM节点(默认是true)

   3 :anchor : String                                                  3.0之后补充的

     可以理解为容器的固定布局,相应的还有formabsolute

4:animCollapse : Boolean

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

   5:applyTo : Mixed

     x-panel对应DIVid

   6:autoDestory : Bollean

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

   7autoHeight : Boolean

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

   8autoLoad : Object/String/Function

      有效的URL

   9autoScoll : Boolean

      true时,则把this.el.dom.style.overflow = ‘true’;默认为false

   10autoShow : Boolean

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

   11autoWidth : Boolean

      如果为true,则把this.el.dom.style.width=’auto’。默认为false

   12baseCls : String

       this.baseClsclass(默认值为’x-panel’)

   13bbar : Object/Array

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

   14: bbarCfg : Object                                                3.0之后补充的

       元素对应指定的元素结构。

   15:bodyBoder : Boolean

      如果为true则为this.el对应的元素显示边框,默认为true,这个只在border==true时才有效。如果border == truebodyBoder == false,那么将显示1pxinset边框。给予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.Buttonconfig数组,用于加入到面板的footer中。

  22: bwrapCfg : Object

     元素规格对象指定元素结构

  23:clearCls : String

     清除渲染div的样式(默认为’x-form-clear-left’)

  24: closable : Boolean

     用来显示/隐藏窗口右上角关闭按钮,默认为false

  25: cls : String

     this.elclass(添加一个额外可选的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.containerclass(添加一个额外可选的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.configExt.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有五部分: headertbarbodybbarfooterElements就是保存了当前panel包含的几个部分,例如,一个panelheaderbody,那么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。并且默认情况下带有shimmingshadow。为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被设置,但是headerfalse,那么header

 

 

分享到:
评论

相关推荐

    extjs-OA extjs-oa

    一个extjs的OA项目 extjs-OA extjs-oaextjs-OA extjs-oa

    extjs-620-docs.zip

    extjs-620-docs官方文档extjs-620-docs官方文档extjs-620-docs官方文档

    extjs extjs-basex.js

    extjs-basex.js extjs-basex.js extjs-basex.js

    extjs-620-docs.rar完全离线版

    此"extjs-620-docs.rar"压缩包包含了该版本的完全离线版API文档,旨在解决在没有网络连接或网络环境不稳定时,开发者仍然可以便捷地查阅和学习ExtJS 6.2.0的相关知识。 API 文档是任何开发者的重要工具,特别是对于...

    extjs-4.1.1.zip

    在"extjs-4.1.1.zip"这个压缩包中,包含了ExtJS框架的4.1.1版本,这是一个成熟的版本,具有丰富的功能和优化的性能。 ExtJS的核心特性包括组件化设计、可定制的布局管理、强大的数据绑定机制以及一系列预设的UI组件...

    extjs-v7.0-cmd

    extjs-cmd 脚手架安装包2 extjs-cmd 脚手架安装包3 extjs-cmd 脚手架安装包4

    extjs-theme-bootstrap

    "extjs-theme-bootstrap" 是针对 EXTJS4 的一个主题,它借鉴了 Bootstrap 的设计风格,让 EXTJS4 应用程序具有更加现代化和一致的外观。 Bootstrap 是一个流行的前端开发框架,由 Twitter 推出,主要用于构建响应式...

    extJs-5.0.1-gpl(part1)

    extJs-5.0.1-gpl附带sencha cmd安装程序、ruby编译包(分为32位和64位)和教程,一共四部分

    extjs-4.1.1 ExtJs所有文档及库文件

    extjs-4.1.1 ExtJs所有文档及库文件,在官网下的,这个版本很好,放在这方便大家下载!

    extjs-653-docs.zip

    extjs-6.5.3离线API文档,是学习和开发的必要工具。希望有所帮助!

    extjs-core 3.0 beta版

    extjs-core 3.0 beta版extjs-core 3.0 beta版SDK extjs-core 3.0 beta版extjs-core 3.0 beta版

    extjs-4.0.2框架

    ExtJS是一种主要用于创建前端用户界面,是一个基本与后台技术无关的前端ajax框架。功能丰富,无人能出其右。无论是界面之美,还是功能之强,ext的表格控件都高居榜首。单选行,多选行,高亮显示选中的行,推拽改变列...

    ExtJS-4.2.6-src-926个类源码

    Ext JS 4.2.6.1811 Release Date: October 5, 2016 Version Number: 4.2.6.1811 ext-src class 926

    extjs-docs-6.0.0-classic.part02.rar

    Ext JS 6最大的变化就是将Ext JS和Touch合并为一个单一的框架。之前的框架的核心(数据、控制器、模型等等)已被调和为一个单一的公共平台。这样,数据和逻辑就能共享,从而帮助开发人员进一步去优化他们的应用程序...

    extjs-theme-bootstrap-master.zip

    "extjs-theme-bootstrap-master.zip" 文件很可能是ExtJS的一个主题包,它集成了Bootstrap的样式,使得ExtJS组件能够呈现出Bootstrap的经典外观。 在深入讲解这个主题之前,让我们先了解一下基础概念: 1. **ExtJS*...

    extjs-7.0.0-docs

    extjs-7.0.0-docs, EXT 7.0.0 官方离线文档包, 希望可以助力于您

    extjs-660-docs

    extjs-660-docs,EXT官方离线文档包, 希望可以且助力于您

    extjs-docs-6.0.0-classic.part01.rar

    Ext JS 6最大的变化就是将Ext JS和Touch合并为一个单一的框架。之前的框架的核心(数据、控制器、模型等等)已被调和为一个单一的公共平台。这样,数据和逻辑就能共享,从而帮助开发人员进一步去优化他们的应用程序...

    extjs-4.1.1官方免费版

    extjs-4.1.1为extjs官方免费版,解压之后引入对应的css和js即可使用

Global site tag (gtag.js) - Google Analytics