Ext.grid.column.Template

Alternate names

Ext.grid.TemplateColumn

Hierarchy

Inherited mixins

Requires

Files

一个用于简化列定义的子类,可通过配置tpl(XTemplate) 来把Model's data转换为需显示的值。

Ext.create('Ext.data.Store', {
    storeId:'employeeStore',
    fields:['firstname', 'lastname', 'seniority', 'department'],
    groupField: 'department',
    data:[
        { firstname: "Michael", lastname: "Scott",   seniority: 7, department: "Management" },
        { firstname: "Dwight",  lastname: "Schrute", seniority: 2, department: "Sales" },
        { firstname: "Jim",     lastname: "Halpert", seniority: 3, department: "Sales" },
        { firstname: "Kevin",   lastname: "Malone",  seniority: 4, department: "Accounting" },
        { firstname: "Angela",  lastname: "Martin",  seniority: 5, department: "Accounting" }
    ]
});

Ext.create('Ext.grid.Panel', {
    title: 'Column Template Demo',
    store: Ext.data.StoreManager.lookup('employeeStore'),
    columns: [
        { text: 'Full Name',       xtype: 'templatecolumn', tpl: '{firstname} {lastname}', flex:1 },
        { text: 'Department (Yrs)', xtype: 'templatecolumn', tpl: '{department} ({seniority})' }
    ],
    height: 200,
    width: 300,
    renderTo: Ext.getBody()
});
Defined By

Config options

子组件id 或者是子组件所在容器的索引 设置该属性的目的是设置那个子组件在最初显示的容器的布局上渲染. For example, activeItem: 'itemId-1' or activeItem: 0 (容器中的第一个子组件).
activeItem 仅适用于布局样式 Ext.layout.container.Card and Ext.layout.container.Fit 并且一次只显示一个子组件。

设置列头及单元格的对齐方向。 可取值: 'left', 'center', and 'right'

Defaults to: "left"

定义容器的相对定位值.(参见类说明) 可以是一个数值来定义宽度, 也可以是一个含width, height的对象.

定义容器的相对定位值.(参见类说明) 可以是一个数值来定义宽度, 也可以是一个含width, height的对象.

如果为true,容器会自动销毁包含的任何组件被删除它,否则必须手动销毁。

Defaults to: true

一个标签名或者 DomHelper 描述,用来创建 Element ,它将封装当前组件。

一般情况下你不必指定此值。 对于基类 Ext.ComponentExt.container.Container, 此值默认为 'div'。 越复杂的sencha类使用越复杂的DOM结构, 这些是由它们自己的renderTpl方法创建的。

这被设计用来允许开发者创建针对特定应用的 工具组件,这些组件由不同的DOM元素封装而成。 示例用法:

{
    xtype: 'component',
    autoEl: {
        tag: 'img',
        src: 'http://www.example.com/example.jpg'
    }
}, {
    xtype: 'component',
    autoEl: {
        tag: 'blockquote',
        html: 'autoEl is cool!'
    }
}, {
    xtype: 'container',
    autoEl: 'ul',
    cls: 'ux-unordered-list',
    items: {
        xtype: 'component',
        autoEl: 'li',
        html: 'First list item'
    }
}

这个配置主要面向非 floating 组件, 这个组件可能显示可能不显示. 这个配置允许组件首次使用 show 进行自我渲染来代替使用 renderTo 以及基于构造的渲染. 如果 floating 为 true, 这个配置的值被忽略, 就相当于为 'true'.

设置为 true 组件首次显示将自动渲染到文档的正文区域.

设置为一个元素, 或者元素的 ID 组件首次显示将自动渲染到指定元素.

Defaults to: false

'true'使用溢出:'自动'的组件布局元素,并在必要时自动显示滚动条, 'false'溢出的内容。 ...

'true'使用溢出:'自动'的组件布局元素,并在必要时自动显示滚动条, 'false'溢出的内容。 不能像这样定义overflowX or overflowY.

Defaults to: false

设置 True 组件创建时自动显示. 这个配置项可能仅仅用于 floating 组件或者组件使用 autoRender. 默认为false.

Defaults to: false

一个基础 CSS 类, 它将被添加到当前的组件元素上. 这个将被传给这个组件内部的一个元素, 比如 Panel 的 body 将会得到一个 x-panel-body 的类. 这意味着你创建一个子面板, 你想让它得到所有的面板造型元素和主体, 你舍弃 baseCls x-panel 并使用 componentCls 为组件添加特定的造型.

Defaults to: "x-component"

指定该组件的边框. 边框可以是一个数值适用于所有边 或者它可以是每个样式的CSS样式规范, 例如: '10 5 3 10'.

事件数组,当事件触发的时候,将会冒泡到父容器。 参见 Ext.util.Observable.enableBubble.

Defaults to: ["add", "remove"]

一个描述组件的子元素的数组. 数组的每个成员是这些属性的对象:

  • name - 组件的子元素的属性名称.
  • itemId - ID结合组件的ID是子元素的ID.
  • id - 子元素的id.

如果数组成员是字符串, 它相当于 { name: m, itemId: m }.

例如, 组件呈现一个标题和正文:

Ext.create('Ext.Component', {
    renderTo: Ext.getBody(),
    renderTpl: [
        '<h1 id="{id}-title">{title}</h1>',
        '<p>{msg}</p>',
    ],
    renderData: {
        title: "Error",
        msg: "Something went wrong"
    },
    childEls: ["title"],
    listeners: {
        afterrender: function(cmp){
            // After rendering the component will have a title property
            cmp.title.setStyle({color: "red"});
        }
    }
});

一个更灵活的, 但是有些慢, 方法是 renderSelectors.

可选的额外的CSS类将被添加到该组件的元素. 这可用于添加自定义样式的成分或任何其子组件使用标准的CSS规则.

Defaults to: ""

可选配置,作为组合列定义。 该列将成为一个组合列,包含多个定义在columns中的子列。

组合列无法排序,但可以隐藏和移动。你也可以把子列移入或移出组合列。 注意:当所有子列都移出组合列时,该组合列将被销毁。

CSS 类被添加到组件根级别元素通过样式区别它.

CSS 类被添加到组件根级别元素通过样式区别它.

一个组件的内部元素的尺寸大小和定位是由组件的布局管理器决定的, 组件的布局管理器掌管着被衡量组件的内部结构. ...

一个组件的内部元素的尺寸大小和定位是由组件的布局管理器决定的, 组件的布局管理器掌管着被衡量组件的内部结构.

一般来说, 开发者不会使用这个配置, 因为所有给定的需要制定尺寸大小的内部元素的组件 (比如 input fields) 是由其自身的组件布局管理器来决定的.

默认布局管理 将被用于基本类 Ext.Component 的实例上, 这个类将会简单地通过 setSize 方法来设置组件的封装元素的高度和宽度.

指定一个已存在的HTML元素, 或者一个已存在HTML元素的 id , 它们将被用作当前组件的内容.

此配置选项被用来将一个已存在的HTML元素 插入到一个新组件(在组件渲染之后它简单地移动DOM元素) 的layout元素中, 使它成为该组件的内容.

注意:

指定的HTML元素将被附加到组件的layout元素中, 在所有配置的 HTML 被插入之后, 并且, 这样的话, 在 render 事件被触发时, document中将不再包含此元素.

指定的 HTML 元素将不会参与所有的可能使用的 layout 过程. 它仅是 HTML 而已. 布局操作是在 items 上进行的.

添加 x-hidden 或者 x-hide-display 类, 以防在内容渲染到panel时发生闪烁.

初始数据集应用到 tpl 更新组件的内容区域.

初始数据集应用到 tpl 更新组件的内容区域.

表格的Ext.data.StoreExt.data.Model的field,用于获取需要显示到单元格的值。 必须属性。

Defaults to: null

当一个子项目通过一个原生的配置对象而不是一个组件的实例指定时, 在当前容器中创建子组件时使用的默认 xtype,默认为 'panel'。 ...

当一个子项目通过一个原生的配置对象而不是一个组件的实例指定时, 在当前容器中创建子组件时使用的默认 xtype,默认为 'panel'。

Defaults to: "panel"

默认宽度 如果没有指定width和flex,默认的宽度. ...

默认宽度 如果没有指定width和flex,默认的宽度.

Defaults to: 100

此选项提供了为所有添加的组件上应用默认设置的途径, 这些属性要么是通过 items 配置项添加的, 或者是通过 add 或者是通过 insert 方法添加的 默认属性将会应用到所有的子组件上,但是不会覆盖子组件本身已经有的属性 (...

此选项提供了为所有添加的组件上应用默认设置的途径, 这些属性要么是通过 items 配置项添加的, 或者是通过 add 或者是通过 insert 方法添加的

默认属性将会应用到所有的子组件上,但是不会覆盖子组件本身已经有的属性 (可以参见 Ext.applyIf).

如果默认选项被指定为一个函数, 那么将使用当前容器作为作用域来调用这个函数( this 引用), 并且传递被添加的项目作为第一个参数。 调用产生的所有结果都将被作为默认参数应用到项目上。

例如,如需自动在 Ext.panel.Panel 所包含的每个子组件上应用padding属性, 你可以设置: defaults: {bodyStyle: 'padding:15px'} 。

用法:

defaults: { // defaults 将会应用所有的子组件上,而不是父容器
    autoScroll: true
},
items: [
    // panel1 已经存在 autoScroll: false 所以 defaults将不会应用
    {
        xtype: 'panel',
        id: 'panel1',
        autoScroll: false
    },
    // panel2 将会 autoScroll: true
    new Ext.panel.Panel({
        id: 'panel2'
    })
]

True 当组件从该容器中移除detachedBody 将会真正移动到任何组件。 此选项只适用于容器不是被销毁的情况下,请参阅autoDestroyremove。 如果这个选项被设置为false,DOM组件将保持在当前位置,直到它被明确地移动。

Defaults to: true

True 将禁用该组件。

Defaults to: false

当组件被禁用添加的CSS 类. 默认为 'x-item-disabled'.

Defaults to: "x-item-disabled"

设置为false则禁用拖拽改变列顺序、

Defaults to: true

Overrides: Ext.Component.draggable

渲染函数,配置RowEditing使用。 用于为不可编辑的单元格在编辑状态显示自定义的值。

Defaults to: false

可选配置,xtype名或Field配置对象,用于配置编辑的控件。 仅当表格使用Editing插件时,才可使用。

空单元格(取值为undeifned,null或空字符串)的显示内容。

默认为&#160;&nbsp;.

editor的别名.

This cfg has been deprecated since 4.0.5

editor代替.

设置为true则该列无法拖拽改变大小。

This cfg has been deprecated

指定为'true'的时候浮动组件以外的文档流中使用CSS绝对定位。

Ext.window.Window Window and Ext.menu.Menu Menu 组件默认情况下是浮动的.

浮动的组件编程方式将自己rendered注册到全局ZIndexManager

作为一个容器的子项的浮动组件

一个浮动的组件,也可以使用一个容器作为一个子项。这只是允许的浮动组件, This just allows the floating Component to seek a ZIndexManager by examining the ownerCt chain.

当配置为浮动,组件获取,在渲染时,一个ZIndexManager管理堆栈相关的浮动元件。 ZIndexManager带来一个单一的浮动组件组件toFront的方法被调用时,它的堆栈的顶部。

ZIndexManager通过遍历链找到一个被继承的ownerCt这本身就是浮动的。 这使子类浮动容器组件(如在一个窗口一个ComboBox下拉)可以有它的zIndex的管理 相对于任何同级节点,但始终高于浮动被继承的对象。

如果没有父类的浮动定义,浮动组件注册本身的默认 ZIndexManager.

在容器的布局,浮动组件不参与。正因为如此,他们都不会呈现,直到您明确。show

渲染后,父类浮动引用将被删除,该属性设置为找到的父类容器floatParent。 如果没有浮动的父类容器floatParent的属性 不会被删除.

Defaults to: false

Overrides: Ext.AbstractComponent.floating

指定当一个浮动组件被 带到顶层 时,是否应该自动 获得焦点.

Defaults to: true

设置为 'true' 在组件渲染时在组件周围提供一个圆角边框.

当运行在过时的, 或者不符合规范的浏览器如微软的IE 9 浏览器之前不支持圆角, 这才是必要的配置.

由该框架采取了额外的空间,可从只读属性 frameSize.

若表格配置了Ext.grid.feature.Grouping, 则该列可用于禁用列菜单中的“按该列分组”。 列菜单的分组选项默认为可分组,设置为false则禁用列菜单中的“按该列分组”(显示但无法点击)。

此组件的高度,以像素为单位。

此组件的高度,以像素为单位。

True 将隐藏该组件。

Defaults to: false

一个字符串,它指定了这个组件的封装DOM元素会被隐藏. 值可以是:

  • 'display' : 使用 display: none 样式组件将被隐藏.
  • 'visibility' : 使用 visibility: hidden 样式组件将被隐藏.
  • 'offsets' : 组件定位在文档的可见区域之外将被隐藏. 当一个隐藏的组件必须保持可测量的这是有用的. 使用 display 将导致一个 组件不可测.

Defaults to: "display"

设置为false则用户无法隐藏该列。

Defaults to: true

一个 HTML 片段, 或者一个 DomHelper 描述, 用作 layout 元素的内容. 这个 HTML 内容在组件渲染之后才被添加, 所以在 render 触发的时候, document 中尚未包含此 HTML. 但是这个内容将会在所有配置的 contentEl 之前被插入到 body 标签中.

Defaults to: ""

当前组件实例唯一的ID。

它不应该是必要的,除了在你的应用程序使用这个配置单例对象。 用一个 id 创建的组件可以使用 Ext.getCmp 进行全局访问。

代替使用分配的id, 使用 itemId 配置项, 和 ComponentQuery 它提供了基于选择搜索Sencha组件类似于DOM查询。 Container 类包含 快捷方法 通过选择器查询子组件。

注意这个ID也将被用于包含HTML元素,在页面上呈现此组件的元素的ID。 这允许你写的基于ID的CSS规则让组件的特定实例风格独特, 也可以把这个组件作为父组件, 使用它的 id 来查找子元素。

注意: 为了避免与唯一的id 产生重复,请参见 itemId.

注意: 如需访问一个元素的容器,参见 ownerCt.

默认为 auto-assigned id.

当没有可利用的对象引用时,itemId可以作为第二选择,用来获得一个组件的引用。 代替 idExt.getCmp, 使用 itemIdExt.container.Container.getComponent 将会获得 itemId's 或者 id's。 既然 itemId's 是一个到容器内部MixedCollection的索引, itemId 的作用域就被限定在容器之内 -- 避免与 Ext.ComponentManager 产生潜在的冲突, 它需要一个 唯一 id.

var c = new Ext.panel.Panel({ //
    height: 300,
    renderTo: document.body,
    layout: 'auto',
    items: [
        {
            itemId: 'p1',
            title: 'Panel 1',
            height: 150
        },
        {
            itemId: 'p2',
            title: 'Panel 2',
            height: 150
        }
    ]
})
p1 = c.getComponent('p1'); // not the same as Ext.getCmp()
p2 = p1.ownerCt.getComponent('p2'); // reference via a sibling

也可以参见 id, Ext.container.Container.query, Ext.container.Container.downExt.container.Container.child.

注意: 需要访问一个item的容易请参见 ownerCt.

单个组件,或者是以数组形式定义的子组件集合 将会自动添加到容器中去 如果开发者没有配置layout属性, 默认是按顺序将子组件渲染到在容器中,不考虑子组件的大小和定位。 ...

单个组件,或者是以数组形式定义的子组件集合 将会自动添加到容器中去

如果开发者没有配置layout属性, 默认是按顺序将子组件渲染到在容器中,不考虑子组件的大小和定位。

用法:

// 单个组件
items: {...},
layout: 'fit',    // 布局设置为fit

// 多个子组件
items: [{...}, {...}],
layout: 'hbox', // 布局设置为hbox

每个子组件可以是:

如果子组件是指定的,它的实际组件的类型将根据xtype选项进行实例化. 每个组件都有各自的xtype.

如果没有指定 xtype, 那么将会使用 defaultType,默认是panel.

说明:

Ext使用延迟渲染的方式. 子组件只有在必要的时候渲染. 子组件第一次会自动布局(隐藏的时候不调整大小), 或者是响应一个doLayout布局.

不要指定contentEl 或者 html作为子组件.

布局 重要: 为了保证子组件的大小和位置,通常开发者需要进行布局管理, 必须 通过layout项进行配置。 ...

布局 重要: 为了保证子组件的大小和位置,通常开发者需要进行布局管理, 必须 通过layout项进行配置。

子组件的大小和位置items是根据开发者的配置由布局管理器去创建和管理的。 例如:

如果不明确配置layout到通用容器上(Container or Panel)那么它将使用默认的布局 default layout manager只是将子组件按顺序放到容器中 (如果开发者不需要改变子组件的大小和位置)。

layout 可以指定为对象,或字符串:

指定为对象

用法:

layout: {
    type: 'vbox',
    align: 'left'
}
  • 布局类型

布局类型将会被容器使用,如果没有指定的话 默认使用布局类型Ext.layout.container.Auto.

有效的布局 <code>类型</code> 值:

- Auto - **默认**
- card
- fit
- hbox
- vbox
- anchor
- table
  • 具体的布局配置选项

    每个不同的布局有不同的属性项,具体的参见布局的Ext.layout.container.

指定为字符串

用法:

layout: 'vbox'
  • 布局

    布局类型type将会被当前容器使用 (具体请参见布局类型值清单).

    不同的布局类型有不同特性和属性项,如果开发者需要详细的信息请参见具体的 layout 布局类。

配置默认的布局类型

如果容器类有默认的布局类型 (例如 Toolbar
默认 `Box` 布局), 可以简单配置而没有`type`属性:

xtype: 'toolbar',
layout: {
    // type: 'box',//不需要写
    pack: 'center'
}

一个配置对象,包含一个或多个事件处理函数,在对象初始化时添加到对象。 它应该是addListener指定的一个有效的监听器配置对象, 一次添加多个事件处理函数。

Ext JS 组建的DOM事件

虽然一些Ext JS组件类输出选定的DOM事件(例如"click"、"mouseover"等), 但是这只能通过添加额外的值(如果能)。例如,DataViewitemclick传递被单击的节点。为了通过Component的子元素直接访问DOM事件, 我们需要指定element选项来标识要 添加DOM监听器的Component属性:

new Ext.panel.Panel({
    width: 400,
    height: 200,
    dockedItems: [{
        xtype: 'toolbar'
    }],
    listeners: {
        click: {
            element: 'el', //bind to the underlying el property on the panel
            fn: function(){ console.log('click el'); }
        },
        dblclick: {
            element: 'body', //bind to the underlying body property on the panel
            fn: function(){ console.log('dblclick body'); }
        }
    }
});

一个配置对象或者一个 Ext.ComponentLoader 实例加载组件远程内容.

一个配置对象或者一个 Ext.ComponentLoader 实例加载组件远程内容.

为组件设置margin. margin 可以是一个数值适用于所有边 或者它可以是每个样式的CSS样式规范, 例如: '10 5 3 10'.

设置组件的最大高度值.

警告: 布局管理器应用的任何管理大小的配置将会被此属性覆盖.

设置组件的最大宽度值.

警告: 布局管理器应用的任何管理大小的配置将会被此属性覆盖.

设置为true则禁用列菜单。

Defaults to: false

用于渲染列菜单的可见性选项。 若未指定,则默认与text取值相同。

Defaults to: null

设置组件的最小高度值.

警告: 布局管理器应用的任何管理大小的配置将会被此属性覆盖.

设置组件的最小宽度值.

警告: 布局管理器应用的任何管理大小的配置将会被此属性覆盖.

当鼠标移到该元素, 一个可选的额外的CSS类将被添加到该组件的元素, 并在鼠标移出后删除. ...

当鼠标移到该元素, 一个可选的额外的CSS类将被添加到该组件的元素, 并在鼠标移出后删除. 这可能对添加自定义的 'active' 或者 'hover' 样式的组件有用 或任何其子组件使用标准的CSS规则.

Defaults to: ""

可能的值有: * 'auto' 自动启用水平滚动条(水平溢出:'auto') * 'scroll' 始终启用水平滚动条(水平溢出:'scroll') 默认的水平溢出是'hidden',不能这样指定autoScroll.又自动又始终

可能的值有: * 'auto' 自动启用水平滚动条(水平溢出:'auto') * 'scroll' 始终启用水平滚动条(水平溢出:'scroll') 默认的水平溢出是'hidden',不能这样指定autoScroll.又自动又始终

可能的值有: * 'auto' 自动启用自动垂直滚动条(垂直溢出:'auto') * 'scroll' 始终启用垂直滚动条(垂直溢出:'scroll') 默认的垂直溢出是'hidden',不能这样指定autoScroll.又自动又始终

可能的值有: * 'auto' 自动启用自动垂直滚动条(垂直溢出:'auto') * 'scroll' 始终启用垂直滚动条(垂直溢出:'scroll') 默认的垂直溢出是'hidden',不能这样指定autoScroll.又自动又始终

为组件设置padding. padding 可以是一个数值适用于所有边 或者它可以是每个样式的CSS样式规范, 例如: '10 5 3 10'.

一个对象或者对象数组, 组件将提供自定义功能. 一个有效的插件唯一的要求是包含一个 init 方法, 接收一个 Ext.Component 类型参数. 当组件被创建时, 如果有可用的插件, 组件将会调用每个插件的 init 方法, 并将自身的引用作为方法参数传递给它. 然后, 每个插件就可以调用方法或者响应组件上的事件, 就像需要的那样提供自己的功能.

所使用的数据 renderTpl 除了以下属性值的组件:

  • id
  • ui
  • uiCls
  • baseCls
  • componentCls
  • frame

参见 renderSelectorschildEls 用法示例.

所使用的数据 renderTpl 除了以下属性值的组件:

  • id
  • ui
  • uiCls
  • baseCls
  • componentCls
  • frame

参见 renderSelectorschildEls 用法示例.

一个对象其中包含指定DomQuery 选择器确定创建的子元素渲染过程的属性. ...

一个对象其中包含指定DomQuery 选择器确定创建的子元素渲染过程的属性.

在组件的内部结构呈现根据 renderTpl, 这个对象遍历, 找到的元素作为属性添加到组件使用 renderSelector 属性名称.

例如, 一个的组件渲染标题和描述到它的元素:

Ext.create('Ext.Component', {
    renderTo: Ext.getBody(),
    renderTpl: [
        '<h1 class="title">{title}</h1>',
        '<p>{desc}</p>'
    ],
    renderData: {
        title: "Error",
        desc: "Something went wrong"
    },
    renderSelectors: {
        titleEl: 'h1.title',
        descEl: 'p'
    },
    listeners: {
        afterrender: function(cmp){
            // After rendering the component will have a titleEl and descEl properties
            cmp.titleEl.setStyle({color: "red"});
        }
    }
});

对于一个更快, 但弹性较差, 替代方案达到相同的最终结果 (渲染后组件的子元素属性), 参见 childElsaddChildEls.

指定元素的id, 一个DOM元素或现有的元素,这个组件将被渲染成.

注意:

使用此配置项,如果该组件是一个Container的子元素. 它的职责是 Containerlayout manager 渲染和管理其子项.

当使用此配置, 调用 render() 不是必须的.

也可参见 render .

一个 XTemplate 用于创建此组件的封装内的内部结构 Element. ...

一个 XTemplate 用于创建此组件的封装内的内部结构 Element.

你通常不需要进行设置. 对基类 Ext.ComponentExt.container.Container, 默认值为 null 这意味着它们最最初将被呈现没有内部结构; 他们渲染 Element 为空. 很多专用的ExtJS和Touch 类使用更复杂的DOM结构类, 提供自己的模板定义.

这是为了允许开发者创建应用程序特定的效用与定制的内部结构的组成部分.

在渲染时候, 任何创建的子元素可以自动导入对象属性的使用 renderSelectorschildEls 配置项.

Defaults to: "{%this.renderContent(out,values)%}"

renderer函数是一个拦截者模式,用于改变渲染到单元格的值和样式。 例如:

{
    renderer: function(value){
        if (value === 1) {
            return '1 person';
        }
        return value + ' people';
    }
} .返回要渲染的HTML串.

Defaults to: false

设置为false则该列无法拖拽改变大小。

Defaults to: true

Overrides: Ext.Component.resizable

Ext.resizer.Resizer 只有在自动大小为true的情况下,配置字符串才有效

Defaults to: "all"

如果许多state事件在短时间内被触发,这个缓冲区将被应用。

Defaults to: 100

指定为 true 来约束拖动列不能拖出当前的专栏.

请注意,此配置只适用于列标题包含子列标题的情况下, 例如:

{
    sealed: true
    text: 'ExtJS',
    columns: [{
        text: '3.0.4',
        dataIndex: 'ext304'
    }, {
        text: '4.1.0',
        dataIndex: 'ext410'
    }
}

Defaults to: false

定义浮动组件是否应该有阴影效果. 设置为 true 则自动创建一个 Ext.Shadow 对象, 或者设为string类型的值,用于指定 阴影的显示模式 Ext.Shadow.mode. 设置为 false 则禁用阴影.

Defaults to: "sides"

阴影效果偏移的像素值.

阴影效果偏移的像素值.

如果此属性是一个数字, 解释如下: 0: 无论是宽度还是高度不依赖于内容. ...

如果此属性是一个数字, 解释如下:

  • 0: 无论是宽度还是高度不依赖于内容. 这等效于 false.
  • 1: 宽度依赖内容 (shrink wraps), 但是高度不依赖.
  • 2: 高度依赖内容 (shrink wraps), 但是宽度不依赖.使用默认的.
  • 3: 宽度和高度都依赖于内容 (shrink wrap). 这等效于 true.

在 CSS 方面, shrink-wrap 宽度类似于 inline-block 元素而不是类似一个 block-level 元素. 有些容器布局总是 shrink-wrap 他们的子元素, 忽略这个属性 (e.g., Ext.layout.container.HBox, Ext.layout.container.VBox, Ext.layout.component.Dock).

Defaults to: 2

若需禁止该列排序,则设置为False。 PS: 本地排序/远程排序的配置项为Ext.data.Store.remoteSort.

Defaults to: true

Overrides: Ext.grid.header.Container.sortable

一组事件,当被触发时,应该触发这个对象去保存它的state。默认是none。 stateEvents可以是任何类型的事件支持的对象,包括浏览器或客户端事件。 (例如, ['click', 'customerchange']).

参见 stateful 对于一个解释的保存和恢复的state。

@override 唯一标识符,用于表格的state

非全局唯一标识符。列状态不是单独存在的,它依赖于所在表格的状态。

Overrides: Ext.state.Stateful.stateId

一个试图从启动时保存的state恢复到state的内部属性状态的标志。 对象必定有一个stateId为state被管理。

自动生成的id不能保证稳定的跨页面加载和不能被指望来保存和恢复相同的状态对象。

为state保存工作,state管理的提供者必须被设置为一个实现Ext.state.Provider, 并且覆盖了setget 方法保存和召回name/value对。

 一个内置的实现,Ext.state.CookieProvider是可用的。

设置state提供的当前页面:

Ext.state.Manager.setProvider(new Ext.state.CookieProvider({

   expires: new Date(new Date().getTime()+(1000*60*60*24*7)), //从现在开始后的7天

}));

stateEvents中被列出的事件被触发时, 一个stateful对象试图去保存state。

为了保存state,stateful对象首先序列化它的state通过调用getState

state只有在最初配置,并改变了配置的值, 组件基类来实现{ @link # getState }来保存它的宽度和高度。

Panel类保存它折叠的state除了那个。

Grid类保存它的列state除了它超类的state。

假如有更多的应用state要保存,开发者必须提供一个实现首先 调用超类的方法去继承上面的行为,然后注入新的属性到返回的对象。

通过getState得到的值被传递给Ext.state.Manager.set, 使用配置的Ext.state.Provider,通过stateId来保存对象键。

在构造过程中,stateful对象试图通过调用Ext.state.Manager.get 传送stateId修复它的状态。

作为传递给applyState的对象。默认实现applyState 简单地复制属性的对象,但开发者可以覆盖这个支持更复杂的应用程序状态的恢复。

您可以执行额外的处理状态保存和恢复通过附加处理程序到beforestaterestorestaterestorebeforestatesavestatesave事件。

Defaults to: false

自定义风格规范适用于该组件的元素. 应该是Ext.Element.applyStyles的一个有效参数.

new Ext.panel.Panel({
    title: 'Some Title',
    renderTo: Ext.getBody(),
    width: 400, height: 300,
    layout: 'form',
    items: [{
        xtype: 'textarea',
        style: {
            width: '95%',
            marginBottom: '10px'
        }
    },
    new Ext.button.Button({
        text: 'Send',
        minWidth: '100',
        style: {
            marginBottom: '10px'
        }
    })
    ]
});

当你设置 styleHtmlContent 为 true 的时候, 配置的样式类添加到目标的内容区域.

Defaults to: "x-html"

如果设置为 true,就自动地将这个html嵌入在这个组件 (body for panels) 的内容目标里.

Defaults to: false

如果为true,暂停调用doLayout. 当开发者需要协调同时更新多个组件和容器, 而不是将它们传递为多个参数的数组的时候使用。

Defaults to: false

CSS类名,用于该列的cells。

CSS类名,用于该列的cells。

表头的显示内容,将显示在表头的innerHTML中,支持html标签。 注:若需要显示一个可点击的无文字表头,则可以使用默认值&#160;&nbsp;

Defaults to: "&#160;"

如果为True,则自动调用toFront,当show被调用已经可见的, 浮动的组件。浮动组件的层在最 ...

如果为True,则自动调用toFront,当show被调用已经可见的, 浮动的组件。浮动组件的层在最

Defaults to: true

Ext.grid.column.Template
tpl : String/Ext.XTemplate

XTemplate实例,或XTemplate的配置对象, 用于把Model's data转换为要显示的值。

XTemplate实例,或XTemplate的配置对象, 用于把Model's data转换为要显示的值。

Overrides: Ext.AbstractComponent.tpl

Ext.(X)Template 更新内容区域使用的方法. 参见 Ext.XTemplate.overwrite 默认模式信息.

Defaults to: "overwrite"

设置组件样式. 可以是一个字符串或者字符串数组 (UIs)

Defaults to: "default"

An array of of classNames which are currently applied to this component

Defaults to: []

HeaderContainer默认覆盖权重为0到100之间所有的停靠组件. 它具有更高的优先级 像toolbars一样.

Defaults to: 100

此组件的宽度,以像素为单位。

此组件的宽度,以像素为单位。

此属性提供了一个较短的替代全类型创建对象. 使用 xtype 是最常见的方式来定义组件实例, 特别是在一个容器中. 例如, 在一个表单包含文本域的元素可以显式创建像这样:

 items: [
     Ext.create('Ext.form.field.Text', {
         fieldLabel: 'Foo'
     }),
     Ext.create('Ext.form.field.Text', {
         fieldLabel: 'Bar'
     }),
     Ext.create('Ext.form.field.Number', {
         fieldLabel: 'Num'
     })
 ]

但使用 xtype, 上述成为:

 items: [
     {
         xtype: 'textfield',
         fieldLabel: 'Foo'
     },
     {
         xtype: 'textfield',
         fieldLabel: 'Bar'
     },
     {
         xtype: 'numberfield',
         fieldLabel: 'Num'
     }
 ]

xtype 是多个元素共有, Ext.container.AbstractContainer.defaultType 是另一种方式为所有没有明确xtype的元素明确 xtype:

 defaultType: 'textfield',
 items: [
     { fieldLabel: 'Foo' },
     { fieldLabel: 'Bar' },
     { fieldLabel: 'Num', xtype: 'numberfield' }
 ]

items 数组所有成员现在仅仅是一个"配置对象". 这些对象用于创建和配置组件的实例. 一个配置对象可以使用 Ext.widget手动实例化一个组件:

 var text1 = Ext.create('Ext.form.field.Text', {
     fieldLabel: 'Foo'
 });

 // or alternatively:

 var text1 = Ext.widget({
     xtype: 'textfield',
     fieldLabel: 'Foo'
 });

这种转换的配置对象实例化组件完成时创建容器作为其 {Ext.container.AbstractContainer.initComponent} 的过程的一部分. 就像同一进程的一部分, items 数组 由原来的数组转换成 Ext.util.MixedCollection 示例.

你可以定义自己的 xtype 在一个自定义的 component 指定 xtype 属性在 Ext.define. 例如:

Ext.define('MyApp.PressMeButton', {
    extend: 'Ext.button.Button',
    xtype: 'pressmebutton',
    text: 'Press Me'
});

当给一个自定义组件命名xtype应谨慎, 因为他是唯一的, 所有xtypes共享范围. 第三方组件可考虑使用一个前缀以免冲突.

Ext.define('Foo.form.CoolButton', {
    extend: 'Ext.button.Button',
    xtype: 'ux-coolbutton',
    text: 'Cool!'
});
Defined By

Properties

扩展事件

Defaults to: []

设置这个属性为 'true' 会引起 isLayoutRoot 方法返回 'true' 并且停止寻找最顶级的组件布局. ...

设置这个属性为 'true' 会引起 isLayoutRoot 方法返回 'true' 并且停止寻找最顶级的组件布局.

Defaults to: false

true 表示ID是自动生成而不是通过配置提供。

Defaults to: false

The number of component layout calls made on this object.

Defaults to: 0

标识是否可以拖动组件。

Defaults to: false

只存在于作为容器的子项被插入的浮动组件。

浮动的组件编程方式rendered 将不会有浮动的父级属性

对于floating浮动组件是一个容器的子项,浮动上级将是拥有容器

例如,在一个窗口的下拉列表BoundList 在窗体中, 它的浮动父窗口就是窗体

See floating and zIndexManager

其中加入任何划分元件内的密封元件,以提供图形表示的宽度, 圆角边界. ...

其中加入任何划分元件内的密封元件,以提供图形表示的宽度, 圆角边界. 参见 frame 配置.

这是包含以像素为单位的一个对象为所有四个侧面包含下面属性的组件:

Defaults to: {left: 0, top: 0, right: 0, bottom: 0, width: 0, height: 0}

  • top : Number (optional)

    顶部边框元素的像素宽度.

    Defaults to: 0

  • right : Number (optional)

    右侧边框元素的像素宽度.

    Defaults to: 0

  • bottom : Number (optional)

    底部边框元素的像素宽度.

    Defaults to: 0

  • left : Number (optional)

    左侧边框元素的像素宽度.

    Defaults to: 0

  • width : Number (optional)

    左右边框元素的像素总宽度

    Defaults to: 0

  • height : Number (optional)

    顶部和右侧底部的像素总宽度.

    Defaults to: 0

本对象包含任何有监听器的事件的键。监听器可以在实例上直接设置, 或者在其类或者父类(通过observe) 或者在MVC EventBus上设置。本对象的值为真 (一个非零的数字)和假(0或者undefined)。它们并不代表确切的监听...

本对象包含任何有监听器的事件的键。监听器可以在实例上直接设置, 或者在其类或者父类(通过observe) 或者在MVC EventBus上设置。本对象的值为真 (一个非零的数字)和假(0或者undefined)。它们并不代表确切的监听器数量。 如果事件必须被触发,它的值是真的, 如果没有必要,就是假的。

本属性的设计目的是避免没有监听器时调用fireEvent的开销。 如果fireEvent要调用成百上千次,这尤其有用。 用法:

 if (this.hasListeners.foo) {
     this.fireEvent('foo', this, arg1);
 }

true 在这个类标识对象是 Component或者其子类的实例。

Defaults to: true

True表示列标题下包含子列标题.

True表示列标题下包含子列标题.

该属性用于在运行时判断该实例不是HeaderContainer而是子类:Header。

Defaults to: true

在本类中设置为true将一个对象标识为实例化的Observable或其子类。

Defaults to: true

子组件的所有集合.

子组件的所有集合.

布局计数器 记录布局次数.

Defaults to: 0

创建自定义组件时这是个内部标识. 默认情况下, 此设置为 'true' 这意味着禁用时每个组件都获得一个蒙版. 组件像 FieldContainer, FieldSet, Field, Button, Tab 覆盖这个属性为 false 因为他们希望实现自定义禁用逻辑.

Defaults to: true

组件所属的 Container (当前组件被添加到一个容器中时此值被自动设置)。

注意: 如需访问容器中的子组件参见 itemId.

显示是否是这个组件已经被渲染.

Defaults to: false

本身 获取当前类的引用,此对象被实例化。不同于 statics, this.self是依赖范围,它意味着要使用动态继承。 ...

本身

获取当前类的引用,此对象被实例化。不同于 statics, this.self是依赖范围,它意味着要使用动态继承。 参见 statics 详细对比

Ext.define('My.Cat', {
    statics: {
        speciesName: 'Cat' // My.Cat.speciesName = 'Cat'
    },

    constructor: function() {
        alert(this.self.speciesName); // 依赖 'this'
    },

    clone: function() {
        return new this.self();
    }
});


Ext.define('My.SnowLeopard', {
    extend: 'My.Cat',
    statics: {
        speciesName: 'Snow Leopard'         // My.SnowLeopard.speciesName = 'Snow Leopard'
    }
});

var cat = new My.Cat();                     // alerts 'Cat' 猫
var snowLeopard = new My.SnowLeopard();     // alerts 'Snow Leopard' 雪豹

var clone = snowLeopard.clone();
alert(Ext.getClassName(clone));             // alerts 'My.SnowLeopard'

列头显示标题的Element对象。

列头显示标题的Element对象。

列菜单下拉箭头的Element对象。

列菜单下拉箭头的Element对象。

只存在于floating组件后,他们已提供。

管理该组件的ZIndexManager的参考是z-index。

ZIndexManager维护一个堆栈的浮动组件z轴, 并且还提供了一个单一模态面具下是插入模态浮动组件的可见。

浮动组件可能是 brought to the front or sent to the back of the z轴 堆栈.

这个默认为全局ZIndexManager 浮动组件 他们以编程方式访问rendered.

对于浮动floating组件被添加到一个容器中, ZIndexManager首先回收第一个父类的浮动状态, 如果没有浮动层,全局ZIndexManager就被使用

See floating and zIndexParent

只存在于被插入的floating浮动组件作为子项的容器, 有一个浮动的容器包含在其中。 ...

只存在于被插入的floating浮动组件作为子项的容器, 有一个浮动的容器包含在其中。

对于floating浮动组件是一个容器的子项,zIndexParent将是一个浮动的顶层容器, 负责其所有浮动的子类z-index值。 它提供了ZIndexManager的Z-索引服务, 提供其所有的后代浮动组件。

浮动的组件rendered编程方式呈现, 不会有一个'zIndexParent`属性

例如,在一个窗口这是一个ComboBox的的下拉BoundList 的窗口, 它的zIndexParent,上面显示该窗口,无论被放置在窗口的z-index堆栈。

See floating and zIndexManager

Methods

Defined By

Instance Methods

Creates new Component.

Parameters

  • config : Ext.Element/String/Object

    The configuration options may be specified as either:

    • an element :它被设置为在内部元件和使用它的id作为组分的id
    • a string : 它被假定为是一个现有元素的id和被用作组件id
    • anything else : 它被假定为是一个标准的配置对象,并且被施加到该组件

Returns

Overrides: Ext.AbstractComponent.constructor

Adds 向当前容器中添加 Component(s).

描述:

具体说明:

如果子组件已经添加并渲染了,调用add的时候, 它将会渲染一个新的到父容器里面.

如果 配置了子组件的布局管理 layout, 容器在添加到时候会重新计算它的内部布局.

需要注意的是默认的布局管理器只是简单地按顺序呈现子组件 到内容区域,其后的执行不会调整子组件的大小.

如果要添加多个新的子组件,可以把它们作为一个数组传递给方法, 一次执行,这样只重新布局一次,以提高性能.

tb = new Ext.toolbar.Toolbar({
    renderTo: document.body
});  // toolbar is rendered
// add multiple items.
// (defaultType for Toolbar is 'button')
tb.add([{text:'Button 1'}, {text:'Button 2'}]);

如果要添加的组件在已经存在组件之间,请使用insert 方法.

警告:

直接管理容器的BorderLayout布局管理器的组件可能不会被删除 或添加。具体参见BorderLayout

Parameters

Returns

此方法添加解析到的每个参数到 childEls 数组.

从代表此组件的顶层元素添加 CSS 类.

This method has been deprecated since 4.1

Use addCls instead.

Parameters

Returns

从代表此组件的顶层元素添加 CSS 类.

Parameters

Returns

添加一个 cls 到 uiCls 数组, 这也将调用 addUIClsToElement 并增加到该组件的所有元素.

Parameters

  • classes : String/String[]

    一个字符串或一个字符串数组添加到 uiCls

  • skip : Object

    (Boolean) skip 设置为 True 跳过添加到类. (通过返回值可以添加到类)

( Object config )private

添加配置

Parameters

向本Observable可能触发的事件列表中添加指定的事件。

Parameters

  • eventNames : Object/String...

    要么是有事件名作为属性,属性值为 true的对象。例如:

    this.addEvents({
        storeloaded: true,
        storecleared: true
    });
    

    要么是作为参数的任意个数的事件名。例如:

    this.addEvents('storeloaded', 'storecleared');
    

Sets up the focus listener on this Component's focusEl if it has one.

Form Components which must implicitly participate in tabbing order usually have a naturally focusable element as their focusEl, and it is the DOM event of that recieving focus which drives the Component's onFocus handling, and the DOM event of it being blurred which drives the onBlur handling.

If the focusEl is not naturally focusable, then the listeners are only added if the FocusManager is enabled.

Parameters

( String/Object eventName, [Function fn], [Object scope], [Object options] )
向本对象添加一个事件处理函数,例如: myGridPanel.on("mouseover", this.onMouseOver, this); 这个方法也允许传递单个参数,参数为一个 包含指定多个事件的属性的配置对象。例如: ...

向本对象添加一个事件处理函数,例如:

myGridPanel.on("mouseover", this.onMouseOver, this);

这个方法也允许传递单个参数,参数为一个 包含指定多个事件的属性的配置对象。例如:

myGridPanel.on({
    cellClick: this.onCellClick,
    mouseover: this.onMouseOver,
    mouseout: this.onMouseOut,
    scope: this // Important. Ensure "this" is correct during handler execution
});

你也能为每个事件处理函数单独指定选项:

myGridPanel.on({
    cellClick: {fn: this.onCellClick, scope: this, single: true},
    mouseover: {fn: panel.onMouseOver, scope: panel}
});

也能使用在特定作用域的方法。注意 必须指定scope:

myGridPanel.on({
    cellClick: {fn: 'onCellClick', scope: this, single: true},
    mouseover: {fn: 'onMouseOver', scope: panel}
});

Parameters

  • eventName : String/Object

    被监听的事件名。 也可以是属性名字是事件名字的对象。

  • fn : Function (optional)

    事件调用的方法, 或者如果指定了scope,在指定scope的方法名*。 会被调用, 参数为fireEvent的参数加上下述options参数。

  • scope : Object (optional)

    事件处理函数执行的作用域(this应用的上下文) 如果省略, 默认为触发事件的对象。

  • options : Object (optional)

    包含事件处理函数配置的对象。

    注意: 不像ExtJS 3.x, options对象也会作为最后一个参数 传递给每一个事件处理函数。

    这个对象可能包含以下任何一个属性:

    • scope : Object

      事件处理函数执行的作用域(this应用的上下文) 如果省略, 默认为触发事件的对象。

    • delay : Number

      事件触发后,调用事件处理函数延时毫秒数。

    • single : Boolean

      设置为true添加一个事件处理函数,只处理下一次触发的事件, 然后移除这个函数。

    • buffer : Number

      使事件处理函数在Ext.util.DelayedTask中调度运行, 延时指定的毫秒数。如果事件在这段事件再次触发, 原先的事件处理函数再调用, 新的事件处理函数接替。

    • target : Ext.util.Observable

      只有当事件在目标Observable上触发时调用事件处理函数, 如果事件是从Observable的子类起泡的,不会调用事件处理函数

    • element : String

      这个选项只对绑定在Components上的监听器有效。 Component的一个属性名,这个属性引用一个待添加监听器的元素

      这个选项在Component构造过程中向Components的元素添加DOM事件监听器有用。 这些元素只有在Component渲染之后才会存在。 例如, 向Panel的body中添加click监听器:

        new Ext.panel.Panel({
            title: 'The title',
            listeners: {
                click: this.handlePanelClick,
                element: 'body'
            }
        });
      

      组合选项

      使用options参数, 可以组合不同类型的监听器:

      一个延时的一次性监听器:

      myPanel.on('hide', this.handleClick, this, {
          single: true,
          delay: 100
      });
      
向任何Observable对象(或者Ext.Element)添加监听器, 当组件被销毁时,监听器自动被移除 ...

向任何Observable对象(或者Ext.Element)添加监听器, 当组件被销毁时,监听器自动被移除

Parameters

  • item : Ext.util.Observable/Ext.Element

    添加监听器的目标项。

  • ename : Object/String

    事件名或者包含的事件名属性的对象。

  • fn : Function

    (可选的) 如果ename参数是事件名, 这就是一个事件处理函数。

  • scope : Object

    (可选的) 如果ename参数是事件名, 这就是(this引用的上下文) 事件处理函数执行的作用域。

  • opt : Object

    (可选的)如果ename参数是事件名, 这就是addListener的选项。

( Object name, Object member )private

Parameters

( Object state, String propName, [String value] ) : Booleanprotected

如果不是默认或配置值对象, 保存属性给定的状态.

Parameters

  • state : Object

    状态对象

  • propName : String

    此对象要保存的属性名称.

  • value : String (optional)

    状态属性的值 (defaults to this[propName]).

Returns

  • Boolean

    返回状态对象或当状态是空返回一个新的对象并保存该属性.

添加事件,这将触发state才可以保存。 如果第一个参数是一个数组,数组中的每一个元素就是state的事件。 否则,每个参数传递给该方法的名称是一个state的事件。

Parameters

方法, 添加一个特定的 UI + uiCls 到组件元素. 可以覆盖不仅仅是组件元素的 UI.

Parameters

  • ui : String

    从元素中删除的 UI

Method which adds a specified UI to the components element.

( Object xtype )private

添加 Xtype

Parameters

( Number width, Number height, Number oldWidth, Number oldHeight )protectedtemplate

Called by the layout system after the Component has been layed out.

This is a template method. a hook into the functionality of this class. Feel free to override it in child classes.

Parameters

  • width : Number

    The width that was set

  • height : Number

    The height that was set

  • oldWidth : Number

    The old width. undefined if this was the initial layout.

  • oldHeight : Number

    The old height. undefined if this was the initial layout.

( [Function callback], [Object scope] )protectedtemplate
容器隐藏后调用的函数 获取通过相同的回调范围和作用范围`。 ...

容器隐藏后调用的函数

获取通过相同的回调范围作用范围`。

This is a template method. a hook into the functionality of this class. Feel free to override it in child classes.

Parameters

在容器完成子组件布局(并且渲染了必须的子组件以后)以后调用.

This is a template method. a hook into the functionality of this class. Feel free to override it in child classes.

Parameters

( )protectedtemplate
允许完成渲染之后添加行为。在这个阶段,组件的元素 根据配置已经有了样式, 已经添加了任意CSS类名, 具有配置的可见性和启用状态。 ...

允许完成渲染之后添加行为。在这个阶段,组件的元素 根据配置已经有了样式, 已经添加了任意CSS类名, 具有配置的可见性和启用状态。

This is a template method. a hook into the functionality of this class. Feel free to override it in child classes.

Template method called after a Component has been positioned.

This is a template method. a hook into the functionality of this class. Feel free to override it in child classes.

Parameters

( [String/Ext.Element animateTarget], [Function callback], [Object scope] )protectedtemplate
组件显示后调用 相同的参数被传递 ...

组件显示后调用

相同的参数被传递

This is a template method. a hook into the functionality of this class. Feel free to override it in child classes.

Parameters

( Ext.Component/Ext.Element/HTMLElement/String element, [String position], [Number[] offsets] ) : Ext.Component

将此浮动组件对齐到指定的元素(element)

Parameters

  • element : Ext.Component/Ext.Element/HTMLElement/String

    要对齐的元素或者 Ext.Component. 如果此参数为组件,则其必须是一个 component 实例. 如果是一个字符串形式的id, 将被当做元素 element 的 id.

  • position : String (optional)

    要对齐的位置 (请参考 Ext.Element.alignTo 了解更多细节).

    Defaults to: "tl-bl?"

  • offsets : Number[] (optional)

    位置的偏移,格式为 [x, y]

Returns

在 this 这个对象上执行自定义动画.

动画方法适用于 Component 类和 Element 类. 它在指定的时间内,对this对象的特定属性进行动画.

唯一的参数是一个配置对象, 该对象定义了开始属性值, 结束属性值,以及描述时间线的属性.

对一个 Element 执行动画

当一个元素进行动画时, 下列的属性都可定义在 from, to, 以及 keyframe 这几个配置对象中:

  • x - 页面 X 位置,单位:像素.

  • y - 页面 Y 位置,单位:像素.

  • left - 元素的 CSS left 值. 必须指定单位(比如: "6px").

  • top - 元素的 CSS top 值. 必须指定单位(比如: "6px").

  • width - 元素的 CSS width 值. 必须指定单位(比如: "6px").

  • height - 元素的 CSS height 值. 必须指定单位(比如: "6px").

  • scrollLeft - 元素的 scrollLeft 值.

  • scrollTop - 元素的 scrollLeft 值.

  • opacity - 元素的 opacity 值. 透明度,值只能位于 01之间.

需要注意的是, 如果动画一个被 Ext Component 所使用的元素,却不以某种方式通知组件Component 元素改变过后的状态, 可能会导致错误的 Component 行为. 这是因为 Component会继续使用元素旧的状态. 想要规避这个问题, 直接对Components 特定的属性值进行动画即可(而不要动画其内部的元素).

Animating a Component

当组件进行动画的时候, 下列的属性都可定义在 from, to, and keyframe 这几个配置对象中:

  • x - 组件在页面内的 X 位置,单位:像素.

  • y - 组件在页面内的 Y 位置,单位:像素.

  • left - 组件的 left 值,单位:像素.

  • top - 组件的 top 值,单位:像素.

  • width - 组件的 width 值,单位:像素.

  • height - 组件的 height 值,单位:像素.

  • dynamic - 指定为 true, 则动画的每一帧都会 更新组件的布局 (如果是容器的话). 需要注意,每次组件大小改变,立即就重新进行布局是一种昂贵的操作.请根据实际需要进行取舍

要将一个 Window 通过动画效果改变大小, 确保其内部的布局,以及所有的阴影都正确,代码如下:

myWindow = Ext.create('Ext.window.Window', {
    title: 'Test Component animation',
    width: 500,
    height: 300,
    layout: {
        type: 'hbox',
        align: 'stretch'
    },
    items: [{
        title: 'Left: 33%',
        margins: '5 0 5 5',
        flex: 1
    }, {
        title: 'Left: 66%',
        margins: '5 5 5 5',
        flex: 2
    }]
});
myWindow.show();
myWindow.header.el.on('click', function() {
    myWindow.animate({
        to: {
            width: (myWindow.getWidth() == 500) ? 700 : 500,
            height: (myWindow.getHeight() == 300) ? 400 : 300,
        }
    });
});

基于效率和性能的考虑, 默认情况下, Window 的内部布局只在其达到 "to" 所指定的大小时才进行刷新. 如果需要动态更新 Window 的子组件, 可以指定动画的属性 dynamic: true , 此时两个子item在动画过程中都保持其比例.

Parameters

  • config : Object

    一个对象,包含动画相关的属性,这些属性包括: 指定起始状态,结束状态,以及动画的时间线 相关的值. 下面所列出的属性中,只有 to 是强制必须有的.

    config的属性值包括:

    • from : Object

      一个对象,指定动画开始时的相关CSS属性值. 如果没有指定,则默认使用元素当前实际的值. 实际的属性可能受此对象前面的动画所影响. 参见下面的元素与组件动画小节.

    • to : Object

      一个对象,指定动画结束时需要达到的相关CSS属性值.

    • duration : Number

      每次动画的持续时间,单位: 毫秒 milliseconds.

    • easing : String

      一个字符串值.用于描述 如何从默认的线下 变为 非线性 的速率的类型. 其值 可以 是下列英文字符串 之一:

      • ease
      • easeIn 开始慢,随后加速
      • easeOut 开始快,随后减速
      • easeInOut
      • backIn
      • backOut
      • elasticIn (弹性in?)
      • elasticOut (弹性out?)
      • bounceIn (反弹进入?)
      • bounceOut (反弹退出?)
    • keyframes : Object

      关键帧; 此参数是一个描述在时间轴(时间线)中特定点动作属性的对象. 其包含的属性, 名称是时间轴百分比的数字,对应的值指定在这个点的动画状态.

    • listeners : Object

      这是一个标准的 监听器 配置对象, 可用于在beforeanimate 事件 或者 afteranimate 事件中注入行为.

Returns

私有方法,设置组件内部的元素引用.

Parameters

Sets references to elements inside the component. This applies renderSelectors as well as childEls.

应用状态对象。这应该在子类中被覆盖处理更复杂的state操作。 默认应用state属性到当前对象。

Parameters

实用的包装, 挂起所有组件的布局为给定的函数作用期限.

Parameters

  • fn : Function

    要执行的方法.

  • scope : Object (optional)

    The scope (this reference) in which the specified function is executed.

( Number adjWidth, Number adjHeight )protectedtemplate

Occurs before componentLayout is run. Returning false from this method will prevent the componentLayout from being executed.

This is a template method. a hook into the functionality of this class. Feel free to override it in child classes.

Parameters

  • adjWidth : Number

    The box-adjusted width that was set

  • adjHeight : Number

    The box-adjusted height that was set

Invoked before the Component is destroyed.

This is a template method. a hook into the functionality of this class. Feel free to override it in child classes.

在 componentLayout前执行. 如果返回false componentLayout方法不会执行.

This is a template method. a hook into the functionality of this class. Feel free to override it in child classes.

Template method called before a Component is positioned.

Parameters

( )protectedtemplate

显示之前调用组件。

This is a template method. a hook into the functionality of this class. Feel free to override it in child classes.

泡沫起来组件/容器的层次结构,每个组件调用指定的功能。 (this)函数调用作用域,将规定的范围或当前组件。该函数的参数将提供的 args或当前组件。如果在任何时候,该函数返回false泡沫停止。

Parameters

  • fn : Function

    调用的函数

  • scope : Object (optional)

    函数的作用域,默认当前节点

  • args : Array (optional)

    调用函数的参数,默认当前组件

Returns

( Array/Arguments ) : Objectdeprecatedprotected
调用原来的方法,这是以前的override重写 Ext.define('My.Cat', { constructor: function() { alert("I'm a cat!"); } }); ...

调用原来的方法,这是以前的override重写

Ext.define('My.Cat', {
    constructor: function() {
        alert("I'm a cat!");
    }
});

My.Cat.override({
    constructor: function() {
        alert("I'm going to be a cat!");

        this.callOverridden();

        alert("Meeeeoooowwww");
    }
});

var kitty = new My.Cat(); // alerts "I'm going to be a cat!"
                          // alerts "I'm a cat!"
                          // alerts "Meeeeoooowwww"

This method has been deprecated since 4.1

版本 使用 callParent 代替.

Parameters

  • : Array/Arguments

    参数的参数,数组或'参数'对象 来自当前方法,例如: this.callOverridden(arguments)

Returns

  • Object

    返回调用重写方法的结果。

( Array/Arguments args ) : Objectprotected

所谓的"parent"方法是指当前的方法。 这是以前的方法派生或重写(参见 Ext.define)。

 Ext.define('My.Base', {
     constructor: function (x) {
         this.x = x;
     },

     statics: {
         method: function (x) {
             return x;
         }
     }
 });

 Ext.define('My.Derived', {
     extend: 'My.Base',

     constructor: function () {
         this.callParent([21]);
     }
 });

 var obj = new My.Derived();

 alert(obj.x);  // alerts 21

这可以用来重写如下:

 Ext.define('My.DerivedOverride', {
     override: 'My.Derived',

     constructor: function (x) {
         this.callParent([x*2]); // 调用原来的My.Derived构造
     }
 });

 var obj = new My.Derived();

 alert(obj.x);  // 现在提示 42

This also works with static methods.

 Ext.define('My.Derived2', {
     extend: 'My.Base',

     statics: {
         method: function (x) {
             return this.callParent([x*2]); // 调用 My.Base.method
         }
     }
 });

 alert(My.Base.method(10);     // alerts 10
 alert(My.Derived2.method(10); // alerts 20

然后,它也可以重写静态方法。

 Ext.define('My.Derived2Override', {
     override: 'My.Derived2',

     statics: {
         method: function (x) {
             return this.callParent([x*2]); // 调用 My.Derived2.method
         }
     }
 });

 alert(My.Derived2.method(10); // 现在提示 40

Parameters

  • args : Array/Arguments

    这个参数, 通过当前方法得到数组或者 arguments 对象, 例如: this.callParent(arguments)

Returns

  • Object

    返回调用父类的方法的结果。

此组件上取消任何递延重点

级联调用指定方法的容器结构树 (它本身会被第一个调用), 函数的参数将会作为参数提供的给当前调用的函数。 ...

级联调用指定方法的容器结构树 (它本身会被第一个调用), 函数的参数将会作为参数提供的给当前调用的函数。 如果函数返回false将会停止级联当前分支。

Parameters

  • fn : Function

    调用函数

  • scope : Object (optional)

    函数的作用域 (默认是当前容器)

  • args : Array (optional)

    调用函数的参数集合.当前容器会一直在参数集合的最后一个

Returns

将此组件定位到父容器的中心.

Returns

获取符合匹配选项的第一层子组件. 匹配选项必须是一个符合Ext.ComponentQuery的选择器.

Parameters

移除本对象的包括受管理的监听器在内的所有监听器

移除本对象的所有受管理的监听器

克隆当前组件使用原来的配置传入到该实例的默认值。

Parameters

  • overrides : Object

    覆盖一个新的配置包含任何属性来覆盖在克隆版本。 可以通过对这个对象的id属性,否则将产生以避免重复。

Returns

确保plugins数组包含完全构建插件实例. 这个将所有的配置转换成他们相应的实例.

( String eventName, Array args, Boolean bubbles )private

Continue to fire event.

Parameters

This method converts an "{x: x, y: y}" object to a "{left: x+'px', top: y+'px'}" object. The returned object contains the styles to set to effect the position. This is overridden in RTL mode to be "{right: x, top: y}".

Parameters

( Object newName, [Array beginEnd] ) : Functionprivate

Creates an event handling function which refires the event from this object as the passed event name.

Parameters

  • newName : Object
  • beginEnd : Array (optional)

    The caller can specify on which indices to slice

Returns

禁用.

Parameters

  • silent : Boolean (optional)

    通过设置 true 将解除 'disable' 事件的触发.

    Defaults to: false

Called from the selected frame generation template to insert this Component's inner structure inside the framing structure.

When framing is used, a selected frame generation template is used as the primary template of the #getElConfig instead of the configured renderTpl. The renderTpl is invoked by this method which is injected into the framing template.

Parameters

处理自动渲染。 漂浮的组件可能有ownerCt。如果要限制它们,将它们限制在 ownerCt内,并在本地管理z-index。漂浮的组件总是渲染到document.body。

当你改变这个组件一些东西, 需要重新计算组件的布局, 需要调用此方法.

Returns

将此浮动组件移入到一个限制区域.

默认情况下,此组件被限制在其父容器中, 或在其被渲染的元素中.

有两个可选的约束范围的参数:

Parameters

  • constrainTo : String/HTMLElement/Ext.Element/Ext.util.Region (optional)

    某元素(Element) 或者此组件将被限制在其中的 Region. 默认是此浮动组件将被渲染到其中的元素.

手动强制这个容器的布局进行重新计算。大多数情况下框架自动完成刷新布局。

Returns

  • Ext.container.Container

    this 译者注:doLayout方法比较耗性能。如果添加多个组件,只要在最后调用doLayout,不要add一个 doLayout一次(remove时也是如此).

检索容器的第一层子组件. 匹配选项必须是一个符合Ext.ComponentQuery的选择器.

Parameters

  • selector : String (optional)

    一个Ext.ComponentQuery的选择器. 如果没有指定,返回第一个子组件..

启用组件

Parameters

  • silent : Boolean (optional)

    通过设置 true 将解除 'enable' 事件的触发.

    Defaults to: false

通过调用this.getBubbleTarget()(如果存在)允许本Observable对象触发的事件沿着继承体系起泡 在Observable基类中没有实现类。 ...

通过调用this.getBubbleTarget()(如果存在)允许本Observable对象触发的事件沿着继承体系起泡 在Observable基类中没有实现类。

这通常被Ext.Components用来将事件起泡到它的容器。 见Ext.Component.getBubbleTarget。Ext.Component中的默认实现 返回Component的直接容器。但是如果需要一个明显的target, 它可以被重写 以更快地访问需要的target。

使用范例:

Ext.override(Ext.form.field.Base, {
    //  Add functionality to Field's initComponent to enable the change event to bubble
    initComponent : Ext.Function.createSequence(Ext.form.field.Base.prototype.initComponent, function() {
        this.enableBubble('change');
    }),

    //  We know that we want Field's events to bubble directly to the FormPanel.
    getBubbleTarget : function() {
        if (!this.formPanel) {
            this.formPanel = this.findParentByType('form');
        }
        return this.formPanel;
    }
});

var myForm = new Ext.formPanel({
    title: 'User Details',
    items: [{
        ...
    }],
    listeners: {
        change: function() {
            // Title goes red if form has been modified.
            myForm.header.setStyle('color', 'red');
        }
    }
});

Parameters

  • eventNames : String/String[]

    待起泡的事件名,或者事件名数组。

确保组件添加到document.body。如果组件 渲染到了Ext.getDetachedBody, 组件然后被附加到document.body。 ...

确保组件添加到document.body。如果组件 渲染到了Ext.getDetachedBody, 组件然后被附加到document.body。 重建所有配置的位置。

Parameters

  • runLayout : Boolean (optional)

    设置为true运行组件的布局。

    Defaults to: false

( Object config )private

拓展

Parameters

找一个容器上面这个组件在任何级别的自定义函数。 如果传递的函数返回true,容器将被退回。

请参见up方法

Parameters

  • fn : Function

    自定义函数调用的参数(container, this component).

Returns

找一个容器上面这个组件在任何级别的xtype或类 请参阅up该方法 ...

找一个容器上面这个组件在任何级别的xtype或类

请参阅up该方法

Parameters

  • xtype : String/Ext.Class

    一个组件的xtype的xtype串直接的组件或类

Returns

This method visits the rendered component tree in a "top-down" order. That is, this code runs on a parent component before running on a child. This method calls the onRender method of each component.

Parameters

  • containerIdx : Number

    The index into the Container items of this Component.

使用传递过来的参数(去掉事件名,加上传递给addListener的options对象 )触发指定的事件。 ...

使用传递过来的参数(去掉事件名,加上传递给addListeneroptions对象 )触发指定的事件。

通过调用enableBubble,一个事件 能被设置为沿着Observable的继承体系(见Ext.Component.getBubbleTarget)向上起泡。

Parameters

  • eventName : String

    待触发的事件名。

  • args : Object...

    传递给事件处理函数的可变数量的参数

Returns

  • Boolean

    如果任何一个事件处理函数返回false,就返回false,否则返回true。

聚焦此组件。

Parameters

  • selectText : Boolean (optional)

    如果适用,true也可以选择这个组件中的文本

  • delay : Boolean/Number (optional)

    延迟焦点的毫秒数(true:10毫秒)。

Returns

  • Ext.Component

    聚焦的Component。通常的 this的组件。 一些容器可能委托焦点到的(Window可以做到这一点通过他们 的defaultFocus 的配置选项。

Forces this component to redo its componentLayout.

This method has been deprecated since 4.1.0

Use updateLayout instead.

返回此元素当前是否有正在进行或在队列中的动画效果, 没有则返回 false.

Returns

  • Ext.fx.Anim/Boolean

    如果元素有正在进行的动画效果则返回 true, 否则返回 false

获取当前框测量相关元件的组件。

Parameters

  • local : Boolean (optional)

    如果真正的元素的左侧和顶部,而不是页面的XY返回。

    Defaults to: false

Returns

  • Object

    对象的格式{X,Y,宽度,高度}

Gets the bubbling parent for an Observable

Returns

为Observable的fireEvent方法提供链接, 它沿着继承结构进行冒泡操作.

Returns

返回传入元素指定的子组件.

Parameters

  • el : Ext.Element/HTMLElement/String

    元素(或者是元素ID).

  • deep : Boolean

    深度如果为true,返回最深层级的子组件,其中包含传入的元素.

Returns

获取启用/禁用的子组件的集合

Returns

返回HeaderContainer中grid columns子项的个数. Group Columns是HeaderContainer集合. 所有的grid columns都会返回,包括隐藏列在内.

返回一个数组,对应的所有直接子菜单CheckItems在容器中都被 配置为hideable可以隐藏的 ...

返回一个数组,对应的所有直接子菜单CheckItems在容器中都被 配置为hideable可以隐藏的

Parameters

获取columns列的详细属性. 返回的是一个数组包含了所有的列和它们的配置项

  • dataIndex
  • align
  • width
  • id
  • columnId - 用于创建一个CSS类去识别
  • cls tdCls配置对象

Parameters

用于查看容器的items 属性并且直接返回这个容器.

Parameters

( Object name )private

得到配置项

Parameters

私有方法,获取此浮动组件能移动的范围(x/y 偏移)

Parameters

Returns

返回该列关联的编辑控件。 若未关联则返回false。 若编辑控件还未实例化,则先实例化再返回。 注:仅适用于表格配置了Editing插件。

Parameters

  • record : Object

    被编辑的Model对象.

  • defaultField : Object

    默认的表单field类的配置对象

Returns

提取代表这个组件的顶层元素.

Returns

返回容器中获得焦点的元素和容器本身. 默认是容器的目标元素。 使用可以获得焦点的元素(如窗口和按钮)的子类的时候,应该重写focus方法。

Returns

Overrides: Ext.AbstractComponent.getFocusEl

On render, reads an encoded style attribute, "background-position" from the style of this Component's element. This information is memoized based upon the CSS class name of this Component's element. Because child Components are rendered as textual HTML as part of the topmost Container, a dummy div is inserted into the document to receive the document element's CSS class name, and therefore style attributes.

Parameters

获取所有可见列的宽度和.

Parameters

返回一个数组的所有列映射到Store里面的字段的数组. 这些列只是最底层的columns集合 不会返回含有子headers的 分组 headers.

Parameters

  • refreshCache : Boolean

    如果忽略不传,将会从缓存中去获取。如果为true将会刷新缓存并返回。

Returns

根据叶子级头的索引返回列,不管什么结构嵌套的。

Parameters

  • index : Number

    指定列的索引.

返回叶子所在的索引,不管它是以什么结构嵌套的。

如果是一个group header,将会返回它的第一个叶子所在的索引.

Parameters

Returns

  • Number

    返回指定列的索引

获取组件的基本元素当前高度.

Returns

查询所有隐藏columns列,在查询之前为了确保是否存在隐藏列,请开发者确认一下header菜单是否是启用的状态。 译者注:(类似于id这些永久不需要显示给用户看的,不要配置到header中再设置它隐藏)

Parameters

获取此组件的 ID. 如果尚未设置则自动生成一个 ID.

Returns

当该列为组合列时返回false,否则返回该列的序号

Returns

得到初始化配置项

Parameters

本函数使用传递给onRender的位置参数并返回一个 DOM元素,你能在insertBefore中使用它。 ...

本函数使用传递给onRender的位置参数并返回一个 DOM元素,你能在insertBefore中使用它。

Parameters

Returns

  • HTMLElement

    在insertBefore中使用的DOM元素

返回实现容器的布局管理器layout. 如果布局还没有实例化,将会自动设置完成第一次实例化

Returns

获取所以的"叶子"菜单节点并返回已经checked的个数。 只是可以通过菜单隐藏的列(hideable:true)

获取这个组件的 Ext.ComponentLoader .

Returns

获取menu (如果不存在会自动创建)

返回header container中的所有的放置到header 共享的菜单的菜单项的一个数组 ...

返回header container中的所有的放置到header 共享的菜单的菜单项的一个数组

Returns

Returns the CSS style object which will set the Component's scroll styles. This must be applied to the target element.

获取指定的 pluginId 的已绑定到组件的插件.

Parameters

Returns

获取组件相关元素当前的xy坐标

Parameters

  • local : Boolean (optional)

    如果为true就返回元素的左侧和顶部位置,而不会返回页面的xy坐标

    Defaults to: false

Returns

  • Number[]

    元素的xy坐标(例如:[100,200])

获取这个组件的底层元素的当前大小.

Returns

  • Object

    一个包含元素的大小对象 {width: (元素宽度), height: (元素高度)}

返回一个对象, 描述如何管理这个组件的宽度和高度. 这些对象是共享的, 不应该被修改.

Parameters

Returns

返回按该列排序的参数对象 默认返回dataIndex,大多数情况下不需要覆盖本函数。 ...

返回按该列排序的参数对象 默认返回dataIndex,大多数情况下不需要覆盖本函数。

Returns

为AbstractComponent类提供的默认状态收集方法.

此方法返回尺寸设置如 flex, anchor, widthheight 随着 collapsed 状态.

子类实现更复杂的状态应该调用父类的实现, 如果基础的状态需要保存, 要将他们的状态应用到结果.

如果组件有一个 stateId 和 他们作为 StateProvider 文档配置, 需要注意的是组件状态只会被保存.

Returns

Overrides: Ext.state.Stateful.getState

获取this对象的state id

Returns

  • String

    返回“stateId”或隐式id来说明组件配置。

Returns an offscreen div with the same class name as the element this is being rendered. This is because child item rendering takes place in a detached div which, being not part of the document, has no styling.

Parameters

This is used to determine where to insert the 'html', 'contentEl' and 'items' in this component.

Parameters

返回一个数组包含所有的 可见 最底层的columns集合。 不会返回含有子headers的 分组 headers。

Parameters

  • refreshCache : Boolean

    如果忽略不传,将会从缓存中去获取。如果为true将会刷新缓存并返回。

Returns

通过column索引去查询,如果当前查询的列是 可见的 返回它, 反之,则返回它的后面一个或者前面一个 . ...

通过column索引去查询,如果当前查询的列是 可见的 返回它, 反之,则返回它的后面一个或者前面一个 .

Parameters

  • index : Number

    最近的可见列的索引.

当该列为组合列时返回false,否则返回该列的在所有可显示列中的序号。

Returns

获取组件的基本元素当前宽度.

Returns

获取此组件的xtype注册Ext.ComponentManager。 对于列表所有可用xtypes,请看到Ext.Component 头。用法示例:

var t = new Ext.form.field.Text();
alert(t.getXType());  // alerts 'textfield'

Returns

返回这个组件的 xtype 层次字符串, 用斜杠分隔. 所有可用的xtype列表, 参见 Ext.Component 类头部.

如果使用你自己的子类, 请注意, 组件必须注册它自己的 xtype 值以便区别于继承的xtype.

示例用法:

var t = new Ext.form.field.Text();
alert(t.getXTypes());  // alerts 'component/field/textfield'

Returns

返回此元素当前是否有正在进行或在队列中的动画效果, 没有则返回 false.

This method has been deprecated

废弃的方法; 4.0以后使用 getActiveAnimation 替代

Returns

  • Ext.fx.Anim/Boolean

    如果元素有正在进行的动画效果则返回 true, 否则返回 false

检查该元素的 DOM 节点上的指定 CSS 类是否存在.

Parameters

  • className : String

    要检查的 CSS 类

Returns

  • Boolean

    如果类存在返回 true, 否则返回 false.

( Object config )private

根据名称判断配置项是否存在

Parameters

检查本对象是否有特定事件的监听器, 或者检查事件是否起泡。 检查的结果表明事件是否需要出发。

Parameters

  • eventName : String

    待检查的事件名

Returns

  • Boolean

    如果事件被监听或者起泡,返回true, 否则返回false

检查是否有当前指定的 uiCls

Parameters

隐藏这个组件,将其设置为不可见使用配置的hideMode.

Parameters

  • animateTarget : String/Ext.Element/Ext.Component (optional)

    只适用于floating浮动组件, 如Windows或ToolTips,提示, 或定期组件已配置浮动:floating: true。**。目标组件应动画,而隐藏。

    Defaults to: null

  • callback : Function (optional)

    回调函数调用后的组件是隐藏的。

  • scope : Object (optional)

    范围(参考),其中执行回调。默认这个组件。

Returns

( )protectedtemplate
在初始化组件模板方法是一个重要的组件的初始化步骤。它的目的 是要实现Ext.Component提供任何所需的构造逻辑函数每个子类的。 ...

在初始化组件模板方法是一个重要的组件的初始化步骤。它的目的 是要实现Ext.Component提供任何所需的构造逻辑函数每个子类的。 在初始化组件模板被创建的类的方法,

首先会调用层次结构向上Ext.Component被称为此后与每个在InitComponent的方法。 这使得它很容易实现,如果需要的话,重载的构造函数逻辑的组件层次结构中的任何步骤。

在InitComponent方法必须包含一个调用callParent以确保父类的在InitComponent方法是传递给构造函数的called. All的配置选项`被称为前在InitComponent,所以你可以简单地访问他们的this.someOption

下面的例子演示了如何使用一个动态的一个按钮的文本字符串的类的实例的时候。

Ext.define('DynamicButtonText', {
    extend: 'Ext.button.Button',

    initComponent: function() {
        this.text = new Date();
        this.renderTo = Ext.getBody();
        this.callParent();
    }
});

Ext.onReady(function() {
    Ext.create('DynamicButtonText');
});

This is a template method. a hook into the functionality of this class. Feel free to override it in child classes.

( Object config ) : Objectprotected
这个类的初始化配置。典型例子: Ext.define('My.awesome.Class', { // 这是默认配置 config: { name: 'Awesome', isAwes...

这个类的初始化配置。典型例子:

Ext.define('My.awesome.Class', {
    // 这是默认配置
    config: {
        name: 'Awesome',
        isAwesome: true
    },

    constructor: function(config) {
        this.initConfig(config);
    }
});

var awesome = new My.awesome.Class({
    name: 'Super Awesome'
});

alert(awesome.getName()); // 'Super Awesome' 超级棒

Parameters

Returns

  • Object

    mixins 混入原型 键-值对

Initialized the renderData to be used when rendering the renderTpl.

Returns

  • Object

    Object with keys and values that are going to be applied to the renderTpl

Initializes the renderTpl.

Returns

根据结构初始化state对象

Converts style definitions to String.

Parameters

Returns

  • String

    A CSS style string with style, padding, margin and border.

添加容器到指定的位置. 触发 beforeadd 事件在添加之前, 之后触发add 事件在添加完容器以后.

Parameters

  • index : Number

    指定插入的组件在子组件数组的位置

  • comp : Ext.Component

    父容器.

    Ext使用延迟渲染机制,组件插入以后只会在必要的时候渲染.

    为了避免过多的组件配置可能会构建一个真实的组件对象。 如果要使用延迟渲染机制,让插入组件不会立即呈现的话, 设置对应的Ext.Component.xtype配置项

    所有xtypes的列表,参见Ext.Component.

Returns

  • Ext.Component

    已经添加到子组件并且默认属性已经设置到子组件上了.

检验此组件是否匹配选择器字符串.

Parameters

  • selector : String

    针对检验的选择器字符串.

Returns

  • Boolean

    组件匹配选择器返回 true.

判断 容器 是否是传入的组件的父容器或者是组件的父容器的容器. 如果返回 true,那么传递的组件是当前容器的结构树的子项。

Parameters

确定此组件是否为指定容器的后裔.

Parameters

Returns

确定该组件当前被禁用.

Returns

  • Boolean

    返回该组件的禁用状态.

方法用来确定组件是否能拖动.

Returns

  • Boolean

    此组件能否拖动的状态.

方法用来确定组件是否能成为拖动的目标.

Returns

  • Boolean

    此组件能否成为拖动目标的状态.

方法用来确定此组件是否是浮动的.

Returns

确定该组件当前被隐藏.

Returns

  • Boolean

    返回该组件的隐藏状态.

Determines whether this Component is the root of a layout. This returns true if this component can run its layout without assistance from or impact on its owner. If this component cannot run its layout given these restrictions, false is returned and its owner will be considered as the next candidate for the layout root.

Setting the _isLayoutRoot property to true causes this method to always return true. This may be useful when updating a layout of a Container which shrink wraps content, and you know that it will not change size, and so can safely be the topmost participant in the layout run.

如果此组件的布局是挂起的, 返回 true. This can come from direct 这可能是由这个组件的布局活动直接挂起引起的 (suspendLayouts) 或者此组件容器之一的布局是挂起的.

Returns

  • Boolean

    此组件的布局被挂起返回 true.

如果当前组件可见, 返回true.

Parameters

  • deep : Boolean (optional)

    通过设置 'true' 来查询所有的父容器的可见性状态, 以确定该组件是否是真正对用户可见.

    通常, 确定组件是否隐藏, 无需参数. 例如, 在显示他们之前在隐藏容器创建动态布局页面.

    Defaults to: false

Returns

  • Boolean

    如果当前组件可见, 返回true, 其它返回false.

检验此组件是否是指定的xtype. 此方法既可以检验是否是指定的 xtype 的某个子类 (default) 或者它是否直接是指定的xtype类 (shallow = true).

如果使用你自己的子类, 请注意, 组件必须注册它自己的 xtype 值以便区别于继承的xtype.

所有可用的xtype列表, 参见 Ext.Component 类头部.

示例用法:

var t = new Ext.form.field.Text();
var isText = t.isXType('textfield');        // true
var isBoxSubclass = t.isXType('field');       // true, descended from Ext.form.field.Base
var isBoxInstance = t.isXType('field', true); // false, not a direct Ext.form.field.Base instance

Parameters

  • xtype : String

    需要为当前组件进行检测的xtype

  • shallow : Boolean (optional)

    如果为 true, 只检测组件是否是指定的xtype类型, false to 如果为false,检测组件是否是xtype继承树中的某个子类.

    Defaults to: false

Returns

  • Boolean

    如果当前组件是指定xtype的子类, 返回 true, 其他返回 false.

( Object name, Object mixinClass )private

内部使用混入预处理器(mixins pre-processor)

Parameters

addManagedListener的简写方法 向任何Observable对象(或者Ext.Element)添加监听器, 当组件被销毁时,监听器自动被移除 ...

addManagedListener的简写方法

向任何Observable对象(或者Ext.Element)添加监听器, 当组件被销毁时,监听器自动被移除

Parameters

  • item : Ext.util.Observable/Ext.Element

    添加监听器的目标项。

  • ename : Object/String

    事件名或者包含的事件名属性的对象。

  • fn : Function

    (可选的) 如果ename参数是事件名, 这就是一个事件处理函数。

  • scope : Object

    (可选的) 如果ename参数是事件名, 这就是(this引用的上下文) 事件处理函数执行的作用域。

  • opt : Object

    (可选的)如果ename参数是事件名, 这就是addListener的选项。

在容器内部移动子组件

Parameters

  • fromIdx : Number

    子组件原来的位置.

  • toIdx : Number

    子组件要移动的位置.

Returns

removeManagedListener的简写方法 移除通过mon方法添加的监听器。 ...

removeManagedListener的简写方法

移除通过mon方法添加的监听器。

Parameters

  • item : Ext.util.Observable/Ext.Element

    待移除监听器的项

  • ename : Object/String

    事件名或者包含的事件名属性的对象。

  • fn : Function

    (可选的) 如果ename参数是事件名, 这就是一个事件处理函数。

  • scope : Object

    (可选的) 如果ename参数是事件名, 这就是(this引用的上下文) 事件处理函数执行的作用域。

返回在树的遍历顺序的下一个节点的组件.

注意 这并不限定于同级, 如果在同级找不到匹配节点, 会遍历树 尝试找到一个匹配节点. 对比 nextSibling.

Parameters

Returns

  • Ext.Component

    下一个节点 (或者下一个匹配选择器的节点). 如果没有没有匹配的节点返回 null.

返回此组件的下一个同级组件.

随意选择下一个匹配 ComponentQuery 选择器的同级组件.

也可参考 next()

注意 这仅限于同级, 并且如果没有同级组件匹配, 返回 null . 对比 nextNode

Parameters

Returns

  • Ext.Component

    下一个同级组件 (或者下一个匹配选择器的同级组件). 如果没有没有匹配的同级组件返回 null.

( String/Object eventName, [Function fn], [Object scope], [Object options] )
addListener的简写方法 向本对象添加一个事件处理函数,例如: myGridPanel.on("mouseover", this.onMouseOver, this); 这个方法也允许传递单个参数,参数为一个 包含指定...

addListener的简写方法

向本对象添加一个事件处理函数,例如:

myGridPanel.on("mouseover", this.onMouseOver, this);

这个方法也允许传递单个参数,参数为一个 包含指定多个事件的属性的配置对象。例如:

myGridPanel.on({
    cellClick: this.onCellClick,
    mouseover: this.onMouseOver,
    mouseout: this.onMouseOut,
    scope: this // Important. Ensure "this" is correct during handler execution
});

你也能为每个事件处理函数单独指定选项:

myGridPanel.on({
    cellClick: {fn: this.onCellClick, scope: this, single: true},
    mouseover: {fn: panel.onMouseOver, scope: panel}
});

也能使用在特定作用域的方法。注意 必须指定scope:

myGridPanel.on({
    cellClick: {fn: 'onCellClick', scope: this, single: true},
    mouseover: {fn: 'onMouseOver', scope: panel}
});

Parameters

  • eventName : String/Object

    被监听的事件名。 也可以是属性名字是事件名字的对象。

  • fn : Function (optional)

    事件调用的方法, 或者如果指定了scope,在指定scope的方法名*。 会被调用, 参数为fireEvent的参数加上下述options参数。

  • scope : Object (optional)

    事件处理函数执行的作用域(this应用的上下文) 如果省略, 默认为触发事件的对象。

  • options : Object (optional)

    包含事件处理函数配置的对象。

    注意: 不像ExtJS 3.x, options对象也会作为最后一个参数 传递给每一个事件处理函数。

    这个对象可能包含以下任何一个属性:

    • scope : Object

      事件处理函数执行的作用域(this应用的上下文) 如果省略, 默认为触发事件的对象。

    • delay : Number

      事件触发后,调用事件处理函数延时毫秒数。

    • single : Boolean

      设置为true添加一个事件处理函数,只处理下一次触发的事件, 然后移除这个函数。

    • buffer : Number

      使事件处理函数在Ext.util.DelayedTask中调度运行, 延时指定的毫秒数。如果事件在这段事件再次触发, 原先的事件处理函数再调用, 新的事件处理函数接替。

    • target : Ext.util.Observable

      只有当事件在目标Observable上触发时调用事件处理函数, 如果事件是从Observable的子类起泡的,不会调用事件处理函数

    • element : String

      这个选项只对绑定在Components上的监听器有效。 Component的一个属性名,这个属性引用一个待添加监听器的元素

      这个选项在Component构造过程中向Components的元素添加DOM事件监听器有用。 这些元素只有在Component渲染之后才会存在。 例如, 向Panel的body中添加click监听器:

        new Ext.panel.Panel({
            title: 'The title',
            listeners: {
                click: this.handlePanelClick,
                element: 'body'
            }
        });
      

      组合选项

      使用options参数, 可以组合不同类型的监听器:

      一个延时的一次性监听器:

      myPanel.on('hide', this.handleClick, this, {
          single: true,
          delay: 100
      });
      

在组件添加以后,通过添加到这个组件调用该方法。 可以被用于更新任何内部的结构,但是这取决于子项的状态.

This is a template method. a hook into the functionality of this class. Feel free to override it in child classes.

Parameters

Method to manage awareness of when components are added to their respective Container, firing an added event. ...

Method to manage awareness of when components are added to their respective Container, firing an added event. References are established at add time rather than at render time.

Allows addition of behavior when a Component is added to a Container. At this stage, the Component is in the parent Container's collection of child items. After calling the superclass's onAdded, the ownerCt reference will be present, and if configured with a ref, the refOwner will be set.

This is a template method. a hook into the functionality of this class. Feel free to override it in child classes.

Parameters

这个方法将会被调用在添加子组件之前. 它通过新的组件,并且可以被用于修改组件,或以某种方式准备的容器。 返回false中止的添加操作.

This is a template method. a hook into the functionality of this class. Feel free to override it in child classes.

Parameters

( Object names, Object callback, Object scope )private

更新配置项

Parameters

( )protectedtemplate

允许销毁操作的行为。 调用父类的OnDestroy后,组件将被销毁。

This is a template method. a hook into the functionality of this class. Feel free to override it in child classes.

( )protectedtemplate

Allows addition of behavior to the disable operation. After calling the superclass’s onDisable, the Component will be disabled.

This is a template method. a hook into the functionality of this class. Feel free to override it in child classes.

Double click

Parameters

( )protectedtemplate

Allows addition of behavior to the enable operation. After calling the superclass’s onEnable, the Component will be enabled.

This is a template method. a hook into the functionality of this class. Feel free to override it in child classes.

( Object fn, Object scope )private

扩展事件

Parameters

( [String/Ext.Element/Ext.Component animateTarget], [Function callback], [Object scope] )protectedtemplate

动画可能下降到目标元素。

允许行为的隐藏操作。后调用父类onHide的, 组件将被隐藏。

相同的参数被传递#隐藏。

This is a template method. a hook into the functionality of this class. Feel free to override it in child classes.

Parameters

Called after the component is moved, this method is empty by default but can be implemented by any subclass that need...

Called after the component is moved, this method is empty by default but can be implemented by any subclass that needs to perform custom logic after a move occurs.

This is a template method. a hook into the functionality of this class. Feel free to override it in child classes.

Parameters

这个方法将会被调用在组件移除以后。 此方法可用于更新任何内部结构,但是这取决于子项的状态.

This is a template method. a hook into the functionality of this class. Feel free to override it in child classes.

Parameters

( Boolean destroying )protectedtemplate
Method to manage awareness of when components are removed from their respective Container, firing a removed event. ...

Method to manage awareness of when components are removed from their respective Container, firing a removed event. References are properly cleaned up after removing a component from its owning container.

Allows addition of behavior when a Component is removed from its parent Container. At this stage, the Component has been removed from its parent Container's collection of child items, but has not been destroyed (It will be destroyed if the parent Container's autoDestroy is true, or if the remove call was passed a truthy second parameter). After calling the superclass's onRemoved, the ownerCt and the refOwner will not be present.

This is a template method. a hook into the functionality of this class. Feel free to override it in child classes.

Parameters

  • destroying : Boolean

    Will be passed as true if the Container performing the remove operation will delete this Component upon remove.

( Ext.core.Element parentNode, Number containerIdx )protectedtemplate

这个组件的DOM结构创建之后调用的模板方法。

此时, 这个组件(及其所有子组件)的DOM存在, 但是它还没有布局(摆放和调整大小)。

重写这个方法的子类能在渲染时访问DOM结构。 它应该在访问组件的任何子元素之前调用父类的方法。

This is a template method. a hook into the functionality of this class. Feel free to override it in child classes.

Parameters

  • parentNode : Ext.core.Element

    包含封装本组件的元素的父元素。

  • containerIdx : Number

    本组件的父容器的子元素集合中的索引。

( )protectedtemplate

Allows addition of behavior to the resize operation.

Called when Ext.resizer.Resizer#drag event is fired.

This is a template method. a hook into the functionality of this class. Feel free to override it in child classes.

( [String/Ext.Element animateTarget], [Function callback], [Object scope] )protectedtemplate

允许显示操作的行为。 父类的onShow事件后,组件将是可见的。

覆盖在子类中需要更复杂的行为。

相同的参数被传递 Gets passed the same parameters as show.

This is a template method. a hook into the functionality of this class. Feel free to override it in child classes.

Parameters

( [Function callback], [Object scope] )protectedtemplate

方法afterShow 完成后调用。

获取通过相同的回调范围,收到的#afterShow参数。

This is a template method. a hook into the functionality of this class. Feel free to override it in child classes.

Parameters

任何stateEvents事件被触发将调用这个方法。

让给定的类成为可观察的实例。 这个方法在有类从本类派生或者使用本类作为一个mixin时调用。

Parameters

在header的id的基础上构造的record集合 会根据标记/模版去生成表单细节 ...

在header的id的基础上构造的record集合 会根据标记/模版去生成表单细节

Parameters

返回在树的遍历顺序的前一个节点的组件.

注意 这并不限定于同级, 如果在同级找不到匹配节点, 会遍历树 以相反的方向来尝试找到一个匹配节点. 对比 previousSibling.

Parameters

Returns

  • Ext.Component

    前一个节点 (或者前一个匹配选择器的节点). 如果没有没有匹配的节点返回 null.

返回此组件的前一个同级组件.

随意选择前一个匹配 ComponentQuery 选择器的同级组件.

也可参考 prev()

注意 这仅限于同级, 并且如果没有同级组件匹配, 返回 null . 对比 previousNode

Parameters

Returns

  • Ext.Component

    前一个同级组件 (或者前一个匹配选择器的同级组件). 如果没有没有匹配的同级组件返回 null.

( String type, Ext.view.Table view, HTMLElement cell, Number recordIndex, Number cellIndex, Ext.EventObject e )private

Process UI events from the view. The owning TablePanel calls this method, relaying events from the TableView

Parameters

  • type : String

    Event type, eg 'click'

  • view : Ext.view.Table

    TableView Component

  • cell : HTMLElement

    Cell HtmlElement the event took place within

  • recordIndex : Number

    Index of the associated Store Model (-1 if none)

  • cellIndex : Number

    Cell index within the row

  • e : Ext.EventObject

    Original event

用匹配选项检索容器的结构树. 执行一个 Ext.ComponentQuery方法.当前容器作为根节点.

Parameters

  • selector : String (optional)

    符合Ext.ComponentQuery的匹配选项选择器 如果没有指定,所有的子项全部检索.

Returns

检索符合传递的函数条件的子组件. 根据函数条件返回false不会出现在的返回的组件集合里面

Parameters

  • fn : Function

    匹配函数,它会被作为一个单独的参数传递用于测试子组件是否符合条件.

  • scope : Object (optional)

    作用域 如果没有指定默认是调用它子组件.

Returns

在任何层级上查找符合条件的id或者是itemId的组件. 可以缩写为 ct.down('#' + id);

Parameters

Returns

Called by Component#doAutoRender 注册一个容器配置 floating: true 同这个组件的 ZIndexManager. ...

Called by Component#doAutoRender

注册一个容器配置 floating: true 同这个组件的 ZIndexManager.

组件通过这种方式添加将不参与任何的布局, 但是首次显示时以 Window 这种方法来渲染.

Parameters

( Object origin, String[] events, [String prefix] )

从指定的Observable接替选定的事件就好像事件是this触发的。

例如,如果你想要扩展Grid, 你可能决定转发store的一些事件。 所以你能在你的initComponent中实现这个:

this.relayEvents(this.getStore(), ['load']);

grid实例将会有一个observable的'load'事件, 这个事件的参数是store的load事件的参数。任何grid的load事件触发的函数 可以使用this访问grid。

Parameters

  • origin : Object

    本对象要接替事件的Observable对象

  • events : String[]

    被接替的事件名数组

  • prefix : String (optional)

    附加到事件名的公共前缀。例如:

    this.relayEvents(this.getStore(), ['load', 'clear'], 'store');
    

    这样grid将会以'storeload'和'storeclear'转发store的'load'和'clear'事件。

从父容器移除子组件. 触发beforeremove 事件 在移除之前, 触发remove 在移除以后

Parameters

Returns

从父容器中移除所有子组件.

Parameters

Returns

Removes items in the childEls array based on the return value of a supplied test function. ...

Removes items in the childEls array based on the return value of a supplied test function. The function is called with a entry in childEls and if the test function return true, that entry is removed. If false, that entry is kept.

Parameters

从代表此组件的顶层元素移除 CSS 类.

Parameters

Returns

从 uiCls 数组中移除一个 cls, 这也将调用 removeUIClsFromElement 并从该组件所有元素中移除它.

Parameters

  • cls : String/String[]

    从 uiCls 中移除一个字符串或者一个字符串数组

移除事件处理函数。

Parameters

  • eventName : String

    事件处理函数关联的事件类型

  • fn : Function

    待移除的事件处理函数。 必须是对传递给addListener 的函数的引用。

  • scope : Object

    (可选的) 原先为事件处理函数指定的作用域。 它必须是和原先调用addListener时指定的作用域参数是一样的,否者监听器将会被移除。

移除通过mon方法添加的监听器。

Parameters

  • item : Ext.util.Observable/Ext.Element

    待移除监听器的项

  • ename : Object/String

    事件名或者包含的事件名属性的对象。

  • fn : Function

    (可选的) 如果ename参数是事件名, 这就是一个事件处理函数。

  • scope : Object

    (可选的) 如果ename参数是事件名, 这就是(this引用的上下文) 事件处理函数执行的作用域。

Remove a single managed listener item

Parameters

  • isClear : Boolean

    True if this is being called during a clear

  • managedListener : Object

    The managed listener item See removeManagedListener for other args

方法, 移除一个特定的 UI + uiCls 到组件元素. 这是将添加到该元素的 cls : this.baseCls + '-' + ui

Parameters

  • ui : String

    从元素中添加的 UI

Method which removes a specified UI from the components element.

继续事件的触发(见suspendEvents)。

如果事件被使用queueSuspended参数挂起, 那么所有 在事件挂起期间触发的事件将会被发送到任意监听器。

有条件的保存单独的属性从this对象到给定的state对象。 这个想法只保存初始状态改变后的状态, 使得当前的软件设置不覆盖未来软件设置。 仅用户改变状态的这些值应该被保存。

Parameters

  • propName : String

    要保存的属性名。

  • state : Object

    保存属性值的状态对象。

  • stateName : String

    (可选择的)state对象中用到的属性名

Returns

  • Boolean

    True 属性值保存成功返回true,否则返回false。

收集实例附加命名的属性并且把它们当前值传递给状态对象。

Parameters

  • propNames : String/String[]

    要保存的属性名(或者一组属性名)。

  • state : Object

    保存属性值的状态对象

Returns

保存对象的状态到持久存储。

滚动组件target element 的元素由传入三角点,选择动画。

以下是等价的:

 comp.scrollBy(10, 10, true);
 comp.scrollBy([10, 10], true);
 comp.scrollBy({ x: 10, y: 10 }, true);

Parameters

  • deltaX : Number/Number[]/Object

    要么x三角点,一个数组指定x和y增量或一个对象 以“x”和“y”属性。

  • deltaY : Number/Boolean/Object

    无论在y三角点,或一个的动画标志或配置对象。

  • animate : Boolean/Object

    动画标志/配置对象的动画,如果增量值分别传递。

确保此对象 在syncFx之后队列中的所有动画特效串行地执行. 这是与 syncFx 相反的方法.

Returns

此方法仅供 Ext.ZIndexManager 内部调用, 用来标记一个浮动组件(floating Component)或者被移动到其 zIndex 栈的顶部, 或者从其zIndex 栈的顶部被推入(pushed from the t...

此方法仅供 Ext.ZIndexManager 内部调用, 用来标记一个浮动组件(floating Component)或者被移动到其 zIndex 栈的顶部, 或者从其zIndex 栈的顶部被推入(pushed from the top of its zIndex stack).

如果一个 Window 被另一个 Window 所取代, 则将其停用,并隐藏它的阴影.

此方法也将触发 activate 或者 deactivate 事件,取决于具体所发生的事情.

Parameters

  • active : Boolean (optional)

    设置为true来激活组件,设 为 false 则停用.

    Defaults to: false

  • newActive : Ext.Component (optional)

    新的 将霸占顶端的 zIndex 位置 的活动(active)组件.

设置溢出的内容元素的组件。

Parameters

  • scroll : Boolean

    滚动为真让组件自动滚动。

Returns

Parameters

  • border : String/Number

    边框, 参见 border. 如果一个 falsey 值(包含 0 null '' NaN undefined false)传递过去了, 边框将被移除.

( Object config, Object applyIfNotSet )private

设置配置项

Parameters

启用或者禁用当前组件.

Parameters

  • disabled : Boolean

    true 是禁用组件.

设置此组件在其父面板的停靠位置. 注意, 如果此组件是含有 DockLayout 的父面板的集合的一部分, 此设置才有效果.(注意, 任何面板上默认有一个 DockLayout)

Parameters

  • dock : Object

    停靠位置.

  • layoutParent : Boolean (optional)

    设置 true 重新布局组件的父容器.

    Defaults to: false

Returns

设置要作为该列编辑控件的表单对象。 Note: This method only has an implementation if an Editing plugin has 注:仅适用于表格配置了Editing插件。

Parameters

  • field : Object

    表单field类的配置函数. 若未配置xtype,则默认为'textfield'。

设置组件的高度. 这个方法会触发 resize 事件.

Parameters

  • height : Number

    设置的新的高度. 这可能是一种:

    • 一个 Number 类型指定 Element 新的高度 Ext.Element.defaultUnit (默认为像素).
    • 一个 String 类型用于设置高度的 CSS 样式.
    • undefined 保留原来的宽度不变.

Returns

此方法允许你显示或隐藏LoadMask这个组件上。

Parameters

  • load : Boolean/Object/String

    加载LoadMask显示默认为true LoadMask构造函数将被传递给一个配置对象, 或显示一个消息字符串。隐藏当前LoadMask为false。

  • targetEl : Boolean (optional)

    如果为true掩盖的targetEl此组件,而不是的this.el。 例如,设置面板上true会导致容器被屏蔽。

    Defaults to: false

Returns

设置溢出x / y的内容元素的组件.x / y的溢出值可以是任何有效的CSS溢出 (例如,“自动”或“滚动”).默认情况下,被'隐藏'。 ...

设置溢出x / y的内容元素的组件.x / y的溢出值可以是任何有效的CSS溢出 (例如,“自动”或“滚动”).默认情况下,被'隐藏'。 传递null值将清除内联样式。传递未定义将保持当前值。

Parameters

  • overflowX : String

    The overflow-x value. overflowX溢出x的值

  • overflowY : String

    The overflow-y value. overflowY溢出y的值

Returns

设置页面的XY位置的组件。左侧和顶部,而不是要设置,使用setPosition方法. 该方法触发move事件。

Parameters

  • x : Number

    新的X位置

  • y : Number

    新的y位置

  • animate : Boolean/Object (optional)

    动画]true到新的位置,以动画的组件。您也可以通过 动画配置。

Returns

设置组件的 left 和 top 值. 设置组件的页面XY值, 使用 setPagePosition 方法. 该方法触发 move 事件.

Parameters

  • left : Number

    The new left

  • top : Number

    The new top

  • animate : Boolean/Object (optional)

    如果设置 true, 组件是带着动画效果到新的位置. 你也可以通过一个动画配置.

Returns

设置组件的宽度和高度. 此方法触发 resize 事件. 此方法可以接收单独的 width 或者 height 值作为参数, 或者你可以传递像这样的一个 size 对象: {width:10, height:20}.

Parameters

  • width : Number/String/Object

    设置新的宽度值. 这可以是:

    • 一个 Number 类型指定 Element 新的宽度 Ext.Element.defaultUnit (默认为像素).
    • 一个 String 类型用于设置宽度的 CSS 样式.
    • 一个 size 对象格式为 {width: widthValue, height: heightValue}.
    • undefined 保留原来的宽度不变.
  • height : Number/String

    设置新的高度值 (如果第一个参数传递了一个size对象, 此参数没有必要传递). 这可以是:

    • 一个 Number 类型指定 Element 新的高度 Ext.Element.defaultUnit (默认为像素).
    • 一个 String 类型用于设置高度的 CSS 样式. 也有可能不会被使用到.
    • undefined 保留原来的高度不变.

Returns

设置列头标题

Parameters

设置组件的 UI. 这将删除任何现有的 UI 组件. 它将遍历组件中的所有的 uiCls 并重命名它们, 使它们包含新的 UI.

Parameters

  • ui : String

    该组件的新的用户界面

工具方法, 通过使用布尔值隐藏或者显示当前组件.

Parameters

  • visible : Boolean

    true 是显示, false 是隐藏

Returns

设置组件的宽度. 此方法触发 resize 事件.

Parameters

  • width : Number

    设置新的宽度值. 这可以是:

Returns

Inject a reference to the function which applies the render template into the framing template. The framing template wraps the content.

Parameters

( [String/Ext.Element animateTarget], [Function callback], [Object scope] ) : Ext.Component

显示此组件,使其自动解析autoRenderfloating浮动,如果是'真'。

在显示之后,一个floating浮动的组分(如一个Ext.window.Window), 被激活,并且其z-index stack的前面。

Parameters

  • animateTarget : String/Ext.Element (optional)

    仅适用于floating组件如 Ext.window.WindowToolTips,或固定组件已配置浮动:true`。 组件动画从开通时的目标。

    Defaults to: null

  • callback : Function (optional)

    显示后的组件调用的回调函数。 只有必要的,如果指定的动画。

  • scope : Object (optional)

    作用域 (this reference), 其中执行回调。

Returns

显示组件在特定XY位置。 一个浮动的组件(如菜单)被定位相对如有 有用的弹出上下文菜单: Useful for popping up a context menu:

listeners: {
    itemcontextmenu: function(view, record, item, index, event, options) {
        Ext.create('Ext.menu.Menu', {
            width: 100,
            height: 100,
            margin: '0 0 10 0',
            items: [{
                text: 'regular item 1'
            },{
                text: 'regular item 2'
            },{
                text: 'regular item 3'
            }]
        }).showAt(event.getXY());
    }
}

Parameters

  • x : Number

    The new x position

  • y : Number

    The new y position

  • animate : Boolean/Object (optional)

    如果为真就到新的位置以动画的组件 您也可以通过动画配置。

获取从该对象被实例化的类的引用。 请注意不同于 self, this.statics()是独立的作用域,无论this是否运行,总是返回其中的调用类。

Ext.define('My.Cat', {
    statics: {
        totalCreated: 0,
        speciesName: 'Cat' // My.Cat.speciesName = 'Cat'
    },

    constructor: function() {
        var statics = this.statics();

        alert(statics.speciesName);     // 总是等于'Cat',无论'this'是什么,
                                        // 相当于:My.Cat.speciesName

        alert(this.self.speciesName);   // 依赖 'this'

        statics.totalCreated++;
    },

    clone: function() {
        var cloned = new this.self;                      // 依赖 'this'

        cloned.groupName = this.statics().speciesName;   // 相当于: My.Cat.speciesName

        return cloned;
    }
});


Ext.define('My.SnowLeopard', {
    extend: 'My.Cat',

    statics: {
        speciesName: 'Snow Leopard'     // My.SnowLeopard.speciesName = 'Snow Leopard'
    },

    constructor: function() {
        this.callParent();
    }
});

var cat = new My.Cat();                 // alerts 'Cat', 然后提示 'Cat'

var snowLeopard = new My.SnowLeopard(); // alerts 'Cat', 然后提示 'Snow Leopard'

var clone = snowLeopard.clone();
alert(Ext.getClassName(clone));         // alerts 'My.SnowLeopard'
alert(clone.groupName);                 // alerts 'Cat'

alert(My.Cat.totalCreated);             // alerts 3

Returns

停止所有正在运行的特效,并清空此对象内部特效队列,如果此队列包含有尚未开始执行的那些特效.

Returns

停止所有正在运行的特效,并清空此对象内部特效队列,如果此队列包含有尚未开始执行的那些特效.

This method has been deprecated

从 4.0 开始被 stopAnimation 替代

Returns

挂起所有事件的触发。(见resumeEvents)

Parameters

  • queueSuspended : Boolean

    传true,让挂起的事件排队而不是丢弃所有挂起的事件, 这些事件将会在调用resumeEvents之后触发。

确保此对象 在syncFx之后队列中的所有动画特效并行地执行. 这是与 sequenceFx 相反的方法.

Returns

临时锁定headerCt。这使得它使点击headers 不会触发操作,如排序或打开header菜单。这样做是 因为其他的事件可能会被触发后headers交互与拖放操作 ...

临时锁定headerCt。这使得它使点击headers 不会触发操作,如排序或打开header菜单。这样做是 因为其他的事件可能会被触发后headers交互与拖放操作

将此组件置于其他(所有)可见窗口的背后 (设置更小的 z-index 值)

Returns

将此浮动组件置于同一 ZIndexManager 管理器所管理的所有可见元素的顶层.

如果此组件式模态(modal)的, 以比此组件只小一点的 z-index值 插入模态遮罩层.

Parameters

  • preventFocus : Boolean (optional)

    指定为 true 来阻止此组件获得焦点.

    Defaults to: false

Returns

配置扩展

removeListener的简写方法 移除事件处理函数。 ...

removeListener的简写方法

移除事件处理函数。

Parameters

  • eventName : String

    事件处理函数关联的事件类型

  • fn : Function

    待移除的事件处理函数。 必须是对传递给addListener 的函数的引用。

  • scope : Object

    (可选的) 原先为事件处理函数指定的作用域。 它必须是和原先调用addListener时指定的作用域参数是一样的,否者监听器将会被移除。

沿着 ownerCt 查找匹配简单选择器的祖先容器.

例如:

var owningTabPanel = grid.up('tabpanel');

Parameters

  • selector : String (optional)

    用来检验的简单选择器.

Returns

( String/Object htmlOrData, [Boolean loadScripts], [Function callback] )

刷新组件的内部区域.

Parameters

  • htmlOrData : String/Object

    如果已经通过tpl为当前组件配置了一个模板, 那么将会使用此参数来装配模板. 如果没有为当前组件配置模板, 组件的内容区域将会通过 Ext.Element 进行刷新.

  • loadScripts : Boolean (optional)

    只有在使用 html 配置时此参数才合法.

    Defaults to: false

  • callback : Function (optional)

    只有在使用 html 配置时此参数才合法. 当脚本加载完成时回调函数才被执行.

Injected as an override by Ext.Aria.initialize

设置当前框组件的基本元素测量。

Parameters

  • box : Object

    对象的格式{X,Y,宽度,高度}

Returns

更改此组件的布局. 如果此更新影响此组件 ownerCt, 该组件的 updateLayout 方法将被调用执行而不是布局. 否则, 仅仅这个组件 (及其子项) 将被布局.

Parameters

  • options : Object

    一个布局配置对象.

    • defer : Boolean

      如果这个布局需要延迟设置 true.

    • isRoot : Boolean

      如果这个布局需要从顶层布局.

Defined By

Static Methods

( Object members )static

方法/属性添加到这个类的原型。

Ext.define('My.awesome.Cat', {
    constructor: function() {
        ...
    }
});

 My.awesome.Cat.implement({
     meow: function() {
        alert('Meowww...');
     }
 });

 var kitty = new My.awesome.Cat;
 kitty.meow();

Parameters

添加/重写这个类的静态属性。

Ext.define('My.cool.Class', {
    ...
});

My.cool.Class.addStatics({
    someProperty: 'someValue',      // My.cool.Class.someProperty = 'someValue'
    method1: function() { ... },    // My.cool.Class.method1 = function() { ... };
    method2: function() { ... }     // My.cool.Class.method2 = function() { ... };
});

Parameters

Returns

( Ext.Base fromClass, Array/String members ) : Ext.Baseprivatestatic
这个类的原型借用另一个类的成员 Ext.define('Bank', { money: '$$$', printMoney: function() { alert('$$$$$$$'); } ...

这个类的原型借用另一个类的成员

Ext.define('Bank', {
    money: '$$$',
    printMoney: function() {
        alert('$$$$$$$');
    }
});

Ext.define('Thief', {
    ...
});

Thief.borrow(Bank, ['money', 'printMoney']);

var steve = new Thief();

alert(steve.money); // alerts '$$$'
steve.printMoney(); // alerts '$$$$$$$'

Parameters

Returns

创建这个类的新实例。

Ext.define('My.cool.Class', {
    ...
});

My.cool.Class.create({
    someConfig: true
});

所有参数传递至类的构造。

Returns

创建现有的原型方法的别名。例如: Ext.define('My.cool.Class', { method1: function() { ... ...

创建现有的原型方法的别名。例如:

Ext.define('My.cool.Class', {
    method1: function() { ... },
    method2: function() { ... }
});

var test = new My.cool.Class();

My.cool.Class.createAlias({
    method3: 'method1',
    method4: 'method2'
});

test.method3(); // test.method1()

My.cool.Class.createAlias('method5', 'method3');

test.method5(); // test.method3() -> test.method1()

Parameters

以字符串格式,获取当前类的名称。

Ext.define('My.cool.Class', {
    constructor: function() {
        alert(this.self.getName()); // alerts 'My.cool.Class'
    }
});

My.cool.Class.getName(); // 'My.cool.Class'

Returns

( Object members ) : Ext.Basedeprecatedstatic

重写这个类的成员。通过callParent重写的方法可以调用。

Ext.define('My.Cat', {
    constructor: function() {
        alert("I'm a cat!");
    }
});

My.Cat.override({
    constructor: function() {
        alert("I'm going to be a cat!");

        this.callParent(arguments);

        alert("Meeeeoooowwww");
    }
});

var kitty = new My.Cat(); // alerts "I'm going to be a cat!我要成为一只猫!"
                          // alerts "I'm a cat!我是一只猫!"
                          // alerts "Meeeeoooowwww"

在4.1版本, 直接利用这种方法已经过时了。 使用 Ext.define 代替:

Ext.define('My.CatOverride', {
    override: 'My.Cat',
    constructor: function() {
        alert("I'm going to be a cat!");

        this.callParent(arguments);

        alert("Meeeeoooowwww");
    }
});

以上完成了相同的结果,但可以由Ext.Loader重写, 其目标类和生成过程中,可以决定是否需要根据目标类所需的状态覆盖管理(My.Cat)。

This method has been deprecated since 4.1.0

使用 Ext.define 代替

Parameters

  • members : Object

    添加到这个类的属性。 这应当被指定为一个对象包含一个或多个属性的文字。

Returns

Defined By

Events

组件激活后触发.

Parameters

在添加或者插入完成Ext.Component后触发.

这个事件会自动冒泡: 'add' 当这个添加的子组件的子项添加子组件的的时候 ...

Parameters

组件被添加到一个容器后触发.

Parameters

当容器中的组件被指定的布局管理器排列的时候触发。

Parameters

在组件渲染完成之后触发.

afterrender 事件在当前组件被 rendered 之后, 在为组件定义的所有afterRender方法执行之后 触发.

Parameters

组件激活前触发. 事件监听返回 false 能阻止激活的发生.

Parameters

在任何Ext.Component被添加或者插入到容器中之前触发。 事件处理器可以返回false取消添加操作。

Parameters

组件失去激活前触发. 事件监听返回 false 能阻止失去激活的发生.

Parameters

组件被 destroy前触发. 在事件监听中返回 false 可以停止destroy操作.

Parameters

当调用 hide 方法组件隐藏前触发. 从事件处理返回 false 将停止隐藏.

Parameters

f从容器中删除任何Ext.Component 之前触发。 处理器可以返回false取消remove操作。

Parameters

在组件渲染 rendered之前触发. 在事件监听器中返回 false 可以停止render操作.

Parameters

当调用 show 方法组件显示前触发. 从事件处理返回 false 将停止显示.

Parameters

在state对象被恢复之前触发。从一个事件处理程序返回false来阻止恢复。

Parameters

  • this : Ext.state.Stateful
  • state : Object

    散列值StateProvider返回的状态。 如果这个事件没有被禁止,然而state对象被传递到applyState。 默认情况下,这只是拷贝到这个对象的属性值。 重载的方法也许来提供自定义的状态恢复。

  • eOpts : Object

    The options object passed to Ext.util.Observable.addListener.

在state对象保存到配置state的提供者之前触发。返回false来阻止保存。

Parameters

  • this : Ext.state.Stateful
  • state : Object

    state的散列值。这是通过调用getState()确定的对象。

    这个方法必须由开发人员提供返回什么来代表state是必须的, 默认情况下,Ext.state.Stateful有一个null实现。

  • eOpts : Object

    The options object passed to Ext.util.Observable.addListener.

组件失去焦点时触发.

Parameters

触发 一次 - 组件首次布局初始化大小后触发.

Parameters

列隐藏

Parameters

列移动

Parameters

改变列大小

Parameters

列显示

Parameters

组件失去激活后触发.

Parameters

在组件被 destroy 之后触发.

Parameters

组件被禁用后触发.

Parameters

组件被启用后触发.

Parameters

组件获取焦点时触发.

Parameters

表头点击事件

Parameters

列标题菜单触发点击

Parameters

组件被隐藏后触发, 当调用 hide 方法隐藏组件后触发.

Parameters

gird列标题菜单创建以后触发.

Parameters

组件移动之后触发.

Parameters

当移除子组件 Ext.Component 的时候触发.

这个事件会自动冒泡: 'remove' 当这个添加的子组件的子项移除子组件的的时候 ...

Parameters

当组件从一个容器中移除时触发

Parameters

在组件被 rendered 之后触发.

Parameters

( Ext.Component this, Number width, Number height, Number oldWidth, Number oldHeight, Object eOpts )

在组件被调整大小之后触发. 注意在首次布局初始化大小时 触发. 在生命周期里, 使用 boxready 事件.

Parameters

当调用 show 方法组件显示后触发.

Parameters

排序改变

Parameters

在state对象被恢复之后触发。

Parameters

  • this : Ext.state.Stateful
  • state : Object

    散列值StateProvider返回的状态。state对象被传递到applyState。 默认情况下,这只是拷贝到这个对象的属性值。 重载的方法也许来提供自定义的状态恢复。

  • eOpts : Object

    The options object passed to Ext.util.Observable.addListener.

在state对象保存到配置state的提供者之后触发。

Parameters

  • this : Ext.state.Stateful
  • state : Object

    state的散列值。这是通过调用getState()确定的对象。

    这个方法必须由开发人员提供返回什么代表state是必须的, 默认情况下,Ext.state.Stateful有一个null实现。

  • eOpts : Object

    The options object passed to Ext.util.Observable.addListener.