 以下是所有的'xtype'和类的对应关系
xtype            Class
-------------    ------------------
box              Ext.BoxComponent
button           Ext.Button
buttongroup      Ext.ButtonGroup
colorpalette     Ext.ColorPalette
component        Ext.Component
container        Ext.Container
cycle            Ext.CycleButton
dataview         Ext.DataView
datepicker       Ext.DatePicker
editor           Ext.Editor
editorgrid       Ext.grid.EditorGridPanel
flash            Ext.FlashComponent
grid             Ext.grid.GridPanel
listview         Ext.ListView
panel            Ext.Panel
progress         Ext.ProgressBar
propertygrid     Ext.grid.PropertyGrid
slider           Ext.Slider
spacer           Ext.Spacer
splitbutton      Ext.SplitButton
tabpanel         Ext.TabPanel
treepanel        Ext.tree.TreePanel
viewport         Ext.ViewPort
window           Ext.Window

Toolbar components
---------------------------------------
paging           Ext.PagingToolbar
toolbar          Ext.Toolbar
tbbutton         Ext.Toolbar.Button        (过时的；使用 button)
tbfill           Ext.Toolbar.Fill
tbitem           Ext.Toolbar.Item
tbseparator      Ext.Toolbar.Separator
tbspacer         Ext.Toolbar.Spacer
tbsplit          Ext.Toolbar.SplitButton   (过时的；使用 splitbutton)
tbtext           Ext.Toolbar.TextItem

Menu components
---------------------------------------
menu             Ext.menu.Menu
colormenu        Ext.menu.ColorMenu
datemenu         Ext.menu.DateMenu
menubaseitem     Ext.menu.BaseItem
menucheckitem    Ext.menu.CheckItem
menuitem         Ext.menu.Item
menuseparator    Ext.menu.Separator
menutextitem     Ext.menu.TextItem

Form components
---------------------------------------
form             Ext.form.FormPanel
checkbox         Ext.form.Checkbox
checkboxgroup    Ext.form.CheckboxGroup
combo            Ext.form.ComboBox
datefield        Ext.form.DateField
displayfield     Ext.form.DisplayField
field            Ext.form.Field
fieldset         Ext.form.FieldSet
hidden           Ext.form.Hidden
htmleditor       Ext.form.HtmlEditor
label            Ext.form.Label
numberfield      Ext.form.NumberField
radio            Ext.form.Radio
radiogroup       Ext.form.RadioGroup
textarea         Ext.form.TextArea
textfield        Ext.form.TextField
timefield        Ext.form.TimeField
trigger          Ext.form.TriggerField

Chart components
---------------------------------------
chart            Ext.chart.Chart
barchart         Ext.chart.BarChart
cartesianchart   Ext.chart.CartesianChart
columnchart      Ext.chart.ColumnChart
linechart        Ext.chart.LineChart
piechart         Ext.chart.PieChart

Store xtypes
---------------------------------------
arraystore       Ext.data.ArrayStore
directstore      Ext.data.DirectStore
groupingstore    Ext.data.GroupingStore
jsonstore        Ext.data.JsonStore
simplestore      Ext.data.SimpleStore      (过时的；使用 arraystore)
store            Ext.data.Store
xmlstore         Ext.data.XmlStore


 以下是所有的布局字符串和类的对应关系，所有的布局类均继承自 Ext.layout.ContainerLayout类

字符串            类                           中文名称
-------------    ------------------           ------------------
absolute         Ext.layout.absolute           绝对定位
accordion        Ext.layout.Accordion         手风琴式
anchor           Ext.layout.AnchorLayout       锚定
(新)auto         Ext.layout.auto               自动
border           Ext.layout.BorderLayout      边界式
card             Ext.layout.CardLayout        卡片式
column           Ext.layout.ColumnLayout        列式
fit              Ext.layout.FitLayout          自适应
form             Ext.layout.FormLayout          表单式
(新)hbox         Ext.layout.hbox               水平
(新)menu         Ext.layout.menu               菜单式
table            Ext.layout.TableLayout      表格式
(新)toolbar      Ext.layout.toolbar           工具条式
(新)vbox         Ext.layout.vbox                垂直


 以下是所有工具栏可用按钮名称字符串

字符串               中文名称
-------------    ------------------
toggle            收缩/展开
close             关闭
minimize          最小化
maximize          最大化
restore           重置
gear              自适应
pin               固定
unpin             解除固定
right             向右
left              向左
up                向上
down              向下
refresh           刷新
minus             缩小
plus              放大
help              帮助
search            搜索
save              保存
print             打印


ExtJS 3.2.0 API文档-->[脚本娃娃]群组翻译制作

加载中...
ExtJS 3.2.0 API文档


脚本娃娃(final)
 2010-10-25

翻译组： 飞鸿、粞饭、菜鸟、我不是坏男人、徐治魔
夜雨倾城、Jacky、babydeed、糊ぃ涂、大漠穷秋
 组织： 大漠穷秋
编译器： 大漠穷秋

申明：
1、对所有翻译文字保留所有权利，侵权必究。
2、此文档由脚本娃娃站点提供在线支持。
3、任何改进意见都可以email到:253445528@qq.com(不解答问题)。
4、少量的Bug会根据反馈情况进行更改。
5、时间紧迫，水平有限；疏漏难免，欢迎指正。

鸣谢：
谢以上诸君，牺牲了自己大量的业余时间完成了此工程，通过我们大家愉快的合作历程
相信你们对Ext的掌握必定比其他人更深切，在未来的职业道路上你们必定能取得辉煌。
3Q guys!

附加资源

  • Ext 3.2 Samples
  • Ext Learning Center
  • FAQ
  • Tutorials
  • Ext Community Manual
  • Ext JS Blog

支持

  • Support Subscriptions
  • Community Forums

图标图例

  • Package[包]
  • Class[类]
  • Singleton[单例]
  • Component[组件]
  • Method[方法]
  • Property[属性]
  • Config Option[配置项]
  • Event[事件]


Class Array

包: | Global(全局)
定义类的文件: | Ext.js
类: | Array
继承自: | Object

公共属性

该类没有公共属性。

公共方法

Method Defined By
indexOf ( Object o , [ Number from ] ) : Number
查找数组中是否存在指定的对象。
查找数组中是否存在指定的对象。
参数:
  • o : Object
    需要查找的对象
  • from : Number
    (可选)开始查找的起始索引
返回值:
  • Number
    对象在数组中的下标(如果不存在该对象，返回-1)
Array
remove ( Object o ) : Array
从数组中删除指定的元素，如果该元素不存在，则什么事情都不做。
从数组中删除指定的元素，如果该元素不存在，则什么事情都不做。
参数:
  • o : Object
    需要删除对象
返回值:
  • Array
    当前数组
Array

公共事件

该类没有公共事件。


Class Date

包: | Global(全局)
定义类的文件: | Date.js
类: | Date
继承自: | Object
日期解析和格式化符号是 PHP date() 方法的子集， 所有支持的格式均与他们的PHP版相同。 以下是目前所有支持的格式列表：
格式符   描述                                                                            返回值示例
------  -----------------------------------------------------------------------   -----------------------
  d     一个月中的第几天，以0开头的两位数字                                             01 到 31
  D     一周中星期几的英文缩写                                                         Mon 到 Sun
  j     一个月中的第几天，不以0开头的数字                                               1 到 31
  l     一周中星期几的英文全拼                                                         Sunday 到 Saturday
  N     一周中第几天的ISO-8601 数字标准的表述                                          1 (for Monday) 到 7 (for Sunday)
  S     一个月中第几天的英文序数后缀，2个字符                                           st, nd, rd 或者 th 可与j格式符配合使用
  w     一周中天数的数字表述                                                            0 (for Sunday) 到 6 (for Saturday)
  z     一年中的第几天（从0开始）                                                       0 到 364 (365 闰年)
  W     ISO-8601标准，一年中的第几周，从星期一开始计算                                  01 到 53
  F     月份的完整文字表述，例如January 或 March                                    January 到 December
  m     月份的数字表述，数字以0开头                                                     01 到 12
  M     月份名称的英文缩写                                                              Jan 到 Dec
  n     月份的数字表述，数字不以0开头                                                   1 到 12
  t     指定月份的天数                                                                  28 到 31
  L     是否是闰年                                                                      如果是闰年，为1，其它为0
  o     ISO-8601 标准下的年份数字 (与(Y)相同，但如果ISO标准下的周序号(W)属              例如: 1998 或 2004
        前一年或后一年，将使用ISO标准的年份来替代)
  Y     年份的完整数字表示，4位数字                                                      例如: 1999 或 2003
  y     年份的两位数缩写                                                                 例如: 99 或 03
  a     上午和下午的小写字母                                                             am 或 pm
  A     上午和下午的大写字母                                                             AM 或 PM
  g     12小时制的小时数，数字不以0开头                                                  1 到 12
  G     24小时制的小时数，数字不以0开头                                                  0 到 23
  h     12小时制的小时数，数字以0开头                                                    01 到 12
  H     24小时制的小时数，数字以0开头                                                    00 到 23
  i     分钟，数字以0开头                                                                00 到 59
  s     秒，数字以0开头                                                                  00 到 59
  u     一秒的小数部分                                                                   例如:
        (至少 1 位, 允许任意位数)                                                     001 (也就是 0.001s) 或
                                                                                100 (也就是 0.100s) 或
                                                                                999 (也就是 0.999s) 或
                                                                                999876543210 (也就是 0.999876543210s)
  O     与格林威治时间(GMT)的差值（译者注：小时与分钟连在一起）                       	  例如: +1030
  P     与格林威治时间(GMT)的差值，小时与分钟之间有冒号                                  例如: -08:00
  T     执行此程序的机器所在时区的英文缩写                                               例如: EST, MDT, PDT ...
  Z     时区秒偏移量(西半球为负，东半球为正)                                          -43200 到 50400
  c     ISO 8601 日期
         注意:                                                                     例如:
        1) 如果未指定，月/日默认为当前的月/日，时间默认为子夜12点，同时，时区默认为        1991 或
            浏览器的时区。如果指定时间，必须包含小时和分钟。"T"定界符、秒、毫秒和时区       1992-10 或
            可选。                                                                        1993-09-20 或
                                                                                1994-08-19T16:20+01:00 或
                                                                                1995-07-18T17:21:28-02:00 或
        2) 一秒的小数部分，如果指定，必须至少包含1位（允许的最大位数没有上限），并且        1996-06-17T18:22:29.98765+03:00 或
           可以用'.'或者','分割。                                                         1997-05-16T19:23:30,12345-0400 或
           所支持的各种级别的date-time，请参考右侧的例子，或者参见	                       1998-04-15T20:24:31.2468Z or
          http://www.w3.org/TR/NOTE-datetime获取更多资料。                             1999-03-14T20:24:32Z or
                                                                                2000-02-13T21:25:33
                                                                                2001-01-12 22:26:34
  U     Unix时代起点的秒数 (January 1 1970 00:00:00 GMT)                             1193432466 或 -2138434463
  M$    Microsoft AJAX 序列化日期                                                        \/Date(1238606590509)\/
                                                                                (也就是 UTC milliseconds since epoch) 或
                                                                                \/Date(1238606590509+0800)\/
示例用法 (注意，你必须使用转义字符'\\'来对格式符号进行转义，以便获得它们的字面值):

// Sample date:
// 'Wed Jan 10 2007 15:05:01 GMT-0600 (Central Standard Time)'

var dt = new Date('1/10/2007 03:05:01 PM GMT-0600');
document.write(dt.format('Y-m-d'));                           // 2007-01-10
document.write(dt.format('F j, Y, g:i a'));                   // January 10, 2007, 3:05 pm
document.write(dt.format('l, \\t\\he jS \\of F Y h:i:s A'));  // Wednesday, the 10th of January 2007 03:05:01 PM
这里有一些标准的日期/时间模式可能对你有所帮助。 他们不是Date.js源码的一部分，但是如果需要使用它们，你可以简单地把这块代码拷贝到任何在Date.js后面导入的js 中去，它们也将成为Date对象的一部分，全局可用。 你可以自由地在你的代码中加入或者移去这部分代码。
Date.patterns = {
    ISO8601Long:"Y-m-d H:i:s",
    ISO8601Short:"Y-m-d",
    ShortDate: "n/j/Y",
    LongDate: "l, F d, Y",
    FullDateTime: "l, F d, Y g:i:s A",
    MonthDay: "F d",
    ShortTime: "g:i A",
    LongTime: "g:i:s A",
    SortableDateTime: "Y-m-d\\TH:i:s",
    UniversalSortableDateTime: "Y-m-d H:i:sO",
    YearMonth: "F, Y"
};
示例用法:

var dt = new Date();
document.write(dt.format(Date.patterns.ShortDate));

开发者可以使用自己定制的格式，通过提供一个formatting和parsing函数完成特定的需求。 这些函数存储在： parseFunctions 和 formatFunctions.

公共属性

Property Defined By
DAY : String
Date类的时间间隔常量
Date
HOUR : String
Date类的时间间隔常量
Date
MILLI : String
Date类的时间间隔常量
Date
MINUTE : String
Date类的时间间隔常量
Date
MONTH : String
Date类的时间间隔常量
Date
SECOND : String
Date类的时间间隔常量
Date
YEAR : String
Date类的时间间隔常量
Date
dayNames : Array
每天名称的文本数组。 覆盖这些值以支持国际化的日期。 例如: Date.dayNames =...
每天名称的文本数组。 覆盖这些值以支持国际化的日期。 例如:
Date.dayNames = [
      'SundayInYourLang',
      'MondayInYourLang',
      ...
    ];
Date
defaults : Object
一个哈希对象，包含了在解析时默认使用的date值...

一个哈希对象，包含了在解析时默认使用的date值。

合法的属性如下：

  • y : Number
    默认的年份值。(默认为undefined)
  • m : Number
    默认的月份值，从1开始。(默认为undefined)
  • d : Number
    默认的日期值。 (默认为undefined)
  • h : Number
    默认的小时值。(默认为undefined)
  • i : Number
    默认的分钟值。(默认为undefined)
  • s : Number
    默认的秒数值。(默认为undefined)
  • ms : Number
    默认的毫秒值。(默认为undefined)

覆盖这些属性以提供定制的默认日期值，这些值被 parseDate 方法使用。

注意: 在使用夏令时的国家 (也就是DST), the h, i, s 和 ms 属性与启用DST的准确时间相符合。 解决此问题是开发者的责任。

示例用法:

// set default day value to the first day of the month
Date.defaults.d = 1;
// parse a February date string containing only year and month values.
// setting the default day value to 1 prevents weird date rollover issues
// when attempting to parse the following date string on, for example, March 31st 2009.
Date.parseDate('2009-02', 'Y-m'); // returns a Date object representing February 1st 2009
Date
formatCodes : Object
基本的格式编码到格式函数映射的哈希表， 被...
基本的格式编码到格式函数映射的哈希表， 被 format 方法所使用。 格式化函数为字符串(或者是返回字符串的函数)， 它将计算日期对象的内容，并返回适当的值， format 就是用它来调用的。 添加到根元素，覆盖这些映射，可以自定义日期格式。
注意: Date.format() 方法在如果找不到合适的映射时，将按字面意义对待字符串。
例如:
Date.formatCodes.x = "String.leftPad(this.getDate(), 2, '0')";
(new Date()).format("X"); // returns the current day of the month
Date
formatFunctions : Object
一个哈希对象，其中的每个属性都是一个格式化函数。 属性名与提供的格式符名称相一致...

一个哈希对象，其中的每个属性都是一个格式化函数。 属性名与提供的格式符名称相一致。

此对象自动与日期格式函数组装在一起，因为日期格式对Ext标准的格式符来说是必须的。

自定义的格式函数可以插入到此对象中，键名就是它们的格式符 format。 例如：

Date.formatFunctions['x-date-format'] = myDateFormatter;

格式函数必须返回一个字符串代表传递的Date对象，并且被传入如下参数：

  • date : Date
    需要格式化的日期。

为了能按照以上的格式解析日期字符串，一个相应的解析函数必须放入 parseFunctions 属性中。

Date
monthNames : Array
一个月份名称的文本值数组。 覆盖这些值以支持国际化的日期 例如: Date.monthNam...
一个月份名称的文本值数组。 覆盖这些值以支持国际化的日期。 例如:
Date.monthNames = [
      'JanInYourLang',
      'FebInYourLang',
      ...
];
Date
monthNumbers : Object
一个对象哈希表，包含从0开始的javascript月份数值 (使用月份名称缩写作为key值。注意：key是大小写敏感的)...
一个对象哈希表，包含从0开始的javascript月份数值 (使用月份名称缩写作为key值。注意：key是大小写敏感的)。 覆盖这些值以支持国际化的日期。 Example:
Date.monthNumbers = {
      'ShortJanNameInYourLang':0,
      'ShortFebNameInYourLang':1,
      ...
    };
Date
parseFunctions : Object
An object hash in which each property is a date parsing function. The property name is the format string which that f...

An object hash in which each property is a date parsing function. The property name is the format string which that function parses.

This object is automatically populated with date parsing functions as date formats are requested for Ext standard formatting strings.

Custom parsing functions may be inserted into this object, keyed by a name which from then on may be used as a format string to parseDate.

Example:

                                Date.parseFunctions['x-date-format'] = myDateParser;

A parsing function should return a Date object, and is passed the following parameters:

  • date : String
    The date string to parse.
  • strict : Boolean
    True to validate date strings while parsing (i.e. prevent javascript Date "rollover") (The default must be false). Invalid date strings should return null when parsed.

To enable Dates to also be formatted according to that format, a corresponding formatting function must be placed into the formatFunctions property.

Date
useStrict : Boolean
全局标志，决定是否使用严格的日期解析。 严格的日期解析模式不会对无效的日期进行“反转”(译者注：一种容错处理...
全局标志，决定是否使用严格的日期解析。 严格的日期解析模式不会对无效的日期进行“反转”(译者注：一种容错处理， 比如指定的日期为32日，则自动回滚到1日)，“反转”操作是javascript Date对象的 默认行为。(更多信息参见 parseDate)默认为 false.
Date

公共方法

Method Defined By
add ( String interval , Number value ) : Date
提供基本时间运算的便捷方法。 此方法不会改变调用的时间实例...
提供基本时间运算的便捷方法。 此方法不会改变调用的时间实例---它创建并返回一个新的Date实例，包含运算结果的时间值。
例子:

// 基本用法:
var dt = new Date('10/29/2006').add(Date.DAY, 5);
document.write(dt); //returns 'Fri Nov 03 2006 00:00:00'

// 负值做减法:
var dt2 = new Date('10/1/2006').add(Date.DAY, -5);
document.write(dt2); //returns 'Tue Sep 26 2006 00:00:00'

//你甚至可以在一行代码中进行链式调用:
var dt3 = new Date('10/1/2006').add(Date.DAY, 5).add(Date.HOUR, 8).add(Date.MINUTE, -30);
document.write(dt3); //returns 'Fri Oct 06 2006 07:30:00'
参数:
  • interval : String
    一个合法的时间间隔枚举值。
  • value : Number
    增加到当前日期的数值。
返回值:
  • Date
    新的Date实例。
Date
between ( Date start , Date end ) : Boolean
检测当前日期是否落在所给的起始和结束日期之间（闭区间）。
检测当前日期是否落在所给的起始和结束日期之间（闭区间）。
参数:
  • start : Date
    Start date
  • end : Date
    End date
返回值:
  • Boolean
    如果落在所给的起始和结束日期的区间内（闭区间），返回true。
Date
clearTime ( Boolean clone ) : Date
试图从当前日期中清除所有的时间信息，设置时间为当日的午夜， 在可用时自动校准夏令时(DST)...
试图从当前日期中清除所有的时间信息，设置时间为当日的午夜， 在可用时自动校准夏令时(DST)。 (注意：浏览器宿主操作系统的DST时区信息被假定为是最新的)
参数:
  • clone : Boolean
    true将会创建当前日期的一个克隆，清除时间并返回它(默认值为false).
返回值:
  • Date
    当前日期，或者克隆版本。
Date
clone () : Date
使用调用此方法的实例的，严格相等的日期值， 创建并返回一个新的日期实例...
使用调用此方法的实例的，严格相等的日期值， 创建并返回一个新的日期实例。 Date对象是以引用的方式拷贝和传递的， 所以如果一个拷贝的日期变量被改变，原来的变量也将被改变。 当试图创建一个新的变量而不改变原来的实例时，你应该创建一个克隆版本。 正确克隆日期示例:
//wrong way:
    var orig = new Date('10/1/2006');
    var copy = orig;
    copy.setDate(5);
    document.write(orig);  //returns 'Thu Oct 05 2006'!

    //correct way:
    var orig = new Date('10/1/2006');
    var copy = orig.clone();
    copy.setDate(5);
    document.write(orig);  //returns 'Thu Oct 01 2006'
参数:
  • 无。
返回值:
  • Date
    新的Date实例。
Date
format ( String format ) : String
使用所提供的格式字符串格式化一个日期对象。
使用所提供的格式字符串格式化一个日期对象。
参数:
  • format : String
    格式字符串。
返回值:
  • String
    格式好的日期对象。
Date
getDayOfYear () : Number
获取一年中的天数，针对闰年的情况做过处理。
获取一年中的天数，针对闰年的情况做过处理。
参数:
  • 无。
返回值:
  • Number
    0 到 364 (闰年为365)。
Date
getDaysInMonth () : Number
获取当前月份的天数，为闰年做过调整。
获取当前月份的天数，为闰年做过调整。
参数:
  • 无。
返回值:
  • Number
    一个月中的天数。
Date
getElapsed ( [ Date date ] ) : Number
返回当前时间和传入的时间之间，时间差的毫秒数。
返回当前时间和传入的时间之间，时间差的毫秒数。
参数:
  • date : Date
    (可选)默认为当前时间
返回值:
  • Number
    差值毫秒数
Date
getFirstDateOfMonth () : Date
获取当前日期所在月的第一天的日期。
获取当前日期所在月的第一天的日期。
参数:
  • 无。
返回值:
  • Date
Date
getFirstDayOfMonth () : Number
获取当前月份的第一天，针对闰年的情况做过处理。 返回的值是一周中天数的索引数值(0-6)...
获取当前月份的第一天，针对闰年的情况做过处理。 返回的值是一周中天数的索引数值(0-6)， 可以与 monthNames 数组联合使用，以获得日期名称文本。
例子:
var dt = new Date('1/10/2007');
    document.write(Date.dayNames[dt.getFirstDayOfMonth()]); //output: 'Monday'
参数:
  • 无。
返回值:
  • Number
    日期数值(0-6)。
Date
getGMTOffset ( [ Boolean colon ] ) : String
获取GMT日期与当前日期的偏移量(相当于格式符'O')。
获取GMT日期与当前日期的偏移量(相当于格式符'O')。
参数:
  • colon : Boolean
    (可选) 如果为true，在小时和分钟数之间用逗号（','）间隔(默认值为 false)。
返回值:
  • String
    一个以+ 或 -为前缀的4字符偏移量字符串(例如：'-0600')。
Date
getLastDateOfMonth () : Date
获取当前日期所在月份最后一天的日期。
获取当前日期所在月份最后一天的日期。
参数:
  • 无。
返回值:
  • Date
Date
getLastDayOfMonth () : Number
获取当前月份的最后一天，为闰年做过调整。 返回的值是一周中天数的索引数值(0-6)， 可以与...
获取当前月份的最后一天，为闰年做过调整。 返回的值是一周中天数的索引数值(0-6)， 可以与 monthNames 数组联合使用，以获得日期名称文本。
例如：

var dt = new Date('1/10/2007');
document.write(Date.dayNames[dt.getLastDayOfMonth()]); //output: 'Wednesday'
参数:
  • 无。
返回值:
  • Number
    天数(0-6)。
Date
getMonthNumber ( String name ) : Number
<静态> 根据所给的月份名称的缩写或者全拼，获取从0开始的javascript月份数值...
<静态> 根据所给的月份名称的缩写或者全拼，获取从0开始的javascript月份数值。 覆盖此方法以支持国际化的日期。
参数:
  • name : String
    月份的全名/简写。
返回值:
  • Number
    一个从0开始计数的javascript月份数。
Date
getShortDayName ( Number day ) : String
<静态> 根据所给day的数值，获取day的名称。 覆盖此方法以支持国际化的日期。
<静态> 根据所给day的数值，获取day的名称。 覆盖此方法以支持国际化的日期。
参数:
  • day : Number
    一个从0开始的javascript天数数值。
返回值:
  • String
    一个简写的天数名。
Date
getShortMonthName ( Number month ) : String
<静态> 根据所给的月份数值获取月份名称的缩写。 覆盖此方法以支持国际化的日期。
<静态> 根据所给的月份数值获取月份名称的缩写。 覆盖此方法以支持国际化的日期。
参数:
  • month : Number
    一个从0开始的javascript月份数值。
返回值:
  • String
    月份名称缩写。
Date
getSuffix () : String
获取当前天的英文序数后缀(相当于格式说明符'S')。
获取当前天的英文序数后缀(相当于格式说明符'S')。
参数:
  • 无。
返回值:
  • String
    'st, 'nd', 'rd' 或 'th'.
Date
getTimezone () : String
获取当前日期所在时区的名称缩写 (相当于格式符'T')...
获取当前日期所在时区的名称缩写 (相当于格式符'T')。
注意: javascript Date对象的toString()方法返回的日期字符串不用于浏览器 (e.g. FF vs IE)和系统的时区设置(e.g. IE in Asia vs IE in America)。 对于一个给定的日期字符串，例如："Thu Oct 25 2007 22:55:35 GMT+0800 (马来群岛的时间格式)"， getTimezone()方法首先从一对圆括号中获取时区缩写 (它可能存在，也可能不存在)， 如果获取失败，它将继续在日期字符串的GMT偏移量部分获取时区缩写。
参数:
  • 无。
返回值:
  • String
    时区名称缩写(例如：'CST', 'PDT', 'EDT', 'MPST' ...).
Date
getWeekOfYear () : Number
获取一年的周数（ISO-8601标准）。 (相当于格式符'W'，但数字不以0开头)
获取一年的周数（ISO-8601标准）。 (相当于格式符'W'，但数字不以0开头)
参数:
  • 无。
返回值:
  • Number
    1 到 53
Date
isDST () : Boolean
检测当前日期是否受夏令时(DST)影响。
检测当前日期是否受夏令时(DST)影响。
参数:
  • 无。
返回值:
  • Boolean
    如果当前日期受夏令时(DST)影响，为true.
Date
isLeapYear () : Boolean
判断当前日期是否是闰年。
判断当前日期是否是闰年。
参数:
  • 无。
返回值:
  • Boolean
    如果当前日期处于一个闰年中，返回true，否则返回false。
Date
isValid ( Number year , Number month , Number day , [ Number hour ], [ Number minute ], [ Number second ], [ Number millisecond ] ) : Boolean
<静态> 检查传入的日期参数是否会导致javascript日期产生“反转”。(译者注：一种容错处理， 比如指定的日期为32日，则自动回滚到1日)
<静态> 检查传入的日期参数是否会导致javascript日期产生“反转”。(译者注：一种容错处理， 比如指定的日期为32日，则自动回滚到1日)
参数:
  • year : Number
    四位数年份
  • month : Number
    年中的月份，从1开始
  • day : Number
    月中的天
  • hour : Number
    (可选) Hour
  • minute : Number
    (可选) Minute
  • second : Number
    (可选) Second
  • millisecond : Number
    (可选) Millisecond
返回值:
  • Boolean
    如果传入的参数不会导致日期“反转”(译者注：一种容错处理， 比如指定的日期为32日，则自动回滚到1日)，返回true，其它返回false。
Date
parseDate ( String input , String format , [ Boolean strict ] ) : Date
<静态> 根据指定的格式解析传入的字符串。 注意：此方法期望的日期格式为一个基本的日历格式...
<静态> 根据指定的格式解析传入的字符串。 注意：此方法期望的日期格式为一个基本的日历格式， 这意味着，月份从1开始(1 = January)。 在传递进来的字符串中找不到的日期值，将会使用 defaults 哈希对象中的值 (也就是 year, month, day, hour, minute, second 或 millisecond)。 如果在defaults 哈希对象中没有指定相应的日期值，将使用当前日期的year, month, day 或者 DST-adjusted 0时的值来替代。 请记住，传入的日期字符串必须正好与格式字符相吻合，以保证解析操作能成功进行 (解析失败将返回null值)。

例子:

//dt = Fri May 25 2007 (current date)
var dt = new Date();

//dt = Thu May 25 2006 (today's month/day in 2006)
dt = Date.parseDate("2006", "Y");

//dt = Sun Jan 15 2006 (all date parts specified)
dt = Date.parseDate("2006-01-15", "Y-m-d");

//dt = Sun Jan 15 2006 15:20:01
dt = Date.parseDate("2006-01-15 3:20:01 PM", "Y-m-d g:i:s A");

// attempt to parse Sun Feb 29 2006 03:20:01 in strict mode
dt = Date.parseDate("2006-02-29 03:20:01", "Y-m-d H:i:s", true); // returns null
参数:
  • input : String
    原始日期字符串。
  • format : String
    期望的日期格式。
  • strict : Boolean
    (可选) 如果为true，在解析时对日期字符串进行校验(也就是避免javascript日期发生“反转”)(译者注：一种容错处理， 比如指定的日期为32日，则自动回滚到1日) (默认为 false)。 非法的日期字符串在解析时将会返回null。
返回值:
  • Date
    接卸后的日期。
Date

公共事件

该类没有公共事件。


Class Ext.Action

包: | Ext
定义类的文件: | Action.js
类: | Action
继承自: | Object

Action是一个可复用的功能，可以从所有特定的组件抽象出来， 这样它就可以有效地在多个组件之间共享。 Actions让你在所有支持Action接口的组件之间共享监听器、配置项和UI刷新机制 (尤其 Ext.Toolbar, Ext.Button 和 Ext.menu.Menu 组件)。

除了支持配置对象接口，任何需要使用Action的组件都必须支持如下方法列表， 以为这些将会在需要时被Action类调用: setText(string), setIconCls(string), setDisabled(boolean), setVisible(boolean) 和 setHandler(function).

示例用法:
//定义共享的action.下面每个组件都共享它
// display text and icon, and will display the same message on click.
var action = new Ext.Action({
    text: 'Do something',
    handler: function(){
        Ext.Msg.alert('Click', 'You did something.');
    },
    iconCls: 'do-something',
    itemId: 'myAction'
});

var panel = new Ext.Panel({
    title: 'Actions',
    width: 500,
    height: 300,
    tbar: [
        // Add the action directly to a toolbar as a menu button
        action,
        {
            text: 'Action Menu',
            // Add the action to a menu as a text item
            menu: [action]
        }
    ],
    items: [
        // Add the action to the panel body as a standard button
        new Ext.Button(action)
    ],
    renderTo: Ext.getBody()
});

// Change the text for all components using the action
action.setText('Something else');

// Reference an action through a container using the itemId
var btn = panel.getComponent('myAction');
var aRef = btn.baseAction;
aRef.setText('New text');

配置项

Config Options Defined By
disabled : Boolean
True将会禁用所有使用当前action的组件，false将会启用它们(默认为false)。
Action
handler : Function
每个绑定到当前action的组件，在主要的事件被触发时...
每个绑定到当前action的组件，在主要的事件被触发时，都会调用的函数 (默认为undefined)。
Action
hidden : Boolean
True将会隐藏所有使用当前action的组件，false将会显示它们(默认为false)。
Action
iconCls : String
CSS类选择器，指定了背景图片，所有使用当前action的组件都用它作为...
CSS类选择器，指定了背景图片，所有使用当前action的组件都用它作为 头部图标(默认为'')。

指定自定义图标类的例子如下:

// specify the property in the config for the class:
     ...
     iconCls: 'do-something'

// css class that specifies background image to be used as the icon image:
.do-something { background-image: url(../images/my-icon.gif) 0 6px no-repeat !important; }
Action
itemId : String
参见 Ext.Component. itemId.
Action
scope : Object
作用域(this引用) handler 在其中被执行。默认为当前Button.
Action
text : String
为使用当前action的所有组件设置的文本(默认为'')。
Action

公共属性

该类没有公共属性。

公共方法

Method Defined By
Action ( Object config )
参数:
  • config : Object
    配置选项
返回值:
  • void
Action
disable () : void
禁用所有使用当前action的组件。
禁用所有使用当前action的组件。
参数:
  • 无。
返回值:
  • void
Action
each ( Function fn , Object scope ) : void
在每个绑定到当前action的组件上调用一次指定的函数。 传递进来的函数应该接受一个单独的参数，它应该是一个...
在每个绑定到当前action的组件上调用一次指定的函数。 传递进来的函数应该接受一个单独的参数，它应该是一个 支持基本Action config/method结构的对象。
参数:
  • fn : Function
    需要在每个组件上执行的函数
  • scope : Object
    作用域( this 引用)函数在其中被执行。 默认为Component
返回值:
  • void
Action
enable () : void
启用所有使用当前action的组件。
启用所有使用当前action的组件。
参数:
  • 无。
返回值:
  • void
Action
execute ( [ Mixed arg1 ], [ Mixed arg2 ], [ Mixed etc... ] ) : void
使用之前配置对象中指定的处理函数，或者使用 setHandler 设置的函数...
使用之前配置对象中指定的处理函数，或者使用 setHandler 设置的函数，手动执行当前action。 任何传递给当前函数的参数都会被传递给处理函数。
参数:
  • arg1 : Mixed
    (可选)传递给处理函数的参数个数
  • arg2 : Mixed
    可选
  • etc... : Mixed
    可选
返回值:
  • void
Action
getIconClass () : void
获取使用当前action的所有组件，当前使用的图标CSS类。
获取使用当前action的所有组件，当前使用的图标CSS类。
参数:
  • 无。
返回值:
  • void
Action
getText () : void
获取所有使用当前action的组件中当前显示的文本。
获取所有使用当前action的组件中当前显示的文本。
参数:
  • 无。
返回值:
  • void
Action
hide () : void
隐藏使用当前action的所有组件。
隐藏使用当前action的所有组件。
参数:
  • 无。
返回值:
  • void
Action
isDisabled () : void
如果使用当前action的组件处于无效状态，返回true，否则返回false
如果使用当前action的组件处于无效状态，返回true，否则返回false
参数:
  • 无。
返回值:
  • void
Action
isHidden () : void
如果使用当前action的组件当前处于隐藏状态，返回false，其它返回false
如果使用当前action的组件当前处于隐藏状态，返回false，其它返回false
参数:
  • 无。
返回值:
  • void
Action
setDisabled ( Boolean disabled ) : void
禁用使用当前action的所有组件。 enable和 disable的快捷方式。
禁用使用当前action的所有组件。 enable和 disable的快捷方式。
参数:
  • disabled : Boolean
    True将会禁用组件，false将会启用它。
返回值:
  • void
Action
setHandler ( Function fn , Object scope ) : void
设置一个函数，每个使用当前action的组件，在它的主要事件被触发时都会调用此函数。
设置一个函数，每个使用当前action的组件，在它的主要事件被触发时都会调用此函数。
参数:
  • fn : Function
    将会被action的组件调用的函数。调用函数时不传递参数。
  • scope : Object
    作用域( this 引用)函数在其中被执行。 默认为触发事件的Component
返回值:
  • void
Action
setHidden ( Boolean hidden ) : void
设置所有使用当前action的组件的隐藏状态。 hide 和 show 方法的快捷方式。
设置所有使用当前action的组件的隐藏状态。 hide 和 show 方法的快捷方式。
参数:
  • hidden : Boolean
    True将会隐藏组件，false显示它。
返回值:
  • void
Action
setIconClass ( String cls ) : void
为所有使用当前action的组件设置图标CSS类。 该CSS类必须提供一个背景图片...
为所有使用当前action的组件设置图标CSS类。 该CSS类必须提供一个背景图片，它将被用作图标的图片。
参数:
  • cls : String
    提供图标图片的CSS类
返回值:
  • void
Action
setText ( String text ) : void
设置显示在使用当前action的组件中的文本。
设置显示在使用当前action的组件中的文本。
参数:
  • text : String
    需要显示的文本
返回值:
  • void
Action
show () : void
显示使用当前action的组件
显示使用当前action的组件
参数:
  • 无。
返回值:
  • void
Action

公共事件

该类没有公共事件。


Observable
    Connection
      Ajax

Class Ext.Ajax

包: | Ext
定义类的文件: | Connection.js
类: | Ajax
继承自: | Connection

此类是全局的Ajax请求类，它提供了一个简单的方法使得AJax请求达到最大的灵活性。

因为Ext.Ajax是单例的，所以它的通用属性/事件只需要设置一次，而且根据你的需要可以在请求方法层面上覆盖这些设置。

通常你可能想要设置的 属性有:

  • method

  • extraParams

  • url

                // 传递给每次请求的默认头信息
Ext.Ajax.defaultHeaders = {
    'Powered-By': 'Ext'
};

通常你可能想要设置的 事件有:

  • beforerequest

  • requestcomplete

  • requestexception

                // 例如:在每次Ajax请求时都显示一个微调控制器
Ext.Ajax.on('beforerequest', this.showSpinner, this);
Ext.Ajax.on('requestcomplete', this.hideSpinner, this);
Ext.Ajax.on('requestexception', this.hideSpinner, this);

一个请求的例子:

                // 基础的请求
Ext.Ajax.request({
   url: 'foo.php',
   success: someFn,
   failure: otherFn,
   headers: {
       'my-header': 'foo'
   },
   params: { foo: 'bar' }
});

// 提交的简单的ajax表格
Ext.Ajax.request({
    form: 'some-form',
    params: 'foo=bar'
});

此类为单利所以不能被直接创建。

配置项

Config Options Defined By
disableCachingParam : String
(可选) 通过一个“缓存终结者”设置参数以禁止缓存。默认值为'_dc'...
Connection
listeners : Object
一个包含一个或多个事件处理器的配置对象，会在初始化的时候被添加到目标对象上...

一个包含一个或多个事件处理器的配置对象，会在初始化的时候被添加到目标对象上。 该配置对象应该是一个有效的监听器配置对象就像 addListener例子中指定的一样可一次附加多个处理器。

ExtJs Components上的DOM事件

一些 ExtJs Component 类导出时会选择一些DOM事件(例如 "click", "mouseover" 等等), 这通常只是在有额外的值可以被添加时发生。例如DataView类的 click事件会传递被点击的节点。也可以直接在Component的HTMLElementevent上访问DOM事件，但必需在Component被渲染后监听器才能添加到Element 上。可以按照以下步骤添加插件:

// 插件会用一个监听器配置对象进行配置。
//该组件会被添加到所有处理方法的参数列表上。
Ext.DomObserver = Ext.extend(Object, {
    constructor: function(config) {
        this.listeners = config.listeners ? config.listeners : config;
    },

    // 组件将自己传递进了插件的初始化方法里
    init: function(c) {
        var p, l = this.listeners;
        for (p in l) {
            if (Ext.isFunction(l[p])) {
                l[p] = this.createHandler(l[p], c);
            } else {
                l[p].fn = this.createHandler(l[p].fn, c);
            }
        }

        // 渲染后立即添加监听器到元素上
        c.render = c.render.createSequence(function() {
            var e = c.getEl();
            if (e) {
                e.on(l);
            }
        });
    },

    createHandler: function(fn, c) {
        return function(e) {
            fn.call(this, e, c);
        };
    }
});

var combo = new Ext.form.ComboBox({

    // 元素被点击后折叠
    plugins: [ new Ext.DomObserver({
        click: function(evt, comp) {
            comp.collapse();
        }
    })],
    store: myStore,
    typeAhead: true,
    mode: 'local',
    triggerAction: 'all'
});

Observable

公共属性

Property |  | Defined By
 | autoAbort : Boolean 一个新的请求是否终止那些悬而未决的请求（默认值为 false) | Ajax
 | defaultHeaders : Object 一个包含请求头信息的对象，它将被添加到此对象产生的每一个请求中。 (默认值为 undefined) | Ajax
 | disableCaching : Boolean 如果为true，为GET请求添加一个唯一的缓存终结者参数（即去掉缓存，默认值为 true)。 | Ajax
 | extraParams : Object 一个包含多个属性的对象，它是此对象产生的每个请求的附加参数。 (默认值为... 一个包含多个属性的对象，它是此对象产生的每个请求的附加参数。(默认值为 undefined) 。 你需要传递给每个请求的，会话信息和其他的一些数据通常都会放在这里。 | Ajax
 | method : String HTTP请求的默认方法。 注意：这是大小写敏感的... HTTP请求的默认方式。 注意：这是大小写敏感的，应该全为大写 (默认为 undefined； 如果没有设置但是存在请求参数，将使用"POST"方式；否则使用"GET"方式。) | Ajax
 | timeout : Number 请求超时的毫秒数(默认值为 30000)。 | Ajax
 | url : String 向服务器提交请求的默认URL。 (默认值为 undefined)如果服务器接收所有的请求... 向服务器提交请求的默认URL。 (默认值为 undefined)如果服务器接收所有的请求都是通过一个URL，那么设置一次比每次都在请求中输入它要更容易。 | Ajax

公共方法

Method Defined By
abort ( [ Number transactionId ] ) : void
中止任何正在发生的请求。
Aborts any outstanding request.
参数:
  • transactionId : Number
    (可选) 默认值为最后一个事务
返回值:
  • void
Connection
addEvents( Object|String o, string Optional. ) : void
添加指定的事件到事件列表上，事件会被该Observable触发。
添加指定的事件到事件列表上，事件会被该Observable触发。
参数:
  • o : Object|String
    以事件名作为属性true作为值的对象 或者当多个事件名被分开的传递时则为第一个事件名。
  • Optional. : string
    事件名被分开的传递时则为事件名。 用法:
    this.addEvents('storeloaded', 'storecleared');
返回值:
  • void
Observable
addListener( String eventName, Function handler, [Object scope], [Object options] ) : void
给对象添加事件处理器。
给对象添加事件处理器。
参数:
  • eventName : String
    监听的事件名。
  • handler : Function
    事件调用的方法
  • scope : Object
    （可选）处理方法执行的作用域 (this的引用 reference)。 如果被忽略。默认为触发事件的对象。
  • options : Object
    （可选）包含处理器配置和属性的对象。 可能包含以下的属性:
    • scope : Object
      处理方法执行的作用域(this的引用) 。 如果被忽略。默认为触发事件的对象。
    • delay : Number
      在触发事件后延迟调用处理器的毫秒数。
    • single : Boolean
      如果为True则添加一个处理器来处理下一次的事件触发（仅一次），然后移除自己。
    • buffer : Number
      使得处理器延迟指定毫秒数后预定的运行在 一个Ext.util.DelayedTask中 。 如果事件在时间内再一次被触发，原始的处理器不会被调用，但是新的处理器会预定的在他的位置上。
    • target : Observable
      如果事件在目标的Observable上触发则仅仅调用处理器， 否则 事件会从子类的Observable上冒泡

    组合选项
    使用这些选项参数,可能会组合出不同类型的监听器：

    一个延迟的，一次性的监听器。

    myDataView.on('click', this.onClick, this, {
single: true,
delay: 100
});

    一次调用附加多个处理器
    该方法同样支持传递一个包含指定的多个处理器的属性的配置对象参数。

    myGridPanel.on({
'click' : {
    fn: this.onClick,
    scope: this,
    delay: 100
},
'mouseover' : {
    fn: this.onMouseOver,
    scope: this
},
'mouseout' : {
    fn: this.onMouseOut,
    scope: this
}
});

    或者一个简写的语法：

    myGridPanel.on({
'click' : this.onClick,
'mouseover' : this.onMouseOver,
'mouseout' : this.onMouseOut,
 scope: this
});
返回值:
  • void
Observable
enableBubble( String/Array events ) :void
是否现在使得事件会被该Observable触发并调用 this.getBubbleTarget()方法在拥有者的继承树...

是否现在使得事件会被该Observable触发并调用 this.getBubbleTarget()方法在拥有者的继承树中冒泡。Observable的基础类中没有该方法的实现。

该方法一般被Ext.Components用来冒泡事件到拥有者的容器。参看Ext.Component.getBubbleTarget默认的实现 在Ext.Component中返回组件的直接拥有者。但是如果需要的是一个已知的目标，该方法可以被重写来更快的访问需求的目标。

例子:

Ext.override(Ext.form.Field, {
    // 添加方法到Field的initComponent上改变事件为冒泡
    initComponent : Ext.form.Field.prototype.initComponent.createSequence(function() {
        this.enableBubble('change');
    }),

    // 我们知道我们想让Field的事件冒泡到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() {
            // 如果样式被修改标题会变红。
            myForm.header.setStyle('color', 'red');
        }
    }
});
参数:
  • events : String/Array
    冒泡的事件名，或事件名数组
返回值:
  • void
Observable
fireEvent( String eventName, Object... args ) : Boolean
用传入的参数触发指定的事件 (减去事件名)。 一个事件可以被设置为冒泡 Obse...

用传入的参数触发指定的事件 (减去事件名)。

一个事件可以被设置为冒泡到Observable父类继承树(参看 Ext.Component.getBubbleTarget) 调用enableBubble实现。

参数:
  • eventName : String
    触发的事件名。
  • args : Object...
    传递给处理器的可变长度参数。
返回值:
  • Boolean
    如果有任何的处理器返回false则返回false，否则返回true。
Observable
hasListener( String eventName ) : Boolean
检测对象是否包含指定事件的任何监听器
检测对象是否包含指定事件的任何监听器
参数:
  • eventName : String
    检测的事件名
返回值:
  • Boolean
    如果事件被监听则为true，否则为false
Observable
isLoading ( [ Number transactionId ] ) : Boolean
判断这个对象是否有一个正在发生的请求。
判断这个对象是否有一个正在发生的请求。
参数:
  • transactionId : Number
    (可选) 默认值为 the last transaction
返回值:
  • Boolean
    如果有一个正在发出的请求则为TRUE。
Connection
on( String eventName, Function handler, [Object scope], [Object options] ) : void
给对象添加事件处理器 (addListener的简写形式)
给对象添加事件处理器 (addListener的简写形式。)
参数:
  • eventName : String
    监听的事件类型
  • handler : Function
    事件调用的方法
  • scope : Object
    （可选）处理方法执行时的作用域 (this 的引用)。 如果被忽略。默认为触发事件的对象。
  • options : Object
    可选 包含处理器配置的对象。
返回值:
  • void
Observable
purgeListeners() : void
移除对象上所有的监听器
移除对象上所有的监听器
参数:
  • 无。
返回值:
  • void
Observable
relayEvents( Object o, Array events ) : void
从指定的Observable上传递选择的事件就好像被当前对象触发一样。
从指定的Observable上传递选择的事件就好像被当前对象触发一样。
参数:
  • o : Object
    该Observable上的事件被当前对象传递。
  • events : Array
    传递的数组名。
返回值:
  • void
Observable
removeListener( String eventName, Function handler, [Object scope] ) : void
删除一个事件处理器。
删除一个事件处理器。
参数:
  • eventName : String
    处理器关联的事件类型。
  • handler : Function
    移除的处理器。 这应该是传递到addListener里的方法的引用。
  • scope : Object
    （可选）处理器指定的初始作用域。
返回值:
  • void
Observable
request ( Object options ) : Number
发送一个HTTP请求到远程服务器. 重要: Ajax是异步请求, 并且此次通信会返回...

发送一个HTTP请求到远程服务器.

重要: Ajax是异步请求, 并且此次通信在收到服务器响应之前已经返回，要处理返回的任何数据都要在当前作回调函数中 。

                                Ext.Ajax.request({
   url: 'ajax_demo/sample.json',
   success: function(response, opts) {
      var obj = Ext.decode(response.responseText);
      console.dir(obj);
   },
   failure: function(response, opts) {
      console.log('server-side failure with status code ' + response.status);
   }
});

使用当前配置参数执行回调函数。 scope option.

参数:
  • options : Object
    Object 对象可能包含以下参数。
    • url : String/Function (可选)
      发送请求的URL，或者一个方法，调用它能返回一个URL字符串。方法的作用域由scope选项指定。默认为配置的 url .
    • params : Object/String/Function (Optional)
      可以是：一个包含属性的对象，它将被用作请求的参数；一个URL编码字符串；或者是一个方法，调用它可以产生前两项中的任意一个。方法的作用域由scope选项指定。
    • method : String (可选)
      HTTP请求的方式。默认为配置的方式，如果没有配置，当没有参数被发送时为"GET"，有参数发送时为"POST"。提示：请求方式名称是大小写敏感的，应该全是大写。
    • callback : Function (可选)
      当收到HTTP响应时调用的方法。不管请求成功还是失败，回调方法都会被调用，并被传入以下的参数：
      • options : Object
        调用request方法时的参数。
      • success : Boolean
        请求成功时为true.
      • response : Object
        包含响应数据的XMLHttpRequest对象。关于如何访问响应内容的详情，请参见 http://www.w3.org/TR/XMLHttpRequest/
    • success : Function (可选)
      当请求成功时调用的方法。并且将被传入以下参数:
      • response : Object
        包含响应数据的XMLHttpRequest对象。
      • options : Object
        调用request方法的参数。
    • failure : Function (可选)
      请求失败时调用的方法。它将被传入以下参数：
      • response : Object
        包含响应数据的XMLHttpRequest对象。
      • options : Object
        调用request方法的参数。
    • scope : Object (可选)
      执行回调方法的作用域：如果指定了url或者params参数，方法可以从其中获取数据，那么这些参数将作为调用这些方法的作用域。作用域默认人浏览器的window对象。
    • timeout : Number (可选)
      此请求超时时间以毫秒为单位，默认为30秒。
    • form : Element/HTMLElement/String (可选)
      可以从<form> 表单 元素或者 <form> 中获取参数。
    • isUpload : Boolean (可选)
      只对有在配置form 选项时才起作用.

      如果是一个可上传表单对象则此值为true (如果content type为 multipart/form，则会自动检测。

      文件上传不是使用普通的"Ajax"技术 , 也就是说文件上传 不是 使用XMLHttpRequests来实现的. 作为替代的是，表单是以标准的风格提交的，同时临时修改DOM的 <form>元素，使它的 target 指向一个动态生成的隐藏 <iframe> ，这个隐藏的 被插入到document中，在收到返回数据后被删除掉。

      浏览器将解析服务器的响应，为IFRAME创建document。如果服务器使用JSON发送响应，那么 Content-Type 头必须设置为"text/html"，以便告诉浏览器将文本直接插入document的body中而不做改变。

      response Text会检索form，并且XMLHttpRequest对象会创建一个包含 的responseText 属性，以符合 要求对事件处理程序和回调。

      必须明白的是，文件上传发送数据包的content type是 multipart/form ，并且一些服务器端技术（特别是JavaEE），为了从数据包内容解析参数名称和值，可能要求一些定制的处理。

    • headers : Object (可选)
      请求的头部信息。
    • xmlData : Object (可选)
      post的XML文档。注意：这将替代用作post的参数。所有参数都将被添加到URL后面。
    • jsonData : Object/String (可选)
      post用的JSON数据。注意：这将替代用作post的参数。所有参数都将被添加到URL后面。
    • disableCaching : Boolean (可选)
      如果为true，将关闭get的缓存功能。

    配置对象也可以包含其它的，执行后处理的回调函数所需要的属性，因为配置对象将被传递给回调函数。

返回值:
  • Number
    transactionId 服务器事务id。可以用来取消请求。
Connection
resumeEvents() : void
重新开始触发事件。(参见suspendEvents) 如果事件以queueSuspended参数被挂起，则在事件被挂起时 ...
重新开始触发事件。(参见 suspendEvents) 如果事件以queueSuspended 参数被挂起，则在事件被挂起时触发的事件会被传递到所有的监听器上
参数:
  • 无。
返回值:
  • void
Observable
serializeForm ( String/HTMLElement form ) : String
将传递进来的表单序列化成一个url编码的字符串
将传递进来的表单序列化成一个url编码的字符串
参数:
  • form : String/HTMLElement
返回值:
  • String
Ajax
suspendEvents( Boolean queueSuspended ) : void
暂停触发所有的事件。 (参看resumeEvents)
暂停触发所有的事件。（参看 resumeEvents)
参数:
  • queueSuspended : Boolean
    如果传递为true则排列好暂停的事件使得在调用 resumeEvents 后再触发它们，而不是抛弃所有暂停的事件。
返回值:
  • void
Observable
un( String eventName, Function handler, [Object scope] ) : void
删除一个事件处理器(removeListener方法的简写形式)
删除一个事件处理器(removeListener方法的简写形式。)
参数:
  • eventName : String
    处理器关联的事件类型
  • handler : Function
    被删除的处理器 这应该是传入 addListener 中的方法的引用。
  • scope : Object
    （可选）为处理器指定的初始作用域。
返回值:
  • void
Observable

公共事件

Event Defined By
beforerequest : ( Connection conn , Object options )
当发出获取数据的请求之前触发。
当发出获取数据的请求之前触发。
监听器将会用调用以下格式的参数::
  • conn : Connection
    当前Connection对象
  • options : Object
    传递给 request 方法的配置选项的对象。
Connection
requestcomplete : ( Connection conn , Object response , Object options )
当请求成功完成时触发。
当请求成功完成时触发。
监听器将会用以下的参数格式调用:
  • conn : Connection
    Connection对象。
  • response : Object
    含响应数据的XHR对象。详情参见 The XMLHttpRequest Object
  • options : Object
    传递给 request 方法的配置对象。
Connection
requestexception : ( Connection conn , Object response , Object options )
当服务器返回一个HTTP错误状态时触发。HTTP状态码详情请参见 <a href="http://www.w3.org/Protocols/rfc2616/rfc2616-...
当服务器返回一个HTTP错误状态时触发。HTTP状态码详情请参见 HTTP Status Code Definitions
监听器将会用以下的参数格式调用:
  • conn : Connection
    当前Connection对象。
  • response : Object
    包含响应数据的XHR对象。详情参见 The XMLHttpRequest Object for details.
  • options : Object
    传递给 request 方法的配置选项对象。
Connection


Observable
    Component
      BoxComponent

Class Ext.BoxComponent

包: | Ext
定义类的文件: | BoxComponent.js
类: | BoxComponent
子类: | Button, Container, DataView, FlashComponent, ProgressBar, Spacer, Toolbar.Item, Field, Label, MultiSlider
继承自: | Component

任何使用盒子模型，可见 Component 基类。

BoxComponent提供自动盒子模型大小和位置调节功能，并且能正确地配合组件渲染模型工作。

BoxComponent可以创建一个自定义的Component组件封装HTML元素，或者使用已经存在的元素，也可以在渲染时创建一个元素。通常，布局中的许多Component组件就是BoxComponent，使得具备高、宽可控的特性。

使用一个已经存在的元素作为BoxComponent的属性，这样以便您使用预先设置好的元素来配置el属性:

var pageHeader = new Ext.BoxComponent({
    el: 'my-header-div'
});
这可能被 added 到一个 Container 中作为子项目。

在BoxComponent渲染时创建一个HTML元素，使用autoEl配置， 采用DomHelper规格:

var myImage = new Ext.BoxComponent({
    autoEl: {
        tag: 'img',
        src: '/images/my-image.jpg'
    }
});

配置项

Config Options Defined By
allowDomMove : Boolean
在渲染时组件是否可以移动Dom节点(默认为true)。
Component
anchor : String
注: 这个配置只用于该组件被包含在一个已使用AnchorLayout...

注: 这个配置只用于该组件被包含在一个已使用 AnchorLayout (或者其子类)配置的Container时。 基于布局管理器，例如：

  • Ext.form.FormPanel
  • 指定 layout: 'anchor' // or 'form', or 'absolute'

参见 Ext.layout.AnchorLayout. anchor 。

BoxComponent
applyTo : Mixed
指定一个元素的id、一个DOM元素或者一个已经存在并被渲染到DIV中的元素，此DIV已经被...

指定一个元素的id、一个DOM元素或者一个已经存在并被渲染到DIV中的元素，此DIV已经被 渲染到document中，并且为当前组件指定了一些结构化的标签。

  • 描述 :
      当使用了 applyTo， 在主元素中也可以用id或者CSS类名来指定组件的托管部分， 并且，如果可以的话，创建的组件可能也会试图在那个标签中创建它的子组件。
  • 注意 :
      当使用此配置项时，无需调用render()方法。
      如果指定了applyTo属性，任何传递给 renderTo 的值都会被忽略，并且目标元素的父节点将会自动被用作组件的容器。
Component
autoEl : Mixed
一个表签名或者一个 DomHelper 描述，用来创建 Element ，它将封装当前组件...

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

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

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

{
    xtype: 'box',
    autoEl: {
        tag: 'img',
        src: 'http://www.example.com/example.jpg'

    }
}, {
    xtype: 'box',
    autoEl: {
        tag: 'blockquote',
        html: 'autoEl is cool!'
    }
}, {
    xtype: 'container',
    autoEl: 'ul',
    cls: 'ux-unordered-list',
    items: {
        xtype: 'box',
        autoEl: 'li',
        html: 'First list item'
    }
}
Component
autoHeight : Boolean
如果值为true，height配置项为'auto'，否则值为false的话使用固定的高度...

如果值为true，height配置项为'auto'，否则值为false的话使用固定的高度， 或者可以由其父类容器 layout manager来控制。(默认值为 false)。

注: 虽然很多组件继承了这个配置选项，但不是所有这些组件的自适应高度配置都会像期望的那样起作用。 设置autoHeight：值为true时，浏览器将根据元素的内容自动设置高度，这将意味着Ext不会去管理高度。

如果是由浏览器来管理高度，需要注意的是，通过浏览器进行调整的结构组件内不能被发现， 因此宽度的变化可能导致需要进行同步处理元素的高度。 例如：

var w = new Ext.Window({
    title: 'Window',
    width: 600,
    autoHeight: true,
    items: {
        title: 'Collapse Me',
        height: 400,
        collapsible: true,
        border: false,
        listeners: {
            beforecollapse: function() {
                w.el.shadow.hide();
            },
            beforeexpand: function() {
                w.el.shadow.hide();
            },
            collapse: function() {
                w.syncShadow();
            },
            expand: function() {
                w.syncShadow();
            }
        }
    }
}).show();
BoxComponent
autoScroll : Boolean
如果值为true，将会在该元素上使用overflow:'auto'配置，并且在必要的时候...
如果值为true，将会在该元素上使用overflow:'auto'配置，并且在必要的时候自动显示滚动条，否则，溢出部分的组件都会被切除(默认值为 false)。
BoxComponent
autoShow : Boolean
如果组件需要检测隐藏CSS属性(如 'x-hidden' 或者 'x-hide-display')并且在渲染时删除...
如果组件需要检测隐藏CSS属性(如 'x-hidden' 或者 'x-hide-display')并且在渲染时删除它们 (默认为false)，设置此值为true。
Component
autoWidth : Boolean
如果为true，使用width:'auto'配置，否则使用固定的宽度...

如果为true，使用width:'auto'配置，否则使用固定的宽度，或者可以由其父类容器的layout manager来控制。(默认值为 false)。

注: 虽然很多组件继承了这个配置选项，但不是所有这些组件的自适应宽度配置都会像期望的那样起作用。 设置autoWidth：值为true时，浏览器将根据元素的内容自动设置宽度，这将意味着Ext不会去管理宽度。

如果是由浏览器来管理宽度，需要注意的是，通过浏览器进行调整的结构组件内不能被发现，因此宽度的变化可能导致需要进行同步处理元素的宽度。 例如，在这个元素的目标是：

<div id='grid-container' style='margin-left:25%;width:50%'></div>
当浏览器窗口改变时，渲染后的Panel必须监听浏览器窗口大小的变化，以便通知子项，浏览器改变了其宽度：

var myPanel = new Ext.Panel({
    renderTo: 'grid-container',
    monitorResize: true, // relay on browser resize
    title: 'Panel',
    height: 400,
    autoWidth: true,
    layout: 'hbox',
    layoutConfig: {
        align: 'stretch'
    },
    defaults: {
        flex: 1
    },
    items: [{
        title: 'Box 1',
    }, {
        title: 'Box 2'
    }, {
        title: 'Box 3'
    }],
});
BoxComponent
boxMaxHeight : Number
设置组件的最大高度值...

设置组件的最大高度值。

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

BoxComponent
boxMaxWidth : Number
设置组件的最大宽度值...

设置组件的最大宽度值。

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

BoxComponent
boxMinHeight : Number
设置组件的最小高度值...

设置组件的最小高度值。

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

BoxComponent
boxMinWidth : Number
设置组件的最小宽度值...

设置组件的最小宽度值。

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

BoxComponent
bubbleEvents : Array
一个事件数组，当这些事件被触发时，将会被冒泡到所有父容器中。参见....

一个事件数组，当这些事件被触发时，将会被冒泡到所有父容器中。参见 Ext.util.Observable.enableBubble。 默认为 []。

Component
clearCls : String
应用到特殊的clearing div的CSS类， 这个clearing div直接渲染到每个form field的包装器后面...

应用到特殊的clearing div的CSS类， 这个clearing div直接渲染到每个form field的包装器后面，以提供 清除field的功能(默认为 'x-form-clear-left')。

注意: 只有在当前组件被渲染到一个使用FormLayout 布局(例如 Ext.form.FormPanel 或者指定 layout:'form')的 容器中、或者是指定了一个fieldLabel 、或者指定isFormField=true 时此配置才有效。

另请参见 Ext.layout.FormLayout. fieldTpl。

Component
cls : String
一个可选的额外CSS类，它将被添加到当前组件的元素上(默认为'')...
一个可选的额外CSS类，它将被添加到当前组件的元素上(默认为'')。 此属性对于在组件上，或者它的任何使用标准CSS规则的孩子节点上， 添加定制的样式非常有用。
Component
contentEl : String
(可选)指定一个已存在的HTML元素，或者一个已存在HTML元素的...

(可选)指定一个已存在的HTML元素，或者一个已存在HTML元素的 id ，它们将被用作当前组件的内容。

  • 描述 :
    此配置选项被用来将一个已存在的HTML元素 插入到一个新组件(在组件渲染之后它简单地移动DOM元素) 的layout元素中，使它成为该组件的内容。
  • 注意 :
    指定的HTML元素将被append到组件的layout元素中， 在所有配置的 HTML 被插入之后， 并且，这样的话，在render事件 被触发时，document中将不再包含此元素。
    指定的HTML元素将不会参与组件所有可能使用的 layout 过程(译者注：指这些HTML元素 不会参与布局操作)。 它仅是HTML而已。布局操作实在孩子 items 上进行的。
    添加 x-hidden 或者 x-hide-display CSS类，以防在内容渲染到panel时发生闪烁。
Component
ctCls : String
一个可选的外部CSS样式，添加到这个组件的容器(默认值为 '')。 这个方法对于使用标准的CSS规则...

一个可选的外部CSS样式，添加到这个组件的容器(默认值为 '')。 这个方法对于使用标准的CSS规则，为组件或它的任何一个子组件添加特定的样式非常有用。 参见 Ext.layout.ContainerLayout和 extraCls 。

注意: ctCls 默认为 ''期望如下的类，它们将指定一个默认值:

  • Box Layout : 'x-box-layout-ct'
使用一个额外的CSS类配置以上的Class，它是append到默认对象上的。例如， 对于BoxLayout (Hbox and Vbox):
                                ctCls: 'x-box-layout-ct custom-class'

Component
data : Mixed
初始化数据集，它将被应用到 tpl 上以刷新组件的内容区域。
Component
disabled : Boolean
当前组件处于无效状态时为true。 Read-only.
Component
disabledClass : String
当组件处于无效状态时添加到组件上的CSS类(默认为 'x-item-disabled')。
Component
fieldLabel : String
紧靠此field显示的标签文本(默认值为 '')。注意...

紧靠此field显示的标签文本(默认值为 '')。

注意:只有在当前组件被渲染到一个使用FormLayout 的容器中时，此配置才有效。 (例如 Ext.form.FormPanel 或 指定 layout:'form')。

另请参见 hideLabel 、 Ext.layout.FormLayout和 fieldTpl。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Name'
    }]
});
Component
flex : Number
注: 这个配置只用于该组件被包含在一个已使用BoxLayout配置的Container中时...

注: 这个配置只用于该组件被包含在一个已使用BoxLayout配置的Container中时。通过计算每一个子组件的flex值所占全部flex值之和的比例，来决定子组件的宽(HBoxLayout)高(VBoxlayout)。 任何子项的 flex = 0 或 flex = undefined 将不被设置(初始值大小将不被改变)。

BoxComponent
height : Number
组件的高度(默认值为 auto)。注:如果想使用百分比的方式...
组件的高度(默认值为 auto)。注:如果想使用百分比的方式来设置值，请查看 Ext.Component.anchor。
BoxComponent
hidden : Boolean
如果当前组件处于隐藏状态，此值为true。Read-only。
Component
hideLabel : Boolean
true时完全隐藏label元素 ( label 和 separator)。 默认为 false。 默认情况下，即使你不指定...

true时完全隐藏label元素 ( label 和 separator)。 默认为 false。 默认情况下，即使你不指定 fieldLabel 它的空间仍然会被保留，这样这块区域会与其它确实拥有label的区域位于同一排。 讲此值设置为 true 将导致此区域不再保留此空间。

注意: 参见 clearCls 的注释。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield'
        hideLabel: true
    }]
});
Component
hideMode : String
组件如何隐藏，支持的值有： 'visibility' (css visibility), 'offsets' (位置偏移量为负值) 和...

组件如何隐藏，支持的值有： 'visibility' (css visibility), 'offsets' (位置偏移量为负值) 和 'display' (css display).

注意:一般首选默认值 'display'，因为当组件第一次显示的时候它们会自动进行布局 (隐藏的时候不会调整尺寸)。

Component
hideParent : Boolean
此值为true时，当调用hide/show方法时，将会hide和show组件的容器...
此值为true时，当调用hide/show方法时，将会hide和show组件的容器；false时将会 hide和show组件自身(默认为false)。例如，这可以用作window上隐藏按钮的一种 快捷操作，通过设置此按钮的hideParent:true，然后把它添加到window上。
Component
html : String/Object
一个HTML片段，或者一个 DomHelper 描述，用作layout元素的内容(默认为'')。...
一个HTML片段，或者一个 DomHelper 描述，用作layout元素的内容(默认为'')。 这个HTML内容在组件渲染之后才被添加，所以在 render 出发的时候，document中尚未包含此HTML。 但是这个内容将会在所有配置的 contentEl 之前被插入到body标签中。
Component
id : String
当前组件唯一的id(默认为auto-assigned id)...

当前组件唯一的id(默认为auto-assigned id)。 如果你需要在以后访问组件，而又没有一个有效的组件对象引用，那么你需要指定一个 id( 也就是，使用Ext. getCmp方法 )。

注意，此id也将被用作组件底层HTML标签的id，这些标签被渲染到页面中。 这将允许你编写基于id的CSS规则，以独立地描述指定的实例；并且，也可以通过 组件父标签的id选中子元素。

注意:为了避免与唯一的id 产生重复， 请参见 itemId 和 ref 。

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

Component
itemCls : String
注意: 只有在当前组件被渲染到一个使用FormLayout 布局的 容器中时此配置才有效...

注意: 只有在当前组件被渲染到一个使用FormLayout 布局的 容器中时此配置才有效。 (例如Ext.form.FormPanel 或者指定 layout:'form')。

一个附加的CSS类，应用到div上，包装当前field的表单元素。 如果提供了此参数， field级上的itemCls将会覆盖 container级上提供的 默认itemCls。 为itemCls指定的值将会被添加默认的 类('x-form-item')。

既然它被应用到项目的包装器上(参见 Ext.layout.FormLayout。 fieldTpl)， 它将允许你编写能应用到此field、label(如果有指定)、或者field内部任何其它元素的标准CSS规则。

注意: 参考 fieldLabel的注释。 .

示例用法:

// Apply a style to the field's label:
<style>
    .required .x-form-item-label {font-weight:bold;color:red;}
</style>

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Name',
        itemCls: 'required' //this label will be styled
    },{
        xtype: 'textfield',
        fieldLabel: 'Favorite Color'
    }]
});
Component
itemId : String
当没有可利用的对象引用时，itemId可以作为第二选择，用来获得一个组件的引用， 代替 ...

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

var c = new Ext.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'); // 与 Ext.getCmp()不同

p2 = p1.ownerCt.getComponent('p2'); // 通过兄弟对象获得引用

另请参见 id 和 ref 。

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

Component
labelSeparator : String
每个fieldLabel 文本后面现实的分隔符。 此属性可以在多个层次上进行配置...

每个fieldLabel 文本后面现实的分隔符。 此属性可以在多个层次上进行配置。优先顺序为：

  • field / component level
  • container level
  • layout level (默认为冒号 ':')
如不需要为当前field的label显示分隔符，指定一个空字符串''即可。

注意:参见 clearCls 的注释。

另请参见 hideLabel 和 Ext.layout.FormLayout。 fieldTpl。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    layoutConfig: {
        labelSeparator: '~'   // layout config has lowest priority (defaults to ':')
    },
    labelSeparator: '>>',     // config at container level
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Field 1',
        labelSeparator: '...' // field/component level config supersedes others
    },{
        xtype: 'textfield',
        fieldLabel: 'Field 2' // labelSeparator will be '='

    }]
});
Component
labelStyle : String
一个CSS样式描述字符串，它将直接应用到当前field的label上...

一个CSS样式描述字符串，它将直接应用到当前field的label上。 如果有设置，默认为容器的labelStyle值(例如 Ext.layout.FormLayout.labelStyle , 或者 '')。

注意:参见 clearCls 的注释。

另请参见 hideLabel 和 Ext.layout.FormLayout. fieldTpl。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Name',
        labelStyle: 'font-weight:bold;'
    }]
});
Component
listeners : Object
一个包含一个或多个事件处理器的配置对象，会在初始化的时候被添加到目标对象上...

一个包含一个或多个事件处理器的配置对象，会在初始化的时候被添加到目标对象上。 该配置对象应该是一个有效的监听器配置对象就像 addListener例子中指定的一样可一次附加多个处理器。

ExtJs Components上的DOM事件

一些 ExtJs Component 类导出时会选择一些DOM事件(例如 "click", "mouseover" 等等), 这通常只是在有额外的值可以被添加时发生。例如DataView类的 click事件会传递被点击的节点。也可以直接在Component的HTMLElementevent上访问DOM事件，但必需在Component被渲染后监听器才能添加到Element 上。可以按照以下步骤添加插件:

// 插件会用一个监听器配置对象进行配置。
//该组件会被添加到所有处理方法的参数列表上。
Ext.DomObserver = Ext.extend(Object, {
    constructor: function(config) {
        this.listeners = config.listeners ? config.listeners : config;
    },

    // 组件将自己传递进了插件的初始化方法里
    init: function(c) {
        var p, l = this.listeners;
        for (p in l) {
            if (Ext.isFunction(l[p])) {
                l[p] = this.createHandler(l[p], c);
            } else {
                l[p].fn = this.createHandler(l[p].fn, c);
            }
        }

        // 渲染后立即添加监听器到元素上
        c.render = c.render.createSequence(function() {
            var e = c.getEl();
            if (e) {
                e.on(l);
            }
        });
    },

    createHandler: function(fn, c) {
        return function(e) {
            fn.call(this, e, c);
        };
    }
});

var combo = new Ext.form.ComboBox({

    // 元素被点击后折叠
    plugins: [ new Ext.DomObserver({
        click: function(evt, comp) {
            comp.collapse();
        }
    })],
    store: myStore,
    typeAhead: true,
    mode: 'local',
    triggerAction: 'all'
});

Observable
margins : Object
注:此配置只用于该组件展现在一个使用BorderLayout...

注:此配置只用于该组件展现在一个使用BorderLayout 或 BoxLayout的两个子类之一作为布局的容器。

这个margins对象在该组件中的格式为：

{top: (top margin),right: (right margin),bottom: (bottom margin),left: (left margin)}

也可以是一个字符串，中间用空格分隔，margin值为数字。 把matches中每一个值的次序跟CSS中margin值的排列方式相对应：

  • 如果只有一个值，它适用于所有方面。
  • 如果有两个值，top和bottom的边框设置为第一个值，left和right设置为第二个值。
  • 如果有三个值，top设置为第一个值，left和right设置为第二个值，bottom设置为第三个值。
  • 如果有四个值，分别设置为top, right, bottom, left。

默认值:

{top:0, right:0, bottom:0, left:0}
BoxComponent
overCls : String
一个可选的额外的CSS类，它将在鼠标移过元素时被添加到组件上...
一个可选的额外的CSS类，它将在鼠标移过元素时被添加到组件上，鼠标移出时 删除。(默认为'')。此属性对于在组件上，或者它的任何使用标准CSS规则的孩子节点上， 添加定制的'active' 或者 'hover'样式非常有用。
Component
pageX : Number
如果该组件被包含在一个指定位置的容器中，这个值表示页面级的x坐标值（译者注：在有滚动条的情况下这个值很有用）。
BoxComponent
pageY : Number
如果该组件被包含在一个指定位置的容器中，这个值表示页面级的y坐标值（译者注：在有滚动条的情况下这个值很有用）。
BoxComponent
plugins : Object/Array
一个对象或者一个对象数组，为组件提供特殊的功能 ...
一个对象或者一个对象数组，为组件提供特殊的功能。 对一个合法的插件唯一的要求是它含有一个init()方法， 能接收一个Ext.Component型的参数。 当组件被创建时，如果有可用的插件，组件将会调用每个插件的init方法， 并将自身的引用作为方法参数传递给它。然后，每个插件就可以调用方法或者响应组件上的事件， 就像需要的那样提供自己的功能。
Component
ptype : String
需要创建配置的ptype。 当传递一个配置对象给构造函数时...
需要创建配置的ptype。 当传递一个配置对象给构造函数时，此配置选项不会被使用。 只有在使用懒初始化的时候此配置项才会被使用， 此时Plugin不是 通过一个完整的实例组件，而是通过一个Component配置指定的。 在渲染时，将会查找ptype以决定创建何种类型的Plugin。

如果你创建自己的Plugin，你可以通过 Ext.ComponentMgr.registerPlugin 对它们进行注册，以便能利用懒初始化和渲染机制。
Component
ref : String
一个路径描述，与组件的 ownerCt 相关，它描述了把当前组件的命名引用放置到哪个父容器中去。...

一个路径描述，与组件的 ownerCt 相关，它描述了把当前组件的命名引用放置到哪个父容器中去。

祖先的坐标路径可以通过'/'字符进行分隔。 例如，将一个Toolbar Button的引用放入 拥有此Toolbar的Panel中:

var myGrid = new Ext.grid.EditorGridPanel({
    title: 'My EditorGridPanel',
    store: myStore,
    colModel: myColModel,
    tbar: [{
        text: 'Save',
        handler: saveChanges,
        disabled: true,
        ref: '../saveButton'
    }],
    listeners: {
        afteredit: function() {
//          The button reference is in the GridPanel
            myGrid.saveButton.enable();
        }
    }
});

在上面的代码中，如果 ref 是 'saveButton' ，那么引用将会被放置到Toolbar中。 ref 中的每个'/' 都会从组件的 ownerCt 向上移动一级。

另请参见 added 和 removed 事件。

Component
region : String
注: 此配置只用于该组件展现在一个布局为BorderLayout的容器中...

注: 此配置只用于该组件展现在一个布局为BorderLayout的容器中(例如指定layout:'border')。

详见Ext.layout.BorderLayout。

BoxComponent
renderTo : Mixed
该值可以是一个节点的id、一个DOM节点或者一个已存在的元素...

该值可以是一个节点的id、一个DOM节点或者一个已存在的元素， 组件将会被渲染到其中。

  • 注意 :
      如果组件不是一个Container 的子项目时， 不要使用此选项。 渲染和管理它的子项目是一个Container 的layout manager的责任。
      当使用此配置项时，无需调用render()方法。

另请参见 render 。

Component
stateEvents : Array
一个事件数组，当它们被触发时，组件需要保存自己的状态(默认值为 none)...

一个事件数组，当它们被触发时，组件需要保存自己的状态(默认值为 none)。 它们可以是任何该组件支持的事件类型，包括浏览器事件和 自定义事件(例如['click', 'customerchange'])。

对于保存和恢复组件状态的详细解释，参见 stateful

Component
stateId : String
为该组件指定的唯一的id值，它被用作管理组件状态的目的...
为该组件指定的唯一的id值，它被用作管理组件状态的目的。 (如果设定了id，默认值为组件自己的id，否则，如果组件使用自动生成的id，此值为null)。

对于保存和反解析组件状态的解释，参见 stateful 。

Component
stateful : Boolean
一个标志参数，它将引起组件在启动时尝试从一个保存的状态中恢复内部状态参数...

一个标志参数，它将引起组件在启动时尝试从一个保存的状态中恢复内部状态参数。 组件必须要么拥有一个 stateId 或者 id ，它们被分配给需要被管理的状态属性。 在跨页面加载时，不保证自动生成的id属性的稳定性， 并且，不能依赖此id来保存和恢复一个组件的相同状态。

为了保存状态的操作能够工作，状态管理器的提供者必须 被设置成一个Ext.state.Provider 的实现类，它覆盖了set 和get 方法，以便保存和恢复name/value对。 有一个内置的Ext.state.CookieProvider 可用。

为当前页面设置状态提供者:

Ext.state.Manager.setProvider(new Ext.state.CookieProvider({
    expires: new Date(new Date().getTime()+(1000*60*60*24*7)), //7 days from now
}));

当 stateEvents 配置项中其中之一的事件被触发时， 一个状态可保存的组件将试图保存其状态。

保存状态时，一个可保存状态的组件首先需要通过调用 getState 方法来序列化它的状态。 默认情况下，此函数什么事都不做。 开发者必须提供一个实现，返回一个hash对象，它描述了组件可恢复的状态。

getState方法产生的值将会传递给 Ext.state.Manager.set 方法，它使用配置的 Ext.state.Provider 来保存对象，以组件的 stateId 为key，或者，如果此值（指stateId）没有指定时， 使用它的 id 作为key。

在进行构造时，一个可保存状态的组件试图通过调用 Ext.state.Manager.get方法来 恢复它的状态，传递 stateId 或者，如果此值（指stateId）没有指定时， 使用它的 id 作为参数。

结果对象被传递给 applyState 。 applyState 的默认实现只是简单地把属性拷贝到对象中， 但是开发者可以覆盖此方法以支持更多行为。

通过向 beforestaterestore, staterestore, beforestatesave 和 statesave 事件上绑定监听器，你可以在保存和恢复状态时进行额外的处理。

Component
style : String
被添加到组件元素的特定样式。 必须是按照...
被添加到组件元素的特定样式。 必须是按照 Ext.Element.applyStyles 类指定格式的合法参数值。

new Ext.Panel({
    title: 'Some Title',
    renderTo: Ext.getBody(),
    width: 400, height: 300,
    layout: 'form',
    items: [{
        xtype: 'textarea',
        style: {
            width: '95%',
            marginBottom: '10px'
        }
    },
        new Ext.Button({
            text: 'Send',
            minWidth: '100',
            style: {
                marginBottom: '10px'
            }
        })
    ]
});
Component
tabTip : String
注: 这个配置只用于当该组件作为TabPanel的一个子项目时使用...

注: 这个配置只用于当该组件作为TabPanel的一个子项目时使用。

一个String类型的innerHTML(支持html标签)，当鼠标放在该选项上的时，显示一个tooltip。为了tips能够被渲染，Ext.QuickTips.init()必须被提前调用。
BoxComponent
tpl : Mixed
一个 Ext.Template , Ext.XTemplate 或者一个用来形成一个Ext.XTemplate的字符串数组...
一个 Ext.Template , Ext.XTemplate 或者一个用来形成一个Ext.XTemplate的字符串数组。 与 data 和 tplWriteMode 配置项协同使用。
Component
tplWriteMode : String
刷新组件的内容区域时使用的Ext.(X)Template方式。 默认为'overwrite' (参见 Ext.XTemplate.overwrite )。
刷新组件的内容区域时使用的Ext.(X)Template方式。 默认为'overwrite' (参见 Ext.XTemplate.overwrite )。
Component
width : Number
组件的宽度(默认值为 auto)。注:如果想使用百分比的方式...
组件的宽度(默认值为 auto)。注:如果想使用百分比的方式来设置值，请查看 Ext.Component.anchor。
BoxComponent
x : Number
如果被包含在一个指定位置的容器中，这个值表示x(left)坐标值。
BoxComponent
xtype : String
需要创建配置的xtype。 当传递一个配置对象给构造函数时...
需要创建配置的xtype。 当传递一个配置对象给构造函数时，此配置选项不会被使用。 只有在使用懒初始化的时候此配置项才会被使用，此时容器的子项目不是 通过一个完整的实例组件，而是通过一个Component配置指定的。 在渲染时，将会查找xtype以决定创建何种类型的子组件。

预定义的xtype列表如下： here。

如果你继承Component创建你自己的组件，你需要使用Ext.ComponentMgr.registerType 对它们进行注册，以便利用懒初始化和渲染机制。
Component
y : Number
如果被包含在一个指定位置的容器中，这个值表示y(top)坐标值。
BoxComponent

公共属性

Property Defined By
disabled : Boolean
当前组件处于无效状态时为true。 Read-only.
Component
el : Ext.Element
封装了当前组件的Ext.Element。 Read-only。通常情况下，这将是一个<DIV>元素，它由此类的...

封装了当前组件的Ext.Element。 Read-only。

通常情况下，这将是一个<DIV>元素，它由此类的 onRender方法创建，但是它可以通过使用 autoEl 配置项进行覆盖。

注意: 直到组件渲染完成此元素都将处于无效状态。

如需向当前组件的 DOM事件(而不是当前组件自己的Observable事件)添加监听器， 更多建议，参见 listeners 配置项，或者直接使用一个render监听器:

new Ext.Panel({
    title: 'The Clickable Panel',
    listeners: {
        render: function(p) {
            // Append the Panel to the click handler's argument list.
            p.getEl().on('click', handlePanelClick.createDelegate(null, [p], true));
        },
        single: true  // Remove the listener after first invocation
    }
});

另请参见 getEl

Component
hidden : Boolean
如果当前组件处于隐藏状态，此值为true。Read-only。
Component
initialConfig : Object
当前组件的初始化配置描述。 Read-only。
Component
ownerCt : Ext.Container
组件所属的Container (默认为undefined，当前组件被添加到一个容器中时此值被自动设置)...
组件所属的Container (默认为undefined，当前组件被添加到一个容器中时此值被自动设置)。 Read-only。

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

Component
refOwner : Ext.Container
如果当前组件是一个容器的孩子，并且是通过一个 ref 配置项被注册的，则此值为 ref 引用被插入到的祖先容器。
如果当前组件是一个容器的孩子，并且是通过一个 ref 配置项被注册的，则此值为 ref 引用被插入到的祖先容器。
Component
rendered : Boolean
如果当前组件已经被渲染了，此值为true。Read-only.
Component

公共方法

Method Defined By
BoxComponent ( Ext.Element/String/Object config )
参数:
  • config : Ext.Element/String/Object
    配置选项。
返回值:
  • void
BoxComponent
addClass ( string cls ) : Ext.Component
为组件底层的元素添加CSS样式。
为组件底层的元素添加CSS样式。
参数:
  • cls : string
    需要添加的CSS样式的class名称
返回值:
  • Ext.Component
    this
Component
addEvents( Object|String o, string Optional. ) : void
添加指定的事件到事件列表上，事件会被该Observable触发。
添加指定的事件到事件列表上，事件会被该Observable触发。
参数:
  • o : Object|String
    以事件名作为属性true作为值的对象 或者当多个事件名被分开的传递时则为第一个事件名。
  • Optional. : string
    事件名被分开的传递时则为事件名。 用法:
    this.addEvents('storeloaded', 'storecleared');
返回值:
  • void
Observable
addListener( String eventName, Function handler, [Object scope], [Object options] ) : void
给对象添加事件处理器。
给对象添加事件处理器。
参数:
  • eventName : String
    监听的事件名。
  • handler : Function
    事件调用的方法
  • scope : Object
    （可选）处理方法执行的作用域 (this的引用 reference)。 如果被忽略。默认为触发事件的对象。
  • options : Object
    （可选）包含处理器配置和属性的对象。 可能包含以下的属性:
    • scope : Object
      处理方法执行的作用域(this的引用) 。 如果被忽略。默认为触发事件的对象。
    • delay : Number
      在触发事件后延迟调用处理器的毫秒数。
    • single : Boolean
      如果为True则添加一个处理器来处理下一次的事件触发（仅一次），然后移除自己。
    • buffer : Number
      使得处理器延迟指定毫秒数后预定的运行在 一个Ext.util.DelayedTask中 。 如果事件在时间内再一次被触发，原始的处理器不会被调用，但是新的处理器会预定的在他的位置上。
    • target : Observable
      如果事件在目标的Observable上触发则仅仅调用处理器， 否则 事件会从子类的Observable上冒泡

    组合选项
    使用这些选项参数,可能会组合出不同类型的监听器：

    一个延迟的，一次性的监听器。

    myDataView.on('click', this.onClick, this, {
single: true,
delay: 100
});

    一次调用附加多个处理器
    该方法同样支持传递一个包含指定的多个处理器的属性的配置对象参数。

    myGridPanel.on({
'click' : {
    fn: this.onClick,
    scope: this,
    delay: 100
},
'mouseover' : {
    fn: this.onMouseOver,
    scope: this
},
'mouseout' : {
    fn: this.onMouseOut,
    scope: this
}
});

    或者一个简写的语法：

    myGridPanel.on({
'click' : this.onClick,
'mouseover' : this.onMouseOver,
'mouseout' : this.onMouseOut,
 scope: this
});
返回值:
  • void
Observable
applyToMarkup ( String/HTMLElement el ) : void
将此组件添加到已存在的有效的HTML标签中。 使用该方法时，无需再调用render()方法。
将此组件添加到已存在的有效的HTML标签中。 使用该方法时，无需再调用render()方法。
参数:
  • el : String/HTMLElement
返回值:
  • void
Component
cloneConfig ( Object overrides ) : Ext.Component
默认使用原先传递给当前实例的配置值克隆当前组件。
默认使用原先传递给当前实例的配置值克隆当前组件。
参数:
  • overrides : Object
    一个新的配置项，包含需要覆盖到克隆版本的所有属性。 可以传递一个id参数给此对象，否则将自动生成一个新的id以避免发生重复。
返回值:
  • Ext.Component
    当前组件的克隆副本
Component
destroy () : void
通过如下方法销毁对象：删除所有的事件监听器、将组件的元素从DOM树中删除...
通过如下方法销毁对象：删除所有的事件监听器、将组件的元素从DOM树中删除（如果可以）、 将组件从它的 Ext.Container（如果可用）中删除、 并且将它从Ext.ComponentMgr中 注销。 销毁操作一般由框架自动完成，一般情况下不需要直接调用该方法。
参数:
  • 无。
返回值:
  • void
Component
disable () : Ext.Component
将组件置为无效状态，并出发'disable'事件。
将组件置为无效状态，并出发'disable'事件。
参数:
  • 无。
返回值:
  • Ext.Component
    this
Component
enable () : Ext.Component
将组件置为有效状态并触发'enable'事件。
将组件置为有效状态并触发'enable'事件。
参数:
  • 无。
返回值:
  • Ext.Component
    this
Component
enableBubble( String/Array events ) :void
是否现在使得事件会被该Observable触发并调用 this.getBubbleTarget()方法在拥有者的继承树...

是否现在使得事件会被该Observable触发并调用 this.getBubbleTarget()方法在拥有者的继承树中冒泡。Observable的基础类中没有该方法的实现。

该方法一般被Ext.Components用来冒泡事件到拥有者的容器。参看Ext.Component.getBubbleTarget默认的实现 在Ext.Component中返回组件的直接拥有者。但是如果需要的是一个已知的目标，该方法可以被重写来更快的访问需求的目标。

例子:

Ext.override(Ext.form.Field, {
    // 添加方法到Field的initComponent上改变事件为冒泡
    initComponent : Ext.form.Field.prototype.initComponent.createSequence(function() {
        this.enableBubble('change');
    }),

    // 我们知道我们想让Field的事件冒泡到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() {
            // 如果样式被修改标题会变红。
            myForm.header.setStyle('color', 'red');
        }
    }
});
参数:
  • events : String/Array
    冒泡的事件名，或事件名数组
返回值:
  • void
Observable
findParentBy ( Function fn ) : Ext.Container
通过自定义的函数查找当前组件上层任何层次上的容器...
通过自定义的函数查找当前组件上层任何层次上的容器。 如果传递的函数返回true，容器对象将被返回。
参数:
  • fn : Function
    自定义的函数，使用如下参数调用(container,this component)。
返回值:
  • Ext.Container
    自定义函数返回true的第一个容器
Component
findParentByType ( String/Class xtype ) : Ext.Container
通过xtype或者class查找当前组件上层任何层次上的容器
通过xtype或者class查找当前组件上层任何层次上的容器
参数:
  • xtype : String/Class
    组件的xtype字符串，或者直接是组件的class
返回值:
  • Ext.Container
    符合指定xtype或者class的第一个容器
Component
fireEvent( String eventName, Object... args ) : Boolean
用传入的参数触发指定的事件 (减去事件名)。 一个事件可以被设置为冒泡 Obse...

用传入的参数触发指定的事件 (减去事件名)。

一个事件可以被设置为冒泡到Observable父类继承树(参看 Ext.Component.getBubbleTarget) 调用enableBubble实现。

参数:
  • eventName : String
    触发的事件名。
  • args : Object...
    传递给处理器的可变长度参数。
返回值:
  • Boolean
    如果有任何的处理器返回false则返回false，否则返回true。
Observable
focus ( [ Boolean selectText ], [ Boolean/Number delay ] ) : Ext.Component
尝试将当前组件设为焦点。
尝试将当前组件设为焦点。
参数:
  • selectText : Boolean
    (可选) 如果可用，同时选中组件内部的文本
  • delay : Boolean/Number
    (可选)将当前组件设置为焦点的延迟时间(设置为true等于0毫秒)
返回值:
  • Ext.Component
    this
Component
getBox ( [ Boolean local ] ) : Object
获取组件底层元素当前盒子模型的尺寸。（译者注：盒子模型是CSS术语，详细解释请自行搜索。）
获取组件底层元素当前盒子模型的尺寸。（译者注：盒子模型是CSS术语，详细解释请自行搜索。）
参数:
  • local : Boolean
    (可选)值为true时，组件的left值和top值将代替页面的XY被返回。(默认值为false)
返回值:
  • Object
    返回值的格式{x, y, width, height}
BoxComponent
getBubbleTarget () : Ext.Container
为Observable的fireEvent方法提供链接，它沿着继承结构进行冒泡操作。
为Observable的fireEvent方法提供链接，它沿着继承结构进行冒泡操作。
参数:
  • 无。
返回值:
  • Ext.Container
    拥有当前组件的容器。
Component
getEl () : Ext.Element
返回 Ext.Element ，它包装了当前组件。...

返回 Ext.Element ，它包装了当前组件。

通常情况下，这将是一个<DIV>元素，它是由该类的onRender方法创建的， 但是可以使用autoEl配置项 覆盖它。

注意: 此元素将会一直处于无效状态直到当前组件渲染完成。

如需向当前组件的 DOM事件(而不是当前组件自己的Observable事件)添加监听器， 更多建议，参见 listeners 配置项，或者直接使用一个render监听器:

new Ext.Panel({
    title: 'The Clickable Panel',
    listeners: {
        render: function(p) {
            // Append the Panel to the click handler's argument list.
            p.getEl().on('click', handlePanelClick.createDelegate(null, [p], true));
        },
        single: true  // Remove the listener after first invocation
    }
});
参数:
  • 无。
返回值:
  • Ext.Element
    包装当前组件的元素。
Component
getHeight () : Number
获取该组件的当前高度值。
获取该组件的当前高度值。
参数:
  • 无。
返回值:
  • Number
BoxComponent
getId () : String
返回当前组件的id，如果没有定义id，则自动生成并返回一个id:'ext-comp-'...
返回当前组件的 id 如果没有定义 id 则自动生成并返回一个 id

'ext-comp-' + (++Ext.Component.AUTO_ID)
参数:
  • 无。
返回值:
  • String
    id
Component
getItemId () : String
返回当前组件的 itemId 。 如果没有通过配置参数指定 itemId 那么，将会使用...
返回当前组件的 itemId 。 如果没有通过配置参数指定 itemId 那么，将会使用 getId 返回 id 。
参数:
  • 无。
返回值:
  • String
Component
getOuterSize () : Object
获取当前组件所在元素的尺寸大小，包括边缘的空白处。
获取当前组件所在元素的尺寸大小，包括边缘的空白处。
参数:
  • 无。
返回值:
  • Object
    一个包含元素大小的对象 {width: (element width + left/right margins), height: (element height + top/bottom margins)}
BoxComponent
getPosition ( [ Boolean local ] ) : Array
获取组件底层元素当前的XY位置。
获取组件底层元素当前的XY位置。
参数:
  • local : Boolean
    (可选)如果为true，将返回元素的left和top值，而不是相对于页面内的 XY。(默认值为 false)
返回值:
  • Array
    元素的XY位置值(例如：[100, 200])
BoxComponent
getResizeEl () : Ext.Element
返回该组件的最外层用来定义这些组件整体大小的Element...

返回该组件的最外层用来定义这些组件整体大小的Element对象。

通常用 getEl 方法将会返回相同的Element对象，但在有些情况下，组件可能有一些更多的封装了它的主要动态Element对象的Element对象。

例如ComboBox。它是封装在一个包含<input>元素的包装元素里(这将返回其 getEl方法和触发按钮的元素)。返回的元素为resizeEl。

参数:
  • 无。
返回值:
  • Ext.Element
    The Element which is to be resized by size managing layouts.
BoxComponent
getSize () : Object
获取组件底层元素当前的大小。
获取组件底层元素当前的大小。
参数:
  • 无。
返回值:
  • Object
    一个包含元素大小的对象{width: (element width), height: (element height)}
BoxComponent
getWidth () : Number
获取该组件的当前宽度值。
获取该组件的当前宽度值。
参数:
  • 无。
返回值:
  • Number
BoxComponent
getXType () : String
获取当前组件的xtype，它是用 Ext.ComponentMgr 注册的。 所有可用的xtype列表，参见...
获取当前组件的xtype，它是用 Ext.ComponentMgr 注册的。 所有可用的xtype列表，参见 Ext.Component 类头部。示例用法:

var t = new Ext.form.TextField();
alert(t.getXType());  // alerts 'textfield'
参数:
  • 无。
返回值:
  • String
    The xtype
Component
getXTypes () : String
返回此组件的xtype继承树，用字符'-'分隔。 所有可用的xtype值...

返回此组件的xtype继承树，用字符'-'分隔。 所有可用的xtype值，请参见Ext.Component 类的头部。

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

示例用法:

var t = new Ext.form.TextField();
alert(t.getXTypes());  // alerts 'component/box/field/textfield'
参数:
  • 无。
返回值:
  • String
    xtype层次字符串
Component
hasListener( String eventName ) : Boolean
检测对象是否包含指定事件的任何监听器
检测对象是否包含指定事件的任何监听器
参数:
  • eventName : String
    检测的事件名
返回值:
  • Boolean
    如果事件被监听则为true，否则为false
Observable
hide () : Ext.Component
隐藏当前组件。 监听 beforehide' 事件并且返回false 可以取消隐藏组件的操作。 在隐藏组件之后触发...
隐藏当前组件。 监听 beforehide' 事件并且返回false 可以取消隐藏组件的操作。 在隐藏组件之后触发 ' hide' 事件。 如果组件被配置成 hidden 那么此方法在内部被调用。
参数:
  • 无。
返回值:
  • Ext.Component
    this
Component
isVisible () : Boolean
如果当前组件可见，返回true。
如果当前组件可见，返回true。
参数:
  • 无。
返回值:
  • Boolean
    如果当前组件可见，返回true，其它返回false。
Component
isXType ( String xtype , [ Boolean shallow ] ) : Boolean
Tests whether or not this Component is of a specific xtype. This can test whether this Component is descended from th...

测试此组件是否是指定的xtype。此方法既可以测试是否是指定的xtype的某个子类， 或者它是否直接是指定的xtype类(shallow=true)。

如果使用你自己的子类，必须知道组件必须注册它的xtype值。

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

示例用法:

var t = new Ext.form.TextField();
var isText = t.isXType('textfield');        // true
var isBoxSubclass = t.isXType('box');       // true, descended from BoxComponent
var isBoxInstance = t.isXType('box', true); // false, not a direct BoxComponent instance
参数:
  • xtype : String
    需要为当前组件进行检测的xtype
  • shallow : Boolean
    (可选) 如果为false，检测组件是否是xtype继承树中的某个子类（默认是这种情况）， 如果为true，只检测组件是否是指定的xtype类型。
返回值:
  • Boolean
    如果当前组件是指定xtype的子类，返回true，其它返回flase。
Component
mon ( Observable|Element item , Object|String ename , Function fn , Object scope , Object opt ) : void
向任何Observable对象(或者元素)上添加监听器，监听器将会在组件...

向任何Observable对象(或者元素)上添加监听器，监听器将会在组件销毁时被自动删除。
用法：

myGridPanel.mon(myGridPanel.getSelectionModel(), 'selectionchange', handleSelectionChange, null, {buffer: 50});

or:

myGridPanel.mon(myGridPanel.getSelectionModel(), {
    selectionchange: handleSelectionChange,
    buffer: 50
});
参数:
  • item : Observable|Element
    需要添加listener/listeners的项目。
  • ename : Object|String
    事件名，或者一个包含事件名属性的对象。
  • fn : Function
    (可选) 如果 ename 参数是一个事件名，此参数为处理函数。
  • scope : Object
    (可选)如果 ename 参数是一个事件名称，此参数是作用域 ( this 引用)，监听函数将会在此作用域中被执行。
  • opt : Object
    (可选)如果 ename 参数是一个事件名称， 此参数是 addListener 配置项。
返回值:
  • void
Component
mun ( Observable|Element item , Object|String ename , Function fn , Object scope ) : void
删除通过mon 方法添加的监听器。
删除通过mon 方法添加的监听器。
参数:
  • item : Observable|Element
    需要删除listener/listeners的项目。
  • ename : Object|String
    事件名称，或者一个包含事件名称属性的对象。
  • fn : Function
    (可选)如果 ename 参数是一个事件名称，此参数是一个处理函数。
  • scope : Object
    (可选)如果 ename 参数是一个事件名称，此参数是作用域 ( this 引用)，监听函数将会在此作用域中被执行。
返回值:
  • void
Component
nextSibling () : Ext.Component
返回所属容器中的下一个组件
返回所属容器中的下一个组件
参数:
  • 无。
返回值:
  • Ext.Component
Component
on( String eventName, Function handler, [Object scope], [Object options] ) : void
给对象添加事件处理器 (addListener的简写形式)
给对象添加事件处理器 (addListener的简写形式。)
参数:
  • eventName : String
    监听的事件类型
  • handler : Function
    事件调用的方法
  • scope : Object
    （可选）处理方法执行时的作用域 (this 的引用)。 如果被忽略。默认为触发事件的对象。
  • options : Object
    可选 包含处理器配置的对象。
返回值:
  • void
Observable
previousSibling () : Ext.Component
返回所属容器中的前一个组件
返回所属容器中的前一个组件
参数:
  • 无。
返回值:
  • Ext.Component
Component
purgeListeners() : void
移除对象上所有的监听器
移除对象上所有的监听器
参数:
  • 无。
返回值:
  • void
Observable
relayEvents( Object o, Array events ) : void
从指定的Observable上传递选择的事件就好像被当前对象触发一样。
从指定的Observable上传递选择的事件就好像被当前对象触发一样。
参数:
  • o : Object
    该Observable上的事件被当前对象传递。
  • events : Array
    传递的数组名。
返回值:
  • void
Observable
removeClass ( string cls ) : Ext.Component
从组件底层的元素上删除一个CSS类。
从组件底层的元素上删除一个CSS类。
参数:
  • cls : string
    需要移除的CSS类名
返回值:
  • Ext.Component
    this
Component
removeListener( String eventName, Function handler, [Object scope] ) : void
删除一个事件处理器。
删除一个事件处理器。
参数:
  • eventName : String
    处理器关联的事件类型。
  • handler : Function
    移除的处理器。 这应该是传递到addListener里的方法的引用。
  • scope : Object
    （可选）处理器指定的初始作用域。
返回值:
  • void
Observable
render ( [ Element/HTMLElement/String container ], [ String/Number position ] ) : void
在传递进来的HTML元素中渲染当前组件。...

在传递进来的HTML元素中渲染当前组件。

如果你正在使用一个Container 对象放置当前组件，那么请不要使用render方法。

当容器第一次被渲染时，它的子组件将会被容器的 layout 管理器渲染。

某些布局管理器允许动态添加子组件。它们包括 Ext.layout.CardLayout, Ext.layout.AnchorLayout, Ext.layout.FormLayout, Ext.layout.TableLayout。

当一个新的子组件被添加时，如果容器已经被渲染了， 你可能需要调用容器的 doLayout 方法来刷新视图，它将导致所有没有被渲染的子组件进行渲染操作。 此操作是必须的，这样你可以添加多个子组件而只刷新一次layout。

当创建复杂的UI时，非常重要的一点是，请记住调整子项目的尺寸和位置是容器的 layout 管理器的职责。 如果你希望子项目的尺寸对用户交互作出反应， 你必须为容器配置一个布局管理器，它将创建和管理你心里想要的那种布局。

忽略容器的layout 配置意味着将会使用一个基本的布局管理器，它除了按次序把子组件 渲染到容器中之外什么事情都不做。 这种情况下，任何尺寸和位置的调整操作都不会发生。

参数:
  • container : Element/HTMLElement/String
    (可选) 需要在其中渲染当前组件的元素。 如果它是从一个已存在的标签中创建的，此参数应该被忽略。
  • position : String/Number
    (可选) 容器中的一个元素ID或者一个DOM节点索引， 当前组件将会被插入到它前面 (默认append到容器的尾部)
返回值:
  • void
Component
resumeEvents() : void
重新开始触发事件。(参见suspendEvents) 如果事件以queueSuspended参数被挂起，则在事件被挂起时 ...
重新开始触发事件。(参见 suspendEvents) 如果事件以queueSuspended 参数被挂起，则在事件被挂起时触发的事件会被传递到所有的监听器上
参数:
  • 无。
返回值:
  • void
Observable
setAutoScroll ( Boolean scroll ) : Ext.BoxComponent
设置该组件内容溢出时是否自动显示滚动条。
设置该组件内容溢出时是否自动显示滚动条。
参数:
  • scroll : Boolean
    值为true的话组件自动显示滚动条。
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setDisabled ( Boolean disabled ) : Ext.Component
工具函数，使用布尔值设置有效/无效(disabled/enabled )。
工具函数，使用布尔值设置有效/无效(disabled/enabled )。
参数:
  • disabled : Boolean
返回值:
  • Ext.Component
    this
Component
setHeight ( Mixed height ) : Ext.BoxComponent
设置此组件的高度。该方法将触发resize事件。
设置此组件的高度。该方法将触发resize事件。
参数:
  • height : Mixed
    The new height to set.
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setPagePosition ( Number x , Number y ) : Ext.BoxComponent
设置组件在页面中的XY位置。 如果需要设置left和top值 ，请使用...
设置组件在页面中的XY位置。 如果需要设置left和top值 ，请使用setPosition方法。 该方法触发move事件。
参数:
  • x : Number
    The new x position
  • y : Number
    The new y position
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setPosition ( Number left , Number top ) : Ext.BoxComponent
设置组件的left和top值。设置组件的页面XY值，请使用setPagePosition方法。该方法触发...
设置组件的left和top值。设置组件的页面XY值，请使用setPagePosition方法。该方法触发move事件。
参数:
  • left : Number
    The new left
  • top : Number
    The new top
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setSize ( Mixed width , Mixed height ) : Ext.BoxComponent
设置BoxComponent的宽度和高度。 此方法触发resize事件...
设置BoxComponent的宽度和高度。 此方法触发resize事件。此方法可以接收单独的width或者height值作为参数， 或者你可以传递像这样的一个size对象： {width:10, height:20} 。
参数:
  • width : Mixed
    设置的新的width值。这可以是：
    • 一个Number类型指定Element新的宽度 Ext.Element.defaultUnit(默认为像素 :'px')。
    • 一个String类型用于设置width的CSS样式。
    • 一个size对象格式为 {width: widthValue, height: heightValue} 。
    • 值为 undefined 时，保留原来的width不变。
  • height : Mixed
    设置的新的height值(如果第一个参数传递了一个size对象，此参数没有必要传递)。这可以是：
    • 一个Number类型指定Element新的高度 Ext.Element.defaultUnit(默认为像素 :'px')。
    • 一个String类型用于设置height的CSS样式。也有可能不会被使用到。
    • 值为 undefined 时，保留原来的height不变。
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setVisible ( Boolean visible ) : Ext.Component
工具方法，通过使用布尔值隐藏或者显示当前组件。
工具方法，通过使用布尔值隐藏或者显示当前组件。
参数:
  • visible : Boolean
    true时显示，false时隐藏
返回值:
  • Ext.Component
    this
Component
setWidth ( Mixed width ) : Ext.BoxComponent
设置组件的宽度。 此方法触发resize事件。
设置组件的宽度。 此方法触发resize事件。
参数:
  • width : Mixed
    The new width to set.
返回值:
  • Ext.BoxComponent
    this
BoxComponent
show () : Ext.Component
显示当前组件。监听' beforeshow' 事件，返回 false 取消显示组件...
显示当前组件。监听' beforeshow' 事件，返回 false 取消显示组件。在显示组件之后触发' show' 事件。
参数:
  • 无。
返回值:
  • Ext.Component
    this
Component
suspendEvents( Boolean queueSuspended ) : void
暂停触发所有的事件。 (参看resumeEvents)
暂停触发所有的事件。（参看 resumeEvents)
参数:
  • queueSuspended : Boolean
    如果传递为true则排列好暂停的事件使得在调用 resumeEvents 后再触发它们，而不是抛弃所有暂停的事件。
返回值:
  • void
Observable
syncSize () : Ext.BoxComponent
强制组件的大小按照此组件底层元素当前的高度和宽度计算。
强制组件的大小按照此组件底层元素当前的高度和宽度计算。
参数:
  • 无。
返回值:
  • Ext.BoxComponent
    this
BoxComponent
un( String eventName, Function handler, [Object scope] ) : void
删除一个事件处理器(removeListener方法的简写形式)
删除一个事件处理器(removeListener方法的简写形式。)
参数:
  • eventName : String
    处理器关联的事件类型
  • handler : Function
    被删除的处理器 这应该是传入 addListener 中的方法的引用。
  • scope : Object
    （可选）为处理器指定的初始作用域。
返回值:
  • void
Observable
update ( Mixed htmlOrData , [ Boolean loadScripts ], [ Function callback ] ) : void
刷新组件的内部区域。
刷新组件的内部区域。
参数:
  • htmlOrData : Mixed
    如果已经通过tpl为当前组件配置了一个模板，那么 将会使用此参数来装配模板。 如果没有为当前组件配置模板，组件的内容区域将会通过Ext.Element 进行刷新。
  • loadScripts : Boolean
    (可选)只用在使用html配置时此参数才合法。默认为false。
  • callback : Function
    (可选)只用在使用html配置时此参数才合法。 当脚本加载完成时回调函数才被执行。
返回值:
  • void
Component
updateBox ( Object box ) : Ext.BoxComponent
设置此组件底层元素的盒子模型尺寸。(译者注：盒子模型是CSS术语，详细资料请自行搜索。)
设置此组件底层元素的盒子模型尺寸。(译者注：盒子模型是CSS术语，详细资料请自行搜索。)
参数:
  • box : Object
    一个格式为{x, y, width, height}的对象
返回值:
  • Ext.BoxComponent
    this
BoxComponent

公共事件

Event Defined By
added : ( Ext.Component this , Ext.Container ownerCt , number index )
当一个组件被添加到一个Ext.Container时触发
当一个组件被添加到一个Ext.Container时触发
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • ownerCt : Ext.Container
    用于组件的容器
  • index : number
    添加组件的位置
Component
afterrender : ( Ext.Component this )
在组件渲染完成之后触发...

在组件渲染完成之后触发。

afterrender事件在当前组件被rendered 结束之后、在为组件定义的所有afterRender方法执行之后 触发，并且，如果有stateful， 也在状态被保存之后才触发。

监听器将会以如下参数格式被调用:
  • this : Ext.Component
Component
beforedestroy : ( Ext.Component this )
在组件 destroyed 之前触发。 在事件监听器中返回false以停止 destroy 操作。
在组件 destroyed 之前触发。 在事件监听器中返回false以停止 destroy 操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforehide : ( Ext.Component this )
在调用hide方法隐藏组件之前触发。 在事件监听器中返回false可以停止隐藏操作。
在调用hide方法隐藏组件之前触发。 在事件监听器中返回false可以停止隐藏操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforerender : ( Ext.Component this )
在组件被rendered 之前触发。 在事件监听器中返回false可以停止render 操作。
在组件被rendered 之前触发。 在事件监听器中返回false可以停止render 操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforeshow : ( Ext.Component this )
在调用show()方法现实组件之前触发。 事件处理函数返回false可以停止show。
在调用show 方法现实组件之前触发。 事件处理函数返回false可以停止show。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforestaterestore : ( Ext.Component this , Object state )
在组件状态恢复之前触发。返回false停止恢复状态操作。
在组件状态恢复之前触发。返回false停止恢复状态操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    StateProvider返回的状态哈希值。 如果没有禁止此事件，那么状态对象会被传递给applyState。 默认情况下，这样简单地把属性值拷贝到当前组件中。 可以覆盖此方法以提供自定的状态恢复操作。
Component
beforestatesave : ( Ext.Component this , Object state )
在组件状态被保存到配置的状态提供者之前触发。 返回false可以停止保存。
在组件状态被保存到配置的状态提供者之前触发。 返回false可以停止保存。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    状态值哈希。 这由在组件上调用getState() 方法决定。 此方法必须由开发者提供，返回是否需要对状态进行描述，默认情况下， Ext.Component有一个空实现。
Component
destroy : ( Ext.Component this )
在组件被销毁之后触发。
在组件被destroyed之后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
disable : ( Ext.Component this )
在组件被设置为无效状态后触发。
在组件被设置为无效状态后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
enable : ( Ext.Component this )
当组件被设置为有效(enabled)之后触发。
当组件被设置为有效(enabled)之后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
hide : ( Ext.Component this )
在组件被隐藏之后触发。 当调用hide 方法隐藏组件之后触发。
在组件被隐藏之后触发。 当调用hide 方法隐藏组件之后触发。
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
move : ( Ext.Component this , Number x , Number y )
在组件移动之后触发。
在组件移动之后触发。
监听器将会用如下的参数格式来调用:
  • this : Ext.Component
  • x : Number
    The new x position
  • y : Number
    The new y position
BoxComponent
removed : ( Ext.Component this , Ext.Container ownerCt )
当一个组件被从Ext.Container容器中删除时触发
当一个组件被从Ext.Container容器中删除时触发
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • ownerCt : Ext.Container
    持有组件的容器
Component
render : ( Ext.Component this )
在组件被渲染之后触发。
在组件被 rendered(渲染) 之后触发。
监听器将以如下的参数格式被调用:
  • this : Ext.Component
Component
resize : ( Ext.Component this , Number adjWidth , Number adjHeight , Number rawWidth , Number rawHeight )
在组件被调整大小之后触发。
在组件被调整大小之后触发。
监听器将以如下的参数格式被调用:
  • this : Ext.Component
  • adjWidth : Number
    这是width调整后的值
  • adjHeight : Number
    这是height调整后的值
  • rawWidth : Number
    这是width原来的值
  • rawHeight : Number
    这是height原来的值
BoxComponent
show : ( Ext.Component this )
在调用show 方法显示组件之后触发。
在调用show 方法显示组件之后触发。
监听器将会用如下的参数格式被调用:
  • this : Ext.Component
Component
staterestore : ( Ext.Component this , Object state )
组件状态被存储之后触发。
组件状态被存储之后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    StateProvider返回的状态哈希值。 如果没有禁止此事件，那么状态对象会被传递给applyState。 默认情况下，这样简单地把属性值拷贝到当前组件中。 可以覆盖此方法以提供自定的状态恢复操作。
Component
statesave : ( Ext.Component this , Object state )
在组件状态被保存到所配置的状态提供者之后触发。
在组件状态被保存到所配置的状态提供者之后触发。
监听器将会用如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    状态值hash。 这是由在足见上调用getState() 方法决定的。 开发者必须提供此方法以返回是否需要恢复状态，默认情况下， Ext.Component有一个空实现。
Component


Observable
    Component
      BoxComponent
        Button

Class Ext.Button

包: | Ext
定义类的文件: | Button.js
类: | Button
子类: | SplitButton
继承自: | BoxComponent
Simple Button class

配置项

Config Options Defined By
allowDepress : Boolean
设置为false将允许一个按下的按钮弹起来(默认值为 undefined)。 只有当enableToggle为true时有效。
Button
allowDomMove : Boolean
在渲染时组件是否可以移动Dom节点(默认为true)。
Component
anchor : String
注: 这个配置只用于该组件被包含在一个已使用AnchorLayout...

注: 这个配置只用于该组件被包含在一个已使用 AnchorLayout (或者其子类)配置的Container时。 基于布局管理器，例如：

  • Ext.form.FormPanel
  • 指定 layout: 'anchor' // or 'form', or 'absolute'

参见 Ext.layout.AnchorLayout. anchor 。

BoxComponent
applyTo : Mixed
指定一个元素的id、一个DOM元素或者一个已经存在并被渲染到DIV中的元素，此DIV已经被...

指定一个元素的id、一个DOM元素或者一个已经存在并被渲染到DIV中的元素，此DIV已经被 渲染到document中，并且为当前组件指定了一些结构化的标签。

  • 描述 :
      当使用了 applyTo， 在主元素中也可以用id或者CSS类名来指定组件的托管部分， 并且，如果可以的话，创建的组件可能也会试图在那个标签中创建它的子组件。
  • 注意 :
      当使用此配置项时，无需调用render()方法。
      如果指定了applyTo属性，任何传递给 renderTo 的值都会被忽略，并且目标元素的父节点将会自动被用作组件的容器。
Component
arrowAlign : String
(可选) 如果按钮有关联菜单，用于指定箭头的位置...

(可选) 如果按钮有关联menu，用于指定箭头的位置。 两个值有效：

  • 'right'
  • 'bottom'

默认为 'right' .

Button
autoHeight : Boolean
如果值为true，height配置项为'auto'，否则值为false的话使用固定的高度...

如果值为true，height配置项为'auto'，否则值为false的话使用固定的高度， 或者可以由其父类容器 layout manager来控制。(默认值为 false)。

注: 虽然很多组件继承了这个配置选项，但不是所有这些组件的自适应高度配置都会像期望的那样起作用。 设置autoHeight：值为true时，浏览器将根据元素的内容自动设置高度，这将意味着Ext不会去管理高度。

如果是由浏览器来管理高度，需要注意的是，通过浏览器进行调整的结构组件内不能被发现， 因此宽度的变化可能导致需要进行同步处理元素的高度。 例如：

var w = new Ext.Window({
    title: 'Window',
    width: 600,
    autoHeight: true,
    items: {
        title: 'Collapse Me',
        height: 400,
        collapsible: true,
        border: false,
        listeners: {
            beforecollapse: function() {
                w.el.shadow.hide();
            },
            beforeexpand: function() {
                w.el.shadow.hide();
            },
            collapse: function() {
                w.syncShadow();
            },
            expand: function() {
                w.syncShadow();
            }
        }
    }
}).show();
BoxComponent
autoScroll : Boolean
如果值为true，将会在该元素上使用overflow:'auto'配置，并且在必要的时候...
如果值为true，将会在该元素上使用overflow:'auto'配置，并且在必要的时候自动显示滚动条，否则，溢出部分的组件都会被切除(默认值为 false)。
BoxComponent
autoShow : Boolean
如果组件需要检测隐藏CSS属性(如 'x-hidden' 或者 'x-hide-display')并且在渲染时删除...
如果组件需要检测隐藏CSS属性(如 'x-hidden' 或者 'x-hide-display')并且在渲染时删除它们 (默认为false)，设置此值为true。
Component
autoWidth : Boolean
如果为true，使用width:'auto'配置，否则使用固定的宽度...

如果为true，使用width:'auto'配置，否则使用固定的宽度，或者可以由其父类容器的layout manager来控制。(默认值为 false)。

注: 虽然很多组件继承了这个配置选项，但不是所有这些组件的自适应宽度配置都会像期望的那样起作用。 设置autoWidth：值为true时，浏览器将根据元素的内容自动设置宽度，这将意味着Ext不会去管理宽度。

如果是由浏览器来管理宽度，需要注意的是，通过浏览器进行调整的结构组件内不能被发现，因此宽度的变化可能导致需要进行同步处理元素的宽度。 例如，在这个元素的目标是：

<div id='grid-container' style='margin-left:25%;width:50%'></div>
当浏览器窗口改变时，渲染后的Panel必须监听浏览器窗口大小的变化，以便通知子项，浏览器改变了其宽度：

var myPanel = new Ext.Panel({
    renderTo: 'grid-container',
    monitorResize: true, // relay on browser resize
    title: 'Panel',
    height: 400,
    autoWidth: true,
    layout: 'hbox',
    layoutConfig: {
        align: 'stretch'
    },
    defaults: {
        flex: 1
    },
    items: [{
        title: 'Box 1',
    }, {
        title: 'Box 2'
    }, {
        title: 'Box 3'
    }],
});
BoxComponent
boxMaxHeight : Number
设置组件的最大高度值...

设置组件的最大高度值。

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

BoxComponent
boxMaxWidth : Number
设置组件的最大宽度值...

设置组件的最大宽度值。

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

BoxComponent
boxMinHeight : Number
设置组件的最小高度值...

设置组件的最小高度值。

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

BoxComponent
boxMinWidth : Number
设置组件的最小宽度值...

设置组件的最小宽度值。

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

BoxComponent
bubbleEvents : Array
一个事件数组，当这些事件被触发时，将会被冒泡到所有父容器中。参见....

一个事件数组，当这些事件被触发时，将会被冒泡到所有父容器中。参见 Ext.util.Observable.enableBubble。 默认为 []。

Component
buttonSelector : String
(可选) DomQuery选择器， 用于从创建的DOM结构中提取激活的，可点击的元素...

(可选) DomQuery 选择器， 用于从创建的DOM结构中提取激活的，可点击的元素。

当一个自定义的 template is 被使用时，您必须确定这个选择器的结果在可聚焦的选择集合里。

默认 'button:first-child' .

Button
clearCls : String
应用到特殊的clearing div的CSS类， 这个clearing div直接渲染到每个form field的包装器后面...

应用到特殊的clearing div的CSS类， 这个clearing div直接渲染到每个form field的包装器后面，以提供 清除field的功能(默认为 'x-form-clear-left')。

注意: 只有在当前组件被渲染到一个使用FormLayout 布局(例如 Ext.form.FormPanel 或者指定 layout:'form')的 容器中、或者是指定了一个fieldLabel 、或者指定isFormField=true 时此配置才有效。

另请参见 Ext.layout.FormLayout. fieldTpl。

Component
clickEvent : String
触发按钮处理函数的DOM事件...
触发按钮处理函数的DOM事件。可以是任何有效的事件名称（dblclick, contextmenu）。默认为'click'.
Button
cls : String
一个可选的外部CSS样式， 添加到这个组件的元素。
Button
ctCls : String
一个可选的外部CSS样式，添加到这个组件的容器(默认值为 '')。 这个方法对于使用标准的CSS规则...

一个可选的外部CSS样式，添加到这个组件的容器(默认值为 '')。 这个方法对于使用标准的CSS规则，为组件或它的任何一个子组件添加特定的样式非常有用。 参见 Ext.layout.ContainerLayout和 extraCls 。

注意: ctCls 默认为 ''期望如下的类，它们将指定一个默认值:

  • Box Layout : 'x-box-layout-ct'
使用一个额外的CSS类配置以上的Class，它是append到默认对象上的。例如， 对于BoxLayout (Hbox and Vbox):
                                ctCls: 'x-box-layout-ct custom-class'

Component
disabled : Boolean
只读属性。如果此按钮是无效的，此项为true。
Button
disabledClass : String
当组件处于无效状态时添加到组件上的CSS类(默认为 'x-item-disabled')。
Component
enableToggle : Boolean
设置为true将允许固定按下/非按下状态(默认值为 false)
Button
fieldLabel : String
紧靠此field显示的标签文本(默认值为 '')。注意...

紧靠此field显示的标签文本(默认值为 '')。

注意:只有在当前组件被渲染到一个使用FormLayout 的容器中时，此配置才有效。 (例如 Ext.form.FormPanel 或 指定 layout:'form')。

另请参见 hideLabel 、 Ext.layout.FormLayout和 fieldTpl。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Name'
    }]
});
Component
flex : Number
注: 这个配置只用于该组件被包含在一个已使用BoxLayout配置的Container中时...

注: 这个配置只用于该组件被包含在一个已使用BoxLayout配置的Container中时。通过计算每一个子组件的flex值所占全部flex值之和的比例，来决定子组件的宽(HBoxLayout)高(VBoxlayout)。 任何子项的 flex = 0 或 flex = undefined 将不被设置(初始值大小将不被改变)。

BoxComponent
handleMouseEvents : Boolean
设置为true，将禁用发生 mouseover, mouseout 和 mousedown事件时的视觉提示 (默认值为 true)
Button
handler : Function
当按钮被点击时调用的方法 (可以用来替代点击事件)
当按钮被点击时调用的方法 (可以用来替代点击事件)，参数如下:
  • b : Button
    这个按钮。
  • e : EventObject
    点击事件。
Button
height : Number
组件的高度(默认值为 auto)。注:如果想使用百分比的方式...
组件的高度(默认值为 auto)。注:如果想使用百分比的方式来设置值，请查看 Ext.Component.anchor。
BoxComponent
hidden : Boolean
只读属性。 如果当前按钮处于隐藏状态，为true。
Button
hideLabel : Boolean
true时完全隐藏label元素 ( label 和 separator)。 默认为 false。 默认情况下，即使你不指定...

true时完全隐藏label元素 ( label 和 separator)。 默认为 false。 默认情况下，即使你不指定 fieldLabel 它的空间仍然会被保留，这样这块区域会与其它确实拥有label的区域位于同一排。 讲此值设置为 true 将导致此区域不再保留此空间。

注意: 参见 clearCls 的注释。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield'
        hideLabel: true
    }]
});
Component
hideMode : String
组件如何隐藏，支持的值有： 'visibility' (css visibility), 'offsets' (位置偏移量为负值) 和...

组件如何隐藏，支持的值有： 'visibility' (css visibility), 'offsets' (位置偏移量为负值) 和 'display' (css display).

注意:一般首选默认值 'display'，因为当组件第一次显示的时候它们会自动进行布局 (隐藏的时候不会调整尺寸)。

Component
hideParent : Boolean
此值为true时，当调用hide/show方法时，将会hide和show组件的容器...
此值为true时，当调用hide/show方法时，将会hide和show组件的容器；false时将会 hide和show组件自身(默认为false)。例如，这可以用作window上隐藏按钮的一种 快捷操作，通过设置此按钮的hideParent:true，然后把它添加到window上。
Component
icon : String
显示在按钮中的图片路径 (默认情况下，图片将会被设置为按钮的CSS背景图片属性，所以，如果你需要一个 图标/文本混合型的按钮...
显示在按钮中的图片路径 (默认情况下，图片将会被设置为按钮的CSS背景图片属性，所以，如果你需要一个 图标/文本混合型的按钮， 请设置cls:"x-btn-text-icon")
Button
iconAlign : String
(可选) 图表渲染的位置。允许四个值：<ul class="mdetail-params"> 'top'<...

(可选) 图表渲染的位置。允许四个值：

  • 'top'
  • 'right'
  • 'bottom'
  • 'left'

默认 'left' .

Button
iconCls : String
一个CSS类，设置一个背景图片，当前按钮将使用此图片作为图标
Button
id : String
当前组件唯一的id(默认为auto-assigned id)...

当前组件唯一的id(默认为auto-assigned id)。 如果你需要在以后访问组件，而又没有一个有效的组件对象引用，那么你需要指定一个 id( 也就是，使用Ext. getCmp方法 )。

注意，此id也将被用作组件底层HTML标签的id，这些标签被渲染到页面中。 这将允许你编写基于id的CSS规则，以独立地描述指定的实例；并且，也可以通过 组件父标签的id选中子元素。

注意:为了避免与唯一的id 产生重复， 请参见 itemId 和 ref 。

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

Component
itemCls : String
注意: 只有在当前组件被渲染到一个使用FormLayout 布局的 容器中时此配置才有效...

注意: 只有在当前组件被渲染到一个使用FormLayout 布局的 容器中时此配置才有效。 (例如Ext.form.FormPanel 或者指定 layout:'form')。

一个附加的CSS类，应用到div上，包装当前field的表单元素。 如果提供了此参数， field级上的itemCls将会覆盖 container级上提供的 默认itemCls。 为itemCls指定的值将会被添加默认的 类('x-form-item')。

既然它被应用到项目的包装器上(参见 Ext.layout.FormLayout。 fieldTpl)， 它将允许你编写能应用到此field、label(如果有指定)、或者field内部任何其它元素的标准CSS规则。

注意: 参考 fieldLabel的注释。 .

示例用法:

// Apply a style to the field's label:
<style>
    .required .x-form-item-label {font-weight:bold;color:red;}
</style>

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Name',
        itemCls: 'required' //this label will be styled
    },{
        xtype: 'textfield',
        fieldLabel: 'Favorite Color'
    }]
});
Component
itemId : String
当没有可利用的对象引用时，itemId可以作为第二选择，用来获得一个组件的引用， 代替 ...

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

var c = new Ext.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'); // 与 Ext.getCmp()不同

p2 = p1.ownerCt.getComponent('p2'); // 通过兄弟对象获得引用

另请参见 id 和 ref 。

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

Component
labelSeparator : String
每个fieldLabel 文本后面现实的分隔符。 此属性可以在多个层次上进行配置...

每个fieldLabel 文本后面现实的分隔符。 此属性可以在多个层次上进行配置。优先顺序为：

  • field / component level
  • container level
  • layout level (默认为冒号 ':')
如不需要为当前field的label显示分隔符，指定一个空字符串''即可。

注意:参见 clearCls 的注释。

另请参见 hideLabel 和 Ext.layout.FormLayout。 fieldTpl。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    layoutConfig: {
        labelSeparator: '~'   // layout config has lowest priority (defaults to ':')
    },
    labelSeparator: '>>',     // config at container level
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Field 1',
        labelSeparator: '...' // field/component level config supersedes others
    },{
        xtype: 'textfield',
        fieldLabel: 'Field 2' // labelSeparator will be '='

    }]
});
Component
labelStyle : String
一个CSS样式描述字符串，它将直接应用到当前field的label上...

一个CSS样式描述字符串，它将直接应用到当前field的label上。 如果有设置，默认为容器的labelStyle值(例如 Ext.layout.FormLayout.labelStyle , 或者 '')。

注意:参见 clearCls 的注释。

另请参见 hideLabel 和 Ext.layout.FormLayout. fieldTpl。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Name',
        labelStyle: 'font-weight:bold;'
    }]
});
Component
listeners : Object
一个包含一个或多个事件处理器的配置对象，会在初始化的时候被添加到目标对象上...

一个包含一个或多个事件处理器的配置对象，会在初始化的时候被添加到目标对象上。 该配置对象应该是一个有效的监听器配置对象就像 addListener例子中指定的一样可一次附加多个处理器。

ExtJs Components上的DOM事件

一些 ExtJs Component 类导出时会选择一些DOM事件(例如 "click", "mouseover" 等等), 这通常只是在有额外的值可以被添加时发生。例如DataView类的 click事件会传递被点击的节点。也可以直接在Component的HTMLElementevent上访问DOM事件，但必需在Component被渲染后监听器才能添加到Element 上。可以按照以下步骤添加插件:

// 插件会用一个监听器配置对象进行配置。
//该组件会被添加到所有处理方法的参数列表上。
Ext.DomObserver = Ext.extend(Object, {
    constructor: function(config) {
        this.listeners = config.listeners ? config.listeners : config;
    },

    // 组件将自己传递进了插件的初始化方法里
    init: function(c) {
        var p, l = this.listeners;
        for (p in l) {
            if (Ext.isFunction(l[p])) {
                l[p] = this.createHandler(l[p], c);
            } else {
                l[p].fn = this.createHandler(l[p].fn, c);
            }
        }

        // 渲染后立即添加监听器到元素上
        c.render = c.render.createSequence(function() {
            var e = c.getEl();
            if (e) {
                e.on(l);
            }
        });
    },

    createHandler: function(fn, c) {
        return function(e) {
            fn.call(this, e, c);
        };
    }
});

var combo = new Ext.form.ComboBox({

    // 元素被点击后折叠
    plugins: [ new Ext.DomObserver({
        click: function(evt, comp) {
            comp.collapse();
        }
    })],
    store: myStore,
    typeAhead: true,
    mode: 'local',
    triggerAction: 'all'
});

Observable
margins : Object
注:此配置只用于该组件展现在一个使用BorderLayout...

注:此配置只用于该组件展现在一个使用BorderLayout 或 BoxLayout的两个子类之一作为布局的容器。

这个margins对象在该组件中的格式为：

{top: (top margin),right: (right margin),bottom: (bottom margin),left: (left margin)}

也可以是一个字符串，中间用空格分隔，margin值为数字。 把matches中每一个值的次序跟CSS中margin值的排列方式相对应：

  • 如果只有一个值，它适用于所有方面。
  • 如果有两个值，top和bottom的边框设置为第一个值，left和right设置为第二个值。
  • 如果有三个值，top设置为第一个值，left和right设置为第二个值，bottom设置为第三个值。
  • 如果有四个值，分别设置为top, right, bottom, left。

默认值:

{top:0, right:0, bottom:0, left:0}
BoxComponent
menu : Menu 与按钮相关联的{@link Ext.menu.Menu Menu}对象，被配置了{@link #menu}配置项.
Button
menuAlign : String
菜单对齐的位置 (详情参见Ext.Element.alignTo ，默认值为 'tl-bl?').
Button
minWidth : Number
按钮的最小宽度(用来为一组按钮指定一个统一的宽度)，参见 Ext.Panel. minButtonWidth .
Button
overCls : String
一个可选的额外的CSS类，它将在鼠标移过元素时被添加到组件上...
一个可选的额外的CSS类，它将在鼠标移过元素时被添加到组件上，鼠标移出时 删除。(默认为'')。此属性对于在组件上，或者它的任何使用标准CSS规则的孩子节点上， 添加定制的'active' 或者 'hover'样式非常有用。
Component
overflowText : String
如果被用在 Toolbar，这段文字用于显示在溢出菜单上...
如果被用在 Toolbar, 这段文字用于显示在溢出菜单上。 参见 Ext.Toolbar.Item. overflowText .
Button
pageX : Number
如果该组件被包含在一个指定位置的容器中，这个值表示页面级的x坐标值（译者注：在有滚动条的情况下这个值很有用）。
BoxComponent
pageY : Number
如果该组件被包含在一个指定位置的容器中，这个值表示页面级的y坐标值（译者注：在有滚动条的情况下这个值很有用）。
BoxComponent
plugins : Object/Array
一个对象或者一个对象数组，为组件提供特殊的功能 ...
一个对象或者一个对象数组，为组件提供特殊的功能。 对一个合法的插件唯一的要求是它含有一个init()方法， 能接收一个Ext.Component型的参数。 当组件被创建时，如果有可用的插件，组件将会调用每个插件的init方法， 并将自身的引用作为方法参数传递给它。然后，每个插件就可以调用方法或者响应组件上的事件， 就像需要的那样提供自己的功能。
Component
pressed : Boolean
只读属性。 如果按钮被按下，此值为true (只有在 enableToggle = true时有效)
Button
ptype : String
需要创建配置的ptype。 当传递一个配置对象给构造函数时...
需要创建配置的ptype。 当传递一个配置对象给构造函数时，此配置选项不会被使用。 只有在使用懒初始化的时候此配置项才会被使用， 此时Plugin不是 通过一个完整的实例组件，而是通过一个Component配置指定的。 在渲染时，将会查找ptype以决定创建何种类型的Plugin。

如果你创建自己的Plugin，你可以通过 Ext.ComponentMgr.registerPlugin 对它们进行注册，以便能利用懒初始化和渲染机制。
Component
ref : String
一个路径描述，与组件的 ownerCt 相关，它描述了把当前组件的命名引用放置到哪个父容器中去。...

一个路径描述，与组件的 ownerCt 相关，它描述了把当前组件的命名引用放置到哪个父容器中去。

祖先的坐标路径可以通过'/'字符进行分隔。 例如，将一个Toolbar Button的引用放入 拥有此Toolbar的Panel中:

var myGrid = new Ext.grid.EditorGridPanel({
    title: 'My EditorGridPanel',
    store: myStore,
    colModel: myColModel,
    tbar: [{
        text: 'Save',
        handler: saveChanges,
        disabled: true,
        ref: '../saveButton'
    }],
    listeners: {
        afteredit: function() {
//          The button reference is in the GridPanel
            myGrid.saveButton.enable();
        }
    }
});

在上面的代码中，如果 ref 是 'saveButton' ，那么引用将会被放置到Toolbar中。 ref 中的每个'/' 都会从组件的 ownerCt 向上移动一级。

另请参见 added 和 removed 事件。

Component
region : String
注: 此配置只用于该组件展现在一个布局为BorderLayout的容器中...

注: 此配置只用于该组件展现在一个布局为BorderLayout的容器中(例如指定layout:'border')。

详见Ext.layout.BorderLayout。

BoxComponent
renderTo : Mixed
该值可以是一个节点的id、一个DOM节点或者一个已存在的元素...

该值可以是一个节点的id、一个DOM节点或者一个已存在的元素， 组件将会被渲染到其中。

  • 注意 :
      如果组件不是一个Container 的子项目时， 不要使用此选项。 渲染和管理它的子项目是一个Container 的layout manager的责任。
      当使用此配置项时，无需调用render()方法。

另请参见 render 。

Component
repeat : Boolean/Object
设置为true，在鼠标被按下时将重复触发点击事件。 此项也可以是一个ClickRepeater配置对象(默认值为 false)。
设置为true，在鼠标被按下时将重复触发点击事件。 此项也可以是一个ClickRepeater配置对象(默认值为 false)。
Button
scale : String
(可选) 按钮大小。允许三种值： <ul class="mdetail-params"> 'small'<div class="sub-desc"...

(可选) 按钮大小。允许三种值：

  • 'small'
    按钮高度16px。
  • 'medium'
    按钮高度24px。
  • 'large'
    按钮高度32px。

默认 'small' .

Button
scope : Object
handler and toggleHandler 执行时的作用域( this 引用) 默认为这个按钮。
Button
stateEvents : Array
一个事件数组，当它们被触发时，组件需要保存自己的状态(默认值为 none)...

一个事件数组，当它们被触发时，组件需要保存自己的状态(默认值为 none)。 它们可以是任何该组件支持的事件类型，包括浏览器事件和 自定义事件(例如['click', 'customerchange'])。

对于保存和恢复组件状态的详细解释，参见 stateful

Component
stateId : String
为该组件指定的唯一的id值，它被用作管理组件状态的目的...
为该组件指定的唯一的id值，它被用作管理组件状态的目的。 (如果设定了id，默认值为组件自己的id，否则，如果组件使用自动生成的id，此值为null)。

对于保存和反解析组件状态的解释，参见 stateful 。

Component
stateful : Boolean
一个标志参数，它将引起组件在启动时尝试从一个保存的状态中恢复内部状态参数...

一个标志参数，它将引起组件在启动时尝试从一个保存的状态中恢复内部状态参数。 组件必须要么拥有一个 stateId 或者 id ，它们被分配给需要被管理的状态属性。 在跨页面加载时，不保证自动生成的id属性的稳定性， 并且，不能依赖此id来保存和恢复一个组件的相同状态。

为了保存状态的操作能够工作，状态管理器的提供者必须 被设置成一个Ext.state.Provider 的实现类，它覆盖了set 和get 方法，以便保存和恢复name/value对。 有一个内置的Ext.state.CookieProvider 可用。

为当前页面设置状态提供者:

Ext.state.Manager.setProvider(new Ext.state.CookieProvider({
    expires: new Date(new Date().getTime()+(1000*60*60*24*7)), //7 days from now
}));

当 stateEvents 配置项中其中之一的事件被触发时， 一个状态可保存的组件将试图保存其状态。

保存状态时，一个可保存状态的组件首先需要通过调用 getState 方法来序列化它的状态。 默认情况下，此函数什么事都不做。 开发者必须提供一个实现，返回一个hash对象，它描述了组件可恢复的状态。

getState方法产生的值将会传递给 Ext.state.Manager.set 方法，它使用配置的 Ext.state.Provider 来保存对象，以组件的 stateId 为key，或者，如果此值（指stateId）没有指定时， 使用它的 id 作为key。

在进行构造时，一个可保存状态的组件试图通过调用 Ext.state.Manager.get方法来 恢复它的状态，传递 stateId 或者，如果此值（指stateId）没有指定时， 使用它的 id 作为参数。

结果对象被传递给 applyState 。 applyState 的默认实现只是简单地把属性拷贝到对象中， 但是开发者可以覆盖此方法以支持更多行为。

通过向 beforestaterestore, staterestore, beforestatesave 和 statesave 事件上绑定监听器，你可以在保存和恢复状态时进行额外的处理。

Component
style : String
被添加到组件元素的特定样式。 必须是按照...
被添加到组件元素的特定样式。 必须是按照 Ext.Element.applyStyles 类指定格式的合法参数值。

new Ext.Panel({
    title: 'Some Title',
    renderTo: Ext.getBody(),
    width: 400, height: 300,
    layout: 'form',
    items: [{
        xtype: 'textarea',
        style: {
            width: '95%',
            marginBottom: '10px'
        }
    },
        new Ext.Button({
            text: 'Send',
            minWidth: '100',
            style: {
                marginBottom: '10px'
            }
        })
    ]
});
Component
tabIndex : Number
为当前按钮设置一个DOM tabIndex(默认值为 undefined)
Button
tabTip : String
注: 这个配置只用于当该组件作为TabPanel的一个子项目时使用...

注: 这个配置只用于当该组件作为TabPanel的一个子项目时使用。

一个String类型的innerHTML(支持html标签)，当鼠标放在该选项上的时，显示一个tooltip。为了tips能够被渲染，Ext.QuickTips.init()必须被提前调用。
BoxComponent
template : Ext.Template
一个Ext.Template，用于构建按钮的DOM结构...

一个 Template， 用于构建按钮的DOM结构。

需要一个不同的DOM结构的实例或者子类可以通过使用getTemplateArgs来提供一个不同的模版布局。
Button
text : String
按钮文本，innerHTML(允许html标签)
Button
toggleGroup : String
当前被按下的按钮所属的组 (一组中只有1个按钮可以被按下， 只有在enableToggle = true时有效)
Button
toggleHandler : Function
当一个enableToggle 被设置为true的按钮被点击时调用的函数...
当一个enableToggle 被设置为true的按钮被点击时调用的函数。 将会传递两个参数：
  • button : Ext.Button
    这个按钮对象
  • state : Boolean
    按钮的下一个状态，为true代表按下。
Button
tooltip : String/Object
按钮的tooltip---可以是一个字符串（接受html标签），或者一个QuickTips...
按钮的tooltip---可以是一个字符串（接受html标签），或者一个QuickTips配置对象
Button
tooltipType : String
使用的tooltip类型。 要么是 "qtip" (默认) QuickTips 要么是"title"以做标题属性。
Button
type : String
submit, reset 或者 button - 默认值为 'button'
Button
width : Number
组件的宽度(默认值为 auto)。注:如果想使用百分比的方式...
组件的宽度(默认值为 auto)。注:如果想使用百分比的方式来设置值，请查看 Ext.Component.anchor。
BoxComponent
x : Number
如果被包含在一个指定位置的容器中，这个值表示x(left)坐标值。
BoxComponent
xtype : String
需要创建配置的xtype。 当传递一个配置对象给构造函数时...
需要创建配置的xtype。 当传递一个配置对象给构造函数时，此配置选项不会被使用。 只有在使用懒初始化的时候此配置项才会被使用，此时容器的子项目不是 通过一个完整的实例组件，而是通过一个Component配置指定的。 在渲染时，将会查找xtype以决定创建何种类型的子组件。

预定义的xtype列表如下： here。

如果你继承Component创建你自己的组件，你需要使用Ext.ComponentMgr.registerType 对它们进行注册，以便利用懒初始化和渲染机制。
Component
y : Number
如果被包含在一个指定位置的容器中，这个值表示y(top)坐标值。
BoxComponent

公共属性

Property Defined By
btnEl : Ext.Element
封装按钮可点击与元素的元素Element。默认情况下，引用一个...
封装按钮可点击与元素的元素Element。默认情况下，引用一个 <button> 元素。只读。
Button
disabled : Boolean
只读属性。如果此按钮是无效的，此项为true。
Button
el : Ext.Element
封装了当前组件的Ext.Element。 Read-only。通常情况下，这将是一个<DIV>元素，它由此类的...

封装了当前组件的Ext.Element。 Read-only。

通常情况下，这将是一个<DIV>元素，它由此类的 onRender方法创建，但是它可以通过使用 autoEl 配置项进行覆盖。

注意: 直到组件渲染完成此元素都将处于无效状态。

如需向当前组件的 DOM事件(而不是当前组件自己的Observable事件)添加监听器， 更多建议，参见 listeners 配置项，或者直接使用一个render监听器:

new Ext.Panel({
    title: 'The Clickable Panel',
    listeners: {
        render: function(p) {
            // Append the Panel to the click handler's argument list.
            p.getEl().on('click', handlePanelClick.createDelegate(null, [p], true));
        },
        single: true  // Remove the listener after first invocation
    }
});

另请参见 getEl

Component
hidden : Boolean
只读属性。 如果当前按钮处于隐藏状态，为true。
Button
initialConfig : Object
当前组件的初始化配置描述。 Read-only。
Component
menu : Menu 与按钮相关联的{@link Ext.menu.Menu Menu}对象，被配置了{@link #menu}配置项.
Button
ownerCt : Ext.Container
组件所属的Container (默认为undefined，当前组件被添加到一个容器中时此值被自动设置)...
组件所属的Container (默认为undefined，当前组件被添加到一个容器中时此值被自动设置)。 Read-only。

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

Component
pressed : Boolean
只读属性。 如果按钮被按下，此值为true (只有在 enableToggle = true时有效)
Button
refOwner : Ext.Container
如果当前组件是一个容器的孩子，并且是通过一个 ref 配置项被注册的，则此值为 ref 引用被插入到的祖先容器。
如果当前组件是一个容器的孩子，并且是通过一个 ref 配置项被注册的，则此值为 ref 引用被插入到的祖先容器。
Component
rendered : Boolean
如果当前组件已经被渲染了，此值为true。Read-only.
Component

公共方法

Method Defined By
Button ( Object config )
建立一个新按钮。
Create a new button
参数:
  • config : Object
    配置对象。
返回值:
  • void
Button
addClass ( string cls ) : Ext.Component
为组件底层的元素添加CSS样式。
为组件底层的元素添加CSS样式。
参数:
  • cls : string
    需要添加的CSS样式的class名称
返回值:
  • Ext.Component
    this
Component
addEvents( Object|String o, string Optional. ) : void
添加指定的事件到事件列表上，事件会被该Observable触发。
添加指定的事件到事件列表上，事件会被该Observable触发。
参数:
  • o : Object|String
    以事件名作为属性true作为值的对象 或者当多个事件名被分开的传递时则为第一个事件名。
  • Optional. : string
    事件名被分开的传递时则为事件名。 用法:
    this.addEvents('storeloaded', 'storecleared');
返回值:
  • void
Observable
addListener( String eventName, Function handler, [Object scope], [Object options] ) : void
给对象添加事件处理器。
给对象添加事件处理器。
参数:
  • eventName : String
    监听的事件名。
  • handler : Function
    事件调用的方法
  • scope : Object
    （可选）处理方法执行的作用域 (this的引用 reference)。 如果被忽略。默认为触发事件的对象。
  • options : Object
    （可选）包含处理器配置和属性的对象。 可能包含以下的属性:
    • scope : Object
      处理方法执行的作用域(this的引用) 。 如果被忽略。默认为触发事件的对象。
    • delay : Number
      在触发事件后延迟调用处理器的毫秒数。
    • single : Boolean
      如果为True则添加一个处理器来处理下一次的事件触发（仅一次），然后移除自己。
    • buffer : Number
      使得处理器延迟指定毫秒数后预定的运行在 一个Ext.util.DelayedTask中 。 如果事件在时间内再一次被触发，原始的处理器不会被调用，但是新的处理器会预定的在他的位置上。
    • target : Observable
      如果事件在目标的Observable上触发则仅仅调用处理器， 否则 事件会从子类的Observable上冒泡

    组合选项
    使用这些选项参数,可能会组合出不同类型的监听器：

    一个延迟的，一次性的监听器。

    myDataView.on('click', this.onClick, this, {
single: true,
delay: 100
});

    一次调用附加多个处理器
    该方法同样支持传递一个包含指定的多个处理器的属性的配置对象参数。

    myGridPanel.on({
'click' : {
    fn: this.onClick,
    scope: this,
    delay: 100
},
'mouseover' : {
    fn: this.onMouseOver,
    scope: this
},
'mouseout' : {
    fn: this.onMouseOut,
    scope: this
}
});

    或者一个简写的语法：

    myGridPanel.on({
'click' : this.onClick,
'mouseover' : this.onMouseOver,
'mouseout' : this.onMouseOut,
 scope: this
});
返回值:
  • void
Observable
applyToMarkup ( String/HTMLElement el ) : void
将此组件添加到已存在的有效的HTML标签中。 使用该方法时，无需再调用render()方法。
将此组件添加到已存在的有效的HTML标签中。 使用该方法时，无需再调用render()方法。
参数:
  • el : String/HTMLElement
返回值:
  • void
Component
cloneConfig ( Object overrides ) : Ext.Component
默认使用原先传递给当前实例的配置值克隆当前组件。
默认使用原先传递给当前实例的配置值克隆当前组件。
参数:
  • overrides : Object
    一个新的配置项，包含需要覆盖到克隆版本的所有属性。 可以传递一个id参数给此对象，否则将自动生成一个新的id以避免发生重复。
返回值:
  • Ext.Component
    当前组件的克隆副本
Component
destroy () : void
通过如下方法销毁对象：删除所有的事件监听器、将组件的元素从DOM树中删除...
通过如下方法销毁对象：删除所有的事件监听器、将组件的元素从DOM树中删除（如果可以）、 将组件从它的 Ext.Container（如果可用）中删除、 并且将它从Ext.ComponentMgr中 注销。 销毁操作一般由框架自动完成，一般情况下不需要直接调用该方法。
参数:
  • 无。
返回值:
  • void
Component
disable () : Ext.Component
将组件置为无效状态，并出发'disable'事件。
将组件置为无效状态，并出发'disable'事件。
参数:
  • 无。
返回值:
  • Ext.Component
    this
Component
enable () : Ext.Component
将组件置为有效状态并触发'enable'事件。
将组件置为有效状态并触发'enable'事件。
参数:
  • 无。
返回值:
  • Ext.Component
    this
Component
enableBubble( String/Array events ) :void
是否现在使得事件会被该Observable触发并调用 this.getBubbleTarget()方法在拥有者的继承树...

是否现在使得事件会被该Observable触发并调用 this.getBubbleTarget()方法在拥有者的继承树中冒泡。Observable的基础类中没有该方法的实现。

该方法一般被Ext.Components用来冒泡事件到拥有者的容器。参看Ext.Component.getBubbleTarget默认的实现 在Ext.Component中返回组件的直接拥有者。但是如果需要的是一个已知的目标，该方法可以被重写来更快的访问需求的目标。

例子:

Ext.override(Ext.form.Field, {
    // 添加方法到Field的initComponent上改变事件为冒泡
    initComponent : Ext.form.Field.prototype.initComponent.createSequence(function() {
        this.enableBubble('change');
    }),

    // 我们知道我们想让Field的事件冒泡到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() {
            // 如果样式被修改标题会变红。
            myForm.header.setStyle('color', 'red');
        }
    }
});
参数:
  • events : String/Array
    冒泡的事件名，或事件名数组
返回值:
  • void
Observable
findParentBy ( Function fn ) : Ext.Container
通过自定义的函数查找当前组件上层任何层次上的容器...
通过自定义的函数查找当前组件上层任何层次上的容器。 如果传递的函数返回true，容器对象将被返回。
参数:
  • fn : Function
    自定义的函数，使用如下参数调用(container,this component)。
返回值:
  • Ext.Container
    自定义函数返回true的第一个容器
Component
findParentByType ( String/Class xtype ) : Ext.Container
通过xtype或者class查找当前组件上层任何层次上的容器
通过xtype或者class查找当前组件上层任何层次上的容器
参数:
  • xtype : String/Class
    组件的xtype字符串，或者直接是组件的class
返回值:
  • Ext.Container
    符合指定xtype或者class的第一个容器
Component
fireEvent( String eventName, Object... args ) : Boolean
用传入的参数触发指定的事件 (减去事件名)。 一个事件可以被设置为冒泡 Obse...

用传入的参数触发指定的事件 (减去事件名)。

一个事件可以被设置为冒泡到Observable父类继承树(参看 Ext.Component.getBubbleTarget) 调用enableBubble实现。

参数:
  • eventName : String
    触发的事件名。
  • args : Object...
    传递给处理器的可变长度参数。
返回值:
  • Boolean
    如果有任何的处理器返回false则返回false，否则返回true。
Observable
focus ( [ Boolean selectText ], [ Boolean/Number delay ] ) : Ext.Component
尝试将当前组件设为焦点。
尝试将当前组件设为焦点。
参数:
  • selectText : Boolean
    (可选) 如果可用，同时选中组件内部的文本
  • delay : Boolean/Number
    (可选)将当前组件设置为焦点的延迟时间(设置为true等于0毫秒)
返回值:
  • Ext.Component
    this
Component
getBox ( [ Boolean local ] ) : Object
获取组件底层元素当前盒子模型的尺寸。（译者注：盒子模型是CSS术语，详细解释请自行搜索。）
获取组件底层元素当前盒子模型的尺寸。（译者注：盒子模型是CSS术语，详细解释请自行搜索。）
参数:
  • local : Boolean
    (可选)值为true时，组件的left值和top值将代替页面的XY被返回。(默认值为false)
返回值:
  • Object
    返回值的格式{x, y, width, height}
BoxComponent
getBubbleTarget () : Ext.Container
为Observable的fireEvent方法提供链接，它沿着继承结构进行冒泡操作。
为Observable的fireEvent方法提供链接，它沿着继承结构进行冒泡操作。
参数:
  • 无。
返回值:
  • Ext.Container
    拥有当前组件的容器。
Component
getEl () : Ext.Element
返回 Ext.Element ，它包装了当前组件。...

返回 Ext.Element ，它包装了当前组件。

通常情况下，这将是一个<DIV>元素，它是由该类的onRender方法创建的， 但是可以使用autoEl配置项 覆盖它。

注意: 此元素将会一直处于无效状态直到当前组件渲染完成。

如需向当前组件的 DOM事件(而不是当前组件自己的Observable事件)添加监听器， 更多建议，参见 listeners 配置项，或者直接使用一个render监听器:

new Ext.Panel({
    title: 'The Clickable Panel',
    listeners: {
        render: function(p) {
            // Append the Panel to the click handler's argument list.
            p.getEl().on('click', handlePanelClick.createDelegate(null, [p], true));
        },
        single: true  // Remove the listener after first invocation
    }
});
参数:
  • 无。
返回值:
  • Ext.Element
    包装当前组件的元素。
Component
getHeight () : Number
获取该组件的当前高度值。
获取该组件的当前高度值。
参数:
  • 无。
返回值:
  • Number
BoxComponent
getId () : String
返回当前组件的id，如果没有定义id，则自动生成并返回一个id:'ext-comp-'...
返回当前组件的 id 如果没有定义 id 则自动生成并返回一个 id

'ext-comp-' + (++Ext.Component.AUTO_ID)
参数:
  • 无。
返回值:
  • String
    id
Component
getItemId () : String
返回当前组件的 itemId 。 如果没有通过配置参数指定 itemId 那么，将会使用...
返回当前组件的 itemId 。 如果没有通过配置参数指定 itemId 那么，将会使用 getId 返回 id 。
参数:
  • 无。
返回值:
  • String
Component
getOuterSize () : Object
获取当前组件所在元素的尺寸大小，包括边缘的空白处。
获取当前组件所在元素的尺寸大小，包括边缘的空白处。
参数:
  • 无。
返回值:
  • Object
    一个包含元素大小的对象 {width: (element width + left/right margins), height: (element height + top/bottom margins)}
BoxComponent
getPosition ( [ Boolean local ] ) : Array
获取组件底层元素当前的XY位置。
获取组件底层元素当前的XY位置。
参数:
  • local : Boolean
    (可选)如果为true，将返回元素的left和top值，而不是相对于页面内的 XY。(默认值为 false)
返回值:
  • Array
    元素的XY位置值(例如：[100, 200])
BoxComponent
getPressed ( String group ) : Button
获得一组中按下的按钮或者null
获得一组中按下的按钮或者null
参数:
  • group : String
返回值:
  • Button
Button
getResizeEl () : Ext.Element
返回该组件的最外层用来定义这些组件整体大小的Element...

返回该组件的最外层用来定义这些组件整体大小的Element对象。

通常用 getEl 方法将会返回相同的Element对象，但在有些情况下，组件可能有一些更多的封装了它的主要动态Element对象的Element对象。

例如ComboBox。它是封装在一个包含<input>元素的包装元素里(这将返回其 getEl方法和触发按钮的元素)。返回的元素为resizeEl。

参数:
  • 无。
返回值:
  • Ext.Element
    The Element which is to be resized by size managing layouts.
BoxComponent
getSize () : Object
获取组件底层元素当前的大小。
获取组件底层元素当前的大小。
参数:
  • 无。
返回值:
  • Object
    一个包含元素大小的对象{width: (element width), height: (element height)}
BoxComponent
getTemplateArgs () : Array
这个方法返回一个数组，用于为Template提供替代参数从而建立按钮的DOM...

这个方法返回一个数组，用于为Template提供替代参数从而建立按钮的DOM的框架。

采用不同的模板来建立不同的DOM结构的实例或者子类可能需要指定此方法。

为创建一个template，该函数返回一个数组，包含如下几项：

  • The <button>'s type
  • CSS类名，用于按钮主 <tbody> 元素，指定按钮大小排列位置。
  • 用于指定箭头位置和显示的CSS类。 ( 'x-btn-arrow' or 'x-btn-arrow-bottom' or '' )
  • cls CSS类名，用于按钮的容器<table> 元素。
  • 组件id，应用于按钮的容器<table> 元素。
参数:
  • 无。
返回值:
  • Array
    模板的替换数据。
Button
getText () : String
获取此按钮的文本
Gets the text for this Button
参数:
  • 无。
返回值:
  • String
    The button text
Button
getWidth () : Number
获取该组件的当前宽度值。
获取该组件的当前宽度值。
参数:
  • 无。
返回值:
  • Number
BoxComponent
getXType () : String
获取当前组件的xtype，它是用 Ext.ComponentMgr 注册的。 所有可用的xtype列表，参见...
获取当前组件的xtype，它是用 Ext.ComponentMgr 注册的。 所有可用的xtype列表，参见 Ext.Component 类头部。示例用法:

var t = new Ext.form.TextField();
alert(t.getXType());  // alerts 'textfield'
参数:
  • 无。
返回值:
  • String
    The xtype
Component
getXTypes () : String
返回此组件的xtype继承树，用字符'-'分隔。 所有可用的xtype值...

返回此组件的xtype继承树，用字符'-'分隔。 所有可用的xtype值，请参见Ext.Component 类的头部。

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

示例用法:

var t = new Ext.form.TextField();
alert(t.getXTypes());  // alerts 'component/box/field/textfield'
参数:
  • 无。
返回值:
  • String
    xtype层次字符串
Component
hasListener( String eventName ) : Boolean
检测对象是否包含指定事件的任何监听器
检测对象是否包含指定事件的任何监听器
参数:
  • eventName : String
    检测的事件名
返回值:
  • Boolean
    如果事件被监听则为true，否则为false
Observable
hasVisibleMenu () : Boolean
如果按钮有一个菜单，并且它是可见的，返回true
如果按钮有一个菜单，并且它是可见的，返回true
参数:
  • 无。
返回值:
  • Boolean
Button
hide () : Ext.Component
隐藏当前组件。 监听 beforehide' 事件并且返回false 可以取消隐藏组件的操作。 在隐藏组件之后触发...
隐藏当前组件。 监听 beforehide' 事件并且返回false 可以取消隐藏组件的操作。 在隐藏组件之后触发 ' hide' 事件。 如果组件被配置成 hidden 那么此方法在内部被调用。
参数:
  • 无。
返回值:
  • Ext.Component
    this
Component
hideMenu () : void
隐藏当前按钮的菜单（如果有的话）
隐藏当前按钮的菜单（如果有的话）
参数:
  • 无。
返回值:
  • void
Button
isVisible () : Boolean
如果当前组件可见，返回true。
如果当前组件可见，返回true。
参数:
  • 无。
返回值:
  • Boolean
    如果当前组件可见，返回true，其它返回false。
Component
isXType ( String xtype , [ Boolean shallow ] ) : Boolean
Tests whether or not this Component is of a specific xtype. This can test whether this Component is descended from th...

测试此组件是否是指定的xtype。此方法既可以测试是否是指定的xtype的某个子类， 或者它是否直接是指定的xtype类(shallow=true)。

如果使用你自己的子类，必须知道组件必须注册它的xtype值。

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

示例用法:

var t = new Ext.form.TextField();
var isText = t.isXType('textfield');        // true
var isBoxSubclass = t.isXType('box');       // true, descended from BoxComponent
var isBoxInstance = t.isXType('box', true); // false, not a direct BoxComponent instance
参数:
  • xtype : String
    需要为当前组件进行检测的xtype
  • shallow : Boolean
    (可选) 如果为false，检测组件是否是xtype继承树中的某个子类（默认是这种情况）， 如果为true，只检测组件是否是指定的xtype类型。
返回值:
  • Boolean
    如果当前组件是指定xtype的子类，返回true，其它返回flase。
Component
mon ( Observable|Element item , Object|String ename , Function fn , Object scope , Object opt ) : void
向任何Observable对象(或者元素)上添加监听器，监听器将会在组件...

向任何Observable对象(或者元素)上添加监听器，监听器将会在组件销毁时被自动删除。
用法：

myGridPanel.mon(myGridPanel.getSelectionModel(), 'selectionchange', handleSelectionChange, null, {buffer: 50});

or:

myGridPanel.mon(myGridPanel.getSelectionModel(), {
    selectionchange: handleSelectionChange,
    buffer: 50
});
参数:
  • item : Observable|Element
    需要添加listener/listeners的项目。
  • ename : Object|String
    事件名，或者一个包含事件名属性的对象。
  • fn : Function
    (可选) 如果 ename 参数是一个事件名，此参数为处理函数。
  • scope : Object
    (可选)如果 ename 参数是一个事件名称，此参数是作用域 ( this 引用)，监听函数将会在此作用域中被执行。
  • opt : Object
    (可选)如果 ename 参数是一个事件名称， 此参数是 addListener 配置项。
返回值:
  • void
Component
mun ( Observable|Element item , Object|String ename , Function fn , Object scope ) : void
删除通过mon 方法添加的监听器。
删除通过mon 方法添加的监听器。
参数:
  • item : Observable|Element
    需要删除listener/listeners的项目。
  • ename : Object|String
    事件名称，或者一个包含事件名称属性的对象。
  • fn : Function
    (可选)如果 ename 参数是一个事件名称，此参数是一个处理函数。
  • scope : Object
    (可选)如果 ename 参数是一个事件名称，此参数是作用域 ( this 引用)，监听函数将会在此作用域中被执行。
返回值:
  • void
Component
nextSibling () : Ext.Component
返回所属容器中的下一个组件
返回所属容器中的下一个组件
参数:
  • 无。
返回值:
  • Ext.Component
Component
on( String eventName, Function handler, [Object scope], [Object options] ) : void
给对象添加事件处理器 (addListener的简写形式)
给对象添加事件处理器 (addListener的简写形式。)
参数:
  • eventName : String
    监听的事件类型
  • handler : Function
    事件调用的方法
  • scope : Object
    （可选）处理方法执行时的作用域 (this 的引用)。 如果被忽略。默认为触发事件的对象。
  • options : Object
    可选 包含处理器配置的对象。
返回值:
  • void
Observable
previousSibling () : Ext.Component
返回所属容器中的前一个组件
返回所属容器中的前一个组件
参数:
  • 无。
返回值:
  • Ext.Component
Component
purgeListeners() : void
移除对象上所有的监听器
移除对象上所有的监听器
参数:
  • 无。
返回值:
  • void
Observable
relayEvents( Object o, Array events ) : void
从指定的Observable上传递选择的事件就好像被当前对象触发一样。
从指定的Observable上传递选择的事件就好像被当前对象触发一样。
参数:
  • o : Object
    该Observable上的事件被当前对象传递。
  • events : Array
    传递的数组名。
返回值:
  • void
Observable
removeClass ( string cls ) : Ext.Component
从组件底层的元素上删除一个CSS类。
从组件底层的元素上删除一个CSS类。
参数:
  • cls : string
    需要移除的CSS类名
返回值:
  • Ext.Component
    this
Component
removeListener( String eventName, Function handler, [Object scope] ) : void
删除一个事件处理器。
删除一个事件处理器。
参数:
  • eventName : String
    处理器关联的事件类型。
  • handler : Function
    移除的处理器。 这应该是传递到addListener里的方法的引用。
  • scope : Object
    （可选）处理器指定的初始作用域。
返回值:
  • void
Observable
render ( [ Element/HTMLElement/String container ], [ String/Number position ] ) : void
在传递进来的HTML元素中渲染当前组件。...

在传递进来的HTML元素中渲染当前组件。

如果你正在使用一个Container 对象放置当前组件，那么请不要使用render方法。

当容器第一次被渲染时，它的子组件将会被容器的 layout 管理器渲染。

某些布局管理器允许动态添加子组件。它们包括 Ext.layout.CardLayout, Ext.layout.AnchorLayout, Ext.layout.FormLayout, Ext.layout.TableLayout。

当一个新的子组件被添加时，如果容器已经被渲染了， 你可能需要调用容器的 doLayout 方法来刷新视图，它将导致所有没有被渲染的子组件进行渲染操作。 此操作是必须的，这样你可以添加多个子组件而只刷新一次layout。

当创建复杂的UI时，非常重要的一点是，请记住调整子项目的尺寸和位置是容器的 layout 管理器的职责。 如果你希望子项目的尺寸对用户交互作出反应， 你必须为容器配置一个布局管理器，它将创建和管理你心里想要的那种布局。

忽略容器的layout 配置意味着将会使用一个基本的布局管理器，它除了按次序把子组件 渲染到容器中之外什么事情都不做。 这种情况下，任何尺寸和位置的调整操作都不会发生。

参数:
  • container : Element/HTMLElement/String
    (可选) 需要在其中渲染当前组件的元素。 如果它是从一个已存在的标签中创建的，此参数应该被忽略。
  • position : String/Number
    (可选) 容器中的一个元素ID或者一个DOM节点索引， 当前组件将会被插入到它前面 (默认append到容器的尾部)
返回值:
  • void
Component
resumeEvents() : void
重新开始触发事件。(参见suspendEvents) 如果事件以queueSuspended参数被挂起，则在事件被挂起时 ...
重新开始触发事件。(参见 suspendEvents) 如果事件以queueSuspended 参数被挂起，则在事件被挂起时触发的事件会被传递到所有的监听器上
参数:
  • 无。
返回值:
  • void
Observable
setAutoScroll ( Boolean scroll ) : Ext.BoxComponent
设置该组件内容溢出时是否自动显示滚动条。
设置该组件内容溢出时是否自动显示滚动条。
参数:
  • scroll : Boolean
    值为true的话组件自动显示滚动条。
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setDisabled ( Boolean disabled ) : Ext.Component
工具函数，使用布尔值设置有效/无效(disabled/enabled )。
工具函数，使用布尔值设置有效/无效(disabled/enabled )。
参数:
  • disabled : Boolean
返回值:
  • Ext.Component
    this
Component
setHandler ( Function handler , [ Object scope ] ) : Ext.Button
指定按钮的点击处理器
指定按钮的点击处理器
参数:
  • handler : Function
    当按钮被点击时调用的函数
  • scope : Object
    可选 处理函数执行时的作用域( this 引用) 默认为按钮本身。
返回值:
  • Ext.Button
    this
Button
setHeight ( Mixed height ) : Ext.BoxComponent
设置此组件的高度。该方法将触发resize事件。
设置此组件的高度。该方法将触发resize事件。
参数:
  • height : Mixed
    The new height to set.
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setIcon ( String icon ) : Ext.Button
设置按钮的背景图片，这个方法还会改变...
设置按钮的背景图片，这个方法还会改变icon的值。
参数:
  • icon : String
    图片路径
返回值:
  • Ext.Button
    this
Button
setIconClass ( String cls ) : Ext.Button
设置一个CSS类，提供一个背景图片，它将被用作按钮的图标。 此方法同时在内部改变 iconCls 配置项的值。
设置一个CSS类，提供一个背景图片，它将被用作按钮的图标。 此方法同时在内部改变 iconCls 配置项的值。
参数:
  • cls : String
    提供图标图片的CSS类
返回值:
  • Ext.Button
    this
Button
setPagePosition ( Number x , Number y ) : Ext.BoxComponent
设置组件在页面中的XY位置。 如果需要设置left和top值 ，请使用...
设置组件在页面中的XY位置。 如果需要设置left和top值 ，请使用setPosition方法。 该方法触发move事件。
参数:
  • x : Number
    The new x position
  • y : Number
    The new y position
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setPosition ( Number left , Number top ) : Ext.BoxComponent
设置组件的left和top值。设置组件的页面XY值，请使用setPagePosition方法。该方法触发...
设置组件的left和top值。设置组件的页面XY值，请使用setPagePosition方法。该方法触发move事件。
参数:
  • left : Number
    The new left
  • top : Number
    The new top
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setSize ( Mixed width , Mixed height ) : Ext.BoxComponent
设置BoxComponent的宽度和高度。 此方法触发resize事件...
设置BoxComponent的宽度和高度。 此方法触发resize事件。此方法可以接收单独的width或者height值作为参数， 或者你可以传递像这样的一个size对象： {width:10, height:20} 。
参数:
  • width : Mixed
    设置的新的width值。这可以是：
    • 一个Number类型指定Element新的宽度 Ext.Element.defaultUnit(默认为像素 :'px')。
    • 一个String类型用于设置width的CSS样式。
    • 一个size对象格式为 {width: widthValue, height: heightValue} 。
    • 值为 undefined 时，保留原来的width不变。
  • height : Mixed
    设置的新的height值(如果第一个参数传递了一个size对象，此参数没有必要传递)。这可以是：
    • 一个Number类型指定Element新的高度 Ext.Element.defaultUnit(默认为像素 :'px')。
    • 一个String类型用于设置height的CSS样式。也有可能不会被使用到。
    • 值为 undefined 时，保留原来的height不变。
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setText ( String text ) : Ext.Button
设置按钮的文本
Sets this Button's text
参数:
  • text : String
    按钮文本
返回值:
  • Ext.Button
    this
Button
setTooltip ( String/Object tooltip. ) : Ext.Button
设置这个按钮的提示信息。
Sets the tooltip for this Button.
参数:
  • tooltip. : String/Object
    This may be:
    • String : 按照innerHTML（接受html标签）显示的字符串。
    • Object : Ext.QuickTips.register的配置对象。
返回值:
  • Ext.Button
    this
Button
setVisible ( Boolean visible ) : Ext.Component
工具方法，通过使用布尔值隐藏或者显示当前组件。
工具方法，通过使用布尔值隐藏或者显示当前组件。
参数:
  • visible : Boolean
    true时显示，false时隐藏
返回值:
  • Ext.Component
    this
Component
setWidth ( Mixed width ) : Ext.BoxComponent
设置组件的宽度。 此方法触发resize事件。
设置组件的宽度。 此方法触发resize事件。
参数:
  • width : Mixed
    The new width to set.
返回值:
  • Ext.BoxComponent
    this
BoxComponent
show () : Ext.Component
显示当前组件。监听' beforeshow' 事件，返回 false 取消显示组件...
显示当前组件。监听' beforeshow' 事件，返回 false 取消显示组件。在显示组件之后触发' show' 事件。
参数:
  • 无。
返回值:
  • Ext.Component
    this
Component
showMenu () : void
显示当前按钮的菜单（如果有的话）
显示当前按钮的菜单（如果有的话）
参数:
  • 无。
返回值:
  • void
Button
suspendEvents( Boolean queueSuspended ) : void
暂停触发所有的事件。 (参看resumeEvents)
暂停触发所有的事件。（参看 resumeEvents)
参数:
  • queueSuspended : Boolean
    如果传递为true则排列好暂停的事件使得在调用 resumeEvents 后再触发它们，而不是抛弃所有暂停的事件。
返回值:
  • void
Observable
syncSize () : Ext.BoxComponent
强制组件的大小按照此组件底层元素当前的高度和宽度计算。
强制组件的大小按照此组件底层元素当前的高度和宽度计算。
参数:
  • 无。
返回值:
  • Ext.BoxComponent
    this
BoxComponent
toggle ( [ Boolean state ], [ Boolean supressEvent ] ) : Ext.Button
如果传递了一个状态，它将成为按钮当前的按下状态，除非当前的状态被固定了。
如果传递了一个状态，它将成为按钮当前的按下状态，除非当前的状态被固定了。
参数:
  • state : Boolean
    可选 强制设为一个指定的状态
  • supressEvent : Boolean
    可选 如果为true，在调用这个方法时将阻止事件触发。
返回值:
  • Ext.Button
    this
Button
un( String eventName, Function handler, [Object scope] ) : void
删除一个事件处理器(removeListener方法的简写形式)
删除一个事件处理器(removeListener方法的简写形式。)
参数:
  • eventName : String
    处理器关联的事件类型
  • handler : Function
    被删除的处理器 这应该是传入 addListener 中的方法的引用。
  • scope : Object
    （可选）为处理器指定的初始作用域。
返回值:
  • void
Observable
update ( Mixed htmlOrData , [ Boolean loadScripts ], [ Function callback ] ) : void
刷新组件的内部区域。
刷新组件的内部区域。
参数:
  • htmlOrData : Mixed
    如果已经通过tpl为当前组件配置了一个模板，那么 将会使用此参数来装配模板。 如果没有为当前组件配置模板，组件的内容区域将会通过Ext.Element 进行刷新。
  • loadScripts : Boolean
    (可选)只用在使用html配置时此参数才合法。默认为false。
  • callback : Function
    (可选)只用在使用html配置时此参数才合法。 当脚本加载完成时回调函数才被执行。
返回值:
  • void
Component
updateBox ( Object box ) : Ext.BoxComponent
设置此组件底层元素的盒子模型尺寸。(译者注：盒子模型是CSS术语，详细资料请自行搜索。)
设置此组件底层元素的盒子模型尺寸。(译者注：盒子模型是CSS术语，详细资料请自行搜索。)
参数:
  • box : Object
    一个格式为{x, y, width, height}的对象
返回值:
  • Ext.BoxComponent
    this
BoxComponent

公共事件

Event Defined By
added : ( Ext.Component this , Ext.Container ownerCt , number index )
当一个组件被添加到一个Ext.Container时触发
当一个组件被添加到一个Ext.Container时触发
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • ownerCt : Ext.Container
    用于组件的容器
  • index : number
    添加组件的位置
Component
afterrender : ( Ext.Component this )
在组件渲染完成之后触发...

在组件渲染完成之后触发。

afterrender事件在当前组件被rendered 结束之后、在为组件定义的所有afterRender方法执行之后 触发，并且，如果有stateful， 也在状态被保存之后才触发。

监听器将会以如下参数格式被调用:
  • this : Ext.Component
Component
beforedestroy : ( Ext.Component this )
在组件 destroyed 之前触发。 在事件监听器中返回false以停止 destroy 操作。
在组件 destroyed 之前触发。 在事件监听器中返回false以停止 destroy 操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforehide : ( Ext.Component this )
在调用hide方法隐藏组件之前触发。 在事件监听器中返回false可以停止隐藏操作。
在调用hide方法隐藏组件之前触发。 在事件监听器中返回false可以停止隐藏操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforerender : ( Ext.Component this )
在组件被rendered 之前触发。 在事件监听器中返回false可以停止render 操作。
在组件被rendered 之前触发。 在事件监听器中返回false可以停止render 操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforeshow : ( Ext.Component this )
在调用show()方法现实组件之前触发。 事件处理函数返回false可以停止show。
在调用show 方法现实组件之前触发。 事件处理函数返回false可以停止show。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforestaterestore : ( Ext.Component this , Object state )
在组件状态恢复之前触发。返回false停止恢复状态操作。
在组件状态恢复之前触发。返回false停止恢复状态操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    StateProvider返回的状态哈希值。 如果没有禁止此事件，那么状态对象会被传递给applyState。 默认情况下，这样简单地把属性值拷贝到当前组件中。 可以覆盖此方法以提供自定的状态恢复操作。
Component
beforestatesave : ( Ext.Component this , Object state )
在组件状态被保存到配置的状态提供者之前触发。 返回false可以停止保存。
在组件状态被保存到配置的状态提供者之前触发。 返回false可以停止保存。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    状态值哈希。 这由在组件上调用getState() 方法决定。 此方法必须由开发者提供，返回是否需要对状态进行描述，默认情况下， Ext.Component有一个空实现。
Component
click : ( Button this , EventObject e )
当按钮被点击时触发
当按钮被点击时触发
监听器将会以如下的参数格式调用:
  • this : Button
  • e : EventObject
    点击事件
Button
destroy : ( Ext.Component this )
在组件被销毁之后触发。
在组件被destroyed之后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
disable : ( Ext.Component this )
在组件被设置为无效状态后触发。
在组件被设置为无效状态后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
enable : ( Ext.Component this )
当组件被设置为有效(enabled)之后触发。
当组件被设置为有效(enabled)之后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
hide : ( Ext.Component this )
在组件被隐藏之后触发。 当调用hide 方法隐藏组件之后触发。
在组件被隐藏之后触发。 当调用hide 方法隐藏组件之后触发。
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
menuhide : ( Button this , Menu menu )
如果按钮有菜单，这个事件在它隐藏时触发。
如果按钮有菜单，这个事件在它隐藏时触发。
监听函数传递如下参数：
  • this : Button
  • menu : Menu
Button
menushow : ( Button this , Menu menu )
如果当前按钮有一个菜单，当显示此菜单时触发此事件。
如果当前按钮有一个菜单，当显示此菜单时触发此事件。
监听器将会以如下的参数格式调用:
  • this : Button
  • menu : Menu
Button
menutriggerout : ( Button this , Menu menu , EventObject e )
如果当前按钮有一个菜单，当鼠标离开菜单触发元素范围时触发此事件。
如果当前按钮有一个菜单，当鼠标离开菜单触发元素范围时触发此事件。
监听器将会以如下的参数格式调用:
  • this : Button
  • menu : Menu
  • e : EventObject
Button
menutriggerover : ( Button this , Menu menu , EventObject e )
如果当前按钮有一个菜单，当鼠标进入菜单触发元素范围时触发此事件。
如果当前按钮有一个菜单，当鼠标进入菜单触发元素范围时触发此事件。
监听器将会以如下的参数格式调用:
  • this : Button
  • menu : Menu
  • e : EventObject
Button
mouseout : ( Button this , Event e )
当鼠标离开按钮时触发
当鼠标离开按钮时触发
监听器将会以如下的参数格式调用:
  • this : Button
  • e : Event
    事件对象
Button
mouseover : ( Button this , Event e )
当鼠标滑过按钮时触发
当鼠标滑过按钮时触发
监听器将会以如下的参数格式调用:
  • this : Button
  • e : Event
    事件对象
Button
move : ( Ext.Component this , Number x , Number y )
在组件移动之后触发。
在组件移动之后触发。
监听器将会用如下的参数格式来调用:
  • this : Ext.Component
  • x : Number
    The new x position
  • y : Number
    The new y position
BoxComponent
removed : ( Ext.Component this , Ext.Container ownerCt )
当一个组件被从Ext.Container容器中删除时触发
当一个组件被从Ext.Container容器中删除时触发
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • ownerCt : Ext.Container
    持有组件的容器
Component
render : ( Ext.Component this )
在组件被渲染之后触发。
在组件被 rendered(渲染) 之后触发。
监听器将以如下的参数格式被调用:
  • this : Ext.Component
Component
resize : ( Ext.Component this , Number adjWidth , Number adjHeight , Number rawWidth , Number rawHeight )
在组件被调整大小之后触发。
在组件被调整大小之后触发。
监听器将以如下的参数格式被调用:
  • this : Ext.Component
  • adjWidth : Number
    这是width调整后的值
  • adjHeight : Number
    这是height调整后的值
  • rawWidth : Number
    这是width原来的值
  • rawHeight : Number
    这是height原来的值
BoxComponent
show : ( Ext.Component this )
在调用show 方法显示组件之后触发。
在调用show 方法显示组件之后触发。
监听器将会用如下的参数格式被调用:
  • this : Ext.Component
Component
staterestore : ( Ext.Component this , Object state )
组件状态被存储之后触发。
组件状态被存储之后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    StateProvider返回的状态哈希值。 如果没有禁止此事件，那么状态对象会被传递给applyState。 默认情况下，这样简单地把属性值拷贝到当前组件中。 可以覆盖此方法以提供自定的状态恢复操作。
Component
statesave : ( Ext.Component this , Object state )
在组件状态被保存到所配置的状态提供者之后触发。
在组件状态被保存到所配置的状态提供者之后触发。
监听器将会用如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    状态值hash。 这是由在足见上调用getState() 方法决定的。 开发者必须提供此方法以返回是否需要恢复状态，默认情况下， Ext.Component有一个空实现。
Component
toggle : ( Button this , Boolean pressed )
当‘pressed’状态发生变化时触发（当enableToggle = true）
当‘pressed’状态发生变化时触发（当enableToggle = true）
监听函数被调用时传递以下参数:
  • this : Button
  • pressed : Boolean
Button


Observable
    Component
      BoxComponent
        Container
          Panel
            ButtonGroup

Class Ext.ButtonGroup

包: | Ext
定义类的文件: | ButtonGroup.js
类: | ButtonGroup
继承自: | Panel
装载一组按钮的容器。用例:

var p = new Ext.Panel({
    title: 'Panel with Button Group',
    width: 300,
    height:200,
    renderTo: document.body,
    html: 'whatever',
    tbar: [{
        xtype: 'buttongroup',
        columns: 3,
        title: 'Clipboard',
        items: [{
            text: 'Paste',
            scale: 'large',
            rowspan: 3, iconCls: 'add',
            iconAlign: 'top',
            cls: 'x-btn-as-arrow'
        },{
            xtype:'splitbutton',
            text: 'Menu Button',
            scale: 'large',
            rowspan: 3,
            iconCls: 'add',
            iconAlign: 'top',
            arrowAlign:'bottom',
            menu: [{text: 'Menu Item 1'}]
        },{
            xtype:'splitbutton', text: 'Cut', iconCls: 'add16', menu: [{text: 'Cut Menu Item'}]
        },{
            text: 'Copy', iconCls: 'add16'
        },{
            text: 'Format', iconCls: 'add16'
        }]
    }]
});

配置项

Config Options Defined By
activeItem : String/Number
一个string型的组件id，或者组件的数字索引， 它需要...
一个string型的组件id，或者组件的数字索引， 它需要在渲染时在容器内的布局管理器中被初始化并激活。 例如：activeItem: 'item-1' 或者 activeItem: 0 ( 索引 0 =容器子项目集合中的第一个元素)。 activeItem仅仅适用于一次显示一个组件的布局模式(比如 Ext.layout.AccordionLayout, Ext.layout.CardLayout 和 Ext.layout.FitLayout)。 与 Ext.layout.ContainerLayout.activeItem 相关。
Container
allowDomMove : Boolean
在渲染时组件是否可以移动Dom节点(默认为true)。
Component
anchor : String
注: 这个配置只用于该组件被包含在一个已使用AnchorLayout...

注: 这个配置只用于该组件被包含在一个已使用 AnchorLayout (或者其子类)配置的Container时。 基于布局管理器，例如：

  • Ext.form.FormPanel
  • 指定 layout: 'anchor' // or 'form', or 'absolute'

参见 Ext.layout.AnchorLayout. anchor 。

BoxComponent
animCollapse : Boolean
true将会在panel被折叠时使用动画效果，false将会跳过动画效果....
true 将会在panel被折叠时使用动画效果， false 将会跳过动画效果( 如果Ext.Fx类 有效，默认为 true ，否则为 false )。
Panel
applyTo : Mixed
指定一个元素的id、一个DOM元素或者一个已经存在并被渲染到DIV中的元素，此DIV已经被...

指定一个元素的id、一个DOM元素或者一个已经存在并被渲染到DIV中的元素，此DIV已经被 渲染到document中，并且为当前组件指定了一些结构化的标签。

  • 描述 :
      当使用了 applyTo， 在主元素中也可以用id或者CSS类名来指定组件的托管部分， 并且，如果可以的话，创建的组件可能也会试图在那个标签中创建它的子组件。
  • 注意 :
      当使用此配置项时，无需调用render()方法。
      如果指定了applyTo属性，任何传递给 renderTo 的值都会被忽略，并且目标元素的父节点将会自动被用作组件的容器。
Panel
autoDestroy : Boolean
如果为true，容器将自动销毁任何从其中被删除的组件， 否则...
如果为true，容器将自动销毁任何从其中被删除的组件， 否则必须手动处理销毁操作(默认为true)。
Container
autoHeight : Boolean
如果值为true，height配置项为'auto'，否则值为false的话使用固定的高度...

如果值为true，height配置项为'auto'，否则值为false的话使用固定的高度， 或者可以由其父类容器 layout manager来控制。(默认值为 false)。

注: 虽然很多组件继承了这个配置选项，但不是所有这些组件的自适应高度配置都会像期望的那样起作用。 设置autoHeight：值为true时，浏览器将根据元素的内容自动设置高度，这将意味着Ext不会去管理高度。

如果是由浏览器来管理高度，需要注意的是，通过浏览器进行调整的结构组件内不能被发现， 因此宽度的变化可能导致需要进行同步处理元素的高度。 例如：

var w = new Ext.Window({
    title: 'Window',
    width: 600,
    autoHeight: true,
    items: {
        title: 'Collapse Me',
        height: 400,
        collapsible: true,
        border: false,
        listeners: {
            beforecollapse: function() {
                w.el.shadow.hide();
            },
            beforeexpand: function() {
                w.el.shadow.hide();
            },
            collapse: function() {
                w.syncShadow();
            },
            expand: function() {
                w.syncShadow();
            }
        }
    }
}).show();
Panel
autoLoad : Object/String/Function
一个合法的url描述，依照Updater Ext.Updater.update 方法...
一个合法的url描述，依照Updater Ext.Updater.update 方法。如果autoLoad不为null，panel将会在渲染之后立即尝试加载它的内容。

URL将会成为当前panel的body元素的默认URL，这样它可以在任意时刻被 refresh.

Panel
autoScroll : Boolean
如果值为true，将会在该元素上使用overflow:'auto'配置，并且在必要的时候...
如果值为true，将会在该元素上使用overflow:'auto'配置，并且在必要的时候自动显示滚动条，否则，溢出部分的组件都会被切除(默认值为 false)。
BoxComponent
autoShow : Boolean
如果组件需要检测隐藏CSS属性(如 'x-hidden' 或者 'x-hide-display')并且在渲染时删除...
如果组件需要检测隐藏CSS属性(如 'x-hidden' 或者 'x-hide-display')并且在渲染时删除它们 (默认为false)，设置此值为true。
Component
autoWidth : Boolean
如果为true，使用width:'auto'配置，否则使用固定的宽度...

如果为true，使用width:'auto'配置，否则使用固定的宽度，或者可以由其父类容器的layout manager来控制。(默认值为 false)。

注: 虽然很多组件继承了这个配置选项，但不是所有这些组件的自适应宽度配置都会像期望的那样起作用。 设置autoWidth：值为true时，浏览器将根据元素的内容自动设置宽度，这将意味着Ext不会去管理宽度。

如果是由浏览器来管理宽度，需要注意的是，通过浏览器进行调整的结构组件内不能被发现，因此宽度的变化可能导致需要进行同步处理元素的宽度。 例如，在这个元素的目标是：

<div id='grid-container' style='margin-left:25%;width:50%'></div>
当浏览器窗口改变时，渲染后的Panel必须监听浏览器窗口大小的变化，以便通知子项，浏览器改变了其宽度：

var myPanel = new Ext.Panel({
    renderTo: 'grid-container',
    monitorResize: true, // relay on browser resize
    title: 'Panel',
    height: 400,
    autoWidth: true,
    layout: 'hbox',
    layoutConfig: {
        align: 'stretch'
    },
    defaults: {
        flex: 1
    },
    items: [{
        title: 'Box 1',
    }, {
        title: 'Box 2'
    }, {
        title: 'Box 3'
    }],
});
BoxComponent
baseCls : String
默认值为'x-btn-group'。见Ext.Panel.baseCls。
ButtonGroup
bbar : Object/Array
panel底部工具栏。 此参数可以是一个Ext.Toolbar 、一个工具栏配置项，或者一个buttons/button配置数组---用来被添加到工具栏中...

panel底部工具栏。 此参数可以是一个Ext.Toolbar 、一个工具栏配置项，或者一个buttons/button配置数组---用来被添加到工具栏中。 注意，此参数在渲染之后是无效的。如果在渲染之后需要访问底部工具栏 ，请使用 getBottomToolbar。

注意:尽管Toolbar可以包含Field组件，但它们不会 通过加载祖先FormPanel而被更新。Panel的工具栏不是标准Container->Component 层次的一部分，所以它们不会被扫面以收集表单项。但是，这些值还是会 被提交，因为提交表单的参数是从DOM树中收集的。

Panel
bbarCfg : Object
一个 ADomHelper 元素的配置对象，描述了当前Panelbbar元素的结构...

一个DomHelper 元素的配置对象，描述了当前Panel的bbar元素结构。 另请参见 bodyCfg 。

Panel
bodyBorder : Boolean
True将会在Panel的body元素内部显示一个边框，false将会隐藏它 (默认为true)。只有当border == true 时...
True将会在Panel的body元素内部显示一个边框，false将会隐藏它 (默认为true)。只有当border == true 时，此参数才会被应用。如果border == true 并且 bodyBorder == false， 将会给整个body元素一种凹陷式的外观。
Panel
bodyCfg : Object
一个DomHelper 元素描述对象，可以被指定给任何Panel Element...

一个DomHelper 元素描述对象，可以被指定给任何Panel Element.

默认情况下，以下表格中的Default元素将会被用作html标签，用来创建一个子元素 ，与Default类名相匹配( baseCls 将会被 baseCls 替换 ):

Panel      Default  Default             Custom      Additional       Additional
Element    element  class               element     class            style
========   ==========================   =========   ==============   ===========
header     div      baseCls+'-header'   headerCfg   headerCssClass   headerStyle
bwrap      div      baseCls+'-bwrap'     bwrapCfg    bwrapCssClass    bwrapStyle
+ tbar     div      baseCls+'-tbar'       tbarCfg     tbarCssClass     tbarStyle
+ body     div      baseCls+'-body'       bodyCfg     bodyCssClass     bodyStyle
+ bbar     div      baseCls+'-bbar'       bbarCfg     bbarCssClass     bbarStyle
+ footer   div      baseCls+'-footer'   footerCfg   footerCssClass   footerStyle

例如，配置一个自定义的元素，用来强制 body 元素使用不同形式的标签，而不是使用默认创建的。 这种情况的一个例子可能是 创建一个子 Panel，包含自定义的内容，例如header，或者通过使body拥有一个<center> 元素， 从而强制Panel中的所有内容居中:

new Ext.Panel({
    title: 'Message Title',
    renderTo: Ext.getBody(),
    width: 200, height: 130,
    bodyCfg: {
        tag: 'center',
        cls: 'x-panel-body',  // Default class not applied if Custom element specified
        html: 'Message'
    },
    footerCfg: {
        tag: 'h2',
        cls: 'x-panel-footer'        // same as the Default class
        html: 'footer html'
    },
    footerCssClass: 'custom-footer', // additional css class, see addClass

    footerStyle:    'background-color:red' // see bodyStyle

});

以上例子也显式创建了一个 footer ，拥有自定义的标签和样式。

Panel
bodyCssClass : String/Object/Function
可选的CSS类选择器，被应用到body 元素上，其格式为Ext.Element.addClass所 期望的值(默认为null)...
可选的CSS类选择器，被应用到body 元素上，其格式为Ext.Element.addClass所 期望的值(默认为null)。参见 bodyCfg.
Panel
bodyStyle : String/Object/Function
自定义的CSS样式，它将被应用到body 元素上，其格式为...
自定义的CSS样式，它将被应用到body 元素上，其格式为Ext.Element.applyStyles 所期望的值(默认为null)。参见bodyCfg。
Panel
border : Boolean
True将会显示panel body元素的边框，false将会隐藏它们 (默认为true)。默认情况下，边框是一个2px宽度的内嵌边框...
True将会显示panel body元素的边框，false将会隐藏它们 (默认为true)。默认情况下，边框是一个2px宽度的内嵌边框， 但是，以后可以通过设置bodyBorder 为false以改变它。
Panel
boxMaxHeight : Number
设置组件的最大高度值...

设置组件的最大高度值。

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

BoxComponent
boxMaxWidth : Number
设置组件的最大宽度值...

设置组件的最大宽度值。

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

BoxComponent
boxMinHeight : Number
设置组件的最小高度值...

设置组件的最小高度值。

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

BoxComponent
boxMinWidth : Number
设置组件的最小宽度值...

设置组件的最小宽度值。

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

BoxComponent
bubbleEvents : Array
一个事件数组，当这些事件被触发时，将会被冒泡到所有父容器中。参见....

一个事件数组，当这些事件被触发时，将会被冒泡到所有父容器中。参见 Ext.util.Observable.enableBubble。 默认为 []。

Container
bufferResize : Boolean/Number
当设置为true时(50毫秒)或者是一个毫秒数值， 指定给当前容器的布...
当设置为true时(50毫秒)或者是一个毫秒数值， 指定给当前容器的布局管理器将会缓存它计算出的频率，然后 对组件进行一次重新布局操作。 对于重量级的容器，或者拥有大量子组件的容器来说，这非常有用， 因为频繁进行布局是非常昂贵的。 默认为 50 .
Container
buttonAlign : String
添加到当前panel的所有 buttons 的对齐方式。 合法的值有...
添加到当前panel的所有 buttons 的对齐方式。 合法的值有 'right' , 'left' 和 'center' (默认为 'right' )。
Panel
buttons : Array
Panel的按钮数组，它们从 buttons 配置属性创建。只读。
Panel
bwrapCfg : Object
一个DomHelper 元素描述对象，描述了当前Panel的 bwrap 的元素的结构...

一个DomHelper 元素描述对象，描述了当前Panel的 bwrap 的元素的结构。另请参见 bodyCfg 。

Panel
clearCls : String
应用到特殊的clearing div的CSS类， 这个clearing div直接渲染到每个form field的包装器后面...

应用到特殊的clearing div的CSS类， 这个clearing div直接渲染到每个form field的包装器后面，以提供 清除field的功能(默认为 'x-form-clear-left')。

注意: 只有在当前组件被渲染到一个使用FormLayout 布局(例如 Ext.form.FormPanel 或者指定 layout:'form')的 容器中、或者是指定了一个fieldLabel 、或者指定isFormField=true 时此配置才有效。

另请参见 Ext.layout.FormLayout. fieldTpl。

Component
closable : Boolean
Panel自身不支持关闭操作，但是Panel的一些子类 (例如Ext.Window) ，或者处于Ext.TabPanel中的 Panel支持...
Panel自身不支持关闭操作，但是Panel的一些子类 (例如Ext.Window) ，或者处于Ext.TabPanel中的 Panel支持。 指定此参数为 true 可以在这些情况下启用关闭。默认为 false 。
Panel
cls : String
一个可选的额外CSS类，它将被添加到当前组件的元素上(默认为'')...
一个可选的额外CSS类，它将被添加到当前组件的元素上(默认为'')。 此属性对于在组件上，或者它的任何使用标准CSS规则的孩子节点上， 添加定制的样式非常有用。
Component
collapseFirst : Boolean
将会确保折叠/展开(collapse/expand)按钮总是被渲染在第一个位置...
true 将会确保折叠/展开(collapse/expand)按钮总是被渲染在第一个位置， 在panel顶部的工具栏中位于任何其它工具左侧， false 将会把它渲染在最后(默认为 true )。
Panel
collapsed : Boolean
如果当前panel被折叠为true。只读。
Panel
collapsedCls : String
在被折叠后，一个被添加到panel元素上的CSS类 (默认为 'x-panel-collapsed' )。
Panel
collapsible : Boolean
True将会使panel折叠并且会自动把展开/折叠(expand/collapse)按钮渲染到顶部...
True将会使panel折叠并且会自动把展开/折叠 (expand/collapse)按钮渲染到顶部工具按钮区域，false将 保持panel尺寸固定，没有按钮(默认为false)。
Panel
columns : Number
columns的配置属性是通过layout配置来管理。(译者注:layout必须配置成'table'，此属性才会生效)。见 Ext.layout.TableLayout.columns.
ButtonGroup
contentEl : String
(可选)指定一个已存在的HTML元素，或者一个已存在HTML元素的...

(可选)指定一个已存在的HTML元素，或者一个已存在HTML元素的 id ，它们将被用作当前组件的内容。

  • 描述 :
    此配置选项被用来将一个已存在的HTML元素 插入到一个新组件(在组件渲染之后它简单地移动DOM元素) 的layout元素中，使它成为该组件的内容。
  • 注意 :
    指定的HTML元素将被append到组件的layout元素中， 在所有配置的 HTML 被插入之后， 并且，这样的话，在render事件 被触发时，document中将不再包含此元素。
    指定的HTML元素将不会参与组件所有可能使用的 layout 过程(译者注：指这些HTML元素 不会参与布局操作)。 它仅是HTML而已。布局操作实在孩子 items 上进行的。
    添加 x-hidden 或者 x-hide-display CSS类，以防在内容渲染到panel时发生闪烁。
Component
ctCls : String
一个可选的外部CSS样式，添加到这个组件的容器(默认值为 '')。 这个方法对于使用标准的CSS规则...

一个可选的外部CSS样式，添加到这个组件的容器(默认值为 '')。 这个方法对于使用标准的CSS规则，为组件或它的任何一个子组件添加特定的样式非常有用。 参见 Ext.layout.ContainerLayout和 extraCls 。

注意: ctCls 默认为 ''期望如下的类，它们将指定一个默认值:

  • Box Layout : 'x-box-layout-ct'
使用一个额外的CSS类配置以上的Class，它是append到默认对象上的。例如， 对于BoxLayout (Hbox and Vbox):
                                ctCls: 'x-box-layout-ct custom-class'

Component
data : Mixed
初始化数据集，它将被应用到 tpl 上以刷新组件的内容区域。
Component
defaultType : String
当一个子项目通过一个原生的配置对象 而不是一个组件的实例指定时。...

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

默认为 'panel' ， Ext.menu.Menu 默认为 'menuitem' ， Ext.Toolbar 和 Ext.ButtonGroup 默认为 'button' 。

Container
defaults : Object|Function
此选项是在所有添加的项目上应用默认设置的手段， 这些项目要么是通过...

此选项是在所有添加的项目上应用默认设置的手段， 这些项目要么是通过 items 配置项添加的， 或者是通过 add 或者是通过 insert 方法添加的。

如果添加的项目是一个配置对象， 并且不是一个组件的实例， 那么默认参数将会被无条件地被应用。 如果添加的项目是一个组件的实例， 那么默认参数将有条件地被应用，以免覆盖项目上的现有属性你。

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

例如，如需自动在 Ext.Panel 所包含的每个项目上应用padding属性，你可以传递: defaults: {bodyStyle: 'padding:15px'} 。

用法:

defaults: {               // defaults are applied to items, not the container
    autoScroll:true
},
items: [
    {
        xtype: 'panel',   // defaults do not have precedence over
        id: 'panel1',     // options in config objects, so the defaults
        autoScroll: false // will not be applied here, panel1 will be autoScroll:false
    },
    new Ext.Panel({       // defaults do
                                     have precedence over options
        id: 'panel2',     // options in components, so the defaults
        autoScroll: false // will be applied here, panel2 will be autoScroll:true.
    })
]
Container
disabled : Boolean
当前组件处于无效状态时为true。 Read-only.
Panel
disabledClass : String
当组件处于无效状态时添加到组件上的CSS类(默认为 'x-item-disabled')。
Component
draggable : Boolean/Object
true 可以让当前panel启用拖拽操作(默认为 false )...

true 可以让当前panel启用拖拽操作(默认为 false )。

如需自定义的drag/drop实现，也可以向此配置项传递一个 Ext.Panel.DD配置替代 true 。 Ext.Panel.DD是一个内部没有文档化的类，它在周围移动代理元素 代替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();
Panel
elements : String
panel元素列表，以逗号分隔，在panel被渲染时初始化。 通常情况下...
panel元素列表，以逗号分隔，在panel被渲染时初始化。 通常情况下，此列表在配置时根据添加到panel的项目被自动创建， 但有时，即使没有在配置时指定，对于确保一个结构化的元素被渲染也很有用 (例如，你可能希望在panel被渲染后动态地添加一个按钮或者工具栏)。 添加这些元素到此列表中将会在panel被渲染时分配必须的占位符。 合法的值有
  • header
  • tbar (top bar)
  • body
  • bbar (bottom bar)
  • footer
Defaults to ' body '.
Panel
fbar : Object/Array
一个Toolbar 对象、一个Toolbar配置项，或者一个Buttons/ Button 配置数组，...

一个Toolbar 对象、一个Toolbar配置项，或者一个Buttons/ Button 配置数组，它们描述了一个被添加到当前Panel底部元素的 Toolbar.

在渲染后， fbar 将会为一个Toolbar 实例。

如果指定了 buttons ，它们将替代 fbar 配置项。

Panel的 buttonAlign 配置项目将会影响这些项目的布局，例如:
var w = new Ext.Window({
    height: 250,
    width: 500,
    bbar: new Ext.Toolbar({
        items: [{
            text: 'bbar Left'
        },'->',{
            text: 'bbar Right'
        }]
    }),
    buttonAlign: 'left', // anything but 'center' or 'right' and you can use '-', and '->'

                                  // to control the alignment of fbar items
    fbar: [{
        text: 'fbar Left'
    },'->',{
        text: 'fbar Right'
    }]
}).show();

注意:尽管Toolbar可以包含Field组件，但它们不会 通过加载祖先FormPanel而被更新。Panel的工具栏不是标准Container->Component 层次的一部分，所以它们不会被扫面以收集表单项。但是，这些值还是会 被提交，因为提交表单的参数是从DOM树中收集的。

Panel
fieldLabel : String
紧靠此field显示的标签文本(默认值为 '')。注意...

紧靠此field显示的标签文本(默认值为 '')。

注意:只有在当前组件被渲染到一个使用FormLayout 的容器中时，此配置才有效。 (例如 Ext.form.FormPanel 或 指定 layout:'form')。

另请参见 hideLabel 、 Ext.layout.FormLayout和 fieldTpl。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Name'
    }]
});
Component
flex : Number
注: 这个配置只用于该组件被包含在一个已使用BoxLayout配置的Container中时...

注: 这个配置只用于该组件被包含在一个已使用BoxLayout配置的Container中时。通过计算每一个子组件的flex值所占全部flex值之和的比例，来决定子组件的宽(HBoxLayout)高(VBoxlayout)。 任何子项的 flex = 0 或 flex = undefined 将不被设置(初始值大小将不被改变)。

BoxComponent
floating : Mixed
此参数被用来配置底层的 Ext.Layer. 此配置参数可接受的值有...

此参数被用来配置底层的 Ext.Layer. 此配置参数可接受的值有:

  • false : 默认。
    在渲染的地方以内嵌的方式显示panel.
  • true :
    浮动panel (绝对定位，有自动衬垫和阴影)。
      设置floating为true将会为当前panel创建一个Ext.Layer 并且在负值偏移量处显示panel，这样它就是隐藏的。
      既然panel被绝对定位，位置必须在渲染之后被显式设置 (例如 myPanel.setPosition(100,100); )。
      注意: 如果浮动面板，你必须总是指定一个固定的宽度， 否则它将是自动宽度并且总是展开以便填充到视口右侧 边缘。
  • object :
    指定的对象将会被用作将会被创建的 Ext.Layer的 配置对象。
Panel
footer : Ext.Element
Panel底部Element 。只读。此元素被用来容纳Panel的...
Panel底部Element 。只读。

此元素被用来容纳Panel的 buttons 或者 fbar 。

注意: 另请参见 el 的注释。

Panel
footerCfg : Object
一个DomHelper 元素的配置对象，描述了当前Panel的footer元素结构。 另请参见...

一个DomHelper 元素的配置对象，描述了当前Panel的footer元素结构。 另请参见 bodyCfg 。

Panel
forceLayout : Boolean
如果此值为true，容器将将强制初始化一次布局操作...
如果此值为true，容器将将强制初始化一次布局操作， 即使容器处于隐藏或者折叠状态。 此配置项对于在一个折叠或者隐藏的容器中强制渲染非常有用 (默认为false)。
Container
frame : Boolean
默认值为true。见Ext.Panel.frame。
ButtonGroup
header : Ext.Element
Panel的headerElement. 只读。此元素被用来容纳 title和 tools...
Panel的headerElement. 只读。

此元素被用来容纳 title和 tools

注意: 另请参见 el 的注释。

Panel
headerAsText : Boolean
true 将会在 header 中显示panel title ， false 将会隐藏它(默认为 true )。
Panel
headerCfg : Object
一个DomHelper 元素的配置对象，描述了当前Panel的header元素结构...

一个DomHelper 元素的配置对象，描述了当前Panel的header元素结构。 另请参见 bodyCfg 。

Panel
height : Number
组件的高度(默认值为 auto)。注:如果想使用百分比的方式...
组件的高度(默认值为 auto)。注:如果想使用百分比的方式来设置值，请查看 Ext.Component.anchor。
BoxComponent
hidden : Boolean
如果当前组件处于隐藏状态，此值为true。Read-only。
Component
hideBorders : Boolean
设置为true可以隐藏所包含的每个组件的边框， false为遵照组件现有的边框设置...
设置为true可以隐藏所包含的每个组件的边框， false为遵照组件现有的边框设置(默认为 false)。
Container
hideCollapseTool : Boolean
true 将会在 collapsible == true 时隐藏展开/折叠按钮， false 将会显示它(默认为 false )。
Panel
hideLabel : Boolean
true时完全隐藏label元素 ( label 和 separator)。 默认为 false。 默认情况下，即使你不指定...

true时完全隐藏label元素 ( label 和 separator)。 默认为 false。 默认情况下，即使你不指定 fieldLabel 它的空间仍然会被保留，这样这块区域会与其它确实拥有label的区域位于同一排。 讲此值设置为 true 将导致此区域不再保留此空间。

注意: 参见 clearCls 的注释。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield'
        hideLabel: true
    }]
});
Component
hideMode : String
组件如何隐藏，支持的值有： 'visibility' (css visibility), 'offsets' (位置偏移量为负值) 和...

组件如何隐藏，支持的值有： 'visibility' (css visibility), 'offsets' (位置偏移量为负值) 和 'display' (css display).

注意:一般首选默认值 'display'，因为当组件第一次显示的时候它们会自动进行布局 (隐藏的时候不会调整尺寸)。

Component
hideParent : Boolean
此值为true时，当调用hide/show方法时，将会hide和show组件的容器...
此值为true时，当调用hide/show方法时，将会hide和show组件的容器；false时将会 hide和show组件自身(默认为false)。例如，这可以用作window上隐藏按钮的一种 快捷操作，通过设置此按钮的hideParent:true，然后把它添加到window上。
Component
html : String/Object
一个HTML片段，或者一个 DomHelper 描述，用作layout元素的内容(默认为'')。...
一个HTML片段，或者一个 DomHelper 描述，用作layout元素的内容(默认为'')。 这个HTML内容在组件渲染之后才被添加，所以在 render 出发的时候，document中尚未包含此HTML。 但是这个内容将会在所有配置的 contentEl 之前被插入到body标签中。
Component
iconCls : String
CSS类选择器，指定被用作头部图标的背景图片(默认为'')...
CSS类选择器，指定被用作头部图标的背景图片(默认为'')。

指定自定义图表类的示例就像:

// specify the property in the config for the class:
     ...
     iconCls: 'my-icon'

// css class that specifies background image to be used as the icon image:
.my-icon { background-image: url(../images/my-icon.gif) 0 6px no-repeat !important; }
Panel
id : String
当前组件唯一的id(默认为auto-assigned id)...

当前组件唯一的id(默认为auto-assigned id)。 如果你需要在以后访问组件，而又没有一个有效的组件对象引用，那么你需要指定一个 id( 也就是，使用Ext. getCmp方法 )。

注意，此id也将被用作组件底层HTML标签的id，这些标签被渲染到页面中。 这将允许你编写基于id的CSS规则，以独立地描述指定的实例；并且，也可以通过 组件父标签的id选中子元素。

注意:为了避免与唯一的id 产生重复， 请参见 itemId 和 ref 。

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

Component
itemCls : String
注意: 只有在当前组件被渲染到一个使用FormLayout 布局的 容器中时此配置才有效...

注意: 只有在当前组件被渲染到一个使用FormLayout 布局的 容器中时此配置才有效。 (例如Ext.form.FormPanel 或者指定 layout:'form')。

一个附加的CSS类，应用到div上，包装当前field的表单元素。 如果提供了此参数， field级上的itemCls将会覆盖 container级上提供的 默认itemCls。 为itemCls指定的值将会被添加默认的 类('x-form-item')。

既然它被应用到项目的包装器上(参见 Ext.layout.FormLayout。 fieldTpl)， 它将允许你编写能应用到此field、label(如果有指定)、或者field内部任何其它元素的标准CSS规则。

注意: 参考 fieldLabel的注释。 .

示例用法:

// Apply a style to the field's label:
<style>
    .required .x-form-item-label {font-weight:bold;color:red;}
</style>

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Name',
        itemCls: 'required' //this label will be styled
    },{
        xtype: 'textfield',
        fieldLabel: 'Favorite Color'
    }]
});
Component
itemId : String
当没有可利用的对象引用时，itemId可以作为第二选择，用来获得一个组件的引用， 代替 ...

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

var c = new Ext.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'); // 与 Ext.getCmp()不同

p2 = p1.ownerCt.getComponent('p2'); // 通过兄弟对象获得引用

另请参见 id 和 ref 。

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

Component
items : MixedCollection
当前容器中的子组件集合 Ext.util.MixedCollection
Container
keys : Object/Array
一个Ext.KeyMap 配置对象 (其格式为Ext.KeyMap.addBinding 所期望的值...
一个Ext.KeyMap 配置对象 (其格式为Ext.KeyMap.addBinding 所期望的值，用来向当前panel上绑定自定义的按键处理(默认为 null )
Panel
labelSeparator : String
每个fieldLabel 文本后面现实的分隔符。 此属性可以在多个层次上进行配置...

每个fieldLabel 文本后面现实的分隔符。 此属性可以在多个层次上进行配置。优先顺序为：

  • field / component level
  • container level
  • layout level (默认为冒号 ':')
如不需要为当前field的label显示分隔符，指定一个空字符串''即可。

注意:参见 clearCls 的注释。

另请参见 hideLabel 和 Ext.layout.FormLayout。 fieldTpl。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    layoutConfig: {
        labelSeparator: '~'   // layout config has lowest priority (defaults to ':')
    },
    labelSeparator: '>>',     // config at container level
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Field 1',
        labelSeparator: '...' // field/component level config supersedes others
    },{
        xtype: 'textfield',
        fieldLabel: 'Field 2' // labelSeparator will be '='

    }]
});
Component
labelStyle : String
一个CSS样式描述字符串，它将直接应用到当前field的label上...

一个CSS样式描述字符串，它将直接应用到当前field的label上。 如果有设置，默认为容器的labelStyle值(例如 Ext.layout.FormLayout.labelStyle , 或者 '')。

注意:参见 clearCls 的注释。

另请参见 hideLabel 和 Ext.layout.FormLayout. fieldTpl。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Name',
        labelStyle: 'font-weight:bold;'
    }]
});
Component
layout : String
默认值为'table'。见Ext.Container.layout。
ButtonGroup
layoutConfig : Object
这是一个配置对象，包含为 layout 指定的参数， 如果 layout 是作为一个 string 来指定的。

Container
listeners : Object
一个包含一个或多个事件处理器的配置对象，会在初始化的时候被添加到目标对象上...

一个包含一个或多个事件处理器的配置对象，会在初始化的时候被添加到目标对象上。 该配置对象应该是一个有效的监听器配置对象就像 addListener例子中指定的一样可一次附加多个处理器。

ExtJs Components上的DOM事件

一些 ExtJs Component 类导出时会选择一些DOM事件(例如 "click", "mouseover" 等等), 这通常只是在有额外的值可以被添加时发生。例如DataView类的 click事件会传递被点击的节点。也可以直接在Component的HTMLElementevent上访问DOM事件，但必需在Component被渲染后监听器才能添加到Element 上。可以按照以下步骤添加插件:

// 插件会用一个监听器配置对象进行配置。
//该组件会被添加到所有处理方法的参数列表上。
Ext.DomObserver = Ext.extend(Object, {
    constructor: function(config) {
        this.listeners = config.listeners ? config.listeners : config;
    },

    // 组件将自己传递进了插件的初始化方法里
    init: function(c) {
        var p, l = this.listeners;
        for (p in l) {
            if (Ext.isFunction(l[p])) {
                l[p] = this.createHandler(l[p], c);
            } else {
                l[p].fn = this.createHandler(l[p].fn, c);
            }
        }

        // 渲染后立即添加监听器到元素上
        c.render = c.render.createSequence(function() {
            var e = c.getEl();
            if (e) {
                e.on(l);
            }
        });
    },

    createHandler: function(fn, c) {
        return function(e) {
            fn.call(this, e, c);
        };
    }
});

var combo = new Ext.form.ComboBox({

    // 元素被点击后折叠
    plugins: [ new Ext.DomObserver({
        click: function(evt, comp) {
            comp.collapse();
        }
    })],
    store: myStore,
    typeAhead: true,
    mode: 'local',
    triggerAction: 'all'
});

Observable
margins : Object
注:此配置只用于该组件展现在一个使用BorderLayout...

注:此配置只用于该组件展现在一个使用BorderLayout 或 BoxLayout的两个子类之一作为布局的容器。

这个margins对象在该组件中的格式为：

{top: (top margin),right: (right margin),bottom: (bottom margin),left: (left margin)}

也可以是一个字符串，中间用空格分隔，margin值为数字。 把matches中每一个值的次序跟CSS中margin值的排列方式相对应：

  • 如果只有一个值，它适用于所有方面。
  • 如果有两个值，top和bottom的边框设置为第一个值，left和right设置为第二个值。
  • 如果有三个值，top设置为第一个值，left和right设置为第二个值，bottom设置为第三个值。
  • 如果有四个值，分别设置为top, right, bottom, left。

默认值:

{top:0, right:0, bottom:0, left:0}
BoxComponent
maskDisabled : Boolean
true 将会在panel被disabled时进行遮罩,false将不会遮罩它(默认为...
true 将会在panel被disabled时进行遮罩, false 将不会遮罩它(默认为 true )。使用任意一种方法，当被禁用时，panel都将告诉它包含的元素禁用它们自己， 但是遮罩panel可以提供一种额外的视觉效果，用以提示panel被禁用。
Panel
minButtonWidth : Number
当前panel中所有buttons 最小宽度，像素值(默认为 75 )
Panel
monitorResize : Boolean
设置为true自动监测window的resize事件，以便处理所有对当前窗口尺寸 敏感的事情。...
设置为true自动监测window的resize事件，以便处理所有对当前窗口尺寸 敏感的事情。 典型地，通过选择一个 layout 来管理这个值，并且不应该手动设置它。
Container
overCls : String
一个可选的额外的CSS类，它将在鼠标移过元素时被添加到组件上...
一个可选的额外的CSS类，它将在鼠标移过元素时被添加到组件上，鼠标移出时 删除。(默认为'')。此属性对于在组件上，或者它的任何使用标准CSS规则的孩子节点上， 添加定制的'active' 或者 'hover'样式非常有用。
Component
padding : Number/String
设置body元素padding样式的快捷方式。 此值既可以是一个数值，被应用到所有侧边...
设置body元素padding样式的快捷方式。 此值既可以是一个数值，被应用到所有侧边，也可以是一个普通的描述padding的 CSS字符串。默认为undefined.
Panel
pageX : Number
如果该组件被包含在一个指定位置的容器中，这个值表示页面级的x坐标值（译者注：在有滚动条的情况下这个值很有用）。
BoxComponent
pageY : Number
如果该组件被包含在一个指定位置的容器中，这个值表示页面级的y坐标值（译者注：在有滚动条的情况下这个值很有用）。
BoxComponent
plugins : Object/Array
一个对象或者一个对象数组，为组件提供特殊的功能 ...
一个对象或者一个对象数组，为组件提供特殊的功能。 对一个合法的插件唯一的要求是它含有一个init()方法， 能接收一个Ext.Component型的参数。 当组件被创建时，如果有可用的插件，组件将会调用每个插件的init方法， 并将自身的引用作为方法参数传递给它。然后，每个插件就可以调用方法或者响应组件上的事件， 就像需要的那样提供自己的功能。
Component
preventBodyReset : Boolean
默认为 false 。当设置为 true 时， 一个额外的CSS类 'x-panel-normal' 将会被田间到panel的元素， 有效地将W3C(参见 http://www.w3.org/TR/CSS21/sample.html)...
默认为 false 。当设置为 true 时， 一个额外的CSS类 'x-panel-normal' 将会被田间到panel的元素， 有效地将W3C(参见 http://www.w3.org/TR/CSS21/sample.html) 建议的CSS样式应用到Panel的body元素上 (不是header, footer等等)。
Panel
ptype : String
需要创建配置的ptype。 当传递一个配置对象给构造函数时...
需要创建配置的ptype。 当传递一个配置对象给构造函数时，此配置选项不会被使用。 只有在使用懒初始化的时候此配置项才会被使用， 此时Plugin不是 通过一个完整的实例组件，而是通过一个Component配置指定的。 在渲染时，将会查找ptype以决定创建何种类型的Plugin。

如果你创建自己的Plugin，你可以通过 Ext.ComponentMgr.registerPlugin 对它们进行注册，以便能利用懒初始化和渲染机制。
Component
ref : String
一个路径描述，与组件的 ownerCt 相关，它描述了把当前组件的命名引用放置到哪个父容器中去。...

一个路径描述，与组件的 ownerCt 相关，它描述了把当前组件的命名引用放置到哪个父容器中去。

祖先的坐标路径可以通过'/'字符进行分隔。 例如，将一个Toolbar Button的引用放入 拥有此Toolbar的Panel中:

var myGrid = new Ext.grid.EditorGridPanel({
    title: 'My EditorGridPanel',
    store: myStore,
    colModel: myColModel,
    tbar: [{
        text: 'Save',
        handler: saveChanges,
        disabled: true,
        ref: '../saveButton'
    }],
    listeners: {
        afteredit: function() {
//          The button reference is in the GridPanel
            myGrid.saveButton.enable();
        }
    }
});

在上面的代码中，如果 ref 是 'saveButton' ，那么引用将会被放置到Toolbar中。 ref 中的每个'/' 都会从组件的 ownerCt 向上移动一级。

另请参见 added 和 removed 事件。

Component
region : String
注: 此配置只用于该组件展现在一个布局为BorderLayout的容器中...

注: 此配置只用于该组件展现在一个布局为BorderLayout的容器中(例如指定layout:'border')。

详见Ext.layout.BorderLayout。

BoxComponent
renderTo : Mixed
该值可以是一个节点的id、一个DOM节点或者一个已存在的元素...

该值可以是一个节点的id、一个DOM节点或者一个已存在的元素， 组件将会被渲染到其中。

  • 注意 :
      如果组件不是一个Container 的子项目时， 不要使用此选项。 渲染和管理它的子项目是一个Container 的layout manager的责任。
      当使用此配置项时，无需调用render()方法。

另请参见 render 。

Component
resizeEvent : String
在布局中进行尺寸调整需要监听的事件。 默认为 'resize' 。
Panel
shadow : Boolean/String
(或者一个有效的Ext.Shadow Ext.Shadow.mode 值)，用来在panel后面显示一个阴影...
true (或者一个有效的Ext.Shadow Ext.Shadow.mode 值)，用来在panel后面显示一个阴影， false 将不会显示阴影(默认为 'sides' )。注意，此选项只有当 floating = true 时才应用。
Panel
shadowOffset : Number
如果显示了阴影，此参数为数值偏移量(默认为 4 )。注意，只有当 floating = true 时此参数才会被应用。...
如果显示了阴影，此参数为数值偏移量(默认为 4 )。注意，只有当 floating = true 时此参数才会被应用。
Panel
shim : Boolean
false将会在需要的浏览器中禁用iframe衬垫(默认为...
false 将会在需要的浏览器中禁用iframe衬垫(默认为 true )。注意，此选项只有在 floating = true 时应用。
Panel
stateEvents : Array
一个事件数组，当它们被触发时，组件需要保存自己的状态(默认值为 none)...

一个事件数组，当它们被触发时，组件需要保存自己的状态(默认值为 none)。 它们可以是任何该组件支持的事件类型，包括浏览器事件和 自定义事件(例如['click', 'customerchange'])。

对于保存和恢复组件状态的详细解释，参见 stateful

Component
stateId : String
为该组件指定的唯一的id值，它被用作管理组件状态的目的...
为该组件指定的唯一的id值，它被用作管理组件状态的目的。 (如果设定了id，默认值为组件自己的id，否则，如果组件使用自动生成的id，此值为null)。

对于保存和反解析组件状态的解释，参见 stateful 。

Component
stateful : Boolean
一个标志参数，它将引起组件在启动时尝试从一个保存的状态中恢复内部状态参数...

一个标志参数，它将引起组件在启动时尝试从一个保存的状态中恢复内部状态参数。 组件必须要么拥有一个 stateId 或者 id ，它们被分配给需要被管理的状态属性。 在跨页面加载时，不保证自动生成的id属性的稳定性， 并且，不能依赖此id来保存和恢复一个组件的相同状态。

为了保存状态的操作能够工作，状态管理器的提供者必须 被设置成一个Ext.state.Provider 的实现类，它覆盖了set 和get 方法，以便保存和恢复name/value对。 有一个内置的Ext.state.CookieProvider 可用。

为当前页面设置状态提供者:

Ext.state.Manager.setProvider(new Ext.state.CookieProvider({
    expires: new Date(new Date().getTime()+(1000*60*60*24*7)), //7 days from now
}));

当 stateEvents 配置项中其中之一的事件被触发时， 一个状态可保存的组件将试图保存其状态。

保存状态时，一个可保存状态的组件首先需要通过调用 getState 方法来序列化它的状态。 默认情况下，此函数什么事都不做。 开发者必须提供一个实现，返回一个hash对象，它描述了组件可恢复的状态。

getState方法产生的值将会传递给 Ext.state.Manager.set 方法，它使用配置的 Ext.state.Provider 来保存对象，以组件的 stateId 为key，或者，如果此值（指stateId）没有指定时， 使用它的 id 作为key。

在进行构造时，一个可保存状态的组件试图通过调用 Ext.state.Manager.get方法来 恢复它的状态，传递 stateId 或者，如果此值（指stateId）没有指定时， 使用它的 id 作为参数。

结果对象被传递给 applyState 。 applyState 的默认实现只是简单地把属性拷贝到对象中， 但是开发者可以覆盖此方法以支持更多行为。

通过向 beforestaterestore, staterestore, beforestatesave 和 statesave 事件上绑定监听器，你可以在保存和恢复状态时进行额外的处理。

Component
style : String
被添加到组件元素的特定样式。 必须是按照...
被添加到组件元素的特定样式。 必须是按照 Ext.Element.applyStyles 类指定格式的合法参数值。

new Ext.Panel({
    title: 'Some Title',
    renderTo: Ext.getBody(),
    width: 400, height: 300,
    layout: 'form',
    items: [{
        xtype: 'textarea',
        style: {
            width: '95%',
            marginBottom: '10px'
        }
    },
        new Ext.Button({
            text: 'Send',
            minWidth: '100',
            style: {
                marginBottom: '10px'
            }
        })
    ]
});
Component
tabTip : String
注: 这个配置只用于当该组件作为TabPanel的一个子项目时使用...

注: 这个配置只用于当该组件作为TabPanel的一个子项目时使用。

一个String类型的innerHTML(支持html标签)，当鼠标放在该选项上的时，显示一个tooltip。为了tips能够被渲染，Ext.QuickTips.init()必须被提前调用。
BoxComponent
tbar : Object/Array
panel的顶部工具栏。 此参数可以是一个 The top toolbar of the panel. This can be a Ext.Toolbar 对象、一个工具栏配置、或者一个被添加到工具栏的...

panel的顶部工具栏。 此参数可以是一个 The top toolbar of the panel. This can be a Ext.Toolbar 对象、一个工具栏配置、或者一个被添加到工具栏的buttons/button配置数组。 注意，在渲染之后此参数无效。如需在渲染之后访问顶部工具栏，请使用 getTopToolbar。

注意:尽管Toolbar可以包含Field组件，但它们不会 通过加载祖先FormPanel而被更新。Panel的工具栏不是标准Container->Component 层次的一部分，所以它们不会被扫面以收集表单项。但是，这些值还是会 被提交，因为提交表单的参数是从DOM树中收集的。

Panel
tbarCfg : Object
一个DomHelper 元素的配置对象，描述了当前Panel的tbar元素结构。 另请参见...

一个DomHelper 元素的配置对象，描述了当前Panel的tbar元素结构。 另请参见 bodyCfg 。

Panel
title : String
被用作innerHTML的标题文本(接受html标签) ，用来显示在panel的...
被用作innerHTML的标题文本(接受html标签) ，用来显示在panel的 header 中(默认为'')。 当 title 被指定时， header 元素将会被自动创建并显示，除非 header 被显式地设置为 false 。 如果你不在配置时指定一个 title ， 但是你想以后设置，你必须要么 指定一个非空的 title (一个空格' ' 也可以)或者指定 header:true ，这样容器元素将会被创建。
Panel
titleCollapse : Boolean
将会允许通过在顶部工具条的任意地方点击展开和折叠panel(当...
true 将会允许通过在顶部工具条的任意地方点击展开和折叠panel(当 collapsible = true )， false ) 将会只允许通过点击工具按钮进行操作(默认为 false ))。如果当前panel是border布局中的一个子项目，另请参见 BorderLayout.Region floatable 配置项。
Panel
toolTemplate : Ext.Template/Ext.XTemplate
用来在header 元素中创建tools 的模板。默认为:...

用来在header 元素中创建tools 的模板。默认为:

                                    new Ext.Template('<div class="x-tool x-tool-{id}">&#160;</div>')

可以覆盖此参数，以便为基于更复杂XTemplate的tools提供自定义的DOM结构。 模板的数据为一个简单的tool配置对象(不是整个Array)， 它在 tools配置项指定。 在以下例子中，当鼠标滑过tool时，一个<a>标签被用来提供视觉效果:

var win = new Ext.Window({
    tools: [{
        id: 'download',
        href: '/MyPdfDoc.pdf'
    }],
    toolTemplate: new Ext.XTemplate(
        '<tpl if="id==\'download\'">',
            '<a class="x-tool x-tool-pdf" href="{href}"></a>',
        '</tpl>',
        '<tpl if="id!=\'download\'">',
            '<div class="x-tool x-tool-{id}">&#160;</div>',
        '</tpl>'
    ),
    width:500,
    height:300,
    closeAction:'hide'
});

注意，CSS类'x-tool-pdf'必须拥有一个关联的样式规则，它提供了一个适当的背景图片， 例如:

                                a.x-tool-pdf {background-image: url(../shared/extjs/images/pdf.gif)!important;}
Panel
tpl : Mixed
一个 Ext.Template , Ext.XTemplate 或者一个用来形成一个Ext.XTemplate的字符串数组...
一个 Ext.Template , Ext.XTemplate 或者一个用来形成一个Ext.XTemplate的字符串数组。 与 data 和 tplWriteMode 配置项协同使用。
Component
tplWriteMode : String
刷新组件的内容区域时使用的Ext.(X)Template方式。 默认为'overwrite' (参见 Ext.XTemplate.overwrite )。
刷新组件的内容区域时使用的Ext.(X)Template方式。 默认为'overwrite' (参见 Ext.XTemplate.overwrite )。
Component
unstyled : Boolean
覆盖 baseCls 设置为 baseCls = 'x-plain' ， 除了必须的属性之外，它将panel渲染成无样式的...
覆盖 baseCls 设置为 baseCls = 'x-plain' ， 除了必须的属性之外，它将panel渲染成无样式的，以便Ext布局功能能起作用 (例如overflow:hidden)。
Panel
width : Number
组件的宽度(默认值为 auto)。注:如果想使用百分比的方式...
组件的宽度(默认值为 auto)。注:如果想使用百分比的方式来设置值，请查看 Ext.Component.anchor。
BoxComponent
x : Number
如果被包含在一个指定位置的容器中，这个值表示x(left)坐标值。
BoxComponent
xtype : String
需要创建配置的xtype。 当传递一个配置对象给构造函数时...
需要创建配置的xtype。 当传递一个配置对象给构造函数时，此配置选项不会被使用。 只有在使用懒初始化的时候此配置项才会被使用，此时容器的子项目不是 通过一个完整的实例组件，而是通过一个Component配置指定的。 在渲染时，将会查找xtype以决定创建何种类型的子组件。

预定义的xtype列表如下： here。

如果你继承Component创建你自己的组件，你需要使用Ext.ComponentMgr.registerType 对它们进行注册，以便利用懒初始化和渲染机制。
Component
y : Number
如果被包含在一个指定位置的容器中，这个值表示y(top)坐标值。
BoxComponent

公共属性

Property Defined By
body : Ext.Element
Panel的body Element ，可以用来包含HTML内容。 内容可以在...
Panel的body Element ，可以用来包含HTML内容。 内容可以在html 配置项中指定，或者可以使用autoLoad 配置项被加载，或者通过Panel的Updater提供。 只读。

如果这被用来通过任意方式加载可视的HTML元素，那么Panel不可以被用作 一个Layout，用来容纳其它Panel。

如果当前Panel期望被用作一个Layout的宿主 (参见 layout) 那么body元素必须不能被加载或者改变---因为它处于Panel的Layout的控制 之下。

注意: 另请参见 el .

Panel
buttons : Array
Panel的按钮数组，它们从 buttons 配置属性创建。只读。
Panel
bwrap : Ext.Element
Panel的bwrapElement ，用来包含其它Panel元素(tbar, body, bbar, footer)。 参见 bodyCfg。 只读。
Panel
collapsed : Boolean
如果当前panel被折叠为true。只读。
Panel
dd : Ext.dd.DragSource.
如果当前Panel被配置为 draggable ，此参数将会包含一个 Ext.dd.DragSource 实例，它负责处理拖拽Panel...

如果当前Panel被配置为 draggable ，此参数将会包含一个 Ext.dd.DragSource 实例，它负责处理拖拽Panel。

开发者必须提供Ext.dd.DragSource的 抽象方法的实现，用来提供drag/drop过程中的每一步行为。 参见 draggable.
Panel
disabled : Boolean
当前组件处于无效状态时为true。 Read-only.
Component
el : Ext.Element
封装了当前组件的Ext.Element。 Read-only。通常情况下，这将是一个<DIV>元素，它由此类的...

封装了当前组件的Ext.Element。 Read-only。

通常情况下，这将是一个<DIV>元素，它由此类的 onRender方法创建，但是它可以通过使用 autoEl 配置项进行覆盖。

注意: 直到组件渲染完成此元素都将处于无效状态。

如需向当前组件的 DOM事件(而不是当前组件自己的Observable事件)添加监听器， 更多建议，参见 listeners 配置项，或者直接使用一个render监听器:

new Ext.Panel({
    title: 'The Clickable Panel',
    listeners: {
        render: function(p) {
            // Append the Panel to the click handler's argument list.
            p.getEl().on('click', handlePanelClick.createDelegate(null, [p], true));
        },
        single: true  // Remove the listener after first invocation
    }
});

另请参见 getEl

Component
footer : Ext.Element
Panel底部Element 。只读。此元素被用来容纳Panel的...
Panel底部Element 。只读。

此元素被用来容纳Panel的 buttons 或者 fbar 。

注意: 另请参见 el 的注释。

Panel
header : Ext.Element
Panel的headerElement. 只读。此元素被用来容纳 title和 tools...
Panel的headerElement. 只读。

此元素被用来容纳 title和 tools

注意: 另请参见 el 的注释。

Panel
hidden : Boolean
如果当前组件处于隐藏状态，此值为true。Read-only。
Component
initialConfig : Object
当前组件的初始化配置描述。 Read-only。
Component
items : MixedCollection
当前容器中的子组件集合 Ext.util.MixedCollection
Container
ownerCt : Ext.Container
组件所属的Container (默认为undefined，当前组件被添加到一个容器中时此值被自动设置)...
组件所属的Container (默认为undefined，当前组件被添加到一个容器中时此值被自动设置)。 Read-only。

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

Component
private : Object
我们只能在一块可见的区域进行布局。 布局目标*或者它的任何父元素* 为...
我们只能在一块可见的区域进行布局。 布局目标*或者它的任何父元素* 为display:none， 将意味着它没有一块可见的区域。
Container
refOwner : Ext.Container
如果当前组件是一个容器的孩子，并且是通过一个 ref 配置项被注册的，则此值为 ref 引用被插入到的祖先容器。
如果当前组件是一个容器的孩子，并且是通过一个 ref 配置项被注册的，则此值为 ref 引用被插入到的祖先容器。
Component
rendered : Boolean
如果当前组件已经被渲染了，此值为true。Read-only.
Component

公共方法

Method Defined By
ButtonGroup ( Object config )
Create a new ButtonGroup.
Create a new ButtonGroup.
参数:
  • config : Object
    The config object
返回值:
  • void
ButtonGroup
add ( ...Object/Array component ) : Ext.Component/Array
向当前容器中添加 Component(s)。 描述 :在添加之前触发 beforeadd 事件...

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

描述 :

  • 在添加之前触发 beforeadd 事件
  • 将会相应地应用 容器的default config values (细节参见 defaults )。
  • 在组件添加之后触发 add 事件。

注意 :

  • 当调用 add 时如果容器已经被渲染， 你可能需要调用 doLayout 方法来刷新视图，它将导致所有尚未渲染的子组件进行渲染操作。 此操作是必须的，这样你可以 add 多个子组件而只刷新一次layout。 示例用法:

var tb = new Ext.Toolbar();
tb.render(document.body);  // toolbar is rendered
tb.add({text:'Button 1'}); // add multiple items (defaultType for Toolbar is 'button')
tb.add({text:'Button 2'});
tb.doLayout();             // refresh the layout
  • 警告: 使用BorderLayout布局的容器可能不能删除或者添加组件。 更多细节参见BorderLayout 的注释。
参数:
  • component : ...Object/Array

    需要添加的一个或多个组件，或者是一个组件数组。 更多信息参见 items 。

返回值:
  • Ext.Component/Array
    被添加的组件。
Container
addButton ( String/Object config , Function handler , Object scope ) : Ext.Button
向当前panel中添加一个按钮。注意，此方法必须在渲染之前调用。 首选的方式是通过...
向当前panel中添加一个按钮。注意，此方法必须在渲染之前调用。 首选的方式是通过buttons 配置项添加按钮。
参数:
  • config : String/Object
    一个合法的Ext.Button 配置。字符串将会变成默认按钮配置文本，对象将会被看做一个按钮配置对象。
  • handler : Function
    在按钮Ext.Button.click 时被调用的函数
  • scope : Object
    作用域( this 引用)，按钮处理函数将会在其中被执行。默认为Button.
返回值:
  • Ext.Button
    被添加的按钮
Panel
addClass ( string cls ) : Ext.Component
为组件底层的元素添加CSS样式。
为组件底层的元素添加CSS样式。
参数:
  • cls : string
    需要添加的CSS样式的class名称
返回值:
  • Ext.Component
    this
Component
addEvents( Object|String o, string Optional. ) : void
添加指定的事件到事件列表上，事件会被该Observable触发。
添加指定的事件到事件列表上，事件会被该Observable触发。
参数:
  • o : Object|String
    以事件名作为属性true作为值的对象 或者当多个事件名被分开的传递时则为第一个事件名。
  • Optional. : string
    事件名被分开的传递时则为事件名。 用法:
    this.addEvents('storeloaded', 'storecleared');
返回值:
  • void
Observable
addListener( String eventName, Function handler, [Object scope], [Object options] ) : void
给对象添加事件处理器。
给对象添加事件处理器。
参数:
  • eventName : String
    监听的事件名。
  • handler : Function
    事件调用的方法
  • scope : Object
    （可选）处理方法执行的作用域 (this的引用 reference)。 如果被忽略。默认为触发事件的对象。
  • options : Object
    （可选）包含处理器配置和属性的对象。 可能包含以下的属性:
    • scope : Object
      处理方法执行的作用域(this的引用) 。 如果被忽略。默认为触发事件的对象。
    • delay : Number
      在触发事件后延迟调用处理器的毫秒数。
    • single : Boolean
      如果为True则添加一个处理器来处理下一次的事件触发（仅一次），然后移除自己。
    • buffer : Number
      使得处理器延迟指定毫秒数后预定的运行在 一个Ext.util.DelayedTask中 。 如果事件在时间内再一次被触发，原始的处理器不会被调用，但是新的处理器会预定的在他的位置上。
    • target : Observable
      如果事件在目标的Observable上触发则仅仅调用处理器， 否则 事件会从子类的Observable上冒泡

    组合选项
    使用这些选项参数,可能会组合出不同类型的监听器：

    一个延迟的，一次性的监听器。

    myDataView.on('click', this.onClick, this, {
single: true,
delay: 100
});

    一次调用附加多个处理器
    该方法同样支持传递一个包含指定的多个处理器的属性的配置对象参数。

    myGridPanel.on({
'click' : {
    fn: this.onClick,
    scope: this,
    delay: 100
},
'mouseover' : {
    fn: this.onMouseOver,
    scope: this
},
'mouseout' : {
    fn: this.onMouseOut,
    scope: this
}
});

    或者一个简写的语法：

    myGridPanel.on({
'click' : this.onClick,
'mouseover' : this.onMouseOver,
'mouseout' : this.onMouseOut,
 scope: this
});
返回值:
  • void
Observable
applyToMarkup ( String/HTMLElement el ) : void
将此组件添加到已存在的有效的HTML标签中。 使用该方法时，无需再调用render()方法。
将此组件添加到已存在的有效的HTML标签中。 使用该方法时，无需再调用render()方法。
参数:
  • el : String/HTMLElement
返回值:
  • void
Component
bubble ( Function fn , [ Object scope ], [ Array args ] ) : Ext.Container
沿着component/container继承结构进行冒泡， 在每个组件上调用指定的函数。 所调用函数的作用域...
沿着component/container继承结构进行冒泡， 在每个组件上调用指定的函数。 所调用函数的作用域( this)将会是 指定的作用域或者是当前组件。 如果在函数任何一点上返回false，即停止冒泡过程
参数:
  • fn : Function
    需要调用的函数
  • scope : Object
    (可选) 函数的作用域(默认为当前节点)
  • args : Array
    (可选) 调用函数时需要传递的参数( 默认传递当前组件)
返回值:
  • Ext.Container
    this
Container
cascade ( Function fn , [ Object scope ], [ Array args ] ) : Ext.Container
从当前组件(第一个被调用的组件)开始，沿着component/container的继承树向下回溯...
从当前组件(第一个被调用的组件)开始，沿着component/container的继承树向下回溯， 在每个组件上调用指定的方法， 调用方法时的(this)作用域为指定的scope或者为当前组件。 传递给方法的参数为传递进来args或者当前组件。 在起泡的任意一个节点上，如果function返回false，即停止在那个分支上。
参数:
  • fn : Function
    需要调用的函数
  • scope : Object
    (可选)函数的作用域(默认为当前组件)
  • args : Array
    (可选) 调用函数时传递的参数 (默认传递当前组件)
返回值:
  • Ext.Container
    this
Container
cloneConfig ( Object overrides ) : Ext.Component
默认使用原先传递给当前实例的配置值克隆当前组件。
默认使用原先传递给当前实例的配置值克隆当前组件。
参数:
  • overrides : Object
    一个新的配置项，包含需要覆盖到克隆版本的所有属性。 可以传递一个id参数给此对象，否则将自动生成一个新的id以避免发生重复。
返回值:
  • Ext.Component
    当前组件的克隆副本
Component
collapse ( Boolean animate ) : Ext.Panel
折叠panel的body，这样它就变成隐藏的。 触发beforecollapse 事件...
折叠panel的body，这样它就变成隐藏的。 触发beforecollapse 事件，处理函数返回false可以取消折叠操作。
参数:
  • animate : Boolean
    True将会在变换时使用动画效果，其它为false( 默认为panel的animCollapse 配置项的值)
返回值:
  • Ext.Panel
    this
Panel
destroy () : void
通过如下方法销毁对象：删除所有的事件监听器、将组件的元素从DOM树中删除...
通过如下方法销毁对象：删除所有的事件监听器、将组件的元素从DOM树中删除（如果可以）、 将组件从它的 Ext.Container（如果可用）中删除、 并且将它从Ext.ComponentMgr中 注销。 销毁操作一般由框架自动完成，一般情况下不需要直接调用该方法。
参数:
  • 无。
返回值:
  • void
Component
disable () : Ext.Component
将组件置为无效状态，并出发'disable'事件。
将组件置为无效状态，并出发'disable'事件。
参数:
  • 无。
返回值:
  • Ext.Component
    this
Component
doLayout ( [ Boolean shallow ], [ Boolean force ] ) : Ext.Container
强制容器的布局进行重新计算。 在向一个已经渲染的容器中添加...
强制容器的布局进行重新计算。 在向一个已经渲染的容器中添加一个新的组件， 或者改变子组件的尺寸/位置参数之后，必须调用此函数。
参数:
  • shallow : Boolean
    (可选) 设置为true时将仅仅计算当前组件的布局， 并且让子组件在需要时自动计算布局 (默认为flase，它将递归地调用每个子容器的doLayout方法)
  • force : Boolean
    (可选) 设置为true将强制进行布局，即使项目是隐藏的也进行。
返回值:
  • Ext.Container
    this
Container
enable () : Ext.Component
将组件置为有效状态并触发'enable'事件。
将组件置为有效状态并触发'enable'事件。
参数:
  • 无。
返回值:
  • Ext.Component
    this
Component
enableBubble( String/Array events ) :void
是否现在使得事件会被该Observable触发并调用 this.getBubbleTarget()方法在拥有者的继承树...

是否现在使得事件会被该Observable触发并调用 this.getBubbleTarget()方法在拥有者的继承树中冒泡。Observable的基础类中没有该方法的实现。

该方法一般被Ext.Components用来冒泡事件到拥有者的容器。参看Ext.Component.getBubbleTarget默认的实现 在Ext.Component中返回组件的直接拥有者。但是如果需要的是一个已知的目标，该方法可以被重写来更快的访问需求的目标。

例子:

Ext.override(Ext.form.Field, {
    // 添加方法到Field的initComponent上改变事件为冒泡
    initComponent : Ext.form.Field.prototype.initComponent.createSequence(function() {
        this.enableBubble('change');
    }),

    // 我们知道我们想让Field的事件冒泡到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() {
            // 如果样式被修改标题会变红。
            myForm.header.setStyle('color', 'red');
        }
    }
});
参数:
  • events : String/Array
    冒泡的事件名，或事件名数组
返回值:
  • void
Observable
expand ( Boolean animate ) : Ext.Panel
展开panel的body以便让其变得可见。 触发beforeexpand 事件...
展开panel的body以便让其变得可见。 触发beforeexpand 事件，如果它返回false将会取消展开操作。
参数:
  • animate : Boolean
    True将会在变换过程中使用动画效果，否则为false (默认为panel的 animCollapse 配置项的值)
返回值:
  • Ext.Panel
    this
Panel
find ( String prop , String value ) : Array
根据属性查找当前容器中任何层次上的组件
根据属性查找当前容器中任何层次上的组件
参数:
  • prop : String
  • value : String
返回值:
  • Array
    Ext.Component数组
Container
findBy ( Function fn , [ Object scope ] ) : Array
根据一个自定义的函数，查找当前容器中任意层级上的一个组件。 如果传递的函数返回true...
根据一个自定义的函数，查找当前容器中任意层级上的一个组件。 如果传递的函数返回true，组件将会被包含在结果中。 函数将会被用如下参数(component, this container)进行调用。
参数:
  • fn : Function
    需要调用的函数
  • scope : Object
    可选
返回值:
  • Array
    Ext.Component数组
Container
findById ( String id ) : Ext.Component
通过id查找容器中位于任何层级上的组件
通过id查找容器中位于任何层级上的组件
参数:
  • id : String
返回值:
  • Ext.Component
Container
findByType ( String/Class xtype , [ Boolean shallow ] ) : Array
根据xtype或者类型，查找当前容器中任何层级上的组件
根据xtype或者类型，查找当前容器中任何层级上的组件
参数:
  • xtype : String/Class
    组件的xtype字符串，或者直接是组件的class类型
  • shallow : Boolean
    (可选) 此参数为flase时将检查当前组件是否是指定xtype的后裔 (这是默认情况)，或者设置为true， 将检查当前组件是否直接是指定xtype类型（译者注：即指不按照多态性进行检查）。
返回值:
  • Array
    Ext.Component数组
Container
findParentBy ( Function fn ) : Ext.Container
通过自定义的函数查找当前组件上层任何层次上的容器...
通过自定义的函数查找当前组件上层任何层次上的容器。 如果传递的函数返回true，容器对象将被返回。
参数:
  • fn : Function
    自定义的函数，使用如下参数调用(container,this component)。
返回值:
  • Ext.Container
    自定义函数返回true的第一个容器
Component
findParentByType ( String/Class xtype ) : Ext.Container
通过xtype或者class查找当前组件上层任何层次上的容器
通过xtype或者class查找当前组件上层任何层次上的容器
参数:
  • xtype : String/Class
    组件的xtype字符串，或者直接是组件的class
返回值:
  • Ext.Container
    符合指定xtype或者class的第一个容器
Component
fireEvent( String eventName, Object... args ) : Boolean
用传入的参数触发指定的事件 (减去事件名)。 一个事件可以被设置为冒泡 Obse...

用传入的参数触发指定的事件 (减去事件名)。

一个事件可以被设置为冒泡到Observable父类继承树(参看 Ext.Component.getBubbleTarget) 调用enableBubble实现。

参数:
  • eventName : String
    触发的事件名。
  • args : Object...
    传递给处理器的可变长度参数。
返回值:
  • Boolean
    如果有任何的处理器返回false则返回false，否则返回true。
Observable
focus ( [ Boolean selectText ], [ Boolean/Number delay ] ) : Ext.Component
尝试将当前组件设为焦点。
尝试将当前组件设为焦点。
参数:
  • selectText : Boolean
    (可选) 如果可用，同时选中组件内部的文本
  • delay : Boolean/Number
    (可选)将当前组件设置为焦点的延迟时间(设置为true等于0毫秒)
返回值:
  • Ext.Component
    this
Component
get ( String/Number key ) : Ext.Component
获取当前容器包含的一个组件( items.get(key)方法的别名)
获取当前容器包含的一个组件( items.get(key)方法的别名)
参数:
  • key : String/Number
    组件的索引
返回值:
  • Ext.Component
    Ext.Component
Container
getBottomToolbar () : Ext.Toolbar
返回panel底部区域toolbar ( bbar )。
返回panel底部区域toolbar ( bbar )。
参数:
  • 无。
返回值:
  • Ext.Toolbar
    toolbar
Panel
getBox ( [ Boolean local ] ) : Object
获取组件底层元素当前盒子模型的尺寸。（译者注：盒子模型是CSS术语，详细解释请自行搜索。）
获取组件底层元素当前盒子模型的尺寸。（译者注：盒子模型是CSS术语，详细解释请自行搜索。）
参数:
  • local : Boolean
    (可选)值为true时，组件的left值和top值将代替页面的XY被返回。(默认值为false)
返回值:
  • Object
    返回值的格式{x, y, width, height}
BoxComponent
getBubbleTarget () : Ext.Container
为Observable的fireEvent方法提供链接，它沿着继承结构进行冒泡操作。
为Observable的fireEvent方法提供链接，它沿着继承结构进行冒泡操作。
参数:
  • 无。
返回值:
  • Ext.Container
    拥有当前组件的容器。
Component
getComponent ( String/Number comp ) : Ext.Component
检查当前容器的 items property 并且获取当前容器的一个直接的子组件。
检查当前容器的 items property 并且获取当前容器的一个直接的子组件。
参数:
  • comp : String/Number
    参数可以是以下任何值：
    • 一个 String : 代表子组件的 itemId 或者 id
    • 一个 Number : 代表子组件在 items property 中的位置

    其它信息参见 Ext.util.MixedCollection.get。

返回值:
  • Ext.Component
    组件(如果有找到)。
Container
getEl () : Ext.Element
返回 Ext.Element ，它包装了当前组件。...

返回 Ext.Element ，它包装了当前组件。

通常情况下，这将是一个<DIV>元素，它是由该类的onRender方法创建的， 但是可以使用autoEl配置项 覆盖它。

注意: 此元素将会一直处于无效状态直到当前组件渲染完成。

如需向当前组件的 DOM事件(而不是当前组件自己的Observable事件)添加监听器， 更多建议，参见 listeners 配置项，或者直接使用一个render监听器:

new Ext.Panel({
    title: 'The Clickable Panel',
    listeners: {
        render: function(p) {
            // Append the Panel to the click handler's argument list.
            p.getEl().on('click', handlePanelClick.createDelegate(null, [p], true));
        },
        single: true  // Remove the listener after first invocation
    }
});
参数:
  • 无。
返回值:
  • Ext.Element
    包装当前组件的元素。
Component
getFooterToolbar () : Ext.Toolbar
返回panel底部( fbar )区域的toolbar
返回panel底部( fbar )区域的toolbar
参数:
  • 无。
返回值:
  • Ext.Toolbar
    toolbar
Panel
getFrameHeight () : Number
返回当前panel框架元素的高度像素值 (包括所有top和bottom工具栏以及header和footer元素...
返回当前panel框架元素的高度像素值 (包括所有top和bottom工具栏以及header和footer元素， 但是不包括body高度)。 如需获取body高度，参见 getInnerHeight.
参数:
  • 无。
返回值:
  • Number
    框架高度
Panel
getFrameWidth () : Number
返回当前panel框架元素的宽度像素值 (不包含body宽度)。如需获得body宽度，参见...
返回当前panel框架元素的宽度像素值 (不包含body宽度)。如需获得body宽度，参见 getInnerWidth。
参数:
  • 无。
返回值:
  • Number
    框架宽度
Panel
getHeight () : Number
获取该组件的当前高度值。
获取该组件的当前高度值。
参数:
  • 无。
返回值:
  • Number
BoxComponent
getId () : String
返回当前组件的id，如果没有定义id，则自动生成并返回一个id:'ext-comp-'...
返回当前组件的 id 如果没有定义 id 则自动生成并返回一个 id

'ext-comp-' + (++Ext.Component.AUTO_ID)
参数:
  • 无。
返回值:
  • String
    id
Component
getInnerHeight () : Number
返回body元素的高度像素值(不包括任何框架元素的高度)。 对于框架高度参见...
返回body元素的高度像素值(不包括任何框架元素的高度)。 对于框架高度参见 getFrameHeight。
参数:
  • 无。
返回值:
  • Number
    body高度
Panel
getInnerWidth () : Number
返回body元素宽度像素值(不包含任何框架元素的宽度)。 对于框架宽度，参见 getFrameWidth。
返回body元素宽度像素值(不包含任何框架元素的宽度)。 对于框架宽度，参见 getFrameWidth。
参数:
  • 无。
返回值:
  • Number
    body宽度
Panel
getItemId () : String
返回当前组件的 itemId 。 如果没有通过配置参数指定 itemId 那么，将会使用...
返回当前组件的 itemId 。 如果没有通过配置参数指定 itemId 那么，将会使用 getId 返回 id 。
参数:
  • 无。
返回值:
  • String
Component
getLayout () : ContainerLayout
返回容器当前使用的布局管理器。 如果容器当前没有设置布局管理器， 将会创建一个默认的...
返回容器当前使用的布局管理器。 如果容器当前没有设置布局管理器， 将会创建一个默认的 Ext.layout.ContainerLayout 并被设置为容器的布局管理器。
参数:
  • 无。
返回值:
  • ContainerLayout
    容器的布局管理器
Container
getLayoutTarget () : Ext.Element
返回当前容器中用来包含子组件的元素。提供了一个 可以返回容器的...

返回当前容器中用来包含子组件的元素。

提供了一个 可以返回容器的Element 的实现， 但是，如果容器有更复杂的结构， 可以覆盖此实现以返回 layout 在其中渲染子组件的元素。

参数:
  • 无。
返回值:
  • Ext.Element
    在其中渲染子组件的元素。
Container
getOuterSize () : Object
获取当前组件所在元素的尺寸大小，包括边缘的空白处。
获取当前组件所在元素的尺寸大小，包括边缘的空白处。
参数:
  • 无。
返回值:
  • Object
    一个包含元素大小的对象 {width: (element width + left/right margins), height: (element height + top/bottom margins)}
BoxComponent
getPosition ( [ Boolean local ] ) : Array
获取组件底层元素当前的XY位置。
获取组件底层元素当前的XY位置。
参数:
  • local : Boolean
    (可选)如果为true，将返回元素的left和top值，而不是相对于页面内的 XY。(默认值为 false)
返回值:
  • Array
    元素的XY位置值(例如：[100, 200])
BoxComponent
getResizeEl () : Ext.Element
返回该组件的最外层用来定义这些组件整体大小的Element...

返回该组件的最外层用来定义这些组件整体大小的Element对象。

通常用 getEl 方法将会返回相同的Element对象，但在有些情况下，组件可能有一些更多的封装了它的主要动态Element对象的Element对象。

例如ComboBox。它是封装在一个包含<input>元素的包装元素里(这将返回其 getEl方法和触发按钮的元素)。返回的元素为resizeEl。

参数:
  • 无。
返回值:
  • Ext.Element
    The Element which is to be resized by size managing layouts.
BoxComponent
getSize () : Object
获取组件底层元素当前的大小。
获取组件底层元素当前的大小。
参数:
  • 无。
返回值:
  • Object
    一个包含元素大小的对象{width: (element width), height: (element height)}
BoxComponent
getTool ( String id ) : Object
根据id获取一个tool.
根据id获取一个tool.
参数:
  • id : String
返回值:
  • Object
    tool
Panel
getTopToolbar () : Ext.Toolbar
返回panel顶部区域的 toolbar ( tbar ).
返回panel顶部区域的 toolbar ( tbar ).
参数:
  • 无。
返回值:
  • Ext.Toolbar
    toolbar
Panel
getUpdater () : Ext.Updater
获取当前panel的 Ext.Updater .让你可以为当前panel的body执行Ajax更新。
获取当前panel的 Ext.Updater .让你可以为当前panel的body执行Ajax更新。
参数:
  • 无。
返回值:
  • Ext.Updater
    Updater
Panel
getWidth () : Number
获取该组件的当前宽度值。
获取该组件的当前宽度值。
参数:
  • 无。
返回值:
  • Number
BoxComponent
getXType () : String
获取当前组件的xtype，它是用 Ext.ComponentMgr 注册的。 所有可用的xtype列表，参见...
获取当前组件的xtype，它是用 Ext.ComponentMgr 注册的。 所有可用的xtype列表，参见 Ext.Component 类头部。示例用法:

var t = new Ext.form.TextField();
alert(t.getXType());  // alerts 'textfield'
参数:
  • 无。
返回值:
  • String
    The xtype
Component
getXTypes () : String
返回此组件的xtype继承树，用字符'-'分隔。 所有可用的xtype值...

返回此组件的xtype继承树，用字符'-'分隔。 所有可用的xtype值，请参见Ext.Component 类的头部。

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

示例用法:

var t = new Ext.form.TextField();
alert(t.getXTypes());  // alerts 'component/box/field/textfield'
参数:
  • 无。
返回值:
  • String
    xtype层次字符串
Component
hasListener( String eventName ) : Boolean
检测对象是否包含指定事件的任何监听器
检测对象是否包含指定事件的任何监听器
参数:
  • eventName : String
    检测的事件名
返回值:
  • Boolean
    如果事件被监听则为true，否则为false
Observable
hide () : Ext.Component
隐藏当前组件。 监听 beforehide' 事件并且返回false 可以取消隐藏组件的操作。 在隐藏组件之后触发...
隐藏当前组件。 监听 beforehide' 事件并且返回false 可以取消隐藏组件的操作。 在隐藏组件之后触发 ' hide' 事件。 如果组件被配置成 hidden 那么此方法在内部被调用。
参数:
  • 无。
返回值:
  • Ext.Component
    this
Component
insert ( Number index , Ext.Component component ) : Ext.Component
在当前容器的指定索引处插入一个组件。 在插入之前触发...
在当前容器的指定索引处插入一个组件。 在插入之前触发 beforeadd 事件， 然后在组件被插入之后触发 add 事件。
参数:
  • index : Number
    组件会被插入到容器子项集合中时的索引位置
  • component : Ext.Component
    需要插入的子组件。

    Ext使用懒渲染，只有在必要的时候才会渲染插入的组件。

    如果使用懒渲染，可以传递一个组件配置对象以避免创建一个真实组件的开销， 这意味着，插入的组件不会立即被渲染。 为了利用这个“懒初始化”('lazy instantiation')， 必须把组件设置为它注册的 Ext.Component.xtype 值。

    所有可用的xtype列表，参见 Ext.Component。
返回值:
  • Ext.Component
    使用容器默认配置值插入的组件(或者配置对象)。
Container
isVisible () : Boolean
如果当前组件可见，返回true。
如果当前组件可见，返回true。
参数:
  • 无。
返回值:
  • Boolean
    如果当前组件可见，返回true，其它返回false。
Component
isXType ( String xtype , [ Boolean shallow ] ) : Boolean
Tests whether or not this Component is of a specific xtype. This can test whether this Component is descended from th...

测试此组件是否是指定的xtype。此方法既可以测试是否是指定的xtype的某个子类， 或者它是否直接是指定的xtype类(shallow=true)。

如果使用你自己的子类，必须知道组件必须注册它的xtype值。

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

示例用法:

var t = new Ext.form.TextField();
var isText = t.isXType('textfield');        // true
var isBoxSubclass = t.isXType('box');       // true, descended from BoxComponent
var isBoxInstance = t.isXType('box', true); // false, not a direct BoxComponent instance
参数:
  • xtype : String
    需要为当前组件进行检测的xtype
  • shallow : Boolean
    (可选) 如果为false，检测组件是否是xtype继承树中的某个子类（默认是这种情况）， 如果为true，只检测组件是否是指定的xtype类型。
返回值:
  • Boolean
    如果当前组件是指定xtype的子类，返回true，其它返回flase。
Component
load ( Object/String/Function config ) : Ext.Panel
立即使用XHR返回的内容装载当前panel的内容。
立即使用XHR返回的内容装载当前panel的内容。
参数:
  • config : Object/String/Function
    一个包含任何如下选项的配置对象:
    panel.load({
    url: 'your-url.php',
    params: {param1: 'foo', param2: 'bar'}, // or a URL encoded string
    callback: yourFunction,
    scope: yourObject, // optional scope for the callback
    discardUrl: false,
    nocache: false,
    text: 'Loading...',
    timeout: 30,
    scripts: false
});
    唯一的必须参数是url。 可选的nocache、text和script参数是 disableCaching、indicatorText和loadScripts的快捷方式， 它们被用来设置到当前panel的Updater实例所绑定的 属性上。
返回值:
  • Ext.Panel
    this
Panel
mon ( Observable|Element item , Object|String ename , Function fn , Object scope , Object opt ) : void
向任何Observable对象(或者元素)上添加监听器，监听器将会在组件...

向任何Observable对象(或者元素)上添加监听器，监听器将会在组件销毁时被自动删除。
用法：

myGridPanel.mon(myGridPanel.getSelectionModel(), 'selectionchange', handleSelectionChange, null, {buffer: 50});

or:

myGridPanel.mon(myGridPanel.getSelectionModel(), {
    selectionchange: handleSelectionChange,
    buffer: 50
});
参数:
  • item : Observable|Element
    需要添加listener/listeners的项目。
  • ename : Object|String
    事件名，或者一个包含事件名属性的对象。
  • fn : Function
    (可选) 如果 ename 参数是一个事件名，此参数为处理函数。
  • scope : Object
    (可选)如果 ename 参数是一个事件名称，此参数是作用域 ( this 引用)，监听函数将会在此作用域中被执行。
  • opt : Object
    (可选)如果 ename 参数是一个事件名称， 此参数是 addListener 配置项。
返回值:
  • void
Component
mun ( Observable|Element item , Object|String ename , Function fn , Object scope ) : void
删除通过mon 方法添加的监听器。
删除通过mon 方法添加的监听器。
参数:
  • item : Observable|Element
    需要删除listener/listeners的项目。
  • ename : Object|String
    事件名称，或者一个包含事件名称属性的对象。
  • fn : Function
    (可选)如果 ename 参数是一个事件名称，此参数是一个处理函数。
  • scope : Object
    (可选)如果 ename 参数是一个事件名称，此参数是作用域 ( this 引用)，监听函数将会在此作用域中被执行。
返回值:
  • void
Component
nextSibling () : Ext.Component
返回所属容器中的下一个组件
返回所属容器中的下一个组件
参数:
  • 无。
返回值:
  • Ext.Component
Component
on( String eventName, Function handler, [Object scope], [Object options] ) : void
给对象添加事件处理器 (addListener的简写形式)
给对象添加事件处理器 (addListener的简写形式。)
参数:
  • eventName : String
    监听的事件类型
  • handler : Function
    事件调用的方法
  • scope : Object
    （可选）处理方法执行时的作用域 (this 的引用)。 如果被忽略。默认为触发事件的对象。
  • options : Object
    可选 包含处理器配置的对象。
返回值:
  • void
Observable
previousSibling () : Ext.Component
返回所属容器中的前一个组件
返回所属容器中的前一个组件
参数:
  • 无。
返回值:
  • Ext.Component
Component
purgeListeners() : void
移除对象上所有的监听器
移除对象上所有的监听器
参数:
  • 无。
返回值:
  • void
Observable
relayEvents( Object o, Array events ) : void
从指定的Observable上传递选择的事件就好像被当前对象触发一样。
从指定的Observable上传递选择的事件就好像被当前对象触发一样。
参数:
  • o : Object
    该Observable上的事件被当前对象传递。
  • events : Array
    传递的数组名。
返回值:
  • void
Observable
remove ( Component/String component , [ Boolean autoDestroy ] ) : Ext.Component
从当前容器中移除一个组件。 在移除之前触发 beforeremove 事件， 然后在组件被移除之后触发...
从当前容器中移除一个组件。 在移除之前触发 beforeremove 事件， 然后在组件被移除之后触发 remove 事件。
参数:
  • component : Component/String
    需要移除的组件引用或者id
  • autoDestroy : Boolean
    (可选) 设置为true将自动调用被删组件的 Ext.Component.destroy 函数。 默认为容器的 autoDestroy 配置值。
返回值:
  • Ext.Component
    被移除的组件。
Container
removeAll ( [ Boolean autoDestroy ] ) : Array
从当前容器中删除所有组件。
从当前容器中删除所有组件。
参数:
  • autoDestroy : Boolean
    (可选) 此参数为true时将自动调用 被删组件的 Ext.Component.destroy 方法。 默认为当前容器的 autoDestroy 配置值。
返回值:
  • Array
    被销毁的组件数组
Container
removeClass ( string cls ) : Ext.Component
从组件底层的元素上删除一个CSS类。
从组件底层的元素上删除一个CSS类。
参数:
  • cls : string
    需要移除的CSS类名
返回值:
  • Ext.Component
    this
Component
removeListener( String eventName, Function handler, [Object scope] ) : void
删除一个事件处理器。
删除一个事件处理器。
参数:
  • eventName : String
    处理器关联的事件类型。
  • handler : Function
    移除的处理器。 这应该是传递到addListener里的方法的引用。
  • scope : Object
    （可选）处理器指定的初始作用域。
返回值:
  • void
Observable
render ( [ Element/HTMLElement/String container ], [ String/Number position ] ) : void
在传递进来的HTML元素中渲染当前组件。...

在传递进来的HTML元素中渲染当前组件。

如果你正在使用一个Container 对象放置当前组件，那么请不要使用render方法。

当容器第一次被渲染时，它的子组件将会被容器的 layout 管理器渲染。

某些布局管理器允许动态添加子组件。它们包括 Ext.layout.CardLayout, Ext.layout.AnchorLayout, Ext.layout.FormLayout, Ext.layout.TableLayout。

当一个新的子组件被添加时，如果容器已经被渲染了， 你可能需要调用容器的 doLayout 方法来刷新视图，它将导致所有没有被渲染的子组件进行渲染操作。 此操作是必须的，这样你可以添加多个子组件而只刷新一次layout。

当创建复杂的UI时，非常重要的一点是，请记住调整子项目的尺寸和位置是容器的 layout 管理器的职责。 如果你希望子项目的尺寸对用户交互作出反应， 你必须为容器配置一个布局管理器，它将创建和管理你心里想要的那种布局。

忽略容器的layout 配置意味着将会使用一个基本的布局管理器，它除了按次序把子组件 渲染到容器中之外什么事情都不做。 这种情况下，任何尺寸和位置的调整操作都不会发生。

参数:
  • container : Element/HTMLElement/String
    (可选) 需要在其中渲染当前组件的元素。 如果它是从一个已存在的标签中创建的，此参数应该被忽略。
  • position : String/Number
    (可选) 容器中的一个元素ID或者一个DOM节点索引， 当前组件将会被插入到它前面 (默认append到容器的尾部)
返回值:
  • void
Component
resumeEvents() : void
重新开始触发事件。(参见suspendEvents) 如果事件以queueSuspended参数被挂起，则在事件被挂起时 ...
重新开始触发事件。(参见 suspendEvents) 如果事件以queueSuspended 参数被挂起，则在事件被挂起时触发的事件会被传递到所有的监听器上
参数:
  • 无。
返回值:
  • void
Observable
setAutoScroll ( Boolean scroll ) : Ext.BoxComponent
设置该组件内容溢出时是否自动显示滚动条。
设置该组件内容溢出时是否自动显示滚动条。
参数:
  • scroll : Boolean
    值为true的话组件自动显示滚动条。
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setDisabled ( Boolean disabled ) : Ext.Component
工具函数，使用布尔值设置有效/无效(disabled/enabled )。
工具函数，使用布尔值设置有效/无效(disabled/enabled )。
参数:
  • disabled : Boolean
返回值:
  • Ext.Component
    this
Component
setHeight ( Mixed height ) : Ext.BoxComponent
设置此组件的高度。该方法将触发resize事件。
设置此组件的高度。该方法将触发resize事件。
参数:
  • height : Mixed
    The new height to set.
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setIconClass ( String cls ) : void
设置CSS类，为当前panel提供图标图片。 如果已经设置了...
设置CSS类，为当前panel提供图标图片。 如果已经设置了，此方法将会替换任何现有的图标类并在完成之后触发 iconchange 事件。
参数:
  • cls : String
    新的CSS类名
返回值:
  • void
Panel
setPagePosition ( Number x , Number y ) : Ext.BoxComponent
设置组件在页面中的XY位置。 如果需要设置left和top值 ，请使用...
设置组件在页面中的XY位置。 如果需要设置left和top值 ，请使用setPosition方法。 该方法触发move事件。
参数:
  • x : Number
    The new x position
  • y : Number
    The new y position
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setPosition ( Number left , Number top ) : Ext.BoxComponent
设置组件的left和top值。设置组件的页面XY值，请使用setPagePosition方法。该方法触发...
设置组件的left和top值。设置组件的页面XY值，请使用setPagePosition方法。该方法触发move事件。
参数:
  • left : Number
    The new left
  • top : Number
    The new top
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setSize ( Mixed width , Mixed height ) : Ext.BoxComponent
设置BoxComponent的宽度和高度。 此方法触发resize事件...
设置BoxComponent的宽度和高度。 此方法触发resize事件。此方法可以接收单独的width或者height值作为参数， 或者你可以传递像这样的一个size对象： {width:10, height:20} 。
参数:
  • width : Mixed
    设置的新的width值。这可以是：
    • 一个Number类型指定Element新的宽度 Ext.Element.defaultUnit(默认为像素 :'px')。
    • 一个String类型用于设置width的CSS样式。
    • 一个size对象格式为 {width: widthValue, height: heightValue} 。
    • 值为 undefined 时，保留原来的width不变。
  • height : Mixed
    设置的新的height值(如果第一个参数传递了一个size对象，此参数没有必要传递)。这可以是：
    • 一个Number类型指定Element新的高度 Ext.Element.defaultUnit(默认为像素 :'px')。
    • 一个String类型用于设置height的CSS样式。也有可能不会被使用到。
    • 值为 undefined 时，保留原来的height不变。
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setTitle ( String title , [ String iconCls ] ) : void
为panel设置标题文本，也可选择设置 icon class。...

为panel设置标题文本，也可选择设置 icon class。

为了能够设置标题，必须已经为Panel创建了一个header元素。 要么通过向Panel上注册一个非空的 title ，或者配置 header: true ，可触发此操作(译者注：指为Panel创建header元素)。

参数:
  • title : String
    需要设置的标题文本
  • iconCls : String
    (可选) iconCls 一个用户定义的CSS类，为当前panel提供图标图片。
返回值:
  • void
Panel
setVisible ( Boolean visible ) : Ext.Component
工具方法，通过使用布尔值隐藏或者显示当前组件。
工具方法，通过使用布尔值隐藏或者显示当前组件。
参数:
  • visible : Boolean
    true时显示，false时隐藏
返回值:
  • Ext.Component
    this
Component
setWidth ( Mixed width ) : Ext.BoxComponent
设置组件的宽度。 此方法触发resize事件。
设置组件的宽度。 此方法触发resize事件。
参数:
  • width : Mixed
    The new width to set.
返回值:
  • Ext.BoxComponent
    this
BoxComponent
show () : Ext.Component
显示当前组件。监听' beforeshow' 事件，返回 false 取消显示组件...
显示当前组件。监听' beforeshow' 事件，返回 false 取消显示组件。在显示组件之后触发' show' 事件。
参数:
  • 无。
返回值:
  • Ext.Component
    this
Component
suspendEvents( Boolean queueSuspended ) : void
暂停触发所有的事件。 (参看resumeEvents)
暂停触发所有的事件。（参看 resumeEvents)
参数:
  • queueSuspended : Boolean
    如果传递为true则排列好暂停的事件使得在调用 resumeEvents 后再触发它们，而不是抛弃所有暂停的事件。
返回值:
  • void
Observable
syncSize () : Ext.BoxComponent
强制组件的大小按照此组件底层元素当前的高度和宽度计算。
强制组件的大小按照此组件底层元素当前的高度和宽度计算。
参数:
  • 无。
返回值:
  • Ext.BoxComponent
    this
BoxComponent
toggleCollapse ( Boolean animate ) : Ext.Panel
根据panel的当前状态，执行expand或者 collapse操作 的快捷方式。
根据panel的当前状态，执行expand或者 collapse操作 的快捷方式。
参数:
  • animate : Boolean
    True将会在转换过程中使用动画效果，否则为false (默认为panel的animCollapse 配置项的值)
返回值:
  • Ext.Panel
    this
Panel
un( String eventName, Function handler, [Object scope] ) : void
删除一个事件处理器(removeListener方法的简写形式)
删除一个事件处理器(removeListener方法的简写形式。)
参数:
  • eventName : String
    处理器关联的事件类型
  • handler : Function
    被删除的处理器 这应该是传入 addListener 中的方法的引用。
  • scope : Object
    （可选）为处理器指定的初始作用域。
返回值:
  • void
Observable
update ( Mixed htmlOrData , [ Boolean loadScripts ], [ Function callback ] ) : void
刷新组件的内部区域。
刷新组件的内部区域。
参数:
  • htmlOrData : Mixed
    如果已经通过tpl为当前组件配置了一个模板，那么 将会使用此参数来装配模板。 如果没有为当前组件配置模板，组件的内容区域将会通过Ext.Element 进行刷新。
  • loadScripts : Boolean
    (可选)只用在使用html配置时此参数才合法。默认为false。
  • callback : Function
    (可选)只用在使用html配置时此参数才合法。 当脚本加载完成时回调函数才被执行。
返回值:
  • void
Component
updateBox ( Object box ) : Ext.BoxComponent
设置此组件底层元素的盒子模型尺寸。(译者注：盒子模型是CSS术语，详细资料请自行搜索。)
设置此组件底层元素的盒子模型尺寸。(译者注：盒子模型是CSS术语，详细资料请自行搜索。)
参数:
  • box : Object
    一个格式为{x, y, width, height}的对象
返回值:
  • Ext.BoxComponent
    this
BoxComponent

公共事件

Event Defined By
activate : ( Ext.Panel p )
当Panel被设置为视觉活动状态之后触发。 注意Panel不直接支持活动状体，但是Panel的一些子类...
当Panel被设置为视觉活动状态之后触发。 注意Panel不直接支持活动状体，但是Panel的一些子类 (例如 Ext.Window)支持。 作为TabPanel子组件的Panel，在TabPanel的控制之下触发activate和deactivate事件。
监听器将会以如下参数格式被调用:
  • p : Ext.Panel
    被激活的Panel.
Panel
add : ( Ext.Container this , Ext.Component component , Number index )
监听器将会被使用如下的参数被调用:
  • this : Ext.Container
  • component : Ext.Component
    被添加的组件
  • index : Number
    将组件添加到容器子组件集合时的位置索引
Container
added : ( Ext.Component this , Ext.Container ownerCt , number index )
当一个组件被添加到一个Ext.Container时触发
当一个组件被添加到一个Ext.Container时触发
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • ownerCt : Ext.Container
    用于组件的容器
  • index : number
    添加组件的位置
Component
afterlayout : ( Ext.Container this , ContainerLayout layout )
当容器中的组件被指定的布局管理器排列的时候触发。
当容器中的组件被指定的布局管理器排列的时候触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Container
  • layout : ContainerLayout
    为当前容器提供的ContainerLayout实现
Container
afterrender : ( Ext.Component this )
在组件渲染完成之后触发...

在组件渲染完成之后触发。

afterrender事件在当前组件被rendered 结束之后、在为组件定义的所有afterRender方法执行之后 触发，并且，如果有stateful， 也在状态被保存之后才触发。

监听器将会以如下参数格式被调用:
  • this : Ext.Component
Component
beforeadd : ( Ext.Container this , Ext.Component component , Number index )
在任何 Ext.Component 被添加或者插入到容器中之前触发。 事件处理器可以返回false取消添加操作。
在任何 Ext.Component 被添加或者插入到容器中之前触发。 事件处理器可以返回false取消添加操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Container
  • component : Ext.Component
    被添加的组件
  • index : Number
    组件被添加到容器子项目集合中时的索引位置
Container
beforeclose : ( Ext.Panel p )
在Panel被关闭之前触发。 注意，Panel不直接支持关闭操作，但是Panel的一些子类(例如...
在Panel被关闭之前触发。 注意，Panel不直接支持关闭操作，但是Panel的一些子类(例如 Ext.Window) ，或者一个位于Ext.TabPanel中的Panel支持。 此事件仅被应用到这些子类中。处理函数可以返回false以取消关闭操作。
监听器将会以如下参数格式被调用:
  • p : Ext.Panel
    正在被关闭的Panel.
Panel
beforecollapse : ( Ext.Panel p , Boolean animate )
在Panel被折叠之前触发。监听器可以返回false取消折叠。
在Panel被折叠之前触发。监听器可以返回false取消折叠。
监听器将会以如下参数格式被调用:
  • p : Ext.Panel
    被折叠的Panel
  • animate : Boolean
    如果折叠操作使用了动画效果，此参数为true，其它为false
Panel
beforedestroy : ( Ext.Component this )
在组件 destroyed 之前触发。 在事件监听器中返回false以停止 destroy 操作。
在组件 destroyed 之前触发。 在事件监听器中返回false以停止 destroy 操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforeexpand : ( Ext.Panel p , Boolean animate )
在Panel被展开之前触发。监听器可以返回false取消展开操作。
在Panel被展开之前触发。监听器可以返回false取消展开操作。
监听器将会以如下参数格式被调用:
  • p : Ext.Panel
    被展开的Panel
  • animate : Boolean
    如果展开操作使用动画效果，为true，其它为false
Panel
beforehide : ( Ext.Component this )
在调用hide方法隐藏组件之前触发。 在事件监听器中返回false可以停止隐藏操作。
在调用hide方法隐藏组件之前触发。 在事件监听器中返回false可以停止隐藏操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforeremove : ( Ext.Container this , Ext.Component component )
从容器中删除任何Ext.Component 之前触发。 处理器可以返回false取消remove操作。
从容器中删除任何Ext.Component 之前触发。 处理器可以返回false取消remove操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Container
  • component : Ext.Component
    被删除的组件
Container
beforerender : ( Ext.Component this )
在组件被rendered 之前触发。 在事件监听器中返回false可以停止render 操作。
在组件被rendered 之前触发。 在事件监听器中返回false可以停止render 操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforeshow : ( Ext.Component this )
在调用show()方法现实组件之前触发。 事件处理函数返回false可以停止show。
在调用show 方法现实组件之前触发。 事件处理函数返回false可以停止show。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforestaterestore : ( Ext.Component this , Object state )
在组件状态恢复之前触发。返回false停止恢复状态操作。
在组件状态恢复之前触发。返回false停止恢复状态操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    StateProvider返回的状态哈希值。 如果没有禁止此事件，那么状态对象会被传递给applyState。 默认情况下，这样简单地把属性值拷贝到当前组件中。 可以覆盖此方法以提供自定的状态恢复操作。
Component
beforestatesave : ( Ext.Component this , Object state )
在组件状态被保存到配置的状态提供者之前触发。 返回false可以停止保存。
在组件状态被保存到配置的状态提供者之前触发。 返回false可以停止保存。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    状态值哈希。 这由在组件上调用getState() 方法决定。 此方法必须由开发者提供，返回是否需要对状态进行描述，默认情况下， Ext.Component有一个空实现。
Component
bodyresize : ( Ext.Panel p , Number width , Number height )
在Panel被调整尺寸之后触发。
在Panel被调整尺寸之后触发。
监听器将会以如下参数格式被调用:
  • p : Ext.Panel
    被调整尺寸的Panel
  • width : Number
    Panel body的新宽度。
  • height : Number
    Panel body的新高度。
Panel
close : ( Ext.Panel p )
在Panel被关闭之后触发。注意，Panel不直接提供关闭操作， 但是Panel的一些子类(例如...
在Panel被关闭之后触发。注意，Panel不直接提供关闭操作， 但是Panel的一些子类(例如 Ext.Window) ，或者处于Ext.TabPanel中的Panel支持。
监听器将会以如下参数格式被调用:
  • p : Ext.Panel
    被关闭的Panel.
Panel
collapse : ( Ext.Panel p )
在Panel被折叠后触发。
在Panel被折叠后触发。
监听器将会以如下参数格式被调用:
  • p : Ext.Panel
    被折叠的Panel
Panel
deactivate : ( Ext.Panel p )
在Panel被视觉上失去活动状态之后触发。 注意，Panel不直接支持此操作，但是Panel的一些子类...
在Panel被视觉上失去活动状态之后触发。 注意，Panel不直接支持此操作，但是Panel的一些子类 (例如Ext.Window)支持。 作为TabPanel的子组件的Panel将会在TabPanel的控制之下触发activate 和deactivate事件。
监听器将会以如下参数格式被调用:
  • p : Ext.Panel
    失去活动状态的Panel
Panel
destroy : ( Ext.Component this )
在组件被销毁之后触发。
在组件被destroyed之后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
disable : ( Ext.Component this )
在组件被设置为无效状态后触发。
在组件被设置为无效状态后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
enable : ( Ext.Component this )
当组件被设置为有效(enabled)之后触发。
当组件被设置为有效(enabled)之后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
expand : ( Ext.Panel p )
当Panel已经展开之后触发。
当Panel已经展开之后触发。
监听器将会以如下参数格式被调用:
  • p : Ext.Panel
    已经被展开的Panel.
Panel
hide : ( Ext.Component this )
在组件被隐藏之后触发。 当调用hide 方法隐藏组件之后触发。
在组件被隐藏之后触发。 当调用hide 方法隐藏组件之后触发。
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
iconchange : ( Ext.Panel p , String The , String The )
当Panel的图标被set或者 changed 之后触发。
当Panel的图标被set或者 changed 之后触发。
监听器将会以如下参数格式被调用:
  • p : Ext.Panel
    icon class被变化的Panel
  • The : String
    新icon类
  • The : String
    旧icon类
Panel
move : ( Ext.Component this , Number x , Number y )
在组件移动之后触发。
在组件移动之后触发。
监听器将会用如下的参数格式来调用:
  • this : Ext.Component
  • x : Number
    The new x position
  • y : Number
    The new y position
BoxComponent
remove : ( Ext.Container this , Ext.Component component )
监听器将会以如下的参数格式被调用:
  • this : Ext.Container
  • component : Ext.Component
    被删除的组件
Container
removed : ( Ext.Component this , Ext.Container ownerCt )
当一个组件被从Ext.Container容器中删除时触发
当一个组件被从Ext.Container容器中删除时触发
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • ownerCt : Ext.Container
    持有组件的容器
Component
render : ( Ext.Component this )
在组件被渲染之后触发。
在组件被 rendered(渲染) 之后触发。
监听器将以如下的参数格式被调用:
  • this : Ext.Component
Component
resize : ( Ext.Component this , Number adjWidth , Number adjHeight , Number rawWidth , Number rawHeight )
在组件被调整大小之后触发。
在组件被调整大小之后触发。
监听器将以如下的参数格式被调用:
  • this : Ext.Component
  • adjWidth : Number
    这是width调整后的值
  • adjHeight : Number
    这是height调整后的值
  • rawWidth : Number
    这是width原来的值
  • rawHeight : Number
    这是height原来的值
BoxComponent
show : ( Ext.Component this )
在调用show 方法显示组件之后触发。
在调用show 方法显示组件之后触发。
监听器将会用如下的参数格式被调用:
  • this : Ext.Component
Component
staterestore : ( Ext.Component this , Object state )
组件状态被存储之后触发。
组件状态被存储之后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    StateProvider返回的状态哈希值。 如果没有禁止此事件，那么状态对象会被传递给applyState。 默认情况下，这样简单地把属性值拷贝到当前组件中。 可以覆盖此方法以提供自定的状态恢复操作。
Component
statesave : ( Ext.Component this , Object state )
在组件状态被保存到所配置的状态提供者之后触发。
在组件状态被保存到所配置的状态提供者之后触发。
监听器将会用如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    状态值hash。 这是由在足见上调用getState() 方法决定的。 开发者必须提供此方法以返回是否需要恢复状态，默认情况下， Ext.Component有一个空实现。
Component
titlechange : ( Ext.Panel p , String The )
在Panel的标题被set或者 changed 之后触发。
在Panel的标题被set或者 changed 之后触发。
监听器将会以如下参数格式被调用:
  • p : Ext.Panel
    标题被改变的Panel.
  • The : String
    新的标题。
Panel


Class Ext.chart.Axis

包: | Ext.chart
定义类的文件: | Chart.js
类: | Axis
子类: | CategoryAxis, NumericAxis, TimeAxis
继承自: | Object
定义一张（笛卡尔积）图的横（纵）坐标

公共属性

Property |  | Defined By
 | hideOverlappingLabels : Boolean 如果为true，坐标轴上，与之前标签重叠的标签将被隐藏。 | Axis
 | labelFunction : String 一个全局函数的字符串引用。用来定义坐标轴上每个标签的值。 | Axis
 | labelSpacing : Number 坐标轴上，以像素（pixel）为单位的标签间距。 | Axis
 | orientation : String 定义坐标方向。可选值为“horizontal”（水平方向）或者“vertical”（垂直方向）。 | Axis
 | reverse : Boolean 如果为true，坐标轴上的元素将以相反方向渲染。 | Axis
 | type : String 坐标轴的种类。 | Axis

公共方法

该类没有公共方法。

公共事件

该类没有公共事件。


Observable
    Component
      BoxComponent
        FlashComponent
          Chart
            CartesianChart
              BarChart

Class Ext.chart.BarChart

包: | Ext.chart
定义类的文件: | Chart.js
类: | BarChart
继承自: | CartesianChart

配置项

Config Options Defined By
allowDomMove : Boolean
在渲染时组件是否可以移动Dom节点(默认为true)。
Component
anchor : String
注: 这个配置只用于该组件被包含在一个已使用AnchorLayout...

注: 这个配置只用于该组件被包含在一个已使用 AnchorLayout (或者其子类)配置的Container时。 基于布局管理器，例如：

  • Ext.form.FormPanel
  • 指定 layout: 'anchor' // or 'form', or 'absolute'

参见 Ext.layout.AnchorLayout. anchor 。

BoxComponent
applyTo : Mixed
指定一个元素的id、一个DOM元素或者一个已经存在并被渲染到DIV中的元素，此DIV已经被...

指定一个元素的id、一个DOM元素或者一个已经存在并被渲染到DIV中的元素，此DIV已经被 渲染到document中，并且为当前组件指定了一些结构化的标签。

  • 描述 :
      当使用了 applyTo， 在主元素中也可以用id或者CSS类名来指定组件的托管部分， 并且，如果可以的话，创建的组件可能也会试图在那个标签中创建它的子组件。
  • 注意 :
      当使用此配置项时，无需调用render()方法。
      如果指定了applyTo属性，任何传递给 renderTo 的值都会被忽略，并且目标元素的父节点将会自动被用作组件的容器。
Component
autoEl : Mixed
一个表签名或者一个 DomHelper 描述，用来创建 Element ，它将封装当前组件...

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

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

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

{
    xtype: 'box',
    autoEl: {
        tag: 'img',
        src: 'http://www.example.com/example.jpg'

    }
}, {
    xtype: 'box',
    autoEl: {
        tag: 'blockquote',
        html: 'autoEl is cool!'
    }
}, {
    xtype: 'container',
    autoEl: 'ul',
    cls: 'ux-unordered-list',
    items: {
        xtype: 'box',
        autoEl: 'li',
        html: 'First list item'
    }
}
Component
autoHeight : Boolean
如果值为true，height配置项为'auto'，否则值为false的话使用固定的高度...

如果值为true，height配置项为'auto'，否则值为false的话使用固定的高度， 或者可以由其父类容器 layout manager来控制。(默认值为 false)。

注: 虽然很多组件继承了这个配置选项，但不是所有这些组件的自适应高度配置都会像期望的那样起作用。 设置autoHeight：值为true时，浏览器将根据元素的内容自动设置高度，这将意味着Ext不会去管理高度。

如果是由浏览器来管理高度，需要注意的是，通过浏览器进行调整的结构组件内不能被发现， 因此宽度的变化可能导致需要进行同步处理元素的高度。 例如：

var w = new Ext.Window({
    title: 'Window',
    width: 600,
    autoHeight: true,
    items: {
        title: 'Collapse Me',
        height: 400,
        collapsible: true,
        border: false,
        listeners: {
            beforecollapse: function() {
                w.el.shadow.hide();
            },
            beforeexpand: function() {
                w.el.shadow.hide();
            },
            collapse: function() {
                w.syncShadow();
            },
            expand: function() {
                w.syncShadow();
            }
        }
    }
}).show();
BoxComponent
autoScroll : Boolean
如果值为true，将会在该元素上使用overflow:'auto'配置，并且在必要的时候...
如果值为true，将会在该元素上使用overflow:'auto'配置，并且在必要的时候自动显示滚动条，否则，溢出部分的组件都会被切除(默认值为 false)。
BoxComponent
autoShow : Boolean
如果组件需要检测隐藏CSS属性(如 'x-hidden' 或者 'x-hide-display')并且在渲染时删除...
如果组件需要检测隐藏CSS属性(如 'x-hidden' 或者 'x-hide-display')并且在渲染时删除它们 (默认为false)，设置此值为true。
Component
autoWidth : Boolean
如果为true，使用width:'auto'配置，否则使用固定的宽度...

如果为true，使用width:'auto'配置，否则使用固定的宽度，或者可以由其父类容器的layout manager来控制。(默认值为 false)。

注: 虽然很多组件继承了这个配置选项，但不是所有这些组件的自适应宽度配置都会像期望的那样起作用。 设置autoWidth：值为true时，浏览器将根据元素的内容自动设置宽度，这将意味着Ext不会去管理宽度。

如果是由浏览器来管理宽度，需要注意的是，通过浏览器进行调整的结构组件内不能被发现，因此宽度的变化可能导致需要进行同步处理元素的宽度。 例如，在这个元素的目标是：

<div id='grid-container' style='margin-left:25%;width:50%'></div>
当浏览器窗口改变时，渲染后的Panel必须监听浏览器窗口大小的变化，以便通知子项，浏览器改变了其宽度：

var myPanel = new Ext.Panel({
    renderTo: 'grid-container',
    monitorResize: true, // relay on browser resize
    title: 'Panel',
    height: 400,
    autoWidth: true,
    layout: 'hbox',
    layoutConfig: {
        align: 'stretch'
    },
    defaults: {
        flex: 1
    },
    items: [{
        title: 'Box 1',
    }, {
        title: 'Box 2'
    }, {
        title: 'Box 3'
    }],
});
BoxComponent
backgroundColor : String
chart的背景颜色。默认为 '#ffffff'。
FlashComponent
boxMaxHeight : Number
设置组件的最大高度值...

设置组件的最大高度值。

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

BoxComponent
boxMaxWidth : Number
设置组件的最大宽度值...

设置组件的最大宽度值。

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

BoxComponent
boxMinHeight : Number
设置组件的最小高度值...

设置组件的最小高度值。

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

BoxComponent
boxMinWidth : Number
设置组件的最小宽度值...

设置组件的最小宽度值。

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

BoxComponent
bubbleEvents : Array
一个事件数组，当这些事件被触发时，将会被冒泡到所有父容器中。参见....

一个事件数组，当这些事件被触发时，将会被冒泡到所有父容器中。参见 Ext.util.Observable.enableBubble。 默认为 []。

Component
chartStyle : Object
设置图表样式。由于本身包含默认样式，所以修改这个属性将会覆盖内置...
设置图表样式。由于本身包含默认样式，所以修改这个属性将会覆盖内置样式。 使用 extraStyle 来为默认样式附加自定义样式。
Chart
clearCls : String
应用到特殊的clearing div的CSS类， 这个clearing div直接渲染到每个form field的包装器后面...

应用到特殊的clearing div的CSS类， 这个clearing div直接渲染到每个form field的包装器后面，以提供 清除field的功能(默认为 'x-form-clear-left')。

注意: 只有在当前组件被渲染到一个使用FormLayout 布局(例如 Ext.form.FormPanel 或者指定 layout:'form')的 容器中、或者是指定了一个fieldLabel 、或者指定isFormField=true 时此配置才有效。

另请参见 Ext.layout.FormLayout. fieldTpl。

Component
cls : String
一个可选的额外CSS类，它将被添加到当前组件的元素上(默认为'')...
一个可选的额外CSS类，它将被添加到当前组件的元素上(默认为'')。 此属性对于在组件上，或者它的任何使用标准CSS规则的孩子节点上， 添加定制的样式非常有用。
Component
contentEl : String
(可选)指定一个已存在的HTML元素，或者一个已存在HTML元素的...

(可选)指定一个已存在的HTML元素，或者一个已存在HTML元素的 id ，它们将被用作当前组件的内容。

  • 描述 :
    此配置选项被用来将一个已存在的HTML元素 插入到一个新组件(在组件渲染之后它简单地移动DOM元素) 的layout元素中，使它成为该组件的内容。
  • 注意 :
    指定的HTML元素将被append到组件的layout元素中， 在所有配置的 HTML 被插入之后， 并且，这样的话，在render事件 被触发时，document中将不再包含此元素。
    指定的HTML元素将不会参与组件所有可能使用的 layout 过程(译者注：指这些HTML元素 不会参与布局操作)。 它仅是HTML而已。布局操作实在孩子 items 上进行的。
    添加 x-hidden 或者 x-hide-display CSS类，以防在内容渲染到panel时发生闪烁。
Component
ctCls : String
一个可选的外部CSS样式，添加到这个组件的容器(默认值为 '')。 这个方法对于使用标准的CSS规则...

一个可选的外部CSS样式，添加到这个组件的容器(默认值为 '')。 这个方法对于使用标准的CSS规则，为组件或它的任何一个子组件添加特定的样式非常有用。 参见 Ext.layout.ContainerLayout和 extraCls 。

注意: ctCls 默认为 ''期望如下的类，它们将指定一个默认值:

  • Box Layout : 'x-box-layout-ct'
使用一个额外的CSS类配置以上的Class，它是append到默认对象上的。例如， 对于BoxLayout (Hbox and Vbox):
                                ctCls: 'x-box-layout-ct custom-class'

Component
data : Mixed
初始化数据集，它将被应用到 tpl 上以刷新组件的内容区域。
Component
disableCaching : Boolean
如果为true，则在图表url末端附加禁止缓存的字符参数，在Opera和IE下默认为true。
Chart
disabled : Boolean
当前组件处于无效状态时为true。 Read-only.
Component
disabledClass : String
当组件处于无效状态时添加到组件上的CSS类(默认为 'x-item-disabled')。
Component
expressInstall : Boolean
如果没有安装flash，设置为true将会提示用户进行安装。 注意，此参数会使用Ext.FlashComponent.EXPRESS_INSTALL_URL...
如果没有安装flash，设置为true将会提示用户进行安装。 注意，此参数会使用Ext.FlashComponent.EXPRESS_INSTALL_URL 此值应该设置为一个本地资源，默认为 false。
FlashComponent
extraStyle : Object
包含可能覆盖或者追加到默认样式的额外样式。默认为null，想要查看详细列表，请...
包含可能覆盖或者追加到默认样式的额外样式。默认为null，想要查看详细列表，请访问YUI图表站点 http://developer.yahoo.com/yui/charts/#basicstyles
如下列出一些常用样式:
  • padding - 图表内容边缘的空间，padding属性不会增加图表大小。
  • animationEnabled - 布尔值，用来指定标记动画是否启用，默认启用。
  • font - 用来定义图表字体样式的对象。默认为 { name: 'Tahoma', color: 0x444444, size: 11 }
    • name - 字体名称
    • color - 字体颜色 (十六进制编码, 如: "#ff0000", "ff0000" 或 0xff0000)
    • size - 以point（点）为单位的字体大小 (只能为整数, 如: 11)
    • bold - boolean
    • italic - boolean
    • underline - boolean
  • border - 定义图表边框的样式。图表会缩小尺寸以适应边框宽度。
    • color - 边框颜色 (十六进制编码, 如: "#ff0000", "ff0000" 或 0xff0000)
    • size - 以像素为单位的边框宽度 (只能为整数, 如: 1)
  • background - 定义图表背景样式的对象。
    • color - 边框颜色 (十六进制编码， 如: "#ff0000", "ff0000" 或 0xff0000)
    • image - 图片的URL，路径可以相对于当前页面，也可为绝对路径。
  • legend - 定义图例说明样式的对象
    • display - 图例说明的位置。 可选值为 "none", "left", "right", "top", 和 "bottom".
    • spacing - 图片的URL，路径可以相对于当前页面，也可为绝对路径。
    • padding, border, background, font - 见上面同名项。
  • dataTip - 定义数据提示样式的对象。 (tooltip).
    • padding, border, background, font - 见上面同名项。
  • xAxis 和 yAxis - 定义横纵坐标（x/y轴）样式的对象。
    • color - 见上面同名项。
    • size - 见上面同名项。
    • showLabels - boolean
    • labelRotation - 可选值范围从-90°到90°，默认为0。
  • majorGridLines 和 minorGridLines - 定义网格线条样式的对象。
    • color, size - 见上面同名项。
  • zeroGridLine - 定义零网格线样式的对象。
    • color, size - 见上面同名项。
  • majorTicks 和 minorTicks - 定义图表中刻度样式的对象。
    • color, size - 见上面同名项。
    • length - 从坐标轴上延伸的刻度的长度。
    • display - 刻度的显示方式，可选值为 "none", "inside", "outside", 和 "cross".
Chart
fieldLabel : String
紧靠此field显示的标签文本(默认值为 '')。注意...

紧靠此field显示的标签文本(默认值为 '')。

注意:只有在当前组件被渲染到一个使用FormLayout 的容器中时，此配置才有效。 (例如 Ext.form.FormPanel 或 指定 layout:'form')。

另请参见 hideLabel 、 Ext.layout.FormLayout和 fieldTpl。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Name'
    }]
});
Component
flashParams : Object
作为参数传递给flash对象的键值对集合。可能的参数可以在这里找到: http://kb2.adobe.com/cps/127/tn_12701.html默认为...
作为参数传递给flash对象的键值对集合。可能的参数可以在这里找到: http://kb2.adobe.com/cps/127/tn_12701.html默认为 undefined。
FlashComponent
flashVars : Object
作为flash变量传递给flash对象的键值对集合。 默认为 undefined。
FlashComponent
flashVersion : String
显示flash内容所需的flash版本。默认为 '9.0.115'。
FlashComponent
flex : Number
注: 这个配置只用于该组件被包含在一个已使用BoxLayout配置的Container中时...

注: 这个配置只用于该组件被包含在一个已使用BoxLayout配置的Container中时。通过计算每一个子组件的flex值所占全部flex值之和的比例，来决定子组件的宽(HBoxLayout)高(VBoxlayout)。 任何子项的 flex = 0 或 flex = undefined 将不被设置(初始值大小将不被改变)。

BoxComponent
height : Number
组件的高度(默认值为 auto)。注:如果想使用百分比的方式...
组件的高度(默认值为 auto)。注:如果想使用百分比的方式来设置值，请查看 Ext.Component.anchor。
BoxComponent
hidden : Boolean
如果当前组件处于隐藏状态，此值为true。Read-only。
Component
hideLabel : Boolean
true时完全隐藏label元素 ( label 和 separator)。 默认为 false。 默认情况下，即使你不指定...

true时完全隐藏label元素 ( label 和 separator)。 默认为 false。 默认情况下，即使你不指定 fieldLabel 它的空间仍然会被保留，这样这块区域会与其它确实拥有label的区域位于同一排。 讲此值设置为 true 将导致此区域不再保留此空间。

注意: 参见 clearCls 的注释。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield'
        hideLabel: true
    }]
});
Component
hideMode : String
组件如何隐藏，支持的值有： 'visibility' (css visibility), 'offsets' (位置偏移量为负值) 和...

组件如何隐藏，支持的值有： 'visibility' (css visibility), 'offsets' (位置偏移量为负值) 和 'display' (css display).

注意:一般首选默认值 'display'，因为当组件第一次显示的时候它们会自动进行布局 (隐藏的时候不会调整尺寸)。

Component
hideParent : Boolean
此值为true时，当调用hide/show方法时，将会hide和show组件的容器...
此值为true时，当调用hide/show方法时，将会hide和show组件的容器；false时将会 hide和show组件自身(默认为false)。例如，这可以用作window上隐藏按钮的一种 快捷操作，通过设置此按钮的hideParent:true，然后把它添加到window上。
Component
html : String/Object
一个HTML片段，或者一个 DomHelper 描述，用作layout元素的内容(默认为'')。...
一个HTML片段，或者一个 DomHelper 描述，用作layout元素的内容(默认为'')。 这个HTML内容在组件渲染之后才被添加，所以在 render 出发的时候，document中尚未包含此HTML。 但是这个内容将会在所有配置的 contentEl 之前被插入到body标签中。
Component
id : String
当前组件唯一的id(默认为auto-assigned id)...

当前组件唯一的id(默认为auto-assigned id)。 如果你需要在以后访问组件，而又没有一个有效的组件对象引用，那么你需要指定一个 id( 也就是，使用Ext. getCmp方法 )。

注意，此id也将被用作组件底层HTML标签的id，这些标签被渲染到页面中。 这将允许你编写基于id的CSS规则，以独立地描述指定的实例；并且，也可以通过 组件父标签的id选中子元素。

注意:为了避免与唯一的id 产生重复， 请参见 itemId 和 ref 。

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

Component
itemCls : String
注意: 只有在当前组件被渲染到一个使用FormLayout 布局的 容器中时此配置才有效...

注意: 只有在当前组件被渲染到一个使用FormLayout 布局的 容器中时此配置才有效。 (例如Ext.form.FormPanel 或者指定 layout:'form')。

一个附加的CSS类，应用到div上，包装当前field的表单元素。 如果提供了此参数， field级上的itemCls将会覆盖 container级上提供的 默认itemCls。 为itemCls指定的值将会被添加默认的 类('x-form-item')。

既然它被应用到项目的包装器上(参见 Ext.layout.FormLayout。 fieldTpl)， 它将允许你编写能应用到此field、label(如果有指定)、或者field内部任何其它元素的标准CSS规则。

注意: 参考 fieldLabel的注释。 .

示例用法:

// Apply a style to the field's label:
<style>
    .required .x-form-item-label {font-weight:bold;color:red;}
</style>

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Name',
        itemCls: 'required' //this label will be styled
    },{
        xtype: 'textfield',
        fieldLabel: 'Favorite Color'
    }]
});
Component
itemId : String
当没有可利用的对象引用时，itemId可以作为第二选择，用来获得一个组件的引用， 代替 ...

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

var c = new Ext.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'); // 与 Ext.getCmp()不同

p2 = p1.ownerCt.getComponent('p2'); // 通过兄弟对象获得引用

另请参见 id 和 ref 。

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

Component
labelSeparator : String
每个fieldLabel 文本后面现实的分隔符。 此属性可以在多个层次上进行配置...

每个fieldLabel 文本后面现实的分隔符。 此属性可以在多个层次上进行配置。优先顺序为：

  • field / component level
  • container level
  • layout level (默认为冒号 ':')
如不需要为当前field的label显示分隔符，指定一个空字符串''即可。

注意:参见 clearCls 的注释。

另请参见 hideLabel 和 Ext.layout.FormLayout。 fieldTpl。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    layoutConfig: {
        labelSeparator: '~'   // layout config has lowest priority (defaults to ':')
    },
    labelSeparator: '>>',     // config at container level
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Field 1',
        labelSeparator: '...' // field/component level config supersedes others
    },{
        xtype: 'textfield',
        fieldLabel: 'Field 2' // labelSeparator will be '='

    }]
});
Component
labelStyle : String
一个CSS样式描述字符串，它将直接应用到当前field的label上...

一个CSS样式描述字符串，它将直接应用到当前field的label上。 如果有设置，默认为容器的labelStyle值(例如 Ext.layout.FormLayout.labelStyle , 或者 '')。

注意:参见 clearCls 的注释。

另请参见 hideLabel 和 Ext.layout.FormLayout. fieldTpl。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Name',
        labelStyle: 'font-weight:bold;'
    }]
});
Component
listeners : Object
一个包含一个或多个事件处理器的配置对象，会在初始化的时候被添加到目标对象上...

一个包含一个或多个事件处理器的配置对象，会在初始化的时候被添加到目标对象上。 该配置对象应该是一个有效的监听器配置对象就像 addListener例子中指定的一样可一次附加多个处理器。

ExtJs Components上的DOM事件

一些 ExtJs Component 类导出时会选择一些DOM事件(例如 "click", "mouseover" 等等), 这通常只是在有额外的值可以被添加时发生。例如DataView类的 click事件会传递被点击的节点。也可以直接在Component的HTMLElementevent上访问DOM事件，但必需在Component被渲染后监听器才能添加到Element 上。可以按照以下步骤添加插件:

// 插件会用一个监听器配置对象进行配置。
//该组件会被添加到所有处理方法的参数列表上。
Ext.DomObserver = Ext.extend(Object, {
    constructor: function(config) {
        this.listeners = config.listeners ? config.listeners : config;
    },

    // 组件将自己传递进了插件的初始化方法里
    init: function(c) {
        var p, l = this.listeners;
        for (p in l) {
            if (Ext.isFunction(l[p])) {
                l[p] = this.createHandler(l[p], c);
            } else {
                l[p].fn = this.createHandler(l[p].fn, c);
            }
        }

        // 渲染后立即添加监听器到元素上
        c.render = c.render.createSequence(function() {
            var e = c.getEl();
            if (e) {
                e.on(l);
            }
        });
    },

    createHandler: function(fn, c) {
        return function(e) {
            fn.call(this, e, c);
        };
    }
});

var combo = new Ext.form.ComboBox({

    // 元素被点击后折叠
    plugins: [ new Ext.DomObserver({
        click: function(evt, comp) {
            comp.collapse();
        }
    })],
    store: myStore,
    typeAhead: true,
    mode: 'local',
    triggerAction: 'all'
});

Observable
margins : Object
注:此配置只用于该组件展现在一个使用BorderLayout...

注:此配置只用于该组件展现在一个使用BorderLayout 或 BoxLayout的两个子类之一作为布局的容器。

这个margins对象在该组件中的格式为：

{top: (top margin),right: (right margin),bottom: (bottom margin),left: (left margin)}

也可以是一个字符串，中间用空格分隔，margin值为数字。 把matches中每一个值的次序跟CSS中margin值的排列方式相对应：

  • 如果只有一个值，它适用于所有方面。
  • 如果有两个值，top和bottom的边框设置为第一个值，left和right设置为第二个值。
  • 如果有三个值，top设置为第一个值，left和right设置为第二个值，bottom设置为第三个值。
  • 如果有四个值，分别设置为top, right, bottom, left。

默认值:

{top:0, right:0, bottom:0, left:0}
BoxComponent
overCls : String
一个可选的额外的CSS类，它将在鼠标移过元素时被添加到组件上...
一个可选的额外的CSS类，它将在鼠标移过元素时被添加到组件上，鼠标移出时 删除。(默认为'')。此属性对于在组件上，或者它的任何使用标准CSS规则的孩子节点上， 添加定制的'active' 或者 'hover'样式非常有用。
Component
pageX : Number
如果该组件被包含在一个指定位置的容器中，这个值表示页面级的x坐标值（译者注：在有滚动条的情况下这个值很有用）。
BoxComponent
pageY : Number
如果该组件被包含在一个指定位置的容器中，这个值表示页面级的y坐标值（译者注：在有滚动条的情况下这个值很有用）。
BoxComponent
plugins : Object/Array
一个对象或者一个对象数组，为组件提供特殊的功能 ...
一个对象或者一个对象数组，为组件提供特殊的功能。 对一个合法的插件唯一的要求是它含有一个init()方法， 能接收一个Ext.Component型的参数。 当组件被创建时，如果有可用的插件，组件将会调用每个插件的init方法， 并将自身的引用作为方法参数传递给它。然后，每个插件就可以调用方法或者响应组件上的事件， 就像需要的那样提供自己的功能。
Component
ptype : String
需要创建配置的ptype。 当传递一个配置对象给构造函数时...
需要创建配置的ptype。 当传递一个配置对象给构造函数时，此配置选项不会被使用。 只有在使用懒初始化的时候此配置项才会被使用， 此时Plugin不是 通过一个完整的实例组件，而是通过一个Component配置指定的。 在渲染时，将会查找ptype以决定创建何种类型的Plugin。

如果你创建自己的Plugin，你可以通过 Ext.ComponentMgr.registerPlugin 对它们进行注册，以便能利用懒初始化和渲染机制。
Component
ref : String
一个路径描述，与组件的 ownerCt 相关，它描述了把当前组件的命名引用放置到哪个父容器中去。...

一个路径描述，与组件的 ownerCt 相关，它描述了把当前组件的命名引用放置到哪个父容器中去。

祖先的坐标路径可以通过'/'字符进行分隔。 例如，将一个Toolbar Button的引用放入 拥有此Toolbar的Panel中:

var myGrid = new Ext.grid.EditorGridPanel({
    title: 'My EditorGridPanel',
    store: myStore,
    colModel: myColModel,
    tbar: [{
        text: 'Save',
        handler: saveChanges,
        disabled: true,
        ref: '../saveButton'
    }],
    listeners: {
        afteredit: function() {
//          The button reference is in the GridPanel
            myGrid.saveButton.enable();
        }
    }
});

在上面的代码中，如果 ref 是 'saveButton' ，那么引用将会被放置到Toolbar中。 ref 中的每个'/' 都会从组件的 ownerCt 向上移动一级。

另请参见 added 和 removed 事件。

Component
region : String
注: 此配置只用于该组件展现在一个布局为BorderLayout的容器中...

注: 此配置只用于该组件展现在一个布局为BorderLayout的容器中(例如指定layout:'border')。

详见Ext.layout.BorderLayout。

BoxComponent
renderTo : Mixed
该值可以是一个节点的id、一个DOM节点或者一个已存在的元素...

该值可以是一个节点的id、一个DOM节点或者一个已存在的元素， 组件将会被渲染到其中。

  • 注意 :
      如果组件不是一个Container 的子项目时， 不要使用此选项。 渲染和管理它的子项目是一个Container 的layout manager的责任。
      当使用此配置项时，无需调用render()方法。

另请参见 render 。

Component
seriesStyles : Object
图表刷新后将要应用于各序列的样式。默认为 null.
Chart
stateEvents : Array
一个事件数组，当它们被触发时，组件需要保存自己的状态(默认值为 none)...

一个事件数组，当它们被触发时，组件需要保存自己的状态(默认值为 none)。 它们可以是任何该组件支持的事件类型，包括浏览器事件和 自定义事件(例如['click', 'customerchange'])。

对于保存和恢复组件状态的详细解释，参见 stateful

Component
stateId : String
为该组件指定的唯一的id值，它被用作管理组件状态的目的...
为该组件指定的唯一的id值，它被用作管理组件状态的目的。 (如果设定了id，默认值为组件自己的id，否则，如果组件使用自动生成的id，此值为null)。

对于保存和反解析组件状态的解释，参见 stateful 。

Component
stateful : Boolean
一个标志参数，它将引起组件在启动时尝试从一个保存的状态中恢复内部状态参数...

一个标志参数，它将引起组件在启动时尝试从一个保存的状态中恢复内部状态参数。 组件必须要么拥有一个 stateId 或者 id ，它们被分配给需要被管理的状态属性。 在跨页面加载时，不保证自动生成的id属性的稳定性， 并且，不能依赖此id来保存和恢复一个组件的相同状态。

为了保存状态的操作能够工作，状态管理器的提供者必须 被设置成一个Ext.state.Provider 的实现类，它覆盖了set 和get 方法，以便保存和恢复name/value对。 有一个内置的Ext.state.CookieProvider 可用。

为当前页面设置状态提供者:

Ext.state.Manager.setProvider(new Ext.state.CookieProvider({
    expires: new Date(new Date().getTime()+(1000*60*60*24*7)), //7 days from now
}));

当 stateEvents 配置项中其中之一的事件被触发时， 一个状态可保存的组件将试图保存其状态。

保存状态时，一个可保存状态的组件首先需要通过调用 getState 方法来序列化它的状态。 默认情况下，此函数什么事都不做。 开发者必须提供一个实现，返回一个hash对象，它描述了组件可恢复的状态。

getState方法产生的值将会传递给 Ext.state.Manager.set 方法，它使用配置的 Ext.state.Provider 来保存对象，以组件的 stateId 为key，或者，如果此值（指stateId）没有指定时， 使用它的 id 作为key。

在进行构造时，一个可保存状态的组件试图通过调用 Ext.state.Manager.get方法来 恢复它的状态，传递 stateId 或者，如果此值（指stateId）没有指定时， 使用它的 id 作为参数。

结果对象被传递给 applyState 。 applyState 的默认实现只是简单地把属性拷贝到对象中， 但是开发者可以覆盖此方法以支持更多行为。

通过向 beforestaterestore, staterestore, beforestatesave 和 statesave 事件上绑定监听器，你可以在保存和恢复状态时进行额外的处理。

Component
style : String
被添加到组件元素的特定样式。 必须是按照...
被添加到组件元素的特定样式。 必须是按照 Ext.Element.applyStyles 类指定格式的合法参数值。

new Ext.Panel({
    title: 'Some Title',
    renderTo: Ext.getBody(),
    width: 400, height: 300,
    layout: 'form',
    items: [{
        xtype: 'textarea',
        style: {
            width: '95%',
            marginBottom: '10px'
        }
    },
        new Ext.Button({
            text: 'Send',
            minWidth: '100',
            style: {
                marginBottom: '10px'
            }
        })
    ]
});
Component
tabTip : String
注: 这个配置只用于当该组件作为TabPanel的一个子项目时使用...

注: 这个配置只用于当该组件作为TabPanel的一个子项目时使用。

一个String类型的innerHTML(支持html标签)，当鼠标放在该选项上的时，显示一个tooltip。为了tips能够被渲染，Ext.QuickTips.init()必须被提前调用。
BoxComponent
tpl : Mixed
一个 Ext.Template , Ext.XTemplate 或者一个用来形成一个Ext.XTemplate的字符串数组...
一个 Ext.Template , Ext.XTemplate 或者一个用来形成一个Ext.XTemplate的字符串数组。 与 data 和 tplWriteMode 配置项协同使用。
Component
tplWriteMode : String
刷新组件的内容区域时使用的Ext.(X)Template方式。 默认为'overwrite' (参见 Ext.XTemplate.overwrite )。
刷新组件的内容区域时使用的Ext.(X)Template方式。 默认为'overwrite' (参见 Ext.XTemplate.overwrite )。
Component
url : String
需要包含在chart中的URL。默认为 undefined。
Chart
width : Number
组件的宽度(默认值为 auto)。注:如果想使用百分比的方式...
组件的宽度(默认值为 auto)。注:如果想使用百分比的方式来设置值，请查看 Ext.Component.anchor。
BoxComponent
wmode : String
flash对象的wmode。此参数可以用来控制层叠次序。默认为 'opaque'。
FlashComponent
x : Number
如果被包含在一个指定位置的容器中，这个值表示x(left)坐标值。
BoxComponent
xtype : String
需要创建配置的xtype。 当传递一个配置对象给构造函数时...
需要创建配置的xtype。 当传递一个配置对象给构造函数时，此配置选项不会被使用。 只有在使用懒初始化的时候此配置项才会被使用，此时容器的子项目不是 通过一个完整的实例组件，而是通过一个Component配置指定的。 在渲染时，将会查找xtype以决定创建何种类型的子组件。

预定义的xtype列表如下： here。

如果你继承Component创建你自己的组件，你需要使用Ext.ComponentMgr.registerType 对它们进行注册，以便利用懒初始化和渲染机制。
Component
y : Number
如果被包含在一个指定位置的容器中，这个值表示y(top)坐标值。
BoxComponent

公共属性

Property Defined By
CHART_URL : String
设置从哪里加载图表。应该设置为本地图表源（路径）。
Chart
EXPRESS_INSTALL_URL : String
如果不存在，为初始化flash设置的url。 此参数应该设置为一个本地资源。
FlashComponent
disabled : Boolean
当前组件处于无效状态时为true。 Read-only.
Component
el : Ext.Element
封装了当前组件的Ext.Element。 Read-only。通常情况下，这将是一个<DIV>元素，它由此类的...

封装了当前组件的Ext.Element。 Read-only。

通常情况下，这将是一个<DIV>元素，它由此类的 onRender方法创建，但是它可以通过使用 autoEl 配置项进行覆盖。

注意: 直到组件渲染完成此元素都将处于无效状态。

如需向当前组件的 DOM事件(而不是当前组件自己的Observable事件)添加监听器， 更多建议，参见 listeners 配置项，或者直接使用一个render监听器:

new Ext.Panel({
    title: 'The Clickable Panel',
    listeners: {
        render: function(p) {
            // Append the Panel to the click handler's argument list.
            p.getEl().on('click', handlePanelClick.createDelegate(null, [p], true));
        },
        single: true  // Remove the listener after first invocation
    }
});

另请参见 getEl

Component
hidden : Boolean
如果当前组件处于隐藏状态，此值为true。Read-only。
Component
initialConfig : Object
当前组件的初始化配置描述。 Read-only。
Component
ownerCt : Ext.Container
组件所属的Container (默认为undefined，当前组件被添加到一个容器中时此值被自动设置)...
组件所属的Container (默认为undefined，当前组件被添加到一个容器中时此值被自动设置)。 Read-only。

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

Component
refOwner : Ext.Container
如果当前组件是一个容器的孩子，并且是通过一个 ref 配置项被注册的，则此值为 ref 引用被插入到的祖先容器。
如果当前组件是一个容器的孩子，并且是通过一个 ref 配置项被注册的，则此值为 ref 引用被插入到的祖先容器。
Component
rendered : Boolean
如果当前组件已经被渲染了，此值为true。Read-only.
Component

公共方法

Method Defined By
BarChart()
参数:
  • 无。
返回值:
  • void
BarChart
addClass ( string cls ) : Ext.Component
为组件底层的元素添加CSS样式。
为组件底层的元素添加CSS样式。
参数:
  • cls : string
    需要添加的CSS样式的class名称
返回值:
  • Ext.Component
    this
Component
addEvents( Object|String o, string Optional. ) : void
添加指定的事件到事件列表上，事件会被该Observable触发。
添加指定的事件到事件列表上，事件会被该Observable触发。
参数:
  • o : Object|String
    以事件名作为属性true作为值的对象 或者当多个事件名被分开的传递时则为第一个事件名。
  • Optional. : string
    事件名被分开的传递时则为事件名。 用法:
    this.addEvents('storeloaded', 'storecleared');
返回值:
  • void
Observable
addListener( String eventName, Function handler, [Object scope], [Object options] ) : void
给对象添加事件处理器。
给对象添加事件处理器。
参数:
  • eventName : String
    监听的事件名。
  • handler : Function
    事件调用的方法
  • scope : Object
    （可选）处理方法执行的作用域 (this的引用 reference)。 如果被忽略。默认为触发事件的对象。
  • options : Object
    （可选）包含处理器配置和属性的对象。 可能包含以下的属性:
    • scope : Object
      处理方法执行的作用域(this的引用) 。 如果被忽略。默认为触发事件的对象。
    • delay : Number
      在触发事件后延迟调用处理器的毫秒数。
    • single : Boolean
      如果为True则添加一个处理器来处理下一次的事件触发（仅一次），然后移除自己。
    • buffer : Number
      使得处理器延迟指定毫秒数后预定的运行在 一个Ext.util.DelayedTask中 。 如果事件在时间内再一次被触发，原始的处理器不会被调用，但是新的处理器会预定的在他的位置上。
    • target : Observable
      如果事件在目标的Observable上触发则仅仅调用处理器， 否则 事件会从子类的Observable上冒泡

    组合选项
    使用这些选项参数,可能会组合出不同类型的监听器：

    一个延迟的，一次性的监听器。

    myDataView.on('click', this.onClick, this, {
single: true,
delay: 100
});

    一次调用附加多个处理器
    该方法同样支持传递一个包含指定的多个处理器的属性的配置对象参数。

    myGridPanel.on({
'click' : {
    fn: this.onClick,
    scope: this,
    delay: 100
},
'mouseover' : {
    fn: this.onMouseOver,
    scope: this
},
'mouseout' : {
    fn: this.onMouseOut,
    scope: this
}
});

    或者一个简写的语法：

    myGridPanel.on({
'click' : this.onClick,
'mouseover' : this.onMouseOver,
'mouseout' : this.onMouseOut,
 scope: this
});
返回值:
  • void
Observable
applyToMarkup ( String/HTMLElement el ) : void
将此组件添加到已存在的有效的HTML标签中。 使用该方法时，无需再调用render()方法。
将此组件添加到已存在的有效的HTML标签中。 使用该方法时，无需再调用render()方法。
参数:
  • el : String/HTMLElement
返回值:
  • void
Component
bindStore ( Store store ) : void
改变图表绑定的数据集，并刷新。
改变图表绑定的数据集，并刷新。
参数:
  • store : Store
    绑定到图表的数据集合。
返回值:
  • void
Chart
cloneConfig ( Object overrides ) : Ext.Component
默认使用原先传递给当前实例的配置值克隆当前组件。
默认使用原先传递给当前实例的配置值克隆当前组件。
参数:
  • overrides : Object
    一个新的配置项，包含需要覆盖到克隆版本的所有属性。 可以传递一个id参数给此对象，否则将自动生成一个新的id以避免发生重复。
返回值:
  • Ext.Component
    当前组件的克隆副本
Component
destroy () : void
通过如下方法销毁对象：删除所有的事件监听器、将组件的元素从DOM树中删除...
通过如下方法销毁对象：删除所有的事件监听器、将组件的元素从DOM树中删除（如果可以）、 将组件从它的 Ext.Container（如果可用）中删除、 并且将它从Ext.ComponentMgr中 注销。 销毁操作一般由框架自动完成，一般情况下不需要直接调用该方法。
参数:
  • 无。
返回值:
  • void
Component
disable () : Ext.Component
将组件置为无效状态，并出发'disable'事件。
将组件置为无效状态，并出发'disable'事件。
参数:
  • 无。
返回值:
  • Ext.Component
    this
Component
enable () : Ext.Component
将组件置为有效状态并触发'enable'事件。
将组件置为有效状态并触发'enable'事件。
参数:
  • 无。
返回值:
  • Ext.Component
    this
Component
enableBubble( String/Array events ) :void
是否现在使得事件会被该Observable触发并调用 this.getBubbleTarget()方法在拥有者的继承树...

是否现在使得事件会被该Observable触发并调用 this.getBubbleTarget()方法在拥有者的继承树中冒泡。Observable的基础类中没有该方法的实现。

该方法一般被Ext.Components用来冒泡事件到拥有者的容器。参看Ext.Component.getBubbleTarget默认的实现 在Ext.Component中返回组件的直接拥有者。但是如果需要的是一个已知的目标，该方法可以被重写来更快的访问需求的目标。

例子:

Ext.override(Ext.form.Field, {
    // 添加方法到Field的initComponent上改变事件为冒泡
    initComponent : Ext.form.Field.prototype.initComponent.createSequence(function() {
        this.enableBubble('change');
    }),

    // 我们知道我们想让Field的事件冒泡到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() {
            // 如果样式被修改标题会变红。
            myForm.header.setStyle('color', 'red');
        }
    }
});
参数:
  • events : String/Array
    冒泡的事件名，或事件名数组
返回值:
  • void
Observable
findParentBy ( Function fn ) : Ext.Container
通过自定义的函数查找当前组件上层任何层次上的容器...
通过自定义的函数查找当前组件上层任何层次上的容器。 如果传递的函数返回true，容器对象将被返回。
参数:
  • fn : Function
    自定义的函数，使用如下参数调用(container,this component)。
返回值:
  • Ext.Container
    自定义函数返回true的第一个容器
Component
findParentByType ( String/Class xtype ) : Ext.Container
通过xtype或者class查找当前组件上层任何层次上的容器
通过xtype或者class查找当前组件上层任何层次上的容器
参数:
  • xtype : String/Class
    组件的xtype字符串，或者直接是组件的class
返回值:
  • Ext.Container
    符合指定xtype或者class的第一个容器
Component
fireEvent( String eventName, Object... args ) : Boolean
用传入的参数触发指定的事件 (减去事件名)。 一个事件可以被设置为冒泡 Obse...

用传入的参数触发指定的事件 (减去事件名)。

一个事件可以被设置为冒泡到Observable父类继承树(参看 Ext.Component.getBubbleTarget) 调用enableBubble实现。

参数:
  • eventName : String
    触发的事件名。
  • args : Object...
    传递给处理器的可变长度参数。
返回值:
  • Boolean
    如果有任何的处理器返回false则返回false，否则返回true。
Observable
focus ( [ Boolean selectText ], [ Boolean/Number delay ] ) : Ext.Component
尝试将当前组件设为焦点。
尝试将当前组件设为焦点。
参数:
  • selectText : Boolean
    (可选) 如果可用，同时选中组件内部的文本
  • delay : Boolean/Number
    (可选)将当前组件设置为焦点的延迟时间(设置为true等于0毫秒)
返回值:
  • Ext.Component
    this
Component
getBox ( [ Boolean local ] ) : Object
获取组件底层元素当前盒子模型的尺寸。（译者注：盒子模型是CSS术语，详细解释请自行搜索。）
获取组件底层元素当前盒子模型的尺寸。（译者注：盒子模型是CSS术语，详细解释请自行搜索。）
参数:
  • local : Boolean
    (可选)值为true时，组件的left值和top值将代替页面的XY被返回。(默认值为false)
返回值:
  • Object
    返回值的格式{x, y, width, height}
BoxComponent
getBubbleTarget () : Ext.Container
为Observable的fireEvent方法提供链接，它沿着继承结构进行冒泡操作。
为Observable的fireEvent方法提供链接，它沿着继承结构进行冒泡操作。
参数:
  • 无。
返回值:
  • Ext.Container
    拥有当前组件的容器。
Component
getEl () : Ext.Element
返回 Ext.Element ，它包装了当前组件。...

返回 Ext.Element ，它包装了当前组件。

通常情况下，这将是一个<DIV>元素，它是由该类的onRender方法创建的， 但是可以使用autoEl配置项 覆盖它。

注意: 此元素将会一直处于无效状态直到当前组件渲染完成。

如需向当前组件的 DOM事件(而不是当前组件自己的Observable事件)添加监听器， 更多建议，参见 listeners 配置项，或者直接使用一个render监听器:

new Ext.Panel({
    title: 'The Clickable Panel',
    listeners: {
        render: function(p) {
            // Append the Panel to the click handler's argument list.
            p.getEl().on('click', handlePanelClick.createDelegate(null, [p], true));
        },
        single: true  // Remove the listener after first invocation
    }
});
参数:
  • 无。
返回值:
  • Ext.Element
    包装当前组件的元素。
Component
getHeight () : Number
获取该组件的当前高度值。
获取该组件的当前高度值。
参数:
  • 无。
返回值:
  • Number
BoxComponent
getId () : String
返回当前组件的id，如果没有定义id，则自动生成并返回一个id:'ext-comp-'...
返回当前组件的 id 如果没有定义 id 则自动生成并返回一个 id

'ext-comp-' + (++Ext.Component.AUTO_ID)
参数:
  • 无。
返回值:
  • String
    id
Component
getItemId () : String
返回当前组件的 itemId 。 如果没有通过配置参数指定 itemId 那么，将会使用...
返回当前组件的 itemId 。 如果没有通过配置参数指定 itemId 那么，将会使用 getId 返回 id 。
参数:
  • 无。
返回值:
  • String
Component
getOuterSize () : Object
获取当前组件所在元素的尺寸大小，包括边缘的空白处。
获取当前组件所在元素的尺寸大小，包括边缘的空白处。
参数:
  • 无。
返回值:
  • Object
    一个包含元素大小的对象 {width: (element width + left/right margins), height: (element height + top/bottom margins)}
BoxComponent
getPosition ( [ Boolean local ] ) : Array
获取组件底层元素当前的XY位置。
获取组件底层元素当前的XY位置。
参数:
  • local : Boolean
    (可选)如果为true，将返回元素的left和top值，而不是相对于页面内的 XY。(默认值为 false)
返回值:
  • Array
    元素的XY位置值(例如：[100, 200])
BoxComponent
getResizeEl () : Ext.Element
返回该组件的最外层用来定义这些组件整体大小的Element...

返回该组件的最外层用来定义这些组件整体大小的Element对象。

通常用 getEl 方法将会返回相同的Element对象，但在有些情况下，组件可能有一些更多的封装了它的主要动态Element对象的Element对象。

例如ComboBox。它是封装在一个包含<input>元素的包装元素里(这将返回其 getEl方法和触发按钮的元素)。返回的元素为resizeEl。

参数:
  • 无。
返回值:
  • Ext.Element
    The Element which is to be resized by size managing layouts.
BoxComponent
getSize () : Object
获取组件底层元素当前的大小。
获取组件底层元素当前的大小。
参数:
  • 无。
返回值:
  • Object
    一个包含元素大小的对象{width: (element width), height: (element height)}
BoxComponent
getWidth () : Number
获取该组件的当前宽度值。
获取该组件的当前宽度值。
参数:
  • 无。
返回值:
  • Number
BoxComponent
getXType () : String
获取当前组件的xtype，它是用 Ext.ComponentMgr 注册的。 所有可用的xtype列表，参见...
获取当前组件的xtype，它是用 Ext.ComponentMgr 注册的。 所有可用的xtype列表，参见 Ext.Component 类头部。示例用法:

var t = new Ext.form.TextField();
alert(t.getXType());  // alerts 'textfield'
参数:
  • 无。
返回值:
  • String
    The xtype
Component
getXTypes () : String
返回此组件的xtype继承树，用字符'-'分隔。 所有可用的xtype值...

返回此组件的xtype继承树，用字符'-'分隔。 所有可用的xtype值，请参见Ext.Component 类的头部。

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

示例用法:

var t = new Ext.form.TextField();
alert(t.getXTypes());  // alerts 'component/box/field/textfield'
参数:
  • 无。
返回值:
  • String
    xtype层次字符串
Component
hasListener( String eventName ) : Boolean
检测对象是否包含指定事件的任何监听器
检测对象是否包含指定事件的任何监听器
参数:
  • eventName : String
    检测的事件名
返回值:
  • Boolean
    如果事件被监听则为true，否则为false
Observable
hide () : Ext.Component
隐藏当前组件。 监听 beforehide' 事件并且返回false 可以取消隐藏组件的操作。 在隐藏组件之后触发...
隐藏当前组件。 监听 beforehide' 事件并且返回false 可以取消隐藏组件的操作。 在隐藏组件之后触发 ' hide' 事件。 如果组件被配置成 hidden 那么此方法在内部被调用。
参数:
  • 无。
返回值:
  • Ext.Component
    this
Component
isVisible () : Boolean
如果当前组件可见，返回true。
如果当前组件可见，返回true。
参数:
  • 无。
返回值:
  • Boolean
    如果当前组件可见，返回true，其它返回false。
Component
isXType ( String xtype , [ Boolean shallow ] ) : Boolean
Tests whether or not this Component is of a specific xtype. This can test whether this Component is descended from th...

测试此组件是否是指定的xtype。此方法既可以测试是否是指定的xtype的某个子类， 或者它是否直接是指定的xtype类(shallow=true)。

如果使用你自己的子类，必须知道组件必须注册它的xtype值。

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

示例用法:

var t = new Ext.form.TextField();
var isText = t.isXType('textfield');        // true
var isBoxSubclass = t.isXType('box');       // true, descended from BoxComponent
var isBoxInstance = t.isXType('box', true); // false, not a direct BoxComponent instance
参数:
  • xtype : String
    需要为当前组件进行检测的xtype
  • shallow : Boolean
    (可选) 如果为false，检测组件是否是xtype继承树中的某个子类（默认是这种情况）， 如果为true，只检测组件是否是指定的xtype类型。
返回值:
  • Boolean
    如果当前组件是指定xtype的子类，返回true，其它返回flase。
Component
mon ( Observable|Element item , Object|String ename , Function fn , Object scope , Object opt ) : void
向任何Observable对象(或者元素)上添加监听器，监听器将会在组件...

向任何Observable对象(或者元素)上添加监听器，监听器将会在组件销毁时被自动删除。
用法：

myGridPanel.mon(myGridPanel.getSelectionModel(), 'selectionchange', handleSelectionChange, null, {buffer: 50});

or:

myGridPanel.mon(myGridPanel.getSelectionModel(), {
    selectionchange: handleSelectionChange,
    buffer: 50
});
参数:
  • item : Observable|Element
    需要添加listener/listeners的项目。
  • ename : Object|String
    事件名，或者一个包含事件名属性的对象。
  • fn : Function
    (可选) 如果 ename 参数是一个事件名，此参数为处理函数。
  • scope : Object
    (可选)如果 ename 参数是一个事件名称，此参数是作用域 ( this 引用)，监听函数将会在此作用域中被执行。
  • opt : Object
    (可选)如果 ename 参数是一个事件名称， 此参数是 addListener 配置项。
返回值:
  • void
Component
mun ( Observable|Element item , Object|String ename , Function fn , Object scope ) : void
删除通过mon 方法添加的监听器。
删除通过mon 方法添加的监听器。
参数:
  • item : Observable|Element
    需要删除listener/listeners的项目。
  • ename : Object|String
    事件名称，或者一个包含事件名称属性的对象。
  • fn : Function
    (可选)如果 ename 参数是一个事件名称，此参数是一个处理函数。
  • scope : Object
    (可选)如果 ename 参数是一个事件名称，此参数是作用域 ( this 引用)，监听函数将会在此作用域中被执行。
返回值:
  • void
Component
nextSibling () : Ext.Component
返回所属容器中的下一个组件
返回所属容器中的下一个组件
参数:
  • 无。
返回值:
  • Ext.Component
Component
on( String eventName, Function handler, [Object scope], [Object options] ) : void
给对象添加事件处理器 (addListener的简写形式)
给对象添加事件处理器 (addListener的简写形式。)
参数:
  • eventName : String
    监听的事件类型
  • handler : Function
    事件调用的方法
  • scope : Object
    （可选）处理方法执行时的作用域 (this 的引用)。 如果被忽略。默认为触发事件的对象。
  • options : Object
    可选 包含处理器配置的对象。
返回值:
  • void
Observable
previousSibling () : Ext.Component
返回所属容器中的前一个组件
返回所属容器中的前一个组件
参数:
  • 无。
返回值:
  • Ext.Component
Component
purgeListeners() : void
移除对象上所有的监听器
移除对象上所有的监听器
参数:
  • 无。
返回值:
  • void
Observable
relayEvents( Object o, Array events ) : void
从指定的Observable上传递选择的事件就好像被当前对象触发一样。
从指定的Observable上传递选择的事件就好像被当前对象触发一样。
参数:
  • o : Object
    该Observable上的事件被当前对象传递。
  • events : Array
    传递的数组名。
返回值:
  • void
Observable
removeClass ( string cls ) : Ext.Component
从组件底层的元素上删除一个CSS类。
从组件底层的元素上删除一个CSS类。
参数:
  • cls : string
    需要移除的CSS类名
返回值:
  • Ext.Component
    this
Component
removeListener( String eventName, Function handler, [Object scope] ) : void
删除一个事件处理器。
删除一个事件处理器。
参数:
  • eventName : String
    处理器关联的事件类型。
  • handler : Function
    移除的处理器。 这应该是传递到addListener里的方法的引用。
  • scope : Object
    （可选）处理器指定的初始作用域。
返回值:
  • void
Observable
render ( [ Element/HTMLElement/String container ], [ String/Number position ] ) : void
在传递进来的HTML元素中渲染当前组件。...

在传递进来的HTML元素中渲染当前组件。

如果你正在使用一个Container 对象放置当前组件，那么请不要使用render方法。

当容器第一次被渲染时，它的子组件将会被容器的 layout 管理器渲染。

某些布局管理器允许动态添加子组件。它们包括 Ext.layout.CardLayout, Ext.layout.AnchorLayout, Ext.layout.FormLayout, Ext.layout.TableLayout。

当一个新的子组件被添加时，如果容器已经被渲染了， 你可能需要调用容器的 doLayout 方法来刷新视图，它将导致所有没有被渲染的子组件进行渲染操作。 此操作是必须的，这样你可以添加多个子组件而只刷新一次layout。

当创建复杂的UI时，非常重要的一点是，请记住调整子项目的尺寸和位置是容器的 layout 管理器的职责。 如果你希望子项目的尺寸对用户交互作出反应， 你必须为容器配置一个布局管理器，它将创建和管理你心里想要的那种布局。

忽略容器的layout 配置意味着将会使用一个基本的布局管理器，它除了按次序把子组件 渲染到容器中之外什么事情都不做。 这种情况下，任何尺寸和位置的调整操作都不会发生。

参数:
  • container : Element/HTMLElement/String
    (可选) 需要在其中渲染当前组件的元素。 如果它是从一个已存在的标签中创建的，此参数应该被忽略。
  • position : String/Number
    (可选) 容器中的一个元素ID或者一个DOM节点索引， 当前组件将会被插入到它前面 (默认append到容器的尾部)
返回值:
  • void
Component
resumeEvents() : void
重新开始触发事件。(参见suspendEvents) 如果事件以queueSuspended参数被挂起，则在事件被挂起时 ...
重新开始触发事件。(参见 suspendEvents) 如果事件以queueSuspended 参数被挂起，则在事件被挂起时触发的事件会被传递到所有的监听器上
参数:
  • 无。
返回值:
  • void
Observable
setAutoScroll ( Boolean scroll ) : Ext.BoxComponent
设置该组件内容溢出时是否自动显示滚动条。
设置该组件内容溢出时是否自动显示滚动条。
参数:
  • scroll : Boolean
    值为true的话组件自动显示滚动条。
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setDisabled ( Boolean disabled ) : Ext.Component
工具函数，使用布尔值设置有效/无效(disabled/enabled )。
工具函数，使用布尔值设置有效/无效(disabled/enabled )。
参数:
  • disabled : Boolean
返回值:
  • Ext.Component
    this
Component
setHeight ( Mixed height ) : Ext.BoxComponent
设置此组件的高度。该方法将触发resize事件。
设置此组件的高度。该方法将触发resize事件。
参数:
  • height : Mixed
    The new height to set.
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setPagePosition ( Number x , Number y ) : Ext.BoxComponent
设置组件在页面中的XY位置。 如果需要设置left和top值 ，请使用...
设置组件在页面中的XY位置。 如果需要设置left和top值 ，请使用setPosition方法。 该方法触发move事件。
参数:
  • x : Number
    The new x position
  • y : Number
    The new y position
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setPosition ( Number left , Number top ) : Ext.BoxComponent
设置组件的left和top值。设置组件的页面XY值，请使用setPagePosition方法。该方法触发...
设置组件的left和top值。设置组件的页面XY值，请使用setPagePosition方法。该方法触发move事件。
参数:
  • left : Number
    The new left
  • top : Number
    The new top
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setSeriesStyles ( styles {Array} ) : void
为图表中所有序列设置样式。
为图表中所有序列设置样式。
参数:
  • {Array} : styles
    为列表中所有序列样式进行初始化。
返回值:
  • void
Chart
setSize ( Mixed width , Mixed height ) : Ext.BoxComponent
设置BoxComponent的宽度和高度。 此方法触发resize事件...
设置BoxComponent的宽度和高度。 此方法触发resize事件。此方法可以接收单独的width或者height值作为参数， 或者你可以传递像这样的一个size对象： {width:10, height:20} 。
参数:
  • width : Mixed
    设置的新的width值。这可以是：
    • 一个Number类型指定Element新的宽度 Ext.Element.defaultUnit(默认为像素 :'px')。
    • 一个String类型用于设置width的CSS样式。
    • 一个size对象格式为 {width: widthValue, height: heightValue} 。
    • 值为 undefined 时，保留原来的width不变。
  • height : Mixed
    设置的新的height值(如果第一个参数传递了一个size对象，此参数没有必要传递)。这可以是：
    • 一个Number类型指定Element新的高度 Ext.Element.defaultUnit(默认为像素 :'px')。
    • 一个String类型用于设置height的CSS样式。也有可能不会被使用到。
    • 值为 undefined 时，保留原来的height不变。
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setStyle ( name {String} , value {Object} ) : void
为图表实例设置单一样式值。
为图表实例设置单一样式值。
参数:
  • {String} : name
    将要改变的图表样式名称。
  • {Object} : value
    图表样式的新值。
返回值:
  • void
Chart
setStyles ( styles {Object} ) : void
重置图表实例上的所有样式。
Resets all styles on the Chart instance.
参数:
  • {Object} : styles
    Initializer for all Chart styles.
返回值:
  • void
Chart
setVisible ( Boolean visible ) : Ext.Component
工具方法，通过使用布尔值隐藏或者显示当前组件。
工具方法，通过使用布尔值隐藏或者显示当前组件。
参数:
  • visible : Boolean
    true时显示，false时隐藏
返回值:
  • Ext.Component
    this
Component
setWidth ( Mixed width ) : Ext.BoxComponent
设置组件的宽度。 此方法触发resize事件。
设置组件的宽度。 此方法触发resize事件。
参数:
  • width : Mixed
    The new width to set.
返回值:
  • Ext.BoxComponent
    this
BoxComponent
show () : Ext.Component
显示当前组件。监听' beforeshow' 事件，返回 false 取消显示组件...
显示当前组件。监听' beforeshow' 事件，返回 false 取消显示组件。在显示组件之后触发' show' 事件。
参数:
  • 无。
返回值:
  • Ext.Component
    this
Component
suspendEvents( Boolean queueSuspended ) : void
暂停触发所有的事件。 (参看resumeEvents)
暂停触发所有的事件。（参看 resumeEvents)
参数:
  • queueSuspended : Boolean
    如果传递为true则排列好暂停的事件使得在调用 resumeEvents 后再触发它们，而不是抛弃所有暂停的事件。
返回值:
  • void
Observable
syncSize () : Ext.BoxComponent
强制组件的大小按照此组件底层元素当前的高度和宽度计算。
强制组件的大小按照此组件底层元素当前的高度和宽度计算。
参数:
  • 无。
返回值:
  • Ext.BoxComponent
    this
BoxComponent
un( String eventName, Function handler, [Object scope] ) : void
删除一个事件处理器(removeListener方法的简写形式)
删除一个事件处理器(removeListener方法的简写形式。)
参数:
  • eventName : String
    处理器关联的事件类型
  • handler : Function
    被删除的处理器 这应该是传入 addListener 中的方法的引用。
  • scope : Object
    （可选）为处理器指定的初始作用域。
返回值:
  • void
Observable
update ( Mixed htmlOrData , [ Boolean loadScripts ], [ Function callback ] ) : void
刷新组件的内部区域。
刷新组件的内部区域。
参数:
  • htmlOrData : Mixed
    如果已经通过tpl为当前组件配置了一个模板，那么 将会使用此参数来装配模板。 如果没有为当前组件配置模板，组件的内容区域将会通过Ext.Element 进行刷新。
  • loadScripts : Boolean
    (可选)只用在使用html配置时此参数才合法。默认为false。
  • callback : Function
    (可选)只用在使用html配置时此参数才合法。 当脚本加载完成时回调函数才被执行。
返回值:
  • void
Component
updateBox ( Object box ) : Ext.BoxComponent
设置此组件底层元素的盒子模型尺寸。(译者注：盒子模型是CSS术语，详细资料请自行搜索。)
设置此组件底层元素的盒子模型尺寸。(译者注：盒子模型是CSS术语，详细资料请自行搜索。)
参数:
  • box : Object
    一个格式为{x, y, width, height}的对象
返回值:
  • Ext.BoxComponent
    this
BoxComponent

公共事件

Event Defined By
added : ( Ext.Component this , Ext.Container ownerCt , number index )
当一个组件被添加到一个Ext.Container时触发
当一个组件被添加到一个Ext.Container时触发
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • ownerCt : Ext.Container
    用于组件的容器
  • index : number
    添加组件的位置
Component
afterrender : ( Ext.Component this )
在组件渲染完成之后触发...

在组件渲染完成之后触发。

afterrender事件在当前组件被rendered 结束之后、在为组件定义的所有afterRender方法执行之后 触发，并且，如果有stateful， 也在状态被保存之后才触发。

监听器将会以如下参数格式被调用:
  • this : Ext.Component
Component
beforedestroy : ( Ext.Component this )
在组件 destroyed 之前触发。 在事件监听器中返回false以停止 destroy 操作。
在组件 destroyed 之前触发。 在事件监听器中返回false以停止 destroy 操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforehide : ( Ext.Component this )
在调用hide方法隐藏组件之前触发。 在事件监听器中返回false可以停止隐藏操作。
在调用hide方法隐藏组件之前触发。 在事件监听器中返回false可以停止隐藏操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforerefresh : ( Chart this )
在图表数据刷新前触发。如果beforerefresh处理函数返回false则refresh动作...
在图表数据刷新前触发。如果beforerefresh处理函数返回false则 refresh 动作将被取消。
监听函数被调用时将传递如下参数：
  • this : Chart
Chart
beforerender : ( Ext.Component this )
在组件被rendered 之前触发。 在事件监听器中返回false可以停止render 操作。
在组件被rendered 之前触发。 在事件监听器中返回false可以停止render 操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforeshow : ( Ext.Component this )
在调用show()方法现实组件之前触发。 事件处理函数返回false可以停止show。
在调用show 方法现实组件之前触发。 事件处理函数返回false可以停止show。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforestaterestore : ( Ext.Component this , Object state )
在组件状态恢复之前触发。返回false停止恢复状态操作。
在组件状态恢复之前触发。返回false停止恢复状态操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    StateProvider返回的状态哈希值。 如果没有禁止此事件，那么状态对象会被传递给applyState。 默认情况下，这样简单地把属性值拷贝到当前组件中。 可以覆盖此方法以提供自定的状态恢复操作。
Component
beforestatesave : ( Ext.Component this , Object state )
在组件状态被保存到配置的状态提供者之前触发。 返回false可以停止保存。
在组件状态被保存到配置的状态提供者之前触发。 返回false可以停止保存。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    状态值哈希。 这由在组件上调用getState() 方法决定。 此方法必须由开发者提供，返回是否需要对状态进行描述，默认情况下， Ext.Component有一个空实现。
Component
destroy : ( Ext.Component this )
在组件被销毁之后触发。
在组件被destroyed之后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
disable : ( Ext.Component this )
在组件被设置为无效状态后触发。
在组件被设置为无效状态后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
enable : ( Ext.Component this )
当组件被设置为有效(enabled)之后触发。
当组件被设置为有效(enabled)之后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
hide : ( Ext.Component this )
在组件被隐藏之后触发。 当调用hide 方法隐藏组件之后触发。
在组件被隐藏之后触发。 当调用hide 方法隐藏组件之后触发。
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
initialize : ( Chart this )
监听器将会以如下参数格式被调用:
  • this : Chart
FlashComponent
move : ( Ext.Component this , Number x , Number y )
在组件移动之后触发。
在组件移动之后触发。
监听器将会用如下的参数格式来调用:
  • this : Ext.Component
  • x : Number
    The new x position
  • y : Number
    The new y position
BoxComponent
refresh : ( Chart this )
图表数据刷新后触发。
图表数据刷新后触发。
监听函数被调用时将传递如下参数：
  • this : Chart
Chart
removed : ( Ext.Component this , Ext.Container ownerCt )
当一个组件被从Ext.Container容器中删除时触发
当一个组件被从Ext.Container容器中删除时触发
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • ownerCt : Ext.Container
    持有组件的容器
Component
render : ( Ext.Component this )
在组件被渲染之后触发。
在组件被 rendered(渲染) 之后触发。
监听器将以如下的参数格式被调用:
  • this : Ext.Component
Component
resize : ( Ext.Component this , Number adjWidth , Number adjHeight , Number rawWidth , Number rawHeight )
在组件被调整大小之后触发。
在组件被调整大小之后触发。
监听器将以如下的参数格式被调用:
  • this : Ext.Component
  • adjWidth : Number
    这是width调整后的值
  • adjHeight : Number
    这是height调整后的值
  • rawWidth : Number
    这是width原来的值
  • rawHeight : Number
    这是height原来的值
BoxComponent
show : ( Ext.Component this )
在调用show 方法显示组件之后触发。
在调用show 方法显示组件之后触发。
监听器将会用如下的参数格式被调用:
  • this : Ext.Component
Component
staterestore : ( Ext.Component this , Object state )
组件状态被存储之后触发。
组件状态被存储之后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    StateProvider返回的状态哈希值。 如果没有禁止此事件，那么状态对象会被传递给applyState。 默认情况下，这样简单地把属性值拷贝到当前组件中。 可以覆盖此方法以提供自定的状态恢复操作。
Component
statesave : ( Ext.Component this , Object state )
在组件状态被保存到所配置的状态提供者之后触发。
在组件状态被保存到所配置的状态提供者之后触发。
监听器将会用如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    状态值hash。 这是由在足见上调用getState() 方法决定的。 开发者必须提供此方法以返回是否需要恢复状态，默认情况下， Ext.Component有一个空实现。
Component


Series
    CartesianSeries
      BarSeries

Class Ext.chart.BarSeries

包: | Ext.chart
定义类的文件: | Chart.js
类: | BarSeries
继承自: | CartesianSeries
图表控件中的BarSeries（柱状序列）类。

公共属性

Property |  | Defined By
 | axis : String 指明该序列绑定的坐标。 | CartesianSeries
 | displayName : String 序列名。 | Series
 | showInLegend : Boolean 如果为false，将在图例说明里不显示该序列。 默认为true. | CartesianSeries
 | type : String 序列类型。 | Series
 | xField : String 用来访问数据源项目中x轴数值的字段。 | CartesianSeries
 | yField : String 数据源的各项中横坐标（x轴）对应的字段名。 | CartesianSeries

公共方法

该类没有公共方法。

公共事件

该类没有公共事件。


Observable
    Component
      BoxComponent
        FlashComponent
          Chart
            CartesianChart

Class Ext.chart.CartesianChart

包: | Ext.chart
定义类的文件: | Chart.js
类: | CartesianChart
子类: | BarChart, ColumnChart, LineChart, StackedBarChart, StackedColumnChart
继承自: | Chart

配置项

Config Options Defined By
allowDomMove : Boolean
在渲染时组件是否可以移动Dom节点(默认为true)。
Component
anchor : String
注: 这个配置只用于该组件被包含在一个已使用AnchorLayout...

注: 这个配置只用于该组件被包含在一个已使用 AnchorLayout (或者其子类)配置的Container时。 基于布局管理器，例如：

  • Ext.form.FormPanel
  • 指定 layout: 'anchor' // or 'form', or 'absolute'

参见 Ext.layout.AnchorLayout. anchor 。

BoxComponent
applyTo : Mixed
指定一个元素的id、一个DOM元素或者一个已经存在并被渲染到DIV中的元素，此DIV已经被...

指定一个元素的id、一个DOM元素或者一个已经存在并被渲染到DIV中的元素，此DIV已经被 渲染到document中，并且为当前组件指定了一些结构化的标签。

  • 描述 :
      当使用了 applyTo， 在主元素中也可以用id或者CSS类名来指定组件的托管部分， 并且，如果可以的话，创建的组件可能也会试图在那个标签中创建它的子组件。
  • 注意 :
      当使用此配置项时，无需调用render()方法。
      如果指定了applyTo属性，任何传递给 renderTo 的值都会被忽略，并且目标元素的父节点将会自动被用作组件的容器。
Component
autoEl : Mixed
一个表签名或者一个 DomHelper 描述，用来创建 Element ，它将封装当前组件...

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

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

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

{
    xtype: 'box',
    autoEl: {
        tag: 'img',
        src: 'http://www.example.com/example.jpg'

    }
}, {
    xtype: 'box',
    autoEl: {
        tag: 'blockquote',
        html: 'autoEl is cool!'
    }
}, {
    xtype: 'container',
    autoEl: 'ul',
    cls: 'ux-unordered-list',
    items: {
        xtype: 'box',
        autoEl: 'li',
        html: 'First list item'
    }
}
Component
autoHeight : Boolean
如果值为true，height配置项为'auto'，否则值为false的话使用固定的高度...

如果值为true，height配置项为'auto'，否则值为false的话使用固定的高度， 或者可以由其父类容器 layout manager来控制。(默认值为 false)。

注: 虽然很多组件继承了这个配置选项，但不是所有这些组件的自适应高度配置都会像期望的那样起作用。 设置autoHeight：值为true时，浏览器将根据元素的内容自动设置高度，这将意味着Ext不会去管理高度。

如果是由浏览器来管理高度，需要注意的是，通过浏览器进行调整的结构组件内不能被发现， 因此宽度的变化可能导致需要进行同步处理元素的高度。 例如：

var w = new Ext.Window({
    title: 'Window',
    width: 600,
    autoHeight: true,
    items: {
        title: 'Collapse Me',
        height: 400,
        collapsible: true,
        border: false,
        listeners: {
            beforecollapse: function() {
                w.el.shadow.hide();
            },
            beforeexpand: function() {
                w.el.shadow.hide();
            },
            collapse: function() {
                w.syncShadow();
            },
            expand: function() {
                w.syncShadow();
            }
        }
    }
}).show();
BoxComponent
autoScroll : Boolean
如果值为true，将会在该元素上使用overflow:'auto'配置，并且在必要的时候...
如果值为true，将会在该元素上使用overflow:'auto'配置，并且在必要的时候自动显示滚动条，否则，溢出部分的组件都会被切除(默认值为 false)。
BoxComponent
autoShow : Boolean
如果组件需要检测隐藏CSS属性(如 'x-hidden' 或者 'x-hide-display')并且在渲染时删除...
如果组件需要检测隐藏CSS属性(如 'x-hidden' 或者 'x-hide-display')并且在渲染时删除它们 (默认为false)，设置此值为true。
Component
autoWidth : Boolean
如果为true，使用width:'auto'配置，否则使用固定的宽度...

如果为true，使用width:'auto'配置，否则使用固定的宽度，或者可以由其父类容器的layout manager来控制。(默认值为 false)。

注: 虽然很多组件继承了这个配置选项，但不是所有这些组件的自适应宽度配置都会像期望的那样起作用。 设置autoWidth：值为true时，浏览器将根据元素的内容自动设置宽度，这将意味着Ext不会去管理宽度。

如果是由浏览器来管理宽度，需要注意的是，通过浏览器进行调整的结构组件内不能被发现，因此宽度的变化可能导致需要进行同步处理元素的宽度。 例如，在这个元素的目标是：

<div id='grid-container' style='margin-left:25%;width:50%'></div>
当浏览器窗口改变时，渲染后的Panel必须监听浏览器窗口大小的变化，以便通知子项，浏览器改变了其宽度：

var myPanel = new Ext.Panel({
    renderTo: 'grid-container',
    monitorResize: true, // relay on browser resize
    title: 'Panel',
    height: 400,
    autoWidth: true,
    layout: 'hbox',
    layoutConfig: {
        align: 'stretch'
    },
    defaults: {
        flex: 1
    },
    items: [{
        title: 'Box 1',
    }, {
        title: 'Box 2'
    }, {
        title: 'Box 3'
    }],
});
BoxComponent
backgroundColor : String
chart的背景颜色。默认为 '#ffffff'。
FlashComponent
boxMaxHeight : Number
设置组件的最大高度值...

设置组件的最大高度值。

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

BoxComponent
boxMaxWidth : Number
设置组件的最大宽度值...

设置组件的最大宽度值。

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

BoxComponent
boxMinHeight : Number
设置组件的最小高度值...

设置组件的最小高度值。

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

BoxComponent
boxMinWidth : Number
设置组件的最小宽度值...

设置组件的最小宽度值。

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

BoxComponent
bubbleEvents : Array
一个事件数组，当这些事件被触发时，将会被冒泡到所有父容器中。参见....

一个事件数组，当这些事件被触发时，将会被冒泡到所有父容器中。参见 Ext.util.Observable.enableBubble。 默认为 []。

Component
chartStyle : Object
设置图表样式。由于本身包含默认样式，所以修改这个属性将会覆盖内置...
设置图表样式。由于本身包含默认样式，所以修改这个属性将会覆盖内置样式。 使用 extraStyle 来为默认样式附加自定义样式。
Chart
clearCls : String
应用到特殊的clearing div的CSS类， 这个clearing div直接渲染到每个form field的包装器后面...

应用到特殊的clearing div的CSS类， 这个clearing div直接渲染到每个form field的包装器后面，以提供 清除field的功能(默认为 'x-form-clear-left')。

注意: 只有在当前组件被渲染到一个使用FormLayout 布局(例如 Ext.form.FormPanel 或者指定 layout:'form')的 容器中、或者是指定了一个fieldLabel 、或者指定isFormField=true 时此配置才有效。

另请参见 Ext.layout.FormLayout. fieldTpl。

Component
cls : String
一个可选的额外CSS类，它将被添加到当前组件的元素上(默认为'')...
一个可选的额外CSS类，它将被添加到当前组件的元素上(默认为'')。 此属性对于在组件上，或者它的任何使用标准CSS规则的孩子节点上， 添加定制的样式非常有用。
Component
contentEl : String
(可选)指定一个已存在的HTML元素，或者一个已存在HTML元素的...

(可选)指定一个已存在的HTML元素，或者一个已存在HTML元素的 id ，它们将被用作当前组件的内容。

  • 描述 :
    此配置选项被用来将一个已存在的HTML元素 插入到一个新组件(在组件渲染之后它简单地移动DOM元素) 的layout元素中，使它成为该组件的内容。
  • 注意 :
    指定的HTML元素将被append到组件的layout元素中， 在所有配置的 HTML 被插入之后， 并且，这样的话，在render事件 被触发时，document中将不再包含此元素。
    指定的HTML元素将不会参与组件所有可能使用的 layout 过程(译者注：指这些HTML元素 不会参与布局操作)。 它仅是HTML而已。布局操作实在孩子 items 上进行的。
    添加 x-hidden 或者 x-hide-display CSS类，以防在内容渲染到panel时发生闪烁。
Component
ctCls : String
一个可选的外部CSS样式，添加到这个组件的容器(默认值为 '')。 这个方法对于使用标准的CSS规则...

一个可选的外部CSS样式，添加到这个组件的容器(默认值为 '')。 这个方法对于使用标准的CSS规则，为组件或它的任何一个子组件添加特定的样式非常有用。 参见 Ext.layout.ContainerLayout和 extraCls 。

注意: ctCls 默认为 ''期望如下的类，它们将指定一个默认值:

  • Box Layout : 'x-box-layout-ct'
使用一个额外的CSS类配置以上的Class，它是append到默认对象上的。例如， 对于BoxLayout (Hbox and Vbox):
                                ctCls: 'x-box-layout-ct custom-class'

Component
data : Mixed
初始化数据集，它将被应用到 tpl 上以刷新组件的内容区域。
Component
disableCaching : Boolean
如果为true，则在图表url末端附加禁止缓存的字符参数，在Opera和IE下默认为true。
Chart
disabled : Boolean
当前组件处于无效状态时为true。 Read-only.
Component
disabledClass : String
当组件处于无效状态时添加到组件上的CSS类(默认为 'x-item-disabled')。
Component
expressInstall : Boolean
如果没有安装flash，设置为true将会提示用户进行安装。 注意，此参数会使用Ext.FlashComponent.EXPRESS_INSTALL_URL...
如果没有安装flash，设置为true将会提示用户进行安装。 注意，此参数会使用Ext.FlashComponent.EXPRESS_INSTALL_URL 此值应该设置为一个本地资源，默认为 false。
FlashComponent
extraStyle : Object
包含可能覆盖或者追加到默认样式的额外样式。默认为null，想要查看详细列表，请...
包含可能覆盖或者追加到默认样式的额外样式。默认为null，想要查看详细列表，请访问YUI图表站点 http://developer.yahoo.com/yui/charts/#basicstyles
如下列出一些常用样式:
  • padding - 图表内容边缘的空间，padding属性不会增加图表大小。
  • animationEnabled - 布尔值，用来指定标记动画是否启用，默认启用。
  • font - 用来定义图表字体样式的对象。默认为 { name: 'Tahoma', color: 0x444444, size: 11 }
    • name - 字体名称
    • color - 字体颜色 (十六进制编码, 如: "#ff0000", "ff0000" 或 0xff0000)
    • size - 以point（点）为单位的字体大小 (只能为整数, 如: 11)
    • bold - boolean
    • italic - boolean
    • underline - boolean
  • border - 定义图表边框的样式。图表会缩小尺寸以适应边框宽度。
    • color - 边框颜色 (十六进制编码, 如: "#ff0000", "ff0000" 或 0xff0000)
    • size - 以像素为单位的边框宽度 (只能为整数, 如: 1)
  • background - 定义图表背景样式的对象。
    • color - 边框颜色 (十六进制编码， 如: "#ff0000", "ff0000" 或 0xff0000)
    • image - 图片的URL，路径可以相对于当前页面，也可为绝对路径。
  • legend - 定义图例说明样式的对象
    • display - 图例说明的位置。 可选值为 "none", "left", "right", "top", 和 "bottom".
    • spacing - 图片的URL，路径可以相对于当前页面，也可为绝对路径。
    • padding, border, background, font - 见上面同名项。
  • dataTip - 定义数据提示样式的对象。 (tooltip).
    • padding, border, background, font - 见上面同名项。
  • xAxis 和 yAxis - 定义横纵坐标（x/y轴）样式的对象。
    • color - 见上面同名项。
    • size - 见上面同名项。
    • showLabels - boolean
    • labelRotation - 可选值范围从-90°到90°，默认为0。
  • majorGridLines 和 minorGridLines - 定义网格线条样式的对象。
    • color, size - 见上面同名项。
  • zeroGridLine - 定义零网格线样式的对象。
    • color, size - 见上面同名项。
  • majorTicks 和 minorTicks - 定义图表中刻度样式的对象。
    • color, size - 见上面同名项。
    • length - 从坐标轴上延伸的刻度的长度。
    • display - 刻度的显示方式，可选值为 "none", "inside", "outside", 和 "cross".
Chart
fieldLabel : String
紧靠此field显示的标签文本(默认值为 '')。注意...

紧靠此field显示的标签文本(默认值为 '')。

注意:只有在当前组件被渲染到一个使用FormLayout 的容器中时，此配置才有效。 (例如 Ext.form.FormPanel 或 指定 layout:'form')。

另请参见 hideLabel 、 Ext.layout.FormLayout和 fieldTpl。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Name'
    }]
});
Component
flashParams : Object
作为参数传递给flash对象的键值对集合。可能的参数可以在这里找到: http://kb2.adobe.com/cps/127/tn_12701.html默认为...
作为参数传递给flash对象的键值对集合。可能的参数可以在这里找到: http://kb2.adobe.com/cps/127/tn_12701.html默认为 undefined。
FlashComponent
flashVars : Object
作为flash变量传递给flash对象的键值对集合。 默认为 undefined。
FlashComponent
flashVersion : String
显示flash内容所需的flash版本。默认为 '9.0.115'。
FlashComponent
flex : Number
注: 这个配置只用于该组件被包含在一个已使用BoxLayout配置的Container中时...

注: 这个配置只用于该组件被包含在一个已使用BoxLayout配置的Container中时。通过计算每一个子组件的flex值所占全部flex值之和的比例，来决定子组件的宽(HBoxLayout)高(VBoxlayout)。 任何子项的 flex = 0 或 flex = undefined 将不被设置(初始值大小将不被改变)。

BoxComponent
height : Number
组件的高度(默认值为 auto)。注:如果想使用百分比的方式...
组件的高度(默认值为 auto)。注:如果想使用百分比的方式来设置值，请查看 Ext.Component.anchor。
BoxComponent
hidden : Boolean
如果当前组件处于隐藏状态，此值为true。Read-only。
Component
hideLabel : Boolean
true时完全隐藏label元素 ( label 和 separator)。 默认为 false。 默认情况下，即使你不指定...

true时完全隐藏label元素 ( label 和 separator)。 默认为 false。 默认情况下，即使你不指定 fieldLabel 它的空间仍然会被保留，这样这块区域会与其它确实拥有label的区域位于同一排。 讲此值设置为 true 将导致此区域不再保留此空间。

注意: 参见 clearCls 的注释。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield'
        hideLabel: true
    }]
});
Component
hideMode : String
组件如何隐藏，支持的值有： 'visibility' (css visibility), 'offsets' (位置偏移量为负值) 和...

组件如何隐藏，支持的值有： 'visibility' (css visibility), 'offsets' (位置偏移量为负值) 和 'display' (css display).

注意:一般首选默认值 'display'，因为当组件第一次显示的时候它们会自动进行布局 (隐藏的时候不会调整尺寸)。

Component
hideParent : Boolean
此值为true时，当调用hide/show方法时，将会hide和show组件的容器...
此值为true时，当调用hide/show方法时，将会hide和show组件的容器；false时将会 hide和show组件自身(默认为false)。例如，这可以用作window上隐藏按钮的一种 快捷操作，通过设置此按钮的hideParent:true，然后把它添加到window上。
Component
html : String/Object
一个HTML片段，或者一个 DomHelper 描述，用作layout元素的内容(默认为'')。...
一个HTML片段，或者一个 DomHelper 描述，用作layout元素的内容(默认为'')。 这个HTML内容在组件渲染之后才被添加，所以在 render 出发的时候，document中尚未包含此HTML。 但是这个内容将会在所有配置的 contentEl 之前被插入到body标签中。
Component
id : String
当前组件唯一的id(默认为auto-assigned id)...

当前组件唯一的id(默认为auto-assigned id)。 如果你需要在以后访问组件，而又没有一个有效的组件对象引用，那么你需要指定一个 id( 也就是，使用Ext. getCmp方法 )。

注意，此id也将被用作组件底层HTML标签的id，这些标签被渲染到页面中。 这将允许你编写基于id的CSS规则，以独立地描述指定的实例；并且，也可以通过 组件父标签的id选中子元素。

注意:为了避免与唯一的id 产生重复， 请参见 itemId 和 ref 。

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

Component
itemCls : String
注意: 只有在当前组件被渲染到一个使用FormLayout 布局的 容器中时此配置才有效...

注意: 只有在当前组件被渲染到一个使用FormLayout 布局的 容器中时此配置才有效。 (例如Ext.form.FormPanel 或者指定 layout:'form')。

一个附加的CSS类，应用到div上，包装当前field的表单元素。 如果提供了此参数， field级上的itemCls将会覆盖 container级上提供的 默认itemCls。 为itemCls指定的值将会被添加默认的 类('x-form-item')。

既然它被应用到项目的包装器上(参见 Ext.layout.FormLayout。 fieldTpl)， 它将允许你编写能应用到此field、label(如果有指定)、或者field内部任何其它元素的标准CSS规则。

注意: 参考 fieldLabel的注释。 .

示例用法:

// Apply a style to the field's label:
<style>
    .required .x-form-item-label {font-weight:bold;color:red;}
</style>

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Name',
        itemCls: 'required' //this label will be styled
    },{
        xtype: 'textfield',
        fieldLabel: 'Favorite Color'
    }]
});
Component
itemId : String
当没有可利用的对象引用时，itemId可以作为第二选择，用来获得一个组件的引用， 代替 ...

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

var c = new Ext.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'); // 与 Ext.getCmp()不同

p2 = p1.ownerCt.getComponent('p2'); // 通过兄弟对象获得引用

另请参见 id 和 ref 。

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

Component
labelSeparator : String
每个fieldLabel 文本后面现实的分隔符。 此属性可以在多个层次上进行配置...

每个fieldLabel 文本后面现实的分隔符。 此属性可以在多个层次上进行配置。优先顺序为：

  • field / component level
  • container level
  • layout level (默认为冒号 ':')
如不需要为当前field的label显示分隔符，指定一个空字符串''即可。

注意:参见 clearCls 的注释。

另请参见 hideLabel 和 Ext.layout.FormLayout。 fieldTpl。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    layoutConfig: {
        labelSeparator: '~'   // layout config has lowest priority (defaults to ':')
    },
    labelSeparator: '>>',     // config at container level
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Field 1',
        labelSeparator: '...' // field/component level config supersedes others
    },{
        xtype: 'textfield',
        fieldLabel: 'Field 2' // labelSeparator will be '='

    }]
});
Component
labelStyle : String
一个CSS样式描述字符串，它将直接应用到当前field的label上...

一个CSS样式描述字符串，它将直接应用到当前field的label上。 如果有设置，默认为容器的labelStyle值(例如 Ext.layout.FormLayout.labelStyle , 或者 '')。

注意:参见 clearCls 的注释。

另请参见 hideLabel 和 Ext.layout.FormLayout. fieldTpl。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Name',
        labelStyle: 'font-weight:bold;'
    }]
});
Component
listeners : Object
一个包含一个或多个事件处理器的配置对象，会在初始化的时候被添加到目标对象上...

一个包含一个或多个事件处理器的配置对象，会在初始化的时候被添加到目标对象上。 该配置对象应该是一个有效的监听器配置对象就像 addListener例子中指定的一样可一次附加多个处理器。

ExtJs Components上的DOM事件

一些 ExtJs Component 类导出时会选择一些DOM事件(例如 "click", "mouseover" 等等), 这通常只是在有额外的值可以被添加时发生。例如DataView类的 click事件会传递被点击的节点。也可以直接在Component的HTMLElementevent上访问DOM事件，但必需在Component被渲染后监听器才能添加到Element 上。可以按照以下步骤添加插件:

// 插件会用一个监听器配置对象进行配置。
//该组件会被添加到所有处理方法的参数列表上。
Ext.DomObserver = Ext.extend(Object, {
    constructor: function(config) {
        this.listeners = config.listeners ? config.listeners : config;
    },

    // 组件将自己传递进了插件的初始化方法里
    init: function(c) {
        var p, l = this.listeners;
        for (p in l) {
            if (Ext.isFunction(l[p])) {
                l[p] = this.createHandler(l[p], c);
            } else {
                l[p].fn = this.createHandler(l[p].fn, c);
            }
        }

        // 渲染后立即添加监听器到元素上
        c.render = c.render.createSequence(function() {
            var e = c.getEl();
            if (e) {
                e.on(l);
            }
        });
    },

    createHandler: function(fn, c) {
        return function(e) {
            fn.call(this, e, c);
        };
    }
});

var combo = new Ext.form.ComboBox({

    // 元素被点击后折叠
    plugins: [ new Ext.DomObserver({
        click: function(evt, comp) {
            comp.collapse();
        }
    })],
    store: myStore,
    typeAhead: true,
    mode: 'local',
    triggerAction: 'all'
});

Observable
margins : Object
注:此配置只用于该组件展现在一个使用BorderLayout...

注:此配置只用于该组件展现在一个使用BorderLayout 或 BoxLayout的两个子类之一作为布局的容器。

这个margins对象在该组件中的格式为：

{top: (top margin),right: (right margin),bottom: (bottom margin),left: (left margin)}

也可以是一个字符串，中间用空格分隔，margin值为数字。 把matches中每一个值的次序跟CSS中margin值的排列方式相对应：

  • 如果只有一个值，它适用于所有方面。
  • 如果有两个值，top和bottom的边框设置为第一个值，left和right设置为第二个值。
  • 如果有三个值，top设置为第一个值，left和right设置为第二个值，bottom设置为第三个值。
  • 如果有四个值，分别设置为top, right, bottom, left。

默认值:

{top:0, right:0, bottom:0, left:0}
BoxComponent
overCls : String
一个可选的额外的CSS类，它将在鼠标移过元素时被添加到组件上...
一个可选的额外的CSS类，它将在鼠标移过元素时被添加到组件上，鼠标移出时 删除。(默认为'')。此属性对于在组件上，或者它的任何使用标准CSS规则的孩子节点上， 添加定制的'active' 或者 'hover'样式非常有用。
Component
pageX : Number
如果该组件被包含在一个指定位置的容器中，这个值表示页面级的x坐标值（译者注：在有滚动条的情况下这个值很有用）。
BoxComponent
pageY : Number
如果该组件被包含在一个指定位置的容器中，这个值表示页面级的y坐标值（译者注：在有滚动条的情况下这个值很有用）。
BoxComponent
plugins : Object/Array
一个对象或者一个对象数组，为组件提供特殊的功能 ...
一个对象或者一个对象数组，为组件提供特殊的功能。 对一个合法的插件唯一的要求是它含有一个init()方法， 能接收一个Ext.Component型的参数。 当组件被创建时，如果有可用的插件，组件将会调用每个插件的init方法， 并将自身的引用作为方法参数传递给它。然后，每个插件就可以调用方法或者响应组件上的事件， 就像需要的那样提供自己的功能。
Component
ptype : String
需要创建配置的ptype。 当传递一个配置对象给构造函数时...
需要创建配置的ptype。 当传递一个配置对象给构造函数时，此配置选项不会被使用。 只有在使用懒初始化的时候此配置项才会被使用， 此时Plugin不是 通过一个完整的实例组件，而是通过一个Component配置指定的。 在渲染时，将会查找ptype以决定创建何种类型的Plugin。

如果你创建自己的Plugin，你可以通过 Ext.ComponentMgr.registerPlugin 对它们进行注册，以便能利用懒初始化和渲染机制。
Component
ref : String
一个路径描述，与组件的 ownerCt 相关，它描述了把当前组件的命名引用放置到哪个父容器中去。...

一个路径描述，与组件的 ownerCt 相关，它描述了把当前组件的命名引用放置到哪个父容器中去。

祖先的坐标路径可以通过'/'字符进行分隔。 例如，将一个Toolbar Button的引用放入 拥有此Toolbar的Panel中:

var myGrid = new Ext.grid.EditorGridPanel({
    title: 'My EditorGridPanel',
    store: myStore,
    colModel: myColModel,
    tbar: [{
        text: 'Save',
        handler: saveChanges,
        disabled: true,
        ref: '../saveButton'
    }],
    listeners: {
        afteredit: function() {
//          The button reference is in the GridPanel
            myGrid.saveButton.enable();
        }
    }
});

在上面的代码中，如果 ref 是 'saveButton' ，那么引用将会被放置到Toolbar中。 ref 中的每个'/' 都会从组件的 ownerCt 向上移动一级。

另请参见 added 和 removed 事件。

Component
region : String
注: 此配置只用于该组件展现在一个布局为BorderLayout的容器中...

注: 此配置只用于该组件展现在一个布局为BorderLayout的容器中(例如指定layout:'border')。

详见Ext.layout.BorderLayout。

BoxComponent
renderTo : Mixed
该值可以是一个节点的id、一个DOM节点或者一个已存在的元素...

该值可以是一个节点的id、一个DOM节点或者一个已存在的元素， 组件将会被渲染到其中。

  • 注意 :
      如果组件不是一个Container 的子项目时， 不要使用此选项。 渲染和管理它的子项目是一个Container 的layout manager的责任。
      当使用此配置项时，无需调用render()方法。

另请参见 render 。

Component
seriesStyles : Object
图表刷新后将要应用于各序列的样式。默认为 null.
Chart
stateEvents : Array
一个事件数组，当它们被触发时，组件需要保存自己的状态(默认值为 none)...

一个事件数组，当它们被触发时，组件需要保存自己的状态(默认值为 none)。 它们可以是任何该组件支持的事件类型，包括浏览器事件和 自定义事件(例如['click', 'customerchange'])。

对于保存和恢复组件状态的详细解释，参见 stateful

Component
stateId : String
为该组件指定的唯一的id值，它被用作管理组件状态的目的...
为该组件指定的唯一的id值，它被用作管理组件状态的目的。 (如果设定了id，默认值为组件自己的id，否则，如果组件使用自动生成的id，此值为null)。

对于保存和反解析组件状态的解释，参见 stateful 。

Component
stateful : Boolean
一个标志参数，它将引起组件在启动时尝试从一个保存的状态中恢复内部状态参数...

一个标志参数，它将引起组件在启动时尝试从一个保存的状态中恢复内部状态参数。 组件必须要么拥有一个 stateId 或者 id ，它们被分配给需要被管理的状态属性。 在跨页面加载时，不保证自动生成的id属性的稳定性， 并且，不能依赖此id来保存和恢复一个组件的相同状态。

为了保存状态的操作能够工作，状态管理器的提供者必须 被设置成一个Ext.state.Provider 的实现类，它覆盖了set 和get 方法，以便保存和恢复name/value对。 有一个内置的Ext.state.CookieProvider 可用。

为当前页面设置状态提供者:

Ext.state.Manager.setProvider(new Ext.state.CookieProvider({
    expires: new Date(new Date().getTime()+(1000*60*60*24*7)), //7 days from now
}));

当 stateEvents 配置项中其中之一的事件被触发时， 一个状态可保存的组件将试图保存其状态。

保存状态时，一个可保存状态的组件首先需要通过调用 getState 方法来序列化它的状态。 默认情况下，此函数什么事都不做。 开发者必须提供一个实现，返回一个hash对象，它描述了组件可恢复的状态。

getState方法产生的值将会传递给 Ext.state.Manager.set 方法，它使用配置的 Ext.state.Provider 来保存对象，以组件的 stateId 为key，或者，如果此值（指stateId）没有指定时， 使用它的 id 作为key。

在进行构造时，一个可保存状态的组件试图通过调用 Ext.state.Manager.get方法来 恢复它的状态，传递 stateId 或者，如果此值（指stateId）没有指定时， 使用它的 id 作为参数。

结果对象被传递给 applyState 。 applyState 的默认实现只是简单地把属性拷贝到对象中， 但是开发者可以覆盖此方法以支持更多行为。

通过向 beforestaterestore, staterestore, beforestatesave 和 statesave 事件上绑定监听器，你可以在保存和恢复状态时进行额外的处理。

Component
style : String
被添加到组件元素的特定样式。 必须是按照...
被添加到组件元素的特定样式。 必须是按照 Ext.Element.applyStyles 类指定格式的合法参数值。

new Ext.Panel({
    title: 'Some Title',
    renderTo: Ext.getBody(),
    width: 400, height: 300,
    layout: 'form',
    items: [{
        xtype: 'textarea',
        style: {
            width: '95%',
            marginBottom: '10px'
        }
    },
        new Ext.Button({
            text: 'Send',
            minWidth: '100',
            style: {
                marginBottom: '10px'
            }
        })
    ]
});
Component
tabTip : String
注: 这个配置只用于当该组件作为TabPanel的一个子项目时使用...

注: 这个配置只用于当该组件作为TabPanel的一个子项目时使用。

一个String类型的innerHTML(支持html标签)，当鼠标放在该选项上的时，显示一个tooltip。为了tips能够被渲染，Ext.QuickTips.init()必须被提前调用。
BoxComponent
tpl : Mixed
一个 Ext.Template , Ext.XTemplate 或者一个用来形成一个Ext.XTemplate的字符串数组...
一个 Ext.Template , Ext.XTemplate 或者一个用来形成一个Ext.XTemplate的字符串数组。 与 data 和 tplWriteMode 配置项协同使用。
Component
tplWriteMode : String
刷新组件的内容区域时使用的Ext.(X)Template方式。 默认为'overwrite' (参见 Ext.XTemplate.overwrite )。
刷新组件的内容区域时使用的Ext.(X)Template方式。 默认为'overwrite' (参见 Ext.XTemplate.overwrite )。
Component
url : String
需要包含在chart中的URL。默认为 undefined。
Chart
width : Number
组件的宽度(默认值为 auto)。注:如果想使用百分比的方式...
组件的宽度(默认值为 auto)。注:如果想使用百分比的方式来设置值，请查看 Ext.Component.anchor。
BoxComponent
wmode : String
flash对象的wmode。此参数可以用来控制层叠次序。默认为 'opaque'。
FlashComponent
x : Number
如果被包含在一个指定位置的容器中，这个值表示x(left)坐标值。
BoxComponent
xtype : String
需要创建配置的xtype。 当传递一个配置对象给构造函数时...
需要创建配置的xtype。 当传递一个配置对象给构造函数时，此配置选项不会被使用。 只有在使用懒初始化的时候此配置项才会被使用，此时容器的子项目不是 通过一个完整的实例组件，而是通过一个Component配置指定的。 在渲染时，将会查找xtype以决定创建何种类型的子组件。

预定义的xtype列表如下： here。

如果你继承Component创建你自己的组件，你需要使用Ext.ComponentMgr.registerType 对它们进行注册，以便利用懒初始化和渲染机制。
Component
y : Number
如果被包含在一个指定位置的容器中，这个值表示y(top)坐标值。
BoxComponent

公共属性

Property Defined By
CHART_URL : String
设置从哪里加载图表。应该设置为本地图表源（路径）。
Chart
EXPRESS_INSTALL_URL : String
如果不存在，为初始化flash设置的url。 此参数应该设置为一个本地资源。
FlashComponent
disabled : Boolean
当前组件处于无效状态时为true。 Read-only.
Component
el : Ext.Element
封装了当前组件的Ext.Element。 Read-only。通常情况下，这将是一个<DIV>元素，它由此类的...

封装了当前组件的Ext.Element。 Read-only。

通常情况下，这将是一个<DIV>元素，它由此类的 onRender方法创建，但是它可以通过使用 autoEl 配置项进行覆盖。

注意: 直到组件渲染完成此元素都将处于无效状态。

如需向当前组件的 DOM事件(而不是当前组件自己的Observable事件)添加监听器， 更多建议，参见 listeners 配置项，或者直接使用一个render监听器:

new Ext.Panel({
    title: 'The Clickable Panel',
    listeners: {
        render: function(p) {
            // Append the Panel to the click handler's argument list.
            p.getEl().on('click', handlePanelClick.createDelegate(null, [p], true));
        },
        single: true  // Remove the listener after first invocation
    }
});

另请参见 getEl

Component
hidden : Boolean
如果当前组件处于隐藏状态，此值为true。Read-only。
Component
initialConfig : Object
当前组件的初始化配置描述。 Read-only。
Component
ownerCt : Ext.Container
组件所属的Container (默认为undefined，当前组件被添加到一个容器中时此值被自动设置)...
组件所属的Container (默认为undefined，当前组件被添加到一个容器中时此值被自动设置)。 Read-only。

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

Component
refOwner : Ext.Container
如果当前组件是一个容器的孩子，并且是通过一个 ref 配置项被注册的，则此值为 ref 引用被插入到的祖先容器。
如果当前组件是一个容器的孩子，并且是通过一个 ref 配置项被注册的，则此值为 ref 引用被插入到的祖先容器。
Component
rendered : Boolean
如果当前组件已经被渲染了，此值为true。Read-only.
Component

公共方法

Method Defined By
CartesianChart()
参数:
  • 无。
返回值:
  • void
CartesianChart
addClass ( string cls ) : Ext.Component
为组件底层的元素添加CSS样式。
为组件底层的元素添加CSS样式。
参数:
  • cls : string
    需要添加的CSS样式的class名称
返回值:
  • Ext.Component
    this
Component
addEvents( Object|String o, string Optional. ) : void
添加指定的事件到事件列表上，事件会被该Observable触发。
添加指定的事件到事件列表上，事件会被该Observable触发。
参数:
  • o : Object|String
    以事件名作为属性true作为值的对象 或者当多个事件名被分开的传递时则为第一个事件名。
  • Optional. : string
    事件名被分开的传递时则为事件名。 用法:
    this.addEvents('storeloaded', 'storecleared');
返回值:
  • void
Observable
addListener( String eventName, Function handler, [Object scope], [Object options] ) : void
给对象添加事件处理器。
给对象添加事件处理器。
参数:
  • eventName : String
    监听的事件名。
  • handler : Function
    事件调用的方法
  • scope : Object
    （可选）处理方法执行的作用域 (this的引用 reference)。 如果被忽略。默认为触发事件的对象。
  • options : Object
    （可选）包含处理器配置和属性的对象。 可能包含以下的属性:
    • scope : Object
      处理方法执行的作用域(this的引用) 。 如果被忽略。默认为触发事件的对象。
    • delay : Number
      在触发事件后延迟调用处理器的毫秒数。
    • single : Boolean
      如果为True则添加一个处理器来处理下一次的事件触发（仅一次），然后移除自己。
    • buffer : Number
      使得处理器延迟指定毫秒数后预定的运行在 一个Ext.util.DelayedTask中 。 如果事件在时间内再一次被触发，原始的处理器不会被调用，但是新的处理器会预定的在他的位置上。
    • target : Observable
      如果事件在目标的Observable上触发则仅仅调用处理器， 否则 事件会从子类的Observable上冒泡

    组合选项
    使用这些选项参数,可能会组合出不同类型的监听器：

    一个延迟的，一次性的监听器。

    myDataView.on('click', this.onClick, this, {
single: true,
delay: 100
});

    一次调用附加多个处理器
    该方法同样支持传递一个包含指定的多个处理器的属性的配置对象参数。

    myGridPanel.on({
'click' : {
    fn: this.onClick,
    scope: this,
    delay: 100
},
'mouseover' : {
    fn: this.onMouseOver,
    scope: this
},
'mouseout' : {
    fn: this.onMouseOut,
    scope: this
}
});

    或者一个简写的语法：

    myGridPanel.on({
'click' : this.onClick,
'mouseover' : this.onMouseOver,
'mouseout' : this.onMouseOut,
 scope: this
});
返回值:
  • void
Observable
applyToMarkup ( String/HTMLElement el ) : void
将此组件添加到已存在的有效的HTML标签中。 使用该方法时，无需再调用render()方法。
将此组件添加到已存在的有效的HTML标签中。 使用该方法时，无需再调用render()方法。
参数:
  • el : String/HTMLElement
返回值:
  • void
Component
bindStore ( Store store ) : void
改变图表绑定的数据集，并刷新。
改变图表绑定的数据集，并刷新。
参数:
  • store : Store
    绑定到图表的数据集合。
返回值:
  • void
Chart
cloneConfig ( Object overrides ) : Ext.Component
默认使用原先传递给当前实例的配置值克隆当前组件。
默认使用原先传递给当前实例的配置值克隆当前组件。
参数:
  • overrides : Object
    一个新的配置项，包含需要覆盖到克隆版本的所有属性。 可以传递一个id参数给此对象，否则将自动生成一个新的id以避免发生重复。
返回值:
  • Ext.Component
    当前组件的克隆副本
Component
destroy () : void
通过如下方法销毁对象：删除所有的事件监听器、将组件的元素从DOM树中删除...
通过如下方法销毁对象：删除所有的事件监听器、将组件的元素从DOM树中删除（如果可以）、 将组件从它的 Ext.Container（如果可用）中删除、 并且将它从Ext.ComponentMgr中 注销。 销毁操作一般由框架自动完成，一般情况下不需要直接调用该方法。
参数:
  • 无。
返回值:
  • void
Component
disable () : Ext.Component
将组件置为无效状态，并出发'disable'事件。
将组件置为无效状态，并出发'disable'事件。
参数:
  • 无。
返回值:
  • Ext.Component
    this
Component
enable () : Ext.Component
将组件置为有效状态并触发'enable'事件。
将组件置为有效状态并触发'enable'事件。
参数:
  • 无。
返回值:
  • Ext.Component
    this
Component
enableBubble( String/Array events ) :void
是否现在使得事件会被该Observable触发并调用 this.getBubbleTarget()方法在拥有者的继承树...

是否现在使得事件会被该Observable触发并调用 this.getBubbleTarget()方法在拥有者的继承树中冒泡。Observable的基础类中没有该方法的实现。

该方法一般被Ext.Components用来冒泡事件到拥有者的容器。参看Ext.Component.getBubbleTarget默认的实现 在Ext.Component中返回组件的直接拥有者。但是如果需要的是一个已知的目标，该方法可以被重写来更快的访问需求的目标。

例子:

Ext.override(Ext.form.Field, {
    // 添加方法到Field的initComponent上改变事件为冒泡
    initComponent : Ext.form.Field.prototype.initComponent.createSequence(function() {
        this.enableBubble('change');
    }),

    // 我们知道我们想让Field的事件冒泡到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() {
            // 如果样式被修改标题会变红。
            myForm.header.setStyle('color', 'red');
        }
    }
});
参数:
  • events : String/Array
    冒泡的事件名，或事件名数组
返回值:
  • void
Observable
findParentBy ( Function fn ) : Ext.Container
通过自定义的函数查找当前组件上层任何层次上的容器...
通过自定义的函数查找当前组件上层任何层次上的容器。 如果传递的函数返回true，容器对象将被返回。
参数:
  • fn : Function
    自定义的函数，使用如下参数调用(container,this component)。
返回值:
  • Ext.Container
    自定义函数返回true的第一个容器
Component
findParentByType ( String/Class xtype ) : Ext.Container
通过xtype或者class查找当前组件上层任何层次上的容器
通过xtype或者class查找当前组件上层任何层次上的容器
参数:
  • xtype : String/Class
    组件的xtype字符串，或者直接是组件的class
返回值:
  • Ext.Container
    符合指定xtype或者class的第一个容器
Component
fireEvent( String eventName, Object... args ) : Boolean
用传入的参数触发指定的事件 (减去事件名)。 一个事件可以被设置为冒泡 Obse...

用传入的参数触发指定的事件 (减去事件名)。

一个事件可以被设置为冒泡到Observable父类继承树(参看 Ext.Component.getBubbleTarget) 调用enableBubble实现。

参数:
  • eventName : String
    触发的事件名。
  • args : Object...
    传递给处理器的可变长度参数。
返回值:
  • Boolean
    如果有任何的处理器返回false则返回false，否则返回true。
Observable
focus ( [ Boolean selectText ], [ Boolean/Number delay ] ) : Ext.Component
尝试将当前组件设为焦点。
尝试将当前组件设为焦点。
参数:
  • selectText : Boolean
    (可选) 如果可用，同时选中组件内部的文本
  • delay : Boolean/Number
    (可选)将当前组件设置为焦点的延迟时间(设置为true等于0毫秒)
返回值:
  • Ext.Component
    this
Component
getBox ( [ Boolean local ] ) : Object
获取组件底层元素当前盒子模型的尺寸。（译者注：盒子模型是CSS术语，详细解释请自行搜索。）
获取组件底层元素当前盒子模型的尺寸。（译者注：盒子模型是CSS术语，详细解释请自行搜索。）
参数:
  • local : Boolean
    (可选)值为true时，组件的left值和top值将代替页面的XY被返回。(默认值为false)
返回值:
  • Object
    返回值的格式{x, y, width, height}
BoxComponent
getBubbleTarget () : Ext.Container
为Observable的fireEvent方法提供链接，它沿着继承结构进行冒泡操作。
为Observable的fireEvent方法提供链接，它沿着继承结构进行冒泡操作。
参数:
  • 无。
返回值:
  • Ext.Container
    拥有当前组件的容器。
Component
getEl () : Ext.Element
返回 Ext.Element ，它包装了当前组件。...

返回 Ext.Element ，它包装了当前组件。

通常情况下，这将是一个<DIV>元素，它是由该类的onRender方法创建的， 但是可以使用autoEl配置项 覆盖它。

注意: 此元素将会一直处于无效状态直到当前组件渲染完成。

如需向当前组件的 DOM事件(而不是当前组件自己的Observable事件)添加监听器， 更多建议，参见 listeners 配置项，或者直接使用一个render监听器:

new Ext.Panel({
    title: 'The Clickable Panel',
    listeners: {
        render: function(p) {
            // Append the Panel to the click handler's argument list.
            p.getEl().on('click', handlePanelClick.createDelegate(null, [p], true));
        },
        single: true  // Remove the listener after first invocation
    }
});
参数:
  • 无。
返回值:
  • Ext.Element
    包装当前组件的元素。
Component
getHeight () : Number
获取该组件的当前高度值。
获取该组件的当前高度值。
参数:
  • 无。
返回值:
  • Number
BoxComponent
getId () : String
返回当前组件的id，如果没有定义id，则自动生成并返回一个id:'ext-comp-'...
返回当前组件的 id 如果没有定义 id 则自动生成并返回一个 id

'ext-comp-' + (++Ext.Component.AUTO_ID)
参数:
  • 无。
返回值:
  • String
    id
Component
getItemId () : String
返回当前组件的 itemId 。 如果没有通过配置参数指定 itemId 那么，将会使用...
返回当前组件的 itemId 。 如果没有通过配置参数指定 itemId 那么，将会使用 getId 返回 id 。
参数:
  • 无。
返回值:
  • String
Component
getOuterSize () : Object
获取当前组件所在元素的尺寸大小，包括边缘的空白处。
获取当前组件所在元素的尺寸大小，包括边缘的空白处。
参数:
  • 无。
返回值:
  • Object
    一个包含元素大小的对象 {width: (element width + left/right margins), height: (element height + top/bottom margins)}
BoxComponent
getPosition ( [ Boolean local ] ) : Array
获取组件底层元素当前的XY位置。
获取组件底层元素当前的XY位置。
参数:
  • local : Boolean
    (可选)如果为true，将返回元素的left和top值，而不是相对于页面内的 XY。(默认值为 false)
返回值:
  • Array
    元素的XY位置值(例如：[100, 200])
BoxComponent
getResizeEl () : Ext.Element
返回该组件的最外层用来定义这些组件整体大小的Element...

返回该组件的最外层用来定义这些组件整体大小的Element对象。

通常用 getEl 方法将会返回相同的Element对象，但在有些情况下，组件可能有一些更多的封装了它的主要动态Element对象的Element对象。

例如ComboBox。它是封装在一个包含<input>元素的包装元素里(这将返回其 getEl方法和触发按钮的元素)。返回的元素为resizeEl。

参数:
  • 无。
返回值:
  • Ext.Element
    The Element which is to be resized by size managing layouts.
BoxComponent
getSize () : Object
获取组件底层元素当前的大小。
获取组件底层元素当前的大小。
参数:
  • 无。
返回值:
  • Object
    一个包含元素大小的对象{width: (element width), height: (element height)}
BoxComponent
getWidth () : Number
获取该组件的当前宽度值。
获取该组件的当前宽度值。
参数:
  • 无。
返回值:
  • Number
BoxComponent
getXType () : String
获取当前组件的xtype，它是用 Ext.ComponentMgr 注册的。 所有可用的xtype列表，参见...
获取当前组件的xtype，它是用 Ext.ComponentMgr 注册的。 所有可用的xtype列表，参见 Ext.Component 类头部。示例用法:

var t = new Ext.form.TextField();
alert(t.getXType());  // alerts 'textfield'
参数:
  • 无。
返回值:
  • String
    The xtype
Component
getXTypes () : String
返回此组件的xtype继承树，用字符'-'分隔。 所有可用的xtype值...

返回此组件的xtype继承树，用字符'-'分隔。 所有可用的xtype值，请参见Ext.Component 类的头部。

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

示例用法:

var t = new Ext.form.TextField();
alert(t.getXTypes());  // alerts 'component/box/field/textfield'
参数:
  • 无。
返回值:
  • String
    xtype层次字符串
Component
hasListener( String eventName ) : Boolean
检测对象是否包含指定事件的任何监听器
检测对象是否包含指定事件的任何监听器
参数:
  • eventName : String
    检测的事件名
返回值:
  • Boolean
    如果事件被监听则为true，否则为false
Observable
hide () : Ext.Component
隐藏当前组件。 监听 beforehide' 事件并且返回false 可以取消隐藏组件的操作。 在隐藏组件之后触发...
隐藏当前组件。 监听 beforehide' 事件并且返回false 可以取消隐藏组件的操作。 在隐藏组件之后触发 ' hide' 事件。 如果组件被配置成 hidden 那么此方法在内部被调用。
参数:
  • 无。
返回值:
  • Ext.Component
    this
Component
isVisible () : Boolean
如果当前组件可见，返回true。
如果当前组件可见，返回true。
参数:
  • 无。
返回值:
  • Boolean
    如果当前组件可见，返回true，其它返回false。
Component
isXType ( String xtype , [ Boolean shallow ] ) : Boolean
Tests whether or not this Component is of a specific xtype. This can test whether this Component is descended from th...

测试此组件是否是指定的xtype。此方法既可以测试是否是指定的xtype的某个子类， 或者它是否直接是指定的xtype类(shallow=true)。

如果使用你自己的子类，必须知道组件必须注册它的xtype值。

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

示例用法:

var t = new Ext.form.TextField();
var isText = t.isXType('textfield');        // true
var isBoxSubclass = t.isXType('box');       // true, descended from BoxComponent
var isBoxInstance = t.isXType('box', true); // false, not a direct BoxComponent instance
参数:
  • xtype : String
    需要为当前组件进行检测的xtype
  • shallow : Boolean
    (可选) 如果为false，检测组件是否是xtype继承树中的某个子类（默认是这种情况）， 如果为true，只检测组件是否是指定的xtype类型。
返回值:
  • Boolean
    如果当前组件是指定xtype的子类，返回true，其它返回flase。
Component
mon ( Observable|Element item , Object|String ename , Function fn , Object scope , Object opt ) : void
向任何Observable对象(或者元素)上添加监听器，监听器将会在组件...

向任何Observable对象(或者元素)上添加监听器，监听器将会在组件销毁时被自动删除。
用法：

myGridPanel.mon(myGridPanel.getSelectionModel(), 'selectionchange', handleSelectionChange, null, {buffer: 50});

or:

myGridPanel.mon(myGridPanel.getSelectionModel(), {
    selectionchange: handleSelectionChange,
    buffer: 50
});
参数:
  • item : Observable|Element
    需要添加listener/listeners的项目。
  • ename : Object|String
    事件名，或者一个包含事件名属性的对象。
  • fn : Function
    (可选) 如果 ename 参数是一个事件名，此参数为处理函数。
  • scope : Object
    (可选)如果 ename 参数是一个事件名称，此参数是作用域 ( this 引用)，监听函数将会在此作用域中被执行。
  • opt : Object
    (可选)如果 ename 参数是一个事件名称， 此参数是 addListener 配置项。
返回值:
  • void
Component
mun ( Observable|Element item , Object|String ename , Function fn , Object scope ) : void
删除通过mon 方法添加的监听器。
删除通过mon 方法添加的监听器。
参数:
  • item : Observable|Element
    需要删除listener/listeners的项目。
  • ename : Object|String
    事件名称，或者一个包含事件名称属性的对象。
  • fn : Function
    (可选)如果 ename 参数是一个事件名称，此参数是一个处理函数。
  • scope : Object
    (可选)如果 ename 参数是一个事件名称，此参数是作用域 ( this 引用)，监听函数将会在此作用域中被执行。
返回值:
  • void
Component
nextSibling () : Ext.Component
返回所属容器中的下一个组件
返回所属容器中的下一个组件
参数:
  • 无。
返回值:
  • Ext.Component
Component
on( String eventName, Function handler, [Object scope], [Object options] ) : void
给对象添加事件处理器 (addListener的简写形式)
给对象添加事件处理器 (addListener的简写形式。)
参数:
  • eventName : String
    监听的事件类型
  • handler : Function
    事件调用的方法
  • scope : Object
    （可选）处理方法执行时的作用域 (this 的引用)。 如果被忽略。默认为触发事件的对象。
  • options : Object
    可选 包含处理器配置的对象。
返回值:
  • void
Observable
previousSibling () : Ext.Component
返回所属容器中的前一个组件
返回所属容器中的前一个组件
参数:
  • 无。
返回值:
  • Ext.Component
Component
purgeListeners() : void
移除对象上所有的监听器
移除对象上所有的监听器
参数:
  • 无。
返回值:
  • void
Observable
relayEvents( Object o, Array events ) : void
从指定的Observable上传递选择的事件就好像被当前对象触发一样。
从指定的Observable上传递选择的事件就好像被当前对象触发一样。
参数:
  • o : Object
    该Observable上的事件被当前对象传递。
  • events : Array
    传递的数组名。
返回值:
  • void
Observable
removeClass ( string cls ) : Ext.Component
从组件底层的元素上删除一个CSS类。
从组件底层的元素上删除一个CSS类。
参数:
  • cls : string
    需要移除的CSS类名
返回值:
  • Ext.Component
    this
Component
removeListener( String eventName, Function handler, [Object scope] ) : void
删除一个事件处理器。
删除一个事件处理器。
参数:
  • eventName : String
    处理器关联的事件类型。
  • handler : Function
    移除的处理器。 这应该是传递到addListener里的方法的引用。
  • scope : Object
    （可选）处理器指定的初始作用域。
返回值:
  • void
Observable
render ( [ Element/HTMLElement/String container ], [ String/Number position ] ) : void
在传递进来的HTML元素中渲染当前组件。...

在传递进来的HTML元素中渲染当前组件。

如果你正在使用一个Container 对象放置当前组件，那么请不要使用render方法。

当容器第一次被渲染时，它的子组件将会被容器的 layout 管理器渲染。

某些布局管理器允许动态添加子组件。它们包括 Ext.layout.CardLayout, Ext.layout.AnchorLayout, Ext.layout.FormLayout, Ext.layout.TableLayout。

当一个新的子组件被添加时，如果容器已经被渲染了， 你可能需要调用容器的 doLayout 方法来刷新视图，它将导致所有没有被渲染的子组件进行渲染操作。 此操作是必须的，这样你可以添加多个子组件而只刷新一次layout。

当创建复杂的UI时，非常重要的一点是，请记住调整子项目的尺寸和位置是容器的 layout 管理器的职责。 如果你希望子项目的尺寸对用户交互作出反应， 你必须为容器配置一个布局管理器，它将创建和管理你心里想要的那种布局。

忽略容器的layout 配置意味着将会使用一个基本的布局管理器，它除了按次序把子组件 渲染到容器中之外什么事情都不做。 这种情况下，任何尺寸和位置的调整操作都不会发生。

参数:
  • container : Element/HTMLElement/String
    (可选) 需要在其中渲染当前组件的元素。 如果它是从一个已存在的标签中创建的，此参数应该被忽略。
  • position : String/Number
    (可选) 容器中的一个元素ID或者一个DOM节点索引， 当前组件将会被插入到它前面 (默认append到容器的尾部)
返回值:
  • void
Component
resumeEvents() : void
重新开始触发事件。(参见suspendEvents) 如果事件以queueSuspended参数被挂起，则在事件被挂起时 ...
重新开始触发事件。(参见 suspendEvents) 如果事件以queueSuspended 参数被挂起，则在事件被挂起时触发的事件会被传递到所有的监听器上
参数:
  • 无。
返回值:
  • void
Observable
setAutoScroll ( Boolean scroll ) : Ext.BoxComponent
设置该组件内容溢出时是否自动显示滚动条。
设置该组件内容溢出时是否自动显示滚动条。
参数:
  • scroll : Boolean
    值为true的话组件自动显示滚动条。
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setDisabled ( Boolean disabled ) : Ext.Component
工具函数，使用布尔值设置有效/无效(disabled/enabled )。
工具函数，使用布尔值设置有效/无效(disabled/enabled )。
参数:
  • disabled : Boolean
返回值:
  • Ext.Component
    this
Component
setHeight ( Mixed height ) : Ext.BoxComponent
设置此组件的高度。该方法将触发resize事件。
设置此组件的高度。该方法将触发resize事件。
参数:
  • height : Mixed
    The new height to set.
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setPagePosition ( Number x , Number y ) : Ext.BoxComponent
设置组件在页面中的XY位置。 如果需要设置left和top值 ，请使用...
设置组件在页面中的XY位置。 如果需要设置left和top值 ，请使用setPosition方法。 该方法触发move事件。
参数:
  • x : Number
    The new x position
  • y : Number
    The new y position
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setPosition ( Number left , Number top ) : Ext.BoxComponent
设置组件的left和top值。设置组件的页面XY值，请使用setPagePosition方法。该方法触发...
设置组件的left和top值。设置组件的页面XY值，请使用setPagePosition方法。该方法触发move事件。
参数:
  • left : Number
    The new left
  • top : Number
    The new top
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setSeriesStyles ( styles {Array} ) : void
为图表中所有序列设置样式。
为图表中所有序列设置样式。
参数:
  • {Array} : styles
    为列表中所有序列样式进行初始化。
返回值:
  • void
Chart
setSize ( Mixed width , Mixed height ) : Ext.BoxComponent
设置BoxComponent的宽度和高度。 此方法触发resize事件...
设置BoxComponent的宽度和高度。 此方法触发resize事件。此方法可以接收单独的width或者height值作为参数， 或者你可以传递像这样的一个size对象： {width:10, height:20} 。
参数:
  • width : Mixed
    设置的新的width值。这可以是：
    • 一个Number类型指定Element新的宽度 Ext.Element.defaultUnit(默认为像素 :'px')。
    • 一个String类型用于设置width的CSS样式。
    • 一个size对象格式为 {width: widthValue, height: heightValue} 。
    • 值为 undefined 时，保留原来的width不变。
  • height : Mixed
    设置的新的height值(如果第一个参数传递了一个size对象，此参数没有必要传递)。这可以是：
    • 一个Number类型指定Element新的高度 Ext.Element.defaultUnit(默认为像素 :'px')。
    • 一个String类型用于设置height的CSS样式。也有可能不会被使用到。
    • 值为 undefined 时，保留原来的height不变。
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setStyle ( name {String} , value {Object} ) : void
为图表实例设置单一样式值。
为图表实例设置单一样式值。
参数:
  • {String} : name
    将要改变的图表样式名称。
  • {Object} : value
    图表样式的新值。
返回值:
  • void
Chart
setStyles ( styles {Object} ) : void
重置图表实例上的所有样式。
Resets all styles on the Chart instance.
参数:
  • {Object} : styles
    Initializer for all Chart styles.
返回值:
  • void
Chart
setVisible ( Boolean visible ) : Ext.Component
工具方法，通过使用布尔值隐藏或者显示当前组件。
工具方法，通过使用布尔值隐藏或者显示当前组件。
参数:
  • visible : Boolean
    true时显示，false时隐藏
返回值:
  • Ext.Component
    this
Component
setWidth ( Mixed width ) : Ext.BoxComponent
设置组件的宽度。 此方法触发resize事件。
设置组件的宽度。 此方法触发resize事件。
参数:
  • width : Mixed
    The new width to set.
返回值:
  • Ext.BoxComponent
    this
BoxComponent
show () : Ext.Component
显示当前组件。监听' beforeshow' 事件，返回 false 取消显示组件...
显示当前组件。监听' beforeshow' 事件，返回 false 取消显示组件。在显示组件之后触发' show' 事件。
参数:
  • 无。
返回值:
  • Ext.Component
    this
Component
suspendEvents( Boolean queueSuspended ) : void
暂停触发所有的事件。 (参看resumeEvents)
暂停触发所有的事件。（参看 resumeEvents)
参数:
  • queueSuspended : Boolean
    如果传递为true则排列好暂停的事件使得在调用 resumeEvents 后再触发它们，而不是抛弃所有暂停的事件。
返回值:
  • void
Observable
syncSize () : Ext.BoxComponent
强制组件的大小按照此组件底层元素当前的高度和宽度计算。
强制组件的大小按照此组件底层元素当前的高度和宽度计算。
参数:
  • 无。
返回值:
  • Ext.BoxComponent
    this
BoxComponent
un( String eventName, Function handler, [Object scope] ) : void
删除一个事件处理器(removeListener方法的简写形式)
删除一个事件处理器(removeListener方法的简写形式。)
参数:
  • eventName : String
    处理器关联的事件类型
  • handler : Function
    被删除的处理器 这应该是传入 addListener 中的方法的引用。
  • scope : Object
    （可选）为处理器指定的初始作用域。
返回值:
  • void
Observable
update ( Mixed htmlOrData , [ Boolean loadScripts ], [ Function callback ] ) : void
刷新组件的内部区域。
刷新组件的内部区域。
参数:
  • htmlOrData : Mixed
    如果已经通过tpl为当前组件配置了一个模板，那么 将会使用此参数来装配模板。 如果没有为当前组件配置模板，组件的内容区域将会通过Ext.Element 进行刷新。
  • loadScripts : Boolean
    (可选)只用在使用html配置时此参数才合法。默认为false。
  • callback : Function
    (可选)只用在使用html配置时此参数才合法。 当脚本加载完成时回调函数才被执行。
返回值:
  • void
Component
updateBox ( Object box ) : Ext.BoxComponent
设置此组件底层元素的盒子模型尺寸。(译者注：盒子模型是CSS术语，详细资料请自行搜索。)
设置此组件底层元素的盒子模型尺寸。(译者注：盒子模型是CSS术语，详细资料请自行搜索。)
参数:
  • box : Object
    一个格式为{x, y, width, height}的对象
返回值:
  • Ext.BoxComponent
    this
BoxComponent

公共事件

Event Defined By
added : ( Ext.Component this , Ext.Container ownerCt , number index )
当一个组件被添加到一个Ext.Container时触发
当一个组件被添加到一个Ext.Container时触发
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • ownerCt : Ext.Container
    用于组件的容器
  • index : number
    添加组件的位置
Component
afterrender : ( Ext.Component this )
在组件渲染完成之后触发...

在组件渲染完成之后触发。

afterrender事件在当前组件被rendered 结束之后、在为组件定义的所有afterRender方法执行之后 触发，并且，如果有stateful， 也在状态被保存之后才触发。

监听器将会以如下参数格式被调用:
  • this : Ext.Component
Component
beforedestroy : ( Ext.Component this )
在组件 destroyed 之前触发。 在事件监听器中返回false以停止 destroy 操作。
在组件 destroyed 之前触发。 在事件监听器中返回false以停止 destroy 操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforehide : ( Ext.Component this )
在调用hide方法隐藏组件之前触发。 在事件监听器中返回false可以停止隐藏操作。
在调用hide方法隐藏组件之前触发。 在事件监听器中返回false可以停止隐藏操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforerefresh : ( Chart this )
在图表数据刷新前触发。如果beforerefresh处理函数返回false则refresh动作...
在图表数据刷新前触发。如果beforerefresh处理函数返回false则 refresh 动作将被取消。
监听函数被调用时将传递如下参数：
  • this : Chart
Chart
beforerender : ( Ext.Component this )
在组件被rendered 之前触发。 在事件监听器中返回false可以停止render 操作。
在组件被rendered 之前触发。 在事件监听器中返回false可以停止render 操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforeshow : ( Ext.Component this )
在调用show()方法现实组件之前触发。 事件处理函数返回false可以停止show。
在调用show 方法现实组件之前触发。 事件处理函数返回false可以停止show。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforestaterestore : ( Ext.Component this , Object state )
在组件状态恢复之前触发。返回false停止恢复状态操作。
在组件状态恢复之前触发。返回false停止恢复状态操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    StateProvider返回的状态哈希值。 如果没有禁止此事件，那么状态对象会被传递给applyState。 默认情况下，这样简单地把属性值拷贝到当前组件中。 可以覆盖此方法以提供自定的状态恢复操作。
Component
beforestatesave : ( Ext.Component this , Object state )
在组件状态被保存到配置的状态提供者之前触发。 返回false可以停止保存。
在组件状态被保存到配置的状态提供者之前触发。 返回false可以停止保存。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    状态值哈希。 这由在组件上调用getState() 方法决定。 此方法必须由开发者提供，返回是否需要对状态进行描述，默认情况下， Ext.Component有一个空实现。
Component
destroy : ( Ext.Component this )
在组件被销毁之后触发。
在组件被destroyed之后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
disable : ( Ext.Component this )
在组件被设置为无效状态后触发。
在组件被设置为无效状态后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
enable : ( Ext.Component this )
当组件被设置为有效(enabled)之后触发。
当组件被设置为有效(enabled)之后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
hide : ( Ext.Component this )
在组件被隐藏之后触发。 当调用hide 方法隐藏组件之后触发。
在组件被隐藏之后触发。 当调用hide 方法隐藏组件之后触发。
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
initialize : ( Chart this )
监听器将会以如下参数格式被调用:
  • this : Chart
FlashComponent
move : ( Ext.Component this , Number x , Number y )
在组件移动之后触发。
在组件移动之后触发。
监听器将会用如下的参数格式来调用:
  • this : Ext.Component
  • x : Number
    The new x position
  • y : Number
    The new y position
BoxComponent
refresh : ( Chart this )
图表数据刷新后触发。
图表数据刷新后触发。
监听函数被调用时将传递如下参数：
  • this : Chart
Chart
removed : ( Ext.Component this , Ext.Container ownerCt )
当一个组件被从Ext.Container容器中删除时触发
当一个组件被从Ext.Container容器中删除时触发
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • ownerCt : Ext.Container
    持有组件的容器
Component
render : ( Ext.Component this )
在组件被渲染之后触发。
在组件被 rendered(渲染) 之后触发。
监听器将以如下的参数格式被调用:
  • this : Ext.Component
Component
resize : ( Ext.Component this , Number adjWidth , Number adjHeight , Number rawWidth , Number rawHeight )
在组件被调整大小之后触发。
在组件被调整大小之后触发。
监听器将以如下的参数格式被调用:
  • this : Ext.Component
  • adjWidth : Number
    这是width调整后的值
  • adjHeight : Number
    这是height调整后的值
  • rawWidth : Number
    这是width原来的值
  • rawHeight : Number
    这是height原来的值
BoxComponent
show : ( Ext.Component this )
在调用show 方法显示组件之后触发。
在调用show 方法显示组件之后触发。
监听器将会用如下的参数格式被调用:
  • this : Ext.Component
Component
staterestore : ( Ext.Component this , Object state )
组件状态被存储之后触发。
组件状态被存储之后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    StateProvider返回的状态哈希值。 如果没有禁止此事件，那么状态对象会被传递给applyState。 默认情况下，这样简单地把属性值拷贝到当前组件中。 可以覆盖此方法以提供自定的状态恢复操作。
Component
statesave : ( Ext.Component this , Object state )
在组件状态被保存到所配置的状态提供者之后触发。
在组件状态被保存到所配置的状态提供者之后触发。
监听器将会用如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    状态值hash。 这是由在足见上调用getState() 方法决定的。 开发者必须提供此方法以返回是否需要恢复状态，默认情况下， Ext.Component有一个空实现。
Component


Series
    CartesianSeries

Class Ext.chart.CartesianSeries

包: | Ext.chart
定义类的文件: | Chart.js
类: | CartesianSeries
子类: | BarSeries, ColumnSeries, LineSeries
继承自: | Series
图标控件中的CartesianSeries（笛卡尔序列）类。

公共属性

Property |  | Defined By
 | axis : String 指明该序列绑定的坐标。 | CartesianSeries
 | displayName : String 序列名。 | Series
 | showInLegend : Boolean 如果为false，将在图例说明里不显示该序列。 默认为true. | CartesianSeries
 | type : String 序列类型。 | Series
 | xField : String 用来访问数据源项目中x轴数值的字段。 | CartesianSeries
 | yField : String 数据源的各项中横坐标（x轴）对应的字段名。 | CartesianSeries

公共方法

该类没有公共方法。

公共事件

该类没有公共事件。


Axis
    CategoryAxis

Class Ext.chart.CategoryAxis

包: | Ext.chart
定义类的文件: | Chart.js
类: | CategoryAxis
继承自: | Axis
一种显示分类项的坐标。

公共属性

Property |  | Defined By
 | calculateCategoryCount : Boolean 指明是否要在坐标轴上无法提供足够空间时，计算坐标轴上的分类（刻度或者标签）数量。如果设置为true，则在... 指明是否要在坐标轴上无法提供足够空间时，计算坐标轴上的分类（刻度或者标签）数量。如果设置为true，则在显示坐标轴时会由分类数目决定，反之将显示全部标签。 | CategoryAxis
 | categoryNames : Array 沿着坐标轴显示的分类名称列表。 | CategoryAxis
 | hideOverlappingLabels : Boolean 如果为true，坐标轴上，与之前标签重叠的标签将被隐藏。 | Axis
 | labelFunction : String 一个全局函数的字符串引用。用来定义坐标轴上每个标签的值。 | Axis
 | labelSpacing : Number 坐标轴上，以像素（pixel）为单位的标签间距。 | Axis
 | orientation : String 定义坐标方向。可选值为“horizontal”（水平方向）或者“vertical”（垂直方向）。 | Axis
 | reverse : Boolean 如果为true，坐标轴上的元素将以相反方向渲染。 | Axis
 | type : String 坐标轴的种类。 | Axis

公共方法

该类没有公共方法。

公共事件

该类没有公共事件。


Observable
    Component
      BoxComponent
        FlashComponent
          Chart

Class Ext.chart.Chart

包: | Ext.chart
定义类的文件: | Chart.js
类: | Chart
子类: | CartesianChart, PieChart
继承自: | FlashComponent
Ext.chart包提供了在flash图表中显示数据的功能。所有的chart（图表）都直接和Ext.data.Store绑定，允许动态更新。如果想要改变chart（图表）的外观和用户体验，请参考 chartStyle 和 extraStyle 配置项。

配置项

Config Options Defined By
allowDomMove : Boolean
在渲染时组件是否可以移动Dom节点(默认为true)。
Component
anchor : String
注: 这个配置只用于该组件被包含在一个已使用AnchorLayout...

注: 这个配置只用于该组件被包含在一个已使用 AnchorLayout (或者其子类)配置的Container时。 基于布局管理器，例如：

  • Ext.form.FormPanel
  • 指定 layout: 'anchor' // or 'form', or 'absolute'

参见 Ext.layout.AnchorLayout. anchor 。

BoxComponent
applyTo : Mixed
指定一个元素的id、一个DOM元素或者一个已经存在并被渲染到DIV中的元素，此DIV已经被...

指定一个元素的id、一个DOM元素或者一个已经存在并被渲染到DIV中的元素，此DIV已经被 渲染到document中，并且为当前组件指定了一些结构化的标签。

  • 描述 :
      当使用了 applyTo， 在主元素中也可以用id或者CSS类名来指定组件的托管部分， 并且，如果可以的话，创建的组件可能也会试图在那个标签中创建它的子组件。
  • 注意 :
      当使用此配置项时，无需调用render()方法。
      如果指定了applyTo属性，任何传递给 renderTo 的值都会被忽略，并且目标元素的父节点将会自动被用作组件的容器。
Component
autoEl : Mixed
一个表签名或者一个 DomHelper 描述，用来创建 Element ，它将封装当前组件...

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

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

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

{
    xtype: 'box',
    autoEl: {
        tag: 'img',
        src: 'http://www.example.com/example.jpg'

    }
}, {
    xtype: 'box',
    autoEl: {
        tag: 'blockquote',
        html: 'autoEl is cool!'
    }
}, {
    xtype: 'container',
    autoEl: 'ul',
    cls: 'ux-unordered-list',
    items: {
        xtype: 'box',
        autoEl: 'li',
        html: 'First list item'
    }
}
Component
autoHeight : Boolean
如果值为true，height配置项为'auto'，否则值为false的话使用固定的高度...

如果值为true，height配置项为'auto'，否则值为false的话使用固定的高度， 或者可以由其父类容器 layout manager来控制。(默认值为 false)。

注: 虽然很多组件继承了这个配置选项，但不是所有这些组件的自适应高度配置都会像期望的那样起作用。 设置autoHeight：值为true时，浏览器将根据元素的内容自动设置高度，这将意味着Ext不会去管理高度。

如果是由浏览器来管理高度，需要注意的是，通过浏览器进行调整的结构组件内不能被发现， 因此宽度的变化可能导致需要进行同步处理元素的高度。 例如：

var w = new Ext.Window({
    title: 'Window',
    width: 600,
    autoHeight: true,
    items: {
        title: 'Collapse Me',
        height: 400,
        collapsible: true,
        border: false,
        listeners: {
            beforecollapse: function() {
                w.el.shadow.hide();
            },
            beforeexpand: function() {
                w.el.shadow.hide();
            },
            collapse: function() {
                w.syncShadow();
            },
            expand: function() {
                w.syncShadow();
            }
        }
    }
}).show();
BoxComponent
autoScroll : Boolean
如果值为true，将会在该元素上使用overflow:'auto'配置，并且在必要的时候...
如果值为true，将会在该元素上使用overflow:'auto'配置，并且在必要的时候自动显示滚动条，否则，溢出部分的组件都会被切除(默认值为 false)。
BoxComponent
autoShow : Boolean
如果组件需要检测隐藏CSS属性(如 'x-hidden' 或者 'x-hide-display')并且在渲染时删除...
如果组件需要检测隐藏CSS属性(如 'x-hidden' 或者 'x-hide-display')并且在渲染时删除它们 (默认为false)，设置此值为true。
Component
autoWidth : Boolean
如果为true，使用width:'auto'配置，否则使用固定的宽度...

如果为true，使用width:'auto'配置，否则使用固定的宽度，或者可以由其父类容器的layout manager来控制。(默认值为 false)。

注: 虽然很多组件继承了这个配置选项，但不是所有这些组件的自适应宽度配置都会像期望的那样起作用。 设置autoWidth：值为true时，浏览器将根据元素的内容自动设置宽度，这将意味着Ext不会去管理宽度。

如果是由浏览器来管理宽度，需要注意的是，通过浏览器进行调整的结构组件内不能被发现，因此宽度的变化可能导致需要进行同步处理元素的宽度。 例如，在这个元素的目标是：

<div id='grid-container' style='margin-left:25%;width:50%'></div>
当浏览器窗口改变时，渲染后的Panel必须监听浏览器窗口大小的变化，以便通知子项，浏览器改变了其宽度：

var myPanel = new Ext.Panel({
    renderTo: 'grid-container',
    monitorResize: true, // relay on browser resize
    title: 'Panel',
    height: 400,
    autoWidth: true,
    layout: 'hbox',
    layoutConfig: {
        align: 'stretch'
    },
    defaults: {
        flex: 1
    },
    items: [{
        title: 'Box 1',
    }, {
        title: 'Box 2'
    }, {
        title: 'Box 3'
    }],
});
BoxComponent
boxMaxHeight : Number
设置组件的最大高度值...

设置组件的最大高度值。

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

BoxComponent
boxMaxWidth : Number
设置组件的最大宽度值...

设置组件的最大宽度值。

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

BoxComponent
boxMinHeight : Number
设置组件的最小高度值...

设置组件的最小高度值。

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

BoxComponent
boxMinWidth : Number
设置组件的最小宽度值...

设置组件的最小宽度值。

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

BoxComponent
bubbleEvents : Array
一个事件数组，当这些事件被触发时，将会被冒泡到所有父容器中。参见....

一个事件数组，当这些事件被触发时，将会被冒泡到所有父容器中。参见 Ext.util.Observable.enableBubble。 默认为 []。

Component
chartStyle : Object
设置图表样式。由于本身包含默认样式，所以修改这个属性将会覆盖内置...
设置图表样式。由于本身包含默认样式，所以修改这个属性将会覆盖内置样式。 使用 extraStyle 来为默认样式附加自定义样式。
Chart
clearCls : String
应用到特殊的clearing div的CSS类， 这个clearing div直接渲染到每个form field的包装器后面...

应用到特殊的clearing div的CSS类， 这个clearing div直接渲染到每个form field的包装器后面，以提供 清除field的功能(默认为 'x-form-clear-left')。

注意: 只有在当前组件被渲染到一个使用FormLayout 布局(例如 Ext.form.FormPanel 或者指定 layout:'form')的 容器中、或者是指定了一个fieldLabel 、或者指定isFormField=true 时此配置才有效。

另请参见 Ext.layout.FormLayout. fieldTpl。

Component
cls : String
一个可选的额外CSS类，它将被添加到当前组件的元素上(默认为'')...
一个可选的额外CSS类，它将被添加到当前组件的元素上(默认为'')。 此属性对于在组件上，或者它的任何使用标准CSS规则的孩子节点上， 添加定制的样式非常有用。
Component
contentEl : String
(可选)指定一个已存在的HTML元素，或者一个已存在HTML元素的...

(可选)指定一个已存在的HTML元素，或者一个已存在HTML元素的 id ，它们将被用作当前组件的内容。

  • 描述 :
    此配置选项被用来将一个已存在的HTML元素 插入到一个新组件(在组件渲染之后它简单地移动DOM元素) 的layout元素中，使它成为该组件的内容。
  • 注意 :
    指定的HTML元素将被append到组件的layout元素中， 在所有配置的 HTML 被插入之后， 并且，这样的话，在render事件 被触发时，document中将不再包含此元素。
    指定的HTML元素将不会参与组件所有可能使用的 layout 过程(译者注：指这些HTML元素 不会参与布局操作)。 它仅是HTML而已。布局操作实在孩子 items 上进行的。
    添加 x-hidden 或者 x-hide-display CSS类，以防在内容渲染到panel时发生闪烁。
Component
ctCls : String
一个可选的外部CSS样式，添加到这个组件的容器(默认值为 '')。 这个方法对于使用标准的CSS规则...

一个可选的外部CSS样式，添加到这个组件的容器(默认值为 '')。 这个方法对于使用标准的CSS规则，为组件或它的任何一个子组件添加特定的样式非常有用。 参见 Ext.layout.ContainerLayout和 extraCls 。

注意: ctCls 默认为 ''期望如下的类，它们将指定一个默认值:

  • Box Layout : 'x-box-layout-ct'
使用一个额外的CSS类配置以上的Class，它是append到默认对象上的。例如， 对于BoxLayout (Hbox and Vbox):
                                ctCls: 'x-box-layout-ct custom-class'

Component
data : Mixed
初始化数据集，它将被应用到 tpl 上以刷新组件的内容区域。
Component
disableCaching : Boolean
如果为true，则在图表url末端附加禁止缓存的字符参数，在Opera和IE下默认为true。
Chart
disabled : Boolean
当前组件处于无效状态时为true。 Read-only.
Component
disabledClass : String
当组件处于无效状态时添加到组件上的CSS类(默认为 'x-item-disabled')。
Component
expressInstall : Boolean
如果没有安装flash，设置为true将会提示用户进行安装。 注意，此参数会使用Ext.FlashComponent.EXPRESS_INSTALL_URL...
如果没有安装flash，设置为true将会提示用户进行安装。 注意，此参数会使用Ext.FlashComponent.EXPRESS_INSTALL_URL 此值应该设置为一个本地资源，默认为 false。
FlashComponent
extraStyle : Object
包含可能覆盖或者追加到默认样式的额外样式。默认为null，想要查看详细列表，请...
包含可能覆盖或者追加到默认样式的额外样式。默认为null，想要查看详细列表，请访问YUI图表站点 http://developer.yahoo.com/yui/charts/#basicstyles
如下列出一些常用样式:
  • padding - 图表内容边缘的空间，padding属性不会增加图表大小。
  • animationEnabled - 布尔值，用来指定标记动画是否启用，默认启用。
  • font - 用来定义图表字体样式的对象。默认为 { name: 'Tahoma', color: 0x444444, size: 11 }
    • name - 字体名称
    • color - 字体颜色 (十六进制编码, 如: "#ff0000", "ff0000" 或 0xff0000)
    • size - 以point（点）为单位的字体大小 (只能为整数, 如: 11)
    • bold - boolean
    • italic - boolean
    • underline - boolean
  • border - 定义图表边框的样式。图表会缩小尺寸以适应边框宽度。
    • color - 边框颜色 (十六进制编码, 如: "#ff0000", "ff0000" 或 0xff0000)
    • size - 以像素为单位的边框宽度 (只能为整数, 如: 1)
  • background - 定义图表背景样式的对象。
    • color - 边框颜色 (十六进制编码， 如: "#ff0000", "ff0000" 或 0xff0000)
    • image - 图片的URL，路径可以相对于当前页面，也可为绝对路径。
  • legend - 定义图例说明样式的对象
    • display - 图例说明的位置。 可选值为 "none", "left", "right", "top", 和 "bottom".
    • spacing - 图片的URL，路径可以相对于当前页面，也可为绝对路径。
    • padding, border, background, font - 见上面同名项。
  • dataTip - 定义数据提示样式的对象。 (tooltip).
    • padding, border, background, font - 见上面同名项。
  • xAxis 和 yAxis - 定义横纵坐标（x/y轴）样式的对象。
    • color - 见上面同名项。
    • size - 见上面同名项。
    • showLabels - boolean
    • labelRotation - 可选值范围从-90°到90°，默认为0。
  • majorGridLines 和 minorGridLines - 定义网格线条样式的对象。
    • color, size - 见上面同名项。
  • zeroGridLine - 定义零网格线样式的对象。
    • color, size - 见上面同名项。
  • majorTicks 和 minorTicks - 定义图表中刻度样式的对象。
    • color, size - 见上面同名项。
    • length - 从坐标轴上延伸的刻度的长度。
    • display - 刻度的显示方式，可选值为 "none", "inside", "outside", 和 "cross".
Chart
fieldLabel : String
紧靠此field显示的标签文本(默认值为 '')。注意...

紧靠此field显示的标签文本(默认值为 '')。

注意:只有在当前组件被渲染到一个使用FormLayout 的容器中时，此配置才有效。 (例如 Ext.form.FormPanel 或 指定 layout:'form')。

另请参见 hideLabel 、 Ext.layout.FormLayout和 fieldTpl。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Name'
    }]
});
Component
flashParams : Object
作为参数传递给flash对象的键值对集合。可能的参数可以在这里找到: http://kb2.adobe.com/cps/127/tn_12701.html默认为...
作为参数传递给flash对象的键值对集合。可能的参数可以在这里找到: http://kb2.adobe.com/cps/127/tn_12701.html默认为 undefined。
FlashComponent
flashVars : Object
作为flash变量传递给flash对象的键值对集合。 默认为 undefined。
FlashComponent
flashVersion : String
显示flash内容所需的flash版本。默认为 '9.0.115'。
FlashComponent
flex : Number
注: 这个配置只用于该组件被包含在一个已使用BoxLayout配置的Container中时...

注: 这个配置只用于该组件被包含在一个已使用BoxLayout配置的Container中时。通过计算每一个子组件的flex值所占全部flex值之和的比例，来决定子组件的宽(HBoxLayout)高(VBoxlayout)。 任何子项的 flex = 0 或 flex = undefined 将不被设置(初始值大小将不被改变)。

BoxComponent
height : Number
组件的高度(默认值为 auto)。注:如果想使用百分比的方式...
组件的高度(默认值为 auto)。注:如果想使用百分比的方式来设置值，请查看 Ext.Component.anchor。
BoxComponent
hidden : Boolean
如果当前组件处于隐藏状态，此值为true。Read-only。
Component
hideLabel : Boolean
true时完全隐藏label元素 ( label 和 separator)。 默认为 false。 默认情况下，即使你不指定...

true时完全隐藏label元素 ( label 和 separator)。 默认为 false。 默认情况下，即使你不指定 fieldLabel 它的空间仍然会被保留，这样这块区域会与其它确实拥有label的区域位于同一排。 讲此值设置为 true 将导致此区域不再保留此空间。

注意: 参见 clearCls 的注释。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield'
        hideLabel: true
    }]
});
Component
hideMode : String
组件如何隐藏，支持的值有： 'visibility' (css visibility), 'offsets' (位置偏移量为负值) 和...

组件如何隐藏，支持的值有： 'visibility' (css visibility), 'offsets' (位置偏移量为负值) 和 'display' (css display).

注意:一般首选默认值 'display'，因为当组件第一次显示的时候它们会自动进行布局 (隐藏的时候不会调整尺寸)。

Component
hideParent : Boolean
此值为true时，当调用hide/show方法时，将会hide和show组件的容器...
此值为true时，当调用hide/show方法时，将会hide和show组件的容器；false时将会 hide和show组件自身(默认为false)。例如，这可以用作window上隐藏按钮的一种 快捷操作，通过设置此按钮的hideParent:true，然后把它添加到window上。
Component
html : String/Object
一个HTML片段，或者一个 DomHelper 描述，用作layout元素的内容(默认为'')。...
一个HTML片段，或者一个 DomHelper 描述，用作layout元素的内容(默认为'')。 这个HTML内容在组件渲染之后才被添加，所以在 render 出发的时候，document中尚未包含此HTML。 但是这个内容将会在所有配置的 contentEl 之前被插入到body标签中。
Component
id : String
当前组件唯一的id(默认为auto-assigned id)...

当前组件唯一的id(默认为auto-assigned id)。 如果你需要在以后访问组件，而又没有一个有效的组件对象引用，那么你需要指定一个 id( 也就是，使用Ext. getCmp方法 )。

注意，此id也将被用作组件底层HTML标签的id，这些标签被渲染到页面中。 这将允许你编写基于id的CSS规则，以独立地描述指定的实例；并且，也可以通过 组件父标签的id选中子元素。

注意:为了避免与唯一的id 产生重复， 请参见 itemId 和 ref 。

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

Component
itemCls : String
注意: 只有在当前组件被渲染到一个使用FormLayout 布局的 容器中时此配置才有效...

注意: 只有在当前组件被渲染到一个使用FormLayout 布局的 容器中时此配置才有效。 (例如Ext.form.FormPanel 或者指定 layout:'form')。

一个附加的CSS类，应用到div上，包装当前field的表单元素。 如果提供了此参数， field级上的itemCls将会覆盖 container级上提供的 默认itemCls。 为itemCls指定的值将会被添加默认的 类('x-form-item')。

既然它被应用到项目的包装器上(参见 Ext.layout.FormLayout。 fieldTpl)， 它将允许你编写能应用到此field、label(如果有指定)、或者field内部任何其它元素的标准CSS规则。

注意: 参考 fieldLabel的注释。 .

示例用法:

// Apply a style to the field's label:
<style>
    .required .x-form-item-label {font-weight:bold;color:red;}
</style>

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Name',
        itemCls: 'required' //this label will be styled
    },{
        xtype: 'textfield',
        fieldLabel: 'Favorite Color'
    }]
});
Component
itemId : String
当没有可利用的对象引用时，itemId可以作为第二选择，用来获得一个组件的引用， 代替 ...

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

var c = new Ext.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'); // 与 Ext.getCmp()不同

p2 = p1.ownerCt.getComponent('p2'); // 通过兄弟对象获得引用

另请参见 id 和 ref 。

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

Component
labelSeparator : String
每个fieldLabel 文本后面现实的分隔符。 此属性可以在多个层次上进行配置...

每个fieldLabel 文本后面现实的分隔符。 此属性可以在多个层次上进行配置。优先顺序为：

  • field / component level
  • container level
  • layout level (默认为冒号 ':')
如不需要为当前field的label显示分隔符，指定一个空字符串''即可。

注意:参见 clearCls 的注释。

另请参见 hideLabel 和 Ext.layout.FormLayout。 fieldTpl。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    layoutConfig: {
        labelSeparator: '~'   // layout config has lowest priority (defaults to ':')
    },
    labelSeparator: '>>',     // config at container level
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Field 1',
        labelSeparator: '...' // field/component level config supersedes others
    },{
        xtype: 'textfield',
        fieldLabel: 'Field 2' // labelSeparator will be '='

    }]
});
Component
labelStyle : String
一个CSS样式描述字符串，它将直接应用到当前field的label上...

一个CSS样式描述字符串，它将直接应用到当前field的label上。 如果有设置，默认为容器的labelStyle值(例如 Ext.layout.FormLayout.labelStyle , 或者 '')。

注意:参见 clearCls 的注释。

另请参见 hideLabel 和 Ext.layout.FormLayout. fieldTpl。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Name',
        labelStyle: 'font-weight:bold;'
    }]
});
Component
listeners : Object
一个包含一个或多个事件处理器的配置对象，会在初始化的时候被添加到目标对象上...

一个包含一个或多个事件处理器的配置对象，会在初始化的时候被添加到目标对象上。 该配置对象应该是一个有效的监听器配置对象就像 addListener例子中指定的一样可一次附加多个处理器。

ExtJs Components上的DOM事件

一些 ExtJs Component 类导出时会选择一些DOM事件(例如 "click", "mouseover" 等等), 这通常只是在有额外的值可以被添加时发生。例如DataView类的 click事件会传递被点击的节点。也可以直接在Component的HTMLElementevent上访问DOM事件，但必需在Component被渲染后监听器才能添加到Element 上。可以按照以下步骤添加插件:

// 插件会用一个监听器配置对象进行配置。
//该组件会被添加到所有处理方法的参数列表上。
Ext.DomObserver = Ext.extend(Object, {
    constructor: function(config) {
        this.listeners = config.listeners ? config.listeners : config;
    },

    // 组件将自己传递进了插件的初始化方法里
    init: function(c) {
        var p, l = this.listeners;
        for (p in l) {
            if (Ext.isFunction(l[p])) {
                l[p] = this.createHandler(l[p], c);
            } else {
                l[p].fn = this.createHandler(l[p].fn, c);
            }
        }

        // 渲染后立即添加监听器到元素上
        c.render = c.render.createSequence(function() {
            var e = c.getEl();
            if (e) {
                e.on(l);
            }
        });
    },

    createHandler: function(fn, c) {
        return function(e) {
            fn.call(this, e, c);
        };
    }
});

var combo = new Ext.form.ComboBox({

    // 元素被点击后折叠
    plugins: [ new Ext.DomObserver({
        click: function(evt, comp) {
            comp.collapse();
        }
    })],
    store: myStore,
    typeAhead: true,
    mode: 'local',
    triggerAction: 'all'
});

Observable
margins : Object
注:此配置只用于该组件展现在一个使用BorderLayout...

注:此配置只用于该组件展现在一个使用BorderLayout 或 BoxLayout的两个子类之一作为布局的容器。

这个margins对象在该组件中的格式为：

{top: (top margin),right: (right margin),bottom: (bottom margin),left: (left margin)}

也可以是一个字符串，中间用空格分隔，margin值为数字。 把matches中每一个值的次序跟CSS中margin值的排列方式相对应：

  • 如果只有一个值，它适用于所有方面。
  • 如果有两个值，top和bottom的边框设置为第一个值，left和right设置为第二个值。
  • 如果有三个值，top设置为第一个值，left和right设置为第二个值，bottom设置为第三个值。
  • 如果有四个值，分别设置为top, right, bottom, left。

默认值:

{top:0, right:0, bottom:0, left:0}
BoxComponent
overCls : String
一个可选的额外的CSS类，它将在鼠标移过元素时被添加到组件上...
一个可选的额外的CSS类，它将在鼠标移过元素时被添加到组件上，鼠标移出时 删除。(默认为'')。此属性对于在组件上，或者它的任何使用标准CSS规则的孩子节点上， 添加定制的'active' 或者 'hover'样式非常有用。
Component
pageX : Number
如果该组件被包含在一个指定位置的容器中，这个值表示页面级的x坐标值（译者注：在有滚动条的情况下这个值很有用）。
BoxComponent
pageY : Number
如果该组件被包含在一个指定位置的容器中，这个值表示页面级的y坐标值（译者注：在有滚动条的情况下这个值很有用）。
BoxComponent
plugins : Object/Array
一个对象或者一个对象数组，为组件提供特殊的功能 ...
一个对象或者一个对象数组，为组件提供特殊的功能。 对一个合法的插件唯一的要求是它含有一个init()方法， 能接收一个Ext.Component型的参数。 当组件被创建时，如果有可用的插件，组件将会调用每个插件的init方法， 并将自身的引用作为方法参数传递给它。然后，每个插件就可以调用方法或者响应组件上的事件， 就像需要的那样提供自己的功能。
Component
ptype : String
需要创建配置的ptype。 当传递一个配置对象给构造函数时...
需要创建配置的ptype。 当传递一个配置对象给构造函数时，此配置选项不会被使用。 只有在使用懒初始化的时候此配置项才会被使用， 此时Plugin不是 通过一个完整的实例组件，而是通过一个Component配置指定的。 在渲染时，将会查找ptype以决定创建何种类型的Plugin。

如果你创建自己的Plugin，你可以通过 Ext.ComponentMgr.registerPlugin 对它们进行注册，以便能利用懒初始化和渲染机制。
Component
ref : String
一个路径描述，与组件的 ownerCt 相关，它描述了把当前组件的命名引用放置到哪个父容器中去。...

一个路径描述，与组件的 ownerCt 相关，它描述了把当前组件的命名引用放置到哪个父容器中去。

祖先的坐标路径可以通过'/'字符进行分隔。 例如，将一个Toolbar Button的引用放入 拥有此Toolbar的Panel中:

var myGrid = new Ext.grid.EditorGridPanel({
    title: 'My EditorGridPanel',
    store: myStore,
    colModel: myColModel,
    tbar: [{
        text: 'Save',
        handler: saveChanges,
        disabled: true,
        ref: '../saveButton'
    }],
    listeners: {
        afteredit: function() {
//          The button reference is in the GridPanel
            myGrid.saveButton.enable();
        }
    }
});

在上面的代码中，如果 ref 是 'saveButton' ，那么引用将会被放置到Toolbar中。 ref 中的每个'/' 都会从组件的 ownerCt 向上移动一级。

另请参见 added 和 removed 事件。

Component
region : String
注: 此配置只用于该组件展现在一个布局为BorderLayout的容器中...

注: 此配置只用于该组件展现在一个布局为BorderLayout的容器中(例如指定layout:'border')。

详见Ext.layout.BorderLayout。

BoxComponent
renderTo : Mixed
该值可以是一个节点的id、一个DOM节点或者一个已存在的元素...

该值可以是一个节点的id、一个DOM节点或者一个已存在的元素， 组件将会被渲染到其中。

  • 注意 :
      如果组件不是一个Container 的子项目时， 不要使用此选项。 渲染和管理它的子项目是一个Container 的layout manager的责任。
      当使用此配置项时，无需调用render()方法。

另请参见 render 。

Component
seriesStyles : Object
图表刷新后将要应用于各序列的样式。默认为 null.
Chart
stateEvents : Array
一个事件数组，当它们被触发时，组件需要保存自己的状态(默认值为 none)...

一个事件数组，当它们被触发时，组件需要保存自己的状态(默认值为 none)。 它们可以是任何该组件支持的事件类型，包括浏览器事件和 自定义事件(例如['click', 'customerchange'])。

对于保存和恢复组件状态的详细解释，参见 stateful

Component
stateId : String
为该组件指定的唯一的id值，它被用作管理组件状态的目的...
为该组件指定的唯一的id值，它被用作管理组件状态的目的。 (如果设定了id，默认值为组件自己的id，否则，如果组件使用自动生成的id，此值为null)。

对于保存和反解析组件状态的解释，参见 stateful 。

Component
stateful : Boolean
一个标志参数，它将引起组件在启动时尝试从一个保存的状态中恢复内部状态参数...

一个标志参数，它将引起组件在启动时尝试从一个保存的状态中恢复内部状态参数。 组件必须要么拥有一个 stateId 或者 id ，它们被分配给需要被管理的状态属性。 在跨页面加载时，不保证自动生成的id属性的稳定性， 并且，不能依赖此id来保存和恢复一个组件的相同状态。

为了保存状态的操作能够工作，状态管理器的提供者必须 被设置成一个Ext.state.Provider 的实现类，它覆盖了set 和get 方法，以便保存和恢复name/value对。 有一个内置的Ext.state.CookieProvider 可用。

为当前页面设置状态提供者:

Ext.state.Manager.setProvider(new Ext.state.CookieProvider({
    expires: new Date(new Date().getTime()+(1000*60*60*24*7)), //7 days from now
}));

当 stateEvents 配置项中其中之一的事件被触发时， 一个状态可保存的组件将试图保存其状态。

保存状态时，一个可保存状态的组件首先需要通过调用 getState 方法来序列化它的状态。 默认情况下，此函数什么事都不做。 开发者必须提供一个实现，返回一个hash对象，它描述了组件可恢复的状态。

getState方法产生的值将会传递给 Ext.state.Manager.set 方法，它使用配置的 Ext.state.Provider 来保存对象，以组件的 stateId 为key，或者，如果此值（指stateId）没有指定时， 使用它的 id 作为key。

在进行构造时，一个可保存状态的组件试图通过调用 Ext.state.Manager.get方法来 恢复它的状态，传递 stateId 或者，如果此值（指stateId）没有指定时， 使用它的 id 作为参数。

结果对象被传递给 applyState 。 applyState 的默认实现只是简单地把属性拷贝到对象中， 但是开发者可以覆盖此方法以支持更多行为。

通过向 beforestaterestore, staterestore, beforestatesave 和 statesave 事件上绑定监听器，你可以在保存和恢复状态时进行额外的处理。

Component
style : String
被添加到组件元素的特定样式。 必须是按照...
被添加到组件元素的特定样式。 必须是按照 Ext.Element.applyStyles 类指定格式的合法参数值。

new Ext.Panel({
    title: 'Some Title',
    renderTo: Ext.getBody(),
    width: 400, height: 300,
    layout: 'form',
    items: [{
        xtype: 'textarea',
        style: {
            width: '95%',
            marginBottom: '10px'
        }
    },
        new Ext.Button({
            text: 'Send',
            minWidth: '100',
            style: {
                marginBottom: '10px'
            }
        })
    ]
});
Component
tabTip : String
注: 这个配置只用于当该组件作为TabPanel的一个子项目时使用...

注: 这个配置只用于当该组件作为TabPanel的一个子项目时使用。

一个String类型的innerHTML(支持html标签)，当鼠标放在该选项上的时，显示一个tooltip。为了tips能够被渲染，Ext.QuickTips.init()必须被提前调用。
BoxComponent
tpl : Mixed
一个 Ext.Template , Ext.XTemplate 或者一个用来形成一个Ext.XTemplate的字符串数组...
一个 Ext.Template , Ext.XTemplate 或者一个用来形成一个Ext.XTemplate的字符串数组。 与 data 和 tplWriteMode 配置项协同使用。
Component
tplWriteMode : String
刷新组件的内容区域时使用的Ext.(X)Template方式。 默认为'overwrite' (参见 Ext.XTemplate.overwrite )。
刷新组件的内容区域时使用的Ext.(X)Template方式。 默认为'overwrite' (参见 Ext.XTemplate.overwrite )。
Component
url : String
图表加载时的url。默认为Ext.chart.Chart.CHART_URL，需要修改并指向...
图表加载时的url。默认为Ext.chart.Chart.CHART_URL，需要修改并指向本地图表源（路径）。
Chart
width : Number
组件的宽度(默认值为 auto)。注:如果想使用百分比的方式...
组件的宽度(默认值为 auto)。注:如果想使用百分比的方式来设置值，请查看 Ext.Component.anchor。
BoxComponent
wmode : String
flash对象的wmode。此参数可以用来控制层叠次序。默认为 'opaque'。
FlashComponent
x : Number
如果被包含在一个指定位置的容器中，这个值表示x(left)坐标值。
BoxComponent
xtype : String
需要创建配置的xtype。 当传递一个配置对象给构造函数时...
需要创建配置的xtype。 当传递一个配置对象给构造函数时，此配置选项不会被使用。 只有在使用懒初始化的时候此配置项才会被使用，此时容器的子项目不是 通过一个完整的实例组件，而是通过一个Component配置指定的。 在渲染时，将会查找xtype以决定创建何种类型的子组件。

预定义的xtype列表如下： here。

如果你继承Component创建你自己的组件，你需要使用Ext.ComponentMgr.registerType 对它们进行注册，以便利用懒初始化和渲染机制。
Component
y : Number
如果被包含在一个指定位置的容器中，这个值表示y(top)坐标值。
BoxComponent

公共属性

Property Defined By
CHART_URL : String
设置从哪里加载图表。应该设置为本地图表源（路径）。
Chart
EXPRESS_INSTALL_URL : String
如果不存在，为初始化flash设置的url。 此参数应该设置为一个本地资源。
FlashComponent
disabled : Boolean
当前组件处于无效状态时为true。 Read-only.
Component
el : Ext.Element
封装了当前组件的Ext.Element。 Read-only。通常情况下，这将是一个<DIV>元素，它由此类的...

封装了当前组件的Ext.Element。 Read-only。

通常情况下，这将是一个<DIV>元素，它由此类的 onRender方法创建，但是它可以通过使用 autoEl 配置项进行覆盖。

注意: 直到组件渲染完成此元素都将处于无效状态。

如需向当前组件的 DOM事件(而不是当前组件自己的Observable事件)添加监听器， 更多建议，参见 listeners 配置项，或者直接使用一个render监听器:

new Ext.Panel({
    title: 'The Clickable Panel',
    listeners: {
        render: function(p) {
            // Append the Panel to the click handler's argument list.
            p.getEl().on('click', handlePanelClick.createDelegate(null, [p], true));
        },
        single: true  // Remove the listener after first invocation
    }
});

另请参见 getEl

Component
hidden : Boolean
如果当前组件处于隐藏状态，此值为true。Read-only。
Component
initialConfig : Object
当前组件的初始化配置描述。 Read-only。
Component
ownerCt : Ext.Container
组件所属的Container (默认为undefined，当前组件被添加到一个容器中时此值被自动设置)...
组件所属的Container (默认为undefined，当前组件被添加到一个容器中时此值被自动设置)。 Read-only。

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

Component
refOwner : Ext.Container
如果当前组件是一个容器的孩子，并且是通过一个 ref 配置项被注册的，则此值为 ref 引用被插入到的祖先容器。
如果当前组件是一个容器的孩子，并且是通过一个 ref 配置项被注册的，则此值为 ref 引用被插入到的祖先容器。
Component
rendered : Boolean
如果当前组件已经被渲染了，此值为true。Read-only.
Component

公共方法

Method Defined By
Chart ()
参数:
  • 无。
返回值:
  • void
Chart
addClass ( string cls ) : Ext.Component
为组件底层的元素添加CSS样式。
为组件底层的元素添加CSS样式。
参数:
  • cls : string
    需要添加的CSS样式的class名称
返回值:
  • Ext.Component
    this
Component
addEvents( Object|String o, string Optional. ) : void
添加指定的事件到事件列表上，事件会被该Observable触发。
添加指定的事件到事件列表上，事件会被该Observable触发。
参数:
  • o : Object|String
    以事件名作为属性true作为值的对象 或者当多个事件名被分开的传递时则为第一个事件名。
  • Optional. : string
    事件名被分开的传递时则为事件名。 用法:
    this.addEvents('storeloaded', 'storecleared');
返回值:
  • void
Observable
addListener( String eventName, Function handler, [Object scope], [Object options] ) : void
给对象添加事件处理器。
给对象添加事件处理器。
参数:
  • eventName : String
    监听的事件名。
  • handler : Function
    事件调用的方法
  • scope : Object
    （可选）处理方法执行的作用域 (this的引用 reference)。 如果被忽略。默认为触发事件的对象。
  • options : Object
    （可选）包含处理器配置和属性的对象。 可能包含以下的属性:
    • scope : Object
      处理方法执行的作用域(this的引用) 。 如果被忽略。默认为触发事件的对象。
    • delay : Number
      在触发事件后延迟调用处理器的毫秒数。
    • single : Boolean
      如果为True则添加一个处理器来处理下一次的事件触发（仅一次），然后移除自己。
    • buffer : Number
      使得处理器延迟指定毫秒数后预定的运行在 一个Ext.util.DelayedTask中 。 如果事件在时间内再一次被触发，原始的处理器不会被调用，但是新的处理器会预定的在他的位置上。
    • target : Observable
      如果事件在目标的Observable上触发则仅仅调用处理器， 否则 事件会从子类的Observable上冒泡

    组合选项
    使用这些选项参数,可能会组合出不同类型的监听器：

    一个延迟的，一次性的监听器。

    myDataView.on('click', this.onClick, this, {
single: true,
delay: 100
});

    一次调用附加多个处理器
    该方法同样支持传递一个包含指定的多个处理器的属性的配置对象参数。

    myGridPanel.on({
'click' : {
    fn: this.onClick,
    scope: this,
    delay: 100
},
'mouseover' : {
    fn: this.onMouseOver,
    scope: this
},
'mouseout' : {
    fn: this.onMouseOut,
    scope: this
}
});

    或者一个简写的语法：

    myGridPanel.on({
'click' : this.onClick,
'mouseover' : this.onMouseOver,
'mouseout' : this.onMouseOut,
 scope: this
});
返回值:
  • void
Observable
applyToMarkup ( String/HTMLElement el ) : void
将此组件添加到已存在的有效的HTML标签中。 使用该方法时，无需再调用render()方法。
将此组件添加到已存在的有效的HTML标签中。 使用该方法时，无需再调用render()方法。
参数:
  • el : String/HTMLElement
返回值:
  • void
Component
bindStore ( Store store ) : void
改变图表绑定的数据集，并刷新。
改变图表绑定的数据集，并刷新。
参数:
  • store : Store
    绑定到图表的数据集合。
返回值:
  • void
Chart
cloneConfig ( Object overrides ) : Ext.Component
默认使用原先传递给当前实例的配置值克隆当前组件。
默认使用原先传递给当前实例的配置值克隆当前组件。
参数:
  • overrides : Object
    一个新的配置项，包含需要覆盖到克隆版本的所有属性。 可以传递一个id参数给此对象，否则将自动生成一个新的id以避免发生重复。
返回值:
  • Ext.Component
    当前组件的克隆副本
Component
destroy () : void
通过如下方法销毁对象：删除所有的事件监听器、将组件的元素从DOM树中删除...
通过如下方法销毁对象：删除所有的事件监听器、将组件的元素从DOM树中删除（如果可以）、 将组件从它的 Ext.Container（如果可用）中删除、 并且将它从Ext.ComponentMgr中 注销。 销毁操作一般由框架自动完成，一般情况下不需要直接调用该方法。
参数:
  • 无。
返回值:
  • void
Component
disable () : Ext.Component
将组件置为无效状态，并出发'disable'事件。
将组件置为无效状态，并出发'disable'事件。
参数:
  • 无。
返回值:
  • Ext.Component
    this
Component
enable () : Ext.Component
将组件置为有效状态并触发'enable'事件。
将组件置为有效状态并触发'enable'事件。
参数:
  • 无。
返回值:
  • Ext.Component
    this
Component
enableBubble( String/Array events ) :void
是否现在使得事件会被该Observable触发并调用 this.getBubbleTarget()方法在拥有者的继承树...

是否现在使得事件会被该Observable触发并调用 this.getBubbleTarget()方法在拥有者的继承树中冒泡。Observable的基础类中没有该方法的实现。

该方法一般被Ext.Components用来冒泡事件到拥有者的容器。参看Ext.Component.getBubbleTarget默认的实现 在Ext.Component中返回组件的直接拥有者。但是如果需要的是一个已知的目标，该方法可以被重写来更快的访问需求的目标。

例子:

Ext.override(Ext.form.Field, {
    // 添加方法到Field的initComponent上改变事件为冒泡
    initComponent : Ext.form.Field.prototype.initComponent.createSequence(function() {
        this.enableBubble('change');
    }),

    // 我们知道我们想让Field的事件冒泡到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() {
            // 如果样式被修改标题会变红。
            myForm.header.setStyle('color', 'red');
        }
    }
});
参数:
  • events : String/Array
    冒泡的事件名，或事件名数组
返回值:
  • void
Observable
findParentBy ( Function fn ) : Ext.Container
通过自定义的函数查找当前组件上层任何层次上的容器...
通过自定义的函数查找当前组件上层任何层次上的容器。 如果传递的函数返回true，容器对象将被返回。
参数:
  • fn : Function
    自定义的函数，使用如下参数调用(container,this component)。
返回值:
  • Ext.Container
    自定义函数返回true的第一个容器
Component
findParentByType ( String/Class xtype ) : Ext.Container
通过xtype或者class查找当前组件上层任何层次上的容器
通过xtype或者class查找当前组件上层任何层次上的容器
参数:
  • xtype : String/Class
    组件的xtype字符串，或者直接是组件的class
返回值:
  • Ext.Container
    符合指定xtype或者class的第一个容器
Component
fireEvent( String eventName, Object... args ) : Boolean
用传入的参数触发指定的事件 (减去事件名)。 一个事件可以被设置为冒泡 Obse...

用传入的参数触发指定的事件 (减去事件名)。

一个事件可以被设置为冒泡到Observable父类继承树(参看 Ext.Component.getBubbleTarget) 调用enableBubble实现。

参数:
  • eventName : String
    触发的事件名。
  • args : Object...
    传递给处理器的可变长度参数。
返回值:
  • Boolean
    如果有任何的处理器返回false则返回false，否则返回true。
Observable
focus ( [ Boolean selectText ], [ Boolean/Number delay ] ) : Ext.Component
尝试将当前组件设为焦点。
尝试将当前组件设为焦点。
参数:
  • selectText : Boolean
    (可选) 如果可用，同时选中组件内部的文本
  • delay : Boolean/Number
    (可选)将当前组件设置为焦点的延迟时间(设置为true等于0毫秒)
返回值:
  • Ext.Component
    this
Component
getBox ( [ Boolean local ] ) : Object
获取组件底层元素当前盒子模型的尺寸。（译者注：盒子模型是CSS术语，详细解释请自行搜索。）
获取组件底层元素当前盒子模型的尺寸。（译者注：盒子模型是CSS术语，详细解释请自行搜索。）
参数:
  • local : Boolean
    (可选)值为true时，组件的left值和top值将代替页面的XY被返回。(默认值为false)
返回值:
  • Object
    返回值的格式{x, y, width, height}
BoxComponent
getBubbleTarget () : Ext.Container
为Observable的fireEvent方法提供链接，它沿着继承结构进行冒泡操作。
为Observable的fireEvent方法提供链接，它沿着继承结构进行冒泡操作。
参数:
  • 无。
返回值:
  • Ext.Container
    拥有当前组件的容器。
Component
getEl () : Ext.Element
返回 Ext.Element ，它包装了当前组件。...

返回 Ext.Element ，它包装了当前组件。

通常情况下，这将是一个<DIV>元素，它是由该类的onRender方法创建的， 但是可以使用autoEl配置项 覆盖它。

注意: 此元素将会一直处于无效状态直到当前组件渲染完成。

如需向当前组件的 DOM事件(而不是当前组件自己的Observable事件)添加监听器， 更多建议，参见 listeners 配置项，或者直接使用一个render监听器:

new Ext.Panel({
    title: 'The Clickable Panel',
    listeners: {
        render: function(p) {
            // Append the Panel to the click handler's argument list.
            p.getEl().on('click', handlePanelClick.createDelegate(null, [p], true));
        },
        single: true  // Remove the listener after first invocation
    }
});
参数:
  • 无。
返回值:
  • Ext.Element
    包装当前组件的元素。
Component
getHeight () : Number
获取该组件的当前高度值。
获取该组件的当前高度值。
参数:
  • 无。
返回值:
  • Number
BoxComponent
getId () : String
返回当前组件的id，如果没有定义id，则自动生成并返回一个id:'ext-comp-'...
返回当前组件的 id 如果没有定义 id 则自动生成并返回一个 id

'ext-comp-' + (++Ext.Component.AUTO_ID)
参数:
  • 无。
返回值:
  • String
    id
Component
getItemId () : String
返回当前组件的 itemId 。 如果没有通过配置参数指定 itemId 那么，将会使用...
返回当前组件的 itemId 。 如果没有通过配置参数指定 itemId 那么，将会使用 getId 返回 id 。
参数:
  • 无。
返回值:
  • String
Component
getOuterSize () : Object
获取当前组件所在元素的尺寸大小，包括边缘的空白处。
获取当前组件所在元素的尺寸大小，包括边缘的空白处。
参数:
  • 无。
返回值:
  • Object
    一个包含元素大小的对象 {width: (element width + left/right margins), height: (element height + top/bottom margins)}
BoxComponent
getPosition ( [ Boolean local ] ) : Array
获取组件底层元素当前的XY位置。
获取组件底层元素当前的XY位置。
参数:
  • local : Boolean
    (可选)如果为true，将返回元素的left和top值，而不是相对于页面内的 XY。(默认值为 false)
返回值:
  • Array
    元素的XY位置值(例如：[100, 200])
BoxComponent
getResizeEl () : Ext.Element
返回该组件的最外层用来定义这些组件整体大小的Element...

返回该组件的最外层用来定义这些组件整体大小的Element对象。

通常用 getEl 方法将会返回相同的Element对象，但在有些情况下，组件可能有一些更多的封装了它的主要动态Element对象的Element对象。

例如ComboBox。它是封装在一个包含<input>元素的包装元素里(这将返回其 getEl方法和触发按钮的元素)。返回的元素为resizeEl。

参数:
  • 无。
返回值:
  • Ext.Element
    The Element which is to be resized by size managing layouts.
BoxComponent
getSize () : Object
获取组件底层元素当前的大小。
获取组件底层元素当前的大小。
参数:
  • 无。
返回值:
  • Object
    一个包含元素大小的对象{width: (element width), height: (element height)}
BoxComponent
getWidth () : Number
获取该组件的当前宽度值。
获取该组件的当前宽度值。
参数:
  • 无。
返回值:
  • Number
BoxComponent
getXType () : String
获取当前组件的xtype，它是用 Ext.ComponentMgr 注册的。 所有可用的xtype列表，参见...
获取当前组件的xtype，它是用 Ext.ComponentMgr 注册的。 所有可用的xtype列表，参见 Ext.Component 类头部。示例用法:

var t = new Ext.form.TextField();
alert(t.getXType());  // alerts 'textfield'
参数:
  • 无。
返回值:
  • String
    The xtype
Component
getXTypes () : String
返回此组件的xtype继承树，用字符'-'分隔。 所有可用的xtype值...

返回此组件的xtype继承树，用字符'-'分隔。 所有可用的xtype值，请参见Ext.Component 类的头部。

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

示例用法:

var t = new Ext.form.TextField();
alert(t.getXTypes());  // alerts 'component/box/field/textfield'
参数:
  • 无。
返回值:
  • String
    xtype层次字符串
Component
hasListener( String eventName ) : Boolean
检测对象是否包含指定事件的任何监听器
检测对象是否包含指定事件的任何监听器
参数:
  • eventName : String
    检测的事件名
返回值:
  • Boolean
    如果事件被监听则为true，否则为false
Observable
hide () : Ext.Component
隐藏当前组件。 监听 beforehide' 事件并且返回false 可以取消隐藏组件的操作。 在隐藏组件之后触发...
隐藏当前组件。 监听 beforehide' 事件并且返回false 可以取消隐藏组件的操作。 在隐藏组件之后触发 ' hide' 事件。 如果组件被配置成 hidden 那么此方法在内部被调用。
参数:
  • 无。
返回值:
  • Ext.Component
    this
Component
isVisible () : Boolean
如果当前组件可见，返回true。
如果当前组件可见，返回true。
参数:
  • 无。
返回值:
  • Boolean
    如果当前组件可见，返回true，其它返回false。
Component
isXType ( String xtype , [ Boolean shallow ] ) : Boolean
Tests whether or not this Component is of a specific xtype. This can test whether this Component is descended from th...

测试此组件是否是指定的xtype。此方法既可以测试是否是指定的xtype的某个子类， 或者它是否直接是指定的xtype类(shallow=true)。

如果使用你自己的子类，必须知道组件必须注册它的xtype值。

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

示例用法:

var t = new Ext.form.TextField();
var isText = t.isXType('textfield');        // true
var isBoxSubclass = t.isXType('box');       // true, descended from BoxComponent
var isBoxInstance = t.isXType('box', true); // false, not a direct BoxComponent instance
参数:
  • xtype : String
    需要为当前组件进行检测的xtype
  • shallow : Boolean
    (可选) 如果为false，检测组件是否是xtype继承树中的某个子类（默认是这种情况）， 如果为true，只检测组件是否是指定的xtype类型。
返回值:
  • Boolean
    如果当前组件是指定xtype的子类，返回true，其它返回flase。
Component
mon ( Observable|Element item , Object|String ename , Function fn , Object scope , Object opt ) : void
向任何Observable对象(或者元素)上添加监听器，监听器将会在组件...

向任何Observable对象(或者元素)上添加监听器，监听器将会在组件销毁时被自动删除。
用法：

myGridPanel.mon(myGridPanel.getSelectionModel(), 'selectionchange', handleSelectionChange, null, {buffer: 50});

or:

myGridPanel.mon(myGridPanel.getSelectionModel(), {
    selectionchange: handleSelectionChange,
    buffer: 50
});
参数:
  • item : Observable|Element
    需要添加listener/listeners的项目。
  • ename : Object|String
    事件名，或者一个包含事件名属性的对象。
  • fn : Function
    (可选) 如果 ename 参数是一个事件名，此参数为处理函数。
  • scope : Object
    (可选)如果 ename 参数是一个事件名称，此参数是作用域 ( this 引用)，监听函数将会在此作用域中被执行。
  • opt : Object
    (可选)如果 ename 参数是一个事件名称， 此参数是 addListener 配置项。
返回值:
  • void
Component
mun ( Observable|Element item , Object|String ename , Function fn , Object scope ) : void
删除通过mon 方法添加的监听器。
删除通过mon 方法添加的监听器。
参数:
  • item : Observable|Element
    需要删除listener/listeners的项目。
  • ename : Object|String
    事件名称，或者一个包含事件名称属性的对象。
  • fn : Function
    (可选)如果 ename 参数是一个事件名称，此参数是一个处理函数。
  • scope : Object
    (可选)如果 ename 参数是一个事件名称，此参数是作用域 ( this 引用)，监听函数将会在此作用域中被执行。
返回值:
  • void
Component
nextSibling () : Ext.Component
返回所属容器中的下一个组件
返回所属容器中的下一个组件
参数:
  • 无。
返回值:
  • Ext.Component
Component
on( String eventName, Function handler, [Object scope], [Object options] ) : void
给对象添加事件处理器 (addListener的简写形式)
给对象添加事件处理器 (addListener的简写形式。)
参数:
  • eventName : String
    监听的事件类型
  • handler : Function
    事件调用的方法
  • scope : Object
    （可选）处理方法执行时的作用域 (this 的引用)。 如果被忽略。默认为触发事件的对象。
  • options : Object
    可选 包含处理器配置的对象。
返回值:
  • void
Observable
previousSibling () : Ext.Component
返回所属容器中的前一个组件
返回所属容器中的前一个组件
参数:
  • 无。
返回值:
  • Ext.Component
Component
purgeListeners() : void
移除对象上所有的监听器
移除对象上所有的监听器
参数:
  • 无。
返回值:
  • void
Observable
relayEvents( Object o, Array events ) : void
从指定的Observable上传递选择的事件就好像被当前对象触发一样。
从指定的Observable上传递选择的事件就好像被当前对象触发一样。
参数:
  • o : Object
    该Observable上的事件被当前对象传递。
  • events : Array
    传递的数组名。
返回值:
  • void
Observable
removeClass ( string cls ) : Ext.Component
从组件底层的元素上删除一个CSS类。
从组件底层的元素上删除一个CSS类。
参数:
  • cls : string
    需要移除的CSS类名
返回值:
  • Ext.Component
    this
Component
removeListener( String eventName, Function handler, [Object scope] ) : void
删除一个事件处理器。
删除一个事件处理器。
参数:
  • eventName : String
    处理器关联的事件类型。
  • handler : Function
    移除的处理器。 这应该是传递到addListener里的方法的引用。
  • scope : Object
    （可选）处理器指定的初始作用域。
返回值:
  • void
Observable
render ( [ Element/HTMLElement/String container ], [ String/Number position ] ) : void
在传递进来的HTML元素中渲染当前组件。...

在传递进来的HTML元素中渲染当前组件。

如果你正在使用一个Container 对象放置当前组件，那么请不要使用render方法。

当容器第一次被渲染时，它的子组件将会被容器的 layout 管理器渲染。

某些布局管理器允许动态添加子组件。它们包括 Ext.layout.CardLayout, Ext.layout.AnchorLayout, Ext.layout.FormLayout, Ext.layout.TableLayout。

当一个新的子组件被添加时，如果容器已经被渲染了， 你可能需要调用容器的 doLayout 方法来刷新视图，它将导致所有没有被渲染的子组件进行渲染操作。 此操作是必须的，这样你可以添加多个子组件而只刷新一次layout。

当创建复杂的UI时，非常重要的一点是，请记住调整子项目的尺寸和位置是容器的 layout 管理器的职责。 如果你希望子项目的尺寸对用户交互作出反应， 你必须为容器配置一个布局管理器，它将创建和管理你心里想要的那种布局。

忽略容器的layout 配置意味着将会使用一个基本的布局管理器，它除了按次序把子组件 渲染到容器中之外什么事情都不做。 这种情况下，任何尺寸和位置的调整操作都不会发生。

参数:
  • container : Element/HTMLElement/String
    (可选) 需要在其中渲染当前组件的元素。 如果它是从一个已存在的标签中创建的，此参数应该被忽略。
  • position : String/Number
    (可选) 容器中的一个元素ID或者一个DOM节点索引， 当前组件将会被插入到它前面 (默认append到容器的尾部)
返回值:
  • void
Component
resumeEvents() : void
重新开始触发事件。(参见suspendEvents) 如果事件以queueSuspended参数被挂起，则在事件被挂起时 ...
重新开始触发事件。(参见 suspendEvents) 如果事件以queueSuspended 参数被挂起，则在事件被挂起时触发的事件会被传递到所有的监听器上
参数:
  • 无。
返回值:
  • void
Observable
setAutoScroll ( Boolean scroll ) : Ext.BoxComponent
设置该组件内容溢出时是否自动显示滚动条。
设置该组件内容溢出时是否自动显示滚动条。
参数:
  • scroll : Boolean
    值为true的话组件自动显示滚动条。
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setDisabled ( Boolean disabled ) : Ext.Component
工具函数，使用布尔值设置有效/无效(disabled/enabled )。
工具函数，使用布尔值设置有效/无效(disabled/enabled )。
参数:
  • disabled : Boolean
返回值:
  • Ext.Component
    this
Component
setHeight ( Mixed height ) : Ext.BoxComponent
设置此组件的高度。该方法将触发resize事件。
设置此组件的高度。该方法将触发resize事件。
参数:
  • height : Mixed
    The new height to set.
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setPagePosition ( Number x , Number y ) : Ext.BoxComponent
设置组件在页面中的XY位置。 如果需要设置left和top值 ，请使用...
设置组件在页面中的XY位置。 如果需要设置left和top值 ，请使用setPosition方法。 该方法触发move事件。
参数:
  • x : Number
    The new x position
  • y : Number
    The new y position
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setPosition ( Number left , Number top ) : Ext.BoxComponent
设置组件的left和top值。设置组件的页面XY值，请使用setPagePosition方法。该方法触发...
设置组件的left和top值。设置组件的页面XY值，请使用setPagePosition方法。该方法触发move事件。
参数:
  • left : Number
    The new left
  • top : Number
    The new top
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setSeriesStyles ( styles {Array} ) : void
为图表中所有序列设置样式。
为图表中所有序列设置样式。
参数:
  • {Array} : styles
    为列表中所有序列样式进行初始化。
返回值:
  • void
Chart
setSize ( Mixed width , Mixed height ) : Ext.BoxComponent
设置BoxComponent的宽度和高度。 此方法触发resize事件...
设置BoxComponent的宽度和高度。 此方法触发resize事件。此方法可以接收单独的width或者height值作为参数， 或者你可以传递像这样的一个size对象： {width:10, height:20} 。
参数:
  • width : Mixed
    设置的新的width值。这可以是：
    • 一个Number类型指定Element新的宽度 Ext.Element.defaultUnit(默认为像素 :'px')。
    • 一个String类型用于设置width的CSS样式。
    • 一个size对象格式为 {width: widthValue, height: heightValue} 。
    • 值为 undefined 时，保留原来的width不变。
  • height : Mixed
    设置的新的height值(如果第一个参数传递了一个size对象，此参数没有必要传递)。这可以是：
    • 一个Number类型指定Element新的高度 Ext.Element.defaultUnit(默认为像素 :'px')。
    • 一个String类型用于设置height的CSS样式。也有可能不会被使用到。
    • 值为 undefined 时，保留原来的height不变。
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setStyle ( name {String} , value {Object} ) : void
为图表实例设置单一样式值。
为图表实例设置单一样式值。
参数:
  • {String} : name
    将要改变的图表样式名称。
  • {Object} : value
    图表样式的新值。
返回值:
  • void
Chart
setStyles ( styles {Object} ) : void
重置图表实例上的所有样式。
Resets all styles on the Chart instance.
参数:
  • {Object} : styles
    Initializer for all Chart styles.
返回值:
  • void
Chart
setVisible ( Boolean visible ) : Ext.Component
工具方法，通过使用布尔值隐藏或者显示当前组件。
工具方法，通过使用布尔值隐藏或者显示当前组件。
参数:
  • visible : Boolean
    true时显示，false时隐藏
返回值:
  • Ext.Component
    this
Component
setWidth ( Mixed width ) : Ext.BoxComponent
设置组件的宽度。 此方法触发resize事件。
设置组件的宽度。 此方法触发resize事件。
参数:
  • width : Mixed
    The new width to set.
返回值:
  • Ext.BoxComponent
    this
BoxComponent
show () : Ext.Component
显示当前组件。监听' beforeshow' 事件，返回 false 取消显示组件...
显示当前组件。监听' beforeshow' 事件，返回 false 取消显示组件。在显示组件之后触发' show' 事件。
参数:
  • 无。
返回值:
  • Ext.Component
    this
Component
suspendEvents( Boolean queueSuspended ) : void
暂停触发所有的事件。 (参看resumeEvents)
暂停触发所有的事件。（参看 resumeEvents)
参数:
  • queueSuspended : Boolean
    如果传递为true则排列好暂停的事件使得在调用 resumeEvents 后再触发它们，而不是抛弃所有暂停的事件。
返回值:
  • void
Observable
syncSize () : Ext.BoxComponent
强制组件的大小按照此组件底层元素当前的高度和宽度计算。
强制组件的大小按照此组件底层元素当前的高度和宽度计算。
参数:
  • 无。
返回值:
  • Ext.BoxComponent
    this
BoxComponent
un( String eventName, Function handler, [Object scope] ) : void
删除一个事件处理器(removeListener方法的简写形式)
删除一个事件处理器(removeListener方法的简写形式。)
参数:
  • eventName : String
    处理器关联的事件类型
  • handler : Function
    被删除的处理器 这应该是传入 addListener 中的方法的引用。
  • scope : Object
    （可选）为处理器指定的初始作用域。
返回值:
  • void
Observable
update ( Mixed htmlOrData , [ Boolean loadScripts ], [ Function callback ] ) : void
刷新组件的内部区域。
刷新组件的内部区域。
参数:
  • htmlOrData : Mixed
    如果已经通过tpl为当前组件配置了一个模板，那么 将会使用此参数来装配模板。 如果没有为当前组件配置模板，组件的内容区域将会通过Ext.Element 进行刷新。
  • loadScripts : Boolean
    (可选)只用在使用html配置时此参数才合法。默认为false。
  • callback : Function
    (可选)只用在使用html配置时此参数才合法。 当脚本加载完成时回调函数才被执行。
返回值:
  • void
Component
updateBox ( Object box ) : Ext.BoxComponent
设置此组件底层元素的盒子模型尺寸。(译者注：盒子模型是CSS术语，详细资料请自行搜索。)
设置此组件底层元素的盒子模型尺寸。(译者注：盒子模型是CSS术语，详细资料请自行搜索。)
参数:
  • box : Object
    一个格式为{x, y, width, height}的对象
返回值:
  • Ext.BoxComponent
    this
BoxComponent

公共事件

Event Defined By
added : ( Ext.Component this , Ext.Container ownerCt , number index )
当一个组件被添加到一个Ext.Container时触发
当一个组件被添加到一个Ext.Container时触发
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • ownerCt : Ext.Container
    用于组件的容器
  • index : number
    添加组件的位置
Component
afterrender : ( Ext.Component this )
在组件渲染完成之后触发...

在组件渲染完成之后触发。

afterrender事件在当前组件被rendered 结束之后、在为组件定义的所有afterRender方法执行之后 触发，并且，如果有stateful， 也在状态被保存之后才触发。

监听器将会以如下参数格式被调用:
  • this : Ext.Component
Component
beforedestroy : ( Ext.Component this )
在组件 destroyed 之前触发。 在事件监听器中返回false以停止 destroy 操作。
在组件 destroyed 之前触发。 在事件监听器中返回false以停止 destroy 操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforehide : ( Ext.Component this )
在调用hide方法隐藏组件之前触发。 在事件监听器中返回false可以停止隐藏操作。
在调用hide方法隐藏组件之前触发。 在事件监听器中返回false可以停止隐藏操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforerefresh : ( Chart this )
在图表数据刷新前触发。如果beforerefresh处理函数返回false则refresh动作...
在图表数据刷新前触发。如果beforerefresh处理函数返回false则 refresh 动作将被取消。
监听函数被调用时将传递如下参数：
  • this : Chart
Chart
beforerender : ( Ext.Component this )
在组件被rendered 之前触发。 在事件监听器中返回false可以停止render 操作。
在组件被rendered 之前触发。 在事件监听器中返回false可以停止render 操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforeshow : ( Ext.Component this )
在调用show()方法现实组件之前触发。 事件处理函数返回false可以停止show。
在调用show 方法现实组件之前触发。 事件处理函数返回false可以停止show。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforestaterestore : ( Ext.Component this , Object state )
在组件状态恢复之前触发。返回false停止恢复状态操作。
在组件状态恢复之前触发。返回false停止恢复状态操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    StateProvider返回的状态哈希值。 如果没有禁止此事件，那么状态对象会被传递给applyState。 默认情况下，这样简单地把属性值拷贝到当前组件中。 可以覆盖此方法以提供自定的状态恢复操作。
Component
beforestatesave : ( Ext.Component this , Object state )
在组件状态被保存到配置的状态提供者之前触发。 返回false可以停止保存。
在组件状态被保存到配置的状态提供者之前触发。 返回false可以停止保存。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    状态值哈希。 这由在组件上调用getState() 方法决定。 此方法必须由开发者提供，返回是否需要对状态进行描述，默认情况下， Ext.Component有一个空实现。
Component
destroy : ( Ext.Component this )
在组件被销毁之后触发。
在组件被destroyed之后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
disable : ( Ext.Component this )
在组件被设置为无效状态后触发。
在组件被设置为无效状态后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
enable : ( Ext.Component this )
当组件被设置为有效(enabled)之后触发。
当组件被设置为有效(enabled)之后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
hide : ( Ext.Component this )
在组件被隐藏之后触发。 当调用hide 方法隐藏组件之后触发。
在组件被隐藏之后触发。 当调用hide 方法隐藏组件之后触发。
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
initialize : ( Chart this )
监听器将会以如下参数格式被调用:
  • this : Chart
FlashComponent
move : ( Ext.Component this , Number x , Number y )
在组件移动之后触发。
在组件移动之后触发。
监听器将会用如下的参数格式来调用:
  • this : Ext.Component
  • x : Number
    The new x position
  • y : Number
    The new y position
BoxComponent
refresh : ( Chart this )
图表数据刷新后触发。
图表数据刷新后触发。
监听函数被调用时将传递如下参数：
  • this : Chart
Chart
removed : ( Ext.Component this , Ext.Container ownerCt )
当一个组件被从Ext.Container容器中删除时触发
当一个组件被从Ext.Container容器中删除时触发
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • ownerCt : Ext.Container
    持有组件的容器
Component
render : ( Ext.Component this )
在组件被渲染之后触发。
在组件被 rendered(渲染) 之后触发。
监听器将以如下的参数格式被调用:
  • this : Ext.Component
Component
resize : ( Ext.Component this , Number adjWidth , Number adjHeight , Number rawWidth , Number rawHeight )
在组件被调整大小之后触发。
在组件被调整大小之后触发。
监听器将以如下的参数格式被调用:
  • this : Ext.Component
  • adjWidth : Number
    这是width调整后的值
  • adjHeight : Number
    这是height调整后的值
  • rawWidth : Number
    这是width原来的值
  • rawHeight : Number
    这是height原来的值
BoxComponent
show : ( Ext.Component this )
在调用show 方法显示组件之后触发。
在调用show 方法显示组件之后触发。
监听器将会用如下的参数格式被调用:
  • this : Ext.Component
Component
staterestore : ( Ext.Component this , Object state )
组件状态被存储之后触发。
组件状态被存储之后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    StateProvider返回的状态哈希值。 如果没有禁止此事件，那么状态对象会被传递给applyState。 默认情况下，这样简单地把属性值拷贝到当前组件中。 可以覆盖此方法以提供自定的状态恢复操作。
Component
statesave : ( Ext.Component this , Object state )
在组件状态被保存到所配置的状态提供者之后触发。
在组件状态被保存到所配置的状态提供者之后触发。
监听器将会用如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    状态值hash。 这是由在足见上调用getState() 方法决定的。 开发者必须提供此方法以返回是否需要恢复状态，默认情况下， Ext.Component有一个空实现。
Component


Observable
    Component
      BoxComponent
        FlashComponent
          Chart
            CartesianChart
              ColumnChart

Class Ext.chart.ColumnChart

包: | Ext.chart
定义类的文件: | Chart.js
类: | ColumnChart
继承自: | CartesianChart

配置项

Config Options Defined By
allowDomMove : Boolean
在渲染时组件是否可以移动Dom节点(默认为true)。
Component
anchor : String
注: 这个配置只用于该组件被包含在一个已使用AnchorLayout...

注: 这个配置只用于该组件被包含在一个已使用 AnchorLayout (或者其子类)配置的Container时。 基于布局管理器，例如：

  • Ext.form.FormPanel
  • 指定 layout: 'anchor' // or 'form', or 'absolute'

参见 Ext.layout.AnchorLayout. anchor 。

BoxComponent
applyTo : Mixed
指定一个元素的id、一个DOM元素或者一个已经存在并被渲染到DIV中的元素，此DIV已经被...

指定一个元素的id、一个DOM元素或者一个已经存在并被渲染到DIV中的元素，此DIV已经被 渲染到document中，并且为当前组件指定了一些结构化的标签。

  • 描述 :
      当使用了 applyTo， 在主元素中也可以用id或者CSS类名来指定组件的托管部分， 并且，如果可以的话，创建的组件可能也会试图在那个标签中创建它的子组件。
  • 注意 :
      当使用此配置项时，无需调用render()方法。
      如果指定了applyTo属性，任何传递给 renderTo 的值都会被忽略，并且目标元素的父节点将会自动被用作组件的容器。
Component
autoEl : Mixed
一个表签名或者一个 DomHelper 描述，用来创建 Element ，它将封装当前组件...

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

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

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

{
    xtype: 'box',
    autoEl: {
        tag: 'img',
        src: 'http://www.example.com/example.jpg'

    }
}, {
    xtype: 'box',
    autoEl: {
        tag: 'blockquote',
        html: 'autoEl is cool!'
    }
}, {
    xtype: 'container',
    autoEl: 'ul',
    cls: 'ux-unordered-list',
    items: {
        xtype: 'box',
        autoEl: 'li',
        html: 'First list item'
    }
}
Component
autoHeight : Boolean
如果值为true，height配置项为'auto'，否则值为false的话使用固定的高度...

如果值为true，height配置项为'auto'，否则值为false的话使用固定的高度， 或者可以由其父类容器 layout manager来控制。(默认值为 false)。

注: 虽然很多组件继承了这个配置选项，但不是所有这些组件的自适应高度配置都会像期望的那样起作用。 设置autoHeight：值为true时，浏览器将根据元素的内容自动设置高度，这将意味着Ext不会去管理高度。

如果是由浏览器来管理高度，需要注意的是，通过浏览器进行调整的结构组件内不能被发现， 因此宽度的变化可能导致需要进行同步处理元素的高度。 例如：

var w = new Ext.Window({
    title: 'Window',
    width: 600,
    autoHeight: true,
    items: {
        title: 'Collapse Me',
        height: 400,
        collapsible: true,
        border: false,
        listeners: {
            beforecollapse: function() {
                w.el.shadow.hide();
            },
            beforeexpand: function() {
                w.el.shadow.hide();
            },
            collapse: function() {
                w.syncShadow();
            },
            expand: function() {
                w.syncShadow();
            }
        }
    }
}).show();
BoxComponent
autoScroll : Boolean
如果值为true，将会在该元素上使用overflow:'auto'配置，并且在必要的时候...
如果值为true，将会在该元素上使用overflow:'auto'配置，并且在必要的时候自动显示滚动条，否则，溢出部分的组件都会被切除(默认值为 false)。
BoxComponent
autoShow : Boolean
如果组件需要检测隐藏CSS属性(如 'x-hidden' 或者 'x-hide-display')并且在渲染时删除...
如果组件需要检测隐藏CSS属性(如 'x-hidden' 或者 'x-hide-display')并且在渲染时删除它们 (默认为false)，设置此值为true。
Component
autoWidth : Boolean
如果为true，使用width:'auto'配置，否则使用固定的宽度...

如果为true，使用width:'auto'配置，否则使用固定的宽度，或者可以由其父类容器的layout manager来控制。(默认值为 false)。

注: 虽然很多组件继承了这个配置选项，但不是所有这些组件的自适应宽度配置都会像期望的那样起作用。 设置autoWidth：值为true时，浏览器将根据元素的内容自动设置宽度，这将意味着Ext不会去管理宽度。

如果是由浏览器来管理宽度，需要注意的是，通过浏览器进行调整的结构组件内不能被发现，因此宽度的变化可能导致需要进行同步处理元素的宽度。 例如，在这个元素的目标是：

<div id='grid-container' style='margin-left:25%;width:50%'></div>
当浏览器窗口改变时，渲染后的Panel必须监听浏览器窗口大小的变化，以便通知子项，浏览器改变了其宽度：

var myPanel = new Ext.Panel({
    renderTo: 'grid-container',
    monitorResize: true, // relay on browser resize
    title: 'Panel',
    height: 400,
    autoWidth: true,
    layout: 'hbox',
    layoutConfig: {
        align: 'stretch'
    },
    defaults: {
        flex: 1
    },
    items: [{
        title: 'Box 1',
    }, {
        title: 'Box 2'
    }, {
        title: 'Box 3'
    }],
});
BoxComponent
backgroundColor : String
chart的背景颜色。默认为 '#ffffff'。
FlashComponent
boxMaxHeight : Number
设置组件的最大高度值...

设置组件的最大高度值。

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

BoxComponent
boxMaxWidth : Number
设置组件的最大宽度值...

设置组件的最大宽度值。

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

BoxComponent
boxMinHeight : Number
设置组件的最小高度值...

设置组件的最小高度值。

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

BoxComponent
boxMinWidth : Number
设置组件的最小宽度值...

设置组件的最小宽度值。

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

BoxComponent
bubbleEvents : Array
一个事件数组，当这些事件被触发时，将会被冒泡到所有父容器中。参见....

一个事件数组，当这些事件被触发时，将会被冒泡到所有父容器中。参见 Ext.util.Observable.enableBubble。 默认为 []。

Component
chartStyle : Object
设置图表样式。由于本身包含默认样式，所以修改这个属性将会覆盖内置...
设置图表样式。由于本身包含默认样式，所以修改这个属性将会覆盖内置样式。 使用 extraStyle 来为默认样式附加自定义样式。
Chart
clearCls : String
应用到特殊的clearing div的CSS类， 这个clearing div直接渲染到每个form field的包装器后面...

应用到特殊的clearing div的CSS类， 这个clearing div直接渲染到每个form field的包装器后面，以提供 清除field的功能(默认为 'x-form-clear-left')。

注意: 只有在当前组件被渲染到一个使用FormLayout 布局(例如 Ext.form.FormPanel 或者指定 layout:'form')的 容器中、或者是指定了一个fieldLabel 、或者指定isFormField=true 时此配置才有效。

另请参见 Ext.layout.FormLayout. fieldTpl。

Component
cls : String
一个可选的额外CSS类，它将被添加到当前组件的元素上(默认为'')...
一个可选的额外CSS类，它将被添加到当前组件的元素上(默认为'')。 此属性对于在组件上，或者它的任何使用标准CSS规则的孩子节点上， 添加定制的样式非常有用。
Component
contentEl : String
(可选)指定一个已存在的HTML元素，或者一个已存在HTML元素的...

(可选)指定一个已存在的HTML元素，或者一个已存在HTML元素的 id ，它们将被用作当前组件的内容。

  • 描述 :
    此配置选项被用来将一个已存在的HTML元素 插入到一个新组件(在组件渲染之后它简单地移动DOM元素) 的layout元素中，使它成为该组件的内容。
  • 注意 :
    指定的HTML元素将被append到组件的layout元素中， 在所有配置的 HTML 被插入之后， 并且，这样的话，在render事件 被触发时，document中将不再包含此元素。
    指定的HTML元素将不会参与组件所有可能使用的 layout 过程(译者注：指这些HTML元素 不会参与布局操作)。 它仅是HTML而已。布局操作实在孩子 items 上进行的。
    添加 x-hidden 或者 x-hide-display CSS类，以防在内容渲染到panel时发生闪烁。
Component
ctCls : String
一个可选的外部CSS样式，添加到这个组件的容器(默认值为 '')。 这个方法对于使用标准的CSS规则...

一个可选的外部CSS样式，添加到这个组件的容器(默认值为 '')。 这个方法对于使用标准的CSS规则，为组件或它的任何一个子组件添加特定的样式非常有用。 参见 Ext.layout.ContainerLayout和 extraCls 。

注意: ctCls 默认为 ''期望如下的类，它们将指定一个默认值:

  • Box Layout : 'x-box-layout-ct'
使用一个额外的CSS类配置以上的Class，它是append到默认对象上的。例如， 对于BoxLayout (Hbox and Vbox):
                                ctCls: 'x-box-layout-ct custom-class'

Component
data : Mixed
初始化数据集，它将被应用到 tpl 上以刷新组件的内容区域。
Component
disableCaching : Boolean
如果为true，则在图表url末端附加禁止缓存的字符参数，在Opera和IE下默认为true。
Chart
disabled : Boolean
当前组件处于无效状态时为true。 Read-only.
Component
disabledClass : String
当组件处于无效状态时添加到组件上的CSS类(默认为 'x-item-disabled')。
Component
expressInstall : Boolean
如果没有安装flash，设置为true将会提示用户进行安装。 注意，此参数会使用Ext.FlashComponent.EXPRESS_INSTALL_URL...
如果没有安装flash，设置为true将会提示用户进行安装。 注意，此参数会使用Ext.FlashComponent.EXPRESS_INSTALL_URL 此值应该设置为一个本地资源，默认为 false。
FlashComponent
extraStyle : Object
包含可能覆盖或者追加到默认样式的额外样式。默认为null，想要查看详细列表，请...
包含可能覆盖或者追加到默认样式的额外样式。默认为null，想要查看详细列表，请访问YUI图表站点 http://developer.yahoo.com/yui/charts/#basicstyles
如下列出一些常用样式:
  • padding - 图表内容边缘的空间，padding属性不会增加图表大小。
  • animationEnabled - 布尔值，用来指定标记动画是否启用，默认启用。
  • font - 用来定义图表字体样式的对象。默认为 { name: 'Tahoma', color: 0x444444, size: 11 }
    • name - 字体名称
    • color - 字体颜色 (十六进制编码, 如: "#ff0000", "ff0000" 或 0xff0000)
    • size - 以point（点）为单位的字体大小 (只能为整数, 如: 11)
    • bold - boolean
    • italic - boolean
    • underline - boolean
  • border - 定义图表边框的样式。图表会缩小尺寸以适应边框宽度。
    • color - 边框颜色 (十六进制编码, 如: "#ff0000", "ff0000" 或 0xff0000)
    • size - 以像素为单位的边框宽度 (只能为整数, 如: 1)
  • background - 定义图表背景样式的对象。
    • color - 边框颜色 (十六进制编码， 如: "#ff0000", "ff0000" 或 0xff0000)
    • image - 图片的URL，路径可以相对于当前页面，也可为绝对路径。
  • legend - 定义图例说明样式的对象
    • display - 图例说明的位置。 可选值为 "none", "left", "right", "top", 和 "bottom".
    • spacing - 图片的URL，路径可以相对于当前页面，也可为绝对路径。
    • padding, border, background, font - 见上面同名项。
  • dataTip - 定义数据提示样式的对象。 (tooltip).
    • padding, border, background, font - 见上面同名项。
  • xAxis 和 yAxis - 定义横纵坐标（x/y轴）样式的对象。
    • color - 见上面同名项。
    • size - 见上面同名项。
    • showLabels - boolean
    • labelRotation - 可选值范围从-90°到90°，默认为0。
  • majorGridLines 和 minorGridLines - 定义网格线条样式的对象。
    • color, size - 见上面同名项。
  • zeroGridLine - 定义零网格线样式的对象。
    • color, size - 见上面同名项。
  • majorTicks 和 minorTicks - 定义图表中刻度样式的对象。
    • color, size - 见上面同名项。
    • length - 从坐标轴上延伸的刻度的长度。
    • display - 刻度的显示方式，可选值为 "none", "inside", "outside", 和 "cross".
Chart
fieldLabel : String
紧靠此field显示的标签文本(默认值为 '')。注意...

紧靠此field显示的标签文本(默认值为 '')。

注意:只有在当前组件被渲染到一个使用FormLayout 的容器中时，此配置才有效。 (例如 Ext.form.FormPanel 或 指定 layout:'form')。

另请参见 hideLabel 、 Ext.layout.FormLayout和 fieldTpl。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Name'
    }]
});
Component
flashParams : Object
作为参数传递给flash对象的键值对集合。可能的参数可以在这里找到: http://kb2.adobe.com/cps/127/tn_12701.html默认为...
作为参数传递给flash对象的键值对集合。可能的参数可以在这里找到: http://kb2.adobe.com/cps/127/tn_12701.html默认为 undefined。
FlashComponent
flashVars : Object
作为flash变量传递给flash对象的键值对集合。 默认为 undefined。
FlashComponent
flashVersion : String
显示flash内容所需的flash版本。默认为 '9.0.115'。
FlashComponent
flex : Number
注: 这个配置只用于该组件被包含在一个已使用BoxLayout配置的Container中时...

注: 这个配置只用于该组件被包含在一个已使用BoxLayout配置的Container中时。通过计算每一个子组件的flex值所占全部flex值之和的比例，来决定子组件的宽(HBoxLayout)高(VBoxlayout)。 任何子项的 flex = 0 或 flex = undefined 将不被设置(初始值大小将不被改变)。

BoxComponent
height : Number
组件的高度(默认值为 auto)。注:如果想使用百分比的方式...
组件的高度(默认值为 auto)。注:如果想使用百分比的方式来设置值，请查看 Ext.Component.anchor。
BoxComponent
hidden : Boolean
如果当前组件处于隐藏状态，此值为true。Read-only。
Component
hideLabel : Boolean
true时完全隐藏label元素 ( label 和 separator)。 默认为 false。 默认情况下，即使你不指定...

true时完全隐藏label元素 ( label 和 separator)。 默认为 false。 默认情况下，即使你不指定 fieldLabel 它的空间仍然会被保留，这样这块区域会与其它确实拥有label的区域位于同一排。 讲此值设置为 true 将导致此区域不再保留此空间。

注意: 参见 clearCls 的注释。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield'
        hideLabel: true
    }]
});
Component
hideMode : String
组件如何隐藏，支持的值有： 'visibility' (css visibility), 'offsets' (位置偏移量为负值) 和...

组件如何隐藏，支持的值有： 'visibility' (css visibility), 'offsets' (位置偏移量为负值) 和 'display' (css display).

注意:一般首选默认值 'display'，因为当组件第一次显示的时候它们会自动进行布局 (隐藏的时候不会调整尺寸)。

Component
hideParent : Boolean
此值为true时，当调用hide/show方法时，将会hide和show组件的容器...
此值为true时，当调用hide/show方法时，将会hide和show组件的容器；false时将会 hide和show组件自身(默认为false)。例如，这可以用作window上隐藏按钮的一种 快捷操作，通过设置此按钮的hideParent:true，然后把它添加到window上。
Component
html : String/Object
一个HTML片段，或者一个 DomHelper 描述，用作layout元素的内容(默认为'')。...
一个HTML片段，或者一个 DomHelper 描述，用作layout元素的内容(默认为'')。 这个HTML内容在组件渲染之后才被添加，所以在 render 出发的时候，document中尚未包含此HTML。 但是这个内容将会在所有配置的 contentEl 之前被插入到body标签中。
Component
id : String
当前组件唯一的id(默认为auto-assigned id)...

当前组件唯一的id(默认为auto-assigned id)。 如果你需要在以后访问组件，而又没有一个有效的组件对象引用，那么你需要指定一个 id( 也就是，使用Ext. getCmp方法 )。

注意，此id也将被用作组件底层HTML标签的id，这些标签被渲染到页面中。 这将允许你编写基于id的CSS规则，以独立地描述指定的实例；并且，也可以通过 组件父标签的id选中子元素。

注意:为了避免与唯一的id 产生重复， 请参见 itemId 和 ref 。

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

Component
itemCls : String
注意: 只有在当前组件被渲染到一个使用FormLayout 布局的 容器中时此配置才有效...

注意: 只有在当前组件被渲染到一个使用FormLayout 布局的 容器中时此配置才有效。 (例如Ext.form.FormPanel 或者指定 layout:'form')。

一个附加的CSS类，应用到div上，包装当前field的表单元素。 如果提供了此参数， field级上的itemCls将会覆盖 container级上提供的 默认itemCls。 为itemCls指定的值将会被添加默认的 类('x-form-item')。

既然它被应用到项目的包装器上(参见 Ext.layout.FormLayout。 fieldTpl)， 它将允许你编写能应用到此field、label(如果有指定)、或者field内部任何其它元素的标准CSS规则。

注意: 参考 fieldLabel的注释。 .

示例用法:

// Apply a style to the field's label:
<style>
    .required .x-form-item-label {font-weight:bold;color:red;}
</style>

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Name',
        itemCls: 'required' //this label will be styled
    },{
        xtype: 'textfield',
        fieldLabel: 'Favorite Color'
    }]
});
Component
itemId : String
当没有可利用的对象引用时，itemId可以作为第二选择，用来获得一个组件的引用， 代替 ...

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

var c = new Ext.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'); // 与 Ext.getCmp()不同

p2 = p1.ownerCt.getComponent('p2'); // 通过兄弟对象获得引用

另请参见 id 和 ref 。

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

Component
labelSeparator : String
每个fieldLabel 文本后面现实的分隔符。 此属性可以在多个层次上进行配置...

每个fieldLabel 文本后面现实的分隔符。 此属性可以在多个层次上进行配置。优先顺序为：

  • field / component level
  • container level
  • layout level (默认为冒号 ':')
如不需要为当前field的label显示分隔符，指定一个空字符串''即可。

注意:参见 clearCls 的注释。

另请参见 hideLabel 和 Ext.layout.FormLayout。 fieldTpl。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    layoutConfig: {
        labelSeparator: '~'   // layout config has lowest priority (defaults to ':')
    },
    labelSeparator: '>>',     // config at container level
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Field 1',
        labelSeparator: '...' // field/component level config supersedes others
    },{
        xtype: 'textfield',
        fieldLabel: 'Field 2' // labelSeparator will be '='

    }]
});
Component
labelStyle : String
一个CSS样式描述字符串，它将直接应用到当前field的label上...

一个CSS样式描述字符串，它将直接应用到当前field的label上。 如果有设置，默认为容器的labelStyle值(例如 Ext.layout.FormLayout.labelStyle , 或者 '')。

注意:参见 clearCls 的注释。

另请参见 hideLabel 和 Ext.layout.FormLayout. fieldTpl。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Name',
        labelStyle: 'font-weight:bold;'
    }]
});
Component
listeners : Object
一个包含一个或多个事件处理器的配置对象，会在初始化的时候被添加到目标对象上...

一个包含一个或多个事件处理器的配置对象，会在初始化的时候被添加到目标对象上。 该配置对象应该是一个有效的监听器配置对象就像 addListener例子中指定的一样可一次附加多个处理器。

ExtJs Components上的DOM事件

一些 ExtJs Component 类导出时会选择一些DOM事件(例如 "click", "mouseover" 等等), 这通常只是在有额外的值可以被添加时发生。例如DataView类的 click事件会传递被点击的节点。也可以直接在Component的HTMLElementevent上访问DOM事件，但必需在Component被渲染后监听器才能添加到Element 上。可以按照以下步骤添加插件:

// 插件会用一个监听器配置对象进行配置。
//该组件会被添加到所有处理方法的参数列表上。
Ext.DomObserver = Ext.extend(Object, {
    constructor: function(config) {
        this.listeners = config.listeners ? config.listeners : config;
    },

    // 组件将自己传递进了插件的初始化方法里
    init: function(c) {
        var p, l = this.listeners;
        for (p in l) {
            if (Ext.isFunction(l[p])) {
                l[p] = this.createHandler(l[p], c);
            } else {
                l[p].fn = this.createHandler(l[p].fn, c);
            }
        }

        // 渲染后立即添加监听器到元素上
        c.render = c.render.createSequence(function() {
            var e = c.getEl();
            if (e) {
                e.on(l);
            }
        });
    },

    createHandler: function(fn, c) {
        return function(e) {
            fn.call(this, e, c);
        };
    }
});

var combo = new Ext.form.ComboBox({

    // 元素被点击后折叠
    plugins: [ new Ext.DomObserver({
        click: function(evt, comp) {
            comp.collapse();
        }
    })],
    store: myStore,
    typeAhead: true,
    mode: 'local',
    triggerAction: 'all'
});

Observable
margins : Object
注:此配置只用于该组件展现在一个使用BorderLayout...

注:此配置只用于该组件展现在一个使用BorderLayout 或 BoxLayout的两个子类之一作为布局的容器。

这个margins对象在该组件中的格式为：

{top: (top margin),right: (right margin),bottom: (bottom margin),left: (left margin)}

也可以是一个字符串，中间用空格分隔，margin值为数字。 把matches中每一个值的次序跟CSS中margin值的排列方式相对应：

  • 如果只有一个值，它适用于所有方面。
  • 如果有两个值，top和bottom的边框设置为第一个值，left和right设置为第二个值。
  • 如果有三个值，top设置为第一个值，left和right设置为第二个值，bottom设置为第三个值。
  • 如果有四个值，分别设置为top, right, bottom, left。

默认值:

{top:0, right:0, bottom:0, left:0}
BoxComponent
overCls : String
一个可选的额外的CSS类，它将在鼠标移过元素时被添加到组件上...
一个可选的额外的CSS类，它将在鼠标移过元素时被添加到组件上，鼠标移出时 删除。(默认为'')。此属性对于在组件上，或者它的任何使用标准CSS规则的孩子节点上， 添加定制的'active' 或者 'hover'样式非常有用。
Component
pageX : Number
如果该组件被包含在一个指定位置的容器中，这个值表示页面级的x坐标值（译者注：在有滚动条的情况下这个值很有用）。
BoxComponent
pageY : Number
如果该组件被包含在一个指定位置的容器中，这个值表示页面级的y坐标值（译者注：在有滚动条的情况下这个值很有用）。
BoxComponent
plugins : Object/Array
一个对象或者一个对象数组，为组件提供特殊的功能 ...
一个对象或者一个对象数组，为组件提供特殊的功能。 对一个合法的插件唯一的要求是它含有一个init()方法， 能接收一个Ext.Component型的参数。 当组件被创建时，如果有可用的插件，组件将会调用每个插件的init方法， 并将自身的引用作为方法参数传递给它。然后，每个插件就可以调用方法或者响应组件上的事件， 就像需要的那样提供自己的功能。
Component
ptype : String
需要创建配置的ptype。 当传递一个配置对象给构造函数时...
需要创建配置的ptype。 当传递一个配置对象给构造函数时，此配置选项不会被使用。 只有在使用懒初始化的时候此配置项才会被使用， 此时Plugin不是 通过一个完整的实例组件，而是通过一个Component配置指定的。 在渲染时，将会查找ptype以决定创建何种类型的Plugin。

如果你创建自己的Plugin，你可以通过 Ext.ComponentMgr.registerPlugin 对它们进行注册，以便能利用懒初始化和渲染机制。
Component
ref : String
一个路径描述，与组件的 ownerCt 相关，它描述了把当前组件的命名引用放置到哪个父容器中去。...

一个路径描述，与组件的 ownerCt 相关，它描述了把当前组件的命名引用放置到哪个父容器中去。

祖先的坐标路径可以通过'/'字符进行分隔。 例如，将一个Toolbar Button的引用放入 拥有此Toolbar的Panel中:

var myGrid = new Ext.grid.EditorGridPanel({
    title: 'My EditorGridPanel',
    store: myStore,
    colModel: myColModel,
    tbar: [{
        text: 'Save',
        handler: saveChanges,
        disabled: true,
        ref: '../saveButton'
    }],
    listeners: {
        afteredit: function() {
//          The button reference is in the GridPanel
            myGrid.saveButton.enable();
        }
    }
});

在上面的代码中，如果 ref 是 'saveButton' ，那么引用将会被放置到Toolbar中。 ref 中的每个'/' 都会从组件的 ownerCt 向上移动一级。

另请参见 added 和 removed 事件。

Component
region : String
注: 此配置只用于该组件展现在一个布局为BorderLayout的容器中...

注: 此配置只用于该组件展现在一个布局为BorderLayout的容器中(例如指定layout:'border')。

详见Ext.layout.BorderLayout。

BoxComponent
renderTo : Mixed
该值可以是一个节点的id、一个DOM节点或者一个已存在的元素...

该值可以是一个节点的id、一个DOM节点或者一个已存在的元素， 组件将会被渲染到其中。

  • 注意 :
      如果组件不是一个Container 的子项目时， 不要使用此选项。 渲染和管理它的子项目是一个Container 的layout manager的责任。
      当使用此配置项时，无需调用render()方法。

另请参见 render 。

Component
seriesStyles : Object
图表刷新后将要应用于各序列的样式。默认为 null.
Chart
stateEvents : Array
一个事件数组，当它们被触发时，组件需要保存自己的状态(默认值为 none)...

一个事件数组，当它们被触发时，组件需要保存自己的状态(默认值为 none)。 它们可以是任何该组件支持的事件类型，包括浏览器事件和 自定义事件(例如['click', 'customerchange'])。

对于保存和恢复组件状态的详细解释，参见 stateful

Component
stateId : String
为该组件指定的唯一的id值，它被用作管理组件状态的目的...
为该组件指定的唯一的id值，它被用作管理组件状态的目的。 (如果设定了id，默认值为组件自己的id，否则，如果组件使用自动生成的id，此值为null)。

对于保存和反解析组件状态的解释，参见 stateful 。

Component
stateful : Boolean
一个标志参数，它将引起组件在启动时尝试从一个保存的状态中恢复内部状态参数...

一个标志参数，它将引起组件在启动时尝试从一个保存的状态中恢复内部状态参数。 组件必须要么拥有一个 stateId 或者 id ，它们被分配给需要被管理的状态属性。 在跨页面加载时，不保证自动生成的id属性的稳定性， 并且，不能依赖此id来保存和恢复一个组件的相同状态。

为了保存状态的操作能够工作，状态管理器的提供者必须 被设置成一个Ext.state.Provider 的实现类，它覆盖了set 和get 方法，以便保存和恢复name/value对。 有一个内置的Ext.state.CookieProvider 可用。

为当前页面设置状态提供者:

Ext.state.Manager.setProvider(new Ext.state.CookieProvider({
    expires: new Date(new Date().getTime()+(1000*60*60*24*7)), //7 days from now
}));

当 stateEvents 配置项中其中之一的事件被触发时， 一个状态可保存的组件将试图保存其状态。

保存状态时，一个可保存状态的组件首先需要通过调用 getState 方法来序列化它的状态。 默认情况下，此函数什么事都不做。 开发者必须提供一个实现，返回一个hash对象，它描述了组件可恢复的状态。

getState方法产生的值将会传递给 Ext.state.Manager.set 方法，它使用配置的 Ext.state.Provider 来保存对象，以组件的 stateId 为key，或者，如果此值（指stateId）没有指定时， 使用它的 id 作为key。

在进行构造时，一个可保存状态的组件试图通过调用 Ext.state.Manager.get方法来 恢复它的状态，传递 stateId 或者，如果此值（指stateId）没有指定时， 使用它的 id 作为参数。

结果对象被传递给 applyState 。 applyState 的默认实现只是简单地把属性拷贝到对象中， 但是开发者可以覆盖此方法以支持更多行为。

通过向 beforestaterestore, staterestore, beforestatesave 和 statesave 事件上绑定监听器，你可以在保存和恢复状态时进行额外的处理。

Component
style : String
被添加到组件元素的特定样式。 必须是按照...
被添加到组件元素的特定样式。 必须是按照 Ext.Element.applyStyles 类指定格式的合法参数值。

new Ext.Panel({
    title: 'Some Title',
    renderTo: Ext.getBody(),
    width: 400, height: 300,
    layout: 'form',
    items: [{
        xtype: 'textarea',
        style: {
            width: '95%',
            marginBottom: '10px'
        }
    },
        new Ext.Button({
            text: 'Send',
            minWidth: '100',
            style: {
                marginBottom: '10px'
            }
        })
    ]
});
Component
tabTip : String
注: 这个配置只用于当该组件作为TabPanel的一个子项目时使用...

注: 这个配置只用于当该组件作为TabPanel的一个子项目时使用。

一个String类型的innerHTML(支持html标签)，当鼠标放在该选项上的时，显示一个tooltip。为了tips能够被渲染，Ext.QuickTips.init()必须被提前调用。
BoxComponent
tpl : Mixed
一个 Ext.Template , Ext.XTemplate 或者一个用来形成一个Ext.XTemplate的字符串数组...
一个 Ext.Template , Ext.XTemplate 或者一个用来形成一个Ext.XTemplate的字符串数组。 与 data 和 tplWriteMode 配置项协同使用。
Component
tplWriteMode : String
刷新组件的内容区域时使用的Ext.(X)Template方式。 默认为'overwrite' (参见 Ext.XTemplate.overwrite )。
刷新组件的内容区域时使用的Ext.(X)Template方式。 默认为'overwrite' (参见 Ext.XTemplate.overwrite )。
Component
url : String
需要包含在chart中的URL。默认为 undefined。
Chart
width : Number
组件的宽度(默认值为 auto)。注:如果想使用百分比的方式...
组件的宽度(默认值为 auto)。注:如果想使用百分比的方式来设置值，请查看 Ext.Component.anchor。
BoxComponent
wmode : String
flash对象的wmode。此参数可以用来控制层叠次序。默认为 'opaque'。
FlashComponent
x : Number
如果被包含在一个指定位置的容器中，这个值表示x(left)坐标值。
BoxComponent
xtype : String
需要创建配置的xtype。 当传递一个配置对象给构造函数时...
需要创建配置的xtype。 当传递一个配置对象给构造函数时，此配置选项不会被使用。 只有在使用懒初始化的时候此配置项才会被使用，此时容器的子项目不是 通过一个完整的实例组件，而是通过一个Component配置指定的。 在渲染时，将会查找xtype以决定创建何种类型的子组件。

预定义的xtype列表如下： here。

如果你继承Component创建你自己的组件，你需要使用Ext.ComponentMgr.registerType 对它们进行注册，以便利用懒初始化和渲染机制。
Component
y : Number
如果被包含在一个指定位置的容器中，这个值表示y(top)坐标值。
BoxComponent

公共属性

Property Defined By
CHART_URL : String
设置从哪里加载图表。应该设置为本地图表源（路径）。
Chart
EXPRESS_INSTALL_URL : String
如果不存在，为初始化flash设置的url。 此参数应该设置为一个本地资源。
FlashComponent
disabled : Boolean
当前组件处于无效状态时为true。 Read-only.
Component
el : Ext.Element
封装了当前组件的Ext.Element。 Read-only。通常情况下，这将是一个<DIV>元素，它由此类的...

封装了当前组件的Ext.Element。 Read-only。

通常情况下，这将是一个<DIV>元素，它由此类的 onRender方法创建，但是它可以通过使用 autoEl 配置项进行覆盖。

注意: 直到组件渲染完成此元素都将处于无效状态。

如需向当前组件的 DOM事件(而不是当前组件自己的Observable事件)添加监听器， 更多建议，参见 listeners 配置项，或者直接使用一个render监听器:

new Ext.Panel({
    title: 'The Clickable Panel',
    listeners: {
        render: function(p) {
            // Append the Panel to the click handler's argument list.
            p.getEl().on('click', handlePanelClick.createDelegate(null, [p], true));
        },
        single: true  // Remove the listener after first invocation
    }
});

另请参见 getEl

Component
hidden : Boolean
如果当前组件处于隐藏状态，此值为true。Read-only。
Component
initialConfig : Object
当前组件的初始化配置描述。 Read-only。
Component
ownerCt : Ext.Container
组件所属的Container (默认为undefined，当前组件被添加到一个容器中时此值被自动设置)...
组件所属的Container (默认为undefined，当前组件被添加到一个容器中时此值被自动设置)。 Read-only。

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

Component
refOwner : Ext.Container
如果当前组件是一个容器的孩子，并且是通过一个 ref 配置项被注册的，则此值为 ref 引用被插入到的祖先容器。
如果当前组件是一个容器的孩子，并且是通过一个 ref 配置项被注册的，则此值为 ref 引用被插入到的祖先容器。
Component
rendered : Boolean
如果当前组件已经被渲染了，此值为true。Read-only.
Component

公共方法

Method Defined By
ColumnChart()
参数:
  • 无。
返回值:
  • void
ColumnChart
addClass ( string cls ) : Ext.Component
为组件底层的元素添加CSS样式。
为组件底层的元素添加CSS样式。
参数:
  • cls : string
    需要添加的CSS样式的class名称
返回值:
  • Ext.Component
    this
Component
addEvents( Object|String o, string Optional. ) : void
添加指定的事件到事件列表上，事件会被该Observable触发。
添加指定的事件到事件列表上，事件会被该Observable触发。
参数:
  • o : Object|String
    以事件名作为属性true作为值的对象 或者当多个事件名被分开的传递时则为第一个事件名。
  • Optional. : string
    事件名被分开的传递时则为事件名。 用法:
    this.addEvents('storeloaded', 'storecleared');
返回值:
  • void
Observable
addListener( String eventName, Function handler, [Object scope], [Object options] ) : void
给对象添加事件处理器。
给对象添加事件处理器。
参数:
  • eventName : String
    监听的事件名。
  • handler : Function
    事件调用的方法
  • scope : Object
    （可选）处理方法执行的作用域 (this的引用 reference)。 如果被忽略。默认为触发事件的对象。
  • options : Object
    （可选）包含处理器配置和属性的对象。 可能包含以下的属性:
    • scope : Object
      处理方法执行的作用域(this的引用) 。 如果被忽略。默认为触发事件的对象。
    • delay : Number
      在触发事件后延迟调用处理器的毫秒数。
    • single : Boolean
      如果为True则添加一个处理器来处理下一次的事件触发（仅一次），然后移除自己。
    • buffer : Number
      使得处理器延迟指定毫秒数后预定的运行在 一个Ext.util.DelayedTask中 。 如果事件在时间内再一次被触发，原始的处理器不会被调用，但是新的处理器会预定的在他的位置上。
    • target : Observable
      如果事件在目标的Observable上触发则仅仅调用处理器， 否则 事件会从子类的Observable上冒泡

    组合选项
    使用这些选项参数,可能会组合出不同类型的监听器：

    一个延迟的，一次性的监听器。

    myDataView.on('click', this.onClick, this, {
single: true,
delay: 100
});

    一次调用附加多个处理器
    该方法同样支持传递一个包含指定的多个处理器的属性的配置对象参数。

    myGridPanel.on({
'click' : {
    fn: this.onClick,
    scope: this,
    delay: 100
},
'mouseover' : {
    fn: this.onMouseOver,
    scope: this
},
'mouseout' : {
    fn: this.onMouseOut,
    scope: this
}
});

    或者一个简写的语法：

    myGridPanel.on({
'click' : this.onClick,
'mouseover' : this.onMouseOver,
'mouseout' : this.onMouseOut,
 scope: this
});
返回值:
  • void
Observable
applyToMarkup ( String/HTMLElement el ) : void
将此组件添加到已存在的有效的HTML标签中。 使用该方法时，无需再调用render()方法。
将此组件添加到已存在的有效的HTML标签中。 使用该方法时，无需再调用render()方法。
参数:
  • el : String/HTMLElement
返回值:
  • void
Component
bindStore ( Store store ) : void
改变图表绑定的数据集，并刷新。
改变图表绑定的数据集，并刷新。
参数:
  • store : Store
    绑定到图表的数据集合。
返回值:
  • void
Chart
cloneConfig ( Object overrides ) : Ext.Component
默认使用原先传递给当前实例的配置值克隆当前组件。
默认使用原先传递给当前实例的配置值克隆当前组件。
参数:
  • overrides : Object
    一个新的配置项，包含需要覆盖到克隆版本的所有属性。 可以传递一个id参数给此对象，否则将自动生成一个新的id以避免发生重复。
返回值:
  • Ext.Component
    当前组件的克隆副本
Component
destroy () : void
通过如下方法销毁对象：删除所有的事件监听器、将组件的元素从DOM树中删除...
通过如下方法销毁对象：删除所有的事件监听器、将组件的元素从DOM树中删除（如果可以）、 将组件从它的 Ext.Container（如果可用）中删除、 并且将它从Ext.ComponentMgr中 注销。 销毁操作一般由框架自动完成，一般情况下不需要直接调用该方法。
参数:
  • 无。
返回值:
  • void
Component
disable () : Ext.Component
将组件置为无效状态，并出发'disable'事件。
将组件置为无效状态，并出发'disable'事件。
参数:
  • 无。
返回值:
  • Ext.Component
    this
Component
enable () : Ext.Component
将组件置为有效状态并触发'enable'事件。
将组件置为有效状态并触发'enable'事件。
参数:
  • 无。
返回值:
  • Ext.Component
    this
Component
enableBubble( String/Array events ) :void
是否现在使得事件会被该Observable触发并调用 this.getBubbleTarget()方法在拥有者的继承树...

是否现在使得事件会被该Observable触发并调用 this.getBubbleTarget()方法在拥有者的继承树中冒泡。Observable的基础类中没有该方法的实现。

该方法一般被Ext.Components用来冒泡事件到拥有者的容器。参看Ext.Component.getBubbleTarget默认的实现 在Ext.Component中返回组件的直接拥有者。但是如果需要的是一个已知的目标，该方法可以被重写来更快的访问需求的目标。

例子:

Ext.override(Ext.form.Field, {
    // 添加方法到Field的initComponent上改变事件为冒泡
    initComponent : Ext.form.Field.prototype.initComponent.createSequence(function() {
        this.enableBubble('change');
    }),

    // 我们知道我们想让Field的事件冒泡到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() {
            // 如果样式被修改标题会变红。
            myForm.header.setStyle('color', 'red');
        }
    }
});
参数:
  • events : String/Array
    冒泡的事件名，或事件名数组
返回值:
  • void
Observable
findParentBy ( Function fn ) : Ext.Container
通过自定义的函数查找当前组件上层任何层次上的容器...
通过自定义的函数查找当前组件上层任何层次上的容器。 如果传递的函数返回true，容器对象将被返回。
参数:
  • fn : Function
    自定义的函数，使用如下参数调用(container,this component)。
返回值:
  • Ext.Container
    自定义函数返回true的第一个容器
Component
findParentByType ( String/Class xtype ) : Ext.Container
通过xtype或者class查找当前组件上层任何层次上的容器
通过xtype或者class查找当前组件上层任何层次上的容器
参数:
  • xtype : String/Class
    组件的xtype字符串，或者直接是组件的class
返回值:
  • Ext.Container
    符合指定xtype或者class的第一个容器
Component
fireEvent( String eventName, Object... args ) : Boolean
用传入的参数触发指定的事件 (减去事件名)。 一个事件可以被设置为冒泡 Obse...

用传入的参数触发指定的事件 (减去事件名)。

一个事件可以被设置为冒泡到Observable父类继承树(参看 Ext.Component.getBubbleTarget) 调用enableBubble实现。

参数:
  • eventName : String
    触发的事件名。
  • args : Object...
    传递给处理器的可变长度参数。
返回值:
  • Boolean
    如果有任何的处理器返回false则返回false，否则返回true。
Observable
focus ( [ Boolean selectText ], [ Boolean/Number delay ] ) : Ext.Component
尝试将当前组件设为焦点。
尝试将当前组件设为焦点。
参数:
  • selectText : Boolean
    (可选) 如果可用，同时选中组件内部的文本
  • delay : Boolean/Number
    (可选)将当前组件设置为焦点的延迟时间(设置为true等于0毫秒)
返回值:
  • Ext.Component
    this
Component
getBox ( [ Boolean local ] ) : Object
获取组件底层元素当前盒子模型的尺寸。（译者注：盒子模型是CSS术语，详细解释请自行搜索。）
获取组件底层元素当前盒子模型的尺寸。（译者注：盒子模型是CSS术语，详细解释请自行搜索。）
参数:
  • local : Boolean
    (可选)值为true时，组件的left值和top值将代替页面的XY被返回。(默认值为false)
返回值:
  • Object
    返回值的格式{x, y, width, height}
BoxComponent
getBubbleTarget () : Ext.Container
为Observable的fireEvent方法提供链接，它沿着继承结构进行冒泡操作。
为Observable的fireEvent方法提供链接，它沿着继承结构进行冒泡操作。
参数:
  • 无。
返回值:
  • Ext.Container
    拥有当前组件的容器。
Component
getEl () : Ext.Element
返回 Ext.Element ，它包装了当前组件。...

返回 Ext.Element ，它包装了当前组件。

通常情况下，这将是一个<DIV>元素，它是由该类的onRender方法创建的， 但是可以使用autoEl配置项 覆盖它。

注意: 此元素将会一直处于无效状态直到当前组件渲染完成。

如需向当前组件的 DOM事件(而不是当前组件自己的Observable事件)添加监听器， 更多建议，参见 listeners 配置项，或者直接使用一个render监听器:

new Ext.Panel({
    title: 'The Clickable Panel',
    listeners: {
        render: function(p) {
            // Append the Panel to the click handler's argument list.
            p.getEl().on('click', handlePanelClick.createDelegate(null, [p], true));
        },
        single: true  // Remove the listener after first invocation
    }
});
参数:
  • 无。
返回值:
  • Ext.Element
    包装当前组件的元素。
Component
getHeight () : Number
获取该组件的当前高度值。
获取该组件的当前高度值。
参数:
  • 无。
返回值:
  • Number
BoxComponent
getId () : String
返回当前组件的id，如果没有定义id，则自动生成并返回一个id:'ext-comp-'...
返回当前组件的 id 如果没有定义 id 则自动生成并返回一个 id

'ext-comp-' + (++Ext.Component.AUTO_ID)
参数:
  • 无。
返回值:
  • String
    id
Component
getItemId () : String
返回当前组件的 itemId 。 如果没有通过配置参数指定 itemId 那么，将会使用...
返回当前组件的 itemId 。 如果没有通过配置参数指定 itemId 那么，将会使用 getId 返回 id 。
参数:
  • 无。
返回值:
  • String
Component
getOuterSize () : Object
获取当前组件所在元素的尺寸大小，包括边缘的空白处。
获取当前组件所在元素的尺寸大小，包括边缘的空白处。
参数:
  • 无。
返回值:
  • Object
    一个包含元素大小的对象 {width: (element width + left/right margins), height: (element height + top/bottom margins)}
BoxComponent
getPosition ( [ Boolean local ] ) : Array
获取组件底层元素当前的XY位置。
获取组件底层元素当前的XY位置。
参数:
  • local : Boolean
    (可选)如果为true，将返回元素的left和top值，而不是相对于页面内的 XY。(默认值为 false)
返回值:
  • Array
    元素的XY位置值(例如：[100, 200])
BoxComponent
getResizeEl () : Ext.Element
返回该组件的最外层用来定义这些组件整体大小的Element...

返回该组件的最外层用来定义这些组件整体大小的Element对象。

通常用 getEl 方法将会返回相同的Element对象，但在有些情况下，组件可能有一些更多的封装了它的主要动态Element对象的Element对象。

例如ComboBox。它是封装在一个包含<input>元素的包装元素里(这将返回其 getEl方法和触发按钮的元素)。返回的元素为resizeEl。

参数:
  • 无。
返回值:
  • Ext.Element
    The Element which is to be resized by size managing layouts.
BoxComponent
getSize () : Object
获取组件底层元素当前的大小。
获取组件底层元素当前的大小。
参数:
  • 无。
返回值:
  • Object
    一个包含元素大小的对象{width: (element width), height: (element height)}
BoxComponent
getWidth () : Number
获取该组件的当前宽度值。
获取该组件的当前宽度值。
参数:
  • 无。
返回值:
  • Number
BoxComponent
getXType () : String
获取当前组件的xtype，它是用 Ext.ComponentMgr 注册的。 所有可用的xtype列表，参见...
获取当前组件的xtype，它是用 Ext.ComponentMgr 注册的。 所有可用的xtype列表，参见 Ext.Component 类头部。示例用法:

var t = new Ext.form.TextField();
alert(t.getXType());  // alerts 'textfield'
参数:
  • 无。
返回值:
  • String
    The xtype
Component
getXTypes () : String
返回此组件的xtype继承树，用字符'-'分隔。 所有可用的xtype值...

返回此组件的xtype继承树，用字符'-'分隔。 所有可用的xtype值，请参见Ext.Component 类的头部。

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

示例用法:

var t = new Ext.form.TextField();
alert(t.getXTypes());  // alerts 'component/box/field/textfield'
参数:
  • 无。
返回值:
  • String
    xtype层次字符串
Component
hasListener( String eventName ) : Boolean
检测对象是否包含指定事件的任何监听器
检测对象是否包含指定事件的任何监听器
参数:
  • eventName : String
    检测的事件名
返回值:
  • Boolean
    如果事件被监听则为true，否则为false
Observable
hide () : Ext.Component
隐藏当前组件。 监听 beforehide' 事件并且返回false 可以取消隐藏组件的操作。 在隐藏组件之后触发...
隐藏当前组件。 监听 beforehide' 事件并且返回false 可以取消隐藏组件的操作。 在隐藏组件之后触发 ' hide' 事件。 如果组件被配置成 hidden 那么此方法在内部被调用。
参数:
  • 无。
返回值:
  • Ext.Component
    this
Component
isVisible () : Boolean
如果当前组件可见，返回true。
如果当前组件可见，返回true。
参数:
  • 无。
返回值:
  • Boolean
    如果当前组件可见，返回true，其它返回false。
Component
isXType ( String xtype , [ Boolean shallow ] ) : Boolean
Tests whether or not this Component is of a specific xtype. This can test whether this Component is descended from th...

测试此组件是否是指定的xtype。此方法既可以测试是否是指定的xtype的某个子类， 或者它是否直接是指定的xtype类(shallow=true)。

如果使用你自己的子类，必须知道组件必须注册它的xtype值。

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

示例用法:

var t = new Ext.form.TextField();
var isText = t.isXType('textfield');        // true
var isBoxSubclass = t.isXType('box');       // true, descended from BoxComponent
var isBoxInstance = t.isXType('box', true); // false, not a direct BoxComponent instance
参数:
  • xtype : String
    需要为当前组件进行检测的xtype
  • shallow : Boolean
    (可选) 如果为false，检测组件是否是xtype继承树中的某个子类（默认是这种情况）， 如果为true，只检测组件是否是指定的xtype类型。
返回值:
  • Boolean
    如果当前组件是指定xtype的子类，返回true，其它返回flase。
Component
mon ( Observable|Element item , Object|String ename , Function fn , Object scope , Object opt ) : void
向任何Observable对象(或者元素)上添加监听器，监听器将会在组件...

向任何Observable对象(或者元素)上添加监听器，监听器将会在组件销毁时被自动删除。
用法：

myGridPanel.mon(myGridPanel.getSelectionModel(), 'selectionchange', handleSelectionChange, null, {buffer: 50});

or:

myGridPanel.mon(myGridPanel.getSelectionModel(), {
    selectionchange: handleSelectionChange,
    buffer: 50
});
参数:
  • item : Observable|Element
    需要添加listener/listeners的项目。
  • ename : Object|String
    事件名，或者一个包含事件名属性的对象。
  • fn : Function
    (可选) 如果 ename 参数是一个事件名，此参数为处理函数。
  • scope : Object
    (可选)如果 ename 参数是一个事件名称，此参数是作用域 ( this 引用)，监听函数将会在此作用域中被执行。
  • opt : Object
    (可选)如果 ename 参数是一个事件名称， 此参数是 addListener 配置项。
返回值:
  • void
Component
mun ( Observable|Element item , Object|String ename , Function fn , Object scope ) : void
删除通过mon 方法添加的监听器。
删除通过mon 方法添加的监听器。
参数:
  • item : Observable|Element
    需要删除listener/listeners的项目。
  • ename : Object|String
    事件名称，或者一个包含事件名称属性的对象。
  • fn : Function
    (可选)如果 ename 参数是一个事件名称，此参数是一个处理函数。
  • scope : Object
    (可选)如果 ename 参数是一个事件名称，此参数是作用域 ( this 引用)，监听函数将会在此作用域中被执行。
返回值:
  • void
Component
nextSibling () : Ext.Component
返回所属容器中的下一个组件
返回所属容器中的下一个组件
参数:
  • 无。
返回值:
  • Ext.Component
Component
on( String eventName, Function handler, [Object scope], [Object options] ) : void
给对象添加事件处理器 (addListener的简写形式)
给对象添加事件处理器 (addListener的简写形式。)
参数:
  • eventName : String
    监听的事件类型
  • handler : Function
    事件调用的方法
  • scope : Object
    （可选）处理方法执行时的作用域 (this 的引用)。 如果被忽略。默认为触发事件的对象。
  • options : Object
    可选 包含处理器配置的对象。
返回值:
  • void
Observable
previousSibling () : Ext.Component
返回所属容器中的前一个组件
返回所属容器中的前一个组件
参数:
  • 无。
返回值:
  • Ext.Component
Component
purgeListeners() : void
移除对象上所有的监听器
移除对象上所有的监听器
参数:
  • 无。
返回值:
  • void
Observable
relayEvents( Object o, Array events ) : void
从指定的Observable上传递选择的事件就好像被当前对象触发一样。
从指定的Observable上传递选择的事件就好像被当前对象触发一样。
参数:
  • o : Object
    该Observable上的事件被当前对象传递。
  • events : Array
    传递的数组名。
返回值:
  • void
Observable
removeClass ( string cls ) : Ext.Component
从组件底层的元素上删除一个CSS类。
从组件底层的元素上删除一个CSS类。
参数:
  • cls : string
    需要移除的CSS类名
返回值:
  • Ext.Component
    this
Component
removeListener( String eventName, Function handler, [Object scope] ) : void
删除一个事件处理器。
删除一个事件处理器。
参数:
  • eventName : String
    处理器关联的事件类型。
  • handler : Function
    移除的处理器。 这应该是传递到addListener里的方法的引用。
  • scope : Object
    （可选）处理器指定的初始作用域。
返回值:
  • void
Observable
render ( [ Element/HTMLElement/String container ], [ String/Number position ] ) : void
在传递进来的HTML元素中渲染当前组件。...

在传递进来的HTML元素中渲染当前组件。

如果你正在使用一个Container 对象放置当前组件，那么请不要使用render方法。

当容器第一次被渲染时，它的子组件将会被容器的 layout 管理器渲染。

某些布局管理器允许动态添加子组件。它们包括 Ext.layout.CardLayout, Ext.layout.AnchorLayout, Ext.layout.FormLayout, Ext.layout.TableLayout。

当一个新的子组件被添加时，如果容器已经被渲染了， 你可能需要调用容器的 doLayout 方法来刷新视图，它将导致所有没有被渲染的子组件进行渲染操作。 此操作是必须的，这样你可以添加多个子组件而只刷新一次layout。

当创建复杂的UI时，非常重要的一点是，请记住调整子项目的尺寸和位置是容器的 layout 管理器的职责。 如果你希望子项目的尺寸对用户交互作出反应， 你必须为容器配置一个布局管理器，它将创建和管理你心里想要的那种布局。

忽略容器的layout 配置意味着将会使用一个基本的布局管理器，它除了按次序把子组件 渲染到容器中之外什么事情都不做。 这种情况下，任何尺寸和位置的调整操作都不会发生。

参数:
  • container : Element/HTMLElement/String
    (可选) 需要在其中渲染当前组件的元素。 如果它是从一个已存在的标签中创建的，此参数应该被忽略。
  • position : String/Number
    (可选) 容器中的一个元素ID或者一个DOM节点索引， 当前组件将会被插入到它前面 (默认append到容器的尾部)
返回值:
  • void
Component
resumeEvents() : void
重新开始触发事件。(参见suspendEvents) 如果事件以queueSuspended参数被挂起，则在事件被挂起时 ...
重新开始触发事件。(参见 suspendEvents) 如果事件以queueSuspended 参数被挂起，则在事件被挂起时触发的事件会被传递到所有的监听器上
参数:
  • 无。
返回值:
  • void
Observable
setAutoScroll ( Boolean scroll ) : Ext.BoxComponent
设置该组件内容溢出时是否自动显示滚动条。
设置该组件内容溢出时是否自动显示滚动条。
参数:
  • scroll : Boolean
    值为true的话组件自动显示滚动条。
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setDisabled ( Boolean disabled ) : Ext.Component
工具函数，使用布尔值设置有效/无效(disabled/enabled )。
工具函数，使用布尔值设置有效/无效(disabled/enabled )。
参数:
  • disabled : Boolean
返回值:
  • Ext.Component
    this
Component
setHeight ( Mixed height ) : Ext.BoxComponent
设置此组件的高度。该方法将触发resize事件。
设置此组件的高度。该方法将触发resize事件。
参数:
  • height : Mixed
    The new height to set.
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setPagePosition ( Number x , Number y ) : Ext.BoxComponent
设置组件在页面中的XY位置。 如果需要设置left和top值 ，请使用...
设置组件在页面中的XY位置。 如果需要设置left和top值 ，请使用setPosition方法。 该方法触发move事件。
参数:
  • x : Number
    The new x position
  • y : Number
    The new y position
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setPosition ( Number left , Number top ) : Ext.BoxComponent
设置组件的left和top值。设置组件的页面XY值，请使用setPagePosition方法。该方法触发...
设置组件的left和top值。设置组件的页面XY值，请使用setPagePosition方法。该方法触发move事件。
参数:
  • left : Number
    The new left
  • top : Number
    The new top
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setSeriesStyles ( styles {Array} ) : void
为图表中所有序列设置样式。
为图表中所有序列设置样式。
参数:
  • {Array} : styles
    为列表中所有序列样式进行初始化。
返回值:
  • void
Chart
setSize ( Mixed width , Mixed height ) : Ext.BoxComponent
设置BoxComponent的宽度和高度。 此方法触发resize事件...
设置BoxComponent的宽度和高度。 此方法触发resize事件。此方法可以接收单独的width或者height值作为参数， 或者你可以传递像这样的一个size对象： {width:10, height:20} 。
参数:
  • width : Mixed
    设置的新的width值。这可以是：
    • 一个Number类型指定Element新的宽度 Ext.Element.defaultUnit(默认为像素 :'px')。
    • 一个String类型用于设置width的CSS样式。
    • 一个size对象格式为 {width: widthValue, height: heightValue} 。
    • 值为 undefined 时，保留原来的width不变。
  • height : Mixed
    设置的新的height值(如果第一个参数传递了一个size对象，此参数没有必要传递)。这可以是：
    • 一个Number类型指定Element新的高度 Ext.Element.defaultUnit(默认为像素 :'px')。
    • 一个String类型用于设置height的CSS样式。也有可能不会被使用到。
    • 值为 undefined 时，保留原来的height不变。
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setStyle ( name {String} , value {Object} ) : void
为图表实例设置单一样式值。
为图表实例设置单一样式值。
参数:
  • {String} : name
    将要改变的图表样式名称。
  • {Object} : value
    图表样式的新值。
返回值:
  • void
Chart
setStyles ( styles {Object} ) : void
重置图表实例上的所有样式。
Resets all styles on the Chart instance.
参数:
  • {Object} : styles
    Initializer for all Chart styles.
返回值:
  • void
Chart
setVisible ( Boolean visible ) : Ext.Component
工具方法，通过使用布尔值隐藏或者显示当前组件。
工具方法，通过使用布尔值隐藏或者显示当前组件。
参数:
  • visible : Boolean
    true时显示，false时隐藏
返回值:
  • Ext.Component
    this
Component
setWidth ( Mixed width ) : Ext.BoxComponent
设置组件的宽度。 此方法触发resize事件。
设置组件的宽度。 此方法触发resize事件。
参数:
  • width : Mixed
    The new width to set.
返回值:
  • Ext.BoxComponent
    this
BoxComponent
show () : Ext.Component
显示当前组件。监听' beforeshow' 事件，返回 false 取消显示组件...
显示当前组件。监听' beforeshow' 事件，返回 false 取消显示组件。在显示组件之后触发' show' 事件。
参数:
  • 无。
返回值:
  • Ext.Component
    this
Component
suspendEvents( Boolean queueSuspended ) : void
暂停触发所有的事件。 (参看resumeEvents)
暂停触发所有的事件。（参看 resumeEvents)
参数:
  • queueSuspended : Boolean
    如果传递为true则排列好暂停的事件使得在调用 resumeEvents 后再触发它们，而不是抛弃所有暂停的事件。
返回值:
  • void
Observable
syncSize () : Ext.BoxComponent
强制组件的大小按照此组件底层元素当前的高度和宽度计算。
强制组件的大小按照此组件底层元素当前的高度和宽度计算。
参数:
  • 无。
返回值:
  • Ext.BoxComponent
    this
BoxComponent
un( String eventName, Function handler, [Object scope] ) : void
删除一个事件处理器(removeListener方法的简写形式)
删除一个事件处理器(removeListener方法的简写形式。)
参数:
  • eventName : String
    处理器关联的事件类型
  • handler : Function
    被删除的处理器 这应该是传入 addListener 中的方法的引用。
  • scope : Object
    （可选）为处理器指定的初始作用域。
返回值:
  • void
Observable
update ( Mixed htmlOrData , [ Boolean loadScripts ], [ Function callback ] ) : void
刷新组件的内部区域。
刷新组件的内部区域。
参数:
  • htmlOrData : Mixed
    如果已经通过tpl为当前组件配置了一个模板，那么 将会使用此参数来装配模板。 如果没有为当前组件配置模板，组件的内容区域将会通过Ext.Element 进行刷新。
  • loadScripts : Boolean
    (可选)只用在使用html配置时此参数才合法。默认为false。
  • callback : Function
    (可选)只用在使用html配置时此参数才合法。 当脚本加载完成时回调函数才被执行。
返回值:
  • void
Component
updateBox ( Object box ) : Ext.BoxComponent
设置此组件底层元素的盒子模型尺寸。(译者注：盒子模型是CSS术语，详细资料请自行搜索。)
设置此组件底层元素的盒子模型尺寸。(译者注：盒子模型是CSS术语，详细资料请自行搜索。)
参数:
  • box : Object
    一个格式为{x, y, width, height}的对象
返回值:
  • Ext.BoxComponent
    this
BoxComponent

公共事件

Event Defined By
added : ( Ext.Component this , Ext.Container ownerCt , number index )
当一个组件被添加到一个Ext.Container时触发
当一个组件被添加到一个Ext.Container时触发
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • ownerCt : Ext.Container
    用于组件的容器
  • index : number
    添加组件的位置
Component
afterrender : ( Ext.Component this )
在组件渲染完成之后触发...

在组件渲染完成之后触发。

afterrender事件在当前组件被rendered 结束之后、在为组件定义的所有afterRender方法执行之后 触发，并且，如果有stateful， 也在状态被保存之后才触发。

监听器将会以如下参数格式被调用:
  • this : Ext.Component
Component
beforedestroy : ( Ext.Component this )
在组件 destroyed 之前触发。 在事件监听器中返回false以停止 destroy 操作。
在组件 destroyed 之前触发。 在事件监听器中返回false以停止 destroy 操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforehide : ( Ext.Component this )
在调用hide方法隐藏组件之前触发。 在事件监听器中返回false可以停止隐藏操作。
在调用hide方法隐藏组件之前触发。 在事件监听器中返回false可以停止隐藏操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforerefresh : ( Chart this )
在图表数据刷新前触发。如果beforerefresh处理函数返回false则refresh动作...
在图表数据刷新前触发。如果beforerefresh处理函数返回false则 refresh 动作将被取消。
监听函数被调用时将传递如下参数：
  • this : Chart
Chart
beforerender : ( Ext.Component this )
在组件被rendered 之前触发。 在事件监听器中返回false可以停止render 操作。
在组件被rendered 之前触发。 在事件监听器中返回false可以停止render 操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforeshow : ( Ext.Component this )
在调用show()方法现实组件之前触发。 事件处理函数返回false可以停止show。
在调用show 方法现实组件之前触发。 事件处理函数返回false可以停止show。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforestaterestore : ( Ext.Component this , Object state )
在组件状态恢复之前触发。返回false停止恢复状态操作。
在组件状态恢复之前触发。返回false停止恢复状态操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    StateProvider返回的状态哈希值。 如果没有禁止此事件，那么状态对象会被传递给applyState。 默认情况下，这样简单地把属性值拷贝到当前组件中。 可以覆盖此方法以提供自定的状态恢复操作。
Component
beforestatesave : ( Ext.Component this , Object state )
在组件状态被保存到配置的状态提供者之前触发。 返回false可以停止保存。
在组件状态被保存到配置的状态提供者之前触发。 返回false可以停止保存。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    状态值哈希。 这由在组件上调用getState() 方法决定。 此方法必须由开发者提供，返回是否需要对状态进行描述，默认情况下， Ext.Component有一个空实现。
Component
destroy : ( Ext.Component this )
在组件被销毁之后触发。
在组件被destroyed之后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
disable : ( Ext.Component this )
在组件被设置为无效状态后触发。
在组件被设置为无效状态后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
enable : ( Ext.Component this )
当组件被设置为有效(enabled)之后触发。
当组件被设置为有效(enabled)之后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
hide : ( Ext.Component this )
在组件被隐藏之后触发。 当调用hide 方法隐藏组件之后触发。
在组件被隐藏之后触发。 当调用hide 方法隐藏组件之后触发。
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
initialize : ( Chart this )
监听器将会以如下参数格式被调用:
  • this : Chart
FlashComponent
move : ( Ext.Component this , Number x , Number y )
在组件移动之后触发。
在组件移动之后触发。
监听器将会用如下的参数格式来调用:
  • this : Ext.Component
  • x : Number
    The new x position
  • y : Number
    The new y position
BoxComponent
refresh : ( Chart this )
图表数据刷新后触发。
图表数据刷新后触发。
监听函数被调用时将传递如下参数：
  • this : Chart
Chart
removed : ( Ext.Component this , Ext.Container ownerCt )
当一个组件被从Ext.Container容器中删除时触发
当一个组件被从Ext.Container容器中删除时触发
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • ownerCt : Ext.Container
    持有组件的容器
Component
render : ( Ext.Component this )
在组件被渲染之后触发。
在组件被 rendered(渲染) 之后触发。
监听器将以如下的参数格式被调用:
  • this : Ext.Component
Component
resize : ( Ext.Component this , Number adjWidth , Number adjHeight , Number rawWidth , Number rawHeight )
在组件被调整大小之后触发。
在组件被调整大小之后触发。
监听器将以如下的参数格式被调用:
  • this : Ext.Component
  • adjWidth : Number
    这是width调整后的值
  • adjHeight : Number
    这是height调整后的值
  • rawWidth : Number
    这是width原来的值
  • rawHeight : Number
    这是height原来的值
BoxComponent
show : ( Ext.Component this )
在调用show 方法显示组件之后触发。
在调用show 方法显示组件之后触发。
监听器将会用如下的参数格式被调用:
  • this : Ext.Component
Component
staterestore : ( Ext.Component this , Object state )
组件状态被存储之后触发。
组件状态被存储之后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    StateProvider返回的状态哈希值。 如果没有禁止此事件，那么状态对象会被传递给applyState。 默认情况下，这样简单地把属性值拷贝到当前组件中。 可以覆盖此方法以提供自定的状态恢复操作。
Component
statesave : ( Ext.Component this , Object state )
在组件状态被保存到所配置的状态提供者之后触发。
在组件状态被保存到所配置的状态提供者之后触发。
监听器将会用如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    状态值hash。 这是由在足见上调用getState() 方法决定的。 开发者必须提供此方法以返回是否需要恢复状态，默认情况下， Ext.Component有一个空实现。
Component


Series
    CartesianSeries
      ColumnSeries

Class Ext.chart.ColumnSeries

包: | Ext.chart
定义类的文件: | Chart.js
类: | ColumnSeries
继承自: | CartesianSeries
图标控件中的ColumnSeries（列状序列）类。

公共属性

Property |  | Defined By
 | axis : String 指明该序列绑定的坐标。 | CartesianSeries
 | displayName : String 序列名。 | Series
 | showInLegend : Boolean 如果为false，将在图例说明里不显示该序列。 默认为true. | CartesianSeries
 | type : String 序列类型。 | Series
 | xField : String 用来访问数据源项目中x轴数值的字段。 | CartesianSeries
 | yField : String 数据源的各项中横坐标（x轴）对应的字段名。 | CartesianSeries

公共方法

该类没有公共方法。

公共事件

该类没有公共事件。


Observable
    Component
      BoxComponent
        FlashComponent
          Chart
            CartesianChart
              LineChart

Class Ext.chart.LineChart

包: | Ext.chart
定义类的文件: | Chart.js
类: | LineChart
继承自: | CartesianChart

配置项

Config Options Defined By
allowDomMove : Boolean
在渲染时组件是否可以移动Dom节点(默认为true)。
Component
anchor : String
注: 这个配置只用于该组件被包含在一个已使用AnchorLayout...

注: 这个配置只用于该组件被包含在一个已使用 AnchorLayout (或者其子类)配置的Container时。 基于布局管理器，例如：

  • Ext.form.FormPanel
  • 指定 layout: 'anchor' // or 'form', or 'absolute'

参见 Ext.layout.AnchorLayout. anchor 。

BoxComponent
applyTo : Mixed
指定一个元素的id、一个DOM元素或者一个已经存在并被渲染到DIV中的元素，此DIV已经被...

指定一个元素的id、一个DOM元素或者一个已经存在并被渲染到DIV中的元素，此DIV已经被 渲染到document中，并且为当前组件指定了一些结构化的标签。

  • 描述 :
      当使用了 applyTo， 在主元素中也可以用id或者CSS类名来指定组件的托管部分， 并且，如果可以的话，创建的组件可能也会试图在那个标签中创建它的子组件。
  • 注意 :
      当使用此配置项时，无需调用render()方法。
      如果指定了applyTo属性，任何传递给 renderTo 的值都会被忽略，并且目标元素的父节点将会自动被用作组件的容器。
Component
autoEl : Mixed
一个表签名或者一个 DomHelper 描述，用来创建 Element ，它将封装当前组件...

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

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

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

{
    xtype: 'box',
    autoEl: {
        tag: 'img',
        src: 'http://www.example.com/example.jpg'

    }
}, {
    xtype: 'box',
    autoEl: {
        tag: 'blockquote',
        html: 'autoEl is cool!'
    }
}, {
    xtype: 'container',
    autoEl: 'ul',
    cls: 'ux-unordered-list',
    items: {
        xtype: 'box',
        autoEl: 'li',
        html: 'First list item'
    }
}
Component
autoHeight : Boolean
如果值为true，height配置项为'auto'，否则值为false的话使用固定的高度...

如果值为true，height配置项为'auto'，否则值为false的话使用固定的高度， 或者可以由其父类容器 layout manager来控制。(默认值为 false)。

注: 虽然很多组件继承了这个配置选项，但不是所有这些组件的自适应高度配置都会像期望的那样起作用。 设置autoHeight：值为true时，浏览器将根据元素的内容自动设置高度，这将意味着Ext不会去管理高度。

如果是由浏览器来管理高度，需要注意的是，通过浏览器进行调整的结构组件内不能被发现， 因此宽度的变化可能导致需要进行同步处理元素的高度。 例如：

var w = new Ext.Window({
    title: 'Window',
    width: 600,
    autoHeight: true,
    items: {
        title: 'Collapse Me',
        height: 400,
        collapsible: true,
        border: false,
        listeners: {
            beforecollapse: function() {
                w.el.shadow.hide();
            },
            beforeexpand: function() {
                w.el.shadow.hide();
            },
            collapse: function() {
                w.syncShadow();
            },
            expand: function() {
                w.syncShadow();
            }
        }
    }
}).show();
BoxComponent
autoScroll : Boolean
如果值为true，将会在该元素上使用overflow:'auto'配置，并且在必要的时候...
如果值为true，将会在该元素上使用overflow:'auto'配置，并且在必要的时候自动显示滚动条，否则，溢出部分的组件都会被切除(默认值为 false)。
BoxComponent
autoShow : Boolean
如果组件需要检测隐藏CSS属性(如 'x-hidden' 或者 'x-hide-display')并且在渲染时删除...
如果组件需要检测隐藏CSS属性(如 'x-hidden' 或者 'x-hide-display')并且在渲染时删除它们 (默认为false)，设置此值为true。
Component
autoWidth : Boolean
如果为true，使用width:'auto'配置，否则使用固定的宽度...

如果为true，使用width:'auto'配置，否则使用固定的宽度，或者可以由其父类容器的layout manager来控制。(默认值为 false)。

注: 虽然很多组件继承了这个配置选项，但不是所有这些组件的自适应宽度配置都会像期望的那样起作用。 设置autoWidth：值为true时，浏览器将根据元素的内容自动设置宽度，这将意味着Ext不会去管理宽度。

如果是由浏览器来管理宽度，需要注意的是，通过浏览器进行调整的结构组件内不能被发现，因此宽度的变化可能导致需要进行同步处理元素的宽度。 例如，在这个元素的目标是：

<div id='grid-container' style='margin-left:25%;width:50%'></div>
当浏览器窗口改变时，渲染后的Panel必须监听浏览器窗口大小的变化，以便通知子项，浏览器改变了其宽度：

var myPanel = new Ext.Panel({
    renderTo: 'grid-container',
    monitorResize: true, // relay on browser resize
    title: 'Panel',
    height: 400,
    autoWidth: true,
    layout: 'hbox',
    layoutConfig: {
        align: 'stretch'
    },
    defaults: {
        flex: 1
    },
    items: [{
        title: 'Box 1',
    }, {
        title: 'Box 2'
    }, {
        title: 'Box 3'
    }],
});
BoxComponent
backgroundColor : String
chart的背景颜色。默认为 '#ffffff'。
FlashComponent
boxMaxHeight : Number
设置组件的最大高度值...

设置组件的最大高度值。

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

BoxComponent
boxMaxWidth : Number
设置组件的最大宽度值...

设置组件的最大宽度值。

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

BoxComponent
boxMinHeight : Number
设置组件的最小高度值...

设置组件的最小高度值。

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

BoxComponent
boxMinWidth : Number
设置组件的最小宽度值...

设置组件的最小宽度值。

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

BoxComponent
bubbleEvents : Array
一个事件数组，当这些事件被触发时，将会被冒泡到所有父容器中。参见....

一个事件数组，当这些事件被触发时，将会被冒泡到所有父容器中。参见 Ext.util.Observable.enableBubble。 默认为 []。

Component
chartStyle : Object
设置图表样式。由于本身包含默认样式，所以修改这个属性将会覆盖内置...
设置图表样式。由于本身包含默认样式，所以修改这个属性将会覆盖内置样式。 使用 extraStyle 来为默认样式附加自定义样式。
Chart
clearCls : String
应用到特殊的clearing div的CSS类， 这个clearing div直接渲染到每个form field的包装器后面...

应用到特殊的clearing div的CSS类， 这个clearing div直接渲染到每个form field的包装器后面，以提供 清除field的功能(默认为 'x-form-clear-left')。

注意: 只有在当前组件被渲染到一个使用FormLayout 布局(例如 Ext.form.FormPanel 或者指定 layout:'form')的 容器中、或者是指定了一个fieldLabel 、或者指定isFormField=true 时此配置才有效。

另请参见 Ext.layout.FormLayout. fieldTpl。

Component
cls : String
一个可选的额外CSS类，它将被添加到当前组件的元素上(默认为'')...
一个可选的额外CSS类，它将被添加到当前组件的元素上(默认为'')。 此属性对于在组件上，或者它的任何使用标准CSS规则的孩子节点上， 添加定制的样式非常有用。
Component
contentEl : String
(可选)指定一个已存在的HTML元素，或者一个已存在HTML元素的...

(可选)指定一个已存在的HTML元素，或者一个已存在HTML元素的 id ，它们将被用作当前组件的内容。

  • 描述 :
    此配置选项被用来将一个已存在的HTML元素 插入到一个新组件(在组件渲染之后它简单地移动DOM元素) 的layout元素中，使它成为该组件的内容。
  • 注意 :
    指定的HTML元素将被append到组件的layout元素中， 在所有配置的 HTML 被插入之后， 并且，这样的话，在render事件 被触发时，document中将不再包含此元素。
    指定的HTML元素将不会参与组件所有可能使用的 layout 过程(译者注：指这些HTML元素 不会参与布局操作)。 它仅是HTML而已。布局操作实在孩子 items 上进行的。
    添加 x-hidden 或者 x-hide-display CSS类，以防在内容渲染到panel时发生闪烁。
Component
ctCls : String
一个可选的外部CSS样式，添加到这个组件的容器(默认值为 '')。 这个方法对于使用标准的CSS规则...

一个可选的外部CSS样式，添加到这个组件的容器(默认值为 '')。 这个方法对于使用标准的CSS规则，为组件或它的任何一个子组件添加特定的样式非常有用。 参见 Ext.layout.ContainerLayout和 extraCls 。

注意: ctCls 默认为 ''期望如下的类，它们将指定一个默认值:

  • Box Layout : 'x-box-layout-ct'
使用一个额外的CSS类配置以上的Class，它是append到默认对象上的。例如， 对于BoxLayout (Hbox and Vbox):
                                ctCls: 'x-box-layout-ct custom-class'

Component
data : Mixed
初始化数据集，它将被应用到 tpl 上以刷新组件的内容区域。
Component
disableCaching : Boolean
如果为true，则在图表url末端附加禁止缓存的字符参数，在Opera和IE下默认为true。
Chart
disabled : Boolean
当前组件处于无效状态时为true。 Read-only.
Component
disabledClass : String
当组件处于无效状态时添加到组件上的CSS类(默认为 'x-item-disabled')。
Component
expressInstall : Boolean
如果没有安装flash，设置为true将会提示用户进行安装。 注意，此参数会使用Ext.FlashComponent.EXPRESS_INSTALL_URL...
如果没有安装flash，设置为true将会提示用户进行安装。 注意，此参数会使用Ext.FlashComponent.EXPRESS_INSTALL_URL 此值应该设置为一个本地资源，默认为 false。
FlashComponent
extraStyle : Object
包含可能覆盖或者追加到默认样式的额外样式。默认为null，想要查看详细列表，请...
包含可能覆盖或者追加到默认样式的额外样式。默认为null，想要查看详细列表，请访问YUI图表站点 http://developer.yahoo.com/yui/charts/#basicstyles
如下列出一些常用样式:
  • padding - 图表内容边缘的空间，padding属性不会增加图表大小。
  • animationEnabled - 布尔值，用来指定标记动画是否启用，默认启用。
  • font - 用来定义图表字体样式的对象。默认为 { name: 'Tahoma', color: 0x444444, size: 11 }
    • name - 字体名称
    • color - 字体颜色 (十六进制编码, 如: "#ff0000", "ff0000" 或 0xff0000)
    • size - 以point（点）为单位的字体大小 (只能为整数, 如: 11)
    • bold - boolean
    • italic - boolean
    • underline - boolean
  • border - 定义图表边框的样式。图表会缩小尺寸以适应边框宽度。
    • color - 边框颜色 (十六进制编码, 如: "#ff0000", "ff0000" 或 0xff0000)
    • size - 以像素为单位的边框宽度 (只能为整数, 如: 1)
  • background - 定义图表背景样式的对象。
    • color - 边框颜色 (十六进制编码， 如: "#ff0000", "ff0000" 或 0xff0000)
    • image - 图片的URL，路径可以相对于当前页面，也可为绝对路径。
  • legend - 定义图例说明样式的对象
    • display - 图例说明的位置。 可选值为 "none", "left", "right", "top", 和 "bottom".
    • spacing - 图片的URL，路径可以相对于当前页面，也可为绝对路径。
    • padding, border, background, font - 见上面同名项。
  • dataTip - 定义数据提示样式的对象。 (tooltip).
    • padding, border, background, font - 见上面同名项。
  • xAxis 和 yAxis - 定义横纵坐标（x/y轴）样式的对象。
    • color - 见上面同名项。
    • size - 见上面同名项。
    • showLabels - boolean
    • labelRotation - 可选值范围从-90°到90°，默认为0。
  • majorGridLines 和 minorGridLines - 定义网格线条样式的对象。
    • color, size - 见上面同名项。
  • zeroGridLine - 定义零网格线样式的对象。
    • color, size - 见上面同名项。
  • majorTicks 和 minorTicks - 定义图表中刻度样式的对象。
    • color, size - 见上面同名项。
    • length - 从坐标轴上延伸的刻度的长度。
    • display - 刻度的显示方式，可选值为 "none", "inside", "outside", 和 "cross".
Chart
fieldLabel : String
紧靠此field显示的标签文本(默认值为 '')。注意...

紧靠此field显示的标签文本(默认值为 '')。

注意:只有在当前组件被渲染到一个使用FormLayout 的容器中时，此配置才有效。 (例如 Ext.form.FormPanel 或 指定 layout:'form')。

另请参见 hideLabel 、 Ext.layout.FormLayout和 fieldTpl。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Name'
    }]
});
Component
flashParams : Object
作为参数传递给flash对象的键值对集合。可能的参数可以在这里找到: http://kb2.adobe.com/cps/127/tn_12701.html默认为...
作为参数传递给flash对象的键值对集合。可能的参数可以在这里找到: http://kb2.adobe.com/cps/127/tn_12701.html默认为 undefined。
FlashComponent
flashVars : Object
作为flash变量传递给flash对象的键值对集合。 默认为 undefined。
FlashComponent
flashVersion : String
显示flash内容所需的flash版本。默认为 '9.0.115'。
FlashComponent
flex : Number
注: 这个配置只用于该组件被包含在一个已使用BoxLayout配置的Container中时...

注: 这个配置只用于该组件被包含在一个已使用BoxLayout配置的Container中时。通过计算每一个子组件的flex值所占全部flex值之和的比例，来决定子组件的宽(HBoxLayout)高(VBoxlayout)。 任何子项的 flex = 0 或 flex = undefined 将不被设置(初始值大小将不被改变)。

BoxComponent
height : Number
组件的高度(默认值为 auto)。注:如果想使用百分比的方式...
组件的高度(默认值为 auto)。注:如果想使用百分比的方式来设置值，请查看 Ext.Component.anchor。
BoxComponent
hidden : Boolean
如果当前组件处于隐藏状态，此值为true。Read-only。
Component
hideLabel : Boolean
true时完全隐藏label元素 ( label 和 separator)。 默认为 false。 默认情况下，即使你不指定...

true时完全隐藏label元素 ( label 和 separator)。 默认为 false。 默认情况下，即使你不指定 fieldLabel 它的空间仍然会被保留，这样这块区域会与其它确实拥有label的区域位于同一排。 讲此值设置为 true 将导致此区域不再保留此空间。

注意: 参见 clearCls 的注释。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield'
        hideLabel: true
    }]
});
Component
hideMode : String
组件如何隐藏，支持的值有： 'visibility' (css visibility), 'offsets' (位置偏移量为负值) 和...

组件如何隐藏，支持的值有： 'visibility' (css visibility), 'offsets' (位置偏移量为负值) 和 'display' (css display).

注意:一般首选默认值 'display'，因为当组件第一次显示的时候它们会自动进行布局 (隐藏的时候不会调整尺寸)。

Component
hideParent : Boolean
此值为true时，当调用hide/show方法时，将会hide和show组件的容器...
此值为true时，当调用hide/show方法时，将会hide和show组件的容器；false时将会 hide和show组件自身(默认为false)。例如，这可以用作window上隐藏按钮的一种 快捷操作，通过设置此按钮的hideParent:true，然后把它添加到window上。
Component
html : String/Object
一个HTML片段，或者一个 DomHelper 描述，用作layout元素的内容(默认为'')。...
一个HTML片段，或者一个 DomHelper 描述，用作layout元素的内容(默认为'')。 这个HTML内容在组件渲染之后才被添加，所以在 render 出发的时候，document中尚未包含此HTML。 但是这个内容将会在所有配置的 contentEl 之前被插入到body标签中。
Component
id : String
当前组件唯一的id(默认为auto-assigned id)...

当前组件唯一的id(默认为auto-assigned id)。 如果你需要在以后访问组件，而又没有一个有效的组件对象引用，那么你需要指定一个 id( 也就是，使用Ext. getCmp方法 )。

注意，此id也将被用作组件底层HTML标签的id，这些标签被渲染到页面中。 这将允许你编写基于id的CSS规则，以独立地描述指定的实例；并且，也可以通过 组件父标签的id选中子元素。

注意:为了避免与唯一的id 产生重复， 请参见 itemId 和 ref 。

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

Component
itemCls : String
注意: 只有在当前组件被渲染到一个使用FormLayout 布局的 容器中时此配置才有效...

注意: 只有在当前组件被渲染到一个使用FormLayout 布局的 容器中时此配置才有效。 (例如Ext.form.FormPanel 或者指定 layout:'form')。

一个附加的CSS类，应用到div上，包装当前field的表单元素。 如果提供了此参数， field级上的itemCls将会覆盖 container级上提供的 默认itemCls。 为itemCls指定的值将会被添加默认的 类('x-form-item')。

既然它被应用到项目的包装器上(参见 Ext.layout.FormLayout。 fieldTpl)， 它将允许你编写能应用到此field、label(如果有指定)、或者field内部任何其它元素的标准CSS规则。

注意: 参考 fieldLabel的注释。 .

示例用法:

// Apply a style to the field's label:
<style>
    .required .x-form-item-label {font-weight:bold;color:red;}
</style>

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Name',
        itemCls: 'required' //this label will be styled
    },{
        xtype: 'textfield',
        fieldLabel: 'Favorite Color'
    }]
});
Component
itemId : String
当没有可利用的对象引用时，itemId可以作为第二选择，用来获得一个组件的引用， 代替 ...

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

var c = new Ext.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'); // 与 Ext.getCmp()不同

p2 = p1.ownerCt.getComponent('p2'); // 通过兄弟对象获得引用

另请参见 id 和 ref 。

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

Component
labelSeparator : String
每个fieldLabel 文本后面现实的分隔符。 此属性可以在多个层次上进行配置...

每个fieldLabel 文本后面现实的分隔符。 此属性可以在多个层次上进行配置。优先顺序为：

  • field / component level
  • container level
  • layout level (默认为冒号 ':')
如不需要为当前field的label显示分隔符，指定一个空字符串''即可。

注意:参见 clearCls 的注释。

另请参见 hideLabel 和 Ext.layout.FormLayout。 fieldTpl。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    layoutConfig: {
        labelSeparator: '~'   // layout config has lowest priority (defaults to ':')
    },
    labelSeparator: '>>',     // config at container level
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Field 1',
        labelSeparator: '...' // field/component level config supersedes others
    },{
        xtype: 'textfield',
        fieldLabel: 'Field 2' // labelSeparator will be '='

    }]
});
Component
labelStyle : String
一个CSS样式描述字符串，它将直接应用到当前field的label上...

一个CSS样式描述字符串，它将直接应用到当前field的label上。 如果有设置，默认为容器的labelStyle值(例如 Ext.layout.FormLayout.labelStyle , 或者 '')。

注意:参见 clearCls 的注释。

另请参见 hideLabel 和 Ext.layout.FormLayout. fieldTpl。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Name',
        labelStyle: 'font-weight:bold;'
    }]
});
Component
listeners : Object
一个包含一个或多个事件处理器的配置对象，会在初始化的时候被添加到目标对象上...

一个包含一个或多个事件处理器的配置对象，会在初始化的时候被添加到目标对象上。 该配置对象应该是一个有效的监听器配置对象就像 addListener例子中指定的一样可一次附加多个处理器。

ExtJs Components上的DOM事件

一些 ExtJs Component 类导出时会选择一些DOM事件(例如 "click", "mouseover" 等等), 这通常只是在有额外的值可以被添加时发生。例如DataView类的 click事件会传递被点击的节点。也可以直接在Component的HTMLElementevent上访问DOM事件，但必需在Component被渲染后监听器才能添加到Element 上。可以按照以下步骤添加插件:

// 插件会用一个监听器配置对象进行配置。
//该组件会被添加到所有处理方法的参数列表上。
Ext.DomObserver = Ext.extend(Object, {
    constructor: function(config) {
        this.listeners = config.listeners ? config.listeners : config;
    },

    // 组件将自己传递进了插件的初始化方法里
    init: function(c) {
        var p, l = this.listeners;
        for (p in l) {
            if (Ext.isFunction(l[p])) {
                l[p] = this.createHandler(l[p], c);
            } else {
                l[p].fn = this.createHandler(l[p].fn, c);
            }
        }

        // 渲染后立即添加监听器到元素上
        c.render = c.render.createSequence(function() {
            var e = c.getEl();
            if (e) {
                e.on(l);
            }
        });
    },

    createHandler: function(fn, c) {
        return function(e) {
            fn.call(this, e, c);
        };
    }
});

var combo = new Ext.form.ComboBox({

    // 元素被点击后折叠
    plugins: [ new Ext.DomObserver({
        click: function(evt, comp) {
            comp.collapse();
        }
    })],
    store: myStore,
    typeAhead: true,
    mode: 'local',
    triggerAction: 'all'
});

Observable
margins : Object
注:此配置只用于该组件展现在一个使用BorderLayout...

注:此配置只用于该组件展现在一个使用BorderLayout 或 BoxLayout的两个子类之一作为布局的容器。

这个margins对象在该组件中的格式为：

{top: (top margin),right: (right margin),bottom: (bottom margin),left: (left margin)}

也可以是一个字符串，中间用空格分隔，margin值为数字。 把matches中每一个值的次序跟CSS中margin值的排列方式相对应：

  • 如果只有一个值，它适用于所有方面。
  • 如果有两个值，top和bottom的边框设置为第一个值，left和right设置为第二个值。
  • 如果有三个值，top设置为第一个值，left和right设置为第二个值，bottom设置为第三个值。
  • 如果有四个值，分别设置为top, right, bottom, left。

默认值:

{top:0, right:0, bottom:0, left:0}
BoxComponent
overCls : String
一个可选的额外的CSS类，它将在鼠标移过元素时被添加到组件上...
一个可选的额外的CSS类，它将在鼠标移过元素时被添加到组件上，鼠标移出时 删除。(默认为'')。此属性对于在组件上，或者它的任何使用标准CSS规则的孩子节点上， 添加定制的'active' 或者 'hover'样式非常有用。
Component
pageX : Number
如果该组件被包含在一个指定位置的容器中，这个值表示页面级的x坐标值（译者注：在有滚动条的情况下这个值很有用）。
BoxComponent
pageY : Number
如果该组件被包含在一个指定位置的容器中，这个值表示页面级的y坐标值（译者注：在有滚动条的情况下这个值很有用）。
BoxComponent
plugins : Object/Array
一个对象或者一个对象数组，为组件提供特殊的功能 ...
一个对象或者一个对象数组，为组件提供特殊的功能。 对一个合法的插件唯一的要求是它含有一个init()方法， 能接收一个Ext.Component型的参数。 当组件被创建时，如果有可用的插件，组件将会调用每个插件的init方法， 并将自身的引用作为方法参数传递给它。然后，每个插件就可以调用方法或者响应组件上的事件， 就像需要的那样提供自己的功能。
Component
ptype : String
需要创建配置的ptype。 当传递一个配置对象给构造函数时...
需要创建配置的ptype。 当传递一个配置对象给构造函数时，此配置选项不会被使用。 只有在使用懒初始化的时候此配置项才会被使用， 此时Plugin不是 通过一个完整的实例组件，而是通过一个Component配置指定的。 在渲染时，将会查找ptype以决定创建何种类型的Plugin。

如果你创建自己的Plugin，你可以通过 Ext.ComponentMgr.registerPlugin 对它们进行注册，以便能利用懒初始化和渲染机制。
Component
ref : String
一个路径描述，与组件的 ownerCt 相关，它描述了把当前组件的命名引用放置到哪个父容器中去。...

一个路径描述，与组件的 ownerCt 相关，它描述了把当前组件的命名引用放置到哪个父容器中去。

祖先的坐标路径可以通过'/'字符进行分隔。 例如，将一个Toolbar Button的引用放入 拥有此Toolbar的Panel中:

var myGrid = new Ext.grid.EditorGridPanel({
    title: 'My EditorGridPanel',
    store: myStore,
    colModel: myColModel,
    tbar: [{
        text: 'Save',
        handler: saveChanges,
        disabled: true,
        ref: '../saveButton'
    }],
    listeners: {
        afteredit: function() {
//          The button reference is in the GridPanel
            myGrid.saveButton.enable();
        }
    }
});

在上面的代码中，如果 ref 是 'saveButton' ，那么引用将会被放置到Toolbar中。 ref 中的每个'/' 都会从组件的 ownerCt 向上移动一级。

另请参见 added 和 removed 事件。

Component
region : String
注: 此配置只用于该组件展现在一个布局为BorderLayout的容器中...

注: 此配置只用于该组件展现在一个布局为BorderLayout的容器中(例如指定layout:'border')。

详见Ext.layout.BorderLayout。

BoxComponent
renderTo : Mixed
该值可以是一个节点的id、一个DOM节点或者一个已存在的元素...

该值可以是一个节点的id、一个DOM节点或者一个已存在的元素， 组件将会被渲染到其中。

  • 注意 :
      如果组件不是一个Container 的子项目时， 不要使用此选项。 渲染和管理它的子项目是一个Container 的layout manager的责任。
      当使用此配置项时，无需调用render()方法。

另请参见 render 。

Component
seriesStyles : Object
图表刷新后将要应用于各序列的样式。默认为 null.
Chart
stateEvents : Array
一个事件数组，当它们被触发时，组件需要保存自己的状态(默认值为 none)...

一个事件数组，当它们被触发时，组件需要保存自己的状态(默认值为 none)。 它们可以是任何该组件支持的事件类型，包括浏览器事件和 自定义事件(例如['click', 'customerchange'])。

对于保存和恢复组件状态的详细解释，参见 stateful

Component
stateId : String
为该组件指定的唯一的id值，它被用作管理组件状态的目的...
为该组件指定的唯一的id值，它被用作管理组件状态的目的。 (如果设定了id，默认值为组件自己的id，否则，如果组件使用自动生成的id，此值为null)。

对于保存和反解析组件状态的解释，参见 stateful 。

Component
stateful : Boolean
一个标志参数，它将引起组件在启动时尝试从一个保存的状态中恢复内部状态参数...

一个标志参数，它将引起组件在启动时尝试从一个保存的状态中恢复内部状态参数。 组件必须要么拥有一个 stateId 或者 id ，它们被分配给需要被管理的状态属性。 在跨页面加载时，不保证自动生成的id属性的稳定性， 并且，不能依赖此id来保存和恢复一个组件的相同状态。

为了保存状态的操作能够工作，状态管理器的提供者必须 被设置成一个Ext.state.Provider 的实现类，它覆盖了set 和get 方法，以便保存和恢复name/value对。 有一个内置的Ext.state.CookieProvider 可用。

为当前页面设置状态提供者:

Ext.state.Manager.setProvider(new Ext.state.CookieProvider({
    expires: new Date(new Date().getTime()+(1000*60*60*24*7)), //7 days from now
}));

当 stateEvents 配置项中其中之一的事件被触发时， 一个状态可保存的组件将试图保存其状态。

保存状态时，一个可保存状态的组件首先需要通过调用 getState 方法来序列化它的状态。 默认情况下，此函数什么事都不做。 开发者必须提供一个实现，返回一个hash对象，它描述了组件可恢复的状态。

getState方法产生的值将会传递给 Ext.state.Manager.set 方法，它使用配置的 Ext.state.Provider 来保存对象，以组件的 stateId 为key，或者，如果此值（指stateId）没有指定时， 使用它的 id 作为key。

在进行构造时，一个可保存状态的组件试图通过调用 Ext.state.Manager.get方法来 恢复它的状态，传递 stateId 或者，如果此值（指stateId）没有指定时， 使用它的 id 作为参数。

结果对象被传递给 applyState 。 applyState 的默认实现只是简单地把属性拷贝到对象中， 但是开发者可以覆盖此方法以支持更多行为。

通过向 beforestaterestore, staterestore, beforestatesave 和 statesave 事件上绑定监听器，你可以在保存和恢复状态时进行额外的处理。

Component
style : String
被添加到组件元素的特定样式。 必须是按照...
被添加到组件元素的特定样式。 必须是按照 Ext.Element.applyStyles 类指定格式的合法参数值。

new Ext.Panel({
    title: 'Some Title',
    renderTo: Ext.getBody(),
    width: 400, height: 300,
    layout: 'form',
    items: [{
        xtype: 'textarea',
        style: {
            width: '95%',
            marginBottom: '10px'
        }
    },
        new Ext.Button({
            text: 'Send',
            minWidth: '100',
            style: {
                marginBottom: '10px'
            }
        })
    ]
});
Component
tabTip : String
注: 这个配置只用于当该组件作为TabPanel的一个子项目时使用...

注: 这个配置只用于当该组件作为TabPanel的一个子项目时使用。

一个String类型的innerHTML(支持html标签)，当鼠标放在该选项上的时，显示一个tooltip。为了tips能够被渲染，Ext.QuickTips.init()必须被提前调用。
BoxComponent
tpl : Mixed
一个 Ext.Template , Ext.XTemplate 或者一个用来形成一个Ext.XTemplate的字符串数组...
一个 Ext.Template , Ext.XTemplate 或者一个用来形成一个Ext.XTemplate的字符串数组。 与 data 和 tplWriteMode 配置项协同使用。
Component
tplWriteMode : String
刷新组件的内容区域时使用的Ext.(X)Template方式。 默认为'overwrite' (参见 Ext.XTemplate.overwrite )。
刷新组件的内容区域时使用的Ext.(X)Template方式。 默认为'overwrite' (参见 Ext.XTemplate.overwrite )。
Component
url : String
需要包含在chart中的URL。默认为 undefined。
Chart
width : Number
组件的宽度(默认值为 auto)。注:如果想使用百分比的方式...
组件的宽度(默认值为 auto)。注:如果想使用百分比的方式来设置值，请查看 Ext.Component.anchor。
BoxComponent
wmode : String
flash对象的wmode。此参数可以用来控制层叠次序。默认为 'opaque'。
FlashComponent
x : Number
如果被包含在一个指定位置的容器中，这个值表示x(left)坐标值。
BoxComponent
xtype : String
需要创建配置的xtype。 当传递一个配置对象给构造函数时...
需要创建配置的xtype。 当传递一个配置对象给构造函数时，此配置选项不会被使用。 只有在使用懒初始化的时候此配置项才会被使用，此时容器的子项目不是 通过一个完整的实例组件，而是通过一个Component配置指定的。 在渲染时，将会查找xtype以决定创建何种类型的子组件。

预定义的xtype列表如下： here。

如果你继承Component创建你自己的组件，你需要使用Ext.ComponentMgr.registerType 对它们进行注册，以便利用懒初始化和渲染机制。
Component
y : Number
如果被包含在一个指定位置的容器中，这个值表示y(top)坐标值。
BoxComponent

公共属性

Property Defined By
CHART_URL : String
设置从哪里加载图表。应该设置为本地图表源（路径）。
Chart
EXPRESS_INSTALL_URL : String
如果不存在，为初始化flash设置的url。 此参数应该设置为一个本地资源。
FlashComponent
disabled : Boolean
当前组件处于无效状态时为true。 Read-only.
Component
el : Ext.Element
封装了当前组件的Ext.Element。 Read-only。通常情况下，这将是一个<DIV>元素，它由此类的...

封装了当前组件的Ext.Element。 Read-only。

通常情况下，这将是一个<DIV>元素，它由此类的 onRender方法创建，但是它可以通过使用 autoEl 配置项进行覆盖。

注意: 直到组件渲染完成此元素都将处于无效状态。

如需向当前组件的 DOM事件(而不是当前组件自己的Observable事件)添加监听器， 更多建议，参见 listeners 配置项，或者直接使用一个render监听器:

new Ext.Panel({
    title: 'The Clickable Panel',
    listeners: {
        render: function(p) {
            // Append the Panel to the click handler's argument list.
            p.getEl().on('click', handlePanelClick.createDelegate(null, [p], true));
        },
        single: true  // Remove the listener after first invocation
    }
});

另请参见 getEl

Component
hidden : Boolean
如果当前组件处于隐藏状态，此值为true。Read-only。
Component
initialConfig : Object
当前组件的初始化配置描述。 Read-only。
Component
ownerCt : Ext.Container
组件所属的Container (默认为undefined，当前组件被添加到一个容器中时此值被自动设置)...
组件所属的Container (默认为undefined，当前组件被添加到一个容器中时此值被自动设置)。 Read-only。

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

Component
refOwner : Ext.Container
如果当前组件是一个容器的孩子，并且是通过一个 ref 配置项被注册的，则此值为 ref 引用被插入到的祖先容器。
如果当前组件是一个容器的孩子，并且是通过一个 ref 配置项被注册的，则此值为 ref 引用被插入到的祖先容器。
Component
rendered : Boolean
如果当前组件已经被渲染了，此值为true。Read-only.
Component

公共方法

Method Defined By
LineChart()
参数:
  • 无。
返回值:
  • void
LineChart
addClass ( string cls ) : Ext.Component
为组件底层的元素添加CSS样式。
为组件底层的元素添加CSS样式。
参数:
  • cls : string
    需要添加的CSS样式的class名称
返回值:
  • Ext.Component
    this
Component
addEvents( Object|String o, string Optional. ) : void
添加指定的事件到事件列表上，事件会被该Observable触发。
添加指定的事件到事件列表上，事件会被该Observable触发。
参数:
  • o : Object|String
    以事件名作为属性true作为值的对象 或者当多个事件名被分开的传递时则为第一个事件名。
  • Optional. : string
    事件名被分开的传递时则为事件名。 用法:
    this.addEvents('storeloaded', 'storecleared');
返回值:
  • void
Observable
addListener( String eventName, Function handler, [Object scope], [Object options] ) : void
给对象添加事件处理器。
给对象添加事件处理器。
参数:
  • eventName : String
    监听的事件名。
  • handler : Function
    事件调用的方法
  • scope : Object
    （可选）处理方法执行的作用域 (this的引用 reference)。 如果被忽略。默认为触发事件的对象。
  • options : Object
    （可选）包含处理器配置和属性的对象。 可能包含以下的属性:
    • scope : Object
      处理方法执行的作用域(this的引用) 。 如果被忽略。默认为触发事件的对象。
    • delay : Number
      在触发事件后延迟调用处理器的毫秒数。
    • single : Boolean
      如果为True则添加一个处理器来处理下一次的事件触发（仅一次），然后移除自己。
    • buffer : Number
      使得处理器延迟指定毫秒数后预定的运行在 一个Ext.util.DelayedTask中 。 如果事件在时间内再一次被触发，原始的处理器不会被调用，但是新的处理器会预定的在他的位置上。
    • target : Observable
      如果事件在目标的Observable上触发则仅仅调用处理器， 否则 事件会从子类的Observable上冒泡

    组合选项
    使用这些选项参数,可能会组合出不同类型的监听器：

    一个延迟的，一次性的监听器。

    myDataView.on('click', this.onClick, this, {
single: true,
delay: 100
});

    一次调用附加多个处理器
    该方法同样支持传递一个包含指定的多个处理器的属性的配置对象参数。

    myGridPanel.on({
'click' : {
    fn: this.onClick,
    scope: this,
    delay: 100
},
'mouseover' : {
    fn: this.onMouseOver,
    scope: this
},
'mouseout' : {
    fn: this.onMouseOut,
    scope: this
}
});

    或者一个简写的语法：

    myGridPanel.on({
'click' : this.onClick,
'mouseover' : this.onMouseOver,
'mouseout' : this.onMouseOut,
 scope: this
});
返回值:
  • void
Observable
applyToMarkup ( String/HTMLElement el ) : void
将此组件添加到已存在的有效的HTML标签中。 使用该方法时，无需再调用render()方法。
将此组件添加到已存在的有效的HTML标签中。 使用该方法时，无需再调用render()方法。
参数:
  • el : String/HTMLElement
返回值:
  • void
Component
bindStore ( Store store ) : void
改变图表绑定的数据集，并刷新。
改变图表绑定的数据集，并刷新。
参数:
  • store : Store
    绑定到图表的数据集合。
返回值:
  • void
Chart
cloneConfig ( Object overrides ) : Ext.Component
默认使用原先传递给当前实例的配置值克隆当前组件。
默认使用原先传递给当前实例的配置值克隆当前组件。
参数:
  • overrides : Object
    一个新的配置项，包含需要覆盖到克隆版本的所有属性。 可以传递一个id参数给此对象，否则将自动生成一个新的id以避免发生重复。
返回值:
  • Ext.Component
    当前组件的克隆副本
Component
destroy () : void
通过如下方法销毁对象：删除所有的事件监听器、将组件的元素从DOM树中删除...
通过如下方法销毁对象：删除所有的事件监听器、将组件的元素从DOM树中删除（如果可以）、 将组件从它的 Ext.Container（如果可用）中删除、 并且将它从Ext.ComponentMgr中 注销。 销毁操作一般由框架自动完成，一般情况下不需要直接调用该方法。
参数:
  • 无。
返回值:
  • void
Component
disable () : Ext.Component
将组件置为无效状态，并出发'disable'事件。
将组件置为无效状态，并出发'disable'事件。
参数:
  • 无。
返回值:
  • Ext.Component
    this
Component
enable () : Ext.Component
将组件置为有效状态并触发'enable'事件。
将组件置为有效状态并触发'enable'事件。
参数:
  • 无。
返回值:
  • Ext.Component
    this
Component
enableBubble( String/Array events ) :void
是否现在使得事件会被该Observable触发并调用 this.getBubbleTarget()方法在拥有者的继承树...

是否现在使得事件会被该Observable触发并调用 this.getBubbleTarget()方法在拥有者的继承树中冒泡。Observable的基础类中没有该方法的实现。

该方法一般被Ext.Components用来冒泡事件到拥有者的容器。参看Ext.Component.getBubbleTarget默认的实现 在Ext.Component中返回组件的直接拥有者。但是如果需要的是一个已知的目标，该方法可以被重写来更快的访问需求的目标。

例子:

Ext.override(Ext.form.Field, {
    // 添加方法到Field的initComponent上改变事件为冒泡
    initComponent : Ext.form.Field.prototype.initComponent.createSequence(function() {
        this.enableBubble('change');
    }),

    // 我们知道我们想让Field的事件冒泡到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() {
            // 如果样式被修改标题会变红。
            myForm.header.setStyle('color', 'red');
        }
    }
});
参数:
  • events : String/Array
    冒泡的事件名，或事件名数组
返回值:
  • void
Observable
findParentBy ( Function fn ) : Ext.Container
通过自定义的函数查找当前组件上层任何层次上的容器...
通过自定义的函数查找当前组件上层任何层次上的容器。 如果传递的函数返回true，容器对象将被返回。
参数:
  • fn : Function
    自定义的函数，使用如下参数调用(container,this component)。
返回值:
  • Ext.Container
    自定义函数返回true的第一个容器
Component
findParentByType ( String/Class xtype ) : Ext.Container
通过xtype或者class查找当前组件上层任何层次上的容器
通过xtype或者class查找当前组件上层任何层次上的容器
参数:
  • xtype : String/Class
    组件的xtype字符串，或者直接是组件的class
返回值:
  • Ext.Container
    符合指定xtype或者class的第一个容器
Component
fireEvent( String eventName, Object... args ) : Boolean
用传入的参数触发指定的事件 (减去事件名)。 一个事件可以被设置为冒泡 Obse...

用传入的参数触发指定的事件 (减去事件名)。

一个事件可以被设置为冒泡到Observable父类继承树(参看 Ext.Component.getBubbleTarget) 调用enableBubble实现。

参数:
  • eventName : String
    触发的事件名。
  • args : Object...
    传递给处理器的可变长度参数。
返回值:
  • Boolean
    如果有任何的处理器返回false则返回false，否则返回true。
Observable
focus ( [ Boolean selectText ], [ Boolean/Number delay ] ) : Ext.Component
尝试将当前组件设为焦点。
尝试将当前组件设为焦点。
参数:
  • selectText : Boolean
    (可选) 如果可用，同时选中组件内部的文本
  • delay : Boolean/Number
    (可选)将当前组件设置为焦点的延迟时间(设置为true等于0毫秒)
返回值:
  • Ext.Component
    this
Component
getBox ( [ Boolean local ] ) : Object
获取组件底层元素当前盒子模型的尺寸。（译者注：盒子模型是CSS术语，详细解释请自行搜索。）
获取组件底层元素当前盒子模型的尺寸。（译者注：盒子模型是CSS术语，详细解释请自行搜索。）
参数:
  • local : Boolean
    (可选)值为true时，组件的left值和top值将代替页面的XY被返回。(默认值为false)
返回值:
  • Object
    返回值的格式{x, y, width, height}
BoxComponent
getBubbleTarget () : Ext.Container
为Observable的fireEvent方法提供链接，它沿着继承结构进行冒泡操作。
为Observable的fireEvent方法提供链接，它沿着继承结构进行冒泡操作。
参数:
  • 无。
返回值:
  • Ext.Container
    拥有当前组件的容器。
Component
getEl () : Ext.Element
返回 Ext.Element ，它包装了当前组件。...

返回 Ext.Element ，它包装了当前组件。

通常情况下，这将是一个<DIV>元素，它是由该类的onRender方法创建的， 但是可以使用autoEl配置项 覆盖它。

注意: 此元素将会一直处于无效状态直到当前组件渲染完成。

如需向当前组件的 DOM事件(而不是当前组件自己的Observable事件)添加监听器， 更多建议，参见 listeners 配置项，或者直接使用一个render监听器:

new Ext.Panel({
    title: 'The Clickable Panel',
    listeners: {
        render: function(p) {
            // Append the Panel to the click handler's argument list.
            p.getEl().on('click', handlePanelClick.createDelegate(null, [p], true));
        },
        single: true  // Remove the listener after first invocation
    }
});
参数:
  • 无。
返回值:
  • Ext.Element
    包装当前组件的元素。
Component
getHeight () : Number
获取该组件的当前高度值。
获取该组件的当前高度值。
参数:
  • 无。
返回值:
  • Number
BoxComponent
getId () : String
返回当前组件的id，如果没有定义id，则自动生成并返回一个id:'ext-comp-'...
返回当前组件的 id 如果没有定义 id 则自动生成并返回一个 id

'ext-comp-' + (++Ext.Component.AUTO_ID)
参数:
  • 无。
返回值:
  • String
    id
Component
getItemId () : String
返回当前组件的 itemId 。 如果没有通过配置参数指定 itemId 那么，将会使用...
返回当前组件的 itemId 。 如果没有通过配置参数指定 itemId 那么，将会使用 getId 返回 id 。
参数:
  • 无。
返回值:
  • String
Component
getOuterSize () : Object
获取当前组件所在元素的尺寸大小，包括边缘的空白处。
获取当前组件所在元素的尺寸大小，包括边缘的空白处。
参数:
  • 无。
返回值:
  • Object
    一个包含元素大小的对象 {width: (element width + left/right margins), height: (element height + top/bottom margins)}
BoxComponent
getPosition ( [ Boolean local ] ) : Array
获取组件底层元素当前的XY位置。
获取组件底层元素当前的XY位置。
参数:
  • local : Boolean
    (可选)如果为true，将返回元素的left和top值，而不是相对于页面内的 XY。(默认值为 false)
返回值:
  • Array
    元素的XY位置值(例如：[100, 200])
BoxComponent
getResizeEl () : Ext.Element
返回该组件的最外层用来定义这些组件整体大小的Element...

返回该组件的最外层用来定义这些组件整体大小的Element对象。

通常用 getEl 方法将会返回相同的Element对象，但在有些情况下，组件可能有一些更多的封装了它的主要动态Element对象的Element对象。

例如ComboBox。它是封装在一个包含<input>元素的包装元素里(这将返回其 getEl方法和触发按钮的元素)。返回的元素为resizeEl。

参数:
  • 无。
返回值:
  • Ext.Element
    The Element which is to be resized by size managing layouts.
BoxComponent
getSize () : Object
获取组件底层元素当前的大小。
获取组件底层元素当前的大小。
参数:
  • 无。
返回值:
  • Object
    一个包含元素大小的对象{width: (element width), height: (element height)}
BoxComponent
getWidth () : Number
获取该组件的当前宽度值。
获取该组件的当前宽度值。
参数:
  • 无。
返回值:
  • Number
BoxComponent
getXType () : String
获取当前组件的xtype，它是用 Ext.ComponentMgr 注册的。 所有可用的xtype列表，参见...
获取当前组件的xtype，它是用 Ext.ComponentMgr 注册的。 所有可用的xtype列表，参见 Ext.Component 类头部。示例用法:

var t = new Ext.form.TextField();
alert(t.getXType());  // alerts 'textfield'
参数:
  • 无。
返回值:
  • String
    The xtype
Component
getXTypes () : String
返回此组件的xtype继承树，用字符'-'分隔。 所有可用的xtype值...

返回此组件的xtype继承树，用字符'-'分隔。 所有可用的xtype值，请参见Ext.Component 类的头部。

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

示例用法:

var t = new Ext.form.TextField();
alert(t.getXTypes());  // alerts 'component/box/field/textfield'
参数:
  • 无。
返回值:
  • String
    xtype层次字符串
Component
hasListener( String eventName ) : Boolean
检测对象是否包含指定事件的任何监听器
检测对象是否包含指定事件的任何监听器
参数:
  • eventName : String
    检测的事件名
返回值:
  • Boolean
    如果事件被监听则为true，否则为false
Observable
hide () : Ext.Component
隐藏当前组件。 监听 beforehide' 事件并且返回false 可以取消隐藏组件的操作。 在隐藏组件之后触发...
隐藏当前组件。 监听 beforehide' 事件并且返回false 可以取消隐藏组件的操作。 在隐藏组件之后触发 ' hide' 事件。 如果组件被配置成 hidden 那么此方法在内部被调用。
参数:
  • 无。
返回值:
  • Ext.Component
    this
Component
isVisible () : Boolean
如果当前组件可见，返回true。
如果当前组件可见，返回true。
参数:
  • 无。
返回值:
  • Boolean
    如果当前组件可见，返回true，其它返回false。
Component
isXType ( String xtype , [ Boolean shallow ] ) : Boolean
Tests whether or not this Component is of a specific xtype. This can test whether this Component is descended from th...

测试此组件是否是指定的xtype。此方法既可以测试是否是指定的xtype的某个子类， 或者它是否直接是指定的xtype类(shallow=true)。

如果使用你自己的子类，必须知道组件必须注册它的xtype值。

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

示例用法:

var t = new Ext.form.TextField();
var isText = t.isXType('textfield');        // true
var isBoxSubclass = t.isXType('box');       // true, descended from BoxComponent
var isBoxInstance = t.isXType('box', true); // false, not a direct BoxComponent instance
参数:
  • xtype : String
    需要为当前组件进行检测的xtype
  • shallow : Boolean
    (可选) 如果为false，检测组件是否是xtype继承树中的某个子类（默认是这种情况）， 如果为true，只检测组件是否是指定的xtype类型。
返回值:
  • Boolean
    如果当前组件是指定xtype的子类，返回true，其它返回flase。
Component
mon ( Observable|Element item , Object|String ename , Function fn , Object scope , Object opt ) : void
向任何Observable对象(或者元素)上添加监听器，监听器将会在组件...

向任何Observable对象(或者元素)上添加监听器，监听器将会在组件销毁时被自动删除。
用法：

myGridPanel.mon(myGridPanel.getSelectionModel(), 'selectionchange', handleSelectionChange, null, {buffer: 50});

or:

myGridPanel.mon(myGridPanel.getSelectionModel(), {
    selectionchange: handleSelectionChange,
    buffer: 50
});
参数:
  • item : Observable|Element
    需要添加listener/listeners的项目。
  • ename : Object|String
    事件名，或者一个包含事件名属性的对象。
  • fn : Function
    (可选) 如果 ename 参数是一个事件名，此参数为处理函数。
  • scope : Object
    (可选)如果 ename 参数是一个事件名称，此参数是作用域 ( this 引用)，监听函数将会在此作用域中被执行。
  • opt : Object
    (可选)如果 ename 参数是一个事件名称， 此参数是 addListener 配置项。
返回值:
  • void
Component
mun ( Observable|Element item , Object|String ename , Function fn , Object scope ) : void
删除通过mon 方法添加的监听器。
删除通过mon 方法添加的监听器。
参数:
  • item : Observable|Element
    需要删除listener/listeners的项目。
  • ename : Object|String
    事件名称，或者一个包含事件名称属性的对象。
  • fn : Function
    (可选)如果 ename 参数是一个事件名称，此参数是一个处理函数。
  • scope : Object
    (可选)如果 ename 参数是一个事件名称，此参数是作用域 ( this 引用)，监听函数将会在此作用域中被执行。
返回值:
  • void
Component
nextSibling () : Ext.Component
返回所属容器中的下一个组件
返回所属容器中的下一个组件
参数:
  • 无。
返回值:
  • Ext.Component
Component
on( String eventName, Function handler, [Object scope], [Object options] ) : void
给对象添加事件处理器 (addListener的简写形式)
给对象添加事件处理器 (addListener的简写形式。)
参数:
  • eventName : String
    监听的事件类型
  • handler : Function
    事件调用的方法
  • scope : Object
    （可选）处理方法执行时的作用域 (this 的引用)。 如果被忽略。默认为触发事件的对象。
  • options : Object
    可选 包含处理器配置的对象。
返回值:
  • void
Observable
previousSibling () : Ext.Component
返回所属容器中的前一个组件
返回所属容器中的前一个组件
参数:
  • 无。
返回值:
  • Ext.Component
Component
purgeListeners() : void
移除对象上所有的监听器
移除对象上所有的监听器
参数:
  • 无。
返回值:
  • void
Observable
relayEvents( Object o, Array events ) : void
从指定的Observable上传递选择的事件就好像被当前对象触发一样。
从指定的Observable上传递选择的事件就好像被当前对象触发一样。
参数:
  • o : Object
    该Observable上的事件被当前对象传递。
  • events : Array
    传递的数组名。
返回值:
  • void
Observable
removeClass ( string cls ) : Ext.Component
从组件底层的元素上删除一个CSS类。
从组件底层的元素上删除一个CSS类。
参数:
  • cls : string
    需要移除的CSS类名
返回值:
  • Ext.Component
    this
Component
removeListener( String eventName, Function handler, [Object scope] ) : void
删除一个事件处理器。
删除一个事件处理器。
参数:
  • eventName : String
    处理器关联的事件类型。
  • handler : Function
    移除的处理器。 这应该是传递到addListener里的方法的引用。
  • scope : Object
    （可选）处理器指定的初始作用域。
返回值:
  • void
Observable
render ( [ Element/HTMLElement/String container ], [ String/Number position ] ) : void
在传递进来的HTML元素中渲染当前组件。...

在传递进来的HTML元素中渲染当前组件。

如果你正在使用一个Container 对象放置当前组件，那么请不要使用render方法。

当容器第一次被渲染时，它的子组件将会被容器的 layout 管理器渲染。

某些布局管理器允许动态添加子组件。它们包括 Ext.layout.CardLayout, Ext.layout.AnchorLayout, Ext.layout.FormLayout, Ext.layout.TableLayout。

当一个新的子组件被添加时，如果容器已经被渲染了， 你可能需要调用容器的 doLayout 方法来刷新视图，它将导致所有没有被渲染的子组件进行渲染操作。 此操作是必须的，这样你可以添加多个子组件而只刷新一次layout。

当创建复杂的UI时，非常重要的一点是，请记住调整子项目的尺寸和位置是容器的 layout 管理器的职责。 如果你希望子项目的尺寸对用户交互作出反应， 你必须为容器配置一个布局管理器，它将创建和管理你心里想要的那种布局。

忽略容器的layout 配置意味着将会使用一个基本的布局管理器，它除了按次序把子组件 渲染到容器中之外什么事情都不做。 这种情况下，任何尺寸和位置的调整操作都不会发生。

参数:
  • container : Element/HTMLElement/String
    (可选) 需要在其中渲染当前组件的元素。 如果它是从一个已存在的标签中创建的，此参数应该被忽略。
  • position : String/Number
    (可选) 容器中的一个元素ID或者一个DOM节点索引， 当前组件将会被插入到它前面 (默认append到容器的尾部)
返回值:
  • void
Component
resumeEvents() : void
重新开始触发事件。(参见suspendEvents) 如果事件以queueSuspended参数被挂起，则在事件被挂起时 ...
重新开始触发事件。(参见 suspendEvents) 如果事件以queueSuspended 参数被挂起，则在事件被挂起时触发的事件会被传递到所有的监听器上
参数:
  • 无。
返回值:
  • void
Observable
setAutoScroll ( Boolean scroll ) : Ext.BoxComponent
设置该组件内容溢出时是否自动显示滚动条。
设置该组件内容溢出时是否自动显示滚动条。
参数:
  • scroll : Boolean
    值为true的话组件自动显示滚动条。
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setDisabled ( Boolean disabled ) : Ext.Component
工具函数，使用布尔值设置有效/无效(disabled/enabled )。
工具函数，使用布尔值设置有效/无效(disabled/enabled )。
参数:
  • disabled : Boolean
返回值:
  • Ext.Component
    this
Component
setHeight ( Mixed height ) : Ext.BoxComponent
设置此组件的高度。该方法将触发resize事件。
设置此组件的高度。该方法将触发resize事件。
参数:
  • height : Mixed
    The new height to set.
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setPagePosition ( Number x , Number y ) : Ext.BoxComponent
设置组件在页面中的XY位置。 如果需要设置left和top值 ，请使用...
设置组件在页面中的XY位置。 如果需要设置left和top值 ，请使用setPosition方法。 该方法触发move事件。
参数:
  • x : Number
    The new x position
  • y : Number
    The new y position
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setPosition ( Number left , Number top ) : Ext.BoxComponent
设置组件的left和top值。设置组件的页面XY值，请使用setPagePosition方法。该方法触发...
设置组件的left和top值。设置组件的页面XY值，请使用setPagePosition方法。该方法触发move事件。
参数:
  • left : Number
    The new left
  • top : Number
    The new top
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setSeriesStyles ( styles {Array} ) : void
为图表中所有序列设置样式。
为图表中所有序列设置样式。
参数:
  • {Array} : styles
    为列表中所有序列样式进行初始化。
返回值:
  • void
Chart
setSize ( Mixed width , Mixed height ) : Ext.BoxComponent
设置BoxComponent的宽度和高度。 此方法触发resize事件...
设置BoxComponent的宽度和高度。 此方法触发resize事件。此方法可以接收单独的width或者height值作为参数， 或者你可以传递像这样的一个size对象： {width:10, height:20} 。
参数:
  • width : Mixed
    设置的新的width值。这可以是：
    • 一个Number类型指定Element新的宽度 Ext.Element.defaultUnit(默认为像素 :'px')。
    • 一个String类型用于设置width的CSS样式。
    • 一个size对象格式为 {width: widthValue, height: heightValue} 。
    • 值为 undefined 时，保留原来的width不变。
  • height : Mixed
    设置的新的height值(如果第一个参数传递了一个size对象，此参数没有必要传递)。这可以是：
    • 一个Number类型指定Element新的高度 Ext.Element.defaultUnit(默认为像素 :'px')。
    • 一个String类型用于设置height的CSS样式。也有可能不会被使用到。
    • 值为 undefined 时，保留原来的height不变。
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setStyle ( name {String} , value {Object} ) : void
为图表实例设置单一样式值。
为图表实例设置单一样式值。
参数:
  • {String} : name
    将要改变的图表样式名称。
  • {Object} : value
    图表样式的新值。
返回值:
  • void
Chart
setStyles ( styles {Object} ) : void
重置图表实例上的所有样式。
Resets all styles on the Chart instance.
参数:
  • {Object} : styles
    Initializer for all Chart styles.
返回值:
  • void
Chart
setVisible ( Boolean visible ) : Ext.Component
工具方法，通过使用布尔值隐藏或者显示当前组件。
工具方法，通过使用布尔值隐藏或者显示当前组件。
参数:
  • visible : Boolean
    true时显示，false时隐藏
返回值:
  • Ext.Component
    this
Component
setWidth ( Mixed width ) : Ext.BoxComponent
设置组件的宽度。 此方法触发resize事件。
设置组件的宽度。 此方法触发resize事件。
参数:
  • width : Mixed
    The new width to set.
返回值:
  • Ext.BoxComponent
    this
BoxComponent
show () : Ext.Component
显示当前组件。监听' beforeshow' 事件，返回 false 取消显示组件...
显示当前组件。监听' beforeshow' 事件，返回 false 取消显示组件。在显示组件之后触发' show' 事件。
参数:
  • 无。
返回值:
  • Ext.Component
    this
Component
suspendEvents( Boolean queueSuspended ) : void
暂停触发所有的事件。 (参看resumeEvents)
暂停触发所有的事件。（参看 resumeEvents)
参数:
  • queueSuspended : Boolean
    如果传递为true则排列好暂停的事件使得在调用 resumeEvents 后再触发它们，而不是抛弃所有暂停的事件。
返回值:
  • void
Observable
syncSize () : Ext.BoxComponent
强制组件的大小按照此组件底层元素当前的高度和宽度计算。
强制组件的大小按照此组件底层元素当前的高度和宽度计算。
参数:
  • 无。
返回值:
  • Ext.BoxComponent
    this
BoxComponent
un( String eventName, Function handler, [Object scope] ) : void
删除一个事件处理器(removeListener方法的简写形式)
删除一个事件处理器(removeListener方法的简写形式。)
参数:
  • eventName : String
    处理器关联的事件类型
  • handler : Function
    被删除的处理器 这应该是传入 addListener 中的方法的引用。
  • scope : Object
    （可选）为处理器指定的初始作用域。
返回值:
  • void
Observable
update ( Mixed htmlOrData , [ Boolean loadScripts ], [ Function callback ] ) : void
刷新组件的内部区域。
刷新组件的内部区域。
参数:
  • htmlOrData : Mixed
    如果已经通过tpl为当前组件配置了一个模板，那么 将会使用此参数来装配模板。 如果没有为当前组件配置模板，组件的内容区域将会通过Ext.Element 进行刷新。
  • loadScripts : Boolean
    (可选)只用在使用html配置时此参数才合法。默认为false。
  • callback : Function
    (可选)只用在使用html配置时此参数才合法。 当脚本加载完成时回调函数才被执行。
返回值:
  • void
Component
updateBox ( Object box ) : Ext.BoxComponent
设置此组件底层元素的盒子模型尺寸。(译者注：盒子模型是CSS术语，详细资料请自行搜索。)
设置此组件底层元素的盒子模型尺寸。(译者注：盒子模型是CSS术语，详细资料请自行搜索。)
参数:
  • box : Object
    一个格式为{x, y, width, height}的对象
返回值:
  • Ext.BoxComponent
    this
BoxComponent

公共事件

Event Defined By
added : ( Ext.Component this , Ext.Container ownerCt , number index )
当一个组件被添加到一个Ext.Container时触发
当一个组件被添加到一个Ext.Container时触发
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • ownerCt : Ext.Container
    用于组件的容器
  • index : number
    添加组件的位置
Component
afterrender : ( Ext.Component this )
在组件渲染完成之后触发...

在组件渲染完成之后触发。

afterrender事件在当前组件被rendered 结束之后、在为组件定义的所有afterRender方法执行之后 触发，并且，如果有stateful， 也在状态被保存之后才触发。

监听器将会以如下参数格式被调用:
  • this : Ext.Component
Component
beforedestroy : ( Ext.Component this )
在组件 destroyed 之前触发。 在事件监听器中返回false以停止 destroy 操作。
在组件 destroyed 之前触发。 在事件监听器中返回false以停止 destroy 操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforehide : ( Ext.Component this )
在调用hide方法隐藏组件之前触发。 在事件监听器中返回false可以停止隐藏操作。
在调用hide方法隐藏组件之前触发。 在事件监听器中返回false可以停止隐藏操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforerefresh : ( Chart this )
在图表数据刷新前触发。如果beforerefresh处理函数返回false则refresh动作...
在图表数据刷新前触发。如果beforerefresh处理函数返回false则 refresh 动作将被取消。
监听函数被调用时将传递如下参数：
  • this : Chart
Chart
beforerender : ( Ext.Component this )
在组件被rendered 之前触发。 在事件监听器中返回false可以停止render 操作。
在组件被rendered 之前触发。 在事件监听器中返回false可以停止render 操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforeshow : ( Ext.Component this )
在调用show()方法现实组件之前触发。 事件处理函数返回false可以停止show。
在调用show 方法现实组件之前触发。 事件处理函数返回false可以停止show。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforestaterestore : ( Ext.Component this , Object state )
在组件状态恢复之前触发。返回false停止恢复状态操作。
在组件状态恢复之前触发。返回false停止恢复状态操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    StateProvider返回的状态哈希值。 如果没有禁止此事件，那么状态对象会被传递给applyState。 默认情况下，这样简单地把属性值拷贝到当前组件中。 可以覆盖此方法以提供自定的状态恢复操作。
Component
beforestatesave : ( Ext.Component this , Object state )
在组件状态被保存到配置的状态提供者之前触发。 返回false可以停止保存。
在组件状态被保存到配置的状态提供者之前触发。 返回false可以停止保存。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    状态值哈希。 这由在组件上调用getState() 方法决定。 此方法必须由开发者提供，返回是否需要对状态进行描述，默认情况下， Ext.Component有一个空实现。
Component
destroy : ( Ext.Component this )
在组件被销毁之后触发。
在组件被destroyed之后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
disable : ( Ext.Component this )
在组件被设置为无效状态后触发。
在组件被设置为无效状态后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
enable : ( Ext.Component this )
当组件被设置为有效(enabled)之后触发。
当组件被设置为有效(enabled)之后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
hide : ( Ext.Component this )
在组件被隐藏之后触发。 当调用hide 方法隐藏组件之后触发。
在组件被隐藏之后触发。 当调用hide 方法隐藏组件之后触发。
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
initialize : ( Chart this )
监听器将会以如下参数格式被调用:
  • this : Chart
FlashComponent
move : ( Ext.Component this , Number x , Number y )
在组件移动之后触发。
在组件移动之后触发。
监听器将会用如下的参数格式来调用:
  • this : Ext.Component
  • x : Number
    The new x position
  • y : Number
    The new y position
BoxComponent
refresh : ( Chart this )
图表数据刷新后触发。
图表数据刷新后触发。
监听函数被调用时将传递如下参数：
  • this : Chart
Chart
removed : ( Ext.Component this , Ext.Container ownerCt )
当一个组件被从Ext.Container容器中删除时触发
当一个组件被从Ext.Container容器中删除时触发
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • ownerCt : Ext.Container
    持有组件的容器
Component
render : ( Ext.Component this )
在组件被渲染之后触发。
在组件被 rendered(渲染) 之后触发。
监听器将以如下的参数格式被调用:
  • this : Ext.Component
Component
resize : ( Ext.Component this , Number adjWidth , Number adjHeight , Number rawWidth , Number rawHeight )
在组件被调整大小之后触发。
在组件被调整大小之后触发。
监听器将以如下的参数格式被调用:
  • this : Ext.Component
  • adjWidth : Number
    这是width调整后的值
  • adjHeight : Number
    这是height调整后的值
  • rawWidth : Number
    这是width原来的值
  • rawHeight : Number
    这是height原来的值
BoxComponent
show : ( Ext.Component this )
在调用show 方法显示组件之后触发。
在调用show 方法显示组件之后触发。
监听器将会用如下的参数格式被调用:
  • this : Ext.Component
Component
staterestore : ( Ext.Component this , Object state )
组件状态被存储之后触发。
组件状态被存储之后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    StateProvider返回的状态哈希值。 如果没有禁止此事件，那么状态对象会被传递给applyState。 默认情况下，这样简单地把属性值拷贝到当前组件中。 可以覆盖此方法以提供自定的状态恢复操作。
Component
statesave : ( Ext.Component this , Object state )
在组件状态被保存到所配置的状态提供者之后触发。
在组件状态被保存到所配置的状态提供者之后触发。
监听器将会用如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    状态值hash。 这是由在足见上调用getState() 方法决定的。 开发者必须提供此方法以返回是否需要恢复状态，默认情况下， Ext.Component有一个空实现。
Component


Series
    CartesianSeries
      LineSeries

Class Ext.chart.LineSeries

包: | Ext.chart
定义类的文件: | Chart.js
类: | LineSeries
继承自: | CartesianSeries
图标控件中的LineSeries（线条序列）类。

公共属性

Property |  | Defined By
 | axis : String 指明该序列绑定的坐标。 | CartesianSeries
 | displayName : String 序列名。 | Series
 | showInLegend : Boolean 如果为false，将在图例说明里不显示该序列。 默认为true. | CartesianSeries
 | type : String 序列类型。 | Series
 | xField : String 用来访问数据源项目中x轴数值的字段。 | CartesianSeries
 | yField : String 数据源的各项中横坐标（x轴）对应的字段名。 | CartesianSeries

公共方法

该类没有公共方法。

公共事件

该类没有公共事件。


Axis
    NumericAxis

Class Ext.chart.NumericAxis

包: | Ext.chart
定义类的文件: | Chart.js
类: | NumericAxis
继承自: | Axis
一种以数值来衡量单位的坐标轴。

公共属性

Property |  | Defined By
 | adjustMaximumByMajorUnit : Boolean 指出是否将坐标轴的最大值拓展到大于数据集中最大值且离其最近的那个主要单位... 指出是否将坐标轴的最小值拓展到大于数据集中最大值且离其最近的那个主要单位上（译者详解：譬如，主要单位间隔为100，数据集最大值185。如果该属性值为true，则坐标轴最大值为200，否则为185）。 | NumericAxis
 | adjustMinimumByMajorUnit : Boolean 指出是否将坐标轴的最小值拓展到小于数据集中最小值且离其最近的那个主要单位... 指出是否将坐标轴的最小值拓展到小于数据集中最小值且离其最近的那个主要单位上（译者详解：譬如，主要单位间隔为100，数据集最小值-85。如果该属性值为true，则坐标轴最小值为-100，否则为-85）。 | NumericAxis
 | alwaysShowZero : Boolean 如果为true，并且上下限经过自动计算，不论最大值或最小值都会被设置为0。 | NumericAxis
 | calculateByLabelSize : Boolean 指明是否在计算主要单位时考虑标签的大小。 | NumericAxis
 | hideOverlappingLabels : Boolean 如果为true，坐标轴上，与之前标签重叠的标签将被隐藏。 | Axis
 | labelFunction : String 一个全局函数的字符串引用。用来定义坐标轴上每个标签的值。 | Axis
 | labelSpacing : Number 坐标轴上，以像素（pixel）为单位的标签间距。 | Axis
 | majorUnit : Number 坐标轴上主要单位的间距。 | NumericAxis
 | maximum : Number 坐标轴最大值。如未设置，则自动计算。 | NumericAxis
 | minimum : Number 坐标轴最小值。如未设置，则自动计算。 | NumericAxis
 | minorUnit : Number 坐标轴上次要单位的间距。 | NumericAxis
 | orientation : String 定义坐标方向。可选值为“horizontal”（水平方向）或者“vertical”（垂直方向）。 | Axis
 | position : String 指明坐标轴在图表中的相对位置。 | NumericAxis
 | reverse : Boolean 如果为true，坐标轴上的元素将以相反方向渲染。 | Axis
 | roundMajorUnit : Boolean 指出是否对主要单位取整。 | NumericAxis
 | scale : String 坐标轴缩放算法。取值可以为“linear”或“logarithmic”。 | NumericAxis
 | snapToUnits : Boolean 如果为true，标签、刻度、网格以及其他对象都会和最近的主要或者单位对齐。如果为false，则... 如果为true，标签、刻度、网格以及其他对象都会和最近的主要或者单位对齐。如果为false，则他们的位置将取决于最小值。 | NumericAxis
 | type : String 坐标轴的种类。 | Axis

公共方法

该类没有公共方法。

公共事件

该类没有公共事件。


Observable
    Component
      BoxComponent
        FlashComponent
          Chart
            PieChart

Class Ext.chart.PieChart

包: | Ext.chart
定义类的文件: | Chart.js
类: | PieChart
继承自: | Chart

配置项

Config Options Defined By
allowDomMove : Boolean
在渲染时组件是否可以移动Dom节点(默认为true)。
Component
anchor : String
注: 这个配置只用于该组件被包含在一个已使用AnchorLayout...

注: 这个配置只用于该组件被包含在一个已使用 AnchorLayout (或者其子类)配置的Container时。 基于布局管理器，例如：

  • Ext.form.FormPanel
  • 指定 layout: 'anchor' // or 'form', or 'absolute'

参见 Ext.layout.AnchorLayout. anchor 。

BoxComponent
applyTo : Mixed
指定一个元素的id、一个DOM元素或者一个已经存在并被渲染到DIV中的元素，此DIV已经被...

指定一个元素的id、一个DOM元素或者一个已经存在并被渲染到DIV中的元素，此DIV已经被 渲染到document中，并且为当前组件指定了一些结构化的标签。

  • 描述 :
      当使用了 applyTo， 在主元素中也可以用id或者CSS类名来指定组件的托管部分， 并且，如果可以的话，创建的组件可能也会试图在那个标签中创建它的子组件。
  • 注意 :
      当使用此配置项时，无需调用render()方法。
      如果指定了applyTo属性，任何传递给 renderTo 的值都会被忽略，并且目标元素的父节点将会自动被用作组件的容器。
Component
autoEl : Mixed
一个表签名或者一个 DomHelper 描述，用来创建 Element ，它将封装当前组件...

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

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

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

{
    xtype: 'box',
    autoEl: {
        tag: 'img',
        src: 'http://www.example.com/example.jpg'

    }
}, {
    xtype: 'box',
    autoEl: {
        tag: 'blockquote',
        html: 'autoEl is cool!'
    }
}, {
    xtype: 'container',
    autoEl: 'ul',
    cls: 'ux-unordered-list',
    items: {
        xtype: 'box',
        autoEl: 'li',
        html: 'First list item'
    }
}
Component
autoHeight : Boolean
如果值为true，height配置项为'auto'，否则值为false的话使用固定的高度...

如果值为true，height配置项为'auto'，否则值为false的话使用固定的高度， 或者可以由其父类容器 layout manager来控制。(默认值为 false)。

注: 虽然很多组件继承了这个配置选项，但不是所有这些组件的自适应高度配置都会像期望的那样起作用。 设置autoHeight：值为true时，浏览器将根据元素的内容自动设置高度，这将意味着Ext不会去管理高度。

如果是由浏览器来管理高度，需要注意的是，通过浏览器进行调整的结构组件内不能被发现， 因此宽度的变化可能导致需要进行同步处理元素的高度。 例如：

var w = new Ext.Window({
    title: 'Window',
    width: 600,
    autoHeight: true,
    items: {
        title: 'Collapse Me',
        height: 400,
        collapsible: true,
        border: false,
        listeners: {
            beforecollapse: function() {
                w.el.shadow.hide();
            },
            beforeexpand: function() {
                w.el.shadow.hide();
            },
            collapse: function() {
                w.syncShadow();
            },
            expand: function() {
                w.syncShadow();
            }
        }
    }
}).show();
BoxComponent
autoScroll : Boolean
如果值为true，将会在该元素上使用overflow:'auto'配置，并且在必要的时候...
如果值为true，将会在该元素上使用overflow:'auto'配置，并且在必要的时候自动显示滚动条，否则，溢出部分的组件都会被切除(默认值为 false)。
BoxComponent
autoShow : Boolean
如果组件需要检测隐藏CSS属性(如 'x-hidden' 或者 'x-hide-display')并且在渲染时删除...
如果组件需要检测隐藏CSS属性(如 'x-hidden' 或者 'x-hide-display')并且在渲染时删除它们 (默认为false)，设置此值为true。
Component
autoWidth : Boolean
如果为true，使用width:'auto'配置，否则使用固定的宽度...

如果为true，使用width:'auto'配置，否则使用固定的宽度，或者可以由其父类容器的layout manager来控制。(默认值为 false)。

注: 虽然很多组件继承了这个配置选项，但不是所有这些组件的自适应宽度配置都会像期望的那样起作用。 设置autoWidth：值为true时，浏览器将根据元素的内容自动设置宽度，这将意味着Ext不会去管理宽度。

如果是由浏览器来管理宽度，需要注意的是，通过浏览器进行调整的结构组件内不能被发现，因此宽度的变化可能导致需要进行同步处理元素的宽度。 例如，在这个元素的目标是：

<div id='grid-container' style='margin-left:25%;width:50%'></div>
当浏览器窗口改变时，渲染后的Panel必须监听浏览器窗口大小的变化，以便通知子项，浏览器改变了其宽度：

var myPanel = new Ext.Panel({
    renderTo: 'grid-container',
    monitorResize: true, // relay on browser resize
    title: 'Panel',
    height: 400,
    autoWidth: true,
    layout: 'hbox',
    layoutConfig: {
        align: 'stretch'
    },
    defaults: {
        flex: 1
    },
    items: [{
        title: 'Box 1',
    }, {
        title: 'Box 2'
    }, {
        title: 'Box 3'
    }],
});
BoxComponent
backgroundColor : String
chart的背景颜色。默认为 '#ffffff'。
FlashComponent
boxMaxHeight : Number
设置组件的最大高度值...

设置组件的最大高度值。

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

BoxComponent
boxMaxWidth : Number
设置组件的最大宽度值...

设置组件的最大宽度值。

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

BoxComponent
boxMinHeight : Number
设置组件的最小高度值...

设置组件的最小高度值。

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

BoxComponent
boxMinWidth : Number
设置组件的最小宽度值...

设置组件的最小宽度值。

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

BoxComponent
bubbleEvents : Array
一个事件数组，当这些事件被触发时，将会被冒泡到所有父容器中。参见....

一个事件数组，当这些事件被触发时，将会被冒泡到所有父容器中。参见 Ext.util.Observable.enableBubble。 默认为 []。

Component
chartStyle : Object
设置图表样式。由于本身包含默认样式，所以修改这个属性将会覆盖内置...
设置图表样式。由于本身包含默认样式，所以修改这个属性将会覆盖内置样式。 使用 extraStyle 来为默认样式附加自定义样式。
Chart
clearCls : String
应用到特殊的clearing div的CSS类， 这个clearing div直接渲染到每个form field的包装器后面...

应用到特殊的clearing div的CSS类， 这个clearing div直接渲染到每个form field的包装器后面，以提供 清除field的功能(默认为 'x-form-clear-left')。

注意: 只有在当前组件被渲染到一个使用FormLayout 布局(例如 Ext.form.FormPanel 或者指定 layout:'form')的 容器中、或者是指定了一个fieldLabel 、或者指定isFormField=true 时此配置才有效。

另请参见 Ext.layout.FormLayout. fieldTpl。

Component
cls : String
一个可选的额外CSS类，它将被添加到当前组件的元素上(默认为'')...
一个可选的额外CSS类，它将被添加到当前组件的元素上(默认为'')。 此属性对于在组件上，或者它的任何使用标准CSS规则的孩子节点上， 添加定制的样式非常有用。
Component
contentEl : String
(可选)指定一个已存在的HTML元素，或者一个已存在HTML元素的...

(可选)指定一个已存在的HTML元素，或者一个已存在HTML元素的 id ，它们将被用作当前组件的内容。

  • 描述 :
    此配置选项被用来将一个已存在的HTML元素 插入到一个新组件(在组件渲染之后它简单地移动DOM元素) 的layout元素中，使它成为该组件的内容。
  • 注意 :
    指定的HTML元素将被append到组件的layout元素中， 在所有配置的 HTML 被插入之后， 并且，这样的话，在render事件 被触发时，document中将不再包含此元素。
    指定的HTML元素将不会参与组件所有可能使用的 layout 过程(译者注：指这些HTML元素 不会参与布局操作)。 它仅是HTML而已。布局操作实在孩子 items 上进行的。
    添加 x-hidden 或者 x-hide-display CSS类，以防在内容渲染到panel时发生闪烁。
Component
ctCls : String
一个可选的外部CSS样式，添加到这个组件的容器(默认值为 '')。 这个方法对于使用标准的CSS规则...

一个可选的外部CSS样式，添加到这个组件的容器(默认值为 '')。 这个方法对于使用标准的CSS规则，为组件或它的任何一个子组件添加特定的样式非常有用。 参见 Ext.layout.ContainerLayout和 extraCls 。

注意: ctCls 默认为 ''期望如下的类，它们将指定一个默认值:

  • Box Layout : 'x-box-layout-ct'
使用一个额外的CSS类配置以上的Class，它是append到默认对象上的。例如， 对于BoxLayout (Hbox and Vbox):
                                ctCls: 'x-box-layout-ct custom-class'

Component
data : Mixed
初始化数据集，它将被应用到 tpl 上以刷新组件的内容区域。
Component
disableCaching : Boolean
如果为true，则在图表url末端附加禁止缓存的字符参数，在Opera和IE下默认为true。
Chart
disabled : Boolean
当前组件处于无效状态时为true。 Read-only.
Component
disabledClass : String
当组件处于无效状态时添加到组件上的CSS类(默认为 'x-item-disabled')。
Component
expressInstall : Boolean
如果没有安装flash，设置为true将会提示用户进行安装。 注意，此参数会使用Ext.FlashComponent.EXPRESS_INSTALL_URL...
如果没有安装flash，设置为true将会提示用户进行安装。 注意，此参数会使用Ext.FlashComponent.EXPRESS_INSTALL_URL 此值应该设置为一个本地资源，默认为 false。
FlashComponent
extraStyle : Object
包含可能覆盖或者追加到默认样式的额外样式。默认为null，想要查看详细列表，请...
包含可能覆盖或者追加到默认样式的额外样式。默认为null，想要查看详细列表，请访问YUI图表站点 http://developer.yahoo.com/yui/charts/#basicstyles
如下列出一些常用样式:
  • padding - 图表内容边缘的空间，padding属性不会增加图表大小。
  • animationEnabled - 布尔值，用来指定标记动画是否启用，默认启用。
  • font - 用来定义图表字体样式的对象。默认为 { name: 'Tahoma', color: 0x444444, size: 11 }
    • name - 字体名称
    • color - 字体颜色 (十六进制编码, 如: "#ff0000", "ff0000" 或 0xff0000)
    • size - 以point（点）为单位的字体大小 (只能为整数, 如: 11)
    • bold - boolean
    • italic - boolean
    • underline - boolean
  • border - 定义图表边框的样式。图表会缩小尺寸以适应边框宽度。
    • color - 边框颜色 (十六进制编码, 如: "#ff0000", "ff0000" 或 0xff0000)
    • size - 以像素为单位的边框宽度 (只能为整数, 如: 1)
  • background - 定义图表背景样式的对象。
    • color - 边框颜色 (十六进制编码， 如: "#ff0000", "ff0000" 或 0xff0000)
    • image - 图片的URL，路径可以相对于当前页面，也可为绝对路径。
  • legend - 定义图例说明样式的对象
    • display - 图例说明的位置。 可选值为 "none", "left", "right", "top", 和 "bottom".
    • spacing - 图片的URL，路径可以相对于当前页面，也可为绝对路径。
    • padding, border, background, font - 见上面同名项。
  • dataTip - 定义数据提示样式的对象。 (tooltip).
    • padding, border, background, font - 见上面同名项。
  • xAxis 和 yAxis - 定义横纵坐标（x/y轴）样式的对象。
    • color - 见上面同名项。
    • size - 见上面同名项。
    • showLabels - boolean
    • labelRotation - 可选值范围从-90°到90°，默认为0。
  • majorGridLines 和 minorGridLines - 定义网格线条样式的对象。
    • color, size - 见上面同名项。
  • zeroGridLine - 定义零网格线样式的对象。
    • color, size - 见上面同名项。
  • majorTicks 和 minorTicks - 定义图表中刻度样式的对象。
    • color, size - 见上面同名项。
    • length - 从坐标轴上延伸的刻度的长度。
    • display - 刻度的显示方式，可选值为 "none", "inside", "outside", 和 "cross".
Chart
fieldLabel : String
紧靠此field显示的标签文本(默认值为 '')。注意...

紧靠此field显示的标签文本(默认值为 '')。

注意:只有在当前组件被渲染到一个使用FormLayout 的容器中时，此配置才有效。 (例如 Ext.form.FormPanel 或 指定 layout:'form')。

另请参见 hideLabel 、 Ext.layout.FormLayout和 fieldTpl。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Name'
    }]
});
Component
flashParams : Object
作为参数传递给flash对象的键值对集合。可能的参数可以在这里找到: http://kb2.adobe.com/cps/127/tn_12701.html默认为...
作为参数传递给flash对象的键值对集合。可能的参数可以在这里找到: http://kb2.adobe.com/cps/127/tn_12701.html默认为 undefined。
FlashComponent
flashVars : Object
作为flash变量传递给flash对象的键值对集合。 默认为 undefined。
FlashComponent
flashVersion : String
显示flash内容所需的flash版本。默认为 '9.0.115'。
FlashComponent
flex : Number
注: 这个配置只用于该组件被包含在一个已使用BoxLayout配置的Container中时...

注: 这个配置只用于该组件被包含在一个已使用BoxLayout配置的Container中时。通过计算每一个子组件的flex值所占全部flex值之和的比例，来决定子组件的宽(HBoxLayout)高(VBoxlayout)。 任何子项的 flex = 0 或 flex = undefined 将不被设置(初始值大小将不被改变)。

BoxComponent
height : Number
组件的高度(默认值为 auto)。注:如果想使用百分比的方式...
组件的高度(默认值为 auto)。注:如果想使用百分比的方式来设置值，请查看 Ext.Component.anchor。
BoxComponent
hidden : Boolean
如果当前组件处于隐藏状态，此值为true。Read-only。
Component
hideLabel : Boolean
true时完全隐藏label元素 ( label 和 separator)。 默认为 false。 默认情况下，即使你不指定...

true时完全隐藏label元素 ( label 和 separator)。 默认为 false。 默认情况下，即使你不指定 fieldLabel 它的空间仍然会被保留，这样这块区域会与其它确实拥有label的区域位于同一排。 讲此值设置为 true 将导致此区域不再保留此空间。

注意: 参见 clearCls 的注释。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield'
        hideLabel: true
    }]
});
Component
hideMode : String
组件如何隐藏，支持的值有： 'visibility' (css visibility), 'offsets' (位置偏移量为负值) 和...

组件如何隐藏，支持的值有： 'visibility' (css visibility), 'offsets' (位置偏移量为负值) 和 'display' (css display).

注意:一般首选默认值 'display'，因为当组件第一次显示的时候它们会自动进行布局 (隐藏的时候不会调整尺寸)。

Component
hideParent : Boolean
此值为true时，当调用hide/show方法时，将会hide和show组件的容器...
此值为true时，当调用hide/show方法时，将会hide和show组件的容器；false时将会 hide和show组件自身(默认为false)。例如，这可以用作window上隐藏按钮的一种 快捷操作，通过设置此按钮的hideParent:true，然后把它添加到window上。
Component
html : String/Object
一个HTML片段，或者一个 DomHelper 描述，用作layout元素的内容(默认为'')。...
一个HTML片段，或者一个 DomHelper 描述，用作layout元素的内容(默认为'')。 这个HTML内容在组件渲染之后才被添加，所以在 render 出发的时候，document中尚未包含此HTML。 但是这个内容将会在所有配置的 contentEl 之前被插入到body标签中。
Component
id : String
当前组件唯一的id(默认为auto-assigned id)...

当前组件唯一的id(默认为auto-assigned id)。 如果你需要在以后访问组件，而又没有一个有效的组件对象引用，那么你需要指定一个 id( 也就是，使用Ext. getCmp方法 )。

注意，此id也将被用作组件底层HTML标签的id，这些标签被渲染到页面中。 这将允许你编写基于id的CSS规则，以独立地描述指定的实例；并且，也可以通过 组件父标签的id选中子元素。

注意:为了避免与唯一的id 产生重复， 请参见 itemId 和 ref 。

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

Component
itemCls : String
注意: 只有在当前组件被渲染到一个使用FormLayout 布局的 容器中时此配置才有效...

注意: 只有在当前组件被渲染到一个使用FormLayout 布局的 容器中时此配置才有效。 (例如Ext.form.FormPanel 或者指定 layout:'form')。

一个附加的CSS类，应用到div上，包装当前field的表单元素。 如果提供了此参数， field级上的itemCls将会覆盖 container级上提供的 默认itemCls。 为itemCls指定的值将会被添加默认的 类('x-form-item')。

既然它被应用到项目的包装器上(参见 Ext.layout.FormLayout。 fieldTpl)， 它将允许你编写能应用到此field、label(如果有指定)、或者field内部任何其它元素的标准CSS规则。

注意: 参考 fieldLabel的注释。 .

示例用法:

// Apply a style to the field's label:
<style>
    .required .x-form-item-label {font-weight:bold;color:red;}
</style>

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Name',
        itemCls: 'required' //this label will be styled
    },{
        xtype: 'textfield',
        fieldLabel: 'Favorite Color'
    }]
});
Component
itemId : String
当没有可利用的对象引用时，itemId可以作为第二选择，用来获得一个组件的引用， 代替 ...

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

var c = new Ext.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'); // 与 Ext.getCmp()不同

p2 = p1.ownerCt.getComponent('p2'); // 通过兄弟对象获得引用

另请参见 id 和 ref 。

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

Component
labelSeparator : String
每个fieldLabel 文本后面现实的分隔符。 此属性可以在多个层次上进行配置...

每个fieldLabel 文本后面现实的分隔符。 此属性可以在多个层次上进行配置。优先顺序为：

  • field / component level
  • container level
  • layout level (默认为冒号 ':')
如不需要为当前field的label显示分隔符，指定一个空字符串''即可。

注意:参见 clearCls 的注释。

另请参见 hideLabel 和 Ext.layout.FormLayout。 fieldTpl。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    layoutConfig: {
        labelSeparator: '~'   // layout config has lowest priority (defaults to ':')
    },
    labelSeparator: '>>',     // config at container level
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Field 1',
        labelSeparator: '...' // field/component level config supersedes others
    },{
        xtype: 'textfield',
        fieldLabel: 'Field 2' // labelSeparator will be '='

    }]
});
Component
labelStyle : String
一个CSS样式描述字符串，它将直接应用到当前field的label上...

一个CSS样式描述字符串，它将直接应用到当前field的label上。 如果有设置，默认为容器的labelStyle值(例如 Ext.layout.FormLayout.labelStyle , 或者 '')。

注意:参见 clearCls 的注释。

另请参见 hideLabel 和 Ext.layout.FormLayout. fieldTpl。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Name',
        labelStyle: 'font-weight:bold;'
    }]
});
Component
listeners : Object
一个包含一个或多个事件处理器的配置对象，会在初始化的时候被添加到目标对象上...

一个包含一个或多个事件处理器的配置对象，会在初始化的时候被添加到目标对象上。 该配置对象应该是一个有效的监听器配置对象就像 addListener例子中指定的一样可一次附加多个处理器。

ExtJs Components上的DOM事件

一些 ExtJs Component 类导出时会选择一些DOM事件(例如 "click", "mouseover" 等等), 这通常只是在有额外的值可以被添加时发生。例如DataView类的 click事件会传递被点击的节点。也可以直接在Component的HTMLElementevent上访问DOM事件，但必需在Component被渲染后监听器才能添加到Element 上。可以按照以下步骤添加插件:

// 插件会用一个监听器配置对象进行配置。
//该组件会被添加到所有处理方法的参数列表上。
Ext.DomObserver = Ext.extend(Object, {
    constructor: function(config) {
        this.listeners = config.listeners ? config.listeners : config;
    },

    // 组件将自己传递进了插件的初始化方法里
    init: function(c) {
        var p, l = this.listeners;
        for (p in l) {
            if (Ext.isFunction(l[p])) {
                l[p] = this.createHandler(l[p], c);
            } else {
                l[p].fn = this.createHandler(l[p].fn, c);
            }
        }

        // 渲染后立即添加监听器到元素上
        c.render = c.render.createSequence(function() {
            var e = c.getEl();
            if (e) {
                e.on(l);
            }
        });
    },

    createHandler: function(fn, c) {
        return function(e) {
            fn.call(this, e, c);
        };
    }
});

var combo = new Ext.form.ComboBox({

    // 元素被点击后折叠
    plugins: [ new Ext.DomObserver({
        click: function(evt, comp) {
            comp.collapse();
        }
    })],
    store: myStore,
    typeAhead: true,
    mode: 'local',
    triggerAction: 'all'
});

Observable
margins : Object
注:此配置只用于该组件展现在一个使用BorderLayout...

注:此配置只用于该组件展现在一个使用BorderLayout 或 BoxLayout的两个子类之一作为布局的容器。

这个margins对象在该组件中的格式为：

{top: (top margin),right: (right margin),bottom: (bottom margin),left: (left margin)}

也可以是一个字符串，中间用空格分隔，margin值为数字。 把matches中每一个值的次序跟CSS中margin值的排列方式相对应：

  • 如果只有一个值，它适用于所有方面。
  • 如果有两个值，top和bottom的边框设置为第一个值，left和right设置为第二个值。
  • 如果有三个值，top设置为第一个值，left和right设置为第二个值，bottom设置为第三个值。
  • 如果有四个值，分别设置为top, right, bottom, left。

默认值:

{top:0, right:0, bottom:0, left:0}
BoxComponent
overCls : String
一个可选的额外的CSS类，它将在鼠标移过元素时被添加到组件上...
一个可选的额外的CSS类，它将在鼠标移过元素时被添加到组件上，鼠标移出时 删除。(默认为'')。此属性对于在组件上，或者它的任何使用标准CSS规则的孩子节点上， 添加定制的'active' 或者 'hover'样式非常有用。
Component
pageX : Number
如果该组件被包含在一个指定位置的容器中，这个值表示页面级的x坐标值（译者注：在有滚动条的情况下这个值很有用）。
BoxComponent
pageY : Number
如果该组件被包含在一个指定位置的容器中，这个值表示页面级的y坐标值（译者注：在有滚动条的情况下这个值很有用）。
BoxComponent
plugins : Object/Array
一个对象或者一个对象数组，为组件提供特殊的功能 ...
一个对象或者一个对象数组，为组件提供特殊的功能。 对一个合法的插件唯一的要求是它含有一个init()方法， 能接收一个Ext.Component型的参数。 当组件被创建时，如果有可用的插件，组件将会调用每个插件的init方法， 并将自身的引用作为方法参数传递给它。然后，每个插件就可以调用方法或者响应组件上的事件， 就像需要的那样提供自己的功能。
Component
ptype : String
需要创建配置的ptype。 当传递一个配置对象给构造函数时...
需要创建配置的ptype。 当传递一个配置对象给构造函数时，此配置选项不会被使用。 只有在使用懒初始化的时候此配置项才会被使用， 此时Plugin不是 通过一个完整的实例组件，而是通过一个Component配置指定的。 在渲染时，将会查找ptype以决定创建何种类型的Plugin。

如果你创建自己的Plugin，你可以通过 Ext.ComponentMgr.registerPlugin 对它们进行注册，以便能利用懒初始化和渲染机制。
Component
ref : String
一个路径描述，与组件的 ownerCt 相关，它描述了把当前组件的命名引用放置到哪个父容器中去。...

一个路径描述，与组件的 ownerCt 相关，它描述了把当前组件的命名引用放置到哪个父容器中去。

祖先的坐标路径可以通过'/'字符进行分隔。 例如，将一个Toolbar Button的引用放入 拥有此Toolbar的Panel中:

var myGrid = new Ext.grid.EditorGridPanel({
    title: 'My EditorGridPanel',
    store: myStore,
    colModel: myColModel,
    tbar: [{
        text: 'Save',
        handler: saveChanges,
        disabled: true,
        ref: '../saveButton'
    }],
    listeners: {
        afteredit: function() {
//          The button reference is in the GridPanel
            myGrid.saveButton.enable();
        }
    }
});

在上面的代码中，如果 ref 是 'saveButton' ，那么引用将会被放置到Toolbar中。 ref 中的每个'/' 都会从组件的 ownerCt 向上移动一级。

另请参见 added 和 removed 事件。

Component
region : String
注: 此配置只用于该组件展现在一个布局为BorderLayout的容器中...

注: 此配置只用于该组件展现在一个布局为BorderLayout的容器中(例如指定layout:'border')。

详见Ext.layout.BorderLayout。

BoxComponent
renderTo : Mixed
该值可以是一个节点的id、一个DOM节点或者一个已存在的元素...

该值可以是一个节点的id、一个DOM节点或者一个已存在的元素， 组件将会被渲染到其中。

  • 注意 :
      如果组件不是一个Container 的子项目时， 不要使用此选项。 渲染和管理它的子项目是一个Container 的layout manager的责任。
      当使用此配置项时，无需调用render()方法。

另请参见 render 。

Component
seriesStyles : Object
图表刷新后将要应用于各序列的样式。默认为 null.
Chart
stateEvents : Array
一个事件数组，当它们被触发时，组件需要保存自己的状态(默认值为 none)...

一个事件数组，当它们被触发时，组件需要保存自己的状态(默认值为 none)。 它们可以是任何该组件支持的事件类型，包括浏览器事件和 自定义事件(例如['click', 'customerchange'])。

对于保存和恢复组件状态的详细解释，参见 stateful

Component
stateId : String
为该组件指定的唯一的id值，它被用作管理组件状态的目的...
为该组件指定的唯一的id值，它被用作管理组件状态的目的。 (如果设定了id，默认值为组件自己的id，否则，如果组件使用自动生成的id，此值为null)。

对于保存和反解析组件状态的解释，参见 stateful 。

Component
stateful : Boolean
一个标志参数，它将引起组件在启动时尝试从一个保存的状态中恢复内部状态参数...

一个标志参数，它将引起组件在启动时尝试从一个保存的状态中恢复内部状态参数。 组件必须要么拥有一个 stateId 或者 id ，它们被分配给需要被管理的状态属性。 在跨页面加载时，不保证自动生成的id属性的稳定性， 并且，不能依赖此id来保存和恢复一个组件的相同状态。

为了保存状态的操作能够工作，状态管理器的提供者必须 被设置成一个Ext.state.Provider 的实现类，它覆盖了set 和get 方法，以便保存和恢复name/value对。 有一个内置的Ext.state.CookieProvider 可用。

为当前页面设置状态提供者:

Ext.state.Manager.setProvider(new Ext.state.CookieProvider({
    expires: new Date(new Date().getTime()+(1000*60*60*24*7)), //7 days from now
}));

当 stateEvents 配置项中其中之一的事件被触发时， 一个状态可保存的组件将试图保存其状态。

保存状态时，一个可保存状态的组件首先需要通过调用 getState 方法来序列化它的状态。 默认情况下，此函数什么事都不做。 开发者必须提供一个实现，返回一个hash对象，它描述了组件可恢复的状态。

getState方法产生的值将会传递给 Ext.state.Manager.set 方法，它使用配置的 Ext.state.Provider 来保存对象，以组件的 stateId 为key，或者，如果此值（指stateId）没有指定时， 使用它的 id 作为key。

在进行构造时，一个可保存状态的组件试图通过调用 Ext.state.Manager.get方法来 恢复它的状态，传递 stateId 或者，如果此值（指stateId）没有指定时， 使用它的 id 作为参数。

结果对象被传递给 applyState 。 applyState 的默认实现只是简单地把属性拷贝到对象中， 但是开发者可以覆盖此方法以支持更多行为。

通过向 beforestaterestore, staterestore, beforestatesave 和 statesave 事件上绑定监听器，你可以在保存和恢复状态时进行额外的处理。

Component
style : String
被添加到组件元素的特定样式。 必须是按照...
被添加到组件元素的特定样式。 必须是按照 Ext.Element.applyStyles 类指定格式的合法参数值。

new Ext.Panel({
    title: 'Some Title',
    renderTo: Ext.getBody(),
    width: 400, height: 300,
    layout: 'form',
    items: [{
        xtype: 'textarea',
        style: {
            width: '95%',
            marginBottom: '10px'
        }
    },
        new Ext.Button({
            text: 'Send',
            minWidth: '100',
            style: {
                marginBottom: '10px'
            }
        })
    ]
});
Component
tabTip : String
注: 这个配置只用于当该组件作为TabPanel的一个子项目时使用...

注: 这个配置只用于当该组件作为TabPanel的一个子项目时使用。

一个String类型的innerHTML(支持html标签)，当鼠标放在该选项上的时，显示一个tooltip。为了tips能够被渲染，Ext.QuickTips.init()必须被提前调用。
BoxComponent
tpl : Mixed
一个 Ext.Template , Ext.XTemplate 或者一个用来形成一个Ext.XTemplate的字符串数组...
一个 Ext.Template , Ext.XTemplate 或者一个用来形成一个Ext.XTemplate的字符串数组。 与 data 和 tplWriteMode 配置项协同使用。
Component
tplWriteMode : String
刷新组件的内容区域时使用的Ext.(X)Template方式。 默认为'overwrite' (参见 Ext.XTemplate.overwrite )。
刷新组件的内容区域时使用的Ext.(X)Template方式。 默认为'overwrite' (参见 Ext.XTemplate.overwrite )。
Component
url : String
需要包含在chart中的URL。默认为 undefined。
Chart
width : Number
组件的宽度(默认值为 auto)。注:如果想使用百分比的方式...
组件的宽度(默认值为 auto)。注:如果想使用百分比的方式来设置值，请查看 Ext.Component.anchor。
BoxComponent
wmode : String
flash对象的wmode。此参数可以用来控制层叠次序。默认为 'opaque'。
FlashComponent
x : Number
如果被包含在一个指定位置的容器中，这个值表示x(left)坐标值。
BoxComponent
xtype : String
需要创建配置的xtype。 当传递一个配置对象给构造函数时...
需要创建配置的xtype。 当传递一个配置对象给构造函数时，此配置选项不会被使用。 只有在使用懒初始化的时候此配置项才会被使用，此时容器的子项目不是 通过一个完整的实例组件，而是通过一个Component配置指定的。 在渲染时，将会查找xtype以决定创建何种类型的子组件。

预定义的xtype列表如下： here。

如果你继承Component创建你自己的组件，你需要使用Ext.ComponentMgr.registerType 对它们进行注册，以便利用懒初始化和渲染机制。
Component
y : Number
如果被包含在一个指定位置的容器中，这个值表示y(top)坐标值。
BoxComponent

公共属性

Property Defined By
CHART_URL : String
设置从哪里加载图表。应该设置为本地图表源（路径）。
Chart
EXPRESS_INSTALL_URL : String
如果不存在，为初始化flash设置的url。 此参数应该设置为一个本地资源。
FlashComponent
disabled : Boolean
当前组件处于无效状态时为true。 Read-only.
Component
el : Ext.Element
封装了当前组件的Ext.Element。 Read-only。通常情况下，这将是一个<DIV>元素，它由此类的...

封装了当前组件的Ext.Element。 Read-only。

通常情况下，这将是一个<DIV>元素，它由此类的 onRender方法创建，但是它可以通过使用 autoEl 配置项进行覆盖。

注意: 直到组件渲染完成此元素都将处于无效状态。

如需向当前组件的 DOM事件(而不是当前组件自己的Observable事件)添加监听器， 更多建议，参见 listeners 配置项，或者直接使用一个render监听器:

new Ext.Panel({
    title: 'The Clickable Panel',
    listeners: {
        render: function(p) {
            // Append the Panel to the click handler's argument list.
            p.getEl().on('click', handlePanelClick.createDelegate(null, [p], true));
        },
        single: true  // Remove the listener after first invocation
    }
});

另请参见 getEl

Component
hidden : Boolean
如果当前组件处于隐藏状态，此值为true。Read-only。
Component
initialConfig : Object
当前组件的初始化配置描述。 Read-only。
Component
ownerCt : Ext.Container
组件所属的Container (默认为undefined，当前组件被添加到一个容器中时此值被自动设置)...
组件所属的Container (默认为undefined，当前组件被添加到一个容器中时此值被自动设置)。 Read-only。

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

Component
refOwner : Ext.Container
如果当前组件是一个容器的孩子，并且是通过一个 ref 配置项被注册的，则此值为 ref 引用被插入到的祖先容器。
如果当前组件是一个容器的孩子，并且是通过一个 ref 配置项被注册的，则此值为 ref 引用被插入到的祖先容器。
Component
rendered : Boolean
如果当前组件已经被渲染了，此值为true。Read-only.
Component

公共方法

Method Defined By
PieChart ()
参数:
  • 无。
返回值:
  • void
PieChart
addClass ( string cls ) : Ext.Component
为组件底层的元素添加CSS样式。
为组件底层的元素添加CSS样式。
参数:
  • cls : string
    需要添加的CSS样式的class名称
返回值:
  • Ext.Component
    this
Component
addEvents( Object|String o, string Optional. ) : void
添加指定的事件到事件列表上，事件会被该Observable触发。
添加指定的事件到事件列表上，事件会被该Observable触发。
参数:
  • o : Object|String
    以事件名作为属性true作为值的对象 或者当多个事件名被分开的传递时则为第一个事件名。
  • Optional. : string
    事件名被分开的传递时则为事件名。 用法:
    this.addEvents('storeloaded', 'storecleared');
返回值:
  • void
Observable
addListener( String eventName, Function handler, [Object scope], [Object options] ) : void
给对象添加事件处理器。
给对象添加事件处理器。
参数:
  • eventName : String
    监听的事件名。
  • handler : Function
    事件调用的方法
  • scope : Object
    （可选）处理方法执行的作用域 (this的引用 reference)。 如果被忽略。默认为触发事件的对象。
  • options : Object
    （可选）包含处理器配置和属性的对象。 可能包含以下的属性:
    • scope : Object
      处理方法执行的作用域(this的引用) 。 如果被忽略。默认为触发事件的对象。
    • delay : Number
      在触发事件后延迟调用处理器的毫秒数。
    • single : Boolean
      如果为True则添加一个处理器来处理下一次的事件触发（仅一次），然后移除自己。
    • buffer : Number
      使得处理器延迟指定毫秒数后预定的运行在 一个Ext.util.DelayedTask中 。 如果事件在时间内再一次被触发，原始的处理器不会被调用，但是新的处理器会预定的在他的位置上。
    • target : Observable
      如果事件在目标的Observable上触发则仅仅调用处理器， 否则 事件会从子类的Observable上冒泡

    组合选项
    使用这些选项参数,可能会组合出不同类型的监听器：

    一个延迟的，一次性的监听器。

    myDataView.on('click', this.onClick, this, {
single: true,
delay: 100
});

    一次调用附加多个处理器
    该方法同样支持传递一个包含指定的多个处理器的属性的配置对象参数。

    myGridPanel.on({
'click' : {
    fn: this.onClick,
    scope: this,
    delay: 100
},
'mouseover' : {
    fn: this.onMouseOver,
    scope: this
},
'mouseout' : {
    fn: this.onMouseOut,
    scope: this
}
});

    或者一个简写的语法：

    myGridPanel.on({
'click' : this.onClick,
'mouseover' : this.onMouseOver,
'mouseout' : this.onMouseOut,
 scope: this
});
返回值:
  • void
Observable
applyToMarkup ( String/HTMLElement el ) : void
将此组件添加到已存在的有效的HTML标签中。 使用该方法时，无需再调用render()方法。
将此组件添加到已存在的有效的HTML标签中。 使用该方法时，无需再调用render()方法。
参数:
  • el : String/HTMLElement
返回值:
  • void
Component
bindStore ( Store store ) : void
改变图表绑定的数据集，并刷新。
改变图表绑定的数据集，并刷新。
参数:
  • store : Store
    绑定到图表的数据集合。
返回值:
  • void
Chart
cloneConfig ( Object overrides ) : Ext.Component
默认使用原先传递给当前实例的配置值克隆当前组件。
默认使用原先传递给当前实例的配置值克隆当前组件。
参数:
  • overrides : Object
    一个新的配置项，包含需要覆盖到克隆版本的所有属性。 可以传递一个id参数给此对象，否则将自动生成一个新的id以避免发生重复。
返回值:
  • Ext.Component
    当前组件的克隆副本
Component
destroy () : void
通过如下方法销毁对象：删除所有的事件监听器、将组件的元素从DOM树中删除...
通过如下方法销毁对象：删除所有的事件监听器、将组件的元素从DOM树中删除（如果可以）、 将组件从它的 Ext.Container（如果可用）中删除、 并且将它从Ext.ComponentMgr中 注销。 销毁操作一般由框架自动完成，一般情况下不需要直接调用该方法。
参数:
  • 无。
返回值:
  • void
Component
disable () : Ext.Component
将组件置为无效状态，并出发'disable'事件。
将组件置为无效状态，并出发'disable'事件。
参数:
  • 无。
返回值:
  • Ext.Component
    this
Component
enable () : Ext.Component
将组件置为有效状态并触发'enable'事件。
将组件置为有效状态并触发'enable'事件。
参数:
  • 无。
返回值:
  • Ext.Component
    this
Component
enableBubble( String/Array events ) :void
是否现在使得事件会被该Observable触发并调用 this.getBubbleTarget()方法在拥有者的继承树...

是否现在使得事件会被该Observable触发并调用 this.getBubbleTarget()方法在拥有者的继承树中冒泡。Observable的基础类中没有该方法的实现。

该方法一般被Ext.Components用来冒泡事件到拥有者的容器。参看Ext.Component.getBubbleTarget默认的实现 在Ext.Component中返回组件的直接拥有者。但是如果需要的是一个已知的目标，该方法可以被重写来更快的访问需求的目标。

例子:

Ext.override(Ext.form.Field, {
    // 添加方法到Field的initComponent上改变事件为冒泡
    initComponent : Ext.form.Field.prototype.initComponent.createSequence(function() {
        this.enableBubble('change');
    }),

    // 我们知道我们想让Field的事件冒泡到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() {
            // 如果样式被修改标题会变红。
            myForm.header.setStyle('color', 'red');
        }
    }
});
参数:
  • events : String/Array
    冒泡的事件名，或事件名数组
返回值:
  • void
Observable
findParentBy ( Function fn ) : Ext.Container
通过自定义的函数查找当前组件上层任何层次上的容器...
通过自定义的函数查找当前组件上层任何层次上的容器。 如果传递的函数返回true，容器对象将被返回。
参数:
  • fn : Function
    自定义的函数，使用如下参数调用(container,this component)。
返回值:
  • Ext.Container
    自定义函数返回true的第一个容器
Component
findParentByType ( String/Class xtype ) : Ext.Container
通过xtype或者class查找当前组件上层任何层次上的容器
通过xtype或者class查找当前组件上层任何层次上的容器
参数:
  • xtype : String/Class
    组件的xtype字符串，或者直接是组件的class
返回值:
  • Ext.Container
    符合指定xtype或者class的第一个容器
Component
fireEvent( String eventName, Object... args ) : Boolean
用传入的参数触发指定的事件 (减去事件名)。 一个事件可以被设置为冒泡 Obse...

用传入的参数触发指定的事件 (减去事件名)。

一个事件可以被设置为冒泡到Observable父类继承树(参看 Ext.Component.getBubbleTarget) 调用enableBubble实现。

参数:
  • eventName : String
    触发的事件名。
  • args : Object...
    传递给处理器的可变长度参数。
返回值:
  • Boolean
    如果有任何的处理器返回false则返回false，否则返回true。
Observable
focus ( [ Boolean selectText ], [ Boolean/Number delay ] ) : Ext.Component
尝试将当前组件设为焦点。
尝试将当前组件设为焦点。
参数:
  • selectText : Boolean
    (可选) 如果可用，同时选中组件内部的文本
  • delay : Boolean/Number
    (可选)将当前组件设置为焦点的延迟时间(设置为true等于0毫秒)
返回值:
  • Ext.Component
    this
Component
getBox ( [ Boolean local ] ) : Object
获取组件底层元素当前盒子模型的尺寸。（译者注：盒子模型是CSS术语，详细解释请自行搜索。）
获取组件底层元素当前盒子模型的尺寸。（译者注：盒子模型是CSS术语，详细解释请自行搜索。）
参数:
  • local : Boolean
    (可选)值为true时，组件的left值和top值将代替页面的XY被返回。(默认值为false)
返回值:
  • Object
    返回值的格式{x, y, width, height}
BoxComponent
getBubbleTarget () : Ext.Container
为Observable的fireEvent方法提供链接，它沿着继承结构进行冒泡操作。
为Observable的fireEvent方法提供链接，它沿着继承结构进行冒泡操作。
参数:
  • 无。
返回值:
  • Ext.Container
    拥有当前组件的容器。
Component
getEl () : Ext.Element
返回 Ext.Element ，它包装了当前组件。...

返回 Ext.Element ，它包装了当前组件。

通常情况下，这将是一个<DIV>元素，它是由该类的onRender方法创建的， 但是可以使用autoEl配置项 覆盖它。

注意: 此元素将会一直处于无效状态直到当前组件渲染完成。

如需向当前组件的 DOM事件(而不是当前组件自己的Observable事件)添加监听器， 更多建议，参见 listeners 配置项，或者直接使用一个render监听器:

new Ext.Panel({
    title: 'The Clickable Panel',
    listeners: {
        render: function(p) {
            // Append the Panel to the click handler's argument list.
            p.getEl().on('click', handlePanelClick.createDelegate(null, [p], true));
        },
        single: true  // Remove the listener after first invocation
    }
});
参数:
  • 无。
返回值:
  • Ext.Element
    包装当前组件的元素。
Component
getHeight () : Number
获取该组件的当前高度值。
获取该组件的当前高度值。
参数:
  • 无。
返回值:
  • Number
BoxComponent
getId () : String
返回当前组件的id，如果没有定义id，则自动生成并返回一个id:'ext-comp-'...
返回当前组件的 id 如果没有定义 id 则自动生成并返回一个 id

'ext-comp-' + (++Ext.Component.AUTO_ID)
参数:
  • 无。
返回值:
  • String
    id
Component
getItemId () : String
返回当前组件的 itemId 。 如果没有通过配置参数指定 itemId 那么，将会使用...
返回当前组件的 itemId 。 如果没有通过配置参数指定 itemId 那么，将会使用 getId 返回 id 。
参数:
  • 无。
返回值:
  • String
Component
getOuterSize () : Object
获取当前组件所在元素的尺寸大小，包括边缘的空白处。
获取当前组件所在元素的尺寸大小，包括边缘的空白处。
参数:
  • 无。
返回值:
  • Object
    一个包含元素大小的对象 {width: (element width + left/right margins), height: (element height + top/bottom margins)}
BoxComponent
getPosition ( [ Boolean local ] ) : Array
获取组件底层元素当前的XY位置。
获取组件底层元素当前的XY位置。
参数:
  • local : Boolean
    (可选)如果为true，将返回元素的left和top值，而不是相对于页面内的 XY。(默认值为 false)
返回值:
  • Array
    元素的XY位置值(例如：[100, 200])
BoxComponent
getResizeEl () : Ext.Element
返回该组件的最外层用来定义这些组件整体大小的Element...

返回该组件的最外层用来定义这些组件整体大小的Element对象。

通常用 getEl 方法将会返回相同的Element对象，但在有些情况下，组件可能有一些更多的封装了它的主要动态Element对象的Element对象。

例如ComboBox。它是封装在一个包含<input>元素的包装元素里(这将返回其 getEl方法和触发按钮的元素)。返回的元素为resizeEl。

参数:
  • 无。
返回值:
  • Ext.Element
    The Element which is to be resized by size managing layouts.
BoxComponent
getSize () : Object
获取组件底层元素当前的大小。
获取组件底层元素当前的大小。
参数:
  • 无。
返回值:
  • Object
    一个包含元素大小的对象{width: (element width), height: (element height)}
BoxComponent
getWidth () : Number
获取该组件的当前宽度值。
获取该组件的当前宽度值。
参数:
  • 无。
返回值:
  • Number
BoxComponent
getXType () : String
获取当前组件的xtype，它是用 Ext.ComponentMgr 注册的。 所有可用的xtype列表，参见...
获取当前组件的xtype，它是用 Ext.ComponentMgr 注册的。 所有可用的xtype列表，参见 Ext.Component 类头部。示例用法:

var t = new Ext.form.TextField();
alert(t.getXType());  // alerts 'textfield'
参数:
  • 无。
返回值:
  • String
    The xtype
Component
getXTypes () : String
返回此组件的xtype继承树，用字符'-'分隔。 所有可用的xtype值...

返回此组件的xtype继承树，用字符'-'分隔。 所有可用的xtype值，请参见Ext.Component 类的头部。

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

示例用法:

var t = new Ext.form.TextField();
alert(t.getXTypes());  // alerts 'component/box/field/textfield'
参数:
  • 无。
返回值:
  • String
    xtype层次字符串
Component
hasListener( String eventName ) : Boolean
检测对象是否包含指定事件的任何监听器
检测对象是否包含指定事件的任何监听器
参数:
  • eventName : String
    检测的事件名
返回值:
  • Boolean
    如果事件被监听则为true，否则为false
Observable
hide () : Ext.Component
隐藏当前组件。 监听 beforehide' 事件并且返回false 可以取消隐藏组件的操作。 在隐藏组件之后触发...
隐藏当前组件。 监听 beforehide' 事件并且返回false 可以取消隐藏组件的操作。 在隐藏组件之后触发 ' hide' 事件。 如果组件被配置成 hidden 那么此方法在内部被调用。
参数:
  • 无。
返回值:
  • Ext.Component
    this
Component
isVisible () : Boolean
如果当前组件可见，返回true。
如果当前组件可见，返回true。
参数:
  • 无。
返回值:
  • Boolean
    如果当前组件可见，返回true，其它返回false。
Component
isXType ( String xtype , [ Boolean shallow ] ) : Boolean
Tests whether or not this Component is of a specific xtype. This can test whether this Component is descended from th...

测试此组件是否是指定的xtype。此方法既可以测试是否是指定的xtype的某个子类， 或者它是否直接是指定的xtype类(shallow=true)。

如果使用你自己的子类，必须知道组件必须注册它的xtype值。

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

示例用法:

var t = new Ext.form.TextField();
var isText = t.isXType('textfield');        // true
var isBoxSubclass = t.isXType('box');       // true, descended from BoxComponent
var isBoxInstance = t.isXType('box', true); // false, not a direct BoxComponent instance
参数:
  • xtype : String
    需要为当前组件进行检测的xtype
  • shallow : Boolean
    (可选) 如果为false，检测组件是否是xtype继承树中的某个子类（默认是这种情况）， 如果为true，只检测组件是否是指定的xtype类型。
返回值:
  • Boolean
    如果当前组件是指定xtype的子类，返回true，其它返回flase。
Component
mon ( Observable|Element item , Object|String ename , Function fn , Object scope , Object opt ) : void
向任何Observable对象(或者元素)上添加监听器，监听器将会在组件...

向任何Observable对象(或者元素)上添加监听器，监听器将会在组件销毁时被自动删除。
用法：

myGridPanel.mon(myGridPanel.getSelectionModel(), 'selectionchange', handleSelectionChange, null, {buffer: 50});

or:

myGridPanel.mon(myGridPanel.getSelectionModel(), {
    selectionchange: handleSelectionChange,
    buffer: 50
});
参数:
  • item : Observable|Element
    需要添加listener/listeners的项目。
  • ename : Object|String
    事件名，或者一个包含事件名属性的对象。
  • fn : Function
    (可选) 如果 ename 参数是一个事件名，此参数为处理函数。
  • scope : Object
    (可选)如果 ename 参数是一个事件名称，此参数是作用域 ( this 引用)，监听函数将会在此作用域中被执行。
  • opt : Object
    (可选)如果 ename 参数是一个事件名称， 此参数是 addListener 配置项。
返回值:
  • void
Component
mun ( Observable|Element item , Object|String ename , Function fn , Object scope ) : void
删除通过mon 方法添加的监听器。
删除通过mon 方法添加的监听器。
参数:
  • item : Observable|Element
    需要删除listener/listeners的项目。
  • ename : Object|String
    事件名称，或者一个包含事件名称属性的对象。
  • fn : Function
    (可选)如果 ename 参数是一个事件名称，此参数是一个处理函数。
  • scope : Object
    (可选)如果 ename 参数是一个事件名称，此参数是作用域 ( this 引用)，监听函数将会在此作用域中被执行。
返回值:
  • void
Component
nextSibling () : Ext.Component
返回所属容器中的下一个组件
返回所属容器中的下一个组件
参数:
  • 无。
返回值:
  • Ext.Component
Component
on( String eventName, Function handler, [Object scope], [Object options] ) : void
给对象添加事件处理器 (addListener的简写形式)
给对象添加事件处理器 (addListener的简写形式。)
参数:
  • eventName : String
    监听的事件类型
  • handler : Function
    事件调用的方法
  • scope : Object
    （可选）处理方法执行时的作用域 (this 的引用)。 如果被忽略。默认为触发事件的对象。
  • options : Object
    可选 包含处理器配置的对象。
返回值:
  • void
Observable
previousSibling () : Ext.Component
返回所属容器中的前一个组件
返回所属容器中的前一个组件
参数:
  • 无。
返回值:
  • Ext.Component
Component
purgeListeners() : void
移除对象上所有的监听器
移除对象上所有的监听器
参数:
  • 无。
返回值:
  • void
Observable
relayEvents( Object o, Array events ) : void
从指定的Observable上传递选择的事件就好像被当前对象触发一样。
从指定的Observable上传递选择的事件就好像被当前对象触发一样。
参数:
  • o : Object
    该Observable上的事件被当前对象传递。
  • events : Array
    传递的数组名。
返回值:
  • void
Observable
removeClass ( string cls ) : Ext.Component
从组件底层的元素上删除一个CSS类。
从组件底层的元素上删除一个CSS类。
参数:
  • cls : string
    需要移除的CSS类名
返回值:
  • Ext.Component
    this
Component
removeListener( String eventName, Function handler, [Object scope] ) : void
删除一个事件处理器。
删除一个事件处理器。
参数:
  • eventName : String
    处理器关联的事件类型。
  • handler : Function
    移除的处理器。 这应该是传递到addListener里的方法的引用。
  • scope : Object
    （可选）处理器指定的初始作用域。
返回值:
  • void
Observable
render ( [ Element/HTMLElement/String container ], [ String/Number position ] ) : void
在传递进来的HTML元素中渲染当前组件。...

在传递进来的HTML元素中渲染当前组件。

如果你正在使用一个Container 对象放置当前组件，那么请不要使用render方法。

当容器第一次被渲染时，它的子组件将会被容器的 layout 管理器渲染。

某些布局管理器允许动态添加子组件。它们包括 Ext.layout.CardLayout, Ext.layout.AnchorLayout, Ext.layout.FormLayout, Ext.layout.TableLayout。

当一个新的子组件被添加时，如果容器已经被渲染了， 你可能需要调用容器的 doLayout 方法来刷新视图，它将导致所有没有被渲染的子组件进行渲染操作。 此操作是必须的，这样你可以添加多个子组件而只刷新一次layout。

当创建复杂的UI时，非常重要的一点是，请记住调整子项目的尺寸和位置是容器的 layout 管理器的职责。 如果你希望子项目的尺寸对用户交互作出反应， 你必须为容器配置一个布局管理器，它将创建和管理你心里想要的那种布局。

忽略容器的layout 配置意味着将会使用一个基本的布局管理器，它除了按次序把子组件 渲染到容器中之外什么事情都不做。 这种情况下，任何尺寸和位置的调整操作都不会发生。

参数:
  • container : Element/HTMLElement/String
    (可选) 需要在其中渲染当前组件的元素。 如果它是从一个已存在的标签中创建的，此参数应该被忽略。
  • position : String/Number
    (可选) 容器中的一个元素ID或者一个DOM节点索引， 当前组件将会被插入到它前面 (默认append到容器的尾部)
返回值:
  • void
Component
resumeEvents() : void
重新开始触发事件。(参见suspendEvents) 如果事件以queueSuspended参数被挂起，则在事件被挂起时 ...
重新开始触发事件。(参见 suspendEvents) 如果事件以queueSuspended 参数被挂起，则在事件被挂起时触发的事件会被传递到所有的监听器上
参数:
  • 无。
返回值:
  • void
Observable
setAutoScroll ( Boolean scroll ) : Ext.BoxComponent
设置该组件内容溢出时是否自动显示滚动条。
设置该组件内容溢出时是否自动显示滚动条。
参数:
  • scroll : Boolean
    值为true的话组件自动显示滚动条。
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setDisabled ( Boolean disabled ) : Ext.Component
工具函数，使用布尔值设置有效/无效(disabled/enabled )。
工具函数，使用布尔值设置有效/无效(disabled/enabled )。
参数:
  • disabled : Boolean
返回值:
  • Ext.Component
    this
Component
setHeight ( Mixed height ) : Ext.BoxComponent
设置此组件的高度。该方法将触发resize事件。
设置此组件的高度。该方法将触发resize事件。
参数:
  • height : Mixed
    The new height to set.
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setPagePosition ( Number x , Number y ) : Ext.BoxComponent
设置组件在页面中的XY位置。 如果需要设置left和top值 ，请使用...
设置组件在页面中的XY位置。 如果需要设置left和top值 ，请使用setPosition方法。 该方法触发move事件。
参数:
  • x : Number
    The new x position
  • y : Number
    The new y position
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setPosition ( Number left , Number top ) : Ext.BoxComponent
设置组件的left和top值。设置组件的页面XY值，请使用setPagePosition方法。该方法触发...
设置组件的left和top值。设置组件的页面XY值，请使用setPagePosition方法。该方法触发move事件。
参数:
  • left : Number
    The new left
  • top : Number
    The new top
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setSeriesStyles ( styles {Array} ) : void
为图表中所有序列设置样式。
为图表中所有序列设置样式。
参数:
  • {Array} : styles
    为列表中所有序列样式进行初始化。
返回值:
  • void
Chart
setSize ( Mixed width , Mixed height ) : Ext.BoxComponent
设置BoxComponent的宽度和高度。 此方法触发resize事件...
设置BoxComponent的宽度和高度。 此方法触发resize事件。此方法可以接收单独的width或者height值作为参数， 或者你可以传递像这样的一个size对象： {width:10, height:20} 。
参数:
  • width : Mixed
    设置的新的width值。这可以是：
    • 一个Number类型指定Element新的宽度 Ext.Element.defaultUnit(默认为像素 :'px')。
    • 一个String类型用于设置width的CSS样式。
    • 一个size对象格式为 {width: widthValue, height: heightValue} 。
    • 值为 undefined 时，保留原来的width不变。
  • height : Mixed
    设置的新的height值(如果第一个参数传递了一个size对象，此参数没有必要传递)。这可以是：
    • 一个Number类型指定Element新的高度 Ext.Element.defaultUnit(默认为像素 :'px')。
    • 一个String类型用于设置height的CSS样式。也有可能不会被使用到。
    • 值为 undefined 时，保留原来的height不变。
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setStyle ( name {String} , value {Object} ) : void
为图表实例设置单一样式值。
为图表实例设置单一样式值。
参数:
  • {String} : name
    将要改变的图表样式名称。
  • {Object} : value
    图表样式的新值。
返回值:
  • void
Chart
setStyles ( styles {Object} ) : void
重置图表实例上的所有样式。
Resets all styles on the Chart instance.
参数:
  • {Object} : styles
    Initializer for all Chart styles.
返回值:
  • void
Chart
setVisible ( Boolean visible ) : Ext.Component
工具方法，通过使用布尔值隐藏或者显示当前组件。
工具方法，通过使用布尔值隐藏或者显示当前组件。
参数:
  • visible : Boolean
    true时显示，false时隐藏
返回值:
  • Ext.Component
    this
Component
setWidth ( Mixed width ) : Ext.BoxComponent
设置组件的宽度。 此方法触发resize事件。
设置组件的宽度。 此方法触发resize事件。
参数:
  • width : Mixed
    The new width to set.
返回值:
  • Ext.BoxComponent
    this
BoxComponent
show () : Ext.Component
显示当前组件。监听' beforeshow' 事件，返回 false 取消显示组件...
显示当前组件。监听' beforeshow' 事件，返回 false 取消显示组件。在显示组件之后触发' show' 事件。
参数:
  • 无。
返回值:
  • Ext.Component
    this
Component
suspendEvents( Boolean queueSuspended ) : void
暂停触发所有的事件。 (参看resumeEvents)
暂停触发所有的事件。（参看 resumeEvents)
参数:
  • queueSuspended : Boolean
    如果传递为true则排列好暂停的事件使得在调用 resumeEvents 后再触发它们，而不是抛弃所有暂停的事件。
返回值:
  • void
Observable
syncSize () : Ext.BoxComponent
强制组件的大小按照此组件底层元素当前的高度和宽度计算。
强制组件的大小按照此组件底层元素当前的高度和宽度计算。
参数:
  • 无。
返回值:
  • Ext.BoxComponent
    this
BoxComponent
un( String eventName, Function handler, [Object scope] ) : void
删除一个事件处理器(removeListener方法的简写形式)
删除一个事件处理器(removeListener方法的简写形式。)
参数:
  • eventName : String
    处理器关联的事件类型
  • handler : Function
    被删除的处理器 这应该是传入 addListener 中的方法的引用。
  • scope : Object
    （可选）为处理器指定的初始作用域。
返回值:
  • void
Observable
update ( Mixed htmlOrData , [ Boolean loadScripts ], [ Function callback ] ) : void
刷新组件的内部区域。
刷新组件的内部区域。
参数:
  • htmlOrData : Mixed
    如果已经通过tpl为当前组件配置了一个模板，那么 将会使用此参数来装配模板。 如果没有为当前组件配置模板，组件的内容区域将会通过Ext.Element 进行刷新。
  • loadScripts : Boolean
    (可选)只用在使用html配置时此参数才合法。默认为false。
  • callback : Function
    (可选)只用在使用html配置时此参数才合法。 当脚本加载完成时回调函数才被执行。
返回值:
  • void
Component
updateBox ( Object box ) : Ext.BoxComponent
设置此组件底层元素的盒子模型尺寸。(译者注：盒子模型是CSS术语，详细资料请自行搜索。)
设置此组件底层元素的盒子模型尺寸。(译者注：盒子模型是CSS术语，详细资料请自行搜索。)
参数:
  • box : Object
    一个格式为{x, y, width, height}的对象
返回值:
  • Ext.BoxComponent
    this
BoxComponent

公共事件

Event Defined By
added : ( Ext.Component this , Ext.Container ownerCt , number index )
当一个组件被添加到一个Ext.Container时触发
当一个组件被添加到一个Ext.Container时触发
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • ownerCt : Ext.Container
    用于组件的容器
  • index : number
    添加组件的位置
Component
afterrender : ( Ext.Component this )
在组件渲染完成之后触发...

在组件渲染完成之后触发。

afterrender事件在当前组件被rendered 结束之后、在为组件定义的所有afterRender方法执行之后 触发，并且，如果有stateful， 也在状态被保存之后才触发。

监听器将会以如下参数格式被调用:
  • this : Ext.Component
Component
beforedestroy : ( Ext.Component this )
在组件 destroyed 之前触发。 在事件监听器中返回false以停止 destroy 操作。
在组件 destroyed 之前触发。 在事件监听器中返回false以停止 destroy 操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforehide : ( Ext.Component this )
在调用hide方法隐藏组件之前触发。 在事件监听器中返回false可以停止隐藏操作。
在调用hide方法隐藏组件之前触发。 在事件监听器中返回false可以停止隐藏操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforerefresh : ( Chart this )
在图表数据刷新前触发。如果beforerefresh处理函数返回false则refresh动作...
在图表数据刷新前触发。如果beforerefresh处理函数返回false则 refresh 动作将被取消。
监听函数被调用时将传递如下参数：
  • this : Chart
Chart
beforerender : ( Ext.Component this )
在组件被rendered 之前触发。 在事件监听器中返回false可以停止render 操作。
在组件被rendered 之前触发。 在事件监听器中返回false可以停止render 操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforeshow : ( Ext.Component this )
在调用show()方法现实组件之前触发。 事件处理函数返回false可以停止show。
在调用show 方法现实组件之前触发。 事件处理函数返回false可以停止show。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforestaterestore : ( Ext.Component this , Object state )
在组件状态恢复之前触发。返回false停止恢复状态操作。
在组件状态恢复之前触发。返回false停止恢复状态操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    StateProvider返回的状态哈希值。 如果没有禁止此事件，那么状态对象会被传递给applyState。 默认情况下，这样简单地把属性值拷贝到当前组件中。 可以覆盖此方法以提供自定的状态恢复操作。
Component
beforestatesave : ( Ext.Component this , Object state )
在组件状态被保存到配置的状态提供者之前触发。 返回false可以停止保存。
在组件状态被保存到配置的状态提供者之前触发。 返回false可以停止保存。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    状态值哈希。 这由在组件上调用getState() 方法决定。 此方法必须由开发者提供，返回是否需要对状态进行描述，默认情况下， Ext.Component有一个空实现。
Component
destroy : ( Ext.Component this )
在组件被销毁之后触发。
在组件被destroyed之后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
disable : ( Ext.Component this )
在组件被设置为无效状态后触发。
在组件被设置为无效状态后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
enable : ( Ext.Component this )
当组件被设置为有效(enabled)之后触发。
当组件被设置为有效(enabled)之后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
hide : ( Ext.Component this )
在组件被隐藏之后触发。 当调用hide 方法隐藏组件之后触发。
在组件被隐藏之后触发。 当调用hide 方法隐藏组件之后触发。
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
initialize : ( Chart this )
监听器将会以如下参数格式被调用:
  • this : Chart
FlashComponent
move : ( Ext.Component this , Number x , Number y )
在组件移动之后触发。
在组件移动之后触发。
监听器将会用如下的参数格式来调用:
  • this : Ext.Component
  • x : Number
    The new x position
  • y : Number
    The new y position
BoxComponent
refresh : ( Chart this )
图表数据刷新后触发。
图表数据刷新后触发。
监听函数被调用时将传递如下参数：
  • this : Chart
Chart
removed : ( Ext.Component this , Ext.Container ownerCt )
当一个组件被从Ext.Container容器中删除时触发
当一个组件被从Ext.Container容器中删除时触发
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • ownerCt : Ext.Container
    持有组件的容器
Component
render : ( Ext.Component this )
在组件被渲染之后触发。
在组件被 rendered(渲染) 之后触发。
监听器将以如下的参数格式被调用:
  • this : Ext.Component
Component
resize : ( Ext.Component this , Number adjWidth , Number adjHeight , Number rawWidth , Number rawHeight )
在组件被调整大小之后触发。
在组件被调整大小之后触发。
监听器将以如下的参数格式被调用:
  • this : Ext.Component
  • adjWidth : Number
    这是width调整后的值
  • adjHeight : Number
    这是height调整后的值
  • rawWidth : Number
    这是width原来的值
  • rawHeight : Number
    这是height原来的值
BoxComponent
show : ( Ext.Component this )
在调用show 方法显示组件之后触发。
在调用show 方法显示组件之后触发。
监听器将会用如下的参数格式被调用:
  • this : Ext.Component
Component
staterestore : ( Ext.Component this , Object state )
组件状态被存储之后触发。
组件状态被存储之后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    StateProvider返回的状态哈希值。 如果没有禁止此事件，那么状态对象会被传递给applyState。 默认情况下，这样简单地把属性值拷贝到当前组件中。 可以覆盖此方法以提供自定的状态恢复操作。
Component
statesave : ( Ext.Component this , Object state )
在组件状态被保存到所配置的状态提供者之后触发。
在组件状态被保存到所配置的状态提供者之后触发。
监听器将会用如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    状态值hash。 这是由在足见上调用getState() 方法决定的。 开发者必须提供此方法以返回是否需要恢复状态，默认情况下， Ext.Component有一个空实现。
Component


Series
    PieSeries

Class Ext.chart.PieSeries

包: | Ext.chart
定义类的文件: | Chart.js
类: | PieSeries
继承自: | Series
图表控件中的PieSeries（饼状序列）类。

公共属性

Property |  | Defined By
 | displayName : String 序列名。 | Series
 | type : String 序列类型。 | Series

公共方法

该类没有公共方法。

公共事件

该类没有公共事件。


Class Ext.chart.Series

包: | Ext.chart
定义类的文件: | Chart.js
类: | Series
子类: | CartesianSeries, PieSeries
继承自: | Object
图表（chart）控件中的序列（Series）类。

公共属性

Property |  | Defined By
 | displayName : String 序列名。 | Series
 | type : String 序列类型。 | Series

公共方法

该类没有公共方法。

公共事件

该类没有公共事件。


Observable
    Component
      BoxComponent
        FlashComponent
          Chart
            CartesianChart
              StackedBarChart

Class Ext.chart.StackedBarChart

包: | Ext.chart
定义类的文件: | Chart.js
类: | StackedBarChart
继承自: | CartesianChart

配置项

Config Options Defined By
allowDomMove : Boolean
在渲染时组件是否可以移动Dom节点(默认为true)。
Component
anchor : String
注: 这个配置只用于该组件被包含在一个已使用AnchorLayout...

注: 这个配置只用于该组件被包含在一个已使用 AnchorLayout (或者其子类)配置的Container时。 基于布局管理器，例如：

  • Ext.form.FormPanel
  • 指定 layout: 'anchor' // or 'form', or 'absolute'

参见 Ext.layout.AnchorLayout. anchor 。

BoxComponent
applyTo : Mixed
指定一个元素的id、一个DOM元素或者一个已经存在并被渲染到DIV中的元素，此DIV已经被...

指定一个元素的id、一个DOM元素或者一个已经存在并被渲染到DIV中的元素，此DIV已经被 渲染到document中，并且为当前组件指定了一些结构化的标签。

  • 描述 :
      当使用了 applyTo， 在主元素中也可以用id或者CSS类名来指定组件的托管部分， 并且，如果可以的话，创建的组件可能也会试图在那个标签中创建它的子组件。
  • 注意 :
      当使用此配置项时，无需调用render()方法。
      如果指定了applyTo属性，任何传递给 renderTo 的值都会被忽略，并且目标元素的父节点将会自动被用作组件的容器。
Component
autoEl : Mixed
一个表签名或者一个 DomHelper 描述，用来创建 Element ，它将封装当前组件...

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

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

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

{
    xtype: 'box',
    autoEl: {
        tag: 'img',
        src: 'http://www.example.com/example.jpg'

    }
}, {
    xtype: 'box',
    autoEl: {
        tag: 'blockquote',
        html: 'autoEl is cool!'
    }
}, {
    xtype: 'container',
    autoEl: 'ul',
    cls: 'ux-unordered-list',
    items: {
        xtype: 'box',
        autoEl: 'li',
        html: 'First list item'
    }
}
Component
autoHeight : Boolean
如果值为true，height配置项为'auto'，否则值为false的话使用固定的高度...

如果值为true，height配置项为'auto'，否则值为false的话使用固定的高度， 或者可以由其父类容器 layout manager来控制。(默认值为 false)。

注: 虽然很多组件继承了这个配置选项，但不是所有这些组件的自适应高度配置都会像期望的那样起作用。 设置autoHeight：值为true时，浏览器将根据元素的内容自动设置高度，这将意味着Ext不会去管理高度。

如果是由浏览器来管理高度，需要注意的是，通过浏览器进行调整的结构组件内不能被发现， 因此宽度的变化可能导致需要进行同步处理元素的高度。 例如：

var w = new Ext.Window({
    title: 'Window',
    width: 600,
    autoHeight: true,
    items: {
        title: 'Collapse Me',
        height: 400,
        collapsible: true,
        border: false,
        listeners: {
            beforecollapse: function() {
                w.el.shadow.hide();
            },
            beforeexpand: function() {
                w.el.shadow.hide();
            },
            collapse: function() {
                w.syncShadow();
            },
            expand: function() {
                w.syncShadow();
            }
        }
    }
}).show();
BoxComponent
autoScroll : Boolean
如果值为true，将会在该元素上使用overflow:'auto'配置，并且在必要的时候...
如果值为true，将会在该元素上使用overflow:'auto'配置，并且在必要的时候自动显示滚动条，否则，溢出部分的组件都会被切除(默认值为 false)。
BoxComponent
autoShow : Boolean
如果组件需要检测隐藏CSS属性(如 'x-hidden' 或者 'x-hide-display')并且在渲染时删除...
如果组件需要检测隐藏CSS属性(如 'x-hidden' 或者 'x-hide-display')并且在渲染时删除它们 (默认为false)，设置此值为true。
Component
autoWidth : Boolean
如果为true，使用width:'auto'配置，否则使用固定的宽度...

如果为true，使用width:'auto'配置，否则使用固定的宽度，或者可以由其父类容器的layout manager来控制。(默认值为 false)。

注: 虽然很多组件继承了这个配置选项，但不是所有这些组件的自适应宽度配置都会像期望的那样起作用。 设置autoWidth：值为true时，浏览器将根据元素的内容自动设置宽度，这将意味着Ext不会去管理宽度。

如果是由浏览器来管理宽度，需要注意的是，通过浏览器进行调整的结构组件内不能被发现，因此宽度的变化可能导致需要进行同步处理元素的宽度。 例如，在这个元素的目标是：

<div id='grid-container' style='margin-left:25%;width:50%'></div>
当浏览器窗口改变时，渲染后的Panel必须监听浏览器窗口大小的变化，以便通知子项，浏览器改变了其宽度：

var myPanel = new Ext.Panel({
    renderTo: 'grid-container',
    monitorResize: true, // relay on browser resize
    title: 'Panel',
    height: 400,
    autoWidth: true,
    layout: 'hbox',
    layoutConfig: {
        align: 'stretch'
    },
    defaults: {
        flex: 1
    },
    items: [{
        title: 'Box 1',
    }, {
        title: 'Box 2'
    }, {
        title: 'Box 3'
    }],
});
BoxComponent
backgroundColor : String
chart的背景颜色。默认为 '#ffffff'。
FlashComponent
boxMaxHeight : Number
设置组件的最大高度值...

设置组件的最大高度值。

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

BoxComponent
boxMaxWidth : Number
设置组件的最大宽度值...

设置组件的最大宽度值。

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

BoxComponent
boxMinHeight : Number
设置组件的最小高度值...

设置组件的最小高度值。

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

BoxComponent
boxMinWidth : Number
设置组件的最小宽度值...

设置组件的最小宽度值。

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

BoxComponent
bubbleEvents : Array
一个事件数组，当这些事件被触发时，将会被冒泡到所有父容器中。参见....

一个事件数组，当这些事件被触发时，将会被冒泡到所有父容器中。参见 Ext.util.Observable.enableBubble。 默认为 []。

Component
chartStyle : Object
设置图表样式。由于本身包含默认样式，所以修改这个属性将会覆盖内置...
设置图表样式。由于本身包含默认样式，所以修改这个属性将会覆盖内置样式。 使用 extraStyle 来为默认样式附加自定义样式。
Chart
clearCls : String
应用到特殊的clearing div的CSS类， 这个clearing div直接渲染到每个form field的包装器后面...

应用到特殊的clearing div的CSS类， 这个clearing div直接渲染到每个form field的包装器后面，以提供 清除field的功能(默认为 'x-form-clear-left')。

注意: 只有在当前组件被渲染到一个使用FormLayout 布局(例如 Ext.form.FormPanel 或者指定 layout:'form')的 容器中、或者是指定了一个fieldLabel 、或者指定isFormField=true 时此配置才有效。

另请参见 Ext.layout.FormLayout. fieldTpl。

Component
cls : String
一个可选的额外CSS类，它将被添加到当前组件的元素上(默认为'')...
一个可选的额外CSS类，它将被添加到当前组件的元素上(默认为'')。 此属性对于在组件上，或者它的任何使用标准CSS规则的孩子节点上， 添加定制的样式非常有用。
Component
contentEl : String
(可选)指定一个已存在的HTML元素，或者一个已存在HTML元素的...

(可选)指定一个已存在的HTML元素，或者一个已存在HTML元素的 id ，它们将被用作当前组件的内容。

  • 描述 :
    此配置选项被用来将一个已存在的HTML元素 插入到一个新组件(在组件渲染之后它简单地移动DOM元素) 的layout元素中，使它成为该组件的内容。
  • 注意 :
    指定的HTML元素将被append到组件的layout元素中， 在所有配置的 HTML 被插入之后， 并且，这样的话，在render事件 被触发时，document中将不再包含此元素。
    指定的HTML元素将不会参与组件所有可能使用的 layout 过程(译者注：指这些HTML元素 不会参与布局操作)。 它仅是HTML而已。布局操作实在孩子 items 上进行的。
    添加 x-hidden 或者 x-hide-display CSS类，以防在内容渲染到panel时发生闪烁。
Component
ctCls : String
一个可选的外部CSS样式，添加到这个组件的容器(默认值为 '')。 这个方法对于使用标准的CSS规则...

一个可选的外部CSS样式，添加到这个组件的容器(默认值为 '')。 这个方法对于使用标准的CSS规则，为组件或它的任何一个子组件添加特定的样式非常有用。 参见 Ext.layout.ContainerLayout和 extraCls 。

注意: ctCls 默认为 ''期望如下的类，它们将指定一个默认值:

  • Box Layout : 'x-box-layout-ct'
使用一个额外的CSS类配置以上的Class，它是append到默认对象上的。例如， 对于BoxLayout (Hbox and Vbox):
                                ctCls: 'x-box-layout-ct custom-class'

Component
data : Mixed
初始化数据集，它将被应用到 tpl 上以刷新组件的内容区域。
Component
disableCaching : Boolean
如果为true，则在图表url末端附加禁止缓存的字符参数，在Opera和IE下默认为true。
Chart
disabled : Boolean
当前组件处于无效状态时为true。 Read-only.
Component
disabledClass : String
当组件处于无效状态时添加到组件上的CSS类(默认为 'x-item-disabled')。
Component
expressInstall : Boolean
如果没有安装flash，设置为true将会提示用户进行安装。 注意，此参数会使用Ext.FlashComponent.EXPRESS_INSTALL_URL...
如果没有安装flash，设置为true将会提示用户进行安装。 注意，此参数会使用Ext.FlashComponent.EXPRESS_INSTALL_URL 此值应该设置为一个本地资源，默认为 false。
FlashComponent
extraStyle : Object
包含可能覆盖或者追加到默认样式的额外样式。默认为null，想要查看详细列表，请...
包含可能覆盖或者追加到默认样式的额外样式。默认为null，想要查看详细列表，请访问YUI图表站点 http://developer.yahoo.com/yui/charts/#basicstyles
如下列出一些常用样式:
  • padding - 图表内容边缘的空间，padding属性不会增加图表大小。
  • animationEnabled - 布尔值，用来指定标记动画是否启用，默认启用。
  • font - 用来定义图表字体样式的对象。默认为 { name: 'Tahoma', color: 0x444444, size: 11 }
    • name - 字体名称
    • color - 字体颜色 (十六进制编码, 如: "#ff0000", "ff0000" 或 0xff0000)
    • size - 以point（点）为单位的字体大小 (只能为整数, 如: 11)
    • bold - boolean
    • italic - boolean
    • underline - boolean
  • border - 定义图表边框的样式。图表会缩小尺寸以适应边框宽度。
    • color - 边框颜色 (十六进制编码, 如: "#ff0000", "ff0000" 或 0xff0000)
    • size - 以像素为单位的边框宽度 (只能为整数, 如: 1)
  • background - 定义图表背景样式的对象。
    • color - 边框颜色 (十六进制编码， 如: "#ff0000", "ff0000" 或 0xff0000)
    • image - 图片的URL，路径可以相对于当前页面，也可为绝对路径。
  • legend - 定义图例说明样式的对象
    • display - 图例说明的位置。 可选值为 "none", "left", "right", "top", 和 "bottom".
    • spacing - 图片的URL，路径可以相对于当前页面，也可为绝对路径。
    • padding, border, background, font - 见上面同名项。
  • dataTip - 定义数据提示样式的对象。 (tooltip).
    • padding, border, background, font - 见上面同名项。
  • xAxis 和 yAxis - 定义横纵坐标（x/y轴）样式的对象。
    • color - 见上面同名项。
    • size - 见上面同名项。
    • showLabels - boolean
    • labelRotation - 可选值范围从-90°到90°，默认为0。
  • majorGridLines 和 minorGridLines - 定义网格线条样式的对象。
    • color, size - 见上面同名项。
  • zeroGridLine - 定义零网格线样式的对象。
    • color, size - 见上面同名项。
  • majorTicks 和 minorTicks - 定义图表中刻度样式的对象。
    • color, size - 见上面同名项。
    • length - 从坐标轴上延伸的刻度的长度。
    • display - 刻度的显示方式，可选值为 "none", "inside", "outside", 和 "cross".
Chart
fieldLabel : String
紧靠此field显示的标签文本(默认值为 '')。注意...

紧靠此field显示的标签文本(默认值为 '')。

注意:只有在当前组件被渲染到一个使用FormLayout 的容器中时，此配置才有效。 (例如 Ext.form.FormPanel 或 指定 layout:'form')。

另请参见 hideLabel 、 Ext.layout.FormLayout和 fieldTpl。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Name'
    }]
});
Component
flashParams : Object
作为参数传递给flash对象的键值对集合。可能的参数可以在这里找到: http://kb2.adobe.com/cps/127/tn_12701.html默认为...
作为参数传递给flash对象的键值对集合。可能的参数可以在这里找到: http://kb2.adobe.com/cps/127/tn_12701.html默认为 undefined。
FlashComponent
flashVars : Object
作为flash变量传递给flash对象的键值对集合。 默认为 undefined。
FlashComponent
flashVersion : String
显示flash内容所需的flash版本。默认为 '9.0.115'。
FlashComponent
flex : Number
注: 这个配置只用于该组件被包含在一个已使用BoxLayout配置的Container中时...

注: 这个配置只用于该组件被包含在一个已使用BoxLayout配置的Container中时。通过计算每一个子组件的flex值所占全部flex值之和的比例，来决定子组件的宽(HBoxLayout)高(VBoxlayout)。 任何子项的 flex = 0 或 flex = undefined 将不被设置(初始值大小将不被改变)。

BoxComponent
height : Number
组件的高度(默认值为 auto)。注:如果想使用百分比的方式...
组件的高度(默认值为 auto)。注:如果想使用百分比的方式来设置值，请查看 Ext.Component.anchor。
BoxComponent
hidden : Boolean
如果当前组件处于隐藏状态，此值为true。Read-only。
Component
hideLabel : Boolean
true时完全隐藏label元素 ( label 和 separator)。 默认为 false。 默认情况下，即使你不指定...

true时完全隐藏label元素 ( label 和 separator)。 默认为 false。 默认情况下，即使你不指定 fieldLabel 它的空间仍然会被保留，这样这块区域会与其它确实拥有label的区域位于同一排。 讲此值设置为 true 将导致此区域不再保留此空间。

注意: 参见 clearCls 的注释。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield'
        hideLabel: true
    }]
});
Component
hideMode : String
组件如何隐藏，支持的值有： 'visibility' (css visibility), 'offsets' (位置偏移量为负值) 和...

组件如何隐藏，支持的值有： 'visibility' (css visibility), 'offsets' (位置偏移量为负值) 和 'display' (css display).

注意:一般首选默认值 'display'，因为当组件第一次显示的时候它们会自动进行布局 (隐藏的时候不会调整尺寸)。

Component
hideParent : Boolean
此值为true时，当调用hide/show方法时，将会hide和show组件的容器...
此值为true时，当调用hide/show方法时，将会hide和show组件的容器；false时将会 hide和show组件自身(默认为false)。例如，这可以用作window上隐藏按钮的一种 快捷操作，通过设置此按钮的hideParent:true，然后把它添加到window上。
Component
html : String/Object
一个HTML片段，或者一个 DomHelper 描述，用作layout元素的内容(默认为'')。...
一个HTML片段，或者一个 DomHelper 描述，用作layout元素的内容(默认为'')。 这个HTML内容在组件渲染之后才被添加，所以在 render 出发的时候，document中尚未包含此HTML。 但是这个内容将会在所有配置的 contentEl 之前被插入到body标签中。
Component
id : String
当前组件唯一的id(默认为auto-assigned id)...

当前组件唯一的id(默认为auto-assigned id)。 如果你需要在以后访问组件，而又没有一个有效的组件对象引用，那么你需要指定一个 id( 也就是，使用Ext. getCmp方法 )。

注意，此id也将被用作组件底层HTML标签的id，这些标签被渲染到页面中。 这将允许你编写基于id的CSS规则，以独立地描述指定的实例；并且，也可以通过 组件父标签的id选中子元素。

注意:为了避免与唯一的id 产生重复， 请参见 itemId 和 ref 。

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

Component
itemCls : String
注意: 只有在当前组件被渲染到一个使用FormLayout 布局的 容器中时此配置才有效...

注意: 只有在当前组件被渲染到一个使用FormLayout 布局的 容器中时此配置才有效。 (例如Ext.form.FormPanel 或者指定 layout:'form')。

一个附加的CSS类，应用到div上，包装当前field的表单元素。 如果提供了此参数， field级上的itemCls将会覆盖 container级上提供的 默认itemCls。 为itemCls指定的值将会被添加默认的 类('x-form-item')。

既然它被应用到项目的包装器上(参见 Ext.layout.FormLayout。 fieldTpl)， 它将允许你编写能应用到此field、label(如果有指定)、或者field内部任何其它元素的标准CSS规则。

注意: 参考 fieldLabel的注释。 .

示例用法:

// Apply a style to the field's label:
<style>
    .required .x-form-item-label {font-weight:bold;color:red;}
</style>

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Name',
        itemCls: 'required' //this label will be styled
    },{
        xtype: 'textfield',
        fieldLabel: 'Favorite Color'
    }]
});
Component
itemId : String
当没有可利用的对象引用时，itemId可以作为第二选择，用来获得一个组件的引用， 代替 ...

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

var c = new Ext.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'); // 与 Ext.getCmp()不同

p2 = p1.ownerCt.getComponent('p2'); // 通过兄弟对象获得引用

另请参见 id 和 ref 。

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

Component
labelSeparator : String
每个fieldLabel 文本后面现实的分隔符。 此属性可以在多个层次上进行配置...

每个fieldLabel 文本后面现实的分隔符。 此属性可以在多个层次上进行配置。优先顺序为：

  • field / component level
  • container level
  • layout level (默认为冒号 ':')
如不需要为当前field的label显示分隔符，指定一个空字符串''即可。

注意:参见 clearCls 的注释。

另请参见 hideLabel 和 Ext.layout.FormLayout。 fieldTpl。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    layoutConfig: {
        labelSeparator: '~'   // layout config has lowest priority (defaults to ':')
    },
    labelSeparator: '>>',     // config at container level
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Field 1',
        labelSeparator: '...' // field/component level config supersedes others
    },{
        xtype: 'textfield',
        fieldLabel: 'Field 2' // labelSeparator will be '='

    }]
});
Component
labelStyle : String
一个CSS样式描述字符串，它将直接应用到当前field的label上...

一个CSS样式描述字符串，它将直接应用到当前field的label上。 如果有设置，默认为容器的labelStyle值(例如 Ext.layout.FormLayout.labelStyle , 或者 '')。

注意:参见 clearCls 的注释。

另请参见 hideLabel 和 Ext.layout.FormLayout. fieldTpl。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Name',
        labelStyle: 'font-weight:bold;'
    }]
});
Component
listeners : Object
一个包含一个或多个事件处理器的配置对象，会在初始化的时候被添加到目标对象上...

一个包含一个或多个事件处理器的配置对象，会在初始化的时候被添加到目标对象上。 该配置对象应该是一个有效的监听器配置对象就像 addListener例子中指定的一样可一次附加多个处理器。

ExtJs Components上的DOM事件

一些 ExtJs Component 类导出时会选择一些DOM事件(例如 "click", "mouseover" 等等), 这通常只是在有额外的值可以被添加时发生。例如DataView类的 click事件会传递被点击的节点。也可以直接在Component的HTMLElementevent上访问DOM事件，但必需在Component被渲染后监听器才能添加到Element 上。可以按照以下步骤添加插件:

// 插件会用一个监听器配置对象进行配置。
//该组件会被添加到所有处理方法的参数列表上。
Ext.DomObserver = Ext.extend(Object, {
    constructor: function(config) {
        this.listeners = config.listeners ? config.listeners : config;
    },

    // 组件将自己传递进了插件的初始化方法里
    init: function(c) {
        var p, l = this.listeners;
        for (p in l) {
            if (Ext.isFunction(l[p])) {
                l[p] = this.createHandler(l[p], c);
            } else {
                l[p].fn = this.createHandler(l[p].fn, c);
            }
        }

        // 渲染后立即添加监听器到元素上
        c.render = c.render.createSequence(function() {
            var e = c.getEl();
            if (e) {
                e.on(l);
            }
        });
    },

    createHandler: function(fn, c) {
        return function(e) {
            fn.call(this, e, c);
        };
    }
});

var combo = new Ext.form.ComboBox({

    // 元素被点击后折叠
    plugins: [ new Ext.DomObserver({
        click: function(evt, comp) {
            comp.collapse();
        }
    })],
    store: myStore,
    typeAhead: true,
    mode: 'local',
    triggerAction: 'all'
});

Observable
margins : Object
注:此配置只用于该组件展现在一个使用BorderLayout...

注:此配置只用于该组件展现在一个使用BorderLayout 或 BoxLayout的两个子类之一作为布局的容器。

这个margins对象在该组件中的格式为：

{top: (top margin),right: (right margin),bottom: (bottom margin),left: (left margin)}

也可以是一个字符串，中间用空格分隔，margin值为数字。 把matches中每一个值的次序跟CSS中margin值的排列方式相对应：

  • 如果只有一个值，它适用于所有方面。
  • 如果有两个值，top和bottom的边框设置为第一个值，left和right设置为第二个值。
  • 如果有三个值，top设置为第一个值，left和right设置为第二个值，bottom设置为第三个值。
  • 如果有四个值，分别设置为top, right, bottom, left。

默认值:

{top:0, right:0, bottom:0, left:0}
BoxComponent
overCls : String
一个可选的额外的CSS类，它将在鼠标移过元素时被添加到组件上...
一个可选的额外的CSS类，它将在鼠标移过元素时被添加到组件上，鼠标移出时 删除。(默认为'')。此属性对于在组件上，或者它的任何使用标准CSS规则的孩子节点上， 添加定制的'active' 或者 'hover'样式非常有用。
Component
pageX : Number
如果该组件被包含在一个指定位置的容器中，这个值表示页面级的x坐标值（译者注：在有滚动条的情况下这个值很有用）。
BoxComponent
pageY : Number
如果该组件被包含在一个指定位置的容器中，这个值表示页面级的y坐标值（译者注：在有滚动条的情况下这个值很有用）。
BoxComponent
plugins : Object/Array
一个对象或者一个对象数组，为组件提供特殊的功能 ...
一个对象或者一个对象数组，为组件提供特殊的功能。 对一个合法的插件唯一的要求是它含有一个init()方法， 能接收一个Ext.Component型的参数。 当组件被创建时，如果有可用的插件，组件将会调用每个插件的init方法， 并将自身的引用作为方法参数传递给它。然后，每个插件就可以调用方法或者响应组件上的事件， 就像需要的那样提供自己的功能。
Component
ptype : String
需要创建配置的ptype。 当传递一个配置对象给构造函数时...
需要创建配置的ptype。 当传递一个配置对象给构造函数时，此配置选项不会被使用。 只有在使用懒初始化的时候此配置项才会被使用， 此时Plugin不是 通过一个完整的实例组件，而是通过一个Component配置指定的。 在渲染时，将会查找ptype以决定创建何种类型的Plugin。

如果你创建自己的Plugin，你可以通过 Ext.ComponentMgr.registerPlugin 对它们进行注册，以便能利用懒初始化和渲染机制。
Component
ref : String
一个路径描述，与组件的 ownerCt 相关，它描述了把当前组件的命名引用放置到哪个父容器中去。...

一个路径描述，与组件的 ownerCt 相关，它描述了把当前组件的命名引用放置到哪个父容器中去。

祖先的坐标路径可以通过'/'字符进行分隔。 例如，将一个Toolbar Button的引用放入 拥有此Toolbar的Panel中:

var myGrid = new Ext.grid.EditorGridPanel({
    title: 'My EditorGridPanel',
    store: myStore,
    colModel: myColModel,
    tbar: [{
        text: 'Save',
        handler: saveChanges,
        disabled: true,
        ref: '../saveButton'
    }],
    listeners: {
        afteredit: function() {
//          The button reference is in the GridPanel
            myGrid.saveButton.enable();
        }
    }
});

在上面的代码中，如果 ref 是 'saveButton' ，那么引用将会被放置到Toolbar中。 ref 中的每个'/' 都会从组件的 ownerCt 向上移动一级。

另请参见 added 和 removed 事件。

Component
region : String
注: 此配置只用于该组件展现在一个布局为BorderLayout的容器中...

注: 此配置只用于该组件展现在一个布局为BorderLayout的容器中(例如指定layout:'border')。

详见Ext.layout.BorderLayout。

BoxComponent
renderTo : Mixed
该值可以是一个节点的id、一个DOM节点或者一个已存在的元素...

该值可以是一个节点的id、一个DOM节点或者一个已存在的元素， 组件将会被渲染到其中。

  • 注意 :
      如果组件不是一个Container 的子项目时， 不要使用此选项。 渲染和管理它的子项目是一个Container 的layout manager的责任。
      当使用此配置项时，无需调用render()方法。

另请参见 render 。

Component
seriesStyles : Object
图表刷新后将要应用于各序列的样式。默认为 null.
Chart
stateEvents : Array
一个事件数组，当它们被触发时，组件需要保存自己的状态(默认值为 none)...

一个事件数组，当它们被触发时，组件需要保存自己的状态(默认值为 none)。 它们可以是任何该组件支持的事件类型，包括浏览器事件和 自定义事件(例如['click', 'customerchange'])。

对于保存和恢复组件状态的详细解释，参见 stateful

Component
stateId : String
为该组件指定的唯一的id值，它被用作管理组件状态的目的...
为该组件指定的唯一的id值，它被用作管理组件状态的目的。 (如果设定了id，默认值为组件自己的id，否则，如果组件使用自动生成的id，此值为null)。

对于保存和反解析组件状态的解释，参见 stateful 。

Component
stateful : Boolean
一个标志参数，它将引起组件在启动时尝试从一个保存的状态中恢复内部状态参数...

一个标志参数，它将引起组件在启动时尝试从一个保存的状态中恢复内部状态参数。 组件必须要么拥有一个 stateId 或者 id ，它们被分配给需要被管理的状态属性。 在跨页面加载时，不保证自动生成的id属性的稳定性， 并且，不能依赖此id来保存和恢复一个组件的相同状态。

为了保存状态的操作能够工作，状态管理器的提供者必须 被设置成一个Ext.state.Provider 的实现类，它覆盖了set 和get 方法，以便保存和恢复name/value对。 有一个内置的Ext.state.CookieProvider 可用。

为当前页面设置状态提供者:

Ext.state.Manager.setProvider(new Ext.state.CookieProvider({
    expires: new Date(new Date().getTime()+(1000*60*60*24*7)), //7 days from now
}));

当 stateEvents 配置项中其中之一的事件被触发时， 一个状态可保存的组件将试图保存其状态。

保存状态时，一个可保存状态的组件首先需要通过调用 getState 方法来序列化它的状态。 默认情况下，此函数什么事都不做。 开发者必须提供一个实现，返回一个hash对象，它描述了组件可恢复的状态。

getState方法产生的值将会传递给 Ext.state.Manager.set 方法，它使用配置的 Ext.state.Provider 来保存对象，以组件的 stateId 为key，或者，如果此值（指stateId）没有指定时， 使用它的 id 作为key。

在进行构造时，一个可保存状态的组件试图通过调用 Ext.state.Manager.get方法来 恢复它的状态，传递 stateId 或者，如果此值（指stateId）没有指定时， 使用它的 id 作为参数。

结果对象被传递给 applyState 。 applyState 的默认实现只是简单地把属性拷贝到对象中， 但是开发者可以覆盖此方法以支持更多行为。

通过向 beforestaterestore, staterestore, beforestatesave 和 statesave 事件上绑定监听器，你可以在保存和恢复状态时进行额外的处理。

Component
style : String
被添加到组件元素的特定样式。 必须是按照...
被添加到组件元素的特定样式。 必须是按照 Ext.Element.applyStyles 类指定格式的合法参数值。

new Ext.Panel({
    title: 'Some Title',
    renderTo: Ext.getBody(),
    width: 400, height: 300,
    layout: 'form',
    items: [{
        xtype: 'textarea',
        style: {
            width: '95%',
            marginBottom: '10px'
        }
    },
        new Ext.Button({
            text: 'Send',
            minWidth: '100',
            style: {
                marginBottom: '10px'
            }
        })
    ]
});
Component
tabTip : String
注: 这个配置只用于当该组件作为TabPanel的一个子项目时使用...

注: 这个配置只用于当该组件作为TabPanel的一个子项目时使用。

一个String类型的innerHTML(支持html标签)，当鼠标放在该选项上的时，显示一个tooltip。为了tips能够被渲染，Ext.QuickTips.init()必须被提前调用。
BoxComponent
tpl : Mixed
一个 Ext.Template , Ext.XTemplate 或者一个用来形成一个Ext.XTemplate的字符串数组...
一个 Ext.Template , Ext.XTemplate 或者一个用来形成一个Ext.XTemplate的字符串数组。 与 data 和 tplWriteMode 配置项协同使用。
Component
tplWriteMode : String
刷新组件的内容区域时使用的Ext.(X)Template方式。 默认为'overwrite' (参见 Ext.XTemplate.overwrite )。
刷新组件的内容区域时使用的Ext.(X)Template方式。 默认为'overwrite' (参见 Ext.XTemplate.overwrite )。
Component
url : String
需要包含在chart中的URL。默认为 undefined。
Chart
width : Number
组件的宽度(默认值为 auto)。注:如果想使用百分比的方式...
组件的宽度(默认值为 auto)。注:如果想使用百分比的方式来设置值，请查看 Ext.Component.anchor。
BoxComponent
wmode : String
flash对象的wmode。此参数可以用来控制层叠次序。默认为 'opaque'。
FlashComponent
x : Number
如果被包含在一个指定位置的容器中，这个值表示x(left)坐标值。
BoxComponent
xtype : String
需要创建配置的xtype。 当传递一个配置对象给构造函数时...
需要创建配置的xtype。 当传递一个配置对象给构造函数时，此配置选项不会被使用。 只有在使用懒初始化的时候此配置项才会被使用，此时容器的子项目不是 通过一个完整的实例组件，而是通过一个Component配置指定的。 在渲染时，将会查找xtype以决定创建何种类型的子组件。

预定义的xtype列表如下： here。

如果你继承Component创建你自己的组件，你需要使用Ext.ComponentMgr.registerType 对它们进行注册，以便利用懒初始化和渲染机制。
Component
y : Number
如果被包含在一个指定位置的容器中，这个值表示y(top)坐标值。
BoxComponent

公共属性

Property Defined By
CHART_URL : String
设置从哪里加载图表。应该设置为本地图表源（路径）。
Chart
EXPRESS_INSTALL_URL : String
如果不存在，为初始化flash设置的url。 此参数应该设置为一个本地资源。
FlashComponent
disabled : Boolean
当前组件处于无效状态时为true。 Read-only.
Component
el : Ext.Element
封装了当前组件的Ext.Element。 Read-only。通常情况下，这将是一个<DIV>元素，它由此类的...

封装了当前组件的Ext.Element。 Read-only。

通常情况下，这将是一个<DIV>元素，它由此类的 onRender方法创建，但是它可以通过使用 autoEl 配置项进行覆盖。

注意: 直到组件渲染完成此元素都将处于无效状态。

如需向当前组件的 DOM事件(而不是当前组件自己的Observable事件)添加监听器， 更多建议，参见 listeners 配置项，或者直接使用一个render监听器:

new Ext.Panel({
    title: 'The Clickable Panel',
    listeners: {
        render: function(p) {
            // Append the Panel to the click handler's argument list.
            p.getEl().on('click', handlePanelClick.createDelegate(null, [p], true));
        },
        single: true  // Remove the listener after first invocation
    }
});

另请参见 getEl

Component
hidden : Boolean
如果当前组件处于隐藏状态，此值为true。Read-only。
Component
initialConfig : Object
当前组件的初始化配置描述。 Read-only。
Component
ownerCt : Ext.Container
组件所属的Container (默认为undefined，当前组件被添加到一个容器中时此值被自动设置)...
组件所属的Container (默认为undefined，当前组件被添加到一个容器中时此值被自动设置)。 Read-only。

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

Component
refOwner : Ext.Container
如果当前组件是一个容器的孩子，并且是通过一个 ref 配置项被注册的，则此值为 ref 引用被插入到的祖先容器。
如果当前组件是一个容器的孩子，并且是通过一个 ref 配置项被注册的，则此值为 ref 引用被插入到的祖先容器。
Component
rendered : Boolean
如果当前组件已经被渲染了，此值为true。Read-only.
Component

公共方法

Method Defined By
StackedBarChart ()
参数:
  • 无。
返回值:
  • void
StackedBarChart
addClass ( string cls ) : Ext.Component
为组件底层的元素添加CSS样式。
为组件底层的元素添加CSS样式。
参数:
  • cls : string
    需要添加的CSS样式的class名称
返回值:
  • Ext.Component
    this
Component
addEvents( Object|String o, string Optional. ) : void
添加指定的事件到事件列表上，事件会被该Observable触发。
添加指定的事件到事件列表上，事件会被该Observable触发。
参数:
  • o : Object|String
    以事件名作为属性true作为值的对象 或者当多个事件名被分开的传递时则为第一个事件名。
  • Optional. : string
    事件名被分开的传递时则为事件名。 用法:
    this.addEvents('storeloaded', 'storecleared');
返回值:
  • void
Observable
addListener( String eventName, Function handler, [Object scope], [Object options] ) : void
给对象添加事件处理器。
给对象添加事件处理器。
参数:
  • eventName : String
    监听的事件名。
  • handler : Function
    事件调用的方法
  • scope : Object
    （可选）处理方法执行的作用域 (this的引用 reference)。 如果被忽略。默认为触发事件的对象。
  • options : Object
    （可选）包含处理器配置和属性的对象。 可能包含以下的属性:
    • scope : Object
      处理方法执行的作用域(this的引用) 。 如果被忽略。默认为触发事件的对象。
    • delay : Number
      在触发事件后延迟调用处理器的毫秒数。
    • single : Boolean
      如果为True则添加一个处理器来处理下一次的事件触发（仅一次），然后移除自己。
    • buffer : Number
      使得处理器延迟指定毫秒数后预定的运行在 一个Ext.util.DelayedTask中 。 如果事件在时间内再一次被触发，原始的处理器不会被调用，但是新的处理器会预定的在他的位置上。
    • target : Observable
      如果事件在目标的Observable上触发则仅仅调用处理器， 否则 事件会从子类的Observable上冒泡

    组合选项
    使用这些选项参数,可能会组合出不同类型的监听器：

    一个延迟的，一次性的监听器。

    myDataView.on('click', this.onClick, this, {
single: true,
delay: 100
});

    一次调用附加多个处理器
    该方法同样支持传递一个包含指定的多个处理器的属性的配置对象参数。

    myGridPanel.on({
'click' : {
    fn: this.onClick,
    scope: this,
    delay: 100
},
'mouseover' : {
    fn: this.onMouseOver,
    scope: this
},
'mouseout' : {
    fn: this.onMouseOut,
    scope: this
}
});

    或者一个简写的语法：

    myGridPanel.on({
'click' : this.onClick,
'mouseover' : this.onMouseOver,
'mouseout' : this.onMouseOut,
 scope: this
});
返回值:
  • void
Observable
applyToMarkup ( String/HTMLElement el ) : void
将此组件添加到已存在的有效的HTML标签中。 使用该方法时，无需再调用render()方法。
将此组件添加到已存在的有效的HTML标签中。 使用该方法时，无需再调用render()方法。
参数:
  • el : String/HTMLElement
返回值:
  • void
Component
bindStore ( Store store ) : void
改变图表绑定的数据集，并刷新。
改变图表绑定的数据集，并刷新。
参数:
  • store : Store
    绑定到图表的数据集合。
返回值:
  • void
Chart
cloneConfig ( Object overrides ) : Ext.Component
默认使用原先传递给当前实例的配置值克隆当前组件。
默认使用原先传递给当前实例的配置值克隆当前组件。
参数:
  • overrides : Object
    一个新的配置项，包含需要覆盖到克隆版本的所有属性。 可以传递一个id参数给此对象，否则将自动生成一个新的id以避免发生重复。
返回值:
  • Ext.Component
    当前组件的克隆副本
Component
destroy () : void
通过如下方法销毁对象：删除所有的事件监听器、将组件的元素从DOM树中删除...
通过如下方法销毁对象：删除所有的事件监听器、将组件的元素从DOM树中删除（如果可以）、 将组件从它的 Ext.Container（如果可用）中删除、 并且将它从Ext.ComponentMgr中 注销。 销毁操作一般由框架自动完成，一般情况下不需要直接调用该方法。
参数:
  • 无。
返回值:
  • void
Component
disable () : Ext.Component
将组件置为无效状态，并出发'disable'事件。
将组件置为无效状态，并出发'disable'事件。
参数:
  • 无。
返回值:
  • Ext.Component
    this
Component
enable () : Ext.Component
将组件置为有效状态并触发'enable'事件。
将组件置为有效状态并触发'enable'事件。
参数:
  • 无。
返回值:
  • Ext.Component
    this
Component
enableBubble( String/Array events ) :void
是否现在使得事件会被该Observable触发并调用 this.getBubbleTarget()方法在拥有者的继承树...

是否现在使得事件会被该Observable触发并调用 this.getBubbleTarget()方法在拥有者的继承树中冒泡。Observable的基础类中没有该方法的实现。

该方法一般被Ext.Components用来冒泡事件到拥有者的容器。参看Ext.Component.getBubbleTarget默认的实现 在Ext.Component中返回组件的直接拥有者。但是如果需要的是一个已知的目标，该方法可以被重写来更快的访问需求的目标。

例子:

Ext.override(Ext.form.Field, {
    // 添加方法到Field的initComponent上改变事件为冒泡
    initComponent : Ext.form.Field.prototype.initComponent.createSequence(function() {
        this.enableBubble('change');
    }),

    // 我们知道我们想让Field的事件冒泡到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() {
            // 如果样式被修改标题会变红。
            myForm.header.setStyle('color', 'red');
        }
    }
});
参数:
  • events : String/Array
    冒泡的事件名，或事件名数组
返回值:
  • void
Observable
findParentBy ( Function fn ) : Ext.Container
通过自定义的函数查找当前组件上层任何层次上的容器...
通过自定义的函数查找当前组件上层任何层次上的容器。 如果传递的函数返回true，容器对象将被返回。
参数:
  • fn : Function
    自定义的函数，使用如下参数调用(container,this component)。
返回值:
  • Ext.Container
    自定义函数返回true的第一个容器
Component
findParentByType ( String/Class xtype ) : Ext.Container
通过xtype或者class查找当前组件上层任何层次上的容器
通过xtype或者class查找当前组件上层任何层次上的容器
参数:
  • xtype : String/Class
    组件的xtype字符串，或者直接是组件的class
返回值:
  • Ext.Container
    符合指定xtype或者class的第一个容器
Component
fireEvent( String eventName, Object... args ) : Boolean
用传入的参数触发指定的事件 (减去事件名)。 一个事件可以被设置为冒泡 Obse...

用传入的参数触发指定的事件 (减去事件名)。

一个事件可以被设置为冒泡到Observable父类继承树(参看 Ext.Component.getBubbleTarget) 调用enableBubble实现。

参数:
  • eventName : String
    触发的事件名。
  • args : Object...
    传递给处理器的可变长度参数。
返回值:
  • Boolean
    如果有任何的处理器返回false则返回false，否则返回true。
Observable
focus ( [ Boolean selectText ], [ Boolean/Number delay ] ) : Ext.Component
尝试将当前组件设为焦点。
尝试将当前组件设为焦点。
参数:
  • selectText : Boolean
    (可选) 如果可用，同时选中组件内部的文本
  • delay : Boolean/Number
    (可选)将当前组件设置为焦点的延迟时间(设置为true等于0毫秒)
返回值:
  • Ext.Component
    this
Component
getBox ( [ Boolean local ] ) : Object
获取组件底层元素当前盒子模型的尺寸。（译者注：盒子模型是CSS术语，详细解释请自行搜索。）
获取组件底层元素当前盒子模型的尺寸。（译者注：盒子模型是CSS术语，详细解释请自行搜索。）
参数:
  • local : Boolean
    (可选)值为true时，组件的left值和top值将代替页面的XY被返回。(默认值为false)
返回值:
  • Object
    返回值的格式{x, y, width, height}
BoxComponent
getBubbleTarget () : Ext.Container
为Observable的fireEvent方法提供链接，它沿着继承结构进行冒泡操作。
为Observable的fireEvent方法提供链接，它沿着继承结构进行冒泡操作。
参数:
  • 无。
返回值:
  • Ext.Container
    拥有当前组件的容器。
Component
getEl () : Ext.Element
返回 Ext.Element ，它包装了当前组件。...

返回 Ext.Element ，它包装了当前组件。

通常情况下，这将是一个<DIV>元素，它是由该类的onRender方法创建的， 但是可以使用autoEl配置项 覆盖它。

注意: 此元素将会一直处于无效状态直到当前组件渲染完成。

如需向当前组件的 DOM事件(而不是当前组件自己的Observable事件)添加监听器， 更多建议，参见 listeners 配置项，或者直接使用一个render监听器:

new Ext.Panel({
    title: 'The Clickable Panel',
    listeners: {
        render: function(p) {
            // Append the Panel to the click handler's argument list.
            p.getEl().on('click', handlePanelClick.createDelegate(null, [p], true));
        },
        single: true  // Remove the listener after first invocation
    }
});
参数:
  • 无。
返回值:
  • Ext.Element
    包装当前组件的元素。
Component
getHeight () : Number
获取该组件的当前高度值。
获取该组件的当前高度值。
参数:
  • 无。
返回值:
  • Number
BoxComponent
getId () : String
返回当前组件的id，如果没有定义id，则自动生成并返回一个id:'ext-comp-'...
返回当前组件的 id 如果没有定义 id 则自动生成并返回一个 id

'ext-comp-' + (++Ext.Component.AUTO_ID)
参数:
  • 无。
返回值:
  • String
    id
Component
getItemId () : String
返回当前组件的 itemId 。 如果没有通过配置参数指定 itemId 那么，将会使用...
返回当前组件的 itemId 。 如果没有通过配置参数指定 itemId 那么，将会使用 getId 返回 id 。
参数:
  • 无。
返回值:
  • String
Component
getOuterSize () : Object
获取当前组件所在元素的尺寸大小，包括边缘的空白处。
获取当前组件所在元素的尺寸大小，包括边缘的空白处。
参数:
  • 无。
返回值:
  • Object
    一个包含元素大小的对象 {width: (element width + left/right margins), height: (element height + top/bottom margins)}
BoxComponent
getPosition ( [ Boolean local ] ) : Array
获取组件底层元素当前的XY位置。
获取组件底层元素当前的XY位置。
参数:
  • local : Boolean
    (可选)如果为true，将返回元素的left和top值，而不是相对于页面内的 XY。(默认值为 false)
返回值:
  • Array
    元素的XY位置值(例如：[100, 200])
BoxComponent
getResizeEl () : Ext.Element
返回该组件的最外层用来定义这些组件整体大小的Element...

返回该组件的最外层用来定义这些组件整体大小的Element对象。

通常用 getEl 方法将会返回相同的Element对象，但在有些情况下，组件可能有一些更多的封装了它的主要动态Element对象的Element对象。

例如ComboBox。它是封装在一个包含<input>元素的包装元素里(这将返回其 getEl方法和触发按钮的元素)。返回的元素为resizeEl。

参数:
  • 无。
返回值:
  • Ext.Element
    The Element which is to be resized by size managing layouts.
BoxComponent
getSize () : Object
获取组件底层元素当前的大小。
获取组件底层元素当前的大小。
参数:
  • 无。
返回值:
  • Object
    一个包含元素大小的对象{width: (element width), height: (element height)}
BoxComponent
getWidth () : Number
获取该组件的当前宽度值。
获取该组件的当前宽度值。
参数:
  • 无。
返回值:
  • Number
BoxComponent
getXType () : String
获取当前组件的xtype，它是用 Ext.ComponentMgr 注册的。 所有可用的xtype列表，参见...
获取当前组件的xtype，它是用 Ext.ComponentMgr 注册的。 所有可用的xtype列表，参见 Ext.Component 类头部。示例用法:

var t = new Ext.form.TextField();
alert(t.getXType());  // alerts 'textfield'
参数:
  • 无。
返回值:
  • String
    The xtype
Component
getXTypes () : String
返回此组件的xtype继承树，用字符'-'分隔。 所有可用的xtype值...

返回此组件的xtype继承树，用字符'-'分隔。 所有可用的xtype值，请参见Ext.Component 类的头部。

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

示例用法:

var t = new Ext.form.TextField();
alert(t.getXTypes());  // alerts 'component/box/field/textfield'
参数:
  • 无。
返回值:
  • String
    xtype层次字符串
Component
hasListener( String eventName ) : Boolean
检测对象是否包含指定事件的任何监听器
检测对象是否包含指定事件的任何监听器
参数:
  • eventName : String
    检测的事件名
返回值:
  • Boolean
    如果事件被监听则为true，否则为false
Observable
hide () : Ext.Component
隐藏当前组件。 监听 beforehide' 事件并且返回false 可以取消隐藏组件的操作。 在隐藏组件之后触发...
隐藏当前组件。 监听 beforehide' 事件并且返回false 可以取消隐藏组件的操作。 在隐藏组件之后触发 ' hide' 事件。 如果组件被配置成 hidden 那么此方法在内部被调用。
参数:
  • 无。
返回值:
  • Ext.Component
    this
Component
isVisible () : Boolean
如果当前组件可见，返回true。
如果当前组件可见，返回true。
参数:
  • 无。
返回值:
  • Boolean
    如果当前组件可见，返回true，其它返回false。
Component
isXType ( String xtype , [ Boolean shallow ] ) : Boolean
Tests whether or not this Component is of a specific xtype. This can test whether this Component is descended from th...

测试此组件是否是指定的xtype。此方法既可以测试是否是指定的xtype的某个子类， 或者它是否直接是指定的xtype类(shallow=true)。

如果使用你自己的子类，必须知道组件必须注册它的xtype值。

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

示例用法:

var t = new Ext.form.TextField();
var isText = t.isXType('textfield');        // true
var isBoxSubclass = t.isXType('box');       // true, descended from BoxComponent
var isBoxInstance = t.isXType('box', true); // false, not a direct BoxComponent instance
参数:
  • xtype : String
    需要为当前组件进行检测的xtype
  • shallow : Boolean
    (可选) 如果为false，检测组件是否是xtype继承树中的某个子类（默认是这种情况）， 如果为true，只检测组件是否是指定的xtype类型。
返回值:
  • Boolean
    如果当前组件是指定xtype的子类，返回true，其它返回flase。
Component
mon ( Observable|Element item , Object|String ename , Function fn , Object scope , Object opt ) : void
向任何Observable对象(或者元素)上添加监听器，监听器将会在组件...

向任何Observable对象(或者元素)上添加监听器，监听器将会在组件销毁时被自动删除。
用法：

myGridPanel.mon(myGridPanel.getSelectionModel(), 'selectionchange', handleSelectionChange, null, {buffer: 50});

or:

myGridPanel.mon(myGridPanel.getSelectionModel(), {
    selectionchange: handleSelectionChange,
    buffer: 50
});
参数:
  • item : Observable|Element
    需要添加listener/listeners的项目。
  • ename : Object|String
    事件名，或者一个包含事件名属性的对象。
  • fn : Function
    (可选) 如果 ename 参数是一个事件名，此参数为处理函数。
  • scope : Object
    (可选)如果 ename 参数是一个事件名称，此参数是作用域 ( this 引用)，监听函数将会在此作用域中被执行。
  • opt : Object
    (可选)如果 ename 参数是一个事件名称， 此参数是 addListener 配置项。
返回值:
  • void
Component
mun ( Observable|Element item , Object|String ename , Function fn , Object scope ) : void
删除通过mon 方法添加的监听器。
删除通过mon 方法添加的监听器。
参数:
  • item : Observable|Element
    需要删除listener/listeners的项目。
  • ename : Object|String
    事件名称，或者一个包含事件名称属性的对象。
  • fn : Function
    (可选)如果 ename 参数是一个事件名称，此参数是一个处理函数。
  • scope : Object
    (可选)如果 ename 参数是一个事件名称，此参数是作用域 ( this 引用)，监听函数将会在此作用域中被执行。
返回值:
  • void
Component
nextSibling () : Ext.Component
返回所属容器中的下一个组件
返回所属容器中的下一个组件
参数:
  • 无。
返回值:
  • Ext.Component
Component
on( String eventName, Function handler, [Object scope], [Object options] ) : void
给对象添加事件处理器 (addListener的简写形式)
给对象添加事件处理器 (addListener的简写形式。)
参数:
  • eventName : String
    监听的事件类型
  • handler : Function
    事件调用的方法
  • scope : Object
    （可选）处理方法执行时的作用域 (this 的引用)。 如果被忽略。默认为触发事件的对象。
  • options : Object
    可选 包含处理器配置的对象。
返回值:
  • void
Observable
previousSibling () : Ext.Component
返回所属容器中的前一个组件
返回所属容器中的前一个组件
参数:
  • 无。
返回值:
  • Ext.Component
Component
purgeListeners() : void
移除对象上所有的监听器
移除对象上所有的监听器
参数:
  • 无。
返回值:
  • void
Observable
relayEvents( Object o, Array events ) : void
从指定的Observable上传递选择的事件就好像被当前对象触发一样。
从指定的Observable上传递选择的事件就好像被当前对象触发一样。
参数:
  • o : Object
    该Observable上的事件被当前对象传递。
  • events : Array
    传递的数组名。
返回值:
  • void
Observable
removeClass ( string cls ) : Ext.Component
从组件底层的元素上删除一个CSS类。
从组件底层的元素上删除一个CSS类。
参数:
  • cls : string
    需要移除的CSS类名
返回值:
  • Ext.Component
    this
Component
removeListener( String eventName, Function handler, [Object scope] ) : void
删除一个事件处理器。
删除一个事件处理器。
参数:
  • eventName : String
    处理器关联的事件类型。
  • handler : Function
    移除的处理器。 这应该是传递到addListener里的方法的引用。
  • scope : Object
    （可选）处理器指定的初始作用域。
返回值:
  • void
Observable
render ( [ Element/HTMLElement/String container ], [ String/Number position ] ) : void
在传递进来的HTML元素中渲染当前组件。...

在传递进来的HTML元素中渲染当前组件。

如果你正在使用一个Container 对象放置当前组件，那么请不要使用render方法。

当容器第一次被渲染时，它的子组件将会被容器的 layout 管理器渲染。

某些布局管理器允许动态添加子组件。它们包括 Ext.layout.CardLayout, Ext.layout.AnchorLayout, Ext.layout.FormLayout, Ext.layout.TableLayout。

当一个新的子组件被添加时，如果容器已经被渲染了， 你可能需要调用容器的 doLayout 方法来刷新视图，它将导致所有没有被渲染的子组件进行渲染操作。 此操作是必须的，这样你可以添加多个子组件而只刷新一次layout。

当创建复杂的UI时，非常重要的一点是，请记住调整子项目的尺寸和位置是容器的 layout 管理器的职责。 如果你希望子项目的尺寸对用户交互作出反应， 你必须为容器配置一个布局管理器，它将创建和管理你心里想要的那种布局。

忽略容器的layout 配置意味着将会使用一个基本的布局管理器，它除了按次序把子组件 渲染到容器中之外什么事情都不做。 这种情况下，任何尺寸和位置的调整操作都不会发生。

参数:
  • container : Element/HTMLElement/String
    (可选) 需要在其中渲染当前组件的元素。 如果它是从一个已存在的标签中创建的，此参数应该被忽略。
  • position : String/Number
    (可选) 容器中的一个元素ID或者一个DOM节点索引， 当前组件将会被插入到它前面 (默认append到容器的尾部)
返回值:
  • void
Component
resumeEvents() : void
重新开始触发事件。(参见suspendEvents) 如果事件以queueSuspended参数被挂起，则在事件被挂起时 ...
重新开始触发事件。(参见 suspendEvents) 如果事件以queueSuspended 参数被挂起，则在事件被挂起时触发的事件会被传递到所有的监听器上
参数:
  • 无。
返回值:
  • void
Observable
setAutoScroll ( Boolean scroll ) : Ext.BoxComponent
设置该组件内容溢出时是否自动显示滚动条。
设置该组件内容溢出时是否自动显示滚动条。
参数:
  • scroll : Boolean
    值为true的话组件自动显示滚动条。
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setDisabled ( Boolean disabled ) : Ext.Component
工具函数，使用布尔值设置有效/无效(disabled/enabled )。
工具函数，使用布尔值设置有效/无效(disabled/enabled )。
参数:
  • disabled : Boolean
返回值:
  • Ext.Component
    this
Component
setHeight ( Mixed height ) : Ext.BoxComponent
设置此组件的高度。该方法将触发resize事件。
设置此组件的高度。该方法将触发resize事件。
参数:
  • height : Mixed
    The new height to set.
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setPagePosition ( Number x , Number y ) : Ext.BoxComponent
设置组件在页面中的XY位置。 如果需要设置left和top值 ，请使用...
设置组件在页面中的XY位置。 如果需要设置left和top值 ，请使用setPosition方法。 该方法触发move事件。
参数:
  • x : Number
    The new x position
  • y : Number
    The new y position
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setPosition ( Number left , Number top ) : Ext.BoxComponent
设置组件的left和top值。设置组件的页面XY值，请使用setPagePosition方法。该方法触发...
设置组件的left和top值。设置组件的页面XY值，请使用setPagePosition方法。该方法触发move事件。
参数:
  • left : Number
    The new left
  • top : Number
    The new top
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setSeriesStyles ( styles {Array} ) : void
为图表中所有序列设置样式。
为图表中所有序列设置样式。
参数:
  • {Array} : styles
    为列表中所有序列样式进行初始化。
返回值:
  • void
Chart
setSize ( Mixed width , Mixed height ) : Ext.BoxComponent
设置BoxComponent的宽度和高度。 此方法触发resize事件...
设置BoxComponent的宽度和高度。 此方法触发resize事件。此方法可以接收单独的width或者height值作为参数， 或者你可以传递像这样的一个size对象： {width:10, height:20} 。
参数:
  • width : Mixed
    设置的新的width值。这可以是：
    • 一个Number类型指定Element新的宽度 Ext.Element.defaultUnit(默认为像素 :'px')。
    • 一个String类型用于设置width的CSS样式。
    • 一个size对象格式为 {width: widthValue, height: heightValue} 。
    • 值为 undefined 时，保留原来的width不变。
  • height : Mixed
    设置的新的height值(如果第一个参数传递了一个size对象，此参数没有必要传递)。这可以是：
    • 一个Number类型指定Element新的高度 Ext.Element.defaultUnit(默认为像素 :'px')。
    • 一个String类型用于设置height的CSS样式。也有可能不会被使用到。
    • 值为 undefined 时，保留原来的height不变。
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setStyle ( name {String} , value {Object} ) : void
为图表实例设置单一样式值。
为图表实例设置单一样式值。
参数:
  • {String} : name
    将要改变的图表样式名称。
  • {Object} : value
    图表样式的新值。
返回值:
  • void
Chart
setStyles ( styles {Object} ) : void
重置图表实例上的所有样式。
Resets all styles on the Chart instance.
参数:
  • {Object} : styles
    Initializer for all Chart styles.
返回值:
  • void
Chart
setVisible ( Boolean visible ) : Ext.Component
工具方法，通过使用布尔值隐藏或者显示当前组件。
工具方法，通过使用布尔值隐藏或者显示当前组件。
参数:
  • visible : Boolean
    true时显示，false时隐藏
返回值:
  • Ext.Component
    this
Component
setWidth ( Mixed width ) : Ext.BoxComponent
设置组件的宽度。 此方法触发resize事件。
设置组件的宽度。 此方法触发resize事件。
参数:
  • width : Mixed
    The new width to set.
返回值:
  • Ext.BoxComponent
    this
BoxComponent
show () : Ext.Component
显示当前组件。监听' beforeshow' 事件，返回 false 取消显示组件...
显示当前组件。监听' beforeshow' 事件，返回 false 取消显示组件。在显示组件之后触发' show' 事件。
参数:
  • 无。
返回值:
  • Ext.Component
    this
Component
suspendEvents( Boolean queueSuspended ) : void
暂停触发所有的事件。 (参看resumeEvents)
暂停触发所有的事件。（参看 resumeEvents)
参数:
  • queueSuspended : Boolean
    如果传递为true则排列好暂停的事件使得在调用 resumeEvents 后再触发它们，而不是抛弃所有暂停的事件。
返回值:
  • void
Observable
syncSize () : Ext.BoxComponent
强制组件的大小按照此组件底层元素当前的高度和宽度计算。
强制组件的大小按照此组件底层元素当前的高度和宽度计算。
参数:
  • 无。
返回值:
  • Ext.BoxComponent
    this
BoxComponent
un( String eventName, Function handler, [Object scope] ) : void
删除一个事件处理器(removeListener方法的简写形式)
删除一个事件处理器(removeListener方法的简写形式。)
参数:
  • eventName : String
    处理器关联的事件类型
  • handler : Function
    被删除的处理器 这应该是传入 addListener 中的方法的引用。
  • scope : Object
    （可选）为处理器指定的初始作用域。
返回值:
  • void
Observable
update ( Mixed htmlOrData , [ Boolean loadScripts ], [ Function callback ] ) : void
刷新组件的内部区域。
刷新组件的内部区域。
参数:
  • htmlOrData : Mixed
    如果已经通过tpl为当前组件配置了一个模板，那么 将会使用此参数来装配模板。 如果没有为当前组件配置模板，组件的内容区域将会通过Ext.Element 进行刷新。
  • loadScripts : Boolean
    (可选)只用在使用html配置时此参数才合法。默认为false。
  • callback : Function
    (可选)只用在使用html配置时此参数才合法。 当脚本加载完成时回调函数才被执行。
返回值:
  • void
Component
updateBox ( Object box ) : Ext.BoxComponent
设置此组件底层元素的盒子模型尺寸。(译者注：盒子模型是CSS术语，详细资料请自行搜索。)
设置此组件底层元素的盒子模型尺寸。(译者注：盒子模型是CSS术语，详细资料请自行搜索。)
参数:
  • box : Object
    一个格式为{x, y, width, height}的对象
返回值:
  • Ext.BoxComponent
    this
BoxComponent

公共事件

Event Defined By
added : ( Ext.Component this , Ext.Container ownerCt , number index )
当一个组件被添加到一个Ext.Container时触发
当一个组件被添加到一个Ext.Container时触发
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • ownerCt : Ext.Container
    用于组件的容器
  • index : number
    添加组件的位置
Component
afterrender : ( Ext.Component this )
在组件渲染完成之后触发...

在组件渲染完成之后触发。

afterrender事件在当前组件被rendered 结束之后、在为组件定义的所有afterRender方法执行之后 触发，并且，如果有stateful， 也在状态被保存之后才触发。

监听器将会以如下参数格式被调用:
  • this : Ext.Component
Component
beforedestroy : ( Ext.Component this )
在组件 destroyed 之前触发。 在事件监听器中返回false以停止 destroy 操作。
在组件 destroyed 之前触发。 在事件监听器中返回false以停止 destroy 操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforehide : ( Ext.Component this )
在调用hide方法隐藏组件之前触发。 在事件监听器中返回false可以停止隐藏操作。
在调用hide方法隐藏组件之前触发。 在事件监听器中返回false可以停止隐藏操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforerefresh : ( Chart this )
在图表数据刷新前触发。如果beforerefresh处理函数返回false则refresh动作...
在图表数据刷新前触发。如果beforerefresh处理函数返回false则 refresh 动作将被取消。
监听函数被调用时将传递如下参数：
  • this : Chart
Chart
beforerender : ( Ext.Component this )
在组件被rendered 之前触发。 在事件监听器中返回false可以停止render 操作。
在组件被rendered 之前触发。 在事件监听器中返回false可以停止render 操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforeshow : ( Ext.Component this )
在调用show()方法现实组件之前触发。 事件处理函数返回false可以停止show。
在调用show 方法现实组件之前触发。 事件处理函数返回false可以停止show。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforestaterestore : ( Ext.Component this , Object state )
在组件状态恢复之前触发。返回false停止恢复状态操作。
在组件状态恢复之前触发。返回false停止恢复状态操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    StateProvider返回的状态哈希值。 如果没有禁止此事件，那么状态对象会被传递给applyState。 默认情况下，这样简单地把属性值拷贝到当前组件中。 可以覆盖此方法以提供自定的状态恢复操作。
Component
beforestatesave : ( Ext.Component this , Object state )
在组件状态被保存到配置的状态提供者之前触发。 返回false可以停止保存。
在组件状态被保存到配置的状态提供者之前触发。 返回false可以停止保存。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    状态值哈希。 这由在组件上调用getState() 方法决定。 此方法必须由开发者提供，返回是否需要对状态进行描述，默认情况下， Ext.Component有一个空实现。
Component
destroy : ( Ext.Component this )
在组件被销毁之后触发。
在组件被destroyed之后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
disable : ( Ext.Component this )
在组件被设置为无效状态后触发。
在组件被设置为无效状态后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
enable : ( Ext.Component this )
当组件被设置为有效(enabled)之后触发。
当组件被设置为有效(enabled)之后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
hide : ( Ext.Component this )
在组件被隐藏之后触发。 当调用hide 方法隐藏组件之后触发。
在组件被隐藏之后触发。 当调用hide 方法隐藏组件之后触发。
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
initialize : ( Chart this )
监听器将会以如下参数格式被调用:
  • this : Chart
FlashComponent
move : ( Ext.Component this , Number x , Number y )
在组件移动之后触发。
在组件移动之后触发。
监听器将会用如下的参数格式来调用:
  • this : Ext.Component
  • x : Number
    The new x position
  • y : Number
    The new y position
BoxComponent
refresh : ( Chart this )
图表数据刷新后触发。
图表数据刷新后触发。
监听函数被调用时将传递如下参数：
  • this : Chart
Chart
removed : ( Ext.Component this , Ext.Container ownerCt )
当一个组件被从Ext.Container容器中删除时触发
当一个组件被从Ext.Container容器中删除时触发
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • ownerCt : Ext.Container
    持有组件的容器
Component
render : ( Ext.Component this )
在组件被渲染之后触发。
在组件被 rendered(渲染) 之后触发。
监听器将以如下的参数格式被调用:
  • this : Ext.Component
Component
resize : ( Ext.Component this , Number adjWidth , Number adjHeight , Number rawWidth , Number rawHeight )
在组件被调整大小之后触发。
在组件被调整大小之后触发。
监听器将以如下的参数格式被调用:
  • this : Ext.Component
  • adjWidth : Number
    这是width调整后的值
  • adjHeight : Number
    这是height调整后的值
  • rawWidth : Number
    这是width原来的值
  • rawHeight : Number
    这是height原来的值
BoxComponent
show : ( Ext.Component this )
在调用show 方法显示组件之后触发。
在调用show 方法显示组件之后触发。
监听器将会用如下的参数格式被调用:
  • this : Ext.Component
Component
staterestore : ( Ext.Component this , Object state )
组件状态被存储之后触发。
组件状态被存储之后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    StateProvider返回的状态哈希值。 如果没有禁止此事件，那么状态对象会被传递给applyState。 默认情况下，这样简单地把属性值拷贝到当前组件中。 可以覆盖此方法以提供自定的状态恢复操作。
Component
statesave : ( Ext.Component this , Object state )
在组件状态被保存到所配置的状态提供者之后触发。
在组件状态被保存到所配置的状态提供者之后触发。
监听器将会用如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    状态值hash。 这是由在足见上调用getState() 方法决定的。 开发者必须提供此方法以返回是否需要恢复状态，默认情况下， Ext.Component有一个空实现。
Component


Observable
    Component
      BoxComponent
        FlashComponent
          Chart
            CartesianChart
              StackedColumnChart

Class Ext.chart.StackedColumnChart

包: | Ext.chart
定义类的文件: | Chart.js
类: | StackedColumnChart
继承自: | CartesianChart

配置项

Config Options Defined By
allowDomMove : Boolean
在渲染时组件是否可以移动Dom节点(默认为true)。
Component
anchor : String
注: 这个配置只用于该组件被包含在一个已使用AnchorLayout...

注: 这个配置只用于该组件被包含在一个已使用 AnchorLayout (或者其子类)配置的Container时。 基于布局管理器，例如：

  • Ext.form.FormPanel
  • 指定 layout: 'anchor' // or 'form', or 'absolute'

参见 Ext.layout.AnchorLayout. anchor 。

BoxComponent
applyTo : Mixed
指定一个元素的id、一个DOM元素或者一个已经存在并被渲染到DIV中的元素，此DIV已经被...

指定一个元素的id、一个DOM元素或者一个已经存在并被渲染到DIV中的元素，此DIV已经被 渲染到document中，并且为当前组件指定了一些结构化的标签。

  • 描述 :
      当使用了 applyTo， 在主元素中也可以用id或者CSS类名来指定组件的托管部分， 并且，如果可以的话，创建的组件可能也会试图在那个标签中创建它的子组件。
  • 注意 :
      当使用此配置项时，无需调用render()方法。
      如果指定了applyTo属性，任何传递给 renderTo 的值都会被忽略，并且目标元素的父节点将会自动被用作组件的容器。
Component
autoEl : Mixed
一个表签名或者一个 DomHelper 描述，用来创建 Element ，它将封装当前组件...

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

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

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

{
    xtype: 'box',
    autoEl: {
        tag: 'img',
        src: 'http://www.example.com/example.jpg'

    }
}, {
    xtype: 'box',
    autoEl: {
        tag: 'blockquote',
        html: 'autoEl is cool!'
    }
}, {
    xtype: 'container',
    autoEl: 'ul',
    cls: 'ux-unordered-list',
    items: {
        xtype: 'box',
        autoEl: 'li',
        html: 'First list item'
    }
}
Component
autoHeight : Boolean
如果值为true，height配置项为'auto'，否则值为false的话使用固定的高度...

如果值为true，height配置项为'auto'，否则值为false的话使用固定的高度， 或者可以由其父类容器 layout manager来控制。(默认值为 false)。

注: 虽然很多组件继承了这个配置选项，但不是所有这些组件的自适应高度配置都会像期望的那样起作用。 设置autoHeight：值为true时，浏览器将根据元素的内容自动设置高度，这将意味着Ext不会去管理高度。

如果是由浏览器来管理高度，需要注意的是，通过浏览器进行调整的结构组件内不能被发现， 因此宽度的变化可能导致需要进行同步处理元素的高度。 例如：

var w = new Ext.Window({
    title: 'Window',
    width: 600,
    autoHeight: true,
    items: {
        title: 'Collapse Me',
        height: 400,
        collapsible: true,
        border: false,
        listeners: {
            beforecollapse: function() {
                w.el.shadow.hide();
            },
            beforeexpand: function() {
                w.el.shadow.hide();
            },
            collapse: function() {
                w.syncShadow();
            },
            expand: function() {
                w.syncShadow();
            }
        }
    }
}).show();
BoxComponent
autoScroll : Boolean
如果值为true，将会在该元素上使用overflow:'auto'配置，并且在必要的时候...
如果值为true，将会在该元素上使用overflow:'auto'配置，并且在必要的时候自动显示滚动条，否则，溢出部分的组件都会被切除(默认值为 false)。
BoxComponent
autoShow : Boolean
如果组件需要检测隐藏CSS属性(如 'x-hidden' 或者 'x-hide-display')并且在渲染时删除...
如果组件需要检测隐藏CSS属性(如 'x-hidden' 或者 'x-hide-display')并且在渲染时删除它们 (默认为false)，设置此值为true。
Component
autoWidth : Boolean
如果为true，使用width:'auto'配置，否则使用固定的宽度...

如果为true，使用width:'auto'配置，否则使用固定的宽度，或者可以由其父类容器的layout manager来控制。(默认值为 false)。

注: 虽然很多组件继承了这个配置选项，但不是所有这些组件的自适应宽度配置都会像期望的那样起作用。 设置autoWidth：值为true时，浏览器将根据元素的内容自动设置宽度，这将意味着Ext不会去管理宽度。

如果是由浏览器来管理宽度，需要注意的是，通过浏览器进行调整的结构组件内不能被发现，因此宽度的变化可能导致需要进行同步处理元素的宽度。 例如，在这个元素的目标是：

<div id='grid-container' style='margin-left:25%;width:50%'></div>
当浏览器窗口改变时，渲染后的Panel必须监听浏览器窗口大小的变化，以便通知子项，浏览器改变了其宽度：

var myPanel = new Ext.Panel({
    renderTo: 'grid-container',
    monitorResize: true, // relay on browser resize
    title: 'Panel',
    height: 400,
    autoWidth: true,
    layout: 'hbox',
    layoutConfig: {
        align: 'stretch'
    },
    defaults: {
        flex: 1
    },
    items: [{
        title: 'Box 1',
    }, {
        title: 'Box 2'
    }, {
        title: 'Box 3'
    }],
});
BoxComponent
backgroundColor : String
chart的背景颜色。默认为 '#ffffff'。
FlashComponent
boxMaxHeight : Number
设置组件的最大高度值...

设置组件的最大高度值。

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

BoxComponent
boxMaxWidth : Number
设置组件的最大宽度值...

设置组件的最大宽度值。

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

BoxComponent
boxMinHeight : Number
设置组件的最小高度值...

设置组件的最小高度值。

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

BoxComponent
boxMinWidth : Number
设置组件的最小宽度值...

设置组件的最小宽度值。

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

BoxComponent
bubbleEvents : Array
一个事件数组，当这些事件被触发时，将会被冒泡到所有父容器中。参见....

一个事件数组，当这些事件被触发时，将会被冒泡到所有父容器中。参见 Ext.util.Observable.enableBubble。 默认为 []。

Component
chartStyle : Object
设置图表样式。由于本身包含默认样式，所以修改这个属性将会覆盖内置...
设置图表样式。由于本身包含默认样式，所以修改这个属性将会覆盖内置样式。 使用 extraStyle 来为默认样式附加自定义样式。
Chart
clearCls : String
应用到特殊的clearing div的CSS类， 这个clearing div直接渲染到每个form field的包装器后面...

应用到特殊的clearing div的CSS类， 这个clearing div直接渲染到每个form field的包装器后面，以提供 清除field的功能(默认为 'x-form-clear-left')。

注意: 只有在当前组件被渲染到一个使用FormLayout 布局(例如 Ext.form.FormPanel 或者指定 layout:'form')的 容器中、或者是指定了一个fieldLabel 、或者指定isFormField=true 时此配置才有效。

另请参见 Ext.layout.FormLayout. fieldTpl。

Component
cls : String
一个可选的额外CSS类，它将被添加到当前组件的元素上(默认为'')...
一个可选的额外CSS类，它将被添加到当前组件的元素上(默认为'')。 此属性对于在组件上，或者它的任何使用标准CSS规则的孩子节点上， 添加定制的样式非常有用。
Component
contentEl : String
(可选)指定一个已存在的HTML元素，或者一个已存在HTML元素的...

(可选)指定一个已存在的HTML元素，或者一个已存在HTML元素的 id ，它们将被用作当前组件的内容。

  • 描述 :
    此配置选项被用来将一个已存在的HTML元素 插入到一个新组件(在组件渲染之后它简单地移动DOM元素) 的layout元素中，使它成为该组件的内容。
  • 注意 :
    指定的HTML元素将被append到组件的layout元素中， 在所有配置的 HTML 被插入之后， 并且，这样的话，在render事件 被触发时，document中将不再包含此元素。
    指定的HTML元素将不会参与组件所有可能使用的 layout 过程(译者注：指这些HTML元素 不会参与布局操作)。 它仅是HTML而已。布局操作实在孩子 items 上进行的。
    添加 x-hidden 或者 x-hide-display CSS类，以防在内容渲染到panel时发生闪烁。
Component
ctCls : String
一个可选的外部CSS样式，添加到这个组件的容器(默认值为 '')。 这个方法对于使用标准的CSS规则...

一个可选的外部CSS样式，添加到这个组件的容器(默认值为 '')。 这个方法对于使用标准的CSS规则，为组件或它的任何一个子组件添加特定的样式非常有用。 参见 Ext.layout.ContainerLayout和 extraCls 。

注意: ctCls 默认为 ''期望如下的类，它们将指定一个默认值:

  • Box Layout : 'x-box-layout-ct'
使用一个额外的CSS类配置以上的Class，它是append到默认对象上的。例如， 对于BoxLayout (Hbox and Vbox):
                                ctCls: 'x-box-layout-ct custom-class'

Component
data : Mixed
初始化数据集，它将被应用到 tpl 上以刷新组件的内容区域。
Component
disableCaching : Boolean
如果为true，则在图表url末端附加禁止缓存的字符参数，在Opera和IE下默认为true。
Chart
disabled : Boolean
当前组件处于无效状态时为true。 Read-only.
Component
disabledClass : String
当组件处于无效状态时添加到组件上的CSS类(默认为 'x-item-disabled')。
Component
expressInstall : Boolean
如果没有安装flash，设置为true将会提示用户进行安装。 注意，此参数会使用Ext.FlashComponent.EXPRESS_INSTALL_URL...
如果没有安装flash，设置为true将会提示用户进行安装。 注意，此参数会使用Ext.FlashComponent.EXPRESS_INSTALL_URL 此值应该设置为一个本地资源，默认为 false。
FlashComponent
extraStyle : Object
包含可能覆盖或者追加到默认样式的额外样式。默认为null，想要查看详细列表，请...
包含可能覆盖或者追加到默认样式的额外样式。默认为null，想要查看详细列表，请访问YUI图表站点 http://developer.yahoo.com/yui/charts/#basicstyles
如下列出一些常用样式:
  • padding - 图表内容边缘的空间，padding属性不会增加图表大小。
  • animationEnabled - 布尔值，用来指定标记动画是否启用，默认启用。
  • font - 用来定义图表字体样式的对象。默认为 { name: 'Tahoma', color: 0x444444, size: 11 }
    • name - 字体名称
    • color - 字体颜色 (十六进制编码, 如: "#ff0000", "ff0000" 或 0xff0000)
    • size - 以point（点）为单位的字体大小 (只能为整数, 如: 11)
    • bold - boolean
    • italic - boolean
    • underline - boolean
  • border - 定义图表边框的样式。图表会缩小尺寸以适应边框宽度。
    • color - 边框颜色 (十六进制编码, 如: "#ff0000", "ff0000" 或 0xff0000)
    • size - 以像素为单位的边框宽度 (只能为整数, 如: 1)
  • background - 定义图表背景样式的对象。
    • color - 边框颜色 (十六进制编码， 如: "#ff0000", "ff0000" 或 0xff0000)
    • image - 图片的URL，路径可以相对于当前页面，也可为绝对路径。
  • legend - 定义图例说明样式的对象
    • display - 图例说明的位置。 可选值为 "none", "left", "right", "top", 和 "bottom".
    • spacing - 图片的URL，路径可以相对于当前页面，也可为绝对路径。
    • padding, border, background, font - 见上面同名项。
  • dataTip - 定义数据提示样式的对象。 (tooltip).
    • padding, border, background, font - 见上面同名项。
  • xAxis 和 yAxis - 定义横纵坐标（x/y轴）样式的对象。
    • color - 见上面同名项。
    • size - 见上面同名项。
    • showLabels - boolean
    • labelRotation - 可选值范围从-90°到90°，默认为0。
  • majorGridLines 和 minorGridLines - 定义网格线条样式的对象。
    • color, size - 见上面同名项。
  • zeroGridLine - 定义零网格线样式的对象。
    • color, size - 见上面同名项。
  • majorTicks 和 minorTicks - 定义图表中刻度样式的对象。
    • color, size - 见上面同名项。
    • length - 从坐标轴上延伸的刻度的长度。
    • display - 刻度的显示方式，可选值为 "none", "inside", "outside", 和 "cross".
Chart
fieldLabel : String
紧靠此field显示的标签文本(默认值为 '')。注意...

紧靠此field显示的标签文本(默认值为 '')。

注意:只有在当前组件被渲染到一个使用FormLayout 的容器中时，此配置才有效。 (例如 Ext.form.FormPanel 或 指定 layout:'form')。

另请参见 hideLabel 、 Ext.layout.FormLayout和 fieldTpl。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Name'
    }]
});
Component
flashParams : Object
作为参数传递给flash对象的键值对集合。可能的参数可以在这里找到: http://kb2.adobe.com/cps/127/tn_12701.html默认为...
作为参数传递给flash对象的键值对集合。可能的参数可以在这里找到: http://kb2.adobe.com/cps/127/tn_12701.html默认为 undefined。
FlashComponent
flashVars : Object
作为flash变量传递给flash对象的键值对集合。 默认为 undefined。
FlashComponent
flashVersion : String
显示flash内容所需的flash版本。默认为 '9.0.115'。
FlashComponent
flex : Number
注: 这个配置只用于该组件被包含在一个已使用BoxLayout配置的Container中时...

注: 这个配置只用于该组件被包含在一个已使用BoxLayout配置的Container中时。通过计算每一个子组件的flex值所占全部flex值之和的比例，来决定子组件的宽(HBoxLayout)高(VBoxlayout)。 任何子项的 flex = 0 或 flex = undefined 将不被设置(初始值大小将不被改变)。

BoxComponent
height : Number
组件的高度(默认值为 auto)。注:如果想使用百分比的方式...
组件的高度(默认值为 auto)。注:如果想使用百分比的方式来设置值，请查看 Ext.Component.anchor。
BoxComponent
hidden : Boolean
如果当前组件处于隐藏状态，此值为true。Read-only。
Component
hideLabel : Boolean
true时完全隐藏label元素 ( label 和 separator)。 默认为 false。 默认情况下，即使你不指定...

true时完全隐藏label元素 ( label 和 separator)。 默认为 false。 默认情况下，即使你不指定 fieldLabel 它的空间仍然会被保留，这样这块区域会与其它确实拥有label的区域位于同一排。 讲此值设置为 true 将导致此区域不再保留此空间。

注意: 参见 clearCls 的注释。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield'
        hideLabel: true
    }]
});
Component
hideMode : String
组件如何隐藏，支持的值有： 'visibility' (css visibility), 'offsets' (位置偏移量为负值) 和...

组件如何隐藏，支持的值有： 'visibility' (css visibility), 'offsets' (位置偏移量为负值) 和 'display' (css display).

注意:一般首选默认值 'display'，因为当组件第一次显示的时候它们会自动进行布局 (隐藏的时候不会调整尺寸)。

Component
hideParent : Boolean
此值为true时，当调用hide/show方法时，将会hide和show组件的容器...
此值为true时，当调用hide/show方法时，将会hide和show组件的容器；false时将会 hide和show组件自身(默认为false)。例如，这可以用作window上隐藏按钮的一种 快捷操作，通过设置此按钮的hideParent:true，然后把它添加到window上。
Component
html : String/Object
一个HTML片段，或者一个 DomHelper 描述，用作layout元素的内容(默认为'')。...
一个HTML片段，或者一个 DomHelper 描述，用作layout元素的内容(默认为'')。 这个HTML内容在组件渲染之后才被添加，所以在 render 出发的时候，document中尚未包含此HTML。 但是这个内容将会在所有配置的 contentEl 之前被插入到body标签中。
Component
id : String
当前组件唯一的id(默认为auto-assigned id)...

当前组件唯一的id(默认为auto-assigned id)。 如果你需要在以后访问组件，而又没有一个有效的组件对象引用，那么你需要指定一个 id( 也就是，使用Ext. getCmp方法 )。

注意，此id也将被用作组件底层HTML标签的id，这些标签被渲染到页面中。 这将允许你编写基于id的CSS规则，以独立地描述指定的实例；并且，也可以通过 组件父标签的id选中子元素。

注意:为了避免与唯一的id 产生重复， 请参见 itemId 和 ref 。

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

Component
itemCls : String
注意: 只有在当前组件被渲染到一个使用FormLayout 布局的 容器中时此配置才有效...

注意: 只有在当前组件被渲染到一个使用FormLayout 布局的 容器中时此配置才有效。 (例如Ext.form.FormPanel 或者指定 layout:'form')。

一个附加的CSS类，应用到div上，包装当前field的表单元素。 如果提供了此参数， field级上的itemCls将会覆盖 container级上提供的 默认itemCls。 为itemCls指定的值将会被添加默认的 类('x-form-item')。

既然它被应用到项目的包装器上(参见 Ext.layout.FormLayout。 fieldTpl)， 它将允许你编写能应用到此field、label(如果有指定)、或者field内部任何其它元素的标准CSS规则。

注意: 参考 fieldLabel的注释。 .

示例用法:

// Apply a style to the field's label:
<style>
    .required .x-form-item-label {font-weight:bold;color:red;}
</style>

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Name',
        itemCls: 'required' //this label will be styled
    },{
        xtype: 'textfield',
        fieldLabel: 'Favorite Color'
    }]
});
Component
itemId : String
当没有可利用的对象引用时，itemId可以作为第二选择，用来获得一个组件的引用， 代替 ...

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

var c = new Ext.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'); // 与 Ext.getCmp()不同

p2 = p1.ownerCt.getComponent('p2'); // 通过兄弟对象获得引用

另请参见 id 和 ref 。

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

Component
labelSeparator : String
每个fieldLabel 文本后面现实的分隔符。 此属性可以在多个层次上进行配置...

每个fieldLabel 文本后面现实的分隔符。 此属性可以在多个层次上进行配置。优先顺序为：

  • field / component level
  • container level
  • layout level (默认为冒号 ':')
如不需要为当前field的label显示分隔符，指定一个空字符串''即可。

注意:参见 clearCls 的注释。

另请参见 hideLabel 和 Ext.layout.FormLayout。 fieldTpl。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    layoutConfig: {
        labelSeparator: '~'   // layout config has lowest priority (defaults to ':')
    },
    labelSeparator: '>>',     // config at container level
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Field 1',
        labelSeparator: '...' // field/component level config supersedes others
    },{
        xtype: 'textfield',
        fieldLabel: 'Field 2' // labelSeparator will be '='

    }]
});
Component
labelStyle : String
一个CSS样式描述字符串，它将直接应用到当前field的label上...

一个CSS样式描述字符串，它将直接应用到当前field的label上。 如果有设置，默认为容器的labelStyle值(例如 Ext.layout.FormLayout.labelStyle , 或者 '')。

注意:参见 clearCls 的注释。

另请参见 hideLabel 和 Ext.layout.FormLayout. fieldTpl。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Name',
        labelStyle: 'font-weight:bold;'
    }]
});
Component
listeners : Object
一个包含一个或多个事件处理器的配置对象，会在初始化的时候被添加到目标对象上...

一个包含一个或多个事件处理器的配置对象，会在初始化的时候被添加到目标对象上。 该配置对象应该是一个有效的监听器配置对象就像 addListener例子中指定的一样可一次附加多个处理器。

ExtJs Components上的DOM事件

一些 ExtJs Component 类导出时会选择一些DOM事件(例如 "click", "mouseover" 等等), 这通常只是在有额外的值可以被添加时发生。例如DataView类的 click事件会传递被点击的节点。也可以直接在Component的HTMLElementevent上访问DOM事件，但必需在Component被渲染后监听器才能添加到Element 上。可以按照以下步骤添加插件:

// 插件会用一个监听器配置对象进行配置。
//该组件会被添加到所有处理方法的参数列表上。
Ext.DomObserver = Ext.extend(Object, {
    constructor: function(config) {
        this.listeners = config.listeners ? config.listeners : config;
    },

    // 组件将自己传递进了插件的初始化方法里
    init: function(c) {
        var p, l = this.listeners;
        for (p in l) {
            if (Ext.isFunction(l[p])) {
                l[p] = this.createHandler(l[p], c);
            } else {
                l[p].fn = this.createHandler(l[p].fn, c);
            }
        }

        // 渲染后立即添加监听器到元素上
        c.render = c.render.createSequence(function() {
            var e = c.getEl();
            if (e) {
                e.on(l);
            }
        });
    },

    createHandler: function(fn, c) {
        return function(e) {
            fn.call(this, e, c);
        };
    }
});

var combo = new Ext.form.ComboBox({

    // 元素被点击后折叠
    plugins: [ new Ext.DomObserver({
        click: function(evt, comp) {
            comp.collapse();
        }
    })],
    store: myStore,
    typeAhead: true,
    mode: 'local',
    triggerAction: 'all'
});

Observable
margins : Object
注:此配置只用于该组件展现在一个使用BorderLayout...

注:此配置只用于该组件展现在一个使用BorderLayout 或 BoxLayout的两个子类之一作为布局的容器。

这个margins对象在该组件中的格式为：

{top: (top margin),right: (right margin),bottom: (bottom margin),left: (left margin)}

也可以是一个字符串，中间用空格分隔，margin值为数字。 把matches中每一个值的次序跟CSS中margin值的排列方式相对应：

  • 如果只有一个值，它适用于所有方面。
  • 如果有两个值，top和bottom的边框设置为第一个值，left和right设置为第二个值。
  • 如果有三个值，top设置为第一个值，left和right设置为第二个值，bottom设置为第三个值。
  • 如果有四个值，分别设置为top, right, bottom, left。

默认值:

{top:0, right:0, bottom:0, left:0}
BoxComponent
overCls : String
一个可选的额外的CSS类，它将在鼠标移过元素时被添加到组件上...
一个可选的额外的CSS类，它将在鼠标移过元素时被添加到组件上，鼠标移出时 删除。(默认为'')。此属性对于在组件上，或者它的任何使用标准CSS规则的孩子节点上， 添加定制的'active' 或者 'hover'样式非常有用。
Component
pageX : Number
如果该组件被包含在一个指定位置的容器中，这个值表示页面级的x坐标值（译者注：在有滚动条的情况下这个值很有用）。
BoxComponent
pageY : Number
如果该组件被包含在一个指定位置的容器中，这个值表示页面级的y坐标值（译者注：在有滚动条的情况下这个值很有用）。
BoxComponent
plugins : Object/Array
一个对象或者一个对象数组，为组件提供特殊的功能 ...
一个对象或者一个对象数组，为组件提供特殊的功能。 对一个合法的插件唯一的要求是它含有一个init()方法， 能接收一个Ext.Component型的参数。 当组件被创建时，如果有可用的插件，组件将会调用每个插件的init方法， 并将自身的引用作为方法参数传递给它。然后，每个插件就可以调用方法或者响应组件上的事件， 就像需要的那样提供自己的功能。
Component
ptype : String
需要创建配置的ptype。 当传递一个配置对象给构造函数时...
需要创建配置的ptype。 当传递一个配置对象给构造函数时，此配置选项不会被使用。 只有在使用懒初始化的时候此配置项才会被使用， 此时Plugin不是 通过一个完整的实例组件，而是通过一个Component配置指定的。 在渲染时，将会查找ptype以决定创建何种类型的Plugin。

如果你创建自己的Plugin，你可以通过 Ext.ComponentMgr.registerPlugin 对它们进行注册，以便能利用懒初始化和渲染机制。
Component
ref : String
一个路径描述，与组件的 ownerCt 相关，它描述了把当前组件的命名引用放置到哪个父容器中去。...

一个路径描述，与组件的 ownerCt 相关，它描述了把当前组件的命名引用放置到哪个父容器中去。

祖先的坐标路径可以通过'/'字符进行分隔。 例如，将一个Toolbar Button的引用放入 拥有此Toolbar的Panel中:

var myGrid = new Ext.grid.EditorGridPanel({
    title: 'My EditorGridPanel',
    store: myStore,
    colModel: myColModel,
    tbar: [{
        text: 'Save',
        handler: saveChanges,
        disabled: true,
        ref: '../saveButton'
    }],
    listeners: {
        afteredit: function() {
//          The button reference is in the GridPanel
            myGrid.saveButton.enable();
        }
    }
});

在上面的代码中，如果 ref 是 'saveButton' ，那么引用将会被放置到Toolbar中。 ref 中的每个'/' 都会从组件的 ownerCt 向上移动一级。

另请参见 added 和 removed 事件。

Component
region : String
注: 此配置只用于该组件展现在一个布局为BorderLayout的容器中...

注: 此配置只用于该组件展现在一个布局为BorderLayout的容器中(例如指定layout:'border')。

详见Ext.layout.BorderLayout。

BoxComponent
renderTo : Mixed
该值可以是一个节点的id、一个DOM节点或者一个已存在的元素...

该值可以是一个节点的id、一个DOM节点或者一个已存在的元素， 组件将会被渲染到其中。

  • 注意 :
      如果组件不是一个Container 的子项目时， 不要使用此选项。 渲染和管理它的子项目是一个Container 的layout manager的责任。
      当使用此配置项时，无需调用render()方法。

另请参见 render 。

Component
seriesStyles : Object
图表刷新后将要应用于各序列的样式。默认为 null.
Chart
stateEvents : Array
一个事件数组，当它们被触发时，组件需要保存自己的状态(默认值为 none)...

一个事件数组，当它们被触发时，组件需要保存自己的状态(默认值为 none)。 它们可以是任何该组件支持的事件类型，包括浏览器事件和 自定义事件(例如['click', 'customerchange'])。

对于保存和恢复组件状态的详细解释，参见 stateful

Component
stateId : String
为该组件指定的唯一的id值，它被用作管理组件状态的目的...
为该组件指定的唯一的id值，它被用作管理组件状态的目的。 (如果设定了id，默认值为组件自己的id，否则，如果组件使用自动生成的id，此值为null)。

对于保存和反解析组件状态的解释，参见 stateful 。

Component
stateful : Boolean
一个标志参数，它将引起组件在启动时尝试从一个保存的状态中恢复内部状态参数...

一个标志参数，它将引起组件在启动时尝试从一个保存的状态中恢复内部状态参数。 组件必须要么拥有一个 stateId 或者 id ，它们被分配给需要被管理的状态属性。 在跨页面加载时，不保证自动生成的id属性的稳定性， 并且，不能依赖此id来保存和恢复一个组件的相同状态。

为了保存状态的操作能够工作，状态管理器的提供者必须 被设置成一个Ext.state.Provider 的实现类，它覆盖了set 和get 方法，以便保存和恢复name/value对。 有一个内置的Ext.state.CookieProvider 可用。

为当前页面设置状态提供者:

Ext.state.Manager.setProvider(new Ext.state.CookieProvider({
    expires: new Date(new Date().getTime()+(1000*60*60*24*7)), //7 days from now
}));

当 stateEvents 配置项中其中之一的事件被触发时， 一个状态可保存的组件将试图保存其状态。

保存状态时，一个可保存状态的组件首先需要通过调用 getState 方法来序列化它的状态。 默认情况下，此函数什么事都不做。 开发者必须提供一个实现，返回一个hash对象，它描述了组件可恢复的状态。

getState方法产生的值将会传递给 Ext.state.Manager.set 方法，它使用配置的 Ext.state.Provider 来保存对象，以组件的 stateId 为key，或者，如果此值（指stateId）没有指定时， 使用它的 id 作为key。

在进行构造时，一个可保存状态的组件试图通过调用 Ext.state.Manager.get方法来 恢复它的状态，传递 stateId 或者，如果此值（指stateId）没有指定时， 使用它的 id 作为参数。

结果对象被传递给 applyState 。 applyState 的默认实现只是简单地把属性拷贝到对象中， 但是开发者可以覆盖此方法以支持更多行为。

通过向 beforestaterestore, staterestore, beforestatesave 和 statesave 事件上绑定监听器，你可以在保存和恢复状态时进行额外的处理。

Component
style : String
被添加到组件元素的特定样式。 必须是按照...
被添加到组件元素的特定样式。 必须是按照 Ext.Element.applyStyles 类指定格式的合法参数值。

new Ext.Panel({
    title: 'Some Title',
    renderTo: Ext.getBody(),
    width: 400, height: 300,
    layout: 'form',
    items: [{
        xtype: 'textarea',
        style: {
            width: '95%',
            marginBottom: '10px'
        }
    },
        new Ext.Button({
            text: 'Send',
            minWidth: '100',
            style: {
                marginBottom: '10px'
            }
        })
    ]
});
Component
tabTip : String
注: 这个配置只用于当该组件作为TabPanel的一个子项目时使用...

注: 这个配置只用于当该组件作为TabPanel的一个子项目时使用。

一个String类型的innerHTML(支持html标签)，当鼠标放在该选项上的时，显示一个tooltip。为了tips能够被渲染，Ext.QuickTips.init()必须被提前调用。
BoxComponent
tpl : Mixed
一个 Ext.Template , Ext.XTemplate 或者一个用来形成一个Ext.XTemplate的字符串数组...
一个 Ext.Template , Ext.XTemplate 或者一个用来形成一个Ext.XTemplate的字符串数组。 与 data 和 tplWriteMode 配置项协同使用。
Component
tplWriteMode : String
刷新组件的内容区域时使用的Ext.(X)Template方式。 默认为'overwrite' (参见 Ext.XTemplate.overwrite )。
刷新组件的内容区域时使用的Ext.(X)Template方式。 默认为'overwrite' (参见 Ext.XTemplate.overwrite )。
Component
url : String
需要包含在chart中的URL。默认为 undefined。
Chart
width : Number
组件的宽度(默认值为 auto)。注:如果想使用百分比的方式...
组件的宽度(默认值为 auto)。注:如果想使用百分比的方式来设置值，请查看 Ext.Component.anchor。
BoxComponent
wmode : String
flash对象的wmode。此参数可以用来控制层叠次序。默认为 'opaque'。
FlashComponent
x : Number
如果被包含在一个指定位置的容器中，这个值表示x(left)坐标值。
BoxComponent
xtype : String
需要创建配置的xtype。 当传递一个配置对象给构造函数时...
需要创建配置的xtype。 当传递一个配置对象给构造函数时，此配置选项不会被使用。 只有在使用懒初始化的时候此配置项才会被使用，此时容器的子项目不是 通过一个完整的实例组件，而是通过一个Component配置指定的。 在渲染时，将会查找xtype以决定创建何种类型的子组件。

预定义的xtype列表如下： here。

如果你继承Component创建你自己的组件，你需要使用Ext.ComponentMgr.registerType 对它们进行注册，以便利用懒初始化和渲染机制。
Component
y : Number
如果被包含在一个指定位置的容器中，这个值表示y(top)坐标值。
BoxComponent

公共属性

Property Defined By
CHART_URL : String
设置从哪里加载图表。应该设置为本地图表源（路径）。
Chart
EXPRESS_INSTALL_URL : String
如果不存在，为初始化flash设置的url。 此参数应该设置为一个本地资源。
FlashComponent
disabled : Boolean
当前组件处于无效状态时为true。 Read-only.
Component
el : Ext.Element
封装了当前组件的Ext.Element。 Read-only。通常情况下，这将是一个<DIV>元素，它由此类的...

封装了当前组件的Ext.Element。 Read-only。

通常情况下，这将是一个<DIV>元素，它由此类的 onRender方法创建，但是它可以通过使用 autoEl 配置项进行覆盖。

注意: 直到组件渲染完成此元素都将处于无效状态。

如需向当前组件的 DOM事件(而不是当前组件自己的Observable事件)添加监听器， 更多建议，参见 listeners 配置项，或者直接使用一个render监听器:

new Ext.Panel({
    title: 'The Clickable Panel',
    listeners: {
        render: function(p) {
            // Append the Panel to the click handler's argument list.
            p.getEl().on('click', handlePanelClick.createDelegate(null, [p], true));
        },
        single: true  // Remove the listener after first invocation
    }
});

另请参见 getEl

Component
hidden : Boolean
如果当前组件处于隐藏状态，此值为true。Read-only。
Component
initialConfig : Object
当前组件的初始化配置描述。 Read-only。
Component
ownerCt : Ext.Container
组件所属的Container (默认为undefined，当前组件被添加到一个容器中时此值被自动设置)...
组件所属的Container (默认为undefined，当前组件被添加到一个容器中时此值被自动设置)。 Read-only。

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

Component
refOwner : Ext.Container
如果当前组件是一个容器的孩子，并且是通过一个 ref 配置项被注册的，则此值为 ref 引用被插入到的祖先容器。
如果当前组件是一个容器的孩子，并且是通过一个 ref 配置项被注册的，则此值为 ref 引用被插入到的祖先容器。
Component
rendered : Boolean
如果当前组件已经被渲染了，此值为true。Read-only.
Component

公共方法

Method Defined By
StackedColumnChart ()
参数:
  • 无。
返回值:
  • void
StackedColumnChart
addClass ( string cls ) : Ext.Component
为组件底层的元素添加CSS样式。
为组件底层的元素添加CSS样式。
参数:
  • cls : string
    需要添加的CSS样式的class名称
返回值:
  • Ext.Component
    this
Component
addEvents( Object|String o, string Optional. ) : void
添加指定的事件到事件列表上，事件会被该Observable触发。
添加指定的事件到事件列表上，事件会被该Observable触发。
参数:
  • o : Object|String
    以事件名作为属性true作为值的对象 或者当多个事件名被分开的传递时则为第一个事件名。
  • Optional. : string
    事件名被分开的传递时则为事件名。 用法:
    this.addEvents('storeloaded', 'storecleared');
返回值:
  • void
Observable
addListener( String eventName, Function handler, [Object scope], [Object options] ) : void
给对象添加事件处理器。
给对象添加事件处理器。
参数:
  • eventName : String
    监听的事件名。
  • handler : Function
    事件调用的方法
  • scope : Object
    （可选）处理方法执行的作用域 (this的引用 reference)。 如果被忽略。默认为触发事件的对象。
  • options : Object
    （可选）包含处理器配置和属性的对象。 可能包含以下的属性:
    • scope : Object
      处理方法执行的作用域(this的引用) 。 如果被忽略。默认为触发事件的对象。
    • delay : Number
      在触发事件后延迟调用处理器的毫秒数。
    • single : Boolean
      如果为True则添加一个处理器来处理下一次的事件触发（仅一次），然后移除自己。
    • buffer : Number
      使得处理器延迟指定毫秒数后预定的运行在 一个Ext.util.DelayedTask中 。 如果事件在时间内再一次被触发，原始的处理器不会被调用，但是新的处理器会预定的在他的位置上。
    • target : Observable
      如果事件在目标的Observable上触发则仅仅调用处理器， 否则 事件会从子类的Observable上冒泡

    组合选项
    使用这些选项参数,可能会组合出不同类型的监听器：

    一个延迟的，一次性的监听器。

    myDataView.on('click', this.onClick, this, {
single: true,
delay: 100
});

    一次调用附加多个处理器
    该方法同样支持传递一个包含指定的多个处理器的属性的配置对象参数。

    myGridPanel.on({
'click' : {
    fn: this.onClick,
    scope: this,
    delay: 100
},
'mouseover' : {
    fn: this.onMouseOver,
    scope: this
},
'mouseout' : {
    fn: this.onMouseOut,
    scope: this
}
});

    或者一个简写的语法：

    myGridPanel.on({
'click' : this.onClick,
'mouseover' : this.onMouseOver,
'mouseout' : this.onMouseOut,
 scope: this
});
返回值:
  • void
Observable
applyToMarkup ( String/HTMLElement el ) : void
将此组件添加到已存在的有效的HTML标签中。 使用该方法时，无需再调用render()方法。
将此组件添加到已存在的有效的HTML标签中。 使用该方法时，无需再调用render()方法。
参数:
  • el : String/HTMLElement
返回值:
  • void
Component
bindStore ( Store store ) : void
改变图表绑定的数据集，并刷新。
改变图表绑定的数据集，并刷新。
参数:
  • store : Store
    绑定到图表的数据集合。
返回值:
  • void
Chart
cloneConfig ( Object overrides ) : Ext.Component
默认使用原先传递给当前实例的配置值克隆当前组件。
默认使用原先传递给当前实例的配置值克隆当前组件。
参数:
  • overrides : Object
    一个新的配置项，包含需要覆盖到克隆版本的所有属性。 可以传递一个id参数给此对象，否则将自动生成一个新的id以避免发生重复。
返回值:
  • Ext.Component
    当前组件的克隆副本
Component
destroy () : void
通过如下方法销毁对象：删除所有的事件监听器、将组件的元素从DOM树中删除...
通过如下方法销毁对象：删除所有的事件监听器、将组件的元素从DOM树中删除（如果可以）、 将组件从它的 Ext.Container（如果可用）中删除、 并且将它从Ext.ComponentMgr中 注销。 销毁操作一般由框架自动完成，一般情况下不需要直接调用该方法。
参数:
  • 无。
返回值:
  • void
Component
disable () : Ext.Component
将组件置为无效状态，并出发'disable'事件。
将组件置为无效状态，并出发'disable'事件。
参数:
  • 无。
返回值:
  • Ext.Component
    this
Component
enable () : Ext.Component
将组件置为有效状态并触发'enable'事件。
将组件置为有效状态并触发'enable'事件。
参数:
  • 无。
返回值:
  • Ext.Component
    this
Component
enableBubble( String/Array events ) :void
是否现在使得事件会被该Observable触发并调用 this.getBubbleTarget()方法在拥有者的继承树...

是否现在使得事件会被该Observable触发并调用 this.getBubbleTarget()方法在拥有者的继承树中冒泡。Observable的基础类中没有该方法的实现。

该方法一般被Ext.Components用来冒泡事件到拥有者的容器。参看Ext.Component.getBubbleTarget默认的实现 在Ext.Component中返回组件的直接拥有者。但是如果需要的是一个已知的目标，该方法可以被重写来更快的访问需求的目标。

例子:

Ext.override(Ext.form.Field, {
    // 添加方法到Field的initComponent上改变事件为冒泡
    initComponent : Ext.form.Field.prototype.initComponent.createSequence(function() {
        this.enableBubble('change');
    }),

    // 我们知道我们想让Field的事件冒泡到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() {
            // 如果样式被修改标题会变红。
            myForm.header.setStyle('color', 'red');
        }
    }
});
参数:
  • events : String/Array
    冒泡的事件名，或事件名数组
返回值:
  • void
Observable
findParentBy ( Function fn ) : Ext.Container
通过自定义的函数查找当前组件上层任何层次上的容器...
通过自定义的函数查找当前组件上层任何层次上的容器。 如果传递的函数返回true，容器对象将被返回。
参数:
  • fn : Function
    自定义的函数，使用如下参数调用(container,this component)。
返回值:
  • Ext.Container
    自定义函数返回true的第一个容器
Component
findParentByType ( String/Class xtype ) : Ext.Container
通过xtype或者class查找当前组件上层任何层次上的容器
通过xtype或者class查找当前组件上层任何层次上的容器
参数:
  • xtype : String/Class
    组件的xtype字符串，或者直接是组件的class
返回值:
  • Ext.Container
    符合指定xtype或者class的第一个容器
Component
fireEvent( String eventName, Object... args ) : Boolean
用传入的参数触发指定的事件 (减去事件名)。 一个事件可以被设置为冒泡 Obse...

用传入的参数触发指定的事件 (减去事件名)。

一个事件可以被设置为冒泡到Observable父类继承树(参看 Ext.Component.getBubbleTarget) 调用enableBubble实现。

参数:
  • eventName : String
    触发的事件名。
  • args : Object...
    传递给处理器的可变长度参数。
返回值:
  • Boolean
    如果有任何的处理器返回false则返回false，否则返回true。
Observable
focus ( [ Boolean selectText ], [ Boolean/Number delay ] ) : Ext.Component
尝试将当前组件设为焦点。
尝试将当前组件设为焦点。
参数:
  • selectText : Boolean
    (可选) 如果可用，同时选中组件内部的文本
  • delay : Boolean/Number
    (可选)将当前组件设置为焦点的延迟时间(设置为true等于0毫秒)
返回值:
  • Ext.Component
    this
Component
getBox ( [ Boolean local ] ) : Object
获取组件底层元素当前盒子模型的尺寸。（译者注：盒子模型是CSS术语，详细解释请自行搜索。）
获取组件底层元素当前盒子模型的尺寸。（译者注：盒子模型是CSS术语，详细解释请自行搜索。）
参数:
  • local : Boolean
    (可选)值为true时，组件的left值和top值将代替页面的XY被返回。(默认值为false)
返回值:
  • Object
    返回值的格式{x, y, width, height}
BoxComponent
getBubbleTarget () : Ext.Container
为Observable的fireEvent方法提供链接，它沿着继承结构进行冒泡操作。
为Observable的fireEvent方法提供链接，它沿着继承结构进行冒泡操作。
参数:
  • 无。
返回值:
  • Ext.Container
    拥有当前组件的容器。
Component
getEl () : Ext.Element
返回 Ext.Element ，它包装了当前组件。...

返回 Ext.Element ，它包装了当前组件。

通常情况下，这将是一个<DIV>元素，它是由该类的onRender方法创建的， 但是可以使用autoEl配置项 覆盖它。

注意: 此元素将会一直处于无效状态直到当前组件渲染完成。

如需向当前组件的 DOM事件(而不是当前组件自己的Observable事件)添加监听器， 更多建议，参见 listeners 配置项，或者直接使用一个render监听器:

new Ext.Panel({
    title: 'The Clickable Panel',
    listeners: {
        render: function(p) {
            // Append the Panel to the click handler's argument list.
            p.getEl().on('click', handlePanelClick.createDelegate(null, [p], true));
        },
        single: true  // Remove the listener after first invocation
    }
});
参数:
  • 无。
返回值:
  • Ext.Element
    包装当前组件的元素。
Component
getHeight () : Number
获取该组件的当前高度值。
获取该组件的当前高度值。
参数:
  • 无。
返回值:
  • Number
BoxComponent
getId () : String
返回当前组件的id，如果没有定义id，则自动生成并返回一个id:'ext-comp-'...
返回当前组件的 id 如果没有定义 id 则自动生成并返回一个 id

'ext-comp-' + (++Ext.Component.AUTO_ID)
参数:
  • 无。
返回值:
  • String
    id
Component
getItemId () : String
返回当前组件的 itemId 。 如果没有通过配置参数指定 itemId 那么，将会使用...
返回当前组件的 itemId 。 如果没有通过配置参数指定 itemId 那么，将会使用 getId 返回 id 。
参数:
  • 无。
返回值:
  • String
Component
getOuterSize () : Object
获取当前组件所在元素的尺寸大小，包括边缘的空白处。
获取当前组件所在元素的尺寸大小，包括边缘的空白处。
参数:
  • 无。
返回值:
  • Object
    一个包含元素大小的对象 {width: (element width + left/right margins), height: (element height + top/bottom margins)}
BoxComponent
getPosition ( [ Boolean local ] ) : Array
获取组件底层元素当前的XY位置。
获取组件底层元素当前的XY位置。
参数:
  • local : Boolean
    (可选)如果为true，将返回元素的left和top值，而不是相对于页面内的 XY。(默认值为 false)
返回值:
  • Array
    元素的XY位置值(例如：[100, 200])
BoxComponent
getResizeEl () : Ext.Element
返回该组件的最外层用来定义这些组件整体大小的Element...

返回该组件的最外层用来定义这些组件整体大小的Element对象。

通常用 getEl 方法将会返回相同的Element对象，但在有些情况下，组件可能有一些更多的封装了它的主要动态Element对象的Element对象。

例如ComboBox。它是封装在一个包含<input>元素的包装元素里(这将返回其 getEl方法和触发按钮的元素)。返回的元素为resizeEl。

参数:
  • 无。
返回值:
  • Ext.Element
    The Element which is to be resized by size managing layouts.
BoxComponent
getSize () : Object
获取组件底层元素当前的大小。
获取组件底层元素当前的大小。
参数:
  • 无。
返回值:
  • Object
    一个包含元素大小的对象{width: (element width), height: (element height)}
BoxComponent
getWidth () : Number
获取该组件的当前宽度值。
获取该组件的当前宽度值。
参数:
  • 无。
返回值:
  • Number
BoxComponent
getXType () : String
获取当前组件的xtype，它是用 Ext.ComponentMgr 注册的。 所有可用的xtype列表，参见...
获取当前组件的xtype，它是用 Ext.ComponentMgr 注册的。 所有可用的xtype列表，参见 Ext.Component 类头部。示例用法:

var t = new Ext.form.TextField();
alert(t.getXType());  // alerts 'textfield'
参数:
  • 无。
返回值:
  • String
    The xtype
Component
getXTypes () : String
返回此组件的xtype继承树，用字符'-'分隔。 所有可用的xtype值...

返回此组件的xtype继承树，用字符'-'分隔。 所有可用的xtype值，请参见Ext.Component 类的头部。

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

示例用法:

var t = new Ext.form.TextField();
alert(t.getXTypes());  // alerts 'component/box/field/textfield'
参数:
  • 无。
返回值:
  • String
    xtype层次字符串
Component
hasListener( String eventName ) : Boolean
检测对象是否包含指定事件的任何监听器
检测对象是否包含指定事件的任何监听器
参数:
  • eventName : String
    检测的事件名
返回值:
  • Boolean
    如果事件被监听则为true，否则为false
Observable
hide () : Ext.Component
隐藏当前组件。 监听 beforehide' 事件并且返回false 可以取消隐藏组件的操作。 在隐藏组件之后触发...
隐藏当前组件。 监听 beforehide' 事件并且返回false 可以取消隐藏组件的操作。 在隐藏组件之后触发 ' hide' 事件。 如果组件被配置成 hidden 那么此方法在内部被调用。
参数:
  • 无。
返回值:
  • Ext.Component
    this
Component
isVisible () : Boolean
如果当前组件可见，返回true。
如果当前组件可见，返回true。
参数:
  • 无。
返回值:
  • Boolean
    如果当前组件可见，返回true，其它返回false。
Component
isXType ( String xtype , [ Boolean shallow ] ) : Boolean
Tests whether or not this Component is of a specific xtype. This can test whether this Component is descended from th...

测试此组件是否是指定的xtype。此方法既可以测试是否是指定的xtype的某个子类， 或者它是否直接是指定的xtype类(shallow=true)。

如果使用你自己的子类，必须知道组件必须注册它的xtype值。

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

示例用法:

var t = new Ext.form.TextField();
var isText = t.isXType('textfield');        // true
var isBoxSubclass = t.isXType('box');       // true, descended from BoxComponent
var isBoxInstance = t.isXType('box', true); // false, not a direct BoxComponent instance
参数:
  • xtype : String
    需要为当前组件进行检测的xtype
  • shallow : Boolean
    (可选) 如果为false，检测组件是否是xtype继承树中的某个子类（默认是这种情况）， 如果为true，只检测组件是否是指定的xtype类型。
返回值:
  • Boolean
    如果当前组件是指定xtype的子类，返回true，其它返回flase。
Component
mon ( Observable|Element item , Object|String ename , Function fn , Object scope , Object opt ) : void
向任何Observable对象(或者元素)上添加监听器，监听器将会在组件...

向任何Observable对象(或者元素)上添加监听器，监听器将会在组件销毁时被自动删除。
用法：

myGridPanel.mon(myGridPanel.getSelectionModel(), 'selectionchange', handleSelectionChange, null, {buffer: 50});

or:

myGridPanel.mon(myGridPanel.getSelectionModel(), {
    selectionchange: handleSelectionChange,
    buffer: 50
});
参数:
  • item : Observable|Element
    需要添加listener/listeners的项目。
  • ename : Object|String
    事件名，或者一个包含事件名属性的对象。
  • fn : Function
    (可选) 如果 ename 参数是一个事件名，此参数为处理函数。
  • scope : Object
    (可选)如果 ename 参数是一个事件名称，此参数是作用域 ( this 引用)，监听函数将会在此作用域中被执行。
  • opt : Object
    (可选)如果 ename 参数是一个事件名称， 此参数是 addListener 配置项。
返回值:
  • void
Component
mun ( Observable|Element item , Object|String ename , Function fn , Object scope ) : void
删除通过mon 方法添加的监听器。
删除通过mon 方法添加的监听器。
参数:
  • item : Observable|Element
    需要删除listener/listeners的项目。
  • ename : Object|String
    事件名称，或者一个包含事件名称属性的对象。
  • fn : Function
    (可选)如果 ename 参数是一个事件名称，此参数是一个处理函数。
  • scope : Object
    (可选)如果 ename 参数是一个事件名称，此参数是作用域 ( this 引用)，监听函数将会在此作用域中被执行。
返回值:
  • void
Component
nextSibling () : Ext.Component
返回所属容器中的下一个组件
返回所属容器中的下一个组件
参数:
  • 无。
返回值:
  • Ext.Component
Component
on( String eventName, Function handler, [Object scope], [Object options] ) : void
给对象添加事件处理器 (addListener的简写形式)
给对象添加事件处理器 (addListener的简写形式。)
参数:
  • eventName : String
    监听的事件类型
  • handler : Function
    事件调用的方法
  • scope : Object
    （可选）处理方法执行时的作用域 (this 的引用)。 如果被忽略。默认为触发事件的对象。
  • options : Object
    可选 包含处理器配置的对象。
返回值:
  • void
Observable
previousSibling () : Ext.Component
返回所属容器中的前一个组件
返回所属容器中的前一个组件
参数:
  • 无。
返回值:
  • Ext.Component
Component
purgeListeners() : void
移除对象上所有的监听器
移除对象上所有的监听器
参数:
  • 无。
返回值:
  • void
Observable
relayEvents( Object o, Array events ) : void
从指定的Observable上传递选择的事件就好像被当前对象触发一样。
从指定的Observable上传递选择的事件就好像被当前对象触发一样。
参数:
  • o : Object
    该Observable上的事件被当前对象传递。
  • events : Array
    传递的数组名。
返回值:
  • void
Observable
removeClass ( string cls ) : Ext.Component
从组件底层的元素上删除一个CSS类。
从组件底层的元素上删除一个CSS类。
参数:
  • cls : string
    需要移除的CSS类名
返回值:
  • Ext.Component
    this
Component
removeListener( String eventName, Function handler, [Object scope] ) : void
删除一个事件处理器。
删除一个事件处理器。
参数:
  • eventName : String
    处理器关联的事件类型。
  • handler : Function
    移除的处理器。 这应该是传递到addListener里的方法的引用。
  • scope : Object
    （可选）处理器指定的初始作用域。
返回值:
  • void
Observable
render ( [ Element/HTMLElement/String container ], [ String/Number position ] ) : void
在传递进来的HTML元素中渲染当前组件。...

在传递进来的HTML元素中渲染当前组件。

如果你正在使用一个Container 对象放置当前组件，那么请不要使用render方法。

当容器第一次被渲染时，它的子组件将会被容器的 layout 管理器渲染。

某些布局管理器允许动态添加子组件。它们包括 Ext.layout.CardLayout, Ext.layout.AnchorLayout, Ext.layout.FormLayout, Ext.layout.TableLayout。

当一个新的子组件被添加时，如果容器已经被渲染了， 你可能需要调用容器的 doLayout 方法来刷新视图，它将导致所有没有被渲染的子组件进行渲染操作。 此操作是必须的，这样你可以添加多个子组件而只刷新一次layout。

当创建复杂的UI时，非常重要的一点是，请记住调整子项目的尺寸和位置是容器的 layout 管理器的职责。 如果你希望子项目的尺寸对用户交互作出反应， 你必须为容器配置一个布局管理器，它将创建和管理你心里想要的那种布局。

忽略容器的layout 配置意味着将会使用一个基本的布局管理器，它除了按次序把子组件 渲染到容器中之外什么事情都不做。 这种情况下，任何尺寸和位置的调整操作都不会发生。

参数:
  • container : Element/HTMLElement/String
    (可选) 需要在其中渲染当前组件的元素。 如果它是从一个已存在的标签中创建的，此参数应该被忽略。
  • position : String/Number
    (可选) 容器中的一个元素ID或者一个DOM节点索引， 当前组件将会被插入到它前面 (默认append到容器的尾部)
返回值:
  • void
Component
resumeEvents() : void
重新开始触发事件。(参见suspendEvents) 如果事件以queueSuspended参数被挂起，则在事件被挂起时 ...
重新开始触发事件。(参见 suspendEvents) 如果事件以queueSuspended 参数被挂起，则在事件被挂起时触发的事件会被传递到所有的监听器上
参数:
  • 无。
返回值:
  • void
Observable
setAutoScroll ( Boolean scroll ) : Ext.BoxComponent
设置该组件内容溢出时是否自动显示滚动条。
设置该组件内容溢出时是否自动显示滚动条。
参数:
  • scroll : Boolean
    值为true的话组件自动显示滚动条。
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setDisabled ( Boolean disabled ) : Ext.Component
工具函数，使用布尔值设置有效/无效(disabled/enabled )。
工具函数，使用布尔值设置有效/无效(disabled/enabled )。
参数:
  • disabled : Boolean
返回值:
  • Ext.Component
    this
Component
setHeight ( Mixed height ) : Ext.BoxComponent
设置此组件的高度。该方法将触发resize事件。
设置此组件的高度。该方法将触发resize事件。
参数:
  • height : Mixed
    The new height to set.
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setPagePosition ( Number x , Number y ) : Ext.BoxComponent
设置组件在页面中的XY位置。 如果需要设置left和top值 ，请使用...
设置组件在页面中的XY位置。 如果需要设置left和top值 ，请使用setPosition方法。 该方法触发move事件。
参数:
  • x : Number
    The new x position
  • y : Number
    The new y position
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setPosition ( Number left , Number top ) : Ext.BoxComponent
设置组件的left和top值。设置组件的页面XY值，请使用setPagePosition方法。该方法触发...
设置组件的left和top值。设置组件的页面XY值，请使用setPagePosition方法。该方法触发move事件。
参数:
  • left : Number
    The new left
  • top : Number
    The new top
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setSeriesStyles ( styles {Array} ) : void
为图表中所有序列设置样式。
为图表中所有序列设置样式。
参数:
  • {Array} : styles
    为列表中所有序列样式进行初始化。
返回值:
  • void
Chart
setSize ( Mixed width , Mixed height ) : Ext.BoxComponent
设置BoxComponent的宽度和高度。 此方法触发resize事件...
设置BoxComponent的宽度和高度。 此方法触发resize事件。此方法可以接收单独的width或者height值作为参数， 或者你可以传递像这样的一个size对象： {width:10, height:20} 。
参数:
  • width : Mixed
    设置的新的width值。这可以是：
    • 一个Number类型指定Element新的宽度 Ext.Element.defaultUnit(默认为像素 :'px')。
    • 一个String类型用于设置width的CSS样式。
    • 一个size对象格式为 {width: widthValue, height: heightValue} 。
    • 值为 undefined 时，保留原来的width不变。
  • height : Mixed
    设置的新的height值(如果第一个参数传递了一个size对象，此参数没有必要传递)。这可以是：
    • 一个Number类型指定Element新的高度 Ext.Element.defaultUnit(默认为像素 :'px')。
    • 一个String类型用于设置height的CSS样式。也有可能不会被使用到。
    • 值为 undefined 时，保留原来的height不变。
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setStyle ( name {String} , value {Object} ) : void
为图表实例设置单一样式值。
为图表实例设置单一样式值。
参数:
  • {String} : name
    将要改变的图表样式名称。
  • {Object} : value
    图表样式的新值。
返回值:
  • void
Chart
setStyles ( styles {Object} ) : void
重置图表实例上的所有样式。
Resets all styles on the Chart instance.
参数:
  • {Object} : styles
    Initializer for all Chart styles.
返回值:
  • void
Chart
setVisible ( Boolean visible ) : Ext.Component
工具方法，通过使用布尔值隐藏或者显示当前组件。
工具方法，通过使用布尔值隐藏或者显示当前组件。
参数:
  • visible : Boolean
    true时显示，false时隐藏
返回值:
  • Ext.Component
    this
Component
setWidth ( Mixed width ) : Ext.BoxComponent
设置组件的宽度。 此方法触发resize事件。
设置组件的宽度。 此方法触发resize事件。
参数:
  • width : Mixed
    The new width to set.
返回值:
  • Ext.BoxComponent
    this
BoxComponent
show () : Ext.Component
显示当前组件。监听' beforeshow' 事件，返回 false 取消显示组件...
显示当前组件。监听' beforeshow' 事件，返回 false 取消显示组件。在显示组件之后触发' show' 事件。
参数:
  • 无。
返回值:
  • Ext.Component
    this
Component
suspendEvents( Boolean queueSuspended ) : void
暂停触发所有的事件。 (参看resumeEvents)
暂停触发所有的事件。（参看 resumeEvents)
参数:
  • queueSuspended : Boolean
    如果传递为true则排列好暂停的事件使得在调用 resumeEvents 后再触发它们，而不是抛弃所有暂停的事件。
返回值:
  • void
Observable
syncSize () : Ext.BoxComponent
强制组件的大小按照此组件底层元素当前的高度和宽度计算。
强制组件的大小按照此组件底层元素当前的高度和宽度计算。
参数:
  • 无。
返回值:
  • Ext.BoxComponent
    this
BoxComponent
un( String eventName, Function handler, [Object scope] ) : void
删除一个事件处理器(removeListener方法的简写形式)
删除一个事件处理器(removeListener方法的简写形式。)
参数:
  • eventName : String
    处理器关联的事件类型
  • handler : Function
    被删除的处理器 这应该是传入 addListener 中的方法的引用。
  • scope : Object
    （可选）为处理器指定的初始作用域。
返回值:
  • void
Observable
update ( Mixed htmlOrData , [ Boolean loadScripts ], [ Function callback ] ) : void
刷新组件的内部区域。
刷新组件的内部区域。
参数:
  • htmlOrData : Mixed
    如果已经通过tpl为当前组件配置了一个模板，那么 将会使用此参数来装配模板。 如果没有为当前组件配置模板，组件的内容区域将会通过Ext.Element 进行刷新。
  • loadScripts : Boolean
    (可选)只用在使用html配置时此参数才合法。默认为false。
  • callback : Function
    (可选)只用在使用html配置时此参数才合法。 当脚本加载完成时回调函数才被执行。
返回值:
  • void
Component
updateBox ( Object box ) : Ext.BoxComponent
设置此组件底层元素的盒子模型尺寸。(译者注：盒子模型是CSS术语，详细资料请自行搜索。)
设置此组件底层元素的盒子模型尺寸。(译者注：盒子模型是CSS术语，详细资料请自行搜索。)
参数:
  • box : Object
    一个格式为{x, y, width, height}的对象
返回值:
  • Ext.BoxComponent
    this
BoxComponent

公共事件

Event Defined By
added : ( Ext.Component this , Ext.Container ownerCt , number index )
当一个组件被添加到一个Ext.Container时触发
当一个组件被添加到一个Ext.Container时触发
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • ownerCt : Ext.Container
    用于组件的容器
  • index : number
    添加组件的位置
Component
afterrender : ( Ext.Component this )
在组件渲染完成之后触发...

在组件渲染完成之后触发。

afterrender事件在当前组件被rendered 结束之后、在为组件定义的所有afterRender方法执行之后 触发，并且，如果有stateful， 也在状态被保存之后才触发。

监听器将会以如下参数格式被调用:
  • this : Ext.Component
Component
beforedestroy : ( Ext.Component this )
在组件 destroyed 之前触发。 在事件监听器中返回false以停止 destroy 操作。
在组件 destroyed 之前触发。 在事件监听器中返回false以停止 destroy 操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforehide : ( Ext.Component this )
在调用hide方法隐藏组件之前触发。 在事件监听器中返回false可以停止隐藏操作。
在调用hide方法隐藏组件之前触发。 在事件监听器中返回false可以停止隐藏操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforerefresh : ( Chart this )
在图表数据刷新前触发。如果beforerefresh处理函数返回false则refresh动作...
在图表数据刷新前触发。如果beforerefresh处理函数返回false则 refresh 动作将被取消。
监听函数被调用时将传递如下参数：
  • this : Chart
Chart
beforerender : ( Ext.Component this )
在组件被rendered 之前触发。 在事件监听器中返回false可以停止render 操作。
在组件被rendered 之前触发。 在事件监听器中返回false可以停止render 操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforeshow : ( Ext.Component this )
在调用show()方法现实组件之前触发。 事件处理函数返回false可以停止show。
在调用show 方法现实组件之前触发。 事件处理函数返回false可以停止show。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforestaterestore : ( Ext.Component this , Object state )
在组件状态恢复之前触发。返回false停止恢复状态操作。
在组件状态恢复之前触发。返回false停止恢复状态操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    StateProvider返回的状态哈希值。 如果没有禁止此事件，那么状态对象会被传递给applyState。 默认情况下，这样简单地把属性值拷贝到当前组件中。 可以覆盖此方法以提供自定的状态恢复操作。
Component
beforestatesave : ( Ext.Component this , Object state )
在组件状态被保存到配置的状态提供者之前触发。 返回false可以停止保存。
在组件状态被保存到配置的状态提供者之前触发。 返回false可以停止保存。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    状态值哈希。 这由在组件上调用getState() 方法决定。 此方法必须由开发者提供，返回是否需要对状态进行描述，默认情况下， Ext.Component有一个空实现。
Component
destroy : ( Ext.Component this )
在组件被销毁之后触发。
在组件被destroyed之后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
disable : ( Ext.Component this )
在组件被设置为无效状态后触发。
在组件被设置为无效状态后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
enable : ( Ext.Component this )
当组件被设置为有效(enabled)之后触发。
当组件被设置为有效(enabled)之后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
hide : ( Ext.Component this )
在组件被隐藏之后触发。 当调用hide 方法隐藏组件之后触发。
在组件被隐藏之后触发。 当调用hide 方法隐藏组件之后触发。
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
initialize : ( Chart this )
监听器将会以如下参数格式被调用:
  • this : Chart
FlashComponent
move : ( Ext.Component this , Number x , Number y )
在组件移动之后触发。
在组件移动之后触发。
监听器将会用如下的参数格式来调用:
  • this : Ext.Component
  • x : Number
    The new x position
  • y : Number
    The new y position
BoxComponent
refresh : ( Chart this )
图表数据刷新后触发。
图表数据刷新后触发。
监听函数被调用时将传递如下参数：
  • this : Chart
Chart
removed : ( Ext.Component this , Ext.Container ownerCt )
当一个组件被从Ext.Container容器中删除时触发
当一个组件被从Ext.Container容器中删除时触发
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • ownerCt : Ext.Container
    持有组件的容器
Component
render : ( Ext.Component this )
在组件被渲染之后触发。
在组件被 rendered(渲染) 之后触发。
监听器将以如下的参数格式被调用:
  • this : Ext.Component
Component
resize : ( Ext.Component this , Number adjWidth , Number adjHeight , Number rawWidth , Number rawHeight )
在组件被调整大小之后触发。
在组件被调整大小之后触发。
监听器将以如下的参数格式被调用:
  • this : Ext.Component
  • adjWidth : Number
    这是width调整后的值
  • adjHeight : Number
    这是height调整后的值
  • rawWidth : Number
    这是width原来的值
  • rawHeight : Number
    这是height原来的值
BoxComponent
show : ( Ext.Component this )
在调用show 方法显示组件之后触发。
在调用show 方法显示组件之后触发。
监听器将会用如下的参数格式被调用:
  • this : Ext.Component
Component
staterestore : ( Ext.Component this , Object state )
组件状态被存储之后触发。
组件状态被存储之后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    StateProvider返回的状态哈希值。 如果没有禁止此事件，那么状态对象会被传递给applyState。 默认情况下，这样简单地把属性值拷贝到当前组件中。 可以覆盖此方法以提供自定的状态恢复操作。
Component
statesave : ( Ext.Component this , Object state )
在组件状态被保存到所配置的状态提供者之后触发。
在组件状态被保存到所配置的状态提供者之后触发。
监听器将会用如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    状态值hash。 这是由在足见上调用getState() 方法决定的。 开发者必须提供此方法以返回是否需要恢复状态，默认情况下， Ext.Component有一个空实现。
Component


Axis
    TimeAxis

Class Ext.chart.TimeAxis

包: | Ext.chart
定义类的文件: | Chart.js
类: | TimeAxis
继承自: | Axis
A type of axis whose units are measured in time-based values.

公共属性

Property |  | Defined By
 | calculateByLabelSize : Boolean 指明是否在计算主要单位时考虑标签的大小。 | TimeAxis
 | hideOverlappingLabels : Boolean 如果为true，坐标轴上，与之前标签重叠的标签将被隐藏。 | Axis
 | labelFunction : String 一个全局函数的字符串引用。用来定义坐标轴上每个标签的值。 | Axis
 | labelSpacing : Number 坐标轴上，以像素（pixel）为单位的标签间距。 | Axis
 | majorTimeUnit : String 次要单位使用的时间单位。 | TimeAxis
 | majorTimeUnit : String 次要单位使用的时间单位。 | TimeAxis
 | majorUnit : Number 坐标轴上次要单位的间距。 | TimeAxis
 | majorUnit : Number 坐标轴上次要单位的间距。 | TimeAxis
 | maximum : Number 坐标轴最大值。如未设置，则自动计算。 | TimeAxis
 | minimum : Date 坐标轴最小值。如未设置，则自动计算。 | TimeAxis
 | orientation : String 定义坐标方向。可选值为“horizontal”（水平方向）或者“vertical”（垂直方向）。 | Axis
 | reverse : Boolean 如果为true，坐标轴上的元素将以相反方向渲染。 | Axis
 | snapToUnits : Boolean 如果为true，标签、刻度、网格以及其他对象都会和最近的主要或者单位对齐。如果为false，则... 如果为true，标签、刻度、网格以及其他对象都会和最近的主要或者单位对齐。如果为false，则他们的位置将取决于最小值。 | TimeAxis
 | stackingEnabled : Boolean 该值为true时，序列才可以堆叠。 | TimeAxis
 | type : String 坐标轴的种类。 | Axis

公共方法

该类没有公共方法。

公共事件

该类没有公共事件。


Observable
    Component
      ColorPalette

Class Ext.ColorPalette

包: | Ext
定义类的文件: | ColorPalette.js
类: | ColorPalette
继承自: | Component
选择颜色的简单调色板类。调色板可以被渲染到任何容器中。
以下是一个典型的用例:

var cp = new Ext.ColorPalette({value:'993300'});  // 初始化时选中的颜色
cp.render('my-div');

cp.on('select', function(palette, selColor){
    // do something with selColor
});

配置项

Config Options Defined By
allowDomMove : Boolean
在渲染时组件是否可以移动Dom节点(默认为true)。
Component
allowReselect : Boolean
如果设置为true，然后重复选择这个已经选定的颜色时还会触发select事件
ColorPalette
applyTo : Mixed
指定一个元素的id、一个DOM元素或者一个已经存在并被渲染到DIV中的元素，此DIV已经被...

指定一个元素的id、一个DOM元素或者一个已经存在并被渲染到DIV中的元素，此DIV已经被 渲染到document中，并且为当前组件指定了一些结构化的标签。

  • 描述 :
      当使用了 applyTo， 在主元素中也可以用id或者CSS类名来指定组件的托管部分， 并且，如果可以的话，创建的组件可能也会试图在那个标签中创建它的子组件。
  • 注意 :
      当使用此配置项时，无需调用render()方法。
      如果指定了applyTo属性，任何传递给 renderTo 的值都会被忽略，并且目标元素的父节点将会自动被用作组件的容器。
Component
autoShow : Boolean
如果组件需要检测隐藏CSS属性(如 'x-hidden' 或者 'x-hide-display')并且在渲染时删除...
如果组件需要检测隐藏CSS属性(如 'x-hidden' 或者 'x-hide-display')并且在渲染时删除它们 (默认为false)，设置此值为true。
Component
bubbleEvents : Array
一个事件数组，当这些事件被触发时，将会被冒泡到所有父容器中。参见....

一个事件数组，当这些事件被触发时，将会被冒泡到所有父容器中。参见 Ext.util.Observable.enableBubble。 默认为 []。

Component
clearCls : String
应用到特殊的clearing div的CSS类， 这个clearing div直接渲染到每个form field的包装器后面...

应用到特殊的clearing div的CSS类， 这个clearing div直接渲染到每个form field的包装器后面，以提供 清除field的功能(默认为 'x-form-clear-left')。

注意: 只有在当前组件被渲染到一个使用FormLayout 布局(例如 Ext.form.FormPanel 或者指定 layout:'form')的 容器中、或者是指定了一个fieldLabel 、或者指定isFormField=true 时此配置才有效。

另请参见 Ext.layout.FormLayout. fieldTpl。

Component
clickEvent : String
DOM事件可以触发一种颜色被选择，这可以是任何有效的事件名(dblclick, contextmenu)。默认值为'click'。
ColorPalette
cls : String
一个可选的额外CSS类，它将被添加到当前组件的元素上(默认为'')...
一个可选的额外CSS类，它将被添加到当前组件的元素上(默认为'')。 此属性对于在组件上，或者它的任何使用标准CSS规则的孩子节点上， 添加定制的样式非常有用。
Component
contentEl : String
(可选)指定一个已存在的HTML元素，或者一个已存在HTML元素的...

(可选)指定一个已存在的HTML元素，或者一个已存在HTML元素的 id ，它们将被用作当前组件的内容。

  • 描述 :
    此配置选项被用来将一个已存在的HTML元素 插入到一个新组件(在组件渲染之后它简单地移动DOM元素) 的layout元素中，使它成为该组件的内容。
  • 注意 :
    指定的HTML元素将被append到组件的layout元素中， 在所有配置的 HTML 被插入之后， 并且，这样的话，在render事件 被触发时，document中将不再包含此元素。
    指定的HTML元素将不会参与组件所有可能使用的 layout 过程(译者注：指这些HTML元素 不会参与布局操作)。 它仅是HTML而已。布局操作实在孩子 items 上进行的。
    添加 x-hidden 或者 x-hide-display CSS类，以防在内容渲染到panel时发生闪烁。
Component
ctCls : String
一个可选的外部CSS样式，添加到这个组件的容器(默认值为 '')。 这个方法对于使用标准的CSS规则...

一个可选的外部CSS样式，添加到这个组件的容器(默认值为 '')。 这个方法对于使用标准的CSS规则，为组件或它的任何一个子组件添加特定的样式非常有用。 参见 Ext.layout.ContainerLayout和 extraCls 。

注意: ctCls 默认为 ''期望如下的类，它们将指定一个默认值:

  • Box Layout : 'x-box-layout-ct'
使用一个额外的CSS类配置以上的Class，它是append到默认对象上的。例如， 对于BoxLayout (Hbox and Vbox):
                                ctCls: 'x-box-layout-ct custom-class'

Component
data : Mixed
初始化数据集，它将被应用到 tpl 上以刷新组件的内容区域。
Component
disabled : Boolean
当前组件处于无效状态时为true。 Read-only.
Component
disabledClass : String
当组件处于无效状态时添加到组件上的CSS类(默认为 'x-item-disabled')。
Component
fieldLabel : String
紧靠此field显示的标签文本(默认值为 '')。注意...

紧靠此field显示的标签文本(默认值为 '')。

注意:只有在当前组件被渲染到一个使用FormLayout 的容器中时，此配置才有效。 (例如 Ext.form.FormPanel 或 指定 layout:'form')。

另请参见 hideLabel 、 Ext.layout.FormLayout和 fieldTpl。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Name'
    }]
});
Component
handler : Function
(可选)一个将处理调色板select事件的函数。处理器通过一下参数...
(可选)一个将处理调色板select事件的函数。处理器通过一下参数调用:
  • palette : ColorPalette
    The Ext.ColorPalette.
  • color : String
    The 6-digit color hex code (without the # symbol).
ColorPalette
hidden : Boolean
如果当前组件处于隐藏状态，此值为true。Read-only。
Component
hideLabel : Boolean
true时完全隐藏label元素 ( label 和 separator)。 默认为 false。 默认情况下，即使你不指定...

true时完全隐藏label元素 ( label 和 separator)。 默认为 false。 默认情况下，即使你不指定 fieldLabel 它的空间仍然会被保留，这样这块区域会与其它确实拥有label的区域位于同一排。 讲此值设置为 true 将导致此区域不再保留此空间。

注意: 参见 clearCls 的注释。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield'
        hideLabel: true
    }]
});
Component
hideMode : String
组件如何隐藏，支持的值有： 'visibility' (css visibility), 'offsets' (位置偏移量为负值) 和...

组件如何隐藏，支持的值有： 'visibility' (css visibility), 'offsets' (位置偏移量为负值) 和 'display' (css display).

注意:一般首选默认值 'display'，因为当组件第一次显示的时候它们会自动进行布局 (隐藏的时候不会调整尺寸)。

Component
hideParent : Boolean
此值为true时，当调用hide/show方法时，将会hide和show组件的容器...
此值为true时，当调用hide/show方法时，将会hide和show组件的容器；false时将会 hide和show组件自身(默认为false)。例如，这可以用作window上隐藏按钮的一种 快捷操作，通过设置此按钮的hideParent:true，然后把它添加到window上。
Component
html : String/Object
一个HTML片段，或者一个 DomHelper 描述，用作layout元素的内容(默认为'')。...
一个HTML片段，或者一个 DomHelper 描述，用作layout元素的内容(默认为'')。 这个HTML内容在组件渲染之后才被添加，所以在 render 出发的时候，document中尚未包含此HTML。 但是这个内容将会在所有配置的 contentEl 之前被插入到body标签中。
Component
id : String
当前组件唯一的id(默认为auto-assigned id)...

当前组件唯一的id(默认为auto-assigned id)。 如果你需要在以后访问组件，而又没有一个有效的组件对象引用，那么你需要指定一个 id( 也就是，使用Ext. getCmp方法 )。

注意，此id也将被用作组件底层HTML标签的id，这些标签被渲染到页面中。 这将允许你编写基于id的CSS规则，以独立地描述指定的实例；并且，也可以通过 组件父标签的id选中子元素。

注意:为了避免与唯一的id 产生重复， 请参见 itemId 和 ref 。

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

Component
itemCls : String
应用到容器元素的CSS样式类(默认值为'x-color-palette')
ColorPalette
itemId : String
当没有可利用的对象引用时，itemId可以作为第二选择，用来获得一个组件的引用， 代替 ...

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

var c = new Ext.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'); // 与 Ext.getCmp()不同

p2 = p1.ownerCt.getComponent('p2'); // 通过兄弟对象获得引用

另请参见 id 和 ref 。

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

Component
labelSeparator : String
每个fieldLabel 文本后面现实的分隔符。 此属性可以在多个层次上进行配置...

每个fieldLabel 文本后面现实的分隔符。 此属性可以在多个层次上进行配置。优先顺序为：

  • field / component level
  • container level
  • layout level (默认为冒号 ':')
如不需要为当前field的label显示分隔符，指定一个空字符串''即可。

注意:参见 clearCls 的注释。

另请参见 hideLabel 和 Ext.layout.FormLayout。 fieldTpl。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    layoutConfig: {
        labelSeparator: '~'   // layout config has lowest priority (defaults to ':')
    },
    labelSeparator: '>>',     // config at container level
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Field 1',
        labelSeparator: '...' // field/component level config supersedes others
    },{
        xtype: 'textfield',
        fieldLabel: 'Field 2' // labelSeparator will be '='

    }]
});
Component
labelStyle : String
一个CSS样式描述字符串，它将直接应用到当前field的label上...

一个CSS样式描述字符串，它将直接应用到当前field的label上。 如果有设置，默认为容器的labelStyle值(例如 Ext.layout.FormLayout.labelStyle , 或者 '')。

注意:参见 clearCls 的注释。

另请参见 hideLabel 和 Ext.layout.FormLayout. fieldTpl。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Name',
        labelStyle: 'font-weight:bold;'
    }]
});
Component
listeners : Object
一个包含一个或多个事件处理器的配置对象，会在初始化的时候被添加到目标对象上...

一个包含一个或多个事件处理器的配置对象，会在初始化的时候被添加到目标对象上。 该配置对象应该是一个有效的监听器配置对象就像 addListener例子中指定的一样可一次附加多个处理器。

ExtJs Components上的DOM事件

一些 ExtJs Component 类导出时会选择一些DOM事件(例如 "click", "mouseover" 等等), 这通常只是在有额外的值可以被添加时发生。例如DataView类的 click事件会传递被点击的节点。也可以直接在Component的HTMLElementevent上访问DOM事件，但必需在Component被渲染后监听器才能添加到Element 上。可以按照以下步骤添加插件:

// 插件会用一个监听器配置对象进行配置。
//该组件会被添加到所有处理方法的参数列表上。
Ext.DomObserver = Ext.extend(Object, {
    constructor: function(config) {
        this.listeners = config.listeners ? config.listeners : config;
    },

    // 组件将自己传递进了插件的初始化方法里
    init: function(c) {
        var p, l = this.listeners;
        for (p in l) {
            if (Ext.isFunction(l[p])) {
                l[p] = this.createHandler(l[p], c);
            } else {
                l[p].fn = this.createHandler(l[p].fn, c);
            }
        }

        // 渲染后立即添加监听器到元素上
        c.render = c.render.createSequence(function() {
            var e = c.getEl();
            if (e) {
                e.on(l);
            }
        });
    },

    createHandler: function(fn, c) {
        return function(e) {
            fn.call(this, e, c);
        };
    }
});

var combo = new Ext.form.ComboBox({

    // 元素被点击后折叠
    plugins: [ new Ext.DomObserver({
        click: function(evt, comp) {
            comp.collapse();
        }
    })],
    store: myStore,
    typeAhead: true,
    mode: 'local',
    triggerAction: 'all'
});

Observable
overCls : String
一个可选的额外的CSS类，它将在鼠标移过元素时被添加到组件上...
一个可选的额外的CSS类，它将在鼠标移过元素时被添加到组件上，鼠标移出时 删除。(默认为'')。此属性对于在组件上，或者它的任何使用标准CSS规则的孩子节点上， 添加定制的'active' 或者 'hover'样式非常有用。
Component
plugins : Object/Array
一个对象或者一个对象数组，为组件提供特殊的功能 ...
一个对象或者一个对象数组，为组件提供特殊的功能。 对一个合法的插件唯一的要求是它含有一个init()方法， 能接收一个Ext.Component型的参数。 当组件被创建时，如果有可用的插件，组件将会调用每个插件的init方法， 并将自身的引用作为方法参数传递给它。然后，每个插件就可以调用方法或者响应组件上的事件， 就像需要的那样提供自己的功能。
Component
ptype : String
需要创建配置的ptype。 当传递一个配置对象给构造函数时...
需要创建配置的ptype。 当传递一个配置对象给构造函数时，此配置选项不会被使用。 只有在使用懒初始化的时候此配置项才会被使用， 此时Plugin不是 通过一个完整的实例组件，而是通过一个Component配置指定的。 在渲染时，将会查找ptype以决定创建何种类型的Plugin。

如果你创建自己的Plugin，你可以通过 Ext.ComponentMgr.registerPlugin 对它们进行注册，以便能利用懒初始化和渲染机制。
Component
ref : String
一个路径描述，与组件的 ownerCt 相关，它描述了把当前组件的命名引用放置到哪个父容器中去。...

一个路径描述，与组件的 ownerCt 相关，它描述了把当前组件的命名引用放置到哪个父容器中去。

祖先的坐标路径可以通过'/'字符进行分隔。 例如，将一个Toolbar Button的引用放入 拥有此Toolbar的Panel中:

var myGrid = new Ext.grid.EditorGridPanel({
    title: 'My EditorGridPanel',
    store: myStore,
    colModel: myColModel,
    tbar: [{
        text: 'Save',
        handler: saveChanges,
        disabled: true,
        ref: '../saveButton'
    }],
    listeners: {
        afteredit: function() {
//          The button reference is in the GridPanel
            myGrid.saveButton.enable();
        }
    }
});

在上面的代码中，如果 ref 是 'saveButton' ，那么引用将会被放置到Toolbar中。 ref 中的每个'/' 都会从组件的 ownerCt 向上移动一级。

另请参见 added 和 removed 事件。

Component
renderTo : Mixed
该值可以是一个节点的id、一个DOM节点或者一个已存在的元素...

该值可以是一个节点的id、一个DOM节点或者一个已存在的元素， 组件将会被渲染到其中。

  • 注意 :
      如果组件不是一个Container 的子项目时， 不要使用此选项。 渲染和管理它的子项目是一个Container 的layout manager的责任。
      当使用此配置项时，无需调用render()方法。

另请参见 render 。

Component
scope : Object
(this 参考)范围之内的 handler 函数会被调用。默认为ColorPalette实例。
ColorPalette
stateEvents : Array
一个事件数组，当它们被触发时，组件需要保存自己的状态(默认值为 none)...

一个事件数组，当它们被触发时，组件需要保存自己的状态(默认值为 none)。 它们可以是任何该组件支持的事件类型，包括浏览器事件和 自定义事件(例如['click', 'customerchange'])。

对于保存和恢复组件状态的详细解释，参见 stateful

Component
stateId : String
为该组件指定的唯一的id值，它被用作管理组件状态的目的...
为该组件指定的唯一的id值，它被用作管理组件状态的目的。 (如果设定了id，默认值为组件自己的id，否则，如果组件使用自动生成的id，此值为null)。

对于保存和反解析组件状态的解释，参见 stateful 。

Component
stateful : Boolean
一个标志参数，它将引起组件在启动时尝试从一个保存的状态中恢复内部状态参数...

一个标志参数，它将引起组件在启动时尝试从一个保存的状态中恢复内部状态参数。 组件必须要么拥有一个 stateId 或者 id ，它们被分配给需要被管理的状态属性。 在跨页面加载时，不保证自动生成的id属性的稳定性， 并且，不能依赖此id来保存和恢复一个组件的相同状态。

为了保存状态的操作能够工作，状态管理器的提供者必须 被设置成一个Ext.state.Provider 的实现类，它覆盖了set 和get 方法，以便保存和恢复name/value对。 有一个内置的Ext.state.CookieProvider 可用。

为当前页面设置状态提供者:

Ext.state.Manager.setProvider(new Ext.state.CookieProvider({
    expires: new Date(new Date().getTime()+(1000*60*60*24*7)), //7 days from now
}));

当 stateEvents 配置项中其中之一的事件被触发时， 一个状态可保存的组件将试图保存其状态。

保存状态时，一个可保存状态的组件首先需要通过调用 getState 方法来序列化它的状态。 默认情况下，此函数什么事都不做。 开发者必须提供一个实现，返回一个hash对象，它描述了组件可恢复的状态。

getState方法产生的值将会传递给 Ext.state.Manager.set 方法，它使用配置的 Ext.state.Provider 来保存对象，以组件的 stateId 为key，或者，如果此值（指stateId）没有指定时， 使用它的 id 作为key。

在进行构造时，一个可保存状态的组件试图通过调用 Ext.state.Manager.get方法来 恢复它的状态，传递 stateId 或者，如果此值（指stateId）没有指定时， 使用它的 id 作为参数。

结果对象被传递给 applyState 。 applyState 的默认实现只是简单地把属性拷贝到对象中， 但是开发者可以覆盖此方法以支持更多行为。

通过向 beforestaterestore, staterestore, beforestatesave 和 statesave 事件上绑定监听器，你可以在保存和恢复状态时进行额外的处理。

Component
style : String
被添加到组件元素的特定样式。 必须是按照...
被添加到组件元素的特定样式。 必须是按照 Ext.Element.applyStyles 类指定格式的合法参数值。

new Ext.Panel({
    title: 'Some Title',
    renderTo: Ext.getBody(),
    width: 400, height: 300,
    layout: 'form',
    items: [{
        xtype: 'textarea',
        style: {
            width: '95%',
            marginBottom: '10px'
        }
    },
        new Ext.Button({
            text: 'Send',
            minWidth: '100',
            style: {
                marginBottom: '10px'
            }
        })
    ]
});
Component
tpl : String
一个已经存在的XTemplate实例，用来代替默认的模板渲染组件。
ColorPalette
tplWriteMode : String
刷新组件的内容区域时使用的Ext.(X)Template方式。 默认为'overwrite' (参见 Ext.XTemplate.overwrite )。
刷新组件的内容区域时使用的Ext.(X)Template方式。 默认为'overwrite' (参见 Ext.XTemplate.overwrite )。
Component
value : String
初始化时高亮显示的颜色(必须是一个合法的6位十六进制 颜色值，不带#符号)...
初始化时高亮显示的颜色(必须是一个合法的6位十六进制 颜色值，不带#符号)。注意：十六进制代码是大小写敏感的。
ColorPalette
xtype : String
需要创建配置的xtype。 当传递一个配置对象给构造函数时...
需要创建配置的xtype。 当传递一个配置对象给构造函数时，此配置选项不会被使用。 只有在使用懒初始化的时候此配置项才会被使用，此时容器的子项目不是 通过一个完整的实例组件，而是通过一个Component配置指定的。 在渲染时，将会查找xtype以决定创建何种类型的子组件。

预定义的xtype列表如下： here。

如果你继承Component创建你自己的组件，你需要使用Ext.ComponentMgr.registerType 对它们进行注册，以便利用懒初始化和渲染机制。
Component

公共属性

Property Defined By
colors : Array
一个6位数字十六进制代码颜色(不带#符号)的字符串数组。此数据可以包含任意多个颜色...

一个6位数字十六进制代码颜色(不带#符号)的字符串数组。此数据可以包含任意多个颜色，并且每个十六进制代码都应该是唯一的。调色板的宽度是通过CSS控制的，通过调整'x-color-palette'的width属性(或者指定一个定制的CSS类)，这样你可以在宽度和颜色个数之间取得一个平衡，直到调色板盒子显示比较均匀。

如果需要，你可以重写单个的颜色:

var cp = new Ext.ColorPalette();
cp.colors[0] = 'FF0000';  // 将第一格调整为红色
或者你可以提供你自己的一个颜色数组，以便可以完全控制：

var cp = new Ext.ColorPalette();
cp.colors = ['000000', '993300', '333300'];
ColorPalette
disabled : Boolean
当前组件处于无效状态时为true。 Read-only.
Component
el : Ext.Element
封装了当前组件的Ext.Element。 Read-only。通常情况下，这将是一个<DIV>元素，它由此类的...

封装了当前组件的Ext.Element。 Read-only。

通常情况下，这将是一个<DIV>元素，它由此类的 onRender方法创建，但是它可以通过使用 autoEl 配置项进行覆盖。

注意: 直到组件渲染完成此元素都将处于无效状态。

如需向当前组件的 DOM事件(而不是当前组件自己的Observable事件)添加监听器， 更多建议，参见 listeners 配置项，或者直接使用一个render监听器:

new Ext.Panel({
    title: 'The Clickable Panel',
    listeners: {
        render: function(p) {
            // Append the Panel to the click handler's argument list.
            p.getEl().on('click', handlePanelClick.createDelegate(null, [p], true));
        },
        single: true  // Remove the listener after first invocation
    }
});

另请参见 getEl

Component
hidden : Boolean
如果当前组件处于隐藏状态，此值为true。Read-only。
Component
initialConfig : Object
当前组件的初始化配置描述。 Read-only。
Component
ownerCt : Ext.Container
组件所属的Container (默认为undefined，当前组件被添加到一个容器中时此值被自动设置)...
组件所属的Container (默认为undefined，当前组件被添加到一个容器中时此值被自动设置)。 Read-only。

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

Component
refOwner : Ext.Container
如果当前组件是一个容器的孩子，并且是通过一个 ref 配置项被注册的，则此值为 ref 引用被插入到的祖先容器。
如果当前组件是一个容器的孩子，并且是通过一个 ref 配置项被注册的，则此值为 ref 引用被插入到的祖先容器。
Component
rendered : Boolean
如果当前组件已经被渲染了，此值为true。Read-only.
Component

公共方法

Method Defined By
ColorPalette ( Object config )
Create a new ColorPalette
Create a new ColorPalette
参数:
  • config : Object
    The config object
返回值:
  • void
ColorPalette
addClass ( string cls ) : Ext.Component
为组件底层的元素添加CSS样式。
为组件底层的元素添加CSS样式。
参数:
  • cls : string
    需要添加的CSS样式的class名称
返回值:
  • Ext.Component
    this
Component
addEvents( Object|String o, string Optional. ) : void
添加指定的事件到事件列表上，事件会被该Observable触发。
添加指定的事件到事件列表上，事件会被该Observable触发。
参数:
  • o : Object|String
    以事件名作为属性true作为值的对象 或者当多个事件名被分开的传递时则为第一个事件名。
  • Optional. : string
    事件名被分开的传递时则为事件名。 用法:
    this.addEvents('storeloaded', 'storecleared');
返回值:
  • void
Observable
addListener( String eventName, Function handler, [Object scope], [Object options] ) : void
给对象添加事件处理器。
给对象添加事件处理器。
参数:
  • eventName : String
    监听的事件名。
  • handler : Function
    事件调用的方法
  • scope : Object
    （可选）处理方法执行的作用域 (this的引用 reference)。 如果被忽略。默认为触发事件的对象。
  • options : Object
    （可选）包含处理器配置和属性的对象。 可能包含以下的属性:
    • scope : Object
      处理方法执行的作用域(this的引用) 。 如果被忽略。默认为触发事件的对象。
    • delay : Number
      在触发事件后延迟调用处理器的毫秒数。
    • single : Boolean
      如果为True则添加一个处理器来处理下一次的事件触发（仅一次），然后移除自己。
    • buffer : Number
      使得处理器延迟指定毫秒数后预定的运行在 一个Ext.util.DelayedTask中 。 如果事件在时间内再一次被触发，原始的处理器不会被调用，但是新的处理器会预定的在他的位置上。
    • target : Observable
      如果事件在目标的Observable上触发则仅仅调用处理器， 否则 事件会从子类的Observable上冒泡

    组合选项
    使用这些选项参数,可能会组合出不同类型的监听器：

    一个延迟的，一次性的监听器。

    myDataView.on('click', this.onClick, this, {
single: true,
delay: 100
});

    一次调用附加多个处理器
    该方法同样支持传递一个包含指定的多个处理器的属性的配置对象参数。

    myGridPanel.on({
'click' : {
    fn: this.onClick,
    scope: this,
    delay: 100
},
'mouseover' : {
    fn: this.onMouseOver,
    scope: this
},
'mouseout' : {
    fn: this.onMouseOut,
    scope: this
}
});

    或者一个简写的语法：

    myGridPanel.on({
'click' : this.onClick,
'mouseover' : this.onMouseOver,
'mouseout' : this.onMouseOut,
 scope: this
});
返回值:
  • void
Observable
applyToMarkup ( String/HTMLElement el ) : void
将此组件添加到已存在的有效的HTML标签中。 使用该方法时，无需再调用render()方法。
将此组件添加到已存在的有效的HTML标签中。 使用该方法时，无需再调用render()方法。
参数:
  • el : String/HTMLElement
返回值:
  • void
Component
cloneConfig ( Object overrides ) : Ext.Component
默认使用原先传递给当前实例的配置值克隆当前组件。
默认使用原先传递给当前实例的配置值克隆当前组件。
参数:
  • overrides : Object
    一个新的配置项，包含需要覆盖到克隆版本的所有属性。 可以传递一个id参数给此对象，否则将自动生成一个新的id以避免发生重复。
返回值:
  • Ext.Component
    当前组件的克隆副本
Component
destroy () : void
通过如下方法销毁对象：删除所有的事件监听器、将组件的元素从DOM树中删除...
通过如下方法销毁对象：删除所有的事件监听器、将组件的元素从DOM树中删除（如果可以）、 将组件从它的 Ext.Container（如果可用）中删除、 并且将它从Ext.ComponentMgr中 注销。 销毁操作一般由框架自动完成，一般情况下不需要直接调用该方法。
参数:
  • 无。
返回值:
  • void
Component
disable () : Ext.Component
将组件置为无效状态，并出发'disable'事件。
将组件置为无效状态，并出发'disable'事件。
参数:
  • 无。
返回值:
  • Ext.Component
    this
Component
enable () : Ext.Component
将组件置为有效状态并触发'enable'事件。
将组件置为有效状态并触发'enable'事件。
参数:
  • 无。
返回值:
  • Ext.Component
    this
Component
enableBubble( String/Array events ) :void
是否现在使得事件会被该Observable触发并调用 this.getBubbleTarget()方法在拥有者的继承树...

是否现在使得事件会被该Observable触发并调用 this.getBubbleTarget()方法在拥有者的继承树中冒泡。Observable的基础类中没有该方法的实现。

该方法一般被Ext.Components用来冒泡事件到拥有者的容器。参看Ext.Component.getBubbleTarget默认的实现 在Ext.Component中返回组件的直接拥有者。但是如果需要的是一个已知的目标，该方法可以被重写来更快的访问需求的目标。

例子:

Ext.override(Ext.form.Field, {
    // 添加方法到Field的initComponent上改变事件为冒泡
    initComponent : Ext.form.Field.prototype.initComponent.createSequence(function() {
        this.enableBubble('change');
    }),

    // 我们知道我们想让Field的事件冒泡到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() {
            // 如果样式被修改标题会变红。
            myForm.header.setStyle('color', 'red');
        }
    }
});
参数:
  • events : String/Array
    冒泡的事件名，或事件名数组
返回值:
  • void
Observable
findParentBy ( Function fn ) : Ext.Container
通过自定义的函数查找当前组件上层任何层次上的容器...
通过自定义的函数查找当前组件上层任何层次上的容器。 如果传递的函数返回true，容器对象将被返回。
参数:
  • fn : Function
    自定义的函数，使用如下参数调用(container,this component)。
返回值:
  • Ext.Container
    自定义函数返回true的第一个容器
Component
findParentByType ( String/Class xtype ) : Ext.Container
通过xtype或者class查找当前组件上层任何层次上的容器
通过xtype或者class查找当前组件上层任何层次上的容器
参数:
  • xtype : String/Class
    组件的xtype字符串，或者直接是组件的class
返回值:
  • Ext.Container
    符合指定xtype或者class的第一个容器
Component
fireEvent( String eventName, Object... args ) : Boolean
用传入的参数触发指定的事件 (减去事件名)。 一个事件可以被设置为冒泡 Obse...

用传入的参数触发指定的事件 (减去事件名)。

一个事件可以被设置为冒泡到Observable父类继承树(参看 Ext.Component.getBubbleTarget) 调用enableBubble实现。

参数:
  • eventName : String
    触发的事件名。
  • args : Object...
    传递给处理器的可变长度参数。
返回值:
  • Boolean
    如果有任何的处理器返回false则返回false，否则返回true。
Observable
focus ( [ Boolean selectText ], [ Boolean/Number delay ] ) : Ext.Component
尝试将当前组件设为焦点。
尝试将当前组件设为焦点。
参数:
  • selectText : Boolean
    (可选) 如果可用，同时选中组件内部的文本
  • delay : Boolean/Number
    (可选)将当前组件设置为焦点的延迟时间(设置为true等于0毫秒)
返回值:
  • Ext.Component
    this
Component
getBubbleTarget () : Ext.Container
为Observable的fireEvent方法提供链接，它沿着继承结构进行冒泡操作。
为Observable的fireEvent方法提供链接，它沿着继承结构进行冒泡操作。
参数:
  • 无。
返回值:
  • Ext.Container
    拥有当前组件的容器。
Component
getEl () : Ext.Element
返回 Ext.Element ，它包装了当前组件。...

返回 Ext.Element ，它包装了当前组件。

通常情况下，这将是一个<DIV>元素，它是由该类的onRender方法创建的， 但是可以使用autoEl配置项 覆盖它。

注意: 此元素将会一直处于无效状态直到当前组件渲染完成。

如需向当前组件的 DOM事件(而不是当前组件自己的Observable事件)添加监听器， 更多建议，参见 listeners 配置项，或者直接使用一个render监听器:

new Ext.Panel({
    title: 'The Clickable Panel',
    listeners: {
        render: function(p) {
            // Append the Panel to the click handler's argument list.
            p.getEl().on('click', handlePanelClick.createDelegate(null, [p], true));
        },
        single: true  // Remove the listener after first invocation
    }
});
参数:
  • 无。
返回值:
  • Ext.Element
    包装当前组件的元素。
Component
getId () : String
返回当前组件的id，如果没有定义id，则自动生成并返回一个id:'ext-comp-'...
返回当前组件的 id 如果没有定义 id 则自动生成并返回一个 id

'ext-comp-' + (++Ext.Component.AUTO_ID)
参数:
  • 无。
返回值:
  • String
    id
Component
getItemId () : String
返回当前组件的 itemId 。 如果没有通过配置参数指定 itemId 那么，将会使用...
返回当前组件的 itemId 。 如果没有通过配置参数指定 itemId 那么，将会使用 getId 返回 id 。
参数:
  • 无。
返回值:
  • String
Component
getXType () : String
获取当前组件的xtype，它是用 Ext.ComponentMgr 注册的。 所有可用的xtype列表，参见...
获取当前组件的xtype，它是用 Ext.ComponentMgr 注册的。 所有可用的xtype列表，参见 Ext.Component 类头部。示例用法:

var t = new Ext.form.TextField();
alert(t.getXType());  // alerts 'textfield'
参数:
  • 无。
返回值:
  • String
    The xtype
Component
getXTypes () : String
返回此组件的xtype继承树，用字符'-'分隔。 所有可用的xtype值...

返回此组件的xtype继承树，用字符'-'分隔。 所有可用的xtype值，请参见Ext.Component 类的头部。

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

示例用法:

var t = new Ext.form.TextField();
alert(t.getXTypes());  // alerts 'component/box/field/textfield'
参数:
  • 无。
返回值:
  • String
    xtype层次字符串
Component
hasListener( String eventName ) : Boolean
检测对象是否包含指定事件的任何监听器
检测对象是否包含指定事件的任何监听器
参数:
  • eventName : String
    检测的事件名
返回值:
  • Boolean
    如果事件被监听则为true，否则为false
Observable
hide () : Ext.Component
隐藏当前组件。 监听 beforehide' 事件并且返回false 可以取消隐藏组件的操作。 在隐藏组件之后触发...
隐藏当前组件。 监听 beforehide' 事件并且返回false 可以取消隐藏组件的操作。 在隐藏组件之后触发 ' hide' 事件。 如果组件被配置成 hidden 那么此方法在内部被调用。
参数:
  • 无。
返回值:
  • Ext.Component
    this
Component
isVisible () : Boolean
如果当前组件可见，返回true。
如果当前组件可见，返回true。
参数:
  • 无。
返回值:
  • Boolean
    如果当前组件可见，返回true，其它返回false。
Component
isXType ( String xtype , [ Boolean shallow ] ) : Boolean
Tests whether or not this Component is of a specific xtype. This can test whether this Component is descended from th...

测试此组件是否是指定的xtype。此方法既可以测试是否是指定的xtype的某个子类， 或者它是否直接是指定的xtype类(shallow=true)。

如果使用你自己的子类，必须知道组件必须注册它的xtype值。

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

示例用法:

var t = new Ext.form.TextField();
var isText = t.isXType('textfield');        // true
var isBoxSubclass = t.isXType('box');       // true, descended from BoxComponent
var isBoxInstance = t.isXType('box', true); // false, not a direct BoxComponent instance
参数:
  • xtype : String
    需要为当前组件进行检测的xtype
  • shallow : Boolean
    (可选) 如果为false，检测组件是否是xtype继承树中的某个子类（默认是这种情况）， 如果为true，只检测组件是否是指定的xtype类型。
返回值:
  • Boolean
    如果当前组件是指定xtype的子类，返回true，其它返回flase。
Component
mon ( Observable|Element item , Object|String ename , Function fn , Object scope , Object opt ) : void
向任何Observable对象(或者元素)上添加监听器，监听器将会在组件...

向任何Observable对象(或者元素)上添加监听器，监听器将会在组件销毁时被自动删除。
用法：

myGridPanel.mon(myGridPanel.getSelectionModel(), 'selectionchange', handleSelectionChange, null, {buffer: 50});

or:

myGridPanel.mon(myGridPanel.getSelectionModel(), {
    selectionchange: handleSelectionChange,
    buffer: 50
});
参数:
  • item : Observable|Element
    需要添加listener/listeners的项目。
  • ename : Object|String
    事件名，或者一个包含事件名属性的对象。
  • fn : Function
    (可选) 如果 ename 参数是一个事件名，此参数为处理函数。
  • scope : Object
    (可选)如果 ename 参数是一个事件名称，此参数是作用域 ( this 引用)，监听函数将会在此作用域中被执行。
  • opt : Object
    (可选)如果 ename 参数是一个事件名称， 此参数是 addListener 配置项。
返回值:
  • void
Component
mun ( Observable|Element item , Object|String ename , Function fn , Object scope ) : void
删除通过mon 方法添加的监听器。
删除通过mon 方法添加的监听器。
参数:
  • item : Observable|Element
    需要删除listener/listeners的项目。
  • ename : Object|String
    事件名称，或者一个包含事件名称属性的对象。
  • fn : Function
    (可选)如果 ename 参数是一个事件名称，此参数是一个处理函数。
  • scope : Object
    (可选)如果 ename 参数是一个事件名称，此参数是作用域 ( this 引用)，监听函数将会在此作用域中被执行。
返回值:
  • void
Component
nextSibling () : Ext.Component
返回所属容器中的下一个组件
返回所属容器中的下一个组件
参数:
  • 无。
返回值:
  • Ext.Component
Component
on( String eventName, Function handler, [Object scope], [Object options] ) : void
给对象添加事件处理器 (addListener的简写形式)
给对象添加事件处理器 (addListener的简写形式。)
参数:
  • eventName : String
    监听的事件类型
  • handler : Function
    事件调用的方法
  • scope : Object
    （可选）处理方法执行时的作用域 (this 的引用)。 如果被忽略。默认为触发事件的对象。
  • options : Object
    可选 包含处理器配置的对象。
返回值:
  • void
Observable
previousSibling () : Ext.Component
返回所属容器中的前一个组件
返回所属容器中的前一个组件
参数:
  • 无。
返回值:
  • Ext.Component
Component
purgeListeners() : void
移除对象上所有的监听器
移除对象上所有的监听器
参数:
  • 无。
返回值:
  • void
Observable
relayEvents( Object o, Array events ) : void
从指定的Observable上传递选择的事件就好像被当前对象触发一样。
从指定的Observable上传递选择的事件就好像被当前对象触发一样。
参数:
  • o : Object
    该Observable上的事件被当前对象传递。
  • events : Array
    传递的数组名。
返回值:
  • void
Observable
removeClass ( string cls ) : Ext.Component
从组件底层的元素上删除一个CSS类。
从组件底层的元素上删除一个CSS类。
参数:
  • cls : string
    需要移除的CSS类名
返回值:
  • Ext.Component
    this
Component
removeListener( String eventName, Function handler, [Object scope] ) : void
删除一个事件处理器。
删除一个事件处理器。
参数:
  • eventName : String
    处理器关联的事件类型。
  • handler : Function
    移除的处理器。 这应该是传递到addListener里的方法的引用。
  • scope : Object
    （可选）处理器指定的初始作用域。
返回值:
  • void
Observable
render ( [ Element/HTMLElement/String container ], [ String/Number position ] ) : void
在传递进来的HTML元素中渲染当前组件。...

在传递进来的HTML元素中渲染当前组件。

如果你正在使用一个Container 对象放置当前组件，那么请不要使用render方法。

当容器第一次被渲染时，它的子组件将会被容器的 layout 管理器渲染。

某些布局管理器允许动态添加子组件。它们包括 Ext.layout.CardLayout, Ext.layout.AnchorLayout, Ext.layout.FormLayout, Ext.layout.TableLayout。

当一个新的子组件被添加时，如果容器已经被渲染了， 你可能需要调用容器的 doLayout 方法来刷新视图，它将导致所有没有被渲染的子组件进行渲染操作。 此操作是必须的，这样你可以添加多个子组件而只刷新一次layout。

当创建复杂的UI时，非常重要的一点是，请记住调整子项目的尺寸和位置是容器的 layout 管理器的职责。 如果你希望子项目的尺寸对用户交互作出反应， 你必须为容器配置一个布局管理器，它将创建和管理你心里想要的那种布局。

忽略容器的layout 配置意味着将会使用一个基本的布局管理器，它除了按次序把子组件 渲染到容器中之外什么事情都不做。 这种情况下，任何尺寸和位置的调整操作都不会发生。

参数:
  • container : Element/HTMLElement/String
    (可选) 需要在其中渲染当前组件的元素。 如果它是从一个已存在的标签中创建的，此参数应该被忽略。
  • position : String/Number
    (可选) 容器中的一个元素ID或者一个DOM节点索引， 当前组件将会被插入到它前面 (默认append到容器的尾部)
返回值:
  • void
Component
resumeEvents() : void
重新开始触发事件。(参见suspendEvents) 如果事件以queueSuspended参数被挂起，则在事件被挂起时 ...
重新开始触发事件。(参见 suspendEvents) 如果事件以queueSuspended 参数被挂起，则在事件被挂起时触发的事件会被传递到所有的监听器上
参数:
  • 无。
返回值:
  • void
Observable
select ( String color ) : void
在调色板中选中指定的颜色(触发select事件)
在调色板中选中指定的颜色(触发select事件)
参数:
  • color : String
    A valid 6-digit color hex code (# will be stripped if included)
返回值:
  • void
ColorPalette
setDisabled ( Boolean disabled ) : Ext.Component
工具函数，使用布尔值设置有效/无效(disabled/enabled )。
工具函数，使用布尔值设置有效/无效(disabled/enabled )。
参数:
  • disabled : Boolean
返回值:
  • Ext.Component
    this
Component
setVisible ( Boolean visible ) : Ext.Component
工具方法，通过使用布尔值隐藏或者显示当前组件。
工具方法，通过使用布尔值隐藏或者显示当前组件。
参数:
  • visible : Boolean
    true时显示，false时隐藏
返回值:
  • Ext.Component
    this
Component
show () : Ext.Component
显示当前组件。监听' beforeshow' 事件，返回 false 取消显示组件...
显示当前组件。监听' beforeshow' 事件，返回 false 取消显示组件。在显示组件之后触发' show' 事件。
参数:
  • 无。
返回值:
  • Ext.Component
    this
Component
suspendEvents( Boolean queueSuspended ) : void
暂停触发所有的事件。 (参看resumeEvents)
暂停触发所有的事件。（参看 resumeEvents)
参数:
  • queueSuspended : Boolean
    如果传递为true则排列好暂停的事件使得在调用 resumeEvents 后再触发它们，而不是抛弃所有暂停的事件。
返回值:
  • void
Observable
un( String eventName, Function handler, [Object scope] ) : void
删除一个事件处理器(removeListener方法的简写形式)
删除一个事件处理器(removeListener方法的简写形式。)
参数:
  • eventName : String
    处理器关联的事件类型
  • handler : Function
    被删除的处理器 这应该是传入 addListener 中的方法的引用。
  • scope : Object
    （可选）为处理器指定的初始作用域。
返回值:
  • void
Observable
update ( Mixed htmlOrData , [ Boolean loadScripts ], [ Function callback ] ) : void
刷新组件的内部区域。
刷新组件的内部区域。
参数:
  • htmlOrData : Mixed
    如果已经通过tpl为当前组件配置了一个模板，那么 将会使用此参数来装配模板。 如果没有为当前组件配置模板，组件的内容区域将会通过Ext.Element 进行刷新。
  • loadScripts : Boolean
    (可选)只用在使用html配置时此参数才合法。默认为false。
  • callback : Function
    (可选)只用在使用html配置时此参数才合法。 当脚本加载完成时回调函数才被执行。
返回值:
  • void
Component

公共事件

Event Defined By
added : ( Ext.Component this , Ext.Container ownerCt , number index )
当一个组件被添加到一个Ext.Container时触发
当一个组件被添加到一个Ext.Container时触发
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • ownerCt : Ext.Container
    用于组件的容器
  • index : number
    添加组件的位置
Component
afterrender : ( Ext.Component this )
在组件渲染完成之后触发...

在组件渲染完成之后触发。

afterrender事件在当前组件被rendered 结束之后、在为组件定义的所有afterRender方法执行之后 触发，并且，如果有stateful， 也在状态被保存之后才触发。

监听器将会以如下参数格式被调用:
  • this : Ext.Component
Component
beforedestroy : ( Ext.Component this )
在组件 destroyed 之前触发。 在事件监听器中返回false以停止 destroy 操作。
在组件 destroyed 之前触发。 在事件监听器中返回false以停止 destroy 操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforehide : ( Ext.Component this )
在调用hide方法隐藏组件之前触发。 在事件监听器中返回false可以停止隐藏操作。
在调用hide方法隐藏组件之前触发。 在事件监听器中返回false可以停止隐藏操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforerender : ( Ext.Component this )
在组件被rendered 之前触发。 在事件监听器中返回false可以停止render 操作。
在组件被rendered 之前触发。 在事件监听器中返回false可以停止render 操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforeshow : ( Ext.Component this )
在调用show()方法现实组件之前触发。 事件处理函数返回false可以停止show。
在调用show 方法现实组件之前触发。 事件处理函数返回false可以停止show。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforestaterestore : ( Ext.Component this , Object state )
在组件状态恢复之前触发。返回false停止恢复状态操作。
在组件状态恢复之前触发。返回false停止恢复状态操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    StateProvider返回的状态哈希值。 如果没有禁止此事件，那么状态对象会被传递给applyState。 默认情况下，这样简单地把属性值拷贝到当前组件中。 可以覆盖此方法以提供自定的状态恢复操作。
Component
beforestatesave : ( Ext.Component this , Object state )
在组件状态被保存到配置的状态提供者之前触发。 返回false可以停止保存。
在组件状态被保存到配置的状态提供者之前触发。 返回false可以停止保存。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    状态值哈希。 这由在组件上调用getState() 方法决定。 此方法必须由开发者提供，返回是否需要对状态进行描述，默认情况下， Ext.Component有一个空实现。
Component
destroy : ( Ext.Component this )
在组件被销毁之后触发。
在组件被destroyed之后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
disable : ( Ext.Component this )
在组件被设置为无效状态后触发。
在组件被设置为无效状态后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
enable : ( Ext.Component this )
当组件被设置为有效(enabled)之后触发。
当组件被设置为有效(enabled)之后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
hide : ( Ext.Component this )
在组件被隐藏之后触发。 当调用hide 方法隐藏组件之后触发。
在组件被隐藏之后触发。 当调用hide 方法隐藏组件之后触发。
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
removed : ( Ext.Component this , Ext.Container ownerCt )
当一个组件被从Ext.Container容器中删除时触发
当一个组件被从Ext.Container容器中删除时触发
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • ownerCt : Ext.Container
    持有组件的容器
Component
render : ( Ext.Component this )
在组件被渲染之后触发。
在组件被 rendered(渲染) 之后触发。
监听器将以如下的参数格式被调用:
  • this : Ext.Component
Component
select : ( ColorPalette this , String color )
当选中一个颜色时触发
当选中一个颜色时触发
监听器将会以如下的参数格式调用:
  • this : ColorPalette
  • color : String
    6位数字十六进制代码的颜色值(不带#符号)
ColorPalette
show : ( Ext.Component this )
在调用show 方法显示组件之后触发。
在调用show 方法显示组件之后触发。
监听器将会用如下的参数格式被调用:
  • this : Ext.Component
Component
staterestore : ( Ext.Component this , Object state )
组件状态被存储之后触发。
组件状态被存储之后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    StateProvider返回的状态哈希值。 如果没有禁止此事件，那么状态对象会被传递给applyState。 默认情况下，这样简单地把属性值拷贝到当前组件中。 可以覆盖此方法以提供自定的状态恢复操作。
Component
statesave : ( Ext.Component this , Object state )
在组件状态被保存到所配置的状态提供者之后触发。
在组件状态被保存到所配置的状态提供者之后触发。
监听器将会用如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    状态值hash。 这是由在足见上调用getState() 方法决定的。 开发者必须提供此方法以返回是否需要恢复状态，默认情况下， Ext.Component有一个空实现。
Component


Observable
    Component

Class Ext.Component

包: | Ext
定义类的文件: | Component.js
类: | Component
子类: | BoxComponent, ColorPalette, DatePicker, Editor, BaseItem
继承自: | Observable

所有Ext组件的基类。 所有Componet的子类都自动地参与标准的Ext组件生命周期：创建、渲染、销毁，这些操作 由Container 类提供。 在创建容器时，组件可以通过items 配置选项被添加到容器中， 或者，可以通过add方法动态地 添加。

Component基类对基本的hide/show和enable/disable行为提供了内建的支持。

所有组件都注册到了 Ext.ComponentMgr 类，所以它们可以在任何时刻通过传递 id 使用 Ext.getCmp 方法获得引用。

所有用户开发的可视组件，如果需要参与自动的生命周期和尺寸管理，都必须是Component 的子类 (或者是 Ext.BoxComponent 的子类，如过需要盒子模型的管理，例如对height和width的管理)。

关于如何继承或者扩展ExtJs基类，以创建自定义组件的 详细示例，参见 Creating new UI controls 。

每一个组件都有一个特定的xtype，它是Ext定义的类型名， 可以与 getXType 和 isXType 配合使用。 以下是所有可用xtype的列表：

xtype            Class
-------------    ------------------
box              Ext.BoxComponent
button           Ext.Button
buttongroup      Ext.ButtonGroup
colorpalette     Ext.ColorPalette
component        Ext.Component
container        Ext.Container
cycle            Ext.CycleButton
dataview         Ext.DataView
datepicker       Ext.DatePicker
editor           Ext.Editor
editorgrid       Ext.grid.EditorGridPanel
flash            Ext.FlashComponent
grid             Ext.grid.GridPanel
listview         Ext.ListView
panel            Ext.Panel
progress         Ext.ProgressBar
propertygrid     Ext.grid.PropertyGrid
slider           Ext.Slider
spacer           Ext.Spacer
splitbutton      Ext.SplitButton
tabpanel         Ext.TabPanel
treepanel        Ext.tree.TreePanel
viewport         Ext.ViewPort
window           Ext.Window

Toolbar components
---------------------------------------
paging           Ext.PagingToolbar
toolbar          Ext.Toolbar
tbbutton         Ext.Toolbar.Button        (已过时；使用 button)
tbfill           Ext.Toolbar.Fill
tbitem           Ext.Toolbar.Item
tbseparator      Ext.Toolbar.Separator
tbspacer         Ext.Toolbar.Spacer
tbsplit          Ext.Toolbar.SplitButton   (已过时；使用 splitbutton)
tbtext           Ext.Toolbar.TextItem

Menu components
---------------------------------------
menu             Ext.menu.Menu
colormenu        Ext.menu.ColorMenu
datemenu         Ext.menu.DateMenu
menubaseitem     Ext.menu.BaseItem
menucheckitem    Ext.menu.CheckItem
menuitem         Ext.menu.Item
menuseparator    Ext.menu.Separator
menutextitem     Ext.menu.TextItem

Form components
---------------------------------------
form             Ext.form.FormPanel
checkbox         Ext.form.Checkbox
checkboxgroup    Ext.form.CheckboxGroup
combo            Ext.form.ComboBox
datefield        Ext.form.DateField
displayfield     Ext.form.DisplayField
field            Ext.form.Field
fieldset         Ext.form.FieldSet
hidden           Ext.form.Hidden
htmleditor       Ext.form.HtmlEditor
label            Ext.form.Label
numberfield      Ext.form.NumberField
radio            Ext.form.Radio
radiogroup       Ext.form.RadioGroup
textarea         Ext.form.TextArea
textfield        Ext.form.TextField
timefield        Ext.form.TimeField
trigger          Ext.form.TriggerField

Chart components
---------------------------------------
chart            Ext.chart.Chart
barchart         Ext.chart.BarChart
cartesianchart   Ext.chart.CartesianChart
columnchart      Ext.chart.ColumnChart
linechart        Ext.chart.LineChart
piechart         Ext.chart.PieChart

Store xtypes
---------------------------------------
arraystore       Ext.data.ArrayStore
directstore      Ext.data.DirectStore
groupingstore    Ext.data.GroupingStore
jsonstore        Ext.data.JsonStore
simplestore      Ext.data.SimpleStore      (已过时；使用 arraystore)
store            Ext.data.Store
xmlstore         Ext.data.XmlStore

配置项

Config Options Defined By
allowDomMove : Boolean
在渲染时组件是否可以移动Dom节点(默认为true)。
Component
applyTo : Mixed
指定一个元素的id、一个DOM元素或者一个已经存在并被渲染到DIV中的元素，此DIV已经被...

指定一个元素的id、一个DOM元素或者一个已经存在并被渲染到DIV中的元素，此DIV已经被 渲染到document中，并且为当前组件指定了一些结构化的标签。

  • 描述 :
      当使用了 applyTo， 在主元素中也可以用id或者CSS类名来指定组件的托管部分， 并且，如果可以的话，创建的组件可能也会试图在那个标签中创建它的子组件。
  • 注意 :
      当使用此配置项时，无需调用render()方法。
      如果指定了applyTo属性，任何传递给 renderTo 的值都会被忽略，并且目标元素的父节点将会自动被用作组件的容器。
Component
autoEl : Mixed
一个表签名或者一个 DomHelper 描述，用来创建 Element ，它将封装当前组件...

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

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

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

{
    xtype: 'box',
    autoEl: {
        tag: 'img',
        src: 'http://www.example.com/example.jpg'

    }
}, {
    xtype: 'box',
    autoEl: {
        tag: 'blockquote',
        html: 'autoEl is cool!'
    }
}, {
    xtype: 'container',
    autoEl: 'ul',
    cls: 'ux-unordered-list',
    items: {
        xtype: 'box',
        autoEl: 'li',
        html: 'First list item'
    }
}
Component
autoShow : Boolean
如果组件需要检测隐藏CSS属性(如 'x-hidden' 或者 'x-hide-display')并且在渲染时删除...
如果组件需要检测隐藏CSS属性(如 'x-hidden' 或者 'x-hide-display')并且在渲染时删除它们 (默认为false)，设置此值为true。
Component
bubbleEvents : Array
一个事件数组，当这些事件被触发时，将会被冒泡到所有父容器中。参见....

一个事件数组，当这些事件被触发时，将会被冒泡到所有父容器中。参见 Ext.util.Observable.enableBubble。 默认为 []。

Component
clearCls : String
应用到特殊的clearing div的CSS类， 这个clearing div直接渲染到每个form field的包装器后面...

应用到特殊的clearing div的CSS类， 这个clearing div直接渲染到每个form field的包装器后面，以提供 清除field的功能(默认为 'x-form-clear-left')。

注意: 只有在当前组件被渲染到一个使用FormLayout 布局(例如 Ext.form.FormPanel 或者指定 layout:'form')的 容器中、或者是指定了一个fieldLabel 、或者指定isFormField=true 时此配置才有效。

另请参见 Ext.layout.FormLayout. fieldTpl。

Component
cls : String
一个可选的额外CSS类，它将被添加到当前组件的元素上(默认为'')...
一个可选的额外CSS类，它将被添加到当前组件的元素上(默认为'')。 此属性对于在组件上，或者它的任何使用标准CSS规则的孩子节点上， 添加定制的样式非常有用。
Component
contentEl : String
(可选)指定一个已存在的HTML元素，或者一个已存在HTML元素的...

(可选)指定一个已存在的HTML元素，或者一个已存在HTML元素的 id ，它们将被用作当前组件的内容。

  • 描述 :
    此配置选项被用来将一个已存在的HTML元素 插入到一个新组件(在组件渲染之后它简单地移动DOM元素) 的layout元素中，使它成为该组件的内容。
  • 注意 :
    指定的HTML元素将被append到组件的layout元素中， 在所有配置的 HTML 被插入之后， 并且，这样的话，在render事件 被触发时，document中将不再包含此元素。
    指定的HTML元素将不会参与组件所有可能使用的 layout 过程(译者注：指这些HTML元素 不会参与布局操作)。 它仅是HTML而已。布局操作实在孩子 items 上进行的。
    添加 x-hidden 或者 x-hide-display CSS类，以防在内容渲染到panel时发生闪烁。
Component
ctCls : String
一个可选的外部CSS样式，添加到这个组件的容器(默认值为 '')。 这个方法对于使用标准的CSS规则...

一个可选的外部CSS样式，添加到这个组件的容器(默认值为 '')。 这个方法对于使用标准的CSS规则，为组件或它的任何一个子组件添加特定的样式非常有用。 参见 Ext.layout.ContainerLayout和 extraCls 。

注意: ctCls 默认为 ''期望如下的类，它们将指定一个默认值:

  • Box Layout : 'x-box-layout-ct'
使用一个额外的CSS类配置以上的Class，它是append到默认对象上的。例如， 对于BoxLayout (Hbox and Vbox):
                                ctCls: 'x-box-layout-ct custom-class'

Component
data : Mixed
初始化数据集，它将被应用到 tpl 上以刷新组件的内容区域。
Component
disabled : Boolean
当前组件处于无效状态时为true。 Read-only.
Component
disabledClass : String
当组件处于无效状态时添加到组件上的CSS类(默认为 'x-item-disabled')。
Component
fieldLabel : String
紧靠此field显示的标签文本(默认值为 '')。注意...

紧靠此field显示的标签文本(默认值为 '')。

注意:只有在当前组件被渲染到一个使用FormLayout 的容器中时，此配置才有效。 (例如 Ext.form.FormPanel 或 指定 layout:'form')。

另请参见 hideLabel 、 Ext.layout.FormLayout和 fieldTpl。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Name'
    }]
});
Component
hidden : Boolean
如果当前组件处于隐藏状态，此值为true。Read-only。
Component
hideLabel : Boolean
true时完全隐藏label元素 ( label 和 separator)。 默认为 false。 默认情况下，即使你不指定...

true时完全隐藏label元素 ( label 和 separator)。 默认为 false。 默认情况下，即使你不指定 fieldLabel 它的空间仍然会被保留，这样这块区域会与其它确实拥有label的区域位于同一排。 讲此值设置为 true 将导致此区域不再保留此空间。

注意: 参见 clearCls 的注释。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield'
        hideLabel: true
    }]
});
Component
hideMode : String
组件如何隐藏，支持的值有： 'visibility' (css visibility), 'offsets' (位置偏移量为负值) 和...

组件如何隐藏，支持的值有： 'visibility' (css visibility), 'offsets' (位置偏移量为负值) 和 'display' (css display).

注意:一般首选默认值 'display'，因为当组件第一次显示的时候它们会自动进行布局 (隐藏的时候不会调整尺寸)。

Component
hideParent : Boolean
此值为true时，当调用hide/show方法时，将会hide和show组件的容器...
此值为true时，当调用hide/show方法时，将会hide和show组件的容器；false时将会 hide和show组件自身(默认为false)。例如，这可以用作window上隐藏按钮的一种 快捷操作，通过设置此按钮的hideParent:true，然后把它添加到window上。
Component
html : String/Object
一个HTML片段，或者一个 DomHelper 描述，用作layout元素的内容(默认为'')。...
一个HTML片段，或者一个 DomHelper 描述，用作layout元素的内容(默认为'')。 这个HTML内容在组件渲染之后才被添加，所以在 render 出发的时候，document中尚未包含此HTML。 但是这个内容将会在所有配置的 contentEl 之前被插入到body标签中。
Component
id : String
当前组件唯一的id(默认为auto-assigned id)...

当前组件唯一的id(默认为auto-assigned id)。 如果你需要在以后访问组件，而又没有一个有效的组件对象引用，那么你需要指定一个 id( 也就是，使用Ext. getCmp方法 )。

注意，此id也将被用作组件底层HTML标签的id，这些标签被渲染到页面中。 这将允许你编写基于id的CSS规则，以独立地描述指定的实例；并且，也可以通过 组件父标签的id选中子元素。

注意:为了避免与唯一的id 产生重复， 请参见 itemId 和 ref 。

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

Component
itemCls : String
注意: 只有在当前组件被渲染到一个使用FormLayout 布局的 容器中时此配置才有效...

注意: 只有在当前组件被渲染到一个使用FormLayout 布局的 容器中时此配置才有效。 (例如Ext.form.FormPanel 或者指定 layout:'form')。

一个附加的CSS类，应用到div上，包装当前field的表单元素。 如果提供了此参数， field级上的itemCls将会覆盖 container级上提供的 默认itemCls。 为itemCls指定的值将会被添加默认的 类('x-form-item')。

既然它被应用到项目的包装器上(参见 Ext.layout.FormLayout。 fieldTpl)， 它将允许你编写能应用到此field、label(如果有指定)、或者field内部任何其它元素的标准CSS规则。

注意: 参考 fieldLabel的注释。 .

示例用法:

// Apply a style to the field's label:
<style>
    .required .x-form-item-label {font-weight:bold;color:red;}
</style>

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Name',
        itemCls: 'required' //this label will be styled
    },{
        xtype: 'textfield',
        fieldLabel: 'Favorite Color'
    }]
});
Component
itemId : String
当没有可利用的对象引用时，itemId可以作为第二选择，用来获得一个组件的引用， 代替 ...

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

var c = new Ext.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'); // 与 Ext.getCmp()不同

p2 = p1.ownerCt.getComponent('p2'); // 通过兄弟对象获得引用

另请参见 id 和 ref 。

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

Component
labelSeparator : String
每个fieldLabel 文本后面现实的分隔符。 此属性可以在多个层次上进行配置...

每个fieldLabel 文本后面现实的分隔符。 此属性可以在多个层次上进行配置。优先顺序为：

  • field / component level
  • container level
  • layout level (默认为冒号 ':')
如不需要为当前field的label显示分隔符，指定一个空字符串''即可。

注意:参见 clearCls 的注释。

另请参见 hideLabel 和 Ext.layout.FormLayout。 fieldTpl。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    layoutConfig: {
        labelSeparator: '~'   // layout config has lowest priority (defaults to ':')
    },
    labelSeparator: '>>',     // config at container level
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Field 1',
        labelSeparator: '...' // field/component level config supersedes others
    },{
        xtype: 'textfield',
        fieldLabel: 'Field 2' // labelSeparator will be '='

    }]
});
Component
labelStyle : String
一个CSS样式描述字符串，它将直接应用到当前field的label上...

一个CSS样式描述字符串，它将直接应用到当前field的label上。 如果有设置，默认为容器的labelStyle值(例如 Ext.layout.FormLayout.labelStyle , 或者 '')。

注意:参见 clearCls 的注释。

另请参见 hideLabel 和 Ext.layout.FormLayout. fieldTpl。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Name',
        labelStyle: 'font-weight:bold;'
    }]
});
Component
listeners : Object
一个包含一个或多个事件处理器的配置对象，会在初始化的时候被添加到目标对象上...

一个包含一个或多个事件处理器的配置对象，会在初始化的时候被添加到目标对象上。 该配置对象应该是一个有效的监听器配置对象就像 addListener例子中指定的一样可一次附加多个处理器。

ExtJs Components上的DOM事件

一些 ExtJs Component 类导出时会选择一些DOM事件(例如 "click", "mouseover" 等等), 这通常只是在有额外的值可以被添加时发生。例如DataView类的 click事件会传递被点击的节点。也可以直接在Component的HTMLElementevent上访问DOM事件，但必需在Component被渲染后监听器才能添加到Element 上。可以按照以下步骤添加插件:

// 插件会用一个监听器配置对象进行配置。
//该组件会被添加到所有处理方法的参数列表上。
Ext.DomObserver = Ext.extend(Object, {
    constructor: function(config) {
        this.listeners = config.listeners ? config.listeners : config;
    },

    // 组件将自己传递进了插件的初始化方法里
    init: function(c) {
        var p, l = this.listeners;
        for (p in l) {
            if (Ext.isFunction(l[p])) {
                l[p] = this.createHandler(l[p], c);
            } else {
                l[p].fn = this.createHandler(l[p].fn, c);
            }
        }

        // 渲染后立即添加监听器到元素上
        c.render = c.render.createSequence(function() {
            var e = c.getEl();
            if (e) {
                e.on(l);
            }
        });
    },

    createHandler: function(fn, c) {
        return function(e) {
            fn.call(this, e, c);
        };
    }
});

var combo = new Ext.form.ComboBox({

    // 元素被点击后折叠
    plugins: [ new Ext.DomObserver({
        click: function(evt, comp) {
            comp.collapse();
        }
    })],
    store: myStore,
    typeAhead: true,
    mode: 'local',
    triggerAction: 'all'
});

Observable
overCls : String
一个可选的额外的CSS类，它将在鼠标移过元素时被添加到组件上...
一个可选的额外的CSS类，它将在鼠标移过元素时被添加到组件上，鼠标移出时 删除。(默认为'')。此属性对于在组件上，或者它的任何使用标准CSS规则的孩子节点上， 添加定制的'active' 或者 'hover'样式非常有用。
Component
plugins : Object/Array
一个对象或者一个对象数组，为组件提供特殊的功能 ...
一个对象或者一个对象数组，为组件提供特殊的功能。 对一个合法的插件唯一的要求是它含有一个init()方法， 能接收一个Ext.Component型的参数。 当组件被创建时，如果有可用的插件，组件将会调用每个插件的init方法， 并将自身的引用作为方法参数传递给它。然后，每个插件就可以调用方法或者响应组件上的事件， 就像需要的那样提供自己的功能。
Component
ptype : String
需要创建配置的ptype。 当传递一个配置对象给构造函数时...
需要创建配置的ptype。 当传递一个配置对象给构造函数时，此配置选项不会被使用。 只有在使用懒初始化的时候此配置项才会被使用， 此时Plugin不是 通过一个完整的实例组件，而是通过一个Component配置指定的。 在渲染时，将会查找ptype以决定创建何种类型的Plugin。

如果你创建自己的Plugin，你可以通过 Ext.ComponentMgr.registerPlugin 对它们进行注册，以便能利用懒初始化和渲染机制。
Component
ref : String
一个路径描述，与组件的 ownerCt 相关，它描述了把当前组件的命名引用放置到哪个父容器中去。...

一个路径描述，与组件的 ownerCt 相关，它描述了把当前组件的命名引用放置到哪个父容器中去。

祖先的坐标路径可以通过'/'字符进行分隔。 例如，将一个Toolbar Button的引用放入 拥有此Toolbar的Panel中:

var myGrid = new Ext.grid.EditorGridPanel({
    title: 'My EditorGridPanel',
    store: myStore,
    colModel: myColModel,
    tbar: [{
        text: 'Save',
        handler: saveChanges,
        disabled: true,
        ref: '../saveButton'
    }],
    listeners: {
        afteredit: function() {
//          The button reference is in the GridPanel
            myGrid.saveButton.enable();
        }
    }
});

在上面的代码中，如果 ref 是 'saveButton' ，那么引用将会被放置到Toolbar中。 ref 中的每个'/' 都会从组件的 ownerCt 向上移动一级。

另请参见 added 和 removed 事件。

Component
renderTo : Mixed
该值可以是一个节点的id、一个DOM节点或者一个已存在的元素...

该值可以是一个节点的id、一个DOM节点或者一个已存在的元素， 组件将会被渲染到其中。

  • 注意 :
      如果组件不是一个Container 的子项目时， 不要使用此选项。 渲染和管理它的子项目是一个Container 的layout manager的责任。
      当使用此配置项时，无需调用render()方法。

另请参见 render 。

Component
stateEvents : Array
一个事件数组，当它们被触发时，组件需要保存自己的状态(默认值为 none)...

一个事件数组，当它们被触发时，组件需要保存自己的状态(默认值为 none)。 它们可以是任何该组件支持的事件类型，包括浏览器事件和 自定义事件(例如['click', 'customerchange'])。

对于保存和恢复组件状态的详细解释，参见 stateful

Component
stateId : String
为该组件指定的唯一的id值，它被用作管理组件状态的目的...
为该组件指定的唯一的id值，它被用作管理组件状态的目的。 (如果设定了id，默认值为组件自己的id，否则，如果组件使用自动生成的id，此值为null)。

对于保存和反解析组件状态的解释，参见 stateful 。

Component
stateful : Boolean
一个标志参数，它将引起组件在启动时尝试从一个保存的状态中恢复内部状态参数...

一个标志参数，它将引起组件在启动时尝试从一个保存的状态中恢复内部状态参数。 组件必须要么拥有一个 stateId 或者 id ，它们被分配给需要被管理的状态属性。 在跨页面加载时，不保证自动生成的id属性的稳定性， 并且，不能依赖此id来保存和恢复一个组件的相同状态。

为了保存状态的操作能够工作，状态管理器的提供者必须 被设置成一个Ext.state.Provider 的实现类，它覆盖了set 和get 方法，以便保存和恢复name/value对。 有一个内置的Ext.state.CookieProvider 可用。

为当前页面设置状态提供者:

Ext.state.Manager.setProvider(new Ext.state.CookieProvider({
    expires: new Date(new Date().getTime()+(1000*60*60*24*7)), //7 days from now
}));

当 stateEvents 配置项中其中之一的事件被触发时， 一个状态可保存的组件将试图保存其状态。

保存状态时，一个可保存状态的组件首先需要通过调用 getState 方法来序列化它的状态。 默认情况下，此函数什么事都不做。 开发者必须提供一个实现，返回一个hash对象，它描述了组件可恢复的状态。

getState方法产生的值将会传递给 Ext.state.Manager.set 方法，它使用配置的 Ext.state.Provider 来保存对象，以组件的 stateId 为key，或者，如果此值（指stateId）没有指定时， 使用它的 id 作为key。

在进行构造时，一个可保存状态的组件试图通过调用 Ext.state.Manager.get方法来 恢复它的状态，传递 stateId 或者，如果此值（指stateId）没有指定时， 使用它的 id 作为参数。

结果对象被传递给 applyState 。 applyState 的默认实现只是简单地把属性拷贝到对象中， 但是开发者可以覆盖此方法以支持更多行为。

通过向 beforestaterestore, staterestore, beforestatesave 和 statesave 事件上绑定监听器，你可以在保存和恢复状态时进行额外的处理。

Component
style : String
被添加到组件元素的特定样式。 必须是按照...
被添加到组件元素的特定样式。 必须是按照 Ext.Element.applyStyles 类指定格式的合法参数值。

new Ext.Panel({
    title: 'Some Title',
    renderTo: Ext.getBody(),
    width: 400, height: 300,
    layout: 'form',
    items: [{
        xtype: 'textarea',
        style: {
            width: '95%',
            marginBottom: '10px'
        }
    },
        new Ext.Button({
            text: 'Send',
            minWidth: '100',
            style: {
                marginBottom: '10px'
            }
        })
    ]
});
Component
tpl : Mixed
一个 Ext.Template , Ext.XTemplate 或者一个用来形成一个Ext.XTemplate的字符串数组...
一个 Ext.Template , Ext.XTemplate 或者一个用来形成一个Ext.XTemplate的字符串数组。 与 data 和 tplWriteMode 配置项协同使用。
Component
tplWriteMode : String
刷新组件的内容区域时使用的Ext.(X)Template方式。 默认为'overwrite' (参见 Ext.XTemplate.overwrite )。
刷新组件的内容区域时使用的Ext.(X)Template方式。 默认为'overwrite' (参见 Ext.XTemplate.overwrite )。
Component
xtype : String
需要创建配置的xtype。 当传递一个配置对象给构造函数时...
需要创建配置的xtype。 当传递一个配置对象给构造函数时，此配置选项不会被使用。 只有在使用懒初始化的时候此配置项才会被使用，此时容器的子项目不是 通过一个完整的实例组件，而是通过一个Component配置指定的。 在渲染时，将会查找xtype以决定创建何种类型的子组件。

预定义的xtype列表如下： here。

如果你继承Component创建你自己的组件，你需要使用Ext.ComponentMgr.registerType 对它们进行注册，以便利用懒初始化和渲染机制。
Component

公共属性

Property Defined By
disabled : Boolean
当前组件处于无效状态时为true。 Read-only.
Component
el : Ext.Element
封装了当前组件的Ext.Element。 Read-only。通常情况下，这将是一个<DIV>元素，它由此类的...

封装了当前组件的Ext.Element。 Read-only。

通常情况下，这将是一个<DIV>元素，它由此类的 onRender方法创建，但是它可以通过使用 autoEl 配置项进行覆盖。

注意: 直到组件渲染完成此元素都将处于无效状态。

如需向当前组件的 DOM事件(而不是当前组件自己的Observable事件)添加监听器， 更多建议，参见 listeners 配置项，或者直接使用一个render监听器:

new Ext.Panel({
    title: 'The Clickable Panel',
    listeners: {
        render: function(p) {
            // Append the Panel to the click handler's argument list.
            p.getEl().on('click', handlePanelClick.createDelegate(null, [p], true));
        },
        single: true  // Remove the listener after first invocation
    }
});

另请参见 getEl

Component
hidden : Boolean
如果当前组件处于隐藏状态，此值为true。Read-only。
Component
initialConfig : Object
当前组件的初始化配置描述。 Read-only。
Component
ownerCt : Ext.Container
组件所属的Container (默认为undefined，当前组件被添加到一个容器中时此值被自动设置)...
组件所属的Container (默认为undefined，当前组件被添加到一个容器中时此值被自动设置)。 Read-only。

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

Component
refOwner : Ext.Container
如果当前组件是一个容器的孩子，并且是通过一个 ref 配置项被注册的，则此值为 ref 引用被插入到的祖先容器。
如果当前组件是一个容器的孩子，并且是通过一个 ref 配置项被注册的，则此值为 ref 引用被插入到的祖先容器。
Component
rendered : Boolean
如果当前组件已经被渲染了，此值为true。Read-only.
Component

公共方法

Method Defined By
Component ( Ext.Element/String/Object config )
参数:
  • config : Ext.Element/String/Object
    配置选项可以按照如下方式指定:
    • 一个元素 :

      它将被设置为内部元素，并且它的id被用作组件的id

    • 一个字符串 :

      它被假定为一个已存在元素的id，并且此id被用作组件的id

    • 其它任何东西 :

      它被假定为一个标准的配置对象，并且将被应用到组件上

返回值:
  • void
Component
addClass ( string cls ) : Ext.Component
为组件底层的元素添加CSS样式。
为组件底层的元素添加CSS样式。
参数:
  • cls : string
    需要添加的CSS样式的class名称
返回值:
  • Ext.Component
    this
Component
addEvents( Object|String o, string Optional. ) : void
添加指定的事件到事件列表上，事件会被该Observable触发。
添加指定的事件到事件列表上，事件会被该Observable触发。
参数:
  • o : Object|String
    以事件名作为属性true作为值的对象 或者当多个事件名被分开的传递时则为第一个事件名。
  • Optional. : string
    事件名被分开的传递时则为事件名。 用法:
    this.addEvents('storeloaded', 'storecleared');
返回值:
  • void
Observable
addListener( String eventName, Function handler, [Object scope], [Object options] ) : void
给对象添加事件处理器。
给对象添加事件处理器。
参数:
  • eventName : String
    监听的事件名。
  • handler : Function
    事件调用的方法
  • scope : Object
    （可选）处理方法执行的作用域 (this的引用 reference)。 如果被忽略。默认为触发事件的对象。
  • options : Object
    （可选）包含处理器配置和属性的对象。 可能包含以下的属性:
    • scope : Object
      处理方法执行的作用域(this的引用) 。 如果被忽略。默认为触发事件的对象。
    • delay : Number
      在触发事件后延迟调用处理器的毫秒数。
    • single : Boolean
      如果为True则添加一个处理器来处理下一次的事件触发（仅一次），然后移除自己。
    • buffer : Number
      使得处理器延迟指定毫秒数后预定的运行在 一个Ext.util.DelayedTask中 。 如果事件在时间内再一次被触发，原始的处理器不会被调用，但是新的处理器会预定的在他的位置上。
    • target : Observable
      如果事件在目标的Observable上触发则仅仅调用处理器， 否则 事件会从子类的Observable上冒泡

    组合选项
    使用这些选项参数,可能会组合出不同类型的监听器：

    一个延迟的，一次性的监听器。

    myDataView.on('click', this.onClick, this, {
single: true,
delay: 100
});

    一次调用附加多个处理器
    该方法同样支持传递一个包含指定的多个处理器的属性的配置对象参数。

    myGridPanel.on({
'click' : {
    fn: this.onClick,
    scope: this,
    delay: 100
},
'mouseover' : {
    fn: this.onMouseOver,
    scope: this
},
'mouseout' : {
    fn: this.onMouseOut,
    scope: this
}
});

    或者一个简写的语法：

    myGridPanel.on({
'click' : this.onClick,
'mouseover' : this.onMouseOver,
'mouseout' : this.onMouseOut,
 scope: this
});
返回值:
  • void
Observable
applyToMarkup ( String/HTMLElement el ) : void
将此组件添加到已存在的有效的HTML标签中。 使用该方法时，无需再调用render()方法。
将此组件添加到已存在的有效的HTML标签中。 使用该方法时，无需再调用render()方法。
参数:
  • el : String/HTMLElement
返回值:
  • void
Component
cloneConfig ( Object overrides ) : Ext.Component
默认使用原先传递给当前实例的配置值克隆当前组件。
默认使用原先传递给当前实例的配置值克隆当前组件。
参数:
  • overrides : Object
    一个新的配置项，包含需要覆盖到克隆版本的所有属性。 可以传递一个id参数给此对象，否则将自动生成一个新的id以避免发生重复。
返回值:
  • Ext.Component
    当前组件的克隆副本
Component
destroy () : void
通过如下方法销毁对象：删除所有的事件监听器、将组件的元素从DOM树中删除...
通过如下方法销毁对象：删除所有的事件监听器、将组件的元素从DOM树中删除（如果可以）、 将组件从它的 Ext.Container（如果可用）中删除、 并且将它从Ext.ComponentMgr中 注销。 销毁操作一般由框架自动完成，一般情况下不需要直接调用该方法。
参数:
  • 无。
返回值:
  • void
Component
disable () : Ext.Component
将组件置为无效状态，并出发'disable'事件。
将组件置为无效状态，并出发'disable'事件。
参数:
  • 无。
返回值:
  • Ext.Component
    this
Component
enable () : Ext.Component
将组件置为有效状态并触发'enable'事件。
将组件置为有效状态并触发'enable'事件。
参数:
  • 无。
返回值:
  • Ext.Component
    this
Component
enableBubble( String/Array events ) :void
是否现在使得事件会被该Observable触发并调用 this.getBubbleTarget()方法在拥有者的继承树...

是否现在使得事件会被该Observable触发并调用 this.getBubbleTarget()方法在拥有者的继承树中冒泡。Observable的基础类中没有该方法的实现。

该方法一般被Ext.Components用来冒泡事件到拥有者的容器。参看Ext.Component.getBubbleTarget默认的实现 在Ext.Component中返回组件的直接拥有者。但是如果需要的是一个已知的目标，该方法可以被重写来更快的访问需求的目标。

例子:

Ext.override(Ext.form.Field, {
    // 添加方法到Field的initComponent上改变事件为冒泡
    initComponent : Ext.form.Field.prototype.initComponent.createSequence(function() {
        this.enableBubble('change');
    }),

    // 我们知道我们想让Field的事件冒泡到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() {
            // 如果样式被修改标题会变红。
            myForm.header.setStyle('color', 'red');
        }
    }
});
参数:
  • events : String/Array
    冒泡的事件名，或事件名数组
返回值:
  • void
Observable
findParentBy ( Function fn ) : Ext.Container
通过自定义的函数查找当前组件上层任何层次上的容器...
通过自定义的函数查找当前组件上层任何层次上的容器。 如果传递的函数返回true，容器对象将被返回。
参数:
  • fn : Function
    自定义的函数，使用如下参数调用(container,this component)。
返回值:
  • Ext.Container
    自定义函数返回true的第一个容器
Component
findParentByType ( String/Class xtype ) : Ext.Container
通过xtype或者class查找当前组件上层任何层次上的容器
通过xtype或者class查找当前组件上层任何层次上的容器
参数:
  • xtype : String/Class
    组件的xtype字符串，或者直接是组件的class
返回值:
  • Ext.Container
    符合指定xtype或者class的第一个容器
Component
fireEvent( String eventName, Object... args ) : Boolean
用传入的参数触发指定的事件 (减去事件名)。 一个事件可以被设置为冒泡 Obse...

用传入的参数触发指定的事件 (减去事件名)。

一个事件可以被设置为冒泡到Observable父类继承树(参看 Ext.Component.getBubbleTarget) 调用enableBubble实现。

参数:
  • eventName : String
    触发的事件名。
  • args : Object...
    传递给处理器的可变长度参数。
返回值:
  • Boolean
    如果有任何的处理器返回false则返回false，否则返回true。
Observable
focus ( [ Boolean selectText ], [ Boolean/Number delay ] ) : Ext.Component
尝试将当前组件设为焦点。
尝试将当前组件设为焦点。
参数:
  • selectText : Boolean
    (可选) 如果可用，同时选中组件内部的文本
  • delay : Boolean/Number
    (可选)将当前组件设置为焦点的延迟时间(设置为true等于0毫秒)
返回值:
  • Ext.Component
    this
Component
getBubbleTarget () : Ext.Container
为Observable的fireEvent方法提供链接，它沿着继承结构进行冒泡操作。
为Observable的fireEvent方法提供链接，它沿着继承结构进行冒泡操作。
参数:
  • 无。
返回值:
  • Ext.Container
    拥有当前组件的容器。
Component
getEl () : Ext.Element
返回 Ext.Element ，它包装了当前组件。...

返回 Ext.Element ，它包装了当前组件。

通常情况下，这将是一个<DIV>元素，它是由该类的onRender方法创建的， 但是可以使用autoEl配置项 覆盖它。

注意: 此元素将会一直处于无效状态直到当前组件渲染完成。

如需向当前组件的 DOM事件(而不是当前组件自己的Observable事件)添加监听器， 更多建议，参见 listeners 配置项，或者直接使用一个render监听器:

new Ext.Panel({
    title: 'The Clickable Panel',
    listeners: {
        render: function(p) {
            // Append the Panel to the click handler's argument list.
            p.getEl().on('click', handlePanelClick.createDelegate(null, [p], true));
        },
        single: true  // Remove the listener after first invocation
    }
});
参数:
  • 无。
返回值:
  • Ext.Element
    包装当前组件的元素。
Component
getId () : String
返回当前组件的id，如果没有定义id，则自动生成并返回一个id:'ext-comp-'...
返回当前组件的 id 如果没有定义 id 则自动生成并返回一个 id

'ext-comp-' + (++Ext.Component.AUTO_ID)
参数:
  • 无。
返回值:
  • String
    id
Component
getItemId () : String
返回当前组件的 itemId 。 如果没有通过配置参数指定 itemId 那么，将会使用...
返回当前组件的 itemId 。 如果没有通过配置参数指定 itemId 那么，将会使用 getId 返回 id 。
参数:
  • 无。
返回值:
  • String
Component
getXType () : String
获取当前组件的xtype，它是用 Ext.ComponentMgr 注册的。 所有可用的xtype列表，参见...
获取当前组件的xtype，它是用 Ext.ComponentMgr 注册的。 所有可用的xtype列表，参见 Ext.Component 类头部。示例用法:

var t = new Ext.form.TextField();
alert(t.getXType());  // alerts 'textfield'
参数:
  • 无。
返回值:
  • String
    The xtype
Component
getXTypes () : String
返回此组件的xtype继承树，用字符'-'分隔。 所有可用的xtype值...

返回此组件的xtype继承树，用字符'-'分隔。 所有可用的xtype值，请参见Ext.Component 类的头部。

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

示例用法:

var t = new Ext.form.TextField();
alert(t.getXTypes());  // alerts 'component/box/field/textfield'
参数:
  • 无。
返回值:
  • String
    xtype层次字符串
Component
hasListener( String eventName ) : Boolean
检测对象是否包含指定事件的任何监听器
检测对象是否包含指定事件的任何监听器
参数:
  • eventName : String
    检测的事件名
返回值:
  • Boolean
    如果事件被监听则为true，否则为false
Observable
hide () : Ext.Component
隐藏当前组件。 监听 beforehide' 事件并且返回false 可以取消隐藏组件的操作。 在隐藏组件之后触发...
隐藏当前组件。 监听 beforehide' 事件并且返回false 可以取消隐藏组件的操作。 在隐藏组件之后触发 ' hide' 事件。 如果组件被配置成 hidden 那么此方法在内部被调用。
参数:
  • 无。
返回值:
  • Ext.Component
    this
Component
isVisible () : Boolean
如果当前组件可见，返回true。
如果当前组件可见，返回true。
参数:
  • 无。
返回值:
  • Boolean
    如果当前组件可见，返回true，其它返回false。
Component
isXType ( String xtype , [ Boolean shallow ] ) : Boolean
Tests whether or not this Component is of a specific xtype. This can test whether this Component is descended from th...

测试此组件是否是指定的xtype。此方法既可以测试是否是指定的xtype的某个子类， 或者它是否直接是指定的xtype类(shallow=true)。

如果使用你自己的子类，必须知道组件必须注册它的xtype值。

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

示例用法:

var t = new Ext.form.TextField();
var isText = t.isXType('textfield');        // true
var isBoxSubclass = t.isXType('box');       // true, descended from BoxComponent
var isBoxInstance = t.isXType('box', true); // false, not a direct BoxComponent instance
参数:
  • xtype : String
    需要为当前组件进行检测的xtype
  • shallow : Boolean
    (可选) 如果为false，检测组件是否是xtype继承树中的某个子类（默认是这种情况）， 如果为true，只检测组件是否是指定的xtype类型。
返回值:
  • Boolean
    如果当前组件是指定xtype的子类，返回true，其它返回flase。
Component
mon ( Observable|Element item , Object|String ename , Function fn , Object scope , Object opt ) : void
向任何Observable对象(或者元素)上添加监听器，监听器将会在组件...

向任何Observable对象(或者元素)上添加监听器，监听器将会在组件销毁时被自动删除。
用法：

myGridPanel.mon(myGridPanel.getSelectionModel(), 'selectionchange', handleSelectionChange, null, {buffer: 50});

or:

myGridPanel.mon(myGridPanel.getSelectionModel(), {
    selectionchange: handleSelectionChange,
    buffer: 50
});
参数:
  • item : Observable|Element
    需要添加listener/listeners的项目。
  • ename : Object|String
    事件名，或者一个包含事件名属性的对象。
  • fn : Function
    (可选) 如果 ename 参数是一个事件名，此参数为处理函数。
  • scope : Object
    (可选)如果 ename 参数是一个事件名称，此参数是作用域 ( this 引用)，监听函数将会在此作用域中被执行。
  • opt : Object
    (可选)如果 ename 参数是一个事件名称， 此参数是 addListener 配置项。
返回值:
  • void
Component
mun ( Observable|Element item , Object|String ename , Function fn , Object scope ) : void
删除通过mon 方法添加的监听器。
删除通过mon 方法添加的监听器。
参数:
  • item : Observable|Element
    需要删除listener/listeners的项目。
  • ename : Object|String
    事件名称，或者一个包含事件名称属性的对象。
  • fn : Function
    (可选)如果 ename 参数是一个事件名称，此参数是一个处理函数。
  • scope : Object
    (可选)如果 ename 参数是一个事件名称，此参数是作用域 ( this 引用)，监听函数将会在此作用域中被执行。
返回值:
  • void
Component
nextSibling () : Ext.Component
返回所属容器中的下一个组件
返回所属容器中的下一个组件
参数:
  • 无。
返回值:
  • Ext.Component
Component
on( String eventName, Function handler, [Object scope], [Object options] ) : void
给对象添加事件处理器 (addListener的简写形式)
给对象添加事件处理器 (addListener的简写形式。)
参数:
  • eventName : String
    监听的事件类型
  • handler : Function
    事件调用的方法
  • scope : Object
    （可选）处理方法执行时的作用域 (this 的引用)。 如果被忽略。默认为触发事件的对象。
  • options : Object
    可选 包含处理器配置的对象。
返回值:
  • void
Observable
previousSibling () : Ext.Component
返回所属容器中的前一个组件
返回所属容器中的前一个组件
参数:
  • 无。
返回值:
  • Ext.Component
Component
purgeListeners() : void
移除对象上所有的监听器
移除对象上所有的监听器
参数:
  • 无。
返回值:
  • void
Observable
relayEvents( Object o, Array events ) : void
从指定的Observable上传递选择的事件就好像被当前对象触发一样。
从指定的Observable上传递选择的事件就好像被当前对象触发一样。
参数:
  • o : Object
    该Observable上的事件被当前对象传递。
  • events : Array
    传递的数组名。
返回值:
  • void
Observable
removeClass ( string cls ) : Ext.Component
从组件底层的元素上删除一个CSS类。
从组件底层的元素上删除一个CSS类。
参数:
  • cls : string
    需要移除的CSS类名
返回值:
  • Ext.Component
    this
Component
removeListener( String eventName, Function handler, [Object scope] ) : void
删除一个事件处理器。
删除一个事件处理器。
参数:
  • eventName : String
    处理器关联的事件类型。
  • handler : Function
    移除的处理器。 这应该是传递到addListener里的方法的引用。
  • scope : Object
    （可选）处理器指定的初始作用域。
返回值:
  • void
Observable
render ( [ Element/HTMLElement/String container ], [ String/Number position ] ) : void
在传递进来的HTML元素中渲染当前组件。...

在传递进来的HTML元素中渲染当前组件。

如果你正在使用一个Container 对象放置当前组件，那么请不要使用render方法。

当容器第一次被渲染时，它的子组件将会被容器的 layout 管理器渲染。

某些布局管理器允许动态添加子组件。它们包括 Ext.layout.CardLayout, Ext.layout.AnchorLayout, Ext.layout.FormLayout, Ext.layout.TableLayout。

当一个新的子组件被添加时，如果容器已经被渲染了， 你可能需要调用容器的 doLayout 方法来刷新视图，它将导致所有没有被渲染的子组件进行渲染操作。 此操作是必须的，这样你可以添加多个子组件而只刷新一次layout。

当创建复杂的UI时，非常重要的一点是，请记住调整子项目的尺寸和位置是容器的 layout 管理器的职责。 如果你希望子项目的尺寸对用户交互作出反应， 你必须为容器配置一个布局管理器，它将创建和管理你心里想要的那种布局。

忽略容器的layout 配置意味着将会使用一个基本的布局管理器，它除了按次序把子组件 渲染到容器中之外什么事情都不做。 这种情况下，任何尺寸和位置的调整操作都不会发生。

参数:
  • container : Element/HTMLElement/String
    (可选) 需要在其中渲染当前组件的元素。 如果它是从一个已存在的标签中创建的，此参数应该被忽略。
  • position : String/Number
    (可选) 容器中的一个元素ID或者一个DOM节点索引， 当前组件将会被插入到它前面 (默认append到容器的尾部)
返回值:
  • void
Component
resumeEvents() : void
重新开始触发事件。(参见suspendEvents) 如果事件以queueSuspended参数被挂起，则在事件被挂起时 ...
重新开始触发事件。(参见 suspendEvents) 如果事件以queueSuspended 参数被挂起，则在事件被挂起时触发的事件会被传递到所有的监听器上
参数:
  • 无。
返回值:
  • void
Observable
setDisabled ( Boolean disabled ) : Ext.Component
工具函数，使用布尔值设置有效/无效(disabled/enabled )。
工具函数，使用布尔值设置有效/无效(disabled/enabled )。
参数:
  • disabled : Boolean
返回值:
  • Ext.Component
    this
Component
setVisible ( Boolean visible ) : Ext.Component
工具方法，通过使用布尔值隐藏或者显示当前组件。
工具方法，通过使用布尔值隐藏或者显示当前组件。
参数:
  • visible : Boolean
    true时显示，false时隐藏
返回值:
  • Ext.Component
    this
Component
show () : Ext.Component
显示当前组件。监听' beforeshow' 事件，返回 false 取消显示组件...
显示当前组件。监听' beforeshow' 事件，返回 false 取消显示组件。在显示组件之后触发' show' 事件。
参数:
  • 无。
返回值:
  • Ext.Component
    this
Component
suspendEvents( Boolean queueSuspended ) : void
暂停触发所有的事件。 (参看resumeEvents)
暂停触发所有的事件。（参看 resumeEvents)
参数:
  • queueSuspended : Boolean
    如果传递为true则排列好暂停的事件使得在调用 resumeEvents 后再触发它们，而不是抛弃所有暂停的事件。
返回值:
  • void
Observable
un( String eventName, Function handler, [Object scope] ) : void
删除一个事件处理器(removeListener方法的简写形式)
删除一个事件处理器(removeListener方法的简写形式。)
参数:
  • eventName : String
    处理器关联的事件类型
  • handler : Function
    被删除的处理器 这应该是传入 addListener 中的方法的引用。
  • scope : Object
    （可选）为处理器指定的初始作用域。
返回值:
  • void
Observable
update ( Mixed htmlOrData , [ Boolean loadScripts ], [ Function callback ] ) : void
刷新组件的内部区域。
刷新组件的内部区域。
参数:
  • htmlOrData : Mixed
    如果已经通过tpl为当前组件配置了一个模板，那么 将会使用此参数来装配模板。 如果没有为当前组件配置模板，组件的内容区域将会通过Ext.Element 进行刷新。
  • loadScripts : Boolean
    (可选)只用在使用html配置时此参数才合法。默认为false。
  • callback : Function
    (可选)只用在使用html配置时此参数才合法。 当脚本加载完成时回调函数才被执行。
返回值:
  • void
Component

公共事件

Event Defined By
added : ( Ext.Component this , Ext.Container ownerCt , number index )
当一个组件被添加到一个Ext.Container时触发
当一个组件被添加到一个Ext.Container时触发
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • ownerCt : Ext.Container
    用于组件的容器
  • index : number
    添加组件的位置
Component
afterrender : ( Ext.Component this )
在组件渲染完成之后触发...

在组件渲染完成之后触发。

afterrender事件在当前组件被rendered 结束之后、在为组件定义的所有afterRender方法执行之后 触发，并且，如果有stateful， 也在状态被保存之后才触发。

监听器将会以如下参数格式被调用:
  • this : Ext.Component
Component
beforedestroy : ( Ext.Component this )
在组件 destroyed 之前触发。 在事件监听器中返回false以停止 destroy 操作。
在组件 destroyed 之前触发。 在事件监听器中返回false以停止 destroy 操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforehide : ( Ext.Component this )
在调用hide方法隐藏组件之前触发。 在事件监听器中返回false可以停止隐藏操作。
在调用hide方法隐藏组件之前触发。 在事件监听器中返回false可以停止隐藏操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforerender : ( Ext.Component this )
在组件被rendered 之前触发。 在事件监听器中返回false可以停止render 操作。
在组件被rendered 之前触发。 在事件监听器中返回false可以停止render 操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforeshow : ( Ext.Component this )
在调用show()方法现实组件之前触发。 事件处理函数返回false可以停止show。
在调用show 方法现实组件之前触发。 事件处理函数返回false可以停止show。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforestaterestore : ( Ext.Component this , Object state )
在组件状态恢复之前触发。返回false停止恢复状态操作。
在组件状态恢复之前触发。返回false停止恢复状态操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    StateProvider返回的状态哈希值。 如果没有禁止此事件，那么状态对象会被传递给applyState。 默认情况下，这样简单地把属性值拷贝到当前组件中。 可以覆盖此方法以提供自定的状态恢复操作。
Component
beforestatesave : ( Ext.Component this , Object state )
在组件状态被保存到配置的状态提供者之前触发。 返回false可以停止保存。
在组件状态被保存到配置的状态提供者之前触发。 返回false可以停止保存。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    状态值哈希。 这由在组件上调用getState() 方法决定。 此方法必须由开发者提供，返回是否需要对状态进行描述，默认情况下， Ext.Component有一个空实现。
Component
destroy : ( Ext.Component this )
在组件被销毁之后触发。
在组件被destroyed之后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
disable : ( Ext.Component this )
在组件被设置为无效状态后触发。
在组件被设置为无效状态后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
enable : ( Ext.Component this )
当组件被设置为有效(enabled)之后触发。
当组件被设置为有效(enabled)之后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
hide : ( Ext.Component this )
在组件被隐藏之后触发。 当调用hide 方法隐藏组件之后触发。
在组件被隐藏之后触发。 当调用hide 方法隐藏组件之后触发。
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
removed : ( Ext.Component this , Ext.Container ownerCt )
当一个组件被从Ext.Container容器中删除时触发
当一个组件被从Ext.Container容器中删除时触发
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • ownerCt : Ext.Container
    持有组件的容器
Component
render : ( Ext.Component this )
在组件被渲染之后触发。
在组件被 rendered(渲染) 之后触发。
监听器将以如下的参数格式被调用:
  • this : Ext.Component
Component
show : ( Ext.Component this )
在调用show 方法显示组件之后触发。
在调用show 方法显示组件之后触发。
监听器将会用如下的参数格式被调用:
  • this : Ext.Component
Component
staterestore : ( Ext.Component this , Object state )
组件状态被存储之后触发。
组件状态被存储之后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    StateProvider返回的状态哈希值。 如果没有禁止此事件，那么状态对象会被传递给applyState。 默认情况下，这样简单地把属性值拷贝到当前组件中。 可以覆盖此方法以提供自定的状态恢复操作。
Component
statesave : ( Ext.Component this , Object state )
在组件状态被保存到所配置的状态提供者之后触发。
在组件状态被保存到所配置的状态提供者之后触发。
监听器将会用如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    状态值hash。 这是由在足见上调用getState() 方法决定的。 开发者必须提供此方法以返回是否需要恢复状态，默认情况下， Ext.Component有一个空实现。
Component


Class Ext.ComponentMgr

包: | Ext
定义类的文件: | ComponentMgr.js
类: | ComponentMgr
继承自: | Object

提供一个页面中所有组件的一个注册表( Ext.Component 的实例，或者任何子类)，这样可以通过 component id 方便此访问它们(参见 get， 或者便利方法 Ext.getCmp).

此对象也提供了可用Componentclasses的一个注册表 ，以便于记忆的字符串为key，叫做Component的 xtype. xtype . 当创建一个完整的、包含配置项的对象时，它为一个完全使用Ext的页面 提供了一种避免实例化子组件方法。

子组件可以被简单指定为一个配置对象 ，只要指定正确的 xtype ，这样当Component需要渲染时， 可以找到正确的类型进行懒初始化。

对于所有可用的 xtypes 列表，参见 Ext.Component.

该类是一个单例，不能直接实例化。

公共属性

Property |  | Defined By
 | all : MixedCollection 内部使用的MixedCollection，缓存组件。 一个示例用法是，监听MixedCollection的事件... 内部使用的MixedCollection，缓存组件。 一个示例用法是，监听MixedCollection的事件以检测添加和删除。 只读。 | ComponentMgr
 | ptypes : Object 已经被注册到组件管理器中的ptype | ComponentMgr
 | types : Object 已经注册到组件管理器中的xtype | ComponentMgr

公共方法

Method Defined By
create ( Object config , Constructor defaultType ) : Ext.Component
从指定的配置对象创建一个新的Component， 使用配置对象的xtype...
从指定的配置对象创建一个新的Component， 使用配置对象的xtype 来决定需要实例化的类。
参数:
  • config : Object
    你想要创建的Component的配置对象
  • defaultType : Constructor
    如果配置对象没有包含 xtype ，此参数提供默认Component类型的构造函数. (如果配置项包含了 xtype ，此参数可选 ).
返回值:
  • Ext.Component
    新实例化的Component.
ComponentMgr
createPlugin ( Object config , Constructor defaultType ) : Ext.Component
根据指定的配置对象创建一个新的Plugin， 使用配置对象的ptype ...
根据指定的配置对象创建一个新的Plugin， 使用配置对象的ptype 决定需要实例化的类。
参数:
  • config : Object
    你希望创建的Plugin的配置对象
  • defaultType : Constructor
    如果 配置对象没有包含 ptype ，提供默认Plugin类型的构造函数。( 当配置项包含 ptype 时可选 ).
返回值:
  • Ext.Component
    新实例化的Plugin.
ComponentMgr
get ( String id ) : Ext.Component
根据id 返回一个组件。 附加细节参见 Ext.util.MixedCollection.get.
根据id 返回一个组件。 附加细节参见 Ext.util.MixedCollection.get.
参数:
  • id : String
    组件的id
返回值:
  • Ext.Component
    Component, 如果没有找到，返回<code>undefined</code> , 如果没有找到Class返回<code>null</code>.
ComponentMgr
isPluginRegistered ( Ext.Component ptype ) : Boolean
检测是否注册了一个Plugin类型。
检测是否注册了一个Plugin类型。
参数:
  • ptype : Ext.Component
    便于记忆的字符串，可以通过它查找Plugin类
返回值:
  • Boolean
    类型是否被注册。
ComponentMgr
isRegistered ( Ext.Component xtype ) : Boolean
检测一个组件类型是否已经被注册。
检测一个组件类型是否已经被注册。
参数:
  • xtype : Ext.Component
    一个便于记忆的字符串，可以通过它找到Component类
返回值:
  • Boolean
    类型是否已经被注册
ComponentMgr
onAvailable ( String id , Function fn , Object scope ) : void
注册一个函数，当拥有指定id的Component被添加到ComponentMgr时调用...
注册一个函数，当拥有指定id的Component被添加到ComponentMgr时调用。 此操作在实例化时发生。
参数:
  • id : String
    组件 id
  • fn : Function
    回调函数
  • scope : Object
    作用域( this 引用)回调函数在其中被执行。默认为Component.
返回值:
  • void
ComponentMgr
register ( Ext.Component c ) : void
注册一个组件。
注册一个组件。
参数:
  • c : Ext.Component
    component
返回值:
  • void
ComponentMgr
registerPlugin ( String ptype , Constructor cls ) : void
注册一个新的Plugin构造函数， 以新的Ext.Component.ptype 为key...

注册一个新的Plugin构造函数， 以新的Ext.Component.ptype 为key.

使用此方法(或者它的别名 Ext.preg) 为Ext.Components注册 新插件，这样当指定Plugins时可以使用懒初始化机制。

参数:
  • ptype : String
    便于记忆的字符串，可以通过它查找Plugin类
  • cls : Constructor
    新的Plugin类
返回值:
  • void
ComponentMgr
registerType ( String xtype , Constructor cls ) : void
注册一个新的Component构造函数，以一个新的 Ext.Component.xtype 为key. ...

注册一个新的Component构造函数，以一个新的 Ext.Component.xtype 为key.

使用此方法(或者其别名 Ext.reg) 来注册Ext.Component 的新子类，这样当指定子Component时可以使用懒初始化。参见 Ext.Container.items

参数:
  • xtype : String
    便于记忆的字符串，可以通过它查找Component类
  • cls : Constructor
    新的Component类
返回值:
  • void
ComponentMgr
unregister ( Ext.Component c ) : void
注销一个组件。
注销一个组件。
参数:
  • c : Ext.Component
    component
返回值:
  • void
ComponentMgr

公共事件

该类没有公共事件。


CompositeElementLite
    CompositeElement

Class Ext.CompositeElement

包: | Ext
定义类的文件: | CompositeElement.js
类: | CompositeElement
继承自: | CompositeElementLite

This class encapsulates a collection of DOM elements, providing methods to filter members, or to perform collective actions upon the whole set.

Although they are not listed, this class supports all of the methods of Ext.Element and Ext.Fx. The methods from these classes will be performed on all the elements in this collection.

All methods return this and can be chained.

Usage:

                var els = Ext.select("#some-el div.some-class", true);
// or select directly from an existing element
var el = Ext.get('some-el');
el.select('div.some-class', true);

els.setWidth(100); // all elements become 100 width
els.hide(true); // all elements fade out and hide
// or
els.setWidth(100).hide(true);

公共属性

Property Defined By
elements : Array
该对象包含的的一个DOM元素数组。只读。 开发人员通常不会用到...

该对象包含的的一个DOM元素数组。只读。

开发人员 通常 不会用到它, 但是开发人员在扩展此类的功能给此类添加方法时可能会用到它。

例如 给此类添加nextAll 方法， 该方法可以 添加 所有选中元素的同胞到复合对象中,这个代码将是

Ext.override(Ext.CompositeElementLite, {
    nextAll: function() {
        var els = this.elements, i, l = els.length, n, r = [], ri = -1;

//      循环此复合对象中的所有元素， 增加
//      一个所有同胞的数组，
        for (i = 0; i < l; i++) {
            for (n = els[i].nextSibling; n; n = n.nextSibling) {
                r[++ri] = n;
            }
        }

//     添加所有找到的同胞到此复合对象中
        return this.add(r);
    }
});
CompositeElementLite

公共方法

Method Defined By
( Function fn , [ Object scope ] ) : CompositeElement
Iterates each element in this composite calling the supplied function using Ext.each.
Iterates each element in this composite calling the supplied function using Ext.each.
参数:
  • fn : Function
    The function to be called with each element . If the supplied function returns false, iteration stops. This function is called with the following arguments:
    • element : Ext.Element
      The element at the current index in the composite
    • composite : Object
      This composite.
    • index : Number
      The current index within the composite
  • scope : Object
    可选 The scope ( reference) in which the specified function is executed. Defaults to the element at the current index within the composite.
返回值:
  • CompositeElement
    this
CompositeElement
add( Mixed els ) : CompositeElement
给此复合对象添加一个元素。
给此复合对象添加一个元素。
参数:
  • els : Mixed
    需要添加的DOM元素数组或者是另一个复合对象。
返回值:
  • CompositeElement
    此复合对象。
CompositeElementLite
clear() : void
移除所有元素。
移除所有元素。
参数:
  • 无。
返回值:
  • void
CompositeElementLite
contains( el {Mixed} ) : Boolean
如果该混合对象中包含有传递进来的元素则返回true
如果该混合对象中包含有传递进来的元素则返回true
参数:
  • {Mixed} : el
    一个元素的id，一个 Ext.Element，或者是复合集合中的一个 HtmlElement。
返回值:
  • Boolean
CompositeElementLite
each( Function fn, [Object scope] ) : CompositeElement
对复合对象中的每个元素调用传递进来的方法。

对复合对象中的每个元素调用传递进来的方法。

参数:
  • fn : Function
    被调用的方法。以下的参数将传递给它:
    • el : Element
      迭代中的当前元素。 此元素是采用flyweight (享元模式)的 Ext.Element的实例，所以如果你需要一个DOM节点的引用，请使用el.dom。
    • c : Composite
      该复合对象。
    • idx : Number
      以0开头的迭代中的索引值。
  • scope : Object
    （可选 ）方法执行的环境 (this的引用)。 (默认值是该元素)
返回值:
  • CompositeElement
    this
CompositeElementLite
fill( Mixed els ) : CompositeElement
清空此复合对象然后添加传递进来的元素。
清空此复合对象然后添加传递进来的元素。
参数:
  • els : Mixed
    需要填充的一个DOM元素数组或者是另一个复合对象。
返回值:
  • CompositeElement
    this
CompositeElementLite
filter( String/Function selector ) : CompositeElement
用传递进来的选择器过滤复合对象。
用传递进来的选择器过滤复合对象。
参数:
  • selector : String/Function
    一个CSS样式选择器或者是一个用于比较的方法。 此方法将会用以下的参数调用:
    • el : Ext.Element
      当前的DOM元素。
    • index : Number
      在此集合中的当前索引值。
返回值:
  • CompositeElement
    this
CompositeElementLite
first() : Ext.Element
返回第一个元素
返回第一个元素
参数:
  • 无。
返回值:
  • Ext.Element
CompositeElementLite
getCount() : Number
返回该复合对象中的元素总数。
返回该复合对象中的元素总数。
参数:
  • 无。
返回值:
  • Number
CompositeElementLite
indexOf( el {Mixed} ) : Number
在此复合对象中查找传递进来的元素的索引值。
在此复合对象中查找传递进来的元素的索引值。
参数:
  • {Mixed} : el
    一个元素的id，一个Ext.Element，或者是在此复合集合里的一个的 HtmlElement。
返回值:
  • Number
    传递进来的 Ext.Element 在此复合集合里的索引值，在没有找到相应元素时为 -1。
CompositeElementLite
item( Number index ) : Ext.Element
返回一个DOM元素对象中采用了flyweight（享元模式）的指定索引元素
返回一个DOM元素对象中采用了flyweight（享元模式）的指定索引元素
参数:
  • index : Number
返回值:
  • Ext.Element
CompositeElementLite
last() : Ext.Element
返回最后一个元素
返回最后一个元素
参数:
  • 无。
返回值:
  • Ext.Element
CompositeElementLite
removeElement( Mixed el, [Boolean removeDom] ) : CompositeElement
移除所有的指定元素（一个或多个）。
移除所有的指定元素（一个或多个）。
参数:
  • el : Mixed
    一个元素的id，一个 Element本身，复合对象中的一个元素的索引值，或着是以上这些的数组。
  • removeDom : Boolean
    (可选)表示同时删除document中的元素
返回值:
  • CompositeElement
    this
CompositeElementLite
replaceElement( Mixed el, Mixed replacement, [Boolean domReplace] ) : CompositeElement
用传递进来的元素替换指定元素。
用传递进来的元素替换指定元素。
参数:
  • el : Mixed
    一个元素的id，该元素本身，或这是需要被替换的元素在复合集合中的索引值。T
  • replacement : Mixed
    一个元素的id或该元素本身。
  • domReplace : Boolean
    (可选) 如果该值为真则同时会在Document中删除和替换此元素。
返回值:
  • CompositeElement
    this
CompositeElementLite

公共事件

该类没有公共事件。


Class Ext.CompositeElementLite

包: | Ext
定义类的文件: | CompositeElementLite.js
类: | CompositeElementLite
子类: | CompositeElement
继承自: | Object

此类包含一个DOM元素的collection，并为过滤成员或集合全体set上的Action提供方法。

尽管它们没有被排序，但该类还支持Ext.Element 和 Ext.Fx上的所有方法。这些方法将在collection中的所有元素上使用。

例子:
var els = Ext.select("#some-el div.some-class");
//或者直接在已存的元素中选取
var el = Ext.get('some-el');
el.select('div.some-class');

els.setWidth(100); // 设置所有的元素为100的宽
els.hide(true); // 所有的元素淡出隐藏
// or
els.setWidth(100).hide(true);

公共属性

Property Defined By
elements : Array
该对象包含的的一个DOM元素数组。只读。 开发人员通常不会用到...

该对象包含的的一个DOM元素数组。只读。

开发人员 通常 不会用到它, 但是开发人员在扩展此类的功能给此类添加方法时可能会用到它。

例如 给此类添加nextAll 方法， 该方法可以 添加 所有选中元素的同胞到复合对象中,这个代码将是

Ext.override(Ext.CompositeElementLite, {
    nextAll: function() {
        var els = this.elements, i, l = els.length, n, r = [], ri = -1;

//      循环此复合对象中的所有元素， 增加
//      一个所有同胞的数组，
        for (i = 0; i < l; i++) {
            for (n = els[i].nextSibling; n; n = n.nextSibling) {
                r[++ri] = n;
            }
        }

//     添加所有找到的同胞到此复合对象中
        return this.add(r);
    }
});
CompositeElementLite

公共方法

Method Defined By
add( Mixed els ) : CompositeElement
给此复合对象添加一个元素。
给此复合对象添加一个元素。
参数:
  • els : Mixed
    需要添加的DOM元素数组或者是另一个复合对象。
返回值:
  • CompositeElement
    此复合对象。
CompositeElementLite
clear() : void
移除所有元素。
移除所有元素。
参数:
  • 无。
返回值:
  • void
CompositeElementLite
contains( el {Mixed} ) : Boolean
如果该混合对象中包含有传递进来的元素则返回true
如果该混合对象中包含有传递进来的元素则返回true
参数:
  • {Mixed} : el
    一个元素的id，一个 Ext.Element，或者是复合集合中的一个 HtmlElement。
返回值:
  • Boolean
CompositeElementLite
each( Function fn, [Object scope] ) : CompositeElement
对复合对象中的每个元素调用传递进来的方法。

对复合对象中的每个元素调用传递进来的方法。

参数:
  • fn : Function
    被调用的方法。以下的参数将传递给它:
    • el : Element
      迭代中的当前元素。 此元素是采用flyweight (享元模式)的 Ext.Element的实例，所以如果你需要一个DOM节点的引用，请使用el.dom。
    • c : Composite
      该复合对象。
    • idx : Number
      以0开头的迭代中的索引值。
  • scope : Object
    （可选 ）方法执行的环境 (this的引用)。 (默认值是该元素)
返回值:
  • CompositeElement
    this
CompositeElementLite
fill( Mixed els ) : CompositeElement
清空此复合对象然后添加传递进来的元素。
清空此复合对象然后添加传递进来的元素。
参数:
  • els : Mixed
    需要填充的一个DOM元素数组或者是另一个复合对象。
返回值:
  • CompositeElement
    this
CompositeElementLite
filter( String/Function selector ) : CompositeElement
用传递进来的选择器过滤复合对象。
用传递进来的选择器过滤复合对象。
参数:
  • selector : String/Function
    一个CSS样式选择器或者是一个用于比较的方法。 此方法将会用以下的参数调用:
    • el : Ext.Element
      当前的DOM元素。
    • index : Number
      在此集合中的当前索引值。
返回值:
  • CompositeElement
    this
CompositeElementLite
first() : Ext.Element
返回第一个元素
返回第一个元素
参数:
  • 无。
返回值:
  • Ext.Element
CompositeElementLite
getCount() : Number
返回该复合对象中的元素总数。
返回该复合对象中的元素总数。
参数:
  • 无。
返回值:
  • Number
CompositeElementLite
indexOf( el {Mixed} ) : Number
在此复合对象中查找传递进来的元素的索引值。
在此复合对象中查找传递进来的元素的索引值。
参数:
  • {Mixed} : el
    一个元素的id，一个Ext.Element，或者是在此复合集合里的一个的 HtmlElement。
返回值:
  • Number
    传递进来的 Ext.Element 在此复合集合里的索引值，在没有找到相应元素时为 -1。
CompositeElementLite
item( Number index ) : Ext.Element
返回一个DOM元素对象中采用了flyweight（享元模式）的指定索引元素
返回一个DOM元素对象中采用了flyweight（享元模式）的指定索引元素
参数:
  • index : Number
返回值:
  • Ext.Element
CompositeElementLite
last() : Ext.Element
返回最后一个元素
返回最后一个元素
参数:
  • 无。
返回值:
  • Ext.Element
CompositeElementLite
removeElement( Mixed el, [Boolean removeDom] ) : CompositeElement
移除所有的指定元素（一个或多个）。
移除所有的指定元素（一个或多个）。
参数:
  • el : Mixed
    一个元素的id，一个 Element本身，复合对象中的一个元素的索引值，或着是以上这些的数组。
  • removeDom : Boolean
    (可选)表示同时删除document中的元素
返回值:
  • CompositeElement
    this
CompositeElementLite
replaceElement( Mixed el, Mixed replacement, [Boolean domReplace] ) : CompositeElement
用传递进来的元素替换指定元素。
用传递进来的元素替换指定元素。
参数:
  • el : Mixed
    一个元素的id，该元素本身，或这是需要被替换的元素在复合集合中的索引值。T
  • replacement : Mixed
    一个元素的id或该元素本身。
  • domReplace : Boolean
    (可选) 如果该值为真则同时会在Document中删除和替换此元素。
返回值:
  • CompositeElement
    this
CompositeElementLite

公共事件

该类没有公共事件。


Observable
    Component
      BoxComponent
        Container

Class Ext.Container

包: | Ext
定义类的文件: | Container.js
类: | Container
子类: | Panel, Toolbar, Viewport, Menu
继承自: | BoxComponent

可以容纳其它组件的所有 Ext.BoxComponent 的基类。 容器处理基本的包含子项目；通过名称添加、插入和删除子项目的行为。

最常用的容器类是 Ext.Panel, Ext.Window 和 Ext.TabPanel。 如果你确实不需要上述类所提供的功能， 你可以使用 autoEl 配置项， 按照你的描述包装一个HTML元素来 创建一个轻量级的容器。 例如，当在FormPanels 创建内嵌的column 布局时，这是一个有用的技术。

以下代码明确阐述了如何创建一个容器， 以及如何使用 'container' xtype 隐含地创建一个容器:

//隐含地创建一个容器
var embeddedColumns = new Ext.Container({
    autoEl: 'div',  //这是默认值
    layout: 'column',
    defaults: {
        // 通过指定xtype隐含地创建容器
        xtype: 'container',
        autoEl: 'div', //这是默认值
        layout: 'form',
        columnWidth: 0.5,
        style: {
            padding: '10px'
        }
    },
//以下两个项目将会是Ext.Container，每个都是用一个<DIV> 元素包装成的。
    items: [{
        items: {
            xtype: 'datefield',
            name: 'startDate',
            fieldLabel: 'Start date'
        }
    }, {
        items: {
            xtype: 'datefield',
            name: 'endDate',
            fieldLabel: 'End date'
        }
    }]
});

Layout

容器类把渲染子组件的操作代理给布局管理器， 它必须使用 layout 配置参数配置到容器中。

要么指定容器的子 items ，或者动态地向一个容器中 adding ，记得考虑你希望容器如何去排列那些子元素，并且，是否需要使用一个Ext内建的 layout 方案来改变那些子元素的尺寸。 默认情况下，容器使用 ContainerLayout 方案，它只是渲染子组件，把它们一个接一个地append到容器内部，并且 根本不会对尺寸做任何调整。

一个常见的错误是，开发者忽略了去指定一个 layout (例如像GridPanels或TreePanels会被添加到一个没有指定 layout 的容器中去 )。 如果一个容器被使用默认的 ContainerLayout 方案，它的子组件将不会被调整尺寸，在容器尺寸变化时也不会反生任何改变。

一些布局管理器允许动态添加子组件。 它们包括 Ext.layout.CardLayout, Ext.layout.AnchorLayout, Ext.layout.FormLayout,和 Ext.layout.TableLayout. 例如:

// 创建GridPanel
var myNewGrid = new Ext.grid.GridPanel({
    store: myStore,
    columns: myColumnModel,
    title: 'Results', //标题会变成tab的标题
});

myTabPanel.add(myNewGrid); // Ext.TabPanel隐含使用CardLayout

myTabPanel.setActiveTab(myNewGrid);

以上的例子中向一个TabPanel中添加了一个新创建的GridPanel。 注意，一个使用 Ext.layout.CardLayout 作为布局管理器的TabPanel意味着它所有的子元素将会被调整到刚好 fit 它的客户区域。

“过度嵌套”是一个常见的问题 。 一个“过度嵌套”的例子是，当一个GridPanel被添加到 一个TabPanel时，这个GridPanel被包装在一个Panel(没有指定 layout ) 内部，然后将那个包装的Panel添加到TabPanel。 注意点是，GridPanel是一个可以直接被添加到容器中的组件。 如果包装它的Panel没有配置 layout 那么这个“过度嵌套”的GridPanel将不会像期望的那样被调整好尺寸。

通过远程配置添加组件

可以使用一个服务端脚本添加组件， 它是在服务端动态生成的。 一个向TabPanel添加一个GridPanel的例子， 这个GridPanel是由服务器根据特定的参数生成的:

// 执行一个Ajax请求去调用服务端脚本:
Ext.Ajax.request({
    url: 'gen-invoice-grid.php',
    // 发送附加参数去构造服务端脚本
    params: {
        startDate: Ext.getCmp('start-date').getValue(),
        endDate: Ext.getCmp('end-date').getValue()
    },
    // 处理请求对象将它添加到TabPanel:
    success: function(xhr) {
        var newComponent = eval(xhr.responseText); //参见下面的讨论
        myTabPanel.add(newComponent); // 把组件添加到TabPanel中
        myTabPanel.setActiveTab(newComponent);
    },
    failure: function() {
        Ext.Msg.alert("Grid create failed", "Server communication failure");
    }
});

服务端脚本需要返回一个可执行的Javascript结构， 当使用 eval() 处理之后，要么返回一个拥有xtype的配置对象，要么返回一个已经实例化的组件。 例如，服务器可能返回:

(function() {
    function formatDate(value){
        return value ? value.dateFormat('M d, Y') : '';
    };

    var store = new Ext.data.Store({
        url: 'get-invoice-data.php',
        baseParams: {
            startDate: '01/01/2008',
            endDate: '01/31/2008'
        },
        reader: new Ext.data.JsonReader({
            record: 'transaction',
            idProperty: 'id',
            totalRecords: 'total'
        }, [
           'customer',
           'invNo',
           {name: 'date', type: 'date', dateFormat: 'm/d/Y'},
           {name: 'value', type: 'float'}
        ])
    });

    var grid = new Ext.grid.GridPanel({
        title: 'Invoice Report',
        bbar: new Ext.PagingToolbar(store),
        store: store,
        columns: [
            {header: "Customer", width: 250, dataIndex: 'customer', sortable: true},
            {header: "Invoice Number", width: 120, dataIndex: 'invNo', sortable: true},
            {header: "Invoice Date", width: 100, dataIndex: 'date', renderer: formatDate, sortable: true},
            {header: "Value", width: 120, dataIndex: 'value', renderer: 'usMoney', sortable: true}
        ],
    });
    store.load();
    return grid;  // 返回实例化的组件
})();

当在Ajax请求的success处理器中， 把以上代码片段传递给 eval 函数之后， 代码就会被Javascript引擎执行， 然后匿名的函数就会运行，并且返回grid组件的实例。

注意：既然以上代码是服务端脚本 生成的， Store的 baseParams ， Record布局的元数据，以及ColumnModel 都可以生成到代码中，因为在服务器上这些都是已知的。

配置项

Config Options Defined By
activeItem : String/Number
一个string型的组件id，或者组件的数字索引， 它需要...
一个string型的组件id，或者组件的数字索引， 它需要在渲染时在容器内的布局管理器中被初始化并激活。 例如：activeItem: 'item-1' 或者 activeItem: 0 ( 索引 0 =容器子项目集合中的第一个元素)。 activeItem仅仅适用于一次显示一个组件的布局模式(比如 Ext.layout.AccordionLayout, Ext.layout.CardLayout 和 Ext.layout.FitLayout)。 与 Ext.layout.ContainerLayout.activeItem 相关。
Container
allowDomMove : Boolean
在渲染时组件是否可以移动Dom节点(默认为true)。
Component
anchor : String
注: 这个配置只用于该组件被包含在一个已使用AnchorLayout...

注: 这个配置只用于该组件被包含在一个已使用 AnchorLayout (或者其子类)配置的Container时。 基于布局管理器，例如：

  • Ext.form.FormPanel
  • 指定 layout: 'anchor' // or 'form', or 'absolute'

参见 Ext.layout.AnchorLayout. anchor 。

BoxComponent
applyTo : Mixed
指定一个元素的id、一个DOM元素或者一个已经存在并被渲染到DIV中的元素，此DIV已经被...

指定一个元素的id、一个DOM元素或者一个已经存在并被渲染到DIV中的元素，此DIV已经被 渲染到document中，并且为当前组件指定了一些结构化的标签。

  • 描述 :
      当使用了 applyTo， 在主元素中也可以用id或者CSS类名来指定组件的托管部分， 并且，如果可以的话，创建的组件可能也会试图在那个标签中创建它的子组件。
  • 注意 :
      当使用此配置项时，无需调用render()方法。
      如果指定了applyTo属性，任何传递给 renderTo 的值都会被忽略，并且目标元素的父节点将会自动被用作组件的容器。
Component
autoDestroy : Boolean
如果为true，容器将自动销毁任何从其中被删除的组件， 否则...
如果为true，容器将自动销毁任何从其中被删除的组件， 否则必须手动处理销毁操作(默认为true)。
Container
autoEl : Mixed
一个表签名或者一个 DomHelper 描述，用来创建 Element ，它将封装当前组件...

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

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

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

{
    xtype: 'box',
    autoEl: {
        tag: 'img',
        src: 'http://www.example.com/example.jpg'

    }
}, {
    xtype: 'box',
    autoEl: {
        tag: 'blockquote',
        html: 'autoEl is cool!'
    }
}, {
    xtype: 'container',
    autoEl: 'ul',
    cls: 'ux-unordered-list',
    items: {
        xtype: 'box',
        autoEl: 'li',
        html: 'First list item'
    }
}
Component
autoHeight : Boolean
如果值为true，height配置项为'auto'，否则值为false的话使用固定的高度...

如果值为true，height配置项为'auto'，否则值为false的话使用固定的高度， 或者可以由其父类容器 layout manager来控制。(默认值为 false)。

注: 虽然很多组件继承了这个配置选项，但不是所有这些组件的自适应高度配置都会像期望的那样起作用。 设置autoHeight：值为true时，浏览器将根据元素的内容自动设置高度，这将意味着Ext不会去管理高度。

如果是由浏览器来管理高度，需要注意的是，通过浏览器进行调整的结构组件内不能被发现， 因此宽度的变化可能导致需要进行同步处理元素的高度。 例如：

var w = new Ext.Window({
    title: 'Window',
    width: 600,
    autoHeight: true,
    items: {
        title: 'Collapse Me',
        height: 400,
        collapsible: true,
        border: false,
        listeners: {
            beforecollapse: function() {
                w.el.shadow.hide();
            },
            beforeexpand: function() {
                w.el.shadow.hide();
            },
            collapse: function() {
                w.syncShadow();
            },
            expand: function() {
                w.syncShadow();
            }
        }
    }
}).show();
BoxComponent
autoScroll : Boolean
如果值为true，将会在该元素上使用overflow:'auto'配置，并且在必要的时候...
如果值为true，将会在该元素上使用overflow:'auto'配置，并且在必要的时候自动显示滚动条，否则，溢出部分的组件都会被切除(默认值为 false)。
BoxComponent
autoShow : Boolean
如果组件需要检测隐藏CSS属性(如 'x-hidden' 或者 'x-hide-display')并且在渲染时删除...
如果组件需要检测隐藏CSS属性(如 'x-hidden' 或者 'x-hide-display')并且在渲染时删除它们 (默认为false)，设置此值为true。
Component
autoWidth : Boolean
如果为true，使用width:'auto'配置，否则使用固定的宽度...

如果为true，使用width:'auto'配置，否则使用固定的宽度，或者可以由其父类容器的layout manager来控制。(默认值为 false)。

注: 虽然很多组件继承了这个配置选项，但不是所有这些组件的自适应宽度配置都会像期望的那样起作用。 设置autoWidth：值为true时，浏览器将根据元素的内容自动设置宽度，这将意味着Ext不会去管理宽度。

如果是由浏览器来管理宽度，需要注意的是，通过浏览器进行调整的结构组件内不能被发现，因此宽度的变化可能导致需要进行同步处理元素的宽度。 例如，在这个元素的目标是：

<div id='grid-container' style='margin-left:25%;width:50%'></div>
当浏览器窗口改变时，渲染后的Panel必须监听浏览器窗口大小的变化，以便通知子项，浏览器改变了其宽度：

var myPanel = new Ext.Panel({
    renderTo: 'grid-container',
    monitorResize: true, // relay on browser resize
    title: 'Panel',
    height: 400,
    autoWidth: true,
    layout: 'hbox',
    layoutConfig: {
        align: 'stretch'
    },
    defaults: {
        flex: 1
    },
    items: [{
        title: 'Box 1',
    }, {
        title: 'Box 2'
    }, {
        title: 'Box 3'
    }],
});
BoxComponent
boxMaxHeight : Number
设置组件的最大高度值...

设置组件的最大高度值。

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

BoxComponent
boxMaxWidth : Number
设置组件的最大宽度值...

设置组件的最大宽度值。

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

BoxComponent
boxMinHeight : Number
设置组件的最小高度值...

设置组件的最小高度值。

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

BoxComponent
boxMinWidth : Number
设置组件的最小宽度值...

设置组件的最小宽度值。

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

BoxComponent
bubbleEvents : Array
一个事件数组，当这些事件触发时，将会冒泡到所有的父容器。 参见...

一个事件数组，当这些事件触发时，将会冒泡到所有的父容器。 参见 Ext.util.Observable.enableBubble。 默认为 [ 'add', 'remove'] 。

Container
bufferResize : Boolean/Number
当设置为true时(50毫秒)或者是一个毫秒数值， 指定给当前容器的布...
当设置为true时(50毫秒)或者是一个毫秒数值， 指定给当前容器的布局管理器将会缓存它计算出的频率，然后 对组件进行一次重新布局操作。 对于重量级的容器，或者拥有大量子组件的容器来说，这非常有用， 因为频繁进行布局是非常昂贵的。 默认为 50 .
Container
clearCls : String
应用到特殊的clearing div的CSS类， 这个clearing div直接渲染到每个form field的包装器后面...

应用到特殊的clearing div的CSS类， 这个clearing div直接渲染到每个form field的包装器后面，以提供 清除field的功能(默认为 'x-form-clear-left')。

注意: 只有在当前组件被渲染到一个使用FormLayout 布局(例如 Ext.form.FormPanel 或者指定 layout:'form')的 容器中、或者是指定了一个fieldLabel 、或者指定isFormField=true 时此配置才有效。

另请参见 Ext.layout.FormLayout. fieldTpl。

Component
cls : String
一个可选的额外CSS类，它将被添加到当前组件的元素上(默认为'')...
一个可选的额外CSS类，它将被添加到当前组件的元素上(默认为'')。 此属性对于在组件上，或者它的任何使用标准CSS规则的孩子节点上， 添加定制的样式非常有用。
Component
contentEl : String
(可选)指定一个已存在的HTML元素，或者一个已存在HTML元素的...

(可选)指定一个已存在的HTML元素，或者一个已存在HTML元素的 id ，它们将被用作当前组件的内容。

  • 描述 :
    此配置选项被用来将一个已存在的HTML元素 插入到一个新组件(在组件渲染之后它简单地移动DOM元素) 的layout元素中，使它成为该组件的内容。
  • 注意 :
    指定的HTML元素将被append到组件的layout元素中， 在所有配置的 HTML 被插入之后， 并且，这样的话，在render事件 被触发时，document中将不再包含此元素。
    指定的HTML元素将不会参与组件所有可能使用的 layout 过程(译者注：指这些HTML元素 不会参与布局操作)。 它仅是HTML而已。布局操作实在孩子 items 上进行的。
    添加 x-hidden 或者 x-hide-display CSS类，以防在内容渲染到panel时发生闪烁。
Component
ctCls : String
一个可选的外部CSS样式，添加到这个组件的容器(默认值为 '')。 这个方法对于使用标准的CSS规则...

一个可选的外部CSS样式，添加到这个组件的容器(默认值为 '')。 这个方法对于使用标准的CSS规则，为组件或它的任何一个子组件添加特定的样式非常有用。 参见 Ext.layout.ContainerLayout和 extraCls 。

注意: ctCls 默认为 ''期望如下的类，它们将指定一个默认值:

  • Box Layout : 'x-box-layout-ct'
使用一个额外的CSS类配置以上的Class，它是append到默认对象上的。例如， 对于BoxLayout (Hbox and Vbox):
                                ctCls: 'x-box-layout-ct custom-class'

Component
data : Mixed
初始化数据集，它将被应用到 tpl 上以刷新组件的内容区域。
Component
defaultType : String
当一个子项目通过一个原生的配置对象 而不是一个组件的实例指定时。...

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

默认为 'panel' ， Ext.menu.Menu 默认为 'menuitem' ， Ext.Toolbar 和 Ext.ButtonGroup 默认为 'button' 。

Container
defaults : Object|Function
此选项是在所有添加的项目上应用默认设置的手段， 这些项目要么是通过...

此选项是在所有添加的项目上应用默认设置的手段， 这些项目要么是通过 items 配置项添加的， 或者是通过 add 或者是通过 insert 方法添加的。

如果添加的项目是一个配置对象， 并且不是一个组件的实例， 那么默认参数将会被无条件地被应用。 如果添加的项目是一个组件的实例， 那么默认参数将有条件地被应用，以免覆盖项目上的现有属性你。

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

例如，如需自动在 Ext.Panel 所包含的每个项目上应用padding属性，你可以传递: defaults: {bodyStyle: 'padding:15px'} 。

用法:

defaults: {               // defaults are applied to items, not the container
    autoScroll:true
},
items: [
    {
        xtype: 'panel',   // defaults do not have precedence over
        id: 'panel1',     // options in config objects, so the defaults
        autoScroll: false // will not be applied here, panel1 will be autoScroll:false
    },
    new Ext.Panel({       // defaults do
                                     have precedence over options
        id: 'panel2',     // options in components, so the defaults
        autoScroll: false // will be applied here, panel2 will be autoScroll:true.
    })
]
Container
disabled : Boolean
当前组件处于无效状态时为true。 Read-only.
Component
disabledClass : String
当组件处于无效状态时添加到组件上的CSS类(默认为 'x-item-disabled')。
Component
fieldLabel : String
紧靠此field显示的标签文本(默认值为 '')。注意...

紧靠此field显示的标签文本(默认值为 '')。

注意:只有在当前组件被渲染到一个使用FormLayout 的容器中时，此配置才有效。 (例如 Ext.form.FormPanel 或 指定 layout:'form')。

另请参见 hideLabel 、 Ext.layout.FormLayout和 fieldTpl。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Name'
    }]
});
Component
flex : Number
注: 这个配置只用于该组件被包含在一个已使用BoxLayout配置的Container中时...

注: 这个配置只用于该组件被包含在一个已使用BoxLayout配置的Container中时。通过计算每一个子组件的flex值所占全部flex值之和的比例，来决定子组件的宽(HBoxLayout)高(VBoxlayout)。 任何子项的 flex = 0 或 flex = undefined 将不被设置(初始值大小将不被改变)。

BoxComponent
forceLayout : Boolean
如果此值为true，容器将将强制初始化一次布局操作...
如果此值为true，容器将将强制初始化一次布局操作， 即使容器处于隐藏或者折叠状态。 此配置项对于在一个折叠或者隐藏的容器中强制渲染非常有用 (默认为false)。
Container
height : Number
组件的高度(默认值为 auto)。注:如果想使用百分比的方式...
组件的高度(默认值为 auto)。注:如果想使用百分比的方式来设置值，请查看 Ext.Component.anchor。
BoxComponent
hidden : Boolean
如果当前组件处于隐藏状态，此值为true。Read-only。
Component
hideBorders : Boolean
设置为true可以隐藏所包含的每个组件的边框， false为遵照组件现有的边框设置...
设置为true可以隐藏所包含的每个组件的边框， false为遵照组件现有的边框设置(默认为 false)。
Container
hideLabel : Boolean
true时完全隐藏label元素 ( label 和 separator)。 默认为 false。 默认情况下，即使你不指定...

true时完全隐藏label元素 ( label 和 separator)。 默认为 false。 默认情况下，即使你不指定 fieldLabel 它的空间仍然会被保留，这样这块区域会与其它确实拥有label的区域位于同一排。 讲此值设置为 true 将导致此区域不再保留此空间。

注意: 参见 clearCls 的注释。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield'
        hideLabel: true
    }]
});
Component
hideMode : String
组件如何隐藏，支持的值有： 'visibility' (css visibility), 'offsets' (位置偏移量为负值) 和...

组件如何隐藏，支持的值有： 'visibility' (css visibility), 'offsets' (位置偏移量为负值) 和 'display' (css display).

注意:一般首选默认值 'display'，因为当组件第一次显示的时候它们会自动进行布局 (隐藏的时候不会调整尺寸)。

Component
hideParent : Boolean
此值为true时，当调用hide/show方法时，将会hide和show组件的容器...
此值为true时，当调用hide/show方法时，将会hide和show组件的容器；false时将会 hide和show组件自身(默认为false)。例如，这可以用作window上隐藏按钮的一种 快捷操作，通过设置此按钮的hideParent:true，然后把它添加到window上。
Component
html : String/Object
一个HTML片段，或者一个 DomHelper 描述，用作layout元素的内容(默认为'')。...
一个HTML片段，或者一个 DomHelper 描述，用作layout元素的内容(默认为'')。 这个HTML内容在组件渲染之后才被添加，所以在 render 出发的时候，document中尚未包含此HTML。 但是这个内容将会在所有配置的 contentEl 之前被插入到body标签中。
Component
id : String
当前组件唯一的id(默认为auto-assigned id)...

当前组件唯一的id(默认为auto-assigned id)。 如果你需要在以后访问组件，而又没有一个有效的组件对象引用，那么你需要指定一个 id( 也就是，使用Ext. getCmp方法 )。

注意，此id也将被用作组件底层HTML标签的id，这些标签被渲染到页面中。 这将允许你编写基于id的CSS规则，以独立地描述指定的实例；并且，也可以通过 组件父标签的id选中子元素。

注意:为了避免与唯一的id 产生重复， 请参见 itemId 和 ref 。

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

Component
itemCls : String
注意: 只有在当前组件被渲染到一个使用FormLayout 布局的 容器中时此配置才有效...

注意: 只有在当前组件被渲染到一个使用FormLayout 布局的 容器中时此配置才有效。 (例如Ext.form.FormPanel 或者指定 layout:'form')。

一个附加的CSS类，应用到div上，包装当前field的表单元素。 如果提供了此参数， field级上的itemCls将会覆盖 container级上提供的 默认itemCls。 为itemCls指定的值将会被添加默认的 类('x-form-item')。

既然它被应用到项目的包装器上(参见 Ext.layout.FormLayout。 fieldTpl)， 它将允许你编写能应用到此field、label(如果有指定)、或者field内部任何其它元素的标准CSS规则。

注意: 参考 fieldLabel的注释。 .

示例用法:

// Apply a style to the field's label:
<style>
    .required .x-form-item-label {font-weight:bold;color:red;}
</style>

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Name',
        itemCls: 'required' //this label will be styled
    },{
        xtype: 'textfield',
        fieldLabel: 'Favorite Color'
    }]
});
Component
itemId : String
当没有可利用的对象引用时，itemId可以作为第二选择，用来获得一个组件的引用， 代替 ...

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

var c = new Ext.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'); // 与 Ext.getCmp()不同

p2 = p1.ownerCt.getComponent('p2'); // 通过兄弟对象获得引用

另请参见 id 和 ref 。

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

Component
items : MixedCollection
当前容器中的子组件集合 Ext.util.MixedCollection
Container
labelSeparator : String
每个fieldLabel 文本后面现实的分隔符。 此属性可以在多个层次上进行配置...

每个fieldLabel 文本后面现实的分隔符。 此属性可以在多个层次上进行配置。优先顺序为：

  • field / component level
  • container level
  • layout level (默认为冒号 ':')
如不需要为当前field的label显示分隔符，指定一个空字符串''即可。

注意:参见 clearCls 的注释。

另请参见 hideLabel 和 Ext.layout.FormLayout。 fieldTpl。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    layoutConfig: {
        labelSeparator: '~'   // layout config has lowest priority (defaults to ':')
    },
    labelSeparator: '>>',     // config at container level
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Field 1',
        labelSeparator: '...' // field/component level config supersedes others
    },{
        xtype: 'textfield',
        fieldLabel: 'Field 2' // labelSeparator will be '='

    }]
});
Component
labelStyle : String
一个CSS样式描述字符串，它将直接应用到当前field的label上...

一个CSS样式描述字符串，它将直接应用到当前field的label上。 如果有设置，默认为容器的labelStyle值(例如 Ext.layout.FormLayout.labelStyle , 或者 '')。

注意:参见 clearCls 的注释。

另请参见 hideLabel 和 Ext.layout.FormLayout. fieldTpl。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Name',
        labelStyle: 'font-weight:bold;'
    }]
});
Component
layout : String/Object
*重要: 为了让子项目能被正确地调整尺寸和位置， 典型地，必须通过 layout 配置项指定一个布局管理器。...

*重要: 为了让子项目能被正确地调整尺寸和位置， 典型地，必须通过 layout 配置项指定一个布局管理器。

调整子items的尺寸和位置 是容器的布局管理器的职责，它负责创建和管理你想要的那种布局类型。 例如:

new Ext.Window({
    width:300, height: 300,
    layout: 'fit', // explicitly set layout manager: override the default (layout:'auto')
    items: [{
        title: 'Panel inside a Window'
    }]
}).show();

如果没有为一个通用的容器(例如Container或者Panel)特别指定 layout ，将会使用default layout manager ，它除了将子组件按顺序渲染到容器中之外什么事情都不做( 这种情况下不会发生调整尺寸和位置的操作)。 一些容器类内部指定了一个默认的布局 (例如FormPanel指定了 layout: 'form' )。 另一些有特殊用途的类内部指定/管理它们内置的布局( 例如GridPanel, TabPanel, TreePanel, Toolbar, Menu等等)。

layout 既可以通过一个对象或者一个字符串指定:

  • 用一个对象指定
    • 示例用法:
      • layout: {
    type: 'vbox',
    padding: '5',
    align: 'left'
}
    • type

      • 当前容器需要使用的布局类型。 如果不指定，将创建并使用一个默认的 Ext.layout.ContainerLayout 。

      可用的布局 type 值是:

      • absolute
      • accordion
      • anchor
      • auto Default
      • border
      • card
      • column
      • fit
      • form
      • hbox
      • menu
      • table
      • toolbar
      • vbox
    • 布局描述配置参数

      • 也可以指定附加的布局描述配置。 关于每个布局类型可用配置选项完整的细节，参见 type 参数指定的相关布局类。

  • 通过一个字符串指定
    • 示例用法:
      • layout: 'vbox',
layoutConfig: {
    padding: '5',
    align: 'left'
}
    • layout

      • 当前容器使用的布局 type ( 可用的布局类型值参见上述列表)。

    • layoutConfig

      • 附件的布局描述配置参数。 关于每个布局类型可用配置选项完整的细节，参见 layout 参数指定的相关布局类。

Container
layoutConfig : Object
这是一个配置对象，包含为 layout 指定的参数， 如果 layout 是作为一个 string 来指定的。

Container
listeners : Object
一个包含一个或多个事件处理器的配置对象，会在初始化的时候被添加到目标对象上...

一个包含一个或多个事件处理器的配置对象，会在初始化的时候被添加到目标对象上。 该配置对象应该是一个有效的监听器配置对象就像 addListener例子中指定的一样可一次附加多个处理器。

ExtJs Components上的DOM事件

一些 ExtJs Component 类导出时会选择一些DOM事件(例如 "click", "mouseover" 等等), 这通常只是在有额外的值可以被添加时发生。例如DataView类的 click事件会传递被点击的节点。也可以直接在Component的HTMLElementevent上访问DOM事件，但必需在Component被渲染后监听器才能添加到Element 上。可以按照以下步骤添加插件:

// 插件会用一个监听器配置对象进行配置。
//该组件会被添加到所有处理方法的参数列表上。
Ext.DomObserver = Ext.extend(Object, {
    constructor: function(config) {
        this.listeners = config.listeners ? config.listeners : config;
    },

    // 组件将自己传递进了插件的初始化方法里
    init: function(c) {
        var p, l = this.listeners;
        for (p in l) {
            if (Ext.isFunction(l[p])) {
                l[p] = this.createHandler(l[p], c);
            } else {
                l[p].fn = this.createHandler(l[p].fn, c);
            }
        }

        // 渲染后立即添加监听器到元素上
        c.render = c.render.createSequence(function() {
            var e = c.getEl();
            if (e) {
                e.on(l);
            }
        });
    },

    createHandler: function(fn, c) {
        return function(e) {
            fn.call(this, e, c);
        };
    }
});

var combo = new Ext.form.ComboBox({

    // 元素被点击后折叠
    plugins: [ new Ext.DomObserver({
        click: function(evt, comp) {
            comp.collapse();
        }
    })],
    store: myStore,
    typeAhead: true,
    mode: 'local',
    triggerAction: 'all'
});

Observable
margins : Object
注:此配置只用于该组件展现在一个使用BorderLayout...

注:此配置只用于该组件展现在一个使用BorderLayout 或 BoxLayout的两个子类之一作为布局的容器。

这个margins对象在该组件中的格式为：

{top: (top margin),right: (right margin),bottom: (bottom margin),left: (left margin)}

也可以是一个字符串，中间用空格分隔，margin值为数字。 把matches中每一个值的次序跟CSS中margin值的排列方式相对应：

  • 如果只有一个值，它适用于所有方面。
  • 如果有两个值，top和bottom的边框设置为第一个值，left和right设置为第二个值。
  • 如果有三个值，top设置为第一个值，left和right设置为第二个值，bottom设置为第三个值。
  • 如果有四个值，分别设置为top, right, bottom, left。

默认值:

{top:0, right:0, bottom:0, left:0}
BoxComponent
monitorResize : Boolean
设置为true自动监测window的resize事件，以便处理所有对当前窗口尺寸 敏感的事情。...
设置为true自动监测window的resize事件，以便处理所有对当前窗口尺寸 敏感的事情。 典型地，通过选择一个 layout 来管理这个值，并且不应该手动设置它。
Container
overCls : String
一个可选的额外的CSS类，它将在鼠标移过元素时被添加到组件上...
一个可选的额外的CSS类，它将在鼠标移过元素时被添加到组件上，鼠标移出时 删除。(默认为'')。此属性对于在组件上，或者它的任何使用标准CSS规则的孩子节点上， 添加定制的'active' 或者 'hover'样式非常有用。
Component
pageX : Number
如果该组件被包含在一个指定位置的容器中，这个值表示页面级的x坐标值（译者注：在有滚动条的情况下这个值很有用）。
BoxComponent
pageY : Number
如果该组件被包含在一个指定位置的容器中，这个值表示页面级的y坐标值（译者注：在有滚动条的情况下这个值很有用）。
BoxComponent
plugins : Object/Array
一个对象或者一个对象数组，为组件提供特殊的功能 ...
一个对象或者一个对象数组，为组件提供特殊的功能。 对一个合法的插件唯一的要求是它含有一个init()方法， 能接收一个Ext.Component型的参数。 当组件被创建时，如果有可用的插件，组件将会调用每个插件的init方法， 并将自身的引用作为方法参数传递给它。然后，每个插件就可以调用方法或者响应组件上的事件， 就像需要的那样提供自己的功能。
Component
ptype : String
需要创建配置的ptype。 当传递一个配置对象给构造函数时...
需要创建配置的ptype。 当传递一个配置对象给构造函数时，此配置选项不会被使用。 只有在使用懒初始化的时候此配置项才会被使用， 此时Plugin不是 通过一个完整的实例组件，而是通过一个Component配置指定的。 在渲染时，将会查找ptype以决定创建何种类型的Plugin。

如果你创建自己的Plugin，你可以通过 Ext.ComponentMgr.registerPlugin 对它们进行注册，以便能利用懒初始化和渲染机制。
Component
ref : String
一个路径描述，与组件的 ownerCt 相关，它描述了把当前组件的命名引用放置到哪个父容器中去。...

一个路径描述，与组件的 ownerCt 相关，它描述了把当前组件的命名引用放置到哪个父容器中去。

祖先的坐标路径可以通过'/'字符进行分隔。 例如，将一个Toolbar Button的引用放入 拥有此Toolbar的Panel中:

var myGrid = new Ext.grid.EditorGridPanel({
    title: 'My EditorGridPanel',
    store: myStore,
    colModel: myColModel,
    tbar: [{
        text: 'Save',
        handler: saveChanges,
        disabled: true,
        ref: '../saveButton'
    }],
    listeners: {
        afteredit: function() {
//          The button reference is in the GridPanel
            myGrid.saveButton.enable();
        }
    }
});

在上面的代码中，如果 ref 是 'saveButton' ，那么引用将会被放置到Toolbar中。 ref 中的每个'/' 都会从组件的 ownerCt 向上移动一级。

另请参见 added 和 removed 事件。

Component
region : String
注: 此配置只用于该组件展现在一个布局为BorderLayout的容器中...

注: 此配置只用于该组件展现在一个布局为BorderLayout的容器中(例如指定layout:'border')。

详见Ext.layout.BorderLayout。

BoxComponent
renderTo : Mixed
该值可以是一个节点的id、一个DOM节点或者一个已存在的元素...

该值可以是一个节点的id、一个DOM节点或者一个已存在的元素， 组件将会被渲染到其中。

  • 注意 :
      如果组件不是一个Container 的子项目时， 不要使用此选项。 渲染和管理它的子项目是一个Container 的layout manager的责任。
      当使用此配置项时，无需调用render()方法。

另请参见 render 。

Component
resizeEvent : String
在布局中进行尺寸调整需要监听的事件。 默认为 'resize' 。
Container
stateEvents : Array
一个事件数组，当它们被触发时，组件需要保存自己的状态(默认值为 none)...

一个事件数组，当它们被触发时，组件需要保存自己的状态(默认值为 none)。 它们可以是任何该组件支持的事件类型，包括浏览器事件和 自定义事件(例如['click', 'customerchange'])。

对于保存和恢复组件状态的详细解释，参见 stateful

Component
stateId : String
为该组件指定的唯一的id值，它被用作管理组件状态的目的...
为该组件指定的唯一的id值，它被用作管理组件状态的目的。 (如果设定了id，默认值为组件自己的id，否则，如果组件使用自动生成的id，此值为null)。

对于保存和反解析组件状态的解释，参见 stateful 。

Component
stateful : Boolean
一个标志参数，它将引起组件在启动时尝试从一个保存的状态中恢复内部状态参数...

一个标志参数，它将引起组件在启动时尝试从一个保存的状态中恢复内部状态参数。 组件必须要么拥有一个 stateId 或者 id ，它们被分配给需要被管理的状态属性。 在跨页面加载时，不保证自动生成的id属性的稳定性， 并且，不能依赖此id来保存和恢复一个组件的相同状态。

为了保存状态的操作能够工作，状态管理器的提供者必须 被设置成一个Ext.state.Provider 的实现类，它覆盖了set 和get 方法，以便保存和恢复name/value对。 有一个内置的Ext.state.CookieProvider 可用。

为当前页面设置状态提供者:

Ext.state.Manager.setProvider(new Ext.state.CookieProvider({
    expires: new Date(new Date().getTime()+(1000*60*60*24*7)), //7 days from now
}));

当 stateEvents 配置项中其中之一的事件被触发时， 一个状态可保存的组件将试图保存其状态。

保存状态时，一个可保存状态的组件首先需要通过调用 getState 方法来序列化它的状态。 默认情况下，此函数什么事都不做。 开发者必须提供一个实现，返回一个hash对象，它描述了组件可恢复的状态。

getState方法产生的值将会传递给 Ext.state.Manager.set 方法，它使用配置的 Ext.state.Provider 来保存对象，以组件的 stateId 为key，或者，如果此值（指stateId）没有指定时， 使用它的 id 作为key。

在进行构造时，一个可保存状态的组件试图通过调用 Ext.state.Manager.get方法来 恢复它的状态，传递 stateId 或者，如果此值（指stateId）没有指定时， 使用它的 id 作为参数。

结果对象被传递给 applyState 。 applyState 的默认实现只是简单地把属性拷贝到对象中， 但是开发者可以覆盖此方法以支持更多行为。

通过向 beforestaterestore, staterestore, beforestatesave 和 statesave 事件上绑定监听器，你可以在保存和恢复状态时进行额外的处理。

Component
style : String
被添加到组件元素的特定样式。 必须是按照...
被添加到组件元素的特定样式。 必须是按照 Ext.Element.applyStyles 类指定格式的合法参数值。

new Ext.Panel({
    title: 'Some Title',
    renderTo: Ext.getBody(),
    width: 400, height: 300,
    layout: 'form',
    items: [{
        xtype: 'textarea',
        style: {
            width: '95%',
            marginBottom: '10px'
        }
    },
        new Ext.Button({
            text: 'Send',
            minWidth: '100',
            style: {
                marginBottom: '10px'
            }
        })
    ]
});
Component
tabTip : String
注: 这个配置只用于当该组件作为TabPanel的一个子项目时使用...

注: 这个配置只用于当该组件作为TabPanel的一个子项目时使用。

一个String类型的innerHTML(支持html标签)，当鼠标放在该选项上的时，显示一个tooltip。为了tips能够被渲染，Ext.QuickTips.init()必须被提前调用。
BoxComponent
tpl : Mixed
一个 Ext.Template , Ext.XTemplate 或者一个用来形成一个Ext.XTemplate的字符串数组...
一个 Ext.Template , Ext.XTemplate 或者一个用来形成一个Ext.XTemplate的字符串数组。 与 data 和 tplWriteMode 配置项协同使用。
Component
tplWriteMode : String
刷新组件的内容区域时使用的Ext.(X)Template方式。 默认为'overwrite' (参见 Ext.XTemplate.overwrite )。
刷新组件的内容区域时使用的Ext.(X)Template方式。 默认为'overwrite' (参见 Ext.XTemplate.overwrite )。
Component
width : Number
组件的宽度(默认值为 auto)。注:如果想使用百分比的方式...
组件的宽度(默认值为 auto)。注:如果想使用百分比的方式来设置值，请查看 Ext.Component.anchor。
BoxComponent
x : Number
如果被包含在一个指定位置的容器中，这个值表示x(left)坐标值。
BoxComponent
xtype : String
需要创建配置的xtype。 当传递一个配置对象给构造函数时...
需要创建配置的xtype。 当传递一个配置对象给构造函数时，此配置选项不会被使用。 只有在使用懒初始化的时候此配置项才会被使用，此时容器的子项目不是 通过一个完整的实例组件，而是通过一个Component配置指定的。 在渲染时，将会查找xtype以决定创建何种类型的子组件。

预定义的xtype列表如下： here。

如果你继承Component创建你自己的组件，你需要使用Ext.ComponentMgr.registerType 对它们进行注册，以便利用懒初始化和渲染机制。
Component
y : Number
如果被包含在一个指定位置的容器中，这个值表示y(top)坐标值。
BoxComponent

公共属性

Property Defined By
disabled : Boolean
当前组件处于无效状态时为true。 Read-only.
Component
el : Ext.Element
封装了当前组件的Ext.Element。 Read-only。通常情况下，这将是一个<DIV>元素，它由此类的...

封装了当前组件的Ext.Element。 Read-only。

通常情况下，这将是一个<DIV>元素，它由此类的 onRender方法创建，但是它可以通过使用 autoEl 配置项进行覆盖。

注意: 直到组件渲染完成此元素都将处于无效状态。

如需向当前组件的 DOM事件(而不是当前组件自己的Observable事件)添加监听器， 更多建议，参见 listeners 配置项，或者直接使用一个render监听器:

new Ext.Panel({
    title: 'The Clickable Panel',
    listeners: {
        render: function(p) {
            // Append the Panel to the click handler's argument list.
            p.getEl().on('click', handlePanelClick.createDelegate(null, [p], true));
        },
        single: true  // Remove the listener after first invocation
    }
});

另请参见 getEl

Component
hidden : Boolean
如果当前组件处于隐藏状态，此值为true。Read-only。
Component
initialConfig : Object
当前组件的初始化配置描述。 Read-only。
Component
items : MixedCollection
当前容器中的子组件集合 Ext.util.MixedCollection
Container
ownerCt : Ext.Container
组件所属的Container (默认为undefined，当前组件被添加到一个容器中时此值被自动设置)...
组件所属的Container (默认为undefined，当前组件被添加到一个容器中时此值被自动设置)。 Read-only。

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

Component
private : Object
我们只能在一块可见的区域进行布局。 布局目标*或者它的任何父元素* 为...
我们只能在一块可见的区域进行布局。 布局目标*或者它的任何父元素* 为display:none， 将意味着它没有一块可见的区域。
Container
refOwner : Ext.Container
如果当前组件是一个容器的孩子，并且是通过一个 ref 配置项被注册的，则此值为 ref 引用被插入到的祖先容器。
如果当前组件是一个容器的孩子，并且是通过一个 ref 配置项被注册的，则此值为 ref 引用被插入到的祖先容器。
Component
rendered : Boolean
如果当前组件已经被渲染了，此值为true。Read-only.
Component

公共方法

Method Defined By
add ( ...Object/Array component ) : Ext.Component/Array
向当前容器中添加 Component(s)。 描述 :在添加之前触发 beforeadd 事件...

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

描述 :

  • 在添加之前触发 beforeadd 事件
  • 将会相应地应用 容器的default config values (细节参见 defaults )。
  • 在组件添加之后触发 add 事件。

注意 :

  • 当调用 add 时如果容器已经被渲染， 你可能需要调用 doLayout 方法来刷新视图，它将导致所有尚未渲染的子组件进行渲染操作。 此操作是必须的，这样你可以 add 多个子组件而只刷新一次layout。 示例用法:

var tb = new Ext.Toolbar();
tb.render(document.body);  // toolbar is rendered
tb.add({text:'Button 1'}); // add multiple items (defaultType for Toolbar is 'button')
tb.add({text:'Button 2'});
tb.doLayout();             // refresh the layout
  • 警告: 使用BorderLayout布局的容器可能不能删除或者添加组件。 更多细节参见BorderLayout 的注释。
参数:
  • component : ...Object/Array

    需要添加的一个或多个组件，或者是一个组件数组。 更多信息参见 items 。

返回值:
  • Ext.Component/Array
    被添加的组件。
Container
addClass ( string cls ) : Ext.Component
为组件底层的元素添加CSS样式。
为组件底层的元素添加CSS样式。
参数:
  • cls : string
    需要添加的CSS样式的class名称
返回值:
  • Ext.Component
    this
Component
addEvents( Object|String o, string Optional. ) : void
添加指定的事件到事件列表上，事件会被该Observable触发。
添加指定的事件到事件列表上，事件会被该Observable触发。
参数:
  • o : Object|String
    以事件名作为属性true作为值的对象 或者当多个事件名被分开的传递时则为第一个事件名。
  • Optional. : string
    事件名被分开的传递时则为事件名。 用法:
    this.addEvents('storeloaded', 'storecleared');
返回值:
  • void
Observable
addListener( String eventName, Function handler, [Object scope], [Object options] ) : void
给对象添加事件处理器。
给对象添加事件处理器。
参数:
  • eventName : String
    监听的事件名。
  • handler : Function
    事件调用的方法
  • scope : Object
    （可选）处理方法执行的作用域 (this的引用 reference)。 如果被忽略。默认为触发事件的对象。
  • options : Object
    （可选）包含处理器配置和属性的对象。 可能包含以下的属性:
    • scope : Object
      处理方法执行的作用域(this的引用) 。 如果被忽略。默认为触发事件的对象。
    • delay : Number
      在触发事件后延迟调用处理器的毫秒数。
    • single : Boolean
      如果为True则添加一个处理器来处理下一次的事件触发（仅一次），然后移除自己。
    • buffer : Number
      使得处理器延迟指定毫秒数后预定的运行在 一个Ext.util.DelayedTask中 。 如果事件在时间内再一次被触发，原始的处理器不会被调用，但是新的处理器会预定的在他的位置上。
    • target : Observable
      如果事件在目标的Observable上触发则仅仅调用处理器， 否则 事件会从子类的Observable上冒泡

    组合选项
    使用这些选项参数,可能会组合出不同类型的监听器：

    一个延迟的，一次性的监听器。

    myDataView.on('click', this.onClick, this, {
single: true,
delay: 100
});

    一次调用附加多个处理器
    该方法同样支持传递一个包含指定的多个处理器的属性的配置对象参数。

    myGridPanel.on({
'click' : {
    fn: this.onClick,
    scope: this,
    delay: 100
},
'mouseover' : {
    fn: this.onMouseOver,
    scope: this
},
'mouseout' : {
    fn: this.onMouseOut,
    scope: this
}
});

    或者一个简写的语法：

    myGridPanel.on({
'click' : this.onClick,
'mouseover' : this.onMouseOver,
'mouseout' : this.onMouseOut,
 scope: this
});
返回值:
  • void
Observable
applyToMarkup ( String/HTMLElement el ) : void
将此组件添加到已存在的有效的HTML标签中。 使用该方法时，无需再调用render()方法。
将此组件添加到已存在的有效的HTML标签中。 使用该方法时，无需再调用render()方法。
参数:
  • el : String/HTMLElement
返回值:
  • void
Component
bubble ( Function fn , [ Object scope ], [ Array args ] ) : Ext.Container
沿着component/container继承结构进行冒泡， 在每个组件上调用指定的函数。 所调用函数的作用域...
沿着component/container继承结构进行冒泡， 在每个组件上调用指定的函数。 所调用函数的作用域( this)将会是 指定的作用域或者是当前组件。 如果在函数任何一点上返回false，即停止冒泡过程
参数:
  • fn : Function
    需要调用的函数
  • scope : Object
    (可选) 函数的作用域(默认为当前节点)
  • args : Array
    (可选) 调用函数时需要传递的参数( 默认传递当前组件)
返回值:
  • Ext.Container
    this
Container
cascade ( Function fn , [ Object scope ], [ Array args ] ) : Ext.Container
从当前组件(第一个被调用的组件)开始，沿着component/container的继承树向下回溯...
从当前组件(第一个被调用的组件)开始，沿着component/container的继承树向下回溯， 在每个组件上调用指定的方法， 调用方法时的(this)作用域为指定的scope或者为当前组件。 传递给方法的参数为传递进来args或者当前组件。 在起泡的任意一个节点上，如果function返回false，即停止在那个分支上。
参数:
  • fn : Function
    需要调用的函数
  • scope : Object
    (可选)函数的作用域(默认为当前组件)
  • args : Array
    (可选) 调用函数时传递的参数 (默认传递当前组件)
返回值:
  • Ext.Container
    this
Container
cloneConfig ( Object overrides ) : Ext.Component
默认使用原先传递给当前实例的配置值克隆当前组件。
默认使用原先传递给当前实例的配置值克隆当前组件。
参数:
  • overrides : Object
    一个新的配置项，包含需要覆盖到克隆版本的所有属性。 可以传递一个id参数给此对象，否则将自动生成一个新的id以避免发生重复。
返回值:
  • Ext.Component
    当前组件的克隆副本
Component
destroy () : void
通过如下方法销毁对象：删除所有的事件监听器、将组件的元素从DOM树中删除...
通过如下方法销毁对象：删除所有的事件监听器、将组件的元素从DOM树中删除（如果可以）、 将组件从它的 Ext.Container（如果可用）中删除、 并且将它从Ext.ComponentMgr中 注销。 销毁操作一般由框架自动完成，一般情况下不需要直接调用该方法。
参数:
  • 无。
返回值:
  • void
Component
disable () : Ext.Component
将组件置为无效状态，并出发'disable'事件。
将组件置为无效状态，并出发'disable'事件。
参数:
  • 无。
返回值:
  • Ext.Component
    this
Component
doLayout ( [ Boolean shallow ], [ Boolean force ] ) : Ext.Container
强制容器的布局进行重新计算。 在向一个已经渲染的容器中添加...
强制容器的布局进行重新计算。 在向一个已经渲染的容器中添加一个新的组件， 或者改变子组件的尺寸/位置参数之后，必须调用此函数。
参数:
  • shallow : Boolean
    (可选) 设置为true时将仅仅计算当前组件的布局， 并且让子组件在需要时自动计算布局 (默认为flase，它将递归地调用每个子容器的doLayout方法)
  • force : Boolean
    (可选) 设置为true将强制进行布局，即使项目是隐藏的也进行。
返回值:
  • Ext.Container
    this
Container
enable () : Ext.Component
将组件置为有效状态并触发'enable'事件。
将组件置为有效状态并触发'enable'事件。
参数:
  • 无。
返回值:
  • Ext.Component
    this
Component
enableBubble( String/Array events ) :void
是否现在使得事件会被该Observable触发并调用 this.getBubbleTarget()方法在拥有者的继承树...

是否现在使得事件会被该Observable触发并调用 this.getBubbleTarget()方法在拥有者的继承树中冒泡。Observable的基础类中没有该方法的实现。

该方法一般被Ext.Components用来冒泡事件到拥有者的容器。参看Ext.Component.getBubbleTarget默认的实现 在Ext.Component中返回组件的直接拥有者。但是如果需要的是一个已知的目标，该方法可以被重写来更快的访问需求的目标。

例子:

Ext.override(Ext.form.Field, {
    // 添加方法到Field的initComponent上改变事件为冒泡
    initComponent : Ext.form.Field.prototype.initComponent.createSequence(function() {
        this.enableBubble('change');
    }),

    // 我们知道我们想让Field的事件冒泡到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() {
            // 如果样式被修改标题会变红。
            myForm.header.setStyle('color', 'red');
        }
    }
});
参数:
  • events : String/Array
    冒泡的事件名，或事件名数组
返回值:
  • void
Observable
find ( String prop , String value ) : Array
根据属性查找当前容器中任何层次上的组件
根据属性查找当前容器中任何层次上的组件
参数:
  • prop : String
  • value : String
返回值:
  • Array
    Ext.Component数组
Container
findBy ( Function fn , [ Object scope ] ) : Array
根据一个自定义的函数，查找当前容器中任意层级上的一个组件。 如果传递的函数返回true...
根据一个自定义的函数，查找当前容器中任意层级上的一个组件。 如果传递的函数返回true，组件将会被包含在结果中。 函数将会被用如下参数(component, this container)进行调用。
参数:
  • fn : Function
    需要调用的函数
  • scope : Object
    可选
返回值:
  • Array
    Ext.Component数组
Container
findById ( String id ) : Ext.Component
通过id查找容器中位于任何层级上的组件
通过id查找容器中位于任何层级上的组件
参数:
  • id : String
返回值:
  • Ext.Component
Container
findByType ( String/Class xtype , [ Boolean shallow ] ) : Array
根据xtype或者类型，查找当前容器中任何层级上的组件
根据xtype或者类型，查找当前容器中任何层级上的组件
参数:
  • xtype : String/Class
    组件的xtype字符串，或者直接是组件的class类型
  • shallow : Boolean
    (可选) 此参数为flase时将检查当前组件是否是指定xtype的后裔 (这是默认情况)，或者设置为true， 将检查当前组件是否直接是指定xtype类型（译者注：即指不按照多态性进行检查）。
返回值:
  • Array
    Ext.Component数组
Container
findParentBy ( Function fn ) : Ext.Container
通过自定义的函数查找当前组件上层任何层次上的容器...
通过自定义的函数查找当前组件上层任何层次上的容器。 如果传递的函数返回true，容器对象将被返回。
参数:
  • fn : Function
    自定义的函数，使用如下参数调用(container,this component)。
返回值:
  • Ext.Container
    自定义函数返回true的第一个容器
Component
findParentByType ( String/Class xtype ) : Ext.Container
通过xtype或者class查找当前组件上层任何层次上的容器
通过xtype或者class查找当前组件上层任何层次上的容器
参数:
  • xtype : String/Class
    组件的xtype字符串，或者直接是组件的class
返回值:
  • Ext.Container
    符合指定xtype或者class的第一个容器
Component
fireEvent( String eventName, Object... args ) : Boolean
用传入的参数触发指定的事件 (减去事件名)。 一个事件可以被设置为冒泡 Obse...

用传入的参数触发指定的事件 (减去事件名)。

一个事件可以被设置为冒泡到Observable父类继承树(参看 Ext.Component.getBubbleTarget) 调用enableBubble实现。

参数:
  • eventName : String
    触发的事件名。
  • args : Object...
    传递给处理器的可变长度参数。
返回值:
  • Boolean
    如果有任何的处理器返回false则返回false，否则返回true。
Observable
focus ( [ Boolean selectText ], [ Boolean/Number delay ] ) : Ext.Component
尝试将当前组件设为焦点。
尝试将当前组件设为焦点。
参数:
  • selectText : Boolean
    (可选) 如果可用，同时选中组件内部的文本
  • delay : Boolean/Number
    (可选)将当前组件设置为焦点的延迟时间(设置为true等于0毫秒)
返回值:
  • Ext.Component
    this
Component
get ( String/Number key ) : Ext.Component
获取当前容器包含的一个组件( items.get(key)方法的别名)
获取当前容器包含的一个组件( items.get(key)方法的别名)
参数:
  • key : String/Number
    组件的索引
返回值:
  • Ext.Component
    Ext.Component
Container
getBox ( [ Boolean local ] ) : Object
获取组件底层元素当前盒子模型的尺寸。（译者注：盒子模型是CSS术语，详细解释请自行搜索。）
获取组件底层元素当前盒子模型的尺寸。（译者注：盒子模型是CSS术语，详细解释请自行搜索。）
参数:
  • local : Boolean
    (可选)值为true时，组件的left值和top值将代替页面的XY被返回。(默认值为false)
返回值:
  • Object
    返回值的格式{x, y, width, height}
BoxComponent
getBubbleTarget () : Ext.Container
为Observable的fireEvent方法提供链接，它沿着继承结构进行冒泡操作。
为Observable的fireEvent方法提供链接，它沿着继承结构进行冒泡操作。
参数:
  • 无。
返回值:
  • Ext.Container
    拥有当前组件的容器。
Component
getComponent ( String/Number comp ) : Ext.Component
检查当前容器的 items property 并且获取当前容器的一个直接的子组件。
检查当前容器的 items property 并且获取当前容器的一个直接的子组件。
参数:
  • comp : String/Number
    参数可以是以下任何值：
    • 一个 String : 代表子组件的 itemId 或者 id
    • 一个 Number : 代表子组件在 items property 中的位置

    其它信息参见 Ext.util.MixedCollection.get。

返回值:
  • Ext.Component
    组件(如果有找到)。
Container
getEl () : Ext.Element
返回 Ext.Element ，它包装了当前组件。...

返回 Ext.Element ，它包装了当前组件。

通常情况下，这将是一个<DIV>元素，它是由该类的onRender方法创建的， 但是可以使用autoEl配置项 覆盖它。

注意: 此元素将会一直处于无效状态直到当前组件渲染完成。

如需向当前组件的 DOM事件(而不是当前组件自己的Observable事件)添加监听器， 更多建议，参见 listeners 配置项，或者直接使用一个render监听器:

new Ext.Panel({
    title: 'The Clickable Panel',
    listeners: {
        render: function(p) {
            // Append the Panel to the click handler's argument list.
            p.getEl().on('click', handlePanelClick.createDelegate(null, [p], true));
        },
        single: true  // Remove the listener after first invocation
    }
});
参数:
  • 无。
返回值:
  • Ext.Element
    包装当前组件的元素。
Component
getHeight () : Number
获取该组件的当前高度值。
获取该组件的当前高度值。
参数:
  • 无。
返回值:
  • Number
BoxComponent
getId () : String
返回当前组件的id，如果没有定义id，则自动生成并返回一个id:'ext-comp-'...
返回当前组件的 id 如果没有定义 id 则自动生成并返回一个 id

'ext-comp-' + (++Ext.Component.AUTO_ID)
参数:
  • 无。
返回值:
  • String
    id
Component
getItemId () : String
返回当前组件的 itemId 。 如果没有通过配置参数指定 itemId 那么，将会使用...
返回当前组件的 itemId 。 如果没有通过配置参数指定 itemId 那么，将会使用 getId 返回 id 。
参数:
  • 无。
返回值:
  • String
Component
getLayout () : ContainerLayout
返回容器当前使用的布局管理器。 如果容器当前没有设置布局管理器， 将会创建一个默认的...
返回容器当前使用的布局管理器。 如果容器当前没有设置布局管理器， 将会创建一个默认的 Ext.layout.ContainerLayout 并被设置为容器的布局管理器。
参数:
  • 无。
返回值:
  • ContainerLayout
    容器的布局管理器
Container
getLayoutTarget () : Ext.Element
返回当前容器中用来包含子组件的元素。提供了一个 可以返回容器的...

返回当前容器中用来包含子组件的元素。

提供了一个 可以返回容器的Element 的实现， 但是，如果容器有更复杂的结构， 可以覆盖此实现以返回 layout 在其中渲染子组件的元素。

参数:
  • 无。
返回值:
  • Ext.Element
    在其中渲染子组件的元素。
Container
getOuterSize () : Object
获取当前组件所在元素的尺寸大小，包括边缘的空白处。
获取当前组件所在元素的尺寸大小，包括边缘的空白处。
参数:
  • 无。
返回值:
  • Object
    一个包含元素大小的对象 {width: (element width + left/right margins), height: (element height + top/bottom margins)}
BoxComponent
getPosition ( [ Boolean local ] ) : Array
获取组件底层元素当前的XY位置。
获取组件底层元素当前的XY位置。
参数:
  • local : Boolean
    (可选)如果为true，将返回元素的left和top值，而不是相对于页面内的 XY。(默认值为 false)
返回值:
  • Array
    元素的XY位置值(例如：[100, 200])
BoxComponent
getResizeEl () : Ext.Element
返回该组件的最外层用来定义这些组件整体大小的Element...

返回该组件的最外层用来定义这些组件整体大小的Element对象。

通常用 getEl 方法将会返回相同的Element对象，但在有些情况下，组件可能有一些更多的封装了它的主要动态Element对象的Element对象。

例如ComboBox。它是封装在一个包含<input>元素的包装元素里(这将返回其 getEl方法和触发按钮的元素)。返回的元素为resizeEl。

参数:
  • 无。
返回值:
  • Ext.Element
    The Element which is to be resized by size managing layouts.
BoxComponent
getSize () : Object
获取组件底层元素当前的大小。
获取组件底层元素当前的大小。
参数:
  • 无。
返回值:
  • Object
    一个包含元素大小的对象{width: (element width), height: (element height)}
BoxComponent
getWidth () : Number
获取该组件的当前宽度值。
获取该组件的当前宽度值。
参数:
  • 无。
返回值:
  • Number
BoxComponent
getXType () : String
获取当前组件的xtype，它是用 Ext.ComponentMgr 注册的。 所有可用的xtype列表，参见...
获取当前组件的xtype，它是用 Ext.ComponentMgr 注册的。 所有可用的xtype列表，参见 Ext.Component 类头部。示例用法:

var t = new Ext.form.TextField();
alert(t.getXType());  // alerts 'textfield'
参数:
  • 无。
返回值:
  • String
    The xtype
Component
getXTypes () : String
返回此组件的xtype继承树，用字符'-'分隔。 所有可用的xtype值...

返回此组件的xtype继承树，用字符'-'分隔。 所有可用的xtype值，请参见Ext.Component 类的头部。

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

示例用法:

var t = new Ext.form.TextField();
alert(t.getXTypes());  // alerts 'component/box/field/textfield'
参数:
  • 无。
返回值:
  • String
    xtype层次字符串
Component
hasListener( String eventName ) : Boolean
检测对象是否包含指定事件的任何监听器
检测对象是否包含指定事件的任何监听器
参数:
  • eventName : String
    检测的事件名
返回值:
  • Boolean
    如果事件被监听则为true，否则为false
Observable
hide () : Ext.Component
隐藏当前组件。 监听 beforehide' 事件并且返回false 可以取消隐藏组件的操作。 在隐藏组件之后触发...
隐藏当前组件。 监听 beforehide' 事件并且返回false 可以取消隐藏组件的操作。 在隐藏组件之后触发 ' hide' 事件。 如果组件被配置成 hidden 那么此方法在内部被调用。
参数:
  • 无。
返回值:
  • Ext.Component
    this
Component
insert ( Number index , Ext.Component component ) : Ext.Component
在当前容器的指定索引处插入一个组件。 在插入之前触发...
在当前容器的指定索引处插入一个组件。 在插入之前触发 beforeadd 事件， 然后在组件被插入之后触发 add 事件。
参数:
  • index : Number
    组件会被插入到容器子项集合中时的索引位置
  • component : Ext.Component
    需要插入的子组件。

    Ext使用懒渲染，只有在必要的时候才会渲染插入的组件。

    如果使用懒渲染，可以传递一个组件配置对象以避免创建一个真实组件的开销， 这意味着，插入的组件不会立即被渲染。 为了利用这个“懒初始化”('lazy instantiation')， 必须把组件设置为它注册的 Ext.Component.xtype 值。

    所有可用的xtype列表，参见 Ext.Component。
返回值:
  • Ext.Component
    使用容器默认配置值插入的组件(或者配置对象)。
Container
isVisible () : Boolean
如果当前组件可见，返回true。
如果当前组件可见，返回true。
参数:
  • 无。
返回值:
  • Boolean
    如果当前组件可见，返回true，其它返回false。
Component
isXType ( String xtype , [ Boolean shallow ] ) : Boolean
Tests whether or not this Component is of a specific xtype. This can test whether this Component is descended from th...

测试此组件是否是指定的xtype。此方法既可以测试是否是指定的xtype的某个子类， 或者它是否直接是指定的xtype类(shallow=true)。

如果使用你自己的子类，必须知道组件必须注册它的xtype值。

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

示例用法:

var t = new Ext.form.TextField();
var isText = t.isXType('textfield');        // true
var isBoxSubclass = t.isXType('box');       // true, descended from BoxComponent
var isBoxInstance = t.isXType('box', true); // false, not a direct BoxComponent instance
参数:
  • xtype : String
    需要为当前组件进行检测的xtype
  • shallow : Boolean
    (可选) 如果为false，检测组件是否是xtype继承树中的某个子类（默认是这种情况）， 如果为true，只检测组件是否是指定的xtype类型。
返回值:
  • Boolean
    如果当前组件是指定xtype的子类，返回true，其它返回flase。
Component
mon ( Observable|Element item , Object|String ename , Function fn , Object scope , Object opt ) : void
向任何Observable对象(或者元素)上添加监听器，监听器将会在组件...

向任何Observable对象(或者元素)上添加监听器，监听器将会在组件销毁时被自动删除。
用法：

myGridPanel.mon(myGridPanel.getSelectionModel(), 'selectionchange', handleSelectionChange, null, {buffer: 50});

or:

myGridPanel.mon(myGridPanel.getSelectionModel(), {
    selectionchange: handleSelectionChange,
    buffer: 50
});
参数:
  • item : Observable|Element
    需要添加listener/listeners的项目。
  • ename : Object|String
    事件名，或者一个包含事件名属性的对象。
  • fn : Function
    (可选) 如果 ename 参数是一个事件名，此参数为处理函数。
  • scope : Object
    (可选)如果 ename 参数是一个事件名称，此参数是作用域 ( this 引用)，监听函数将会在此作用域中被执行。
  • opt : Object
    (可选)如果 ename 参数是一个事件名称， 此参数是 addListener 配置项。
返回值:
  • void
Component
mun ( Observable|Element item , Object|String ename , Function fn , Object scope ) : void
删除通过mon 方法添加的监听器。
删除通过mon 方法添加的监听器。
参数:
  • item : Observable|Element
    需要删除listener/listeners的项目。
  • ename : Object|String
    事件名称，或者一个包含事件名称属性的对象。
  • fn : Function
    (可选)如果 ename 参数是一个事件名称，此参数是一个处理函数。
  • scope : Object
    (可选)如果 ename 参数是一个事件名称，此参数是作用域 ( this 引用)，监听函数将会在此作用域中被执行。
返回值:
  • void
Component
nextSibling () : Ext.Component
返回所属容器中的下一个组件
返回所属容器中的下一个组件
参数:
  • 无。
返回值:
  • Ext.Component
Component
on( String eventName, Function handler, [Object scope], [Object options] ) : void
给对象添加事件处理器 (addListener的简写形式)
给对象添加事件处理器 (addListener的简写形式。)
参数:
  • eventName : String
    监听的事件类型
  • handler : Function
    事件调用的方法
  • scope : Object
    （可选）处理方法执行时的作用域 (this 的引用)。 如果被忽略。默认为触发事件的对象。
  • options : Object
    可选 包含处理器配置的对象。
返回值:
  • void
Observable
previousSibling () : Ext.Component
返回所属容器中的前一个组件
返回所属容器中的前一个组件
参数:
  • 无。
返回值:
  • Ext.Component
Component
purgeListeners() : void
移除对象上所有的监听器
移除对象上所有的监听器
参数:
  • 无。
返回值:
  • void
Observable
relayEvents( Object o, Array events ) : void
从指定的Observable上传递选择的事件就好像被当前对象触发一样。
从指定的Observable上传递选择的事件就好像被当前对象触发一样。
参数:
  • o : Object
    该Observable上的事件被当前对象传递。
  • events : Array
    传递的数组名。
返回值:
  • void
Observable
remove ( Component/String component , [ Boolean autoDestroy ] ) : Ext.Component
从当前容器中移除一个组件。 在移除之前触发 beforeremove 事件， 然后在组件被移除之后触发...
从当前容器中移除一个组件。 在移除之前触发 beforeremove 事件， 然后在组件被移除之后触发 remove 事件。
参数:
  • component : Component/String
    需要移除的组件引用或者id
  • autoDestroy : Boolean
    (可选) 设置为true将自动调用被删组件的 Ext.Component.destroy 函数。 默认为容器的 autoDestroy 配置值。
返回值:
  • Ext.Component
    被移除的组件。
Container
removeAll ( [ Boolean autoDestroy ] ) : Array
从当前容器中删除所有组件。
从当前容器中删除所有组件。
参数:
  • autoDestroy : Boolean
    (可选) 此参数为true时将自动调用 被删组件的 Ext.Component.destroy 方法。 默认为当前容器的 autoDestroy 配置值。
返回值:
  • Array
    被销毁的组件数组
Container
removeClass ( string cls ) : Ext.Component
从组件底层的元素上删除一个CSS类。
从组件底层的元素上删除一个CSS类。
参数:
  • cls : string
    需要移除的CSS类名
返回值:
  • Ext.Component
    this
Component
removeListener( String eventName, Function handler, [Object scope] ) : void
删除一个事件处理器。
删除一个事件处理器。
参数:
  • eventName : String
    处理器关联的事件类型。
  • handler : Function
    移除的处理器。 这应该是传递到addListener里的方法的引用。
  • scope : Object
    （可选）处理器指定的初始作用域。
返回值:
  • void
Observable
render ( [ Element/HTMLElement/String container ], [ String/Number position ] ) : void
在传递进来的HTML元素中渲染当前组件。...

在传递进来的HTML元素中渲染当前组件。

如果你正在使用一个Container 对象放置当前组件，那么请不要使用render方法。

当容器第一次被渲染时，它的子组件将会被容器的 layout 管理器渲染。

某些布局管理器允许动态添加子组件。它们包括 Ext.layout.CardLayout, Ext.layout.AnchorLayout, Ext.layout.FormLayout, Ext.layout.TableLayout。

当一个新的子组件被添加时，如果容器已经被渲染了， 你可能需要调用容器的 doLayout 方法来刷新视图，它将导致所有没有被渲染的子组件进行渲染操作。 此操作是必须的，这样你可以添加多个子组件而只刷新一次layout。

当创建复杂的UI时，非常重要的一点是，请记住调整子项目的尺寸和位置是容器的 layout 管理器的职责。 如果你希望子项目的尺寸对用户交互作出反应， 你必须为容器配置一个布局管理器，它将创建和管理你心里想要的那种布局。

忽略容器的layout 配置意味着将会使用一个基本的布局管理器，它除了按次序把子组件 渲染到容器中之外什么事情都不做。 这种情况下，任何尺寸和位置的调整操作都不会发生。

参数:
  • container : Element/HTMLElement/String
    (可选) 需要在其中渲染当前组件的元素。 如果它是从一个已存在的标签中创建的，此参数应该被忽略。
  • position : String/Number
    (可选) 容器中的一个元素ID或者一个DOM节点索引， 当前组件将会被插入到它前面 (默认append到容器的尾部)
返回值:
  • void
Component
resumeEvents() : void
重新开始触发事件。(参见suspendEvents) 如果事件以queueSuspended参数被挂起，则在事件被挂起时 ...
重新开始触发事件。(参见 suspendEvents) 如果事件以queueSuspended 参数被挂起，则在事件被挂起时触发的事件会被传递到所有的监听器上
参数:
  • 无。
返回值:
  • void
Observable
setAutoScroll ( Boolean scroll ) : Ext.BoxComponent
设置该组件内容溢出时是否自动显示滚动条。
设置该组件内容溢出时是否自动显示滚动条。
参数:
  • scroll : Boolean
    值为true的话组件自动显示滚动条。
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setDisabled ( Boolean disabled ) : Ext.Component
工具函数，使用布尔值设置有效/无效(disabled/enabled )。
工具函数，使用布尔值设置有效/无效(disabled/enabled )。
参数:
  • disabled : Boolean
返回值:
  • Ext.Component
    this
Component
setHeight ( Mixed height ) : Ext.BoxComponent
设置此组件的高度。该方法将触发resize事件。
设置此组件的高度。该方法将触发resize事件。
参数:
  • height : Mixed
    The new height to set.
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setPagePosition ( Number x , Number y ) : Ext.BoxComponent
设置组件在页面中的XY位置。 如果需要设置left和top值 ，请使用...
设置组件在页面中的XY位置。 如果需要设置left和top值 ，请使用setPosition方法。 该方法触发move事件。
参数:
  • x : Number
    The new x position
  • y : Number
    The new y position
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setPosition ( Number left , Number top ) : Ext.BoxComponent
设置组件的left和top值。设置组件的页面XY值，请使用setPagePosition方法。该方法触发...
设置组件的left和top值。设置组件的页面XY值，请使用setPagePosition方法。该方法触发move事件。
参数:
  • left : Number
    The new left
  • top : Number
    The new top
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setSize ( Mixed width , Mixed height ) : Ext.BoxComponent
设置BoxComponent的宽度和高度。 此方法触发resize事件...
设置BoxComponent的宽度和高度。 此方法触发resize事件。此方法可以接收单独的width或者height值作为参数， 或者你可以传递像这样的一个size对象： {width:10, height:20} 。
参数:
  • width : Mixed
    设置的新的width值。这可以是：
    • 一个Number类型指定Element新的宽度 Ext.Element.defaultUnit(默认为像素 :'px')。
    • 一个String类型用于设置width的CSS样式。
    • 一个size对象格式为 {width: widthValue, height: heightValue} 。
    • 值为 undefined 时，保留原来的width不变。
  • height : Mixed
    设置的新的height值(如果第一个参数传递了一个size对象，此参数没有必要传递)。这可以是：
    • 一个Number类型指定Element新的高度 Ext.Element.defaultUnit(默认为像素 :'px')。
    • 一个String类型用于设置height的CSS样式。也有可能不会被使用到。
    • 值为 undefined 时，保留原来的height不变。
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setVisible ( Boolean visible ) : Ext.Component
工具方法，通过使用布尔值隐藏或者显示当前组件。
工具方法，通过使用布尔值隐藏或者显示当前组件。
参数:
  • visible : Boolean
    true时显示，false时隐藏
返回值:
  • Ext.Component
    this
Component
setWidth ( Mixed width ) : Ext.BoxComponent
设置组件的宽度。 此方法触发resize事件。
设置组件的宽度。 此方法触发resize事件。
参数:
  • width : Mixed
    The new width to set.
返回值:
  • Ext.BoxComponent
    this
BoxComponent
show () : Ext.Component
显示当前组件。监听' beforeshow' 事件，返回 false 取消显示组件...
显示当前组件。监听' beforeshow' 事件，返回 false 取消显示组件。在显示组件之后触发' show' 事件。
参数:
  • 无。
返回值:
  • Ext.Component
    this
Component
suspendEvents( Boolean queueSuspended ) : void
暂停触发所有的事件。 (参看resumeEvents)
暂停触发所有的事件。（参看 resumeEvents)
参数:
  • queueSuspended : Boolean
    如果传递为true则排列好暂停的事件使得在调用 resumeEvents 后再触发它们，而不是抛弃所有暂停的事件。
返回值:
  • void
Observable
syncSize () : Ext.BoxComponent
强制组件的大小按照此组件底层元素当前的高度和宽度计算。
强制组件的大小按照此组件底层元素当前的高度和宽度计算。
参数:
  • 无。
返回值:
  • Ext.BoxComponent
    this
BoxComponent
un( String eventName, Function handler, [Object scope] ) : void
删除一个事件处理器(removeListener方法的简写形式)
删除一个事件处理器(removeListener方法的简写形式。)
参数:
  • eventName : String
    处理器关联的事件类型
  • handler : Function
    被删除的处理器 这应该是传入 addListener 中的方法的引用。
  • scope : Object
    （可选）为处理器指定的初始作用域。
返回值:
  • void
Observable
update ( Mixed htmlOrData , [ Boolean loadScripts ], [ Function callback ] ) : void
刷新组件的内部区域。
刷新组件的内部区域。
参数:
  • htmlOrData : Mixed
    如果已经通过tpl为当前组件配置了一个模板，那么 将会使用此参数来装配模板。 如果没有为当前组件配置模板，组件的内容区域将会通过Ext.Element 进行刷新。
  • loadScripts : Boolean
    (可选)只用在使用html配置时此参数才合法。默认为false。
  • callback : Function
    (可选)只用在使用html配置时此参数才合法。 当脚本加载完成时回调函数才被执行。
返回值:
  • void
Component
updateBox ( Object box ) : Ext.BoxComponent
设置此组件底层元素的盒子模型尺寸。(译者注：盒子模型是CSS术语，详细资料请自行搜索。)
设置此组件底层元素的盒子模型尺寸。(译者注：盒子模型是CSS术语，详细资料请自行搜索。)
参数:
  • box : Object
    一个格式为{x, y, width, height}的对象
返回值:
  • Ext.BoxComponent
    this
BoxComponent

公共事件

Event Defined By
add : ( Ext.Container this , Ext.Component component , Number index )
监听器将会被使用如下的参数被调用:
  • this : Ext.Container
  • component : Ext.Component
    被添加的组件
  • index : Number
    将组件添加到容器子组件集合时的位置索引
Container
added : ( Ext.Component this , Ext.Container ownerCt , number index )
当一个组件被添加到一个Ext.Container时触发
当一个组件被添加到一个Ext.Container时触发
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • ownerCt : Ext.Container
    用于组件的容器
  • index : number
    添加组件的位置
Component
afterlayout : ( Ext.Container this , ContainerLayout layout )
当容器中的组件被指定的布局管理器排列的时候触发。
当容器中的组件被指定的布局管理器排列的时候触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Container
  • layout : ContainerLayout
    为当前容器提供的ContainerLayout实现
Container
afterrender : ( Ext.Component this )
在组件渲染完成之后触发...

在组件渲染完成之后触发。

afterrender事件在当前组件被rendered 结束之后、在为组件定义的所有afterRender方法执行之后 触发，并且，如果有stateful， 也在状态被保存之后才触发。

监听器将会以如下参数格式被调用:
  • this : Ext.Component
Component
beforeadd : ( Ext.Container this , Ext.Component component , Number index )
在任何 Ext.Component 被添加或者插入到容器中之前触发。 事件处理器可以返回false取消添加操作。
在任何 Ext.Component 被添加或者插入到容器中之前触发。 事件处理器可以返回false取消添加操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Container
  • component : Ext.Component
    被添加的组件
  • index : Number
    组件被添加到容器子项目集合中时的索引位置
Container
beforedestroy : ( Ext.Component this )
在组件 destroyed 之前触发。 在事件监听器中返回false以停止 destroy 操作。
在组件 destroyed 之前触发。 在事件监听器中返回false以停止 destroy 操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforehide : ( Ext.Component this )
在调用hide方法隐藏组件之前触发。 在事件监听器中返回false可以停止隐藏操作。
在调用hide方法隐藏组件之前触发。 在事件监听器中返回false可以停止隐藏操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforeremove : ( Ext.Container this , Ext.Component component )
从容器中删除任何Ext.Component 之前触发。 处理器可以返回false取消remove操作。
从容器中删除任何Ext.Component 之前触发。 处理器可以返回false取消remove操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Container
  • component : Ext.Component
    被删除的组件
Container
beforerender : ( Ext.Component this )
在组件被rendered 之前触发。 在事件监听器中返回false可以停止render 操作。
在组件被rendered 之前触发。 在事件监听器中返回false可以停止render 操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforeshow : ( Ext.Component this )
在调用show()方法现实组件之前触发。 事件处理函数返回false可以停止show。
在调用show 方法现实组件之前触发。 事件处理函数返回false可以停止show。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforestaterestore : ( Ext.Component this , Object state )
在组件状态恢复之前触发。返回false停止恢复状态操作。
在组件状态恢复之前触发。返回false停止恢复状态操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    StateProvider返回的状态哈希值。 如果没有禁止此事件，那么状态对象会被传递给applyState。 默认情况下，这样简单地把属性值拷贝到当前组件中。 可以覆盖此方法以提供自定的状态恢复操作。
Component
beforestatesave : ( Ext.Component this , Object state )
在组件状态被保存到配置的状态提供者之前触发。 返回false可以停止保存。
在组件状态被保存到配置的状态提供者之前触发。 返回false可以停止保存。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    状态值哈希。 这由在组件上调用getState() 方法决定。 此方法必须由开发者提供，返回是否需要对状态进行描述，默认情况下， Ext.Component有一个空实现。
Component
destroy : ( Ext.Component this )
在组件被销毁之后触发。
在组件被destroyed之后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
disable : ( Ext.Component this )
在组件被设置为无效状态后触发。
在组件被设置为无效状态后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
enable : ( Ext.Component this )
当组件被设置为有效(enabled)之后触发。
当组件被设置为有效(enabled)之后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
hide : ( Ext.Component this )
在组件被隐藏之后触发。 当调用hide 方法隐藏组件之后触发。
在组件被隐藏之后触发。 当调用hide 方法隐藏组件之后触发。
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
move : ( Ext.Component this , Number x , Number y )
在组件移动之后触发。
在组件移动之后触发。
监听器将会用如下的参数格式来调用:
  • this : Ext.Component
  • x : Number
    The new x position
  • y : Number
    The new y position
BoxComponent
remove : ( Ext.Container this , Ext.Component component )
监听器将会以如下的参数格式被调用:
  • this : Ext.Container
  • component : Ext.Component
    被删除的组件
Container
removed : ( Ext.Component this , Ext.Container ownerCt )
当一个组件被从Ext.Container容器中删除时触发
当一个组件被从Ext.Container容器中删除时触发
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • ownerCt : Ext.Container
    持有组件的容器
Component
render : ( Ext.Component this )
在组件被渲染之后触发。
在组件被 rendered(渲染) 之后触发。
监听器将以如下的参数格式被调用:
  • this : Ext.Component
Component
resize : ( Ext.Component this , Number adjWidth , Number adjHeight , Number rawWidth , Number rawHeight )
在组件被调整大小之后触发。
在组件被调整大小之后触发。
监听器将以如下的参数格式被调用:
  • this : Ext.Component
  • adjWidth : Number
    这是width调整后的值
  • adjHeight : Number
    这是height调整后的值
  • rawWidth : Number
    这是width原来的值
  • rawHeight : Number
    这是height原来的值
BoxComponent
show : ( Ext.Component this )
在调用show 方法显示组件之后触发。
在调用show 方法显示组件之后触发。
监听器将会用如下的参数格式被调用:
  • this : Ext.Component
Component
staterestore : ( Ext.Component this , Object state )
组件状态被存储之后触发。
组件状态被存储之后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    StateProvider返回的状态哈希值。 如果没有禁止此事件，那么状态对象会被传递给applyState。 默认情况下，这样简单地把属性值拷贝到当前组件中。 可以覆盖此方法以提供自定的状态恢复操作。
Component
statesave : ( Ext.Component this , Object state )
在组件状态被保存到所配置的状态提供者之后触发。
在组件状态被保存到所配置的状态提供者之后触发。
监听器将会用如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    状态值hash。 这是由在足见上调用getState() 方法决定的。 开发者必须提供此方法以返回是否需要恢复状态，默认情况下， Ext.Component有一个空实现。
Component


Observable
    Component
      BoxComponent
        Button
          SplitButton
            CycleButton

Class Ext.CycleButton

包: | Ext
定义类的文件: | CycleButton.js
类: | CycleButton
继承自: | SplitButton
一个特殊的SplitButton，包含一个 Ext.menu.CheckItem 元素的. 当点击时，按钮自动在每个菜单项之间循环, 为当前菜单项触发按钮的 change事件 (或者调用按钮的 changeHandler 方法，如果提供)。点击按钮的箭头区域将显示一个下拉菜单，与一个普通的SplitButton类似。 示例用法:
var btn = new Ext.CycleButton({
    showText: true,
    prependText: 'View as ',
    items: [{
        text:'text only',
        iconCls:'view-text',
        checked:true
    },{
        text:'HTML',
        iconCls:'view-html'
    }],
    changeHandler:function(btn, item){
        Ext.Msg.alert('Change View', item.text);
    }
});

配置项

Config Options Defined By
allowDepress : Boolean
设置为false将允许一个按下的按钮弹起来(默认值为 undefined)。 只有当enableToggle为true时有效。
Button
allowDomMove : Boolean
在渲染时组件是否可以移动Dom节点(默认为true)。
Component
anchor : String
注: 这个配置只用于该组件被包含在一个已使用AnchorLayout...

注: 这个配置只用于该组件被包含在一个已使用 AnchorLayout (或者其子类)配置的Container时。 基于布局管理器，例如：

  • Ext.form.FormPanel
  • 指定 layout: 'anchor' // or 'form', or 'absolute'

参见 Ext.layout.AnchorLayout. anchor 。

BoxComponent
applyTo : Mixed
指定一个元素的id、一个DOM元素或者一个已经存在并被渲染到DIV中的元素，此DIV已经被...

指定一个元素的id、一个DOM元素或者一个已经存在并被渲染到DIV中的元素，此DIV已经被 渲染到document中，并且为当前组件指定了一些结构化的标签。

  • 描述 :
      当使用了 applyTo， 在主元素中也可以用id或者CSS类名来指定组件的托管部分， 并且，如果可以的话，创建的组件可能也会试图在那个标签中创建它的子组件。
  • 注意 :
      当使用此配置项时，无需调用render()方法。
      如果指定了applyTo属性，任何传递给 renderTo 的值都会被忽略，并且目标元素的父节点将会自动被用作组件的容器。
Component
arrowAlign : String
(可选) 如果按钮有关联菜单，用于指定箭头的位置...

(可选) 如果按钮有关联menu，用于指定箭头的位置。 两个值有效：

  • 'right'
  • 'bottom'

默认为 'right' .

Button
arrowHandler : Function
当箭头按钮被点击时调用的函数 (可以用来代替点击事件)
SplitButton
arrowTooltip : String
箭头的title属性
SplitButton
autoHeight : Boolean
如果值为true，height配置项为'auto'，否则值为false的话使用固定的高度...

如果值为true，height配置项为'auto'，否则值为false的话使用固定的高度， 或者可以由其父类容器 layout manager来控制。(默认值为 false)。

注: 虽然很多组件继承了这个配置选项，但不是所有这些组件的自适应高度配置都会像期望的那样起作用。 设置autoHeight：值为true时，浏览器将根据元素的内容自动设置高度，这将意味着Ext不会去管理高度。

如果是由浏览器来管理高度，需要注意的是，通过浏览器进行调整的结构组件内不能被发现， 因此宽度的变化可能导致需要进行同步处理元素的高度。 例如：

var w = new Ext.Window({
    title: 'Window',
    width: 600,
    autoHeight: true,
    items: {
        title: 'Collapse Me',
        height: 400,
        collapsible: true,
        border: false,
        listeners: {
            beforecollapse: function() {
                w.el.shadow.hide();
            },
            beforeexpand: function() {
                w.el.shadow.hide();
            },
            collapse: function() {
                w.syncShadow();
            },
            expand: function() {
                w.syncShadow();
            }
        }
    }
}).show();
BoxComponent
autoScroll : Boolean
如果值为true，将会在该元素上使用overflow:'auto'配置，并且在必要的时候...
如果值为true，将会在该元素上使用overflow:'auto'配置，并且在必要的时候自动显示滚动条，否则，溢出部分的组件都会被切除(默认值为 false)。
BoxComponent
autoShow : Boolean
如果组件需要检测隐藏CSS属性(如 'x-hidden' 或者 'x-hide-display')并且在渲染时删除...
如果组件需要检测隐藏CSS属性(如 'x-hidden' 或者 'x-hide-display')并且在渲染时删除它们 (默认为false)，设置此值为true。
Component
autoWidth : Boolean
如果为true，使用width:'auto'配置，否则使用固定的宽度...

如果为true，使用width:'auto'配置，否则使用固定的宽度，或者可以由其父类容器的layout manager来控制。(默认值为 false)。

注: 虽然很多组件继承了这个配置选项，但不是所有这些组件的自适应宽度配置都会像期望的那样起作用。 设置autoWidth：值为true时，浏览器将根据元素的内容自动设置宽度，这将意味着Ext不会去管理宽度。

如果是由浏览器来管理宽度，需要注意的是，通过浏览器进行调整的结构组件内不能被发现，因此宽度的变化可能导致需要进行同步处理元素的宽度。 例如，在这个元素的目标是：

<div id='grid-container' style='margin-left:25%;width:50%'></div>
当浏览器窗口改变时，渲染后的Panel必须监听浏览器窗口大小的变化，以便通知子项，浏览器改变了其宽度：

var myPanel = new Ext.Panel({
    renderTo: 'grid-container',
    monitorResize: true, // relay on browser resize
    title: 'Panel',
    height: 400,
    autoWidth: true,
    layout: 'hbox',
    layoutConfig: {
        align: 'stretch'
    },
    defaults: {
        flex: 1
    },
    items: [{
        title: 'Box 1',
    }, {
        title: 'Box 2'
    }, {
        title: 'Box 3'
    }],
});
BoxComponent
boxMaxHeight : Number
设置组件的最大高度值...

设置组件的最大高度值。

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

BoxComponent
boxMaxWidth : Number
设置组件的最大宽度值...

设置组件的最大宽度值。

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

BoxComponent
boxMinHeight : Number
设置组件的最小高度值...

设置组件的最小高度值。

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

BoxComponent
boxMinWidth : Number
设置组件的最小宽度值...

设置组件的最小宽度值。

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

BoxComponent
bubbleEvents : Array
一个事件数组，当这些事件被触发时，将会被冒泡到所有父容器中。参见....

一个事件数组，当这些事件被触发时，将会被冒泡到所有父容器中。参见 Ext.util.Observable.enableBubble。 默认为 []。

Component
buttonSelector : String
(可选) DomQuery选择器， 用于从创建的DOM结构中提取激活的，可点击的元素...

(可选) DomQuery 选择器， 用于从创建的DOM结构中提取激活的，可点击的元素。

当一个自定义的 template is 被使用时，您必须确定这个选择器的结果在可聚焦的选择集合里。

默认 'button:first-child' .

Button
changeHandler : Function
每次按钮菜单中的项目发生变化时调用的回调方法。如果...
每次按钮菜单中的项目发生变化时调用的回调方法。 如果不提供此回调方法，SplitButton将会在活动项目变化时上触发 change事件。changeHandler函数在调用时将会被传递以下参数: (SplitButton this, Ext.menu.CheckItem item)
CycleButton
clearCls : String
应用到特殊的clearing div的CSS类， 这个clearing div直接渲染到每个form field的包装器后面...

应用到特殊的clearing div的CSS类， 这个clearing div直接渲染到每个form field的包装器后面，以提供 清除field的功能(默认为 'x-form-clear-left')。

注意: 只有在当前组件被渲染到一个使用FormLayout 布局(例如 Ext.form.FormPanel 或者指定 layout:'form')的 容器中、或者是指定了一个fieldLabel 、或者指定isFormField=true 时此配置才有效。

另请参见 Ext.layout.FormLayout. fieldTpl。

Component
clickEvent : String
触发按钮处理函数的DOM事件...
触发按钮处理函数的DOM事件。可以是任何有效的事件名称（dblclick, contextmenu）。默认为'click'.
Button
cls : String
一个可选的额外CSS类，它将被添加到当前组件的元素上(默认为'')...
一个可选的额外CSS类，它将被添加到当前组件的元素上(默认为'')。 此属性对于在组件上，或者它的任何使用标准CSS规则的孩子节点上， 添加定制的样式非常有用。
Button
ctCls : String
一个可选的外部CSS样式，添加到这个组件的容器(默认值为 '')。 这个方法对于使用标准的CSS规则...

一个可选的外部CSS样式，添加到这个组件的容器(默认值为 '')。 这个方法对于使用标准的CSS规则，为组件或它的任何一个子组件添加特定的样式非常有用。 参见 Ext.layout.ContainerLayout和 extraCls 。

注意: ctCls 默认为 ''期望如下的类，它们将指定一个默认值:

  • Box Layout : 'x-box-layout-ct'
使用一个额外的CSS类配置以上的Class，它是append到默认对象上的。例如， 对于BoxLayout (Hbox and Vbox):
                                ctCls: 'x-box-layout-ct custom-class'

Component
disabled : Boolean
当前组件处于无效状态时为true。 Read-only.
Button
disabledClass : String
当组件处于无效状态时添加到组件上的CSS类(默认为 'x-item-disabled')。
Component
enableToggle : Boolean
设置为true将允许固定按下/非按下状态(默认值为 false)
Button
fieldLabel : String
紧靠此field显示的标签文本(默认值为 '')。注意...

紧靠此field显示的标签文本(默认值为 '')。

注意:只有在当前组件被渲染到一个使用FormLayout 的容器中时，此配置才有效。 (例如 Ext.form.FormPanel 或 指定 layout:'form')。

另请参见 hideLabel 、 Ext.layout.FormLayout和 fieldTpl。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Name'
    }]
});
Component
flex : Number
注: 这个配置只用于该组件被包含在一个已使用BoxLayout配置的Container中时...

注: 这个配置只用于该组件被包含在一个已使用BoxLayout配置的Container中时。通过计算每一个子组件的flex值所占全部flex值之和的比例，来决定子组件的宽(HBoxLayout)高(VBoxlayout)。 任何子项的 flex = 0 或 flex = undefined 将不被设置(初始值大小将不被改变)。

BoxComponent
forceIcon : String
一个CSS类，将设置一个图片用来作为按钮的图标。 此图标总是被显示...
一个CSS类，将设置一个图片用来作为按钮的图标。 此图标总是被显示，无论选择了下拉列表中的哪个项目。 此配置项覆盖了默认改变按钮图标的行为，以便在发生变化时 匹配选中项目的图标。
CycleButton
handleMouseEvents : Boolean
设置为true，将禁用发生 mouseover, mouseout 和 mousedown事件时的视觉提示 (默认值为 true)
Button
handler : Function
当按钮被点击时调用的方法 (可以用来替代点击事件)
当按钮被点击时调用的方法 (可以用来替代点击事件)，参数如下:
  • b : Button
    这个按钮。
  • e : EventObject
    点击事件。
Button
height : Number
组件的高度(默认值为 auto)。注:如果想使用百分比的方式...
组件的高度(默认值为 auto)。注:如果想使用百分比的方式来设置值，请查看 Ext.Component.anchor。
BoxComponent
hidden : Boolean
如果当前组件处于隐藏状态，此值为true。Read-only。
Button
hideLabel : Boolean
true时完全隐藏label元素 ( label 和 separator)。 默认为 false。 默认情况下，即使你不指定...

true时完全隐藏label元素 ( label 和 separator)。 默认为 false。 默认情况下，即使你不指定 fieldLabel 它的空间仍然会被保留，这样这块区域会与其它确实拥有label的区域位于同一排。 讲此值设置为 true 将导致此区域不再保留此空间。

注意: 参见 clearCls 的注释。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield'
        hideLabel: true
    }]
});
Component
hideMode : String
组件如何隐藏，支持的值有： 'visibility' (css visibility), 'offsets' (位置偏移量为负值) 和...

组件如何隐藏，支持的值有： 'visibility' (css visibility), 'offsets' (位置偏移量为负值) 和 'display' (css display).

注意:一般首选默认值 'display'，因为当组件第一次显示的时候它们会自动进行布局 (隐藏的时候不会调整尺寸)。

Component
hideParent : Boolean
此值为true时，当调用hide/show方法时，将会hide和show组件的容器...
此值为true时，当调用hide/show方法时，将会hide和show组件的容器；false时将会 hide和show组件自身(默认为false)。例如，这可以用作window上隐藏按钮的一种 快捷操作，通过设置此按钮的hideParent:true，然后把它添加到window上。
Component
icon : String
显示在按钮中的图片路径 (默认情况下，图片将会被设置为按钮的CSS背景图片属性，所以，如果你需要一个 图标/文本混合型的按钮...
显示在按钮中的图片路径 (默认情况下，图片将会被设置为按钮的CSS背景图片属性，所以，如果你需要一个 图标/文本混合型的按钮， 请设置cls:"x-btn-text-icon")
Button
iconAlign : String
(可选) 图表渲染的位置。允许四个值：<ul class="mdetail-params"> 'top'<...

(可选) 图表渲染的位置。允许四个值：

  • 'top'
  • 'right'
  • 'bottom'
  • 'left'

默认 'left' .

Button
iconCls : String
一个CSS类，设置一个背景图片，当前按钮将使用此图片作为图标
Button
id : String
当前组件唯一的id(默认为auto-assigned id)...

当前组件唯一的id(默认为auto-assigned id)。 如果你需要在以后访问组件，而又没有一个有效的组件对象引用，那么你需要指定一个 id( 也就是，使用Ext. getCmp方法 )。

注意，此id也将被用作组件底层HTML标签的id，这些标签被渲染到页面中。 这将允许你编写基于id的CSS规则，以独立地描述指定的实例；并且，也可以通过 组件父标签的id选中子元素。

注意:为了避免与唯一的id 产生重复， 请参见 itemId 和 ref 。

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

Component
itemCls : String
注意: 只有在当前组件被渲染到一个使用FormLayout 布局的 容器中时此配置才有效...

注意: 只有在当前组件被渲染到一个使用FormLayout 布局的 容器中时此配置才有效。 (例如Ext.form.FormPanel 或者指定 layout:'form')。

一个附加的CSS类，应用到div上，包装当前field的表单元素。 如果提供了此参数， field级上的itemCls将会覆盖 container级上提供的 默认itemCls。 为itemCls指定的值将会被添加默认的 类('x-form-item')。

既然它被应用到项目的包装器上(参见 Ext.layout.FormLayout。 fieldTpl)， 它将允许你编写能应用到此field、label(如果有指定)、或者field内部任何其它元素的标准CSS规则。

注意: 参考 fieldLabel的注释。 .

示例用法:

// Apply a style to the field's label:
<style>
    .required .x-form-item-label {font-weight:bold;color:red;}
</style>

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Name',
        itemCls: 'required' //this label will be styled
    },{
        xtype: 'textfield',
        fieldLabel: 'Favorite Color'
    }]
});
Component
itemId : String
当没有可利用的对象引用时，itemId可以作为第二选择，用来获得一个组件的引用， 代替 ...

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

var c = new Ext.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'); // 与 Ext.getCmp()不同

p2 = p1.ownerCt.getComponent('p2'); // 通过兄弟对象获得引用

另请参见 id 和 ref 。

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

Component
items : Array
一个 Ext.menu.CheckItem 配置对象数组， 被用来当创建按钮菜单项 (例如： {text:'Foo', ic...
一个 Ext.menu.CheckItem 配置对象数组 ，被用来当创建按钮菜单项 (例如： {text:'Foo', iconCls:'foo-icon'})
CycleButton
labelSeparator : String
每个fieldLabel 文本后面现实的分隔符。 此属性可以在多个层次上进行配置...

每个fieldLabel 文本后面现实的分隔符。 此属性可以在多个层次上进行配置。优先顺序为：

  • field / component level
  • container level
  • layout level (默认为冒号 ':')
如不需要为当前field的label显示分隔符，指定一个空字符串''即可。

注意:参见 clearCls 的注释。

另请参见 hideLabel 和 Ext.layout.FormLayout。 fieldTpl。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    layoutConfig: {
        labelSeparator: '~'   // layout config has lowest priority (defaults to ':')
    },
    labelSeparator: '>>',     // config at container level
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Field 1',
        labelSeparator: '...' // field/component level config supersedes others
    },{
        xtype: 'textfield',
        fieldLabel: 'Field 2' // labelSeparator will be '='

    }]
});
Component
labelStyle : String
一个CSS样式描述字符串，它将直接应用到当前field的label上...

一个CSS样式描述字符串，它将直接应用到当前field的label上。 如果有设置，默认为容器的labelStyle值(例如 Ext.layout.FormLayout.labelStyle , 或者 '')。

注意:参见 clearCls 的注释。

另请参见 hideLabel 和 Ext.layout.FormLayout. fieldTpl。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Name',
        labelStyle: 'font-weight:bold;'
    }]
});
Component
listeners : Object
一个包含一个或多个事件处理器的配置对象，会在初始化的时候被添加到目标对象上...

一个包含一个或多个事件处理器的配置对象，会在初始化的时候被添加到目标对象上。 该配置对象应该是一个有效的监听器配置对象就像 addListener例子中指定的一样可一次附加多个处理器。

ExtJs Components上的DOM事件

一些 ExtJs Component 类导出时会选择一些DOM事件(例如 "click", "mouseover" 等等), 这通常只是在有额外的值可以被添加时发生。例如DataView类的 click事件会传递被点击的节点。也可以直接在Component的HTMLElementevent上访问DOM事件，但必需在Component被渲染后监听器才能添加到Element 上。可以按照以下步骤添加插件:

// 插件会用一个监听器配置对象进行配置。
//该组件会被添加到所有处理方法的参数列表上。
Ext.DomObserver = Ext.extend(Object, {
    constructor: function(config) {
        this.listeners = config.listeners ? config.listeners : config;
    },

    // 组件将自己传递进了插件的初始化方法里
    init: function(c) {
        var p, l = this.listeners;
        for (p in l) {
            if (Ext.isFunction(l[p])) {
                l[p] = this.createHandler(l[p], c);
            } else {
                l[p].fn = this.createHandler(l[p].fn, c);
            }
        }

        // 渲染后立即添加监听器到元素上
        c.render = c.render.createSequence(function() {
            var e = c.getEl();
            if (e) {
                e.on(l);
            }
        });
    },

    createHandler: function(fn, c) {
        return function(e) {
            fn.call(this, e, c);
        };
    }
});

var combo = new Ext.form.ComboBox({

    // 元素被点击后折叠
    plugins: [ new Ext.DomObserver({
        click: function(evt, comp) {
            comp.collapse();
        }
    })],
    store: myStore,
    typeAhead: true,
    mode: 'local',
    triggerAction: 'all'
});

Observable
margins : Object
注:此配置只用于该组件展现在一个使用BorderLayout...

注:此配置只用于该组件展现在一个使用BorderLayout 或 BoxLayout的两个子类之一作为布局的容器。

这个margins对象在该组件中的格式为：

{top: (top margin),right: (right margin),bottom: (bottom margin),left: (left margin)}

也可以是一个字符串，中间用空格分隔，margin值为数字。 把matches中每一个值的次序跟CSS中margin值的排列方式相对应：

  • 如果只有一个值，它适用于所有方面。
  • 如果有两个值，top和bottom的边框设置为第一个值，left和right设置为第二个值。
  • 如果有三个值，top设置为第一个值，left和right设置为第二个值，bottom设置为第三个值。
  • 如果有四个值，分别设置为top, right, bottom, left。

默认值:

{top:0, right:0, bottom:0, left:0}
BoxComponent
menu : Menu 与按钮相关联的{@link Ext.menu.Menu Menu}对象，被配置了{@link #menu}配置项.
Button
menuAlign : String
菜单对齐的位置 (详情参见Ext.Element.alignTo ，默认值为 'tl-bl?').
Button
minWidth : Number
按钮的最小宽度(用来为一组按钮指定一个统一的宽度)，参见 Ext.Panel. minButtonWidth .
Button
overCls : String
一个可选的额外的CSS类，它将在鼠标移过元素时被添加到组件上...
一个可选的额外的CSS类，它将在鼠标移过元素时被添加到组件上，鼠标移出时 删除。(默认为'')。此属性对于在组件上，或者它的任何使用标准CSS规则的孩子节点上， 添加定制的'active' 或者 'hover'样式非常有用。
Component
overflowText : String
如果被用在 Toolbar，这段文字用于显示在溢出菜单上...
如果被用在 Toolbar, 这段文字用于显示在溢出菜单上。 参见 Ext.Toolbar.Item. overflowText .
Button
pageX : Number
如果该组件被包含在一个指定位置的容器中，这个值表示页面级的x坐标值（译者注：在有滚动条的情况下这个值很有用）。
BoxComponent
pageY : Number
如果该组件被包含在一个指定位置的容器中，这个值表示页面级的y坐标值（译者注：在有滚动条的情况下这个值很有用）。
BoxComponent
plugins : Object/Array
一个对象或者一个对象数组，为组件提供特殊的功能 ...
一个对象或者一个对象数组，为组件提供特殊的功能。 对一个合法的插件唯一的要求是它含有一个init()方法， 能接收一个Ext.Component型的参数。 当组件被创建时，如果有可用的插件，组件将会调用每个插件的init方法， 并将自身的引用作为方法参数传递给它。然后，每个插件就可以调用方法或者响应组件上的事件， 就像需要的那样提供自己的功能。
Component
prependText : String
一个插入到活动项目文本之前的静态字符串， 当显示时作为按钮的文本 (只有...
一个插入到活动项目文本之前的静态字符串， 当显示时作为按钮的文本 (只有在showText = true时有效，默认值为 '')
CycleButton
pressed : Boolean
只读属性。 如果按钮被按下，此值为true (只有在 enableToggle = true时有效)
Button
ptype : String
需要创建配置的ptype。 当传递一个配置对象给构造函数时...
需要创建配置的ptype。 当传递一个配置对象给构造函数时，此配置选项不会被使用。 只有在使用懒初始化的时候此配置项才会被使用， 此时Plugin不是 通过一个完整的实例组件，而是通过一个Component配置指定的。 在渲染时，将会查找ptype以决定创建何种类型的Plugin。

如果你创建自己的Plugin，你可以通过 Ext.ComponentMgr.registerPlugin 对它们进行注册，以便能利用懒初始化和渲染机制。
Component
ref : String
一个路径描述，与组件的 ownerCt 相关，它描述了把当前组件的命名引用放置到哪个父容器中去。...

一个路径描述，与组件的 ownerCt 相关，它描述了把当前组件的命名引用放置到哪个父容器中去。

祖先的坐标路径可以通过'/'字符进行分隔。 例如，将一个Toolbar Button的引用放入 拥有此Toolbar的Panel中:

var myGrid = new Ext.grid.EditorGridPanel({
    title: 'My EditorGridPanel',
    store: myStore,
    colModel: myColModel,
    tbar: [{
        text: 'Save',
        handler: saveChanges,
        disabled: true,
        ref: '../saveButton'
    }],
    listeners: {
        afteredit: function() {
//          The button reference is in the GridPanel
            myGrid.saveButton.enable();
        }
    }
});

在上面的代码中，如果 ref 是 'saveButton' ，那么引用将会被放置到Toolbar中。 ref 中的每个'/' 都会从组件的 ownerCt 向上移动一级。

另请参见 added 和 removed 事件。

Component
region : String
注: 此配置只用于该组件展现在一个布局为BorderLayout的容器中...

注: 此配置只用于该组件展现在一个布局为BorderLayout的容器中(例如指定layout:'border')。

详见Ext.layout.BorderLayout。

BoxComponent
renderTo : Mixed
该值可以是一个节点的id、一个DOM节点或者一个已存在的元素...

该值可以是一个节点的id、一个DOM节点或者一个已存在的元素， 组件将会被渲染到其中。

  • 注意 :
      如果组件不是一个Container 的子项目时， 不要使用此选项。 渲染和管理它的子项目是一个Container 的layout manager的责任。
      当使用此配置项时，无需调用render()方法。

另请参见 render 。

Component
repeat : Boolean/Object
设置为true，在鼠标被按下时将重复触发点击事件。 此项也可以是一个ClickRepeater配置对象(默认值为 false)。
设置为true，在鼠标被按下时将重复触发点击事件。 此项也可以是一个ClickRepeater配置对象(默认值为 false)。
Button
scale : String
(可选) 按钮大小。允许三种值： <ul class="mdetail-params"> 'small'<div class="sub-desc"...

(可选) 按钮大小。允许三种值：

  • 'small'
    按钮高度16px。
  • 'medium'
    按钮高度24px。
  • 'large'
    按钮高度32px。

默认 'small' .

Button
scope : Object
handler and toggleHandler 执行时的作用域( this 引用) 默认为这个按钮。
Button
showText : Boolean
设置为true将把当前活动项目的文本作为按钮的文本显示 (默认值为 false)
CycleButton
stateEvents : Array
一个事件数组，当它们被触发时，组件需要保存自己的状态(默认值为 none)...

一个事件数组，当它们被触发时，组件需要保存自己的状态(默认值为 none)。 它们可以是任何该组件支持的事件类型，包括浏览器事件和 自定义事件(例如['click', 'customerchange'])。

对于保存和恢复组件状态的详细解释，参见 stateful

Component
stateId : String
为该组件指定的唯一的id值，它被用作管理组件状态的目的...
为该组件指定的唯一的id值，它被用作管理组件状态的目的。 (如果设定了id，默认值为组件自己的id，否则，如果组件使用自动生成的id，此值为null)。

对于保存和反解析组件状态的解释，参见 stateful 。

Component
stateful : Boolean
一个标志参数，它将引起组件在启动时尝试从一个保存的状态中恢复内部状态参数...

一个标志参数，它将引起组件在启动时尝试从一个保存的状态中恢复内部状态参数。 组件必须要么拥有一个 stateId 或者 id ，它们被分配给需要被管理的状态属性。 在跨页面加载时，不保证自动生成的id属性的稳定性， 并且，不能依赖此id来保存和恢复一个组件的相同状态。

为了保存状态的操作能够工作，状态管理器的提供者必须 被设置成一个Ext.state.Provider 的实现类，它覆盖了set 和get 方法，以便保存和恢复name/value对。 有一个内置的Ext.state.CookieProvider 可用。

为当前页面设置状态提供者:

Ext.state.Manager.setProvider(new Ext.state.CookieProvider({
    expires: new Date(new Date().getTime()+(1000*60*60*24*7)), //7 days from now
}));

当 stateEvents 配置项中其中之一的事件被触发时， 一个状态可保存的组件将试图保存其状态。

保存状态时，一个可保存状态的组件首先需要通过调用 getState 方法来序列化它的状态。 默认情况下，此函数什么事都不做。 开发者必须提供一个实现，返回一个hash对象，它描述了组件可恢复的状态。

getState方法产生的值将会传递给 Ext.state.Manager.set 方法，它使用配置的 Ext.state.Provider 来保存对象，以组件的 stateId 为key，或者，如果此值（指stateId）没有指定时， 使用它的 id 作为key。

在进行构造时，一个可保存状态的组件试图通过调用 Ext.state.Manager.get方法来 恢复它的状态，传递 stateId 或者，如果此值（指stateId）没有指定时， 使用它的 id 作为参数。

结果对象被传递给 applyState 。 applyState 的默认实现只是简单地把属性拷贝到对象中， 但是开发者可以覆盖此方法以支持更多行为。

通过向 beforestaterestore, staterestore, beforestatesave 和 statesave 事件上绑定监听器，你可以在保存和恢复状态时进行额外的处理。

Component
style : String
被添加到组件元素的特定样式。 必须是按照...
被添加到组件元素的特定样式。 必须是按照 Ext.Element.applyStyles 类指定格式的合法参数值。

new Ext.Panel({
    title: 'Some Title',
    renderTo: Ext.getBody(),
    width: 400, height: 300,
    layout: 'form',
    items: [{
        xtype: 'textarea',
        style: {
            width: '95%',
            marginBottom: '10px'
        }
    },
        new Ext.Button({
            text: 'Send',
            minWidth: '100',
            style: {
                marginBottom: '10px'
            }
        })
    ]
});
Component
tabIndex : Number
为当前按钮设置一个DOM tabIndex(默认值为 undefined)
Button
tabTip : String
注: 这个配置只用于当该组件作为TabPanel的一个子项目时使用...

注: 这个配置只用于当该组件作为TabPanel的一个子项目时使用。

一个String类型的innerHTML(支持html标签)，当鼠标放在该选项上的时，显示一个tooltip。为了tips能够被渲染，Ext.QuickTips.init()必须被提前调用。
BoxComponent
template : Ext.Template
一个Ext.Template，用于构建按钮的DOM结构...

一个 Template， 用于构建按钮的DOM结构。

需要一个不同的DOM结构的实例或者子类可以通过使用getTemplateArgs来提供一个不同的模版布局。
Button
text : String
按钮文本，innerHTML(允许html标签)
Button
toggleGroup : String
当前被按下的按钮所属的组 (一组中只有1个按钮可以被按下， 只有在enableToggle = true时有效)
Button
toggleHandler : Function
当一个enableToggle 被设置为true的按钮被点击时调用的函数...
当一个enableToggle 被设置为true的按钮被点击时调用的函数。 将会传递两个参数：
  • button : Ext.Button
    这个按钮对象
  • state : Boolean
    按钮的下一个状态，为true代表按下。
Button
tooltip : String/Object
按钮的tooltip---可以是一个字符串（接受html标签），或者一个QuickTips...
按钮的tooltip---可以是一个字符串（接受html标签），或者一个QuickTips配置对象
Button
tooltipType : String
使用的tooltip类型。 要么是 "qtip" (默认) QuickTips 要么是"title"以做标题属性。
Button
type : String
submit, reset 或者 button - 默认值为 'button'
Button
width : Number
组件的宽度(默认值为 auto)。注:如果想使用百分比的方式...
组件的宽度(默认值为 auto)。注:如果想使用百分比的方式来设置值，请查看 Ext.Component.anchor。
BoxComponent
x : Number
如果被包含在一个指定位置的容器中，这个值表示x(left)坐标值。
BoxComponent
xtype : String
需要创建配置的xtype。 当传递一个配置对象给构造函数时...
需要创建配置的xtype。 当传递一个配置对象给构造函数时，此配置选项不会被使用。 只有在使用懒初始化的时候此配置项才会被使用，此时容器的子项目不是 通过一个完整的实例组件，而是通过一个Component配置指定的。 在渲染时，将会查找xtype以决定创建何种类型的子组件。

预定义的xtype列表如下： here。

如果你继承Component创建你自己的组件，你需要使用Ext.ComponentMgr.registerType 对它们进行注册，以便利用懒初始化和渲染机制。
Component
y : Number
如果被包含在一个指定位置的容器中，这个值表示y(top)坐标值。
BoxComponent

公共属性

Property Defined By
btnEl : Ext.Element
封装按钮可点击与元素的元素Element。默认情况下，引用一个...
封装按钮可点击与元素的元素Element。默认情况下，引用一个 <button> 元素。只读。
Button
disabled : Boolean
当前组件处于无效状态时为true。 Read-only.
Button
el : Ext.Element
封装了当前组件的Ext.Element。 Read-only。通常情况下，这将是一个<DIV>元素，它由此类的...

封装了当前组件的Ext.Element。 Read-only。

通常情况下，这将是一个<DIV>元素，它由此类的 onRender方法创建，但是它可以通过使用 autoEl 配置项进行覆盖。

注意: 直到组件渲染完成此元素都将处于无效状态。

如需向当前组件的 DOM事件(而不是当前组件自己的Observable事件)添加监听器， 更多建议，参见 listeners 配置项，或者直接使用一个render监听器:

new Ext.Panel({
    title: 'The Clickable Panel',
    listeners: {
        render: function(p) {
            // Append the Panel to the click handler's argument list.
            p.getEl().on('click', handlePanelClick.createDelegate(null, [p], true));
        },
        single: true  // Remove the listener after first invocation
    }
});

另请参见 getEl

Component
hidden : Boolean
如果当前组件处于隐藏状态，此值为true。Read-only。
Button
initialConfig : Object
当前组件的初始化配置描述。 Read-only。
Component
menu :显示按钮可使用菜单项的菜单对象
CycleButton
ownerCt : Ext.Container
组件所属的Container (默认为undefined，当前组件被添加到一个容器中时此值被自动设置)...
组件所属的Container (默认为undefined，当前组件被添加到一个容器中时此值被自动设置)。 Read-only。

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

Component
pressed : Boolean
只读属性。 如果按钮被按下，此值为true (只有在 enableToggle = true时有效)
Button
refOwner : Ext.Container
如果当前组件是一个容器的孩子，并且是通过一个 ref 配置项被注册的，则此值为 ref 引用被插入到的祖先容器。
如果当前组件是一个容器的孩子，并且是通过一个 ref 配置项被注册的，则此值为 ref 引用被插入到的祖先容器。
Component
rendered : Boolean
如果当前组件已经被渲染了，此值为true。Read-only.
Component

公共方法

Method Defined By
CycleButton ( Object config )
创建一个新的 split button
创建一个新的 split button
参数:
  • config : Object
    配置项
返回值:
  • void
CycleButton
addClass ( string cls ) : Ext.Component
为组件底层的元素添加CSS样式。
为组件底层的元素添加CSS样式。
参数:
  • cls : string
    需要添加的CSS样式的class名称
返回值:
  • Ext.Component
    this
Component
addEvents( Object|String o, string Optional. ) : void
添加指定的事件到事件列表上，事件会被该Observable触发。
添加指定的事件到事件列表上，事件会被该Observable触发。
参数:
  • o : Object|String
    以事件名作为属性true作为值的对象 或者当多个事件名被分开的传递时则为第一个事件名。
  • Optional. : string
    事件名被分开的传递时则为事件名。 用法:
    this.addEvents('storeloaded', 'storecleared');
返回值:
  • void
Observable
addListener( String eventName, Function handler, [Object scope], [Object options] ) : void
给对象添加事件处理器。
给对象添加事件处理器。
参数:
  • eventName : String
    监听的事件名。
  • handler : Function
    事件调用的方法
  • scope : Object
    （可选）处理方法执行的作用域 (this的引用 reference)。 如果被忽略。默认为触发事件的对象。
  • options : Object
    （可选）包含处理器配置和属性的对象。 可能包含以下的属性:
    • scope : Object
      处理方法执行的作用域(this的引用) 。 如果被忽略。默认为触发事件的对象。
    • delay : Number
      在触发事件后延迟调用处理器的毫秒数。
    • single : Boolean
      如果为True则添加一个处理器来处理下一次的事件触发（仅一次），然后移除自己。
    • buffer : Number
      使得处理器延迟指定毫秒数后预定的运行在 一个Ext.util.DelayedTask中 。 如果事件在时间内再一次被触发，原始的处理器不会被调用，但是新的处理器会预定的在他的位置上。
    • target : Observable
      如果事件在目标的Observable上触发则仅仅调用处理器， 否则 事件会从子类的Observable上冒泡

    组合选项
    使用这些选项参数,可能会组合出不同类型的监听器：

    一个延迟的，一次性的监听器。

    myDataView.on('click', this.onClick, this, {
single: true,
delay: 100
});

    一次调用附加多个处理器
    该方法同样支持传递一个包含指定的多个处理器的属性的配置对象参数。

    myGridPanel.on({
'click' : {
    fn: this.onClick,
    scope: this,
    delay: 100
},
'mouseover' : {
    fn: this.onMouseOver,
    scope: this
},
'mouseout' : {
    fn: this.onMouseOut,
    scope: this
}
});

    或者一个简写的语法：

    myGridPanel.on({
'click' : this.onClick,
'mouseover' : this.onMouseOver,
'mouseout' : this.onMouseOut,
 scope: this
});
返回值:
  • void
Observable
applyToMarkup ( String/HTMLElement el ) : void
将此组件添加到已存在的有效的HTML标签中。 使用该方法时，无需再调用render()方法。
将此组件添加到已存在的有效的HTML标签中。 使用该方法时，无需再调用render()方法。
参数:
  • el : String/HTMLElement
返回值:
  • void
Component
cloneConfig ( Object overrides ) : Ext.Component
默认使用原先传递给当前实例的配置值克隆当前组件。
默认使用原先传递给当前实例的配置值克隆当前组件。
参数:
  • overrides : Object
    一个新的配置项，包含需要覆盖到克隆版本的所有属性。 可以传递一个id参数给此对象，否则将自动生成一个新的id以避免发生重复。
返回值:
  • Ext.Component
    当前组件的克隆副本
Component
destroy () : void
通过如下方法销毁对象：删除所有的事件监听器、将组件的元素从DOM树中删除...
通过如下方法销毁对象：删除所有的事件监听器、将组件的元素从DOM树中删除（如果可以）、 将组件从它的 Ext.Container（如果可用）中删除、 并且将它从Ext.ComponentMgr中 注销。 销毁操作一般由框架自动完成，一般情况下不需要直接调用该方法。
参数:
  • 无。
返回值:
  • void
Component
disable () : Ext.Component
将组件置为无效状态，并出发'disable'事件。
将组件置为无效状态，并出发'disable'事件。
参数:
  • 无。
返回值:
  • Ext.Component
    this
Component
enable () : Ext.Component
将组件置为有效状态并触发'enable'事件。
将组件置为有效状态并触发'enable'事件。
参数:
  • 无。
返回值:
  • Ext.Component
    this
Component
enableBubble( String/Array events ) :void
是否现在使得事件会被该Observable触发并调用 this.getBubbleTarget()方法在拥有者的继承树...

是否现在使得事件会被该Observable触发并调用 this.getBubbleTarget()方法在拥有者的继承树中冒泡。Observable的基础类中没有该方法的实现。

该方法一般被Ext.Components用来冒泡事件到拥有者的容器。参看Ext.Component.getBubbleTarget默认的实现 在Ext.Component中返回组件的直接拥有者。但是如果需要的是一个已知的目标，该方法可以被重写来更快的访问需求的目标。

例子:

Ext.override(Ext.form.Field, {
    // 添加方法到Field的initComponent上改变事件为冒泡
    initComponent : Ext.form.Field.prototype.initComponent.createSequence(function() {
        this.enableBubble('change');
    }),

    // 我们知道我们想让Field的事件冒泡到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() {
            // 如果样式被修改标题会变红。
            myForm.header.setStyle('color', 'red');
        }
    }
});
参数:
  • events : String/Array
    冒泡的事件名，或事件名数组
返回值:
  • void
Observable
findParentBy ( Function fn ) : Ext.Container
通过自定义的函数查找当前组件上层任何层次上的容器...
通过自定义的函数查找当前组件上层任何层次上的容器。 如果传递的函数返回true，容器对象将被返回。
参数:
  • fn : Function
    自定义的函数，使用如下参数调用(container,this component)。
返回值:
  • Ext.Container
    自定义函数返回true的第一个容器
Component
findParentByType ( String/Class xtype ) : Ext.Container
通过xtype或者class查找当前组件上层任何层次上的容器
通过xtype或者class查找当前组件上层任何层次上的容器
参数:
  • xtype : String/Class
    组件的xtype字符串，或者直接是组件的class
返回值:
  • Ext.Container
    符合指定xtype或者class的第一个容器
Component
fireEvent( String eventName, Object... args ) : Boolean
用传入的参数触发指定的事件 (减去事件名)。 一个事件可以被设置为冒泡 Obse...

用传入的参数触发指定的事件 (减去事件名)。

一个事件可以被设置为冒泡到Observable父类继承树(参看 Ext.Component.getBubbleTarget) 调用enableBubble实现。

参数:
  • eventName : String
    触发的事件名。
  • args : Object...
    传递给处理器的可变长度参数。
返回值:
  • Boolean
    如果有任何的处理器返回false则返回false，否则返回true。
Observable
focus ( [ Boolean selectText ], [ Boolean/Number delay ] ) : Ext.Component
尝试将当前组件设为焦点。
尝试将当前组件设为焦点。
参数:
  • selectText : Boolean
    (可选) 如果可用，同时选中组件内部的文本
  • delay : Boolean/Number
    (可选)将当前组件设置为焦点的延迟时间(设置为true等于0毫秒)
返回值:
  • Ext.Component
    this
Component
getActiveItem () : Ext.menu.CheckItem
获取当前活动的菜单项。
获取当前活动的菜单项。
参数:
  • 无。
返回值:
  • Ext.menu.CheckItem
    The active item
CycleButton
getBox ( [ Boolean local ] ) : Object
获取组件底层元素当前盒子模型的尺寸。（译者注：盒子模型是CSS术语，详细解释请自行搜索。）
获取组件底层元素当前盒子模型的尺寸。（译者注：盒子模型是CSS术语，详细解释请自行搜索。）
参数:
  • local : Boolean
    (可选)值为true时，组件的left值和top值将代替页面的XY被返回。(默认值为false)
返回值:
  • Object
    返回值的格式{x, y, width, height}
BoxComponent
getBubbleTarget () : Ext.Container
为Observable的fireEvent方法提供链接，它沿着继承结构进行冒泡操作。
为Observable的fireEvent方法提供链接，它沿着继承结构进行冒泡操作。
参数:
  • 无。
返回值:
  • Ext.Container
    拥有当前组件的容器。
Component
getEl () : Ext.Element
返回 Ext.Element ，它包装了当前组件。...

返回 Ext.Element ，它包装了当前组件。

通常情况下，这将是一个<DIV>元素，它是由该类的onRender方法创建的， 但是可以使用autoEl配置项 覆盖它。

注意: 此元素将会一直处于无效状态直到当前组件渲染完成。

如需向当前组件的 DOM事件(而不是当前组件自己的Observable事件)添加监听器， 更多建议，参见 listeners 配置项，或者直接使用一个render监听器:

new Ext.Panel({
    title: 'The Clickable Panel',
    listeners: {
        render: function(p) {
            // Append the Panel to the click handler's argument list.
            p.getEl().on('click', handlePanelClick.createDelegate(null, [p], true));
        },
        single: true  // Remove the listener after first invocation
    }
});
参数:
  • 无。
返回值:
  • Ext.Element
    包装当前组件的元素。
Component
getHeight () : Number
获取该组件的当前高度值。
获取该组件的当前高度值。
参数:
  • 无。
返回值:
  • Number
BoxComponent
getId () : String
返回当前组件的id，如果没有定义id，则自动生成并返回一个id:'ext-comp-'...
返回当前组件的 id 如果没有定义 id 则自动生成并返回一个 id

'ext-comp-' + (++Ext.Component.AUTO_ID)
参数:
  • 无。
返回值:
  • String
    id
Component
getItemId () : String
返回当前组件的 itemId 。 如果没有通过配置参数指定 itemId 那么，将会使用...
返回当前组件的 itemId 。 如果没有通过配置参数指定 itemId 那么，将会使用 getId 返回 id 。
参数:
  • 无。
返回值:
  • String
Component
getOuterSize () : Object
获取当前组件所在元素的尺寸大小，包括边缘的空白处。
获取当前组件所在元素的尺寸大小，包括边缘的空白处。
参数:
  • 无。
返回值:
  • Object
    一个包含元素大小的对象 {width: (element width + left/right margins), height: (element height + top/bottom margins)}
BoxComponent
getPosition ( [ Boolean local ] ) : Array
获取组件底层元素当前的XY位置。
获取组件底层元素当前的XY位置。
参数:
  • local : Boolean
    (可选)如果为true，将返回元素的left和top值，而不是相对于页面内的 XY。(默认值为 false)
返回值:
  • Array
    元素的XY位置值(例如：[100, 200])
BoxComponent
getPressed ( String group ) : Button
获得一组中按下的按钮或者null
获得一组中按下的按钮或者null
参数:
  • group : String
返回值:
  • Button
Button
getResizeEl () : Ext.Element
返回该组件的最外层用来定义这些组件整体大小的Element...

返回该组件的最外层用来定义这些组件整体大小的Element对象。

通常用 getEl 方法将会返回相同的Element对象，但在有些情况下，组件可能有一些更多的封装了它的主要动态Element对象的Element对象。

例如ComboBox。它是封装在一个包含<input>元素的包装元素里(这将返回其 getEl方法和触发按钮的元素)。返回的元素为resizeEl。

参数:
  • 无。
返回值:
  • Ext.Element
    The Element which is to be resized by size managing layouts.
BoxComponent
getSize () : Object
获取组件底层元素当前的大小。
获取组件底层元素当前的大小。
参数:
  • 无。
返回值:
  • Object
    一个包含元素大小的对象{width: (element width), height: (element height)}
BoxComponent
getTemplateArgs () : Array
这个方法返回一个数组，用于为Template提供替代参数从而建立按钮的DOM...

这个方法返回一个数组，用于为Template提供替代参数从而建立按钮的DOM的框架。

采用不同的模板来建立不同的DOM结构的实例或者子类可能需要指定此方法。

为创建一个template，该函数返回一个数组，包含如下几项：

  • The <button>'s type
  • CSS类名，用于按钮主 <tbody> 元素，指定按钮大小排列位置。
  • 用于指定箭头位置和显示的CSS类。 ( 'x-btn-arrow' or 'x-btn-arrow-bottom' or '' )
  • cls CSS类名，用于按钮的容器<table> 元素。
  • 组件id，应用于按钮的容器<table> 元素。
参数:
  • 无。
返回值:
  • Array
    模板的替换数据。
Button
getText () : String
获取此按钮的文本
Gets the text for this Button
参数:
  • 无。
返回值:
  • String
    The button text
Button
getWidth () : Number
获取该组件的当前宽度值。
获取该组件的当前宽度值。
参数:
  • 无。
返回值:
  • Number
BoxComponent
getXType () : String
获取当前组件的xtype，它是用 Ext.ComponentMgr 注册的。 所有可用的xtype列表，参见...
获取当前组件的xtype，它是用 Ext.ComponentMgr 注册的。 所有可用的xtype列表，参见 Ext.Component 类头部。示例用法:

var t = new Ext.form.TextField();
alert(t.getXType());  // alerts 'textfield'
参数:
  • 无。
返回值:
  • String
    The xtype
Component
getXTypes () : String
返回此组件的xtype继承树，用字符'-'分隔。 所有可用的xtype值...

返回此组件的xtype继承树，用字符'-'分隔。 所有可用的xtype值，请参见Ext.Component 类的头部。

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

示例用法:

var t = new Ext.form.TextField();
alert(t.getXTypes());  // alerts 'component/box/field/textfield'
参数:
  • 无。
返回值:
  • String
    xtype层次字符串
Component
hasListener( String eventName ) : Boolean
检测对象是否包含指定事件的任何监听器
检测对象是否包含指定事件的任何监听器
参数:
  • eventName : String
    检测的事件名
返回值:
  • Boolean
    如果事件被监听则为true，否则为false
Observable
hasVisibleMenu () : Boolean
如果按钮有一个菜单，并且它是可见的，返回true
如果按钮有一个菜单，并且它是可见的，返回true
参数:
  • 无。
返回值:
  • Boolean
Button
hide () : Ext.Component
隐藏当前组件。 监听 beforehide' 事件并且返回false 可以取消隐藏组件的操作。 在隐藏组件之后触发...
隐藏当前组件。 监听 beforehide' 事件并且返回false 可以取消隐藏组件的操作。 在隐藏组件之后触发 ' hide' 事件。 如果组件被配置成 hidden 那么此方法在内部被调用。
参数:
  • 无。
返回值:
  • Ext.Component
    this
Component
hideMenu () : void
隐藏当前按钮的菜单（如果有的话）
隐藏当前按钮的菜单（如果有的话）
参数:
  • 无。
返回值:
  • void
Button
isVisible () : Boolean
如果当前组件可见，返回true。
如果当前组件可见，返回true。
参数:
  • 无。
返回值:
  • Boolean
    如果当前组件可见，返回true，其它返回false。
Component
isXType ( String xtype , [ Boolean shallow ] ) : Boolean
Tests whether or not this Component is of a specific xtype. This can test whether this Component is descended from th...

测试此组件是否是指定的xtype。此方法既可以测试是否是指定的xtype的某个子类， 或者它是否直接是指定的xtype类(shallow=true)。

如果使用你自己的子类，必须知道组件必须注册它的xtype值。

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

示例用法:

var t = new Ext.form.TextField();
var isText = t.isXType('textfield');        // true
var isBoxSubclass = t.isXType('box');       // true, descended from BoxComponent
var isBoxInstance = t.isXType('box', true); // false, not a direct BoxComponent instance
参数:
  • xtype : String
    需要为当前组件进行检测的xtype
  • shallow : Boolean
    (可选) 如果为false，检测组件是否是xtype继承树中的某个子类（默认是这种情况）， 如果为true，只检测组件是否是指定的xtype类型。
返回值:
  • Boolean
    如果当前组件是指定xtype的子类，返回true，其它返回flase。
Component
mon ( Observable|Element item , Object|String ename , Function fn , Object scope , Object opt ) : void
向任何Observable对象(或者元素)上添加监听器，监听器将会在组件...

向任何Observable对象(或者元素)上添加监听器，监听器将会在组件销毁时被自动删除。
用法：

myGridPanel.mon(myGridPanel.getSelectionModel(), 'selectionchange', handleSelectionChange, null, {buffer: 50});

or:

myGridPanel.mon(myGridPanel.getSelectionModel(), {
    selectionchange: handleSelectionChange,
    buffer: 50
});
参数:
  • item : Observable|Element
    需要添加listener/listeners的项目。
  • ename : Object|String
    事件名，或者一个包含事件名属性的对象。
  • fn : Function
    (可选) 如果 ename 参数是一个事件名，此参数为处理函数。
  • scope : Object
    (可选)如果 ename 参数是一个事件名称，此参数是作用域 ( this 引用)，监听函数将会在此作用域中被执行。
  • opt : Object
    (可选)如果 ename 参数是一个事件名称， 此参数是 addListener 配置项。
返回值:
  • void
Component
mun ( Observable|Element item , Object|String ename , Function fn , Object scope ) : void
删除通过mon 方法添加的监听器。
删除通过mon 方法添加的监听器。
参数:
  • item : Observable|Element
    需要删除listener/listeners的项目。
  • ename : Object|String
    事件名称，或者一个包含事件名称属性的对象。
  • fn : Function
    (可选)如果 ename 参数是一个事件名称，此参数是一个处理函数。
  • scope : Object
    (可选)如果 ename 参数是一个事件名称，此参数是作用域 ( this 引用)，监听函数将会在此作用域中被执行。
返回值:
  • void
Component
nextSibling () : Ext.Component
返回所属容器中的下一个组件
返回所属容器中的下一个组件
参数:
  • 无。
返回值:
  • Ext.Component
Component
on( String eventName, Function handler, [Object scope], [Object options] ) : void
给对象添加事件处理器 (addListener的简写形式)
给对象添加事件处理器 (addListener的简写形式。)
参数:
  • eventName : String
    监听的事件类型
  • handler : Function
    事件调用的方法
  • scope : Object
    （可选）处理方法执行时的作用域 (this 的引用)。 如果被忽略。默认为触发事件的对象。
  • options : Object
    可选 包含处理器配置的对象。
返回值:
  • void
Observable
previousSibling () : Ext.Component
返回所属容器中的前一个组件
返回所属容器中的前一个组件
参数:
  • 无。
返回值:
  • Ext.Component
Component
purgeListeners() : void
移除对象上所有的监听器
移除对象上所有的监听器
参数:
  • 无。
返回值:
  • void
Observable
relayEvents( Object o, Array events ) : void
从指定的Observable上传递选择的事件就好像被当前对象触发一样。
从指定的Observable上传递选择的事件就好像被当前对象触发一样。
参数:
  • o : Object
    该Observable上的事件被当前对象传递。
  • events : Array
    传递的数组名。
返回值:
  • void
Observable
removeClass ( string cls ) : Ext.Component
从组件底层的元素上删除一个CSS类。
从组件底层的元素上删除一个CSS类。
参数:
  • cls : string
    需要移除的CSS类名
返回值:
  • Ext.Component
    this
Component
removeListener( String eventName, Function handler, [Object scope] ) : void
删除一个事件处理器。
删除一个事件处理器。
参数:
  • eventName : String
    处理器关联的事件类型。
  • handler : Function
    移除的处理器。 这应该是传递到addListener里的方法的引用。
  • scope : Object
    （可选）处理器指定的初始作用域。
返回值:
  • void
Observable
render ( [ Element/HTMLElement/String container ], [ String/Number position ] ) : void
在传递进来的HTML元素中渲染当前组件。...

在传递进来的HTML元素中渲染当前组件。

如果你正在使用一个Container 对象放置当前组件，那么请不要使用render方法。

当容器第一次被渲染时，它的子组件将会被容器的 layout 管理器渲染。

某些布局管理器允许动态添加子组件。它们包括 Ext.layout.CardLayout, Ext.layout.AnchorLayout, Ext.layout.FormLayout, Ext.layout.TableLayout。

当一个新的子组件被添加时，如果容器已经被渲染了， 你可能需要调用容器的 doLayout 方法来刷新视图，它将导致所有没有被渲染的子组件进行渲染操作。 此操作是必须的，这样你可以添加多个子组件而只刷新一次layout。

当创建复杂的UI时，非常重要的一点是，请记住调整子项目的尺寸和位置是容器的 layout 管理器的职责。 如果你希望子项目的尺寸对用户交互作出反应， 你必须为容器配置一个布局管理器，它将创建和管理你心里想要的那种布局。

忽略容器的layout 配置意味着将会使用一个基本的布局管理器，它除了按次序把子组件 渲染到容器中之外什么事情都不做。 这种情况下，任何尺寸和位置的调整操作都不会发生。

参数:
  • container : Element/HTMLElement/String
    (可选) 需要在其中渲染当前组件的元素。 如果它是从一个已存在的标签中创建的，此参数应该被忽略。
  • position : String/Number
    (可选) 容器中的一个元素ID或者一个DOM节点索引， 当前组件将会被插入到它前面 (默认append到容器的尾部)
返回值:
  • void
Component
resumeEvents() : void
重新开始触发事件。(参见suspendEvents) 如果事件以queueSuspended参数被挂起，则在事件被挂起时 ...
重新开始触发事件。(参见 suspendEvents) 如果事件以queueSuspended 参数被挂起，则在事件被挂起时触发的事件会被传递到所有的监听器上
参数:
  • 无。
返回值:
  • void
Observable
setActiveItem ( Ext.menu.CheckItem item , Boolean suppressEvent ) : void
设置按钮的活动菜单项。
设置按钮的活动菜单项。
参数:
  • item : Ext.menu.CheckItem
    要设为活动的项目
  • suppressEvent : Boolean
    为True时阻止触发按钮的change事件(默认为false)
返回值:
  • void
CycleButton
setArrowHandler ( Function handler , [ Object scope ] ) : void
设置按钮箭头的点击处理方法。
设置按钮箭头的点击处理方法。
参数:
  • handler : Function
    当箭头点击时调用的函数
  • scope : Object
    (可选)上面传递的函数的作用域
返回值:
  • void
SplitButton
setAutoScroll ( Boolean scroll ) : Ext.BoxComponent
设置该组件内容溢出时是否自动显示滚动条。
设置该组件内容溢出时是否自动显示滚动条。
参数:
  • scroll : Boolean
    值为true的话组件自动显示滚动条。
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setDisabled ( Boolean disabled ) : Ext.Component
工具函数，使用布尔值设置有效/无效(disabled/enabled )。
工具函数，使用布尔值设置有效/无效(disabled/enabled )。
参数:
  • disabled : Boolean
返回值:
  • Ext.Component
    this
Component
setHandler ( Function handler , [ Object scope ] ) : Ext.Button
指定按钮的点击处理器
指定按钮的点击处理器
参数:
  • handler : Function
    当按钮被点击时调用的函数
  • scope : Object
    可选 处理函数执行时的作用域( this 引用) 默认为按钮本身。
返回值:
  • Ext.Button
    this
Button
setHeight ( Mixed height ) : Ext.BoxComponent
设置此组件的高度。该方法将触发resize事件。
设置此组件的高度。该方法将触发resize事件。
参数:
  • height : Mixed
    The new height to set.
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setIcon ( String icon ) : Ext.Button
设置按钮的背景图片，这个方法还会改变...
设置按钮的背景图片，这个方法还会改变icon的值。
参数:
  • icon : String
    图片路径
返回值:
  • Ext.Button
    this
Button
setIconClass ( String cls ) : Ext.Button
设置一个CSS类，提供一个背景图片，它将被用作按钮的图标。 此方法同时在内部改变 iconCls 配置项的值。
设置一个CSS类，提供一个背景图片，它将被用作按钮的图标。 此方法同时在内部改变 iconCls 配置项的值。
参数:
  • cls : String
    提供图标图片的CSS类
返回值:
  • Ext.Button
    this
Button
setPagePosition ( Number x , Number y ) : Ext.BoxComponent
设置组件在页面中的XY位置。 如果需要设置left和top值 ，请使用...
设置组件在页面中的XY位置。 如果需要设置left和top值 ，请使用setPosition方法。 该方法触发move事件。
参数:
  • x : Number
    The new x position
  • y : Number
    The new y position
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setPosition ( Number left , Number top ) : Ext.BoxComponent
设置组件的left和top值。设置组件的页面XY值，请使用setPagePosition方法。该方法触发...
设置组件的left和top值。设置组件的页面XY值，请使用setPagePosition方法。该方法触发move事件。
参数:
  • left : Number
    The new left
  • top : Number
    The new top
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setSize ( Mixed width , Mixed height ) : Ext.BoxComponent
设置BoxComponent的宽度和高度。 此方法触发resize事件...
设置BoxComponent的宽度和高度。 此方法触发resize事件。此方法可以接收单独的width或者height值作为参数， 或者你可以传递像这样的一个size对象： {width:10, height:20} 。
参数:
  • width : Mixed
    设置的新的width值。这可以是：
    • 一个Number类型指定Element新的宽度 Ext.Element.defaultUnit(默认为像素 :'px')。
    • 一个String类型用于设置width的CSS样式。
    • 一个size对象格式为 {width: widthValue, height: heightValue} 。
    • 值为 undefined 时，保留原来的width不变。
  • height : Mixed
    设置的新的height值(如果第一个参数传递了一个size对象，此参数没有必要传递)。这可以是：
    • 一个Number类型指定Element新的高度 Ext.Element.defaultUnit(默认为像素 :'px')。
    • 一个String类型用于设置height的CSS样式。也有可能不会被使用到。
    • 值为 undefined 时，保留原来的height不变。
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setText ( String text ) : Ext.Button
设置按钮的文本
Sets this Button's text
参数:
  • text : String
    按钮文本
返回值:
  • Ext.Button
    this
Button
setTooltip ( String/Object tooltip. ) : Ext.Button
设置这个按钮的提示信息。
Sets the tooltip for this Button.
参数:
  • tooltip. : String/Object
    This may be:
    • String : 按照innerHTML（接受html标签）显示的字符串。
    • Object : Ext.QuickTips.register的配置对象。
返回值:
  • Ext.Button
    this
Button
setVisible ( Boolean visible ) : Ext.Component
工具方法，通过使用布尔值隐藏或者显示当前组件。
工具方法，通过使用布尔值隐藏或者显示当前组件。
参数:
  • visible : Boolean
    true时显示，false时隐藏
返回值:
  • Ext.Component
    this
Component
setWidth ( Mixed width ) : Ext.BoxComponent
设置组件的宽度。 此方法触发resize事件。
设置组件的宽度。 此方法触发resize事件。
参数:
  • width : Mixed
    The new width to set.
返回值:
  • Ext.BoxComponent
    this
BoxComponent
show () : Ext.Component
显示当前组件。监听' beforeshow' 事件，返回 false 取消显示组件...
显示当前组件。监听' beforeshow' 事件，返回 false 取消显示组件。在显示组件之后触发' show' 事件。
参数:
  • 无。
返回值:
  • Ext.Component
    this
Component
showMenu () : void
显示当前按钮的菜单（如果有的话）
显示当前按钮的菜单（如果有的话）
参数:
  • 无。
返回值:
  • void
Button
suspendEvents( Boolean queueSuspended ) : void
暂停触发所有的事件。 (参看resumeEvents)
暂停触发所有的事件。（参看 resumeEvents)
参数:
  • queueSuspended : Boolean
    如果传递为true则排列好暂停的事件使得在调用 resumeEvents 后再触发它们，而不是抛弃所有暂停的事件。
返回值:
  • void
Observable
syncSize () : Ext.BoxComponent
强制组件的大小按照此组件底层元素当前的高度和宽度计算。
强制组件的大小按照此组件底层元素当前的高度和宽度计算。
参数:
  • 无。
返回值:
  • Ext.BoxComponent
    this
BoxComponent
toggle ( [ Boolean state ], [ Boolean supressEvent ] ) : Ext.Button
如果传递了一个状态，它将成为按钮当前的按下状态，除非当前的状态被固定了。
如果传递了一个状态，它将成为按钮当前的按下状态，除非当前的状态被固定了。
参数:
  • state : Boolean
    可选 强制设为一个指定的状态
  • supressEvent : Boolean
    可选 如果为true，在调用这个方法时将阻止事件触发。
返回值:
  • Ext.Button
    this
Button
toggleSelected () : void
一般情况下，此方法在按钮被点击时在内部调用，但是也可以从外部调用...
一般情况下，此方法在按钮被点击时在内部调用，但是也可以从外部调用，以便用程序将按钮的活动项更新到菜单中的下一项。如果当前项目是菜单的最后一项，活动项将被设置为菜单中的第一项。
参数:
  • 无。
返回值:
  • void
CycleButton
un( String eventName, Function handler, [Object scope] ) : void
删除一个事件处理器(removeListener方法的简写形式)
删除一个事件处理器(removeListener方法的简写形式。)
参数:
  • eventName : String
    处理器关联的事件类型
  • handler : Function
    被删除的处理器 这应该是传入 addListener 中的方法的引用。
  • scope : Object
    （可选）为处理器指定的初始作用域。
返回值:
  • void
Observable
update ( Mixed htmlOrData , [ Boolean loadScripts ], [ Function callback ] ) : void
刷新组件的内部区域。
刷新组件的内部区域。
参数:
  • htmlOrData : Mixed
    如果已经通过tpl为当前组件配置了一个模板，那么 将会使用此参数来装配模板。 如果没有为当前组件配置模板，组件的内容区域将会通过Ext.Element 进行刷新。
  • loadScripts : Boolean
    (可选)只用在使用html配置时此参数才合法。默认为false。
  • callback : Function
    (可选)只用在使用html配置时此参数才合法。 当脚本加载完成时回调函数才被执行。
返回值:
  • void
Component
updateBox ( Object box ) : Ext.BoxComponent
设置此组件底层元素的盒子模型尺寸。(译者注：盒子模型是CSS术语，详细资料请自行搜索。)
设置此组件底层元素的盒子模型尺寸。(译者注：盒子模型是CSS术语，详细资料请自行搜索。)
参数:
  • box : Object
    一个格式为{x, y, width, height}的对象
返回值:
  • Ext.BoxComponent
    this
BoxComponent

公共事件

Event Defined By
added : ( Ext.Component this , Ext.Container ownerCt , number index )
当一个组件被添加到一个Ext.Container时触发
当一个组件被添加到一个Ext.Container时触发
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • ownerCt : Ext.Container
    用于组件的容器
  • index : number
    添加组件的位置
Component
afterrender : ( Ext.Component this )
在组件渲染完成之后触发...

在组件渲染完成之后触发。

afterrender事件在当前组件被rendered 结束之后、在为组件定义的所有afterRender方法执行之后 触发，并且，如果有stateful， 也在状态被保存之后才触发。

监听器将会以如下参数格式被调用:
  • this : Ext.Component
Component
arrowclick : ( MenuButton this , EventObject e )
当按钮上的箭头被点击时触发
当按钮上的箭头被点击时触发
监听器将会以如下的参数格式调用:
  • this : MenuButton
  • e : EventObject
    点击事件
SplitButton
beforedestroy : ( Ext.Component this )
在组件 destroyed 之前触发。 在事件监听器中返回false以停止 destroy 操作。
在组件 destroyed 之前触发。 在事件监听器中返回false以停止 destroy 操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforehide : ( Ext.Component this )
在调用hide方法隐藏组件之前触发。 在事件监听器中返回false可以停止隐藏操作。
在调用hide方法隐藏组件之前触发。 在事件监听器中返回false可以停止隐藏操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforerender : ( Ext.Component this )
在组件被rendered 之前触发。 在事件监听器中返回false可以停止render 操作。
在组件被rendered 之前触发。 在事件监听器中返回false可以停止render 操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforeshow : ( Ext.Component this )
在调用show()方法现实组件之前触发。 事件处理函数返回false可以停止show。
在调用show 方法现实组件之前触发。 事件处理函数返回false可以停止show。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforestaterestore : ( Ext.Component this , Object state )
在组件状态恢复之前触发。返回false停止恢复状态操作。
在组件状态恢复之前触发。返回false停止恢复状态操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    StateProvider返回的状态哈希值。 如果没有禁止此事件，那么状态对象会被传递给applyState。 默认情况下，这样简单地把属性值拷贝到当前组件中。 可以覆盖此方法以提供自定的状态恢复操作。
Component
beforestatesave : ( Ext.Component this , Object state )
在组件状态被保存到配置的状态提供者之前触发。 返回false可以停止保存。
在组件状态被保存到配置的状态提供者之前触发。 返回false可以停止保存。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    状态值哈希。 这由在组件上调用getState() 方法决定。 此方法必须由开发者提供，返回是否需要对状态进行描述，默认情况下， Ext.Component有一个空实现。
Component
change : ( Ext.CycleButton this , Ext.menu.CheckItem item )
当按钮的菜单项发生改变时触发。 注意：如果为当前CycleButton设置了一个changeHandler函数...
当按钮的菜单项发生改变时触发。 注意：如果为当前CycleButton设置了一个 changeHandler 函数,在活动项目发生变化时将调用它作为替代，并且此change事件不会被触发。
Listeners will be 调用参数如下:
  • this : Ext.CycleButton
  • item : Ext.menu.CheckItem
    选择的菜单项
CycleButton
click : ( Button this , EventObject e )
当按钮被点击时触发
当按钮被点击时触发
监听器将会以如下的参数格式调用:
  • this : Button
  • e : EventObject
    点击事件
Button
destroy : ( Ext.Component this )
在组件被销毁之后触发。
在组件被destroyed之后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
disable : ( Ext.Component this )
在组件被设置为无效状态后触发。
在组件被设置为无效状态后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
enable : ( Ext.Component this )
当组件被设置为有效(enabled)之后触发。
当组件被设置为有效(enabled)之后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
hide : ( Ext.Component this )
在组件被隐藏之后触发。 当调用hide 方法隐藏组件之后触发。
在组件被隐藏之后触发。 当调用hide 方法隐藏组件之后触发。
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
menuhide : ( Button this , Menu menu )
如果按钮有菜单，这个事件在它隐藏时触发。
如果按钮有菜单，这个事件在它隐藏时触发。
监听函数传递如下参数：
  • this : Button
  • menu : Menu
Button
menushow : ( Button this , Menu menu )
如果当前按钮有一个菜单，当显示此菜单时触发此事件。
如果当前按钮有一个菜单，当显示此菜单时触发此事件。
监听器将会以如下的参数格式调用:
  • this : Button
  • menu : Menu
Button
menutriggerout : ( Button this , Menu menu , EventObject e )
如果当前按钮有一个菜单，当鼠标离开菜单触发元素范围时触发此事件。
如果当前按钮有一个菜单，当鼠标离开菜单触发元素范围时触发此事件。
监听器将会以如下的参数格式调用:
  • this : Button
  • menu : Menu
  • e : EventObject
Button
menutriggerover : ( Button this , Menu menu , EventObject e )
如果当前按钮有一个菜单，当鼠标进入菜单触发元素范围时触发此事件。
如果当前按钮有一个菜单，当鼠标进入菜单触发元素范围时触发此事件。
监听器将会以如下的参数格式调用:
  • this : Button
  • menu : Menu
  • e : EventObject
Button
mouseout : ( Button this , Event e )
当鼠标离开按钮时触发
当鼠标离开按钮时触发
监听器将会以如下的参数格式调用:
  • this : Button
  • e : Event
    事件对象
Button
mouseover : ( Button this , Event e )
当鼠标滑过按钮时触发
当鼠标滑过按钮时触发
监听器将会以如下的参数格式调用:
  • this : Button
  • e : Event
    事件对象
Button
move : ( Ext.Component this , Number x , Number y )
在组件移动之后触发。
在组件移动之后触发。
监听器将会用如下的参数格式来调用:
  • this : Ext.Component
  • x : Number
    The new x position
  • y : Number
    The new y position
BoxComponent
removed : ( Ext.Component this , Ext.Container ownerCt )
当一个组件被从Ext.Container容器中删除时触发
当一个组件被从Ext.Container容器中删除时触发
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • ownerCt : Ext.Container
    持有组件的容器
Component
render : ( Ext.Component this )
在组件被渲染之后触发。
在组件被 rendered(渲染) 之后触发。
监听器将以如下的参数格式被调用:
  • this : Ext.Component
Component
resize : ( Ext.Component this , Number adjWidth , Number adjHeight , Number rawWidth , Number rawHeight )
在组件被调整大小之后触发。
在组件被调整大小之后触发。
监听器将以如下的参数格式被调用:
  • this : Ext.Component
  • adjWidth : Number
    这是width调整后的值
  • adjHeight : Number
    这是height调整后的值
  • rawWidth : Number
    这是width原来的值
  • rawHeight : Number
    这是height原来的值
BoxComponent
show : ( Ext.Component this )
在调用show 方法显示组件之后触发。
在调用show 方法显示组件之后触发。
监听器将会用如下的参数格式被调用:
  • this : Ext.Component
Component
staterestore : ( Ext.Component this , Object state )
组件状态被存储之后触发。
组件状态被存储之后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    StateProvider返回的状态哈希值。 如果没有禁止此事件，那么状态对象会被传递给applyState。 默认情况下，这样简单地把属性值拷贝到当前组件中。 可以覆盖此方法以提供自定的状态恢复操作。
Component
statesave : ( Ext.Component this , Object state )
在组件状态被保存到所配置的状态提供者之后触发。
在组件状态被保存到所配置的状态提供者之后触发。
监听器将会用如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    状态值hash。 这是由在足见上调用getState() 方法决定的。 开发者必须提供此方法以返回是否需要恢复状态，默认情况下， Ext.Component有一个空实现。
Component
toggle : ( Button this , Boolean pressed )
当‘pressed’状态发生变化时触发（当enableToggle = true）
当‘pressed’状态发生变化时触发（当enableToggle = true）
监听函数被调用时传递以下参数:
  • this : Button
  • pressed : Boolean
Button


Error
    Api.Error

Class Ext.data.Api.Error

包: | Ext.data
定义类的文件: | Api.js
类: | Api.Error
继承自: | Error
Ext.data.Api的错误类

公共属性

该类没有公共属性。

公共方法

Method Defined By
getMessage () : String
getMessage
getMessage
参数:
  • 无。
返回值:
  • String
Error
getName () : String
getName
getName
参数:
  • 无。
返回值:
  • String
Error
toJson () : String
toJson
toJson
参数:
  • 无。
返回值:
  • String
Error

公共事件

该类没有公共事件。


Class Ext.data.Api

包: | Ext.data
定义类的文件: | Api.js
类: | Api
继承自: | Object
为了确保开发者的DataProxy API的正确使用，我们定义了Ext.data.Api的单例来管理这些数据的API。 除了创建、读取、更新、销毁这四种CRUD操作进行了定义之外，还分别将这些操作映射到了RESTful的 HTTP方法：GET、POST、PUT和DELETE。

这个类使用的是单例模式，不能被直接创建。

公共属性

Property Defined By
actions : Object
定义远程动作所关联的本地动作: actions: { create : 'create', // 表示服务器端的......
定义远程动作所关联的本地动作:
actions: {
    create  : 'create',  // 表示位于服务器端创建记录所执行的动作。
    read    : 'read',    // 表示位于服务器端读取/加载数据所执行的动作。
    update  : 'update',  // 表示位于服务器端更新记录所执行的动作。
    destroy : 'destroy'  // 表示位于服务器端销毁记录所执行的动作。
}
Api
restActions : Object
将http方法与关联的动作定义在一起的{CRUD action}:{HTTP method}的结对，将用于 RESTful proxies的时候。默认为......
将http方法与关联的动作定义在一起的{CRUD action}:{HTTP method}的结对，将用于 RESTful proxies的时候。默认为：
restActions : {
    create  : 'POST',
    read    : 'GET',
    update  : 'PUT',
    destroy : 'DELETE'
},
Api

公共方法

Method Defined By
Response () : void
Ext.data.Response 实例。不能直接使用。
Ext.data.Response 实例。不能直接使用。
参数:
  • 无。
返回值:
  • void
Api
getVerb ( String name ) : String||null
返回实际的CRUD操作键值，根据传入的动作名称辨认出实际的"create", "read", "update" 或者 "destroy"操作类型。该方法......
返回实际的CRUD操作键值，根据传入的动作名称辨认出实际的"create", "read", "update" 或者 "destroy"操作类型。一般来说该方法是内置使用的，不会直接地 调用它。Ext.data.Api.actions的key/valye结对是相同无异议的，但是也不 一定的说。有需要的华，开发者可允许覆盖约定的名称。不过，框架内部依据KEY来调 用方法的，因此就需要某种方式取得"create", "read", "update" 和 "destroy" 关键字才可以。如果发现KEYS已被缓存在validActions中，那么就直接从该缓存中返回。
参数:
  • name : String
    该action运行时的名称。
返回值:
  • String||null
    如果无效返回null，否则返回action-key或user-action。
Api
hasUniqueUrl ( Ext.data.DataProxy proxy , String verb ) : Boolean
在传入的proxy在一个原来唯一 的proxy地址的时候，并没有其他API动作染指的时候， 返回true......
在传入的proxy在一个原来唯一 的proxy地址的时候，并没有其他API动作染指的时候， 返回true。当决定是否插入"xaction"的HTTP参数到某个Ajax请求的时候，这个问题 就显得重要了。一般来说该方法是内置使用的，不会直接地调用它。
参数:
  • proxy : Ext.data.DataProxy
  • verb : String
返回值:
  • Boolean
Api
isAction ( String action ) : Boolean
如果传入的动作名称参数是API action定义的actions常量，就返回true。
如果传入的动作名称参数是API action定义的 actions 常量，就返回true。
参数:
  • action : String
    测试Action的可用性
返回值:
  • Boolean
Api
isValid () : String[]|true
如果传入的API是有效的就返回true；这样的华，同时检查到预定义没的动作，就会传 入到数组中，最后返回（错误的动作）。
如果传入的API是有效的就返回true；这样的华，同时检查到预定义没的动作，就会传 入到数组中，最后返回（错误的动作）。
参数:
  • 无。
返回值:
  • String[]|true
Api
prepare ( Ext.data.DataProxy proxy ) : void
该方法由DataProxy内部使用，一般不要直接使用。每个DataProxy API的动作......
该方法由 DataProxy 内部使用，一般不宜直接使用。内部定义时，每个DataProxy API的动作可以是String或 是Object。当定义为Object的时候，就可以为其中的CRUD操作精确指定是哪一种HTTP方法 （GET、POST......）。该方法会初始化传入的API，将每一项的操作转换为Object的形式。 如果你传入的API-actions没有设定HTTP方法的话，那么"method"所指定的配置项就是默认 的方法。如果连method的配置项目都没指定的话，那么就使用POST为默认的HTTP方法

new Ext.data.HttpProxy({
    method: "POST",     // <-- 没有指定时， HTTP方法默认使用"POST".
    api: {
        create: 'create.php',
        load: 'read.php',
        save: 'save.php',
        destroy: 'destroy.php'
    }
});

// 当然，你也可以通过对象的形式进行配置
new Ext.data.HttpProxy({
    api: {
        load: {url: 'read.php', method: 'GET'},
        create: 'create.php',
        destroy: 'destroy.php',
        save: 'update.php'
    }
});
参数:
  • proxy : Ext.data.DataProxy
返回值:
  • void
Api
restify ( Ext.data.DataProxy proxy ) : void
初始化Proxy，让其成为RESTful的. 可为每个api-action设置HTTP方法 （GET，POST，PUT，DELETE......的任意一种）
初始化Proxy，让其成为RESTful的. 可根据restActions的值为每个api-action 设置HTTP方法（GET，POST，PUT，DELETE......的任意一种） restActions.
参数:
  • proxy : Ext.data.DataProxy
返回值:
  • void
Api

公共事件

该类没有公共事件。


DataReader
    JsonReader
      ArrayReader

Class Ext.data.ArrayReader

包: | Ext.data
定义类的文件: | ArrayReader.js
类: | ArrayReader
继承自: | JsonReader

数据reader类， 用来从一个数组中创建 Ext.data.Record 对象数组。 数组中的每个元素描述了一行数据字段。 这些字段被拉入一条Record对象，被用作subscript， 字段定义的 mapping 属性，如果存在的话， 或者在定义中的字段位置顺序。

示例代码:

var Employee = Ext.data.Record.create([
    {name: 'name', mapping: 1},         // 如果存在一个"id"字段时"mapping"才是必须的
    {name: 'occupation', mapping: 2}    // 使用原有的位置作为索引排除它。
]);
var myReader = new Ext.data.ArrayReader({
    idIndex: 0
}, Employee);

这将消耗一个这样的数组:

[ [1, 'Bill', 'Gardener'], [2, 'Ben', 'Horticulturalist'] ]

配置项

Config Options |  | Defined By
 | fields : Array/Object 要么是一个Field 对象定义数组(将会被传递给 Ext.data.Record.create)， 或者是一个使用... 要么是一个Field 对象定义数组(将会被传递给 Ext.data.Record.create)， 或者是一个使用 Ext.data.Record.create 创建的 Record 构造函数。 | DataReader
 | id : Number 数据行数组内部下方，为Record提供一个ID。 已国企。 使用 idIndex 代替。 | ArrayReader
 | idIndex : Number 数据行内部的下标，为Record提供一个ID。 | ArrayReader
 | idProperty : String [id]一个数据对象的参数名，它包含了一条记录的标识符。 默认为 id | JsonReader
 | messageProperty : String [undefined] 服务端响应中一个可选的参数名，描述了一个用户反馈的消息。 | DataReader
 | root : String [undefined] 必须。 包含了原始数据对象数组的参数名称。默认为 undefined。 如果root参数... [undefined] 必须。 包含了原始数据对象数组的参数名称。默认为 undefined。 如果root参数为undefined，将会抛出一个异常。 需要清除数据或者不展示任何数据时， 此参数的数据值必须是一个空数组。 | JsonReader
 | totalProperty : String [total]参数名，通过它可以获得数据集记录总数。 只有在数据集不是一次被加载... [total]参数名，通过它可以获得数据集记录总数。 只有在数据集不是一次被加载，而是在远程服务器分页 时此参数才是必须的。默认为 total。 | JsonReader

公共属性

Property |  | Defined By
 | buildExtractors : Object 抽象防范，将会在DataReader的继承类例如 Ext.data.JsonReader 和 Ext.data.XmlReader中被覆盖。 | DataReader
 | extractValues : Object 抽象方法，在DataReader的实现类，例如 Ext.data.JsonReader 和 Ext.data.XmlReader 中被覆盖 | DataReader
 | getId : Object 在继承的buildExtractors实现中创建的抽象方法。 | DataReader
 | getMessage : Object 在buildExtractors实现中创建的抽象方法。 | DataReader
 | getRoot : Object 在buildExtractors实现中创建的抽象方法。 | DataReader
 | getSuccess : Object 抽象方法，在子类的buildExtractors中实现。 | DataReader
 | getTotal : Object 在buildExtractors实现中创建的抽象方法。 | DataReader
 | jsonData : Object 在任何数据加载之后，原始的JSON数据可以在客户端进一步处理。... 在任何数据加载之后，原始的JSON数据可以在客户端进一步处理。 如果没有数据被加载或者出现了一个加载异常，此参数将会为undefined。 | JsonReader
 | meta : Mixed DataReader所配置的元数据，被传递给构造函数。 | JsonReader

公共方法

Method Defined By
ArrayReader ( Object meta , Array/Object recordType )
创建一个新的ArrayReader
创建一个新的ArrayReader
参数:
  • meta : Object
    元数据配置选项。
  • recordType : Array/Object

    要么是一个 Field 定义对象数组( 将会被传递给 Ext.data.Record.create ) 或者是一个用 Ext.data.Record.create 创建的 Record 构造器。

返回值:
  • void
ArrayReader
isData ( Object data ) : Boolean
如果提供的数据hash看起来 并且叫起来 像数据，此值为ture...
如果提供的数据hash看起来 并且叫起来 像数据，此值为ture。(译者注：有一句E文成语说"If it looks like a duck and it quacks like a duck,it is a duck."意思是说，如果一个东西看起来像一只鸭子 并且叫起来也像一只鸭子，那么它就是一只鸭子。这里的意思是说，如果提供的hash对象 就像数据。) 在你的DataReader配置项中检查，是否有一个对应到的idProperty的key 包含非空主键。
参数:
  • data : Object
返回值:
  • Boolean
DataReader
read ( Object response ) : Object
此方法只被DataProxy调用，它拥有从远程服务器获取的数据。
此方法只被DataProxy调用，它拥有从远程服务器获取的数据。
参数:
  • response : Object
    XHR对象，在它的responseText参数中包含JSON数据。
返回值:
  • Object
    data 一个被Ext.data.Store对象使用的数据块，被缓存为 Ext.data.Record。
JsonReader
readRecords ( Object o ) : Object
从一个数组创建一个包含Ext.data.Record的数据块。
从一个数组创建一个包含Ext.data.Record的数据块。
参数:
  • o : Object
    用来描述数据集的行数据数组。
返回值:
  • Object
    data 一个数据块，被Ext.data.Store对象用来 缓存Ext.data.Record。
ArrayReader
readResponse ( String action , Object response ) : Response
解析来自服务器的JSON响应。
解析来自服务器的JSON响应。
参数:
  • action : String
    [Ext.data.Api.actions.create|read|update|destroy]
  • response : Object
    通过对服务器的一次Ajax请求返回的XHR对象。
返回值:
  • Response
    一个包含数据响应的{@link Ext.data.Response Response}对象， 以及状态信息。
JsonReader
realize ( Record/Record[] record , Object/Object[] data ) : void
被用作在成功插入数据库之后将一条数据变成“非模拟的”。 连同来自服务端的新数据一起，设置记录的主键...
被用作在成功插入数据库之后将一条数据变成“非模拟的”。 连同来自服务端的新数据一起，设置记录的主键。 你必须至少返回数据库主键，使用你的DataReader中 配置的idProperty属性。 来自服务端的数据将会与本地的记录进行合并。 另外， 你返回的记录数据必须与来自服务器的数据顺序一致。 最好进行一次commit操作，消除“脏字段”的标记。 Store的"update"事件将会被禁止。
参数:
  • record : Record/Record[]
    需要变成实现的模拟数据。
  • data : Object/Object[]
    需要应用的新record数据。 必须包含来自数据库的主键，它是在idProperty字段中定义的。
返回值:
  • void
DataReader
update ( Record/Record[] rs , Object/Object[] data ) : void
在远端保存之后，使用来自服务器的新数据更新一条“非模拟”或者说“真实”记录的数据。...
在远端保存之后，使用来自服务器的新数据更新一条“非模拟”或者说“真实”记录的数据。 如果在一次“批量更新”之后返回多条记录， 你从服务器返回的记录数据必须与已经接受到的数据顺序一致。 最好进行一次commit操作，消除“脏字段”的标记。 Store的"update"事件将会被禁止，因为记录接收到了新的数据hash。
参数:
  • rs : Record/Record[]
  • data : Object/Object[]
返回值:
  • void
DataReader

公共事件

该类没有公共事件。


Observable
    Store
      ArrayStore

Class Ext.data.ArrayStore

包: | Ext.data
定义类的文件: | ArrayStore.js
类: | ArrayStore
继承自: | Store

原来被称作"SimpleStore"。

一个小工具类， 使得从数组型数据创建 Ext.data.Stores 更方便。 ArrayStore自动被配置使用 Ext.data.ArrayReader。

Store的配置就像如下代码所示:

var store = new Ext.data.ArrayStore({
    // store configs
    autoDestroy: true,
    storeId: 'myStore',
    // reader configs
    idIndex: 0,
    fields: [
       'company',
       {name: 'price', type: 'float'},
       {name: 'change', type: 'float'},
       {name: 'pctChange', type: 'float'},
       {name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
    ]
});

此Store被配置用来解析如下格式的对象:

var myData = [
    ['3m Co',71.72,0.02,0.03,'9/1 12:00am'],
    ['Alcoa Inc',29.01,0.42,1.47,'9/1 12:00am'],
    ['Boeing Co.',75.43,0.53,0.71,'9/1 12:00am'],
    ['Hewlett-Packard Co.',36.53,-0.03,-0.08,'9/1 12:00am'],
    ['Wal-Mart Stores, Inc.',45.45,0.73,1.63,'9/1 12:00am']
];
一个符合此格式的字符串也可以用作 data 配置项。

*注意: 尽管没有在此处列出，该类也可以接受所有 ArrayReader 的配置选项。

配置项

Config Options Defined By
autoDestroy : Boolean
如果此参数为true，当绑定此store的组件被销毁之后此store也会...
如果此参数为true，当绑定此store的组件被销毁之后此store也会被销毁 (默认为 false)。

注意: 当store被仅仅绑定到一个组件时，应该把此参数设置成true。

Store
autoLoad : Boolean/Object
如果没有指定 data 参数，并且 autoLoad参数为 true或者为一个Object， store的...
如果没有指定 data 参数，并且 autoLoad参数为 true或者是一个对象(Object)， store的 load 方法将会在创建之后自动被调用。 如果autoLoad的值是一个对象(Object)， 此对象将会被传递给store的 load 方法。
Store
autoSave : Boolean
默认为true 将导致在一条记录被修改(例如: 变脏('dirty'))之后store自动地把记录...

默认为true 将导致在一条记录被修改(例如: 变脏('dirty'))之后store自动地把记录 save 到服务器端。 指定为false可以手动把所有修改的记录 save 到服务端。

注意: CRUD操作将会作为单独的请求发送。

Store
baseParams : Object
此参数的描述参见 corresponding 配置项 。 如需修改此参数，参见 setBaseParam 。
此参数的描述参见 corresponding 配置项 。 如需修改此参数，参见 setBaseParam 。
Store
batch : Boolean
默认为 true (除非 restful:true )。 每个CRUD操作的多次请求 (CREATE, READ, UPDATE...

默认为 true (除非 restful:true )。 每个CRUD操作的多次请求 (CREATE, READ, UPDATE 和 DESTROY)将会被合在一起并且作为一次事务发送出去。 只有在 autoSave 参数被设置成 false时应用。

如果Store是安静模式(RESTful)，DataProxy也是安静的(RESTful)， 这样会为每条记录创建一个独立的事务。

Store
data : Array
一个内嵌的数据对象，可以被 reader 读取。 典型情况下，指定此选项，或者 url 选项。
Store
defaultParamNames : Object
为 paramNames 提供默认值。 如需在全局范围修改所有store的参数...
为 paramNames 提供默认值。 如需在全局范围修改所有store的参数，必须在store的prototype上 修改此对象。
Store
listeners : Object
一个包含一个或多个事件处理器的配置对象，会在初始化的时候被添加到目标对象上...

一个包含一个或多个事件处理器的配置对象，会在初始化的时候被添加到目标对象上。 该配置对象应该是一个有效的监听器配置对象就像 addListener例子中指定的一样可一次附加多个处理器。

ExtJs Components上的DOM事件

一些 ExtJs Component 类导出时会选择一些DOM事件(例如 "click", "mouseover" 等等), 这通常只是在有额外的值可以被添加时发生。例如DataView类的 click事件会传递被点击的节点。也可以直接在Component的HTMLElementevent上访问DOM事件，但必需在Component被渲染后监听器才能添加到Element 上。可以按照以下步骤添加插件:

// 插件会用一个监听器配置对象进行配置。
//该组件会被添加到所有处理方法的参数列表上。
Ext.DomObserver = Ext.extend(Object, {
    constructor: function(config) {
        this.listeners = config.listeners ? config.listeners : config;
    },

    // 组件将自己传递进了插件的初始化方法里
    init: function(c) {
        var p, l = this.listeners;
        for (p in l) {
            if (Ext.isFunction(l[p])) {
                l[p] = this.createHandler(l[p], c);
            } else {
                l[p].fn = this.createHandler(l[p].fn, c);
            }
        }

        // 渲染后立即添加监听器到元素上
        c.render = c.render.createSequence(function() {
            var e = c.getEl();
            if (e) {
                e.on(l);
            }
        });
    },

    createHandler: function(fn, c) {
        return function(e) {
            fn.call(this, e, c);
        };
    }
});

var combo = new Ext.form.ComboBox({

    // 元素被点击后折叠
    plugins: [ new Ext.DomObserver({
        click: function(evt, comp) {
            comp.collapse();
        }
    })],
    store: myStore,
    typeAhead: true,
    mode: 'local',
    triggerAction: 'all'
});

Observable
paramNames : Object
一个包含多个属性的对象，指定了分页和排序参数的名称，在加载数据时被传递给...

一个包含多个属性的对象，指定了分页和排序参数的名称，在加载数据时被传递给 远程服务器。 默认情况下，此对象拥有如下格式:

{
    start : 'start',  // 指定起始行的参数名
    limit : 'limit',  // 指定返回数据条数的参数名
    sort : 'sort',    // 指定排序字段的参数名
    dir : 'dir'       // 指定排序方向的参数名
}

服务器必须根据收到的这些参数名创建所请求的数据块。 如果需要不同的参数名称，可以使用配置项覆盖这些参数。

绑定到当前Store的 PagingToolbar ，使用此参数指定 它的requests 中的参数名称。

Store
proxy : Ext.data.DataProxy
DataProxy 对象，它提供对数据对象的访问。 参见 url 。
Store
pruneModifiedRecords : Boolean
此值为true将在 store被加载或者一条记录被删除时 清除所有记录的修改信息(默认为...
此值为true将在 store被加载或者一条记录被删除时 清除所有记录的修改信息(默认为 false)。参见 getModifiedRecords 的访问函数(指getter/setter)以获得修改的记录。
Store
remoteSort : boolean
如果此参数为true，处理排序操作的方式是，通过请求 Proxy 提供一个数据已经排好顺序的版本...
如果此参数为true，处理排序操作的方式是，通过请求 Proxy 提供一个数据已经排好顺序的版本， 而不是在缓存中对记录进行排序(默认为 false)。

如果remoteSort 为 true 那么在一个Grid Column的 header 被点击时，将会从服务器请求当前页面，并且在 params 中添加如下两个参数:

  • sort : String

    需要排序的字段名 (就像在Record的 Field definition中指定的那样)。

  • dir : String

    排列的方向，'ASC' 或者 'DESC' (大小写敏感)。

Store
restful : Boolean
默认为false。 设置为true 将会使Store和Proxy的操作以安静(RESTful)的状态进行...
默认为false。 设置为true 将会使Store和Proxy的操作以安静(RESTful)的状态进行。 store将会自动生成到服务器的GET, POST, PUT 和 DELETE 请求。 任何给定CRUD操作的HTTP方式(method)都在 Ext.data.Api.restActions 有描述。 附加信息参见 Ext.data.DataProxy.restful。

注意: 如果 restful:true 将会隐含设置为 批处理(batch) 。默认为 false。

Store
sortInfo : Object
一个配置对象，指定Store请求数据时load 操作的排序规则。 注意，对于本地排序...
一个配置对象，指定Store请求数据时load 操作的排序规则。 注意，对于本地排序，direction参数是大小写敏感的。 另请参见 remoteSort 和 paramNames。 例如:
sortInfo: {
    field: 'fieldName',
    direction: 'ASC' // or 'DESC' (case sensitive for local sorting)
}
Store
storeId : String
如果传递此参数，此id将会使用StoreMgr 进行注册。...
如果传递此参数，此id将会使用StoreMgr 进行注册。

注意: 如果指定了一个 id (不建议) 它将会取代分配的storeId。

Store
url : String
如果没有指定 proxy ，此url将会被用来隐含配置一个...
如果没有指定 proxy ，此url将会被用来隐含配置一个 HttpProxy 。 典型情况下要么指定此选项，要么指定 data 选项。
Store
writer : Ext.data.DataWriter
Writer 对象负责处理record对象，它们将会被写入服务端数据库。...

Writer 对象负责处理record对象，它们将会被写入服务端数据库。

如果writer被配置到Store中， store的 add, remove,和 update 事件将会被监听，以便在远端 创建记录, 销毁记录, 或者 更新记录。

store的proxy将会把所有 writexception 事件转播给当前store

示例实现:

var writer = new Ext.data.JsonWriter({
    encode: true,
    writeAllFields: true // 写入所有字段，而不仅仅是那些发生变化的字段
});

// 典型的Store，包含了Proxy,Reader和Writer
var store = new Ext.data.Store({
    storeId: 'user',
    root: 'records',
    proxy: proxy,
    reader: reader,
    writer: writer,     // <--在store中插入一个DataWriter就像你插入一个Reader
    paramsAsHash: true,
    autoSave: false    // <-- false讲延迟执行create, update, destroy请求
                       //直到被特别指定如此做。
});

Store

公共属性

Property Defined By
baseParams : Object
此参数的描述参见 corresponding 配置项 。 如需修改此参数，参见 setBaseParam 。
此参数的描述参见 corresponding 配置项 。 如需修改此参数，参见 setBaseParam 。
Store
fields : Ext.util.MixedCollection
一个MixedCollection，包含了Store中 Records 的字段(Fields)定义。
Store
hasMultiSort : Boolean 如果store当前使用多个field/direction联合排序，此值为true。
Store
isDestroyed : Boolean 如果store已经被销毁，此值为true。只读。
Store
lastOptions : Object
包含 load 方法最近一次使用的配置参数对象。 此参数所包含的内容详情...
包含 load 方法最近一次使用的配置参数对象。 此参数所包含的内容详情，参见 load 方法。对访问加载当前Record缓存时所使用的所有参数来说，此属性非常有用。
Store
multiSortInfo : Object 包含所有排序方向，以及在对多个字段进行排序时使用的排序配置的对象。
Store
recordType : Function
为 Reader 提供的(或者创建的) Record 构造函数。只读。...
为 Reader 提供的(或者创建的) Record 构造函数。只读。

如果Reader是通过传递一个 Ext.data.Field 定义对象数组来构造的， 他将隐含地从这个数组 创建一个Record的构造器。 (附加信息参见 Ext.data.Record. create)。

此参数可被用来在Store中创建指定类型的Record，例如:

// 创建数据缓存(data store)
    var store = new Ext.data.ArrayStore({
        autoDestroy: true,
        fields: [
           {name: 'company'},
           {name: 'price', type: 'float'},
           {name: 'change', type: 'float'},
           {name: 'pctChange', type: 'float'},
           {name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
        ]
    });
    store.loadData(myData);

    // 创建Grid
    var grid = new Ext.grid.EditorGridPanel({
        store: store,
        colModel: new Ext.grid.ColumnModel({
            columns: [
                {id:'company', header: 'Company', width: 160, dataIndex: 'company'},
                {header: 'Price', renderer: 'usMoney', dataIndex: 'price'},
                {header: 'Change', renderer: change, dataIndex: 'change'},
                {header: '% Change', renderer: pctChange, dataIndex: 'pctChange'},
                {header: 'Last Updated', width: 85,
                    renderer: Ext.util.Format.dateRenderer('m/d/Y'),
                    dataIndex: 'lastChange'}
            ],
            defaults: {
                sortable: true,
                width: 75
            }
        }),
        autoExpandColumn: 'company', // 与column model中指定的id对应
        height:350,
        width:600,
        title:'Array Grid',
        tbar: [{
            text: 'Add Record',
            handler : function(){
                var defaultData = {
                    change: 0,
                    company: 'New Company',
                    lastChange: (new Date()).clearTime(),
                    pctChange: 0,
                    price: 10
                };
                var recId = 3; // 提供唯一的id
                var p = new store.recordType(defaultData, recId); // 创建新记录
                grid.stopEditing();
                store.insert(0, p); // 向store中插入一条新记录(另请参见add)
                grid.startEditing(0, 0);
            }
        }]
    });
Store

公共方法

Method Defined By
ArrayStore ( Object config )
参数:
  • config : Object
返回值:
  • void
ArrayStore
add ( Ext.data.Record[] records ) : void
向Store中添加记录 并触发 add 事件。 如需通过一个远程数据源向Store中添加记录，请使用...
向Store中添加记录 并触发 add 事件。 如需通过一个远程数据源向Store中添加记录，请使用 load({add:true}) 。 另请参见 recordType 和 insert 。
参数:
  • records : Ext.data.Record[]
    需要添加到缓存中的一个 Ext.data.Record对象数组。 参见 recordType。
返回值:
  • void
Store
addEvents( Object|String o, string Optional. ) : void
添加指定的事件到事件列表上，事件会被该Observable触发。
添加指定的事件到事件列表上，事件会被该Observable触发。
参数:
  • o : Object|String
    以事件名作为属性true作为值的对象 或者当多个事件名被分开的传递时则为第一个事件名。
  • Optional. : string
    事件名被分开的传递时则为事件名。 用法:
    this.addEvents('storeloaded', 'storecleared');
返回值:
  • void
Observable
addListener( String eventName, Function handler, [Object scope], [Object options] ) : void
给对象添加事件处理器。
给对象添加事件处理器。
参数:
  • eventName : String
    监听的事件名。
  • handler : Function
    事件调用的方法
  • scope : Object
    （可选）处理方法执行的作用域 (this的引用 reference)。 如果被忽略。默认为触发事件的对象。
  • options : Object
    （可选）包含处理器配置和属性的对象。 可能包含以下的属性:
    • scope : Object
      处理方法执行的作用域(this的引用) 。 如果被忽略。默认为触发事件的对象。
    • delay : Number
      在触发事件后延迟调用处理器的毫秒数。
    • single : Boolean
      如果为True则添加一个处理器来处理下一次的事件触发（仅一次），然后移除自己。
    • buffer : Number
      使得处理器延迟指定毫秒数后预定的运行在 一个Ext.util.DelayedTask中 。 如果事件在时间内再一次被触发，原始的处理器不会被调用，但是新的处理器会预定的在他的位置上。
    • target : Observable
      如果事件在目标的Observable上触发则仅仅调用处理器， 否则 事件会从子类的Observable上冒泡

    组合选项
    使用这些选项参数,可能会组合出不同类型的监听器：

    一个延迟的，一次性的监听器。

    myDataView.on('click', this.onClick, this, {
single: true,
delay: 100
});

    一次调用附加多个处理器
    该方法同样支持传递一个包含指定的多个处理器的属性的配置对象参数。

    myGridPanel.on({
'click' : {
    fn: this.onClick,
    scope: this,
    delay: 100
},
'mouseover' : {
    fn: this.onMouseOver,
    scope: this
},
'mouseout' : {
    fn: this.onMouseOut,
    scope: this
}
});

    或者一个简写的语法：

    myGridPanel.on({
'click' : this.onClick,
'mouseover' : this.onMouseOver,
'mouseout' : this.onMouseOut,
 scope: this
});
返回值:
  • void
Observable
addSorted ( Ext.data.Record record ) : void
(只支持本地排序) 将传递的Record插入到Store中的指定位置， 它基于当前的排序信息。
(只支持本地排序) 将传递的Record插入到Store中的指定位置， 它基于当前的排序信息。
参数:
  • record : Ext.data.Record
返回值:
  • void
Store
clearFilter ( Boolean suppressEvent ) : void
返回没有使用过滤器时缓存记录的视图。
返回没有使用过滤器时缓存记录的视图。
参数:
  • suppressEvent : Boolean
    如果此参数为 true 将会安静地清除过滤器而不触发 datachanged 事件。
返回值:
  • void
Store
collect ( String dataIndex , [ Boolean allowNull ], [ Boolean bypassFilter ] ) : Array
从当前store特定的dataIndex收集唯一的值。
从当前store特定的dataIndex收集唯一的值。
参数:
  • dataIndex : String
    需要收集的属性
  • allowNull : Boolean
    (可选) 传递true将允许null,undefined或者空字符串值
  • bypassFilter : Boolean
    (可选) 传递true从所有记录中进行收集，包含那些被过滤掉的记录
返回值:
  • Array
    唯一值集合
Store
commitChanges () : void
提交所有 未提交变更的 Record。 如需处理变更，可以订阅...
提交所有 未提交变更的 Record。 如需处理变更，可以订阅 update事件， 并且当第三个参数是Ext.data.Record.COMMIT时执行更新。
参数:
  • 无。
返回值:
  • void
Store
createMultipleFilterFn ( Array filters ) : Function
给定一个过滤函数数组(每个都有一个可配置的作用域)...
给定一个过滤函数数组(每个都有一个可配置的作用域)， 构造并返回一个单独的函数，它可以返回所有过滤器ANDed(逻辑“与”)在一起之后 返回的结果
参数:
  • filters : Array
    过滤对象数组 (每个对象都应该包含一个'fn'属性和可选的作用域)
返回值:
  • Function
    多重过滤函数
Store
createSortFunction ( String field , String direction ) : Function
创建并返回一个函数，它根据所给的字段和方向对一个数组进行排序。
创建并返回一个函数，它根据所给的字段和方向对一个数组进行排序。
参数:
  • field : String
    需要创建排序器的字段
  • direction : String
    排序的方向(默认为"ASC")
返回值:
  • Function
    一个根据所给的field/direction组合进行排序的函数
Store
destroy () : void
销毁store
销毁store
参数:
  • 无。
返回值:
  • void
Store
each ( Function fn , [ Object scope ] ) : void
在缓存中的每条Record 上调用指定的函数。
在缓存中的每条Record 上调用指定的函数。
参数:
  • fn : Function
    需要调用的函数。 Record 将会作为第一个参数被传递。 返回false取消并退出迭代过程。
  • scope : Object
    (可选) 作用域( this 引用) 函数将会在其中被执行。 默认为迭代过程中的当前 Record。
返回值:
  • void
Store
enableBubble( String/Array events ) :void
是否现在使得事件会被该Observable触发并调用 this.getBubbleTarget()方法在拥有者的继承树...

是否现在使得事件会被该Observable触发并调用 this.getBubbleTarget()方法在拥有者的继承树中冒泡。Observable的基础类中没有该方法的实现。

该方法一般被Ext.Components用来冒泡事件到拥有者的容器。参看Ext.Component.getBubbleTarget默认的实现 在Ext.Component中返回组件的直接拥有者。但是如果需要的是一个已知的目标，该方法可以被重写来更快的访问需求的目标。

例子:

Ext.override(Ext.form.Field, {
    // 添加方法到Field的initComponent上改变事件为冒泡
    initComponent : Ext.form.Field.prototype.initComponent.createSequence(function() {
        this.enableBubble('change');
    }),

    // 我们知道我们想让Field的事件冒泡到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() {
            // 如果样式被修改标题会变红。
            myForm.header.setStyle('color', 'red');
        }
    }
});
参数:
  • events : String/Array
    冒泡的事件名，或事件名数组
返回值:
  • void
Observable
filter ( String|Array field , String/RegExp value , [ Boolean anyMatch ], [ Boolean caseSensitive ], Boolean exactMatch ) : void
根据指定的参数过滤 records。 可以选择传递一个过滤选项数组，根据多个参数过滤。...
根据指定的参数过滤 records。 可以选择传递一个过滤选项数组，根据多个参数过滤。 单个过滤器示例: store.filter('name', 'Ed', true, true); //查找所有包含'Ed'子串的记录 多过滤器示例: store.filter([ { property : 'name', value : 'Ed', anyMatch : true, //可选，默认为true caseSensitive: true //可选，默认为true }, //也可以传递过滤函数 { fn : function(record) { return record.get('age') == 24 }, scope: this } ]);
参数:
  • field : String|Array
    你的数据记录的一个属性，或者一个包含多个过滤条件的数组
  • value : String/RegExp
    要么是一个属性名的起始字符串，要么是一个需要在属性上进行测试的 正则表达式。
  • anyMatch : Boolean
    (可选) true时将全字匹配，而不仅仅是匹配起始字符串
  • caseSensitive : Boolean
    (可选) true比较时将会对大小写敏感
  • exactMatch : Boolean
    true将会强制精确匹配(在正则中添加^和$字符)。 默认为fales。 如果anyMatch参数为true，忽略此配置。
返回值:
  • void
Store
filterBy ( Function fn , [ Object scope ] ) : void
通过一个函数进行过滤。 指定的函数将会在Store中的每一条记录上依次调用。...
通过一个函数进行过滤。 指定的函数将会在Store中的每一条记录上依次调用。 如果此函数返回true那么这条记录就会被 包含在结果集中，否则它将被过滤掉。
参数:
  • fn : Function
    需要调用的函数。 它将被传递如下参数：
    • record : Ext.data.Record

      需要进行过滤测试的 record， 使用 Ext.data.Record.get 方法访问记录中的字段。

    • id : Object

      所传递的Record的ID

  • scope : Object
    (可选)作用域( this 引用) 函数将会在其中被执行。 默认为当前Store。
返回值:
  • void
Store
find ( String fieldName , String/RegExp value , [ Number startIndex ], [ Boolean anyMatch ], [ Boolean caseSensitive ] ) : Number
根据指定字段的值查找store中第一个符合条件记录的索引。
根据指定字段的值查找store中第一个符合条件记录的索引。
参数:
  • fieldName : String
    记录中需要测试的字段名。
  • value : String/RegExp
    要么是一个字符串，字段值需要以此字符串开头；或者是一个 需要对字段进行测试的正则表达式。
  • startIndex : Number
    (可选)开始查找的起始位置
  • anyMatch : Boolean
    (可选) 此参数为true将进行全字匹配，而不仅仅是起始部分
  • caseSensitive : Boolean
    (可选) 此参数为true在比较时将对大小写敏感
返回值:
  • Number
    符合条件的索引，或者-1
Store
findBy ( Function fn , [ Object scope ], [ Number startIndex ] ) : Number
使用一个函数，在Store中查找出第一个符合条件记录的位置索引。...
使用一个函数，在Store中查找出第一个符合条件记录的位置索引。 如果此函数返回true则此记录被视为符合条件。
参数:
  • fn : Function
    需要调用的函数。 它将会被传入如下参数:
    • record : Ext.data.Record

      需要进行过滤测试的 record。 使用Ext.data.Record.get 方法访问字段值。

    • id : Object

      所传递Record的ID

  • scope : Object
    (可选)作用域( this 引用) 函数将会在其中被执行。 默认为当前Store。
  • startIndex : Number
    (可选) 开始查找的起始位置索引
返回值:
  • Number
    匹配的索引或者-1
Store
findExact ( String fieldName , Mixed value , [ Number startIndex ] ) : Number
根据指定的字段值，在store中查找符合条件的第一条记录的位置。
根据指定的字段值，在store中查找符合条件的第一条记录的位置。
参数:
  • fieldName : String
    需要进行测试的记录的字段名。
  • value : Mixed
    需要与字段进行匹配的值。
  • startIndex : Number
    (可选) 查询的起始位置
返回值:
  • Number
    匹配的索引或者-1
Store
fireEvent( String eventName, Object... args ) : Boolean
用传入的参数触发指定的事件 (减去事件名)。 一个事件可以被设置为冒泡 Obse...

用传入的参数触发指定的事件 (减去事件名)。

一个事件可以被设置为冒泡到Observable父类继承树(参看 Ext.Component.getBubbleTarget) 调用enableBubble实现。

参数:
  • eventName : String
    触发的事件名。
  • args : Object...
    传递给处理器的可变长度参数。
返回值:
  • Boolean
    如果有任何的处理器返回false则返回false，否则返回true。
Observable
getAt ( Number index ) : Ext.data.Record
获取指定位置的记录。
获取指定位置的记录。
参数:
  • index : Number
    需要查找的记录的索引位置。
返回值:
  • Ext.data.Record
    所传递的索引位置的Record。 如果没有找到，返回undefined
Store
getById ( String id ) : Ext.data.Record
获取拥有指定id的记录。
获取拥有指定id的记录。
参数:
  • id : String
    需要查找记录的id
返回值:
  • Ext.data.Record
    拥有所给id的Record。如果没有找到返回undefined
Store
getCount () : Number
获取缓存记录的条数。如果使用分页，此值可能不是数据集的总数。...
获取缓存记录的条数。

如果使用分页，此值可能不是数据集的总数。 如果Reader使用的数据对象包含数据集总数， 那么 getTotalCount 函数将会返回数据集的总条数。 注意: 参见load 配置项的重要注释。

参数:
  • 无。
返回值:
  • Number
    Store缓存中Record的条数
Store
getModifiedRecords () : Ext.data.Record[]
获取自从最后一次提交以来被修改过的 records。、 修改过的记录将通过load操作(例如分页时)被持久化。...
获取自从最后一次提交以来被修改过的 records。、 修改过的记录将通过load操作(例如分页时)被持久化。 注意:不包括被删除的记录。 另请参见 pruneModifiedRecords 和 Ext.data.Record markDirty。.
参数:
  • 无。
返回值:
  • Ext.data.Record[]
    一个{@link Ext.data.Record Records} 数组，包含了未提交的变更。 如需获得记录中被修改的字段，参见 {@link Ext.data.Record}<tt>{@link Ext.data.Record#modified modified}.</tt> 。
Store
getRange ( [ Number startIndex ], [ Number endIndex ] ) : Ext.data.Record[]
返回位于指定区间范围中的记录。
返回位于指定区间范围中的记录。
参数:
  • startIndex : Number
    (可选) 其实索引位置(默认为0)
  • endIndex : Number
    (可选) 结束索引位置(默认为Store中的最后一条记录)
返回值:
  • Ext.data.Record[]
    Record数组
Store
getSortState () : Object
返回一个对象，描述当前Store的排序状态。
返回一个对象，描述当前Store的排序状态。
参数:
  • 无。
返回值:
  • Object
    Store的排序状态。 一个拥有两个属性的对象:<ul> <li><b>field : String<p class="sub-desc"> Record排序所依据的字段名。 </p></li> <li><b>direction : String<p class="sub-desc">排序的方向，'ASC' 或 'DESC' (case-sensitive).</p></li> </ul> 更多细节参见 <tt>{@link #sortInfo}</tt> 。
Store
getTotalCount () : Number
获取服务器返回的数据库记录总数。如果使用分页，为了让此值准确...
获取服务器返回的数据库记录总数。

如果使用分页，为了让此值准确， Reader 使用的数据对象必须包含数据集的数量。 对于远程数据源， 此参数 ( JsonReader的 totalProperty， XmlReader的 totalRecords ) 的值必须通过服务端的一次查询来返回。 注意: 参见 load 方法的重要注释。

参数:
  • 无。
返回值:
  • Number
    Record的数量在数据对象中被指定，通过Proxy传递给Reader。

    注意: 如果在本地改变Store的内容，此值不会被更新。

Store
hasListener( String eventName ) : Boolean
检测对象是否包含指定事件的任何监听器
检测对象是否包含指定事件的任何监听器
参数:
  • eventName : String
    检测的事件名
返回值:
  • Boolean
    如果事件被监听则为true，否则为false
Observable
indexOf ( Ext.data.Record record ) : Number
获取所传递的Record在缓存中的位置索引。
获取所传递的Record在缓存中的位置索引。
参数:
  • record : Ext.data.Record
    需要查找的Ext.data.Record对象。
返回值:
  • Number
    所传递的Record的索引位置。如果没有找到返回-1
Store
indexOfId ( String id ) : Number
根据所传递的id获得缓存中记录的索引位置。
根据所传递的id获得缓存中记录的索引位置。
参数:
  • id : String
    需要查找的Record的id
返回值:
  • Number
    Record的索引位置。 如果没有找到，返回-1
Store
insert ( Number index , Ext.data.Record[] records ) : void
在所给的位置向Store中插入记录并触发 add 事件。 另请参见 add 和 addSorted 。
在所给的位置向Store中插入记录并触发 add 事件。 另请参见 add 和 addSorted 。
参数:
  • index : Number
    插入所给记录的起始位置。
  • records : Ext.data.Record[]
    一个Ext.data.Record对象数组，它将被插入到缓存中。
返回值:
  • void
Store
isFiltered () : Boolean
如果store当前被进行了过滤，返回true
如果store当前被进行了过滤，返回true
参数:
  • 无。
返回值:
  • Boolean
Store
load ( Object options ) : Boolean
使用所配置的 reader 从配置的 proxy 加载Record...

使用所配置的 reader 从配置的 proxy 加载Record

注意:

  • 重要 : 加载操作是异步的！ 在新的数据被加载完成之前，函数的调用已经返回。 如需对调用load方法产生的信息进行任何后续处理， 指定一个回调函数，或者使用一个 'load'事件处理函数。
  • 如果使用 远程排序 ，第一次调用必须在 options.params 中指定 start 和 limit 参数， 以便设定数据集的起始位置以及每次使用Proxy所缓存的Record条数。
  • 如果使用 远程排序 ， 根据指定的 paramNames 所配置的 sortInfo 将会自动被包含在请求参数中。
参数:
  • options : Object
    一个包含参数的对象，它控制加载选项:
    • params :Object

      一个包含了参数的对象，将作为HTTP参数被传递 给远程数据源。 注意: params 将会被任何具有同名 baseParams 的属性覆盖。

      这些参数将会被使用 Ext.urlEncode 编码成标准的HTTP参数。

    • callback : Function

      在Record加载之后被调用的函数。 回调函数在load事件被触发后调用， 并且将会被传递如下参数：

      • r : Ext.data.Record[] 所加载的Record数组。
      • options : 调用load方法时的配置对象。
      • success : 布尔值，加载是否成功标识位。

    • scope : Object

      调用回调函数时的作用域(默认为Store对象)

    • add : Boolean

      标志位，将把加载的记录添加到缓存，而不是替换 当前的缓存。 注意: 参见 loadData 的注释

返回值:
  • Boolean
    如果<i>开发者</i> 提供的 <tt>{@link #beforeload}</tt> 事件处理函数返回了 <tt>false</tt>， load调用将会被取消并且返回<tt>false</tt>; 否则返回<tt>true</tt>。
Store
loadData ( Object data , [ Boolean append ] ) : void
从一个传递的数据块中加载数据并 触发 load 事件。 必须在构造器中配置...
从一个传递的数据块中加载数据并 触发 load 事件。 必须在构造器中配置一个知道数据格式的 Reader 。
参数:
  • data : Object
    一个数据块，将会从其中读取Record。 期望的数据格式 依赖所配置的 Reader 并且应该与此Reader 的 Ext.data.Reader.readRecords 参数相对应。
  • append : Boolean
    (可选) 此参数wieldtrue 将会追加新的Record而不是默认替换现有的缓存。 注意: Store中的Record将会用它们的 id 作为key， 所以如果添加的Record的id在Store中已经存在将会替换 现有的Record。 只有有用新的唯一的id的Record会被添加。
返回值:
  • void
Store
multiSort ( Array sorters , String direction ) : void
根据多个field/direction排序规则对当前store的内容进行排序。 此方法在...
根据多个field/direction排序规则对当前store的内容进行排序。 此方法在 sort 内部被调用并且一般不需要手工调用。 多条件联合排序目前只能应用到本地数据集- 如果使用remoteSort，多重排序的数据目前不会被发送给代理。
参数:
  • sorters : Array
    排序规则对象数组(字段和顺序)
  • direction : String
    排序结果的整体顺序(默认为 "ASC")
返回值:
  • void
Store
on( String eventName, Function handler, [Object scope], [Object options] ) : void
给对象添加事件处理器 (addListener的简写形式)
给对象添加事件处理器 (addListener的简写形式。)
参数:
  • eventName : String
    监听的事件类型
  • handler : Function
    事件调用的方法
  • scope : Object
    （可选）处理方法执行时的作用域 (this 的引用)。 如果被忽略。默认为触发事件的对象。
  • options : Object
    可选 包含处理器配置的对象。
返回值:
  • void
Observable
purgeListeners() : void
移除对象上所有的监听器
移除对象上所有的监听器
参数:
  • 无。
返回值:
  • void
Observable
query ( String field , String/RegExp value , [ Boolean anyMatch ], [ Boolean caseSensitive ] ) : MixedCollection
根据指定的属性查找记录。
根据指定的属性查找记录。
参数:
  • field : String
    你的记录中的一个字段
  • value : String/RegExp
    要么是一个字符串，字段以此字符串开始， 或者是一个需要对字段进行测试的正则表达式。
  • anyMatch : Boolean
    (可选)此参数为true将进行全字匹配，而不仅仅是匹配开始处
  • caseSensitive : Boolean
    (可选)此参数为true在比较时将会对大小写敏感
返回值:
  • MixedCollection
    返回一个匹配记录的Ext.util.MixedCollection
Store
queryBy ( Function fn , [ Object scope ] ) : MixedCollection
使用一个过滤函数在Store缓存的记录中进行查找。 指定的函数将会在Store中的每一条记录上依次调用。...
使用一个过滤函数在Store缓存的记录中进行查找。 指定的函数将会在Store中的每一条记录上依次调用。 如果此函数返回true那么这条记录就会被 包含在结果集中。
参数:
  • fn : Function
    需要调用的函数。 它将会被传递如下的参数：
    • record : Ext.data.Record

      需要进行过滤测试的 record 使用 Ext.data.Record.get 方法访问记录中的字段。

    • id : Object

      传递的Record的ID

  • scope : Object
    (可选) 作用域( this 引用)，函数将在其中被执行。 默认为当前Store。
返回值:
  • MixedCollection
    返回一个Ext.util.MixedCollection 包含符合条件记录
Store
rejectChanges () : void
在所有 被修改的记录 上 回退 所有的变更。
在所有 被修改的记录 上 回退 所有的变更。
参数:
  • 无。
返回值:
  • void
Store
relayEvents( Object o, Array events ) : void
从指定的Observable上传递选择的事件就好像被当前对象触发一样。
从指定的Observable上传递选择的事件就好像被当前对象触发一样。
参数:
  • o : Object
    该Observable上的事件被当前对象传递。
  • events : Array
    传递的数组名。
返回值:
  • void
Observable
reload ( Object options ) : void
使用配置的 Reader 和上次执行加载操作的选项...

使用配置的 Reader 和上次执行加载操作的选项 从配置的Proxy重新加载数据缓存。

注意: 参见 load 中的重要注释。

参数:
  • options : Object

    (可选) 一个包含了 加载选项 的对象，它可能会覆盖最后一次 load 使用的options。 详情参见 load(默认为 null，在这种情况下将使用 lastOptions)。

    向现有参数中添加新参数:

    lastOptions = myStore.lastOptions;
Ext.apply(lastOptions.params, {
    myNewParam: true
});
myStore.reload(lastOptions);
返回值:
  • void
Store
remove ( Ext.data.Record/Ext.data.Record[] record ) : void
从Store中删除记录并触发 remove 事件。
从Store中删除记录并触发 remove 事件。
参数:
  • record : Ext.data.Record/Ext.data.Record[]
    需要从缓存中删除的记录或者记录数组。
返回值:
  • void
Store
removeAll ( Boolean silent ) : void
从Store中删除所有记录并触发 clear 事件。
从Store中删除所有记录并触发 clear 事件。
参数:
  • silent : Boolean
    [false] 默认为 false。设置为 true将不会触发clear事件。
返回值:
  • void
Store
removeAt ( Number index ) : void
删除Store中指定位置的一条记录。 触发 remove事件。
删除Store中指定位置的一条记录。 触发 remove事件。
参数:
  • index : Number
    需要删除记录的位置索引
返回值:
  • void
Store
removeListener( String eventName, Function handler, [Object scope] ) : void
删除一个事件处理器。
删除一个事件处理器。
参数:
  • eventName : String
    处理器关联的事件类型。
  • handler : Function
    移除的处理器。 这应该是传递到addListener里的方法的引用。
  • scope : Object
    （可选）处理器指定的初始作用域。
返回值:
  • void
Observable
resumeEvents() : void
重新开始触发事件。(参见suspendEvents) 如果事件以queueSuspended参数被挂起，则在事件被挂起时 ...
重新开始触发事件。(参见 suspendEvents) 如果事件以queueSuspended 参数被挂起，则在事件被挂起时触发的事件会被传递到所有的监听器上
参数:
  • 无。
返回值:
  • void
Observable
save () : Number
将所有挂起的更改保存到store。 如果没有配置对应的 Ext.data.Api.actions操作...
将所有挂起的更改保存到store。 如果没有配置对应的 Ext.data.Api.actions操作， 那么将使用配置的 url 。
change            url
---------------   --------------------
removed records   Ext.data.Api.actions.destroy
phantom records   Ext.data.Api.actions.create
modified records  Ext.data.Api.actions.update
参数:
  • 无。
返回值:
  • Number
    单独指定"batch"需要保存的记录条数。 如果没有项目需要保存，或者保存操作被取消，将会返回-1
Store
setBaseParam ( String name , Mixed value ) : void
为store的baseParams 中指定的参数名设置值。 用法:myStore.setBaseParam('foo', {bar:3});
为store的baseParams 中指定的参数名设置值。 用法:

myStore.setBaseParam('foo', {bar:3});
参数:
  • name : String
    需要指定值的参数名称
  • value : Mixed
    指定给命名属性的值
返回值:
  • void
Store
setDefaultSort ( String fieldName , [ String dir ] ) : void
设置下一次 load 操作所使用的默认排序列和顺序。
设置下一次 load 操作所使用的默认排序列和顺序。
参数:
  • fieldName : String
    需要排序的字段名。
  • dir : String
    (可选) 排序方向，'ASC' 或者 'DESC' (大小写敏感，默认为'ASC')
返回值:
  • void
Store
singleSort ( String fieldName , [ String dir ] ) : void
根据单个字段和方向对store的内容进行排序。 这将会在...
根据单个字段和方向对store的内容进行排序。 这将会在 sort 内部被调用，并且一般情况下不应该手工调用。
参数:
  • fieldName : String
    需要排序字段的名称。
  • dir : String
    (可选) 排序方向，'ASC' 或者 'DESC' (大小写敏感，默认为 'ASC')
返回值:
  • void
Store
sort ( String/Array fieldName , [ String dir ] ) : void
对记录进行排序。如果使用远程排序，将在服务端进行排序操作， 然后刷新缓存。...
对记录进行排序。如果使用远程排序，将在服务端进行排序操作， 然后刷新缓存。 如果使用本地排序，缓存将在内部排序。 另请参见 remoteSort 和 paramNames。 此函数接受两种调用参数-将字段名作为第一个参数传递进来， 或者将多条件联合排序的配置对象作为一个数组传递进来。 单条件排序示例：store.sort('name', 'ASC');多条件联合排序 示例store.sort([ { field : 'name', direction: 'ASC' }, { field : 'salary', direction: 'DESC' } ], 'ASC'); 在以上的第二种形式中，排序参数将会被依次应用， 后面的排序器将在前面排序器产生的结果上进行再次排序操作。 例如，依照上面的排序配置， 如果存在具有相同名字的两条记录，它们将会按照薪水进行排序。 排序配置可以添加任意多个。
参数:
  • fieldName : String/Array
    进行排序的字段名，或者一个整理好的排序配置数组
  • dir : String
    (可选) 排列顺序，'ASC' 或者 'DESC' (大小写敏感，默认为 'ASC')
返回值:
  • void
Store
sum ( String property , [ Number start ], [ Number end ] ) : Number
将位于start 和 end之间的每条 record 的property值加在一起然后返回结果。
将位于start 和 end之间的每条 record 的property值加在一起然后返回结果。
参数:
  • property : String
    每条记录中的一个字段
  • start : Number
    (可选) 起始记录位置(默认为 0)
  • end : Number
    (可选)要包含的 最后一条记录的位置(默认为 length-1)
返回值:
  • Number
    The sum
Store
suspendEvents( Boolean queueSuspended ) : void
暂停触发所有的事件。 (参看resumeEvents)
暂停触发所有的事件。（参看 resumeEvents)
参数:
  • queueSuspended : Boolean
    如果传递为true则排列好暂停的事件使得在调用 resumeEvents 后再触发它们，而不是抛弃所有暂停的事件。
返回值:
  • void
Observable
un( String eventName, Function handler, [Object scope] ) : void
删除一个事件处理器(removeListener方法的简写形式)
删除一个事件处理器(removeListener方法的简写形式。)
参数:
  • eventName : String
    处理器关联的事件类型
  • handler : Function
    被删除的处理器 这应该是传入 addListener 中的方法的引用。
  • scope : Object
    （可选）为处理器指定的初始作用域。
返回值:
  • void
Observable

公共事件

Event Defined By
add : ( Store this , Ext.data.Record[] records , Number index )
当Record被added 到Store中时触发
当Record被added 到Store中时触发
监听器将会以如下的参数格式触发:
  • this : Store
  • records : Ext.data.Record[]
    所添加的记录数组
  • index : Number
    record(s)被添加的索引位置
Store
beforeload : ( Store this , Object options )
在请求新的数据对象之前触发。 如果beforeload的监听器返回...
在请求新的数据对象之前触发。 如果beforeload的监听器返回 false那么 load 操作将会被取消。
Listeners will be called with the following arguments:
  • this : Store
  • options : Object
    指定的加载参数(详情参见 load)
Store
beforesave : ( Ext.data.Store store , Object data )
在调用保存操作之前触发。 保存包括销毁records，更新records和创建records。
在调用保存操作之前触发。 保存包括销毁records，更新records和创建records。
监听器将会以如下的参数格式被调用:
  • store : Ext.data.Store
  • data : Object
    一个包含需要保存的数据的对象。 此对象将会为每个操作包含一个key，对应每个操作的record数组。
Store
beforewrite : ( Ext.data.Store store , String action , Record/Record[] rs , Object options , Object arg )
监听器将会以如下的参数格式被调用:
  • store : Ext.data.Store
  • action : String
    [Ext.data.Api.actions.create|update|destroy]
  • rs : Record/Record[]
    被写入的Record(s)
  • options : Object
    指定的加载选项。 编辑 options.params 以向请求中添加HTTP参数。 (详情参见 save)
  • arg : Object
    传递给request 函数的 回调参数对象
Store
clear : ( Store this , Record[] The )
当数据缓存被清空时触发。
当数据缓存被清空时触发。
监听器将会以如下的参数格式被调用:
  • this : Store
  • The : Record[]
    被清楚的记录
Store
datachanged : ( Store this )
当数据缓存以批量的方式发生变化时触发(例如，它被排序、过滤等等)，并且 ...
当数据缓存以批量的方式发生变化时触发(例如，它被排序、过滤等等)，并且 使用此Store作记录缓存的组件都应该刷新其视图。
监听器将会以如下的参数格式被调用:
  • this : Store
Store
exception : ( misc misc )
在Proxy进行远程请求时如果内部发生异常，此事件被触发。 此事件与对应的...

在Proxy进行远程请求时如果内部发生异常，此事件被触发。 此事件与对应的 Ext.data.DataProxy有关。 附加信息参见 Ext.data.DataProxy. exception 。

监听器将会以如下的参数格式被调用:
  • misc : misc
    描述参见 Ext.data.DataProxy. exception 。
Store
load : ( Store this , Ext.data.Record[] records , Object options )
在新的数据集被加载之后触发。
在新的数据集被加载之后触发。
监听器将会以如下的参数格式被调用:
  • this : Store
  • records : Ext.data.Record[]
    加载的Record
  • options : Object
    指定的加载选项( 细节参见 load)
Store
loadexception : ( misc misc )
此事件已过时，推荐使用能捕获所有 exception 的事件替代。...

此事件已过时，推荐使用能捕获所有 exception 的事件替代。

此事件与对应的Ext.data.DataProxy 有关。 附加信息详情参见 Ext.data.DataProxy. loadexception 。

监听器将会以如下的参数格式被调用:
  • misc : misc
    更多描述参见 Ext.data.DataProxy. loadexception 。
Store
metachange : ( Store this , Object meta )
在当前store的reader提供了新的元数据(fields)时触发。 当前只有JsonReader支持此配置。
在当前store的reader提供了新的元数据(字段)时触发。 当前只有JsonReader支持此配置。
监听器将会以如下的参数格式被调用:
  • this : Store
  • meta : Object
    JSON元数据
Store
remove : ( Store this , Ext.data.Record record , Number index )
当从Store中 removed 一条记录时触发
当从Store中 removed 一条记录时触发
监听器将会以如下参数格式被调用:
  • this : Store
  • record : Ext.data.Record
    被删除的记录
  • index : Number
    被删记录的索引位置
Store
save : ( Ext.data.Store store , Number batch , Object data )
在保存操作完成之后触发。 保存操作包含销毁记录、更新记录以及创建记录。
在保存操作完成之后触发。 保存操作包含销毁记录、更新记录以及创建记录。
监听器将会以如下的参数格式被调用:
  • store : Ext.data.Store
  • batch : Number
    被保存分支的标识符。
  • data : Object
    一个对象，包含了需要保存的数据。 此对象将会包含每个操作对应的key，连同每个操作所涉及到的记录的数组。
Store
update : ( Store this , Ext.data.Record record , String operation )
当一条记录被更新时触发
当一条记录被更新时触发
监听器将会以如下的参数格式被调用:
  • this : Store
  • record : Ext.data.Record
    被更新的记录
  • operation : String
    执行的更新操作。 可能是如下值中的一个:
    Ext.data.Record.EDIT
Ext.data.Record.REJECT
Ext.data.Record.COMMIT
Store
write : ( Ext.data.Store store , String action , Object result , Ext.Direct.Transaction res , Record/Record[] rs )
如果一个 Ext.data.Api.actions的CRUD操作导致服务器返回代码200，此事件被触发...
如果一个 Ext.data.Api.actions的CRUD操作导致服务器返回代码200，此事件被触发。 操作成功由 result[ 'successProperty'] 参数决定 ( 注意 对于安静型(RESTful)的store， 一个简单的20x(译者注：服务端返回的状态码，类似404，各种状态码都有自己的 含义，具体请google)，对"destroy"和"update"操作来说已经足够。 "create"操作应该(should should)返回200同时返回一个数据库主键)。
监听器将会以如下的参数格式被调用:
  • store : Ext.data.Store
  • action : String
    [Ext.data.Api.actions.create|update|destroy]
  • result : Object
    为方便使用，在响应之外获取的数据
  • res : Ext.Direct.Transaction
  • rs : Record/Record[]
    Store的记录，写操作的对象
Store


Observable
    Connection

Class Ext.data.Connection

包: | Ext.data
定义类的文件: | Connection.js
类: | Connection
子类: | Ajax
继承自: | Observable

这个类封装了一个连接到该页面的原始域， 允许请求作出要么配置的url，或到url 在指定的时间要求。

这一类提出请求是异步的，并会 立即返回。来自服务器的任何数据都不会提供给 立即生效。查看 request 为了处理返回的数据，请使用 success callback in the request 配置对象或者是一个 监听器.

File Uploads

File uploads 不执行正常使用“Ajax”的技术，而是 not 不使用 伪造的 XMLHttpRequests。相反的形式是 提交与DOM标准的方式 <form> 暂时修改元素，并使其 target 设置为指向一个动态生成的，隐藏 <iframe> 插入到document中并在接收到数据后删除。

服务器响应是由浏览器解析创建 在IFRAME中。如果服务器是使用JSON发送回 对象，则 Content-Type 头必须设置为“text / html”的，以保持浏览器 插入文本到文档的正文不变。

其中有用的字符必须为一个HTML解析器必须发送 HTML实体, so encode "<" as "&lt;", "&" as "&amp;" etc.

The response text 并 创建一个伪造的XMLHttpRequest对象包含 responseText 的原型以符合 要求对事件处理程序和回调。

请注意，文件上传数据包发送的内容类型为 multipart/form 一些服务器技术（比如JEE）可能需要一些定制 处理工作，以便检索参数名称和参数值 从包的内容。

配置项

Config Options Defined By
autoAbort : Boolean
(可选) 是否终止任何正在发生的请求(默认值为 false)
Connection
defaultHeaders : Object
(可选) 一个包含请求头信息的对象， 此对象产生的每个请求都会包含此信息(默认值为 undefined)。
Connection
disableCaching : Boolean
(可选) 如果为true，让GET请求禁用缓存(默认值为 true)。
Connection
disableCachingParam : String
(可选) 通过一个“缓存终结者”设置参数以禁止缓存。默认值为'_dc'...
Connection
extraParams : Object
(可选)一个包含属性的对象，它被用作此对象产生的每个请求的额外参数(默认值为... (可选)一个包含属性的对象，它被用作此对象产生的每个请求的额外参数(默认值为 。。。。。。
(可选)一个包含属性的对象，它被用作此对象产生的每个请求的额外参数(默认值为... (可选)一个包含属性的对象，它被用作此对象产生的每个请求的额外参数(默认值为 undefined)。
Connection
listeners : Object
一个包含一个或多个事件处理器的配置对象，会在初始化的时候被添加到目标对象上...

一个包含一个或多个事件处理器的配置对象，会在初始化的时候被添加到目标对象上。 该配置对象应该是一个有效的监听器配置对象就像 addListener例子中指定的一样可一次附加多个处理器。

ExtJs Components上的DOM事件

一些 ExtJs Component 类导出时会选择一些DOM事件(例如 "click", "mouseover" 等等), 这通常只是在有额外的值可以被添加时发生。例如DataView类的 click事件会传递被点击的节点。也可以直接在Component的HTMLElementevent上访问DOM事件，但必需在Component被渲染后监听器才能添加到Element 上。可以按照以下步骤添加插件:

// 插件会用一个监听器配置对象进行配置。
//该组件会被添加到所有处理方法的参数列表上。
Ext.DomObserver = Ext.extend(Object, {
    constructor: function(config) {
        this.listeners = config.listeners ? config.listeners : config;
    },

    // 组件将自己传递进了插件的初始化方法里
    init: function(c) {
        var p, l = this.listeners;
        for (p in l) {
            if (Ext.isFunction(l[p])) {
                l[p] = this.createHandler(l[p], c);
            } else {
                l[p].fn = this.createHandler(l[p].fn, c);
            }
        }

        // 渲染后立即添加监听器到元素上
        c.render = c.render.createSequence(function() {
            var e = c.getEl();
            if (e) {
                e.on(l);
            }
        });
    },

    createHandler: function(fn, c) {
        return function(e) {
            fn.call(this, e, c);
        };
    }
});

var combo = new Ext.form.ComboBox({

    // 元素被点击后折叠
    plugins: [ new Ext.DomObserver({
        click: function(evt, comp) {
            comp.collapse();
        }
    })],
    store: myStore,
    typeAhead: true,
    mode: 'local',
    triggerAction: 'all'
});

Observable
method : String
(可选) 默认的HTTP请求方式(如果没有设置，那么默认值为 undefined； 但是，...
(可选) 默认的HTTP请求方式(如果没有设置，那么默认值为 undefined； 但是，如果 request 方法存在params参数，将使用POST方式；否则使用GET方式。)
Connection
timeout : Number
请求超时毫秒数(默认值为 30000)。
Connection
url : String
(可选) 向服务器提交请求的默认URL (默认值为 undefined)。

(可选) 向服务器提交请求的默认URL (默认值为 undefined)。

The url 配置可能是一个函数 returns 该URL使用Ajax请求. 作用域为 ( this reference) 当前函数 scope 传递给它的SCOPE。 request method.

Connection

公共属性

该类没有公共属性。

公共方法

Method Defined By
Connection ( Object config )
参数:
  • config : Object
    a configuration object.
返回值:
  • void
Connection
abort ( [ Number transactionId ] ) : void
中止任何正在发生的请求。
Aborts any outstanding request.
参数:
  • transactionId : Number
    (可选) 默认值为最后一个事务
返回值:
  • void
Connection
addEvents( Object|String o, string Optional. ) : void
添加指定的事件到事件列表上，事件会被该Observable触发。
添加指定的事件到事件列表上，事件会被该Observable触发。
参数:
  • o : Object|String
    以事件名作为属性true作为值的对象 或者当多个事件名被分开的传递时则为第一个事件名。
  • Optional. : string
    事件名被分开的传递时则为事件名。 用法:
    this.addEvents('storeloaded', 'storecleared');
返回值:
  • void
Observable
addListener( String eventName, Function handler, [Object scope], [Object options] ) : void
给对象添加事件处理器。
给对象添加事件处理器。
参数:
  • eventName : String
    监听的事件名。
  • handler : Function
    事件调用的方法
  • scope : Object
    （可选）处理方法执行的作用域 (this的引用 reference)。 如果被忽略。默认为触发事件的对象。
  • options : Object
    （可选）包含处理器配置和属性的对象。 可能包含以下的属性:
    • scope : Object
      处理方法执行的作用域(this的引用) 。 如果被忽略。默认为触发事件的对象。
    • delay : Number
      在触发事件后延迟调用处理器的毫秒数。
    • single : Boolean
      如果为True则添加一个处理器来处理下一次的事件触发（仅一次），然后移除自己。
    • buffer : Number
      使得处理器延迟指定毫秒数后预定的运行在 一个Ext.util.DelayedTask中 。 如果事件在时间内再一次被触发，原始的处理器不会被调用，但是新的处理器会预定的在他的位置上。
    • target : Observable
      如果事件在目标的Observable上触发则仅仅调用处理器， 否则 事件会从子类的Observable上冒泡

    组合选项
    使用这些选项参数,可能会组合出不同类型的监听器：

    一个延迟的，一次性的监听器。

    myDataView.on('click', this.onClick, this, {
single: true,
delay: 100
});

    一次调用附加多个处理器
    该方法同样支持传递一个包含指定的多个处理器的属性的配置对象参数。

    myGridPanel.on({
'click' : {
    fn: this.onClick,
    scope: this,
    delay: 100
},
'mouseover' : {
    fn: this.onMouseOver,
    scope: this
},
'mouseout' : {
    fn: this.onMouseOut,
    scope: this
}
});

    或者一个简写的语法：

    myGridPanel.on({
'click' : this.onClick,
'mouseover' : this.onMouseOver,
'mouseout' : this.onMouseOut,
 scope: this
});
返回值:
  • void
Observable
enableBubble( String/Array events ) :void
是否现在使得事件会被该Observable触发并调用 this.getBubbleTarget()方法在拥有者的继承树...

是否现在使得事件会被该Observable触发并调用 this.getBubbleTarget()方法在拥有者的继承树中冒泡。Observable的基础类中没有该方法的实现。

该方法一般被Ext.Components用来冒泡事件到拥有者的容器。参看Ext.Component.getBubbleTarget默认的实现 在Ext.Component中返回组件的直接拥有者。但是如果需要的是一个已知的目标，该方法可以被重写来更快的访问需求的目标。

例子:

Ext.override(Ext.form.Field, {
    // 添加方法到Field的initComponent上改变事件为冒泡
    initComponent : Ext.form.Field.prototype.initComponent.createSequence(function() {
        this.enableBubble('change');
    }),

    // 我们知道我们想让Field的事件冒泡到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() {
            // 如果样式被修改标题会变红。
            myForm.header.setStyle('color', 'red');
        }
    }
});
参数:
  • events : String/Array
    冒泡的事件名，或事件名数组
返回值:
  • void
Observable
fireEvent( String eventName, Object... args ) : Boolean
用传入的参数触发指定的事件 (减去事件名)。 一个事件可以被设置为冒泡 Obse...

用传入的参数触发指定的事件 (减去事件名)。

一个事件可以被设置为冒泡到Observable父类继承树(参看 Ext.Component.getBubbleTarget) 调用enableBubble实现。

参数:
  • eventName : String
    触发的事件名。
  • args : Object...
    传递给处理器的可变长度参数。
返回值:
  • Boolean
    如果有任何的处理器返回false则返回false，否则返回true。
Observable
hasListener( String eventName ) : Boolean
检测对象是否包含指定事件的任何监听器
检测对象是否包含指定事件的任何监听器
参数:
  • eventName : String
    检测的事件名
返回值:
  • Boolean
    如果事件被监听则为true，否则为false
Observable
isLoading ( [ Number transactionId ] ) : Boolean
判断这个对象是否有一个正在发生的请求。
判断这个对象是否有一个正在发生的请求。
参数:
  • transactionId : Number
    (可选) 默认值为 the last transaction
返回值:
  • Boolean
    如果有一个正在发出的请求则为TRUE。
Connection
on( String eventName, Function handler, [Object scope], [Object options] ) : void
给对象添加事件处理器 (addListener的简写形式)
给对象添加事件处理器 (addListener的简写形式。)
参数:
  • eventName : String
    监听的事件类型
  • handler : Function
    事件调用的方法
  • scope : Object
    （可选）处理方法执行时的作用域 (this 的引用)。 如果被忽略。默认为触发事件的对象。
  • options : Object
    可选 包含处理器配置的对象。
返回值:
  • void
Observable
purgeListeners() : void
移除对象上所有的监听器
移除对象上所有的监听器
参数:
  • 无。
返回值:
  • void
Observable
relayEvents( Object o, Array events ) : void
从指定的Observable上传递选择的事件就好像被当前对象触发一样。
从指定的Observable上传递选择的事件就好像被当前对象触发一样。
参数:
  • o : Object
    该Observable上的事件被当前对象传递。
  • events : Array
    传递的数组名。
返回值:
  • void
Observable
removeListener( String eventName, Function handler, [Object scope] ) : void
删除一个事件处理器。
删除一个事件处理器。
参数:
  • eventName : String
    处理器关联的事件类型。
  • handler : Function
    移除的处理器。 这应该是传递到addListener里的方法的引用。
  • scope : Object
    （可选）处理器指定的初始作用域。
返回值:
  • void
Observable
request ( Object options ) : Number
发送一个HTTP请求到远程服务器. 重要: Ajax是异步请求, 并且此次通信会返回...

发送一个HTTP请求到远程服务器.

重要: Ajax是异步请求, 并且此次通信在收到服务器响应之前已经返回，要处理返回的任何数据都要在当前作回调函数中 。

                                Ext.Ajax.request({
   url: 'ajax_demo/sample.json',
   success: function(response, opts) {
      var obj = Ext.decode(response.responseText);
      console.dir(obj);
   },
   failure: function(response, opts) {
      console.log('server-side failure with status code ' + response.status);
   }
});

使用当前配置参数执行回调函数。 scope option.

参数:
  • options : Object
    Object 对象可能包含以下参数。
    • url : String/Function (可选)
      发送请求的URL，或者一个方法，调用它能返回一个URL字符串。方法的作用域由scope选项指定。默认为配置的 url .
    • params : Object/String/Function (Optional)
      可以是：一个包含属性的对象，它将被用作请求的参数；一个URL编码字符串；或者是一个方法，调用它可以产生前两项中的任意一个。方法的作用域由scope选项指定。
    • method : String (可选)
      HTTP请求的方式。默认为配置的方式，如果没有配置，当没有参数被发送时为"GET"，有参数发送时为"POST"。提示：请求方式名称是大小写敏感的，应该全是大写。
    • callback : Function (可选)
      当收到HTTP响应时调用的方法。不管请求成功还是失败，回调方法都会被调用，并被传入以下的参数：
      • options : Object
        调用request方法时的参数。
      • success : Boolean
        请求成功时为true.
      • response : Object
        包含响应数据的XMLHttpRequest对象。关于如何访问响应内容的详情，请参见 http://www.w3.org/TR/XMLHttpRequest/
    • success : Function (可选)
      当请求成功时调用的方法。并且将被传入以下参数:
      • response : Object
        包含响应数据的XMLHttpRequest对象。
      • options : Object
        调用request方法的参数。
    • failure : Function (可选)
      请求失败时调用的方法。它将被传入以下参数：
      • response : Object
        包含响应数据的XMLHttpRequest对象。
      • options : Object
        调用request方法的参数。
    • scope : Object (可选)
      执行回调方法的作用域：如果指定了url或者params参数，方法可以从其中获取数据，那么这些参数将作为调用这些方法的作用域。作用域默认人浏览器的window对象。
    • timeout : Number (可选)
      此请求超时时间以毫秒为单位，默认为30秒。
    • form : Element/HTMLElement/String (可选)
      可以从<form> 表单 元素或者 <form> 中获取参数。
    • isUpload : Boolean (可选)
      只对有在配置form 选项时才起作用.

      如果是一个可上传表单对象则此值为true (如果content type为 multipart/form，则会自动检测。

      文件上传不是使用普通的"Ajax"技术 , 也就是说文件上传 不是 使用XMLHttpRequests来实现的. 作为替代的是，表单是以标准的风格提交的，同时临时修改DOM的 <form>元素，使它的 target 指向一个动态生成的隐藏 <iframe> ，这个隐藏的 被插入到document中，在收到返回数据后被删除掉。

      浏览器将解析服务器的响应，为IFRAME创建document。如果服务器使用JSON发送响应，那么 Content-Type 头必须设置为"text/html"，以便告诉浏览器将文本直接插入document的body中而不做改变。

      response Text会检索form，并且XMLHttpRequest对象会创建一个包含 的responseText 属性，以符合 要求对事件处理程序和回调。

      必须明白的是，文件上传发送数据包的content type是 multipart/form ，并且一些服务器端技术（特别是JavaEE），为了从数据包内容解析参数名称和值，可能要求一些定制的处理。

    • headers : Object (可选)
      请求的头部信息。
    • xmlData : Object (可选)
      post的XML文档。注意：这将替代用作post的参数。所有参数都将被添加到URL后面。
    • jsonData : Object/String (可选)
      post用的JSON数据。注意：这将替代用作post的参数。所有参数都将被添加到URL后面。
    • disableCaching : Boolean (可选)
      如果为true，将关闭get的缓存功能。

    配置对象也可以包含其它的，执行后处理的回调函数所需要的属性，因为配置对象将被传递给回调函数。

返回值:
  • Number
    transactionId 服务器事务id。可以用来取消请求。
Connection
resumeEvents() : void
重新开始触发事件。(参见suspendEvents) 如果事件以queueSuspended参数被挂起，则在事件被挂起时 ...
重新开始触发事件。(参见 suspendEvents) 如果事件以queueSuspended 参数被挂起，则在事件被挂起时触发的事件会被传递到所有的监听器上
参数:
  • 无。
返回值:
  • void
Observable
suspendEvents( Boolean queueSuspended ) : void
暂停触发所有的事件。 (参看resumeEvents)
暂停触发所有的事件。（参看 resumeEvents)
参数:
  • queueSuspended : Boolean
    如果传递为true则排列好暂停的事件使得在调用 resumeEvents 后再触发它们，而不是抛弃所有暂停的事件。
返回值:
  • void
Observable
un( String eventName, Function handler, [Object scope] ) : void
删除一个事件处理器(removeListener方法的简写形式)
删除一个事件处理器(removeListener方法的简写形式。)
参数:
  • eventName : String
    处理器关联的事件类型
  • handler : Function
    被删除的处理器 这应该是传入 addListener 中的方法的引用。
  • scope : Object
    （可选）为处理器指定的初始作用域。
返回值:
  • void
Observable

公共事件

Event Defined By
beforerequest : ( Connection conn , Object options )
当发出获取数据的请求之前触发。
当发出获取数据的请求之前触发。
监听器将会用调用以下格式的参数::
  • conn : Connection
    当前Connection对象
  • options : Object
    传递给 request 方法的配置选项的对象。
Connection
requestcomplete : ( Connection conn , Object response , Object options )
当请求成功完成时触发。
当请求成功完成时触发。
监听器将会用以下的参数格式调用:
  • conn : Connection
    Connection对象。
  • response : Object
    含响应数据的XHR对象。详情参见 The XMLHttpRequest Object
  • options : Object
    传递给 request 方法的配置对象。
Connection
requestexception : ( Connection conn , Object response , Object options )
当服务器返回一个HTTP错误状态时触发。HTTP状态码详情请参见 <a href="http://www.w3.org/Protocols/rfc2616/rfc2616-...
当服务器返回一个HTTP错误状态时触发。HTTP状态码详情请参见 HTTP Status Code Definitions
监听器将会用以下的参数格式调用:
  • conn : Connection
    当前Connection对象。
  • response : Object
    包含响应数据的XHR对象。详情参见 The XMLHttpRequest Object for details.
  • options : Object
    传递给 request 方法的配置选项对象。
Connection


Error
    DataProxy.Error

Class Ext.data.DataProxy.Error

包: | Ext.data
定义类的文件: | DataProxy.js
类: | DataProxy.Error
继承自: | Error
DataProxy Error 扩展。构造器。

公共属性

该类没有公共属性。

公共方法

Method Defined By
getMessage () : String
getMessage
getMessage
参数:
  • 无。
返回值:
  • String
Error
getName () : String
getName
getName
参数:
  • 无。
返回值:
  • String
Error
toJson () : String
toJson
toJson
参数:
  • 无。
返回值:
  • String
Error

公共事件

该类没有公共事件。


Observable
    DataProxy

Class Ext.data.DataProxy

包: | Ext.data
定义类的文件: | DataProxy.js
类: | DataProxy
子类: | DirectProxy, HttpProxy, MemoryProxy, ScriptTagProxy
继承自: | Observable

用来被继承的抽象基类，用来获取无格式的数据对象。 该类是被设计用来继承的，并且不应该直接被创建(实例)。 对于现有的实现，参见 Ext.data.DirectProxy, Ext.data.HttpProxy, Ext.data.ScriptTagProxy 和 Ext.data.MemoryProxy。

DataProxy的实现类一般与 Ext.data.DataReader (属于适当的类型，知道如果解析数据对象) 的实现类配合使用， 用来为 Ext.data.Store 提供一个 Ext.data.Records 数据块。

DataProxy构造函数的参数可以是一个 Ext.data.Connection 或者是一个 Ext.data.Connection 的配置对象。

具体实现类必须实现 doRequest 方法(推荐)或者 load 方法(已过时)。 附加细节参见 Ext.data.HttpProxy. doRequest 或者 Ext.data.HttpProxy. load。

示例 1

proxy: new Ext.data.ScriptTagProxy({
    url: 'http://extjs.com/forum/topics-remote.php'
}),

示例 2

proxy : new Ext.data.HttpProxy({
    method: 'GET',
    prettyUrls: false,
    url: 'local/default.php', // 参见Ext.Ajax.request的配置参数

    api: {
        // 以下所有期望的操作都将使用以上url
        create  : 'local/new.php',
        update  : 'local/update.php'
    }
}),

Ext本版3新增， 在DataProxy类自身绑定集中的事件监听器！ 这是一个精彩的地方， 可以用来实现一个消息系统，可以 集中处理你应用中的用户反馈和出错处理。

// 监听所有代理触发的所有"beforewrite"事件。
Ext.data.DataProxy.on('beforewrite', function(proxy, action) {
    console.log('beforewrite: ', action);
});

// 监听所有代理触发的"write"事件
Ext.data.DataProxy.on('write', function(proxy, action, data, res, rs) {
    console.info('write: ', action);
});

// 监听所有代理触发的"exception"事件
Ext.data.DataProxy.on('exception', function(proxy, type, action) {
    console.error(type + action + ' exception);
});
注意: 这三个事件 都与对应的DataProxy实例事件 ： beforewrite, write 和 exception同时触发。

配置项

Config Options Defined By
api : Object
指定 调用CRUD操作的方法： "read", "create", "update" 和 "destroy"的url。 默认为：...
指定 调用CRUD操作的方法： "read", "create", "update" 和 "destroy"的url。 默认为：
api: {
    read    : undefined,
    create  : undefined,
    update  : undefined,
    destroy : undefined
}

url根据被执行的操作[load|create|save|destroy]而创建， 使用相应的 api 参数，或者如果没有定义时默认为配置的 Ext.data.Store. url。

例如:

api: {
    load :    '/controller/load',
    create :  '/controller/new',  // 服务器必须返回新记录的idProperty
    save :    '/controller/update',
    destroy : '/controller/destroy_action'
}

// 作为第二选择，可以使用对象形式指定每个API-action
api: {
    load: {url: 'read.php', method: 'GET'},
    create: 'create.php',
    destroy: 'destroy.php',
    save: 'update.php'
}

对于给定的CRUD，如果指定的URL为undefined， CRUD操作的请求会被重定向到所配置的 url 上。

注意： 如果需要动态修改一个操作的URL，对应的API属性 必须在操作的请求发出之前进行修改， 修改时使用对应的before-action事件。 例如需要修改指定给load操作的URL：

// 修改操作的url
myStore.on({
    beforeload: {
        fn: function (store, options) {
            // 使用setUrl
                                    方法，*仅仅*为当前请求改变URL。
            store.proxy.setUrl('changed1.php');
            // 将第二个可选参数设置为true以便改变当前URL参数，
            // 将当前URL应用到所有后来的请求。
            store.proxy.setUrl('changed1.php', true);
            // 变更所要完成的代理API，使用公共
            // 方法 setApi
                                    。
            store.proxy.setApi('read', 'changed2.php');
            // 或者使用个配置对象设置整个API。
            // 当使用配置对象选项时，你必须重新定义整个
            // API -- 而不仅仅是一个特定的操作。
            store.proxy.setApi({
                read    : 'changed_read.php',
                create  : 'changed_create.php',
                update  : 'changed_update.php',
                destroy : 'changed_destroy.php'
            });
        }
    }
});

DataProxy
doRequest : Function
抽象方法，所有子类都必须实现此方法。 注意: 只应该被需要自定义代理的开发者使用。 ...
抽象方法，所有子类都必须实现此方法。 注意: 只应该被需要自定义代理的开发者使用。 (例如: HttpProxy.doRequest, DirectProxy.doRequest)。
DataProxy
listeners : Object
一个包含一个或多个事件处理器的配置对象，会在初始化的时候被添加到目标对象上...

一个包含一个或多个事件处理器的配置对象，会在初始化的时候被添加到目标对象上。 该配置对象应该是一个有效的监听器配置对象就像 addListener例子中指定的一样可一次附加多个处理器。

ExtJs Components上的DOM事件

一些 ExtJs Component 类导出时会选择一些DOM事件(例如 "click", "mouseover" 等等), 这通常只是在有额外的值可以被添加时发生。例如DataView类的 click事件会传递被点击的节点。也可以直接在Component的HTMLElementevent上访问DOM事件，但必需在Component被渲染后监听器才能添加到Element 上。可以按照以下步骤添加插件:

// 插件会用一个监听器配置对象进行配置。
//该组件会被添加到所有处理方法的参数列表上。
Ext.DomObserver = Ext.extend(Object, {
    constructor: function(config) {
        this.listeners = config.listeners ? config.listeners : config;
    },

    // 组件将自己传递进了插件的初始化方法里
    init: function(c) {
        var p, l = this.listeners;
        for (p in l) {
            if (Ext.isFunction(l[p])) {
                l[p] = this.createHandler(l[p], c);
            } else {
                l[p].fn = this.createHandler(l[p].fn, c);
            }
        }

        // 渲染后立即添加监听器到元素上
        c.render = c.render.createSequence(function() {
            var e = c.getEl();
            if (e) {
                e.on(l);
            }
        });
    },

    createHandler: function(fn, c) {
        return function(e) {
            fn.call(this, e, c);
        };
    }
});

var combo = new Ext.form.ComboBox({

    // 元素被点击后折叠
    plugins: [ new Ext.DomObserver({
        click: function(evt, comp) {
            comp.collapse();
        }
    })],
    store: myStore,
    typeAhead: true,
    mode: 'local',
    triggerAction: 'all'
});

Observable
onRead : Function
抽象方法，所有子类都必须实现此方法。 注意: 只应该被需要自定义代理的开发者使用。...
抽象方法，所有子类都必须实现此方法。 注意: 只应该被需要自定义代理的开发者使用。 read 操作 的回调函数。
DataProxy
onWrite : Function
抽象方法，所有子类都必须实现此方法。 注意: 只应该被需要自定义代理的开发者使用。...
抽象方法，所有子类都必须实现此方法。 注意: 只应该被需要自定义代理的开发者使用。 create, update和destroy 操作 的回调函数。
DataProxy
restful : Boolean
默认为 false。 设置为true以便用一种安静(RESTful)模式进行操作。...

默认为 false。 设置为true以便用一种安静(RESTful)模式进行操作。

注意： 如果被插入的 Ext.data.Store 被设置为 restful: true ， 此参数将会被自动设置为true。 如果Store是RESTful的， 没有必要在代理上设置此配置。

RESTful型的实现允许服务端框架 根据HTTP方法自动发送操作到一个url， 例如:

store: new Ext.data.Store({
    restful: true,
    proxy: new Ext.data.HttpProxy({url:'/users'}); // all requests sent to /users
    ...
)}
如果代理的配置项中没有指定 api 所有请求都将被集中到一个单独的RESTful url (/users)， 这样服务端框架可以监测HTTP Method并做出相应的操作:
Method   url        action
POST     /users     create
GET      /users     read
PUT      /users/23  update
DESTROY  /users/23  delete

如果设置为true， 非模拟的 记录的id 将会被添加到url之后。 某些MVC(例如Ruby on Rails, Merb和 Django)支持 基于url的片段，URL中的片段遵守 Model-View-Controller 模式:

someSite.com/controller/action/id
典型情况下url的片段:
  • 第一段：描述了应该被调用的控制类。
  • 第二段： 描述了需要调用的类函数，或者方法。
  • 第三段： 描述了ID(典型情况下传递给方法的参数)。

附加信息参见 Ext.data.DataProxy.api 。

DataProxy

公共属性

该类没有公共属性。

公共方法

Method Defined By
addEvents( Object|String o, string Optional. ) : void
添加指定的事件到事件列表上，事件会被该Observable触发。
添加指定的事件到事件列表上，事件会被该Observable触发。
参数:
  • o : Object|String
    以事件名作为属性true作为值的对象 或者当多个事件名被分开的传递时则为第一个事件名。
  • Optional. : string
    事件名被分开的传递时则为事件名。 用法:
    this.addEvents('storeloaded', 'storecleared');
返回值:
  • void
Observable
addListener( String eventName, Function handler, [Object scope], [Object options] ) : void
给对象添加事件处理器。
给对象添加事件处理器。
参数:
  • eventName : String
    监听的事件名。
  • handler : Function
    事件调用的方法
  • scope : Object
    （可选）处理方法执行的作用域 (this的引用 reference)。 如果被忽略。默认为触发事件的对象。
  • options : Object
    （可选）包含处理器配置和属性的对象。 可能包含以下的属性:
    • scope : Object
      处理方法执行的作用域(this的引用) 。 如果被忽略。默认为触发事件的对象。
    • delay : Number
      在触发事件后延迟调用处理器的毫秒数。
    • single : Boolean
      如果为True则添加一个处理器来处理下一次的事件触发（仅一次），然后移除自己。
    • buffer : Number
      使得处理器延迟指定毫秒数后预定的运行在 一个Ext.util.DelayedTask中 。 如果事件在时间内再一次被触发，原始的处理器不会被调用，但是新的处理器会预定的在他的位置上。
    • target : Observable
      如果事件在目标的Observable上触发则仅仅调用处理器， 否则 事件会从子类的Observable上冒泡

    组合选项
    使用这些选项参数,可能会组合出不同类型的监听器：

    一个延迟的，一次性的监听器。

    myDataView.on('click', this.onClick, this, {
single: true,
delay: 100
});

    一次调用附加多个处理器
    该方法同样支持传递一个包含指定的多个处理器的属性的配置对象参数。

    myGridPanel.on({
'click' : {
    fn: this.onClick,
    scope: this,
    delay: 100
},
'mouseover' : {
    fn: this.onMouseOver,
    scope: this
},
'mouseout' : {
    fn: this.onMouseOut,
    scope: this
}
});

    或者一个简写的语法：

    myGridPanel.on({
'click' : this.onClick,
'mouseover' : this.onMouseOver,
'mouseout' : this.onMouseOut,
 scope: this
});
返回值:
  • void
Observable
destroy () : void
通过清除所有事件监听器、取消所有活动的请求，销毁代理。
通过清除所有事件监听器、取消所有活动的请求，销毁代理。
参数:
  • 无。
返回值:
  • void
DataProxy
enableBubble( String/Array events ) :void
是否现在使得事件会被该Observable触发并调用 this.getBubbleTarget()方法在拥有者的继承树...

是否现在使得事件会被该Observable触发并调用 this.getBubbleTarget()方法在拥有者的继承树中冒泡。Observable的基础类中没有该方法的实现。

该方法一般被Ext.Components用来冒泡事件到拥有者的容器。参看Ext.Component.getBubbleTarget默认的实现 在Ext.Component中返回组件的直接拥有者。但是如果需要的是一个已知的目标，该方法可以被重写来更快的访问需求的目标。

例子:

Ext.override(Ext.form.Field, {
    // 添加方法到Field的initComponent上改变事件为冒泡
    initComponent : Ext.form.Field.prototype.initComponent.createSequence(function() {
        this.enableBubble('change');
    }),

    // 我们知道我们想让Field的事件冒泡到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() {
            // 如果样式被修改标题会变红。
            myForm.header.setStyle('color', 'red');
        }
    }
});
参数:
  • events : String/Array
    冒泡的事件名，或事件名数组
返回值:
  • void
Observable
fireEvent( String eventName, Object... args ) : Boolean
用传入的参数触发指定的事件 (减去事件名)。 一个事件可以被设置为冒泡 Obse...

用传入的参数触发指定的事件 (减去事件名)。

一个事件可以被设置为冒泡到Observable父类继承树(参看 Ext.Component.getBubbleTarget) 调用enableBubble实现。

参数:
  • eventName : String
    触发的事件名。
  • args : Object...
    传递给处理器的可变长度参数。
返回值:
  • Boolean
    如果有任何的处理器返回false则返回false，否则返回true。
Observable
hasListener( String eventName ) : Boolean
检测对象是否包含指定事件的任何监听器
检测对象是否包含指定事件的任何监听器
参数:
  • eventName : String
    检测的事件名
返回值:
  • Boolean
    如果事件被监听则为true，否则为false
Observable
isApiAction ( String [Ext.data.Api.CREATE|READ|UPDATE|DESTROY]} ) : Boolean
如果指定的action 是作为一个单独的action在api-config.request中被定义的， 返回true。 如果所有的API-actions...
如果指定的action 是作为一个单独的action在api-config.request中被定义的， 返回true。 如果所有的API-actions 都被发送到唯一的url， 那么xaction参数不是必须的。 但是，如果没有定义api并且所有代理action被发送到DataProxy#url， 服务端需要xaction参数为CRUD操作执行 一次到相应代码的转换。
参数:
  • [Ext.data.Api.CREATE|READ|UPDATE|DESTROY]} : String
    action
返回值:
  • Boolean
DataProxy
load ( Object params , Object reader , Object callback , Object scope , Object arg ) : void
已过时 load方法使用旧的方法签名。 推荐的方法参见{@doRequest}。
已过时 load方法使用旧的方法签名。 推荐的方法参见{@doRequest}。
参数:
  • params : Object
  • reader : Object
  • callback : Object
  • scope : Object
  • arg : Object
返回值:
  • void
DataProxy
on( String eventName, Function handler, [Object scope], [Object options] ) : void
给对象添加事件处理器 (addListener的简写形式)
给对象添加事件处理器 (addListener的简写形式。)
参数:
  • eventName : String
    监听的事件类型
  • handler : Function
    事件调用的方法
  • scope : Object
    （可选）处理方法执行时的作用域 (this 的引用)。 如果被忽略。默认为触发事件的对象。
  • options : Object
    可选 包含处理器配置的对象。
返回值:
  • void
Observable
purgeListeners() : void
移除对象上所有的监听器
移除对象上所有的监听器
参数:
  • 无。
返回值:
  • void
Observable
relayEvents( Object o, Array events ) : void
从指定的Observable上传递选择的事件就好像被当前对象触发一样。
从指定的Observable上传递选择的事件就好像被当前对象触发一样。
参数:
  • o : Object
    该Observable上的事件被当前对象传递。
  • events : Array
    传递的数组名。
返回值:
  • void
Observable
removeListener( String eventName, Function handler, [Object scope] ) : void
删除一个事件处理器。
删除一个事件处理器。
参数:
  • eventName : String
    处理器关联的事件类型。
  • handler : Function
    移除的处理器。 这应该是传递到addListener里的方法的引用。
  • scope : Object
    （可选）处理器指定的初始作用域。
返回值:
  • void
Observable
request ( String action , Ext.data.Record/Ext.data.Record[]/null rs , Object params , Ext.data.DataReader reader , Function callback , Object scope , Object options ) : void
所有代理操作都通过此方法执行。 自动触发"before" + action事件。
所有代理操作都通过此方法执行。 自动触发"before" + action事件。
参数:
  • action : String
    操作名称
  • rs : Ext.data.Record/Ext.data.Record[]/null
    当是'load'操作时此值为null
  • params : Object
  • reader : Ext.data.DataReader
  • callback : Function
  • scope : Object
    作用域 ( this 引用) 回调函数将会在其中被执行。 默认为Proxy对象。
  • options : Object
    所有为操作指定的选项(示例参见 Ext.data.Store.load。
返回值:
  • void
DataProxy
resumeEvents() : void
重新开始触发事件。(参见suspendEvents) 如果事件以queueSuspended参数被挂起，则在事件被挂起时 ...
重新开始触发事件。(参见 suspendEvents) 如果事件以queueSuspended 参数被挂起，则在事件被挂起时触发的事件会被传递到所有的监听器上
参数:
  • 无。
返回值:
  • void
Observable
setApi ( String/Object api , String/Function url ) : void
重定义代理API或则一个API的单次操作。 可以使用两个方法签名调用。...

重定义代理API或则一个API的单次操作。 可以使用两个方法签名调用。

如果使用一个对象作为唯一的参数进行调用， 此对象在entire API中重新定义， 例如:

proxy.setApi({
    read    : '/users/read',
    create  : '/users/create',
    update  : '/users/update',
    destroy : '/users/destroy'
});

如果使用两个参数进行调用， 调用那个操作时，第一个参数必须是一个字符串，它指定需要重定义的API操作， 同时第二个参数必须是URL( 或者是一个函数，如果使用DirectProxy)， 例如:

                                proxy.setApi(Ext.data.Api.actions.read, '/users/new_load_url');
参数:
  • api : String/Object
    一个API描述对象，或者是action名。
  • url : String/Function
    调用action的URL( 或者是一个函数，如果使用DirectProxy)。
返回值:
  • void
DataProxy
suspendEvents( Boolean queueSuspended ) : void
暂停触发所有的事件。 (参看resumeEvents)
暂停触发所有的事件。（参看 resumeEvents)
参数:
  • queueSuspended : Boolean
    如果传递为true则排列好暂停的事件使得在调用 resumeEvents 后再触发它们，而不是抛弃所有暂停的事件。
返回值:
  • void
Observable
un( String eventName, Function handler, [Object scope] ) : void
删除一个事件处理器(removeListener方法的简写形式)
删除一个事件处理器(removeListener方法的简写形式。)
参数:
  • eventName : String
    处理器关联的事件类型
  • handler : Function
    被删除的处理器 这应该是传入 addListener 中的方法的引用。
  • scope : Object
    （可选）为处理器指定的初始作用域。
返回值:
  • void
Observable

公共事件

Event Defined By
beforeload : ( DataProxy this , Object params )
在发送请求获取数据对象之前触发。
在发送请求获取数据对象之前触发。
监听器将会以如下的参数格式被调用:
  • this : DataProxy
    发送请求的代理
  • params : Object
    传递给 request 函数的参数对象
DataProxy
beforewrite : ( DataProxy this , String action , Record/Record[] rs , Object params )
当为如下操作Ext.data.Api.actions.create|update|destroy 产生一个请求之前触发。除了通过...

当为如下操作Ext.data.Api.actions.create|update|destroy 产生一个请求之前触发。

除了通过发出此事件的DataProxy实例触发之外， 此事件也通过Ext.data.DataProxy 类触发， 通过在Ext.data.Proxy类自身绑定一个监听器， 允许集中处理来自所有 DataProxie的beforewrite事件。

监听器将会使用如下参数格式被调用:
  • this : DataProxy
    请求的代理
  • action : String
    [Ext.data.Api.actions.create|update|destroy]
  • rs : Record/Record[]
    需要create|update|destroy的Record(s)。
  • params : Object
    请求的 params 对象。 编辑 params 以便向请求中添加参数。
DataProxy
exception : ( DataProxy this , String type , String action , Object options , Object response , Mixed arg )
在进行远程请求时，如果在Proxy内部发生异常，触发此事件。 此事件通过对应的....

在进行远程请求时，如果在Proxy内部发生异常，触发此事件。 此事件通过对应的 Ext.data.Store . exception 进行转发，所以，所有Store的实例都可以监听此事件。

除了通过发出此事件的DataProxy实例触发之外， 此事件也通过Ext.data.DataProxy 类触发， 通过在Ext.data.Proxy类自身绑定一个监听器， 允许集中处理来自所有 DataProxie的exception事件。

此事件可以因为如下两个原因之一而被触发:

  • remote-request failed :
    服务器没有返回状态码=== 200
  • remote-request succeeded :
    远程请求已经成功，但是reader无法读取响应。 这意味着服务器返回了数据， 但是配置的Rader在读取响应时抛出了异常。 这种情况下，此事件被触发并且捕捉到的错误 将会被一起传递到此事件中。

根据第二个参数type [remote|response]， 此事件在两种不同的上下文触发。 在两种上下文中，前四个参数是一样的--- 只有最后两个参数不同。

监听器将会以如下的参数格式被调用:
  • this : DataProxy
    发出请求的代理
  • type : String

    此参数的值可以是'response'或者'remote'。

    • 'response' :

      服务器返回了一个无效的响应: 要么是404, 500或者响应的元数据 与DataReader中所定义的不符 (例如: root, idProperty, successProperty)。

    • 'remote' :

      服务器返回了一个有效的 响应，有一个参数successProperty === false. 此响应可以包含一个来自服务器的出错信息。 例如， 用户认证/授权(authentication/authorization)失败 ，或者发生了数据库校验错误。

  • action : String
    操作名称(参见 Ext.data.Api.actions。
  • options : Object
    在request 中为操作指定的配置项。
  • response : Object

    此参数的值依赖于 type 参数的值：

    • 'response' :

      原始的浏览器响应对象(例如: XMLHttpRequest)

    • 'remote' :

      来自服务器的已经解码的响应对象。

  • arg : Mixed

    此参数的类型和值依赖于 type 参数的值：

    • 'response' : Error

      如果配置的Reader无法读取数据，此参数为JavaScript Error对象。 如果远程请求返回success===false，此参数将会为null。

    • 'remote' : Record/Record[]

      只有在action是一个write action (Ext.data.Api.actions.create|update|destroy)时 才存在此参数

DataProxy
load : ( DataProxy this , Object o , Object options )
在load方法地方回调函数被调用之前触发。
在load方法地方回调函数被调用之前触发。
监听器将会使用如下的参数格式被调用:
  • this : DataProxy
    请求操作的代理
  • o : Object
    请求的事务对象
  • options : Object
    回调函数的options属性 ，被传递给 request 函数。
DataProxy
loadexception : ( misc misc )
此事件已过时。 loadexception事件参数的签名依赖于代理， 使用能捕获所有异常的...

此事件已过时。 loadexception事件参数的签名依赖于代理， 使用能捕获所有异常的 exception 事件代替。 除了触发exception 事件之外，此事件也会触发。

监听器将会以如下的参数格式被调用:
  • misc : misc
    参见 exception。
DataProxy
write : ( DataProxy this , String action , Object data , Object response , Record/Record[] rs , Object options )
在请求的回调函数被调用之前触发。作为补充， 通过发出事件DataProxy实例触发...

在请求的回调函数被调用之前触发。

除了通过发出此事件的DataProxy实例触发之外， 此事件也通过Ext.data.DataProxy 类触发， 通过在Ext.data.Proxy类自身绑定一个监听器， 允许集中处理来自所有 DataProxie的write事件。

监听器将会使用如下的参数格式被调用:
  • this : DataProxy
    发送请求的代理
  • action : String
    [Ext.data.Api.actions.create|upate|destroy]
  • data : Object
    从服务器的响应中提取的数据对象
  • response : Object
    来自服务器被解码好的响应
  • rs : Record/Record[]
    来自Store的Record(s)
  • options : Object
    回调函数的options 属性， 被传递给 request 函数
DataProxy


Error
    DataReader.Error

Class Ext.data.DataReader.Error

包: | Ext.data
定义类的文件: | DataReader.js
类: | DataReader.Error
继承自: | Error
Ext.data.DataReader的通用错误类

公共属性

该类没有公共属性。

公共方法

Method Defined By
getMessage () : String
getMessage
getMessage
参数:
  • 无。
返回值:
  • String
Error
getName () : String
getName
getName
参数:
  • 无。
返回值:
  • String
Error
toJson () : String
toJson
toJson
参数:
  • 无。
返回值:
  • String
Error

公共事件

该类没有公共事件。


Class Ext.data.DataReader

包: | Ext.data
定义类的文件: | DataReader.js
类: | DataReader
子类: | JsonReader, XmlReader
继承自: | Object
抽象类用来从数据源结构化的数据中读取数据，并且 将它转化成一个对象， 包含了Ext.data.Record 对象和Ext.data.Store 所使用的元数据。 此类被设计用来继承并且不应该直接创建(该类的实例) 已有的实现类，参见 Ext.data.ArrayReader, Ext.data.JsonReader 和 Ext.data.XmlReader。

配置项

Config Options |  | Defined By
 | fields : Array/Object 要么是一个Field 对象定义数组(将会被传递给 Ext.data.Record.create)， 或者是一个使用... 要么是一个Field 对象定义数组(将会被传递给 Ext.data.Record.create)， 或者是一个使用 Ext.data.Record.create 创建的 Record 构造函数。 | DataReader
 | messageProperty : String [undefined] 服务端响应中一个可选的参数名，描述了一个用户反馈的消息。 | DataReader

公共属性

Property |  | Defined By
 | buildExtractors : Object 抽象防范，将会在DataReader的继承类例如 Ext.data.JsonReader 和 Ext.data.XmlReader中被覆盖。 | DataReader
 | extractValues : Object 抽象方法，在DataReader的实现类，例如 Ext.data.JsonReader 和 Ext.data.XmlReader 中被覆盖 | DataReader
 | getId : Object 在继承的buildExtractors实现中创建的抽象方法。 | DataReader
 | getMessage : Object 在buildExtractors实现中创建的抽象方法。 | DataReader
 | getRoot : Object 在buildExtractors实现中创建的抽象方法。 | DataReader
 | getSuccess : Object 抽象方法，在子类的buildExtractors中实现。 | DataReader
 | getTotal : Object 在buildExtractors实现中创建的抽象方法。 | DataReader
 | meta : Mixed DataReader所配置的元数据，被传递给构造函数。 | DataReader

公共方法

Method Defined By
DataReader ( Object meta , Array/Object recordType )
创建一个新的DataReader
创建一个新的DataReader
参数:
  • meta : Object
    配置项元数据(implementation-specific).
  • recordType : Array/Object

    要么是一个Field 对象定义数组(将会被传递给 Ext.data.Record.create)， 或者是一个使用 Ext.data.Record.create 创建的 Record 构造函数。

返回值:
  • void
DataReader
isData ( Object data ) : Boolean
如果提供的数据hash看起来 并且叫起来 像数据，此值为ture...
如果提供的数据hash看起来 并且叫起来 像数据，此值为ture。(译者注：有一句E文成语说"If it looks like a duck and it quacks like a duck,it is a duck."意思是说，如果一个东西看起来像一只鸭子 并且叫起来也像一只鸭子，那么它就是一只鸭子。这里的意思是说，如果提供的hash对象 就像数据。) 在你的DataReader配置项中检查，是否有一个对应到的idProperty的key 包含非空主键。
参数:
  • data : Object
返回值:
  • Boolean
DataReader
realize ( Record/Record[] record , Object/Object[] data ) : void
被用作在成功插入数据库之后将一条数据变成“非模拟的”。 连同来自服务端的新数据一起，设置记录的主键...
被用作在成功插入数据库之后将一条数据变成“非模拟的”。 连同来自服务端的新数据一起，设置记录的主键。 你必须至少返回数据库主键，使用你的DataReader中 配置的idProperty属性。 来自服务端的数据将会与本地的记录进行合并。 另外， 你返回的记录数据必须与来自服务器的数据顺序一致。 最好进行一次commit操作，消除“脏字段”的标记。 Store的"update"事件将会被禁止。
参数:
  • record : Record/Record[]
    需要变成实现的模拟数据。
  • data : Object/Object[]
    需要应用的新record数据。 必须包含来自数据库的主键，它是在idProperty字段中定义的。
返回值:
  • void
DataReader
update ( Record/Record[] rs , Object/Object[] data ) : void
在远端保存之后，使用来自服务器的新数据更新一条“非模拟”或者说“真实”记录的数据。...
在远端保存之后，使用来自服务器的新数据更新一条“非模拟”或者说“真实”记录的数据。 如果在一次“批量更新”之后返回多条记录， 你从服务器返回的记录数据必须与已经接受到的数据顺序一致。 最好进行一次commit操作，消除“脏字段”的标记。 Store的"update"事件将会被禁止，因为记录接收到了新的数据hash。
参数:
  • rs : Record/Record[]
  • data : Object/Object[]
返回值:
  • void
DataReader

公共事件

该类没有公共事件。


Class Ext.data.DataWriter

包: | Ext.data
定义类的文件: | DataWriter.js
类: | DataWriter
子类: | JsonWriter, XmlWriter
继承自: | Object

Ext.data.DataWriter使得Ext.data.Store和服务器端的CRUD变得更加方便。一个使用Writter的Store会自动管理Ajax请求，实现Store的CRUD操作。

Ext.data.DataWriter为抽象基类，应该被扩展而不应该直接使用。已有实现，见 Ext.data.JsonWriter。

创建一个写入器writer非常方便：

                var writer = new Ext.data.JsonWriter({
    encode: false   // <--- false则使数据打印至Ext.Ajax#reqeust的jsonData配置属性
});

同2.x版本中的老JsonReader一致：

                var reader = new Ext.data.JsonReader({idProperty: 'id'}, [{name: 'first'}, {name: 'last'}, {name: 'email'}]);

使用writer的store的代理proxy可以被配置添加一个简单的 url :

                // Create a standard HttpProxy instance.
var proxy = new Ext.data.HttpProxy({
    url: 'app.php/users'    // <--- 支持 "provides"-类型 url，如'/users.json'、'/products.xml' (Hello Rails/Merb)
});

通过使用 API ，代理proxy可以得到更细粒度的控制：

                // 依靠API配置提高灵活度
var proxy = new Ext.data.HttpProxy({
    api: {
        read    : 'app.php/users/read',
        create  : 'app.php/users/create',
        update  : 'app.php/users/update',
        destroy : {  // <--- 同样支持对象
            url: 'app.php/users/destroy',
            method: "DELETE"
        }
    }
});

全部放入使用writer的Store：

                var store = new Ext.data.Store({
    proxy: proxy,
    reader: reader,
    writer: writer,
    autoLoad: true,
    autoSave: true  // -- 单元格级别的更新
});

使用已有的Ext2.0中Store/Record的API自动初始化写操作：

                var rec = store.getAt(0);
rec.set('email', 'foo@bar.com');  // <--- 通过配置好的proxy立刻初始化UPDATE操作。

store.remove(rec);  // <---- 通过配置好的proxy立刻初始化DESTROY操作。

对于 record/batch更新，使用Store的配置 autoSave:false

                var store = new Ext.data.Store({
    proxy: proxy,
    reader: reader,
    writer: writer,
    autoLoad: true,
    autoSave: false  // -- 禁用单元更新
});

var urec = store.getAt(0);
urec.set('email', 'foo@bar.com');

var drec = store.getAt(1);
store.remove(drec);

// 按下按钮！
store.save();

配置项

Config Options |  | Defined By
 | createRecord : Function 抽象方法，需要在所有子类里实现 (例如: JsonWriter.createRecord) | DataWriter
 | destroyRecord : Function 需要在所有子类中实现的抽象方法 (例如: JsonWriter.destroyRecord) | DataWriter
 | listful : Boolean 默认false。设置为true来使DataWriter始终用列表... 默认false。设置为 true来使DataWriter 始终用列表的方式写HTTP参数，即便对单一记录操作。 | DataWriter
 | updateRecord : Function 所有子类应该实现的抽象方法 (如: JsonWriter.updateRecord | DataWriter
 | writeAllFields : Boolean 默认为false。设置为true使DataWriter返回修改记录的所有字段而非仅仅是改变的字... 默认为false。设置为 true使DataWriter返回修改记录的所有字段而非仅仅是改变的字段。 false使DataWriter只请求一条记录中改变的字段。 | DataWriter

公共属性

该类没有公共属性。

公共方法

Method Defined By
DataWriter ( Object meta , Object recordType )
Create a new DataWriter
Create a new DataWriter
参数:
  • meta : Object
    Metadata配置项（指定如何实现）
  • recordType : Object
    一个Ext.data.Record.create中指定的字段定义对象数组或者一个使用 Ext.data.Record.create建立的Ext.data.Record对象。
返回值:
  • void
DataWriter
apply ( Object params , Object baseParams , String action , Record/Record[] rs ) : void
将一个记录集合编译为由Ext.data.JsonWriter或者Ext.data.XmlWriter等扩展定义的数据格式...
将一个记录集合编译为由Ext.data.JsonWriter或者Ext.data.XmlWriter等扩展定义的数据格式，为服务器端写入操作server-write action做准备。头两个参数同Ext.apply类似，第一个用来接受，第二个是源。
参数:
  • params : Object
    请求参数接收器。
  • baseParams : Object
    在 Ext.data.Store.baseParams中定义。 baseParms必须由扩展类编码，如： Ext.data.JsonWriter， Ext.data.XmlWriter。
  • action : String
    [ create|update|destroy]
  • rs : Record/Record[]
    写入的记录集合，即写动作的目标。
返回值:
  • void
DataWriter
render ( String action , Record[] rs , Object params , Object data ) : void
所有DataWriter扩展需要覆盖的抽象方法。扩展需要将“数据”设置到“参...
所有DataWriter扩展需要覆盖的抽象方法。扩展需要将“数据”设置到“参数”上。根据用户的DataReader配置定义的meta信息来填充用于渲染的数据对象，
参数:
  • action : String
    [Ext.data.Api.actions.create|read|update|destroy]
  • rs : Record[]
    Store recordset
  • params : Object
    发送到服务器的Http参数。
  • data : Object
    根据DataReader的meta数据填充的对象。
返回值:
  • void
DataWriter
toArray ( Hash data ) : [Object]
将一个散列化Hashed的Ext.data.Record转化成为适合通过XTemplate编...
将一个散列化Hashed 的Ext.data.Record转化成为适合通过XTemplate编码为xml的字段数组， 例如：
<tpl for="."><{name}>{value}</{name}</tpl>
 non-phantom（非仿真，译者注：仿真phantom指的是记录不存在于服务器端，即前台伪数据）
{id: 1, first: 'foo', last: 'bar'} --> [{name: 'id', value: 1}, {name: 'first', value: 'foo'}, {name: 'last', value: 'bar'}]
 如果希望id自动产生，则Phantom （仿真）记录在 toHash中省略id属性。非AUTOINCREMENT的主键应该被保护起来。
参数:
  • data : Hash
    被Ext.data.DataWriter#toHash散列化的数据
返回值:
  • [Object]
    属性对象数组。
DataWriter
toHash ( Ext.data.Record rec , Object config ) : Object
将一条记录转化为散列表，其过程要考虑到Ext.data.Record的影响渲染的配置...
将一条记录转化为散列表，其过程要考虑到Ext.data.Record的影响渲染的配置属性的状态，如 writeAllFields、 phantom、 getChanges 和 idProperty
参数:
  • rec : Ext.data.Record
    用来散列化的记录。
  • config : Object
    未实现。将会实现一个exlude/only（排除/仅包含）配置项，用于良好控制哪些字段应该/不应该渲染。
返回值:
  • Object
DataWriter

公共事件

该类没有公共事件。


Observable
    DataProxy
      DirectProxy

Class Ext.data.DirectProxy

包: | Ext.data
定义类的文件: | DirectProxy.js
类: | DirectProxy
继承自: | DataProxy

配置项

Config Options Defined By
api : Object
指定 调用CRUD操作的方法： "read", "create", "update" 和 "destroy"的url。 默认为：...
指定 调用CRUD操作的方法： "read", "create", "update" 和 "destroy"的url。 默认为：
api: {
    read    : undefined,
    create  : undefined,
    update  : undefined,
    destroy : undefined
}

url根据被执行的操作[load|create|save|destroy]而创建， 使用相应的 api 参数，或者如果没有定义时默认为配置的 Ext.data.Store. url。

例如:

api: {
    load :    '/controller/load',
    create :  '/controller/new',  // 服务器必须返回新记录的idProperty
    save :    '/controller/update',
    destroy : '/controller/destroy_action'
}

// 作为第二选择，可以使用对象形式指定每个API-action
api: {
    load: {url: 'read.php', method: 'GET'},
    create: 'create.php',
    destroy: 'destroy.php',
    save: 'update.php'
}

对于给定的CRUD，如果指定的URL为undefined， CRUD操作的请求会被重定向到所配置的 url 上。

注意： 如果需要动态修改一个操作的URL，对应的API属性 必须在操作的请求发出之前进行修改， 修改时使用对应的before-action事件。 例如需要修改指定给load操作的URL：

// 修改操作的url
myStore.on({
    beforeload: {
        fn: function (store, options) {
            // 使用setUrl
                                    方法，*仅仅*为当前请求改变URL。
            store.proxy.setUrl('changed1.php');
            // 将第二个可选参数设置为true以便改变当前URL参数，
            // 将当前URL应用到所有后来的请求。
            store.proxy.setUrl('changed1.php', true);
            // 变更所要完成的代理API，使用公共
            // 方法 setApi
                                    。
            store.proxy.setApi('read', 'changed2.php');
            // 或者使用个配置对象设置整个API。
            // 当使用配置对象选项时，你必须重新定义整个
            // API -- 而不仅仅是一个特定的操作。
            store.proxy.setApi({
                read    : 'changed_read.php',
                create  : 'changed_create.php',
                update  : 'changed_update.php',
                destroy : 'changed_destroy.php'
            });
        }
    }
});

DataProxy
directFn : Function
在执行请求时调用的方法。directFn是定义Store的api配置参数...
在执行请求时调用的方法。directFn是定义Store的api配置参数 的一个简单可选方法，它将不会实现一个完整的CRUD api。
DirectProxy
doRequest : Function
抽象方法，所有子类都必须实现此方法。 注意: 只应该被需要自定义代理的开发者使用。 ...
抽象方法，所有子类都必须实现此方法。 注意: 只应该被需要自定义代理的开发者使用。 (例如: HttpProxy.doRequest, DirectProxy.doRequest)。
DataProxy
listeners : Object
一个包含一个或多个事件处理器的配置对象，会在初始化的时候被添加到目标对象上...

一个包含一个或多个事件处理器的配置对象，会在初始化的时候被添加到目标对象上。 该配置对象应该是一个有效的监听器配置对象就像 addListener例子中指定的一样可一次附加多个处理器。

ExtJs Components上的DOM事件

一些 ExtJs Component 类导出时会选择一些DOM事件(例如 "click", "mouseover" 等等), 这通常只是在有额外的值可以被添加时发生。例如DataView类的 click事件会传递被点击的节点。也可以直接在Component的HTMLElementevent上访问DOM事件，但必需在Component被渲染后监听器才能添加到Element 上。可以按照以下步骤添加插件:

// 插件会用一个监听器配置对象进行配置。
//该组件会被添加到所有处理方法的参数列表上。
Ext.DomObserver = Ext.extend(Object, {
    constructor: function(config) {
        this.listeners = config.listeners ? config.listeners : config;
    },

    // 组件将自己传递进了插件的初始化方法里
    init: function(c) {
        var p, l = this.listeners;
        for (p in l) {
            if (Ext.isFunction(l[p])) {
                l[p] = this.createHandler(l[p], c);
            } else {
                l[p].fn = this.createHandler(l[p].fn, c);
            }
        }

        // 渲染后立即添加监听器到元素上
        c.render = c.render.createSequence(function() {
            var e = c.getEl();
            if (e) {
                e.on(l);
            }
        });
    },

    createHandler: function(fn, c) {
        return function(e) {
            fn.call(this, e, c);
        };
    }
});

var combo = new Ext.form.ComboBox({

    // 元素被点击后折叠
    plugins: [ new Ext.DomObserver({
        click: function(evt, comp) {
            comp.collapse();
        }
    })],
    store: myStore,
    typeAhead: true,
    mode: 'local',
    triggerAction: 'all'
});

Observable
onRead : Function
抽象方法，所有子类都必须实现此方法。 注意: 只应该被需要自定义代理的开发者使用。...
抽象方法，所有子类都必须实现此方法。 注意: 只应该被需要自定义代理的开发者使用。 read 操作 的回调函数。
DataProxy
onWrite : Function
抽象方法，所有子类都必须实现此方法。 注意: 只应该被需要自定义代理的开发者使用。...
抽象方法，所有子类都必须实现此方法。 注意: 只应该被需要自定义代理的开发者使用。 create, update和destroy 操作 的回调函数。
DataProxy
paramOrder : Array/String
默认为undefined。 需要在服务端执行的参数列表。 指定必须在服务端执行的参数，它们可以是...
默认为undefined。 需要在服务端执行的参数列表。 指定必须在服务端执行的参数，它们可以是： (1) 一个字符串数组； (2) 字符串参数，使用空格、逗号或者管道符号(指|)进行分隔。 例如，可以接受以下任何一种:
paramOrder: ['param1','param2','param3']
paramOrder: 'param1 param2 param3'
paramOrder: 'param1,param2,param3'
paramOrder: 'param1|param2|param'
DirectProxy
paramsAsHash : Boolean
使用命名参数集合发送参数(默认为 true)。 使用一个 paramOrder 可以使此配置项无效。
使用命名参数集合发送参数(默认为 true)。 使用一个 paramOrder 可以使此配置项无效。
DirectProxy
restful : Boolean
默认为 false。 设置为true以便用一种安静(RESTful)模式进行操作。...

默认为 false。 设置为true以便用一种安静(RESTful)模式进行操作。

注意： 如果被插入的 Ext.data.Store 被设置为 restful: true ， 此参数将会被自动设置为true。 如果Store是RESTful的， 没有必要在代理上设置此配置。

RESTful型的实现允许服务端框架 根据HTTP方法自动发送操作到一个url， 例如:

store: new Ext.data.Store({
    restful: true,
    proxy: new Ext.data.HttpProxy({url:'/users'}); // all requests sent to /users
    ...
)}
如果代理的配置项中没有指定 api 所有请求都将被集中到一个单独的RESTful url (/users)， 这样服务端框架可以监测HTTP Method并做出相应的操作:
Method   url        action
POST     /users     create
GET      /users     read
PUT      /users/23  update
DESTROY  /users/23  delete

如果设置为true， 非模拟的 记录的id 将会被添加到url之后。 某些MVC(例如Ruby on Rails, Merb和 Django)支持 基于url的片段，URL中的片段遵守 Model-View-Controller 模式:

someSite.com/controller/action/id
典型情况下url的片段:
  • 第一段：描述了应该被调用的控制类。
  • 第二段： 描述了需要调用的类函数，或者方法。
  • 第三段： 描述了ID(典型情况下传递给方法的参数)。

附加信息参见 Ext.data.DataProxy.api 。

DataProxy

公共属性

该类没有公共属性。

公共方法

Method Defined By
addEvents( Object|String o, string Optional. ) : void
添加指定的事件到事件列表上，事件会被该Observable触发。
添加指定的事件到事件列表上，事件会被该Observable触发。
参数:
  • o : Object|String
    以事件名作为属性true作为值的对象 或者当多个事件名被分开的传递时则为第一个事件名。
  • Optional. : string
    事件名被分开的传递时则为事件名。 用法:
    this.addEvents('storeloaded', 'storecleared');
返回值:
  • void
Observable
addListener( String eventName, Function handler, [Object scope], [Object options] ) : void
给对象添加事件处理器。
给对象添加事件处理器。
参数:
  • eventName : String
    监听的事件名。
  • handler : Function
    事件调用的方法
  • scope : Object
    （可选）处理方法执行的作用域 (this的引用 reference)。 如果被忽略。默认为触发事件的对象。
  • options : Object
    （可选）包含处理器配置和属性的对象。 可能包含以下的属性:
    • scope : Object
      处理方法执行的作用域(this的引用) 。 如果被忽略。默认为触发事件的对象。
    • delay : Number
      在触发事件后延迟调用处理器的毫秒数。
    • single : Boolean
      如果为True则添加一个处理器来处理下一次的事件触发（仅一次），然后移除自己。
    • buffer : Number
      使得处理器延迟指定毫秒数后预定的运行在 一个Ext.util.DelayedTask中 。 如果事件在时间内再一次被触发，原始的处理器不会被调用，但是新的处理器会预定的在他的位置上。
    • target : Observable
      如果事件在目标的Observable上触发则仅仅调用处理器， 否则 事件会从子类的Observable上冒泡

    组合选项
    使用这些选项参数,可能会组合出不同类型的监听器：

    一个延迟的，一次性的监听器。

    myDataView.on('click', this.onClick, this, {
single: true,
delay: 100
});

    一次调用附加多个处理器
    该方法同样支持传递一个包含指定的多个处理器的属性的配置对象参数。

    myGridPanel.on({
'click' : {
    fn: this.onClick,
    scope: this,
    delay: 100
},
'mouseover' : {
    fn: this.onMouseOver,
    scope: this
},
'mouseout' : {
    fn: this.onMouseOut,
    scope: this
}
});

    或者一个简写的语法：

    myGridPanel.on({
'click' : this.onClick,
'mouseover' : this.onMouseOver,
'mouseout' : this.onMouseOut,
 scope: this
});
返回值:
  • void
Observable
destroy () : void
通过清除所有事件监听器、取消所有活动的请求，销毁代理。
通过清除所有事件监听器、取消所有活动的请求，销毁代理。
参数:
  • 无。
返回值:
  • void
DataProxy
doRequest ( String action , Ext.data.Record/Ext.data.Record[] rs , Object params , Ext.data.DataReader reader , Function callback , Object scope , Object arg ) : void
DirectProxy的 Ext.data.DataProxy.doRequest 一个实现。
DirectProxy的 Ext.data.DataProxy.doRequest 一个实现。
参数:
  • action : String
    CRUD操作的类型(create, read, update, destroy)
  • rs : Ext.data.Record/Ext.data.Record[]
    如果操作被加载， rs将会是null
  • params : Object
    一个包含参数的对象，它将被用作发送到远程服务器请求的 HTTP参数。
  • reader : Ext.data.DataReader
    Reader对象，它把数据对象转换为Ext.data.Record数据块。
  • callback : Function

    在请求之后调用的函数。 回调函数将会被传递如下参数：

    • r : Ext.data.Record[] Ext.data.Record数据块。
    • options: 来自请求操作的选项对象
    • success: Boolean 操作成功标志位

  • scope : Object
    作用域( this 引用) 回调函数将会在其中被执行。 默认为浏览器window对象。
  • arg : Object
    一个可选参数，将会作为第二个参数被传递给回调函数。
返回值:
  • void
DirectProxy
enableBubble( String/Array events ) :void
是否现在使得事件会被该Observable触发并调用 this.getBubbleTarget()方法在拥有者的继承树...

是否现在使得事件会被该Observable触发并调用 this.getBubbleTarget()方法在拥有者的继承树中冒泡。Observable的基础类中没有该方法的实现。

该方法一般被Ext.Components用来冒泡事件到拥有者的容器。参看Ext.Component.getBubbleTarget默认的实现 在Ext.Component中返回组件的直接拥有者。但是如果需要的是一个已知的目标，该方法可以被重写来更快的访问需求的目标。

例子:

Ext.override(Ext.form.Field, {
    // 添加方法到Field的initComponent上改变事件为冒泡
    initComponent : Ext.form.Field.prototype.initComponent.createSequence(function() {
        this.enableBubble('change');
    }),

    // 我们知道我们想让Field的事件冒泡到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() {
            // 如果样式被修改标题会变红。
            myForm.header.setStyle('color', 'red');
        }
    }
});
参数:
  • events : String/Array
    冒泡的事件名，或事件名数组
返回值:
  • void
Observable
fireEvent( String eventName, Object... args ) : Boolean
用传入的参数触发指定的事件 (减去事件名)。 一个事件可以被设置为冒泡 Obse...

用传入的参数触发指定的事件 (减去事件名)。

一个事件可以被设置为冒泡到Observable父类继承树(参看 Ext.Component.getBubbleTarget) 调用enableBubble实现。

参数:
  • eventName : String
    触发的事件名。
  • args : Object...
    传递给处理器的可变长度参数。
返回值:
  • Boolean
    如果有任何的处理器返回false则返回false，否则返回true。
Observable
hasListener( String eventName ) : Boolean
检测对象是否包含指定事件的任何监听器
检测对象是否包含指定事件的任何监听器
参数:
  • eventName : String
    检测的事件名
返回值:
  • Boolean
    如果事件被监听则为true，否则为false
Observable
isApiAction ( String [Ext.data.Api.CREATE|READ|UPDATE|DESTROY]} ) : Boolean
如果指定的action 是作为一个单独的action在api-config.request中被定义的， 返回true。 如果所有的API-actions...
如果指定的action 是作为一个单独的action在api-config.request中被定义的， 返回true。 如果所有的API-actions 都被发送到唯一的url， 那么xaction参数不是必须的。 但是，如果没有定义api并且所有代理action被发送到DataProxy#url， 服务端需要xaction参数为CRUD操作执行 一次到相应代码的转换。
参数:
  • [Ext.data.Api.CREATE|READ|UPDATE|DESTROY]} : String
    action
返回值:
  • Boolean
DataProxy
load ( Object params , Object reader , Object callback , Object scope , Object arg ) : void
已过时 load方法使用旧的方法签名。 推荐的方法参见{@doRequest}。
已过时 load方法使用旧的方法签名。 推荐的方法参见{@doRequest}。
参数:
  • params : Object
  • reader : Object
  • callback : Object
  • scope : Object
  • arg : Object
返回值:
  • void
DataProxy
on( String eventName, Function handler, [Object scope], [Object options] ) : void
给对象添加事件处理器 (addListener的简写形式)
给对象添加事件处理器 (addListener的简写形式。)
参数:
  • eventName : String
    监听的事件类型
  • handler : Function
    事件调用的方法
  • scope : Object
    （可选）处理方法执行时的作用域 (this 的引用)。 如果被忽略。默认为触发事件的对象。
  • options : Object
    可选 包含处理器配置的对象。
返回值:
  • void
Observable
onRead ( String action , Object trans , Object result , Object res ) : void
read操作的回调函数
read操作的回调函数
参数:
  • action : String
    [Ext.data.Api.actions.create|read|update|destroy]
  • trans : Object
    请求事务对象
  • result : Object
    从服务器响应中提取的数据对象。
  • res : Object
    服务端响应
返回值:
  • void
DirectProxy
onWrite ( String action , Object trans , Object result , Object res , Ext.data.Record/[Ext.data.Record] rs ) : void
写操作的回调函数
写操作的回调函数
参数:
  • action : String
    [ create|read|update|destroy]
  • trans : Object
    请求事务对象
  • result : Object
    从服务器响应中提取的数据对象。
  • res : Object
    服务器响应
  • rs : Ext.data.Record/[Ext.data.Record]
    操作关联的Store结果集。
返回值:
  • void
DirectProxy
purgeListeners() : void
移除对象上所有的监听器
移除对象上所有的监听器
参数:
  • 无。
返回值:
  • void
Observable
relayEvents( Object o, Array events ) : void
从指定的Observable上传递选择的事件就好像被当前对象触发一样。
从指定的Observable上传递选择的事件就好像被当前对象触发一样。
参数:
  • o : Object
    该Observable上的事件被当前对象传递。
  • events : Array
    传递的数组名。
返回值:
  • void
Observable
removeListener( String eventName, Function handler, [Object scope] ) : void
删除一个事件处理器。
删除一个事件处理器。
参数:
  • eventName : String
    处理器关联的事件类型。
  • handler : Function
    移除的处理器。 这应该是传递到addListener里的方法的引用。
  • scope : Object
    （可选）处理器指定的初始作用域。
返回值:
  • void
Observable
request ( String action , Ext.data.Record/Ext.data.Record[]/null rs , Object params , Ext.data.DataReader reader , Function callback , Object scope , Object options ) : void
所有代理操作都通过此方法执行。 自动触发"before" + action事件。
所有代理操作都通过此方法执行。 自动触发"before" + action事件。
参数:
  • action : String
    操作名称
  • rs : Ext.data.Record/Ext.data.Record[]/null
    当是'load'操作时此值为null
  • params : Object
  • reader : Ext.data.DataReader
  • callback : Function
  • scope : Object
    作用域 ( this 引用) 回调函数将会在其中被执行。 默认为Proxy对象。
  • options : Object
    所有为操作指定的选项(示例参见 Ext.data.Store.load。
返回值:
  • void
DataProxy
resumeEvents() : void
重新开始触发事件。(参见suspendEvents) 如果事件以queueSuspended参数被挂起，则在事件被挂起时 ...
重新开始触发事件。(参见 suspendEvents) 如果事件以queueSuspended 参数被挂起，则在事件被挂起时触发的事件会被传递到所有的监听器上
参数:
  • 无。
返回值:
  • void
Observable
setApi ( String/Object api , String/Function url ) : void
重定义代理API或则一个API的单次操作。 可以使用两个方法签名调用。...

重定义代理API或则一个API的单次操作。 可以使用两个方法签名调用。

如果使用一个对象作为唯一的参数进行调用， 此对象在entire API中重新定义， 例如:

proxy.setApi({
    read    : '/users/read',
    create  : '/users/create',
    update  : '/users/update',
    destroy : '/users/destroy'
});

如果使用两个参数进行调用， 调用那个操作时，第一个参数必须是一个字符串，它指定需要重定义的API操作， 同时第二个参数必须是URL( 或者是一个函数，如果使用DirectProxy)， 例如:

                                proxy.setApi(Ext.data.Api.actions.read, '/users/new_load_url');
参数:
  • api : String/Object
    一个API描述对象，或者是action名。
  • url : String/Function
    调用action的URL( 或者是一个函数，如果使用DirectProxy)。
返回值:
  • void
DataProxy
suspendEvents( Boolean queueSuspended ) : void
暂停触发所有的事件。 (参看resumeEvents)
暂停触发所有的事件。（参看 resumeEvents)
参数:
  • queueSuspended : Boolean
    如果传递为true则排列好暂停的事件使得在调用 resumeEvents 后再触发它们，而不是抛弃所有暂停的事件。
返回值:
  • void
Observable
un( String eventName, Function handler, [Object scope] ) : void
删除一个事件处理器(removeListener方法的简写形式)
删除一个事件处理器(removeListener方法的简写形式。)
参数:
  • eventName : String
    处理器关联的事件类型
  • handler : Function
    被删除的处理器 这应该是传入 addListener 中的方法的引用。
  • scope : Object
    （可选）为处理器指定的初始作用域。
返回值:
  • void
Observable

公共事件

Event Defined By
beforeload : ( DataProxy this , Object params )
在发送请求获取数据对象之前触发。
在发送请求获取数据对象之前触发。
监听器将会以如下的参数格式被调用:
  • this : DataProxy
    发送请求的代理
  • params : Object
    传递给 request 函数的参数对象
DataProxy
beforewrite : ( DataProxy this , String action , Record/Record[] rs , Object params )
当为如下操作Ext.data.Api.actions.create|update|destroy 产生一个请求之前触发。除了通过...

当为如下操作Ext.data.Api.actions.create|update|destroy 产生一个请求之前触发。

除了通过发出此事件的DataProxy实例触发之外， 此事件也通过Ext.data.DataProxy 类触发， 通过在Ext.data.Proxy类自身绑定一个监听器， 允许集中处理来自所有 DataProxie的beforewrite事件。

监听器将会使用如下参数格式被调用:
  • this : DataProxy
    请求的代理
  • action : String
    [Ext.data.Api.actions.create|update|destroy]
  • rs : Record/Record[]
    需要create|update|destroy的Record(s)。
  • params : Object
    请求的 params 对象。 编辑 params 以便向请求中添加参数。
DataProxy
exception : ( DataProxy this , String type , String action , Object options , Object response , Mixed arg )
在进行远程请求时，如果在Proxy内部发生异常，触发此事件。 此事件通过对应的....

在进行远程请求时，如果在Proxy内部发生异常，触发此事件。 此事件通过对应的 Ext.data.Store . exception 进行转发，所以，所有Store的实例都可以监听此事件。

除了通过发出此事件的DataProxy实例触发之外， 此事件也通过Ext.data.DataProxy 类触发， 通过在Ext.data.Proxy类自身绑定一个监听器， 允许集中处理来自所有 DataProxie的exception事件。

此事件可以因为如下两个原因之一而被触发:

  • remote-request failed :
    服务器没有返回状态码=== 200
  • remote-request succeeded :
    远程请求已经成功，但是reader无法读取响应。 这意味着服务器返回了数据， 但是配置的Rader在读取响应时抛出了异常。 这种情况下，此事件被触发并且捕捉到的错误 将会被一起传递到此事件中。

根据第二个参数type [remote|response]， 此事件在两种不同的上下文触发。 在两种上下文中，前四个参数是一样的--- 只有最后两个参数不同。

监听器将会以如下的参数格式被调用:
  • this : DataProxy
    发出请求的代理
  • type : String

    此参数的值可以是'response'或者'remote'。

    • 'response' :

      服务器返回了一个无效的响应: 要么是404, 500或者响应的元数据 与DataReader中所定义的不符 (例如: root, idProperty, successProperty)。

    • 'remote' :

      服务器返回了一个有效的 响应，有一个参数successProperty === false. 此响应可以包含一个来自服务器的出错信息。 例如， 用户认证/授权(authentication/authorization)失败 ，或者发生了数据库校验错误。

  • action : String
    操作名称(参见 Ext.data.Api.actions。
  • options : Object
    在request 中为操作指定的配置项。
  • response : Object

    此参数的值依赖于 type 参数的值：

    • 'response' :

      原始的浏览器响应对象(例如: XMLHttpRequest)

    • 'remote' :

      来自服务器的已经解码的响应对象。

  • arg : Mixed

    此参数的类型和值依赖于 type 参数的值：

    • 'response' : Error

      如果配置的Reader无法读取数据，此参数为JavaScript Error对象。 如果远程请求返回success===false，此参数将会为null。

    • 'remote' : Record/Record[]

      只有在action是一个write action (Ext.data.Api.actions.create|update|destroy)时 才存在此参数

DataProxy
load : ( DataProxy this , Object o , Object options )
在load方法地方回调函数被调用之前触发。
在load方法地方回调函数被调用之前触发。
监听器将会使用如下的参数格式被调用:
  • this : DataProxy
    请求操作的代理
  • o : Object
    请求的事务对象
  • options : Object
    回调函数的options属性 ，被传递给 request 函数。
DataProxy
loadexception : ( misc misc )
此事件已过时。 loadexception事件参数的签名依赖于代理， 使用能捕获所有异常的...

此事件已过时。 loadexception事件参数的签名依赖于代理， 使用能捕获所有异常的 exception 事件代替。 除了触发exception 事件之外，此事件也会触发。

监听器将会以如下的参数格式被调用:
  • misc : misc
    参见 exception。
DataProxy
write : ( DataProxy this , String action , Object data , Object response , Record/Record[] rs , Object options )
在请求的回调函数被调用之前触发。作为补充， 通过发出事件DataProxy实例触发...

在请求的回调函数被调用之前触发。

除了通过发出此事件的DataProxy实例触发之外， 此事件也通过Ext.data.DataProxy 类触发， 通过在Ext.data.Proxy类自身绑定一个监听器， 允许集中处理来自所有 DataProxie的write事件。

监听器将会使用如下的参数格式被调用:
  • this : DataProxy
    发送请求的代理
  • action : String
    [Ext.data.Api.actions.create|upate|destroy]
  • data : Object
    从服务器的响应中提取的数据对象
  • response : Object
    来自服务器被解码好的响应
  • rs : Record/Record[]
    来自Store的Record(s)
  • options : Object
    回调函数的options 属性， 被传递给 request 函数
DataProxy


Observable
    Store
      DirectStore

Class Ext.data.DirectStore

包: | Ext.data
定义类的文件: | DirectStore.js
类: | DirectStore
继承自: | Store

一个小工具类， 使用配置的 Ext.data.DirectProxy 和 Ext.data.JsonReader 创建一个 Ext.data.Store ，并且能与Ext.Direct 的服务端Provider更方便地交互。 如需创建一个不同的proxy/reader组合， 可以创建一个基本的 Ext.data.Store 然后配置成所需的形式。

*注意: 尽管没有被列出，该类继承了如下类的所有配置选项：

  • Store
  • JsonReader
    • root
    • idProperty
    • totalProperty
  • DirectProxy
    • directFn
    • paramOrder
    • paramsAsHash

配置项

Config Options Defined By
autoDestroy : Boolean
如果此参数为true，当绑定此store的组件被销毁之后此store也会...
如果此参数为true，当绑定此store的组件被销毁之后此store也会被销毁 (默认为 false)。

注意: 当store被仅仅绑定到一个组件时，应该把此参数设置成true。

Store
autoLoad : Boolean/Object
如果没有指定 data 参数，并且 autoLoad参数为 true或者为一个Object， store的...
如果没有指定 data 参数，并且 autoLoad参数为 true或者是一个对象(Object)， store的 load 方法将会在创建之后自动被调用。 如果autoLoad的值是一个对象(Object)， 此对象将会被传递给store的 load 方法。
Store
autoSave : Boolean
默认为true 将导致在一条记录被修改(例如: 变脏('dirty'))之后store自动地把记录...

默认为true 将导致在一条记录被修改(例如: 变脏('dirty'))之后store自动地把记录 save 到服务器端。 指定为false可以手动把所有修改的记录 save 到服务端。

注意: CRUD操作将会作为单独的请求发送。

Store
baseParams : Object
此参数的描述参见 corresponding 配置项 。 如需修改此参数，参见 setBaseParam 。
此参数的描述参见 corresponding 配置项 。 如需修改此参数，参见 setBaseParam 。
Store
batch : Boolean
默认为 true (除非 restful:true )。 每个CRUD操作的多次请求 (CREATE, READ, UPDATE...

默认为 true (除非 restful:true )。 每个CRUD操作的多次请求 (CREATE, READ, UPDATE 和 DESTROY)将会被合在一起并且作为一次事务发送出去。 只有在 autoSave 参数被设置成 false时应用。

如果Store是安静模式(RESTful)，DataProxy也是安静的(RESTful)， 这样会为每条记录创建一个独立的事务。

Store
data : Array
一个内嵌的数据对象，可以被 reader 读取。 典型情况下，指定此选项，或者 url 选项。
Store
defaultParamNames : Object
为 paramNames 提供默认值。 如需在全局范围修改所有store的参数...
为 paramNames 提供默认值。 如需在全局范围修改所有store的参数，必须在store的prototype上 修改此对象。
Store
listeners : Object
一个包含一个或多个事件处理器的配置对象，会在初始化的时候被添加到目标对象上...

一个包含一个或多个事件处理器的配置对象，会在初始化的时候被添加到目标对象上。 该配置对象应该是一个有效的监听器配置对象就像 addListener例子中指定的一样可一次附加多个处理器。

ExtJs Components上的DOM事件

一些 ExtJs Component 类导出时会选择一些DOM事件(例如 "click", "mouseover" 等等), 这通常只是在有额外的值可以被添加时发生。例如DataView类的 click事件会传递被点击的节点。也可以直接在Component的HTMLElementevent上访问DOM事件，但必需在Component被渲染后监听器才能添加到Element 上。可以按照以下步骤添加插件:

// 插件会用一个监听器配置对象进行配置。
//该组件会被添加到所有处理方法的参数列表上。
Ext.DomObserver = Ext.extend(Object, {
    constructor: function(config) {
        this.listeners = config.listeners ? config.listeners : config;
    },

    // 组件将自己传递进了插件的初始化方法里
    init: function(c) {
        var p, l = this.listeners;
        for (p in l) {
            if (Ext.isFunction(l[p])) {
                l[p] = this.createHandler(l[p], c);
            } else {
                l[p].fn = this.createHandler(l[p].fn, c);
            }
        }

        // 渲染后立即添加监听器到元素上
        c.render = c.render.createSequence(function() {
            var e = c.getEl();
            if (e) {
                e.on(l);
            }
        });
    },

    createHandler: function(fn, c) {
        return function(e) {
            fn.call(this, e, c);
        };
    }
});

var combo = new Ext.form.ComboBox({

    // 元素被点击后折叠
    plugins: [ new Ext.DomObserver({
        click: function(evt, comp) {
            comp.collapse();
        }
    })],
    store: myStore,
    typeAhead: true,
    mode: 'local',
    triggerAction: 'all'
});

Observable
paramNames : Object
一个包含多个属性的对象，指定了分页和排序参数的名称，在加载数据时被传递给...

一个包含多个属性的对象，指定了分页和排序参数的名称，在加载数据时被传递给 远程服务器。 默认情况下，此对象拥有如下格式:

{
    start : 'start',  // 指定起始行的参数名
    limit : 'limit',  // 指定返回数据条数的参数名
    sort : 'sort',    // 指定排序字段的参数名
    dir : 'dir'       // 指定排序方向的参数名
}

服务器必须根据收到的这些参数名创建所请求的数据块。 如果需要不同的参数名称，可以使用配置项覆盖这些参数。

绑定到当前Store的 PagingToolbar ，使用此参数指定 它的requests 中的参数名称。

Store
proxy : Ext.data.DataProxy
DataProxy 对象，它提供对数据对象的访问。 参见 url 。
Store
pruneModifiedRecords : Boolean
此值为true将在 store被加载或者一条记录被删除时 清除所有记录的修改信息(默认为...
此值为true将在 store被加载或者一条记录被删除时 清除所有记录的修改信息(默认为 false)。参见 getModifiedRecords 的访问函数(指getter/setter)以获得修改的记录。
Store
reader : Ext.data.DataReader
Reader 对象负责处理数据对象并返回一个 Ext.data.Record 对象数组，它们被使用其...
Reader 对象负责处理数据对象并返回一个 Ext.data.Record 对象数组，它们被使用其 id 属性作key进行缓存。
Store
remoteSort : boolean
如果此参数为true，处理排序操作的方式是，通过请求 Proxy 提供一个数据已经排好顺序的版本...
如果此参数为true，处理排序操作的方式是，通过请求 Proxy 提供一个数据已经排好顺序的版本， 而不是在缓存中对记录进行排序(默认为 false)。

如果remoteSort 为 true 那么在一个Grid Column的 header 被点击时，将会从服务器请求当前页面，并且在 params 中添加如下两个参数:

  • sort : String

    需要排序的字段名 (就像在Record的 Field definition中指定的那样)。

  • dir : String

    排列的方向，'ASC' 或者 'DESC' (大小写敏感)。

Store
restful : Boolean
默认为false。 设置为true 将会使Store和Proxy的操作以安静(RESTful)的状态进行...
默认为false。 设置为true 将会使Store和Proxy的操作以安静(RESTful)的状态进行。 store将会自动生成到服务器的GET, POST, PUT 和 DELETE 请求。 任何给定CRUD操作的HTTP方式(method)都在 Ext.data.Api.restActions 有描述。 附加信息参见 Ext.data.DataProxy.restful。

注意: 如果 restful:true 将会隐含设置为 批处理(batch) 。默认为 false。

Store
sortInfo : Object
一个配置对象，指定Store请求数据时load 操作的排序规则。 注意，对于本地排序...
一个配置对象，指定Store请求数据时load 操作的排序规则。 注意，对于本地排序，direction参数是大小写敏感的。 另请参见 remoteSort 和 paramNames。 例如:
sortInfo: {
    field: 'fieldName',
    direction: 'ASC' // or 'DESC' (case sensitive for local sorting)
}
Store
storeId : String
如果传递此参数，此id将会使用StoreMgr 进行注册。...
如果传递此参数，此id将会使用StoreMgr 进行注册。

注意: 如果指定了一个 id (不建议) 它将会取代分配的storeId。

Store
url : String
如果没有指定 proxy ，此url将会被用来隐含配置一个...
如果没有指定 proxy ，此url将会被用来隐含配置一个 HttpProxy 。 典型情况下要么指定此选项，要么指定 data 选项。
Store
writer : Ext.data.DataWriter
Writer 对象负责处理record对象，它们将会被写入服务端数据库。...

Writer 对象负责处理record对象，它们将会被写入服务端数据库。

如果writer被配置到Store中， store的 add, remove,和 update 事件将会被监听，以便在远端 创建记录, 销毁记录, 或者 更新记录。

store的proxy将会把所有 writexception 事件转播给当前store

示例实现:

var writer = new Ext.data.JsonWriter({
    encode: true,
    writeAllFields: true // 写入所有字段，而不仅仅是那些发生变化的字段
});

// 典型的Store，包含了Proxy,Reader和Writer
var store = new Ext.data.Store({
    storeId: 'user',
    root: 'records',
    proxy: proxy,
    reader: reader,
    writer: writer,     // <--在store中插入一个DataWriter就像你插入一个Reader
    paramsAsHash: true,
    autoSave: false    // <-- false讲延迟执行create, update, destroy请求
                       //直到被特别指定如此做。
});

Store

公共属性

Property Defined By
baseParams : Object
此参数的描述参见 corresponding 配置项 。 如需修改此参数，参见 setBaseParam 。
此参数的描述参见 corresponding 配置项 。 如需修改此参数，参见 setBaseParam 。
Store
fields : Ext.util.MixedCollection
一个MixedCollection，包含了Store中 Records 的字段(Fields)定义。
Store
hasMultiSort : Boolean 如果store当前使用多个field/direction联合排序，此值为true。
Store
isDestroyed : Boolean 如果store已经被销毁，此值为true。只读。
Store
lastOptions : Object
包含 load 方法最近一次使用的配置参数对象。 此参数所包含的内容详情...
包含 load 方法最近一次使用的配置参数对象。 此参数所包含的内容详情，参见 load 方法。对访问加载当前Record缓存时所使用的所有参数来说，此属性非常有用。
Store
multiSortInfo : Object 包含所有排序方向，以及在对多个字段进行排序时使用的排序配置的对象。
Store
recordType : Function
为 Reader 提供的(或者创建的) Record 构造函数。只读。...
为 Reader 提供的(或者创建的) Record 构造函数。只读。

如果Reader是通过传递一个 Ext.data.Field 定义对象数组来构造的， 他将隐含地从这个数组 创建一个Record的构造器。 (附加信息参见 Ext.data.Record. create)。

此参数可被用来在Store中创建指定类型的Record，例如:

// 创建数据缓存(data store)
    var store = new Ext.data.ArrayStore({
        autoDestroy: true,
        fields: [
           {name: 'company'},
           {name: 'price', type: 'float'},
           {name: 'change', type: 'float'},
           {name: 'pctChange', type: 'float'},
           {name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
        ]
    });
    store.loadData(myData);

    // 创建Grid
    var grid = new Ext.grid.EditorGridPanel({
        store: store,
        colModel: new Ext.grid.ColumnModel({
            columns: [
                {id:'company', header: 'Company', width: 160, dataIndex: 'company'},
                {header: 'Price', renderer: 'usMoney', dataIndex: 'price'},
                {header: 'Change', renderer: change, dataIndex: 'change'},
                {header: '% Change', renderer: pctChange, dataIndex: 'pctChange'},
                {header: 'Last Updated', width: 85,
                    renderer: Ext.util.Format.dateRenderer('m/d/Y'),
                    dataIndex: 'lastChange'}
            ],
            defaults: {
                sortable: true,
                width: 75
            }
        }),
        autoExpandColumn: 'company', // 与column model中指定的id对应
        height:350,
        width:600,
        title:'Array Grid',
        tbar: [{
            text: 'Add Record',
            handler : function(){
                var defaultData = {
                    change: 0,
                    company: 'New Company',
                    lastChange: (new Date()).clearTime(),
                    pctChange: 0,
                    price: 10
                };
                var recId = 3; // 提供唯一的id
                var p = new store.recordType(defaultData, recId); // 创建新记录
                grid.stopEditing();
                store.insert(0, p); // 向store中插入一条新记录(另请参见add)
                grid.startEditing(0, 0);
            }
        }]
    });
Store

公共方法

Method Defined By
DirectStore ( Object config )
参数:
  • config : Object
返回值:
  • void
DirectStore
add ( Ext.data.Record[] records ) : void
向Store中添加记录 并触发 add 事件。 如需通过一个远程数据源向Store中添加记录，请使用...
向Store中添加记录 并触发 add 事件。 如需通过一个远程数据源向Store中添加记录，请使用 load({add:true}) 。 另请参见 recordType 和 insert 。
参数:
  • records : Ext.data.Record[]
    需要添加到缓存中的一个 Ext.data.Record对象数组。 参见 recordType。
返回值:
  • void
Store
addEvents( Object|String o, string Optional. ) : void
添加指定的事件到事件列表上，事件会被该Observable触发。
添加指定的事件到事件列表上，事件会被该Observable触发。
参数:
  • o : Object|String
    以事件名作为属性true作为值的对象 或者当多个事件名被分开的传递时则为第一个事件名。
  • Optional. : string
    事件名被分开的传递时则为事件名。 用法:
    this.addEvents('storeloaded', 'storecleared');
返回值:
  • void
Observable
addListener( String eventName, Function handler, [Object scope], [Object options] ) : void
给对象添加事件处理器。
给对象添加事件处理器。
参数:
  • eventName : String
    监听的事件名。
  • handler : Function
    事件调用的方法
  • scope : Object
    （可选）处理方法执行的作用域 (this的引用 reference)。 如果被忽略。默认为触发事件的对象。
  • options : Object
    （可选）包含处理器配置和属性的对象。 可能包含以下的属性:
    • scope : Object
      处理方法执行的作用域(this的引用) 。 如果被忽略。默认为触发事件的对象。
    • delay : Number
      在触发事件后延迟调用处理器的毫秒数。
    • single : Boolean
      如果为True则添加一个处理器来处理下一次的事件触发（仅一次），然后移除自己。
    • buffer : Number
      使得处理器延迟指定毫秒数后预定的运行在 一个Ext.util.DelayedTask中 。 如果事件在时间内再一次被触发，原始的处理器不会被调用，但是新的处理器会预定的在他的位置上。
    • target : Observable
      如果事件在目标的Observable上触发则仅仅调用处理器， 否则 事件会从子类的Observable上冒泡

    组合选项
    使用这些选项参数,可能会组合出不同类型的监听器：

    一个延迟的，一次性的监听器。

    myDataView.on('click', this.onClick, this, {
single: true,
delay: 100
});

    一次调用附加多个处理器
    该方法同样支持传递一个包含指定的多个处理器的属性的配置对象参数。

    myGridPanel.on({
'click' : {
    fn: this.onClick,
    scope: this,
    delay: 100
},
'mouseover' : {
    fn: this.onMouseOver,
    scope: this
},
'mouseout' : {
    fn: this.onMouseOut,
    scope: this
}
});

    或者一个简写的语法：

    myGridPanel.on({
'click' : this.onClick,
'mouseover' : this.onMouseOver,
'mouseout' : this.onMouseOut,
 scope: this
});
返回值:
  • void
Observable
addSorted ( Ext.data.Record record ) : void
(只支持本地排序) 将传递的Record插入到Store中的指定位置， 它基于当前的排序信息。
(只支持本地排序) 将传递的Record插入到Store中的指定位置， 它基于当前的排序信息。
参数:
  • record : Ext.data.Record
返回值:
  • void
Store
clearFilter ( Boolean suppressEvent ) : void
返回没有使用过滤器时缓存记录的视图。
返回没有使用过滤器时缓存记录的视图。
参数:
  • suppressEvent : Boolean
    如果此参数为 true 将会安静地清除过滤器而不触发 datachanged 事件。
返回值:
  • void
Store
collect ( String dataIndex , [ Boolean allowNull ], [ Boolean bypassFilter ] ) : Array
从当前store特定的dataIndex收集唯一的值。
从当前store特定的dataIndex收集唯一的值。
参数:
  • dataIndex : String
    需要收集的属性
  • allowNull : Boolean
    (可选) 传递true将允许null,undefined或者空字符串值
  • bypassFilter : Boolean
    (可选) 传递true从所有记录中进行收集，包含那些被过滤掉的记录
返回值:
  • Array
    唯一值集合
Store
commitChanges () : void
提交所有 未提交变更的 Record。 如需处理变更，可以订阅...
提交所有 未提交变更的 Record。 如需处理变更，可以订阅 update事件， 并且当第三个参数是Ext.data.Record.COMMIT时执行更新。
参数:
  • 无。
返回值:
  • void
Store
createMultipleFilterFn ( Array filters ) : Function
给定一个过滤函数数组(每个都有一个可配置的作用域)...
给定一个过滤函数数组(每个都有一个可配置的作用域)， 构造并返回一个单独的函数，它可以返回所有过滤器ANDed(逻辑“与”)在一起之后 返回的结果
参数:
  • filters : Array
    过滤对象数组 (每个对象都应该包含一个'fn'属性和可选的作用域)
返回值:
  • Function
    多重过滤函数
Store
createSortFunction ( String field , String direction ) : Function
创建并返回一个函数，它根据所给的字段和方向对一个数组进行排序。
创建并返回一个函数，它根据所给的字段和方向对一个数组进行排序。
参数:
  • field : String
    需要创建排序器的字段
  • direction : String
    排序的方向(默认为"ASC")
返回值:
  • Function
    一个根据所给的field/direction组合进行排序的函数
Store
destroy () : void
销毁store
销毁store
参数:
  • 无。
返回值:
  • void
Store
each ( Function fn , [ Object scope ] ) : void
在缓存中的每条Record 上调用指定的函数。
在缓存中的每条Record 上调用指定的函数。
参数:
  • fn : Function
    需要调用的函数。 Record 将会作为第一个参数被传递。 返回false取消并退出迭代过程。
  • scope : Object
    (可选) 作用域( this 引用) 函数将会在其中被执行。 默认为迭代过程中的当前 Record。
返回值:
  • void
Store
enableBubble( String/Array events ) :void
是否现在使得事件会被该Observable触发并调用 this.getBubbleTarget()方法在拥有者的继承树...

是否现在使得事件会被该Observable触发并调用 this.getBubbleTarget()方法在拥有者的继承树中冒泡。Observable的基础类中没有该方法的实现。

该方法一般被Ext.Components用来冒泡事件到拥有者的容器。参看Ext.Component.getBubbleTarget默认的实现 在Ext.Component中返回组件的直接拥有者。但是如果需要的是一个已知的目标，该方法可以被重写来更快的访问需求的目标。

例子:

Ext.override(Ext.form.Field, {
    // 添加方法到Field的initComponent上改变事件为冒泡
    initComponent : Ext.form.Field.prototype.initComponent.createSequence(function() {
        this.enableBubble('change');
    }),

    // 我们知道我们想让Field的事件冒泡到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() {
            // 如果样式被修改标题会变红。
            myForm.header.setStyle('color', 'red');
        }
    }
});
参数:
  • events : String/Array
    冒泡的事件名，或事件名数组
返回值:
  • void
Observable
filter ( String|Array field , String/RegExp value , [ Boolean anyMatch ], [ Boolean caseSensitive ], Boolean exactMatch ) : void
根据指定的参数过滤 records。 可以选择传递一个过滤选项数组，根据多个参数过滤。...
根据指定的参数过滤 records。 可以选择传递一个过滤选项数组，根据多个参数过滤。 单个过滤器示例: store.filter('name', 'Ed', true, true); //查找所有包含'Ed'子串的记录 多过滤器示例: store.filter([ { property : 'name', value : 'Ed', anyMatch : true, //可选，默认为true caseSensitive: true //可选，默认为true }, //也可以传递过滤函数 { fn : function(record) { return record.get('age') == 24 }, scope: this } ]);
参数:
  • field : String|Array
    你的数据记录的一个属性，或者一个包含多个过滤条件的数组
  • value : String/RegExp
    要么是一个属性名的起始字符串，要么是一个需要在属性上进行测试的 正则表达式。
  • anyMatch : Boolean
    (可选) true时将全字匹配，而不仅仅是匹配起始字符串
  • caseSensitive : Boolean
    (可选) true比较时将会对大小写敏感
  • exactMatch : Boolean
    true将会强制精确匹配(在正则中添加^和$字符)。 默认为fales。 如果anyMatch参数为true，忽略此配置。
返回值:
  • void
Store
filterBy ( Function fn , [ Object scope ] ) : void
通过一个函数进行过滤。 指定的函数将会在Store中的每一条记录上依次调用。...
通过一个函数进行过滤。 指定的函数将会在Store中的每一条记录上依次调用。 如果此函数返回true那么这条记录就会被 包含在结果集中，否则它将被过滤掉。
参数:
  • fn : Function
    需要调用的函数。 它将被传递如下参数：
    • record : Ext.data.Record

      需要进行过滤测试的 record， 使用 Ext.data.Record.get 方法访问记录中的字段。

    • id : Object

      所传递的Record的ID

  • scope : Object
    (可选)作用域( this 引用) 函数将会在其中被执行。 默认为当前Store。
返回值:
  • void
Store
find ( String fieldName , String/RegExp value , [ Number startIndex ], [ Boolean anyMatch ], [ Boolean caseSensitive ] ) : Number
根据指定字段的值查找store中第一个符合条件记录的索引。
根据指定字段的值查找store中第一个符合条件记录的索引。
参数:
  • fieldName : String
    记录中需要测试的字段名。
  • value : String/RegExp
    要么是一个字符串，字段值需要以此字符串开头；或者是一个 需要对字段进行测试的正则表达式。
  • startIndex : Number
    (可选)开始查找的起始位置
  • anyMatch : Boolean
    (可选) 此参数为true将进行全字匹配，而不仅仅是起始部分
  • caseSensitive : Boolean
    (可选) 此参数为true在比较时将对大小写敏感
返回值:
  • Number
    符合条件的索引，或者-1
Store
findBy ( Function fn , [ Object scope ], [ Number startIndex ] ) : Number
使用一个函数，在Store中查找出第一个符合条件记录的位置索引。...
使用一个函数，在Store中查找出第一个符合条件记录的位置索引。 如果此函数返回true则此记录被视为符合条件。
参数:
  • fn : Function
    需要调用的函数。 它将会被传入如下参数:
    • record : Ext.data.Record

      需要进行过滤测试的 record。 使用Ext.data.Record.get 方法访问字段值。

    • id : Object

      所传递Record的ID

  • scope : Object
    (可选)作用域( this 引用) 函数将会在其中被执行。 默认为当前Store。
  • startIndex : Number
    (可选) 开始查找的起始位置索引
返回值:
  • Number
    匹配的索引或者-1
Store
findExact ( String fieldName , Mixed value , [ Number startIndex ] ) : Number
根据指定的字段值，在store中查找符合条件的第一条记录的位置。
根据指定的字段值，在store中查找符合条件的第一条记录的位置。
参数:
  • fieldName : String
    需要进行测试的记录的字段名。
  • value : Mixed
    需要与字段进行匹配的值。
  • startIndex : Number
    (可选) 查询的起始位置
返回值:
  • Number
    匹配的索引或者-1
Store
fireEvent( String eventName, Object... args ) : Boolean
用传入的参数触发指定的事件 (减去事件名)。 一个事件可以被设置为冒泡 Obse...

用传入的参数触发指定的事件 (减去事件名)。

一个事件可以被设置为冒泡到Observable父类继承树(参看 Ext.Component.getBubbleTarget) 调用enableBubble实现。

参数:
  • eventName : String
    触发的事件名。
  • args : Object...
    传递给处理器的可变长度参数。
返回值:
  • Boolean
    如果有任何的处理器返回false则返回false，否则返回true。
Observable
getAt ( Number index ) : Ext.data.Record
获取指定位置的记录。
获取指定位置的记录。
参数:
  • index : Number
    需要查找的记录的索引位置。
返回值:
  • Ext.data.Record
    所传递的索引位置的Record。 如果没有找到，返回undefined
Store
getById ( String id ) : Ext.data.Record
获取拥有指定id的记录。
获取拥有指定id的记录。
参数:
  • id : String
    需要查找记录的id
返回值:
  • Ext.data.Record
    拥有所给id的Record。如果没有找到返回undefined
Store
getCount () : Number
获取缓存记录的条数。如果使用分页，此值可能不是数据集的总数。...
获取缓存记录的条数。

如果使用分页，此值可能不是数据集的总数。 如果Reader使用的数据对象包含数据集总数， 那么 getTotalCount 函数将会返回数据集的总条数。 注意: 参见load 配置项的重要注释。

参数:
  • 无。
返回值:
  • Number
    Store缓存中Record的条数
Store
getModifiedRecords () : Ext.data.Record[]
获取自从最后一次提交以来被修改过的 records。、 修改过的记录将通过load操作(例如分页时)被持久化。...
获取自从最后一次提交以来被修改过的 records。、 修改过的记录将通过load操作(例如分页时)被持久化。 注意:不包括被删除的记录。 另请参见 pruneModifiedRecords 和 Ext.data.Record markDirty。.
参数:
  • 无。
返回值:
  • Ext.data.Record[]
    一个{@link Ext.data.Record Records} 数组，包含了未提交的变更。 如需获得记录中被修改的字段，参见 {@link Ext.data.Record}<tt>{@link Ext.data.Record#modified modified}.</tt> 。
Store
getRange ( [ Number startIndex ], [ Number endIndex ] ) : Ext.data.Record[]
返回位于指定区间范围中的记录。
返回位于指定区间范围中的记录。
参数:
  • startIndex : Number
    (可选) 其实索引位置(默认为0)
  • endIndex : Number
    (可选) 结束索引位置(默认为Store中的最后一条记录)
返回值:
  • Ext.data.Record[]
    Record数组
Store
getSortState () : Object
返回一个对象，描述当前Store的排序状态。
返回一个对象，描述当前Store的排序状态。
参数:
  • 无。
返回值:
  • Object
    Store的排序状态。 一个拥有两个属性的对象:<ul> <li><b>field : String<p class="sub-desc"> Record排序所依据的字段名。 </p></li> <li><b>direction : String<p class="sub-desc">排序的方向，'ASC' 或 'DESC' (case-sensitive).</p></li> </ul> 更多细节参见 <tt>{@link #sortInfo}</tt> 。
Store
getTotalCount () : Number
获取服务器返回的数据库记录总数。如果使用分页，为了让此值准确...
获取服务器返回的数据库记录总数。

如果使用分页，为了让此值准确， Reader 使用的数据对象必须包含数据集的数量。 对于远程数据源， 此参数 ( JsonReader的 totalProperty， XmlReader的 totalRecords ) 的值必须通过服务端的一次查询来返回。 注意: 参见 load 方法的重要注释。

参数:
  • 无。
返回值:
  • Number
    Record的数量在数据对象中被指定，通过Proxy传递给Reader。

    注意: 如果在本地改变Store的内容，此值不会被更新。

Store
hasListener( String eventName ) : Boolean
检测对象是否包含指定事件的任何监听器
检测对象是否包含指定事件的任何监听器
参数:
  • eventName : String
    检测的事件名
返回值:
  • Boolean
    如果事件被监听则为true，否则为false
Observable
indexOf ( Ext.data.Record record ) : Number
获取所传递的Record在缓存中的位置索引。
获取所传递的Record在缓存中的位置索引。
参数:
  • record : Ext.data.Record
    需要查找的Ext.data.Record对象。
返回值:
  • Number
    所传递的Record的索引位置。如果没有找到返回-1
Store
indexOfId ( String id ) : Number
根据所传递的id获得缓存中记录的索引位置。
根据所传递的id获得缓存中记录的索引位置。
参数:
  • id : String
    需要查找的Record的id
返回值:
  • Number
    Record的索引位置。 如果没有找到，返回-1
Store
insert ( Number index , Ext.data.Record[] records ) : void
在所给的位置向Store中插入记录并触发 add 事件。 另请参见 add 和 addSorted 。
在所给的位置向Store中插入记录并触发 add 事件。 另请参见 add 和 addSorted 。
参数:
  • index : Number
    插入所给记录的起始位置。
  • records : Ext.data.Record[]
    一个Ext.data.Record对象数组，它将被插入到缓存中。
返回值:
  • void
Store
isFiltered () : Boolean
如果store当前被进行了过滤，返回true
如果store当前被进行了过滤，返回true
参数:
  • 无。
返回值:
  • Boolean
Store
load ( Object options ) : Boolean
使用所配置的 reader 从配置的 proxy 加载Record...

使用所配置的 reader 从配置的 proxy 加载Record

注意:

  • 重要 : 加载操作是异步的！ 在新的数据被加载完成之前，函数的调用已经返回。 如需对调用load方法产生的信息进行任何后续处理， 指定一个回调函数，或者使用一个 'load'事件处理函数。
  • 如果使用 远程排序 ，第一次调用必须在 options.params 中指定 start 和 limit 参数， 以便设定数据集的起始位置以及每次使用Proxy所缓存的Record条数。
  • 如果使用 远程排序 ， 根据指定的 paramNames 所配置的 sortInfo 将会自动被包含在请求参数中。
参数:
  • options : Object
    一个包含参数的对象，它控制加载选项:
    • params :Object

      一个包含了参数的对象，将作为HTTP参数被传递 给远程数据源。 注意: params 将会被任何具有同名 baseParams 的属性覆盖。

      这些参数将会被使用 Ext.urlEncode 编码成标准的HTTP参数。

    • callback : Function

      在Record加载之后被调用的函数。 回调函数在load事件被触发后调用， 并且将会被传递如下参数：

      • r : Ext.data.Record[] 所加载的Record数组。
      • options : 调用load方法时的配置对象。
      • success : 布尔值，加载是否成功标识位。

    • scope : Object

      调用回调函数时的作用域(默认为Store对象)

    • add : Boolean

      标志位，将把加载的记录添加到缓存，而不是替换 当前的缓存。 注意: 参见 loadData 的注释

返回值:
  • Boolean
    如果<i>开发者</i> 提供的 <tt>{@link #beforeload}</tt> 事件处理函数返回了 <tt>false</tt>， load调用将会被取消并且返回<tt>false</tt>; 否则返回<tt>true</tt>。
Store
loadData ( Object data , [ Boolean append ] ) : void
从一个传递的数据块中加载数据并 触发 load 事件。 必须在构造器中配置...
从一个传递的数据块中加载数据并 触发 load 事件。 必须在构造器中配置一个知道数据格式的 Reader 。
参数:
  • data : Object
    一个数据块，将会从其中读取Record。 期望的数据格式 依赖所配置的 Reader 并且应该与此Reader 的 Ext.data.Reader.readRecords 参数相对应。
  • append : Boolean
    (可选) 此参数wieldtrue 将会追加新的Record而不是默认替换现有的缓存。 注意: Store中的Record将会用它们的 id 作为key， 所以如果添加的Record的id在Store中已经存在将会替换 现有的Record。 只有有用新的唯一的id的Record会被添加。
返回值:
  • void
Store
multiSort ( Array sorters , String direction ) : void
根据多个field/direction排序规则对当前store的内容进行排序。 此方法在...
根据多个field/direction排序规则对当前store的内容进行排序。 此方法在 sort 内部被调用并且一般不需要手工调用。 多条件联合排序目前只能应用到本地数据集- 如果使用remoteSort，多重排序的数据目前不会被发送给代理。
参数:
  • sorters : Array
    排序规则对象数组(字段和顺序)
  • direction : String
    排序结果的整体顺序(默认为 "ASC")
返回值:
  • void
Store
on( String eventName, Function handler, [Object scope], [Object options] ) : void
给对象添加事件处理器 (addListener的简写形式)
给对象添加事件处理器 (addListener的简写形式。)
参数:
  • eventName : String
    监听的事件类型
  • handler : Function
    事件调用的方法
  • scope : Object
    （可选）处理方法执行时的作用域 (this 的引用)。 如果被忽略。默认为触发事件的对象。
  • options : Object
    可选 包含处理器配置的对象。
返回值:
  • void
Observable
purgeListeners() : void
移除对象上所有的监听器
移除对象上所有的监听器
参数:
  • 无。
返回值:
  • void
Observable
query ( String field , String/RegExp value , [ Boolean anyMatch ], [ Boolean caseSensitive ] ) : MixedCollection
根据指定的属性查找记录。
根据指定的属性查找记录。
参数:
  • field : String
    你的记录中的一个字段
  • value : String/RegExp
    要么是一个字符串，字段以此字符串开始， 或者是一个需要对字段进行测试的正则表达式。
  • anyMatch : Boolean
    (可选)此参数为true将进行全字匹配，而不仅仅是匹配开始处
  • caseSensitive : Boolean
    (可选)此参数为true在比较时将会对大小写敏感
返回值:
  • MixedCollection
    返回一个匹配记录的Ext.util.MixedCollection
Store
queryBy ( Function fn , [ Object scope ] ) : MixedCollection
使用一个过滤函数在Store缓存的记录中进行查找。 指定的函数将会在Store中的每一条记录上依次调用。...
使用一个过滤函数在Store缓存的记录中进行查找。 指定的函数将会在Store中的每一条记录上依次调用。 如果此函数返回true那么这条记录就会被 包含在结果集中。
参数:
  • fn : Function
    需要调用的函数。 它将会被传递如下的参数：
    • record : Ext.data.Record

      需要进行过滤测试的 record 使用 Ext.data.Record.get 方法访问记录中的字段。

    • id : Object

      传递的Record的ID

  • scope : Object
    (可选) 作用域( this 引用)，函数将在其中被执行。 默认为当前Store。
返回值:
  • MixedCollection
    返回一个Ext.util.MixedCollection 包含符合条件记录
Store
rejectChanges () : void
在所有 被修改的记录 上 回退 所有的变更。
在所有 被修改的记录 上 回退 所有的变更。
参数:
  • 无。
返回值:
  • void
Store
relayEvents( Object o, Array events ) : void
从指定的Observable上传递选择的事件就好像被当前对象触发一样。
从指定的Observable上传递选择的事件就好像被当前对象触发一样。
参数:
  • o : Object
    该Observable上的事件被当前对象传递。
  • events : Array
    传递的数组名。
返回值:
  • void
Observable
reload ( Object options ) : void
使用配置的 Reader 和上次执行加载操作的选项...

使用配置的 Reader 和上次执行加载操作的选项 从配置的Proxy重新加载数据缓存。

注意: 参见 load 中的重要注释。

参数:
  • options : Object

    (可选) 一个包含了 加载选项 的对象，它可能会覆盖最后一次 load 使用的options。 详情参见 load(默认为 null，在这种情况下将使用 lastOptions)。

    向现有参数中添加新参数:

    lastOptions = myStore.lastOptions;
Ext.apply(lastOptions.params, {
    myNewParam: true
});
myStore.reload(lastOptions);
返回值:
  • void
Store
remove ( Ext.data.Record/Ext.data.Record[] record ) : void
从Store中删除记录并触发 remove 事件。
从Store中删除记录并触发 remove 事件。
参数:
  • record : Ext.data.Record/Ext.data.Record[]
    需要从缓存中删除的记录或者记录数组。
返回值:
  • void
Store
removeAll ( Boolean silent ) : void
从Store中删除所有记录并触发 clear 事件。
从Store中删除所有记录并触发 clear 事件。
参数:
  • silent : Boolean
    [false] 默认为 false。设置为 true将不会触发clear事件。
返回值:
  • void
Store
removeAt ( Number index ) : void
删除Store中指定位置的一条记录。 触发 remove事件。
删除Store中指定位置的一条记录。 触发 remove事件。
参数:
  • index : Number
    需要删除记录的位置索引
返回值:
  • void
Store
removeListener( String eventName, Function handler, [Object scope] ) : void
删除一个事件处理器。
删除一个事件处理器。
参数:
  • eventName : String
    处理器关联的事件类型。
  • handler : Function
    移除的处理器。 这应该是传递到addListener里的方法的引用。
  • scope : Object
    （可选）处理器指定的初始作用域。
返回值:
  • void
Observable
resumeEvents() : void
重新开始触发事件。(参见suspendEvents) 如果事件以queueSuspended参数被挂起，则在事件被挂起时 ...
重新开始触发事件。(参见 suspendEvents) 如果事件以queueSuspended 参数被挂起，则在事件被挂起时触发的事件会被传递到所有的监听器上
参数:
  • 无。
返回值:
  • void
Observable
save () : Number
将所有挂起的更改保存到store。 如果没有配置对应的 Ext.data.Api.actions操作...
将所有挂起的更改保存到store。 如果没有配置对应的 Ext.data.Api.actions操作， 那么将使用配置的 url 。
change            url
---------------   --------------------
removed records   Ext.data.Api.actions.destroy
phantom records   Ext.data.Api.actions.create
modified records  Ext.data.Api.actions.update
参数:
  • 无。
返回值:
  • Number
    单独指定"batch"需要保存的记录条数。 如果没有项目需要保存，或者保存操作被取消，将会返回-1
Store
setBaseParam ( String name , Mixed value ) : void
为store的baseParams 中指定的参数名设置值。 用法:myStore.setBaseParam('foo', {bar:3});
为store的baseParams 中指定的参数名设置值。 用法:

myStore.setBaseParam('foo', {bar:3});
参数:
  • name : String
    需要指定值的参数名称
  • value : Mixed
    指定给命名属性的值
返回值:
  • void
Store
setDefaultSort ( String fieldName , [ String dir ] ) : void
设置下一次 load 操作所使用的默认排序列和顺序。
设置下一次 load 操作所使用的默认排序列和顺序。
参数:
  • fieldName : String
    需要排序的字段名。
  • dir : String
    (可选) 排序方向，'ASC' 或者 'DESC' (大小写敏感，默认为'ASC')
返回值:
  • void
Store
singleSort ( String fieldName , [ String dir ] ) : void
根据单个字段和方向对store的内容进行排序。 这将会在...
根据单个字段和方向对store的内容进行排序。 这将会在 sort 内部被调用，并且一般情况下不应该手工调用。
参数:
  • fieldName : String
    需要排序字段的名称。
  • dir : String
    (可选) 排序方向，'ASC' 或者 'DESC' (大小写敏感，默认为 'ASC')
返回值:
  • void
Store
sort ( String/Array fieldName , [ String dir ] ) : void
对记录进行排序。如果使用远程排序，将在服务端进行排序操作， 然后刷新缓存。...
对记录进行排序。如果使用远程排序，将在服务端进行排序操作， 然后刷新缓存。 如果使用本地排序，缓存将在内部排序。 另请参见 remoteSort 和 paramNames。 此函数接受两种调用参数-将字段名作为第一个参数传递进来， 或者将多条件联合排序的配置对象作为一个数组传递进来。 单条件排序示例：store.sort('name', 'ASC');多条件联合排序 示例store.sort([ { field : 'name', direction: 'ASC' }, { field : 'salary', direction: 'DESC' } ], 'ASC'); 在以上的第二种形式中，排序参数将会被依次应用， 后面的排序器将在前面排序器产生的结果上进行再次排序操作。 例如，依照上面的排序配置， 如果存在具有相同名字的两条记录，它们将会按照薪水进行排序。 排序配置可以添加任意多个。
参数:
  • fieldName : String/Array
    进行排序的字段名，或者一个整理好的排序配置数组
  • dir : String
    (可选) 排列顺序，'ASC' 或者 'DESC' (大小写敏感，默认为 'ASC')
返回值:
  • void
Store
sum ( String property , [ Number start ], [ Number end ] ) : Number
将位于start 和 end之间的每条 record 的property值加在一起然后返回结果。
将位于start 和 end之间的每条 record 的property值加在一起然后返回结果。
参数:
  • property : String
    每条记录中的一个字段
  • start : Number
    (可选) 起始记录位置(默认为 0)
  • end : Number
    (可选)要包含的 最后一条记录的位置(默认为 length-1)
返回值:
  • Number
    The sum
Store
suspendEvents( Boolean queueSuspended ) : void
暂停触发所有的事件。 (参看resumeEvents)
暂停触发所有的事件。（参看 resumeEvents)
参数:
  • queueSuspended : Boolean
    如果传递为true则排列好暂停的事件使得在调用 resumeEvents 后再触发它们，而不是抛弃所有暂停的事件。
返回值:
  • void
Observable
un( String eventName, Function handler, [Object scope] ) : void
删除一个事件处理器(removeListener方法的简写形式)
删除一个事件处理器(removeListener方法的简写形式。)
参数:
  • eventName : String
    处理器关联的事件类型
  • handler : Function
    被删除的处理器 这应该是传入 addListener 中的方法的引用。
  • scope : Object
    （可选）为处理器指定的初始作用域。
返回值:
  • void
Observable

公共事件

Event Defined By
add : ( Store this , Ext.data.Record[] records , Number index )
当Record被added 到Store中时触发
当Record被added 到Store中时触发
监听器将会以如下的参数格式触发:
  • this : Store
  • records : Ext.data.Record[]
    所添加的记录数组
  • index : Number
    record(s)被添加的索引位置
Store
beforeload : ( Store this , Object options )
在请求新的数据对象之前触发。 如果beforeload的监听器返回...
在请求新的数据对象之前触发。 如果beforeload的监听器返回 false那么 load 操作将会被取消。
Listeners will be called with the following arguments:
  • this : Store
  • options : Object
    指定的加载参数(详情参见 load)
Store
beforesave : ( Ext.data.Store store , Object data )
在调用保存操作之前触发。 保存包括销毁records，更新records和创建records。
在调用保存操作之前触发。 保存包括销毁records，更新records和创建records。
监听器将会以如下的参数格式被调用:
  • store : Ext.data.Store
  • data : Object
    一个包含需要保存的数据的对象。 此对象将会为每个操作包含一个key，对应每个操作的record数组。
Store
beforewrite : ( Ext.data.Store store , String action , Record/Record[] rs , Object options , Object arg )
监听器将会以如下的参数格式被调用:
  • store : Ext.data.Store
  • action : String
    [Ext.data.Api.actions.create|update|destroy]
  • rs : Record/Record[]
    被写入的Record(s)
  • options : Object
    指定的加载选项。 编辑 options.params 以向请求中添加HTTP参数。 (详情参见 save)
  • arg : Object
    传递给request 函数的 回调参数对象
Store
clear : ( Store this , Record[] The )
当数据缓存被清空时触发。
当数据缓存被清空时触发。
监听器将会以如下的参数格式被调用:
  • this : Store
  • The : Record[]
    被清楚的记录
Store
datachanged : ( Store this )
当数据缓存以批量的方式发生变化时触发(例如，它被排序、过滤等等)，并且 ...
当数据缓存以批量的方式发生变化时触发(例如，它被排序、过滤等等)，并且 使用此Store作记录缓存的组件都应该刷新其视图。
监听器将会以如下的参数格式被调用:
  • this : Store
Store
exception : ( misc misc )
在Proxy进行远程请求时如果内部发生异常，此事件被触发。 此事件与对应的...

在Proxy进行远程请求时如果内部发生异常，此事件被触发。 此事件与对应的 Ext.data.DataProxy有关。 附加信息参见 Ext.data.DataProxy. exception 。

监听器将会以如下的参数格式被调用:
  • misc : misc
    描述参见 Ext.data.DataProxy. exception 。
Store
load : ( Store this , Ext.data.Record[] records , Object options )
在新的数据集被加载之后触发。
在新的数据集被加载之后触发。
监听器将会以如下的参数格式被调用:
  • this : Store
  • records : Ext.data.Record[]
    加载的Record
  • options : Object
    指定的加载选项( 细节参见 load)
Store
loadexception : ( misc misc )
此事件已过时，推荐使用能捕获所有 exception 的事件替代。...

此事件已过时，推荐使用能捕获所有 exception 的事件替代。

此事件与对应的Ext.data.DataProxy 有关。 附加信息详情参见 Ext.data.DataProxy. loadexception 。

监听器将会以如下的参数格式被调用:
  • misc : misc
    更多描述参见 Ext.data.DataProxy. loadexception 。
Store
metachange : ( Store this , Object meta )
在当前store的reader提供了新的元数据(fields)时触发。 当前只有JsonReader支持此配置。
在当前store的reader提供了新的元数据(字段)时触发。 当前只有JsonReader支持此配置。
监听器将会以如下的参数格式被调用:
  • this : Store
  • meta : Object
    JSON元数据
Store
remove : ( Store this , Ext.data.Record record , Number index )
当从Store中 removed 一条记录时触发
当从Store中 removed 一条记录时触发
监听器将会以如下参数格式被调用:
  • this : Store
  • record : Ext.data.Record
    被删除的记录
  • index : Number
    被删记录的索引位置
Store
save : ( Ext.data.Store store , Number batch , Object data )
在保存操作完成之后触发。 保存操作包含销毁记录、更新记录以及创建记录。
在保存操作完成之后触发。 保存操作包含销毁记录、更新记录以及创建记录。
监听器将会以如下的参数格式被调用:
  • store : Ext.data.Store
  • batch : Number
    被保存分支的标识符。
  • data : Object
    一个对象，包含了需要保存的数据。 此对象将会包含每个操作对应的key，连同每个操作所涉及到的记录的数组。
Store
update : ( Store this , Ext.data.Record record , String operation )
当一条记录被更新时触发
当一条记录被更新时触发
监听器将会以如下的参数格式被调用:
  • this : Store
  • record : Ext.data.Record
    被更新的记录
  • operation : String
    执行的更新操作。 可能是如下值中的一个:
    Ext.data.Record.EDIT
Ext.data.Record.REJECT
Ext.data.Record.COMMIT
Store
write : ( Ext.data.Store store , String action , Object result , Ext.Direct.Transaction res , Record/Record[] rs )
如果一个 Ext.data.Api.actions的CRUD操作导致服务器返回代码200，此事件被触发...
如果一个 Ext.data.Api.actions的CRUD操作导致服务器返回代码200，此事件被触发。 操作成功由 result[ 'successProperty'] 参数决定 ( 注意 对于安静型(RESTful)的store， 一个简单的20x(译者注：服务端返回的状态码，类似404，各种状态码都有自己的 含义，具体请google)，对"destroy"和"update"操作来说已经足够。 "create"操作应该(should should)返回200同时返回一个数据库主键)。
监听器将会以如下的参数格式被调用:
  • store : Ext.data.Store
  • action : String
    [Ext.data.Api.actions.create|update|destroy]
  • result : Object
    为方便使用，在响应之外获取的数据
  • res : Ext.Direct.Transaction
  • rs : Record/Record[]
    Store的记录，写操作的对象
Store


Class Ext.data.Field

包: | Ext.data
定义类的文件: | DataField.js
类: | Field
继承自: | Object

This class encapsulates the field definition information specified in the field definition objects passed to Ext.data.Record.create.

Developers do not need to instantiate this class. Instances are created by Ext.data.Record.create and cached in the fields property of the created Record constructor's prototype.

配置项

Config Options Defined By
allowBlank : Boolean
Used for validating a record, defaults to true. An empty value here will cause Ext.data.Record.isValid to evaluate to...
Used for validating a record, defaults to true . An empty value here will cause Ext.data.Record. isValid to evaluate to false .
Field
convert : Function
A function which converts the value provided by the Reader into an object that will be stored in the Record. It is pa...
A function which converts the value provided by the Reader into an object that will be stored in the Record. It is passed the following parameters:
  • v : Mixed
    The data value as read by the Reader, if undefined will use the configured defaultValue .
  • rec : Mixed
    The data object containing the row as read by the Reader. Depending on the Reader type, this could be an Array ( ArrayReader), an object ( JsonReader), or an XML element ( XMLReader).

                                    // example of convert function

function fullName(v, record){
    return record.name.last + ', ' + record.name.first;
}

function location(v, record){
    return !record.city ? '' : (record.city + ', ' + record.state);
}

var Dude = Ext.data.Record.create([
    {name: 'fullname',  convert: fullName},
    {name: 'firstname', mapping: 'name.first'},
    {name: 'lastname',  mapping: 'name.last'},
    {name: 'city', defaultValue: 'homeless'},
    'state',
    {name: 'location',  convert: location}
]);

// create the data store
var store = new Ext.data.Store({
    reader: new Ext.data.JsonReader(
        {
            idProperty: 'key',
            root: 'daRoot',
            totalProperty: 'total'
        },
        Dude  // recordType
    )
});

var myData = [
    { key: 1,
      name: { first: 'Fat',    last:  'Albert' }
      // notice no city, state provided in data object
    },
    { key: 2,
      name: { first: 'Barney', last:  'Rubble' },
      city: 'Bedrock', state: 'Stoneridge'
    },
    { key: 3,
      name: { first: 'Cliff',  last:  'Claven' },
      city: 'Boston',  state: 'MA'
    }
];
Field
dateFormat : String
(Optional) Used when converting received data into a Date when the type is specified as "date". A format string for t...

(Optional) Used when converting received data into a Date when the type is specified as "date" .

A format string for the Date.parseDate function, or "timestamp" if the value provided by the Reader is a UNIX timestamp, or "time" if the value provided by the Reader is a javascript millisecond timestamp. See Date

Field
defaultValue : Mixed
The default value used when a Record is being created by a Reader when the item referenced by the mapping does not ex...
The default value used when a Record is being created by a Reader when the item referenced by the mapping does not exist in the data object (i.e. undefined). (defaults to "")
Field
mapping : String/Number
(Optional) A path expression for use by the Ext.data.DataReader implementation that is creating the Record to extract...

(Optional) A path expression for use by the Ext.data.DataReader implementation that is creating the Record to extract the Field value from the data object. If the path expression is the same as the field name, the mapping may be omitted.

The form of the mapping expression depends on the Reader being used.

  • Ext.data.JsonReader
    The mapping is a string containing the javascript expression to reference the data from an element of the data item's root Array. Defaults to the field name.
  • Ext.data.XmlReader
    The mapping is an Ext.DomQuery path to the data item relative to the DOM element that represents the record. Defaults to the field name.
  • Ext.data.ArrayReader
    The mapping is a number indicating the Array index of the field's value. Defaults to the field specification's Array position.

If a more complex value extraction strategy is required, then configure the Field with a convert function. This is passed the whole row object, and may interrogate it in whatever way is necessary in order to return the desired data.

Field
name : String
The name by which the field is referenced within the Record. This is referenced by, for example, the dataIndex proper...
The name by which the field is referenced within the Record. This is referenced by, for example, the dataIndex property in column definition objects passed to Ext.grid.ColumnModel.

Note: In the simplest case, if no properties other than name are required, a field definition may consist of just a String for the field name.

Field
sortDir : String
Initial direction to sort ( "ASC" or "DESC" ). Defaults to "ASC" .
Field
sortType : Function
A function which converts a Field's value to a comparable value in order to ensure correct sort ordering. Predefined ...
A function which converts a Field's value to a comparable value in order to ensure correct sort ordering. Predefined functions are provided in Ext.data.SortTypes. A custom sort example:

                                    // current sort     after sort we want
// +-+------+          +-+------+
// |1|First |          |1|First |
// |2|Last  |          |3|Second|
// |3|Second|          |2|Last  |
// +-+------+          +-+------+

sortType: function(value) {
   switch (value.toLowerCase()) // native toLowerCase():
   {
      case 'first': return 1;
      case 'second': return 2;
      default: return 3;
   }
}
Field
type : Mixed
The data type for automatic conversion from received data to the stored value if convert has not been specified. This...
The data type for automatic conversion from received data to the stored value if convert has not been specified. This may be specified as a string value. Possible values are
  • auto (Default, implies no conversion)
  • string
  • int
  • float
  • boolean
  • date

This may also be specified by referencing a member of the Ext.data.Types class.

Developers may create their own application-specific data types by defining new members of the Ext.data.Types class.

Field

公共属性

该类没有公共属性。

公共方法

该类没有公共方法。

公共事件

该类没有公共事件。


Observable
    Store
      GroupingStore

Class Ext.data.GroupingStore

包: | Ext.data
定义类的文件: | GroupingStore.js
类: | GroupingStore
继承自: | Store
一个特殊的Store实现类，提供了根据可用的字段对记录进行分组的功能。 此类通常与 Ext.grid.GroupingView 联合使用，为一个分组型的GridPanel提供数据模型。 开始的时候，在 GroupingStore内部是一个简单的Store，含有多字段联合排序的功能。 分组的字段和方向总是作为第一个排序对被注入。 GroupingView与配置的groupField联合起来并创建适当的grid行。

配置项

Config Options Defined By
autoDestroy : Boolean
如果此参数为true，当绑定此store的组件被销毁之后此store也会...
如果此参数为true，当绑定此store的组件被销毁之后此store也会被销毁 (默认为 false)。

注意: 当store被仅仅绑定到一个组件时，应该把此参数设置成true。

Store
autoLoad : Boolean/Object
如果没有指定 data 参数，并且 autoLoad参数为 true或者为一个Object， store的...
如果没有指定 data 参数，并且 autoLoad参数为 true或者是一个对象(Object)， store的 load 方法将会在创建之后自动被调用。 如果autoLoad的值是一个对象(Object)， 此对象将会被传递给store的 load 方法。
Store
autoSave : Boolean
默认为true 将导致在一条记录被修改(例如: 变脏('dirty'))之后store自动地把记录...

默认为true 将导致在一条记录被修改(例如: 变脏('dirty'))之后store自动地把记录 save 到服务器端。 指定为false可以手动把所有修改的记录 save 到服务端。

注意: CRUD操作将会作为单独的请求发送。

Store
baseParams : Object
此参数的描述参见 corresponding 配置项 。 如需修改此参数，参见 setBaseParam 。
此参数的描述参见 corresponding 配置项 。 如需修改此参数，参见 setBaseParam 。
Store
batch : Boolean
默认为 true (除非 restful:true )。 每个CRUD操作的多次请求 (CREATE, READ, UPDATE...

默认为 true (除非 restful:true )。 每个CRUD操作的多次请求 (CREATE, READ, UPDATE 和 DESTROY)将会被合在一起并且作为一次事务发送出去。 只有在 autoSave 参数被设置成 false时应用。

如果Store是安静模式(RESTful)，DataProxy也是安静的(RESTful)， 这样会为每条记录创建一个独立的事务。

Store
data : Array
一个内嵌的数据对象，可以被 reader 读取。 典型情况下，指定此选项，或者 url 选项。
Store
defaultParamNames : Object
为 paramNames 提供默认值。 如需在全局范围修改所有store的参数...
为 paramNames 提供默认值。 如需在全局范围修改所有store的参数，必须在store的prototype上 修改此对象。
Store
groupField : String
一个字段名，将根据它对store的数据进行排序(默认为'')。
GroupingStore
groupOnSort : Boolean
此项为true时，当发生分组操作时， 将在分组的字段上对数据进行排序...
此项为true时，当发生分组操作时， 将在分组的字段上对数据进行排序； 为false时将会根据在现有的排序信息进行排序 (默认为false)。
GroupingStore
listeners : Object
一个包含一个或多个事件处理器的配置对象，会在初始化的时候被添加到目标对象上...

一个包含一个或多个事件处理器的配置对象，会在初始化的时候被添加到目标对象上。 该配置对象应该是一个有效的监听器配置对象就像 addListener例子中指定的一样可一次附加多个处理器。

ExtJs Components上的DOM事件

一些 ExtJs Component 类导出时会选择一些DOM事件(例如 "click", "mouseover" 等等), 这通常只是在有额外的值可以被添加时发生。例如DataView类的 click事件会传递被点击的节点。也可以直接在Component的HTMLElementevent上访问DOM事件，但必需在Component被渲染后监听器才能添加到Element 上。可以按照以下步骤添加插件:

// 插件会用一个监听器配置对象进行配置。
//该组件会被添加到所有处理方法的参数列表上。
Ext.DomObserver = Ext.extend(Object, {
    constructor: function(config) {
        this.listeners = config.listeners ? config.listeners : config;
    },

    // 组件将自己传递进了插件的初始化方法里
    init: function(c) {
        var p, l = this.listeners;
        for (p in l) {
            if (Ext.isFunction(l[p])) {
                l[p] = this.createHandler(l[p], c);
            } else {
                l[p].fn = this.createHandler(l[p].fn, c);
            }
        }

        // 渲染后立即添加监听器到元素上
        c.render = c.render.createSequence(function() {
            var e = c.getEl();
            if (e) {
                e.on(l);
            }
        });
    },

    createHandler: function(fn, c) {
        return function(e) {
            fn.call(this, e, c);
        };
    }
});

var combo = new Ext.form.ComboBox({

    // 元素被点击后折叠
    plugins: [ new Ext.DomObserver({
        click: function(evt, comp) {
            comp.collapse();
        }
    })],
    store: myStore,
    typeAhead: true,
    mode: 'local',
    triggerAction: 'all'
});

Observable
paramNames : Object
一个包含多个属性的对象，指定了分页和排序参数的名称，在加载数据时被传递给...

一个包含多个属性的对象，指定了分页和排序参数的名称，在加载数据时被传递给 远程服务器。 默认情况下，此对象拥有如下格式:

{
    start : 'start',  // 指定起始行的参数名
    limit : 'limit',  // 指定返回数据条数的参数名
    sort : 'sort',    // 指定排序字段的参数名
    dir : 'dir'       // 指定排序方向的参数名
}

服务器必须根据收到的这些参数名创建所请求的数据块。 如果需要不同的参数名称，可以使用配置项覆盖这些参数。

绑定到当前Store的 PagingToolbar ，使用此参数指定 它的requests 中的参数名称。

Store
proxy : Ext.data.DataProxy
DataProxy 对象，它提供对数据对象的访问。 参见 url 。
Store
pruneModifiedRecords : Boolean
此值为true将在 store被加载或者一条记录被删除时 清除所有记录的修改信息(默认为...
此值为true将在 store被加载或者一条记录被删除时 清除所有记录的修改信息(默认为 false)。参见 getModifiedRecords 的访问函数(指getter/setter)以获得修改的记录。
Store
reader : Ext.data.DataReader
Reader 对象负责处理数据对象并返回一个 Ext.data.Record 对象数组，它们被使用其...
Reader 对象负责处理数据对象并返回一个 Ext.data.Record 对象数组，它们被使用其 id 属性作key进行缓存。
Store
remoteGroup : Boolean
如果分组操作需要在服务端进行，此值为true， 如果只在客户端进行，此值为false...
如果分组操作需要在服务端进行，此值为true， 如果只在客户端进行，此值为false (默认为false)。 如果是本地分组，它可以立即被应用到数据上。 如果是远程的，那么它将简单地扮演一个辅助者的角色，自动 把分组字段名发送给服务器，在每个XHR调用中使用'groupBy'作为参数名。
GroupingStore
remoteSort : boolean
如果此参数为true，处理排序操作的方式是，通过请求 Proxy 提供一个数据已经排好顺序的版本...
如果此参数为true，处理排序操作的方式是，通过请求 Proxy 提供一个数据已经排好顺序的版本， 而不是在缓存中对记录进行排序(默认为 false)。

如果remoteSort 为 true 那么在一个Grid Column的 header 被点击时，将会从服务器请求当前页面，并且在 params 中添加如下两个参数:

  • sort : String

    需要排序的字段名 (就像在Record的 Field definition中指定的那样)。

  • dir : String

    排列的方向，'ASC' 或者 'DESC' (大小写敏感)。

Store
restful : Boolean
默认为false。 设置为true 将会使Store和Proxy的操作以安静(RESTful)的状态进行...
默认为false。 设置为true 将会使Store和Proxy的操作以安静(RESTful)的状态进行。 store将会自动生成到服务器的GET, POST, PUT 和 DELETE 请求。 任何给定CRUD操作的HTTP方式(method)都在 Ext.data.Api.restActions 有描述。 附加信息参见 Ext.data.DataProxy.restful。

注意: 如果 restful:true 将会隐含设置为 批处理(batch) 。默认为 false。

Store
sortInfo : Object
一个配置对象，指定Store请求数据时load 操作的排序规则。 注意，对于本地排序...
一个配置对象，指定Store请求数据时load 操作的排序规则。 注意，对于本地排序，direction参数是大小写敏感的。 另请参见 remoteSort 和 paramNames。 例如:
sortInfo: {
    field: 'fieldName',
    direction: 'ASC' // or 'DESC' (case sensitive for local sorting)
}
Store
storeId : String
如果传递此参数，此id将会使用StoreMgr 进行注册。...
如果传递此参数，此id将会使用StoreMgr 进行注册。

注意: 如果指定了一个 id (不建议) 它将会取代分配的storeId。

Store
url : String
如果没有指定 proxy ，此url将会被用来隐含配置一个...
如果没有指定 proxy ，此url将会被用来隐含配置一个 HttpProxy 。 典型情况下要么指定此选项，要么指定 data 选项。
Store
writer : Ext.data.DataWriter
Writer 对象负责处理record对象，它们将会被写入服务端数据库。...

Writer 对象负责处理record对象，它们将会被写入服务端数据库。

如果writer被配置到Store中， store的 add, remove,和 update 事件将会被监听，以便在远端 创建记录, 销毁记录, 或者 更新记录。

store的proxy将会把所有 writexception 事件转播给当前store

示例实现:

var writer = new Ext.data.JsonWriter({
    encode: true,
    writeAllFields: true // 写入所有字段，而不仅仅是那些发生变化的字段
});

// 典型的Store，包含了Proxy,Reader和Writer
var store = new Ext.data.Store({
    storeId: 'user',
    root: 'records',
    proxy: proxy,
    reader: reader,
    writer: writer,     // <--在store中插入一个DataWriter就像你插入一个Reader
    paramsAsHash: true,
    autoSave: false    // <-- false讲延迟执行create, update, destroy请求
                       //直到被特别指定如此做。
});

Store

公共属性

Property Defined By
baseParams : Object
此参数的描述参见 corresponding 配置项 。 如需修改此参数，参见 setBaseParam 。
此参数的描述参见 corresponding 配置项 。 如需修改此参数，参见 setBaseParam 。
Store
fields : Ext.util.MixedCollection
一个MixedCollection，包含了Store中 Records 的字段(Fields)定义。
Store
hasMultiSort : Boolean 如果store当前使用多个field/direction联合排序，此值为true。
Store
isDestroyed : Boolean 如果store已经被销毁，此值为true。只读。
Store
lastOptions : Object
包含 load 方法最近一次使用的配置参数对象。 此参数所包含的内容详情...
包含 load 方法最近一次使用的配置参数对象。 此参数所包含的内容详情，参见 load 方法。对访问加载当前Record缓存时所使用的所有参数来说，此属性非常有用。
Store
multiSortInfo : Object 包含所有排序方向，以及在对多个字段进行排序时使用的排序配置的对象。
Store
recordType : Function
为 Reader 提供的(或者创建的) Record 构造函数。只读。...
为 Reader 提供的(或者创建的) Record 构造函数。只读。

如果Reader是通过传递一个 Ext.data.Field 定义对象数组来构造的， 他将隐含地从这个数组 创建一个Record的构造器。 (附加信息参见 Ext.data.Record. create)。

此参数可被用来在Store中创建指定类型的Record，例如:

// 创建数据缓存(data store)
    var store = new Ext.data.ArrayStore({
        autoDestroy: true,
        fields: [
           {name: 'company'},
           {name: 'price', type: 'float'},
           {name: 'change', type: 'float'},
           {name: 'pctChange', type: 'float'},
           {name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
        ]
    });
    store.loadData(myData);

    // 创建Grid
    var grid = new Ext.grid.EditorGridPanel({
        store: store,
        colModel: new Ext.grid.ColumnModel({
            columns: [
                {id:'company', header: 'Company', width: 160, dataIndex: 'company'},
                {header: 'Price', renderer: 'usMoney', dataIndex: 'price'},
                {header: 'Change', renderer: change, dataIndex: 'change'},
                {header: '% Change', renderer: pctChange, dataIndex: 'pctChange'},
                {header: 'Last Updated', width: 85,
                    renderer: Ext.util.Format.dateRenderer('m/d/Y'),
                    dataIndex: 'lastChange'}
            ],
            defaults: {
                sortable: true,
                width: 75
            }
        }),
        autoExpandColumn: 'company', // 与column model中指定的id对应
        height:350,
        width:600,
        title:'Array Grid',
        tbar: [{
            text: 'Add Record',
            handler : function(){
                var defaultData = {
                    change: 0,
                    company: 'New Company',
                    lastChange: (new Date()).clearTime(),
                    pctChange: 0,
                    price: 10
                };
                var recId = 3; // 提供唯一的id
                var p = new store.recordType(defaultData, recId); // 创建新记录
                grid.stopEditing();
                store.insert(0, p); // 向store中插入一条新记录(另请参见add)
                grid.startEditing(0, 0);
            }
        }]
    });
Store

公共方法

Method Defined By
GroupingStore ( Object config )
创建一个新的GroupingStore。
创建一个新的GroupingStore。
参数:
  • config : Object
    一个配置对象，包含了Store访问数据以及把数据读到Record时所需的参数。
返回值:
  • void
GroupingStore
add ( Ext.data.Record[] records ) : void
向Store中添加记录 并触发 add 事件。 如需通过一个远程数据源向Store中添加记录，请使用...
向Store中添加记录 并触发 add 事件。 如需通过一个远程数据源向Store中添加记录，请使用 load({add:true}) 。 另请参见 recordType 和 insert 。
参数:
  • records : Ext.data.Record[]
    需要添加到缓存中的一个 Ext.data.Record对象数组。 参见 recordType。
返回值:
  • void
Store
addEvents( Object|String o, string Optional. ) : void
添加指定的事件到事件列表上，事件会被该Observable触发。
添加指定的事件到事件列表上，事件会被该Observable触发。
参数:
  • o : Object|String
    以事件名作为属性true作为值的对象 或者当多个事件名被分开的传递时则为第一个事件名。
  • Optional. : string
    事件名被分开的传递时则为事件名。 用法:
    this.addEvents('storeloaded', 'storecleared');
返回值:
  • void
Observable
addListener( String eventName, Function handler, [Object scope], [Object options] ) : void
给对象添加事件处理器。
给对象添加事件处理器。
参数:
  • eventName : String
    监听的事件名。
  • handler : Function
    事件调用的方法
  • scope : Object
    （可选）处理方法执行的作用域 (this的引用 reference)。 如果被忽略。默认为触发事件的对象。
  • options : Object
    （可选）包含处理器配置和属性的对象。 可能包含以下的属性:
    • scope : Object
      处理方法执行的作用域(this的引用) 。 如果被忽略。默认为触发事件的对象。
    • delay : Number
      在触发事件后延迟调用处理器的毫秒数。
    • single : Boolean
      如果为True则添加一个处理器来处理下一次的事件触发（仅一次），然后移除自己。
    • buffer : Number
      使得处理器延迟指定毫秒数后预定的运行在 一个Ext.util.DelayedTask中 。 如果事件在时间内再一次被触发，原始的处理器不会被调用，但是新的处理器会预定的在他的位置上。
    • target : Observable
      如果事件在目标的Observable上触发则仅仅调用处理器， 否则 事件会从子类的Observable上冒泡

    组合选项
    使用这些选项参数,可能会组合出不同类型的监听器：

    一个延迟的，一次性的监听器。

    myDataView.on('click', this.onClick, this, {
single: true,
delay: 100
});

    一次调用附加多个处理器
    该方法同样支持传递一个包含指定的多个处理器的属性的配置对象参数。

    myGridPanel.on({
'click' : {
    fn: this.onClick,
    scope: this,
    delay: 100
},
'mouseover' : {
    fn: this.onMouseOver,
    scope: this
},
'mouseout' : {
    fn: this.onMouseOut,
    scope: this
}
});

    或者一个简写的语法：

    myGridPanel.on({
'click' : this.onClick,
'mouseover' : this.onMouseOver,
'mouseout' : this.onMouseOut,
 scope: this
});
返回值:
  • void
Observable
addSorted ( Ext.data.Record record ) : void
(只支持本地排序) 将传递的Record插入到Store中的指定位置， 它基于当前的排序信息。
(只支持本地排序) 将传递的Record插入到Store中的指定位置， 它基于当前的排序信息。
参数:
  • record : Ext.data.Record
返回值:
  • void
Store
clearFilter ( Boolean suppressEvent ) : void
返回没有使用过滤器时缓存记录的视图。
返回没有使用过滤器时缓存记录的视图。
参数:
  • suppressEvent : Boolean
    如果此参数为 true 将会安静地清除过滤器而不触发 datachanged 事件。
返回值:
  • void
Store
clearGrouping () : void
清除所有现存的分组并使用默认的排序刷新数据。
清除所有现存的分组并使用默认的排序刷新数据。
参数:
  • 无。
返回值:
  • void
GroupingStore
collect ( String dataIndex , [ Boolean allowNull ], [ Boolean bypassFilter ] ) : Array
从当前store特定的dataIndex收集唯一的值。
从当前store特定的dataIndex收集唯一的值。
参数:
  • dataIndex : String
    需要收集的属性
  • allowNull : Boolean
    (可选) 传递true将允许null,undefined或者空字符串值
  • bypassFilter : Boolean
    (可选) 传递true从所有记录中进行收集，包含那些被过滤掉的记录
返回值:
  • Array
    唯一值集合
Store
commitChanges () : void
提交所有 未提交变更的 Record。 如需处理变更，可以订阅...
提交所有 未提交变更的 Record。 如需处理变更，可以订阅 update事件， 并且当第三个参数是Ext.data.Record.COMMIT时执行更新。
参数:
  • 无。
返回值:
  • void
Store
createMultipleFilterFn ( Array filters ) : Function
给定一个过滤函数数组(每个都有一个可配置的作用域)...
给定一个过滤函数数组(每个都有一个可配置的作用域)， 构造并返回一个单独的函数，它可以返回所有过滤器ANDed(逻辑“与”)在一起之后 返回的结果
参数:
  • filters : Array
    过滤对象数组 (每个对象都应该包含一个'fn'属性和可选的作用域)
返回值:
  • Function
    多重过滤函数
Store
createSortFunction ( String field , String direction ) : Function
创建并返回一个函数，它根据所给的字段和方向对一个数组进行排序。
创建并返回一个函数，它根据所给的字段和方向对一个数组进行排序。
参数:
  • field : String
    需要创建排序器的字段
  • direction : String
    排序的方向(默认为"ASC")
返回值:
  • Function
    一个根据所给的field/direction组合进行排序的函数
Store
destroy () : void
销毁store
销毁store
参数:
  • 无。
返回值:
  • void
Store
each ( Function fn , [ Object scope ] ) : void
在缓存中的每条Record 上调用指定的函数。
在缓存中的每条Record 上调用指定的函数。
参数:
  • fn : Function
    需要调用的函数。 Record 将会作为第一个参数被传递。 返回false取消并退出迭代过程。
  • scope : Object
    (可选) 作用域( this 引用) 函数将会在其中被执行。 默认为迭代过程中的当前 Record。
返回值:
  • void
Store
enableBubble( String/Array events ) :void
是否现在使得事件会被该Observable触发并调用 this.getBubbleTarget()方法在拥有者的继承树...

是否现在使得事件会被该Observable触发并调用 this.getBubbleTarget()方法在拥有者的继承树中冒泡。Observable的基础类中没有该方法的实现。

该方法一般被Ext.Components用来冒泡事件到拥有者的容器。参看Ext.Component.getBubbleTarget默认的实现 在Ext.Component中返回组件的直接拥有者。但是如果需要的是一个已知的目标，该方法可以被重写来更快的访问需求的目标。

例子:

Ext.override(Ext.form.Field, {
    // 添加方法到Field的initComponent上改变事件为冒泡
    initComponent : Ext.form.Field.prototype.initComponent.createSequence(function() {
        this.enableBubble('change');
    }),

    // 我们知道我们想让Field的事件冒泡到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() {
            // 如果样式被修改标题会变红。
            myForm.header.setStyle('color', 'red');
        }
    }
});
参数:
  • events : String/Array
    冒泡的事件名，或事件名数组
返回值:
  • void
Observable
filter ( String|Array field , String/RegExp value , [ Boolean anyMatch ], [ Boolean caseSensitive ], Boolean exactMatch ) : void
根据指定的参数过滤 records。 可以选择传递一个过滤选项数组，根据多个参数过滤。...
根据指定的参数过滤 records。 可以选择传递一个过滤选项数组，根据多个参数过滤。 单个过滤器示例: store.filter('name', 'Ed', true, true); //查找所有包含'Ed'子串的记录 多过滤器示例: store.filter([ { property : 'name', value : 'Ed', anyMatch : true, //可选，默认为true caseSensitive: true //可选，默认为true }, //也可以传递过滤函数 { fn : function(record) { return record.get('age') == 24 }, scope: this } ]);
参数:
  • field : String|Array
    你的数据记录的一个属性，或者一个包含多个过滤条件的数组
  • value : String/RegExp
    要么是一个属性名的起始字符串，要么是一个需要在属性上进行测试的 正则表达式。
  • anyMatch : Boolean
    (可选) true时将全字匹配，而不仅仅是匹配起始字符串
  • caseSensitive : Boolean
    (可选) true比较时将会对大小写敏感
  • exactMatch : Boolean
    true将会强制精确匹配(在正则中添加^和$字符)。 默认为fales。 如果anyMatch参数为true，忽略此配置。
返回值:
  • void
Store
filterBy ( Function fn , [ Object scope ] ) : void
通过一个函数进行过滤。 指定的函数将会在Store中的每一条记录上依次调用。...
通过一个函数进行过滤。 指定的函数将会在Store中的每一条记录上依次调用。 如果此函数返回true那么这条记录就会被 包含在结果集中，否则它将被过滤掉。
参数:
  • fn : Function
    需要调用的函数。 它将被传递如下参数：
    • record : Ext.data.Record

      需要进行过滤测试的 record， 使用 Ext.data.Record.get 方法访问记录中的字段。

    • id : Object

      所传递的Record的ID

  • scope : Object
    (可选)作用域( this 引用) 函数将会在其中被执行。 默认为当前Store。
返回值:
  • void
Store
find ( String fieldName , String/RegExp value , [ Number startIndex ], [ Boolean anyMatch ], [ Boolean caseSensitive ] ) : Number
根据指定字段的值查找store中第一个符合条件记录的索引。
根据指定字段的值查找store中第一个符合条件记录的索引。
参数:
  • fieldName : String
    记录中需要测试的字段名。
  • value : String/RegExp
    要么是一个字符串，字段值需要以此字符串开头；或者是一个 需要对字段进行测试的正则表达式。
  • startIndex : Number
    (可选)开始查找的起始位置
  • anyMatch : Boolean
    (可选) 此参数为true将进行全字匹配，而不仅仅是起始部分
  • caseSensitive : Boolean
    (可选) 此参数为true在比较时将对大小写敏感
返回值:
  • Number
    符合条件的索引，或者-1
Store
findBy ( Function fn , [ Object scope ], [ Number startIndex ] ) : Number
使用一个函数，在Store中查找出第一个符合条件记录的位置索引。...
使用一个函数，在Store中查找出第一个符合条件记录的位置索引。 如果此函数返回true则此记录被视为符合条件。
参数:
  • fn : Function
    需要调用的函数。 它将会被传入如下参数:
    • record : Ext.data.Record

      需要进行过滤测试的 record。 使用Ext.data.Record.get 方法访问字段值。

    • id : Object

      所传递Record的ID

  • scope : Object
    (可选)作用域( this 引用) 函数将会在其中被执行。 默认为当前Store。
  • startIndex : Number
    (可选) 开始查找的起始位置索引
返回值:
  • Number
    匹配的索引或者-1
Store
findExact ( String fieldName , Mixed value , [ Number startIndex ] ) : Number
根据指定的字段值，在store中查找符合条件的第一条记录的位置。
根据指定的字段值，在store中查找符合条件的第一条记录的位置。
参数:
  • fieldName : String
    需要进行测试的记录的字段名。
  • value : Mixed
    需要与字段进行匹配的值。
  • startIndex : Number
    (可选) 查询的起始位置
返回值:
  • Number
    匹配的索引或者-1
Store
fireEvent( String eventName, Object... args ) : Boolean
用传入的参数触发指定的事件 (减去事件名)。 一个事件可以被设置为冒泡 Obse...

用传入的参数触发指定的事件 (减去事件名)。

一个事件可以被设置为冒泡到Observable父类继承树(参看 Ext.Component.getBubbleTarget) 调用enableBubble实现。

参数:
  • eventName : String
    触发的事件名。
  • args : Object...
    传递给处理器的可变长度参数。
返回值:
  • Boolean
    如果有任何的处理器返回false则返回false，否则返回true。
Observable
getAt ( Number index ) : Ext.data.Record
获取指定位置的记录。
获取指定位置的记录。
参数:
  • index : Number
    需要查找的记录的索引位置。
返回值:
  • Ext.data.Record
    所传递的索引位置的Record。 如果没有找到，返回undefined
Store
getById ( String id ) : Ext.data.Record
获取拥有指定id的记录。
获取拥有指定id的记录。
参数:
  • id : String
    需要查找记录的id
返回值:
  • Ext.data.Record
    拥有所给id的Record。如果没有找到返回undefined
Store
getCount () : Number
获取缓存记录的条数。如果使用分页，此值可能不是数据集的总数。...
获取缓存记录的条数。

如果使用分页，此值可能不是数据集的总数。 如果Reader使用的数据对象包含数据集总数， 那么 getTotalCount 函数将会返回数据集的总条数。 注意: 参见load 配置项的重要注释。

参数:
  • 无。
返回值:
  • Number
    Store缓存中Record的条数
Store
getModifiedRecords () : Ext.data.Record[]
获取自从最后一次提交以来被修改过的 records。、 修改过的记录将通过load操作(例如分页时)被持久化。...
获取自从最后一次提交以来被修改过的 records。、 修改过的记录将通过load操作(例如分页时)被持久化。 注意:不包括被删除的记录。 另请参见 pruneModifiedRecords 和 Ext.data.Record markDirty。.
参数:
  • 无。
返回值:
  • Ext.data.Record[]
    一个{@link Ext.data.Record Records} 数组，包含了未提交的变更。 如需获得记录中被修改的字段，参见 {@link Ext.data.Record}<tt>{@link Ext.data.Record#modified modified}.</tt> 。
Store
getRange ( [ Number startIndex ], [ Number endIndex ] ) : Ext.data.Record[]
返回位于指定区间范围中的记录。
返回位于指定区间范围中的记录。
参数:
  • startIndex : Number
    (可选) 其实索引位置(默认为0)
  • endIndex : Number
    (可选) 结束索引位置(默认为Store中的最后一条记录)
返回值:
  • Ext.data.Record[]
    Record数组
Store
getSortState () : Object
返回一个对象，描述当前Store的排序状态。
返回一个对象，描述当前Store的排序状态。
参数:
  • 无。
返回值:
  • Object
    Store的排序状态。 一个拥有两个属性的对象:<ul> <li><b>field : String<p class="sub-desc"> Record排序所依据的字段名。 </p></li> <li><b>direction : String<p class="sub-desc">排序的方向，'ASC' 或 'DESC' (case-sensitive).</p></li> </ul> 更多细节参见 <tt>{@link #sortInfo}</tt> 。
Store
getTotalCount () : Number
获取服务器返回的数据库记录总数。如果使用分页，为了让此值准确...
获取服务器返回的数据库记录总数。

如果使用分页，为了让此值准确， Reader 使用的数据对象必须包含数据集的数量。 对于远程数据源， 此参数 ( JsonReader的 totalProperty， XmlReader的 totalRecords ) 的值必须通过服务端的一次查询来返回。 注意: 参见 load 方法的重要注释。

参数:
  • 无。
返回值:
  • Number
    Record的数量在数据对象中被指定，通过Proxy传递给Reader。

    注意: 如果在本地改变Store的内容，此值不会被更新。

Store
groupBy ( String field , [ Boolean forceRegroup ] ) : void
根据指定的字段对数据进行分组。
根据指定的字段对数据进行分组。
参数:
  • field : String
    字段名，将会根据此值对store的数据进行排序
  • forceRegroup : Boolean
    (可选) 此参数为true时将会强制刷新分组，即使所传递的字段与当前分组 使用的字段相同，false时将跳过在相同字段上进行分组 (默认为false)
返回值:
  • void
GroupingStore
hasListener( String eventName ) : Boolean
检测对象是否包含指定事件的任何监听器
检测对象是否包含指定事件的任何监听器
参数:
  • eventName : String
    检测的事件名
返回值:
  • Boolean
    如果事件被监听则为true，否则为false
Observable
indexOf ( Ext.data.Record record ) : Number
获取所传递的Record在缓存中的位置索引。
获取所传递的Record在缓存中的位置索引。
参数:
  • record : Ext.data.Record
    需要查找的Ext.data.Record对象。
返回值:
  • Number
    所传递的Record的索引位置。如果没有找到返回-1
Store
indexOfId ( String id ) : Number
根据所传递的id获得缓存中记录的索引位置。
根据所传递的id获得缓存中记录的索引位置。
参数:
  • id : String
    需要查找的Record的id
返回值:
  • Number
    Record的索引位置。 如果没有找到，返回-1
Store
insert ( Number index , Ext.data.Record[] records ) : void
在所给的位置向Store中插入记录并触发 add 事件。 另请参见 add 和 addSorted 。
在所给的位置向Store中插入记录并触发 add 事件。 另请参见 add 和 addSorted 。
参数:
  • index : Number
    插入所给记录的起始位置。
  • records : Ext.data.Record[]
    一个Ext.data.Record对象数组，它将被插入到缓存中。
返回值:
  • void
Store
isFiltered () : Boolean
如果store当前被进行了过滤，返回true
如果store当前被进行了过滤，返回true
参数:
  • 无。
返回值:
  • Boolean
Store
load ( Object options ) : Boolean
使用所配置的 reader 从配置的 proxy 加载Record...

使用所配置的 reader 从配置的 proxy 加载Record

注意:

  • 重要 : 加载操作是异步的！ 在新的数据被加载完成之前，函数的调用已经返回。 如需对调用load方法产生的信息进行任何后续处理， 指定一个回调函数，或者使用一个 'load'事件处理函数。
  • 如果使用 远程排序 ，第一次调用必须在 options.params 中指定 start 和 limit 参数， 以便设定数据集的起始位置以及每次使用Proxy所缓存的Record条数。
  • 如果使用 远程排序 ， 根据指定的 paramNames 所配置的 sortInfo 将会自动被包含在请求参数中。
参数:
  • options : Object
    一个包含参数的对象，它控制加载选项:
    • params :Object

      一个包含了参数的对象，将作为HTTP参数被传递 给远程数据源。 注意: params 将会被任何具有同名 baseParams 的属性覆盖。

      这些参数将会被使用 Ext.urlEncode 编码成标准的HTTP参数。

    • callback : Function

      在Record加载之后被调用的函数。 回调函数在load事件被触发后调用， 并且将会被传递如下参数：

      • r : Ext.data.Record[] 所加载的Record数组。
      • options : 调用load方法时的配置对象。
      • success : 布尔值，加载是否成功标识位。

    • scope : Object

      调用回调函数时的作用域(默认为Store对象)

    • add : Boolean

      标志位，将把加载的记录添加到缓存，而不是替换 当前的缓存。 注意: 参见 loadData 的注释

返回值:
  • Boolean
    如果<i>开发者</i> 提供的 <tt>{@link #beforeload}</tt> 事件处理函数返回了 <tt>false</tt>， load调用将会被取消并且返回<tt>false</tt>; 否则返回<tt>true</tt>。
Store
loadData ( Object data , [ Boolean append ] ) : void
从一个传递的数据块中加载数据并 触发 load 事件。 必须在构造器中配置...
从一个传递的数据块中加载数据并 触发 load 事件。 必须在构造器中配置一个知道数据格式的 Reader 。
参数:
  • data : Object
    一个数据块，将会从其中读取Record。 期望的数据格式 依赖所配置的 Reader 并且应该与此Reader 的 Ext.data.Reader.readRecords 参数相对应。
  • append : Boolean
    (可选) 此参数wieldtrue 将会追加新的Record而不是默认替换现有的缓存。 注意: Store中的Record将会用它们的 id 作为key， 所以如果添加的Record的id在Store中已经存在将会替换 现有的Record。 只有有用新的唯一的id的Record会被添加。
返回值:
  • void
Store
multiSort ( Array sorters , String direction ) : void
根据多个field/direction排序规则对当前store的内容进行排序。 此方法在...
根据多个field/direction排序规则对当前store的内容进行排序。 此方法在 sort 内部被调用并且一般不需要手工调用。 多条件联合排序目前只能应用到本地数据集- 如果使用remoteSort，多重排序的数据目前不会被发送给代理。
参数:
  • sorters : Array
    排序规则对象数组(字段和顺序)
  • direction : String
    排序结果的整体顺序(默认为 "ASC")
返回值:
  • void
Store
on( String eventName, Function handler, [Object scope], [Object options] ) : void
给对象添加事件处理器 (addListener的简写形式)
给对象添加事件处理器 (addListener的简写形式。)
参数:
  • eventName : String
    监听的事件类型
  • handler : Function
    事件调用的方法
  • scope : Object
    （可选）处理方法执行时的作用域 (this 的引用)。 如果被忽略。默认为触发事件的对象。
  • options : Object
    可选 包含处理器配置的对象。
返回值:
  • void
Observable
purgeListeners() : void
移除对象上所有的监听器
移除对象上所有的监听器
参数:
  • 无。
返回值:
  • void
Observable
query ( String field , String/RegExp value , [ Boolean anyMatch ], [ Boolean caseSensitive ] ) : MixedCollection
根据指定的属性查找记录。
根据指定的属性查找记录。
参数:
  • field : String
    你的记录中的一个字段
  • value : String/RegExp
    要么是一个字符串，字段以此字符串开始， 或者是一个需要对字段进行测试的正则表达式。
  • anyMatch : Boolean
    (可选)此参数为true将进行全字匹配，而不仅仅是匹配开始处
  • caseSensitive : Boolean
    (可选)此参数为true在比较时将会对大小写敏感
返回值:
  • MixedCollection
    返回一个匹配记录的Ext.util.MixedCollection
Store
queryBy ( Function fn , [ Object scope ] ) : MixedCollection
使用一个过滤函数在Store缓存的记录中进行查找。 指定的函数将会在Store中的每一条记录上依次调用。...
使用一个过滤函数在Store缓存的记录中进行查找。 指定的函数将会在Store中的每一条记录上依次调用。 如果此函数返回true那么这条记录就会被 包含在结果集中。
参数:
  • fn : Function
    需要调用的函数。 它将会被传递如下的参数：
    • record : Ext.data.Record

      需要进行过滤测试的 record 使用 Ext.data.Record.get 方法访问记录中的字段。

    • id : Object

      传递的Record的ID

  • scope : Object
    (可选) 作用域( this 引用)，函数将在其中被执行。 默认为当前Store。
返回值:
  • MixedCollection
    返回一个Ext.util.MixedCollection 包含符合条件记录
Store
rejectChanges () : void
在所有 被修改的记录 上 回退 所有的变更。
在所有 被修改的记录 上 回退 所有的变更。
参数:
  • 无。
返回值:
  • void
Store
relayEvents( Object o, Array events ) : void
从指定的Observable上传递选择的事件就好像被当前对象触发一样。
从指定的Observable上传递选择的事件就好像被当前对象触发一样。
参数:
  • o : Object
    该Observable上的事件被当前对象传递。
  • events : Array
    传递的数组名。
返回值:
  • void
Observable
reload ( Object options ) : void
使用配置的 Reader 和上次执行加载操作的选项...

使用配置的 Reader 和上次执行加载操作的选项 从配置的Proxy重新加载数据缓存。

注意: 参见 load 中的重要注释。

参数:
  • options : Object

    (可选) 一个包含了 加载选项 的对象，它可能会覆盖最后一次 load 使用的options。 详情参见 load(默认为 null，在这种情况下将使用 lastOptions)。

    向现有参数中添加新参数:

    lastOptions = myStore.lastOptions;
Ext.apply(lastOptions.params, {
    myNewParam: true
});
myStore.reload(lastOptions);
返回值:
  • void
Store
remove ( Ext.data.Record/Ext.data.Record[] record ) : void
从Store中删除记录并触发 remove 事件。
从Store中删除记录并触发 remove 事件。
参数:
  • record : Ext.data.Record/Ext.data.Record[]
    需要从缓存中删除的记录或者记录数组。
返回值:
  • void
Store
removeAll ( Boolean silent ) : void
从Store中删除所有记录并触发 clear 事件。
从Store中删除所有记录并触发 clear 事件。
参数:
  • silent : Boolean
    [false] 默认为 false。设置为 true将不会触发clear事件。
返回值:
  • void
Store
removeAt ( Number index ) : void
删除Store中指定位置的一条记录。 触发 remove事件。
删除Store中指定位置的一条记录。 触发 remove事件。
参数:
  • index : Number
    需要删除记录的位置索引
返回值:
  • void
Store
removeListener( String eventName, Function handler, [Object scope] ) : void
删除一个事件处理器。
删除一个事件处理器。
参数:
  • eventName : String
    处理器关联的事件类型。
  • handler : Function
    移除的处理器。 这应该是传递到addListener里的方法的引用。
  • scope : Object
    （可选）处理器指定的初始作用域。
返回值:
  • void
Observable
resumeEvents() : void
重新开始触发事件。(参见suspendEvents) 如果事件以queueSuspended参数被挂起，则在事件被挂起时 ...
重新开始触发事件。(参见 suspendEvents) 如果事件以queueSuspended 参数被挂起，则在事件被挂起时触发的事件会被传递到所有的监听器上
参数:
  • 无。
返回值:
  • void
Observable
save () : Number
将所有挂起的更改保存到store。 如果没有配置对应的 Ext.data.Api.actions操作...
将所有挂起的更改保存到store。 如果没有配置对应的 Ext.data.Api.actions操作， 那么将使用配置的 url 。
change            url
---------------   --------------------
removed records   Ext.data.Api.actions.destroy
phantom records   Ext.data.Api.actions.create
modified records  Ext.data.Api.actions.update
参数:
  • 无。
返回值:
  • Number
    单独指定"batch"需要保存的记录条数。 如果没有项目需要保存，或者保存操作被取消，将会返回-1
Store
setBaseParam ( String name , Mixed value ) : void
为store的baseParams 中指定的参数名设置值。 用法:myStore.setBaseParam('foo', {bar:3});
为store的baseParams 中指定的参数名设置值。 用法:

myStore.setBaseParam('foo', {bar:3});
参数:
  • name : String
    需要指定值的参数名称
  • value : Mixed
    指定给命名属性的值
返回值:
  • void
Store
setDefaultSort ( String fieldName , [ String dir ] ) : void
设置下一次 load 操作所使用的默认排序列和顺序。
设置下一次 load 操作所使用的默认排序列和顺序。
参数:
  • fieldName : String
    需要排序的字段名。
  • dir : String
    (可选) 排序方向，'ASC' 或者 'DESC' (大小写敏感，默认为'ASC')
返回值:
  • void
Store
singleSort ( String fieldName , [ String dir ] ) : void
根据单个字段和方向对store的内容进行排序。 这将会在...
根据单个字段和方向对store的内容进行排序。 这将会在 sort 内部被调用，并且一般情况下不应该手工调用。
参数:
  • fieldName : String
    需要排序字段的名称。
  • dir : String
    (可选) 排序方向，'ASC' 或者 'DESC' (大小写敏感，默认为 'ASC')
返回值:
  • void
Store
sort ( String/Array fieldName , [ String dir ] ) : void
对记录进行排序。如果使用远程排序，将在服务端进行排序操作， 然后刷新缓存。...
对记录进行排序。如果使用远程排序，将在服务端进行排序操作， 然后刷新缓存。 如果使用本地排序，缓存将在内部排序。 另请参见 remoteSort 和 paramNames。 此函数接受两种调用参数-将字段名作为第一个参数传递进来， 或者将多条件联合排序的配置对象作为一个数组传递进来。 单条件排序示例：store.sort('name', 'ASC');多条件联合排序 示例store.sort([ { field : 'name', direction: 'ASC' }, { field : 'salary', direction: 'DESC' } ], 'ASC'); 在以上的第二种形式中，排序参数将会被依次应用， 后面的排序器将在前面排序器产生的结果上进行再次排序操作。 例如，依照上面的排序配置， 如果存在具有相同名字的两条记录，它们将会按照薪水进行排序。 排序配置可以添加任意多个。
参数:
  • fieldName : String/Array
    进行排序的字段名，或者一个整理好的排序配置数组
  • dir : String
    (可选) 排列顺序，'ASC' 或者 'DESC' (大小写敏感，默认为 'ASC')
返回值:
  • void
Store
sum ( String property , [ Number start ], [ Number end ] ) : Number
将位于start 和 end之间的每条 record 的property值加在一起然后返回结果。
将位于start 和 end之间的每条 record 的property值加在一起然后返回结果。
参数:
  • property : String
    每条记录中的一个字段
  • start : Number
    (可选) 起始记录位置(默认为 0)
  • end : Number
    (可选)要包含的 最后一条记录的位置(默认为 length-1)
返回值:
  • Number
    The sum
Store
suspendEvents( Boolean queueSuspended ) : void
暂停触发所有的事件。 (参看resumeEvents)
暂停触发所有的事件。（参看 resumeEvents)
参数:
  • queueSuspended : Boolean
    如果传递为true则排列好暂停的事件使得在调用 resumeEvents 后再触发它们，而不是抛弃所有暂停的事件。
返回值:
  • void
Observable
un( String eventName, Function handler, [Object scope] ) : void
删除一个事件处理器(removeListener方法的简写形式)
删除一个事件处理器(removeListener方法的简写形式。)
参数:
  • eventName : String
    处理器关联的事件类型
  • handler : Function
    被删除的处理器 这应该是传入 addListener 中的方法的引用。
  • scope : Object
    （可选）为处理器指定的初始作用域。
返回值:
  • void
Observable

公共事件

Event Defined By
add : ( Store this , Ext.data.Record[] records , Number index )
当Record被added 到Store中时触发
当Record被added 到Store中时触发
监听器将会以如下的参数格式触发:
  • this : Store
  • records : Ext.data.Record[]
    所添加的记录数组
  • index : Number
    record(s)被添加的索引位置
Store
beforeload : ( Store this , Object options )
在请求新的数据对象之前触发。 如果beforeload的监听器返回...
在请求新的数据对象之前触发。 如果beforeload的监听器返回 false那么 load 操作将会被取消。
Listeners will be called with the following arguments:
  • this : Store
  • options : Object
    指定的加载参数(详情参见 load)
Store
beforesave : ( Ext.data.Store store , Object data )
在调用保存操作之前触发。 保存包括销毁records，更新records和创建records。
在调用保存操作之前触发。 保存包括销毁records，更新records和创建records。
监听器将会以如下的参数格式被调用:
  • store : Ext.data.Store
  • data : Object
    一个包含需要保存的数据的对象。 此对象将会为每个操作包含一个key，对应每个操作的record数组。
Store
beforewrite : ( Ext.data.Store store , String action , Record/Record[] rs , Object options , Object arg )
监听器将会以如下的参数格式被调用:
  • store : Ext.data.Store
  • action : String
    [Ext.data.Api.actions.create|update|destroy]
  • rs : Record/Record[]
    被写入的Record(s)
  • options : Object
    指定的加载选项。 编辑 options.params 以向请求中添加HTTP参数。 (详情参见 save)
  • arg : Object
    传递给request 函数的 回调参数对象
Store
clear : ( Store this , Record[] The )
当数据缓存被清空时触发。
当数据缓存被清空时触发。
监听器将会以如下的参数格式被调用:
  • this : Store
  • The : Record[]
    被清楚的记录
Store
datachanged : ( Store this )
当数据缓存以批量的方式发生变化时触发(例如，它被排序、过滤等等)，并且 ...
当数据缓存以批量的方式发生变化时触发(例如，它被排序、过滤等等)，并且 使用此Store作记录缓存的组件都应该刷新其视图。
监听器将会以如下的参数格式被调用:
  • this : Store
Store
exception : ( misc misc )
在Proxy进行远程请求时如果内部发生异常，此事件被触发。 此事件与对应的...

在Proxy进行远程请求时如果内部发生异常，此事件被触发。 此事件与对应的 Ext.data.DataProxy有关。 附加信息参见 Ext.data.DataProxy. exception 。

监听器将会以如下的参数格式被调用:
  • misc : misc
    描述参见 Ext.data.DataProxy. exception 。
Store
groupchange : ( Ext.data.GroupingStore store , String groupField )
当调用store.groupBy方法并成功改变了store的分组时触发
当调用store.groupBy方法并成功改变了store的分组时触发
监听器将会以如下的参数各式被调用:
  • store : Ext.data.GroupingStore
    分组的store
  • groupField : String
    store当前分组的字段
GroupingStore
load : ( Store this , Ext.data.Record[] records , Object options )
在新的数据集被加载之后触发。
在新的数据集被加载之后触发。
监听器将会以如下的参数格式被调用:
  • this : Store
  • records : Ext.data.Record[]
    加载的Record
  • options : Object
    指定的加载选项( 细节参见 load)
Store
loadexception : ( misc misc )
此事件已过时，推荐使用能捕获所有 exception 的事件替代。...

此事件已过时，推荐使用能捕获所有 exception 的事件替代。

此事件与对应的Ext.data.DataProxy 有关。 附加信息详情参见 Ext.data.DataProxy. loadexception 。

监听器将会以如下的参数格式被调用:
  • misc : misc
    更多描述参见 Ext.data.DataProxy. loadexception 。
Store
metachange : ( Store this , Object meta )
在当前store的reader提供了新的元数据(fields)时触发。 当前只有JsonReader支持此配置。
在当前store的reader提供了新的元数据(字段)时触发。 当前只有JsonReader支持此配置。
监听器将会以如下的参数格式被调用:
  • this : Store
  • meta : Object
    JSON元数据
Store
remove : ( Store this , Ext.data.Record record , Number index )
当从Store中 removed 一条记录时触发
当从Store中 removed 一条记录时触发
监听器将会以如下参数格式被调用:
  • this : Store
  • record : Ext.data.Record
    被删除的记录
  • index : Number
    被删记录的索引位置
Store
save : ( Ext.data.Store store , Number batch , Object data )
在保存操作完成之后触发。 保存操作包含销毁记录、更新记录以及创建记录。
在保存操作完成之后触发。 保存操作包含销毁记录、更新记录以及创建记录。
监听器将会以如下的参数格式被调用:
  • store : Ext.data.Store
  • batch : Number
    被保存分支的标识符。
  • data : Object
    一个对象，包含了需要保存的数据。 此对象将会包含每个操作对应的key，连同每个操作所涉及到的记录的数组。
Store
update : ( Store this , Ext.data.Record record , String operation )
当一条记录被更新时触发
当一条记录被更新时触发
监听器将会以如下的参数格式被调用:
  • this : Store
  • record : Ext.data.Record
    被更新的记录
  • operation : String
    执行的更新操作。 可能是如下值中的一个:
    Ext.data.Record.EDIT
Ext.data.Record.REJECT
Ext.data.Record.COMMIT
Store
write : ( Ext.data.Store store , String action , Object result , Ext.Direct.Transaction res , Record/Record[] rs )
如果一个 Ext.data.Api.actions的CRUD操作导致服务器返回代码200，此事件被触发...
如果一个 Ext.data.Api.actions的CRUD操作导致服务器返回代码200，此事件被触发。 操作成功由 result[ 'successProperty'] 参数决定 ( 注意 对于安静型(RESTful)的store， 一个简单的20x(译者注：服务端返回的状态码，类似404，各种状态码都有自己的 含义，具体请google)，对"destroy"和"update"操作来说已经足够。 "create"操作应该(should should)返回200同时返回一个数据库主键)。
监听器将会以如下的参数格式被调用:
  • store : Ext.data.Store
  • action : String
    [Ext.data.Api.actions.create|update|destroy]
  • result : Object
    为方便使用，在响应之外获取的数据
  • res : Ext.Direct.Transaction
  • rs : Record/Record[]
    Store的记录，写操作的对象
Store


Observable
    DataProxy
      HttpProxy

Class Ext.data.HttpProxy

包: | Ext.data
定义类的文件: | HttpProxy.js
类: | HttpProxy
继承自: | DataProxy

Ext.data.DataProxy 的一个实现类，它处理与发起页面位于同域中的数据请求。

注意: 该类不能用来从与当前页面位于不同的域中获取数据(译者注：意为不能跨域)。 对于跨域请求，请使用 ScriptTagProxy 。

注意，为了使浏览器能解析XML文档， 服务端必须把HTTP响应的Content-Type头设置为"text/xml"。

配置项

Config Options Defined By
api : Object
指定 调用CRUD操作的方法： "read", "create", "update" 和 "destroy"的url。 默认为：...
指定 调用CRUD操作的方法： "read", "create", "update" 和 "destroy"的url。 默认为：
api: {
    read    : undefined,
    create  : undefined,
    update  : undefined,
    destroy : undefined
}

url根据被执行的操作[load|create|save|destroy]而创建， 使用相应的 api 参数，或者如果没有定义时默认为配置的 Ext.data.Store. url。

例如:

api: {
    load :    '/controller/load',
    create :  '/controller/new',  // 服务器必须返回新记录的idProperty
    save :    '/controller/update',
    destroy : '/controller/destroy_action'
}

// 作为第二选择，可以使用对象形式指定每个API-action
api: {
    load: {url: 'read.php', method: 'GET'},
    create: 'create.php',
    destroy: 'destroy.php',
    save: 'update.php'
}

对于给定的CRUD，如果指定的URL为undefined， CRUD操作的请求会被重定向到所配置的 url 上。

注意： 如果需要动态修改一个操作的URL，对应的API属性 必须在操作的请求发出之前进行修改， 修改时使用对应的before-action事件。 例如需要修改指定给load操作的URL：

// 修改操作的url
myStore.on({
    beforeload: {
        fn: function (store, options) {
            // 使用setUrl
                                    方法，*仅仅*为当前请求改变URL。
            store.proxy.setUrl('changed1.php');
            // 将第二个可选参数设置为true以便改变当前URL参数，
            // 将当前URL应用到所有后来的请求。
            store.proxy.setUrl('changed1.php', true);
            // 变更所要完成的代理API，使用公共
            // 方法 setApi
                                    。
            store.proxy.setApi('read', 'changed2.php');
            // 或者使用个配置对象设置整个API。
            // 当使用配置对象选项时，你必须重新定义整个
            // API -- 而不仅仅是一个特定的操作。
            store.proxy.setApi({
                read    : 'changed_read.php',
                create  : 'changed_create.php',
                update  : 'changed_update.php',
                destroy : 'changed_destroy.php'
            });
        }
    }
});

DataProxy
doRequest : Function
抽象方法，所有子类都必须实现此方法。 注意: 只应该被需要自定义代理的开发者使用。 ...
抽象方法，所有子类都必须实现此方法。 注意: 只应该被需要自定义代理的开发者使用。 (例如: HttpProxy.doRequest, DirectProxy.doRequest)。
DataProxy
listeners : Object
一个包含一个或多个事件处理器的配置对象，会在初始化的时候被添加到目标对象上...

一个包含一个或多个事件处理器的配置对象，会在初始化的时候被添加到目标对象上。 该配置对象应该是一个有效的监听器配置对象就像 addListener例子中指定的一样可一次附加多个处理器。

ExtJs Components上的DOM事件

一些 ExtJs Component 类导出时会选择一些DOM事件(例如 "click", "mouseover" 等等), 这通常只是在有额外的值可以被添加时发生。例如DataView类的 click事件会传递被点击的节点。也可以直接在Component的HTMLElementevent上访问DOM事件，但必需在Component被渲染后监听器才能添加到Element 上。可以按照以下步骤添加插件:

// 插件会用一个监听器配置对象进行配置。
//该组件会被添加到所有处理方法的参数列表上。
Ext.DomObserver = Ext.extend(Object, {
    constructor: function(config) {
        this.listeners = config.listeners ? config.listeners : config;
    },

    // 组件将自己传递进了插件的初始化方法里
    init: function(c) {
        var p, l = this.listeners;
        for (p in l) {
            if (Ext.isFunction(l[p])) {
                l[p] = this.createHandler(l[p], c);
            } else {
                l[p].fn = this.createHandler(l[p].fn, c);
            }
        }

        // 渲染后立即添加监听器到元素上
        c.render = c.render.createSequence(function() {
            var e = c.getEl();
            if (e) {
                e.on(l);
            }
        });
    },

    createHandler: function(fn, c) {
        return function(e) {
            fn.call(this, e, c);
        };
    }
});

var combo = new Ext.form.ComboBox({

    // 元素被点击后折叠
    plugins: [ new Ext.DomObserver({
        click: function(evt, comp) {
            comp.collapse();
        }
    })],
    store: myStore,
    typeAhead: true,
    mode: 'local',
    triggerAction: 'all'
});

Observable
onRead : Function
抽象方法，所有子类都必须实现此方法。 注意: 只应该被需要自定义代理的开发者使用。...
抽象方法，所有子类都必须实现此方法。 注意: 只应该被需要自定义代理的开发者使用。 read 操作 的回调函数。
DataProxy
onWrite : Function
抽象方法，所有子类都必须实现此方法。 注意: 只应该被需要自定义代理的开发者使用。...
抽象方法，所有子类都必须实现此方法。 注意: 只应该被需要自定义代理的开发者使用。 create, update和destroy 操作 的回调函数。
DataProxy
restful : Boolean
默认为 false。 设置为true以便用一种安静(RESTful)模式进行操作。...

默认为 false。 设置为true以便用一种安静(RESTful)模式进行操作。

注意： 如果被插入的 Ext.data.Store 被设置为 restful: true ， 此参数将会被自动设置为true。 如果Store是RESTful的， 没有必要在代理上设置此配置。

RESTful型的实现允许服务端框架 根据HTTP方法自动发送操作到一个url， 例如:

store: new Ext.data.Store({
    restful: true,
    proxy: new Ext.data.HttpProxy({url:'/users'}); // all requests sent to /users
    ...
)}
如果代理的配置项中没有指定 api 所有请求都将被集中到一个单独的RESTful url (/users)， 这样服务端框架可以监测HTTP Method并做出相应的操作:
Method   url        action
POST     /users     create
GET      /users     read
PUT      /users/23  update
DESTROY  /users/23  delete

如果设置为true， 非模拟的 记录的id 将会被添加到url之后。 某些MVC(例如Ruby on Rails, Merb和 Django)支持 基于url的片段，URL中的片段遵守 Model-View-Controller 模式:

someSite.com/controller/action/id
典型情况下url的片段:
  • 第一段：描述了应该被调用的控制类。
  • 第二段： 描述了需要调用的类函数，或者方法。
  • 第三段： 描述了ID(典型情况下传递给方法的参数)。

附加信息参见 Ext.data.DataProxy.api 。

DataProxy

公共属性

Property |  | Defined By
 | conn : Object Connection对象 (或者是为 Ext.Ajax.request指定的 参数项) 当前HttpProxy用它发送请求到服务器。... Connection对象 (或者是为 Ext.Ajax.request指定的 参数项) 当前HttpProxy用它发送请求到服务器。 当前对象的属性可以动态改变，以便改变请求数据的方式。 | HttpProxy

公共方法

Method Defined By
HttpProxy ( Object conn )
参数:
  • conn : Object
    一个 Ext.data.Connection 对象，或者 Ext.Ajax.request 的配置参数。

    注意，如果当前HttpProxy被一个 Store 使用，那么Store对 load 的调用将会覆盖所有指定的 callback 和 params 选项。 在这种情况下，使用Store的 events 属性可以修改参数，或者响应加载事件。 Store的 baseParams 也可以用来传递初始化时已知的参数。

    如果传递了一个可选的参数， 将会使用Ext.Ajax 单例对象发送请求。

返回值:
  • void
HttpProxy
addEvents( Object|String o, string Optional. ) : void
添加指定的事件到事件列表上，事件会被该Observable触发。
添加指定的事件到事件列表上，事件会被该Observable触发。
参数:
  • o : Object|String
    以事件名作为属性true作为值的对象 或者当多个事件名被分开的传递时则为第一个事件名。
  • Optional. : string
    事件名被分开的传递时则为事件名。 用法:
    this.addEvents('storeloaded', 'storecleared');
返回值:
  • void
Observable
addListener( String eventName, Function handler, [Object scope], [Object options] ) : void
给对象添加事件处理器。
给对象添加事件处理器。
参数:
  • eventName : String
    监听的事件名。
  • handler : Function
    事件调用的方法
  • scope : Object
    （可选）处理方法执行的作用域 (this的引用 reference)。 如果被忽略。默认为触发事件的对象。
  • options : Object
    （可选）包含处理器配置和属性的对象。 可能包含以下的属性:
    • scope : Object
      处理方法执行的作用域(this的引用) 。 如果被忽略。默认为触发事件的对象。
    • delay : Number
      在触发事件后延迟调用处理器的毫秒数。
    • single : Boolean
      如果为True则添加一个处理器来处理下一次的事件触发（仅一次），然后移除自己。
    • buffer : Number
      使得处理器延迟指定毫秒数后预定的运行在 一个Ext.util.DelayedTask中 。 如果事件在时间内再一次被触发，原始的处理器不会被调用，但是新的处理器会预定的在他的位置上。
    • target : Observable
      如果事件在目标的Observable上触发则仅仅调用处理器， 否则 事件会从子类的Observable上冒泡

    组合选项
    使用这些选项参数,可能会组合出不同类型的监听器：

    一个延迟的，一次性的监听器。

    myDataView.on('click', this.onClick, this, {
single: true,
delay: 100
});

    一次调用附加多个处理器
    该方法同样支持传递一个包含指定的多个处理器的属性的配置对象参数。

    myGridPanel.on({
'click' : {
    fn: this.onClick,
    scope: this,
    delay: 100
},
'mouseover' : {
    fn: this.onMouseOver,
    scope: this
},
'mouseout' : {
    fn: this.onMouseOut,
    scope: this
}
});

    或者一个简写的语法：

    myGridPanel.on({
'click' : this.onClick,
'mouseover' : this.onMouseOver,
'mouseout' : this.onMouseOut,
 scope: this
});
返回值:
  • void
Observable
destroy () : void
通过清除所有事件监听器、取消所有活动的请求，销毁代理。
通过清除所有事件监听器、取消所有活动的请求，销毁代理。
参数:
  • 无。
返回值:
  • void
DataProxy
doRequest ( String action , Ext.data.Record/Ext.data.Record[] rs , Object params , Ext.data.DataReader reader , Function callback , Object scope , Object arg ) : void
HttpProxy的DataProxy#doRequest的实现
HttpProxy的DataProxy#doRequest的实现
参数:
  • action : String
    CRUD操作的类型(create, read, update, destroy)
  • rs : Ext.data.Record/Ext.data.Record[]
    如果操作被加载了，rs将会为null
  • params : Object
    一个包含参数的对象，它将被用作发送到远程服务器请求的 HTTP参数。
  • reader : Ext.data.DataReader
    Reader对象，它把数据对象转换为Ext.data.Record数据块。
  • callback : Function

    在请求之后调用的函数。 回调函数将会被传递如下参数：

    • r : Ext.data.Record[] Ext.data.Record数据块。
    • options: 来自请求操作的选项对象
    • success: Boolean 操作成功标志位

  • scope : Object
    作用域( this 引用) 回调函数将会在其中被执行。 默认为浏览器window对象。
  • arg : Object
    一个可选参数，将会作为第二个参数被传递给回调函数。
返回值:
  • void
HttpProxy
enableBubble( String/Array events ) :void
是否现在使得事件会被该Observable触发并调用 this.getBubbleTarget()方法在拥有者的继承树...

是否现在使得事件会被该Observable触发并调用 this.getBubbleTarget()方法在拥有者的继承树中冒泡。Observable的基础类中没有该方法的实现。

该方法一般被Ext.Components用来冒泡事件到拥有者的容器。参看Ext.Component.getBubbleTarget默认的实现 在Ext.Component中返回组件的直接拥有者。但是如果需要的是一个已知的目标，该方法可以被重写来更快的访问需求的目标。

例子:

Ext.override(Ext.form.Field, {
    // 添加方法到Field的initComponent上改变事件为冒泡
    initComponent : Ext.form.Field.prototype.initComponent.createSequence(function() {
        this.enableBubble('change');
    }),

    // 我们知道我们想让Field的事件冒泡到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() {
            // 如果样式被修改标题会变红。
            myForm.header.setStyle('color', 'red');
        }
    }
});
参数:
  • events : String/Array
    冒泡的事件名，或事件名数组
返回值:
  • void
Observable
fireEvent( String eventName, Object... args ) : Boolean
用传入的参数触发指定的事件 (减去事件名)。 一个事件可以被设置为冒泡 Obse...

用传入的参数触发指定的事件 (减去事件名)。

一个事件可以被设置为冒泡到Observable父类继承树(参看 Ext.Component.getBubbleTarget) 调用enableBubble实现。

参数:
  • eventName : String
    触发的事件名。
  • args : Object...
    传递给处理器的可变长度参数。
返回值:
  • Boolean
    如果有任何的处理器返回false则返回false，否则返回true。
Observable
getConnection () : Connection
返回当前Proxy使用的 Ext.data.Connection 对象。
返回当前Proxy使用的 Ext.data.Connection 对象。
参数:
  • 无。
返回值:
  • Connection
    Connection对象。此对象可以用来订阅比DataProxy事件更多的细节。
HttpProxy
hasListener( String eventName ) : Boolean
检测对象是否包含指定事件的任何监听器
检测对象是否包含指定事件的任何监听器
参数:
  • eventName : String
    检测的事件名
返回值:
  • Boolean
    如果事件被监听则为true，否则为false
Observable
isApiAction ( String [Ext.data.Api.CREATE|READ|UPDATE|DESTROY]} ) : Boolean
如果指定的action 是作为一个单独的action在api-config.request中被定义的， 返回true。 如果所有的API-actions...
如果指定的action 是作为一个单独的action在api-config.request中被定义的， 返回true。 如果所有的API-actions 都被发送到唯一的url， 那么xaction参数不是必须的。 但是，如果没有定义api并且所有代理action被发送到DataProxy#url， 服务端需要xaction参数为CRUD操作执行 一次到相应代码的转换。
参数:
  • [Ext.data.Api.CREATE|READ|UPDATE|DESTROY]} : String
    action
返回值:
  • Boolean
DataProxy
load ( Object params , Object reader , Object callback , Object scope , Object arg ) : void
已过时 load方法使用旧的方法签名。 推荐的方法参见{@doRequest}。
已过时 load方法使用旧的方法签名。 推荐的方法参见{@doRequest}。
参数:
  • params : Object
  • reader : Object
  • callback : Object
  • scope : Object
  • arg : Object
返回值:
  • void
DataProxy
on( String eventName, Function handler, [Object scope], [Object options] ) : void
给对象添加事件处理器 (addListener的简写形式)
给对象添加事件处理器 (addListener的简写形式。)
参数:
  • eventName : String
    监听的事件类型
  • handler : Function
    事件调用的方法
  • scope : Object
    （可选）处理方法执行时的作用域 (this 的引用)。 如果被忽略。默认为触发事件的对象。
  • options : Object
    可选 包含处理器配置的对象。
返回值:
  • void
Observable
onRead ( String action , Object o , Object res ) : void
Callback for read action
Callback for read action
参数:
  • action : String
    每次Ext.data.Api.actions.read 的操作名称。
  • o : Object
    请求事务对象
  • res : Object
    服务器端响应
返回值:
  • void
HttpProxy
onWrite ( String action , Object trans , Object res ) : void
write操作的回调函数
write操作的回调函数
参数:
  • action : String
    [Ext.data.Api.actions.create|read|update|destroy]
  • trans : Object
    请求事务对象
  • res : Object
    服务器端响应
返回值:
  • void
HttpProxy
purgeListeners() : void
移除对象上所有的监听器
移除对象上所有的监听器
参数:
  • 无。
返回值:
  • void
Observable
relayEvents( Object o, Array events ) : void
从指定的Observable上传递选择的事件就好像被当前对象触发一样。
从指定的Observable上传递选择的事件就好像被当前对象触发一样。
参数:
  • o : Object
    该Observable上的事件被当前对象传递。
  • events : Array
    传递的数组名。
返回值:
  • void
Observable
removeListener( String eventName, Function handler, [Object scope] ) : void
删除一个事件处理器。
删除一个事件处理器。
参数:
  • eventName : String
    处理器关联的事件类型。
  • handler : Function
    移除的处理器。 这应该是传递到addListener里的方法的引用。
  • scope : Object
    （可选）处理器指定的初始作用域。
返回值:
  • void
Observable
request ( String action , Ext.data.Record/Ext.data.Record[]/null rs , Object params , Ext.data.DataReader reader , Function callback , Object scope , Object options ) : void
所有代理操作都通过此方法执行。 自动触发"before" + action事件。
所有代理操作都通过此方法执行。 自动触发"before" + action事件。
参数:
  • action : String
    操作名称
  • rs : Ext.data.Record/Ext.data.Record[]/null
    当是'load'操作时此值为null
  • params : Object
  • reader : Ext.data.DataReader
  • callback : Function
  • scope : Object
    作用域 ( this 引用) 回调函数将会在其中被执行。 默认为Proxy对象。
  • options : Object
    所有为操作指定的选项(示例参见 Ext.data.Store.load。
返回值:
  • void
DataProxy
resumeEvents() : void
重新开始触发事件。(参见suspendEvents) 如果事件以queueSuspended参数被挂起，则在事件被挂起时 ...
重新开始触发事件。(参见 suspendEvents) 如果事件以queueSuspended 参数被挂起，则在事件被挂起时触发的事件会被传递到所有的监听器上
参数:
  • 无。
返回值:
  • void
Observable
setApi ( String/Object api , String/Function url ) : void
重定义代理API或则一个API的单次操作。 可以使用两个方法签名调用。...

重定义代理API或则一个API的单次操作。 可以使用两个方法签名调用。

如果使用一个对象作为唯一的参数进行调用， 此对象在entire API中重新定义， 例如:

proxy.setApi({
    read    : '/users/read',
    create  : '/users/create',
    update  : '/users/update',
    destroy : '/users/destroy'
});

如果使用两个参数进行调用， 调用那个操作时，第一个参数必须是一个字符串，它指定需要重定义的API操作， 同时第二个参数必须是URL( 或者是一个函数，如果使用DirectProxy)， 例如:

                                proxy.setApi(Ext.data.Api.actions.read, '/users/new_load_url');
参数:
  • api : String/Object
    一个API描述对象，或者是action名。
  • url : String/Function
    调用action的URL( 或者是一个函数，如果使用DirectProxy)。
返回值:
  • void
DataProxy
setUrl ( String url , [ Boolean makePermanent ] ) : void
用来覆盖当个请求的url参数。 被设计用来在beforeaction事件中调用。...
用来覆盖当个请求的url参数。 被设计用来在beforeaction事件中调用。 调用setUrl参数将会覆盖所有通过api配置参数 设置的url。 设置可选的makePermanent参数， 可以为所有后续请求设置url。 如果不设置makePermanent， 下一次请求将会使用相同的url或者 初始化代理时定义的配置。
参数:
  • url : String
  • makePermanent : Boolean
    (可选) [false] (例如: beforeload, beforesave, 等等)。
返回值:
  • void
HttpProxy
suspendEvents( Boolean queueSuspended ) : void
暂停触发所有的事件。 (参看resumeEvents)
暂停触发所有的事件。（参看 resumeEvents)
参数:
  • queueSuspended : Boolean
    如果传递为true则排列好暂停的事件使得在调用 resumeEvents 后再触发它们，而不是抛弃所有暂停的事件。
返回值:
  • void
Observable
un( String eventName, Function handler, [Object scope] ) : void
删除一个事件处理器(removeListener方法的简写形式)
删除一个事件处理器(removeListener方法的简写形式。)
参数:
  • eventName : String
    处理器关联的事件类型
  • handler : Function
    被删除的处理器 这应该是传入 addListener 中的方法的引用。
  • scope : Object
    （可选）为处理器指定的初始作用域。
返回值:
  • void
Observable

公共事件

Event Defined By
beforeload : ( DataProxy this , Object params )
在发送请求获取数据对象之前触发。
在发送请求获取数据对象之前触发。
监听器将会以如下的参数格式被调用:
  • this : DataProxy
    发送请求的代理
  • params : Object
    传递给 request 函数的参数对象
DataProxy
beforewrite : ( DataProxy this , String action , Record/Record[] rs , Object params )
当为如下操作Ext.data.Api.actions.create|update|destroy 产生一个请求之前触发。除了通过...

当为如下操作Ext.data.Api.actions.create|update|destroy 产生一个请求之前触发。

除了通过发出此事件的DataProxy实例触发之外， 此事件也通过Ext.data.DataProxy 类触发， 通过在Ext.data.Proxy类自身绑定一个监听器， 允许集中处理来自所有 DataProxie的beforewrite事件。

监听器将会使用如下参数格式被调用:
  • this : DataProxy
    请求的代理
  • action : String
    [Ext.data.Api.actions.create|update|destroy]
  • rs : Record/Record[]
    需要create|update|destroy的Record(s)。
  • params : Object
    请求的 params 对象。 编辑 params 以便向请求中添加参数。
DataProxy
exception : ( DataProxy this , String type , String action , Object options , Object response , Mixed arg )
在进行远程请求时，如果在Proxy内部发生异常，触发此事件。 此事件通过对应的....

在进行远程请求时，如果在Proxy内部发生异常，触发此事件。 此事件通过对应的 Ext.data.Store . exception 进行转发，所以，所有Store的实例都可以监听此事件。

除了通过发出此事件的DataProxy实例触发之外， 此事件也通过Ext.data.DataProxy 类触发， 通过在Ext.data.Proxy类自身绑定一个监听器， 允许集中处理来自所有 DataProxie的exception事件。

此事件可以因为如下两个原因之一而被触发:

  • remote-request failed :
    服务器没有返回状态码=== 200
  • remote-request succeeded :
    远程请求已经成功，但是reader无法读取响应。 这意味着服务器返回了数据， 但是配置的Rader在读取响应时抛出了异常。 这种情况下，此事件被触发并且捕捉到的错误 将会被一起传递到此事件中。

根据第二个参数type [remote|response]， 此事件在两种不同的上下文触发。 在两种上下文中，前四个参数是一样的--- 只有最后两个参数不同。

监听器将会以如下的参数格式被调用:
  • this : DataProxy
    发出请求的代理
  • type : String

    此参数的值可以是'response'或者'remote'。

    • 'response' :

      服务器返回了一个无效的响应: 要么是404, 500或者响应的元数据 与DataReader中所定义的不符 (例如: root, idProperty, successProperty)。

    • 'remote' :

      服务器返回了一个有效的 响应，有一个参数successProperty === false. 此响应可以包含一个来自服务器的出错信息。 例如， 用户认证/授权(authentication/authorization)失败 ，或者发生了数据库校验错误。

  • action : String
    操作名称(参见 Ext.data.Api.actions。
  • options : Object
    在request 中为操作指定的配置项。
  • response : Object

    此参数的值依赖于 type 参数的值：

    • 'response' :

      原始的浏览器响应对象(例如: XMLHttpRequest)

    • 'remote' :

      来自服务器的已经解码的响应对象。

  • arg : Mixed

    此参数的类型和值依赖于 type 参数的值：

    • 'response' : Error

      如果配置的Reader无法读取数据，此参数为JavaScript Error对象。 如果远程请求返回success===false，此参数将会为null。

    • 'remote' : Record/Record[]

      只有在action是一个write action (Ext.data.Api.actions.create|update|destroy)时 才存在此参数

DataProxy
load : ( DataProxy this , Object o , Object options )
在load方法地方回调函数被调用之前触发。
在load方法地方回调函数被调用之前触发。
监听器将会使用如下的参数格式被调用:
  • this : DataProxy
    请求操作的代理
  • o : Object
    请求的事务对象
  • options : Object
    回调函数的options属性 ，被传递给 request 函数。
DataProxy
loadexception : ( misc misc )
此事件已过时。 loadexception事件参数的签名依赖于代理， 使用能捕获所有异常的...

此事件已过时。 loadexception事件参数的签名依赖于代理， 使用能捕获所有异常的 exception 事件代替。 除了触发exception 事件之外，此事件也会触发。

监听器将会以如下的参数格式被调用:
  • misc : misc
    参见 exception。
DataProxy
write : ( DataProxy this , String action , Object data , Object response , Record/Record[] rs , Object options )
在请求的回调函数被调用之前触发。作为补充， 通过发出事件DataProxy实例触发...

在请求的回调函数被调用之前触发。

除了通过发出此事件的DataProxy实例触发之外， 此事件也通过Ext.data.DataProxy 类触发， 通过在Ext.data.Proxy类自身绑定一个监听器， 允许集中处理来自所有 DataProxie的write事件。

监听器将会使用如下的参数格式被调用:
  • this : DataProxy
    发送请求的代理
  • action : String
    [Ext.data.Api.actions.create|upate|destroy]
  • data : Object
    从服务器的响应中提取的数据对象
  • response : Object
    来自服务器被解码好的响应
  • rs : Record/Record[]
    来自Store的Record(s)
  • options : Object
    回调函数的options 属性， 被传递给 request 函数
DataProxy


Class Ext.data.JsonReader.Error

包: | Ext.data
定义类的文件: | JsonReader.js
类: | JsonReader.Error
继承自: | Object
Error class for JsonReader

公共属性

该类没有公共属性。

公共方法

该类没有公共方法。

公共事件

该类没有公共事件。


DataReader
    JsonReader

Class Ext.data.JsonReader

包: | Ext.data
定义类的文件: | JsonReader.js
类: | JsonReader
子类: | ArrayReader
继承自: | DataReader

数据解析类，用来 从一个JSON数据包创建 Ext.data.Record 对象数组，此数据包 以Ext.data.Record 构造器提供的映射关系为依据。

示例代码:

var myReader = new Ext.data.JsonReader({
    // 元数据配置选项:
    idProperty: 'id'
    root: 'rows',
    totalProperty: 'results',
    Ext.data.DataReader.messageProperty: "msg"  //响应中的一个元素，提供了用户反馈的信息(可选)

    // 字段配置选项将会在内部创建一条Ext.data.Record

    // 构造函数，提供了解析record数据对象的映射关系
    fields: [
        // 将Record'的 'firstname'字段映射到数据对象的同名键值
        {name: 'name'},
        // 将Record'的 'job'字段映射到数据对象的'occupation'键
        {name: 'job', mapping: 'occupation'}
    ]
});

这将消耗一个如下格式的JSON数据对象:

{
    results: 2000, // Reader'中配置的totalProperty属性

    rows: [        // Reader'中配置的root属性

        // record数据对象:
        { id: 1, firstname: 'Bill', occupation: 'Gardener' },
        { id: 2, firstname: 'Ben' , occupation: 'Horticulturalist' },
        ...
    ]
}

使用metaData自动配置

通过在JSON数据对象中包含一个 metaData 参数， 可以在任意时刻改变一个JsonReader的元数据。 如果JSON数据对象拥有一个 metaData 属性， 使用当前Reader的 Store 对象将会使用新提供的字段定义对自己进行配置，同时 触发它的 metachange 事件。 metachange事件的处理器可以查询 metaData 属性，以便执行任何所需的配置操作。

注意，潜在地重新配置一个Store将会使对象失效，因为它们可能引用了 不再存在的字段或者记录。

如需灵活地使用此类，你可以像这样创建JsonReader:

var myReader = new Ext.data.JsonReader();

来自服务器的第一个数据包将会 通过包含一个 metaData 属性 和数据来配置reader。 例如，JSON数据对象可以有如下形式:

{
    metaData: {
        "idProperty": "id",
        "root": "rows",
        "totalProperty": "results"
        "successProperty": "success",
        "fields": [
            {"name": "name"},
            {"name": "job", "mapping": "occupation"}
        ],
        // 被store用来设置它的sortInfo
        "sortInfo":{
           "field": "name",
           "direction": "ASC"
        },
        // 分页数据 (如果可用)
        "start": 0,
        "limit": 2,
        // 自定义属性
        "foo": "bar"
    },
    // Reader'中配置的successProperty

    "success": true,
    // Reader'中配置的 totalProperty

    "results": 2000,
    // Reader'中配置的root

    // (此数据模拟2条记录每页)
    "rows": [ // *注意:这必须是一个数组
        { "id": 1, "name": "Bill", "occupation": "Gardener" },
        { "id": 2, "name":  "Ben", "occupation": "Horticulturalist" }
    ]
}

JSON数据对象中的 metaData 属性必须包含:

  • 该类的任何配置项
  • 一个 fields 参数，JsonReader将会使用它作为一个参数传递给 数据Record的create方法 ，以便配置它将创建的Record的格式。
  • 一个 sortInfo 参数，JsonReader将会使用它来设置 Ext.data.Store的 sortInfo 属性。
  • 任何所需要的定义参数

配置项

Config Options |  | Defined By
 | fields : Array/Object 要么是一个Field 对象定义数组(将会被传递给 Ext.data.Record.create)， 或者是一个使用... 要么是一个Field 对象定义数组(将会被传递给 Ext.data.Record.create)， 或者是一个使用 Ext.data.Record.create 创建的 Record 构造函数。 | DataReader
 | idProperty : String [id]一个数据对象的参数名，它包含了一条记录的标识符。 默认为 id | JsonReader
 | messageProperty : String [undefined] 服务端响应中一个可选的参数名，描述了一个用户反馈的消息。 | DataReader
 | root : String [undefined] 必须。 包含了原始数据对象数组的参数名称。默认为 undefined。 如果root参数... [undefined] 必须。 包含了原始数据对象数组的参数名称。默认为 undefined。 如果root参数为undefined，将会抛出一个异常。 需要清除数据或者不展示任何数据时， 此参数的数据值必须是一个空数组。 | JsonReader
 | successProperty : String [success]属性名，通过它获取请求成功参数。 默认为success。 附加信息参见 Ext.data.DataProxy. exception [success]属性名，通过它获取请求成功参数。 默认为success。 附加信息参见 Ext.data.DataProxy. exception | JsonReader
 | totalProperty : String [total]参数名，通过它可以获得数据集记录总数。 只有在数据集不是一次被加载... [total]参数名，通过它可以获得数据集记录总数。 只有在数据集不是一次被加载，而是在远程服务器分页 时此参数才是必须的。默认为 total。 | JsonReader

公共属性

Property |  | Defined By
 | buildExtractors : Object 抽象防范，将会在DataReader的继承类例如 Ext.data.JsonReader 和 Ext.data.XmlReader中被覆盖。 | DataReader
 | extractValues : Object 抽象方法，在DataReader的实现类，例如 Ext.data.JsonReader 和 Ext.data.XmlReader 中被覆盖 | DataReader
 | getId : Object 在继承的buildExtractors实现中创建的抽象方法。 | DataReader
 | getMessage : Object 在buildExtractors实现中创建的抽象方法。 | DataReader
 | getRoot : Object 在buildExtractors实现中创建的抽象方法。 | DataReader
 | getSuccess : Object 抽象方法，在子类的buildExtractors中实现。 | DataReader
 | getTotal : Object 在buildExtractors实现中创建的抽象方法。 | DataReader
 | jsonData : Object 在任何数据加载之后，原始的JSON数据可以在客户端进一步处理。... 在任何数据加载之后，原始的JSON数据可以在客户端进一步处理。 如果没有数据被加载或者出现了一个加载异常，此参数将会为undefined。 | JsonReader
 | meta : Mixed 当前JsonReader的元数据，被传递给构造函数， 或者在最后一个数据包的 metaData 参数中传递。 | JsonReader

公共方法

Method Defined By
JsonReader ( Object meta , Array/Object recordType )
创建一个新的JsonReader
创建一个新的JsonReader
参数:
  • meta : Object
    元数据配置项。
  • recordType : Array/Object

    要么是一个 Field 定义对象数组( 将会被传递给 Ext.data.Record.create 方法 )，或者是一个 从 Ext.data.Record.create 方法创建的 Record 构造器。

返回值:
  • void
JsonReader
isData ( Object data ) : Boolean
如果提供的数据hash看起来 并且叫起来 像数据，此值为ture...
如果提供的数据hash看起来 并且叫起来 像数据，此值为ture。(译者注：有一句E文成语说"If it looks like a duck and it quacks like a duck,it is a duck."意思是说，如果一个东西看起来像一只鸭子 并且叫起来也像一只鸭子，那么它就是一只鸭子。这里的意思是说，如果提供的hash对象 就像数据。) 在你的DataReader配置项中检查，是否有一个对应到的idProperty的key 包含非空主键。
参数:
  • data : Object
返回值:
  • Boolean
DataReader
read ( Object response ) : Object
此方法只被DataProxy调用，它拥有从远程服务器获取的数据。
此方法只被DataProxy调用，它拥有从远程服务器获取的数据。
参数:
  • response : Object
    XHR对象，在它的responseText参数中包含JSON数据。
返回值:
  • Object
    data 一个被Ext.data.Store对象使用的数据块，被缓存为 Ext.data.Record。
JsonReader
readRecords ( Object o ) : Object
从一个JSON对象创建一个包含Ext.data.Record的数据块。
从一个JSON对象创建一个包含Ext.data.Record的数据块。
参数:
  • o : Object
    一个对象，它包含一个原始对象数组，在配置项中指定为'root'； 一个可选参数，在配置项中指定为'totalProperty'，它包含了 数据集的记录总数。
返回值:
  • Object
    data 一个数据块，被Ext.data.Store对象用作Ext.data.Record 缓存。
JsonReader
readResponse ( String action , Object response ) : Response
解析来自服务器的JSON响应。
解析来自服务器的JSON响应。
参数:
  • action : String
    [Ext.data.Api.actions.create|read|update|destroy]
  • response : Object
    通过对服务器的一次Ajax请求返回的XHR对象。
返回值:
  • Response
    一个包含数据响应的{@link Ext.data.Response Response}对象， 以及状态信息。
JsonReader
realize ( Record/Record[] record , Object/Object[] data ) : void
被用作在成功插入数据库之后将一条数据变成“非模拟的”。 连同来自服务端的新数据一起，设置记录的主键...
被用作在成功插入数据库之后将一条数据变成“非模拟的”。 连同来自服务端的新数据一起，设置记录的主键。 你必须至少返回数据库主键，使用你的DataReader中 配置的idProperty属性。 来自服务端的数据将会与本地的记录进行合并。 另外， 你返回的记录数据必须与来自服务器的数据顺序一致。 最好进行一次commit操作，消除“脏字段”的标记。 Store的"update"事件将会被禁止。
参数:
  • record : Record/Record[]
    需要变成实现的模拟数据。
  • data : Object/Object[]
    需要应用的新record数据。 必须包含来自数据库的主键，它是在idProperty字段中定义的。
返回值:
  • void
DataReader
update ( Record/Record[] rs , Object/Object[] data ) : void
在远端保存之后，使用来自服务器的新数据更新一条“非模拟”或者说“真实”记录的数据。...
在远端保存之后，使用来自服务器的新数据更新一条“非模拟”或者说“真实”记录的数据。 如果在一次“批量更新”之后返回多条记录， 你从服务器返回的记录数据必须与已经接受到的数据顺序一致。 最好进行一次commit操作，消除“脏字段”的标记。 Store的"update"事件将会被禁止，因为记录接收到了新的数据hash。
参数:
  • rs : Record/Record[]
  • data : Object/Object[]
返回值:
  • void
DataReader

公共事件

该类没有公共事件。


Observable
    Store
      JsonStore

Class Ext.data.JsonStore

包: | Ext.data
定义类的文件: | JsonStore.js
类: | JsonStore
继承自: | Store

一个小工具类，为了更方便地 从JSON数据创建Ext.data.Stores 。 JsonStore将会自动配置使用 Ext.data.JsonReader。

一个store配置项看起来如下:

var store = new Ext.data.JsonStore({
    // store configs
    autoDestroy: true,
    url: 'get-images.php',
    storeId: 'myStore',
    // reader configs
    root: 'images',
    idProperty: 'name',
    fields: ['name', 'url', {name:'size', type: 'float'}, {name:'lastmod', type:'date'}]
});

此store被配置用来解析如下的格式的对象:

{
    images: [
        {name: 'Image one', url:'/GetImage.php?id=1', size:46.5, lastmod: new Date(2007, 10, 29)},
        {name: 'Image Two', url:'/GetImage.php?id=2', size:43.2, lastmod: new Date(2007, 10, 30)}
    ]
}
一个符合此格式的字符串也可以用作 data 配置项。

*注意: 尽管没有在此处列出，该类也可以接受所有 JsonReader 的配置选项。

配置项

Config Options Defined By
autoDestroy : Boolean
如果此参数为true，当绑定此store的组件被销毁之后此store也会...
如果此参数为true，当绑定此store的组件被销毁之后此store也会被销毁 (默认为 false)。

注意: 当store被仅仅绑定到一个组件时，应该把此参数设置成true。

Store
autoLoad : Boolean/Object
如果没有指定 data 参数，并且 autoLoad参数为 true或者为一个Object， store的...
如果没有指定 data 参数，并且 autoLoad参数为 true或者是一个对象(Object)， store的 load 方法将会在创建之后自动被调用。 如果autoLoad的值是一个对象(Object)， 此对象将会被传递给store的 load 方法。
Store
autoSave : Boolean
默认为true 将导致在一条记录被修改(例如: 变脏('dirty'))之后store自动地把记录...

默认为true 将导致在一条记录被修改(例如: 变脏('dirty'))之后store自动地把记录 save 到服务器端。 指定为false可以手动把所有修改的记录 save 到服务端。

注意: CRUD操作将会作为单独的请求发送。

Store
baseParams : Object
此参数的描述参见 corresponding 配置项 。 如需修改此参数，参见 setBaseParam 。
此参数的描述参见 corresponding 配置项 。 如需修改此参数，参见 setBaseParam 。
Store
batch : Boolean
默认为 true (除非 restful:true )。 每个CRUD操作的多次请求 (CREATE, READ, UPDATE...

默认为 true (除非 restful:true )。 每个CRUD操作的多次请求 (CREATE, READ, UPDATE 和 DESTROY)将会被合在一起并且作为一次事务发送出去。 只有在 autoSave 参数被设置成 false时应用。

如果Store是安静模式(RESTful)，DataProxy也是安静的(RESTful)， 这样会为每条记录创建一个独立的事务。

Store
data : Array
一个内嵌的数据对象，可以被 reader 读取。 典型情况下，指定此选项，或者 url 选项。
Store
defaultParamNames : Object
为 paramNames 提供默认值。 如需在全局范围修改所有store的参数...
为 paramNames 提供默认值。 如需在全局范围修改所有store的参数，必须在store的prototype上 修改此对象。
Store
listeners : Object
一个包含一个或多个事件处理器的配置对象，会在初始化的时候被添加到目标对象上...

一个包含一个或多个事件处理器的配置对象，会在初始化的时候被添加到目标对象上。 该配置对象应该是一个有效的监听器配置对象就像 addListener例子中指定的一样可一次附加多个处理器。

ExtJs Components上的DOM事件

一些 ExtJs Component 类导出时会选择一些DOM事件(例如 "click", "mouseover" 等等), 这通常只是在有额外的值可以被添加时发生。例如DataView类的 click事件会传递被点击的节点。也可以直接在Component的HTMLElementevent上访问DOM事件，但必需在Component被渲染后监听器才能添加到Element 上。可以按照以下步骤添加插件:

// 插件会用一个监听器配置对象进行配置。
//该组件会被添加到所有处理方法的参数列表上。
Ext.DomObserver = Ext.extend(Object, {
    constructor: function(config) {
        this.listeners = config.listeners ? config.listeners : config;
    },

    // 组件将自己传递进了插件的初始化方法里
    init: function(c) {
        var p, l = this.listeners;
        for (p in l) {
            if (Ext.isFunction(l[p])) {
                l[p] = this.createHandler(l[p], c);
            } else {
                l[p].fn = this.createHandler(l[p].fn, c);
            }
        }

        // 渲染后立即添加监听器到元素上
        c.render = c.render.createSequence(function() {
            var e = c.getEl();
            if (e) {
                e.on(l);
            }
        });
    },

    createHandler: function(fn, c) {
        return function(e) {
            fn.call(this, e, c);
        };
    }
});

var combo = new Ext.form.ComboBox({

    // 元素被点击后折叠
    plugins: [ new Ext.DomObserver({
        click: function(evt, comp) {
            comp.collapse();
        }
    })],
    store: myStore,
    typeAhead: true,
    mode: 'local',
    triggerAction: 'all'
});

Observable
paramNames : Object
一个包含多个属性的对象，指定了分页和排序参数的名称，在加载数据时被传递给...

一个包含多个属性的对象，指定了分页和排序参数的名称，在加载数据时被传递给 远程服务器。 默认情况下，此对象拥有如下格式:

{
    start : 'start',  // 指定起始行的参数名
    limit : 'limit',  // 指定返回数据条数的参数名
    sort : 'sort',    // 指定排序字段的参数名
    dir : 'dir'       // 指定排序方向的参数名
}

服务器必须根据收到的这些参数名创建所请求的数据块。 如果需要不同的参数名称，可以使用配置项覆盖这些参数。

绑定到当前Store的 PagingToolbar ，使用此参数指定 它的requests 中的参数名称。

Store
proxy : Ext.data.DataProxy
DataProxy 对象，它提供对数据对象的访问。 参见 url 。
Store
pruneModifiedRecords : Boolean
此值为true将在 store被加载或者一条记录被删除时 清除所有记录的修改信息(默认为...
此值为true将在 store被加载或者一条记录被删除时 清除所有记录的修改信息(默认为 false)。参见 getModifiedRecords 的访问函数(指getter/setter)以获得修改的记录。
Store
remoteSort : boolean
如果此参数为true，处理排序操作的方式是，通过请求 Proxy 提供一个数据已经排好顺序的版本...
如果此参数为true，处理排序操作的方式是，通过请求 Proxy 提供一个数据已经排好顺序的版本， 而不是在缓存中对记录进行排序(默认为 false)。

如果remoteSort 为 true 那么在一个Grid Column的 header 被点击时，将会从服务器请求当前页面，并且在 params 中添加如下两个参数:

  • sort : String

    需要排序的字段名 (就像在Record的 Field definition中指定的那样)。

  • dir : String

    排列的方向，'ASC' 或者 'DESC' (大小写敏感)。

Store
restful : Boolean
默认为false。 设置为true 将会使Store和Proxy的操作以安静(RESTful)的状态进行...
默认为false。 设置为true 将会使Store和Proxy的操作以安静(RESTful)的状态进行。 store将会自动生成到服务器的GET, POST, PUT 和 DELETE 请求。 任何给定CRUD操作的HTTP方式(method)都在 Ext.data.Api.restActions 有描述。 附加信息参见 Ext.data.DataProxy.restful。

注意: 如果 restful:true 将会隐含设置为 批处理(batch) 。默认为 false。

Store
sortInfo : Object
一个配置对象，指定Store请求数据时load 操作的排序规则。 注意，对于本地排序...
一个配置对象，指定Store请求数据时load 操作的排序规则。 注意，对于本地排序，direction参数是大小写敏感的。 另请参见 remoteSort 和 paramNames。 例如:
sortInfo: {
    field: 'fieldName',
    direction: 'ASC' // or 'DESC' (case sensitive for local sorting)
}
Store
storeId : String
如果传递此参数，此id将会使用StoreMgr 进行注册。...
如果传递此参数，此id将会使用StoreMgr 进行注册。

注意: 如果指定了一个 id (不建议) 它将会取代分配的storeId。

Store
url : String
如果没有指定 proxy ，此url将会被用来隐含配置一个...
如果没有指定 proxy ，此url将会被用来隐含配置一个 HttpProxy 。 典型情况下要么指定此选项，要么指定 data 选项。
Store
writer : Ext.data.DataWriter
Writer 对象负责处理record对象，它们将会被写入服务端数据库。...

Writer 对象负责处理record对象，它们将会被写入服务端数据库。

如果writer被配置到Store中， store的 add, remove,和 update 事件将会被监听，以便在远端 创建记录, 销毁记录, 或者 更新记录。

store的proxy将会把所有 writexception 事件转播给当前store

示例实现:

var writer = new Ext.data.JsonWriter({
    encode: true,
    writeAllFields: true // 写入所有字段，而不仅仅是那些发生变化的字段
});

// 典型的Store，包含了Proxy,Reader和Writer
var store = new Ext.data.Store({
    storeId: 'user',
    root: 'records',
    proxy: proxy,
    reader: reader,
    writer: writer,     // <--在store中插入一个DataWriter就像你插入一个Reader
    paramsAsHash: true,
    autoSave: false    // <-- false讲延迟执行create, update, destroy请求
                       //直到被特别指定如此做。
});

Store

公共属性

Property Defined By
baseParams : Object
此参数的描述参见 corresponding 配置项 。 如需修改此参数，参见 setBaseParam 。
此参数的描述参见 corresponding 配置项 。 如需修改此参数，参见 setBaseParam 。
Store
fields : Ext.util.MixedCollection
一个MixedCollection，包含了Store中 Records 的字段(Fields)定义。
Store
hasMultiSort : Boolean 如果store当前使用多个field/direction联合排序，此值为true。
Store
isDestroyed : Boolean 如果store已经被销毁，此值为true。只读。
Store
lastOptions : Object
包含 load 方法最近一次使用的配置参数对象。 此参数所包含的内容详情...
包含 load 方法最近一次使用的配置参数对象。 此参数所包含的内容详情，参见 load 方法。对访问加载当前Record缓存时所使用的所有参数来说，此属性非常有用。
Store
multiSortInfo : Object 包含所有排序方向，以及在对多个字段进行排序时使用的排序配置的对象。
Store
recordType : Function
为 Reader 提供的(或者创建的) Record 构造函数。只读。...
为 Reader 提供的(或者创建的) Record 构造函数。只读。

如果Reader是通过传递一个 Ext.data.Field 定义对象数组来构造的， 他将隐含地从这个数组 创建一个Record的构造器。 (附加信息参见 Ext.data.Record. create)。

此参数可被用来在Store中创建指定类型的Record，例如:

// 创建数据缓存(data store)
    var store = new Ext.data.ArrayStore({
        autoDestroy: true,
        fields: [
           {name: 'company'},
           {name: 'price', type: 'float'},
           {name: 'change', type: 'float'},
           {name: 'pctChange', type: 'float'},
           {name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
        ]
    });
    store.loadData(myData);

    // 创建Grid
    var grid = new Ext.grid.EditorGridPanel({
        store: store,
        colModel: new Ext.grid.ColumnModel({
            columns: [
                {id:'company', header: 'Company', width: 160, dataIndex: 'company'},
                {header: 'Price', renderer: 'usMoney', dataIndex: 'price'},
                {header: 'Change', renderer: change, dataIndex: 'change'},
                {header: '% Change', renderer: pctChange, dataIndex: 'pctChange'},
                {header: 'Last Updated', width: 85,
                    renderer: Ext.util.Format.dateRenderer('m/d/Y'),
                    dataIndex: 'lastChange'}
            ],
            defaults: {
                sortable: true,
                width: 75
            }
        }),
        autoExpandColumn: 'company', // 与column model中指定的id对应
        height:350,
        width:600,
        title:'Array Grid',
        tbar: [{
            text: 'Add Record',
            handler : function(){
                var defaultData = {
                    change: 0,
                    company: 'New Company',
                    lastChange: (new Date()).clearTime(),
                    pctChange: 0,
                    price: 10
                };
                var recId = 3; // 提供唯一的id
                var p = new store.recordType(defaultData, recId); // 创建新记录
                grid.stopEditing();
                store.insert(0, p); // 向store中插入一条新记录(另请参见add)
                grid.startEditing(0, 0);
            }
        }]
    });
Store

公共方法

Method Defined By
JsonStore ( Object config )
参数:
  • config : Object
返回值:
  • void
JsonStore
add ( Ext.data.Record[] records ) : void
向Store中添加记录 并触发 add 事件。 如需通过一个远程数据源向Store中添加记录，请使用...
向Store中添加记录 并触发 add 事件。 如需通过一个远程数据源向Store中添加记录，请使用 load({add:true}) 。 另请参见 recordType 和 insert 。
参数:
  • records : Ext.data.Record[]
    需要添加到缓存中的一个 Ext.data.Record对象数组。 参见 recordType。
返回值:
  • void
Store
addEvents( Object|String o, string Optional. ) : void
添加指定的事件到事件列表上，事件会被该Observable触发。
添加指定的事件到事件列表上，事件会被该Observable触发。
参数:
  • o : Object|String
    以事件名作为属性true作为值的对象 或者当多个事件名被分开的传递时则为第一个事件名。
  • Optional. : string
    事件名被分开的传递时则为事件名。 用法:
    this.addEvents('storeloaded', 'storecleared');
返回值:
  • void
Observable
addListener( String eventName, Function handler, [Object scope], [Object options] ) : void
给对象添加事件处理器。
给对象添加事件处理器。
参数:
  • eventName : String
    监听的事件名。
  • handler : Function
    事件调用的方法
  • scope : Object
    （可选）处理方法执行的作用域 (this的引用 reference)。 如果被忽略。默认为触发事件的对象。
  • options : Object
    （可选）包含处理器配置和属性的对象。 可能包含以下的属性:
    • scope : Object
      处理方法执行的作用域(this的引用) 。 如果被忽略。默认为触发事件的对象。
    • delay : Number
      在触发事件后延迟调用处理器的毫秒数。
    • single : Boolean
      如果为True则添加一个处理器来处理下一次的事件触发（仅一次），然后移除自己。
    • buffer : Number
      使得处理器延迟指定毫秒数后预定的运行在 一个Ext.util.DelayedTask中 。 如果事件在时间内再一次被触发，原始的处理器不会被调用，但是新的处理器会预定的在他的位置上。
    • target : Observable
      如果事件在目标的Observable上触发则仅仅调用处理器， 否则 事件会从子类的Observable上冒泡

    组合选项
    使用这些选项参数,可能会组合出不同类型的监听器：

    一个延迟的，一次性的监听器。

    myDataView.on('click', this.onClick, this, {
single: true,
delay: 100
});

    一次调用附加多个处理器
    该方法同样支持传递一个包含指定的多个处理器的属性的配置对象参数。

    myGridPanel.on({
'click' : {
    fn: this.onClick,
    scope: this,
    delay: 100
},
'mouseover' : {
    fn: this.onMouseOver,
    scope: this
},
'mouseout' : {
    fn: this.onMouseOut,
    scope: this
}
});

    或者一个简写的语法：

    myGridPanel.on({
'click' : this.onClick,
'mouseover' : this.onMouseOver,
'mouseout' : this.onMouseOut,
 scope: this
});
返回值:
  • void
Observable
addSorted ( Ext.data.Record record ) : void
(只支持本地排序) 将传递的Record插入到Store中的指定位置， 它基于当前的排序信息。
(只支持本地排序) 将传递的Record插入到Store中的指定位置， 它基于当前的排序信息。
参数:
  • record : Ext.data.Record
返回值:
  • void
Store
clearFilter ( Boolean suppressEvent ) : void
返回没有使用过滤器时缓存记录的视图。
返回没有使用过滤器时缓存记录的视图。
参数:
  • suppressEvent : Boolean
    如果此参数为 true 将会安静地清除过滤器而不触发 datachanged 事件。
返回值:
  • void
Store
collect ( String dataIndex , [ Boolean allowNull ], [ Boolean bypassFilter ] ) : Array
从当前store特定的dataIndex收集唯一的值。
从当前store特定的dataIndex收集唯一的值。
参数:
  • dataIndex : String
    需要收集的属性
  • allowNull : Boolean
    (可选) 传递true将允许null,undefined或者空字符串值
  • bypassFilter : Boolean
    (可选) 传递true从所有记录中进行收集，包含那些被过滤掉的记录
返回值:
  • Array
    唯一值集合
Store
commitChanges () : void
提交所有 未提交变更的 Record。 如需处理变更，可以订阅...
提交所有 未提交变更的 Record。 如需处理变更，可以订阅 update事件， 并且当第三个参数是Ext.data.Record.COMMIT时执行更新。
参数:
  • 无。
返回值:
  • void
Store
createMultipleFilterFn ( Array filters ) : Function
给定一个过滤函数数组(每个都有一个可配置的作用域)...
给定一个过滤函数数组(每个都有一个可配置的作用域)， 构造并返回一个单独的函数，它可以返回所有过滤器ANDed(逻辑“与”)在一起之后 返回的结果
参数:
  • filters : Array
    过滤对象数组 (每个对象都应该包含一个'fn'属性和可选的作用域)
返回值:
  • Function
    多重过滤函数
Store
createSortFunction ( String field , String direction ) : Function
创建并返回一个函数，它根据所给的字段和方向对一个数组进行排序。
创建并返回一个函数，它根据所给的字段和方向对一个数组进行排序。
参数:
  • field : String
    需要创建排序器的字段
  • direction : String
    排序的方向(默认为"ASC")
返回值:
  • Function
    一个根据所给的field/direction组合进行排序的函数
Store
destroy () : void
销毁store
销毁store
参数:
  • 无。
返回值:
  • void
Store
each ( Function fn , [ Object scope ] ) : void
在缓存中的每条Record 上调用指定的函数。
在缓存中的每条Record 上调用指定的函数。
参数:
  • fn : Function
    需要调用的函数。 Record 将会作为第一个参数被传递。 返回false取消并退出迭代过程。
  • scope : Object
    (可选) 作用域( this 引用) 函数将会在其中被执行。 默认为迭代过程中的当前 Record。
返回值:
  • void
Store
enableBubble( String/Array events ) :void
是否现在使得事件会被该Observable触发并调用 this.getBubbleTarget()方法在拥有者的继承树...

是否现在使得事件会被该Observable触发并调用 this.getBubbleTarget()方法在拥有者的继承树中冒泡。Observable的基础类中没有该方法的实现。

该方法一般被Ext.Components用来冒泡事件到拥有者的容器。参看Ext.Component.getBubbleTarget默认的实现 在Ext.Component中返回组件的直接拥有者。但是如果需要的是一个已知的目标，该方法可以被重写来更快的访问需求的目标。

例子:

Ext.override(Ext.form.Field, {
    // 添加方法到Field的initComponent上改变事件为冒泡
    initComponent : Ext.form.Field.prototype.initComponent.createSequence(function() {
        this.enableBubble('change');
    }),

    // 我们知道我们想让Field的事件冒泡到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() {
            // 如果样式被修改标题会变红。
            myForm.header.setStyle('color', 'red');
        }
    }
});
参数:
  • events : String/Array
    冒泡的事件名，或事件名数组
返回值:
  • void
Observable
filter ( String|Array field , String/RegExp value , [ Boolean anyMatch ], [ Boolean caseSensitive ], Boolean exactMatch ) : void
根据指定的参数过滤 records。 可以选择传递一个过滤选项数组，根据多个参数过滤。...
根据指定的参数过滤 records。 可以选择传递一个过滤选项数组，根据多个参数过滤。 单个过滤器示例: store.filter('name', 'Ed', true, true); //查找所有包含'Ed'子串的记录 多过滤器示例: store.filter([ { property : 'name', value : 'Ed', anyMatch : true, //可选，默认为true caseSensitive: true //可选，默认为true }, //也可以传递过滤函数 { fn : function(record) { return record.get('age') == 24 }, scope: this } ]);
参数:
  • field : String|Array
    你的数据记录的一个属性，或者一个包含多个过滤条件的数组
  • value : String/RegExp
    要么是一个属性名的起始字符串，要么是一个需要在属性上进行测试的 正则表达式。
  • anyMatch : Boolean
    (可选) true时将全字匹配，而不仅仅是匹配起始字符串
  • caseSensitive : Boolean
    (可选) true比较时将会对大小写敏感
  • exactMatch : Boolean
    true将会强制精确匹配(在正则中添加^和$字符)。 默认为fales。 如果anyMatch参数为true，忽略此配置。
返回值:
  • void
Store
filterBy ( Function fn , [ Object scope ] ) : void
通过一个函数进行过滤。 指定的函数将会在Store中的每一条记录上依次调用。...
通过一个函数进行过滤。 指定的函数将会在Store中的每一条记录上依次调用。 如果此函数返回true那么这条记录就会被 包含在结果集中，否则它将被过滤掉。
参数:
  • fn : Function
    需要调用的函数。 它将被传递如下参数：
    • record : Ext.data.Record

      需要进行过滤测试的 record， 使用 Ext.data.Record.get 方法访问记录中的字段。

    • id : Object

      所传递的Record的ID

  • scope : Object
    (可选)作用域( this 引用) 函数将会在其中被执行。 默认为当前Store。
返回值:
  • void
Store
find ( String fieldName , String/RegExp value , [ Number startIndex ], [ Boolean anyMatch ], [ Boolean caseSensitive ] ) : Number
根据指定字段的值查找store中第一个符合条件记录的索引。
根据指定字段的值查找store中第一个符合条件记录的索引。
参数:
  • fieldName : String
    记录中需要测试的字段名。
  • value : String/RegExp
    要么是一个字符串，字段值需要以此字符串开头；或者是一个 需要对字段进行测试的正则表达式。
  • startIndex : Number
    (可选)开始查找的起始位置
  • anyMatch : Boolean
    (可选) 此参数为true将进行全字匹配，而不仅仅是起始部分
  • caseSensitive : Boolean
    (可选) 此参数为true在比较时将对大小写敏感
返回值:
  • Number
    符合条件的索引，或者-1
Store
findBy ( Function fn , [ Object scope ], [ Number startIndex ] ) : Number
使用一个函数，在Store中查找出第一个符合条件记录的位置索引。...
使用一个函数，在Store中查找出第一个符合条件记录的位置索引。 如果此函数返回true则此记录被视为符合条件。
参数:
  • fn : Function
    需要调用的函数。 它将会被传入如下参数:
    • record : Ext.data.Record

      需要进行过滤测试的 record。 使用Ext.data.Record.get 方法访问字段值。

    • id : Object

      所传递Record的ID

  • scope : Object
    (可选)作用域( this 引用) 函数将会在其中被执行。 默认为当前Store。
  • startIndex : Number
    (可选) 开始查找的起始位置索引
返回值:
  • Number
    匹配的索引或者-1
Store
findExact ( String fieldName , Mixed value , [ Number startIndex ] ) : Number
根据指定的字段值，在store中查找符合条件的第一条记录的位置。
根据指定的字段值，在store中查找符合条件的第一条记录的位置。
参数:
  • fieldName : String
    需要进行测试的记录的字段名。
  • value : Mixed
    需要与字段进行匹配的值。
  • startIndex : Number
    (可选) 查询的起始位置
返回值:
  • Number
    匹配的索引或者-1
Store
fireEvent( String eventName, Object... args ) : Boolean
用传入的参数触发指定的事件 (减去事件名)。 一个事件可以被设置为冒泡 Obse...

用传入的参数触发指定的事件 (减去事件名)。

一个事件可以被设置为冒泡到Observable父类继承树(参看 Ext.Component.getBubbleTarget) 调用enableBubble实现。

参数:
  • eventName : String
    触发的事件名。
  • args : Object...
    传递给处理器的可变长度参数。
返回值:
  • Boolean
    如果有任何的处理器返回false则返回false，否则返回true。
Observable
getAt ( Number index ) : Ext.data.Record
获取指定位置的记录。
获取指定位置的记录。
参数:
  • index : Number
    需要查找的记录的索引位置。
返回值:
  • Ext.data.Record
    所传递的索引位置的Record。 如果没有找到，返回undefined
Store
getById ( String id ) : Ext.data.Record
获取拥有指定id的记录。
获取拥有指定id的记录。
参数:
  • id : String
    需要查找记录的id
返回值:
  • Ext.data.Record
    拥有所给id的Record。如果没有找到返回undefined
Store
getCount () : Number
获取缓存记录的条数。如果使用分页，此值可能不是数据集的总数。...
获取缓存记录的条数。

如果使用分页，此值可能不是数据集的总数。 如果Reader使用的数据对象包含数据集总数， 那么 getTotalCount 函数将会返回数据集的总条数。 注意: 参见load 配置项的重要注释。

参数:
  • 无。
返回值:
  • Number
    Store缓存中Record的条数
Store
getModifiedRecords () : Ext.data.Record[]
获取自从最后一次提交以来被修改过的 records。、 修改过的记录将通过load操作(例如分页时)被持久化。...
获取自从最后一次提交以来被修改过的 records。、 修改过的记录将通过load操作(例如分页时)被持久化。 注意:不包括被删除的记录。 另请参见 pruneModifiedRecords 和 Ext.data.Record markDirty。.
参数:
  • 无。
返回值:
  • Ext.data.Record[]
    一个{@link Ext.data.Record Records} 数组，包含了未提交的变更。 如需获得记录中被修改的字段，参见 {@link Ext.data.Record}<tt>{@link Ext.data.Record#modified modified}.</tt> 。
Store
getRange ( [ Number startIndex ], [ Number endIndex ] ) : Ext.data.Record[]
返回位于指定区间范围中的记录。
返回位于指定区间范围中的记录。
参数:
  • startIndex : Number
    (可选) 其实索引位置(默认为0)
  • endIndex : Number
    (可选) 结束索引位置(默认为Store中的最后一条记录)
返回值:
  • Ext.data.Record[]
    Record数组
Store
getSortState () : Object
返回一个对象，描述当前Store的排序状态。
返回一个对象，描述当前Store的排序状态。
参数:
  • 无。
返回值:
  • Object
    Store的排序状态。 一个拥有两个属性的对象:<ul> <li><b>field : String<p class="sub-desc"> Record排序所依据的字段名。 </p></li> <li><b>direction : String<p class="sub-desc">排序的方向，'ASC' 或 'DESC' (case-sensitive).</p></li> </ul> 更多细节参见 <tt>{@link #sortInfo}</tt> 。
Store
getTotalCount () : Number
获取服务器返回的数据库记录总数。如果使用分页，为了让此值准确...
获取服务器返回的数据库记录总数。

如果使用分页，为了让此值准确， Reader 使用的数据对象必须包含数据集的数量。 对于远程数据源， 此参数 ( JsonReader的 totalProperty， XmlReader的 totalRecords ) 的值必须通过服务端的一次查询来返回。 注意: 参见 load 方法的重要注释。

参数:
  • 无。
返回值:
  • Number
    Record的数量在数据对象中被指定，通过Proxy传递给Reader。

    注意: 如果在本地改变Store的内容，此值不会被更新。

Store
hasListener( String eventName ) : Boolean
检测对象是否包含指定事件的任何监听器
检测对象是否包含指定事件的任何监听器
参数:
  • eventName : String
    检测的事件名
返回值:
  • Boolean
    如果事件被监听则为true，否则为false
Observable
indexOf ( Ext.data.Record record ) : Number
获取所传递的Record在缓存中的位置索引。
获取所传递的Record在缓存中的位置索引。
参数:
  • record : Ext.data.Record
    需要查找的Ext.data.Record对象。
返回值:
  • Number
    所传递的Record的索引位置。如果没有找到返回-1
Store
indexOfId ( String id ) : Number
根据所传递的id获得缓存中记录的索引位置。
根据所传递的id获得缓存中记录的索引位置。
参数:
  • id : String
    需要查找的Record的id
返回值:
  • Number
    Record的索引位置。 如果没有找到，返回-1
Store
insert ( Number index , Ext.data.Record[] records ) : void
在所给的位置向Store中插入记录并触发 add 事件。 另请参见 add 和 addSorted 。
在所给的位置向Store中插入记录并触发 add 事件。 另请参见 add 和 addSorted 。
参数:
  • index : Number
    插入所给记录的起始位置。
  • records : Ext.data.Record[]
    一个Ext.data.Record对象数组，它将被插入到缓存中。
返回值:
  • void
Store
isFiltered () : Boolean
如果store当前被进行了过滤，返回true
如果store当前被进行了过滤，返回true
参数:
  • 无。
返回值:
  • Boolean
Store
load ( Object options ) : Boolean
使用所配置的 reader 从配置的 proxy 加载Record...

使用所配置的 reader 从配置的 proxy 加载Record

注意:

  • 重要 : 加载操作是异步的！ 在新的数据被加载完成之前，函数的调用已经返回。 如需对调用load方法产生的信息进行任何后续处理， 指定一个回调函数，或者使用一个 'load'事件处理函数。
  • 如果使用 远程排序 ，第一次调用必须在 options.params 中指定 start 和 limit 参数， 以便设定数据集的起始位置以及每次使用Proxy所缓存的Record条数。
  • 如果使用 远程排序 ， 根据指定的 paramNames 所配置的 sortInfo 将会自动被包含在请求参数中。
参数:
  • options : Object
    一个包含参数的对象，它控制加载选项:
    • params :Object

      一个包含了参数的对象，将作为HTTP参数被传递 给远程数据源。 注意: params 将会被任何具有同名 baseParams 的属性覆盖。

      这些参数将会被使用 Ext.urlEncode 编码成标准的HTTP参数。

    • callback : Function

      在Record加载之后被调用的函数。 回调函数在load事件被触发后调用， 并且将会被传递如下参数：

      • r : Ext.data.Record[] 所加载的Record数组。
      • options : 调用load方法时的配置对象。
      • success : 布尔值，加载是否成功标识位。

    • scope : Object

      调用回调函数时的作用域(默认为Store对象)

    • add : Boolean

      标志位，将把加载的记录添加到缓存，而不是替换 当前的缓存。 注意: 参见 loadData 的注释

返回值:
  • Boolean
    如果<i>开发者</i> 提供的 <tt>{@link #beforeload}</tt> 事件处理函数返回了 <tt>false</tt>， load调用将会被取消并且返回<tt>false</tt>; 否则返回<tt>true</tt>。
Store
loadData ( Object data , [ Boolean append ] ) : void
从一个传递的数据块中加载数据并 触发 load 事件。 必须在构造器中配置...
从一个传递的数据块中加载数据并 触发 load 事件。 必须在构造器中配置一个知道数据格式的 Reader 。
参数:
  • data : Object
    一个数据块，将会从其中读取Record。 期望的数据格式 依赖所配置的 Reader 并且应该与此Reader 的 Ext.data.Reader.readRecords 参数相对应。
  • append : Boolean
    (可选) 此参数wieldtrue 将会追加新的Record而不是默认替换现有的缓存。 注意: Store中的Record将会用它们的 id 作为key， 所以如果添加的Record的id在Store中已经存在将会替换 现有的Record。 只有有用新的唯一的id的Record会被添加。
返回值:
  • void
Store
multiSort ( Array sorters , String direction ) : void
根据多个field/direction排序规则对当前store的内容进行排序。 此方法在...
根据多个field/direction排序规则对当前store的内容进行排序。 此方法在 sort 内部被调用并且一般不需要手工调用。 多条件联合排序目前只能应用到本地数据集- 如果使用remoteSort，多重排序的数据目前不会被发送给代理。
参数:
  • sorters : Array
    排序规则对象数组(字段和顺序)
  • direction : String
    排序结果的整体顺序(默认为 "ASC")
返回值:
  • void
Store
on( String eventName, Function handler, [Object scope], [Object options] ) : void
给对象添加事件处理器 (addListener的简写形式)
给对象添加事件处理器 (addListener的简写形式。)
参数:
  • eventName : String
    监听的事件类型
  • handler : Function
    事件调用的方法
  • scope : Object
    （可选）处理方法执行时的作用域 (this 的引用)。 如果被忽略。默认为触发事件的对象。
  • options : Object
    可选 包含处理器配置的对象。
返回值:
  • void
Observable
purgeListeners() : void
移除对象上所有的监听器
移除对象上所有的监听器
参数:
  • 无。
返回值:
  • void
Observable
query ( String field , String/RegExp value , [ Boolean anyMatch ], [ Boolean caseSensitive ] ) : MixedCollection
根据指定的属性查找记录。
根据指定的属性查找记录。
参数:
  • field : String
    你的记录中的一个字段
  • value : String/RegExp
    要么是一个字符串，字段以此字符串开始， 或者是一个需要对字段进行测试的正则表达式。
  • anyMatch : Boolean
    (可选)此参数为true将进行全字匹配，而不仅仅是匹配开始处
  • caseSensitive : Boolean
    (可选)此参数为true在比较时将会对大小写敏感
返回值:
  • MixedCollection
    返回一个匹配记录的Ext.util.MixedCollection
Store
queryBy ( Function fn , [ Object scope ] ) : MixedCollection
使用一个过滤函数在Store缓存的记录中进行查找。 指定的函数将会在Store中的每一条记录上依次调用。...
使用一个过滤函数在Store缓存的记录中进行查找。 指定的函数将会在Store中的每一条记录上依次调用。 如果此函数返回true那么这条记录就会被 包含在结果集中。
参数:
  • fn : Function
    需要调用的函数。 它将会被传递如下的参数：
    • record : Ext.data.Record

      需要进行过滤测试的 record 使用 Ext.data.Record.get 方法访问记录中的字段。

    • id : Object

      传递的Record的ID

  • scope : Object
    (可选) 作用域( this 引用)，函数将在其中被执行。 默认为当前Store。
返回值:
  • MixedCollection
    返回一个Ext.util.MixedCollection 包含符合条件记录
Store
rejectChanges () : void
在所有 被修改的记录 上 回退 所有的变更。
在所有 被修改的记录 上 回退 所有的变更。
参数:
  • 无。
返回值:
  • void
Store
relayEvents( Object o, Array events ) : void
从指定的Observable上传递选择的事件就好像被当前对象触发一样。
从指定的Observable上传递选择的事件就好像被当前对象触发一样。
参数:
  • o : Object
    该Observable上的事件被当前对象传递。
  • events : Array
    传递的数组名。
返回值:
  • void
Observable
reload ( Object options ) : void
使用配置的 Reader 和上次执行加载操作的选项...

使用配置的 Reader 和上次执行加载操作的选项 从配置的Proxy重新加载数据缓存。

注意: 参见 load 中的重要注释。

参数:
  • options : Object

    (可选) 一个包含了 加载选项 的对象，它可能会覆盖最后一次 load 使用的options。 详情参见 load(默认为 null，在这种情况下将使用 lastOptions)。

    向现有参数中添加新参数:

    lastOptions = myStore.lastOptions;
Ext.apply(lastOptions.params, {
    myNewParam: true
});
myStore.reload(lastOptions);
返回值:
  • void
Store
remove ( Ext.data.Record/Ext.data.Record[] record ) : void
从Store中删除记录并触发 remove 事件。
从Store中删除记录并触发 remove 事件。
参数:
  • record : Ext.data.Record/Ext.data.Record[]
    需要从缓存中删除的记录或者记录数组。
返回值:
  • void
Store
removeAll ( Boolean silent ) : void
从Store中删除所有记录并触发 clear 事件。
从Store中删除所有记录并触发 clear 事件。
参数:
  • silent : Boolean
    [false] 默认为 false。设置为 true将不会触发clear事件。
返回值:
  • void
Store
removeAt ( Number index ) : void
删除Store中指定位置的一条记录。 触发 remove事件。
删除Store中指定位置的一条记录。 触发 remove事件。
参数:
  • index : Number
    需要删除记录的位置索引
返回值:
  • void
Store
removeListener( String eventName, Function handler, [Object scope] ) : void
删除一个事件处理器。
删除一个事件处理器。
参数:
  • eventName : String
    处理器关联的事件类型。
  • handler : Function
    移除的处理器。 这应该是传递到addListener里的方法的引用。
  • scope : Object
    （可选）处理器指定的初始作用域。
返回值:
  • void
Observable
resumeEvents() : void
重新开始触发事件。(参见suspendEvents) 如果事件以queueSuspended参数被挂起，则在事件被挂起时 ...
重新开始触发事件。(参见 suspendEvents) 如果事件以queueSuspended 参数被挂起，则在事件被挂起时触发的事件会被传递到所有的监听器上
参数:
  • 无。
返回值:
  • void
Observable
save () : Number
将所有挂起的更改保存到store。 如果没有配置对应的 Ext.data.Api.actions操作...
将所有挂起的更改保存到store。 如果没有配置对应的 Ext.data.Api.actions操作， 那么将使用配置的 url 。
change            url
---------------   --------------------
removed records   Ext.data.Api.actions.destroy
phantom records   Ext.data.Api.actions.create
modified records  Ext.data.Api.actions.update
参数:
  • 无。
返回值:
  • Number
    单独指定"batch"需要保存的记录条数。 如果没有项目需要保存，或者保存操作被取消，将会返回-1
Store
setBaseParam ( String name , Mixed value ) : void
为store的baseParams 中指定的参数名设置值。 用法:myStore.setBaseParam('foo', {bar:3});
为store的baseParams 中指定的参数名设置值。 用法:

myStore.setBaseParam('foo', {bar:3});
参数:
  • name : String
    需要指定值的参数名称
  • value : Mixed
    指定给命名属性的值
返回值:
  • void
Store
setDefaultSort ( String fieldName , [ String dir ] ) : void
设置下一次 load 操作所使用的默认排序列和顺序。
设置下一次 load 操作所使用的默认排序列和顺序。
参数:
  • fieldName : String
    需要排序的字段名。
  • dir : String
    (可选) 排序方向，'ASC' 或者 'DESC' (大小写敏感，默认为'ASC')
返回值:
  • void
Store
singleSort ( String fieldName , [ String dir ] ) : void
根据单个字段和方向对store的内容进行排序。 这将会在...
根据单个字段和方向对store的内容进行排序。 这将会在 sort 内部被调用，并且一般情况下不应该手工调用。
参数:
  • fieldName : String
    需要排序字段的名称。
  • dir : String
    (可选) 排序方向，'ASC' 或者 'DESC' (大小写敏感，默认为 'ASC')
返回值:
  • void
Store
sort ( String/Array fieldName , [ String dir ] ) : void
对记录进行排序。如果使用远程排序，将在服务端进行排序操作， 然后刷新缓存。...
对记录进行排序。如果使用远程排序，将在服务端进行排序操作， 然后刷新缓存。 如果使用本地排序，缓存将在内部排序。 另请参见 remoteSort 和 paramNames。 此函数接受两种调用参数-将字段名作为第一个参数传递进来， 或者将多条件联合排序的配置对象作为一个数组传递进来。 单条件排序示例：store.sort('name', 'ASC');多条件联合排序 示例store.sort([ { field : 'name', direction: 'ASC' }, { field : 'salary', direction: 'DESC' } ], 'ASC'); 在以上的第二种形式中，排序参数将会被依次应用， 后面的排序器将在前面排序器产生的结果上进行再次排序操作。 例如，依照上面的排序配置， 如果存在具有相同名字的两条记录，它们将会按照薪水进行排序。 排序配置可以添加任意多个。
参数:
  • fieldName : String/Array
    进行排序的字段名，或者一个整理好的排序配置数组
  • dir : String
    (可选) 排列顺序，'ASC' 或者 'DESC' (大小写敏感，默认为 'ASC')
返回值:
  • void
Store
sum ( String property , [ Number start ], [ Number end ] ) : Number
将位于start 和 end之间的每条 record 的property值加在一起然后返回结果。
将位于start 和 end之间的每条 record 的property值加在一起然后返回结果。
参数:
  • property : String
    每条记录中的一个字段
  • start : Number
    (可选) 起始记录位置(默认为 0)
  • end : Number
    (可选)要包含的 最后一条记录的位置(默认为 length-1)
返回值:
  • Number
    The sum
Store
suspendEvents( Boolean queueSuspended ) : void
暂停触发所有的事件。 (参看resumeEvents)
暂停触发所有的事件。（参看 resumeEvents)
参数:
  • queueSuspended : Boolean
    如果传递为true则排列好暂停的事件使得在调用 resumeEvents 后再触发它们，而不是抛弃所有暂停的事件。
返回值:
  • void
Observable
un( String eventName, Function handler, [Object scope] ) : void
删除一个事件处理器(removeListener方法的简写形式)
删除一个事件处理器(removeListener方法的简写形式。)
参数:
  • eventName : String
    处理器关联的事件类型
  • handler : Function
    被删除的处理器 这应该是传入 addListener 中的方法的引用。
  • scope : Object
    （可选）为处理器指定的初始作用域。
返回值:
  • void
Observable

公共事件

Event Defined By
add : ( Store this , Ext.data.Record[] records , Number index )
当Record被added 到Store中时触发
当Record被added 到Store中时触发
监听器将会以如下的参数格式触发:
  • this : Store
  • records : Ext.data.Record[]
    所添加的记录数组
  • index : Number
    record(s)被添加的索引位置
Store
beforeload : ( Store this , Object options )
在请求新的数据对象之前触发。 如果beforeload的监听器返回...
在请求新的数据对象之前触发。 如果beforeload的监听器返回 false那么 load 操作将会被取消。
Listeners will be called with the following arguments:
  • this : Store
  • options : Object
    指定的加载参数(详情参见 load)
Store
beforesave : ( Ext.data.Store store , Object data )
在调用保存操作之前触发。 保存包括销毁records，更新records和创建records。
在调用保存操作之前触发。 保存包括销毁records，更新records和创建records。
监听器将会以如下的参数格式被调用:
  • store : Ext.data.Store
  • data : Object
    一个包含需要保存的数据的对象。 此对象将会为每个操作包含一个key，对应每个操作的record数组。
Store
beforewrite : ( Ext.data.Store store , String action , Record/Record[] rs , Object options , Object arg )
监听器将会以如下的参数格式被调用:
  • store : Ext.data.Store
  • action : String
    [Ext.data.Api.actions.create|update|destroy]
  • rs : Record/Record[]
    被写入的Record(s)
  • options : Object
    指定的加载选项。 编辑 options.params 以向请求中添加HTTP参数。 (详情参见 save)
  • arg : Object
    传递给request 函数的 回调参数对象
Store
clear : ( Store this , Record[] The )
当数据缓存被清空时触发。
当数据缓存被清空时触发。
监听器将会以如下的参数格式被调用:
  • this : Store
  • The : Record[]
    被清楚的记录
Store
datachanged : ( Store this )
当数据缓存以批量的方式发生变化时触发(例如，它被排序、过滤等等)，并且 ...
当数据缓存以批量的方式发生变化时触发(例如，它被排序、过滤等等)，并且 使用此Store作记录缓存的组件都应该刷新其视图。
监听器将会以如下的参数格式被调用:
  • this : Store
Store
exception : ( misc misc )
在Proxy进行远程请求时如果内部发生异常，此事件被触发。 此事件与对应的...

在Proxy进行远程请求时如果内部发生异常，此事件被触发。 此事件与对应的 Ext.data.DataProxy有关。 附加信息参见 Ext.data.DataProxy. exception 。

监听器将会以如下的参数格式被调用:
  • misc : misc
    描述参见 Ext.data.DataProxy. exception 。
Store
load : ( Store this , Ext.data.Record[] records , Object options )
在新的数据集被加载之后触发。
在新的数据集被加载之后触发。
监听器将会以如下的参数格式被调用:
  • this : Store
  • records : Ext.data.Record[]
    加载的Record
  • options : Object
    指定的加载选项( 细节参见 load)
Store
loadexception : ( misc misc )
此事件已过时，推荐使用能捕获所有 exception 的事件替代。...

此事件已过时，推荐使用能捕获所有 exception 的事件替代。

此事件与对应的Ext.data.DataProxy 有关。 附加信息详情参见 Ext.data.DataProxy. loadexception 。

监听器将会以如下的参数格式被调用:
  • misc : misc
    更多描述参见 Ext.data.DataProxy. loadexception 。
Store
metachange : ( Store this , Object meta )
在当前store的reader提供了新的元数据(fields)时触发。 当前只有JsonReader支持此配置。
在当前store的reader提供了新的元数据(字段)时触发。 当前只有JsonReader支持此配置。
监听器将会以如下的参数格式被调用:
  • this : Store
  • meta : Object
    JSON元数据
Store
remove : ( Store this , Ext.data.Record record , Number index )
当从Store中 removed 一条记录时触发
当从Store中 removed 一条记录时触发
监听器将会以如下参数格式被调用:
  • this : Store
  • record : Ext.data.Record
    被删除的记录
  • index : Number
    被删记录的索引位置
Store
save : ( Ext.data.Store store , Number batch , Object data )
在保存操作完成之后触发。 保存操作包含销毁记录、更新记录以及创建记录。
在保存操作完成之后触发。 保存操作包含销毁记录、更新记录以及创建记录。
监听器将会以如下的参数格式被调用:
  • store : Ext.data.Store
  • batch : Number
    被保存分支的标识符。
  • data : Object
    一个对象，包含了需要保存的数据。 此对象将会包含每个操作对应的key，连同每个操作所涉及到的记录的数组。
Store
update : ( Store this , Ext.data.Record record , String operation )
当一条记录被更新时触发
当一条记录被更新时触发
监听器将会以如下的参数格式被调用:
  • this : Store
  • record : Ext.data.Record
    被更新的记录
  • operation : String
    执行的更新操作。 可能是如下值中的一个:
    Ext.data.Record.EDIT
Ext.data.Record.REJECT
Ext.data.Record.COMMIT
Store
write : ( Ext.data.Store store , String action , Object result , Ext.Direct.Transaction res , Record/Record[] rs )
如果一个 Ext.data.Api.actions的CRUD操作导致服务器返回代码200，此事件被触发...
如果一个 Ext.data.Api.actions的CRUD操作导致服务器返回代码200，此事件被触发。 操作成功由 result[ 'successProperty'] 参数决定 ( 注意 对于安静型(RESTful)的store， 一个简单的20x(译者注：服务端返回的状态码，类似404，各种状态码都有自己的 含义，具体请google)，对"destroy"和"update"操作来说已经足够。 "create"操作应该(should should)返回200同时返回一个数据库主键)。
监听器将会以如下的参数格式被调用:
  • store : Ext.data.Store
  • action : String
    [Ext.data.Api.actions.create|update|destroy]
  • result : Object
    为方便使用，在响应之外获取的数据
  • res : Ext.Direct.Transaction
  • rs : Record/Record[]
    Store的记录，写操作的对象
Store


DataWriter
    JsonWriter

Class Ext.data.JsonWriter

包: | Ext.data
定义类的文件: | JsonWriter.js
类: | JsonWriter
继承自: | DataWriter
DataWriter 创建一个数组或者单独的 Ext.data.Record 对象。 去准备请求一个远程的CRUD ACTION。

配置项

Config Options Defined By
createRecord : Function
抽象方法，需要在所有子类里实现 (例如: JsonWriter.createRecord)
DataWriter
destroyRecord : Function
需要在所有子类中实现的抽象方法 (例如: JsonWriter.destroyRecord)
DataWriter
encode : Boolean
如果为true to encode the hashed data.默认为true。当使用 Ext.data.DirectProxy, 设置为false，因为Ext.Direc ......
true to encode the hashed data. 默认为 true. 当使用 Ext.data.DirectProxy设置为false， false 因为Ext.Direct.JsonProvider将履行自己的 JSON的编码。此外，如果您使用 Ext.data.HttpProxy, setting to false 将导致HttpProxy数据传输使用 jsonData configuration-params of Ext.Ajax.request 而不是 params. 当使用 Ext.data.Store.restful Store,一些服务器端框架调整期望数据 通过jsonData机制。 encode: false , 让低级别的连接对象（如：Ext.Ajax）做 编码。
JsonWriter
encodeDelete : Boolean
False 发送一个ID到服务器, true to encode 处理数据为一个字符串, 如: {id: 1} 默认为....
False 发送一个ID到服务器, true to encode 处理数据为一个字符串, 如:
                                {id: 1}
默认为 false
JsonWriter
listful : Boolean
默认false。设置为true来使DataWriter始终用列表...
默认false。设置为 true来使DataWriter 始终用列表的方式写HTTP参数，即便对单一记录操作。
DataWriter
updateRecord : Function
所有子类应该实现的抽象方法 (如: JsonWriter.updateRecord
DataWriter
writeAllFields : Boolean
默认为false。设置为true使DataWriter返回修改记录的所有字段而非仅仅是改变的字...
默认为false。设置为 true使DataWriter返回修改记录的所有字段而非仅仅是改变的字段。 false使DataWriter只请求一条记录中改变的字段。
DataWriter

公共属性

该类没有公共属性。

公共方法

Method Defined By
apply ( Object params , Object baseParams , String action , Record/Record[] rs ) : void
将一个记录集合编译为由Ext.data.JsonWriter或者Ext.data.XmlWriter等扩展定义的数据格式...
将一个记录集合编译为由Ext.data.JsonWriter或者Ext.data.XmlWriter等扩展定义的数据格式，为服务器端写入操作server-write action做准备。头两个参数同Ext.apply类似，第一个用来接受，第二个是源。
参数:
  • params : Object
    请求参数接收器。
  • baseParams : Object
    在 Ext.data.Store.baseParams中定义。 baseParms必须由扩展类编码，如： Ext.data.JsonWriter， Ext.data.XmlWriter。
  • action : String
    [ create|update|destroy]
  • rs : Record/Record[]
    写入的记录集合，即写动作的目标。
返回值:
  • void
DataWriter
createRecord ( Ext.data.Record rec ) : Object
实现抽象的 Ext.data.DataWriter#createRecord
实现抽象的Ext.data.DataWriter#createRecord
参数:
  • rec : Ext.data.Record
返回值:
  • Object
JsonWriter
destroyRecord ( Ext.data.Record rec ) : Object
实现抽象的 Ext.data.DataWriter#destroyRecord
实现抽象的 Ext.data.DataWriter#destroyRecord
参数:
  • rec : Ext.data.Record
返回值:
  • Object
JsonWriter
render ( Object http , Object baseParams , Object/Object[] data ) : void
最后的写入事件，追加数据对象到参数。
最后的写入事件，追加数据对象到参数。
参数:
  • http : Object
    params-object to write-to.
  • baseParams : Object
    as defined by Ext.data.Store.baseParams. 改basePrams必须继承encoded类，如: Ext.data.JsonWriter, Ext.data.XmlWriter.
  • data : Object/Object[]
    数据对象 ，代表编译过的Store存储记录
返回值:
  • void
JsonWriter
toArray ( Hash data ) : [Object]
将一个散列化Hashed的Ext.data.Record转化成为适合通过XTemplate编...
将一个散列化Hashed 的Ext.data.Record转化成为适合通过XTemplate编码为xml的字段数组， 例如：
<tpl for="."><{name}>{value}</{name}</tpl>
 non-phantom（非仿真，译者注：仿真phantom指的是记录不存在于服务器端，即前台伪数据）
{id: 1, first: 'foo', last: 'bar'} --> [{name: 'id', value: 1}, {name: 'first', value: 'foo'}, {name: 'last', value: 'bar'}]
 如果希望id自动产生，则Phantom （仿真）记录在 toHash中省略id属性。非AUTOINCREMENT的主键应该被保护起来。
参数:
  • data : Hash
    被Ext.data.DataWriter#toHash散列化的数据
返回值:
  • [Object]
    属性对象数组。
DataWriter
toHash ( Ext.data.Record rec , Object config ) : Object
将一条记录转化为散列表，其过程要考虑到Ext.data.Record的影响渲染的配置...
将一条记录转化为散列表，其过程要考虑到Ext.data.Record的影响渲染的配置属性的状态，如 writeAllFields、 phantom、 getChanges 和 idProperty
参数:
  • rec : Ext.data.Record
    用来散列化的记录。
  • config : Object
    未实现。将会实现一个exlude/only（排除/仅包含）配置项，用于良好控制哪些字段应该/不应该渲染。
返回值:
  • Object
DataWriter
updateRecord ( Ext.data.Record rec ) : Object
实现抽象的 Ext.data.DataWriter#updateRecord
实现抽象的Ext.data.DataWriter#updateRecord
参数:
  • rec : Ext.data.Record
返回值:
  • Object
JsonWriter

公共事件

该类没有公共事件。


Observable
    DataProxy
      MemoryProxy

Class Ext.data.MemoryProxy

包: | Ext.data
定义类的文件: | MemoryProxy.js
类: | MemoryProxy
继承自: | DataProxy
Ext.data.DataProxy的一个实现，它简单地把 在其构造器中指定的数据传递给Reader，然后立即调用它的load方法。

配置项

Config Options Defined By
api : Object
指定 调用CRUD操作的方法： "read", "create", "update" 和 "destroy"的url。 默认为：...
指定 调用CRUD操作的方法： "read", "create", "update" 和 "destroy"的url。 默认为：
api: {
    read    : undefined,
    create  : undefined,
    update  : undefined,
    destroy : undefined
}

url根据被执行的操作[load|create|save|destroy]而创建， 使用相应的 api 参数，或者如果没有定义时默认为配置的 Ext.data.Store. url。

例如:

api: {
    load :    '/controller/load',
    create :  '/controller/new',  // 服务器必须返回新记录的idProperty
    save :    '/controller/update',
    destroy : '/controller/destroy_action'
}

// 作为第二选择，可以使用对象形式指定每个API-action
api: {
    load: {url: 'read.php', method: 'GET'},
    create: 'create.php',
    destroy: 'destroy.php',
    save: 'update.php'
}

对于给定的CRUD，如果指定的URL为undefined， CRUD操作的请求会被重定向到所配置的 url 上。

注意： 如果需要动态修改一个操作的URL，对应的API属性 必须在操作的请求发出之前进行修改， 修改时使用对应的before-action事件。 例如需要修改指定给load操作的URL：

// 修改操作的url
myStore.on({
    beforeload: {
        fn: function (store, options) {
            // 使用setUrl
                                    方法，*仅仅*为当前请求改变URL。
            store.proxy.setUrl('changed1.php');
            // 将第二个可选参数设置为true以便改变当前URL参数，
            // 将当前URL应用到所有后来的请求。
            store.proxy.setUrl('changed1.php', true);
            // 变更所要完成的代理API，使用公共
            // 方法 setApi
                                    。
            store.proxy.setApi('read', 'changed2.php');
            // 或者使用个配置对象设置整个API。
            // 当使用配置对象选项时，你必须重新定义整个
            // API -- 而不仅仅是一个特定的操作。
            store.proxy.setApi({
                read    : 'changed_read.php',
                create  : 'changed_create.php',
                update  : 'changed_update.php',
                destroy : 'changed_destroy.php'
            });
        }
    }
});

DataProxy
doRequest : Function
抽象方法，所有子类都必须实现此方法。 注意: 只应该被需要自定义代理的开发者使用。 ...
抽象方法，所有子类都必须实现此方法。 注意: 只应该被需要自定义代理的开发者使用。 (例如: HttpProxy.doRequest, DirectProxy.doRequest)。
DataProxy
listeners : Object
一个包含一个或多个事件处理器的配置对象，会在初始化的时候被添加到目标对象上...

一个包含一个或多个事件处理器的配置对象，会在初始化的时候被添加到目标对象上。 该配置对象应该是一个有效的监听器配置对象就像 addListener例子中指定的一样可一次附加多个处理器。

ExtJs Components上的DOM事件

一些 ExtJs Component 类导出时会选择一些DOM事件(例如 "click", "mouseover" 等等), 这通常只是在有额外的值可以被添加时发生。例如DataView类的 click事件会传递被点击的节点。也可以直接在Component的HTMLElementevent上访问DOM事件，但必需在Component被渲染后监听器才能添加到Element 上。可以按照以下步骤添加插件:

// 插件会用一个监听器配置对象进行配置。
//该组件会被添加到所有处理方法的参数列表上。
Ext.DomObserver = Ext.extend(Object, {
    constructor: function(config) {
        this.listeners = config.listeners ? config.listeners : config;
    },

    // 组件将自己传递进了插件的初始化方法里
    init: function(c) {
        var p, l = this.listeners;
        for (p in l) {
            if (Ext.isFunction(l[p])) {
                l[p] = this.createHandler(l[p], c);
            } else {
                l[p].fn = this.createHandler(l[p].fn, c);
            }
        }

        // 渲染后立即添加监听器到元素上
        c.render = c.render.createSequence(function() {
            var e = c.getEl();
            if (e) {
                e.on(l);
            }
        });
    },

    createHandler: function(fn, c) {
        return function(e) {
            fn.call(this, e, c);
        };
    }
});

var combo = new Ext.form.ComboBox({

    // 元素被点击后折叠
    plugins: [ new Ext.DomObserver({
        click: function(evt, comp) {
            comp.collapse();
        }
    })],
    store: myStore,
    typeAhead: true,
    mode: 'local',
    triggerAction: 'all'
});

Observable
onRead : Function
抽象方法，所有子类都必须实现此方法。 注意: 只应该被需要自定义代理的开发者使用。...
抽象方法，所有子类都必须实现此方法。 注意: 只应该被需要自定义代理的开发者使用。 read 操作 的回调函数。
DataProxy
onWrite : Function
抽象方法，所有子类都必须实现此方法。 注意: 只应该被需要自定义代理的开发者使用。...
抽象方法，所有子类都必须实现此方法。 注意: 只应该被需要自定义代理的开发者使用。 create, update和destroy 操作 的回调函数。
DataProxy
restful : Boolean
默认为 false。 设置为true以便用一种安静(RESTful)模式进行操作。...

默认为 false。 设置为true以便用一种安静(RESTful)模式进行操作。

注意： 如果被插入的 Ext.data.Store 被设置为 restful: true ， 此参数将会被自动设置为true。 如果Store是RESTful的， 没有必要在代理上设置此配置。

RESTful型的实现允许服务端框架 根据HTTP方法自动发送操作到一个url， 例如:

store: new Ext.data.Store({
    restful: true,
    proxy: new Ext.data.HttpProxy({url:'/users'}); // all requests sent to /users
    ...
)}
如果代理的配置项中没有指定 api 所有请求都将被集中到一个单独的RESTful url (/users)， 这样服务端框架可以监测HTTP Method并做出相应的操作:
Method   url        action
POST     /users     create
GET      /users     read
PUT      /users/23  update
DESTROY  /users/23  delete

如果设置为true， 非模拟的 记录的id 将会被添加到url之后。 某些MVC(例如Ruby on Rails, Merb和 Django)支持 基于url的片段，URL中的片段遵守 Model-View-Controller 模式:

someSite.com/controller/action/id
典型情况下url的片段:
  • 第一段：描述了应该被调用的控制类。
  • 第二段： 描述了需要调用的类函数，或者方法。
  • 第三段： 描述了ID(典型情况下传递给方法的参数)。

附加信息参见 Ext.data.DataProxy.api 。

DataProxy

公共属性

该类没有公共属性。

公共方法

Method Defined By
MemoryProxy ( Object data )
参数:
  • data : Object
    数据对象，Reader会用来构造一个Ext.data.Record数据块。
返回值:
  • void
MemoryProxy
addEvents( Object|String o, string Optional. ) : void
添加指定的事件到事件列表上，事件会被该Observable触发。
添加指定的事件到事件列表上，事件会被该Observable触发。
参数:
  • o : Object|String
    以事件名作为属性true作为值的对象 或者当多个事件名被分开的传递时则为第一个事件名。
  • Optional. : string
    事件名被分开的传递时则为事件名。 用法:
    this.addEvents('storeloaded', 'storecleared');
返回值:
  • void
Observable
addListener( String eventName, Function handler, [Object scope], [Object options] ) : void
给对象添加事件处理器。
给对象添加事件处理器。
参数:
  • eventName : String
    监听的事件名。
  • handler : Function
    事件调用的方法
  • scope : Object
    （可选）处理方法执行的作用域 (this的引用 reference)。 如果被忽略。默认为触发事件的对象。
  • options : Object
    （可选）包含处理器配置和属性的对象。 可能包含以下的属性:
    • scope : Object
      处理方法执行的作用域(this的引用) 。 如果被忽略。默认为触发事件的对象。
    • delay : Number
      在触发事件后延迟调用处理器的毫秒数。
    • single : Boolean
      如果为True则添加一个处理器来处理下一次的事件触发（仅一次），然后移除自己。
    • buffer : Number
      使得处理器延迟指定毫秒数后预定的运行在 一个Ext.util.DelayedTask中 。 如果事件在时间内再一次被触发，原始的处理器不会被调用，但是新的处理器会预定的在他的位置上。
    • target : Observable
      如果事件在目标的Observable上触发则仅仅调用处理器， 否则 事件会从子类的Observable上冒泡

    组合选项
    使用这些选项参数,可能会组合出不同类型的监听器：

    一个延迟的，一次性的监听器。

    myDataView.on('click', this.onClick, this, {
single: true,
delay: 100
});

    一次调用附加多个处理器
    该方法同样支持传递一个包含指定的多个处理器的属性的配置对象参数。

    myGridPanel.on({
'click' : {
    fn: this.onClick,
    scope: this,
    delay: 100
},
'mouseover' : {
    fn: this.onMouseOver,
    scope: this
},
'mouseout' : {
    fn: this.onMouseOut,
    scope: this
}
});

    或者一个简写的语法：

    myGridPanel.on({
'click' : this.onClick,
'mouseover' : this.onMouseOver,
'mouseout' : this.onMouseOut,
 scope: this
});
返回值:
  • void
Observable
destroy () : void
通过清除所有事件监听器、取消所有活动的请求，销毁代理。
通过清除所有事件监听器、取消所有活动的请求，销毁代理。
参数:
  • 无。
返回值:
  • void
DataProxy
doRequest ( String action , Ext.data.Record/Ext.data.Record[] rs , Object params , Ext.data.DataReader reader , Function callback , Object scope , Object arg ) : void
DataProxy#doRequest的MemoryProxy实现
DataProxy#doRequest的MemoryProxy实现
参数:
  • action : String
  • rs : Ext.data.Record/Ext.data.Record[]
    如果操作被加载了，rs将会为null
  • params : Object
    一个包含参数的对象，它将被用作发送到远程服务器请求的 HTTP参数。
  • reader : Ext.data.DataReader
    Reader对象，它把数据对象转换为Ext.data.Record数据块。
  • callback : Function
    一个函数，被传递Ext.data.Record数据块。 此函数必须被传递:
    • Record数据块对象
    • 来自load函数的"arg"参数
    • 一个布尔型的操作成功标志位
  • scope : Object
    作用域( this 引用) 回调函数将会在其中被执行。 默认为浏览器window对象。
  • arg : Object
    一个可选参数，将会作为第二个参数被传递给回调函数。
返回值:
  • void
MemoryProxy
enableBubble( String/Array events ) :void
是否现在使得事件会被该Observable触发并调用 this.getBubbleTarget()方法在拥有者的继承树...

是否现在使得事件会被该Observable触发并调用 this.getBubbleTarget()方法在拥有者的继承树中冒泡。Observable的基础类中没有该方法的实现。

该方法一般被Ext.Components用来冒泡事件到拥有者的容器。参看Ext.Component.getBubbleTarget默认的实现 在Ext.Component中返回组件的直接拥有者。但是如果需要的是一个已知的目标，该方法可以被重写来更快的访问需求的目标。

例子:

Ext.override(Ext.form.Field, {
    // 添加方法到Field的initComponent上改变事件为冒泡
    initComponent : Ext.form.Field.prototype.initComponent.createSequence(function() {
        this.enableBubble('change');
    }),

    // 我们知道我们想让Field的事件冒泡到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() {
            // 如果样式被修改标题会变红。
            myForm.header.setStyle('color', 'red');
        }
    }
});
参数:
  • events : String/Array
    冒泡的事件名，或事件名数组
返回值:
  • void
Observable
fireEvent( String eventName, Object... args ) : Boolean
用传入的参数触发指定的事件 (减去事件名)。 一个事件可以被设置为冒泡 Obse...

用传入的参数触发指定的事件 (减去事件名)。

一个事件可以被设置为冒泡到Observable父类继承树(参看 Ext.Component.getBubbleTarget) 调用enableBubble实现。

参数:
  • eventName : String
    触发的事件名。
  • args : Object...
    传递给处理器的可变长度参数。
返回值:
  • Boolean
    如果有任何的处理器返回false则返回false，否则返回true。
Observable
hasListener( String eventName ) : Boolean
检测对象是否包含指定事件的任何监听器
检测对象是否包含指定事件的任何监听器
参数:
  • eventName : String
    检测的事件名
返回值:
  • Boolean
    如果事件被监听则为true，否则为false
Observable
isApiAction ( String [Ext.data.Api.CREATE|READ|UPDATE|DESTROY]} ) : Boolean
如果指定的action 是作为一个单独的action在api-config.request中被定义的， 返回true。 如果所有的API-actions...
如果指定的action 是作为一个单独的action在api-config.request中被定义的， 返回true。 如果所有的API-actions 都被发送到唯一的url， 那么xaction参数不是必须的。 但是，如果没有定义api并且所有代理action被发送到DataProxy#url， 服务端需要xaction参数为CRUD操作执行 一次到相应代码的转换。
参数:
  • [Ext.data.Api.CREATE|READ|UPDATE|DESTROY]} : String
    action
返回值:
  • Boolean
DataProxy
load ( Object params , Object reader , Object callback , Object scope , Object arg ) : void
已过时 load方法使用旧的方法签名。 推荐的方法参见{@doRequest}。
已过时 load方法使用旧的方法签名。 推荐的方法参见{@doRequest}。
参数:
  • params : Object
  • reader : Object
  • callback : Object
  • scope : Object
  • arg : Object
返回值:
  • void
DataProxy
on( String eventName, Function handler, [Object scope], [Object options] ) : void
给对象添加事件处理器 (addListener的简写形式)
给对象添加事件处理器 (addListener的简写形式。)
参数:
  • eventName : String
    监听的事件类型
  • handler : Function
    事件调用的方法
  • scope : Object
    （可选）处理方法执行时的作用域 (this 的引用)。 如果被忽略。默认为触发事件的对象。
  • options : Object
    可选 包含处理器配置的对象。
返回值:
  • void
Observable
purgeListeners() : void
移除对象上所有的监听器
移除对象上所有的监听器
参数:
  • 无。
返回值:
  • void
Observable
relayEvents( Object o, Array events ) : void
从指定的Observable上传递选择的事件就好像被当前对象触发一样。
从指定的Observable上传递选择的事件就好像被当前对象触发一样。
参数:
  • o : Object
    该Observable上的事件被当前对象传递。
  • events : Array
    传递的数组名。
返回值:
  • void
Observable
removeListener( String eventName, Function handler, [Object scope] ) : void
删除一个事件处理器。
删除一个事件处理器。
参数:
  • eventName : String
    处理器关联的事件类型。
  • handler : Function
    移除的处理器。 这应该是传递到addListener里的方法的引用。
  • scope : Object
    （可选）处理器指定的初始作用域。
返回值:
  • void
Observable
request ( String action , Ext.data.Record/Ext.data.Record[]/null rs , Object params , Ext.data.DataReader reader , Function callback , Object scope , Object options ) : void
所有代理操作都通过此方法执行。 自动触发"before" + action事件。
所有代理操作都通过此方法执行。 自动触发"before" + action事件。
参数:
  • action : String
    操作名称
  • rs : Ext.data.Record/Ext.data.Record[]/null
    当是'load'操作时此值为null
  • params : Object
  • reader : Ext.data.DataReader
  • callback : Function
  • scope : Object
    作用域 ( this 引用) 回调函数将会在其中被执行。 默认为Proxy对象。
  • options : Object
    所有为操作指定的选项(示例参见 Ext.data.Store.load。
返回值:
  • void
DataProxy
resumeEvents() : void
重新开始触发事件。(参见suspendEvents) 如果事件以queueSuspended参数被挂起，则在事件被挂起时 ...
重新开始触发事件。(参见 suspendEvents) 如果事件以queueSuspended 参数被挂起，则在事件被挂起时触发的事件会被传递到所有的监听器上
参数:
  • 无。
返回值:
  • void
Observable
setApi ( String/Object api , String/Function url ) : void
重定义代理API或则一个API的单次操作。 可以使用两个方法签名调用。...

重定义代理API或则一个API的单次操作。 可以使用两个方法签名调用。

如果使用一个对象作为唯一的参数进行调用， 此对象在entire API中重新定义， 例如:

proxy.setApi({
    read    : '/users/read',
    create  : '/users/create',
    update  : '/users/update',
    destroy : '/users/destroy'
});

如果使用两个参数进行调用， 调用那个操作时，第一个参数必须是一个字符串，它指定需要重定义的API操作， 同时第二个参数必须是URL( 或者是一个函数，如果使用DirectProxy)， 例如:

                                proxy.setApi(Ext.data.Api.actions.read, '/users/new_load_url');
参数:
  • api : String/Object
    一个API描述对象，或者是action名。
  • url : String/Function
    调用action的URL( 或者是一个函数，如果使用DirectProxy)。
返回值:
  • void
DataProxy
suspendEvents( Boolean queueSuspended ) : void
暂停触发所有的事件。 (参看resumeEvents)
暂停触发所有的事件。（参看 resumeEvents)
参数:
  • queueSuspended : Boolean
    如果传递为true则排列好暂停的事件使得在调用 resumeEvents 后再触发它们，而不是抛弃所有暂停的事件。
返回值:
  • void
Observable
un( String eventName, Function handler, [Object scope] ) : void
删除一个事件处理器(removeListener方法的简写形式)
删除一个事件处理器(removeListener方法的简写形式。)
参数:
  • eventName : String
    处理器关联的事件类型
  • handler : Function
    被删除的处理器 这应该是传入 addListener 中的方法的引用。
  • scope : Object
    （可选）为处理器指定的初始作用域。
返回值:
  • void
Observable

公共事件

Event Defined By
beforeload : ( DataProxy this , Object params )
在发送请求获取数据对象之前触发。
在发送请求获取数据对象之前触发。
监听器将会以如下的参数格式被调用:
  • this : DataProxy
    发送请求的代理
  • params : Object
    传递给 request 函数的参数对象
DataProxy
beforewrite : ( DataProxy this , String action , Record/Record[] rs , Object params )
当为如下操作Ext.data.Api.actions.create|update|destroy 产生一个请求之前触发。除了通过...

当为如下操作Ext.data.Api.actions.create|update|destroy 产生一个请求之前触发。

除了通过发出此事件的DataProxy实例触发之外， 此事件也通过Ext.data.DataProxy 类触发， 通过在Ext.data.Proxy类自身绑定一个监听器， 允许集中处理来自所有 DataProxie的beforewrite事件。

监听器将会使用如下参数格式被调用:
  • this : DataProxy
    请求的代理
  • action : String
    [Ext.data.Api.actions.create|update|destroy]
  • rs : Record/Record[]
    需要create|update|destroy的Record(s)。
  • params : Object
    请求的 params 对象。 编辑 params 以便向请求中添加参数。
DataProxy
exception : ( DataProxy this , String type , String action , Object options , Object response , Mixed arg )
在进行远程请求时，如果在Proxy内部发生异常，触发此事件。 此事件通过对应的....

在进行远程请求时，如果在Proxy内部发生异常，触发此事件。 此事件通过对应的 Ext.data.Store . exception 进行转发，所以，所有Store的实例都可以监听此事件。

除了通过发出此事件的DataProxy实例触发之外， 此事件也通过Ext.data.DataProxy 类触发， 通过在Ext.data.Proxy类自身绑定一个监听器， 允许集中处理来自所有 DataProxie的exception事件。

此事件可以因为如下两个原因之一而被触发:

  • remote-request failed :
    服务器没有返回状态码=== 200
  • remote-request succeeded :
    远程请求已经成功，但是reader无法读取响应。 这意味着服务器返回了数据， 但是配置的Rader在读取响应时抛出了异常。 这种情况下，此事件被触发并且捕捉到的错误 将会被一起传递到此事件中。

根据第二个参数type [remote|response]， 此事件在两种不同的上下文触发。 在两种上下文中，前四个参数是一样的--- 只有最后两个参数不同。

监听器将会以如下的参数格式被调用:
  • this : DataProxy
    发出请求的代理
  • type : String

    此参数的值可以是'response'或者'remote'。

    • 'response' :

      服务器返回了一个无效的响应: 要么是404, 500或者响应的元数据 与DataReader中所定义的不符 (例如: root, idProperty, successProperty)。

    • 'remote' :

      服务器返回了一个有效的 响应，有一个参数successProperty === false. 此响应可以包含一个来自服务器的出错信息。 例如， 用户认证/授权(authentication/authorization)失败 ，或者发生了数据库校验错误。

  • action : String
    操作名称(参见 Ext.data.Api.actions。
  • options : Object
    在request 中为操作指定的配置项。
  • response : Object

    此参数的值依赖于 type 参数的值：

    • 'response' :

      原始的浏览器响应对象(例如: XMLHttpRequest)

    • 'remote' :

      来自服务器的已经解码的响应对象。

  • arg : Mixed

    此参数的类型和值依赖于 type 参数的值：

    • 'response' : Error

      如果配置的Reader无法读取数据，此参数为JavaScript Error对象。 如果远程请求返回success===false，此参数将会为null。

    • 'remote' : Record/Record[]

      只有在action是一个write action (Ext.data.Api.actions.create|update|destroy)时 才存在此参数

DataProxy
load : ( DataProxy this , Object o , Object options )
在load方法地方回调函数被调用之前触发。
在load方法地方回调函数被调用之前触发。
监听器将会使用如下的参数格式被调用:
  • this : DataProxy
    请求操作的代理
  • o : Object
    请求的事务对象
  • options : Object
    回调函数的options属性 ，被传递给 request 函数。
DataProxy
loadexception : ( Object this , Object arg , Object null , Error e )
在加载数据时，如果在Proxy内部发生了异常，则触发此事件。 注意，此事件也会通过....
在加载数据时，如果在Proxy内部发生了异常，则触发此事件。 注意，此事件也会通过 Ext.data.Store 转发，所以你可以直接在任何Store的实例上监听它。
Listeners will be called with the following arguments:
  • this : Object
  • arg : Object
    传递给 load 方法的回调函数arg对象
  • null : Object
    对于MemoryProxy， 此参数不会被使用，并且一直为null
  • e : Error
    如果配置的Reader无法读取数据，此参数为捕获到的JavaScript Error对象
MemoryProxy
write : ( DataProxy this , String action , Object data , Object response , Record/Record[] rs , Object options )
在请求的回调函数被调用之前触发。作为补充， 通过发出事件DataProxy实例触发...

在请求的回调函数被调用之前触发。

除了通过发出此事件的DataProxy实例触发之外， 此事件也通过Ext.data.DataProxy 类触发， 通过在Ext.data.Proxy类自身绑定一个监听器， 允许集中处理来自所有 DataProxie的write事件。

监听器将会使用如下的参数格式被调用:
  • this : DataProxy
    发送请求的代理
  • action : String
    [Ext.data.Api.actions.create|upate|destroy]
  • data : Object
    从服务器的响应中提取的数据对象
  • response : Object
    来自服务器被解码好的响应
  • rs : Record/Record[]
    来自Store的Record(s)
  • options : Object
    回调函数的options 属性， 被传递给 request 函数
DataProxy


Observable
    Node

Class Ext.data.Node

包: | Ext.data
定义类的文件: | Tree.js
类: | Node
子类: | TreeNode
继承自: | Observable

配置项

Config Options Defined By
id : String
节点编号
Node
leaf : Boolean
如果当前节点是一个叶子节点，并且没有孩子节点，则为true。
Node
listeners : Object
一个包含一个或多个事件处理器的配置对象，会在初始化的时候被添加到目标对象上...

一个包含一个或多个事件处理器的配置对象，会在初始化的时候被添加到目标对象上。 该配置对象应该是一个有效的监听器配置对象就像 addListener例子中指定的一样可一次附加多个处理器。

ExtJs Components上的DOM事件

一些 ExtJs Component 类导出时会选择一些DOM事件(例如 "click", "mouseover" 等等), 这通常只是在有额外的值可以被添加时发生。例如DataView类的 click事件会传递被点击的节点。也可以直接在Component的HTMLElementevent上访问DOM事件，但必需在Component被渲染后监听器才能添加到Element 上。可以按照以下步骤添加插件:

// 插件会用一个监听器配置对象进行配置。
//该组件会被添加到所有处理方法的参数列表上。
Ext.DomObserver = Ext.extend(Object, {
    constructor: function(config) {
        this.listeners = config.listeners ? config.listeners : config;
    },

    // 组件将自己传递进了插件的初始化方法里
    init: function(c) {
        var p, l = this.listeners;
        for (p in l) {
            if (Ext.isFunction(l[p])) {
                l[p] = this.createHandler(l[p], c);
            } else {
                l[p].fn = this.createHandler(l[p].fn, c);
            }
        }

        // 渲染后立即添加监听器到元素上
        c.render = c.render.createSequence(function() {
            var e = c.getEl();
            if (e) {
                e.on(l);
            }
        });
    },

    createHandler: function(fn, c) {
        return function(e) {
            fn.call(this, e, c);
        };
    }
});

var combo = new Ext.form.ComboBox({

    // 元素被点击后折叠
    plugins: [ new Ext.DomObserver({
        click: function(evt, comp) {
            comp.collapse();
        }
    })],
    store: myStore,
    typeAhead: true,
    mode: 'local',
    triggerAction: 'all'
});

Observable

公共属性

Property |  | Defined By
 | attributes : Object 提供给节点的参数。你可以使用这个属性来访问你提供的任何特定参数。 | Node
 | childNodes : Array 当前节点的所有孩子节点。 | Node
 | firstChild : Node 当前节点的第一个直接的孩子节点，如果当前节点没有孩子，则为null。 | Node
 | id : String 节点编号 | Node
 | lastChild : Node 当前节点的最后一个直接的孩子节点，如果当前节点没有孩子节点，则为null。 | Node
 | nextSibling : Node 树中最靠近当前节点的下一个节点， 如果不存在兄弟节点，则此值为null。 | Node
 | parentNode : Node 当前节点的父节点 | Node
 | previousSibling : Node 树中最靠近当前节点的前一个节点， 如果不存在兄弟节点，则此值为null。 | Node

公共方法

Method Defined By
Node ( Object attributes )
参数:
  • attributes : Object
    The attributes/config for the node
返回值:
  • void
Node
addEvents( Object|String o, string Optional. ) : void
添加指定的事件到事件列表上，事件会被该Observable触发。
添加指定的事件到事件列表上，事件会被该Observable触发。
参数:
  • o : Object|String
    以事件名作为属性true作为值的对象 或者当多个事件名被分开的传递时则为第一个事件名。
  • Optional. : string
    事件名被分开的传递时则为事件名。 用法:
    this.addEvents('storeloaded', 'storecleared');
返回值:
  • void
Observable
addListener( String eventName, Function handler, [Object scope], [Object options] ) : void
给对象添加事件处理器。
给对象添加事件处理器。
参数:
  • eventName : String
    监听的事件名。
  • handler : Function
    事件调用的方法
  • scope : Object
    （可选）处理方法执行的作用域 (this的引用 reference)。 如果被忽略。默认为触发事件的对象。
  • options : Object
    （可选）包含处理器配置和属性的对象。 可能包含以下的属性:
    • scope : Object
      处理方法执行的作用域(this的引用) 。 如果被忽略。默认为触发事件的对象。
    • delay : Number
      在触发事件后延迟调用处理器的毫秒数。
    • single : Boolean
      如果为True则添加一个处理器来处理下一次的事件触发（仅一次），然后移除自己。
    • buffer : Number
      使得处理器延迟指定毫秒数后预定的运行在 一个Ext.util.DelayedTask中 。 如果事件在时间内再一次被触发，原始的处理器不会被调用，但是新的处理器会预定的在他的位置上。
    • target : Observable
      如果事件在目标的Observable上触发则仅仅调用处理器， 否则 事件会从子类的Observable上冒泡

    组合选项
    使用这些选项参数,可能会组合出不同类型的监听器：

    一个延迟的，一次性的监听器。

    myDataView.on('click', this.onClick, this, {
single: true,
delay: 100
});

    一次调用附加多个处理器
    该方法同样支持传递一个包含指定的多个处理器的属性的配置对象参数。

    myGridPanel.on({
'click' : {
    fn: this.onClick,
    scope: this,
    delay: 100
},
'mouseover' : {
    fn: this.onMouseOver,
    scope: this
},
'mouseout' : {
    fn: this.onMouseOut,
    scope: this
}
});

    或者一个简写的语法：

    myGridPanel.on({
'click' : this.onClick,
'mouseover' : this.onMouseOver,
'mouseout' : this.onMouseOut,
 scope: this
});
返回值:
  • void
Observable
appendChild ( Node/Array node ) : Node
添加新的节点(s)，作为当前节点的最后的孩子。
添加新的节点(s)，作为当前节点的最后的孩子。
参数:
  • node : Node/Array
    需要添加的节点数组
返回值:
  • Node
    如果添加的是单个节点，该值就是这个节点对象；如果插入的是一个数组，则该值为null
Node
bubble ( Function fn , [ Object scope ], [ Array args ] ) : void
从当前节点沿着树结构向上冒泡，对途经的每个节点调用指定的方法。 调用方法的作用域...
从当前节点沿着树结构向上冒泡，对途经的每个节点调用指定的方法。 调用方法的作用域 (this)为当前节点或者指定的作用域。 传递给方法的参数是所提供的参数或者当前节点。 如果方法在任意一个节点上返回false，则停止冒泡。
参数:
  • fn : Function
    需要调用的方法
  • scope : Object
    可选 方法的作用域(默认值为当前节点)
  • args : Array
    可选 调用方法所传递的参数(默认传递当前节点)
返回值:
  • void
Node
cascade ( Function fn , [ Object scope ], [ Array args ] ) : void
从当前节点沿树结构下落，对每个节点调用给定的方法。 调用方法的作用域 ...
从当前节点沿树结构下落，对每个节点调用给定的方法。 调用方法的作用域 (this)为当前节点或者指定的作用域。 传递给方法的参数是所提供的参数或者当前节点。 如果方法在任意一个节点上返回false，则下落操作停止在那个分支上。
参数:
  • fn : Function
    需要调用的方法
  • scope : Object
    可选 The scope ( this reference) 方法的作用域(默认值为 current node)
  • args : Array
    可选 调用方法所传递的参数(默认传递当前节点)
返回值:
  • void
Node
contains ( Node node ) : Boolean
如果当前节点是传递进来的节点的祖先（任何层次点），则返回true。
如果当前节点是传递进来的节点的祖先（任何层次点），则返回true。
参数:
  • node : Node
返回值:
  • Boolean
Node
destroy () : void
Destroys the node.
Destroys the node.
参数:
  • 无。
返回值:
  • void
Node
eachChild ( Function fn , [ Object scope ], [ Array args ] ) : void
迭代当前节点的孩子节点，对每个节点调用指定的方法。 调用方法的作用域 ...
迭代当前节点的孩子节点，对每个节点调用指定的方法。 调用方法的作用域 (this)为当前节点或者指定的作用域。 传递给方法的参数是所提供的参数或者当前节点。 如果方法在任意一个节点上返回false，则停止迭代。
参数:
  • fn : Function
    需要调用的方法
  • scope : Object
    可选 The scope ( this reference) in which the function is executed. Defaults to the current Node in the iteration.
  • args : Array
    可选 方法的作用域(默认值为 current node)
返回值:
  • void
Node
enableBubble( String/Array events ) :void
是否现在使得事件会被该Observable触发并调用 this.getBubbleTarget()方法在拥有者的继承树...

是否现在使得事件会被该Observable触发并调用 this.getBubbleTarget()方法在拥有者的继承树中冒泡。Observable的基础类中没有该方法的实现。

该方法一般被Ext.Components用来冒泡事件到拥有者的容器。参看Ext.Component.getBubbleTarget默认的实现 在Ext.Component中返回组件的直接拥有者。但是如果需要的是一个已知的目标，该方法可以被重写来更快的访问需求的目标。

例子:

Ext.override(Ext.form.Field, {
    // 添加方法到Field的initComponent上改变事件为冒泡
    initComponent : Ext.form.Field.prototype.initComponent.createSequence(function() {
        this.enableBubble('change');
    }),

    // 我们知道我们想让Field的事件冒泡到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() {
            // 如果样式被修改标题会变红。
            myForm.header.setStyle('color', 'red');
        }
    }
});
参数:
  • events : String/Array
    冒泡的事件名，或事件名数组
返回值:
  • void
Observable
findChild ( String attribute , Mixed value , [ Boolean deep ] ) : Node
查找第一个孩子节点，它的某个属性具有给定的值。
查找第一个孩子节点，它的某个属性具有给定的值。
参数:
  • attribute : String
    属性名称
  • value : Mixed
    需要查找的值
  • deep : Boolean
    (Optional) True to search through nodes deeper than the immediate children
返回值:
  • Node
    查找到的孩子节点，如果没有找到则为null
Node
findChildBy ( Function fn , [ Object scope ], [ Boolean deep ] ) : Node
根据指定的方法寻找第一个孩子节点。如果传入的方法返回true，则该孩子节点为符合条件的节点。
根据指定的方法寻找第一个孩子节点。如果传入的方法返回true，则该孩子节点为符合条件的节点。
参数:
  • fn : Function
    函数必须返回 true 是否经过的节点是要求的节点
  • scope : Object
    可选 The scope ( this reference) in which the function is executed. 默认这个节点是被检测的
  • deep : Boolean
    (Optional) True to search through nodes deeper than the immediate children
返回值:
  • Node
    找到的孩子节点，如果没有找到则返回null
Node
fireEvent( String eventName, Object... args ) : Boolean
用传入的参数触发指定的事件 (减去事件名)。 一个事件可以被设置为冒泡 Obse...

用传入的参数触发指定的事件 (减去事件名)。

一个事件可以被设置为冒泡到Observable父类继承树(参看 Ext.Component.getBubbleTarget) 调用enableBubble实现。

参数:
  • eventName : String
    触发的事件名。
  • args : Object...
    传递给处理器的可变长度参数。
返回值:
  • Boolean
    如果有任何的处理器返回false则返回false，否则返回true。
Observable
getDepth () : Number
返回当前节点的深度(根节点的深度为0)
返回当前节点的深度(根节点的深度为0)
参数:
  • 无。
返回值:
  • Number
Node
getOwnerTree () : Tree
返回当前节点所在的树。
返回当前节点所在的树。
参数:
  • 无。
返回值:
  • Tree
Node
getPath ( [ String attr ] ) : String
返回当前节点的路径。该路径可以用来编程展开或者选中当前节点。
返回当前节点的路径。该路径可以用来编程展开或者选中当前节点。
参数:
  • attr : String
    可选 路径使用的参数(默认值为节点的id)
返回值:
  • String
    The path
Node
hasChildNodes () : Boolean
如果当前节点有一个或多个孩子节点，返回true，否则返回false。
如果当前节点有一个或多个孩子节点，返回true，否则返回false。
参数:
  • 无。
返回值:
  • Boolean
Node
hasListener( String eventName ) : Boolean
检测对象是否包含指定事件的任何监听器
检测对象是否包含指定事件的任何监听器
参数:
  • eventName : String
    检测的事件名
返回值:
  • Boolean
    如果事件被监听则为true，否则为false
Observable
indexOf ( Node node ) : Number
返回一个孩子节点的序号
返回一个孩子节点的序号
参数:
  • node : Node
返回值:
  • Number
    节点的序号，没有找到时返回-1
Node
insertBefore ( Node node , Node refNode ) : Node
将第一个节点的所有孩子节点插入到第二个节点之前
将第一个节点的所有孩子节点插入到第二个节点之前
参数:
  • node : Node
    The node to insert
  • refNode : Node
    The node to insert before (if null the node is appended)
返回值:
  • Node
    The inserted node
Node
isAncestor ( Node node ) : Boolean
如果传入的节点是当前节点的祖先（任何层次上），返回true。
如果传入的节点是当前节点的祖先（任何层次上），返回true。
参数:
  • node : Node
返回值:
  • Boolean
Node
isExpandable () : Boolean
如果当前节点有一个或多个子节点， 或者当节点的...
如果当前节点有一个或多个子节点， 或者当节点的 expandable(参见 attributes), 属性被明确地设置为true，返回true；否则 返回false。
参数:
  • 无。
返回值:
  • Boolean
Node
isFirst () : Boolean
如果当前节点是其父节点的第一个孩子，则返回true
如果当前节点是其父节点的第一个孩子，则返回true
参数:
  • 无。
返回值:
  • Boolean
Node
isLast () : Boolean
如果当前节点是其父节点的最后一个孩子，返回true
如果当前节点是其父节点的最后一个孩子，返回true
参数:
  • 无。
返回值:
  • Boolean
Node
isLeaf () : Boolean
如果当前节点是一个叶子节点，则返回true
如果当前节点是一个叶子节点，则返回true
参数:
  • 无。
返回值:
  • Boolean
Node
item ( Number index ) : Node
返回指定索引处的孩子节点。
返回指定索引处的孩子节点。
参数:
  • index : Number
返回值:
  • Node
Node
on( String eventName, Function handler, [Object scope], [Object options] ) : void
给对象添加事件处理器 (addListener的简写形式)
给对象添加事件处理器 (addListener的简写形式。)
参数:
  • eventName : String
    监听的事件类型
  • handler : Function
    事件调用的方法
  • scope : Object
    （可选）处理方法执行时的作用域 (this 的引用)。 如果被忽略。默认为触发事件的对象。
  • options : Object
    可选 包含处理器配置的对象。
返回值:
  • void
Observable
purgeListeners() : void
移除对象上所有的监听器
移除对象上所有的监听器
参数:
  • 无。
返回值:
  • void
Observable
relayEvents( Object o, Array events ) : void
从指定的Observable上传递选择的事件就好像被当前对象触发一样。
从指定的Observable上传递选择的事件就好像被当前对象触发一样。
参数:
  • o : Object
    该Observable上的事件被当前对象传递。
  • events : Array
    传递的数组名。
返回值:
  • void
Observable
remove ( Boolean destroy ) : Node
从父节点中移除当前节点
从父节点中移除当前节点
参数:
  • destroy : Boolean
    true to destroy the node upon removal. Defaults to false.
返回值:
  • Node
    this
Node
removeAll ( Boolean destroy ) : Node
Removes all child nodes from this node.
Removes all child nodes from this node.
参数:
  • destroy : Boolean
    true to destroy the node upon removal. Defaults to false.
返回值:
  • Node
    this
Node
removeChild ( Node node , Boolean destroy ) : Node
从当前节点中删除一个孩子节点。
从当前节点中删除一个孩子节点。
参数:
  • node : Node
    需要删除的节点
  • destroy : Boolean
    true to destroy the node upon removal. 默认是false
返回值:
  • Node
    删除掉的节点
Node
removeListener( String eventName, Function handler, [Object scope] ) : void
删除一个事件处理器。
删除一个事件处理器。
参数:
  • eventName : String
    处理器关联的事件类型。
  • handler : Function
    移除的处理器。 这应该是传递到addListener里的方法的引用。
  • scope : Object
    （可选）处理器指定的初始作用域。
返回值:
  • void
Observable
replaceChild ( Node newChild , Node oldChild ) : Node
使用一个节点替换当前节点中的一个孩子节点。
使用一个节点替换当前节点中的一个孩子节点。
参数:
  • newChild : Node
    用来替代的节点
  • oldChild : Node
    被替代的节点
返回值:
  • Node
    被替代的节点
Node
resumeEvents() : void
重新开始触发事件。(参见suspendEvents) 如果事件以queueSuspended参数被挂起，则在事件被挂起时 ...
重新开始触发事件。(参见 suspendEvents) 如果事件以queueSuspended 参数被挂起，则在事件被挂起时触发的事件会被传递到所有的监听器上
参数:
  • 无。
返回值:
  • void
Observable
setId ( String id ) : void
Changes the id of this node.
Changes the id of this node.
参数:
  • id : String
    The new id for the node.
返回值:
  • void
Node
sort ( Function fn , [ Object scope ] ) : void
使用提供的排序方法对当前节点的孩子节点进行排序
使用提供的排序方法对当前节点的孩子节点进行排序
参数:
  • fn : Function
    A function which, when passed two Nodes, returns -1, 0 or 1 depending upon required sort order.
  • scope : Object
    可选The scope ( this reference) in which the function is executed. Defaults to the browser window.
返回值:
  • void
Node
suspendEvents( Boolean queueSuspended ) : void
暂停触发所有的事件。 (参看resumeEvents)
暂停触发所有的事件。（参看 resumeEvents)
参数:
  • queueSuspended : Boolean
    如果传递为true则排列好暂停的事件使得在调用 resumeEvents 后再触发它们，而不是抛弃所有暂停的事件。
返回值:
  • void
Observable
un( String eventName, Function handler, [Object scope] ) : void
删除一个事件处理器(removeListener方法的简写形式)
删除一个事件处理器(removeListener方法的简写形式。)
参数:
  • eventName : String
    处理器关联的事件类型
  • handler : Function
    被删除的处理器 这应该是传入 addListener 中的方法的引用。
  • scope : Object
    （可选）为处理器指定的初始作用域。
返回值:
  • void
Observable

公共事件

Event Defined By
append : ( Tree tree , Node this , Node node , Number index )
当一个新的子节点被添加时触发
当一个新的子节点被添加时触发
监听器将会用如下的参数调用:
  • tree : Tree
    所属树
  • this : Node
    This node
  • node : Node
    新添加的节点
  • index : Number
    新添加的节点的序号
Node
beforeappend : ( Tree tree , Node this , Node node )
当一个新的孩子节点被添加之前触发，返回false终止添加操作
当一个新的孩子节点被添加之前触发，返回false终止添加操作
监听器将会用如下的参数调用:
  • tree : Tree
    所属树
  • this : Node
    This node
  • node : Node
    需要添加的孩子节点
Node
beforeinsert : ( Tree tree , Node this , Node node , Node refNode )
在插入一个新的孩子节点之前触发，返回false终止插入。
在插入一个新的孩子节点之前触发，返回false终止插入。
监听器将会用如下的参数调用:
  • tree : Tree
    所属树
  • this : Node
    This node
  • node : Node
    需要插入的孩子节点
  • refNode : Node
    在其之前插入孩子节点的节点
Node
beforemove : ( Tree tree , Node this , Node oldParent , Node newParent , Number index )
当前节点被移动到树中一个新的位置之前触发。 返回false终止移动。
当前节点被移动到树中一个新的位置之前触发。 返回false终止移动。
监听器将会用如下的参数调用:
  • tree : Tree
    所属树
  • this : Node
    This node
  • oldParent : Node
    The parent of this node
  • newParent : Node
    The new parent this node is moving to
  • index : Number
    The index it is being moved to
Node
beforeremove : ( Tree tree , Node this , Node node )
当一个孩子节点被删除之前触发，返回false终止删除
当一个孩子节点被删除之前触发，返回false终止删除
监听器将会用如下的参数调用:
  • tree : Tree
    所属树
  • this : Node
    This node
  • node : Node
    需要删除的孩子节点
Node
insert : ( Tree tree , Node this , Node node , Node refNode )
当插入一个新的节点时触发。
当插入一个新的节点时触发。
监听器将会用如下的参数调用:
  • tree : Tree
    所属树
  • this : Node
    This node
  • node : Node
    插入的孩子节点
  • refNode : Node
    在其之前插入孩子节点的节点
Node
move : ( Tree tree , Node this , Node oldParent , Node newParent , Number index )
当前节点被移动到树中一个新的位置时触发
当前节点被移动到树中一个新的位置时触发
监听器将会用如下的参数调用:
  • tree : Tree
    所属树
  • this : Node
    This node
  • oldParent : Node
    当前节点旧的父节点
  • newParent : Node
    当前节点新的父节点
  • index : Number
    移动到的序号
Node
remove : ( Tree tree , Node this , Node node )
当一个节点移除时触发
当一个节点移除时触发
监听器将会用如下的参数调用:
  • tree : Tree
    所属树
  • this : Node
    这个节点
  • node : Node
    已经移除的节点
Node


Class Ext.data.Record

包: | Ext.data
定义类的文件: | Record.js
类: | Record
继承自: | Object

当前类的实例封装了Record定义信息和Record 值信息，用于 Ext.data.Store 对象，或者任何需要访问Record的代码，Record缓存于一个Ext.data.Store 对象中。

此类的构造函数通过 传递一个字段定义对象数组给create 而创建。实例通常情况下通过 Ext.data.Reader 的实现类在处理未格式化的数据对象时创建。

注意，Record类的一个实例只能同时属于一个 Store。 为了从一个Store中将数据拷贝到另一个，使用 copy 方法创建Record的精确拷贝，并将新实例插入到另一个Store中。

当序列化一个Record以便提交到服务端时， 注意它包含许多私有属性，并且它拥有到所属Store的实例的引用， 此Store反过来持有到它的Record的引用。 这意味着不能使用Ext.util.JSON.encode 编码整个Record. 作为替换，可以使用 data 和 id 属性。

通过此构造器创建的Record继承了 Ext.data.Record的所有方法，列表如下。

公共属性

Property |  | Defined By
 | data : Object 一个对象哈希，描述了当前Record的数据。 Record定义中的每个字段名都是当前对象的一个属性名。 注意，除非你在Record定义中指定一个... 一个对象哈希，描述了当前Record的数据。 Record定义中的每个字段名都是当前对象的一个属性名。 注意，除非你在Record定义中指定一个 名为 "id"的 字段，此对象不会包含id属性。 | Record
 | dirty : Boolean 只读标记---如果当前Record被修改过为true. | Record
 | fields : Ext.util.MixedCollection 此属性存储在Record定义的prototype中。一个MixedCollection包含了为当前Record... 此属性存储在Record定义的prototype中。 一个MixedCollection包含了为当前Record 定义的Fields .只读。 | Record
 | id : Object 构造时指定的Record的唯一ID. | Record
 | json : Array|Object 如果当前Record是通过 ArrayReader 或者一个JsonReader 创建时才存在... 如果当前Record是通过 ArrayReader 或者一个JsonReader 创建时才存在。 对象数组，作为当前Record的数据源。 | Record
 | modified : Object 包含一个key和value的对象，存储所有被修改的字段的值... 包含一个key和value的对象，存储所有被修改的字段的值，如果没有字段被修改则为null. | Record
 | node : XMLElement 只有当前Record是通过 XmlReader 创建时才存在... 只有当前Record是通过 XmlReader 创建时才存在 。 XML元素，作为当前Record的数据源。 | Record
 | phantom : Boolean 当记录在服务端数据库尚不存在时为 true (参见markDirty). 任何拥有一个真实数据库主键作为id... 当记录在服务端数据库尚不存在时为 true (参见markDirty). 任何拥有一个真实数据库主键作为id属性的记录都不是一个“幻影”---它是真实的。 | Record
 | store : Ext.data.Store 当前Record所属的Ext.data.Store | Record

公共方法

Method Defined By
Record ( [ Object data ], [ Object id ] )
此构造函数不应该用来创建Record对象。 作为替代，使用create 创建一个Ext.data.Record的子类，配置了...

此构造函数不应该用来创建Record对象。 作为替代，使用create 创建一个Ext.data.Record的子类，配置了 它的字段要素信息。

产生的构造函数与当前的构造函数拥有相同的签名。

参数:
  • data : Object
    (可选) 一个对象，它的属性为新记录的字段提供了值。 如果没有指定， 将会为每个字段分配 defaultValue .
  • id : Object
    (可选) Record的id. id被Ext.data.Store 对象使用，Store拥有Record，用来索引Record集合 (这样，此id在每个store中应该是唯一的)。 如果没有指定， 幻影 Record将会使用 自动生成的id 进行创建。
返回值:
  • void
Record
Record.id ( Record rec ) : String
创建一个连续的id. 此方法典型被调用的情况是 当一条记录被创建 而...
创建一个连续的id. 此方法典型被调用的情况是 当一条记录被创建 而没有指定id. 返回的id拥有格式:{PREFIX}-{AUTO_ID}.
  • PREFIX : String

    Ext.data.Record.PREFIX (默认为 'ext-record')

  • AUTO_ID : String

    Ext.data.Record.AUTO_ID (内部默认为1)

参数:
  • rec : Record
    被创建的记录。 记录尚不存在(译者注：指在服务端)它是一个 幻影。
返回值:
  • String
    自动生成的字符串id <tt>"ext-record-i++'</tt>;
Record
beginEdit () : void
开始编辑。 当处于编辑模式时，不会有事件(例如 update 事件)被转发给所属的store. 另请参见 See also: endEdit 和...
开始编辑。 当处于编辑模式时，不会有事件(例如 update 事件)被转发给所属的store. 另请参见 See also: endEdit 和 cancelEdit .
参数:
  • 无。
返回值:
  • void
Record
cancelEdit () : void
取消在当前编辑操作中的所有改变。
取消在当前编辑操作中的所有改变。
参数:
  • 无。
返回值:
  • void
Record
commit ( [ Boolean silent ] ) : void
通常被拥有Record的 Ext.data.Store 调用。 提交从创建或者最后一次提交操作以来Record上所有的变化...
通常被拥有Record的 Ext.data.Store 调用。 提交从创建或者最后一次提交操作以来Record上所有的变化。

开发者应该订阅 Ext.data.Store.update 事件，以便让提交操作通知他们的代码。

参数:
  • silent : Boolean
    (可选)True将跳过把change事件通知给所属的store(默认为false)
返回值:
  • void
Record
copy ( [ String id ] ) : Record
创建当前Record的一份拷贝(克隆)。
创建当前Record的一份拷贝(克隆)。
参数:
  • id : String
    (可选)一个新Record id，默认为被拷贝记录的id。 参见 id . 如需使用新id创建一条幻影记录，请使用:
    var rec = record.copy(); // clone the record
Ext.data.Record.id(rec); // automatically generate a unique sequential id
返回值:
  • Record
Record
create ( Array o ) : Function
<静态> 为指定的Record结构创建一个构造函数。
<静态> 为指定的Record结构创建一个构造函数。
参数:
  • o : Array
    Field 定义对象数组。 通过此方法生成的构造函数可以用来创建新的Record实例。 数据对象必须包含根据 field Ext.data.Field.names 命名的属性。 示例用法:
    // create a Record constructor from a description of the fields
var TopicRecord = Ext.data.Record.create([ // creates a subclass of Ext.data.Record
    {name: 'title', mapping: 'topic_title'},
    {name: 'author', mapping: 'username', allowBlank: false},
    {name: 'totalPosts', mapping: 'topic_replies', type: 'int'},
    {name: 'lastPost', mapping: 'post_time', type: 'date'},
    {name: 'lastPoster', mapping: 'user2'},
    {name: 'excerpt', mapping: 'post_text', allowBlank: false},
    // In the simplest case, if no properties other than name are required,
    // a field definition may consist of just a String for the field name.
    'signature'
]);

// create Record instance
var myNewRecord = new TopicRecord(
    {
        title: 'Do my job please',
        author: 'noobie',
        totalPosts: 1,
        lastPost: new Date(),
        lastPoster: 'Animal',
        excerpt: 'No way dude!',
        signature: ''
    },
    id // optionally specify the id of the record otherwise one is auto-assigned

);
myStore.add(myNewRecord);
返回值:
  • Function
    一个构造函数，用来根据定义创建新Record. 构造函数与{@link #Record}拥有相同的函数签名。
Record
endEdit () : void
结束编辑操作。 如果有数据被修改，所属的store将会被通知 (例如，store的 update 事件将会被触发)。
结束编辑操作。 如果有数据被修改，所属的store将会被通知 (例如，store的 update 事件将会被触发)。
参数:
  • 无。
返回值:
  • void
Record
get ( String name ) : Object
获取指定名称字段 的值。
获取指定名称字段 的值。
参数:
  • name : String
    需要获取值的字段名称
返回值:
  • Object
    字段的值。
Record
getChanges () : Object
获取一个自从Record被创建或者提交以来被修改字段的哈希表。
获取一个自从Record被创建或者提交以来被修改字段的哈希表。
参数:
  • 无。
返回值:
  • Object
Record
isModified ( String fieldName ) : Boolean
如果所传递的字段名从加载或者最后一次提交以来被 修改过 ，返回 true.
如果所传递的字段名从加载或者最后一次提交以来被 修改过 ，返回 true.
参数:
  • fieldName : String
    Ext.data.Field#name
返回值:
  • Boolean
Record
isValid () : Boolean
默认返回false 如果记录中的任何 field 配置为Ext.data.Field.allowBlank = false 从一个Ext. isempty测试...
默认返回false 如果记录中的任何 field 配置为Ext.data.Field.allowBlank = false 从一个Ext. isempty测试 返回true.
参数:
  • 无。
返回值:
  • Boolean
Record
markDirty () : void
将当前Record标记为 dirty .此方法在添加 phantom 到一个 可写 store时在内部被调用...

将当前Record标记为 dirty .此方法在添加 幻影 到一个 可写 store时在内部被调用。

将记录标记为 dirty 导致幻影记录 被Ext.data.Store.getModifiedRecords 返回，当执行 store save 操作时，将会为它安排创建操作。

参数:
  • 无。
返回值:
  • void
Record
reject ( [ Boolean silent ] ) : void
通常被拥有Record的 Ext.data.Store 调用。 取消从创建或者最后一次提交操作以来Record上所有的变化...
通常被拥有Record的 Ext.data.Store 调用。 取消从创建或者最后一次提交操作以来Record上所有的变化。 修改的字段将会被回退到它们原先的值。

开发者应该订阅 Ext.data.Store.update 事件，以便让回退操作通知他们的代码。

参数:
  • silent : Boolean
    (可选)True将跳过把change事件通知给所属的store(默认为false)
返回值:
  • void
Record
set ( String name , String/Object/Array value ) : void
将字段名 设置为指定的值。示例用法....
将字段名 设置为指定的值。示例用法:
// record has a field named 'firstname'

var Employee = Ext.data.Record.create([
    {name: 'firstname'},
    ...
]);

// update the 2nd record in the store:
var rec = myStore.getAt(1);

// set the value (shows dirty flag):
rec.set('firstname', 'Betty');

// commit the change (removes dirty flag):
rec.commit();

// update the record in the store, bypass setting dirty flag,
// and do not store the change in the modified records

rec.data['firstname'] = 'Wilma'; // updates record, but not the view
rec.commit(); // updates the view
Notes:
  • 如果store拥有一个write并且 autoSave=true ，每次set()都会执行一个XHR到服务器。
  • 当使用set()时使用 beginEdit 避免触发store的 update 事件。
  • 使用 endEdit 触发store的 update 事件。
参数:
  • name : String
    需要设置的 字段的名称。
  • value : String/Object/Array
    需要设置值的字段。
返回值:
  • void
Record

公共事件

该类没有公共事件。


Class Ext.data.Request

包: | Ext.data
定义类的文件: | Request.js
类: | Request
继承自: | Object
一个简单的Request类，在data包内部使用，用来为DataProxy提供更一般化的远程请求。 TODO尚未实现。是现在 Ext.data.Store#execute

配置项

Config Options |  | Defined By
 | action : String | Request
 | callback : Function 当请求结束时调用的函数 | Request
 | params : Object HTTP请求参数 | Request
 | reader : Ext.data.DataReader DataReader实例，用来解析接受到的响应。 | Request
 | rs : Ext.data.Record[]/Ext.data.Record 请求所对应的Store记录集 | Request
 | scope : Object 回调函数的作用域 | Request

公共属性

该类没有公共属性。

公共方法

该类没有公共方法。

公共事件

该类没有公共事件。


Class Ext.data.Response

包: | Ext.data
定义类的文件: | Response.js
类: | Response
继承自: | Object
一个一般的响应类，用来规格化框架内部对响应的处理。

配置项

Config Options |  | Defined By
 | action : String Ext.data.Api.actions | Response
 | data : Array/Object | Response
 | message : String | Response
 | raw : Object 从服务器代码返回的原始响应 | Response
 | records : Ext.data.Record/Ext.data.Record[] 与Request操作有关 | Response
 | success : Boolean | Response

公共属性

该类没有公共属性。

公共方法

该类没有公共方法。

公共事件

该类没有公共事件。


Observable
    DataProxy
      ScriptTagProxy

Class Ext.data.ScriptTagProxy

包: | Ext.data
定义类的文件: | ScriptTagProxy.js
类: | ScriptTagProxy
继承自: | DataProxy
Ext.data.DataProxy的一个实现类， 从一个URL中读取数据对象， 此URL可能与当前运行的页面处于不同的域中。

注意，如果你从一个与当前页面不同的域中获取数据， 你必须使用该类，而不是HttpProxy。

通过ScriptTagProxy请求从服务器返回的内容， 必须是可执行的JavaScript源代码， 因为它将被用作<script>标签内部的源码。

为了使浏览器能处理返回的数据， 服务器必须调用回调函数包装数据对象， 其名称是通过ScriptTagProxy传递的。 以下是一个servlet的Java实例， 可以为ScriptTagProxy或者一个HttpProxy返回数据， 根据是否传递了回调函数名:

boolean scriptTag = false;
String cb = request.getParameter("callback");
if (cb != null) {
    scriptTag = true;
    response.setContentType("text/javascript");
} else {
    response.setContentType("application/x-json");
}
Writer out = response.getWriter();
if (scriptTag) {
    out.write(cb + "(");
}
out.print(dataBlock.toJsonString());
if (scriptTag) {
    out.write(");");
}

以下是一个PHP实例，做相同的事:

            $callback = $_REQUEST['callback'];
// 创建输出对象。
$output = array('a' => 'Apple', 'b' => 'Banana');
//start output
if ($callback) {
    header('Content-Type: text/javascript');
    echo $callback . '(' . json_encode($output) . ');';
} else {
    header('Content-Type: application/x-json');
    echo json_encode($output);
}

以下是一个ASP.Net代码，做相同的事:

String jsonString = "{success: true}";
String cb = Request.Params.Get("callback");
String responseString = "";
if (!String.IsNullOrEmpty(cb)) {
    responseString = cb + "(" + jsonString + ")";
} else {
    responseString = jsonString;
}
Response.Write(responseString);

配置项

Config Options Defined By
api : Object
指定 调用CRUD操作的方法： "read", "create", "update" 和 "destroy"的url。 默认为：...
指定 调用CRUD操作的方法： "read", "create", "update" 和 "destroy"的url。 默认为：
api: {
    read    : undefined,
    create  : undefined,
    update  : undefined,
    destroy : undefined
}

url根据被执行的操作[load|create|save|destroy]而创建， 使用相应的 api 参数，或者如果没有定义时默认为配置的 Ext.data.Store. url。

例如:

api: {
    load :    '/controller/load',
    create :  '/controller/new',  // 服务器必须返回新记录的idProperty
    save :    '/controller/update',
    destroy : '/controller/destroy_action'
}

// 作为第二选择，可以使用对象形式指定每个API-action
api: {
    load: {url: 'read.php', method: 'GET'},
    create: 'create.php',
    destroy: 'destroy.php',
    save: 'update.php'
}

对于给定的CRUD，如果指定的URL为undefined， CRUD操作的请求会被重定向到所配置的 url 上。

注意： 如果需要动态修改一个操作的URL，对应的API属性 必须在操作的请求发出之前进行修改， 修改时使用对应的before-action事件。 例如需要修改指定给load操作的URL：

// 修改操作的url
myStore.on({
    beforeload: {
        fn: function (store, options) {
            // 使用setUrl
                                    方法，*仅仅*为当前请求改变URL。
            store.proxy.setUrl('changed1.php');
            // 将第二个可选参数设置为true以便改变当前URL参数，
            // 将当前URL应用到所有后来的请求。
            store.proxy.setUrl('changed1.php', true);
            // 变更所要完成的代理API，使用公共
            // 方法 setApi
                                    。
            store.proxy.setApi('read', 'changed2.php');
            // 或者使用个配置对象设置整个API。
            // 当使用配置对象选项时，你必须重新定义整个
            // API -- 而不仅仅是一个特定的操作。
            store.proxy.setApi({
                read    : 'changed_read.php',
                create  : 'changed_create.php',
                update  : 'changed_update.php',
                destroy : 'changed_destroy.php'
            });
        }
    }
});

DataProxy
callbackParam : String
传递给服务器的参数名， 告诉服务器load调用所设置的用来处理返回数据的回调函数名称。...
传递给服务器的参数名， 告诉服务器load调用所设置的用来处理返回数据的回调函数名称。默认为"callback"。

服务端的处理必须读取此参数的值， 并且生成输出的javascript，它调用此名字的函数 并将数据对象作为唯一的参数传递。

ScriptTagProxy
doRequest : Function
抽象方法，所有子类都必须实现此方法。 注意: 只应该被需要自定义代理的开发者使用。 ...
抽象方法，所有子类都必须实现此方法。 注意: 只应该被需要自定义代理的开发者使用。 (例如: HttpProxy.doRequest, DirectProxy.doRequest)。
DataProxy
listeners : Object
一个包含一个或多个事件处理器的配置对象，会在初始化的时候被添加到目标对象上...

一个包含一个或多个事件处理器的配置对象，会在初始化的时候被添加到目标对象上。 该配置对象应该是一个有效的监听器配置对象就像 addListener例子中指定的一样可一次附加多个处理器。

ExtJs Components上的DOM事件

一些 ExtJs Component 类导出时会选择一些DOM事件(例如 "click", "mouseover" 等等), 这通常只是在有额外的值可以被添加时发生。例如DataView类的 click事件会传递被点击的节点。也可以直接在Component的HTMLElementevent上访问DOM事件，但必需在Component被渲染后监听器才能添加到Element 上。可以按照以下步骤添加插件:

// 插件会用一个监听器配置对象进行配置。
//该组件会被添加到所有处理方法的参数列表上。
Ext.DomObserver = Ext.extend(Object, {
    constructor: function(config) {
        this.listeners = config.listeners ? config.listeners : config;
    },

    // 组件将自己传递进了插件的初始化方法里
    init: function(c) {
        var p, l = this.listeners;
        for (p in l) {
            if (Ext.isFunction(l[p])) {
                l[p] = this.createHandler(l[p], c);
            } else {
                l[p].fn = this.createHandler(l[p].fn, c);
            }
        }

        // 渲染后立即添加监听器到元素上
        c.render = c.render.createSequence(function() {
            var e = c.getEl();
            if (e) {
                e.on(l);
            }
        });
    },

    createHandler: function(fn, c) {
        return function(e) {
            fn.call(this, e, c);
        };
    }
});

var combo = new Ext.form.ComboBox({

    // 元素被点击后折叠
    plugins: [ new Ext.DomObserver({
        click: function(evt, comp) {
            comp.collapse();
        }
    })],
    store: myStore,
    typeAhead: true,
    mode: 'local',
    triggerAction: 'all'
});

Observable
nocache : Boolean
默认为true。 通过向请求中添加一个独立的参数，禁用缓存。
ScriptTagProxy
onRead : Function
抽象方法，所有子类都必须实现此方法。 注意: 只应该被需要自定义代理的开发者使用。...
抽象方法，所有子类都必须实现此方法。 注意: 只应该被需要自定义代理的开发者使用。 read 操作 的回调函数。
DataProxy
onWrite : Function
抽象方法，所有子类都必须实现此方法。 注意: 只应该被需要自定义代理的开发者使用。...
抽象方法，所有子类都必须实现此方法。 注意: 只应该被需要自定义代理的开发者使用。 create, update和destroy 操作 的回调函数。
DataProxy
restful : Boolean
默认为 false。 设置为true以便用一种安静(RESTful)模式进行操作。...

默认为 false。 设置为true以便用一种安静(RESTful)模式进行操作。

注意： 如果被插入的 Ext.data.Store 被设置为 restful: true ， 此参数将会被自动设置为true。 如果Store是RESTful的， 没有必要在代理上设置此配置。

RESTful型的实现允许服务端框架 根据HTTP方法自动发送操作到一个url， 例如:

store: new Ext.data.Store({
    restful: true,
    proxy: new Ext.data.HttpProxy({url:'/users'}); // all requests sent to /users
    ...
)}
如果代理的配置项中没有指定 api 所有请求都将被集中到一个单独的RESTful url (/users)， 这样服务端框架可以监测HTTP Method并做出相应的操作:
Method   url        action
POST     /users     create
GET      /users     read
PUT      /users/23  update
DESTROY  /users/23  delete

如果设置为true， 非模拟的 记录的id 将会被添加到url之后。 某些MVC(例如Ruby on Rails, Merb和 Django)支持 基于url的片段，URL中的片段遵守 Model-View-Controller 模式:

someSite.com/controller/action/id
典型情况下url的片段:
  • 第一段：描述了应该被调用的控制类。
  • 第二段： 描述了需要调用的类函数，或者方法。
  • 第三段： 描述了ID(典型情况下传递给方法的参数)。

附加信息参见 Ext.data.DataProxy.api 。

DataProxy
timeout : Number
等待响应的毫秒数。默认为30秒。
ScriptTagProxy
url : String
从其中请求数据对象的URL。
ScriptTagProxy

公共属性

该类没有公共属性。

公共方法

Method Defined By
ScriptTagProxy ( Object config )
参数:
  • config : Object
    一个配置对象。
返回值:
  • void
ScriptTagProxy
abort () : void
中断当前到服务器的请求。
中断当前到服务器的请求。
参数:
  • 无。
返回值:
  • void
ScriptTagProxy
addEvents( Object|String o, string Optional. ) : void
添加指定的事件到事件列表上，事件会被该Observable触发。
添加指定的事件到事件列表上，事件会被该Observable触发。
参数:
  • o : Object|String
    以事件名作为属性true作为值的对象 或者当多个事件名被分开的传递时则为第一个事件名。
  • Optional. : string
    事件名被分开的传递时则为事件名。 用法:
    this.addEvents('storeloaded', 'storecleared');
返回值:
  • void
Observable
addListener( String eventName, Function handler, [Object scope], [Object options] ) : void
给对象添加事件处理器。
给对象添加事件处理器。
参数:
  • eventName : String
    监听的事件名。
  • handler : Function
    事件调用的方法
  • scope : Object
    （可选）处理方法执行的作用域 (this的引用 reference)。 如果被忽略。默认为触发事件的对象。
  • options : Object
    （可选）包含处理器配置和属性的对象。 可能包含以下的属性:
    • scope : Object
      处理方法执行的作用域(this的引用) 。 如果被忽略。默认为触发事件的对象。
    • delay : Number
      在触发事件后延迟调用处理器的毫秒数。
    • single : Boolean
      如果为True则添加一个处理器来处理下一次的事件触发（仅一次），然后移除自己。
    • buffer : Number
      使得处理器延迟指定毫秒数后预定的运行在 一个Ext.util.DelayedTask中 。 如果事件在时间内再一次被触发，原始的处理器不会被调用，但是新的处理器会预定的在他的位置上。
    • target : Observable
      如果事件在目标的Observable上触发则仅仅调用处理器， 否则 事件会从子类的Observable上冒泡

    组合选项
    使用这些选项参数,可能会组合出不同类型的监听器：

    一个延迟的，一次性的监听器。

    myDataView.on('click', this.onClick, this, {
single: true,
delay: 100
});

    一次调用附加多个处理器
    该方法同样支持传递一个包含指定的多个处理器的属性的配置对象参数。

    myGridPanel.on({
'click' : {
    fn: this.onClick,
    scope: this,
    delay: 100
},
'mouseover' : {
    fn: this.onMouseOver,
    scope: this
},
'mouseout' : {
    fn: this.onMouseOut,
    scope: this
}
});

    或者一个简写的语法：

    myGridPanel.on({
'click' : this.onClick,
'mouseover' : this.onMouseOver,
'mouseout' : this.onMouseOut,
 scope: this
});
返回值:
  • void
Observable
destroy () : void
通过清除所有事件监听器、取消所有活动的请求，销毁代理。
通过清除所有事件监听器、取消所有活动的请求，销毁代理。
参数:
  • 无。
返回值:
  • void
DataProxy
doRequest ( String action , Ext.data.Record/Ext.data.Record[] rs , Object params , Ext.data.DataReader reader , Function callback , Object scope , Object arg ) : void
DataProxy#doRequest的HttpProxy实现
DataProxy#doRequest的HttpProxy实现
参数:
  • action : String
  • rs : Ext.data.Record/Ext.data.Record[]
    如果操作是read，rs将会为null
  • params : Object
    一个包含参数的对象，它将被用作发送到远程服务器请求的 HTTP参数。
  • reader : Ext.data.DataReader
    Reader对象，它把数据对象转换为Ext.data.Record数据块。
  • callback : Function
    一个函数，被传递Ext.data.Record数据块。 此函数必须被传递:
    • Record数据块对象
    • 来自load函数的"arg"参数
    • 一个布尔型的操作成功标志位
  • scope : Object
    作用域( this 引用) 回调函数将会在其中被执行。 默认为浏览器window对象。
  • arg : Object
    一个可选参数，将会作为第二个参数被传递给回调函数。
返回值:
  • void
ScriptTagProxy
enableBubble( String/Array events ) :void
是否现在使得事件会被该Observable触发并调用 this.getBubbleTarget()方法在拥有者的继承树...

是否现在使得事件会被该Observable触发并调用 this.getBubbleTarget()方法在拥有者的继承树中冒泡。Observable的基础类中没有该方法的实现。

该方法一般被Ext.Components用来冒泡事件到拥有者的容器。参看Ext.Component.getBubbleTarget默认的实现 在Ext.Component中返回组件的直接拥有者。但是如果需要的是一个已知的目标，该方法可以被重写来更快的访问需求的目标。

例子:

Ext.override(Ext.form.Field, {
    // 添加方法到Field的initComponent上改变事件为冒泡
    initComponent : Ext.form.Field.prototype.initComponent.createSequence(function() {
        this.enableBubble('change');
    }),

    // 我们知道我们想让Field的事件冒泡到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() {
            // 如果样式被修改标题会变红。
            myForm.header.setStyle('color', 'red');
        }
    }
});
参数:
  • events : String/Array
    冒泡的事件名，或事件名数组
返回值:
  • void
Observable
fireEvent( String eventName, Object... args ) : Boolean
用传入的参数触发指定的事件 (减去事件名)。 一个事件可以被设置为冒泡 Obse...

用传入的参数触发指定的事件 (减去事件名)。

一个事件可以被设置为冒泡到Observable父类继承树(参看 Ext.Component.getBubbleTarget) 调用enableBubble实现。

参数:
  • eventName : String
    触发的事件名。
  • args : Object...
    传递给处理器的可变长度参数。
返回值:
  • Boolean
    如果有任何的处理器返回false则返回false，否则返回true。
Observable
hasListener( String eventName ) : Boolean
检测对象是否包含指定事件的任何监听器
检测对象是否包含指定事件的任何监听器
参数:
  • eventName : String
    检测的事件名
返回值:
  • Boolean
    如果事件被监听则为true，否则为false
Observable
isApiAction ( String [Ext.data.Api.CREATE|READ|UPDATE|DESTROY]} ) : Boolean
如果指定的action 是作为一个单独的action在api-config.request中被定义的， 返回true。 如果所有的API-actions...
如果指定的action 是作为一个单独的action在api-config.request中被定义的， 返回true。 如果所有的API-actions 都被发送到唯一的url， 那么xaction参数不是必须的。 但是，如果没有定义api并且所有代理action被发送到DataProxy#url， 服务端需要xaction参数为CRUD操作执行 一次到相应代码的转换。
参数:
  • [Ext.data.Api.CREATE|READ|UPDATE|DESTROY]} : String
    action
返回值:
  • Boolean
DataProxy
load ( Object params , Object reader , Object callback , Object scope , Object arg ) : void
已过时 load方法使用旧的方法签名。 推荐的方法参见{@doRequest}。
已过时 load方法使用旧的方法签名。 推荐的方法参见{@doRequest}。
参数:
  • params : Object
  • reader : Object
  • callback : Object
  • scope : Object
  • arg : Object
返回值:
  • void
DataProxy
on( String eventName, Function handler, [Object scope], [Object options] ) : void
给对象添加事件处理器 (addListener的简写形式)
给对象添加事件处理器 (addListener的简写形式。)
参数:
  • eventName : String
    监听的事件类型
  • handler : Function
    事件调用的方法
  • scope : Object
    （可选）处理方法执行时的作用域 (this 的引用)。 如果被忽略。默认为触发事件的对象。
  • options : Object
    可选 包含处理器配置的对象。
返回值:
  • void
Observable
onRead ( String action , Object trans , Object res ) : void
read操作的回调函数
read操作的回调函数
参数:
  • action : String
    [Ext.data.Api.actions.create|read|update|destroy]
  • trans : Object
    请求事务对象
  • res : Object
    服务器的响应
返回值:
  • void
ScriptTagProxy
onWrite ( String action , Object trans , Object res ) : void
write操作的回调函数
write操作的回调函数
参数:
  • action : String
    [Ext.data.Api.actions.create|read|update|destroy]
  • trans : Object
    请求事务对象
  • res : Object
    服务端响应
返回值:
  • void
ScriptTagProxy
purgeListeners() : void
移除对象上所有的监听器
移除对象上所有的监听器
参数:
  • 无。
返回值:
  • void
Observable
relayEvents( Object o, Array events ) : void
从指定的Observable上传递选择的事件就好像被当前对象触发一样。
从指定的Observable上传递选择的事件就好像被当前对象触发一样。
参数:
  • o : Object
    该Observable上的事件被当前对象传递。
  • events : Array
    传递的数组名。
返回值:
  • void
Observable
removeListener( String eventName, Function handler, [Object scope] ) : void
删除一个事件处理器。
删除一个事件处理器。
参数:
  • eventName : String
    处理器关联的事件类型。
  • handler : Function
    移除的处理器。 这应该是传递到addListener里的方法的引用。
  • scope : Object
    （可选）处理器指定的初始作用域。
返回值:
  • void
Observable
request ( String action , Ext.data.Record/Ext.data.Record[]/null rs , Object params , Ext.data.DataReader reader , Function callback , Object scope , Object options ) : void
所有代理操作都通过此方法执行。 自动触发"before" + action事件。
所有代理操作都通过此方法执行。 自动触发"before" + action事件。
参数:
  • action : String
    操作名称
  • rs : Ext.data.Record/Ext.data.Record[]/null
    当是'load'操作时此值为null
  • params : Object
  • reader : Ext.data.DataReader
  • callback : Function
  • scope : Object
    作用域 ( this 引用) 回调函数将会在其中被执行。 默认为Proxy对象。
  • options : Object
    所有为操作指定的选项(示例参见 Ext.data.Store.load。
返回值:
  • void
DataProxy
resumeEvents() : void
重新开始触发事件。(参见suspendEvents) 如果事件以queueSuspended参数被挂起，则在事件被挂起时 ...
重新开始触发事件。(参见 suspendEvents) 如果事件以queueSuspended 参数被挂起，则在事件被挂起时触发的事件会被传递到所有的监听器上
参数:
  • 无。
返回值:
  • void
Observable
setApi ( String/Object api , String/Function url ) : void
重定义代理API或则一个API的单次操作。 可以使用两个方法签名调用。...

重定义代理API或则一个API的单次操作。 可以使用两个方法签名调用。

如果使用一个对象作为唯一的参数进行调用， 此对象在entire API中重新定义， 例如:

proxy.setApi({
    read    : '/users/read',
    create  : '/users/create',
    update  : '/users/update',
    destroy : '/users/destroy'
});

如果使用两个参数进行调用， 调用那个操作时，第一个参数必须是一个字符串，它指定需要重定义的API操作， 同时第二个参数必须是URL( 或者是一个函数，如果使用DirectProxy)， 例如:

                                proxy.setApi(Ext.data.Api.actions.read, '/users/new_load_url');
参数:
  • api : String/Object
    一个API描述对象，或者是action名。
  • url : String/Function
    调用action的URL( 或者是一个函数，如果使用DirectProxy)。
返回值:
  • void
DataProxy
suspendEvents( Boolean queueSuspended ) : void
暂停触发所有的事件。 (参看resumeEvents)
暂停触发所有的事件。（参看 resumeEvents)
参数:
  • queueSuspended : Boolean
    如果传递为true则排列好暂停的事件使得在调用 resumeEvents 后再触发它们，而不是抛弃所有暂停的事件。
返回值:
  • void
Observable
un( String eventName, Function handler, [Object scope] ) : void
删除一个事件处理器(removeListener方法的简写形式)
删除一个事件处理器(removeListener方法的简写形式。)
参数:
  • eventName : String
    处理器关联的事件类型
  • handler : Function
    被删除的处理器 这应该是传入 addListener 中的方法的引用。
  • scope : Object
    （可选）为处理器指定的初始作用域。
返回值:
  • void
Observable

公共事件

Event Defined By
beforeload : ( DataProxy this , Object params )
在发送请求获取数据对象之前触发。
在发送请求获取数据对象之前触发。
监听器将会以如下的参数格式被调用:
  • this : DataProxy
    发送请求的代理
  • params : Object
    传递给 request 函数的参数对象
DataProxy
beforewrite : ( DataProxy this , String action , Record/Record[] rs , Object params )
当为如下操作Ext.data.Api.actions.create|update|destroy 产生一个请求之前触发。除了通过...

当为如下操作Ext.data.Api.actions.create|update|destroy 产生一个请求之前触发。

除了通过发出此事件的DataProxy实例触发之外， 此事件也通过Ext.data.DataProxy 类触发， 通过在Ext.data.Proxy类自身绑定一个监听器， 允许集中处理来自所有 DataProxie的beforewrite事件。

监听器将会使用如下参数格式被调用:
  • this : DataProxy
    请求的代理
  • action : String
    [Ext.data.Api.actions.create|update|destroy]
  • rs : Record/Record[]
    需要create|update|destroy的Record(s)。
  • params : Object
    请求的 params 对象。 编辑 params 以便向请求中添加参数。
DataProxy
exception : ( DataProxy this , String type , String action , Object options , Object response , Mixed arg )
在进行远程请求时，如果在Proxy内部发生异常，触发此事件。 此事件通过对应的....

在进行远程请求时，如果在Proxy内部发生异常，触发此事件。 此事件通过对应的 Ext.data.Store . exception 进行转发，所以，所有Store的实例都可以监听此事件。

除了通过发出此事件的DataProxy实例触发之外， 此事件也通过Ext.data.DataProxy 类触发， 通过在Ext.data.Proxy类自身绑定一个监听器， 允许集中处理来自所有 DataProxie的exception事件。

此事件可以因为如下两个原因之一而被触发:

  • remote-request failed :
    服务器没有返回状态码=== 200
  • remote-request succeeded :
    远程请求已经成功，但是reader无法读取响应。 这意味着服务器返回了数据， 但是配置的Rader在读取响应时抛出了异常。 这种情况下，此事件被触发并且捕捉到的错误 将会被一起传递到此事件中。

根据第二个参数type [remote|response]， 此事件在两种不同的上下文触发。 在两种上下文中，前四个参数是一样的--- 只有最后两个参数不同。

监听器将会以如下的参数格式被调用:
  • this : DataProxy
    发出请求的代理
  • type : String

    此参数的值可以是'response'或者'remote'。

    • 'response' :

      服务器返回了一个无效的响应: 要么是404, 500或者响应的元数据 与DataReader中所定义的不符 (例如: root, idProperty, successProperty)。

    • 'remote' :

      服务器返回了一个有效的 响应，有一个参数successProperty === false. 此响应可以包含一个来自服务器的出错信息。 例如， 用户认证/授权(authentication/authorization)失败 ，或者发生了数据库校验错误。

  • action : String
    操作名称(参见 Ext.data.Api.actions。
  • options : Object
    在request 中为操作指定的配置项。
  • response : Object

    此参数的值依赖于 type 参数的值：

    • 'response' :

      原始的浏览器响应对象(例如: XMLHttpRequest)

    • 'remote' :

      来自服务器的已经解码的响应对象。

  • arg : Mixed

    此参数的类型和值依赖于 type 参数的值：

    • 'response' : Error

      如果配置的Reader无法读取数据，此参数为JavaScript Error对象。 如果远程请求返回success===false，此参数将会为null。

    • 'remote' : Record/Record[]

      只有在action是一个write action (Ext.data.Api.actions.create|update|destroy)时 才存在此参数

DataProxy
load : ( DataProxy this , Object o , Object options )
在load方法地方回调函数被调用之前触发。
在load方法地方回调函数被调用之前触发。
监听器将会使用如下的参数格式被调用:
  • this : DataProxy
    请求操作的代理
  • o : Object
    请求的事务对象
  • options : Object
    回调函数的options属性 ，被传递给 request 函数。
DataProxy
loadexception : ( Object this , Object options , Object arg , Error e )
已过时推荐'exception'事件。 如果在加载数据的过程中Proxy中发生了异常，此事件被触发。...
已过时推荐'exception'事件。 如果在加载数据的过程中Proxy中发生了异常，此事件被触发。 此事件可能因为一到两个原因被触发:
  • load调用超时。 这以为着load的回调函数没有在 timeout 指定的时间内执行完成。 这种情况下，此事件将被提起并且第四个参数 (read error)将会是null。
  • 加载成功了，但是reader无法读取响应。 这意为着服务器返回了数据， 但是在配置的Reader读取数据时抛出了一个错误。 这种情况下，此事件会被提起，并且捕捉到的错误会被当作 此事件的第四个参数一起传递。
注意，此事件也会通过 Ext.data.Store 转发，所以你可以直接在任何Store的实例上监听它。
监听器将会使用如下的参数格式被调用:
  • this : Object
  • options : Object
    指定的加载选项( 细节参见 load )。 如果load调用超时，此参数将会为null。
  • arg : Object
    传递给 load 方法的回调函数arg对象
  • e : Error
    如果配置的Reader无法读取数据，此参数为捕获到的JavaScript Error对象。 如果远程请求返回success: false，此参数将会为null。
ScriptTagProxy
write : ( DataProxy this , String action , Object data , Object response , Record/Record[] rs , Object options )
在请求的回调函数被调用之前触发。作为补充， 通过发出事件DataProxy实例触发...

在请求的回调函数被调用之前触发。

除了通过发出此事件的DataProxy实例触发之外， 此事件也通过Ext.data.DataProxy 类触发， 通过在Ext.data.Proxy类自身绑定一个监听器， 允许集中处理来自所有 DataProxie的write事件。

监听器将会使用如下的参数格式被调用:
  • this : DataProxy
    发送请求的代理
  • action : String
    [Ext.data.Api.actions.create|upate|destroy]
  • data : Object
    从服务器的响应中提取的数据对象
  • response : Object
    来自服务器被解码好的响应
  • rs : Record/Record[]
    来自Store的Record(s)
  • options : Object
    回调函数的options 属性， 被传递给 request 函数
DataProxy


Class Ext.data.SortTypes

包: | Ext.data
定义类的文件: | SortTypes.js
类: | SortTypes
继承自: | Object

该类是一个单例，不应该直接创建实例。

公共属性

Property |  | Defined By
 | stripTagsRE : RegExp 用来去除标签的正则 | SortTypes

公共方法

Method Defined By
asDate ( Mixed s ) : Number
日期排序
日期排序
参数:
  • s : Mixed
    被转换的值
返回值:
  • Number
    作比较的值
SortTypes
asFloat ( Mixed s ) : Float
浮点值排序
浮点值排序
参数:
  • s : Mixed
    被转换的值
返回值:
  • Float
    作比较的值
SortTypes
asInt ( Mixed s ) : Number
整数排序
整数排序
参数:
  • s : Mixed
    被转换的值
返回值:
  • Number
    作比较的值
SortTypes
asText ( Mixed s ) : String
去除所有HTML标签，仅对文本进行排序
去除所有HTML标签，仅对文本进行排序
参数:
  • s : Mixed
    被转换的值
返回值:
  • String
    作比较的值
SortTypes
asUCString ( Mixed s ) : String
大小写不敏感的字符串
大小写不敏感的字符串
参数:
  • s : Mixed
    被转换的值
返回值:
  • String
    作比较的值
SortTypes
asUCText ( Mixed s ) : String
去掉所有HTML标签，仅对文本进行排序---大小写敏感
去掉所有HTML标签，仅对文本进行排序---大小写敏感
参数:
  • s : Mixed
    被转换的值
返回值:
  • String
    作比较的值
SortTypes
none ( Mixed s ) : Mixed
默认排序，什么事情都不做。
默认排序，什么事情都不做。
参数:
  • s : Mixed
    被转换的值
返回值:
  • Mixed
    作比较值
SortTypes

公共事件

该类没有公共事件。


Error
    Store.Error

Class Ext.data.Store.Error

包: | Ext.data
定义类的文件: | Store.js
类: | Store.Error
继承自: | Error
Store Error extension.

公共属性

该类没有公共属性。

公共方法

Method Defined By
getMessage () : String
getMessage
getMessage
参数:
  • 无。
返回值:
  • String
Error
getName () : String
getName
getName
参数:
  • 无。
返回值:
  • String
Error
toJson () : String
toJson
toJson
参数:
  • 无。
返回值:
  • String
Error

公共事件

该类没有公共事件。


Observable
    Store

Class Ext.data.Store

包: | Ext.data
定义类的文件: | Store.js
类: | Store
子类: | ArrayStore, DirectStore, GroupingStore, JsonStore, XmlStore
继承自: | Observable

Store类包装了一个对 Record 对象的客户端缓存，它为Component提供输入数据，例如 GridPanel、 ComboBox 或者 DataView。

获取数据

Store对象可以使用如下方式访问一条数据:

  • DataProxy 的 可配置实现
  • 将会自动传入数据的 data
  • loadData 手动传入数据

读取数据

Store内部并不知道数据对象的格式 (它可能是一个Array, XML或者JSON)。 Store对象使用一个 DataReader 类的 可配置实现 从数据对象创建 Record 的实例。

Store的类型

Store存在多种实现， 它们可以定制成与指定的DataReader实现类配合使用。 这里有一个使用ArrayStore的例子，它隐含创建 一个与Array数据对象相应的reader。

var myStore = new Ext.data.ArrayStore({
    fields: ['fullname', 'first'],
    idIndex: 0 // 每条记录的id将会是第一个元素
});

对于特定的实现， 可以创建一个基本的Ext.data.Store ，然后配制成需要的形式:

// 创建一个Record 构造器:
var rt = Ext.data.Record.create([
    {name: 'fullname'},
    {name: 'first'}
]);
var myStore = new Ext.data.Store({
    // 隐含创建reader
    reader: new Ext.data.ArrayReader(
        {
            idIndex: 0  // 每条记录的id将会是第一个元素
        },
        rt // 记录的类型
    )
});

向store中加载一些数据 (注意，数据对象是与reader对应的数组):

var myData = [
    [1, 'Fred Flintstone', 'Fred'],  //注意记录的id将会是第一个元素
    [2, 'Barney Rubble', 'Barney']
];
myStore.loadData(myData);

记录被缓存并可以通过存取器(译者注：指getter/setter)访问。 一个向store中添加记录的例子:

var defaultData = {
    fullname: 'Full Name',
    first: 'First Name'
};
var recId = 100; // 为记录提供一个唯一的id
var r = new myStore.recordType(defaultData, ++recId); // 创建 新记录
myStore.insert(0, r); // 向store中插入一条 新记录(另请参见 add)

写数据

Ext版本3新增， 使用新增的 DataWriter 与RESTful features(译者注：安静风格，指不触发事件，自动在后台执行而不打扰用户。) 配合创建一个自动 Writable Store(可写的Store)。

配置项

Config Options Defined By
autoDestroy : Boolean
如果此参数为true，当绑定此store的组件被销毁之后此store也会...
如果此参数为true，当绑定此store的组件被销毁之后此store也会被销毁 (默认为 false)。

注意: 当store被仅仅绑定到一个组件时，应该把此参数设置成true。

Store
autoLoad : Boolean/Object
如果没有指定 data 参数，并且 autoLoad参数为 true或者为一个Object， store的...
如果没有指定 data 参数，并且 autoLoad参数为 true或者是一个对象(Object)， store的 load 方法将会在创建之后自动被调用。 如果autoLoad的值是一个对象(Object)， 此对象将会被传递给store的 load 方法。
Store
autoSave : Boolean
默认为true 将导致在一条记录被修改(例如: 变脏('dirty'))之后store自动地把记录...

默认为true 将导致在一条记录被修改(例如: 变脏('dirty'))之后store自动地把记录 save 到服务器端。 指定为false可以手动把所有修改的记录 save 到服务端。

注意: CRUD操作将会作为单独的请求发送。

Store
baseParams : Object
此参数的描述参见 corresponding 配置项 。 如需修改此参数，参见 setBaseParam 。
此参数的描述参见 corresponding 配置项 。 如需修改此参数，参见 setBaseParam 。
Store
batch : Boolean
默认为 true (除非 restful:true )。 每个CRUD操作的多次请求 (CREATE, READ, UPDATE...

默认为 true (除非 restful:true )。 每个CRUD操作的多次请求 (CREATE, READ, UPDATE 和 DESTROY)将会被合在一起并且作为一次事务发送出去。 只有在 autoSave 参数被设置成 false时应用。

如果Store是安静模式(RESTful)，DataProxy也是安静的(RESTful)， 这样会为每条记录创建一个独立的事务。

Store
data : Array
一个内嵌的数据对象，可以被 reader 读取。 典型情况下，指定此选项，或者 url 选项。
Store
defaultParamNames : Object
为 paramNames 提供默认值。 如需在全局范围修改所有store的参数...
为 paramNames 提供默认值。 如需在全局范围修改所有store的参数，必须在store的prototype上 修改此对象。
Store
listeners : Object
一个包含一个或多个事件处理器的配置对象，会在初始化的时候被添加到目标对象上...

一个包含一个或多个事件处理器的配置对象，会在初始化的时候被添加到目标对象上。 该配置对象应该是一个有效的监听器配置对象就像 addListener例子中指定的一样可一次附加多个处理器。

ExtJs Components上的DOM事件

一些 ExtJs Component 类导出时会选择一些DOM事件(例如 "click", "mouseover" 等等), 这通常只是在有额外的值可以被添加时发生。例如DataView类的 click事件会传递被点击的节点。也可以直接在Component的HTMLElementevent上访问DOM事件，但必需在Component被渲染后监听器才能添加到Element 上。可以按照以下步骤添加插件:

// 插件会用一个监听器配置对象进行配置。
//该组件会被添加到所有处理方法的参数列表上。
Ext.DomObserver = Ext.extend(Object, {
    constructor: function(config) {
        this.listeners = config.listeners ? config.listeners : config;
    },

    // 组件将自己传递进了插件的初始化方法里
    init: function(c) {
        var p, l = this.listeners;
        for (p in l) {
            if (Ext.isFunction(l[p])) {
                l[p] = this.createHandler(l[p], c);
            } else {
                l[p].fn = this.createHandler(l[p].fn, c);
            }
        }

        // 渲染后立即添加监听器到元素上
        c.render = c.render.createSequence(function() {
            var e = c.getEl();
            if (e) {
                e.on(l);
            }
        });
    },

    createHandler: function(fn, c) {
        return function(e) {
            fn.call(this, e, c);
        };
    }
});

var combo = new Ext.form.ComboBox({

    // 元素被点击后折叠
    plugins: [ new Ext.DomObserver({
        click: function(evt, comp) {
            comp.collapse();
        }
    })],
    store: myStore,
    typeAhead: true,
    mode: 'local',
    triggerAction: 'all'
});

Observable
paramNames : Object
一个包含多个属性的对象，指定了分页和排序参数的名称，在加载数据时被传递给...

一个包含多个属性的对象，指定了分页和排序参数的名称，在加载数据时被传递给 远程服务器。 默认情况下，此对象拥有如下格式:

{
    start : 'start',  // 指定起始行的参数名
    limit : 'limit',  // 指定返回数据条数的参数名
    sort : 'sort',    // 指定排序字段的参数名
    dir : 'dir'       // 指定排序方向的参数名
}

服务器必须根据收到的这些参数名创建所请求的数据块。 如果需要不同的参数名称，可以使用配置项覆盖这些参数。

绑定到当前Store的 PagingToolbar ，使用此参数指定 它的requests 中的参数名称。

Store
proxy : Ext.data.DataProxy
DataProxy 对象，它提供对数据对象的访问。 参见 url 。
Store
pruneModifiedRecords : Boolean
此值为true将在 store被加载或者一条记录被删除时 清除所有记录的修改信息(默认为...
此值为true将在 store被加载或者一条记录被删除时 清除所有记录的修改信息(默认为 false)。参见 getModifiedRecords 的访问函数(指getter/setter)以获得修改的记录。
Store
reader : Ext.data.DataReader
Reader 对象负责处理数据对象并返回一个 Ext.data.Record 对象数组，它们被使用其...
Reader 对象负责处理数据对象并返回一个 Ext.data.Record 对象数组，它们被使用其 id 属性作key进行缓存。
Store
remoteSort : boolean
如果此参数为true，处理排序操作的方式是，通过请求 Proxy 提供一个数据已经排好顺序的版本...
如果此参数为true，处理排序操作的方式是，通过请求 Proxy 提供一个数据已经排好顺序的版本， 而不是在缓存中对记录进行排序(默认为 false)。

如果remoteSort 为 true 那么在一个Grid Column的 header 被点击时，将会从服务器请求当前页面，并且在 params 中添加如下两个参数:

  • sort : String

    需要排序的字段名 (就像在Record的 Field definition中指定的那样)。

  • dir : String

    排列的方向，'ASC' 或者 'DESC' (大小写敏感)。

Store
restful : Boolean
默认为false。 设置为true 将会使Store和Proxy的操作以安静(RESTful)的状态进行...
默认为false。 设置为true 将会使Store和Proxy的操作以安静(RESTful)的状态进行。 store将会自动生成到服务器的GET, POST, PUT 和 DELETE 请求。 任何给定CRUD操作的HTTP方式(method)都在 Ext.data.Api.restActions 有描述。 附加信息参见 Ext.data.DataProxy.restful。

注意: 如果 restful:true 将会隐含设置为 批处理(batch) 。默认为 false。

Store
sortInfo : Object
一个配置对象，指定Store请求数据时load 操作的排序规则。 注意，对于本地排序...
一个配置对象，指定Store请求数据时load 操作的排序规则。 注意，对于本地排序，direction参数是大小写敏感的。 另请参见 remoteSort 和 paramNames。 例如:
sortInfo: {
    field: 'fieldName',
    direction: 'ASC' // or 'DESC' (case sensitive for local sorting)
}
Store
storeId : String
如果传递此参数，此id将会使用StoreMgr 进行注册。...
如果传递此参数，此id将会使用StoreMgr 进行注册。

注意: 如果指定了一个 id (不建议) 它将会取代分配的storeId。

Store
url : String
如果没有指定 proxy ，此url将会被用来隐含配置一个...
如果没有指定 proxy ，此url将会被用来隐含配置一个 HttpProxy 。 典型情况下要么指定此选项，要么指定 data 选项。
Store
writer : Ext.data.DataWriter
Writer 对象负责处理record对象，它们将会被写入服务端数据库。...

Writer 对象负责处理record对象，它们将会被写入服务端数据库。

如果writer被配置到Store中， store的 add, remove,和 update 事件将会被监听，以便在远端 创建记录, 销毁记录, 或者 更新记录。

store的proxy将会把所有 writexception 事件转播给当前store

示例实现:

var writer = new Ext.data.JsonWriter({
    encode: true,
    writeAllFields: true // 写入所有字段，而不仅仅是那些发生变化的字段
});

// 典型的Store，包含了Proxy,Reader和Writer
var store = new Ext.data.Store({
    storeId: 'user',
    root: 'records',
    proxy: proxy,
    reader: reader,
    writer: writer,     // <--在store中插入一个DataWriter就像你插入一个Reader
    paramsAsHash: true,
    autoSave: false    // <-- false讲延迟执行create, update, destroy请求
                       //直到被特别指定如此做。
});

Store

公共属性

Property Defined By
baseParams : Object
此参数的描述参见 corresponding 配置项 。 如需修改此参数，参见 setBaseParam 。
此参数的描述参见 corresponding 配置项 。 如需修改此参数，参见 setBaseParam 。
Store
fields : Ext.util.MixedCollection
一个MixedCollection，包含了Store中 Records 的字段(Fields)定义。
Store
hasMultiSort : Boolean 如果store当前使用多个field/direction联合排序，此值为true。
Store
isDestroyed : Boolean 如果store已经被销毁，此值为true。只读。
Store
lastOptions : Object
包含 load 方法最近一次使用的配置参数对象。 此参数所包含的内容详情...
包含 load 方法最近一次使用的配置参数对象。 此参数所包含的内容详情，参见 load 方法。对访问加载当前Record缓存时所使用的所有参数来说，此属性非常有用。
Store
multiSortInfo : Object 包含所有排序方向，以及在对多个字段进行排序时使用的排序配置的对象。
Store
recordType : Function
为 Reader 提供的(或者创建的) Record 构造函数。只读。...
为 Reader 提供的(或者创建的) Record 构造函数。只读。

如果Reader是通过传递一个 Ext.data.Field 定义对象数组来构造的， 他将隐含地从这个数组 创建一个Record的构造器。 (附加信息参见 Ext.data.Record. create)。

此参数可被用来在Store中创建指定类型的Record，例如:

// 创建数据缓存(data store)
    var store = new Ext.data.ArrayStore({
        autoDestroy: true,
        fields: [
           {name: 'company'},
           {name: 'price', type: 'float'},
           {name: 'change', type: 'float'},
           {name: 'pctChange', type: 'float'},
           {name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
        ]
    });
    store.loadData(myData);

    // 创建Grid
    var grid = new Ext.grid.EditorGridPanel({
        store: store,
        colModel: new Ext.grid.ColumnModel({
            columns: [
                {id:'company', header: 'Company', width: 160, dataIndex: 'company'},
                {header: 'Price', renderer: 'usMoney', dataIndex: 'price'},
                {header: 'Change', renderer: change, dataIndex: 'change'},
                {header: '% Change', renderer: pctChange, dataIndex: 'pctChange'},
                {header: 'Last Updated', width: 85,
                    renderer: Ext.util.Format.dateRenderer('m/d/Y'),
                    dataIndex: 'lastChange'}
            ],
            defaults: {
                sortable: true,
                width: 75
            }
        }),
        autoExpandColumn: 'company', // 与column model中指定的id对应
        height:350,
        width:600,
        title:'Array Grid',
        tbar: [{
            text: 'Add Record',
            handler : function(){
                var defaultData = {
                    change: 0,
                    company: 'New Company',
                    lastChange: (new Date()).clearTime(),
                    pctChange: 0,
                    price: 10
                };
                var recId = 3; // 提供唯一的id
                var p = new store.recordType(defaultData, recId); // 创建新记录
                grid.stopEditing();
                store.insert(0, p); // 向store中插入一条新记录(另请参见add)
                grid.startEditing(0, 0);
            }
        }]
    });
Store

公共方法

Method Defined By
Store ( Object config )
创建一个新Store
创建一个新Store
参数:
  • config : Object
    一个配置对象，包含了Store访问数据以及将数据读取到Record时所需的参数。
返回值:
  • void
Store
add ( Ext.data.Record[] records ) : void
向Store中添加记录 并触发 add 事件。 如需通过一个远程数据源向Store中添加记录，请使用...
向Store中添加记录 并触发 add 事件。 如需通过一个远程数据源向Store中添加记录，请使用 load({add:true}) 。 另请参见 recordType 和 insert 。
参数:
  • records : Ext.data.Record[]
    需要添加到缓存中的一个 Ext.data.Record对象数组。 参见 recordType。
返回值:
  • void
Store
addEvents( Object|String o, string Optional. ) : void
添加指定的事件到事件列表上，事件会被该Observable触发。
添加指定的事件到事件列表上，事件会被该Observable触发。
参数:
  • o : Object|String
    以事件名作为属性true作为值的对象 或者当多个事件名被分开的传递时则为第一个事件名。
  • Optional. : string
    事件名被分开的传递时则为事件名。 用法:
    this.addEvents('storeloaded', 'storecleared');
返回值:
  • void
Observable
addListener( String eventName, Function handler, [Object scope], [Object options] ) : void
给对象添加事件处理器。
给对象添加事件处理器。
参数:
  • eventName : String
    监听的事件名。
  • handler : Function
    事件调用的方法
  • scope : Object
    （可选）处理方法执行的作用域 (this的引用 reference)。 如果被忽略。默认为触发事件的对象。
  • options : Object
    （可选）包含处理器配置和属性的对象。 可能包含以下的属性:
    • scope : Object
      处理方法执行的作用域(this的引用) 。 如果被忽略。默认为触发事件的对象。
    • delay : Number
      在触发事件后延迟调用处理器的毫秒数。
    • single : Boolean
      如果为True则添加一个处理器来处理下一次的事件触发（仅一次），然后移除自己。
    • buffer : Number
      使得处理器延迟指定毫秒数后预定的运行在 一个Ext.util.DelayedTask中 。 如果事件在时间内再一次被触发，原始的处理器不会被调用，但是新的处理器会预定的在他的位置上。
    • target : Observable
      如果事件在目标的Observable上触发则仅仅调用处理器， 否则 事件会从子类的Observable上冒泡

    组合选项
    使用这些选项参数,可能会组合出不同类型的监听器：

    一个延迟的，一次性的监听器。

    myDataView.on('click', this.onClick, this, {
single: true,
delay: 100
});

    一次调用附加多个处理器
    该方法同样支持传递一个包含指定的多个处理器的属性的配置对象参数。

    myGridPanel.on({
'click' : {
    fn: this.onClick,
    scope: this,
    delay: 100
},
'mouseover' : {
    fn: this.onMouseOver,
    scope: this
},
'mouseout' : {
    fn: this.onMouseOut,
    scope: this
}
});

    或者一个简写的语法：

    myGridPanel.on({
'click' : this.onClick,
'mouseover' : this.onMouseOver,
'mouseout' : this.onMouseOut,
 scope: this
});
返回值:
  • void
Observable
addSorted ( Ext.data.Record record ) : void
(只支持本地排序) 将传递的Record插入到Store中的指定位置， 它基于当前的排序信息。
(只支持本地排序) 将传递的Record插入到Store中的指定位置， 它基于当前的排序信息。
参数:
  • record : Ext.data.Record
返回值:
  • void
Store
clearFilter ( Boolean suppressEvent ) : void
返回没有使用过滤器时缓存记录的视图。
返回没有使用过滤器时缓存记录的视图。
参数:
  • suppressEvent : Boolean
    如果此参数为 true 将会安静地清除过滤器而不触发 datachanged 事件。
返回值:
  • void
Store
collect ( String dataIndex , [ Boolean allowNull ], [ Boolean bypassFilter ] ) : Array
从当前store特定的dataIndex收集唯一的值。
从当前store特定的dataIndex收集唯一的值。
参数:
  • dataIndex : String
    需要收集的属性
  • allowNull : Boolean
    (可选) 传递true将允许null,undefined或者空字符串值
  • bypassFilter : Boolean
    (可选) 传递true从所有记录中进行收集，包含那些被过滤掉的记录
返回值:
  • Array
    唯一值集合
Store
commitChanges () : void
提交所有 未提交变更的 Record。 如需处理变更，可以订阅...
提交所有 未提交变更的 Record。 如需处理变更，可以订阅 update事件， 并且当第三个参数是Ext.data.Record.COMMIT时执行更新。
参数:
  • 无。
返回值:
  • void
Store
createMultipleFilterFn ( Array filters ) : Function
给定一个过滤函数数组(每个都有一个可配置的作用域)...
给定一个过滤函数数组(每个都有一个可配置的作用域)， 构造并返回一个单独的函数，它可以返回所有过滤器ANDed(逻辑“与”)在一起之后 返回的结果
参数:
  • filters : Array
    过滤对象数组 (每个对象都应该包含一个'fn'属性和可选的作用域)
返回值:
  • Function
    多重过滤函数
Store
createSortFunction ( String field , String direction ) : Function
创建并返回一个函数，它根据所给的字段和方向对一个数组进行排序。
创建并返回一个函数，它根据所给的字段和方向对一个数组进行排序。
参数:
  • field : String
    需要创建排序器的字段
  • direction : String
    排序的方向(默认为"ASC")
返回值:
  • Function
    一个根据所给的field/direction组合进行排序的函数
Store
destroy () : void
销毁store
销毁store
参数:
  • 无。
返回值:
  • void
Store
each ( Function fn , [ Object scope ] ) : void
在缓存中的每条Record 上调用指定的函数。
在缓存中的每条Record 上调用指定的函数。
参数:
  • fn : Function
    需要调用的函数。 Record 将会作为第一个参数被传递。 返回false取消并退出迭代过程。
  • scope : Object
    (可选) 作用域( this 引用) 函数将会在其中被执行。 默认为迭代过程中的当前 Record。
返回值:
  • void
Store
enableBubble( String/Array events ) :void
是否现在使得事件会被该Observable触发并调用 this.getBubbleTarget()方法在拥有者的继承树...

是否现在使得事件会被该Observable触发并调用 this.getBubbleTarget()方法在拥有者的继承树中冒泡。Observable的基础类中没有该方法的实现。

该方法一般被Ext.Components用来冒泡事件到拥有者的容器。参看Ext.Component.getBubbleTarget默认的实现 在Ext.Component中返回组件的直接拥有者。但是如果需要的是一个已知的目标，该方法可以被重写来更快的访问需求的目标。

例子:

Ext.override(Ext.form.Field, {
    // 添加方法到Field的initComponent上改变事件为冒泡
    initComponent : Ext.form.Field.prototype.initComponent.createSequence(function() {
        this.enableBubble('change');
    }),

    // 我们知道我们想让Field的事件冒泡到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() {
            // 如果样式被修改标题会变红。
            myForm.header.setStyle('color', 'red');
        }
    }
});
参数:
  • events : String/Array
    冒泡的事件名，或事件名数组
返回值:
  • void
Observable
filter ( String|Array field , String/RegExp value , [ Boolean anyMatch ], [ Boolean caseSensitive ], Boolean exactMatch ) : void
根据指定的参数过滤 records。 可以选择传递一个过滤选项数组，根据多个参数过滤。...
根据指定的参数过滤 records。 可以选择传递一个过滤选项数组，根据多个参数过滤。 单个过滤器示例: store.filter('name', 'Ed', true, true); //查找所有包含'Ed'子串的记录 多过滤器示例: store.filter([ { property : 'name', value : 'Ed', anyMatch : true, //可选，默认为true caseSensitive: true //可选，默认为true }, //也可以传递过滤函数 { fn : function(record) { return record.get('age') == 24 }, scope: this } ]);
参数:
  • field : String|Array
    你的数据记录的一个属性，或者一个包含多个过滤条件的数组
  • value : String/RegExp
    要么是一个属性名的起始字符串，要么是一个需要在属性上进行测试的 正则表达式。
  • anyMatch : Boolean
    (可选) true时将全字匹配，而不仅仅是匹配起始字符串
  • caseSensitive : Boolean
    (可选) true比较时将会对大小写敏感
  • exactMatch : Boolean
    true将会强制精确匹配(在正则中添加^和$字符)。 默认为fales。 如果anyMatch参数为true，忽略此配置。
返回值:
  • void
Store
filterBy ( Function fn , [ Object scope ] ) : void
通过一个函数进行过滤。 指定的函数将会在Store中的每一条记录上依次调用。...
通过一个函数进行过滤。 指定的函数将会在Store中的每一条记录上依次调用。 如果此函数返回true那么这条记录就会被 包含在结果集中，否则它将被过滤掉。
参数:
  • fn : Function
    需要调用的函数。 它将被传递如下参数：
    • record : Ext.data.Record

      需要进行过滤测试的 record， 使用 Ext.data.Record.get 方法访问记录中的字段。

    • id : Object

      所传递的Record的ID

  • scope : Object
    (可选)作用域( this 引用) 函数将会在其中被执行。 默认为当前Store。
返回值:
  • void
Store
find ( String fieldName , String/RegExp value , [ Number startIndex ], [ Boolean anyMatch ], [ Boolean caseSensitive ] ) : Number
根据指定字段的值查找store中第一个符合条件记录的索引。
根据指定字段的值查找store中第一个符合条件记录的索引。
参数:
  • fieldName : String
    记录中需要测试的字段名。
  • value : String/RegExp
    要么是一个字符串，字段值需要以此字符串开头；或者是一个 需要对字段进行测试的正则表达式。
  • startIndex : Number
    (可选)开始查找的起始位置
  • anyMatch : Boolean
    (可选) 此参数为true将进行全字匹配，而不仅仅是起始部分
  • caseSensitive : Boolean
    (可选) 此参数为true在比较时将对大小写敏感
返回值:
  • Number
    符合条件的索引，或者-1
Store
findBy ( Function fn , [ Object scope ], [ Number startIndex ] ) : Number
使用一个函数，在Store中查找出第一个符合条件记录的位置索引。...
使用一个函数，在Store中查找出第一个符合条件记录的位置索引。 如果此函数返回true则此记录被视为符合条件。
参数:
  • fn : Function
    需要调用的函数。 它将会被传入如下参数:
    • record : Ext.data.Record

      需要进行过滤测试的 record。 使用Ext.data.Record.get 方法访问字段值。

    • id : Object

      所传递Record的ID

  • scope : Object
    (可选)作用域( this 引用) 函数将会在其中被执行。 默认为当前Store。
  • startIndex : Number
    (可选) 开始查找的起始位置索引
返回值:
  • Number
    匹配的索引或者-1
Store
findExact ( String fieldName , Mixed value , [ Number startIndex ] ) : Number
根据指定的字段值，在store中查找符合条件的第一条记录的位置。
根据指定的字段值，在store中查找符合条件的第一条记录的位置。
参数:
  • fieldName : String
    需要进行测试的记录的字段名。
  • value : Mixed
    需要与字段进行匹配的值。
  • startIndex : Number
    (可选) 查询的起始位置
返回值:
  • Number
    匹配的索引或者-1
Store
fireEvent( String eventName, Object... args ) : Boolean
用传入的参数触发指定的事件 (减去事件名)。 一个事件可以被设置为冒泡 Obse...

用传入的参数触发指定的事件 (减去事件名)。

一个事件可以被设置为冒泡到Observable父类继承树(参看 Ext.Component.getBubbleTarget) 调用enableBubble实现。

参数:
  • eventName : String
    触发的事件名。
  • args : Object...
    传递给处理器的可变长度参数。
返回值:
  • Boolean
    如果有任何的处理器返回false则返回false，否则返回true。
Observable
getAt ( Number index ) : Ext.data.Record
获取指定位置的记录。
获取指定位置的记录。
参数:
  • index : Number
    需要查找的记录的索引位置。
返回值:
  • Ext.data.Record
    所传递的索引位置的Record。 如果没有找到，返回undefined
Store
getById ( String id ) : Ext.data.Record
获取拥有指定id的记录。
获取拥有指定id的记录。
参数:
  • id : String
    需要查找记录的id
返回值:
  • Ext.data.Record
    拥有所给id的Record。如果没有找到返回undefined
Store
getCount () : Number
获取缓存记录的条数。如果使用分页，此值可能不是数据集的总数。...
获取缓存记录的条数。

如果使用分页，此值可能不是数据集的总数。 如果Reader使用的数据对象包含数据集总数， 那么 getTotalCount 函数将会返回数据集的总条数。 注意: 参见load 配置项的重要注释。

参数:
  • 无。
返回值:
  • Number
    Store缓存中Record的条数
Store
getModifiedRecords () : Ext.data.Record[]
获取自从最后一次提交以来被修改过的 records。、 修改过的记录将通过load操作(例如分页时)被持久化。...
获取自从最后一次提交以来被修改过的 records。、 修改过的记录将通过load操作(例如分页时)被持久化。 注意:不包括被删除的记录。 另请参见 pruneModifiedRecords 和 Ext.data.Record markDirty。.
参数:
  • 无。
返回值:
  • Ext.data.Record[]
    一个{@link Ext.data.Record Records} 数组，包含了未提交的变更。 如需获得记录中被修改的字段，参见 {@link Ext.data.Record}<tt>{@link Ext.data.Record#modified modified}.</tt> 。
Store
getRange ( [ Number startIndex ], [ Number endIndex ] ) : Ext.data.Record[]
返回位于指定区间范围中的记录。
返回位于指定区间范围中的记录。
参数:
  • startIndex : Number
    (可选) 其实索引位置(默认为0)
  • endIndex : Number
    (可选) 结束索引位置(默认为Store中的最后一条记录)
返回值:
  • Ext.data.Record[]
    Record数组
Store
getSortState () : Object
返回一个对象，描述当前Store的排序状态。
返回一个对象，描述当前Store的排序状态。
参数:
  • 无。
返回值:
  • Object
    Store的排序状态。 一个拥有两个属性的对象:<ul> <li><b>field : String<p class="sub-desc"> Record排序所依据的字段名。 </p></li> <li><b>direction : String<p class="sub-desc">排序的方向，'ASC' 或 'DESC' (case-sensitive).</p></li> </ul> 更多细节参见 <tt>{@link #sortInfo}</tt> 。
Store
getTotalCount () : Number
获取服务器返回的数据库记录总数。如果使用分页，为了让此值准确...
获取服务器返回的数据库记录总数。

如果使用分页，为了让此值准确， Reader 使用的数据对象必须包含数据集的数量。 对于远程数据源， 此参数 ( JsonReader的 totalProperty， XmlReader的 totalRecords ) 的值必须通过服务端的一次查询来返回。 注意: 参见 load 方法的重要注释。

参数:
  • 无。
返回值:
  • Number
    Record的数量在数据对象中被指定，通过Proxy传递给Reader。

    注意: 如果在本地改变Store的内容，此值不会被更新。

Store
hasListener( String eventName ) : Boolean
检测对象是否包含指定事件的任何监听器
检测对象是否包含指定事件的任何监听器
参数:
  • eventName : String
    检测的事件名
返回值:
  • Boolean
    如果事件被监听则为true，否则为false
Observable
indexOf ( Ext.data.Record record ) : Number
获取所传递的Record在缓存中的位置索引。
获取所传递的Record在缓存中的位置索引。
参数:
  • record : Ext.data.Record
    需要查找的Ext.data.Record对象。
返回值:
  • Number
    所传递的Record的索引位置。如果没有找到返回-1
Store
indexOfId ( String id ) : Number
根据所传递的id获得缓存中记录的索引位置。
根据所传递的id获得缓存中记录的索引位置。
参数:
  • id : String
    需要查找的Record的id
返回值:
  • Number
    Record的索引位置。 如果没有找到，返回-1
Store
insert ( Number index , Ext.data.Record[] records ) : void
在所给的位置向Store中插入记录并触发 add 事件。 另请参见 add 和 addSorted 。
在所给的位置向Store中插入记录并触发 add 事件。 另请参见 add 和 addSorted 。
参数:
  • index : Number
    插入所给记录的起始位置。
  • records : Ext.data.Record[]
    一个Ext.data.Record对象数组，它将被插入到缓存中。
返回值:
  • void
Store
isFiltered () : Boolean
如果store当前被进行了过滤，返回true
如果store当前被进行了过滤，返回true
参数:
  • 无。
返回值:
  • Boolean
Store
load ( Object options ) : Boolean
使用所配置的 reader 从配置的 proxy 加载Record...

使用所配置的 reader 从配置的 proxy 加载Record

注意:

  • 重要 : 加载操作是异步的！ 在新的数据被加载完成之前，函数的调用已经返回。 如需对调用load方法产生的信息进行任何后续处理， 指定一个回调函数，或者使用一个 'load'事件处理函数。
  • 如果使用 远程排序 ，第一次调用必须在 options.params 中指定 start 和 limit 参数， 以便设定数据集的起始位置以及每次使用Proxy所缓存的Record条数。
  • 如果使用 远程排序 ， 根据指定的 paramNames 所配置的 sortInfo 将会自动被包含在请求参数中。
参数:
  • options : Object
    一个包含参数的对象，它控制加载选项:
    • params :Object

      一个包含了参数的对象，将作为HTTP参数被传递 给远程数据源。 注意: params 将会被任何具有同名 baseParams 的属性覆盖。

      这些参数将会被使用 Ext.urlEncode 编码成标准的HTTP参数。

    • callback : Function

      在Record加载之后被调用的函数。 回调函数在load事件被触发后调用， 并且将会被传递如下参数：

      • r : Ext.data.Record[] 所加载的Record数组。
      • options : 调用load方法时的配置对象。
      • success : 布尔值，加载是否成功标识位。

    • scope : Object

      调用回调函数时的作用域(默认为Store对象)

    • add : Boolean

      标志位，将把加载的记录添加到缓存，而不是替换 当前的缓存。 注意: 参见 loadData 的注释

返回值:
  • Boolean
    如果<i>开发者</i> 提供的 <tt>{@link #beforeload}</tt> 事件处理函数返回了 <tt>false</tt>， load调用将会被取消并且返回<tt>false</tt>; 否则返回<tt>true</tt>。
Store
loadData ( Object data , [ Boolean append ] ) : void
从一个传递的数据块中加载数据并 触发 load 事件。 必须在构造器中配置...
从一个传递的数据块中加载数据并 触发 load 事件。 必须在构造器中配置一个知道数据格式的 Reader 。
参数:
  • data : Object
    一个数据块，将会从其中读取Record。 期望的数据格式 依赖所配置的 Reader 并且应该与此Reader 的 Ext.data.Reader.readRecords 参数相对应。
  • append : Boolean
    (可选) 此参数wieldtrue 将会追加新的Record而不是默认替换现有的缓存。 注意: Store中的Record将会用它们的 id 作为key， 所以如果添加的Record的id在Store中已经存在将会替换 现有的Record。 只有有用新的唯一的id的Record会被添加。
返回值:
  • void
Store
multiSort ( Array sorters , String direction ) : void
根据多个field/direction排序规则对当前store的内容进行排序。 此方法在...
根据多个field/direction排序规则对当前store的内容进行排序。 此方法在 sort 内部被调用并且一般不需要手工调用。 多条件联合排序目前只能应用到本地数据集- 如果使用remoteSort，多重排序的数据目前不会被发送给代理。
参数:
  • sorters : Array
    排序规则对象数组(字段和顺序)
  • direction : String
    排序结果的整体顺序(默认为 "ASC")
返回值:
  • void
Store
on( String eventName, Function handler, [Object scope], [Object options] ) : void
给对象添加事件处理器 (addListener的简写形式)
给对象添加事件处理器 (addListener的简写形式。)
参数:
  • eventName : String
    监听的事件类型
  • handler : Function
    事件调用的方法
  • scope : Object
    （可选）处理方法执行时的作用域 (this 的引用)。 如果被忽略。默认为触发事件的对象。
  • options : Object
    可选 包含处理器配置的对象。
返回值:
  • void
Observable
purgeListeners() : void
移除对象上所有的监听器
移除对象上所有的监听器
参数:
  • 无。
返回值:
  • void
Observable
query ( String field , String/RegExp value , [ Boolean anyMatch ], [ Boolean caseSensitive ] ) : MixedCollection
根据指定的属性查找记录。
根据指定的属性查找记录。
参数:
  • field : String
    你的记录中的一个字段
  • value : String/RegExp
    要么是一个字符串，字段以此字符串开始， 或者是一个需要对字段进行测试的正则表达式。
  • anyMatch : Boolean
    (可选)此参数为true将进行全字匹配，而不仅仅是匹配开始处
  • caseSensitive : Boolean
    (可选)此参数为true在比较时将会对大小写敏感
返回值:
  • MixedCollection
    返回一个匹配记录的Ext.util.MixedCollection
Store
queryBy ( Function fn , [ Object scope ] ) : MixedCollection
使用一个过滤函数在Store缓存的记录中进行查找。 指定的函数将会在Store中的每一条记录上依次调用。...
使用一个过滤函数在Store缓存的记录中进行查找。 指定的函数将会在Store中的每一条记录上依次调用。 如果此函数返回true那么这条记录就会被 包含在结果集中。
参数:
  • fn : Function
    需要调用的函数。 它将会被传递如下的参数：
    • record : Ext.data.Record

      需要进行过滤测试的 record 使用 Ext.data.Record.get 方法访问记录中的字段。

    • id : Object

      传递的Record的ID

  • scope : Object
    (可选) 作用域( this 引用)，函数将在其中被执行。 默认为当前Store。
返回值:
  • MixedCollection
    返回一个Ext.util.MixedCollection 包含符合条件记录
Store
rejectChanges () : void
在所有 被修改的记录 上 回退 所有的变更。
在所有 被修改的记录 上 回退 所有的变更。
参数:
  • 无。
返回值:
  • void
Store
relayEvents( Object o, Array events ) : void
从指定的Observable上传递选择的事件就好像被当前对象触发一样。
从指定的Observable上传递选择的事件就好像被当前对象触发一样。
参数:
  • o : Object
    该Observable上的事件被当前对象传递。
  • events : Array
    传递的数组名。
返回值:
  • void
Observable
reload ( Object options ) : void
使用配置的 Reader 和上次执行加载操作的选项...

使用配置的 Reader 和上次执行加载操作的选项 从配置的Proxy重新加载数据缓存。

注意: 参见 load 中的重要注释。

参数:
  • options : Object

    (可选) 一个包含了 加载选项 的对象，它可能会覆盖最后一次 load 使用的options。 详情参见 load(默认为 null，在这种情况下将使用 lastOptions)。

    向现有参数中添加新参数:

    lastOptions = myStore.lastOptions;
Ext.apply(lastOptions.params, {
    myNewParam: true
});
myStore.reload(lastOptions);
返回值:
  • void
Store
remove ( Ext.data.Record/Ext.data.Record[] record ) : void
从Store中删除记录并触发 remove 事件。
从Store中删除记录并触发 remove 事件。
参数:
  • record : Ext.data.Record/Ext.data.Record[]
    需要从缓存中删除的记录或者记录数组。
返回值:
  • void
Store
removeAll ( Boolean silent ) : void
从Store中删除所有记录并触发 clear 事件。
从Store中删除所有记录并触发 clear 事件。
参数:
  • silent : Boolean
    [false] 默认为 false。设置为 true将不会触发clear事件。
返回值:
  • void
Store
removeAt ( Number index ) : void
删除Store中指定位置的一条记录。 触发 remove事件。
删除Store中指定位置的一条记录。 触发 remove事件。
参数:
  • index : Number
    需要删除记录的位置索引
返回值:
  • void
Store
removeListener( String eventName, Function handler, [Object scope] ) : void
删除一个事件处理器。
删除一个事件处理器。
参数:
  • eventName : String
    处理器关联的事件类型。
  • handler : Function
    移除的处理器。 这应该是传递到addListener里的方法的引用。
  • scope : Object
    （可选）处理器指定的初始作用域。
返回值:
  • void
Observable
resumeEvents() : void
重新开始触发事件。(参见suspendEvents) 如果事件以queueSuspended参数被挂起，则在事件被挂起时 ...
重新开始触发事件。(参见 suspendEvents) 如果事件以queueSuspended 参数被挂起，则在事件被挂起时触发的事件会被传递到所有的监听器上
参数:
  • 无。
返回值:
  • void
Observable
save () : Number
将所有挂起的更改保存到store。 如果没有配置对应的 Ext.data.Api.actions操作...
将所有挂起的更改保存到store。 如果没有配置对应的 Ext.data.Api.actions操作， 那么将使用配置的 url 。
change            url
---------------   --------------------
removed records   Ext.data.Api.actions.destroy
phantom records   Ext.data.Api.actions.create
modified records  Ext.data.Api.actions.update
参数:
  • 无。
返回值:
  • Number
    单独指定"batch"需要保存的记录条数。 如果没有项目需要保存，或者保存操作被取消，将会返回-1
Store
setBaseParam ( String name , Mixed value ) : void
为store的baseParams 中指定的参数名设置值。 用法:myStore.setBaseParam('foo', {bar:3});
为store的baseParams 中指定的参数名设置值。 用法:

myStore.setBaseParam('foo', {bar:3});
参数:
  • name : String
    需要指定值的参数名称
  • value : Mixed
    指定给命名属性的值
返回值:
  • void
Store
setDefaultSort ( String fieldName , [ String dir ] ) : void
设置下一次 load 操作所使用的默认排序列和顺序。
设置下一次 load 操作所使用的默认排序列和顺序。
参数:
  • fieldName : String
    需要排序的字段名。
  • dir : String
    (可选) 排序方向，'ASC' 或者 'DESC' (大小写敏感，默认为'ASC')
返回值:
  • void
Store
singleSort ( String fieldName , [ String dir ] ) : void
根据单个字段和方向对store的内容进行排序。 这将会在...
根据单个字段和方向对store的内容进行排序。 这将会在 sort 内部被调用，并且一般情况下不应该手工调用。
参数:
  • fieldName : String
    需要排序字段的名称。
  • dir : String
    (可选) 排序方向，'ASC' 或者 'DESC' (大小写敏感，默认为 'ASC')
返回值:
  • void
Store
sort ( String/Array fieldName , [ String dir ] ) : void
对记录进行排序。如果使用远程排序，将在服务端进行排序操作， 然后刷新缓存。...
对记录进行排序。如果使用远程排序，将在服务端进行排序操作， 然后刷新缓存。 如果使用本地排序，缓存将在内部排序。 另请参见 remoteSort 和 paramNames。 此函数接受两种调用参数-将字段名作为第一个参数传递进来， 或者将多条件联合排序的配置对象作为一个数组传递进来。 单条件排序示例：store.sort('name', 'ASC');多条件联合排序 示例store.sort([ { field : 'name', direction: 'ASC' }, { field : 'salary', direction: 'DESC' } ], 'ASC'); 在以上的第二种形式中，排序参数将会被依次应用， 后面的排序器将在前面排序器产生的结果上进行再次排序操作。 例如，依照上面的排序配置， 如果存在具有相同名字的两条记录，它们将会按照薪水进行排序。 排序配置可以添加任意多个。
参数:
  • fieldName : String/Array
    进行排序的字段名，或者一个整理好的排序配置数组
  • dir : String
    (可选) 排列顺序，'ASC' 或者 'DESC' (大小写敏感，默认为 'ASC')
返回值:
  • void
Store
sum ( String property , [ Number start ], [ Number end ] ) : Number
将位于start 和 end之间的每条 record 的property值加在一起然后返回结果。
将位于start 和 end之间的每条 record 的property值加在一起然后返回结果。
参数:
  • property : String
    每条记录中的一个字段
  • start : Number
    (可选) 起始记录位置(默认为 0)
  • end : Number
    (可选)要包含的 最后一条记录的位置(默认为 length-1)
返回值:
  • Number
    The sum
Store
suspendEvents( Boolean queueSuspended ) : void
暂停触发所有的事件。 (参看resumeEvents)
暂停触发所有的事件。（参看 resumeEvents)
参数:
  • queueSuspended : Boolean
    如果传递为true则排列好暂停的事件使得在调用 resumeEvents 后再触发它们，而不是抛弃所有暂停的事件。
返回值:
  • void
Observable
un( String eventName, Function handler, [Object scope] ) : void
删除一个事件处理器(removeListener方法的简写形式)
删除一个事件处理器(removeListener方法的简写形式。)
参数:
  • eventName : String
    处理器关联的事件类型
  • handler : Function
    被删除的处理器 这应该是传入 addListener 中的方法的引用。
  • scope : Object
    （可选）为处理器指定的初始作用域。
返回值:
  • void
Observable

公共事件

Event Defined By
add : ( Store this , Ext.data.Record[] records , Number index )
当Record被added 到Store中时触发
当Record被added 到Store中时触发
监听器将会以如下的参数格式触发:
  • this : Store
  • records : Ext.data.Record[]
    所添加的记录数组
  • index : Number
    record(s)被添加的索引位置
Store
beforeload : ( Store this , Object options )
在请求新的数据对象之前触发。 如果beforeload的监听器返回...
在请求新的数据对象之前触发。 如果beforeload的监听器返回 false那么 load 操作将会被取消。
Listeners will be called with the following arguments:
  • this : Store
  • options : Object
    指定的加载参数(详情参见 load)
Store
beforesave : ( Ext.data.Store store , Object data )
在调用保存操作之前触发。 保存包括销毁records，更新records和创建records。
在调用保存操作之前触发。 保存包括销毁records，更新records和创建records。
监听器将会以如下的参数格式被调用:
  • store : Ext.data.Store
  • data : Object
    一个包含需要保存的数据的对象。 此对象将会为每个操作包含一个key，对应每个操作的record数组。
Store
beforewrite : ( Ext.data.Store store , String action , Record/Record[] rs , Object options , Object arg )
监听器将会以如下的参数格式被调用:
  • store : Ext.data.Store
  • action : String
    [Ext.data.Api.actions.create|update|destroy]
  • rs : Record/Record[]
    被写入的Record(s)
  • options : Object
    指定的加载选项。 编辑 options.params 以向请求中添加HTTP参数。 (详情参见 save)
  • arg : Object
    传递给request 函数的 回调参数对象
Store
clear : ( Store this , Record[] The )
当数据缓存被清空时触发。
当数据缓存被清空时触发。
监听器将会以如下的参数格式被调用:
  • this : Store
  • The : Record[]
    被清楚的记录
Store
datachanged : ( Store this )
当数据缓存以批量的方式发生变化时触发(例如，它被排序、过滤等等)，并且 ...
当数据缓存以批量的方式发生变化时触发(例如，它被排序、过滤等等)，并且 使用此Store作记录缓存的组件都应该刷新其视图。
监听器将会以如下的参数格式被调用:
  • this : Store
Store
exception : ( misc misc )
在Proxy进行远程请求时如果内部发生异常，此事件被触发。 此事件与对应的...

在Proxy进行远程请求时如果内部发生异常，此事件被触发。 此事件与对应的 Ext.data.DataProxy有关。 附加信息参见 Ext.data.DataProxy. exception 。

监听器将会以如下的参数格式被调用:
  • misc : misc
    描述参见 Ext.data.DataProxy. exception 。
Store
load : ( Store this , Ext.data.Record[] records , Object options )
在新的数据集被加载之后触发。
在新的数据集被加载之后触发。
监听器将会以如下的参数格式被调用:
  • this : Store
  • records : Ext.data.Record[]
    加载的Record
  • options : Object
    指定的加载选项( 细节参见 load)
Store
loadexception : ( misc misc )
此事件已过时，推荐使用能捕获所有 exception 的事件替代。...

此事件已过时，推荐使用能捕获所有 exception 的事件替代。

此事件与对应的Ext.data.DataProxy 有关。 附加信息详情参见 Ext.data.DataProxy. loadexception 。

监听器将会以如下的参数格式被调用:
  • misc : misc
    更多描述参见 Ext.data.DataProxy. loadexception 。
Store
metachange : ( Store this , Object meta )
在当前store的reader提供了新的元数据(fields)时触发。 当前只有JsonReader支持此配置。
在当前store的reader提供了新的元数据(字段)时触发。 当前只有JsonReader支持此配置。
监听器将会以如下的参数格式被调用:
  • this : Store
  • meta : Object
    JSON元数据
Store
remove : ( Store this , Ext.data.Record record , Number index )
当从Store中 removed 一条记录时触发
当从Store中 removed 一条记录时触发
监听器将会以如下参数格式被调用:
  • this : Store
  • record : Ext.data.Record
    被删除的记录
  • index : Number
    被删记录的索引位置
Store
save : ( Ext.data.Store store , Number batch , Object data )
在保存操作完成之后触发。 保存操作包含销毁记录、更新记录以及创建记录。
在保存操作完成之后触发。 保存操作包含销毁记录、更新记录以及创建记录。
监听器将会以如下的参数格式被调用:
  • store : Ext.data.Store
  • batch : Number
    被保存分支的标识符。
  • data : Object
    一个对象，包含了需要保存的数据。 此对象将会包含每个操作对应的key，连同每个操作所涉及到的记录的数组。
Store
update : ( Store this , Ext.data.Record record , String operation )
当一条记录被更新时触发
当一条记录被更新时触发
监听器将会以如下的参数格式被调用:
  • this : Store
  • record : Ext.data.Record
    被更新的记录
  • operation : String
    执行的更新操作。 可能是如下值中的一个:
    Ext.data.Record.EDIT
Ext.data.Record.REJECT
Ext.data.Record.COMMIT
Store
write : ( Ext.data.Store store , String action , Object result , Ext.Direct.Transaction res , Record/Record[] rs )
如果一个 Ext.data.Api.actions的CRUD操作导致服务器返回代码200，此事件被触发...
如果一个 Ext.data.Api.actions的CRUD操作导致服务器返回代码200，此事件被触发。 操作成功由 result[ 'successProperty'] 参数决定 ( 注意 对于安静型(RESTful)的store， 一个简单的20x(译者注：服务端返回的状态码，类似404，各种状态码都有自己的 含义，具体请google)，对"destroy"和"update"操作来说已经足够。 "create"操作应该(should should)返回200同时返回一个数据库主键)。
监听器将会以如下的参数格式被调用:
  • store : Ext.data.Store
  • action : String
    [Ext.data.Api.actions.create|update|destroy]
  • result : Object
    为方便使用，在响应之外获取的数据
  • res : Ext.Direct.Transaction
  • rs : Record/Record[]
    Store的记录，写操作的对象
Store


Observable
    Tree

Class Ext.data.Tree

包: | Ext.data
定义类的文件: | Tree.js
类: | Tree
继承自: | Observable
一个树型数据结构，向它的所有子节点进行事件冒泡。 树中的节点拥有大部分标准的DOM功能。

配置项

Config Options Defined By
listeners : Object
一个包含一个或多个事件处理器的配置对象，会在初始化的时候被添加到目标对象上...

一个包含一个或多个事件处理器的配置对象，会在初始化的时候被添加到目标对象上。 该配置对象应该是一个有效的监听器配置对象就像 addListener例子中指定的一样可一次附加多个处理器。

ExtJs Components上的DOM事件

一些 ExtJs Component 类导出时会选择一些DOM事件(例如 "click", "mouseover" 等等), 这通常只是在有额外的值可以被添加时发生。例如DataView类的 click事件会传递被点击的节点。也可以直接在Component的HTMLElementevent上访问DOM事件，但必需在Component被渲染后监听器才能添加到Element 上。可以按照以下步骤添加插件:

// 插件会用一个监听器配置对象进行配置。
//该组件会被添加到所有处理方法的参数列表上。
Ext.DomObserver = Ext.extend(Object, {
    constructor: function(config) {
        this.listeners = config.listeners ? config.listeners : config;
    },

    // 组件将自己传递进了插件的初始化方法里
    init: function(c) {
        var p, l = this.listeners;
        for (p in l) {
            if (Ext.isFunction(l[p])) {
                l[p] = this.createHandler(l[p], c);
            } else {
                l[p].fn = this.createHandler(l[p].fn, c);
            }
        }

        // 渲染后立即添加监听器到元素上
        c.render = c.render.createSequence(function() {
            var e = c.getEl();
            if (e) {
                e.on(l);
            }
        });
    },

    createHandler: function(fn, c) {
        return function(e) {
            fn.call(this, e, c);
        };
    }
});

var combo = new Ext.form.ComboBox({

    // 元素被点击后折叠
    plugins: [ new Ext.DomObserver({
        click: function(evt, comp) {
            comp.collapse();
        }
    })],
    store: myStore,
    typeAhead: true,
    mode: 'local',
    triggerAction: 'all'
});

Observable
pathSeparator : String
用于分隔节点id的符号(默认值为 '/').
Tree

公共属性

Property |  | Defined By
 | root : Node 树的根节点 | Tree

公共方法

Method Defined By
Tree ( [ Node root ] )
参数:
  • root : Node
    可选 根节点
返回值:
  • void
Tree
addEvents( Object|String o, string Optional. ) : void
添加指定的事件到事件列表上，事件会被该Observable触发。
添加指定的事件到事件列表上，事件会被该Observable触发。
参数:
  • o : Object|String
    以事件名作为属性true作为值的对象 或者当多个事件名被分开的传递时则为第一个事件名。
  • Optional. : string
    事件名被分开的传递时则为事件名。 用法:
    this.addEvents('storeloaded', 'storecleared');
返回值:
  • void
Observable
addListener( String eventName, Function handler, [Object scope], [Object options] ) : void
给对象添加事件处理器。
给对象添加事件处理器。
参数:
  • eventName : String
    监听的事件名。
  • handler : Function
    事件调用的方法
  • scope : Object
    （可选）处理方法执行的作用域 (this的引用 reference)。 如果被忽略。默认为触发事件的对象。
  • options : Object
    （可选）包含处理器配置和属性的对象。 可能包含以下的属性:
    • scope : Object
      处理方法执行的作用域(this的引用) 。 如果被忽略。默认为触发事件的对象。
    • delay : Number
      在触发事件后延迟调用处理器的毫秒数。
    • single : Boolean
      如果为True则添加一个处理器来处理下一次的事件触发（仅一次），然后移除自己。
    • buffer : Number
      使得处理器延迟指定毫秒数后预定的运行在 一个Ext.util.DelayedTask中 。 如果事件在时间内再一次被触发，原始的处理器不会被调用，但是新的处理器会预定的在他的位置上。
    • target : Observable
      如果事件在目标的Observable上触发则仅仅调用处理器， 否则 事件会从子类的Observable上冒泡

    组合选项
    使用这些选项参数,可能会组合出不同类型的监听器：

    一个延迟的，一次性的监听器。

    myDataView.on('click', this.onClick, this, {
single: true,
delay: 100
});

    一次调用附加多个处理器
    该方法同样支持传递一个包含指定的多个处理器的属性的配置对象参数。

    myGridPanel.on({
'click' : {
    fn: this.onClick,
    scope: this,
    delay: 100
},
'mouseover' : {
    fn: this.onMouseOver,
    scope: this
},
'mouseout' : {
    fn: this.onMouseOut,
    scope: this
}
});

    或者一个简写的语法：

    myGridPanel.on({
'click' : this.onClick,
'mouseover' : this.onMouseOver,
'mouseout' : this.onMouseOut,
 scope: this
});
返回值:
  • void
Observable
enableBubble( String/Array events ) :void
是否现在使得事件会被该Observable触发并调用 this.getBubbleTarget()方法在拥有者的继承树...

是否现在使得事件会被该Observable触发并调用 this.getBubbleTarget()方法在拥有者的继承树中冒泡。Observable的基础类中没有该方法的实现。

该方法一般被Ext.Components用来冒泡事件到拥有者的容器。参看Ext.Component.getBubbleTarget默认的实现 在Ext.Component中返回组件的直接拥有者。但是如果需要的是一个已知的目标，该方法可以被重写来更快的访问需求的目标。

例子:

Ext.override(Ext.form.Field, {
    // 添加方法到Field的initComponent上改变事件为冒泡
    initComponent : Ext.form.Field.prototype.initComponent.createSequence(function() {
        this.enableBubble('change');
    }),

    // 我们知道我们想让Field的事件冒泡到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() {
            // 如果样式被修改标题会变红。
            myForm.header.setStyle('color', 'red');
        }
    }
});
参数:
  • events : String/Array
    冒泡的事件名，或事件名数组
返回值:
  • void
Observable
fireEvent( String eventName, Object... args ) : Boolean
用传入的参数触发指定的事件 (减去事件名)。 一个事件可以被设置为冒泡 Obse...

用传入的参数触发指定的事件 (减去事件名)。

一个事件可以被设置为冒泡到Observable父类继承树(参看 Ext.Component.getBubbleTarget) 调用enableBubble实现。

参数:
  • eventName : String
    触发的事件名。
  • args : Object...
    传递给处理器的可变长度参数。
返回值:
  • Boolean
    如果有任何的处理器返回false则返回false，否则返回true。
Observable
getNodeById ( String id ) : Node
根据id从树中获得一个节点。
根据id从树中获得一个节点。
参数:
  • id : String
返回值:
  • Node
Tree
getRootNode () : Node
返回树的根节点
返回树的根节点
参数:
  • 无。
返回值:
  • Node
Tree
hasListener( String eventName ) : Boolean
检测对象是否包含指定事件的任何监听器
检测对象是否包含指定事件的任何监听器
参数:
  • eventName : String
    检测的事件名
返回值:
  • Boolean
    如果事件被监听则为true，否则为false
Observable
on( String eventName, Function handler, [Object scope], [Object options] ) : void
给对象添加事件处理器 (addListener的简写形式)
给对象添加事件处理器 (addListener的简写形式。)
参数:
  • eventName : String
    监听的事件类型
  • handler : Function
    事件调用的方法
  • scope : Object
    （可选）处理方法执行时的作用域 (this 的引用)。 如果被忽略。默认为触发事件的对象。
  • options : Object
    可选 包含处理器配置的对象。
返回值:
  • void
Observable
purgeListeners() : void
移除对象上所有的监听器
移除对象上所有的监听器
参数:
  • 无。
返回值:
  • void
Observable
relayEvents( Object o, Array events ) : void
从指定的Observable上传递选择的事件就好像被当前对象触发一样。
从指定的Observable上传递选择的事件就好像被当前对象触发一样。
参数:
  • o : Object
    该Observable上的事件被当前对象传递。
  • events : Array
    传递的数组名。
返回值:
  • void
Observable
removeListener( String eventName, Function handler, [Object scope] ) : void
删除一个事件处理器。
删除一个事件处理器。
参数:
  • eventName : String
    处理器关联的事件类型。
  • handler : Function
    移除的处理器。 这应该是传递到addListener里的方法的引用。
  • scope : Object
    （可选）处理器指定的初始作用域。
返回值:
  • void
Observable
resumeEvents() : void
重新开始触发事件。(参见suspendEvents) 如果事件以queueSuspended参数被挂起，则在事件被挂起时 ...
重新开始触发事件。(参见 suspendEvents) 如果事件以queueSuspended 参数被挂起，则在事件被挂起时触发的事件会被传递到所有的监听器上
参数:
  • 无。
返回值:
  • void
Observable
setRootNode ( Node node ) : Node
为树设置根节点
为树设置根节点
参数:
  • node : Node
返回值:
  • Node
Tree
suspendEvents( Boolean queueSuspended ) : void
暂停触发所有的事件。 (参看resumeEvents)
暂停触发所有的事件。（参看 resumeEvents)
参数:
  • queueSuspended : Boolean
    如果传递为true则排列好暂停的事件使得在调用 resumeEvents 后再触发它们，而不是抛弃所有暂停的事件。
返回值:
  • void
Observable
un( String eventName, Function handler, [Object scope] ) : void
删除一个事件处理器(removeListener方法的简写形式)
删除一个事件处理器(removeListener方法的简写形式。)
参数:
  • eventName : String
    处理器关联的事件类型
  • handler : Function
    被删除的处理器 这应该是传入 addListener 中的方法的引用。
  • scope : Object
    （可选）为处理器指定的初始作用域。
返回值:
  • void
Observable

公共事件

Event Defined By
append : ( Tree tree , Node parent , Node node , Number index )
当一个新的孩子节点被添加到树中的某个节点时触发。
当一个新的孩子节点被添加到树中的某个节点时触发。
监听器将会用如下的参数调用:
  • tree : Tree
    所属树
  • parent : Node
    父节点
  • node : Node
    新添加的节点
  • index : Number
    新添加节点的索引序号
Tree
beforeappend : ( Tree tree , Node parent , Node node )
当一个孩子节点被添加到树中某个节点的时候触发，返回false取消添加。
当一个孩子节点被添加到树中某个节点的时候触发，返回false取消添加。
监听器将会用如下的参数调用:
  • tree : Tree
    所属树
  • parent : Node
    父节点
  • node : Node
    需要添加的子节点
Tree
beforeinsert : ( Tree tree , Node parent , Node node , Node refNode )
向树中插入一个孩子节点之前触发，返回false终止插入。
向树中插入一个孩子节点之前触发，返回false终止插入。
监听器将会用如下的参数调用:
  • tree : Tree
    所属树
  • parent : Node
    父节点
  • node : Node
    需要插入的节点
  • refNode : Node
    将子节点插入到其前面的节点
Tree
beforemove : ( Tree tree , Node node , Node oldParent , Node newParent , Number index )
在节点被移动到树中一个新的位置之前触发，返回false终止移动。
在节点被移动到树中一个新的位置之前触发，返回false终止移动。
监听器将会用如下的参数调用:
  • tree : Tree
    所属树
  • node : Node
    需要移动的节点
  • oldParent : Node
    节点父节点
  • newParent : Node
    移动到的新的父节点
  • index : Number
    移动到的新的序号
Tree
beforeremove : ( Tree tree , Node parent , Node node )
当从树中删除一个节点之前触发，返回false取消删除。
当从树中删除一个节点之前触发，返回false取消删除。
监听器将会用如下的参数调用:
  • tree : Tree
    所属树
  • parent : Node
    父节点
  • node : Node
    需要删除的节点
Tree
insert : ( Tree tree , Node parent , Node node , Node refNode )
当一个新的子节点被插入到树中的某个节点时触发。
当一个新的子节点被插入到树中的某个节点时触发。
监听器将会用如下的参数调用:
  • tree : Tree
    所属树
  • parent : Node
    父节点
  • node : Node
    插入的子节点
  • refNode : Node
    将子节点插入到其前面的节点
Tree
move : ( Tree tree , Node node , Node oldParent , Node newParent , Number index )
当一个节点被移动到树中一个新的位置时触发。
当一个节点被移动到树中一个新的位置时触发。
监听器将会用如下的参数调用:
  • tree : Tree
    所属树
  • node : Node
    The node moved
  • oldParent : Node
    该节点原来的父节点
  • newParent : Node
    该节点新的父节点
  • index : Number
    移动到的序号
Tree
remove : ( Tree tree , Node parent , Node node )
当一个孩子节点被从树中删除的时候触发。
当一个孩子节点被从树中删除的时候触发。
监听器将会用如下的参数调用:
  • tree : Tree
    所属树
  • parent : Node
    父节点
  • node : Node
    需要删除的子节点
Tree


Class Ext.data.Types

包: | Ext.data
定义类的文件: | Types.js
类: | Types
继承自: | Object

这是一个静态类，包含了系统支持的数据类型，可以赋给 Field.

该类中的属性在 Field 类中被用作类型标志，所以如需测试一个Field是不是某种类型， 用type 与该类的属性进行比较。

开发者可以想该类添加自己的应用特定的数据类型。 定义名称必须大写。每个类型定义必须包含三个属性:

  • convert : Function
    一个函数，从数据块将原始数据转换为在Field中排序的数据。 函数被传递如下参数:
    • v : Mixed
      数值被Reader读取，如果为undefined将会使用配置的 defaultValue .
    • rec : Mixed
      包含数据行的数据对象，被Reader读取。 根据Reader的类型，此值可以是一个Array( ArrayReader),一个对象( JsonReader), 或者一个XML 元素( XMLReader).
  • sortType : Function
    一个函数，将存储的数据转化成可比较的形式，如同 Ext.data.SortTypes 中定义的。
  • type : String
    一个字面的数据类型名称。

例如，如需从一个包含了 lat 和 long 值的JsonReader数据块， 创建一个VELatLong字段 (参见Microsoft Bing Mapping API) 包含了地图上一个数据点的纬度/经度值， 你应该定义一个新数据类型如下:

// Add a new Field data type which stores a VELatLong object in the Record.
Ext.data.Types.VELATLONG = {
    convert: function(v, data) {
        return new VELatLong(data.lat, data.long);
    },
    sortType: function(v) {
        return v.Latitude;  // When sorting, order by latitude
    },
    type: 'VELatLong'
};

Then, when declaring a Record, use

var types = Ext.data.Types; // allow shorthand type access
UnitRecord = Ext.data.Record.create([
    { name: 'unitName', mapping: 'UnitName' },
    { name: 'curSpeed', mapping: 'CurSpeed', type: types.INT },
    { name: 'latitude', mapping: 'lat', type: types.FLOAT },
    { name: 'latitude', mapping: 'lat', type: types.FLOAT },
    { name: 'position', type: types.VELATLONG }
]);

该类是一个单例，不应该直接创建实例。

公共属性

Property |  | Defined By
 | AUTO : Object. 这种数据类型意为着原始数据在被放到记录中之前不作转化。 | Types
 | BOOL : Object. 这种数据类型意为着原始数据在被放到记录中之前强转为一个布尔值... 这种数据类型意为着原始数据在被放到记录中之前强转为一个布尔值。 字符串"true"和数字1被转化成布尔值 true . 同义词 BOOLEAN 与此等价。 | Types
 | BOOLEAN : Object. 这种数据类型意为着原始数据在被放到记录中之前强转为一个布尔值... 这种数据类型意为着原始数据在被放到记录中之前强转为一个布尔值。 字符串"true"和数值1被转化成布尔值 true . 同义词 BOOL 与此等价。 | Types
 | DATE : Object. 这种数据类型意为着原始数据在被放到记录中之前强转为一个日期对象... 这种数据类型意为着原始数据在被放到记录中之前强转为一个日期对象。 日期格式在Ext.data.Field 的构造函数中指定，被应用到此类型上。 | Types
 | FLOAT : Object. 这种数据类型意为着原始数据在被放到记录中之前强转为一个数值... 这种数据类型意为着原始数据在被放到记录中之前强转为一个数值。 同义词 NUMBER 与此等价。 | Types
 | INT : Object. 这种数据类型意为着原始数据在被放到记录中之前强转为一个整数... 这种数据类型意为着原始数据在被放到记录中之前强转为一个整数。 同义词 INTEGER 与此等价。 | Types
 | INTEGER : Object. 这种数据类型意为着原始数据在被放到记录中之前强转为一个整数... 这种数据类型意为着原始数据在被放到记录中之前强转为一个整数。 同义词 INT 与此等价。 | Types
 | NUMBER : Object. 这种数据类型意味着原始数据在被放到记录中之前强转为一个数值... 这种数据类型意味着原始数据在被放到记录中之前强转为一个数值。 同义词 FLOAT 与此等价。 | Types
 | STRING : Object. 这种数据类型意为着原始数据在被放到记录中之前强转为一个字符串。 | Types
 | stripRe : Regexp 正则表达式，用来从数值中去掉非数值字符。默认为/[\$,%]/g。应该覆盖此值... 正则表达式，用来从数值中去掉非数值字符。 默认为/[\$,%]/g。应该覆盖此值进行本地化。 | Types

公共方法

该类没有公共方法。

公共事件

该类没有公共事件。


DataReader
    XmlReader

Class Ext.data.XmlReader

包: | Ext.data
定义类的文件: | XmlReader.js
类: | XmlReader
继承自: | DataReader

数据reader类，用来 从一个XML文档 创建Ext.data.Record 对象数组，此XML文档基于所提供的 Ext.data.Record 构造器中的映射关系。

注意: 为了使浏览器能解析一个返回的XML文档， HTTP响应中的Content-Type头必须设置为 "text/xml" 或者 "application/xml"。

示例代码:

var Employee = Ext.data.Record.create([
   {name: 'name', mapping: 'name'},     // 如果与"name"相同，"mapping"参数不是必须的

   {name: 'occupation'}                 // 此字段将会使用"occupation"作为映射。
]);
var myReader = new Ext.data.XmlReader({
   totalProperty: "results", //包含数据集总数的元素(可选)
   record: "row",            //重复元素，包含了数据行的信息
   idProperty: "id"          //数据行中的元素，它为记录提供一个ID(可选)
   messageProperty: "msg"    //响应中的元素，提供一条用户反馈的消息(可选)
}, Employee);

这将消耗一个格式如下的XML文件:

<?xml version="1.0" encoding="UTF-8"?>
<dataset>
 <results>2</results>
 <row>
   <id>1</id>
   <name>Bill</name>
   <occupation>Gardener</occupation>
 </row>
 <row>
   <id>2</id>
   <name>Ben</name>
   <occupation>Horticulturalist</occupation>
 </row>
</dataset>

配置项

Config Options |  | Defined By
 | fields : Array/Object 要么是一个Field 对象定义数组(将会被传递给 Ext.data.Record.create)， 或者是一个使用... 要么是一个Field 对象定义数组(将会被传递给 Ext.data.Record.create)， 或者是一个使用 Ext.data.Record.create 创建的 Record 构造函数。 | DataReader
 | idPath : String 从记录中元素到包含一个记录标识符值的 DomQuery路径关系。 | XmlReader
 | messageProperty : String [undefined] 服务端响应中一个可选的参数名，描述了一个用户反馈的消息。 | DataReader
 | record : String 到重复元素的DomQuery路径，包含了record信息。 | XmlReader
 | record : String 到重复元素的DomQuery路径，包含了record信息。 | XmlReader
 | successProperty : String 被表单使用，到success属性的DomQuery路径。 | XmlReader
 | totalProperty : String DomQuery路径，通过它可以获得数据集中的记录总数。 如果整个数据集不是... DomQuery路径，通过它可以获得数据集中的记录总数。 如果整个数据集不是一次被加载，而是在远程服务器被分页处理， 此参数才是必须的。 | XmlReader

公共属性

Property |  | Defined By
 | buildExtractors : Object 抽象防范，将会在DataReader的继承类例如 Ext.data.JsonReader 和 Ext.data.XmlReader中被覆盖。 | DataReader
 | extractValues : Object 抽象方法，在DataReader的实现类，例如 Ext.data.JsonReader 和 Ext.data.XmlReader 中被覆盖 | DataReader
 | getId : Object 在继承的buildExtractors实现中创建的抽象方法。 | DataReader
 | getMessage : Object 在buildExtractors实现中创建的抽象方法。 | DataReader
 | getRoot : Object 在buildExtractors实现中创建的抽象方法。 | DataReader
 | getSuccess : Object 抽象方法，在子类的buildExtractors中实现。 | DataReader
 | getTotal : Object 在buildExtractors实现中创建的抽象方法。 | DataReader
 | meta : Mixed DataReader所配置的元数据，被传递给构造函数。 | DataReader
 | xmlData : XMLDocument 在任何数据loads/reads之后， 原始的XML文件可以在客户端进一步处理。 | XmlReader

公共方法

Method Defined By
XmlReader ( Object meta , Object recordType )
创建一个新的XmlReader。
创建一个新的XmlReader。
参数:
  • meta : Object
    元数据配置项
  • recordType : Object
    要么是一个字段定义对象数组，被传递给 Ext.data.Record.create， 或者是使用 Ext.data.Record.create 创建的一个Record构造器对象。
返回值:
  • void
XmlReader
isData ( Object data ) : Boolean
如果提供的数据hash看起来 并且叫起来 像数据，此值为ture...
如果提供的数据hash看起来 并且叫起来 像数据，此值为ture。(译者注：有一句E文成语说"If it looks like a duck and it quacks like a duck,it is a duck."意思是说，如果一个东西看起来像一只鸭子 并且叫起来也像一只鸭子，那么它就是一只鸭子。这里的意思是说，如果提供的hash对象 就像数据。) 在你的DataReader配置项中检查，是否有一个对应到的idProperty的key 包含非空主键。
参数:
  • data : Object
返回值:
  • Boolean
DataReader
read ( Object response ) : Object
此方法只被DataProxy在从远程服务器获取到数据时使用。
此方法只被DataProxy在从远程服务器获取到数据时使用。
参数:
  • response : Object
    XHR对象，包含了解析后的XML文档。 响应被期望包含一个叫做responseXML的属性， 它指向一个XML文档对象。
返回值:
  • Object
    records 一个数据块，被 {@link Ext.data.Store}用来缓存Ext.data.Record 。
XmlReader
readRecords ( Object doc ) : Object
从一个XML文档创建一个包含Ext.data.Record 的数据块。
从一个XML文档创建一个包含Ext.data.Record 的数据块。
参数:
  • doc : Object
    一个解析好的XML文档。
返回值:
  • Object
    records 一个数据块，被 {@link Ext.data.Store} 用来缓存作Ext.data.Record。
XmlReader
readResponse ( String action , Object response ) : Ext.data.Response
解析来自服务器的XML响应。
解析来自服务器的XML响应。
参数:
  • action : String
    [ Ext.data.Api.actions create|read|update|destroy]
  • response : Object
    来自服务器的HTTP响应对象。
返回值:
  • Ext.data.Response
    {@link Ext.data.Response}实例
XmlReader
realize ( Record/Record[] record , Object/Object[] data ) : void
被用作在成功插入数据库之后将一条数据变成“非模拟的”。 连同来自服务端的新数据一起，设置记录的主键...
被用作在成功插入数据库之后将一条数据变成“非模拟的”。 连同来自服务端的新数据一起，设置记录的主键。 你必须至少返回数据库主键，使用你的DataReader中 配置的idProperty属性。 来自服务端的数据将会与本地的记录进行合并。 另外， 你返回的记录数据必须与来自服务器的数据顺序一致。 最好进行一次commit操作，消除“脏字段”的标记。 Store的"update"事件将会被禁止。
参数:
  • record : Record/Record[]
    需要变成实现的模拟数据。
  • data : Object/Object[]
    需要应用的新record数据。 必须包含来自数据库的主键，它是在idProperty字段中定义的。
返回值:
  • void
DataReader
update ( Record/Record[] rs , Object/Object[] data ) : void
在远端保存之后，使用来自服务器的新数据更新一条“非模拟”或者说“真实”记录的数据。...
在远端保存之后，使用来自服务器的新数据更新一条“非模拟”或者说“真实”记录的数据。 如果在一次“批量更新”之后返回多条记录， 你从服务器返回的记录数据必须与已经接受到的数据顺序一致。 最好进行一次commit操作，消除“脏字段”的标记。 Store的"update"事件将会被禁止，因为记录接收到了新的数据hash。
参数:
  • rs : Record/Record[]
  • data : Object/Object[]
返回值:
  • void
DataReader

公共事件

该类没有公共事件。


Observable
    Store
      XmlStore

Class Ext.data.XmlStore

包: | Ext.data
定义类的文件: | XmlStore.js
类: | XmlStore
继承自: | Store

一个小工具类，为了更方便地 从XML数据创建 Ext.data.Stores 。 XmlStore自动被配置使用 Ext.data.XmlReader。

Store的配置就像如下代码所示:

var store = new Ext.data.XmlStore({
    // store configs
    autoDestroy: true,
    storeId: 'myStore',
    url: 'sheldon.xml', // 自动配置一个HttpProxy
    // reader configs
    record: 'Item', // 记录将会有个"Item"标签
    idPath: 'ASIN',
    totalRecords: '@TotalResults'
    fields: [
        // set up the fields mapping into the xml doc
        // The first needs mapping, the others are very basic
        {name: 'Author', mapping: 'ItemAttributes > Author'},
        'Title', 'Manufacturer', 'ProductGroup'
    ]
});

此Store被配置用来解析如下格式的对象:

<?xml version="1.0" encoding="UTF-8"?>
<ItemSearchResponse xmlns="http://webservices.amazon.com/AWSECommerceService/2009-05-15"
                >
    <Items>
        <Request>
            <IsValid>True</IsValid>
            <ItemSearchRequest>
                <Author>Sidney Sheldon</Author>
                <SearchIndex>Books</SearchIndex>
            </ItemSearchRequest>
        </Request>
        <TotalResults>203</TotalResults>
        <TotalPages>21</TotalPages>
        <Item>
            <ASIN>0446355453</ASIN>
            <DetailPageURL>
                http://www.amazon.com/
            </DetailPageURL>
            <ItemAttributes>
                <Author>Sidney Sheldon</Author>
                <Manufacturer>Warner Books</Manufacturer>
                <ProductGroup>Book</ProductGroup>
                <Title>Master of the Game</Title>
            </ItemAttributes>
        </Item>
    </Items>
</ItemSearchResponse>
一个符合此格式的字符串也可以用作 data 配置项。

注意: 尽管没有在此处列出，该类也可以接受所有 XmlReader 的配置选项。

配置项

Config Options Defined By
autoDestroy : Boolean
如果此参数为true，当绑定此store的组件被销毁之后此store也会...
如果此参数为true，当绑定此store的组件被销毁之后此store也会被销毁 (默认为 false)。

注意: 当store被仅仅绑定到一个组件时，应该把此参数设置成true。

Store
autoLoad : Boolean/Object
如果没有指定 data 参数，并且 autoLoad参数为 true或者为一个Object， store的...
如果没有指定 data 参数，并且 autoLoad参数为 true或者是一个对象(Object)， store的 load 方法将会在创建之后自动被调用。 如果autoLoad的值是一个对象(Object)， 此对象将会被传递给store的 load 方法。
Store
autoSave : Boolean
默认为true 将导致在一条记录被修改(例如: 变脏('dirty'))之后store自动地把记录...

默认为true 将导致在一条记录被修改(例如: 变脏('dirty'))之后store自动地把记录 save 到服务器端。 指定为false可以手动把所有修改的记录 save 到服务端。

注意: CRUD操作将会作为单独的请求发送。

Store
baseParams : Object
此参数的描述参见 corresponding 配置项 。 如需修改此参数，参见 setBaseParam 。
此参数的描述参见 corresponding 配置项 。 如需修改此参数，参见 setBaseParam 。
Store
batch : Boolean
默认为 true (除非 restful:true )。 每个CRUD操作的多次请求 (CREATE, READ, UPDATE...

默认为 true (除非 restful:true )。 每个CRUD操作的多次请求 (CREATE, READ, UPDATE 和 DESTROY)将会被合在一起并且作为一次事务发送出去。 只有在 autoSave 参数被设置成 false时应用。

如果Store是安静模式(RESTful)，DataProxy也是安静的(RESTful)， 这样会为每条记录创建一个独立的事务。

Store
data : Array
一个内嵌的数据对象，可以被 reader 读取。 典型情况下，指定此选项，或者 url 选项。
Store
defaultParamNames : Object
为 paramNames 提供默认值。 如需在全局范围修改所有store的参数...
为 paramNames 提供默认值。 如需在全局范围修改所有store的参数，必须在store的prototype上 修改此对象。
Store
listeners : Object
一个包含一个或多个事件处理器的配置对象，会在初始化的时候被添加到目标对象上...

一个包含一个或多个事件处理器的配置对象，会在初始化的时候被添加到目标对象上。 该配置对象应该是一个有效的监听器配置对象就像 addListener例子中指定的一样可一次附加多个处理器。

ExtJs Components上的DOM事件

一些 ExtJs Component 类导出时会选择一些DOM事件(例如 "click", "mouseover" 等等), 这通常只是在有额外的值可以被添加时发生。例如DataView类的 click事件会传递被点击的节点。也可以直接在Component的HTMLElementevent上访问DOM事件，但必需在Component被渲染后监听器才能添加到Element 上。可以按照以下步骤添加插件:

// 插件会用一个监听器配置对象进行配置。
//该组件会被添加到所有处理方法的参数列表上。
Ext.DomObserver = Ext.extend(Object, {
    constructor: function(config) {
        this.listeners = config.listeners ? config.listeners : config;
    },

    // 组件将自己传递进了插件的初始化方法里
    init: function(c) {
        var p, l = this.listeners;
        for (p in l) {
            if (Ext.isFunction(l[p])) {
                l[p] = this.createHandler(l[p], c);
            } else {
                l[p].fn = this.createHandler(l[p].fn, c);
            }
        }

        // 渲染后立即添加监听器到元素上
        c.render = c.render.createSequence(function() {
            var e = c.getEl();
            if (e) {
                e.on(l);
            }
        });
    },

    createHandler: function(fn, c) {
        return function(e) {
            fn.call(this, e, c);
        };
    }
});

var combo = new Ext.form.ComboBox({

    // 元素被点击后折叠
    plugins: [ new Ext.DomObserver({
        click: function(evt, comp) {
            comp.collapse();
        }
    })],
    store: myStore,
    typeAhead: true,
    mode: 'local',
    triggerAction: 'all'
});

Observable
paramNames : Object
一个包含多个属性的对象，指定了分页和排序参数的名称，在加载数据时被传递给...

一个包含多个属性的对象，指定了分页和排序参数的名称，在加载数据时被传递给 远程服务器。 默认情况下，此对象拥有如下格式:

{
    start : 'start',  // 指定起始行的参数名
    limit : 'limit',  // 指定返回数据条数的参数名
    sort : 'sort',    // 指定排序字段的参数名
    dir : 'dir'       // 指定排序方向的参数名
}

服务器必须根据收到的这些参数名创建所请求的数据块。 如果需要不同的参数名称，可以使用配置项覆盖这些参数。

绑定到当前Store的 PagingToolbar ，使用此参数指定 它的requests 中的参数名称。

Store
proxy : Ext.data.DataProxy
DataProxy 对象，它提供对数据对象的访问。 参见 url 。
Store
pruneModifiedRecords : Boolean
此值为true将在 store被加载或者一条记录被删除时 清除所有记录的修改信息(默认为...
此值为true将在 store被加载或者一条记录被删除时 清除所有记录的修改信息(默认为 false)。参见 getModifiedRecords 的访问函数(指getter/setter)以获得修改的记录。
Store
remoteSort : boolean
如果此参数为true，处理排序操作的方式是，通过请求 Proxy 提供一个数据已经排好顺序的版本...
如果此参数为true，处理排序操作的方式是，通过请求 Proxy 提供一个数据已经排好顺序的版本， 而不是在缓存中对记录进行排序(默认为 false)。

如果remoteSort 为 true 那么在一个Grid Column的 header 被点击时，将会从服务器请求当前页面，并且在 params 中添加如下两个参数:

  • sort : String

    需要排序的字段名 (就像在Record的 Field definition中指定的那样)。

  • dir : String

    排列的方向，'ASC' 或者 'DESC' (大小写敏感)。

Store
restful : Boolean
默认为false。 设置为true 将会使Store和Proxy的操作以安静(RESTful)的状态进行...
默认为false。 设置为true 将会使Store和Proxy的操作以安静(RESTful)的状态进行。 store将会自动生成到服务器的GET, POST, PUT 和 DELETE 请求。 任何给定CRUD操作的HTTP方式(method)都在 Ext.data.Api.restActions 有描述。 附加信息参见 Ext.data.DataProxy.restful。

注意: 如果 restful:true 将会隐含设置为 批处理(batch) 。默认为 false。

Store
sortInfo : Object
一个配置对象，指定Store请求数据时load 操作的排序规则。 注意，对于本地排序...
一个配置对象，指定Store请求数据时load 操作的排序规则。 注意，对于本地排序，direction参数是大小写敏感的。 另请参见 remoteSort 和 paramNames。 例如:
sortInfo: {
    field: 'fieldName',
    direction: 'ASC' // or 'DESC' (case sensitive for local sorting)
}
Store
storeId : String
如果传递此参数，此id将会使用StoreMgr 进行注册。...
如果传递此参数，此id将会使用StoreMgr 进行注册。

注意: 如果指定了一个 id (不建议) 它将会取代分配的storeId。

Store
url : String
如果没有指定 proxy ，此url将会被用来隐含配置一个...
如果没有指定 proxy ，此url将会被用来隐含配置一个 HttpProxy 。 典型情况下要么指定此选项，要么指定 data 选项。
Store
writer : Ext.data.DataWriter
Writer 对象负责处理record对象，它们将会被写入服务端数据库。...

Writer 对象负责处理record对象，它们将会被写入服务端数据库。

如果writer被配置到Store中， store的 add, remove,和 update 事件将会被监听，以便在远端 创建记录, 销毁记录, 或者 更新记录。

store的proxy将会把所有 writexception 事件转播给当前store

示例实现:

var writer = new Ext.data.JsonWriter({
    encode: true,
    writeAllFields: true // 写入所有字段，而不仅仅是那些发生变化的字段
});

// 典型的Store，包含了Proxy,Reader和Writer
var store = new Ext.data.Store({
    storeId: 'user',
    root: 'records',
    proxy: proxy,
    reader: reader,
    writer: writer,     // <--在store中插入一个DataWriter就像你插入一个Reader
    paramsAsHash: true,
    autoSave: false    // <-- false讲延迟执行create, update, destroy请求
                       //直到被特别指定如此做。
});

Store

公共属性

Property Defined By
baseParams : Object
此参数的描述参见 corresponding 配置项 。 如需修改此参数，参见 setBaseParam 。
此参数的描述参见 corresponding 配置项 。 如需修改此参数，参见 setBaseParam 。
Store
fields : Ext.util.MixedCollection
一个MixedCollection，包含了Store中 Records 的字段(Fields)定义。
Store
hasMultiSort : Boolean 如果store当前使用多个field/direction联合排序，此值为true。
Store
isDestroyed : Boolean 如果store已经被销毁，此值为true。只读。
Store
lastOptions : Object
包含 load 方法最近一次使用的配置参数对象。 此参数所包含的内容详情...
包含 load 方法最近一次使用的配置参数对象。 此参数所包含的内容详情，参见 load 方法。对访问加载当前Record缓存时所使用的所有参数来说，此属性非常有用。
Store
multiSortInfo : Object 包含所有排序方向，以及在对多个字段进行排序时使用的排序配置的对象。
Store
recordType : Function
为 Reader 提供的(或者创建的) Record 构造函数。只读。...
为 Reader 提供的(或者创建的) Record 构造函数。只读。

如果Reader是通过传递一个 Ext.data.Field 定义对象数组来构造的， 他将隐含地从这个数组 创建一个Record的构造器。 (附加信息参见 Ext.data.Record. create)。

此参数可被用来在Store中创建指定类型的Record，例如:

// 创建数据缓存(data store)
    var store = new Ext.data.ArrayStore({
        autoDestroy: true,
        fields: [
           {name: 'company'},
           {name: 'price', type: 'float'},
           {name: 'change', type: 'float'},
           {name: 'pctChange', type: 'float'},
           {name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
        ]
    });
    store.loadData(myData);

    // 创建Grid
    var grid = new Ext.grid.EditorGridPanel({
        store: store,
        colModel: new Ext.grid.ColumnModel({
            columns: [
                {id:'company', header: 'Company', width: 160, dataIndex: 'company'},
                {header: 'Price', renderer: 'usMoney', dataIndex: 'price'},
                {header: 'Change', renderer: change, dataIndex: 'change'},
                {header: '% Change', renderer: pctChange, dataIndex: 'pctChange'},
                {header: 'Last Updated', width: 85,
                    renderer: Ext.util.Format.dateRenderer('m/d/Y'),
                    dataIndex: 'lastChange'}
            ],
            defaults: {
                sortable: true,
                width: 75
            }
        }),
        autoExpandColumn: 'company', // 与column model中指定的id对应
        height:350,
        width:600,
        title:'Array Grid',
        tbar: [{
            text: 'Add Record',
            handler : function(){
                var defaultData = {
                    change: 0,
                    company: 'New Company',
                    lastChange: (new Date()).clearTime(),
                    pctChange: 0,
                    price: 10
                };
                var recId = 3; // 提供唯一的id
                var p = new store.recordType(defaultData, recId); // 创建新记录
                grid.stopEditing();
                store.insert(0, p); // 向store中插入一条新记录(另请参见add)
                grid.startEditing(0, 0);
            }
        }]
    });
Store

公共方法

Method Defined By
XmlStore ( Object config )
参数:
  • config : Object
返回值:
  • void
XmlStore
add ( Ext.data.Record[] records ) : void
向Store中添加记录 并触发 add 事件。 如需通过一个远程数据源向Store中添加记录，请使用...
向Store中添加记录 并触发 add 事件。 如需通过一个远程数据源向Store中添加记录，请使用 load({add:true}) 。 另请参见 recordType 和 insert 。
参数:
  • records : Ext.data.Record[]
    需要添加到缓存中的一个 Ext.data.Record对象数组。 参见 recordType。
返回值:
  • void
Store
addEvents( Object|String o, string Optional. ) : void
添加指定的事件到事件列表上，事件会被该Observable触发。
添加指定的事件到事件列表上，事件会被该Observable触发。
参数:
  • o : Object|String
    以事件名作为属性true作为值的对象 或者当多个事件名被分开的传递时则为第一个事件名。
  • Optional. : string
    事件名被分开的传递时则为事件名。 用法:
    this.addEvents('storeloaded', 'storecleared');
返回值:
  • void
Observable
addListener( String eventName, Function handler, [Object scope], [Object options] ) : void
给对象添加事件处理器。
给对象添加事件处理器。
参数:
  • eventName : String
    监听的事件名。
  • handler : Function
    事件调用的方法
  • scope : Object
    （可选）处理方法执行的作用域 (this的引用 reference)。 如果被忽略。默认为触发事件的对象。
  • options : Object
    （可选）包含处理器配置和属性的对象。 可能包含以下的属性:
    • scope : Object
      处理方法执行的作用域(this的引用) 。 如果被忽略。默认为触发事件的对象。
    • delay : Number
      在触发事件后延迟调用处理器的毫秒数。
    • single : Boolean
      如果为True则添加一个处理器来处理下一次的事件触发（仅一次），然后移除自己。
    • buffer : Number
      使得处理器延迟指定毫秒数后预定的运行在 一个Ext.util.DelayedTask中 。 如果事件在时间内再一次被触发，原始的处理器不会被调用，但是新的处理器会预定的在他的位置上。
    • target : Observable
      如果事件在目标的Observable上触发则仅仅调用处理器， 否则 事件会从子类的Observable上冒泡

    组合选项
    使用这些选项参数,可能会组合出不同类型的监听器：

    一个延迟的，一次性的监听器。

    myDataView.on('click', this.onClick, this, {
single: true,
delay: 100
});

    一次调用附加多个处理器
    该方法同样支持传递一个包含指定的多个处理器的属性的配置对象参数。

    myGridPanel.on({
'click' : {
    fn: this.onClick,
    scope: this,
    delay: 100
},
'mouseover' : {
    fn: this.onMouseOver,
    scope: this
},
'mouseout' : {
    fn: this.onMouseOut,
    scope: this
}
});

    或者一个简写的语法：

    myGridPanel.on({
'click' : this.onClick,
'mouseover' : this.onMouseOver,
'mouseout' : this.onMouseOut,
 scope: this
});
返回值:
  • void
Observable
addSorted ( Ext.data.Record record ) : void
(只支持本地排序) 将传递的Record插入到Store中的指定位置， 它基于当前的排序信息。
(只支持本地排序) 将传递的Record插入到Store中的指定位置， 它基于当前的排序信息。
参数:
  • record : Ext.data.Record
返回值:
  • void
Store
clearFilter ( Boolean suppressEvent ) : void
返回没有使用过滤器时缓存记录的视图。
返回没有使用过滤器时缓存记录的视图。
参数:
  • suppressEvent : Boolean
    如果此参数为 true 将会安静地清除过滤器而不触发 datachanged 事件。
返回值:
  • void
Store
collect ( String dataIndex , [ Boolean allowNull ], [ Boolean bypassFilter ] ) : Array
从当前store特定的dataIndex收集唯一的值。
从当前store特定的dataIndex收集唯一的值。
参数:
  • dataIndex : String
    需要收集的属性
  • allowNull : Boolean
    (可选) 传递true将允许null,undefined或者空字符串值
  • bypassFilter : Boolean
    (可选) 传递true从所有记录中进行收集，包含那些被过滤掉的记录
返回值:
  • Array
    唯一值集合
Store
commitChanges () : void
提交所有 未提交变更的 Record。 如需处理变更，可以订阅...
提交所有 未提交变更的 Record。 如需处理变更，可以订阅 update事件， 并且当第三个参数是Ext.data.Record.COMMIT时执行更新。
参数:
  • 无。
返回值:
  • void
Store
createMultipleFilterFn ( Array filters ) : Function
给定一个过滤函数数组(每个都有一个可配置的作用域)...
给定一个过滤函数数组(每个都有一个可配置的作用域)， 构造并返回一个单独的函数，它可以返回所有过滤器ANDed(逻辑“与”)在一起之后 返回的结果
参数:
  • filters : Array
    过滤对象数组 (每个对象都应该包含一个'fn'属性和可选的作用域)
返回值:
  • Function
    多重过滤函数
Store
createSortFunction ( String field , String direction ) : Function
创建并返回一个函数，它根据所给的字段和方向对一个数组进行排序。
创建并返回一个函数，它根据所给的字段和方向对一个数组进行排序。
参数:
  • field : String
    需要创建排序器的字段
  • direction : String
    排序的方向(默认为"ASC")
返回值:
  • Function
    一个根据所给的field/direction组合进行排序的函数
Store
destroy () : void
销毁store
销毁store
参数:
  • 无。
返回值:
  • void
Store
each ( Function fn , [ Object scope ] ) : void
在缓存中的每条Record 上调用指定的函数。
在缓存中的每条Record 上调用指定的函数。
参数:
  • fn : Function
    需要调用的函数。 Record 将会作为第一个参数被传递。 返回false取消并退出迭代过程。
  • scope : Object
    (可选) 作用域( this 引用) 函数将会在其中被执行。 默认为迭代过程中的当前 Record。
返回值:
  • void
Store
enableBubble( String/Array events ) :void
是否现在使得事件会被该Observable触发并调用 this.getBubbleTarget()方法在拥有者的继承树...

是否现在使得事件会被该Observable触发并调用 this.getBubbleTarget()方法在拥有者的继承树中冒泡。Observable的基础类中没有该方法的实现。

该方法一般被Ext.Components用来冒泡事件到拥有者的容器。参看Ext.Component.getBubbleTarget默认的实现 在Ext.Component中返回组件的直接拥有者。但是如果需要的是一个已知的目标，该方法可以被重写来更快的访问需求的目标。

例子:

Ext.override(Ext.form.Field, {
    // 添加方法到Field的initComponent上改变事件为冒泡
    initComponent : Ext.form.Field.prototype.initComponent.createSequence(function() {
        this.enableBubble('change');
    }),

    // 我们知道我们想让Field的事件冒泡到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() {
            // 如果样式被修改标题会变红。
            myForm.header.setStyle('color', 'red');
        }
    }
});
参数:
  • events : String/Array
    冒泡的事件名，或事件名数组
返回值:
  • void
Observable
filter ( String|Array field , String/RegExp value , [ Boolean anyMatch ], [ Boolean caseSensitive ], Boolean exactMatch ) : void
根据指定的参数过滤 records。 可以选择传递一个过滤选项数组，根据多个参数过滤。...
根据指定的参数过滤 records。 可以选择传递一个过滤选项数组，根据多个参数过滤。 单个过滤器示例: store.filter('name', 'Ed', true, true); //查找所有包含'Ed'子串的记录 多过滤器示例: store.filter([ { property : 'name', value : 'Ed', anyMatch : true, //可选，默认为true caseSensitive: true //可选，默认为true }, //也可以传递过滤函数 { fn : function(record) { return record.get('age') == 24 }, scope: this } ]);
参数:
  • field : String|Array
    你的数据记录的一个属性，或者一个包含多个过滤条件的数组
  • value : String/RegExp
    要么是一个属性名的起始字符串，要么是一个需要在属性上进行测试的 正则表达式。
  • anyMatch : Boolean
    (可选) true时将全字匹配，而不仅仅是匹配起始字符串
  • caseSensitive : Boolean
    (可选) true比较时将会对大小写敏感
  • exactMatch : Boolean
    true将会强制精确匹配(在正则中添加^和$字符)。 默认为fales。 如果anyMatch参数为true，忽略此配置。
返回值:
  • void
Store
filterBy ( Function fn , [ Object scope ] ) : void
通过一个函数进行过滤。 指定的函数将会在Store中的每一条记录上依次调用。...
通过一个函数进行过滤。 指定的函数将会在Store中的每一条记录上依次调用。 如果此函数返回true那么这条记录就会被 包含在结果集中，否则它将被过滤掉。
参数:
  • fn : Function
    需要调用的函数。 它将被传递如下参数：
    • record : Ext.data.Record

      需要进行过滤测试的 record， 使用 Ext.data.Record.get 方法访问记录中的字段。

    • id : Object

      所传递的Record的ID

  • scope : Object
    (可选)作用域( this 引用) 函数将会在其中被执行。 默认为当前Store。
返回值:
  • void
Store
find ( String fieldName , String/RegExp value , [ Number startIndex ], [ Boolean anyMatch ], [ Boolean caseSensitive ] ) : Number
根据指定字段的值查找store中第一个符合条件记录的索引。
根据指定字段的值查找store中第一个符合条件记录的索引。
参数:
  • fieldName : String
    记录中需要测试的字段名。
  • value : String/RegExp
    要么是一个字符串，字段值需要以此字符串开头；或者是一个 需要对字段进行测试的正则表达式。
  • startIndex : Number
    (可选)开始查找的起始位置
  • anyMatch : Boolean
    (可选) 此参数为true将进行全字匹配，而不仅仅是起始部分
  • caseSensitive : Boolean
    (可选) 此参数为true在比较时将对大小写敏感
返回值:
  • Number
    符合条件的索引，或者-1
Store
findBy ( Function fn , [ Object scope ], [ Number startIndex ] ) : Number
使用一个函数，在Store中查找出第一个符合条件记录的位置索引。...
使用一个函数，在Store中查找出第一个符合条件记录的位置索引。 如果此函数返回true则此记录被视为符合条件。
参数:
  • fn : Function
    需要调用的函数。 它将会被传入如下参数:
    • record : Ext.data.Record

      需要进行过滤测试的 record。 使用Ext.data.Record.get 方法访问字段值。

    • id : Object

      所传递Record的ID

  • scope : Object
    (可选)作用域( this 引用) 函数将会在其中被执行。 默认为当前Store。
  • startIndex : Number
    (可选) 开始查找的起始位置索引
返回值:
  • Number
    匹配的索引或者-1
Store
findExact ( String fieldName , Mixed value , [ Number startIndex ] ) : Number
根据指定的字段值，在store中查找符合条件的第一条记录的位置。
根据指定的字段值，在store中查找符合条件的第一条记录的位置。
参数:
  • fieldName : String
    需要进行测试的记录的字段名。
  • value : Mixed
    需要与字段进行匹配的值。
  • startIndex : Number
    (可选) 查询的起始位置
返回值:
  • Number
    匹配的索引或者-1
Store
fireEvent( String eventName, Object... args ) : Boolean
用传入的参数触发指定的事件 (减去事件名)。 一个事件可以被设置为冒泡 Obse...

用传入的参数触发指定的事件 (减去事件名)。

一个事件可以被设置为冒泡到Observable父类继承树(参看 Ext.Component.getBubbleTarget) 调用enableBubble实现。

参数:
  • eventName : String
    触发的事件名。
  • args : Object...
    传递给处理器的可变长度参数。
返回值:
  • Boolean
    如果有任何的处理器返回false则返回false，否则返回true。
Observable
getAt ( Number index ) : Ext.data.Record
获取指定位置的记录。
获取指定位置的记录。
参数:
  • index : Number
    需要查找的记录的索引位置。
返回值:
  • Ext.data.Record
    所传递的索引位置的Record。 如果没有找到，返回undefined
Store
getById ( String id ) : Ext.data.Record
获取拥有指定id的记录。
获取拥有指定id的记录。
参数:
  • id : String
    需要查找记录的id
返回值:
  • Ext.data.Record
    拥有所给id的Record。如果没有找到返回undefined
Store
getCount () : Number
获取缓存记录的条数。如果使用分页，此值可能不是数据集的总数。...
获取缓存记录的条数。

如果使用分页，此值可能不是数据集的总数。 如果Reader使用的数据对象包含数据集总数， 那么 getTotalCount 函数将会返回数据集的总条数。 注意: 参见load 配置项的重要注释。

参数:
  • 无。
返回值:
  • Number
    Store缓存中Record的条数
Store
getModifiedRecords () : Ext.data.Record[]
获取自从最后一次提交以来被修改过的 records。、 修改过的记录将通过load操作(例如分页时)被持久化。...
获取自从最后一次提交以来被修改过的 records。、 修改过的记录将通过load操作(例如分页时)被持久化。 注意:不包括被删除的记录。 另请参见 pruneModifiedRecords 和 Ext.data.Record markDirty。.
参数:
  • 无。
返回值:
  • Ext.data.Record[]
    一个{@link Ext.data.Record Records} 数组，包含了未提交的变更。 如需获得记录中被修改的字段，参见 {@link Ext.data.Record}<tt>{@link Ext.data.Record#modified modified}.</tt> 。
Store
getRange ( [ Number startIndex ], [ Number endIndex ] ) : Ext.data.Record[]
返回位于指定区间范围中的记录。
返回位于指定区间范围中的记录。
参数:
  • startIndex : Number
    (可选) 其实索引位置(默认为0)
  • endIndex : Number
    (可选) 结束索引位置(默认为Store中的最后一条记录)
返回值:
  • Ext.data.Record[]
    Record数组
Store
getSortState () : Object
返回一个对象，描述当前Store的排序状态。
返回一个对象，描述当前Store的排序状态。
参数:
  • 无。
返回值:
  • Object
    Store的排序状态。 一个拥有两个属性的对象:<ul> <li><b>field : String<p class="sub-desc"> Record排序所依据的字段名。 </p></li> <li><b>direction : String<p class="sub-desc">排序的方向，'ASC' 或 'DESC' (case-sensitive).</p></li> </ul> 更多细节参见 <tt>{@link #sortInfo}</tt> 。
Store
getTotalCount () : Number
获取服务器返回的数据库记录总数。如果使用分页，为了让此值准确...
获取服务器返回的数据库记录总数。

如果使用分页，为了让此值准确， Reader 使用的数据对象必须包含数据集的数量。 对于远程数据源， 此参数 ( JsonReader的 totalProperty， XmlReader的 totalRecords ) 的值必须通过服务端的一次查询来返回。 注意: 参见 load 方法的重要注释。

参数:
  • 无。
返回值:
  • Number
    Record的数量在数据对象中被指定，通过Proxy传递给Reader。

    注意: 如果在本地改变Store的内容，此值不会被更新。

Store
hasListener( String eventName ) : Boolean
检测对象是否包含指定事件的任何监听器
检测对象是否包含指定事件的任何监听器
参数:
  • eventName : String
    检测的事件名
返回值:
  • Boolean
    如果事件被监听则为true，否则为false
Observable
indexOf ( Ext.data.Record record ) : Number
获取所传递的Record在缓存中的位置索引。
获取所传递的Record在缓存中的位置索引。
参数:
  • record : Ext.data.Record
    需要查找的Ext.data.Record对象。
返回值:
  • Number
    所传递的Record的索引位置。如果没有找到返回-1
Store
indexOfId ( String id ) : Number
根据所传递的id获得缓存中记录的索引位置。
根据所传递的id获得缓存中记录的索引位置。
参数:
  • id : String
    需要查找的Record的id
返回值:
  • Number
    Record的索引位置。 如果没有找到，返回-1
Store
insert ( Number index , Ext.data.Record[] records ) : void
在所给的位置向Store中插入记录并触发 add 事件。 另请参见 add 和 addSorted 。
在所给的位置向Store中插入记录并触发 add 事件。 另请参见 add 和 addSorted 。
参数:
  • index : Number
    插入所给记录的起始位置。
  • records : Ext.data.Record[]
    一个Ext.data.Record对象数组，它将被插入到缓存中。
返回值:
  • void
Store
isFiltered () : Boolean
如果store当前被进行了过滤，返回true
如果store当前被进行了过滤，返回true
参数:
  • 无。
返回值:
  • Boolean
Store
load ( Object options ) : Boolean
使用所配置的 reader 从配置的 proxy 加载Record...

使用所配置的 reader 从配置的 proxy 加载Record

注意:

  • 重要 : 加载操作是异步的！ 在新的数据被加载完成之前，函数的调用已经返回。 如需对调用load方法产生的信息进行任何后续处理， 指定一个回调函数，或者使用一个 'load'事件处理函数。
  • 如果使用 远程排序 ，第一次调用必须在 options.params 中指定 start 和 limit 参数， 以便设定数据集的起始位置以及每次使用Proxy所缓存的Record条数。
  • 如果使用 远程排序 ， 根据指定的 paramNames 所配置的 sortInfo 将会自动被包含在请求参数中。
参数:
  • options : Object
    一个包含参数的对象，它控制加载选项:
    • params :Object

      一个包含了参数的对象，将作为HTTP参数被传递 给远程数据源。 注意: params 将会被任何具有同名 baseParams 的属性覆盖。

      这些参数将会被使用 Ext.urlEncode 编码成标准的HTTP参数。

    • callback : Function

      在Record加载之后被调用的函数。 回调函数在load事件被触发后调用， 并且将会被传递如下参数：

      • r : Ext.data.Record[] 所加载的Record数组。
      • options : 调用load方法时的配置对象。
      • success : 布尔值，加载是否成功标识位。

    • scope : Object

      调用回调函数时的作用域(默认为Store对象)

    • add : Boolean

      标志位，将把加载的记录添加到缓存，而不是替换 当前的缓存。 注意: 参见 loadData 的注释

返回值:
  • Boolean
    如果<i>开发者</i> 提供的 <tt>{@link #beforeload}</tt> 事件处理函数返回了 <tt>false</tt>， load调用将会被取消并且返回<tt>false</tt>; 否则返回<tt>true</tt>。
Store
loadData ( Object data , [ Boolean append ] ) : void
从一个传递的数据块中加载数据并 触发 load 事件。 必须在构造器中配置...
从一个传递的数据块中加载数据并 触发 load 事件。 必须在构造器中配置一个知道数据格式的 Reader 。
参数:
  • data : Object
    一个数据块，将会从其中读取Record。 期望的数据格式 依赖所配置的 Reader 并且应该与此Reader 的 Ext.data.Reader.readRecords 参数相对应。
  • append : Boolean
    (可选) 此参数wieldtrue 将会追加新的Record而不是默认替换现有的缓存。 注意: Store中的Record将会用它们的 id 作为key， 所以如果添加的Record的id在Store中已经存在将会替换 现有的Record。 只有有用新的唯一的id的Record会被添加。
返回值:
  • void
Store
multiSort ( Array sorters , String direction ) : void
根据多个field/direction排序规则对当前store的内容进行排序。 此方法在...
根据多个field/direction排序规则对当前store的内容进行排序。 此方法在 sort 内部被调用并且一般不需要手工调用。 多条件联合排序目前只能应用到本地数据集- 如果使用remoteSort，多重排序的数据目前不会被发送给代理。
参数:
  • sorters : Array
    排序规则对象数组(字段和顺序)
  • direction : String
    排序结果的整体顺序(默认为 "ASC")
返回值:
  • void
Store
on( String eventName, Function handler, [Object scope], [Object options] ) : void
给对象添加事件处理器 (addListener的简写形式)
给对象添加事件处理器 (addListener的简写形式。)
参数:
  • eventName : String
    监听的事件类型
  • handler : Function
    事件调用的方法
  • scope : Object
    （可选）处理方法执行时的作用域 (this 的引用)。 如果被忽略。默认为触发事件的对象。
  • options : Object
    可选 包含处理器配置的对象。
返回值:
  • void
Observable
purgeListeners() : void
移除对象上所有的监听器
移除对象上所有的监听器
参数:
  • 无。
返回值:
  • void
Observable
query ( String field , String/RegExp value , [ Boolean anyMatch ], [ Boolean caseSensitive ] ) : MixedCollection
根据指定的属性查找记录。
根据指定的属性查找记录。
参数:
  • field : String
    你的记录中的一个字段
  • value : String/RegExp
    要么是一个字符串，字段以此字符串开始， 或者是一个需要对字段进行测试的正则表达式。
  • anyMatch : Boolean
    (可选)此参数为true将进行全字匹配，而不仅仅是匹配开始处
  • caseSensitive : Boolean
    (可选)此参数为true在比较时将会对大小写敏感
返回值:
  • MixedCollection
    返回一个匹配记录的Ext.util.MixedCollection
Store
queryBy ( Function fn , [ Object scope ] ) : MixedCollection
使用一个过滤函数在Store缓存的记录中进行查找。 指定的函数将会在Store中的每一条记录上依次调用。...
使用一个过滤函数在Store缓存的记录中进行查找。 指定的函数将会在Store中的每一条记录上依次调用。 如果此函数返回true那么这条记录就会被 包含在结果集中。
参数:
  • fn : Function
    需要调用的函数。 它将会被传递如下的参数：
    • record : Ext.data.Record

      需要进行过滤测试的 record 使用 Ext.data.Record.get 方法访问记录中的字段。

    • id : Object

      传递的Record的ID

  • scope : Object
    (可选) 作用域( this 引用)，函数将在其中被执行。 默认为当前Store。
返回值:
  • MixedCollection
    返回一个Ext.util.MixedCollection 包含符合条件记录
Store
rejectChanges () : void
在所有 被修改的记录 上 回退 所有的变更。
在所有 被修改的记录 上 回退 所有的变更。
参数:
  • 无。
返回值:
  • void
Store
relayEvents( Object o, Array events ) : void
从指定的Observable上传递选择的事件就好像被当前对象触发一样。
从指定的Observable上传递选择的事件就好像被当前对象触发一样。
参数:
  • o : Object
    该Observable上的事件被当前对象传递。
  • events : Array
    传递的数组名。
返回值:
  • void
Observable
reload ( Object options ) : void
使用配置的 Reader 和上次执行加载操作的选项...

使用配置的 Reader 和上次执行加载操作的选项 从配置的Proxy重新加载数据缓存。

注意: 参见 load 中的重要注释。

参数:
  • options : Object

    (可选) 一个包含了 加载选项 的对象，它可能会覆盖最后一次 load 使用的options。 详情参见 load(默认为 null，在这种情况下将使用 lastOptions)。

    向现有参数中添加新参数:

    lastOptions = myStore.lastOptions;
Ext.apply(lastOptions.params, {
    myNewParam: true
});
myStore.reload(lastOptions);
返回值:
  • void
Store
remove ( Ext.data.Record/Ext.data.Record[] record ) : void
从Store中删除记录并触发 remove 事件。
从Store中删除记录并触发 remove 事件。
参数:
  • record : Ext.data.Record/Ext.data.Record[]
    需要从缓存中删除的记录或者记录数组。
返回值:
  • void
Store
removeAll ( Boolean silent ) : void
从Store中删除所有记录并触发 clear 事件。
从Store中删除所有记录并触发 clear 事件。
参数:
  • silent : Boolean
    [false] 默认为 false。设置为 true将不会触发clear事件。
返回值:
  • void
Store
removeAt ( Number index ) : void
删除Store中指定位置的一条记录。 触发 remove事件。
删除Store中指定位置的一条记录。 触发 remove事件。
参数:
  • index : Number
    需要删除记录的位置索引
返回值:
  • void
Store
removeListener( String eventName, Function handler, [Object scope] ) : void
删除一个事件处理器。
删除一个事件处理器。
参数:
  • eventName : String
    处理器关联的事件类型。
  • handler : Function
    移除的处理器。 这应该是传递到addListener里的方法的引用。
  • scope : Object
    （可选）处理器指定的初始作用域。
返回值:
  • void
Observable
resumeEvents() : void
重新开始触发事件。(参见suspendEvents) 如果事件以queueSuspended参数被挂起，则在事件被挂起时 ...
重新开始触发事件。(参见 suspendEvents) 如果事件以queueSuspended 参数被挂起，则在事件被挂起时触发的事件会被传递到所有的监听器上
参数:
  • 无。
返回值:
  • void
Observable
save () : Number
将所有挂起的更改保存到store。 如果没有配置对应的 Ext.data.Api.actions操作...
将所有挂起的更改保存到store。 如果没有配置对应的 Ext.data.Api.actions操作， 那么将使用配置的 url 。
change            url
---------------   --------------------
removed records   Ext.data.Api.actions.destroy
phantom records   Ext.data.Api.actions.create
modified records  Ext.data.Api.actions.update
参数:
  • 无。
返回值:
  • Number
    单独指定"batch"需要保存的记录条数。 如果没有项目需要保存，或者保存操作被取消，将会返回-1
Store
setBaseParam ( String name , Mixed value ) : void
为store的baseParams 中指定的参数名设置值。 用法:myStore.setBaseParam('foo', {bar:3});
为store的baseParams 中指定的参数名设置值。 用法:

myStore.setBaseParam('foo', {bar:3});
参数:
  • name : String
    需要指定值的参数名称
  • value : Mixed
    指定给命名属性的值
返回值:
  • void
Store
setDefaultSort ( String fieldName , [ String dir ] ) : void
设置下一次 load 操作所使用的默认排序列和顺序。
设置下一次 load 操作所使用的默认排序列和顺序。
参数:
  • fieldName : String
    需要排序的字段名。
  • dir : String
    (可选) 排序方向，'ASC' 或者 'DESC' (大小写敏感，默认为'ASC')
返回值:
  • void
Store
singleSort ( String fieldName , [ String dir ] ) : void
根据单个字段和方向对store的内容进行排序。 这将会在...
根据单个字段和方向对store的内容进行排序。 这将会在 sort 内部被调用，并且一般情况下不应该手工调用。
参数:
  • fieldName : String
    需要排序字段的名称。
  • dir : String
    (可选) 排序方向，'ASC' 或者 'DESC' (大小写敏感，默认为 'ASC')
返回值:
  • void
Store
sort ( String/Array fieldName , [ String dir ] ) : void
对记录进行排序。如果使用远程排序，将在服务端进行排序操作， 然后刷新缓存。...
对记录进行排序。如果使用远程排序，将在服务端进行排序操作， 然后刷新缓存。 如果使用本地排序，缓存将在内部排序。 另请参见 remoteSort 和 paramNames。 此函数接受两种调用参数-将字段名作为第一个参数传递进来， 或者将多条件联合排序的配置对象作为一个数组传递进来。 单条件排序示例：store.sort('name', 'ASC');多条件联合排序 示例store.sort([ { field : 'name', direction: 'ASC' }, { field : 'salary', direction: 'DESC' } ], 'ASC'); 在以上的第二种形式中，排序参数将会被依次应用， 后面的排序器将在前面排序器产生的结果上进行再次排序操作。 例如，依照上面的排序配置， 如果存在具有相同名字的两条记录，它们将会按照薪水进行排序。 排序配置可以添加任意多个。
参数:
  • fieldName : String/Array
    进行排序的字段名，或者一个整理好的排序配置数组
  • dir : String
    (可选) 排列顺序，'ASC' 或者 'DESC' (大小写敏感，默认为 'ASC')
返回值:
  • void
Store
sum ( String property , [ Number start ], [ Number end ] ) : Number
将位于start 和 end之间的每条 record 的property值加在一起然后返回结果。
将位于start 和 end之间的每条 record 的property值加在一起然后返回结果。
参数:
  • property : String
    每条记录中的一个字段
  • start : Number
    (可选) 起始记录位置(默认为 0)
  • end : Number
    (可选)要包含的 最后一条记录的位置(默认为 length-1)
返回值:
  • Number
    The sum
Store
suspendEvents( Boolean queueSuspended ) : void
暂停触发所有的事件。 (参看resumeEvents)
暂停触发所有的事件。（参看 resumeEvents)
参数:
  • queueSuspended : Boolean
    如果传递为true则排列好暂停的事件使得在调用 resumeEvents 后再触发它们，而不是抛弃所有暂停的事件。
返回值:
  • void
Observable
un( String eventName, Function handler, [Object scope] ) : void
删除一个事件处理器(removeListener方法的简写形式)
删除一个事件处理器(removeListener方法的简写形式。)
参数:
  • eventName : String
    处理器关联的事件类型
  • handler : Function
    被删除的处理器 这应该是传入 addListener 中的方法的引用。
  • scope : Object
    （可选）为处理器指定的初始作用域。
返回值:
  • void
Observable

公共事件

Event Defined By
add : ( Store this , Ext.data.Record[] records , Number index )
当Record被added 到Store中时触发
当Record被added 到Store中时触发
监听器将会以如下的参数格式触发:
  • this : Store
  • records : Ext.data.Record[]
    所添加的记录数组
  • index : Number
    record(s)被添加的索引位置
Store
beforeload : ( Store this , Object options )
在请求新的数据对象之前触发。 如果beforeload的监听器返回...
在请求新的数据对象之前触发。 如果beforeload的监听器返回 false那么 load 操作将会被取消。
Listeners will be called with the following arguments:
  • this : Store
  • options : Object
    指定的加载参数(详情参见 load)
Store
beforesave : ( Ext.data.Store store , Object data )
在调用保存操作之前触发。 保存包括销毁records，更新records和创建records。
在调用保存操作之前触发。 保存包括销毁records，更新records和创建records。
监听器将会以如下的参数格式被调用:
  • store : Ext.data.Store
  • data : Object
    一个包含需要保存的数据的对象。 此对象将会为每个操作包含一个key，对应每个操作的record数组。
Store
beforewrite : ( Ext.data.Store store , String action , Record/Record[] rs , Object options , Object arg )
监听器将会以如下的参数格式被调用:
  • store : Ext.data.Store
  • action : String
    [Ext.data.Api.actions.create|update|destroy]
  • rs : Record/Record[]
    被写入的Record(s)
  • options : Object
    指定的加载选项。 编辑 options.params 以向请求中添加HTTP参数。 (详情参见 save)
  • arg : Object
    传递给request 函数的 回调参数对象
Store
clear : ( Store this , Record[] The )
当数据缓存被清空时触发。
当数据缓存被清空时触发。
监听器将会以如下的参数格式被调用:
  • this : Store
  • The : Record[]
    被清楚的记录
Store
datachanged : ( Store this )
当数据缓存以批量的方式发生变化时触发(例如，它被排序、过滤等等)，并且 ...
当数据缓存以批量的方式发生变化时触发(例如，它被排序、过滤等等)，并且 使用此Store作记录缓存的组件都应该刷新其视图。
监听器将会以如下的参数格式被调用:
  • this : Store
Store
exception : ( misc misc )
在Proxy进行远程请求时如果内部发生异常，此事件被触发。 此事件与对应的...

在Proxy进行远程请求时如果内部发生异常，此事件被触发。 此事件与对应的 Ext.data.DataProxy有关。 附加信息参见 Ext.data.DataProxy. exception 。

监听器将会以如下的参数格式被调用:
  • misc : misc
    描述参见 Ext.data.DataProxy. exception 。
Store
load : ( Store this , Ext.data.Record[] records , Object options )
在新的数据集被加载之后触发。
在新的数据集被加载之后触发。
监听器将会以如下的参数格式被调用:
  • this : Store
  • records : Ext.data.Record[]
    加载的Record
  • options : Object
    指定的加载选项( 细节参见 load)
Store
loadexception : ( misc misc )
此事件已过时，推荐使用能捕获所有 exception 的事件替代。...

此事件已过时，推荐使用能捕获所有 exception 的事件替代。

此事件与对应的Ext.data.DataProxy 有关。 附加信息详情参见 Ext.data.DataProxy. loadexception 。

监听器将会以如下的参数格式被调用:
  • misc : misc
    更多描述参见 Ext.data.DataProxy. loadexception 。
Store
metachange : ( Store this , Object meta )
在当前store的reader提供了新的元数据(fields)时触发。 当前只有JsonReader支持此配置。
在当前store的reader提供了新的元数据(字段)时触发。 当前只有JsonReader支持此配置。
监听器将会以如下的参数格式被调用:
  • this : Store
  • meta : Object
    JSON元数据
Store
remove : ( Store this , Ext.data.Record record , Number index )
当从Store中 removed 一条记录时触发
当从Store中 removed 一条记录时触发
监听器将会以如下参数格式被调用:
  • this : Store
  • record : Ext.data.Record
    被删除的记录
  • index : Number
    被删记录的索引位置
Store
save : ( Ext.data.Store store , Number batch , Object data )
在保存操作完成之后触发。 保存操作包含销毁记录、更新记录以及创建记录。
在保存操作完成之后触发。 保存操作包含销毁记录、更新记录以及创建记录。
监听器将会以如下的参数格式被调用:
  • store : Ext.data.Store
  • batch : Number
    被保存分支的标识符。
  • data : Object
    一个对象，包含了需要保存的数据。 此对象将会包含每个操作对应的key，连同每个操作所涉及到的记录的数组。
Store
update : ( Store this , Ext.data.Record record , String operation )
当一条记录被更新时触发
当一条记录被更新时触发
监听器将会以如下的参数格式被调用:
  • this : Store
  • record : Ext.data.Record
    被更新的记录
  • operation : String
    执行的更新操作。 可能是如下值中的一个:
    Ext.data.Record.EDIT
Ext.data.Record.REJECT
Ext.data.Record.COMMIT
Store
write : ( Ext.data.Store store , String action , Object result , Ext.Direct.Transaction res , Record/Record[] rs )
如果一个 Ext.data.Api.actions的CRUD操作导致服务器返回代码200，此事件被触发...
如果一个 Ext.data.Api.actions的CRUD操作导致服务器返回代码200，此事件被触发。 操作成功由 result[ 'successProperty'] 参数决定 ( 注意 对于安静型(RESTful)的store， 一个简单的20x(译者注：服务端返回的状态码，类似404，各种状态码都有自己的 含义，具体请google)，对"destroy"和"update"操作来说已经足够。 "create"操作应该(should should)返回200同时返回一个数据库主键)。
监听器将会以如下的参数格式被调用:
  • store : Ext.data.Store
  • action : String
    [Ext.data.Api.actions.create|update|destroy]
  • result : Object
    为方便使用，在响应之外获取的数据
  • res : Ext.Direct.Transaction
  • rs : Record/Record[]
    Store的记录，写操作的对象
Store


DataWriter
    XmlWriter

Class Ext.data.XmlWriter

包: | Ext.data
定义类的文件: | XmlWriter.js
类: | XmlWriter
继承自: | DataWriter
DataWriter扩展用来，写单个Ext.data.Record 对象或者Ext.data.Record 数组，目的是通过XML执行远程CRUD操作。 XmlWriter使用一个Ext.XTemplate 实例以便保持最大灵活度，如果默认的XML格式不能适用于你的需求，它让你可以定义自己特定的XML格式。 参见tpl 配置属性。

配置项

Config Options Defined By
createRecord : Function
抽象方法，需要在所有子类里实现 (例如: JsonWriter.createRecord)
DataWriter
destroyRecord : Function
需要在所有子类中实现的抽象方法 (例如: JsonWriter.destroyRecord)
DataWriter
documentRoot : String
[xrequest] (Optional) The name of the XML document root-node. Note: this parameter is required only when sending ext...
[xrequest] (可选)XML文档根节点的名称。 注意:此参数是必须的 仅当 在写-请求发送额外 baseParams 到服务端---如果没有设置baseParams， Ext.data.XmlReader.record 对于写入操作，meta-属性足以作为XML文档的根节点，只包含一个单一记录。如果包括多条记录并且没有baseParams，Ext.data.XmlWriter.root属性就可以作为XML文档的根。
XmlWriter
forceDocumentRoot : Boolean
[false]设置为true将会强制XML文档必须拥有一个根节点， 就像...
[false]设置为true将会强制XML文档必须拥有一个根节点， 就像documentRoot 和没有定义baseParams的事件中定义的那样。
XmlWriter
listful : Boolean
默认false。设置为true来使DataWriter始终用列表...
默认false。设置为 true来使DataWriter 始终用列表的方式写HTTP参数，即便对单一记录操作。
DataWriter
root : String
[records] 多条记录写入操作时，包含节点的容器元素的名字。每个写入服...
[records] 多条记录写入操作时，包含节点的容器元素的名字。每个写入服务器的xml记录都将被包含在一个命名在 Ext.data.XmlReader.record属性之后的元素中，例如：
<?xml version="1.0" encoding="UTF-8"?>
<user><first>Barney</first></user>
但是，当多条记录在批处理中被写入时，这些记录必须包裹在一个容器元素中，例如：
<?xml version="1.0" encoding="UTF-8"?>
    <records>
        <first>Barney</first></user>
        <records><first>Barney</first></user>
    </records>
默认为 records。 不要与 documentRoot混淆。
XmlWriter
tpl : String/Ext.XTemplate
XML模板，用来渲染write-actions 到你的服务端。...
XML模板，用来渲染write-actions 到你的服务端。

如果默认值不适用，可以提供他/她自己特定的 template-definition.

Defaults to:

<?xml version="{version}" encoding="{encoding}"?>
    <tpl if="documentRoot"><{documentRoot}>
    <tpl for="baseParams">
        <tpl for=".">
            <{name}>{value}</{name}>
        </tpl>
    </tpl>
    <tpl if="records.length > 1"><{root}>',
    <tpl for="records">
        <{parent.record}>
        <tpl for=".">
            <{name}>{value}</{name}>
        </tpl>
        </{parent.record}>
    </tpl>
    <tpl if="records.length > 1"></{root}></tpl>
    <tpl if="documentRoot"></{documentRoot}></tpl>

模板将会使用如下API被调用

  • {String} version [1.0]xml版本。
  • {String} encoding [ISO-8859-15]xml编码。
  • {String/false}documentRoot XML文档的根节点名称，如果没有指定，则为false。 参见 documentRoot 和 forceDocumentRoot。
  • {String} record 你的 Ext.data.XmlReader.record 配置上定义的meta-data参数，用于展示包含每条数据的xml标签名称。
  • {String} root Ext.data.XmlWriter.root 配置参数定义的meta-data参数。当发送多条数据到服务器时，用于展示xml的根标签。
  • {Array} records 发送到服务器的记录。在写操作执行的时候，records参数始终为一个数组，即便只操作一条记录。记录集里的每一个元素都包含一个字段对象组成的数组，包含如下属性：
    • {String} name 你的 Ext.data.Record 定义中指定的字段名称。“mapping”属性将被使用，否则将会匹配“name”属性。使用此参数来定义属性的XML标签名称。
    • {Mixed} value 包含在name属性指定的XML标签中的记录值。
  • {Array} baseParams. 定义在 Ext.data.Store.baseParams上。 注意：baseParams已经转换为和records参数一样的一个由[{name : "foo", value: "bar"}, ...]组成的数组。 参见 documentRoot 和 forceDocumentRoot.
XmlWriter
updateRecord : Function
所有子类应该实现的抽象方法 (如: JsonWriter.updateRecord
DataWriter
writeAllFields : Boolean
默认为false。设置为true使DataWriter返回修改记录的所有字段而非仅仅是改变的字...
默认为false。设置为 true使DataWriter返回修改记录的所有字段而非仅仅是改变的字段。 false使DataWriter只请求一条记录中改变的字段。
DataWriter
xmlEncoding : String
[ISO-8859-15] 写在xml文本header中的 encoding。
<?xml version="1.0" encoding="ISO-8859-15"?>
XmlWriter
xmlVersion : String
[1.0] 写在xml文本header中的 version。
<?xml version="1.0" encoding="ISO-8859-15"?>
XmlWriter

公共属性

该类没有公共属性。

公共方法

Method Defined By
apply ( Object params , Object baseParams , String action , Record/Record[] rs ) : void
将一个记录集合编译为由Ext.data.JsonWriter或者Ext.data.XmlWriter等扩展定义的数据格式...
将一个记录集合编译为由Ext.data.JsonWriter或者Ext.data.XmlWriter等扩展定义的数据格式，为服务器端写入操作server-write action做准备。头两个参数同Ext.apply类似，第一个用来接受，第二个是源。
参数:
  • params : Object
    请求参数接收器。
  • baseParams : Object
    在 Ext.data.Store.baseParams中定义。 baseParms必须由扩展类编码，如： Ext.data.JsonWriter， Ext.data.XmlWriter。
  • action : String
    [ create|update|destroy]
  • rs : Record/Record[]
    写入的记录集合，即写动作的目标。
返回值:
  • void
DataWriter
createRecord ( Ext.data.Record rec ) : Array
createRecord
createRecord
参数:
  • rec : Ext.data.Record
返回值:
  • Array
    <tt>name:value</tt> 数组 {@link Ext.data.Record}属性对。参见 {@link Ext.data.DataWriter#toHash}。
XmlWriter
destroyRecord ( Ext.data.Record rec ) : Array
销毁记录
销毁记录
参数:
  • rec : Ext.data.Record
返回值:
  • Array
    包含属性对象（name/value）的数组，表示 {@link Ext.data.DataReader#idProperty idProperty}.
XmlWriter
render ( Object params , Object baseParams , Object/Object[] data ) : void
XmlWriter写操作的最后一步。
XmlWriter写操作的最后一步。
参数:
  • params : Object
    写入传输代理(例如: Ext.Ajax.request) 的对象参数。
  • baseParams : Object
    Ext.data.Store.baseParams中定义。 baseParms必须被其他的类编译，如： Ext.data.JsonWriter， Ext.data.XmlWriter。
  • data : Object/Object[]
    展示被编译的记录集合的数据对象。
返回值:
  • void
XmlWriter
toArray ( Hash data ) : [Object]
将一个散列化Hashed的Ext.data.Record转化成为适合通过XTemplate编...
将一个散列化Hashed 的Ext.data.Record转化成为适合通过XTemplate编码为xml的字段数组， 例如：
<tpl for="."><{name}>{value}</{name}</tpl>
 non-phantom（非仿真，译者注：仿真phantom指的是记录不存在于服务器端，即前台伪数据）
{id: 1, first: 'foo', last: 'bar'} --> [{name: 'id', value: 1}, {name: 'first', value: 'foo'}, {name: 'last', value: 'bar'}]
 如果希望id自动产生，则Phantom （仿真）记录在 toHash中省略id属性。非AUTOINCREMENT的主键应该被保护起来。
参数:
  • data : Hash
    被Ext.data.DataWriter#toHash散列化的数据
返回值:
  • [Object]
    属性对象数组。
DataWriter
toHash ( Ext.data.Record rec , Object config ) : Object
将一条记录转化为散列表，其过程要考虑到Ext.data.Record的影响渲染的配置...
将一条记录转化为散列表，其过程要考虑到Ext.data.Record的影响渲染的配置属性的状态，如 writeAllFields、 phantom、 getChanges 和 idProperty
参数:
  • rec : Ext.data.Record
    用来散列化的记录。
  • config : Object
    未实现。将会实现一个exlude/only（排除/仅包含）配置项，用于良好控制哪些字段应该/不应该渲染。
返回值:
  • Object
DataWriter
updateRecord ( Ext.data.Record rec ) : Array
更新记录
更新记录
参数:
  • rec : Ext.data.Record
返回值:
  • Array
    {@link Ext.data.Record}{name:value}组成的数组。 参见{@link Ext.data.DataWriter#toHash}.
XmlWriter

公共事件

该类没有公共事件。


Observable
    Component
      BoxComponent
        DataView

Class Ext.DataView

包: | Ext
定义类的文件: | DataView.js
类: | DataView
子类: | ListView
继承自: | BoxComponent
一种使用定制的模板布局和格式展示数据的机制。 DataView使用一个Ext.XTemplate作为其内部的模板机制， 并被绑定到一个Ext.data.Store， 这样当store中的数据发生变化时视图将自动同步以反应变化。 视图也内建了对许多可能发生的通用事件的处理，包含项目被单击、双击、鼠标滑过、鼠标移出等等， 同时也有一个内建的选择模型（selection model）。 为了使用这些特性，必须为DataView提供一个itemSelector配置项， 用来决定与哪个节点配合使用。

以下的例子将一个DataView绑定到一个Ext.data.Store， 并将它渲染到一个Ext.Panel中。

var store = new Ext.data.JsonStore({
    url: 'get-images.php',
    root: 'images',
    fields: [
        'name', 'url',
        {name:'size', type: 'float'},
        {name:'lastmod', type:'date', dateFormat:'timestamp'}
    ]
});
store.load();

var tpl = new Ext.XTemplate(
    '<tpl for=".">',
        '<div class="thumb-wrap" id="{name}">',
        '<div class="thumb"><img src="{url}" title="{name}"></div>',
        '<span class="x-editable">{shortName}</span></div>',
    '</tpl>',
    '<div class="x-clear"></div>'
);

var panel = new Ext.Panel({
    id:'images-view',
    frame:true,
    width:535,
    autoHeight:true,
    collapsible:true,
    layout:'fit',
    title:'Simple DataView',

    items: new Ext.DataView({
        store: store,
        tpl: tpl,
        autoHeight:true,
        multiSelect: true,
        overClass:'x-view-over',
        itemSelector:'div.thumb-wrap',
        emptyText: 'No images to display'
    })
});
panel.render(document.body);

配置项

Config Options Defined By
allowDomMove : Boolean
在渲染时组件是否可以移动Dom节点(默认为true)。
Component
anchor : String
注: 这个配置只用于该组件被包含在一个已使用AnchorLayout...

注: 这个配置只用于该组件被包含在一个已使用 AnchorLayout (或者其子类)配置的Container时。 基于布局管理器，例如：

  • Ext.form.FormPanel
  • 指定 layout: 'anchor' // or 'form', or 'absolute'

参见 Ext.layout.AnchorLayout. anchor 。

BoxComponent
applyTo : Mixed
指定一个元素的id、一个DOM元素或者一个已经存在并被渲染到DIV中的元素，此DIV已经被...

指定一个元素的id、一个DOM元素或者一个已经存在并被渲染到DIV中的元素，此DIV已经被 渲染到document中，并且为当前组件指定了一些结构化的标签。

  • 描述 :
      当使用了 applyTo， 在主元素中也可以用id或者CSS类名来指定组件的托管部分， 并且，如果可以的话，创建的组件可能也会试图在那个标签中创建它的子组件。
  • 注意 :
      当使用此配置项时，无需调用render()方法。
      如果指定了applyTo属性，任何传递给 renderTo 的值都会被忽略，并且目标元素的父节点将会自动被用作组件的容器。
Component
autoEl : Mixed
一个表签名或者一个 DomHelper 描述，用来创建 Element ，它将封装当前组件...

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

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

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

{
    xtype: 'box',
    autoEl: {
        tag: 'img',
        src: 'http://www.example.com/example.jpg'

    }
}, {
    xtype: 'box',
    autoEl: {
        tag: 'blockquote',
        html: 'autoEl is cool!'
    }
}, {
    xtype: 'container',
    autoEl: 'ul',
    cls: 'ux-unordered-list',
    items: {
        xtype: 'box',
        autoEl: 'li',
        html: 'First list item'
    }
}
Component
autoHeight : Boolean
如果值为true，height配置项为'auto'，否则值为false的话使用固定的高度...

如果值为true，height配置项为'auto'，否则值为false的话使用固定的高度， 或者可以由其父类容器 layout manager来控制。(默认值为 false)。

注: 虽然很多组件继承了这个配置选项，但不是所有这些组件的自适应高度配置都会像期望的那样起作用。 设置autoHeight：值为true时，浏览器将根据元素的内容自动设置高度，这将意味着Ext不会去管理高度。

如果是由浏览器来管理高度，需要注意的是，通过浏览器进行调整的结构组件内不能被发现， 因此宽度的变化可能导致需要进行同步处理元素的高度。 例如：

var w = new Ext.Window({
    title: 'Window',
    width: 600,
    autoHeight: true,
    items: {
        title: 'Collapse Me',
        height: 400,
        collapsible: true,
        border: false,
        listeners: {
            beforecollapse: function() {
                w.el.shadow.hide();
            },
            beforeexpand: function() {
                w.el.shadow.hide();
            },
            collapse: function() {
                w.syncShadow();
            },
            expand: function() {
                w.syncShadow();
            }
        }
    }
}).show();
BoxComponent
autoScroll : Boolean
如果值为true，将会在该元素上使用overflow:'auto'配置，并且在必要的时候...
如果值为true，将会在该元素上使用overflow:'auto'配置，并且在必要的时候自动显示滚动条，否则，溢出部分的组件都会被切除(默认值为 false)。
BoxComponent
autoShow : Boolean
如果组件需要检测隐藏CSS属性(如 'x-hidden' 或者 'x-hide-display')并且在渲染时删除...
如果组件需要检测隐藏CSS属性(如 'x-hidden' 或者 'x-hide-display')并且在渲染时删除它们 (默认为false)，设置此值为true。
Component
autoWidth : Boolean
如果为true，使用width:'auto'配置，否则使用固定的宽度...

如果为true，使用width:'auto'配置，否则使用固定的宽度，或者可以由其父类容器的layout manager来控制。(默认值为 false)。

注: 虽然很多组件继承了这个配置选项，但不是所有这些组件的自适应宽度配置都会像期望的那样起作用。 设置autoWidth：值为true时，浏览器将根据元素的内容自动设置宽度，这将意味着Ext不会去管理宽度。

如果是由浏览器来管理宽度，需要注意的是，通过浏览器进行调整的结构组件内不能被发现，因此宽度的变化可能导致需要进行同步处理元素的宽度。 例如，在这个元素的目标是：

<div id='grid-container' style='margin-left:25%;width:50%'></div>
当浏览器窗口改变时，渲染后的Panel必须监听浏览器窗口大小的变化，以便通知子项，浏览器改变了其宽度：

var myPanel = new Ext.Panel({
    renderTo: 'grid-container',
    monitorResize: true, // relay on browser resize
    title: 'Panel',
    height: 400,
    autoWidth: true,
    layout: 'hbox',
    layoutConfig: {
        align: 'stretch'
    },
    defaults: {
        flex: 1
    },
    items: [{
        title: 'Box 1',
    }, {
        title: 'Box 2'
    }, {
        title: 'Box 3'
    }],
});
BoxComponent
blockRefresh : Boolean
设置此项为true可以忽略所绑定store上的datachanged事件。 如果你希望通过插件提供自定义的转换动画...
设置此项为true可以忽略所绑定store上的datachanged事件。 如果你希望通过插件提供自定义的转换动画，这非常有用(默认为false)。
DataView
boxMaxHeight : Number
设置组件的最大高度值...

设置组件的最大高度值。

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

BoxComponent
boxMaxWidth : Number
设置组件的最大宽度值...

设置组件的最大宽度值。

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

BoxComponent
boxMinHeight : Number
设置组件的最小高度值...

设置组件的最小高度值。

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

BoxComponent
boxMinWidth : Number
设置组件的最小宽度值...

设置组件的最小宽度值。

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

BoxComponent
bubbleEvents : Array
一个事件数组，当这些事件被触发时，将会被冒泡到所有父容器中。参见....

一个事件数组，当这些事件被触发时，将会被冒泡到所有父容器中。参见 Ext.util.Observable.enableBubble。 默认为 []。

Component
clearCls : String
应用到特殊的clearing div的CSS类， 这个clearing div直接渲染到每个form field的包装器后面...

应用到特殊的clearing div的CSS类， 这个clearing div直接渲染到每个form field的包装器后面，以提供 清除field的功能(默认为 'x-form-clear-left')。

注意: 只有在当前组件被渲染到一个使用FormLayout 布局(例如 Ext.form.FormPanel 或者指定 layout:'form')的 容器中、或者是指定了一个fieldLabel 、或者指定isFormField=true 时此配置才有效。

另请参见 Ext.layout.FormLayout. fieldTpl。

Component
cls : String
一个可选的额外CSS类，它将被添加到当前组件的元素上(默认为'')...
一个可选的额外CSS类，它将被添加到当前组件的元素上(默认为'')。 此属性对于在组件上，或者它的任何使用标准CSS规则的孩子节点上， 添加定制的样式非常有用。
Component
contentEl : String
(可选)指定一个已存在的HTML元素，或者一个已存在HTML元素的...

(可选)指定一个已存在的HTML元素，或者一个已存在HTML元素的 id ，它们将被用作当前组件的内容。

  • 描述 :
    此配置选项被用来将一个已存在的HTML元素 插入到一个新组件(在组件渲染之后它简单地移动DOM元素) 的layout元素中，使它成为该组件的内容。
  • 注意 :
    指定的HTML元素将被append到组件的layout元素中， 在所有配置的 HTML 被插入之后， 并且，这样的话，在render事件 被触发时，document中将不再包含此元素。
    指定的HTML元素将不会参与组件所有可能使用的 layout 过程(译者注：指这些HTML元素 不会参与布局操作)。 它仅是HTML而已。布局操作实在孩子 items 上进行的。
    添加 x-hidden 或者 x-hide-display CSS类，以防在内容渲染到panel时发生闪烁。
Component
ctCls : String
一个可选的外部CSS样式，添加到这个组件的容器(默认值为 '')。 这个方法对于使用标准的CSS规则...

一个可选的外部CSS样式，添加到这个组件的容器(默认值为 '')。 这个方法对于使用标准的CSS规则，为组件或它的任何一个子组件添加特定的样式非常有用。 参见 Ext.layout.ContainerLayout和 extraCls 。

注意: ctCls 默认为 ''期望如下的类，它们将指定一个默认值:

  • Box Layout : 'x-box-layout-ct'
使用一个额外的CSS类配置以上的Class，它是append到默认对象上的。例如， 对于BoxLayout (Hbox and Vbox):
                                ctCls: 'x-box-layout-ct custom-class'

Component
data : Mixed
初始化数据集，它将被应用到 tpl 上以刷新组件的内容区域。
Component
deferEmptyText : Boolean
设置为true以延迟应用emptyText直到store第一次加载
DataView
disabled : Boolean
当前组件处于无效状态时为true。 Read-only.
Component
disabledClass : String
当组件处于无效状态时添加到组件上的CSS类(默认为 'x-item-disabled')。
Component
emptyText : String
当没有数据时显示在视图中的文本 (默认值为 '')。
DataView
fieldLabel : String
紧靠此field显示的标签文本(默认值为 '')。注意...

紧靠此field显示的标签文本(默认值为 '')。

注意:只有在当前组件被渲染到一个使用FormLayout 的容器中时，此配置才有效。 (例如 Ext.form.FormPanel 或 指定 layout:'form')。

另请参见 hideLabel 、 Ext.layout.FormLayout和 fieldTpl。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Name'
    }]
});
Component
flex : Number
注: 这个配置只用于该组件被包含在一个已使用BoxLayout配置的Container中时...

注: 这个配置只用于该组件被包含在一个已使用BoxLayout配置的Container中时。通过计算每一个子组件的flex值所占全部flex值之和的比例，来决定子组件的宽(HBoxLayout)高(VBoxlayout)。 任何子项的 flex = 0 或 flex = undefined 将不被设置(初始值大小将不被改变)。

BoxComponent
height : Number
组件的高度(默认值为 auto)。注:如果想使用百分比的方式...
组件的高度(默认值为 auto)。注:如果想使用百分比的方式来设置值，请查看 Ext.Component.anchor。
BoxComponent
hidden : Boolean
如果当前组件处于隐藏状态，此值为true。Read-only。
Component
hideLabel : Boolean
true时完全隐藏label元素 ( label 和 separator)。 默认为 false。 默认情况下，即使你不指定...

true时完全隐藏label元素 ( label 和 separator)。 默认为 false。 默认情况下，即使你不指定 fieldLabel 它的空间仍然会被保留，这样这块区域会与其它确实拥有label的区域位于同一排。 讲此值设置为 true 将导致此区域不再保留此空间。

注意: 参见 clearCls 的注释。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield'
        hideLabel: true
    }]
});
Component
hideMode : String
组件如何隐藏，支持的值有： 'visibility' (css visibility), 'offsets' (位置偏移量为负值) 和...

组件如何隐藏，支持的值有： 'visibility' (css visibility), 'offsets' (位置偏移量为负值) 和 'display' (css display).

注意:一般首选默认值 'display'，因为当组件第一次显示的时候它们会自动进行布局 (隐藏的时候不会调整尺寸)。

Component
hideParent : Boolean
此值为true时，当调用hide/show方法时，将会hide和show组件的容器...
此值为true时，当调用hide/show方法时，将会hide和show组件的容器；false时将会 hide和show组件自身(默认为false)。例如，这可以用作window上隐藏按钮的一种 快捷操作，通过设置此按钮的hideParent:true，然后把它添加到window上。
Component
html : String/Object
一个HTML片段，或者一个 DomHelper 描述，用作layout元素的内容(默认为'')。...
一个HTML片段，或者一个 DomHelper 描述，用作layout元素的内容(默认为'')。 这个HTML内容在组件渲染之后才被添加，所以在 render 出发的时候，document中尚未包含此HTML。 但是这个内容将会在所有配置的 contentEl 之前被插入到body标签中。
Component
id : String
当前组件唯一的id(默认为auto-assigned id)...

当前组件唯一的id(默认为auto-assigned id)。 如果你需要在以后访问组件，而又没有一个有效的组件对象引用，那么你需要指定一个 id( 也就是，使用Ext. getCmp方法 )。

注意，此id也将被用作组件底层HTML标签的id，这些标签被渲染到页面中。 这将允许你编写基于id的CSS规则，以独立地描述指定的实例；并且，也可以通过 组件父标签的id选中子元素。

注意:为了避免与唯一的id 产生重复， 请参见 itemId 和 ref 。

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

Component
itemCls : String
注意: 只有在当前组件被渲染到一个使用FormLayout 布局的 容器中时此配置才有效...

注意: 只有在当前组件被渲染到一个使用FormLayout 布局的 容器中时此配置才有效。 (例如Ext.form.FormPanel 或者指定 layout:'form')。

一个附加的CSS类，应用到div上，包装当前field的表单元素。 如果提供了此参数， field级上的itemCls将会覆盖 container级上提供的 默认itemCls。 为itemCls指定的值将会被添加默认的 类('x-form-item')。

既然它被应用到项目的包装器上(参见 Ext.layout.FormLayout。 fieldTpl)， 它将允许你编写能应用到此field、label(如果有指定)、或者field内部任何其它元素的标准CSS规则。

注意: 参考 fieldLabel的注释。 .

示例用法:

// Apply a style to the field's label:
<style>
    .required .x-form-item-label {font-weight:bold;color:red;}
</style>

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Name',
        itemCls: 'required' //this label will be styled
    },{
        xtype: 'textfield',
        fieldLabel: 'Favorite Color'
    }]
});
Component
itemId : String
当没有可利用的对象引用时，itemId可以作为第二选择，用来获得一个组件的引用， 代替 ...

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

var c = new Ext.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'); // 与 Ext.getCmp()不同

p2 = p1.ownerCt.getComponent('p2'); // 通过兄弟对象获得引用

另请参见 id 和 ref 。

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

Component
itemSelector : String
这是一个必须的配置项。 一个简单的CSS选择器(例如div.some-class 或者span:first-child) ， 被用来决定...
这是一个必须的配置项。 一个简单的CSS选择器(例如div.some-class 或者span:first-child) ， 被用来决定DataView与什么节点协同工作。
DataView
labelSeparator : String
每个fieldLabel 文本后面现实的分隔符。 此属性可以在多个层次上进行配置...

每个fieldLabel 文本后面现实的分隔符。 此属性可以在多个层次上进行配置。优先顺序为：

  • field / component level
  • container level
  • layout level (默认为冒号 ':')
如不需要为当前field的label显示分隔符，指定一个空字符串''即可。

注意:参见 clearCls 的注释。

另请参见 hideLabel 和 Ext.layout.FormLayout。 fieldTpl。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    layoutConfig: {
        labelSeparator: '~'   // layout config has lowest priority (defaults to ':')
    },
    labelSeparator: '>>',     // config at container level
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Field 1',
        labelSeparator: '...' // field/component level config supersedes others
    },{
        xtype: 'textfield',
        fieldLabel: 'Field 2' // labelSeparator will be '='

    }]
});
Component
labelStyle : String
一个CSS样式描述字符串，它将直接应用到当前field的label上...

一个CSS样式描述字符串，它将直接应用到当前field的label上。 如果有设置，默认为容器的labelStyle值(例如 Ext.layout.FormLayout.labelStyle , 或者 '')。

注意:参见 clearCls 的注释。

另请参见 hideLabel 和 Ext.layout.FormLayout. fieldTpl。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Name',
        labelStyle: 'font-weight:bold;'
    }]
});
Component
listeners : Object
一个包含一个或多个事件处理器的配置对象，会在初始化的时候被添加到目标对象上...

一个包含一个或多个事件处理器的配置对象，会在初始化的时候被添加到目标对象上。 该配置对象应该是一个有效的监听器配置对象就像 addListener例子中指定的一样可一次附加多个处理器。

ExtJs Components上的DOM事件

一些 ExtJs Component 类导出时会选择一些DOM事件(例如 "click", "mouseover" 等等), 这通常只是在有额外的值可以被添加时发生。例如DataView类的 click事件会传递被点击的节点。也可以直接在Component的HTMLElementevent上访问DOM事件，但必需在Component被渲染后监听器才能添加到Element 上。可以按照以下步骤添加插件:

// 插件会用一个监听器配置对象进行配置。
//该组件会被添加到所有处理方法的参数列表上。
Ext.DomObserver = Ext.extend(Object, {
    constructor: function(config) {
        this.listeners = config.listeners ? config.listeners : config;
    },

    // 组件将自己传递进了插件的初始化方法里
    init: function(c) {
        var p, l = this.listeners;
        for (p in l) {
            if (Ext.isFunction(l[p])) {
                l[p] = this.createHandler(l[p], c);
            } else {
                l[p].fn = this.createHandler(l[p].fn, c);
            }
        }

        // 渲染后立即添加监听器到元素上
        c.render = c.render.createSequence(function() {
            var e = c.getEl();
            if (e) {
                e.on(l);
            }
        });
    },

    createHandler: function(fn, c) {
        return function(e) {
            fn.call(this, e, c);
        };
    }
});

var combo = new Ext.form.ComboBox({

    // 元素被点击后折叠
    plugins: [ new Ext.DomObserver({
        click: function(evt, comp) {
            comp.collapse();
        }
    })],
    store: myStore,
    typeAhead: true,
    mode: 'local',
    triggerAction: 'all'
});

Observable
loadingText : String
在进行数据加载操作时显示的字符串 (默认值为 undefined)。 如果指定，此文本会被显示在一个加载div中...
在进行数据加载操作时显示的字符串 (默认值为 undefined)。 如果指定，此文本会被显示在一个加载div中， 并且在进行加载时view的内容会被清除掉； 否则， view的内容将仍然会显示直到新的数据 加在完成并且内容被替换掉。
DataView
margins : Object
注:此配置只用于该组件展现在一个使用BorderLayout...

注:此配置只用于该组件展现在一个使用BorderLayout 或 BoxLayout的两个子类之一作为布局的容器。

这个margins对象在该组件中的格式为：

{top: (top margin),right: (right margin),bottom: (bottom margin),left: (left margin)}

也可以是一个字符串，中间用空格分隔，margin值为数字。 把matches中每一个值的次序跟CSS中margin值的排列方式相对应：

  • 如果只有一个值，它适用于所有方面。
  • 如果有两个值，top和bottom的边框设置为第一个值，left和right设置为第二个值。
  • 如果有三个值，top设置为第一个值，left和right设置为第二个值，bottom设置为第三个值。
  • 如果有四个值，分别设置为top, right, bottom, left。

默认值:

{top:0, right:0, bottom:0, left:0}
BoxComponent
multiSelect : Boolean
设置为true，以便允许一次选择多个项目，设置为false一次只允许选择唯一个项目或者不选择， 这取决于singleSelect的值...
设置为true，以便允许一次选择多个项目，设置为false一次只允许选择唯一个项目或者不选择， 这取决于singleSelect的值(默认值为 false)。
DataView
overClass : String
当鼠标滑过时被应用到视图中每个项目的CSS类 (默认为undefined)。
DataView
overCls : String
一个可选的额外的CSS类，它将在鼠标移过元素时被添加到组件上...
一个可选的额外的CSS类，它将在鼠标移过元素时被添加到组件上，鼠标移出时 删除。(默认为'')。此属性对于在组件上，或者它的任何使用标准CSS规则的孩子节点上， 添加定制的'active' 或者 'hover'样式非常有用。
Component
pageX : Number
如果该组件被包含在一个指定位置的容器中，这个值表示页面级的x坐标值（译者注：在有滚动条的情况下这个值很有用）。
BoxComponent
pageY : Number
如果该组件被包含在一个指定位置的容器中，这个值表示页面级的y坐标值（译者注：在有滚动条的情况下这个值很有用）。
BoxComponent
plugins : Object/Array
一个对象或者一个对象数组，为组件提供特殊的功能 ...
一个对象或者一个对象数组，为组件提供特殊的功能。 对一个合法的插件唯一的要求是它含有一个init()方法， 能接收一个Ext.Component型的参数。 当组件被创建时，如果有可用的插件，组件将会调用每个插件的init方法， 并将自身的引用作为方法参数传递给它。然后，每个插件就可以调用方法或者响应组件上的事件， 就像需要的那样提供自己的功能。
Component
ptype : String
需要创建配置的ptype。 当传递一个配置对象给构造函数时...
需要创建配置的ptype。 当传递一个配置对象给构造函数时，此配置选项不会被使用。 只有在使用懒初始化的时候此配置项才会被使用， 此时Plugin不是 通过一个完整的实例组件，而是通过一个Component配置指定的。 在渲染时，将会查找ptype以决定创建何种类型的Plugin。

如果你创建自己的Plugin，你可以通过 Ext.ComponentMgr.registerPlugin 对它们进行注册，以便能利用懒初始化和渲染机制。
Component
ref : String
一个路径描述，与组件的 ownerCt 相关，它描述了把当前组件的命名引用放置到哪个父容器中去。...

一个路径描述，与组件的 ownerCt 相关，它描述了把当前组件的命名引用放置到哪个父容器中去。

祖先的坐标路径可以通过'/'字符进行分隔。 例如，将一个Toolbar Button的引用放入 拥有此Toolbar的Panel中:

var myGrid = new Ext.grid.EditorGridPanel({
    title: 'My EditorGridPanel',
    store: myStore,
    colModel: myColModel,
    tbar: [{
        text: 'Save',
        handler: saveChanges,
        disabled: true,
        ref: '../saveButton'
    }],
    listeners: {
        afteredit: function() {
//          The button reference is in the GridPanel
            myGrid.saveButton.enable();
        }
    }
});

在上面的代码中，如果 ref 是 'saveButton' ，那么引用将会被放置到Toolbar中。 ref 中的每个'/' 都会从组件的 ownerCt 向上移动一级。

另请参见 added 和 removed 事件。

Component
region : String
注: 此配置只用于该组件展现在一个布局为BorderLayout的容器中...

注: 此配置只用于该组件展现在一个布局为BorderLayout的容器中(例如指定layout:'border')。

详见Ext.layout.BorderLayout。

BoxComponent
renderTo : Mixed
该值可以是一个节点的id、一个DOM节点或者一个已存在的元素...

该值可以是一个节点的id、一个DOM节点或者一个已存在的元素， 组件将会被渲染到其中。

  • 注意 :
      如果组件不是一个Container 的子项目时， 不要使用此选项。 渲染和管理它的子项目是一个Container 的layout manager的责任。
      当使用此配置项时，无需调用render()方法。

另请参见 render 。

Component
selectedClass : String
应用到视图中每个选中项目的CSS类(默认值为'x-view-selected')。
DataView
simpleSelect : Boolean
设置为true，启用在多个项目上点击时进行多选， 而不需要用户按住Shift或者Ctrl，false时，如果需要...
设置为true，启用在多个项目上点击时进行多选， 而不需要用户按住Shift或者Ctrl，false时，如果需要 选中多于一个项目时，将强制用户必须按住Ctrl或者Shift (默认值为 false)。
DataView
singleSelect : Boolean
True将会严格地一次只许选中一个节点，false可以不选择任何节点 (默认为false)。注意如果multiSelect = true...
True将会严格地一次只许选中一个节点，false可以不选择任何节点 (默认为false)。注意如果multiSelect = true，此值将会被忽略。
DataView
stateEvents : Array
一个事件数组，当它们被触发时，组件需要保存自己的状态(默认值为 none)...

一个事件数组，当它们被触发时，组件需要保存自己的状态(默认值为 none)。 它们可以是任何该组件支持的事件类型，包括浏览器事件和 自定义事件(例如['click', 'customerchange'])。

对于保存和恢复组件状态的详细解释，参见 stateful

Component
stateId : String
为该组件指定的唯一的id值，它被用作管理组件状态的目的...
为该组件指定的唯一的id值，它被用作管理组件状态的目的。 (如果设定了id，默认值为组件自己的id，否则，如果组件使用自动生成的id，此值为null)。

对于保存和反解析组件状态的解释，参见 stateful 。

Component
stateful : Boolean
一个标志参数，它将引起组件在启动时尝试从一个保存的状态中恢复内部状态参数...

一个标志参数，它将引起组件在启动时尝试从一个保存的状态中恢复内部状态参数。 组件必须要么拥有一个 stateId 或者 id ，它们被分配给需要被管理的状态属性。 在跨页面加载时，不保证自动生成的id属性的稳定性， 并且，不能依赖此id来保存和恢复一个组件的相同状态。

为了保存状态的操作能够工作，状态管理器的提供者必须 被设置成一个Ext.state.Provider 的实现类，它覆盖了set 和get 方法，以便保存和恢复name/value对。 有一个内置的Ext.state.CookieProvider 可用。

为当前页面设置状态提供者:

Ext.state.Manager.setProvider(new Ext.state.CookieProvider({
    expires: new Date(new Date().getTime()+(1000*60*60*24*7)), //7 days from now
}));

当 stateEvents 配置项中其中之一的事件被触发时， 一个状态可保存的组件将试图保存其状态。

保存状态时，一个可保存状态的组件首先需要通过调用 getState 方法来序列化它的状态。 默认情况下，此函数什么事都不做。 开发者必须提供一个实现，返回一个hash对象，它描述了组件可恢复的状态。

getState方法产生的值将会传递给 Ext.state.Manager.set 方法，它使用配置的 Ext.state.Provider 来保存对象，以组件的 stateId 为key，或者，如果此值（指stateId）没有指定时， 使用它的 id 作为key。

在进行构造时，一个可保存状态的组件试图通过调用 Ext.state.Manager.get方法来 恢复它的状态，传递 stateId 或者，如果此值（指stateId）没有指定时， 使用它的 id 作为参数。

结果对象被传递给 applyState 。 applyState 的默认实现只是简单地把属性拷贝到对象中， 但是开发者可以覆盖此方法以支持更多行为。

通过向 beforestaterestore, staterestore, beforestatesave 和 statesave 事件上绑定监听器，你可以在保存和恢复状态时进行额外的处理。

Component
store : Ext.data.Store
当前DataView绑定到的Ext.data.Store 。
DataView
style : String
被添加到组件元素的特定样式。 必须是按照...
被添加到组件元素的特定样式。 必须是按照 Ext.Element.applyStyles 类指定格式的合法参数值。

new Ext.Panel({
    title: 'Some Title',
    renderTo: Ext.getBody(),
    width: 400, height: 300,
    layout: 'form',
    items: [{
        xtype: 'textarea',
        style: {
            width: '95%',
            marginBottom: '10px'
        }
    },
        new Ext.Button({
            text: 'Send',
            minWidth: '100',
            style: {
                marginBottom: '10px'
            }
        })
    ]
});
Component
tabTip : String
注: 这个配置只用于当该组件作为TabPanel的一个子项目时使用...

注: 这个配置只用于当该组件作为TabPanel的一个子项目时使用。

一个String类型的innerHTML(支持html标签)，当鼠标放在该选项上的时，显示一个tooltip。为了tips能够被渲染，Ext.QuickTips.init()必须被提前调用。
BoxComponent
tpl : String/Array
HTML标签或者一个标签数组，DataView将使用它们来组成模板。 必须指定到与Ext.XTemplate 的...
HTML标签或者一个标签数组，DataView将使用它们来组成模板。 必须指定到与Ext.XTemplate 的构造器所期望的格式相同。
DataView
tplWriteMode : String
刷新组件的内容区域时使用的Ext.(X)Template方式。 默认为'overwrite' (参见 Ext.XTemplate.overwrite )。
刷新组件的内容区域时使用的Ext.(X)Template方式。 默认为'overwrite' (参见 Ext.XTemplate.overwrite )。
Component
trackOver : Boolean
True将启用mouseenter和mouseleave事件
DataView
width : Number
组件的宽度(默认值为 auto)。注:如果想使用百分比的方式...
组件的宽度(默认值为 auto)。注:如果想使用百分比的方式来设置值，请查看 Ext.Component.anchor。
BoxComponent
x : Number
如果被包含在一个指定位置的容器中，这个值表示x(left)坐标值。
BoxComponent
xtype : String
需要创建配置的xtype。 当传递一个配置对象给构造函数时...
需要创建配置的xtype。 当传递一个配置对象给构造函数时，此配置选项不会被使用。 只有在使用懒初始化的时候此配置项才会被使用，此时容器的子项目不是 通过一个完整的实例组件，而是通过一个Component配置指定的。 在渲染时，将会查找xtype以决定创建何种类型的子组件。

预定义的xtype列表如下： here。

如果你继承Component创建你自己的组件，你需要使用Ext.ComponentMgr.registerType 对它们进行注册，以便利用懒初始化和渲染机制。
Component
y : Number
如果被包含在一个指定位置的容器中，这个值表示y(top)坐标值。
BoxComponent

公共属性

Property Defined By
disabled : Boolean
当前组件处于无效状态时为true。 Read-only.
Component
el : Ext.Element
封装了当前组件的Ext.Element。 Read-only。通常情况下，这将是一个<DIV>元素，它由此类的...

封装了当前组件的Ext.Element。 Read-only。

通常情况下，这将是一个<DIV>元素，它由此类的 onRender方法创建，但是它可以通过使用 autoEl 配置项进行覆盖。

注意: 直到组件渲染完成此元素都将处于无效状态。

如需向当前组件的 DOM事件(而不是当前组件自己的Observable事件)添加监听器， 更多建议，参见 listeners 配置项，或者直接使用一个render监听器:

new Ext.Panel({
    title: 'The Clickable Panel',
    listeners: {
        render: function(p) {
            // Append the Panel to the click handler's argument list.
            p.getEl().on('click', handlePanelClick.createDelegate(null, [p], true));
        },
        single: true  // Remove the listener after first invocation
    }
});

另请参见 getEl

Component
hidden : Boolean
如果当前组件处于隐藏状态，此值为true。Read-only。
Component
initialConfig : Object
当前组件的初始化配置描述。 Read-only。
Component
ownerCt : Ext.Container
组件所属的Container (默认为undefined，当前组件被添加到一个容器中时此值被自动设置)...
组件所属的Container (默认为undefined，当前组件被添加到一个容器中时此值被自动设置)。 Read-only。

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

Component
refOwner : Ext.Container
如果当前组件是一个容器的孩子，并且是通过一个 ref 配置项被注册的，则此值为 ref 引用被插入到的祖先容器。
如果当前组件是一个容器的孩子，并且是通过一个 ref 配置项被注册的，则此值为 ref 引用被插入到的祖先容器。
Component
rendered : Boolean
如果当前组件已经被渲染了，此值为true。Read-only.
Component

公共方法

Method Defined By
DataView ( Object config )
创建一个新的DataView
创建一个新的DataView
参数:
  • config : Object
    配置对象
返回值:
  • void
DataView
addClass ( string cls ) : Ext.Component
为组件底层的元素添加CSS样式。
为组件底层的元素添加CSS样式。
参数:
  • cls : string
    需要添加的CSS样式的class名称
返回值:
  • Ext.Component
    this
Component
addEvents( Object|String o, string Optional. ) : void
添加指定的事件到事件列表上，事件会被该Observable触发。
添加指定的事件到事件列表上，事件会被该Observable触发。
参数:
  • o : Object|String
    以事件名作为属性true作为值的对象 或者当多个事件名被分开的传递时则为第一个事件名。
  • Optional. : string
    事件名被分开的传递时则为事件名。 用法:
    this.addEvents('storeloaded', 'storecleared');
返回值:
  • void
Observable
addListener( String eventName, Function handler, [Object scope], [Object options] ) : void
给对象添加事件处理器。
给对象添加事件处理器。
参数:
  • eventName : String
    监听的事件名。
  • handler : Function
    事件调用的方法
  • scope : Object
    （可选）处理方法执行的作用域 (this的引用 reference)。 如果被忽略。默认为触发事件的对象。
  • options : Object
    （可选）包含处理器配置和属性的对象。 可能包含以下的属性:
    • scope : Object
      处理方法执行的作用域(this的引用) 。 如果被忽略。默认为触发事件的对象。
    • delay : Number
      在触发事件后延迟调用处理器的毫秒数。
    • single : Boolean
      如果为True则添加一个处理器来处理下一次的事件触发（仅一次），然后移除自己。
    • buffer : Number
      使得处理器延迟指定毫秒数后预定的运行在 一个Ext.util.DelayedTask中 。 如果事件在时间内再一次被触发，原始的处理器不会被调用，但是新的处理器会预定的在他的位置上。
    • target : Observable
      如果事件在目标的Observable上触发则仅仅调用处理器， 否则 事件会从子类的Observable上冒泡

    组合选项
    使用这些选项参数,可能会组合出不同类型的监听器：

    一个延迟的，一次性的监听器。

    myDataView.on('click', this.onClick, this, {
single: true,
delay: 100
});

    一次调用附加多个处理器
    该方法同样支持传递一个包含指定的多个处理器的属性的配置对象参数。

    myGridPanel.on({
'click' : {
    fn: this.onClick,
    scope: this,
    delay: 100
},
'mouseover' : {
    fn: this.onMouseOver,
    scope: this
},
'mouseout' : {
    fn: this.onMouseOut,
    scope: this
}
});

    或者一个简写的语法：

    myGridPanel.on({
'click' : this.onClick,
'mouseover' : this.onMouseOver,
'mouseout' : this.onMouseOut,
 scope: this
});
返回值:
  • void
Observable
applyToMarkup ( String/HTMLElement el ) : void
将此组件添加到已存在的有效的HTML标签中。 使用该方法时，无需再调用render()方法。
将此组件添加到已存在的有效的HTML标签中。 使用该方法时，无需再调用render()方法。
参数:
  • el : String/HTMLElement
返回值:
  • void
Component
bindStore ( Store store ) : void
改变绑定到当前视图的数据store并刷新视图。
改变绑定到当前视图的数据store并刷新视图。
参数:
  • store : Store
    需要绑定到当前视图的store
返回值:
  • void
DataView
clearSelections ( [ Boolean suppressEvent ] ) : void
清除所有选中。
清除所有选中。
参数:
  • suppressEvent : Boolean
    (可选)True将会跳过触发selectionchange事件
返回值:
  • void
DataView
cloneConfig ( Object overrides ) : Ext.Component
默认使用原先传递给当前实例的配置值克隆当前组件。
默认使用原先传递给当前实例的配置值克隆当前组件。
参数:
  • overrides : Object
    一个新的配置项，包含需要覆盖到克隆版本的所有属性。 可以传递一个id参数给此对象，否则将自动生成一个新的id以避免发生重复。
返回值:
  • Ext.Component
    当前组件的克隆副本
Component
collectData ( Array records , Number startIndex ) : Array
可以被覆盖的函数，它返回数据对象，传递给当前DataView的 template ...

可以被覆盖的函数，它返回数据对象，传递给当前DataView的 template 用来渲染整个DataView.

一般情况下，这是一个数据对象数组，其中每个元素都被 XTemplate 处理，它用'<tpl for=".">'把提供的数据对象当作数组进行迭代。 然而，命名属性也可以放入数据对象以便提供无重复的数据，例如题头、数据总 条数等等。

参数:
  • records : Array
    一个Ext.data.Record 数组，将被渲染到DataView中。
  • startIndex : Number
    准备渲染的Record的索引位置值。
返回值:
  • Array
    将被重复XTemplate处理的一个数据对象数组。 也可以包含<i>named</i>参数。
DataView
deselect ( HTMLElement/Number/Record node ) : void
反选一个节点。
反选一个节点。
参数:
  • node : HTMLElement/Number/Record
    节点、节点索引，或者一个需要反选的记录
返回值:
  • void
DataView
destroy () : void
通过如下方法销毁对象：删除所有的事件监听器、将组件的元素从DOM树中删除...
通过如下方法销毁对象：删除所有的事件监听器、将组件的元素从DOM树中删除（如果可以）、 将组件从它的 Ext.Container（如果可用）中删除、 并且将它从Ext.ComponentMgr中 注销。 销毁操作一般由框架自动完成，一般情况下不需要直接调用该方法。
参数:
  • 无。
返回值:
  • void
Component
disable () : Ext.Component
将组件置为无效状态，并出发'disable'事件。
将组件置为无效状态，并出发'disable'事件。
参数:
  • 无。
返回值:
  • Ext.Component
    this
Component
enable () : Ext.Component
将组件置为有效状态并触发'enable'事件。
将组件置为有效状态并触发'enable'事件。
参数:
  • 无。
返回值:
  • Ext.Component
    this
Component
enableBubble( String/Array events ) :void
是否现在使得事件会被该Observable触发并调用 this.getBubbleTarget()方法在拥有者的继承树...

是否现在使得事件会被该Observable触发并调用 this.getBubbleTarget()方法在拥有者的继承树中冒泡。Observable的基础类中没有该方法的实现。

该方法一般被Ext.Components用来冒泡事件到拥有者的容器。参看Ext.Component.getBubbleTarget默认的实现 在Ext.Component中返回组件的直接拥有者。但是如果需要的是一个已知的目标，该方法可以被重写来更快的访问需求的目标。

例子:

Ext.override(Ext.form.Field, {
    // 添加方法到Field的initComponent上改变事件为冒泡
    initComponent : Ext.form.Field.prototype.initComponent.createSequence(function() {
        this.enableBubble('change');
    }),

    // 我们知道我们想让Field的事件冒泡到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() {
            // 如果样式被修改标题会变红。
            myForm.header.setStyle('color', 'red');
        }
    }
});
参数:
  • events : String/Array
    冒泡的事件名，或事件名数组
返回值:
  • void
Observable
findItemFromChild ( HTMLElement node ) : HTMLElement
返回传递进来的孩子所属的模板节点，如果它不属于任何一个，返回null。
返回传递进来的孩子所属的模板节点，如果它不属于任何一个，返回null。
参数:
  • node : HTMLElement
返回值:
  • HTMLElement
    模板节点
DataView
findParentBy ( Function fn ) : Ext.Container
通过自定义的函数查找当前组件上层任何层次上的容器...
通过自定义的函数查找当前组件上层任何层次上的容器。 如果传递的函数返回true，容器对象将被返回。
参数:
  • fn : Function
    自定义的函数，使用如下参数调用(container,this component)。
返回值:
  • Ext.Container
    自定义函数返回true的第一个容器
Component
findParentByType ( String/Class xtype ) : Ext.Container
通过xtype或者class查找当前组件上层任何层次上的容器
通过xtype或者class查找当前组件上层任何层次上的容器
参数:
  • xtype : String/Class
    组件的xtype字符串，或者直接是组件的class
返回值:
  • Ext.Container
    符合指定xtype或者class的第一个容器
Component
fireEvent( String eventName, Object... args ) : Boolean
用传入的参数触发指定的事件 (减去事件名)。 一个事件可以被设置为冒泡 Obse...

用传入的参数触发指定的事件 (减去事件名)。

一个事件可以被设置为冒泡到Observable父类继承树(参看 Ext.Component.getBubbleTarget) 调用enableBubble实现。

参数:
  • eventName : String
    触发的事件名。
  • args : Object...
    传递给处理器的可变长度参数。
返回值:
  • Boolean
    如果有任何的处理器返回false则返回false，否则返回true。
Observable
focus ( [ Boolean selectText ], [ Boolean/Number delay ] ) : Ext.Component
尝试将当前组件设为焦点。
尝试将当前组件设为焦点。
参数:
  • selectText : Boolean
    (可选) 如果可用，同时选中组件内部的文本
  • delay : Boolean/Number
    (可选)将当前组件设置为焦点的延迟时间(设置为true等于0毫秒)
返回值:
  • Ext.Component
    this
Component
getBox ( [ Boolean local ] ) : Object
获取组件底层元素当前盒子模型的尺寸。（译者注：盒子模型是CSS术语，详细解释请自行搜索。）
获取组件底层元素当前盒子模型的尺寸。（译者注：盒子模型是CSS术语，详细解释请自行搜索。）
参数:
  • local : Boolean
    (可选)值为true时，组件的left值和top值将代替页面的XY被返回。(默认值为false)
返回值:
  • Object
    返回值的格式{x, y, width, height}
BoxComponent
getBubbleTarget () : Ext.Container
为Observable的fireEvent方法提供链接，它沿着继承结构进行冒泡操作。
为Observable的fireEvent方法提供链接，它沿着继承结构进行冒泡操作。
参数:
  • 无。
返回值:
  • Ext.Container
    拥有当前组件的容器。
Component
getEl () : Ext.Element
返回 Ext.Element ，它包装了当前组件。...

返回 Ext.Element ，它包装了当前组件。

通常情况下，这将是一个<DIV>元素，它是由该类的onRender方法创建的， 但是可以使用autoEl配置项 覆盖它。

注意: 此元素将会一直处于无效状态直到当前组件渲染完成。

如需向当前组件的 DOM事件(而不是当前组件自己的Observable事件)添加监听器， 更多建议，参见 listeners 配置项，或者直接使用一个render监听器:

new Ext.Panel({
    title: 'The Clickable Panel',
    listeners: {
        render: function(p) {
            // Append the Panel to the click handler's argument list.
            p.getEl().on('click', handlePanelClick.createDelegate(null, [p], true));
        },
        single: true  // Remove the listener after first invocation
    }
});
参数:
  • 无。
返回值:
  • Ext.Element
    包装当前组件的元素。
Component
getHeight () : Number
获取该组件的当前高度值。
获取该组件的当前高度值。
参数:
  • 无。
返回值:
  • Number
BoxComponent
getId () : String
返回当前组件的id，如果没有定义id，则自动生成并返回一个id:'ext-comp-'...
返回当前组件的 id 如果没有定义 id 则自动生成并返回一个 id

'ext-comp-' + (++Ext.Component.AUTO_ID)
参数:
  • 无。
返回值:
  • String
    id
Component
getItemId () : String
返回当前组件的 itemId 。 如果没有通过配置参数指定 itemId 那么，将会使用...
返回当前组件的 itemId 。 如果没有通过配置参数指定 itemId 那么，将会使用 getId 返回 id 。
参数:
  • 无。
返回值:
  • String
Component
getNode ( HTMLElement/String/Number/Ext.data.Record nodeInfo ) : HTMLElement
获取一个模板节点。
获取一个模板节点。
参数:
  • nodeInfo : HTMLElement/String/Number/Ext.data.Record
    一个HTMLElement模板节点、一个模板节点的索引、一个模板节点的 id，一个绑定到节点的记录
返回值:
  • HTMLElement
    节点，如果没有找到时为null
DataView
getNodes ( [ Number start ], [ Number end ] ) : Array
获取一个区间内的节点。
获取一个区间内的节点。
参数:
  • start : Number
    (可选)区间中第一个节点的索引
  • end : Number
    (可选)区间中最后一个节点的索引
返回值:
  • Array
    节点数组
DataView
getOuterSize () : Object
获取当前组件所在元素的尺寸大小，包括边缘的空白处。
获取当前组件所在元素的尺寸大小，包括边缘的空白处。
参数:
  • 无。
返回值:
  • Object
    一个包含元素大小的对象 {width: (element width + left/right margins), height: (element height + top/bottom margins)}
BoxComponent
getPosition ( [ Boolean local ] ) : Array
获取组件底层元素当前的XY位置。
获取组件底层元素当前的XY位置。
参数:
  • local : Boolean
    (可选)如果为true，将返回元素的left和top值，而不是相对于页面内的 XY。(默认值为 false)
返回值:
  • Array
    元素的XY位置值(例如：[100, 200])
BoxComponent
getRecord ( HTMLElement node ) : Record
从一个节点上获取一条记录
从一个节点上获取一条记录
参数:
  • node : HTMLElement
    需要求值的节点
返回值:
  • Record
    record {@link Ext.data.Record}对象
DataView
getRecords ( Array nodes ) : Array
从一个节点数组中获取一个记录数组
从一个节点数组中获取一个记录数组
参数:
  • nodes : Array
    需要求值的节点数组
返回值:
  • Array
    records {@link Ext.data.Record}对象数组
DataView
getResizeEl () : Ext.Element
返回该组件的最外层用来定义这些组件整体大小的Element...

返回该组件的最外层用来定义这些组件整体大小的Element对象。

通常用 getEl 方法将会返回相同的Element对象，但在有些情况下，组件可能有一些更多的封装了它的主要动态Element对象的Element对象。

例如ComboBox。它是封装在一个包含<input>元素的包装元素里(这将返回其 getEl方法和触发按钮的元素)。返回的元素为resizeEl。

参数:
  • 无。
返回值:
  • Ext.Element
    The Element which is to be resized by size managing layouts.
BoxComponent
getSelectedIndexes () : Array
获取所有选中节点的索引。
获取所有选中节点的索引。
参数:
  • 无。
返回值:
  • Array
    索引值数组
DataView
getSelectedNodes () : Array
获取当前选中的节点。
获取当前选中的节点。
参数:
  • 无。
返回值:
  • Array
    HTMLElement数组
DataView
getSelectedRecords () : Array
获取选中记录的数组
获取选中记录的数组
参数:
  • 无。
返回值:
  • Array
    一个{@link Ext.data.Record}对象数组
DataView
getSelectionCount () : Number
获取选中节点的个数。
获取选中节点的个数。
参数:
  • 无。
返回值:
  • Number
    节点数
DataView
getSize () : Object
获取组件底层元素当前的大小。
获取组件底层元素当前的大小。
参数:
  • 无。
返回值:
  • Object
    一个包含元素大小的对象{width: (element width), height: (element height)}
BoxComponent
getStore () : Ext.data.Store
返回绑定到当前DataView是Store。
返回绑定到当前DataView是Store。
参数:
  • 无。
返回值:
  • Ext.data.Store
    store
DataView
getWidth () : Number
获取该组件的当前宽度值。
获取该组件的当前宽度值。
参数:
  • 无。
返回值:
  • Number
BoxComponent
getXType () : String
获取当前组件的xtype，它是用 Ext.ComponentMgr 注册的。 所有可用的xtype列表，参见...
获取当前组件的xtype，它是用 Ext.ComponentMgr 注册的。 所有可用的xtype列表，参见 Ext.Component 类头部。示例用法:

var t = new Ext.form.TextField();
alert(t.getXType());  // alerts 'textfield'
参数:
  • 无。
返回值:
  • String
    The xtype
Component
getXTypes () : String
返回此组件的xtype继承树，用字符'-'分隔。 所有可用的xtype值...

返回此组件的xtype继承树，用字符'-'分隔。 所有可用的xtype值，请参见Ext.Component 类的头部。

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

示例用法:

var t = new Ext.form.TextField();
alert(t.getXTypes());  // alerts 'component/box/field/textfield'
参数:
  • 无。
返回值:
  • String
    xtype层次字符串
Component
hasListener( String eventName ) : Boolean
检测对象是否包含指定事件的任何监听器
检测对象是否包含指定事件的任何监听器
参数:
  • eventName : String
    检测的事件名
返回值:
  • Boolean
    如果事件被监听则为true，否则为false
Observable
hide () : Ext.Component
隐藏当前组件。 监听 beforehide' 事件并且返回false 可以取消隐藏组件的操作。 在隐藏组件之后触发...
隐藏当前组件。 监听 beforehide' 事件并且返回false 可以取消隐藏组件的操作。 在隐藏组件之后触发 ' hide' 事件。 如果组件被配置成 hidden 那么此方法在内部被调用。
参数:
  • 无。
返回值:
  • Ext.Component
    this
Component
indexOf ( HTMLElement/String/Number/Record nodeInfo ) : Number
查找所传递节点的索引。
查找所传递节点的索引。
参数:
  • nodeInfo : HTMLElement/String/Number/Record
    一个HTMLElement模板节点、模板节点索引、模板节点id，或者一个 绑定到节点的记录。
返回值:
  • Number
    节点的索引，或者-1
DataView
isSelected ( HTMLElement/Number/Ext.data.Record node ) : Boolean
如果所传递的节点处于选中状态，返回true，其它为false
如果所传递的节点处于选中状态，返回true，其它为false
参数:
  • node : HTMLElement/Number/Ext.data.Record
    需要检测的节点、节点索引或者记录
返回值:
  • Boolean
    如果处于选中状态为true，其它为false
DataView
isVisible () : Boolean
如果当前组件可见，返回true。
如果当前组件可见，返回true。
参数:
  • 无。
返回值:
  • Boolean
    如果当前组件可见，返回true，其它返回false。
Component
isXType ( String xtype , [ Boolean shallow ] ) : Boolean
Tests whether or not this Component is of a specific xtype. This can test whether this Component is descended from th...

测试此组件是否是指定的xtype。此方法既可以测试是否是指定的xtype的某个子类， 或者它是否直接是指定的xtype类(shallow=true)。

如果使用你自己的子类，必须知道组件必须注册它的xtype值。

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

示例用法:

var t = new Ext.form.TextField();
var isText = t.isXType('textfield');        // true
var isBoxSubclass = t.isXType('box');       // true, descended from BoxComponent
var isBoxInstance = t.isXType('box', true); // false, not a direct BoxComponent instance
参数:
  • xtype : String
    需要为当前组件进行检测的xtype
  • shallow : Boolean
    (可选) 如果为false，检测组件是否是xtype继承树中的某个子类（默认是这种情况）， 如果为true，只检测组件是否是指定的xtype类型。
返回值:
  • Boolean
    如果当前组件是指定xtype的子类，返回true，其它返回flase。
Component
mon ( Observable|Element item , Object|String ename , Function fn , Object scope , Object opt ) : void
向任何Observable对象(或者元素)上添加监听器，监听器将会在组件...

向任何Observable对象(或者元素)上添加监听器，监听器将会在组件销毁时被自动删除。
用法：

myGridPanel.mon(myGridPanel.getSelectionModel(), 'selectionchange', handleSelectionChange, null, {buffer: 50});

or:

myGridPanel.mon(myGridPanel.getSelectionModel(), {
    selectionchange: handleSelectionChange,
    buffer: 50
});
参数:
  • item : Observable|Element
    需要添加listener/listeners的项目。
  • ename : Object|String
    事件名，或者一个包含事件名属性的对象。
  • fn : Function
    (可选) 如果 ename 参数是一个事件名，此参数为处理函数。
  • scope : Object
    (可选)如果 ename 参数是一个事件名称，此参数是作用域 ( this 引用)，监听函数将会在此作用域中被执行。
  • opt : Object
    (可选)如果 ename 参数是一个事件名称， 此参数是 addListener 配置项。
返回值:
  • void
Component
mun ( Observable|Element item , Object|String ename , Function fn , Object scope ) : void
删除通过mon 方法添加的监听器。
删除通过mon 方法添加的监听器。
参数:
  • item : Observable|Element
    需要删除listener/listeners的项目。
  • ename : Object|String
    事件名称，或者一个包含事件名称属性的对象。
  • fn : Function
    (可选)如果 ename 参数是一个事件名称，此参数是一个处理函数。
  • scope : Object
    (可选)如果 ename 参数是一个事件名称，此参数是作用域 ( this 引用)，监听函数将会在此作用域中被执行。
返回值:
  • void
Component
nextSibling () : Ext.Component
返回所属容器中的下一个组件
返回所属容器中的下一个组件
参数:
  • 无。
返回值:
  • Ext.Component
Component
on( String eventName, Function handler, [Object scope], [Object options] ) : void
给对象添加事件处理器 (addListener的简写形式)
给对象添加事件处理器 (addListener的简写形式。)
参数:
  • eventName : String
    监听的事件类型
  • handler : Function
    事件调用的方法
  • scope : Object
    （可选）处理方法执行时的作用域 (this 的引用)。 如果被忽略。默认为触发事件的对象。
  • options : Object
    可选 包含处理器配置的对象。
返回值:
  • void
Observable
prepareData ( Array/Object data , Number recordIndex , Record record ) : Array/Object
一个可以被覆盖的函数，用来为每条记录提供自定义格式，这些记录被 当前DataView的template用来...
一个可以被覆盖的函数，用来为每条记录提供自定义格式，这些记录被 当前DataView的template用来 渲染每个节点。
参数:
  • data : Array/Object
    原始数据对象，被用来创建记录。
  • recordIndex : Number
    准备被渲染的Record的索引值。
  • record : Record
    准备被渲染的Record
返回值:
  • Array/Object
    格式化后的数据，格式与内部{@link #tpl template}的overwrite() 方法期望的格式相同(如果你的参数是数字(例如{0})可以是数组；或者是一个 对象(例如{foo: 'bar'}))
DataView
previousSibling () : Ext.Component
返回所属容器中的前一个组件
返回所属容器中的前一个组件
参数:
  • 无。
返回值:
  • Ext.Component
Component
purgeListeners() : void
移除对象上所有的监听器
移除对象上所有的监听器
参数:
  • 无。
返回值:
  • void
Observable
refresh () : void
通过从store重新加载数据刷新视图并重新渲染模板。
通过从store重新加载数据刷新视图并重新渲染模板。
参数:
  • 无。
返回值:
  • void
DataView
refreshNode ( Number index ) : void
从store刷新一个无效节点的数据。
从store刷新一个无效节点的数据。
参数:
  • index : Number
    项目数据在store中的索引
返回值:
  • void
DataView
relayEvents( Object o, Array events ) : void
从指定的Observable上传递选择的事件就好像被当前对象触发一样。
从指定的Observable上传递选择的事件就好像被当前对象触发一样。
参数:
  • o : Object
    该Observable上的事件被当前对象传递。
  • events : Array
    传递的数组名。
返回值:
  • void
Observable
removeClass ( string cls ) : Ext.Component
从组件底层的元素上删除一个CSS类。
从组件底层的元素上删除一个CSS类。
参数:
  • cls : string
    需要移除的CSS类名
返回值:
  • Ext.Component
    this
Component
removeListener( String eventName, Function handler, [Object scope] ) : void
删除一个事件处理器。
删除一个事件处理器。
参数:
  • eventName : String
    处理器关联的事件类型。
  • handler : Function
    移除的处理器。 这应该是传递到addListener里的方法的引用。
  • scope : Object
    （可选）处理器指定的初始作用域。
返回值:
  • void
Observable
render ( [ Element/HTMLElement/String container ], [ String/Number position ] ) : void
在传递进来的HTML元素中渲染当前组件。...

在传递进来的HTML元素中渲染当前组件。

如果你正在使用一个Container 对象放置当前组件，那么请不要使用render方法。

当容器第一次被渲染时，它的子组件将会被容器的 layout 管理器渲染。

某些布局管理器允许动态添加子组件。它们包括 Ext.layout.CardLayout, Ext.layout.AnchorLayout, Ext.layout.FormLayout, Ext.layout.TableLayout。

当一个新的子组件被添加时，如果容器已经被渲染了， 你可能需要调用容器的 doLayout 方法来刷新视图，它将导致所有没有被渲染的子组件进行渲染操作。 此操作是必须的，这样你可以添加多个子组件而只刷新一次layout。

当创建复杂的UI时，非常重要的一点是，请记住调整子项目的尺寸和位置是容器的 layout 管理器的职责。 如果你希望子项目的尺寸对用户交互作出反应， 你必须为容器配置一个布局管理器，它将创建和管理你心里想要的那种布局。

忽略容器的layout 配置意味着将会使用一个基本的布局管理器，它除了按次序把子组件 渲染到容器中之外什么事情都不做。 这种情况下，任何尺寸和位置的调整操作都不会发生。

参数:
  • container : Element/HTMLElement/String
    (可选) 需要在其中渲染当前组件的元素。 如果它是从一个已存在的标签中创建的，此参数应该被忽略。
  • position : String/Number
    (可选) 容器中的一个元素ID或者一个DOM节点索引， 当前组件将会被插入到它前面 (默认append到容器的尾部)
返回值:
  • void
Component
resumeEvents() : void
重新开始触发事件。(参见suspendEvents) 如果事件以queueSuspended参数被挂起，则在事件被挂起时 ...
重新开始触发事件。(参见 suspendEvents) 如果事件以queueSuspended 参数被挂起，则在事件被挂起时触发的事件会被传递到所有的监听器上
参数:
  • 无。
返回值:
  • void
Observable
select ( Array/HTMLElement/String/Number/Ext.data.Record nodeInfo , [ Boolean keepExisting ], [ Boolean suppressEvent ] ) : void
选中一组节点。
选中一组节点。
参数:
  • nodeInfo : Array/HTMLElement/String/Number/Ext.data.Record
    一个HTMLElement模板节点、一个模板节点的索引、一个模板节点的 id，一个绑定到节点的记录，或者以上需要选中的任意组合的一个数组
  • keepExisting : Boolean
    (可选)true将会保持现有的选中状态
  • suppressEvent : Boolean
    (可选)True将会跳过触发selectionchange事件
返回值:
  • void
DataView
selectRange ( Number start , Number end , [ Boolean keepExisting ] ) : void
选中一个范围内的节点。所有处于start和end之间的节点都会被选中。
选中一个范围内的节点。所有处于start和end之间的节点都会被选中。
参数:
  • start : Number
    区间中第一个节点的索引
  • end : Number
    区间中最后一个节点的索引
  • keepExisting : Boolean
    (可选)True将保留现有的选中
返回值:
  • void
DataView
setAutoScroll ( Boolean scroll ) : Ext.BoxComponent
设置该组件内容溢出时是否自动显示滚动条。
设置该组件内容溢出时是否自动显示滚动条。
参数:
  • scroll : Boolean
    值为true的话组件自动显示滚动条。
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setDisabled ( Boolean disabled ) : Ext.Component
工具函数，使用布尔值设置有效/无效(disabled/enabled )。
工具函数，使用布尔值设置有效/无效(disabled/enabled )。
参数:
  • disabled : Boolean
返回值:
  • Ext.Component
    this
Component
setHeight ( Mixed height ) : Ext.BoxComponent
设置此组件的高度。该方法将触发resize事件。
设置此组件的高度。该方法将触发resize事件。
参数:
  • height : Mixed
    The new height to set.
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setPagePosition ( Number x , Number y ) : Ext.BoxComponent
设置组件在页面中的XY位置。 如果需要设置left和top值 ，请使用...
设置组件在页面中的XY位置。 如果需要设置left和top值 ，请使用setPosition方法。 该方法触发move事件。
参数:
  • x : Number
    The new x position
  • y : Number
    The new y position
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setPosition ( Number left , Number top ) : Ext.BoxComponent
设置组件的left和top值。设置组件的页面XY值，请使用setPagePosition方法。该方法触发...
设置组件的left和top值。设置组件的页面XY值，请使用setPagePosition方法。该方法触发move事件。
参数:
  • left : Number
    The new left
  • top : Number
    The new top
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setSize ( Mixed width , Mixed height ) : Ext.BoxComponent
设置BoxComponent的宽度和高度。 此方法触发resize事件...
设置BoxComponent的宽度和高度。 此方法触发resize事件。此方法可以接收单独的width或者height值作为参数， 或者你可以传递像这样的一个size对象： {width:10, height:20} 。
参数:
  • width : Mixed
    设置的新的width值。这可以是：
    • 一个Number类型指定Element新的宽度 Ext.Element.defaultUnit(默认为像素 :'px')。
    • 一个String类型用于设置width的CSS样式。
    • 一个size对象格式为 {width: widthValue, height: heightValue} 。
    • 值为 undefined 时，保留原来的width不变。
  • height : Mixed
    设置的新的height值(如果第一个参数传递了一个size对象，此参数没有必要传递)。这可以是：
    • 一个Number类型指定Element新的高度 Ext.Element.defaultUnit(默认为像素 :'px')。
    • 一个String类型用于设置height的CSS样式。也有可能不会被使用到。
    • 值为 undefined 时，保留原来的height不变。
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setStore ( Store store ) : void
改变绑定到当前view的数据store并且刷新它(已废弃，推荐使用bindStore)
改变绑定到当前view的数据store并且刷新它(已废弃，推荐使用bindStore)
参数:
  • store : Store
    需要绑定到当前view的store
返回值:
  • void
DataView
setVisible ( Boolean visible ) : Ext.Component
工具方法，通过使用布尔值隐藏或者显示当前组件。
工具方法，通过使用布尔值隐藏或者显示当前组件。
参数:
  • visible : Boolean
    true时显示，false时隐藏
返回值:
  • Ext.Component
    this
Component
setWidth ( Mixed width ) : Ext.BoxComponent
设置组件的宽度。 此方法触发resize事件。
设置组件的宽度。 此方法触发resize事件。
参数:
  • width : Mixed
    The new width to set.
返回值:
  • Ext.BoxComponent
    this
BoxComponent
show () : Ext.Component
显示当前组件。监听' beforeshow' 事件，返回 false 取消显示组件...
显示当前组件。监听' beforeshow' 事件，返回 false 取消显示组件。在显示组件之后触发' show' 事件。
参数:
  • 无。
返回值:
  • Ext.Component
    this
Component
suspendEvents( Boolean queueSuspended ) : void
暂停触发所有的事件。 (参看resumeEvents)
暂停触发所有的事件。（参看 resumeEvents)
参数:
  • queueSuspended : Boolean
    如果传递为true则排列好暂停的事件使得在调用 resumeEvents 后再触发它们，而不是抛弃所有暂停的事件。
返回值:
  • void
Observable
syncSize () : Ext.BoxComponent
强制组件的大小按照此组件底层元素当前的高度和宽度计算。
强制组件的大小按照此组件底层元素当前的高度和宽度计算。
参数:
  • 无。
返回值:
  • Ext.BoxComponent
    this
BoxComponent
un( String eventName, Function handler, [Object scope] ) : void
删除一个事件处理器(removeListener方法的简写形式)
删除一个事件处理器(removeListener方法的简写形式。)
参数:
  • eventName : String
    处理器关联的事件类型
  • handler : Function
    被删除的处理器 这应该是传入 addListener 中的方法的引用。
  • scope : Object
    （可选）为处理器指定的初始作用域。
返回值:
  • void
Observable
update ( Mixed htmlOrData , [ Boolean loadScripts ], [ Function callback ] ) : void
刷新组件的内部区域。
刷新组件的内部区域。
参数:
  • htmlOrData : Mixed
    如果已经通过tpl为当前组件配置了一个模板，那么 将会使用此参数来装配模板。 如果没有为当前组件配置模板，组件的内容区域将会通过Ext.Element 进行刷新。
  • loadScripts : Boolean
    (可选)只用在使用html配置时此参数才合法。默认为false。
  • callback : Function
    (可选)只用在使用html配置时此参数才合法。 当脚本加载完成时回调函数才被执行。
返回值:
  • void
Component
updateBox ( Object box ) : Ext.BoxComponent
设置此组件底层元素的盒子模型尺寸。(译者注：盒子模型是CSS术语，详细资料请自行搜索。)
设置此组件底层元素的盒子模型尺寸。(译者注：盒子模型是CSS术语，详细资料请自行搜索。)
参数:
  • box : Object
    一个格式为{x, y, width, height}的对象
返回值:
  • Ext.BoxComponent
    this
BoxComponent

公共事件

Event Defined By
added : ( Ext.Component this , Ext.Container ownerCt , number index )
当一个组件被添加到一个Ext.Container时触发
当一个组件被添加到一个Ext.Container时触发
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • ownerCt : Ext.Container
    用于组件的容器
  • index : number
    添加组件的位置
Component
afterrender : ( Ext.Component this )
在组件渲染完成之后触发...

在组件渲染完成之后触发。

afterrender事件在当前组件被rendered 结束之后、在为组件定义的所有afterRender方法执行之后 触发，并且，如果有stateful， 也在状态被保存之后才触发。

监听器将会以如下参数格式被调用:
  • this : Ext.Component
Component
beforeclick : ( Ext.DataView this , Number index , HTMLElement node , Ext.EventObject e )
在处理一个单击之前触发。 返回false以取消默认的操作。
在处理一个单击之前触发。 返回false以取消默认的操作。
监听器将会以如下参数格式被调用:
  • this : Ext.DataView
  • index : Number
    目标节点的索引
  • node : HTMLElement
    目标节点
  • e : Ext.EventObject
    原始事件对象
DataView
beforedestroy : ( Ext.Component this )
在组件 destroyed 之前触发。 在事件监听器中返回false以停止 destroy 操作。
在组件 destroyed 之前触发。 在事件监听器中返回false以停止 destroy 操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforehide : ( Ext.Component this )
在调用hide方法隐藏组件之前触发。 在事件监听器中返回false可以停止隐藏操作。
在调用hide方法隐藏组件之前触发。 在事件监听器中返回false可以停止隐藏操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforerender : ( Ext.Component this )
在组件被rendered 之前触发。 在事件监听器中返回false可以停止render 操作。
在组件被rendered 之前触发。 在事件监听器中返回false可以停止render 操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforeselect : ( Ext.DataView this , HTMLElement node , Array selections )
在进行一次选择之前触发。 如果任何监听器返回false，则取消选中。
在进行一次选择之前触发。 如果任何监听器返回false，则取消选中。
监听器将会以如下参数格式被调用:
  • this : Ext.DataView
  • node : HTMLElement
    需要被选中的节点
  • selections : Array
    当前选中节点的数组
DataView
beforeshow : ( Ext.Component this )
在调用show()方法现实组件之前触发。 事件处理函数返回false可以停止show。
在调用show 方法现实组件之前触发。 事件处理函数返回false可以停止show。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforestaterestore : ( Ext.Component this , Object state )
在组件状态恢复之前触发。返回false停止恢复状态操作。
在组件状态恢复之前触发。返回false停止恢复状态操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    StateProvider返回的状态哈希值。 如果没有禁止此事件，那么状态对象会被传递给applyState。 默认情况下，这样简单地把属性值拷贝到当前组件中。 可以覆盖此方法以提供自定的状态恢复操作。
Component
beforestatesave : ( Ext.Component this , Object state )
在组件状态被保存到配置的状态提供者之前触发。 返回false可以停止保存。
在组件状态被保存到配置的状态提供者之前触发。 返回false可以停止保存。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    状态值哈希。 这由在组件上调用getState() 方法决定。 此方法必须由开发者提供，返回是否需要对状态进行描述，默认情况下， Ext.Component有一个空实现。
Component
click : ( Ext.DataView this , Number index , HTMLElement node , Ext.EventObject e )
当一个模板节点被点击时触发。
当一个模板节点被点击时触发。
监听器将会以如下参数格式被调用:
  • this : Ext.DataView
  • index : Number
    目标节点的索引
  • node : HTMLElement
    目标节点
  • e : Ext.EventObject
    原始事件对象
DataView
containerclick : ( Ext.DataView this , Ext.EventObject e )
当发生点击并且目标不是模板节点时触发。
当发生点击并且目标不是模板节点时触发。
监听器将会以如下参数格式被调用:
  • this : Ext.DataView
  • e : Ext.EventObject
    原始事件对象
DataView
containercontextmenu : ( Ext.DataView this , Ext.EventObject e )
当发生右击并且目标不是模板节点时触发。
当发生右击并且目标不是模板节点时触发。
监听器将会以如下参数格式被调用:
  • this : Ext.DataView
  • e : Ext.EventObject
    原始事件对象
DataView
contextmenu : ( Ext.DataView this , Number index , HTMLElement node , Ext.EventObject e )
当一个模板节点被右击时触发。
当一个模板节点被右击时触发。
监听器将会以如下参数格式被调用:
  • this : Ext.DataView
  • index : Number
    目标节点的索引
  • node : HTMLElement
    目标节点
  • e : Ext.EventObject
    原始事件对象
DataView
dblclick : ( Ext.DataView this , Number index , HTMLElement node , Ext.EventObject e )
当一个模板节点被双击时触发。
当一个模板节点被双击时触发。
监听器将会以如下参数格式被调用:
  • this : Ext.DataView
  • index : Number
    目标节点的索引
  • node : HTMLElement
    目标节点
  • e : Ext.EventObject
    原始事件对象
DataView
destroy : ( Ext.Component this )
在组件被销毁之后触发。
在组件被destroyed之后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
disable : ( Ext.Component this )
在组件被设置为无效状态后触发。
在组件被设置为无效状态后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
enable : ( Ext.Component this )
当组件被设置为有效(enabled)之后触发。
当组件被设置为有效(enabled)之后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
hide : ( Ext.Component this )
在组件被隐藏之后触发。 当调用hide 方法隐藏组件之后触发。
在组件被隐藏之后触发。 当调用hide 方法隐藏组件之后触发。
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
mouseenter : ( Ext.DataView this , Number index , HTMLElement node , Ext.EventObject e )
当鼠标进入模板节点时触发。 必须设置trackOver:true或者overClass以便启用此事件。
当鼠标进入模板节点时触发。 必须设置trackOver:true或者overClass以便启用此事件。
监听器将会以如下参数格式被调用:
  • this : Ext.DataView
  • index : Number
    目标节点的索引
  • node : HTMLElement
    目标节点
  • e : Ext.EventObject
    原始事件对象
DataView
mouseleave : ( Ext.DataView this , Number index , HTMLElement node , Ext.EventObject e )
当鼠标离开一个模板节点时触发。必须设置trackOver:true或者overCls，以便启用此事件。
当鼠标离开一个模板节点时触发。必须设置trackOver:true或者overCls，以便启用此事件。
监听器将会以如下参数格式被调用:
  • this : Ext.DataView
  • index : Number
    目标节点的索引
  • node : HTMLElement
    目标节点
  • e : Ext.EventObject
    原始事件对象
DataView
move : ( Ext.Component this , Number x , Number y )
在组件移动之后触发。
在组件移动之后触发。
监听器将会用如下的参数格式来调用:
  • this : Ext.Component
  • x : Number
    The new x position
  • y : Number
    The new y position
BoxComponent
removed : ( Ext.Component this , Ext.Container ownerCt )
当一个组件被从Ext.Container容器中删除时触发
当一个组件被从Ext.Container容器中删除时触发
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • ownerCt : Ext.Container
    持有组件的容器
Component
render : ( Ext.Component this )
在组件被渲染之后触发。
在组件被 rendered(渲染) 之后触发。
监听器将以如下的参数格式被调用:
  • this : Ext.Component
Component
resize : ( Ext.Component this , Number adjWidth , Number adjHeight , Number rawWidth , Number rawHeight )
在组件被调整大小之后触发。
在组件被调整大小之后触发。
监听器将以如下的参数格式被调用:
  • this : Ext.Component
  • adjWidth : Number
    这是width调整后的值
  • adjHeight : Number
    这是height调整后的值
  • rawWidth : Number
    这是width原来的值
  • rawHeight : Number
    这是height原来的值
BoxComponent
selectionchange : ( Ext.DataView this , Array selections )
当选中的节点发生变化时触发。
当选中的节点发生变化时触发。
监听器将会以如下参数格式被调用:
  • this : Ext.DataView
  • selections : Array
    选中节点的数组
DataView
show : ( Ext.Component this )
在调用show 方法显示组件之后触发。
在调用show 方法显示组件之后触发。
监听器将会用如下的参数格式被调用:
  • this : Ext.Component
Component
staterestore : ( Ext.Component this , Object state )
组件状态被存储之后触发。
组件状态被存储之后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    StateProvider返回的状态哈希值。 如果没有禁止此事件，那么状态对象会被传递给applyState。 默认情况下，这样简单地把属性值拷贝到当前组件中。 可以覆盖此方法以提供自定的状态恢复操作。
Component
statesave : ( Ext.Component this , Object state )
在组件状态被保存到所配置的状态提供者之后触发。
在组件状态被保存到所配置的状态提供者之后触发。
监听器将会用如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    状态值hash。 这是由在足见上调用getState() 方法决定的。 开发者必须提供此方法以返回是否需要恢复状态，默认情况下， Ext.Component有一个空实现。
Component


Observable
    Component
      DatePicker

Class Ext.DatePicker

包: | Ext
定义类的文件: | DatePicker.js
类: | DatePicker
继承自: | Component

一个弹出式的日期选择器。此类使用DateField 类 来允许浏览可选择的有效日期。

在你的页面中包含一个Ext的本地化文件可以替换以下书写的所有字符串的值。

配置项

Config Options Defined By
allowDomMove : Boolean
在渲染时组件是否可以移动Dom节点(默认为true)。
Component
applyTo : Mixed
指定一个元素的id、一个DOM元素或者一个已经存在并被渲染到DIV中的元素，此DIV已经被...

指定一个元素的id、一个DOM元素或者一个已经存在并被渲染到DIV中的元素，此DIV已经被 渲染到document中，并且为当前组件指定了一些结构化的标签。

  • 描述 :
      当使用了 applyTo， 在主元素中也可以用id或者CSS类名来指定组件的托管部分， 并且，如果可以的话，创建的组件可能也会试图在那个标签中创建它的子组件。
  • 注意 :
      当使用此配置项时，无需调用render()方法。
      如果指定了applyTo属性，任何传递给 renderTo 的值都会被忽略，并且目标元素的父节点将会自动被用作组件的容器。
Component
autoShow : Boolean
如果组件需要检测隐藏CSS属性(如 'x-hidden' 或者 'x-hide-display')并且在渲染时删除...
如果组件需要检测隐藏CSS属性(如 'x-hidden' 或者 'x-hide-display')并且在渲染时删除它们 (默认为false)，设置此值为true。
Component
bubbleEvents : Array
一个事件数组，当这些事件被触发时，将会被冒泡到所有父容器中。参见....

一个事件数组，当这些事件被触发时，将会被冒泡到所有父容器中。参见 Ext.util.Observable.enableBubble。 默认为 []。

Component
cancelText : String
取消按钮上显示的文本（默认为 'Cancel')
DatePicker
clearCls : String
应用到特殊的clearing div的CSS类， 这个clearing div直接渲染到每个form field的包装器后面...

应用到特殊的clearing div的CSS类， 这个clearing div直接渲染到每个form field的包装器后面，以提供 清除field的功能(默认为 'x-form-clear-left')。

注意: 只有在当前组件被渲染到一个使用FormLayout 布局(例如 Ext.form.FormPanel 或者指定 layout:'form')的 容器中、或者是指定了一个fieldLabel 、或者指定isFormField=true 时此配置才有效。

另请参见 Ext.layout.FormLayout. fieldTpl。

Component
cls : String
一个可选的额外CSS类，它将被添加到当前组件的元素上(默认为'')...
一个可选的额外CSS类，它将被添加到当前组件的元素上(默认为'')。 此属性对于在组件上，或者它的任何使用标准CSS规则的孩子节点上， 添加定制的样式非常有用。
Component
contentEl : String
(可选)指定一个已存在的HTML元素，或者一个已存在HTML元素的...

(可选)指定一个已存在的HTML元素，或者一个已存在HTML元素的 id ，它们将被用作当前组件的内容。

  • 描述 :
    此配置选项被用来将一个已存在的HTML元素 插入到一个新组件(在组件渲染之后它简单地移动DOM元素) 的layout元素中，使它成为该组件的内容。
  • 注意 :
    指定的HTML元素将被append到组件的layout元素中， 在所有配置的 HTML 被插入之后， 并且，这样的话，在render事件 被触发时，document中将不再包含此元素。
    指定的HTML元素将不会参与组件所有可能使用的 layout 过程(译者注：指这些HTML元素 不会参与布局操作)。 它仅是HTML而已。布局操作实在孩子 items 上进行的。
    添加 x-hidden 或者 x-hide-display CSS类，以防在内容渲染到panel时发生闪烁。
Component
ctCls : String
一个可选的外部CSS样式，添加到这个组件的容器(默认值为 '')。 这个方法对于使用标准的CSS规则...

一个可选的外部CSS样式，添加到这个组件的容器(默认值为 '')。 这个方法对于使用标准的CSS规则，为组件或它的任何一个子组件添加特定的样式非常有用。 参见 Ext.layout.ContainerLayout和 extraCls 。

注意: ctCls 默认为 ''期望如下的类，它们将指定一个默认值:

  • Box Layout : 'x-box-layout-ct'
使用一个额外的CSS类配置以上的Class，它是append到默认对象上的。例如， 对于BoxLayout (Hbox and Vbox):
                                ctCls: 'x-box-layout-ct custom-class'

Component
data : Mixed
初始化数据集，它将被应用到 tpl 上以刷新组件的内容区域。
Component
dayNames : Array
一个星期名称数组，可以覆盖它 以提供本地化支持 (默认值为 Date.dayNames)
DatePicker
disabled : Boolean
当前组件处于无效状态时为true。 Read-only.
Component
disabledClass : String
当组件处于无效状态时添加到组件上的CSS类(默认为 'x-item-disabled')。
Component
disabledDates : Array
一个需要禁用的日期数组，字符串型。 由于这些字符串将被用来构建...
一个需要禁用的日期数组，字符串型。 由于这些字符串将被用来构建一个动态的正则表达式， 所以它们功能很常强大。 一些例子：
  • ['03/08/2003', '09/16/2003'] 将会禁用的准确日期
  • ['03/08', '09/16'] 将会禁用每一年的这些天
  • ['^03/08'] 将会只匹配开始处 (如果你使用简写的年份，将非常有用)
  • ['03/../2006'] 将会禁用2006年三月份的每一天
  • ['^03'] 将会禁用每个三月份的每一天
Note注意：数组中所包含的日期的格式必须严格与format 配置项匹配。 为了支持正则表达式，如果你使用的日期格式中含有 "."，则在限定日期时必须对点号进行转义处理。 例如：["03\\.08\\.03"]。
DatePicker
disabledDatesRE : RegExp
JavaScript正则表达式，用来禁用一个固定格式的日期 (默认值为 null)......
JavaScript正则表达式，用来禁用一个固定格式的日期 (默认值为 null)。该disabledDates 配置项将会在内部产生正则表达式， 但是如果你指定disabledDatesRE，它将优先与disabledDates 值使用。
DatePicker
disabledDatesText : String
当日期落在一个被禁用的日期上时显示的 tooltip文本 (默认值为'Disabled')
DatePicker
disabledDays : Array
一个需要禁用的日期数组，从0开始。 例如，[0, 6]将禁用星期天和星期六 (默认值为 null)。 （译者注：这里的禁用指的是禁止选择的意思）
DatePicker
disabledDaysText : String
当日期落在一个被禁用的天上时显示的tooltip (默认值为 'Disabled')
DatePicker
fieldLabel : String
紧靠此field显示的标签文本(默认值为 '')。注意...

紧靠此field显示的标签文本(默认值为 '')。

注意:只有在当前组件被渲染到一个使用FormLayout 的容器中时，此配置才有效。 (例如 Ext.form.FormPanel 或 指定 layout:'form')。

另请参见 hideLabel 、 Ext.layout.FormLayout和 fieldTpl。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Name'
    }]
});
Component
format : String
默认的日期格式字符串，可以覆盖它以提供本地化支持。 格式必须合法，根据...
默认的日期格式字符串，可以覆盖它以提供本地化支持。 格式必须合法，根据Date.parseDate (默认为'm/d/y')验证有效性。
DatePicker
handler : Function
（可选）一个处理该日期选择器选择事件的函数。 该函数会被传入一下参数...
（可选）一个处理该日期选择器选择事件的函数。 该函数会被传入一下参数：
  • picker : DatePicker
    该日期选择器
  • date : Date
    选择的日期
DatePicker
hidden : Boolean
如果当前组件处于隐藏状态，此值为true。Read-only。
Component
hideLabel : Boolean
true时完全隐藏label元素 ( label 和 separator)。 默认为 false。 默认情况下，即使你不指定...

true时完全隐藏label元素 ( label 和 separator)。 默认为 false。 默认情况下，即使你不指定 fieldLabel 它的空间仍然会被保留，这样这块区域会与其它确实拥有label的区域位于同一排。 讲此值设置为 true 将导致此区域不再保留此空间。

注意: 参见 clearCls 的注释。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield'
        hideLabel: true
    }]
});
Component
hideMode : String
组件如何隐藏，支持的值有： 'visibility' (css visibility), 'offsets' (位置偏移量为负值) 和...

组件如何隐藏，支持的值有： 'visibility' (css visibility), 'offsets' (位置偏移量为负值) 和 'display' (css display).

注意:一般首选默认值 'display'，因为当组件第一次显示的时候它们会自动进行布局 (隐藏的时候不会调整尺寸)。

Component
hideParent : Boolean
此值为true时，当调用hide/show方法时，将会hide和show组件的容器...
此值为true时，当调用hide/show方法时，将会hide和show组件的容器；false时将会 hide和show组件自身(默认为false)。例如，这可以用作window上隐藏按钮的一种 快捷操作，通过设置此按钮的hideParent:true，然后把它添加到window上。
Component
html : String/Object
一个HTML片段，或者一个 DomHelper 描述，用作layout元素的内容(默认为'')。...
一个HTML片段，或者一个 DomHelper 描述，用作layout元素的内容(默认为'')。 这个HTML内容在组件渲染之后才被添加，所以在 render 出发的时候，document中尚未包含此HTML。 但是这个内容将会在所有配置的 contentEl 之前被插入到body标签中。
Component
id : String
当前组件唯一的id(默认为auto-assigned id)...

当前组件唯一的id(默认为auto-assigned id)。 如果你需要在以后访问组件，而又没有一个有效的组件对象引用，那么你需要指定一个 id( 也就是，使用Ext. getCmp方法 )。

注意，此id也将被用作组件底层HTML标签的id，这些标签被渲染到页面中。 这将允许你编写基于id的CSS规则，以独立地描述指定的实例；并且，也可以通过 组件父标签的id选中子元素。

注意:为了避免与唯一的id 产生重复， 请参见 itemId 和 ref 。

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

Component
itemCls : String
注意: 只有在当前组件被渲染到一个使用FormLayout 布局的 容器中时此配置才有效...

注意: 只有在当前组件被渲染到一个使用FormLayout 布局的 容器中时此配置才有效。 (例如Ext.form.FormPanel 或者指定 layout:'form')。

一个附加的CSS类，应用到div上，包装当前field的表单元素。 如果提供了此参数， field级上的itemCls将会覆盖 container级上提供的 默认itemCls。 为itemCls指定的值将会被添加默认的 类('x-form-item')。

既然它被应用到项目的包装器上(参见 Ext.layout.FormLayout。 fieldTpl)， 它将允许你编写能应用到此field、label(如果有指定)、或者field内部任何其它元素的标准CSS规则。

注意: 参考 fieldLabel的注释。 .

示例用法:

// Apply a style to the field's label:
<style>
    .required .x-form-item-label {font-weight:bold;color:red;}
</style>

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Name',
        itemCls: 'required' //this label will be styled
    },{
        xtype: 'textfield',
        fieldLabel: 'Favorite Color'
    }]
});
Component
itemId : String
当没有可利用的对象引用时，itemId可以作为第二选择，用来获得一个组件的引用， 代替 ...

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

var c = new Ext.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'); // 与 Ext.getCmp()不同

p2 = p1.ownerCt.getComponent('p2'); // 通过兄弟对象获得引用

另请参见 id 和 ref 。

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

Component
labelSeparator : String
每个fieldLabel 文本后面现实的分隔符。 此属性可以在多个层次上进行配置...

每个fieldLabel 文本后面现实的分隔符。 此属性可以在多个层次上进行配置。优先顺序为：

  • field / component level
  • container level
  • layout level (默认为冒号 ':')
如不需要为当前field的label显示分隔符，指定一个空字符串''即可。

注意:参见 clearCls 的注释。

另请参见 hideLabel 和 Ext.layout.FormLayout。 fieldTpl。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    layoutConfig: {
        labelSeparator: '~'   // layout config has lowest priority (defaults to ':')
    },
    labelSeparator: '>>',     // config at container level
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Field 1',
        labelSeparator: '...' // field/component level config supersedes others
    },{
        xtype: 'textfield',
        fieldLabel: 'Field 2' // labelSeparator will be '='

    }]
});
Component
labelStyle : String
一个CSS样式描述字符串，它将直接应用到当前field的label上...

一个CSS样式描述字符串，它将直接应用到当前field的label上。 如果有设置，默认为容器的labelStyle值(例如 Ext.layout.FormLayout.labelStyle , 或者 '')。

注意:参见 clearCls 的注释。

另请参见 hideLabel 和 Ext.layout.FormLayout. fieldTpl。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Name',
        labelStyle: 'font-weight:bold;'
    }]
});
Component
listeners : Object
一个包含一个或多个事件处理器的配置对象，会在初始化的时候被添加到目标对象上...

一个包含一个或多个事件处理器的配置对象，会在初始化的时候被添加到目标对象上。 该配置对象应该是一个有效的监听器配置对象就像 addListener例子中指定的一样可一次附加多个处理器。

ExtJs Components上的DOM事件

一些 ExtJs Component 类导出时会选择一些DOM事件(例如 "click", "mouseover" 等等), 这通常只是在有额外的值可以被添加时发生。例如DataView类的 click事件会传递被点击的节点。也可以直接在Component的HTMLElementevent上访问DOM事件，但必需在Component被渲染后监听器才能添加到Element 上。可以按照以下步骤添加插件:

// 插件会用一个监听器配置对象进行配置。
//该组件会被添加到所有处理方法的参数列表上。
Ext.DomObserver = Ext.extend(Object, {
    constructor: function(config) {
        this.listeners = config.listeners ? config.listeners : config;
    },

    // 组件将自己传递进了插件的初始化方法里
    init: function(c) {
        var p, l = this.listeners;
        for (p in l) {
            if (Ext.isFunction(l[p])) {
                l[p] = this.createHandler(l[p], c);
            } else {
                l[p].fn = this.createHandler(l[p].fn, c);
            }
        }

        // 渲染后立即添加监听器到元素上
        c.render = c.render.createSequence(function() {
            var e = c.getEl();
            if (e) {
                e.on(l);
            }
        });
    },

    createHandler: function(fn, c) {
        return function(e) {
            fn.call(this, e, c);
        };
    }
});

var combo = new Ext.form.ComboBox({

    // 元素被点击后折叠
    plugins: [ new Ext.DomObserver({
        click: function(evt, comp) {
            comp.collapse();
        }
    })],
    store: myStore,
    typeAhead: true,
    mode: 'local',
    triggerAction: 'all'
});

Observable
maxDate : Date
允许的最大日期 (JavaScript日期对象，默认值为 null)
DatePicker
maxText : String
当maxDate校验失败时显示的出错文本 (默认值为'This date is after the maximum date')
DatePicker
minDate : Date
允许的最小日期(JavaScript日期对象，默认值为 null)
DatePicker
minText : String
校验minDate失败时显示的出错提示文本 (默认值为'This date is before the minimum date')
DatePicker
monthNames : Array
一个月份名称数组， 可以覆盖它以提供本地化支持 (默认值为 Date.monthNames)
DatePicker
monthYearText : String
顶部月份选择器的tooltip （默认为'Choose a month (Control+Up/Down to move years)')
DatePicker
nextText : String
下一个月导航按钮上的tooltip (默认值为'Next Month (Control+Right)')
DatePicker
okText : String
ok按钮上显示的文本(默认为 ' OK ' 给用户提供额外的点击空间)
DatePicker
overCls : String
一个可选的额外的CSS类，它将在鼠标移过元素时被添加到组件上...
一个可选的额外的CSS类，它将在鼠标移过元素时被添加到组件上，鼠标移出时 删除。(默认为'')。此属性对于在组件上，或者它的任何使用标准CSS规则的孩子节点上， 添加定制的'active' 或者 'hover'样式非常有用。
Component
plugins : Object/Array
一个对象或者一个对象数组，为组件提供特殊的功能 ...
一个对象或者一个对象数组，为组件提供特殊的功能。 对一个合法的插件唯一的要求是它含有一个init()方法， 能接收一个Ext.Component型的参数。 当组件被创建时，如果有可用的插件，组件将会调用每个插件的init方法， 并将自身的引用作为方法参数传递给它。然后，每个插件就可以调用方法或者响应组件上的事件， 就像需要的那样提供自己的功能。
Component
prevText : String
前一个月导航按钮上的tooltip'Previous Month (Control+Left)')
DatePicker
ptype : String
需要创建配置的ptype。 当传递一个配置对象给构造函数时...
需要创建配置的ptype。 当传递一个配置对象给构造函数时，此配置选项不会被使用。 只有在使用懒初始化的时候此配置项才会被使用， 此时Plugin不是 通过一个完整的实例组件，而是通过一个Component配置指定的。 在渲染时，将会查找ptype以决定创建何种类型的Plugin。

如果你创建自己的Plugin，你可以通过 Ext.ComponentMgr.registerPlugin 对它们进行注册，以便能利用懒初始化和渲染机制。
Component
ref : String
一个路径描述，与组件的 ownerCt 相关，它描述了把当前组件的命名引用放置到哪个父容器中去。...

一个路径描述，与组件的 ownerCt 相关，它描述了把当前组件的命名引用放置到哪个父容器中去。

祖先的坐标路径可以通过'/'字符进行分隔。 例如，将一个Toolbar Button的引用放入 拥有此Toolbar的Panel中:

var myGrid = new Ext.grid.EditorGridPanel({
    title: 'My EditorGridPanel',
    store: myStore,
    colModel: myColModel,
    tbar: [{
        text: 'Save',
        handler: saveChanges,
        disabled: true,
        ref: '../saveButton'
    }],
    listeners: {
        afteredit: function() {
//          The button reference is in the GridPanel
            myGrid.saveButton.enable();
        }
    }
});

在上面的代码中，如果 ref 是 'saveButton' ，那么引用将会被放置到Toolbar中。 ref 中的每个'/' 都会从组件的 ownerCt 向上移动一级。

另请参见 added 和 removed 事件。

Component
renderTo : Mixed
该值可以是一个节点的id、一个DOM节点或者一个已存在的元素...

该值可以是一个节点的id、一个DOM节点或者一个已存在的元素， 组件将会被渲染到其中。

  • 注意 :
      如果组件不是一个Container 的子项目时， 不要使用此选项。 渲染和管理它的子项目是一个Container 的layout manager的责任。
      当使用此配置项时，无需调用render()方法。

另请参见 render 。

Component
scope : Object
此类中handler会被调用的作用域(this 的引用)。 。默认为该日期选择器实例。
DatePicker
showToday : Boolean
如果为False则表示隐藏在底部区域的Today按钮，同时禁止使用 ...
如果为False则表示隐藏在底部区域的Today按钮，同时禁止使用键盘上的空格键选取当前的日期（默认为true)。
DatePicker
startDay : Number
一周中起始天的索引值，从0开始 (默认值为0，表示星期天)
DatePicker
stateEvents : Array
一个事件数组，当它们被触发时，组件需要保存自己的状态(默认值为 none)...

一个事件数组，当它们被触发时，组件需要保存自己的状态(默认值为 none)。 它们可以是任何该组件支持的事件类型，包括浏览器事件和 自定义事件(例如['click', 'customerchange'])。

对于保存和恢复组件状态的详细解释，参见 stateful

Component
stateId : String
为该组件指定的唯一的id值，它被用作管理组件状态的目的...
为该组件指定的唯一的id值，它被用作管理组件状态的目的。 (如果设定了id，默认值为组件自己的id，否则，如果组件使用自动生成的id，此值为null)。

对于保存和反解析组件状态的解释，参见 stateful 。

Component
stateful : Boolean
一个标志参数，它将引起组件在启动时尝试从一个保存的状态中恢复内部状态参数...

一个标志参数，它将引起组件在启动时尝试从一个保存的状态中恢复内部状态参数。 组件必须要么拥有一个 stateId 或者 id ，它们被分配给需要被管理的状态属性。 在跨页面加载时，不保证自动生成的id属性的稳定性， 并且，不能依赖此id来保存和恢复一个组件的相同状态。

为了保存状态的操作能够工作，状态管理器的提供者必须 被设置成一个Ext.state.Provider 的实现类，它覆盖了set 和get 方法，以便保存和恢复name/value对。 有一个内置的Ext.state.CookieProvider 可用。

为当前页面设置状态提供者:

Ext.state.Manager.setProvider(new Ext.state.CookieProvider({
    expires: new Date(new Date().getTime()+(1000*60*60*24*7)), //7 days from now
}));

当 stateEvents 配置项中其中之一的事件被触发时， 一个状态可保存的组件将试图保存其状态。

保存状态时，一个可保存状态的组件首先需要通过调用 getState 方法来序列化它的状态。 默认情况下，此函数什么事都不做。 开发者必须提供一个实现，返回一个hash对象，它描述了组件可恢复的状态。

getState方法产生的值将会传递给 Ext.state.Manager.set 方法，它使用配置的 Ext.state.Provider 来保存对象，以组件的 stateId 为key，或者，如果此值（指stateId）没有指定时， 使用它的 id 作为key。

在进行构造时，一个可保存状态的组件试图通过调用 Ext.state.Manager.get方法来 恢复它的状态，传递 stateId 或者，如果此值（指stateId）没有指定时， 使用它的 id 作为参数。

结果对象被传递给 applyState 。 applyState 的默认实现只是简单地把属性拷贝到对象中， 但是开发者可以覆盖此方法以支持更多行为。

通过向 beforestaterestore, staterestore, beforestatesave 和 statesave 事件上绑定监听器，你可以在保存和恢复状态时进行额外的处理。

Component
style : String
被添加到组件元素的特定样式。 必须是按照...
被添加到组件元素的特定样式。 必须是按照 Ext.Element.applyStyles 类指定格式的合法参数值。

new Ext.Panel({
    title: 'Some Title',
    renderTo: Ext.getBody(),
    width: 400, height: 300,
    layout: 'form',
    items: [{
        xtype: 'textarea',
        style: {
            width: '95%',
            marginBottom: '10px'
        }
    },
        new Ext.Button({
            text: 'Send',
            minWidth: '100',
            style: {
                marginBottom: '10px'
            }
        })
    ]
});
Component
todayText : String
选中当前日期按钮上显示的文本(默认值为'Today')
DatePicker
todayTip : String
在按钮上形成一个表示选择当前日期的文本字符串。默认为 ...
在按钮上形成一个表示选择当前日期的文本字符串。默认为 '{0} (Spacebar)' 其中的{0} 所在的地方会被当前日期所替代。
DatePicker
tpl : Mixed
一个 Ext.Template , Ext.XTemplate 或者一个用来形成一个Ext.XTemplate的字符串数组...
一个 Ext.Template , Ext.XTemplate 或者一个用来形成一个Ext.XTemplate的字符串数组。 与 data 和 tplWriteMode 配置项协同使用。
Component
tplWriteMode : String
刷新组件的内容区域时使用的Ext.(X)Template方式。 默认为'overwrite' (参见 Ext.XTemplate.overwrite )。
刷新组件的内容区域时使用的Ext.(X)Template方式。 默认为'overwrite' (参见 Ext.XTemplate.overwrite )。
Component
xtype : String
需要创建配置的xtype。 当传递一个配置对象给构造函数时...
需要创建配置的xtype。 当传递一个配置对象给构造函数时，此配置选项不会被使用。 只有在使用懒初始化的时候此配置项才会被使用，此时容器的子项目不是 通过一个完整的实例组件，而是通过一个Component配置指定的。 在渲染时，将会查找xtype以决定创建何种类型的子组件。

预定义的xtype列表如下： here。

如果你继承Component创建你自己的组件，你需要使用Ext.ComponentMgr.registerType 对它们进行注册，以便利用懒初始化和渲染机制。
Component

公共属性

Property Defined By
disabled : Boolean
当前组件处于无效状态时为true。 Read-only.
Component
el : Ext.Element
封装了当前组件的Ext.Element。 Read-only。通常情况下，这将是一个<DIV>元素，它由此类的...

封装了当前组件的Ext.Element。 Read-only。

通常情况下，这将是一个<DIV>元素，它由此类的 onRender方法创建，但是它可以通过使用 autoEl 配置项进行覆盖。

注意: 直到组件渲染完成此元素都将处于无效状态。

如需向当前组件的 DOM事件(而不是当前组件自己的Observable事件)添加监听器， 更多建议，参见 listeners 配置项，或者直接使用一个render监听器:

new Ext.Panel({
    title: 'The Clickable Panel',
    listeners: {
        render: function(p) {
            // Append the Panel to the click handler's argument list.
            p.getEl().on('click', handlePanelClick.createDelegate(null, [p], true));
        },
        single: true  // Remove the listener after first invocation
    }
});

另请参见 getEl

Component
hidden : Boolean
如果当前组件处于隐藏状态，此值为true。Read-only。
Component
initialConfig : Object
当前组件的初始化配置描述。 Read-only。
Component
ownerCt : Ext.Container
组件所属的Container (默认为undefined，当前组件被添加到一个容器中时此值被自动设置)...
组件所属的Container (默认为undefined，当前组件被添加到一个容器中时此值被自动设置)。 Read-only。

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

Component
refOwner : Ext.Container
如果当前组件是一个容器的孩子，并且是通过一个 ref 配置项被注册的，则此值为 ref 引用被插入到的祖先容器。
如果当前组件是一个容器的孩子，并且是通过一个 ref 配置项被注册的，则此值为 ref 引用被插入到的祖先容器。
Component
rendered : Boolean
如果当前组件已经被渲染了，此值为true。Read-only.
Component

公共方法

Method Defined By
DatePicker( Object config )
创建一个新的DatePicker
创建一个新的DatePicker
参数:
  • config : Object
    配置项对象
返回值:
  • void
DatePicker
addClass ( string cls ) : Ext.Component
为组件底层的元素添加CSS样式。
为组件底层的元素添加CSS样式。
参数:
  • cls : string
    需要添加的CSS样式的class名称
返回值:
  • Ext.Component
    this
Component
addEvents( Object|String o, string Optional. ) : void
添加指定的事件到事件列表上，事件会被该Observable触发。
添加指定的事件到事件列表上，事件会被该Observable触发。
参数:
  • o : Object|String
    以事件名作为属性true作为值的对象 或者当多个事件名被分开的传递时则为第一个事件名。
  • Optional. : string
    事件名被分开的传递时则为事件名。 用法:
    this.addEvents('storeloaded', 'storecleared');
返回值:
  • void
Observable
addListener( String eventName, Function handler, [Object scope], [Object options] ) : void
给对象添加事件处理器。
给对象添加事件处理器。
参数:
  • eventName : String
    监听的事件名。
  • handler : Function
    事件调用的方法
  • scope : Object
    （可选）处理方法执行的作用域 (this的引用 reference)。 如果被忽略。默认为触发事件的对象。
  • options : Object
    （可选）包含处理器配置和属性的对象。 可能包含以下的属性:
    • scope : Object
      处理方法执行的作用域(this的引用) 。 如果被忽略。默认为触发事件的对象。
    • delay : Number
      在触发事件后延迟调用处理器的毫秒数。
    • single : Boolean
      如果为True则添加一个处理器来处理下一次的事件触发（仅一次），然后移除自己。
    • buffer : Number
      使得处理器延迟指定毫秒数后预定的运行在 一个Ext.util.DelayedTask中 。 如果事件在时间内再一次被触发，原始的处理器不会被调用，但是新的处理器会预定的在他的位置上。
    • target : Observable
      如果事件在目标的Observable上触发则仅仅调用处理器， 否则 事件会从子类的Observable上冒泡

    组合选项
    使用这些选项参数,可能会组合出不同类型的监听器：

    一个延迟的，一次性的监听器。

    myDataView.on('click', this.onClick, this, {
single: true,
delay: 100
});

    一次调用附加多个处理器
    该方法同样支持传递一个包含指定的多个处理器的属性的配置对象参数。

    myGridPanel.on({
'click' : {
    fn: this.onClick,
    scope: this,
    delay: 100
},
'mouseover' : {
    fn: this.onMouseOver,
    scope: this
},
'mouseout' : {
    fn: this.onMouseOut,
    scope: this
}
});

    或者一个简写的语法：

    myGridPanel.on({
'click' : this.onClick,
'mouseover' : this.onMouseOver,
'mouseout' : this.onMouseOut,
 scope: this
});
返回值:
  • void
Observable
applyToMarkup ( String/HTMLElement el ) : void
将此组件添加到已存在的有效的HTML标签中。 使用该方法时，无需再调用render()方法。
将此组件添加到已存在的有效的HTML标签中。 使用该方法时，无需再调用render()方法。
参数:
  • el : String/HTMLElement
返回值:
  • void
Component
cloneConfig ( Object overrides ) : Ext.Component
默认使用原先传递给当前实例的配置值克隆当前组件。
默认使用原先传递给当前实例的配置值克隆当前组件。
参数:
  • overrides : Object
    一个新的配置项，包含需要覆盖到克隆版本的所有属性。 可以传递一个id参数给此对象，否则将自动生成一个新的id以避免发生重复。
返回值:
  • Ext.Component
    当前组件的克隆副本
Component
destroy () : void
通过如下方法销毁对象：删除所有的事件监听器、将组件的元素从DOM树中删除...
通过如下方法销毁对象：删除所有的事件监听器、将组件的元素从DOM树中删除（如果可以）、 将组件从它的 Ext.Container（如果可用）中删除、 并且将它从Ext.ComponentMgr中 注销。 销毁操作一般由框架自动完成，一般情况下不需要直接调用该方法。
参数:
  • 无。
返回值:
  • void
Component
disable () : Ext.Component
将组件置为无效状态，并出发'disable'事件。
将组件置为无效状态，并出发'disable'事件。
参数:
  • 无。
返回值:
  • Ext.Component
    this
Component
enable () : Ext.Component
将组件置为有效状态并触发'enable'事件。
将组件置为有效状态并触发'enable'事件。
参数:
  • 无。
返回值:
  • Ext.Component
    this
Component
enableBubble( String/Array events ) :void
是否现在使得事件会被该Observable触发并调用 this.getBubbleTarget()方法在拥有者的继承树...

是否现在使得事件会被该Observable触发并调用 this.getBubbleTarget()方法在拥有者的继承树中冒泡。Observable的基础类中没有该方法的实现。

该方法一般被Ext.Components用来冒泡事件到拥有者的容器。参看Ext.Component.getBubbleTarget默认的实现 在Ext.Component中返回组件的直接拥有者。但是如果需要的是一个已知的目标，该方法可以被重写来更快的访问需求的目标。

例子:

Ext.override(Ext.form.Field, {
    // 添加方法到Field的initComponent上改变事件为冒泡
    initComponent : Ext.form.Field.prototype.initComponent.createSequence(function() {
        this.enableBubble('change');
    }),

    // 我们知道我们想让Field的事件冒泡到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() {
            // 如果样式被修改标题会变红。
            myForm.header.setStyle('color', 'red');
        }
    }
});
参数:
  • events : String/Array
    冒泡的事件名，或事件名数组
返回值:
  • void
Observable
findParentBy ( Function fn ) : Ext.Container
通过自定义的函数查找当前组件上层任何层次上的容器...
通过自定义的函数查找当前组件上层任何层次上的容器。 如果传递的函数返回true，容器对象将被返回。
参数:
  • fn : Function
    自定义的函数，使用如下参数调用(container,this component)。
返回值:
  • Ext.Container
    自定义函数返回true的第一个容器
Component
findParentByType ( String/Class xtype ) : Ext.Container
通过xtype或者class查找当前组件上层任何层次上的容器
通过xtype或者class查找当前组件上层任何层次上的容器
参数:
  • xtype : String/Class
    组件的xtype字符串，或者直接是组件的class
返回值:
  • Ext.Container
    符合指定xtype或者class的第一个容器
Component
fireEvent( String eventName, Object... args ) : Boolean
用传入的参数触发指定的事件 (减去事件名)。 一个事件可以被设置为冒泡 Obse...

用传入的参数触发指定的事件 (减去事件名)。

一个事件可以被设置为冒泡到Observable父类继承树(参看 Ext.Component.getBubbleTarget) 调用enableBubble实现。

参数:
  • eventName : String
    触发的事件名。
  • args : Object...
    传递给处理器的可变长度参数。
返回值:
  • Boolean
    如果有任何的处理器返回false则返回false，否则返回true。
Observable
focus ( [ Boolean selectText ], [ Boolean/Number delay ] ) : Ext.Component
尝试将当前组件设为焦点。
尝试将当前组件设为焦点。
参数:
  • selectText : Boolean
    (可选) 如果可用，同时选中组件内部的文本
  • delay : Boolean/Number
    (可选)将当前组件设置为焦点的延迟时间(设置为true等于0毫秒)
返回值:
  • Ext.Component
    this
Component
getBubbleTarget () : Ext.Container
为Observable的fireEvent方法提供链接，它沿着继承结构进行冒泡操作。
为Observable的fireEvent方法提供链接，它沿着继承结构进行冒泡操作。
参数:
  • 无。
返回值:
  • Ext.Container
    拥有当前组件的容器。
Component
getEl () : Ext.Element
返回 Ext.Element ，它包装了当前组件。...

返回 Ext.Element ，它包装了当前组件。

通常情况下，这将是一个<DIV>元素，它是由该类的onRender方法创建的， 但是可以使用autoEl配置项 覆盖它。

注意: 此元素将会一直处于无效状态直到当前组件渲染完成。

如需向当前组件的 DOM事件(而不是当前组件自己的Observable事件)添加监听器， 更多建议，参见 listeners 配置项，或者直接使用一个render监听器:

new Ext.Panel({
    title: 'The Clickable Panel',
    listeners: {
        render: function(p) {
            // Append the Panel to the click handler's argument list.
            p.getEl().on('click', handlePanelClick.createDelegate(null, [p], true));
        },
        single: true  // Remove the listener after first invocation
    }
});
参数:
  • 无。
返回值:
  • Ext.Element
    包装当前组件的元素。
Component
getId () : String
返回当前组件的id，如果没有定义id，则自动生成并返回一个id:'ext-comp-'...
返回当前组件的 id 如果没有定义 id 则自动生成并返回一个 id

'ext-comp-' + (++Ext.Component.AUTO_ID)
参数:
  • 无。
返回值:
  • String
    id
Component
getItemId () : String
返回当前组件的 itemId 。 如果没有通过配置参数指定 itemId 那么，将会使用...
返回当前组件的 itemId 。 如果没有通过配置参数指定 itemId 那么，将会使用 getId 返回 id 。
参数:
  • 无。
返回值:
  • String
Component
getValue() : Date
获得日期选择区域中的当前选中值
获得日期选择区域中的当前选中值
参数:
  • 无。
返回值:
  • Date
    选中的日期
DatePicker
getXType () : String
获取当前组件的xtype，它是用 Ext.ComponentMgr 注册的。 所有可用的xtype列表，参见...
获取当前组件的xtype，它是用 Ext.ComponentMgr 注册的。 所有可用的xtype列表，参见 Ext.Component 类头部。示例用法:

var t = new Ext.form.TextField();
alert(t.getXType());  // alerts 'textfield'
参数:
  • 无。
返回值:
  • String
    The xtype
Component
getXTypes () : String
返回此组件的xtype继承树，用字符'-'分隔。 所有可用的xtype值...

返回此组件的xtype继承树，用字符'-'分隔。 所有可用的xtype值，请参见Ext.Component 类的头部。

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

示例用法:

var t = new Ext.form.TextField();
alert(t.getXTypes());  // alerts 'component/box/field/textfield'
参数:
  • 无。
返回值:
  • String
    xtype层次字符串
Component
hasListener( String eventName ) : Boolean
检测对象是否包含指定事件的任何监听器
检测对象是否包含指定事件的任何监听器
参数:
  • eventName : String
    检测的事件名
返回值:
  • Boolean
    如果事件被监听则为true，否则为false
Observable
hide () : Ext.Component
隐藏当前组件。 监听 beforehide' 事件并且返回false 可以取消隐藏组件的操作。 在隐藏组件之后触发...
隐藏当前组件。 监听 beforehide' 事件并且返回false 可以取消隐藏组件的操作。 在隐藏组件之后触发 ' hide' 事件。 如果组件被配置成 hidden 那么此方法在内部被调用。
参数:
  • 无。
返回值:
  • Ext.Component
    this
Component
isVisible () : Boolean
如果当前组件可见，返回true。
如果当前组件可见，返回true。
参数:
  • 无。
返回值:
  • Boolean
    如果当前组件可见，返回true，其它返回false。
Component
isXType ( String xtype , [ Boolean shallow ] ) : Boolean
Tests whether or not this Component is of a specific xtype. This can test whether this Component is descended from th...

测试此组件是否是指定的xtype。此方法既可以测试是否是指定的xtype的某个子类， 或者它是否直接是指定的xtype类(shallow=true)。

如果使用你自己的子类，必须知道组件必须注册它的xtype值。

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

示例用法:

var t = new Ext.form.TextField();
var isText = t.isXType('textfield');        // true
var isBoxSubclass = t.isXType('box');       // true, descended from BoxComponent
var isBoxInstance = t.isXType('box', true); // false, not a direct BoxComponent instance
参数:
  • xtype : String
    需要为当前组件进行检测的xtype
  • shallow : Boolean
    (可选) 如果为false，检测组件是否是xtype继承树中的某个子类（默认是这种情况）， 如果为true，只检测组件是否是指定的xtype类型。
返回值:
  • Boolean
    如果当前组件是指定xtype的子类，返回true，其它返回flase。
Component
mon ( Observable|Element item , Object|String ename , Function fn , Object scope , Object opt ) : void
向任何Observable对象(或者元素)上添加监听器，监听器将会在组件...

向任何Observable对象(或者元素)上添加监听器，监听器将会在组件销毁时被自动删除。
用法：

myGridPanel.mon(myGridPanel.getSelectionModel(), 'selectionchange', handleSelectionChange, null, {buffer: 50});

or:

myGridPanel.mon(myGridPanel.getSelectionModel(), {
    selectionchange: handleSelectionChange,
    buffer: 50
});
参数:
  • item : Observable|Element
    需要添加listener/listeners的项目。
  • ename : Object|String
    事件名，或者一个包含事件名属性的对象。
  • fn : Function
    (可选) 如果 ename 参数是一个事件名，此参数为处理函数。
  • scope : Object
    (可选)如果 ename 参数是一个事件名称，此参数是作用域 ( this 引用)，监听函数将会在此作用域中被执行。
  • opt : Object
    (可选)如果 ename 参数是一个事件名称， 此参数是 addListener 配置项。
返回值:
  • void
Component
mun ( Observable|Element item , Object|String ename , Function fn , Object scope ) : void
删除通过mon 方法添加的监听器。
删除通过mon 方法添加的监听器。
参数:
  • item : Observable|Element
    需要删除listener/listeners的项目。
  • ename : Object|String
    事件名称，或者一个包含事件名称属性的对象。
  • fn : Function
    (可选)如果 ename 参数是一个事件名称，此参数是一个处理函数。
  • scope : Object
    (可选)如果 ename 参数是一个事件名称，此参数是作用域 ( this 引用)，监听函数将会在此作用域中被执行。
返回值:
  • void
Component
nextSibling () : Ext.Component
返回所属容器中的下一个组件
返回所属容器中的下一个组件
参数:
  • 无。
返回值:
  • Ext.Component
Component
on( String eventName, Function handler, [Object scope], [Object options] ) : void
给对象添加事件处理器 (addListener的简写形式)
给对象添加事件处理器 (addListener的简写形式。)
参数:
  • eventName : String
    监听的事件类型
  • handler : Function
    事件调用的方法
  • scope : Object
    （可选）处理方法执行时的作用域 (this 的引用)。 如果被忽略。默认为触发事件的对象。
  • options : Object
    可选 包含处理器配置的对象。
返回值:
  • void
Observable
previousSibling () : Ext.Component
返回所属容器中的前一个组件
返回所属容器中的前一个组件
参数:
  • 无。
返回值:
  • Ext.Component
Component
purgeListeners() : void
移除对象上所有的监听器
移除对象上所有的监听器
参数:
  • 无。
返回值:
  • void
Observable
relayEvents( Object o, Array events ) : void
从指定的Observable上传递选择的事件就好像被当前对象触发一样。
从指定的Observable上传递选择的事件就好像被当前对象触发一样。
参数:
  • o : Object
    该Observable上的事件被当前对象传递。
  • events : Array
    传递的数组名。
返回值:
  • void
Observable
removeClass ( string cls ) : Ext.Component
从组件底层的元素上删除一个CSS类。
从组件底层的元素上删除一个CSS类。
参数:
  • cls : string
    需要移除的CSS类名
返回值:
  • Ext.Component
    this
Component
removeListener( String eventName, Function handler, [Object scope] ) : void
删除一个事件处理器。
删除一个事件处理器。
参数:
  • eventName : String
    处理器关联的事件类型。
  • handler : Function
    移除的处理器。 这应该是传递到addListener里的方法的引用。
  • scope : Object
    （可选）处理器指定的初始作用域。
返回值:
  • void
Observable
render ( [ Element/HTMLElement/String container ], [ String/Number position ] ) : void
在传递进来的HTML元素中渲染当前组件。...

在传递进来的HTML元素中渲染当前组件。

如果你正在使用一个Container 对象放置当前组件，那么请不要使用render方法。

当容器第一次被渲染时，它的子组件将会被容器的 layout 管理器渲染。

某些布局管理器允许动态添加子组件。它们包括 Ext.layout.CardLayout, Ext.layout.AnchorLayout, Ext.layout.FormLayout, Ext.layout.TableLayout。

当一个新的子组件被添加时，如果容器已经被渲染了， 你可能需要调用容器的 doLayout 方法来刷新视图，它将导致所有没有被渲染的子组件进行渲染操作。 此操作是必须的，这样你可以添加多个子组件而只刷新一次layout。

当创建复杂的UI时，非常重要的一点是，请记住调整子项目的尺寸和位置是容器的 layout 管理器的职责。 如果你希望子项目的尺寸对用户交互作出反应， 你必须为容器配置一个布局管理器，它将创建和管理你心里想要的那种布局。

忽略容器的layout 配置意味着将会使用一个基本的布局管理器，它除了按次序把子组件 渲染到容器中之外什么事情都不做。 这种情况下，任何尺寸和位置的调整操作都不会发生。

参数:
  • container : Element/HTMLElement/String
    (可选) 需要在其中渲染当前组件的元素。 如果它是从一个已存在的标签中创建的，此参数应该被忽略。
  • position : String/Number
    (可选) 容器中的一个元素ID或者一个DOM节点索引， 当前组件将会被插入到它前面 (默认append到容器的尾部)
返回值:
  • void
Component
resumeEvents() : void
重新开始触发事件。(参见suspendEvents) 如果事件以queueSuspended参数被挂起，则在事件被挂起时 ...
重新开始触发事件。(参见 suspendEvents) 如果事件以queueSuspended 参数被挂起，则在事件被挂起时触发的事件会被传递到所有的监听器上
参数:
  • 无。
返回值:
  • void
Observable
setDisabled ( Boolean disabled ) : Ext.Component
工具函数，使用布尔值设置有效/无效(disabled/enabled )。
工具函数，使用布尔值设置有效/无效(disabled/enabled )。
参数:
  • disabled : Boolean
返回值:
  • Ext.Component
    this
Component
setDisabledDates( Array/RegExp disabledDates ) : void
使用新的值替换任何现有的禁用日期，并刷新DatePicker。
使用新的值替换任何现有的禁用日期，并刷新DatePicker。
参数:
  • disabledDates : Array/RegExp
    一个日期字符串数组 (参看 disabledDates 列有所有支持的值), 或者是一个禁用日期的JavaScript正则表达式。
返回值:
  • void
DatePicker
setDisabledDays( Array disabledDays ) : void
使用新的值替换任何现有的禁用日期(按序号，0-6)，并刷新DatePicker。
使用新的值替换任何现有的禁用日期(按序号，0-6)，并刷新DatePicker。
参数:
  • disabledDays : Array
    一个被禁用的日期索引值数组。参看 disabledDays 配置项列有所有支持的值。
返回值:
  • void
DatePicker
setMaxDate( Date value ) : void
使用新的值替换任何现存的maxDate ，并刷新DatePicker。
使用新的值替换任何现存的maxDate ，并刷新DatePicker。
参数:
  • value : Date
    可以选择的最大日期。
返回值:
  • void
DatePicker
setMinDate( Date value ) : void
使用新的值替换任何现存的minDate ，并刷新DatePicker。
使用新的值替换任何现存的minDate ，并刷新DatePicker。
参数:
  • value : Date
    可选的最小值
返回值:
  • void
DatePicker
setValue( Date value ) : void
设置日期选择区的选中值
设置日期选择区的选中值
参数:
  • value : Date
    设置的日期
返回值:
  • void
DatePicker
setVisible ( Boolean visible ) : Ext.Component
工具方法，通过使用布尔值隐藏或者显示当前组件。
工具方法，通过使用布尔值隐藏或者显示当前组件。
参数:
  • visible : Boolean
    true时显示，false时隐藏
返回值:
  • Ext.Component
    this
Component
show () : Ext.Component
显示当前组件。监听' beforeshow' 事件，返回 false 取消显示组件...
显示当前组件。监听' beforeshow' 事件，返回 false 取消显示组件。在显示组件之后触发' show' 事件。
参数:
  • 无。
返回值:
  • Ext.Component
    this
Component
suspendEvents( Boolean queueSuspended ) : void
暂停触发所有的事件。 (参看resumeEvents)
暂停触发所有的事件。（参看 resumeEvents)
参数:
  • queueSuspended : Boolean
    如果传递为true则排列好暂停的事件使得在调用 resumeEvents 后再触发它们，而不是抛弃所有暂停的事件。
返回值:
  • void
Observable
un( String eventName, Function handler, [Object scope] ) : void
删除一个事件处理器(removeListener方法的简写形式)
删除一个事件处理器(removeListener方法的简写形式。)
参数:
  • eventName : String
    处理器关联的事件类型
  • handler : Function
    被删除的处理器 这应该是传入 addListener 中的方法的引用。
  • scope : Object
    （可选）为处理器指定的初始作用域。
返回值:
  • void
Observable
update ( Mixed htmlOrData , [ Boolean loadScripts ], [ Function callback ] ) : void
刷新组件的内部区域。
刷新组件的内部区域。
参数:
  • htmlOrData : Mixed
    如果已经通过tpl为当前组件配置了一个模板，那么 将会使用此参数来装配模板。 如果没有为当前组件配置模板，组件的内容区域将会通过Ext.Element 进行刷新。
  • loadScripts : Boolean
    (可选)只用在使用html配置时此参数才合法。默认为false。
  • callback : Function
    (可选)只用在使用html配置时此参数才合法。 当脚本加载完成时回调函数才被执行。
返回值:
  • void
Component

公共事件

Event Defined By
added : ( Ext.Component this , Ext.Container ownerCt , number index )
当一个组件被添加到一个Ext.Container时触发
当一个组件被添加到一个Ext.Container时触发
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • ownerCt : Ext.Container
    用于组件的容器
  • index : number
    添加组件的位置
Component
afterrender : ( Ext.Component this )
在组件渲染完成之后触发...

在组件渲染完成之后触发。

afterrender事件在当前组件被rendered 结束之后、在为组件定义的所有afterRender方法执行之后 触发，并且，如果有stateful， 也在状态被保存之后才触发。

监听器将会以如下参数格式被调用:
  • this : Ext.Component
Component
beforedestroy : ( Ext.Component this )
在组件 destroyed 之前触发。 在事件监听器中返回false以停止 destroy 操作。
在组件 destroyed 之前触发。 在事件监听器中返回false以停止 destroy 操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforehide : ( Ext.Component this )
在调用hide方法隐藏组件之前触发。 在事件监听器中返回false可以停止隐藏操作。
在调用hide方法隐藏组件之前触发。 在事件监听器中返回false可以停止隐藏操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforerender : ( Ext.Component this )
在组件被rendered 之前触发。 在事件监听器中返回false可以停止render 操作。
在组件被rendered 之前触发。 在事件监听器中返回false可以停止render 操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforeshow : ( Ext.Component this )
在调用show()方法现实组件之前触发。 事件处理函数返回false可以停止show。
在调用show 方法现实组件之前触发。 事件处理函数返回false可以停止show。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforestaterestore : ( Ext.Component this , Object state )
在组件状态恢复之前触发。返回false停止恢复状态操作。
在组件状态恢复之前触发。返回false停止恢复状态操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    StateProvider返回的状态哈希值。 如果没有禁止此事件，那么状态对象会被传递给applyState。 默认情况下，这样简单地把属性值拷贝到当前组件中。 可以覆盖此方法以提供自定的状态恢复操作。
Component
beforestatesave : ( Ext.Component this , Object state )
在组件状态被保存到配置的状态提供者之前触发。 返回false可以停止保存。
在组件状态被保存到配置的状态提供者之前触发。 返回false可以停止保存。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    状态值哈希。 这由在组件上调用getState() 方法决定。 此方法必须由开发者提供，返回是否需要对状态进行描述，默认情况下， Ext.Component有一个空实现。
Component
destroy : ( Ext.Component this )
在组件被销毁之后触发。
在组件被destroyed之后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
disable : ( Ext.Component this )
在组件被设置为无效状态后触发。
在组件被设置为无效状态后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
enable : ( Ext.Component this )
当组件被设置为有效(enabled)之后触发。
当组件被设置为有效(enabled)之后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
hide : ( Ext.Component this )
在组件被隐藏之后触发。 当调用hide 方法隐藏组件之后触发。
在组件被隐藏之后触发。 当调用hide 方法隐藏组件之后触发。
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
removed : ( Ext.Component this , Ext.Container ownerCt )
当一个组件被从Ext.Container容器中删除时触发
当一个组件被从Ext.Container容器中删除时触发
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • ownerCt : Ext.Container
    持有组件的容器
Component
render : ( Ext.Component this )
在组件被渲染之后触发。
在组件被 rendered(渲染) 之后触发。
监听器将以如下的参数格式被调用:
  • this : Ext.Component
Component
select : ( DatePicker this, Date date )
当日期被选中时触发
当日期被选中时触发
监听器将使用以下参数调用：
  • this : DatePicker
    DatePicker
  • date : Date
    选择的日期
DatePicker
show : ( Ext.Component this )
在调用show 方法显示组件之后触发。
在调用show 方法显示组件之后触发。
监听器将会用如下的参数格式被调用:
  • this : Ext.Component
Component
staterestore : ( Ext.Component this , Object state )
组件状态被存储之后触发。
组件状态被存储之后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    StateProvider返回的状态哈希值。 如果没有禁止此事件，那么状态对象会被传递给applyState。 默认情况下，这样简单地把属性值拷贝到当前组件中。 可以覆盖此方法以提供自定的状态恢复操作。
Component
statesave : ( Ext.Component this , Object state )
在组件状态被保存到所配置的状态提供者之后触发。
在组件状态被保存到所配置的状态提供者之后触发。
监听器将会用如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    状态值hash。 这是由在足见上调用getState() 方法决定的。 开发者必须提供此方法以返回是否需要恢复状态，默认情况下， Ext.Component有一个空实现。
Component


DragDrop
    DD

Class Ext.dd.DD

包: | Ext.dd
定义类的文件: | DDCore.js
类: | DD
子类: | DDProxy
继承自: | DragDrop
一个DragDrop实现类，当拖动时相关联的元素将跟随鼠标移动。

公共属性

Property Defined By
available : boolean
当相关联的dom元素可以访问之前availabe属性值都是false。
DragDrop
config : object
传递给构造器的配置参数
DragDrop
defaultPadding : Object
为"constrainTo"元素提供默认的填充约束 (默认值为 {left: 0, right:0, top:0, bottom:0})。
DragDrop
groups : object An object in the format {'group1':true, 'group2':true
组定义了一个相关的DragDrop对象的逻辑集合。 只有在与同一组中的其它DragDrop对象发生交互时...
组定义了一个相关的DragDrop对象的逻辑集合。 只有在与同一组中的其它DragDrop对象发生交互时，实例才会收到事件。这允许我们在需要时，使用DragDrop的单个实例来定义多个组。
DragDrop
hasOuterHandles : boolean
默认情况下，只有在相关联元素的区域中发生mousedown事件时，才发起拖拽操作。 在某些浏览器中...
默认情况下，只有在相关联元素的区域中发生mousedown事件时，才发起拖拽操作。 在某些浏览器中，如果上一次mouseup事件在window外部发生的时候， 浏览器将不能报告此次的mousedown事件， 此时将会产生一个bug。 如果定义了外部的句柄，此属性值将被设置为true。
DragDrop
id : String
与当前对象相关联的元素的id。 这就是我们所谓的关联元素("linked element")，因为此元素的大小和位置...
与当前对象相关联的元素的id。 这就是我们所谓的关联元素("linked element")，因为此元素的大小和位置 将被用来决定何时与拖动和放开的对象进行交互。
DragDrop
ignoreSelf : Boolean
设置为false，拖拽时，将会使DragDrop对象在悬在自身元素上方时触发drag事件。默认为...
设置为false，拖拽时，将会使DragDrop对象在悬在自身元素上方时触发drag事件。默认为true——DragDrop对象默认不会对自身触发drag事件。
DragDrop
invalidHandleClasses : Array
CSS类名数组，应用到那些被认为是非法拖拽句柄的对象上。
DragDrop
invalidHandleIds : Object
一个对象，它的属性名标志了被认为是非法的拖动手柄元素的ID。 一个非空属性值标志着这些ID是有效的...
一个对象，它的属性名标志了被认为是非法的拖动手柄元素的ID。 一个非空属性值标志着这些ID是有效的。 例如，为了阻止从ID为"foo"的元素上发起拖动操作，使用 :
                                {
    foo: true
}
DragDrop
invalidHandleTypes : Object
一个对象，它的属性名标记了那些不能作为拖拽句柄的HTML标签。 一个非空属性值标志着此标签是无效的...
一个对象，它的属性名标记了那些不能作为拖拽句柄的HTML标签。 一个非空属性值标志着此标签是无效的。 默认为以下值，它将阻止从元素发起拖拽操作：
                                {
    A: "A"
}
DragDrop
isTarget : boolean
默认情况下，任何实例都可以是拖放的目标。 可以设置isTarget为false以禁用。
DragDrop
maintainOffset : boolean
当我们重置约束时保持偏移量。 当你需要在页面变化时，元素保持与其父元素的相对位置关系...
当我们重置约束时保持偏移量。 当你需要在页面变化时，元素保持与其父元素的相对位置关系，设置此项为true。
DragDrop
moveOnly : boolean
当设置为true时，当这个DD对象在同组的其他DD对象上方时，将...
当设置为true时，当这个DD对象在同组的其他DD对象上方时，将不会接收到notification事件。默认为false。
DragDrop
padding : int[] An array containing the 4 padding values: [top, right, bottom, left]
当前拖拽对象的padding配置项， 用来计算与当前对象相交叉的区域。
DragDrop
primaryButtonOnly : boolean
默认情况下，drag和drop实例只会响应鼠标第一个键的点击操作 (右手习惯下的左键)...
默认情况下，drag和drop实例只会响应鼠标第一个键的点击操作 (右手习惯下的左键)。 设置为true，将响应浏览器传来的任何一个键的点击
DragDrop
scroll : boolean
设置为true时，当一个对象被拖拽到浏览器视区边缘时，将自动尝试...
设置为true时，当一个对象被拖拽到浏览器视区边缘时，将自动尝试滚动浏览器的窗口。 默认为true。
DD
xTicks : int[]
在指定一个水平的刻度/间距时， 元素自动吸附位置的像素数组...
在指定一个水平的刻度/间距时， 元素自动吸附位置的像素数组。 当你定义一个间距记号时，这个数组是自动生成的。 （译者注：此配置可以用来实现在水平方向上拖动时的一种磁性吸附效果，这个数组就是 自动吸附的像素刻度或者间距）。
DragDrop
yTicks : int[]
在指定一个垂直的刻度/间距时， 元素自动吸附位置的像素数组...
在指定一个垂直的刻度/间距时， 元素自动吸附位置的像素数组。 当你定义一个间距记号时，这个数组是自动生成的。 （译者注：此配置可以用来实现在垂直方向上拖动时的一种磁性吸附效果，这个数组就是 自动吸附的像素刻度或者间距）。
DragDrop

公共方法

Method Defined By
DD ( String id , String sGroup , object config )
参数:
  • id : String
    相关联的元素的id
  • sGroup : String
    相关联的DragDrop元素编组
  • config : object
    一个对象，包含对于DD合法的配置参数: scroll
返回值:
  • void
DD
addInvalidHandleClass ( string cssClass ) : void
允许你为那些不能发起拖拽操作的元素指定一个CSS类
允许你为那些不能发起拖拽操作的元素指定一个CSS类
参数:
  • cssClass : string
    你希望忽略的元素的样式class
返回值:
  • void
DragDrop
addInvalidHandleId ( string id ) : void
允许你指定一个拖拽句柄的孩子节点，使它不能发起拖拽操作
允许你指定一个拖拽句柄的孩子节点，使它不能发起拖拽操作
参数:
  • id : string
    你希望忽略的元素的id
返回值:
  • void
DragDrop
addInvalidHandleType ( string tagName ) : void
允许你指定一个在被点击时不能发起拖拽操作的标签名称。 这是被设计用来更方便地处理内嵌的link对象的...
允许你指定一个在被点击时不能发起拖拽操作的标签名称。 这是被设计用来更方便地处理内嵌的link对象的， 此对象被嵌在一个拖动句柄内部，当它被点击时需要做其他的事情，而不是开始拖拽操作。
参数:
  • tagName : string
    需要包含在内的元素类型
返回值:
  • void
DragDrop
addToGroup ( sGroup {string} ) : void
将当前实例添加到一个彼此相关的drag/drop对象组中。 每个实例至少属于一个组...
将当前实例添加到一个彼此相关的drag/drop对象组中。 每个实例至少属于一个组， 并且如果需要，可以同时属于任意多个组。
参数:
  • {string} : sGroup
    组名
返回值:
  • void
DragDrop
alignElWithMouse ( HTMLElement el , int iPageX , int iPageY ) : void
把元素位置设置到mousedown或者click事件发生的地方，保持鼠标在被点击元素之上的位置...
把元素位置设置到mousedown或者click事件发生的地方，保持鼠标在被点击元素之上的位置。 如果想把元素放置到不是鼠标点击的地方，请覆盖此方法。
参数:
  • el : HTMLElement
    需要移动的元素
  • iPageX : int
    mousedown或者drag事件的X坐标位置
  • iPageY : int
    mousedown或者drag事件的Y坐标位置
返回值:
  • void
DD
applyConfig () : void
应用指定到此类配置选项。 覆盖Ext.dd.DragDrop， 继承链上此方法的所有版本...
应用指定到此类配置选项。 覆盖Ext.dd.DragDrop， 继承链上此方法的所有版本都会被调用。
参数:
  • 无。
返回值:
  • void
DD
autoOffset ( int iPageX , int iPageY ) : void
设置鼠标的偏移量为：相关联元素左上角到被点击元素位置之间的距离...
设置鼠标的偏移量为：相关联元素左上角到被点击元素位置之间的距离...
参数:
  • iPageX : int
    点击位置的X坐标值
  • iPageY : int
    点击位置的Y坐标值
返回值:
  • void
DD
b4Drag () : void
在onDrag事件之前触发的事件。重写了 Ext.dd.DragDrop中的对应属性。
在onDrag事件之前触发的事件。重写了 Ext.dd.DragDrop中的对应属性。
参数:
  • 无。
返回值:
  • void
DD
b4MouseDown () : void
在onMouseDown事件之前触发的事件。 覆盖了Ext.dd.DragDrop中的相同属性。
Event that fires prior to the onMouseDown event. Overrides Ext.dd.DragDrop.
参数:
  • 无。
返回值:
  • void
DD
cachePosition ( iPageX the , iPageY the ) : void
保存最后一次的位置，这样我们可以按需要重置约束和标记...
保存最后一次的位置，这样我们可以按需要重置约束和标记。 我们必须知道这一点，以使我们能够计算元素与其原来位置偏移的像素数。
参数:
  • the : iPageX
    当前水平位置（可选的，如果使用了它，只是为了方便之后不用查看该值）
  • the : iPageY
    当前垂直位置（可选的，如果使用了它，只是为了方便之后不用查看该值）
返回值:
  • void
DD
clearConstraints () : void
清除所有应用到此实例上的约束。 同时清除标记...
清除所有应用到此实例上的约束。 同时清除标记，因为此时它们不能脱离约束而独立存在。
参数:
  • 无。
返回值:
  • void
DragDrop
clearTicks () : void
清除此实例上定义的所有“吸附”间隔
清除此实例上定义的所有“吸附”间隔
参数:
  • 无。
返回值:
  • void
DragDrop
constrainTo ( Mixed constrainTo , [ Object/Number pad ], [ Boolean inContent ] ) : void
让元素的运动范围受限于另一个元素...
让元素的运动范围受限于另一个元素， 使用方法:

                                    var dd = new Ext.dd.DDProxy("dragDiv1", "proxytest",
                { dragElId: "existingProxyDiv" });
 dd.startDrag = function(){
     this.constrainTo("parent-id");
 };
或者你可以使用 Ext.Element 对象来初始化:
                                Ext.get("dragDiv1").initDDProxy("proxytest", {dragElId: "existingProxyDiv"}, {
     startDrag : function(){
         this.constrainTo("parent-id");
     }
 });
参数:
  • constrainTo : Mixed
    要绑定到的元素。
  • pad : Object/Number
    (可选) Pad提供了定义约束的"padding"参数的一个途径， 既可以是一个数字，以便进行均匀的填充 (4 等价于{left:4, right:4, top:4, bottom:4})， 或者一个包含填充尺寸数据的对象。例如： {right:10, bottom:10}
  • inContent : Boolean
    (可选) 将可拖动区域约束到元素的盒子模型内部(在填充和边框内部)
返回值:
  • void
DragDrop
endDrag ( Event e ) : void
当结束对对象的拖动操作时触发
当结束对对象的拖动操作时触发
参数:
  • e : Event
    the mouseup event
返回值:
  • void
DragDrop
getDragEl () : HTMLElement
返回实际需要拖动元素的引用。默认情况下，这与html元素相同，但也可以指定到另一个元素...
返回实际需要拖动元素的引用。默认情况下，这与html元素相同，但也可以指定到另一个元素。可以在Ext.dd.DDProxy中找到这种例子。
参数:
  • 无。
返回值:
  • HTMLElement
    the html element
DragDrop
getEl () : HTMLElement
返回相关联的元素的引用
返回相关联的元素的引用
参数:
  • 无。
返回值:
  • HTMLElement
    html元素
DragDrop
init ( id the , String sGroup , object config ) : void
设置DragDrop对象。 必须在任何Ext.dd.DragDrop的子类构造器中调用
设置DragDrop对象。 必须在任何Ext.dd.DragDrop的子类构造器中调用
参数:
  • the : id
    相关联的元素id
  • sGroup : String
    相关元素的编组
  • config : object
    配置属性
返回值:
  • void
DragDrop
initTarget ( id the , String sGroup , object config ) : void
Initializes Targeting functionality only... the object does not get a mousedown handler. （译者注：原始文档不完整，无法翻译此句。）
Initializes Targeting functionality only... the object does not get a mousedown handler. （译者注：原始文档不完整，无法翻译此句。）
参数:
  • the : id
    相关联元素的id
  • sGroup : String
    关联项目的编组
  • config : object
    配置属性
返回值:
  • void
DragDrop
isLocked () : boolean
如果此实例被锁定，或者drag drop管理器被锁定， 返回true...
如果此实例被锁定，或者drag drop管理器被锁定， 返回true (意味着此页面的所有拖拽操作都无效。)
参数:
  • 无。
返回值:
  • boolean
    如果此实例或者所有的drag/drop被锁定，返回true；否则返回false
DragDrop
isValidHandleChild ( HTMLElement node ) : boolean
检查被排除在外的标签列表，以确定此次点击是否应该被忽略
检查被排除在外的标签列表，以确定此次点击是否应该被忽略
参数:
  • node : HTMLElement
    需要检查的HTMLElement
返回值:
  • boolean
    如果这是一个合法的标签类型，返回true；如果不是，返回false
DragDrop
lock () : void
锁定此实例
锁定此实例
参数:
  • 无。
返回值:
  • void
DragDrop
onAvailable () : void
覆盖onAvailable方法，以便在决定了位置间隔之后执行所需的操作。
覆盖onAvailable方法，以便在决定了位置间隔之后执行所需的操作。
参数:
  • 无。
返回值:
  • void
DragDrop
onDrag ( Event e ) : void
抽象方法，当拖动一个对象产生onMouseMove事件时调用。
抽象方法，当拖动一个对象产生onMouseMove事件时调用。
参数:
  • e : Event
    mousemove事件
返回值:
  • void
DragDrop
onDragDrop ( Event e , String|DragDrop[] id ) : void
抽象方法，在当前元素被拖放到另一个DragDrop对象上时调用。
抽象方法，在当前元素被拖放到另一个DragDrop对象上时调用。
参数:
  • e : Event
    mouseup事件
  • id : String|DragDrop[]
    在POINT模式下，这是被拖放到其上的那个元素的id（译者注：指目标元素id）。 在INTERSECT模式下，这是一个dd元素数组，当前元素被拖放到其上。
返回值:
  • void
DragDrop
onDragEnter ( Event e , String|DragDrop[] id ) : void
抽象方法，当此元素第一次从另外一个DragDrop对象上滑过时，此方法被调用。
抽象方法，当此元素第一次从另外一个DragDrop对象上滑过时，此方法被调用。
参数:
  • e : Event
    the mousemove event
  • id : String|DragDrop[]
    在POINT模式下，此id是被滑过的元素的id。 在INTERSECT模式下，这是一个或多个被滑过元素的数组。
返回值:
  • void
DragDrop
onDragOut ( Event e , String|DragDrop[] id ) : void
抽象方法，当我们不再拖动一个元素在另一个元素上滑过时触发
抽象方法，当我们不再拖动一个元素在另一个元素上滑过时触发
参数:
  • e : Event
    mousemove事件
  • id : String|DragDrop[]
    在POINT模式下，此id是被滑过的元素的id。 在INTERSECT模式下，这是dd元素的数组，鼠标不再停留在这些元素之上。
返回值:
  • void
DragDrop
onDragOver ( Event e , String|DragDrop[] id ) : void
抽象方法，当此元素从另一个DragDrop对象上滑过时调用。
抽象方法，当此元素从另一个DragDrop对象上滑过时调用。
参数:
  • e : Event
    mousemove事件
  • id : String|DragDrop[]
    在POINT模式下，此id是被滑过的元素的id。 在INTERSECT模式下，这是被滑过的dd元素数组。
返回值:
  • void
DragDrop
onInvalidDrop ( Event e ) : void
抽象方法，如果当前元素被拖动到了一个没有落下目标的区域时，此方法被调用
抽象方法，如果当前元素被拖动到了一个没有落下目标的区域时，此方法被调用
参数:
  • e : Event
    mouseup事件
返回值:
  • void
DragDrop
onMouseDown ( Event e ) : void
当一个drag/drop对象获得mousedown事件时的处理函数
当一个drag/drop对象获得mousedown事件时的处理函数
参数:
  • e : Event
    mousedown事件
返回值:
  • void
DragDrop
onMouseUp ( Event e ) : void
当在拖拽的对象松开鼠标时触发的事件处理器
当在拖拽的对象松开鼠标时触发的事件处理器
参数:
  • e : Event
    mouseup事件
返回值:
  • void
DragDrop
removeFromGroup ( string sGroup ) : void
从所提供的交互组中删除此元素
从所提供的交互组中删除此元素
参数:
  • sGroup : string
    需要从中删除的组
返回值:
  • void
DragDrop
removeInvalidHandleClass ( string cssClass ) : void
卸载一个描述非法状态的CSS类
Unsets an invalid css class
参数:
  • cssClass : string
    你想要重新启用的元素的css类。
返回值:
  • void
DragDrop
removeInvalidHandleId ( string id ) : void
卸载一个无效的handle id
Unsets an invalid handle id
参数:
  • id : string
    需要重新启用的元素的id the id of the element to re-enable
返回值:
  • void
DragDrop
removeInvalidHandleType ( string tagName ) : void
卸载由addInvalidHandleType方法添加的排除标签集合
卸载由addInvalidHandleType方法添加的排除标签集合
参数:
  • tagName : string
    需要排除的元素类型
返回值:
  • void
DragDrop
resetConstraints ( boolean maintainOffset ) : void
当你手动重新设置一个dd元素的位置时，必须调用resetConstraints方法。
当你手动重新设置一个dd元素的位置时，必须调用resetConstraints方法。
参数:
  • maintainOffset : boolean
返回值:
  • void
DragDrop
setDelta ( int iDeltaX , int iDeltaY ) : void
设置鼠标的偏移量。 你可以直接调用此方法，以强制把鼠标设置到一个特定的位置 (例如...
设置鼠标的偏移量。 你可以直接调用此方法，以强制把鼠标设置到一个特定的位置 (例如：传递0,0可以将它设置到对象的中心点位置)
参数:
  • iDeltaX : int
    和左端的距离
  • iDeltaY : int
    和顶端的距离
返回值:
  • void
DD
setDragElId ( id {string} ) : void
允许你指定一个元素，不是相关联的元素本身，在拖动时跟随鼠标移动
允许你指定一个元素，不是相关联的元素本身，在拖动时跟随鼠标移动 （译者注：也就是一个”影子对象“，拖动的时候，原来的元素不动，让和它本身一样的 一个”克隆体“来负责跟随鼠标移动）
参数:
  • {string} : id
    发起拖动操作的元素id
返回值:
  • void
DragDrop
setDragElPos ( int iPageX , int iPageY ) : void
把拖拽的元素位置设置到mousedown或者click事件发生的地方，保持鼠标在被点击元素之上的位置...
把拖拽的元素位置设置到mousedown或者click事件发生的地方，保持鼠标在被点击元素之上的位置。 如果想把元素放置到不是鼠标所在的位置，请覆盖此方法。
参数:
  • iPageX : int
    鼠标按下或者拖拽时的横坐标
  • iPageY : int
    鼠标按下或者拖拽时的纵坐标
返回值:
  • void
DD
setHandleElId ( id {string} ) : void
允许你指定关联元素的一个孩子节点，以用来发起拖动操作。 这种情况的一个例子是，你有包含text和link内容的div...
允许你指定关联元素的一个孩子节点，以用来发起拖动操作。 这种情况的一个例子是，你有包含text和link内容的div。 点击内容区域的任何地方，都会正常地启动拖动操作。使用此方法可以指定从div内容中的任何一个元素发起拖拽操作。
参数:
  • {string} : id
    将被用来发起拖拽操作的元素id。
返回值:
  • void
DragDrop
setInitPosition ( int diffX , int diffY ) : void
存储相关元素初始化的位置。
存储相关元素初始化的位置。
参数:
  • diffX : int
    X方向偏移，默认为0
  • diffY : int
    Y方向偏移，默认为0
返回值:
  • void
DragDrop
setOuterHandleElId ( id the ) : void
允许你设置一个相关元素外部的元素，作为拖动的手柄
允许你设置一个相关元素外部的元素，作为拖动的手柄
参数:
  • the : id
    元素的id，此元素将被用作发起拖动操作
返回值:
  • void
DragDrop
setPadding ( int iTop , int iRight , int iBot , int iLeft ) : void
配置拖拽时目标区域的填充像素数。为计算目标区域有效地扩展（或者缩小）虚拟对象的大小...
配置拖拽时目标区域的填充像素数。为计算目标区域有效地扩展（或者缩小）虚拟对象的大小。支持css-style快捷方式，如果只传递了一个参数，所有的边界将会拥有相同的填充；如果传递了两个参数，top和bottom会使用第一个参数， left和right会使用第二个参数。（译者注：这里的规则与CSS设置padding参数的规则是一样的，完全可以用CSS的规则来配置此参数。）
参数:
  • iTop : int
    Top pad
  • iRight : int
    Right pad
  • iBot : int
    Bot pad
  • iLeft : int
    Left pad
返回值:
  • void
DragDrop
setXConstraint ( int iLeft , int iRight , int iTickSize ) : void
默认情况下，元素可以被拖拽并放置到屏幕上的任意位置。 使用此方法来限制元素在水平方向上的运动...
默认情况下，元素可以被拖拽并放置到屏幕上的任意位置。 使用此方法来限制元素在水平方向上的运动。 如果你想锁定在y轴上的拖动，传递参数0,0
参数:
  • iLeft : int
    元素可以向左移动的像素数
  • iRight : int
    元素可以向右移动的像素数
  • iTickSize : int
    可选参数，指定元素每次以iTickSize配置项指定的像素数运动。
返回值:
  • void
DragDrop
setYConstraint ( int iUp , int iDown , int iTickSize ) : void
默认情况下，元素可以被拖放到屏幕上的任意位置。 设置此项以限制元素在垂直方向上的运动...
默认情况下，元素可以被拖放到屏幕上的任意位置。 设置此项以限制元素在垂直方向上的运动。 如果我们需要锁定元素在x轴方向上的运动，传递参数0,0
参数:
  • iUp : int
    元素可以向上移动的像素数
  • iDown : int
    元素可以向下移动的像素数
  • iTickSize : int
    可选参数，指定元素每次以iTickSize配置项指定的像素数运动。
返回值:
  • void
DragDrop
startDrag ( int X , int Y ) : void
抽象方法，当点击一个drag/drop对象，并且遇到拖动或者mousedown事件的那一刻， 此方法被调用。
抽象方法，当点击一个drag/drop对象，并且遇到拖动或者mousedown事件的那一刻， 此方法被调用。
参数:
  • X : int
    点击的位置
  • Y : int
    点击的位置
返回值:
  • void
DragDrop
toString () : string
toString方法
toString method
参数:
  • 无。
返回值:
  • string
    dd对象的字符串表述
DragDrop
unlock () : void
Unlock this instace
为此实例解锁
参数:
  • 无。
返回值:
  • void
DragDrop
unreg () : void
删除当前元素上所有拖拽和落下钩子(hook)
删除当前元素上所有拖拽和落下钩子(hook)
参数:
  • 无。
返回值:
  • void
DragDrop

公共事件

该类没有公共事件。


DragDrop
    DD
      DDProxy

Class Ext.dd.DDProxy

包: | Ext.dd
定义类的文件: | DDCore.js
类: | DDProxy
子类: | DragSource
继承自: | DD
一个DragDrop的实现类，在document中插入一个空的带边框的div，当进行拖拽操作时跟随鼠标移动。在点击的时候，这个div框架被设置成与相关联的元素一样大小 ，并被精确地移动到相关联的元素的位置。 这个"frame"元素的引用，指的是单个的代理元素，它是被创建用来替代页面上所有 DDProxy元素被拖拽的。 （译者注：这个代理元素，可以看作被拖拽的元素的一个“影子效果”，拖拽的时候 原来的元素先不动，只是这个代理元素跟随鼠标移动，当松开鼠标的按键的时候，原来的元素才被移动到鼠标放开的位置。）

公共属性

Property Defined By
Ext.dd.DDProxy.dragElId : String
默认被拖动的框架div的id
DDProxy
available : boolean
当相关联的dom元素可以访问之前availabe属性值都是false。
DragDrop
centerFrame : boolean
默认情况下，框架会被精确地放置到拖拽元素的位置 ，所以我们必须使用Ext.dd.DD类提供的鼠标偏移量....
默认情况下，框架会被精确地放置到拖拽元素的位置 ，所以我们必须使用Ext.dd.DD类提供的鼠标偏移量。另外一点是让拖拽框架以鼠标为中心点，只有你没有为此对象设置约束时才有效。设置centerFrame为true可以使用这种效果（以鼠标为中心）。
DDProxy
config : object
传递给构造器的配置参数
DragDrop
defaultPadding : Object
为"constrainTo"元素提供默认的填充约束 (默认值为 {left: 0, right:0, top:0, bottom:0})。
DragDrop
groups : object An object in the format {'group1':true, 'group2':true
组定义了一个相关的DragDrop对象的逻辑集合。 只有在与同一组中的其它DragDrop对象发生交互时...
组定义了一个相关的DragDrop对象的逻辑集合。 只有在与同一组中的其它DragDrop对象发生交互时，实例才会收到事件。这允许我们在需要时，使用DragDrop的单个实例来定义多个组。
DragDrop
hasOuterHandles : boolean
默认情况下，只有在相关联元素的区域中发生mousedown事件时，才发起拖拽操作。 在某些浏览器中...
默认情况下，只有在相关联元素的区域中发生mousedown事件时，才发起拖拽操作。 在某些浏览器中，如果上一次mouseup事件在window外部发生的时候， 浏览器将不能报告此次的mousedown事件， 此时将会产生一个bug。 如果定义了外部的句柄，此属性值将被设置为true。
DragDrop
id : String
与当前对象相关联的元素的id。 这就是我们所谓的关联元素("linked element")，因为此元素的大小和位置...
与当前对象相关联的元素的id。 这就是我们所谓的关联元素("linked element")，因为此元素的大小和位置 将被用来决定何时与拖动和放开的对象进行交互。
DragDrop
ignoreSelf : Boolean
设置为false，拖拽时，将会使DragDrop对象在悬在自身元素上方时触发drag事件。默认为...
设置为false，拖拽时，将会使DragDrop对象在悬在自身元素上方时触发drag事件。默认为true——DragDrop对象默认不会对自身触发drag事件。
DragDrop
invalidHandleClasses : Array
CSS类名数组，应用到那些被认为是非法拖拽句柄的对象上。
DragDrop
invalidHandleIds : Object
一个对象，它的属性名标志了被认为是非法的拖动手柄元素的ID。 一个非空属性值标志着这些ID是有效的...
一个对象，它的属性名标志了被认为是非法的拖动手柄元素的ID。 一个非空属性值标志着这些ID是有效的。 例如，为了阻止从ID为"foo"的元素上发起拖动操作，使用 :
                                {
    foo: true
}
DragDrop
invalidHandleTypes : Object
一个对象，它的属性名标记了那些不能作为拖拽句柄的HTML标签。 一个非空属性值标志着此标签是无效的...
一个对象，它的属性名标记了那些不能作为拖拽句柄的HTML标签。 一个非空属性值标志着此标签是无效的。 默认为以下值，它将阻止从元素发起拖拽操作：
                                {
    A: "A"
}
DragDrop
isTarget : boolean
默认情况下，任何实例都可以是拖放的目标。 可以设置isTarget为false以禁用。
DragDrop
maintainOffset : boolean
当我们重置约束时保持偏移量。 当你需要在页面变化时，元素保持与其父元素的相对位置关系...
当我们重置约束时保持偏移量。 当你需要在页面变化时，元素保持与其父元素的相对位置关系，设置此项为true。
DragDrop
moveOnly : boolean
当设置为true时，当这个DD对象在同组的其他DD对象上方时，将...
当设置为true时，当这个DD对象在同组的其他DD对象上方时，将不会接收到notification事件。默认为false。
DragDrop
padding : int[] An array containing the 4 padding values: [top, right, bottom, left]
当前拖拽对象的padding配置项， 用来计算与当前对象相交叉的区域。
DragDrop
primaryButtonOnly : boolean
默认情况下，drag和drop实例只会响应鼠标第一个键的点击操作 (右手习惯下的左键)...
默认情况下，drag和drop实例只会响应鼠标第一个键的点击操作 (右手习惯下的左键)。 设置为true，将响应浏览器传来的任何一个键的点击
DragDrop
resizeFrame : boolean
默认情况下，我们把拖动的框架设置成与需要拖动的元素一样大小 (这是为了让框架有效...
默认情况下，我们把拖动的框架设置成与需要拖动的元素一样大小 (这是为了让框架有效)。 如果我们需要一个不同的行为，我们可以关闭它。
DDProxy
scroll : boolean
设置为true时，当一个对象被拖拽到浏览器视区边缘时，将自动尝试...
设置为true时，当一个对象被拖拽到浏览器视区边缘时，将自动尝试滚动浏览器的窗口。 默认为true。
DD
xTicks : int[]
在指定一个水平的刻度/间距时， 元素自动吸附位置的像素数组...
在指定一个水平的刻度/间距时， 元素自动吸附位置的像素数组。 当你定义一个间距记号时，这个数组是自动生成的。 （译者注：此配置可以用来实现在水平方向上拖动时的一种磁性吸附效果，这个数组就是 自动吸附的像素刻度或者间距）。
DragDrop
yTicks : int[]
在指定一个垂直的刻度/间距时， 元素自动吸附位置的像素数组...
在指定一个垂直的刻度/间距时， 元素自动吸附位置的像素数组。 当你定义一个间距记号时，这个数组是自动生成的。 （译者注：此配置可以用来实现在垂直方向上拖动时的一种磁性吸附效果，这个数组就是 自动吸附的像素刻度或者间距）。
DragDrop

公共方法

Method Defined By
DDProxy ( String id , String sGroup , object config )
参数:
  • id : String
    the id of the linked html element
  • sGroup : String
    the group of related DragDrop objects
  • config : object
    DDProxy的一个包含配置属性的对象，除了包含在DragDrop中的那些属性，还有resizeFrame, centerFrame, dragElId
返回值:
  • void
DDProxy
addInvalidHandleClass ( string cssClass ) : void
允许你为那些不能发起拖拽操作的元素指定一个CSS类
允许你为那些不能发起拖拽操作的元素指定一个CSS类
参数:
  • cssClass : string
    你希望忽略的元素的样式class
返回值:
  • void
DragDrop
addInvalidHandleId ( string id ) : void
允许你指定一个拖拽句柄的孩子节点，使它不能发起拖拽操作
允许你指定一个拖拽句柄的孩子节点，使它不能发起拖拽操作
参数:
  • id : string
    你希望忽略的元素的id
返回值:
  • void
DragDrop
addInvalidHandleType ( string tagName ) : void
允许你指定一个在被点击时不能发起拖拽操作的标签名称。 这是被设计用来更方便地处理内嵌的link对象的...
允许你指定一个在被点击时不能发起拖拽操作的标签名称。 这是被设计用来更方便地处理内嵌的link对象的， 此对象被嵌在一个拖动句柄内部，当它被点击时需要做其他的事情，而不是开始拖拽操作。
参数:
  • tagName : string
    需要包含在内的元素类型
返回值:
  • void
DragDrop
addToGroup ( sGroup {string} ) : void
将当前实例添加到一个彼此相关的drag/drop对象组中。 每个实例至少属于一个组...
将当前实例添加到一个彼此相关的drag/drop对象组中。 每个实例至少属于一个组， 并且如果需要，可以同时属于任意多个组。
参数:
  • {string} : sGroup
    组名
返回值:
  • void
DragDrop
alignElWithMouse ( HTMLElement el , int iPageX , int iPageY ) : void
把元素位置设置到mousedown或者click事件发生的地方，保持鼠标在被点击元素之上的位置...
把元素位置设置到mousedown或者click事件发生的地方，保持鼠标在被点击元素之上的位置。 如果想把元素放置到不是鼠标点击的地方，请覆盖此方法。
参数:
  • el : HTMLElement
    需要移动的元素
  • iPageX : int
    mousedown或者drag事件的X坐标位置
  • iPageY : int
    mousedown或者drag事件的Y坐标位置
返回值:
  • void
DD
applyConfig () : void
应用那些传递给构造器的配置参数。此操作被期望在继承链的每一层上都能起作用...
应用那些传递给构造器的配置参数。此操作被期望在继承链的每一层上都能起作用。 这样一个DDProxy的实现类将会执行在DDProxy, DD和DragDrop上应用配置项的操作，此操作是为了使这些参数在每个对象上都可用。
参数:
  • 无。
返回值:
  • void
DD
autoOffset ( int iPageX , int iPageY ) : void
设置鼠标的偏移量为：相关联元素左上角到被点击元素位置之间的距离...
设置鼠标的偏移量为：相关联元素左上角到被点击元素位置之间的距离...
参数:
  • iPageX : int
    点击位置的X坐标值
  • iPageY : int
    点击位置的Y坐标值
返回值:
  • void
DD
b4Drag () : void
在onDrag事件之前触发的事件。重写了 Ext.dd.DragDrop中的对应属性。
在onDrag事件之前触发的事件。重写了 Ext.dd.DragDrop中的对应属性。
参数:
  • 无。
返回值:
  • void
DD
b4MouseDown () : void
在onMouseDown事件之前触发的事件。 覆盖了Ext.dd.DragDrop中的相同属性。
Event that fires prior to the onMouseDown event. Overrides Ext.dd.DragDrop.
参数:
  • 无。
返回值:
  • void
DD
cachePosition ( iPageX the , iPageY the ) : void
保存最后一次的位置，这样我们可以按需要重置约束和标记...
保存最后一次的位置，这样我们可以按需要重置约束和标记。 我们必须知道这一点，以使我们能够计算元素与其原来位置偏移的像素数。
参数:
  • the : iPageX
    当前水平位置（可选的，如果使用了它，只是为了方便之后不用查看该值）
  • the : iPageY
    当前垂直位置（可选的，如果使用了它，只是为了方便之后不用查看该值）
返回值:
  • void
DD
clearConstraints () : void
清除所有应用到此实例上的约束。 同时清除标记...
清除所有应用到此实例上的约束。 同时清除标记，因为此时它们不能脱离约束而独立存在。
参数:
  • 无。
返回值:
  • void
DragDrop
clearTicks () : void
清除此实例上定义的所有“吸附”间隔
清除此实例上定义的所有“吸附”间隔
参数:
  • 无。
返回值:
  • void
DragDrop
constrainTo ( Mixed constrainTo , [ Object/Number pad ], [ Boolean inContent ] ) : void
让元素的运动范围受限于另一个元素...
让元素的运动范围受限于另一个元素， 使用方法:

                                    var dd = new Ext.dd.DDProxy("dragDiv1", "proxytest",
                { dragElId: "existingProxyDiv" });
 dd.startDrag = function(){
     this.constrainTo("parent-id");
 };
或者你可以使用 Ext.Element 对象来初始化:
                                Ext.get("dragDiv1").initDDProxy("proxytest", {dragElId: "existingProxyDiv"}, {
     startDrag : function(){
         this.constrainTo("parent-id");
     }
 });
参数:
  • constrainTo : Mixed
    要绑定到的元素。
  • pad : Object/Number
    (可选) Pad提供了定义约束的"padding"参数的一个途径， 既可以是一个数字，以便进行均匀的填充 (4 等价于{left:4, right:4, top:4, bottom:4})， 或者一个包含填充尺寸数据的对象。例如： {right:10, bottom:10}
  • inContent : Boolean
    (可选) 将可拖动区域约束到元素的盒子模型内部(在填充和边框内部)
返回值:
  • void
DragDrop
createFrame () : void
创建代理元素，如果它还不存在
创建代理元素，如果它还不存在
参数:
  • 无。
返回值:
  • void
DDProxy
endDrag ( Event e ) : void
当结束对对象的拖动操作时触发
当结束对对象的拖动操作时触发
参数:
  • e : Event
    the mouseup event
返回值:
  • void
DragDrop
getDragEl () : HTMLElement
返回实际需要拖动元素的引用。默认情况下，这与html元素相同，但也可以指定到另一个元素...
返回实际需要拖动元素的引用。默认情况下，这与html元素相同，但也可以指定到另一个元素。可以在Ext.dd.DDProxy中找到这种例子。
参数:
  • 无。
返回值:
  • HTMLElement
    the html element
DragDrop
getEl () : HTMLElement
返回相关联的元素的引用
返回相关联的元素的引用
参数:
  • 无。
返回值:
  • HTMLElement
    html元素
DragDrop
init ( id the , String sGroup , object config ) : void
设置DragDrop对象。 必须在任何Ext.dd.DragDrop的子类构造器中调用
设置DragDrop对象。 必须在任何Ext.dd.DragDrop的子类构造器中调用
参数:
  • the : id
    相关联的元素id
  • sGroup : String
    相关元素的编组
  • config : object
    配置属性
返回值:
  • void
DragDrop
initFrame () : void
初始化拖动框架元素。 此方法必须在子类的构造器中调用。
初始化拖动框架元素。 此方法必须在子类的构造器中调用。
参数:
  • 无。
返回值:
  • void
DDProxy
initTarget ( id the , String sGroup , object config ) : void
Initializes Targeting functionality only... the object does not get a mousedown handler. （译者注：原始文档不完整，无法翻译此句。）
Initializes Targeting functionality only... the object does not get a mousedown handler. （译者注：原始文档不完整，无法翻译此句。）
参数:
  • the : id
    相关联元素的id
  • sGroup : String
    关联项目的编组
  • config : object
    配置属性
返回值:
  • void
DragDrop
isLocked () : boolean
如果此实例被锁定，或者drag drop管理器被锁定， 返回true...
如果此实例被锁定，或者drag drop管理器被锁定， 返回true (意味着此页面的所有拖拽操作都无效。)
参数:
  • 无。
返回值:
  • boolean
    如果此实例或者所有的drag/drop被锁定，返回true；否则返回false
DragDrop
isValidHandleChild ( HTMLElement node ) : boolean
检查被排除在外的标签列表，以确定此次点击是否应该被忽略
检查被排除在外的标签列表，以确定此次点击是否应该被忽略
参数:
  • node : HTMLElement
    需要检查的HTMLElement
返回值:
  • boolean
    如果这是一个合法的标签类型，返回true；如果不是，返回false
DragDrop
lock () : void
锁定此实例
锁定此实例
参数:
  • 无。
返回值:
  • void
DragDrop
onAvailable () : void
覆盖onAvailable方法，以便在决定了位置间隔之后执行所需的操作。
覆盖onAvailable方法，以便在决定了位置间隔之后执行所需的操作。
参数:
  • 无。
返回值:
  • void
DragDrop
onDrag ( Event e ) : void
抽象方法，当拖动一个对象产生onMouseMove事件时调用。
抽象方法，当拖动一个对象产生onMouseMove事件时调用。
参数:
  • e : Event
    mousemove事件
返回值:
  • void
DragDrop
onDragDrop ( Event e , String|DragDrop[] id ) : void
抽象方法，在当前元素被拖放到另一个DragDrop对象上时调用。
抽象方法，在当前元素被拖放到另一个DragDrop对象上时调用。
参数:
  • e : Event
    mouseup事件
  • id : String|DragDrop[]
    在POINT模式下，这是被拖放到其上的那个元素的id（译者注：指目标元素id）。 在INTERSECT模式下，这是一个dd元素数组，当前元素被拖放到其上。
返回值:
  • void
DragDrop
onDragEnter ( Event e , String|DragDrop[] id ) : void
抽象方法，当此元素第一次从另外一个DragDrop对象上滑过时，此方法被调用。
抽象方法，当此元素第一次从另外一个DragDrop对象上滑过时，此方法被调用。
参数:
  • e : Event
    the mousemove event
  • id : String|DragDrop[]
    在POINT模式下，此id是被滑过的元素的id。 在INTERSECT模式下，这是一个或多个被滑过元素的数组。
返回值:
  • void
DragDrop
onDragOut ( Event e , String|DragDrop[] id ) : void
抽象方法，当我们不再拖动一个元素在另一个元素上滑过时触发
抽象方法，当我们不再拖动一个元素在另一个元素上滑过时触发
参数:
  • e : Event
    mousemove事件
  • id : String|DragDrop[]
    在POINT模式下，此id是被滑过的元素的id。 在INTERSECT模式下，这是dd元素的数组，鼠标不再停留在这些元素之上。
返回值:
  • void
DragDrop
onDragOver ( Event e , String|DragDrop[] id ) : void
抽象方法，当此元素从另一个DragDrop对象上滑过时调用。
抽象方法，当此元素从另一个DragDrop对象上滑过时调用。
参数:
  • e : Event
    mousemove事件
  • id : String|DragDrop[]
    在POINT模式下，此id是被滑过的元素的id。 在INTERSECT模式下，这是被滑过的dd元素数组。
返回值:
  • void
DragDrop
onInvalidDrop ( Event e ) : void
抽象方法，如果当前元素被拖动到了一个没有落下目标的区域时，此方法被调用
抽象方法，如果当前元素被拖动到了一个没有落下目标的区域时，此方法被调用
参数:
  • e : Event
    mouseup事件
返回值:
  • void
DragDrop
onMouseDown ( Event e ) : void
当一个drag/drop对象获得mousedown事件时的处理函数
当一个drag/drop对象获得mousedown事件时的处理函数
参数:
  • e : Event
    mousedown事件
返回值:
  • void
DragDrop
onMouseUp ( Event e ) : void
当在拖拽的对象松开鼠标时触发的事件处理器
当在拖拽的对象松开鼠标时触发的事件处理器
参数:
  • e : Event
    mouseup事件
返回值:
  • void
DragDrop
removeFromGroup ( string sGroup ) : void
从所提供的交互组中删除此元素
从所提供的交互组中删除此元素
参数:
  • sGroup : string
    需要从中删除的组
返回值:
  • void
DragDrop
removeInvalidHandleClass ( string cssClass ) : void
卸载一个描述非法状态的CSS类
Unsets an invalid css class
参数:
  • cssClass : string
    你想要重新启用的元素的css类。
返回值:
  • void
DragDrop
removeInvalidHandleId ( string id ) : void
卸载一个无效的handle id
Unsets an invalid handle id
参数:
  • id : string
    需要重新启用的元素的id the id of the element to re-enable
返回值:
  • void
DragDrop
removeInvalidHandleType ( string tagName ) : void
卸载由addInvalidHandleType方法添加的排除标签集合
卸载由addInvalidHandleType方法添加的排除标签集合
参数:
  • tagName : string
    需要排除的元素类型
返回值:
  • void
DragDrop
resetConstraints ( boolean maintainOffset ) : void
当你手动重新设置一个dd元素的位置时，必须调用resetConstraints方法。
当你手动重新设置一个dd元素的位置时，必须调用resetConstraints方法。
参数:
  • maintainOffset : boolean
返回值:
  • void
DragDrop
setDelta ( int iDeltaX , int iDeltaY ) : void
设置鼠标的偏移量。 你可以直接调用此方法，以强制把鼠标设置到一个特定的位置 (例如...
设置鼠标的偏移量。 你可以直接调用此方法，以强制把鼠标设置到一个特定的位置 (例如：传递0,0可以将它设置到对象的中心点位置)
参数:
  • iDeltaX : int
    和左端的距离
  • iDeltaY : int
    和顶端的距离
返回值:
  • void
DD
setDragElId ( id {string} ) : void
允许你指定一个元素，不是相关联的元素本身，在拖动时跟随鼠标移动
允许你指定一个元素，不是相关联的元素本身，在拖动时跟随鼠标移动 （译者注：也就是一个”影子对象“，拖动的时候，原来的元素不动，让和它本身一样的 一个”克隆体“来负责跟随鼠标移动）
参数:
  • {string} : id
    发起拖动操作的元素id
返回值:
  • void
DragDrop
setDragElPos ( int iPageX , int iPageY ) : void
把拖拽的元素位置设置到mousedown或者click事件发生的地方，保持鼠标在被点击元素之上的位置...
把拖拽的元素位置设置到mousedown或者click事件发生的地方，保持鼠标在被点击元素之上的位置。 如果想把元素放置到不是鼠标所在的位置，请覆盖此方法。
参数:
  • iPageX : int
    鼠标按下或者拖拽时的横坐标
  • iPageY : int
    鼠标按下或者拖拽时的纵坐标
返回值:
  • void
DD
setHandleElId ( id {string} ) : void
允许你指定关联元素的一个孩子节点，以用来发起拖动操作。 这种情况的一个例子是，你有包含text和link内容的div...
允许你指定关联元素的一个孩子节点，以用来发起拖动操作。 这种情况的一个例子是，你有包含text和link内容的div。 点击内容区域的任何地方，都会正常地启动拖动操作。使用此方法可以指定从div内容中的任何一个元素发起拖拽操作。
参数:
  • {string} : id
    将被用来发起拖拽操作的元素id。
返回值:
  • void
DragDrop
setInitPosition ( int diffX , int diffY ) : void
存储相关元素初始化的位置。
存储相关元素初始化的位置。
参数:
  • diffX : int
    X方向偏移，默认为0
  • diffY : int
    Y方向偏移，默认为0
返回值:
  • void
DragDrop
setOuterHandleElId ( id the ) : void
允许你设置一个相关元素外部的元素，作为拖动的手柄
允许你设置一个相关元素外部的元素，作为拖动的手柄
参数:
  • the : id
    元素的id，此元素将被用作发起拖动操作
返回值:
  • void
DragDrop
setPadding ( int iTop , int iRight , int iBot , int iLeft ) : void
配置拖拽时目标区域的填充像素数。为计算目标区域有效地扩展（或者缩小）虚拟对象的大小...
配置拖拽时目标区域的填充像素数。为计算目标区域有效地扩展（或者缩小）虚拟对象的大小。支持css-style快捷方式，如果只传递了一个参数，所有的边界将会拥有相同的填充；如果传递了两个参数，top和bottom会使用第一个参数， left和right会使用第二个参数。（译者注：这里的规则与CSS设置padding参数的规则是一样的，完全可以用CSS的规则来配置此参数。）
参数:
  • iTop : int
    Top pad
  • iRight : int
    Right pad
  • iBot : int
    Bot pad
  • iLeft : int
    Left pad
返回值:
  • void
DragDrop
setXConstraint ( int iLeft , int iRight , int iTickSize ) : void
默认情况下，元素可以被拖拽并放置到屏幕上的任意位置。 使用此方法来限制元素在水平方向上的运动...
默认情况下，元素可以被拖拽并放置到屏幕上的任意位置。 使用此方法来限制元素在水平方向上的运动。 如果你想锁定在y轴上的拖动，传递参数0,0
参数:
  • iLeft : int
    元素可以向左移动的像素数
  • iRight : int
    元素可以向右移动的像素数
  • iTickSize : int
    可选参数，指定元素每次以iTickSize配置项指定的像素数运动。
返回值:
  • void
DragDrop
setYConstraint ( int iUp , int iDown , int iTickSize ) : void
默认情况下，元素可以被拖放到屏幕上的任意位置。 设置此项以限制元素在垂直方向上的运动...
默认情况下，元素可以被拖放到屏幕上的任意位置。 设置此项以限制元素在垂直方向上的运动。 如果我们需要锁定元素在x轴方向上的运动，传递参数0,0
参数:
  • iUp : int
    元素可以向上移动的像素数
  • iDown : int
    元素可以向下移动的像素数
  • iTickSize : int
    可选参数，指定元素每次以iTickSize配置项指定的像素数运动。
返回值:
  • void
DragDrop
startDrag ( int X , int Y ) : void
抽象方法，当点击一个drag/drop对象，并且遇到拖动或者mousedown事件的那一刻， 此方法被调用。
抽象方法，当点击一个drag/drop对象，并且遇到拖动或者mousedown事件的那一刻， 此方法被调用。
参数:
  • X : int
    点击的位置
  • Y : int
    点击的位置
返回值:
  • void
DragDrop
toString () : string
toString方法
toString method
参数:
  • 无。
返回值:
  • string
    dd对象的字符串表述
DragDrop
unlock () : void
Unlock this instace
为此实例解锁
参数:
  • 无。
返回值:
  • void
DragDrop
unreg () : void
删除当前元素上所有拖拽和落下钩子(hook)
删除当前元素上所有拖拽和落下钩子(hook)
参数:
  • 无。
返回值:
  • void
DragDrop

公共事件

该类没有公共事件。


DragDrop
    DDTarget

Class Ext.dd.DDTarget

包: | Ext.dd
定义类的文件: | DDCore.js
类: | DDTarget
子类: | DropTarget
继承自: | DragDrop
一个DragDrop的实现类，它不能移动，但是可以成为拖拽的目标。 你可以用忽略事件回调函数的方式获得同样的效果，但是，使用这种方式（译者注：指这个类）我们可以 减少对事件监听和回调的开销。

公共属性

Property Defined By
available : boolean
当相关联的dom元素可以访问之前availabe属性值都是false。
DragDrop
config : object
传递给构造器的配置参数
DragDrop
defaultPadding : Object
为"constrainTo"元素提供默认的填充约束 (默认值为 {left: 0, right:0, top:0, bottom:0})。
DragDrop
groups : object An object in the format {'group1':true, 'group2':true
组定义了一个相关的DragDrop对象的逻辑集合。 只有在与同一组中的其它DragDrop对象发生交互时...
组定义了一个相关的DragDrop对象的逻辑集合。 只有在与同一组中的其它DragDrop对象发生交互时，实例才会收到事件。这允许我们在需要时，使用DragDrop的单个实例来定义多个组。
DragDrop
hasOuterHandles : boolean
默认情况下，只有在相关联元素的区域中发生mousedown事件时，才发起拖拽操作。 在某些浏览器中...
默认情况下，只有在相关联元素的区域中发生mousedown事件时，才发起拖拽操作。 在某些浏览器中，如果上一次mouseup事件在window外部发生的时候， 浏览器将不能报告此次的mousedown事件， 此时将会产生一个bug。 如果定义了外部的句柄，此属性值将被设置为true。
DragDrop
id : String
与当前对象相关联的元素的id。 这就是我们所谓的关联元素("linked element")，因为此元素的大小和位置...
与当前对象相关联的元素的id。 这就是我们所谓的关联元素("linked element")，因为此元素的大小和位置 将被用来决定何时与拖动和放开的对象进行交互。
DragDrop
ignoreSelf : Boolean
设置为false，拖拽时，将会使DragDrop对象在悬在自身元素上方时触发drag事件。默认为...
设置为false，拖拽时，将会使DragDrop对象在悬在自身元素上方时触发drag事件。默认为true——DragDrop对象默认不会对自身触发drag事件。
DragDrop
invalidHandleClasses : Array
CSS类名数组，应用到那些被认为是非法拖拽句柄的对象上。
DragDrop
invalidHandleIds : Object
一个对象，它的属性名标志了被认为是非法的拖动手柄元素的ID。 一个非空属性值标志着这些ID是有效的...
一个对象，它的属性名标志了被认为是非法的拖动手柄元素的ID。 一个非空属性值标志着这些ID是有效的。 例如，为了阻止从ID为"foo"的元素上发起拖动操作，使用 :
                                {
    foo: true
}
DragDrop
invalidHandleTypes : Object
一个对象，它的属性名标记了那些不能作为拖拽句柄的HTML标签。 一个非空属性值标志着此标签是无效的...
一个对象，它的属性名标记了那些不能作为拖拽句柄的HTML标签。 一个非空属性值标志着此标签是无效的。 默认为以下值，它将阻止从元素发起拖拽操作：
                                {
    A: "A"
}
DragDrop
isTarget : boolean
默认情况下，任何实例都可以是拖放的目标。 可以设置isTarget为false以禁用。
DragDrop
maintainOffset : boolean
当我们重置约束时保持偏移量。 当你需要在页面变化时，元素保持与其父元素的相对位置关系...
当我们重置约束时保持偏移量。 当你需要在页面变化时，元素保持与其父元素的相对位置关系，设置此项为true。
DragDrop
moveOnly : boolean
当设置为true时，当这个DD对象在同组的其他DD对象上方时，将...
当设置为true时，当这个DD对象在同组的其他DD对象上方时，将不会接收到notification事件。默认为false。
DragDrop
padding : int[] An array containing the 4 padding values: [top, right, bottom, left]
当前拖拽对象的padding配置项， 用来计算与当前对象相交叉的区域。
DragDrop
primaryButtonOnly : boolean
默认情况下，drag和drop实例只会响应鼠标第一个键的点击操作 (右手习惯下的左键)...
默认情况下，drag和drop实例只会响应鼠标第一个键的点击操作 (右手习惯下的左键)。 设置为true，将响应浏览器传来的任何一个键的点击
DragDrop
xTicks : int[]
在指定一个水平的刻度/间距时， 元素自动吸附位置的像素数组...
在指定一个水平的刻度/间距时， 元素自动吸附位置的像素数组。 当你定义一个间距记号时，这个数组是自动生成的。 （译者注：此配置可以用来实现在水平方向上拖动时的一种磁性吸附效果，这个数组就是 自动吸附的像素刻度或者间距）。
DragDrop
yTicks : int[]
在指定一个垂直的刻度/间距时， 元素自动吸附位置的像素数组...
在指定一个垂直的刻度/间距时， 元素自动吸附位置的像素数组。 当你定义一个间距记号时，这个数组是自动生成的。 （译者注：此配置可以用来实现在垂直方向上拖动时的一种磁性吸附效果，这个数组就是 自动吸附的像素刻度或者间距）。
DragDrop

公共方法

Method Defined By
DDTarget ( String id , String sGroup , object config )
参数:
  • id : String
    drop目标元素的id
  • sGroup : String
    相关DragDrop对象的编组
  • config : object
    DDProxy的一个包含配置属性的对象，除了包含在DragDrop中的那些属性，就没有其他的了。
返回值:
  • void
DDTarget
addToGroup ( sGroup {string} ) : void
将当前实例添加到一个彼此相关的drag/drop对象组中。 每个实例至少属于一个组...
将当前实例添加到一个彼此相关的drag/drop对象组中。 每个实例至少属于一个组， 并且如果需要，可以同时属于任意多个组。
参数:
  • {string} : sGroup
    组名
返回值:
  • void
DragDrop
applyConfig () : void
应用那些传递给构造器的配置参数。此操作被期望在继承链的每一层上都能起作用...
应用那些传递给构造器的配置参数。此操作被期望在继承链的每一层上都能起作用。 这样一个DDProxy的实现类将会执行在DDProxy, DD和DragDrop上应用配置项的操作，此操作是为了使这些参数在每个对象上都可用。
参数:
  • 无。
返回值:
  • void
DragDrop
constrainTo ( Mixed constrainTo , [ Object/Number pad ], [ Boolean inContent ] ) : void
让元素的运动范围受限于另一个元素...
让元素的运动范围受限于另一个元素， 使用方法:

                                    var dd = new Ext.dd.DDProxy("dragDiv1", "proxytest",
                { dragElId: "existingProxyDiv" });
 dd.startDrag = function(){
     this.constrainTo("parent-id");
 };
或者你可以使用 Ext.Element 对象来初始化:
                                Ext.get("dragDiv1").initDDProxy("proxytest", {dragElId: "existingProxyDiv"}, {
     startDrag : function(){
         this.constrainTo("parent-id");
     }
 });
参数:
  • constrainTo : Mixed
    要绑定到的元素。
  • pad : Object/Number
    (可选) Pad提供了定义约束的"padding"参数的一个途径， 既可以是一个数字，以便进行均匀的填充 (4 等价于{left:4, right:4, top:4, bottom:4})， 或者一个包含填充尺寸数据的对象。例如： {right:10, bottom:10}
  • inContent : Boolean
    (可选) 将可拖动区域约束到元素的盒子模型内部(在填充和边框内部)
返回值:
  • void
DragDrop
getEl () : HTMLElement
返回相关联的元素的引用
返回相关联的元素的引用
参数:
  • 无。
返回值:
  • HTMLElement
    html元素
DragDrop
init ( id the , String sGroup , object config ) : void
设置DragDrop对象。 必须在任何Ext.dd.DragDrop的子类构造器中调用
设置DragDrop对象。 必须在任何Ext.dd.DragDrop的子类构造器中调用
参数:
  • the : id
    相关联的元素id
  • sGroup : String
    相关元素的编组
  • config : object
    配置属性
返回值:
  • void
DragDrop
initTarget ( id the , String sGroup , object config ) : void
Initializes Targeting functionality only... the object does not get a mousedown handler. （译者注：原始文档不完整，无法翻译此句。）
Initializes Targeting functionality only... the object does not get a mousedown handler. （译者注：原始文档不完整，无法翻译此句。）
参数:
  • the : id
    相关联元素的id
  • sGroup : String
    关联项目的编组
  • config : object
    配置属性
返回值:
  • void
DragDrop
isLocked () : boolean
如果此实例被锁定，或者drag drop管理器被锁定， 返回true...
如果此实例被锁定，或者drag drop管理器被锁定， 返回true (意味着此页面的所有拖拽操作都无效。)
参数:
  • 无。
返回值:
  • boolean
    如果此实例或者所有的drag/drop被锁定，返回true；否则返回false
DragDrop
lock () : void
锁定此实例
锁定此实例
参数:
  • 无。
返回值:
  • void
DragDrop
onAvailable () : void
覆盖onAvailable方法，以便在决定了位置间隔之后执行所需的操作。
覆盖onAvailable方法，以便在决定了位置间隔之后执行所需的操作。
参数:
  • 无。
返回值:
  • void
DragDrop
removeFromGroup ( string sGroup ) : void
从所提供的交互组中删除此元素
从所提供的交互组中删除此元素
参数:
  • sGroup : string
    需要从中删除的组
返回值:
  • void
DragDrop
setPadding ( int iTop , int iRight , int iBot , int iLeft ) : void
配置拖拽时目标区域的填充像素数。为计算目标区域有效地扩展（或者缩小）虚拟对象的大小...
配置拖拽时目标区域的填充像素数。为计算目标区域有效地扩展（或者缩小）虚拟对象的大小。支持css-style快捷方式，如果只传递了一个参数，所有的边界将会拥有相同的填充；如果传递了两个参数，top和bottom会使用第一个参数， left和right会使用第二个参数。（译者注：这里的规则与CSS设置padding参数的规则是一样的，完全可以用CSS的规则来配置此参数。）
参数:
  • iTop : int
    Top pad
  • iRight : int
    Right pad
  • iBot : int
    Bot pad
  • iLeft : int
    Left pad
返回值:
  • void
DragDrop
toString () : string
toString方法
toString method
参数:
  • 无。
返回值:
  • string
    dd对象的字符串表述
DragDrop
unlock () : void
Unlock this instace
为此实例解锁
参数:
  • 无。
返回值:
  • void
DragDrop
unreg () : void
删除当前元素上所有拖拽和落下钩子(hook)
删除当前元素上所有拖拽和落下钩子(hook)
参数:
  • 无。
返回值:
  • void
DragDrop

公共事件

该类没有公共事件。


Class Ext.dd.DragDrop

包: | Ext.dd
定义类的文件: | DDCore.js
类: | DragDrop
子类: | DD, DDTarget
继承自: | Object
为可以拖动或者可以被放置到另一个目标上的元素定义了一个接口和一些基本的操作。 此类是被设计用来继承的， 可以重写startDrag、onDrag、onDragOver、onDragOut事件的处理函数。 最多可以有3个HTML元素可以与DragDrop实例相关联：
  • linked element: 传递给构造器的元素。此元素定义了与其他DragDrop对象交互的边界。
  • handle element(s): 只有被点击的元素匹配到一个处理元素时，才发生拖动操作。默认情况下，就是相关的这个元素自身，但是，有时候你会希望对相关元素的一部分进行拖动操作， setHandleElId()方法提供了处理这种情况的一个途径。
  • drag element: 这是当进行拖动操作时跟随鼠标移动的那个元素。默认情况下，这是相关元素自身，就像在 Ext.dd.DD 中那样。 setDragElId() 让你可以定义一个独立的移动元素，就像 Ext.dd.DDProxy一样。
在onload事件确保所有相关的元素都处于可用状态之前，不应该实例化此类。以下将定义一个DragDrop对象，它可以与"group1"组中的任何一个DragDrop对象进行交互:
dd = new Ext.dd.DragDrop("div1", "group1");
因为没有实现任何事件处理函数，事实上当你运行以上代码时什么事都不会发生。一般情况下，你会覆盖此类或者默认实现类之一，但是你也可以覆盖此类的实例中你需要覆盖的那些方法...
dd.onDragDrop = function(e, id) {
  alert("dd was dropped on " + id);
}

公共属性

Property Defined By
available : boolean
当相关联的dom元素可以访问之前availabe属性值都是false。
DragDrop
config : object
传递给构造器的配置参数
DragDrop
defaultPadding : Object
为"constrainTo"元素提供默认的填充约束 (默认值为 {left: 0, right:0, top:0, bottom:0})。
DragDrop
groups : object An object in the format {'group1':true, 'group2':true
组定义了一个相关的DragDrop对象的逻辑集合。 只有在与同一组中的其它DragDrop对象发生交互时...
组定义了一个相关的DragDrop对象的逻辑集合。 只有在与同一组中的其它DragDrop对象发生交互时，实例才会收到事件。这允许我们在需要时，使用DragDrop的单个实例来定义多个组。
DragDrop
hasOuterHandles : boolean
默认情况下，只有在相关联元素的区域中发生mousedown事件时，才发起拖拽操作。 在某些浏览器中...
默认情况下，只有在相关联元素的区域中发生mousedown事件时，才发起拖拽操作。 在某些浏览器中，如果上一次mouseup事件在window外部发生的时候， 浏览器将不能报告此次的mousedown事件， 此时将会产生一个bug。 如果定义了外部的句柄，此属性值将被设置为true。
DragDrop
id : String
与当前对象相关联的元素的id。 这就是我们所谓的关联元素("linked element")，因为此元素的大小和位置...
与当前对象相关联的元素的id。 这就是我们所谓的关联元素("linked element")，因为此元素的大小和位置 将被用来决定何时与拖动和放开的对象进行交互。
DragDrop
ignoreSelf : Boolean
设置为false，拖拽时，将会使DragDrop对象在悬在自身元素上方时触发drag事件。默认为...
设置为false，拖拽时，将会使DragDrop对象在悬在自身元素上方时触发drag事件。默认为true——DragDrop对象默认不会对自身触发drag事件。
DragDrop
invalidHandleClasses : Array
CSS类名数组，应用到那些被认为是非法拖拽句柄的对象上。
DragDrop
invalidHandleIds : Object
一个对象，它的属性名标志了被认为是非法的拖动手柄元素的ID。 一个非空属性值标志着这些ID是有效的...
一个对象，它的属性名标志了被认为是非法的拖动手柄元素的ID。 一个非空属性值标志着这些ID是有效的。 例如，为了阻止从ID为"foo"的元素上发起拖动操作，使用 :
                                {
    foo: true
}
DragDrop
invalidHandleTypes : Object
一个对象，它的属性名标记了那些不能作为拖拽句柄的HTML标签。 一个非空属性值标志着此标签是无效的...
一个对象，它的属性名标记了那些不能作为拖拽句柄的HTML标签。 一个非空属性值标志着此标签是无效的。 默认为以下值，它将阻止从元素发起拖拽操作：
                                {
    A: "A"
}
DragDrop
isTarget : boolean
默认情况下，任何实例都可以是拖放的目标。 可以设置isTarget为false以禁用。
DragDrop
maintainOffset : boolean
当我们重置约束时保持偏移量。 当你需要在页面变化时，元素保持与其父元素的相对位置关系...
当我们重置约束时保持偏移量。 当你需要在页面变化时，元素保持与其父元素的相对位置关系，设置此项为true。
DragDrop
moveOnly : boolean
当设置为true时，当这个DD对象在同组的其他DD对象上方时，将...
当设置为true时，当这个DD对象在同组的其他DD对象上方时，将不会接收到notification事件。默认为false。
DragDrop
padding : int[] An array containing the 4 padding values: [top, right, bottom, left]
当前拖拽对象的padding配置项， 用来计算与当前对象相交叉的区域。
DragDrop
primaryButtonOnly : boolean
默认情况下，drag和drop实例只会响应鼠标第一个键的点击操作 (右手习惯下的左键)...
默认情况下，drag和drop实例只会响应鼠标第一个键的点击操作 (右手习惯下的左键)。 设置为true，将响应浏览器传来的任何一个键的点击
DragDrop
xTicks : int[]
在指定一个水平的刻度/间距时， 元素自动吸附位置的像素数组...
在指定一个水平的刻度/间距时， 元素自动吸附位置的像素数组。 当你定义一个间距记号时，这个数组是自动生成的。 （译者注：此配置可以用来实现在水平方向上拖动时的一种磁性吸附效果，这个数组就是 自动吸附的像素刻度或者间距）。
DragDrop
yTicks : int[]
在指定一个垂直的刻度/间距时， 元素自动吸附位置的像素数组...
在指定一个垂直的刻度/间距时， 元素自动吸附位置的像素数组。 当你定义一个间距记号时，这个数组是自动生成的。 （译者注：此配置可以用来实现在垂直方向上拖动时的一种磁性吸附效果，这个数组就是 自动吸附的像素刻度或者间距）。
DragDrop

公共方法

Method Defined By
DragDrop ( String id , String sGroup , object config )
参数:
  • id : String
    与此实例相关的元素的id
  • sGroup : String
    相关DragDrop对象的编组
  • config : object
    一个包含配置属性的对象， DragDrop合法的参数: padding, isTarget, maintainOffset, primaryButtonOnly
返回值:
  • void
DragDrop
addInvalidHandleClass ( string cssClass ) : void
允许你为那些不能发起拖拽操作的元素指定一个CSS类
允许你为那些不能发起拖拽操作的元素指定一个CSS类
参数:
  • cssClass : string
    你希望忽略的元素的样式class
返回值:
  • void
DragDrop
addInvalidHandleId ( string id ) : void
允许你指定一个拖拽句柄的孩子节点，使它不能发起拖拽操作
允许你指定一个拖拽句柄的孩子节点，使它不能发起拖拽操作
参数:
  • id : string
    你希望忽略的元素的id
返回值:
  • void
DragDrop
addInvalidHandleType ( string tagName ) : void
允许你指定一个在被点击时不能发起拖拽操作的标签名称。 这是被设计用来更方便地处理内嵌的link对象的...
允许你指定一个在被点击时不能发起拖拽操作的标签名称。 这是被设计用来更方便地处理内嵌的link对象的， 此对象被嵌在一个拖动句柄内部，当它被点击时需要做其他的事情，而不是开始拖拽操作。
参数:
  • tagName : string
    需要包含在内的元素类型
返回值:
  • void
DragDrop
addToGroup ( sGroup {string} ) : void
将当前实例添加到一个彼此相关的drag/drop对象组中。 每个实例至少属于一个组...
将当前实例添加到一个彼此相关的drag/drop对象组中。 每个实例至少属于一个组， 并且如果需要，可以同时属于任意多个组。
参数:
  • {string} : sGroup
    组名
返回值:
  • void
DragDrop
applyConfig () : void
应用那些传递给构造器的配置参数。此操作被期望在继承链的每一层上都能起作用...
应用那些传递给构造器的配置参数。此操作被期望在继承链的每一层上都能起作用。 这样一个DDProxy的实现类将会执行在DDProxy, DD和DragDrop上应用配置项的操作，此操作是为了使这些参数在每个对象上都可用。
参数:
  • 无。
返回值:
  • void
DragDrop
clearConstraints () : void
清除所有应用到此实例上的约束。 同时清除标记...
清除所有应用到此实例上的约束。 同时清除标记，因为此时它们不能脱离约束而独立存在。
参数:
  • 无。
返回值:
  • void
DragDrop
clearTicks () : void
清除此实例上定义的所有“吸附”间隔
清除此实例上定义的所有“吸附”间隔
参数:
  • 无。
返回值:
  • void
DragDrop
constrainTo ( Mixed constrainTo , [ Object/Number pad ], [ Boolean inContent ] ) : void
让元素的运动范围受限于另一个元素...
让元素的运动范围受限于另一个元素， 使用方法:

                                    var dd = new Ext.dd.DDProxy("dragDiv1", "proxytest",
                { dragElId: "existingProxyDiv" });
 dd.startDrag = function(){
     this.constrainTo("parent-id");
 };
或者你可以使用 Ext.Element 对象来初始化:
                                Ext.get("dragDiv1").initDDProxy("proxytest", {dragElId: "existingProxyDiv"}, {
     startDrag : function(){
         this.constrainTo("parent-id");
     }
 });
参数:
  • constrainTo : Mixed
    要绑定到的元素。
  • pad : Object/Number
    (可选) Pad提供了定义约束的"padding"参数的一个途径， 既可以是一个数字，以便进行均匀的填充 (4 等价于{left:4, right:4, top:4, bottom:4})， 或者一个包含填充尺寸数据的对象。例如： {right:10, bottom:10}
  • inContent : Boolean
    (可选) 将可拖动区域约束到元素的盒子模型内部(在填充和边框内部)
返回值:
  • void
DragDrop
endDrag ( Event e ) : void
当结束对对象的拖动操作时触发
当结束对对象的拖动操作时触发
参数:
  • e : Event
    the mouseup event
返回值:
  • void
DragDrop
getDragEl () : HTMLElement
返回实际需要拖动元素的引用。默认情况下，这与html元素相同，但也可以指定到另一个元素...
返回实际需要拖动元素的引用。默认情况下，这与html元素相同，但也可以指定到另一个元素。可以在Ext.dd.DDProxy中找到这种例子。
参数:
  • 无。
返回值:
  • HTMLElement
    the html element
DragDrop
getEl () : HTMLElement
返回相关联的元素的引用
返回相关联的元素的引用
参数:
  • 无。
返回值:
  • HTMLElement
    html元素
DragDrop
init ( id the , String sGroup , object config ) : void
设置DragDrop对象。 必须在任何Ext.dd.DragDrop的子类构造器中调用
设置DragDrop对象。 必须在任何Ext.dd.DragDrop的子类构造器中调用
参数:
  • the : id
    相关联的元素id
  • sGroup : String
    相关元素的编组
  • config : object
    配置属性
返回值:
  • void
DragDrop
initTarget ( id the , String sGroup , object config ) : void
Initializes Targeting functionality only... the object does not get a mousedown handler. （译者注：原始文档不完整，无法翻译此句。）
Initializes Targeting functionality only... the object does not get a mousedown handler. （译者注：原始文档不完整，无法翻译此句。）
参数:
  • the : id
    相关联元素的id
  • sGroup : String
    关联项目的编组
  • config : object
    配置属性
返回值:
  • void
DragDrop
isLocked () : boolean
如果此实例被锁定，或者drag drop管理器被锁定， 返回true...
如果此实例被锁定，或者drag drop管理器被锁定， 返回true (意味着此页面的所有拖拽操作都无效。)
参数:
  • 无。
返回值:
  • boolean
    如果此实例或者所有的drag/drop被锁定，返回true；否则返回false
DragDrop
isValidHandleChild ( HTMLElement node ) : boolean
检查被排除在外的标签列表，以确定此次点击是否应该被忽略
检查被排除在外的标签列表，以确定此次点击是否应该被忽略
参数:
  • node : HTMLElement
    需要检查的HTMLElement
返回值:
  • boolean
    如果这是一个合法的标签类型，返回true；如果不是，返回false
DragDrop
lock () : void
锁定此实例
锁定此实例
参数:
  • 无。
返回值:
  • void
DragDrop
onAvailable () : void
覆盖onAvailable方法，以便在决定了位置间隔之后执行所需的操作。
覆盖onAvailable方法，以便在决定了位置间隔之后执行所需的操作。
参数:
  • 无。
返回值:
  • void
DragDrop
onDrag ( Event e ) : void
抽象方法，当拖动一个对象产生onMouseMove事件时调用。
抽象方法，当拖动一个对象产生onMouseMove事件时调用。
参数:
  • e : Event
    mousemove事件
返回值:
  • void
DragDrop
onDragDrop ( Event e , String|DragDrop[] id ) : void
抽象方法，在当前元素被拖放到另一个DragDrop对象上时调用。
抽象方法，在当前元素被拖放到另一个DragDrop对象上时调用。
参数:
  • e : Event
    mouseup事件
  • id : String|DragDrop[]
    在POINT模式下，这是被拖放到其上的那个元素的id（译者注：指目标元素id）。 在INTERSECT模式下，这是一个dd元素数组，当前元素被拖放到其上。
返回值:
  • void
DragDrop
onDragEnter ( Event e , String|DragDrop[] id ) : void
抽象方法，当此元素第一次从另外一个DragDrop对象上滑过时，此方法被调用。
抽象方法，当此元素第一次从另外一个DragDrop对象上滑过时，此方法被调用。
参数:
  • e : Event
    the mousemove event
  • id : String|DragDrop[]
    在POINT模式下，此id是被滑过的元素的id。 在INTERSECT模式下，这是一个或多个被滑过元素的数组。
返回值:
  • void
DragDrop
onDragOut ( Event e , String|DragDrop[] id ) : void
抽象方法，当我们不再拖动一个元素在另一个元素上滑过时触发
抽象方法，当我们不再拖动一个元素在另一个元素上滑过时触发
参数:
  • e : Event
    mousemove事件
  • id : String|DragDrop[]
    在POINT模式下，此id是被滑过的元素的id。 在INTERSECT模式下，这是dd元素的数组，鼠标不再停留在这些元素之上。
返回值:
  • void
DragDrop
onDragOver ( Event e , String|DragDrop[] id ) : void
抽象方法，当此元素从另一个DragDrop对象上滑过时调用。
抽象方法，当此元素从另一个DragDrop对象上滑过时调用。
参数:
  • e : Event
    mousemove事件
  • id : String|DragDrop[]
    在POINT模式下，此id是被滑过的元素的id。 在INTERSECT模式下，这是被滑过的dd元素数组。
返回值:
  • void
DragDrop
onInvalidDrop ( Event e ) : void
抽象方法，如果当前元素被拖动到了一个没有落下目标的区域时，此方法被调用
抽象方法，如果当前元素被拖动到了一个没有落下目标的区域时，此方法被调用
参数:
  • e : Event
    mouseup事件
返回值:
  • void
DragDrop
onMouseDown ( Event e ) : void
当一个drag/drop对象获得mousedown事件时的处理函数
当一个drag/drop对象获得mousedown事件时的处理函数
参数:
  • e : Event
    mousedown事件
返回值:
  • void
DragDrop
onMouseUp ( Event e ) : void
当在拖拽的对象松开鼠标时触发的事件处理器
当在拖拽的对象松开鼠标时触发的事件处理器
参数:
  • e : Event
    mouseup事件
返回值:
  • void
DragDrop
removeFromGroup ( string sGroup ) : void
从所提供的交互组中删除此元素
从所提供的交互组中删除此元素
参数:
  • sGroup : string
    需要从中删除的组
返回值:
  • void
DragDrop
removeInvalidHandleClass ( string cssClass ) : void
卸载一个描述非法状态的CSS类
Unsets an invalid css class
参数:
  • cssClass : string
    你想要重新启用的元素的css类。
返回值:
  • void
DragDrop
removeInvalidHandleId ( string id ) : void
卸载一个无效的handle id
Unsets an invalid handle id
参数:
  • id : string
    需要重新启用的元素的id the id of the element to re-enable
返回值:
  • void
DragDrop
removeInvalidHandleType ( string tagName ) : void
卸载由addInvalidHandleType方法添加的排除标签集合
卸载由addInvalidHandleType方法添加的排除标签集合
参数:
  • tagName : string
    需要排除的元素类型
返回值:
  • void
DragDrop
resetConstraints ( boolean maintainOffset ) : void
当你手动重新设置一个dd元素的位置时，必须调用resetConstraints方法。
当你手动重新设置一个dd元素的位置时，必须调用resetConstraints方法。
参数:
  • maintainOffset : boolean
返回值:
  • void
DragDrop
setDragElId ( id {string} ) : void
允许你指定一个元素，不是相关联的元素本身，在拖动时跟随鼠标移动
允许你指定一个元素，不是相关联的元素本身，在拖动时跟随鼠标移动 （译者注：也就是一个”影子对象“，拖动的时候，原来的元素不动，让和它本身一样的 一个”克隆体“来负责跟随鼠标移动）
参数:
  • {string} : id
    发起拖动操作的元素id
返回值:
  • void
DragDrop
setHandleElId ( id {string} ) : void
允许你指定关联元素的一个孩子节点，以用来发起拖动操作。 这种情况的一个例子是，你有包含text和link内容的div...
允许你指定关联元素的一个孩子节点，以用来发起拖动操作。 这种情况的一个例子是，你有包含text和link内容的div。 点击内容区域的任何地方，都会正常地启动拖动操作。使用此方法可以指定从div内容中的任何一个元素发起拖拽操作。
参数:
  • {string} : id
    将被用来发起拖拽操作的元素id。
返回值:
  • void
DragDrop
setInitPosition ( int diffX , int diffY ) : void
存储相关元素初始化的位置。
存储相关元素初始化的位置。
参数:
  • diffX : int
    X方向偏移，默认为0
  • diffY : int
    Y方向偏移，默认为0
返回值:
  • void
DragDrop
setOuterHandleElId ( id the ) : void
允许你设置一个相关元素外部的元素，作为拖动的手柄
允许你设置一个相关元素外部的元素，作为拖动的手柄
参数:
  • the : id
    元素的id，此元素将被用作发起拖动操作
返回值:
  • void
DragDrop
setPadding ( int iTop , int iRight , int iBot , int iLeft ) : void
配置拖拽时目标区域的填充像素数。为计算目标区域有效地扩展（或者缩小）虚拟对象的大小...
配置拖拽时目标区域的填充像素数。为计算目标区域有效地扩展（或者缩小）虚拟对象的大小。支持css-style快捷方式，如果只传递了一个参数，所有的边界将会拥有相同的填充；如果传递了两个参数，top和bottom会使用第一个参数， left和right会使用第二个参数。（译者注：这里的规则与CSS设置padding参数的规则是一样的，完全可以用CSS的规则来配置此参数。）
参数:
  • iTop : int
    Top pad
  • iRight : int
    Right pad
  • iBot : int
    Bot pad
  • iLeft : int
    Left pad
返回值:
  • void
DragDrop
setXConstraint ( int iLeft , int iRight , int iTickSize ) : void
默认情况下，元素可以被拖拽并放置到屏幕上的任意位置。 使用此方法来限制元素在水平方向上的运动...
默认情况下，元素可以被拖拽并放置到屏幕上的任意位置。 使用此方法来限制元素在水平方向上的运动。 如果你想锁定在y轴上的拖动，传递参数0,0
参数:
  • iLeft : int
    元素可以向左移动的像素数
  • iRight : int
    元素可以向右移动的像素数
  • iTickSize : int
    可选参数，指定元素每次以iTickSize配置项指定的像素数运动。
返回值:
  • void
DragDrop
setYConstraint ( int iUp , int iDown , int iTickSize ) : void
默认情况下，元素可以被拖放到屏幕上的任意位置。 设置此项以限制元素在垂直方向上的运动...
默认情况下，元素可以被拖放到屏幕上的任意位置。 设置此项以限制元素在垂直方向上的运动。 如果我们需要锁定元素在x轴方向上的运动，传递参数0,0
参数:
  • iUp : int
    元素可以向上移动的像素数
  • iDown : int
    元素可以向下移动的像素数
  • iTickSize : int
    可选参数，指定元素每次以iTickSize配置项指定的像素数运动。
返回值:
  • void
DragDrop
startDrag ( int X , int Y ) : void
抽象方法，当点击一个drag/drop对象，并且遇到拖动或者mousedown事件的那一刻， 此方法被调用。
抽象方法，当点击一个drag/drop对象，并且遇到拖动或者mousedown事件的那一刻， 此方法被调用。
参数:
  • X : int
    点击的位置
  • Y : int
    点击的位置
返回值:
  • void
DragDrop
toString () : string
toString方法
toString method
参数:
  • 无。
返回值:
  • string
    dd对象的字符串表述
DragDrop
unlock () : void
Unlock this instace
为此实例解锁
参数:
  • 无。
返回值:
  • void
DragDrop
unreg () : void
删除当前元素上所有拖拽和落下钩子(hook)
删除当前元素上所有拖拽和落下钩子(hook)
参数:
  • 无。
返回值:
  • void
DragDrop

公共事件

该类没有公共事件。


Class Ext.dd.DragDropMgr

包: | Ext.dd
定义类的文件: | DDCore.js
类: | DragDropMgr
继承自: | Object
DragDropMgr是一个单例，它为浏览器窗口中所有的DragDrop元素跟踪 交互信息。 一般情况下，你不需要使用该类， 但是它确实有一些帮助方法，可以用在你自己的DragDrop实现类中。

This class is a singleton and cannot be created directly.

公共属性

Property |  | Defined By
 | INTERSECT : int 在交叉模式下，拖动和放下交互由两个或多个可以拖拽对象重叠的区域定义。 | DragDropMgr
 | POINT : int 在point模式下， 拖拽和放下的交互由拖拽过程中鼠标的位置定义。 | DragDropMgr
 | clickPixelThresh : int 在鼠标按下之后，发起拖动操作之前，鼠标需要移动的像素数。默认=3; （译者注：这个配置项需要说明一下，例如，当鼠标在一个窗体的左上角点击，如果没有这个小的 偏移值，一旦鼠标移动，很可能就移出了窗体的区域，那么窗体就不会再跟随鼠标移动了，所以这个 小的偏移量对拖动操作很重要。） | DragDropMgr
 | clickTimeThresh : int 在mousedown事件发生后，如果没有收到mouseup事件，发起拖拽动作的延迟毫秒数。默认=... 在mousedown事件发生后，如果没有收到mouseup事件，发起拖拽动作的延迟毫秒数。默认=350 | DragDropMgr
 | mode : int 当前的拖拽和放下模式。默认：POINT | DragDropMgr
 | preventDefault : boolean 一个标志位，用来指示是否屏蔽我们自定义事件的默认行为。 默认情况下，此项为true... 一个标志位，用来指示是否屏蔽我们自定义事件的默认行为。 默认情况下，此项为true， 如果你需要默认的行为，可以将此项设置为false (不推荐) | DragDropMgr
 | stopPropagation : boolean 一个标识位，决定我们是否需要停止对我们产生事件进行冒泡。 默认为true... 一个标识位，决定我们是否需要停止对我们产生事件进行冒泡。 默认为true，如果html元素包含其它需要鼠标点击的属性，你可能 想把它设置为false。 | DragDropMgr
 | useCache : boolean 如果你想要在拖拽的过程中，强制持续地... 如果你想要在拖拽的过程中，强制持续地 查找每个拖拽对象相关联的元素，设置useCache为false。 | DragDropMgr

公共方法

Method Defined By
getBestMatch ( DragDrop[] dds ) : DragDrop
<静态> 工具函数，在INTERSECT模式下，从drag和drop事件返回的拖拽对象列表中获取最佳匹配...
<静态> 工具函数，在INTERSECT模式下，从drag和drop事件返回的拖拽对象列表中获取最佳匹配。 要么返回鼠标滑过的第一个对象，要么返回与被拖拽对象之间交叉区域最大的那个对象。
参数:
  • dds : DragDrop[]
    拖放目标对象的数组
返回值:
  • DragDrop
    最优单一匹配
DragDropMgr
getCss ( String id ) : Object
<静态> 返回DOM元素的CSS样式(例如： document.getElById(id).style)
<静态> 返回DOM元素的CSS样式(例如： document.getElById(id).style)
参数:
  • id : String
    获取元素的id
返回值:
  • Object
    元素的style属性
DragDropMgr
getDDById ( String id ) : DragDrop
<静态> 根据所给的id返回DragDrop实例
<静态> 根据所给的id返回DragDrop实例
参数:
  • id : String
    DragDrop对象的id
返回值:
  • DragDrop
    拖拽对象，null则表示找不到
DragDropMgr
getElement ( String id ) : Object
<静态> getElement
<静态> getElement
参数:
  • id : String
    要取得的元素的id
返回值:
  • Object
    该元素
DragDropMgr
getLocation ( DragDrop oDD ) : Ext.lib.Region
<静态> 返回一个Region对象，其中包含了拖拽对象的位置和大小...
<静态> 返回一个Region对象，其中包含了拖拽对象的位置和大小， 包括配置给它的填充尺寸。
参数:
  • oDD : DragDrop
    需要获得位置的拖放对象
返回值:
  • Ext.lib.Region
    表示元素占据所有区域的Region对象，包括任何实例配置的padding。
DragDropMgr
getRelated ( DragDrop p_oDD , boolean bTargetsOnly ) : DragDrop[]
<静态> 返回传递进来的实例所在的所有组中，所有的拖拽和放下实例。
<静态> 返回传递进来的实例所在的所有组中，所有的拖拽和放下实例。
参数:
  • p_oDD : DragDrop
    获取相关数据的对象
  • bTargetsOnly : boolean
    如果为true，只返回可作为目标的对象
返回值:
  • DragDrop[]
    相关实例
DragDropMgr
isDragDrop ( String id ) : boolean
<静态> 工具方法，用来判定一个给定的元素是否被注册成了一个可以拖拽的项目。
<静态> 工具方法，用来判定一个给定的元素是否被注册成了一个可以拖拽的项目。
参数:
  • id : String
    检测的元素的id
返回值:
  • boolean
    如可拖拽则为true，反之为false
DragDropMgr
isHandle ( String id ) : boolean
<静态> 工具方法，用来检测对于给定的Drag Drop对象来说， 所给的元素...
<静态> 工具方法，用来检测对于给定的Drag Drop对象来说， 所给的元素是否已经已经注册成为一个拖拽手柄。
参数:
  • id : String
    检测元素id
返回值:
  • boolean
    true则该元素是DragDrop手柄，反之false
DragDropMgr
isLegalTarget ( DragDrop oDD , DragDrop oTargetDD ) : boolean
<静态> 如果指定的dd目标对指定的拖拽对象来说是一个合法的放下目标， 返回true。
<静态> 如果指定的dd目标对指定的拖拽对象来说是一个合法的放下目标， 返回true。
参数:
  • oDD : DragDrop
    drag对象
  • oTargetDD : DragDrop
    目标
返回值:
  • boolean
    如果是dd对象的合法目标，则为true
DragDropMgr
isLocked () : boolean
<静态> 拖动和放下操作是否被锁定？
<静态> 拖动和放下操作是否被锁定？
参数:
  • 无。
返回值:
  • boolean
    拖动和放下操作锁定则为true，反之false
DragDropMgr
isTypeOfDD ( Object the ) : boolean
<静态> 此方法的目标是能够明显地检测一个对象是否是DragDrop类型， 或者是DragDrop.typeof返回对象的直接...
<静态> 此方法的目标是能够明显地检测一个对象是否是DragDrop类型， 或者是DragDrop.typeof返回对象的直接子类， oDD.constructor.toString()总是返回"DragDrop" 而不是子类的名称。 所以目前它只能明确地检测出一个变量是DragDrop类型。
参数:
  • the : Object
    用于衡量的对象
返回值:
  • boolean
    如果typeof oDD = DragDrop则为true
DragDropMgr
lock () : void
<静态> 锁定所有的拖动和放下功能
<静态> 锁定所有的拖动和放下功能
参数:
  • 无。
返回值:
  • void
DragDropMgr
refreshCache ( Object groups ) : void
<静态> 刷新特定编组(s)中缓存的拖拽和放下对象的top-left和bottom-right 点...
<静态> 刷新特定编组(s)中缓存的拖拽和放下对象的top-left和bottom-right 点。 这些参数以一定的格式被存储在拖动和放下实例中， 所以典型的用法是： Ext.dd.DragDropMgr.refreshCache(ddinstance.groups); 第二个选择是: Ext.dd.DragDropMgr.refreshCache({group1:true, group2:true});
参数:
  • groups : Object
    相关的将要刷新的组
返回值:
  • void
DragDropMgr
regDragDrop ( DragDrop oDD , String sGroup ) : void
<静态> 每个DragDrop实例都必须向DragDropMgr注册。 此操作将在DragDrop.init()中执行。
<静态> 每个DragDrop实例都必须向DragDropMgr注册。 此操作将在DragDrop.init()中执行。
参数:
  • oDD : DragDrop
    用于注册的DragDrop对象
  • sGroup : String
    这个元素属于的组名
返回值:
  • void
DragDropMgr
regHandle ( String sDDId , String sHandleId ) : void
<静态> 每个DragDrop元素把手都必须注册。 当执行DragDrop.setHandleElId()的时候此方法被自动调用
<静态> 每个DragDrop元素把手都必须注册。 当执行DragDrop.setHandleElId()的时候此方法被自动调用
参数:
  • sDDId : String
    把手对应的DragDrop的id
  • sHandleId : String
    drag把手元素的id
返回值:
  • void
DragDropMgr
startDrag ( x {int} , y {int} ) : void
<静态> 要么在拖动极小的像素时触发，要么在遇到mousedown 的那一瞬间触发。
<静态> 要么在拖动极小的像素时触发，要么在遇到mousedown 的那一瞬间触发。
参数:
  • {int} : x
    原始鼠标按下的X位置
  • {int} : y
    原始鼠标按下的Y位置
返回值:
  • void
DragDropMgr
stopEvent ( Event e ) : void
<静态> 工具方法，用来阻止事件的冒泡和默认处理， 如果启用了这些特性...
<静态> 工具方法，用来阻止事件的冒泡和默认处理， 如果启用了这些特性的话（译者注：指启用事件冒泡和默认处理）。
参数:
  • e : Event
    this.getEvent()返回的事件
返回值:
  • void
DragDropMgr
unlock () : void
<静态> 解锁所有的拖拽和放下功能。
<静态> 解锁所有的拖拽和放下功能。
参数:
  • 无。
返回值:
  • void
DragDropMgr
verifyEl ( HTMLElement el ) : boolean
<静态> 这是用来检测以确定一个元素存在并处在DOM树中。此方法的主要目的，是处理使用innerHTML属性...
<静态> 这是用来检测以确定一个元素存在并处在DOM树中。此方法的主要目的，是处理使用innerHTML属性把拖拽对象从DOM中删除的情况。 当尝试访问这类元素的offsetParent属性时，IE会产生一个'unspecified error'
参数:
  • el : HTMLElement
    用于检测的元素
返回值:
  • boolean
    如果元素看起来可用则为true
DragDropMgr

公共事件

该类没有公共事件。


DragDrop
    DD
      DDProxy
        DragSource

Class Ext.dd.DragSource

包: | Ext.dd
定义类的文件: | DragSource.js
类: | DragSource
子类: | DragZone
继承自: | DDProxy
一个简单的类，它提供了基本的实现需要作出 任何元素可拖动.

配置项

Config Options |  | Defined By
 | ddGroup : String 当前对象所属的指定的drag drop组。 如果指定了一个组，那么此对象只与同一组中的其它可拖拽对象发生交互... 当前对象所属的指定的drag drop组。 如果指定了一个组，那么此对象只与同一组中的其它可拖拽对象发生交互 默认值为 undefined). | DragSource
 | dropAllowed : String 当允许执行放下操作时返回给拖拽源的CSS样式 (默认值为 "x-dd-drop-ok"). | DragSource
 | dropNotAllowed : String 当不允许放开时返回给拖拽源的CSS样式 (默认值为 "x-dd-drop-nodrop"). | DragSource

公共属性

Property Defined By
Ext.dd.DDProxy.dragElId : String
默认被拖动的框架div的id
DDProxy
available : boolean
当相关联的dom元素可以访问之前availabe属性值都是false。
DragDrop
centerFrame : boolean
默认情况下，框架会被精确地放置到拖拽元素的位置 ，所以我们必须使用Ext.dd.DD类提供的鼠标偏移量....
默认情况下，框架会被精确地放置到拖拽元素的位置 ，所以我们必须使用Ext.dd.DD类提供的鼠标偏移量。另外一点是让拖拽框架以鼠标为中心点，只有你没有为此对象设置约束时才有效。设置centerFrame为true可以使用这种效果（以鼠标为中心）。
DDProxy
config : object
传递给构造器的配置参数
DragDrop
defaultPadding : Object
为"constrainTo"元素提供默认的填充约束 (默认值为 {left: 0, right:0, top:0, bottom:0})。
DragDrop
groups : object An object in the format {'group1':true, 'group2':true
组定义了一个相关的DragDrop对象的逻辑集合。 只有在与同一组中的其它DragDrop对象发生交互时...
组定义了一个相关的DragDrop对象的逻辑集合。 只有在与同一组中的其它DragDrop对象发生交互时，实例才会收到事件。这允许我们在需要时，使用DragDrop的单个实例来定义多个组。
DragDrop
hasOuterHandles : boolean
默认情况下，只有在相关联元素的区域中发生mousedown事件时，才发起拖拽操作。 在某些浏览器中...
默认情况下，只有在相关联元素的区域中发生mousedown事件时，才发起拖拽操作。 在某些浏览器中，如果上一次mouseup事件在window外部发生的时候， 浏览器将不能报告此次的mousedown事件， 此时将会产生一个bug。 如果定义了外部的句柄，此属性值将被设置为true。
DragDrop
id : String
与当前对象相关联的元素的id。 这就是我们所谓的关联元素("linked element")，因为此元素的大小和位置...
与当前对象相关联的元素的id。 这就是我们所谓的关联元素("linked element")，因为此元素的大小和位置 将被用来决定何时与拖动和放开的对象进行交互。
DragDrop
ignoreSelf : Boolean
设置为false，拖拽时，将会使DragDrop对象在悬在自身元素上方时触发drag事件。默认为...
设置为false，拖拽时，将会使DragDrop对象在悬在自身元素上方时触发drag事件。默认为true——DragDrop对象默认不会对自身触发drag事件。
DragDrop
invalidHandleClasses : Array
CSS类名数组，应用到那些被认为是非法拖拽句柄的对象上。
DragDrop
invalidHandleIds : Object
一个对象，它的属性名标志了被认为是非法的拖动手柄元素的ID。 一个非空属性值标志着这些ID是有效的...
一个对象，它的属性名标志了被认为是非法的拖动手柄元素的ID。 一个非空属性值标志着这些ID是有效的。 例如，为了阻止从ID为"foo"的元素上发起拖动操作，使用 :
                                {
    foo: true
}
DragDrop
invalidHandleTypes : Object
一个对象，它的属性名标记了那些不能作为拖拽句柄的HTML标签。 一个非空属性值标志着此标签是无效的...
一个对象，它的属性名标记了那些不能作为拖拽句柄的HTML标签。 一个非空属性值标志着此标签是无效的。 默认为以下值，它将阻止从元素发起拖拽操作：
                                {
    A: "A"
}
DragDrop
isTarget : boolean
默认情况下，任何实例都可以是拖放的目标。 可以设置isTarget为false以禁用。
DragDrop
maintainOffset : boolean
当我们重置约束时保持偏移量。 当你需要在页面变化时，元素保持与其父元素的相对位置关系...
当我们重置约束时保持偏移量。 当你需要在页面变化时，元素保持与其父元素的相对位置关系，设置此项为true。
DragDrop
moveOnly : boolean
当设置为true时，当这个DD对象在同组的其他DD对象上方时，将...
当设置为true时，当这个DD对象在同组的其他DD对象上方时，将不会接收到notification事件。默认为false。
DragDrop
padding : int[] An array containing the 4 padding values: [top, right, bottom, left]
当前拖拽对象的padding配置项， 用来计算与当前对象相交叉的区域。
DragDrop
primaryButtonOnly : boolean
默认情况下，drag和drop实例只会响应鼠标第一个键的点击操作 (右手习惯下的左键)...
默认情况下，drag和drop实例只会响应鼠标第一个键的点击操作 (右手习惯下的左键)。 设置为true，将响应浏览器传来的任何一个键的点击
DragDrop
resizeFrame : boolean
默认情况下，我们把拖动的框架设置成与需要拖动的元素一样大小 (这是为了让框架有效...
默认情况下，我们把拖动的框架设置成与需要拖动的元素一样大小 (这是为了让框架有效)。 如果我们需要一个不同的行为，我们可以关闭它。
DDProxy
scroll : boolean
设置为true时，当一个对象被拖拽到浏览器视区边缘时，将自动尝试...
设置为true时，当一个对象被拖拽到浏览器视区边缘时，将自动尝试滚动浏览器的窗口。 默认为true。
DD
xTicks : int[]
在指定一个水平的刻度/间距时， 元素自动吸附位置的像素数组...
在指定一个水平的刻度/间距时， 元素自动吸附位置的像素数组。 当你定义一个间距记号时，这个数组是自动生成的。 （译者注：此配置可以用来实现在水平方向上拖动时的一种磁性吸附效果，这个数组就是 自动吸附的像素刻度或者间距）。
DragDrop
yTicks : int[]
在指定一个垂直的刻度/间距时， 元素自动吸附位置的像素数组...
在指定一个垂直的刻度/间距时， 元素自动吸附位置的像素数组。 当你定义一个间距记号时，这个数组是自动生成的。 （译者注：此配置可以用来实现在垂直方向上拖动时的一种磁性吸附效果，这个数组就是 自动吸附的像素刻度或者间距）。
DragDrop

公共方法

Method Defined By
DragSource ( Mixed el , Object config )
参数:
  • el : Mixed
    容器元素
  • config : Object
返回值:
  • void
DragSource
addInvalidHandleClass ( string cssClass ) : void
允许你为那些不能发起拖拽操作的元素指定一个CSS类
允许你为那些不能发起拖拽操作的元素指定一个CSS类
参数:
  • cssClass : string
    你希望忽略的元素的样式class
返回值:
  • void
DragDrop
addInvalidHandleId ( string id ) : void
允许你指定一个拖拽句柄的孩子节点，使它不能发起拖拽操作
允许你指定一个拖拽句柄的孩子节点，使它不能发起拖拽操作
参数:
  • id : string
    你希望忽略的元素的id
返回值:
  • void
DragDrop
addInvalidHandleType ( string tagName ) : void
允许你指定一个在被点击时不能发起拖拽操作的标签名称。 这是被设计用来更方便地处理内嵌的link对象的...
允许你指定一个在被点击时不能发起拖拽操作的标签名称。 这是被设计用来更方便地处理内嵌的link对象的， 此对象被嵌在一个拖动句柄内部，当它被点击时需要做其他的事情，而不是开始拖拽操作。
参数:
  • tagName : string
    需要包含在内的元素类型
返回值:
  • void
DragDrop
addToGroup ( sGroup {string} ) : void
将当前实例添加到一个彼此相关的drag/drop对象组中。 每个实例至少属于一个组...
将当前实例添加到一个彼此相关的drag/drop对象组中。 每个实例至少属于一个组， 并且如果需要，可以同时属于任意多个组。
参数:
  • {string} : sGroup
    组名
返回值:
  • void
DragDrop
afterDragDrop ( Ext.dd.DragDrop target , Event e , String id ) : void
默认为一个空函数， 你可以定制一个特殊的操作，当一个合法的拖拽和放下动作发生之后执。。
默认为一个空函数， 你可以定制一个特殊的操作，当一个合法的拖拽和放下动作发生之后执行。
参数:
  • target : Ext.dd.DragDrop
    拖拽目标
  • e : Event
    事件对象
  • id : String
    被拖拽元素的id
返回值:
  • void
DragSource
afterDragEnter ( Ext.dd.DragDrop target , Event e , String id ) : void
默认为一个空函数， 你可以定制一个特殊的操作，在拖拽源已经进入到目标范围内时执行。。
默认为一个空函数， 你可以定制一个特殊的操作，在拖拽源已经进入到目标范围内时执行。
参数:
  • target : Ext.dd.DragDrop
    拖拽目标
  • e : Event
    拖拽元素
  • id : String
    拖拽元素的ID
返回值:
  • void
DragSource
afterDragOut ( Ext.dd.DragDrop target , Event e , String id ) : void
默认为一个空函数， 你可以定制一个特殊的操作，在拖拽源被拖出了目标的范围而没有被放下时执行..
默认为一个空函数， 你可以定制一个特殊的操作，在拖拽源被拖出了目标的范围而没有被放下时执行， 并且可以选择终止执行它。
参数:
  • target : Ext.dd.DragDrop
    拖拽目标
  • e : Event
    事件对象
  • id : String
    被拖拽元素的id
返回值:
  • void
DragSource
afterDragOver ( Ext.dd.DragDrop target , Event e , String id ) : void
默认为一个空函数， 你可以定制一个特殊的操作，当拖拽源被拖着滑过。。。
默认为一个空函数， 你可以定制一个特殊的操作，当拖拽源被拖着滑过目标的时候执行。
参数:
  • target : Ext.dd.DragDrop
    拖拽目标
  • e : Event
    事件对象
  • id : String
    被拖拽元素的id
返回值:
  • void
DragSource
afterInvalidDrop ( Event e , String id ) : void
默认为一个空函数， 你可以定制一个特殊的操作，当一个合法的放下动作。
默认为一个空函数， 你可以定制一个特殊的操作，当一个合法的放下动作发生之后执行 providing an implementation.
参数:
  • e : Event
    事件对象
  • id : String
    被拖拽元素的ID
返回值:
  • void
DragSource
alignElWithMouse ( HTMLElement el , int iPageX , int iPageY ) : void
把元素位置设置到mousedown或者click事件发生的地方，保持鼠标在被点击元素之上的位置...
把元素位置设置到mousedown或者click事件发生的地方，保持鼠标在被点击元素之上的位置。 如果想把元素放置到不是鼠标点击的地方，请覆盖此方法。
参数:
  • el : HTMLElement
    需要移动的元素
  • iPageX : int
    mousedown或者drag事件的X坐标位置
  • iPageY : int
    mousedown或者drag事件的Y坐标位置
返回值:
  • void
DD
applyConfig () : void
应用那些传递给构造器的配置参数。此操作被期望在继承链的每一层上都能起作用...
应用那些传递给构造器的配置参数。此操作被期望在继承链的每一层上都能起作用。 这样一个DDProxy的实现类将会执行在DDProxy, DD和DragDrop上应用配置项的操作，此操作是为了使这些参数在每个对象上都可用。
参数:
  • 无。
返回值:
  • void
DD
autoOffset ( int iPageX , int iPageY ) : void
设置鼠标的偏移量为：相关联元素左上角到被点击元素位置之间的距离...
设置鼠标的偏移量为：相关联元素左上角到被点击元素位置之间的距离...
参数:
  • iPageX : int
    点击位置的X坐标值
  • iPageY : int
    点击位置的Y坐标值
返回值:
  • void
DD
b4Drag () : void
在onDrag事件之前触发的事件。重写了 Ext.dd.DragDrop中的对应属性。
在onDrag事件之前触发的事件。重写了 Ext.dd.DragDrop中的对应属性。
参数:
  • 无。
返回值:
  • void
DD
b4MouseDown () : void
在onMouseDown事件之前触发的事件。 覆盖了Ext.dd.DragDrop中的相同属性。
Event that fires prior to the onMouseDown event. Overrides Ext.dd.DragDrop.
参数:
  • 无。
返回值:
  • void
DD
beforeDragDrop ( Ext.dd.DragDrop target , Event e , String id ) : Boolean
默认为一个空函数， 你可以定制一个特殊的操作，在拖拽源被放置到拖拽目标上之前执行...
默认为一个空函数， 你可以定制一个特殊的操作，在拖拽源被放置到拖拽目标上之前执行， 并且可以选择终止执行onDragDrop方法。
参数:
  • target : Ext.dd.DragDrop
    拖拽目标
  • e : Event
    事件对象
  • id : String
    拖拽元素的ID
返回值:
  • Boolean
    isValid 当drag drop事件合法时为true；否则为false并终止操作
DragSource
beforeDragEnter ( Ext.dd.DragDrop target , Event e , String id ) : Boolean
默认为一个空函数， 你可以定制一个特殊的操作，在拖拽源开始进入目标的范围之前执行...
默认为一个空函数， 你可以定制一个特殊的操作，在拖拽源开始进入目标的范围之前执行， 并且可以选择终止执行onDragEnter方法。
参数:
  • target : Ext.dd.DragDrop
    拖拽目标
  • e : Event
    事件对象
  • id : String
    被拖拽元素的id
返回值:
  • Boolean
    isValid 如果drag事件合法，为true；否则为false并退出
DragSource
beforeDragOut ( Ext.dd.DragDrop target , Event e , String id ) : Boolean
默认为一个空函数， 你可以定制一个特殊的操作，在拖拽源滑过目标而没有被放下之前执行...
默认为一个空函数， 你可以定制一个特殊的操作，在拖拽源滑过目标而没有被放下之前执行， 并可以选择终止执行onDragOut方法。
参数:
  • target : Ext.dd.DragDrop
    拖拽目标
  • e : Event
    事件对象
  • id : String
    被拖拽元素的id
返回值:
  • Boolean
    isValid 如果drag事件合法，为true；否则为false并退出
DragSource
beforeDragOver ( Ext.dd.DragDrop target , Event e , String id ) : Boolean
默认为一个空函数， 你可以定制一个特殊的操作，当被拖拽的对象滑过拖拽目标的时候执行..
默认为一个空函数， 你可以定制一个特殊的操作，当被拖拽的对象滑过拖拽目标的时候执行， 并且可以选择终止执行onDragOver方法。
参数:
  • target : Ext.dd.DragDrop
    拖拽的目标
  • e : Event
    事件对象
  • id : String
    被拖拽元素的id
返回值:
  • Boolean
    isValid 如果drag事件合法，为true；否则为false并退出
DragSource
beforeInvalidDrop ( Ext.dd.DragDrop target , Event e , String id ) : Boolean
默认为一个空函数， 你可以定制一个特殊的操作，当一个合法的放下动作发生之前执。。
默认为一个空函数， 你可以定制一个特殊的操作，当一个合法的放下动作发生之前执行。
参数:
  • target : Ext.dd.DragDrop
    拖拽目标
  • e : Event
    事件对象
  • id : String
    被拖拽元素的id
返回值:
  • Boolean
    isValid 如果drag事件合法，为true；否则为false并退出
DragSource
cachePosition ( iPageX the , iPageY the ) : void
保存最后一次的位置，这样我们可以按需要重置约束和标记...
保存最后一次的位置，这样我们可以按需要重置约束和标记。 我们必须知道这一点，以使我们能够计算元素与其原来位置偏移的像素数。
参数:
  • the : iPageX
    当前水平位置（可选的，如果使用了它，只是为了方便之后不用查看该值）
  • the : iPageY
    当前垂直位置（可选的，如果使用了它，只是为了方便之后不用查看该值）
返回值:
  • void
DD
clearConstraints () : void
清除所有应用到此实例上的约束。 同时清除标记...
清除所有应用到此实例上的约束。 同时清除标记，因为此时它们不能脱离约束而独立存在。
参数:
  • 无。
返回值:
  • void
DragDrop
clearTicks () : void
清除此实例上定义的所有“吸附”间隔
清除此实例上定义的所有“吸附”间隔
参数:
  • 无。
返回值:
  • void
DragDrop
constrainTo ( Mixed constrainTo , [ Object/Number pad ], [ Boolean inContent ] ) : void
让元素的运动范围受限于另一个元素...
让元素的运动范围受限于另一个元素， 使用方法:

                                    var dd = new Ext.dd.DDProxy("dragDiv1", "proxytest",
                { dragElId: "existingProxyDiv" });
 dd.startDrag = function(){
     this.constrainTo("parent-id");
 };
或者你可以使用 Ext.Element 对象来初始化:
                                Ext.get("dragDiv1").initDDProxy("proxytest", {dragElId: "existingProxyDiv"}, {
     startDrag : function(){
         this.constrainTo("parent-id");
     }
 });
参数:
  • constrainTo : Mixed
    要绑定到的元素。
  • pad : Object/Number
    (可选) Pad提供了定义约束的"padding"参数的一个途径， 既可以是一个数字，以便进行均匀的填充 (4 等价于{left:4, right:4, top:4, bottom:4})， 或者一个包含填充尺寸数据的对象。例如： {right:10, bottom:10}
  • inContent : Boolean
    (可选) 将可拖动区域约束到元素的盒子模型内部(在填充和边框内部)
返回值:
  • void
DragDrop
createFrame () : void
创建代理元素，如果它还不存在
创建代理元素，如果它还不存在
参数:
  • 无。
返回值:
  • void
DDProxy
endDrag ( Event e ) : void
当结束对对象的拖动操作时触发
当结束对对象的拖动操作时触发
参数:
  • e : Event
    the mouseup event
返回值:
  • void
DragDrop
getDragData () : Object
返回关联到当前拖拽源的数据对象
返回关联到当前拖拽源的数据对象
参数:
  • 无。
返回值:
  • Object
    data 一个可以包含任意数据的对象
DragSource
getDragEl () : HTMLElement
返回实际需要拖动元素的引用。默认情况下，这与html元素相同，但也可以指定到另一个元素...
返回实际需要拖动元素的引用。默认情况下，这与html元素相同，但也可以指定到另一个元素。可以在Ext.dd.DDProxy中找到这种例子。
参数:
  • 无。
返回值:
  • HTMLElement
    the html element
DragDrop
getEl () : HTMLElement
返回相关联的元素的引用
返回相关联的元素的引用
参数:
  • 无。
返回值:
  • HTMLElement
    html元素
DragDrop
getProxy () : Ext.dd.StatusProxy
返回拖拽源底层的 Ext.dd.StatusProxy
Returns the drag source's underlying Ext.dd.StatusProxy
参数:
  • 无。
返回值:
  • Ext.dd.StatusProxy
    代理的StatusProxy
DragSource
hideProxy () : void
隐藏拖拽源的 Ext.dd.StatusProxy
隐藏拖拽源的 Ext.dd.StatusProxy
参数:
  • 无。
返回值:
  • void
DragSource
init ( id the , String sGroup , object config ) : void
设置DragDrop对象。 必须在任何Ext.dd.DragDrop的子类构造器中调用
设置DragDrop对象。 必须在任何Ext.dd.DragDrop的子类构造器中调用
参数:
  • the : id
    相关联的元素id
  • sGroup : String
    相关元素的编组
  • config : object
    配置属性
返回值:
  • void
DragDrop
initFrame () : void
初始化拖动框架元素。 此方法必须在子类的构造器中调用。
初始化拖动框架元素。 此方法必须在子类的构造器中调用。
参数:
  • 无。
返回值:
  • void
DDProxy
initTarget ( id the , String sGroup , object config ) : void
Initializes Targeting functionality only... the object does not get a mousedown handler. （译者注：原始文档不完整，无法翻译此句。）
Initializes Targeting functionality only... the object does not get a mousedown handler. （译者注：原始文档不完整，无法翻译此句。）
参数:
  • the : id
    相关联元素的id
  • sGroup : String
    关联项目的编组
  • config : object
    配置属性
返回值:
  • void
DragDrop
isLocked () : boolean
如果此实例被锁定，或者drag drop管理器被锁定， 返回true...
如果此实例被锁定，或者drag drop管理器被锁定， 返回true (意味着此页面的所有拖拽操作都无效。)
参数:
  • 无。
返回值:
  • boolean
    如果此实例或者所有的drag/drop被锁定，返回true；否则返回false
DragDrop
isValidHandleChild ( HTMLElement node ) : boolean
检查被排除在外的标签列表，以确定此次点击是否应该被忽略
检查被排除在外的标签列表，以确定此次点击是否应该被忽略
参数:
  • node : HTMLElement
    需要检查的HTMLElement
返回值:
  • boolean
    如果这是一个合法的标签类型，返回true；如果不是，返回false
DragDrop
lock () : void
锁定此实例
锁定此实例
参数:
  • 无。
返回值:
  • void
DragDrop
onAvailable () : void
覆盖onAvailable方法，以便在决定了位置间隔之后执行所需的操作。
覆盖onAvailable方法，以便在决定了位置间隔之后执行所需的操作。
参数:
  • 无。
返回值:
  • void
DragDrop
onBeforeDrag ( Object data , Event e ) : Boolean
默认为一个空函数， 你可以定制一个特殊的操作，在发起drag事件之前执行...
默认为一个空函数， 你可以定制一个特殊的操作，在发起drag事件之前执行， 并且可以选择终止执行它。
参数:
  • data : Object
    包含任意数据的对象，可以在拖拽目标之间共享
  • e : Event
    事件对象
返回值:
  • Boolean
    isValid 如果drag事件合法，为true；否则为false并退出
DragSource
onDrag ( Event e ) : void
抽象方法，当拖动一个对象产生onMouseMove事件时调用。
抽象方法，当拖动一个对象产生onMouseMove事件时调用。
参数:
  • e : Event
    mousemove事件
返回值:
  • void
DragDrop
onDragDrop ( Event e , String|DragDrop[] id ) : void
抽象方法，在当前元素被拖放到另一个DragDrop对象上时调用。
抽象方法，在当前元素被拖放到另一个DragDrop对象上时调用。
参数:
  • e : Event
    mouseup事件
  • id : String|DragDrop[]
    在POINT模式下，这是被拖放到其上的那个元素的id（译者注：指目标元素id）。 在INTERSECT模式下，这是一个dd元素数组，当前元素被拖放到其上。
返回值:
  • void
DragDrop
onDragEnter ( Event e , String|DragDrop[] id ) : void
抽象方法，当此元素第一次从另外一个DragDrop对象上滑过时，此方法被调用。
抽象方法，当此元素第一次从另外一个DragDrop对象上滑过时，此方法被调用。
参数:
  • e : Event
    the mousemove event
  • id : String|DragDrop[]
    在POINT模式下，此id是被滑过的元素的id。 在INTERSECT模式下，这是一个或多个被滑过元素的数组。
返回值:
  • void
DragDrop
onDragOut ( Event e , String|DragDrop[] id ) : void
抽象方法，当我们不再拖动一个元素在另一个元素上滑过时触发
抽象方法，当我们不再拖动一个元素在另一个元素上滑过时触发
参数:
  • e : Event
    mousemove事件
  • id : String|DragDrop[]
    在POINT模式下，此id是被滑过的元素的id。 在INTERSECT模式下，这是dd元素的数组，鼠标不再停留在这些元素之上。
返回值:
  • void
DragDrop
onDragOver ( Event e , String|DragDrop[] id ) : void
抽象方法，当此元素从另一个DragDrop对象上滑过时调用。
抽象方法，当此元素从另一个DragDrop对象上滑过时调用。
参数:
  • e : Event
    mousemove事件
  • id : String|DragDrop[]
    在POINT模式下，此id是被滑过的元素的id。 在INTERSECT模式下，这是被滑过的dd元素数组。
返回值:
  • void
DragDrop
onInvalidDrop ( Event e ) : void
抽象方法，如果当前元素被拖动到了一个没有落下目标的区域时，此方法被调用
抽象方法，如果当前元素被拖动到了一个没有落下目标的区域时，此方法被调用
参数:
  • e : Event
    mouseup事件
返回值:
  • void
DragDrop
onMouseDown ( Event e ) : void
当一个drag/drop对象获得mousedown事件时的处理函数
当一个drag/drop对象获得mousedown事件时的处理函数
参数:
  • e : Event
    mousedown事件
返回值:
  • void
DragDrop
onMouseUp ( Event e ) : void
当在拖拽的对象松开鼠标时触发的事件处理器
当在拖拽的对象松开鼠标时触发的事件处理器
参数:
  • e : Event
    mouseup事件
返回值:
  • void
DragDrop
onStartDrag ( Number x , Number y ) : void
默认为一个空函数， 你可以定制一个特殊的操作，在发起拖拽事件开始时执行一次...
默认为一个空函数， 你可以定制一个特殊的操作，在发起拖拽事件开始时执行一次。 不能从此方法中终止拖拽操作。
参数:
  • x : Number
    点击拖拽对象的X坐标
  • y : Number
    点击拖拽对象的Y坐标
返回值:
  • void
DragSource
removeFromGroup ( string sGroup ) : void
从所提供的交互组中删除此元素
从所提供的交互组中删除此元素
参数:
  • sGroup : string
    需要从中删除的组
返回值:
  • void
DragDrop
removeInvalidHandleClass ( string cssClass ) : void
卸载一个描述非法状态的CSS类
Unsets an invalid css class
参数:
  • cssClass : string
    你想要重新启用的元素的css类。
返回值:
  • void
DragDrop
removeInvalidHandleId ( string id ) : void
卸载一个无效的handle id
Unsets an invalid handle id
参数:
  • id : string
    需要重新启用的元素的id the id of the element to re-enable
返回值:
  • void
DragDrop
removeInvalidHandleType ( string tagName ) : void
卸载由addInvalidHandleType方法添加的排除标签集合
卸载由addInvalidHandleType方法添加的排除标签集合
参数:
  • tagName : string
    需要排除的元素类型
返回值:
  • void
DragDrop
resetConstraints ( boolean maintainOffset ) : void
当你手动重新设置一个dd元素的位置时，必须调用resetConstraints方法。
当你手动重新设置一个dd元素的位置时，必须调用resetConstraints方法。
参数:
  • maintainOffset : boolean
返回值:
  • void
DragDrop
setDelta ( int iDeltaX , int iDeltaY ) : void
设置鼠标的偏移量。 你可以直接调用此方法，以强制把鼠标设置到一个特定的位置 (例如...
设置鼠标的偏移量。 你可以直接调用此方法，以强制把鼠标设置到一个特定的位置 (例如：传递0,0可以将它设置到对象的中心点位置)
参数:
  • iDeltaX : int
    和左端的距离
  • iDeltaY : int
    和顶端的距离
返回值:
  • void
DD
setDragElId ( id {string} ) : void
允许你指定一个元素，不是相关联的元素本身，在拖动时跟随鼠标移动
允许你指定一个元素，不是相关联的元素本身，在拖动时跟随鼠标移动 （译者注：也就是一个”影子对象“，拖动的时候，原来的元素不动，让和它本身一样的 一个”克隆体“来负责跟随鼠标移动）
参数:
  • {string} : id
    发起拖动操作的元素id
返回值:
  • void
DragDrop
setDragElPos ( int iPageX , int iPageY ) : void
把拖拽的元素位置设置到mousedown或者click事件发生的地方，保持鼠标在被点击元素之上的位置...
把拖拽的元素位置设置到mousedown或者click事件发生的地方，保持鼠标在被点击元素之上的位置。 如果想把元素放置到不是鼠标所在的位置，请覆盖此方法。
参数:
  • iPageX : int
    鼠标按下或者拖拽时的横坐标
  • iPageY : int
    鼠标按下或者拖拽时的纵坐标
返回值:
  • void
DD
setHandleElId ( id {string} ) : void
允许你指定关联元素的一个孩子节点，以用来发起拖动操作。 这种情况的一个例子是，你有包含text和link内容的div...
允许你指定关联元素的一个孩子节点，以用来发起拖动操作。 这种情况的一个例子是，你有包含text和link内容的div。 点击内容区域的任何地方，都会正常地启动拖动操作。使用此方法可以指定从div内容中的任何一个元素发起拖拽操作。
参数:
  • {string} : id
    将被用来发起拖拽操作的元素id。
返回值:
  • void
DragDrop
setInitPosition ( int diffX , int diffY ) : void
存储相关元素初始化的位置。
存储相关元素初始化的位置。
参数:
  • diffX : int
    X方向偏移，默认为0
  • diffY : int
    Y方向偏移，默认为0
返回值:
  • void
DragDrop
setOuterHandleElId ( id the ) : void
允许你设置一个相关元素外部的元素，作为拖动的手柄
允许你设置一个相关元素外部的元素，作为拖动的手柄
参数:
  • the : id
    元素的id，此元素将被用作发起拖动操作
返回值:
  • void
DragDrop
setPadding ( int iTop , int iRight , int iBot , int iLeft ) : void
配置拖拽时目标区域的填充像素数。为计算目标区域有效地扩展（或者缩小）虚拟对象的大小...
配置拖拽时目标区域的填充像素数。为计算目标区域有效地扩展（或者缩小）虚拟对象的大小。支持css-style快捷方式，如果只传递了一个参数，所有的边界将会拥有相同的填充；如果传递了两个参数，top和bottom会使用第一个参数， left和right会使用第二个参数。（译者注：这里的规则与CSS设置padding参数的规则是一样的，完全可以用CSS的规则来配置此参数。）
参数:
  • iTop : int
    Top pad
  • iRight : int
    Right pad
  • iBot : int
    Bot pad
  • iLeft : int
    Left pad
返回值:
  • void
DragDrop
setXConstraint ( int iLeft , int iRight , int iTickSize ) : void
默认情况下，元素可以被拖拽并放置到屏幕上的任意位置。 使用此方法来限制元素在水平方向上的运动...
默认情况下，元素可以被拖拽并放置到屏幕上的任意位置。 使用此方法来限制元素在水平方向上的运动。 如果你想锁定在y轴上的拖动，传递参数0,0
参数:
  • iLeft : int
    元素可以向左移动的像素数
  • iRight : int
    元素可以向右移动的像素数
  • iTickSize : int
    可选参数，指定元素每次以iTickSize配置项指定的像素数运动。
返回值:
  • void
DragDrop
setYConstraint ( int iUp , int iDown , int iTickSize ) : void
默认情况下，元素可以被拖放到屏幕上的任意位置。 设置此项以限制元素在垂直方向上的运动...
默认情况下，元素可以被拖放到屏幕上的任意位置。 设置此项以限制元素在垂直方向上的运动。 如果我们需要锁定元素在x轴方向上的运动，传递参数0,0
参数:
  • iUp : int
    元素可以向上移动的像素数
  • iDown : int
    元素可以向下移动的像素数
  • iTickSize : int
    可选参数，指定元素每次以iTickSize配置项指定的像素数运动。
返回值:
  • void
DragDrop
startDrag ( int X , int Y ) : void
抽象方法，当点击一个drag/drop对象，并且遇到拖动或者mousedown事件的那一刻， 此方法被调用。
抽象方法，当点击一个drag/drop对象，并且遇到拖动或者mousedown事件的那一刻， 此方法被调用。
参数:
  • X : int
    点击的位置
  • Y : int
    点击的位置
返回值:
  • void
DragDrop
toString () : string
toString方法
toString method
参数:
  • 无。
返回值:
  • string
    dd对象的字符串表述
DragDrop
unlock () : void
Unlock this instace
为此实例解锁
参数:
  • 无。
返回值:
  • void
DragDrop
unreg () : void
删除当前元素上所有拖拽和落下钩子(hook)
删除当前元素上所有拖拽和落下钩子(hook)
参数:
  • 无。
返回值:
  • void
DragDrop

公共事件

该类没有公共事件。


Observable
    DragTracker

Class Ext.dd.DragTracker

包: | Ext.dd
定义类的文件: | DragTracker.js
类: | DragTracker
继承自: | Observable
DragTracker监听Element上的drag事件，并在拖动开始、拖拽中、拖拽结束时触发事件。 对于例如Ext.Slider 这类组件非常有用，它上面有一个元素，可以被拖动以改变Slider的值。 DragTracker提供了一族方法，必须覆盖它们以提供功能，用来响应检测到的拖拽操作。 它们是onBeforeStart, onStart, onDrag和onEnd。示例实现请参见 Ext.Slider的 initEvents方法。

配置项

Config Options Defined By
active : Boolean
默认为false。
DragTracker
autoStart : Boolean/Number
默认为false。 指定为true可以延迟开始触发1000ms。...
默认为false。 指定为true可以延迟开始触发1000ms。 指定一个毫秒数值用来延迟开始触发。
DragTracker
listeners : Object
一个包含一个或多个事件处理器的配置对象，会在初始化的时候被添加到目标对象上...

一个包含一个或多个事件处理器的配置对象，会在初始化的时候被添加到目标对象上。 该配置对象应该是一个有效的监听器配置对象就像 addListener例子中指定的一样可一次附加多个处理器。

ExtJs Components上的DOM事件

一些 ExtJs Component 类导出时会选择一些DOM事件(例如 "click", "mouseover" 等等), 这通常只是在有额外的值可以被添加时发生。例如DataView类的 click事件会传递被点击的节点。也可以直接在Component的HTMLElementevent上访问DOM事件，但必需在Component被渲染后监听器才能添加到Element 上。可以按照以下步骤添加插件:

// 插件会用一个监听器配置对象进行配置。
//该组件会被添加到所有处理方法的参数列表上。
Ext.DomObserver = Ext.extend(Object, {
    constructor: function(config) {
        this.listeners = config.listeners ? config.listeners : config;
    },

    // 组件将自己传递进了插件的初始化方法里
    init: function(c) {
        var p, l = this.listeners;
        for (p in l) {
            if (Ext.isFunction(l[p])) {
                l[p] = this.createHandler(l[p], c);
            } else {
                l[p].fn = this.createHandler(l[p].fn, c);
            }
        }

        // 渲染后立即添加监听器到元素上
        c.render = c.render.createSequence(function() {
            var e = c.getEl();
            if (e) {
                e.on(l);
            }
        });
    },

    createHandler: function(fn, c) {
        return function(e) {
            fn.call(this, e, c);
        };
    }
});

var combo = new Ext.form.ComboBox({

    // 元素被点击后折叠
    plugins: [ new Ext.DomObserver({
        click: function(evt, comp) {
            comp.collapse();
        }
    })],
    store: myStore,
    typeAhead: true,
    mode: 'local',
    triggerAction: 'all'
});

Observable
tolerance : Number
在拖拽被认为已经开始之前，拖拽对象必须被拖动的像素值。 默认为5。
DragTracker

公共属性

该类没有公共属性。

公共方法

Method Defined By
addEvents( Object|String o, string Optional. ) : void
添加指定的事件到事件列表上，事件会被该Observable触发。
添加指定的事件到事件列表上，事件会被该Observable触发。
参数:
  • o : Object|String
    以事件名作为属性true作为值的对象 或者当多个事件名被分开的传递时则为第一个事件名。
  • Optional. : string
    事件名被分开的传递时则为事件名。 用法:
    this.addEvents('storeloaded', 'storecleared');
返回值:
  • void
Observable
addListener( String eventName, Function handler, [Object scope], [Object options] ) : void
给对象添加事件处理器。
给对象添加事件处理器。
参数:
  • eventName : String
    监听的事件名。
  • handler : Function
    事件调用的方法
  • scope : Object
    （可选）处理方法执行的作用域 (this的引用 reference)。 如果被忽略。默认为触发事件的对象。
  • options : Object
    （可选）包含处理器配置和属性的对象。 可能包含以下的属性:
    • scope : Object
      处理方法执行的作用域(this的引用) 。 如果被忽略。默认为触发事件的对象。
    • delay : Number
      在触发事件后延迟调用处理器的毫秒数。
    • single : Boolean
      如果为True则添加一个处理器来处理下一次的事件触发（仅一次），然后移除自己。
    • buffer : Number
      使得处理器延迟指定毫秒数后预定的运行在 一个Ext.util.DelayedTask中 。 如果事件在时间内再一次被触发，原始的处理器不会被调用，但是新的处理器会预定的在他的位置上。
    • target : Observable
      如果事件在目标的Observable上触发则仅仅调用处理器， 否则 事件会从子类的Observable上冒泡

    组合选项
    使用这些选项参数,可能会组合出不同类型的监听器：

    一个延迟的，一次性的监听器。

    myDataView.on('click', this.onClick, this, {
single: true,
delay: 100
});

    一次调用附加多个处理器
    该方法同样支持传递一个包含指定的多个处理器的属性的配置对象参数。

    myGridPanel.on({
'click' : {
    fn: this.onClick,
    scope: this,
    delay: 100
},
'mouseover' : {
    fn: this.onMouseOver,
    scope: this
},
'mouseout' : {
    fn: this.onMouseOut,
    scope: this
}
});

    或者一个简写的语法：

    myGridPanel.on({
'click' : this.onClick,
'mouseover' : this.onMouseOver,
'mouseout' : this.onMouseOut,
 scope: this
});
返回值:
  • void
Observable
enableBubble( String/Array events ) :void
是否现在使得事件会被该Observable触发并调用 this.getBubbleTarget()方法在拥有者的继承树...

是否现在使得事件会被该Observable触发并调用 this.getBubbleTarget()方法在拥有者的继承树中冒泡。Observable的基础类中没有该方法的实现。

该方法一般被Ext.Components用来冒泡事件到拥有者的容器。参看Ext.Component.getBubbleTarget默认的实现 在Ext.Component中返回组件的直接拥有者。但是如果需要的是一个已知的目标，该方法可以被重写来更快的访问需求的目标。

例子:

Ext.override(Ext.form.Field, {
    // 添加方法到Field的initComponent上改变事件为冒泡
    initComponent : Ext.form.Field.prototype.initComponent.createSequence(function() {
        this.enableBubble('change');
    }),

    // 我们知道我们想让Field的事件冒泡到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() {
            // 如果样式被修改标题会变红。
            myForm.header.setStyle('color', 'red');
        }
    }
});
参数:
  • events : String/Array
    冒泡的事件名，或事件名数组
返回值:
  • void
Observable
fireEvent( String eventName, Object... args ) : Boolean
用传入的参数触发指定的事件 (减去事件名)。 一个事件可以被设置为冒泡 Obse...

用传入的参数触发指定的事件 (减去事件名)。

一个事件可以被设置为冒泡到Observable父类继承树(参看 Ext.Component.getBubbleTarget) 调用enableBubble实现。

参数:
  • eventName : String
    触发的事件名。
  • args : Object...
    传递给处理器的可变长度参数。
返回值:
  • Boolean
    如果有任何的处理器返回false则返回false，否则返回true。
Observable
getDragTarget () : Ext.Element
返回拖动的目标
返回拖动的目标
参数:
  • 无。
返回值:
  • Ext.Element
    当前被跟踪的元素
DragTracker
hasListener( String eventName ) : Boolean
检测对象是否包含指定事件的任何监听器
检测对象是否包含指定事件的任何监听器
参数:
  • eventName : String
    检测的事件名
返回值:
  • Boolean
    如果事件被监听则为true，否则为false
Observable
on( String eventName, Function handler, [Object scope], [Object options] ) : void
给对象添加事件处理器 (addListener的简写形式)
给对象添加事件处理器 (addListener的简写形式。)
参数:
  • eventName : String
    监听的事件类型
  • handler : Function
    事件调用的方法
  • scope : Object
    （可选）处理方法执行时的作用域 (this 的引用)。 如果被忽略。默认为触发事件的对象。
  • options : Object
    可选 包含处理器配置的对象。
返回值:
  • void
Observable
onBeforeStart ( Ext.EventObject e ) : void
模板方法，每个DragTracker实例都必须覆盖此方法。 当用户第一次点击并保持鼠标按钮按下状态时调用。...
模板方法，每个DragTracker实例都必须覆盖此方法。 当用户第一次点击并保持鼠标按钮按下状态时调用。 返回false可以禁止拖动。
参数:
  • e : Ext.EventObject
    事件对象
返回值:
  • void
DragTracker
onDrag ( Ext.EventObject e ) : void
模板方法，每个DragTracker实例都必须覆盖此方法。 无论何时检测到拖动时调用。
模板方法，每个DragTracker实例都必须覆盖此方法。 无论何时检测到拖动时调用。
参数:
  • e : Ext.EventObject
    事件对象
返回值:
  • void
DragTracker
onEnd ( Ext.EventObject e ) : void
模板方法，每个DragTracker实例都必须覆盖此方法。 当拖拽操作结束时调用(例如，用户点击并保持鼠标按下状态...
模板方法，每个DragTracker实例都必须覆盖此方法。 当拖拽操作结束时调用(例如，用户点击并保持鼠标按下状态，拖动元素然后放开鼠标按钮)
参数:
  • e : Ext.EventObject
    事件对象
返回值:
  • void
DragTracker
onStart ( Array xy ) : void
模板方法，每个DragTracker实例都必须覆盖此方法。 当拖动操作开始时调用...
模板方法，每个DragTracker实例都必须覆盖此方法。 当拖动操作开始时调用(例如，用户已经移动被跟踪对象超过了指定的限度值)
参数:
  • xy : Array
    被跟踪元素原先位置的x和y坐标
返回值:
  • void
DragTracker
purgeListeners() : void
移除对象上所有的监听器
移除对象上所有的监听器
参数:
  • 无。
返回值:
  • void
Observable
relayEvents( Object o, Array events ) : void
从指定的Observable上传递选择的事件就好像被当前对象触发一样。
从指定的Observable上传递选择的事件就好像被当前对象触发一样。
参数:
  • o : Object
    该Observable上的事件被当前对象传递。
  • events : Array
    传递的数组名。
返回值:
  • void
Observable
removeListener( String eventName, Function handler, [Object scope] ) : void
删除一个事件处理器。
删除一个事件处理器。
参数:
  • eventName : String
    处理器关联的事件类型。
  • handler : Function
    移除的处理器。 这应该是传递到addListener里的方法的引用。
  • scope : Object
    （可选）处理器指定的初始作用域。
返回值:
  • void
Observable
resumeEvents() : void
重新开始触发事件。(参见suspendEvents) 如果事件以queueSuspended参数被挂起，则在事件被挂起时 ...
重新开始触发事件。(参见 suspendEvents) 如果事件以queueSuspended 参数被挂起，则在事件被挂起时触发的事件会被传递到所有的监听器上
参数:
  • 无。
返回值:
  • void
Observable
suspendEvents( Boolean queueSuspended ) : void
暂停触发所有的事件。 (参看resumeEvents)
暂停触发所有的事件。（参看 resumeEvents)
参数:
  • queueSuspended : Boolean
    如果传递为true则排列好暂停的事件使得在调用 resumeEvents 后再触发它们，而不是抛弃所有暂停的事件。
返回值:
  • void
Observable
un( String eventName, Function handler, [Object scope] ) : void
删除一个事件处理器(removeListener方法的简写形式)
删除一个事件处理器(removeListener方法的简写形式。)
参数:
  • eventName : String
    处理器关联的事件类型
  • handler : Function
    被删除的处理器 这应该是传入 addListener 中的方法的引用。
  • scope : Object
    （可选）为处理器指定的初始作用域。
返回值:
  • void
Observable

公共事件

Event Defined By
drag : ( Object this , Object e )
监听器将会以如下的参数格式被调用:
  • this : Object
  • e : Object
    事件对象
DragTracker
dragend : ( Object this , Object e )
监听器将会以如下的参数格式被调用:
  • this : Object
  • e : Object
    事件对象
DragTracker
dragstart : ( Object this , Object startXY )
监听器将会以如下的参数格式被调用:
  • this : Object
  • startXY : Object
    事件的页面坐标
DragTracker
mousedown : ( Object this , Object e )
监听器将会以如下的参数格式被调用:
  • this : Object
  • e : Object
    事件对象
DragTracker
mousemove : ( Object this , Object e )
监听器将会以如下的参数格式被调用:
  • this : Object
  • e : Object
    事件对象
DragTracker
mouseup : ( Object this , Object e )
监听器将会以如下的参数格式被调用:
  • this : Object
  • e : Object
    事件对象
DragTracker


DragDrop
    DD
      DDProxy
        DragSource
          DragZone

Class Ext.dd.DragZone

包: | Ext.dd
定义类的文件: | DragZone.js
类: | DragZone
子类: | GridDragZone, TreeDragZone
继承自: | DragSource

该类提供了一个容器DD实例，允许拖拽多个源子节点。

该类没有移动拖拽目标节点，而是提供了一个可以包含任何你想要的DOM结构的代理元素。代理中显示的DOM元素由 getDragData的实现提供， 或者由用 Ext.dd.Registry注册的draggables提供。

如果你希望为任意数量的节点提供拖拽，并且每个节点展现一些程序对象（例如 DataView中的节点）， 那么使用该类将是激活这些节点的最方便的途径。

默认情况下，该累需要拖拽节点由 Ext.dd.Registry注册。 然而，更简便的允许DragZone管理任意数量可拖拽元素的方法是在配置DragZone时使用 getDragData方法，用来侦测传递的鼠标时间是否发生在一个或者一系列元素上。 使用事件的 getTarget方法可以方便地确定基于 Ext.DomQuery 选择器的节点。例如，为了使得DataView的节点可拖拽，使用如下技术。要求使用DeataView的知识：

            myDataView.on('render', function(v) {
    myDataView.dragZone = new Ext.dd.DragZone(v.getEl(), {

//      解手鼠标按下事件，查看是否是DataView节点。
//      是的话则返回drag数据对象。
        getDragData: function(e) {

//          使用DataView自己的itemSelector（一个强制属性）来检测鼠标按下时间是否绑定到DataView的节点。
            var sourceEl = e.getTarget(v.itemSelector, 10);

//          如果鼠标按下事件绑定到一个DataView节点，则克隆之产生一个ddel元素，供代理proxy使用。并且往返回的数据对象中添加应用数据。
            if (sourceEl) {
                d = sourceEl.cloneNode(true);
                d.id = Ext.id();
                return {
                    ddel: d,
                    sourceEl: sourceEl,
                    repairXY: Ext.fly(sourceEl).getXY(),
                    sourceStore: v.store,
                    draggedRecord: v.getRecord(sourceEl)
                }
            }
        },

//      为代理提供坐标以使其在拖拽失败时返回。这是getDragData方法捕捉到的可拖拽的元素的原始XY坐标。
        getRepairXY: function() {
            return this.dragData.repairXY;
        }
    });
});
想要详细了解和DragZone对应的DropZone，参见 DropZone 的文档。

配置项

Config Options |  | Defined By
 | containerScroll : Boolean 如果为true，使用Scrollmanager注册此容器， 在拖拽过程中可以自动进行滚动。 | DragZone
 | ddGroup : String 当前对象所属的指定的drag drop组。 如果指定了一个组，那么此对象只与同一组中的其它可拖拽对象发生交互... 当前对象所属的指定的drag drop组。 如果指定了一个组，那么此对象只与同一组中的其它可拖拽对象发生交互 默认值为 undefined). | DragSource
 | dropAllowed : String 当允许执行放下操作时返回给拖拽源的CSS样式 (默认值为 "x-dd-drop-ok"). | DragSource
 | dropNotAllowed : String 当不允许放开时返回给拖拽源的CSS样式 (默认值为 "x-dd-drop-nodrop"). | DragSource
 | hlColor : String 在放下动作失败，对拖拽源进行高亮显示时使用的颜色 (默认值为... 在放下动作失败，对拖拽源进行高亮显示时使用的颜色 (默认值为 "c3daf9"---淡蓝) | DragZone

公共属性

Property Defined By
Ext.dd.DDProxy.dragElId : String
默认被拖动的框架div的id
DDProxy
available : boolean
当相关联的dom元素可以访问之前availabe属性值都是false。
DragDrop
centerFrame : boolean
默认情况下，框架会被精确地放置到拖拽元素的位置 ，所以我们必须使用Ext.dd.DD类提供的鼠标偏移量....
默认情况下，框架会被精确地放置到拖拽元素的位置 ，所以我们必须使用Ext.dd.DD类提供的鼠标偏移量。另外一点是让拖拽框架以鼠标为中心点，只有你没有为此对象设置约束时才有效。设置centerFrame为true可以使用这种效果（以鼠标为中心）。
DDProxy
config : object
传递给构造器的配置参数
DragDrop
defaultPadding : Object
为"constrainTo"元素提供默认的填充约束 (默认值为 {left: 0, right:0, top:0, bottom:0})。
DragDrop
dragData : Object
这个属性包含了展现拖拽对象的数据。通过getDragData方法创建。必须包含一个...
这个属性包含了展现拖拽对象的数据。通过 getDragData 方法创建。必须包含一个 ddel 属性，但是可以根据程序需求包含别的任何数据。
DragZone
groups : object An object in the format {'group1':true, 'group2':true
组定义了一个相关的DragDrop对象的逻辑集合。 只有在与同一组中的其它DragDrop对象发生交互时...
组定义了一个相关的DragDrop对象的逻辑集合。 只有在与同一组中的其它DragDrop对象发生交互时，实例才会收到事件。这允许我们在需要时，使用DragDrop的单个实例来定义多个组。
DragDrop
hasOuterHandles : boolean
默认情况下，只有在相关联元素的区域中发生mousedown事件时，才发起拖拽操作。 在某些浏览器中...
默认情况下，只有在相关联元素的区域中发生mousedown事件时，才发起拖拽操作。 在某些浏览器中，如果上一次mouseup事件在window外部发生的时候， 浏览器将不能报告此次的mousedown事件， 此时将会产生一个bug。 如果定义了外部的句柄，此属性值将被设置为true。
DragDrop
id : String
与当前对象相关联的元素的id。 这就是我们所谓的关联元素("linked element")，因为此元素的大小和位置...
与当前对象相关联的元素的id。 这就是我们所谓的关联元素("linked element")，因为此元素的大小和位置 将被用来决定何时与拖动和放开的对象进行交互。
DragDrop
ignoreSelf : Boolean
设置为false，拖拽时，将会使DragDrop对象在悬在自身元素上方时触发drag事件。默认为...
设置为false，拖拽时，将会使DragDrop对象在悬在自身元素上方时触发drag事件。默认为true——DragDrop对象默认不会对自身触发drag事件。
DragDrop
invalidHandleClasses : Array
CSS类名数组，应用到那些被认为是非法拖拽句柄的对象上。
DragDrop
invalidHandleIds : Object
一个对象，它的属性名标志了被认为是非法的拖动手柄元素的ID。 一个非空属性值标志着这些ID是有效的...
一个对象，它的属性名标志了被认为是非法的拖动手柄元素的ID。 一个非空属性值标志着这些ID是有效的。 例如，为了阻止从ID为"foo"的元素上发起拖动操作，使用 :
                                {
    foo: true
}
DragDrop
invalidHandleTypes : Object
一个对象，它的属性名标记了那些不能作为拖拽句柄的HTML标签。 一个非空属性值标志着此标签是无效的...
一个对象，它的属性名标记了那些不能作为拖拽句柄的HTML标签。 一个非空属性值标志着此标签是无效的。 默认为以下值，它将阻止从元素发起拖拽操作：
                                {
    A: "A"
}
DragDrop
isTarget : boolean
默认情况下，任何实例都可以是拖放的目标。 可以设置isTarget为false以禁用。
DragDrop
maintainOffset : boolean
当我们重置约束时保持偏移量。 当你需要在页面变化时，元素保持与其父元素的相对位置关系...
当我们重置约束时保持偏移量。 当你需要在页面变化时，元素保持与其父元素的相对位置关系，设置此项为true。
DragDrop
moveOnly : boolean
当设置为true时，当这个DD对象在同组的其他DD对象上方时，将...
当设置为true时，当这个DD对象在同组的其他DD对象上方时，将不会接收到notification事件。默认为false。
DragDrop
padding : int[] An array containing the 4 padding values: [top, right, bottom, left]
当前拖拽对象的padding配置项， 用来计算与当前对象相交叉的区域。
DragDrop
primaryButtonOnly : boolean
默认情况下，drag和drop实例只会响应鼠标第一个键的点击操作 (右手习惯下的左键)...
默认情况下，drag和drop实例只会响应鼠标第一个键的点击操作 (右手习惯下的左键)。 设置为true，将响应浏览器传来的任何一个键的点击
DragDrop
resizeFrame : boolean
默认情况下，我们把拖动的框架设置成与需要拖动的元素一样大小 (这是为了让框架有效...
默认情况下，我们把拖动的框架设置成与需要拖动的元素一样大小 (这是为了让框架有效)。 如果我们需要一个不同的行为，我们可以关闭它。
DDProxy
scroll : boolean
设置为true时，当一个对象被拖拽到浏览器视区边缘时，将自动尝试...
设置为true时，当一个对象被拖拽到浏览器视区边缘时，将自动尝试滚动浏览器的窗口。 默认为true。
DD
xTicks : int[]
在指定一个水平的刻度/间距时， 元素自动吸附位置的像素数组...
在指定一个水平的刻度/间距时， 元素自动吸附位置的像素数组。 当你定义一个间距记号时，这个数组是自动生成的。 （译者注：此配置可以用来实现在水平方向上拖动时的一种磁性吸附效果，这个数组就是 自动吸附的像素刻度或者间距）。
DragDrop
yTicks : int[]
在指定一个垂直的刻度/间距时， 元素自动吸附位置的像素数组...
在指定一个垂直的刻度/间距时， 元素自动吸附位置的像素数组。 当你定义一个间距记号时，这个数组是自动生成的。 （译者注：此配置可以用来实现在垂直方向上拖动时的一种磁性吸附效果，这个数组就是 自动吸附的像素刻度或者间距）。
DragDrop

公共方法

Method Defined By
DragZone ( Mixed el , Object config )
参数:
  • el : Mixed
    容器元素
  • config : Object
返回值:
  • void
DragZone
addInvalidHandleClass ( string cssClass ) : void
允许你为那些不能发起拖拽操作的元素指定一个CSS类
允许你为那些不能发起拖拽操作的元素指定一个CSS类
参数:
  • cssClass : string
    你希望忽略的元素的样式class
返回值:
  • void
DragDrop
addInvalidHandleId ( string id ) : void
允许你指定一个拖拽句柄的孩子节点，使它不能发起拖拽操作
允许你指定一个拖拽句柄的孩子节点，使它不能发起拖拽操作
参数:
  • id : string
    你希望忽略的元素的id
返回值:
  • void
DragDrop
addInvalidHandleType ( string tagName ) : void
允许你指定一个在被点击时不能发起拖拽操作的标签名称。 这是被设计用来更方便地处理内嵌的link对象的...
允许你指定一个在被点击时不能发起拖拽操作的标签名称。 这是被设计用来更方便地处理内嵌的link对象的， 此对象被嵌在一个拖动句柄内部，当它被点击时需要做其他的事情，而不是开始拖拽操作。
参数:
  • tagName : string
    需要包含在内的元素类型
返回值:
  • void
DragDrop
addToGroup ( sGroup {string} ) : void
将当前实例添加到一个彼此相关的drag/drop对象组中。 每个实例至少属于一个组...
将当前实例添加到一个彼此相关的drag/drop对象组中。 每个实例至少属于一个组， 并且如果需要，可以同时属于任意多个组。
参数:
  • {string} : sGroup
    组名
返回值:
  • void
DragDrop
afterDragDrop ( Ext.dd.DragDrop target , Event e , String id ) : void
默认为一个空函数， 你可以定制一个特殊的操作，当一个合法的拖拽和放下动作发生之后执。。
默认为一个空函数， 你可以定制一个特殊的操作，当一个合法的拖拽和放下动作发生之后执行。
参数:
  • target : Ext.dd.DragDrop
    拖拽目标
  • e : Event
    事件对象
  • id : String
    被拖拽元素的id
返回值:
  • void
DragSource
afterDragEnter ( Ext.dd.DragDrop target , Event e , String id ) : void
默认为一个空函数， 你可以定制一个特殊的操作，在拖拽源已经进入到目标范围内时执行。。
默认为一个空函数， 你可以定制一个特殊的操作，在拖拽源已经进入到目标范围内时执行。
参数:
  • target : Ext.dd.DragDrop
    拖拽目标
  • e : Event
    拖拽元素
  • id : String
    拖拽元素的ID
返回值:
  • void
DragSource
afterDragOut ( Ext.dd.DragDrop target , Event e , String id ) : void
默认为一个空函数， 你可以定制一个特殊的操作，在拖拽源被拖出了目标的范围而没有被放下时执行..
默认为一个空函数， 你可以定制一个特殊的操作，在拖拽源被拖出了目标的范围而没有被放下时执行， 并且可以选择终止执行它。
参数:
  • target : Ext.dd.DragDrop
    拖拽目标
  • e : Event
    事件对象
  • id : String
    被拖拽元素的id
返回值:
  • void
DragSource
afterDragOver ( Ext.dd.DragDrop target , Event e , String id ) : void
默认为一个空函数， 你可以定制一个特殊的操作，当拖拽源被拖着滑过。。。
默认为一个空函数， 你可以定制一个特殊的操作，当拖拽源被拖着滑过目标的时候执行。
参数:
  • target : Ext.dd.DragDrop
    拖拽目标
  • e : Event
    事件对象
  • id : String
    被拖拽元素的id
返回值:
  • void
DragSource
afterInvalidDrop ( Event e , String id ) : void
默认为一个空函数， 你可以定制一个特殊的操作，当一个合法的放下动作。
默认为一个空函数， 你可以定制一个特殊的操作，当一个合法的放下动作发生之后执行 providing an implementation.
参数:
  • e : Event
    事件对象
  • id : String
    被拖拽元素的ID
返回值:
  • void
DragSource
afterRepair () : void
在一个非法放下操作进行repair动作之后调用。 默认会高亮显示this.dragData.ddel。
在一个非法放下操作进行repair动作之后调用。 默认会高亮显示this.dragData.ddel。
参数:
  • 无。
返回值:
  • void
DragZone
alignElWithMouse ( HTMLElement el , int iPageX , int iPageY ) : void
把元素位置设置到mousedown或者click事件发生的地方，保持鼠标在被点击元素之上的位置...
把元素位置设置到mousedown或者click事件发生的地方，保持鼠标在被点击元素之上的位置。 如果想把元素放置到不是鼠标点击的地方，请覆盖此方法。
参数:
  • el : HTMLElement
    需要移动的元素
  • iPageX : int
    mousedown或者drag事件的X坐标位置
  • iPageY : int
    mousedown或者drag事件的Y坐标位置
返回值:
  • void
DD
applyConfig () : void
应用那些传递给构造器的配置参数。此操作被期望在继承链的每一层上都能起作用...
应用那些传递给构造器的配置参数。此操作被期望在继承链的每一层上都能起作用。 这样一个DDProxy的实现类将会执行在DDProxy, DD和DragDrop上应用配置项的操作，此操作是为了使这些参数在每个对象上都可用。
参数:
  • 无。
返回值:
  • void
DD
autoOffset ( int iPageX , int iPageY ) : void
设置鼠标的偏移量为：相关联元素左上角到被点击元素位置之间的距离...
设置鼠标的偏移量为：相关联元素左上角到被点击元素位置之间的距离...
参数:
  • iPageX : int
    点击位置的X坐标值
  • iPageY : int
    点击位置的Y坐标值
返回值:
  • void
DD
b4Drag () : void
在onDrag事件之前触发的事件。重写了 Ext.dd.DragDrop中的对应属性。
在onDrag事件之前触发的事件。重写了 Ext.dd.DragDrop中的对应属性。
参数:
  • 无。
返回值:
  • void
DD
b4MouseDown () : void
在onMouseDown事件之前触发的事件。 覆盖了Ext.dd.DragDrop中的相同属性。
Event that fires prior to the onMouseDown event. Overrides Ext.dd.DragDrop.
参数:
  • 无。
返回值:
  • void
DD
beforeDragDrop ( Ext.dd.DragDrop target , Event e , String id ) : Boolean
默认为一个空函数， 你可以定制一个特殊的操作，在拖拽源被放置到拖拽目标上之前执行...
默认为一个空函数， 你可以定制一个特殊的操作，在拖拽源被放置到拖拽目标上之前执行， 并且可以选择终止执行onDragDrop方法。
参数:
  • target : Ext.dd.DragDrop
    拖拽目标
  • e : Event
    事件对象
  • id : String
    拖拽元素的ID
返回值:
  • Boolean
    isValid 当drag drop事件合法时为true；否则为false并终止操作
DragSource
beforeDragEnter ( Ext.dd.DragDrop target , Event e , String id ) : Boolean
默认为一个空函数， 你可以定制一个特殊的操作，在拖拽源开始进入目标的范围之前执行...
默认为一个空函数， 你可以定制一个特殊的操作，在拖拽源开始进入目标的范围之前执行， 并且可以选择终止执行onDragEnter方法。
参数:
  • target : Ext.dd.DragDrop
    拖拽目标
  • e : Event
    事件对象
  • id : String
    被拖拽元素的id
返回值:
  • Boolean
    isValid 如果drag事件合法，为true；否则为false并退出
DragSource
beforeDragOut ( Ext.dd.DragDrop target , Event e , String id ) : Boolean
默认为一个空函数， 你可以定制一个特殊的操作，在拖拽源滑过目标而没有被放下之前执行...
默认为一个空函数， 你可以定制一个特殊的操作，在拖拽源滑过目标而没有被放下之前执行， 并可以选择终止执行onDragOut方法。
参数:
  • target : Ext.dd.DragDrop
    拖拽目标
  • e : Event
    事件对象
  • id : String
    被拖拽元素的id
返回值:
  • Boolean
    isValid 如果drag事件合法，为true；否则为false并退出
DragSource
beforeDragOver ( Ext.dd.DragDrop target , Event e , String id ) : Boolean
默认为一个空函数， 你可以定制一个特殊的操作，当被拖拽的对象滑过拖拽目标的时候执行..
默认为一个空函数， 你可以定制一个特殊的操作，当被拖拽的对象滑过拖拽目标的时候执行， 并且可以选择终止执行onDragOver方法。
参数:
  • target : Ext.dd.DragDrop
    拖拽的目标
  • e : Event
    事件对象
  • id : String
    被拖拽元素的id
返回值:
  • Boolean
    isValid 如果drag事件合法，为true；否则为false并退出
DragSource
beforeInvalidDrop ( Ext.dd.DragDrop target , Event e , String id ) : Boolean
默认为一个空函数， 你可以定制一个特殊的操作，当一个合法的放下动作发生之前执。。
默认为一个空函数， 你可以定制一个特殊的操作，当一个合法的放下动作发生之前执行。
参数:
  • target : Ext.dd.DragDrop
    拖拽目标
  • e : Event
    事件对象
  • id : String
    被拖拽元素的id
返回值:
  • Boolean
    isValid 如果drag事件合法，为true；否则为false并退出
DragSource
cachePosition ( iPageX the , iPageY the ) : void
保存最后一次的位置，这样我们可以按需要重置约束和标记...
保存最后一次的位置，这样我们可以按需要重置约束和标记。 我们必须知道这一点，以使我们能够计算元素与其原来位置偏移的像素数。
参数:
  • the : iPageX
    当前水平位置（可选的，如果使用了它，只是为了方便之后不用查看该值）
  • the : iPageY
    当前垂直位置（可选的，如果使用了它，只是为了方便之后不用查看该值）
返回值:
  • void
DD
clearConstraints () : void
清除所有应用到此实例上的约束。 同时清除标记...
清除所有应用到此实例上的约束。 同时清除标记，因为此时它们不能脱离约束而独立存在。
参数:
  • 无。
返回值:
  • void
DragDrop
clearTicks () : void
清除此实例上定义的所有“吸附”间隔
清除此实例上定义的所有“吸附”间隔
参数:
  • 无。
返回值:
  • void
DragDrop
constrainTo ( Mixed constrainTo , [ Object/Number pad ], [ Boolean inContent ] ) : void
让元素的运动范围受限于另一个元素...
让元素的运动范围受限于另一个元素， 使用方法:

                                    var dd = new Ext.dd.DDProxy("dragDiv1", "proxytest",
                { dragElId: "existingProxyDiv" });
 dd.startDrag = function(){
     this.constrainTo("parent-id");
 };
或者你可以使用 Ext.Element 对象来初始化:
                                Ext.get("dragDiv1").initDDProxy("proxytest", {dragElId: "existingProxyDiv"}, {
     startDrag : function(){
         this.constrainTo("parent-id");
     }
 });
参数:
  • constrainTo : Mixed
    要绑定到的元素。
  • pad : Object/Number
    (可选) Pad提供了定义约束的"padding"参数的一个途径， 既可以是一个数字，以便进行均匀的填充 (4 等价于{left:4, right:4, top:4, bottom:4})， 或者一个包含填充尺寸数据的对象。例如： {right:10, bottom:10}
  • inContent : Boolean
    (可选) 将可拖动区域约束到元素的盒子模型内部(在填充和边框内部)
返回值:
  • void
DragDrop
createFrame () : void
创建代理元素，如果它还不存在
创建代理元素，如果它还不存在
参数:
  • 无。
返回值:
  • void
DDProxy
endDrag ( Event e ) : void
当结束对对象的拖动操作时触发
当结束对对象的拖动操作时触发
参数:
  • e : Event
    the mouseup event
返回值:
  • void
DragDrop
getDragData ( EventObject e ) : Object
当此容器中发生mousedown事件时调用。基于mouse down事件的合法拖拽的目标...
当此容器中发生mousedown事件时调用。基于mouse down事件的合法拖拽的目标，请查阅Ext.dd.Registry。重写此方法以提供你自己的查找逻辑 (例如：根据类名查找孩子节点)。为了使其它方法能工作，必须保证你返回的对象包含一个"ddel"属性 (包含一个HTML元素)。
参数:
  • e : EventObject
    鼠标按下时间
返回值:
  • Object
    dragData
DragZone
getDragEl () : HTMLElement
返回实际需要拖动元素的引用。默认情况下，这与html元素相同，但也可以指定到另一个元素...
返回实际需要拖动元素的引用。默认情况下，这与html元素相同，但也可以指定到另一个元素。可以在Ext.dd.DDProxy中找到这种例子。
参数:
  • 无。
返回值:
  • HTMLElement
    the html element
DragDrop
getEl () : HTMLElement
返回相关联的元素的引用
返回相关联的元素的引用
参数:
  • 无。
返回值:
  • HTMLElement
    html元素
DragDrop
getProxy () : Ext.dd.StatusProxy
返回拖拽源底层的 Ext.dd.StatusProxy
Returns the drag source's underlying Ext.dd.StatusProxy
参数:
  • 无。
返回值:
  • Ext.dd.StatusProxy
    代理的StatusProxy
DragSource
getRepairXY ( EventObject e ) : Array
在一个非法放下操作进行repair动作之前调用，将XY以动画效果设置到目标位置。 默认...
在一个非法放下操作进行repair动作之前调用，将XY以动画效果设置到目标位置。 默认返回this.dragData.ddel的XY属性。
参数:
  • e : EventObject
    鼠标按键弹起事件
返回值:
  • Array
    xy位置(例如：[100, 200])
DragZone
hideProxy () : void
隐藏拖拽源的 Ext.dd.StatusProxy
隐藏拖拽源的 Ext.dd.StatusProxy
参数:
  • 无。
返回值:
  • void
DragSource
init ( id the , String sGroup , object config ) : void
设置DragDrop对象。 必须在任何Ext.dd.DragDrop的子类构造器中调用
设置DragDrop对象。 必须在任何Ext.dd.DragDrop的子类构造器中调用
参数:
  • the : id
    相关联的元素id
  • sGroup : String
    相关元素的编组
  • config : object
    配置属性
返回值:
  • void
DragDrop
initFrame () : void
初始化拖动框架元素。 此方法必须在子类的构造器中调用。
初始化拖动框架元素。 此方法必须在子类的构造器中调用。
参数:
  • 无。
返回值:
  • void
DDProxy
initTarget ( id the , String sGroup , object config ) : void
Initializes Targeting functionality only... the object does not get a mousedown handler. （译者注：原始文档不完整，无法翻译此句。）
Initializes Targeting functionality only... the object does not get a mousedown handler. （译者注：原始文档不完整，无法翻译此句。）
参数:
  • the : id
    相关联元素的id
  • sGroup : String
    关联项目的编组
  • config : object
    配置属性
返回值:
  • void
DragDrop
isLocked () : boolean
如果此实例被锁定，或者drag drop管理器被锁定， 返回true...
如果此实例被锁定，或者drag drop管理器被锁定， 返回true (意味着此页面的所有拖拽操作都无效。)
参数:
  • 无。
返回值:
  • boolean
    如果此实例或者所有的drag/drop被锁定，返回true；否则返回false
DragDrop
isValidHandleChild ( HTMLElement node ) : boolean
检查被排除在外的标签列表，以确定此次点击是否应该被忽略
检查被排除在外的标签列表，以确定此次点击是否应该被忽略
参数:
  • node : HTMLElement
    需要检查的HTMLElement
返回值:
  • boolean
    如果这是一个合法的标签类型，返回true；如果不是，返回false
DragDrop
lock () : void
锁定此实例
锁定此实例
参数:
  • 无。
返回值:
  • void
DragDrop
onAvailable () : void
覆盖onAvailable方法，以便在决定了位置间隔之后执行所需的操作。
覆盖onAvailable方法，以便在决定了位置间隔之后执行所需的操作。
参数:
  • 无。
返回值:
  • void
DragDrop
onBeforeDrag ( Object data , Event e ) : Boolean
默认为一个空函数， 你可以定制一个特殊的操作，在发起drag事件之前执行...
默认为一个空函数， 你可以定制一个特殊的操作，在发起drag事件之前执行， 并且可以选择终止执行它。
参数:
  • data : Object
    包含任意数据的对象，可以在拖拽目标之间共享
  • e : Event
    事件对象
返回值:
  • Boolean
    isValid 如果drag事件合法，为true；否则为false并退出
DragSource
onDrag ( Event e ) : void
抽象方法，当拖动一个对象产生onMouseMove事件时调用。
抽象方法，当拖动一个对象产生onMouseMove事件时调用。
参数:
  • e : Event
    mousemove事件
返回值:
  • void
DragDrop
onDragDrop ( Event e , String|DragDrop[] id ) : void
抽象方法，在当前元素被拖放到另一个DragDrop对象上时调用。
抽象方法，在当前元素被拖放到另一个DragDrop对象上时调用。
参数:
  • e : Event
    mouseup事件
  • id : String|DragDrop[]
    在POINT模式下，这是被拖放到其上的那个元素的id（译者注：指目标元素id）。 在INTERSECT模式下，这是一个dd元素数组，当前元素被拖放到其上。
返回值:
  • void
DragDrop
onDragEnter ( Event e , String|DragDrop[] id ) : void
抽象方法，当此元素第一次从另外一个DragDrop对象上滑过时，此方法被调用。
抽象方法，当此元素第一次从另外一个DragDrop对象上滑过时，此方法被调用。
参数:
  • e : Event
    the mousemove event
  • id : String|DragDrop[]
    在POINT模式下，此id是被滑过的元素的id。 在INTERSECT模式下，这是一个或多个被滑过元素的数组。
返回值:
  • void
DragDrop
onDragOut ( Event e , String|DragDrop[] id ) : void
抽象方法，当我们不再拖动一个元素在另一个元素上滑过时触发
抽象方法，当我们不再拖动一个元素在另一个元素上滑过时触发
参数:
  • e : Event
    mousemove事件
  • id : String|DragDrop[]
    在POINT模式下，此id是被滑过的元素的id。 在INTERSECT模式下，这是dd元素的数组，鼠标不再停留在这些元素之上。
返回值:
  • void
DragDrop
onDragOver ( Event e , String|DragDrop[] id ) : void
抽象方法，当此元素从另一个DragDrop对象上滑过时调用。
抽象方法，当此元素从另一个DragDrop对象上滑过时调用。
参数:
  • e : Event
    mousemove事件
  • id : String|DragDrop[]
    在POINT模式下，此id是被滑过的元素的id。 在INTERSECT模式下，这是被滑过的dd元素数组。
返回值:
  • void
DragDrop
onInitDrag ( Number x , Number y ) : Boolean
一旦拖拽动作开始，调用此方法来初始化代理元素。 默认情况下，此方法将克...
一旦拖拽动作开始，调用此方法来初始化代理元素。 默认情况下，此方法将克隆 this.dragData.ddel
参数:
  • x : Number
    在被拖拽对象上点击时的x位置
  • y : Number
    在被拖拽对象上点击时的y位置
返回值:
  • Boolean
    继续拖拽动作时返回true，终止拖拽时返回false
DragZone
onInvalidDrop ( Event e ) : void
抽象方法，如果当前元素被拖动到了一个没有落下目标的区域时，此方法被调用
抽象方法，如果当前元素被拖动到了一个没有落下目标的区域时，此方法被调用
参数:
  • e : Event
    mouseup事件
返回值:
  • void
DragDrop
onMouseDown ( Event e ) : void
当一个drag/drop对象获得mousedown事件时的处理函数
当一个drag/drop对象获得mousedown事件时的处理函数
参数:
  • e : Event
    mousedown事件
返回值:
  • void
DragDrop
onMouseUp ( Event e ) : void
当在拖拽的对象松开鼠标时触发的事件处理器
当在拖拽的对象松开鼠标时触发的事件处理器
参数:
  • e : Event
    mouseup事件
返回值:
  • void
DragDrop
onStartDrag ( Number x , Number y ) : void
默认为一个空函数， 你可以定制一个特殊的操作，在发起拖拽事件开始时执行一次...
默认为一个空函数， 你可以定制一个特殊的操作，在发起拖拽事件开始时执行一次。 不能从此方法中终止拖拽操作。
参数:
  • x : Number
    点击拖拽对象的X坐标
  • y : Number
    点击拖拽对象的Y坐标
返回值:
  • void
DragSource
removeFromGroup ( string sGroup ) : void
从所提供的交互组中删除此元素
从所提供的交互组中删除此元素
参数:
  • sGroup : string
    需要从中删除的组
返回值:
  • void
DragDrop
removeInvalidHandleClass ( string cssClass ) : void
卸载一个描述非法状态的CSS类
Unsets an invalid css class
参数:
  • cssClass : string
    你想要重新启用的元素的css类。
返回值:
  • void
DragDrop
removeInvalidHandleId ( string id ) : void
卸载一个无效的handle id
Unsets an invalid handle id
参数:
  • id : string
    需要重新启用的元素的id the id of the element to re-enable
返回值:
  • void
DragDrop
removeInvalidHandleType ( string tagName ) : void
卸载由addInvalidHandleType方法添加的排除标签集合
卸载由addInvalidHandleType方法添加的排除标签集合
参数:
  • tagName : string
    需要排除的元素类型
返回值:
  • void
DragDrop
resetConstraints ( boolean maintainOffset ) : void
当你手动重新设置一个dd元素的位置时，必须调用resetConstraints方法。
当你手动重新设置一个dd元素的位置时，必须调用resetConstraints方法。
参数:
  • maintainOffset : boolean
返回值:
  • void
DragDrop
setDelta ( int iDeltaX , int iDeltaY ) : void
设置鼠标的偏移量。 你可以直接调用此方法，以强制把鼠标设置到一个特定的位置 (例如...
设置鼠标的偏移量。 你可以直接调用此方法，以强制把鼠标设置到一个特定的位置 (例如：传递0,0可以将它设置到对象的中心点位置)
参数:
  • iDeltaX : int
    和左端的距离
  • iDeltaY : int
    和顶端的距离
返回值:
  • void
DD
setDragElId ( id {string} ) : void
允许你指定一个元素，不是相关联的元素本身，在拖动时跟随鼠标移动
允许你指定一个元素，不是相关联的元素本身，在拖动时跟随鼠标移动 （译者注：也就是一个”影子对象“，拖动的时候，原来的元素不动，让和它本身一样的 一个”克隆体“来负责跟随鼠标移动）
参数:
  • {string} : id
    发起拖动操作的元素id
返回值:
  • void
DragDrop
setDragElPos ( int iPageX , int iPageY ) : void
把拖拽的元素位置设置到mousedown或者click事件发生的地方，保持鼠标在被点击元素之上的位置...
把拖拽的元素位置设置到mousedown或者click事件发生的地方，保持鼠标在被点击元素之上的位置。 如果想把元素放置到不是鼠标所在的位置，请覆盖此方法。
参数:
  • iPageX : int
    鼠标按下或者拖拽时的横坐标
  • iPageY : int
    鼠标按下或者拖拽时的纵坐标
返回值:
  • void
DD
setHandleElId ( id {string} ) : void
允许你指定关联元素的一个孩子节点，以用来发起拖动操作。 这种情况的一个例子是，你有包含text和link内容的div...
允许你指定关联元素的一个孩子节点，以用来发起拖动操作。 这种情况的一个例子是，你有包含text和link内容的div。 点击内容区域的任何地方，都会正常地启动拖动操作。使用此方法可以指定从div内容中的任何一个元素发起拖拽操作。
参数:
  • {string} : id
    将被用来发起拖拽操作的元素id。
返回值:
  • void
DragDrop
setInitPosition ( int diffX , int diffY ) : void
存储相关元素初始化的位置。
存储相关元素初始化的位置。
参数:
  • diffX : int
    X方向偏移，默认为0
  • diffY : int
    Y方向偏移，默认为0
返回值:
  • void
DragDrop
setOuterHandleElId ( id the ) : void
允许你设置一个相关元素外部的元素，作为拖动的手柄
允许你设置一个相关元素外部的元素，作为拖动的手柄
参数:
  • the : id
    元素的id，此元素将被用作发起拖动操作
返回值:
  • void
DragDrop
setPadding ( int iTop , int iRight , int iBot , int iLeft ) : void
配置拖拽时目标区域的填充像素数。为计算目标区域有效地扩展（或者缩小）虚拟对象的大小...
配置拖拽时目标区域的填充像素数。为计算目标区域有效地扩展（或者缩小）虚拟对象的大小。支持css-style快捷方式，如果只传递了一个参数，所有的边界将会拥有相同的填充；如果传递了两个参数，top和bottom会使用第一个参数， left和right会使用第二个参数。（译者注：这里的规则与CSS设置padding参数的规则是一样的，完全可以用CSS的规则来配置此参数。）
参数:
  • iTop : int
    Top pad
  • iRight : int
    Right pad
  • iBot : int
    Bot pad
  • iLeft : int
    Left pad
返回值:
  • void
DragDrop
setXConstraint ( int iLeft , int iRight , int iTickSize ) : void
默认情况下，元素可以被拖拽并放置到屏幕上的任意位置。 使用此方法来限制元素在水平方向上的运动...
默认情况下，元素可以被拖拽并放置到屏幕上的任意位置。 使用此方法来限制元素在水平方向上的运动。 如果你想锁定在y轴上的拖动，传递参数0,0
参数:
  • iLeft : int
    元素可以向左移动的像素数
  • iRight : int
    元素可以向右移动的像素数
  • iTickSize : int
    可选参数，指定元素每次以iTickSize配置项指定的像素数运动。
返回值:
  • void
DragDrop
setYConstraint ( int iUp , int iDown , int iTickSize ) : void
默认情况下，元素可以被拖放到屏幕上的任意位置。 设置此项以限制元素在垂直方向上的运动...
默认情况下，元素可以被拖放到屏幕上的任意位置。 设置此项以限制元素在垂直方向上的运动。 如果我们需要锁定元素在x轴方向上的运动，传递参数0,0
参数:
  • iUp : int
    元素可以向上移动的像素数
  • iDown : int
    元素可以向下移动的像素数
  • iTickSize : int
    可选参数，指定元素每次以iTickSize配置项指定的像素数运动。
返回值:
  • void
DragDrop
startDrag ( int X , int Y ) : void
抽象方法，当点击一个drag/drop对象，并且遇到拖动或者mousedown事件的那一刻， 此方法被调用。
抽象方法，当点击一个drag/drop对象，并且遇到拖动或者mousedown事件的那一刻， 此方法被调用。
参数:
  • X : int
    点击的位置
  • Y : int
    点击的位置
返回值:
  • void
DragDrop
toString () : string
toString方法
toString method
参数:
  • 无。
返回值:
  • string
    dd对象的字符串表述
DragDrop
unlock () : void
Unlock this instace
为此实例解锁
参数:
  • 无。
返回值:
  • void
DragDrop
unreg () : void
删除当前元素上所有拖拽和落下钩子(hook)
删除当前元素上所有拖拽和落下钩子(hook)
参数:
  • 无。
返回值:
  • void
DragDrop

公共事件

该类没有公共事件。


DragDrop
    DDTarget
      DropTarget

Class Ext.dd.DropTarget

包: | Ext.dd
定义类的文件: | DropTarget.js
类: | DropTarget
子类: | DropZone
继承自: | DDTarget
一个简单的类，提供所需的基本实现，让一个元素成为一个拖拽的目标， 可以把被拖拽的元素放置到其中。 放下元素时没有任何反应，除非为notifyDrop提供一个实现。

配置项

Config Options |  | Defined By
 | ddGroup : String 当前对象所属的有名称的拖拽编组。 如果指定了一个编组，那么此对象只会与同一组中的其它拖拽元素产生交互... 当前对象所属的指定拖拽编组。 如果指定了一个编组，那么此对象只会与同一组中的其它拖拽元素产生交互 (默认值为 undefined). | DropTarget
 | dropAllowed : String 当允许放开被拖拽的对象时，返回给拖拽源（拖拽的对象）的CSS样式 (默认值为 "x-dd-drop-ok")。 | DropTarget
 | dropNotAllowed : String 当不允许放下时返回到拖拽源的CSS样式 (默认值为 "x-dd-drop-nodrop")。 | DropTarget
 | overClass : String 当拖拽源对象从目标元素上滑过时应用到目标元素的CSS样式 (默认值为 "")。 | DropTarget

公共属性

Property Defined By
available : boolean
当相关联的dom元素可以访问之前availabe属性值都是false。
DragDrop
config : object
传递给构造器的配置参数
DragDrop
defaultPadding : Object
为"constrainTo"元素提供默认的填充约束 (默认值为 {left: 0, right:0, top:0, bottom:0})。
DragDrop
groups : object An object in the format {'group1':true, 'group2':true
组定义了一个相关的DragDrop对象的逻辑集合。 只有在与同一组中的其它DragDrop对象发生交互时...
组定义了一个相关的DragDrop对象的逻辑集合。 只有在与同一组中的其它DragDrop对象发生交互时，实例才会收到事件。这允许我们在需要时，使用DragDrop的单个实例来定义多个组。
DragDrop
hasOuterHandles : boolean
默认情况下，只有在相关联元素的区域中发生mousedown事件时，才发起拖拽操作。 在某些浏览器中...
默认情况下，只有在相关联元素的区域中发生mousedown事件时，才发起拖拽操作。 在某些浏览器中，如果上一次mouseup事件在window外部发生的时候， 浏览器将不能报告此次的mousedown事件， 此时将会产生一个bug。 如果定义了外部的句柄，此属性值将被设置为true。
DragDrop
id : String
与当前对象相关联的元素的id。 这就是我们所谓的关联元素("linked element")，因为此元素的大小和位置...
与当前对象相关联的元素的id。 这就是我们所谓的关联元素("linked element")，因为此元素的大小和位置 将被用来决定何时与拖动和放开的对象进行交互。
DragDrop
ignoreSelf : Boolean
设置为false，拖拽时，将会使DragDrop对象在悬在自身元素上方时触发drag事件。默认为...
设置为false，拖拽时，将会使DragDrop对象在悬在自身元素上方时触发drag事件。默认为true——DragDrop对象默认不会对自身触发drag事件。
DragDrop
invalidHandleClasses : Array
CSS类名数组，应用到那些被认为是非法拖拽句柄的对象上。
DragDrop
invalidHandleIds : Object
一个对象，它的属性名标志了被认为是非法的拖动手柄元素的ID。 一个非空属性值标志着这些ID是有效的...
一个对象，它的属性名标志了被认为是非法的拖动手柄元素的ID。 一个非空属性值标志着这些ID是有效的。 例如，为了阻止从ID为"foo"的元素上发起拖动操作，使用 :
                                {
    foo: true
}
DragDrop
invalidHandleTypes : Object
一个对象，它的属性名标记了那些不能作为拖拽句柄的HTML标签。 一个非空属性值标志着此标签是无效的...
一个对象，它的属性名标记了那些不能作为拖拽句柄的HTML标签。 一个非空属性值标志着此标签是无效的。 默认为以下值，它将阻止从元素发起拖拽操作：
                                {
    A: "A"
}
DragDrop
isTarget : boolean
默认情况下，任何实例都可以是拖放的目标。 可以设置isTarget为false以禁用。
DragDrop
maintainOffset : boolean
当我们重置约束时保持偏移量。 当你需要在页面变化时，元素保持与其父元素的相对位置关系...
当我们重置约束时保持偏移量。 当你需要在页面变化时，元素保持与其父元素的相对位置关系，设置此项为true。
DragDrop
moveOnly : boolean
当设置为true时，当这个DD对象在同组的其他DD对象上方时，将...
当设置为true时，当这个DD对象在同组的其他DD对象上方时，将不会接收到notification事件。默认为false。
DragDrop
padding : int[] An array containing the 4 padding values: [top, right, bottom, left]
当前拖拽对象的padding配置项， 用来计算与当前对象相交叉的区域。
DragDrop
primaryButtonOnly : boolean
默认情况下，drag和drop实例只会响应鼠标第一个键的点击操作 (右手习惯下的左键)...
默认情况下，drag和drop实例只会响应鼠标第一个键的点击操作 (右手习惯下的左键)。 设置为true，将响应浏览器传来的任何一个键的点击
DragDrop
xTicks : int[]
在指定一个水平的刻度/间距时， 元素自动吸附位置的像素数组...
在指定一个水平的刻度/间距时， 元素自动吸附位置的像素数组。 当你定义一个间距记号时，这个数组是自动生成的。 （译者注：此配置可以用来实现在水平方向上拖动时的一种磁性吸附效果，这个数组就是 自动吸附的像素刻度或者间距）。
DragDrop
yTicks : int[]
在指定一个垂直的刻度/间距时， 元素自动吸附位置的像素数组...
在指定一个垂直的刻度/间距时， 元素自动吸附位置的像素数组。 当你定义一个间距记号时，这个数组是自动生成的。 （译者注：此配置可以用来实现在垂直方向上拖动时的一种磁性吸附效果，这个数组就是 自动吸附的像素刻度或者间距）。
DragDrop

公共方法

Method Defined By
DropTarget ( Mixed el , Object config )
参数:
  • el : Mixed
    容器元素
  • config : Object
返回值:
  • void
DropTarget
addInvalidHandleClass ( string cssClass ) : void
允许你为那些不能发起拖拽操作的元素指定一个CSS类
允许你为那些不能发起拖拽操作的元素指定一个CSS类
参数:
  • cssClass : string
    你希望忽略的元素的样式class
返回值:
  • void
DragDrop
addInvalidHandleId ( string id ) : void
允许你指定一个拖拽句柄的孩子节点，使它不能发起拖拽操作
允许你指定一个拖拽句柄的孩子节点，使它不能发起拖拽操作
参数:
  • id : string
    你希望忽略的元素的id
返回值:
  • void
DragDrop
addInvalidHandleType ( string tagName ) : void
允许你指定一个在被点击时不能发起拖拽操作的标签名称。 这是被设计用来更方便地处理内嵌的link对象的...
允许你指定一个在被点击时不能发起拖拽操作的标签名称。 这是被设计用来更方便地处理内嵌的link对象的， 此对象被嵌在一个拖动句柄内部，当它被点击时需要做其他的事情，而不是开始拖拽操作。
参数:
  • tagName : string
    需要包含在内的元素类型
返回值:
  • void
DragDrop
addToGroup ( sGroup {string} ) : void
将当前实例添加到一个彼此相关的drag/drop对象组中。 每个实例至少属于一个组...
将当前实例添加到一个彼此相关的drag/drop对象组中。 每个实例至少属于一个组， 并且如果需要，可以同时属于任意多个组。
参数:
  • {string} : sGroup
    组名
返回值:
  • void
DragDrop
applyConfig () : void
应用那些传递给构造器的配置参数。此操作被期望在继承链的每一层上都能起作用...
应用那些传递给构造器的配置参数。此操作被期望在继承链的每一层上都能起作用。 这样一个DDProxy的实现类将会执行在DDProxy, DD和DragDrop上应用配置项的操作，此操作是为了使这些参数在每个对象上都可用。
参数:
  • 无。
返回值:
  • void
DragDrop
clearConstraints () : void
清除所有应用到此实例上的约束。 同时清除标记...
清除所有应用到此实例上的约束。 同时清除标记，因为此时它们不能脱离约束而独立存在。
参数:
  • 无。
返回值:
  • void
DragDrop
clearTicks () : void
清除此实例上定义的所有“吸附”间隔
清除此实例上定义的所有“吸附”间隔
参数:
  • 无。
返回值:
  • void
DragDrop
constrainTo ( Mixed constrainTo , [ Object/Number pad ], [ Boolean inContent ] ) : void
让元素的运动范围受限于另一个元素...
让元素的运动范围受限于另一个元素， 使用方法:

                                    var dd = new Ext.dd.DDProxy("dragDiv1", "proxytest",
                { dragElId: "existingProxyDiv" });
 dd.startDrag = function(){
     this.constrainTo("parent-id");
 };
或者你可以使用 Ext.Element 对象来初始化:
                                Ext.get("dragDiv1").initDDProxy("proxytest", {dragElId: "existingProxyDiv"}, {
     startDrag : function(){
         this.constrainTo("parent-id");
     }
 });
参数:
  • constrainTo : Mixed
    要绑定到的元素。
  • pad : Object/Number
    (可选) Pad提供了定义约束的"padding"参数的一个途径， 既可以是一个数字，以便进行均匀的填充 (4 等价于{left:4, right:4, top:4, bottom:4})， 或者一个包含填充尺寸数据的对象。例如： {right:10, bottom:10}
  • inContent : Boolean
    (可选) 将可拖动区域约束到元素的盒子模型内部(在填充和边框内部)
返回值:
  • void
DragDrop
endDrag ( Event e ) : void
当结束对对象的拖动操作时触发
当结束对对象的拖动操作时触发
参数:
  • e : Event
    the mouseup event
返回值:
  • void
DragDrop
getDragEl () : HTMLElement
返回实际需要拖动元素的引用。默认情况下，这与html元素相同，但也可以指定到另一个元素...
返回实际需要拖动元素的引用。默认情况下，这与html元素相同，但也可以指定到另一个元素。可以在Ext.dd.DDProxy中找到这种例子。
参数:
  • 无。
返回值:
  • HTMLElement
    the html element
DragDrop
getEl () : HTMLElement
返回相关联的元素的引用
返回相关联的元素的引用
参数:
  • 无。
返回值:
  • HTMLElement
    html元素
DragDrop
init ( id the , String sGroup , object config ) : void
设置DragDrop对象。 必须在任何Ext.dd.DragDrop的子类构造器中调用
设置DragDrop对象。 必须在任何Ext.dd.DragDrop的子类构造器中调用
参数:
  • the : id
    相关联的元素id
  • sGroup : String
    相关元素的编组
  • config : object
    配置属性
返回值:
  • void
DragDrop
initTarget ( id the , String sGroup , object config ) : void
Initializes Targeting functionality only... the object does not get a mousedown handler. （译者注：原始文档不完整，无法翻译此句。）
Initializes Targeting functionality only... the object does not get a mousedown handler. （译者注：原始文档不完整，无法翻译此句。）
参数:
  • the : id
    相关联元素的id
  • sGroup : String
    关联项目的编组
  • config : object
    配置属性
返回值:
  • void
DragDrop
isLocked () : boolean
如果此实例被锁定，或者drag drop管理器被锁定， 返回true...
如果此实例被锁定，或者drag drop管理器被锁定， 返回true (意味着此页面的所有拖拽操作都无效。)
参数:
  • 无。
返回值:
  • boolean
    如果此实例或者所有的drag/drop被锁定，返回true；否则返回false
DragDrop
isValidHandleChild ( HTMLElement node ) : boolean
检查被排除在外的标签列表，以确定此次点击是否应该被忽略
检查被排除在外的标签列表，以确定此次点击是否应该被忽略
参数:
  • node : HTMLElement
    需要检查的HTMLElement
返回值:
  • boolean
    如果这是一个合法的标签类型，返回true；如果不是，返回false
DragDrop
lock () : void
锁定此实例
锁定此实例
参数:
  • 无。
返回值:
  • void
DragDrop
notifyDrop ( Ext.dd.DragSource source , Event e , Object data ) : Boolean
当一个源对象（指被拖动的对象）被放置到目标对象上时，此函数由 Ext.dd.DragSource 调用一次，以通知目标对象...
当一个源对象（指被拖动的对象）被放置到目标对象上时，此函数由Ext.dd.DragSource调用一次，以通知目标对象。 此函数的没有默认实现，只是返回false， 所以你必须提供此方法的一个实现用来处理drop事件，方法返回true以便拖拽源不进行修正(repair)操作。
参数:
  • source : Ext.dd.DragSource
    悬置在drop目标上的drag源
  • e : Event
    事件
  • data : Object
    包含drag源提供的任意数据的对象
返回值:
  • Boolean
    drop有效时为true，否则false
DropTarget
notifyEnter ( Ext.dd.DragSource source , Event e , Object data ) : String
当一个源对象（指被拖动的对象）被拖拽进入了目标对象的范围时，此函数由 Ext.dd.DragSource 调用一次，以通知目标对象...
当一个源对象（指被拖动的对象）被拖拽进入了目标对象的范围时，此函数由Ext.dd.DragSource调用一次，以通知目标对象。默认的实现只是简单地把overClass配置项(如果有指定)中指定的CSS样式应用到目标对象（被放置到的对象），并返回dropAllowed配置项的值。如果放下对象时需要进行校验，必须重写从方法。
参数:
  • source : Ext.dd.DragSource
    悬置在drop目标上的drag源
  • e : Event
    事件
  • data : Object
    包含drag源提供的任意数据的对象
返回值:
  • String
    从drop状态回到源状态的CSS的class，使{@link Ext.dd.StatusProxy}得以更新
DropTarget
notifyOut ( Ext.dd.DragSource source , Event e , Object data ) : void
当一个源对象（指被拖动的对象）被拖出了目标对象而没有放下的时候，此函数由 Ext.dd.DragSource 调用一次，以通知目标对象...
当一个源对象（指被拖动的对象）被拖出了目标对象的范围而没有放下的时候，此函数由Ext.dd.DragSource调用一次，以通知目标对象。默认的实现只是简单地把overClass配置项(如果有指定)中指定的CSS样式从被放置到的对象（就是目标对象）上删除。
参数:
  • source : Ext.dd.DragSource
    悬置在drop目标上的drag源
  • e : Event
    事件
  • data : Object
    包含drag源提供的任意数据的对象
返回值:
  • void
DropTarget
notifyOver ( Ext.dd.DragSource source , Event e , Object data ) : String
当一个源对象（指被拖动的对象）被拖拽到目标对象之上时，此函数由 Ext.dd.DragSource 不断调用。每次拖拽源对象被拖拽到目标之上...
当一个源对象（指被拖动的对象）被拖拽到目标对象之上时，此函数由Ext.dd.DragSource不断调用。每次拖拽源对象被拖拽到目标之上时此方法都会被调用。默认的实现只是简单地返回dropAllowed配置项的值。
参数:
  • source : Ext.dd.DragSource
    悬置在drop目标上的drag源
  • e : Event
    事件
  • data : Object
    包含drag源提供的任意数据的对象
返回值:
  • String
    从drop状态回到源状态的CSS的class，使{@link Ext.dd.StatusProxy}得以更新
DropTarget
onAvailable () : void
覆盖onAvailable方法，以便在决定了位置间隔之后执行所需的操作。
覆盖onAvailable方法，以便在决定了位置间隔之后执行所需的操作。
参数:
  • 无。
返回值:
  • void
DragDrop
onDrag ( Event e ) : void
抽象方法，当拖动一个对象产生onMouseMove事件时调用。
抽象方法，当拖动一个对象产生onMouseMove事件时调用。
参数:
  • e : Event
    mousemove事件
返回值:
  • void
DragDrop
onDragDrop ( Event e , String|DragDrop[] id ) : void
抽象方法，在当前元素被拖放到另一个DragDrop对象上时调用。
抽象方法，在当前元素被拖放到另一个DragDrop对象上时调用。
参数:
  • e : Event
    mouseup事件
  • id : String|DragDrop[]
    在POINT模式下，这是被拖放到其上的那个元素的id（译者注：指目标元素id）。 在INTERSECT模式下，这是一个dd元素数组，当前元素被拖放到其上。
返回值:
  • void
DragDrop
onDragEnter ( Event e , String|DragDrop[] id ) : void
抽象方法，当此元素第一次从另外一个DragDrop对象上滑过时，此方法被调用。
抽象方法，当此元素第一次从另外一个DragDrop对象上滑过时，此方法被调用。
参数:
  • e : Event
    the mousemove event
  • id : String|DragDrop[]
    在POINT模式下，此id是被滑过的元素的id。 在INTERSECT模式下，这是一个或多个被滑过元素的数组。
返回值:
  • void
DragDrop
onDragOut ( Event e , String|DragDrop[] id ) : void
抽象方法，当我们不再拖动一个元素在另一个元素上滑过时触发
抽象方法，当我们不再拖动一个元素在另一个元素上滑过时触发
参数:
  • e : Event
    mousemove事件
  • id : String|DragDrop[]
    在POINT模式下，此id是被滑过的元素的id。 在INTERSECT模式下，这是dd元素的数组，鼠标不再停留在这些元素之上。
返回值:
  • void
DragDrop
onDragOver ( Event e , String|DragDrop[] id ) : void
抽象方法，当此元素从另一个DragDrop对象上滑过时调用。
抽象方法，当此元素从另一个DragDrop对象上滑过时调用。
参数:
  • e : Event
    mousemove事件
  • id : String|DragDrop[]
    在POINT模式下，此id是被滑过的元素的id。 在INTERSECT模式下，这是被滑过的dd元素数组。
返回值:
  • void
DragDrop
onInvalidDrop ( Event e ) : void
抽象方法，如果当前元素被拖动到了一个没有落下目标的区域时，此方法被调用
抽象方法，如果当前元素被拖动到了一个没有落下目标的区域时，此方法被调用
参数:
  • e : Event
    mouseup事件
返回值:
  • void
DragDrop
onMouseDown ( Event e ) : void
当一个drag/drop对象获得mousedown事件时的处理函数
当一个drag/drop对象获得mousedown事件时的处理函数
参数:
  • e : Event
    mousedown事件
返回值:
  • void
DragDrop
onMouseUp ( Event e ) : void
当在拖拽的对象松开鼠标时触发的事件处理器
当在拖拽的对象松开鼠标时触发的事件处理器
参数:
  • e : Event
    mouseup事件
返回值:
  • void
DragDrop
removeFromGroup ( string sGroup ) : void
从所提供的交互组中删除此元素
从所提供的交互组中删除此元素
参数:
  • sGroup : string
    需要从中删除的组
返回值:
  • void
DragDrop
removeInvalidHandleClass ( string cssClass ) : void
卸载一个描述非法状态的CSS类
Unsets an invalid css class
参数:
  • cssClass : string
    你想要重新启用的元素的css类。
返回值:
  • void
DragDrop
removeInvalidHandleId ( string id ) : void
卸载一个无效的handle id
Unsets an invalid handle id
参数:
  • id : string
    需要重新启用的元素的id the id of the element to re-enable
返回值:
  • void
DragDrop
removeInvalidHandleType ( string tagName ) : void
卸载由addInvalidHandleType方法添加的排除标签集合
卸载由addInvalidHandleType方法添加的排除标签集合
参数:
  • tagName : string
    需要排除的元素类型
返回值:
  • void
DragDrop
resetConstraints ( boolean maintainOffset ) : void
当你手动重新设置一个dd元素的位置时，必须调用resetConstraints方法。
当你手动重新设置一个dd元素的位置时，必须调用resetConstraints方法。
参数:
  • maintainOffset : boolean
返回值:
  • void
DragDrop
setDragElId ( id {string} ) : void
允许你指定一个元素，不是相关联的元素本身，在拖动时跟随鼠标移动
允许你指定一个元素，不是相关联的元素本身，在拖动时跟随鼠标移动 （译者注：也就是一个”影子对象“，拖动的时候，原来的元素不动，让和它本身一样的 一个”克隆体“来负责跟随鼠标移动）
参数:
  • {string} : id
    发起拖动操作的元素id
返回值:
  • void
DragDrop
setHandleElId ( id {string} ) : void
允许你指定关联元素的一个孩子节点，以用来发起拖动操作。 这种情况的一个例子是，你有包含text和link内容的div...
允许你指定关联元素的一个孩子节点，以用来发起拖动操作。 这种情况的一个例子是，你有包含text和link内容的div。 点击内容区域的任何地方，都会正常地启动拖动操作。使用此方法可以指定从div内容中的任何一个元素发起拖拽操作。
参数:
  • {string} : id
    将被用来发起拖拽操作的元素id。
返回值:
  • void
DragDrop
setInitPosition ( int diffX , int diffY ) : void
存储相关元素初始化的位置。
存储相关元素初始化的位置。
参数:
  • diffX : int
    X方向偏移，默认为0
  • diffY : int
    Y方向偏移，默认为0
返回值:
  • void
DragDrop
setOuterHandleElId ( id the ) : void
允许你设置一个相关元素外部的元素，作为拖动的手柄
允许你设置一个相关元素外部的元素，作为拖动的手柄
参数:
  • the : id
    元素的id，此元素将被用作发起拖动操作
返回值:
  • void
DragDrop
setPadding ( int iTop , int iRight , int iBot , int iLeft ) : void
配置拖拽时目标区域的填充像素数。为计算目标区域有效地扩展（或者缩小）虚拟对象的大小...
配置拖拽时目标区域的填充像素数。为计算目标区域有效地扩展（或者缩小）虚拟对象的大小。支持css-style快捷方式，如果只传递了一个参数，所有的边界将会拥有相同的填充；如果传递了两个参数，top和bottom会使用第一个参数， left和right会使用第二个参数。（译者注：这里的规则与CSS设置padding参数的规则是一样的，完全可以用CSS的规则来配置此参数。）
参数:
  • iTop : int
    Top pad
  • iRight : int
    Right pad
  • iBot : int
    Bot pad
  • iLeft : int
    Left pad
返回值:
  • void
DragDrop
setXConstraint ( int iLeft , int iRight , int iTickSize ) : void
默认情况下，元素可以被拖拽并放置到屏幕上的任意位置。 使用此方法来限制元素在水平方向上的运动...
默认情况下，元素可以被拖拽并放置到屏幕上的任意位置。 使用此方法来限制元素在水平方向上的运动。 如果你想锁定在y轴上的拖动，传递参数0,0
参数:
  • iLeft : int
    元素可以向左移动的像素数
  • iRight : int
    元素可以向右移动的像素数
  • iTickSize : int
    可选参数，指定元素每次以iTickSize配置项指定的像素数运动。
返回值:
  • void
DragDrop
setYConstraint ( int iUp , int iDown , int iTickSize ) : void
默认情况下，元素可以被拖放到屏幕上的任意位置。 设置此项以限制元素在垂直方向上的运动...
默认情况下，元素可以被拖放到屏幕上的任意位置。 设置此项以限制元素在垂直方向上的运动。 如果我们需要锁定元素在x轴方向上的运动，传递参数0,0
参数:
  • iUp : int
    元素可以向上移动的像素数
  • iDown : int
    元素可以向下移动的像素数
  • iTickSize : int
    可选参数，指定元素每次以iTickSize配置项指定的像素数运动。
返回值:
  • void
DragDrop
startDrag ( int X , int Y ) : void
抽象方法，当点击一个drag/drop对象，并且遇到拖动或者mousedown事件的那一刻， 此方法被调用。
抽象方法，当点击一个drag/drop对象，并且遇到拖动或者mousedown事件的那一刻， 此方法被调用。
参数:
  • X : int
    点击的位置
  • Y : int
    点击的位置
返回值:
  • void
DragDrop
toString () : string
toString方法
toString method
参数:
  • 无。
返回值:
  • string
    dd对象的字符串表述
DragDrop
unlock () : void
Unlock this instace
为此实例解锁
参数:
  • 无。
返回值:
  • void
DragDrop
unreg () : void
删除当前元素上所有拖拽和落下钩子(hook)
删除当前元素上所有拖拽和落下钩子(hook)
参数:
  • 无。
返回值:
  • void
DragDrop

公共事件

该类没有公共事件。


DragDrop
    DDTarget
      DropTarget
        DropZone

Class Ext.dd.DropZone

包: | Ext.dd
定义类的文件: | DropZone.js
类: | DropZone
子类: | TreeDropZone
继承自: | DropTarget

该类为DD实例提供一个容器，它可以为多个拖拽目标子节点提供代理。

默认情况下，该类要求所有可以接收放开动作（把一个拖拽的对象放到其上）的子节点必须通过Ext.dd.Registry进行注册。 但是，更简便的方法是允许DropZone管理任何数量的目标元素，需要在配置DropZone附带，用来侦测传递来的鼠标事件，看它是否发生在一个元素或元素类。通过使用事件的 getTarget 方法来方便地确定以 Ext.DomQuery 选择器为基础的节点。

一旦DropZone侦测到getTargetFromEvent，鼠标已经停在drop目标的上方，则目标将被当作第一个参数传递给 onNodeEnter、 onNodeOver、 onNodeOut、 onNodeDrop。 你可以使用这些方法的实现来配置DropZone实例，用以提供为这些事件的程序指定的行为，从而更新程序状态和UI状态。

例如，使GridPanel成为合作目标的DragZone的例子，以下技术可能被用到：

            myGridPanel.on('render', function() {
    myGridPanel.dropZone = new Ext.dd.DropZone(myGridPanel.getView().scroller, {

//     如果鼠标经过grid行, 返回那个节点. 该节点
//      以"target"参数的形式提供给所有的"onNodeXXXX"节点事件处理方法
        getTargetFromEvent: function(e) {
            return e.getTarget(myGridPanel.getView().rowSelector);
        },

//      进入目标节点，高亮该节点。
        onNodeEnter : function(target, dd, e, data){
            Ext.fly(target).addClass('my-row-highlight-class');
        },

//      离开目标节点，取消高亮。
        onNodeOut : function(target, dd, e, data){
            Ext.fly(target).removeClass('my-row-highlight-class');
        },

//      在目标节点上方时，返回默认的允许drop的样式类，在
//      drag代理上添加一个“对钩”图标。
        onNodeOver : function(target, dd, e, data){
            return Ext.dd.DropZone.prototype.dropAllowed;
        },

//      在节点drop时，我们可通过以侦测目标来找出作为真正的drag数据目标的底层应用对象。
//      当前情况下，它是GridPanel的store的一条记录。
//      我们可以使用DragZone的getDragData创建的数据来读取
//      任何我们决定附加在DragZone的getDragData方法的数据。

        onNodeDrop : function(target, dd, e, data){
            var rowIndex = myGridPanel.getView().findRowIndex(target);
            var r = myGridPanel.getStore().getAt(rowIndex);
            Ext.Msg.alert('Drop gesture', 'Dropped Record id ' + data.draggedRecord.id +
                ' on Record id ' + r.id);
            return true;
        }
    });
}
关于详细的创建与DropZone配套的DragZone，参见 DragZone 文档。

配置项

Config Options |  | Defined By
 | ddGroup : String 当前对象所属的有名称的拖拽编组。 如果指定了一个编组，那么此对象只会与同一组中的其它拖拽元素产生交互... 当前对象所属的指定拖拽编组。 如果指定了一个编组，那么此对象只会与同一组中的其它拖拽元素产生交互 (默认值为 undefined). | DropTarget
 | dropAllowed : String 当允许放开被拖拽的对象时，返回给拖拽源（拖拽的对象）的CSS样式 (默认值为 "x-dd-drop-ok")。 | DropTarget
 | dropNotAllowed : String 当不允许放下时返回到拖拽源的CSS样式 (默认值为 "x-dd-drop-nodrop")。 | DropTarget
 | overClass : String 当拖拽源对象从目标元素上滑过时应用到目标元素的CSS样式 (默认值为 "")。 | DropTarget

公共属性

Property Defined By
available : boolean
当相关联的dom元素可以访问之前availabe属性值都是false。
DragDrop
config : object
传递给构造器的配置参数
DragDrop
defaultPadding : Object
为"constrainTo"元素提供默认的填充约束 (默认值为 {left: 0, right:0, top:0, bottom:0})。
DragDrop
groups : object An object in the format {'group1':true, 'group2':true
组定义了一个相关的DragDrop对象的逻辑集合。 只有在与同一组中的其它DragDrop对象发生交互时...
组定义了一个相关的DragDrop对象的逻辑集合。 只有在与同一组中的其它DragDrop对象发生交互时，实例才会收到事件。这允许我们在需要时，使用DragDrop的单个实例来定义多个组。
DragDrop
hasOuterHandles : boolean
默认情况下，只有在相关联元素的区域中发生mousedown事件时，才发起拖拽操作。 在某些浏览器中...
默认情况下，只有在相关联元素的区域中发生mousedown事件时，才发起拖拽操作。 在某些浏览器中，如果上一次mouseup事件在window外部发生的时候， 浏览器将不能报告此次的mousedown事件， 此时将会产生一个bug。 如果定义了外部的句柄，此属性值将被设置为true。
DragDrop
id : String
与当前对象相关联的元素的id。 这就是我们所谓的关联元素("linked element")，因为此元素的大小和位置...
与当前对象相关联的元素的id。 这就是我们所谓的关联元素("linked element")，因为此元素的大小和位置 将被用来决定何时与拖动和放开的对象进行交互。
DragDrop
ignoreSelf : Boolean
设置为false，拖拽时，将会使DragDrop对象在悬在自身元素上方时触发drag事件。默认为...
设置为false，拖拽时，将会使DragDrop对象在悬在自身元素上方时触发drag事件。默认为true——DragDrop对象默认不会对自身触发drag事件。
DragDrop
invalidHandleClasses : Array
CSS类名数组，应用到那些被认为是非法拖拽句柄的对象上。
DragDrop
invalidHandleIds : Object
一个对象，它的属性名标志了被认为是非法的拖动手柄元素的ID。 一个非空属性值标志着这些ID是有效的...
一个对象，它的属性名标志了被认为是非法的拖动手柄元素的ID。 一个非空属性值标志着这些ID是有效的。 例如，为了阻止从ID为"foo"的元素上发起拖动操作，使用 :
                                {
    foo: true
}
DragDrop
invalidHandleTypes : Object
一个对象，它的属性名标记了那些不能作为拖拽句柄的HTML标签。 一个非空属性值标志着此标签是无效的...
一个对象，它的属性名标记了那些不能作为拖拽句柄的HTML标签。 一个非空属性值标志着此标签是无效的。 默认为以下值，它将阻止从元素发起拖拽操作：
                                {
    A: "A"
}
DragDrop
isTarget : boolean
默认情况下，任何实例都可以是拖放的目标。 可以设置isTarget为false以禁用。
DragDrop
maintainOffset : boolean
当我们重置约束时保持偏移量。 当你需要在页面变化时，元素保持与其父元素的相对位置关系...
当我们重置约束时保持偏移量。 当你需要在页面变化时，元素保持与其父元素的相对位置关系，设置此项为true。
DragDrop
moveOnly : boolean
当设置为true时，当这个DD对象在同组的其他DD对象上方时，将...
当设置为true时，当这个DD对象在同组的其他DD对象上方时，将不会接收到notification事件。默认为false。
DragDrop
padding : int[] An array containing the 4 padding values: [top, right, bottom, left]
当前拖拽对象的padding配置项， 用来计算与当前对象相交叉的区域。
DragDrop
primaryButtonOnly : boolean
默认情况下，drag和drop实例只会响应鼠标第一个键的点击操作 (右手习惯下的左键)...
默认情况下，drag和drop实例只会响应鼠标第一个键的点击操作 (右手习惯下的左键)。 设置为true，将响应浏览器传来的任何一个键的点击
DragDrop
xTicks : int[]
在指定一个水平的刻度/间距时， 元素自动吸附位置的像素数组...
在指定一个水平的刻度/间距时， 元素自动吸附位置的像素数组。 当你定义一个间距记号时，这个数组是自动生成的。 （译者注：此配置可以用来实现在水平方向上拖动时的一种磁性吸附效果，这个数组就是 自动吸附的像素刻度或者间距）。
DragDrop
yTicks : int[]
在指定一个垂直的刻度/间距时， 元素自动吸附位置的像素数组...
在指定一个垂直的刻度/间距时， 元素自动吸附位置的像素数组。 当你定义一个间距记号时，这个数组是自动生成的。 （译者注：此配置可以用来实现在垂直方向上拖动时的一种磁性吸附效果，这个数组就是 自动吸附的像素刻度或者间距）。
DragDrop

公共方法

Method Defined By
DropZone ( Mixed el , Object config )
参数:
  • el : Mixed
    容器元素
  • config : Object
返回值:
  • void
DropZone
addToGroup ( sGroup {string} ) : void
将当前实例添加到一个彼此相关的drag/drop对象组中。 每个实例至少属于一个组...
将当前实例添加到一个彼此相关的drag/drop对象组中。 每个实例至少属于一个组， 并且如果需要，可以同时属于任意多个组。
参数:
  • {string} : sGroup
    组名
返回值:
  • void
DragDrop
applyConfig () : void
应用那些传递给构造器的配置参数。此操作被期望在继承链的每一层上都能起作用...
应用那些传递给构造器的配置参数。此操作被期望在继承链的每一层上都能起作用。 这样一个DDProxy的实现类将会执行在DDProxy, DD和DragDrop上应用配置项的操作，此操作是为了使这些参数在每个对象上都可用。
参数:
  • 无。
返回值:
  • void
DragDrop
constrainTo ( Mixed constrainTo , [ Object/Number pad ], [ Boolean inContent ] ) : void
让元素的运动范围受限于另一个元素...
让元素的运动范围受限于另一个元素， 使用方法:

                                    var dd = new Ext.dd.DDProxy("dragDiv1", "proxytest",
                { dragElId: "existingProxyDiv" });
 dd.startDrag = function(){
     this.constrainTo("parent-id");
 };
或者你可以使用 Ext.Element 对象来初始化:
                                Ext.get("dragDiv1").initDDProxy("proxytest", {dragElId: "existingProxyDiv"}, {
     startDrag : function(){
         this.constrainTo("parent-id");
     }
 });
参数:
  • constrainTo : Mixed
    要绑定到的元素。
  • pad : Object/Number
    (可选) Pad提供了定义约束的"padding"参数的一个途径， 既可以是一个数字，以便进行均匀的填充 (4 等价于{left:4, right:4, top:4, bottom:4})， 或者一个包含填充尺寸数据的对象。例如： {right:10, bottom:10}
  • inContent : Boolean
    (可选) 将可拖动区域约束到元素的盒子模型内部(在填充和边框内部)
返回值:
  • void
DragDrop
getEl () : HTMLElement
返回相关联的元素的引用
返回相关联的元素的引用
参数:
  • 无。
返回值:
  • HTMLElement
    html元素
DragDrop
getTargetFromEvent ( Event e ) : Object
返回关联到DOM节点的定制数据对象，此DOM节点是事件源。 默认情况下此方法在...
返回关联到DOM节点的定制数据对象，此DOM节点是事件源。 默认情况下此方法在Ext.dd.Registry中查找event target，你可以重写此方法以提供你自己特定的查找。
参数:
  • e : Event
    事件
返回值:
  • Object
    自定义数据
DropZone
init ( id the , String sGroup , object config ) : void
设置DragDrop对象。 必须在任何Ext.dd.DragDrop的子类构造器中调用
设置DragDrop对象。 必须在任何Ext.dd.DragDrop的子类构造器中调用
参数:
  • the : id
    相关联的元素id
  • sGroup : String
    相关元素的编组
  • config : object
    配置属性
返回值:
  • void
DragDrop
initTarget ( id the , String sGroup , object config ) : void
Initializes Targeting functionality only... the object does not get a mousedown handler. （译者注：原始文档不完整，无法翻译此句。）
Initializes Targeting functionality only... the object does not get a mousedown handler. （译者注：原始文档不完整，无法翻译此句。）
参数:
  • the : id
    相关联元素的id
  • sGroup : String
    关联项目的编组
  • config : object
    配置属性
返回值:
  • void
DragDrop
isLocked () : boolean
如果此实例被锁定，或者drag drop管理器被锁定， 返回true...
如果此实例被锁定，或者drag drop管理器被锁定， 返回true (意味着此页面的所有拖拽操作都无效。)
参数:
  • 无。
返回值:
  • boolean
    如果此实例或者所有的drag/drop被锁定，返回true；否则返回false
DragDrop
lock () : void
锁定此实例
锁定此实例
参数:
  • 无。
返回值:
  • void
DragDrop
notifyDrop ( Ext.dd.DragSource source , Event e , Object data ) : Boolean
当拖拽源被放置到目标区域之上时，此方法由 Ext.dd.DragSource 调用一次，以通知目标区域...
当拖拽源被放置到目标区域之上时，此方法由Ext.dd.DragSource调用一次，以通知目标区域。目标区域将会查找基于传递进来的事件的目标节点，如果有一个注册到此事件的节点，它将会被代理到onNodeDrop方法以提供节点特定的处理， 否则它将调用onContainerDrop。
参数:
  • source : Ext.dd.DragSource
    悬置在drop区域的drag源
  • e : Event
    事件
  • data : Object
    包含drag源提供的任意数据的对象
返回值:
  • Boolean
    drop有效时为true，否则false
DropZone
notifyEnter ( Ext.dd.DragSource source , Event e , Object data ) : String
当拖拽源正处在目标区域中时由 Ext.dd.DragSource 调用一次以通知目标区域...
当拖拽源正处在目标区域中时由Ext.dd.DragSource调用一次以通知目标区域。 默认的实现将返回this.dropNotAllowed，并且希望只有注册成drop的节点可以处理 drag drop操作。所以，如果你希望目标区域自身可以处理放下操作，你应该 重写此方法，提供特定的实现。
参数:
  • source : Ext.dd.DragSource
    悬置在drop区域的drag源
  • e : Event
    事件
  • data : Object
    包含drag源提供的任意数据的对象
返回值:
  • String
    从drop状态回到源状态的CSS的class，使{@link Ext.dd.StatusProxy}得以更新
DropZone
notifyOut ( Ext.dd.DragSource source , Event e , Object data ) : void
当拖拽源被拖出目标区域而没有放下时， 此方法由 Ext.dd.DragSource 调用一次，以通知目标区域...
当拖拽源被拖出目标区域而没有放下时， 此方法由Ext.dd.DragSource调用一次，以通知目标区域。 如果拖拽源此时正位于一个注册到区域的节点上，通知会被onNodeOut方法代理，以进行节点特定的处理，其它情况将被忽略。
参数:
  • source : Ext.dd.DragSource
    悬置在drop目标的drag源
  • e : Event
    事件
  • data : Object
    包含drag区域提供的任意数据的对象
返回值:
  • void
DropZone
notifyOver ( Ext.dd.DragSource source , Event e , Object data ) : String
当拖拽源被拖拽到目标区域之上时，此方法由 Ext.dd.DragSource 不断调用。当拖拽源位于目标区域上时...
当拖拽源被拖拽到目标区域之上时，此方法由Ext.dd.DragSource不断调用。当拖拽源位于目标区域上时，鼠标的每次移动都会调用此方法。当拖拽源位于一个注册的节点上时，它将调用onNodeOver方法。当拖拽源进入和离开一个注册的节点 (onNodeEnter, onNodeOut) ，在必要时会自动由特定的方法来代理。如果拖拽源当前没有位于一个注册的节点之上，它将调用onContainerOver。
参数:
  • source : Ext.dd.DragSource
    悬置在drop区域的drag源
  • e : Event
    事件
  • data : Object
    包含drag源提供的任意数据的对象
返回值:
  • String
    从drop状态回到源状态的CSS的class，使{@link Ext.dd.StatusProxy}得以更新
DropZone
onAvailable () : void
覆盖onAvailable方法，以便在决定了位置间隔之后执行所需的操作。
覆盖onAvailable方法，以便在决定了位置间隔之后执行所需的操作。
参数:
  • 无。
返回值:
  • void
DragDrop
onContainerDrop ( Ext.dd.DragSource source , Event e , Object data ) : Boolean
当DropZone检测到一个Ext.dd.DragSource 被放置到其上，而不是放置到注册到其中的节点上时...
当DropZone检测到一个Ext.dd.DragSource被放置到其上，而不是放置到注册到其中的节点上时，此方法在内部被调用。 默认的实现会返回false， 所以，如果你需要放下区域本身可以接收放下操作时， 应该覆盖此方法以提供对drop事件的特定处理。 当放下操作合法时，此方法应该返回true以阻止拖拽源执行repair动作。
参数:
  • source : Ext.dd.DragSource
    悬置在drop区域的drag源
  • e : Event
    事件
  • data : Object
    包含drag源提供的任意数据的对象
返回值:
  • Boolean
    drop有效时为true，否则false
DropZone
onContainerOver ( Ext.dd.DragSource source , Event e , Object data ) : String
从其上滑过，而不是从注册到其中的节点上滑过时，此方法在内部被调用。 默认的实现会返回this.dropNotAllowed...
当DropZone检测到一个Ext.dd.DragSource从其上滑过，而不是从注册到其中的节点上滑过时，此方法在内部被调用。 默认的实现会返回this.dropNotAllowed， 所以，如果需要时，应该覆盖此方法以提供特定的响应。
参数:
  • source : Ext.dd.DragSource
    悬置在drop区域的drag源
  • e : Event
    事件
  • data : Object
    包含drag源提供的任意数据的对象
返回值:
  • String
    从drop状态回到源状态的CSS的class，使{@link Ext.dd.StatusProxy}得以更新
DropZone
onNodeDrop ( Object nodeData , Ext.dd.DragSource source , Event e , Object data ) : Boolean
当DropZone检测到Ext.dd.DragSource被放置到一个目标节点上时， 此方法在内部被调用。 默认的实现会返回false...
当DropZone检测到Ext.dd.DragSource被放置到一个目标节点上时， 此方法在内部被调用。 默认的实现会返回false，所以，应该覆盖此方法以提供对drop事件的特定处理， 并且方法应该返回true，以阻止拖拽源进行repair操作。
参数:
  • nodeData : Object
    drop节点的自定义数据（和该节点 getTargetFromEvent 返回的值一致）
  • source : Ext.dd.DragSource
    悬置在drop区域的drag源
  • e : Event
    事件
  • data : Object
    包含drag源提供的任意数据的对象
返回值:
  • Boolean
    drop有效时为true，否则false
DropZone
onNodeEnter ( Object nodeData , Ext.dd.DragSource source , Event e , Object data ) : void
当DropZone检测到一个Ext.dd.DragSource进入被配置实现的getTargetFromEvent侦测或者注册到的节点时...
当DropZone检测到一个Ext.dd.DragSource进入被配置实现的getTargetFromEvent侦测或者注册到的节点时，此方法被调用。 这个方法默认不实现，如果需要，应该被覆盖来提供特定的节点操作。
参数:
  • nodeData : Object
    drop节点的自定义数据（和该节点 getTargetFromEvent 返回的值一致）
  • source : Ext.dd.DragSource
    悬置在drop区域的drag源
  • e : Event
    事件
  • data : Object
    包含drag源提供的任意数据的对象
返回值:
  • void
DropZone
onNodeOut ( Object nodeData , Ext.dd.DragSource source , Event e , Object data ) : void
当DropZone检测到一个 Ext.dd.DragSource 被拖出了目标区域而没有被放下时...
当DropZone检测到一个Ext.dd.DragSource被拖出了目标区域而没有被放下时，此方法没有默认的实现，如果需要应该重写此方法以提供节点特定的处理。
参数:
  • nodeData : Object
    drop节点的自定义数据（和该节点 getTargetFromEvent 返回的值一致）
  • source : Ext.dd.DragSource
    悬置在drop区域的drag源
  • e : Event
    事件
  • data : Object
    包含drag源提供的任意数据的对象
返回值:
  • void
DropZone
onNodeOver ( Object nodeData , Ext.dd.DragSource source , Event e , Object data ) : String
当DropZone检测到一个Ext.dd.DragSource被配置实现的getTargetFromEvent...
当DropZone检测到一个Ext.dd.DragSource被配置实现的getTargetFromEvent侦测或者注册到的节点上滑过时，此方法被调用。 默认的实现会返回this.dropNotAllowed， 所以，如果需要时，应该覆盖此方法以提供特定的响应。
参数:
  • nodeData : Object
    drop节点的自定义数据（和该节点 getTargetFromEvent 返回的值一致）
  • source : Ext.dd.DragSource
    悬置在drop区域的drag源
  • e : Event
    事件
  • data : Object
    包含drag源提供的任意数据的对象
返回值:
  • String
    从drop状态回到源状态的CSS的class，使{@link Ext.dd.StatusProxy}得以更新
DropZone
removeFromGroup ( string sGroup ) : void
从所提供的交互组中删除此元素
从所提供的交互组中删除此元素
参数:
  • sGroup : string
    需要从中删除的组
返回值:
  • void
DragDrop
setPadding ( int iTop , int iRight , int iBot , int iLeft ) : void
配置拖拽时目标区域的填充像素数。为计算目标区域有效地扩展（或者缩小）虚拟对象的大小...
配置拖拽时目标区域的填充像素数。为计算目标区域有效地扩展（或者缩小）虚拟对象的大小。支持css-style快捷方式，如果只传递了一个参数，所有的边界将会拥有相同的填充；如果传递了两个参数，top和bottom会使用第一个参数， left和right会使用第二个参数。（译者注：这里的规则与CSS设置padding参数的规则是一样的，完全可以用CSS的规则来配置此参数。）
参数:
  • iTop : int
    Top pad
  • iRight : int
    Right pad
  • iBot : int
    Bot pad
  • iLeft : int
    Left pad
返回值:
  • void
DragDrop
toString () : string
toString方法
toString method
参数:
  • 无。
返回值:
  • string
    dd对象的字符串表述
DragDrop
unlock () : void
Unlock this instace
为此实例解锁
参数:
  • 无。
返回值:
  • void
DragDrop
unreg () : void
删除当前元素上所有拖拽和落下钩子(hook)
删除当前元素上所有拖拽和落下钩子(hook)
参数:
  • 无。
返回值:
  • void
DragDrop

公共事件

该类没有公共事件。


Class Ext.dd.PanelProxy

包: | Ext.dd
定义类的文件: | PanelDD.js
类: | PanelProxy
继承自: | Object
为Ext.Panels 定制的特殊拖动代理实现。 该类主要在内部用来实现Panel的拖动和放下，不应该直接创建该类的实例。

配置项

Config Options |  | Defined By
 | insertProxy : Boolean True将在拖动panel时插入一个占位代理元素，false将会不适用代理进行拖动(默认为true). | PanelProxy

公共属性

该类没有公共属性。

公共方法

Method Defined By
PanelProxy ( panel The , config Configuration )
参数:
  • The : panel
    代理的 Ext.Panel
  • Configuration : config
    options
返回值:
  • void
PanelProxy
getEl () : Element
获取代理的元素
获取代理的元素
参数:
  • 无。
返回值:
  • Element
    代理的元素
PanelProxy
getGhost () : Element
获取代理的影子元素
获取代理的影子元素
参数:
  • 无。
返回值:
  • Element
    代理的影子元素
PanelProxy
getProxy () : Element
返回代理的元素
返回代理的元素
参数:
  • 无。
返回值:
  • Element
    代理的元素
PanelProxy
hide () : void
隐藏代理
隐藏代理
参数:
  • 无。
返回值:
  • void
PanelProxy
moveProxy ( HTMLElement parentNode , [ HTMLElement before ] ) : void
将代理移动到DOM中的不同位置。 典型调用此函数的情况是，当拖动Panel并保持代理...
将代理移动到DOM中的不同位置。 典型调用此函数的情况是，当拖动Panel并保持代理和Panel位置同步时。
参数:
  • parentNode : HTMLElement
    代理的父DOM节点
  • before : HTMLElement
    (可选)兄弟节点，代理应该被插入到它前面 (如果没有指定，默认为父元素的最后一个子节点)
返回值:
  • void
PanelProxy
show () : void
显示代理
显示代理
参数:
  • 无。
返回值:
  • void
PanelProxy

公共事件

该类没有公共事件。


Class Ext.dd.Registry

包: | Ext.dd
定义类的文件: | Registry.js
类: | Registry
继承自: | Object
提供一种便捷的方式，可以访问一个页面上所有已经注册的可拖拽的组件。 可以直接通过DOM节点id获得项目的引用，或者通过传入发生的drag drop事件 ，然后找到事件的目标。

这是一个单例的类，不能直接实例化。

公共属性

该类没有公共属性。

公共方法

Method Defined By
getHandle ( String/HTMLElement id ) : Object
根据id返回注册给DOM节点的处理函数
根据id返回注册给DOM节点的处理函数
参数:
  • id : String/HTMLElement
    需要查找的DOM节点或者id
返回值:
  • Object
    handle 自定义的处理数据
Registry
getHandleFromEvent ( Event e ) : Object
返回注册给DOM节点的处理函数，它是事件的目标
返回注册给DOM节点的处理函数，它是事件的目标
参数:
  • e : Event
    event
返回值:
  • Object
    handle 自定义的处理数据s
Registry
getTarget ( String/HTMLElement id ) : Object
返回一个自定义的数据，它被通过id注册给一个DOM节点
返回一个自定义的数据，它被通过id注册给一个DOM节点
参数:
  • id : String/HTMLElement
    需要查找的DOM节点或者id
返回值:
  • Object
    data 自定义数据
Registry
getTargetFromEvent ( Event e ) : Object
返回注册给DOM节点的自定义数据对象，它是事件的目标
返回注册给DOM节点的自定义数据对象，它是事件的目标
参数:
  • e : Event
    event
返回值:
  • Object
    data 自定义数据
Registry
register ( String/HTMLElement element , [ Object data ] ) : void
注册一个拖拽元素
注册一个拖拽元素
参数:
  • element : String/HTMLElement
    需要注册的id或者DOM节点
  • data : Object
    (可选)一个定制的数据对象，在进行拖拽操作时， 它将被在相关的元素之间传递。 你可以定制这个对象， 增加任何你自己的代码能够解析的属性， 另外有一些特定的属性对Registry是可见的， 应该添加到这个数据对象中（如果可用）:
    Value      Description

---------  ------------------------------------------

handles    Array of DOM nodes that trigger dragging

           for the element being registered

isHandle   True if the element passed in triggers

           dragging itself, else false
返回值:
  • void
Registry
unregister ( String/HTMLElement element ) : void
注销一个拖拽元素
注销一个拖拽元素
参数:
  • element : String/HTMLElement
    需要注销的id或者DOM节点
返回值:
  • void
Registry

公共事件

该类没有公共事件。


Class Ext.dd.ScrollManager

包: | Ext.dd
定义类的文件: | ScrollManager.js
类: | ScrollManager
继承自: | Object

在进行拖拽操作时，自动为超出页面的区域提供滚动条。

ScrollManager配置项将被用作注册到其上的所有容器的默认值，但是你也可以通过能滚动的容器覆盖大部分配置项，添加一个ddScrollConfig对象到目标元素，它包含如下属性 : hthresh, vthresh, increment 和 frequency. 示例用法:

                var el = Ext.get('scroll-ct');
el.ddScrollConfig = {
    vthresh: 50,
    hthresh: -1,
    frequency: 100,
    increment: 200
};
Ext.dd.ScrollManager.register(el);
注意: 该类使用"Point Mode"，在"Intersect Mode"下没有经过测试。

这是一个单例的类，不能直接实例化。

公共属性

Property |  | Defined By
 | animDuration : Number 动画效果持续秒数---必须小于Ext.dd.ScrollManager.frequency! (默认值为 .4) | ScrollManager
 | animate : Boolean 设置为true，滚动时使用动画效果(默认值为 true) | ScrollManager
 | frequency : Number 滚动频率毫秒数(默认值为 500) | ScrollManager
 | hthresh : Number 到一个容器左侧边缘或者右侧边缘的像素数，当鼠标超越这个值时需要触发产生滚动条... 到一个容器左侧边缘或者右侧边缘的像素数，当鼠标超越这个值时需要触发产生滚动条 (默认值为 25) | ScrollManager
 | increment : Number 每次滚动的像素数(默认值为 50) | ScrollManager
 | vthresh : Number 到一个容器顶部边缘或者底部边缘的像素数，当鼠标超越这个值时需要触发产生滚动条... 到一个容器顶部边缘或者底部边缘的像素数，当鼠标超越这个值时需要触发产生滚动条(默认值为 25) | ScrollManager

公共方法

Method Defined By
refreshCache () : void
手动触发刷新缓存的操作。
手动触发刷新缓存的操作。
参数:
  • 无。
返回值:
  • void
ScrollManager
register ( Mixed/Array el ) : void
将一个新的溢出元素(s)注册成自动滚动
将一个新的溢出元素(s)注册成自动滚动
参数:
  • el : Mixed/Array
    被拖动元素的id或id数组
返回值:
  • void
ScrollManager
unregister ( Mixed/Array el ) : void
反注册溢出元素(s)，让它们不再自动滚动
反注册溢出元素(s)，让它们不再自动滚动
参数:
  • el : Mixed/Array
    被拖动元素的id或id数组
返回值:
  • void
ScrollManager

公共事件

该类没有公共事件。


Class Ext.dd.StatusProxy

包: | Ext.dd
定义类的文件: | StatusProxy.js
类: | StatusProxy
继承自: | Object
一个专门的拖动代理，提供放开状态图标， Ext.Layer 样式和自动纠正行为。 该类是所有Ext.dd组件使用的默认拖动代理。

配置项

Config Options |  | Defined By
 | dropAllowed : String 当允许执行放下操作时应用到状态元素的CSS样式(默认值为 "x-dd-drop-ok"). | StatusProxy
 | dropNotAllowed : String 当不允许执行放下操作时应用到状态元素的CSS样式(默认值为 "x-dd-drop-nodrop"). | StatusProxy

公共属性

该类没有公共属性。

公共方法

Method Defined By
StatusProxy ( Object config )
参数:
  • config : Object
返回值:
  • void
StatusProxy
getEl () : Ext.Layer
返回底层代理的Ext.Layer
返回底层代理的 Ext.Layer
参数:
  • 无。
返回值:
  • Ext.Layer
    el
StatusProxy
getGhost () : Ext.Element
返回影子元素
返回影子元素
参数:
  • 无。
返回值:
  • Ext.Element
    el
StatusProxy
hide ( Boolean clear ) : void
隐藏代理
隐藏代理
参数:
  • clear : Boolean
    True将会重置状态并清除影子元素内容，false将会保留它们
返回值:
  • void
StatusProxy
repair ( Array xy , Function callback , Object scope ) : void
促使代理通过一个动画动作返回到它以前的位置。 应该在一个非法的放下动作发生之后...
促使代理通过一个动画动作返回到它以前的位置。 应该在一个非法的放下动作发生之后，由被拖拽的项目调用。
参数:
  • xy : Array
    元素俗的XY位置([x, y])
  • callback : Function
    在纠正操作结束之后调用的函数。
  • scope : Object
    作用域( this 引用)回调函数在其中被执行。 默认为浏览器的window.
返回值:
  • void
StatusProxy
reset ( Boolean clearGhost ) : void
将状态指示器重置到默认的dropNotAllowed值
将状态指示器重置到默认的dropNotAllowed值
参数:
  • clearGhost : Boolean
    True也将从影子对象中删除所有内容，false将会保留它
返回值:
  • void
StatusProxy
setStatus ( String cssClass ) : void
更新代理的视觉元素，以指示在滑过目标元素时是否允许执行放下操作。
更新代理的视觉元素，以指示在滑过目标元素时是否允许执行放下操作。
参数:
  • cssClass : String
    CSS类，设置给新放下状态指示图片
返回值:
  • void
StatusProxy
show () : void
显示当前代理
显示当前代理
参数:
  • 无。
返回值:
  • void
StatusProxy
stop () : void
停止纠正动画，如果它当前还在运行
停止纠正动画，如果它当前还在运行
参数:
  • 无。
返回值:
  • void
StatusProxy
sync () : void
强制布局把它的阴影和垫衬的位置同步到元素的位置
强制布局把它的阴影和垫衬的位置同步到元素的位置
参数:
  • 无。
返回值:
  • void
StatusProxy
update ( String/HTMLElement html ) : void
更新影子元素中的内容
更新影子元素中的内容
参数:
  • html : String/HTMLElement
    替代影子元素当前innerHTML值的html， 或者一个需要添加为影子元素孩子节点的DOM节点 (这种情况下将首先创建innerHTML元素)。
返回值:
  • void
StatusProxy

公共事件

该类没有公共事件。


Observable
    Direct

Class Ext.Direct

包: | Ext
定义类的文件: | Direct.js
类: | Direct
继承自: | Observable

Overview

Ext.Direct旨在简化客户端之间的通信 服务器通过提供一个单一的界面，可以减少量 通用代码通常需要验证数据和处理返回 数据包（读取数据，误差条件等）。

该Ext.direct命名空间包括几个与服务器端整合更为紧密的类 该命名空间Ext.data中包括用于支持辅助Ext.data.Stores的一个 Ext.Direct方法。

Specification

有关其他信息咨询 Ext.Direct Specification.

Providers

Ext.Direct使用一个供应商的架构，其中一个或多个供应商 用于从服务器运输的数据。

  • JsonProvider 简单的JSON 操作
  • PollingProvider 重复请求
  • RemotingProvider 公开在服务器端的连接

供应商并不需要直接调用，供应商加入 通过 Ext.Direct. add.

Router

Ext.Direct采用了“路由器”在服务器上直接请求 到适当的服务器端方法的客户端。由于 Ext.Direct API是完全平台无关的，你可以完全 换出一个基于Java的服务器解决方案，并代之以一个可以认为 使用C＃在不改变所有客户端JavaScript。

Server side events

服务器端可以由客户端加入监听器, 比如:

            {"type":"event","name":"message","data":"Successfully polled at: 11:19:30 am"}

// add a handler for a 'message' event sent by the server
Ext.Direct.on('message', function(e){
    out.append(String.format('<p><i>{0}</i></p>', e.data));
            out.el.scrollTo('t', 100000, true);
});

This class is a singleton and cannot be created directly.

配置项

Config Options Defined By
listeners : Object
一个包含一个或多个事件处理器的配置对象，会在初始化的时候被添加到目标对象上...

一个包含一个或多个事件处理器的配置对象，会在初始化的时候被添加到目标对象上。 该配置对象应该是一个有效的监听器配置对象就像 addListener例子中指定的一样可一次附加多个处理器。

ExtJs Components上的DOM事件

一些 ExtJs Component 类导出时会选择一些DOM事件(例如 "click", "mouseover" 等等), 这通常只是在有额外的值可以被添加时发生。例如DataView类的 click事件会传递被点击的节点。也可以直接在Component的HTMLElementevent上访问DOM事件，但必需在Component被渲染后监听器才能添加到Element 上。可以按照以下步骤添加插件:

// 插件会用一个监听器配置对象进行配置。
//该组件会被添加到所有处理方法的参数列表上。
Ext.DomObserver = Ext.extend(Object, {
    constructor: function(config) {
        this.listeners = config.listeners ? config.listeners : config;
    },

    // 组件将自己传递进了插件的初始化方法里
    init: function(c) {
        var p, l = this.listeners;
        for (p in l) {
            if (Ext.isFunction(l[p])) {
                l[p] = this.createHandler(l[p], c);
            } else {
                l[p].fn = this.createHandler(l[p].fn, c);
            }
        }

        // 渲染后立即添加监听器到元素上
        c.render = c.render.createSequence(function() {
            var e = c.getEl();
            if (e) {
                e.on(l);
            }
        });
    },

    createHandler: function(fn, c) {
        return function(e) {
            fn.call(this, e, c);
        };
    }
});

var combo = new Ext.form.ComboBox({

    // 元素被点击后折叠
    plugins: [ new Ext.DomObserver({
        click: function(evt, comp) {
            comp.collapse();
        }
    })],
    store: myStore,
    typeAhead: true,
    mode: 'local',
    triggerAction: 'all'
});

Observable

公共属性

Property Defined By
eventTypes : Object
每个事件类型实现一个getData（）方法。默认事件 类型: <div class="mdetail-params"> event : Ext....
每个事件类型实现一个getData（）方法。默认事件 类型:
  • event : Ext.Direct.Event
  • exception : Ext.Direct.ExceptionEvent
  • rpc : Ext.Direct.RemotingEvent
Direct
exceptions : Object
四种可能的例外，可发生类型: <div class="mdetail-params"> Ext.Direct.exceptions.TRANSPORT : 'xh...
四种可能的例外，可发生类型:
  • Ext.Direct.exceptions.TRANSPORT : 'xhr'
  • Ext.Direct.exceptions.PARSE : 'parse'
  • Ext.Direct.exceptions.LOGIN : 'login'
  • Ext.Direct.exceptions.SERVER : 'exception'
Direct

公共方法

Method Defined By
addEvents( Object|String o, string Optional. ) : void
添加指定的事件到事件列表上，事件会被该Observable触发。
添加指定的事件到事件列表上，事件会被该Observable触发。
参数:
  • o : Object|String
    以事件名作为属性true作为值的对象 或者当多个事件名被分开的传递时则为第一个事件名。
  • Optional. : string
    事件名被分开的传递时则为事件名。 用法:
    this.addEvents('storeloaded', 'storecleared');
返回值:
  • void
Observable
addListener( String eventName, Function handler, [Object scope], [Object options] ) : void
给对象添加事件处理器。
给对象添加事件处理器。
参数:
  • eventName : String
    监听的事件名。
  • handler : Function
    事件调用的方法
  • scope : Object
    （可选）处理方法执行的作用域 (this的引用 reference)。 如果被忽略。默认为触发事件的对象。
  • options : Object
    （可选）包含处理器配置和属性的对象。 可能包含以下的属性:
    • scope : Object
      处理方法执行的作用域(this的引用) 。 如果被忽略。默认为触发事件的对象。
    • delay : Number
      在触发事件后延迟调用处理器的毫秒数。
    • single : Boolean
      如果为True则添加一个处理器来处理下一次的事件触发（仅一次），然后移除自己。
    • buffer : Number
      使得处理器延迟指定毫秒数后预定的运行在 一个Ext.util.DelayedTask中 。 如果事件在时间内再一次被触发，原始的处理器不会被调用，但是新的处理器会预定的在他的位置上。
    • target : Observable
      如果事件在目标的Observable上触发则仅仅调用处理器， 否则 事件会从子类的Observable上冒泡

    组合选项
    使用这些选项参数,可能会组合出不同类型的监听器：

    一个延迟的，一次性的监听器。

    myDataView.on('click', this.onClick, this, {
single: true,
delay: 100
});

    一次调用附加多个处理器
    该方法同样支持传递一个包含指定的多个处理器的属性的配置对象参数。

    myGridPanel.on({
'click' : {
    fn: this.onClick,
    scope: this,
    delay: 100
},
'mouseover' : {
    fn: this.onMouseOver,
    scope: this
},
'mouseout' : {
    fn: this.onMouseOut,
    scope: this
}
});

    或者一个简写的语法：

    myGridPanel.on({
'click' : this.onClick,
'mouseover' : this.onMouseOver,
'mouseout' : this.onMouseOut,
 scope: this
});
返回值:
  • void
Observable
addProvider ( Object/Array provider ) : void
添加一个Ext.Direct提供商和创建代理或存根方法 执行服务器端的方法。如果供应商是...
添加一个Ext.Direct提供商和创建代理或存根方法 执行服务器端的方法。如果提供程序尚未 连接，它会自动连接。

                                    var pollProv = new Ext.direct.PollingProvider({
    url: 'php/poll2.php'
});

Ext.Direct.addProvider(
    {
        "type":"remoting",       // create a Ext.direct.RemotingProvider

        "url":"php\/router.php", // url to connect to the Ext.Direct server-side router.
        "actions":{              // each property within the actions object represents a Class
            "TestAction":[       // array of methods within each server side Class
            {
                "name":"doEcho", // name of method
                "len":1
            },{
                "name":"multiply",
                "len":1
            },{
                "name":"doForm",
                "formHandler":true, // handle form on server with Ext.Direct.Transaction
                "len":1
            }]
        },
        "namespace":"myApplication",// namespace to create the Remoting Provider in

    },{
        type: 'polling', // create a Ext.direct.PollingProvider

        url:  'php/poll.php'
    },
    pollProv // reference to previously created instance
);
参数:
  • provider : Object/Array
    接受一组供应商提供的描述（一个实例 或配置对象为供应商）或任何供应商的数目 说明作为参数。每个供应商介绍 指示Ext.Direct如何创建客户端存根方法。
返回值:
  • void
Direct
enableBubble( String/Array events ) :void
是否现在使得事件会被该Observable触发并调用 this.getBubbleTarget()方法在拥有者的继承树...

是否现在使得事件会被该Observable触发并调用 this.getBubbleTarget()方法在拥有者的继承树中冒泡。Observable的基础类中没有该方法的实现。

该方法一般被Ext.Components用来冒泡事件到拥有者的容器。参看Ext.Component.getBubbleTarget默认的实现 在Ext.Component中返回组件的直接拥有者。但是如果需要的是一个已知的目标，该方法可以被重写来更快的访问需求的目标。

例子:

Ext.override(Ext.form.Field, {
    // 添加方法到Field的initComponent上改变事件为冒泡
    initComponent : Ext.form.Field.prototype.initComponent.createSequence(function() {
        this.enableBubble('change');
    }),

    // 我们知道我们想让Field的事件冒泡到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() {
            // 如果样式被修改标题会变红。
            myForm.header.setStyle('color', 'red');
        }
    }
});
参数:
  • events : String/Array
    冒泡的事件名，或事件名数组
返回值:
  • void
Observable
fireEvent( String eventName, Object... args ) : Boolean
用传入的参数触发指定的事件 (减去事件名)。 一个事件可以被设置为冒泡 Obse...

用传入的参数触发指定的事件 (减去事件名)。

一个事件可以被设置为冒泡到Observable父类继承树(参看 Ext.Component.getBubbleTarget) 调用enableBubble实现。

参数:
  • eventName : String
    触发的事件名。
  • args : Object...
    传递给处理器的可变长度参数。
返回值:
  • Boolean
    如果有任何的处理器返回false则返回false，否则返回true。
Observable
getProvider ( String id ) : void
当供应商加入时检索指定ID的服务器
检索一个 provider by the id 当供应商 added 时检索指定ID的服务器
参数:
  • id : String
    分配给供应商的特殊ID addProvider
返回值:
  • void
Direct
hasListener( String eventName ) : Boolean
检测对象是否包含指定事件的任何监听器
检测对象是否包含指定事件的任何监听器
参数:
  • eventName : String
    检测的事件名
返回值:
  • Boolean
    如果事件被监听则为true，否则为false
Observable
on( String eventName, Function handler, [Object scope], [Object options] ) : void
给对象添加事件处理器 (addListener的简写形式)
给对象添加事件处理器 (addListener的简写形式。)
参数:
  • eventName : String
    监听的事件类型
  • handler : Function
    事件调用的方法
  • scope : Object
    （可选）处理方法执行时的作用域 (this 的引用)。 如果被忽略。默认为触发事件的对象。
  • options : Object
    可选 包含处理器配置的对象。
返回值:
  • void
Observable
purgeListeners() : void
移除对象上所有的监听器
移除对象上所有的监听器
参数:
  • 无。
返回值:
  • void
Observable
relayEvents( Object o, Array events ) : void
从指定的Observable上传递选择的事件就好像被当前对象触发一样。
从指定的Observable上传递选择的事件就好像被当前对象触发一样。
参数:
  • o : Object
    该Observable上的事件被当前对象传递。
  • events : Array
    传递的数组名。
返回值:
  • void
Observable
removeListener( String eventName, Function handler, [Object scope] ) : void
删除一个事件处理器。
删除一个事件处理器。
参数:
  • eventName : String
    处理器关联的事件类型。
  • handler : Function
    移除的处理器。 这应该是传递到addListener里的方法的引用。
  • scope : Object
    （可选）处理器指定的初始作用域。
返回值:
  • void
Observable
resumeEvents() : void
重新开始触发事件。(参见suspendEvents) 如果事件以queueSuspended参数被挂起，则在事件被挂起时 ...
重新开始触发事件。(参见 suspendEvents) 如果事件以queueSuspended 参数被挂起，则在事件被挂起时触发的事件会被传递到所有的监听器上
参数:
  • 无。
返回值:
  • void
Observable
suspendEvents( Boolean queueSuspended ) : void
暂停触发所有的事件。 (参看resumeEvents)
暂停触发所有的事件。（参看 resumeEvents)
参数:
  • queueSuspended : Boolean
    如果传递为true则排列好暂停的事件使得在调用 resumeEvents 后再触发它们，而不是抛弃所有暂停的事件。
返回值:
  • void
Observable
un( String eventName, Function handler, [Object scope] ) : void
删除一个事件处理器(removeListener方法的简写形式)
删除一个事件处理器(removeListener方法的简写形式。)
参数:
  • eventName : String
    处理器关联的事件类型
  • handler : Function
    被删除的处理器 这应该是传入 addListener 中的方法的引用。
  • scope : Object
    （可选）为处理器指定的初始作用域。
返回值:
  • void
Observable

公共事件

Event Defined By
event : ( event e , Ext.direct.Provider provider )
在一个事件后启用
在一个事件后启用
Listeners will be 通过以下参数调用:
  • e : event
    已发生的（事件） Ext.Direct.Event type
  • provider : Ext.direct.Provider
    The Provider.
Direct
exception : ( event e )
开启事件后发生的异常
开启事件后发生的异常
Listeners will be 通过如下参数调用:
  • e : event
    在 Ext.Direct.Event type 后发生。
Direct


Observable
    Provider
      JsonProvider

Class Ext.direct.JsonProvider

包: | Ext.direct
定义类的文件: | JsonProvider.js
类: | JsonProvider
子类: | PollingProvider, RemotingProvider
继承自: | Provider

配置项

Config Options Defined By
id : String
provider的唯一id(默认为 auto-assigned id)。 如果你需要以后再次访问provider...
provider的唯一id(默认为 auto-assigned id)。 如果你需要以后再次访问provider，并且没有有效的对象引用，你必须指定一个id， 例如:
Ext.Direct.addProvider(
    {
        type: 'polling',
        url:  'php/poll.php',
        id:   'poll-provider'
    }
);

var p = Ext.Direct.getProvider('poll-provider');
p.disconnect();
Provider
listeners : Object
一个包含一个或多个事件处理器的配置对象，会在初始化的时候被添加到目标对象上...

一个包含一个或多个事件处理器的配置对象，会在初始化的时候被添加到目标对象上。 该配置对象应该是一个有效的监听器配置对象就像 addListener例子中指定的一样可一次附加多个处理器。

ExtJs Components上的DOM事件

一些 ExtJs Component 类导出时会选择一些DOM事件(例如 "click", "mouseover" 等等), 这通常只是在有额外的值可以被添加时发生。例如DataView类的 click事件会传递被点击的节点。也可以直接在Component的HTMLElementevent上访问DOM事件，但必需在Component被渲染后监听器才能添加到Element 上。可以按照以下步骤添加插件:

// 插件会用一个监听器配置对象进行配置。
//该组件会被添加到所有处理方法的参数列表上。
Ext.DomObserver = Ext.extend(Object, {
    constructor: function(config) {
        this.listeners = config.listeners ? config.listeners : config;
    },

    // 组件将自己传递进了插件的初始化方法里
    init: function(c) {
        var p, l = this.listeners;
        for (p in l) {
            if (Ext.isFunction(l[p])) {
                l[p] = this.createHandler(l[p], c);
            } else {
                l[p].fn = this.createHandler(l[p].fn, c);
            }
        }

        // 渲染后立即添加监听器到元素上
        c.render = c.render.createSequence(function() {
            var e = c.getEl();
            if (e) {
                e.on(l);
            }
        });
    },

    createHandler: function(fn, c) {
        return function(e) {
            fn.call(this, e, c);
        };
    }
});

var combo = new Ext.form.ComboBox({

    // 元素被点击后折叠
    plugins: [ new Ext.DomObserver({
        click: function(evt, comp) {
            comp.collapse();
        }
    })],
    store: myStore,
    typeAhead: true,
    mode: 'local',
    triggerAction: 'all'
});

Observable
priority : Number
请求的优先级。数值越小，优先级越高， 0意为“全双工”(一直开启)。所有Providers都默认为 1除了PollingProvider默认为...
请求的优先级。数值越小，优先级越高， 0意为“全双工”(一直开启)。所有Providers都默认为 1除了PollingProvider默认为 3。
Provider
type : String
必须，默认为 undefined。 provider的 type指定为 Ext.Direct。 addProvider用来创建 一个新的Provider。可接受的默认值有:...
必须，默认为 undefined。 provider的 type指定为 Ext.Direct。 addProvider用来创建 一个新的Provider。可接受的默认值有:
  • polling : PollingProvider
  • remoting : RemotingProvider
Provider

公共属性

Property Defined By
connect : ( Ext.direct.Provider provider )
当Provider连接到服务端时触发
当Provider连接到服务端时触发
监听器将会以如下的参数格式被调用:
  • provider : Ext.direct.Provider
    Provider
Provider
disconnect : ( Ext.direct.Provider provider )
当Provider从服务端断开连接时触发。
当Provider从服务端断开连接时触发。
监听器将会以如下的参数格式被调用:
  • provider : Ext.direct.Provider
    Provider
Provider

公共方法

Method Defined By
addEvents( Object|String o, string Optional. ) : void
添加指定的事件到事件列表上，事件会被该Observable触发。
添加指定的事件到事件列表上，事件会被该Observable触发。
参数:
  • o : Object|String
    以事件名作为属性true作为值的对象 或者当多个事件名被分开的传递时则为第一个事件名。
  • Optional. : string
    事件名被分开的传递时则为事件名。 用法:
    this.addEvents('storeloaded', 'storecleared');
返回值:
  • void
Observable
addListener( String eventName, Function handler, [Object scope], [Object options] ) : void
给对象添加事件处理器。
给对象添加事件处理器。
参数:
  • eventName : String
    监听的事件名。
  • handler : Function
    事件调用的方法
  • scope : Object
    （可选）处理方法执行的作用域 (this的引用 reference)。 如果被忽略。默认为触发事件的对象。
  • options : Object
    （可选）包含处理器配置和属性的对象。 可能包含以下的属性:
    • scope : Object
      处理方法执行的作用域(this的引用) 。 如果被忽略。默认为触发事件的对象。
    • delay : Number
      在触发事件后延迟调用处理器的毫秒数。
    • single : Boolean
      如果为True则添加一个处理器来处理下一次的事件触发（仅一次），然后移除自己。
    • buffer : Number
      使得处理器延迟指定毫秒数后预定的运行在 一个Ext.util.DelayedTask中 。 如果事件在时间内再一次被触发，原始的处理器不会被调用，但是新的处理器会预定的在他的位置上。
    • target : Observable
      如果事件在目标的Observable上触发则仅仅调用处理器， 否则 事件会从子类的Observable上冒泡

    组合选项
    使用这些选项参数,可能会组合出不同类型的监听器：

    一个延迟的，一次性的监听器。

    myDataView.on('click', this.onClick, this, {
single: true,
delay: 100
});

    一次调用附加多个处理器
    该方法同样支持传递一个包含指定的多个处理器的属性的配置对象参数。

    myGridPanel.on({
'click' : {
    fn: this.onClick,
    scope: this,
    delay: 100
},
'mouseover' : {
    fn: this.onMouseOver,
    scope: this
},
'mouseout' : {
    fn: this.onMouseOut,
    scope: this
}
});

    或者一个简写的语法：

    myGridPanel.on({
'click' : this.onClick,
'mouseover' : this.onMouseOver,
'mouseout' : this.onMouseOut,
 scope: this
});
返回值:
  • void
Observable
enableBubble( String/Array events ) :void
是否现在使得事件会被该Observable触发并调用 this.getBubbleTarget()方法在拥有者的继承树...

是否现在使得事件会被该Observable触发并调用 this.getBubbleTarget()方法在拥有者的继承树中冒泡。Observable的基础类中没有该方法的实现。

该方法一般被Ext.Components用来冒泡事件到拥有者的容器。参看Ext.Component.getBubbleTarget默认的实现 在Ext.Component中返回组件的直接拥有者。但是如果需要的是一个已知的目标，该方法可以被重写来更快的访问需求的目标。

例子:

Ext.override(Ext.form.Field, {
    // 添加方法到Field的initComponent上改变事件为冒泡
    initComponent : Ext.form.Field.prototype.initComponent.createSequence(function() {
        this.enableBubble('change');
    }),

    // 我们知道我们想让Field的事件冒泡到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() {
            // 如果样式被修改标题会变红。
            myForm.header.setStyle('color', 'red');
        }
    }
});
参数:
  • events : String/Array
    冒泡的事件名，或事件名数组
返回值:
  • void
Observable
fireEvent( String eventName, Object... args ) : Boolean
用传入的参数触发指定的事件 (减去事件名)。 一个事件可以被设置为冒泡 Obse...

用传入的参数触发指定的事件 (减去事件名)。

一个事件可以被设置为冒泡到Observable父类继承树(参看 Ext.Component.getBubbleTarget) 调用enableBubble实现。

参数:
  • eventName : String
    触发的事件名。
  • args : Object...
    传递给处理器的可变长度参数。
返回值:
  • Boolean
    如果有任何的处理器返回false则返回false，否则返回true。
Observable
hasListener( String eventName ) : Boolean
检测对象是否包含指定事件的任何监听器
检测对象是否包含指定事件的任何监听器
参数:
  • eventName : String
    检测的事件名
返回值:
  • Boolean
    如果事件被监听则为true，否则为false
Observable
isConnected () : void
返回当前是否连接到了服务端。 抽象方法，由子类实现。
返回当前是否连接到了服务端。 抽象方法，由子类实现。
参数:
  • 无。
返回值:
  • void
Provider
on( String eventName, Function handler, [Object scope], [Object options] ) : void
给对象添加事件处理器 (addListener的简写形式)
给对象添加事件处理器 (addListener的简写形式。)
参数:
  • eventName : String
    监听的事件类型
  • handler : Function
    事件调用的方法
  • scope : Object
    （可选）处理方法执行时的作用域 (this 的引用)。 如果被忽略。默认为触发事件的对象。
  • options : Object
    可选 包含处理器配置的对象。
返回值:
  • void
Observable
purgeListeners() : void
移除对象上所有的监听器
移除对象上所有的监听器
参数:
  • 无。
返回值:
  • void
Observable
relayEvents( Object o, Array events ) : void
从指定的Observable上传递选择的事件就好像被当前对象触发一样。
从指定的Observable上传递选择的事件就好像被当前对象触发一样。
参数:
  • o : Object
    该Observable上的事件被当前对象传递。
  • events : Array
    传递的数组名。
返回值:
  • void
Observable
removeListener( String eventName, Function handler, [Object scope] ) : void
删除一个事件处理器。
删除一个事件处理器。
参数:
  • eventName : String
    处理器关联的事件类型。
  • handler : Function
    移除的处理器。 这应该是传递到addListener里的方法的引用。
  • scope : Object
    （可选）处理器指定的初始作用域。
返回值:
  • void
Observable
resumeEvents() : void
重新开始触发事件。(参见suspendEvents) 如果事件以queueSuspended参数被挂起，则在事件被挂起时 ...
重新开始触发事件。(参见 suspendEvents) 如果事件以queueSuspended 参数被挂起，则在事件被挂起时触发的事件会被传递到所有的监听器上
参数:
  • 无。
返回值:
  • void
Observable
suspendEvents( Boolean queueSuspended ) : void
暂停触发所有的事件。 (参看resumeEvents)
暂停触发所有的事件。（参看 resumeEvents)
参数:
  • queueSuspended : Boolean
    如果传递为true则排列好暂停的事件使得在调用 resumeEvents 后再触发它们，而不是抛弃所有暂停的事件。
返回值:
  • void
Observable
un( String eventName, Function handler, [Object scope] ) : void
删除一个事件处理器(removeListener方法的简写形式)
删除一个事件处理器(removeListener方法的简写形式。)
参数:
  • eventName : String
    处理器关联的事件类型
  • handler : Function
    被删除的处理器 这应该是传入 addListener 中的方法的引用。
  • scope : Object
    （可选）为处理器指定的初始作用域。
返回值:
  • void
Observable

公共事件

Event Defined By
connect : ( Ext.direct.Provider provider )
当Provider连接到服务端时触发
当Provider连接到服务端时触发
监听器将会以如下的参数格式被调用:
  • provider : Ext.direct.Provider
    Provider
Provider
data : ( Ext.direct.Provider provider , event e )
当Provider接收到来自服务器的数据时触发
当Provider接收到来自服务器的数据时触发
监听器将会以如下的参数格式被调用:
  • provider : Ext.direct.Provider
    Provider
  • e : event
    发生的 Ext.Direct.Event 类型。
Provider
disconnect : ( Ext.direct.Provider provider )
当Provider从服务端断开连接时触发。
当Provider从服务端断开连接时触发。
监听器将会以如下的参数格式被调用:
  • provider : Ext.direct.Provider
    Provider
Provider
exception : ()
当Provider接受到来自服务端的一个异常时触发
当Provider接受到来自服务端的一个异常时触发
监听器将会以如下的参数格式被调用:
  • 无。
Provider


Observable
    Provider
      JsonProvider
        PollingProvider

Class Ext.direct.PollingProvider

包: | Ext.direct
定义类的文件: | PollingProvider.js
类: | PollingProvider
继承自: | JsonProvider

使用固定的 间隔 对服务器进行轮询。 获取数据的初始请求由客户端发起，然后服务器进行响应。

PollingProvider的所有配置项都由服务端Ext.Direct堆栈的部分API生成。

一个PollingProvider的实例可以直接通过new关键字创建，或者简单地 指定type = 'polling'。例如:

var pollA = new Ext.direct.PollingProvider({
    type:'polling',
    url: 'php/pollA.php',
});
Ext.Direct.addProvider(pollA);
pollA.disconnect();
Ext.Direct.addProvider(
    {
        type:'polling',
        url: 'php/pollB.php',
        id: 'pollB-provider'
    }
);
var pollB = Ext.Direct.getProvider('pollB-provider');

配置项

Config Options Defined By
baseParams : Object
一个包含属性的对象，在每次进行轮询请求时被作为参数发送。
PollingProvider
id : String
provider的唯一id(默认为 auto-assigned id)。 如果你需要以后再次访问provider...
provider的唯一id(默认为 auto-assigned id)。 如果你需要以后再次访问provider，并且没有有效的对象引用，你必须指定一个id， 例如:
Ext.Direct.addProvider(
    {
        type: 'polling',
        url:  'php/poll.php',
        id:   'poll-provider'
    }
);

var p = Ext.Direct.getProvider('poll-provider');
p.disconnect();
Provider
interval : Number
轮询服务端的频率，毫秒数(默认为3000 - 每3秒钟一次)。
PollingProvider
listeners : Object
一个包含一个或多个事件处理器的配置对象，会在初始化的时候被添加到目标对象上...

一个包含一个或多个事件处理器的配置对象，会在初始化的时候被添加到目标对象上。 该配置对象应该是一个有效的监听器配置对象就像 addListener例子中指定的一样可一次附加多个处理器。

ExtJs Components上的DOM事件

一些 ExtJs Component 类导出时会选择一些DOM事件(例如 "click", "mouseover" 等等), 这通常只是在有额外的值可以被添加时发生。例如DataView类的 click事件会传递被点击的节点。也可以直接在Component的HTMLElementevent上访问DOM事件，但必需在Component被渲染后监听器才能添加到Element 上。可以按照以下步骤添加插件:

// 插件会用一个监听器配置对象进行配置。
//该组件会被添加到所有处理方法的参数列表上。
Ext.DomObserver = Ext.extend(Object, {
    constructor: function(config) {
        this.listeners = config.listeners ? config.listeners : config;
    },

    // 组件将自己传递进了插件的初始化方法里
    init: function(c) {
        var p, l = this.listeners;
        for (p in l) {
            if (Ext.isFunction(l[p])) {
                l[p] = this.createHandler(l[p], c);
            } else {
                l[p].fn = this.createHandler(l[p].fn, c);
            }
        }

        // 渲染后立即添加监听器到元素上
        c.render = c.render.createSequence(function() {
            var e = c.getEl();
            if (e) {
                e.on(l);
            }
        });
    },

    createHandler: function(fn, c) {
        return function(e) {
            fn.call(this, e, c);
        };
    }
});

var combo = new Ext.form.ComboBox({

    // 元素被点击后折叠
    plugins: [ new Ext.DomObserver({
        click: function(evt, comp) {
            comp.collapse();
        }
    })],
    store: myStore,
    typeAhead: true,
    mode: 'local',
    triggerAction: 'all'
});

Observable
priority : Number
请求的优先级(默认为 3)。 参见 Ext.direct.Provider.priority。
PollingProvider
type : String
必须，默认为 undefined。 provider的 type指定为 Ext.Direct。 addProvider用来创建 一个新的Provider。可接受的默认值有:...
必须，默认为 undefined。 provider的 type指定为 Ext.Direct。 addProvider用来创建 一个新的Provider。可接受的默认值有:
  • polling : PollingProvider
  • remoting : RemotingProvider
Provider
url : String/Function
PollingProvider每次每次请求应该连接的url。 此参数也可以是一个引入的Ext.Direct方法，可以接受...
PollingProvider每次每次请求应该连接的url。 此参数也可以是一个引入的Ext.Direct方法，可以接受 baseParams作为它唯一的参数。
PollingProvider

公共属性

Property Defined By
connect : ( Ext.direct.Provider provider )
当Provider连接到服务端时触发
当Provider连接到服务端时触发
监听器将会以如下的参数格式被调用:
  • provider : Ext.direct.Provider
    Provider
Provider
disconnect : ( Ext.direct.Provider provider )
当Provider从服务端断开连接时触发。
当Provider从服务端断开连接时触发。
监听器将会以如下的参数格式被调用:
  • provider : Ext.direct.Provider
    Provider
Provider

公共方法

Method Defined By
addEvents( Object|String o, string Optional. ) : void
添加指定的事件到事件列表上，事件会被该Observable触发。
添加指定的事件到事件列表上，事件会被该Observable触发。
参数:
  • o : Object|String
    以事件名作为属性true作为值的对象 或者当多个事件名被分开的传递时则为第一个事件名。
  • Optional. : string
    事件名被分开的传递时则为事件名。 用法:
    this.addEvents('storeloaded', 'storecleared');
返回值:
  • void
Observable
addListener( String eventName, Function handler, [Object scope], [Object options] ) : void
给对象添加事件处理器。
给对象添加事件处理器。
参数:
  • eventName : String
    监听的事件名。
  • handler : Function
    事件调用的方法
  • scope : Object
    （可选）处理方法执行的作用域 (this的引用 reference)。 如果被忽略。默认为触发事件的对象。
  • options : Object
    （可选）包含处理器配置和属性的对象。 可能包含以下的属性:
    • scope : Object
      处理方法执行的作用域(this的引用) 。 如果被忽略。默认为触发事件的对象。
    • delay : Number
      在触发事件后延迟调用处理器的毫秒数。
    • single : Boolean
      如果为True则添加一个处理器来处理下一次的事件触发（仅一次），然后移除自己。
    • buffer : Number
      使得处理器延迟指定毫秒数后预定的运行在 一个Ext.util.DelayedTask中 。 如果事件在时间内再一次被触发，原始的处理器不会被调用，但是新的处理器会预定的在他的位置上。
    • target : Observable
      如果事件在目标的Observable上触发则仅仅调用处理器， 否则 事件会从子类的Observable上冒泡

    组合选项
    使用这些选项参数,可能会组合出不同类型的监听器：

    一个延迟的，一次性的监听器。

    myDataView.on('click', this.onClick, this, {
single: true,
delay: 100
});

    一次调用附加多个处理器
    该方法同样支持传递一个包含指定的多个处理器的属性的配置对象参数。

    myGridPanel.on({
'click' : {
    fn: this.onClick,
    scope: this,
    delay: 100
},
'mouseover' : {
    fn: this.onMouseOver,
    scope: this
},
'mouseout' : {
    fn: this.onMouseOut,
    scope: this
}
});

    或者一个简写的语法：

    myGridPanel.on({
'click' : this.onClick,
'mouseover' : this.onMouseOver,
'mouseout' : this.onMouseOut,
 scope: this
});
返回值:
  • void
Observable
connect () : void
连接到服务端并开始轮询操作。 如需处理每个响应，可以订阅data事件。
连接到服务端并开始轮询操作。 如需处理每个响应，可以订阅data事件。
参数:
  • 无。
返回值:
  • void
PollingProvider
disconnect () : void
从服务端断开并停止轮询操作。 在断开成功后将会触发disconnect事件。
从服务端断开并停止轮询操作。 在断开成功后将会触发disconnect事件。
参数:
  • 无。
返回值:
  • void
PollingProvider
enableBubble( String/Array events ) :void
是否现在使得事件会被该Observable触发并调用 this.getBubbleTarget()方法在拥有者的继承树...

是否现在使得事件会被该Observable触发并调用 this.getBubbleTarget()方法在拥有者的继承树中冒泡。Observable的基础类中没有该方法的实现。

该方法一般被Ext.Components用来冒泡事件到拥有者的容器。参看Ext.Component.getBubbleTarget默认的实现 在Ext.Component中返回组件的直接拥有者。但是如果需要的是一个已知的目标，该方法可以被重写来更快的访问需求的目标。

例子:

Ext.override(Ext.form.Field, {
    // 添加方法到Field的initComponent上改变事件为冒泡
    initComponent : Ext.form.Field.prototype.initComponent.createSequence(function() {
        this.enableBubble('change');
    }),

    // 我们知道我们想让Field的事件冒泡到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() {
            // 如果样式被修改标题会变红。
            myForm.header.setStyle('color', 'red');
        }
    }
});
参数:
  • events : String/Array
    冒泡的事件名，或事件名数组
返回值:
  • void
Observable
fireEvent( String eventName, Object... args ) : Boolean
用传入的参数触发指定的事件 (减去事件名)。 一个事件可以被设置为冒泡 Obse...

用传入的参数触发指定的事件 (减去事件名)。

一个事件可以被设置为冒泡到Observable父类继承树(参看 Ext.Component.getBubbleTarget) 调用enableBubble实现。

参数:
  • eventName : String
    触发的事件名。
  • args : Object...
    传递给处理器的可变长度参数。
返回值:
  • Boolean
    如果有任何的处理器返回false则返回false，否则返回true。
Observable
hasListener( String eventName ) : Boolean
检测对象是否包含指定事件的任何监听器
检测对象是否包含指定事件的任何监听器
参数:
  • eventName : String
    检测的事件名
返回值:
  • Boolean
    如果事件被监听则为true，否则为false
Observable
isConnected () : void
返回当前是否连接到了服务端。 抽象方法，由子类实现。
返回当前是否连接到了服务端。 抽象方法，由子类实现。
参数:
  • 无。
返回值:
  • void
Provider
on( String eventName, Function handler, [Object scope], [Object options] ) : void
给对象添加事件处理器 (addListener的简写形式)
给对象添加事件处理器 (addListener的简写形式。)
参数:
  • eventName : String
    监听的事件类型
  • handler : Function
    事件调用的方法
  • scope : Object
    （可选）处理方法执行时的作用域 (this 的引用)。 如果被忽略。默认为触发事件的对象。
  • options : Object
    可选 包含处理器配置的对象。
返回值:
  • void
Observable
purgeListeners() : void
移除对象上所有的监听器
移除对象上所有的监听器
参数:
  • 无。
返回值:
  • void
Observable
relayEvents( Object o, Array events ) : void
从指定的Observable上传递选择的事件就好像被当前对象触发一样。
从指定的Observable上传递选择的事件就好像被当前对象触发一样。
参数:
  • o : Object
    该Observable上的事件被当前对象传递。
  • events : Array
    传递的数组名。
返回值:
  • void
Observable
removeListener( String eventName, Function handler, [Object scope] ) : void
删除一个事件处理器。
删除一个事件处理器。
参数:
  • eventName : String
    处理器关联的事件类型。
  • handler : Function
    移除的处理器。 这应该是传递到addListener里的方法的引用。
  • scope : Object
    （可选）处理器指定的初始作用域。
返回值:
  • void
Observable
resumeEvents() : void
重新开始触发事件。(参见suspendEvents) 如果事件以queueSuspended参数被挂起，则在事件被挂起时 ...
重新开始触发事件。(参见 suspendEvents) 如果事件以queueSuspended 参数被挂起，则在事件被挂起时触发的事件会被传递到所有的监听器上
参数:
  • 无。
返回值:
  • void
Observable
suspendEvents( Boolean queueSuspended ) : void
暂停触发所有的事件。 (参看resumeEvents)
暂停触发所有的事件。（参看 resumeEvents)
参数:
  • queueSuspended : Boolean
    如果传递为true则排列好暂停的事件使得在调用 resumeEvents 后再触发它们，而不是抛弃所有暂停的事件。
返回值:
  • void
Observable
un( String eventName, Function handler, [Object scope] ) : void
删除一个事件处理器(removeListener方法的简写形式)
删除一个事件处理器(removeListener方法的简写形式。)
参数:
  • eventName : String
    处理器关联的事件类型
  • handler : Function
    被删除的处理器 这应该是传入 addListener 中的方法的引用。
  • scope : Object
    （可选）为处理器指定的初始作用域。
返回值:
  • void
Observable

公共事件

Event Defined By
beforepoll : ( Ext.direct.PollingProvider  )
在轮询发生之前立即触发，事件处理函数可以返回一个false取消轮询操作。
在轮询发生之前立即触发，事件处理函数可以返回一个false取消轮询操作。
监听器将会以如下参数格式被调用:
  • : Ext.direct.PollingProvider
PollingProvider
connect : ( Ext.direct.Provider provider )
当Provider连接到服务端时触发
当Provider连接到服务端时触发
监听器将会以如下的参数格式被调用:
  • provider : Ext.direct.Provider
    Provider
Provider
data : ( Ext.direct.Provider provider , event e )
当Provider接收到来自服务器的数据时触发
当Provider接收到来自服务器的数据时触发
监听器将会以如下的参数格式被调用:
  • provider : Ext.direct.Provider
    Provider
  • e : event
    发生的 Ext.Direct.Event 类型。
Provider
disconnect : ( Ext.direct.Provider provider )
当Provider从服务端断开连接时触发。
当Provider从服务端断开连接时触发。
监听器将会以如下的参数格式被调用:
  • provider : Ext.direct.Provider
    Provider
Provider
exception : ()
当Provider接受到来自服务端的一个异常时触发
当Provider接受到来自服务端的一个异常时触发
监听器将会以如下的参数格式被调用:
  • 无。
Provider
poll : ( Ext.direct.PollingProvider  )
此事件尚未被实现。
此事件尚未被实现。
监听器将会以如下参数格式被调用:
  • : Ext.direct.PollingProvider
PollingProvider


Observable
    Provider

Class Ext.direct.Provider

包: | Ext.direct
定义类的文件: | Provider.js
类: | Provider
子类: | JsonProvider
继承自: | Observable

Ext.direct.Provider是一个抽象类，该类被设计用来继承。

例如，ExtJs实现了如下子类:

Provider
|
+---JsonProvider
    |
    +---PollingProvider
    |
    +---RemotingProvider

配置项

Config Options Defined By
id : String
provider的唯一id(默认为 auto-assigned id)。 如果你需要以后再次访问provider...
provider的唯一id(默认为 auto-assigned id)。 如果你需要以后再次访问provider，并且没有有效的对象引用，你必须指定一个id， 例如:
Ext.Direct.addProvider(
    {
        type: 'polling',
        url:  'php/poll.php',
        id:   'poll-provider'
    }
);

var p = Ext.Direct.getProvider('poll-provider');
p.disconnect();
Provider
listeners : Object
一个包含一个或多个事件处理器的配置对象，会在初始化的时候被添加到目标对象上...

一个包含一个或多个事件处理器的配置对象，会在初始化的时候被添加到目标对象上。 该配置对象应该是一个有效的监听器配置对象就像 addListener例子中指定的一样可一次附加多个处理器。

ExtJs Components上的DOM事件

一些 ExtJs Component 类导出时会选择一些DOM事件(例如 "click", "mouseover" 等等), 这通常只是在有额外的值可以被添加时发生。例如DataView类的 click事件会传递被点击的节点。也可以直接在Component的HTMLElementevent上访问DOM事件，但必需在Component被渲染后监听器才能添加到Element 上。可以按照以下步骤添加插件:

// 插件会用一个监听器配置对象进行配置。
//该组件会被添加到所有处理方法的参数列表上。
Ext.DomObserver = Ext.extend(Object, {
    constructor: function(config) {
        this.listeners = config.listeners ? config.listeners : config;
    },

    // 组件将自己传递进了插件的初始化方法里
    init: function(c) {
        var p, l = this.listeners;
        for (p in l) {
            if (Ext.isFunction(l[p])) {
                l[p] = this.createHandler(l[p], c);
            } else {
                l[p].fn = this.createHandler(l[p].fn, c);
            }
        }

        // 渲染后立即添加监听器到元素上
        c.render = c.render.createSequence(function() {
            var e = c.getEl();
            if (e) {
                e.on(l);
            }
        });
    },

    createHandler: function(fn, c) {
        return function(e) {
            fn.call(this, e, c);
        };
    }
});

var combo = new Ext.form.ComboBox({

    // 元素被点击后折叠
    plugins: [ new Ext.DomObserver({
        click: function(evt, comp) {
            comp.collapse();
        }
    })],
    store: myStore,
    typeAhead: true,
    mode: 'local',
    triggerAction: 'all'
});

Observable
priority : Number
请求的优先级。数值越小，优先级越高， 0意为“全双工”(一直开启)。所有Providers都默认为 1除了PollingProvider默认为...
请求的优先级。数值越小，优先级越高， 0意为“全双工”(一直开启)。所有Providers都默认为 1除了PollingProvider默认为 3。
Provider
type : String
必须，默认为 undefined。 provider的 type指定为 Ext.Direct。 addProvider用来创建 一个新的Provider。可接受的默认值有:...
必须，默认为 undefined。 provider的 type指定为 Ext.Direct。 addProvider用来创建 一个新的Provider。可接受的默认值有:
  • polling : PollingProvider
  • remoting : RemotingProvider
Provider

公共属性

Property Defined By
connect : ( Ext.direct.Provider provider )
当Provider连接到服务端时触发
当Provider连接到服务端时触发
监听器将会以如下的参数格式被调用:
  • provider : Ext.direct.Provider
    Provider
Provider
disconnect : ( Ext.direct.Provider provider )
当Provider从服务端断开连接时触发。
当Provider从服务端断开连接时触发。
监听器将会以如下的参数格式被调用:
  • provider : Ext.direct.Provider
    Provider
Provider

公共方法

Method Defined By
addEvents( Object|String o, string Optional. ) : void
添加指定的事件到事件列表上，事件会被该Observable触发。
添加指定的事件到事件列表上，事件会被该Observable触发。
参数:
  • o : Object|String
    以事件名作为属性true作为值的对象 或者当多个事件名被分开的传递时则为第一个事件名。
  • Optional. : string
    事件名被分开的传递时则为事件名。 用法:
    this.addEvents('storeloaded', 'storecleared');
返回值:
  • void
Observable
addListener( String eventName, Function handler, [Object scope], [Object options] ) : void
给对象添加事件处理器。
给对象添加事件处理器。
参数:
  • eventName : String
    监听的事件名。
  • handler : Function
    事件调用的方法
  • scope : Object
    （可选）处理方法执行的作用域 (this的引用 reference)。 如果被忽略。默认为触发事件的对象。
  • options : Object
    （可选）包含处理器配置和属性的对象。 可能包含以下的属性:
    • scope : Object
      处理方法执行的作用域(this的引用) 。 如果被忽略。默认为触发事件的对象。
    • delay : Number
      在触发事件后延迟调用处理器的毫秒数。
    • single : Boolean
      如果为True则添加一个处理器来处理下一次的事件触发（仅一次），然后移除自己。
    • buffer : Number
      使得处理器延迟指定毫秒数后预定的运行在 一个Ext.util.DelayedTask中 。 如果事件在时间内再一次被触发，原始的处理器不会被调用，但是新的处理器会预定的在他的位置上。
    • target : Observable
      如果事件在目标的Observable上触发则仅仅调用处理器， 否则 事件会从子类的Observable上冒泡

    组合选项
    使用这些选项参数,可能会组合出不同类型的监听器：

    一个延迟的，一次性的监听器。

    myDataView.on('click', this.onClick, this, {
single: true,
delay: 100
});

    一次调用附加多个处理器
    该方法同样支持传递一个包含指定的多个处理器的属性的配置对象参数。

    myGridPanel.on({
'click' : {
    fn: this.onClick,
    scope: this,
    delay: 100
},
'mouseover' : {
    fn: this.onMouseOver,
    scope: this
},
'mouseout' : {
    fn: this.onMouseOut,
    scope: this
}
});

    或者一个简写的语法：

    myGridPanel.on({
'click' : this.onClick,
'mouseover' : this.onMouseOver,
'mouseout' : this.onMouseOut,
 scope: this
});
返回值:
  • void
Observable
enableBubble( String/Array events ) :void
是否现在使得事件会被该Observable触发并调用 this.getBubbleTarget()方法在拥有者的继承树...

是否现在使得事件会被该Observable触发并调用 this.getBubbleTarget()方法在拥有者的继承树中冒泡。Observable的基础类中没有该方法的实现。

该方法一般被Ext.Components用来冒泡事件到拥有者的容器。参看Ext.Component.getBubbleTarget默认的实现 在Ext.Component中返回组件的直接拥有者。但是如果需要的是一个已知的目标，该方法可以被重写来更快的访问需求的目标。

例子:

Ext.override(Ext.form.Field, {
    // 添加方法到Field的initComponent上改变事件为冒泡
    initComponent : Ext.form.Field.prototype.initComponent.createSequence(function() {
        this.enableBubble('change');
    }),

    // 我们知道我们想让Field的事件冒泡到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() {
            // 如果样式被修改标题会变红。
            myForm.header.setStyle('color', 'red');
        }
    }
});
参数:
  • events : String/Array
    冒泡的事件名，或事件名数组
返回值:
  • void
Observable
fireEvent( String eventName, Object... args ) : Boolean
用传入的参数触发指定的事件 (减去事件名)。 一个事件可以被设置为冒泡 Obse...

用传入的参数触发指定的事件 (减去事件名)。

一个事件可以被设置为冒泡到Observable父类继承树(参看 Ext.Component.getBubbleTarget) 调用enableBubble实现。

参数:
  • eventName : String
    触发的事件名。
  • args : Object...
    传递给处理器的可变长度参数。
返回值:
  • Boolean
    如果有任何的处理器返回false则返回false，否则返回true。
Observable
hasListener( String eventName ) : Boolean
检测对象是否包含指定事件的任何监听器
检测对象是否包含指定事件的任何监听器
参数:
  • eventName : String
    检测的事件名
返回值:
  • Boolean
    如果事件被监听则为true，否则为false
Observable
isConnected () : void
返回当前是否连接到了服务端。 抽象方法，由子类实现。
返回当前是否连接到了服务端。 抽象方法，由子类实现。
参数:
  • 无。
返回值:
  • void
Provider
on( String eventName, Function handler, [Object scope], [Object options] ) : void
给对象添加事件处理器 (addListener的简写形式)
给对象添加事件处理器 (addListener的简写形式。)
参数:
  • eventName : String
    监听的事件类型
  • handler : Function
    事件调用的方法
  • scope : Object
    （可选）处理方法执行时的作用域 (this 的引用)。 如果被忽略。默认为触发事件的对象。
  • options : Object
    可选 包含处理器配置的对象。
返回值:
  • void
Observable
purgeListeners() : void
移除对象上所有的监听器
移除对象上所有的监听器
参数:
  • 无。
返回值:
  • void
Observable
relayEvents( Object o, Array events ) : void
从指定的Observable上传递选择的事件就好像被当前对象触发一样。
从指定的Observable上传递选择的事件就好像被当前对象触发一样。
参数:
  • o : Object
    该Observable上的事件被当前对象传递。
  • events : Array
    传递的数组名。
返回值:
  • void
Observable
removeListener( String eventName, Function handler, [Object scope] ) : void
删除一个事件处理器。
删除一个事件处理器。
参数:
  • eventName : String
    处理器关联的事件类型。
  • handler : Function
    移除的处理器。 这应该是传递到addListener里的方法的引用。
  • scope : Object
    （可选）处理器指定的初始作用域。
返回值:
  • void
Observable
resumeEvents() : void
重新开始触发事件。(参见suspendEvents) 如果事件以queueSuspended参数被挂起，则在事件被挂起时 ...
重新开始触发事件。(参见 suspendEvents) 如果事件以queueSuspended 参数被挂起，则在事件被挂起时触发的事件会被传递到所有的监听器上
参数:
  • 无。
返回值:
  • void
Observable
suspendEvents( Boolean queueSuspended ) : void
暂停触发所有的事件。 (参看resumeEvents)
暂停触发所有的事件。（参看 resumeEvents)
参数:
  • queueSuspended : Boolean
    如果传递为true则排列好暂停的事件使得在调用 resumeEvents 后再触发它们，而不是抛弃所有暂停的事件。
返回值:
  • void
Observable
un( String eventName, Function handler, [Object scope] ) : void
删除一个事件处理器(removeListener方法的简写形式)
删除一个事件处理器(removeListener方法的简写形式。)
参数:
  • eventName : String
    处理器关联的事件类型
  • handler : Function
    被删除的处理器 这应该是传入 addListener 中的方法的引用。
  • scope : Object
    （可选）为处理器指定的初始作用域。
返回值:
  • void
Observable

公共事件

Event Defined By
connect : ( Ext.direct.Provider provider )
当Provider连接到服务端时触发
当Provider连接到服务端时触发
监听器将会以如下的参数格式被调用:
  • provider : Ext.direct.Provider
    Provider
Provider
data : ( Ext.direct.Provider provider , event e )
当Provider接收到来自服务器的数据时触发
当Provider接收到来自服务器的数据时触发
监听器将会以如下的参数格式被调用:
  • provider : Ext.direct.Provider
    Provider
  • e : event
    发生的 Ext.Direct.Event 类型。
Provider
disconnect : ( Ext.direct.Provider provider )
当Provider从服务端断开连接时触发。
当Provider从服务端断开连接时触发。
监听器将会以如下的参数格式被调用:
  • provider : Ext.direct.Provider
    Provider
Provider
exception : ()
当Provider接受到来自服务端的一个异常时触发
当Provider接受到来自服务端的一个异常时触发
监听器将会以如下的参数格式被调用:
  • 无。
Provider


Observable
    Provider
      JsonProvider
        RemotingProvider

Class Ext.direct.RemotingProvider

包: | Ext.direct
定义类的文件: | RemotingProvider.js
类: | RemotingProvider
继承自: | JsonProvider

RemotingProvider 向客户端暴露了服务端方法的访问接口 (一个远程调用(RPC)连接类型，客户端可以在服务端发起一次调用)。

这将允许代码被组织成一种可维护的风格， 当在客户端和服务端提供一个清晰的路径时， 一些东西在使用URL时不常出现。

为了实现此目的，服务端必须描述什么个类、什么方法在客户端可用。 此配置典型地当API描述构建时，通过服务端的Ext.Direct堆栈输出。

配置项

Config Options Defined By
actions : Object
对象字面值，定义了服务端的actions和methods. 例如，Provider被配置为:...
对象字面值，定义了服务端的actions和methods. 例如，Provider被配置为:
"actions":{ // each property within the 'actions' object represents a server side Class
    "TestAction":[ // array of methods within each server side Class to be
    {              // stubbed out on client
        "name":"doEcho",
        "len":1
    },{
        "name":"multiply",// name of method
        "len":2           // The number of parameters that will be used to create an
                          // array of data to send to the server side function.
                          // Ensure the server sends back a Number, not a String.
    },{
        "name":"doForm",
        "formHandler":true, // direct the client to use specialized form handling method
        "len":1
    }]
}

注意，没必要使用Store，服务端方法可以在任何时刻被调用。 在以下例子中，一个客户端处理函数被用来 调用服务端"TestAction"类中的方法"multiply":

TestAction.multiply(
    2, 4, // pass two arguments to server, so specify len=2
    // callback function after the server is called
    // result: the result returned by the server
    //      e: Ext.Direct.RemotingEvent object
    function(result, e){
        var t = e.getTransaction();
        var action = t.action; // server side Class called
        var method = t.method; // server side method called
        if(e.status){
            var answer = Ext.encode(result); // 8

        }else{
            var msg = e.message; // failure message
        }
    }
);
在以上例子中，服务端函数"multiply"将会被传入两个参数 (2和4). "multiply"方法将会返回8，它将作为以上例子的 result.
RemotingProvider
enableBuffer : Number/Boolean
true或者 false 以启用或者禁用绑定方法调用。 如果此值被指定为一个数值，它将被作为...

true或者 false 以启用或者禁用绑定方法调用。 如果此值被指定为一个数值，它将被作为 发送一个批量请求的等待毫秒数(默认为 10).

在指定时间段内接收到的调用将会被集中在一起，并在一次请求中一次性发出， 通过降低到服务端来回的次数优化应用。(译者注：只降低请求/响应的次数)。

RemotingProvider
enableUrlEncode : String
指定那个参数持有给方法的参数。默认为 'data'.
RemotingProvider
id : String
provider的唯一id(默认为 auto-assigned id)。 如果你需要以后再次访问provider...
provider的唯一id(默认为 auto-assigned id)。 如果你需要以后再次访问provider，并且没有有效的对象引用，你必须指定一个id， 例如:
Ext.Direct.addProvider(
    {
        type: 'polling',
        url:  'php/poll.php',
        id:   'poll-provider'
    }
);

var p = Ext.Direct.getProvider('poll-provider');
p.disconnect();
Provider
listeners : Object
一个包含一个或多个事件处理器的配置对象，会在初始化的时候被添加到目标对象上...

一个包含一个或多个事件处理器的配置对象，会在初始化的时候被添加到目标对象上。 该配置对象应该是一个有效的监听器配置对象就像 addListener例子中指定的一样可一次附加多个处理器。

ExtJs Components上的DOM事件

一些 ExtJs Component 类导出时会选择一些DOM事件(例如 "click", "mouseover" 等等), 这通常只是在有额外的值可以被添加时发生。例如DataView类的 click事件会传递被点击的节点。也可以直接在Component的HTMLElementevent上访问DOM事件，但必需在Component被渲染后监听器才能添加到Element 上。可以按照以下步骤添加插件:

// 插件会用一个监听器配置对象进行配置。
//该组件会被添加到所有处理方法的参数列表上。
Ext.DomObserver = Ext.extend(Object, {
    constructor: function(config) {
        this.listeners = config.listeners ? config.listeners : config;
    },

    // 组件将自己传递进了插件的初始化方法里
    init: function(c) {
        var p, l = this.listeners;
        for (p in l) {
            if (Ext.isFunction(l[p])) {
                l[p] = this.createHandler(l[p], c);
            } else {
                l[p].fn = this.createHandler(l[p].fn, c);
            }
        }

        // 渲染后立即添加监听器到元素上
        c.render = c.render.createSequence(function() {
            var e = c.getEl();
            if (e) {
                e.on(l);
            }
        });
    },

    createHandler: function(fn, c) {
        return function(e) {
            fn.call(this, e, c);
        };
    }
});

var combo = new Ext.form.ComboBox({

    // 元素被点击后折叠
    plugins: [ new Ext.DomObserver({
        click: function(evt, comp) {
            comp.collapse();
        }
    })],
    store: myStore,
    typeAhead: true,
    mode: 'local',
    triggerAction: 'all'
});

Observable
maxRetries : Number
调用失败之后重新尝试的次数。默认为1.
RemotingProvider
namespace : String/Object
Remoting Provider的命名空间( 默认为浏览器的全局作用域 window). 明确指定命名空间对象，或者指定一个字符串隐式...
Remoting Provider的命名空间( 默认为浏览器的全局作用域 window). 明确指定命名空间对象，或者指定一个字符串隐式创建命名空间。
RemotingProvider
priority : Number
请求的优先级。数值越小，优先级越高， 0意为“全双工”(一直开启)。所有Providers都默认为 1除了PollingProvider默认为...
请求的优先级。数值越小，优先级越高， 0意为“全双工”(一直开启)。所有Providers都默认为 1除了PollingProvider默认为 3。
Provider
timeout : Number
每次请求的超时时间。默认为 undefined.
RemotingProvider
type : String
必须，默认为 undefined。 provider的 type指定为 Ext.Direct。 addProvider用来创建 一个新的Provider。可接受的默认值有:...
必须，默认为 undefined。 provider的 type指定为 Ext.Direct。 addProvider用来创建 一个新的Provider。可接受的默认值有:
  • polling : PollingProvider
  • remoting : RemotingProvider
Provider
url : String
必须。 Ext.Direct 连接到服务端的url路径。
RemotingProvider

公共属性

Property Defined By
connect : ( Ext.direct.Provider provider )
当Provider连接到服务端时触发
当Provider连接到服务端时触发
监听器将会以如下的参数格式被调用:
  • provider : Ext.direct.Provider
    Provider
Provider
disconnect : ( Ext.direct.Provider provider )
当Provider从服务端断开连接时触发。
当Provider从服务端断开连接时触发。
监听器将会以如下的参数格式被调用:
  • provider : Ext.direct.Provider
    Provider
Provider

公共方法

Method Defined By
addEvents( Object|String o, string Optional. ) : void
添加指定的事件到事件列表上，事件会被该Observable触发。
添加指定的事件到事件列表上，事件会被该Observable触发。
参数:
  • o : Object|String
    以事件名作为属性true作为值的对象 或者当多个事件名被分开的传递时则为第一个事件名。
  • Optional. : string
    事件名被分开的传递时则为事件名。 用法:
    this.addEvents('storeloaded', 'storecleared');
返回值:
  • void
Observable
addListener( String eventName, Function handler, [Object scope], [Object options] ) : void
给对象添加事件处理器。
给对象添加事件处理器。
参数:
  • eventName : String
    监听的事件名。
  • handler : Function
    事件调用的方法
  • scope : Object
    （可选）处理方法执行的作用域 (this的引用 reference)。 如果被忽略。默认为触发事件的对象。
  • options : Object
    （可选）包含处理器配置和属性的对象。 可能包含以下的属性:
    • scope : Object
      处理方法执行的作用域(this的引用) 。 如果被忽略。默认为触发事件的对象。
    • delay : Number
      在触发事件后延迟调用处理器的毫秒数。
    • single : Boolean
      如果为True则添加一个处理器来处理下一次的事件触发（仅一次），然后移除自己。
    • buffer : Number
      使得处理器延迟指定毫秒数后预定的运行在 一个Ext.util.DelayedTask中 。 如果事件在时间内再一次被触发，原始的处理器不会被调用，但是新的处理器会预定的在他的位置上。
    • target : Observable
      如果事件在目标的Observable上触发则仅仅调用处理器， 否则 事件会从子类的Observable上冒泡

    组合选项
    使用这些选项参数,可能会组合出不同类型的监听器：

    一个延迟的，一次性的监听器。

    myDataView.on('click', this.onClick, this, {
single: true,
delay: 100
});

    一次调用附加多个处理器
    该方法同样支持传递一个包含指定的多个处理器的属性的配置对象参数。

    myGridPanel.on({
'click' : {
    fn: this.onClick,
    scope: this,
    delay: 100
},
'mouseover' : {
    fn: this.onMouseOver,
    scope: this
},
'mouseout' : {
    fn: this.onMouseOut,
    scope: this
}
});

    或者一个简写的语法：

    myGridPanel.on({
'click' : this.onClick,
'mouseover' : this.onMouseOver,
'mouseout' : this.onMouseOut,
 scope: this
});
返回值:
  • void
Observable
enableBubble( String/Array events ) :void
是否现在使得事件会被该Observable触发并调用 this.getBubbleTarget()方法在拥有者的继承树...

是否现在使得事件会被该Observable触发并调用 this.getBubbleTarget()方法在拥有者的继承树中冒泡。Observable的基础类中没有该方法的实现。

该方法一般被Ext.Components用来冒泡事件到拥有者的容器。参看Ext.Component.getBubbleTarget默认的实现 在Ext.Component中返回组件的直接拥有者。但是如果需要的是一个已知的目标，该方法可以被重写来更快的访问需求的目标。

例子:

Ext.override(Ext.form.Field, {
    // 添加方法到Field的initComponent上改变事件为冒泡
    initComponent : Ext.form.Field.prototype.initComponent.createSequence(function() {
        this.enableBubble('change');
    }),

    // 我们知道我们想让Field的事件冒泡到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() {
            // 如果样式被修改标题会变红。
            myForm.header.setStyle('color', 'red');
        }
    }
});
参数:
  • events : String/Array
    冒泡的事件名，或事件名数组
返回值:
  • void
Observable
fireEvent( String eventName, Object... args ) : Boolean
用传入的参数触发指定的事件 (减去事件名)。 一个事件可以被设置为冒泡 Obse...

用传入的参数触发指定的事件 (减去事件名)。

一个事件可以被设置为冒泡到Observable父类继承树(参看 Ext.Component.getBubbleTarget) 调用enableBubble实现。

参数:
  • eventName : String
    触发的事件名。
  • args : Object...
    传递给处理器的可变长度参数。
返回值:
  • Boolean
    如果有任何的处理器返回false则返回false，否则返回true。
Observable
hasListener( String eventName ) : Boolean
检测对象是否包含指定事件的任何监听器
检测对象是否包含指定事件的任何监听器
参数:
  • eventName : String
    检测的事件名
返回值:
  • Boolean
    如果事件被监听则为true，否则为false
Observable
isConnected () : void
返回当前是否连接到了服务端。 抽象方法，由子类实现。
返回当前是否连接到了服务端。 抽象方法，由子类实现。
参数:
  • 无。
返回值:
  • void
Provider
on( String eventName, Function handler, [Object scope], [Object options] ) : void
给对象添加事件处理器 (addListener的简写形式)
给对象添加事件处理器 (addListener的简写形式。)
参数:
  • eventName : String
    监听的事件类型
  • handler : Function
    事件调用的方法
  • scope : Object
    （可选）处理方法执行时的作用域 (this 的引用)。 如果被忽略。默认为触发事件的对象。
  • options : Object
    可选 包含处理器配置的对象。
返回值:
  • void
Observable
purgeListeners() : void
移除对象上所有的监听器
移除对象上所有的监听器
参数:
  • 无。
返回值:
  • void
Observable
relayEvents( Object o, Array events ) : void
从指定的Observable上传递选择的事件就好像被当前对象触发一样。
从指定的Observable上传递选择的事件就好像被当前对象触发一样。
参数:
  • o : Object
    该Observable上的事件被当前对象传递。
  • events : Array
    传递的数组名。
返回值:
  • void
Observable
removeListener( String eventName, Function handler, [Object scope] ) : void
删除一个事件处理器。
删除一个事件处理器。
参数:
  • eventName : String
    处理器关联的事件类型。
  • handler : Function
    移除的处理器。 这应该是传递到addListener里的方法的引用。
  • scope : Object
    （可选）处理器指定的初始作用域。
返回值:
  • void
Observable
resumeEvents() : void
重新开始触发事件。(参见suspendEvents) 如果事件以queueSuspended参数被挂起，则在事件被挂起时 ...
重新开始触发事件。(参见 suspendEvents) 如果事件以queueSuspended 参数被挂起，则在事件被挂起时触发的事件会被传递到所有的监听器上
参数:
  • 无。
返回值:
  • void
Observable
suspendEvents( Boolean queueSuspended ) : void
暂停触发所有的事件。 (参看resumeEvents)
暂停触发所有的事件。（参看 resumeEvents)
参数:
  • queueSuspended : Boolean
    如果传递为true则排列好暂停的事件使得在调用 resumeEvents 后再触发它们，而不是抛弃所有暂停的事件。
返回值:
  • void
Observable
un( String eventName, Function handler, [Object scope] ) : void
删除一个事件处理器(removeListener方法的简写形式)
删除一个事件处理器(removeListener方法的简写形式。)
参数:
  • eventName : String
    处理器关联的事件类型
  • handler : Function
    被删除的处理器 这应该是传入 addListener 中的方法的引用。
  • scope : Object
    （可选）为处理器指定的初始作用域。
返回值:
  • void
Observable

公共事件

Event Defined By
beforecall : ( Ext.direct.RemotingProvider provider , Ext.Direct.Transaction transaction )
在客户端发出RPC调用之前立即触发。 通过从一个客户端处理函数返回false，你可以阻止执行调用。
在客户端发出RPC调用之前立即触发。 通过从一个客户端处理函数返回false，你可以阻止执行调用。
监听器将会以如下参数格式被调用:
  • provider : Ext.direct.RemotingProvider
  • transaction : Ext.Direct.Transaction
RemotingProvider
call : ( Ext.direct.RemotingProvider provider , Ext.Direct.Transaction transaction )
在向服务端发出请求之后立即触发。此事件不会在接收到响应后触发。
在向服务端发出请求之后立即触发。此事件不会在接收到响应后触发。
监听器将会以如下参数格式被调用:
  • provider : Ext.direct.RemotingProvider
  • transaction : Ext.Direct.Transaction
RemotingProvider
connect : ( Ext.direct.Provider provider )
当Provider连接到服务端时触发
当Provider连接到服务端时触发
监听器将会以如下的参数格式被调用:
  • provider : Ext.direct.Provider
    Provider
Provider
data : ( Ext.direct.Provider provider , event e )
当Provider接收到来自服务器的数据时触发
当Provider接收到来自服务器的数据时触发
监听器将会以如下的参数格式被调用:
  • provider : Ext.direct.Provider
    Provider
  • e : event
    发生的 Ext.Direct.Event 类型。
Provider
disconnect : ( Ext.direct.Provider provider )
当Provider从服务端断开连接时触发。
当Provider从服务端断开连接时触发。
监听器将会以如下的参数格式被调用:
  • provider : Ext.direct.Provider
    Provider
Provider
exception : ()
当Provider接受到来自服务端的一个异常时触发
当Provider接受到来自服务端的一个异常时触发
监听器将会以如下的参数格式被调用:
  • 无。
Provider


Class Ext.Direct.Transaction

包: | Ext
定义类的文件: | Transaction.js
类: | Direct.Transaction
继承自: | Object

Ext.Direct的支持类(不是被设计用来直接使用的)。

公共属性

该类没有公共属性。

公共方法

该类没有公共方法。

公共事件

该类没有公共事件。


Class Ext.DomHelper

包: | Ext
定义类的文件: | DomHelper.js
类: | DomHelper
继承自: | Object

DomHelper类提供了到DOM的抽象层，并显式支持通过DOM或者使用HTML片段创建元素。 它也拥有从你的构建DOM的代码中创建HTML片段模板的能力。

DomHelper元素描述对象

当创建元素时使用的配置对象。此对象的属性被假定为元素的属性，期望有 4个特别的属性:

  • tag :
    元素的标签名
  • children : or cn
    将被创建被添加的同一类型元素的定义对象数组。 这些可以按照你的需求嵌套任意深度。
  • cls :
    元素的class属性。 此参数可以终结HTML片段的"class"属性或者DOM节点的className属性， 取决于DomHelper是使用标签片段还是使用DOM.
  • html :
    元素的innerHTML

Insertion methods

通用的插入方式:

  • append :
  • insertBefore :
  • insertAfter :
  • overwrite :
  • createTemplate :
  • insertHtml :

示例

这是一个例子，拥有3个子项目的无序列表被插入到一个id为'my-div'的现有元素中:

var dh = Ext.DomHelper; // 创建快捷别名
// 描述对象
var spec = {
    id: 'my-ul',
    tag: 'ul',
    cls: 'my-list',
    // append children after creating
    children: [     // may also specify 'cn' instead of 'children'

        {tag: 'li', id: 'item0', html: 'List Item 0'},
        {tag: 'li', id: 'item1', html: 'List Item 1'},
        {tag: 'li', id: 'item2', html: 'List Item 2'}
    ]
};
var list = dh.append(
    'my-div', // the context element 'my-div' can either be the id or the actual node
    spec      // the specification object
);

该类中创建元素的描述参数也可以作为一个配置对象数组传递进来。 这可以被用来有效地向现有的容器中插入多个兄弟节点。 例如，如需向以上例子中插入更多列表元素:

dh.append('my-ul', [
    {tag: 'li', id: 'item3', html: 'List Item 3'},
    {tag: 'li', id: 'item4', html: 'List Item 4'}
]);

模板

真正的威力在内置的模板机制上。 替代创建或者添加任何元素， createTemplate 返回一个Template对象，它可以被一次又一次地使用，用来插入新元素。 再看以上例子，这次我们可以利用模板:

// 创建节点
var list = dh.append('my-div', {tag: 'ul', cls: 'my-list'});
// get template
var tpl = dh.createTemplate({tag: 'li', id: 'item{0}', html: 'List Item {0}'});

for(var i = 0; i < 5, i++){
    tpl.append(list, [i]); // use template to append to the actual node
}

一个使用模板的例子:

                var html = '"{0}" href="{1}" class="nav">{2}';

var tpl = new Ext.DomHelper.createTemplate(html);
tpl.append('blog-roll', ['link1', 'http://www.jackslocum.com/'
                , "Jack's Site"]);
tpl.append('blog-roll', ['link2', 'http://www.dustindiaz.com/'
                , "Dustin's Site"]);

同一个例子，使用命名参数:

                var html = '"{id}" href="{url}" class="nav">{text}';

var tpl = new Ext.DomHelper.createTemplate(html);
tpl.append('blog-roll', {
    id: 'link1',
    url: 'http://www.jackslocum.com/'
                ,
    text: "Jack's Site"
});
tpl.append('blog-roll', {
    id: 'link2',
    url: 'http://www.dustindiaz.com/'
                ,
    text: "Dustin's Site"
});

编译模板

模板可以使用正则表达式构建。 性能绝佳，但是如果你正在使用同一个模板添加一堆DOM元素， 你可以通过"compiling"模板 更好地提升性能。 compile()"工作的方式是 把模板解析并打碎成不懂的属性点，并且创建并执行一个动态函数。 创建的函数把这些碎片字符串连接起来并传递属性，而不是使用正则表达式。

var html = '"{id}" href="{url}" class="nav">{text}';

var tpl = new Ext.DomHelper.createTemplate(html);
tpl.compile();

//... use template like normal

提升性能

DomHelper将尽可能显式地创建HTML片段。 使用HTML片段替代DOM可以显著地提升性能。

创建元素用的描述参数也可以是字符串。 如果 useDom为 false，那么字符串将会被用作innerHTML。 如果 useDom为 true，字符串描述了创建文本节点的结果。 用法:

Ext.DomHelper.useDom = true; // 强制使用DOM，降低性能

该类是一个单例，不能直接实例化。

公共属性

Property |  | Defined By
 | useDom : Boolean True将会强制使用DOM而不是html片段 | DomHelper

公共方法

Method Defined By
applyStyles ( String/HTMLElement el , String/Object/Function styles ) : void
将一个样式描述应用到一个元素上
将一个样式描述应用到一个元素上
参数:
  • el : String/HTMLElement
    需要应用样式的元素
  • styles : String/Object/Function
    一个样式描述字符串，例如'width:100px'， 或者是一个格式如{width:'100px'}的对象， 或者是一个能返回以上描述的函数。
返回值:
  • void
DomHelper
createDom ( Object/String o ) : HTMLElement
创建一个新的DOM element(s)而不把它们插入到document中。
创建一个新的DOM element(s)而不把它们插入到document中。
参数:
  • o : Object/String
    DOM对象描述(和孩子)或者原始的HTML块
返回值:
  • HTMLElement
    新的没有插入到document中的节点
DomHelper
createTemplate ( Object o ) : Ext.Template
使用DOM对象描述创建一个新的Ext.Template
使用DOM对象描述创建一个新的Ext.Template
参数:
  • o : Object
    DOM对象描述(和孩子)
返回值:
  • Ext.Template
    新模板
DomHelper
insertHtml ( String where , HTMLElement el , String html ) : HTMLElement
向DOM中插入一个HTML片段。
向DOM中插入一个HTML片段。
参数:
  • where : String
    插入的html与el的位置关--- beforeBegin, afterBegin, beforeEnd, afterEnd.
  • el : HTMLElement
    内容元素
  • html : String
    HTML片段
返回值:
  • HTMLElement
    新节点
DomHelper
markup ( Object o ) : String
返回所传递Element(s)配置的标签。
返回所传递Element(s)配置的标签。
参数:
  • o : Object
    DOM对象描述(和孩子)
返回值:
  • String
DomHelper
overwrite ( Mixed el , Object/String o , [ Boolean returnElement ] ) : HTMLElement/Ext.Element
创建新的DOM element(s)并使用它们覆盖el中的内容。
创建新的DOM element(s)并使用它们覆盖el中的内容。
参数:
  • el : Mixed
    内容元素
  • o : Object/String
    DOM对象描述(和孩子)或者原始的HTML块
  • returnElement : Boolean
    (可选)true将会返回一个Ext.Element
返回值:
  • HTMLElement/Ext.Element
    新节点
DomHelper

公共事件

该类没有公共事件。


Class Ext.DomQuery

包: | Ext
定义类的文件: | DomQuery.js
类: | DomQuery
继承自: | Object
将查询编译到一个可复用的函数中，提供高效的selector/xpath处理。 可以插入新的伪类和matchers。该类工作在HTML和XML文档上（如果传递进来一个内容节点）。

DomQuery支持CSS3 selectors spec的大部分，连同一些自定义的选择子和基本的XPath。

以下所有的选择子、属性过滤器和伪类可以用任意的顺序组合。 例如："div.foo:nth-child(odd)[@foo=bar].bar:first" 将是完全合法的一个选择子。 节点的过滤器将会以它们出现的顺序处理， 这将允许你根据你自己的文档结构优化查询。

元素选择子:

  • * 任何元素
  • E 与E标签结合的任何元素
  • E F E的所有派生标签中，有F标签的元素
  • E > For E/F E的所有直接的拥有F标签的子类
  • E + F 所有具有F标签的元素，紧靠的前一个元素有E标签
  • E ~ F 所有具有F标签的元素，前一个兄弟元素有E标签

属性选择子:

@和引号是可选项。例如，div[@foo='bar']也是一个合法的属性选择子。

  • E[foo] 有一个属性："foo"
  • E[foo=bar] 有一个等于"bar"的属性"foo"
  • E[foo^=bar] 有一个以"bar"开头的属性"foo"
  • E[foo$=bar] 有一个以"bar"结束的属性"foo"
  • E[foo*=bar] 有一个包含"bar"子字符串的属性"foo"
  • E[foo%=2] 有一个能被2整除的属性"foo"
  • E[foo!=bar] 有一个不等于"bar"的属性

伪类:

  • E:first-child E是其父亲的第一个孩子
  • E:last-child E是其父亲的最后一个孩子
  • E:nth-child(n) E是其父亲的第n个孩子(从1开始递增)
  • E:nth-child(odd) E是其父亲的奇数个孩子
  • E:nth-child(even) E是其父亲的偶数个孩子
  • E:only-child E是其父亲唯一的孩子
  • E:checked E是一个有选择属性的元素，并且其选中状态为true(例如一个radio或者checkbox)
  • E:first 结果集中的第一个E元素
  • E:last 结果集中的最后一个E元素
  • E:nth(n) 结果集中的第n个E元素(从1开始)
  • E:odd nth-child(奇数)的简写
  • E:even nth-child(偶数)的简写
  • E:contains(foo) E的innerHTML，包含"foo"子字符串
  • E:nodeValue(foo) 包含一个textNode的E，textNode有一个等于"foo"的nodeValue
  • E:not(S) 一个与简单的S选择子不相等的E元素
  • E:has(S) 一个E元素，拥有与简单的S选择子匹配的派生类
  • E:next(S) 一个E元素，它的下一个兄弟节点与简单的S选择子相匹配
  • E:prev(S) 一个E元素，它的上一个兄弟节点与简单的S选择子相匹配
  • E:any(S1|S2|S2) 一个E元素，它与简单选择子S1, S2 或者 S3//\\中任意个匹配

CSS值选择子:

  • E{display=none} css值"display"等于"none"
  • E{display^=none} css值"display"以"none"开始
  • E{display$=none} css值"display"以"none"结束
  • E{display*=none} css值"display"包含子字符串"none"
  • E{display%=2} css值"display"可以被2整除
  • E{display!=none} css值"display"不等于"none"

这是一个单例的类，不能直接实例化。

公共属性

Property Defined By
matchers : Object
需要匹配的正则表达式和代码片段集合。 ()中获取到的每个组都会替代选中声明中的{}...
需要匹配的正则表达式和代码片段集合。 ()中获取到的每个组都会替代选中声明中的{}，与它们的索引指定的相同。
DomQuery
pseudos : Object
哈希对象型"伪类"过滤函数，在过滤选中对象时使用。 每个函数都被传递两个参数...

哈希对象型"伪类"过滤函数，在过滤选中对象时使用。 每个函数都被传递两个参数:

  • c : Array
    需要进行过滤的DOM元素数组。
  • v : String
    选择子中提供的参数(如果存在)。

一个过滤函数，返回一个符合伪类的DOM元素数组。

除了以上列出的伪类，比如 first-child 和 nth-child ， 根据特定应用中的需求，开发者可以添加额外的、自定义的伪类过滤器，用来 选择元素。

例如，需要过滤 <a> 元素，仅返回到外部资源的链接:

Ext.DomQuery.pseudos.external = function(c, v){
    var r = [], ri = -1;
    for(var i = 0, ci; ci = c[i]; i++){
//      Include in result set only if it's a link to an external resource

        if(ci.hostname != location.hostname){
            r[++ri] = ci;
        }
    }
    return r;
};
 外部链接可以使用如下声明进行收集:
var externalLinks = Ext.select("a:external");
DomQuery

公共方法

Method Defined By
compile ( String selector , [ String type ] ) : Function
将一个selector/xpath查询编译成一个可复用的函数。 返回的函数有一个参数"root" (可选)...
将一个selector/xpath查询编译成一个可复用的函数。 返回的函数有一个参数"root" (可选)， 它是上下文节点，也是查询的起始点。
参数:
  • selector : String
    selector/xpath查询
  • type : String
    (可选)对于简单选择器匹配要么是"select" (默认)或者是"simple"
返回值:
  • Function
DomQuery
filter ( Array el , String selector , Boolean nonMatches ) : Array
过滤一个元素数组，直到找到一个与简单选择子匹配的项目 (例如：div.some-class 或者 span:first-child)
过滤一个元素数组，直到找到一个与简单选择子匹配的项目 (例如：div.some-class 或者 span:first-child)
参数:
  • el : Array
    需要过滤的元素数组
  • selector : String
    需要测试的简单选择子
  • nonMatches : Boolean
    如果为true，返回与选择子不匹配的元素，而不是匹配的
返回值:
  • Array
    与选择子相匹配的DOM元素数组。 如果没有匹配的项目，返回空数组。
DomQuery
is ( String/HTMLElement/Array el , String selector ) : Boolean
如果传递进来的element(s)与传递进来的简单选择子相匹配，返回true (例如 div.some-class 或者 span:first-child)
如果传递进来的element(s)与传递进来的简单选择子相匹配，返回true (例如 div.some-class 或者 span:first-child)
参数:
  • el : String/HTMLElement/Array
    一个元素id、元素或者元素数组
  • selector : String
    需要测试的简单选择子
返回值:
  • Boolean
DomQuery
jsSelect ( String selector , [ Node/String root ] ) : Array
选择一组元素。
选择一组元素。
参数:
  • selector : String
    selector/xpath查询(可以是一个以逗号分隔的选择子列表)
  • root : Node/String
    (可选) 查询的起始点 (默认值为 document)
返回值:
  • Array
    与选择子相匹配的DOM元素数组。 如果没有匹配的项目，返回空数组。
DomQuery
operators () : void
运算符比较函数集合。 默认的运算符为 =, !=, ^=, $=, *=, %=, |= and ~=。 可以添加新的操作符，只要符合格式...
运算符比较函数集合。 默认的运算符为 =, !=, ^=, $=, *=, %=, |= and ~=。 可以添加新的操作符，只要符合格式 c= c是任何非空格字符> <
参数:
  • 无。
返回值:
  • void
DomQuery
selectNode ( String selector , [ Node root ] ) : Element
选择单个元素。
选择单个元素。
参数:
  • selector : String
    selector/xpath查询
  • root : Node
    (可选) 查询的起始点 (默认值为 document)
返回值:
  • Element
    与选择子相匹配的DOM元素
DomQuery
selectNumber ( String selector , [ Node root ], Number defaultValue ) : Number
选择一个节点的值，解析成整数或者浮点数。 返回defaultValue，如果没有指定任何值则返回0
选择一个节点的值，解析成整数或者浮点数。 返回defaultValue，如果没有指定任何值则返回0
参数:
  • selector : String
    selector/xpath查询
  • root : Node
    (可选) 查询的起始点 (默认值为 document)
  • defaultValue : Number
返回值:
  • Number
DomQuery
selectValue ( String selector , [ Node root ], String defaultValue ) : String
选择节点的一个值，可以选择使用defaultValue替换null值。
选择节点的一个值，可以选择使用defaultValue替换null值。
参数:
  • selector : String
    selector/xpath查询
  • root : Node
    (可选) 查询的起始点 (默认值为 document)。
  • defaultValue : String
返回值:
  • String
DomQuery

公共事件

该类没有公共事件。


Observable
    Component
      Editor

Class Ext.Editor

包: | Ext
定义类的文件: | Editor.js
类: | Editor
子类: | TreeEditor
继承自: | Component
一个基本的编辑输入栏，在需要时负责处理显示/隐藏 ，并且有一些内置的调整大小和处理事件的逻辑。

配置项

Config Options Defined By
alignment : String
对齐到的位置(详见Ext.Element.alignTo，默认值为"c-c?")。
Editor
allowBlur : Boolean
设置值为true，当该字段失去焦点时，完成编辑过程。默认值为true。
Editor
allowDomMove : Boolean
在渲染时组件是否可以移动Dom节点(默认为true)。
Component
applyTo : Mixed
指定一个元素的id、一个DOM元素或者一个已经存在并被渲染到DIV中的元素，此DIV已经被...

指定一个元素的id、一个DOM元素或者一个已经存在并被渲染到DIV中的元素，此DIV已经被 渲染到document中，并且为当前组件指定了一些结构化的标签。

  • 描述 :
      当使用了 applyTo， 在主元素中也可以用id或者CSS类名来指定组件的托管部分， 并且，如果可以的话，创建的组件可能也会试图在那个标签中创建它的子组件。
  • 注意 :
      当使用此配置项时，无需调用render()方法。
      如果指定了applyTo属性，任何传递给 renderTo 的值都会被忽略，并且目标元素的父节点将会自动被用作组件的容器。
Component
autoEl : Mixed
一个表签名或者一个 DomHelper 描述，用来创建 Element ，它将封装当前组件...

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

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

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

{
    xtype: 'box',
    autoEl: {
        tag: 'img',
        src: 'http://www.example.com/example.jpg'

    }
}, {
    xtype: 'box',
    autoEl: {
        tag: 'blockquote',
        html: 'autoEl is cool!'
    }
}, {
    xtype: 'container',
    autoEl: 'ul',
    cls: 'ux-unordered-list',
    items: {
        xtype: 'box',
        autoEl: 'li',
        html: 'First list item'
    }
}
Component
autoShow : Boolean
如果组件需要检测隐藏CSS属性(如 'x-hidden' 或者 'x-hide-display')并且在渲染时删除...
如果组件需要检测隐藏CSS属性(如 'x-hidden' 或者 'x-hide-display')并且在渲染时删除它们 (默认为false)，设置此值为true。
Component
autoSize : Boolean/String
设置为true，编辑器自动采用底层字段的大小，"width"采用其宽度值，"height"采用...
设置为true，编辑器自动采用底层字段的大小，"width"采用其宽度值，"height"采用其高度值，"auto"使用字段的规格大小。(默认值为false)
Editor
bubbleEvents : Array
一个事件数组，当这些事件被触发时，将会被冒泡到所有父容器中。参见....

一个事件数组，当这些事件被触发时，将会被冒泡到所有父容器中。参见 Ext.util.Observable.enableBubble。 默认为 []。

Component
cancelOnEsc : Boolean
设置为true，按下Escape键取消编辑。默认值为true。
Editor
clearCls : String
应用到特殊的clearing div的CSS类， 这个clearing div直接渲染到每个form field的包装器后面...

应用到特殊的clearing div的CSS类， 这个clearing div直接渲染到每个form field的包装器后面，以提供 清除field的功能(默认为 'x-form-clear-left')。

注意: 只有在当前组件被渲染到一个使用FormLayout 布局(例如 Ext.form.FormPanel 或者指定 layout:'form')的 容器中、或者是指定了一个fieldLabel 、或者指定isFormField=true 时此配置才有效。

另请参见 Ext.layout.FormLayout. fieldTpl。

Component
cls : String
一个可选的额外CSS类，它将被添加到当前组件的元素上(默认为'')...
一个可选的额外CSS类，它将被添加到当前组件的元素上(默认为'')。 此属性对于在组件上，或者它的任何使用标准CSS规则的孩子节点上， 添加定制的样式非常有用。
Component
completeOnEnter : Boolean
设置为true，完成时按下回车键结束编辑。默认值为true。
Editor
constrain : Boolean
设置为true，将编辑器约束到视图
Editor
contentEl : String
(可选)指定一个已存在的HTML元素，或者一个已存在HTML元素的...

(可选)指定一个已存在的HTML元素，或者一个已存在HTML元素的 id ，它们将被用作当前组件的内容。

  • 描述 :
    此配置选项被用来将一个已存在的HTML元素 插入到一个新组件(在组件渲染之后它简单地移动DOM元素) 的layout元素中，使它成为该组件的内容。
  • 注意 :
    指定的HTML元素将被append到组件的layout元素中， 在所有配置的 HTML 被插入之后， 并且，这样的话，在render事件 被触发时，document中将不再包含此元素。
    指定的HTML元素将不会参与组件所有可能使用的 layout 过程(译者注：指这些HTML元素 不会参与布局操作)。 它仅是HTML而已。布局操作实在孩子 items 上进行的。
    添加 x-hidden 或者 x-hide-display CSS类，以防在内容渲染到panel时发生闪烁。
Component
ctCls : String
一个可选的外部CSS样式，添加到这个组件的容器(默认值为 '')。 这个方法对于使用标准的CSS规则...

一个可选的外部CSS样式，添加到这个组件的容器(默认值为 '')。 这个方法对于使用标准的CSS规则，为组件或它的任何一个子组件添加特定的样式非常有用。 参见 Ext.layout.ContainerLayout和 extraCls 。

注意: ctCls 默认为 ''期望如下的类，它们将指定一个默认值:

  • Box Layout : 'x-box-layout-ct'
使用一个额外的CSS类配置以上的Class，它是append到默认对象上的。例如， 对于BoxLayout (Hbox and Vbox):
                                ctCls: 'x-box-layout-ct custom-class'

Component
data : Mixed
初始化数据集，它将被应用到 tpl 上以刷新组件的内容区域。
Component
disabled : Boolean
当前组件处于无效状态时为true。 Read-only.
Component
disabledClass : String
当组件处于无效状态时添加到组件上的CSS类(默认为 'x-item-disabled')。
Component
field : Ext.form.Field
Field对象(或他的子类)或field的配置对象
Editor
fieldLabel : String
紧靠此field显示的标签文本(默认值为 '')。注意...

紧靠此field显示的标签文本(默认值为 '')。

注意:只有在当前组件被渲染到一个使用FormLayout 的容器中时，此配置才有效。 (例如 Ext.form.FormPanel 或 指定 layout:'form')。

另请参见 hideLabel 、 Ext.layout.FormLayout和 fieldTpl。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Name'
    }]
});
Component
hidden : Boolean
如果当前组件处于隐藏状态，此值为true。Read-only。
Component
hideEl : Boolean
设置为false，在显示编辑器时保持所绑定的元素为可见状态(默认值为 true)
Editor
hideLabel : Boolean
true时完全隐藏label元素 ( label 和 separator)。 默认为 false。 默认情况下，即使你不指定...

true时完全隐藏label元素 ( label 和 separator)。 默认为 false。 默认情况下，即使你不指定 fieldLabel 它的空间仍然会被保留，这样这块区域会与其它确实拥有label的区域位于同一排。 讲此值设置为 true 将导致此区域不再保留此空间。

注意: 参见 clearCls 的注释。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield'
        hideLabel: true
    }]
});
Component
hideMode : String
组件如何隐藏，支持的值有： 'visibility' (css visibility), 'offsets' (位置偏移量为负值) 和...

组件如何隐藏，支持的值有： 'visibility' (css visibility), 'offsets' (位置偏移量为负值) 和 'display' (css display).

注意:一般首选默认值 'display'，因为当组件第一次显示的时候它们会自动进行布局 (隐藏的时候不会调整尺寸)。

Component
hideParent : Boolean
此值为true时，当调用hide/show方法时，将会hide和show组件的容器...
此值为true时，当调用hide/show方法时，将会hide和show组件的容器；false时将会 hide和show组件自身(默认为false)。例如，这可以用作window上隐藏按钮的一种 快捷操作，通过设置此按钮的hideParent:true，然后把它添加到window上。
Component
html : String/Object
一个HTML片段，或者一个 DomHelper 描述，用作layout元素的内容(默认为'')。...
一个HTML片段，或者一个 DomHelper 描述，用作layout元素的内容(默认为'')。 这个HTML内容在组件渲染之后才被添加，所以在 render 出发的时候，document中尚未包含此HTML。 但是这个内容将会在所有配置的 contentEl 之前被插入到body标签中。
Component
id : String
当前组件唯一的id(默认为auto-assigned id)...

当前组件唯一的id(默认为auto-assigned id)。 如果你需要在以后访问组件，而又没有一个有效的组件对象引用，那么你需要指定一个 id( 也就是，使用Ext. getCmp方法 )。

注意，此id也将被用作组件底层HTML标签的id，这些标签被渲染到页面中。 这将允许你编写基于id的CSS规则，以独立地描述指定的实例；并且，也可以通过 组件父标签的id选中子元素。

注意:为了避免与唯一的id 产生重复， 请参见 itemId 和 ref 。

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

Component
ignoreNoChange : Boolean
值为true，如果用户完成编辑且值没有发生变化则跳过编辑完成的过程...
值为true，如果用户完成编辑且值没有发生变化则跳过编辑完成的过程(不保存，不触发事件)(默认值为false)。只对字符串值有效 - 对于其他数据类型的编辑将被忽略。
Editor
itemCls : String
注意: 只有在当前组件被渲染到一个使用FormLayout 布局的 容器中时此配置才有效...

注意: 只有在当前组件被渲染到一个使用FormLayout 布局的 容器中时此配置才有效。 (例如Ext.form.FormPanel 或者指定 layout:'form')。

一个附加的CSS类，应用到div上，包装当前field的表单元素。 如果提供了此参数， field级上的itemCls将会覆盖 container级上提供的 默认itemCls。 为itemCls指定的值将会被添加默认的 类('x-form-item')。

既然它被应用到项目的包装器上(参见 Ext.layout.FormLayout。 fieldTpl)， 它将允许你编写能应用到此field、label(如果有指定)、或者field内部任何其它元素的标准CSS规则。

注意: 参考 fieldLabel的注释。 .

示例用法:

// Apply a style to the field's label:
<style>
    .required .x-form-item-label {font-weight:bold;color:red;}
</style>

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Name',
        itemCls: 'required' //this label will be styled
    },{
        xtype: 'textfield',
        fieldLabel: 'Favorite Color'
    }]
});
Component
itemId : String
当没有可利用的对象引用时，itemId可以作为第二选择，用来获得一个组件的引用， 代替 ...

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

var c = new Ext.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'); // 与 Ext.getCmp()不同

p2 = p1.ownerCt.getComponent('p2'); // 通过兄弟对象获得引用

另请参见 id 和 ref 。

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

Component
labelSeparator : String
每个fieldLabel 文本后面现实的分隔符。 此属性可以在多个层次上进行配置...

每个fieldLabel 文本后面现实的分隔符。 此属性可以在多个层次上进行配置。优先顺序为：

  • field / component level
  • container level
  • layout level (默认为冒号 ':')
如不需要为当前field的label显示分隔符，指定一个空字符串''即可。

注意:参见 clearCls 的注释。

另请参见 hideLabel 和 Ext.layout.FormLayout。 fieldTpl。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    layoutConfig: {
        labelSeparator: '~'   // layout config has lowest priority (defaults to ':')
    },
    labelSeparator: '>>',     // config at container level
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Field 1',
        labelSeparator: '...' // field/component level config supersedes others
    },{
        xtype: 'textfield',
        fieldLabel: 'Field 2' // labelSeparator will be '='

    }]
});
Component
labelStyle : String
一个CSS样式描述字符串，它将直接应用到当前field的label上...

一个CSS样式描述字符串，它将直接应用到当前field的label上。 如果有设置，默认为容器的labelStyle值(例如 Ext.layout.FormLayout.labelStyle , 或者 '')。

注意:参见 clearCls 的注释。

另请参见 hideLabel 和 Ext.layout.FormLayout. fieldTpl。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Name',
        labelStyle: 'font-weight:bold;'
    }]
});
Component
listeners : Object
一个包含一个或多个事件处理器的配置对象，会在初始化的时候被添加到目标对象上...

一个包含一个或多个事件处理器的配置对象，会在初始化的时候被添加到目标对象上。 该配置对象应该是一个有效的监听器配置对象就像 addListener例子中指定的一样可一次附加多个处理器。

ExtJs Components上的DOM事件

一些 ExtJs Component 类导出时会选择一些DOM事件(例如 "click", "mouseover" 等等), 这通常只是在有额外的值可以被添加时发生。例如DataView类的 click事件会传递被点击的节点。也可以直接在Component的HTMLElementevent上访问DOM事件，但必需在Component被渲染后监听器才能添加到Element 上。可以按照以下步骤添加插件:

// 插件会用一个监听器配置对象进行配置。
//该组件会被添加到所有处理方法的参数列表上。
Ext.DomObserver = Ext.extend(Object, {
    constructor: function(config) {
        this.listeners = config.listeners ? config.listeners : config;
    },

    // 组件将自己传递进了插件的初始化方法里
    init: function(c) {
        var p, l = this.listeners;
        for (p in l) {
            if (Ext.isFunction(l[p])) {
                l[p] = this.createHandler(l[p], c);
            } else {
                l[p].fn = this.createHandler(l[p].fn, c);
            }
        }

        // 渲染后立即添加监听器到元素上
        c.render = c.render.createSequence(function() {
            var e = c.getEl();
            if (e) {
                e.on(l);
            }
        });
    },

    createHandler: function(fn, c) {
        return function(e) {
            fn.call(this, e, c);
        };
    }
});

var combo = new Ext.form.ComboBox({

    // 元素被点击后折叠
    plugins: [ new Ext.DomObserver({
        click: function(evt, comp) {
            comp.collapse();
        }
    })],
    store: myStore,
    typeAhead: true,
    mode: 'local',
    triggerAction: 'all'
});

Observable
offsets : Array
The offsets to use when aligning (see Ext.Element.alignTo for more details. Defaults to [0, 0].
Editor
overCls : String
一个可选的额外的CSS类，它将在鼠标移过元素时被添加到组件上...
一个可选的额外的CSS类，它将在鼠标移过元素时被添加到组件上，鼠标移出时 删除。(默认为'')。此属性对于在组件上，或者它的任何使用标准CSS规则的孩子节点上， 添加定制的'active' 或者 'hover'样式非常有用。
Component
plugins : Object/Array
一个对象或者一个对象数组，为组件提供特殊的功能 ...
一个对象或者一个对象数组，为组件提供特殊的功能。 对一个合法的插件唯一的要求是它含有一个init()方法， 能接收一个Ext.Component型的参数。 当组件被创建时，如果有可用的插件，组件将会调用每个插件的init方法， 并将自身的引用作为方法参数传递给它。然后，每个插件就可以调用方法或者响应组件上的事件， 就像需要的那样提供自己的功能。
Component
ptype : String
需要创建配置的ptype。 当传递一个配置对象给构造函数时...
需要创建配置的ptype。 当传递一个配置对象给构造函数时，此配置选项不会被使用。 只有在使用懒初始化的时候此配置项才会被使用， 此时Plugin不是 通过一个完整的实例组件，而是通过一个Component配置指定的。 在渲染时，将会查找ptype以决定创建何种类型的Plugin。

如果你创建自己的Plugin，你可以通过 Ext.ComponentMgr.registerPlugin 对它们进行注册，以便能利用懒初始化和渲染机制。
Component
ref : String
一个路径描述，与组件的 ownerCt 相关，它描述了把当前组件的命名引用放置到哪个父容器中去。...

一个路径描述，与组件的 ownerCt 相关，它描述了把当前组件的命名引用放置到哪个父容器中去。

祖先的坐标路径可以通过'/'字符进行分隔。 例如，将一个Toolbar Button的引用放入 拥有此Toolbar的Panel中:

var myGrid = new Ext.grid.EditorGridPanel({
    title: 'My EditorGridPanel',
    store: myStore,
    colModel: myColModel,
    tbar: [{
        text: 'Save',
        handler: saveChanges,
        disabled: true,
        ref: '../saveButton'
    }],
    listeners: {
        afteredit: function() {
//          The button reference is in the GridPanel
            myGrid.saveButton.enable();
        }
    }
});

在上面的代码中，如果 ref 是 'saveButton' ，那么引用将会被放置到Toolbar中。 ref 中的每个'/' 都会从组件的 ownerCt 向上移动一级。

另请参见 added 和 removed 事件。

Component
renderTo : Mixed
该值可以是一个节点的id、一个DOM节点或者一个已存在的元素...

该值可以是一个节点的id、一个DOM节点或者一个已存在的元素， 组件将会被渲染到其中。

  • 注意 :
      如果组件不是一个Container 的子项目时， 不要使用此选项。 渲染和管理它的子项目是一个Container 的layout manager的责任。
      当使用此配置项时，无需调用render()方法。

另请参见 render 。

Component
revertInvalid : Boolean
设置为true，当用户完成编辑后但字段效验失败时，自动恢复到原始值...
设置为true，当用户完成编辑后但字段效验失败时，自动恢复到原始值并取消编(默认值为true)
Editor
shadow : Boolean/String
"sides" 仅在两侧和底部， "frame" 四个方向的阴影，"drop" 底部和右侧阴影 (默认值为 "frame")
Editor
stateEvents : Array
一个事件数组，当它们被触发时，组件需要保存自己的状态(默认值为 none)...

一个事件数组，当它们被触发时，组件需要保存自己的状态(默认值为 none)。 它们可以是任何该组件支持的事件类型，包括浏览器事件和 自定义事件(例如['click', 'customerchange'])。

对于保存和恢复组件状态的详细解释，参见 stateful

Component
stateId : String
为该组件指定的唯一的id值，它被用作管理组件状态的目的...
为该组件指定的唯一的id值，它被用作管理组件状态的目的。 (如果设定了id，默认值为组件自己的id，否则，如果组件使用自动生成的id，此值为null)。

对于保存和反解析组件状态的解释，参见 stateful 。

Component
stateful : Boolean
一个标志参数，它将引起组件在启动时尝试从一个保存的状态中恢复内部状态参数...

一个标志参数，它将引起组件在启动时尝试从一个保存的状态中恢复内部状态参数。 组件必须要么拥有一个 stateId 或者 id ，它们被分配给需要被管理的状态属性。 在跨页面加载时，不保证自动生成的id属性的稳定性， 并且，不能依赖此id来保存和恢复一个组件的相同状态。

为了保存状态的操作能够工作，状态管理器的提供者必须 被设置成一个Ext.state.Provider 的实现类，它覆盖了set 和get 方法，以便保存和恢复name/value对。 有一个内置的Ext.state.CookieProvider 可用。

为当前页面设置状态提供者:

Ext.state.Manager.setProvider(new Ext.state.CookieProvider({
    expires: new Date(new Date().getTime()+(1000*60*60*24*7)), //7 days from now
}));

当 stateEvents 配置项中其中之一的事件被触发时， 一个状态可保存的组件将试图保存其状态。

保存状态时，一个可保存状态的组件首先需要通过调用 getState 方法来序列化它的状态。 默认情况下，此函数什么事都不做。 开发者必须提供一个实现，返回一个hash对象，它描述了组件可恢复的状态。

getState方法产生的值将会传递给 Ext.state.Manager.set 方法，它使用配置的 Ext.state.Provider 来保存对象，以组件的 stateId 为key，或者，如果此值（指stateId）没有指定时， 使用它的 id 作为key。

在进行构造时，一个可保存状态的组件试图通过调用 Ext.state.Manager.get方法来 恢复它的状态，传递 stateId 或者，如果此值（指stateId）没有指定时， 使用它的 id 作为参数。

结果对象被传递给 applyState 。 applyState 的默认实现只是简单地把属性拷贝到对象中， 但是开发者可以覆盖此方法以支持更多行为。

通过向 beforestaterestore, staterestore, beforestatesave 和 statesave 事件上绑定监听器，你可以在保存和恢复状态时进行额外的处理。

Component
style : String
被添加到组件元素的特定样式。 必须是按照...
被添加到组件元素的特定样式。 必须是按照 Ext.Element.applyStyles 类指定格式的合法参数值。

new Ext.Panel({
    title: 'Some Title',
    renderTo: Ext.getBody(),
    width: 400, height: 300,
    layout: 'form',
    items: [{
        xtype: 'textarea',
        style: {
            width: '95%',
            marginBottom: '10px'
        }
    },
        new Ext.Button({
            text: 'Send',
            minWidth: '100',
            style: {
                marginBottom: '10px'
            }
        })
    ]
});
Component
swallowKeys : Boolean
处理keydown/keypress事件，使它们不会继续传播(默认值true)
Editor
tpl : Mixed
一个 Ext.Template , Ext.XTemplate 或者一个用来形成一个Ext.XTemplate的字符串数组...
一个 Ext.Template , Ext.XTemplate 或者一个用来形成一个Ext.XTemplate的字符串数组。 与 data 和 tplWriteMode 配置项协同使用。
Component
tplWriteMode : String
刷新组件的内容区域时使用的Ext.(X)Template方式。 默认为'overwrite' (参见 Ext.XTemplate.overwrite )。
刷新组件的内容区域时使用的Ext.(X)Template方式。 默认为'overwrite' (参见 Ext.XTemplate.overwrite )。
Component
updateEl : Boolean
设置为true，当更新完成时同时更新绑定的元素的innerHTML(默认值为false)
Editor
value : Mixed
底层字段的数据值(默认值为 "")
Editor
xtype : String
需要创建配置的xtype。 当传递一个配置对象给构造函数时...
需要创建配置的xtype。 当传递一个配置对象给构造函数时，此配置选项不会被使用。 只有在使用懒初始化的时候此配置项才会被使用，此时容器的子项目不是 通过一个完整的实例组件，而是通过一个Component配置指定的。 在渲染时，将会查找xtype以决定创建何种类型的子组件。

预定义的xtype列表如下： here。

如果你继承Component创建你自己的组件，你需要使用Ext.ComponentMgr.registerType 对它们进行注册，以便利用懒初始化和渲染机制。
Component

公共属性

Property Defined By
disabled : Boolean
当前组件处于无效状态时为true。 Read-only.
Component
el : Ext.Element
封装了当前组件的Ext.Element。 Read-only。通常情况下，这将是一个<DIV>元素，它由此类的...

封装了当前组件的Ext.Element。 Read-only。

通常情况下，这将是一个<DIV>元素，它由此类的 onRender方法创建，但是它可以通过使用 autoEl 配置项进行覆盖。

注意: 直到组件渲染完成此元素都将处于无效状态。

如需向当前组件的 DOM事件(而不是当前组件自己的Observable事件)添加监听器， 更多建议，参见 listeners 配置项，或者直接使用一个render监听器:

new Ext.Panel({
    title: 'The Clickable Panel',
    listeners: {
        render: function(p) {
            // Append the Panel to the click handler's argument list.
            p.getEl().on('click', handlePanelClick.createDelegate(null, [p], true));
        },
        single: true  // Remove the listener after first invocation
    }
});

另请参见 getEl

Component
hidden : Boolean
如果当前组件处于隐藏状态，此值为true。Read-only。
Component
initialConfig : Object
当前组件的初始化配置描述。 Read-only。
Component
ownerCt : Ext.Container
组件所属的Container (默认为undefined，当前组件被添加到一个容器中时此值被自动设置)...
组件所属的Container (默认为undefined，当前组件被添加到一个容器中时此值被自动设置)。 Read-only。

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

Component
refOwner : Ext.Container
如果当前组件是一个容器的孩子，并且是通过一个 ref 配置项被注册的，则此值为 ref 引用被插入到的祖先容器。
如果当前组件是一个容器的孩子，并且是通过一个 ref 配置项被注册的，则此值为 ref 引用被插入到的祖先容器。
Component
rendered : Boolean
如果当前组件已经被渲染了，此值为true。Read-only.
Component

公共方法

Method Defined By
Editor ( Object config )
Create a new Editor
Create a new Editor
参数:
  • config : Object
    The config object
返回值:
  • void
Editor
addClass ( string cls ) : Ext.Component
为组件底层的元素添加CSS样式。
为组件底层的元素添加CSS样式。
参数:
  • cls : string
    需要添加的CSS样式的class名称
返回值:
  • Ext.Component
    this
Component
addEvents( Object|String o, string Optional. ) : void
添加指定的事件到事件列表上，事件会被该Observable触发。
添加指定的事件到事件列表上，事件会被该Observable触发。
参数:
  • o : Object|String
    以事件名作为属性true作为值的对象 或者当多个事件名被分开的传递时则为第一个事件名。
  • Optional. : string
    事件名被分开的传递时则为事件名。 用法:
    this.addEvents('storeloaded', 'storecleared');
返回值:
  • void
Observable
addListener( String eventName, Function handler, [Object scope], [Object options] ) : void
给对象添加事件处理器。
给对象添加事件处理器。
参数:
  • eventName : String
    监听的事件名。
  • handler : Function
    事件调用的方法
  • scope : Object
    （可选）处理方法执行的作用域 (this的引用 reference)。 如果被忽略。默认为触发事件的对象。
  • options : Object
    （可选）包含处理器配置和属性的对象。 可能包含以下的属性:
    • scope : Object
      处理方法执行的作用域(this的引用) 。 如果被忽略。默认为触发事件的对象。
    • delay : Number
      在触发事件后延迟调用处理器的毫秒数。
    • single : Boolean
      如果为True则添加一个处理器来处理下一次的事件触发（仅一次），然后移除自己。
    • buffer : Number
      使得处理器延迟指定毫秒数后预定的运行在 一个Ext.util.DelayedTask中 。 如果事件在时间内再一次被触发，原始的处理器不会被调用，但是新的处理器会预定的在他的位置上。
    • target : Observable
      如果事件在目标的Observable上触发则仅仅调用处理器， 否则 事件会从子类的Observable上冒泡

    组合选项
    使用这些选项参数,可能会组合出不同类型的监听器：

    一个延迟的，一次性的监听器。

    myDataView.on('click', this.onClick, this, {
single: true,
delay: 100
});

    一次调用附加多个处理器
    该方法同样支持传递一个包含指定的多个处理器的属性的配置对象参数。

    myGridPanel.on({
'click' : {
    fn: this.onClick,
    scope: this,
    delay: 100
},
'mouseover' : {
    fn: this.onMouseOver,
    scope: this
},
'mouseout' : {
    fn: this.onMouseOut,
    scope: this
}
});

    或者一个简写的语法：

    myGridPanel.on({
'click' : this.onClick,
'mouseover' : this.onMouseOver,
'mouseout' : this.onMouseOut,
 scope: this
});
返回值:
  • void
Observable
applyToMarkup ( String/HTMLElement el ) : void
将此组件添加到已存在的有效的HTML标签中。 使用该方法时，无需再调用render()方法。
将此组件添加到已存在的有效的HTML标签中。 使用该方法时，无需再调用render()方法。
参数:
  • el : String/HTMLElement
返回值:
  • void
Component
cancelEdit ( Boolean remainVisible ) : void
取消编辑并隐藏编辑器，而不保存所改变的值。该字段值将恢复到原来的初始值。
取消编辑并隐藏编辑器，而不保存所改变的值。该字段值将恢复到原来的初始值。
参数:
  • remainVisible : Boolean
    替代默认行为，取消编辑并保留编辑器可见状态(默认值为false)
返回值:
  • void
Editor
cloneConfig ( Object overrides ) : Ext.Component
默认使用原先传递给当前实例的配置值克隆当前组件。
默认使用原先传递给当前实例的配置值克隆当前组件。
参数:
  • overrides : Object
    一个新的配置项，包含需要覆盖到克隆版本的所有属性。 可以传递一个id参数给此对象，否则将自动生成一个新的id以避免发生重复。
返回值:
  • Ext.Component
    当前组件的克隆副本
Component
completeEdit ( Boolean remainVisible ) : void
结束编辑过程，将改变的值保存到底层的输入栏，并隐藏编辑器。
结束编辑过程，将改变的值保存到底层的输入栏，并隐藏编辑器。
参数:
  • remainVisible : Boolean
    替代默认行为，并保持编辑器可编辑(默认为false)。
返回值:
  • void
Editor
destroy () : void
通过如下方法销毁对象：删除所有的事件监听器、将组件的元素从DOM树中删除...
通过如下方法销毁对象：删除所有的事件监听器、将组件的元素从DOM树中删除（如果可以）、 将组件从它的 Ext.Container（如果可用）中删除、 并且将它从Ext.ComponentMgr中 注销。 销毁操作一般由框架自动完成，一般情况下不需要直接调用该方法。
参数:
  • 无。
返回值:
  • void
Component
disable () : Ext.Component
将组件置为无效状态，并出发'disable'事件。
将组件置为无效状态，并出发'disable'事件。
参数:
  • 无。
返回值:
  • Ext.Component
    this
Component
enable () : Ext.Component
将组件置为有效状态并触发'enable'事件。
将组件置为有效状态并触发'enable'事件。
参数:
  • 无。
返回值:
  • Ext.Component
    this
Component
enableBubble( String/Array events ) :void
是否现在使得事件会被该Observable触发并调用 this.getBubbleTarget()方法在拥有者的继承树...

是否现在使得事件会被该Observable触发并调用 this.getBubbleTarget()方法在拥有者的继承树中冒泡。Observable的基础类中没有该方法的实现。

该方法一般被Ext.Components用来冒泡事件到拥有者的容器。参看Ext.Component.getBubbleTarget默认的实现 在Ext.Component中返回组件的直接拥有者。但是如果需要的是一个已知的目标，该方法可以被重写来更快的访问需求的目标。

例子:

Ext.override(Ext.form.Field, {
    // 添加方法到Field的initComponent上改变事件为冒泡
    initComponent : Ext.form.Field.prototype.initComponent.createSequence(function() {
        this.enableBubble('change');
    }),

    // 我们知道我们想让Field的事件冒泡到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() {
            // 如果样式被修改标题会变红。
            myForm.header.setStyle('color', 'red');
        }
    }
});
参数:
  • events : String/Array
    冒泡的事件名，或事件名数组
返回值:
  • void
Observable
findParentBy ( Function fn ) : Ext.Container
通过自定义的函数查找当前组件上层任何层次上的容器...
通过自定义的函数查找当前组件上层任何层次上的容器。 如果传递的函数返回true，容器对象将被返回。
参数:
  • fn : Function
    自定义的函数，使用如下参数调用(container,this component)。
返回值:
  • Ext.Container
    自定义函数返回true的第一个容器
Component
findParentByType ( String/Class xtype ) : Ext.Container
通过xtype或者class查找当前组件上层任何层次上的容器
通过xtype或者class查找当前组件上层任何层次上的容器
参数:
  • xtype : String/Class
    组件的xtype字符串，或者直接是组件的class
返回值:
  • Ext.Container
    符合指定xtype或者class的第一个容器
Component
fireEvent( String eventName, Object... args ) : Boolean
用传入的参数触发指定的事件 (减去事件名)。 一个事件可以被设置为冒泡 Obse...

用传入的参数触发指定的事件 (减去事件名)。

一个事件可以被设置为冒泡到Observable父类继承树(参看 Ext.Component.getBubbleTarget) 调用enableBubble实现。

参数:
  • eventName : String
    触发的事件名。
  • args : Object...
    传递给处理器的可变长度参数。
返回值:
  • Boolean
    如果有任何的处理器返回false则返回false，否则返回true。
Observable
focus ( [ Boolean selectText ], [ Boolean/Number delay ] ) : Ext.Component
尝试将当前组件设为焦点。
尝试将当前组件设为焦点。
参数:
  • selectText : Boolean
    (可选) 如果可用，同时选中组件内部的文本
  • delay : Boolean/Number
    (可选)将当前组件设置为焦点的延迟时间(设置为true等于0毫秒)
返回值:
  • Ext.Component
    this
Component
getBubbleTarget () : Ext.Container
为Observable的fireEvent方法提供链接，它沿着继承结构进行冒泡操作。
为Observable的fireEvent方法提供链接，它沿着继承结构进行冒泡操作。
参数:
  • 无。
返回值:
  • Ext.Container
    拥有当前组件的容器。
Component
getEl () : Ext.Element
返回 Ext.Element ，它包装了当前组件。...

返回 Ext.Element ，它包装了当前组件。

通常情况下，这将是一个<DIV>元素，它是由该类的onRender方法创建的， 但是可以使用autoEl配置项 覆盖它。

注意: 此元素将会一直处于无效状态直到当前组件渲染完成。

如需向当前组件的 DOM事件(而不是当前组件自己的Observable事件)添加监听器， 更多建议，参见 listeners 配置项，或者直接使用一个render监听器:

new Ext.Panel({
    title: 'The Clickable Panel',
    listeners: {
        render: function(p) {
            // Append the Panel to the click handler's argument list.
            p.getEl().on('click', handlePanelClick.createDelegate(null, [p], true));
        },
        single: true  // Remove the listener after first invocation
    }
});
参数:
  • 无。
返回值:
  • Ext.Element
    包装当前组件的元素。
Component
getId () : String
返回当前组件的id，如果没有定义id，则自动生成并返回一个id:'ext-comp-'...
返回当前组件的 id 如果没有定义 id 则自动生成并返回一个 id

'ext-comp-' + (++Ext.Component.AUTO_ID)
参数:
  • 无。
返回值:
  • String
    id
Component
getItemId () : String
返回当前组件的 itemId 。 如果没有通过配置参数指定 itemId 那么，将会使用...
返回当前组件的 itemId 。 如果没有通过配置参数指定 itemId 那么，将会使用 getId 返回 id 。
参数:
  • 无。
返回值:
  • String
Component
getValue () : Mixed
获取编辑器的数据值
获取编辑器的数据值
参数:
  • 无。
返回值:
  • Mixed
    The data value
Editor
getXType () : String
获取当前组件的xtype，它是用 Ext.ComponentMgr 注册的。 所有可用的xtype列表，参见...
获取当前组件的xtype，它是用 Ext.ComponentMgr 注册的。 所有可用的xtype列表，参见 Ext.Component 类头部。示例用法:

var t = new Ext.form.TextField();
alert(t.getXType());  // alerts 'textfield'
参数:
  • 无。
返回值:
  • String
    The xtype
Component
getXTypes () : String
返回此组件的xtype继承树，用字符'-'分隔。 所有可用的xtype值...

返回此组件的xtype继承树，用字符'-'分隔。 所有可用的xtype值，请参见Ext.Component 类的头部。

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

示例用法:

var t = new Ext.form.TextField();
alert(t.getXTypes());  // alerts 'component/box/field/textfield'
参数:
  • 无。
返回值:
  • String
    xtype层次字符串
Component
hasListener( String eventName ) : Boolean
检测对象是否包含指定事件的任何监听器
检测对象是否包含指定事件的任何监听器
参数:
  • eventName : String
    检测的事件名
返回值:
  • Boolean
    如果事件被监听则为true，否则为false
Observable
hide () : Ext.Component
隐藏当前组件。 监听 beforehide' 事件并且返回false 可以取消隐藏组件的操作。 在隐藏组件之后触发...
隐藏当前组件。 监听 beforehide' 事件并且返回false 可以取消隐藏组件的操作。 在隐藏组件之后触发 ' hide' 事件。 如果组件被配置成 hidden 那么此方法在内部被调用。
参数:
  • 无。
返回值:
  • Ext.Component
    this
Component
isVisible () : Boolean
如果当前组件可见，返回true。
如果当前组件可见，返回true。
参数:
  • 无。
返回值:
  • Boolean
    如果当前组件可见，返回true，其它返回false。
Component
isXType ( String xtype , [ Boolean shallow ] ) : Boolean
Tests whether or not this Component is of a specific xtype. This can test whether this Component is descended from th...

测试此组件是否是指定的xtype。此方法既可以测试是否是指定的xtype的某个子类， 或者它是否直接是指定的xtype类(shallow=true)。

如果使用你自己的子类，必须知道组件必须注册它的xtype值。

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

示例用法:

var t = new Ext.form.TextField();
var isText = t.isXType('textfield');        // true
var isBoxSubclass = t.isXType('box');       // true, descended from BoxComponent
var isBoxInstance = t.isXType('box', true); // false, not a direct BoxComponent instance
参数:
  • xtype : String
    需要为当前组件进行检测的xtype
  • shallow : Boolean
    (可选) 如果为false，检测组件是否是xtype继承树中的某个子类（默认是这种情况）， 如果为true，只检测组件是否是指定的xtype类型。
返回值:
  • Boolean
    如果当前组件是指定xtype的子类，返回true，其它返回flase。
Component
mon ( Observable|Element item , Object|String ename , Function fn , Object scope , Object opt ) : void
向任何Observable对象(或者元素)上添加监听器，监听器将会在组件...

向任何Observable对象(或者元素)上添加监听器，监听器将会在组件销毁时被自动删除。
用法：

myGridPanel.mon(myGridPanel.getSelectionModel(), 'selectionchange', handleSelectionChange, null, {buffer: 50});

or:

myGridPanel.mon(myGridPanel.getSelectionModel(), {
    selectionchange: handleSelectionChange,
    buffer: 50
});
参数:
  • item : Observable|Element
    需要添加listener/listeners的项目。
  • ename : Object|String
    事件名，或者一个包含事件名属性的对象。
  • fn : Function
    (可选) 如果 ename 参数是一个事件名，此参数为处理函数。
  • scope : Object
    (可选)如果 ename 参数是一个事件名称，此参数是作用域 ( this 引用)，监听函数将会在此作用域中被执行。
  • opt : Object
    (可选)如果 ename 参数是一个事件名称， 此参数是 addListener 配置项。
返回值:
  • void
Component
mun ( Observable|Element item , Object|String ename , Function fn , Object scope ) : void
删除通过mon 方法添加的监听器。
删除通过mon 方法添加的监听器。
参数:
  • item : Observable|Element
    需要删除listener/listeners的项目。
  • ename : Object|String
    事件名称，或者一个包含事件名称属性的对象。
  • fn : Function
    (可选)如果 ename 参数是一个事件名称，此参数是一个处理函数。
  • scope : Object
    (可选)如果 ename 参数是一个事件名称，此参数是作用域 ( this 引用)，监听函数将会在此作用域中被执行。
返回值:
  • void
Component
nextSibling () : Ext.Component
返回所属容器中的下一个组件
返回所属容器中的下一个组件
参数:
  • 无。
返回值:
  • Ext.Component
Component
on( String eventName, Function handler, [Object scope], [Object options] ) : void
给对象添加事件处理器 (addListener的简写形式)
给对象添加事件处理器 (addListener的简写形式。)
参数:
  • eventName : String
    监听的事件类型
  • handler : Function
    事件调用的方法
  • scope : Object
    （可选）处理方法执行时的作用域 (this 的引用)。 如果被忽略。默认为触发事件的对象。
  • options : Object
    可选 包含处理器配置的对象。
返回值:
  • void
Observable
previousSibling () : Ext.Component
返回所属容器中的前一个组件
返回所属容器中的前一个组件
参数:
  • 无。
返回值:
  • Ext.Component
Component
purgeListeners() : void
移除对象上所有的监听器
移除对象上所有的监听器
参数:
  • 无。
返回值:
  • void
Observable
realign ( [ Boolean autoSize ] ) : void
根据当前的配置值重新调整编辑器绑定的字段。
根据当前的配置值重新调整编辑器绑定的字段。
参数:
  • autoSize : Boolean
    (可选) 值为true字段的大小使用绑定元素的尺寸
返回值:
  • void
Editor
relayEvents( Object o, Array events ) : void
从指定的Observable上传递选择的事件就好像被当前对象触发一样。
从指定的Observable上传递选择的事件就好像被当前对象触发一样。
参数:
  • o : Object
    该Observable上的事件被当前对象传递。
  • events : Array
    传递的数组名。
返回值:
  • void
Observable
removeClass ( string cls ) : Ext.Component
从组件底层的元素上删除一个CSS类。
从组件底层的元素上删除一个CSS类。
参数:
  • cls : string
    需要移除的CSS类名
返回值:
  • Ext.Component
    this
Component
removeListener( String eventName, Function handler, [Object scope] ) : void
删除一个事件处理器。
删除一个事件处理器。
参数:
  • eventName : String
    处理器关联的事件类型。
  • handler : Function
    移除的处理器。 这应该是传递到addListener里的方法的引用。
  • scope : Object
    （可选）处理器指定的初始作用域。
返回值:
  • void
Observable
render ( [ Element/HTMLElement/String container ], [ String/Number position ] ) : void
在传递进来的HTML元素中渲染当前组件。...

在传递进来的HTML元素中渲染当前组件。

如果你正在使用一个Container 对象放置当前组件，那么请不要使用render方法。

当容器第一次被渲染时，它的子组件将会被容器的 layout 管理器渲染。

某些布局管理器允许动态添加子组件。它们包括 Ext.layout.CardLayout, Ext.layout.AnchorLayout, Ext.layout.FormLayout, Ext.layout.TableLayout。

当一个新的子组件被添加时，如果容器已经被渲染了， 你可能需要调用容器的 doLayout 方法来刷新视图，它将导致所有没有被渲染的子组件进行渲染操作。 此操作是必须的，这样你可以添加多个子组件而只刷新一次layout。

当创建复杂的UI时，非常重要的一点是，请记住调整子项目的尺寸和位置是容器的 layout 管理器的职责。 如果你希望子项目的尺寸对用户交互作出反应， 你必须为容器配置一个布局管理器，它将创建和管理你心里想要的那种布局。

忽略容器的layout 配置意味着将会使用一个基本的布局管理器，它除了按次序把子组件 渲染到容器中之外什么事情都不做。 这种情况下，任何尺寸和位置的调整操作都不会发生。

参数:
  • container : Element/HTMLElement/String
    (可选) 需要在其中渲染当前组件的元素。 如果它是从一个已存在的标签中创建的，此参数应该被忽略。
  • position : String/Number
    (可选) 容器中的一个元素ID或者一个DOM节点索引， 当前组件将会被插入到它前面 (默认append到容器的尾部)
返回值:
  • void
Component
resumeEvents() : void
重新开始触发事件。(参见suspendEvents) 如果事件以queueSuspended参数被挂起，则在事件被挂起时 ...
重新开始触发事件。(参见 suspendEvents) 如果事件以queueSuspended 参数被挂起，则在事件被挂起时触发的事件会被传递到所有的监听器上
参数:
  • 无。
返回值:
  • void
Observable
setDisabled ( Boolean disabled ) : Ext.Component
工具函数，使用布尔值设置有效/无效(disabled/enabled )。
工具函数，使用布尔值设置有效/无效(disabled/enabled )。
参数:
  • disabled : Boolean
返回值:
  • Ext.Component
    this
Component
setSize ( Number width , Number height ) : void
设置编辑器的高和宽。
设置编辑器的高和宽。
参数:
  • width : Number
    The new width
  • height : Number
    The new height
返回值:
  • void
Editor
setValue ( Mixed value ) : void
设置编辑器的数据值
设置编辑器的数据值
参数:
  • value : Mixed
    该字段支持的任意值
返回值:
  • void
Editor
setVisible ( Boolean visible ) : Ext.Component
工具方法，通过使用布尔值隐藏或者显示当前组件。
工具方法，通过使用布尔值隐藏或者显示当前组件。
参数:
  • visible : Boolean
    true时显示，false时隐藏
返回值:
  • Ext.Component
    this
Component
show () : Ext.Component
显示当前组件。监听' beforeshow' 事件，返回 false 取消显示组件...
显示当前组件。监听' beforeshow' 事件，返回 false 取消显示组件。在显示组件之后触发' show' 事件。
参数:
  • 无。
返回值:
  • Ext.Component
    this
Component
startEdit ( Mixed el , [ String value ] ) : void
开始编辑并显示编辑器。
开始编辑并显示编辑器。
参数:
  • el : Mixed
    The element to edit
  • value : String
    (可选) 编辑器初始化的值。如果不设置值，它默认为el的innerHTML。
返回值:
  • void
Editor
suspendEvents( Boolean queueSuspended ) : void
暂停触发所有的事件。 (参看resumeEvents)
暂停触发所有的事件。（参看 resumeEvents)
参数:
  • queueSuspended : Boolean
    如果传递为true则排列好暂停的事件使得在调用 resumeEvents 后再触发它们，而不是抛弃所有暂停的事件。
返回值:
  • void
Observable
un( String eventName, Function handler, [Object scope] ) : void
删除一个事件处理器(removeListener方法的简写形式)
删除一个事件处理器(removeListener方法的简写形式。)
参数:
  • eventName : String
    处理器关联的事件类型
  • handler : Function
    被删除的处理器 这应该是传入 addListener 中的方法的引用。
  • scope : Object
    （可选）为处理器指定的初始作用域。
返回值:
  • void
Observable
update ( Mixed htmlOrData , [ Boolean loadScripts ], [ Function callback ] ) : void
刷新组件的内部区域。
刷新组件的内部区域。
参数:
  • htmlOrData : Mixed
    如果已经通过tpl为当前组件配置了一个模板，那么 将会使用此参数来装配模板。 如果没有为当前组件配置模板，组件的内容区域将会通过Ext.Element 进行刷新。
  • loadScripts : Boolean
    (可选)只用在使用html配置时此参数才合法。默认为false。
  • callback : Function
    (可选)只用在使用html配置时此参数才合法。 当脚本加载完成时回调函数才被执行。
返回值:
  • void
Component

公共事件

Event Defined By
added : ( Ext.Component this , Ext.Container ownerCt , number index )
当一个组件被添加到一个Ext.Container时触发
当一个组件被添加到一个Ext.Container时触发
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • ownerCt : Ext.Container
    用于组件的容器
  • index : number
    添加组件的位置
Component
afterrender : ( Ext.Component this )
在组件渲染完成之后触发...

在组件渲染完成之后触发。

afterrender事件在当前组件被rendered 结束之后、在为组件定义的所有afterRender方法执行之后 触发，并且，如果有stateful， 也在状态被保存之后才触发。

监听器将会以如下参数格式被调用:
  • this : Ext.Component
Component
beforecomplete : ( Editor this , Mixed value , Mixed startValue )
当输入栏的值发生变化之后，但是在改变的值被反应到底层的输入栏之前触发...
当输入栏的值发生变化之后，但是在改变的值被反应到底层的输入栏之前触发。可以在此事件的监听器中返回一个false取消保存改变的值。 注意:如果该值并没有改变，ignoreNoChange = true时，仍然会结束编辑，但这个事件将不会触发，因为并没有真正的编辑。
监听器将会以如下的参数格式调用:
  • this : Editor
  • value : Mixed
    当前字段值
  • startValue : Mixed
    原来的字段值
Editor
beforedestroy : ( Ext.Component this )
在组件 destroyed 之前触发。 在事件监听器中返回false以停止 destroy 操作。
在组件 destroyed 之前触发。 在事件监听器中返回false以停止 destroy 操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforehide : ( Ext.Component this )
在调用hide方法隐藏组件之前触发。 在事件监听器中返回false可以停止隐藏操作。
在调用hide方法隐藏组件之前触发。 在事件监听器中返回false可以停止隐藏操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforerender : ( Ext.Component this )
在组件被rendered 之前触发。 在事件监听器中返回false可以停止render 操作。
在组件被rendered 之前触发。 在事件监听器中返回false可以停止render 操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforeshow : ( Ext.Component this )
在调用show()方法现实组件之前触发。 事件处理函数返回false可以停止show。
在调用show 方法现实组件之前触发。 事件处理函数返回false可以停止show。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforestartedit : ( Editor this , Ext.Element boundEl , Mixed value )
在开始编辑，并在值发生变化之前触发。可以在此事件的监听器中...
在开始编辑，并在值发生变化之前触发。可以在此事件的监听器中返回false来取消编辑。
监听器将会以如下的参数格式调用:
  • this : Editor
  • boundEl : Ext.Element
    该编辑器所绑定的基本元素
  • value : Mixed
    The field value being set
Editor
beforestaterestore : ( Ext.Component this , Object state )
在组件状态恢复之前触发。返回false停止恢复状态操作。
在组件状态恢复之前触发。返回false停止恢复状态操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    StateProvider返回的状态哈希值。 如果没有禁止此事件，那么状态对象会被传递给applyState。 默认情况下，这样简单地把属性值拷贝到当前组件中。 可以覆盖此方法以提供自定的状态恢复操作。
Component
beforestatesave : ( Ext.Component this , Object state )
在组件状态被保存到配置的状态提供者之前触发。 返回false可以停止保存。
在组件状态被保存到配置的状态提供者之前触发。 返回false可以停止保存。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    状态值哈希。 这由在组件上调用getState() 方法决定。 此方法必须由开发者提供，返回是否需要对状态进行描述，默认情况下， Ext.Component有一个空实现。
Component
canceledit : ( Editor this , Mixed value , Mixed startValue )
在退出编辑状态并且编辑的值被重置之后触发。
在退出编辑状态并且编辑的值被重置之后触发。
监听器将会以如下的参数格式调用:
  • this : Editor
  • value : Mixed
    用户输入的被放弃的字段值
  • startValue : Mixed
    取消编辑后被设置回来的原始字段值
Editor
complete : ( Editor this , Mixed value , Mixed startValue )
当编辑完成过后，且被改变过的值被设置到所属字段后触发。
当编辑完成过后，且被改变过的值被设置到所属字段后触发。
监听器将会以如下的参数格式调用:
  • this : Editor
  • value : Mixed
    当前字段值
  • startValue : Mixed
    原来的字段值
Editor
destroy : ( Ext.Component this )
在组件被销毁之后触发。
在组件被destroyed之后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
disable : ( Ext.Component this )
在组件被设置为无效状态后触发。
在组件被设置为无效状态后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
enable : ( Ext.Component this )
当组件被设置为有效(enabled)之后触发。
当组件被设置为有效(enabled)之后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
hide : ( Ext.Component this )
在组件被隐藏之后触发。 当调用hide 方法隐藏组件之后触发。
在组件被隐藏之后触发。 当调用hide 方法隐藏组件之后触发。
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
removed : ( Ext.Component this , Ext.Container ownerCt )
当一个组件被从Ext.Container容器中删除时触发
当一个组件被从Ext.Container容器中删除时触发
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • ownerCt : Ext.Container
    持有组件的容器
Component
render : ( Ext.Component this )
在组件被渲染之后触发。
在组件被 rendered(渲染) 之后触发。
监听器将以如下的参数格式被调用:
  • this : Ext.Component
Component
show : ( Ext.Component this )
在调用show 方法显示组件之后触发。
在调用show 方法显示组件之后触发。
监听器将会用如下的参数格式被调用:
  • this : Ext.Component
Component
specialkey : ( Ext.form.Field this , Ext.EventObject e )
任何相关的导航键（箭头，制表符，回车，ESC键，等）被按下时触发。你可以...
任何相关的导航键（箭头，制表符，回车，ESC键，等）被按下时触发。你可以使用Ext.EventObject.getKey来检测哪些键被按下。
监听器将会以如下的参数格式调用:
  • this : Ext.form.Field
  • e : Ext.EventObject
    The event object
Editor
startedit : ( Ext.Element boundEl , Mixed value )
当编辑器显示时触发
当编辑器显示时触发
监听器将会以如下的参数格式调用:
  • boundEl : Ext.Element
    该编辑器的基本元素
  • value : Mixed
    The starting field value
Editor
staterestore : ( Ext.Component this , Object state )
组件状态被存储之后触发。
组件状态被存储之后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    StateProvider返回的状态哈希值。 如果没有禁止此事件，那么状态对象会被传递给applyState。 默认情况下，这样简单地把属性值拷贝到当前组件中。 可以覆盖此方法以提供自定的状态恢复操作。
Component
statesave : ( Ext.Component this , Object state )
在组件状态被保存到所配置的状态提供者之后触发。
在组件状态被保存到所配置的状态提供者之后触发。
监听器将会用如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    状态值hash。 这是由在足见上调用getState() 方法决定的。 开发者必须提供此方法以返回是否需要恢复状态，默认情况下， Ext.Component有一个空实现。
Component


Class Ext.Element

包: | Ext
定义类的文件: | Element.style.js
类: | Element
子类: | Layer
继承自: | Object

包装一个DOM元素，添加简单的DOM操纵功能，为不同的浏览器提供一般化处理。

该类的所有实例都继承了Ext.Fx 的方法，使得对所有DOM元素应用视觉效果更简单。

注意，该类文档中的事件不是Ext事件，它们包装了浏览器事件。 如需访问底层浏览器事件，参见Ext.EventObject.browserEvent 。一些老的浏览器可能不会支持所有事件。 它们支持哪些事件超过了ExtJs可以控制的范围。

用法:
//通过id
var el = Ext.get("my-div");

// 通过DOM元素引用
var el = Ext.get(myDivElement);
动画特效

当一个元素被操纵时，默认没有动画效果。

var el = Ext.get("my-div");
// 没有动画效果
el.setWidth(100);

许多操控元素的函数有一个可选的"animate"参数。 对于默认的动画特效，此参数可以指定为一个布尔值(true)。

// 默认动画效果
el.setWidth(100, true);

如需配置特效，也可以指定一个拥有动画配置项的字面对象， 它将被用作Element的动画配置对象。注意，支持的Element动画配置 选项是Ext.Fx动画 配置特效描述的子集。支持的Element动画配置选项有:

Option    Default   Description
--------- --------  ---------------------------------------------
duration  .35       动画持续的描述
easing    easeOut   淡出方式
callback  none      动画结束时需要执行的函数
scope     this      回调函数的作用域(this)

// Element动画配置对象
var opt = {
    duration: 1,
    easing: 'elasticIn',
    callback: this.foo,
    scope: this
};
//设置了一些选项的动画特效
el.setWidth(100, opt);

被使用的Element动画对象将会作为"anim"被设置到选项对象上， 这将允许你停止或者重复动画特效。这里是一个例子:

// 使用"anim"参数获取Anim对象
if(opt.anim.isAnimated()){
    opt.anim.stop();
}

另一个特效技术请参见animate 方法。

复合(集合)元素

对于如何与一个元素集合配合使用，参见 Ext.CompositeElement

公共属性

Property |  | Defined By
 | DISPLAY : Number 可视模式常量，setVisibilityMode 使用。使用display隐藏元素 | Element
 | VISIBILITY : Number 可视模式常量，setVisibilityMode 使用。 使用visibility隐藏元素 | Element
 | autoBoxAdjust : Object true将会自动调整宽度和高度设置，因为某些box-model问题(默认为true) | Element
 | defaultUnit : String The default unit to append to CSS values where a unit isn't provided (defaults to px). | Element
 | dom : HTMLElement DOM元素 | Element
 | id : String DOM元素的ID | Element
 | originalDisplay : String 元素默认的显示模式(默认为"") | Element

公共方法

Method Defined By
Element ( String/HTMLElement element , [ Boolean forceNew ] )
直接创建一个新的Element
直接创建一个新的Element
参数:
  • element : String/HTMLElement
  • forceNew : Boolean
    (可选)默认情况下，构造器将会检测缓存中是否已经存在 当前元素的实例，如果已经存在将会返回相同的实例。 配置此参数可以跳过这种检测(对于继承该类很有用)。
返回值:
  • void
Element
addClass ( String/Array className ) : Ext.Element
向元素上添加一个活多个CSS样式类。 重复的类将会被自动过滤掉。
向元素上添加一个活多个CSS样式类。 重复的类将会被自动过滤掉。
参数:
  • className : String/Array
    需要添加的CSS类，或者是一个样式数组
返回值:
  • Ext.Element
    this
Element
addClassOnClick ( String className ) : Ext.Element
设置事件处理器，当鼠标在元素上按下并弹起时添加并删除...
设置事件处理器，当鼠标在元素上按下并弹起时添加并删除一个CSS类(一种点击特效)。
参数:
  • className : String
返回值:
  • Ext.Element
    this
Element
addClassOnFocus ( String className ) : Ext.Element
设置一个事件处理函数，在当前元素获得焦点时添加然后删除一个CSS类
设置一个事件处理函数，在当前元素获得焦点时添加然后删除一个CSS类
参数:
  • className : String
返回值:
  • Ext.Element
    this
Element
addClassOnOver ( String className ) : Ext.Element
设置需要添加的事件监听器并在鼠标滑过当前元素时删除一个CSS类
设置需要添加的事件监听器并在鼠标滑过当前元素时删除一个CSS类
参数:
  • className : String
返回值:
  • Ext.Element
    this
Element
addKeyListener ( Number/Array/Object/String key , Function fn , [ Object scope ] ) : Ext.KeyMap
用来构造KeyMap的便捷方法
用来构造KeyMap的便捷方法
参数:
  • key : Number/Array/Object/String
    可以是一个包含了需要监听的key的字符串、按键码、按键码数组， 或者是一个拥有如下选项的对象: {key: (number or array), shift: (true/false), ctrl: (true/false), alt: (true/false)}
  • fn : Function
    需要调用的方法
  • scope : Object
    (可选)作用域( this 引用)，指定的函数将会在其中被执行。默认为当前元素。
返回值:
  • Ext.KeyMap
    创建的KeyMap
Element
addKeyMap ( Object config ) : Ext.KeyMap
为当前元素创建一个KeyMap
为当前元素创建一个KeyMap
参数:
  • config : Object
    KeyMap配置。更多细节参见Ext.KeyMap
返回值:
  • Ext.KeyMap
    创建的KeyMap
Element
addListener ( String eventName , Function fn , [ Object scope ], [ Object options ] ) : Ext.Element
向当前元素添加一个事件处理函数。 与快捷方式on等价。
向当前元素添加一个事件处理函数。 与快捷方式on等价。
参数:
  • eventName : String
    需要处理的事件名。
  • fn : Function
    事件调用的处理函数。 此函数将会被传递如下参数:
    • evt : EventObject
      EventObject 对象，描述事件。
    • el : HtmlElement
      DOM元素，它是事件的目标。 注意，此参数可以通过使用delegate选项进行过滤。
    • o : Object
      来自addListener调用的选项对象。
  • scope : Object
    (可选)作用域( this 引用)处理函数将会在其中被执行。 如果忽略，默认为当前Element。
  • options : Object
    (可选)一个包含处理函数配置参数的对象。 此参数可以包含一下任何参数:
    • scope Object :
      作用域( this 引用)处理函数将会在其中被执行。 如果忽略，默认为当前Element
    • delegate String:
      一个简单的选择器，用来过滤事件目标或者用来查找事件目标的后代节点。 额外细节参见下文。
    • stopEvent Boolean:
      设置为true将终止事件。也就是停止冒泡、并阻止默认的操作。
    • preventDefault Boolean:
      设置为true将阻止默认的操作。
    • stopPropagation Boolean:
      设置为true将阻止事件冒泡。
    • normalized Boolean:
      设置为false将把浏览器事件传递给处理函数，而不是Ext.EventObject
    • target Ext.Element:
      只有事件在目标Element上被触发时才调用处理函数， 而不是在一个子节点冒泡的事件上调用。
    • delay Number:
      在事件触发后，延迟调用处理函数的毫秒数。
    • single Boolean:
      设置为true，将在事件发生后立即添加一个处理函数来处理事件，然后马上删除此处理函数。
    • buffer Number:
      导致处理函数在Ext.util.DelayedTask中按计划执行，延迟指定的毫秒数。 如果在这段时间内此事件被再次触发，原来的处理函数将不会被调用， 但是新的处理函数将会在计划任务中替代它。

    组合选项
    在以下的例子中，将使用缩写形式 on 来替代冗长的addListener方法。 这两种写法是等价的。使用配置参数，可以绑定不同类型的监听器：

    一个规格化的、延迟的、只调用一次的监听器，将会自动停止事件并添加一个定制的参数(forumId) 到配置对象。配置对象被作为处理函数的第三个参数来使用。

    Code:
    el.on('click', this.onClick, this, {
    single: true,
    delay: 100,
    stopEvent : true,
    forumId: 4
});

    一次调用添加多个处理函数
    此方法也允许传递单个的参数，它是一个配置对象，包含了多个处理函数的详细描述。

    Code:

    el.on({
    'click' : {
        fn: this.onClick,
        scope: this,
        delay: 100
    },
    'mouseover' : {
        fn: this.onMouseOver,
        scope: this
    },
    'mouseout' : {
        fn: this.onMouseOut,
        scope: this
    }
});

    或者一种缩写的方式:
    Code:

el.on({
    'click' : this.onClick,
    'mouseover' : this.onMouseOver,
    'mouseout' : this.onMouseOut,
    scope: this
});

    代理

    这是一个配置选项，你可以在注册处理函数时一起传递，用来 使用事件代理协助处理事件。 事件代理是一种用来降低内存消耗并阻止内存泄漏的技术。 通过在一个容器元素上注册一个事件而不是在容器中的每个元素 上注册。通过将此配置选项设置为一个简单选择子， 目标元素将会被过滤，以便寻找目标的后代元素。例如:

// using this markup:
<div id='elId'>
    <p id='p1'>paragraph one</p>
    <p id='p2' class='clickable'>paragraph two</p>
    <p id='p3'>paragraph three</p>
</div>
// utilize event delegation to registering just one handler on the container element:
el = Ext.get('elId');
el.on(
    'click',
    function(e,t) {
        // handle click
        console.info(t.id); // 'p2'

    },
    this,
    {
        // filter the target element to be a descendant with the class 'clickable'

        delegate: '.clickable'
    }
);

返回值:
  • Ext.Element
    this
Element
alignTo ( Mixed element , String position , [ Array offsets ], [ Boolean/Object animate ] ) : Ext.Element
根据指定的锚定点，把当前元素对齐到另一个元素。 如果其它元素是document，将会把它对齐到视口。...
根据指定的锚定点，把当前元素对齐到另一个元素。 如果其它元素是document，将会把它对齐到视口。 位置参数是可选的，可以指定为以下任何格式之一:
  • 空值: 默认将把元素的左上角对齐到目标的左下角("tl-bl")。
  • One anchor (已废弃): 所传递的锚定位置被用作目标元素的锚定点。被对齐的元素将会 把它的左上角(tl)定位到那个点。 此方法已废弃，推荐使用下面新的两个锚定符号。
  • Two anchors: 如果传递来自下面表格中的两个值，用中划线分隔，第一个值被用作元素的锚定点， 第二个值被用作目标的锚定点。
除了锚定点之外，位置参数也支持"?"字符。如果在位置字符串末尾传递"?"， 元素将会试图按照指定方式对齐，但是如果必要，位置将会根据视口进行计算。 注意，被对齐的元素可以被交换而对齐到一个与指定值不同的位置，以便强制 视口约束。以下是所有支持的锚定位置:
Value  Description
-----  -----------------------------
tl     左上角(默认)
t      顶边中点
tr     右上角
l      左侧中点
c      元素中点
r      右侧中点
bl     左下角
b      底部中点
br     右下角
示例用法:
// 使用默认定位("tl-bl"，不强制)将一个元素对齐到另一个元素
el.alignTo("other-el");

// align the top left corner of el with the top right corner of other-el (constrained to viewport)
el.alignTo("other-el", "tr?");

// align the bottom right corner of el with the center left edge of other-el
el.alignTo("other-el", "br-l?");

// align the center of el with the bottom left corner of other-el and
// adjust the x position by -6 pixels (and the y position by 0)
el.alignTo("other-el", "c-bl", [-6, 0]);
参数:
  • element : Mixed
    需要对齐到的元素。
  • position : String
    (可选，默认为"tl-bl?")需要对齐到的位置。
  • offsets : Array
    (可选)根据[x, y]的位置偏移
  • animate : Boolean/Object
    (可选)True将进行默认的动画效果，或者是一个标准的Element 动画配置对象
返回值:
  • Ext.Element
    this
Element
anchorTo ( Mixed element , String position , [ Array offsets ], [ Boolean/Object animate ], [ Boolean/Number monitorScroll ], Function callback ) : Ext.Element
将一个元素锚定到另一个元素上，并在window尺寸发生变化时重新进行对齐。
将一个元素锚定到另一个元素上，并在window尺寸发生变化时重新进行对齐。
参数:
  • element : Mixed
    对齐到的元素。
  • position : String
    需要对齐到的位置。
  • offsets : Array
    (可选)根据[x, y]偏移量进行定位
  • animate : Boolean/Object
    (可选)True将会使用默认动画效果或者使用一个标准的Element动画配置对象
  • monitorScroll : Boolean/Number
    (可选)True将会监听并响应body的滚动操作。 如果此参数是一个数字，它将被用作延时缓存 (默认为50ms)。
  • callback : Function
    在动画效果结束后需要调用的函数
返回值:
  • Ext.Element
    this
Element
animate ( Object args , [ Float duration ], [ Function onComplete ], [ String easing ], [ String animType ] ) : Ext.Element
在当前元素上执行自定义的动画效果...
在当前元素上执行自定义的动画效果。
  • Animation Properties

    • The Animation Control Object enables gradual transitions for any member of an element's style object that takes a numeric value including but not limited to these properties:

    • bottom, top, left, right
    • height, width
    • margin, padding
    • borderWidth
    • opacity
    • fontSize
    • lineHeight
  • Animation Property Attributes

    • 每个动画参数都是一个配置对象，拥有可配置的参数:

    • by* : relative change - start at current value, change by this value
    • from : ignore current value, start from this value
    • to* : start at current value, go to this value
    • unit : any allowable unit specification

      • *对于同一个动画属性，不要同时指定to和by

  • Animation Types

    • 支持的动画类型:

    • 'run' : Default
      var el = Ext.get('complexEl');
el.animate(
    // animation control object
    {
        borderWidth: {to: 3, from: 0},
        opacity: {to: .3, from: 1},
        height: {to: 50, from: el.getHeight()},
        width: {to: 300, from: el.getWidth()},
        top  : {by: - 100, unit: 'px'},
    },
    0.35,      // animation duration
    null,      // callback
    'easeOut', // easing method
    'run'      // animation type ('run','color','motion','scroll')
);
    • 'color'

      Animates transition of background, text, or border colors.

      el.animate(
    // animation control object
    {
        color: { to: '#06e' },
        backgroundColor: { to: '#e06' }
    },
    0.35,      // animation duration
    null,      // callback
    'easeOut', // easing method
    'color'    // animation type ('run','color','motion','scroll')
);
    • 'motion'

      Animates the motion of an element to/from specific points using optional bezier way points during transit.

      el.animate(
    // animation control object
    {
        borderWidth: {to: 3, from: 0},
        opacity: {to: .3, from: 1},
        height: {to: 50, from: el.getHeight()},
        width: {to: 300, from: el.getWidth()},
        top  : {by: - 100, unit: 'px'},
        points: {
            to: [50, 100],  // go to this point
            control: [      // optional bezier way points
                [ 600, 800],
                [-100, 200]
            ]
        }
    },
    3000,      // animation duration (milliseconds!)
    null,      // callback
    'easeOut', // easing method
    'motion'   // animation type ('run','color','motion','scroll')
);
    • 'scroll'

      Animate horizontal or vertical scrolling of an overflowing page element.

      el.animate(
    // animation control object
    {
        scroll: {to: [400, 300]}
    },
    0.35,      // animation duration
    null,      // callback
    'easeOut', // easing method
    'scroll'   // animation type ('run','color','motion','scroll')
);
参数:
  • args : Object
    动画控制参数
  • duration : Float
    (可选)动画持续的秒数(默认为.35)
  • onComplete : Function
    (可选)当动画效果结束时需要调用的函数
  • easing : String
    (可选)需要使用的 Ext.Fx.easing 方式(默认为'easeOut')
  • animType : String
    (可选) 'run'是默认参数。也可以是 'color', 'motion',或者 'scroll'
返回值:
  • Ext.Element
    this
Element
appendChild ( String/HTMLElement/Array/Element/CompositeElement el ) : Ext.Element
将传递的element(s)添加到当前元素
将传递的element(s)添加到当前元素
参数:
  • el : String/HTMLElement/Array/Element/CompositeElement
返回值:
  • Ext.Element
    this
Element
appendTo ( Mixed el ) : Ext.Element
将当前元素添加到传递的元素上
将当前元素添加到传递的元素上
参数:
  • el : Mixed
    新的父元素
返回值:
  • Ext.Element
    this
Element
applyStyles ( String/Object/Function styles ) : Ext.Element
setStyle 方法更灵活的版本，用来设置样式参数。
setStyle 方法更灵活的版本，用来设置样式参数。
参数:
  • styles : String/Object/Function
    一个样式描述字符串，例如:"width:100px"，或者是一个格式为 {width:"100px"}的对象 or object，或者是一个函数，它返回 以上内容。
返回值:
  • Ext.Element
    this
Element
autoHeight ( [ Boolean animate ], [ Float duration ], [ Function onComplete ], [ String easing ] ) : Ext.Element
Measures the element's content height and updates height to match. Note: this function uses setTimeout so the new hei...
Measures the element's content height and updates height to match. Note: this function uses setTimeout so the new height may not be available immediately.
参数:
  • animate : Boolean
    可选 Animate the transition (defaults to false)
  • duration : Float
    可选 Length of the animation in seconds (defaults to .35)
  • onComplete : Function
    可选 Function to call when animation completes
  • easing : String
    可选 Easing method to use (defaults to easeOut)
返回值:
  • Ext.Element
    this
Element
blur () : Ext.Element
尝试让元素失去焦点。所有异常都会被捕捉并忽略掉。
尝试让元素失去焦点。所有异常都会被捕捉并忽略掉。
参数:
  • 无。
返回值:
  • Ext.Element
    this
Element
boxWrap ( [ String class ] ) : Ext.Element
Wraps the specified element with a special 9 element markup/CSS block that renders by default as a gray container wit...

使用一个特殊的9元素标志/CSS块(译者注：类似nine-grid)包装指定的元素， 默认情况下它渲染成一个灰色的容器，有线性渐变背景、圆角，和4个方向的阴影。

当使用盒子包装元素时，这种特殊的标志的使用贯穿整个Ext ( Ext.Button, Ext.Panel 当 frame=true , Ext.Window)。 此标志的格式如下:

Ext.Element.boxMarkup =
    '<div class="{0}-tl"><div class="{0}-tr"><div class="{0}-tc"></div></div></div>
     <div class="{0}-ml"><div class="{0}-mr"><div class="{0}-mc"></div></div></div>
     <div class="{0}-bl"><div class="{0}-br"><div class="{0}-bc"></div></div></div>';

示例用法:

// 基本盒子包装
    Ext.get("foo").boxWrap();
    // 你也可以添加自定义的CSS类并使用CSS继承规则以定制盒子的外观。
    // 'x-box-blue' 是一个内建的选项--对于如何创建一个自定义的包装盒样式
    // 参见例子中相关的CSS定义。
    Ext.get("foo").boxWrap().addClass("x-box-blue");
参数:
  • class : String
    (可选)一个被应用到容器包装器元素的基本CSS类 (默认为'x-box')。 注意有很多CSS规则依赖此名称，用来保证全部效果能起作用， 所以，如果你提供一个用来替换的基类，确保你同时提供了所有必须的规则。
返回值:
  • Ext.Element
    创建的盒子结构最外层的包装元素。
Element
center ( [ Mixed centerIn ] ) : void
将元素放置到视口或者另一个元素的正中。
将元素放置到视口或者另一个元素的正中。
参数:
  • centerIn : Mixed
    (可选)需要在其中进行置中的元素。
返回值:
  • void
Element
child ( String selector , [ Boolean returnDom ] ) : HTMLElement/Ext.Element
根据所传递的CSS选择子，选中当前元素之下任何深度的单个子元素...
根据所传递的CSS选择子，选中当前元素之下任何深度的单个子元素 (选择子不应该包含id)。
参数:
  • selector : String
    CSS选择子
  • returnDom : Boolean
    (可选)True将会返回DOM节点而不是Ext.Element(默认为false)
返回值:
  • HTMLElement/Ext.Element
    子Ext.Element(如果returnDom = true为DOM节点)
Element
clean ( [ Boolean forceReclean ] ) : void
删除无用的文本节点
删除无用的文本节点
参数:
  • forceReclean : Boolean
    (可选)默认情况下，如果元素已经被清理过，它保存调用轨迹， 所以你可以不断调用此方法。然而，如果你更新元素时需要强制 进行一次重新清理，你可以传递true。
返回值:
  • void
Element
clearOpacity () : Ext.Element
从当前元素上清除所有不透明度设置。在IE中，某些情况下是必须的。
从当前元素上清除所有不透明度设置。在IE中，某些情况下是必须的。
参数:
  • 无。
返回值:
  • Ext.Element
    this
Element
clearPositioning ( [ String value ] ) : Ext.Element
当文档被加载之后，将位置返回到默认值
当文档被加载之后，将位置返回到默认值
参数:
  • value : String
    (可选)left,right,top,bottom使用的值，默认为''(空字符串)。 你也可以使用'auto'。
返回值:
  • Ext.Element
    this
Element
clip () : Ext.Element
存储当前元素上溢出的设置并截断溢出的部分---可以使用unclip 移除
存储当前元素上溢出的设置并截断溢出的部分---可以使用unclip 移除
参数:
  • 无。
返回值:
  • Ext.Element
    this
Element
contains ( HTMLElement/String el ) : Boolean
如果当前元素是所传递元素的祖先，返回true
如果当前元素是所传递元素的祖先，返回true
参数:
  • el : HTMLElement/String
    需要检查的元素
返回值:
  • Boolean
    如果当前元素是所传递元素的祖先，为true，其它为false
Element
createChild ( Object config , [ HTMLElement insertBefore ], [ Boolean returnDom ] ) : Ext.Element
创建传递的DomHelper配置并将它添加到当前元素，可以选择将它...
创建传递的DomHelper配置并将它添加到当前元素，可以选择将它 插入到传递的子元素之前。
参数:
  • config : Object
    DomHelper元素配置对象。 如果没有指定标签 (例如{tag:'input'})，将会自动使用指定参数创建一个div
  • insertBefore : HTMLElement
    (可选)当前元素的一个子元素
  • returnDom : Boolean
    (可选)true将会返回dom节点而不是创建一个Element
返回值:
  • Ext.Element
    新的子元素
Element
createProxy ( String/Object config , [ String/HTMLElement renderTo ], [ Boolean matchBox ] ) : Ext.Element
创建当前元素的一个代理元素
创建当前元素的一个代理元素
参数:
  • config : String/Object
    代理元素的类名，或者一个DomHelper配置对象
  • renderTo : String/HTMLElement
    (可选)元素或者元素id，代理元素将会被渲染到其中(默认为document.body)
  • matchBox : Boolean
    (可选)True将会把代理元素对齐到当前元素并调整为当前元素的尺寸(默认为false)
返回值:
  • Ext.Element
    新的代理元素
Element
createShim () : Ext.Element
为当前元素创建一个iframe衬垫，以保持选中状态，避免其它窗体对象显示在其前面。
为当前元素创建一个iframe衬垫，以保持选中状态，避免其它窗体对象显示在其前面。
参数:
  • 无。
返回值:
  • Ext.Element
    新的衬垫元素
Element
down ( String selector , [ Boolean returnDom ] ) : HTMLElement/Ext.Element
根据传递进来的CSS选择器选择单个*直接*子元素 (选择器不能含有id)。
根据传递进来的CSS选择器选择单个*直接*子元素 (选择器不能含有id)。
参数:
  • selector : String
    CSS选择子
  • returnDom : Boolean
    (可选)True将会返回DOM节点而不是Ext.Element(默认为false)
返回值:
  • HTMLElement/Ext.Element
    子Ext.Element(或者是DOM节点，如果returnDom = true)
Element
enableDisplayMode ( [ String display ] ) : Ext.Element
setVisibilityMode(Element.DISPLAY)方法的快捷方式
setVisibilityMode(Element.DISPLAY)方法的快捷方式
参数:
  • display : String
    (可选)当可见时设置给display的值
返回值:
  • Ext.Element
    this
Element
findParent ( String selector , [ Number/Mixed maxDepth ], [ Boolean returnEl ] ) : HTMLElement
先查看当前节点，然后查看其父节点，查找一个与传递尽进来的简单选择器相 匹配的节点(例如div.some-class或者 span:first-child)
先查看当前节点，然后查看其父节点，查找一个与传递尽进来的简单选择器相 匹配的节点(例如div.some-class或者 span:first-child)
参数:
  • selector : String
    需要进行测试的简单选择子
  • maxDepth : Number/Mixed
    (可选)搜索的最大深度，可以是一个数字或者元素 (默认为50||document.body)
  • returnEl : Boolean
    (可选)True将会返回一个Ext.Element对象而不是DOM节点
返回值:
  • HTMLElement
    匹配的DOM节点(如果没有找到匹配的项目为null)
Element
findParentNode ( String selector , [ Number/Mixed maxDepth ], [ Boolean returnEl ] ) : HTMLElement
在父节点中进行查找，知道一个与传递的简单选择子相匹配的项目 (例如div.some-class或者span:first-child)
在父节点中进行查找，知道一个与传递的简单选择子相匹配的项目 (例如div.some-class或者span:first-child)
参数:
  • selector : String
    需要进行测试的简单选择子
  • maxDepth : Number/Mixed
    (可选)最大搜索深度，可以是一个数字或者元素(默认为10||document.body)
  • returnEl : Boolean
    (可选)True将会返回一个Ext.Element对象而不是DOM节点
返回值:
  • HTMLElement
    符合条件的DOM节点(如果没有查找到时为null)
Element
first ( [ String selector ], [ Boolean returnDom ] ) : Ext.Element/HTMLElement
获取第一个孩子，跳过文本节点
获取第一个孩子，跳过文本节点
参数:
  • selector : String
    (可选)查找符合所传递的简单选择子的下一个兄弟节点
  • returnDom : Boolean
    (可选)True将会返回一个原始的dom节点而不是Ext.Element
返回值:
  • Ext.Element/HTMLElement
    第一个孩子节点，或者null
Element
fly ( String/HTMLElement el , [ String named ] ) : Element
Gets the globally shared flyweight Element, with the passed node as the active element. Do not store a reference to t...

Gets the globally shared flyweight Element, with the passed node as the active element. Do not store a reference to this element - the dom node can be overwritten by other code. Shorthand of Ext.Element.fly

Use this to make one-time references to DOM elements which are not going to be accessed again either by application code, or by Ext's classes. If accessing an element which will be processed regularly, then Ext.get will be more appropriate to take advantage of the caching provided by the Ext.Element class.

参数:
  • el : String/HTMLElement
    The dom node or id
  • named : String
    可选 Allows for creation of named reusable flyweights to prevent conflicts (e.g. internally Ext uses "_global")
返回值:
  • Element
    The shared Element object (or null if no matching element was found)
Element
focus ( [ Number defer ] ) : Ext.Element
尝试聚焦到元素。捕捉并忽略所有异常。
尝试聚焦到元素。捕捉并忽略所有异常。
参数:
  • defer : Number
    (可选)聚焦延迟的毫秒数
返回值:
  • Ext.Element
    this
Element
get ( Mixed el ) : Element
<静态> 查询Ext.Element对象。 此方法不能查询 Components ...
<静态> 查询Ext.Element对象。

此方法不能查询 Components 此方法用来查询包装DOM元素的Ext.Element对象。 如果需要通过ID获得一个Component，使用 Ext.ComponentMgr.get。

使用简单的缓存始终返回相同的对象。 如果相同id的对象通过AJAX或者DOM重新被创建，自动进行处理。

参数:
  • el : Mixed
    节点id，一个DOM Node，或者一个现有的Element。
返回值:
  • Element
    Element对象(如果没有找到匹配的元素则为null)
Element
getAlignToXY ( Mixed element , String position , [ Array offsets ] ) : Array
获取当前元素与其它元素对齐的x,y坐标。 对于支持位置值的更多信息，参见...
获取当前元素与其它元素对齐的x,y坐标。 对于支持位置值的更多信息，参见 alignTo。
参数:
  • element : Mixed
    需要对齐到的元素。
  • position : String
    (可选，默认为"tl-bl?")需要对齐到的位置。
  • offsets : Array
    (可选)通过[x,y]偏移位置
返回值:
  • Array
    [x, y]
Element
getAnchorXY ( [ String anchor ], [ Boolean local ], [ Object size ] ) : Array
获取x,y坐标，根据元素上的锚定位置指定。
获取x,y坐标，根据元素上的锚定位置指定。
参数:
  • anchor : String
    (可选)指定的锚定位置(默认为"c")。 支持锚定位置的更多细节，参见 alignTo。
  • local : Boolean
    (可选)True将会获取本地锚定位置(element top/left-relative)而不是页面坐标
  • size : Object
    (可选)一个包含用来计算锚定位置的尺寸的对象 {width: (target width), height: (target height)} (默认为元素的当前尺寸)
返回值:
  • Array
    [x, y]一个包含了元素x和y坐标的数组
Element
getAttribute ( String name , [ String namespace ] ) : String
返回元素底层DOM节点的一个属性值。
返回元素底层DOM节点的一个属性值。
参数:
  • name : String
    属性名
  • namespace : String
    (可选)查找属性的命名空间
返回值:
  • String
    属性值
Element
getAttributeNS ( String namespace , String name ) : String
从元素底层的DOM节点上返回一个特定命名空间中的属性值。
从元素底层的DOM节点上返回一个特定命名空间中的属性值。
参数:
  • namespace : String
    查找属性的命名空间
  • name : String
    属性名
返回值:
  • String
    属性值
Element
getBorderWidth ( String side ) : Number
获取指定侧边的border(s)宽度
获取指定侧边的border(s)宽度
参数:
  • side : String
    可以是t, l, r, b或者这些参数的任意组合，多个参数将返回结果之和。 例如，传递'lr'将会获取 left边框宽度 +right 边框宽度。
返回值:
  • Number
    所传递的侧边的宽度之和
Element
getBottom ( Boolean local ) : Number
获取元素底部的Y坐标(元素的Y位置+元素高度)
获取元素底部的Y坐标(元素的Y位置+元素高度)
参数:
  • local : Boolean
    True将会获取本地的CSS位置而不是页面坐标
返回值:
  • Number
Element
getBox ( [ Boolean contentBox ], [ Boolean local ] ) : Object
返回一个描述当前元素区域的对象，可以传递给setBox 方法用来设置另外一个...
返回一个描述当前元素区域的对象，可以传递给setBox 方法用来设置另外一个Element的size/location，以便与当前元素相匹配。
参数:
  • contentBox : Boolean
    (可选)如果为true，描述元素内容的盒子将会被返回。
  • local : Boolean
    (可选)如果为true，将会返回元素的left和top而不是页面x/y
返回值:
  • Object
    box 一个格式如下的对象 <pre><code> { x: &lt;Element's X position>, y: &lt;Element's Y position>, width: &lt;Element's width>, height: &lt;Element's height>, bottom: &lt;Element's lower bound>, right: &lt;Element's rightmost bound> } </code></pre> 返回的对象也可以放到一个数组中，索引0包含X位置，索引1包含Y位置。 所以结果也可以被{@link #setXY}使用。
Element
getCenterXY () : Array
计算x,y值，把当前元素放置到屏幕正中
计算x,y值，把当前元素放置到屏幕正中
参数:
  • 无。
返回值:
  • Array
    x, y值[x, y]
Element
getColor ( String attr , String defaultValue , [ String prefix ] ) : void
返回指定的CSS属性的颜色值。 rgb，3位（例如#fff）， 合法的值将会被转换成一个标准的 6位十六进制颜色值。
返回指定的CSS属性的颜色值。 rgb，3位（例如#fff）， 合法的值将会被转换成一个标准的 6位十六进制颜色值。
参数:
  • attr : String
    css属性
  • defaultValue : String
    当找不到合法的颜色时使用的默认值
  • prefix : String
    (可选)默认为#。当使用颜色值时使用一个空字符串。
返回值:
  • void
Element
getComputedHeight () : Number
当偏移量无效，必要时根据CSS高度通过padding或者borders， 要么返回当前元素的offsetHeight...
当偏移量无效，必要时根据CSS高度通过padding或者borders， 要么返回当前元素的offsetHeight，要么返回元素的height. 对于display:none的元素，如果没有使用CSS设置高度，此机制可能无效。
参数:
  • 无。
返回值:
  • Number
Element
getComputedWidth () : Number
返回当前元素的offsetWidth或者宽度，根据校准后的CSS宽度， 当偏移量不可用需要模拟offsetWidth时...
返回当前元素的offsetWidth或者宽度，根据校准后的CSS宽度， 当偏移量不可用需要模拟offsetWidth时，通过padding或者border校准。 如果没有通过CSS设置一个宽度值，对于一个display:none的元素此方法可能没有作用。
参数:
  • 无。
返回值:
  • Number
Element
getFrameWidth ( String sides ) : Number
返回所传递“侧边”("sides")的padding和border宽度之和。...
返回所传递“侧边”("sides")的padding和border宽度之和。 关于侧边的更多信息参见getBorderWidth()方法。
参数:
  • sides : String
返回值:
  • Number
Element
getHeight ( [ Boolean contentHeight ] ) : Number
返回元素的高度偏移量
返回元素的高度偏移量
参数:
  • contentHeight : Boolean
    (可选)true将会获得减去边框和填充之后的高度
返回值:
  • Number
    元素的高度
Element
getLeft ( Boolean local ) : Number
获取左侧X坐标
获取左侧X坐标
参数:
  • local : Boolean
    True将会获取本地CSS位置而不是页面坐标
返回值:
  • Number
Element
getMargins ( [ String sides ] ) : Object/Number
如果不传递特定一边， 将获取一个对象，包含top, left, right 和 bottom参数， 表示当前元素的页边空白...
如果不传递特定一边， 将获取一个对象，包含top, left, right 和 bottom参数， 表示当前元素的页边空白， 然后返回所有边加在一起的宽度值(参见 getPadding)
参数:
  • sides : String
    (可选) l, r, t, b 的结合物，用来获取这些边距的和
返回值:
  • Object/Number
Element
getOffsetsTo ( Mixed element ) : Array
返回当前元素与所传递元素之间的位置偏移量。 两个函数都必须是DOM树的一部分并且没有display:none属性...
返回当前元素与所传递元素之间的位置偏移量。 两个函数都必须是DOM树的一部分并且没有display:none属性，以便拥有页面坐标。
参数:
  • element : Mixed
    获取偏移量的起始元素。
返回值:
  • Array
    XY页面偏移量(例如[100, -200])
Element
getPadding ( String side ) : Number
获得指定一边的填充宽度
获得指定一边的填充宽度
参数:
  • side : String
    可以是t, l, r, b或者这些值的任意组合，用来添加多个值。 例如，传递 'lr'将会获得 l eft侧的填充 + r ight侧的填充
返回值:
  • Number
    侧边填充加在一起的值
Element
getPositioning () : Object
返回一个对象，拥有所有CSS位置属性。 与setPostioning配合使用...
返回一个对象，拥有所有CSS位置属性。 与setPostioning配合使用，在执行更新然后重置元素位置之前，用来获得一份位置快照。
参数:
  • 无。
返回值:
  • Object
Element
getRegion () : Region
返回所给元素的区域。元素必须是DOM树的一部分，拥有一个区域参数...
返回所给元素的区域。元素必须是DOM树的一部分，拥有一个区域参数 (display:none 或者没有添加的元素将会返回false)。
参数:
  • 无。
返回值:
  • Region
    一个Ext.lib.Region，包含"top, left, bottom, right"成员值。
Element
getRight ( Boolean local ) : Number
获取元素右侧的X坐标(元素的X位置 +元素宽度)
获取元素右侧的X坐标(元素的X位置 +元素宽度)
参数:
  • local : Boolean
    True将会获取本地CSS位置而不是页面坐标
返回值:
  • Number
Element
getScroll () : Object
返回元素当前的滚动位置。
返回元素当前的滚动位置。
参数:
  • 无。
返回值:
  • Object
    一个包含滚动位置的对象，格式为{left: (scrollLeft), top: (scrollTop)}
Element
getSize ( [ Boolean contentSize ] ) : Object
返回元素的尺寸。
返回元素的尺寸。
参数:
  • contentSize : Boolean
    (可选)treu将会获取减去边框和填充后的width/size
返回值:
  • Object
    一个包含元素尺寸的对象{width: (element width), height: (element height)}
Element
getStyle ( String property ) : String
规格化currentStyle 和 computedStyle。
规格化currentStyle 和 computedStyle。
参数:
  • property : String
    样式属性，它的值将会被返回。
返回值:
  • String
    当前元素上style属性的当前值。
Element
getStyleSize () : void
返回元素可用的尺寸以便对内部的内容进行布局...

返回元素可用的尺寸以便对内部的内容进行布局。

如果存在，getStyleSize优先使用样式尺寸，否则 它选择offsetHeight/clientHeight和offsetWidth/clientWidth 中比较大的值。 如需获得去掉滚动条后的尺寸，使用getViewSize。 document body的尺寸在适配器层被处理，它为IE以及严格模式等情况做处理。

参数:
  • 无。
返回值:
  • void
Element
getStyles ( String style1 , String style2 , String etc. ) : Object
返回一个对象，包含了匹配的所需样式属性。例如，el.getStyles('color', 'font-size', 'width')可能返回...
返回一个对象，包含了匹配的所需样式属性。例如，el.getStyles('color', 'font-size', 'width')可能返回 {'color': '#FFFFFF', 'font-size': '13px', 'width': '100px'}。
参数:
  • style1 : String
    样式名称
  • style2 : String
    样式名称
  • 等等 : String
返回值:
  • Object
    样式对象
Element
getTextWidth ( String text , [ Number min ], [ Number max ] ) : Number
返回所传递文本的宽度像素值，或者返回当前元素中的文本宽度。
返回所传递文本的宽度像素值，或者返回当前元素中的文本宽度。
参数:
  • text : String
    需要测量的文本。 默认为元素中的innerHTML
  • min : Number
    (可选) 返回的最小值。
  • max : Number
    (可选) 返回的最大值。
返回值:
  • Number
    文本宽度像素值。
Element
getTop ( Boolean local ) : Number
获得顶部Y坐标
获得顶部Y坐标
参数:
  • local : Boolean
    True将会获得本地CSS位置而不是页面坐标
返回值:
  • Number
Element
getUpdater () : Ext.Updater
获取当前元素的 Updater
获取当前元素的 Updater
参数:
  • 无。
返回值:
  • Ext.Updater
    Updater
Element
getValue ( Boolean asNumber ) : String/Number
返回"value"参数的值
返回"value"参数的值
参数:
  • asNumber : Boolean
    true将会把值解析为一个数字
返回值:
  • String/Number
Element
getViewSize () : void
返回可用元素的尺寸以便进行内部布局。如果元素(或者任何祖先元素)有CSS样式...

返回可用元素的尺寸以便进行内部布局。

如果元素(或者任何祖先元素)有CSS样式 display : none ，尺寸将会为0

例如:
var vpSize = Ext.getBody().getViewSize();
        // all Windows created afterwards will have a default value of 90% height and 95% width
        Ext.Window.override({
            width: vpSize.width * 0.9,
            height: vpSize.height * 0.95
        });
        // To handle window resizing you would have to hook onto onWindowResize.
getViewSize使用clientHeight/clientWidth，它们去除了滚动条的尺寸。 如需获得包含滚动条的尺寸，使用getStyleSize。document body的尺寸在 适配器层被处理，它为IE和严格模式(strict mode)等情况做了处理。
参数:
  • 无。
返回值:
  • void
Element
getWidth ( [ Boolean contentWidth ] ) : Number
Returns the offset width of the element
Returns the offset width of the element
参数:
  • contentWidth : Boolean
    可选 true to get the width minus borders and padding
返回值:
  • Number
    The element's width
Element
getX () : Number
获取元素当前的X位置值，基于页面坐标。 元素必须是DOM树的一部分， 拥有页面坐标...
获取元素当前的X位置值，基于页面坐标。 元素必须是DOM树的一部分， 拥有页面坐标 (display:none 或者未被添加的元素将返回false)。
参数:
  • 无。
返回值:
  • Number
    元素的X位置
Element
getXY () : Array
获取元素的当前位置，基于页面坐标。 Element必须是DOM树的一部分，有页面坐标...
获取元素的当前位置，基于页面坐标。 Element必须是DOM树的一部分，有页面坐标 (display:none或者没有被添加的元素将会返回false)。
参数:
  • 无。
返回值:
  • Array
    元素的XY位置
Element
getY () : Number
获取元素当前的Y位置值，基于页面坐标。 元素必须是DOM树的一部分，拥有页面坐标...
获取元素当前的Y位置值，基于页面坐标。 元素必须是DOM树的一部分，拥有页面坐标 (display:none 或者未被添加的元素将返回false)。
参数:
  • 无。
返回值:
  • Number
    元素的Y位置
Element
hasClass ( String className ) : Boolean
检查指定的CSS类在当前元素的DOM节点上是否存在。
检查指定的CSS类在当前元素的DOM节点上是否存在。
参数:
  • className : String
    需要测试的CSS类
返回值:
  • Boolean
    如果(CSS)类存在为true，其它false
Element
hide ( [ Boolean/Object animate ] ) : Ext.Element
Hide this element - Uses display mode to determine whether to use "display" or "visibility". See setVisible.
Hide this element - Uses display mode to determine whether to use "display" or "visibility". See setVisible.
参数:
  • animate : Boolean/Object
    (可选)true将会使用默认动画效果，或者是一个标准的元素动画配置对象。
返回值:
  • Ext.Element
    this
Element
hover ( Function overFn , Function outFn , [ Object scope ], [ Object options ] ) : Ext.Element
设置事件监听器，当鼠标移入和移出Element时调用传递的函数。
设置事件监听器，当鼠标移入和移出Element时调用传递的函数。
参数:
  • overFn : Function
    当鼠标进入Element时需要调用的函数。
  • outFn : Function
    当鼠标离开Element时需要调用的函数。
  • scope : Object
    (可选)作用域( this 引用)，函数将在其中被执行。默认为Element的DOM元素。
  • options : Object
    (可选)监听器选项。参见 options参数。
返回值:
  • Ext.Element
    this
Element
initDD ( String group , Object config , Object overrides ) : Ext.dd.DD
为当前元素初始化一个Ext.dd.DD 拖拽对象。
为当前元素初始化一个Ext.dd.DD 拖拽对象。
参数:
  • group : String
    DD对象所属的组
  • config : Object
    DD配置对象
  • overrides : Object
    一个对象，包含需要在DD上覆盖/实现的方法
返回值:
  • Ext.dd.DD
    DD对象
Element
initDDProxy ( String group , Object config , Object overrides ) : Ext.dd.DDProxy
Initializes a Ext.dd.DDProxy object for this element.
Initializes a Ext.dd.DDProxy object for this element.
参数:
  • group : String
    The group the DDProxy object is member of
  • config : Object
    The DDProxy config object
  • overrides : Object
    An object containing methods to override/implement on the DDProxy object
返回值:
  • Ext.dd.DDProxy
    The DDProxy object
Element
initDDTarget ( String group , Object config , Object overrides ) : Ext.dd.DDTarget
为当前元素初始化一个 Ext.dd.DDTarget 对象。
为当前元素初始化一个 Ext.dd.DDTarget 对象。
参数:
  • group : String
    DDTarget对象所属的组
  • config : Object
    DDTarget配置对象
  • overrides : Object
    一个包含了用来在DDTarget对象上覆盖/继承方法的对象
返回值:
  • Ext.dd.DDTarget
    DDTarget对象
Element
insertAfter ( Mixed el ) : Ext.Element
Inserts this element after the passed element in the DOM
Inserts this element after the passed element in the DOM
参数:
  • el : Mixed
    The element to insert after
返回值:
  • Ext.Element
    this
Element
insertBefore ( Mixed el ) : Ext.Element
在DOM中把当前元素插入到所传递的元素之前
在DOM中把当前元素插入到所传递的元素之前
参数:
  • el : Mixed
    一个元素，当前元素将插入到其前面
返回值:
  • Ext.Element
    this
Element
insertFirst ( Mixed/Object el ) : Ext.Element
插入（或创建）一个元素（或者一个DomHelper配置），作为当前元素的第一个子节点
插入（或创建）一个元素（或者一个DomHelper配置），作为当前元素的第一个子节点
参数:
  • el : Mixed/Object
    需要插入的元素或者一个元素的id，或者是一个需要创建并插入的DomHelper配置
返回值:
  • Ext.Element
    新的孩子
Element
insertHtml ( String where , String html , [ Boolean returnEl ] ) : HTMLElement/Ext.Element
向当前元素中插入一个html标签
向当前元素中插入一个html标签
参数:
  • where : String
    插入的html与当前元素的位置关系---beforeBegin, afterBegin, beforeEnd, afterEnd
  • html : String
    HTML标签
  • returnEl : Boolean
    (可选)True将会返回一个Ext.Element(默认为false)
返回值:
  • HTMLElement/Ext.Element
    插入的节点(或者是位置最近的，如果插入了多于1个标签)
Element
insertSibling ( Mixed/Object/Array el , [ String where ], [ Boolean returnDom ] ) : Ext.Element
将传递的元素(或者DomHelper配置)插入(或者创建)为当前元素的兄弟节点
将传递的元素(或者DomHelper配置)插入(或者创建)为当前元素的兄弟节点
参数:
  • el : Mixed/Object/Array
    需要插入的id、元素，或者一个需要创建和插入的DomHelper配置，*或者*是这些对象的一个数组。
  • where : String
    (可选) 'before' 或者 'after'，默认为before
  • returnDom : Boolean
    (可选)True将会返回原始的DOM元素而不是Ext.Element
返回值:
  • Ext.Element
    插入的Element。如果传递了一个数组，最后一个插入的元素将会被返回。
Element
is ( String selector ) : Boolean
如果当前元素与所传递的简单选择子相匹配，返回true (例如div.some-class或者span:first-child)
如果当前元素与所传递的简单选择子相匹配，返回true (例如div.some-class或者span:first-child)
参数:
  • selector : String
    需要测试的简单选择子
返回值:
  • Boolean
    如果当前元素与所传递的简单选择子相匹配，返回true，其它为false
Element
isBorderBox () : Boolean
测试各种CSS rules/browsers 以检测当前元素是否使用了一个边框box
测试各种CSS rules/browsers 以检测当前元素是否使用了一个边框box
参数:
  • 无。
返回值:
  • Boolean
Element
isDisplayed () : Boolean
如果display不是"none"返回true
如果display不是"none"返回true
参数:
  • 无。
返回值:
  • Boolean
Element
isMasked () : Boolean
如果当前元素被遮罩，返回true
如果当前元素被遮罩，返回true
参数:
  • 无。
返回值:
  • Boolean
Element
isScrollable () : Boolean
如果当前元素可以滚动返回true
如果当前元素可以滚动返回true
参数:
  • 无。
返回值:
  • Boolean
Element
isVisible ( [ Boolean deep ] ) : Boolean
同时使用visibility和display属性检测元素当前是否可见。
同时使用visibility和display属性检测元素当前是否可见。
参数:
  • deep : Boolean
    (可选)True将会遍历dom查看父元素是否是隐藏的(默认为false)
返回值:
  • Boolean
    如果元素当前可见为true，其它为false
Element
last ( [ String selector ], [ Boolean returnDom ] ) : Ext.Element/HTMLElement
获取最后一个孩子，跳过文本节点
获取最后一个孩子，跳过文本节点
参数:
  • selector : String
    (可选)查找与所传递的简单选择子相匹配的上一个兄弟
  • returnDom : Boolean
    (可选)True将会返回一个原始的dom节点而不是 Ext.Element
返回值:
  • Ext.Element/HTMLElement
    最后一个孩子或者null
Element
load () : Ext.Element
直接访问Updater的 Ext.Updater.update 方法...
直接访问Updater的 Ext.Updater.update 方法。方法接收的参数与 Ext.Updater.update 相同。
参数:
  • 无。
返回值:
  • Ext.Element
    this
Element
mask ( [ String msg ], [ String msgCls ] ) : Element
在当前元素之上覆盖遮罩以禁用用户交互。 必须core.css。此方法只能在可以接受子节点...
在当前元素之上覆盖遮罩以禁用用户交互。 必须core.css。此方法只能在可以接受子节点的元素上使用。
参数:
  • msg : String
    (可选)需要在遮罩中显示的消息
  • msgCls : String
    (可选)需要应用到msg元素上的css类
返回值:
  • Element
    遮罩元素
Element
move ( String direction , Number distance , [ Boolean/Object animate ] ) : Ext.Element
根据当前位置移动当前元素。
根据当前位置移动当前元素。
参数:
  • direction : String
    可能的值是: "l" (或者"left"), "r" (或者"right"), "t" (或者"top", 或者"up"), "b" (或者"bottom", 或者"down")。
  • distance : Number
    将元素移动多远，像素值
  • animate : Boolean/Object
    (可选)True将会使用默认动画效果，或者使用一个标准的Element动画配置对象
返回值:
  • Ext.Element
    this
Element
moveTo ( Number x , Number y , [ Boolean/Object animate ] ) : Ext.Element
使用页面坐标设置元素的位置，忽略元素是如何定位的。 元素必须是DOM树的一部分，拥有页面坐标(display:none或者没有添加...
使用页面坐标设置元素的位置，忽略元素是如何定位的。 元素必须是DOM树的一部分，拥有页面坐标(display:none或者没有添加 的元素将会返回false)。
参数:
  • x : Number
    新位置的X值(坐标是基于页面的)
  • y : Number
    新位置的Y值(坐标是基于页面的)
  • animate : Boolean/Object
    (可选)True将会使用默认动画效果，或者使用一个标准的Element动画配置对象
返回值:
  • Ext.Element
    this
Element
next ( [ String selector ], [ Boolean returnDom ] ) : Ext.Element/HTMLElement
获取下一个兄弟节点，跳过文本节点
获取下一个兄弟节点，跳过文本节点
参数:
  • selector : String
    (可选)查找下一个与所传递的简单选择子相匹配的兄弟节点
  • returnDom : Boolean
    (可选)True将会返回一个原始的dom节点而不是一个Ext.Element
返回值:
  • Ext.Element/HTMLElement
    下一个兄弟节点或者null
Element
on ( String eventName , Function fn , [ Object scope ], [ Object options ] ) : void
添加一个事件处理函数( addListener 方法的快捷方式)。
添加一个事件处理函数( addListener 方法的快捷方式)。
参数:
  • eventName : String
    需要处理的事件名称。
  • fn : Function
    事件调用的处理函数
  • scope : Object
    (可选)作用域( this 引用)处理函数将会在其中被执行。
  • options : Object
    (可选)一个包含标准addListener 选项的对象
返回值:
  • void
Element
parent ( [ String selector ], [ Boolean returnDom ] ) : Ext.Element/HTMLElement
获取当前元素的父节点，可以选择沿着层次链向上查找，以便匹配一个选择器
获取当前元素的父节点，可以选择沿着层次链向上查找，以便匹配一个选择器
参数:
  • selector : String
    (可选) 获取一个与传递进来的选择器相匹配的父节点
  • returnDom : Boolean
    (可选) 设置为true将返回一个原始的dom节点，而不是一个Ext.Element
返回值:
  • Ext.Element/HTMLElement
    父节点，或者null
Element
position ( [ String pos ], [ Number zIndex ], [ Number x ], [ Number y ] ) : void
初始化当前元素的位置。 如果没有传递必须的位置并且它没有没有被定位...
初始化当前元素的位置。 如果没有传递必须的位置并且它没有没有被定位，将会使得元素按照相对位置被放置。
参数:
  • pos : String
    (可选)需要使用的定位方式"relative", "absolute"或者"fixed"
  • zIndex : Number
    (可选)需要应用的zIndex
  • x : Number
    (可选)设置在页面中的X位置
  • y : Number
    (可选)设置在页面中的Y位置
返回值:
  • void
Element
prev ( [ String selector ], [ Boolean returnDom ] ) : Ext.Element/HTMLElement
获取前一个兄弟节点，跳过文本节点
获取前一个兄弟节点，跳过文本节点
参数:
  • selector : String
    (可选)返回与所传递的简单选择子相匹配的上一个兄弟节点
  • returnDom : Boolean
    (可选)True将会返回一个原始DOM节点而不是Ext.Element
返回值:
  • Ext.Element/HTMLElement
    上一个兄弟节点，或者null
Element
purgeAllListeners () : Ext.Element
从当前元素及其孩子递归地移除之前添加的所有监听器
从当前元素及其孩子递归地移除之前添加的所有监听器
参数:
  • 无。
返回值:
  • Ext.Element
    this
Element
query ( String selector ) : Array
根据传递的CSS选择子选择子节点(选择子不能含有id)。
根据传递的CSS选择子选择子节点(选择子不能含有id)。
参数:
  • selector : String
    CSS选择子
返回值:
  • Array
    符合条件的节点数组
Element
radioClass ( String/Array className ) : Ext.Element
向当前元素添加一个或多个CSS类，并且从所有兄弟节点删除相同的CSS类。
向当前元素添加一个或多个CSS类，并且从所有兄弟节点删除相同的CSS类。
参数:
  • className : String/Array
    需要添加的CSS类，或者一个CSS类数组
返回值:
  • Ext.Element
    this
Element
relayEvent ( String eventName , Object object ) : void
在当前元素上创建一个事件处理函数，这样当前元素触发和处理事件时，它可以被 转发给其它对象...
在当前元素上创建一个事件处理函数，这样当前元素触发和处理事件时，它可以被 转发给其它对象(例如再次触发事件，就像从之前的对象触发一样)。
参数:
  • eventName : String
    需要转发的事件类型
  • object : Object
    任何继承Ext.util.Observable的对象， 提供了再次触发被转发事件的上下文
返回值:
  • void
Element
remove () : void
删除当前元素的dom引用。注意，事件和缓存的删除操作在 Ext.removeNode 中进行处理

删除当前元素的dom引用。注意，事件和缓存的删除操作在 Ext.removeNode 中进行处理

参数:
  • 无。
返回值:
  • void
Element
removeAllListeners () : Ext.Element
从当前元素上删除所有添加的事件监听器
从当前元素上删除所有添加的事件监听器
参数:
  • 无。
返回值:
  • Ext.Element
    this
Element
removeAnchor () : Ext.Element
删除到当前元素的所有锚定。 参见anchorTo。
删除到当前元素的所有锚定。 参见anchorTo。
参数:
  • 无。
返回值:
  • Ext.Element
    this
Element
removeClass ( String/Array className ) : Ext.Element
从元素上删除一个或多个CSS类。
从元素上删除一个或多个CSS类。
参数:
  • className : String/Array
    需要删除的一个CSS类，或者一个CSS数组
返回值:
  • Ext.Element
    this
Element
removeListener ( String eventName , Function fn , Object scope ) : Ext.Element
从当前元素上删除一个事件监听器。 快捷方式un 与此等价。...
从当前元素上删除一个事件监听器。 快捷方式un 与此等价。 注意:当adding监听器时 明确指定了一个scope，在此处必须指定同一个作用域。例如:
el.removeListener('click', this.handlerFn);
// or
el.un('click', this.handlerFn);
参数:
  • eventName : String
    需要从其中删除监听器的事件名。
  • fn : Function
    需要删除的监听函数。 这必须是调用addListener 时所传递的函数引用。
  • scope : Object
    如果在添加监听器时指定了作用域 ( this 引用)，那么此参数必须指向同一个对象。
返回值:
  • Ext.Element
    this
Element
repaint () : Ext.Element
强制浏览器重绘当前元素
强制浏览器重绘当前元素
参数:
  • 无。
返回值:
  • Ext.Element
    this
Element
replace ( Mixed el ) : Ext.Element
使用当前元素替换所传递的元素
使用当前元素替换所传递的元素
参数:
  • el : Mixed
    需要被替换的元素
返回值:
  • Ext.Element
    this
Element
replaceClass ( String oldClassName , String newClassName ) : Ext.Element
是用另一个CSS类替换元素上的当前CSS类。如果不存在相同名称的老CSS类， 将会简单地添加新的CSS类。
是用另一个CSS类替换元素上的当前CSS类。如果不存在相同名称的老CSS类， 将会简单地添加新的CSS类。
参数:
  • oldClassName : String
    需要被替换的CSS类
  • newClassName : String
    用来替换的CSS类
返回值:
  • Ext.Element
    this
Element
replaceWith ( Mixed/Object el ) : Ext.Element
使用传递的元素替换当前元素
使用传递的元素替换当前元素
参数:
  • el : Mixed/Object
    新元素，或者一个需要创建元素的DomHelper配置
返回值:
  • Ext.Element
    this
Element
scroll ( String direction , Number distance , [ Boolean/Object animate ] ) : Boolean
向指定的方向滚动当前元素。 进行边界检测用以确保滚动操作在元素...
向指定的方向滚动当前元素。 进行边界检测用以确保滚动操作在元素可滚动的范围内进行。
参数:
  • direction : String
    可能的值有: "l" (或"left"), "r" (或"right"), "t" (或"top", 或"up"), "b" (或"bottom", 或"down")。
  • distance : Number
    将元素滚动多远，像素值
  • animate : Boolean/Object
    (可选)True将会使用默认动画效果，或者使用一个标准的Element动画配置对象
返回值:
  • Boolean
    如果触发了滚动，返回true，如果元素滚动了它能到达的最远距离，返回false.
Element
scrollIntoView ( [ Mixed container ], [ Boolean hscroll ] ) : Ext.Element
将当前元素滚动到所传递容器的可见区域中。
将当前元素滚动到所传递容器的可见区域中。
参数:
  • container : Mixed
    (可选)需要滚动的容器元素(默认为document.body)。应该是一个string (id), dom node, 或者Ext.Element.
  • hscroll : Boolean
    (可选)False将会禁止水平滚动(默认为true)
返回值:
  • Ext.Element
    this
Element
scrollTo ( String side , Number value , [ Boolean/Object animate ] ) : Element
将当前元素滚动指定的滚动点。 该方法不会进行边界检测，所以...
将当前元素滚动指定的滚动点。 该方法不会进行边界检测，所以，如果你滚动到一个怪异的值，它还是会试图去这么做。 如需自动检测边界，使用scroll()
参数:
  • side : String
    要么是"left"，scrollLeft值； 要么是"top"，scrollTop值。
  • value : Number
    新滚动值
  • animate : Boolean/Object
    (可选)True将会使用默认动画效果，或者是一个标准的Element动画配置对象
返回值:
  • Element
    this
Element
select ( String/Array selector , [ Boolean unique ], [ HTMLElement/String root ] ) : CompositeElementLite/CompositeElement
根据传递的CSS选择子选择元素，以便通过返回的 CompositeElement或 CompositeElementLite 对象...
根据传递的CSS选择子选择元素，以便通过返回的 CompositeElement或 CompositeElementLite 对象，让Element 的方法可以在一次事务中被应用到许多相关的元素。
参数:
  • selector : String/Array
    CSS选择子或者一个元素数组
  • unique : Boolean
    (可选)true将会为每个元素创建一个单独的Ext.Element对象 (默认为一个轻量级对象)(译者注：默认是“享元模式”，不会创建单独的元素)
  • root : HTMLElement/String
    (可选)开始查询的根元素或者是根元素的id
返回值:
  • CompositeElementLite/CompositeElement
Element
set ( Object o , [ Boolean useSet ] ) : Ext.Element
将传递的属性设置为当前元素的属性 (样式属性可以是字符串、对象，或者函数)
将传递的属性设置为当前元素的属性 (样式属性可以是字符串、对象，或者函数)
参数:
  • o : Object
    拥有属性的对象
  • useSet : Boolean
    (可选)false可以覆盖默认的setAttribute，使用扩展的属性。
返回值:
  • Ext.Element
    this
Element
setBottom ( String bottom ) : Ext.Element
设置元素底部的CSS样式。
设置元素底部的CSS样式。
参数:
  • bottom : String
    CSS bottom属性值
返回值:
  • Ext.Element
    this
Element
setBounds ( Number x , Number y , Mixed width , Mixed height , [ Boolean/Object animate ] ) : Ext.Element
在一次调用中设置元素的位置和尺寸。 如果animation为true，width, height, x 和 y将会同步使用动画效果。
在一次调用中设置元素的位置和尺寸。 如果animation为true，width, height, x 和 y将会同步使用动画效果。
参数:
  • x : Number
    新X位置值(坐标是基于页面的)
  • y : Number
    新Y位置值(坐标是基于页面的)
  • width : Mixed
    新宽度，可以是如下之一:
    • A Number specifying the new width in this Element's defaultUnits (by default, pixels)
    • A String used to set the CSS width style. Animation may not be used.
  • height : Mixed
    The new height. This may be one of:
    • A Number specifying the new height in this Element's defaultUnits (by default, pixels)
    • A String used to set the CSS height style. Animation may not be used.
  • animate : Boolean/Object
    (可选)true将会使用默认动画效果，或者是一个标准的元素动画配置对象。
返回值:
  • Ext.Element
    this
Element
setBox ( Object box , [ Boolean adjust ], [ Boolean/Object animate ] ) : Ext.Element
设置元素的盒子。在另一个元素上用getBox()方法获取一个盒子对象。 如果animate为true...
设置元素的盒子。在另一个元素上用getBox()方法获取一个盒子对象。 如果animate为true，那么width,height,x和y都会同步进行动画效果。
参数:
  • box : Object
    需要填充的盒子{x, y, width, height}
  • adjust : Boolean
    (可选)是否为盒子模型问题进行自动调整
  • animate : Boolean/Object
    (可选)True将会使用默认动画效果，或者使用一个标准的Element动画配置对象
返回值:
  • Ext.Element
    this
Element
setDisplayed ( Mixed value ) : Ext.Element
设置CSS的display属性。如果指定的值是一个布尔型的true，请使用 使用originalDisplay。
设置CSS的display属性。如果指定的值是一个布尔型的true，请使用 使用originalDisplay。
参数:
  • value : Mixed
    布尔值将会使用它的默认display显示元素，或者一个直接设置display的字符串。
返回值:
  • Ext.Element
    this
Element
setHeight ( Mixed height , [ Boolean/Object animate ] ) : Ext.Element
设置当前元素的高度...
设置当前元素的高度。
// 将高度变为200px，并使用默认配置进行动画效果
Ext.fly('elementId').setHeight(200, true);
// 将高度变为150px，并使用自定义配置进行动画效果
Ext.fly('elId').setHeight(150, {
    duration : .5, // 动画效果将会持续.5秒
    // 将会被内容变为"finished"
    callback: function(){ this.update("finished"); }
});
参数:
  • height : Mixed
    新的高度。可以是以下之一:
    • 在当前元素的defaultUnits 中指定新高度的一个数字(默认为像素值)。
    • 一个用来设置CSS高度样式的字符串。可以不使用动画效果。
  • animate : Boolean/Object
    (可选)true将会使用默认动画效果或者使用一个标准的元素动画配置对象
返回值:
  • Ext.Element
    this
Element
setLeft ( String left ) : Ext.Element
直接使用CSS样式设置元素左侧的位置 (替代 setX)。
直接使用CSS样式设置元素左侧的位置 (替代 setX)。
参数:
  • left : String
    CSS的left属性值
返回值:
  • Ext.Element
    this
Element
setLeftTop ( String left , String top ) : Ext.Element
快速设置左上角，增加默认单位
快速设置左上角，增加默认单位
参数:
  • left : String
    CSS的left属性值
  • top : String
    CSS的top属性值
返回值:
  • Ext.Element
    this
Element
setLocation ( Number x , Number y , [ Boolean/Object animate ] ) : Ext.Element
使用页面坐标设置元素的位置，忽略元素是如何定位的。 元素必须是DOM树的一部分，拥有页面坐标(display:none或者没有添加...
使用页面坐标设置元素的位置，忽略元素是如何定位的。 元素必须是DOM树的一部分，拥有页面坐标(display:none或者没有添加 的元素将会返回false)。
参数:
  • x : Number
    新的X位置值(坐标是基于页面的)
  • y : Number
    新的Y位置值(坐标是基于页面的)
  • animate : Boolean/Object
    (可选)True将会使用默认动画效果，或者使用一个标准的Element动画配置对象
返回值:
  • Ext.Element
    this
Element
setOpacity ( Float opacity , [ Boolean/Object animate ] ) : Ext.Element
设置元素的不透明度
设置元素的不透明度
参数:
  • opacity : Float
    新的不透明度。0 =全透明,.5 = 50%可见, 1 =完全可见,等等
  • animate : Boolean/Object
    (可选)一个标准的Element动画配置对象，或者 true将会使用默认动画效果({duration: .35, easing: 'easeIn'})
返回值:
  • Ext.Element
    this
Element
setPositioning ( Object posCfg ) : Ext.Element
使用getPositioning()返回的对象设置位置。
使用getPositioning()返回的对象设置位置。
参数:
  • posCfg : Object
返回值:
  • Ext.Element
    this
Element
setRegion ( Ext.lib.Region region , [ Boolean/Object animate ] ) : Ext.Element
设置元素的位置并调整指定区域的尺寸。 如果animation配置项为true，则width,height,x 和y...
设置元素的位置并调整指定区域的尺寸。 如果animation配置项为true，则width,height,x 和y都会同步使用动画效果。
参数:
  • region : Ext.lib.Region
    需要填充的区域
  • animate : Boolean/Object
    (可选)true将会使用默认动画效果，或者是一个标准的元素动画配置对象。
返回值:
  • Ext.Element
    this
Element
setRight ( String right ) : Ext.Element
设置元素CSS的right样式。
设置元素CSS的right样式。
参数:
  • right : String
    CSS的right参数值
返回值:
  • Ext.Element
    this
Element
setSize ( Mixed width , Mixed height , [ Boolean/Object animate ] ) : Ext.Element
设置当前元素的尺寸。如果动画效果为true，宽度和高度都会同时进行动画效果。
设置当前元素的尺寸。如果动画效果为true，宽度和高度都会同时进行动画效果。
参数:
  • width : Mixed
    新宽度。可以是以下之一:
    • 在元素的 defaultUnits 中指定新宽度的数字(默认为像素值)。
    • 一个用来设置CSS宽度样式的字符串。动画效果可能不会被使用。
    • 一个尺寸对象，格式为 {width: widthValue, height: heightValue} 。
  • height : Mixed
    新高度。可以是如下之一:
    • 在元素的 defaultUnits 中指定新高度的数字(默认为像素值)。
    • 一个用来设置CSS高度样式的字符串。动画效果可能不会被使用。
  • animate : Boolean/Object
    (可选)True将进行默认的动画效果，或者是一个标准的Element 动画配置对象
返回值:
  • Ext.Element
    this
Element
setStyle ( String/Object property , [ String value ] ) : Ext.Element
用来设置style属性的包装器，也可以使用包含多个样式的单个object参数。
用来设置style属性的包装器，也可以使用包含多个样式的单个object参数。
参数:
  • property : String/Object
    需要设置的样式属性，或者一个包含多个样式的对象。
  • value : String
    (可选)需要应用到给定属性的值，如果传递的是一个object，此值为null.
返回值:
  • Ext.Element
    this
Element
setTop ( String top ) : Ext.Element
使用CSS样式直接设置元素的顶部位置(替代 setY)。
使用CSS样式直接设置元素的顶部位置(替代 setY)。
参数:
  • top : String
    CSS top属性值
返回值:
  • Ext.Element
    this
Element
setVisibilityMode ( Number visMode ) : Ext.Element
Sets the element's visibility mode. When setVisible() is called it will use this to determine whether to set the visi...
Sets the element's visibility mode. When setVisible() is called it will use this to determine whether to set the visibility or the display property.
参数:
  • visMode : Number
    Ext.Element.VISIBILITY or Ext.Element.DISPLAY
返回值:
  • Ext.Element
    this
Element
setVisible ( Boolean visible , [ Boolean/Object animate ] ) : Ext.Element
设置元素的可见性(参见细节)。 如果visibilityMode被设置为Element.DISPLAY， 将会使用display属性隐藏元素...
设置元素的可见性(参见细节)。 如果visibilityMode被设置为Element.DISPLAY， 将会使用display属性隐藏元素，否则使用visibility属性。 默认使用visibility属性隐藏和显示。
参数:
  • visible : Boolean
    元素是否可见
  • animate : Boolean/Object
    (可选)True将会使用默认动画效果，或者使用一个标准的Element动画配置对象
返回值:
  • Ext.Element
    this
Element
setWidth ( Mixed width , [ Boolean/Object animate ] ) : Ext.Element
设置当前元素的宽度。
设置当前元素的宽度。
参数:
  • width : Mixed
    新宽度。此参数可以是如下之一：
    • 在当前元素的defaultUnits属性 指定新宽度值(默认使用此方式，单位为像素)。
    • 一个用来设置CSS宽度样式的字符串。不能使用动画效果。
  • animate : Boolean/Object
    (可选)true将会使用默认动画效果，或者是一个标准的元素动画配置对象。
返回值:
  • Ext.Element
    this
Element
setX ( Number The , [ Boolean/Object animate ] ) : Ext.Element
使用页面坐标设置元素的X位置。 元素必须是DOM树的一部分，拥有页面坐标(display:none或者没有添加...
使用页面坐标设置元素的X位置。 元素必须是DOM树的一部分，拥有页面坐标(display:none或者没有添加 的元素将会返回false)。
参数:
  • The : Number
    元素的X位置
  • animate : Boolean/Object
    (可选)True将会使用默认动画效果，或者使用一个标准的Element动画配置对象
返回值:
  • Ext.Element
    this
Element
setXY ( Array pos , [ Boolean/Object animate ] ) : Ext.Element
使用页面坐标设置元素的位置，忽略元素是如何定位的。 元素必须是DOM树的一部分，拥有页面坐标(display:none或者没有添加...
使用页面坐标设置元素的位置，忽略元素是如何定位的。 元素必须是DOM树的一部分，拥有页面坐标(display:none或者没有添加 的元素将会返回false)。
参数:
  • pos : Array
    新位置，包含X & Y [x, y]值(坐标以页面为依据)
  • animate : Boolean/Object
    (可选)True将会使用默认动画效果，或者使用一个标准的Element动画配置对象
返回值:
  • Ext.Element
    this
Element
setY ( Number The , [ Boolean/Object animate ] ) : Ext.Element
根据页面坐标设置元素的Y位置。 元素必须是DOM树的一部分，并且有页面坐标...
根据页面坐标设置元素的Y位置。 元素必须是DOM树的一部分，并且有页面坐标 (display:none或者没有被添加的元素将会返回false)。
参数:
  • The : Number
    元素的Y位置
  • animate : Boolean/Object
    (可选)True将会使用默认动画效果，或者使用一个标准的Element动画配置对象
返回值:
  • Ext.Element
    this
Element
show ( [ Boolean/Object animate ] ) : Ext.Element
显示当前元素---使用显示模式以决定是使用"display"还是"visibility"。 参见setVisible。
显示当前元素---使用显示模式以决定是使用"display"还是"visibility"。 参见setVisible。
参数:
  • animate : Boolean/Object
    (可选)True将会使用默认动画效果，或者使用一个标准的Element动画配置对象
返回值:
  • Ext.Element
    this
Element
swallowEvent ( String/Array eventName , [ Boolean preventDefault ] ) : Ext.Element
停止指定事件的冒泡并可以选择阻止默认操作。
停止指定事件的冒泡并可以选择阻止默认操作。
参数:
  • eventName : String/Array
    需要停止冒泡的一个事件/事件数组
  • preventDefault : Boolean
    (可选)true将会同时阻止默认操作
返回值:
  • Ext.Element
    this
Element
toggle ( [ Boolean/Object animate ] ) : Ext.Element
轮换元素的visibility或者display，根据可视模式。
轮换元素的visibility或者display，根据可视模式。
参数:
  • animate : Boolean/Object
    (可选)True将会使用默认动画效果，或者使用一个标准的Element动画配置对象
返回值:
  • Ext.Element
    this
Element
toggleClass ( String className ) : Ext.Element
在当前元素上轮换指定的CSS类(如果已经存在删除它，否则添加它)。
在当前元素上轮换指定的CSS类(如果已经存在删除它，否则添加它)。
参数:
  • className : String
    需要轮换的CSS类
返回值:
  • Ext.Element
    this
Element
translatePoints ( Number/Array x , [ Number y ] ) : Object
将传递的页面坐标翻译成当前元素的left/top CSS值
将传递的页面坐标翻译成当前元素的left/top CSS值
参数:
  • x : Number/Array
    页面x或者一个包含[x, y]的数组
  • y : Number
    (可选)页面y值，如果x不是数组，此项为必须
返回值:
  • Object
    一个包含left和top属性的对象。例如{left: (value), top: (value)}
Element
un ( String eventName , Function fn , Object scope ) : Ext.Element
从当前元素上删除一个事件监听器( 附加注释参见 removeListener )。
从当前元素上删除一个事件监听器( 附加注释参见 removeListener )。
参数:
  • eventName : String
    事件名，将从其上删除监听器。
  • fn : Function
    需要删除的处理函数。 这必须是调用addListener 时传递的函数引用。
  • scope : Object
    如果在添加监听器时指定了作用域 ( this 引用)，那么此参数必须指向同一个对象。
返回值:
  • Ext.Element
    this
Element
unclip () : Ext.Element
将剪裁（溢出）返回到调用clip 之前的状态
将剪裁（溢出）返回到调用clip 之前的状态
参数:
  • 无。
返回值:
  • Ext.Element
    this
Element
unmask () : void
删除之前应用的一个遮罩。
删除之前应用的一个遮罩。
参数:
  • 无。
返回值:
  • void
Element
unselectable () : Ext.Element
禁止选中当前元素中的文本(为跨浏览器做了规格化处理)
禁止选中当前元素中的文本(为跨浏览器做了规格化处理)
参数:
  • 无。
返回值:
  • Ext.Element
    this
Element
up ( String selector , [ Number/Mixed maxDepth ] ) : Ext.Element
沿着dom向上回溯，查找与传递进来的简单选择器相匹配的父节点 (例如div.some-class或者span:first-child)...
沿着dom向上回溯，查找与传递进来的简单选择器相匹配的父节点 (例如div.some-class或者span:first-child)。 这是findParentNode()方法的快捷方式， 此方法总是返回一个Ext.Element。
参数:
  • selector : String
    需要进行测试的简单选择子
  • maxDepth : Number/Mixed
    (可选)搜索的最大深度，可以是一个数字或者元素 (默认为10||document.body)
返回值:
  • Ext.Element
    匹配的DOM节点(如果没有找到匹配的项目为null)
Element
update ( String html , [ Boolean loadScripts ], [ Function callback ] ) : Ext.Element
刷新当前元素的innerHTML，可选择搜索并处理脚本
刷新当前元素的innerHTML，可选择搜索并处理脚本
参数:
  • html : String
    新的HTML
  • loadScripts : Boolean
    (可选)True将会查找并处理脚本(默认为false)
  • callback : Function
    (可选)对于异步加载脚本，将会在update操作完成时通知你
返回值:
  • Ext.Element
    this
Element
wrap ( [ Object config ], [ Boolean returnDom ] ) : HTMLElement/Element
使用另一个元素创建并包装当前元素
使用另一个元素创建并包装当前元素
参数:
  • config : Object
    (可选)为包装器元素提供的DomHelper元素配置对象，或者对于一个空div来说为null
  • returnDom : Boolean
    (可选)True将会返回原始的DOM元素而不是Ext.Element
返回值:
  • HTMLElement/Element
    The newly created wrapper element
Element

公共事件

Event Defined By
DOMActivate : ( Ext.EventObject e , HtmlElement t , Object o )
在支持的地方。当一个元素被激活时触发，对于实例，通过鼠标点击或者按键(激活)。
在支持的地方。当一个元素被激活时触发，对于实例，通过鼠标点击或者按键(激活)。
监听器将会以如下参数格式被调用:
  • e : Ext.EventObject
    包装DOM事件的Ext.EventObject
  • t : HtmlElement
    事件的目标。
  • o : Object
    调用addListener 时传递的配置选项。
Element
DOMAttrModified : ( Ext.EventObject e , HtmlElement t , Object o )
在支持的地方。当属性被修改时触发。
在支持的地方。当属性被修改时触发。
监听器将会以如下参数格式被调用:
  • e : Ext.EventObject
    包装DOM事件的 Ext.EventObject 。
  • t : HtmlElement
    事件的目标。
  • o : Object
    调用addListener 时传递的配置选项。
Element
DOMCharacterDataModified : ( Ext.EventObject e , HtmlElement t , Object o )
在支持的地方。 当特征数据被修改时触发。
在支持的地方。 当特征数据被修改时触发。
监听器将会以如下参数格式被调用:
  • e : Ext.EventObject
    包装DOM事件的Ext.EventObject
  • t : HtmlElement
    事件的目标。
  • o : Object
    调用addListener 时传递的配置选项。
Element
DOMFocusIn : ( Ext.EventObject e , HtmlElement t , Object o )
在支持的地方。类似HTML的focus事件，但是可以应用到所有可以被聚焦的元素。
在支持的地方。类似HTML的focus事件，但是可以应用到所有可以被聚焦的元素。
监听器将会以如下参数格式被调用:
  • e : Ext.EventObject
    包装DOM事件的Ext.EventObject
  • t : HtmlElement
    事件的目标。
  • o : Object
    调用addListener 时传递的配置选项。
Element
DOMFocusOut : ( Ext.EventObject e , HtmlElement t , Object o )
在支持的地方。与HTML的blur事件类似，但是可以应用到任何可以获得焦点 的元素上。
在支持的地方。与HTML的blur事件类似，但是可以应用到任何可以获得焦点 的元素上。
监听器将会以如下参数格式被调用:
  • e : Ext.EventObject
    包装DOM事件的Ext.EventObject
  • t : HtmlElement
    事件的目标。
  • o : Object
    调用addListener 时传递的配置选项。
Element
DOMNodeInserted : ( Ext.EventObject e , HtmlElement t , Object o )
在支持的地方。当一个节点被添加为另一个节点的孩子时触发。
在支持的地方。当一个节点被添加为另一个节点的孩子时触发。
监听器将会以如下参数格式被调用:
  • e : Ext.EventObject
    包装DOM事件的Ext.EventObject
  • t : HtmlElement
    事件的目标。
  • o : Object
    调用addListener 时传递的配置选项。
Element
DOMNodeInsertedIntoDocument : ( Ext.EventObject e , HtmlElement t , Object o )
在支持的地方。当一个节点被插入到document中时触发。
在支持的地方。当一个节点被插入到document中时触发。
监听器将会以如下参数格式被调用:
  • e : Ext.EventObject
    包装DOM事件的Ext.EventObject
  • t : HtmlElement
    事件的目标。
  • o : Object
    调用addListener 时传递的配置选项。
Element
DOMNodeRemoved : ( Ext.EventObject e , HtmlElement t , Object o )
在支持的地方。当元素的子节点被删除时触发。
在支持的地方。当元素的子节点被删除时触发。
监听器将会以如下参数格式被调用:
  • e : Ext.EventObject
    包装DOM事件的Ext.EventObject
  • t : HtmlElement
    事件的目标。
  • o : Object
    调用addListener 时传递的配置选项。
Element
DOMNodeRemovedFromDocument : ( Ext.EventObject e , HtmlElement t , Object o )
在支持的地方。当节点被从document中删除时触发。
在支持的地方。当节点被从document中删除时触发。
监听器将会以如下参数格式被调用:
  • e : Ext.EventObject
    包装DOM事件的Ext.EventObject
  • t : HtmlElement
    事件的目标。
  • o : Object
    调用addListener 时传递的配置选项。
Element
DOMSubtreeModified : ( Ext.EventObject e , HtmlElement t , Object o )
Where supported. Fires when the subtree is modified.
Where supported. Fires when the subtree is modified.
监听器将会以如下参数格式被调用:
  • e : Ext.EventObject
    包装DOM事件的Ext.EventObject
  • t : HtmlElement
    事件的目标。
  • o : Object
    调用addListener 时传递的配置选项。
Element
abort : ( Ext.EventObject e , HtmlElement t , Object o )
当object/image在完成加载之前被取消时触发。
当object/image在完成加载之前被取消时触发。
监听器将会以如下参数格式被调用:
  • e : Ext.EventObject
    包装DOM事件的Ext.EventObject
  • t : HtmlElement
    事件的目标。
  • o : Object
    调用addListener 时传递的配置选项。
Element
blur : ( Ext.EventObject e , HtmlElement t , Object o )
当元素失去焦点时触发，可以通过点击设备引起或者通过tab导航引起。
当元素失去焦点时触发，可以通过点击设备引起或者通过tab导航引起。
监听器将会以如下参数格式被调用:
  • e : Ext.EventObject
    包装DOM事件的Ext.EventObject
  • t : HtmlElement
    事件的目标。
  • o : Object
    调用addListener 时传递的配置选项。
Element
change : ( Ext.EventObject e , HtmlElement t , Object o )
当一个控制器时区输入焦点并且从获得焦点以来它的值发生了改变时触发。
当一个控制器时区输入焦点并且从获得焦点以来它的值发生了改变时触发。
监听器将会以如下参数格式被调用:
  • e : Ext.EventObject
    包装DOM事件的Ext.EventObject
  • t : HtmlElement
    事件的目标。
  • o : Object
    调用addListener 时传递的配置选项。
Element
click : ( Ext.EventObject e , HtmlElement t , Object o )
当在元素内部检测到一次鼠标点击时触发。
当在元素内部检测到一次鼠标点击时触发。
监听器将会以如下参数格式被调用:
  • e : Ext.EventObject
    包装DOM事件的Ext.EventObject
  • t : HtmlElement
    事件的目标。
  • o : Object
    调用addListener 时传递的配置选项。
Element
contextmenu : ( Ext.EventObject e , HtmlElement t , Object o )
在元素内部检测到右键点击时触发。
在元素内部检测到右键点击时触发。
监听器将会以如下参数格式被调用:
  • e : Ext.EventObject
    包装DOM事件的Ext.EventObject
  • t : HtmlElement
    事件的目标。
  • o : Object
    调用addListener 时传递的配置选项。
Element
dblclick : ( Ext.EventObject e , HtmlElement t , Object o )
当在元素内部检测到鼠标双击时触发。
当在元素内部检测到鼠标双击时触发。
监听器将会以如下参数格式被调用:
  • e : Ext.EventObject
    包装DOM事件的Ext.EventObject
  • t : HtmlElement
    事件的目标。
  • o : Object
    调用addListener 时传递的配置选项。
Element
error : ( Ext.EventObject e , HtmlElement t , Object o )
当一个object/image/frame无法完全加载时触发。
当一个object/image/frame无法完全加载时触发。
监听器将会以如下参数格式被调用:
  • e : Ext.EventObject
    包装DOM事件的Ext.EventObject
  • t : HtmlElement
    事件的目标。
  • o : Object
    调用addListener 时传递的配置选项。
Element
focus : ( Ext.EventObject e , HtmlElement t , Object o )
当一个元素通过点击设备或者通过tab导航获得焦点时触发。
当一个元素通过点击设备或者通过tab导航获得焦点时触发。
监听器将会以如下参数格式被调用:
  • e : Ext.EventObject
    包装DOM事件的Ext.EventObject
  • t : HtmlElement
    事件的目标。
  • o : Object
    调用addListener 时传递的配置选项。
Element
keydown : ( Ext.EventObject e , HtmlElement t , Object o )
当在元素内部检测到keydown时触发。
当在元素内部检测到keydown时触发。
监听器将会以如下参数格式被调用:
  • e : Ext.EventObject
    包装DOM事件的Ext.EventObject
  • t : HtmlElement
    事件的目标。
  • o : Object
    调用addListener 时传递的配置选项。
Element
keypress : ( Ext.EventObject e , HtmlElement t , Object o )
当在元素内部检测到一个keypress时触发。
当在元素内部检测到一个keypress时触发。
监听器将会以如下参数格式被调用:
  • e : Ext.EventObject
    包装DOM事件的Ext.EventObject
  • t : HtmlElement
    事件的目标。
  • o : Object
    调用addListener 时传递的配置选项。
Element
keyup : ( Ext.EventObject e , HtmlElement t , Object o )
如果检测到元素内部发生keyup事件时触发。
如果检测到元素内部发生keyup事件时触发。
监听器将会以如下参数格式被调用:
  • e : Ext.EventObject
    包装DOM事件的Ext.EventObject。
  • t : HtmlElement
    事件的目标。
  • o : Object
    调用addListener 时传递的配置选项。
Element
load : ( Ext.EventObject e , HtmlElement t , Object o )
当用户代理加载完元素内部所有内容时触发。 只有window,frames,objects和images支持。
当用户代理加载完元素内部所有内容时触发。 只有window,frames,objects和images支持。
监听器将会以如下参数格式被调用:
  • e : Ext.EventObject
    包装DOM事件的Ext.EventObject
  • t : HtmlElement
    事件的目标。
  • o : Object
    调用addListener 时传递的配置选项。
Element
mousedown : ( Ext.EventObject e , HtmlElement t , Object o )
在元素内部检测到mousedown时触发。
在元素内部检测到mousedown时触发。
监听器将会以如下参数格式被调用:
  • e : Ext.EventObject
    包装DOM事件的Ext.EventObject
  • t : HtmlElement
    事件的目标。
  • o : Object
    调用addListener 时传递的配置选项。
Element
mouseenter : ( Ext.EventObject e , HtmlElement t , Object o )
当鼠标进入元素时触发。
当鼠标进入元素时触发。
监听器将会以如下参数格式被调用:
  • e : Ext.EventObject
    包装DOM事件的Ext.EventObject
  • t : HtmlElement
    事件的目标。
  • o : Object
    调用addListener 时传递的配置选项。
Element
mouseleave : ( Ext.EventObject e , HtmlElement t , Object o )
当鼠标离开元素时触发。
当鼠标离开元素时触发。
监听器将会以如下参数格式被调用:
  • e : Ext.EventObject
    包装DOM事件的Ext.EventObject
  • t : HtmlElement
    事件的目标。
  • o : Object
    调用addListener 时传递的配置选项。
Element
mousemove : ( Ext.EventObject e , HtmlElement t , Object o )
当在元素内部检测到mousemove时触发。
当在元素内部检测到mousemove时触发。
监听器将会以如下参数格式被调用:
  • e : Ext.EventObject
    包装DOM事件的Ext.EventObject
  • t : HtmlElement
    事件的目标。
  • o : Object
    调用addListener 时传递的配置选项。
Element
mouseout : ( Ext.EventObject e , HtmlElement t , Object o )
当在元素上检测到mouseout时触发。
当在元素上检测到mouseout时触发。
监听器将会以如下参数格式被调用:
  • e : Ext.EventObject
    包装DOM事件的Ext.EventObject
  • t : HtmlElement
    事件的目标。
  • o : Object
    调用addListener 时传递的配置选项。
Element
mouseover : ( Ext.EventObject e , HtmlElement t , Object o )
Fires when a mouseover is detected within the element.
Fires when a mouseover is detected within the element.
监听器将会以如下参数格式被调用:
  • e : Ext.EventObject
    包装DOM事件的Ext.EventObject
  • t : HtmlElement
    事件的目标。
  • o : Object
    调用addListener 时传递的配置选项。
Element
mouseup : ( Ext.EventObject e , HtmlElement t , Object o )
当在元素内部检测到鼠标弹起事件时触发。
当在元素内部检测到鼠标弹起事件时触发。
监听器将会以如下参数格式被调用:
  • e : Ext.EventObject
    包装DOM事件的Ext.EventObject
  • t : HtmlElement
    事件的目标。
  • o : Object
    调用addListener 时传递的配置选项。
Element
reset : ( Ext.EventObject e , HtmlElement t , Object o )
当表单被重置时触发。
当表单被重置时触发。
监听器将会以如下参数格式被调用:
  • e : Ext.EventObject
    包装DOM事件的Ext.EventObject
  • t : HtmlElement
    事件的目标。
  • o : Object
    调用addListener 时传递的配置选项。
Element
resize : ( Ext.EventObject e , HtmlElement t , Object o )
当文档视图被调整大小时触发。
当文档视图被调整大小时触发。
监听器将会以如下参数格式被调用:
  • e : Ext.EventObject
    包装DOM事件的Ext.EventObject
  • t : HtmlElement
    事件的目标。
  • o : Object
    调用addListener 时传递的配置选项。
Element
scroll : ( Ext.EventObject e , HtmlElement t , Object o )
当document视图被滚动时触发。
当document视图被滚动时触发。
监听器将会以如下参数格式被调用:
  • e : Ext.EventObject
    包装DOM事件的Ext.EventObject
  • t : HtmlElement
    事件的目标。
  • o : Object
    调用addListener 时传递的配置选项。
Element
select : ( Ext.EventObject e , HtmlElement t , Object o )
当用户选中一个text field，包括input元素和textarea中的文本时触发。
当用户选中一个text field，包括input元素和textarea中的文本时触发。
监听器将会以如下参数格式被调用:
  • e : Ext.EventObject
    包装DOM事件的Ext.EventObject
  • t : HtmlElement
    事件的目标。
  • o : Object
    调用addListener 时传递的配置选项。
Element
submit : ( Ext.EventObject e , HtmlElement t , Object o )
当表单被提交时触发。
当表单被提交时触发。
监听器将会以如下参数格式被调用:
  • e : Ext.EventObject
    包装DOM事件的Ext.EventObject
  • t : HtmlElement
    事件的目标。
  • o : Object
    调用addListener 时传递的配置选项。
Element
unload : ( Ext.EventObject e , HtmlElement t , Object o )
当用户代理从window或者frame中删除了所有内容时触发。 对于元素...
当用户代理从window或者frame中删除了所有内容时触发。 对于元素，当目标元素或者它的任何内容被删除时触发。
监听器将会以如下参数格式被调用:
  • e : Ext.EventObject
    包装DOM事件的Ext.EventObject
  • t : HtmlElement
    事件的目标。
  • o : Object
    调用addListener 时传递的配置选项。
Element


Class Ext.Error

包: | Ext
定义类的文件: | Error.js
类: | Error
子类: | Api.Error, DataProxy.Error, DataReader.Error, Store.Error
继承自: | Object

错误类的基类。这个功能的实现，旨在为框架提供更健壮的错误处理（ 只有在debug build里 ）来检查常见的错误和问题。本类将发送错误消息 用来辅助检查错误。当在创建产品时，错误检查将会被自动移除已保证类的性能不会有 任何负面影响。

目前实现的一些错误信息例子:

"DataProxy试图去执行一个API-action但发现一个未定义的
url或function(方法)。请检查你的Proxy url或api-configuration（配置）。"

"在你的服务器响应中，找不到你的"root(根)"属性。
请检查你的JsonReader配置已确保配置属性"root（根）"和你的服务器响应配置属性一致。
如需要更多的帮助，请查看JsonReader的文档。"

创建错误信息的代码实例:

try {
    generateError({
        foo: 'bar'
    });
}
catch (e) {
    console.error(e);
}
function generateError(data) {
    throw new Ext.Error('foo-error', data);
}

公共属性

该类没有公共属性。

公共方法

Method Defined By
getMessage () : String
getMessage
getMessage
参数:
  • 无。
返回值:
  • String
Error
getName () : String
getName
getName
参数:
  • 无。
返回值:
  • String
Error
toJson () : String
toJson
toJson
参数:
  • 无。
返回值:
  • String
Error

公共事件

该类没有公共事件。


Class Ext.EventManager

包: | Ext
定义类的文件: | EventManager.js
类: | EventManager
继承自: | Object
注册事件处理函数，它们 想要接受一个规格化的EventObject，而不是标准的浏览器事件， 并且直接提供一些有用的事件。对于规格化事件对象的更多细节，参见 Ext.EventObject

该类是一个单例，不能直接创建实例。

公共属性

Property |  | Defined By
 | A : Number 按键常量 | EventManager
 | ALT : Number 按键常量 | EventManager
 | B : Number 按键常量 | EventManager
 | BACKSPACE : Number 按键常量 | EventManager
 | C : Number 按键常量 | EventManager
 | CAPS_LOCK : Number 按键常量 | EventManager
 | CONTEXT_MENU : Number 按键常量 | EventManager
 | CTRL : Number 按键常量 | EventManager
 | D : Number 按键常量 | EventManager
 | DELETE : Number 按键常量 | EventManager
 | DOWN : Number 按键常量 | EventManager
 | E : Number 按键常量 | EventManager
 | EIGHT : Number 按键常量 | EventManager
 | END : Number 按键常量 | EventManager
 | ENTER : Number 按键常量 | EventManager
 | ESC : Number 按键常量 | EventManager
 | F : Number 按键常量 | EventManager
 | F1 : Number 按键常量 | EventManager
 | F10 : Number 按键常量 | EventManager
 | F11 : Number 按键常量 | EventManager
 | F12 : Number 按键常量 | EventManager
 | F2 : Number 按键常量 | EventManager
 | F3 : Number 按键常量 | EventManager
 | F4 : Number 按键常量 | EventManager
 | F5 : Number 按键常量 | EventManager
 | F6 : Number 按键常量 | EventManager
 | F7 : Number 按键常量 | EventManager
 | F8 : Number 按键常量 | EventManager
 | F9 : Number 按键常量 | EventManager
 | FIVE : Number 按键常量 | EventManager
 | FOUR : Number 按键常量 | EventManager
 | G : Number 按键常量 | EventManager
 | H : Number 按键常量 | EventManager
 | HOME : Number 按键常量 | EventManager
 | I : Number 按键常量 | EventManager
 | INSERT : Number 按键常量 | EventManager
 | J : Number 按键常量 | EventManager
 | K : Number 按键常量 | EventManager
 | L : Number 按键常量 | EventManager
 | LEFT : Number 按键常量 | EventManager
 | M : Number 按键常量 | EventManager
 | N : Number 按键常量 | EventManager
 | NINE : Number 按键常量 | EventManager
 | NUM_CENTER : Number 按键常量 | EventManager
 | NUM_DIVISION : Number 按键常量 | EventManager
 | NUM_EIGHT : Number 按键常量 | EventManager
 | NUM_FIVE : Number 按键常量 | EventManager
 | NUM_FOUR : Number 按键常量 | EventManager
 | NUM_MINUS : Number 按键常量 | EventManager
 | NUM_MULTIPLY : Number 按键常量 | EventManager
 | NUM_NINE : Number 按键常量 | EventManager
 | NUM_ONE : Number 按键常量 | EventManager
 | NUM_PERIOD : Number 按键常量 | EventManager
 | NUM_PLUS : Number 按键常量 | EventManager
 | NUM_SEVEN : Number 按键常量 | EventManager
 | NUM_SIX : Number 按键常量 | EventManager
 | NUM_THREE : Number 按键常量 | EventManager
 | NUM_TWO : Number 按键常量 | EventManager
 | NUM_ZERO : Number 按键常量 | EventManager
 | O : Number 按键常量 | EventManager
 | ONE : Number 按键常量 | EventManager
 | P : Number 按键常量 | EventManager
 | PAGE_DOWN : Number 按键常量 | EventManager
 | PAGE_UP : Number 按键常量 | EventManager
 | PAUSE : Number 按键常量 | EventManager
 | PRINT_SCREEN : Number 按键常量 | EventManager
 | Q : Number 按键常量 | EventManager
 | R : Number 按键常量 | EventManager
 | RETURN : Number 按键常量 | EventManager
 | RIGHT : Number 按键常量 | EventManager
 | S : Number 按键常量 | EventManager
 | SEVEN : Number 按键常量 | EventManager
 | SHIFT : Number 按键常量 | EventManager
 | SIX : Number 按键常量 | EventManager
 | SPACE : Number 按键常量 | EventManager
 | T : Number 按键常量 | EventManager
 | TAB : Number 按键常量 | EventManager
 | THREE : Number 按键常量 | EventManager
 | TWO : Number 按键常量 | EventManager
 | U : Number 按键常量 | EventManager
 | UP : Number 按键常量 | EventManager
 | V : Number 按键常量 | EventManager
 | W : Number 按键常量 | EventManager
 | X : Number 按键常量 | EventManager
 | Y : Number 按键常量 | EventManager
 | Z : Number 按键常量 | EventManager
 | ZERO : Number 按键常量 | EventManager
 | fireDocReady : Object 强制document为框架进行就绪状态转换。 用来在初始页面加载完成之后，把Ext加载到DOM结构中... 强制document为框架进行就绪状态转换。 用来在初始页面加载完成之后，把Ext加载到DOM结构中 (Google API 或者其它动态加载的情况。所有扩展的'onDocumentReady' 处理函数都将被触发(如果尚未被处理))。 | EventManager
 | ieDeferSrc : Object 使用SSL时onDocumentReady使用的Url(默认为Ext.SSL_SECURE_URL) | EventManager
 | textResizeInterval : Object 频率，毫秒数，用来检测文本尺寸变化事件(默认为50) | EventManager

公共方法

Method Defined By
addListener ( String/HTMLElement el , String eventName , Function handler , [ Object scope ], [ Object options ] ) : void
向元素上添加事件处理函数。 快捷版本 on 与此等价。 典型情况下，你可以直接在元素上调用....
向元素上添加事件处理函数。 快捷版本 on 与此等价。 典型情况下，你可以直接在元素上调用 Ext.Element.addListener ，而不是调用此版本。
参数:
  • el : String/HTMLElement
    绑定事件处理函数的html元素，或者id
  • eventName : String
    需要监听的事件名
  • handler : Function
    事件调用的处理函数。 此函数被传递如下参数:
    • evt : EventObject
      描述事件的 EventObject
    • t : Element
      事件目标 Element .注意，此选项可能会被使用delegate选项过滤掉。
    • o : Object
      嗲用addListener时的配置对象。
  • scope : Object
    (可选)作用域( this 引用)处理函数在其中被执行。 默认为Element.
  • options : Object
    (可选)一个包含处理函数配置参数的对象。 它可以包含以下任何属性:
    • scope : Object
      作用域( this 引用)处理函数在其中被执行。 默认为Element.
    • delegate : String
      一个用来过滤目标或者查找目标后代的简单选择器
    • stopEvent : Boolean
      True可以停止事件。停止冒泡并阻止默认操作。
    • preventDefault : Boolean
      True将会阻止默认操作
    • stopPropagation : Boolean
      True将会阻止事件冒泡
    • normalized : Boolean
      Fale将会传递浏览器事件给处理函数，而不是Ext.EventObject
    • delay : Number
      在事件触发之后，调用处理函数之前延迟的毫秒数。
    • single : Boolean
      True将会在下次触发事件之前添加一个处理函数，然后就删除它。
    • buffer : Number
      导致处理函数在 一个Ext.util.DelayedTask 中按计划执行，延迟指定的毫秒数。 如果事件在此时间内被再次触发，原来的处理函数不会被调用， 但是新的处理函数将会替代它的位置。
    • target : Element
      只有当事件在目标Element上触发时才调用处理函数， 而不是从子节点冒泡的事件。

    如何使用这些选项的例子，参见 Ext.Element.addListener

返回值:
  • void
EventManager
function () : Boolean
参数:
  • 无。
返回值:
  • Boolean
    如果document处于一种'complete'状态时为true( 或者通过其它方式被检测为true)。 如果为false，将会再次检测状态，直到被取消。
EventManager
handleError ( Object/Error e ) : void
全框架范围内的错误处理函数。 开发者可以覆盖此方法以提供自定义的异常处理机制...
全框架范围内的错误处理函数。 开发者可以覆盖此方法以提供自定义的异常处理机制。 框架抛出的error对象总是继承自基本的Ext.Error类。
参数:
  • e : Object/Error
    抛出的异常对象。
返回值:
  • void
EventManager
hasModifier () : Boolean
如果在当前事件过程中control, meta, shift 或者 alt键被按下，返回true
如果在当前事件过程中control, meta, shift 或者 alt键被按下，返回true
参数:
  • 无。
返回值:
  • Boolean
EventManager
on ( String/HTMLElement el , String eventName , Function handler , [ Object scope ], [ Object options ] ) : void
向一个元素上添加一个事件处理函数。 addListener的快捷方式。
向一个元素上添加一个事件处理函数。 addListener 的快捷方式。
参数:
  • el : String/HTMLElement
    绑定事件处理函数的html元素，或者id
  • eventName : String
    需要监听的事件名称。
  • handler : Function
    事件调用的处理函数。
  • scope : Object
    (可选) ( this 引用)处理函数在其中被执行。 默认为Element.
  • options : Object
    (可选)一个包含标准 addListener 选项的对象。
返回值:
  • void
EventManager
onDocumentReady ( Function fn , [ Object scope ], [ boolean options ] ) : void
添加一个监听器，当document初始化完成时被通知(在onload事件和图片被加载之前)...
添加一个监听器，当document初始化完成时被通知(在onload事件和图片被加载之前)。 可以用快捷方式Ext.onReady()进行访问。
参数:
  • fn : Function
    事件调用的方法。
  • scope : Object
    (可选)作用域( this 引用)处理函数在其中被执行。 默认为浏览器的window.
  • options : boolean
    (可选)传递给 Ext.Element.addListener 的配置对象。 推荐使用 {single: true} 配置项，这样处理函数将会在第一次调用后被删除掉。
返回值:
  • void
EventManager
onTextResize ( Function fn , Object scope , boolean options ) : void
添加一个监听器，当用户改变活动文本的尺寸时通知它...
添加一个监听器，当用户改变活动文本的尺寸时通知它。 监听器被传入2个参数，老的尺寸和新的尺寸。
参数:
  • fn : Function
    事件调用的函数。
  • scope : Object
    作用域( this 引用)处理函数在其中被执行。默认为浏览器的window。
  • options : boolean
    传递给 Ext.Element.addListener 的配置对象。
返回值:
  • void
EventManager
onWindowResize ( Function fn , Object scope , boolean options ) : void
添加一个监听器，当浏览器的window发生尺寸调整时通知它，同时...
添加一个监听器，当浏览器的window发生尺寸调整时通知它，同时 提供resize事件延迟(100毫秒)，将新视口的宽度和高度传递给监听器。
参数:
  • fn : Function
    window的resize事件调用的处理函数。
  • scope : Object
    作用域( this 引用)处理函数在其中被执行。 默认为浏览器的window.
  • options : boolean
    传递给 Ext.Element.addListener 的配置对象。
返回值:
  • void
EventManager
removeAll ( String/HTMLElement el ) : void
从一个元素上删除所有事件处理函数。典型情况下，你可以直接在一个元素上使用...
从一个元素上删除所有事件处理函数。典型情况下，你可以直接在一个元素上使用 Ext.Element.removeAllListeners ，而不是调用此版本。
参数:
  • el : String/HTMLElement
    id，或者html元素，从其中删除所有事件处理函数。
返回值:
  • void
EventManager
removeListener ( String/HTMLElement el , String eventName , Function fn , Object scope ) : void
从元素上删除一个事件处理函数。 快捷版本 un 与此等价。 典型情况下，你直接在元素上使用...
从元素上删除一个事件处理函数。 快捷版本 un 与此等价。 典型情况下，你直接在元素上使用 Ext.Element.removeListener ，而不是调用此版本。
参数:
  • el : String/HTMLElement
    id，或者html元素，将会从其中删除监听器。
  • eventName : String
    事件名称
  • fn : Function
    需要删除的处理函数。 必须是调用addListener 时所传递的函数引用。
  • scope : Object
    如果在添加监听器时指定了作用域 ( this 引用)，那么此参数必须指向同一个对象。
返回值:
  • void
EventManager
removeResizeListener ( Function fn , Object scope ) : void
删除传递的window尺寸调整监听器。
删除传递的window尺寸调整监听器。
参数:
  • fn : Function
    事件调用的函数
  • scope : Object
    处理函数的作用域
返回值:
  • void
EventManager
un ( String/HTMLElement el , String eventName , Function fn , Object scope ) : void
从一个元素上删除一个事件监听器。 removeListener 的快捷方式。
从一个元素上删除一个事件监听器。 removeListener 的快捷方式。
参数:
  • el : String/HTMLElement
    id，或者html元素，从其中删除监听器。
  • eventName : String
    事件名称。
  • fn : Function
    需要删除的处理函数。 必须是调用 on 时传递的函数引用。
  • scope : Object
    如果添加监听器时指定了作用域( this 引用)， 那么，此参数必须指向同一个对象。
返回值:
  • void
EventManager

公共事件

该类没有公共事件。


Class Ext.EventObject

包: | Ext
定义类的文件: | EventManager.js
类: | EventObject
继承自: | Object
像Ext.Element 包装了原生的DOM节点一样，Ext.EventObject包装了浏览器原生的事件对象，格式化了不同 浏览器之间的差异：例如鼠标的哪个按键被点击、键盘按键、停止随同方法一起的事件冒泡机制， 用来阻止发生浏览器默认操作。

例如:

function handleClick(e, t){ // e不是一个标准的事件对象，它是一个Ext.EventObject
    e.preventDefault();
    var target = e.getTarget(); // 与t相同(目标HTMLElement)
    ...
}
var myDiv = Ext.get("myDiv");  // get reference to an Ext.Element

myDiv.on(         // 'on'是addListener方法的快捷方式
    "click",      // 点击myDiv时执行一个操作
    handleClick   // 到操作函数的引用
);
// 完成相同功能的其它方法:
Ext.EventManager.on("myDiv", 'click', handleClick);
Ext.EventManager.addListener("myDiv", 'click', handleClick);

这是一个单例的类，不能直接创建。

公共属性

该类没有公共属性。

公共方法

Method Defined By
getCharCode () : Number
获取事件的字符编码。
获取事件的字符编码。
参数:
  • 无。
返回值:
  • Number
EventObject
getKey () : Number
为事件提供一个规格化的按键码。
为事件提供一个规格化的按键码。
参数:
  • 无。
返回值:
  • Number
    按键码
EventObject
getPageX () : Number
获取事件的x坐标。
获取事件的x坐标。
参数:
  • 无。
返回值:
  • Number
EventObject
getPageY () : Number
获取事件的y坐标。
获取事件的y坐标。
参数:
  • 无。
返回值:
  • Number
EventObject
getRelatedTarget () : HTMLElement
获取事件关联的目标。
获取事件关联的目标。
参数:
  • 无。
返回值:
  • HTMLElement
EventObject
getTarget ( [ String selector ], [ Number/Mixed maxDepth ], [ Boolean returnEl ] ) : HTMLelement
获取事件的目标。
获取事件的目标。
参数:
  • selector : String
    (可选)一个简单的选择子，用来过滤目标，或者用来查找目标的祖先
  • maxDepth : Number/Mixed
    (可选) 搜索元素时的最大深度(默认值为 10 || document.body)
  • returnEl : Boolean
    (可选)设置为true将返回一个Ext.Element对象，而不是DOM节点
返回值:
  • HTMLelement
EventObject
getWheelDelta () : Number
获取跨浏览器的，规格化的鼠标滚轮滚动量
获取跨浏览器的，规格化的鼠标滚轮滚动量
参数:
  • 无。
返回值:
  • Number
    滚动量
EventObject
getXY () : Array
获取事件的页面坐标。
获取事件的页面坐标。
参数:
  • 无。
返回值:
  • Array
    xy值，就像[x, y]
EventObject
preventDefault () : void
阻止浏览器对事件的默认处理。
阻止浏览器对事件的默认处理。
参数:
  • 无。
返回值:
  • void
EventObject
stopEvent () : void
停止事件(preventDefault 并 stopPropagation)
停止事件(preventDefault 并 stopPropagation)
参数:
  • 无。
返回值:
  • void
EventObject
stopPropagation () : void
取消事件冒泡。
取消事件冒泡。
参数:
  • 无。
返回值:
  • void
EventObject
within ( Mixed el , [ Boolean related ], Boolean allowEl ) : Boolean
如果事件的目标是元素的孩子节点，返回true。...
如果事件的目标是元素的孩子节点，返回true。 除非设置了allowEl参数，如果事件的目标是元素本身，返回false。示例用法:
// 处理一个元素任何孩子节点上的所有点击
        Ext.getBody().on('click', function(e){
            if(e.within('some-el')){
                alert('Clicked on a child of some-el!');
            }
        });

        // 处理直接发生在元素上的点击事件，忽略在孩子节点上发生的点击
        Ext.getBody().on('click', function(e,t){
            if((t.id == 'some-el') && !e.within(t, true)){
                alert('Clicked directly on some-el!');
            }
        });
参数:
  • el : Mixed
    需要检测元素的id、DOM元素或者Ext.Element
  • related : Boolean
    (可选)true将会测试相关的目标是否在元素内部，而不是 在目标上
  • allowEl : Boolean
    {可选}true也将检测所传递的元素是否是目标对象或者是相关的目标
返回值:
  • Boolean
EventObject

公共事件

该类没有公共事件。


Observable
    Component
      BoxComponent
        FlashComponent

Class Ext.FlashComponent

包: | Ext
定义类的文件: | FlashComponent.js
类: | FlashComponent
子类: | Chart
继承自: | BoxComponent

配置项

Config Options Defined By
allowDomMove : Boolean
在渲染时组件是否可以移动Dom节点(默认为true)。
Component
anchor : String
注: 这个配置只用于该组件被包含在一个已使用AnchorLayout...

注: 这个配置只用于该组件被包含在一个已使用 AnchorLayout (或者其子类)配置的Container时。 基于布局管理器，例如：

  • Ext.form.FormPanel
  • 指定 layout: 'anchor' // or 'form', or 'absolute'

参见 Ext.layout.AnchorLayout. anchor 。

BoxComponent
applyTo : Mixed
指定一个元素的id、一个DOM元素或者一个已经存在并被渲染到DIV中的元素，此DIV已经被...

指定一个元素的id、一个DOM元素或者一个已经存在并被渲染到DIV中的元素，此DIV已经被 渲染到document中，并且为当前组件指定了一些结构化的标签。

  • 描述 :
      当使用了 applyTo， 在主元素中也可以用id或者CSS类名来指定组件的托管部分， 并且，如果可以的话，创建的组件可能也会试图在那个标签中创建它的子组件。
  • 注意 :
      当使用此配置项时，无需调用render()方法。
      如果指定了applyTo属性，任何传递给 renderTo 的值都会被忽略，并且目标元素的父节点将会自动被用作组件的容器。
Component
autoEl : Mixed
一个表签名或者一个 DomHelper 描述，用来创建 Element ，它将封装当前组件...

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

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

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

{
    xtype: 'box',
    autoEl: {
        tag: 'img',
        src: 'http://www.example.com/example.jpg'

    }
}, {
    xtype: 'box',
    autoEl: {
        tag: 'blockquote',
        html: 'autoEl is cool!'
    }
}, {
    xtype: 'container',
    autoEl: 'ul',
    cls: 'ux-unordered-list',
    items: {
        xtype: 'box',
        autoEl: 'li',
        html: 'First list item'
    }
}
Component
autoHeight : Boolean
如果值为true，height配置项为'auto'，否则值为false的话使用固定的高度...

如果值为true，height配置项为'auto'，否则值为false的话使用固定的高度， 或者可以由其父类容器 layout manager来控制。(默认值为 false)。

注: 虽然很多组件继承了这个配置选项，但不是所有这些组件的自适应高度配置都会像期望的那样起作用。 设置autoHeight：值为true时，浏览器将根据元素的内容自动设置高度，这将意味着Ext不会去管理高度。

如果是由浏览器来管理高度，需要注意的是，通过浏览器进行调整的结构组件内不能被发现， 因此宽度的变化可能导致需要进行同步处理元素的高度。 例如：

var w = new Ext.Window({
    title: 'Window',
    width: 600,
    autoHeight: true,
    items: {
        title: 'Collapse Me',
        height: 400,
        collapsible: true,
        border: false,
        listeners: {
            beforecollapse: function() {
                w.el.shadow.hide();
            },
            beforeexpand: function() {
                w.el.shadow.hide();
            },
            collapse: function() {
                w.syncShadow();
            },
            expand: function() {
                w.syncShadow();
            }
        }
    }
}).show();
BoxComponent
autoScroll : Boolean
如果值为true，将会在该元素上使用overflow:'auto'配置，并且在必要的时候...
如果值为true，将会在该元素上使用overflow:'auto'配置，并且在必要的时候自动显示滚动条，否则，溢出部分的组件都会被切除(默认值为 false)。
BoxComponent
autoShow : Boolean
如果组件需要检测隐藏CSS属性(如 'x-hidden' 或者 'x-hide-display')并且在渲染时删除...
如果组件需要检测隐藏CSS属性(如 'x-hidden' 或者 'x-hide-display')并且在渲染时删除它们 (默认为false)，设置此值为true。
Component
autoWidth : Boolean
如果为true，使用width:'auto'配置，否则使用固定的宽度...

如果为true，使用width:'auto'配置，否则使用固定的宽度，或者可以由其父类容器的layout manager来控制。(默认值为 false)。

注: 虽然很多组件继承了这个配置选项，但不是所有这些组件的自适应宽度配置都会像期望的那样起作用。 设置autoWidth：值为true时，浏览器将根据元素的内容自动设置宽度，这将意味着Ext不会去管理宽度。

如果是由浏览器来管理宽度，需要注意的是，通过浏览器进行调整的结构组件内不能被发现，因此宽度的变化可能导致需要进行同步处理元素的宽度。 例如，在这个元素的目标是：

<div id='grid-container' style='margin-left:25%;width:50%'></div>
当浏览器窗口改变时，渲染后的Panel必须监听浏览器窗口大小的变化，以便通知子项，浏览器改变了其宽度：

var myPanel = new Ext.Panel({
    renderTo: 'grid-container',
    monitorResize: true, // relay on browser resize
    title: 'Panel',
    height: 400,
    autoWidth: true,
    layout: 'hbox',
    layoutConfig: {
        align: 'stretch'
    },
    defaults: {
        flex: 1
    },
    items: [{
        title: 'Box 1',
    }, {
        title: 'Box 2'
    }, {
        title: 'Box 3'
    }],
});
BoxComponent
backgroundColor : String
chart的背景颜色。默认为 '#ffffff'。
FlashComponent
boxMaxHeight : Number
设置组件的最大高度值...

设置组件的最大高度值。

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

BoxComponent
boxMaxWidth : Number
设置组件的最大宽度值...

设置组件的最大宽度值。

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

BoxComponent
boxMinHeight : Number
设置组件的最小高度值...

设置组件的最小高度值。

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

BoxComponent
boxMinWidth : Number
设置组件的最小宽度值...

设置组件的最小宽度值。

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

BoxComponent
bubbleEvents : Array
一个事件数组，当这些事件被触发时，将会被冒泡到所有父容器中。参见....

一个事件数组，当这些事件被触发时，将会被冒泡到所有父容器中。参见 Ext.util.Observable.enableBubble。 默认为 []。

Component
clearCls : String
应用到特殊的clearing div的CSS类， 这个clearing div直接渲染到每个form field的包装器后面...

应用到特殊的clearing div的CSS类， 这个clearing div直接渲染到每个form field的包装器后面，以提供 清除field的功能(默认为 'x-form-clear-left')。

注意: 只有在当前组件被渲染到一个使用FormLayout 布局(例如 Ext.form.FormPanel 或者指定 layout:'form')的 容器中、或者是指定了一个fieldLabel 、或者指定isFormField=true 时此配置才有效。

另请参见 Ext.layout.FormLayout. fieldTpl。

Component
cls : String
一个可选的额外CSS类，它将被添加到当前组件的元素上(默认为'')...
一个可选的额外CSS类，它将被添加到当前组件的元素上(默认为'')。 此属性对于在组件上，或者它的任何使用标准CSS规则的孩子节点上， 添加定制的样式非常有用。
Component
contentEl : String
(可选)指定一个已存在的HTML元素，或者一个已存在HTML元素的...

(可选)指定一个已存在的HTML元素，或者一个已存在HTML元素的 id ，它们将被用作当前组件的内容。

  • 描述 :
    此配置选项被用来将一个已存在的HTML元素 插入到一个新组件(在组件渲染之后它简单地移动DOM元素) 的layout元素中，使它成为该组件的内容。
  • 注意 :
    指定的HTML元素将被append到组件的layout元素中， 在所有配置的 HTML 被插入之后， 并且，这样的话，在render事件 被触发时，document中将不再包含此元素。
    指定的HTML元素将不会参与组件所有可能使用的 layout 过程(译者注：指这些HTML元素 不会参与布局操作)。 它仅是HTML而已。布局操作实在孩子 items 上进行的。
    添加 x-hidden 或者 x-hide-display CSS类，以防在内容渲染到panel时发生闪烁。
Component
ctCls : String
一个可选的外部CSS样式，添加到这个组件的容器(默认值为 '')。 这个方法对于使用标准的CSS规则...

一个可选的外部CSS样式，添加到这个组件的容器(默认值为 '')。 这个方法对于使用标准的CSS规则，为组件或它的任何一个子组件添加特定的样式非常有用。 参见 Ext.layout.ContainerLayout和 extraCls 。

注意: ctCls 默认为 ''期望如下的类，它们将指定一个默认值:

  • Box Layout : 'x-box-layout-ct'
使用一个额外的CSS类配置以上的Class，它是append到默认对象上的。例如， 对于BoxLayout (Hbox and Vbox):
                                ctCls: 'x-box-layout-ct custom-class'

Component
data : Mixed
初始化数据集，它将被应用到 tpl 上以刷新组件的内容区域。
Component
disabled : Boolean
当前组件处于无效状态时为true。 Read-only.
Component
disabledClass : String
当组件处于无效状态时添加到组件上的CSS类(默认为 'x-item-disabled')。
Component
expressInstall : Boolean
如果没有安装flash，设置为true将会提示用户进行安装。 注意，此参数会使用Ext.FlashComponent.EXPRESS_INSTALL_URL...
如果没有安装flash，设置为true将会提示用户进行安装。 注意，此参数会使用Ext.FlashComponent.EXPRESS_INSTALL_URL 此值应该设置为一个本地资源，默认为 false。
FlashComponent
fieldLabel : String
紧靠此field显示的标签文本(默认值为 '')。注意...

紧靠此field显示的标签文本(默认值为 '')。

注意:只有在当前组件被渲染到一个使用FormLayout 的容器中时，此配置才有效。 (例如 Ext.form.FormPanel 或 指定 layout:'form')。

另请参见 hideLabel 、 Ext.layout.FormLayout和 fieldTpl。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Name'
    }]
});
Component
flashParams : Object
作为参数传递给flash对象的键值对集合。可能的参数可以在这里找到: http://kb2.adobe.com/cps/127/tn_12701.html默认为...
作为参数传递给flash对象的键值对集合。可能的参数可以在这里找到: http://kb2.adobe.com/cps/127/tn_12701.html默认为 undefined。
FlashComponent
flashVars : Object
作为flash变量传递给flash对象的键值对集合。 默认为 undefined。
FlashComponent
flashVersion : String
显示flash内容所需的flash版本。默认为 '9.0.115'。
FlashComponent
flex : Number
注: 这个配置只用于该组件被包含在一个已使用BoxLayout配置的Container中时...

注: 这个配置只用于该组件被包含在一个已使用BoxLayout配置的Container中时。通过计算每一个子组件的flex值所占全部flex值之和的比例，来决定子组件的宽(HBoxLayout)高(VBoxlayout)。 任何子项的 flex = 0 或 flex = undefined 将不被设置(初始值大小将不被改变)。

BoxComponent
height : Number
组件的高度(默认值为 auto)。注:如果想使用百分比的方式...
组件的高度(默认值为 auto)。注:如果想使用百分比的方式来设置值，请查看 Ext.Component.anchor。
BoxComponent
hidden : Boolean
如果当前组件处于隐藏状态，此值为true。Read-only。
Component
hideLabel : Boolean
true时完全隐藏label元素 ( label 和 separator)。 默认为 false。 默认情况下，即使你不指定...

true时完全隐藏label元素 ( label 和 separator)。 默认为 false。 默认情况下，即使你不指定 fieldLabel 它的空间仍然会被保留，这样这块区域会与其它确实拥有label的区域位于同一排。 讲此值设置为 true 将导致此区域不再保留此空间。

注意: 参见 clearCls 的注释。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield'
        hideLabel: true
    }]
});
Component
hideMode : String
组件如何隐藏，支持的值有： 'visibility' (css visibility), 'offsets' (位置偏移量为负值) 和...

组件如何隐藏，支持的值有： 'visibility' (css visibility), 'offsets' (位置偏移量为负值) 和 'display' (css display).

注意:一般首选默认值 'display'，因为当组件第一次显示的时候它们会自动进行布局 (隐藏的时候不会调整尺寸)。

Component
hideParent : Boolean
此值为true时，当调用hide/show方法时，将会hide和show组件的容器...
此值为true时，当调用hide/show方法时，将会hide和show组件的容器；false时将会 hide和show组件自身(默认为false)。例如，这可以用作window上隐藏按钮的一种 快捷操作，通过设置此按钮的hideParent:true，然后把它添加到window上。
Component
html : String/Object
一个HTML片段，或者一个 DomHelper 描述，用作layout元素的内容(默认为'')。...
一个HTML片段，或者一个 DomHelper 描述，用作layout元素的内容(默认为'')。 这个HTML内容在组件渲染之后才被添加，所以在 render 出发的时候，document中尚未包含此HTML。 但是这个内容将会在所有配置的 contentEl 之前被插入到body标签中。
Component
id : String
当前组件唯一的id(默认为auto-assigned id)...

当前组件唯一的id(默认为auto-assigned id)。 如果你需要在以后访问组件，而又没有一个有效的组件对象引用，那么你需要指定一个 id( 也就是，使用Ext. getCmp方法 )。

注意，此id也将被用作组件底层HTML标签的id，这些标签被渲染到页面中。 这将允许你编写基于id的CSS规则，以独立地描述指定的实例；并且，也可以通过 组件父标签的id选中子元素。

注意:为了避免与唯一的id 产生重复， 请参见 itemId 和 ref 。

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

Component
itemCls : String
注意: 只有在当前组件被渲染到一个使用FormLayout 布局的 容器中时此配置才有效...

注意: 只有在当前组件被渲染到一个使用FormLayout 布局的 容器中时此配置才有效。 (例如Ext.form.FormPanel 或者指定 layout:'form')。

一个附加的CSS类，应用到div上，包装当前field的表单元素。 如果提供了此参数， field级上的itemCls将会覆盖 container级上提供的 默认itemCls。 为itemCls指定的值将会被添加默认的 类('x-form-item')。

既然它被应用到项目的包装器上(参见 Ext.layout.FormLayout。 fieldTpl)， 它将允许你编写能应用到此field、label(如果有指定)、或者field内部任何其它元素的标准CSS规则。

注意: 参考 fieldLabel的注释。 .

示例用法:

// Apply a style to the field's label:
<style>
    .required .x-form-item-label {font-weight:bold;color:red;}
</style>

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Name',
        itemCls: 'required' //this label will be styled
    },{
        xtype: 'textfield',
        fieldLabel: 'Favorite Color'
    }]
});
Component
itemId : String
当没有可利用的对象引用时，itemId可以作为第二选择，用来获得一个组件的引用， 代替 ...

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

var c = new Ext.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'); // 与 Ext.getCmp()不同

p2 = p1.ownerCt.getComponent('p2'); // 通过兄弟对象获得引用

另请参见 id 和 ref 。

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

Component
labelSeparator : String
每个fieldLabel 文本后面现实的分隔符。 此属性可以在多个层次上进行配置...

每个fieldLabel 文本后面现实的分隔符。 此属性可以在多个层次上进行配置。优先顺序为：

  • field / component level
  • container level
  • layout level (默认为冒号 ':')
如不需要为当前field的label显示分隔符，指定一个空字符串''即可。

注意:参见 clearCls 的注释。

另请参见 hideLabel 和 Ext.layout.FormLayout。 fieldTpl。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    layoutConfig: {
        labelSeparator: '~'   // layout config has lowest priority (defaults to ':')
    },
    labelSeparator: '>>',     // config at container level
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Field 1',
        labelSeparator: '...' // field/component level config supersedes others
    },{
        xtype: 'textfield',
        fieldLabel: 'Field 2' // labelSeparator will be '='

    }]
});
Component
labelStyle : String
一个CSS样式描述字符串，它将直接应用到当前field的label上...

一个CSS样式描述字符串，它将直接应用到当前field的label上。 如果有设置，默认为容器的labelStyle值(例如 Ext.layout.FormLayout.labelStyle , 或者 '')。

注意:参见 clearCls 的注释。

另请参见 hideLabel 和 Ext.layout.FormLayout. fieldTpl。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Name',
        labelStyle: 'font-weight:bold;'
    }]
});
Component
listeners : Object
一个包含一个或多个事件处理器的配置对象，会在初始化的时候被添加到目标对象上...

一个包含一个或多个事件处理器的配置对象，会在初始化的时候被添加到目标对象上。 该配置对象应该是一个有效的监听器配置对象就像 addListener例子中指定的一样可一次附加多个处理器。

ExtJs Components上的DOM事件

一些 ExtJs Component 类导出时会选择一些DOM事件(例如 "click", "mouseover" 等等), 这通常只是在有额外的值可以被添加时发生。例如DataView类的 click事件会传递被点击的节点。也可以直接在Component的HTMLElementevent上访问DOM事件，但必需在Component被渲染后监听器才能添加到Element 上。可以按照以下步骤添加插件:

// 插件会用一个监听器配置对象进行配置。
//该组件会被添加到所有处理方法的参数列表上。
Ext.DomObserver = Ext.extend(Object, {
    constructor: function(config) {
        this.listeners = config.listeners ? config.listeners : config;
    },

    // 组件将自己传递进了插件的初始化方法里
    init: function(c) {
        var p, l = this.listeners;
        for (p in l) {
            if (Ext.isFunction(l[p])) {
                l[p] = this.createHandler(l[p], c);
            } else {
                l[p].fn = this.createHandler(l[p].fn, c);
            }
        }

        // 渲染后立即添加监听器到元素上
        c.render = c.render.createSequence(function() {
            var e = c.getEl();
            if (e) {
                e.on(l);
            }
        });
    },

    createHandler: function(fn, c) {
        return function(e) {
            fn.call(this, e, c);
        };
    }
});

var combo = new Ext.form.ComboBox({

    // 元素被点击后折叠
    plugins: [ new Ext.DomObserver({
        click: function(evt, comp) {
            comp.collapse();
        }
    })],
    store: myStore,
    typeAhead: true,
    mode: 'local',
    triggerAction: 'all'
});

Observable
margins : Object
注:此配置只用于该组件展现在一个使用BorderLayout...

注:此配置只用于该组件展现在一个使用BorderLayout 或 BoxLayout的两个子类之一作为布局的容器。

这个margins对象在该组件中的格式为：

{top: (top margin),right: (right margin),bottom: (bottom margin),left: (left margin)}

也可以是一个字符串，中间用空格分隔，margin值为数字。 把matches中每一个值的次序跟CSS中margin值的排列方式相对应：

  • 如果只有一个值，它适用于所有方面。
  • 如果有两个值，top和bottom的边框设置为第一个值，left和right设置为第二个值。
  • 如果有三个值，top设置为第一个值，left和right设置为第二个值，bottom设置为第三个值。
  • 如果有四个值，分别设置为top, right, bottom, left。

默认值:

{top:0, right:0, bottom:0, left:0}
BoxComponent
overCls : String
一个可选的额外的CSS类，它将在鼠标移过元素时被添加到组件上...
一个可选的额外的CSS类，它将在鼠标移过元素时被添加到组件上，鼠标移出时 删除。(默认为'')。此属性对于在组件上，或者它的任何使用标准CSS规则的孩子节点上， 添加定制的'active' 或者 'hover'样式非常有用。
Component
pageX : Number
如果该组件被包含在一个指定位置的容器中，这个值表示页面级的x坐标值（译者注：在有滚动条的情况下这个值很有用）。
BoxComponent
pageY : Number
如果该组件被包含在一个指定位置的容器中，这个值表示页面级的y坐标值（译者注：在有滚动条的情况下这个值很有用）。
BoxComponent
plugins : Object/Array
一个对象或者一个对象数组，为组件提供特殊的功能 ...
一个对象或者一个对象数组，为组件提供特殊的功能。 对一个合法的插件唯一的要求是它含有一个init()方法， 能接收一个Ext.Component型的参数。 当组件被创建时，如果有可用的插件，组件将会调用每个插件的init方法， 并将自身的引用作为方法参数传递给它。然后，每个插件就可以调用方法或者响应组件上的事件， 就像需要的那样提供自己的功能。
Component
ptype : String
需要创建配置的ptype。 当传递一个配置对象给构造函数时...
需要创建配置的ptype。 当传递一个配置对象给构造函数时，此配置选项不会被使用。 只有在使用懒初始化的时候此配置项才会被使用， 此时Plugin不是 通过一个完整的实例组件，而是通过一个Component配置指定的。 在渲染时，将会查找ptype以决定创建何种类型的Plugin。

如果你创建自己的Plugin，你可以通过 Ext.ComponentMgr.registerPlugin 对它们进行注册，以便能利用懒初始化和渲染机制。
Component
ref : String
一个路径描述，与组件的 ownerCt 相关，它描述了把当前组件的命名引用放置到哪个父容器中去。...

一个路径描述，与组件的 ownerCt 相关，它描述了把当前组件的命名引用放置到哪个父容器中去。

祖先的坐标路径可以通过'/'字符进行分隔。 例如，将一个Toolbar Button的引用放入 拥有此Toolbar的Panel中:

var myGrid = new Ext.grid.EditorGridPanel({
    title: 'My EditorGridPanel',
    store: myStore,
    colModel: myColModel,
    tbar: [{
        text: 'Save',
        handler: saveChanges,
        disabled: true,
        ref: '../saveButton'
    }],
    listeners: {
        afteredit: function() {
//          The button reference is in the GridPanel
            myGrid.saveButton.enable();
        }
    }
});

在上面的代码中，如果 ref 是 'saveButton' ，那么引用将会被放置到Toolbar中。 ref 中的每个'/' 都会从组件的 ownerCt 向上移动一级。

另请参见 added 和 removed 事件。

Component
region : String
注: 此配置只用于该组件展现在一个布局为BorderLayout的容器中...

注: 此配置只用于该组件展现在一个布局为BorderLayout的容器中(例如指定layout:'border')。

详见Ext.layout.BorderLayout。

BoxComponent
renderTo : Mixed
该值可以是一个节点的id、一个DOM节点或者一个已存在的元素...

该值可以是一个节点的id、一个DOM节点或者一个已存在的元素， 组件将会被渲染到其中。

  • 注意 :
      如果组件不是一个Container 的子项目时， 不要使用此选项。 渲染和管理它的子项目是一个Container 的layout manager的责任。
      当使用此配置项时，无需调用render()方法。

另请参见 render 。

Component
stateEvents : Array
一个事件数组，当它们被触发时，组件需要保存自己的状态(默认值为 none)...

一个事件数组，当它们被触发时，组件需要保存自己的状态(默认值为 none)。 它们可以是任何该组件支持的事件类型，包括浏览器事件和 自定义事件(例如['click', 'customerchange'])。

对于保存和恢复组件状态的详细解释，参见 stateful

Component
stateId : String
为该组件指定的唯一的id值，它被用作管理组件状态的目的...
为该组件指定的唯一的id值，它被用作管理组件状态的目的。 (如果设定了id，默认值为组件自己的id，否则，如果组件使用自动生成的id，此值为null)。

对于保存和反解析组件状态的解释，参见 stateful 。

Component
stateful : Boolean
一个标志参数，它将引起组件在启动时尝试从一个保存的状态中恢复内部状态参数...

一个标志参数，它将引起组件在启动时尝试从一个保存的状态中恢复内部状态参数。 组件必须要么拥有一个 stateId 或者 id ，它们被分配给需要被管理的状态属性。 在跨页面加载时，不保证自动生成的id属性的稳定性， 并且，不能依赖此id来保存和恢复一个组件的相同状态。

为了保存状态的操作能够工作，状态管理器的提供者必须 被设置成一个Ext.state.Provider 的实现类，它覆盖了set 和get 方法，以便保存和恢复name/value对。 有一个内置的Ext.state.CookieProvider 可用。

为当前页面设置状态提供者:

Ext.state.Manager.setProvider(new Ext.state.CookieProvider({
    expires: new Date(new Date().getTime()+(1000*60*60*24*7)), //7 days from now
}));

当 stateEvents 配置项中其中之一的事件被触发时， 一个状态可保存的组件将试图保存其状态。

保存状态时，一个可保存状态的组件首先需要通过调用 getState 方法来序列化它的状态。 默认情况下，此函数什么事都不做。 开发者必须提供一个实现，返回一个hash对象，它描述了组件可恢复的状态。

getState方法产生的值将会传递给 Ext.state.Manager.set 方法，它使用配置的 Ext.state.Provider 来保存对象，以组件的 stateId 为key，或者，如果此值（指stateId）没有指定时， 使用它的 id 作为key。

在进行构造时，一个可保存状态的组件试图通过调用 Ext.state.Manager.get方法来 恢复它的状态，传递 stateId 或者，如果此值（指stateId）没有指定时， 使用它的 id 作为参数。

结果对象被传递给 applyState 。 applyState 的默认实现只是简单地把属性拷贝到对象中， 但是开发者可以覆盖此方法以支持更多行为。

通过向 beforestaterestore, staterestore, beforestatesave 和 statesave 事件上绑定监听器，你可以在保存和恢复状态时进行额外的处理。

Component
style : String
被添加到组件元素的特定样式。 必须是按照...
被添加到组件元素的特定样式。 必须是按照 Ext.Element.applyStyles 类指定格式的合法参数值。

new Ext.Panel({
    title: 'Some Title',
    renderTo: Ext.getBody(),
    width: 400, height: 300,
    layout: 'form',
    items: [{
        xtype: 'textarea',
        style: {
            width: '95%',
            marginBottom: '10px'
        }
    },
        new Ext.Button({
            text: 'Send',
            minWidth: '100',
            style: {
                marginBottom: '10px'
            }
        })
    ]
});
Component
tabTip : String
注: 这个配置只用于当该组件作为TabPanel的一个子项目时使用...

注: 这个配置只用于当该组件作为TabPanel的一个子项目时使用。

一个String类型的innerHTML(支持html标签)，当鼠标放在该选项上的时，显示一个tooltip。为了tips能够被渲染，Ext.QuickTips.init()必须被提前调用。
BoxComponent
tpl : Mixed
一个 Ext.Template , Ext.XTemplate 或者一个用来形成一个Ext.XTemplate的字符串数组...
一个 Ext.Template , Ext.XTemplate 或者一个用来形成一个Ext.XTemplate的字符串数组。 与 data 和 tplWriteMode 配置项协同使用。
Component
tplWriteMode : String
刷新组件的内容区域时使用的Ext.(X)Template方式。 默认为'overwrite' (参见 Ext.XTemplate.overwrite )。
刷新组件的内容区域时使用的Ext.(X)Template方式。 默认为'overwrite' (参见 Ext.XTemplate.overwrite )。
Component
url : String
需要包含在chart中的URL。默认为 undefined。
FlashComponent
width : Number
组件的宽度(默认值为 auto)。注:如果想使用百分比的方式...
组件的宽度(默认值为 auto)。注:如果想使用百分比的方式来设置值，请查看 Ext.Component.anchor。
BoxComponent
wmode : String
flash对象的wmode。此参数可以用来控制层叠次序。默认为 'opaque'。
FlashComponent
x : Number
如果被包含在一个指定位置的容器中，这个值表示x(left)坐标值。
BoxComponent
xtype : String
需要创建配置的xtype。 当传递一个配置对象给构造函数时...
需要创建配置的xtype。 当传递一个配置对象给构造函数时，此配置选项不会被使用。 只有在使用懒初始化的时候此配置项才会被使用，此时容器的子项目不是 通过一个完整的实例组件，而是通过一个Component配置指定的。 在渲染时，将会查找xtype以决定创建何种类型的子组件。

预定义的xtype列表如下： here。

如果你继承Component创建你自己的组件，你需要使用Ext.ComponentMgr.registerType 对它们进行注册，以便利用懒初始化和渲染机制。
Component
y : Number
如果被包含在一个指定位置的容器中，这个值表示y(top)坐标值。
BoxComponent

公共属性

Property Defined By
EXPRESS_INSTALL_URL : String
如果不存在，为初始化flash设置的url。 此参数应该设置为一个本地资源。
FlashComponent
disabled : Boolean
当前组件处于无效状态时为true。 Read-only.
Component
el : Ext.Element
封装了当前组件的Ext.Element。 Read-only。通常情况下，这将是一个<DIV>元素，它由此类的...

封装了当前组件的Ext.Element。 Read-only。

通常情况下，这将是一个<DIV>元素，它由此类的 onRender方法创建，但是它可以通过使用 autoEl 配置项进行覆盖。

注意: 直到组件渲染完成此元素都将处于无效状态。

如需向当前组件的 DOM事件(而不是当前组件自己的Observable事件)添加监听器， 更多建议，参见 listeners 配置项，或者直接使用一个render监听器:

new Ext.Panel({
    title: 'The Clickable Panel',
    listeners: {
        render: function(p) {
            // Append the Panel to the click handler's argument list.
            p.getEl().on('click', handlePanelClick.createDelegate(null, [p], true));
        },
        single: true  // Remove the listener after first invocation
    }
});

另请参见 getEl

Component
hidden : Boolean
如果当前组件处于隐藏状态，此值为true。Read-only。
Component
initialConfig : Object
当前组件的初始化配置描述。 Read-only。
Component
ownerCt : Ext.Container
组件所属的Container (默认为undefined，当前组件被添加到一个容器中时此值被自动设置)...
组件所属的Container (默认为undefined，当前组件被添加到一个容器中时此值被自动设置)。 Read-only。

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

Component
refOwner : Ext.Container
如果当前组件是一个容器的孩子，并且是通过一个 ref 配置项被注册的，则此值为 ref 引用被插入到的祖先容器。
如果当前组件是一个容器的孩子，并且是通过一个 ref 配置项被注册的，则此值为 ref 引用被插入到的祖先容器。
Component
rendered : Boolean
如果当前组件已经被渲染了，此值为true。Read-only.
Component

公共方法

Method Defined By
FlashComponent ()
参数:
  • 无。
返回值:
  • void
FlashComponent
addClass ( string cls ) : Ext.Component
为组件底层的元素添加CSS样式。
为组件底层的元素添加CSS样式。
参数:
  • cls : string
    需要添加的CSS样式的class名称
返回值:
  • Ext.Component
    this
Component
addEvents( Object|String o, string Optional. ) : void
添加指定的事件到事件列表上，事件会被该Observable触发。
添加指定的事件到事件列表上，事件会被该Observable触发。
参数:
  • o : Object|String
    以事件名作为属性true作为值的对象 或者当多个事件名被分开的传递时则为第一个事件名。
  • Optional. : string
    事件名被分开的传递时则为事件名。 用法:
    this.addEvents('storeloaded', 'storecleared');
返回值:
  • void
Observable
addListener( String eventName, Function handler, [Object scope], [Object options] ) : void
给对象添加事件处理器。
给对象添加事件处理器。
参数:
  • eventName : String
    监听的事件名。
  • handler : Function
    事件调用的方法
  • scope : Object
    （可选）处理方法执行的作用域 (this的引用 reference)。 如果被忽略。默认为触发事件的对象。
  • options : Object
    （可选）包含处理器配置和属性的对象。 可能包含以下的属性:
    • scope : Object
      处理方法执行的作用域(this的引用) 。 如果被忽略。默认为触发事件的对象。
    • delay : Number
      在触发事件后延迟调用处理器的毫秒数。
    • single : Boolean
      如果为True则添加一个处理器来处理下一次的事件触发（仅一次），然后移除自己。
    • buffer : Number
      使得处理器延迟指定毫秒数后预定的运行在 一个Ext.util.DelayedTask中 。 如果事件在时间内再一次被触发，原始的处理器不会被调用，但是新的处理器会预定的在他的位置上。
    • target : Observable
      如果事件在目标的Observable上触发则仅仅调用处理器， 否则 事件会从子类的Observable上冒泡

    组合选项
    使用这些选项参数,可能会组合出不同类型的监听器：

    一个延迟的，一次性的监听器。

    myDataView.on('click', this.onClick, this, {
single: true,
delay: 100
});

    一次调用附加多个处理器
    该方法同样支持传递一个包含指定的多个处理器的属性的配置对象参数。

    myGridPanel.on({
'click' : {
    fn: this.onClick,
    scope: this,
    delay: 100
},
'mouseover' : {
    fn: this.onMouseOver,
    scope: this
},
'mouseout' : {
    fn: this.onMouseOut,
    scope: this
}
});

    或者一个简写的语法：

    myGridPanel.on({
'click' : this.onClick,
'mouseover' : this.onMouseOver,
'mouseout' : this.onMouseOut,
 scope: this
});
返回值:
  • void
Observable
applyToMarkup ( String/HTMLElement el ) : void
将此组件添加到已存在的有效的HTML标签中。 使用该方法时，无需再调用render()方法。
将此组件添加到已存在的有效的HTML标签中。 使用该方法时，无需再调用render()方法。
参数:
  • el : String/HTMLElement
返回值:
  • void
Component
cloneConfig ( Object overrides ) : Ext.Component
默认使用原先传递给当前实例的配置值克隆当前组件。
默认使用原先传递给当前实例的配置值克隆当前组件。
参数:
  • overrides : Object
    一个新的配置项，包含需要覆盖到克隆版本的所有属性。 可以传递一个id参数给此对象，否则将自动生成一个新的id以避免发生重复。
返回值:
  • Ext.Component
    当前组件的克隆副本
Component
destroy () : void
通过如下方法销毁对象：删除所有的事件监听器、将组件的元素从DOM树中删除...
通过如下方法销毁对象：删除所有的事件监听器、将组件的元素从DOM树中删除（如果可以）、 将组件从它的 Ext.Container（如果可用）中删除、 并且将它从Ext.ComponentMgr中 注销。 销毁操作一般由框架自动完成，一般情况下不需要直接调用该方法。
参数:
  • 无。
返回值:
  • void
Component
disable () : Ext.Component
将组件置为无效状态，并出发'disable'事件。
将组件置为无效状态，并出发'disable'事件。
参数:
  • 无。
返回值:
  • Ext.Component
    this
Component
enable () : Ext.Component
将组件置为有效状态并触发'enable'事件。
将组件置为有效状态并触发'enable'事件。
参数:
  • 无。
返回值:
  • Ext.Component
    this
Component
enableBubble( String/Array events ) :void
是否现在使得事件会被该Observable触发并调用 this.getBubbleTarget()方法在拥有者的继承树...

是否现在使得事件会被该Observable触发并调用 this.getBubbleTarget()方法在拥有者的继承树中冒泡。Observable的基础类中没有该方法的实现。

该方法一般被Ext.Components用来冒泡事件到拥有者的容器。参看Ext.Component.getBubbleTarget默认的实现 在Ext.Component中返回组件的直接拥有者。但是如果需要的是一个已知的目标，该方法可以被重写来更快的访问需求的目标。

例子:

Ext.override(Ext.form.Field, {
    // 添加方法到Field的initComponent上改变事件为冒泡
    initComponent : Ext.form.Field.prototype.initComponent.createSequence(function() {
        this.enableBubble('change');
    }),

    // 我们知道我们想让Field的事件冒泡到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() {
            // 如果样式被修改标题会变红。
            myForm.header.setStyle('color', 'red');
        }
    }
});
参数:
  • events : String/Array
    冒泡的事件名，或事件名数组
返回值:
  • void
Observable
findParentBy ( Function fn ) : Ext.Container
通过自定义的函数查找当前组件上层任何层次上的容器...
通过自定义的函数查找当前组件上层任何层次上的容器。 如果传递的函数返回true，容器对象将被返回。
参数:
  • fn : Function
    自定义的函数，使用如下参数调用(container,this component)。
返回值:
  • Ext.Container
    自定义函数返回true的第一个容器
Component
findParentByType ( String/Class xtype ) : Ext.Container
通过xtype或者class查找当前组件上层任何层次上的容器
通过xtype或者class查找当前组件上层任何层次上的容器
参数:
  • xtype : String/Class
    组件的xtype字符串，或者直接是组件的class
返回值:
  • Ext.Container
    符合指定xtype或者class的第一个容器
Component
fireEvent( String eventName, Object... args ) : Boolean
用传入的参数触发指定的事件 (减去事件名)。 一个事件可以被设置为冒泡 Obse...

用传入的参数触发指定的事件 (减去事件名)。

一个事件可以被设置为冒泡到Observable父类继承树(参看 Ext.Component.getBubbleTarget) 调用enableBubble实现。

参数:
  • eventName : String
    触发的事件名。
  • args : Object...
    传递给处理器的可变长度参数。
返回值:
  • Boolean
    如果有任何的处理器返回false则返回false，否则返回true。
Observable
focus ( [ Boolean selectText ], [ Boolean/Number delay ] ) : Ext.Component
尝试将当前组件设为焦点。
尝试将当前组件设为焦点。
参数:
  • selectText : Boolean
    (可选) 如果可用，同时选中组件内部的文本
  • delay : Boolean/Number
    (可选)将当前组件设置为焦点的延迟时间(设置为true等于0毫秒)
返回值:
  • Ext.Component
    this
Component
getBox ( [ Boolean local ] ) : Object
获取组件底层元素当前盒子模型的尺寸。（译者注：盒子模型是CSS术语，详细解释请自行搜索。）
获取组件底层元素当前盒子模型的尺寸。（译者注：盒子模型是CSS术语，详细解释请自行搜索。）
参数:
  • local : Boolean
    (可选)值为true时，组件的left值和top值将代替页面的XY被返回。(默认值为false)
返回值:
  • Object
    返回值的格式{x, y, width, height}
BoxComponent
getBubbleTarget () : Ext.Container
为Observable的fireEvent方法提供链接，它沿着继承结构进行冒泡操作。
为Observable的fireEvent方法提供链接，它沿着继承结构进行冒泡操作。
参数:
  • 无。
返回值:
  • Ext.Container
    拥有当前组件的容器。
Component
getEl () : Ext.Element
返回 Ext.Element ，它包装了当前组件。...

返回 Ext.Element ，它包装了当前组件。

通常情况下，这将是一个<DIV>元素，它是由该类的onRender方法创建的， 但是可以使用autoEl配置项 覆盖它。

注意: 此元素将会一直处于无效状态直到当前组件渲染完成。

如需向当前组件的 DOM事件(而不是当前组件自己的Observable事件)添加监听器， 更多建议，参见 listeners 配置项，或者直接使用一个render监听器:

new Ext.Panel({
    title: 'The Clickable Panel',
    listeners: {
        render: function(p) {
            // Append the Panel to the click handler's argument list.
            p.getEl().on('click', handlePanelClick.createDelegate(null, [p], true));
        },
        single: true  // Remove the listener after first invocation
    }
});
参数:
  • 无。
返回值:
  • Ext.Element
    包装当前组件的元素。
Component
getHeight () : Number
获取该组件的当前高度值。
获取该组件的当前高度值。
参数:
  • 无。
返回值:
  • Number
BoxComponent
getId () : String
返回当前组件的id，如果没有定义id，则自动生成并返回一个id:'ext-comp-'...
返回当前组件的 id 如果没有定义 id 则自动生成并返回一个 id

'ext-comp-' + (++Ext.Component.AUTO_ID)
参数:
  • 无。
返回值:
  • String
    id
Component
getItemId () : String
返回当前组件的 itemId 。 如果没有通过配置参数指定 itemId 那么，将会使用...
返回当前组件的 itemId 。 如果没有通过配置参数指定 itemId 那么，将会使用 getId 返回 id 。
参数:
  • 无。
返回值:
  • String
Component
getOuterSize () : Object
获取当前组件所在元素的尺寸大小，包括边缘的空白处。
获取当前组件所在元素的尺寸大小，包括边缘的空白处。
参数:
  • 无。
返回值:
  • Object
    一个包含元素大小的对象 {width: (element width + left/right margins), height: (element height + top/bottom margins)}
BoxComponent
getPosition ( [ Boolean local ] ) : Array
获取组件底层元素当前的XY位置。
获取组件底层元素当前的XY位置。
参数:
  • local : Boolean
    (可选)如果为true，将返回元素的left和top值，而不是相对于页面内的 XY。(默认值为 false)
返回值:
  • Array
    元素的XY位置值(例如：[100, 200])
BoxComponent
getResizeEl () : Ext.Element
返回该组件的最外层用来定义这些组件整体大小的Element...

返回该组件的最外层用来定义这些组件整体大小的Element对象。

通常用 getEl 方法将会返回相同的Element对象，但在有些情况下，组件可能有一些更多的封装了它的主要动态Element对象的Element对象。

例如ComboBox。它是封装在一个包含<input>元素的包装元素里(这将返回其 getEl方法和触发按钮的元素)。返回的元素为resizeEl。

参数:
  • 无。
返回值:
  • Ext.Element
    The Element which is to be resized by size managing layouts.
BoxComponent
getSize () : Object
获取组件底层元素当前的大小。
获取组件底层元素当前的大小。
参数:
  • 无。
返回值:
  • Object
    一个包含元素大小的对象{width: (element width), height: (element height)}
BoxComponent
getWidth () : Number
获取该组件的当前宽度值。
获取该组件的当前宽度值。
参数:
  • 无。
返回值:
  • Number
BoxComponent
getXType () : String
获取当前组件的xtype，它是用 Ext.ComponentMgr 注册的。 所有可用的xtype列表，参见...
获取当前组件的xtype，它是用 Ext.ComponentMgr 注册的。 所有可用的xtype列表，参见 Ext.Component 类头部。示例用法:

var t = new Ext.form.TextField();
alert(t.getXType());  // alerts 'textfield'
参数:
  • 无。
返回值:
  • String
    The xtype
Component
getXTypes () : String
返回此组件的xtype继承树，用字符'-'分隔。 所有可用的xtype值...

返回此组件的xtype继承树，用字符'-'分隔。 所有可用的xtype值，请参见Ext.Component 类的头部。

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

示例用法:

var t = new Ext.form.TextField();
alert(t.getXTypes());  // alerts 'component/box/field/textfield'
参数:
  • 无。
返回值:
  • String
    xtype层次字符串
Component
hasListener( String eventName ) : Boolean
检测对象是否包含指定事件的任何监听器
检测对象是否包含指定事件的任何监听器
参数:
  • eventName : String
    检测的事件名
返回值:
  • Boolean
    如果事件被监听则为true，否则为false
Observable
hide () : Ext.Component
隐藏当前组件。 监听 beforehide' 事件并且返回false 可以取消隐藏组件的操作。 在隐藏组件之后触发...
隐藏当前组件。 监听 beforehide' 事件并且返回false 可以取消隐藏组件的操作。 在隐藏组件之后触发 ' hide' 事件。 如果组件被配置成 hidden 那么此方法在内部被调用。
参数:
  • 无。
返回值:
  • Ext.Component
    this
Component
isVisible () : Boolean
如果当前组件可见，返回true。
如果当前组件可见，返回true。
参数:
  • 无。
返回值:
  • Boolean
    如果当前组件可见，返回true，其它返回false。
Component
isXType ( String xtype , [ Boolean shallow ] ) : Boolean
Tests whether or not this Component is of a specific xtype. This can test whether this Component is descended from th...

测试此组件是否是指定的xtype。此方法既可以测试是否是指定的xtype的某个子类， 或者它是否直接是指定的xtype类(shallow=true)。

如果使用你自己的子类，必须知道组件必须注册它的xtype值。

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

示例用法:

var t = new Ext.form.TextField();
var isText = t.isXType('textfield');        // true
var isBoxSubclass = t.isXType('box');       // true, descended from BoxComponent
var isBoxInstance = t.isXType('box', true); // false, not a direct BoxComponent instance
参数:
  • xtype : String
    需要为当前组件进行检测的xtype
  • shallow : Boolean
    (可选) 如果为false，检测组件是否是xtype继承树中的某个子类（默认是这种情况）， 如果为true，只检测组件是否是指定的xtype类型。
返回值:
  • Boolean
    如果当前组件是指定xtype的子类，返回true，其它返回flase。
Component
mon ( Observable|Element item , Object|String ename , Function fn , Object scope , Object opt ) : void
向任何Observable对象(或者元素)上添加监听器，监听器将会在组件...

向任何Observable对象(或者元素)上添加监听器，监听器将会在组件销毁时被自动删除。
用法：

myGridPanel.mon(myGridPanel.getSelectionModel(), 'selectionchange', handleSelectionChange, null, {buffer: 50});

or:

myGridPanel.mon(myGridPanel.getSelectionModel(), {
    selectionchange: handleSelectionChange,
    buffer: 50
});
参数:
  • item : Observable|Element
    需要添加listener/listeners的项目。
  • ename : Object|String
    事件名，或者一个包含事件名属性的对象。
  • fn : Function
    (可选) 如果 ename 参数是一个事件名，此参数为处理函数。
  • scope : Object
    (可选)如果 ename 参数是一个事件名称，此参数是作用域 ( this 引用)，监听函数将会在此作用域中被执行。
  • opt : Object
    (可选)如果 ename 参数是一个事件名称， 此参数是 addListener 配置项。
返回值:
  • void
Component
mun ( Observable|Element item , Object|String ename , Function fn , Object scope ) : void
删除通过mon 方法添加的监听器。
删除通过mon 方法添加的监听器。
参数:
  • item : Observable|Element
    需要删除listener/listeners的项目。
  • ename : Object|String
    事件名称，或者一个包含事件名称属性的对象。
  • fn : Function
    (可选)如果 ename 参数是一个事件名称，此参数是一个处理函数。
  • scope : Object
    (可选)如果 ename 参数是一个事件名称，此参数是作用域 ( this 引用)，监听函数将会在此作用域中被执行。
返回值:
  • void
Component
nextSibling () : Ext.Component
返回所属容器中的下一个组件
返回所属容器中的下一个组件
参数:
  • 无。
返回值:
  • Ext.Component
Component
on( String eventName, Function handler, [Object scope], [Object options] ) : void
给对象添加事件处理器 (addListener的简写形式)
给对象添加事件处理器 (addListener的简写形式。)
参数:
  • eventName : String
    监听的事件类型
  • handler : Function
    事件调用的方法
  • scope : Object
    （可选）处理方法执行时的作用域 (this 的引用)。 如果被忽略。默认为触发事件的对象。
  • options : Object
    可选 包含处理器配置的对象。
返回值:
  • void
Observable
previousSibling () : Ext.Component
返回所属容器中的前一个组件
返回所属容器中的前一个组件
参数:
  • 无。
返回值:
  • Ext.Component
Component
purgeListeners() : void
移除对象上所有的监听器
移除对象上所有的监听器
参数:
  • 无。
返回值:
  • void
Observable
relayEvents( Object o, Array events ) : void
从指定的Observable上传递选择的事件就好像被当前对象触发一样。
从指定的Observable上传递选择的事件就好像被当前对象触发一样。
参数:
  • o : Object
    该Observable上的事件被当前对象传递。
  • events : Array
    传递的数组名。
返回值:
  • void
Observable
removeClass ( string cls ) : Ext.Component
从组件底层的元素上删除一个CSS类。
从组件底层的元素上删除一个CSS类。
参数:
  • cls : string
    需要移除的CSS类名
返回值:
  • Ext.Component
    this
Component
removeListener( String eventName, Function handler, [Object scope] ) : void
删除一个事件处理器。
删除一个事件处理器。
参数:
  • eventName : String
    处理器关联的事件类型。
  • handler : Function
    移除的处理器。 这应该是传递到addListener里的方法的引用。
  • scope : Object
    （可选）处理器指定的初始作用域。
返回值:
  • void
Observable
render ( [ Element/HTMLElement/String container ], [ String/Number position ] ) : void
在传递进来的HTML元素中渲染当前组件。...

在传递进来的HTML元素中渲染当前组件。

如果你正在使用一个Container 对象放置当前组件，那么请不要使用render方法。

当容器第一次被渲染时，它的子组件将会被容器的 layout 管理器渲染。

某些布局管理器允许动态添加子组件。它们包括 Ext.layout.CardLayout, Ext.layout.AnchorLayout, Ext.layout.FormLayout, Ext.layout.TableLayout。

当一个新的子组件被添加时，如果容器已经被渲染了， 你可能需要调用容器的 doLayout 方法来刷新视图，它将导致所有没有被渲染的子组件进行渲染操作。 此操作是必须的，这样你可以添加多个子组件而只刷新一次layout。

当创建复杂的UI时，非常重要的一点是，请记住调整子项目的尺寸和位置是容器的 layout 管理器的职责。 如果你希望子项目的尺寸对用户交互作出反应， 你必须为容器配置一个布局管理器，它将创建和管理你心里想要的那种布局。

忽略容器的layout 配置意味着将会使用一个基本的布局管理器，它除了按次序把子组件 渲染到容器中之外什么事情都不做。 这种情况下，任何尺寸和位置的调整操作都不会发生。

参数:
  • container : Element/HTMLElement/String
    (可选) 需要在其中渲染当前组件的元素。 如果它是从一个已存在的标签中创建的，此参数应该被忽略。
  • position : String/Number
    (可选) 容器中的一个元素ID或者一个DOM节点索引， 当前组件将会被插入到它前面 (默认append到容器的尾部)
返回值:
  • void
Component
resumeEvents() : void
重新开始触发事件。(参见suspendEvents) 如果事件以queueSuspended参数被挂起，则在事件被挂起时 ...
重新开始触发事件。(参见 suspendEvents) 如果事件以queueSuspended 参数被挂起，则在事件被挂起时触发的事件会被传递到所有的监听器上
参数:
  • 无。
返回值:
  • void
Observable
setAutoScroll ( Boolean scroll ) : Ext.BoxComponent
设置该组件内容溢出时是否自动显示滚动条。
设置该组件内容溢出时是否自动显示滚动条。
参数:
  • scroll : Boolean
    值为true的话组件自动显示滚动条。
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setDisabled ( Boolean disabled ) : Ext.Component
工具函数，使用布尔值设置有效/无效(disabled/enabled )。
工具函数，使用布尔值设置有效/无效(disabled/enabled )。
参数:
  • disabled : Boolean
返回值:
  • Ext.Component
    this
Component
setHeight ( Mixed height ) : Ext.BoxComponent
设置此组件的高度。该方法将触发resize事件。
设置此组件的高度。该方法将触发resize事件。
参数:
  • height : Mixed
    The new height to set.
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setPagePosition ( Number x , Number y ) : Ext.BoxComponent
设置组件在页面中的XY位置。 如果需要设置left和top值 ，请使用...
设置组件在页面中的XY位置。 如果需要设置left和top值 ，请使用setPosition方法。 该方法触发move事件。
参数:
  • x : Number
    The new x position
  • y : Number
    The new y position
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setPosition ( Number left , Number top ) : Ext.BoxComponent
设置组件的left和top值。设置组件的页面XY值，请使用setPagePosition方法。该方法触发...
设置组件的left和top值。设置组件的页面XY值，请使用setPagePosition方法。该方法触发move事件。
参数:
  • left : Number
    The new left
  • top : Number
    The new top
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setSize ( Mixed width , Mixed height ) : Ext.BoxComponent
设置BoxComponent的宽度和高度。 此方法触发resize事件...
设置BoxComponent的宽度和高度。 此方法触发resize事件。此方法可以接收单独的width或者height值作为参数， 或者你可以传递像这样的一个size对象： {width:10, height:20} 。
参数:
  • width : Mixed
    设置的新的width值。这可以是：
    • 一个Number类型指定Element新的宽度 Ext.Element.defaultUnit(默认为像素 :'px')。
    • 一个String类型用于设置width的CSS样式。
    • 一个size对象格式为 {width: widthValue, height: heightValue} 。
    • 值为 undefined 时，保留原来的width不变。
  • height : Mixed
    设置的新的height值(如果第一个参数传递了一个size对象，此参数没有必要传递)。这可以是：
    • 一个Number类型指定Element新的高度 Ext.Element.defaultUnit(默认为像素 :'px')。
    • 一个String类型用于设置height的CSS样式。也有可能不会被使用到。
    • 值为 undefined 时，保留原来的height不变。
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setVisible ( Boolean visible ) : Ext.Component
工具方法，通过使用布尔值隐藏或者显示当前组件。
工具方法，通过使用布尔值隐藏或者显示当前组件。
参数:
  • visible : Boolean
    true时显示，false时隐藏
返回值:
  • Ext.Component
    this
Component
setWidth ( Mixed width ) : Ext.BoxComponent
设置组件的宽度。 此方法触发resize事件。
设置组件的宽度。 此方法触发resize事件。
参数:
  • width : Mixed
    The new width to set.
返回值:
  • Ext.BoxComponent
    this
BoxComponent
show () : Ext.Component
显示当前组件。监听' beforeshow' 事件，返回 false 取消显示组件...
显示当前组件。监听' beforeshow' 事件，返回 false 取消显示组件。在显示组件之后触发' show' 事件。
参数:
  • 无。
返回值:
  • Ext.Component
    this
Component
suspendEvents( Boolean queueSuspended ) : void
暂停触发所有的事件。 (参看resumeEvents)
暂停触发所有的事件。（参看 resumeEvents)
参数:
  • queueSuspended : Boolean
    如果传递为true则排列好暂停的事件使得在调用 resumeEvents 后再触发它们，而不是抛弃所有暂停的事件。
返回值:
  • void
Observable
syncSize () : Ext.BoxComponent
强制组件的大小按照此组件底层元素当前的高度和宽度计算。
强制组件的大小按照此组件底层元素当前的高度和宽度计算。
参数:
  • 无。
返回值:
  • Ext.BoxComponent
    this
BoxComponent
un( String eventName, Function handler, [Object scope] ) : void
删除一个事件处理器(removeListener方法的简写形式)
删除一个事件处理器(removeListener方法的简写形式。)
参数:
  • eventName : String
    处理器关联的事件类型
  • handler : Function
    被删除的处理器 这应该是传入 addListener 中的方法的引用。
  • scope : Object
    （可选）为处理器指定的初始作用域。
返回值:
  • void
Observable
update ( Mixed htmlOrData , [ Boolean loadScripts ], [ Function callback ] ) : void
刷新组件的内部区域。
刷新组件的内部区域。
参数:
  • htmlOrData : Mixed
    如果已经通过tpl为当前组件配置了一个模板，那么 将会使用此参数来装配模板。 如果没有为当前组件配置模板，组件的内容区域将会通过Ext.Element 进行刷新。
  • loadScripts : Boolean
    (可选)只用在使用html配置时此参数才合法。默认为false。
  • callback : Function
    (可选)只用在使用html配置时此参数才合法。 当脚本加载完成时回调函数才被执行。
返回值:
  • void
Component
updateBox ( Object box ) : Ext.BoxComponent
设置此组件底层元素的盒子模型尺寸。(译者注：盒子模型是CSS术语，详细资料请自行搜索。)
设置此组件底层元素的盒子模型尺寸。(译者注：盒子模型是CSS术语，详细资料请自行搜索。)
参数:
  • box : Object
    一个格式为{x, y, width, height}的对象
返回值:
  • Ext.BoxComponent
    this
BoxComponent

公共事件

Event Defined By
added : ( Ext.Component this , Ext.Container ownerCt , number index )
当一个组件被添加到一个Ext.Container时触发
当一个组件被添加到一个Ext.Container时触发
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • ownerCt : Ext.Container
    用于组件的容器
  • index : number
    添加组件的位置
Component
afterrender : ( Ext.Component this )
在组件渲染完成之后触发...

在组件渲染完成之后触发。

afterrender事件在当前组件被rendered 结束之后、在为组件定义的所有afterRender方法执行之后 触发，并且，如果有stateful， 也在状态被保存之后才触发。

监听器将会以如下参数格式被调用:
  • this : Ext.Component
Component
beforedestroy : ( Ext.Component this )
在组件 destroyed 之前触发。 在事件监听器中返回false以停止 destroy 操作。
在组件 destroyed 之前触发。 在事件监听器中返回false以停止 destroy 操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforehide : ( Ext.Component this )
在调用hide方法隐藏组件之前触发。 在事件监听器中返回false可以停止隐藏操作。
在调用hide方法隐藏组件之前触发。 在事件监听器中返回false可以停止隐藏操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforerender : ( Ext.Component this )
在组件被rendered 之前触发。 在事件监听器中返回false可以停止render 操作。
在组件被rendered 之前触发。 在事件监听器中返回false可以停止render 操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforeshow : ( Ext.Component this )
在调用show()方法现实组件之前触发。 事件处理函数返回false可以停止show。
在调用show 方法现实组件之前触发。 事件处理函数返回false可以停止show。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforestaterestore : ( Ext.Component this , Object state )
在组件状态恢复之前触发。返回false停止恢复状态操作。
在组件状态恢复之前触发。返回false停止恢复状态操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    StateProvider返回的状态哈希值。 如果没有禁止此事件，那么状态对象会被传递给applyState。 默认情况下，这样简单地把属性值拷贝到当前组件中。 可以覆盖此方法以提供自定的状态恢复操作。
Component
beforestatesave : ( Ext.Component this , Object state )
在组件状态被保存到配置的状态提供者之前触发。 返回false可以停止保存。
在组件状态被保存到配置的状态提供者之前触发。 返回false可以停止保存。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    状态值哈希。 这由在组件上调用getState() 方法决定。 此方法必须由开发者提供，返回是否需要对状态进行描述，默认情况下， Ext.Component有一个空实现。
Component
destroy : ( Ext.Component this )
在组件被销毁之后触发。
在组件被destroyed之后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
disable : ( Ext.Component this )
在组件被设置为无效状态后触发。
在组件被设置为无效状态后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
enable : ( Ext.Component this )
当组件被设置为有效(enabled)之后触发。
当组件被设置为有效(enabled)之后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
hide : ( Ext.Component this )
在组件被隐藏之后触发。 当调用hide 方法隐藏组件之后触发。
在组件被隐藏之后触发。 当调用hide 方法隐藏组件之后触发。
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
initialize : ( Chart this )
监听器将会以如下参数格式被调用:
  • this : Chart
FlashComponent
move : ( Ext.Component this , Number x , Number y )
在组件移动之后触发。
在组件移动之后触发。
监听器将会用如下的参数格式来调用:
  • this : Ext.Component
  • x : Number
    The new x position
  • y : Number
    The new y position
BoxComponent
removed : ( Ext.Component this , Ext.Container ownerCt )
当一个组件被从Ext.Container容器中删除时触发
当一个组件被从Ext.Container容器中删除时触发
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • ownerCt : Ext.Container
    持有组件的容器
Component
render : ( Ext.Component this )
在组件被渲染之后触发。
在组件被 rendered(渲染) 之后触发。
监听器将以如下的参数格式被调用:
  • this : Ext.Component
Component
resize : ( Ext.Component this , Number adjWidth , Number adjHeight , Number rawWidth , Number rawHeight )
在组件被调整大小之后触发。
在组件被调整大小之后触发。
监听器将以如下的参数格式被调用:
  • this : Ext.Component
  • adjWidth : Number
    这是width调整后的值
  • adjHeight : Number
    这是height调整后的值
  • rawWidth : Number
    这是width原来的值
  • rawHeight : Number
    这是height原来的值
BoxComponent
show : ( Ext.Component this )
在调用show 方法显示组件之后触发。
在调用show 方法显示组件之后触发。
监听器将会用如下的参数格式被调用:
  • this : Ext.Component
Component
staterestore : ( Ext.Component this , Object state )
组件状态被存储之后触发。
组件状态被存储之后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    StateProvider返回的状态哈希值。 如果没有禁止此事件，那么状态对象会被传递给applyState。 默认情况下，这样简单地把属性值拷贝到当前组件中。 可以覆盖此方法以提供自定的状态恢复操作。
Component
statesave : ( Ext.Component this , Object state )
在组件状态被保存到所配置的状态提供者之后触发。
在组件状态被保存到所配置的状态提供者之后触发。
监听器将会用如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    状态值hash。 这是由在足见上调用getState() 方法决定的。 开发者必须提供此方法以返回是否需要恢复状态，默认情况下， Ext.Component有一个空实现。
Component


Class Ext.FlashProxy

包: | Ext
定义类的文件: | EventProxy.js
类: | FlashProxy
继承自: | Object

此类是一个单例，不应该直接创建。

公共属性

该类没有公共属性。

公共方法

该类没有公共方法。

公共事件

该类没有公共事件。


Action
    Action.Load
      Action.DirectLoad

Class Ext.form.Action.DirectLoad

包: | Ext.form
定义类的文件: | Action.js
类: | Action.DirectLoad
继承自: | Action.Load

为加载表单数据提供Ext.direct支持。

该例说明了用Ext.Direct加载表单的用法。

var myFormPanel = new Ext.form.FormPanel({
    // configs for FormPanel
    title: 'Basic Information',
    renderTo: document.body,
    width: 300, height: 160,
    padding: 10,

    // configs apply to child items
    defaults: {anchor: '100%'},
    defaultType: 'textfield',
    items: [{
        fieldLabel: 'Name',
        name: 'name'
    },{
        fieldLabel: 'Email',
        name: 'email'
    },{
        fieldLabel: 'Company',
        name: 'company'
    }],

    // configs for BasicForm
    api: {
        // The server-side method to call for load() requests
        load: Profile.getBasicInfo,
        // The server-side must mark the submit handler as a 'formHandler'

        submit: Profile.updateBasicInfo
    },
    // specify the order for the passed params
    paramOrder: ['uid', 'foo']
});

// load the form
myFormPanel.getForm().load({
    // pass 2 arguments to server side getBasicInfo method (len=2)
    params: {
        foo: 'bar',
        uid: 34
    }
});
The data packet sent to the server will resemble something like:
            [
    {
        "action":"Profile","method":"getBasicInfo","type":"rpc","tid":2,
        "data":[34,"bar"] // note the order of the params
    }
]
The form will process a data packet returned by the server that is similar to the following format:
            [
    {
        "action":"Profile","method":"getBasicInfo","type":"rpc","tid":2,
        "result":{
            "success":true,
            "data":{
                "name":"Fred Flintstone",
                "company":"Slate Rock and Gravel",
                "email":"fred.flintstone@slaterg.com"
            }
        }
    }
]

配置项

Config Options Defined By
failure : Function
当接收到一个操作失败数据包，或者在Ajax通讯失败时调用的方法。 方法...
当接收到一个操作失败数据包，或者在Ajax通讯失败时调用的方法。 方法将被传递如下参数:
  • form : Ext.form.BasicForm
    请求操作的表单
  • action : Ext.form.Action
    Action类。 如果Ajax请求失败，出错类型信息在 failureType中。 可以检测该对象的 result 属性来执行特定的post处理。
Action
method : String
访问URL的HTTP请求方式。默认为 Ext.form.BasicForm's指定的方式,如果没有指定...
问URL的HTTP请求方式。默认为 Ext.form.BasicForm指定的方式, 如果没有指定, 使用底层DOM表单的请求方式。（译者注：这里的请求方式指的是GET或者POST）
Action
params : Mixed
需要传递的额外参数。这些参数将被添加到Form的 Ext.form.BasicForm.baseParams 中，并与...

需要传递的额外参数。这些参数将被添加到Form的Ext.form.BasicForm.baseParams 中，并与Form的输入栏一起被提交到指定的URL。

传递的参数被 Ext.urlEncode进行标准的HTTP参数编码.

Action
reset : Boolean
当该配置项设置为true时， 将导致在操作成功时Form被reset...
当该配置项设置为 true 时, 导致在操作成功时form被 reset . 如果指定该项, 重置操作将在 success 的回调方法和 actioncomplete 事件触发 之前执行.
Action
scope : Object
调用回调函数的作用域 (回调函数的this引用).
Action
submitEmptyText : Boolean
如果被置为 true,emptyText值将在form提交时一同发送默认为true。
Action
success : Function
当接收到一个合法的操作成功数据包时调用的方法。 方法将会被传入以下参数:...
当接收到一个合法的操作成功数据包时调用的方法。 方法将会被传入以下参数:...
  • form : Ext.form.BasicForm
    请求操作的表单
  • action : Ext.form.Action
    Action类. 可以检测该对象的 result 属性来执行特定的post处理。
Action
timeout : Number
当服务器返回Action.CONNECT_FAILURE的failureType前等待的毫秒数.如果...
当服务器返回Action.CONNECT_FAILURE 的failureType 前等待的毫秒数 . 如果没有被指定, 默认配置为form的 timeout .
Action
url : String
Action调用的URL。
Action
waitMsg : String
在执行操作期间，调用 Ext.MessageBox.wait 方法时显示的消息.
Action
waitTitle : String
Ext.MessageBox.wait在执行操作期间， 显示的标题文本。
Action

公共属性

Property Defined By
CLIENT_INVALID : String
当表单在客户端校验失败并终止提交操作时返回的出错类型。客户端校验...
当表单在客户端校验失败并终止提交操作时返回的出错类型。客户端校验只有在 clientValidation 被明确的置为 false时才不执行。
Action
CONNECT_FAILURE : String
当向远程服务器发送请求，交互出错时返回的错误类型。 该...
当向远程服务器发送请求，交互出错时返回的错误类型。该 response 可被检测以获取更多信息。
Action
LOAD_FAILURE : String
当响应的success属性被置为false，或data属性中没有任何值的时候返回的出错类型...
当响应的 success 属性被置为 false,或data 属性中没有任何值的时候返回的出错类型。
Action
SERVER_INVALID : String
Form在服务器端处理失败时返回的错误类型，result中的success属性...

Form在服务器端处理失败时返回的错误类型，中的 success 属性被置为 false.

当一个form被提交时，特定字段的错误信息可能包含在 result的 errors 属性中返回.

Action
failureType : String
被检测到的失败类型为下面的一种: CLIENT_INVALID, SERVER_INVALID, CONNECT_FAILURE, 或者LOAD_FAILURE. ...
被检测到的失败类型为下面的一种: CLIENT_INVALID, SERVER_INVALID, CONNECT_FAILURE, 或者 LOAD_FAILURE. 用法:

                                    var fp = new Ext.form.FormPanel({
...
buttons: [{
    text: 'Save',
    formBind: true,
    handler: function(){
        if(fp.getForm().isValid()){
            fp.getForm().submit({
                url: 'form-submit.php',
                waitMsg: 'Submitting your data...',
                success: function(form, action){
                    // server responded with success = true
                    var result = action.result;
                },
                failure: function(form, action){
                    if (action.failureType === Ext.form.Action.CONNECT_FAILURE) {
                        Ext.Msg.alert('Error',
                            'Status:'+action.response.status+': '+
                            action.response.statusText);
                    }
                    if (action.failureType === Ext.form.Action.SERVER_INVALID){
                        // server responded with success = false
                        Ext.Msg.alert('Invalid', action.result.errormsg);
                    }
                }
            });
        }
    }
},{
    text: 'Reset',
    handler: function(){
        fp.getForm().reset();
    }
}]
Action
response : Object
用来执行操作的XMLHttpRequest对象。 （译者注：此处怀疑文档有误，应该是收到的响应对象才对，原文保留备查。） The XMLHttpRequest object used to perform the action.
Action
result : Object
解码好的响应对象，包含一个布尔型的success参数和其他...
解码好的响应对象，包含一个布尔型的success 参数和其他详细的操作说明参数。
Action
type : String
当前Action实例执行的操作类型。当前只支持"submit"和"load"。
Action

公共方法

该类没有公共方法。

公共事件

该类没有公共事件。


Action
    Action.Submit
      Action.DirectSubmit

Class Ext.form.Action.DirectSubmit

包: | Ext.form
定义类的文件: | Action.js
类: | Action.DirectSubmit
继承自: | Action.Submit

为提交表单数据提供Ext.direct支持。

该例说明了用Ext.Direct提交表单的用法。

var myFormPanel = new Ext.form.FormPanel({
    // configs for FormPanel
    title: 'Basic Information',
    renderTo: document.body,
    width: 300, height: 160,
    padding: 10,
    buttons:[{
        text: 'Submit',
        handler: function(){
            myFormPanel.getForm().submit({
                params: {
                    foo: 'bar',
                    uid: 34
                }
            });
        }
    }],

    // configs apply to child items
    defaults: {anchor: '100%'},
    defaultType: 'textfield',
    items: [{
        fieldLabel: 'Name',
        name: 'name'
    },{
        fieldLabel: 'Email',
        name: 'email'
    },{
        fieldLabel: 'Company',
        name: 'company'
    }],

    // configs for BasicForm
    api: {
        // The server-side method to call for load() requests
        load: Profile.getBasicInfo,
        // The server-side must mark the submit handler as a 'formHandler'

        submit: Profile.updateBasicInfo
    },
    // specify the order for the passed params
    paramOrder: ['uid', 'foo']
});
The data packet sent to the server will resemble something like:
            {
    "action":"Profile","method":"updateBasicInfo","type":"rpc","tid":"6",
    "result":{
        "success":true,
        "id":{
            "extAction":"Profile","extMethod":"updateBasicInfo",
            "extType":"rpc","extTID":"6","extUpload":"false",
            "name":"Aaron Conran","email":"aaron@extjs.com","company":"Ext JS, LLC"
        }
    }
}
The form will process a data packet returned by the server that is similar to the following:

                // sample success packet (batched requests)
[
    {
        "action":"Profile","method":"updateBasicInfo","type":"rpc","tid":3,
        "result":{
            "success":true
        }
    }
]

// sample failure packet (one request)
{
        "action":"Profile","method":"updateBasicInfo","type":"rpc","tid":"6",
        "result":{
            "errors":{
                "email":"already taken"
            },
            "success":false,
            "foo":"bar"
        }
}
Also see the discussion in Ext.form.Action.DirectLoad.

配置项

Config Options Defined By
clientValidation : boolean
决定是否在提交之前调用isValid 对Form的表单项进行校验。...
决定是否在提交之前调用isValid 对Form的表单项进行校验。 在Form的提交选项中传递false可以阻止此操作。 如果不定义，将会在提交之前执行校验。
Action.Submit
errorReader : Ext.data.DataReader
可选。对于errorReader来说无需解析JSON...

可选。对于errorReader来说无需解析JSON.

从返回的数据中读取单条记录的Reader。 DataReader的success 属性指定了如何确定提交是否成功。 Record的数据提供了出错消息以便应用到所有合法的表单项中。

Action.Submit
failure : Function
当接收到一个操作失败数据包，或者在Ajax通讯失败时调用的方法。 方法...
当接收到一个操作失败数据包，或者在Ajax通讯失败时调用的方法。 方法将被传递如下参数:
  • form : Ext.form.BasicForm
    请求操作的表单
  • action : Ext.form.Action
    Action类。 如果Ajax请求失败，出错类型信息在 failureType中。 可以检测该对象的 result 属性来执行特定的post处理。
Action
method : String
访问URL的HTTP请求方式。默认为 Ext.form.BasicForm's指定的方式,如果没有指定...
问URL的HTTP请求方式。默认为 Ext.form.BasicForm指定的方式, 如果没有指定, 使用底层DOM表单的请求方式。（译者注：这里的请求方式指的是GET或者POST）
Action
params : Mixed
需要传递的额外参数。这些参数将被添加到Form的 Ext.form.BasicForm.baseParams 中，并与...

需要传递的额外参数。这些参数将被添加到Form的Ext.form.BasicForm.baseParams 中，并与Form的输入栏一起被提交到指定的URL。

传递的参数被 Ext.urlEncode进行标准的HTTP参数编码.

Action
reset : Boolean
当该配置项设置为true时， 将导致在操作成功时Form被reset...
当该配置项设置为 true 时, 导致在操作成功时form被 reset . 如果指定该项, 重置操作将在 success 的回调方法和 actioncomplete 事件触发 之前执行.
Action
scope : Object
调用回调函数的作用域 (回调函数的this引用).
Action
submitEmptyText : Boolean
如果被置为 true,emptyText值将在form提交时一同发送默认为true。
Action
success : Function
当接收到一个合法的操作成功数据包时调用的方法。 方法将会被传入以下参数:...
当接收到一个合法的操作成功数据包时调用的方法。 方法将会被传入以下参数:...
  • form : Ext.form.BasicForm
    请求操作的表单
  • action : Ext.form.Action
    Action类. 可以检测该对象的 result 属性来执行特定的post处理。
Action
timeout : Number
当服务器返回Action.CONNECT_FAILURE的failureType前等待的毫秒数.如果...
当服务器返回Action.CONNECT_FAILURE 的failureType 前等待的毫秒数 . 如果没有被指定, 默认配置为form的 timeout .
Action
url : String
Action调用的URL。
Action
waitMsg : String
在执行操作期间，调用 Ext.MessageBox.wait 方法时显示的消息.
Action
waitTitle : String
Ext.MessageBox.wait在执行操作期间， 显示的标题文本。
Action

公共属性

Property Defined By
CLIENT_INVALID : String
当表单在客户端校验失败并终止提交操作时返回的出错类型。客户端校验...
当表单在客户端校验失败并终止提交操作时返回的出错类型。客户端校验只有在 clientValidation 被明确的置为 false时才不执行。
Action
CONNECT_FAILURE : String
当向远程服务器发送请求，交互出错时返回的错误类型。 该...
当向远程服务器发送请求，交互出错时返回的错误类型。该 response 可被检测以获取更多信息。
Action
LOAD_FAILURE : String
当响应的success属性被置为false，或data属性中没有任何值的时候返回的出错类型...
当响应的 success 属性被置为 false,或data 属性中没有任何值的时候返回的出错类型。
Action
SERVER_INVALID : String
Form在服务器端处理失败时返回的错误类型，result中的success属性...

Form在服务器端处理失败时返回的错误类型，中的 success 属性被置为 false.

当一个form被提交时，特定字段的错误信息可能包含在 result的 errors 属性中返回.

Action
failureType : String
被检测到的失败类型为下面的一种: CLIENT_INVALID, SERVER_INVALID, CONNECT_FAILURE, 或者LOAD_FAILURE. ...
被检测到的失败类型为下面的一种: CLIENT_INVALID, SERVER_INVALID, CONNECT_FAILURE, 或者 LOAD_FAILURE. 用法:

                                    var fp = new Ext.form.FormPanel({
...
buttons: [{
    text: 'Save',
    formBind: true,
    handler: function(){
        if(fp.getForm().isValid()){
            fp.getForm().submit({
                url: 'form-submit.php',
                waitMsg: 'Submitting your data...',
                success: function(form, action){
                    // server responded with success = true
                    var result = action.result;
                },
                failure: function(form, action){
                    if (action.failureType === Ext.form.Action.CONNECT_FAILURE) {
                        Ext.Msg.alert('Error',
                            'Status:'+action.response.status+': '+
                            action.response.statusText);
                    }
                    if (action.failureType === Ext.form.Action.SERVER_INVALID){
                        // server responded with success = false
                        Ext.Msg.alert('Invalid', action.result.errormsg);
                    }
                }
            });
        }
    }
},{
    text: 'Reset',
    handler: function(){
        fp.getForm().reset();
    }
}]
Action
response : Object
用来执行操作的XMLHttpRequest对象。 （译者注：此处怀疑文档有误，应该是收到的响应对象才对，原文保留备查。） The XMLHttpRequest object used to perform the action.
Action
result : Object
解码好的响应对象，包含一个布尔型的success参数和其他...
解码好的响应对象，包含一个布尔型的success 参数和其他详细的操作说明参数。
Action
type : String
当前Action实例执行的操作类型。当前只支持"submit"和"load"。
Action

公共方法

该类没有公共方法。

公共事件

该类没有公共事件。


Class Ext.form.Action

包: | Ext.form
定义类的文件: | Action.js
类: | Action
子类: | Action.Load, Action.Submit
继承自: | Object

该类的子类提供可以在 Form上执行的相关操作。

该类的实例仅仅在 Form 中被创建，当它需要执行提交或者加载操作的时候。该类的配置项列表可以通过Form的相关操作方法来设置： submit, load 和 doAction

执行操作的Action实例将会被传递给Form操作 ( submit, load 和 doAction) success和failure的回调函数, 以及 actioncomplete and actionfailed 的事件处理器。

配置项

Config Options Defined By
failure : Function
当接收到一个操作失败数据包，或者在Ajax通讯失败时调用的方法。 方法...
当接收到一个操作失败数据包，或者在Ajax通讯失败时调用的方法。 方法将被传递如下参数:
  • form : Ext.form.BasicForm
    请求操作的表单
  • action : Ext.form.Action
    Action类。 如果Ajax请求失败，出错类型信息在 failureType中。 可以检测该对象的 result 属性来执行特定的post处理。
Action
method : String
访问URL的HTTP请求方式。默认为 Ext.form.BasicForm's指定的方式,如果没有指定...
问URL的HTTP请求方式。默认为 Ext.form.BasicForm指定的方式, 如果没有指定, 使用底层DOM表单的请求方式。（译者注：这里的请求方式指的是GET或者POST）
Action
params : Mixed
需要传递的额外参数。这些参数将被添加到Form的 Ext.form.BasicForm.baseParams 中，并与...

需要传递的额外参数。这些参数将被添加到Form的Ext.form.BasicForm.baseParams 中，并与Form的输入栏一起被提交到指定的URL。

传递的参数被 Ext.urlEncode进行标准的HTTP参数编码.

Action
reset : Boolean
当该配置项设置为true时， 将导致在操作成功时Form被reset...
当该配置项设置为 true 时, 导致在操作成功时form被 reset . 如果指定该项, 重置操作将在 success 的回调方法和 actioncomplete 事件触发 之前执行.
Action
scope : Object
调用回调函数的作用域 (回调函数的this引用).
Action
submitEmptyText : Boolean
如果被置为 true,emptyText值将在form提交时一同发送默认为true。
Action
success : Function
当接收到一个合法的操作成功数据包时调用的方法。 方法将会被传入以下参数:...
当接收到一个合法的操作成功数据包时调用的方法。 方法将会被传入以下参数:...
  • form : Ext.form.BasicForm
    请求操作的表单
  • action : Ext.form.Action
    Action类. 可以检测该对象的 result 属性来执行特定的post处理。
Action
timeout : Number
当服务器返回Action.CONNECT_FAILURE的failureType前等待的毫秒数.如果...
当服务器返回Action.CONNECT_FAILURE 的failureType 前等待的毫秒数 . 如果没有被指定, 默认配置为form的 timeout .
Action
url : String
Action调用的URL。
Action
waitMsg : String
在执行操作期间，调用 Ext.MessageBox.wait 方法时显示的消息.
Action
waitTitle : String
Ext.MessageBox.wait在执行操作期间， 显示的标题文本。
Action

公共属性

Property Defined By
CLIENT_INVALID : String
当表单在客户端校验失败并终止提交操作时返回的出错类型。客户端校验...
当表单在客户端校验失败并终止提交操作时返回的出错类型。客户端校验只有在 clientValidation 被明确的置为 false时才不执行。
Action
CONNECT_FAILURE : String
当向远程服务器发送请求，交互出错时返回的错误类型。 该...
当向远程服务器发送请求，交互出错时返回的错误类型。该 response 可被检测以获取更多信息。
Action
LOAD_FAILURE : String
当响应的success属性被置为false，或data属性中没有任何值的时候返回的出错类型...
当响应的 success 属性被置为 false,或data 属性中没有任何值的时候返回的出错类型。
Action
SERVER_INVALID : String
Form在服务器端处理失败时返回的错误类型，result中的success属性...

Form在服务器端处理失败时返回的错误类型，中的 success 属性被置为 false.

当一个form被提交时，特定字段的错误信息可能包含在 result的 errors 属性中返回.

Action
failureType : String
被检测到的失败类型为下面的一种: CLIENT_INVALID, SERVER_INVALID, CONNECT_FAILURE, 或者LOAD_FAILURE. ...
被检测到的失败类型为下面的一种: CLIENT_INVALID, SERVER_INVALID, CONNECT_FAILURE, 或者 LOAD_FAILURE. 用法:

                                    var fp = new Ext.form.FormPanel({
...
buttons: [{
    text: 'Save',
    formBind: true,
    handler: function(){
        if(fp.getForm().isValid()){
            fp.getForm().submit({
                url: 'form-submit.php',
                waitMsg: 'Submitting your data...',
                success: function(form, action){
                    // server responded with success = true
                    var result = action.result;
                },
                failure: function(form, action){
                    if (action.failureType === Ext.form.Action.CONNECT_FAILURE) {
                        Ext.Msg.alert('Error',
                            'Status:'+action.response.status+': '+
                            action.response.statusText);
                    }
                    if (action.failureType === Ext.form.Action.SERVER_INVALID){
                        // server responded with success = false
                        Ext.Msg.alert('Invalid', action.result.errormsg);
                    }
                }
            });
        }
    }
},{
    text: 'Reset',
    handler: function(){
        fp.getForm().reset();
    }
}]
Action
response : Object
用来执行操作的XMLHttpRequest对象。 （译者注：此处怀疑文档有误，应该是收到的响应对象才对，原文保留备查。） The XMLHttpRequest object used to perform the action.
Action
result : Object
解码好的响应对象，包含一个布尔型的success参数和其他...
解码好的响应对象，包含一个布尔型的success 参数和其他详细的操作说明参数。
Action
type : String
当前Action实例执行的操作类型。当前只支持"submit"和"load"。
Action

公共方法

该类没有公共方法。

公共事件

该类没有公共事件。


Action
    Action.Load

Class Ext.form.Action.Load

包: | Ext.form
定义类的文件: | Action.js
类: | Action.Load
子类: | Action.DirectLoad
继承自: | Action

一个负责从服务器将数据加载到 Ext.form.BasicForm 的Field中的类。

该类的实例仅仅在Form loading时创建。

响应包标准

一个相应包必须包含:

  • success property : Boolean
  • data property : Object
    • data 参数包含了Fields需要加载的值。 每个Field的单个值对象被传递给Field的 setValue 方法。

JSON包

默认情况下，相应包被假定为JSON，对于以下加载表单的调用也如此:

var myFormPanel = new Ext.form.FormPanel({
    title: 'Client and routing info',
    items: [{
        fieldLabel: 'Client',
        name: 'clientName'
    }, {
        fieldLabel: 'Port of loading',
        name: 'portOfLoading'
    }, {
        fieldLabel: 'Port of discharge',
        name: 'portOfDischarge'
    }]
});
myFormPanel.getForm().load({
    url: '/getRoutingInfo.php',
    params: {
        consignmentRef: myConsignmentRef
    },
    failure: function(form, action) {
        Ext.Msg.alert("Load failed", action.result.errorMessage);
    }
});
一个成功响应包看起来可能像这样:

{
    success: true,
    data: {
        clientName: "Fred. Olsen Lines",
        portOfLoading: "FXT",
        portOfDischarge: "OSL"
    }
}
同时一个失败响应包看起来可能像这样:

{
    success: false,
    errorMessage: "Consignment reference not found"
}

可以将其它数据放到响应中，供 Form的 回调函数或者事件处理方法进行处理。 从JSON中解析出的对象可以通过 result 属性访问。

配置项

Config Options Defined By
failure : Function
当接收到一个操作失败数据包，或者在Ajax通讯失败时调用的方法。 方法...
当接收到一个操作失败数据包，或者在Ajax通讯失败时调用的方法。 方法将被传递如下参数:
  • form : Ext.form.BasicForm
    请求操作的表单
  • action : Ext.form.Action
    Action类。 如果Ajax请求失败，出错类型信息在 failureType中。 可以检测该对象的 result 属性来执行特定的post处理。
Action
method : String
访问URL的HTTP请求方式。默认为 Ext.form.BasicForm's指定的方式,如果没有指定...
问URL的HTTP请求方式。默认为 Ext.form.BasicForm指定的方式, 如果没有指定, 使用底层DOM表单的请求方式。（译者注：这里的请求方式指的是GET或者POST）
Action
params : Mixed
需要传递的额外参数。这些参数将被添加到Form的 Ext.form.BasicForm.baseParams 中，并与...

需要传递的额外参数。这些参数将被添加到Form的Ext.form.BasicForm.baseParams 中，并与Form的输入栏一起被提交到指定的URL。

传递的参数被 Ext.urlEncode进行标准的HTTP参数编码.

Action
reset : Boolean
当该配置项设置为true时， 将导致在操作成功时Form被reset...
当该配置项设置为 true 时, 导致在操作成功时form被 reset . 如果指定该项, 重置操作将在 success 的回调方法和 actioncomplete 事件触发 之前执行.
Action
scope : Object
调用回调函数的作用域 (回调函数的this引用).
Action
submitEmptyText : Boolean
如果被置为 true,emptyText值将在form提交时一同发送默认为true。
Action
success : Function
当接收到一个合法的操作成功数据包时调用的方法。 方法将会被传入以下参数:...
当接收到一个合法的操作成功数据包时调用的方法。 方法将会被传入以下参数:...
  • form : Ext.form.BasicForm
    请求操作的表单
  • action : Ext.form.Action
    Action类. 可以检测该对象的 result 属性来执行特定的post处理。
Action
timeout : Number
当服务器返回Action.CONNECT_FAILURE的failureType前等待的毫秒数.如果...
当服务器返回Action.CONNECT_FAILURE 的failureType 前等待的毫秒数 . 如果没有被指定, 默认配置为form的 timeout .
Action
url : String
Action调用的URL。
Action
waitMsg : String
在执行操作期间，调用 Ext.MessageBox.wait 方法时显示的消息.
Action
waitTitle : String
Ext.MessageBox.wait在执行操作期间， 显示的标题文本。
Action

公共属性

Property Defined By
CLIENT_INVALID : String
当表单在客户端校验失败并终止提交操作时返回的出错类型。客户端校验...
当表单在客户端校验失败并终止提交操作时返回的出错类型。客户端校验只有在 clientValidation 被明确的置为 false时才不执行。
Action
CONNECT_FAILURE : String
当向远程服务器发送请求，交互出错时返回的错误类型。 该...
当向远程服务器发送请求，交互出错时返回的错误类型。该 response 可被检测以获取更多信息。
Action
LOAD_FAILURE : String
当响应的success属性被置为false，或data属性中没有任何值的时候返回的出错类型...
当响应的 success 属性被置为 false,或data 属性中没有任何值的时候返回的出错类型。
Action
SERVER_INVALID : String
Form在服务器端处理失败时返回的错误类型，result中的success属性...

Form在服务器端处理失败时返回的错误类型，中的 success 属性被置为 false.

当一个form被提交时，特定字段的错误信息可能包含在 result的 errors 属性中返回.

Action
failureType : String
被检测到的失败类型为下面的一种: CLIENT_INVALID, SERVER_INVALID, CONNECT_FAILURE, 或者LOAD_FAILURE. ...
被检测到的失败类型为下面的一种: CLIENT_INVALID, SERVER_INVALID, CONNECT_FAILURE, 或者 LOAD_FAILURE. 用法:

                                    var fp = new Ext.form.FormPanel({
...
buttons: [{
    text: 'Save',
    formBind: true,
    handler: function(){
        if(fp.getForm().isValid()){
            fp.getForm().submit({
                url: 'form-submit.php',
                waitMsg: 'Submitting your data...',
                success: function(form, action){
                    // server responded with success = true
                    var result = action.result;
                },
                failure: function(form, action){
                    if (action.failureType === Ext.form.Action.CONNECT_FAILURE) {
                        Ext.Msg.alert('Error',
                            'Status:'+action.response.status+': '+
                            action.response.statusText);
                    }
                    if (action.failureType === Ext.form.Action.SERVER_INVALID){
                        // server responded with success = false
                        Ext.Msg.alert('Invalid', action.result.errormsg);
                    }
                }
            });
        }
    }
},{
    text: 'Reset',
    handler: function(){
        fp.getForm().reset();
    }
}]
Action
response : Object
用来执行操作的XMLHttpRequest对象。 （译者注：此处怀疑文档有误，应该是收到的响应对象才对，原文保留备查。） The XMLHttpRequest object used to perform the action.
Action
result : Object
解码好的响应对象，包含一个布尔型的success参数和其他...
解码好的响应对象，包含一个布尔型的success 参数和其他详细的操作说明参数。
Action
type : String
当前Action实例执行的操作类型。当前只支持"submit"和"load"。
Action

公共方法

该类没有公共方法。

公共事件

该类没有公共事件。


Action
    Action.Submit

Class Ext.form.Action.Submit

包: | Ext.form
定义类的文件: | Action.js
类: | Action.Submit
子类: | Action.DirectSubmit
继承自: | Action

一个负责处理 Form 提交数据的类，并且处理返回的响应。

该类的实例仅仅在 Form submitting 时被创建。

响应包标准

一个响应包可以包含:

  • success property : Boolean
    success 属性是必须的。
  • errors property : Object
    errors 属性，可选， 包含了无效表单项的出错信息。

JSON包

默认情况下，相应包被假定为JSON，所以一个典型的响应包看起来可能像这样:

{
    success: false,
    errors: {
        clientCode: "Client not found",
        portOfLoading: "This field must not be null"
    }
}

可以将其它数据放到响应中，供 Ext.form.BasicForm的 回调函数或者事件处理方法进行处理。 从JSON中解析出的对象可以通过 result 属性访问。

作为选择，如果 errorReader 被指定为一个 XmlReader:

errorReader: new Ext.data.XmlReader({
            record : 'field',
            success: '@success'
        }, [
            'id', 'msg'
        ]
    )

然后结果可以通过XML格式返回:

<?xml version="1.0" encoding="UTF-8"?>
<message success="false">
<errors>
    <field>
        <id>clientCode</id>
        <msg><![CDATA[Code not found. <br /><i>This is a test validation message from the server </i>]]></msg>
    </field>
    <field>
        <id>portOfLoading</id>
        <msg><![CDATA[Port not found. <br /><i>This is a test validation message from the server </i>]]></msg>
    </field>
</errors>
</message>

可以将其它元素放到响应XML中，供 Ext.form.BasicForm的 回调函数或者事件处理方法进行处理。 XML文档可以通过 errorReader的 xmlData 属性访问。

配置项

Config Options Defined By
clientValidation : boolean
决定是否在提交之前调用isValid 对Form的表单项进行校验。...
决定是否在提交之前调用isValid 对Form的表单项进行校验。 在Form的提交选项中传递false可以阻止此操作。 如果不定义，将会在提交之前执行校验。
Action.Submit
errorReader : Ext.data.DataReader
可选。对于errorReader来说无需解析JSON...

可选。对于errorReader来说无需解析JSON.

从返回的数据中读取单条记录的Reader。 DataReader的success 属性指定了如何确定提交是否成功。 Record的数据提供了出错消息以便应用到所有合法的表单项中。

Action.Submit
failure : Function
当接收到一个操作失败数据包，或者在Ajax通讯失败时调用的方法。 方法...
当接收到一个操作失败数据包，或者在Ajax通讯失败时调用的方法。 方法将被传递如下参数:
  • form : Ext.form.BasicForm
    请求操作的表单
  • action : Ext.form.Action
    Action类。 如果Ajax请求失败，出错类型信息在 failureType中。 可以检测该对象的 result 属性来执行特定的post处理。
Action
method : String
访问URL的HTTP请求方式。默认为 Ext.form.BasicForm's指定的方式,如果没有指定...
问URL的HTTP请求方式。默认为 Ext.form.BasicForm指定的方式, 如果没有指定, 使用底层DOM表单的请求方式。（译者注：这里的请求方式指的是GET或者POST）
Action
params : Mixed
需要传递的额外参数。这些参数将被添加到Form的 Ext.form.BasicForm.baseParams 中，并与...

需要传递的额外参数。这些参数将被添加到Form的Ext.form.BasicForm.baseParams 中，并与Form的输入栏一起被提交到指定的URL。

传递的参数被 Ext.urlEncode进行标准的HTTP参数编码.

Action
reset : Boolean
当该配置项设置为true时， 将导致在操作成功时Form被reset...
当该配置项设置为 true 时, 导致在操作成功时form被 reset . 如果指定该项, 重置操作将在 success 的回调方法和 actioncomplete 事件触发 之前执行.
Action
scope : Object
调用回调函数的作用域 (回调函数的this引用).
Action
submitEmptyText : Boolean
如果被置为 true,emptyText值将在form提交时一同发送默认为true。
Action
success : Function
当接收到一个合法的操作成功数据包时调用的方法。 方法将会被传入以下参数:...
当接收到一个合法的操作成功数据包时调用的方法。 方法将会被传入以下参数:...
  • form : Ext.form.BasicForm
    请求操作的表单
  • action : Ext.form.Action
    Action类. 可以检测该对象的 result 属性来执行特定的post处理。
Action
timeout : Number
当服务器返回Action.CONNECT_FAILURE的failureType前等待的毫秒数.如果...
当服务器返回Action.CONNECT_FAILURE 的failureType 前等待的毫秒数 . 如果没有被指定, 默认配置为form的 timeout .
Action
url : String
Action调用的URL。
Action
waitMsg : String
在执行操作期间，调用 Ext.MessageBox.wait 方法时显示的消息.
Action
waitTitle : String
Ext.MessageBox.wait在执行操作期间， 显示的标题文本。
Action

公共属性

Property Defined By
CLIENT_INVALID : String
当表单在客户端校验失败并终止提交操作时返回的出错类型。客户端校验...
当表单在客户端校验失败并终止提交操作时返回的出错类型。客户端校验只有在 clientValidation 被明确的置为 false时才不执行。
Action
CONNECT_FAILURE : String
当向远程服务器发送请求，交互出错时返回的错误类型。 该...
当向远程服务器发送请求，交互出错时返回的错误类型。该 response 可被检测以获取更多信息。
Action
LOAD_FAILURE : String
当响应的success属性被置为false，或data属性中没有任何值的时候返回的出错类型...
当响应的 success 属性被置为 false,或data 属性中没有任何值的时候返回的出错类型。
Action
SERVER_INVALID : String
Form在服务器端处理失败时返回的错误类型，result中的success属性...

Form在服务器端处理失败时返回的错误类型，中的 success 属性被置为 false.

当一个form被提交时，特定字段的错误信息可能包含在 result的 errors 属性中返回.

Action
failureType : String
被检测到的失败类型为下面的一种: CLIENT_INVALID, SERVER_INVALID, CONNECT_FAILURE, 或者LOAD_FAILURE. ...
被检测到的失败类型为下面的一种: CLIENT_INVALID, SERVER_INVALID, CONNECT_FAILURE, 或者 LOAD_FAILURE. 用法:

                                    var fp = new Ext.form.FormPanel({
...
buttons: [{
    text: 'Save',
    formBind: true,
    handler: function(){
        if(fp.getForm().isValid()){
            fp.getForm().submit({
                url: 'form-submit.php',
                waitMsg: 'Submitting your data...',
                success: function(form, action){
                    // server responded with success = true
                    var result = action.result;
                },
                failure: function(form, action){
                    if (action.failureType === Ext.form.Action.CONNECT_FAILURE) {
                        Ext.Msg.alert('Error',
                            'Status:'+action.response.status+': '+
                            action.response.statusText);
                    }
                    if (action.failureType === Ext.form.Action.SERVER_INVALID){
                        // server responded with success = false
                        Ext.Msg.alert('Invalid', action.result.errormsg);
                    }
                }
            });
        }
    }
},{
    text: 'Reset',
    handler: function(){
        fp.getForm().reset();
    }
}]
Action
response : Object
用来执行操作的XMLHttpRequest对象。 （译者注：此处怀疑文档有误，应该是收到的响应对象才对，原文保留备查。） The XMLHttpRequest object used to perform the action.
Action
result : Object
解码好的响应对象，包含一个布尔型的success参数和其他...
解码好的响应对象，包含一个布尔型的success 参数和其他详细的操作说明参数。
Action
type : String
当前Action实例执行的操作类型。当前只支持"submit"和"load"。
Action

公共方法

该类没有公共方法。

公共事件

该类没有公共事件。


Observable
    BasicForm

Class Ext.form.BasicForm

包: | Ext.form
定义类的文件: | BasicForm.js
类: | BasicForm
继承自: | Observable

封装DOM的

元素到FormPanel 类核心中，并提供输入域管理、验证、提交以及表单价在服务。

默认情况下，Ext表单是使用 Ext.form.Action， 以Ajax方式提交的。如果需要使用普通的方式提交Ext表单，可以使用 standardSubmit 配置项来进行配置。

File Uploads

File uploads不能以Ajax方式提交，也就是说它们不支持XMLHttpRequests。取而代之的是标准的表单提交，临时修改DOM的

元素 ，使其指向一个动态生成的，隐藏的iframe，这个iframe用来插入文档内容，并且在获取数据后被删除。

服务器回应被浏览器解析并且在IFRAME中创建文档。如果服务器使用JSON发送返回对象，那么Content-Type 必须设置为"text/html",以告诉浏览器插入文本到文档的正文保持不变。

字符对HTML解析器非常重要，因此它必须以HTML实体来发送。因此编码"<"为"&lt;"，"&"为"&amp;"等。

返回文本从文档中获取，并创建一个模拟的包含responseText属性的XMLHttpRequest对象，以符合事件处理程序和回调的要求。

要注意到文件上传数据包发送的内容类型（"content type"）必须是multipart/form, 但有些服务器技术(特别是 JEE)可能需要一些特别的处理，以便从数据包中获取参数名称和参数值。

配置项

Config Options Defined By
api : Object
如果以Ext.form.Action.DirectLoad和Ext.form.Action.DirectSubmit的方式处理指定的加载和提交...
如果以Ext.form.Action.DirectLoad和 Ext.form.Action.DirectSubmit的方式处理指定的加载和提交。 已经由Ext.Direct导入的方法可以在这里被指定来加载和提交表单。如下所示：
api: {
                                load: App.ss.MyProfile.load,
                                submit: App.ss.MyProfile.submit
                            }

加载动作可以使用 paramOrder 或 paramsAsHash 来自定义加载方法调用的方式。提交动作将一直使用标准的表单提交。formHandler配置必须设置服务器端相关的方法， 此方法必须已经被Ext.Direct导入。

BasicForm
baseParams : Object
附加在所有请求后面传递的参数。例如： baseParams: {id: '123', foo: 'bar'}...

附加在所有请求后面传递的参数。例如： baseParams: {id: '123', foo: 'bar'}。

参数可以使用Ext.urlEncode编码为标准的HTTP参数。

BasicForm
errorReader : DataReader
当执行提交操作时出现检验错误时一个用来读取数据的Ext.data.DataReader...

当执行提交操作时出现校验错误时， 用来读取数据的Ext.data.DataReader。这只是一个配置项，因为存在用来处理JSON的内置支持。

为无效字段提供信息的记录必须使用字段名(或者ID)作为记录的ID，并且必须包含一个名为“msg”的字段，该字段包含了错误信息。

errorReader不必完全实现DataReader，它只需要实现一个可读的(xhr)函数，该函数返回具有以下结构的一个记录数组对象:

{
                                records: recordArray
                            }
BasicForm
fileUpload : Boolean
如果当前表单是用来做文件上传操作的，设置此项为true...
如果当前表单是用来做文件上传操作的，设置此项为true。

文件上传不是使用普通的"Ajax"技术，也就是说，它们不是使用XMLHttpRequests来实现的。 作为替代的是，表单是以标准的风格提交的， 同时临时修改DOM的<form>元素，使它的target 指向一个动态生成的隐藏<iframe>， 这个隐藏的<iframe>被插入到document中，在收到返回数据后被删除掉。

浏览器将解析服务器的响应，为IFRAME创建document。如果服务器使用JSON发送响应，那么 Content-Type 头必须设置为"text/html"，以便告诉浏览器将文本直接插入document的body中而不做改变。

字符对HTML解析器非常重要，因此它必须以HTML实体来发送。因此编码"<"为"&lt;"，"&"为"&amp;"等。

从document中可以获得响应文本，然后创建一个假的XMLHttpRequest对象， 为了符合事件处理程序和回调函数的要求， 它包含一个responseText属性。

必须明白的是，文件上传发送数据包的content type是 multipart/form ，并且一些服务器端技术（特别是JavaEE），为了从数据包内容 解析参数名称和值，可能要求一些定制的处理。

BasicForm
listeners : Object
一个包含一个或多个事件处理器的配置对象，会在初始化的时候被添加到目标对象上...

一个包含一个或多个事件处理器的配置对象，会在初始化的时候被添加到目标对象上。 该配置对象应该是一个有效的监听器配置对象就像 addListener例子中指定的一样可一次附加多个处理器。

ExtJs Components上的DOM事件

一些 ExtJs Component 类导出时会选择一些DOM事件(例如 "click", "mouseover" 等等), 这通常只是在有额外的值可以被添加时发生。例如DataView类的 click事件会传递被点击的节点。也可以直接在Component的HTMLElementevent上访问DOM事件，但必需在Component被渲染后监听器才能添加到Element 上。可以按照以下步骤添加插件:

// 插件会用一个监听器配置对象进行配置。
//该组件会被添加到所有处理方法的参数列表上。
Ext.DomObserver = Ext.extend(Object, {
    constructor: function(config) {
        this.listeners = config.listeners ? config.listeners : config;
    },

    // 组件将自己传递进了插件的初始化方法里
    init: function(c) {
        var p, l = this.listeners;
        for (p in l) {
            if (Ext.isFunction(l[p])) {
                l[p] = this.createHandler(l[p], c);
            } else {
                l[p].fn = this.createHandler(l[p].fn, c);
            }
        }

        // 渲染后立即添加监听器到元素上
        c.render = c.render.createSequence(function() {
            var e = c.getEl();
            if (e) {
                e.on(l);
            }
        });
    },

    createHandler: function(fn, c) {
        return function(e) {
            fn.call(this, e, c);
        };
    }
});

var combo = new Ext.form.ComboBox({

    // 元素被点击后折叠
    plugins: [ new Ext.DomObserver({
        click: function(evt, comp) {
            comp.collapse();
        }
    })],
    store: myStore,
    typeAhead: true,
    mode: 'local',
    triggerAction: 'all'
});

Observable
method : String
表单的请求方式(GET 或者 POST)，如果在action配置项中没有提供，使用此配置。
BasicForm
paramOrder : Array/String
一个服务器端执行的参数列表。默认为undefined. 仅用于api加载配置...

一个服务器端执行的参数列表。默认为undefined. 仅用于 api 加载配置。

指定参数在服务器端执行的顺序必须为(1)字符串数组,或者(2)一个由空格，逗号或者管道符号("|")分割的字符串。 例如,下列任何一种,是可以接受的：

paramOrder: ['param1','param2','param3']
                                paramOrder: 'param1 param2 param3'
                                paramOrder: 'param1,param2,param3'
                                paramOrder: 'param1|param2|param'
BasicForm
paramsAsHash : Boolean
仅用于加载配置的api。把参数作为一个名为arguments的集合发送(默认为false)...
仅用于加载配置的api。把参数作为一个名为arguments的集合发送(默认为false)。 提供paramOrder用来取消该配置。
BasicForm
reader : DataReader
当执行"load"操作加载数据时使用的Ext.data.DataReader...
当执行"load"操作加载数据时使用的Ext.data.DataReader (例如Ext.data.XmlReader)。 该配置项是可选的，因为有一个内置的支持来解析JSON。使用XMLReader额外的信息请查看examples/form/xml-form.html中提供的例子。
BasicForm
standardSubmit : Boolean
如果此项设置为true，将使用标准的HTML表单提交代替XHR（Ajax）方式的提交。(默认值为 false)。

如果此项设置为true，将使用标准的HTML表单提交代替XHR（Ajax）方式的提交。(默认值为 false)。

Note: 当使用standardSubmit时,submit的 选项将被忽略，因为Ext的ajax底层被忽略。为了传递额外的参数(比如baseParams和params)， 可用使用隐藏域，比如:

new Ext.FormPanel({
                                standardSubmit: true,
                                baseParams: {
                                    foo: 'bar'
                                },
                                url: 'myProcess.php',
                                items: [{
                                    xtype: 'textfield',
                                    name: 'userName'
                                }],
                                buttons: [{
                                    text: 'Save',
                                    handler: function(){
                                        var fp = this.ownerCt.ownerCt,
                                        form = fp.getForm();
                                        if (form.isValid()) {
                                        // check if there are baseParams and if

                                        // hiddent items have been added already
                                        if (fp.baseParams && !fp.paramsAdded) {
                                            // add hidden items for all baseParams
                                            for (i in fp.baseParams) {
                                                fp.add({
                                                    xtype: 'hidden',
                                                    name: i,
                                                    value: fp.baseParams[i]
                                                });
                                            }
                                            fp.doLayout();
                                            // set a custom flag to prevent re-adding
                                            fp.paramsAdded = true;
                                        }
                                        form.submit();
                                    }
                                }
                            }]
                        });
BasicForm
timeout : Number
from操作的超时秒数(默认为30秒)。
BasicForm
trackResetOnLoad : Boolean
如果设置为true，form.reset()方法将表单重置到最后一次加载或者调用setValues()方法时的数据...
如果设置为true，form.reset()方法将表单重置到最后一次加载或者 调用setValues()方法时的数据，而不是重置到表单创建时的状态。默认为false。
BasicForm
url : String
如果在doAction配置项中没有提供url，使用该URL来处理对表单的相关操作。
BasicForm
waitTitle : String
等待消息框默认显示的标题(默认为'Please Wait...')
BasicForm

公共属性

Property |  | Defined By
 | items : MixedCollection 一个MixedCollection，包含当前表单中所有的Ext.form.Fields。 | BasicForm
 | waitMsgTarget : Mixed 默认情况下，使用Ext.MessageBox.wait来显示等待消息（译者注：也就是进展条）... 默认情况下，使用Ext.MessageBox.wait来显示等待消息（译者注：也就是进展条）。 你可以传递一个元素或者它的id来作为显示遮罩的目标对象，或者配置一个true来遮罩表单自身。 （译者注：使用进展条时，Ext会有阴影和遮罩效果，该配置项是用来配置将遮罩显示在哪个元素上。） | BasicForm

公共方法

Method Defined By
BasicForm ( Mixed el , Object config )
参数:
  • el : Mixed
    表单元素或者它的id
  • config : Object
    配置项
返回值:
  • void
BasicForm
add ( Field field1 , [ Field field2 ], [ Field etc ] ) : BasicForm
向当前BasicForm集合中添加一个Ext.form组件。它不会导致渲染传递的组件，只是运行表单对输入域进行验证和赋值...
向当前BasicForm集合中添加一个Ext.form组件。它不会导致渲染传递的组件，只是运行表单对输入域进行验证和赋值。

你通常不会调用此函数. 为了被渲染,输入域应该被添加到Container, 通常是一个FormPanel. 添加输入域的FormPanel负责把输入域添加到BasicForm集合。

参数:
  • field1 : Field
  • field2 : Field
    可选
  • etc : Field
    可选
返回值:
  • BasicForm
    this
BasicForm
addEvents( Object|String o, string Optional. ) : void
添加指定的事件到事件列表上，事件会被该Observable触发。
添加指定的事件到事件列表上，事件会被该Observable触发。
参数:
  • o : Object|String
    以事件名作为属性true作为值的对象 或者当多个事件名被分开的传递时则为第一个事件名。
  • Optional. : string
    事件名被分开的传递时则为事件名。 用法:
    this.addEvents('storeloaded', 'storecleared');
返回值:
  • void
Observable
addListener( String eventName, Function handler, [Object scope], [Object options] ) : void
给对象添加事件处理器。
给对象添加事件处理器。
参数:
  • eventName : String
    监听的事件名。
  • handler : Function
    事件调用的方法
  • scope : Object
    （可选）处理方法执行的作用域 (this的引用 reference)。 如果被忽略。默认为触发事件的对象。
  • options : Object
    （可选）包含处理器配置和属性的对象。 可能包含以下的属性:
    • scope : Object
      处理方法执行的作用域(this的引用) 。 如果被忽略。默认为触发事件的对象。
    • delay : Number
      在触发事件后延迟调用处理器的毫秒数。
    • single : Boolean
      如果为True则添加一个处理器来处理下一次的事件触发（仅一次），然后移除自己。
    • buffer : Number
      使得处理器延迟指定毫秒数后预定的运行在 一个Ext.util.DelayedTask中 。 如果事件在时间内再一次被触发，原始的处理器不会被调用，但是新的处理器会预定的在他的位置上。
    • target : Observable
      如果事件在目标的Observable上触发则仅仅调用处理器， 否则 事件会从子类的Observable上冒泡

    组合选项
    使用这些选项参数,可能会组合出不同类型的监听器：

    一个延迟的，一次性的监听器。

    myDataView.on('click', this.onClick, this, {
single: true,
delay: 100
});

    一次调用附加多个处理器
    该方法同样支持传递一个包含指定的多个处理器的属性的配置对象参数。

    myGridPanel.on({
'click' : {
    fn: this.onClick,
    scope: this,
    delay: 100
},
'mouseover' : {
    fn: this.onMouseOver,
    scope: this
},
'mouseout' : {
    fn: this.onMouseOut,
    scope: this
}
});

    或者一个简写的语法：

    myGridPanel.on({
'click' : this.onClick,
'mouseover' : this.onMouseOver,
'mouseout' : this.onMouseOut,
 scope: this
});
返回值:
  • void
Observable
applyIfToFields ( Object values ) : BasicForm
使用传递进来的对象，对表单中所有的输入栏调用 Ext.applyIf 方法。
使用传递进来的对象，对表单中所有的输入栏调用 Ext.applyIf 方法。
参数:
  • values : Object
返回值:
  • BasicForm
    this
BasicForm
applyToFields ( Object values ) : BasicForm
对表单中所有的输入字段调用 Ext.apply 方法，参数为传入的对象。
对表单中所有的输入字段调用 Ext.apply 方法，参数为传入的对象。
参数:
  • values : Object
返回值:
  • BasicForm
    this
BasicForm
clearInvalid () : BasicForm
清除表单中所有的非法标记信息。
清除表单中所有的非法标记信息。
参数:
  • 无。
返回值:
  • BasicForm
    this
BasicForm
doAction ( String/Object actionName , [ Object options ] ) : BasicForm
执行一个预定义的操作 (Ext.form.Action.Submit或者 Ext.form.Action.Load) 或者...
执行一个预定义的操作 (Ext.form.Action.Submit或者 Ext.form.Action.Load) 或者一个继承自Ext.form.Action 的定制操作，以执行一个特定的处理。
参数:
  • actionName : String/Object
    预定义操作类型的名称，或者用来执行的Ext.form.Action实例。
  • options : Object
    可选，传递给Ext.form.Action的项。除非特别说明，所有的配置项列表都必须 支持submit 和 load动作(自定义的动作可以接受其他配置项):
    • url : String
      action的url地址 (默认为表单的url。)
    • method : String
      表单提交的方式(默认为表单的方式, 如果未定义则为POST)
    • params : String/Object

      传递的参数(默认为表单的baseParams,如果未定义则为none)

      参数可以使用Ext.urlEncode编码为标准的HTTP参数。

    • headers : Object
      action设置的请求头部信息(默认为表单默认的头部信息)
    • success : Function
      回调函数，当成功响应的时候被唤起。(产看顶部的submit和 load关于成功响应结构的描述)。函数需要传递如下的参数:
      • form : Ext.form.BasicForm
        请求action的form
      • action : 执行操作的Action对象。
        该action对象包含了如下的属性:
        • response
        • result : 自定义post处理的结果
        • type
    • failure : Function
      事物尝试失败后被调用。函数需要传递如下的参数:
      • form : 执行请求的Ext.form.BasicForm。
      • action : 执行操作的Action对象。
        该action对象包含了如下的属性:
        • failureType
        • response
        • result : 自定义post处理的结果
        • type
    • scope : Object
      调用回调函数的作用域(this和回调函数关联)。
    • clientValidation : Boolean
      只有Submit操作可用. 在提交前调用isValid 判断表单的输入域是否有效。设置为false将阻止这样做。如果未定义，预定义的提交输入域验证将被执行。
返回值:
  • BasicForm
    this
BasicForm
enableBubble( String/Array events ) :void
是否现在使得事件会被该Observable触发并调用 this.getBubbleTarget()方法在拥有者的继承树...

是否现在使得事件会被该Observable触发并调用 this.getBubbleTarget()方法在拥有者的继承树中冒泡。Observable的基础类中没有该方法的实现。

该方法一般被Ext.Components用来冒泡事件到拥有者的容器。参看Ext.Component.getBubbleTarget默认的实现 在Ext.Component中返回组件的直接拥有者。但是如果需要的是一个已知的目标，该方法可以被重写来更快的访问需求的目标。

例子:

Ext.override(Ext.form.Field, {
    // 添加方法到Field的initComponent上改变事件为冒泡
    initComponent : Ext.form.Field.prototype.initComponent.createSequence(function() {
        this.enableBubble('change');
    }),

    // 我们知道我们想让Field的事件冒泡到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() {
            // 如果样式被修改标题会变红。
            myForm.header.setStyle('color', 'red');
        }
    }
});
参数:
  • events : String/Array
    冒泡的事件名，或事件名数组
返回值:
  • void
Observable
findField ( String id ) : Field
根据id、dataIndex、name或者hiddenName查找表单中的Ext.form.Field。
根据id、dataIndex、name或者hiddenName查找表单中的 Ext.form.Field。
参数:
  • id : String
    用来查找的参数(可以是 id, dataIndex, name 后者 hiddenName).
返回值:
  • Field
BasicForm
fireEvent( String eventName, Object... args ) : Boolean
用传入的参数触发指定的事件 (减去事件名)。 一个事件可以被设置为冒泡 Obse...

用传入的参数触发指定的事件 (减去事件名)。

一个事件可以被设置为冒泡到Observable父类继承树(参看 Ext.Component.getBubbleTarget) 调用enableBubble实现。

参数:
  • eventName : String
    触发的事件名。
  • args : Object...
    传递给处理器的可变长度参数。
返回值:
  • Boolean
    如果有任何的处理器返回false则返回false，否则返回true。
Observable
getEl () : Ext.Element
获取HTML表单项。
获取HTML表单项。
参数:
  • 无。
返回值:
  • Ext.Element
BasicForm
getFieldValues ( [ Boolean dirtyOnly ] ) : Object
使用getValue()方法以键/值对集合的形式来检索表单中的输入域...
使用getValue() 方法以键/值对集合的形式来检索表单中的输入域。如果存在多个名称相同的输入域，则返回数组。
参数:
  • dirtyOnly : Boolean
    可选,为true当输入域为脏读的时候才返回。
返回值:
  • Object
    表单中的值
BasicForm
getValues ( [ Boolean asString ] ) : String/Object
以键值对的格式返回所有输入栏的值，就像它们在使用标准形式的提交时那样...

以键值对的格式返回所有输入栏的值，就像它们在使用标准形式的提交时那样。如果存在多个名字相同的输入域，将返回一个数组。

Note: 这些值是从表单中收集所有可用的HTML输入元素，而不是Ext的输入组件。 这意味着所有的返回值都是字符串(或者字符串数组)和输入域的emptyText的值。

参数:
  • asString : Boolean
    可选，为true将以字符串的形式返回值(默认为false, 返回对象)
返回值:
  • String/Object
BasicForm
hasListener( String eventName ) : Boolean
检测对象是否包含指定事件的任何监听器
检测对象是否包含指定事件的任何监听器
参数:
  • eventName : String
    检测的事件名
返回值:
  • Boolean
    如果事件被监听则为true，否则为false
Observable
isDirty () : Boolean
如果此表单中的字段在加载之后被改动过，则返回true...

如果此表单中的字段在加载之后被改动过，则返回true。

请注意，如果该BasicForm配置了trackResetOnLoad， 那么当这些值是通过setValues 或者loadRecord Note that if this BasicForm was configured with trackResetOnLoad方式加载的话，它的原始值就会被更新。

参数:
  • 无。
返回值:
  • Boolean
BasicForm
isValid () : Boolean
如果表单在客户端校验合法，返回true。
如果表单在客户端校验合法，返回true。
参数:
  • 无。
返回值:
  • Boolean
BasicForm
load ( Object options ) : BasicForm
进行load action的快捷方式。
进行load action的快捷方式。
参数:
  • options : Object
    传递给action(详情参见 doAction) 的配置项。
返回值:
  • BasicForm
    this
BasicForm
loadRecord ( Record record ) : BasicForm
把一个Ext.data.Record加载到表单中。可以查看trackResetOnLoad。
把一个Ext.data.Record加载到表单中。可以查看trackResetOnLoad。
参数:
  • record : Record
    The record to load
返回值:
  • BasicForm
    this
BasicForm
markInvalid ( Array/Object errors ) : BasicForm
将表单中的输入栏批量标记为非法状态。
将表单中的输入栏批量标记为非法状态。
参数:
  • errors : Array/Object
    数组[{id:'fieldId', msg:'The message'},...]或者hash对象{id: msg, id2: msg2}
返回值:
  • BasicForm
    this
BasicForm
on( String eventName, Function handler, [Object scope], [Object options] ) : void
给对象添加事件处理器 (addListener的简写形式)
给对象添加事件处理器 (addListener的简写形式。)
参数:
  • eventName : String
    监听的事件类型
  • handler : Function
    事件调用的方法
  • scope : Object
    （可选）处理方法执行时的作用域 (this 的引用)。 如果被忽略。默认为触发事件的对象。
  • options : Object
    可选 包含处理器配置的对象。
返回值:
  • void
Observable
purgeListeners() : void
移除对象上所有的监听器
移除对象上所有的监听器
参数:
  • 无。
返回值:
  • void
Observable
relayEvents( Object o, Array events ) : void
从指定的Observable上传递选择的事件就好像被当前对象触发一样。
从指定的Observable上传递选择的事件就好像被当前对象触发一样。
参数:
  • o : Object
    该Observable上的事件被当前对象传递。
  • events : Array
    传递的数组名。
返回值:
  • void
Observable
remove ( Field field ) : BasicForm
从集合中删除一个输入字段(不删除它的标签)。
从集合中删除一个输入字段(不删除它的标签)。
参数:
  • field : Field
返回值:
  • BasicForm
    this
BasicForm
removeListener( String eventName, Function handler, [Object scope] ) : void
删除一个事件处理器。
删除一个事件处理器。
参数:
  • eventName : String
    处理器关联的事件类型。
  • handler : Function
    移除的处理器。 这应该是传递到addListener里的方法的引用。
  • scope : Object
    （可选）处理器指定的初始作用域。
返回值:
  • void
Observable
render () : BasicForm
遍历添加到（added ） 当前BasicForm中的所有项目...
遍历添加到（added ） 当前BasicForm中的所有项目（Fields）， 检查它们的id，并对已经存在的拥有相同id的DOM元素 调用Ext.form.Field.applyToMarkup 方法。
参数:
  • 无。
返回值:
  • BasicForm
    this
BasicForm
reset () : BasicForm
重置当前表单。
重置当前表单。
参数:
  • 无。
返回值:
  • BasicForm
    this
BasicForm
resumeEvents() : void
重新开始触发事件。(参见suspendEvents) 如果事件以queueSuspended参数被挂起，则在事件被挂起时 ...
重新开始触发事件。(参见 suspendEvents) 如果事件以queueSuspended 参数被挂起，则在事件被挂起时触发的事件会被传递到所有的监听器上
参数:
  • 无。
返回值:
  • void
Observable
setValues ( Array/Object values ) : BasicForm
批量设置当前表单中输入项的值。
批量设置当前表单中输入项的值。
参数:
  • values : Array/Object
    数组的形式:
    [{id:'clientName', value:'Fred. Olsen Lines'},
                                                 {id:'portOfLoading', value:'FXT'},
                                                 {id:'portOfDischarge', value:'OSL'} ]
    或者hash对象的形式:
    {
                                                clientName: 'Fred. Olsen Lines',
                                                portOfLoading: 'FXT',
                                                portOfDischarge: 'OSL'
                                            }
返回值:
  • BasicForm
    this
BasicForm
submit ( Object options ) : BasicForm
submit action的快捷方式
submit action的快捷方式
参数:
  • options : Object
    传递给action(详情参见 doAction) 的配置项。

    Note: 当使用standardSubmit 项时被忽略。

    The following code:

    myFormPanel.getForm().submit({
                                                    clientValidation: true,
                                                    url: 'updateConsignment.php',
                                                    params: {
                                                        newStatus: 'delivered'
                                                    },
                                                    success: function(form, action) {
                                                       Ext.Msg.alert('Success', action.result.msg);
                                                    },
                                                    failure: function(form, action) {
                                                        switch (action.failureType) {
                                                            case Ext.form.Action.CLIENT_INVALID:
                                                                Ext.Msg.alert('Failure', 'Form fields may not be submitted with invalid values');
                                                                break;
                                                            case Ext.form.Action.CONNECT_FAILURE:
                                                                Ext.Msg.alert('Failure', 'Ajax communication failed');
                                                                break;
                                                            case Ext.form.Action.SERVER_INVALID:
                                                               Ext.Msg.alert('Failure', action.result.msg);
                                                       }
                                                    }
                                                });
    将以下的服务器响应作为成功的提交:
    {
                                                "success":true, // note this is Boolean, not string
                                                "msg":"Consignment updated"
                                            }
    以下的服务器响应作为失败的提交:
    {
                                                "success":false, // note this is Boolean, not string
                                                "msg":"You do not have permission to perform this operation"
                                            }
返回值:
  • BasicForm
    this
BasicForm
suspendEvents( Boolean queueSuspended ) : void
暂停触发所有的事件。 (参看resumeEvents)
暂停触发所有的事件。（参看 resumeEvents)
参数:
  • queueSuspended : Boolean
    如果传递为true则排列好暂停的事件使得在调用 resumeEvents 后再触发它们，而不是抛弃所有暂停的事件。
返回值:
  • void
Observable
un( String eventName, Function handler, [Object scope] ) : void
删除一个事件处理器(removeListener方法的简写形式)
删除一个事件处理器(removeListener方法的简写形式。)
参数:
  • eventName : String
    处理器关联的事件类型
  • handler : Function
    被删除的处理器 这应该是传入 addListener 中的方法的引用。
  • scope : Object
    （可选）为处理器指定的初始作用域。
返回值:
  • void
Observable
updateRecord ( Record record ) : BasicForm
把处于beginEdit/endEdit块中的表单值持久化到传递进来的Ext.data.Record对象中。
P把处于beginEdit/endEdit块中的表单值持久化到传递进来的 Ext.data.Record对象中。
参数:
  • record : Record
    修改的记录
返回值:
  • BasicForm
    this
BasicForm

公共事件

Event Defined By
actioncomplete : ( Form this , Action action )
当一个操作结束时触发。
当一个操作结束时触发。
监听器将会用如下的参数格式调用:
  • this : Form
  • action : Action
    已经完成的Ext.form.Action
BasicForm
actionfailed : ( Form this , Action action )
当操作失败时触发。
当操作失败时触发。
监听器将会用如下的参数格式调用:
  • this : Form
  • action : Action
    操作失败的Ext.form.Action
BasicForm
beforeaction : ( Form this , Action action )
在进行一个操作之前触发。返回false终止操作。
在进行一个操作之前触发。返回false终止操作。
监听器将会用如下的参数格式调用:
  • this : Form
  • action : Action
    被执行的Ext.form.Action
BasicForm


Observable
    Component
      BoxComponent
        Field
          Checkbox

Class Ext.form.Checkbox

包: | Ext.form
定义类的文件: | Checkbox.js
类: | Checkbox
子类: | Radio
继承自: | Field
单个的复选框，可以替代传统的复选框。

配置项

Config Options Defined By
allowDomMove : Boolean
在渲染时组件是否可以移动Dom节点(默认为true)。
Component
anchor : String
注: 这个配置只用于该组件被包含在一个已使用AnchorLayout...

注: 这个配置只用于该组件被包含在一个已使用 AnchorLayout (或者其子类)配置的Container时。 基于布局管理器，例如：

  • Ext.form.FormPanel
  • 指定 layout: 'anchor' // or 'form', or 'absolute'

参见 Ext.layout.AnchorLayout. anchor 。

BoxComponent
applyTo : Mixed
指定一个元素的id、一个DOM元素或者一个已经存在并被渲染到DIV中的元素，此DIV已经被...

指定一个元素的id、一个DOM元素或者一个已经存在并被渲染到DIV中的元素，此DIV已经被 渲染到document中，并且为当前组件指定了一些结构化的标签。

  • 描述 :
      当使用了 applyTo， 在主元素中也可以用id或者CSS类名来指定组件的托管部分， 并且，如果可以的话，创建的组件可能也会试图在那个标签中创建它的子组件。
  • 注意 :
      当使用此配置项时，无需调用render()方法。
      如果指定了applyTo属性，任何传递给 renderTo 的值都会被忽略，并且目标元素的父节点将会自动被用作组件的容器。
Component
autoCreate : String/Object
一个DomHelper元素描述,或正真的默认元素描述说明： (默认为 {tag: 'input', type: 'checkbox', autocomple...
一个DomHelper元素描述,或正真的默认元素描述说明： (默认为 {tag: 'input', type: 'checkbox', autocomplete: 'off'})
Checkbox
autoScroll : Boolean
如果值为true，将会在该元素上使用overflow:'auto'配置，并且在必要的时候...
如果值为true，将会在该元素上使用overflow:'auto'配置，并且在必要的时候自动显示滚动条，否则，溢出部分的组件都会被切除(默认值为 false)。
BoxComponent
autoShow : Boolean
如果组件需要检测隐藏CSS属性(如 'x-hidden' 或者 'x-hide-display')并且在渲染时删除...
如果组件需要检测隐藏CSS属性(如 'x-hidden' 或者 'x-hide-display')并且在渲染时删除它们 (默认为false)，设置此值为true。
Component
boxLabel : String
复选框旁边显示的文本。（默认为''）
Checkbox
boxLabel : String
复选框旁边显示的文本。（默认为''）
Checkbox
boxMaxHeight : Number
设置组件的最大高度值...

设置组件的最大高度值。

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

BoxComponent
boxMaxWidth : Number
设置组件的最大宽度值...

设置组件的最大宽度值。

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

BoxComponent
boxMinHeight : Number
设置组件的最小高度值...

设置组件的最小高度值。

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

BoxComponent
boxMinWidth : Number
设置组件的最小宽度值...

设置组件的最小宽度值。

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

BoxComponent
bubbleEvents : Array
一个事件数组，当这些事件被触发时，将会被冒泡到所有父容器中。参见....

一个事件数组，当这些事件被触发时，将会被冒泡到所有父容器中。参见 Ext.util.Observable.enableBubble。 默认为 []。

Component
checked : Boolean
true当复选框被渲染为已选中状态时，此值为true。 (默认值是 false)
Checkbox
clearCls : String
应用到特殊的clearing div的CSS类， 这个clearing div直接渲染到每个form field的包装器后面...

应用到特殊的clearing div的CSS类， 这个clearing div直接渲染到每个form field的包装器后面，以提供 清除field的功能(默认为 'x-form-clear-left')。

注意: 只有在当前组件被渲染到一个使用FormLayout 布局(例如 Ext.form.FormPanel 或者指定 layout:'form')的 容器中、或者是指定了一个fieldLabel 、或者指定isFormField=true 时此配置才有效。

另请参见 Ext.layout.FormLayout. fieldTpl。

Component
cls : String
一个可选的额外CSS类，它将被添加到当前组件的元素上(默认为'')...
一个可选的额外CSS类，它将被添加到当前组件的元素上(默认为'')。 此属性对于在组件上，或者它的任何使用标准CSS规则的孩子节点上， 添加定制的样式非常有用。
Field
contentEl : String
(可选)指定一个已存在的HTML元素，或者一个已存在HTML元素的...

(可选)指定一个已存在的HTML元素，或者一个已存在HTML元素的 id ，它们将被用作当前组件的内容。

  • 描述 :
    此配置选项被用来将一个已存在的HTML元素 插入到一个新组件(在组件渲染之后它简单地移动DOM元素) 的layout元素中，使它成为该组件的内容。
  • 注意 :
    指定的HTML元素将被append到组件的layout元素中， 在所有配置的 HTML 被插入之后， 并且，这样的话，在render事件 被触发时，document中将不再包含此元素。
    指定的HTML元素将不会参与组件所有可能使用的 layout 过程(译者注：指这些HTML元素 不会参与布局操作)。 它仅是HTML而已。布局操作实在孩子 items 上进行的。
    添加 x-hidden 或者 x-hide-display CSS类，以防在内容渲染到panel时发生闪烁。
Component
ctCls : String
一个可选的外部CSS样式，添加到这个组件的容器(默认值为 '')。 这个方法对于使用标准的CSS规则...

一个可选的外部CSS样式，添加到这个组件的容器(默认值为 '')。 这个方法对于使用标准的CSS规则，为组件或它的任何一个子组件添加特定的样式非常有用。 参见 Ext.layout.ContainerLayout和 extraCls 。

注意: ctCls 默认为 ''期望如下的类，它们将指定一个默认值:

  • Box Layout : 'x-box-layout-ct'
使用一个额外的CSS类配置以上的Class，它是append到默认对象上的。例如， 对于BoxLayout (Hbox and Vbox):
                                ctCls: 'x-box-layout-ct custom-class'

Component
data : Mixed
初始化数据集，它将被应用到 tpl 上以刷新组件的内容区域。
Component
disabled : Boolean
当前组件处于无效状态时为true。 Read-only.
Field
disabledClass : String
当组件处于无效状态时添加到组件上的CSS类(默认为 'x-item-disabled')。
Component
fieldClass : String
复选框的默认样式类(默认是：'x-form-field')
Checkbox
fieldLabel : String
紧靠此field显示的标签文本(默认值为 '')。注意...

紧靠此field显示的标签文本(默认值为 '')。

注意:只有在当前组件被渲染到一个使用FormLayout 的容器中时，此配置才有效。 (例如 Ext.form.FormPanel 或 指定 layout:'form')。

另请参见 hideLabel 、 Ext.layout.FormLayout和 fieldTpl。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Name'
    }]
});
Component
flex : Number
注: 这个配置只用于该组件被包含在一个已使用BoxLayout配置的Container中时...

注: 这个配置只用于该组件被包含在一个已使用BoxLayout配置的Container中时。通过计算每一个子组件的flex值所占全部flex值之和的比例，来决定子组件的宽(HBoxLayout)高(VBoxlayout)。 任何子项的 flex = 0 或 flex = undefined 将不被设置(初始值大小将不被改变)。

BoxComponent
focusClass : String
在获得输入焦点时的CSS样式 (默认为没定义。)
Checkbox
handler : Function
当checked的值被改变时调用的方法(可以用来替代check事件的处理)。 该处理是......
当 checked 的值被改变时调用的方法(可以用来替代check事件的处理)。 该处理是通过以下参数：
  • checkbox : Ext.form.Checkbox
    该复选框被切换。
  • checked : Boolean
    复选框新的选中状态。
Checkbox
height : Number
组件的高度(默认值为 auto)。注:如果想使用百分比的方式...
组件的高度(默认值为 auto)。注:如果想使用百分比的方式来设置值，请查看 Ext.Component.anchor。
BoxComponent
hidden : Boolean
如果当前组件处于隐藏状态，此值为true。Read-only。
Component
hideLabel : Boolean
true时完全隐藏label元素 ( label 和 separator)。 默认为 false。 默认情况下，即使你不指定...

true时完全隐藏label元素 ( label 和 separator)。 默认为 false。 默认情况下，即使你不指定 fieldLabel 它的空间仍然会被保留，这样这块区域会与其它确实拥有label的区域位于同一排。 讲此值设置为 true 将导致此区域不再保留此空间。

注意: 参见 clearCls 的注释。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield'
        hideLabel: true
    }]
});
Component
hideMode : String
组件如何隐藏，支持的值有： 'visibility' (css visibility), 'offsets' (位置偏移量为负值) 和...

组件如何隐藏，支持的值有： 'visibility' (css visibility), 'offsets' (位置偏移量为负值) 和 'display' (css display).

注意:一般首选默认值 'display'，因为当组件第一次显示的时候它们会自动进行布局 (隐藏的时候不会调整尺寸)。

Component
hideParent : Boolean
此值为true时，当调用hide/show方法时，将会hide和show组件的容器...
此值为true时，当调用hide/show方法时，将会hide和show组件的容器；false时将会 hide和show组件自身(默认为false)。例如，这可以用作window上隐藏按钮的一种 快捷操作，通过设置此按钮的hideParent:true，然后把它添加到window上。
Component
html : String/Object
一个HTML片段，或者一个 DomHelper 描述，用作layout元素的内容(默认为'')。...
一个HTML片段，或者一个 DomHelper 描述，用作layout元素的内容(默认为'')。 这个HTML内容在组件渲染之后才被添加，所以在 render 出发的时候，document中尚未包含此HTML。 但是这个内容将会在所有配置的 contentEl 之前被插入到body标签中。
Component
id : String
当前组件唯一的id(默认为auto-assigned id)...

当前组件唯一的id(默认为auto-assigned id)。 如果你需要在以后访问组件，而又没有一个有效的组件对象引用，那么你需要指定一个 id( 也就是，使用Ext. getCmp方法 )。

注意，此id也将被用作组件底层HTML标签的id，这些标签被渲染到页面中。 这将允许你编写基于id的CSS规则，以独立地描述指定的实例；并且，也可以通过 组件父标签的id选中子元素。

注意:为了避免与唯一的id 产生重复， 请参见 itemId 和 ref 。

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

Component
inputType : String
输入栏的类型属性---例如radio,text,password,file(默认为'text')。...
输入栏的类型属性---例如radio,text,password,file(默认为'text')。 'file'和'password'类型通常必须用来渲染那些没有独立Ext组件的表单项类型。 注意，如果你使用inputType:'file'， 那么将不再支持 emptyText 并且应该避免使用。
Field
inputValue : String
值应被创建为输入元素的值的值属性。（默认值为'undefined'）
Checkbox
invalidClass : String
当把表单项标记为非法时所使用的CSS类(默认为'x-form-invalid')
Field
invalidText : String
当把一个表单项标记为非法状态并且没有提供消息时所使用的出错文本...
当把一个表单项标记为非法状态并且没有提供消息时所使用的出错文本 (默认为'The value in this field is invalid')
Field
itemCls : String
注意: 只有在当前组件被渲染到一个使用FormLayout 布局的 容器中时此配置才有效...

注意: 只有在当前组件被渲染到一个使用FormLayout 布局的 容器中时此配置才有效。 (例如Ext.form.FormPanel 或者指定 layout:'form')。

一个附加的CSS类，应用到div上，包装当前field的表单元素。 如果提供了此参数， field级上的itemCls将会覆盖 container级上提供的 默认itemCls。 为itemCls指定的值将会被添加默认的 类('x-form-item')。

既然它被应用到项目的包装器上(参见 Ext.layout.FormLayout。 fieldTpl)， 它将允许你编写能应用到此field、label(如果有指定)、或者field内部任何其它元素的标准CSS规则。

注意: 参考 fieldLabel的注释。 .

示例用法:

// Apply a style to the field's label:
<style>
    .required .x-form-item-label {font-weight:bold;color:red;}
</style>

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Name',
        itemCls: 'required' //this label will be styled
    },{
        xtype: 'textfield',
        fieldLabel: 'Favorite Color'
    }]
});
Component
itemId : String
当没有可利用的对象引用时，itemId可以作为第二选择，用来获得一个组件的引用， 代替 ...

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

var c = new Ext.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'); // 与 Ext.getCmp()不同

p2 = p1.ownerCt.getComponent('p2'); // 通过兄弟对象获得引用

另请参见 id 和 ref 。

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

Component
labelSeparator : String
每个fieldLabel 文本后面现实的分隔符。 此属性可以在多个层次上进行配置...

每个fieldLabel 文本后面现实的分隔符。 此属性可以在多个层次上进行配置。优先顺序为：

  • field / component level
  • container level
  • layout level (默认为冒号 ':')
如不需要为当前field的label显示分隔符，指定一个空字符串''即可。

注意:参见 clearCls 的注释。

另请参见 hideLabel 和 Ext.layout.FormLayout。 fieldTpl。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    layoutConfig: {
        labelSeparator: '~'   // layout config has lowest priority (defaults to ':')
    },
    labelSeparator: '>>',     // config at container level
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Field 1',
        labelSeparator: '...' // field/component level config supersedes others
    },{
        xtype: 'textfield',
        fieldLabel: 'Field 2' // labelSeparator will be '='

    }]
});
Component
labelStyle : String
一个CSS样式描述字符串，它将直接应用到当前field的label上...

一个CSS样式描述字符串，它将直接应用到当前field的label上。 如果有设置，默认为容器的labelStyle值(例如 Ext.layout.FormLayout.labelStyle , 或者 '')。

注意:参见 clearCls 的注释。

另请参见 hideLabel 和 Ext.layout.FormLayout. fieldTpl。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Name',
        labelStyle: 'font-weight:bold;'
    }]
});
Component
listeners : Object
一个包含一个或多个事件处理器的配置对象，会在初始化的时候被添加到目标对象上...

一个包含一个或多个事件处理器的配置对象，会在初始化的时候被添加到目标对象上。 该配置对象应该是一个有效的监听器配置对象就像 addListener例子中指定的一样可一次附加多个处理器。

ExtJs Components上的DOM事件

一些 ExtJs Component 类导出时会选择一些DOM事件(例如 "click", "mouseover" 等等), 这通常只是在有额外的值可以被添加时发生。例如DataView类的 click事件会传递被点击的节点。也可以直接在Component的HTMLElementevent上访问DOM事件，但必需在Component被渲染后监听器才能添加到Element 上。可以按照以下步骤添加插件:

// 插件会用一个监听器配置对象进行配置。
//该组件会被添加到所有处理方法的参数列表上。
Ext.DomObserver = Ext.extend(Object, {
    constructor: function(config) {
        this.listeners = config.listeners ? config.listeners : config;
    },

    // 组件将自己传递进了插件的初始化方法里
    init: function(c) {
        var p, l = this.listeners;
        for (p in l) {
            if (Ext.isFunction(l[p])) {
                l[p] = this.createHandler(l[p], c);
            } else {
                l[p].fn = this.createHandler(l[p].fn, c);
            }
        }

        // 渲染后立即添加监听器到元素上
        c.render = c.render.createSequence(function() {
            var e = c.getEl();
            if (e) {
                e.on(l);
            }
        });
    },

    createHandler: function(fn, c) {
        return function(e) {
            fn.call(this, e, c);
        };
    }
});

var combo = new Ext.form.ComboBox({

    // 元素被点击后折叠
    plugins: [ new Ext.DomObserver({
        click: function(evt, comp) {
            comp.collapse();
        }
    })],
    store: myStore,
    typeAhead: true,
    mode: 'local',
    triggerAction: 'all'
});

Observable
margins : Object
注:此配置只用于该组件展现在一个使用BorderLayout...

注:此配置只用于该组件展现在一个使用BorderLayout 或 BoxLayout的两个子类之一作为布局的容器。

这个margins对象在该组件中的格式为：

{top: (top margin),right: (right margin),bottom: (bottom margin),left: (left margin)}

也可以是一个字符串，中间用空格分隔，margin值为数字。 把matches中每一个值的次序跟CSS中margin值的排列方式相对应：

  • 如果只有一个值，它适用于所有方面。
  • 如果有两个值，top和bottom的边框设置为第一个值，left和right设置为第二个值。
  • 如果有三个值，top设置为第一个值，left和right设置为第二个值，bottom设置为第三个值。
  • 如果有四个值，分别设置为top, right, bottom, left。

默认值:

{top:0, right:0, bottom:0, left:0}
BoxComponent
msgFx : String
实验性参数 当在表单项下显示校验消息时使用的效果(默认为'normal')。
Field
msgTarget : String
通过markInvalid 设置的消息文本应该显示的位置。 必须是如下值之一：...

通过markInvalid 设置的消息文本应该显示的位置。 必须是如下值之一：

  • qtip 当用户鼠标滑过表单项时，显示一个包含消息的快速提示。 这是默认情况。
    为了使此参数能工作，必须调用 Ext.QuickTips.init。
  • title 在弹出的默认浏览器标题属性上显示消息。
  • under 在表单项之下添加一块div，包含出错消息。
  • side 在表单项右边添加一个出错图标，当鼠标滑过时弹出并显示一个消息。
  • [element id] 在指定元素的innerHTML中直接添加出错消息。
Field
name : String
表单项的HTML name属性(默认为'')。 注意: 如果需要当前表单项自动被包含在...
表单项的HTML name属性(默认为'')。 注意: 如果需要当前表单项自动被包含在 form submit()中，必须设置此参数。
Field
overCls : String
一个可选的额外的CSS类，它将在鼠标移过元素时被添加到组件上...
一个可选的额外的CSS类，它将在鼠标移过元素时被添加到组件上，鼠标移出时 删除。(默认为'')。此属性对于在组件上，或者它的任何使用标准CSS规则的孩子节点上， 添加定制的'active' 或者 'hover'样式非常有用。
Component
pageX : Number
如果该组件被包含在一个指定位置的容器中，这个值表示页面级的x坐标值（译者注：在有滚动条的情况下这个值很有用）。
BoxComponent
pageY : Number
如果该组件被包含在一个指定位置的容器中，这个值表示页面级的y坐标值（译者注：在有滚动条的情况下这个值很有用）。
BoxComponent
plugins : Object/Array
一个对象或者一个对象数组，为组件提供特殊的功能 ...
一个对象或者一个对象数组，为组件提供特殊的功能。 对一个合法的插件唯一的要求是它含有一个init()方法， 能接收一个Ext.Component型的参数。 当组件被创建时，如果有可用的插件，组件将会调用每个插件的init方法， 并将自身的引用作为方法参数传递给它。然后，每个插件就可以调用方法或者响应组件上的事件， 就像需要的那样提供自己的功能。
Component
preventMark : Boolean
true将会禁止 把表单项标记为非法。默认为false.
Field
ptype : String
需要创建配置的ptype。 当传递一个配置对象给构造函数时...
需要创建配置的ptype。 当传递一个配置对象给构造函数时，此配置选项不会被使用。 只有在使用懒初始化的时候此配置项才会被使用， 此时Plugin不是 通过一个完整的实例组件，而是通过一个Component配置指定的。 在渲染时，将会查找ptype以决定创建何种类型的Plugin。

如果你创建自己的Plugin，你可以通过 Ext.ComponentMgr.registerPlugin 对它们进行注册，以便能利用懒初始化和渲染机制。
Component
readOnly : Boolean
将会把表单项标记为在HTML中只读(readOnly)(默认为false)...
true 将会把表单项标记为在HTML中只读(readOnly)(默认为false)。

Note: 这仅仅设置元素的readOnly DOM参数。 例如，设置 readOnly=true ，将不会禁用触发ComboBox或者DateField； 这为你提供了一个选项，可以强制用户通过触发按钮选择一个值，而不是 在文本框进行输入。 使用 hideTrigger 可以隐藏触发按钮。

Field
ref : String
一个路径描述，与组件的 ownerCt 相关，它描述了把当前组件的命名引用放置到哪个父容器中去。...

一个路径描述，与组件的 ownerCt 相关，它描述了把当前组件的命名引用放置到哪个父容器中去。

祖先的坐标路径可以通过'/'字符进行分隔。 例如，将一个Toolbar Button的引用放入 拥有此Toolbar的Panel中:

var myGrid = new Ext.grid.EditorGridPanel({
    title: 'My EditorGridPanel',
    store: myStore,
    colModel: myColModel,
    tbar: [{
        text: 'Save',
        handler: saveChanges,
        disabled: true,
        ref: '../saveButton'
    }],
    listeners: {
        afteredit: function() {
//          The button reference is in the GridPanel
            myGrid.saveButton.enable();
        }
    }
});

在上面的代码中，如果 ref 是 'saveButton' ，那么引用将会被放置到Toolbar中。 ref 中的每个'/' 都会从组件的 ownerCt 向上移动一级。

另请参见 added 和 removed 事件。

Component
region : String
注: 此配置只用于该组件展现在一个布局为BorderLayout的容器中...

注: 此配置只用于该组件展现在一个布局为BorderLayout的容器中(例如指定layout:'border')。

详见Ext.layout.BorderLayout。

BoxComponent
renderTo : Mixed
该值可以是一个节点的id、一个DOM节点或者一个已存在的元素...

该值可以是一个节点的id、一个DOM节点或者一个已存在的元素， 组件将会被渲染到其中。

  • 注意 :
      如果组件不是一个Container 的子项目时， 不要使用此选项。 渲染和管理它的子项目是一个Container 的layout manager的责任。
      当使用此配置项时，无需调用render()方法。

另请参见 render 。

Component
scope : Object
一个对象 handler(处理) 方法 的使用范围('this' 引用)(默认为复选框对象范围)。
Checkbox
stateEvents : Array
一个事件数组，当它们被触发时，组件需要保存自己的状态(默认值为 none)...

一个事件数组，当它们被触发时，组件需要保存自己的状态(默认值为 none)。 它们可以是任何该组件支持的事件类型，包括浏览器事件和 自定义事件(例如['click', 'customerchange'])。

对于保存和恢复组件状态的详细解释，参见 stateful

Component
stateId : String
为该组件指定的唯一的id值，它被用作管理组件状态的目的...
为该组件指定的唯一的id值，它被用作管理组件状态的目的。 (如果设定了id，默认值为组件自己的id，否则，如果组件使用自动生成的id，此值为null)。

对于保存和反解析组件状态的解释，参见 stateful 。

Component
stateful : Boolean
一个标志参数，它将引起组件在启动时尝试从一个保存的状态中恢复内部状态参数...

一个标志参数，它将引起组件在启动时尝试从一个保存的状态中恢复内部状态参数。 组件必须要么拥有一个 stateId 或者 id ，它们被分配给需要被管理的状态属性。 在跨页面加载时，不保证自动生成的id属性的稳定性， 并且，不能依赖此id来保存和恢复一个组件的相同状态。

为了保存状态的操作能够工作，状态管理器的提供者必须 被设置成一个Ext.state.Provider 的实现类，它覆盖了set 和get 方法，以便保存和恢复name/value对。 有一个内置的Ext.state.CookieProvider 可用。

为当前页面设置状态提供者:

Ext.state.Manager.setProvider(new Ext.state.CookieProvider({
    expires: new Date(new Date().getTime()+(1000*60*60*24*7)), //7 days from now
}));

当 stateEvents 配置项中其中之一的事件被触发时， 一个状态可保存的组件将试图保存其状态。

保存状态时，一个可保存状态的组件首先需要通过调用 getState 方法来序列化它的状态。 默认情况下，此函数什么事都不做。 开发者必须提供一个实现，返回一个hash对象，它描述了组件可恢复的状态。

getState方法产生的值将会传递给 Ext.state.Manager.set 方法，它使用配置的 Ext.state.Provider 来保存对象，以组件的 stateId 为key，或者，如果此值（指stateId）没有指定时， 使用它的 id 作为key。

在进行构造时，一个可保存状态的组件试图通过调用 Ext.state.Manager.get方法来 恢复它的状态，传递 stateId 或者，如果此值（指stateId）没有指定时， 使用它的 id 作为参数。

结果对象被传递给 applyState 。 applyState 的默认实现只是简单地把属性拷贝到对象中， 但是开发者可以覆盖此方法以支持更多行为。

通过向 beforestaterestore, staterestore, beforestatesave 和 statesave 事件上绑定监听器，你可以在保存和恢复状态时进行额外的处理。

Component
style : String
被添加到组件元素的特定样式。 必须是按照...
被添加到组件元素的特定样式。 必须是按照 Ext.Element.applyStyles 类指定格式的合法参数值。

new Ext.Panel({
    title: 'Some Title',
    renderTo: Ext.getBody(),
    width: 400, height: 300,
    layout: 'form',
    items: [{
        xtype: 'textarea',
        style: {
            width: '95%',
            marginBottom: '10px'
        }
    },
        new Ext.Button({
            text: 'Send',
            minWidth: '100',
            style: {
                marginBottom: '10px'
            }
        })
    ]
});
Component
submitValue : Boolean
False将会清除表单项的name属性，这样在提交表单时它将不会被提交。 默认为true。
Field
tabIndex : Number
该表单项的tabIndex。 注意，此属性仅仅应用到被渲染好的，而不是那些通过applyTo...
该表单项的tabIndex。 注意，此属性仅仅应用到被渲染好的，而不是那些通过applyTo创建的表单项 (默认为undefined)。
Field
tabTip : String
注: 这个配置只用于当该组件作为TabPanel的一个子项目时使用...

注: 这个配置只用于当该组件作为TabPanel的一个子项目时使用。

一个String类型的innerHTML(支持html标签)，当鼠标放在该选项上的时，显示一个tooltip。为了tips能够被渲染，Ext.QuickTips.init()必须被提前调用。
BoxComponent
tpl : Mixed
一个 Ext.Template , Ext.XTemplate 或者一个用来形成一个Ext.XTemplate的字符串数组...
一个 Ext.Template , Ext.XTemplate 或者一个用来形成一个Ext.XTemplate的字符串数组。 与 data 和 tplWriteMode 配置项协同使用。
Component
tplWriteMode : String
刷新组件的内容区域时使用的Ext.(X)Template方式。 默认为'overwrite' (参见 Ext.XTemplate.overwrite )。
刷新组件的内容区域时使用的Ext.(X)Template方式。 默认为'overwrite' (参见 Ext.XTemplate.overwrite )。
Component
validateOnBlur : Boolean
在表单项失去焦点时是否进行校验(默认为 true)。
Field
validationDelay : Number
在用户开始输入到校验操作开始之间的时长毫秒数 (默认为250)
Field
validationEvent : String/Boolean
引发表单项进行校验操作的事件。 设置为false可以禁用自动校验 (默认为'keyup')。
引发表单项进行校验操作的事件。 设置为false可以禁用自动校验 (默认为'keyup')。
Field
value : Mixed
当前表单项的初始化值(默认为undefined).
Field
width : Number
组件的宽度(默认值为 auto)。注:如果想使用百分比的方式...
组件的宽度(默认值为 auto)。注:如果想使用百分比的方式来设置值，请查看 Ext.Component.anchor。
BoxComponent
x : Number
如果被包含在一个指定位置的容器中，这个值表示x(left)坐标值。
BoxComponent
xtype : String
需要创建配置的xtype。 当传递一个配置对象给构造函数时...
需要创建配置的xtype。 当传递一个配置对象给构造函数时，此配置选项不会被使用。 只有在使用懒初始化的时候此配置项才会被使用，此时容器的子项目不是 通过一个完整的实例组件，而是通过一个Component配置指定的。 在渲染时，将会查找xtype以决定创建何种类型的子组件。

预定义的xtype列表如下： here。

如果你继承Component创建你自己的组件，你需要使用Ext.ComponentMgr.registerType 对它们进行注册，以便利用懒初始化和渲染机制。
Component
y : Number
如果被包含在一个指定位置的容器中，这个值表示y(top)坐标值。
BoxComponent

公共属性

Property Defined By
disabled : Boolean
当前组件处于无效状态时为true。 Read-only.
Component
el : Ext.Element
封装了当前组件的Ext.Element。 Read-only。通常情况下，这将是一个<DIV>元素，它由此类的...

封装了当前组件的Ext.Element。 Read-only。

通常情况下，这将是一个<DIV>元素，它由此类的 onRender方法创建，但是它可以通过使用 autoEl 配置项进行覆盖。

注意: 直到组件渲染完成此元素都将处于无效状态。

如需向当前组件的 DOM事件(而不是当前组件自己的Observable事件)添加监听器， 更多建议，参见 listeners 配置项，或者直接使用一个render监听器:

new Ext.Panel({
    title: 'The Clickable Panel',
    listeners: {
        render: function(p) {
            // Append the Panel to the click handler's argument list.
            p.getEl().on('click', handlePanelClick.createDelegate(null, [p], true));
        },
        single: true  // Remove the listener after first invocation
    }
});

另请参见 getEl

Component
hidden : Boolean
如果当前组件处于隐藏状态，此值为true。Read-only。
Component
initialConfig : Object
当前组件的初始化配置描述。 Read-only。
Component
label : Ext.Element
关联到当前表单项的label元素。 只有在当前表单项已经被一个Ext.layout.FormLayout ...

关联到当前表单项的label元素。 只有在当前表单项已经被一个Ext.layout.FormLayout 布局管理器渲染之后才可用。

Field
originalValue : mixed
表单项原来的值，它是在value 中配置的；或者，如果 trackResetOnLoad 设置为...
表单项原来的值，它是在value 中配置的；或者，如果 trackResetOnLoad 设置为 true 时，通过表单加载操作最后一次加载的。
Field
ownerCt : Ext.Container
组件所属的Container (默认为undefined，当前组件被添加到一个容器中时此值被自动设置)...
组件所属的Container (默认为undefined，当前组件被添加到一个容器中时此值被自动设置)。 Read-only。

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

Component
refOwner : Ext.Container
如果当前组件是一个容器的孩子，并且是通过一个 ref 配置项被注册的，则此值为 ref 引用被插入到的祖先容器。
如果当前组件是一个容器的孩子，并且是通过一个 ref 配置项被注册的，则此值为 ref 引用被插入到的祖先容器。
Component
rendered : Boolean
如果当前组件已经被渲染了，此值为true。Read-only.
Component
startValue : mixed
表单项最后一次获得焦点时所拥有的值。 这就是传递给change 事件的值...

表单项最后一次获得焦点时所拥有的值。 这就是传递给change 事件的值，此事件在值被改变并失去焦点时触发。

直到表单项被访问之前此值都是undefined 与originalValue 进行比较。

Field

公共方法

Method Defined By
Checkbox ( Object config )
创建一个新的复选框。
创建一个新的复选框。
参数:
  • config : Object
    配置选项
返回值:
  • void
Checkbox
addClass ( string cls ) : Ext.Component
为组件底层的元素添加CSS样式。
为组件底层的元素添加CSS样式。
参数:
  • cls : string
    需要添加的CSS样式的class名称
返回值:
  • Ext.Component
    this
Component
addEvents( Object|String o, string Optional. ) : void
添加指定的事件到事件列表上，事件会被该Observable触发。
添加指定的事件到事件列表上，事件会被该Observable触发。
参数:
  • o : Object|String
    以事件名作为属性true作为值的对象 或者当多个事件名被分开的传递时则为第一个事件名。
  • Optional. : string
    事件名被分开的传递时则为事件名。 用法:
    this.addEvents('storeloaded', 'storecleared');
返回值:
  • void
Observable
addListener( String eventName, Function handler, [Object scope], [Object options] ) : void
给对象添加事件处理器。
给对象添加事件处理器。
参数:
  • eventName : String
    监听的事件名。
  • handler : Function
    事件调用的方法
  • scope : Object
    （可选）处理方法执行的作用域 (this的引用 reference)。 如果被忽略。默认为触发事件的对象。
  • options : Object
    （可选）包含处理器配置和属性的对象。 可能包含以下的属性:
    • scope : Object
      处理方法执行的作用域(this的引用) 。 如果被忽略。默认为触发事件的对象。
    • delay : Number
      在触发事件后延迟调用处理器的毫秒数。
    • single : Boolean
      如果为True则添加一个处理器来处理下一次的事件触发（仅一次），然后移除自己。
    • buffer : Number
      使得处理器延迟指定毫秒数后预定的运行在 一个Ext.util.DelayedTask中 。 如果事件在时间内再一次被触发，原始的处理器不会被调用，但是新的处理器会预定的在他的位置上。
    • target : Observable
      如果事件在目标的Observable上触发则仅仅调用处理器， 否则 事件会从子类的Observable上冒泡

    组合选项
    使用这些选项参数,可能会组合出不同类型的监听器：

    一个延迟的，一次性的监听器。

    myDataView.on('click', this.onClick, this, {
single: true,
delay: 100
});

    一次调用附加多个处理器
    该方法同样支持传递一个包含指定的多个处理器的属性的配置对象参数。

    myGridPanel.on({
'click' : {
    fn: this.onClick,
    scope: this,
    delay: 100
},
'mouseover' : {
    fn: this.onMouseOver,
    scope: this
},
'mouseout' : {
    fn: this.onMouseOut,
    scope: this
}
});

    或者一个简写的语法：

    myGridPanel.on({
'click' : this.onClick,
'mouseover' : this.onMouseOver,
'mouseout' : this.onMouseOut,
 scope: this
});
返回值:
  • void
Observable
applyToMarkup ( String/HTMLElement el ) : void
将此组件添加到已存在的有效的HTML标签中。 使用该方法时，无需再调用render()方法。
将此组件添加到已存在的有效的HTML标签中。 使用该方法时，无需再调用render()方法。
参数:
  • el : String/HTMLElement
返回值:
  • void
Component
cloneConfig ( Object overrides ) : Ext.Component
默认使用原先传递给当前实例的配置值克隆当前组件。
默认使用原先传递给当前实例的配置值克隆当前组件。
参数:
  • overrides : Object
    一个新的配置项，包含需要覆盖到克隆版本的所有属性。 可以传递一个id参数给此对象，否则将自动生成一个新的id以避免发生重复。
返回值:
  • Ext.Component
    当前组件的克隆副本
Component
destroy () : void
通过如下方法销毁对象：删除所有的事件监听器、将组件的元素从DOM树中删除...
通过如下方法销毁对象：删除所有的事件监听器、将组件的元素从DOM树中删除（如果可以）、 将组件从它的 Ext.Container（如果可用）中删除、 并且将它从Ext.ComponentMgr中 注销。 销毁操作一般由框架自动完成，一般情况下不需要直接调用该方法。
参数:
  • 无。
返回值:
  • void
Component
disable () : Ext.Component
将组件置为无效状态，并出发'disable'事件。
将组件置为无效状态，并出发'disable'事件。
参数:
  • 无。
返回值:
  • Ext.Component
    this
Component
enable () : Ext.Component
将组件置为有效状态并触发'enable'事件。
将组件置为有效状态并触发'enable'事件。
参数:
  • 无。
返回值:
  • Ext.Component
    this
Component
enableBubble( String/Array events ) :void
是否现在使得事件会被该Observable触发并调用 this.getBubbleTarget()方法在拥有者的继承树...

是否现在使得事件会被该Observable触发并调用 this.getBubbleTarget()方法在拥有者的继承树中冒泡。Observable的基础类中没有该方法的实现。

该方法一般被Ext.Components用来冒泡事件到拥有者的容器。参看Ext.Component.getBubbleTarget默认的实现 在Ext.Component中返回组件的直接拥有者。但是如果需要的是一个已知的目标，该方法可以被重写来更快的访问需求的目标。

例子:

Ext.override(Ext.form.Field, {
    // 添加方法到Field的initComponent上改变事件为冒泡
    initComponent : Ext.form.Field.prototype.initComponent.createSequence(function() {
        this.enableBubble('change');
    }),

    // 我们知道我们想让Field的事件冒泡到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() {
            // 如果样式被修改标题会变红。
            myForm.header.setStyle('color', 'red');
        }
    }
});
参数:
  • events : String/Array
    冒泡的事件名，或事件名数组
返回值:
  • void
Observable
findParentBy ( Function fn ) : Ext.Container
通过自定义的函数查找当前组件上层任何层次上的容器...
通过自定义的函数查找当前组件上层任何层次上的容器。 如果传递的函数返回true，容器对象将被返回。
参数:
  • fn : Function
    自定义的函数，使用如下参数调用(container,this component)。
返回值:
  • Ext.Container
    自定义函数返回true的第一个容器
Component
findParentByType ( String/Class xtype ) : Ext.Container
通过xtype或者class查找当前组件上层任何层次上的容器
通过xtype或者class查找当前组件上层任何层次上的容器
参数:
  • xtype : String/Class
    组件的xtype字符串，或者直接是组件的class
返回值:
  • Ext.Container
    符合指定xtype或者class的第一个容器
Component
fireEvent( String eventName, Object... args ) : Boolean
用传入的参数触发指定的事件 (减去事件名)。 一个事件可以被设置为冒泡 Obse...

用传入的参数触发指定的事件 (减去事件名)。

一个事件可以被设置为冒泡到Observable父类继承树(参看 Ext.Component.getBubbleTarget) 调用enableBubble实现。

参数:
  • eventName : String
    触发的事件名。
  • args : Object...
    传递给处理器的可变长度参数。
返回值:
  • Boolean
    如果有任何的处理器返回false则返回false，否则返回true。
Observable
focus ( [ Boolean selectText ], [ Boolean/Number delay ] ) : Ext.Component
尝试将当前组件设为焦点。
尝试将当前组件设为焦点。
参数:
  • selectText : Boolean
    (可选) 如果可用，同时选中组件内部的文本
  • delay : Boolean/Number
    (可选)将当前组件设置为焦点的延迟时间(设置为true等于0毫秒)
返回值:
  • Ext.Component
    this
Component
getActiveError () : String
获取当前表单项活动的出错消息。
获取当前表单项活动的出错消息。
参数:
  • 无。
返回值:
  • String
    返回表单项上活动的出错消息，如果没有错误，返回一个空字符串。
Field
getBox ( [ Boolean local ] ) : Object
获取组件底层元素当前盒子模型的尺寸。（译者注：盒子模型是CSS术语，详细解释请自行搜索。）
获取组件底层元素当前盒子模型的尺寸。（译者注：盒子模型是CSS术语，详细解释请自行搜索。）
参数:
  • local : Boolean
    (可选)值为true时，组件的left值和top值将代替页面的XY被返回。(默认值为false)
返回值:
  • Object
    返回值的格式{x, y, width, height}
BoxComponent
getBubbleTarget () : Ext.Container
为Observable的fireEvent方法提供链接，它沿着继承结构进行冒泡操作。
为Observable的fireEvent方法提供链接，它沿着继承结构进行冒泡操作。
参数:
  • 无。
返回值:
  • Ext.Container
    拥有当前组件的容器。
Component
getEl () : Ext.Element
返回 Ext.Element ，它包装了当前组件。...

返回 Ext.Element ，它包装了当前组件。

通常情况下，这将是一个<DIV>元素，它是由该类的onRender方法创建的， 但是可以使用autoEl配置项 覆盖它。

注意: 此元素将会一直处于无效状态直到当前组件渲染完成。

如需向当前组件的 DOM事件(而不是当前组件自己的Observable事件)添加监听器， 更多建议，参见 listeners 配置项，或者直接使用一个render监听器:

new Ext.Panel({
    title: 'The Clickable Panel',
    listeners: {
        render: function(p) {
            // Append the Panel to the click handler's argument list.
            p.getEl().on('click', handlePanelClick.createDelegate(null, [p], true));
        },
        single: true  // Remove the listener after first invocation
    }
});
参数:
  • 无。
返回值:
  • Ext.Element
    包装当前组件的元素。
Component
getErrors () : Array
运行当前表单项的校验器并返回一个所有校验错误信息数组。 此方法在校验期间在内部调用并且一般情况下...
运行当前表单项的校验器并返回一个所有校验错误信息数组。 此方法在校验期间在内部调用并且一般情况下不需要手工调用。 每个子类都应该重写或者增加返回值以提供它们自己的出错消息
参数:
  • 无。
返回值:
  • Array
    当前表单项的所有出错消息
Field
getHeight () : Number
获取该组件的当前高度值。
获取该组件的当前高度值。
参数:
  • 无。
返回值:
  • Number
BoxComponent
getId () : String
返回当前组件的id，如果没有定义id，则自动生成并返回一个id:'ext-comp-'...
返回当前组件的 id 如果没有定义 id 则自动生成并返回一个 id

'ext-comp-' + (++Ext.Component.AUTO_ID)
参数:
  • 无。
返回值:
  • String
    id
Component
getItemId () : String
返回当前组件的 itemId 。 如果没有通过配置参数指定 itemId 那么，将会使用...
返回当前组件的 itemId 。 如果没有通过配置参数指定 itemId 那么，将会使用 getId 返回 id 。
参数:
  • 无。
返回值:
  • String
Component
getName () : String
如果可用，返回表单项的 name 或者 hiddenName 属性。
如果可用，返回表单项的 name 或者 hiddenName 属性。
参数:
  • 无。
返回值:
  • String
    name 表单项的{@link Ext.form.Field#name name}或者{@link Ext.form.ComboBox#hiddenName hiddenName}
Field
getOuterSize () : Object
获取当前组件所在元素的尺寸大小，包括边缘的空白处。
获取当前组件所在元素的尺寸大小，包括边缘的空白处。
参数:
  • 无。
返回值:
  • Object
    一个包含元素大小的对象 {width: (element width + left/right margins), height: (element height + top/bottom margins)}
BoxComponent
getPosition ( [ Boolean local ] ) : Array
获取组件底层元素当前的XY位置。
获取组件底层元素当前的XY位置。
参数:
  • local : Boolean
    (可选)如果为true，将返回元素的left和top值，而不是相对于页面内的 XY。(默认值为 false)
返回值:
  • Array
    元素的XY位置值(例如：[100, 200])
BoxComponent
getRawValue () : Mixed
返回原始数据值，可能不是一个合法的、已定义的值。 返回格式化的值参见...
返回原始数据值，可能不是一个合法的、已定义的值。 返回格式化的值参见 getValue。
参数:
  • 无。
返回值:
  • Mixed
    value 表单项的值
Field
getResizeEl () : Ext.Element
返回该组件的最外层用来定义这些组件整体大小的Element...

返回该组件的最外层用来定义这些组件整体大小的Element对象。

通常用 getEl 方法将会返回相同的Element对象，但在有些情况下，组件可能有一些更多的封装了它的主要动态Element对象的Element对象。

例如ComboBox。它是封装在一个包含<input>元素的包装元素里(这将返回其 getEl方法和触发按钮的元素)。返回的元素为resizeEl。

参数:
  • 无。
返回值:
  • Ext.Element
    The Element which is to be resized by size managing layouts.
BoxComponent
getSize () : Object
获取组件底层元素当前的大小。
获取组件底层元素当前的大小。
参数:
  • 无。
返回值:
  • Object
    一个包含元素大小的对象{width: (element width), height: (element height)}
BoxComponent
getValue () : Boolean
返回复选框的选中状态。
返回复选框的选中状态。
参数:
  • 无。
返回值:
  • Boolean
    如果选中返回true，否则返回false。
Checkbox
getWidth () : Number
获取该组件的当前宽度值。
获取该组件的当前宽度值。
参数:
  • 无。
返回值:
  • Number
BoxComponent
getXType () : String
获取当前组件的xtype，它是用 Ext.ComponentMgr 注册的。 所有可用的xtype列表，参见...
获取当前组件的xtype，它是用 Ext.ComponentMgr 注册的。 所有可用的xtype列表，参见 Ext.Component 类头部。示例用法:

var t = new Ext.form.TextField();
alert(t.getXType());  // alerts 'textfield'
参数:
  • 无。
返回值:
  • String
    The xtype
Component
getXTypes () : String
返回此组件的xtype继承树，用字符'-'分隔。 所有可用的xtype值...

返回此组件的xtype继承树，用字符'-'分隔。 所有可用的xtype值，请参见Ext.Component 类的头部。

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

示例用法:

var t = new Ext.form.TextField();
alert(t.getXTypes());  // alerts 'component/box/field/textfield'
参数:
  • 无。
返回值:
  • String
    xtype层次字符串
Component
hasListener( String eventName ) : Boolean
检测对象是否包含指定事件的任何监听器
检测对象是否包含指定事件的任何监听器
参数:
  • eventName : String
    检测的事件名
返回值:
  • Boolean
    如果事件被监听则为true，否则为false
Observable
hide () : Ext.Component
隐藏当前组件。 监听 beforehide' 事件并且返回false 可以取消隐藏组件的操作。 在隐藏组件之后触发...
隐藏当前组件。 监听 beforehide' 事件并且返回false 可以取消隐藏组件的操作。 在隐藏组件之后触发 ' hide' 事件。 如果组件被配置成 hidden 那么此方法在内部被调用。
参数:
  • 无。
返回值:
  • Ext.Component
    this
Component
isDirty () : Boolean
如果此表单项的值与原始值相比发生了改变，返回true。 如果表单项...

如果此表单项的值与原始值相比发生了改变，返回true。 如果表单项被禁用或者尚未被渲染将会返回false。

注意，如果所属的 form 配置了一个Ext.form.BasicForm， 那么在使用Ext.form.BasicForm. setValues 加载值之后，原始值将会被更新。

参数:
  • 无。
返回值:
  • Boolean
    如果此表单项的值与原始值相比发生了改变(并且没有被禁用)，返回true，其它返回false。
Field
isValid ( Boolean preventMark ) : Boolean
通过 校验 表单项 处理后的值 ，返回表单项当前值是否合法。...
通过 校验 表单项 处理后的值 ，返回表单项当前值是否合法。 注意: disabled 的表单项将会被忽略。
参数:
  • preventMark : Boolean
    True将会禁止把表单项标记为非法
返回值:
  • Boolean
    如果值是合法的，为true，其它为false
Field
isVisible () : Boolean
如果当前组件可见，返回true。
如果当前组件可见，返回true。
参数:
  • 无。
返回值:
  • Boolean
    如果当前组件可见，返回true，其它返回false。
Component
isXType ( String xtype , [ Boolean shallow ] ) : Boolean
Tests whether or not this Component is of a specific xtype. This can test whether this Component is descended from th...

测试此组件是否是指定的xtype。此方法既可以测试是否是指定的xtype的某个子类， 或者它是否直接是指定的xtype类(shallow=true)。

如果使用你自己的子类，必须知道组件必须注册它的xtype值。

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

示例用法:

var t = new Ext.form.TextField();
var isText = t.isXType('textfield');        // true
var isBoxSubclass = t.isXType('box');       // true, descended from BoxComponent
var isBoxInstance = t.isXType('box', true); // false, not a direct BoxComponent instance
参数:
  • xtype : String
    需要为当前组件进行检测的xtype
  • shallow : Boolean
    (可选) 如果为false，检测组件是否是xtype继承树中的某个子类（默认是这种情况）， 如果为true，只检测组件是否是指定的xtype类型。
返回值:
  • Boolean
    如果当前组件是指定xtype的子类，返回true，其它返回flase。
Component
mon ( Observable|Element item , Object|String ename , Function fn , Object scope , Object opt ) : void
向任何Observable对象(或者元素)上添加监听器，监听器将会在组件...

向任何Observable对象(或者元素)上添加监听器，监听器将会在组件销毁时被自动删除。
用法：

myGridPanel.mon(myGridPanel.getSelectionModel(), 'selectionchange', handleSelectionChange, null, {buffer: 50});

or:

myGridPanel.mon(myGridPanel.getSelectionModel(), {
    selectionchange: handleSelectionChange,
    buffer: 50
});
参数:
  • item : Observable|Element
    需要添加listener/listeners的项目。
  • ename : Object|String
    事件名，或者一个包含事件名属性的对象。
  • fn : Function
    (可选) 如果 ename 参数是一个事件名，此参数为处理函数。
  • scope : Object
    (可选)如果 ename 参数是一个事件名称，此参数是作用域 ( this 引用)，监听函数将会在此作用域中被执行。
  • opt : Object
    (可选)如果 ename 参数是一个事件名称， 此参数是 addListener 配置项。
返回值:
  • void
Component
mun ( Observable|Element item , Object|String ename , Function fn , Object scope ) : void
删除通过mon 方法添加的监听器。
删除通过mon 方法添加的监听器。
参数:
  • item : Observable|Element
    需要删除listener/listeners的项目。
  • ename : Object|String
    事件名称，或者一个包含事件名称属性的对象。
  • fn : Function
    (可选)如果 ename 参数是一个事件名称，此参数是一个处理函数。
  • scope : Object
    (可选)如果 ename 参数是一个事件名称，此参数是作用域 ( this 引用)，监听函数将会在此作用域中被执行。
返回值:
  • void
Component
nextSibling () : Ext.Component
返回所属容器中的下一个组件
返回所属容器中的下一个组件
参数:
  • 无。
返回值:
  • Ext.Component
Component
on( String eventName, Function handler, [Object scope], [Object options] ) : void
给对象添加事件处理器 (addListener的简写形式)
给对象添加事件处理器 (addListener的简写形式。)
参数:
  • eventName : String
    监听的事件类型
  • handler : Function
    事件调用的方法
  • scope : Object
    （可选）处理方法执行时的作用域 (this 的引用)。 如果被忽略。默认为触发事件的对象。
  • options : Object
    可选 包含处理器配置的对象。
返回值:
  • void
Observable
previousSibling () : Ext.Component
返回所属容器中的前一个组件
返回所属容器中的前一个组件
参数:
  • 无。
返回值:
  • Ext.Component
Component
processValue ( Mixed value ) : void
仅仅在需要准备原始值供校验时，才需要覆盖此方法(参见 validate和 isValid)。...
仅仅在需要准备原始值供校验时，才需要覆盖此方法(参见 validate和 isValid)。 此方法被期望为表单项返回处理后的值，此值将会被用来进行校验 (参见validateValue方法)。
参数:
  • value : Mixed
返回值:
  • void
Field
purgeListeners() : void
移除对象上所有的监听器
移除对象上所有的监听器
参数:
  • 无。
返回值:
  • void
Observable
relayEvents( Object o, Array events ) : void
从指定的Observable上传递选择的事件就好像被当前对象触发一样。
从指定的Observable上传递选择的事件就好像被当前对象触发一样。
参数:
  • o : Object
    该Observable上的事件被当前对象传递。
  • events : Array
    传递的数组名。
返回值:
  • void
Observable
removeClass ( string cls ) : Ext.Component
从组件底层的元素上删除一个CSS类。
从组件底层的元素上删除一个CSS类。
参数:
  • cls : string
    需要移除的CSS类名
返回值:
  • Ext.Component
    this
Component
removeListener( String eventName, Function handler, [Object scope] ) : void
删除一个事件处理器。
删除一个事件处理器。
参数:
  • eventName : String
    处理器关联的事件类型。
  • handler : Function
    移除的处理器。 这应该是传递到addListener里的方法的引用。
  • scope : Object
    （可选）处理器指定的初始作用域。
返回值:
  • void
Observable
render ( [ Element/HTMLElement/String container ], [ String/Number position ] ) : void
在传递进来的HTML元素中渲染当前组件。...

在传递进来的HTML元素中渲染当前组件。

如果你正在使用一个Container 对象放置当前组件，那么请不要使用render方法。

当容器第一次被渲染时，它的子组件将会被容器的 layout 管理器渲染。

某些布局管理器允许动态添加子组件。它们包括 Ext.layout.CardLayout, Ext.layout.AnchorLayout, Ext.layout.FormLayout, Ext.layout.TableLayout。

当一个新的子组件被添加时，如果容器已经被渲染了， 你可能需要调用容器的 doLayout 方法来刷新视图，它将导致所有没有被渲染的子组件进行渲染操作。 此操作是必须的，这样你可以添加多个子组件而只刷新一次layout。

当创建复杂的UI时，非常重要的一点是，请记住调整子项目的尺寸和位置是容器的 layout 管理器的职责。 如果你希望子项目的尺寸对用户交互作出反应， 你必须为容器配置一个布局管理器，它将创建和管理你心里想要的那种布局。

忽略容器的layout 配置意味着将会使用一个基本的布局管理器，它除了按次序把子组件 渲染到容器中之外什么事情都不做。 这种情况下，任何尺寸和位置的调整操作都不会发生。

参数:
  • container : Element/HTMLElement/String
    (可选) 需要在其中渲染当前组件的元素。 如果它是从一个已存在的标签中创建的，此参数应该被忽略。
  • position : String/Number
    (可选) 容器中的一个元素ID或者一个DOM节点索引， 当前组件将会被插入到它前面 (默认append到容器的尾部)
返回值:
  • void
Component
reset () : void
将表单项的当前值重置为以前加载时的值，并且清除所有校验信息。...
将表单项的当前值重置为以前加载时的值，并且清除所有校验信息。 参见Ext.form.BasicForm. trackResetOnLoad 。
参数:
  • 无。
返回值:
  • void
Field
resumeEvents() : void
重新开始触发事件。(参见suspendEvents) 如果事件以queueSuspended参数被挂起，则在事件被挂起时 ...
重新开始触发事件。(参见 suspendEvents) 如果事件以queueSuspended 参数被挂起，则在事件被挂起时触发的事件会被传递到所有的监听器上
参数:
  • 无。
返回值:
  • void
Observable
setActiveError ( String msg , Boolean suppressEvent ) : void
将当前activeError设置为所给的字符串。 触发'invalid'事件。这不会设置出错图标...
将当前activeError设置为所给的字符串。 触发'invalid'事件。这不会设置出错图标，仅仅设置消息并触发事件。 如需显示出错图标，可使用markInvalid代替，它将在内部调用此方法。
参数:
  • msg : String
    出错消息
  • suppressEvent : Boolean
    True将会禁止触发'invalid'事件
返回值:
  • void
Field
setAutoScroll ( Boolean scroll ) : Ext.BoxComponent
设置该组件内容溢出时是否自动显示滚动条。
设置该组件内容溢出时是否自动显示滚动条。
参数:
  • scroll : Boolean
    值为true的话组件自动显示滚动条。
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setDisabled ( Boolean disabled ) : Ext.Component
工具函数，使用布尔值设置有效/无效(disabled/enabled )。
工具函数，使用布尔值设置有效/无效(disabled/enabled )。
参数:
  • disabled : Boolean
返回值:
  • Ext.Component
    this
Component
setHeight ( Mixed height ) : Ext.BoxComponent
设置此组件的高度。该方法将触发resize事件。
设置此组件的高度。该方法将触发resize事件。
参数:
  • height : Mixed
    The new height to set.
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setPagePosition ( Number x , Number y ) : Ext.BoxComponent
设置组件在页面中的XY位置。 如果需要设置left和top值 ，请使用...
设置组件在页面中的XY位置。 如果需要设置left和top值 ，请使用setPosition方法。 该方法触发move事件。
参数:
  • x : Number
    The new x position
  • y : Number
    The new y position
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setPosition ( Number left , Number top ) : Ext.BoxComponent
设置组件的left和top值。设置组件的页面XY值，请使用setPagePosition方法。该方法触发...
设置组件的left和top值。设置组件的页面XY值，请使用setPagePosition方法。该方法触发move事件。
参数:
  • left : Number
    The new left
  • top : Number
    The new top
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setRawValue ( Mixed value ) : Mixed
绕过校验，直接设置底层DOM表单项的值。 设置值并进行校验，参见 setValue。
绕过校验，直接设置底层DOM表单项的值。 设置值并进行校验，参见 setValue。
参数:
  • value : Mixed
    需要设置的值
返回值:
  • Mixed
    value 被设置的表单项值
Field
setReadOnly ( Boolean readOnly ) : void
设置当前表单项的只读状态。
设置当前表单项的只读状态。
参数:
  • readOnly : Boolean
    表单项是否应该只读。
返回值:
  • void
Field
setSize ( Mixed width , Mixed height ) : Ext.BoxComponent
设置BoxComponent的宽度和高度。 此方法触发resize事件...
设置BoxComponent的宽度和高度。 此方法触发resize事件。此方法可以接收单独的width或者height值作为参数， 或者你可以传递像这样的一个size对象： {width:10, height:20} 。
参数:
  • width : Mixed
    设置的新的width值。这可以是：
    • 一个Number类型指定Element新的宽度 Ext.Element.defaultUnit(默认为像素 :'px')。
    • 一个String类型用于设置width的CSS样式。
    • 一个size对象格式为 {width: widthValue, height: heightValue} 。
    • 值为 undefined 时，保留原来的width不变。
  • height : Mixed
    设置的新的height值(如果第一个参数传递了一个size对象，此参数没有必要传递)。这可以是：
    • 一个Number类型指定Element新的高度 Ext.Element.defaultUnit(默认为像素 :'px')。
    • 一个String类型用于设置height的CSS样式。也有可能不会被使用到。
    • 值为 undefined 时，保留原来的height不变。
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setValue ( Boolean/String checked ) : Ext.form.Field
设置复选框的选中状态，触发'check（检查）'事件和调用handler(处理)方法 (如果配置里有处理方法的话)。
设置复选框的选中状态，触发'check（检查）'事件和调用 handler (如果配置里有处理方法的话)。
参数:
  • checked : Boolean/String
    下列的值使复选框变成已选择的状态: true, 'true', '1', or 'on' 。其他的值将会使复选框变成未选择的状态。
返回值:
  • Ext.form.Field
    this
Checkbox
setVisible ( Boolean visible ) : Ext.Component
工具方法，通过使用布尔值隐藏或者显示当前组件。
工具方法，通过使用布尔值隐藏或者显示当前组件。
参数:
  • visible : Boolean
    true时显示，false时隐藏
返回值:
  • Ext.Component
    this
Component
setWidth ( Mixed width ) : Ext.BoxComponent
设置组件的宽度。 此方法触发resize事件。
设置组件的宽度。 此方法触发resize事件。
参数:
  • width : Mixed
    The new width to set.
返回值:
  • Ext.BoxComponent
    this
BoxComponent
show () : Ext.Component
显示当前组件。监听' beforeshow' 事件，返回 false 取消显示组件...
显示当前组件。监听' beforeshow' 事件，返回 false 取消显示组件。在显示组件之后触发' show' 事件。
参数:
  • 无。
返回值:
  • Ext.Component
    this
Component
suspendEvents( Boolean queueSuspended ) : void
暂停触发所有的事件。 (参看resumeEvents)
暂停触发所有的事件。（参看 resumeEvents)
参数:
  • queueSuspended : Boolean
    如果传递为true则排列好暂停的事件使得在调用 resumeEvents 后再触发它们，而不是抛弃所有暂停的事件。
返回值:
  • void
Observable
syncSize () : Ext.BoxComponent
强制组件的大小按照此组件底层元素当前的高度和宽度计算。
强制组件的大小按照此组件底层元素当前的高度和宽度计算。
参数:
  • 无。
返回值:
  • Ext.BoxComponent
    this
BoxComponent
un( String eventName, Function handler, [Object scope] ) : void
删除一个事件处理器(removeListener方法的简写形式)
删除一个事件处理器(removeListener方法的简写形式。)
参数:
  • eventName : String
    处理器关联的事件类型
  • handler : Function
    被删除的处理器 这应该是传入 addListener 中的方法的引用。
  • scope : Object
    （可选）为处理器指定的初始作用域。
返回值:
  • void
Observable
unsetActiveError ( Boolean suppressEvent ) : void
清除activeError并触发'valid'事件。此方法被clearInvalid在内部进行...
清除activeError并触发'valid'事件。此方法被clearInvalid在内部进行调用， 并且一般情况下没有必要手工调用
参数:
  • suppressEvent : Boolean
    True将禁止触发'invalid'事件
返回值:
  • void
Field
update ( Mixed htmlOrData , [ Boolean loadScripts ], [ Function callback ] ) : void
刷新组件的内部区域。
刷新组件的内部区域。
参数:
  • htmlOrData : Mixed
    如果已经通过tpl为当前组件配置了一个模板，那么 将会使用此参数来装配模板。 如果没有为当前组件配置模板，组件的内容区域将会通过Ext.Element 进行刷新。
  • loadScripts : Boolean
    (可选)只用在使用html配置时此参数才合法。默认为false。
  • callback : Function
    (可选)只用在使用html配置时此参数才合法。 当脚本加载完成时回调函数才被执行。
返回值:
  • void
Component
updateBox ( Object box ) : Ext.BoxComponent
设置此组件底层元素的盒子模型尺寸。(译者注：盒子模型是CSS术语，详细资料请自行搜索。)
设置此组件底层元素的盒子模型尺寸。(译者注：盒子模型是CSS术语，详细资料请自行搜索。)
参数:
  • box : Object
    一个格式为{x, y, width, height}的对象
返回值:
  • Ext.BoxComponent
    this
BoxComponent
validate () : Boolean
校验表单项的值
校验表单项的值
参数:
  • 无。
返回值:
  • Boolean
    如果值合法，为true,否则为false
Field
validateValue ( Mixed The ) : Boolean
使用getErrors创建一个校验出错信息数组。 如果发现了任何错误，将会使用第一个错误作为参数...
使用getErrors创建一个校验出错信息数组。 如果发现了任何错误，将会使用第一个错误作为参数调用markInvalid方法并返回 false，否则返回true。以前，要求子类提供此方法的一个实现以处理校验过程--- 从3.2开始，应该用覆盖getErrors方法的方式替代。
参数:
  • The : Mixed
    表单项的当前值
返回值:
  • Boolean
    如果所有校验都通过，此值为true，如果一个或多个校验失败，则为false
Field

公共事件

Event Defined By
added : ( Ext.Component this , Ext.Container ownerCt , number index )
当一个组件被添加到一个Ext.Container时触发
当一个组件被添加到一个Ext.Container时触发
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • ownerCt : Ext.Container
    用于组件的容器
  • index : number
    添加组件的位置
Component
afterrender : ( Ext.Component this )
在组件渲染完成之后触发...

在组件渲染完成之后触发。

afterrender事件在当前组件被rendered 结束之后、在为组件定义的所有afterRender方法执行之后 触发，并且，如果有stateful， 也在状态被保存之后才触发。

监听器将会以如下参数格式被调用:
  • this : Ext.Component
Component
beforedestroy : ( Ext.Component this )
在组件 destroyed 之前触发。 在事件监听器中返回false以停止 destroy 操作。
在组件 destroyed 之前触发。 在事件监听器中返回false以停止 destroy 操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforehide : ( Ext.Component this )
在调用hide方法隐藏组件之前触发。 在事件监听器中返回false可以停止隐藏操作。
在调用hide方法隐藏组件之前触发。 在事件监听器中返回false可以停止隐藏操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforerender : ( Ext.Component this )
在组件被rendered 之前触发。 在事件监听器中返回false可以停止render 操作。
在组件被rendered 之前触发。 在事件监听器中返回false可以停止render 操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforeshow : ( Ext.Component this )
在调用show()方法现实组件之前触发。 事件处理函数返回false可以停止show。
在调用show 方法现实组件之前触发。 事件处理函数返回false可以停止show。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforestaterestore : ( Ext.Component this , Object state )
在组件状态恢复之前触发。返回false停止恢复状态操作。
在组件状态恢复之前触发。返回false停止恢复状态操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    StateProvider返回的状态哈希值。 如果没有禁止此事件，那么状态对象会被传递给applyState。 默认情况下，这样简单地把属性值拷贝到当前组件中。 可以覆盖此方法以提供自定的状态恢复操作。
Component
beforestatesave : ( Ext.Component this , Object state )
在组件状态被保存到配置的状态提供者之前触发。 返回false可以停止保存。
在组件状态被保存到配置的状态提供者之前触发。 返回false可以停止保存。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    状态值哈希。 这由在组件上调用getState() 方法决定。 此方法必须由开发者提供，返回是否需要对状态进行描述，默认情况下， Ext.Component有一个空实现。
Component
blur : ( Ext.form.Field this )
当表单项时区输入焦点时触发。
当表单项时区输入焦点时触发。
监听器将会以如下参数被调用:
  • this : Ext.form.Field
Field
change : ( Ext.form.Field this , Mixed newValue , Mixed oldValue )
如果表单项的时发生改变，在表单项刚刚失去焦点时触发。
如果表单项的时发生改变，在表单项刚刚失去焦点时触发。
监听器将会以如下参数格式调用:
  • this : Ext.form.Field
  • newValue : Mixed
    新的值
  • oldValue : Mixed
    原始值
Field
check : ( Ext.form.Checkbox this , Boolean checked )
当复选框被选中或反选时触发。
当复选框被选中或反选时触发。
监听器将会已 如下的参数格式来调用：
  • this : Ext.form.Checkbox
    This checkbox
  • checked : Boolean
    The new checked value
Checkbox
destroy : ( Ext.Component this )
在组件被销毁之后触发。
在组件被destroyed之后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
disable : ( Ext.Component this )
在组件被设置为无效状态后触发。
在组件被设置为无效状态后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
enable : ( Ext.Component this )
当组件被设置为有效(enabled)之后触发。
当组件被设置为有效(enabled)之后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
focus : ( Ext.form.Field this )
当表单项获得输入焦点时触发。
当表单项获得输入焦点时触发。
监听器将会以如下参数格式被调用:
  • this : Ext.form.Field
Field
hide : ( Ext.Component this )
在组件被隐藏之后触发。 当调用hide 方法隐藏组件之后触发。
在组件被隐藏之后触发。 当调用hide 方法隐藏组件之后触发。
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
invalid : ( Ext.form.Field this , String msg )
在表单项被标记为非法之后触发。
在表单项被标记为非法之后触发。
监听器将会以如下参数格式调用:
  • this : Ext.form.Field
  • msg : String
    校验信息
Field
move : ( Ext.Component this , Number x , Number y )
在组件移动之后触发。
在组件移动之后触发。
监听器将会用如下的参数格式来调用:
  • this : Ext.Component
  • x : Number
    The new x position
  • y : Number
    The new y position
BoxComponent
removed : ( Ext.Component this , Ext.Container ownerCt )
当一个组件被从Ext.Container容器中删除时触发
当一个组件被从Ext.Container容器中删除时触发
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • ownerCt : Ext.Container
    持有组件的容器
Component
render : ( Ext.Component this )
在组件被渲染之后触发。
在组件被 rendered(渲染) 之后触发。
监听器将以如下的参数格式被调用:
  • this : Ext.Component
Component
resize : ( Ext.Component this , Number adjWidth , Number adjHeight , Number rawWidth , Number rawHeight )
在组件被调整大小之后触发。
在组件被调整大小之后触发。
监听器将以如下的参数格式被调用:
  • this : Ext.Component
  • adjWidth : Number
    这是width调整后的值
  • adjHeight : Number
    这是height调整后的值
  • rawWidth : Number
    这是width原来的值
  • rawHeight : Number
    这是height原来的值
BoxComponent
show : ( Ext.Component this )
在调用show 方法显示组件之后触发。
在调用show 方法显示组件之后触发。
监听器将会用如下的参数格式被调用:
  • this : Ext.Component
Component
specialkey : ( Ext.form.Field this , Ext.EventObject e )
当任何和导航有关的键被按下时触发(上下左右箭头, tab, 回车,esc, 等等) is pressed. 处理其它按键参见...
当任何和导航有关的键被按下时触发(上下左右箭头, tab, 回车,esc, 等等) is pressed. 处理其它按键参见 Ext.Panel.keys或者 Ext.KeyMap。 你可以检测 Ext.EventObject.getKey 以便获知哪个键被按下。例如：
var form = new Ext.form.FormPanel({
    ...
    items: [{
            fieldLabel: 'Field 1',
            name: 'field1',
            allowBlank: false
        },{
            fieldLabel: 'Field 2',
            name: 'field2',
            listeners: {
                specialkey: function(field, e){
                    // e.HOME, e.END, e.PAGE_UP, e.PAGE_DOWN,
                    // e.TAB, e.ESC, arrow keys: e.LEFT, e.RIGHT, e.UP, e.DOWN
                    if (e.getKey() == e.ENTER) {
                        var form = field.ownerCt.getForm();
                        form.submit();
                    }
                }
            }
        }
    ],
    ...
});
监听器将会以如下参数格式被调用:
  • this : Ext.form.Field
  • e : Ext.EventObject
    事件对象
Field
staterestore : ( Ext.Component this , Object state )
组件状态被存储之后触发。
组件状态被存储之后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    StateProvider返回的状态哈希值。 如果没有禁止此事件，那么状态对象会被传递给applyState。 默认情况下，这样简单地把属性值拷贝到当前组件中。 可以覆盖此方法以提供自定的状态恢复操作。
Component
statesave : ( Ext.Component this , Object state )
在组件状态被保存到所配置的状态提供者之后触发。
在组件状态被保存到所配置的状态提供者之后触发。
监听器将会用如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    状态值hash。 这是由在足见上调用getState() 方法决定的。 开发者必须提供此方法以返回是否需要恢复状态，默认情况下， Ext.Component有一个空实现。
Component
valid : ( Ext.form.Field this )
在表单项被校验无错误之后触发。
在表单项被校验无错误之后触发。
监听器将会以如下参数格式被调用:
  • this : Ext.form.Field
Field


Observable
    Component
      BoxComponent
        Field
          CheckboxGroup

Class Ext.form.CheckboxGroup

包: | Ext.form
定义类的文件: | CheckboxGroup.js
类: | CheckboxGroup
子类: | RadioGroup
继承自: | Field

Ext.form.Checkbox 的一个分组容器。

示例用法:

var myCheckboxGroup = new Ext.form.CheckboxGroup({
    id:'myGroup',
    xtype: 'checkboxgroup',
    fieldLabel: 'Single Column',
    itemCls: 'x-check-group-alt',
    // Put all controls in a single column with width 100%
    columns: 1,
    items: [
        {boxLabel: 'Item 1', name: 'cb-col-1'},
        {boxLabel: 'Item 2', name: 'cb-col-2', checked: true},
        {boxLabel: 'Item 3', name: 'cb-col-3'}
    ]
});

配置项

Config Options Defined By
allowBlank : Boolean
False将会校验分组中至少一个项目被选中(默认为true)。 如果在校验时没有项目被选中...
False将会校验分组中至少一个项目被选中(默认为true)。 如果在校验时没有项目被选中， {@link
CheckboxGroup
allowDomMove : Boolean
在渲染时组件是否可以移动Dom节点(默认为true)。
Component
anchor : String
注: 这个配置只用于该组件被包含在一个已使用AnchorLayout...

注: 这个配置只用于该组件被包含在一个已使用 AnchorLayout (或者其子类)配置的Container时。 基于布局管理器，例如：

  • Ext.form.FormPanel
  • 指定 layout: 'anchor' // or 'form', or 'absolute'

参见 Ext.layout.AnchorLayout. anchor 。

BoxComponent
applyTo : Mixed
指定一个元素的id、一个DOM元素或者一个已经存在并被渲染到DIV中的元素，此DIV已经被...

指定一个元素的id、一个DOM元素或者一个已经存在并被渲染到DIV中的元素，此DIV已经被 渲染到document中，并且为当前组件指定了一些结构化的标签。

  • 描述 :
      当使用了 applyTo， 在主元素中也可以用id或者CSS类名来指定组件的托管部分， 并且，如果可以的话，创建的组件可能也会试图在那个标签中创建它的子组件。
  • 注意 :
      当使用此配置项时，无需调用render()方法。
      如果指定了applyTo属性，任何传递给 renderTo 的值都会被忽略，并且目标元素的父节点将会自动被用作组件的容器。
Component
autoCreate : String/Object
一个DomHelper 元素描述，或者为true使用一个默认元素描述。 用来创建封装当前组件的...

一个DomHelper 元素描述，或者为true使用一个默认元素描述。 用来创建封装当前组件的 Element。 细节参见 autoEl 。 默认为:

                                {tag: 'input', type: 'text', size: '20', autocomplete: 'off'}
Field
autoEl : Mixed
一个表签名或者一个 DomHelper 描述，用来创建 Element ，它将封装当前组件...

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

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

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

{
    xtype: 'box',
    autoEl: {
        tag: 'img',
        src: 'http://www.example.com/example.jpg'

    }
}, {
    xtype: 'box',
    autoEl: {
        tag: 'blockquote',
        html: 'autoEl is cool!'
    }
}, {
    xtype: 'container',
    autoEl: 'ul',
    cls: 'ux-unordered-list',
    items: {
        xtype: 'box',
        autoEl: 'li',
        html: 'First list item'
    }
}
Component
autoHeight : Boolean
如果值为true，height配置项为'auto'，否则值为false的话使用固定的高度...

如果值为true，height配置项为'auto'，否则值为false的话使用固定的高度， 或者可以由其父类容器 layout manager来控制。(默认值为 false)。

注: 虽然很多组件继承了这个配置选项，但不是所有这些组件的自适应高度配置都会像期望的那样起作用。 设置autoHeight：值为true时，浏览器将根据元素的内容自动设置高度，这将意味着Ext不会去管理高度。

如果是由浏览器来管理高度，需要注意的是，通过浏览器进行调整的结构组件内不能被发现， 因此宽度的变化可能导致需要进行同步处理元素的高度。 例如：

var w = new Ext.Window({
    title: 'Window',
    width: 600,
    autoHeight: true,
    items: {
        title: 'Collapse Me',
        height: 400,
        collapsible: true,
        border: false,
        listeners: {
            beforecollapse: function() {
                w.el.shadow.hide();
            },
            beforeexpand: function() {
                w.el.shadow.hide();
            },
            collapse: function() {
                w.syncShadow();
            },
            expand: function() {
                w.syncShadow();
            }
        }
    }
}).show();
BoxComponent
autoScroll : Boolean
如果值为true，将会在该元素上使用overflow:'auto'配置，并且在必要的时候...
如果值为true，将会在该元素上使用overflow:'auto'配置，并且在必要的时候自动显示滚动条，否则，溢出部分的组件都会被切除(默认值为 false)。
BoxComponent
autoShow : Boolean
如果组件需要检测隐藏CSS属性(如 'x-hidden' 或者 'x-hide-display')并且在渲染时删除...
如果组件需要检测隐藏CSS属性(如 'x-hidden' 或者 'x-hide-display')并且在渲染时删除它们 (默认为false)，设置此值为true。
Component
autoWidth : Boolean
如果为true，使用width:'auto'配置，否则使用固定的宽度...

如果为true，使用width:'auto'配置，否则使用固定的宽度，或者可以由其父类容器的layout manager来控制。(默认值为 false)。

注: 虽然很多组件继承了这个配置选项，但不是所有这些组件的自适应宽度配置都会像期望的那样起作用。 设置autoWidth：值为true时，浏览器将根据元素的内容自动设置宽度，这将意味着Ext不会去管理宽度。

如果是由浏览器来管理宽度，需要注意的是，通过浏览器进行调整的结构组件内不能被发现，因此宽度的变化可能导致需要进行同步处理元素的宽度。 例如，在这个元素的目标是：

<div id='grid-container' style='margin-left:25%;width:50%'></div>
当浏览器窗口改变时，渲染后的Panel必须监听浏览器窗口大小的变化，以便通知子项，浏览器改变了其宽度：

var myPanel = new Ext.Panel({
    renderTo: 'grid-container',
    monitorResize: true, // relay on browser resize
    title: 'Panel',
    height: 400,
    autoWidth: true,
    layout: 'hbox',
    layoutConfig: {
        align: 'stretch'
    },
    defaults: {
        flex: 1
    },
    items: [{
        title: 'Box 1',
    }, {
        title: 'Box 2'
    }, {
        title: 'Box 3'
    }],
});
BoxComponent
blankText : String
如果allowBlank 校验失败显示的出错文本...
如果allowBlank 校验失败显示的出错文本 (默认为"You must select at least one item in this group")
CheckboxGroup
boxMaxHeight : Number
设置组件的最大高度值...

设置组件的最大高度值。

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

BoxComponent
boxMaxWidth : Number
设置组件的最大宽度值...

设置组件的最大宽度值。

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

BoxComponent
boxMinHeight : Number
设置组件的最小高度值...

设置组件的最小高度值。

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

BoxComponent
boxMinWidth : Number
设置组件的最小宽度值...

设置组件的最小宽度值。

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

BoxComponent
bubbleEvents : Array
一个事件数组，当这些事件被触发时，将会被冒泡到所有父容器中。参见....

一个事件数组，当这些事件被触发时，将会被冒泡到所有父容器中。参见 Ext.util.Observable.enableBubble。 默认为 []。

Component
clearCls : String
应用到特殊的clearing div的CSS类， 这个clearing div直接渲染到每个form field的包装器后面...

应用到特殊的clearing div的CSS类， 这个clearing div直接渲染到每个form field的包装器后面，以提供 清除field的功能(默认为 'x-form-clear-left')。

注意: 只有在当前组件被渲染到一个使用FormLayout 布局(例如 Ext.form.FormPanel 或者指定 layout:'form')的 容器中、或者是指定了一个fieldLabel 、或者指定isFormField=true 时此配置才有效。

另请参见 Ext.layout.FormLayout. fieldTpl。

Component
cls : String
一个可选的额外CSS类，它将被添加到当前组件的元素上(默认为'')...
一个可选的额外CSS类，它将被添加到当前组件的元素上(默认为'')。 此属性对于在组件上，或者它的任何使用标准CSS规则的孩子节点上， 添加定制的样式非常有用。
Field
columns : String/Number/Array
当使用自动布局显示分组化的checkbox/radio控制器时，指定所使用的列数。...
当使用自动布局显示分组化的checkbox/radio控制器时，指定所使用的列数。 此选项可以使用多种类型的值:
  • 'auto' :

    控制器(译者注：指CheckBox和Radio)将会被在每一行中的每列渲染一个，并且每一列的宽度 将会根据表单项容器的全部宽度均匀地分配。这是默认情况。

  • Number :

    如果你指定了一个数字(例如3)将会创建这个数字的列数， 并且包含的控制器(译者注：指内部的CheckBox和Radio)将会 根据vertical 的值被自动分配。

  • Array : Object

    你也可以指定一个列宽度数组，根据需要混合使用整数值(固定宽度)和浮点值(宽度百分比) (例如[100, .25, .75])。所有整数值都将会被首先渲染，然后所有 浮点值都会被当作剩余空间的百分比进行计算。浮点值没有比较加起来为1(100%)， 如果你想要控制器充满整个表单项容器，你可以这么做。

CheckboxGroup
contentEl : String
(可选)指定一个已存在的HTML元素，或者一个已存在HTML元素的...

(可选)指定一个已存在的HTML元素，或者一个已存在HTML元素的 id ，它们将被用作当前组件的内容。

  • 描述 :
    此配置选项被用来将一个已存在的HTML元素 插入到一个新组件(在组件渲染之后它简单地移动DOM元素) 的layout元素中，使它成为该组件的内容。
  • 注意 :
    指定的HTML元素将被append到组件的layout元素中， 在所有配置的 HTML 被插入之后， 并且，这样的话，在render事件 被触发时，document中将不再包含此元素。
    指定的HTML元素将不会参与组件所有可能使用的 layout 过程(译者注：指这些HTML元素 不会参与布局操作)。 它仅是HTML而已。布局操作实在孩子 items 上进行的。
    添加 x-hidden 或者 x-hide-display CSS类，以防在内容渲染到panel时发生闪烁。
Component
ctCls : String
一个可选的外部CSS样式，添加到这个组件的容器(默认值为 '')。 这个方法对于使用标准的CSS规则...

一个可选的外部CSS样式，添加到这个组件的容器(默认值为 '')。 这个方法对于使用标准的CSS规则，为组件或它的任何一个子组件添加特定的样式非常有用。 参见 Ext.layout.ContainerLayout和 extraCls 。

注意: ctCls 默认为 ''期望如下的类，它们将指定一个默认值:

  • Box Layout : 'x-box-layout-ct'
使用一个额外的CSS类配置以上的Class，它是append到默认对象上的。例如， 对于BoxLayout (Hbox and Vbox):
                                ctCls: 'x-box-layout-ct custom-class'

Component
data : Mixed
初始化数据集，它将被应用到 tpl 上以刷新组件的内容区域。
Component
disabled : Boolean
当前组件处于无效状态时为true。 Read-only.
Field
disabledClass : String
当组件处于无效状态时添加到组件上的CSS类(默认为 'x-item-disabled')。
Component
fieldClass : String
表单项的默认CSS类(默认为'x-form-field')
Field
fieldLabel : String
紧靠此field显示的标签文本(默认值为 '')。注意...

紧靠此field显示的标签文本(默认值为 '')。

注意:只有在当前组件被渲染到一个使用FormLayout 的容器中时，此配置才有效。 (例如 Ext.form.FormPanel 或 指定 layout:'form')。

另请参见 hideLabel 、 Ext.layout.FormLayout和 fieldTpl。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Name'
    }]
});
Component
flex : Number
注: 这个配置只用于该组件被包含在一个已使用BoxLayout配置的Container中时...

注: 这个配置只用于该组件被包含在一个已使用BoxLayout配置的Container中时。通过计算每一个子组件的flex值所占全部flex值之和的比例，来决定子组件的宽(HBoxLayout)高(VBoxlayout)。 任何子项的 flex = 0 或 flex = undefined 将不被设置(初始值大小将不被改变)。

BoxComponent
focusClass : String
当表单项获得焦点时使用的CSS类(默认为 'x-form-focus')
Field
height : Number
组件的高度(默认值为 auto)。注:如果想使用百分比的方式...
组件的高度(默认值为 auto)。注:如果想使用百分比的方式来设置值，请查看 Ext.Component.anchor。
BoxComponent
hidden : Boolean
如果当前组件处于隐藏状态，此值为true。Read-only。
Component
hideLabel : Boolean
true时完全隐藏label元素 ( label 和 separator)。 默认为 false。 默认情况下，即使你不指定...

true时完全隐藏label元素 ( label 和 separator)。 默认为 false。 默认情况下，即使你不指定 fieldLabel 它的空间仍然会被保留，这样这块区域会与其它确实拥有label的区域位于同一排。 讲此值设置为 true 将导致此区域不再保留此空间。

注意: 参见 clearCls 的注释。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield'
        hideLabel: true
    }]
});
Component
hideMode : String
组件如何隐藏，支持的值有： 'visibility' (css visibility), 'offsets' (位置偏移量为负值) 和...

组件如何隐藏，支持的值有： 'visibility' (css visibility), 'offsets' (位置偏移量为负值) 和 'display' (css display).

注意:一般首选默认值 'display'，因为当组件第一次显示的时候它们会自动进行布局 (隐藏的时候不会调整尺寸)。

Component
hideParent : Boolean
此值为true时，当调用hide/show方法时，将会hide和show组件的容器...
此值为true时，当调用hide/show方法时，将会hide和show组件的容器；false时将会 hide和show组件自身(默认为false)。例如，这可以用作window上隐藏按钮的一种 快捷操作，通过设置此按钮的hideParent:true，然后把它添加到window上。
Component
html : String/Object
一个HTML片段，或者一个 DomHelper 描述，用作layout元素的内容(默认为'')。...
一个HTML片段，或者一个 DomHelper 描述，用作layout元素的内容(默认为'')。 这个HTML内容在组件渲染之后才被添加，所以在 render 出发的时候，document中尚未包含此HTML。 但是这个内容将会在所有配置的 contentEl 之前被插入到body标签中。
Component
id : String
当前组件唯一的id(默认为auto-assigned id)...

当前组件唯一的id(默认为auto-assigned id)。 如果你需要在以后访问组件，而又没有一个有效的组件对象引用，那么你需要指定一个 id( 也就是，使用Ext. getCmp方法 )。

注意，此id也将被用作组件底层HTML标签的id，这些标签被渲染到页面中。 这将允许你编写基于id的CSS规则，以独立地描述指定的实例；并且，也可以通过 组件父标签的id选中子元素。

注意:为了避免与唯一的id 产生重复， 请参见 itemId 和 ref 。

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

Component
inputType : String
输入栏的类型属性---例如radio,text,password,file(默认为'text')。...
输入栏的类型属性---例如radio,text,password,file(默认为'text')。 'file'和'password'类型通常必须用来渲染那些没有独立Ext组件的表单项类型。 注意，如果你使用inputType:'file'， 那么将不再支持 emptyText 并且应该避免使用。
Field
invalidClass : String
当把表单项标记为非法时所使用的CSS类(默认为'x-form-invalid')
Field
invalidText : String
当把一个表单项标记为非法状态并且没有提供消息时所使用的出错文本...
当把一个表单项标记为非法状态并且没有提供消息时所使用的出错文本 (默认为'The value in this field is invalid')
Field
itemCls : String
注意: 只有在当前组件被渲染到一个使用FormLayout 布局的 容器中时此配置才有效...

注意: 只有在当前组件被渲染到一个使用FormLayout 布局的 容器中时此配置才有效。 (例如Ext.form.FormPanel 或者指定 layout:'form')。

一个附加的CSS类，应用到div上，包装当前field的表单元素。 如果提供了此参数， field级上的itemCls将会覆盖 container级上提供的 默认itemCls。 为itemCls指定的值将会被添加默认的 类('x-form-item')。

既然它被应用到项目的包装器上(参见 Ext.layout.FormLayout。 fieldTpl)， 它将允许你编写能应用到此field、label(如果有指定)、或者field内部任何其它元素的标准CSS规则。

注意: 参考 fieldLabel的注释。 .

示例用法:

// Apply a style to the field's label:
<style>
    .required .x-form-item-label {font-weight:bold;color:red;}
</style>

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Name',
        itemCls: 'required' //this label will be styled
    },{
        xtype: 'textfield',
        fieldLabel: 'Favorite Color'
    }]
});
Component
itemId : String
当没有可利用的对象引用时，itemId可以作为第二选择，用来获得一个组件的引用， 代替 ...

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

var c = new Ext.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'); // 与 Ext.getCmp()不同

p2 = p1.ownerCt.getComponent('p2'); // 通过兄弟对象获得引用

另请参见 id 和 ref 。

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

Component
items : Array
一个需要安排在分组中的Checkboxes ，或者 Checkbox配置对象数组。
CheckboxGroup
labelSeparator : String
每个fieldLabel 文本后面现实的分隔符。 此属性可以在多个层次上进行配置...

每个fieldLabel 文本后面现实的分隔符。 此属性可以在多个层次上进行配置。优先顺序为：

  • field / component level
  • container level
  • layout level (默认为冒号 ':')
如不需要为当前field的label显示分隔符，指定一个空字符串''即可。

注意:参见 clearCls 的注释。

另请参见 hideLabel 和 Ext.layout.FormLayout。 fieldTpl。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    layoutConfig: {
        labelSeparator: '~'   // layout config has lowest priority (defaults to ':')
    },
    labelSeparator: '>>',     // config at container level
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Field 1',
        labelSeparator: '...' // field/component level config supersedes others
    },{
        xtype: 'textfield',
        fieldLabel: 'Field 2' // labelSeparator will be '='

    }]
});
Component
labelStyle : String
一个CSS样式描述字符串，它将直接应用到当前field的label上...

一个CSS样式描述字符串，它将直接应用到当前field的label上。 如果有设置，默认为容器的labelStyle值(例如 Ext.layout.FormLayout.labelStyle , 或者 '')。

注意:参见 clearCls 的注释。

另请参见 hideLabel 和 Ext.layout.FormLayout. fieldTpl。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Name',
        labelStyle: 'font-weight:bold;'
    }]
});
Component
listeners : Object
一个包含一个或多个事件处理器的配置对象，会在初始化的时候被添加到目标对象上...

一个包含一个或多个事件处理器的配置对象，会在初始化的时候被添加到目标对象上。 该配置对象应该是一个有效的监听器配置对象就像 addListener例子中指定的一样可一次附加多个处理器。

ExtJs Components上的DOM事件

一些 ExtJs Component 类导出时会选择一些DOM事件(例如 "click", "mouseover" 等等), 这通常只是在有额外的值可以被添加时发生。例如DataView类的 click事件会传递被点击的节点。也可以直接在Component的HTMLElementevent上访问DOM事件，但必需在Component被渲染后监听器才能添加到Element 上。可以按照以下步骤添加插件:

// 插件会用一个监听器配置对象进行配置。
//该组件会被添加到所有处理方法的参数列表上。
Ext.DomObserver = Ext.extend(Object, {
    constructor: function(config) {
        this.listeners = config.listeners ? config.listeners : config;
    },

    // 组件将自己传递进了插件的初始化方法里
    init: function(c) {
        var p, l = this.listeners;
        for (p in l) {
            if (Ext.isFunction(l[p])) {
                l[p] = this.createHandler(l[p], c);
            } else {
                l[p].fn = this.createHandler(l[p].fn, c);
            }
        }

        // 渲染后立即添加监听器到元素上
        c.render = c.render.createSequence(function() {
            var e = c.getEl();
            if (e) {
                e.on(l);
            }
        });
    },

    createHandler: function(fn, c) {
        return function(e) {
            fn.call(this, e, c);
        };
    }
});

var combo = new Ext.form.ComboBox({

    // 元素被点击后折叠
    plugins: [ new Ext.DomObserver({
        click: function(evt, comp) {
            comp.collapse();
        }
    })],
    store: myStore,
    typeAhead: true,
    mode: 'local',
    triggerAction: 'all'
});

Observable
margins : Object
注:此配置只用于该组件展现在一个使用BorderLayout...

注:此配置只用于该组件展现在一个使用BorderLayout 或 BoxLayout的两个子类之一作为布局的容器。

这个margins对象在该组件中的格式为：

{top: (top margin),right: (right margin),bottom: (bottom margin),left: (left margin)}

也可以是一个字符串，中间用空格分隔，margin值为数字。 把matches中每一个值的次序跟CSS中margin值的排列方式相对应：

  • 如果只有一个值，它适用于所有方面。
  • 如果有两个值，top和bottom的边框设置为第一个值，left和right设置为第二个值。
  • 如果有三个值，top设置为第一个值，left和right设置为第二个值，bottom设置为第三个值。
  • 如果有四个值，分别设置为top, right, bottom, left。

默认值:

{top:0, right:0, bottom:0, left:0}
BoxComponent
msgFx : String
实验性参数 当在表单项下显示校验消息时使用的效果(默认为'normal')。
Field
msgTarget : String
通过markInvalid 设置的消息文本应该显示的位置。 必须是如下值之一：...

通过markInvalid 设置的消息文本应该显示的位置。 必须是如下值之一：

  • qtip 当用户鼠标滑过表单项时，显示一个包含消息的快速提示。 这是默认情况。
    为了使此参数能工作，必须调用 Ext.QuickTips.init。
  • title 在弹出的默认浏览器标题属性上显示消息。
  • under 在表单项之下添加一块div，包含出错消息。
  • side 在表单项右边添加一个出错图标，当鼠标滑过时弹出并显示一个消息。
  • [element id] 在指定元素的innerHTML中直接添加出错消息。
Field
overCls : String
一个可选的额外的CSS类，它将在鼠标移过元素时被添加到组件上...
一个可选的额外的CSS类，它将在鼠标移过元素时被添加到组件上，鼠标移出时 删除。(默认为'')。此属性对于在组件上，或者它的任何使用标准CSS规则的孩子节点上， 添加定制的'active' 或者 'hover'样式非常有用。
Component
pageX : Number
如果该组件被包含在一个指定位置的容器中，这个值表示页面级的x坐标值（译者注：在有滚动条的情况下这个值很有用）。
BoxComponent
pageY : Number
如果该组件被包含在一个指定位置的容器中，这个值表示页面级的y坐标值（译者注：在有滚动条的情况下这个值很有用）。
BoxComponent
plugins : Object/Array
一个对象或者一个对象数组，为组件提供特殊的功能 ...
一个对象或者一个对象数组，为组件提供特殊的功能。 对一个合法的插件唯一的要求是它含有一个init()方法， 能接收一个Ext.Component型的参数。 当组件被创建时，如果有可用的插件，组件将会调用每个插件的init方法， 并将自身的引用作为方法参数传递给它。然后，每个插件就可以调用方法或者响应组件上的事件， 就像需要的那样提供自己的功能。
Component
preventMark : Boolean
true将会禁止 把表单项标记为非法。默认为false.
Field
ptype : String
需要创建配置的ptype。 当传递一个配置对象给构造函数时...
需要创建配置的ptype。 当传递一个配置对象给构造函数时，此配置选项不会被使用。 只有在使用懒初始化的时候此配置项才会被使用， 此时Plugin不是 通过一个完整的实例组件，而是通过一个Component配置指定的。 在渲染时，将会查找ptype以决定创建何种类型的Plugin。

如果你创建自己的Plugin，你可以通过 Ext.ComponentMgr.registerPlugin 对它们进行注册，以便能利用懒初始化和渲染机制。
Component
readOnly : Boolean
将会把表单项标记为在HTML中只读(readOnly)(默认为false)...
true 将会把表单项标记为在HTML中只读(readOnly)(默认为false)。

Note: 这仅仅设置元素的readOnly DOM参数。 例如，设置 readOnly=true ，将不会禁用触发ComboBox或者DateField； 这为你提供了一个选项，可以强制用户通过触发按钮选择一个值，而不是 在文本框进行输入。 使用 hideTrigger 可以隐藏触发按钮。

Field
ref : String
一个路径描述，与组件的 ownerCt 相关，它描述了把当前组件的命名引用放置到哪个父容器中去。...

一个路径描述，与组件的 ownerCt 相关，它描述了把当前组件的命名引用放置到哪个父容器中去。

祖先的坐标路径可以通过'/'字符进行分隔。 例如，将一个Toolbar Button的引用放入 拥有此Toolbar的Panel中:

var myGrid = new Ext.grid.EditorGridPanel({
    title: 'My EditorGridPanel',
    store: myStore,
    colModel: myColModel,
    tbar: [{
        text: 'Save',
        handler: saveChanges,
        disabled: true,
        ref: '../saveButton'
    }],
    listeners: {
        afteredit: function() {
//          The button reference is in the GridPanel
            myGrid.saveButton.enable();
        }
    }
});

在上面的代码中，如果 ref 是 'saveButton' ，那么引用将会被放置到Toolbar中。 ref 中的每个'/' 都会从组件的 ownerCt 向上移动一级。

另请参见 added 和 removed 事件。

Component
region : String
注: 此配置只用于该组件展现在一个布局为BorderLayout的容器中...

注: 此配置只用于该组件展现在一个布局为BorderLayout的容器中(例如指定layout:'border')。

详见Ext.layout.BorderLayout。

BoxComponent
renderTo : Mixed
该值可以是一个节点的id、一个DOM节点或者一个已存在的元素...

该值可以是一个节点的id、一个DOM节点或者一个已存在的元素， 组件将会被渲染到其中。

  • 注意 :
      如果组件不是一个Container 的子项目时， 不要使用此选项。 渲染和管理它的子项目是一个Container 的layout manager的责任。
      当使用此配置项时，无需调用render()方法。

另请参见 render 。

Component
stateEvents : Array
一个事件数组，当它们被触发时，组件需要保存自己的状态(默认值为 none)...

一个事件数组，当它们被触发时，组件需要保存自己的状态(默认值为 none)。 它们可以是任何该组件支持的事件类型，包括浏览器事件和 自定义事件(例如['click', 'customerchange'])。

对于保存和恢复组件状态的详细解释，参见 stateful

Component
stateId : String
为该组件指定的唯一的id值，它被用作管理组件状态的目的...
为该组件指定的唯一的id值，它被用作管理组件状态的目的。 (如果设定了id，默认值为组件自己的id，否则，如果组件使用自动生成的id，此值为null)。

对于保存和反解析组件状态的解释，参见 stateful 。

Component
stateful : Boolean
一个标志参数，它将引起组件在启动时尝试从一个保存的状态中恢复内部状态参数...

一个标志参数，它将引起组件在启动时尝试从一个保存的状态中恢复内部状态参数。 组件必须要么拥有一个 stateId 或者 id ，它们被分配给需要被管理的状态属性。 在跨页面加载时，不保证自动生成的id属性的稳定性， 并且，不能依赖此id来保存和恢复一个组件的相同状态。

为了保存状态的操作能够工作，状态管理器的提供者必须 被设置成一个Ext.state.Provider 的实现类，它覆盖了set 和get 方法，以便保存和恢复name/value对。 有一个内置的Ext.state.CookieProvider 可用。

为当前页面设置状态提供者:

Ext.state.Manager.setProvider(new Ext.state.CookieProvider({
    expires: new Date(new Date().getTime()+(1000*60*60*24*7)), //7 days from now
}));

当 stateEvents 配置项中其中之一的事件被触发时， 一个状态可保存的组件将试图保存其状态。

保存状态时，一个可保存状态的组件首先需要通过调用 getState 方法来序列化它的状态。 默认情况下，此函数什么事都不做。 开发者必须提供一个实现，返回一个hash对象，它描述了组件可恢复的状态。

getState方法产生的值将会传递给 Ext.state.Manager.set 方法，它使用配置的 Ext.state.Provider 来保存对象，以组件的 stateId 为key，或者，如果此值（指stateId）没有指定时， 使用它的 id 作为key。

在进行构造时，一个可保存状态的组件试图通过调用 Ext.state.Manager.get方法来 恢复它的状态，传递 stateId 或者，如果此值（指stateId）没有指定时， 使用它的 id 作为参数。

结果对象被传递给 applyState 。 applyState 的默认实现只是简单地把属性拷贝到对象中， 但是开发者可以覆盖此方法以支持更多行为。

通过向 beforestaterestore, staterestore, beforestatesave 和 statesave 事件上绑定监听器，你可以在保存和恢复状态时进行额外的处理。

Component
style : String
被添加到组件元素的特定样式。 必须是按照...
被添加到组件元素的特定样式。 必须是按照 Ext.Element.applyStyles 类指定格式的合法参数值。

new Ext.Panel({
    title: 'Some Title',
    renderTo: Ext.getBody(),
    width: 400, height: 300,
    layout: 'form',
    items: [{
        xtype: 'textarea',
        style: {
            width: '95%',
            marginBottom: '10px'
        }
    },
        new Ext.Button({
            text: 'Send',
            minWidth: '100',
            style: {
                marginBottom: '10px'
            }
        })
    ]
});
Component
submitValue : Boolean
False将会清除表单项的name属性，这样在提交表单时它将不会被提交。 默认为true。
Field
tabIndex : Number
该表单项的tabIndex。 注意，此属性仅仅应用到被渲染好的，而不是那些通过applyTo...
该表单项的tabIndex。 注意，此属性仅仅应用到被渲染好的，而不是那些通过applyTo创建的表单项 (默认为undefined)。
Field
tabTip : String
注: 这个配置只用于当该组件作为TabPanel的一个子项目时使用...

注: 这个配置只用于当该组件作为TabPanel的一个子项目时使用。

一个String类型的innerHTML(支持html标签)，当鼠标放在该选项上的时，显示一个tooltip。为了tips能够被渲染，Ext.QuickTips.init()必须被提前调用。
BoxComponent
tpl : Mixed
一个 Ext.Template , Ext.XTemplate 或者一个用来形成一个Ext.XTemplate的字符串数组...
一个 Ext.Template , Ext.XTemplate 或者一个用来形成一个Ext.XTemplate的字符串数组。 与 data 和 tplWriteMode 配置项协同使用。
Component
tplWriteMode : String
刷新组件的内容区域时使用的Ext.(X)Template方式。 默认为'overwrite' (参见 Ext.XTemplate.overwrite )。
刷新组件的内容区域时使用的Ext.(X)Template方式。 默认为'overwrite' (参见 Ext.XTemplate.overwrite )。
Component
validateOnBlur : Boolean
在表单项失去焦点时是否进行校验(默认为 true)。
Field
validationDelay : Number
在用户开始输入到校验操作开始之间的时长毫秒数 (默认为250)
Field
validationEvent : String/Boolean
引发表单项进行校验操作的事件。 设置为false可以禁用自动校验 (默认为'keyup')。
引发表单项进行校验操作的事件。 设置为false可以禁用自动校验 (默认为'keyup')。
Field
value : Mixed
当前表单项的初始化值(默认为undefined).
Field
vertical : Boolean
True将跨列分配所包含的控制器，从上到下完全填满一列，然后再开始新的一列。...
True将跨列分配所包含的控制器，从上到下完全填满一列，然后再开始新的一列。 每一列控制器的个数将会被自动计算以便保证每一列尽可能均匀分布。 默认值为false，这样控制器将按照一次添加一个的方式被加入到列中，从左到右 完全填满一行之后再开始新的一行。
CheckboxGroup
width : Number
组件的宽度(默认值为 auto)。注:如果想使用百分比的方式...
组件的宽度(默认值为 auto)。注:如果想使用百分比的方式来设置值，请查看 Ext.Component.anchor。
BoxComponent
x : Number
如果被包含在一个指定位置的容器中，这个值表示x(left)坐标值。
BoxComponent
xtype : String
需要创建配置的xtype。 当传递一个配置对象给构造函数时...
需要创建配置的xtype。 当传递一个配置对象给构造函数时，此配置选项不会被使用。 只有在使用懒初始化的时候此配置项才会被使用，此时容器的子项目不是 通过一个完整的实例组件，而是通过一个Component配置指定的。 在渲染时，将会查找xtype以决定创建何种类型的子组件。

预定义的xtype列表如下： here。

如果你继承Component创建你自己的组件，你需要使用Ext.ComponentMgr.registerType 对它们进行注册，以便利用懒初始化和渲染机制。
Component
y : Number
如果被包含在一个指定位置的容器中，这个值表示y(top)坐标值。
BoxComponent

公共属性

Property Defined By
disabled : Boolean
当前组件处于无效状态时为true。 Read-only.
Component
el : Ext.Element
封装了当前组件的Ext.Element。 Read-only。通常情况下，这将是一个<DIV>元素，它由此类的...

封装了当前组件的Ext.Element。 Read-only。

通常情况下，这将是一个<DIV>元素，它由此类的 onRender方法创建，但是它可以通过使用 autoEl 配置项进行覆盖。

注意: 直到组件渲染完成此元素都将处于无效状态。

如需向当前组件的 DOM事件(而不是当前组件自己的Observable事件)添加监听器， 更多建议，参见 listeners 配置项，或者直接使用一个render监听器:

new Ext.Panel({
    title: 'The Clickable Panel',
    listeners: {
        render: function(p) {
            // Append the Panel to the click handler's argument list.
            p.getEl().on('click', handlePanelClick.createDelegate(null, [p], true));
        },
        single: true  // Remove the listener after first invocation
    }
});

另请参见 getEl

Component
hidden : Boolean
如果当前组件处于隐藏状态，此值为true。Read-only。
Component
initialConfig : Object
当前组件的初始化配置描述。 Read-only。
Component
label : Ext.Element
关联到当前表单项的label元素。 只有在当前表单项已经被一个Ext.layout.FormLayout ...

关联到当前表单项的label元素。 只有在当前表单项已经被一个Ext.layout.FormLayout 布局管理器渲染之后才可用。

Field
originalValue : mixed
表单项原来的值，它是在value 中配置的；或者，如果 trackResetOnLoad 设置为...
表单项原来的值，它是在value 中配置的；或者，如果 trackResetOnLoad 设置为 true 时，通过表单加载操作最后一次加载的。
Field
ownerCt : Ext.Container
组件所属的Container (默认为undefined，当前组件被添加到一个容器中时此值被自动设置)...
组件所属的Container (默认为undefined，当前组件被添加到一个容器中时此值被自动设置)。 Read-only。

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

Component
refOwner : Ext.Container
如果当前组件是一个容器的孩子，并且是通过一个 ref 配置项被注册的，则此值为 ref 引用被插入到的祖先容器。
如果当前组件是一个容器的孩子，并且是通过一个 ref 配置项被注册的，则此值为 ref 引用被插入到的祖先容器。
Component
rendered : Boolean
如果当前组件已经被渲染了，此值为true。Read-only.
Component
startValue : mixed
表单项最后一次获得焦点时所拥有的值。 这就是传递给change 事件的值...

表单项最后一次获得焦点时所拥有的值。 这就是传递给change 事件的值，此事件在值被改变并失去焦点时触发。

直到表单项被访问之前此值都是undefined 与originalValue 进行比较。

Field

公共方法

Method Defined By
CheckboxGroup ( Object config )
创建一个新的CheckboxGroup
创建一个新的CheckboxGroup
参数:
  • config : Object
    配置选项
返回值:
  • void
CheckboxGroup
addClass ( string cls ) : Ext.Component
为组件底层的元素添加CSS样式。
为组件底层的元素添加CSS样式。
参数:
  • cls : string
    需要添加的CSS样式的class名称
返回值:
  • Ext.Component
    this
Component
addEvents( Object|String o, string Optional. ) : void
添加指定的事件到事件列表上，事件会被该Observable触发。
添加指定的事件到事件列表上，事件会被该Observable触发。
参数:
  • o : Object|String
    以事件名作为属性true作为值的对象 或者当多个事件名被分开的传递时则为第一个事件名。
  • Optional. : string
    事件名被分开的传递时则为事件名。 用法:
    this.addEvents('storeloaded', 'storecleared');
返回值:
  • void
Observable
addListener( String eventName, Function handler, [Object scope], [Object options] ) : void
给对象添加事件处理器。
给对象添加事件处理器。
参数:
  • eventName : String
    监听的事件名。
  • handler : Function
    事件调用的方法
  • scope : Object
    （可选）处理方法执行的作用域 (this的引用 reference)。 如果被忽略。默认为触发事件的对象。
  • options : Object
    （可选）包含处理器配置和属性的对象。 可能包含以下的属性:
    • scope : Object
      处理方法执行的作用域(this的引用) 。 如果被忽略。默认为触发事件的对象。
    • delay : Number
      在触发事件后延迟调用处理器的毫秒数。
    • single : Boolean
      如果为True则添加一个处理器来处理下一次的事件触发（仅一次），然后移除自己。
    • buffer : Number
      使得处理器延迟指定毫秒数后预定的运行在 一个Ext.util.DelayedTask中 。 如果事件在时间内再一次被触发，原始的处理器不会被调用，但是新的处理器会预定的在他的位置上。
    • target : Observable
      如果事件在目标的Observable上触发则仅仅调用处理器， 否则 事件会从子类的Observable上冒泡

    组合选项
    使用这些选项参数,可能会组合出不同类型的监听器：

    一个延迟的，一次性的监听器。

    myDataView.on('click', this.onClick, this, {
single: true,
delay: 100
});

    一次调用附加多个处理器
    该方法同样支持传递一个包含指定的多个处理器的属性的配置对象参数。

    myGridPanel.on({
'click' : {
    fn: this.onClick,
    scope: this,
    delay: 100
},
'mouseover' : {
    fn: this.onMouseOver,
    scope: this
},
'mouseout' : {
    fn: this.onMouseOut,
    scope: this
}
});

    或者一个简写的语法：

    myGridPanel.on({
'click' : this.onClick,
'mouseover' : this.onMouseOver,
'mouseout' : this.onMouseOut,
 scope: this
});
返回值:
  • void
Observable
applyToMarkup ( String/HTMLElement el ) : void
将此组件添加到已存在的有效的HTML标签中。 使用该方法时，无需再调用render()方法。
将此组件添加到已存在的有效的HTML标签中。 使用该方法时，无需再调用render()方法。
参数:
  • el : String/HTMLElement
返回值:
  • void
Component
clearInvalid () : void
清除当前表单项上的所有非法styles/messages(样式/消息)
清除当前表单项上的所有非法styles/messages(样式/消息)
参数:
  • 无。
返回值:
  • void
Field
cloneConfig ( Object overrides ) : Ext.Component
默认使用原先传递给当前实例的配置值克隆当前组件。
默认使用原先传递给当前实例的配置值克隆当前组件。
参数:
  • overrides : Object
    一个新的配置项，包含需要覆盖到克隆版本的所有属性。 可以传递一个id参数给此对象，否则将自动生成一个新的id以避免发生重复。
返回值:
  • Ext.Component
    当前组件的克隆副本
Component
destroy () : void
通过如下方法销毁对象：删除所有的事件监听器、将组件的元素从DOM树中删除...
通过如下方法销毁对象：删除所有的事件监听器、将组件的元素从DOM树中删除（如果可以）、 将组件从它的 Ext.Container（如果可用）中删除、 并且将它从Ext.ComponentMgr中 注销。 销毁操作一般由框架自动完成，一般情况下不需要直接调用该方法。
参数:
  • 无。
返回值:
  • void
Component
disable () : Ext.Component
将组件置为无效状态，并出发'disable'事件。
将组件置为无效状态，并出发'disable'事件。
参数:
  • 无。
返回值:
  • Ext.Component
    this
Component
enable () : Ext.Component
将组件置为有效状态并触发'enable'事件。
将组件置为有效状态并触发'enable'事件。
参数:
  • 无。
返回值:
  • Ext.Component
    this
Component
enableBubble( String/Array events ) :void
是否现在使得事件会被该Observable触发并调用 this.getBubbleTarget()方法在拥有者的继承树...

是否现在使得事件会被该Observable触发并调用 this.getBubbleTarget()方法在拥有者的继承树中冒泡。Observable的基础类中没有该方法的实现。

该方法一般被Ext.Components用来冒泡事件到拥有者的容器。参看Ext.Component.getBubbleTarget默认的实现 在Ext.Component中返回组件的直接拥有者。但是如果需要的是一个已知的目标，该方法可以被重写来更快的访问需求的目标。

例子:

Ext.override(Ext.form.Field, {
    // 添加方法到Field的initComponent上改变事件为冒泡
    initComponent : Ext.form.Field.prototype.initComponent.createSequence(function() {
        this.enableBubble('change');
    }),

    // 我们知道我们想让Field的事件冒泡到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() {
            // 如果样式被修改标题会变红。
            myForm.header.setStyle('color', 'red');
        }
    }
});
参数:
  • events : String/Array
    冒泡的事件名，或事件名数组
返回值:
  • void
Observable
findParentBy ( Function fn ) : Ext.Container
通过自定义的函数查找当前组件上层任何层次上的容器...
通过自定义的函数查找当前组件上层任何层次上的容器。 如果传递的函数返回true，容器对象将被返回。
参数:
  • fn : Function
    自定义的函数，使用如下参数调用(container,this component)。
返回值:
  • Ext.Container
    自定义函数返回true的第一个容器
Component
findParentByType ( String/Class xtype ) : Ext.Container
通过xtype或者class查找当前组件上层任何层次上的容器
通过xtype或者class查找当前组件上层任何层次上的容器
参数:
  • xtype : String/Class
    组件的xtype字符串，或者直接是组件的class
返回值:
  • Ext.Container
    符合指定xtype或者class的第一个容器
Component
fireEvent( String eventName, Object... args ) : Boolean
用传入的参数触发指定的事件 (减去事件名)。 一个事件可以被设置为冒泡 Obse...

用传入的参数触发指定的事件 (减去事件名)。

一个事件可以被设置为冒泡到Observable父类继承树(参看 Ext.Component.getBubbleTarget) 调用enableBubble实现。

参数:
  • eventName : String
    触发的事件名。
  • args : Object...
    传递给处理器的可变长度参数。
返回值:
  • Boolean
    如果有任何的处理器返回false则返回false，否则返回true。
Observable
focus ( [ Boolean selectText ], [ Boolean/Number delay ] ) : Ext.Component
尝试将当前组件设为焦点。
尝试将当前组件设为焦点。
参数:
  • selectText : Boolean
    (可选) 如果可用，同时选中组件内部的文本
  • delay : Boolean/Number
    (可选)将当前组件设置为焦点的延迟时间(设置为true等于0毫秒)
返回值:
  • Ext.Component
    this
Component
getActiveError () : String
获取当前表单项活动的出错消息。
获取当前表单项活动的出错消息。
参数:
  • 无。
返回值:
  • String
    返回表单项上活动的出错消息，如果没有错误，返回一个空字符串。
Field
getBox ( [ Boolean local ] ) : Object
获取组件底层元素当前盒子模型的尺寸。（译者注：盒子模型是CSS术语，详细解释请自行搜索。）
获取组件底层元素当前盒子模型的尺寸。（译者注：盒子模型是CSS术语，详细解释请自行搜索。）
参数:
  • local : Boolean
    (可选)值为true时，组件的left值和top值将代替页面的XY被返回。(默认值为false)
返回值:
  • Object
    返回值的格式{x, y, width, height}
BoxComponent
getBubbleTarget () : Ext.Container
为Observable的fireEvent方法提供链接，它沿着继承结构进行冒泡操作。
为Observable的fireEvent方法提供链接，它沿着继承结构进行冒泡操作。
参数:
  • 无。
返回值:
  • Ext.Container
    拥有当前组件的容器。
Component
getEl () : Ext.Element
返回 Ext.Element ，它包装了当前组件。...

返回 Ext.Element ，它包装了当前组件。

通常情况下，这将是一个<DIV>元素，它是由该类的onRender方法创建的， 但是可以使用autoEl配置项 覆盖它。

注意: 此元素将会一直处于无效状态直到当前组件渲染完成。

如需向当前组件的 DOM事件(而不是当前组件自己的Observable事件)添加监听器， 更多建议，参见 listeners 配置项，或者直接使用一个render监听器:

new Ext.Panel({
    title: 'The Clickable Panel',
    listeners: {
        render: function(p) {
            // Append the Panel to the click handler's argument list.
            p.getEl().on('click', handlePanelClick.createDelegate(null, [p], true));
        },
        single: true  // Remove the listener after first invocation
    }
});
参数:
  • 无。
返回值:
  • Ext.Element
    包装当前组件的元素。
Component
getErrors () : Array
运行CheckboxGroup的校验器并返回一个所有错误的数组。 默认情况下唯一的错误是如果...
运行CheckboxGroup的校验器并返回一个所有错误的数组。 默认情况下唯一的错误是如果allowBlank被设置为true并且没有 项目被选中。
参数:
  • 无。
返回值:
  • Array
    所有校验错误数组
CheckboxGroup
getHeight () : Number
获取该组件的当前高度值。
获取该组件的当前高度值。
参数:
  • 无。
返回值:
  • Number
BoxComponent
getId () : String
返回当前组件的id，如果没有定义id，则自动生成并返回一个id:'ext-comp-'...
返回当前组件的 id 如果没有定义 id 则自动生成并返回一个 id

'ext-comp-' + (++Ext.Component.AUTO_ID)
参数:
  • 无。
返回值:
  • String
    id
Component
getItemId () : String
返回当前组件的 itemId 。 如果没有通过配置参数指定 itemId 那么，将会使用...
返回当前组件的 itemId 。 如果没有通过配置参数指定 itemId 那么，将会使用 getId 返回 id 。
参数:
  • 无。
返回值:
  • String
Component
getName () : String
如果可用，返回表单项的 name 或者 hiddenName 属性。
如果可用，返回表单项的 name 或者 hiddenName 属性。
参数:
  • 无。
返回值:
  • String
    name 表单项的{@link Ext.form.Field#name name}或者{@link Ext.form.ComboBox#hiddenName hiddenName}
Field
getOuterSize () : Object
获取当前组件所在元素的尺寸大小，包括边缘的空白处。
获取当前组件所在元素的尺寸大小，包括边缘的空白处。
参数:
  • 无。
返回值:
  • Object
    一个包含元素大小的对象 {width: (element width + left/right margins), height: (element height + top/bottom margins)}
BoxComponent
getPosition ( [ Boolean local ] ) : Array
获取组件底层元素当前的XY位置。
获取组件底层元素当前的XY位置。
参数:
  • local : Boolean
    (可选)如果为true，将返回元素的left和top值，而不是相对于页面内的 XY。(默认值为 false)
返回值:
  • Array
    元素的XY位置值(例如：[100, 200])
BoxComponent
getResizeEl () : Ext.Element
返回该组件的最外层用来定义这些组件整体大小的Element...

返回该组件的最外层用来定义这些组件整体大小的Element对象。

通常用 getEl 方法将会返回相同的Element对象，但在有些情况下，组件可能有一些更多的封装了它的主要动态Element对象的Element对象。

例如ComboBox。它是封装在一个包含<input>元素的包装元素里(这将返回其 getEl方法和触发按钮的元素)。返回的元素为resizeEl。

参数:
  • 无。
返回值:
  • Ext.Element
    The Element which is to be resized by size managing layouts.
BoxComponent
getSize () : Object
获取组件底层元素当前的大小。
获取组件底层元素当前的大小。
参数:
  • 无。
返回值:
  • Object
    一个包含元素大小的对象{width: (element width), height: (element height)}
BoxComponent
getValue () : Array
获得分组中选中的 Ext.form.Checkbox 数组。
获得分组中选中的 Ext.form.Checkbox 数组。
参数:
  • 无。
返回值:
  • Array
    选中的复选框数组。
CheckboxGroup
getWidth () : Number
获取该组件的当前宽度值。
获取该组件的当前宽度值。
参数:
  • 无。
返回值:
  • Number
BoxComponent
getXType () : String
获取当前组件的xtype，它是用 Ext.ComponentMgr 注册的。 所有可用的xtype列表，参见...
获取当前组件的xtype，它是用 Ext.ComponentMgr 注册的。 所有可用的xtype列表，参见 Ext.Component 类头部。示例用法:

var t = new Ext.form.TextField();
alert(t.getXType());  // alerts 'textfield'
参数:
  • 无。
返回值:
  • String
    The xtype
Component
getXTypes () : String
返回此组件的xtype继承树，用字符'-'分隔。 所有可用的xtype值...

返回此组件的xtype继承树，用字符'-'分隔。 所有可用的xtype值，请参见Ext.Component 类的头部。

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

示例用法:

var t = new Ext.form.TextField();
alert(t.getXTypes());  // alerts 'component/box/field/textfield'
参数:
  • 无。
返回值:
  • String
    xtype层次字符串
Component
hasListener( String eventName ) : Boolean
检测对象是否包含指定事件的任何监听器
检测对象是否包含指定事件的任何监听器
参数:
  • eventName : String
    检测的事件名
返回值:
  • Boolean
    如果事件被监听则为true，否则为false
Observable
hide () : Ext.Component
隐藏当前组件。 监听 beforehide' 事件并且返回false 可以取消隐藏组件的操作。 在隐藏组件之后触发...
隐藏当前组件。 监听 beforehide' 事件并且返回false 可以取消隐藏组件的操作。 在隐藏组件之后触发 ' hide' 事件。 如果组件被配置成 hidden 那么此方法在内部被调用。
参数:
  • 无。
返回值:
  • Ext.Component
    this
Component
isDirty () : Boolean
如果此表单项的值与原始值相比发生了改变，返回true。 如果表单项...

如果此表单项的值与原始值相比发生了改变，返回true。 如果表单项被禁用或者尚未被渲染将会返回false。

注意，如果所属的 form 配置了一个Ext.form.BasicForm， 那么在使用Ext.form.BasicForm. setValues 加载值之后，原始值将会被更新。

参数:
  • 无。
返回值:
  • Boolean
    如果此表单项的值与原始值相比发生了改变(并且没有被禁用)，返回true，其它返回false。
Field
isValid ( Boolean preventMark ) : Boolean
通过 校验 表单项 处理后的值 ，返回表单项当前值是否合法。...
通过 校验 表单项 处理后的值 ，返回表单项当前值是否合法。 注意: disabled 的表单项将会被忽略。
参数:
  • preventMark : Boolean
    True将会禁止把表单项标记为非法
返回值:
  • Boolean
    如果值是合法的，为true，其它为false
Field
isVisible () : Boolean
如果当前组件可见，返回true。
如果当前组件可见，返回true。
参数:
  • 无。
返回值:
  • Boolean
    如果当前组件可见，返回true，其它返回false。
Component
isXType ( String xtype , [ Boolean shallow ] ) : Boolean
Tests whether or not this Component is of a specific xtype. This can test whether this Component is descended from th...

测试此组件是否是指定的xtype。此方法既可以测试是否是指定的xtype的某个子类， 或者它是否直接是指定的xtype类(shallow=true)。

如果使用你自己的子类，必须知道组件必须注册它的xtype值。

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

示例用法:

var t = new Ext.form.TextField();
var isText = t.isXType('textfield');        // true
var isBoxSubclass = t.isXType('box');       // true, descended from BoxComponent
var isBoxInstance = t.isXType('box', true); // false, not a direct BoxComponent instance
参数:
  • xtype : String
    需要为当前组件进行检测的xtype
  • shallow : Boolean
    (可选) 如果为false，检测组件是否是xtype继承树中的某个子类（默认是这种情况）， 如果为true，只检测组件是否是指定的xtype类型。
返回值:
  • Boolean
    如果当前组件是指定xtype的子类，返回true，其它返回flase。
Component
markInvalid ( [ String msg ] ) : void
显示一个关联到当前表单项的出错信息， 使用msgTarget 来决定如何显示消息并将...

显示一个关msgTarget 来决定如何显示消息并将 invalidClass 应用到表单项的UI元素上。

注意: 如果表单项的值确实通过了校验， 此方法不会导致表单项的 validate 方法返回 false 。 所以简单地把一个表单项标记为非法并不会阻止表单项 通过设置的 Ext.form.Action.Submit.clientValidation 被提交。

invalid.
参数:
  • msg : String
    (可选)校验信息(默认为invalidText)
返回值:
  • void
Field
mon ( Observable|Element item , Object|String ename , Function fn , Object scope , Object opt ) : void
向任何Observable对象(或者元素)上添加监听器，监听器将会在组件...

向任何Observable对象(或者元素)上添加监听器，监听器将会在组件销毁时被自动删除。
用法：

myGridPanel.mon(myGridPanel.getSelectionModel(), 'selectionchange', handleSelectionChange, null, {buffer: 50});

or:

myGridPanel.mon(myGridPanel.getSelectionModel(), {
    selectionchange: handleSelectionChange,
    buffer: 50
});
参数:
  • item : Observable|Element
    需要添加listener/listeners的项目。
  • ename : Object|String
    事件名，或者一个包含事件名属性的对象。
  • fn : Function
    (可选) 如果 ename 参数是一个事件名，此参数为处理函数。
  • scope : Object
    (可选)如果 ename 参数是一个事件名称，此参数是作用域 ( this 引用)，监听函数将会在此作用域中被执行。
  • opt : Object
    (可选)如果 ename 参数是一个事件名称， 此参数是 addListener 配置项。
返回值:
  • void
Component
mun ( Observable|Element item , Object|String ename , Function fn , Object scope ) : void
删除通过mon 方法添加的监听器。
删除通过mon 方法添加的监听器。
参数:
  • item : Observable|Element
    需要删除listener/listeners的项目。
  • ename : Object|String
    事件名称，或者一个包含事件名称属性的对象。
  • fn : Function
    (可选)如果 ename 参数是一个事件名称，此参数是一个处理函数。
  • scope : Object
    (可选)如果 ename 参数是一个事件名称，此参数是作用域 ( this 引用)，监听函数将会在此作用域中被执行。
返回值:
  • void
Component
nextSibling () : Ext.Component
返回所属容器中的下一个组件
返回所属容器中的下一个组件
参数:
  • 无。
返回值:
  • Ext.Component
Component
on( String eventName, Function handler, [Object scope], [Object options] ) : void
给对象添加事件处理器 (addListener的简写形式)
给对象添加事件处理器 (addListener的简写形式。)
参数:
  • eventName : String
    监听的事件类型
  • handler : Function
    事件调用的方法
  • scope : Object
    （可选）处理方法执行时的作用域 (this 的引用)。 如果被忽略。默认为触发事件的对象。
  • options : Object
    可选 包含处理器配置的对象。
返回值:
  • void
Observable
previousSibling () : Ext.Component
返回所属容器中的前一个组件
返回所属容器中的前一个组件
参数:
  • 无。
返回值:
  • Ext.Component
Component
processValue ( Mixed value ) : void
仅仅在需要准备原始值供校验时，才需要覆盖此方法(参见 validate和 isValid)。...
仅仅在需要准备原始值供校验时，才需要覆盖此方法(参见 validate和 isValid)。 此方法被期望为表单项返回处理后的值，此值将会被用来进行校验 (参见validateValue方法)。
参数:
  • value : Mixed
返回值:
  • void
Field
purgeListeners() : void
移除对象上所有的监听器
移除对象上所有的监听器
参数:
  • 无。
返回值:
  • void
Observable
relayEvents( Object o, Array events ) : void
从指定的Observable上传递选择的事件就好像被当前对象触发一样。
从指定的Observable上传递选择的事件就好像被当前对象触发一样。
参数:
  • o : Object
    该Observable上的事件被当前对象传递。
  • events : Array
    传递的数组名。
返回值:
  • void
Observable
removeClass ( string cls ) : Ext.Component
从组件底层的元素上删除一个CSS类。
从组件底层的元素上删除一个CSS类。
参数:
  • cls : string
    需要移除的CSS类名
返回值:
  • Ext.Component
    this
Component
removeListener( String eventName, Function handler, [Object scope] ) : void
删除一个事件处理器。
删除一个事件处理器。
参数:
  • eventName : String
    处理器关联的事件类型。
  • handler : Function
    移除的处理器。 这应该是传递到addListener里的方法的引用。
  • scope : Object
    （可选）处理器指定的初始作用域。
返回值:
  • void
Observable
render ( [ Element/HTMLElement/String container ], [ String/Number position ] ) : void
在传递进来的HTML元素中渲染当前组件。...

在传递进来的HTML元素中渲染当前组件。

如果你正在使用一个Container 对象放置当前组件，那么请不要使用render方法。

当容器第一次被渲染时，它的子组件将会被容器的 layout 管理器渲染。

某些布局管理器允许动态添加子组件。它们包括 Ext.layout.CardLayout, Ext.layout.AnchorLayout, Ext.layout.FormLayout, Ext.layout.TableLayout。

当一个新的子组件被添加时，如果容器已经被渲染了， 你可能需要调用容器的 doLayout 方法来刷新视图，它将导致所有没有被渲染的子组件进行渲染操作。 此操作是必须的，这样你可以添加多个子组件而只刷新一次layout。

当创建复杂的UI时，非常重要的一点是，请记住调整子项目的尺寸和位置是容器的 layout 管理器的职责。 如果你希望子项目的尺寸对用户交互作出反应， 你必须为容器配置一个布局管理器，它将创建和管理你心里想要的那种布局。

忽略容器的layout 配置意味着将会使用一个基本的布局管理器，它除了按次序把子组件 渲染到容器中之外什么事情都不做。 这种情况下，任何尺寸和位置的调整操作都不会发生。

参数:
  • container : Element/HTMLElement/String
    (可选) 需要在其中渲染当前组件的元素。 如果它是从一个已存在的标签中创建的，此参数应该被忽略。
  • position : String/Number
    (可选) 容器中的一个元素ID或者一个DOM节点索引， 当前组件将会被插入到它前面 (默认append到容器的尾部)
返回值:
  • void
Component
reset () : void
将表单项的当前值重置为以前加载时的值，并且清除所有校验信息。...
将表单项的当前值重置为以前加载时的值，并且清除所有校验信息。 参见Ext.form.BasicForm. trackResetOnLoad 。
参数:
  • 无。
返回值:
  • void
Field
resumeEvents() : void
重新开始触发事件。(参见suspendEvents) 如果事件以queueSuspended参数被挂起，则在事件被挂起时 ...
重新开始触发事件。(参见 suspendEvents) 如果事件以queueSuspended 参数被挂起，则在事件被挂起时触发的事件会被传递到所有的监听器上
参数:
  • 无。
返回值:
  • void
Observable
setActiveError ( String msg , Boolean suppressEvent ) : void
将当前activeError设置为所给的字符串。 触发'invalid'事件。这不会设置出错图标...
将当前activeError设置为所给的字符串。 触发'invalid'事件。这不会设置出错图标，仅仅设置消息并触发事件。 如需显示出错图标，可使用markInvalid代替，它将在内部调用此方法。
参数:
  • msg : String
    出错消息
  • suppressEvent : Boolean
    True将会禁止触发'invalid'事件
返回值:
  • void
Field
setAutoScroll ( Boolean scroll ) : Ext.BoxComponent
设置该组件内容溢出时是否自动显示滚动条。
设置该组件内容溢出时是否自动显示滚动条。
参数:
  • scroll : Boolean
    值为true的话组件自动显示滚动条。
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setDisabled ( Boolean disabled ) : Ext.Component
工具函数，使用布尔值设置有效/无效(disabled/enabled )。
工具函数，使用布尔值设置有效/无效(disabled/enabled )。
参数:
  • disabled : Boolean
返回值:
  • Ext.Component
    this
Component
setHeight ( Mixed height ) : Ext.BoxComponent
设置此组件的高度。该方法将触发resize事件。
设置此组件的高度。该方法将触发resize事件。
参数:
  • height : Mixed
    The new height to set.
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setPagePosition ( Number x , Number y ) : Ext.BoxComponent
设置组件在页面中的XY位置。 如果需要设置left和top值 ，请使用...
设置组件在页面中的XY位置。 如果需要设置left和top值 ，请使用setPosition方法。 该方法触发move事件。
参数:
  • x : Number
    The new x position
  • y : Number
    The new y position
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setPosition ( Number left , Number top ) : Ext.BoxComponent
设置组件的left和top值。设置组件的页面XY值，请使用setPagePosition方法。该方法触发...
设置组件的left和top值。设置组件的页面XY值，请使用setPagePosition方法。该方法触发move事件。
参数:
  • left : Number
    The new left
  • top : Number
    The new top
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setReadOnly ( Boolean readOnly ) : void
设置当前表单项的只读状态。
设置当前表单项的只读状态。
参数:
  • readOnly : Boolean
    表单项是否应该只读。
返回值:
  • void
Field
setSize ( Mixed width , Mixed height ) : Ext.BoxComponent
设置BoxComponent的宽度和高度。 此方法触发resize事件...
设置BoxComponent的宽度和高度。 此方法触发resize事件。此方法可以接收单独的width或者height值作为参数， 或者你可以传递像这样的一个size对象： {width:10, height:20} 。
参数:
  • width : Mixed
    设置的新的width值。这可以是：
    • 一个Number类型指定Element新的宽度 Ext.Element.defaultUnit(默认为像素 :'px')。
    • 一个String类型用于设置width的CSS样式。
    • 一个size对象格式为 {width: widthValue, height: heightValue} 。
    • 值为 undefined 时，保留原来的width不变。
  • height : Mixed
    设置的新的height值(如果第一个参数传递了一个size对象，此参数没有必要传递)。这可以是：
    • 一个Number类型指定Element新的高度 Ext.Element.defaultUnit(默认为像素 :'px')。
    • 一个String类型用于设置height的CSS样式。也有可能不会被使用到。
    • 值为 undefined 时，保留原来的height不变。
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setValue ( Mixed id , [ Boolean value ] ) : Ext.form.CheckboxGroup
设置一个项目或者分组中项目的值。...
设置一个项目或者分组中项目的值。 示例说明了如何调用此方法:
// call with name and value
myCheckboxGroup.setValue('cb-col-1', true);
// call with an array of boolean values
myCheckboxGroup.setValue([true, false, false]);
// call with an object literal specifying item:value pairs
myCheckboxGroup.setValue({
    'cb-col-2': false,
    'cb-col-3': true
});
// use comma separated string to set items with name to true (checked)
myCheckboxGroup.setValue('cb-col-1,cb-col-3');
See Ext.form.Checkbox.setValue for additional information.
参数:
  • id : Mixed
    需要选中的checkbox，或者像显示的例子中描述的一样。
  • value : Boolean
    (可选)需要给项目设置的值。
返回值:
  • Ext.form.CheckboxGroup
    this
CheckboxGroup
setVisible ( Boolean visible ) : Ext.Component
工具方法，通过使用布尔值隐藏或者显示当前组件。
工具方法，通过使用布尔值隐藏或者显示当前组件。
参数:
  • visible : Boolean
    true时显示，false时隐藏
返回值:
  • Ext.Component
    this
Component
setWidth ( Mixed width ) : Ext.BoxComponent
设置组件的宽度。 此方法触发resize事件。
设置组件的宽度。 此方法触发resize事件。
参数:
  • width : Mixed
    The new width to set.
返回值:
  • Ext.BoxComponent
    this
BoxComponent
show () : Ext.Component
显示当前组件。监听' beforeshow' 事件，返回 false 取消显示组件...
显示当前组件。监听' beforeshow' 事件，返回 false 取消显示组件。在显示组件之后触发' show' 事件。
参数:
  • 无。
返回值:
  • Ext.Component
    this
Component
suspendEvents( Boolean queueSuspended ) : void
暂停触发所有的事件。 (参看resumeEvents)
暂停触发所有的事件。（参看 resumeEvents)
参数:
  • queueSuspended : Boolean
    如果传递为true则排列好暂停的事件使得在调用 resumeEvents 后再触发它们，而不是抛弃所有暂停的事件。
返回值:
  • void
Observable
syncSize () : Ext.BoxComponent
强制组件的大小按照此组件底层元素当前的高度和宽度计算。
强制组件的大小按照此组件底层元素当前的高度和宽度计算。
参数:
  • 无。
返回值:
  • Ext.BoxComponent
    this
BoxComponent
un( String eventName, Function handler, [Object scope] ) : void
删除一个事件处理器(removeListener方法的简写形式)
删除一个事件处理器(removeListener方法的简写形式。)
参数:
  • eventName : String
    处理器关联的事件类型
  • handler : Function
    被删除的处理器 这应该是传入 addListener 中的方法的引用。
  • scope : Object
    （可选）为处理器指定的初始作用域。
返回值:
  • void
Observable
unsetActiveError ( Boolean suppressEvent ) : void
清除activeError并触发'valid'事件。此方法被clearInvalid在内部进行...
清除activeError并触发'valid'事件。此方法被clearInvalid在内部进行调用， 并且一般情况下没有必要手工调用
参数:
  • suppressEvent : Boolean
    True将禁止触发'invalid'事件
返回值:
  • void
Field
update ( Mixed htmlOrData , [ Boolean loadScripts ], [ Function callback ] ) : void
刷新组件的内部区域。
刷新组件的内部区域。
参数:
  • htmlOrData : Mixed
    如果已经通过tpl为当前组件配置了一个模板，那么 将会使用此参数来装配模板。 如果没有为当前组件配置模板，组件的内容区域将会通过Ext.Element 进行刷新。
  • loadScripts : Boolean
    (可选)只用在使用html配置时此参数才合法。默认为false。
  • callback : Function
    (可选)只用在使用html配置时此参数才合法。 当脚本加载完成时回调函数才被执行。
返回值:
  • void
Component
updateBox ( Object box ) : Ext.BoxComponent
设置此组件底层元素的盒子模型尺寸。(译者注：盒子模型是CSS术语，详细资料请自行搜索。)
设置此组件底层元素的盒子模型尺寸。(译者注：盒子模型是CSS术语，详细资料请自行搜索。)
参数:
  • box : Object
    一个格式为{x, y, width, height}的对象
返回值:
  • Ext.BoxComponent
    this
BoxComponent
validate () : Boolean
校验表单项的值
校验表单项的值
参数:
  • 无。
返回值:
  • Boolean
    如果值合法，为true,否则为false
Field
validateValue ( Mixed The ) : Boolean
使用getErrors创建一个校验出错信息数组。 如果发现了任何错误，将会使用第一个错误作为参数...
使用getErrors创建一个校验出错信息数组。 如果发现了任何错误，将会使用第一个错误作为参数调用markInvalid方法并返回 false，否则返回true。以前，要求子类提供此方法的一个实现以处理校验过程--- 从3.2开始，应该用覆盖getErrors方法的方式替代。
参数:
  • The : Mixed
    表单项的当前值
返回值:
  • Boolean
    如果所有校验都通过，此值为true，如果一个或多个校验失败，则为false
Field

公共事件

Event Defined By
added : ( Ext.Component this , Ext.Container ownerCt , number index )
当一个组件被添加到一个Ext.Container时触发
当一个组件被添加到一个Ext.Container时触发
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • ownerCt : Ext.Container
    用于组件的容器
  • index : number
    添加组件的位置
Component
afterrender : ( Ext.Component this )
在组件渲染完成之后触发...

在组件渲染完成之后触发。

afterrender事件在当前组件被rendered 结束之后、在为组件定义的所有afterRender方法执行之后 触发，并且，如果有stateful， 也在状态被保存之后才触发。

监听器将会以如下参数格式被调用:
  • this : Ext.Component
Component
beforedestroy : ( Ext.Component this )
在组件 destroyed 之前触发。 在事件监听器中返回false以停止 destroy 操作。
在组件 destroyed 之前触发。 在事件监听器中返回false以停止 destroy 操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforehide : ( Ext.Component this )
在调用hide方法隐藏组件之前触发。 在事件监听器中返回false可以停止隐藏操作。
在调用hide方法隐藏组件之前触发。 在事件监听器中返回false可以停止隐藏操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforerender : ( Ext.Component this )
在组件被rendered 之前触发。 在事件监听器中返回false可以停止render 操作。
在组件被rendered 之前触发。 在事件监听器中返回false可以停止render 操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforeshow : ( Ext.Component this )
在调用show()方法现实组件之前触发。 事件处理函数返回false可以停止show。
在调用show 方法现实组件之前触发。 事件处理函数返回false可以停止show。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforestaterestore : ( Ext.Component this , Object state )
在组件状态恢复之前触发。返回false停止恢复状态操作。
在组件状态恢复之前触发。返回false停止恢复状态操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    StateProvider返回的状态哈希值。 如果没有禁止此事件，那么状态对象会被传递给applyState。 默认情况下，这样简单地把属性值拷贝到当前组件中。 可以覆盖此方法以提供自定的状态恢复操作。
Component
beforestatesave : ( Ext.Component this , Object state )
在组件状态被保存到配置的状态提供者之前触发。 返回false可以停止保存。
在组件状态被保存到配置的状态提供者之前触发。 返回false可以停止保存。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    状态值哈希。 这由在组件上调用getState() 方法决定。 此方法必须由开发者提供，返回是否需要对状态进行描述，默认情况下， Ext.Component有一个空实现。
Component
blur : ( Ext.form.Field this )
当表单项时区输入焦点时触发。
当表单项时区输入焦点时触发。
监听器将会以如下参数被调用:
  • this : Ext.form.Field
Field
change : ( Ext.form.CheckboxGroup this , Array checked )
当一个子checkbox的值改变时触发。
当一个子checkbox的值改变时触发。
监听器将会以如下参数被调用:
  • this : Ext.form.CheckboxGroup
  • checked : Array
    包含已选中项目的数组。
CheckboxGroup
destroy : ( Ext.Component this )
在组件被销毁之后触发。
在组件被destroyed之后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
disable : ( Ext.Component this )
在组件被设置为无效状态后触发。
在组件被设置为无效状态后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
enable : ( Ext.Component this )
当组件被设置为有效(enabled)之后触发。
当组件被设置为有效(enabled)之后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
focus : ( Ext.form.Field this )
当表单项获得输入焦点时触发。
当表单项获得输入焦点时触发。
监听器将会以如下参数格式被调用:
  • this : Ext.form.Field
Field
hide : ( Ext.Component this )
在组件被隐藏之后触发。 当调用hide 方法隐藏组件之后触发。
在组件被隐藏之后触发。 当调用hide 方法隐藏组件之后触发。
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
invalid : ( Ext.form.Field this , String msg )
在表单项被标记为非法之后触发。
在表单项被标记为非法之后触发。
监听器将会以如下参数格式调用:
  • this : Ext.form.Field
  • msg : String
    校验信息
Field
move : ( Ext.Component this , Number x , Number y )
在组件移动之后触发。
在组件移动之后触发。
监听器将会用如下的参数格式来调用:
  • this : Ext.Component
  • x : Number
    The new x position
  • y : Number
    The new y position
BoxComponent
removed : ( Ext.Component this , Ext.Container ownerCt )
当一个组件被从Ext.Container容器中删除时触发
当一个组件被从Ext.Container容器中删除时触发
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • ownerCt : Ext.Container
    持有组件的容器
Component
render : ( Ext.Component this )
在组件被渲染之后触发。
在组件被 rendered(渲染) 之后触发。
监听器将以如下的参数格式被调用:
  • this : Ext.Component
Component
resize : ( Ext.Component this , Number adjWidth , Number adjHeight , Number rawWidth , Number rawHeight )
在组件被调整大小之后触发。
在组件被调整大小之后触发。
监听器将以如下的参数格式被调用:
  • this : Ext.Component
  • adjWidth : Number
    这是width调整后的值
  • adjHeight : Number
    这是height调整后的值
  • rawWidth : Number
    这是width原来的值
  • rawHeight : Number
    这是height原来的值
BoxComponent
show : ( Ext.Component this )
在调用show 方法显示组件之后触发。
在调用show 方法显示组件之后触发。
监听器将会用如下的参数格式被调用:
  • this : Ext.Component
Component
specialkey : ( Ext.form.Field this , Ext.EventObject e )
当任何和导航有关的键被按下时触发(上下左右箭头, tab, 回车,esc, 等等) is pressed. 处理其它按键参见...
当任何和导航有关的键被按下时触发(上下左右箭头, tab, 回车,esc, 等等) is pressed. 处理其它按键参见 Ext.Panel.keys或者 Ext.KeyMap。 你可以检测 Ext.EventObject.getKey 以便获知哪个键被按下。例如：
var form = new Ext.form.FormPanel({
    ...
    items: [{
            fieldLabel: 'Field 1',
            name: 'field1',
            allowBlank: false
        },{
            fieldLabel: 'Field 2',
            name: 'field2',
            listeners: {
                specialkey: function(field, e){
                    // e.HOME, e.END, e.PAGE_UP, e.PAGE_DOWN,
                    // e.TAB, e.ESC, arrow keys: e.LEFT, e.RIGHT, e.UP, e.DOWN
                    if (e.getKey() == e.ENTER) {
                        var form = field.ownerCt.getForm();
                        form.submit();
                    }
                }
            }
        }
    ],
    ...
});
监听器将会以如下参数格式被调用:
  • this : Ext.form.Field
  • e : Ext.EventObject
    事件对象
Field
staterestore : ( Ext.Component this , Object state )
组件状态被存储之后触发。
组件状态被存储之后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    StateProvider返回的状态哈希值。 如果没有禁止此事件，那么状态对象会被传递给applyState。 默认情况下，这样简单地把属性值拷贝到当前组件中。 可以覆盖此方法以提供自定的状态恢复操作。
Component
statesave : ( Ext.Component this , Object state )
在组件状态被保存到所配置的状态提供者之后触发。
在组件状态被保存到所配置的状态提供者之后触发。
监听器将会用如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    状态值hash。 这是由在足见上调用getState() 方法决定的。 开发者必须提供此方法以返回是否需要恢复状态，默认情况下， Ext.Component有一个空实现。
Component
valid : ( Ext.form.Field this )
在表单项被校验无错误之后触发。
在表单项被校验无错误之后触发。
监听器将会以如下参数格式被调用:
  • this : Ext.form.Field
Field


Observable
    Component
      BoxComponent
        Field
          TextField
            TriggerField
              ComboBox

Class Ext.form.ComboBox

包: | Ext.form
定义类的文件: | Combo.js
类: | ComboBox
子类: | TimeField
继承自: | TriggerField

下拉选择框控制器，提供了自动完成、远程加载、分页以及许多其它特性。

ComboBox运作的方式与传统的HTML <select>表单项类似。 不同的是，为了提交valueField 你必须指定一个hiddenName，用来 创建一个隐藏域，以便持有valueField的值。 displayField 被显示在文本框中，它根据name进行命名。

Events

如果当ComboBox中的东西被选中时需要做一些事情，可以配置select事件:

var cb = new Ext.form.ComboBox({
    // 你的所有配置选项
    listeners:{
         scope: yourScope,
         'select': yourFunction
    }
});

// 可选地，你可以在对象被创建后分配事件:
var cb = new Ext.form.ComboBox(yourOptions);
cb.on('select', yourFunction, yourScope);

ComboBox in Grid

如果在Editor Grid 使用ComboBox，当editor处于非活动状态时，将会需要一个 renderer 来显示displayField。 可以手动设置renderer或者实现一个可重用的render，例如:

//创建可重用的renderer
Ext.util.Format.comboRenderer = function(combo){
    return function(value){
        var record = combo.findRecord(combo.valueField, value);
        return record ? record.get(combo.displayField) : combo.valueNotFoundText;
    }
}

// 创建combo实例
var combo = new Ext.form.ComboBox({
    typeAhead: true,
    triggerAction: 'all',
    lazyRender:true,
    mode: 'local',
    store: new Ext.data.ArrayStore({
        id: 0,
        fields: [
            'myId',
            'displayText'
        ],
        data: [[1, 'item1'], [2, 'item2']]
    }),
    valueField: 'myId',
    displayField: 'displayText'
});

// grid中使用的column model片段
var cm = new Ext.grid.ColumnModel([{
       ...
    },{
       header: "Some Header",
       dataIndex: 'whatever',
       width: 130,
       editor: combo, // 指定一个到combo实例的引用
       renderer: Ext.util.Format.comboRenderer(combo) //向可复用的renderer中传递combo实例
    },
    ...
]);

Filtering

ComboBox 用来过滤自身， 关于手动过滤ComboBox store的信息，参见 lastQuery 。

配置项

Config Options Defined By
allQuery : String
发送给服务器的查询文本，用来为列表返回所有记录而不进行过滤(默认为'')
ComboBox
allowBlank : Boolean
指定为false将会只允许值的长度>0(默认为true)
TextField
allowDomMove : Boolean
在渲染时组件是否可以移动Dom节点(默认为true)。
Component
anchor : String
注: 这个配置只用于该组件被包含在一个已使用AnchorLayout...

注: 这个配置只用于该组件被包含在一个已使用 AnchorLayout (或者其子类)配置的Container时。 基于布局管理器，例如：

  • Ext.form.FormPanel
  • 指定 layout: 'anchor' // or 'form', or 'absolute'

参见 Ext.layout.AnchorLayout. anchor 。

BoxComponent
applyTo : Mixed
指定一个元素的id、一个DOM元素或者一个已经存在并被渲染到DIV中的元素，此DIV已经被...

指定一个元素的id、一个DOM元素或者一个已经存在并被渲染到DIV中的元素，此DIV已经被 渲染到document中，并且为当前组件指定了一些结构化的标签。

  • 描述 :
      当使用了 applyTo， 在主元素中也可以用id或者CSS类名来指定组件的托管部分， 并且，如果可以的话，创建的组件可能也会试图在那个标签中创建它的子组件。
  • 注意 :
      当使用此配置项时，无需调用render()方法。
      如果指定了applyTo属性，任何传递给 renderTo 的值都会被忽略，并且目标元素的父节点将会自动被用作组件的容器。
Component
autoCreate : String/Object
一个DomHelper 元素描述，或者对于默认元素描述为true。 用来创建包装当前组件的...

一个DomHelper 元素描述，或者对于默认元素描述为true。 用来创建包装当前组件的Element。 细节参见autoEl 。默认为:

{tag: "input", type: "text", size: "24", autocomplete: "off"}
ComboBox
autoEl : Mixed
一个表签名或者一个 DomHelper 描述，用来创建 Element ，它将封装当前组件...

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

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

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

{
    xtype: 'box',
    autoEl: {
        tag: 'img',
        src: 'http://www.example.com/example.jpg'

    }
}, {
    xtype: 'box',
    autoEl: {
        tag: 'blockquote',
        html: 'autoEl is cool!'
    }
}, {
    xtype: 'container',
    autoEl: 'ul',
    cls: 'ux-unordered-list',
    items: {
        xtype: 'box',
        autoEl: 'li',
        html: 'First list item'
    }
}
Component
autoHeight : Boolean
如果值为true，height配置项为'auto'，否则值为false的话使用固定的高度...

如果值为true，height配置项为'auto'，否则值为false的话使用固定的高度， 或者可以由其父类容器 layout manager来控制。(默认值为 false)。

注: 虽然很多组件继承了这个配置选项，但不是所有这些组件的自适应高度配置都会像期望的那样起作用。 设置autoHeight：值为true时，浏览器将根据元素的内容自动设置高度，这将意味着Ext不会去管理高度。

如果是由浏览器来管理高度，需要注意的是，通过浏览器进行调整的结构组件内不能被发现， 因此宽度的变化可能导致需要进行同步处理元素的高度。 例如：

var w = new Ext.Window({
    title: 'Window',
    width: 600,
    autoHeight: true,
    items: {
        title: 'Collapse Me',
        height: 400,
        collapsible: true,
        border: false,
        listeners: {
            beforecollapse: function() {
                w.el.shadow.hide();
            },
            beforeexpand: function() {
                w.el.shadow.hide();
            },
            collapse: function() {
                w.syncShadow();
            },
            expand: function() {
                w.syncShadow();
            }
        }
    }
}).show();
BoxComponent
autoScroll : Boolean
如果值为true，将会在该元素上使用overflow:'auto'配置，并且在必要的时候...
如果值为true，将会在该元素上使用overflow:'auto'配置，并且在必要的时候自动显示滚动条，否则，溢出部分的组件都会被切除(默认值为 false)。
BoxComponent
autoSelect : Boolean
true将会选中数据store收集到的第一条结果 (默认为true)。 false将会需要手动从下拉列表中选择，用来设置组件的值，除非...
true将会选中数据store收集到的第一条结果 (默认为true)。 false将会需要手动从下拉列表中选择，用来设置组件的值，除非 typeAheadDelay) 的值为true。
ComboBox
autoShow : Boolean
如果组件需要检测隐藏CSS属性(如 'x-hidden' 或者 'x-hide-display')并且在渲染时删除...
如果组件需要检测隐藏CSS属性(如 'x-hidden' 或者 'x-hide-display')并且在渲染时删除它们 (默认为false)，设置此值为true。
Component
autoWidth : Boolean
如果为true，使用width:'auto'配置，否则使用固定的宽度...

如果为true，使用width:'auto'配置，否则使用固定的宽度，或者可以由其父类容器的layout manager来控制。(默认值为 false)。

注: 虽然很多组件继承了这个配置选项，但不是所有这些组件的自适应宽度配置都会像期望的那样起作用。 设置autoWidth：值为true时，浏览器将根据元素的内容自动设置宽度，这将意味着Ext不会去管理宽度。

如果是由浏览器来管理宽度，需要注意的是，通过浏览器进行调整的结构组件内不能被发现，因此宽度的变化可能导致需要进行同步处理元素的宽度。 例如，在这个元素的目标是：

<div id='grid-container' style='margin-left:25%;width:50%'></div>
当浏览器窗口改变时，渲染后的Panel必须监听浏览器窗口大小的变化，以便通知子项，浏览器改变了其宽度：

var myPanel = new Ext.Panel({
    renderTo: 'grid-container',
    monitorResize: true, // relay on browser resize
    title: 'Panel',
    height: 400,
    autoWidth: true,
    layout: 'hbox',
    layoutConfig: {
        align: 'stretch'
    },
    defaults: {
        flex: 1
    },
    items: [{
        title: 'Box 1',
    }, {
        title: 'Box 2'
    }, {
        title: 'Box 3'
    }],
});
BoxComponent
blankText : String
如果 allowBlank 校验失败时需要显示的出错信息(默认为'This field is required')
TextField
boxMaxHeight : Number
设置组件的最大高度值...

设置组件的最大高度值。

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

BoxComponent
boxMaxWidth : Number
设置组件的最大宽度值...

设置组件的最大宽度值。

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

BoxComponent
boxMinHeight : Number
设置组件的最小高度值...

设置组件的最小高度值。

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

BoxComponent
boxMinWidth : Number
设置组件的最小宽度值...

设置组件的最小宽度值。

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

BoxComponent
bubbleEvents : Array
一个事件数组，当这些事件被触发时，将会被冒泡到所有父容器中。参见....

一个事件数组，当这些事件被触发时，将会被冒泡到所有父容器中。参见 Ext.util.Observable.enableBubble。 默认为 []。

Component
clearCls : String
应用到特殊的clearing div的CSS类， 这个clearing div直接渲染到每个form field的包装器后面...

应用到特殊的clearing div的CSS类， 这个clearing div直接渲染到每个form field的包装器后面，以提供 清除field的功能(默认为 'x-form-clear-left')。

注意: 只有在当前组件被渲染到一个使用FormLayout 布局(例如 Ext.form.FormPanel 或者指定 layout:'form')的 容器中、或者是指定了一个fieldLabel 、或者指定isFormField=true 时此配置才有效。

另请参见 Ext.layout.FormLayout. fieldTpl。

Component
clearFilterOnReset : Boolean
true 当调用reset时，将会清除store上的所有filter(在local模式下) (默认为true)
ComboBox
cls : String
一个可选的额外CSS类，它将被添加到当前组件的元素上(默认为'')...
一个可选的额外CSS类，它将被添加到当前组件的元素上(默认为'')。 此属性对于在组件上，或者它的任何使用标准CSS规则的孩子节点上， 添加定制的样式非常有用。
Field
contentEl : String
(可选)指定一个已存在的HTML元素，或者一个已存在HTML元素的...

(可选)指定一个已存在的HTML元素，或者一个已存在HTML元素的 id ，它们将被用作当前组件的内容。

  • 描述 :
    此配置选项被用来将一个已存在的HTML元素 插入到一个新组件(在组件渲染之后它简单地移动DOM元素) 的layout元素中，使它成为该组件的内容。
  • 注意 :
    指定的HTML元素将被append到组件的layout元素中， 在所有配置的 HTML 被插入之后， 并且，这样的话，在render事件 被触发时，document中将不再包含此元素。
    指定的HTML元素将不会参与组件所有可能使用的 layout 过程(译者注：指这些HTML元素 不会参与布局操作)。 它仅是HTML而已。布局操作实在孩子 items 上进行的。
    添加 x-hidden 或者 x-hide-display CSS类，以防在内容渲染到panel时发生闪烁。
Component
ctCls : String
一个可选的外部CSS样式，添加到这个组件的容器(默认值为 '')。 这个方法对于使用标准的CSS规则...

一个可选的外部CSS样式，添加到这个组件的容器(默认值为 '')。 这个方法对于使用标准的CSS规则，为组件或它的任何一个子组件添加特定的样式非常有用。 参见 Ext.layout.ContainerLayout和 extraCls 。

注意: ctCls 默认为 ''期望如下的类，它们将指定一个默认值:

  • Box Layout : 'x-box-layout-ct'
使用一个额外的CSS类配置以上的Class，它是append到默认对象上的。例如， 对于BoxLayout (Hbox and Vbox):
                                ctCls: 'x-box-layout-ct custom-class'

Component
data : Mixed
初始化数据集，它将被应用到 tpl 上以刷新组件的内容区域。
Component
disableKeyFilter : Boolean
指定为true将会禁用按键过滤(默认为false)
TextField
disabled : Boolean
当前组件处于无效状态时为true。 Read-only.
Field
disabledClass : String
当组件处于无效状态时添加到组件上的CSS类(默认为 'x-item-disabled')。
Component
displayField : String
需要绑定到当前ComboBox的底层 数据值名称 (如果...
需要绑定到当前ComboBox的底层 数据值名称 (如果mode = 'remote'时默认为undefined， 如果 转换一个选中项目 或者 根据store的配置项自动生成field name 时为'field1'。

另请参见 valueField 。

注意: 如果在Editor Grid中使用 ComboBox，当editor处于非活动状态时，需要一个 renderer 显示displayField。

ComboBox
editable : Boolean
false将阻止用户直接向表单项中输入文本，表单项将仅仅响应...
false将阻止用户直接向表单项中输入文本，表单项将仅仅响应 在触发按钮上进行鼠标点击然后设置值。(默认为true)。
TriggerField
emptyClass : String
应用到空表单项的CSS类，以便样式化 emptyText (默认为'x-form-empty-field')。...
应用到空表单项的CSS类，以便样式化 emptyText (默认为'x-form-empty-field')。 根据表单项当前值，此样式按需要被自动添加和删除。
TextField
emptyText : String
放置到空表单项中的默认文本(默认为null)。 注意:...
放置到空表单项中的默认文本(默认为null)。 注意: 如果当前表单栏处于有效状态并且被配置了一个名称，那么此值会被 提交到服务器。
TextField
enableKeyEvents : Boolean
true将为HTML输入栏启用按键事件代理 (默认为false)。
TextField
fieldClass : String
表单项的默认CSS类(默认为'x-form-field')
Field
fieldLabel : String
紧靠此field显示的标签文本(默认值为 '')。注意...

紧靠此field显示的标签文本(默认值为 '')。

注意:只有在当前组件被渲染到一个使用FormLayout 的容器中时，此配置才有效。 (例如 Ext.form.FormPanel 或 指定 layout:'form')。

另请参见 hideLabel 、 Ext.layout.FormLayout和 fieldTpl。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Name'
    }]
});
Component
flex : Number
注: 这个配置只用于该组件被包含在一个已使用BoxLayout配置的Container中时...

注: 这个配置只用于该组件被包含在一个已使用BoxLayout配置的Container中时。通过计算每一个子组件的flex值所占全部flex值之和的比例，来决定子组件的宽(HBoxLayout)高(VBoxlayout)。 任何子项的 flex = 0 或 flex = undefined 将不被设置(初始值大小将不被改变)。

BoxComponent
focusClass : String
当表单项获得焦点时使用的CSS类(默认为 'x-form-focus')
Field
forceSelection : Boolean
将会限定选择的值是列表中的值之一， false将会允许用户向表单项中设置任意值...
true 将会限定选择的值是列表中的值之一， false将会允许用户向表单项中设置任意值 (默认为false)
ComboBox
handleHeight : Number
当resizable = true时，下拉列表尺寸调整手柄的高度像素值 (默认为8)
ComboBox
height : Number
组件的高度(默认值为 auto)。注:如果想使用百分比的方式...
组件的高度(默认值为 auto)。注:如果想使用百分比的方式来设置值，请查看 Ext.Component.anchor。
BoxComponent
hidden : Boolean
如果当前组件处于隐藏状态，此值为true。Read-only。
Component
hiddenId : String
如果指定了 hiddenName 也可以提供一个hiddenId，以给于隐藏域一个唯一的id...
如果指定了 hiddenName 也可以提供一个hiddenId，以给于隐藏域一个唯一的id (默认为hiddenName )。 hiddenId和下拉框的id 应该是不同的，因为没有两个DOM节点可以共用同一个id
ComboBox
hiddenName : String
如果指定，一个拥有此name的表单隐藏域将会被动态创建，用来存储表单项的 数据值(默认为底层DOM元素的name)。...
如果指定，一个拥有此name的表单隐藏域将会被动态创建，用来存储表单项的 数据值(默认为底层DOM元素的name)。 对于在提交表但时自动提交下拉框的值是必须的。 另请参见： valueField。

注意: 如果没有指定hiddenId， 隐藏域的id也将默认为此name的值。 ComboBox的 id和 hiddenId 必须是不同的， 因为不应该有两个DOM节点共用一个相同的id。 所以，如果ComboBox的 name 和 hiddenName是相同的，你必须指定一个唯一的 hiddenId 。

ComboBox
hiddenValue : String
如果指定了hiddenName 用来容纳选中的valueField， 从Store设置隐藏域的初始值。默认为配置的...
如果指定了hiddenName 用来容纳选中的valueField， 从Store设置隐藏域的初始值。默认为配置的 value 。
ComboBox
hideLabel : Boolean
true时完全隐藏label元素 ( label 和 separator)。 默认为 false。 默认情况下，即使你不指定...

true时完全隐藏label元素 ( label 和 separator)。 默认为 false。 默认情况下，即使你不指定 fieldLabel 它的空间仍然会被保留，这样这块区域会与其它确实拥有label的区域位于同一排。 讲此值设置为 true 将导致此区域不再保留此空间。

注意: 参见 clearCls 的注释。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield'
        hideLabel: true
    }]
});
Component
hideMode : String
组件如何隐藏，支持的值有： 'visibility' (css visibility), 'offsets' (位置偏移量为负值) 和...

组件如何隐藏，支持的值有： 'visibility' (css visibility), 'offsets' (位置偏移量为负值) 和 'display' (css display).

注意:一般首选默认值 'display'，因为当组件第一次显示的时候它们会自动进行布局 (隐藏的时候不会调整尺寸)。

Component
hideParent : Boolean
此值为true时，当调用hide/show方法时，将会hide和show组件的容器...
此值为true时，当调用hide/show方法时，将会hide和show组件的容器；false时将会 hide和show组件自身(默认为false)。例如，这可以用作window上隐藏按钮的一种 快捷操作，通过设置此按钮的hideParent:true，然后把它添加到window上。
Component
superceed hideTrigger : Boolean
true 将会隐藏触发元素并且仅仅显示基本文本项(默认为false)
TriggerField
html : String/Object
一个HTML片段，或者一个 DomHelper 描述，用作layout元素的内容(默认为'')。...
一个HTML片段，或者一个 DomHelper 描述，用作layout元素的内容(默认为'')。 这个HTML内容在组件渲染之后才被添加，所以在 render 出发的时候，document中尚未包含此HTML。 但是这个内容将会在所有配置的 contentEl 之前被插入到body标签中。
Component
id : String
当前组件唯一的id(默认为auto-assigned id)...

当前组件唯一的id(默认为auto-assigned id)。 如果你需要在以后访问组件，而又没有一个有效的组件对象引用，那么你需要指定一个 id( 也就是，使用Ext. getCmp方法 )。

注意，此id也将被用作组件底层HTML标签的id，这些标签被渲染到页面中。 这将允许你编写基于id的CSS规则，以独立地描述指定的实例；并且，也可以通过 组件父标签的id选中子元素。

注意:为了避免与唯一的id 产生重复， 请参见 itemId 和 ref 。

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

Component
inputType : String
输入栏的类型属性---例如radio,text,password,file(默认为'text')。...
输入栏的类型属性---例如radio,text,password,file(默认为'text')。 'file'和'password'类型通常必须用来渲染那些没有独立Ext组件的表单项类型。 注意，如果你使用inputType:'file'， 那么将不再支持 emptyText 并且应该避免使用。
Field
invalidClass : String
当把表单项标记为非法时所使用的CSS类(默认为'x-form-invalid')
Field
invalidText : String
当把一个表单项标记为非法状态并且没有提供消息时所使用的出错文本...
当把一个表单项标记为非法状态并且没有提供消息时所使用的出错文本 (默认为'The value in this field is invalid')
Field
itemCls : String
注意: 只有在当前组件被渲染到一个使用FormLayout 布局的 容器中时此配置才有效...

注意: 只有在当前组件被渲染到一个使用FormLayout 布局的 容器中时此配置才有效。 (例如Ext.form.FormPanel 或者指定 layout:'form')。

一个附加的CSS类，应用到div上，包装当前field的表单元素。 如果提供了此参数， field级上的itemCls将会覆盖 container级上提供的 默认itemCls。 为itemCls指定的值将会被添加默认的 类('x-form-item')。

既然它被应用到项目的包装器上(参见 Ext.layout.FormLayout。 fieldTpl)， 它将允许你编写能应用到此field、label(如果有指定)、或者field内部任何其它元素的标准CSS规则。

注意: 参考 fieldLabel的注释。 .

示例用法:

// Apply a style to the field's label:
<style>
    .required .x-form-item-label {font-weight:bold;color:red;}
</style>

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Name',
        itemCls: 'required' //this label will be styled
    },{
        xtype: 'textfield',
        fieldLabel: 'Favorite Color'
    }]
});
Component
itemId : String
当没有可利用的对象引用时，itemId可以作为第二选择，用来获得一个组件的引用， 代替 ...

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

var c = new Ext.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'); // 与 Ext.getCmp()不同

p2 = p1.ownerCt.getComponent('p2'); // 通过兄弟对象获得引用

另请参见 id 和 ref 。

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

Component
itemSelector : String
一个简单的CSS选择器(例如div.some-class或者span:first-child) 用来决定处理下拉列表的...

一个简单的CSS选择器(例如div.some-class或者span:first-child) 用来决定处理下拉列表的 Ext.DataView 与什么节点协同工作。

注意: 如果在tpl中 指定了一个自定义的XTemplate，此设置是必须的，XTemplate为 下拉列表中的项目分配了一个不同于

'x-combo-list-item'
的CSS类
ComboBox
labelSeparator : String
每个fieldLabel 文本后面现实的分隔符。 此属性可以在多个层次上进行配置...

每个fieldLabel 文本后面现实的分隔符。 此属性可以在多个层次上进行配置。优先顺序为：

  • field / component level
  • container level
  • layout level (默认为冒号 ':')
如不需要为当前field的label显示分隔符，指定一个空字符串''即可。

注意:参见 clearCls 的注释。

另请参见 hideLabel 和 Ext.layout.FormLayout。 fieldTpl。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    layoutConfig: {
        labelSeparator: '~'   // layout config has lowest priority (defaults to ':')
    },
    labelSeparator: '>>',     // config at container level
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Field 1',
        labelSeparator: '...' // field/component level config supersedes others
    },{
        xtype: 'textfield',
        fieldLabel: 'Field 2' // labelSeparator will be '='

    }]
});
Component
labelStyle : String
一个CSS样式描述字符串，它将直接应用到当前field的label上...

一个CSS样式描述字符串，它将直接应用到当前field的label上。 如果有设置，默认为容器的labelStyle值(例如 Ext.layout.FormLayout.labelStyle , 或者 '')。

注意:参见 clearCls 的注释。

另请参见 hideLabel 和 Ext.layout.FormLayout. fieldTpl。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Name',
        labelStyle: 'font-weight:bold;'
    }]
});
Component
lazyInit : Boolean
true 将不会为当前下拉框初始化列表，直到表单项获得焦点为止(默认为true)
ComboBox
lazyRender : Boolean
true 将会阻止ComboBox被渲染，直到被请求为止 (当渲染到一个Ext.Editor (例如...
true 将会阻止ComboBox被渲染，直到被请求为止 (当渲染到一个Ext.Editor (例如 Grids) 时应该总是使用，默认为 false)。
ComboBox
listAlign : String/Array
一个有效的锚定位置值。 关于支持的锚定位置和偏移量细节参见 Ext.Element.alignTo 。 可以指定x/y偏移量...
一个有效的锚定位置值。 关于支持的锚定位置和偏移量细节参见 Ext.Element.alignTo 。 可以指定x/y偏移量，此值也可以指定为一个 Ext.Element.alignTo 方法的参数数组。

[ 'tl-bl?', [6,0] ]
(defaults to 'tl-bl?')
ComboBox
listClass : String
添加到预定义的'x-combo-list'类的CSS类， 应用到下拉列表元素上(默认为'')。
ComboBox
listEmptyText : String
如果没有找到项目时，需要在data视图中显示的空文本。 (defaults to '')
ComboBox
listWidth : Number
下拉列表的宽度 (用来作为Ext.Element.setWidth的参数) (默认为ComboBox表单项的宽度)...
下拉列表的宽度 (用来作为Ext.Element.setWidth的参数) (默认为ComboBox表单项的宽度)。另请参见 minListWidth。
ComboBox
listeners : Object
一个包含一个或多个事件处理器的配置对象，会在初始化的时候被添加到目标对象上...

一个包含一个或多个事件处理器的配置对象，会在初始化的时候被添加到目标对象上。 该配置对象应该是一个有效的监听器配置对象就像 addListener例子中指定的一样可一次附加多个处理器。

ExtJs Components上的DOM事件

一些 ExtJs Component 类导出时会选择一些DOM事件(例如 "click", "mouseover" 等等), 这通常只是在有额外的值可以被添加时发生。例如DataView类的 click事件会传递被点击的节点。也可以直接在Component的HTMLElementevent上访问DOM事件，但必需在Component被渲染后监听器才能添加到Element 上。可以按照以下步骤添加插件:

// 插件会用一个监听器配置对象进行配置。
//该组件会被添加到所有处理方法的参数列表上。
Ext.DomObserver = Ext.extend(Object, {
    constructor: function(config) {
        this.listeners = config.listeners ? config.listeners : config;
    },

    // 组件将自己传递进了插件的初始化方法里
    init: function(c) {
        var p, l = this.listeners;
        for (p in l) {
            if (Ext.isFunction(l[p])) {
                l[p] = this.createHandler(l[p], c);
            } else {
                l[p].fn = this.createHandler(l[p].fn, c);
            }
        }

        // 渲染后立即添加监听器到元素上
        c.render = c.render.createSequence(function() {
            var e = c.getEl();
            if (e) {
                e.on(l);
            }
        });
    },

    createHandler: function(fn, c) {
        return function(e) {
            fn.call(this, e, c);
        };
    }
});

var combo = new Ext.form.ComboBox({

    // 元素被点击后折叠
    plugins: [ new Ext.DomObserver({
        click: function(evt, comp) {
            comp.collapse();
        }
    })],
    store: myStore,
    typeAhead: true,
    mode: 'local',
    triggerAction: 'all'
});

Observable
loadingText : String
在加载数据时显示在下拉列表中的文本。 只有当 mode = 'remote'时才应用...
在加载数据时显示在下拉列表中的文本。 只有当 mode = 'remote'时才应用(默认为'Loading...')
ComboBox
margins : Object
注:此配置只用于该组件展现在一个使用BorderLayout...

注:此配置只用于该组件展现在一个使用BorderLayout 或 BoxLayout的两个子类之一作为布局的容器。

这个margins对象在该组件中的格式为：

{top: (top margin),right: (right margin),bottom: (bottom margin),left: (left margin)}

也可以是一个字符串，中间用空格分隔，margin值为数字。 把matches中每一个值的次序跟CSS中margin值的排列方式相对应：

  • 如果只有一个值，它适用于所有方面。
  • 如果有两个值，top和bottom的边框设置为第一个值，left和right设置为第二个值。
  • 如果有三个值，top设置为第一个值，left和right设置为第二个值，bottom设置为第三个值。
  • 如果有四个值，分别设置为top, right, bottom, left。

默认值:

{top:0, right:0, bottom:0, left:0}
BoxComponent
maskRe : RegExp
一个输入掩码正则表达式，用来过滤不匹配的按键(默认为null)
TextField
maxHeight : Number
在显示滚动条之前，下拉列表的最大高度像素值(默认为300)
ComboBox
maxLength : Number
校验时表单项允许的最大输入长度(默认为Number.MAX_VALUE)。 通过改善可用性允许粘贴、编辑、重做和回退...
校验时表单项允许的最大输入长度(默认为Number.MAX_VALUE)。 通过改善可用性允许粘贴、编辑、重做和回退， 此行为被设计用来为用户提供即时的反馈。 如需限定表单项中可以输入字符的最大长度， 可以使用autoCreate 向一个表单项添加任何你想要的属性，例如:
var myField = new Ext.form.NumberField({
    id: 'mobile',
    anchor:'90%',
    fieldLabel: 'Mobile',
    maxLength: 16, // for validation
    autoCreate: {tag: 'input', type: 'text', size: '20', autocomplete: 'off', maxlength: '10'}
});
TextField
maxLengthText : String
如果maximum length 校验失败时显示的出错文本...
如果maximum length 校验失败时显示的出错文本 (默认为 'The maximum length for this field is {maxLength}')
TextField
minChars : Number
在自动完成和typeAhead 激活之前，用户必须输入的最少字符数...
在自动完成和typeAhead 激活之前，用户必须输入的最少字符数 (mode = 'remote'默认为4 或者如果mode = 'local' 时为0，如果editable = false ，不会应用此配置项)。
ComboBox
minHeight : Number
当列表尺寸被根据到视口边缘的距离进行约束时，下拉列表...
当列表尺寸被根据到视口边缘的距离进行约束时，下拉列表的最小高度像素值 (默认为90)
ComboBox
minLength : Number
输入栏必须的最小长度(默认为0)
TextField
minLengthText : String
如果 最小长度 校验失败时显示的出错文本 (默认为...
如果 最小长度 校验失败时显示的出错文本 (默认为 'The minimum length for this field is {minLength}') 。
TextField
minListWidth : Number
下拉列表宽度最小像素值(默认为 70，如果 listWidth 有一个更大的值，此值将会被忽略)
ComboBox
mode : String
可接受的值有:...
可接受的值有:
  • 'remote' : Default

    在触发器第一次被点击时自动加载store 。如果你不希望在第一次点击触发器时自动加载store，设置此配置项为 'local'然后手动加载store。如需强制在每次点击触发器时都对store 进行重新查询，参见 lastQuery 。

  • 'local' :

    ComboBox加载本地数据

    var combo = new Ext.form.ComboBox({
    renderTo: document.body,
    mode: 'local',
    store: new Ext.data.ArrayStore({
        id: 0,
        fields: [
            'myId',  // numeric value is the key
            'displayText'
        ],
        data: [[1, 'item1'], [2, 'item2']]  // data is local
    }),
    valueField: 'myId',
    displayField: 'displayText',
    triggerAction: 'all'
});
ComboBox
msgFx : String
实验性参数 当在表单项下显示校验消息时使用的效果(默认为'normal')。
Field
msgTarget : String
通过markInvalid 设置的消息文本应该显示的位置。 必须是如下值之一：...

通过markInvalid 设置的消息文本应该显示的位置。 必须是如下值之一：

  • qtip 当用户鼠标滑过表单项时，显示一个包含消息的快速提示。 这是默认情况。
    为了使此参数能工作，必须调用 Ext.QuickTips.init。
  • title 在弹出的默认浏览器标题属性上显示消息。
  • under 在表单项之下添加一块div，包含出错消息。
  • side 在表单项右边添加一个出错图标，当鼠标滑过时弹出并显示一个消息。
  • [element id] 在指定元素的innerHTML中直接添加出错消息。
Field
name : String
表单项的HTML name属性(默认为'')。 注意: 如果需要当前表单项自动被包含在...
表单项的HTML name属性(默认为'')。 注意: 如果需要当前表单项自动被包含在 form submit()中，必须设置此参数。
Field
overCls : String
一个可选的额外的CSS类，它将在鼠标移过元素时被添加到组件上...
一个可选的额外的CSS类，它将在鼠标移过元素时被添加到组件上，鼠标移出时 删除。(默认为'')。此属性对于在组件上，或者它的任何使用标准CSS规则的孩子节点上， 添加定制的'active' 或者 'hover'样式非常有用。
Component
pageSize : Number
如果大于0，将会在下拉列表底部显示一个Ext.PagingToolbar， 并且过滤查询 将会包含页面的start和...
如果大于0，将会在下拉列表底部显示一个Ext.PagingToolbar， 并且过滤查询 将会包含页面的start和limit 参数一起执行。 只有当 mode = 'remote'时应用(默认为0)。
ComboBox
pageX : Number
如果该组件被包含在一个指定位置的容器中，这个值表示页面级的x坐标值（译者注：在有滚动条的情况下这个值很有用）。
BoxComponent
pageY : Number
如果该组件被包含在一个指定位置的容器中，这个值表示页面级的y坐标值（译者注：在有滚动条的情况下这个值很有用）。
BoxComponent
plugins : Object/Array
一个对象或者一个对象数组，为组件提供特殊的功能 ...
一个对象或者一个对象数组，为组件提供特殊的功能。 对一个合法的插件唯一的要求是它含有一个init()方法， 能接收一个Ext.Component型的参数。 当组件被创建时，如果有可用的插件，组件将会调用每个插件的init方法， 并将自身的引用作为方法参数传递给它。然后，每个插件就可以调用方法或者响应组件上的事件， 就像需要的那样提供自己的功能。
Component
preventMark : Boolean
true将会禁止 把表单项标记为非法。默认为false.
Field
ptype : String
需要创建配置的ptype。 当传递一个配置对象给构造函数时...
需要创建配置的ptype。 当传递一个配置对象给构造函数时，此配置选项不会被使用。 只有在使用懒初始化的时候此配置项才会被使用， 此时Plugin不是 通过一个完整的实例组件，而是通过一个Component配置指定的。 在渲染时，将会查找ptype以决定创建何种类型的Plugin。

如果你创建自己的Plugin，你可以通过 Ext.ComponentMgr.registerPlugin 对它们进行注册，以便能利用懒初始化和渲染机制。
Component
queryDelay : Number
在开始输入和发出查询过滤下拉列表之间需要延迟的毫秒数 (如果mode = 'remote'，默认为...
在开始输入和发出查询过滤下拉列表之间需要延迟的毫秒数 (如果mode = 'remote'，默认为 500，如果 mode = 'local' 为10 )
ComboBox
queryParam : String
查询的名称(store的baseParam 名称)它将被在查询字符串中被传递 (默认为'query')
ComboBox
readOnly : Boolean
将会把表单项标记为在HTML中只读(readOnly)(默认为false)...
true 将会把表单项标记为在HTML中只读(readOnly)(默认为false)。

Note: 这仅仅设置元素的readOnly DOM参数。 例如，设置 readOnly=true ，将不会禁用触发ComboBox或者DateField； 这为你提供了一个选项，可以强制用户通过触发按钮选择一个值，而不是 在文本框进行输入。 使用 hideTrigger 可以隐藏触发按钮。

TriggerField
ref : String
一个路径描述，与组件的 ownerCt 相关，它描述了把当前组件的命名引用放置到哪个父容器中去。...

一个路径描述，与组件的 ownerCt 相关，它描述了把当前组件的命名引用放置到哪个父容器中去。

祖先的坐标路径可以通过'/'字符进行分隔。 例如，将一个Toolbar Button的引用放入 拥有此Toolbar的Panel中:

var myGrid = new Ext.grid.EditorGridPanel({
    title: 'My EditorGridPanel',
    store: myStore,
    colModel: myColModel,
    tbar: [{
        text: 'Save',
        handler: saveChanges,
        disabled: true,
        ref: '../saveButton'
    }],
    listeners: {
        afteredit: function() {
//          The button reference is in the GridPanel
            myGrid.saveButton.enable();
        }
    }
});

在上面的代码中，如果 ref 是 'saveButton' ，那么引用将会被放置到Toolbar中。 ref 中的每个'/' 都会从组件的 ownerCt 向上移动一级。

另请参见 added 和 removed 事件。

Component
regex : RegExp
在校验时，需要在表单项值纸上进行测试的JavaScript RegExp对象(默认为 null)。 如果测试失败，表单项将会使用...
在校验时，需要在表单项值纸上进行测试的JavaScript RegExp对象(默认为 null)。 如果测试失败，表单项将会使用 regexText 进行标记。
TextField
regexText : String
当使用regex 并且校验测试失败时显示的出错文本(默认为'')
TextField
region : String
注: 此配置只用于该组件展现在一个布局为BorderLayout的容器中...

注: 此配置只用于该组件展现在一个布局为BorderLayout的容器中(例如指定layout:'border')。

详见Ext.layout.BorderLayout。

BoxComponent
renderTo : Mixed
该值可以是一个节点的id、一个DOM节点或者一个已存在的元素...

该值可以是一个节点的id、一个DOM节点或者一个已存在的元素， 组件将会被渲染到其中。

  • 注意 :
      如果组件不是一个Container 的子项目时， 不要使用此选项。 渲染和管理它的子项目是一个Container 的layout manager的责任。
      当使用此配置项时，无需调用render()方法。

另请参见 render 。

Component
resizable : Boolean
true将会在下拉列表底部添加一个调整尺寸的手柄(创建一个 Ext.Resizable 拥有...
true将会在下拉列表底部添加一个调整尺寸的手柄(创建一个 Ext.Resizable 拥有'se' pinned的手柄)。 默认为false。
ComboBox
selectOnFocus : Boolean
将会在获得焦点时理解选中表单项中所有存在的文本。 仅当editable = true 时应用...
true 将会在获得焦点时理解选中表单项中所有存在的文本。 仅当editable = true 时应用(默认为false)。
ComboBox
selectedClass : String
应用到下拉列表中选中项目的CSS类 (默认为'x-combo-selected')
ComboBox
shadow : Boolean/String
默认效果为true或者 "sides"， "frame"为四个方向的阴影， "drop"为右下阴影
ComboBox
stateEvents : Array
一个事件数组，当它们被触发时，组件需要保存自己的状态(默认值为 none)...

一个事件数组，当它们被触发时，组件需要保存自己的状态(默认值为 none)。 它们可以是任何该组件支持的事件类型，包括浏览器事件和 自定义事件(例如['click', 'customerchange'])。

对于保存和恢复组件状态的详细解释，参见 stateful

Component
stateId : String
为该组件指定的唯一的id值，它被用作管理组件状态的目的...
为该组件指定的唯一的id值，它被用作管理组件状态的目的。 (如果设定了id，默认值为组件自己的id，否则，如果组件使用自动生成的id，此值为null)。

对于保存和反解析组件状态的解释，参见 stateful 。

Component
stateful : Boolean
一个标志参数，它将引起组件在启动时尝试从一个保存的状态中恢复内部状态参数...

一个标志参数，它将引起组件在启动时尝试从一个保存的状态中恢复内部状态参数。 组件必须要么拥有一个 stateId 或者 id ，它们被分配给需要被管理的状态属性。 在跨页面加载时，不保证自动生成的id属性的稳定性， 并且，不能依赖此id来保存和恢复一个组件的相同状态。

为了保存状态的操作能够工作，状态管理器的提供者必须 被设置成一个Ext.state.Provider 的实现类，它覆盖了set 和get 方法，以便保存和恢复name/value对。 有一个内置的Ext.state.CookieProvider 可用。

为当前页面设置状态提供者:

Ext.state.Manager.setProvider(new Ext.state.CookieProvider({
    expires: new Date(new Date().getTime()+(1000*60*60*24*7)), //7 days from now
}));

当 stateEvents 配置项中其中之一的事件被触发时， 一个状态可保存的组件将试图保存其状态。

保存状态时，一个可保存状态的组件首先需要通过调用 getState 方法来序列化它的状态。 默认情况下，此函数什么事都不做。 开发者必须提供一个实现，返回一个hash对象，它描述了组件可恢复的状态。

getState方法产生的值将会传递给 Ext.state.Manager.set 方法，它使用配置的 Ext.state.Provider 来保存对象，以组件的 stateId 为key，或者，如果此值（指stateId）没有指定时， 使用它的 id 作为key。

在进行构造时，一个可保存状态的组件试图通过调用 Ext.state.Manager.get方法来 恢复它的状态，传递 stateId 或者，如果此值（指stateId）没有指定时， 使用它的 id 作为参数。

结果对象被传递给 applyState 。 applyState 的默认实现只是简单地把属性拷贝到对象中， 但是开发者可以覆盖此方法以支持更多行为。

通过向 beforestaterestore, staterestore, beforestatesave 和 statesave 事件上绑定监听器，你可以在保存和恢复状态时进行额外的处理。

Component
store : Ext.data.Store/Array
当前combo所绑定的数据源(默认为undefined)。 此属性可接受的值有:...
当前combo所绑定的数据源(默认为undefined)。 此属性可接受的值有:
  • 所有Store的子类
  • 一个数组 : 数组将会在内部被转换成一个 Ext.data.ArrayStore ，自动生成 表单项名称以便 与所有数据组件协同工作。
    • 一维数组 : (例如 ['Foo','Bar'])
      一维数组将会自动被展开( 数组中的每个元素都将被 valueField 和displayField 使用)
    • 二维数组 : (例如 [['f','Foo'],['b','Bar']])
      对于多维数组，每个项目中索引为0的值将会被假定为combo的 valueField， 索引为1的值被假定为combo的 displayField。

另请参见 mode 。

ComboBox
stripCharsRe : RegExp
一个JavaScript RegExp对象，用来在校验之前从值中剥离不想要的内容(默认为 null)。
TextField
style : String
被添加到组件元素的特定样式。 必须是按照...
被添加到组件元素的特定样式。 必须是按照 Ext.Element.applyStyles 类指定格式的合法参数值。

new Ext.Panel({
    title: 'Some Title',
    renderTo: Ext.getBody(),
    width: 400, height: 300,
    layout: 'form',
    items: [{
        xtype: 'textarea',
        style: {
            width: '95%',
            marginBottom: '10px'
        }
    },
        new Ext.Button({
            text: 'Send',
            minWidth: '100',
            style: {
                marginBottom: '10px'
            }
        })
    ]
});
Component
submitValue : Boolean
false将会清除表单项上的name属性，这样在表单提交时它就不会被提交。...
false将会清除表单项上的name属性，这样在表单提交时它就不会被提交。 如果指定了hiddenName，设置此项为true将会导致隐藏域和此元素都会被 提交。默认为undefined。
ComboBox
tabIndex : Number
该表单项的tabIndex。 注意，此属性仅仅应用到被渲染好的，而不是那些通过applyTo...
该表单项的tabIndex。 注意，此属性仅仅应用到被渲染好的，而不是那些通过applyTo创建的表单项 (默认为undefined)。
Field
tabTip : String
注: 这个配置只用于当该组件作为TabPanel的一个子项目时使用...

注: 这个配置只用于当该组件作为TabPanel的一个子项目时使用。

一个String类型的innerHTML(支持html标签)，当鼠标放在该选项上的时，显示一个tooltip。为了tips能够被渲染，Ext.QuickTips.init()必须被提前调用。
BoxComponent
title : String
如果提供，将会创建一个包含此文本的header元素， 并且添加到下拉列表的顶部...
如果提供，将会创建一个包含此文本的header元素， 并且添加到下拉列表的顶部(默认为undefined，没有header元素)
ComboBox
tpl : String/Ext.XTemplate
模板字符串或者一个Ext.XTemplate 实例，用来显示下拉列表中的每一个项目。...

模板字符串或者一个Ext.XTemplate 实例，用来显示下拉列表中的每一个项目。 下拉列表被显示在DataView中。参见 view。

默认的模板字符串是:

                                    '<tpl for="."><div class="x-combo-list-item">{' + this.displayField + '}</div></tpl>'

覆盖默认值可以为列表中的项目创建自定义UI布局。例如:

                                    '<tpl for="."><div ext:qtip="{state}. {nick}" class="x-combo-list-item">{state}</div></tpl>'

模板必须包含一个或多个可替换的参数 它们来自ComboStore中的字段名。 在以上的例子中，添加了一个

ext:qtip
属性用来显示来自Store的其它字段。

如需保持列表项目默认的外观，可以向模板的容器元素添加名为

x-combo-list-item
CSS类。

附加细节另请参见 itemSelector 。

ComboBox
tplWriteMode : String
刷新组件的内容区域时使用的Ext.(X)Template方式。 默认为'overwrite' (参见 Ext.XTemplate.overwrite )。
刷新组件的内容区域时使用的Ext.(X)Template方式。 默认为'overwrite' (参见 Ext.XTemplate.overwrite )。
Component
transform : Mixed
id、DOM节点或者一个已经存在的HTML SELECT元素，用来转化为...
id、DOM节点或者一个已经存在的HTML SELECT元素，用来转化为 一个ComboBox。注意，如果你指定了此选项并且 combo将会使用在Ext.form.BasicForm或者 Ext.form.FormPanel中， 你必须同时设置 lazyRender = true。
ComboBox
triggerAction : String
当触发器被点击时需要执行的操作。...
当触发器被点击时需要执行的操作。
  • 'query' : Default

    使用原始值 执行查询。

  • 'all' :

    使用allQuery 指定的配置项 进行查询。

另请参见 queryParam 。

ComboBox
triggerClass : String
一个用来设定触发按钮风格的额外的CSS类。 触发按钮总是获得'x-form-trigger'类，并且...
一个用来设定触发按钮风格的额外的CSS类。 触发按钮总是获得'x-form-trigger'类，并且 指定了appended(默认为 'x-form-arrow-trigger'，它显示了一个下拉箭头图标)。
ComboBox
triggerConfig : Mixed
一个DomHelper 配置对象，指定了当前表单项触发元素的结构。(可选)...

一个DomHelper 配置对象，指定了当前表单项触发元素的结构。(可选)。

当你需要为TriggerField指定作为触发按钮的元素，可以配置此选项。

注意，当使用此配置项时，保证触发器能正确调整尺寸、定位和显示将是开发者的责任。默认为:

                                {tag: "img", src: Ext.BLANK_IMAGE_URL, cls: "x-form-trigger " + this.triggerClass}
TriggerField
typeAhead : Boolean
设置为true，当开始输入字符时，在指定的延迟之后会自动匹配剩下的内容， 如果找到了匹配的 内容则自动选中它...
设置为true，当开始输入字符时，在指定的延迟之后会自动匹配剩下的内容， 如果找到了匹配的 内容则自动选中它 (typeAheadDelay ) (默认值为 false)
ComboBox
typeAheadDelay : Number
如果typeAhead = true 时，在键入的文本被显示之前所要等待的毫秒数...
如果typeAhead = true 时，在键入的文本被显示之前所要等待的毫秒数(默认为250)
ComboBox
validateOnBlur : Boolean
在表单项失去焦点时是否进行校验(默认为 true)。
Field
validationDelay : Number
在用户开始输入到校验操作开始之间的时长毫秒数 (默认为250)
Field
validationEvent : String/Boolean
引发表单项进行校验操作的事件。 设置为false可以禁用自动校验 (默认为'keyup')。
引发表单项进行校验操作的事件。 设置为false可以禁用自动校验 (默认为'keyup')。
Field
validator : Function
一个自定义的校验方法，在校验表单项时调用( validateValue) (默认为...

一个自定义的校验方法，在校验表单项时调用( validateValue) (默认为 null)。 如果指定，此函数会被第一个调用，允许开发者覆盖默认的校验过程。

此方法会被传入以下参数:

  • value : Mixed
    表单项的当前值

此方法将会返回:

  • true : Boolean
    true 如果值合法
  • msg : String
    如果值是非法时的出错信息
TextField
value : Mixed
当前表单项的初始化值(默认为undefined).
Field
valueField : String
需要绑定到当前ComboBox的底层 数据值名称 (如果...
需要绑定到当前ComboBox的底层 数据值名称 (如果mode = 'remote' 默认为undefined，如果 转换一个选中项目 或者 根据store的配置项自动生成field name 时为'field2' )。

注意: 为了能映射一个值，使用valueField需要用户做出选择。 另请参见 hiddenName , hiddenValue ,和 displayField 。

ComboBox
valueNotFoundText : String
当使用一个name/value下拉选择框时，如果在store中没有找到传递给setValue方法 的值...
当使用一个name/value下拉选择框时，如果在store中没有找到传递给setValue方法 的值，如果有定义，valueNotFoundText将会被作为表单项文本被显示 (默认为undefined)。如果此默认文本被使用，则意味着没有设置任何值并且 当前表单项上不会发生任何校验操作。
ComboBox
vtype : String
一个校验类型名，在Ext.form.VTypes 中定义(默认为null)
TextField
vtypeText : String
一个自定义的出错消息，用来替代为当前表单项所设置的...
一个自定义的出错消息，用来替代为当前表单项所设置的 vtype 所提供的默认消息(默认为'')。 注意: 只有设置了 vtype 时才应用此项，否则忽略。
TextField
width : Number
组件的宽度(默认值为 auto)。注:如果想使用百分比的方式...
组件的宽度(默认值为 auto)。注:如果想使用百分比的方式来设置值，请查看 Ext.Component.anchor。
BoxComponent
wrapFocusClass : String
天骄到触发元素包装器上的(CSS)类， 默认为x-trigger-wrap-focus。
TriggerField
x : Number
如果被包含在一个指定位置的容器中，这个值表示x(left)坐标值。
BoxComponent
xtype : String
需要创建配置的xtype。 当传递一个配置对象给构造函数时...
需要创建配置的xtype。 当传递一个配置对象给构造函数时，此配置选项不会被使用。 只有在使用懒初始化的时候此配置项才会被使用，此时容器的子项目不是 通过一个完整的实例组件，而是通过一个Component配置指定的。 在渲染时，将会查找xtype以决定创建何种类型的子组件。

预定义的xtype列表如下： here。

如果你继承Component创建你自己的组件，你需要使用Ext.ComponentMgr.registerType 对它们进行注册，以便利用懒初始化和渲染机制。
Component
y : Number
如果被包含在一个指定位置的容器中，这个值表示y(top)坐标值。
BoxComponent

公共属性

Property Defined By
disabled : Boolean
当前组件处于无效状态时为true。 Read-only.
Component
el : Ext.Element
封装了当前组件的Ext.Element。 Read-only。通常情况下，这将是一个<DIV>元素，它由此类的...

封装了当前组件的Ext.Element。 Read-only。

通常情况下，这将是一个<DIV>元素，它由此类的 onRender方法创建，但是它可以通过使用 autoEl 配置项进行覆盖。

注意: 直到组件渲染完成此元素都将处于无效状态。

如需向当前组件的 DOM事件(而不是当前组件自己的Observable事件)添加监听器， 更多建议，参见 listeners 配置项，或者直接使用一个render监听器:

new Ext.Panel({
    title: 'The Clickable Panel',
    listeners: {
        render: function(p) {
            // Append the Panel to the click handler's argument list.
            p.getEl().on('click', handlePanelClick.createDelegate(null, [p], true));
        },
        single: true  // Remove the listener after first invocation
    }
});

另请参见 getEl

Component
hidden : Boolean
如果当前组件处于隐藏状态，此值为true。Read-only。
Component
initialConfig : Object
当前组件的初始化配置描述。 Read-only。
Component
label : Ext.Element
关联到当前表单项的label元素。 只有在当前表单项已经被一个Ext.layout.FormLayout ...

关联到当前表单项的label元素。 只有在当前表单项已经被一个Ext.layout.FormLayout 布局管理器渲染之后才可用。

Field
lastQuery : String
用来过滤store的匹配字符串值。 删除此参数以强制执行一次重新查询。示例用法...
用来过滤store的匹配字符串值。 删除此参数以强制执行一次重新查询。示例用法:
var combo = new Ext.form.ComboBox({
    ...
    mode: 'remote',
    ...
    listeners: {
        // delete the previous query in the beforequery event or set
        // combo.lastQuery = null (this will reload the store the next time it expands)
        beforequery: function(qe){
            delete qe.combo.lastQuery;
        }
    }
});
为了确定在ComboBox的触发按钮第一次被使用时 store中的filter没有被清除，可以使用lastQuery='' 来配置combo。示例用法:
var combo = new Ext.form.ComboBox({
    ...
    mode: 'local',
    triggerAction: 'all',
    lastQuery: ''
});
ComboBox
originalValue : mixed
表单项原来的值，它是在value 中配置的；或者，如果 trackResetOnLoad 设置为...
表单项原来的值，它是在value 中配置的；或者，如果 trackResetOnLoad 设置为 true 时，通过表单加载操作最后一次加载的。
Field
ownerCt : Ext.Container
组件所属的Container (默认为undefined，当前组件被添加到一个容器中时此值被自动设置)...
组件所属的Container (默认为undefined，当前组件被添加到一个容器中时此值被自动设置)。 Read-only。

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

Component
refOwner : Ext.Container
如果当前组件是一个容器的孩子，并且是通过一个 ref 配置项被注册的，则此值为 ref 引用被插入到的祖先容器。
如果当前组件是一个容器的孩子，并且是通过一个 ref 配置项被注册的，则此值为 ref 引用被插入到的祖先容器。
Component
rendered : Boolean
如果当前组件已经被渲染了，此值为true。Read-only.
Component
startValue : mixed
表单项最后一次获得焦点时所拥有的值。 这就是传递给change 事件的值...

表单项最后一次获得焦点时所拥有的值。 这就是传递给change 事件的值，此事件在值被改变并失去焦点时触发。

直到表单项被访问之前此值都是undefined 与originalValue 进行比较。

Field
view : Ext.DataView
用来显示ComboBox中选项的 DataView。
ComboBox

公共方法

Method Defined By
ComboBox ( Object config )
创建一个新的ComboBox
创建一个新的ComboBox
参数:
  • config : Object
    配置选项
返回值:
  • void
ComboBox
addClass ( string cls ) : Ext.Component
为组件底层的元素添加CSS样式。
为组件底层的元素添加CSS样式。
参数:
  • cls : string
    需要添加的CSS样式的class名称
返回值:
  • Ext.Component
    this
Component
addEvents( Object|String o, string Optional. ) : void
添加指定的事件到事件列表上，事件会被该Observable触发。
添加指定的事件到事件列表上，事件会被该Observable触发。
参数:
  • o : Object|String
    以事件名作为属性true作为值的对象 或者当多个事件名被分开的传递时则为第一个事件名。
  • Optional. : string
    事件名被分开的传递时则为事件名。 用法:
    this.addEvents('storeloaded', 'storecleared');
返回值:
  • void
Observable
addListener( String eventName, Function handler, [Object scope], [Object options] ) : void
给对象添加事件处理器。
给对象添加事件处理器。
参数:
  • eventName : String
    监听的事件名。
  • handler : Function
    事件调用的方法
  • scope : Object
    （可选）处理方法执行的作用域 (this的引用 reference)。 如果被忽略。默认为触发事件的对象。
  • options : Object
    （可选）包含处理器配置和属性的对象。 可能包含以下的属性:
    • scope : Object
      处理方法执行的作用域(this的引用) 。 如果被忽略。默认为触发事件的对象。
    • delay : Number
      在触发事件后延迟调用处理器的毫秒数。
    • single : Boolean
      如果为True则添加一个处理器来处理下一次的事件触发（仅一次），然后移除自己。
    • buffer : Number
      使得处理器延迟指定毫秒数后预定的运行在 一个Ext.util.DelayedTask中 。 如果事件在时间内再一次被触发，原始的处理器不会被调用，但是新的处理器会预定的在他的位置上。
    • target : Observable
      如果事件在目标的Observable上触发则仅仅调用处理器， 否则 事件会从子类的Observable上冒泡

    组合选项
    使用这些选项参数,可能会组合出不同类型的监听器：

    一个延迟的，一次性的监听器。

    myDataView.on('click', this.onClick, this, {
single: true,
delay: 100
});

    一次调用附加多个处理器
    该方法同样支持传递一个包含指定的多个处理器的属性的配置对象参数。

    myGridPanel.on({
'click' : {
    fn: this.onClick,
    scope: this,
    delay: 100
},
'mouseover' : {
    fn: this.onMouseOver,
    scope: this
},
'mouseout' : {
    fn: this.onMouseOut,
    scope: this
}
});

    或者一个简写的语法：

    myGridPanel.on({
'click' : this.onClick,
'mouseover' : this.onMouseOver,
'mouseout' : this.onMouseOut,
 scope: this
});
返回值:
  • void
Observable
applyToMarkup ( String/HTMLElement el ) : void
将此组件添加到已存在的有效的HTML标签中。 使用该方法时，无需再调用render()方法。
将此组件添加到已存在的有效的HTML标签中。 使用该方法时，无需再调用render()方法。
参数:
  • el : String/HTMLElement
返回值:
  • void
Component
clearInvalid () : void
清除当前表单项上的所有非法styles/messages(样式/消息)
清除当前表单项上的所有非法styles/messages(样式/消息)
参数:
  • 无。
返回值:
  • void
Field
clearValue () : void
清除表单项中当前所有的text/value
清除表单项中当前所有的text/value
参数:
  • 无。
返回值:
  • void
ComboBox
cloneConfig ( Object overrides ) : Ext.Component
默认使用原先传递给当前实例的配置值克隆当前组件。
默认使用原先传递给当前实例的配置值克隆当前组件。
参数:
  • overrides : Object
    一个新的配置项，包含需要覆盖到克隆版本的所有属性。 可以传递一个id参数给此对象，否则将自动生成一个新的id以避免发生重复。
返回值:
  • Ext.Component
    当前组件的克隆副本
Component
collapse () : void
隐藏下拉列表，如果它当前被展开。 完成之后触发collapse 事件。
隐藏下拉列表，如果它当前被展开。 完成之后触发collapse 事件。
参数:
  • 无。
返回值:
  • void
ComboBox
destroy () : void
通过如下方法销毁对象：删除所有的事件监听器、将组件的元素从DOM树中删除...
通过如下方法销毁对象：删除所有的事件监听器、将组件的元素从DOM树中删除（如果可以）、 将组件从它的 Ext.Container（如果可用）中删除、 并且将它从Ext.ComponentMgr中 注销。 销毁操作一般由框架自动完成，一般情况下不需要直接调用该方法。
参数:
  • 无。
返回值:
  • void
Component
disable () : Ext.Component
将组件置为无效状态，并出发'disable'事件。
将组件置为无效状态，并出发'disable'事件。
参数:
  • 无。
返回值:
  • Ext.Component
    this
Component
doQuery ( String query , Boolean forceAll ) : void
执行一次查询来过滤下拉列表。 在执行查询之前触发beforequery 事件...
执行一次查询来过滤下拉列表。 在执行查询之前触发beforequery 事件，如果需要，允许取消查询操作。
参数:
  • query : String
    需要执行的SQL查询
  • forceAll : Boolean
    true 强制执行查询，即使表单项中当前字符的个数比minChars 配置项中指定的最小个数还要少。这也将清除之前存储在当前store中的所有filter (默认为false)
返回值:
  • void
ComboBox
enable () : Ext.Component
将组件置为有效状态并触发'enable'事件。
将组件置为有效状态并触发'enable'事件。
参数:
  • 无。
返回值:
  • Ext.Component
    this
Component
enableBubble( String/Array events ) :void
是否现在使得事件会被该Observable触发并调用 this.getBubbleTarget()方法在拥有者的继承树...

是否现在使得事件会被该Observable触发并调用 this.getBubbleTarget()方法在拥有者的继承树中冒泡。Observable的基础类中没有该方法的实现。

该方法一般被Ext.Components用来冒泡事件到拥有者的容器。参看Ext.Component.getBubbleTarget默认的实现 在Ext.Component中返回组件的直接拥有者。但是如果需要的是一个已知的目标，该方法可以被重写来更快的访问需求的目标。

例子:

Ext.override(Ext.form.Field, {
    // 添加方法到Field的initComponent上改变事件为冒泡
    initComponent : Ext.form.Field.prototype.initComponent.createSequence(function() {
        this.enableBubble('change');
    }),

    // 我们知道我们想让Field的事件冒泡到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() {
            // 如果样式被修改标题会变红。
            myForm.header.setStyle('color', 'red');
        }
    }
});
参数:
  • events : String/Array
    冒泡的事件名，或事件名数组
返回值:
  • void
Observable
expand () : void
展开下拉列表，如果它当前处于隐藏状态。 完成后触发expand 事件。
展开下拉列表，如果它当前处于隐藏状态。 完成后触发expand 事件。
参数:
  • 无。
返回值:
  • void
ComboBox
findParentBy ( Function fn ) : Ext.Container
通过自定义的函数查找当前组件上层任何层次上的容器...
通过自定义的函数查找当前组件上层任何层次上的容器。 如果传递的函数返回true，容器对象将被返回。
参数:
  • fn : Function
    自定义的函数，使用如下参数调用(container,this component)。
返回值:
  • Ext.Container
    自定义函数返回true的第一个容器
Component
findParentByType ( String/Class xtype ) : Ext.Container
通过xtype或者class查找当前组件上层任何层次上的容器
通过xtype或者class查找当前组件上层任何层次上的容器
参数:
  • xtype : String/Class
    组件的xtype字符串，或者直接是组件的class
返回值:
  • Ext.Container
    符合指定xtype或者class的第一个容器
Component
fireEvent( String eventName, Object... args ) : Boolean
用传入的参数触发指定的事件 (减去事件名)。 一个事件可以被设置为冒泡 Obse...

用传入的参数触发指定的事件 (减去事件名)。

一个事件可以被设置为冒泡到Observable父类继承树(参看 Ext.Component.getBubbleTarget) 调用enableBubble实现。

参数:
  • eventName : String
    触发的事件名。
  • args : Object...
    传递给处理器的可变长度参数。
返回值:
  • Boolean
    如果有任何的处理器返回false则返回false，否则返回true。
Observable
focus ( [ Boolean selectText ], [ Boolean/Number delay ] ) : Ext.Component
尝试将当前组件设为焦点。
尝试将当前组件设为焦点。
参数:
  • selectText : Boolean
    (可选) 如果可用，同时选中组件内部的文本
  • delay : Boolean/Number
    (可选)将当前组件设置为焦点的延迟时间(设置为true等于0毫秒)
返回值:
  • Ext.Component
    this
Component
getActiveError () : String
获取当前表单项活动的出错消息。
获取当前表单项活动的出错消息。
参数:
  • 无。
返回值:
  • String
    返回表单项上活动的出错消息，如果没有错误，返回一个空字符串。
Field
getBox ( [ Boolean local ] ) : Object
获取组件底层元素当前盒子模型的尺寸。（译者注：盒子模型是CSS术语，详细解释请自行搜索。）
获取组件底层元素当前盒子模型的尺寸。（译者注：盒子模型是CSS术语，详细解释请自行搜索。）
参数:
  • local : Boolean
    (可选)值为true时，组件的left值和top值将代替页面的XY被返回。(默认值为false)
返回值:
  • Object
    返回值的格式{x, y, width, height}
BoxComponent
getBubbleTarget () : Ext.Container
为Observable的fireEvent方法提供链接，它沿着继承结构进行冒泡操作。
为Observable的fireEvent方法提供链接，它沿着继承结构进行冒泡操作。
参数:
  • 无。
返回值:
  • Ext.Container
    拥有当前组件的容器。
Component
getEl () : Ext.Element
返回 Ext.Element ，它包装了当前组件。...

返回 Ext.Element ，它包装了当前组件。

通常情况下，这将是一个<DIV>元素，它是由该类的onRender方法创建的， 但是可以使用autoEl配置项 覆盖它。

注意: 此元素将会一直处于无效状态直到当前组件渲染完成。

如需向当前组件的 DOM事件(而不是当前组件自己的Observable事件)添加监听器， 更多建议，参见 listeners 配置项，或者直接使用一个render监听器:

new Ext.Panel({
    title: 'The Clickable Panel',
    listeners: {
        render: function(p) {
            // Append the Panel to the click handler's argument list.
            p.getEl().on('click', handlePanelClick.createDelegate(null, [p], true));
        },
        single: true  // Remove the listener after first invocation
    }
});
参数:
  • 无。
返回值:
  • Ext.Element
    包装当前组件的元素。
Component
getErrors () : Array
运行当前表单项的校验器并返回一个所有校验错误信息数组。 此方法在校验期间在内部调用并且一般情况下...
运行当前表单项的校验器并返回一个所有校验错误信息数组。 此方法在校验期间在内部调用并且一般情况下不需要手工调用。 每个子类都应该重写或者增加返回值以提供它们自己的出错消息
参数:
  • 无。
返回值:
  • Array
    当前表单项的所有出错消息
TextField
getHeight () : Number
获取该组件的当前高度值。
获取该组件的当前高度值。
参数:
  • 无。
返回值:
  • Number
BoxComponent
getId () : String
返回当前组件的id，如果没有定义id，则自动生成并返回一个id:'ext-comp-'...
返回当前组件的 id 如果没有定义 id 则自动生成并返回一个 id

'ext-comp-' + (++Ext.Component.AUTO_ID)
参数:
  • 无。
返回值:
  • String
    id
Component
getItemId () : String
返回当前组件的 itemId 。 如果没有通过配置参数指定 itemId 那么，将会使用...
返回当前组件的 itemId 。 如果没有通过配置参数指定 itemId 那么，将会使用 getId 返回 id 。
参数:
  • 无。
返回值:
  • String
Component
getListParent () : void
返回用来容纳ComboBox弹出列表的元素。 默认为document body。...

返回用来容纳ComboBox弹出列表的元素。 默认为document body。

如果浮动的列表需要被渲染到一个不同的元素中，可以提供一个自定义的实现作为 配置选项。一个例子可能是把列表渲染到一个Menu内部，这样在点击列表时不会 隐藏Menu:
var store = new Ext.data.ArrayStore({
    autoDestroy: true,
    fields: ['initials', 'fullname'],
    data : [
        ['FF', 'Fred Flintstone'],
        ['BR', 'Barney Rubble']
    ]
});

var combo = new Ext.form.ComboBox({
    store: store,
    displayField: 'fullname',
    emptyText: 'Select a name...',
    forceSelection: true,
    getListParent: function() {
        return this.el.up('.x-menu');
    },
    iconCls: 'no-icon', //use iconCls if placing within menu to shift to right side of menu
    mode: 'local',
    selectOnFocus: true,
    triggerAction: 'all',
    typeAhead: true,
    width: 135
});

var menu = new Ext.menu.Menu({
    id: 'mainMenu',
    items: [
        combo // A Field in a Menu
    ]
});
参数:
  • 无。
返回值:
  • void
ComboBox
getName () : String
如果可用，返回表单项的 name 或者 hiddenName 属性。
如果可用，返回表单项的 name 或者 hiddenName 属性。
参数:
  • 无。
返回值:
  • String
    name 表单项的{@link Ext.form.Field#name name}或者{@link Ext.form.ComboBox#hiddenName hiddenName}
Field
getOuterSize () : Object
获取当前组件所在元素的尺寸大小，包括边缘的空白处。
获取当前组件所在元素的尺寸大小，包括边缘的空白处。
参数:
  • 无。
返回值:
  • Object
    一个包含元素大小的对象 {width: (element width + left/right margins), height: (element height + top/bottom margins)}
BoxComponent
getPosition ( [ Boolean local ] ) : Array
获取组件底层元素当前的XY位置。
获取组件底层元素当前的XY位置。
参数:
  • local : Boolean
    (可选)如果为true，将返回元素的left和top值，而不是相对于页面内的 XY。(默认值为 false)
返回值:
  • Array
    元素的XY位置值(例如：[100, 200])
BoxComponent
getRawValue () : Mixed
返回原始数据值，可能不是一个合法的、已定义的值。 返回格式化的值参见...
返回原始数据值，可能不是一个合法的、已定义的值。 返回格式化的值参见 getValue。
参数:
  • 无。
返回值:
  • Mixed
    value 表单项的值
Field
getResizeEl () : Ext.Element
返回该组件的最外层用来定义这些组件整体大小的Element...

返回该组件的最外层用来定义这些组件整体大小的Element对象。

通常用 getEl 方法将会返回相同的Element对象，但在有些情况下，组件可能有一些更多的封装了它的主要动态Element对象的Element对象。

例如ComboBox。它是封装在一个包含<input>元素的包装元素里(这将返回其 getEl方法和触发按钮的元素)。返回的元素为resizeEl。

参数:
  • 无。
返回值:
  • Ext.Element
    The Element which is to be resized by size managing layouts.
BoxComponent
getSize () : Object
获取组件底层元素当前的大小。
获取组件底层元素当前的大小。
参数:
  • 无。
返回值:
  • Object
    一个包含元素大小的对象{width: (element width), height: (element height)}
BoxComponent
getStore () : Ext.data.Store
返回绑定到当前下拉框的store
返回绑定到当前下拉框的store
参数:
  • 无。
返回值:
  • Ext.data.Store
    store
ComboBox
getValue () : String
返回当前选中的值，如果没有选择时为空字符串。
返回当前选中的值，如果没有选择时为空字符串。
参数:
  • 无。
返回值:
  • String
    value 选中的值
ComboBox
getWidth () : Number
获取该组件的当前宽度值。
获取该组件的当前宽度值。
参数:
  • 无。
返回值:
  • Number
BoxComponent
getXType () : String
获取当前组件的xtype，它是用 Ext.ComponentMgr 注册的。 所有可用的xtype列表，参见...
获取当前组件的xtype，它是用 Ext.ComponentMgr 注册的。 所有可用的xtype列表，参见 Ext.Component 类头部。示例用法:

var t = new Ext.form.TextField();
alert(t.getXType());  // alerts 'textfield'
参数:
  • 无。
返回值:
  • String
    The xtype
Component
getXTypes () : String
返回此组件的xtype继承树，用字符'-'分隔。 所有可用的xtype值...

返回此组件的xtype继承树，用字符'-'分隔。 所有可用的xtype值，请参见Ext.Component 类的头部。

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

示例用法:

var t = new Ext.form.TextField();
alert(t.getXTypes());  // alerts 'component/box/field/textfield'
参数:
  • 无。
返回值:
  • String
    xtype层次字符串
Component
hasListener( String eventName ) : Boolean
检测对象是否包含指定事件的任何监听器
检测对象是否包含指定事件的任何监听器
参数:
  • eventName : String
    检测的事件名
返回值:
  • Boolean
    如果事件被监听则为true，否则为false
Observable
hide () : Ext.Component
隐藏当前组件。 监听 beforehide' 事件并且返回false 可以取消隐藏组件的操作。 在隐藏组件之后触发...
隐藏当前组件。 监听 beforehide' 事件并且返回false 可以取消隐藏组件的操作。 在隐藏组件之后触发 ' hide' 事件。 如果组件被配置成 hidden 那么此方法在内部被调用。
参数:
  • 无。
返回值:
  • Ext.Component
    this
Component
isDirty () : Boolean
如果此表单项的值与原始值相比发生了改变，返回true。 如果表单项...

如果此表单项的值与原始值相比发生了改变，返回true。 如果表单项被禁用或者尚未被渲染将会返回false。

注意，如果所属的 form 配置了一个Ext.form.BasicForm， 那么在使用Ext.form.BasicForm. setValues 加载值之后，原始值将会被更新。

参数:
  • 无。
返回值:
  • Boolean
    如果此表单项的值与原始值相比发生了改变(并且没有被禁用)，返回true，其它返回false。
Field
isExpanded () : void
如果下拉列表被展开，返回true，其它返回false
如果下拉列表被展开，返回true，其它返回false
参数:
  • 无。
返回值:
  • void
ComboBox
isValid ( Boolean preventMark ) : Boolean
通过 校验 表单项 处理后的值 ，返回表单项当前值是否合法。...
通过 校验 表单项 处理后的值 ，返回表单项当前值是否合法。 注意: disabled 的表单项将会被忽略。
参数:
  • preventMark : Boolean
    True将会禁止把表单项标记为非法
返回值:
  • Boolean
    如果值是合法的，为true，其它为false
Field
isVisible () : Boolean
如果当前组件可见，返回true。
如果当前组件可见，返回true。
参数:
  • 无。
返回值:
  • Boolean
    如果当前组件可见，返回true，其它返回false。
Component
isXType ( String xtype , [ Boolean shallow ] ) : Boolean
Tests whether or not this Component is of a specific xtype. This can test whether this Component is descended from th...

测试此组件是否是指定的xtype。此方法既可以测试是否是指定的xtype的某个子类， 或者它是否直接是指定的xtype类(shallow=true)。

如果使用你自己的子类，必须知道组件必须注册它的xtype值。

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

示例用法:

var t = new Ext.form.TextField();
var isText = t.isXType('textfield');        // true
var isBoxSubclass = t.isXType('box');       // true, descended from BoxComponent
var isBoxInstance = t.isXType('box', true); // false, not a direct BoxComponent instance
参数:
  • xtype : String
    需要为当前组件进行检测的xtype
  • shallow : Boolean
    (可选) 如果为false，检测组件是否是xtype继承树中的某个子类（默认是这种情况）， 如果为true，只检测组件是否是指定的xtype类型。
返回值:
  • Boolean
    如果当前组件是指定xtype的子类，返回true，其它返回flase。
Component
markInvalid ( [ String msg ] ) : void
显示一个关联到当前表单项的出错信息， 使用msgTarget 来决定如何显示消息并将...

显示一个关msgTarget 来决定如何显示消息并将 invalidClass 应用到表单项的UI元素上。

注意: 如果表单项的值确实通过了校验， 此方法不会导致表单项的 validate 方法返回 false 。 所以简单地把一个表单项标记为非法并不会阻止表单项 通过设置的 Ext.form.Action.Submit.clientValidation 被提交。

invalid.
参数:
  • msg : String
    (可选)校验信息(默认为invalidText)
返回值:
  • void
Field
mon ( Observable|Element item , Object|String ename , Function fn , Object scope , Object opt ) : void
向任何Observable对象(或者元素)上添加监听器，监听器将会在组件...

向任何Observable对象(或者元素)上添加监听器，监听器将会在组件销毁时被自动删除。
用法：

myGridPanel.mon(myGridPanel.getSelectionModel(), 'selectionchange', handleSelectionChange, null, {buffer: 50});

or:

myGridPanel.mon(myGridPanel.getSelectionModel(), {
    selectionchange: handleSelectionChange,
    buffer: 50
});
参数:
  • item : Observable|Element
    需要添加listener/listeners的项目。
  • ename : Object|String
    事件名，或者一个包含事件名属性的对象。
  • fn : Function
    (可选) 如果 ename 参数是一个事件名，此参数为处理函数。
  • scope : Object
    (可选)如果 ename 参数是一个事件名称，此参数是作用域 ( this 引用)，监听函数将会在此作用域中被执行。
  • opt : Object
    (可选)如果 ename 参数是一个事件名称， 此参数是 addListener 配置项。
返回值:
  • void
Component
mun ( Observable|Element item , Object|String ename , Function fn , Object scope ) : void
删除通过mon 方法添加的监听器。
删除通过mon 方法添加的监听器。
参数:
  • item : Observable|Element
    需要删除listener/listeners的项目。
  • ename : Object|String
    事件名称，或者一个包含事件名称属性的对象。
  • fn : Function
    (可选)如果 ename 参数是一个事件名称，此参数是一个处理函数。
  • scope : Object
    (可选)如果 ename 参数是一个事件名称，此参数是作用域 ( this 引用)，监听函数将会在此作用域中被执行。
返回值:
  • void
Component
nextSibling () : Ext.Component
返回所属容器中的下一个组件
返回所属容器中的下一个组件
参数:
  • 无。
返回值:
  • Ext.Component
Component
on( String eventName, Function handler, [Object scope], [Object options] ) : void
给对象添加事件处理器 (addListener的简写形式)
给对象添加事件处理器 (addListener的简写形式。)
参数:
  • eventName : String
    监听的事件类型
  • handler : Function
    事件调用的方法
  • scope : Object
    （可选）处理方法执行时的作用域 (this 的引用)。 如果被忽略。默认为触发事件的对象。
  • options : Object
    可选 包含处理器配置的对象。
返回值:
  • void
Observable
previousSibling () : Ext.Component
返回所属容器中的前一个组件
返回所属容器中的前一个组件
参数:
  • 无。
返回值:
  • Ext.Component
Component
processValue ( Mixed value ) : void
仅仅在需要准备原始值供校验时，才需要覆盖此方法(参见 validate和 isValid)。...
仅仅在需要准备原始值供校验时，才需要覆盖此方法(参见 validate和 isValid)。 此方法被期望为表单项返回处理后的值，此值将会被用来进行校验 (参见validateValue方法)。
参数:
  • value : Mixed
返回值:
  • void
Field
purgeListeners() : void
移除对象上所有的监听器
移除对象上所有的监听器
参数:
  • 无。
返回值:
  • void
Observable
relayEvents( Object o, Array events ) : void
从指定的Observable上传递选择的事件就好像被当前对象触发一样。
从指定的Observable上传递选择的事件就好像被当前对象触发一样。
参数:
  • o : Object
    该Observable上的事件被当前对象传递。
  • events : Array
    传递的数组名。
返回值:
  • void
Observable
removeClass ( string cls ) : Ext.Component
从组件底层的元素上删除一个CSS类。
从组件底层的元素上删除一个CSS类。
参数:
  • cls : string
    需要移除的CSS类名
返回值:
  • Ext.Component
    this
Component
removeListener( String eventName, Function handler, [Object scope] ) : void
删除一个事件处理器。
删除一个事件处理器。
参数:
  • eventName : String
    处理器关联的事件类型。
  • handler : Function
    移除的处理器。 这应该是传递到addListener里的方法的引用。
  • scope : Object
    （可选）处理器指定的初始作用域。
返回值:
  • void
Observable
render ( [ Element/HTMLElement/String container ], [ String/Number position ] ) : void
在传递进来的HTML元素中渲染当前组件。...

在传递进来的HTML元素中渲染当前组件。

如果你正在使用一个Container 对象放置当前组件，那么请不要使用render方法。

当容器第一次被渲染时，它的子组件将会被容器的 layout 管理器渲染。

某些布局管理器允许动态添加子组件。它们包括 Ext.layout.CardLayout, Ext.layout.AnchorLayout, Ext.layout.FormLayout, Ext.layout.TableLayout。

当一个新的子组件被添加时，如果容器已经被渲染了， 你可能需要调用容器的 doLayout 方法来刷新视图，它将导致所有没有被渲染的子组件进行渲染操作。 此操作是必须的，这样你可以添加多个子组件而只刷新一次layout。

当创建复杂的UI时，非常重要的一点是，请记住调整子项目的尺寸和位置是容器的 layout 管理器的职责。 如果你希望子项目的尺寸对用户交互作出反应， 你必须为容器配置一个布局管理器，它将创建和管理你心里想要的那种布局。

忽略容器的layout 配置意味着将会使用一个基本的布局管理器，它除了按次序把子组件 渲染到容器中之外什么事情都不做。 这种情况下，任何尺寸和位置的调整操作都不会发生。

参数:
  • container : Element/HTMLElement/String
    (可选) 需要在其中渲染当前组件的元素。 如果它是从一个已存在的标签中创建的，此参数应该被忽略。
  • position : String/Number
    (可选) 容器中的一个元素ID或者一个DOM节点索引， 当前组件将会被插入到它前面 (默认append到容器的尾部)
返回值:
  • void
Component
reset () : void
将表单项的当前值重置为以前加载时的值，并且清除所有校验信息。...
将表单项的当前值重置为以前加载时的值，并且清除所有校验信息。 参见Ext.form.BasicForm. trackResetOnLoad 。
参数:
  • 无。
返回值:
  • void
TextField
resumeEvents() : void
重新开始触发事件。(参见suspendEvents) 如果事件以queueSuspended参数被挂起，则在事件被挂起时 ...
重新开始触发事件。(参见 suspendEvents) 如果事件以queueSuspended 参数被挂起，则在事件被挂起时触发的事件会被传递到所有的监听器上
参数:
  • 无。
返回值:
  • void
Observable
select ( Number index , Boolean scrollIntoView ) : void
根据项目在列表中的索引，在下拉列表中选中一个项目。 此函数不会导致select事件被触发。...
根据项目在列表中的索引，在下拉列表中选中一个项目。 此函数不会导致select事件被触发。 为了使此函数能运行，store必须已经被加载并且列表已经被展开，其它情况使用 setValue。
参数:
  • index : Number
    需要选中的列表项目索引，从0开始
  • scrollIntoView : Boolean
    False将会阻止下拉列表自动滚动到所选择的项目，如果它当前不在视图中 (默认为true)
返回值:
  • void
ComboBox
selectByValue ( String value , Boolean scrollIntoView ) : Boolean
根据数据值在下拉列表中选择一个项目。 此函数不会导致select事件被触发。为了此函数能够工作...
根据数据值在下拉列表中选择一个项目。 此函数不会导致select事件被触发。为了此函数能够工作， store必须已经加载并且列表已经被展开，其它情况使用setValue。
参数:
  • value : String
    需要选中项目的数据值
  • scrollIntoView : Boolean
    False将会阻止下拉列表自动滚动到所选择的项目，如果它当前不在视图中 (默认为true)
返回值:
  • Boolean
    如果值能与列表中的一个项目匹配，此参数为true，其它为false
ComboBox
selectText ( [ Number start ], [ Number end ] ) : void
选中当前表单项中的文本
选中当前表单项中的文本
参数:
  • start : Number
    (可选)选中的起点索引(默认为0)
  • end : Number
    (可选)选中的结束索引(默认为文本长度)
返回值:
  • void
TextField
setActiveError ( String msg , Boolean suppressEvent ) : void
将当前activeError设置为所给的字符串。 触发'invalid'事件。这不会设置出错图标...
将当前activeError设置为所给的字符串。 触发'invalid'事件。这不会设置出错图标，仅仅设置消息并触发事件。 如需显示出错图标，可使用markInvalid代替，它将在内部调用此方法。
参数:
  • msg : String
    出错消息
  • suppressEvent : Boolean
    True将会禁止触发'invalid'事件
返回值:
  • void
Field
setAutoScroll ( Boolean scroll ) : Ext.BoxComponent
设置该组件内容溢出时是否自动显示滚动条。
设置该组件内容溢出时是否自动显示滚动条。
参数:
  • scroll : Boolean
    值为true的话组件自动显示滚动条。
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setDisabled ( Boolean disabled ) : Ext.Component
工具函数，使用布尔值设置有效/无效(disabled/enabled )。
工具函数，使用布尔值设置有效/无效(disabled/enabled )。
参数:
  • disabled : Boolean
返回值:
  • Ext.Component
    this
Component
setEditable ( Boolean value ) : void
参数:
  • value : Boolean
    True将会允许用户直接编辑表单项文本。 允许或者阻止用户直接编辑表单项文本。 如果传递了false，用户将只能使用触发按钮修改表单项的值。 将会同时向文本栏添加一个click事件，它会调用触发器。 此方法是一个运行时配置，与配置时配置'editable'选项等价。
返回值:
  • void
TriggerField
setHeight ( Mixed height ) : Ext.BoxComponent
设置此组件的高度。该方法将触发resize事件。
设置此组件的高度。该方法将触发resize事件。
参数:
  • height : Mixed
    The new height to set.
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setPagePosition ( Number x , Number y ) : Ext.BoxComponent
设置组件在页面中的XY位置。 如果需要设置left和top值 ，请使用...
设置组件在页面中的XY位置。 如果需要设置left和top值 ，请使用setPosition方法。 该方法触发move事件。
参数:
  • x : Number
    The new x position
  • y : Number
    The new y position
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setPosition ( Number left , Number top ) : Ext.BoxComponent
设置组件的left和top值。设置组件的页面XY值，请使用setPagePosition方法。该方法触发...
设置组件的left和top值。设置组件的页面XY值，请使用setPagePosition方法。该方法触发move事件。
参数:
  • left : Number
    The new left
  • top : Number
    The new top
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setRawValue ( Mixed value ) : Mixed
绕过校验，直接设置底层DOM表单项的值。 设置值并进行校验，参见 setValue。
绕过校验，直接设置底层DOM表单项的值。 设置值并进行校验，参见 setValue。
参数:
  • value : Mixed
    需要设置的值
返回值:
  • Mixed
    value 被设置的表单项值
Field
setReadOnly ( Boolean readOnly ) : void
设置当前表单项的只读状态。
设置当前表单项的只读状态。
参数:
  • readOnly : Boolean
    表单项是否应该只读。
返回值:
  • void
TriggerField
setSize ( Mixed width , Mixed height ) : Ext.BoxComponent
设置BoxComponent的宽度和高度。 此方法触发resize事件...
设置BoxComponent的宽度和高度。 此方法触发resize事件。此方法可以接收单独的width或者height值作为参数， 或者你可以传递像这样的一个size对象： {width:10, height:20} 。
参数:
  • width : Mixed
    设置的新的width值。这可以是：
    • 一个Number类型指定Element新的宽度 Ext.Element.defaultUnit(默认为像素 :'px')。
    • 一个String类型用于设置width的CSS样式。
    • 一个size对象格式为 {width: widthValue, height: heightValue} 。
    • 值为 undefined 时，保留原来的width不变。
  • height : Mixed
    设置的新的height值(如果第一个参数传递了一个size对象，此参数没有必要传递)。这可以是：
    • 一个Number类型指定Element新的高度 Ext.Element.defaultUnit(默认为像素 :'px')。
    • 一个String类型用于设置height的CSS样式。也有可能不会被使用到。
    • 值为 undefined 时，保留原来的height不变。
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setValue ( String value ) : Ext.form.Field
将指定的值设置到表单项中。 如果找到了匹配的值，对应记录的文字将会被显示在表单项中。...
将指定的值设置到表单项中。 如果找到了匹配的值，对应记录的文字将会被显示在表单项中。 如果值与任何现有的项目都不匹配，并且定义了valueNotFoundText配置选项， 它将会被作为表单项的默认文本值显示。其它情况下表单项将会为空 (尽管值还是被设置了)。
参数:
  • value : String
    需要匹配的值
返回值:
  • Ext.form.Field
    this
ComboBox
setVisible ( Boolean visible ) : Ext.Component
工具方法，通过使用布尔值隐藏或者显示当前组件。
工具方法，通过使用布尔值隐藏或者显示当前组件。
参数:
  • visible : Boolean
    true时显示，false时隐藏
返回值:
  • Ext.Component
    this
Component
setWidth ( Mixed width ) : Ext.BoxComponent
设置组件的宽度。 此方法触发resize事件。
设置组件的宽度。 此方法触发resize事件。
参数:
  • width : Mixed
    The new width to set.
返回值:
  • Ext.BoxComponent
    this
BoxComponent
show () : Ext.Component
显示当前组件。监听' beforeshow' 事件，返回 false 取消显示组件...
显示当前组件。监听' beforeshow' 事件，返回 false 取消显示组件。在显示组件之后触发' show' 事件。
参数:
  • 无。
返回值:
  • Ext.Component
    this
Component
suspendEvents( Boolean queueSuspended ) : void
暂停触发所有的事件。 (参看resumeEvents)
暂停触发所有的事件。（参看 resumeEvents)
参数:
  • queueSuspended : Boolean
    如果传递为true则排列好暂停的事件使得在调用 resumeEvents 后再触发它们，而不是抛弃所有暂停的事件。
返回值:
  • void
Observable
syncSize () : Ext.BoxComponent
强制组件的大小按照此组件底层元素当前的高度和宽度计算。
强制组件的大小按照此组件底层元素当前的高度和宽度计算。
参数:
  • 无。
返回值:
  • Ext.BoxComponent
    this
BoxComponent
un( String eventName, Function handler, [Object scope] ) : void
删除一个事件处理器(removeListener方法的简写形式)
删除一个事件处理器(removeListener方法的简写形式。)
参数:
  • eventName : String
    处理器关联的事件类型
  • handler : Function
    被删除的处理器 这应该是传入 addListener 中的方法的引用。
  • scope : Object
    （可选）为处理器指定的初始作用域。
返回值:
  • void
Observable
unsetActiveError ( Boolean suppressEvent ) : void
清除activeError并触发'valid'事件。此方法被clearInvalid在内部进行...
清除activeError并触发'valid'事件。此方法被clearInvalid在内部进行调用， 并且一般情况下没有必要手工调用
参数:
  • suppressEvent : Boolean
    True将禁止触发'invalid'事件
返回值:
  • void
Field
update ( Mixed htmlOrData , [ Boolean loadScripts ], [ Function callback ] ) : void
刷新组件的内部区域。
刷新组件的内部区域。
参数:
  • htmlOrData : Mixed
    如果已经通过tpl为当前组件配置了一个模板，那么 将会使用此参数来装配模板。 如果没有为当前组件配置模板，组件的内容区域将会通过Ext.Element 进行刷新。
  • loadScripts : Boolean
    (可选)只用在使用html配置时此参数才合法。默认为false。
  • callback : Function
    (可选)只用在使用html配置时此参数才合法。 当脚本加载完成时回调函数才被执行。
返回值:
  • void
Component
updateBox ( Object box ) : Ext.BoxComponent
设置此组件底层元素的盒子模型尺寸。(译者注：盒子模型是CSS术语，详细资料请自行搜索。)
设置此组件底层元素的盒子模型尺寸。(译者注：盒子模型是CSS术语，详细资料请自行搜索。)
参数:
  • box : Object
    一个格式为{x, y, width, height}的对象
返回值:
  • Ext.BoxComponent
    this
BoxComponent
validate () : Boolean
校验表单项的值
校验表单项的值
参数:
  • 无。
返回值:
  • Boolean
    如果值合法，为true,否则为false
Field
validateValue ( Mixed The ) : Boolean
使用getErrors创建一个校验出错信息数组。 如果发现了任何错误，将会使用第一个错误作为参数...
使用getErrors创建一个校验出错信息数组。 如果发现了任何错误，将会使用第一个错误作为参数调用markInvalid方法并返回 false，否则返回true。以前，要求子类提供此方法的一个实现以处理校验过程--- 从3.2开始，应该用覆盖getErrors方法的方式替代。
参数:
  • The : Mixed
    表单项的当前值
返回值:
  • Boolean
    如果所有校验都通过，此值为true，如果一个或多个校验失败，则为false
Field

公共事件

Event Defined By
added : ( Ext.Component this , Ext.Container ownerCt , number index )
当一个组件被添加到一个Ext.Container时触发
当一个组件被添加到一个Ext.Container时触发
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • ownerCt : Ext.Container
    用于组件的容器
  • index : number
    添加组件的位置
Component
afterrender : ( Ext.Component this )
在组件渲染完成之后触发...

在组件渲染完成之后触发。

afterrender事件在当前组件被rendered 结束之后、在为组件定义的所有afterRender方法执行之后 触发，并且，如果有stateful， 也在状态被保存之后才触发。

监听器将会以如下参数格式被调用:
  • this : Ext.Component
Component
autosize : ( Ext.form.Field this , Number width )
当autoSize 方法被触发时发出此事件。 根据默认的逻辑，表单项可以有也可以实际上没有...
当autoSize 方法被触发时发出此事件。 根据默认的逻辑，表单项可以有也可以实际上没有 改变尺寸，但是此事件提供了一个钩子，如果有需要， 开发者在运行时可以提供额外的逻辑来改变输入栏的大小。
监听器将会以如下的参数格式调用:
  • this : Ext.form.Field
    文本栏
  • width : Number
    表单项新宽度
TextField
beforedestroy : ( Ext.Component this )
在组件 destroyed 之前触发。 在事件监听器中返回false以停止 destroy 操作。
在组件 destroyed 之前触发。 在事件监听器中返回false以停止 destroy 操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforehide : ( Ext.Component this )
在调用hide方法隐藏组件之前触发。 在事件监听器中返回false可以停止隐藏操作。
在调用hide方法隐藏组件之前触发。 在事件监听器中返回false可以停止隐藏操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforequery : ( Object queryEvent )
在所有查询操作被执行之前触发。 返回false可以取消查询操作或者设置queryEvent的...
在所有查询操作被执行之前触发。 返回false可以取消查询操作或者设置queryEvent的cancel属性为true。
监听器将会以如下参数格式被调用:
  • queryEvent : Object
    一个拥有如下属性的对象:
    • combo : Ext.form.ComboBox
      当前下拉框
    • query : String
      查询
    • forceAll : Boolean
      True将强制进行"所有"查询
    • cancel : Boolean
      设置为true将会取消查询
ComboBox
beforerender : ( Ext.Component this )
在组件被rendered 之前触发。 在事件监听器中返回false可以停止render 操作。
在组件被rendered 之前触发。 在事件监听器中返回false可以停止render 操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforeselect : ( Ext.form.ComboBox combo , Ext.data.Record record , Number index )
在下拉列表中一个项目被选中之前触发。返回false可以取消选中。
在下拉列表中一个项目被选中之前触发。返回false可以取消选中。
监听器将会以如下参数格式被调用:
  • combo : Ext.form.ComboBox
    当前下拉列表
  • record : Ext.data.Record
    从底层store中返回的数据记录
  • index : Number
    选中项目在下拉列表中的索引位置
ComboBox
beforeshow : ( Ext.Component this )
在调用show()方法现实组件之前触发。 事件处理函数返回false可以停止show。
在调用show 方法现实组件之前触发。 事件处理函数返回false可以停止show。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforestaterestore : ( Ext.Component this , Object state )
在组件状态恢复之前触发。返回false停止恢复状态操作。
在组件状态恢复之前触发。返回false停止恢复状态操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    StateProvider返回的状态哈希值。 如果没有禁止此事件，那么状态对象会被传递给applyState。 默认情况下，这样简单地把属性值拷贝到当前组件中。 可以覆盖此方法以提供自定的状态恢复操作。
Component
beforestatesave : ( Ext.Component this , Object state )
在组件状态被保存到配置的状态提供者之前触发。 返回false可以停止保存。
在组件状态被保存到配置的状态提供者之前触发。 返回false可以停止保存。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    状态值哈希。 这由在组件上调用getState() 方法决定。 此方法必须由开发者提供，返回是否需要对状态进行描述，默认情况下， Ext.Component有一个空实现。
Component
blur : ( Ext.form.Field this )
当表单项时区输入焦点时触发。
当表单项时区输入焦点时触发。
监听器将会以如下参数被调用:
  • this : Ext.form.Field
Field
change : ( Ext.form.Field this , Mixed newValue , Mixed oldValue )
如果表单项的时发生改变，在表单项刚刚失去焦点时触发。
如果表单项的时发生改变，在表单项刚刚失去焦点时触发。
监听器将会以如下参数格式调用:
  • this : Ext.form.Field
  • newValue : Mixed
    新的值
  • oldValue : Mixed
    原始值
Field
collapse : ( Ext.form.ComboBox combo )
当下拉列表被收起时触发
当下拉列表被收起时触发
监听器将会以如下参数格式被调用:
  • combo : Ext.form.ComboBox
    当前下拉框
ComboBox
destroy : ( Ext.Component this )
在组件被销毁之后触发。
在组件被destroyed之后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
disable : ( Ext.Component this )
在组件被设置为无效状态后触发。
在组件被设置为无效状态后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
enable : ( Ext.Component this )
当组件被设置为有效(enabled)之后触发。
当组件被设置为有效(enabled)之后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
expand : ( Ext.form.ComboBox combo )
当下拉列表被展开时触发
当下拉列表被展开时触发
监听器将会以如下参数格式被调用:
  • combo : Ext.form.ComboBox
    当前下拉框
ComboBox
focus : ( Ext.form.Field this )
当表单项获得输入焦点时触发。
当表单项获得输入焦点时触发。
监听器将会以如下参数格式被调用:
  • this : Ext.form.Field
Field
hide : ( Ext.Component this )
在组件被隐藏之后触发。 当调用hide 方法隐藏组件之后触发。
在组件被隐藏之后触发。 当调用hide 方法隐藏组件之后触发。
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
invalid : ( Ext.form.Field this , String msg )
在表单项被标记为非法之后触发。
在表单项被标记为非法之后触发。
监听器将会以如下参数格式调用:
  • this : Ext.form.Field
  • msg : String
    校验信息
Field
keydown : ( Ext.form.TextField this , Ext.EventObject e )
输入栏的keydown事件。 只有在 enableKeyEvents 被设置为true时才触发此事件。
输入栏的keydown事件。 只有在 enableKeyEvents 被设置为true时才触发此事件。
监听器将会以如下参数格式调用:
  • this : Ext.form.TextField
    文本栏
  • e : Ext.EventObject
TextField
keypress : ( Ext.form.TextField this , Ext.EventObject e )
输入栏的keypress事件。 只有在enableKeyEvents 被设置为true时才触发此事件。
输入栏的keypress事件。 只有在enableKeyEvents 被设置为true时才触发此事件。
Listeners will be called with the following arguments:
  • this : Ext.form.TextField
    文本栏
  • e : Ext.EventObject
TextField
keyup : ( Ext.form.TextField this , Ext.EventObject e )
输入栏keyup事件。 只有在 enableKeyEvents 被设置为true时才触发此事件。
输入栏keyup事件。 只有在 enableKeyEvents 被设置为true时才触发此事件。
监听器将会以如下的参数格式调用:
  • this : Ext.form.TextField
    文本栏
  • e : Ext.EventObject
TextField
move : ( Ext.Component this , Number x , Number y )
在组件移动之后触发。
在组件移动之后触发。
监听器将会用如下的参数格式来调用:
  • this : Ext.Component
  • x : Number
    The new x position
  • y : Number
    The new y position
BoxComponent
removed : ( Ext.Component this , Ext.Container ownerCt )
当一个组件被从Ext.Container容器中删除时触发
当一个组件被从Ext.Container容器中删除时触发
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • ownerCt : Ext.Container
    持有组件的容器
Component
render : ( Ext.Component this )
在组件被渲染之后触发。
在组件被 rendered(渲染) 之后触发。
监听器将以如下的参数格式被调用:
  • this : Ext.Component
Component
resize : ( Ext.Component this , Number adjWidth , Number adjHeight , Number rawWidth , Number rawHeight )
在组件被调整大小之后触发。
在组件被调整大小之后触发。
监听器将以如下的参数格式被调用:
  • this : Ext.Component
  • adjWidth : Number
    这是width调整后的值
  • adjHeight : Number
    这是height调整后的值
  • rawWidth : Number
    这是width原来的值
  • rawHeight : Number
    这是height原来的值
BoxComponent
select : ( Ext.form.ComboBox combo , Ext.data.Record record , Number index )
当一个列表项目被选中时触发
当一个列表项目被选中时触发
监听器将会使用如下参数被调用:
  • combo : Ext.form.ComboBox
    This combo box
  • record : Ext.data.Record
    从底层store中返回的数据记录
  • index : Number
    下拉列表中被选中项目的索引
ComboBox
show : ( Ext.Component this )
在调用show 方法显示组件之后触发。
在调用show 方法显示组件之后触发。
监听器将会用如下的参数格式被调用:
  • this : Ext.Component
Component
specialkey : ( Ext.form.Field this , Ext.EventObject e )
当任何和导航有关的键被按下时触发(上下左右箭头, tab, 回车,esc, 等等) is pressed. 处理其它按键参见...
当任何和导航有关的键被按下时触发(上下左右箭头, tab, 回车,esc, 等等) is pressed. 处理其它按键参见 Ext.Panel.keys或者 Ext.KeyMap。 你可以检测 Ext.EventObject.getKey 以便获知哪个键被按下。例如：
var form = new Ext.form.FormPanel({
    ...
    items: [{
            fieldLabel: 'Field 1',
            name: 'field1',
            allowBlank: false
        },{
            fieldLabel: 'Field 2',
            name: 'field2',
            listeners: {
                specialkey: function(field, e){
                    // e.HOME, e.END, e.PAGE_UP, e.PAGE_DOWN,
                    // e.TAB, e.ESC, arrow keys: e.LEFT, e.RIGHT, e.UP, e.DOWN
                    if (e.getKey() == e.ENTER) {
                        var form = field.ownerCt.getForm();
                        form.submit();
                    }
                }
            }
        }
    ],
    ...
});
监听器将会以如下参数格式被调用:
  • this : Ext.form.Field
  • e : Ext.EventObject
    事件对象
Field
staterestore : ( Ext.Component this , Object state )
组件状态被存储之后触发。
组件状态被存储之后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    StateProvider返回的状态哈希值。 如果没有禁止此事件，那么状态对象会被传递给applyState。 默认情况下，这样简单地把属性值拷贝到当前组件中。 可以覆盖此方法以提供自定的状态恢复操作。
Component
statesave : ( Ext.Component this , Object state )
在组件状态被保存到所配置的状态提供者之后触发。
在组件状态被保存到所配置的状态提供者之后触发。
监听器将会用如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    状态值hash。 这是由在足见上调用getState() 方法决定的。 开发者必须提供此方法以返回是否需要恢复状态，默认情况下， Ext.Component有一个空实现。
Component
valid : ( Ext.form.Field this )
在表单项被校验无错误之后触发。
在表单项被校验无错误之后触发。
监听器将会以如下参数格式被调用:
  • this : Ext.form.Field
Field


Observable
    Component
      BoxComponent
        Field
          CompositeField

Class Ext.form.CompositeField

包: | Ext.form
定义类的文件: | CompositeField.js
类: | CompositeField
继承自: | Field
复合表单项允许将多个表单项渲染到同一行中。在内部使用hbox布局渲染表单项， 所以所有普通的HBox布局配置选项都可用。示例用法:
{
    xtype: 'compositefield',
    labelWidth: 120
    items: [
        {
            xtype     : 'textfield',
            fieldLabel: 'Title',
            width     : 20
        },
        {
            xtype     : 'textfield',
            fieldLabel: 'First',
            flex      : 1
        },
        {
            xtype     : 'textfield',
            fieldLabel: 'Last',
            flex      : 1
        }
    ]
}
在以上的例子中，复合表单项的fieldLabel将被设置为'Title,First,Last'，因为它组合了它的每个 子项目的fieldLabel。可以通过在复合表单项自身设置一个fieldLabel以覆盖此属性:
{
    xtype: 'compositefield',
    fieldLabel: 'Custom label',
    items: [...]
}
任何Ext.form.*组件都可以被放置到复合表单项中。

配置项

Config Options Defined By
allowDomMove : Boolean
在渲染时组件是否可以移动Dom节点(默认为true)。
Component
anchor : String
注: 这个配置只用于该组件被包含在一个已使用AnchorLayout...

注: 这个配置只用于该组件被包含在一个已使用 AnchorLayout (或者其子类)配置的Container时。 基于布局管理器，例如：

  • Ext.form.FormPanel
  • 指定 layout: 'anchor' // or 'form', or 'absolute'

参见 Ext.layout.AnchorLayout. anchor 。

BoxComponent
applyTo : Mixed
指定一个元素的id、一个DOM元素或者一个已经存在并被渲染到DIV中的元素，此DIV已经被...

指定一个元素的id、一个DOM元素或者一个已经存在并被渲染到DIV中的元素，此DIV已经被 渲染到document中，并且为当前组件指定了一些结构化的标签。

  • 描述 :
      当使用了 applyTo， 在主元素中也可以用id或者CSS类名来指定组件的托管部分， 并且，如果可以的话，创建的组件可能也会试图在那个标签中创建它的子组件。
  • 注意 :
      当使用此配置项时，无需调用render()方法。
      如果指定了applyTo属性，任何传递给 renderTo 的值都会被忽略，并且目标元素的父节点将会自动被用作组件的容器。
Component
autoCreate : String/Object
一个DomHelper 元素描述，或者为true使用一个默认元素描述。 用来创建封装当前组件的...

一个DomHelper 元素描述，或者为true使用一个默认元素描述。 用来创建封装当前组件的 Element。 细节参见 autoEl 。 默认为:

                                {tag: 'input', type: 'text', size: '20', autocomplete: 'off'}
Field
autoScroll : Boolean
如果值为true，将会在该元素上使用overflow:'auto'配置，并且在必要的时候...
如果值为true，将会在该元素上使用overflow:'auto'配置，并且在必要的时候自动显示滚动条，否则，溢出部分的组件都会被切除(默认值为 false)。
BoxComponent
autoShow : Boolean
如果组件需要检测隐藏CSS属性(如 'x-hidden' 或者 'x-hide-display')并且在渲染时删除...
如果组件需要检测隐藏CSS属性(如 'x-hidden' 或者 'x-hide-display')并且在渲染时删除它们 (默认为false)，设置此值为true。
Component
boxMaxHeight : Number
设置组件的最大高度值...

设置组件的最大高度值。

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

BoxComponent
boxMaxWidth : Number
设置组件的最大宽度值...

设置组件的最大宽度值。

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

BoxComponent
boxMinHeight : Number
设置组件的最小高度值...

设置组件的最小高度值。

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

BoxComponent
boxMinWidth : Number
设置组件的最小宽度值...

设置组件的最小宽度值。

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

BoxComponent
bubbleEvents : Array
一个事件数组，当这些事件被触发时，将会被冒泡到所有父容器中。参见....

一个事件数组，当这些事件被触发时，将会被冒泡到所有父容器中。参见 Ext.util.Observable.enableBubble。 默认为 []。

Component
clearCls : String
应用到特殊的clearing div的CSS类， 这个clearing div直接渲染到每个form field的包装器后面...

应用到特殊的clearing div的CSS类， 这个clearing div直接渲染到每个form field的包装器后面，以提供 清除field的功能(默认为 'x-form-clear-left')。

注意: 只有在当前组件被渲染到一个使用FormLayout 布局(例如 Ext.form.FormPanel 或者指定 layout:'form')的 容器中、或者是指定了一个fieldLabel 、或者指定isFormField=true 时此配置才有效。

另请参见 Ext.layout.FormLayout. fieldTpl。

Component
cls : String
一个可选的额外CSS类，它将被添加到当前组件的元素上(默认为'')...
一个可选的额外CSS类，它将被添加到当前组件的元素上(默认为'')。 此属性对于在组件上，或者它的任何使用标准CSS规则的孩子节点上， 添加定制的样式非常有用。
Field
contentEl : String
(可选)指定一个已存在的HTML元素，或者一个已存在HTML元素的...

(可选)指定一个已存在的HTML元素，或者一个已存在HTML元素的 id ，它们将被用作当前组件的内容。

  • 描述 :
    此配置选项被用来将一个已存在的HTML元素 插入到一个新组件(在组件渲染之后它简单地移动DOM元素) 的layout元素中，使它成为该组件的内容。
  • 注意 :
    指定的HTML元素将被append到组件的layout元素中， 在所有配置的 HTML 被插入之后， 并且，这样的话，在render事件 被触发时，document中将不再包含此元素。
    指定的HTML元素将不会参与组件所有可能使用的 layout 过程(译者注：指这些HTML元素 不会参与布局操作)。 它仅是HTML而已。布局操作实在孩子 items 上进行的。
    添加 x-hidden 或者 x-hide-display CSS类，以防在内容渲染到panel时发生闪烁。
Component
ctCls : String
一个可选的外部CSS样式，添加到这个组件的容器(默认值为 '')。 这个方法对于使用标准的CSS规则...

一个可选的外部CSS样式，添加到这个组件的容器(默认值为 '')。 这个方法对于使用标准的CSS规则，为组件或它的任何一个子组件添加特定的样式非常有用。 参见 Ext.layout.ContainerLayout和 extraCls 。

注意: ctCls 默认为 ''期望如下的类，它们将指定一个默认值:

  • Box Layout : 'x-box-layout-ct'
使用一个额外的CSS类配置以上的Class，它是append到默认对象上的。例如， 对于BoxLayout (Hbox and Vbox):
                                ctCls: 'x-box-layout-ct custom-class'

Component
data : Mixed
初始化数据集，它将被应用到 tpl 上以刷新组件的内容区域。
Component
disabled : Boolean
当前组件处于无效状态时为true。 Read-only.
Field
disabledClass : String
当组件处于无效状态时添加到组件上的CSS类(默认为 'x-item-disabled')。
Component
fieldClass : String
表单项的默认CSS类(默认为'x-form-field')
Field
fieldLabel : String
紧靠此field显示的标签文本(默认值为 '')。注意...

紧靠此field显示的标签文本(默认值为 '')。

注意:只有在当前组件被渲染到一个使用FormLayout 的容器中时，此配置才有效。 (例如 Ext.form.FormPanel 或 指定 layout:'form')。

另请参见 hideLabel 、 Ext.layout.FormLayout和 fieldTpl。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Name'
    }]
});
Component
flex : Number
注: 这个配置只用于该组件被包含在一个已使用BoxLayout配置的Container中时...

注: 这个配置只用于该组件被包含在一个已使用BoxLayout配置的Container中时。通过计算每一个子组件的flex值所占全部flex值之和的比例，来决定子组件的宽(HBoxLayout)高(VBoxlayout)。 任何子项的 flex = 0 或 flex = undefined 将不被设置(初始值大小将不被改变)。

BoxComponent
focusClass : String
当表单项获得焦点时使用的CSS类(默认为 'x-form-focus')
Field
height : Number
组件的高度(默认值为 auto)。注:如果想使用百分比的方式...
组件的高度(默认值为 auto)。注:如果想使用百分比的方式来设置值，请查看 Ext.Component.anchor。
BoxComponent
hidden : Boolean
如果当前组件处于隐藏状态，此值为true。Read-only。
Component
hideLabel : Boolean
true时完全隐藏label元素 ( label 和 separator)。 默认为 false。 默认情况下，即使你不指定...

true时完全隐藏label元素 ( label 和 separator)。 默认为 false。 默认情况下，即使你不指定 fieldLabel 它的空间仍然会被保留，这样这块区域会与其它确实拥有label的区域位于同一排。 讲此值设置为 true 将导致此区域不再保留此空间。

注意: 参见 clearCls 的注释。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield'
        hideLabel: true
    }]
});
Component
hideMode : String
组件如何隐藏，支持的值有： 'visibility' (css visibility), 'offsets' (位置偏移量为负值) 和...

组件如何隐藏，支持的值有： 'visibility' (css visibility), 'offsets' (位置偏移量为负值) 和 'display' (css display).

注意:一般首选默认值 'display'，因为当组件第一次显示的时候它们会自动进行布局 (隐藏的时候不会调整尺寸)。

Component
hideParent : Boolean
此值为true时，当调用hide/show方法时，将会hide和show组件的容器...
此值为true时，当调用hide/show方法时，将会hide和show组件的容器；false时将会 hide和show组件自身(默认为false)。例如，这可以用作window上隐藏按钮的一种 快捷操作，通过设置此按钮的hideParent:true，然后把它添加到window上。
Component
html : String/Object
一个HTML片段，或者一个 DomHelper 描述，用作layout元素的内容(默认为'')。...
一个HTML片段，或者一个 DomHelper 描述，用作layout元素的内容(默认为'')。 这个HTML内容在组件渲染之后才被添加，所以在 render 出发的时候，document中尚未包含此HTML。 但是这个内容将会在所有配置的 contentEl 之前被插入到body标签中。
Component
id : String
当前组件唯一的id(默认为auto-assigned id)...

当前组件唯一的id(默认为auto-assigned id)。 如果你需要在以后访问组件，而又没有一个有效的组件对象引用，那么你需要指定一个 id( 也就是，使用Ext. getCmp方法 )。

注意，此id也将被用作组件底层HTML标签的id，这些标签被渲染到页面中。 这将允许你编写基于id的CSS规则，以独立地描述指定的实例；并且，也可以通过 组件父标签的id选中子元素。

注意:为了避免与唯一的id 产生重复， 请参见 itemId 和 ref 。

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

Component
inputType : String
输入栏的类型属性---例如radio,text,password,file(默认为'text')。...
输入栏的类型属性---例如radio,text,password,file(默认为'text')。 'file'和'password'类型通常必须用来渲染那些没有独立Ext组件的表单项类型。 注意，如果你使用inputType:'file'， 那么将不再支持 emptyText 并且应该避免使用。
Field
invalidClass : String
当把表单项标记为非法时所使用的CSS类(默认为'x-form-invalid')
Field
invalidText : String
当把一个表单项标记为非法状态并且没有提供消息时所使用的出错文本...
当把一个表单项标记为非法状态并且没有提供消息时所使用的出错文本 (默认为'The value in this field is invalid')
Field
itemCls : String
注意: 只有在当前组件被渲染到一个使用FormLayout 布局的 容器中时此配置才有效...

注意: 只有在当前组件被渲染到一个使用FormLayout 布局的 容器中时此配置才有效。 (例如Ext.form.FormPanel 或者指定 layout:'form')。

一个附加的CSS类，应用到div上，包装当前field的表单元素。 如果提供了此参数， field级上的itemCls将会覆盖 container级上提供的 默认itemCls。 为itemCls指定的值将会被添加默认的 类('x-form-item')。

既然它被应用到项目的包装器上(参见 Ext.layout.FormLayout。 fieldTpl)， 它将允许你编写能应用到此field、label(如果有指定)、或者field内部任何其它元素的标准CSS规则。

注意: 参考 fieldLabel的注释。 .

示例用法:

// Apply a style to the field's label:
<style>
    .required .x-form-item-label {font-weight:bold;color:red;}
</style>

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Name',
        itemCls: 'required' //this label will be styled
    },{
        xtype: 'textfield',
        fieldLabel: 'Favorite Color'
    }]
});
Component
itemId : String
当没有可利用的对象引用时，itemId可以作为第二选择，用来获得一个组件的引用， 代替 ...

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

var c = new Ext.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'); // 与 Ext.getCmp()不同

p2 = p1.ownerCt.getComponent('p2'); // 通过兄弟对象获得引用

另请参见 id 和 ref 。

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

Component
labelSeparator : String
每个fieldLabel 文本后面现实的分隔符。 此属性可以在多个层次上进行配置...

每个fieldLabel 文本后面现实的分隔符。 此属性可以在多个层次上进行配置。优先顺序为：

  • field / component level
  • container level
  • layout level (默认为冒号 ':')
如不需要为当前field的label显示分隔符，指定一个空字符串''即可。

注意:参见 clearCls 的注释。

另请参见 hideLabel 和 Ext.layout.FormLayout。 fieldTpl。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    layoutConfig: {
        labelSeparator: '~'   // layout config has lowest priority (defaults to ':')
    },
    labelSeparator: '>>',     // config at container level
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Field 1',
        labelSeparator: '...' // field/component level config supersedes others
    },{
        xtype: 'textfield',
        fieldLabel: 'Field 2' // labelSeparator will be '='

    }]
});
Component
labelStyle : String
一个CSS样式描述字符串，它将直接应用到当前field的label上...

一个CSS样式描述字符串，它将直接应用到当前field的label上。 如果有设置，默认为容器的labelStyle值(例如 Ext.layout.FormLayout.labelStyle , 或者 '')。

注意:参见 clearCls 的注释。

另请参见 hideLabel 和 Ext.layout.FormLayout. fieldTpl。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Name',
        labelStyle: 'font-weight:bold;'
    }]
});
Component
listeners : Object
一个包含一个或多个事件处理器的配置对象，会在初始化的时候被添加到目标对象上...

一个包含一个或多个事件处理器的配置对象，会在初始化的时候被添加到目标对象上。 该配置对象应该是一个有效的监听器配置对象就像 addListener例子中指定的一样可一次附加多个处理器。

ExtJs Components上的DOM事件

一些 ExtJs Component 类导出时会选择一些DOM事件(例如 "click", "mouseover" 等等), 这通常只是在有额外的值可以被添加时发生。例如DataView类的 click事件会传递被点击的节点。也可以直接在Component的HTMLElementevent上访问DOM事件，但必需在Component被渲染后监听器才能添加到Element 上。可以按照以下步骤添加插件:

// 插件会用一个监听器配置对象进行配置。
//该组件会被添加到所有处理方法的参数列表上。
Ext.DomObserver = Ext.extend(Object, {
    constructor: function(config) {
        this.listeners = config.listeners ? config.listeners : config;
    },

    // 组件将自己传递进了插件的初始化方法里
    init: function(c) {
        var p, l = this.listeners;
        for (p in l) {
            if (Ext.isFunction(l[p])) {
                l[p] = this.createHandler(l[p], c);
            } else {
                l[p].fn = this.createHandler(l[p].fn, c);
            }
        }

        // 渲染后立即添加监听器到元素上
        c.render = c.render.createSequence(function() {
            var e = c.getEl();
            if (e) {
                e.on(l);
            }
        });
    },

    createHandler: function(fn, c) {
        return function(e) {
            fn.call(this, e, c);
        };
    }
});

var combo = new Ext.form.ComboBox({

    // 元素被点击后折叠
    plugins: [ new Ext.DomObserver({
        click: function(evt, comp) {
            comp.collapse();
        }
    })],
    store: myStore,
    typeAhead: true,
    mode: 'local',
    triggerAction: 'all'
});

Observable
margins : Object
注:此配置只用于该组件展现在一个使用BorderLayout...

注:此配置只用于该组件展现在一个使用BorderLayout 或 BoxLayout的两个子类之一作为布局的容器。

这个margins对象在该组件中的格式为：

{top: (top margin),right: (right margin),bottom: (bottom margin),left: (left margin)}

也可以是一个字符串，中间用空格分隔，margin值为数字。 把matches中每一个值的次序跟CSS中margin值的排列方式相对应：

  • 如果只有一个值，它适用于所有方面。
  • 如果有两个值，top和bottom的边框设置为第一个值，left和right设置为第二个值。
  • 如果有三个值，top设置为第一个值，left和right设置为第二个值，bottom设置为第三个值。
  • 如果有四个值，分别设置为top, right, bottom, left。

默认值:

{top:0, right:0, bottom:0, left:0}
BoxComponent
msgFx : String
实验性参数 当在表单项下显示校验消息时使用的效果(默认为'normal')。
Field
msgTarget : String
通过markInvalid 设置的消息文本应该显示的位置。 必须是如下值之一：...

通过markInvalid 设置的消息文本应该显示的位置。 必须是如下值之一：

  • qtip 当用户鼠标滑过表单项时，显示一个包含消息的快速提示。 这是默认情况。
    为了使此参数能工作，必须调用 Ext.QuickTips.init。
  • title 在弹出的默认浏览器标题属性上显示消息。
  • under 在表单项之下添加一块div，包含出错消息。
  • side 在表单项右边添加一个出错图标，当鼠标滑过时弹出并显示一个消息。
  • [element id] 在指定元素的innerHTML中直接添加出错消息。
Field
name : String
表单项的HTML name属性(默认为'')。 注意: 如果需要当前表单项自动被包含在...
表单项的HTML name属性(默认为'')。 注意: 如果需要当前表单项自动被包含在 form submit()中，必须设置此参数。
Field
overCls : String
一个可选的额外的CSS类，它将在鼠标移过元素时被添加到组件上...
一个可选的额外的CSS类，它将在鼠标移过元素时被添加到组件上，鼠标移出时 删除。(默认为'')。此属性对于在组件上，或者它的任何使用标准CSS规则的孩子节点上， 添加定制的'active' 或者 'hover'样式非常有用。
Component
pageX : Number
如果该组件被包含在一个指定位置的容器中，这个值表示页面级的x坐标值（译者注：在有滚动条的情况下这个值很有用）。
BoxComponent
pageY : Number
如果该组件被包含在一个指定位置的容器中，这个值表示页面级的y坐标值（译者注：在有滚动条的情况下这个值很有用）。
BoxComponent
plugins : Object/Array
一个对象或者一个对象数组，为组件提供特殊的功能 ...
一个对象或者一个对象数组，为组件提供特殊的功能。 对一个合法的插件唯一的要求是它含有一个init()方法， 能接收一个Ext.Component型的参数。 当组件被创建时，如果有可用的插件，组件将会调用每个插件的init方法， 并将自身的引用作为方法参数传递给它。然后，每个插件就可以调用方法或者响应组件上的事件， 就像需要的那样提供自己的功能。
Component
preventMark : Boolean
true将会禁止 把表单项标记为非法。默认为false.
Field
ptype : String
需要创建配置的ptype。 当传递一个配置对象给构造函数时...
需要创建配置的ptype。 当传递一个配置对象给构造函数时，此配置选项不会被使用。 只有在使用懒初始化的时候此配置项才会被使用， 此时Plugin不是 通过一个完整的实例组件，而是通过一个Component配置指定的。 在渲染时，将会查找ptype以决定创建何种类型的Plugin。

如果你创建自己的Plugin，你可以通过 Ext.ComponentMgr.registerPlugin 对它们进行注册，以便能利用懒初始化和渲染机制。
Component
readOnly : Boolean
将会把表单项标记为在HTML中只读(readOnly)(默认为false)...
true 将会把表单项标记为在HTML中只读(readOnly)(默认为false)。

Note: 这仅仅设置元素的readOnly DOM参数。 例如，设置 readOnly=true ，将不会禁用触发ComboBox或者DateField； 这为你提供了一个选项，可以强制用户通过触发按钮选择一个值，而不是 在文本框进行输入。 使用 hideTrigger 可以隐藏触发按钮。

Field
ref : String
一个路径描述，与组件的 ownerCt 相关，它描述了把当前组件的命名引用放置到哪个父容器中去。...

一个路径描述，与组件的 ownerCt 相关，它描述了把当前组件的命名引用放置到哪个父容器中去。

祖先的坐标路径可以通过'/'字符进行分隔。 例如，将一个Toolbar Button的引用放入 拥有此Toolbar的Panel中:

var myGrid = new Ext.grid.EditorGridPanel({
    title: 'My EditorGridPanel',
    store: myStore,
    colModel: myColModel,
    tbar: [{
        text: 'Save',
        handler: saveChanges,
        disabled: true,
        ref: '../saveButton'
    }],
    listeners: {
        afteredit: function() {
//          The button reference is in the GridPanel
            myGrid.saveButton.enable();
        }
    }
});

在上面的代码中，如果 ref 是 'saveButton' ，那么引用将会被放置到Toolbar中。 ref 中的每个'/' 都会从组件的 ownerCt 向上移动一级。

另请参见 added 和 removed 事件。

Component
region : String
注: 此配置只用于该组件展现在一个布局为BorderLayout的容器中...

注: 此配置只用于该组件展现在一个布局为BorderLayout的容器中(例如指定layout:'border')。

详见Ext.layout.BorderLayout。

BoxComponent
renderTo : Mixed
该值可以是一个节点的id、一个DOM节点或者一个已存在的元素...

该值可以是一个节点的id、一个DOM节点或者一个已存在的元素， 组件将会被渲染到其中。

  • 注意 :
      如果组件不是一个Container 的子项目时， 不要使用此选项。 渲染和管理它的子项目是一个Container 的layout manager的责任。
      当使用此配置项时，无需调用render()方法。

另请参见 render 。

Component
stateEvents : Array
一个事件数组，当它们被触发时，组件需要保存自己的状态(默认值为 none)...

一个事件数组，当它们被触发时，组件需要保存自己的状态(默认值为 none)。 它们可以是任何该组件支持的事件类型，包括浏览器事件和 自定义事件(例如['click', 'customerchange'])。

对于保存和恢复组件状态的详细解释，参见 stateful

Component
stateId : String
为该组件指定的唯一的id值，它被用作管理组件状态的目的...
为该组件指定的唯一的id值，它被用作管理组件状态的目的。 (如果设定了id，默认值为组件自己的id，否则，如果组件使用自动生成的id，此值为null)。

对于保存和反解析组件状态的解释，参见 stateful 。

Component
stateful : Boolean
一个标志参数，它将引起组件在启动时尝试从一个保存的状态中恢复内部状态参数...

一个标志参数，它将引起组件在启动时尝试从一个保存的状态中恢复内部状态参数。 组件必须要么拥有一个 stateId 或者 id ，它们被分配给需要被管理的状态属性。 在跨页面加载时，不保证自动生成的id属性的稳定性， 并且，不能依赖此id来保存和恢复一个组件的相同状态。

为了保存状态的操作能够工作，状态管理器的提供者必须 被设置成一个Ext.state.Provider 的实现类，它覆盖了set 和get 方法，以便保存和恢复name/value对。 有一个内置的Ext.state.CookieProvider 可用。

为当前页面设置状态提供者:

Ext.state.Manager.setProvider(new Ext.state.CookieProvider({
    expires: new Date(new Date().getTime()+(1000*60*60*24*7)), //7 days from now
}));

当 stateEvents 配置项中其中之一的事件被触发时， 一个状态可保存的组件将试图保存其状态。

保存状态时，一个可保存状态的组件首先需要通过调用 getState 方法来序列化它的状态。 默认情况下，此函数什么事都不做。 开发者必须提供一个实现，返回一个hash对象，它描述了组件可恢复的状态。

getState方法产生的值将会传递给 Ext.state.Manager.set 方法，它使用配置的 Ext.state.Provider 来保存对象，以组件的 stateId 为key，或者，如果此值（指stateId）没有指定时， 使用它的 id 作为key。

在进行构造时，一个可保存状态的组件试图通过调用 Ext.state.Manager.get方法来 恢复它的状态，传递 stateId 或者，如果此值（指stateId）没有指定时， 使用它的 id 作为参数。

结果对象被传递给 applyState 。 applyState 的默认实现只是简单地把属性拷贝到对象中， 但是开发者可以覆盖此方法以支持更多行为。

通过向 beforestaterestore, staterestore, beforestatesave 和 statesave 事件上绑定监听器，你可以在保存和恢复状态时进行额外的处理。

Component
style : String
被添加到组件元素的特定样式。 必须是按照...
被添加到组件元素的特定样式。 必须是按照 Ext.Element.applyStyles 类指定格式的合法参数值。

new Ext.Panel({
    title: 'Some Title',
    renderTo: Ext.getBody(),
    width: 400, height: 300,
    layout: 'form',
    items: [{
        xtype: 'textarea',
        style: {
            width: '95%',
            marginBottom: '10px'
        }
    },
        new Ext.Button({
            text: 'Send',
            minWidth: '100',
            style: {
                marginBottom: '10px'
            }
        })
    ]
});
Component
submitValue : Boolean
False将会清除表单项的name属性，这样在提交表单时它将不会被提交。 默认为true。
Field
tabIndex : Number
该表单项的tabIndex。 注意，此属性仅仅应用到被渲染好的，而不是那些通过applyTo...
该表单项的tabIndex。 注意，此属性仅仅应用到被渲染好的，而不是那些通过applyTo创建的表单项 (默认为undefined)。
Field
tabTip : String
注: 这个配置只用于当该组件作为TabPanel的一个子项目时使用...

注: 这个配置只用于当该组件作为TabPanel的一个子项目时使用。

一个String类型的innerHTML(支持html标签)，当鼠标放在该选项上的时，显示一个tooltip。为了tips能够被渲染，Ext.QuickTips.init()必须被提前调用。
BoxComponent
tpl : Mixed
一个 Ext.Template , Ext.XTemplate 或者一个用来形成一个Ext.XTemplate的字符串数组...
一个 Ext.Template , Ext.XTemplate 或者一个用来形成一个Ext.XTemplate的字符串数组。 与 data 和 tplWriteMode 配置项协同使用。
Component
tplWriteMode : String
刷新组件的内容区域时使用的Ext.(X)Template方式。 默认为'overwrite' (参见 Ext.XTemplate.overwrite )。
刷新组件的内容区域时使用的Ext.(X)Template方式。 默认为'overwrite' (参见 Ext.XTemplate.overwrite )。
Component
validateOnBlur : Boolean
在表单项失去焦点时是否进行校验(默认为 true)。
Field
validationDelay : Number
在用户开始输入到校验操作开始之间的时长毫秒数 (默认为250)
Field
validationEvent : String/Boolean
引发表单项进行校验操作的事件。 设置为false可以禁用自动校验 (默认为'keyup')。
引发表单项进行校验操作的事件。 设置为false可以禁用自动校验 (默认为'keyup')。
Field
value : Mixed
当前表单项的初始化值(默认为undefined).
Field
width : Number
组件的宽度(默认值为 auto)。注:如果想使用百分比的方式...
组件的宽度(默认值为 auto)。注:如果想使用百分比的方式来设置值，请查看 Ext.Component.anchor。
BoxComponent
x : Number
如果被包含在一个指定位置的容器中，这个值表示x(left)坐标值。
BoxComponent
xtype : String
需要创建配置的xtype。 当传递一个配置对象给构造函数时...
需要创建配置的xtype。 当传递一个配置对象给构造函数时，此配置选项不会被使用。 只有在使用懒初始化的时候此配置项才会被使用，此时容器的子项目不是 通过一个完整的实例组件，而是通过一个Component配置指定的。 在渲染时，将会查找xtype以决定创建何种类型的子组件。

预定义的xtype列表如下： here。

如果你继承Component创建你自己的组件，你需要使用Ext.ComponentMgr.registerType 对它们进行注册，以便利用懒初始化和渲染机制。
Component
y : Number
如果被包含在一个指定位置的容器中，这个值表示y(top)坐标值。
BoxComponent

公共属性

Property Defined By
combineErrors : Boolean True将在CompositeField层次上，把单个表单项的错误绑定到一个单独的出错消息中 (默认为true)
CompositeField
defaultMargins : String 默认情况下应用到复合表单项中每个表单项上的页边空白(margin)
CompositeField
disabled : Boolean
当前组件处于无效状态时为true。 Read-only.
Component
el : Ext.Element
封装了当前组件的Ext.Element。 Read-only。通常情况下，这将是一个<DIV>元素，它由此类的...

封装了当前组件的Ext.Element。 Read-only。

通常情况下，这将是一个<DIV>元素，它由此类的 onRender方法创建，但是它可以通过使用 autoEl 配置项进行覆盖。

注意: 直到组件渲染完成此元素都将处于无效状态。

如需向当前组件的 DOM事件(而不是当前组件自己的Observable事件)添加监听器， 更多建议，参见 listeners 配置项，或者直接使用一个render监听器:

new Ext.Panel({
    title: 'The Clickable Panel',
    listeners: {
        render: function(p) {
            // Append the Panel to the click handler's argument list.
            p.getEl().on('click', handlePanelClick.createDelegate(null, [p], true));
        },
        single: true  // Remove the listener after first invocation
    }
});

另请参见 getEl

Component
fieldErrors : Ext.util.MixedCollection 符合表单项中子表单项上当前错误的集合(MixedCollection)。 此属性被内部使用，用来跟踪何时在复合表单项级别上显示和隐藏出错消息。 监听器被绑定到MixedCollection的add,remove和replace事件，以便 当错误被添加或删除时更新UI中的出错图标。
CompositeField
hidden : Boolean
如果当前组件处于隐藏状态，此值为true。Read-only。
Component
initialConfig : Object
当前组件的初始化配置描述。 Read-only。
Component
innerCt : Ext.Container 一个配置为hbox布局的容器，它负责对子表单项进行布局
CompositeField
isComposite : Boolean 表示这是一个复合表单项
CompositeField
items : Ext.util.MixedCollection 内部集合，包含当前复合表单项中所有子表单项。
CompositeField
label : Ext.Element
关联到当前表单项的label元素。 只有在当前表单项已经被一个Ext.layout.FormLayout ...

关联到当前表单项的label元素。 只有在当前表单项已经被一个Ext.layout.FormLayout 布局管理器渲染之后才可用。

Field
originalValue : mixed
表单项原来的值，它是在value 中配置的；或者，如果 trackResetOnLoad 设置为...
表单项原来的值，它是在value 中配置的；或者，如果 trackResetOnLoad 设置为 true 时，通过表单加载操作最后一次加载的。
Field
ownerCt : Ext.Container
组件所属的Container (默认为undefined，当前组件被添加到一个容器中时此值被自动设置)...
组件所属的Container (默认为undefined，当前组件被添加到一个容器中时此值被自动设置)。 Read-only。

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

Component
refOwner : Ext.Container
如果当前组件是一个容器的孩子，并且是通过一个 ref 配置项被注册的，则此值为 ref 引用被插入到的祖先容器。
如果当前组件是一个容器的孩子，并且是通过一个 ref 配置项被注册的，则此值为 ref 引用被插入到的祖先容器。
Component
rendered : Boolean
如果当前组件已经被渲染了，此值为true。Read-only.
Component
skipLastItemMargin : Boolean 如果为true，defaultMargins将不会被应用到复合表单项集合中的最后一个项目上 (默认为true)。
CompositeField
startValue : mixed
表单项最后一次获得焦点时所拥有的值。 这就是传递给change 事件的值...

表单项最后一次获得焦点时所拥有的值。 这就是传递给change 事件的值，此事件在值被改变并失去焦点时触发。

直到表单项被访问之前此值都是undefined 与originalValue 进行比较。

Field

公共方法

Method Defined By
addClass ( string cls ) : Ext.Component
为组件底层的元素添加CSS样式。
为组件底层的元素添加CSS样式。
参数:
  • cls : string
    需要添加的CSS样式的class名称
返回值:
  • Ext.Component
    this
Component
addEvents( Object|String o, string Optional. ) : void
添加指定的事件到事件列表上，事件会被该Observable触发。
添加指定的事件到事件列表上，事件会被该Observable触发。
参数:
  • o : Object|String
    以事件名作为属性true作为值的对象 或者当多个事件名被分开的传递时则为第一个事件名。
  • Optional. : string
    事件名被分开的传递时则为事件名。 用法:
    this.addEvents('storeloaded', 'storecleared');
返回值:
  • void
Observable
addListener( String eventName, Function handler, [Object scope], [Object options] ) : void
给对象添加事件处理器。
给对象添加事件处理器。
参数:
  • eventName : String
    监听的事件名。
  • handler : Function
    事件调用的方法
  • scope : Object
    （可选）处理方法执行的作用域 (this的引用 reference)。 如果被忽略。默认为触发事件的对象。
  • options : Object
    （可选）包含处理器配置和属性的对象。 可能包含以下的属性:
    • scope : Object
      处理方法执行的作用域(this的引用) 。 如果被忽略。默认为触发事件的对象。
    • delay : Number
      在触发事件后延迟调用处理器的毫秒数。
    • single : Boolean
      如果为True则添加一个处理器来处理下一次的事件触发（仅一次），然后移除自己。
    • buffer : Number
      使得处理器延迟指定毫秒数后预定的运行在 一个Ext.util.DelayedTask中 。 如果事件在时间内再一次被触发，原始的处理器不会被调用，但是新的处理器会预定的在他的位置上。
    • target : Observable
      如果事件在目标的Observable上触发则仅仅调用处理器， 否则 事件会从子类的Observable上冒泡

    组合选项
    使用这些选项参数,可能会组合出不同类型的监听器：

    一个延迟的，一次性的监听器。

    myDataView.on('click', this.onClick, this, {
single: true,
delay: 100
});

    一次调用附加多个处理器
    该方法同样支持传递一个包含指定的多个处理器的属性的配置对象参数。

    myGridPanel.on({
'click' : {
    fn: this.onClick,
    scope: this,
    delay: 100
},
'mouseover' : {
    fn: this.onMouseOver,
    scope: this
},
'mouseout' : {
    fn: this.onMouseOut,
    scope: this
}
});

    或者一个简写的语法：

    myGridPanel.on({
'click' : this.onClick,
'mouseover' : this.onMouseOver,
'mouseout' : this.onMouseOut,
 scope: this
});
返回值:
  • void
Observable
applyToMarkup ( String/HTMLElement el ) : void
将此组件添加到已存在的有效的HTML标签中。 使用该方法时，无需再调用render()方法。
将此组件添加到已存在的有效的HTML标签中。 使用该方法时，无需再调用render()方法。
参数:
  • el : String/HTMLElement
返回值:
  • void
Component
buildCombinedErrorMessage ( Array errors ) : String
获得一个包含了出错信息的对象，包含所有表单项，返回一个组合的出错字符串...
获得一个包含了出错信息的对象，包含所有表单项，返回一个组合的出错字符串 (默认将会仅仅把每个项目放置到新一行)。可以覆盖此参数以提供自定义的出错 信息处理。
参数:
  • errors : Array
    错误数组，格式为:[{field: 'title', error: 'some error'}]
返回值:
  • String
    组合的出错信息
CompositeField
buildLabel ( Array segments ) : String
从一个子表单项label数组构建一个label字符串。 默认情况下，这仅仅把所有label连接在一起，以逗号分隔
从一个子表单项label数组构建一个label字符串。 默认情况下，这仅仅把所有label连接在一起，以逗号分隔
参数:
  • segments : Array
    符合表单项中每个子表单项的label组成的数组
返回值:
  • String
    构建成的label
CompositeField
clearInvalid () : void
清除当前表单项上的所有非法styles/messages(样式/消息)
清除当前表单项上的所有非法styles/messages(样式/消息)
参数:
  • 无。
返回值:
  • void
Field
clearInvalidChildren () : void
在所有子表单项上调用clearInvalid方法。 这是一个工具函数，并且不应该经常被调用...
在所有子表单项上调用clearInvalid方法。 这是一个工具函数，并且不应该经常被调用，因为表单项一般会自己处理清理工作
参数:
  • 无。
返回值:
  • void
CompositeField
cloneConfig ( Object overrides ) : Ext.Component
默认使用原先传递给当前实例的配置值克隆当前组件。
默认使用原先传递给当前实例的配置值克隆当前组件。
参数:
  • overrides : Object
    一个新的配置项，包含需要覆盖到克隆版本的所有属性。 可以传递一个id参数给此对象，否则将自动生成一个新的id以避免发生重复。
返回值:
  • Ext.Component
    当前组件的克隆副本
Component
destroy () : void
通过如下方法销毁对象：删除所有的事件监听器、将组件的元素从DOM树中删除...
通过如下方法销毁对象：删除所有的事件监听器、将组件的元素从DOM树中删除（如果可以）、 将组件从它的 Ext.Container（如果可用）中删除、 并且将它从Ext.ComponentMgr中 注销。 销毁操作一般由框架自动完成，一般情况下不需要直接调用该方法。
参数:
  • 无。
返回值:
  • void
Component
disable () : Ext.Component
将组件置为无效状态，并出发'disable'事件。
将组件置为无效状态，并出发'disable'事件。
参数:
  • 无。
返回值:
  • Ext.Component
    this
Component
enable () : Ext.Component
将组件置为有效状态并触发'enable'事件。
将组件置为有效状态并触发'enable'事件。
参数:
  • 无。
返回值:
  • Ext.Component
    this
Component
enableBubble( String/Array events ) :void
是否现在使得事件会被该Observable触发并调用 this.getBubbleTarget()方法在拥有者的继承树...

是否现在使得事件会被该Observable触发并调用 this.getBubbleTarget()方法在拥有者的继承树中冒泡。Observable的基础类中没有该方法的实现。

该方法一般被Ext.Components用来冒泡事件到拥有者的容器。参看Ext.Component.getBubbleTarget默认的实现 在Ext.Component中返回组件的直接拥有者。但是如果需要的是一个已知的目标，该方法可以被重写来更快的访问需求的目标。

例子:

Ext.override(Ext.form.Field, {
    // 添加方法到Field的initComponent上改变事件为冒泡
    initComponent : Ext.form.Field.prototype.initComponent.createSequence(function() {
        this.enableBubble('change');
    }),

    // 我们知道我们想让Field的事件冒泡到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() {
            // 如果样式被修改标题会变红。
            myForm.header.setStyle('color', 'red');
        }
    }
});
参数:
  • events : String/Array
    冒泡的事件名，或事件名数组
返回值:
  • void
Observable
findParentBy ( Function fn ) : Ext.Container
通过自定义的函数查找当前组件上层任何层次上的容器...
通过自定义的函数查找当前组件上层任何层次上的容器。 如果传递的函数返回true，容器对象将被返回。
参数:
  • fn : Function
    自定义的函数，使用如下参数调用(container,this component)。
返回值:
  • Ext.Container
    自定义函数返回true的第一个容器
Component
findParentByType ( String/Class xtype ) : Ext.Container
通过xtype或者class查找当前组件上层任何层次上的容器
通过xtype或者class查找当前组件上层任何层次上的容器
参数:
  • xtype : String/Class
    组件的xtype字符串，或者直接是组件的class
返回值:
  • Ext.Container
    符合指定xtype或者class的第一个容器
Component
fireEvent( String eventName, Object... args ) : Boolean
用传入的参数触发指定的事件 (减去事件名)。 一个事件可以被设置为冒泡 Obse...

用传入的参数触发指定的事件 (减去事件名)。

一个事件可以被设置为冒泡到Observable父类继承树(参看 Ext.Component.getBubbleTarget) 调用enableBubble实现。

参数:
  • eventName : String
    触发的事件名。
  • args : Object...
    传递给处理器的可变长度参数。
返回值:
  • Boolean
    如果有任何的处理器返回false则返回false，否则返回true。
Observable
focus ( [ Boolean selectText ], [ Boolean/Number delay ] ) : Ext.Component
尝试将当前组件设为焦点。
尝试将当前组件设为焦点。
参数:
  • selectText : Boolean
    (可选) 如果可用，同时选中组件内部的文本
  • delay : Boolean/Number
    (可选)将当前组件设置为焦点的延迟时间(设置为true等于0毫秒)
返回值:
  • Ext.Component
    this
Component
getActiveError () : String
获取当前表单项活动的出错消息。
获取当前表单项活动的出错消息。
参数:
  • 无。
返回值:
  • String
    返回表单项上活动的出错消息，如果没有错误，返回一个空字符串。
Field
getBox ( [ Boolean local ] ) : Object
获取组件底层元素当前盒子模型的尺寸。（译者注：盒子模型是CSS术语，详细解释请自行搜索。）
获取组件底层元素当前盒子模型的尺寸。（译者注：盒子模型是CSS术语，详细解释请自行搜索。）
参数:
  • local : Boolean
    (可选)值为true时，组件的left值和top值将代替页面的XY被返回。(默认值为false)
返回值:
  • Object
    返回值的格式{x, y, width, height}
BoxComponent
getBubbleTarget () : Ext.Container
为Observable的fireEvent方法提供链接，它沿着继承结构进行冒泡操作。
为Observable的fireEvent方法提供链接，它沿着继承结构进行冒泡操作。
参数:
  • 无。
返回值:
  • Ext.Container
    拥有当前组件的容器。
Component
getEl () : Ext.Element
返回 Ext.Element ，它包装了当前组件。...

返回 Ext.Element ，它包装了当前组件。

通常情况下，这将是一个<DIV>元素，它是由该类的onRender方法创建的， 但是可以使用autoEl配置项 覆盖它。

注意: 此元素将会一直处于无效状态直到当前组件渲染完成。

如需向当前组件的 DOM事件(而不是当前组件自己的Observable事件)添加监听器， 更多建议，参见 listeners 配置项，或者直接使用一个render监听器:

new Ext.Panel({
    title: 'The Clickable Panel',
    listeners: {
        render: function(p) {
            // Append the Panel to the click handler's argument list.
            p.getEl().on('click', handlePanelClick.createDelegate(null, [p], true));
        },
        single: true  // Remove the listener after first invocation
    }
});
参数:
  • 无。
返回值:
  • Ext.Element
    包装当前组件的元素。
Component
getErrors () : Array
运行当前表单项的校验器并返回一个所有校验错误信息数组。 此方法在校验期间在内部调用并且一般情况下...
运行当前表单项的校验器并返回一个所有校验错误信息数组。 此方法在校验期间在内部调用并且一般情况下不需要手工调用。 每个子类都应该重写或者增加返回值以提供它们自己的出错消息
参数:
  • 无。
返回值:
  • Array
    当前表单项的所有出错消息
Field
getHeight () : Number
获取该组件的当前高度值。
获取该组件的当前高度值。
参数:
  • 无。
返回值:
  • Number
BoxComponent
getId () : String
返回当前组件的id，如果没有定义id，则自动生成并返回一个id:'ext-comp-'...
返回当前组件的 id 如果没有定义 id 则自动生成并返回一个 id

'ext-comp-' + (++Ext.Component.AUTO_ID)
参数:
  • 无。
返回值:
  • String
    id
Component
getItemId () : String
返回当前组件的 itemId 。 如果没有通过配置参数指定 itemId 那么，将会使用...
返回当前组件的 itemId 。 如果没有通过配置参数指定 itemId 那么，将会使用 getId 返回 id 。
参数:
  • 无。
返回值:
  • String
Component
getName () : String
如果可用，返回表单项的 name 或者 hiddenName 属性。
如果可用，返回表单项的 name 或者 hiddenName 属性。
参数:
  • 无。
返回值:
  • String
    name 表单项的{@link Ext.form.Field#name name}或者{@link Ext.form.ComboBox#hiddenName hiddenName}
Field
getOuterSize () : Object
获取当前组件所在元素的尺寸大小，包括边缘的空白处。
获取当前组件所在元素的尺寸大小，包括边缘的空白处。
参数:
  • 无。
返回值:
  • Object
    一个包含元素大小的对象 {width: (element width + left/right margins), height: (element height + top/bottom margins)}
BoxComponent
getPosition ( [ Boolean local ] ) : Array
获取组件底层元素当前的XY位置。
获取组件底层元素当前的XY位置。
参数:
  • local : Boolean
    (可选)如果为true，将返回元素的left和top值，而不是相对于页面内的 XY。(默认值为 false)
返回值:
  • Array
    元素的XY位置值(例如：[100, 200])
BoxComponent
getRawValue () : Mixed
返回原始数据值，可能不是一个合法的、已定义的值。 返回格式化的值参见...
返回原始数据值，可能不是一个合法的、已定义的值。 返回格式化的值参见 getValue。
参数:
  • 无。
返回值:
  • Mixed
    value 表单项的值
Field
getResizeEl () : Ext.Element
返回该组件的最外层用来定义这些组件整体大小的Element...

返回该组件的最外层用来定义这些组件整体大小的Element对象。

通常用 getEl 方法将会返回相同的Element对象，但在有些情况下，组件可能有一些更多的封装了它的主要动态Element对象的Element对象。

例如ComboBox。它是封装在一个包含<input>元素的包装元素里(这将返回其 getEl方法和触发按钮的元素)。返回的元素为resizeEl。

参数:
  • 无。
返回值:
  • Ext.Element
    The Element which is to be resized by size managing layouts.
BoxComponent
getSize () : Object
获取组件底层元素当前的大小。
获取组件底层元素当前的大小。
参数:
  • 无。
返回值:
  • Object
    一个包含元素大小的对象{width: (element width), height: (element height)}
BoxComponent
getValue () : Mixed
返回格式化的数据值(undefined或者emptyText将会以''返回)。 如需返回原始值，参见...
返回格式化的数据值(undefined或者emptyText将会以''返回)。 如需返回原始值，参见 getRawValue。
参数:
  • 无。
返回值:
  • Mixed
    value 表单项的值
Field
getWidth () : Number
获取该组件的当前宽度值。
获取该组件的当前宽度值。
参数:
  • 无。
返回值:
  • Number
BoxComponent
getXType () : String
获取当前组件的xtype，它是用 Ext.ComponentMgr 注册的。 所有可用的xtype列表，参见...
获取当前组件的xtype，它是用 Ext.ComponentMgr 注册的。 所有可用的xtype列表，参见 Ext.Component 类头部。示例用法:

var t = new Ext.form.TextField();
alert(t.getXType());  // alerts 'textfield'
参数:
  • 无。
返回值:
  • String
    The xtype
Component
getXTypes () : String
返回此组件的xtype继承树，用字符'-'分隔。 所有可用的xtype值...

返回此组件的xtype继承树，用字符'-'分隔。 所有可用的xtype值，请参见Ext.Component 类的头部。

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

示例用法:

var t = new Ext.form.TextField();
alert(t.getXTypes());  // alerts 'component/box/field/textfield'
参数:
  • 无。
返回值:
  • String
    xtype层次字符串
Component
hasListener( String eventName ) : Boolean
检测对象是否包含指定事件的任何监听器
检测对象是否包含指定事件的任何监听器
参数:
  • eventName : String
    检测的事件名
返回值:
  • Boolean
    如果事件被监听则为true，否则为false
Observable
hide () : Ext.Component
隐藏当前组件。 监听 beforehide' 事件并且返回false 可以取消隐藏组件的操作。 在隐藏组件之后触发...
隐藏当前组件。 监听 beforehide' 事件并且返回false 可以取消隐藏组件的操作。 在隐藏组件之后触发 ' hide' 事件。 如果组件被配置成 hidden 那么此方法在内部被调用。
参数:
  • 无。
返回值:
  • Ext.Component
    this
Component
isDirty () : Boolean
检测复合表单项中的每个表单项并且如果任何一个是'脏的'(dirty)时返回true
检测复合表单项中的每个表单项并且如果任何一个是'脏的'(dirty)时返回true
参数:
  • 无。
返回值:
  • Boolean
    如果任何一个是'脏的'(dirty)时为true
CompositeField
isValid ( Boolean preventMark ) : Boolean
通过 校验 表单项 处理后的值 ，返回表单项当前值是否合法。...
通过 校验 表单项 处理后的值 ，返回表单项当前值是否合法。 注意: disabled 的表单项将会被忽略。
参数:
  • preventMark : Boolean
    True将会禁止把表单项标记为非法
返回值:
  • Boolean
    如果值是合法的，为true，其它为false
Field
isVisible () : Boolean
如果当前组件可见，返回true。
如果当前组件可见，返回true。
参数:
  • 无。
返回值:
  • Boolean
    如果当前组件可见，返回true，其它返回false。
Component
isXType ( String xtype , [ Boolean shallow ] ) : Boolean
Tests whether or not this Component is of a specific xtype. This can test whether this Component is descended from th...

测试此组件是否是指定的xtype。此方法既可以测试是否是指定的xtype的某个子类， 或者它是否直接是指定的xtype类(shallow=true)。

如果使用你自己的子类，必须知道组件必须注册它的xtype值。

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

示例用法:

var t = new Ext.form.TextField();
var isText = t.isXType('textfield');        // true
var isBoxSubclass = t.isXType('box');       // true, descended from BoxComponent
var isBoxInstance = t.isXType('box', true); // false, not a direct BoxComponent instance
参数:
  • xtype : String
    需要为当前组件进行检测的xtype
  • shallow : Boolean
    (可选) 如果为false，检测组件是否是xtype继承树中的某个子类（默认是这种情况）， 如果为true，只检测组件是否是指定的xtype类型。
返回值:
  • Boolean
    如果当前组件是指定xtype的子类，返回true，其它返回flase。
Component
markInvalid ( [ String msg ] ) : void
显示一个关联到当前表单项的出错信息， 使用msgTarget 来决定如何显示消息并将...

显示一个关msgTarget 来决定如何显示消息并将 invalidClass 应用到表单项的UI元素上。

注意: 如果表单项的值确实通过了校验， 此方法不会导致表单项的 validate 方法返回 false 。 所以简单地把一个表单项标记为非法并不会阻止表单项 通过设置的 Ext.form.Action.Submit.clientValidation 被提交。

invalid.
参数:
  • msg : String
    (可选)校验信息(默认为invalidText)
返回值:
  • void
Field
mon ( Observable|Element item , Object|String ename , Function fn , Object scope , Object opt ) : void
向任何Observable对象(或者元素)上添加监听器，监听器将会在组件...

向任何Observable对象(或者元素)上添加监听器，监听器将会在组件销毁时被自动删除。
用法：

myGridPanel.mon(myGridPanel.getSelectionModel(), 'selectionchange', handleSelectionChange, null, {buffer: 50});

or:

myGridPanel.mon(myGridPanel.getSelectionModel(), {
    selectionchange: handleSelectionChange,
    buffer: 50
});
参数:
  • item : Observable|Element
    需要添加listener/listeners的项目。
  • ename : Object|String
    事件名，或者一个包含事件名属性的对象。
  • fn : Function
    (可选) 如果 ename 参数是一个事件名，此参数为处理函数。
  • scope : Object
    (可选)如果 ename 参数是一个事件名称，此参数是作用域 ( this 引用)，监听函数将会在此作用域中被执行。
  • opt : Object
    (可选)如果 ename 参数是一个事件名称， 此参数是 addListener 配置项。
返回值:
  • void
Component
mun ( Observable|Element item , Object|String ename , Function fn , Object scope ) : void
删除通过mon 方法添加的监听器。
删除通过mon 方法添加的监听器。
参数:
  • item : Observable|Element
    需要删除listener/listeners的项目。
  • ename : Object|String
    事件名称，或者一个包含事件名称属性的对象。
  • fn : Function
    (可选)如果 ename 参数是一个事件名称，此参数是一个处理函数。
  • scope : Object
    (可选)如果 ename 参数是一个事件名称，此参数是作用域 ( this 引用)，监听函数将会在此作用域中被执行。
返回值:
  • void
Component
nextSibling () : Ext.Component
返回所属容器中的下一个组件
返回所属容器中的下一个组件
参数:
  • 无。
返回值:
  • Ext.Component
Component
on( String eventName, Function handler, [Object scope], [Object options] ) : void
给对象添加事件处理器 (addListener的简写形式)
给对象添加事件处理器 (addListener的简写形式。)
参数:
  • eventName : String
    监听的事件类型
  • handler : Function
    事件调用的方法
  • scope : Object
    （可选）处理方法执行时的作用域 (this 的引用)。 如果被忽略。默认为触发事件的对象。
  • options : Object
    可选 包含处理器配置的对象。
返回值:
  • void
Observable
onFieldClearInvalid ( Ext.form.Field field ) : void
如果combineErrors为true并且一个子表单项的clearInvalid方法被调用...
如果combineErrors为true并且一个子表单项的clearInvalid方法被调用， 此方法被调用。默认情况下，这将仅仅更新内部的fieldErrors集合(MixedCollection)。
参数:
  • field : Ext.form.Field
    被标记为非法的表单项
返回值:
  • void
CompositeField
onFieldMarkInvalid ( Ext.form.Field field , String message ) : void
如果combineErrors为true并且一个子表单项的markInvalid方法被调用， 则此方法被调用。...
如果combineErrors为true并且一个子表单项的markInvalid方法被调用， 则此方法被调用。默认情况下仅仅把子表单项的错误添加Adobed内部的 fieldErrors集合中(MixedCollection)
参数:
  • field : Ext.form.Field
    被标记为非法的表单项
  • message : String
    出错消息
返回值:
  • void
CompositeField
previousSibling () : Ext.Component
返回所属容器中的前一个组件
返回所属容器中的前一个组件
参数:
  • 无。
返回值:
  • Ext.Component
Component
processValue ( Mixed value ) : void
仅仅在需要准备原始值供校验时，才需要覆盖此方法(参见 validate和 isValid)。...
仅仅在需要准备原始值供校验时，才需要覆盖此方法(参见 validate和 isValid)。 此方法被期望为表单项返回处理后的值，此值将会被用来进行校验 (参见validateValue方法)。
参数:
  • value : Mixed
返回值:
  • void
Field
purgeListeners() : void
移除对象上所有的监听器
移除对象上所有的监听器
参数:
  • 无。
返回值:
  • void
Observable
relayEvents( Object o, Array events ) : void
从指定的Observable上传递选择的事件就好像被当前对象触发一样。
从指定的Observable上传递选择的事件就好像被当前对象触发一样。
参数:
  • o : Object
    该Observable上的事件被当前对象传递。
  • events : Array
    传递的数组名。
返回值:
  • void
Observable
removeClass ( string cls ) : Ext.Component
从组件底层的元素上删除一个CSS类。
从组件底层的元素上删除一个CSS类。
参数:
  • cls : string
    需要移除的CSS类名
返回值:
  • Ext.Component
    this
Component
removeListener( String eventName, Function handler, [Object scope] ) : void
删除一个事件处理器。
删除一个事件处理器。
参数:
  • eventName : String
    处理器关联的事件类型。
  • handler : Function
    移除的处理器。 这应该是传递到addListener里的方法的引用。
  • scope : Object
    （可选）处理器指定的初始作用域。
返回值:
  • void
Observable
render ( [ Element/HTMLElement/String container ], [ String/Number position ] ) : void
在传递进来的HTML元素中渲染当前组件。...

在传递进来的HTML元素中渲染当前组件。

如果你正在使用一个Container 对象放置当前组件，那么请不要使用render方法。

当容器第一次被渲染时，它的子组件将会被容器的 layout 管理器渲染。

某些布局管理器允许动态添加子组件。它们包括 Ext.layout.CardLayout, Ext.layout.AnchorLayout, Ext.layout.FormLayout, Ext.layout.TableLayout。

当一个新的子组件被添加时，如果容器已经被渲染了， 你可能需要调用容器的 doLayout 方法来刷新视图，它将导致所有没有被渲染的子组件进行渲染操作。 此操作是必须的，这样你可以添加多个子组件而只刷新一次layout。

当创建复杂的UI时，非常重要的一点是，请记住调整子项目的尺寸和位置是容器的 layout 管理器的职责。 如果你希望子项目的尺寸对用户交互作出反应， 你必须为容器配置一个布局管理器，它将创建和管理你心里想要的那种布局。

忽略容器的layout 配置意味着将会使用一个基本的布局管理器，它除了按次序把子组件 渲染到容器中之外什么事情都不做。 这种情况下，任何尺寸和位置的调整操作都不会发生。

参数:
  • container : Element/HTMLElement/String
    (可选) 需要在其中渲染当前组件的元素。 如果它是从一个已存在的标签中创建的，此参数应该被忽略。
  • position : String/Number
    (可选) 容器中的一个元素ID或者一个DOM节点索引， 当前组件将会被插入到它前面 (默认append到容器的尾部)
返回值:
  • void
Component
reset () : void
将复合表单项中的每个表单项重置为它们以前的值
将复合表单项中的每个表单项重置为它们以前的值
参数:
  • 无。
返回值:
  • void
CompositeField
resumeEvents() : void
重新开始触发事件。(参见suspendEvents) 如果事件以queueSuspended参数被挂起，则在事件被挂起时 ...
重新开始触发事件。(参见 suspendEvents) 如果事件以queueSuspended 参数被挂起，则在事件被挂起时触发的事件会被传递到所有的监听器上
参数:
  • 无。
返回值:
  • void
Observable
setActiveError ( String msg , Boolean suppressEvent ) : void
将当前activeError设置为所给的字符串。 触发'invalid'事件。这不会设置出错图标...
将当前activeError设置为所给的字符串。 触发'invalid'事件。这不会设置出错图标，仅仅设置消息并触发事件。 如需显示出错图标，可使用markInvalid代替，它将在内部调用此方法。
参数:
  • msg : String
    出错消息
  • suppressEvent : Boolean
    True将会禁止触发'invalid'事件
返回值:
  • void
Field
setAutoScroll ( Boolean scroll ) : Ext.BoxComponent
设置该组件内容溢出时是否自动显示滚动条。
设置该组件内容溢出时是否自动显示滚动条。
参数:
  • scroll : Boolean
    值为true的话组件自动显示滚动条。
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setDisabled ( Boolean disabled ) : Ext.Component
工具函数，使用布尔值设置有效/无效(disabled/enabled )。
工具函数，使用布尔值设置有效/无效(disabled/enabled )。
参数:
  • disabled : Boolean
返回值:
  • Ext.Component
    this
Component
setHeight ( Mixed height ) : Ext.BoxComponent
设置此组件的高度。该方法将触发resize事件。
设置此组件的高度。该方法将触发resize事件。
参数:
  • height : Mixed
    The new height to set.
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setPagePosition ( Number x , Number y ) : Ext.BoxComponent
设置组件在页面中的XY位置。 如果需要设置left和top值 ，请使用...
设置组件在页面中的XY位置。 如果需要设置left和top值 ，请使用setPosition方法。 该方法触发move事件。
参数:
  • x : Number
    The new x position
  • y : Number
    The new y position
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setPosition ( Number left , Number top ) : Ext.BoxComponent
设置组件的left和top值。设置组件的页面XY值，请使用setPagePosition方法。该方法触发...
设置组件的left和top值。设置组件的页面XY值，请使用setPagePosition方法。该方法触发move事件。
参数:
  • left : Number
    The new left
  • top : Number
    The new top
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setRawValue ( Mixed value ) : Mixed
绕过校验，直接设置底层DOM表单项的值。 设置值并进行校验，参见 setValue。
绕过校验，直接设置底层DOM表单项的值。 设置值并进行校验，参见 setValue。
参数:
  • value : Mixed
    需要设置的值
返回值:
  • Mixed
    value 被设置的表单项值
Field
setReadOnly ( Boolean readOnly ) : void
设置当前表单项的只读状态。
设置当前表单项的只读状态。
参数:
  • readOnly : Boolean
    表单项是否应该只读。
返回值:
  • void
Field
setSize ( Mixed width , Mixed height ) : Ext.BoxComponent
设置BoxComponent的宽度和高度。 此方法触发resize事件...
设置BoxComponent的宽度和高度。 此方法触发resize事件。此方法可以接收单独的width或者height值作为参数， 或者你可以传递像这样的一个size对象： {width:10, height:20} 。
参数:
  • width : Mixed
    设置的新的width值。这可以是：
    • 一个Number类型指定Element新的宽度 Ext.Element.defaultUnit(默认为像素 :'px')。
    • 一个String类型用于设置width的CSS样式。
    • 一个size对象格式为 {width: widthValue, height: heightValue} 。
    • 值为 undefined 时，保留原来的width不变。
  • height : Mixed
    设置的新的height值(如果第一个参数传递了一个size对象，此参数没有必要传递)。这可以是：
    • 一个Number类型指定Element新的高度 Ext.Element.defaultUnit(默认为像素 :'px')。
    • 一个String类型用于设置height的CSS样式。也有可能不会被使用到。
    • 值为 undefined 时，保留原来的height不变。
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setValue ( Mixed value ) : Ext.form.Field
向表单项中设置一个数据值并校验之。 如需直接设置值而不进行校验，参见 setRawValue。
向表单项中设置一个数据值并校验之。 如需直接设置值而不进行校验，参见 setRawValue。
参数:
  • value : Mixed
    需要设置的值
返回值:
  • Ext.form.Field
    this
Field
setVisible ( Boolean visible ) : Ext.Component
工具方法，通过使用布尔值隐藏或者显示当前组件。
工具方法，通过使用布尔值隐藏或者显示当前组件。
参数:
  • visible : Boolean
    true时显示，false时隐藏
返回值:
  • Ext.Component
    this
Component
setWidth ( Mixed width ) : Ext.BoxComponent
设置组件的宽度。 此方法触发resize事件。
设置组件的宽度。 此方法触发resize事件。
参数:
  • width : Mixed
    The new width to set.
返回值:
  • Ext.BoxComponent
    this
BoxComponent
show () : Ext.Component
显示当前组件。监听' beforeshow' 事件，返回 false 取消显示组件...
显示当前组件。监听' beforeshow' 事件，返回 false 取消显示组件。在显示组件之后触发' show' 事件。
参数:
  • 无。
返回值:
  • Ext.Component
    this
Component
sortErrors () : void
根据表单项定义的顺序，对内部fieldErrors集合(MixedCollection)进行排序。...
根据表单项定义的顺序，对内部fieldErrors集合(MixedCollection)进行排序。 在显示错误之前将会调用此方法，以便保证错误被按照期望的顺序被放置。 如果需要，可以覆盖此函数以提供一个自定义的排列次序。
参数:
  • 无。
返回值:
  • void
CompositeField
suspendEvents( Boolean queueSuspended ) : void
暂停触发所有的事件。 (参看resumeEvents)
暂停触发所有的事件。（参看 resumeEvents)
参数:
  • queueSuspended : Boolean
    如果传递为true则排列好暂停的事件使得在调用 resumeEvents 后再触发它们，而不是抛弃所有暂停的事件。
返回值:
  • void
Observable
syncSize () : Ext.BoxComponent
强制组件的大小按照此组件底层元素当前的高度和宽度计算。
强制组件的大小按照此组件底层元素当前的高度和宽度计算。
参数:
  • 无。
返回值:
  • Ext.BoxComponent
    this
BoxComponent
un( String eventName, Function handler, [Object scope] ) : void
删除一个事件处理器(removeListener方法的简写形式)
删除一个事件处理器(removeListener方法的简写形式。)
参数:
  • eventName : String
    处理器关联的事件类型
  • handler : Function
    被删除的处理器 这应该是传入 addListener 中的方法的引用。
  • scope : Object
    （可选）为处理器指定的初始作用域。
返回值:
  • void
Observable
unsetActiveError ( Boolean suppressEvent ) : void
清除activeError并触发'valid'事件。此方法被clearInvalid在内部进行...
清除activeError并触发'valid'事件。此方法被clearInvalid在内部进行调用， 并且一般情况下没有必要手工调用
参数:
  • suppressEvent : Boolean
    True将禁止触发'invalid'事件
返回值:
  • void
Field
update ( Mixed htmlOrData , [ Boolean loadScripts ], [ Function callback ] ) : void
刷新组件的内部区域。
刷新组件的内部区域。
参数:
  • htmlOrData : Mixed
    如果已经通过tpl为当前组件配置了一个模板，那么 将会使用此参数来装配模板。 如果没有为当前组件配置模板，组件的内容区域将会通过Ext.Element 进行刷新。
  • loadScripts : Boolean
    (可选)只用在使用html配置时此参数才合法。默认为false。
  • callback : Function
    (可选)只用在使用html配置时此参数才合法。 当脚本加载完成时回调函数才被执行。
返回值:
  • void
Component
updateBox ( Object box ) : Ext.BoxComponent
设置此组件底层元素的盒子模型尺寸。(译者注：盒子模型是CSS术语，详细资料请自行搜索。)
设置此组件底层元素的盒子模型尺寸。(译者注：盒子模型是CSS术语，详细资料请自行搜索。)
参数:
  • box : Object
    一个格式为{x, y, width, height}的对象
返回值:
  • Ext.BoxComponent
    this
BoxComponent
validate () : Boolean
校验表单项的值
校验表单项的值
参数:
  • 无。
返回值:
  • Boolean
    如果值合法，为true,否则为false
Field
validateValue () : Boolean
对每个子表单项进行校验，如果它们中任何一个校验失败，返回false。
对每个子表单项进行校验，如果它们中任何一个校验失败，返回false。
参数:
  • 无。
返回值:
  • Boolean
    如果任何子表单项校验失败，为false
CompositeField

公共事件

Event Defined By
added : ( Ext.Component this , Ext.Container ownerCt , number index )
当一个组件被添加到一个Ext.Container时触发
当一个组件被添加到一个Ext.Container时触发
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • ownerCt : Ext.Container
    用于组件的容器
  • index : number
    添加组件的位置
Component
afterrender : ( Ext.Component this )
在组件渲染完成之后触发...

在组件渲染完成之后触发。

afterrender事件在当前组件被rendered 结束之后、在为组件定义的所有afterRender方法执行之后 触发，并且，如果有stateful， 也在状态被保存之后才触发。

监听器将会以如下参数格式被调用:
  • this : Ext.Component
Component
beforedestroy : ( Ext.Component this )
在组件 destroyed 之前触发。 在事件监听器中返回false以停止 destroy 操作。
在组件 destroyed 之前触发。 在事件监听器中返回false以停止 destroy 操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforehide : ( Ext.Component this )
在调用hide方法隐藏组件之前触发。 在事件监听器中返回false可以停止隐藏操作。
在调用hide方法隐藏组件之前触发。 在事件监听器中返回false可以停止隐藏操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforerender : ( Ext.Component this )
在组件被rendered 之前触发。 在事件监听器中返回false可以停止render 操作。
在组件被rendered 之前触发。 在事件监听器中返回false可以停止render 操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforeshow : ( Ext.Component this )
在调用show()方法现实组件之前触发。 事件处理函数返回false可以停止show。
在调用show 方法现实组件之前触发。 事件处理函数返回false可以停止show。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforestaterestore : ( Ext.Component this , Object state )
在组件状态恢复之前触发。返回false停止恢复状态操作。
在组件状态恢复之前触发。返回false停止恢复状态操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    StateProvider返回的状态哈希值。 如果没有禁止此事件，那么状态对象会被传递给applyState。 默认情况下，这样简单地把属性值拷贝到当前组件中。 可以覆盖此方法以提供自定的状态恢复操作。
Component
beforestatesave : ( Ext.Component this , Object state )
在组件状态被保存到配置的状态提供者之前触发。 返回false可以停止保存。
在组件状态被保存到配置的状态提供者之前触发。 返回false可以停止保存。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    状态值哈希。 这由在组件上调用getState() 方法决定。 此方法必须由开发者提供，返回是否需要对状态进行描述，默认情况下， Ext.Component有一个空实现。
Component
blur : ( Ext.form.Field this )
当表单项时区输入焦点时触发。
当表单项时区输入焦点时触发。
监听器将会以如下参数被调用:
  • this : Ext.form.Field
Field
change : ( Ext.form.Field this , Mixed newValue , Mixed oldValue )
如果表单项的时发生改变，在表单项刚刚失去焦点时触发。
如果表单项的时发生改变，在表单项刚刚失去焦点时触发。
监听器将会以如下参数格式调用:
  • this : Ext.form.Field
  • newValue : Mixed
    新的值
  • oldValue : Mixed
    原始值
Field
destroy : ( Ext.Component this )
在组件被销毁之后触发。
在组件被destroyed之后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
disable : ( Ext.Component this )
在组件被设置为无效状态后触发。
在组件被设置为无效状态后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
enable : ( Ext.Component this )
当组件被设置为有效(enabled)之后触发。
当组件被设置为有效(enabled)之后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
focus : ( Ext.form.Field this )
当表单项获得输入焦点时触发。
当表单项获得输入焦点时触发。
监听器将会以如下参数格式被调用:
  • this : Ext.form.Field
Field
hide : ( Ext.Component this )
在组件被隐藏之后触发。 当调用hide 方法隐藏组件之后触发。
在组件被隐藏之后触发。 当调用hide 方法隐藏组件之后触发。
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
invalid : ( Ext.form.Field this , String msg )
在表单项被标记为非法之后触发。
在表单项被标记为非法之后触发。
监听器将会以如下参数格式调用:
  • this : Ext.form.Field
  • msg : String
    校验信息
Field
move : ( Ext.Component this , Number x , Number y )
在组件移动之后触发。
在组件移动之后触发。
监听器将会用如下的参数格式来调用:
  • this : Ext.Component
  • x : Number
    The new x position
  • y : Number
    The new y position
BoxComponent
removed : ( Ext.Component this , Ext.Container ownerCt )
当一个组件被从Ext.Container容器中删除时触发
当一个组件被从Ext.Container容器中删除时触发
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • ownerCt : Ext.Container
    持有组件的容器
Component
render : ( Ext.Component this )
在组件被渲染之后触发。
在组件被 rendered(渲染) 之后触发。
监听器将以如下的参数格式被调用:
  • this : Ext.Component
Component
resize : ( Ext.Component this , Number adjWidth , Number adjHeight , Number rawWidth , Number rawHeight )
在组件被调整大小之后触发。
在组件被调整大小之后触发。
监听器将以如下的参数格式被调用:
  • this : Ext.Component
  • adjWidth : Number
    这是width调整后的值
  • adjHeight : Number
    这是height调整后的值
  • rawWidth : Number
    这是width原来的值
  • rawHeight : Number
    这是height原来的值
BoxComponent
show : ( Ext.Component this )
在调用show 方法显示组件之后触发。
在调用show 方法显示组件之后触发。
监听器将会用如下的参数格式被调用:
  • this : Ext.Component
Component
specialkey : ( Ext.form.Field this , Ext.EventObject e )
当任何和导航有关的键被按下时触发(上下左右箭头, tab, 回车,esc, 等等) is pressed. 处理其它按键参见...
当任何和导航有关的键被按下时触发(上下左右箭头, tab, 回车,esc, 等等) is pressed. 处理其它按键参见 Ext.Panel.keys或者 Ext.KeyMap。 你可以检测 Ext.EventObject.getKey 以便获知哪个键被按下。例如：
var form = new Ext.form.FormPanel({
    ...
    items: [{
            fieldLabel: 'Field 1',
            name: 'field1',
            allowBlank: false
        },{
            fieldLabel: 'Field 2',
            name: 'field2',
            listeners: {
                specialkey: function(field, e){
                    // e.HOME, e.END, e.PAGE_UP, e.PAGE_DOWN,
                    // e.TAB, e.ESC, arrow keys: e.LEFT, e.RIGHT, e.UP, e.DOWN
                    if (e.getKey() == e.ENTER) {
                        var form = field.ownerCt.getForm();
                        form.submit();
                    }
                }
            }
        }
    ],
    ...
});
监听器将会以如下参数格式被调用:
  • this : Ext.form.Field
  • e : Ext.EventObject
    事件对象
Field
staterestore : ( Ext.Component this , Object state )
组件状态被存储之后触发。
组件状态被存储之后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    StateProvider返回的状态哈希值。 如果没有禁止此事件，那么状态对象会被传递给applyState。 默认情况下，这样简单地把属性值拷贝到当前组件中。 可以覆盖此方法以提供自定的状态恢复操作。
Component
statesave : ( Ext.Component this , Object state )
在组件状态被保存到所配置的状态提供者之后触发。
在组件状态被保存到所配置的状态提供者之后触发。
监听器将会用如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    状态值hash。 这是由在足见上调用getState() 方法决定的。 开发者必须提供此方法以返回是否需要恢复状态，默认情况下， Ext.Component有一个空实现。
Component
valid : ( Ext.form.Field this )
在表单项被校验无错误之后触发。
在表单项被校验无错误之后触发。
监听器将会以如下参数格式被调用:
  • this : Ext.form.Field
Field


Observable
    Component
      BoxComponent
        Field
          TextField
            TriggerField
              DateField

Class Ext.form.DateField

包: | Ext.form
定义类的文件: | DateField.js
类: | DateField
继承自: | TriggerField
提供一个日期输入项，它拥有一个 Ext.DatePicker 下拉框，同时有自动日期校验功能。

配置项

Config Options Defined By
allowBlank : Boolean
指定为false将会只允许值的长度>0(默认为true)
TextField
allowDomMove : Boolean
在渲染时组件是否可以移动Dom节点(默认为true)。
Component
altFormats : String
当解析用户输入值，而此值不符合定义的格式时所要尝试的多个日期格式， 以 "|"分隔(默认为...
当解析用户输入值，而此值不符合定义的格式时所要尝试的多个日期格式， 以 "|"分隔(默认为 'm/d/Y|n/j/Y|n/j/y|m/j/y|n/d/y|m/j/Y|n/d/Y|m-d-y|m-d-Y|m/d|m-d|md|mdy|mdY|d|Y-m-d')。
DateField
anchor : String
注: 这个配置只用于该组件被包含在一个已使用AnchorLayout...

注: 这个配置只用于该组件被包含在一个已使用 AnchorLayout (或者其子类)配置的Container时。 基于布局管理器，例如：

  • Ext.form.FormPanel
  • 指定 layout: 'anchor' // or 'form', or 'absolute'

参见 Ext.layout.AnchorLayout. anchor 。

BoxComponent
applyTo : Mixed
指定一个元素的id、一个DOM元素或者一个已经存在并被渲染到DIV中的元素，此DIV已经被...

指定一个元素的id、一个DOM元素或者一个已经存在并被渲染到DIV中的元素，此DIV已经被 渲染到document中，并且为当前组件指定了一些结构化的标签。

  • 描述 :
      当使用了 applyTo， 在主元素中也可以用id或者CSS类名来指定组件的托管部分， 并且，如果可以的话，创建的组件可能也会试图在那个标签中创建它的子组件。
  • 注意 :
      当使用此配置项时，无需调用render()方法。
      如果指定了applyTo属性，任何传递给 renderTo 的值都会被忽略，并且目标元素的父节点将会自动被用作组件的容器。
Component
autoCreate : String/Object
一个DomHelper 元素描述对象，或者一个默认的元素描述对象...
一个DomHelper 元素描述对象，或者一个默认的元素描述对象
                                autoCreate: {tag: "input", type: "text", size: "10", autocomplete: "off"}
，此时该选项为true。
DateField
autoEl : Mixed
一个表签名或者一个 DomHelper 描述，用来创建 Element ，它将封装当前组件...

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

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

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

{
    xtype: 'box',
    autoEl: {
        tag: 'img',
        src: 'http://www.example.com/example.jpg'

    }
}, {
    xtype: 'box',
    autoEl: {
        tag: 'blockquote',
        html: 'autoEl is cool!'
    }
}, {
    xtype: 'container',
    autoEl: 'ul',
    cls: 'ux-unordered-list',
    items: {
        xtype: 'box',
        autoEl: 'li',
        html: 'First list item'
    }
}
Component
autoHeight : Boolean
如果值为true，height配置项为'auto'，否则值为false的话使用固定的高度...

如果值为true，height配置项为'auto'，否则值为false的话使用固定的高度， 或者可以由其父类容器 layout manager来控制。(默认值为 false)。

注: 虽然很多组件继承了这个配置选项，但不是所有这些组件的自适应高度配置都会像期望的那样起作用。 设置autoHeight：值为true时，浏览器将根据元素的内容自动设置高度，这将意味着Ext不会去管理高度。

如果是由浏览器来管理高度，需要注意的是，通过浏览器进行调整的结构组件内不能被发现， 因此宽度的变化可能导致需要进行同步处理元素的高度。 例如：

var w = new Ext.Window({
    title: 'Window',
    width: 600,
    autoHeight: true,
    items: {
        title: 'Collapse Me',
        height: 400,
        collapsible: true,
        border: false,
        listeners: {
            beforecollapse: function() {
                w.el.shadow.hide();
            },
            beforeexpand: function() {
                w.el.shadow.hide();
            },
            collapse: function() {
                w.syncShadow();
            },
            expand: function() {
                w.syncShadow();
            }
        }
    }
}).show();
BoxComponent
autoScroll : Boolean
如果值为true，将会在该元素上使用overflow:'auto'配置，并且在必要的时候...
如果值为true，将会在该元素上使用overflow:'auto'配置，并且在必要的时候自动显示滚动条，否则，溢出部分的组件都会被切除(默认值为 false)。
BoxComponent
autoShow : Boolean
如果组件需要检测隐藏CSS属性(如 'x-hidden' 或者 'x-hide-display')并且在渲染时删除...
如果组件需要检测隐藏CSS属性(如 'x-hidden' 或者 'x-hide-display')并且在渲染时删除它们 (默认为false)，设置此值为true。
Component
autoWidth : Boolean
如果为true，使用width:'auto'配置，否则使用固定的宽度...

如果为true，使用width:'auto'配置，否则使用固定的宽度，或者可以由其父类容器的layout manager来控制。(默认值为 false)。

注: 虽然很多组件继承了这个配置选项，但不是所有这些组件的自适应宽度配置都会像期望的那样起作用。 设置autoWidth：值为true时，浏览器将根据元素的内容自动设置宽度，这将意味着Ext不会去管理宽度。

如果是由浏览器来管理宽度，需要注意的是，通过浏览器进行调整的结构组件内不能被发现，因此宽度的变化可能导致需要进行同步处理元素的宽度。 例如，在这个元素的目标是：

<div id='grid-container' style='margin-left:25%;width:50%'></div>
当浏览器窗口改变时，渲染后的Panel必须监听浏览器窗口大小的变化，以便通知子项，浏览器改变了其宽度：

var myPanel = new Ext.Panel({
    renderTo: 'grid-container',
    monitorResize: true, // relay on browser resize
    title: 'Panel',
    height: 400,
    autoWidth: true,
    layout: 'hbox',
    layoutConfig: {
        align: 'stretch'
    },
    defaults: {
        flex: 1
    },
    items: [{
        title: 'Box 1',
    }, {
        title: 'Box 2'
    }, {
        title: 'Box 3'
    }],
});
BoxComponent
blankText : String
如果 allowBlank 校验失败时需要显示的出错信息(默认为'This field is required')
TextField
boxMaxHeight : Number
设置组件的最大高度值...

设置组件的最大高度值。

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

BoxComponent
boxMaxWidth : Number
设置组件的最大宽度值...

设置组件的最大宽度值。

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

BoxComponent
boxMinHeight : Number
设置组件的最小高度值...

设置组件的最小高度值。

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

BoxComponent
boxMinWidth : Number
设置组件的最小宽度值...

设置组件的最小宽度值。

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

BoxComponent
bubbleEvents : Array
一个事件数组，当这些事件被触发时，将会被冒泡到所有父容器中。参见....

一个事件数组，当这些事件被触发时，将会被冒泡到所有父容器中。参见 Ext.util.Observable.enableBubble。 默认为 []。

Component
clearCls : String
应用到特殊的clearing div的CSS类， 这个clearing div直接渲染到每个form field的包装器后面...

应用到特殊的clearing div的CSS类， 这个clearing div直接渲染到每个form field的包装器后面，以提供 清除field的功能(默认为 'x-form-clear-left')。

注意: 只有在当前组件被渲染到一个使用FormLayout 布局(例如 Ext.form.FormPanel 或者指定 layout:'form')的 容器中、或者是指定了一个fieldLabel 、或者指定isFormField=true 时此配置才有效。

另请参见 Ext.layout.FormLayout. fieldTpl。

Component
cls : String
一个可选的额外CSS类，它将被添加到当前组件的元素上(默认为'')...
一个可选的额外CSS类，它将被添加到当前组件的元素上(默认为'')。 此属性对于在组件上，或者它的任何使用标准CSS规则的孩子节点上， 添加定制的样式非常有用。
Field
contentEl : String
(可选)指定一个已存在的HTML元素，或者一个已存在HTML元素的...

(可选)指定一个已存在的HTML元素，或者一个已存在HTML元素的 id ，它们将被用作当前组件的内容。

  • 描述 :
    此配置选项被用来将一个已存在的HTML元素 插入到一个新组件(在组件渲染之后它简单地移动DOM元素) 的layout元素中，使它成为该组件的内容。
  • 注意 :
    指定的HTML元素将被append到组件的layout元素中， 在所有配置的 HTML 被插入之后， 并且，这样的话，在render事件 被触发时，document中将不再包含此元素。
    指定的HTML元素将不会参与组件所有可能使用的 layout 过程(译者注：指这些HTML元素 不会参与布局操作)。 它仅是HTML而已。布局操作实在孩子 items 上进行的。
    添加 x-hidden 或者 x-hide-display CSS类，以防在内容渲染到panel时发生闪烁。
Component
ctCls : String
一个可选的外部CSS样式，添加到这个组件的容器(默认值为 '')。 这个方法对于使用标准的CSS规则...

一个可选的外部CSS样式，添加到这个组件的容器(默认值为 '')。 这个方法对于使用标准的CSS规则，为组件或它的任何一个子组件添加特定的样式非常有用。 参见 Ext.layout.ContainerLayout和 extraCls 。

注意: ctCls 默认为 ''期望如下的类，它们将指定一个默认值:

  • Box Layout : 'x-box-layout-ct'
使用一个额外的CSS类配置以上的Class，它是append到默认对象上的。例如， 对于BoxLayout (Hbox and Vbox):
                                ctCls: 'x-box-layout-ct custom-class'

Component
data : Mixed
初始化数据集，它将被应用到 tpl 上以刷新组件的内容区域。
Component
disableKeyFilter : Boolean
指定为true将会禁用按键过滤(默认为false)
TextField
disabled : Boolean
当前组件处于无效状态时为true。 Read-only.
Field
disabledClass : String
当组件处于无效状态时添加到组件上的CSS类(默认为 'x-item-disabled')。
Component
disabledDates : Array
需要禁用的日期数组，字符串。 这些字符串将被用来构建一个动态的正则表达式，所以它们非常强大...
需要禁用的日期数组，字符串。 这些字符串将被用来构建一个动态的正则表达式，所以它们非常强大。 一些例子:
// disable these exact dates:
disabledDates: ["03/08/2003", "09/16/2003"]
// disable these days for every year:
disabledDates: ["03/08", "09/16"]
// only match the beginning (useful if you are using short years):
disabledDates: ["^03/08"]
// disable every day in March 2006:
disabledDates: ["03/../2006"]
// disable every day in every March:
disabledDates: ["^03"]
注意，包含在数组中的日期的格式必须与format 配置项严格匹配。 为了支持正则表达式，如果你使用的 date format 中含有"."符号，你必须在限定日期时对点号进行转义。 例如: ["03\\.08\\.03"].
DateField
disabledDatesText : String
当日期落在一个禁用的日期上时显示的tooltip文本(默认为'Disabled')。
DateField
disabledDays : Array
一个需要禁用的天的数组，从0开始(默认为null)。 一些例子:...
一个需要禁用的天的数组，从0开始(默认为null)。 一些例子:
// disable Sunday and Saturday:
disabledDays:  [0, 6]
// disable weekdays:
disabledDays: [1,2,3,4,5]
DateField
disabledDaysText : String
当日期落在一个禁用的日期上时显示的tooltip (默认为'Disabled')
DateField
editable : Boolean
false将阻止用户直接向表单项中输入文本，表单项将仅仅响应...
false将阻止用户直接向表单项中输入文本，表单项将仅仅响应 在触发按钮上进行鼠标点击然后设置值。(默认为true)。
TriggerField
emptyClass : String
应用到空表单项的CSS类，以便样式化 emptyText (默认为'x-form-empty-field')。...
应用到空表单项的CSS类，以便样式化 emptyText (默认为'x-form-empty-field')。 根据表单项当前值，此样式按需要被自动添加和删除。
TextField
emptyText : String
放置到空表单项中的默认文本(默认为null)。 注意:...
放置到空表单项中的默认文本(默认为null)。 注意: 如果当前表单栏处于有效状态并且被配置了一个名称，那么此值会被 提交到服务器。
TextField
enableKeyEvents : Boolean
true将为HTML输入栏启用按键事件代理 (默认为false)。
TextField
fieldClass : String
表单项的默认CSS类(默认为'x-form-field')
Field
fieldLabel : String
紧靠此field显示的标签文本(默认值为 '')。注意...

紧靠此field显示的标签文本(默认值为 '')。

注意:只有在当前组件被渲染到一个使用FormLayout 的容器中时，此配置才有效。 (例如 Ext.form.FormPanel 或 指定 layout:'form')。

另请参见 hideLabel 、 Ext.layout.FormLayout和 fieldTpl。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Name'
    }]
});
Component
flex : Number
注: 这个配置只用于该组件被包含在一个已使用BoxLayout配置的Container中时...

注: 这个配置只用于该组件被包含在一个已使用BoxLayout配置的Container中时。通过计算每一个子组件的flex值所占全部flex值之和的比例，来决定子组件的宽(HBoxLayout)高(VBoxlayout)。 任何子项的 flex = 0 或 flex = undefined 将不被设置(初始值大小将不被改变)。

BoxComponent
focusClass : String
当表单项获得焦点时使用的CSS类(默认为 'x-form-focus')
Field
format : String
默认的日期格式字符串，可以覆盖它以提供本地化支持。 根据...
默认的日期格式字符串，可以覆盖它以提供本地化支持。 根据Date.parseDate，格式必须有效 (默认为'm/d/Y')。
DateField
height : Number
组件的高度(默认值为 auto)。注:如果想使用百分比的方式...
组件的高度(默认值为 auto)。注:如果想使用百分比的方式来设置值，请查看 Ext.Component.anchor。
BoxComponent
hidden : Boolean
如果当前组件处于隐藏状态，此值为true。Read-only。
Component
hideLabel : Boolean
true时完全隐藏label元素 ( label 和 separator)。 默认为 false。 默认情况下，即使你不指定...

true时完全隐藏label元素 ( label 和 separator)。 默认为 false。 默认情况下，即使你不指定 fieldLabel 它的空间仍然会被保留，这样这块区域会与其它确实拥有label的区域位于同一排。 讲此值设置为 true 将导致此区域不再保留此空间。

注意: 参见 clearCls 的注释。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield'
        hideLabel: true
    }]
});
Component
hideMode : String
组件如何隐藏，支持的值有： 'visibility' (css visibility), 'offsets' (位置偏移量为负值) 和...

组件如何隐藏，支持的值有： 'visibility' (css visibility), 'offsets' (位置偏移量为负值) 和 'display' (css display).

注意:一般首选默认值 'display'，因为当组件第一次显示的时候它们会自动进行布局 (隐藏的时候不会调整尺寸)。

Component
hideParent : Boolean
此值为true时，当调用hide/show方法时，将会hide和show组件的容器...
此值为true时，当调用hide/show方法时，将会hide和show组件的容器；false时将会 hide和show组件自身(默认为false)。例如，这可以用作window上隐藏按钮的一种 快捷操作，通过设置此按钮的hideParent:true，然后把它添加到window上。
Component
superceed hideTrigger : Boolean
true 将会隐藏触发元素并且仅仅显示基本文本项(默认为false)
TriggerField
html : String/Object
一个HTML片段，或者一个 DomHelper 描述，用作layout元素的内容(默认为'')。...
一个HTML片段，或者一个 DomHelper 描述，用作layout元素的内容(默认为'')。 这个HTML内容在组件渲染之后才被添加，所以在 render 出发的时候，document中尚未包含此HTML。 但是这个内容将会在所有配置的 contentEl 之前被插入到body标签中。
Component
id : String
当前组件唯一的id(默认为auto-assigned id)...

当前组件唯一的id(默认为auto-assigned id)。 如果你需要在以后访问组件，而又没有一个有效的组件对象引用，那么你需要指定一个 id( 也就是，使用Ext. getCmp方法 )。

注意，此id也将被用作组件底层HTML标签的id，这些标签被渲染到页面中。 这将允许你编写基于id的CSS规则，以独立地描述指定的实例；并且，也可以通过 组件父标签的id选中子元素。

注意:为了避免与唯一的id 产生重复， 请参见 itemId 和 ref 。

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

Component
inputType : String
输入栏的类型属性---例如radio,text,password,file(默认为'text')。...
输入栏的类型属性---例如radio,text,password,file(默认为'text')。 'file'和'password'类型通常必须用来渲染那些没有独立Ext组件的表单项类型。 注意，如果你使用inputType:'file'， 那么将不再支持 emptyText 并且应该避免使用。
Field
invalidClass : String
当把表单项标记为非法时所使用的CSS类(默认为'x-form-invalid')
Field
invalidText : String
当表单项中的日期不合法时显示的错误文本 (默认为...
当表单项中的日期不合法时显示的错误文本 (默认为'{value} is not a valid date - it must be in the format {format}')。
DateField
itemCls : String
注意: 只有在当前组件被渲染到一个使用FormLayout 布局的 容器中时此配置才有效...

注意: 只有在当前组件被渲染到一个使用FormLayout 布局的 容器中时此配置才有效。 (例如Ext.form.FormPanel 或者指定 layout:'form')。

一个附加的CSS类，应用到div上，包装当前field的表单元素。 如果提供了此参数， field级上的itemCls将会覆盖 container级上提供的 默认itemCls。 为itemCls指定的值将会被添加默认的 类('x-form-item')。

既然它被应用到项目的包装器上(参见 Ext.layout.FormLayout。 fieldTpl)， 它将允许你编写能应用到此field、label(如果有指定)、或者field内部任何其它元素的标准CSS规则。

注意: 参考 fieldLabel的注释。 .

示例用法:

// Apply a style to the field's label:
<style>
    .required .x-form-item-label {font-weight:bold;color:red;}
</style>

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Name',
        itemCls: 'required' //this label will be styled
    },{
        xtype: 'textfield',
        fieldLabel: 'Favorite Color'
    }]
});
Component
itemId : String
当没有可利用的对象引用时，itemId可以作为第二选择，用来获得一个组件的引用， 代替 ...

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

var c = new Ext.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'); // 与 Ext.getCmp()不同

p2 = p1.ownerCt.getComponent('p2'); // 通过兄弟对象获得引用

另请参见 id 和 ref 。

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

Component
labelSeparator : String
每个fieldLabel 文本后面现实的分隔符。 此属性可以在多个层次上进行配置...

每个fieldLabel 文本后面现实的分隔符。 此属性可以在多个层次上进行配置。优先顺序为：

  • field / component level
  • container level
  • layout level (默认为冒号 ':')
如不需要为当前field的label显示分隔符，指定一个空字符串''即可。

注意:参见 clearCls 的注释。

另请参见 hideLabel 和 Ext.layout.FormLayout。 fieldTpl。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    layoutConfig: {
        labelSeparator: '~'   // layout config has lowest priority (defaults to ':')
    },
    labelSeparator: '>>',     // config at container level
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Field 1',
        labelSeparator: '...' // field/component level config supersedes others
    },{
        xtype: 'textfield',
        fieldLabel: 'Field 2' // labelSeparator will be '='

    }]
});
Component
labelStyle : String
一个CSS样式描述字符串，它将直接应用到当前field的label上...

一个CSS样式描述字符串，它将直接应用到当前field的label上。 如果有设置，默认为容器的labelStyle值(例如 Ext.layout.FormLayout.labelStyle , 或者 '')。

注意:参见 clearCls 的注释。

另请参见 hideLabel 和 Ext.layout.FormLayout. fieldTpl。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Name',
        labelStyle: 'font-weight:bold;'
    }]
});
Component
listeners : Object
一个包含一个或多个事件处理器的配置对象，会在初始化的时候被添加到目标对象上...

一个包含一个或多个事件处理器的配置对象，会在初始化的时候被添加到目标对象上。 该配置对象应该是一个有效的监听器配置对象就像 addListener例子中指定的一样可一次附加多个处理器。

ExtJs Components上的DOM事件

一些 ExtJs Component 类导出时会选择一些DOM事件(例如 "click", "mouseover" 等等), 这通常只是在有额外的值可以被添加时发生。例如DataView类的 click事件会传递被点击的节点。也可以直接在Component的HTMLElementevent上访问DOM事件，但必需在Component被渲染后监听器才能添加到Element 上。可以按照以下步骤添加插件:

// 插件会用一个监听器配置对象进行配置。
//该组件会被添加到所有处理方法的参数列表上。
Ext.DomObserver = Ext.extend(Object, {
    constructor: function(config) {
        this.listeners = config.listeners ? config.listeners : config;
    },

    // 组件将自己传递进了插件的初始化方法里
    init: function(c) {
        var p, l = this.listeners;
        for (p in l) {
            if (Ext.isFunction(l[p])) {
                l[p] = this.createHandler(l[p], c);
            } else {
                l[p].fn = this.createHandler(l[p].fn, c);
            }
        }

        // 渲染后立即添加监听器到元素上
        c.render = c.render.createSequence(function() {
            var e = c.getEl();
            if (e) {
                e.on(l);
            }
        });
    },

    createHandler: function(fn, c) {
        return function(e) {
            fn.call(this, e, c);
        };
    }
});

var combo = new Ext.form.ComboBox({

    // 元素被点击后折叠
    plugins: [ new Ext.DomObserver({
        click: function(evt, comp) {
            comp.collapse();
        }
    })],
    store: myStore,
    typeAhead: true,
    mode: 'local',
    triggerAction: 'all'
});

Observable
margins : Object
注:此配置只用于该组件展现在一个使用BorderLayout...

注:此配置只用于该组件展现在一个使用BorderLayout 或 BoxLayout的两个子类之一作为布局的容器。

这个margins对象在该组件中的格式为：

{top: (top margin),right: (right margin),bottom: (bottom margin),left: (left margin)}

也可以是一个字符串，中间用空格分隔，margin值为数字。 把matches中每一个值的次序跟CSS中margin值的排列方式相对应：

  • 如果只有一个值，它适用于所有方面。
  • 如果有两个值，top和bottom的边框设置为第一个值，left和right设置为第二个值。
  • 如果有三个值，top设置为第一个值，left和right设置为第二个值，bottom设置为第三个值。
  • 如果有四个值，分别设置为top, right, bottom, left。

默认值:

{top:0, right:0, bottom:0, left:0}
BoxComponent
maskRe : RegExp
一个输入掩码正则表达式，用来过滤不匹配的按键(默认为null)
TextField
maxLength : Number
校验时表单项允许的最大输入长度(默认为Number.MAX_VALUE)。 通过改善可用性允许粘贴、编辑、重做和回退...
校验时表单项允许的最大输入长度(默认为Number.MAX_VALUE)。 通过改善可用性允许粘贴、编辑、重做和回退， 此行为被设计用来为用户提供即时的反馈。 如需限定表单项中可以输入字符的最大长度， 可以使用autoCreate 向一个表单项添加任何你想要的属性，例如:
var myField = new Ext.form.NumberField({
    id: 'mobile',
    anchor:'90%',
    fieldLabel: 'Mobile',
    maxLength: 16, // for validation
    autoCreate: {tag: 'input', type: 'text', size: '20', autocomplete: 'off', maxlength: '10'}
});
TextField
maxLengthText : String
如果maximum length 校验失败时显示的出错文本...
如果maximum length 校验失败时显示的出错文本 (默认为 'The maximum length for this field is {maxLength}')
TextField
maxText : String
当单元格中的日期比maxValue 大时显示的出错文本...
当单元格中的日期比maxValue 大时显示的出错文本 (默认为 'The date in this field must be before {maxValue}')。
DateField
maxValue : Date/String
允许选择的最大值。可以是一个Javascript日期对象，或者一个 格式有效的日期字符串...
允许选择的最大值。可以是一个Javascript日期对象，或者一个 格式有效的日期字符串(默认为null)。
DateField
minLength : Number
输入栏必须的最小长度(默认为0)
TextField
minLengthText : String
如果 最小长度 校验失败时显示的出错文本 (默认为...
如果 最小长度 校验失败时显示的出错文本 (默认为 'The minimum length for this field is {minLength}') 。
TextField
minText : String
当单元格中的日期小于 minValue 时显示的出错文本...
当单元格中的日期小于 minValue 时显示的出错文本 (默认为 'The date in this field must be after {minValue}')
DateField
minValue : Date/String
允许的最小日期。可以是一个Javascript日期对象，或者一个 格式有效的日期字符串(默认为null)。
允许的最小日期。可以是一个Javascript日期对象，或者一个 格式有效的日期字符串(默认为null)。
DateField
msgFx : String
实验性参数 当在表单项下显示校验消息时使用的效果(默认为'normal')。
Field
msgTarget : String
通过markInvalid 设置的消息文本应该显示的位置。 必须是如下值之一：...

通过markInvalid 设置的消息文本应该显示的位置。 必须是如下值之一：

  • qtip 当用户鼠标滑过表单项时，显示一个包含消息的快速提示。 这是默认情况。
    为了使此参数能工作，必须调用 Ext.QuickTips.init。
  • title 在弹出的默认浏览器标题属性上显示消息。
  • under 在表单项之下添加一块div，包含出错消息。
  • side 在表单项右边添加一个出错图标，当鼠标滑过时弹出并显示一个消息。
  • [element id] 在指定元素的innerHTML中直接添加出错消息。
Field
name : String
表单项的HTML name属性(默认为'')。 注意: 如果需要当前表单项自动被包含在...
表单项的HTML name属性(默认为'')。 注意: 如果需要当前表单项自动被包含在 form submit()中，必须设置此参数。
Field
overCls : String
一个可选的额外的CSS类，它将在鼠标移过元素时被添加到组件上...
一个可选的额外的CSS类，它将在鼠标移过元素时被添加到组件上，鼠标移出时 删除。(默认为'')。此属性对于在组件上，或者它的任何使用标准CSS规则的孩子节点上， 添加定制的'active' 或者 'hover'样式非常有用。
Component
pageX : Number
如果该组件被包含在一个指定位置的容器中，这个值表示页面级的x坐标值（译者注：在有滚动条的情况下这个值很有用）。
BoxComponent
pageY : Number
如果该组件被包含在一个指定位置的容器中，这个值表示页面级的y坐标值（译者注：在有滚动条的情况下这个值很有用）。
BoxComponent
plugins : Object/Array
一个对象或者一个对象数组，为组件提供特殊的功能 ...
一个对象或者一个对象数组，为组件提供特殊的功能。 对一个合法的插件唯一的要求是它含有一个init()方法， 能接收一个Ext.Component型的参数。 当组件被创建时，如果有可用的插件，组件将会调用每个插件的init方法， 并将自身的引用作为方法参数传递给它。然后，每个插件就可以调用方法或者响应组件上的事件， 就像需要的那样提供自己的功能。
Component
preventMark : Boolean
true将会禁止 把表单项标记为非法。默认为false.
Field
ptype : String
需要创建配置的ptype。 当传递一个配置对象给构造函数时...
需要创建配置的ptype。 当传递一个配置对象给构造函数时，此配置选项不会被使用。 只有在使用懒初始化的时候此配置项才会被使用， 此时Plugin不是 通过一个完整的实例组件，而是通过一个Component配置指定的。 在渲染时，将会查找ptype以决定创建何种类型的Plugin。

如果你创建自己的Plugin，你可以通过 Ext.ComponentMgr.registerPlugin 对它们进行注册，以便能利用懒初始化和渲染机制。
Component
readOnly : Boolean
将会把表单项标记为在HTML中只读(readOnly)(默认为false)...
true 将会把表单项标记为在HTML中只读(readOnly)(默认为false)。

Note: 这仅仅设置元素的readOnly DOM参数。 例如，设置 readOnly=true ，将不会禁用触发ComboBox或者DateField； 这为你提供了一个选项，可以强制用户通过触发按钮选择一个值，而不是 在文本框进行输入。 使用 hideTrigger 可以隐藏触发按钮。

TriggerField
ref : String
一个路径描述，与组件的 ownerCt 相关，它描述了把当前组件的命名引用放置到哪个父容器中去。...

一个路径描述，与组件的 ownerCt 相关，它描述了把当前组件的命名引用放置到哪个父容器中去。

祖先的坐标路径可以通过'/'字符进行分隔。 例如，将一个Toolbar Button的引用放入 拥有此Toolbar的Panel中:

var myGrid = new Ext.grid.EditorGridPanel({
    title: 'My EditorGridPanel',
    store: myStore,
    colModel: myColModel,
    tbar: [{
        text: 'Save',
        handler: saveChanges,
        disabled: true,
        ref: '../saveButton'
    }],
    listeners: {
        afteredit: function() {
//          The button reference is in the GridPanel
            myGrid.saveButton.enable();
        }
    }
});

在上面的代码中，如果 ref 是 'saveButton' ，那么引用将会被放置到Toolbar中。 ref 中的每个'/' 都会从组件的 ownerCt 向上移动一级。

另请参见 added 和 removed 事件。

Component
regex : RegExp
在校验时，需要在表单项值纸上进行测试的JavaScript RegExp对象(默认为 null)。 如果测试失败，表单项将会使用...
在校验时，需要在表单项值纸上进行测试的JavaScript RegExp对象(默认为 null)。 如果测试失败，表单项将会使用 regexText 进行标记。
TextField
regexText : String
当使用regex 并且校验测试失败时显示的出错文本(默认为'')
TextField
region : String
注: 此配置只用于该组件展现在一个布局为BorderLayout的容器中...

注: 此配置只用于该组件展现在一个布局为BorderLayout的容器中(例如指定layout:'border')。

详见Ext.layout.BorderLayout。

BoxComponent
renderTo : Mixed
该值可以是一个节点的id、一个DOM节点或者一个已存在的元素...

该值可以是一个节点的id、一个DOM节点或者一个已存在的元素， 组件将会被渲染到其中。

  • 注意 :
      如果组件不是一个Container 的子项目时， 不要使用此选项。 渲染和管理它的子项目是一个Container 的layout manager的责任。
      当使用此配置项时，无需调用render()方法。

另请参见 render 。

Component
selectOnFocus : Boolean
true当表单项获得输入焦点时，将会自动选中所有存在的表单项文本 (默认为false)
TextField
showToday : Boolean
false将会隐藏DatePicker的底部区域---其中包含了一个Today按钮， 并禁止使用...
false将会隐藏DatePicker的底部区域---其中包含了一个Today按钮， 并禁止使用空格键选中当前日期(默认为 true)。
DateField
stateEvents : Array
一个事件数组，当它们被触发时，组件需要保存自己的状态(默认值为 none)...

一个事件数组，当它们被触发时，组件需要保存自己的状态(默认值为 none)。 它们可以是任何该组件支持的事件类型，包括浏览器事件和 自定义事件(例如['click', 'customerchange'])。

对于保存和恢复组件状态的详细解释，参见 stateful

Component
stateId : String
为该组件指定的唯一的id值，它被用作管理组件状态的目的...
为该组件指定的唯一的id值，它被用作管理组件状态的目的。 (如果设定了id，默认值为组件自己的id，否则，如果组件使用自动生成的id，此值为null)。

对于保存和反解析组件状态的解释，参见 stateful 。

Component
stateful : Boolean
一个标志参数，它将引起组件在启动时尝试从一个保存的状态中恢复内部状态参数...

一个标志参数，它将引起组件在启动时尝试从一个保存的状态中恢复内部状态参数。 组件必须要么拥有一个 stateId 或者 id ，它们被分配给需要被管理的状态属性。 在跨页面加载时，不保证自动生成的id属性的稳定性， 并且，不能依赖此id来保存和恢复一个组件的相同状态。

为了保存状态的操作能够工作，状态管理器的提供者必须 被设置成一个Ext.state.Provider 的实现类，它覆盖了set 和get 方法，以便保存和恢复name/value对。 有一个内置的Ext.state.CookieProvider 可用。

为当前页面设置状态提供者:

Ext.state.Manager.setProvider(new Ext.state.CookieProvider({
    expires: new Date(new Date().getTime()+(1000*60*60*24*7)), //7 days from now
}));

当 stateEvents 配置项中其中之一的事件被触发时， 一个状态可保存的组件将试图保存其状态。

保存状态时，一个可保存状态的组件首先需要通过调用 getState 方法来序列化它的状态。 默认情况下，此函数什么事都不做。 开发者必须提供一个实现，返回一个hash对象，它描述了组件可恢复的状态。

getState方法产生的值将会传递给 Ext.state.Manager.set 方法，它使用配置的 Ext.state.Provider 来保存对象，以组件的 stateId 为key，或者，如果此值（指stateId）没有指定时， 使用它的 id 作为key。

在进行构造时，一个可保存状态的组件试图通过调用 Ext.state.Manager.get方法来 恢复它的状态，传递 stateId 或者，如果此值（指stateId）没有指定时， 使用它的 id 作为参数。

结果对象被传递给 applyState 。 applyState 的默认实现只是简单地把属性拷贝到对象中， 但是开发者可以覆盖此方法以支持更多行为。

通过向 beforestaterestore, staterestore, beforestatesave 和 statesave 事件上绑定监听器，你可以在保存和恢复状态时进行额外的处理。

Component
stripCharsRe : RegExp
一个JavaScript RegExp对象，用来在校验之前从值中剥离不想要的内容(默认为 null)。
TextField
style : String
被添加到组件元素的特定样式。 必须是按照...
被添加到组件元素的特定样式。 必须是按照 Ext.Element.applyStyles 类指定格式的合法参数值。

new Ext.Panel({
    title: 'Some Title',
    renderTo: Ext.getBody(),
    width: 400, height: 300,
    layout: 'form',
    items: [{
        xtype: 'textarea',
        style: {
            width: '95%',
            marginBottom: '10px'
        }
    },
        new Ext.Button({
            text: 'Send',
            minWidth: '100',
            style: {
                marginBottom: '10px'
            }
        })
    ]
});
Component
submitValue : Boolean
False将会清除表单项的name属性，这样在提交表单时它将不会被提交。 默认为true。
Field
tabIndex : Number
该表单项的tabIndex。 注意，此属性仅仅应用到被渲染好的，而不是那些通过applyTo...
该表单项的tabIndex。 注意，此属性仅仅应用到被渲染好的，而不是那些通过applyTo创建的表单项 (默认为undefined)。
Field
tabTip : String
注: 这个配置只用于当该组件作为TabPanel的一个子项目时使用...

注: 这个配置只用于当该组件作为TabPanel的一个子项目时使用。

一个String类型的innerHTML(支持html标签)，当鼠标放在该选项上的时，显示一个tooltip。为了tips能够被渲染，Ext.QuickTips.init()必须被提前调用。
BoxComponent
tpl : Mixed
一个 Ext.Template , Ext.XTemplate 或者一个用来形成一个Ext.XTemplate的字符串数组...
一个 Ext.Template , Ext.XTemplate 或者一个用来形成一个Ext.XTemplate的字符串数组。 与 data 和 tplWriteMode 配置项协同使用。
Component
tplWriteMode : String
刷新组件的内容区域时使用的Ext.(X)Template方式。 默认为'overwrite' (参见 Ext.XTemplate.overwrite )。
刷新组件的内容区域时使用的Ext.(X)Template方式。 默认为'overwrite' (参见 Ext.XTemplate.overwrite )。
Component
triggerClass : String
一个额外的CSS类，用来设置触发按钮的样式。 触发按钮将总是获得'x-form-trigger'类...
一个额外的CSS类，用来设置触发按钮的样式。 触发按钮将总是获得'x-form-trigger'类， 并且如果指定triggerClass，它将被appended (默认为'x-form-date-trigger'，显示一个日历图标)。
DateField
triggerConfig : Mixed
一个DomHelper 配置对象，指定了当前表单项触发元素的结构。(可选)...

一个DomHelper 配置对象，指定了当前表单项触发元素的结构。(可选)。

当你需要为TriggerField指定作为触发按钮的元素，可以配置此选项。

注意，当使用此配置项时，保证触发器能正确调整尺寸、定位和显示将是开发者的责任。默认为:

                                {tag: "img", src: Ext.BLANK_IMAGE_URL, cls: "x-form-trigger " + this.triggerClass}
TriggerField
validateOnBlur : Boolean
在表单项失去焦点时是否进行校验(默认为 true)。
Field
validationDelay : Number
在用户开始输入到校验操作开始之间的时长毫秒数 (默认为250)
Field
validationEvent : String/Boolean
引发表单项进行校验操作的事件。 设置为false可以禁用自动校验 (默认为'keyup')。
引发表单项进行校验操作的事件。 设置为false可以禁用自动校验 (默认为'keyup')。
Field
validator : Function
一个自定义的校验方法，在校验表单项时调用( validateValue) (默认为...

一个自定义的校验方法，在校验表单项时调用( validateValue) (默认为 null)。 如果指定，此函数会被第一个调用，允许开发者覆盖默认的校验过程。

此方法会被传入以下参数:

  • value : Mixed
    表单项的当前值

此方法将会返回:

  • true : Boolean
    true 如果值合法
  • msg : String
    如果值是非法时的出错信息
TextField
value : Mixed
当前表单项的初始化值(默认为undefined).
Field
vtype : String
一个校验类型名，在Ext.form.VTypes 中定义(默认为null)
TextField
vtypeText : String
一个自定义的出错消息，用来替代为当前表单项所设置的...
一个自定义的出错消息，用来替代为当前表单项所设置的 vtype 所提供的默认消息(默认为'')。 注意: 只有设置了 vtype 时才应用此项，否则忽略。
TextField
width : Number
组件的宽度(默认值为 auto)。注:如果想使用百分比的方式...
组件的宽度(默认值为 auto)。注:如果想使用百分比的方式来设置值，请查看 Ext.Component.anchor。
BoxComponent
wrapFocusClass : String
天骄到触发元素包装器上的(CSS)类， 默认为x-trigger-wrap-focus。
TriggerField
x : Number
如果被包含在一个指定位置的容器中，这个值表示x(left)坐标值。
BoxComponent
xtype : String
需要创建配置的xtype。 当传递一个配置对象给构造函数时...
需要创建配置的xtype。 当传递一个配置对象给构造函数时，此配置选项不会被使用。 只有在使用懒初始化的时候此配置项才会被使用，此时容器的子项目不是 通过一个完整的实例组件，而是通过一个Component配置指定的。 在渲染时，将会查找xtype以决定创建何种类型的子组件。

预定义的xtype列表如下： here。

如果你继承Component创建你自己的组件，你需要使用Ext.ComponentMgr.registerType 对它们进行注册，以便利用懒初始化和渲染机制。
Component
y : Number
如果被包含在一个指定位置的容器中，这个值表示y(top)坐标值。
BoxComponent

公共属性

Property Defined By
disabled : Boolean
当前组件处于无效状态时为true。 Read-only.
Component
el : Ext.Element
封装了当前组件的Ext.Element。 Read-only。通常情况下，这将是一个<DIV>元素，它由此类的...

封装了当前组件的Ext.Element。 Read-only。

通常情况下，这将是一个<DIV>元素，它由此类的 onRender方法创建，但是它可以通过使用 autoEl 配置项进行覆盖。

注意: 直到组件渲染完成此元素都将处于无效状态。

如需向当前组件的 DOM事件(而不是当前组件自己的Observable事件)添加监听器， 更多建议，参见 listeners 配置项，或者直接使用一个render监听器:

new Ext.Panel({
    title: 'The Clickable Panel',
    listeners: {
        render: function(p) {
            // Append the Panel to the click handler's argument list.
            p.getEl().on('click', handlePanelClick.createDelegate(null, [p], true));
        },
        single: true  // Remove the listener after first invocation
    }
});

另请参见 getEl

Component
hidden : Boolean
如果当前组件处于隐藏状态，此值为true。Read-only。
Component
initialConfig : Object
当前组件的初始化配置描述。 Read-only。
Component
label : Ext.Element
关联到当前表单项的label元素。 只有在当前表单项已经被一个Ext.layout.FormLayout ...

关联到当前表单项的label元素。 只有在当前表单项已经被一个Ext.layout.FormLayout 布局管理器渲染之后才可用。

Field
originalValue : mixed
表单项原来的值，它是在value 中配置的；或者，如果 trackResetOnLoad 设置为...
表单项原来的值，它是在value 中配置的；或者，如果 trackResetOnLoad 设置为 true 时，通过表单加载操作最后一次加载的。
Field
ownerCt : Ext.Container
组件所属的Container (默认为undefined，当前组件被添加到一个容器中时此值被自动设置)...
组件所属的Container (默认为undefined，当前组件被添加到一个容器中时此值被自动设置)。 Read-only。

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

Component
refOwner : Ext.Container
如果当前组件是一个容器的孩子，并且是通过一个 ref 配置项被注册的，则此值为 ref 引用被插入到的祖先容器。
如果当前组件是一个容器的孩子，并且是通过一个 ref 配置项被注册的，则此值为 ref 引用被插入到的祖先容器。
Component
rendered : Boolean
如果当前组件已经被渲染了，此值为true。Read-only.
Component
startValue : mixed
表单项最后一次获得焦点时所拥有的值。 这就是传递给change 事件的值...

表单项最后一次获得焦点时所拥有的值。 这就是传递给change 事件的值，此事件在值被改变并失去焦点时触发。

直到表单项被访问之前此值都是undefined 与originalValue 进行比较。

Field

公共方法

Method Defined By
DateField ( Object config )
创建一个新的DateField
创建一个新的DateField
参数:
  • config : Object
返回值:
  • void
DateField
addClass ( string cls ) : Ext.Component
为组件底层的元素添加CSS样式。
为组件底层的元素添加CSS样式。
参数:
  • cls : string
    需要添加的CSS样式的class名称
返回值:
  • Ext.Component
    this
Component
addEvents( Object|String o, string Optional. ) : void
添加指定的事件到事件列表上，事件会被该Observable触发。
添加指定的事件到事件列表上，事件会被该Observable触发。
参数:
  • o : Object|String
    以事件名作为属性true作为值的对象 或者当多个事件名被分开的传递时则为第一个事件名。
  • Optional. : string
    事件名被分开的传递时则为事件名。 用法:
    this.addEvents('storeloaded', 'storecleared');
返回值:
  • void
Observable
addListener( String eventName, Function handler, [Object scope], [Object options] ) : void
给对象添加事件处理器。
给对象添加事件处理器。
参数:
  • eventName : String
    监听的事件名。
  • handler : Function
    事件调用的方法
  • scope : Object
    （可选）处理方法执行的作用域 (this的引用 reference)。 如果被忽略。默认为触发事件的对象。
  • options : Object
    （可选）包含处理器配置和属性的对象。 可能包含以下的属性:
    • scope : Object
      处理方法执行的作用域(this的引用) 。 如果被忽略。默认为触发事件的对象。
    • delay : Number
      在触发事件后延迟调用处理器的毫秒数。
    • single : Boolean
      如果为True则添加一个处理器来处理下一次的事件触发（仅一次），然后移除自己。
    • buffer : Number
      使得处理器延迟指定毫秒数后预定的运行在 一个Ext.util.DelayedTask中 。 如果事件在时间内再一次被触发，原始的处理器不会被调用，但是新的处理器会预定的在他的位置上。
    • target : Observable
      如果事件在目标的Observable上触发则仅仅调用处理器， 否则 事件会从子类的Observable上冒泡

    组合选项
    使用这些选项参数,可能会组合出不同类型的监听器：

    一个延迟的，一次性的监听器。

    myDataView.on('click', this.onClick, this, {
single: true,
delay: 100
});

    一次调用附加多个处理器
    该方法同样支持传递一个包含指定的多个处理器的属性的配置对象参数。

    myGridPanel.on({
'click' : {
    fn: this.onClick,
    scope: this,
    delay: 100
},
'mouseover' : {
    fn: this.onMouseOver,
    scope: this
},
'mouseout' : {
    fn: this.onMouseOut,
    scope: this
}
});

    或者一个简写的语法：

    myGridPanel.on({
'click' : this.onClick,
'mouseover' : this.onMouseOver,
'mouseout' : this.onMouseOut,
 scope: this
});
返回值:
  • void
Observable
applyToMarkup ( String/HTMLElement el ) : void
将此组件添加到已存在的有效的HTML标签中。 使用该方法时，无需再调用render()方法。
将此组件添加到已存在的有效的HTML标签中。 使用该方法时，无需再调用render()方法。
参数:
  • el : String/HTMLElement
返回值:
  • void
Component
clearInvalid () : void
清除当前表单项上的所有非法styles/messages(样式/消息)
清除当前表单项上的所有非法styles/messages(样式/消息)
参数:
  • 无。
返回值:
  • void
Field
cloneConfig ( Object overrides ) : Ext.Component
默认使用原先传递给当前实例的配置值克隆当前组件。
默认使用原先传递给当前实例的配置值克隆当前组件。
参数:
  • overrides : Object
    一个新的配置项，包含需要覆盖到克隆版本的所有属性。 可以传递一个id参数给此对象，否则将自动生成一个新的id以避免发生重复。
返回值:
  • Ext.Component
    当前组件的克隆副本
Component
destroy () : void
通过如下方法销毁对象：删除所有的事件监听器、将组件的元素从DOM树中删除...
通过如下方法销毁对象：删除所有的事件监听器、将组件的元素从DOM树中删除（如果可以）、 将组件从它的 Ext.Container（如果可用）中删除、 并且将它从Ext.ComponentMgr中 注销。 销毁操作一般由框架自动完成，一般情况下不需要直接调用该方法。
参数:
  • 无。
返回值:
  • void
Component
disable () : Ext.Component
将组件置为无效状态，并出发'disable'事件。
将组件置为无效状态，并出发'disable'事件。
参数:
  • 无。
返回值:
  • Ext.Component
    this
Component
enable () : Ext.Component
将组件置为有效状态并触发'enable'事件。
将组件置为有效状态并触发'enable'事件。
参数:
  • 无。
返回值:
  • Ext.Component
    this
Component
enableBubble( String/Array events ) :void
是否现在使得事件会被该Observable触发并调用 this.getBubbleTarget()方法在拥有者的继承树...

是否现在使得事件会被该Observable触发并调用 this.getBubbleTarget()方法在拥有者的继承树中冒泡。Observable的基础类中没有该方法的实现。

该方法一般被Ext.Components用来冒泡事件到拥有者的容器。参看Ext.Component.getBubbleTarget默认的实现 在Ext.Component中返回组件的直接拥有者。但是如果需要的是一个已知的目标，该方法可以被重写来更快的访问需求的目标。

例子:

Ext.override(Ext.form.Field, {
    // 添加方法到Field的initComponent上改变事件为冒泡
    initComponent : Ext.form.Field.prototype.initComponent.createSequence(function() {
        this.enableBubble('change');
    }),

    // 我们知道我们想让Field的事件冒泡到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() {
            // 如果样式被修改标题会变红。
            myForm.header.setStyle('color', 'red');
        }
    }
});
参数:
  • events : String/Array
    冒泡的事件名，或事件名数组
返回值:
  • void
Observable
findParentBy ( Function fn ) : Ext.Container
通过自定义的函数查找当前组件上层任何层次上的容器...
通过自定义的函数查找当前组件上层任何层次上的容器。 如果传递的函数返回true，容器对象将被返回。
参数:
  • fn : Function
    自定义的函数，使用如下参数调用(container,this component)。
返回值:
  • Ext.Container
    自定义函数返回true的第一个容器
Component
findParentByType ( String/Class xtype ) : Ext.Container
通过xtype或者class查找当前组件上层任何层次上的容器
通过xtype或者class查找当前组件上层任何层次上的容器
参数:
  • xtype : String/Class
    组件的xtype字符串，或者直接是组件的class
返回值:
  • Ext.Container
    符合指定xtype或者class的第一个容器
Component
fireEvent( String eventName, Object... args ) : Boolean
用传入的参数触发指定的事件 (减去事件名)。 一个事件可以被设置为冒泡 Obse...

用传入的参数触发指定的事件 (减去事件名)。

一个事件可以被设置为冒泡到Observable父类继承树(参看 Ext.Component.getBubbleTarget) 调用enableBubble实现。

参数:
  • eventName : String
    触发的事件名。
  • args : Object...
    传递给处理器的可变长度参数。
返回值:
  • Boolean
    如果有任何的处理器返回false则返回false，否则返回true。
Observable
focus ( [ Boolean selectText ], [ Boolean/Number delay ] ) : Ext.Component
尝试将当前组件设为焦点。
尝试将当前组件设为焦点。
参数:
  • selectText : Boolean
    (可选) 如果可用，同时选中组件内部的文本
  • delay : Boolean/Number
    (可选)将当前组件设置为焦点的延迟时间(设置为true等于0毫秒)
返回值:
  • Ext.Component
    this
Component
getActiveError () : String
获取当前表单项活动的出错消息。
获取当前表单项活动的出错消息。
参数:
  • 无。
返回值:
  • String
    返回表单项上活动的出错消息，如果没有错误，返回一个空字符串。
Field
getBox ( [ Boolean local ] ) : Object
获取组件底层元素当前盒子模型的尺寸。（译者注：盒子模型是CSS术语，详细解释请自行搜索。）
获取组件底层元素当前盒子模型的尺寸。（译者注：盒子模型是CSS术语，详细解释请自行搜索。）
参数:
  • local : Boolean
    (可选)值为true时，组件的left值和top值将代替页面的XY被返回。(默认值为false)
返回值:
  • Object
    返回值的格式{x, y, width, height}
BoxComponent
getBubbleTarget () : Ext.Container
为Observable的fireEvent方法提供链接，它沿着继承结构进行冒泡操作。
为Observable的fireEvent方法提供链接，它沿着继承结构进行冒泡操作。
参数:
  • 无。
返回值:
  • Ext.Container
    拥有当前组件的容器。
Component
getEl () : Ext.Element
返回 Ext.Element ，它包装了当前组件。...

返回 Ext.Element ，它包装了当前组件。

通常情况下，这将是一个<DIV>元素，它是由该类的onRender方法创建的， 但是可以使用autoEl配置项 覆盖它。

注意: 此元素将会一直处于无效状态直到当前组件渲染完成。

如需向当前组件的 DOM事件(而不是当前组件自己的Observable事件)添加监听器， 更多建议，参见 listeners 配置项，或者直接使用一个render监听器:

new Ext.Panel({
    title: 'The Clickable Panel',
    listeners: {
        render: function(p) {
            // Append the Panel to the click handler's argument list.
            p.getEl().on('click', handlePanelClick.createDelegate(null, [p], true));
        },
        single: true  // Remove the listener after first invocation
    }
});
参数:
  • 无。
返回值:
  • Ext.Element
    包装当前组件的元素。
Component
getErrors ( Mixed value ) : Array
运行所有NumberFields校验规则并返回一个出错信息数组。 注意，这将首先运行TextField的校验项...
运行所有NumberFields校验规则并返回一个出错信息数组。 注意，这将首先运行TextField的校验项，所以返回的数组中包含了表单项上所有错误。 其它校验检测有：测试日期格式有效、选择的日期处于最大和最小日期 区间内、选择的日期不在disabledDates正则表达式范围内、选择的日期不是 disabledDays的值之一。
参数:
  • value : Mixed
    需要从中获得错误的值(默认为当前表单项的值)
返回值:
  • Array
    当前表单项的所有校验错误信息
DateField
getHeight () : Number
获取该组件的当前高度值。
获取该组件的当前高度值。
参数:
  • 无。
返回值:
  • Number
BoxComponent
getId () : String
返回当前组件的id，如果没有定义id，则自动生成并返回一个id:'ext-comp-'...
返回当前组件的 id 如果没有定义 id 则自动生成并返回一个 id

'ext-comp-' + (++Ext.Component.AUTO_ID)
参数:
  • 无。
返回值:
  • String
    id
Component
getItemId () : String
返回当前组件的 itemId 。 如果没有通过配置参数指定 itemId 那么，将会使用...
返回当前组件的 itemId 。 如果没有通过配置参数指定 itemId 那么，将会使用 getId 返回 id 。
参数:
  • 无。
返回值:
  • String
Component
getName () : String
如果可用，返回表单项的 name 或者 hiddenName 属性。
如果可用，返回表单项的 name 或者 hiddenName 属性。
参数:
  • 无。
返回值:
  • String
    name 表单项的{@link Ext.form.Field#name name}或者{@link Ext.form.ComboBox#hiddenName hiddenName}
Field
getOuterSize () : Object
获取当前组件所在元素的尺寸大小，包括边缘的空白处。
获取当前组件所在元素的尺寸大小，包括边缘的空白处。
参数:
  • 无。
返回值:
  • Object
    一个包含元素大小的对象 {width: (element width + left/right margins), height: (element height + top/bottom margins)}
BoxComponent
getPosition ( [ Boolean local ] ) : Array
获取组件底层元素当前的XY位置。
获取组件底层元素当前的XY位置。
参数:
  • local : Boolean
    (可选)如果为true，将返回元素的left和top值，而不是相对于页面内的 XY。(默认值为 false)
返回值:
  • Array
    元素的XY位置值(例如：[100, 200])
BoxComponent
getRawValue () : Mixed
返回原始数据值，可能不是一个合法的、已定义的值。 返回格式化的值参见...
返回原始数据值，可能不是一个合法的、已定义的值。 返回格式化的值参见 getValue。
参数:
  • 无。
返回值:
  • Mixed
    value 表单项的值
Field
getResizeEl () : Ext.Element
返回该组件的最外层用来定义这些组件整体大小的Element...

返回该组件的最外层用来定义这些组件整体大小的Element对象。

通常用 getEl 方法将会返回相同的Element对象，但在有些情况下，组件可能有一些更多的封装了它的主要动态Element对象的Element对象。

例如ComboBox。它是封装在一个包含<input>元素的包装元素里(这将返回其 getEl方法和触发按钮的元素)。返回的元素为resizeEl。

参数:
  • 无。
返回值:
  • Ext.Element
    The Element which is to be resized by size managing layouts.
BoxComponent
getSize () : Object
获取组件底层元素当前的大小。
获取组件底层元素当前的大小。
参数:
  • 无。
返回值:
  • Object
    一个包含元素大小的对象{width: (element width), height: (element height)}
BoxComponent
getValue () : Date
返回日期项的当前日期值。
返回日期项的当前日期值。
参数:
  • 无。
返回值:
  • Date
    日期值
DateField
getWidth () : Number
获取该组件的当前宽度值。
获取该组件的当前宽度值。
参数:
  • 无。
返回值:
  • Number
BoxComponent
getXType () : String
获取当前组件的xtype，它是用 Ext.ComponentMgr 注册的。 所有可用的xtype列表，参见...
获取当前组件的xtype，它是用 Ext.ComponentMgr 注册的。 所有可用的xtype列表，参见 Ext.Component 类头部。示例用法:

var t = new Ext.form.TextField();
alert(t.getXType());  // alerts 'textfield'
参数:
  • 无。
返回值:
  • String
    The xtype
Component
getXTypes () : String
返回此组件的xtype继承树，用字符'-'分隔。 所有可用的xtype值...

返回此组件的xtype继承树，用字符'-'分隔。 所有可用的xtype值，请参见Ext.Component 类的头部。

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

示例用法:

var t = new Ext.form.TextField();
alert(t.getXTypes());  // alerts 'component/box/field/textfield'
参数:
  • 无。
返回值:
  • String
    xtype层次字符串
Component
hasListener( String eventName ) : Boolean
检测对象是否包含指定事件的任何监听器
检测对象是否包含指定事件的任何监听器
参数:
  • eventName : String
    检测的事件名
返回值:
  • Boolean
    如果事件被监听则为true，否则为false
Observable
hide () : Ext.Component
隐藏当前组件。 监听 beforehide' 事件并且返回false 可以取消隐藏组件的操作。 在隐藏组件之后触发...
隐藏当前组件。 监听 beforehide' 事件并且返回false 可以取消隐藏组件的操作。 在隐藏组件之后触发 ' hide' 事件。 如果组件被配置成 hidden 那么此方法在内部被调用。
参数:
  • 无。
返回值:
  • Ext.Component
    this
Component
isDirty () : Boolean
如果此表单项的值与原始值相比发生了改变，返回true。 如果表单项...

如果此表单项的值与原始值相比发生了改变，返回true。 如果表单项被禁用或者尚未被渲染将会返回false。

注意，如果所属的 form 配置了一个Ext.form.BasicForm， 那么在使用Ext.form.BasicForm. setValues 加载值之后，原始值将会被更新。

参数:
  • 无。
返回值:
  • Boolean
    如果此表单项的值与原始值相比发生了改变(并且没有被禁用)，返回true，其它返回false。
Field
isValid ( Boolean preventMark ) : Boolean
通过 校验 表单项 处理后的值 ，返回表单项当前值是否合法。...
通过 校验 表单项 处理后的值 ，返回表单项当前值是否合法。 注意: disabled 的表单项将会被忽略。
参数:
  • preventMark : Boolean
    True将会禁止把表单项标记为非法
返回值:
  • Boolean
    如果值是合法的，为true，其它为false
Field
isVisible () : Boolean
如果当前组件可见，返回true。
如果当前组件可见，返回true。
参数:
  • 无。
返回值:
  • Boolean
    如果当前组件可见，返回true，其它返回false。
Component
isXType ( String xtype , [ Boolean shallow ] ) : Boolean
Tests whether or not this Component is of a specific xtype. This can test whether this Component is descended from th...

测试此组件是否是指定的xtype。此方法既可以测试是否是指定的xtype的某个子类， 或者它是否直接是指定的xtype类(shallow=true)。

如果使用你自己的子类，必须知道组件必须注册它的xtype值。

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

示例用法:

var t = new Ext.form.TextField();
var isText = t.isXType('textfield');        // true
var isBoxSubclass = t.isXType('box');       // true, descended from BoxComponent
var isBoxInstance = t.isXType('box', true); // false, not a direct BoxComponent instance
参数:
  • xtype : String
    需要为当前组件进行检测的xtype
  • shallow : Boolean
    (可选) 如果为false，检测组件是否是xtype继承树中的某个子类（默认是这种情况）， 如果为true，只检测组件是否是指定的xtype类型。
返回值:
  • Boolean
    如果当前组件是指定xtype的子类，返回true，其它返回flase。
Component
markInvalid ( [ String msg ] ) : void
显示一个关联到当前表单项的出错信息， 使用msgTarget 来决定如何显示消息并将...

显示一个关msgTarget 来决定如何显示消息并将 invalidClass 应用到表单项的UI元素上。

注意: 如果表单项的值确实通过了校验， 此方法不会导致表单项的 validate 方法返回 false 。 所以简单地把一个表单项标记为非法并不会阻止表单项 通过设置的 Ext.form.Action.Submit.clientValidation 被提交。

invalid.
参数:
  • msg : String
    (可选)校验信息(默认为invalidText)
返回值:
  • void
Field
mon ( Observable|Element item , Object|String ename , Function fn , Object scope , Object opt ) : void
向任何Observable对象(或者元素)上添加监听器，监听器将会在组件...

向任何Observable对象(或者元素)上添加监听器，监听器将会在组件销毁时被自动删除。
用法：

myGridPanel.mon(myGridPanel.getSelectionModel(), 'selectionchange', handleSelectionChange, null, {buffer: 50});

or:

myGridPanel.mon(myGridPanel.getSelectionModel(), {
    selectionchange: handleSelectionChange,
    buffer: 50
});
参数:
  • item : Observable|Element
    需要添加listener/listeners的项目。
  • ename : Object|String
    事件名，或者一个包含事件名属性的对象。
  • fn : Function
    (可选) 如果 ename 参数是一个事件名，此参数为处理函数。
  • scope : Object
    (可选)如果 ename 参数是一个事件名称，此参数是作用域 ( this 引用)，监听函数将会在此作用域中被执行。
  • opt : Object
    (可选)如果 ename 参数是一个事件名称， 此参数是 addListener 配置项。
返回值:
  • void
Component
mun ( Observable|Element item , Object|String ename , Function fn , Object scope ) : void
删除通过mon 方法添加的监听器。
删除通过mon 方法添加的监听器。
参数:
  • item : Observable|Element
    需要删除listener/listeners的项目。
  • ename : Object|String
    事件名称，或者一个包含事件名称属性的对象。
  • fn : Function
    (可选)如果 ename 参数是一个事件名称，此参数是一个处理函数。
  • scope : Object
    (可选)如果 ename 参数是一个事件名称，此参数是作用域 ( this 引用)，监听函数将会在此作用域中被执行。
返回值:
  • void
Component
nextSibling () : Ext.Component
返回所属容器中的下一个组件
返回所属容器中的下一个组件
参数:
  • 无。
返回值:
  • Ext.Component
Component
on( String eventName, Function handler, [Object scope], [Object options] ) : void
给对象添加事件处理器 (addListener的简写形式)
给对象添加事件处理器 (addListener的简写形式。)
参数:
  • eventName : String
    监听的事件类型
  • handler : Function
    事件调用的方法
  • scope : Object
    （可选）处理方法执行时的作用域 (this 的引用)。 如果被忽略。默认为触发事件的对象。
  • options : Object
    可选 包含处理器配置的对象。
返回值:
  • void
Observable
previousSibling () : Ext.Component
返回所属容器中的前一个组件
返回所属容器中的前一个组件
参数:
  • 无。
返回值:
  • Ext.Component
Component
processValue ( Mixed value ) : void
仅仅在需要准备原始值供校验时，才需要覆盖此方法(参见 validate和 isValid)。...
仅仅在需要准备原始值供校验时，才需要覆盖此方法(参见 validate和 isValid)。 此方法被期望为表单项返回处理后的值，此值将会被用来进行校验 (参见validateValue方法)。
参数:
  • value : Mixed
返回值:
  • void
Field
purgeListeners() : void
移除对象上所有的监听器
移除对象上所有的监听器
参数:
  • 无。
返回值:
  • void
Observable
relayEvents( Object o, Array events ) : void
从指定的Observable上传递选择的事件就好像被当前对象触发一样。
从指定的Observable上传递选择的事件就好像被当前对象触发一样。
参数:
  • o : Object
    该Observable上的事件被当前对象传递。
  • events : Array
    传递的数组名。
返回值:
  • void
Observable
removeClass ( string cls ) : Ext.Component
从组件底层的元素上删除一个CSS类。
从组件底层的元素上删除一个CSS类。
参数:
  • cls : string
    需要移除的CSS类名
返回值:
  • Ext.Component
    this
Component
removeListener( String eventName, Function handler, [Object scope] ) : void
删除一个事件处理器。
删除一个事件处理器。
参数:
  • eventName : String
    处理器关联的事件类型。
  • handler : Function
    移除的处理器。 这应该是传递到addListener里的方法的引用。
  • scope : Object
    （可选）处理器指定的初始作用域。
返回值:
  • void
Observable
render ( [ Element/HTMLElement/String container ], [ String/Number position ] ) : void
在传递进来的HTML元素中渲染当前组件。...

在传递进来的HTML元素中渲染当前组件。

如果你正在使用一个Container 对象放置当前组件，那么请不要使用render方法。

当容器第一次被渲染时，它的子组件将会被容器的 layout 管理器渲染。

某些布局管理器允许动态添加子组件。它们包括 Ext.layout.CardLayout, Ext.layout.AnchorLayout, Ext.layout.FormLayout, Ext.layout.TableLayout。

当一个新的子组件被添加时，如果容器已经被渲染了， 你可能需要调用容器的 doLayout 方法来刷新视图，它将导致所有没有被渲染的子组件进行渲染操作。 此操作是必须的，这样你可以添加多个子组件而只刷新一次layout。

当创建复杂的UI时，非常重要的一点是，请记住调整子项目的尺寸和位置是容器的 layout 管理器的职责。 如果你希望子项目的尺寸对用户交互作出反应， 你必须为容器配置一个布局管理器，它将创建和管理你心里想要的那种布局。

忽略容器的layout 配置意味着将会使用一个基本的布局管理器，它除了按次序把子组件 渲染到容器中之外什么事情都不做。 这种情况下，任何尺寸和位置的调整操作都不会发生。

参数:
  • container : Element/HTMLElement/String
    (可选) 需要在其中渲染当前组件的元素。 如果它是从一个已存在的标签中创建的，此参数应该被忽略。
  • position : String/Number
    (可选) 容器中的一个元素ID或者一个DOM节点索引， 当前组件将会被插入到它前面 (默认append到容器的尾部)
返回值:
  • void
Component
reset () : void
将表单项的当前值重置为以前加载时的值，并且清除所有校验信息。...
将表单项的当前值重置为以前加载时的值，并且清除所有校验信息。 参见Ext.form.BasicForm. trackResetOnLoad 。
参数:
  • 无。
返回值:
  • void
TextField
resumeEvents() : void
重新开始触发事件。(参见suspendEvents) 如果事件以queueSuspended参数被挂起，则在事件被挂起时 ...
重新开始触发事件。(参见 suspendEvents) 如果事件以queueSuspended 参数被挂起，则在事件被挂起时触发的事件会被传递到所有的监听器上
参数:
  • 无。
返回值:
  • void
Observable
selectText ( [ Number start ], [ Number end ] ) : void
选中当前表单项中的文本
选中当前表单项中的文本
参数:
  • start : Number
    (可选)选中的起点索引(默认为0)
  • end : Number
    (可选)选中的结束索引(默认为文本长度)
返回值:
  • void
TextField
setActiveError ( String msg , Boolean suppressEvent ) : void
将当前activeError设置为所给的字符串。 触发'invalid'事件。这不会设置出错图标...
将当前activeError设置为所给的字符串。 触发'invalid'事件。这不会设置出错图标，仅仅设置消息并触发事件。 如需显示出错图标，可使用markInvalid代替，它将在内部调用此方法。
参数:
  • msg : String
    出错消息
  • suppressEvent : Boolean
    True将会禁止触发'invalid'事件
返回值:
  • void
Field
setAutoScroll ( Boolean scroll ) : Ext.BoxComponent
设置该组件内容溢出时是否自动显示滚动条。
设置该组件内容溢出时是否自动显示滚动条。
参数:
  • scroll : Boolean
    值为true的话组件自动显示滚动条。
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setDisabled ( Boolean disabled ) : Ext.Component
工具函数，使用布尔值设置有效/无效(disabled/enabled )。
工具函数，使用布尔值设置有效/无效(disabled/enabled )。
参数:
  • disabled : Boolean
返回值:
  • Ext.Component
    this
Component
setDisabledDates ( Array disabledDates ) : void
使用新值替换所有现有的禁用日期并刷新DatePicker
使用新值替换所有现有的禁用日期并刷新DatePicker
参数:
  • disabledDates : Array
    一个日期字符串数组(支持值的细节参见disabledDays 配置项)，用来禁用所有符合此模式的日期。
返回值:
  • void
DateField
setDisabledDays ( Array disabledDays ) : void
使用新值替换所有现有的禁用日期(根据索引0-6)并刷新DatePicker
使用新值替换所有现有的禁用日期(根据索引0-6)并刷新DatePicker
参数:
  • disabledDays : Array
    禁用日期的索引数组，支持值的细节参见disabledDays 配置项。
返回值:
  • void
DateField
setEditable ( Boolean value ) : void
参数:
  • value : Boolean
    True将会允许用户直接编辑表单项文本。 允许或者阻止用户直接编辑表单项文本。 如果传递了false，用户将只能使用触发按钮修改表单项的值。 将会同时向文本栏添加一个click事件，它会调用触发器。 此方法是一个运行时配置，与配置时配置'editable'选项等价。
返回值:
  • void
TriggerField
setHeight ( Mixed height ) : Ext.BoxComponent
设置此组件的高度。该方法将触发resize事件。
设置此组件的高度。该方法将触发resize事件。
参数:
  • height : Mixed
    The new height to set.
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setMaxValue ( Date value ) : void
使用新值替换所有现有的 maxValue 并刷新DatePicker
使用新值替换所有现有的 maxValue 并刷新DatePicker
参数:
  • value : Date
    可以选择的最大日期
返回值:
  • void
DateField
setMinValue ( Date value ) : void
使用新值替换所有现有的 minValue 并刷新DatePicker
使用新值替换所有现有的 minValue 并刷新DatePicker
参数:
  • value : Date
    可以选择的最小日期
返回值:
  • void
DateField
setPagePosition ( Number x , Number y ) : Ext.BoxComponent
设置组件在页面中的XY位置。 如果需要设置left和top值 ，请使用...
设置组件在页面中的XY位置。 如果需要设置left和top值 ，请使用setPosition方法。 该方法触发move事件。
参数:
  • x : Number
    The new x position
  • y : Number
    The new y position
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setPosition ( Number left , Number top ) : Ext.BoxComponent
设置组件的left和top值。设置组件的页面XY值，请使用setPagePosition方法。该方法触发...
设置组件的left和top值。设置组件的页面XY值，请使用setPagePosition方法。该方法触发move事件。
参数:
  • left : Number
    The new left
  • top : Number
    The new top
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setRawValue ( Mixed value ) : Mixed
绕过校验，直接设置底层DOM表单项的值。 设置值并进行校验，参见 setValue。
绕过校验，直接设置底层DOM表单项的值。 设置值并进行校验，参见 setValue。
参数:
  • value : Mixed
    需要设置的值
返回值:
  • Mixed
    value 被设置的表单项值
Field
setReadOnly ( Boolean readOnly ) : void
设置当前表单项的只读状态。
设置当前表单项的只读状态。
参数:
  • readOnly : Boolean
    表单项是否应该只读。
返回值:
  • void
TriggerField
setSize ( Mixed width , Mixed height ) : Ext.BoxComponent
设置BoxComponent的宽度和高度。 此方法触发resize事件...
设置BoxComponent的宽度和高度。 此方法触发resize事件。此方法可以接收单独的width或者height值作为参数， 或者你可以传递像这样的一个size对象： {width:10, height:20} 。
参数:
  • width : Mixed
    设置的新的width值。这可以是：
    • 一个Number类型指定Element新的宽度 Ext.Element.defaultUnit(默认为像素 :'px')。
    • 一个String类型用于设置width的CSS样式。
    • 一个size对象格式为 {width: widthValue, height: heightValue} 。
    • 值为 undefined 时，保留原来的width不变。
  • height : Mixed
    设置的新的height值(如果第一个参数传递了一个size对象，此参数没有必要传递)。这可以是：
    • 一个Number类型指定Element新的高度 Ext.Element.defaultUnit(默认为像素 :'px')。
    • 一个String类型用于设置height的CSS样式。也有可能不会被使用到。
    • 值为 undefined 时，保留原来的height不变。
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setValue ( String/Date date ) : Ext.form.Field
设置日期项的值。你可以传递一个日期对象，或者一个可以被解析为有效日期的 字符串，使用format 作为日期格式...
设置日期项的值。你可以传递一个日期对象，或者一个可以被解析为有效日期的 字符串，使用format 作为日期格式，与Date.parseDate使用相同的规则 (默认使用的格式是 "m/d/Y")。
用法:
//All of these calls set the same date value (May 4, 2006)
//Pass a date object:
var dt = new Date('5/4/2006');
dateField.setValue(dt);

//Pass a date string (default format):
dateField.setValue('05/04/2006');

//Pass a date string (custom format):
dateField.format = 'Y-m-d';
dateField.setValue('2006-05-04');
参数:
  • date : String/Date
    日期对象或者有效的日期字符串
返回值:
  • Ext.form.Field
    this
DateField
setVisible ( Boolean visible ) : Ext.Component
工具方法，通过使用布尔值隐藏或者显示当前组件。
工具方法，通过使用布尔值隐藏或者显示当前组件。
参数:
  • visible : Boolean
    true时显示，false时隐藏
返回值:
  • Ext.Component
    this
Component
setWidth ( Mixed width ) : Ext.BoxComponent
设置组件的宽度。 此方法触发resize事件。
设置组件的宽度。 此方法触发resize事件。
参数:
  • width : Mixed
    The new width to set.
返回值:
  • Ext.BoxComponent
    this
BoxComponent
show () : Ext.Component
显示当前组件。监听' beforeshow' 事件，返回 false 取消显示组件...
显示当前组件。监听' beforeshow' 事件，返回 false 取消显示组件。在显示组件之后触发' show' 事件。
参数:
  • 无。
返回值:
  • Ext.Component
    this
Component
suspendEvents( Boolean queueSuspended ) : void
暂停触发所有的事件。 (参看resumeEvents)
暂停触发所有的事件。（参看 resumeEvents)
参数:
  • queueSuspended : Boolean
    如果传递为true则排列好暂停的事件使得在调用 resumeEvents 后再触发它们，而不是抛弃所有暂停的事件。
返回值:
  • void
Observable
syncSize () : Ext.BoxComponent
强制组件的大小按照此组件底层元素当前的高度和宽度计算。
强制组件的大小按照此组件底层元素当前的高度和宽度计算。
参数:
  • 无。
返回值:
  • Ext.BoxComponent
    this
BoxComponent
un( String eventName, Function handler, [Object scope] ) : void
删除一个事件处理器(removeListener方法的简写形式)
删除一个事件处理器(removeListener方法的简写形式。)
参数:
  • eventName : String
    处理器关联的事件类型
  • handler : Function
    被删除的处理器 这应该是传入 addListener 中的方法的引用。
  • scope : Object
    （可选）为处理器指定的初始作用域。
返回值:
  • void
Observable
unsetActiveError ( Boolean suppressEvent ) : void
清除activeError并触发'valid'事件。此方法被clearInvalid在内部进行...
清除activeError并触发'valid'事件。此方法被clearInvalid在内部进行调用， 并且一般情况下没有必要手工调用
参数:
  • suppressEvent : Boolean
    True将禁止触发'invalid'事件
返回值:
  • void
Field
update ( Mixed htmlOrData , [ Boolean loadScripts ], [ Function callback ] ) : void
刷新组件的内部区域。
刷新组件的内部区域。
参数:
  • htmlOrData : Mixed
    如果已经通过tpl为当前组件配置了一个模板，那么 将会使用此参数来装配模板。 如果没有为当前组件配置模板，组件的内容区域将会通过Ext.Element 进行刷新。
  • loadScripts : Boolean
    (可选)只用在使用html配置时此参数才合法。默认为false。
  • callback : Function
    (可选)只用在使用html配置时此参数才合法。 当脚本加载完成时回调函数才被执行。
返回值:
  • void
Component
updateBox ( Object box ) : Ext.BoxComponent
设置此组件底层元素的盒子模型尺寸。(译者注：盒子模型是CSS术语，详细资料请自行搜索。)
设置此组件底层元素的盒子模型尺寸。(译者注：盒子模型是CSS术语，详细资料请自行搜索。)
参数:
  • box : Object
    一个格式为{x, y, width, height}的对象
返回值:
  • Ext.BoxComponent
    this
BoxComponent
validate () : Boolean
校验表单项的值
校验表单项的值
参数:
  • 无。
返回值:
  • Boolean
    如果值合法，为true,否则为false
Field
validateValue ( Mixed The ) : Boolean
使用getErrors创建一个校验出错信息数组。 如果发现了任何错误，将会使用第一个错误作为参数...
使用getErrors创建一个校验出错信息数组。 如果发现了任何错误，将会使用第一个错误作为参数调用markInvalid方法并返回 false，否则返回true。以前，要求子类提供此方法的一个实现以处理校验过程--- 从3.2开始，应该用覆盖getErrors方法的方式替代。
参数:
  • The : Mixed
    表单项的当前值
返回值:
  • Boolean
    如果所有校验都通过，此值为true，如果一个或多个校验失败，则为false
Field

公共事件

Event Defined By
added : ( Ext.Component this , Ext.Container ownerCt , number index )
当一个组件被添加到一个Ext.Container时触发
当一个组件被添加到一个Ext.Container时触发
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • ownerCt : Ext.Container
    用于组件的容器
  • index : number
    添加组件的位置
Component
afterrender : ( Ext.Component this )
在组件渲染完成之后触发...

在组件渲染完成之后触发。

afterrender事件在当前组件被rendered 结束之后、在为组件定义的所有afterRender方法执行之后 触发，并且，如果有stateful， 也在状态被保存之后才触发。

监听器将会以如下参数格式被调用:
  • this : Ext.Component
Component
autosize : ( Ext.form.Field this , Number width )
当autoSize 方法被触发时发出此事件。 根据默认的逻辑，表单项可以有也可以实际上没有...
当autoSize 方法被触发时发出此事件。 根据默认的逻辑，表单项可以有也可以实际上没有 改变尺寸，但是此事件提供了一个钩子，如果有需要， 开发者在运行时可以提供额外的逻辑来改变输入栏的大小。
监听器将会以如下的参数格式调用:
  • this : Ext.form.Field
    文本栏
  • width : Number
    表单项新宽度
TextField
beforedestroy : ( Ext.Component this )
在组件 destroyed 之前触发。 在事件监听器中返回false以停止 destroy 操作。
在组件 destroyed 之前触发。 在事件监听器中返回false以停止 destroy 操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforehide : ( Ext.Component this )
在调用hide方法隐藏组件之前触发。 在事件监听器中返回false可以停止隐藏操作。
在调用hide方法隐藏组件之前触发。 在事件监听器中返回false可以停止隐藏操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforerender : ( Ext.Component this )
在组件被rendered 之前触发。 在事件监听器中返回false可以停止render 操作。
在组件被rendered 之前触发。 在事件监听器中返回false可以停止render 操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforeshow : ( Ext.Component this )
在调用show()方法现实组件之前触发。 事件处理函数返回false可以停止show。
在调用show 方法现实组件之前触发。 事件处理函数返回false可以停止show。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforestaterestore : ( Ext.Component this , Object state )
在组件状态恢复之前触发。返回false停止恢复状态操作。
在组件状态恢复之前触发。返回false停止恢复状态操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    StateProvider返回的状态哈希值。 如果没有禁止此事件，那么状态对象会被传递给applyState。 默认情况下，这样简单地把属性值拷贝到当前组件中。 可以覆盖此方法以提供自定的状态恢复操作。
Component
beforestatesave : ( Ext.Component this , Object state )
在组件状态被保存到配置的状态提供者之前触发。 返回false可以停止保存。
在组件状态被保存到配置的状态提供者之前触发。 返回false可以停止保存。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    状态值哈希。 这由在组件上调用getState() 方法决定。 此方法必须由开发者提供，返回是否需要对状态进行描述，默认情况下， Ext.Component有一个空实现。
Component
blur : ( Ext.form.Field this )
当表单项时区输入焦点时触发。
当表单项时区输入焦点时触发。
监听器将会以如下参数被调用:
  • this : Ext.form.Field
Field
change : ( Ext.form.Field this , Mixed newValue , Mixed oldValue )
如果表单项的时发生改变，在表单项刚刚失去焦点时触发。
如果表单项的时发生改变，在表单项刚刚失去焦点时触发。
监听器将会以如下参数格式调用:
  • this : Ext.form.Field
  • newValue : Mixed
    新的值
  • oldValue : Mixed
    原始值
Field
destroy : ( Ext.Component this )
在组件被销毁之后触发。
在组件被destroyed之后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
disable : ( Ext.Component this )
在组件被设置为无效状态后触发。
在组件被设置为无效状态后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
enable : ( Ext.Component this )
当组件被设置为有效(enabled)之后触发。
当组件被设置为有效(enabled)之后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
focus : ( Ext.form.Field this )
当表单项获得输入焦点时触发。
当表单项获得输入焦点时触发。
监听器将会以如下参数格式被调用:
  • this : Ext.form.Field
Field
hide : ( Ext.Component this )
在组件被隐藏之后触发。 当调用hide 方法隐藏组件之后触发。
在组件被隐藏之后触发。 当调用hide 方法隐藏组件之后触发。
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
invalid : ( Ext.form.Field this , String msg )
在表单项被标记为非法之后触发。
在表单项被标记为非法之后触发。
监听器将会以如下参数格式调用:
  • this : Ext.form.Field
  • msg : String
    校验信息
Field
keydown : ( Ext.form.TextField this , Ext.EventObject e )
输入栏的keydown事件。 只有在 enableKeyEvents 被设置为true时才触发此事件。
输入栏的keydown事件。 只有在 enableKeyEvents 被设置为true时才触发此事件。
监听器将会以如下参数格式调用:
  • this : Ext.form.TextField
    文本栏
  • e : Ext.EventObject
TextField
keypress : ( Ext.form.TextField this , Ext.EventObject e )
输入栏的keypress事件。 只有在enableKeyEvents 被设置为true时才触发此事件。
输入栏的keypress事件。 只有在enableKeyEvents 被设置为true时才触发此事件。
Listeners will be called with the following arguments:
  • this : Ext.form.TextField
    文本栏
  • e : Ext.EventObject
TextField
keyup : ( Ext.form.TextField this , Ext.EventObject e )
输入栏keyup事件。 只有在 enableKeyEvents 被设置为true时才触发此事件。
输入栏keyup事件。 只有在 enableKeyEvents 被设置为true时才触发此事件。
监听器将会以如下的参数格式调用:
  • this : Ext.form.TextField
    文本栏
  • e : Ext.EventObject
TextField
move : ( Ext.Component this , Number x , Number y )
在组件移动之后触发。
在组件移动之后触发。
监听器将会用如下的参数格式来调用:
  • this : Ext.Component
  • x : Number
    The new x position
  • y : Number
    The new y position
BoxComponent
removed : ( Ext.Component this , Ext.Container ownerCt )
当一个组件被从Ext.Container容器中删除时触发
当一个组件被从Ext.Container容器中删除时触发
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • ownerCt : Ext.Container
    持有组件的容器
Component
render : ( Ext.Component this )
在组件被渲染之后触发。
在组件被 rendered(渲染) 之后触发。
监听器将以如下的参数格式被调用:
  • this : Ext.Component
Component
resize : ( Ext.Component this , Number adjWidth , Number adjHeight , Number rawWidth , Number rawHeight )
在组件被调整大小之后触发。
在组件被调整大小之后触发。
监听器将以如下的参数格式被调用:
  • this : Ext.Component
  • adjWidth : Number
    这是width调整后的值
  • adjHeight : Number
    这是height调整后的值
  • rawWidth : Number
    这是width原来的值
  • rawHeight : Number
    这是height原来的值
BoxComponent
select : ( Ext.form.DateField this , Date date )
当通过日期选择器选中一个日期时触发。
当通过日期选择器选中一个日期时触发。
监听器将会以如下参数格式调用:
  • this : Ext.form.DateField
  • date : Date
    选中的日期
DateField
show : ( Ext.Component this )
在调用show 方法显示组件之后触发。
在调用show 方法显示组件之后触发。
监听器将会用如下的参数格式被调用:
  • this : Ext.Component
Component
specialkey : ( Ext.form.Field this , Ext.EventObject e )
当任何和导航有关的键被按下时触发(上下左右箭头, tab, 回车,esc, 等等) is pressed. 处理其它按键参见...
当任何和导航有关的键被按下时触发(上下左右箭头, tab, 回车,esc, 等等) is pressed. 处理其它按键参见 Ext.Panel.keys或者 Ext.KeyMap。 你可以检测 Ext.EventObject.getKey 以便获知哪个键被按下。例如：
var form = new Ext.form.FormPanel({
    ...
    items: [{
            fieldLabel: 'Field 1',
            name: 'field1',
            allowBlank: false
        },{
            fieldLabel: 'Field 2',
            name: 'field2',
            listeners: {
                specialkey: function(field, e){
                    // e.HOME, e.END, e.PAGE_UP, e.PAGE_DOWN,
                    // e.TAB, e.ESC, arrow keys: e.LEFT, e.RIGHT, e.UP, e.DOWN
                    if (e.getKey() == e.ENTER) {
                        var form = field.ownerCt.getForm();
                        form.submit();
                    }
                }
            }
        }
    ],
    ...
});
监听器将会以如下参数格式被调用:
  • this : Ext.form.Field
  • e : Ext.EventObject
    事件对象
Field
staterestore : ( Ext.Component this , Object state )
组件状态被存储之后触发。
组件状态被存储之后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    StateProvider返回的状态哈希值。 如果没有禁止此事件，那么状态对象会被传递给applyState。 默认情况下，这样简单地把属性值拷贝到当前组件中。 可以覆盖此方法以提供自定的状态恢复操作。
Component
statesave : ( Ext.Component this , Object state )
在组件状态被保存到所配置的状态提供者之后触发。
在组件状态被保存到所配置的状态提供者之后触发。
监听器将会用如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    状态值hash。 这是由在足见上调用getState() 方法决定的。 开发者必须提供此方法以返回是否需要恢复状态，默认情况下， Ext.Component有一个空实现。
Component
valid : ( Ext.form.Field this )
在表单项被校验无错误之后触发。
在表单项被校验无错误之后触发。
监听器将会以如下参数格式被调用:
  • this : Ext.form.Field
Field


Observable
    Component
      BoxComponent
        Field
          DisplayField

Class Ext.form.DisplayField

包: | Ext.form
定义类的文件: | DisplayField.js
类: | DisplayField
继承自: | Field
一个仅仅用来显示(display-only)的文本栏，它将不会被校验和提交。

配置项

Config Options Defined By
allowDomMove : Boolean
在渲染时组件是否可以移动Dom节点(默认为true)。
Component
anchor : String
注: 这个配置只用于该组件被包含在一个已使用AnchorLayout...

注: 这个配置只用于该组件被包含在一个已使用 AnchorLayout (或者其子类)配置的Container时。 基于布局管理器，例如：

  • Ext.form.FormPanel
  • 指定 layout: 'anchor' // or 'form', or 'absolute'

参见 Ext.layout.AnchorLayout. anchor 。

BoxComponent
applyTo : Mixed
指定一个元素的id、一个DOM元素或者一个已经存在并被渲染到DIV中的元素，此DIV已经被...

指定一个元素的id、一个DOM元素或者一个已经存在并被渲染到DIV中的元素，此DIV已经被 渲染到document中，并且为当前组件指定了一些结构化的标签。

  • 描述 :
      当使用了 applyTo， 在主元素中也可以用id或者CSS类名来指定组件的托管部分， 并且，如果可以的话，创建的组件可能也会试图在那个标签中创建它的子组件。
  • 注意 :
      当使用此配置项时，无需调用render()方法。
      如果指定了applyTo属性，任何传递给 renderTo 的值都会被忽略，并且目标元素的父节点将会自动被用作组件的容器。
Component
autoCreate : String/Object
一个DomHelper 元素描述，或者为true使用一个默认元素描述。 用来创建封装当前组件的...

一个DomHelper 元素描述，或者为true使用一个默认元素描述。 用来创建封装当前组件的 Element。 细节参见 autoEl 。 默认为:

                                {tag: 'input', type: 'text', size: '20', autocomplete: 'off'}
Field
autoScroll : Boolean
如果值为true，将会在该元素上使用overflow:'auto'配置，并且在必要的时候...
如果值为true，将会在该元素上使用overflow:'auto'配置，并且在必要的时候自动显示滚动条，否则，溢出部分的组件都会被切除(默认值为 false)。
BoxComponent
autoShow : Boolean
如果组件需要检测隐藏CSS属性(如 'x-hidden' 或者 'x-hide-display')并且在渲染时删除...
如果组件需要检测隐藏CSS属性(如 'x-hidden' 或者 'x-hide-display')并且在渲染时删除它们 (默认为false)，设置此值为true。
Component
boxMaxHeight : Number
设置组件的最大高度值...

设置组件的最大高度值。

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

BoxComponent
boxMaxWidth : Number
设置组件的最大宽度值...

设置组件的最大宽度值。

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

BoxComponent
boxMinHeight : Number
设置组件的最小高度值...

设置组件的最小高度值。

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

BoxComponent
boxMinWidth : Number
设置组件的最小宽度值...

设置组件的最小宽度值。

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

BoxComponent
bubbleEvents : Array
一个事件数组，当这些事件被触发时，将会被冒泡到所有父容器中。参见....

一个事件数组，当这些事件被触发时，将会被冒泡到所有父容器中。参见 Ext.util.Observable.enableBubble。 默认为 []。

Component
clearCls : String
应用到特殊的clearing div的CSS类， 这个clearing div直接渲染到每个form field的包装器后面...

应用到特殊的clearing div的CSS类， 这个clearing div直接渲染到每个form field的包装器后面，以提供 清除field的功能(默认为 'x-form-clear-left')。

注意: 只有在当前组件被渲染到一个使用FormLayout 布局(例如 Ext.form.FormPanel 或者指定 layout:'form')的 容器中、或者是指定了一个fieldLabel 、或者指定isFormField=true 时此配置才有效。

另请参见 Ext.layout.FormLayout. fieldTpl。

Component
cls : String
一个可选的额外CSS类，它将被添加到当前组件的元素上(默认为'')...
一个可选的额外CSS类，它将被添加到当前组件的元素上(默认为'')。 此属性对于在组件上，或者它的任何使用标准CSS规则的孩子节点上， 添加定制的样式非常有用。
Field
contentEl : String
(可选)指定一个已存在的HTML元素，或者一个已存在HTML元素的...

(可选)指定一个已存在的HTML元素，或者一个已存在HTML元素的 id ，它们将被用作当前组件的内容。

  • 描述 :
    此配置选项被用来将一个已存在的HTML元素 插入到一个新组件(在组件渲染之后它简单地移动DOM元素) 的layout元素中，使它成为该组件的内容。
  • 注意 :
    指定的HTML元素将被append到组件的layout元素中， 在所有配置的 HTML 被插入之后， 并且，这样的话，在render事件 被触发时，document中将不再包含此元素。
    指定的HTML元素将不会参与组件所有可能使用的 layout 过程(译者注：指这些HTML元素 不会参与布局操作)。 它仅是HTML而已。布局操作实在孩子 items 上进行的。
    添加 x-hidden 或者 x-hide-display CSS类，以防在内容渲染到panel时发生闪烁。
Component
ctCls : String
一个可选的外部CSS样式，添加到这个组件的容器(默认值为 '')。 这个方法对于使用标准的CSS规则...

一个可选的外部CSS样式，添加到这个组件的容器(默认值为 '')。 这个方法对于使用标准的CSS规则，为组件或它的任何一个子组件添加特定的样式非常有用。 参见 Ext.layout.ContainerLayout和 extraCls 。

注意: ctCls 默认为 ''期望如下的类，它们将指定一个默认值:

  • Box Layout : 'x-box-layout-ct'
使用一个额外的CSS类配置以上的Class，它是append到默认对象上的。例如， 对于BoxLayout (Hbox and Vbox):
                                ctCls: 'x-box-layout-ct custom-class'

Component
data : Mixed
初始化数据集，它将被应用到 tpl 上以刷新组件的内容区域。
Component
disabledClass : String
当组件处于无效状态时添加到组件上的CSS类(默认为 'x-item-disabled')。
Component
fieldClass : String
表单项的默认CSS类(默认为 "x-form-display-field")
DisplayField
fieldLabel : String
紧靠此field显示的标签文本(默认值为 '')。注意...

紧靠此field显示的标签文本(默认值为 '')。

注意:只有在当前组件被渲染到一个使用FormLayout 的容器中时，此配置才有效。 (例如 Ext.form.FormPanel 或 指定 layout:'form')。

另请参见 hideLabel 、 Ext.layout.FormLayout和 fieldTpl。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Name'
    }]
});
Component
flex : Number
注: 这个配置只用于该组件被包含在一个已使用BoxLayout配置的Container中时...

注: 这个配置只用于该组件被包含在一个已使用BoxLayout配置的Container中时。通过计算每一个子组件的flex值所占全部flex值之和的比例，来决定子组件的宽(HBoxLayout)高(VBoxlayout)。 任何子项的 flex = 0 或 flex = undefined 将不被设置(初始值大小将不被改变)。

BoxComponent
focusClass : String
当表单项获得焦点时使用的CSS类(默认为 'x-form-focus')
Field
height : Number
组件的高度(默认值为 auto)。注:如果想使用百分比的方式...
组件的高度(默认值为 auto)。注:如果想使用百分比的方式来设置值，请查看 Ext.Component.anchor。
BoxComponent
hidden : Boolean
如果当前组件处于隐藏状态，此值为true。Read-only。
Component
hideLabel : Boolean
true时完全隐藏label元素 ( label 和 separator)。 默认为 false。 默认情况下，即使你不指定...

true时完全隐藏label元素 ( label 和 separator)。 默认为 false。 默认情况下，即使你不指定 fieldLabel 它的空间仍然会被保留，这样这块区域会与其它确实拥有label的区域位于同一排。 讲此值设置为 true 将导致此区域不再保留此空间。

注意: 参见 clearCls 的注释。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield'
        hideLabel: true
    }]
});
Component
hideMode : String
组件如何隐藏，支持的值有： 'visibility' (css visibility), 'offsets' (位置偏移量为负值) 和...

组件如何隐藏，支持的值有： 'visibility' (css visibility), 'offsets' (位置偏移量为负值) 和 'display' (css display).

注意:一般首选默认值 'display'，因为当组件第一次显示的时候它们会自动进行布局 (隐藏的时候不会调整尺寸)。

Component
hideParent : Boolean
此值为true时，当调用hide/show方法时，将会hide和show组件的容器...
此值为true时，当调用hide/show方法时，将会hide和show组件的容器；false时将会 hide和show组件自身(默认为false)。例如，这可以用作window上隐藏按钮的一种 快捷操作，通过设置此按钮的hideParent:true，然后把它添加到window上。
Component
html : String/Object
一个HTML片段，或者一个 DomHelper 描述，用作layout元素的内容(默认为'')。...
一个HTML片段，或者一个 DomHelper 描述，用作layout元素的内容(默认为'')。 这个HTML内容在组件渲染之后才被添加，所以在 render 出发的时候，document中尚未包含此HTML。 但是这个内容将会在所有配置的 contentEl 之前被插入到body标签中。
Component
htmlEncode : Boolean
false 将会在渲染时跳过对文本进行HTML-编码 (默认为false)。...
false 将会在渲染时跳过对文本进行HTML-编码 (默认为false)。 如果你想要在表单项的innerHTML中包含标签，而不是通过默认逻辑将它们作为 字符串字面值进行渲染，此方法可能非常有用。
DisplayField
id : String
当前组件唯一的id(默认为auto-assigned id)...

当前组件唯一的id(默认为auto-assigned id)。 如果你需要在以后访问组件，而又没有一个有效的组件对象引用，那么你需要指定一个 id( 也就是，使用Ext. getCmp方法 )。

注意，此id也将被用作组件底层HTML标签的id，这些标签被渲染到页面中。 这将允许你编写基于id的CSS规则，以独立地描述指定的实例；并且，也可以通过 组件父标签的id选中子元素。

注意:为了避免与唯一的id 产生重复， 请参见 itemId 和 ref 。

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

Component
invalidClass : String
当把表单项标记为非法时所使用的CSS类(默认为'x-form-invalid')
Field
invalidText : String
当把一个表单项标记为非法状态并且没有提供消息时所使用的出错文本...
当把一个表单项标记为非法状态并且没有提供消息时所使用的出错文本 (默认为'The value in this field is invalid')
Field
itemCls : String
注意: 只有在当前组件被渲染到一个使用FormLayout 布局的 容器中时此配置才有效...

注意: 只有在当前组件被渲染到一个使用FormLayout 布局的 容器中时此配置才有效。 (例如Ext.form.FormPanel 或者指定 layout:'form')。

一个附加的CSS类，应用到div上，包装当前field的表单元素。 如果提供了此参数， field级上的itemCls将会覆盖 container级上提供的 默认itemCls。 为itemCls指定的值将会被添加默认的 类('x-form-item')。

既然它被应用到项目的包装器上(参见 Ext.layout.FormLayout。 fieldTpl)， 它将允许你编写能应用到此field、label(如果有指定)、或者field内部任何其它元素的标准CSS规则。

注意: 参考 fieldLabel的注释。 .

示例用法:

// Apply a style to the field's label:
<style>
    .required .x-form-item-label {font-weight:bold;color:red;}
</style>

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Name',
        itemCls: 'required' //this label will be styled
    },{
        xtype: 'textfield',
        fieldLabel: 'Favorite Color'
    }]
});
Component
itemId : String
当没有可利用的对象引用时，itemId可以作为第二选择，用来获得一个组件的引用， 代替 ...

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

var c = new Ext.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'); // 与 Ext.getCmp()不同

p2 = p1.ownerCt.getComponent('p2'); // 通过兄弟对象获得引用

另请参见 id 和 ref 。

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

Component
labelSeparator : String
每个fieldLabel 文本后面现实的分隔符。 此属性可以在多个层次上进行配置...

每个fieldLabel 文本后面现实的分隔符。 此属性可以在多个层次上进行配置。优先顺序为：

  • field / component level
  • container level
  • layout level (默认为冒号 ':')
如不需要为当前field的label显示分隔符，指定一个空字符串''即可。

注意:参见 clearCls 的注释。

另请参见 hideLabel 和 Ext.layout.FormLayout。 fieldTpl。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    layoutConfig: {
        labelSeparator: '~'   // layout config has lowest priority (defaults to ':')
    },
    labelSeparator: '>>',     // config at container level
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Field 1',
        labelSeparator: '...' // field/component level config supersedes others
    },{
        xtype: 'textfield',
        fieldLabel: 'Field 2' // labelSeparator will be '='

    }]
});
Component
labelStyle : String
一个CSS样式描述字符串，它将直接应用到当前field的label上...

一个CSS样式描述字符串，它将直接应用到当前field的label上。 如果有设置，默认为容器的labelStyle值(例如 Ext.layout.FormLayout.labelStyle , 或者 '')。

注意:参见 clearCls 的注释。

另请参见 hideLabel 和 Ext.layout.FormLayout. fieldTpl。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Name',
        labelStyle: 'font-weight:bold;'
    }]
});
Component
listeners : Object
一个包含一个或多个事件处理器的配置对象，会在初始化的时候被添加到目标对象上...

一个包含一个或多个事件处理器的配置对象，会在初始化的时候被添加到目标对象上。 该配置对象应该是一个有效的监听器配置对象就像 addListener例子中指定的一样可一次附加多个处理器。

ExtJs Components上的DOM事件

一些 ExtJs Component 类导出时会选择一些DOM事件(例如 "click", "mouseover" 等等), 这通常只是在有额外的值可以被添加时发生。例如DataView类的 click事件会传递被点击的节点。也可以直接在Component的HTMLElementevent上访问DOM事件，但必需在Component被渲染后监听器才能添加到Element 上。可以按照以下步骤添加插件:

// 插件会用一个监听器配置对象进行配置。
//该组件会被添加到所有处理方法的参数列表上。
Ext.DomObserver = Ext.extend(Object, {
    constructor: function(config) {
        this.listeners = config.listeners ? config.listeners : config;
    },

    // 组件将自己传递进了插件的初始化方法里
    init: function(c) {
        var p, l = this.listeners;
        for (p in l) {
            if (Ext.isFunction(l[p])) {
                l[p] = this.createHandler(l[p], c);
            } else {
                l[p].fn = this.createHandler(l[p].fn, c);
            }
        }

        // 渲染后立即添加监听器到元素上
        c.render = c.render.createSequence(function() {
            var e = c.getEl();
            if (e) {
                e.on(l);
            }
        });
    },

    createHandler: function(fn, c) {
        return function(e) {
            fn.call(this, e, c);
        };
    }
});

var combo = new Ext.form.ComboBox({

    // 元素被点击后折叠
    plugins: [ new Ext.DomObserver({
        click: function(evt, comp) {
            comp.collapse();
        }
    })],
    store: myStore,
    typeAhead: true,
    mode: 'local',
    triggerAction: 'all'
});

Observable
margins : Object
注:此配置只用于该组件展现在一个使用BorderLayout...

注:此配置只用于该组件展现在一个使用BorderLayout 或 BoxLayout的两个子类之一作为布局的容器。

这个margins对象在该组件中的格式为：

{top: (top margin),right: (right margin),bottom: (bottom margin),left: (left margin)}

也可以是一个字符串，中间用空格分隔，margin值为数字。 把matches中每一个值的次序跟CSS中margin值的排列方式相对应：

  • 如果只有一个值，它适用于所有方面。
  • 如果有两个值，top和bottom的边框设置为第一个值，left和right设置为第二个值。
  • 如果有三个值，top设置为第一个值，left和right设置为第二个值，bottom设置为第三个值。
  • 如果有四个值，分别设置为top, right, bottom, left。

默认值:

{top:0, right:0, bottom:0, left:0}
BoxComponent
msgFx : String
实验性参数 当在表单项下显示校验消息时使用的效果(默认为'normal')。
Field
msgTarget : String
通过markInvalid 设置的消息文本应该显示的位置。 必须是如下值之一：...

通过markInvalid 设置的消息文本应该显示的位置。 必须是如下值之一：

  • qtip 当用户鼠标滑过表单项时，显示一个包含消息的快速提示。 这是默认情况。
    为了使此参数能工作，必须调用 Ext.QuickTips.init。
  • title 在弹出的默认浏览器标题属性上显示消息。
  • under 在表单项之下添加一块div，包含出错消息。
  • side 在表单项右边添加一个出错图标，当鼠标滑过时弹出并显示一个消息。
  • [element id] 在指定元素的innerHTML中直接添加出错消息。
Field
name : String
表单项的HTML name属性(默认为'')。 注意: 如果需要当前表单项自动被包含在...
表单项的HTML name属性(默认为'')。 注意: 如果需要当前表单项自动被包含在 form submit()中，必须设置此参数。
Field
overCls : String
一个可选的额外的CSS类，它将在鼠标移过元素时被添加到组件上...
一个可选的额外的CSS类，它将在鼠标移过元素时被添加到组件上，鼠标移出时 删除。(默认为'')。此属性对于在组件上，或者它的任何使用标准CSS规则的孩子节点上， 添加定制的'active' 或者 'hover'样式非常有用。
Component
pageX : Number
如果该组件被包含在一个指定位置的容器中，这个值表示页面级的x坐标值（译者注：在有滚动条的情况下这个值很有用）。
BoxComponent
pageY : Number
如果该组件被包含在一个指定位置的容器中，这个值表示页面级的y坐标值（译者注：在有滚动条的情况下这个值很有用）。
BoxComponent
plugins : Object/Array
一个对象或者一个对象数组，为组件提供特殊的功能 ...
一个对象或者一个对象数组，为组件提供特殊的功能。 对一个合法的插件唯一的要求是它含有一个init()方法， 能接收一个Ext.Component型的参数。 当组件被创建时，如果有可用的插件，组件将会调用每个插件的init方法， 并将自身的引用作为方法参数传递给它。然后，每个插件就可以调用方法或者响应组件上的事件， 就像需要的那样提供自己的功能。
Component
preventMark : Boolean
true将会禁止 把表单项标记为非法。默认为false.
Field
ptype : String
需要创建配置的ptype。 当传递一个配置对象给构造函数时...
需要创建配置的ptype。 当传递一个配置对象给构造函数时，此配置选项不会被使用。 只有在使用懒初始化的时候此配置项才会被使用， 此时Plugin不是 通过一个完整的实例组件，而是通过一个Component配置指定的。 在渲染时，将会查找ptype以决定创建何种类型的Plugin。

如果你创建自己的Plugin，你可以通过 Ext.ComponentMgr.registerPlugin 对它们进行注册，以便能利用懒初始化和渲染机制。
Component
ref : String
一个路径描述，与组件的 ownerCt 相关，它描述了把当前组件的命名引用放置到哪个父容器中去。...

一个路径描述，与组件的 ownerCt 相关，它描述了把当前组件的命名引用放置到哪个父容器中去。

祖先的坐标路径可以通过'/'字符进行分隔。 例如，将一个Toolbar Button的引用放入 拥有此Toolbar的Panel中:

var myGrid = new Ext.grid.EditorGridPanel({
    title: 'My EditorGridPanel',
    store: myStore,
    colModel: myColModel,
    tbar: [{
        text: 'Save',
        handler: saveChanges,
        disabled: true,
        ref: '../saveButton'
    }],
    listeners: {
        afteredit: function() {
//          The button reference is in the GridPanel
            myGrid.saveButton.enable();
        }
    }
});

在上面的代码中，如果 ref 是 'saveButton' ，那么引用将会被放置到Toolbar中。 ref 中的每个'/' 都会从组件的 ownerCt 向上移动一级。

另请参见 added 和 removed 事件。

Component
region : String
注: 此配置只用于该组件展现在一个布局为BorderLayout的容器中...

注: 此配置只用于该组件展现在一个布局为BorderLayout的容器中(例如指定layout:'border')。

详见Ext.layout.BorderLayout。

BoxComponent
renderTo : Mixed
该值可以是一个节点的id、一个DOM节点或者一个已存在的元素...

该值可以是一个节点的id、一个DOM节点或者一个已存在的元素， 组件将会被渲染到其中。

  • 注意 :
      如果组件不是一个Container 的子项目时， 不要使用此选项。 渲染和管理它的子项目是一个Container 的layout manager的责任。
      当使用此配置项时，无需调用render()方法。

另请参见 render 。

Component
stateEvents : Array
一个事件数组，当它们被触发时，组件需要保存自己的状态(默认值为 none)...

一个事件数组，当它们被触发时，组件需要保存自己的状态(默认值为 none)。 它们可以是任何该组件支持的事件类型，包括浏览器事件和 自定义事件(例如['click', 'customerchange'])。

对于保存和恢复组件状态的详细解释，参见 stateful

Component
stateId : String
为该组件指定的唯一的id值，它被用作管理组件状态的目的...
为该组件指定的唯一的id值，它被用作管理组件状态的目的。 (如果设定了id，默认值为组件自己的id，否则，如果组件使用自动生成的id，此值为null)。

对于保存和反解析组件状态的解释，参见 stateful 。

Component
stateful : Boolean
一个标志参数，它将引起组件在启动时尝试从一个保存的状态中恢复内部状态参数...

一个标志参数，它将引起组件在启动时尝试从一个保存的状态中恢复内部状态参数。 组件必须要么拥有一个 stateId 或者 id ，它们被分配给需要被管理的状态属性。 在跨页面加载时，不保证自动生成的id属性的稳定性， 并且，不能依赖此id来保存和恢复一个组件的相同状态。

为了保存状态的操作能够工作，状态管理器的提供者必须 被设置成一个Ext.state.Provider 的实现类，它覆盖了set 和get 方法，以便保存和恢复name/value对。 有一个内置的Ext.state.CookieProvider 可用。

为当前页面设置状态提供者:

Ext.state.Manager.setProvider(new Ext.state.CookieProvider({
    expires: new Date(new Date().getTime()+(1000*60*60*24*7)), //7 days from now
}));

当 stateEvents 配置项中其中之一的事件被触发时， 一个状态可保存的组件将试图保存其状态。

保存状态时，一个可保存状态的组件首先需要通过调用 getState 方法来序列化它的状态。 默认情况下，此函数什么事都不做。 开发者必须提供一个实现，返回一个hash对象，它描述了组件可恢复的状态。

getState方法产生的值将会传递给 Ext.state.Manager.set 方法，它使用配置的 Ext.state.Provider 来保存对象，以组件的 stateId 为key，或者，如果此值（指stateId）没有指定时， 使用它的 id 作为key。

在进行构造时，一个可保存状态的组件试图通过调用 Ext.state.Manager.get方法来 恢复它的状态，传递 stateId 或者，如果此值（指stateId）没有指定时， 使用它的 id 作为参数。

结果对象被传递给 applyState 。 applyState 的默认实现只是简单地把属性拷贝到对象中， 但是开发者可以覆盖此方法以支持更多行为。

通过向 beforestaterestore, staterestore, beforestatesave 和 statesave 事件上绑定监听器，你可以在保存和恢复状态时进行额外的处理。

Component
style : String
被添加到组件元素的特定样式。 必须是按照...
被添加到组件元素的特定样式。 必须是按照 Ext.Element.applyStyles 类指定格式的合法参数值。

new Ext.Panel({
    title: 'Some Title',
    renderTo: Ext.getBody(),
    width: 400, height: 300,
    layout: 'form',
    items: [{
        xtype: 'textarea',
        style: {
            width: '95%',
            marginBottom: '10px'
        }
    },
        new Ext.Button({
            text: 'Send',
            minWidth: '100',
            style: {
                marginBottom: '10px'
            }
        })
    ]
});
Component
submitValue : Boolean
False将会清除表单项的name属性，这样在提交表单时它将不会被提交。 默认为true。
Field
tabIndex : Number
该表单项的tabIndex。 注意，此属性仅仅应用到被渲染好的，而不是那些通过applyTo...
该表单项的tabIndex。 注意，此属性仅仅应用到被渲染好的，而不是那些通过applyTo创建的表单项 (默认为undefined)。
Field
tabTip : String
注: 这个配置只用于当该组件作为TabPanel的一个子项目时使用...

注: 这个配置只用于当该组件作为TabPanel的一个子项目时使用。

一个String类型的innerHTML(支持html标签)，当鼠标放在该选项上的时，显示一个tooltip。为了tips能够被渲染，Ext.QuickTips.init()必须被提前调用。
BoxComponent
tpl : Mixed
一个 Ext.Template , Ext.XTemplate 或者一个用来形成一个Ext.XTemplate的字符串数组...
一个 Ext.Template , Ext.XTemplate 或者一个用来形成一个Ext.XTemplate的字符串数组。 与 data 和 tplWriteMode 配置项协同使用。
Component
tplWriteMode : String
刷新组件的内容区域时使用的Ext.(X)Template方式。 默认为'overwrite' (参见 Ext.XTemplate.overwrite )。
刷新组件的内容区域时使用的Ext.(X)Template方式。 默认为'overwrite' (参见 Ext.XTemplate.overwrite )。
Component
value : Mixed
当前表单项的初始化值(默认为undefined).
Field
width : Number
组件的宽度(默认值为 auto)。注:如果想使用百分比的方式...
组件的宽度(默认值为 auto)。注:如果想使用百分比的方式来设置值，请查看 Ext.Component.anchor。
BoxComponent
x : Number
如果被包含在一个指定位置的容器中，这个值表示x(left)坐标值。
BoxComponent
xtype : String
需要创建配置的xtype。 当传递一个配置对象给构造函数时...
需要创建配置的xtype。 当传递一个配置对象给构造函数时，此配置选项不会被使用。 只有在使用懒初始化的时候此配置项才会被使用，此时容器的子项目不是 通过一个完整的实例组件，而是通过一个Component配置指定的。 在渲染时，将会查找xtype以决定创建何种类型的子组件。

预定义的xtype列表如下： here。

如果你继承Component创建你自己的组件，你需要使用Ext.ComponentMgr.registerType 对它们进行注册，以便利用懒初始化和渲染机制。
Component
y : Number
如果被包含在一个指定位置的容器中，这个值表示y(top)坐标值。
BoxComponent

公共属性

Property Defined By
disabled : Boolean
当前组件处于无效状态时为true。 Read-only.
Component
el : Ext.Element
封装了当前组件的Ext.Element。 Read-only。通常情况下，这将是一个<DIV>元素，它由此类的...

封装了当前组件的Ext.Element。 Read-only。

通常情况下，这将是一个<DIV>元素，它由此类的 onRender方法创建，但是它可以通过使用 autoEl 配置项进行覆盖。

注意: 直到组件渲染完成此元素都将处于无效状态。

如需向当前组件的 DOM事件(而不是当前组件自己的Observable事件)添加监听器， 更多建议，参见 listeners 配置项，或者直接使用一个render监听器:

new Ext.Panel({
    title: 'The Clickable Panel',
    listeners: {
        render: function(p) {
            // Append the Panel to the click handler's argument list.
            p.getEl().on('click', handlePanelClick.createDelegate(null, [p], true));
        },
        single: true  // Remove the listener after first invocation
    }
});

另请参见 getEl

Component
hidden : Boolean
如果当前组件处于隐藏状态，此值为true。Read-only。
Component
initialConfig : Object
当前组件的初始化配置描述。 Read-only。
Component
label : Ext.Element
关联到当前表单项的label元素。 只有在当前表单项已经被一个Ext.layout.FormLayout ...

关联到当前表单项的label元素。 只有在当前表单项已经被一个Ext.layout.FormLayout 布局管理器渲染之后才可用。

Field
originalValue : mixed
表单项原来的值，它是在value 中配置的；或者，如果 trackResetOnLoad 设置为...
表单项原来的值，它是在value 中配置的；或者，如果 trackResetOnLoad 设置为 true 时，通过表单加载操作最后一次加载的。
Field
ownerCt : Ext.Container
组件所属的Container (默认为undefined，当前组件被添加到一个容器中时此值被自动设置)...
组件所属的Container (默认为undefined，当前组件被添加到一个容器中时此值被自动设置)。 Read-only。

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

Component
refOwner : Ext.Container
如果当前组件是一个容器的孩子，并且是通过一个 ref 配置项被注册的，则此值为 ref 引用被插入到的祖先容器。
如果当前组件是一个容器的孩子，并且是通过一个 ref 配置项被注册的，则此值为 ref 引用被插入到的祖先容器。
Component
rendered : Boolean
如果当前组件已经被渲染了，此值为true。Read-only.
Component
startValue : mixed
表单项最后一次获得焦点时所拥有的值。 这就是传递给change 事件的值...

表单项最后一次获得焦点时所拥有的值。 这就是传递给change 事件的值，此事件在值被改变并失去焦点时触发。

直到表单项被访问之前此值都是undefined 与originalValue 进行比较。

Field

公共方法

Method Defined By
DisplayField ( Object config )
创建一个新的DisplayField。
创建一个新的DisplayField。
参数:
  • config : Object
    配置选项
返回值:
  • void
DisplayField
addClass ( string cls ) : Ext.Component
为组件底层的元素添加CSS样式。
为组件底层的元素添加CSS样式。
参数:
  • cls : string
    需要添加的CSS样式的class名称
返回值:
  • Ext.Component
    this
Component
addEvents( Object|String o, string Optional. ) : void
添加指定的事件到事件列表上，事件会被该Observable触发。
添加指定的事件到事件列表上，事件会被该Observable触发。
参数:
  • o : Object|String
    以事件名作为属性true作为值的对象 或者当多个事件名被分开的传递时则为第一个事件名。
  • Optional. : string
    事件名被分开的传递时则为事件名。 用法:
    this.addEvents('storeloaded', 'storecleared');
返回值:
  • void
Observable
addListener( String eventName, Function handler, [Object scope], [Object options] ) : void
给对象添加事件处理器。
给对象添加事件处理器。
参数:
  • eventName : String
    监听的事件名。
  • handler : Function
    事件调用的方法
  • scope : Object
    （可选）处理方法执行的作用域 (this的引用 reference)。 如果被忽略。默认为触发事件的对象。
  • options : Object
    （可选）包含处理器配置和属性的对象。 可能包含以下的属性:
    • scope : Object
      处理方法执行的作用域(this的引用) 。 如果被忽略。默认为触发事件的对象。
    • delay : Number
      在触发事件后延迟调用处理器的毫秒数。
    • single : Boolean
      如果为True则添加一个处理器来处理下一次的事件触发（仅一次），然后移除自己。
    • buffer : Number
      使得处理器延迟指定毫秒数后预定的运行在 一个Ext.util.DelayedTask中 。 如果事件在时间内再一次被触发，原始的处理器不会被调用，但是新的处理器会预定的在他的位置上。
    • target : Observable
      如果事件在目标的Observable上触发则仅仅调用处理器， 否则 事件会从子类的Observable上冒泡

    组合选项
    使用这些选项参数,可能会组合出不同类型的监听器：

    一个延迟的，一次性的监听器。

    myDataView.on('click', this.onClick, this, {
single: true,
delay: 100
});

    一次调用附加多个处理器
    该方法同样支持传递一个包含指定的多个处理器的属性的配置对象参数。

    myGridPanel.on({
'click' : {
    fn: this.onClick,
    scope: this,
    delay: 100
},
'mouseover' : {
    fn: this.onMouseOver,
    scope: this
},
'mouseout' : {
    fn: this.onMouseOut,
    scope: this
}
});

    或者一个简写的语法：

    myGridPanel.on({
'click' : this.onClick,
'mouseover' : this.onMouseOver,
'mouseout' : this.onMouseOut,
 scope: this
});
返回值:
  • void
Observable
applyToMarkup ( String/HTMLElement el ) : void
将此组件添加到已存在的有效的HTML标签中。 使用该方法时，无需再调用render()方法。
将此组件添加到已存在的有效的HTML标签中。 使用该方法时，无需再调用render()方法。
参数:
  • el : String/HTMLElement
返回值:
  • void
Component
clearInvalid () : void
清除当前表单项上的所有非法styles/messages(样式/消息)
清除当前表单项上的所有非法styles/messages(样式/消息)
参数:
  • 无。
返回值:
  • void
Field
cloneConfig ( Object overrides ) : Ext.Component
默认使用原先传递给当前实例的配置值克隆当前组件。
默认使用原先传递给当前实例的配置值克隆当前组件。
参数:
  • overrides : Object
    一个新的配置项，包含需要覆盖到克隆版本的所有属性。 可以传递一个id参数给此对象，否则将自动生成一个新的id以避免发生重复。
返回值:
  • Ext.Component
    当前组件的克隆副本
Component
destroy () : void
通过如下方法销毁对象：删除所有的事件监听器、将组件的元素从DOM树中删除...
通过如下方法销毁对象：删除所有的事件监听器、将组件的元素从DOM树中删除（如果可以）、 将组件从它的 Ext.Container（如果可用）中删除、 并且将它从Ext.ComponentMgr中 注销。 销毁操作一般由框架自动完成，一般情况下不需要直接调用该方法。
参数:
  • 无。
返回值:
  • void
Component
disable () : Ext.Component
将组件置为无效状态，并出发'disable'事件。
将组件置为无效状态，并出发'disable'事件。
参数:
  • 无。
返回值:
  • Ext.Component
    this
Component
enable () : Ext.Component
将组件置为有效状态并触发'enable'事件。
将组件置为有效状态并触发'enable'事件。
参数:
  • 无。
返回值:
  • Ext.Component
    this
Component
enableBubble( String/Array events ) :void
是否现在使得事件会被该Observable触发并调用 this.getBubbleTarget()方法在拥有者的继承树...

是否现在使得事件会被该Observable触发并调用 this.getBubbleTarget()方法在拥有者的继承树中冒泡。Observable的基础类中没有该方法的实现。

该方法一般被Ext.Components用来冒泡事件到拥有者的容器。参看Ext.Component.getBubbleTarget默认的实现 在Ext.Component中返回组件的直接拥有者。但是如果需要的是一个已知的目标，该方法可以被重写来更快的访问需求的目标。

例子:

Ext.override(Ext.form.Field, {
    // 添加方法到Field的initComponent上改变事件为冒泡
    initComponent : Ext.form.Field.prototype.initComponent.createSequence(function() {
        this.enableBubble('change');
    }),

    // 我们知道我们想让Field的事件冒泡到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() {
            // 如果样式被修改标题会变红。
            myForm.header.setStyle('color', 'red');
        }
    }
});
参数:
  • events : String/Array
    冒泡的事件名，或事件名数组
返回值:
  • void
Observable
findParentBy ( Function fn ) : Ext.Container
通过自定义的函数查找当前组件上层任何层次上的容器...
通过自定义的函数查找当前组件上层任何层次上的容器。 如果传递的函数返回true，容器对象将被返回。
参数:
  • fn : Function
    自定义的函数，使用如下参数调用(container,this component)。
返回值:
  • Ext.Container
    自定义函数返回true的第一个容器
Component
findParentByType ( String/Class xtype ) : Ext.Container
通过xtype或者class查找当前组件上层任何层次上的容器
通过xtype或者class查找当前组件上层任何层次上的容器
参数:
  • xtype : String/Class
    组件的xtype字符串，或者直接是组件的class
返回值:
  • Ext.Container
    符合指定xtype或者class的第一个容器
Component
fireEvent( String eventName, Object... args ) : Boolean
用传入的参数触发指定的事件 (减去事件名)。 一个事件可以被设置为冒泡 Obse...

用传入的参数触发指定的事件 (减去事件名)。

一个事件可以被设置为冒泡到Observable父类继承树(参看 Ext.Component.getBubbleTarget) 调用enableBubble实现。

参数:
  • eventName : String
    触发的事件名。
  • args : Object...
    传递给处理器的可变长度参数。
返回值:
  • Boolean
    如果有任何的处理器返回false则返回false，否则返回true。
Observable
focus ( [ Boolean selectText ], [ Boolean/Number delay ] ) : Ext.Component
尝试将当前组件设为焦点。
尝试将当前组件设为焦点。
参数:
  • selectText : Boolean
    (可选) 如果可用，同时选中组件内部的文本
  • delay : Boolean/Number
    (可选)将当前组件设置为焦点的延迟时间(设置为true等于0毫秒)
返回值:
  • Ext.Component
    this
Component
getActiveError () : String
获取当前表单项活动的出错消息。
获取当前表单项活动的出错消息。
参数:
  • 无。
返回值:
  • String
    返回表单项上活动的出错消息，如果没有错误，返回一个空字符串。
Field
getBox ( [ Boolean local ] ) : Object
获取组件底层元素当前盒子模型的尺寸。（译者注：盒子模型是CSS术语，详细解释请自行搜索。）
获取组件底层元素当前盒子模型的尺寸。（译者注：盒子模型是CSS术语，详细解释请自行搜索。）
参数:
  • local : Boolean
    (可选)值为true时，组件的left值和top值将代替页面的XY被返回。(默认值为false)
返回值:
  • Object
    返回值的格式{x, y, width, height}
BoxComponent
getBubbleTarget () : Ext.Container
为Observable的fireEvent方法提供链接，它沿着继承结构进行冒泡操作。
为Observable的fireEvent方法提供链接，它沿着继承结构进行冒泡操作。
参数:
  • 无。
返回值:
  • Ext.Container
    拥有当前组件的容器。
Component
getEl () : Ext.Element
返回 Ext.Element ，它包装了当前组件。...

返回 Ext.Element ，它包装了当前组件。

通常情况下，这将是一个<DIV>元素，它是由该类的onRender方法创建的， 但是可以使用autoEl配置项 覆盖它。

注意: 此元素将会一直处于无效状态直到当前组件渲染完成。

如需向当前组件的 DOM事件(而不是当前组件自己的Observable事件)添加监听器， 更多建议，参见 listeners 配置项，或者直接使用一个render监听器:

new Ext.Panel({
    title: 'The Clickable Panel',
    listeners: {
        render: function(p) {
            // Append the Panel to the click handler's argument list.
            p.getEl().on('click', handlePanelClick.createDelegate(null, [p], true));
        },
        single: true  // Remove the listener after first invocation
    }
});
参数:
  • 无。
返回值:
  • Ext.Element
    包装当前组件的元素。
Component
getErrors () : Array
运行当前表单项的校验器并返回一个所有校验错误信息数组。 此方法在校验期间在内部调用并且一般情况下...
运行当前表单项的校验器并返回一个所有校验错误信息数组。 此方法在校验期间在内部调用并且一般情况下不需要手工调用。 每个子类都应该重写或者增加返回值以提供它们自己的出错消息
参数:
  • 无。
返回值:
  • Array
    当前表单项的所有出错消息
Field
getHeight () : Number
获取该组件的当前高度值。
获取该组件的当前高度值。
参数:
  • 无。
返回值:
  • Number
BoxComponent
getId () : String
返回当前组件的id，如果没有定义id，则自动生成并返回一个id:'ext-comp-'...
返回当前组件的 id 如果没有定义 id 则自动生成并返回一个 id

'ext-comp-' + (++Ext.Component.AUTO_ID)
参数:
  • 无。
返回值:
  • String
    id
Component
getItemId () : String
返回当前组件的 itemId 。 如果没有通过配置参数指定 itemId 那么，将会使用...
返回当前组件的 itemId 。 如果没有通过配置参数指定 itemId 那么，将会使用 getId 返回 id 。
参数:
  • 无。
返回值:
  • String
Component
getName () : String
如果可用，返回表单项的 name 或者 hiddenName 属性。
如果可用，返回表单项的 name 或者 hiddenName 属性。
参数:
  • 无。
返回值:
  • String
    name 表单项的{@link Ext.form.Field#name name}或者{@link Ext.form.ComboBox#hiddenName hiddenName}
Field
getOuterSize () : Object
获取当前组件所在元素的尺寸大小，包括边缘的空白处。
获取当前组件所在元素的尺寸大小，包括边缘的空白处。
参数:
  • 无。
返回值:
  • Object
    一个包含元素大小的对象 {width: (element width + left/right margins), height: (element height + top/bottom margins)}
BoxComponent
getPosition ( [ Boolean local ] ) : Array
获取组件底层元素当前的XY位置。
获取组件底层元素当前的XY位置。
参数:
  • local : Boolean
    (可选)如果为true，将返回元素的left和top值，而不是相对于页面内的 XY。(默认值为 false)
返回值:
  • Array
    元素的XY位置值(例如：[100, 200])
BoxComponent
getRawValue () : Mixed
返回原始数据值，可能不是一个合法的、已定义的值。 返回格式化的值参见...
返回原始数据值，可能不是一个合法的、已定义的值。 返回格式化的值参见 getValue。
参数:
  • 无。
返回值:
  • Mixed
    value 表单项的值
Field
getResizeEl () : Ext.Element
返回该组件的最外层用来定义这些组件整体大小的Element...

返回该组件的最外层用来定义这些组件整体大小的Element对象。

通常用 getEl 方法将会返回相同的Element对象，但在有些情况下，组件可能有一些更多的封装了它的主要动态Element对象的Element对象。

例如ComboBox。它是封装在一个包含<input>元素的包装元素里(这将返回其 getEl方法和触发按钮的元素)。返回的元素为resizeEl。

参数:
  • 无。
返回值:
  • Ext.Element
    The Element which is to be resized by size managing layouts.
BoxComponent
getSize () : Object
获取组件底层元素当前的大小。
获取组件底层元素当前的大小。
参数:
  • 无。
返回值:
  • Object
    一个包含元素大小的对象{width: (element width), height: (element height)}
BoxComponent
getValue () : Mixed
返回格式化的数据值(undefined或者emptyText将会以''返回)。 如需返回原始值，参见...
返回格式化的数据值(undefined或者emptyText将会以''返回)。 如需返回原始值，参见 getRawValue。
参数:
  • 无。
返回值:
  • Mixed
    value 表单项的值
Field
getWidth () : Number
获取该组件的当前宽度值。
获取该组件的当前宽度值。
参数:
  • 无。
返回值:
  • Number
BoxComponent
getXType () : String
获取当前组件的xtype，它是用 Ext.ComponentMgr 注册的。 所有可用的xtype列表，参见...
获取当前组件的xtype，它是用 Ext.ComponentMgr 注册的。 所有可用的xtype列表，参见 Ext.Component 类头部。示例用法:

var t = new Ext.form.TextField();
alert(t.getXType());  // alerts 'textfield'
参数:
  • 无。
返回值:
  • String
    The xtype
Component
getXTypes () : String
返回此组件的xtype继承树，用字符'-'分隔。 所有可用的xtype值...

返回此组件的xtype继承树，用字符'-'分隔。 所有可用的xtype值，请参见Ext.Component 类的头部。

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

示例用法:

var t = new Ext.form.TextField();
alert(t.getXTypes());  // alerts 'component/box/field/textfield'
参数:
  • 无。
返回值:
  • String
    xtype层次字符串
Component
hasListener( String eventName ) : Boolean
检测对象是否包含指定事件的任何监听器
检测对象是否包含指定事件的任何监听器
参数:
  • eventName : String
    检测的事件名
返回值:
  • Boolean
    如果事件被监听则为true，否则为false
Observable
hide () : Ext.Component
隐藏当前组件。 监听 beforehide' 事件并且返回false 可以取消隐藏组件的操作。 在隐藏组件之后触发...
隐藏当前组件。 监听 beforehide' 事件并且返回false 可以取消隐藏组件的操作。 在隐藏组件之后触发 ' hide' 事件。 如果组件被配置成 hidden 那么此方法在内部被调用。
参数:
  • 无。
返回值:
  • Ext.Component
    this
Component
isDirty () : Boolean
如果此表单项的值与原始值相比发生了改变，返回true。 如果表单项...

如果此表单项的值与原始值相比发生了改变，返回true。 如果表单项被禁用或者尚未被渲染将会返回false。

注意，如果所属的 form 配置了一个Ext.form.BasicForm， 那么在使用Ext.form.BasicForm. setValues 加载值之后，原始值将会被更新。

参数:
  • 无。
返回值:
  • Boolean
    如果此表单项的值与原始值相比发生了改变(并且没有被禁用)，返回true，其它返回false。
Field
isValid ( Boolean preventMark ) : Boolean
通过 校验 表单项 处理后的值 ，返回表单项当前值是否合法。...
通过 校验 表单项 处理后的值 ，返回表单项当前值是否合法。 注意: disabled 的表单项将会被忽略。
参数:
  • preventMark : Boolean
    True将会禁止把表单项标记为非法
返回值:
  • Boolean
    如果值是合法的，为true，其它为false
Field
isVisible () : Boolean
如果当前组件可见，返回true。
如果当前组件可见，返回true。
参数:
  • 无。
返回值:
  • Boolean
    如果当前组件可见，返回true，其它返回false。
Component
isXType ( String xtype , [ Boolean shallow ] ) : Boolean
Tests whether or not this Component is of a specific xtype. This can test whether this Component is descended from th...

测试此组件是否是指定的xtype。此方法既可以测试是否是指定的xtype的某个子类， 或者它是否直接是指定的xtype类(shallow=true)。

如果使用你自己的子类，必须知道组件必须注册它的xtype值。

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

示例用法:

var t = new Ext.form.TextField();
var isText = t.isXType('textfield');        // true
var isBoxSubclass = t.isXType('box');       // true, descended from BoxComponent
var isBoxInstance = t.isXType('box', true); // false, not a direct BoxComponent instance
参数:
  • xtype : String
    需要为当前组件进行检测的xtype
  • shallow : Boolean
    (可选) 如果为false，检测组件是否是xtype继承树中的某个子类（默认是这种情况）， 如果为true，只检测组件是否是指定的xtype类型。
返回值:
  • Boolean
    如果当前组件是指定xtype的子类，返回true，其它返回flase。
Component
markInvalid ( [ String msg ] ) : void
显示一个关联到当前表单项的出错信息， 使用msgTarget 来决定如何显示消息并将...

显示一个关msgTarget 来决定如何显示消息并将 invalidClass 应用到表单项的UI元素上。

注意: 如果表单项的值确实通过了校验， 此方法不会导致表单项的 validate 方法返回 false 。 所以简单地把一个表单项标记为非法并不会阻止表单项 通过设置的 Ext.form.Action.Submit.clientValidation 被提交。

invalid.
参数:
  • msg : String
    (可选)校验信息(默认为invalidText)
返回值:
  • void
Field
mon ( Observable|Element item , Object|String ename , Function fn , Object scope , Object opt ) : void
向任何Observable对象(或者元素)上添加监听器，监听器将会在组件...

向任何Observable对象(或者元素)上添加监听器，监听器将会在组件销毁时被自动删除。
用法：

myGridPanel.mon(myGridPanel.getSelectionModel(), 'selectionchange', handleSelectionChange, null, {buffer: 50});

or:

myGridPanel.mon(myGridPanel.getSelectionModel(), {
    selectionchange: handleSelectionChange,
    buffer: 50
});
参数:
  • item : Observable|Element
    需要添加listener/listeners的项目。
  • ename : Object|String
    事件名，或者一个包含事件名属性的对象。
  • fn : Function
    (可选) 如果 ename 参数是一个事件名，此参数为处理函数。
  • scope : Object
    (可选)如果 ename 参数是一个事件名称，此参数是作用域 ( this 引用)，监听函数将会在此作用域中被执行。
  • opt : Object
    (可选)如果 ename 参数是一个事件名称， 此参数是 addListener 配置项。
返回值:
  • void
Component
mun ( Observable|Element item , Object|String ename , Function fn , Object scope ) : void
删除通过mon 方法添加的监听器。
删除通过mon 方法添加的监听器。
参数:
  • item : Observable|Element
    需要删除listener/listeners的项目。
  • ename : Object|String
    事件名称，或者一个包含事件名称属性的对象。
  • fn : Function
    (可选)如果 ename 参数是一个事件名称，此参数是一个处理函数。
  • scope : Object
    (可选)如果 ename 参数是一个事件名称，此参数是作用域 ( this 引用)，监听函数将会在此作用域中被执行。
返回值:
  • void
Component
nextSibling () : Ext.Component
返回所属容器中的下一个组件
返回所属容器中的下一个组件
参数:
  • 无。
返回值:
  • Ext.Component
Component
on( String eventName, Function handler, [Object scope], [Object options] ) : void
给对象添加事件处理器 (addListener的简写形式)
给对象添加事件处理器 (addListener的简写形式。)
参数:
  • eventName : String
    监听的事件类型
  • handler : Function
    事件调用的方法
  • scope : Object
    （可选）处理方法执行时的作用域 (this 的引用)。 如果被忽略。默认为触发事件的对象。
  • options : Object
    可选 包含处理器配置的对象。
返回值:
  • void
Observable
previousSibling () : Ext.Component
返回所属容器中的前一个组件
返回所属容器中的前一个组件
参数:
  • 无。
返回值:
  • Ext.Component
Component
processValue ( Mixed value ) : void
仅仅在需要准备原始值供校验时，才需要覆盖此方法(参见 validate和 isValid)。...
仅仅在需要准备原始值供校验时，才需要覆盖此方法(参见 validate和 isValid)。 此方法被期望为表单项返回处理后的值，此值将会被用来进行校验 (参见validateValue方法)。
参数:
  • value : Mixed
返回值:
  • void
Field
purgeListeners() : void
移除对象上所有的监听器
移除对象上所有的监听器
参数:
  • 无。
返回值:
  • void
Observable
relayEvents( Object o, Array events ) : void
从指定的Observable上传递选择的事件就好像被当前对象触发一样。
从指定的Observable上传递选择的事件就好像被当前对象触发一样。
参数:
  • o : Object
    该Observable上的事件被当前对象传递。
  • events : Array
    传递的数组名。
返回值:
  • void
Observable
removeClass ( string cls ) : Ext.Component
从组件底层的元素上删除一个CSS类。
从组件底层的元素上删除一个CSS类。
参数:
  • cls : string
    需要移除的CSS类名
返回值:
  • Ext.Component
    this
Component
removeListener( String eventName, Function handler, [Object scope] ) : void
删除一个事件处理器。
删除一个事件处理器。
参数:
  • eventName : String
    处理器关联的事件类型。
  • handler : Function
    移除的处理器。 这应该是传递到addListener里的方法的引用。
  • scope : Object
    （可选）处理器指定的初始作用域。
返回值:
  • void
Observable
render ( [ Element/HTMLElement/String container ], [ String/Number position ] ) : void
在传递进来的HTML元素中渲染当前组件。...

在传递进来的HTML元素中渲染当前组件。

如果你正在使用一个Container 对象放置当前组件，那么请不要使用render方法。

当容器第一次被渲染时，它的子组件将会被容器的 layout 管理器渲染。

某些布局管理器允许动态添加子组件。它们包括 Ext.layout.CardLayout, Ext.layout.AnchorLayout, Ext.layout.FormLayout, Ext.layout.TableLayout。

当一个新的子组件被添加时，如果容器已经被渲染了， 你可能需要调用容器的 doLayout 方法来刷新视图，它将导致所有没有被渲染的子组件进行渲染操作。 此操作是必须的，这样你可以添加多个子组件而只刷新一次layout。

当创建复杂的UI时，非常重要的一点是，请记住调整子项目的尺寸和位置是容器的 layout 管理器的职责。 如果你希望子项目的尺寸对用户交互作出反应， 你必须为容器配置一个布局管理器，它将创建和管理你心里想要的那种布局。

忽略容器的layout 配置意味着将会使用一个基本的布局管理器，它除了按次序把子组件 渲染到容器中之外什么事情都不做。 这种情况下，任何尺寸和位置的调整操作都不会发生。

参数:
  • container : Element/HTMLElement/String
    (可选) 需要在其中渲染当前组件的元素。 如果它是从一个已存在的标签中创建的，此参数应该被忽略。
  • position : String/Number
    (可选) 容器中的一个元素ID或者一个DOM节点索引， 当前组件将会被插入到它前面 (默认append到容器的尾部)
返回值:
  • void
Component
reset () : void
将表单项的当前值重置为以前加载时的值，并且清除所有校验信息。...
将表单项的当前值重置为以前加载时的值，并且清除所有校验信息。 参见Ext.form.BasicForm. trackResetOnLoad 。
参数:
  • 无。
返回值:
  • void
Field
resumeEvents() : void
重新开始触发事件。(参见suspendEvents) 如果事件以queueSuspended参数被挂起，则在事件被挂起时 ...
重新开始触发事件。(参见 suspendEvents) 如果事件以queueSuspended 参数被挂起，则在事件被挂起时触发的事件会被传递到所有的监听器上
参数:
  • 无。
返回值:
  • void
Observable
setActiveError ( String msg , Boolean suppressEvent ) : void
将当前activeError设置为所给的字符串。 触发'invalid'事件。这不会设置出错图标...
将当前activeError设置为所给的字符串。 触发'invalid'事件。这不会设置出错图标，仅仅设置消息并触发事件。 如需显示出错图标，可使用markInvalid代替，它将在内部调用此方法。
参数:
  • msg : String
    出错消息
  • suppressEvent : Boolean
    True将会禁止触发'invalid'事件
返回值:
  • void
Field
setAutoScroll ( Boolean scroll ) : Ext.BoxComponent
设置该组件内容溢出时是否自动显示滚动条。
设置该组件内容溢出时是否自动显示滚动条。
参数:
  • scroll : Boolean
    值为true的话组件自动显示滚动条。
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setDisabled ( Boolean disabled ) : Ext.Component
工具函数，使用布尔值设置有效/无效(disabled/enabled )。
工具函数，使用布尔值设置有效/无效(disabled/enabled )。
参数:
  • disabled : Boolean
返回值:
  • Ext.Component
    this
Component
setHeight ( Mixed height ) : Ext.BoxComponent
设置此组件的高度。该方法将触发resize事件。
设置此组件的高度。该方法将触发resize事件。
参数:
  • height : Mixed
    The new height to set.
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setPagePosition ( Number x , Number y ) : Ext.BoxComponent
设置组件在页面中的XY位置。 如果需要设置left和top值 ，请使用...
设置组件在页面中的XY位置。 如果需要设置left和top值 ，请使用setPosition方法。 该方法触发move事件。
参数:
  • x : Number
    The new x position
  • y : Number
    The new y position
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setPosition ( Number left , Number top ) : Ext.BoxComponent
设置组件的left和top值。设置组件的页面XY值，请使用setPagePosition方法。该方法触发...
设置组件的left和top值。设置组件的页面XY值，请使用setPagePosition方法。该方法触发move事件。
参数:
  • left : Number
    The new left
  • top : Number
    The new top
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setRawValue ( Mixed value ) : Mixed
绕过校验，直接设置底层DOM表单项的值。 设置值并进行校验，参见 setValue。
绕过校验，直接设置底层DOM表单项的值。 设置值并进行校验，参见 setValue。
参数:
  • value : Mixed
    需要设置的值
返回值:
  • Mixed
    value 被设置的表单项值
Field
setReadOnly ( Boolean readOnly ) : void
设置当前表单项的只读状态。
设置当前表单项的只读状态。
参数:
  • readOnly : Boolean
    表单项是否应该只读。
返回值:
  • void
Field
setSize ( Mixed width , Mixed height ) : Ext.BoxComponent
设置BoxComponent的宽度和高度。 此方法触发resize事件...
设置BoxComponent的宽度和高度。 此方法触发resize事件。此方法可以接收单独的width或者height值作为参数， 或者你可以传递像这样的一个size对象： {width:10, height:20} 。
参数:
  • width : Mixed
    设置的新的width值。这可以是：
    • 一个Number类型指定Element新的宽度 Ext.Element.defaultUnit(默认为像素 :'px')。
    • 一个String类型用于设置width的CSS样式。
    • 一个size对象格式为 {width: widthValue, height: heightValue} 。
    • 值为 undefined 时，保留原来的width不变。
  • height : Mixed
    设置的新的height值(如果第一个参数传递了一个size对象，此参数没有必要传递)。这可以是：
    • 一个Number类型指定Element新的高度 Ext.Element.defaultUnit(默认为像素 :'px')。
    • 一个String类型用于设置height的CSS样式。也有可能不会被使用到。
    • 值为 undefined 时，保留原来的height不变。
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setValue ( Mixed value ) : Ext.form.Field
向表单项中设置一个数据值并校验之。 如需直接设置值而不进行校验，参见 setRawValue。
向表单项中设置一个数据值并校验之。 如需直接设置值而不进行校验，参见 setRawValue。
参数:
  • value : Mixed
    需要设置的值
返回值:
  • Ext.form.Field
    this
Field
setVisible ( Boolean visible ) : Ext.Component
工具方法，通过使用布尔值隐藏或者显示当前组件。
工具方法，通过使用布尔值隐藏或者显示当前组件。
参数:
  • visible : Boolean
    true时显示，false时隐藏
返回值:
  • Ext.Component
    this
Component
setWidth ( Mixed width ) : Ext.BoxComponent
设置组件的宽度。 此方法触发resize事件。
设置组件的宽度。 此方法触发resize事件。
参数:
  • width : Mixed
    The new width to set.
返回值:
  • Ext.BoxComponent
    this
BoxComponent
show () : Ext.Component
显示当前组件。监听' beforeshow' 事件，返回 false 取消显示组件...
显示当前组件。监听' beforeshow' 事件，返回 false 取消显示组件。在显示组件之后触发' show' 事件。
参数:
  • 无。
返回值:
  • Ext.Component
    this
Component
suspendEvents( Boolean queueSuspended ) : void
暂停触发所有的事件。 (参看resumeEvents)
暂停触发所有的事件。（参看 resumeEvents)
参数:
  • queueSuspended : Boolean
    如果传递为true则排列好暂停的事件使得在调用 resumeEvents 后再触发它们，而不是抛弃所有暂停的事件。
返回值:
  • void
Observable
syncSize () : Ext.BoxComponent
强制组件的大小按照此组件底层元素当前的高度和宽度计算。
强制组件的大小按照此组件底层元素当前的高度和宽度计算。
参数:
  • 无。
返回值:
  • Ext.BoxComponent
    this
BoxComponent
un( String eventName, Function handler, [Object scope] ) : void
删除一个事件处理器(removeListener方法的简写形式)
删除一个事件处理器(removeListener方法的简写形式。)
参数:
  • eventName : String
    处理器关联的事件类型
  • handler : Function
    被删除的处理器 这应该是传入 addListener 中的方法的引用。
  • scope : Object
    （可选）为处理器指定的初始作用域。
返回值:
  • void
Observable
unsetActiveError ( Boolean suppressEvent ) : void
清除activeError并触发'valid'事件。此方法被clearInvalid在内部进行...
清除activeError并触发'valid'事件。此方法被clearInvalid在内部进行调用， 并且一般情况下没有必要手工调用
参数:
  • suppressEvent : Boolean
    True将禁止触发'invalid'事件
返回值:
  • void
Field
update ( Mixed htmlOrData , [ Boolean loadScripts ], [ Function callback ] ) : void
刷新组件的内部区域。
刷新组件的内部区域。
参数:
  • htmlOrData : Mixed
    如果已经通过tpl为当前组件配置了一个模板，那么 将会使用此参数来装配模板。 如果没有为当前组件配置模板，组件的内容区域将会通过Ext.Element 进行刷新。
  • loadScripts : Boolean
    (可选)只用在使用html配置时此参数才合法。默认为false。
  • callback : Function
    (可选)只用在使用html配置时此参数才合法。 当脚本加载完成时回调函数才被执行。
返回值:
  • void
Component
updateBox ( Object box ) : Ext.BoxComponent
设置此组件底层元素的盒子模型尺寸。(译者注：盒子模型是CSS术语，详细资料请自行搜索。)
设置此组件底层元素的盒子模型尺寸。(译者注：盒子模型是CSS术语，详细资料请自行搜索。)
参数:
  • box : Object
    一个格式为{x, y, width, height}的对象
返回值:
  • Ext.BoxComponent
    this
BoxComponent
validate () : Boolean
校验表单项的值
校验表单项的值
参数:
  • 无。
返回值:
  • Boolean
    如果值合法，为true,否则为false
Field
validateValue ( Mixed The ) : Boolean
使用getErrors创建一个校验出错信息数组。 如果发现了任何错误，将会使用第一个错误作为参数...
使用getErrors创建一个校验出错信息数组。 如果发现了任何错误，将会使用第一个错误作为参数调用markInvalid方法并返回 false，否则返回true。以前，要求子类提供此方法的一个实现以处理校验过程--- 从3.2开始，应该用覆盖getErrors方法的方式替代。
参数:
  • The : Mixed
    表单项的当前值
返回值:
  • Boolean
    如果所有校验都通过，此值为true，如果一个或多个校验失败，则为false
Field

公共事件

Event Defined By
added : ( Ext.Component this , Ext.Container ownerCt , number index )
当一个组件被添加到一个Ext.Container时触发
当一个组件被添加到一个Ext.Container时触发
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • ownerCt : Ext.Container
    用于组件的容器
  • index : number
    添加组件的位置
Component
afterrender : ( Ext.Component this )
在组件渲染完成之后触发...

在组件渲染完成之后触发。

afterrender事件在当前组件被rendered 结束之后、在为组件定义的所有afterRender方法执行之后 触发，并且，如果有stateful， 也在状态被保存之后才触发。

监听器将会以如下参数格式被调用:
  • this : Ext.Component
Component
beforedestroy : ( Ext.Component this )
在组件 destroyed 之前触发。 在事件监听器中返回false以停止 destroy 操作。
在组件 destroyed 之前触发。 在事件监听器中返回false以停止 destroy 操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforehide : ( Ext.Component this )
在调用hide方法隐藏组件之前触发。 在事件监听器中返回false可以停止隐藏操作。
在调用hide方法隐藏组件之前触发。 在事件监听器中返回false可以停止隐藏操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforerender : ( Ext.Component this )
在组件被rendered 之前触发。 在事件监听器中返回false可以停止render 操作。
在组件被rendered 之前触发。 在事件监听器中返回false可以停止render 操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforeshow : ( Ext.Component this )
在调用show()方法现实组件之前触发。 事件处理函数返回false可以停止show。
在调用show 方法现实组件之前触发。 事件处理函数返回false可以停止show。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforestaterestore : ( Ext.Component this , Object state )
在组件状态恢复之前触发。返回false停止恢复状态操作。
在组件状态恢复之前触发。返回false停止恢复状态操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    StateProvider返回的状态哈希值。 如果没有禁止此事件，那么状态对象会被传递给applyState。 默认情况下，这样简单地把属性值拷贝到当前组件中。 可以覆盖此方法以提供自定的状态恢复操作。
Component
beforestatesave : ( Ext.Component this , Object state )
在组件状态被保存到配置的状态提供者之前触发。 返回false可以停止保存。
在组件状态被保存到配置的状态提供者之前触发。 返回false可以停止保存。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    状态值哈希。 这由在组件上调用getState() 方法决定。 此方法必须由开发者提供，返回是否需要对状态进行描述，默认情况下， Ext.Component有一个空实现。
Component
blur : ( Ext.form.Field this )
当表单项时区输入焦点时触发。
当表单项时区输入焦点时触发。
监听器将会以如下参数被调用:
  • this : Ext.form.Field
Field
change : ( Ext.form.Field this , Mixed newValue , Mixed oldValue )
如果表单项的时发生改变，在表单项刚刚失去焦点时触发。
如果表单项的时发生改变，在表单项刚刚失去焦点时触发。
监听器将会以如下参数格式调用:
  • this : Ext.form.Field
  • newValue : Mixed
    新的值
  • oldValue : Mixed
    原始值
Field
destroy : ( Ext.Component this )
在组件被销毁之后触发。
在组件被destroyed之后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
disable : ( Ext.Component this )
在组件被设置为无效状态后触发。
在组件被设置为无效状态后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
enable : ( Ext.Component this )
当组件被设置为有效(enabled)之后触发。
当组件被设置为有效(enabled)之后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
focus : ( Ext.form.Field this )
当表单项获得输入焦点时触发。
当表单项获得输入焦点时触发。
监听器将会以如下参数格式被调用:
  • this : Ext.form.Field
Field
hide : ( Ext.Component this )
在组件被隐藏之后触发。 当调用hide 方法隐藏组件之后触发。
在组件被隐藏之后触发。 当调用hide 方法隐藏组件之后触发。
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
invalid : ( Ext.form.Field this , String msg )
在表单项被标记为非法之后触发。
在表单项被标记为非法之后触发。
监听器将会以如下参数格式调用:
  • this : Ext.form.Field
  • msg : String
    校验信息
Field
move : ( Ext.Component this , Number x , Number y )
在组件移动之后触发。
在组件移动之后触发。
监听器将会用如下的参数格式来调用:
  • this : Ext.Component
  • x : Number
    The new x position
  • y : Number
    The new y position
BoxComponent
removed : ( Ext.Component this , Ext.Container ownerCt )
当一个组件被从Ext.Container容器中删除时触发
当一个组件被从Ext.Container容器中删除时触发
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • ownerCt : Ext.Container
    持有组件的容器
Component
render : ( Ext.Component this )
在组件被渲染之后触发。
在组件被 rendered(渲染) 之后触发。
监听器将以如下的参数格式被调用:
  • this : Ext.Component
Component
resize : ( Ext.Component this , Number adjWidth , Number adjHeight , Number rawWidth , Number rawHeight )
在组件被调整大小之后触发。
在组件被调整大小之后触发。
监听器将以如下的参数格式被调用:
  • this : Ext.Component
  • adjWidth : Number
    这是width调整后的值
  • adjHeight : Number
    这是height调整后的值
  • rawWidth : Number
    这是width原来的值
  • rawHeight : Number
    这是height原来的值
BoxComponent
show : ( Ext.Component this )
在调用show 方法显示组件之后触发。
在调用show 方法显示组件之后触发。
监听器将会用如下的参数格式被调用:
  • this : Ext.Component
Component
specialkey : ( Ext.form.Field this , Ext.EventObject e )
当任何和导航有关的键被按下时触发(上下左右箭头, tab, 回车,esc, 等等) is pressed. 处理其它按键参见...
当任何和导航有关的键被按下时触发(上下左右箭头, tab, 回车,esc, 等等) is pressed. 处理其它按键参见 Ext.Panel.keys或者 Ext.KeyMap。 你可以检测 Ext.EventObject.getKey 以便获知哪个键被按下。例如：
var form = new Ext.form.FormPanel({
    ...
    items: [{
            fieldLabel: 'Field 1',
            name: 'field1',
            allowBlank: false
        },{
            fieldLabel: 'Field 2',
            name: 'field2',
            listeners: {
                specialkey: function(field, e){
                    // e.HOME, e.END, e.PAGE_UP, e.PAGE_DOWN,
                    // e.TAB, e.ESC, arrow keys: e.LEFT, e.RIGHT, e.UP, e.DOWN
                    if (e.getKey() == e.ENTER) {
                        var form = field.ownerCt.getForm();
                        form.submit();
                    }
                }
            }
        }
    ],
    ...
});
监听器将会以如下参数格式被调用:
  • this : Ext.form.Field
  • e : Ext.EventObject
    事件对象
Field
staterestore : ( Ext.Component this , Object state )
组件状态被存储之后触发。
组件状态被存储之后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    StateProvider返回的状态哈希值。 如果没有禁止此事件，那么状态对象会被传递给applyState。 默认情况下，这样简单地把属性值拷贝到当前组件中。 可以覆盖此方法以提供自定的状态恢复操作。
Component
statesave : ( Ext.Component this , Object state )
在组件状态被保存到所配置的状态提供者之后触发。
在组件状态被保存到所配置的状态提供者之后触发。
监听器将会用如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    状态值hash。 这是由在足见上调用getState() 方法决定的。 开发者必须提供此方法以返回是否需要恢复状态，默认情况下， Ext.Component有一个空实现。
Component
valid : ( Ext.form.Field this )
在表单项被校验无错误之后触发。
在表单项被校验无错误之后触发。
监听器将会以如下参数格式被调用:
  • this : Ext.form.Field
Field


Observable
    Component
      BoxComponent
        Field

Class Ext.form.Field

包: | Ext.form
定义类的文件: | Field.js
类: | Field
子类: | Checkbox, CheckboxGroup, CompositeField, DisplayField, Hidden, HtmlEditor, SliderField, TextField
继承自: | BoxComponent
表单项基类，提供默认的事件处理、调整大小，表单项值处理以及其它功能。

配置项

Config Options Defined By
allowDomMove : Boolean
在渲染时组件是否可以移动Dom节点(默认为true)。
Component
anchor : String
注: 这个配置只用于该组件被包含在一个已使用AnchorLayout...

注: 这个配置只用于该组件被包含在一个已使用 AnchorLayout (或者其子类)配置的Container时。 基于布局管理器，例如：

  • Ext.form.FormPanel
  • 指定 layout: 'anchor' // or 'form', or 'absolute'

参见 Ext.layout.AnchorLayout. anchor 。

BoxComponent
applyTo : Mixed
指定一个元素的id、一个DOM元素或者一个已经存在并被渲染到DIV中的元素，此DIV已经被...

指定一个元素的id、一个DOM元素或者一个已经存在并被渲染到DIV中的元素，此DIV已经被 渲染到document中，并且为当前组件指定了一些结构化的标签。

  • 描述 :
      当使用了 applyTo， 在主元素中也可以用id或者CSS类名来指定组件的托管部分， 并且，如果可以的话，创建的组件可能也会试图在那个标签中创建它的子组件。
  • 注意 :
      当使用此配置项时，无需调用render()方法。
      如果指定了applyTo属性，任何传递给 renderTo 的值都会被忽略，并且目标元素的父节点将会自动被用作组件的容器。
Component
autoCreate : String/Object
一个DomHelper 元素描述，或者为true使用一个默认元素描述。 用来创建封装当前组件的...

一个DomHelper 元素描述，或者为true使用一个默认元素描述。 用来创建封装当前组件的 Element。 细节参见 autoEl 。 默认为:

                                {tag: 'input', type: 'text', size: '20', autocomplete: 'off'}
Field
autoScroll : Boolean
如果值为true，将会在该元素上使用overflow:'auto'配置，并且在必要的时候...
如果值为true，将会在该元素上使用overflow:'auto'配置，并且在必要的时候自动显示滚动条，否则，溢出部分的组件都会被切除(默认值为 false)。
BoxComponent
autoShow : Boolean
如果组件需要检测隐藏CSS属性(如 'x-hidden' 或者 'x-hide-display')并且在渲染时删除...
如果组件需要检测隐藏CSS属性(如 'x-hidden' 或者 'x-hide-display')并且在渲染时删除它们 (默认为false)，设置此值为true。
Component
boxMaxHeight : Number
设置组件的最大高度值...

设置组件的最大高度值。

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

BoxComponent
boxMaxWidth : Number
设置组件的最大宽度值...

设置组件的最大宽度值。

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

BoxComponent
boxMinHeight : Number
设置组件的最小高度值...

设置组件的最小高度值。

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

BoxComponent
boxMinWidth : Number
设置组件的最小宽度值...

设置组件的最小宽度值。

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

BoxComponent
bubbleEvents : Array
一个事件数组，当这些事件被触发时，将会被冒泡到所有父容器中。参见....

一个事件数组，当这些事件被触发时，将会被冒泡到所有父容器中。参见 Ext.util.Observable.enableBubble。 默认为 []。

Component
clearCls : String
应用到特殊的clearing div的CSS类， 这个clearing div直接渲染到每个form field的包装器后面...

应用到特殊的clearing div的CSS类， 这个clearing div直接渲染到每个form field的包装器后面，以提供 清除field的功能(默认为 'x-form-clear-left')。

注意: 只有在当前组件被渲染到一个使用FormLayout 布局(例如 Ext.form.FormPanel 或者指定 layout:'form')的 容器中、或者是指定了一个fieldLabel 、或者指定isFormField=true 时此配置才有效。

另请参见 Ext.layout.FormLayout. fieldTpl。

Component
cls : String
一个自定义CSS类，应用到表单项底层元素(默认为'')。
Field
contentEl : String
(可选)指定一个已存在的HTML元素，或者一个已存在HTML元素的...

(可选)指定一个已存在的HTML元素，或者一个已存在HTML元素的 id ，它们将被用作当前组件的内容。

  • 描述 :
    此配置选项被用来将一个已存在的HTML元素 插入到一个新组件(在组件渲染之后它简单地移动DOM元素) 的layout元素中，使它成为该组件的内容。
  • 注意 :
    指定的HTML元素将被append到组件的layout元素中， 在所有配置的 HTML 被插入之后， 并且，这样的话，在render事件 被触发时，document中将不再包含此元素。
    指定的HTML元素将不会参与组件所有可能使用的 layout 过程(译者注：指这些HTML元素 不会参与布局操作)。 它仅是HTML而已。布局操作实在孩子 items 上进行的。
    添加 x-hidden 或者 x-hide-display CSS类，以防在内容渲染到panel时发生闪烁。
Component
ctCls : String
一个可选的外部CSS样式，添加到这个组件的容器(默认值为 '')。 这个方法对于使用标准的CSS规则...

一个可选的外部CSS样式，添加到这个组件的容器(默认值为 '')。 这个方法对于使用标准的CSS规则，为组件或它的任何一个子组件添加特定的样式非常有用。 参见 Ext.layout.ContainerLayout和 extraCls 。

注意: ctCls 默认为 ''期望如下的类，它们将指定一个默认值:

  • Box Layout : 'x-box-layout-ct'
使用一个额外的CSS类配置以上的Class，它是append到默认对象上的。例如， 对于BoxLayout (Hbox and Vbox):
                                ctCls: 'x-box-layout-ct custom-class'

Component
data : Mixed
初始化数据集，它将被应用到 tpl 上以刷新组件的内容区域。
Component
disabled : Boolean
true将禁用表单项(默认为false)。

必须明白，由 HTML 描述构造，禁用的表单项将不会被...

true将禁用表单项(默认为false)。

必须明白，由 HTML 描述构造，禁用的表单项将不会被 提交。

Field
disabledClass : String
当组件处于无效状态时添加到组件上的CSS类(默认为 'x-item-disabled')。
Component
fieldClass : String
表单项的默认CSS类(默认为'x-form-field')
Field
fieldLabel : String
紧靠此field显示的标签文本(默认值为 '')。注意...

紧靠此field显示的标签文本(默认值为 '')。

注意:只有在当前组件被渲染到一个使用FormLayout 的容器中时，此配置才有效。 (例如 Ext.form.FormPanel 或 指定 layout:'form')。

另请参见 hideLabel 、 Ext.layout.FormLayout和 fieldTpl。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Name'
    }]
});
Component
flex : Number
注: 这个配置只用于该组件被包含在一个已使用BoxLayout配置的Container中时...

注: 这个配置只用于该组件被包含在一个已使用BoxLayout配置的Container中时。通过计算每一个子组件的flex值所占全部flex值之和的比例，来决定子组件的宽(HBoxLayout)高(VBoxlayout)。 任何子项的 flex = 0 或 flex = undefined 将不被设置(初始值大小将不被改变)。

BoxComponent
focusClass : String
当表单项获得焦点时使用的CSS类(默认为 'x-form-focus')
Field
height : Number
组件的高度(默认值为 auto)。注:如果想使用百分比的方式...
组件的高度(默认值为 auto)。注:如果想使用百分比的方式来设置值，请查看 Ext.Component.anchor。
BoxComponent
hidden : Boolean
如果当前组件处于隐藏状态，此值为true。Read-only。
Component
hideLabel : Boolean
true时完全隐藏label元素 ( label 和 separator)。 默认为 false。 默认情况下，即使你不指定...

true时完全隐藏label元素 ( label 和 separator)。 默认为 false。 默认情况下，即使你不指定 fieldLabel 它的空间仍然会被保留，这样这块区域会与其它确实拥有label的区域位于同一排。 讲此值设置为 true 将导致此区域不再保留此空间。

注意: 参见 clearCls 的注释。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield'
        hideLabel: true
    }]
});
Component
hideMode : String
组件如何隐藏，支持的值有： 'visibility' (css visibility), 'offsets' (位置偏移量为负值) 和...

组件如何隐藏，支持的值有： 'visibility' (css visibility), 'offsets' (位置偏移量为负值) 和 'display' (css display).

注意:一般首选默认值 'display'，因为当组件第一次显示的时候它们会自动进行布局 (隐藏的时候不会调整尺寸)。

Component
hideParent : Boolean
此值为true时，当调用hide/show方法时，将会hide和show组件的容器...
此值为true时，当调用hide/show方法时，将会hide和show组件的容器；false时将会 hide和show组件自身(默认为false)。例如，这可以用作window上隐藏按钮的一种 快捷操作，通过设置此按钮的hideParent:true，然后把它添加到window上。
Component
html : String/Object
一个HTML片段，或者一个 DomHelper 描述，用作layout元素的内容(默认为'')。...
一个HTML片段，或者一个 DomHelper 描述，用作layout元素的内容(默认为'')。 这个HTML内容在组件渲染之后才被添加，所以在 render 出发的时候，document中尚未包含此HTML。 但是这个内容将会在所有配置的 contentEl 之前被插入到body标签中。
Component
id : String
当前组件唯一的id(默认为auto-assigned id)...

当前组件唯一的id(默认为auto-assigned id)。 如果你需要在以后访问组件，而又没有一个有效的组件对象引用，那么你需要指定一个 id( 也就是，使用Ext. getCmp方法 )。

注意，此id也将被用作组件底层HTML标签的id，这些标签被渲染到页面中。 这将允许你编写基于id的CSS规则，以独立地描述指定的实例；并且，也可以通过 组件父标签的id选中子元素。

注意:为了避免与唯一的id 产生重复， 请参见 itemId 和 ref 。

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

Component
inputType : String
输入栏的类型属性---例如radio,text,password,file(默认为'text')。...
输入栏的类型属性---例如radio,text,password,file(默认为'text')。 'file'和'password'类型通常必须用来渲染那些没有独立Ext组件的表单项类型。 注意，如果你使用inputType:'file'， 那么将不再支持 emptyText 并且应该避免使用。
Field
invalidClass : String
当把表单项标记为非法时所使用的CSS类(默认为'x-form-invalid')
Field
invalidText : String
当把一个表单项标记为非法状态并且没有提供消息时所使用的出错文本...
当把一个表单项标记为非法状态并且没有提供消息时所使用的出错文本 (默认为'The value in this field is invalid')
Field
itemCls : String
注意: 只有在当前组件被渲染到一个使用FormLayout 布局的 容器中时此配置才有效...

注意: 只有在当前组件被渲染到一个使用FormLayout 布局的 容器中时此配置才有效。 (例如Ext.form.FormPanel 或者指定 layout:'form')。

一个附加的CSS类，应用到div上，包装当前field的表单元素。 如果提供了此参数， field级上的itemCls将会覆盖 container级上提供的 默认itemCls。 为itemCls指定的值将会被添加默认的 类('x-form-item')。

既然它被应用到项目的包装器上(参见 Ext.layout.FormLayout。 fieldTpl)， 它将允许你编写能应用到此field、label(如果有指定)、或者field内部任何其它元素的标准CSS规则。

注意: 参考 fieldLabel的注释。 .

示例用法:

// Apply a style to the field's label:
<style>
    .required .x-form-item-label {font-weight:bold;color:red;}
</style>

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Name',
        itemCls: 'required' //this label will be styled
    },{
        xtype: 'textfield',
        fieldLabel: 'Favorite Color'
    }]
});
Component
itemId : String
当没有可利用的对象引用时，itemId可以作为第二选择，用来获得一个组件的引用， 代替 ...

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

var c = new Ext.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'); // 与 Ext.getCmp()不同

p2 = p1.ownerCt.getComponent('p2'); // 通过兄弟对象获得引用

另请参见 id 和 ref 。

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

Component
labelSeparator : String
每个fieldLabel 文本后面现实的分隔符。 此属性可以在多个层次上进行配置...

每个fieldLabel 文本后面现实的分隔符。 此属性可以在多个层次上进行配置。优先顺序为：

  • field / component level
  • container level
  • layout level (默认为冒号 ':')
如不需要为当前field的label显示分隔符，指定一个空字符串''即可。

注意:参见 clearCls 的注释。

另请参见 hideLabel 和 Ext.layout.FormLayout。 fieldTpl。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    layoutConfig: {
        labelSeparator: '~'   // layout config has lowest priority (defaults to ':')
    },
    labelSeparator: '>>',     // config at container level
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Field 1',
        labelSeparator: '...' // field/component level config supersedes others
    },{
        xtype: 'textfield',
        fieldLabel: 'Field 2' // labelSeparator will be '='

    }]
});
Component
labelStyle : String
一个CSS样式描述字符串，它将直接应用到当前field的label上...

一个CSS样式描述字符串，它将直接应用到当前field的label上。 如果有设置，默认为容器的labelStyle值(例如 Ext.layout.FormLayout.labelStyle , 或者 '')。

注意:参见 clearCls 的注释。

另请参见 hideLabel 和 Ext.layout.FormLayout. fieldTpl。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Name',
        labelStyle: 'font-weight:bold;'
    }]
});
Component
listeners : Object
一个包含一个或多个事件处理器的配置对象，会在初始化的时候被添加到目标对象上...

一个包含一个或多个事件处理器的配置对象，会在初始化的时候被添加到目标对象上。 该配置对象应该是一个有效的监听器配置对象就像 addListener例子中指定的一样可一次附加多个处理器。

ExtJs Components上的DOM事件

一些 ExtJs Component 类导出时会选择一些DOM事件(例如 "click", "mouseover" 等等), 这通常只是在有额外的值可以被添加时发生。例如DataView类的 click事件会传递被点击的节点。也可以直接在Component的HTMLElementevent上访问DOM事件，但必需在Component被渲染后监听器才能添加到Element 上。可以按照以下步骤添加插件:

// 插件会用一个监听器配置对象进行配置。
//该组件会被添加到所有处理方法的参数列表上。
Ext.DomObserver = Ext.extend(Object, {
    constructor: function(config) {
        this.listeners = config.listeners ? config.listeners : config;
    },

    // 组件将自己传递进了插件的初始化方法里
    init: function(c) {
        var p, l = this.listeners;
        for (p in l) {
            if (Ext.isFunction(l[p])) {
                l[p] = this.createHandler(l[p], c);
            } else {
                l[p].fn = this.createHandler(l[p].fn, c);
            }
        }

        // 渲染后立即添加监听器到元素上
        c.render = c.render.createSequence(function() {
            var e = c.getEl();
            if (e) {
                e.on(l);
            }
        });
    },

    createHandler: function(fn, c) {
        return function(e) {
            fn.call(this, e, c);
        };
    }
});

var combo = new Ext.form.ComboBox({

    // 元素被点击后折叠
    plugins: [ new Ext.DomObserver({
        click: function(evt, comp) {
            comp.collapse();
        }
    })],
    store: myStore,
    typeAhead: true,
    mode: 'local',
    triggerAction: 'all'
});

Observable
margins : Object
注:此配置只用于该组件展现在一个使用BorderLayout...

注:此配置只用于该组件展现在一个使用BorderLayout 或 BoxLayout的两个子类之一作为布局的容器。

这个margins对象在该组件中的格式为：

{top: (top margin),right: (right margin),bottom: (bottom margin),left: (left margin)}

也可以是一个字符串，中间用空格分隔，margin值为数字。 把matches中每一个值的次序跟CSS中margin值的排列方式相对应：

  • 如果只有一个值，它适用于所有方面。
  • 如果有两个值，top和bottom的边框设置为第一个值，left和right设置为第二个值。
  • 如果有三个值，top设置为第一个值，left和right设置为第二个值，bottom设置为第三个值。
  • 如果有四个值，分别设置为top, right, bottom, left。

默认值:

{top:0, right:0, bottom:0, left:0}
BoxComponent
msgFx : String
实验性参数 当在表单项下显示校验消息时使用的效果(默认为'normal')。
Field
msgTarget : String
通过markInvalid 设置的消息文本应该显示的位置。 必须是如下值之一：...

通过markInvalid 设置的消息文本应该显示的位置。 必须是如下值之一：

  • qtip 当用户鼠标滑过表单项时，显示一个包含消息的快速提示。 这是默认情况。
    为了使此参数能工作，必须调用 Ext.QuickTips.init。
  • title 在弹出的默认浏览器标题属性上显示消息。
  • under 在表单项之下添加一块div，包含出错消息。
  • side 在表单项右边添加一个出错图标，当鼠标滑过时弹出并显示一个消息。
  • [element id] 在指定元素的innerHTML中直接添加出错消息。
Field
name : String
表单项的HTML name属性(默认为'')。 注意: 如果需要当前表单项自动被包含在...
表单项的HTML name属性(默认为'')。 注意: 如果需要当前表单项自动被包含在 form submit()中，必须设置此参数。
Field
overCls : String
一个可选的额外的CSS类，它将在鼠标移过元素时被添加到组件上...
一个可选的额外的CSS类，它将在鼠标移过元素时被添加到组件上，鼠标移出时 删除。(默认为'')。此属性对于在组件上，或者它的任何使用标准CSS规则的孩子节点上， 添加定制的'active' 或者 'hover'样式非常有用。
Component
pageX : Number
如果该组件被包含在一个指定位置的容器中，这个值表示页面级的x坐标值（译者注：在有滚动条的情况下这个值很有用）。
BoxComponent
pageY : Number
如果该组件被包含在一个指定位置的容器中，这个值表示页面级的y坐标值（译者注：在有滚动条的情况下这个值很有用）。
BoxComponent
plugins : Object/Array
一个对象或者一个对象数组，为组件提供特殊的功能 ...
一个对象或者一个对象数组，为组件提供特殊的功能。 对一个合法的插件唯一的要求是它含有一个init()方法， 能接收一个Ext.Component型的参数。 当组件被创建时，如果有可用的插件，组件将会调用每个插件的init方法， 并将自身的引用作为方法参数传递给它。然后，每个插件就可以调用方法或者响应组件上的事件， 就像需要的那样提供自己的功能。
Component
preventMark : Boolean
true将会禁止 把表单项标记为非法。默认为false.
Field
ptype : String
需要创建配置的ptype。 当传递一个配置对象给构造函数时...
需要创建配置的ptype。 当传递一个配置对象给构造函数时，此配置选项不会被使用。 只有在使用懒初始化的时候此配置项才会被使用， 此时Plugin不是 通过一个完整的实例组件，而是通过一个Component配置指定的。 在渲染时，将会查找ptype以决定创建何种类型的Plugin。

如果你创建自己的Plugin，你可以通过 Ext.ComponentMgr.registerPlugin 对它们进行注册，以便能利用懒初始化和渲染机制。
Component
readOnly : Boolean
将会把表单项标记为在HTML中只读(readOnly)(默认为false)...
true 将会把表单项标记为在HTML中只读(readOnly)(默认为false)。

Note: 这仅仅设置元素的readOnly DOM参数。 例如，设置 readOnly=true ，将不会禁用触发ComboBox或者DateField； 这为你提供了一个选项，可以强制用户通过触发按钮选择一个值，而不是 在文本框进行输入。 使用 hideTrigger 可以隐藏触发按钮。

Field
ref : String
一个路径描述，与组件的 ownerCt 相关，它描述了把当前组件的命名引用放置到哪个父容器中去。...

一个路径描述，与组件的 ownerCt 相关，它描述了把当前组件的命名引用放置到哪个父容器中去。

祖先的坐标路径可以通过'/'字符进行分隔。 例如，将一个Toolbar Button的引用放入 拥有此Toolbar的Panel中:

var myGrid = new Ext.grid.EditorGridPanel({
    title: 'My EditorGridPanel',
    store: myStore,
    colModel: myColModel,
    tbar: [{
        text: 'Save',
        handler: saveChanges,
        disabled: true,
        ref: '../saveButton'
    }],
    listeners: {
        afteredit: function() {
//          The button reference is in the GridPanel
            myGrid.saveButton.enable();
        }
    }
});

在上面的代码中，如果 ref 是 'saveButton' ，那么引用将会被放置到Toolbar中。 ref 中的每个'/' 都会从组件的 ownerCt 向上移动一级。

另请参见 added 和 removed 事件。

Component
region : String
注: 此配置只用于该组件展现在一个布局为BorderLayout的容器中...

注: 此配置只用于该组件展现在一个布局为BorderLayout的容器中(例如指定layout:'border')。

详见Ext.layout.BorderLayout。

BoxComponent
renderTo : Mixed
该值可以是一个节点的id、一个DOM节点或者一个已存在的元素...

该值可以是一个节点的id、一个DOM节点或者一个已存在的元素， 组件将会被渲染到其中。

  • 注意 :
      如果组件不是一个Container 的子项目时， 不要使用此选项。 渲染和管理它的子项目是一个Container 的layout manager的责任。
      当使用此配置项时，无需调用render()方法。

另请参见 render 。

Component
stateEvents : Array
一个事件数组，当它们被触发时，组件需要保存自己的状态(默认值为 none)...

一个事件数组，当它们被触发时，组件需要保存自己的状态(默认值为 none)。 它们可以是任何该组件支持的事件类型，包括浏览器事件和 自定义事件(例如['click', 'customerchange'])。

对于保存和恢复组件状态的详细解释，参见 stateful

Component
stateId : String
为该组件指定的唯一的id值，它被用作管理组件状态的目的...
为该组件指定的唯一的id值，它被用作管理组件状态的目的。 (如果设定了id，默认值为组件自己的id，否则，如果组件使用自动生成的id，此值为null)。

对于保存和反解析组件状态的解释，参见 stateful 。

Component
stateful : Boolean
一个标志参数，它将引起组件在启动时尝试从一个保存的状态中恢复内部状态参数...

一个标志参数，它将引起组件在启动时尝试从一个保存的状态中恢复内部状态参数。 组件必须要么拥有一个 stateId 或者 id ，它们被分配给需要被管理的状态属性。 在跨页面加载时，不保证自动生成的id属性的稳定性， 并且，不能依赖此id来保存和恢复一个组件的相同状态。

为了保存状态的操作能够工作，状态管理器的提供者必须 被设置成一个Ext.state.Provider 的实现类，它覆盖了set 和get 方法，以便保存和恢复name/value对。 有一个内置的Ext.state.CookieProvider 可用。

为当前页面设置状态提供者:

Ext.state.Manager.setProvider(new Ext.state.CookieProvider({
    expires: new Date(new Date().getTime()+(1000*60*60*24*7)), //7 days from now
}));

当 stateEvents 配置项中其中之一的事件被触发时， 一个状态可保存的组件将试图保存其状态。

保存状态时，一个可保存状态的组件首先需要通过调用 getState 方法来序列化它的状态。 默认情况下，此函数什么事都不做。 开发者必须提供一个实现，返回一个hash对象，它描述了组件可恢复的状态。

getState方法产生的值将会传递给 Ext.state.Manager.set 方法，它使用配置的 Ext.state.Provider 来保存对象，以组件的 stateId 为key，或者，如果此值（指stateId）没有指定时， 使用它的 id 作为key。

在进行构造时，一个可保存状态的组件试图通过调用 Ext.state.Manager.get方法来 恢复它的状态，传递 stateId 或者，如果此值（指stateId）没有指定时， 使用它的 id 作为参数。

结果对象被传递给 applyState 。 applyState 的默认实现只是简单地把属性拷贝到对象中， 但是开发者可以覆盖此方法以支持更多行为。

通过向 beforestaterestore, staterestore, beforestatesave 和 statesave 事件上绑定监听器，你可以在保存和恢复状态时进行额外的处理。

Component
style : String
被添加到组件元素的特定样式。 必须是按照...
被添加到组件元素的特定样式。 必须是按照 Ext.Element.applyStyles 类指定格式的合法参数值。

new Ext.Panel({
    title: 'Some Title',
    renderTo: Ext.getBody(),
    width: 400, height: 300,
    layout: 'form',
    items: [{
        xtype: 'textarea',
        style: {
            width: '95%',
            marginBottom: '10px'
        }
    },
        new Ext.Button({
            text: 'Send',
            minWidth: '100',
            style: {
                marginBottom: '10px'
            }
        })
    ]
});
Component
submitValue : Boolean
False将会清除表单项的name属性，这样在提交表单时它将不会被提交。 默认为true。
Field
tabIndex : Number
该表单项的tabIndex。 注意，此属性仅仅应用到被渲染好的，而不是那些通过applyTo...
该表单项的tabIndex。 注意，此属性仅仅应用到被渲染好的，而不是那些通过applyTo创建的表单项 (默认为undefined)。
Field
tabTip : String
注: 这个配置只用于当该组件作为TabPanel的一个子项目时使用...

注: 这个配置只用于当该组件作为TabPanel的一个子项目时使用。

一个String类型的innerHTML(支持html标签)，当鼠标放在该选项上的时，显示一个tooltip。为了tips能够被渲染，Ext.QuickTips.init()必须被提前调用。
BoxComponent
tpl : Mixed
一个 Ext.Template , Ext.XTemplate 或者一个用来形成一个Ext.XTemplate的字符串数组...
一个 Ext.Template , Ext.XTemplate 或者一个用来形成一个Ext.XTemplate的字符串数组。 与 data 和 tplWriteMode 配置项协同使用。
Component
tplWriteMode : String
刷新组件的内容区域时使用的Ext.(X)Template方式。 默认为'overwrite' (参见 Ext.XTemplate.overwrite )。
刷新组件的内容区域时使用的Ext.(X)Template方式。 默认为'overwrite' (参见 Ext.XTemplate.overwrite )。
Component
validateOnBlur : Boolean
在表单项失去焦点时是否进行校验(默认为 true)。
Field
validationDelay : Number
在用户开始输入到校验操作开始之间的时长毫秒数 (默认为250)
Field
validationEvent : String/Boolean
引发表单项进行校验操作的事件。 设置为false可以禁用自动校验 (默认为'keyup')。
引发表单项进行校验操作的事件。 设置为false可以禁用自动校验 (默认为'keyup')。
Field
value : Mixed
当前表单项的初始化值(默认为undefined).
Field
width : Number
组件的宽度(默认值为 auto)。注:如果想使用百分比的方式...
组件的宽度(默认值为 auto)。注:如果想使用百分比的方式来设置值，请查看 Ext.Component.anchor。
BoxComponent
x : Number
如果被包含在一个指定位置的容器中，这个值表示x(left)坐标值。
BoxComponent
xtype : String
需要创建配置的xtype。 当传递一个配置对象给构造函数时...
需要创建配置的xtype。 当传递一个配置对象给构造函数时，此配置选项不会被使用。 只有在使用懒初始化的时候此配置项才会被使用，此时容器的子项目不是 通过一个完整的实例组件，而是通过一个Component配置指定的。 在渲染时，将会查找xtype以决定创建何种类型的子组件。

预定义的xtype列表如下： here。

如果你继承Component创建你自己的组件，你需要使用Ext.ComponentMgr.registerType 对它们进行注册，以便利用懒初始化和渲染机制。
Component
y : Number
如果被包含在一个指定位置的容器中，这个值表示y(top)坐标值。
BoxComponent

公共属性

Property Defined By
disabled : Boolean
当前组件处于无效状态时为true。 Read-only.
Component
el : Ext.Element
封装了当前组件的Ext.Element。 Read-only。通常情况下，这将是一个<DIV>元素，它由此类的...

封装了当前组件的Ext.Element。 Read-only。

通常情况下，这将是一个<DIV>元素，它由此类的 onRender方法创建，但是它可以通过使用 autoEl 配置项进行覆盖。

注意: 直到组件渲染完成此元素都将处于无效状态。

如需向当前组件的 DOM事件(而不是当前组件自己的Observable事件)添加监听器， 更多建议，参见 listeners 配置项，或者直接使用一个render监听器:

new Ext.Panel({
    title: 'The Clickable Panel',
    listeners: {
        render: function(p) {
            // Append the Panel to the click handler's argument list.
            p.getEl().on('click', handlePanelClick.createDelegate(null, [p], true));
        },
        single: true  // Remove the listener after first invocation
    }
});

另请参见 getEl

Component
hidden : Boolean
如果当前组件处于隐藏状态，此值为true。Read-only。
Component
initialConfig : Object
当前组件的初始化配置描述。 Read-only。
Component
label : Ext.Element
关联到当前表单项的label元素。 只有在当前表单项已经被一个Ext.layout.FormLayout ...

关联到当前表单项的label元素。 只有在当前表单项已经被一个Ext.layout.FormLayout 布局管理器渲染之后才可用。

Field
originalValue : mixed
表单项原来的值，它是在value 中配置的；或者，如果 trackResetOnLoad 设置为...
表单项原来的值，它是在value 中配置的；或者，如果 trackResetOnLoad 设置为 true 时，通过表单加载操作最后一次加载的。
Field
ownerCt : Ext.Container
组件所属的Container (默认为undefined，当前组件被添加到一个容器中时此值被自动设置)...
组件所属的Container (默认为undefined，当前组件被添加到一个容器中时此值被自动设置)。 Read-only。

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

Component
refOwner : Ext.Container
如果当前组件是一个容器的孩子，并且是通过一个 ref 配置项被注册的，则此值为 ref 引用被插入到的祖先容器。
如果当前组件是一个容器的孩子，并且是通过一个 ref 配置项被注册的，则此值为 ref 引用被插入到的祖先容器。
Component
rendered : Boolean
如果当前组件已经被渲染了，此值为true。Read-only.
Component
startValue : mixed
表单项最后一次获得焦点时所拥有的值。 这就是传递给change 事件的值...

表单项最后一次获得焦点时所拥有的值。 这就是传递给change 事件的值，此事件在值被改变并失去焦点时触发。

直到表单项被访问之前此值都是undefined 与originalValue 进行比较。

Field

公共方法

Method Defined By
Field ( Object config )
创建一个新的表单项。
创建一个新的表单项。
参数:
  • config : Object
    配置选项
返回值:
  • void
Field
addClass ( string cls ) : Ext.Component
为组件底层的元素添加CSS样式。
为组件底层的元素添加CSS样式。
参数:
  • cls : string
    需要添加的CSS样式的class名称
返回值:
  • Ext.Component
    this
Component
addEvents( Object|String o, string Optional. ) : void
添加指定的事件到事件列表上，事件会被该Observable触发。
添加指定的事件到事件列表上，事件会被该Observable触发。
参数:
  • o : Object|String
    以事件名作为属性true作为值的对象 或者当多个事件名被分开的传递时则为第一个事件名。
  • Optional. : string
    事件名被分开的传递时则为事件名。 用法:
    this.addEvents('storeloaded', 'storecleared');
返回值:
  • void
Observable
addListener( String eventName, Function handler, [Object scope], [Object options] ) : void
给对象添加事件处理器。
给对象添加事件处理器。
参数:
  • eventName : String
    监听的事件名。
  • handler : Function
    事件调用的方法
  • scope : Object
    （可选）处理方法执行的作用域 (this的引用 reference)。 如果被忽略。默认为触发事件的对象。
  • options : Object
    （可选）包含处理器配置和属性的对象。 可能包含以下的属性:
    • scope : Object
      处理方法执行的作用域(this的引用) 。 如果被忽略。默认为触发事件的对象。
    • delay : Number
      在触发事件后延迟调用处理器的毫秒数。
    • single : Boolean
      如果为True则添加一个处理器来处理下一次的事件触发（仅一次），然后移除自己。
    • buffer : Number
      使得处理器延迟指定毫秒数后预定的运行在 一个Ext.util.DelayedTask中 。 如果事件在时间内再一次被触发，原始的处理器不会被调用，但是新的处理器会预定的在他的位置上。
    • target : Observable
      如果事件在目标的Observable上触发则仅仅调用处理器， 否则 事件会从子类的Observable上冒泡

    组合选项
    使用这些选项参数,可能会组合出不同类型的监听器：

    一个延迟的，一次性的监听器。

    myDataView.on('click', this.onClick, this, {
single: true,
delay: 100
});

    一次调用附加多个处理器
    该方法同样支持传递一个包含指定的多个处理器的属性的配置对象参数。

    myGridPanel.on({
'click' : {
    fn: this.onClick,
    scope: this,
    delay: 100
},
'mouseover' : {
    fn: this.onMouseOver,
    scope: this
},
'mouseout' : {
    fn: this.onMouseOut,
    scope: this
}
});

    或者一个简写的语法：

    myGridPanel.on({
'click' : this.onClick,
'mouseover' : this.onMouseOver,
'mouseout' : this.onMouseOut,
 scope: this
});
返回值:
  • void
Observable
applyToMarkup ( String/HTMLElement el ) : void
将此组件添加到已存在的有效的HTML标签中。 使用该方法时，无需再调用render()方法。
将此组件添加到已存在的有效的HTML标签中。 使用该方法时，无需再调用render()方法。
参数:
  • el : String/HTMLElement
返回值:
  • void
Component
clearInvalid () : void
清除当前表单项上的所有非法styles/messages(样式/消息)
清除当前表单项上的所有非法styles/messages(样式/消息)
参数:
  • 无。
返回值:
  • void
Field
cloneConfig ( Object overrides ) : Ext.Component
默认使用原先传递给当前实例的配置值克隆当前组件。
默认使用原先传递给当前实例的配置值克隆当前组件。
参数:
  • overrides : Object
    一个新的配置项，包含需要覆盖到克隆版本的所有属性。 可以传递一个id参数给此对象，否则将自动生成一个新的id以避免发生重复。
返回值:
  • Ext.Component
    当前组件的克隆副本
Component
destroy () : void
通过如下方法销毁对象：删除所有的事件监听器、将组件的元素从DOM树中删除...
通过如下方法销毁对象：删除所有的事件监听器、将组件的元素从DOM树中删除（如果可以）、 将组件从它的 Ext.Container（如果可用）中删除、 并且将它从Ext.ComponentMgr中 注销。 销毁操作一般由框架自动完成，一般情况下不需要直接调用该方法。
参数:
  • 无。
返回值:
  • void
Component
disable () : Ext.Component
将组件置为无效状态，并出发'disable'事件。
将组件置为无效状态，并出发'disable'事件。
参数:
  • 无。
返回值:
  • Ext.Component
    this
Component
enable () : Ext.Component
将组件置为有效状态并触发'enable'事件。
将组件置为有效状态并触发'enable'事件。
参数:
  • 无。
返回值:
  • Ext.Component
    this
Component
enableBubble( String/Array events ) :void
是否现在使得事件会被该Observable触发并调用 this.getBubbleTarget()方法在拥有者的继承树...

是否现在使得事件会被该Observable触发并调用 this.getBubbleTarget()方法在拥有者的继承树中冒泡。Observable的基础类中没有该方法的实现。

该方法一般被Ext.Components用来冒泡事件到拥有者的容器。参看Ext.Component.getBubbleTarget默认的实现 在Ext.Component中返回组件的直接拥有者。但是如果需要的是一个已知的目标，该方法可以被重写来更快的访问需求的目标。

例子:

Ext.override(Ext.form.Field, {
    // 添加方法到Field的initComponent上改变事件为冒泡
    initComponent : Ext.form.Field.prototype.initComponent.createSequence(function() {
        this.enableBubble('change');
    }),

    // 我们知道我们想让Field的事件冒泡到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() {
            // 如果样式被修改标题会变红。
            myForm.header.setStyle('color', 'red');
        }
    }
});
参数:
  • events : String/Array
    冒泡的事件名，或事件名数组
返回值:
  • void
Observable
findParentBy ( Function fn ) : Ext.Container
通过自定义的函数查找当前组件上层任何层次上的容器...
通过自定义的函数查找当前组件上层任何层次上的容器。 如果传递的函数返回true，容器对象将被返回。
参数:
  • fn : Function
    自定义的函数，使用如下参数调用(container,this component)。
返回值:
  • Ext.Container
    自定义函数返回true的第一个容器
Component
findParentByType ( String/Class xtype ) : Ext.Container
通过xtype或者class查找当前组件上层任何层次上的容器
通过xtype或者class查找当前组件上层任何层次上的容器
参数:
  • xtype : String/Class
    组件的xtype字符串，或者直接是组件的class
返回值:
  • Ext.Container
    符合指定xtype或者class的第一个容器
Component
fireEvent( String eventName, Object... args ) : Boolean
用传入的参数触发指定的事件 (减去事件名)。 一个事件可以被设置为冒泡 Obse...

用传入的参数触发指定的事件 (减去事件名)。

一个事件可以被设置为冒泡到Observable父类继承树(参看 Ext.Component.getBubbleTarget) 调用enableBubble实现。

参数:
  • eventName : String
    触发的事件名。
  • args : Object...
    传递给处理器的可变长度参数。
返回值:
  • Boolean
    如果有任何的处理器返回false则返回false，否则返回true。
Observable
focus ( [ Boolean selectText ], [ Boolean/Number delay ] ) : Ext.Component
尝试将当前组件设为焦点。
尝试将当前组件设为焦点。
参数:
  • selectText : Boolean
    (可选) 如果可用，同时选中组件内部的文本
  • delay : Boolean/Number
    (可选)将当前组件设置为焦点的延迟时间(设置为true等于0毫秒)
返回值:
  • Ext.Component
    this
Component
getActiveError () : String
获取当前表单项活动的出错消息。
获取当前表单项活动的出错消息。
参数:
  • 无。
返回值:
  • String
    返回表单项上活动的出错消息，如果没有错误，返回一个空字符串。
Field
getBox ( [ Boolean local ] ) : Object
获取组件底层元素当前盒子模型的尺寸。（译者注：盒子模型是CSS术语，详细解释请自行搜索。）
获取组件底层元素当前盒子模型的尺寸。（译者注：盒子模型是CSS术语，详细解释请自行搜索。）
参数:
  • local : Boolean
    (可选)值为true时，组件的left值和top值将代替页面的XY被返回。(默认值为false)
返回值:
  • Object
    返回值的格式{x, y, width, height}
BoxComponent
getBubbleTarget () : Ext.Container
为Observable的fireEvent方法提供链接，它沿着继承结构进行冒泡操作。
为Observable的fireEvent方法提供链接，它沿着继承结构进行冒泡操作。
参数:
  • 无。
返回值:
  • Ext.Container
    拥有当前组件的容器。
Component
getEl () : Ext.Element
返回 Ext.Element ，它包装了当前组件。...

返回 Ext.Element ，它包装了当前组件。

通常情况下，这将是一个<DIV>元素，它是由该类的onRender方法创建的， 但是可以使用autoEl配置项 覆盖它。

注意: 此元素将会一直处于无效状态直到当前组件渲染完成。

如需向当前组件的 DOM事件(而不是当前组件自己的Observable事件)添加监听器， 更多建议，参见 listeners 配置项，或者直接使用一个render监听器:

new Ext.Panel({
    title: 'The Clickable Panel',
    listeners: {
        render: function(p) {
            // Append the Panel to the click handler's argument list.
            p.getEl().on('click', handlePanelClick.createDelegate(null, [p], true));
        },
        single: true  // Remove the listener after first invocation
    }
});
参数:
  • 无。
返回值:
  • Ext.Element
    包装当前组件的元素。
Component
getErrors () : Array
运行当前表单项的校验器并返回一个所有校验错误信息数组。 此方法在校验期间在内部调用并且一般情况下...
运行当前表单项的校验器并返回一个所有校验错误信息数组。 此方法在校验期间在内部调用并且一般情况下不需要手工调用。 每个子类都应该重写或者增加返回值以提供它们自己的出错消息
参数:
  • 无。
返回值:
  • Array
    当前表单项的所有出错消息
Field
getHeight () : Number
获取该组件的当前高度值。
获取该组件的当前高度值。
参数:
  • 无。
返回值:
  • Number
BoxComponent
getId () : String
返回当前组件的id，如果没有定义id，则自动生成并返回一个id:'ext-comp-'...
返回当前组件的 id 如果没有定义 id 则自动生成并返回一个 id

'ext-comp-' + (++Ext.Component.AUTO_ID)
参数:
  • 无。
返回值:
  • String
    id
Component
getItemId () : String
返回当前组件的 itemId 。 如果没有通过配置参数指定 itemId 那么，将会使用...
返回当前组件的 itemId 。 如果没有通过配置参数指定 itemId 那么，将会使用 getId 返回 id 。
参数:
  • 无。
返回值:
  • String
Component
getName () : String
如果可用，返回表单项的 name 或者 hiddenName 属性。
如果可用，返回表单项的 name 或者 hiddenName 属性。
参数:
  • 无。
返回值:
  • String
    name 表单项的{@link Ext.form.Field#name name}或者{@link Ext.form.ComboBox#hiddenName hiddenName}
Field
getOuterSize () : Object
获取当前组件所在元素的尺寸大小，包括边缘的空白处。
获取当前组件所在元素的尺寸大小，包括边缘的空白处。
参数:
  • 无。
返回值:
  • Object
    一个包含元素大小的对象 {width: (element width + left/right margins), height: (element height + top/bottom margins)}
BoxComponent
getPosition ( [ Boolean local ] ) : Array
获取组件底层元素当前的XY位置。
获取组件底层元素当前的XY位置。
参数:
  • local : Boolean
    (可选)如果为true，将返回元素的left和top值，而不是相对于页面内的 XY。(默认值为 false)
返回值:
  • Array
    元素的XY位置值(例如：[100, 200])
BoxComponent
getRawValue () : Mixed
返回原始数据值，可能不是一个合法的、已定义的值。 返回格式化的值参见...
返回原始数据值，可能不是一个合法的、已定义的值。 返回格式化的值参见 getValue。
参数:
  • 无。
返回值:
  • Mixed
    value 表单项的值
Field
getResizeEl () : Ext.Element
返回该组件的最外层用来定义这些组件整体大小的Element...

返回该组件的最外层用来定义这些组件整体大小的Element对象。

通常用 getEl 方法将会返回相同的Element对象，但在有些情况下，组件可能有一些更多的封装了它的主要动态Element对象的Element对象。

例如ComboBox。它是封装在一个包含<input>元素的包装元素里(这将返回其 getEl方法和触发按钮的元素)。返回的元素为resizeEl。

参数:
  • 无。
返回值:
  • Ext.Element
    The Element which is to be resized by size managing layouts.
BoxComponent
getSize () : Object
获取组件底层元素当前的大小。
获取组件底层元素当前的大小。
参数:
  • 无。
返回值:
  • Object
    一个包含元素大小的对象{width: (element width), height: (element height)}
BoxComponent
getValue () : Mixed
返回格式化的数据值(undefined或者emptyText将会以''返回)。 如需返回原始值，参见...
返回格式化的数据值(undefined或者emptyText将会以''返回)。 如需返回原始值，参见 getRawValue。
参数:
  • 无。
返回值:
  • Mixed
    value 表单项的值
Field
getWidth () : Number
获取该组件的当前宽度值。
获取该组件的当前宽度值。
参数:
  • 无。
返回值:
  • Number
BoxComponent
getXType () : String
获取当前组件的xtype，它是用 Ext.ComponentMgr 注册的。 所有可用的xtype列表，参见...
获取当前组件的xtype，它是用 Ext.ComponentMgr 注册的。 所有可用的xtype列表，参见 Ext.Component 类头部。示例用法:

var t = new Ext.form.TextField();
alert(t.getXType());  // alerts 'textfield'
参数:
  • 无。
返回值:
  • String
    The xtype
Component
getXTypes () : String
返回此组件的xtype继承树，用字符'-'分隔。 所有可用的xtype值...

返回此组件的xtype继承树，用字符'-'分隔。 所有可用的xtype值，请参见Ext.Component 类的头部。

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

示例用法:

var t = new Ext.form.TextField();
alert(t.getXTypes());  // alerts 'component/box/field/textfield'
参数:
  • 无。
返回值:
  • String
    xtype层次字符串
Component
hasListener( String eventName ) : Boolean
检测对象是否包含指定事件的任何监听器
检测对象是否包含指定事件的任何监听器
参数:
  • eventName : String
    检测的事件名
返回值:
  • Boolean
    如果事件被监听则为true，否则为false
Observable
hide () : Ext.Component
隐藏当前组件。 监听 beforehide' 事件并且返回false 可以取消隐藏组件的操作。 在隐藏组件之后触发...
隐藏当前组件。 监听 beforehide' 事件并且返回false 可以取消隐藏组件的操作。 在隐藏组件之后触发 ' hide' 事件。 如果组件被配置成 hidden 那么此方法在内部被调用。
参数:
  • 无。
返回值:
  • Ext.Component
    this
Component
isDirty () : Boolean
如果此表单项的值与原始值相比发生了改变，返回true。 如果表单项...

如果此表单项的值与原始值相比发生了改变，返回true。 如果表单项被禁用或者尚未被渲染将会返回false。

注意，如果所属的 form 配置了一个Ext.form.BasicForm， 那么在使用Ext.form.BasicForm. setValues 加载值之后，原始值将会被更新。

参数:
  • 无。
返回值:
  • Boolean
    如果此表单项的值与原始值相比发生了改变(并且没有被禁用)，返回true，其它返回false。
Field
isValid ( Boolean preventMark ) : Boolean
通过 校验 表单项 处理后的值 ，返回表单项当前值是否合法。...
通过 校验 表单项 处理后的值 ，返回表单项当前值是否合法。 注意: disabled 的表单项将会被忽略。
参数:
  • preventMark : Boolean
    True将会禁止把表单项标记为非法
返回值:
  • Boolean
    如果值是合法的，为true，其它为false
Field
isVisible () : Boolean
如果当前组件可见，返回true。
如果当前组件可见，返回true。
参数:
  • 无。
返回值:
  • Boolean
    如果当前组件可见，返回true，其它返回false。
Component
isXType ( String xtype , [ Boolean shallow ] ) : Boolean
Tests whether or not this Component is of a specific xtype. This can test whether this Component is descended from th...

测试此组件是否是指定的xtype。此方法既可以测试是否是指定的xtype的某个子类， 或者它是否直接是指定的xtype类(shallow=true)。

如果使用你自己的子类，必须知道组件必须注册它的xtype值。

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

示例用法:

var t = new Ext.form.TextField();
var isText = t.isXType('textfield');        // true
var isBoxSubclass = t.isXType('box');       // true, descended from BoxComponent
var isBoxInstance = t.isXType('box', true); // false, not a direct BoxComponent instance
参数:
  • xtype : String
    需要为当前组件进行检测的xtype
  • shallow : Boolean
    (可选) 如果为false，检测组件是否是xtype继承树中的某个子类（默认是这种情况）， 如果为true，只检测组件是否是指定的xtype类型。
返回值:
  • Boolean
    如果当前组件是指定xtype的子类，返回true，其它返回flase。
Component
markInvalid ( [ String msg ] ) : void
显示一个关联到当前表单项的出错信息， 使用msgTarget 来决定如何显示消息并将...

显示一个关msgTarget 来决定如何显示消息并将 invalidClass 应用到表单项的UI元素上。

注意: 如果表单项的值确实通过了校验， 此方法不会导致表单项的 validate 方法返回 false 。 所以简单地把一个表单项标记为非法并不会阻止表单项 通过设置的 Ext.form.Action.Submit.clientValidation 被提交。

invalid.
参数:
  • msg : String
    (可选)校验信息(默认为invalidText)
返回值:
  • void
Field
mon ( Observable|Element item , Object|String ename , Function fn , Object scope , Object opt ) : void
向任何Observable对象(或者元素)上添加监听器，监听器将会在组件...

向任何Observable对象(或者元素)上添加监听器，监听器将会在组件销毁时被自动删除。
用法：

myGridPanel.mon(myGridPanel.getSelectionModel(), 'selectionchange', handleSelectionChange, null, {buffer: 50});

or:

myGridPanel.mon(myGridPanel.getSelectionModel(), {
    selectionchange: handleSelectionChange,
    buffer: 50
});
参数:
  • item : Observable|Element
    需要添加listener/listeners的项目。
  • ename : Object|String
    事件名，或者一个包含事件名属性的对象。
  • fn : Function
    (可选) 如果 ename 参数是一个事件名，此参数为处理函数。
  • scope : Object
    (可选)如果 ename 参数是一个事件名称，此参数是作用域 ( this 引用)，监听函数将会在此作用域中被执行。
  • opt : Object
    (可选)如果 ename 参数是一个事件名称， 此参数是 addListener 配置项。
返回值:
  • void
Component
mun ( Observable|Element item , Object|String ename , Function fn , Object scope ) : void
删除通过mon 方法添加的监听器。
删除通过mon 方法添加的监听器。
参数:
  • item : Observable|Element
    需要删除listener/listeners的项目。
  • ename : Object|String
    事件名称，或者一个包含事件名称属性的对象。
  • fn : Function
    (可选)如果 ename 参数是一个事件名称，此参数是一个处理函数。
  • scope : Object
    (可选)如果 ename 参数是一个事件名称，此参数是作用域 ( this 引用)，监听函数将会在此作用域中被执行。
返回值:
  • void
Component
nextSibling () : Ext.Component
返回所属容器中的下一个组件
返回所属容器中的下一个组件
参数:
  • 无。
返回值:
  • Ext.Component
Component
on( String eventName, Function handler, [Object scope], [Object options] ) : void
给对象添加事件处理器 (addListener的简写形式)
给对象添加事件处理器 (addListener的简写形式。)
参数:
  • eventName : String
    监听的事件类型
  • handler : Function
    事件调用的方法
  • scope : Object
    （可选）处理方法执行时的作用域 (this 的引用)。 如果被忽略。默认为触发事件的对象。
  • options : Object
    可选 包含处理器配置的对象。
返回值:
  • void
Observable
previousSibling () : Ext.Component
返回所属容器中的前一个组件
返回所属容器中的前一个组件
参数:
  • 无。
返回值:
  • Ext.Component
Component
processValue ( Mixed value ) : void
仅仅在需要准备原始值供校验时，才需要覆盖此方法(参见 validate和 isValid)。...
仅仅在需要准备原始值供校验时，才需要覆盖此方法(参见 validate和 isValid)。 此方法被期望为表单项返回处理后的值，此值将会被用来进行校验 (参见validateValue方法)。
参数:
  • value : Mixed
返回值:
  • void
Field
purgeListeners() : void
移除对象上所有的监听器
移除对象上所有的监听器
参数:
  • 无。
返回值:
  • void
Observable
relayEvents( Object o, Array events ) : void
从指定的Observable上传递选择的事件就好像被当前对象触发一样。
从指定的Observable上传递选择的事件就好像被当前对象触发一样。
参数:
  • o : Object
    该Observable上的事件被当前对象传递。
  • events : Array
    传递的数组名。
返回值:
  • void
Observable
removeClass ( string cls ) : Ext.Component
从组件底层的元素上删除一个CSS类。
从组件底层的元素上删除一个CSS类。
参数:
  • cls : string
    需要移除的CSS类名
返回值:
  • Ext.Component
    this
Component
removeListener( String eventName, Function handler, [Object scope] ) : void
删除一个事件处理器。
删除一个事件处理器。
参数:
  • eventName : String
    处理器关联的事件类型。
  • handler : Function
    移除的处理器。 这应该是传递到addListener里的方法的引用。
  • scope : Object
    （可选）处理器指定的初始作用域。
返回值:
  • void
Observable
render ( [ Element/HTMLElement/String container ], [ String/Number position ] ) : void
在传递进来的HTML元素中渲染当前组件。...

在传递进来的HTML元素中渲染当前组件。

如果你正在使用一个Container 对象放置当前组件，那么请不要使用render方法。

当容器第一次被渲染时，它的子组件将会被容器的 layout 管理器渲染。

某些布局管理器允许动态添加子组件。它们包括 Ext.layout.CardLayout, Ext.layout.AnchorLayout, Ext.layout.FormLayout, Ext.layout.TableLayout。

当一个新的子组件被添加时，如果容器已经被渲染了， 你可能需要调用容器的 doLayout 方法来刷新视图，它将导致所有没有被渲染的子组件进行渲染操作。 此操作是必须的，这样你可以添加多个子组件而只刷新一次layout。

当创建复杂的UI时，非常重要的一点是，请记住调整子项目的尺寸和位置是容器的 layout 管理器的职责。 如果你希望子项目的尺寸对用户交互作出反应， 你必须为容器配置一个布局管理器，它将创建和管理你心里想要的那种布局。

忽略容器的layout 配置意味着将会使用一个基本的布局管理器，它除了按次序把子组件 渲染到容器中之外什么事情都不做。 这种情况下，任何尺寸和位置的调整操作都不会发生。

参数:
  • container : Element/HTMLElement/String
    (可选) 需要在其中渲染当前组件的元素。 如果它是从一个已存在的标签中创建的，此参数应该被忽略。
  • position : String/Number
    (可选) 容器中的一个元素ID或者一个DOM节点索引， 当前组件将会被插入到它前面 (默认append到容器的尾部)
返回值:
  • void
Component
reset () : void
将表单项的当前值重置为以前加载时的值，并且清除所有校验信息。...
将表单项的当前值重置为以前加载时的值，并且清除所有校验信息。 参见Ext.form.BasicForm. trackResetOnLoad 。
参数:
  • 无。
返回值:
  • void
Field
resumeEvents() : void
重新开始触发事件。(参见suspendEvents) 如果事件以queueSuspended参数被挂起，则在事件被挂起时 ...
重新开始触发事件。(参见 suspendEvents) 如果事件以queueSuspended 参数被挂起，则在事件被挂起时触发的事件会被传递到所有的监听器上
参数:
  • 无。
返回值:
  • void
Observable
setActiveError ( String msg , Boolean suppressEvent ) : void
将当前activeError设置为所给的字符串。 触发'invalid'事件。这不会设置出错图标...
将当前activeError设置为所给的字符串。 触发'invalid'事件。这不会设置出错图标，仅仅设置消息并触发事件。 如需显示出错图标，可使用markInvalid代替，它将在内部调用此方法。
参数:
  • msg : String
    出错消息
  • suppressEvent : Boolean
    True将会禁止触发'invalid'事件
返回值:
  • void
Field
setAutoScroll ( Boolean scroll ) : Ext.BoxComponent
设置该组件内容溢出时是否自动显示滚动条。
设置该组件内容溢出时是否自动显示滚动条。
参数:
  • scroll : Boolean
    值为true的话组件自动显示滚动条。
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setDisabled ( Boolean disabled ) : Ext.Component
工具函数，使用布尔值设置有效/无效(disabled/enabled )。
工具函数，使用布尔值设置有效/无效(disabled/enabled )。
参数:
  • disabled : Boolean
返回值:
  • Ext.Component
    this
Component
setHeight ( Mixed height ) : Ext.BoxComponent
设置此组件的高度。该方法将触发resize事件。
设置此组件的高度。该方法将触发resize事件。
参数:
  • height : Mixed
    The new height to set.
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setPagePosition ( Number x , Number y ) : Ext.BoxComponent
设置组件在页面中的XY位置。 如果需要设置left和top值 ，请使用...
设置组件在页面中的XY位置。 如果需要设置left和top值 ，请使用setPosition方法。 该方法触发move事件。
参数:
  • x : Number
    The new x position
  • y : Number
    The new y position
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setPosition ( Number left , Number top ) : Ext.BoxComponent
设置组件的left和top值。设置组件的页面XY值，请使用setPagePosition方法。该方法触发...
设置组件的left和top值。设置组件的页面XY值，请使用setPagePosition方法。该方法触发move事件。
参数:
  • left : Number
    The new left
  • top : Number
    The new top
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setRawValue ( Mixed value ) : Mixed
绕过校验，直接设置底层DOM表单项的值。 设置值并进行校验，参见 setValue。
绕过校验，直接设置底层DOM表单项的值。 设置值并进行校验，参见 setValue。
参数:
  • value : Mixed
    需要设置的值
返回值:
  • Mixed
    value 被设置的表单项值
Field
setReadOnly ( Boolean readOnly ) : void
设置当前表单项的只读状态。
设置当前表单项的只读状态。
参数:
  • readOnly : Boolean
    表单项是否应该只读。
返回值:
  • void
Field
setSize ( Mixed width , Mixed height ) : Ext.BoxComponent
设置BoxComponent的宽度和高度。 此方法触发resize事件...
设置BoxComponent的宽度和高度。 此方法触发resize事件。此方法可以接收单独的width或者height值作为参数， 或者你可以传递像这样的一个size对象： {width:10, height:20} 。
参数:
  • width : Mixed
    设置的新的width值。这可以是：
    • 一个Number类型指定Element新的宽度 Ext.Element.defaultUnit(默认为像素 :'px')。
    • 一个String类型用于设置width的CSS样式。
    • 一个size对象格式为 {width: widthValue, height: heightValue} 。
    • 值为 undefined 时，保留原来的width不变。
  • height : Mixed
    设置的新的height值(如果第一个参数传递了一个size对象，此参数没有必要传递)。这可以是：
    • 一个Number类型指定Element新的高度 Ext.Element.defaultUnit(默认为像素 :'px')。
    • 一个String类型用于设置height的CSS样式。也有可能不会被使用到。
    • 值为 undefined 时，保留原来的height不变。
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setValue ( Mixed value ) : Ext.form.Field
向表单项中设置一个数据值并校验之。 如需直接设置值而不进行校验，参见 setRawValue。
向表单项中设置一个数据值并校验之。 如需直接设置值而不进行校验，参见 setRawValue。
参数:
  • value : Mixed
    需要设置的值
返回值:
  • Ext.form.Field
    this
Field
setVisible ( Boolean visible ) : Ext.Component
工具方法，通过使用布尔值隐藏或者显示当前组件。
工具方法，通过使用布尔值隐藏或者显示当前组件。
参数:
  • visible : Boolean
    true时显示，false时隐藏
返回值:
  • Ext.Component
    this
Component
setWidth ( Mixed width ) : Ext.BoxComponent
设置组件的宽度。 此方法触发resize事件。
设置组件的宽度。 此方法触发resize事件。
参数:
  • width : Mixed
    The new width to set.
返回值:
  • Ext.BoxComponent
    this
BoxComponent
show () : Ext.Component
显示当前组件。监听' beforeshow' 事件，返回 false 取消显示组件...
显示当前组件。监听' beforeshow' 事件，返回 false 取消显示组件。在显示组件之后触发' show' 事件。
参数:
  • 无。
返回值:
  • Ext.Component
    this
Component
suspendEvents( Boolean queueSuspended ) : void
暂停触发所有的事件。 (参看resumeEvents)
暂停触发所有的事件。（参看 resumeEvents)
参数:
  • queueSuspended : Boolean
    如果传递为true则排列好暂停的事件使得在调用 resumeEvents 后再触发它们，而不是抛弃所有暂停的事件。
返回值:
  • void
Observable
syncSize () : Ext.BoxComponent
强制组件的大小按照此组件底层元素当前的高度和宽度计算。
强制组件的大小按照此组件底层元素当前的高度和宽度计算。
参数:
  • 无。
返回值:
  • Ext.BoxComponent
    this
BoxComponent
un( String eventName, Function handler, [Object scope] ) : void
删除一个事件处理器(removeListener方法的简写形式)
删除一个事件处理器(removeListener方法的简写形式。)
参数:
  • eventName : String
    处理器关联的事件类型
  • handler : Function
    被删除的处理器 这应该是传入 addListener 中的方法的引用。
  • scope : Object
    （可选）为处理器指定的初始作用域。
返回值:
  • void
Observable
unsetActiveError ( Boolean suppressEvent ) : void
清除activeError并触发'valid'事件。此方法被clearInvalid在内部进行...
清除activeError并触发'valid'事件。此方法被clearInvalid在内部进行调用， 并且一般情况下没有必要手工调用
参数:
  • suppressEvent : Boolean
    True将禁止触发'invalid'事件
返回值:
  • void
Field
update ( Mixed htmlOrData , [ Boolean loadScripts ], [ Function callback ] ) : void
刷新组件的内部区域。
刷新组件的内部区域。
参数:
  • htmlOrData : Mixed
    如果已经通过tpl为当前组件配置了一个模板，那么 将会使用此参数来装配模板。 如果没有为当前组件配置模板，组件的内容区域将会通过Ext.Element 进行刷新。
  • loadScripts : Boolean
    (可选)只用在使用html配置时此参数才合法。默认为false。
  • callback : Function
    (可选)只用在使用html配置时此参数才合法。 当脚本加载完成时回调函数才被执行。
返回值:
  • void
Component
updateBox ( Object box ) : Ext.BoxComponent
设置此组件底层元素的盒子模型尺寸。(译者注：盒子模型是CSS术语，详细资料请自行搜索。)
设置此组件底层元素的盒子模型尺寸。(译者注：盒子模型是CSS术语，详细资料请自行搜索。)
参数:
  • box : Object
    一个格式为{x, y, width, height}的对象
返回值:
  • Ext.BoxComponent
    this
BoxComponent
validate () : Boolean
校验表单项的值
校验表单项的值
参数:
  • 无。
返回值:
  • Boolean
    如果值合法，为true,否则为false
Field
validateValue ( Mixed The ) : Boolean
使用getErrors创建一个校验出错信息数组。 如果发现了任何错误，将会使用第一个错误作为参数...
使用getErrors创建一个校验出错信息数组。 如果发现了任何错误，将会使用第一个错误作为参数调用markInvalid方法并返回 false，否则返回true。以前，要求子类提供此方法的一个实现以处理校验过程--- 从3.2开始，应该用覆盖getErrors方法的方式替代。
参数:
  • The : Mixed
    表单项的当前值
返回值:
  • Boolean
    如果所有校验都通过，此值为true，如果一个或多个校验失败，则为false
Field

公共事件

Event Defined By
added : ( Ext.Component this , Ext.Container ownerCt , number index )
当一个组件被添加到一个Ext.Container时触发
当一个组件被添加到一个Ext.Container时触发
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • ownerCt : Ext.Container
    用于组件的容器
  • index : number
    添加组件的位置
Component
afterrender : ( Ext.Component this )
在组件渲染完成之后触发...

在组件渲染完成之后触发。

afterrender事件在当前组件被rendered 结束之后、在为组件定义的所有afterRender方法执行之后 触发，并且，如果有stateful， 也在状态被保存之后才触发。

监听器将会以如下参数格式被调用:
  • this : Ext.Component
Component
beforedestroy : ( Ext.Component this )
在组件 destroyed 之前触发。 在事件监听器中返回false以停止 destroy 操作。
在组件 destroyed 之前触发。 在事件监听器中返回false以停止 destroy 操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforehide : ( Ext.Component this )
在调用hide方法隐藏组件之前触发。 在事件监听器中返回false可以停止隐藏操作。
在调用hide方法隐藏组件之前触发。 在事件监听器中返回false可以停止隐藏操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforerender : ( Ext.Component this )
在组件被rendered 之前触发。 在事件监听器中返回false可以停止render 操作。
在组件被rendered 之前触发。 在事件监听器中返回false可以停止render 操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforeshow : ( Ext.Component this )
在调用show()方法现实组件之前触发。 事件处理函数返回false可以停止show。
在调用show 方法现实组件之前触发。 事件处理函数返回false可以停止show。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforestaterestore : ( Ext.Component this , Object state )
在组件状态恢复之前触发。返回false停止恢复状态操作。
在组件状态恢复之前触发。返回false停止恢复状态操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    StateProvider返回的状态哈希值。 如果没有禁止此事件，那么状态对象会被传递给applyState。 默认情况下，这样简单地把属性值拷贝到当前组件中。 可以覆盖此方法以提供自定的状态恢复操作。
Component
beforestatesave : ( Ext.Component this , Object state )
在组件状态被保存到配置的状态提供者之前触发。 返回false可以停止保存。
在组件状态被保存到配置的状态提供者之前触发。 返回false可以停止保存。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    状态值哈希。 这由在组件上调用getState() 方法决定。 此方法必须由开发者提供，返回是否需要对状态进行描述，默认情况下， Ext.Component有一个空实现。
Component
blur : ( Ext.form.Field this )
当表单项时区输入焦点时触发。
当表单项时区输入焦点时触发。
监听器将会以如下参数被调用:
  • this : Ext.form.Field
Field
change : ( Ext.form.Field this , Mixed newValue , Mixed oldValue )
如果表单项的时发生改变，在表单项刚刚失去焦点时触发。
如果表单项的时发生改变，在表单项刚刚失去焦点时触发。
监听器将会以如下参数格式调用:
  • this : Ext.form.Field
  • newValue : Mixed
    新的值
  • oldValue : Mixed
    原始值
Field
destroy : ( Ext.Component this )
在组件被销毁之后触发。
在组件被destroyed之后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
disable : ( Ext.Component this )
在组件被设置为无效状态后触发。
在组件被设置为无效状态后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
enable : ( Ext.Component this )
当组件被设置为有效(enabled)之后触发。
当组件被设置为有效(enabled)之后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
focus : ( Ext.form.Field this )
当表单项获得输入焦点时触发。
当表单项获得输入焦点时触发。
监听器将会以如下参数格式被调用:
  • this : Ext.form.Field
Field
hide : ( Ext.Component this )
在组件被隐藏之后触发。 当调用hide 方法隐藏组件之后触发。
在组件被隐藏之后触发。 当调用hide 方法隐藏组件之后触发。
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
invalid : ( Ext.form.Field this , String msg )
在表单项被标记为非法之后触发。
在表单项被标记为非法之后触发。
监听器将会以如下参数格式调用:
  • this : Ext.form.Field
  • msg : String
    校验信息
Field
move : ( Ext.Component this , Number x , Number y )
在组件移动之后触发。
在组件移动之后触发。
监听器将会用如下的参数格式来调用:
  • this : Ext.Component
  • x : Number
    The new x position
  • y : Number
    The new y position
BoxComponent
removed : ( Ext.Component this , Ext.Container ownerCt )
当一个组件被从Ext.Container容器中删除时触发
当一个组件被从Ext.Container容器中删除时触发
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • ownerCt : Ext.Container
    持有组件的容器
Component
render : ( Ext.Component this )
在组件被渲染之后触发。
在组件被 rendered(渲染) 之后触发。
监听器将以如下的参数格式被调用:
  • this : Ext.Component
Component
resize : ( Ext.Component this , Number adjWidth , Number adjHeight , Number rawWidth , Number rawHeight )
在组件被调整大小之后触发。
在组件被调整大小之后触发。
监听器将以如下的参数格式被调用:
  • this : Ext.Component
  • adjWidth : Number
    这是width调整后的值
  • adjHeight : Number
    这是height调整后的值
  • rawWidth : Number
    这是width原来的值
  • rawHeight : Number
    这是height原来的值
BoxComponent
show : ( Ext.Component this )
在调用show 方法显示组件之后触发。
在调用show 方法显示组件之后触发。
监听器将会用如下的参数格式被调用:
  • this : Ext.Component
Component
specialkey : ( Ext.form.Field this , Ext.EventObject e )
当任何和导航有关的键被按下时触发(上下左右箭头, tab, 回车,esc, 等等) is pressed. 处理其它按键参见...
当任何和导航有关的键被按下时触发(上下左右箭头, tab, 回车,esc, 等等) is pressed. 处理其它按键参见 Ext.Panel.keys或者 Ext.KeyMap。 你可以检测 Ext.EventObject.getKey 以便获知哪个键被按下。例如：
var form = new Ext.form.FormPanel({
    ...
    items: [{
            fieldLabel: 'Field 1',
            name: 'field1',
            allowBlank: false
        },{
            fieldLabel: 'Field 2',
            name: 'field2',
            listeners: {
                specialkey: function(field, e){
                    // e.HOME, e.END, e.PAGE_UP, e.PAGE_DOWN,
                    // e.TAB, e.ESC, arrow keys: e.LEFT, e.RIGHT, e.UP, e.DOWN
                    if (e.getKey() == e.ENTER) {
                        var form = field.ownerCt.getForm();
                        form.submit();
                    }
                }
            }
        }
    ],
    ...
});
监听器将会以如下参数格式被调用:
  • this : Ext.form.Field
  • e : Ext.EventObject
    事件对象
Field
staterestore : ( Ext.Component this , Object state )
组件状态被存储之后触发。
组件状态被存储之后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    StateProvider返回的状态哈希值。 如果没有禁止此事件，那么状态对象会被传递给applyState。 默认情况下，这样简单地把属性值拷贝到当前组件中。 可以覆盖此方法以提供自定的状态恢复操作。
Component
statesave : ( Ext.Component this , Object state )
在组件状态被保存到所配置的状态提供者之后触发。
在组件状态被保存到所配置的状态提供者之后触发。
监听器将会用如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    状态值hash。 这是由在足见上调用getState() 方法决定的。 开发者必须提供此方法以返回是否需要恢复状态，默认情况下， Ext.Component有一个空实现。
Component
valid : ( Ext.form.Field this )
在表单项被校验无错误之后触发。
在表单项被校验无错误之后触发。
监听器将会以如下参数格式被调用:
  • this : Ext.form.Field
Field


Observable
    Component
      BoxComponent
        Container
          Panel
            FieldSet

Class Ext.form.FieldSet

包: | Ext.form
定义类的文件: | FieldSet.js
类: | FieldSet
继承自: | Panel
标准容器，用来对form 中的项目进行分组。
var form = new Ext.FormPanel({
    title: 'Simple Form with FieldSets',
    labelWidth: 75, // label settings here cascade unless overridden
    url: 'save-form.php',
    frame:true,
    bodyStyle:'padding:5px 5px 0',
    width: 700,
    renderTo: document.body,
    layout:'column', // arrange items in columns
    defaults: {      // defaults applied to items
        layout: 'form',
        border: false,
        bodyStyle: 'padding:4px'
    },
    items: [{
        // Fieldset in Column 1
        xtype:'fieldset',
        columnWidth: 0.5,
        title: 'Fieldset 1',
        collapsible: true,
        autoHeight:true,
        defaults: {
            anchor: '-20' // leave room for error icon
        },
        defaultType: 'textfield',
        items :[{
                fieldLabel: 'Field 1'
            }, {
                fieldLabel: 'Field 2'
            }, {
                fieldLabel: 'Field 3'
            }
        ]
    },{
        // Fieldset in Column 2 - Panel inside
        xtype:'fieldset',
        title: 'Show Panel', // title, header, or checkboxToggle creates fieldset header
        autoHeight:true,
        columnWidth: 0.5,
        checkboxToggle: true,
        collapsed: true, // fieldset initially collapsed
        layout:'anchor',
        items :[{
            xtype: 'panel',
            anchor: '100%',
            title: 'Panel inside a fieldset',
            frame: true,
            height: 100
        }]
    }]
});

配置项

Config Options Defined By
allowDomMove : Boolean
在渲染时组件是否可以移动Dom节点(默认为true)。
Component
anchor : String
注: 这个配置只用于该组件被包含在一个已使用AnchorLayout...

注: 这个配置只用于该组件被包含在一个已使用 AnchorLayout (或者其子类)配置的Container时。 基于布局管理器，例如：

  • Ext.form.FormPanel
  • 指定 layout: 'anchor' // or 'form', or 'absolute'

参见 Ext.layout.AnchorLayout. anchor 。

BoxComponent
animCollapse : Boolean
true当面板折叠时将会使用动画转换效果， false将跳过动画(默认为 false).
FieldSet
autoDestroy : Boolean
如果为true，容器将自动销毁任何从其中被删除的组件， 否则...
如果为true，容器将自动销毁任何从其中被删除的组件， 否则必须手动处理销毁操作(默认为true)。
Container
autoHeight : Boolean
如果值为true，height配置项为'auto'，否则值为false的话使用固定的高度...

如果值为true，height配置项为'auto'，否则值为false的话使用固定的高度， 或者可以由其父类容器 layout manager来控制。(默认值为 false)。

注: 虽然很多组件继承了这个配置选项，但不是所有这些组件的自适应高度配置都会像期望的那样起作用。 设置autoHeight：值为true时，浏览器将根据元素的内容自动设置高度，这将意味着Ext不会去管理高度。

如果是由浏览器来管理高度，需要注意的是，通过浏览器进行调整的结构组件内不能被发现， 因此宽度的变化可能导致需要进行同步处理元素的高度。 例如：

var w = new Ext.Window({
    title: 'Window',
    width: 600,
    autoHeight: true,
    items: {
        title: 'Collapse Me',
        height: 400,
        collapsible: true,
        border: false,
        listeners: {
            beforecollapse: function() {
                w.el.shadow.hide();
            },
            beforeexpand: function() {
                w.el.shadow.hide();
            },
            collapse: function() {
                w.syncShadow();
            },
            expand: function() {
                w.syncShadow();
            }
        }
    }
}).show();
Panel
autoLoad : Object/String/Function
一个合法的url描述，依照Updater Ext.Updater.update 方法...
一个合法的url描述，依照Updater Ext.Updater.update 方法。如果autoLoad不为null，panel将会在渲染之后立即尝试加载它的内容。

URL将会成为当前panel的body元素的默认URL，这样它可以在任意时刻被 refresh.

Panel
autoScroll : Boolean
如果值为true，将会在该元素上使用overflow:'auto'配置，并且在必要的时候...
如果值为true，将会在该元素上使用overflow:'auto'配置，并且在必要的时候自动显示滚动条，否则，溢出部分的组件都会被切除(默认值为 false)。
BoxComponent
autoShow : Boolean
如果组件需要检测隐藏CSS属性(如 'x-hidden' 或者 'x-hide-display')并且在渲染时删除...
如果组件需要检测隐藏CSS属性(如 'x-hidden' 或者 'x-hide-display')并且在渲染时删除它们 (默认为false)，设置此值为true。
Component
autoWidth : Boolean
如果为true，使用width:'auto'配置，否则使用固定的宽度...

如果为true，使用width:'auto'配置，否则使用固定的宽度，或者可以由其父类容器的layout manager来控制。(默认值为 false)。

注: 虽然很多组件继承了这个配置选项，但不是所有这些组件的自适应宽度配置都会像期望的那样起作用。 设置autoWidth：值为true时，浏览器将根据元素的内容自动设置宽度，这将意味着Ext不会去管理宽度。

如果是由浏览器来管理宽度，需要注意的是，通过浏览器进行调整的结构组件内不能被发现，因此宽度的变化可能导致需要进行同步处理元素的宽度。 例如，在这个元素的目标是：

<div id='grid-container' style='margin-left:25%;width:50%'></div>
当浏览器窗口改变时，渲染后的Panel必须监听浏览器窗口大小的变化，以便通知子项，浏览器改变了其宽度：

var myPanel = new Ext.Panel({
    renderTo: 'grid-container',
    monitorResize: true, // relay on browser resize
    title: 'Panel',
    height: 400,
    autoWidth: true,
    layout: 'hbox',
    layoutConfig: {
        align: 'stretch'
    },
    defaults: {
        flex: 1
    },
    items: [{
        title: 'Box 1',
    }, {
        title: 'Box 2'
    }, {
        title: 'Box 3'
    }],
});
BoxComponent
baseCls : String
设置到fieldset上的基本CSS类(默认为'x-fieldset').
FieldSet
bbar : Object/Array
panel底部工具栏。 此参数可以是一个Ext.Toolbar 、一个工具栏配置项，或者一个buttons/button配置数组---用来被添加到工具栏中...

panel底部工具栏。 此参数可以是一个Ext.Toolbar 、一个工具栏配置项，或者一个buttons/button配置数组---用来被添加到工具栏中。 注意，此参数在渲染之后是无效的。如果在渲染之后需要访问底部工具栏 ，请使用 getBottomToolbar。

注意:尽管Toolbar可以包含Field组件，但它们不会 通过加载祖先FormPanel而被更新。Panel的工具栏不是标准Container->Component 层次的一部分，所以它们不会被扫面以收集表单项。但是，这些值还是会 被提交，因为提交表单的参数是从DOM树中收集的。

Panel
bbarCfg : Object
一个 ADomHelper 元素的配置对象，描述了当前Panelbbar元素的结构...

一个DomHelper 元素的配置对象，描述了当前Panel的bbar元素结构。 另请参见 bodyCfg 。

Panel
bodyCfg : Object
一个DomHelper 元素描述对象，可以被指定给任何Panel Element...

一个DomHelper 元素描述对象，可以被指定给任何Panel Element.

默认情况下，以下表格中的Default元素将会被用作html标签，用来创建一个子元素 ，与Default类名相匹配( baseCls 将会被 baseCls 替换 ):

Panel      Default  Default             Custom      Additional       Additional
Element    element  class               element     class            style
========   ==========================   =========   ==============   ===========
header     div      baseCls+'-header'   headerCfg   headerCssClass   headerStyle
bwrap      div      baseCls+'-bwrap'     bwrapCfg    bwrapCssClass    bwrapStyle
+ tbar     div      baseCls+'-tbar'       tbarCfg     tbarCssClass     tbarStyle
+ body     div      baseCls+'-body'       bodyCfg     bodyCssClass     bodyStyle
+ bbar     div      baseCls+'-bbar'       bbarCfg     bbarCssClass     bbarStyle
+ footer   div      baseCls+'-footer'   footerCfg   footerCssClass   footerStyle

例如，配置一个自定义的元素，用来强制 body 元素使用不同形式的标签，而不是使用默认创建的。 这种情况的一个例子可能是 创建一个子 Panel，包含自定义的内容，例如header，或者通过使body拥有一个<center> 元素， 从而强制Panel中的所有内容居中:

new Ext.Panel({
    title: 'Message Title',
    renderTo: Ext.getBody(),
    width: 200, height: 130,
    bodyCfg: {
        tag: 'center',
        cls: 'x-panel-body',  // Default class not applied if Custom element specified
        html: 'Message'
    },
    footerCfg: {
        tag: 'h2',
        cls: 'x-panel-footer'        // same as the Default class
        html: 'footer html'
    },
    footerCssClass: 'custom-footer', // additional css class, see addClass

    footerStyle:    'background-color:red' // see bodyStyle

});

以上例子也显式创建了一个 footer ，拥有自定义的标签和样式。

Panel
bodyCssClass : String/Object/Function
可选的CSS类选择器，被应用到body 元素上，其格式为Ext.Element.addClass所 期望的值(默认为null)...
可选的CSS类选择器，被应用到body 元素上，其格式为Ext.Element.addClass所 期望的值(默认为null)。参见 bodyCfg.
Panel
bodyStyle : String/Object/Function
自定义的CSS样式，它将被应用到body 元素上，其格式为...
自定义的CSS样式，它将被应用到body 元素上，其格式为Ext.Element.applyStyles 所期望的值(默认为null)。参见bodyCfg。
Panel
boxMaxHeight : Number
设置组件的最大高度值...

设置组件的最大高度值。

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

BoxComponent
boxMaxWidth : Number
设置组件的最大宽度值...

设置组件的最大宽度值。

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

BoxComponent
boxMinHeight : Number
设置组件的最小高度值...

设置组件的最小高度值。

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

BoxComponent
boxMinWidth : Number
设置组件的最小宽度值...

设置组件的最小宽度值。

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

BoxComponent
bubbleEvents : Array
一个事件数组，当这些事件被触发时，将会被冒泡到所有父容器中。参见....

一个事件数组，当这些事件被触发时，将会被冒泡到所有父容器中。参见 Ext.util.Observable.enableBubble。 默认为 []。

Container
buttonAlign : String
添加到当前panel的所有 buttons 的对齐方式。 合法的值有...
添加到当前panel的所有 buttons 的对齐方式。 合法的值有 'right' , 'left' 和 'center' (默认为 'right' )。
Panel
buttons : Array
Panel的按钮数组，它们从 buttons 配置属性创建。只读。
Panel
bwrapCfg : Object
一个DomHelper 元素描述对象，描述了当前Panel的 bwrap 的元素的结构...

一个DomHelper 元素描述对象，描述了当前Panel的 bwrap 的元素的结构。另请参见 bodyCfg 。

Panel
checkboxName : String
当checkboxToggle = true时指定给fieldset中checkbox的名称 (默认为'[checkbox id]-checkbox').
FieldSet
checkboxToggle : Mixed
true会在fieldset框架中渲染一个checkbox，紧靠在 当checkbox被选中时，用来展开/折叠fieldset的图例之前。 (默认为...
true会在fieldset框架中渲染一个checkbox，紧靠在 当checkbox被选中时，用来展开/折叠fieldset的图例之前。 (默认为 false).

也可以指定一个 DomHelper元素 用来创建checkbox. 如果指定为true,默认DomHelper配置对象用来创建的元素是:

                                {tag: 'input', type: 'checkbox', name: this.checkboxName || this.id+'-checkbox'}
FieldSet
clearCls : String
应用到特殊的clearing div的CSS类， 这个clearing div直接渲染到每个form field的包装器后面...

应用到特殊的clearing div的CSS类， 这个clearing div直接渲染到每个form field的包装器后面，以提供 清除field的功能(默认为 'x-form-clear-left')。

注意: 只有在当前组件被渲染到一个使用FormLayout 布局(例如 Ext.form.FormPanel 或者指定 layout:'form')的 容器中、或者是指定了一个fieldLabel 、或者指定isFormField=true 时此配置才有效。

另请参见 Ext.layout.FormLayout. fieldTpl。

Component
closable : Boolean
Panel自身不支持关闭操作，但是Panel的一些子类 (例如Ext.Window) ，或者处于Ext.TabPanel中的 Panel支持...
Panel自身不支持关闭操作，但是Panel的一些子类 (例如Ext.Window) ，或者处于Ext.TabPanel中的 Panel支持。 指定此参数为 true 可以在这些情况下启用关闭。默认为 false 。
Panel
cls : String
一个可选的额外CSS类，它将被添加到当前组件的元素上(默认为'')...
一个可选的额外CSS类，它将被添加到当前组件的元素上(默认为'')。 此属性对于在组件上，或者它的任何使用标准CSS规则的孩子节点上， 添加定制的样式非常有用。
Component
collapsed : Boolean
如果当前panel被折叠为true。只读。
Panel
collapsedCls : String
在被折叠后，一个被添加到panel元素上的CSS类 (默认为 'x-panel-collapsed' )。
Panel
collapsible : Boolean
true将会使fieldset可以折叠， 展开/折叠切换按钮将会自动被渲染到图例元素中， false 将会保持fieldset大小固定，没有折叠按钮...
true将会使fieldset可以折叠， 展开/折叠切换按钮将会自动被渲染到图例元素中， false 将会保持fieldset大小固定，没有折叠按钮 (默认false). 另一个选项是配置 checkboxToggle .
FieldSet
contentEl : String
(可选)指定一个已存在的HTML元素，或者一个已存在HTML元素的...

(可选)指定一个已存在的HTML元素，或者一个已存在HTML元素的 id ，它们将被用作当前组件的内容。

  • 描述 :
    此配置选项被用来将一个已存在的HTML元素 插入到一个新组件(在组件渲染之后它简单地移动DOM元素) 的layout元素中，使它成为该组件的内容。
  • 注意 :
    指定的HTML元素将被append到组件的layout元素中， 在所有配置的 HTML 被插入之后， 并且，这样的话，在render事件 被触发时，document中将不再包含此元素。
    指定的HTML元素将不会参与组件所有可能使用的 layout 过程(译者注：指这些HTML元素 不会参与布局操作)。 它仅是HTML而已。布局操作实在孩子 items 上进行的。
    添加 x-hidden 或者 x-hide-display CSS类，以防在内容渲染到panel时发生闪烁。
Component
ctCls : String
一个可选的外部CSS样式，添加到这个组件的容器(默认值为 '')。 这个方法对于使用标准的CSS规则...

一个可选的外部CSS样式，添加到这个组件的容器(默认值为 '')。 这个方法对于使用标准的CSS规则，为组件或它的任何一个子组件添加特定的样式非常有用。 参见 Ext.layout.ContainerLayout和 extraCls 。

注意: ctCls 默认为 ''期望如下的类，它们将指定一个默认值:

  • Box Layout : 'x-box-layout-ct'
使用一个额外的CSS类配置以上的Class，它是append到默认对象上的。例如， 对于BoxLayout (Hbox and Vbox):
                                ctCls: 'x-box-layout-ct custom-class'

Component
data : Mixed
初始化数据集，它将被应用到 tpl 上以刷新组件的内容区域。
Component
defaults : Object|Function
此选项是在所有添加的项目上应用默认设置的手段， 这些项目要么是通过...

此选项是在所有添加的项目上应用默认设置的手段， 这些项目要么是通过 items 配置项添加的， 或者是通过 add 或者是通过 insert 方法添加的。

如果添加的项目是一个配置对象， 并且不是一个组件的实例， 那么默认参数将会被无条件地被应用。 如果添加的项目是一个组件的实例， 那么默认参数将有条件地被应用，以免覆盖项目上的现有属性你。

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

例如，如需自动在 Ext.Panel 所包含的每个项目上应用padding属性，你可以传递: defaults: {bodyStyle: 'padding:15px'} 。

用法:

defaults: {               // defaults are applied to items, not the container
    autoScroll:true
},
items: [
    {
        xtype: 'panel',   // defaults do not have precedence over
        id: 'panel1',     // options in config objects, so the defaults
        autoScroll: false // will not be applied here, panel1 will be autoScroll:false
    },
    new Ext.Panel({       // defaults do
                                     have precedence over options
        id: 'panel2',     // options in components, so the defaults
        autoScroll: false // will be applied here, panel2 will be autoScroll:true.
    })
]
Container
disabled : Boolean
当前组件处于无效状态时为true。 Read-only.
Panel
draggable : Boolean/Object
true 可以让当前panel启用拖拽操作(默认为 false )...

true 可以让当前panel启用拖拽操作(默认为 false )。

如需自定义的drag/drop实现，也可以向此配置项传递一个 Ext.Panel.DD配置替代 true 。 Ext.Panel.DD是一个内部没有文档化的类，它在周围移动代理元素 代替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();
Panel
fbar : Object/Array
一个Toolbar 对象、一个Toolbar配置项，或者一个Buttons/ Button 配置数组，...

一个Toolbar 对象、一个Toolbar配置项，或者一个Buttons/ Button 配置数组，它们描述了一个被添加到当前Panel底部元素的 Toolbar.

在渲染后， fbar 将会为一个Toolbar 实例。

如果指定了 buttons ，它们将替代 fbar 配置项。

Panel的 buttonAlign 配置项目将会影响这些项目的布局，例如:
var w = new Ext.Window({
    height: 250,
    width: 500,
    bbar: new Ext.Toolbar({
        items: [{
            text: 'bbar Left'
        },'->',{
            text: 'bbar Right'
        }]
    }),
    buttonAlign: 'left', // anything but 'center' or 'right' and you can use '-', and '->'

                                  // to control the alignment of fbar items
    fbar: [{
        text: 'fbar Left'
    },'->',{
        text: 'fbar Right'
    }]
}).show();

注意:尽管Toolbar可以包含Field组件，但它们不会 通过加载祖先FormPanel而被更新。Panel的工具栏不是标准Container->Component 层次的一部分，所以它们不会被扫面以收集表单项。但是，这些值还是会 被提交，因为提交表单的参数是从DOM树中收集的。

Panel
fieldLabel : String
紧靠此field显示的标签文本(默认值为 '')。注意...

紧靠此field显示的标签文本(默认值为 '')。

注意:只有在当前组件被渲染到一个使用FormLayout 的容器中时，此配置才有效。 (例如 Ext.form.FormPanel 或 指定 layout:'form')。

另请参见 hideLabel 、 Ext.layout.FormLayout和 fieldTpl。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Name'
    }]
});
Component
flex : Number
注: 这个配置只用于该组件被包含在一个已使用BoxLayout配置的Container中时...

注: 这个配置只用于该组件被包含在一个已使用BoxLayout配置的Container中时。通过计算每一个子组件的flex值所占全部flex值之和的比例，来决定子组件的宽(HBoxLayout)高(VBoxlayout)。 任何子项的 flex = 0 或 flex = undefined 将不被设置(初始值大小将不被改变)。

BoxComponent
footerCfg : Object
一个DomHelper 元素的配置对象，描述了当前Panel的footer元素结构。 另请参见...

一个DomHelper 元素的配置对象，描述了当前Panel的footer元素结构。 另请参见 bodyCfg 。

Panel
forceLayout : Boolean
如果此值为true，容器将将强制初始化一次布局操作...
如果此值为true，容器将将强制初始化一次布局操作， 即使容器处于隐藏或者折叠状态。 此配置项对于在一个折叠或者隐藏的容器中强制渲染非常有用 (默认为false)。
Container
headerCfg : Object
一个DomHelper 元素的配置对象，描述了当前Panel的header元素结构...

一个DomHelper 元素的配置对象，描述了当前Panel的header元素结构。 另请参见 bodyCfg 。

Panel
height : Number
组件的高度(默认值为 auto)。注:如果想使用百分比的方式...
组件的高度(默认值为 auto)。注:如果想使用百分比的方式来设置值，请查看 Ext.Component.anchor。
BoxComponent
hidden : Boolean
如果当前组件处于隐藏状态，此值为true。Read-only。
Component
hideBorders : Boolean
设置为true可以隐藏所包含的每个组件的边框， false为遵照组件现有的边框设置...
设置为true可以隐藏所包含的每个组件的边框， false为遵照组件现有的边框设置(默认为 false)。
Container
hideLabel : Boolean
true时完全隐藏label元素 ( label 和 separator)。 默认为 false。 默认情况下，即使你不指定...

true时完全隐藏label元素 ( label 和 separator)。 默认为 false。 默认情况下，即使你不指定 fieldLabel 它的空间仍然会被保留，这样这块区域会与其它确实拥有label的区域位于同一排。 讲此值设置为 true 将导致此区域不再保留此空间。

注意: 参见 clearCls 的注释。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield'
        hideLabel: true
    }]
});
Component
hideMode : String
组件如何隐藏，支持的值有： 'visibility' (css visibility), 'offsets' (位置偏移量为负值) 和...

组件如何隐藏，支持的值有： 'visibility' (css visibility), 'offsets' (位置偏移量为负值) 和 'display' (css display).

注意:一般首选默认值 'display'，因为当组件第一次显示的时候它们会自动进行布局 (隐藏的时候不会调整尺寸)。

Component
hideParent : Boolean
此值为true时，当调用hide/show方法时，将会hide和show组件的容器...
此值为true时，当调用hide/show方法时，将会hide和show组件的容器；false时将会 hide和show组件自身(默认为false)。例如，这可以用作window上隐藏按钮的一种 快捷操作，通过设置此按钮的hideParent:true，然后把它添加到window上。
Component
html : String/Object
一个HTML片段，或者一个 DomHelper 描述，用作layout元素的内容(默认为'')。...
一个HTML片段，或者一个 DomHelper 描述，用作layout元素的内容(默认为'')。 这个HTML内容在组件渲染之后才被添加，所以在 render 出发的时候，document中尚未包含此HTML。 但是这个内容将会在所有配置的 contentEl 之前被插入到body标签中。
Component
id : String
当前组件唯一的id(默认为auto-assigned id)...

当前组件唯一的id(默认为auto-assigned id)。 如果你需要在以后访问组件，而又没有一个有效的组件对象引用，那么你需要指定一个 id( 也就是，使用Ext. getCmp方法 )。

注意，此id也将被用作组件底层HTML标签的id，这些标签被渲染到页面中。 这将允许你编写基于id的CSS规则，以独立地描述指定的实例；并且，也可以通过 组件父标签的id选中子元素。

注意:为了避免与唯一的id 产生重复， 请参见 itemId 和 ref 。

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

Component
itemCls : String
设置给表单项x-form-item的CSS类 (更多细节参见 Ext.layout.FormLayout. fieldTpl ). 此属性将会遗传到子容器。
设置给表单项x-form-item的CSS类 (更多细节参见 Ext.layout.FormLayout. fieldTpl ). 此属性将会遗传到子容器。
FieldSet
itemId : String
当没有可利用的对象引用时，itemId可以作为第二选择，用来获得一个组件的引用， 代替 ...

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

var c = new Ext.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'); // 与 Ext.getCmp()不同

p2 = p1.ownerCt.getComponent('p2'); // 通过兄弟对象获得引用

另请参见 id 和 ref 。

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

Component
items : MixedCollection
当前容器中的子组件集合 Ext.util.MixedCollection
Container
keys : Object/Array
一个Ext.KeyMap 配置对象 (其格式为Ext.KeyMap.addBinding 所期望的值...
一个Ext.KeyMap 配置对象 (其格式为Ext.KeyMap.addBinding 所期望的值，用来向当前panel上绑定自定义的按键处理(默认为 null )
Panel
labelSeparator : String
每个fieldLabel 文本后面现实的分隔符。 此属性可以在多个层次上进行配置...

每个fieldLabel 文本后面现实的分隔符。 此属性可以在多个层次上进行配置。优先顺序为：

  • field / component level
  • container level
  • layout level (默认为冒号 ':')
如不需要为当前field的label显示分隔符，指定一个空字符串''即可。

注意:参见 clearCls 的注释。

另请参见 hideLabel 和 Ext.layout.FormLayout。 fieldTpl。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    layoutConfig: {
        labelSeparator: '~'   // layout config has lowest priority (defaults to ':')
    },
    labelSeparator: '>>',     // config at container level
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Field 1',
        labelSeparator: '...' // field/component level config supersedes others
    },{
        xtype: 'textfield',
        fieldLabel: 'Field 2' // labelSeparator will be '='

    }]
});
Component
labelStyle : String
一个CSS样式描述字符串，它将直接应用到当前field的label上...

一个CSS样式描述字符串，它将直接应用到当前field的label上。 如果有设置，默认为容器的labelStyle值(例如 Ext.layout.FormLayout.labelStyle , 或者 '')。

注意:参见 clearCls 的注释。

另请参见 hideLabel 和 Ext.layout.FormLayout. fieldTpl。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Name',
        labelStyle: 'font-weight:bold;'
    }]
});
Component
labelWidth : Number
label的宽度。此属性将会遗传到子容器。
FieldSet
layout : String
fieldset内部使用的 Ext.Container.layout (默认为'form').
FieldSet
layoutConfig : Object
这是一个配置对象，包含为 layout 指定的参数， 如果 layout 是作为一个 string 来指定的。

Container
listeners : Object
一个包含一个或多个事件处理器的配置对象，会在初始化的时候被添加到目标对象上...

一个包含一个或多个事件处理器的配置对象，会在初始化的时候被添加到目标对象上。 该配置对象应该是一个有效的监听器配置对象就像 addListener例子中指定的一样可一次附加多个处理器。

ExtJs Components上的DOM事件

一些 ExtJs Component 类导出时会选择一些DOM事件(例如 "click", "mouseover" 等等), 这通常只是在有额外的值可以被添加时发生。例如DataView类的 click事件会传递被点击的节点。也可以直接在Component的HTMLElementevent上访问DOM事件，但必需在Component被渲染后监听器才能添加到Element 上。可以按照以下步骤添加插件:

// 插件会用一个监听器配置对象进行配置。
//该组件会被添加到所有处理方法的参数列表上。
Ext.DomObserver = Ext.extend(Object, {
    constructor: function(config) {
        this.listeners = config.listeners ? config.listeners : config;
    },

    // 组件将自己传递进了插件的初始化方法里
    init: function(c) {
        var p, l = this.listeners;
        for (p in l) {
            if (Ext.isFunction(l[p])) {
                l[p] = this.createHandler(l[p], c);
            } else {
                l[p].fn = this.createHandler(l[p].fn, c);
            }
        }

        // 渲染后立即添加监听器到元素上
        c.render = c.render.createSequence(function() {
            var e = c.getEl();
            if (e) {
                e.on(l);
            }
        });
    },

    createHandler: function(fn, c) {
        return function(e) {
            fn.call(this, e, c);
        };
    }
});

var combo = new Ext.form.ComboBox({

    // 元素被点击后折叠
    plugins: [ new Ext.DomObserver({
        click: function(evt, comp) {
            comp.collapse();
        }
    })],
    store: myStore,
    typeAhead: true,
    mode: 'local',
    triggerAction: 'all'
});

Observable
margins : Object
注:此配置只用于该组件展现在一个使用BorderLayout...

注:此配置只用于该组件展现在一个使用BorderLayout 或 BoxLayout的两个子类之一作为布局的容器。

这个margins对象在该组件中的格式为：

{top: (top margin),right: (right margin),bottom: (bottom margin),left: (left margin)}

也可以是一个字符串，中间用空格分隔，margin值为数字。 把matches中每一个值的次序跟CSS中margin值的排列方式相对应：

  • 如果只有一个值，它适用于所有方面。
  • 如果有两个值，top和bottom的边框设置为第一个值，left和right设置为第二个值。
  • 如果有三个值，top设置为第一个值，left和right设置为第二个值，bottom设置为第三个值。
  • 如果有四个值，分别设置为top, right, bottom, left。

默认值:

{top:0, right:0, bottom:0, left:0}
BoxComponent
maskDisabled : Boolean
true 将会在panel被disabled时进行遮罩,false将不会遮罩它(默认为...
true 将会在panel被disabled时进行遮罩, false 将不会遮罩它(默认为 true )。使用任意一种方法，当被禁用时，panel都将告诉它包含的元素禁用它们自己， 但是遮罩panel可以提供一种额外的视觉效果，用以提示panel被禁用。
Panel
minButtonWidth : Number
当前panel中所有buttons 最小宽度，像素值(默认为 75 )
Panel
monitorResize : Boolean
设置为true自动监测window的resize事件，以便处理所有对当前窗口尺寸 敏感的事情。...
设置为true自动监测window的resize事件，以便处理所有对当前窗口尺寸 敏感的事情。 典型地，通过选择一个 layout 来管理这个值，并且不应该手动设置它。
Container
overCls : String
一个可选的额外的CSS类，它将在鼠标移过元素时被添加到组件上...
一个可选的额外的CSS类，它将在鼠标移过元素时被添加到组件上，鼠标移出时 删除。(默认为'')。此属性对于在组件上，或者它的任何使用标准CSS规则的孩子节点上， 添加定制的'active' 或者 'hover'样式非常有用。
Component
padding : Number/String
设置body元素padding样式的快捷方式。 此值既可以是一个数值，被应用到所有侧边...
设置body元素padding样式的快捷方式。 此值既可以是一个数值，被应用到所有侧边，也可以是一个普通的描述padding的 CSS字符串。默认为undefined.
Panel
pageX : Number
如果该组件被包含在一个指定位置的容器中，这个值表示页面级的x坐标值（译者注：在有滚动条的情况下这个值很有用）。
BoxComponent
pageY : Number
如果该组件被包含在一个指定位置的容器中，这个值表示页面级的y坐标值（译者注：在有滚动条的情况下这个值很有用）。
BoxComponent
plugins : Object/Array
一个对象或者一个对象数组，为组件提供特殊的功能 ...
一个对象或者一个对象数组，为组件提供特殊的功能。 对一个合法的插件唯一的要求是它含有一个init()方法， 能接收一个Ext.Component型的参数。 当组件被创建时，如果有可用的插件，组件将会调用每个插件的init方法， 并将自身的引用作为方法参数传递给它。然后，每个插件就可以调用方法或者响应组件上的事件， 就像需要的那样提供自己的功能。
Component
preventBodyReset : Boolean
默认为 false 。当设置为 true 时， 一个额外的CSS类 'x-panel-normal' 将会被田间到panel的元素， 有效地将W3C(参见 http://www.w3.org/TR/CSS21/sample.html)...
默认为 false 。当设置为 true 时， 一个额外的CSS类 'x-panel-normal' 将会被田间到panel的元素， 有效地将W3C(参见 http://www.w3.org/TR/CSS21/sample.html) 建议的CSS样式应用到Panel的body元素上 (不是header, footer等等)。
Panel
ptype : String
需要创建配置的ptype。 当传递一个配置对象给构造函数时...
需要创建配置的ptype。 当传递一个配置对象给构造函数时，此配置选项不会被使用。 只有在使用懒初始化的时候此配置项才会被使用， 此时Plugin不是 通过一个完整的实例组件，而是通过一个Component配置指定的。 在渲染时，将会查找ptype以决定创建何种类型的Plugin。

如果你创建自己的Plugin，你可以通过 Ext.ComponentMgr.registerPlugin 对它们进行注册，以便能利用懒初始化和渲染机制。
Component
ref : String
一个路径描述，与组件的 ownerCt 相关，它描述了把当前组件的命名引用放置到哪个父容器中去。...

一个路径描述，与组件的 ownerCt 相关，它描述了把当前组件的命名引用放置到哪个父容器中去。

祖先的坐标路径可以通过'/'字符进行分隔。 例如，将一个Toolbar Button的引用放入 拥有此Toolbar的Panel中:

var myGrid = new Ext.grid.EditorGridPanel({
    title: 'My EditorGridPanel',
    store: myStore,
    colModel: myColModel,
    tbar: [{
        text: 'Save',
        handler: saveChanges,
        disabled: true,
        ref: '../saveButton'
    }],
    listeners: {
        afteredit: function() {
//          The button reference is in the GridPanel
            myGrid.saveButton.enable();
        }
    }
});

在上面的代码中，如果 ref 是 'saveButton' ，那么引用将会被放置到Toolbar中。 ref 中的每个'/' 都会从组件的 ownerCt 向上移动一级。

另请参见 added 和 removed 事件。

Component
region : String
注: 此配置只用于该组件展现在一个布局为BorderLayout的容器中...

注: 此配置只用于该组件展现在一个布局为BorderLayout的容器中(例如指定layout:'border')。

详见Ext.layout.BorderLayout。

BoxComponent
renderTo : Mixed
该值可以是一个节点的id、一个DOM节点或者一个已存在的元素...

该值可以是一个节点的id、一个DOM节点或者一个已存在的元素， 组件将会被渲染到其中。

  • 注意 :
      如果组件不是一个Container 的子项目时， 不要使用此选项。 渲染和管理它的子项目是一个Container 的layout manager的责任。
      当使用此配置项时，无需调用render()方法。

另请参见 render 。

Component
resizeEvent : String
在布局中进行尺寸调整需要监听的事件。 默认为 'resize' 。
Panel
stateEvents : Array
一个事件数组，当它们被触发时，组件需要保存自己的状态(默认值为 none)...

一个事件数组，当它们被触发时，组件需要保存自己的状态(默认值为 none)。 它们可以是任何该组件支持的事件类型，包括浏览器事件和 自定义事件(例如['click', 'customerchange'])。

对于保存和恢复组件状态的详细解释，参见 stateful

Component
stateId : String
为该组件指定的唯一的id值，它被用作管理组件状态的目的...
为该组件指定的唯一的id值，它被用作管理组件状态的目的。 (如果设定了id，默认值为组件自己的id，否则，如果组件使用自动生成的id，此值为null)。

对于保存和反解析组件状态的解释，参见 stateful 。

Component
stateful : Boolean
一个标志参数，它将引起组件在启动时尝试从一个保存的状态中恢复内部状态参数...

一个标志参数，它将引起组件在启动时尝试从一个保存的状态中恢复内部状态参数。 组件必须要么拥有一个 stateId 或者 id ，它们被分配给需要被管理的状态属性。 在跨页面加载时，不保证自动生成的id属性的稳定性， 并且，不能依赖此id来保存和恢复一个组件的相同状态。

为了保存状态的操作能够工作，状态管理器的提供者必须 被设置成一个Ext.state.Provider 的实现类，它覆盖了set 和get 方法，以便保存和恢复name/value对。 有一个内置的Ext.state.CookieProvider 可用。

为当前页面设置状态提供者:

Ext.state.Manager.setProvider(new Ext.state.CookieProvider({
    expires: new Date(new Date().getTime()+(1000*60*60*24*7)), //7 days from now
}));

当 stateEvents 配置项中其中之一的事件被触发时， 一个状态可保存的组件将试图保存其状态。

保存状态时，一个可保存状态的组件首先需要通过调用 getState 方法来序列化它的状态。 默认情况下，此函数什么事都不做。 开发者必须提供一个实现，返回一个hash对象，它描述了组件可恢复的状态。

getState方法产生的值将会传递给 Ext.state.Manager.set 方法，它使用配置的 Ext.state.Provider 来保存对象，以组件的 stateId 为key，或者，如果此值（指stateId）没有指定时， 使用它的 id 作为key。

在进行构造时，一个可保存状态的组件试图通过调用 Ext.state.Manager.get方法来 恢复它的状态，传递 stateId 或者，如果此值（指stateId）没有指定时， 使用它的 id 作为参数。

结果对象被传递给 applyState 。 applyState 的默认实现只是简单地把属性拷贝到对象中， 但是开发者可以覆盖此方法以支持更多行为。

通过向 beforestaterestore, staterestore, beforestatesave 和 statesave 事件上绑定监听器，你可以在保存和恢复状态时进行额外的处理。

Component
style : String
被添加到组件元素的特定样式。 必须是按照...
被添加到组件元素的特定样式。 必须是按照 Ext.Element.applyStyles 类指定格式的合法参数值。

new Ext.Panel({
    title: 'Some Title',
    renderTo: Ext.getBody(),
    width: 400, height: 300,
    layout: 'form',
    items: [{
        xtype: 'textarea',
        style: {
            width: '95%',
            marginBottom: '10px'
        }
    },
        new Ext.Button({
            text: 'Send',
            minWidth: '100',
            style: {
                marginBottom: '10px'
            }
        })
    ]
});
Component
tabTip : String
注: 这个配置只用于当该组件作为TabPanel的一个子项目时使用...

注: 这个配置只用于当该组件作为TabPanel的一个子项目时使用。

一个String类型的innerHTML(支持html标签)，当鼠标放在该选项上的时，显示一个tooltip。为了tips能够被渲染，Ext.QuickTips.init()必须被提前调用。
BoxComponent
tbarCfg : Object
一个DomHelper 元素的配置对象，描述了当前Panel的tbar元素结构。 另请参见...

一个DomHelper 元素的配置对象，描述了当前Panel的tbar元素结构。 另请参见 bodyCfg 。

Panel
title : String
被用作innerHTML的标题文本(接受html标签) ，用来显示在panel的...
被用作innerHTML的标题文本(接受html标签) ，用来显示在panel的 header 中(默认为'')。 当 title 被指定时， header 元素将会被自动创建并显示，除非 header 被显式地设置为 false 。 如果你不在配置时指定一个 title ， 但是你想以后设置，你必须要么 指定一个非空的 title (一个空格' ' 也可以)或者指定 header:true ，这样容器元素将会被创建。
Panel
titleCollapse : Boolean
将会允许通过在顶部工具条的任意地方点击展开和折叠panel(当...
true 将会允许通过在顶部工具条的任意地方点击展开和折叠panel(当 collapsible = true )， false ) 将会只允许通过点击工具按钮进行操作(默认为 false ))。如果当前panel是border布局中的一个子项目，另请参见 BorderLayout.Region floatable 配置项。
Panel
tpl : Mixed
一个 Ext.Template , Ext.XTemplate 或者一个用来形成一个Ext.XTemplate的字符串数组...
一个 Ext.Template , Ext.XTemplate 或者一个用来形成一个Ext.XTemplate的字符串数组。 与 data 和 tplWriteMode 配置项协同使用。
Component
tplWriteMode : String
刷新组件的内容区域时使用的Ext.(X)Template方式。 默认为'overwrite' (参见 Ext.XTemplate.overwrite )。
刷新组件的内容区域时使用的Ext.(X)Template方式。 默认为'overwrite' (参见 Ext.XTemplate.overwrite )。
Component
unstyled : Boolean
覆盖 baseCls 设置为 baseCls = 'x-plain' ， 除了必须的属性之外，它将panel渲染成无样式的...
覆盖 baseCls 设置为 baseCls = 'x-plain' ， 除了必须的属性之外，它将panel渲染成无样式的，以便Ext布局功能能起作用 (例如overflow:hidden)。
Panel
width : Number
组件的宽度(默认值为 auto)。注:如果想使用百分比的方式...
组件的宽度(默认值为 auto)。注:如果想使用百分比的方式来设置值，请查看 Ext.Component.anchor。
BoxComponent
x : Number
如果被包含在一个指定位置的容器中，这个值表示x(left)坐标值。
BoxComponent
y : Number
如果被包含在一个指定位置的容器中，这个值表示y(top)坐标值。
BoxComponent

公共属性

Property Defined By
body : Ext.Element
Panel的body Element ，可以用来包含HTML内容。 内容可以在...
Panel的body Element ，可以用来包含HTML内容。 内容可以在html 配置项中指定，或者可以使用autoLoad 配置项被加载，或者通过Panel的Updater提供。 只读。

如果这被用来通过任意方式加载可视的HTML元素，那么Panel不可以被用作 一个Layout，用来容纳其它Panel。

如果当前Panel期望被用作一个Layout的宿主 (参见 layout) 那么body元素必须不能被加载或者改变---因为它处于Panel的Layout的控制 之下。

注意: 另请参见 el .

Panel
buttons : Array
Panel的按钮数组，它们从 buttons 配置属性创建。只读。
Panel
bwrap : Ext.Element
Panel的bwrapElement ，用来包含其它Panel元素(tbar, body, bbar, footer)。 参见 bodyCfg。 只读。
Panel
collapsed : Boolean
如果当前panel被折叠为true。只读。
Panel
dd : Ext.dd.DragSource.
如果当前Panel被配置为 draggable ，此参数将会包含一个 Ext.dd.DragSource 实例，它负责处理拖拽Panel...

如果当前Panel被配置为 draggable ，此参数将会包含一个 Ext.dd.DragSource 实例，它负责处理拖拽Panel。

开发者必须提供Ext.dd.DragSource的 抽象方法的实现，用来提供drag/drop过程中的每一步行为。 参见 draggable.
Panel
disabled : Boolean
当前组件处于无效状态时为true。 Read-only.
Component
el : Ext.Element
封装了当前组件的Ext.Element。 Read-only。通常情况下，这将是一个<DIV>元素，它由此类的...

封装了当前组件的Ext.Element。 Read-only。

通常情况下，这将是一个<DIV>元素，它由此类的 onRender方法创建，但是它可以通过使用 autoEl 配置项进行覆盖。

注意: 直到组件渲染完成此元素都将处于无效状态。

如需向当前组件的 DOM事件(而不是当前组件自己的Observable事件)添加监听器， 更多建议，参见 listeners 配置项，或者直接使用一个render监听器:

new Ext.Panel({
    title: 'The Clickable Panel',
    listeners: {
        render: function(p) {
            // Append the Panel to the click handler's argument list.
            p.getEl().on('click', handlePanelClick.createDelegate(null, [p], true));
        },
        single: true  // Remove the listener after first invocation
    }
});

另请参见 getEl

Component
hidden : Boolean
如果当前组件处于隐藏状态，此值为true。Read-only。
Component
initialConfig : Object
当前组件的初始化配置描述。 Read-only。
Component
items : MixedCollection
当前容器中的子组件集合 Ext.util.MixedCollection
Container
ownerCt : Ext.Container
组件所属的Container (默认为undefined，当前组件被添加到一个容器中时此值被自动设置)...
组件所属的Container (默认为undefined，当前组件被添加到一个容器中时此值被自动设置)。 Read-only。

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

Component
private : Object
我们只能在一块可见的区域进行布局。 布局目标*或者它的任何父元素* 为...
我们只能在一块可见的区域进行布局。 布局目标*或者它的任何父元素* 为display:none， 将意味着它没有一块可见的区域。
Container
refOwner : Ext.Container
如果当前组件是一个容器的孩子，并且是通过一个 ref 配置项被注册的，则此值为 ref 引用被插入到的祖先容器。
如果当前组件是一个容器的孩子，并且是通过一个 ref 配置项被注册的，则此值为 ref 引用被插入到的祖先容器。
Component
rendered : Boolean
如果当前组件已经被渲染了，此值为true。Read-only.
Component

公共方法

Method Defined By
FieldSet ( Object config )
参数:
  • config : Object
    配置选项
返回值:
  • void
FieldSet
add ( ...Object/Array component ) : Ext.Component/Array
向当前容器中添加 Component(s)。 描述 :在添加之前触发 beforeadd 事件...

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

描述 :

  • 在添加之前触发 beforeadd 事件
  • 将会相应地应用 容器的default config values (细节参见 defaults )。
  • 在组件添加之后触发 add 事件。

注意 :

  • 当调用 add 时如果容器已经被渲染， 你可能需要调用 doLayout 方法来刷新视图，它将导致所有尚未渲染的子组件进行渲染操作。 此操作是必须的，这样你可以 add 多个子组件而只刷新一次layout。 示例用法:

var tb = new Ext.Toolbar();
tb.render(document.body);  // toolbar is rendered
tb.add({text:'Button 1'}); // add multiple items (defaultType for Toolbar is 'button')
tb.add({text:'Button 2'});
tb.doLayout();             // refresh the layout
  • 警告: 使用BorderLayout布局的容器可能不能删除或者添加组件。 更多细节参见BorderLayout 的注释。
参数:
  • component : ...Object/Array

    需要添加的一个或多个组件，或者是一个组件数组。 更多信息参见 items 。

返回值:
  • Ext.Component/Array
    被添加的组件。
Container
addButton ( String/Object config , Function handler , Object scope ) : Ext.Button
向当前panel中添加一个按钮。注意，此方法必须在渲染之前调用。 首选的方式是通过...
向当前panel中添加一个按钮。注意，此方法必须在渲染之前调用。 首选的方式是通过buttons 配置项添加按钮。
参数:
  • config : String/Object
    一个合法的Ext.Button 配置。字符串将会变成默认按钮配置文本，对象将会被看做一个按钮配置对象。
  • handler : Function
    在按钮Ext.Button.click 时被调用的函数
  • scope : Object
    作用域( this 引用)，按钮处理函数将会在其中被执行。默认为Button.
返回值:
  • Ext.Button
    被添加的按钮
Panel
addClass ( string cls ) : Ext.Component
为组件底层的元素添加CSS样式。
为组件底层的元素添加CSS样式。
参数:
  • cls : string
    需要添加的CSS样式的class名称
返回值:
  • Ext.Component
    this
Component
addEvents( Object|String o, string Optional. ) : void
添加指定的事件到事件列表上，事件会被该Observable触发。
添加指定的事件到事件列表上，事件会被该Observable触发。
参数:
  • o : Object|String
    以事件名作为属性true作为值的对象 或者当多个事件名被分开的传递时则为第一个事件名。
  • Optional. : string
    事件名被分开的传递时则为事件名。 用法:
    this.addEvents('storeloaded', 'storecleared');
返回值:
  • void
Observable
addListener( String eventName, Function handler, [Object scope], [Object options] ) : void
给对象添加事件处理器。
给对象添加事件处理器。
参数:
  • eventName : String
    监听的事件名。
  • handler : Function
    事件调用的方法
  • scope : Object
    （可选）处理方法执行的作用域 (this的引用 reference)。 如果被忽略。默认为触发事件的对象。
  • options : Object
    （可选）包含处理器配置和属性的对象。 可能包含以下的属性:
    • scope : Object
      处理方法执行的作用域(this的引用) 。 如果被忽略。默认为触发事件的对象。
    • delay : Number
      在触发事件后延迟调用处理器的毫秒数。
    • single : Boolean
      如果为True则添加一个处理器来处理下一次的事件触发（仅一次），然后移除自己。
    • buffer : Number
      使得处理器延迟指定毫秒数后预定的运行在 一个Ext.util.DelayedTask中 。 如果事件在时间内再一次被触发，原始的处理器不会被调用，但是新的处理器会预定的在他的位置上。
    • target : Observable
      如果事件在目标的Observable上触发则仅仅调用处理器， 否则 事件会从子类的Observable上冒泡

    组合选项
    使用这些选项参数,可能会组合出不同类型的监听器：

    一个延迟的，一次性的监听器。

    myDataView.on('click', this.onClick, this, {
single: true,
delay: 100
});

    一次调用附加多个处理器
    该方法同样支持传递一个包含指定的多个处理器的属性的配置对象参数。

    myGridPanel.on({
'click' : {
    fn: this.onClick,
    scope: this,
    delay: 100
},
'mouseover' : {
    fn: this.onMouseOver,
    scope: this
},
'mouseout' : {
    fn: this.onMouseOut,
    scope: this
}
});

    或者一个简写的语法：

    myGridPanel.on({
'click' : this.onClick,
'mouseover' : this.onMouseOver,
'mouseout' : this.onMouseOut,
 scope: this
});
返回值:
  • void
Observable
applyToMarkup ( String/HTMLElement el ) : void
将此组件添加到已存在的有效的HTML标签中。 使用该方法时，无需再调用render()方法。
将此组件添加到已存在的有效的HTML标签中。 使用该方法时，无需再调用render()方法。
参数:
  • el : String/HTMLElement
返回值:
  • void
Component
bubble ( Function fn , [ Object scope ], [ Array args ] ) : Ext.Container
沿着component/container继承结构进行冒泡， 在每个组件上调用指定的函数。 所调用函数的作用域...
沿着component/container继承结构进行冒泡， 在每个组件上调用指定的函数。 所调用函数的作用域( this)将会是 指定的作用域或者是当前组件。 如果在函数任何一点上返回false，即停止冒泡过程
参数:
  • fn : Function
    需要调用的函数
  • scope : Object
    (可选) 函数的作用域(默认为当前节点)
  • args : Array
    (可选) 调用函数时需要传递的参数( 默认传递当前组件)
返回值:
  • Ext.Container
    this
Container
cascade ( Function fn , [ Object scope ], [ Array args ] ) : Ext.Container
从当前组件(第一个被调用的组件)开始，沿着component/container的继承树向下回溯...
从当前组件(第一个被调用的组件)开始，沿着component/container的继承树向下回溯， 在每个组件上调用指定的方法， 调用方法时的(this)作用域为指定的scope或者为当前组件。 传递给方法的参数为传递进来args或者当前组件。 在起泡的任意一个节点上，如果function返回false，即停止在那个分支上。
参数:
  • fn : Function
    需要调用的函数
  • scope : Object
    (可选)函数的作用域(默认为当前组件)
  • args : Array
    (可选) 调用函数时传递的参数 (默认传递当前组件)
返回值:
  • Ext.Container
    this
Container
cloneConfig ( Object overrides ) : Ext.Component
默认使用原先传递给当前实例的配置值克隆当前组件。
默认使用原先传递给当前实例的配置值克隆当前组件。
参数:
  • overrides : Object
    一个新的配置项，包含需要覆盖到克隆版本的所有属性。 可以传递一个id参数给此对象，否则将自动生成一个新的id以避免发生重复。
返回值:
  • Ext.Component
    当前组件的克隆副本
Component
collapse ( Boolean animate ) : Ext.Panel
折叠panel的body，这样它就变成隐藏的。 触发beforecollapse 事件...
折叠panel的body，这样它就变成隐藏的。 触发beforecollapse 事件，处理函数返回false可以取消折叠操作。
参数:
  • animate : Boolean
    True将会在变换时使用动画效果，其它为false( 默认为panel的animCollapse 配置项的值)
返回值:
  • Ext.Panel
    this
Panel
destroy () : void
通过如下方法销毁对象：删除所有的事件监听器、将组件的元素从DOM树中删除...
通过如下方法销毁对象：删除所有的事件监听器、将组件的元素从DOM树中删除（如果可以）、 将组件从它的 Ext.Container（如果可用）中删除、 并且将它从Ext.ComponentMgr中 注销。 销毁操作一般由框架自动完成，一般情况下不需要直接调用该方法。
参数:
  • 无。
返回值:
  • void
Component
disable () : Ext.Component
将组件置为无效状态，并出发'disable'事件。
将组件置为无效状态，并出发'disable'事件。
参数:
  • 无。
返回值:
  • Ext.Component
    this
Component
doLayout ( [ Boolean shallow ], [ Boolean force ] ) : Ext.Container
强制容器的布局进行重新计算。 在向一个已经渲染的容器中添加...
强制容器的布局进行重新计算。 在向一个已经渲染的容器中添加一个新的组件， 或者改变子组件的尺寸/位置参数之后，必须调用此函数。
参数:
  • shallow : Boolean
    (可选) 设置为true时将仅仅计算当前组件的布局， 并且让子组件在需要时自动计算布局 (默认为flase，它将递归地调用每个子容器的doLayout方法)
  • force : Boolean
    (可选) 设置为true将强制进行布局，即使项目是隐藏的也进行。
返回值:
  • Ext.Container
    this
Container
enable () : Ext.Component
将组件置为有效状态并触发'enable'事件。
将组件置为有效状态并触发'enable'事件。
参数:
  • 无。
返回值:
  • Ext.Component
    this
Component
enableBubble( String/Array events ) :void
是否现在使得事件会被该Observable触发并调用 this.getBubbleTarget()方法在拥有者的继承树...

是否现在使得事件会被该Observable触发并调用 this.getBubbleTarget()方法在拥有者的继承树中冒泡。Observable的基础类中没有该方法的实现。

该方法一般被Ext.Components用来冒泡事件到拥有者的容器。参看Ext.Component.getBubbleTarget默认的实现 在Ext.Component中返回组件的直接拥有者。但是如果需要的是一个已知的目标，该方法可以被重写来更快的访问需求的目标。

例子:

Ext.override(Ext.form.Field, {
    // 添加方法到Field的initComponent上改变事件为冒泡
    initComponent : Ext.form.Field.prototype.initComponent.createSequence(function() {
        this.enableBubble('change');
    }),

    // 我们知道我们想让Field的事件冒泡到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() {
            // 如果样式被修改标题会变红。
            myForm.header.setStyle('color', 'red');
        }
    }
});
参数:
  • events : String/Array
    冒泡的事件名，或事件名数组
返回值:
  • void
Observable
expand ( Boolean animate ) : Ext.Panel
展开panel的body以便让其变得可见。 触发beforeexpand 事件...
展开panel的body以便让其变得可见。 触发beforeexpand 事件，如果它返回false将会取消展开操作。
参数:
  • animate : Boolean
    True将会在变换过程中使用动画效果，否则为false (默认为panel的 animCollapse 配置项的值)
返回值:
  • Ext.Panel
    this
Panel
find ( String prop , String value ) : Array
根据属性查找当前容器中任何层次上的组件
根据属性查找当前容器中任何层次上的组件
参数:
  • prop : String
  • value : String
返回值:
  • Array
    Ext.Component数组
Container
findBy ( Function fn , [ Object scope ] ) : Array
根据一个自定义的函数，查找当前容器中任意层级上的一个组件。 如果传递的函数返回true...
根据一个自定义的函数，查找当前容器中任意层级上的一个组件。 如果传递的函数返回true，组件将会被包含在结果中。 函数将会被用如下参数(component, this container)进行调用。
参数:
  • fn : Function
    需要调用的函数
  • scope : Object
    可选
返回值:
  • Array
    Ext.Component数组
Container
findById ( String id ) : Ext.Component
通过id查找容器中位于任何层级上的组件
通过id查找容器中位于任何层级上的组件
参数:
  • id : String
返回值:
  • Ext.Component
Container
findByType ( String/Class xtype , [ Boolean shallow ] ) : Array
根据xtype或者类型，查找当前容器中任何层级上的组件
根据xtype或者类型，查找当前容器中任何层级上的组件
参数:
  • xtype : String/Class
    组件的xtype字符串，或者直接是组件的class类型
  • shallow : Boolean
    (可选) 此参数为flase时将检查当前组件是否是指定xtype的后裔 (这是默认情况)，或者设置为true， 将检查当前组件是否直接是指定xtype类型（译者注：即指不按照多态性进行检查）。
返回值:
  • Array
    Ext.Component数组
Container
findParentBy ( Function fn ) : Ext.Container
通过自定义的函数查找当前组件上层任何层次上的容器...
通过自定义的函数查找当前组件上层任何层次上的容器。 如果传递的函数返回true，容器对象将被返回。
参数:
  • fn : Function
    自定义的函数，使用如下参数调用(container,this component)。
返回值:
  • Ext.Container
    自定义函数返回true的第一个容器
Component
findParentByType ( String/Class xtype ) : Ext.Container
通过xtype或者class查找当前组件上层任何层次上的容器
通过xtype或者class查找当前组件上层任何层次上的容器
参数:
  • xtype : String/Class
    组件的xtype字符串，或者直接是组件的class
返回值:
  • Ext.Container
    符合指定xtype或者class的第一个容器
Component
fireEvent( String eventName, Object... args ) : Boolean
用传入的参数触发指定的事件 (减去事件名)。 一个事件可以被设置为冒泡 Obse...

用传入的参数触发指定的事件 (减去事件名)。

一个事件可以被设置为冒泡到Observable父类继承树(参看 Ext.Component.getBubbleTarget) 调用enableBubble实现。

参数:
  • eventName : String
    触发的事件名。
  • args : Object...
    传递给处理器的可变长度参数。
返回值:
  • Boolean
    如果有任何的处理器返回false则返回false，否则返回true。
Observable
get ( String/Number key ) : Ext.Component
获取当前容器包含的一个组件( items.get(key)方法的别名)
获取当前容器包含的一个组件( items.get(key)方法的别名)
参数:
  • key : String/Number
    组件的索引
返回值:
  • Ext.Component
    Ext.Component
Container
getBox ( [ Boolean local ] ) : Object
获取组件底层元素当前盒子模型的尺寸。（译者注：盒子模型是CSS术语，详细解释请自行搜索。）
获取组件底层元素当前盒子模型的尺寸。（译者注：盒子模型是CSS术语，详细解释请自行搜索。）
参数:
  • local : Boolean
    (可选)值为true时，组件的left值和top值将代替页面的XY被返回。(默认值为false)
返回值:
  • Object
    返回值的格式{x, y, width, height}
BoxComponent
getBubbleTarget () : Ext.Container
为Observable的fireEvent方法提供链接，它沿着继承结构进行冒泡操作。
为Observable的fireEvent方法提供链接，它沿着继承结构进行冒泡操作。
参数:
  • 无。
返回值:
  • Ext.Container
    拥有当前组件的容器。
Component
getComponent ( String/Number comp ) : Ext.Component
检查当前容器的 items property 并且获取当前容器的一个直接的子组件。
检查当前容器的 items property 并且获取当前容器的一个直接的子组件。
参数:
  • comp : String/Number
    参数可以是以下任何值：
    • 一个 String : 代表子组件的 itemId 或者 id
    • 一个 Number : 代表子组件在 items property 中的位置

    其它信息参见 Ext.util.MixedCollection.get。

返回值:
  • Ext.Component
    组件(如果有找到)。
Container
getEl () : Ext.Element
返回 Ext.Element ，它包装了当前组件。...

返回 Ext.Element ，它包装了当前组件。

通常情况下，这将是一个<DIV>元素，它是由该类的onRender方法创建的， 但是可以使用autoEl配置项 覆盖它。

注意: 此元素将会一直处于无效状态直到当前组件渲染完成。

如需向当前组件的 DOM事件(而不是当前组件自己的Observable事件)添加监听器， 更多建议，参见 listeners 配置项，或者直接使用一个render监听器:

new Ext.Panel({
    title: 'The Clickable Panel',
    listeners: {
        render: function(p) {
            // Append the Panel to the click handler's argument list.
            p.getEl().on('click', handlePanelClick.createDelegate(null, [p], true));
        },
        single: true  // Remove the listener after first invocation
    }
});
参数:
  • 无。
返回值:
  • Ext.Element
    包装当前组件的元素。
Component
getFooterToolbar () : Ext.Toolbar
返回panel底部( fbar )区域的toolbar
返回panel底部( fbar )区域的toolbar
参数:
  • 无。
返回值:
  • Ext.Toolbar
    toolbar
Panel
getFrameHeight () : Number
返回当前panel框架元素的高度像素值 (包括所有top和bottom工具栏以及header和footer元素...
返回当前panel框架元素的高度像素值 (包括所有top和bottom工具栏以及header和footer元素， 但是不包括body高度)。 如需获取body高度，参见 getInnerHeight.
参数:
  • 无。
返回值:
  • Number
    框架高度
Panel
getFrameWidth () : Number
返回当前panel框架元素的宽度像素值 (不包含body宽度)。如需获得body宽度，参见...
返回当前panel框架元素的宽度像素值 (不包含body宽度)。如需获得body宽度，参见 getInnerWidth。
参数:
  • 无。
返回值:
  • Number
    框架宽度
Panel
getHeight () : Number
获取该组件的当前高度值。
获取该组件的当前高度值。
参数:
  • 无。
返回值:
  • Number
BoxComponent
getId () : String
返回当前组件的id，如果没有定义id，则自动生成并返回一个id:'ext-comp-'...
返回当前组件的 id 如果没有定义 id 则自动生成并返回一个 id

'ext-comp-' + (++Ext.Component.AUTO_ID)
参数:
  • 无。
返回值:
  • String
    id
Component
getInnerHeight () : Number
返回body元素的高度像素值(不包括任何框架元素的高度)。 对于框架高度参见...
返回body元素的高度像素值(不包括任何框架元素的高度)。 对于框架高度参见 getFrameHeight。
参数:
  • 无。
返回值:
  • Number
    body高度
Panel
getInnerWidth () : Number
返回body元素宽度像素值(不包含任何框架元素的宽度)。 对于框架宽度，参见 getFrameWidth。
返回body元素宽度像素值(不包含任何框架元素的宽度)。 对于框架宽度，参见 getFrameWidth。
参数:
  • 无。
返回值:
  • Number
    body宽度
Panel
getItemId () : String
返回当前组件的 itemId 。 如果没有通过配置参数指定 itemId 那么，将会使用...
返回当前组件的 itemId 。 如果没有通过配置参数指定 itemId 那么，将会使用 getId 返回 id 。
参数:
  • 无。
返回值:
  • String
Component
getLayout () : ContainerLayout
返回容器当前使用的布局管理器。 如果容器当前没有设置布局管理器， 将会创建一个默认的...
返回容器当前使用的布局管理器。 如果容器当前没有设置布局管理器， 将会创建一个默认的 Ext.layout.ContainerLayout 并被设置为容器的布局管理器。
参数:
  • 无。
返回值:
  • ContainerLayout
    容器的布局管理器
Container
getLayoutTarget () : Ext.Element
返回当前容器中用来包含子组件的元素。提供了一个 可以返回容器的...

返回当前容器中用来包含子组件的元素。

提供了一个 可以返回容器的Element 的实现， 但是，如果容器有更复杂的结构， 可以覆盖此实现以返回 layout 在其中渲染子组件的元素。

参数:
  • 无。
返回值:
  • Ext.Element
    在其中渲染子组件的元素。
Container
getOuterSize () : Object
获取当前组件所在元素的尺寸大小，包括边缘的空白处。
获取当前组件所在元素的尺寸大小，包括边缘的空白处。
参数:
  • 无。
返回值:
  • Object
    一个包含元素大小的对象 {width: (element width + left/right margins), height: (element height + top/bottom margins)}
BoxComponent
getPosition ( [ Boolean local ] ) : Array
获取组件底层元素当前的XY位置。
获取组件底层元素当前的XY位置。
参数:
  • local : Boolean
    (可选)如果为true，将返回元素的left和top值，而不是相对于页面内的 XY。(默认值为 false)
返回值:
  • Array
    元素的XY位置值(例如：[100, 200])
BoxComponent
getResizeEl () : Ext.Element
返回该组件的最外层用来定义这些组件整体大小的Element...

返回该组件的最外层用来定义这些组件整体大小的Element对象。

通常用 getEl 方法将会返回相同的Element对象，但在有些情况下，组件可能有一些更多的封装了它的主要动态Element对象的Element对象。

例如ComboBox。它是封装在一个包含<input>元素的包装元素里(这将返回其 getEl方法和触发按钮的元素)。返回的元素为resizeEl。

参数:
  • 无。
返回值:
  • Ext.Element
    The Element which is to be resized by size managing layouts.
BoxComponent
getSize () : Object
获取组件底层元素当前的大小。
获取组件底层元素当前的大小。
参数:
  • 无。
返回值:
  • Object
    一个包含元素大小的对象{width: (element width), height: (element height)}
BoxComponent
getTool ( String id ) : Object
根据id获取一个tool.
根据id获取一个tool.
参数:
  • id : String
返回值:
  • Object
    tool
Panel
getUpdater () : Ext.Updater
获取当前panel的 Ext.Updater .让你可以为当前panel的body执行Ajax更新。
获取当前panel的 Ext.Updater .让你可以为当前panel的body执行Ajax更新。
参数:
  • 无。
返回值:
  • Ext.Updater
    Updater
Panel
getWidth () : Number
获取该组件的当前宽度值。
获取该组件的当前宽度值。
参数:
  • 无。
返回值:
  • Number
BoxComponent
getXType () : String
获取当前组件的xtype，它是用 Ext.ComponentMgr 注册的。 所有可用的xtype列表，参见...
获取当前组件的xtype，它是用 Ext.ComponentMgr 注册的。 所有可用的xtype列表，参见 Ext.Component 类头部。示例用法:

var t = new Ext.form.TextField();
alert(t.getXType());  // alerts 'textfield'
参数:
  • 无。
返回值:
  • String
    The xtype
Component
getXTypes () : String
返回此组件的xtype继承树，用字符'-'分隔。 所有可用的xtype值...

返回此组件的xtype继承树，用字符'-'分隔。 所有可用的xtype值，请参见Ext.Component 类的头部。

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

示例用法:

var t = new Ext.form.TextField();
alert(t.getXTypes());  // alerts 'component/box/field/textfield'
参数:
  • 无。
返回值:
  • String
    xtype层次字符串
Component
hasListener( String eventName ) : Boolean
检测对象是否包含指定事件的任何监听器
检测对象是否包含指定事件的任何监听器
参数:
  • eventName : String
    检测的事件名
返回值:
  • Boolean
    如果事件被监听则为true，否则为false
Observable
hide () : Ext.Component
隐藏当前组件。 监听 beforehide' 事件并且返回false 可以取消隐藏组件的操作。 在隐藏组件之后触发...
隐藏当前组件。 监听 beforehide' 事件并且返回false 可以取消隐藏组件的操作。 在隐藏组件之后触发 ' hide' 事件。 如果组件被配置成 hidden 那么此方法在内部被调用。
参数:
  • 无。
返回值:
  • Ext.Component
    this
Component
insert ( Number index , Ext.Component component ) : Ext.Component
在当前容器的指定索引处插入一个组件。 在插入之前触发...
在当前容器的指定索引处插入一个组件。 在插入之前触发 beforeadd 事件， 然后在组件被插入之后触发 add 事件。
参数:
  • index : Number
    组件会被插入到容器子项集合中时的索引位置
  • component : Ext.Component
    需要插入的子组件。

    Ext使用懒渲染，只有在必要的时候才会渲染插入的组件。

    如果使用懒渲染，可以传递一个组件配置对象以避免创建一个真实组件的开销， 这意味着，插入的组件不会立即被渲染。 为了利用这个“懒初始化”('lazy instantiation')， 必须把组件设置为它注册的 Ext.Component.xtype 值。

    所有可用的xtype列表，参见 Ext.Component。
返回值:
  • Ext.Component
    使用容器默认配置值插入的组件(或者配置对象)。
Container
isVisible () : Boolean
如果当前组件可见，返回true。
如果当前组件可见，返回true。
参数:
  • 无。
返回值:
  • Boolean
    如果当前组件可见，返回true，其它返回false。
Component
isXType ( String xtype , [ Boolean shallow ] ) : Boolean
Tests whether or not this Component is of a specific xtype. This can test whether this Component is descended from th...

测试此组件是否是指定的xtype。此方法既可以测试是否是指定的xtype的某个子类， 或者它是否直接是指定的xtype类(shallow=true)。

如果使用你自己的子类，必须知道组件必须注册它的xtype值。

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

示例用法:

var t = new Ext.form.TextField();
var isText = t.isXType('textfield');        // true
var isBoxSubclass = t.isXType('box');       // true, descended from BoxComponent
var isBoxInstance = t.isXType('box', true); // false, not a direct BoxComponent instance
参数:
  • xtype : String
    需要为当前组件进行检测的xtype
  • shallow : Boolean
    (可选) 如果为false，检测组件是否是xtype继承树中的某个子类（默认是这种情况）， 如果为true，只检测组件是否是指定的xtype类型。
返回值:
  • Boolean
    如果当前组件是指定xtype的子类，返回true，其它返回flase。
Component
load ( Object/String/Function config ) : Ext.Panel
立即使用XHR返回的内容装载当前panel的内容。
立即使用XHR返回的内容装载当前panel的内容。
参数:
  • config : Object/String/Function
    一个包含任何如下选项的配置对象:
    panel.load({
    url: 'your-url.php',
    params: {param1: 'foo', param2: 'bar'}, // or a URL encoded string
    callback: yourFunction,
    scope: yourObject, // optional scope for the callback
    discardUrl: false,
    nocache: false,
    text: 'Loading...',
    timeout: 30,
    scripts: false
});
    唯一的必须参数是url。 可选的nocache、text和script参数是 disableCaching、indicatorText和loadScripts的快捷方式， 它们被用来设置到当前panel的Updater实例所绑定的 属性上。
返回值:
  • Ext.Panel
    this
Panel
mon ( Observable|Element item , Object|String ename , Function fn , Object scope , Object opt ) : void
向任何Observable对象(或者元素)上添加监听器，监听器将会在组件...

向任何Observable对象(或者元素)上添加监听器，监听器将会在组件销毁时被自动删除。
用法：

myGridPanel.mon(myGridPanel.getSelectionModel(), 'selectionchange', handleSelectionChange, null, {buffer: 50});

or:

myGridPanel.mon(myGridPanel.getSelectionModel(), {
    selectionchange: handleSelectionChange,
    buffer: 50
});
参数:
  • item : Observable|Element
    需要添加listener/listeners的项目。
  • ename : Object|String
    事件名，或者一个包含事件名属性的对象。
  • fn : Function
    (可选) 如果 ename 参数是一个事件名，此参数为处理函数。
  • scope : Object
    (可选)如果 ename 参数是一个事件名称，此参数是作用域 ( this 引用)，监听函数将会在此作用域中被执行。
  • opt : Object
    (可选)如果 ename 参数是一个事件名称， 此参数是 addListener 配置项。
返回值:
  • void
Component
mun ( Observable|Element item , Object|String ename , Function fn , Object scope ) : void
删除通过mon 方法添加的监听器。
删除通过mon 方法添加的监听器。
参数:
  • item : Observable|Element
    需要删除listener/listeners的项目。
  • ename : Object|String
    事件名称，或者一个包含事件名称属性的对象。
  • fn : Function
    (可选)如果 ename 参数是一个事件名称，此参数是一个处理函数。
  • scope : Object
    (可选)如果 ename 参数是一个事件名称，此参数是作用域 ( this 引用)，监听函数将会在此作用域中被执行。
返回值:
  • void
Component
nextSibling () : Ext.Component
返回所属容器中的下一个组件
返回所属容器中的下一个组件
参数:
  • 无。
返回值:
  • Ext.Component
Component
on( String eventName, Function handler, [Object scope], [Object options] ) : void
给对象添加事件处理器 (addListener的简写形式)
给对象添加事件处理器 (addListener的简写形式。)
参数:
  • eventName : String
    监听的事件类型
  • handler : Function
    事件调用的方法
  • scope : Object
    （可选）处理方法执行时的作用域 (this 的引用)。 如果被忽略。默认为触发事件的对象。
  • options : Object
    可选 包含处理器配置的对象。
返回值:
  • void
Observable
onCheckClick () : void
此函数被fieldset的checkbox调用，当值发生切换时 (只有当checkboxToggle = true时有效). 不应该在外部调用此方法...
此函数被fieldset的checkbox调用，当值发生切换时 (只有当checkboxToggle = true时有效). 不应该在外部调用此方法，但是，当checkbox发生切换时，必要时可以覆盖此方法 以提供自定义的行为。
参数:
  • 无。
返回值:
  • void
FieldSet
previousSibling () : Ext.Component
返回所属容器中的前一个组件
返回所属容器中的前一个组件
参数:
  • 无。
返回值:
  • Ext.Component
Component
purgeListeners() : void
移除对象上所有的监听器
移除对象上所有的监听器
参数:
  • 无。
返回值:
  • void
Observable
relayEvents( Object o, Array events ) : void
从指定的Observable上传递选择的事件就好像被当前对象触发一样。
从指定的Observable上传递选择的事件就好像被当前对象触发一样。
参数:
  • o : Object
    该Observable上的事件被当前对象传递。
  • events : Array
    传递的数组名。
返回值:
  • void
Observable
remove ( Component/String component , [ Boolean autoDestroy ] ) : Ext.Component
从当前容器中移除一个组件。 在移除之前触发 beforeremove 事件， 然后在组件被移除之后触发...
从当前容器中移除一个组件。 在移除之前触发 beforeremove 事件， 然后在组件被移除之后触发 remove 事件。
参数:
  • component : Component/String
    需要移除的组件引用或者id
  • autoDestroy : Boolean
    (可选) 设置为true将自动调用被删组件的 Ext.Component.destroy 函数。 默认为容器的 autoDestroy 配置值。
返回值:
  • Ext.Component
    被移除的组件。
Container
removeAll ( [ Boolean autoDestroy ] ) : Array
从当前容器中删除所有组件。
从当前容器中删除所有组件。
参数:
  • autoDestroy : Boolean
    (可选) 此参数为true时将自动调用 被删组件的 Ext.Component.destroy 方法。 默认为当前容器的 autoDestroy 配置值。
返回值:
  • Array
    被销毁的组件数组
Container
removeClass ( string cls ) : Ext.Component
从组件底层的元素上删除一个CSS类。
从组件底层的元素上删除一个CSS类。
参数:
  • cls : string
    需要移除的CSS类名
返回值:
  • Ext.Component
    this
Component
removeListener( String eventName, Function handler, [Object scope] ) : void
删除一个事件处理器。
删除一个事件处理器。
参数:
  • eventName : String
    处理器关联的事件类型。
  • handler : Function
    移除的处理器。 这应该是传递到addListener里的方法的引用。
  • scope : Object
    （可选）处理器指定的初始作用域。
返回值:
  • void
Observable
render ( [ Element/HTMLElement/String container ], [ String/Number position ] ) : void
在传递进来的HTML元素中渲染当前组件。...

在传递进来的HTML元素中渲染当前组件。

如果你正在使用一个Container 对象放置当前组件，那么请不要使用render方法。

当容器第一次被渲染时，它的子组件将会被容器的 layout 管理器渲染。

某些布局管理器允许动态添加子组件。它们包括 Ext.layout.CardLayout, Ext.layout.AnchorLayout, Ext.layout.FormLayout, Ext.layout.TableLayout。

当一个新的子组件被添加时，如果容器已经被渲染了， 你可能需要调用容器的 doLayout 方法来刷新视图，它将导致所有没有被渲染的子组件进行渲染操作。 此操作是必须的，这样你可以添加多个子组件而只刷新一次layout。

当创建复杂的UI时，非常重要的一点是，请记住调整子项目的尺寸和位置是容器的 layout 管理器的职责。 如果你希望子项目的尺寸对用户交互作出反应， 你必须为容器配置一个布局管理器，它将创建和管理你心里想要的那种布局。

忽略容器的layout 配置意味着将会使用一个基本的布局管理器，它除了按次序把子组件 渲染到容器中之外什么事情都不做。 这种情况下，任何尺寸和位置的调整操作都不会发生。

参数:
  • container : Element/HTMLElement/String
    (可选) 需要在其中渲染当前组件的元素。 如果它是从一个已存在的标签中创建的，此参数应该被忽略。
  • position : String/Number
    (可选) 容器中的一个元素ID或者一个DOM节点索引， 当前组件将会被插入到它前面 (默认append到容器的尾部)
返回值:
  • void
Component
resumeEvents() : void
重新开始触发事件。(参见suspendEvents) 如果事件以queueSuspended参数被挂起，则在事件被挂起时 ...
重新开始触发事件。(参见 suspendEvents) 如果事件以queueSuspended 参数被挂起，则在事件被挂起时触发的事件会被传递到所有的监听器上
参数:
  • 无。
返回值:
  • void
Observable
setAutoScroll ( Boolean scroll ) : Ext.BoxComponent
设置该组件内容溢出时是否自动显示滚动条。
设置该组件内容溢出时是否自动显示滚动条。
参数:
  • scroll : Boolean
    值为true的话组件自动显示滚动条。
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setDisabled ( Boolean disabled ) : Ext.Component
工具函数，使用布尔值设置有效/无效(disabled/enabled )。
工具函数，使用布尔值设置有效/无效(disabled/enabled )。
参数:
  • disabled : Boolean
返回值:
  • Ext.Component
    this
Component
setHeight ( Mixed height ) : Ext.BoxComponent
设置此组件的高度。该方法将触发resize事件。
设置此组件的高度。该方法将触发resize事件。
参数:
  • height : Mixed
    The new height to set.
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setPagePosition ( Number x , Number y ) : Ext.BoxComponent
设置组件在页面中的XY位置。 如果需要设置left和top值 ，请使用...
设置组件在页面中的XY位置。 如果需要设置left和top值 ，请使用setPosition方法。 该方法触发move事件。
参数:
  • x : Number
    The new x position
  • y : Number
    The new y position
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setPosition ( Number left , Number top ) : Ext.BoxComponent
设置组件的left和top值。设置组件的页面XY值，请使用setPagePosition方法。该方法触发...
设置组件的left和top值。设置组件的页面XY值，请使用setPagePosition方法。该方法触发move事件。
参数:
  • left : Number
    The new left
  • top : Number
    The new top
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setSize ( Mixed width , Mixed height ) : Ext.BoxComponent
设置BoxComponent的宽度和高度。 此方法触发resize事件...
设置BoxComponent的宽度和高度。 此方法触发resize事件。此方法可以接收单独的width或者height值作为参数， 或者你可以传递像这样的一个size对象： {width:10, height:20} 。
参数:
  • width : Mixed
    设置的新的width值。这可以是：
    • 一个Number类型指定Element新的宽度 Ext.Element.defaultUnit(默认为像素 :'px')。
    • 一个String类型用于设置width的CSS样式。
    • 一个size对象格式为 {width: widthValue, height: heightValue} 。
    • 值为 undefined 时，保留原来的width不变。
  • height : Mixed
    设置的新的height值(如果第一个参数传递了一个size对象，此参数没有必要传递)。这可以是：
    • 一个Number类型指定Element新的高度 Ext.Element.defaultUnit(默认为像素 :'px')。
    • 一个String类型用于设置height的CSS样式。也有可能不会被使用到。
    • 值为 undefined 时，保留原来的height不变。
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setTitle ( String title , [ String iconCls ] ) : void
为panel设置标题文本，也可选择设置 icon class。...

为panel设置标题文本，也可选择设置 icon class。

为了能够设置标题，必须已经为Panel创建了一个header元素。 要么通过向Panel上注册一个非空的 title ，或者配置 header: true ，可触发此操作(译者注：指为Panel创建header元素)。

参数:
  • title : String
    需要设置的标题文本
  • iconCls : String
    (可选) iconCls 一个用户定义的CSS类，为当前panel提供图标图片。
返回值:
  • void
Panel
setVisible ( Boolean visible ) : Ext.Component
工具方法，通过使用布尔值隐藏或者显示当前组件。
工具方法，通过使用布尔值隐藏或者显示当前组件。
参数:
  • visible : Boolean
    true时显示，false时隐藏
返回值:
  • Ext.Component
    this
Component
setWidth ( Mixed width ) : Ext.BoxComponent
设置组件的宽度。 此方法触发resize事件。
设置组件的宽度。 此方法触发resize事件。
参数:
  • width : Mixed
    The new width to set.
返回值:
  • Ext.BoxComponent
    this
BoxComponent
show () : Ext.Component
显示当前组件。监听' beforeshow' 事件，返回 false 取消显示组件...
显示当前组件。监听' beforeshow' 事件，返回 false 取消显示组件。在显示组件之后触发' show' 事件。
参数:
  • 无。
返回值:
  • Ext.Component
    this
Component
suspendEvents( Boolean queueSuspended ) : void
暂停触发所有的事件。 (参看resumeEvents)
暂停触发所有的事件。（参看 resumeEvents)
参数:
  • queueSuspended : Boolean
    如果传递为true则排列好暂停的事件使得在调用 resumeEvents 后再触发它们，而不是抛弃所有暂停的事件。
返回值:
  • void
Observable
syncSize () : Ext.BoxComponent
强制组件的大小按照此组件底层元素当前的高度和宽度计算。
强制组件的大小按照此组件底层元素当前的高度和宽度计算。
参数:
  • 无。
返回值:
  • Ext.BoxComponent
    this
BoxComponent
toggleCollapse ( Boolean animate ) : Ext.Panel
根据panel的当前状态，执行expand或者 collapse操作 的快捷方式。
根据panel的当前状态，执行expand或者 collapse操作 的快捷方式。
参数:
  • animate : Boolean
    True将会在转换过程中使用动画效果，否则为false (默认为panel的animCollapse 配置项的值)
返回值:
  • Ext.Panel
    this
Panel
un( String eventName, Function handler, [Object scope] ) : void
删除一个事件处理器(removeListener方法的简写形式)
删除一个事件处理器(removeListener方法的简写形式。)
参数:
  • eventName : String
    处理器关联的事件类型
  • handler : Function
    被删除的处理器 这应该是传入 addListener 中的方法的引用。
  • scope : Object
    （可选）为处理器指定的初始作用域。
返回值:
  • void
Observable
update ( Mixed htmlOrData , [ Boolean loadScripts ], [ Function callback ] ) : void
刷新组件的内部区域。
刷新组件的内部区域。
参数:
  • htmlOrData : Mixed
    如果已经通过tpl为当前组件配置了一个模板，那么 将会使用此参数来装配模板。 如果没有为当前组件配置模板，组件的内容区域将会通过Ext.Element 进行刷新。
  • loadScripts : Boolean
    (可选)只用在使用html配置时此参数才合法。默认为false。
  • callback : Function
    (可选)只用在使用html配置时此参数才合法。 当脚本加载完成时回调函数才被执行。
返回值:
  • void
Component
updateBox ( Object box ) : Ext.BoxComponent
设置此组件底层元素的盒子模型尺寸。(译者注：盒子模型是CSS术语，详细资料请自行搜索。)
设置此组件底层元素的盒子模型尺寸。(译者注：盒子模型是CSS术语，详细资料请自行搜索。)
参数:
  • box : Object
    一个格式为{x, y, width, height}的对象
返回值:
  • Ext.BoxComponent
    this
BoxComponent

公共事件

Event Defined By
add : ( Ext.Container this , Ext.Component component , Number index )
监听器将会被使用如下的参数被调用:
  • this : Ext.Container
  • component : Ext.Component
    被添加的组件
  • index : Number
    将组件添加到容器子组件集合时的位置索引
Container
added : ( Ext.Component this , Ext.Container ownerCt , number index )
当一个组件被添加到一个Ext.Container时触发
当一个组件被添加到一个Ext.Container时触发
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • ownerCt : Ext.Container
    用于组件的容器
  • index : number
    添加组件的位置
Component
afterlayout : ( Ext.Container this , ContainerLayout layout )
当容器中的组件被指定的布局管理器排列的时候触发。
当容器中的组件被指定的布局管理器排列的时候触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Container
  • layout : ContainerLayout
    为当前容器提供的ContainerLayout实现
Container
afterrender : ( Ext.Component this )
在组件渲染完成之后触发...

在组件渲染完成之后触发。

afterrender事件在当前组件被rendered 结束之后、在为组件定义的所有afterRender方法执行之后 触发，并且，如果有stateful， 也在状态被保存之后才触发。

监听器将会以如下参数格式被调用:
  • this : Ext.Component
Component
beforeadd : ( Ext.Container this , Ext.Component component , Number index )
在任何 Ext.Component 被添加或者插入到容器中之前触发。 事件处理器可以返回false取消添加操作。
在任何 Ext.Component 被添加或者插入到容器中之前触发。 事件处理器可以返回false取消添加操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Container
  • component : Ext.Component
    被添加的组件
  • index : Number
    组件被添加到容器子项目集合中时的索引位置
Container
beforecollapse : ( Ext.Panel p , Boolean animate )
在Panel被折叠之前触发。监听器可以返回false取消折叠。
在Panel被折叠之前触发。监听器可以返回false取消折叠。
监听器将会以如下参数格式被调用:
  • p : Ext.Panel
    被折叠的Panel
  • animate : Boolean
    如果折叠操作使用了动画效果，此参数为true，其它为false
Panel
beforedestroy : ( Ext.Component this )
在组件 destroyed 之前触发。 在事件监听器中返回false以停止 destroy 操作。
在组件 destroyed 之前触发。 在事件监听器中返回false以停止 destroy 操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforeexpand : ( Ext.Panel p , Boolean animate )
在Panel被展开之前触发。监听器可以返回false取消展开操作。
在Panel被展开之前触发。监听器可以返回false取消展开操作。
监听器将会以如下参数格式被调用:
  • p : Ext.Panel
    被展开的Panel
  • animate : Boolean
    如果展开操作使用动画效果，为true，其它为false
Panel
beforehide : ( Ext.Component this )
在调用hide方法隐藏组件之前触发。 在事件监听器中返回false可以停止隐藏操作。
在调用hide方法隐藏组件之前触发。 在事件监听器中返回false可以停止隐藏操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforeremove : ( Ext.Container this , Ext.Component component )
从容器中删除任何Ext.Component 之前触发。 处理器可以返回false取消remove操作。
从容器中删除任何Ext.Component 之前触发。 处理器可以返回false取消remove操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Container
  • component : Ext.Component
    被删除的组件
Container
beforerender : ( Ext.Component this )
在组件被rendered 之前触发。 在事件监听器中返回false可以停止render 操作。
在组件被rendered 之前触发。 在事件监听器中返回false可以停止render 操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforeshow : ( Ext.Component this )
在调用show()方法现实组件之前触发。 事件处理函数返回false可以停止show。
在调用show 方法现实组件之前触发。 事件处理函数返回false可以停止show。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforestaterestore : ( Ext.Component this , Object state )
在组件状态恢复之前触发。返回false停止恢复状态操作。
在组件状态恢复之前触发。返回false停止恢复状态操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    StateProvider返回的状态哈希值。 如果没有禁止此事件，那么状态对象会被传递给applyState。 默认情况下，这样简单地把属性值拷贝到当前组件中。 可以覆盖此方法以提供自定的状态恢复操作。
Component
beforestatesave : ( Ext.Component this , Object state )
在组件状态被保存到配置的状态提供者之前触发。 返回false可以停止保存。
在组件状态被保存到配置的状态提供者之前触发。 返回false可以停止保存。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    状态值哈希。 这由在组件上调用getState() 方法决定。 此方法必须由开发者提供，返回是否需要对状态进行描述，默认情况下， Ext.Component有一个空实现。
Component
collapse : ( Ext.Panel p )
在Panel被折叠后触发。
在Panel被折叠后触发。
监听器将会以如下参数格式被调用:
  • p : Ext.Panel
    被折叠的Panel
Panel
destroy : ( Ext.Component this )
在组件被销毁之后触发。
在组件被destroyed之后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
disable : ( Ext.Component this )
在组件被设置为无效状态后触发。
在组件被设置为无效状态后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
enable : ( Ext.Component this )
当组件被设置为有效(enabled)之后触发。
当组件被设置为有效(enabled)之后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
expand : ( Ext.Panel p )
当Panel已经展开之后触发。
当Panel已经展开之后触发。
监听器将会以如下参数格式被调用:
  • p : Ext.Panel
    已经被展开的Panel.
Panel
hide : ( Ext.Component this )
在组件被隐藏之后触发。 当调用hide 方法隐藏组件之后触发。
在组件被隐藏之后触发。 当调用hide 方法隐藏组件之后触发。
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
iconchange : ( Ext.Panel p , String The , String The )
当Panel的图标被set或者 changed 之后触发。
当Panel的图标被set或者 changed 之后触发。
监听器将会以如下参数格式被调用:
  • p : Ext.Panel
    icon class被变化的Panel
  • The : String
    新icon类
  • The : String
    旧icon类
Panel
move : ( Ext.Component this , Number x , Number y )
在组件移动之后触发。
在组件移动之后触发。
监听器将会用如下的参数格式来调用:
  • this : Ext.Component
  • x : Number
    The new x position
  • y : Number
    The new y position
BoxComponent
remove : ( Ext.Container this , Ext.Component component )
监听器将会以如下的参数格式被调用:
  • this : Ext.Container
  • component : Ext.Component
    被删除的组件
Container
removed : ( Ext.Component this , Ext.Container ownerCt )
当一个组件被从Ext.Container容器中删除时触发
当一个组件被从Ext.Container容器中删除时触发
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • ownerCt : Ext.Container
    持有组件的容器
Component
render : ( Ext.Component this )
在组件被渲染之后触发。
在组件被 rendered(渲染) 之后触发。
监听器将以如下的参数格式被调用:
  • this : Ext.Component
Component
resize : ( Ext.Component this , Number adjWidth , Number adjHeight , Number rawWidth , Number rawHeight )
在组件被调整大小之后触发。
在组件被调整大小之后触发。
监听器将以如下的参数格式被调用:
  • this : Ext.Component
  • adjWidth : Number
    这是width调整后的值
  • adjHeight : Number
    这是height调整后的值
  • rawWidth : Number
    这是width原来的值
  • rawHeight : Number
    这是height原来的值
BoxComponent
show : ( Ext.Component this )
在调用show 方法显示组件之后触发。
在调用show 方法显示组件之后触发。
监听器将会用如下的参数格式被调用:
  • this : Ext.Component
Component
staterestore : ( Ext.Component this , Object state )
组件状态被存储之后触发。
组件状态被存储之后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    StateProvider返回的状态哈希值。 如果没有禁止此事件，那么状态对象会被传递给applyState。 默认情况下，这样简单地把属性值拷贝到当前组件中。 可以覆盖此方法以提供自定的状态恢复操作。
Component
statesave : ( Ext.Component this , Object state )
在组件状态被保存到所配置的状态提供者之后触发。
在组件状态被保存到所配置的状态提供者之后触发。
监听器将会用如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    状态值hash。 这是由在足见上调用getState() 方法决定的。 开发者必须提供此方法以返回是否需要恢复状态，默认情况下， Ext.Component有一个空实现。
Component
titlechange : ( Ext.Panel p , String The )
在Panel的标题被set或者 changed 之后触发。
在Panel的标题被set或者 changed 之后触发。
监听器将会以如下参数格式被调用:
  • p : Ext.Panel
    标题被改变的Panel.
  • The : String
    新的标题。
Panel


Observable
    Component
      BoxComponent
        Container
          Panel
            FormPanel

Class Ext.form.FormPanel

包: | Ext.form
定义类的文件: | Form.js
类: | FormPanel
继承自: | Panel

标准 form 容器.

Layout

FormPanel默认配置 layout:'form'使用 Ext.layout.FormLayout 布局管理, 使输入栏和标签能够正确地渲染，当在FormPanel中构建子容器时, 你必须保证有输入栏的后代容器使用 Ext.layout.FormLayout 布局管理。

BasicForm

尽管 没有作为FormPanel的配置选项被列举出来,该类接受配置其内部 Ext.form.BasicForm的选项 :

  • file uploads
  • 加载、校验和提交功能

注意: 如果继承FormPanel, 任何BasicForm的配置项都必须被应用到FormPanel的any configuration options for initialConfig 属性，将BasicForm的配置项应用到this， 将不会对BasicForm的配置产生影响。

Form Validation

表单校验如下：

  • Ext.form.TextField
  • Ext.form.VTypes
  • BasicForm.doAction clientValidation notes
  • monitorValid

表单提交

Ext Forms默认通过ajax提交,使用 Ext.form.Action. 如果要使用普通浏览器提交方式提交包含在该FormPanel中的 BasicForm , 参阅 standardSubmit 选项.

配置项

Config Options Defined By
activeItem : String/Number
一个string型的组件id，或者组件的数字索引， 它需要...
一个string型的组件id，或者组件的数字索引， 它需要在渲染时在容器内的布局管理器中被初始化并激活。 例如：activeItem: 'item-1' 或者 activeItem: 0 ( 索引 0 =容器子项目集合中的第一个元素)。 activeItem仅仅适用于一次显示一个组件的布局模式(比如 Ext.layout.AccordionLayout, Ext.layout.CardLayout 和 Ext.layout.FitLayout)。 与 Ext.layout.ContainerLayout.activeItem 相关。
Container
allowDomMove : Boolean
在渲染时组件是否可以移动Dom节点(默认为true)。
Component
anchor : String
注: 这个配置只用于该组件被包含在一个已使用AnchorLayout...

注: 这个配置只用于该组件被包含在一个已使用 AnchorLayout (或者其子类)配置的Container时。 基于布局管理器，例如：

  • Ext.form.FormPanel
  • 指定 layout: 'anchor' // or 'form', or 'absolute'

参见 Ext.layout.AnchorLayout. anchor 。

BoxComponent
animCollapse : Boolean
true将会在panel被折叠时使用动画效果，false将会跳过动画效果....
true 将会在panel被折叠时使用动画效果， false 将会跳过动画效果( 如果Ext.Fx类 有效，默认为 true ，否则为 false )。
Panel
applyTo : Mixed
指定一个元素的id、一个DOM元素或者一个已经存在并被渲染到DIV中的元素，此DIV已经被...

指定一个元素的id、一个DOM元素或者一个已经存在并被渲染到DIV中的元素，此DIV已经被 渲染到document中，并且为当前组件指定了一些结构化的标签。

  • 描述 :
      当使用了 applyTo， 在主元素中也可以用id或者CSS类名来指定组件的托管部分， 并且，如果可以的话，创建的组件可能也会试图在那个标签中创建它的子组件。
  • 注意 :
      当使用此配置项时，无需调用render()方法。
      如果指定了applyTo属性，任何传递给 renderTo 的值都会被忽略，并且目标元素的父节点将会自动被用作组件的容器。
Panel
autoDestroy : Boolean
如果为true，容器将自动销毁任何从其中被删除的组件， 否则...
如果为true，容器将自动销毁任何从其中被删除的组件， 否则必须手动处理销毁操作(默认为true)。
Container
autoHeight : Boolean
如果值为true，height配置项为'auto'，否则值为false的话使用固定的高度...

如果值为true，height配置项为'auto'，否则值为false的话使用固定的高度， 或者可以由其父类容器 layout manager来控制。(默认值为 false)。

注: 虽然很多组件继承了这个配置选项，但不是所有这些组件的自适应高度配置都会像期望的那样起作用。 设置autoHeight：值为true时，浏览器将根据元素的内容自动设置高度，这将意味着Ext不会去管理高度。

如果是由浏览器来管理高度，需要注意的是，通过浏览器进行调整的结构组件内不能被发现， 因此宽度的变化可能导致需要进行同步处理元素的高度。 例如：

var w = new Ext.Window({
    title: 'Window',
    width: 600,
    autoHeight: true,
    items: {
        title: 'Collapse Me',
        height: 400,
        collapsible: true,
        border: false,
        listeners: {
            beforecollapse: function() {
                w.el.shadow.hide();
            },
            beforeexpand: function() {
                w.el.shadow.hide();
            },
            collapse: function() {
                w.syncShadow();
            },
            expand: function() {
                w.syncShadow();
            }
        }
    }
}).show();
Panel
autoLoad : Object/String/Function
一个合法的url描述，依照Updater Ext.Updater.update 方法...
一个合法的url描述，依照Updater Ext.Updater.update 方法。如果autoLoad不为null，panel将会在渲染之后立即尝试加载它的内容。

URL将会成为当前panel的body元素的默认URL，这样它可以在任意时刻被 refresh.

Panel
autoScroll : Boolean
如果值为true，将会在该元素上使用overflow:'auto'配置，并且在必要的时候...
如果值为true，将会在该元素上使用overflow:'auto'配置，并且在必要的时候自动显示滚动条，否则，溢出部分的组件都会被切除(默认值为 false)。
BoxComponent
autoShow : Boolean
如果组件需要检测隐藏CSS属性(如 'x-hidden' 或者 'x-hide-display')并且在渲染时删除...
如果组件需要检测隐藏CSS属性(如 'x-hidden' 或者 'x-hide-display')并且在渲染时删除它们 (默认为false)，设置此值为true。
Component
autoWidth : Boolean
如果为true，使用width:'auto'配置，否则使用固定的宽度...

如果为true，使用width:'auto'配置，否则使用固定的宽度，或者可以由其父类容器的layout manager来控制。(默认值为 false)。

注: 虽然很多组件继承了这个配置选项，但不是所有这些组件的自适应宽度配置都会像期望的那样起作用。 设置autoWidth：值为true时，浏览器将根据元素的内容自动设置宽度，这将意味着Ext不会去管理宽度。

如果是由浏览器来管理宽度，需要注意的是，通过浏览器进行调整的结构组件内不能被发现，因此宽度的变化可能导致需要进行同步处理元素的宽度。 例如，在这个元素的目标是：

<div id='grid-container' style='margin-left:25%;width:50%'></div>
当浏览器窗口改变时，渲染后的Panel必须监听浏览器窗口大小的变化，以便通知子项，浏览器改变了其宽度：

var myPanel = new Ext.Panel({
    renderTo: 'grid-container',
    monitorResize: true, // relay on browser resize
    title: 'Panel',
    height: 400,
    autoWidth: true,
    layout: 'hbox',
    layoutConfig: {
        align: 'stretch'
    },
    defaults: {
        flex: 1
    },
    items: [{
        title: 'Box 1',
    }, {
        title: 'Box 2'
    }, {
        title: 'Box 3'
    }],
});
BoxComponent
baseCls : String
应用到当前panel元素上的基本CSS类(默认为 'x-panel' )...
应用到当前panel元素上的基本CSS类(默认为 'x-panel' )。

另一个可选的默认变量是指定 'x-plain' ，它将去掉所有样式，除了Ext布局功能所必须的属性 (例如overflow:hidden)。另请参见 unstyled 。

Panel
bbar : Object/Array
panel底部工具栏。 此参数可以是一个Ext.Toolbar 、一个工具栏配置项，或者一个buttons/button配置数组---用来被添加到工具栏中...

panel底部工具栏。 此参数可以是一个Ext.Toolbar 、一个工具栏配置项，或者一个buttons/button配置数组---用来被添加到工具栏中。 注意，此参数在渲染之后是无效的。如果在渲染之后需要访问底部工具栏 ，请使用 getBottomToolbar。

注意:尽管Toolbar可以包含Field组件，但它们不会 通过加载祖先FormPanel而被更新。Panel的工具栏不是标准Container->Component 层次的一部分，所以它们不会被扫面以收集表单项。但是，这些值还是会 被提交，因为提交表单的参数是从DOM树中收集的。

Panel
bbarCfg : Object
一个 ADomHelper 元素的配置对象，描述了当前Panelbbar元素的结构...

一个DomHelper 元素的配置对象，描述了当前Panel的bbar元素结构。 另请参见 bodyCfg 。

Panel
bodyBorder : Boolean
True将会在Panel的body元素内部显示一个边框，false将会隐藏它 (默认为true)。只有当border == true 时...
True将会在Panel的body元素内部显示一个边框，false将会隐藏它 (默认为true)。只有当border == true 时，此参数才会被应用。如果border == true 并且 bodyBorder == false， 将会给整个body元素一种凹陷式的外观。
Panel
bodyCfg : Object
一个DomHelper 元素描述对象，可以被指定给任何Panel Element...

一个DomHelper 元素描述对象，可以被指定给任何Panel Element.

默认情况下，以下表格中的Default元素将会被用作html标签，用来创建一个子元素 ，与Default类名相匹配( baseCls 将会被 baseCls 替换 ):

Panel      Default  Default             Custom      Additional       Additional
Element    element  class               element     class            style
========   ==========================   =========   ==============   ===========
header     div      baseCls+'-header'   headerCfg   headerCssClass   headerStyle
bwrap      div      baseCls+'-bwrap'     bwrapCfg    bwrapCssClass    bwrapStyle
+ tbar     div      baseCls+'-tbar'       tbarCfg     tbarCssClass     tbarStyle
+ body     div      baseCls+'-body'       bodyCfg     bodyCssClass     bodyStyle
+ bbar     div      baseCls+'-bbar'       bbarCfg     bbarCssClass     bbarStyle
+ footer   div      baseCls+'-footer'   footerCfg   footerCssClass   footerStyle

例如，配置一个自定义的元素，用来强制 body 元素使用不同形式的标签，而不是使用默认创建的。 这种情况的一个例子可能是 创建一个子 Panel，包含自定义的内容，例如header，或者通过使body拥有一个<center> 元素， 从而强制Panel中的所有内容居中:

new Ext.Panel({
    title: 'Message Title',
    renderTo: Ext.getBody(),
    width: 200, height: 130,
    bodyCfg: {
        tag: 'center',
        cls: 'x-panel-body',  // Default class not applied if Custom element specified
        html: 'Message'
    },
    footerCfg: {
        tag: 'h2',
        cls: 'x-panel-footer'        // same as the Default class
        html: 'footer html'
    },
    footerCssClass: 'custom-footer', // additional css class, see addClass

    footerStyle:    'background-color:red' // see bodyStyle

});

以上例子也显式创建了一个 footer ，拥有自定义的标签和样式。

Panel
bodyCssClass : String/Object/Function
可选的CSS类选择器，被应用到body 元素上，其格式为Ext.Element.addClass所 期望的值(默认为null)...
可选的CSS类选择器，被应用到body 元素上，其格式为Ext.Element.addClass所 期望的值(默认为null)。参见 bodyCfg.
Panel
bodyStyle : String/Object/Function
自定义的CSS样式，它将被应用到body 元素上，其格式为...
自定义的CSS样式，它将被应用到body 元素上，其格式为Ext.Element.applyStyles 所期望的值(默认为null)。参见bodyCfg。
Panel
border : Boolean
True将会显示panel body元素的边框，false将会隐藏它们 (默认为true)。默认情况下，边框是一个2px宽度的内嵌边框...
True将会显示panel body元素的边框，false将会隐藏它们 (默认为true)。默认情况下，边框是一个2px宽度的内嵌边框， 但是，以后可以通过设置bodyBorder 为false以改变它。
Panel
boxMaxHeight : Number
设置组件的最大高度值...

设置组件的最大高度值。

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

BoxComponent
boxMaxWidth : Number
设置组件的最大宽度值...

设置组件的最大宽度值。

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

BoxComponent
boxMinHeight : Number
设置组件的最小高度值...

设置组件的最小高度值。

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

BoxComponent
boxMinWidth : Number
设置组件的最小宽度值...

设置组件的最小宽度值。

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

BoxComponent
bubbleEvents : Array
一个事件数组，当这些事件被触发时，将会被冒泡到所有父容器中。参见....

一个事件数组，当这些事件被触发时，将会被冒泡到所有父容器中。参见 Ext.util.Observable.enableBubble。 默认为 []。

Container
bufferResize : Boolean/Number
当设置为true时(50毫秒)或者是一个毫秒数值， 指定给当前容器的布...
当设置为true时(50毫秒)或者是一个毫秒数值， 指定给当前容器的布局管理器将会缓存它计算出的频率，然后 对组件进行一次重新布局操作。 对于重量级的容器，或者拥有大量子组件的容器来说，这非常有用， 因为频繁进行布局是非常昂贵的。 默认为 50 .
Container
buttonAlign : String
添加到当前panel的所有 buttons 的对齐方式。 合法的值有...
添加到当前panel的所有 buttons 的对齐方式。 合法的值有 'right' , 'left' 和 'center' (默认为 'right' )。
Panel
buttons : Array
一个Ext.Button或者Ext.Button的配置数组，用来在FormPanel的底部添加按钮，在FormPanel底部的按钮...
一个 Ext.Buttons 或者 Ext.Button 的配置数组，用来在FormPanel的底部添加按钮

在FormPanel底部的按钮 可用 formBind: true配置. 这会触发form的 校验检测机制 以根据form的有效/无效状态启用/禁用按钮。

FormPanel
bwrapCfg : Object
一个DomHelper 元素描述对象，描述了当前Panel的 bwrap 的元素的结构...

一个DomHelper 元素描述对象，描述了当前Panel的 bwrap 的元素的结构。另请参见 bodyCfg 。

Panel
clearCls : String
应用到特殊的clearing div的CSS类， 这个clearing div直接渲染到每个form field的包装器后面...

应用到特殊的clearing div的CSS类， 这个clearing div直接渲染到每个form field的包装器后面，以提供 清除field的功能(默认为 'x-form-clear-left')。

注意: 只有在当前组件被渲染到一个使用FormLayout 布局(例如 Ext.form.FormPanel 或者指定 layout:'form')的 容器中、或者是指定了一个fieldLabel 、或者指定isFormField=true 时此配置才有效。

另请参见 Ext.layout.FormLayout. fieldTpl。

Component
closable : Boolean
Panel自身不支持关闭操作，但是Panel的一些子类 (例如Ext.Window) ，或者处于Ext.TabPanel中的 Panel支持...
Panel自身不支持关闭操作，但是Panel的一些子类 (例如Ext.Window) ，或者处于Ext.TabPanel中的 Panel支持。 指定此参数为 true 可以在这些情况下启用关闭。默认为 false 。
Panel
cls : String
一个可选的额外CSS类，它将被添加到当前组件的元素上(默认为'')...
一个可选的额外CSS类，它将被添加到当前组件的元素上(默认为'')。 此属性对于在组件上，或者它的任何使用标准CSS规则的孩子节点上， 添加定制的样式非常有用。
Component
collapseFirst : Boolean
将会确保折叠/展开(collapse/expand)按钮总是被渲染在第一个位置...
true 将会确保折叠/展开(collapse/expand)按钮总是被渲染在第一个位置， 在panel顶部的工具栏中位于任何其它工具左侧， false 将会把它渲染在最后(默认为 true )。
Panel
collapsed : Boolean
如果当前panel被折叠为true。只读。
Panel
collapsedCls : String
在被折叠后，一个被添加到panel元素上的CSS类 (默认为 'x-panel-collapsed' )。
Panel
collapsible : Boolean
True将会使panel折叠并且会自动把展开/折叠(expand/collapse)按钮渲染到顶部...
True将会使panel折叠并且会自动把展开/折叠 (expand/collapse)按钮渲染到顶部工具按钮区域，false将 保持panel尺寸固定，没有按钮(默认为false)。
Panel
contentEl : String
(可选)指定一个已存在的HTML元素，或者一个已存在HTML元素的...

(可选)指定一个已存在的HTML元素，或者一个已存在HTML元素的 id ，它们将被用作当前组件的内容。

  • 描述 :
    此配置选项被用来将一个已存在的HTML元素 插入到一个新组件(在组件渲染之后它简单地移动DOM元素) 的layout元素中，使它成为该组件的内容。
  • 注意 :
    指定的HTML元素将被append到组件的layout元素中， 在所有配置的 HTML 被插入之后， 并且，这样的话，在render事件 被触发时，document中将不再包含此元素。
    指定的HTML元素将不会参与组件所有可能使用的 layout 过程(译者注：指这些HTML元素 不会参与布局操作)。 它仅是HTML而已。布局操作实在孩子 items 上进行的。
    添加 x-hidden 或者 x-hide-display CSS类，以防在内容渲染到panel时发生闪烁。
Component
ctCls : String
一个可选的外部CSS样式，添加到这个组件的容器(默认值为 '')。 这个方法对于使用标准的CSS规则...

一个可选的外部CSS样式，添加到这个组件的容器(默认值为 '')。 这个方法对于使用标准的CSS规则，为组件或它的任何一个子组件添加特定的样式非常有用。 参见 Ext.layout.ContainerLayout和 extraCls 。

注意: ctCls 默认为 ''期望如下的类，它们将指定一个默认值:

  • Box Layout : 'x-box-layout-ct'
使用一个额外的CSS类配置以上的Class，它是append到默认对象上的。例如， 对于BoxLayout (Hbox and Vbox):
                                ctCls: 'x-box-layout-ct custom-class'

Component
data : Mixed
初始化数据集，它将被应用到 tpl 上以刷新组件的内容区域。
Component
defaultType : String
当一个子项目通过一个原生的配置对象 而不是一个组件的实例指定时。...

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

默认为 'panel' ， Ext.menu.Menu 默认为 'menuitem' ， Ext.Toolbar 和 Ext.ButtonGroup 默认为 'button' 。

Container
defaults : Object|Function
此选项是在所有添加的项目上应用默认设置的手段， 这些项目要么是通过...

此选项是在所有添加的项目上应用默认设置的手段， 这些项目要么是通过 items 配置项添加的， 或者是通过 add 或者是通过 insert 方法添加的。

如果添加的项目是一个配置对象， 并且不是一个组件的实例， 那么默认参数将会被无条件地被应用。 如果添加的项目是一个组件的实例， 那么默认参数将有条件地被应用，以免覆盖项目上的现有属性你。

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

例如，如需自动在 Ext.Panel 所包含的每个项目上应用padding属性，你可以传递: defaults: {bodyStyle: 'padding:15px'} 。

用法:

defaults: {               // defaults are applied to items, not the container
    autoScroll:true
},
items: [
    {
        xtype: 'panel',   // defaults do not have precedence over
        id: 'panel1',     // options in config objects, so the defaults
        autoScroll: false // will not be applied here, panel1 will be autoScroll:false
    },
    new Ext.Panel({       // defaults do
                                     have precedence over options
        id: 'panel2',     // options in components, so the defaults
        autoScroll: false // will be applied here, panel2 will be autoScroll:true.
    })
]
Container
disabled : Boolean
当前组件处于无效状态时为true。 Read-only.
Panel
disabledClass : String
当组件处于无效状态时添加到组件上的CSS类(默认为 'x-item-disabled')。
Component
draggable : Boolean/Object
true 可以让当前panel启用拖拽操作(默认为 false )...

true 可以让当前panel启用拖拽操作(默认为 false )。

如需自定义的drag/drop实现，也可以向此配置项传递一个 Ext.Panel.DD配置替代 true 。 Ext.Panel.DD是一个内部没有文档化的类，它在周围移动代理元素 代替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();
Panel
elements : String
panel元素列表，以逗号分隔，在panel被渲染时初始化。 通常情况下...
panel元素列表，以逗号分隔，在panel被渲染时初始化。 通常情况下，此列表在配置时根据添加到panel的项目被自动创建， 但有时，即使没有在配置时指定，对于确保一个结构化的元素被渲染也很有用 (例如，你可能希望在panel被渲染后动态地添加一个按钮或者工具栏)。 添加这些元素到此列表中将会在panel被渲染时分配必须的占位符。 合法的值有
  • header
  • tbar (top bar)
  • body
  • bbar (bottom bar)
  • footer
Defaults to ' body '.
Panel
fbar : Object/Array
一个Toolbar 对象、一个Toolbar配置项，或者一个Buttons/ Button 配置数组，...

一个Toolbar 对象、一个Toolbar配置项，或者一个Buttons/ Button 配置数组，它们描述了一个被添加到当前Panel底部元素的 Toolbar.

在渲染后， fbar 将会为一个Toolbar 实例。

如果指定了 buttons ，它们将替代 fbar 配置项。

Panel的 buttonAlign 配置项目将会影响这些项目的布局，例如:
var w = new Ext.Window({
    height: 250,
    width: 500,
    bbar: new Ext.Toolbar({
        items: [{
            text: 'bbar Left'
        },'->',{
            text: 'bbar Right'
        }]
    }),
    buttonAlign: 'left', // anything but 'center' or 'right' and you can use '-', and '->'

                                  // to control the alignment of fbar items
    fbar: [{
        text: 'fbar Left'
    },'->',{
        text: 'fbar Right'
    }]
}).show();

注意:尽管Toolbar可以包含Field组件，但它们不会 通过加载祖先FormPanel而被更新。Panel的工具栏不是标准Container->Component 层次的一部分，所以它们不会被扫面以收集表单项。但是，这些值还是会 被提交，因为提交表单的参数是从DOM树中收集的。

Panel
fieldLabel : String
紧靠此field显示的标签文本(默认值为 '')。注意...

紧靠此field显示的标签文本(默认值为 '')。

注意:只有在当前组件被渲染到一个使用FormLayout 的容器中时，此配置才有效。 (例如 Ext.form.FormPanel 或 指定 layout:'form')。

另请参见 hideLabel 、 Ext.layout.FormLayout和 fieldTpl。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Name'
    }]
});
Component
flex : Number
注: 这个配置只用于该组件被包含在一个已使用BoxLayout配置的Container中时...

注: 这个配置只用于该组件被包含在一个已使用BoxLayout配置的Container中时。通过计算每一个子组件的flex值所占全部flex值之和的比例，来决定子组件的宽(HBoxLayout)高(VBoxlayout)。 任何子项的 flex = 0 或 flex = undefined 将不被设置(初始值大小将不被改变)。

BoxComponent
floating : Mixed
此参数被用来配置底层的 Ext.Layer. 此配置参数可接受的值有...

此参数被用来配置底层的 Ext.Layer. 此配置参数可接受的值有:

  • false : 默认。
    在渲染的地方以内嵌的方式显示panel.
  • true :
    浮动panel (绝对定位，有自动衬垫和阴影)。
      设置floating为true将会为当前panel创建一个Ext.Layer 并且在负值偏移量处显示panel，这样它就是隐藏的。
      既然panel被绝对定位，位置必须在渲染之后被显式设置 (例如 myPanel.setPosition(100,100); )。
      注意: 如果浮动面板，你必须总是指定一个固定的宽度， 否则它将是自动宽度并且总是展开以便填充到视口右侧 边缘。
  • object :
    指定的对象将会被用作将会被创建的 Ext.Layer的 配置对象。
Panel
footer : Ext.Element
Panel底部Element 。只读。此元素被用来容纳Panel的...
Panel底部Element 。只读。

此元素被用来容纳Panel的 buttons 或者 fbar 。

注意: 另请参见 el 的注释。

Panel
footerCfg : Object
一个DomHelper 元素的配置对象，描述了当前Panel的footer元素结构。 另请参见...

一个DomHelper 元素的配置对象，描述了当前Panel的footer元素结构。 另请参见 bodyCfg 。

Panel
forceLayout : Boolean
如果此值为true，容器将将强制初始化一次布局操作...
如果此值为true，容器将将强制初始化一次布局操作， 即使容器处于隐藏或者折叠状态。 此配置项对于在一个折叠或者隐藏的容器中强制渲染非常有用 (默认为false)。
Container
formId : String
该form标签的id (默认为自动产生的id
FormPanel
frame : Boolean
默认情况下使用 false ，渲染简单的1px的正方形边框。 true 将会渲染9个元素，以自定义的圆角结束...
默认情况下使用 false ，渲染简单的1px的正方形边框。 true 将会渲染9个元素，以自定义的圆角结束 (另请参见 Ext.Element.boxWrap)。

每种情况下产生的模板描述如下:

// frame = false
<div id="developer-specified-id-goes-here" class="x-panel">

    <div class="x-panel-header"><span class="x-panel-header-text">Title: (frame:false)</span></div>

    <div class="x-panel-bwrap">
        <div class="x-panel-body"><p>html value goes here</p></div>
    </div>
</div>

// frame = true (create 9 elements)
<div id="developer-specified-id-goes-here" class="x-panel">
    <div class="x-panel-tl"><div class="x-panel-tr"><div class="x-panel-tc">
        <div class="x-panel-header"><span class="x-panel-header-text">Title: (frame:true)</span></div>
    </div></div></div>

    <div class="x-panel-bwrap">
        <div class="x-panel-ml"><div class="x-panel-mr"><div class="x-panel-mc">
            <div class="x-panel-body"><p>html value goes here</p></div>
        </div></div></div>

        <div class="x-panel-bl"><div class="x-panel-br"><div class="x-panel-bc"/>
        </div></div></div>
</div>
Panel
header : Ext.Element
Panel的headerElement. 只读。此元素被用来容纳 title和 tools...
Panel的headerElement. 只读。

此元素被用来容纳 title和 tools

注意: 另请参见 el 的注释。

Panel
headerAsText : Boolean
true 将会在 header 中显示panel title ， false 将会隐藏它(默认为 true )。
Panel
headerCfg : Object
一个DomHelper 元素的配置对象，描述了当前Panel的header元素结构...

一个DomHelper 元素的配置对象，描述了当前Panel的header元素结构。 另请参见 bodyCfg 。

Panel
height : Number
组件的高度(默认值为 auto)。注:如果想使用百分比的方式...
组件的高度(默认值为 auto)。注:如果想使用百分比的方式来设置值，请查看 Ext.Component.anchor。
BoxComponent
hidden : Boolean
如果当前组件处于隐藏状态，此值为true。Read-only。
Component
hideBorders : Boolean
设置为true可以隐藏所包含的每个组件的边框， false为遵照组件现有的边框设置...
设置为true可以隐藏所包含的每个组件的边框， false为遵照组件现有的边框设置(默认为 false)。
Container
hideCollapseTool : Boolean
true 将会在 collapsible == true 时隐藏展开/折叠按钮， false 将会显示它(默认为 false )。
Panel
hideLabel : Boolean
true时完全隐藏label元素 ( label 和 separator)。 默认为 false。 默认情况下，即使你不指定...

true时完全隐藏label元素 ( label 和 separator)。 默认为 false。 默认情况下，即使你不指定 fieldLabel 它的空间仍然会被保留，这样这块区域会与其它确实拥有label的区域位于同一排。 讲此值设置为 true 将导致此区域不再保留此空间。

注意: 参见 clearCls 的注释。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield'
        hideLabel: true
    }]
});
Component
hideLabels : Boolean

true 隐藏labels(设置 display:none). 该选项默认为 false.

也可以看 Ext.Component. hideLabel .

FormPanel
hideMode : String
组件如何隐藏，支持的值有： 'visibility' (css visibility), 'offsets' (位置偏移量为负值) 和...

组件如何隐藏，支持的值有： 'visibility' (css visibility), 'offsets' (位置偏移量为负值) 和 'display' (css display).

注意:一般首选默认值 'display'，因为当组件第一次显示的时候它们会自动进行布局 (隐藏的时候不会调整尺寸)。

Component
hideParent : Boolean
此值为true时，当调用hide/show方法时，将会hide和show组件的容器...
此值为true时，当调用hide/show方法时，将会hide和show组件的容器；false时将会 hide和show组件自身(默认为false)。例如，这可以用作window上隐藏按钮的一种 快捷操作，通过设置此按钮的hideParent:true，然后把它添加到window上。
Component
html : String/Object
一个HTML片段，或者一个 DomHelper 描述，用作layout元素的内容(默认为'')。...
一个HTML片段，或者一个 DomHelper 描述，用作layout元素的内容(默认为'')。 这个HTML内容在组件渲染之后才被添加，所以在 render 出发的时候，document中尚未包含此HTML。 但是这个内容将会在所有配置的 contentEl 之前被插入到body标签中。
Component
iconCls : String
CSS类选择器，指定被用作头部图标的背景图片(默认为'')...
CSS类选择器，指定被用作头部图标的背景图片(默认为'')。

指定自定义图表类的示例就像:

// specify the property in the config for the class:
     ...
     iconCls: 'my-icon'

// css class that specifies background image to be used as the icon image:
.my-icon { background-image: url(../images/my-icon.gif) 0 6px no-repeat !important; }
Panel
id : String
当前组件唯一的id(默认为auto-assigned id)...

当前组件唯一的id(默认为auto-assigned id)。 如果你需要在以后访问组件，而又没有一个有效的组件对象引用，那么你需要指定一个 id( 也就是，使用Ext. getCmp方法 )。

注意，此id也将被用作组件底层HTML标签的id，这些标签被渲染到页面中。 这将允许你编写基于id的CSS规则，以独立地描述指定的实例；并且，也可以通过 组件父标签的id选中子元素。

注意:为了避免与唯一的id 产生重复， 请参见 itemId 和 ref 。

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

Component
itemCls : String
应用到输入栏x-form-item的CSS类, 此参数自动继承到子容器.
FormPanel
itemId : String
当没有可利用的对象引用时，itemId可以作为第二选择，用来获得一个组件的引用， 代替 ...

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

var c = new Ext.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'); // 与 Ext.getCmp()不同

p2 = p1.ownerCt.getComponent('p2'); // 通过兄弟对象获得引用

另请参见 id 和 ref 。

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

Component
items : MixedCollection
当前容器中的子组件集合 Ext.util.MixedCollection
Container
keys : Object/Array
一个Ext.KeyMap 配置对象 (其格式为Ext.KeyMap.addBinding 所期望的值...
一个Ext.KeyMap 配置对象 (其格式为Ext.KeyMap.addBinding 所期望的值，用来向当前panel上绑定自定义的按键处理(默认为 null )
Panel
labelAlign : String
该容器中可用的文本对齐值，合法值有"left", "top" ...
该容器中可用的文本对齐值，合法值有 "left", "top" 和 "right" (默认为 "left"). 该参数继承到子容器并且可以在任何子容器中覆盖之。(例如, 一个fieldset可以为它的输入栏指定不同的标签对齐方式).
FormPanel
labelPad : Number
输入栏和标签的间距默认为5.只在labelWidth被指定时生效...
输入栏和标签的间距默认为 5. labelPad 只在 labelWidth labelWidth被指定时生效, 否则将被忽略。
FormPanel
labelSeparator : String
参阅 Ext.Component. labelSeparator
FormPanel
labelStyle : String
一个CSS样式描述字符串，它将直接应用到当前field的label上...

一个CSS样式描述字符串，它将直接应用到当前field的label上。 如果有设置，默认为容器的labelStyle值(例如 Ext.layout.FormLayout.labelStyle , 或者 '')。

注意:参见 clearCls 的注释。

另请参见 hideLabel 和 Ext.layout.FormLayout. fieldTpl。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Name',
        labelStyle: 'font-weight:bold;'
    }]
});
Component
labelWidth : Number
标签宽度.此参数继承到子容器， 并且可以被任何子容器覆盖...
标签宽度.此参数继承到子容器， 并且可以被任何子容器覆盖 (例如：fieldset可以为它的输入栏指定一个不同的labelWidth)(默认为100).
FormPanel
layout : String
默认为 'form'.通常该配置项不应被改变. 更多细节请看 Ext.layou...
默认为 'form'. 通常该配置项不应被改变. 更多细节请看 Ext.layout.FormLayout 和 Ext.Container.layout.
FormPanel
layoutConfig : Object
这是一个配置对象，包含为 layout 指定的参数， 如果 layout 是作为一个 string 来指定的。

Container
listeners : Object
一个包含一个或多个事件处理器的配置对象，会在初始化的时候被添加到目标对象上...

一个包含一个或多个事件处理器的配置对象，会在初始化的时候被添加到目标对象上。 该配置对象应该是一个有效的监听器配置对象就像 addListener例子中指定的一样可一次附加多个处理器。

ExtJs Components上的DOM事件

一些 ExtJs Component 类导出时会选择一些DOM事件(例如 "click", "mouseover" 等等), 这通常只是在有额外的值可以被添加时发生。例如DataView类的 click事件会传递被点击的节点。也可以直接在Component的HTMLElementevent上访问DOM事件，但必需在Component被渲染后监听器才能添加到Element 上。可以按照以下步骤添加插件:

// 插件会用一个监听器配置对象进行配置。
//该组件会被添加到所有处理方法的参数列表上。
Ext.DomObserver = Ext.extend(Object, {
    constructor: function(config) {
        this.listeners = config.listeners ? config.listeners : config;
    },

    // 组件将自己传递进了插件的初始化方法里
    init: function(c) {
        var p, l = this.listeners;
        for (p in l) {
            if (Ext.isFunction(l[p])) {
                l[p] = this.createHandler(l[p], c);
            } else {
                l[p].fn = this.createHandler(l[p].fn, c);
            }
        }

        // 渲染后立即添加监听器到元素上
        c.render = c.render.createSequence(function() {
            var e = c.getEl();
            if (e) {
                e.on(l);
            }
        });
    },

    createHandler: function(fn, c) {
        return function(e) {
            fn.call(this, e, c);
        };
    }
});

var combo = new Ext.form.ComboBox({

    // 元素被点击后折叠
    plugins: [ new Ext.DomObserver({
        click: function(evt, comp) {
            comp.collapse();
        }
    })],
    store: myStore,
    typeAhead: true,
    mode: 'local',
    triggerAction: 'all'
});

Observable
margins : Object
注:此配置只用于该组件展现在一个使用BorderLayout...

注:此配置只用于该组件展现在一个使用BorderLayout 或 BoxLayout的两个子类之一作为布局的容器。

这个margins对象在该组件中的格式为：

{top: (top margin),right: (right margin),bottom: (bottom margin),left: (left margin)}

也可以是一个字符串，中间用空格分隔，margin值为数字。 把matches中每一个值的次序跟CSS中margin值的排列方式相对应：

  • 如果只有一个值，它适用于所有方面。
  • 如果有两个值，top和bottom的边框设置为第一个值，left和right设置为第二个值。
  • 如果有三个值，top设置为第一个值，left和right设置为第二个值，bottom设置为第三个值。
  • 如果有四个值，分别设置为top, right, bottom, left。

默认值:

{top:0, right:0, bottom:0, left:0}
BoxComponent
maskDisabled : Boolean
true 将会在panel被disabled时进行遮罩,false将不会遮罩它(默认为...
true 将会在panel被disabled时进行遮罩, false 将不会遮罩它(默认为 true )。使用任意一种方法，当被禁用时，panel都将告诉它包含的元素禁用它们自己， 但是遮罩panel可以提供一种额外的视觉效果，用以提示panel被禁用。
Panel
minButtonWidth : Number
所有按钮的最小宽度(缺省为75)像素。
FormPanel
monitorPoll : Number
检测校验状态的间隔毫秒数， 如果monitorValid项不为true，忽略此项(默认值为 200)
FormPanel
monitorResize : Boolean
设置为true自动监测window的resize事件，以便处理所有对当前窗口尺寸 敏感的事情。...
设置为true自动监测window的resize事件，以便处理所有对当前窗口尺寸 敏感的事情。 典型地，通过选择一个 layout 来管理这个值，并且不应该手动设置它。
Container
monitorValid : Boolean
如果为true, form监控自己的客户端校验状态，并通过传递该状态持续触发客户端校验检测事件...
如果为 true, form监控自己的 客户端 校验状态，并通过传递该状态持续触发 客户端校验检测事件。

当检测校验状态时,该FormPanel根据form是有效 或者无效来启用/禁用所有配置了 formBind: true 的 buttons 该配置项默认为false

FormPanel
overCls : String
一个可选的额外的CSS类，它将在鼠标移过元素时被添加到组件上...
一个可选的额外的CSS类，它将在鼠标移过元素时被添加到组件上，鼠标移出时 删除。(默认为'')。此属性对于在组件上，或者它的任何使用标准CSS规则的孩子节点上， 添加定制的'active' 或者 'hover'样式非常有用。
Component
padding : Number/String
设置body元素padding样式的快捷方式。 此值既可以是一个数值，被应用到所有侧边...
设置body元素padding样式的快捷方式。 此值既可以是一个数值，被应用到所有侧边，也可以是一个普通的描述padding的 CSS字符串。默认为undefined.
Panel
pageX : Number
如果该组件被包含在一个指定位置的容器中，这个值表示页面级的x坐标值（译者注：在有滚动条的情况下这个值很有用）。
BoxComponent
pageY : Number
如果该组件被包含在一个指定位置的容器中，这个值表示页面级的y坐标值（译者注：在有滚动条的情况下这个值很有用）。
BoxComponent
plugins : Object/Array
一个对象或者一个对象数组，为组件提供特殊的功能 ...
一个对象或者一个对象数组，为组件提供特殊的功能。 对一个合法的插件唯一的要求是它含有一个init()方法， 能接收一个Ext.Component型的参数。 当组件被创建时，如果有可用的插件，组件将会调用每个插件的init方法， 并将自身的引用作为方法参数传递给它。然后，每个插件就可以调用方法或者响应组件上的事件， 就像需要的那样提供自己的功能。
Component
preventBodyReset : Boolean
默认为 false 。当设置为 true 时， 一个额外的CSS类 'x-panel-normal' 将会被田间到panel的元素， 有效地将W3C(参见 http://www.w3.org/TR/CSS21/sample.html)...
默认为 false 。当设置为 true 时， 一个额外的CSS类 'x-panel-normal' 将会被田间到panel的元素， 有效地将W3C(参见 http://www.w3.org/TR/CSS21/sample.html) 建议的CSS样式应用到Panel的body元素上 (不是header, footer等等)。
Panel
ptype : String
需要创建配置的ptype。 当传递一个配置对象给构造函数时...
需要创建配置的ptype。 当传递一个配置对象给构造函数时，此配置选项不会被使用。 只有在使用懒初始化的时候此配置项才会被使用， 此时Plugin不是 通过一个完整的实例组件，而是通过一个Component配置指定的。 在渲染时，将会查找ptype以决定创建何种类型的Plugin。

如果你创建自己的Plugin，你可以通过 Ext.ComponentMgr.registerPlugin 对它们进行注册，以便能利用懒初始化和渲染机制。
Component
ref : String
一个路径描述，与组件的 ownerCt 相关，它描述了把当前组件的命名引用放置到哪个父容器中去。...

一个路径描述，与组件的 ownerCt 相关，它描述了把当前组件的命名引用放置到哪个父容器中去。

祖先的坐标路径可以通过'/'字符进行分隔。 例如，将一个Toolbar Button的引用放入 拥有此Toolbar的Panel中:

var myGrid = new Ext.grid.EditorGridPanel({
    title: 'My EditorGridPanel',
    store: myStore,
    colModel: myColModel,
    tbar: [{
        text: 'Save',
        handler: saveChanges,
        disabled: true,
        ref: '../saveButton'
    }],
    listeners: {
        afteredit: function() {
//          The button reference is in the GridPanel
            myGrid.saveButton.enable();
        }
    }
});

在上面的代码中，如果 ref 是 'saveButton' ，那么引用将会被放置到Toolbar中。 ref 中的每个'/' 都会从组件的 ownerCt 向上移动一级。

另请参见 added 和 removed 事件。

Component
region : String
注: 此配置只用于该组件展现在一个布局为BorderLayout的容器中...

注: 此配置只用于该组件展现在一个布局为BorderLayout的容器中(例如指定layout:'border')。

详见Ext.layout.BorderLayout。

BoxComponent
renderTo : Mixed
该值可以是一个节点的id、一个DOM节点或者一个已存在的元素...

该值可以是一个节点的id、一个DOM节点或者一个已存在的元素， 组件将会被渲染到其中。

  • 注意 :
      如果组件不是一个Container 的子项目时， 不要使用此选项。 渲染和管理它的子项目是一个Container 的layout manager的责任。
      当使用此配置项时，无需调用render()方法。

另请参见 render 。

Component
resizeEvent : String
在布局中进行尺寸调整需要监听的事件。 默认为 'resize' 。
Panel
shadow : Boolean/String
(或者一个有效的Ext.Shadow Ext.Shadow.mode 值)，用来在panel后面显示一个阴影...
true (或者一个有效的Ext.Shadow Ext.Shadow.mode 值)，用来在panel后面显示一个阴影， false 将不会显示阴影(默认为 'sides' )。注意，此选项只有当 floating = true 时才应用。
Panel
shadowOffset : Number
如果显示了阴影，此参数为数值偏移量(默认为 4 )。注意，只有当 floating = true 时此参数才会被应用。...
如果显示了阴影，此参数为数值偏移量(默认为 4 )。注意，只有当 floating = true 时此参数才会被应用。
Panel
shim : Boolean
false将会在需要的浏览器中禁用iframe衬垫(默认为...
false 将会在需要的浏览器中禁用iframe衬垫(默认为 true )。注意，此选项只有在 floating = true 时应用。
Panel
stateEvents : Array
一个事件数组，当它们被触发时，组件需要保存自己的状态(默认值为 none)...

一个事件数组，当它们被触发时，组件需要保存自己的状态(默认值为 none)。 它们可以是任何该组件支持的事件类型，包括浏览器事件和 自定义事件(例如['click', 'customerchange'])。

对于保存和恢复组件状态的详细解释，参见 stateful

Component
stateId : String
为该组件指定的唯一的id值，它被用作管理组件状态的目的...
为该组件指定的唯一的id值，它被用作管理组件状态的目的。 (如果设定了id，默认值为组件自己的id，否则，如果组件使用自动生成的id，此值为null)。

对于保存和反解析组件状态的解释，参见 stateful 。

Component
stateful : Boolean
一个标志参数，它将引起组件在启动时尝试从一个保存的状态中恢复内部状态参数...

一个标志参数，它将引起组件在启动时尝试从一个保存的状态中恢复内部状态参数。 组件必须要么拥有一个 stateId 或者 id ，它们被分配给需要被管理的状态属性。 在跨页面加载时，不保证自动生成的id属性的稳定性， 并且，不能依赖此id来保存和恢复一个组件的相同状态。

为了保存状态的操作能够工作，状态管理器的提供者必须 被设置成一个Ext.state.Provider 的实现类，它覆盖了set 和get 方法，以便保存和恢复name/value对。 有一个内置的Ext.state.CookieProvider 可用。

为当前页面设置状态提供者:

Ext.state.Manager.setProvider(new Ext.state.CookieProvider({
    expires: new Date(new Date().getTime()+(1000*60*60*24*7)), //7 days from now
}));

当 stateEvents 配置项中其中之一的事件被触发时， 一个状态可保存的组件将试图保存其状态。

保存状态时，一个可保存状态的组件首先需要通过调用 getState 方法来序列化它的状态。 默认情况下，此函数什么事都不做。 开发者必须提供一个实现，返回一个hash对象，它描述了组件可恢复的状态。

getState方法产生的值将会传递给 Ext.state.Manager.set 方法，它使用配置的 Ext.state.Provider 来保存对象，以组件的 stateId 为key，或者，如果此值（指stateId）没有指定时， 使用它的 id 作为key。

在进行构造时，一个可保存状态的组件试图通过调用 Ext.state.Manager.get方法来 恢复它的状态，传递 stateId 或者，如果此值（指stateId）没有指定时， 使用它的 id 作为参数。

结果对象被传递给 applyState 。 applyState 的默认实现只是简单地把属性拷贝到对象中， 但是开发者可以覆盖此方法以支持更多行为。

通过向 beforestaterestore, staterestore, beforestatesave 和 statesave 事件上绑定监听器，你可以在保存和恢复状态时进行额外的处理。

Component
style : String
被添加到组件元素的特定样式。 必须是按照...
被添加到组件元素的特定样式。 必须是按照 Ext.Element.applyStyles 类指定格式的合法参数值。

new Ext.Panel({
    title: 'Some Title',
    renderTo: Ext.getBody(),
    width: 400, height: 300,
    layout: 'form',
    items: [{
        xtype: 'textarea',
        style: {
            width: '95%',
            marginBottom: '10px'
        }
    },
        new Ext.Button({
            text: 'Send',
            minWidth: '100',
            style: {
                marginBottom: '10px'
            }
        })
    ]
});
Component
tabTip : String
注: 这个配置只用于当该组件作为TabPanel的一个子项目时使用...

注: 这个配置只用于当该组件作为TabPanel的一个子项目时使用。

一个String类型的innerHTML(支持html标签)，当鼠标放在该选项上的时，显示一个tooltip。为了tips能够被渲染，Ext.QuickTips.init()必须被提前调用。
BoxComponent
tbar : Object/Array
panel的顶部工具栏。 此参数可以是一个 The top toolbar of the panel. This can be a Ext.Toolbar 对象、一个工具栏配置、或者一个被添加到工具栏的...

panel的顶部工具栏。 此参数可以是一个 The top toolbar of the panel. This can be a Ext.Toolbar 对象、一个工具栏配置、或者一个被添加到工具栏的buttons/button配置数组。 注意，在渲染之后此参数无效。如需在渲染之后访问顶部工具栏，请使用 getTopToolbar。

注意:尽管Toolbar可以包含Field组件，但它们不会 通过加载祖先FormPanel而被更新。Panel的工具栏不是标准Container->Component 层次的一部分，所以它们不会被扫面以收集表单项。但是，这些值还是会 被提交，因为提交表单的参数是从DOM树中收集的。

Panel
tbarCfg : Object
一个DomHelper 元素的配置对象，描述了当前Panel的tbar元素结构。 另请参见...

一个DomHelper 元素的配置对象，描述了当前Panel的tbar元素结构。 另请参见 bodyCfg 。

Panel
title : String
被用作innerHTML的标题文本(接受html标签) ，用来显示在panel的...
被用作innerHTML的标题文本(接受html标签) ，用来显示在panel的 header 中(默认为'')。 当 title 被指定时， header 元素将会被自动创建并显示，除非 header 被显式地设置为 false 。 如果你不在配置时指定一个 title ， 但是你想以后设置，你必须要么 指定一个非空的 title (一个空格' ' 也可以)或者指定 header:true ，这样容器元素将会被创建。
Panel
titleCollapse : Boolean
将会允许通过在顶部工具条的任意地方点击展开和折叠panel(当...
true 将会允许通过在顶部工具条的任意地方点击展开和折叠panel(当 collapsible = true )， false ) 将会只允许通过点击工具按钮进行操作(默认为 false ))。如果当前panel是border布局中的一个子项目，另请参见 BorderLayout.Region floatable 配置项。
Panel
toolTemplate : Ext.Template/Ext.XTemplate
用来在header 元素中创建tools 的模板。默认为:...

用来在header 元素中创建tools 的模板。默认为:

                                    new Ext.Template('<div class="x-tool x-tool-{id}">&#160;</div>')

可以覆盖此参数，以便为基于更复杂XTemplate的tools提供自定义的DOM结构。 模板的数据为一个简单的tool配置对象(不是整个Array)， 它在 tools配置项指定。 在以下例子中，当鼠标滑过tool时，一个<a>标签被用来提供视觉效果:

var win = new Ext.Window({
    tools: [{
        id: 'download',
        href: '/MyPdfDoc.pdf'
    }],
    toolTemplate: new Ext.XTemplate(
        '<tpl if="id==\'download\'">',
            '<a class="x-tool x-tool-pdf" href="{href}"></a>',
        '</tpl>',
        '<tpl if="id!=\'download\'">',
            '<div class="x-tool x-tool-{id}">&#160;</div>',
        '</tpl>'
    ),
    width:500,
    height:300,
    closeAction:'hide'
});

注意，CSS类'x-tool-pdf'必须拥有一个关联的样式规则，它提供了一个适当的背景图片， 例如:

                                a.x-tool-pdf {background-image: url(../shared/extjs/images/pdf.gif)!important;}
Panel
tools : Array
一个工具按钮配置数组，用来添加到头部工具区域。 当渲染之后，每个工具都被存储为一个Element ，被一个叫做...
一个工具按钮配置数组，用来添加到头部工具区域。 当渲染之后，每个工具都被存储为一个Element ，被一个叫做 tools. <tool-type> 的公共参数引用。

每个工具配置都可以包含如下参数:

  • id : String
    必须。需要创建的工具类型。默认情况下，这被指定为一个 CSS类，格式为 x-tool- <tool-type> ，用来形成工具Element。 对于以下列出的工具类型，Ext提供了CSS规则，和一个包含图片的icon对象。 通过提供可选的CSS规则和背景图片，开发者可以实现自定义的工具:
      toggle (当collapsible 为 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
    • tc : Object
      工具配置对象
  • stopEvent : Boolean
    默认为true。指定为false可以允许点击事件进行冒泡。
  • scope : Object
    调用处理函数的作用域。
  • qtip : String/Object
    一个tip字符串，或者一个提供给 Ext.QuickTip.register 的配置参数
  • hidden : Boolean
    True将会在初始化时渲染成隐藏的。
  • on : Object
    一个监听器配置对象，以addListener所需的参数格式 指定事件监听器

注意，当panel被折叠时提供部分固定的工具，这些工具仅仅提供可视按钮。 所有必备的功能，都必须通过添加实现了必备行为的处理函数来实现。

示例用法:

tools:[{
    id:'refresh',
    qtip: 'Refresh form Data',
    // hidden:true,
    handler: function(event, toolEl, panel){
        // refresh logic
    }
},
{
    id:'help',
    qtip: 'Get Help',
    handler: function(event, toolEl, panel){
        // whatever
    }
}]

对于自定义 'help' 的id，定义了两个相应的css类，拥有一个到15x15图片的链接:

                                .x-tool-help {background-image: url(images/help.png);}
.x-tool-help-over {background-image: url(images/help_over.png);}
// if using an image sprite:
.x-tool-help {background-image: url(images/help.png) no-repeat 0 0;}
.x-tool-help-over {background-position:-15px 0;}
Panel
tpl : Mixed
一个 Ext.Template , Ext.XTemplate 或者一个用来形成一个Ext.XTemplate的字符串数组...
一个 Ext.Template , Ext.XTemplate 或者一个用来形成一个Ext.XTemplate的字符串数组。 与 data 和 tplWriteMode 配置项协同使用。
Component
tplWriteMode : String
刷新组件的内容区域时使用的Ext.(X)Template方式。 默认为'overwrite' (参见 Ext.XTemplate.overwrite )。
刷新组件的内容区域时使用的Ext.(X)Template方式。 默认为'overwrite' (参见 Ext.XTemplate.overwrite )。
Component
unstyled : Boolean
覆盖 baseCls 设置为 baseCls = 'x-plain' ， 除了必须的属性之外，它将panel渲染成无样式的...
覆盖 baseCls 设置为 baseCls = 'x-plain' ， 除了必须的属性之外，它将panel渲染成无样式的，以便Ext布局功能能起作用 (例如overflow:hidden)。
Panel
width : Number
组件的宽度(默认值为 auto)。注:如果想使用百分比的方式...
组件的宽度(默认值为 auto)。注:如果想使用百分比的方式来设置值，请查看 Ext.Component.anchor。
BoxComponent
x : Number
如果被包含在一个指定位置的容器中，这个值表示x(left)坐标值。
BoxComponent
xtype : String
需要创建配置的xtype。 当传递一个配置对象给构造函数时...
需要创建配置的xtype。 当传递一个配置对象给构造函数时，此配置选项不会被使用。 只有在使用懒初始化的时候此配置项才会被使用，此时容器的子项目不是 通过一个完整的实例组件，而是通过一个Component配置指定的。 在渲染时，将会查找xtype以决定创建何种类型的子组件。

预定义的xtype列表如下： here。

如果你继承Component创建你自己的组件，你需要使用Ext.ComponentMgr.registerType 对它们进行注册，以便利用懒初始化和渲染机制。
Component
y : Number
如果被包含在一个指定位置的容器中，这个值表示y(top)坐标值。
BoxComponent

公共属性

Property Defined By
body : Ext.Element
Panel的body Element ，可以用来包含HTML内容。 内容可以在...
Panel的body Element ，可以用来包含HTML内容。 内容可以在html 配置项中指定，或者可以使用autoLoad 配置项被加载，或者通过Panel的Updater提供。 只读。

如果这被用来通过任意方式加载可视的HTML元素，那么Panel不可以被用作 一个Layout，用来容纳其它Panel。

如果当前Panel期望被用作一个Layout的宿主 (参见 layout) 那么body元素必须不能被加载或者改变---因为它处于Panel的Layout的控制 之下。

注意: 另请参见 el .

Panel
buttons : Array
Panel的按钮数组，它们从 buttons 配置属性创建。只读。
Panel
bwrap : Ext.Element
Panel的bwrapElement ，用来包含其它Panel元素(tbar, body, bbar, footer)。 参见 bodyCfg。 只读。
Panel
collapsed : Boolean
如果当前panel被折叠为true。只读。
Panel
dd : Ext.dd.DragSource.
如果当前Panel被配置为 draggable ，此参数将会包含一个 Ext.dd.DragSource 实例，它负责处理拖拽Panel...

如果当前Panel被配置为 draggable ，此参数将会包含一个 Ext.dd.DragSource 实例，它负责处理拖拽Panel。

开发者必须提供Ext.dd.DragSource的 抽象方法的实现，用来提供drag/drop过程中的每一步行为。 参见 draggable.
Panel
disabled : Boolean
当前组件处于无效状态时为true。 Read-only.
Component
el : Ext.Element
封装了当前组件的Ext.Element。 Read-only。通常情况下，这将是一个<DIV>元素，它由此类的...

封装了当前组件的Ext.Element。 Read-only。

通常情况下，这将是一个<DIV>元素，它由此类的 onRender方法创建，但是它可以通过使用 autoEl 配置项进行覆盖。

注意: 直到组件渲染完成此元素都将处于无效状态。

如需向当前组件的 DOM事件(而不是当前组件自己的Observable事件)添加监听器， 更多建议，参见 listeners 配置项，或者直接使用一个render监听器:

new Ext.Panel({
    title: 'The Clickable Panel',
    listeners: {
        render: function(p) {
            // Append the Panel to the click handler's argument list.
            p.getEl().on('click', handlePanelClick.createDelegate(null, [p], true));
        },
        single: true  // Remove the listener after first invocation
    }
});

另请参见 getEl

Component
footer : Ext.Element
Panel底部Element 。只读。此元素被用来容纳Panel的...
Panel底部Element 。只读。

此元素被用来容纳Panel的 buttons 或者 fbar 。

注意: 另请参见 el 的注释。

Panel
header : Ext.Element
Panel的headerElement. 只读。此元素被用来容纳 title和 tools...
Panel的headerElement. 只读。

此元素被用来容纳 title和 tools

注意: 另请参见 el 的注释。

Panel
hidden : Boolean
如果当前组件处于隐藏状态，此值为true。Read-only。
Component
initialConfig : Object
当前组件的初始化配置描述。 Read-only。
Component
items : MixedCollection
当前容器中的子组件集合 Ext.util.MixedCollection
Container
ownerCt : Ext.Container
组件所属的Container (默认为undefined，当前组件被添加到一个容器中时此值被自动设置)...
组件所属的Container (默认为undefined，当前组件被添加到一个容器中时此值被自动设置)。 Read-only。

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

Component
private : Object
我们只能在一块可见的区域进行布局。 布局目标*或者它的任何父元素* 为...
我们只能在一块可见的区域进行布局。 布局目标*或者它的任何父元素* 为display:none， 将意味着它没有一块可见的区域。
Container
refOwner : Ext.Container
如果当前组件是一个容器的孩子，并且是通过一个 ref 配置项被注册的，则此值为 ref 引用被插入到的祖先容器。
如果当前组件是一个容器的孩子，并且是通过一个 ref 配置项被注册的，则此值为 ref 引用被插入到的祖先容器。
Component
rendered : Boolean
如果当前组件已经被渲染了，此值为true。Read-only.
Component

公共方法

Method Defined By
FormPanel ( Object config )
参数:
  • config : Object
    Configuration options
返回值:
  • void
FormPanel
add ( ...Object/Array component ) : Ext.Component/Array
向当前容器中添加 Component(s)。 描述 :在添加之前触发 beforeadd 事件...

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

描述 :

  • 在添加之前触发 beforeadd 事件
  • 将会相应地应用 容器的default config values (细节参见 defaults )。
  • 在组件添加之后触发 add 事件。

注意 :

  • 当调用 add 时如果容器已经被渲染， 你可能需要调用 doLayout 方法来刷新视图，它将导致所有尚未渲染的子组件进行渲染操作。 此操作是必须的，这样你可以 add 多个子组件而只刷新一次layout。 示例用法:

var tb = new Ext.Toolbar();
tb.render(document.body);  // toolbar is rendered
tb.add({text:'Button 1'}); // add multiple items (defaultType for Toolbar is 'button')
tb.add({text:'Button 2'});
tb.doLayout();             // refresh the layout
  • 警告: 使用BorderLayout布局的容器可能不能删除或者添加组件。 更多细节参见BorderLayout 的注释。
参数:
  • component : ...Object/Array

    需要添加的一个或多个组件，或者是一个组件数组。 更多信息参见 items 。

返回值:
  • Ext.Component/Array
    被添加的组件。
Container
addButton ( String/Object config , Function handler , Object scope ) : Ext.Button
向当前panel中添加一个按钮。注意，此方法必须在渲染之前调用。 首选的方式是通过...
向当前panel中添加一个按钮。注意，此方法必须在渲染之前调用。 首选的方式是通过buttons 配置项添加按钮。
参数:
  • config : String/Object
    一个合法的Ext.Button 配置。字符串将会变成默认按钮配置文本，对象将会被看做一个按钮配置对象。
  • handler : Function
    在按钮Ext.Button.click 时被调用的函数
  • scope : Object
    作用域( this 引用)，按钮处理函数将会在其中被执行。默认为Button.
返回值:
  • Ext.Button
    被添加的按钮
Panel
addClass ( string cls ) : Ext.Component
为组件底层的元素添加CSS样式。
为组件底层的元素添加CSS样式。
参数:
  • cls : string
    需要添加的CSS样式的class名称
返回值:
  • Ext.Component
    this
Component
addEvents( Object|String o, string Optional. ) : void
添加指定的事件到事件列表上，事件会被该Observable触发。
添加指定的事件到事件列表上，事件会被该Observable触发。
参数:
  • o : Object|String
    以事件名作为属性true作为值的对象 或者当多个事件名被分开的传递时则为第一个事件名。
  • Optional. : string
    事件名被分开的传递时则为事件名。 用法:
    this.addEvents('storeloaded', 'storecleared');
返回值:
  • void
Observable
addListener( String eventName, Function handler, [Object scope], [Object options] ) : void
给对象添加事件处理器。
给对象添加事件处理器。
参数:
  • eventName : String
    监听的事件名。
  • handler : Function
    事件调用的方法
  • scope : Object
    （可选）处理方法执行的作用域 (this的引用 reference)。 如果被忽略。默认为触发事件的对象。
  • options : Object
    （可选）包含处理器配置和属性的对象。 可能包含以下的属性:
    • scope : Object
      处理方法执行的作用域(this的引用) 。 如果被忽略。默认为触发事件的对象。
    • delay : Number
      在触发事件后延迟调用处理器的毫秒数。
    • single : Boolean
      如果为True则添加一个处理器来处理下一次的事件触发（仅一次），然后移除自己。
    • buffer : Number
      使得处理器延迟指定毫秒数后预定的运行在 一个Ext.util.DelayedTask中 。 如果事件在时间内再一次被触发，原始的处理器不会被调用，但是新的处理器会预定的在他的位置上。
    • target : Observable
      如果事件在目标的Observable上触发则仅仅调用处理器， 否则 事件会从子类的Observable上冒泡

    组合选项
    使用这些选项参数,可能会组合出不同类型的监听器：

    一个延迟的，一次性的监听器。

    myDataView.on('click', this.onClick, this, {
single: true,
delay: 100
});

    一次调用附加多个处理器
    该方法同样支持传递一个包含指定的多个处理器的属性的配置对象参数。

    myGridPanel.on({
'click' : {
    fn: this.onClick,
    scope: this,
    delay: 100
},
'mouseover' : {
    fn: this.onMouseOver,
    scope: this
},
'mouseout' : {
    fn: this.onMouseOut,
    scope: this
}
});

    或者一个简写的语法：

    myGridPanel.on({
'click' : this.onClick,
'mouseover' : this.onMouseOver,
'mouseout' : this.onMouseOut,
 scope: this
});
返回值:
  • void
Observable
applyToMarkup ( String/HTMLElement el ) : void
将此组件添加到已存在的有效的HTML标签中。 使用该方法时，无需再调用render()方法。
将此组件添加到已存在的有效的HTML标签中。 使用该方法时，无需再调用render()方法。
参数:
  • el : String/HTMLElement
返回值:
  • void
Component
bubble ( Function fn , [ Object scope ], [ Array args ] ) : Ext.Container
沿着component/container继承结构进行冒泡， 在每个组件上调用指定的函数。 所调用函数的作用域...
沿着component/container继承结构进行冒泡， 在每个组件上调用指定的函数。 所调用函数的作用域( this)将会是 指定的作用域或者是当前组件。 如果在函数任何一点上返回false，即停止冒泡过程
参数:
  • fn : Function
    需要调用的函数
  • scope : Object
    (可选) 函数的作用域(默认为当前节点)
  • args : Array
    (可选) 调用函数时需要传递的参数( 默认传递当前组件)
返回值:
  • Ext.Container
    this
Container
cascade ( Function fn , [ Object scope ], [ Array args ] ) : Ext.Container
从当前组件(第一个被调用的组件)开始，沿着component/container的继承树向下回溯...
从当前组件(第一个被调用的组件)开始，沿着component/container的继承树向下回溯， 在每个组件上调用指定的方法， 调用方法时的(this)作用域为指定的scope或者为当前组件。 传递给方法的参数为传递进来args或者当前组件。 在起泡的任意一个节点上，如果function返回false，即停止在那个分支上。
参数:
  • fn : Function
    需要调用的函数
  • scope : Object
    (可选)函数的作用域(默认为当前组件)
  • args : Array
    (可选) 调用函数时传递的参数 (默认传递当前组件)
返回值:
  • Ext.Container
    this
Container
cloneConfig ( Object overrides ) : Ext.Component
默认使用原先传递给当前实例的配置值克隆当前组件。
默认使用原先传递给当前实例的配置值克隆当前组件。
参数:
  • overrides : Object
    一个新的配置项，包含需要覆盖到克隆版本的所有属性。 可以传递一个id参数给此对象，否则将自动生成一个新的id以避免发生重复。
返回值:
  • Ext.Component
    当前组件的克隆副本
Component
collapse ( Boolean animate ) : Ext.Panel
折叠panel的body，这样它就变成隐藏的。 触发beforecollapse 事件...
折叠panel的body，这样它就变成隐藏的。 触发beforecollapse 事件，处理函数返回false可以取消折叠操作。
参数:
  • animate : Boolean
    True将会在变换时使用动画效果，其它为false( 默认为panel的animCollapse 配置项的值)
返回值:
  • Ext.Panel
    this
Panel
destroy () : void
通过如下方法销毁对象：删除所有的事件监听器、将组件的元素从DOM树中删除...
通过如下方法销毁对象：删除所有的事件监听器、将组件的元素从DOM树中删除（如果可以）、 将组件从它的 Ext.Container（如果可用）中删除、 并且将它从Ext.ComponentMgr中 注销。 销毁操作一般由框架自动完成，一般情况下不需要直接调用该方法。
参数:
  • 无。
返回值:
  • void
Component
disable () : Ext.Component
将组件置为无效状态，并出发'disable'事件。
将组件置为无效状态，并出发'disable'事件。
参数:
  • 无。
返回值:
  • Ext.Component
    this
Component
doLayout ( [ Boolean shallow ], [ Boolean force ] ) : Ext.Container
强制容器的布局进行重新计算。 在向一个已经渲染的容器中添加...
强制容器的布局进行重新计算。 在向一个已经渲染的容器中添加一个新的组件， 或者改变子组件的尺寸/位置参数之后，必须调用此函数。
参数:
  • shallow : Boolean
    (可选) 设置为true时将仅仅计算当前组件的布局， 并且让子组件在需要时自动计算布局 (默认为flase，它将递归地调用每个子容器的doLayout方法)
  • force : Boolean
    (可选) 设置为true将强制进行布局，即使项目是隐藏的也进行。
返回值:
  • Ext.Container
    this
Container
enable () : Ext.Component
将组件置为有效状态并触发'enable'事件。
将组件置为有效状态并触发'enable'事件。
参数:
  • 无。
返回值:
  • Ext.Component
    this
Component
enableBubble( String/Array events ) :void
是否现在使得事件会被该Observable触发并调用 this.getBubbleTarget()方法在拥有者的继承树...

是否现在使得事件会被该Observable触发并调用 this.getBubbleTarget()方法在拥有者的继承树中冒泡。Observable的基础类中没有该方法的实现。

该方法一般被Ext.Components用来冒泡事件到拥有者的容器。参看Ext.Component.getBubbleTarget默认的实现 在Ext.Component中返回组件的直接拥有者。但是如果需要的是一个已知的目标，该方法可以被重写来更快的访问需求的目标。

例子:

Ext.override(Ext.form.Field, {
    // 添加方法到Field的initComponent上改变事件为冒泡
    initComponent : Ext.form.Field.prototype.initComponent.createSequence(function() {
        this.enableBubble('change');
    }),

    // 我们知道我们想让Field的事件冒泡到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() {
            // 如果样式被修改标题会变红。
            myForm.header.setStyle('color', 'red');
        }
    }
});
参数:
  • events : String/Array
    冒泡的事件名，或事件名数组
返回值:
  • void
Observable
expand ( Boolean animate ) : Ext.Panel
展开panel的body以便让其变得可见。 触发beforeexpand 事件...
展开panel的body以便让其变得可见。 触发beforeexpand 事件，如果它返回false将会取消展开操作。
参数:
  • animate : Boolean
    True将会在变换过程中使用动画效果，否则为false (默认为panel的 animCollapse 配置项的值)
返回值:
  • Ext.Panel
    this
Panel
find ( String prop , String value ) : Array
根据属性查找当前容器中任何层次上的组件
根据属性查找当前容器中任何层次上的组件
参数:
  • prop : String
  • value : String
返回值:
  • Array
    Ext.Component数组
Container
findBy ( Function fn , [ Object scope ] ) : Array
根据一个自定义的函数，查找当前容器中任意层级上的一个组件。 如果传递的函数返回true...
根据一个自定义的函数，查找当前容器中任意层级上的一个组件。 如果传递的函数返回true，组件将会被包含在结果中。 函数将会被用如下参数(component, this container)进行调用。
参数:
  • fn : Function
    需要调用的函数
  • scope : Object
    可选
返回值:
  • Array
    Ext.Component数组
Container
findById ( String id ) : Ext.Component
通过id查找容器中位于任何层级上的组件
通过id查找容器中位于任何层级上的组件
参数:
  • id : String
返回值:
  • Ext.Component
Container
findByType ( String/Class xtype , [ Boolean shallow ] ) : Array
根据xtype或者类型，查找当前容器中任何层级上的组件
根据xtype或者类型，查找当前容器中任何层级上的组件
参数:
  • xtype : String/Class
    组件的xtype字符串，或者直接是组件的class类型
  • shallow : Boolean
    (可选) 此参数为flase时将检查当前组件是否是指定xtype的后裔 (这是默认情况)，或者设置为true， 将检查当前组件是否直接是指定xtype类型（译者注：即指不按照多态性进行检查）。
返回值:
  • Array
    Ext.Component数组
Container
findParentBy ( Function fn ) : Ext.Container
通过自定义的函数查找当前组件上层任何层次上的容器...
通过自定义的函数查找当前组件上层任何层次上的容器。 如果传递的函数返回true，容器对象将被返回。
参数:
  • fn : Function
    自定义的函数，使用如下参数调用(container,this component)。
返回值:
  • Ext.Container
    自定义函数返回true的第一个容器
Component
findParentByType ( String/Class xtype ) : Ext.Container
通过xtype或者class查找当前组件上层任何层次上的容器
通过xtype或者class查找当前组件上层任何层次上的容器
参数:
  • xtype : String/Class
    组件的xtype字符串，或者直接是组件的class
返回值:
  • Ext.Container
    符合指定xtype或者class的第一个容器
Component
fireEvent( String eventName, Object... args ) : Boolean
用传入的参数触发指定的事件 (减去事件名)。 一个事件可以被设置为冒泡 Obse...

用传入的参数触发指定的事件 (减去事件名)。

一个事件可以被设置为冒泡到Observable父类继承树(参看 Ext.Component.getBubbleTarget) 调用enableBubble实现。

参数:
  • eventName : String
    触发的事件名。
  • args : Object...
    传递给处理器的可变长度参数。
返回值:
  • Boolean
    如果有任何的处理器返回false则返回false，否则返回true。
Observable
focus ( [ Boolean selectText ], [ Boolean/Number delay ] ) : Ext.Component
尝试将当前组件设为焦点。
尝试将当前组件设为焦点。
参数:
  • selectText : Boolean
    (可选) 如果可用，同时选中组件内部的文本
  • delay : Boolean/Number
    (可选)将当前组件设置为焦点的延迟时间(设置为true等于0毫秒)
返回值:
  • Ext.Component
    this
Component
get ( String/Number key ) : Ext.Component
获取当前容器包含的一个组件( items.get(key)方法的别名)
获取当前容器包含的一个组件( items.get(key)方法的别名)
参数:
  • key : String/Number
    组件的索引
返回值:
  • Ext.Component
    Ext.Component
Container
getBottomToolbar () : Ext.Toolbar
返回panel底部区域toolbar ( bbar )。
返回panel底部区域toolbar ( bbar )。
参数:
  • 无。
返回值:
  • Ext.Toolbar
    toolbar
Panel
getBox ( [ Boolean local ] ) : Object
获取组件底层元素当前盒子模型的尺寸。（译者注：盒子模型是CSS术语，详细解释请自行搜索。）
获取组件底层元素当前盒子模型的尺寸。（译者注：盒子模型是CSS术语，详细解释请自行搜索。）
参数:
  • local : Boolean
    (可选)值为true时，组件的left值和top值将代替页面的XY被返回。(默认值为false)
返回值:
  • Object
    返回值的格式{x, y, width, height}
BoxComponent
getBubbleTarget () : Ext.Container
为Observable的fireEvent方法提供链接，它沿着继承结构进行冒泡操作。
为Observable的fireEvent方法提供链接，它沿着继承结构进行冒泡操作。
参数:
  • 无。
返回值:
  • Ext.Container
    拥有当前组件的容器。
Component
getComponent ( String/Number comp ) : Ext.Component
检查当前容器的 items property 并且获取当前容器的一个直接的子组件。
检查当前容器的 items property 并且获取当前容器的一个直接的子组件。
参数:
  • comp : String/Number
    参数可以是以下任何值：
    • 一个 String : 代表子组件的 itemId 或者 id
    • 一个 Number : 代表子组件在 items property 中的位置

    其它信息参见 Ext.util.MixedCollection.get。

返回值:
  • Ext.Component
    组件(如果有找到)。
Container
getEl () : Ext.Element
返回 Ext.Element ，它包装了当前组件。...

返回 Ext.Element ，它包装了当前组件。

通常情况下，这将是一个<DIV>元素，它是由该类的onRender方法创建的， 但是可以使用autoEl配置项 覆盖它。

注意: 此元素将会一直处于无效状态直到当前组件渲染完成。

如需向当前组件的 DOM事件(而不是当前组件自己的Observable事件)添加监听器， 更多建议，参见 listeners 配置项，或者直接使用一个render监听器:

new Ext.Panel({
    title: 'The Clickable Panel',
    listeners: {
        render: function(p) {
            // Append the Panel to the click handler's argument list.
            p.getEl().on('click', handlePanelClick.createDelegate(null, [p], true));
        },
        single: true  // Remove the listener after first invocation
    }
});
参数:
  • 无。
返回值:
  • Ext.Element
    包装当前组件的元素。
Component
getFooterToolbar () : Ext.Toolbar
返回panel底部( fbar )区域的toolbar
返回panel底部( fbar )区域的toolbar
参数:
  • 无。
返回值:
  • Ext.Toolbar
    toolbar
Panel
getForm () : Ext.form.BasicForm
提供到该面板中的Form元素的访问入口... Provides access to the Form which this Panel contains.
提供到该面板中的Form元素的访问入口.
参数:
  • 无。
返回值:
  • Ext.form.BasicForm
    此面板包含的{@link Ext.form.BasicForm Form}.
FormPanel
getFrameHeight () : Number
返回当前panel框架元素的高度像素值 (包括所有top和bottom工具栏以及header和footer元素...
返回当前panel框架元素的高度像素值 (包括所有top和bottom工具栏以及header和footer元素， 但是不包括body高度)。 如需获取body高度，参见 getInnerHeight.
参数:
  • 无。
返回值:
  • Number
    框架高度
Panel
getFrameWidth () : Number
返回当前panel框架元素的宽度像素值 (不包含body宽度)。如需获得body宽度，参见...
返回当前panel框架元素的宽度像素值 (不包含body宽度)。如需获得body宽度，参见 getInnerWidth。
参数:
  • 无。
返回值:
  • Number
    框架宽度
Panel
getHeight () : Number
获取该组件的当前高度值。
获取该组件的当前高度值。
参数:
  • 无。
返回值:
  • Number
BoxComponent
getId () : String
返回当前组件的id，如果没有定义id，则自动生成并返回一个id:'ext-comp-'...
返回当前组件的 id 如果没有定义 id 则自动生成并返回一个 id

'ext-comp-' + (++Ext.Component.AUTO_ID)
参数:
  • 无。
返回值:
  • String
    id
Component
getInnerHeight () : Number
返回body元素的高度像素值(不包括任何框架元素的高度)。 对于框架高度参见...
返回body元素的高度像素值(不包括任何框架元素的高度)。 对于框架高度参见 getFrameHeight。
参数:
  • 无。
返回值:
  • Number
    body高度
Panel
getInnerWidth () : Number
返回body元素宽度像素值(不包含任何框架元素的宽度)。 对于框架宽度，参见 getFrameWidth。
返回body元素宽度像素值(不包含任何框架元素的宽度)。 对于框架宽度，参见 getFrameWidth。
参数:
  • 无。
返回值:
  • Number
    body宽度
Panel
getItemId () : String
返回当前组件的 itemId 。 如果没有通过配置参数指定 itemId 那么，将会使用...
返回当前组件的 itemId 。 如果没有通过配置参数指定 itemId 那么，将会使用 getId 返回 id 。
参数:
  • 无。
返回值:
  • String
Component
getLayout () : ContainerLayout
返回容器当前使用的布局管理器。 如果容器当前没有设置布局管理器， 将会创建一个默认的...
返回容器当前使用的布局管理器。 如果容器当前没有设置布局管理器， 将会创建一个默认的 Ext.layout.ContainerLayout 并被设置为容器的布局管理器。
参数:
  • 无。
返回值:
  • ContainerLayout
    容器的布局管理器
Container
getLayoutTarget () : Ext.Element
返回当前容器中用来包含子组件的元素。提供了一个 可以返回容器的...

返回当前容器中用来包含子组件的元素。

提供了一个 可以返回容器的Element 的实现， 但是，如果容器有更复杂的结构， 可以覆盖此实现以返回 layout 在其中渲染子组件的元素。

参数:
  • 无。
返回值:
  • Ext.Element
    在其中渲染子组件的元素。
Container
getOuterSize () : Object
获取当前组件所在元素的尺寸大小，包括边缘的空白处。
获取当前组件所在元素的尺寸大小，包括边缘的空白处。
参数:
  • 无。
返回值:
  • Object
    一个包含元素大小的对象 {width: (element width + left/right margins), height: (element height + top/bottom margins)}
BoxComponent
getPosition ( [ Boolean local ] ) : Array
获取组件底层元素当前的XY位置。
获取组件底层元素当前的XY位置。
参数:
  • local : Boolean
    (可选)如果为true，将返回元素的left和top值，而不是相对于页面内的 XY。(默认值为 false)
返回值:
  • Array
    元素的XY位置值(例如：[100, 200])
BoxComponent
getResizeEl () : Ext.Element
返回该组件的最外层用来定义这些组件整体大小的Element...

返回该组件的最外层用来定义这些组件整体大小的Element对象。

通常用 getEl 方法将会返回相同的Element对象，但在有些情况下，组件可能有一些更多的封装了它的主要动态Element对象的Element对象。

例如ComboBox。它是封装在一个包含<input>元素的包装元素里(这将返回其 getEl方法和触发按钮的元素)。返回的元素为resizeEl。

参数:
  • 无。
返回值:
  • Ext.Element
    The Element which is to be resized by size managing layouts.
BoxComponent
getSize () : Object
获取组件底层元素当前的大小。
获取组件底层元素当前的大小。
参数:
  • 无。
返回值:
  • Object
    一个包含元素大小的对象{width: (element width), height: (element height)}
BoxComponent
getTool ( String id ) : Object
根据id获取一个tool.
根据id获取一个tool.
参数:
  • id : String
返回值:
  • Object
    tool
Panel
getTopToolbar () : Ext.Toolbar
返回panel顶部区域的 toolbar ( tbar ).
返回panel顶部区域的 toolbar ( tbar ).
参数:
  • 无。
返回值:
  • Ext.Toolbar
    toolbar
Panel
getUpdater () : Ext.Updater
获取当前panel的 Ext.Updater .让你可以为当前panel的body执行Ajax更新。
获取当前panel的 Ext.Updater .让你可以为当前panel的body执行Ajax更新。
参数:
  • 无。
返回值:
  • Ext.Updater
    Updater
Panel
getWidth () : Number
获取该组件的当前宽度值。
获取该组件的当前宽度值。
参数:
  • 无。
返回值:
  • Number
BoxComponent
getXType () : String
获取当前组件的xtype，它是用 Ext.ComponentMgr 注册的。 所有可用的xtype列表，参见...
获取当前组件的xtype，它是用 Ext.ComponentMgr 注册的。 所有可用的xtype列表，参见 Ext.Component 类头部。示例用法:

var t = new Ext.form.TextField();
alert(t.getXType());  // alerts 'textfield'
参数:
  • 无。
返回值:
  • String
    The xtype
Component
getXTypes () : String
返回此组件的xtype继承树，用字符'-'分隔。 所有可用的xtype值...

返回此组件的xtype继承树，用字符'-'分隔。 所有可用的xtype值，请参见Ext.Component 类的头部。

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

示例用法:

var t = new Ext.form.TextField();
alert(t.getXTypes());  // alerts 'component/box/field/textfield'
参数:
  • 无。
返回值:
  • String
    xtype层次字符串
Component
hasListener( String eventName ) : Boolean
检测对象是否包含指定事件的任何监听器
检测对象是否包含指定事件的任何监听器
参数:
  • eventName : String
    检测的事件名
返回值:
  • Boolean
    如果事件被监听则为true，否则为false
Observable
hide () : Ext.Component
隐藏当前组件。 监听 beforehide' 事件并且返回false 可以取消隐藏组件的操作。 在隐藏组件之后触发...
隐藏当前组件。 监听 beforehide' 事件并且返回false 可以取消隐藏组件的操作。 在隐藏组件之后触发 ' hide' 事件。 如果组件被配置成 hidden 那么此方法在内部被调用。
参数:
  • 无。
返回值:
  • Ext.Component
    this
Component
insert ( Number index , Ext.Component component ) : Ext.Component
在当前容器的指定索引处插入一个组件。 在插入之前触发...
在当前容器的指定索引处插入一个组件。 在插入之前触发 beforeadd 事件， 然后在组件被插入之后触发 add 事件。
参数:
  • index : Number
    组件会被插入到容器子项集合中时的索引位置
  • component : Ext.Component
    需要插入的子组件。

    Ext使用懒渲染，只有在必要的时候才会渲染插入的组件。

    如果使用懒渲染，可以传递一个组件配置对象以避免创建一个真实组件的开销， 这意味着，插入的组件不会立即被渲染。 为了利用这个“懒初始化”('lazy instantiation')， 必须把组件设置为它注册的 Ext.Component.xtype 值。

    所有可用的xtype列表，参见 Ext.Component。
返回值:
  • Ext.Component
    使用容器默认配置值插入的组件(或者配置对象)。
Container
isVisible () : Boolean
如果当前组件可见，返回true。
如果当前组件可见，返回true。
参数:
  • 无。
返回值:
  • Boolean
    如果当前组件可见，返回true，其它返回false。
Component
isXType ( String xtype , [ Boolean shallow ] ) : Boolean
Tests whether or not this Component is of a specific xtype. This can test whether this Component is descended from th...

测试此组件是否是指定的xtype。此方法既可以测试是否是指定的xtype的某个子类， 或者它是否直接是指定的xtype类(shallow=true)。

如果使用你自己的子类，必须知道组件必须注册它的xtype值。

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

示例用法:

var t = new Ext.form.TextField();
var isText = t.isXType('textfield');        // true
var isBoxSubclass = t.isXType('box');       // true, descended from BoxComponent
var isBoxInstance = t.isXType('box', true); // false, not a direct BoxComponent instance
参数:
  • xtype : String
    需要为当前组件进行检测的xtype
  • shallow : Boolean
    (可选) 如果为false，检测组件是否是xtype继承树中的某个子类（默认是这种情况）， 如果为true，只检测组件是否是指定的xtype类型。
返回值:
  • Boolean
    如果当前组件是指定xtype的子类，返回true，其它返回flase。
Component
load ( Object options ) : void
这是底层BasicForm的Ext.form.BasicForm.load 方法的代理...
这是底层BasicForm的 Ext.form.BasicForm.load 方法的代理。
参数:
  • options : Object
    传递给此aciton的选项(有关细节请看 Ext.form.BasicForm.doAction )
返回值:
  • void
FormPanel
mon ( Observable|Element item , Object|String ename , Function fn , Object scope , Object opt ) : void
向任何Observable对象(或者元素)上添加监听器，监听器将会在组件...

向任何Observable对象(或者元素)上添加监听器，监听器将会在组件销毁时被自动删除。
用法：

myGridPanel.mon(myGridPanel.getSelectionModel(), 'selectionchange', handleSelectionChange, null, {buffer: 50});

or:

myGridPanel.mon(myGridPanel.getSelectionModel(), {
    selectionchange: handleSelectionChange,
    buffer: 50
});
参数:
  • item : Observable|Element
    需要添加listener/listeners的项目。
  • ename : Object|String
    事件名，或者一个包含事件名属性的对象。
  • fn : Function
    (可选) 如果 ename 参数是一个事件名，此参数为处理函数。
  • scope : Object
    (可选)如果 ename 参数是一个事件名称，此参数是作用域 ( this 引用)，监听函数将会在此作用域中被执行。
  • opt : Object
    (可选)如果 ename 参数是一个事件名称， 此参数是 addListener 配置项。
返回值:
  • void
Component
mun ( Observable|Element item , Object|String ename , Function fn , Object scope ) : void
删除通过mon 方法添加的监听器。
删除通过mon 方法添加的监听器。
参数:
  • item : Observable|Element
    需要删除listener/listeners的项目。
  • ename : Object|String
    事件名称，或者一个包含事件名称属性的对象。
  • fn : Function
    (可选)如果 ename 参数是一个事件名称，此参数是一个处理函数。
  • scope : Object
    (可选)如果 ename 参数是一个事件名称，此参数是作用域 ( this 引用)，监听函数将会在此作用域中被执行。
返回值:
  • void
Component
nextSibling () : Ext.Component
返回所属容器中的下一个组件
返回所属容器中的下一个组件
参数:
  • 无。
返回值:
  • Ext.Component
Component
on( String eventName, Function handler, [Object scope], [Object options] ) : void
给对象添加事件处理器 (addListener的简写形式)
给对象添加事件处理器 (addListener的简写形式。)
参数:
  • eventName : String
    监听的事件类型
  • handler : Function
    事件调用的方法
  • scope : Object
    （可选）处理方法执行时的作用域 (this 的引用)。 如果被忽略。默认为触发事件的对象。
  • options : Object
    可选 包含处理器配置的对象。
返回值:
  • void
Observable
previousSibling () : Ext.Component
返回所属容器中的前一个组件
返回所属容器中的前一个组件
参数:
  • 无。
返回值:
  • Ext.Component
Component
purgeListeners() : void
移除对象上所有的监听器
移除对象上所有的监听器
参数:
  • 无。
返回值:
  • void
Observable
relayEvents( Object o, Array events ) : void
从指定的Observable上传递选择的事件就好像被当前对象触发一样。
从指定的Observable上传递选择的事件就好像被当前对象触发一样。
参数:
  • o : Object
    该Observable上的事件被当前对象传递。
  • events : Array
    传递的数组名。
返回值:
  • void
Observable
remove ( Component/String component , [ Boolean autoDestroy ] ) : Ext.Component
从当前容器中移除一个组件。 在移除之前触发 beforeremove 事件， 然后在组件被移除之后触发...
从当前容器中移除一个组件。 在移除之前触发 beforeremove 事件， 然后在组件被移除之后触发 remove 事件。
参数:
  • component : Component/String
    需要移除的组件引用或者id
  • autoDestroy : Boolean
    (可选) 设置为true将自动调用被删组件的 Ext.Component.destroy 函数。 默认为容器的 autoDestroy 配置值。
返回值:
  • Ext.Component
    被移除的组件。
Container
removeAll ( [ Boolean autoDestroy ] ) : Array
从当前容器中删除所有组件。
从当前容器中删除所有组件。
参数:
  • autoDestroy : Boolean
    (可选) 此参数为true时将自动调用 被删组件的 Ext.Component.destroy 方法。 默认为当前容器的 autoDestroy 配置值。
返回值:
  • Array
    被销毁的组件数组
Container
removeClass ( string cls ) : Ext.Component
从组件底层的元素上删除一个CSS类。
从组件底层的元素上删除一个CSS类。
参数:
  • cls : string
    需要移除的CSS类名
返回值:
  • Ext.Component
    this
Component
removeListener( String eventName, Function handler, [Object scope] ) : void
删除一个事件处理器。
删除一个事件处理器。
参数:
  • eventName : String
    处理器关联的事件类型。
  • handler : Function
    移除的处理器。 这应该是传递到addListener里的方法的引用。
  • scope : Object
    （可选）处理器指定的初始作用域。
返回值:
  • void
Observable
render ( [ Element/HTMLElement/String container ], [ String/Number position ] ) : void
在传递进来的HTML元素中渲染当前组件。...

在传递进来的HTML元素中渲染当前组件。

如果你正在使用一个Container 对象放置当前组件，那么请不要使用render方法。

当容器第一次被渲染时，它的子组件将会被容器的 layout 管理器渲染。

某些布局管理器允许动态添加子组件。它们包括 Ext.layout.CardLayout, Ext.layout.AnchorLayout, Ext.layout.FormLayout, Ext.layout.TableLayout。

当一个新的子组件被添加时，如果容器已经被渲染了， 你可能需要调用容器的 doLayout 方法来刷新视图，它将导致所有没有被渲染的子组件进行渲染操作。 此操作是必须的，这样你可以添加多个子组件而只刷新一次layout。

当创建复杂的UI时，非常重要的一点是，请记住调整子项目的尺寸和位置是容器的 layout 管理器的职责。 如果你希望子项目的尺寸对用户交互作出反应， 你必须为容器配置一个布局管理器，它将创建和管理你心里想要的那种布局。

忽略容器的layout 配置意味着将会使用一个基本的布局管理器，它除了按次序把子组件 渲染到容器中之外什么事情都不做。 这种情况下，任何尺寸和位置的调整操作都不会发生。

参数:
  • container : Element/HTMLElement/String
    (可选) 需要在其中渲染当前组件的元素。 如果它是从一个已存在的标签中创建的，此参数应该被忽略。
  • position : String/Number
    (可选) 容器中的一个元素ID或者一个DOM节点索引， 当前组件将会被插入到它前面 (默认append到容器的尾部)
返回值:
  • void
Component
resumeEvents() : void
重新开始触发事件。(参见suspendEvents) 如果事件以queueSuspended参数被挂起，则在事件被挂起时 ...
重新开始触发事件。(参见 suspendEvents) 如果事件以queueSuspended 参数被挂起，则在事件被挂起时触发的事件会被传递到所有的监听器上
参数:
  • 无。
返回值:
  • void
Observable
setAutoScroll ( Boolean scroll ) : Ext.BoxComponent
设置该组件内容溢出时是否自动显示滚动条。
设置该组件内容溢出时是否自动显示滚动条。
参数:
  • scroll : Boolean
    值为true的话组件自动显示滚动条。
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setDisabled ( Boolean disabled ) : Ext.Component
工具函数，使用布尔值设置有效/无效(disabled/enabled )。
工具函数，使用布尔值设置有效/无效(disabled/enabled )。
参数:
  • disabled : Boolean
返回值:
  • Ext.Component
    this
Component
setHeight ( Mixed height ) : Ext.BoxComponent
设置此组件的高度。该方法将触发resize事件。
设置此组件的高度。该方法将触发resize事件。
参数:
  • height : Mixed
    The new height to set.
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setIconClass ( String cls ) : void
设置CSS类，为当前panel提供图标图片。 如果已经设置了...
设置CSS类，为当前panel提供图标图片。 如果已经设置了，此方法将会替换任何现有的图标类并在完成之后触发 iconchange 事件。
参数:
  • cls : String
    新的CSS类名
返回值:
  • void
Panel
setPagePosition ( Number x , Number y ) : Ext.BoxComponent
设置组件在页面中的XY位置。 如果需要设置left和top值 ，请使用...
设置组件在页面中的XY位置。 如果需要设置left和top值 ，请使用setPosition方法。 该方法触发move事件。
参数:
  • x : Number
    The new x position
  • y : Number
    The new y position
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setPosition ( Number left , Number top ) : Ext.BoxComponent
设置组件的left和top值。设置组件的页面XY值，请使用setPagePosition方法。该方法触发...
设置组件的left和top值。设置组件的页面XY值，请使用setPagePosition方法。该方法触发move事件。
参数:
  • left : Number
    The new left
  • top : Number
    The new top
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setSize ( Mixed width , Mixed height ) : Ext.BoxComponent
设置BoxComponent的宽度和高度。 此方法触发resize事件...
设置BoxComponent的宽度和高度。 此方法触发resize事件。此方法可以接收单独的width或者height值作为参数， 或者你可以传递像这样的一个size对象： {width:10, height:20} 。
参数:
  • width : Mixed
    设置的新的width值。这可以是：
    • 一个Number类型指定Element新的宽度 Ext.Element.defaultUnit(默认为像素 :'px')。
    • 一个String类型用于设置width的CSS样式。
    • 一个size对象格式为 {width: widthValue, height: heightValue} 。
    • 值为 undefined 时，保留原来的width不变。
  • height : Mixed
    设置的新的height值(如果第一个参数传递了一个size对象，此参数没有必要传递)。这可以是：
    • 一个Number类型指定Element新的高度 Ext.Element.defaultUnit(默认为像素 :'px')。
    • 一个String类型用于设置height的CSS样式。也有可能不会被使用到。
    • 值为 undefined 时，保留原来的height不变。
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setTitle ( String title , [ String iconCls ] ) : void
为panel设置标题文本，也可选择设置 icon class。...

为panel设置标题文本，也可选择设置 icon class。

为了能够设置标题，必须已经为Panel创建了一个header元素。 要么通过向Panel上注册一个非空的 title ，或者配置 header: true ，可触发此操作(译者注：指为Panel创建header元素)。

参数:
  • title : String
    需要设置的标题文本
  • iconCls : String
    (可选) iconCls 一个用户定义的CSS类，为当前panel提供图标图片。
返回值:
  • void
Panel
setVisible ( Boolean visible ) : Ext.Component
工具方法，通过使用布尔值隐藏或者显示当前组件。
工具方法，通过使用布尔值隐藏或者显示当前组件。
参数:
  • visible : Boolean
    true时显示，false时隐藏
返回值:
  • Ext.Component
    this
Component
setWidth ( Mixed width ) : Ext.BoxComponent
设置组件的宽度。 此方法触发resize事件。
设置组件的宽度。 此方法触发resize事件。
参数:
  • width : Mixed
    The new width to set.
返回值:
  • Ext.BoxComponent
    this
BoxComponent
show () : Ext.Component
显示当前组件。监听' beforeshow' 事件，返回 false 取消显示组件...
显示当前组件。监听' beforeshow' 事件，返回 false 取消显示组件。在显示组件之后触发' show' 事件。
参数:
  • 无。
返回值:
  • Ext.Component
    this
Component
startMonitoring () : void
开始监控form的校验状态，一般该工作通过传递配置选项"monitorValid"来完成...
开始监控form的校验状态，一般该工作通过传递配置选项"monitorValid"来完成.
参数:
  • 无。
返回值:
  • void
FormPanel
stopMonitoring () : void
停止监控此表单的校验状态...
停止监控此表单的校验状态.
参数:
  • 无。
返回值:
  • void
FormPanel
suspendEvents( Boolean queueSuspended ) : void
暂停触发所有的事件。 (参看resumeEvents)
暂停触发所有的事件。（参看 resumeEvents)
参数:
  • queueSuspended : Boolean
    如果传递为true则排列好暂停的事件使得在调用 resumeEvents 后再触发它们，而不是抛弃所有暂停的事件。
返回值:
  • void
Observable
syncSize () : Ext.BoxComponent
强制组件的大小按照此组件底层元素当前的高度和宽度计算。
强制组件的大小按照此组件底层元素当前的高度和宽度计算。
参数:
  • 无。
返回值:
  • Ext.BoxComponent
    this
BoxComponent
toggleCollapse ( Boolean animate ) : Ext.Panel
根据panel的当前状态，执行expand或者 collapse操作 的快捷方式。
根据panel的当前状态，执行expand或者 collapse操作 的快捷方式。
参数:
  • animate : Boolean
    True将会在转换过程中使用动画效果，否则为false (默认为panel的animCollapse 配置项的值)
返回值:
  • Ext.Panel
    this
Panel
un( String eventName, Function handler, [Object scope] ) : void
删除一个事件处理器(removeListener方法的简写形式)
删除一个事件处理器(removeListener方法的简写形式。)
参数:
  • eventName : String
    处理器关联的事件类型
  • handler : Function
    被删除的处理器 这应该是传入 addListener 中的方法的引用。
  • scope : Object
    （可选）为处理器指定的初始作用域。
返回值:
  • void
Observable
update ( Mixed htmlOrData , [ Boolean loadScripts ], [ Function callback ] ) : void
刷新组件的内部区域。
刷新组件的内部区域。
参数:
  • htmlOrData : Mixed
    如果已经通过tpl为当前组件配置了一个模板，那么 将会使用此参数来装配模板。 如果没有为当前组件配置模板，组件的内容区域将会通过Ext.Element 进行刷新。
  • loadScripts : Boolean
    (可选)只用在使用html配置时此参数才合法。默认为false。
  • callback : Function
    (可选)只用在使用html配置时此参数才合法。 当脚本加载完成时回调函数才被执行。
返回值:
  • void
Component
updateBox ( Object box ) : Ext.BoxComponent
设置此组件底层元素的盒子模型尺寸。(译者注：盒子模型是CSS术语，详细资料请自行搜索。)
设置此组件底层元素的盒子模型尺寸。(译者注：盒子模型是CSS术语，详细资料请自行搜索。)
参数:
  • box : Object
    一个格式为{x, y, width, height}的对象
返回值:
  • Ext.BoxComponent
    this
BoxComponent

公共事件

Event Defined By
activate : ( Ext.Panel p )
当Panel被设置为视觉活动状态之后触发。 注意Panel不直接支持活动状体，但是Panel的一些子类...
当Panel被设置为视觉活动状态之后触发。 注意Panel不直接支持活动状体，但是Panel的一些子类 (例如 Ext.Window)支持。 作为TabPanel子组件的Panel，在TabPanel的控制之下触发activate和deactivate事件。
监听器将会以如下参数格式被调用:
  • p : Ext.Panel
    被激活的Panel.
Panel
add : ( Ext.Container this , Ext.Component component , Number index )
监听器将会被使用如下的参数被调用:
  • this : Ext.Container
  • component : Ext.Component
    被添加的组件
  • index : Number
    将组件添加到容器子组件集合时的位置索引
Container
added : ( Ext.Component this , Ext.Container ownerCt , number index )
当一个组件被添加到一个Ext.Container时触发
当一个组件被添加到一个Ext.Container时触发
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • ownerCt : Ext.Container
    用于组件的容器
  • index : number
    添加组件的位置
Component
afterlayout : ( Ext.Container this , ContainerLayout layout )
当容器中的组件被指定的布局管理器排列的时候触发。
当容器中的组件被指定的布局管理器排列的时候触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Container
  • layout : ContainerLayout
    为当前容器提供的ContainerLayout实现
Container
afterrender : ( Ext.Component this )
在组件渲染完成之后触发...

在组件渲染完成之后触发。

afterrender事件在当前组件被rendered 结束之后、在为组件定义的所有afterRender方法执行之后 触发，并且，如果有stateful， 也在状态被保存之后才触发。

监听器将会以如下参数格式被调用:
  • this : Ext.Component
Component
beforeadd : ( Ext.Container this , Ext.Component component , Number index )
在任何 Ext.Component 被添加或者插入到容器中之前触发。 事件处理器可以返回false取消添加操作。
在任何 Ext.Component 被添加或者插入到容器中之前触发。 事件处理器可以返回false取消添加操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Container
  • component : Ext.Component
    被添加的组件
  • index : Number
    组件被添加到容器子项目集合中时的索引位置
Container
beforeclose : ( Ext.Panel p )
在Panel被关闭之前触发。 注意，Panel不直接支持关闭操作，但是Panel的一些子类(例如...
在Panel被关闭之前触发。 注意，Panel不直接支持关闭操作，但是Panel的一些子类(例如 Ext.Window) ，或者一个位于Ext.TabPanel中的Panel支持。 此事件仅被应用到这些子类中。处理函数可以返回false以取消关闭操作。
监听器将会以如下参数格式被调用:
  • p : Ext.Panel
    正在被关闭的Panel.
Panel
beforecollapse : ( Ext.Panel p , Boolean animate )
在Panel被折叠之前触发。监听器可以返回false取消折叠。
在Panel被折叠之前触发。监听器可以返回false取消折叠。
监听器将会以如下参数格式被调用:
  • p : Ext.Panel
    被折叠的Panel
  • animate : Boolean
    如果折叠操作使用了动画效果，此参数为true，其它为false
Panel
beforedestroy : ( Ext.Component this )
在组件 destroyed 之前触发。 在事件监听器中返回false以停止 destroy 操作。
在组件 destroyed 之前触发。 在事件监听器中返回false以停止 destroy 操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforeexpand : ( Ext.Panel p , Boolean animate )
在Panel被展开之前触发。监听器可以返回false取消展开操作。
在Panel被展开之前触发。监听器可以返回false取消展开操作。
监听器将会以如下参数格式被调用:
  • p : Ext.Panel
    被展开的Panel
  • animate : Boolean
    如果展开操作使用动画效果，为true，其它为false
Panel
beforehide : ( Ext.Component this )
在调用hide方法隐藏组件之前触发。 在事件监听器中返回false可以停止隐藏操作。
在调用hide方法隐藏组件之前触发。 在事件监听器中返回false可以停止隐藏操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforeremove : ( Ext.Container this , Ext.Component component )
从容器中删除任何Ext.Component 之前触发。 处理器可以返回false取消remove操作。
从容器中删除任何Ext.Component 之前触发。 处理器可以返回false取消remove操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Container
  • component : Ext.Component
    被删除的组件
Container
beforerender : ( Ext.Component this )
在组件被rendered 之前触发。 在事件监听器中返回false可以停止render 操作。
在组件被rendered 之前触发。 在事件监听器中返回false可以停止render 操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforeshow : ( Ext.Component this )
在调用show()方法现实组件之前触发。 事件处理函数返回false可以停止show。
在调用show 方法现实组件之前触发。 事件处理函数返回false可以停止show。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforestaterestore : ( Ext.Component this , Object state )
在组件状态恢复之前触发。返回false停止恢复状态操作。
在组件状态恢复之前触发。返回false停止恢复状态操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    StateProvider返回的状态哈希值。 如果没有禁止此事件，那么状态对象会被传递给applyState。 默认情况下，这样简单地把属性值拷贝到当前组件中。 可以覆盖此方法以提供自定的状态恢复操作。
Component
beforestatesave : ( Ext.Component this , Object state )
在组件状态被保存到配置的状态提供者之前触发。 返回false可以停止保存。
在组件状态被保存到配置的状态提供者之前触发。 返回false可以停止保存。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    状态值哈希。 这由在组件上调用getState() 方法决定。 此方法必须由开发者提供，返回是否需要对状态进行描述，默认情况下， Ext.Component有一个空实现。
Component
bodyresize : ( Ext.Panel p , Number width , Number height )
在Panel被调整尺寸之后触发。
在Panel被调整尺寸之后触发。
监听器将会以如下参数格式被调用:
  • p : Ext.Panel
    被调整尺寸的Panel
  • width : Number
    Panel body的新宽度。
  • height : Number
    Panel body的新高度。
Panel
clientvalidation : ( Ext.form.FormPanel this , Boolean valid )
如果monitorValid配置项为true，此事件将被反复触发...
如果monitorValid配置项为true，此事件将被反复触发.
监听器将会以如下的参数格式被调用:
  • this : Ext.form.FormPanel
  • valid : Boolean
    true if the form has passed client-side validation
FormPanel
close : ( Ext.Panel p )
在Panel被关闭之后触发。注意，Panel不直接提供关闭操作， 但是Panel的一些子类(例如...
在Panel被关闭之后触发。注意，Panel不直接提供关闭操作， 但是Panel的一些子类(例如 Ext.Window) ，或者处于Ext.TabPanel中的Panel支持。
监听器将会以如下参数格式被调用:
  • p : Ext.Panel
    被关闭的Panel.
Panel
collapse : ( Ext.Panel p )
在Panel被折叠后触发。
在Panel被折叠后触发。
监听器将会以如下参数格式被调用:
  • p : Ext.Panel
    被折叠的Panel
Panel
deactivate : ( Ext.Panel p )
在Panel被视觉上失去活动状态之后触发。 注意，Panel不直接支持此操作，但是Panel的一些子类...
在Panel被视觉上失去活动状态之后触发。 注意，Panel不直接支持此操作，但是Panel的一些子类 (例如Ext.Window)支持。 作为TabPanel的子组件的Panel将会在TabPanel的控制之下触发activate 和deactivate事件。
监听器将会以如下参数格式被调用:
  • p : Ext.Panel
    失去活动状态的Panel
Panel
destroy : ( Ext.Component this )
在组件被销毁之后触发。
在组件被destroyed之后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
disable : ( Ext.Component this )
在组件被设置为无效状态后触发。
在组件被设置为无效状态后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
enable : ( Ext.Component this )
当组件被设置为有效(enabled)之后触发。
当组件被设置为有效(enabled)之后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
expand : ( Ext.Panel p )
当Panel已经展开之后触发。
当Panel已经展开之后触发。
监听器将会以如下参数格式被调用:
  • p : Ext.Panel
    已经被展开的Panel.
Panel
hide : ( Ext.Component this )
在组件被隐藏之后触发。 当调用hide 方法隐藏组件之后触发。
在组件被隐藏之后触发。 当调用hide 方法隐藏组件之后触发。
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
iconchange : ( Ext.Panel p , String The , String The )
当Panel的图标被set或者 changed 之后触发。
当Panel的图标被set或者 changed 之后触发。
监听器将会以如下参数格式被调用:
  • p : Ext.Panel
    icon class被变化的Panel
  • The : String
    新icon类
  • The : String
    旧icon类
Panel
move : ( Ext.Component this , Number x , Number y )
在组件移动之后触发。
在组件移动之后触发。
监听器将会用如下的参数格式来调用:
  • this : Ext.Component
  • x : Number
    The new x position
  • y : Number
    The new y position
BoxComponent
remove : ( Ext.Container this , Ext.Component component )
监听器将会以如下的参数格式被调用:
  • this : Ext.Container
  • component : Ext.Component
    被删除的组件
Container
removed : ( Ext.Component this , Ext.Container ownerCt )
当一个组件被从Ext.Container容器中删除时触发
当一个组件被从Ext.Container容器中删除时触发
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • ownerCt : Ext.Container
    持有组件的容器
Component
render : ( Ext.Component this )
在组件被渲染之后触发。
在组件被 rendered(渲染) 之后触发。
监听器将以如下的参数格式被调用:
  • this : Ext.Component
Component
resize : ( Ext.Component this , Number adjWidth , Number adjHeight , Number rawWidth , Number rawHeight )
在组件被调整大小之后触发。
在组件被调整大小之后触发。
监听器将以如下的参数格式被调用:
  • this : Ext.Component
  • adjWidth : Number
    这是width调整后的值
  • adjHeight : Number
    这是height调整后的值
  • rawWidth : Number
    这是width原来的值
  • rawHeight : Number
    这是height原来的值
BoxComponent
show : ( Ext.Component this )
在调用show 方法显示组件之后触发。
在调用show 方法显示组件之后触发。
监听器将会用如下的参数格式被调用:
  • this : Ext.Component
Component
staterestore : ( Ext.Component this , Object state )
组件状态被存储之后触发。
组件状态被存储之后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    StateProvider返回的状态哈希值。 如果没有禁止此事件，那么状态对象会被传递给applyState。 默认情况下，这样简单地把属性值拷贝到当前组件中。 可以覆盖此方法以提供自定的状态恢复操作。
Component
statesave : ( Ext.Component this , Object state )
在组件状态被保存到所配置的状态提供者之后触发。
在组件状态被保存到所配置的状态提供者之后触发。
监听器将会用如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    状态值hash。 这是由在足见上调用getState() 方法决定的。 开发者必须提供此方法以返回是否需要恢复状态，默认情况下， Ext.Component有一个空实现。
Component
titlechange : ( Ext.Panel p , String The )
在Panel的标题被set或者 changed 之后触发。
在Panel的标题被set或者 changed 之后触发。
监听器将会以如下参数格式被调用:
  • p : Ext.Panel
    标题被改变的Panel.
  • The : String
    新的标题。
Panel


Observable
    Component
      BoxComponent
        Field
          Hidden

Class Ext.form.Hidden

包: | Ext.form
定义类的文件: | Hidden.js
类: | Hidden
继承自: | Field
一个基本的隐藏域，用来存储表单中的隐藏值，它们需要在提交表单时传递到后台。

配置项

Config Options Defined By
allowDomMove : Boolean
在渲染时组件是否可以移动Dom节点(默认为true)。
Component
anchor : String
注: 这个配置只用于该组件被包含在一个已使用AnchorLayout...

注: 这个配置只用于该组件被包含在一个已使用 AnchorLayout (或者其子类)配置的Container时。 基于布局管理器，例如：

  • Ext.form.FormPanel
  • 指定 layout: 'anchor' // or 'form', or 'absolute'

参见 Ext.layout.AnchorLayout. anchor 。

BoxComponent
applyTo : Mixed
指定一个元素的id、一个DOM元素或者一个已经存在并被渲染到DIV中的元素，此DIV已经被...

指定一个元素的id、一个DOM元素或者一个已经存在并被渲染到DIV中的元素，此DIV已经被 渲染到document中，并且为当前组件指定了一些结构化的标签。

  • 描述 :
      当使用了 applyTo， 在主元素中也可以用id或者CSS类名来指定组件的托管部分， 并且，如果可以的话，创建的组件可能也会试图在那个标签中创建它的子组件。
  • 注意 :
      当使用此配置项时，无需调用render()方法。
      如果指定了applyTo属性，任何传递给 renderTo 的值都会被忽略，并且目标元素的父节点将会自动被用作组件的容器。
Component
autoCreate : String/Object
一个DomHelper 元素描述，或者为true使用一个默认元素描述。 用来创建封装当前组件的...

一个DomHelper 元素描述，或者为true使用一个默认元素描述。 用来创建封装当前组件的 Element。 细节参见 autoEl 。 默认为:

                                {tag: 'input', type: 'text', size: '20', autocomplete: 'off'}
Field
autoEl : Mixed
一个表签名或者一个 DomHelper 描述，用来创建 Element ，它将封装当前组件...

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

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

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

{
    xtype: 'box',
    autoEl: {
        tag: 'img',
        src: 'http://www.example.com/example.jpg'

    }
}, {
    xtype: 'box',
    autoEl: {
        tag: 'blockquote',
        html: 'autoEl is cool!'
    }
}, {
    xtype: 'container',
    autoEl: 'ul',
    cls: 'ux-unordered-list',
    items: {
        xtype: 'box',
        autoEl: 'li',
        html: 'First list item'
    }
}
Component
autoHeight : Boolean
如果值为true，height配置项为'auto'，否则值为false的话使用固定的高度...

如果值为true，height配置项为'auto'，否则值为false的话使用固定的高度， 或者可以由其父类容器 layout manager来控制。(默认值为 false)。

注: 虽然很多组件继承了这个配置选项，但不是所有这些组件的自适应高度配置都会像期望的那样起作用。 设置autoHeight：值为true时，浏览器将根据元素的内容自动设置高度，这将意味着Ext不会去管理高度。

如果是由浏览器来管理高度，需要注意的是，通过浏览器进行调整的结构组件内不能被发现， 因此宽度的变化可能导致需要进行同步处理元素的高度。 例如：

var w = new Ext.Window({
    title: 'Window',
    width: 600,
    autoHeight: true,
    items: {
        title: 'Collapse Me',
        height: 400,
        collapsible: true,
        border: false,
        listeners: {
            beforecollapse: function() {
                w.el.shadow.hide();
            },
            beforeexpand: function() {
                w.el.shadow.hide();
            },
            collapse: function() {
                w.syncShadow();
            },
            expand: function() {
                w.syncShadow();
            }
        }
    }
}).show();
BoxComponent
autoScroll : Boolean
如果值为true，将会在该元素上使用overflow:'auto'配置，并且在必要的时候...
如果值为true，将会在该元素上使用overflow:'auto'配置，并且在必要的时候自动显示滚动条，否则，溢出部分的组件都会被切除(默认值为 false)。
BoxComponent
autoShow : Boolean
如果组件需要检测隐藏CSS属性(如 'x-hidden' 或者 'x-hide-display')并且在渲染时删除...
如果组件需要检测隐藏CSS属性(如 'x-hidden' 或者 'x-hide-display')并且在渲染时删除它们 (默认为false)，设置此值为true。
Component
autoWidth : Boolean
如果为true，使用width:'auto'配置，否则使用固定的宽度...

如果为true，使用width:'auto'配置，否则使用固定的宽度，或者可以由其父类容器的layout manager来控制。(默认值为 false)。

注: 虽然很多组件继承了这个配置选项，但不是所有这些组件的自适应宽度配置都会像期望的那样起作用。 设置autoWidth：值为true时，浏览器将根据元素的内容自动设置宽度，这将意味着Ext不会去管理宽度。

如果是由浏览器来管理宽度，需要注意的是，通过浏览器进行调整的结构组件内不能被发现，因此宽度的变化可能导致需要进行同步处理元素的宽度。 例如，在这个元素的目标是：

<div id='grid-container' style='margin-left:25%;width:50%'></div>
当浏览器窗口改变时，渲染后的Panel必须监听浏览器窗口大小的变化，以便通知子项，浏览器改变了其宽度：

var myPanel = new Ext.Panel({
    renderTo: 'grid-container',
    monitorResize: true, // relay on browser resize
    title: 'Panel',
    height: 400,
    autoWidth: true,
    layout: 'hbox',
    layoutConfig: {
        align: 'stretch'
    },
    defaults: {
        flex: 1
    },
    items: [{
        title: 'Box 1',
    }, {
        title: 'Box 2'
    }, {
        title: 'Box 3'
    }],
});
BoxComponent
boxMaxHeight : Number
设置组件的最大高度值...

设置组件的最大高度值。

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

BoxComponent
boxMaxWidth : Number
设置组件的最大宽度值...

设置组件的最大宽度值。

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

BoxComponent
boxMinHeight : Number
设置组件的最小高度值...

设置组件的最小高度值。

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

BoxComponent
boxMinWidth : Number
设置组件的最小宽度值...

设置组件的最小宽度值。

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

BoxComponent
bubbleEvents : Array
一个事件数组，当这些事件被触发时，将会被冒泡到所有父容器中。参见....

一个事件数组，当这些事件被触发时，将会被冒泡到所有父容器中。参见 Ext.util.Observable.enableBubble。 默认为 []。

Component
clearCls : String
应用到特殊的clearing div的CSS类， 这个clearing div直接渲染到每个form field的包装器后面...

应用到特殊的clearing div的CSS类， 这个clearing div直接渲染到每个form field的包装器后面，以提供 清除field的功能(默认为 'x-form-clear-left')。

注意: 只有在当前组件被渲染到一个使用FormLayout 布局(例如 Ext.form.FormPanel 或者指定 layout:'form')的 容器中、或者是指定了一个fieldLabel 、或者指定isFormField=true 时此配置才有效。

另请参见 Ext.layout.FormLayout. fieldTpl。

Component
cls : String
一个可选的额外CSS类，它将被添加到当前组件的元素上(默认为'')...
一个可选的额外CSS类，它将被添加到当前组件的元素上(默认为'')。 此属性对于在组件上，或者它的任何使用标准CSS规则的孩子节点上， 添加定制的样式非常有用。
Field
contentEl : String
(可选)指定一个已存在的HTML元素，或者一个已存在HTML元素的...

(可选)指定一个已存在的HTML元素，或者一个已存在HTML元素的 id ，它们将被用作当前组件的内容。

  • 描述 :
    此配置选项被用来将一个已存在的HTML元素 插入到一个新组件(在组件渲染之后它简单地移动DOM元素) 的layout元素中，使它成为该组件的内容。
  • 注意 :
    指定的HTML元素将被append到组件的layout元素中， 在所有配置的 HTML 被插入之后， 并且，这样的话，在render事件 被触发时，document中将不再包含此元素。
    指定的HTML元素将不会参与组件所有可能使用的 layout 过程(译者注：指这些HTML元素 不会参与布局操作)。 它仅是HTML而已。布局操作实在孩子 items 上进行的。
    添加 x-hidden 或者 x-hide-display CSS类，以防在内容渲染到panel时发生闪烁。
Component
ctCls : String
一个可选的外部CSS样式，添加到这个组件的容器(默认值为 '')。 这个方法对于使用标准的CSS规则...

一个可选的外部CSS样式，添加到这个组件的容器(默认值为 '')。 这个方法对于使用标准的CSS规则，为组件或它的任何一个子组件添加特定的样式非常有用。 参见 Ext.layout.ContainerLayout和 extraCls 。

注意: ctCls 默认为 ''期望如下的类，它们将指定一个默认值:

  • Box Layout : 'x-box-layout-ct'
使用一个额外的CSS类配置以上的Class，它是append到默认对象上的。例如， 对于BoxLayout (Hbox and Vbox):
                                ctCls: 'x-box-layout-ct custom-class'

Component
data : Mixed
初始化数据集，它将被应用到 tpl 上以刷新组件的内容区域。
Component
disabled : Boolean
当前组件处于无效状态时为true。 Read-only.
Field
disabledClass : String
当组件处于无效状态时添加到组件上的CSS类(默认为 'x-item-disabled')。
Component
fieldClass : String
表单项的默认CSS类(默认为'x-form-field')
Field
fieldLabel : String
紧靠此field显示的标签文本(默认值为 '')。注意...

紧靠此field显示的标签文本(默认值为 '')。

注意:只有在当前组件被渲染到一个使用FormLayout 的容器中时，此配置才有效。 (例如 Ext.form.FormPanel 或 指定 layout:'form')。

另请参见 hideLabel 、 Ext.layout.FormLayout和 fieldTpl。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Name'
    }]
});
Component
flex : Number
注: 这个配置只用于该组件被包含在一个已使用BoxLayout配置的Container中时...

注: 这个配置只用于该组件被包含在一个已使用BoxLayout配置的Container中时。通过计算每一个子组件的flex值所占全部flex值之和的比例，来决定子组件的宽(HBoxLayout)高(VBoxlayout)。 任何子项的 flex = 0 或 flex = undefined 将不被设置(初始值大小将不被改变)。

BoxComponent
focusClass : String
当表单项获得焦点时使用的CSS类(默认为 'x-form-focus')
Field
height : Number
组件的高度(默认值为 auto)。注:如果想使用百分比的方式...
组件的高度(默认值为 auto)。注:如果想使用百分比的方式来设置值，请查看 Ext.Component.anchor。
BoxComponent
hidden : Boolean
如果当前组件处于隐藏状态，此值为true。Read-only。
Component
hideLabel : Boolean
true时完全隐藏label元素 ( label 和 separator)。 默认为 false。 默认情况下，即使你不指定...

true时完全隐藏label元素 ( label 和 separator)。 默认为 false。 默认情况下，即使你不指定 fieldLabel 它的空间仍然会被保留，这样这块区域会与其它确实拥有label的区域位于同一排。 讲此值设置为 true 将导致此区域不再保留此空间。

注意: 参见 clearCls 的注释。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield'
        hideLabel: true
    }]
});
Component
hideMode : String
组件如何隐藏，支持的值有： 'visibility' (css visibility), 'offsets' (位置偏移量为负值) 和...

组件如何隐藏，支持的值有： 'visibility' (css visibility), 'offsets' (位置偏移量为负值) 和 'display' (css display).

注意:一般首选默认值 'display'，因为当组件第一次显示的时候它们会自动进行布局 (隐藏的时候不会调整尺寸)。

Component
hideParent : Boolean
此值为true时，当调用hide/show方法时，将会hide和show组件的容器...
此值为true时，当调用hide/show方法时，将会hide和show组件的容器；false时将会 hide和show组件自身(默认为false)。例如，这可以用作window上隐藏按钮的一种 快捷操作，通过设置此按钮的hideParent:true，然后把它添加到window上。
Component
html : String/Object
一个HTML片段，或者一个 DomHelper 描述，用作layout元素的内容(默认为'')。...
一个HTML片段，或者一个 DomHelper 描述，用作layout元素的内容(默认为'')。 这个HTML内容在组件渲染之后才被添加，所以在 render 出发的时候，document中尚未包含此HTML。 但是这个内容将会在所有配置的 contentEl 之前被插入到body标签中。
Component
id : String
当前组件唯一的id(默认为auto-assigned id)...

当前组件唯一的id(默认为auto-assigned id)。 如果你需要在以后访问组件，而又没有一个有效的组件对象引用，那么你需要指定一个 id( 也就是，使用Ext. getCmp方法 )。

注意，此id也将被用作组件底层HTML标签的id，这些标签被渲染到页面中。 这将允许你编写基于id的CSS规则，以独立地描述指定的实例；并且，也可以通过 组件父标签的id选中子元素。

注意:为了避免与唯一的id 产生重复， 请参见 itemId 和 ref 。

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

Component
inputType : String
输入栏的类型属性---例如radio,text,password,file(默认为'text')。...
输入栏的类型属性---例如radio,text,password,file(默认为'text')。 'file'和'password'类型通常必须用来渲染那些没有独立Ext组件的表单项类型。 注意，如果你使用inputType:'file'， 那么将不再支持 emptyText 并且应该避免使用。
Field
invalidClass : String
当把表单项标记为非法时所使用的CSS类(默认为'x-form-invalid')
Field
invalidText : String
当把一个表单项标记为非法状态并且没有提供消息时所使用的出错文本...
当把一个表单项标记为非法状态并且没有提供消息时所使用的出错文本 (默认为'The value in this field is invalid')
Field
itemCls : String
注意: 只有在当前组件被渲染到一个使用FormLayout 布局的 容器中时此配置才有效...

注意: 只有在当前组件被渲染到一个使用FormLayout 布局的 容器中时此配置才有效。 (例如Ext.form.FormPanel 或者指定 layout:'form')。

一个附加的CSS类，应用到div上，包装当前field的表单元素。 如果提供了此参数， field级上的itemCls将会覆盖 container级上提供的 默认itemCls。 为itemCls指定的值将会被添加默认的 类('x-form-item')。

既然它被应用到项目的包装器上(参见 Ext.layout.FormLayout。 fieldTpl)， 它将允许你编写能应用到此field、label(如果有指定)、或者field内部任何其它元素的标准CSS规则。

注意: 参考 fieldLabel的注释。 .

示例用法:

// Apply a style to the field's label:
<style>
    .required .x-form-item-label {font-weight:bold;color:red;}
</style>

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Name',
        itemCls: 'required' //this label will be styled
    },{
        xtype: 'textfield',
        fieldLabel: 'Favorite Color'
    }]
});
Component
itemId : String
当没有可利用的对象引用时，itemId可以作为第二选择，用来获得一个组件的引用， 代替 ...

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

var c = new Ext.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'); // 与 Ext.getCmp()不同

p2 = p1.ownerCt.getComponent('p2'); // 通过兄弟对象获得引用

另请参见 id 和 ref 。

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

Component
labelSeparator : String
每个fieldLabel 文本后面现实的分隔符。 此属性可以在多个层次上进行配置...

每个fieldLabel 文本后面现实的分隔符。 此属性可以在多个层次上进行配置。优先顺序为：

  • field / component level
  • container level
  • layout level (默认为冒号 ':')
如不需要为当前field的label显示分隔符，指定一个空字符串''即可。

注意:参见 clearCls 的注释。

另请参见 hideLabel 和 Ext.layout.FormLayout。 fieldTpl。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    layoutConfig: {
        labelSeparator: '~'   // layout config has lowest priority (defaults to ':')
    },
    labelSeparator: '>>',     // config at container level
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Field 1',
        labelSeparator: '...' // field/component level config supersedes others
    },{
        xtype: 'textfield',
        fieldLabel: 'Field 2' // labelSeparator will be '='

    }]
});
Component
labelStyle : String
一个CSS样式描述字符串，它将直接应用到当前field的label上...

一个CSS样式描述字符串，它将直接应用到当前field的label上。 如果有设置，默认为容器的labelStyle值(例如 Ext.layout.FormLayout.labelStyle , 或者 '')。

注意:参见 clearCls 的注释。

另请参见 hideLabel 和 Ext.layout.FormLayout. fieldTpl。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Name',
        labelStyle: 'font-weight:bold;'
    }]
});
Component
listeners : Object
一个包含一个或多个事件处理器的配置对象，会在初始化的时候被添加到目标对象上...

一个包含一个或多个事件处理器的配置对象，会在初始化的时候被添加到目标对象上。 该配置对象应该是一个有效的监听器配置对象就像 addListener例子中指定的一样可一次附加多个处理器。

ExtJs Components上的DOM事件

一些 ExtJs Component 类导出时会选择一些DOM事件(例如 "click", "mouseover" 等等), 这通常只是在有额外的值可以被添加时发生。例如DataView类的 click事件会传递被点击的节点。也可以直接在Component的HTMLElementevent上访问DOM事件，但必需在Component被渲染后监听器才能添加到Element 上。可以按照以下步骤添加插件:

// 插件会用一个监听器配置对象进行配置。
//该组件会被添加到所有处理方法的参数列表上。
Ext.DomObserver = Ext.extend(Object, {
    constructor: function(config) {
        this.listeners = config.listeners ? config.listeners : config;
    },

    // 组件将自己传递进了插件的初始化方法里
    init: function(c) {
        var p, l = this.listeners;
        for (p in l) {
            if (Ext.isFunction(l[p])) {
                l[p] = this.createHandler(l[p], c);
            } else {
                l[p].fn = this.createHandler(l[p].fn, c);
            }
        }

        // 渲染后立即添加监听器到元素上
        c.render = c.render.createSequence(function() {
            var e = c.getEl();
            if (e) {
                e.on(l);
            }
        });
    },

    createHandler: function(fn, c) {
        return function(e) {
            fn.call(this, e, c);
        };
    }
});

var combo = new Ext.form.ComboBox({

    // 元素被点击后折叠
    plugins: [ new Ext.DomObserver({
        click: function(evt, comp) {
            comp.collapse();
        }
    })],
    store: myStore,
    typeAhead: true,
    mode: 'local',
    triggerAction: 'all'
});

Observable
margins : Object
注:此配置只用于该组件展现在一个使用BorderLayout...

注:此配置只用于该组件展现在一个使用BorderLayout 或 BoxLayout的两个子类之一作为布局的容器。

这个margins对象在该组件中的格式为：

{top: (top margin),right: (right margin),bottom: (bottom margin),left: (left margin)}

也可以是一个字符串，中间用空格分隔，margin值为数字。 把matches中每一个值的次序跟CSS中margin值的排列方式相对应：

  • 如果只有一个值，它适用于所有方面。
  • 如果有两个值，top和bottom的边框设置为第一个值，left和right设置为第二个值。
  • 如果有三个值，top设置为第一个值，left和right设置为第二个值，bottom设置为第三个值。
  • 如果有四个值，分别设置为top, right, bottom, left。

默认值:

{top:0, right:0, bottom:0, left:0}
BoxComponent
msgFx : String
实验性参数 当在表单项下显示校验消息时使用的效果(默认为'normal')。
Field
msgTarget : String
通过markInvalid 设置的消息文本应该显示的位置。 必须是如下值之一：...

通过markInvalid 设置的消息文本应该显示的位置。 必须是如下值之一：

  • qtip 当用户鼠标滑过表单项时，显示一个包含消息的快速提示。 这是默认情况。
    为了使此参数能工作，必须调用 Ext.QuickTips.init。
  • title 在弹出的默认浏览器标题属性上显示消息。
  • under 在表单项之下添加一块div，包含出错消息。
  • side 在表单项右边添加一个出错图标，当鼠标滑过时弹出并显示一个消息。
  • [element id] 在指定元素的innerHTML中直接添加出错消息。
Field
name : String
表单项的HTML name属性(默认为'')。 注意: 如果需要当前表单项自动被包含在...
表单项的HTML name属性(默认为'')。 注意: 如果需要当前表单项自动被包含在 form submit()中，必须设置此参数。
Field
overCls : String
一个可选的额外的CSS类，它将在鼠标移过元素时被添加到组件上...
一个可选的额外的CSS类，它将在鼠标移过元素时被添加到组件上，鼠标移出时 删除。(默认为'')。此属性对于在组件上，或者它的任何使用标准CSS规则的孩子节点上， 添加定制的'active' 或者 'hover'样式非常有用。
Component
pageX : Number
如果该组件被包含在一个指定位置的容器中，这个值表示页面级的x坐标值（译者注：在有滚动条的情况下这个值很有用）。
BoxComponent
pageY : Number
如果该组件被包含在一个指定位置的容器中，这个值表示页面级的y坐标值（译者注：在有滚动条的情况下这个值很有用）。
BoxComponent
plugins : Object/Array
一个对象或者一个对象数组，为组件提供特殊的功能 ...
一个对象或者一个对象数组，为组件提供特殊的功能。 对一个合法的插件唯一的要求是它含有一个init()方法， 能接收一个Ext.Component型的参数。 当组件被创建时，如果有可用的插件，组件将会调用每个插件的init方法， 并将自身的引用作为方法参数传递给它。然后，每个插件就可以调用方法或者响应组件上的事件， 就像需要的那样提供自己的功能。
Component
preventMark : Boolean
true将会禁止 把表单项标记为非法。默认为false.
Field
ptype : String
需要创建配置的ptype。 当传递一个配置对象给构造函数时...
需要创建配置的ptype。 当传递一个配置对象给构造函数时，此配置选项不会被使用。 只有在使用懒初始化的时候此配置项才会被使用， 此时Plugin不是 通过一个完整的实例组件，而是通过一个Component配置指定的。 在渲染时，将会查找ptype以决定创建何种类型的Plugin。

如果你创建自己的Plugin，你可以通过 Ext.ComponentMgr.registerPlugin 对它们进行注册，以便能利用懒初始化和渲染机制。
Component
readOnly : Boolean
将会把表单项标记为在HTML中只读(readOnly)(默认为false)...
true 将会把表单项标记为在HTML中只读(readOnly)(默认为false)。

Note: 这仅仅设置元素的readOnly DOM参数。 例如，设置 readOnly=true ，将不会禁用触发ComboBox或者DateField； 这为你提供了一个选项，可以强制用户通过触发按钮选择一个值，而不是 在文本框进行输入。 使用 hideTrigger 可以隐藏触发按钮。

Field
ref : String
一个路径描述，与组件的 ownerCt 相关，它描述了把当前组件的命名引用放置到哪个父容器中去。...

一个路径描述，与组件的 ownerCt 相关，它描述了把当前组件的命名引用放置到哪个父容器中去。

祖先的坐标路径可以通过'/'字符进行分隔。 例如，将一个Toolbar Button的引用放入 拥有此Toolbar的Panel中:

var myGrid = new Ext.grid.EditorGridPanel({
    title: 'My EditorGridPanel',
    store: myStore,
    colModel: myColModel,
    tbar: [{
        text: 'Save',
        handler: saveChanges,
        disabled: true,
        ref: '../saveButton'
    }],
    listeners: {
        afteredit: function() {
//          The button reference is in the GridPanel
            myGrid.saveButton.enable();
        }
    }
});

在上面的代码中，如果 ref 是 'saveButton' ，那么引用将会被放置到Toolbar中。 ref 中的每个'/' 都会从组件的 ownerCt 向上移动一级。

另请参见 added 和 removed 事件。

Component
region : String
注: 此配置只用于该组件展现在一个布局为BorderLayout的容器中...

注: 此配置只用于该组件展现在一个布局为BorderLayout的容器中(例如指定layout:'border')。

详见Ext.layout.BorderLayout。

BoxComponent
renderTo : Mixed
该值可以是一个节点的id、一个DOM节点或者一个已存在的元素...

该值可以是一个节点的id、一个DOM节点或者一个已存在的元素， 组件将会被渲染到其中。

  • 注意 :
      如果组件不是一个Container 的子项目时， 不要使用此选项。 渲染和管理它的子项目是一个Container 的layout manager的责任。
      当使用此配置项时，无需调用render()方法。

另请参见 render 。

Component
stateEvents : Array
一个事件数组，当它们被触发时，组件需要保存自己的状态(默认值为 none)...

一个事件数组，当它们被触发时，组件需要保存自己的状态(默认值为 none)。 它们可以是任何该组件支持的事件类型，包括浏览器事件和 自定义事件(例如['click', 'customerchange'])。

对于保存和恢复组件状态的详细解释，参见 stateful

Component
stateId : String
为该组件指定的唯一的id值，它被用作管理组件状态的目的...
为该组件指定的唯一的id值，它被用作管理组件状态的目的。 (如果设定了id，默认值为组件自己的id，否则，如果组件使用自动生成的id，此值为null)。

对于保存和反解析组件状态的解释，参见 stateful 。

Component
stateful : Boolean
一个标志参数，它将引起组件在启动时尝试从一个保存的状态中恢复内部状态参数...

一个标志参数，它将引起组件在启动时尝试从一个保存的状态中恢复内部状态参数。 组件必须要么拥有一个 stateId 或者 id ，它们被分配给需要被管理的状态属性。 在跨页面加载时，不保证自动生成的id属性的稳定性， 并且，不能依赖此id来保存和恢复一个组件的相同状态。

为了保存状态的操作能够工作，状态管理器的提供者必须 被设置成一个Ext.state.Provider 的实现类，它覆盖了set 和get 方法，以便保存和恢复name/value对。 有一个内置的Ext.state.CookieProvider 可用。

为当前页面设置状态提供者:

Ext.state.Manager.setProvider(new Ext.state.CookieProvider({
    expires: new Date(new Date().getTime()+(1000*60*60*24*7)), //7 days from now
}));

当 stateEvents 配置项中其中之一的事件被触发时， 一个状态可保存的组件将试图保存其状态。

保存状态时，一个可保存状态的组件首先需要通过调用 getState 方法来序列化它的状态。 默认情况下，此函数什么事都不做。 开发者必须提供一个实现，返回一个hash对象，它描述了组件可恢复的状态。

getState方法产生的值将会传递给 Ext.state.Manager.set 方法，它使用配置的 Ext.state.Provider 来保存对象，以组件的 stateId 为key，或者，如果此值（指stateId）没有指定时， 使用它的 id 作为key。

在进行构造时，一个可保存状态的组件试图通过调用 Ext.state.Manager.get方法来 恢复它的状态，传递 stateId 或者，如果此值（指stateId）没有指定时， 使用它的 id 作为参数。

结果对象被传递给 applyState 。 applyState 的默认实现只是简单地把属性拷贝到对象中， 但是开发者可以覆盖此方法以支持更多行为。

通过向 beforestaterestore, staterestore, beforestatesave 和 statesave 事件上绑定监听器，你可以在保存和恢复状态时进行额外的处理。

Component
style : String
被添加到组件元素的特定样式。 必须是按照...
被添加到组件元素的特定样式。 必须是按照 Ext.Element.applyStyles 类指定格式的合法参数值。

new Ext.Panel({
    title: 'Some Title',
    renderTo: Ext.getBody(),
    width: 400, height: 300,
    layout: 'form',
    items: [{
        xtype: 'textarea',
        style: {
            width: '95%',
            marginBottom: '10px'
        }
    },
        new Ext.Button({
            text: 'Send',
            minWidth: '100',
            style: {
                marginBottom: '10px'
            }
        })
    ]
});
Component
submitValue : Boolean
False将会清除表单项的name属性，这样在提交表单时它将不会被提交。 默认为true。
Field
tabIndex : Number
该表单项的tabIndex。 注意，此属性仅仅应用到被渲染好的，而不是那些通过applyTo...
该表单项的tabIndex。 注意，此属性仅仅应用到被渲染好的，而不是那些通过applyTo创建的表单项 (默认为undefined)。
Field
tabTip : String
注: 这个配置只用于当该组件作为TabPanel的一个子项目时使用...

注: 这个配置只用于当该组件作为TabPanel的一个子项目时使用。

一个String类型的innerHTML(支持html标签)，当鼠标放在该选项上的时，显示一个tooltip。为了tips能够被渲染，Ext.QuickTips.init()必须被提前调用。
BoxComponent
tpl : Mixed
一个 Ext.Template , Ext.XTemplate 或者一个用来形成一个Ext.XTemplate的字符串数组...
一个 Ext.Template , Ext.XTemplate 或者一个用来形成一个Ext.XTemplate的字符串数组。 与 data 和 tplWriteMode 配置项协同使用。
Component
tplWriteMode : String
刷新组件的内容区域时使用的Ext.(X)Template方式。 默认为'overwrite' (参见 Ext.XTemplate.overwrite )。
刷新组件的内容区域时使用的Ext.(X)Template方式。 默认为'overwrite' (参见 Ext.XTemplate.overwrite )。
Component
validateOnBlur : Boolean
在表单项失去焦点时是否进行校验(默认为 true)。
Field
validationDelay : Number
在用户开始输入到校验操作开始之间的时长毫秒数 (默认为250)
Field
validationEvent : String/Boolean
引发表单项进行校验操作的事件。 设置为false可以禁用自动校验 (默认为'keyup')。
引发表单项进行校验操作的事件。 设置为false可以禁用自动校验 (默认为'keyup')。
Field
value : Mixed
当前表单项的初始化值(默认为undefined).
Field
width : Number
组件的宽度(默认值为 auto)。注:如果想使用百分比的方式...
组件的宽度(默认值为 auto)。注:如果想使用百分比的方式来设置值，请查看 Ext.Component.anchor。
BoxComponent
x : Number
如果被包含在一个指定位置的容器中，这个值表示x(left)坐标值。
BoxComponent
xtype : String
需要创建配置的xtype。 当传递一个配置对象给构造函数时...
需要创建配置的xtype。 当传递一个配置对象给构造函数时，此配置选项不会被使用。 只有在使用懒初始化的时候此配置项才会被使用，此时容器的子项目不是 通过一个完整的实例组件，而是通过一个Component配置指定的。 在渲染时，将会查找xtype以决定创建何种类型的子组件。

预定义的xtype列表如下： here。

如果你继承Component创建你自己的组件，你需要使用Ext.ComponentMgr.registerType 对它们进行注册，以便利用懒初始化和渲染机制。
Component
y : Number
如果被包含在一个指定位置的容器中，这个值表示y(top)坐标值。
BoxComponent

公共属性

Property Defined By
disabled : Boolean
当前组件处于无效状态时为true。 Read-only.
Component
el : Ext.Element
封装了当前组件的Ext.Element。 Read-only。通常情况下，这将是一个<DIV>元素，它由此类的...

封装了当前组件的Ext.Element。 Read-only。

通常情况下，这将是一个<DIV>元素，它由此类的 onRender方法创建，但是它可以通过使用 autoEl 配置项进行覆盖。

注意: 直到组件渲染完成此元素都将处于无效状态。

如需向当前组件的 DOM事件(而不是当前组件自己的Observable事件)添加监听器， 更多建议，参见 listeners 配置项，或者直接使用一个render监听器:

new Ext.Panel({
    title: 'The Clickable Panel',
    listeners: {
        render: function(p) {
            // Append the Panel to the click handler's argument list.
            p.getEl().on('click', handlePanelClick.createDelegate(null, [p], true));
        },
        single: true  // Remove the listener after first invocation
    }
});

另请参见 getEl

Component
hidden : Boolean
如果当前组件处于隐藏状态，此值为true。Read-only。
Component
initialConfig : Object
当前组件的初始化配置描述。 Read-only。
Component
label : Ext.Element
关联到当前表单项的label元素。 只有在当前表单项已经被一个Ext.layout.FormLayout ...

关联到当前表单项的label元素。 只有在当前表单项已经被一个Ext.layout.FormLayout 布局管理器渲染之后才可用。

Field
originalValue : mixed
表单项原来的值，它是在value 中配置的；或者，如果 trackResetOnLoad 设置为...
表单项原来的值，它是在value 中配置的；或者，如果 trackResetOnLoad 设置为 true 时，通过表单加载操作最后一次加载的。
Field
ownerCt : Ext.Container
组件所属的Container (默认为undefined，当前组件被添加到一个容器中时此值被自动设置)...
组件所属的Container (默认为undefined，当前组件被添加到一个容器中时此值被自动设置)。 Read-only。

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

Component
refOwner : Ext.Container
如果当前组件是一个容器的孩子，并且是通过一个 ref 配置项被注册的，则此值为 ref 引用被插入到的祖先容器。
如果当前组件是一个容器的孩子，并且是通过一个 ref 配置项被注册的，则此值为 ref 引用被插入到的祖先容器。
Component
rendered : Boolean
如果当前组件已经被渲染了，此值为true。Read-only.
Component
startValue : mixed
表单项最后一次获得焦点时所拥有的值。 这就是传递给change 事件的值...

表单项最后一次获得焦点时所拥有的值。 这就是传递给change 事件的值，此事件在值被改变并失去焦点时触发。

直到表单项被访问之前此值都是undefined 与originalValue 进行比较。

Field

公共方法

Method Defined By
Hidden ( Object config )
创建一个新的隐藏域。
创建一个新的隐藏域。
参数:
  • config : Object
    配置项
返回值:
  • void
Hidden
addClass ( string cls ) : Ext.Component
为组件底层的元素添加CSS样式。
为组件底层的元素添加CSS样式。
参数:
  • cls : string
    需要添加的CSS样式的class名称
返回值:
  • Ext.Component
    this
Component
addEvents( Object|String o, string Optional. ) : void
添加指定的事件到事件列表上，事件会被该Observable触发。
添加指定的事件到事件列表上，事件会被该Observable触发。
参数:
  • o : Object|String
    以事件名作为属性true作为值的对象 或者当多个事件名被分开的传递时则为第一个事件名。
  • Optional. : string
    事件名被分开的传递时则为事件名。 用法:
    this.addEvents('storeloaded', 'storecleared');
返回值:
  • void
Observable
addListener( String eventName, Function handler, [Object scope], [Object options] ) : void
给对象添加事件处理器。
给对象添加事件处理器。
参数:
  • eventName : String
    监听的事件名。
  • handler : Function
    事件调用的方法
  • scope : Object
    （可选）处理方法执行的作用域 (this的引用 reference)。 如果被忽略。默认为触发事件的对象。
  • options : Object
    （可选）包含处理器配置和属性的对象。 可能包含以下的属性:
    • scope : Object
      处理方法执行的作用域(this的引用) 。 如果被忽略。默认为触发事件的对象。
    • delay : Number
      在触发事件后延迟调用处理器的毫秒数。
    • single : Boolean
      如果为True则添加一个处理器来处理下一次的事件触发（仅一次），然后移除自己。
    • buffer : Number
      使得处理器延迟指定毫秒数后预定的运行在 一个Ext.util.DelayedTask中 。 如果事件在时间内再一次被触发，原始的处理器不会被调用，但是新的处理器会预定的在他的位置上。
    • target : Observable
      如果事件在目标的Observable上触发则仅仅调用处理器， 否则 事件会从子类的Observable上冒泡

    组合选项
    使用这些选项参数,可能会组合出不同类型的监听器：

    一个延迟的，一次性的监听器。

    myDataView.on('click', this.onClick, this, {
single: true,
delay: 100
});

    一次调用附加多个处理器
    该方法同样支持传递一个包含指定的多个处理器的属性的配置对象参数。

    myGridPanel.on({
'click' : {
    fn: this.onClick,
    scope: this,
    delay: 100
},
'mouseover' : {
    fn: this.onMouseOver,
    scope: this
},
'mouseout' : {
    fn: this.onMouseOut,
    scope: this
}
});

    或者一个简写的语法：

    myGridPanel.on({
'click' : this.onClick,
'mouseover' : this.onMouseOver,
'mouseout' : this.onMouseOut,
 scope: this
});
返回值:
  • void
Observable
applyToMarkup ( String/HTMLElement el ) : void
将此组件添加到已存在的有效的HTML标签中。 使用该方法时，无需再调用render()方法。
将此组件添加到已存在的有效的HTML标签中。 使用该方法时，无需再调用render()方法。
参数:
  • el : String/HTMLElement
返回值:
  • void
Component
clearInvalid () : void
清除当前表单项上的所有非法styles/messages(样式/消息)
清除当前表单项上的所有非法styles/messages(样式/消息)
参数:
  • 无。
返回值:
  • void
Field
cloneConfig ( Object overrides ) : Ext.Component
默认使用原先传递给当前实例的配置值克隆当前组件。
默认使用原先传递给当前实例的配置值克隆当前组件。
参数:
  • overrides : Object
    一个新的配置项，包含需要覆盖到克隆版本的所有属性。 可以传递一个id参数给此对象，否则将自动生成一个新的id以避免发生重复。
返回值:
  • Ext.Component
    当前组件的克隆副本
Component
destroy () : void
通过如下方法销毁对象：删除所有的事件监听器、将组件的元素从DOM树中删除...
通过如下方法销毁对象：删除所有的事件监听器、将组件的元素从DOM树中删除（如果可以）、 将组件从它的 Ext.Container（如果可用）中删除、 并且将它从Ext.ComponentMgr中 注销。 销毁操作一般由框架自动完成，一般情况下不需要直接调用该方法。
参数:
  • 无。
返回值:
  • void
Component
disable () : Ext.Component
将组件置为无效状态，并出发'disable'事件。
将组件置为无效状态，并出发'disable'事件。
参数:
  • 无。
返回值:
  • Ext.Component
    this
Component
enable () : Ext.Component
将组件置为有效状态并触发'enable'事件。
将组件置为有效状态并触发'enable'事件。
参数:
  • 无。
返回值:
  • Ext.Component
    this
Component
enableBubble( String/Array events ) :void
是否现在使得事件会被该Observable触发并调用 this.getBubbleTarget()方法在拥有者的继承树...

是否现在使得事件会被该Observable触发并调用 this.getBubbleTarget()方法在拥有者的继承树中冒泡。Observable的基础类中没有该方法的实现。

该方法一般被Ext.Components用来冒泡事件到拥有者的容器。参看Ext.Component.getBubbleTarget默认的实现 在Ext.Component中返回组件的直接拥有者。但是如果需要的是一个已知的目标，该方法可以被重写来更快的访问需求的目标。

例子:

Ext.override(Ext.form.Field, {
    // 添加方法到Field的initComponent上改变事件为冒泡
    initComponent : Ext.form.Field.prototype.initComponent.createSequence(function() {
        this.enableBubble('change');
    }),

    // 我们知道我们想让Field的事件冒泡到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() {
            // 如果样式被修改标题会变红。
            myForm.header.setStyle('color', 'red');
        }
    }
});
参数:
  • events : String/Array
    冒泡的事件名，或事件名数组
返回值:
  • void
Observable
findParentBy ( Function fn ) : Ext.Container
通过自定义的函数查找当前组件上层任何层次上的容器...
通过自定义的函数查找当前组件上层任何层次上的容器。 如果传递的函数返回true，容器对象将被返回。
参数:
  • fn : Function
    自定义的函数，使用如下参数调用(container,this component)。
返回值:
  • Ext.Container
    自定义函数返回true的第一个容器
Component
findParentByType ( String/Class xtype ) : Ext.Container
通过xtype或者class查找当前组件上层任何层次上的容器
通过xtype或者class查找当前组件上层任何层次上的容器
参数:
  • xtype : String/Class
    组件的xtype字符串，或者直接是组件的class
返回值:
  • Ext.Container
    符合指定xtype或者class的第一个容器
Component
fireEvent( String eventName, Object... args ) : Boolean
用传入的参数触发指定的事件 (减去事件名)。 一个事件可以被设置为冒泡 Obse...

用传入的参数触发指定的事件 (减去事件名)。

一个事件可以被设置为冒泡到Observable父类继承树(参看 Ext.Component.getBubbleTarget) 调用enableBubble实现。

参数:
  • eventName : String
    触发的事件名。
  • args : Object...
    传递给处理器的可变长度参数。
返回值:
  • Boolean
    如果有任何的处理器返回false则返回false，否则返回true。
Observable
focus ( [ Boolean selectText ], [ Boolean/Number delay ] ) : Ext.Component
尝试将当前组件设为焦点。
尝试将当前组件设为焦点。
参数:
  • selectText : Boolean
    (可选) 如果可用，同时选中组件内部的文本
  • delay : Boolean/Number
    (可选)将当前组件设置为焦点的延迟时间(设置为true等于0毫秒)
返回值:
  • Ext.Component
    this
Component
getActiveError () : String
获取当前表单项活动的出错消息。
获取当前表单项活动的出错消息。
参数:
  • 无。
返回值:
  • String
    返回表单项上活动的出错消息，如果没有错误，返回一个空字符串。
Field
getBox ( [ Boolean local ] ) : Object
获取组件底层元素当前盒子模型的尺寸。（译者注：盒子模型是CSS术语，详细解释请自行搜索。）
获取组件底层元素当前盒子模型的尺寸。（译者注：盒子模型是CSS术语，详细解释请自行搜索。）
参数:
  • local : Boolean
    (可选)值为true时，组件的left值和top值将代替页面的XY被返回。(默认值为false)
返回值:
  • Object
    返回值的格式{x, y, width, height}
BoxComponent
getBubbleTarget () : Ext.Container
为Observable的fireEvent方法提供链接，它沿着继承结构进行冒泡操作。
为Observable的fireEvent方法提供链接，它沿着继承结构进行冒泡操作。
参数:
  • 无。
返回值:
  • Ext.Container
    拥有当前组件的容器。
Component
getEl () : Ext.Element
返回 Ext.Element ，它包装了当前组件。...

返回 Ext.Element ，它包装了当前组件。

通常情况下，这将是一个<DIV>元素，它是由该类的onRender方法创建的， 但是可以使用autoEl配置项 覆盖它。

注意: 此元素将会一直处于无效状态直到当前组件渲染完成。

如需向当前组件的 DOM事件(而不是当前组件自己的Observable事件)添加监听器， 更多建议，参见 listeners 配置项，或者直接使用一个render监听器:

new Ext.Panel({
    title: 'The Clickable Panel',
    listeners: {
        render: function(p) {
            // Append the Panel to the click handler's argument list.
            p.getEl().on('click', handlePanelClick.createDelegate(null, [p], true));
        },
        single: true  // Remove the listener after first invocation
    }
});
参数:
  • 无。
返回值:
  • Ext.Element
    包装当前组件的元素。
Component
getErrors () : Array
运行当前表单项的校验器并返回一个所有校验错误信息数组。 此方法在校验期间在内部调用并且一般情况下...
运行当前表单项的校验器并返回一个所有校验错误信息数组。 此方法在校验期间在内部调用并且一般情况下不需要手工调用。 每个子类都应该重写或者增加返回值以提供它们自己的出错消息
参数:
  • 无。
返回值:
  • Array
    当前表单项的所有出错消息
Field
getHeight () : Number
获取该组件的当前高度值。
获取该组件的当前高度值。
参数:
  • 无。
返回值:
  • Number
BoxComponent
getId () : String
返回当前组件的id，如果没有定义id，则自动生成并返回一个id:'ext-comp-'...
返回当前组件的 id 如果没有定义 id 则自动生成并返回一个 id

'ext-comp-' + (++Ext.Component.AUTO_ID)
参数:
  • 无。
返回值:
  • String
    id
Component
getItemId () : String
返回当前组件的 itemId 。 如果没有通过配置参数指定 itemId 那么，将会使用...
返回当前组件的 itemId 。 如果没有通过配置参数指定 itemId 那么，将会使用 getId 返回 id 。
参数:
  • 无。
返回值:
  • String
Component
getName () : String
如果可用，返回表单项的 name 或者 hiddenName 属性。
如果可用，返回表单项的 name 或者 hiddenName 属性。
参数:
  • 无。
返回值:
  • String
    name 表单项的{@link Ext.form.Field#name name}或者{@link Ext.form.ComboBox#hiddenName hiddenName}
Field
getOuterSize () : Object
获取当前组件所在元素的尺寸大小，包括边缘的空白处。
获取当前组件所在元素的尺寸大小，包括边缘的空白处。
参数:
  • 无。
返回值:
  • Object
    一个包含元素大小的对象 {width: (element width + left/right margins), height: (element height + top/bottom margins)}
BoxComponent
getPosition ( [ Boolean local ] ) : Array
获取组件底层元素当前的XY位置。
获取组件底层元素当前的XY位置。
参数:
  • local : Boolean
    (可选)如果为true，将返回元素的left和top值，而不是相对于页面内的 XY。(默认值为 false)
返回值:
  • Array
    元素的XY位置值(例如：[100, 200])
BoxComponent
getRawValue () : Mixed
返回原始数据值，可能不是一个合法的、已定义的值。 返回格式化的值参见...
返回原始数据值，可能不是一个合法的、已定义的值。 返回格式化的值参见 getValue。
参数:
  • 无。
返回值:
  • Mixed
    value 表单项的值
Field
getResizeEl () : Ext.Element
返回该组件的最外层用来定义这些组件整体大小的Element...

返回该组件的最外层用来定义这些组件整体大小的Element对象。

通常用 getEl 方法将会返回相同的Element对象，但在有些情况下，组件可能有一些更多的封装了它的主要动态Element对象的Element对象。

例如ComboBox。它是封装在一个包含<input>元素的包装元素里(这将返回其 getEl方法和触发按钮的元素)。返回的元素为resizeEl。

参数:
  • 无。
返回值:
  • Ext.Element
    The Element which is to be resized by size managing layouts.
BoxComponent
getSize () : Object
获取组件底层元素当前的大小。
获取组件底层元素当前的大小。
参数:
  • 无。
返回值:
  • Object
    一个包含元素大小的对象{width: (element width), height: (element height)}
BoxComponent
getValue () : Mixed
返回格式化的数据值(undefined或者emptyText将会以''返回)。 如需返回原始值，参见...
返回格式化的数据值(undefined或者emptyText将会以''返回)。 如需返回原始值，参见 getRawValue。
参数:
  • 无。
返回值:
  • Mixed
    value 表单项的值
Field
getWidth () : Number
获取该组件的当前宽度值。
获取该组件的当前宽度值。
参数:
  • 无。
返回值:
  • Number
BoxComponent
getXType () : String
获取当前组件的xtype，它是用 Ext.ComponentMgr 注册的。 所有可用的xtype列表，参见...
获取当前组件的xtype，它是用 Ext.ComponentMgr 注册的。 所有可用的xtype列表，参见 Ext.Component 类头部。示例用法:

var t = new Ext.form.TextField();
alert(t.getXType());  // alerts 'textfield'
参数:
  • 无。
返回值:
  • String
    The xtype
Component
getXTypes () : String
返回此组件的xtype继承树，用字符'-'分隔。 所有可用的xtype值...

返回此组件的xtype继承树，用字符'-'分隔。 所有可用的xtype值，请参见Ext.Component 类的头部。

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

示例用法:

var t = new Ext.form.TextField();
alert(t.getXTypes());  // alerts 'component/box/field/textfield'
参数:
  • 无。
返回值:
  • String
    xtype层次字符串
Component
hasListener( String eventName ) : Boolean
检测对象是否包含指定事件的任何监听器
检测对象是否包含指定事件的任何监听器
参数:
  • eventName : String
    检测的事件名
返回值:
  • Boolean
    如果事件被监听则为true，否则为false
Observable
hide () : Ext.Component
隐藏当前组件。 监听 beforehide' 事件并且返回false 可以取消隐藏组件的操作。 在隐藏组件之后触发...
隐藏当前组件。 监听 beforehide' 事件并且返回false 可以取消隐藏组件的操作。 在隐藏组件之后触发 ' hide' 事件。 如果组件被配置成 hidden 那么此方法在内部被调用。
参数:
  • 无。
返回值:
  • Ext.Component
    this
Component
isDirty () : Boolean
如果此表单项的值与原始值相比发生了改变，返回true。 如果表单项...

如果此表单项的值与原始值相比发生了改变，返回true。 如果表单项被禁用或者尚未被渲染将会返回false。

注意，如果所属的 form 配置了一个Ext.form.BasicForm， 那么在使用Ext.form.BasicForm. setValues 加载值之后，原始值将会被更新。

参数:
  • 无。
返回值:
  • Boolean
    如果此表单项的值与原始值相比发生了改变(并且没有被禁用)，返回true，其它返回false。
Field
isValid ( Boolean preventMark ) : Boolean
通过 校验 表单项 处理后的值 ，返回表单项当前值是否合法。...
通过 校验 表单项 处理后的值 ，返回表单项当前值是否合法。 注意: disabled 的表单项将会被忽略。
参数:
  • preventMark : Boolean
    True将会禁止把表单项标记为非法
返回值:
  • Boolean
    如果值是合法的，为true，其它为false
Field
isVisible () : Boolean
如果当前组件可见，返回true。
如果当前组件可见，返回true。
参数:
  • 无。
返回值:
  • Boolean
    如果当前组件可见，返回true，其它返回false。
Component
isXType ( String xtype , [ Boolean shallow ] ) : Boolean
Tests whether or not this Component is of a specific xtype. This can test whether this Component is descended from th...

测试此组件是否是指定的xtype。此方法既可以测试是否是指定的xtype的某个子类， 或者它是否直接是指定的xtype类(shallow=true)。

如果使用你自己的子类，必须知道组件必须注册它的xtype值。

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

示例用法:

var t = new Ext.form.TextField();
var isText = t.isXType('textfield');        // true
var isBoxSubclass = t.isXType('box');       // true, descended from BoxComponent
var isBoxInstance = t.isXType('box', true); // false, not a direct BoxComponent instance
参数:
  • xtype : String
    需要为当前组件进行检测的xtype
  • shallow : Boolean
    (可选) 如果为false，检测组件是否是xtype继承树中的某个子类（默认是这种情况）， 如果为true，只检测组件是否是指定的xtype类型。
返回值:
  • Boolean
    如果当前组件是指定xtype的子类，返回true，其它返回flase。
Component
markInvalid ( [ String msg ] ) : void
显示一个关联到当前表单项的出错信息， 使用msgTarget 来决定如何显示消息并将...

显示一个关msgTarget 来决定如何显示消息并将 invalidClass 应用到表单项的UI元素上。

注意: 如果表单项的值确实通过了校验， 此方法不会导致表单项的 validate 方法返回 false 。 所以简单地把一个表单项标记为非法并不会阻止表单项 通过设置的 Ext.form.Action.Submit.clientValidation 被提交。

invalid.
参数:
  • msg : String
    (可选)校验信息(默认为invalidText)
返回值:
  • void
Field
mon ( Observable|Element item , Object|String ename , Function fn , Object scope , Object opt ) : void
向任何Observable对象(或者元素)上添加监听器，监听器将会在组件...

向任何Observable对象(或者元素)上添加监听器，监听器将会在组件销毁时被自动删除。
用法：

myGridPanel.mon(myGridPanel.getSelectionModel(), 'selectionchange', handleSelectionChange, null, {buffer: 50});

or:

myGridPanel.mon(myGridPanel.getSelectionModel(), {
    selectionchange: handleSelectionChange,
    buffer: 50
});
参数:
  • item : Observable|Element
    需要添加listener/listeners的项目。
  • ename : Object|String
    事件名，或者一个包含事件名属性的对象。
  • fn : Function
    (可选) 如果 ename 参数是一个事件名，此参数为处理函数。
  • scope : Object
    (可选)如果 ename 参数是一个事件名称，此参数是作用域 ( this 引用)，监听函数将会在此作用域中被执行。
  • opt : Object
    (可选)如果 ename 参数是一个事件名称， 此参数是 addListener 配置项。
返回值:
  • void
Component
mun ( Observable|Element item , Object|String ename , Function fn , Object scope ) : void
删除通过mon 方法添加的监听器。
删除通过mon 方法添加的监听器。
参数:
  • item : Observable|Element
    需要删除listener/listeners的项目。
  • ename : Object|String
    事件名称，或者一个包含事件名称属性的对象。
  • fn : Function
    (可选)如果 ename 参数是一个事件名称，此参数是一个处理函数。
  • scope : Object
    (可选)如果 ename 参数是一个事件名称，此参数是作用域 ( this 引用)，监听函数将会在此作用域中被执行。
返回值:
  • void
Component
nextSibling () : Ext.Component
返回所属容器中的下一个组件
返回所属容器中的下一个组件
参数:
  • 无。
返回值:
  • Ext.Component
Component
on( String eventName, Function handler, [Object scope], [Object options] ) : void
给对象添加事件处理器 (addListener的简写形式)
给对象添加事件处理器 (addListener的简写形式。)
参数:
  • eventName : String
    监听的事件类型
  • handler : Function
    事件调用的方法
  • scope : Object
    （可选）处理方法执行时的作用域 (this 的引用)。 如果被忽略。默认为触发事件的对象。
  • options : Object
    可选 包含处理器配置的对象。
返回值:
  • void
Observable
previousSibling () : Ext.Component
返回所属容器中的前一个组件
返回所属容器中的前一个组件
参数:
  • 无。
返回值:
  • Ext.Component
Component
processValue ( Mixed value ) : void
仅仅在需要准备原始值供校验时，才需要覆盖此方法(参见 validate和 isValid)。...
仅仅在需要准备原始值供校验时，才需要覆盖此方法(参见 validate和 isValid)。 此方法被期望为表单项返回处理后的值，此值将会被用来进行校验 (参见validateValue方法)。
参数:
  • value : Mixed
返回值:
  • void
Field
purgeListeners() : void
移除对象上所有的监听器
移除对象上所有的监听器
参数:
  • 无。
返回值:
  • void
Observable
relayEvents( Object o, Array events ) : void
从指定的Observable上传递选择的事件就好像被当前对象触发一样。
从指定的Observable上传递选择的事件就好像被当前对象触发一样。
参数:
  • o : Object
    该Observable上的事件被当前对象传递。
  • events : Array
    传递的数组名。
返回值:
  • void
Observable
removeClass ( string cls ) : Ext.Component
从组件底层的元素上删除一个CSS类。
从组件底层的元素上删除一个CSS类。
参数:
  • cls : string
    需要移除的CSS类名
返回值:
  • Ext.Component
    this
Component
removeListener( String eventName, Function handler, [Object scope] ) : void
删除一个事件处理器。
删除一个事件处理器。
参数:
  • eventName : String
    处理器关联的事件类型。
  • handler : Function
    移除的处理器。 这应该是传递到addListener里的方法的引用。
  • scope : Object
    （可选）处理器指定的初始作用域。
返回值:
  • void
Observable
render ( [ Element/HTMLElement/String container ], [ String/Number position ] ) : void
在传递进来的HTML元素中渲染当前组件。...

在传递进来的HTML元素中渲染当前组件。

如果你正在使用一个Container 对象放置当前组件，那么请不要使用render方法。

当容器第一次被渲染时，它的子组件将会被容器的 layout 管理器渲染。

某些布局管理器允许动态添加子组件。它们包括 Ext.layout.CardLayout, Ext.layout.AnchorLayout, Ext.layout.FormLayout, Ext.layout.TableLayout。

当一个新的子组件被添加时，如果容器已经被渲染了， 你可能需要调用容器的 doLayout 方法来刷新视图，它将导致所有没有被渲染的子组件进行渲染操作。 此操作是必须的，这样你可以添加多个子组件而只刷新一次layout。

当创建复杂的UI时，非常重要的一点是，请记住调整子项目的尺寸和位置是容器的 layout 管理器的职责。 如果你希望子项目的尺寸对用户交互作出反应， 你必须为容器配置一个布局管理器，它将创建和管理你心里想要的那种布局。

忽略容器的layout 配置意味着将会使用一个基本的布局管理器，它除了按次序把子组件 渲染到容器中之外什么事情都不做。 这种情况下，任何尺寸和位置的调整操作都不会发生。

参数:
  • container : Element/HTMLElement/String
    (可选) 需要在其中渲染当前组件的元素。 如果它是从一个已存在的标签中创建的，此参数应该被忽略。
  • position : String/Number
    (可选) 容器中的一个元素ID或者一个DOM节点索引， 当前组件将会被插入到它前面 (默认append到容器的尾部)
返回值:
  • void
Component
reset () : void
将表单项的当前值重置为以前加载时的值，并且清除所有校验信息。...
将表单项的当前值重置为以前加载时的值，并且清除所有校验信息。 参见Ext.form.BasicForm. trackResetOnLoad 。
参数:
  • 无。
返回值:
  • void
Field
resumeEvents() : void
重新开始触发事件。(参见suspendEvents) 如果事件以queueSuspended参数被挂起，则在事件被挂起时 ...
重新开始触发事件。(参见 suspendEvents) 如果事件以queueSuspended 参数被挂起，则在事件被挂起时触发的事件会被传递到所有的监听器上
参数:
  • 无。
返回值:
  • void
Observable
setActiveError ( String msg , Boolean suppressEvent ) : void
将当前activeError设置为所给的字符串。 触发'invalid'事件。这不会设置出错图标...
将当前activeError设置为所给的字符串。 触发'invalid'事件。这不会设置出错图标，仅仅设置消息并触发事件。 如需显示出错图标，可使用markInvalid代替，它将在内部调用此方法。
参数:
  • msg : String
    出错消息
  • suppressEvent : Boolean
    True将会禁止触发'invalid'事件
返回值:
  • void
Field
setAutoScroll ( Boolean scroll ) : Ext.BoxComponent
设置该组件内容溢出时是否自动显示滚动条。
设置该组件内容溢出时是否自动显示滚动条。
参数:
  • scroll : Boolean
    值为true的话组件自动显示滚动条。
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setDisabled ( Boolean disabled ) : Ext.Component
工具函数，使用布尔值设置有效/无效(disabled/enabled )。
工具函数，使用布尔值设置有效/无效(disabled/enabled )。
参数:
  • disabled : Boolean
返回值:
  • Ext.Component
    this
Component
setHeight ( Mixed height ) : Ext.BoxComponent
设置此组件的高度。该方法将触发resize事件。
设置此组件的高度。该方法将触发resize事件。
参数:
  • height : Mixed
    The new height to set.
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setPagePosition ( Number x , Number y ) : Ext.BoxComponent
设置组件在页面中的XY位置。 如果需要设置left和top值 ，请使用...
设置组件在页面中的XY位置。 如果需要设置left和top值 ，请使用setPosition方法。 该方法触发move事件。
参数:
  • x : Number
    The new x position
  • y : Number
    The new y position
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setPosition ( Number left , Number top ) : Ext.BoxComponent
设置组件的left和top值。设置组件的页面XY值，请使用setPagePosition方法。该方法触发...
设置组件的left和top值。设置组件的页面XY值，请使用setPagePosition方法。该方法触发move事件。
参数:
  • left : Number
    The new left
  • top : Number
    The new top
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setRawValue ( Mixed value ) : Mixed
绕过校验，直接设置底层DOM表单项的值。 设置值并进行校验，参见 setValue。
绕过校验，直接设置底层DOM表单项的值。 设置值并进行校验，参见 setValue。
参数:
  • value : Mixed
    需要设置的值
返回值:
  • Mixed
    value 被设置的表单项值
Field
setReadOnly ( Boolean readOnly ) : void
设置当前表单项的只读状态。
设置当前表单项的只读状态。
参数:
  • readOnly : Boolean
    表单项是否应该只读。
返回值:
  • void
Field
setSize ( Mixed width , Mixed height ) : Ext.BoxComponent
设置BoxComponent的宽度和高度。 此方法触发resize事件...
设置BoxComponent的宽度和高度。 此方法触发resize事件。此方法可以接收单独的width或者height值作为参数， 或者你可以传递像这样的一个size对象： {width:10, height:20} 。
参数:
  • width : Mixed
    设置的新的width值。这可以是：
    • 一个Number类型指定Element新的宽度 Ext.Element.defaultUnit(默认为像素 :'px')。
    • 一个String类型用于设置width的CSS样式。
    • 一个size对象格式为 {width: widthValue, height: heightValue} 。
    • 值为 undefined 时，保留原来的width不变。
  • height : Mixed
    设置的新的height值(如果第一个参数传递了一个size对象，此参数没有必要传递)。这可以是：
    • 一个Number类型指定Element新的高度 Ext.Element.defaultUnit(默认为像素 :'px')。
    • 一个String类型用于设置height的CSS样式。也有可能不会被使用到。
    • 值为 undefined 时，保留原来的height不变。
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setValue ( Mixed value ) : Ext.form.Field
向表单项中设置一个数据值并校验之。 如需直接设置值而不进行校验，参见 setRawValue。
向表单项中设置一个数据值并校验之。 如需直接设置值而不进行校验，参见 setRawValue。
参数:
  • value : Mixed
    需要设置的值
返回值:
  • Ext.form.Field
    this
Field
setVisible ( Boolean visible ) : Ext.Component
工具方法，通过使用布尔值隐藏或者显示当前组件。
工具方法，通过使用布尔值隐藏或者显示当前组件。
参数:
  • visible : Boolean
    true时显示，false时隐藏
返回值:
  • Ext.Component
    this
Component
setWidth ( Mixed width ) : Ext.BoxComponent
设置组件的宽度。 此方法触发resize事件。
设置组件的宽度。 此方法触发resize事件。
参数:
  • width : Mixed
    The new width to set.
返回值:
  • Ext.BoxComponent
    this
BoxComponent
show () : Ext.Component
显示当前组件。监听' beforeshow' 事件，返回 false 取消显示组件...
显示当前组件。监听' beforeshow' 事件，返回 false 取消显示组件。在显示组件之后触发' show' 事件。
参数:
  • 无。
返回值:
  • Ext.Component
    this
Component
suspendEvents( Boolean queueSuspended ) : void
暂停触发所有的事件。 (参看resumeEvents)
暂停触发所有的事件。（参看 resumeEvents)
参数:
  • queueSuspended : Boolean
    如果传递为true则排列好暂停的事件使得在调用 resumeEvents 后再触发它们，而不是抛弃所有暂停的事件。
返回值:
  • void
Observable
syncSize () : Ext.BoxComponent
强制组件的大小按照此组件底层元素当前的高度和宽度计算。
强制组件的大小按照此组件底层元素当前的高度和宽度计算。
参数:
  • 无。
返回值:
  • Ext.BoxComponent
    this
BoxComponent
un( String eventName, Function handler, [Object scope] ) : void
删除一个事件处理器(removeListener方法的简写形式)
删除一个事件处理器(removeListener方法的简写形式。)
参数:
  • eventName : String
    处理器关联的事件类型
  • handler : Function
    被删除的处理器 这应该是传入 addListener 中的方法的引用。
  • scope : Object
    （可选）为处理器指定的初始作用域。
返回值:
  • void
Observable
unsetActiveError ( Boolean suppressEvent ) : void
清除activeError并触发'valid'事件。此方法被clearInvalid在内部进行...
清除activeError并触发'valid'事件。此方法被clearInvalid在内部进行调用， 并且一般情况下没有必要手工调用
参数:
  • suppressEvent : Boolean
    True将禁止触发'invalid'事件
返回值:
  • void
Field
update ( Mixed htmlOrData , [ Boolean loadScripts ], [ Function callback ] ) : void
刷新组件的内部区域。
刷新组件的内部区域。
参数:
  • htmlOrData : Mixed
    如果已经通过tpl为当前组件配置了一个模板，那么 将会使用此参数来装配模板。 如果没有为当前组件配置模板，组件的内容区域将会通过Ext.Element 进行刷新。
  • loadScripts : Boolean
    (可选)只用在使用html配置时此参数才合法。默认为false。
  • callback : Function
    (可选)只用在使用html配置时此参数才合法。 当脚本加载完成时回调函数才被执行。
返回值:
  • void
Component
updateBox ( Object box ) : Ext.BoxComponent
设置此组件底层元素的盒子模型尺寸。(译者注：盒子模型是CSS术语，详细资料请自行搜索。)
设置此组件底层元素的盒子模型尺寸。(译者注：盒子模型是CSS术语，详细资料请自行搜索。)
参数:
  • box : Object
    一个格式为{x, y, width, height}的对象
返回值:
  • Ext.BoxComponent
    this
BoxComponent
validate () : Boolean
校验表单项的值
校验表单项的值
参数:
  • 无。
返回值:
  • Boolean
    如果值合法，为true,否则为false
Field
validateValue ( Mixed The ) : Boolean
使用getErrors创建一个校验出错信息数组。 如果发现了任何错误，将会使用第一个错误作为参数...
使用getErrors创建一个校验出错信息数组。 如果发现了任何错误，将会使用第一个错误作为参数调用markInvalid方法并返回 false，否则返回true。以前，要求子类提供此方法的一个实现以处理校验过程--- 从3.2开始，应该用覆盖getErrors方法的方式替代。
参数:
  • The : Mixed
    表单项的当前值
返回值:
  • Boolean
    如果所有校验都通过，此值为true，如果一个或多个校验失败，则为false
Field

公共事件

Event Defined By
added : ( Ext.Component this , Ext.Container ownerCt , number index )
当一个组件被添加到一个Ext.Container时触发
当一个组件被添加到一个Ext.Container时触发
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • ownerCt : Ext.Container
    用于组件的容器
  • index : number
    添加组件的位置
Component
afterrender : ( Ext.Component this )
在组件渲染完成之后触发...

在组件渲染完成之后触发。

afterrender事件在当前组件被rendered 结束之后、在为组件定义的所有afterRender方法执行之后 触发，并且，如果有stateful， 也在状态被保存之后才触发。

监听器将会以如下参数格式被调用:
  • this : Ext.Component
Component
beforedestroy : ( Ext.Component this )
在组件 destroyed 之前触发。 在事件监听器中返回false以停止 destroy 操作。
在组件 destroyed 之前触发。 在事件监听器中返回false以停止 destroy 操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforehide : ( Ext.Component this )
在调用hide方法隐藏组件之前触发。 在事件监听器中返回false可以停止隐藏操作。
在调用hide方法隐藏组件之前触发。 在事件监听器中返回false可以停止隐藏操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforerender : ( Ext.Component this )
在组件被rendered 之前触发。 在事件监听器中返回false可以停止render 操作。
在组件被rendered 之前触发。 在事件监听器中返回false可以停止render 操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforeshow : ( Ext.Component this )
在调用show()方法现实组件之前触发。 事件处理函数返回false可以停止show。
在调用show 方法现实组件之前触发。 事件处理函数返回false可以停止show。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforestaterestore : ( Ext.Component this , Object state )
在组件状态恢复之前触发。返回false停止恢复状态操作。
在组件状态恢复之前触发。返回false停止恢复状态操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    StateProvider返回的状态哈希值。 如果没有禁止此事件，那么状态对象会被传递给applyState。 默认情况下，这样简单地把属性值拷贝到当前组件中。 可以覆盖此方法以提供自定的状态恢复操作。
Component
beforestatesave : ( Ext.Component this , Object state )
在组件状态被保存到配置的状态提供者之前触发。 返回false可以停止保存。
在组件状态被保存到配置的状态提供者之前触发。 返回false可以停止保存。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    状态值哈希。 这由在组件上调用getState() 方法决定。 此方法必须由开发者提供，返回是否需要对状态进行描述，默认情况下， Ext.Component有一个空实现。
Component
blur : ( Ext.form.Field this )
当表单项时区输入焦点时触发。
当表单项时区输入焦点时触发。
监听器将会以如下参数被调用:
  • this : Ext.form.Field
Field
change : ( Ext.form.Field this , Mixed newValue , Mixed oldValue )
如果表单项的时发生改变，在表单项刚刚失去焦点时触发。
如果表单项的时发生改变，在表单项刚刚失去焦点时触发。
监听器将会以如下参数格式调用:
  • this : Ext.form.Field
  • newValue : Mixed
    新的值
  • oldValue : Mixed
    原始值
Field
destroy : ( Ext.Component this )
在组件被销毁之后触发。
在组件被destroyed之后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
disable : ( Ext.Component this )
在组件被设置为无效状态后触发。
在组件被设置为无效状态后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
enable : ( Ext.Component this )
当组件被设置为有效(enabled)之后触发。
当组件被设置为有效(enabled)之后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
focus : ( Ext.form.Field this )
当表单项获得输入焦点时触发。
当表单项获得输入焦点时触发。
监听器将会以如下参数格式被调用:
  • this : Ext.form.Field
Field
hide : ( Ext.Component this )
在组件被隐藏之后触发。 当调用hide 方法隐藏组件之后触发。
在组件被隐藏之后触发。 当调用hide 方法隐藏组件之后触发。
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
invalid : ( Ext.form.Field this , String msg )
在表单项被标记为非法之后触发。
在表单项被标记为非法之后触发。
监听器将会以如下参数格式调用:
  • this : Ext.form.Field
  • msg : String
    校验信息
Field
move : ( Ext.Component this , Number x , Number y )
在组件移动之后触发。
在组件移动之后触发。
监听器将会用如下的参数格式来调用:
  • this : Ext.Component
  • x : Number
    The new x position
  • y : Number
    The new y position
BoxComponent
removed : ( Ext.Component this , Ext.Container ownerCt )
当一个组件被从Ext.Container容器中删除时触发
当一个组件被从Ext.Container容器中删除时触发
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • ownerCt : Ext.Container
    持有组件的容器
Component
render : ( Ext.Component this )
在组件被渲染之后触发。
在组件被 rendered(渲染) 之后触发。
监听器将以如下的参数格式被调用:
  • this : Ext.Component
Component
resize : ( Ext.Component this , Number adjWidth , Number adjHeight , Number rawWidth , Number rawHeight )
在组件被调整大小之后触发。
在组件被调整大小之后触发。
监听器将以如下的参数格式被调用:
  • this : Ext.Component
  • adjWidth : Number
    这是width调整后的值
  • adjHeight : Number
    这是height调整后的值
  • rawWidth : Number
    这是width原来的值
  • rawHeight : Number
    这是height原来的值
BoxComponent
show : ( Ext.Component this )
在调用show 方法显示组件之后触发。
在调用show 方法显示组件之后触发。
监听器将会用如下的参数格式被调用:
  • this : Ext.Component
Component
specialkey : ( Ext.form.Field this , Ext.EventObject e )
当任何和导航有关的键被按下时触发(上下左右箭头, tab, 回车,esc, 等等) is pressed. 处理其它按键参见...
当任何和导航有关的键被按下时触发(上下左右箭头, tab, 回车,esc, 等等) is pressed. 处理其它按键参见 Ext.Panel.keys或者 Ext.KeyMap。 你可以检测 Ext.EventObject.getKey 以便获知哪个键被按下。例如：
var form = new Ext.form.FormPanel({
    ...
    items: [{
            fieldLabel: 'Field 1',
            name: 'field1',
            allowBlank: false
        },{
            fieldLabel: 'Field 2',
            name: 'field2',
            listeners: {
                specialkey: function(field, e){
                    // e.HOME, e.END, e.PAGE_UP, e.PAGE_DOWN,
                    // e.TAB, e.ESC, arrow keys: e.LEFT, e.RIGHT, e.UP, e.DOWN
                    if (e.getKey() == e.ENTER) {
                        var form = field.ownerCt.getForm();
                        form.submit();
                    }
                }
            }
        }
    ],
    ...
});
监听器将会以如下参数格式被调用:
  • this : Ext.form.Field
  • e : Ext.EventObject
    事件对象
Field
staterestore : ( Ext.Component this , Object state )
组件状态被存储之后触发。
组件状态被存储之后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    StateProvider返回的状态哈希值。 如果没有禁止此事件，那么状态对象会被传递给applyState。 默认情况下，这样简单地把属性值拷贝到当前组件中。 可以覆盖此方法以提供自定的状态恢复操作。
Component
statesave : ( Ext.Component this , Object state )
在组件状态被保存到所配置的状态提供者之后触发。
在组件状态被保存到所配置的状态提供者之后触发。
监听器将会用如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    状态值hash。 这是由在足见上调用getState() 方法决定的。 开发者必须提供此方法以返回是否需要恢复状态，默认情况下， Ext.Component有一个空实现。
Component
valid : ( Ext.form.Field this )
在表单项被校验无错误之后触发。
在表单项被校验无错误之后触发。
监听器将会以如下参数格式被调用:
  • this : Ext.form.Field
Field


Observable
    Component
      BoxComponent
        Field
          HtmlEditor

Class Ext.form.HtmlEditor

包: | Ext.form
定义类的文件: | HtmlEditor.js
类: | HtmlEditor
继承自: | Field
提供一个轻量级的HTML文本编辑器组件。 一些工具条特性在Safari下可能不支持，在必要的时候会自动隐藏。 这些不支持的特性在配置项的适当地方会有提示。

编辑器工具按钮的tooltips定义在 buttonTips 属性中， 但是在默认情况下它们是无效的，除非全局的 Ext.QuickTips 单例对象已经被初始化initialized。

注意: 获得焦点/失去焦点以及 从Ext.form.Field继承下来的 校验标志功能在编辑器中是不支持的。

编辑器是一个敏感的组件，不能被用在那些可以使用标准表单项的地方。 将编辑器放到一个display属性被设置为'none'的元素中时， 在Safari和Firefox下面会出现问题，因为它们在重新加载默认iframe的时候存在bug。

示例用法:
//简单的例子，使用默认选项进行渲染:
Ext.QuickTips.init();  //启用tooltips
new Ext.form.HtmlEditor({
    renderTo: Ext.getBody(),
    width: 800,
    height: 300
});

//通过xtype与自定义选项一起传递到一个容器中:
Ext.QuickTips.init();  //启用tooltips
new Ext.Panel({
    title: 'HTML Editor',
    renderTo: Ext.getBody(),
    width: 600,
    height: 300,
    frame: true,
    layout: 'fit',
    items: {
        xtype: 'htmleditor',
        enableColors: false,
        enableAlignments: false
    }
});

配置项

Config Options Defined By
anchor : String
注: 这个配置只用于该组件被包含在一个已使用AnchorLayout...

注: 这个配置只用于该组件被包含在一个已使用 AnchorLayout (或者其子类)配置的Container时。 基于布局管理器，例如：

  • Ext.form.FormPanel
  • 指定 layout: 'anchor' // or 'form', or 'absolute'

参见 Ext.layout.AnchorLayout. anchor 。

BoxComponent
autoScroll : Boolean
如果值为true，将会在该元素上使用overflow:'auto'配置，并且在必要的时候...
如果值为true，将会在该元素上使用overflow:'auto'配置，并且在必要的时候自动显示滚动条，否则，溢出部分的组件都会被切除(默认值为 false)。
BoxComponent
autoShow : Boolean
如果组件需要检测隐藏CSS属性(如 'x-hidden' 或者 'x-hide-display')并且在渲染时删除...
如果组件需要检测隐藏CSS属性(如 'x-hidden' 或者 'x-hide-display')并且在渲染时删除它们 (默认为false)，设置此值为true。
Component
boxMaxHeight : Number
设置组件的最大高度值...

设置组件的最大高度值。

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

BoxComponent
boxMaxWidth : Number
设置组件的最大宽度值...

设置组件的最大宽度值。

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

BoxComponent
boxMinHeight : Number
设置组件的最小高度值...

设置组件的最小高度值。

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

BoxComponent
boxMinWidth : Number
设置组件的最小宽度值...

设置组件的最小宽度值。

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

BoxComponent
bubbleEvents : Array
一个事件数组，当这些事件被触发时，将会被冒泡到所有父容器中。参见....

一个事件数组，当这些事件被触发时，将会被冒泡到所有父容器中。参见 Ext.util.Observable.enableBubble。 默认为 []。

Component
clearCls : String
应用到特殊的clearing div的CSS类， 这个clearing div直接渲染到每个form field的包装器后面...

应用到特殊的clearing div的CSS类， 这个clearing div直接渲染到每个form field的包装器后面，以提供 清除field的功能(默认为 'x-form-clear-left')。

注意: 只有在当前组件被渲染到一个使用FormLayout 布局(例如 Ext.form.FormPanel 或者指定 layout:'form')的 容器中、或者是指定了一个fieldLabel 、或者指定isFormField=true 时此配置才有效。

另请参见 Ext.layout.FormLayout. fieldTpl。

Component
contentEl : String
(可选)指定一个已存在的HTML元素，或者一个已存在HTML元素的...

(可选)指定一个已存在的HTML元素，或者一个已存在HTML元素的 id ，它们将被用作当前组件的内容。

  • 描述 :
    此配置选项被用来将一个已存在的HTML元素 插入到一个新组件(在组件渲染之后它简单地移动DOM元素) 的layout元素中，使它成为该组件的内容。
  • 注意 :
    指定的HTML元素将被append到组件的layout元素中， 在所有配置的 HTML 被插入之后， 并且，这样的话，在render事件 被触发时，document中将不再包含此元素。
    指定的HTML元素将不会参与组件所有可能使用的 layout 过程(译者注：指这些HTML元素 不会参与布局操作)。 它仅是HTML而已。布局操作实在孩子 items 上进行的。
    添加 x-hidden 或者 x-hide-display CSS类，以防在内容渲染到panel时发生闪烁。
Component
createLinkText : String
创建链接提示框中的默认文本
HtmlEditor
ctCls : String
一个可选的外部CSS样式，添加到这个组件的容器(默认值为 '')。 这个方法对于使用标准的CSS规则...

一个可选的外部CSS样式，添加到这个组件的容器(默认值为 '')。 这个方法对于使用标准的CSS规则，为组件或它的任何一个子组件添加特定的样式非常有用。 参见 Ext.layout.ContainerLayout和 extraCls 。

注意: ctCls 默认为 ''期望如下的类，它们将指定一个默认值:

  • Box Layout : 'x-box-layout-ct'
使用一个额外的CSS类配置以上的Class，它是append到默认对象上的。例如， 对于BoxLayout (Hbox and Vbox):
                                ctCls: 'x-box-layout-ct custom-class'

Component
data : Mixed
初始化数据集，它将被应用到 tpl 上以刷新组件的内容区域。
Component
defaultLinkValue : String
创建链接提示框中的默认值(默认为http://)
HtmlEditor
defaultValue : String
放置到编辑器中的一个默认值，用来解决获得焦点的问题 (在Opera和IE6中默认为 ...
放置到编辑器中的一个默认值，用来解决获得焦点的问题 (在Opera和IE6中默认为 (Non-breaking space)， 在所有其它浏览器中为​ (Zero-width space))。
HtmlEditor
enableAlignments : Boolean
启用left,center,right对齐按钮(默认为true)
HtmlEditor
enableColors : Boolean
启用回退/高亮颜色按钮(默认值为 true)
HtmlEditor
enableFont : Boolean
启用字体选择。Safari下不可用。(默认为true)
HtmlEditor
enableFontSize : Boolean
启用增加/减少字体大小的按钮(默认为true)
HtmlEditor
enableFormat : Boolean
启用粗体、斜体和下划线按钮(默认为true)
HtmlEditor
enableLinks : Boolean
启用创建链接按钮。在Safari中不可用(默认为true)。
HtmlEditor
enableLists : Boolean
启用bullet和有限数量的按钮列表。 Safari下不可用。(默认为true)
HtmlEditor
enableSourceEdit : Boolean
启用切换到源编辑按钮。Safari下不可用。(默认为true)
HtmlEditor
fieldLabel : String
紧靠此field显示的标签文本(默认值为 '')。注意...

紧靠此field显示的标签文本(默认值为 '')。

注意:只有在当前组件被渲染到一个使用FormLayout 的容器中时，此配置才有效。 (例如 Ext.form.FormPanel 或 指定 layout:'form')。

另请参见 hideLabel 、 Ext.layout.FormLayout和 fieldTpl。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Name'
    }]
});
Component
flex : Number
注: 这个配置只用于该组件被包含在一个已使用BoxLayout配置的Container中时...

注: 这个配置只用于该组件被包含在一个已使用BoxLayout配置的Container中时。通过计算每一个子组件的flex值所占全部flex值之和的比例，来决定子组件的宽(HBoxLayout)高(VBoxlayout)。 任何子项的 flex = 0 或 flex = undefined 将不被设置(初始值大小将不被改变)。

BoxComponent
fontFamilies : Array
可用的字体族数组
HtmlEditor
height : Number
组件的高度(默认值为 auto)。注:如果想使用百分比的方式...
组件的高度(默认值为 auto)。注:如果想使用百分比的方式来设置值，请查看 Ext.Component.anchor。
BoxComponent
hidden : Boolean
如果当前组件处于隐藏状态，此值为true。Read-only。
Component
hideLabel : Boolean
true时完全隐藏label元素 ( label 和 separator)。 默认为 false。 默认情况下，即使你不指定...

true时完全隐藏label元素 ( label 和 separator)。 默认为 false。 默认情况下，即使你不指定 fieldLabel 它的空间仍然会被保留，这样这块区域会与其它确实拥有label的区域位于同一排。 讲此值设置为 true 将导致此区域不再保留此空间。

注意: 参见 clearCls 的注释。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield'
        hideLabel: true
    }]
});
Component
hideMode : String
组件如何隐藏，支持的值有： 'visibility' (css visibility), 'offsets' (位置偏移量为负值) 和...

组件如何隐藏，支持的值有： 'visibility' (css visibility), 'offsets' (位置偏移量为负值) 和 'display' (css display).

注意:一般首选默认值 'display'，因为当组件第一次显示的时候它们会自动进行布局 (隐藏的时候不会调整尺寸)。

Component
hideParent : Boolean
此值为true时，当调用hide/show方法时，将会hide和show组件的容器...
此值为true时，当调用hide/show方法时，将会hide和show组件的容器；false时将会 hide和show组件自身(默认为false)。例如，这可以用作window上隐藏按钮的一种 快捷操作，通过设置此按钮的hideParent:true，然后把它添加到window上。
Component
html : String/Object
一个HTML片段，或者一个 DomHelper 描述，用作layout元素的内容(默认为'')。...
一个HTML片段，或者一个 DomHelper 描述，用作layout元素的内容(默认为'')。 这个HTML内容在组件渲染之后才被添加，所以在 render 出发的时候，document中尚未包含此HTML。 但是这个内容将会在所有配置的 contentEl 之前被插入到body标签中。
Component
id : String
当前组件唯一的id(默认为auto-assigned id)...

当前组件唯一的id(默认为auto-assigned id)。 如果你需要在以后访问组件，而又没有一个有效的组件对象引用，那么你需要指定一个 id( 也就是，使用Ext. getCmp方法 )。

注意，此id也将被用作组件底层HTML标签的id，这些标签被渲染到页面中。 这将允许你编写基于id的CSS规则，以独立地描述指定的实例；并且，也可以通过 组件父标签的id选中子元素。

注意:为了避免与唯一的id 产生重复， 请参见 itemId 和 ref 。

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

Component
itemCls : String
注意: 只有在当前组件被渲染到一个使用FormLayout 布局的 容器中时此配置才有效...

注意: 只有在当前组件被渲染到一个使用FormLayout 布局的 容器中时此配置才有效。 (例如Ext.form.FormPanel 或者指定 layout:'form')。

一个附加的CSS类，应用到div上，包装当前field的表单元素。 如果提供了此参数， field级上的itemCls将会覆盖 container级上提供的 默认itemCls。 为itemCls指定的值将会被添加默认的 类('x-form-item')。

既然它被应用到项目的包装器上(参见 Ext.layout.FormLayout。 fieldTpl)， 它将允许你编写能应用到此field、label(如果有指定)、或者field内部任何其它元素的标准CSS规则。

注意: 参考 fieldLabel的注释。 .

示例用法:

// Apply a style to the field's label:
<style>
    .required .x-form-item-label {font-weight:bold;color:red;}
</style>

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Name',
        itemCls: 'required' //this label will be styled
    },{
        xtype: 'textfield',
        fieldLabel: 'Favorite Color'
    }]
});
Component
itemId : String
当没有可利用的对象引用时，itemId可以作为第二选择，用来获得一个组件的引用， 代替 ...

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

var c = new Ext.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'); // 与 Ext.getCmp()不同

p2 = p1.ownerCt.getComponent('p2'); // 通过兄弟对象获得引用

另请参见 id 和 ref 。

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

Component
labelSeparator : String
每个fieldLabel 文本后面现实的分隔符。 此属性可以在多个层次上进行配置...

每个fieldLabel 文本后面现实的分隔符。 此属性可以在多个层次上进行配置。优先顺序为：

  • field / component level
  • container level
  • layout level (默认为冒号 ':')
如不需要为当前field的label显示分隔符，指定一个空字符串''即可。

注意:参见 clearCls 的注释。

另请参见 hideLabel 和 Ext.layout.FormLayout。 fieldTpl。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    layoutConfig: {
        labelSeparator: '~'   // layout config has lowest priority (defaults to ':')
    },
    labelSeparator: '>>',     // config at container level
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Field 1',
        labelSeparator: '...' // field/component level config supersedes others
    },{
        xtype: 'textfield',
        fieldLabel: 'Field 2' // labelSeparator will be '='

    }]
});
Component
labelStyle : String
一个CSS样式描述字符串，它将直接应用到当前field的label上...

一个CSS样式描述字符串，它将直接应用到当前field的label上。 如果有设置，默认为容器的labelStyle值(例如 Ext.layout.FormLayout.labelStyle , 或者 '')。

注意:参见 clearCls 的注释。

另请参见 hideLabel 和 Ext.layout.FormLayout. fieldTpl。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Name',
        labelStyle: 'font-weight:bold;'
    }]
});
Component
listeners : Object
一个包含一个或多个事件处理器的配置对象，会在初始化的时候被添加到目标对象上...

一个包含一个或多个事件处理器的配置对象，会在初始化的时候被添加到目标对象上。 该配置对象应该是一个有效的监听器配置对象就像 addListener例子中指定的一样可一次附加多个处理器。

ExtJs Components上的DOM事件

一些 ExtJs Component 类导出时会选择一些DOM事件(例如 "click", "mouseover" 等等), 这通常只是在有额外的值可以被添加时发生。例如DataView类的 click事件会传递被点击的节点。也可以直接在Component的HTMLElementevent上访问DOM事件，但必需在Component被渲染后监听器才能添加到Element 上。可以按照以下步骤添加插件:

// 插件会用一个监听器配置对象进行配置。
//该组件会被添加到所有处理方法的参数列表上。
Ext.DomObserver = Ext.extend(Object, {
    constructor: function(config) {
        this.listeners = config.listeners ? config.listeners : config;
    },

    // 组件将自己传递进了插件的初始化方法里
    init: function(c) {
        var p, l = this.listeners;
        for (p in l) {
            if (Ext.isFunction(l[p])) {
                l[p] = this.createHandler(l[p], c);
            } else {
                l[p].fn = this.createHandler(l[p].fn, c);
            }
        }

        // 渲染后立即添加监听器到元素上
        c.render = c.render.createSequence(function() {
            var e = c.getEl();
            if (e) {
                e.on(l);
            }
        });
    },

    createHandler: function(fn, c) {
        return function(e) {
            fn.call(this, e, c);
        };
    }
});

var combo = new Ext.form.ComboBox({

    // 元素被点击后折叠
    plugins: [ new Ext.DomObserver({
        click: function(evt, comp) {
            comp.collapse();
        }
    })],
    store: myStore,
    typeAhead: true,
    mode: 'local',
    triggerAction: 'all'
});

Observable
margins : Object
注:此配置只用于该组件展现在一个使用BorderLayout...

注:此配置只用于该组件展现在一个使用BorderLayout 或 BoxLayout的两个子类之一作为布局的容器。

这个margins对象在该组件中的格式为：

{top: (top margin),right: (right margin),bottom: (bottom margin),left: (left margin)}

也可以是一个字符串，中间用空格分隔，margin值为数字。 把matches中每一个值的次序跟CSS中margin值的排列方式相对应：

  • 如果只有一个值，它适用于所有方面。
  • 如果有两个值，top和bottom的边框设置为第一个值，left和right设置为第二个值。
  • 如果有三个值，top设置为第一个值，left和right设置为第二个值，bottom设置为第三个值。
  • 如果有四个值，分别设置为top, right, bottom, left。

默认值:

{top:0, right:0, bottom:0, left:0}
BoxComponent
name : String
表单项的HTML name属性(默认为'')。 注意: 如果需要当前表单项自动被包含在...
表单项的HTML name属性(默认为'')。 注意: 如果需要当前表单项自动被包含在 form submit()中，必须设置此参数。
Field
overCls : String
一个可选的额外的CSS类，它将在鼠标移过元素时被添加到组件上...
一个可选的额外的CSS类，它将在鼠标移过元素时被添加到组件上，鼠标移出时 删除。(默认为'')。此属性对于在组件上，或者它的任何使用标准CSS规则的孩子节点上， 添加定制的'active' 或者 'hover'样式非常有用。
Component
pageX : Number
如果该组件被包含在一个指定位置的容器中，这个值表示页面级的x坐标值（译者注：在有滚动条的情况下这个值很有用）。
BoxComponent
pageY : Number
如果该组件被包含在一个指定位置的容器中，这个值表示页面级的y坐标值（译者注：在有滚动条的情况下这个值很有用）。
BoxComponent
plugins : Object/Array
一个对象或者一个对象数组，为组件提供特殊的功能 ...
一个对象或者一个对象数组，为组件提供特殊的功能。 对一个合法的插件唯一的要求是它含有一个init()方法， 能接收一个Ext.Component型的参数。 当组件被创建时，如果有可用的插件，组件将会调用每个插件的init方法， 并将自身的引用作为方法参数传递给它。然后，每个插件就可以调用方法或者响应组件上的事件， 就像需要的那样提供自己的功能。
Component
preventMark : Boolean
true将会禁止 把表单项标记为非法。默认为false.
Field
ptype : String
需要创建配置的ptype。 当传递一个配置对象给构造函数时...
需要创建配置的ptype。 当传递一个配置对象给构造函数时，此配置选项不会被使用。 只有在使用懒初始化的时候此配置项才会被使用， 此时Plugin不是 通过一个完整的实例组件，而是通过一个Component配置指定的。 在渲染时，将会查找ptype以决定创建何种类型的Plugin。

如果你创建自己的Plugin，你可以通过 Ext.ComponentMgr.registerPlugin 对它们进行注册，以便能利用懒初始化和渲染机制。
Component
ref : String
一个路径描述，与组件的 ownerCt 相关，它描述了把当前组件的命名引用放置到哪个父容器中去。...

一个路径描述，与组件的 ownerCt 相关，它描述了把当前组件的命名引用放置到哪个父容器中去。

祖先的坐标路径可以通过'/'字符进行分隔。 例如，将一个Toolbar Button的引用放入 拥有此Toolbar的Panel中:

var myGrid = new Ext.grid.EditorGridPanel({
    title: 'My EditorGridPanel',
    store: myStore,
    colModel: myColModel,
    tbar: [{
        text: 'Save',
        handler: saveChanges,
        disabled: true,
        ref: '../saveButton'
    }],
    listeners: {
        afteredit: function() {
//          The button reference is in the GridPanel
            myGrid.saveButton.enable();
        }
    }
});

在上面的代码中，如果 ref 是 'saveButton' ，那么引用将会被放置到Toolbar中。 ref 中的每个'/' 都会从组件的 ownerCt 向上移动一级。

另请参见 added 和 removed 事件。

Component
region : String
注: 此配置只用于该组件展现在一个布局为BorderLayout的容器中...

注: 此配置只用于该组件展现在一个布局为BorderLayout的容器中(例如指定layout:'border')。

详见Ext.layout.BorderLayout。

BoxComponent
renderTo : Mixed
该值可以是一个节点的id、一个DOM节点或者一个已存在的元素...

该值可以是一个节点的id、一个DOM节点或者一个已存在的元素， 组件将会被渲染到其中。

  • 注意 :
      如果组件不是一个Container 的子项目时， 不要使用此选项。 渲染和管理它的子项目是一个Container 的layout manager的责任。
      当使用此配置项时，无需调用render()方法。

另请参见 render 。

Component
stateEvents : Array
一个事件数组，当它们被触发时，组件需要保存自己的状态(默认值为 none)...

一个事件数组，当它们被触发时，组件需要保存自己的状态(默认值为 none)。 它们可以是任何该组件支持的事件类型，包括浏览器事件和 自定义事件(例如['click', 'customerchange'])。

对于保存和恢复组件状态的详细解释，参见 stateful

Component
stateId : String
为该组件指定的唯一的id值，它被用作管理组件状态的目的...
为该组件指定的唯一的id值，它被用作管理组件状态的目的。 (如果设定了id，默认值为组件自己的id，否则，如果组件使用自动生成的id，此值为null)。

对于保存和反解析组件状态的解释，参见 stateful 。

Component
stateful : Boolean
一个标志参数，它将引起组件在启动时尝试从一个保存的状态中恢复内部状态参数...

一个标志参数，它将引起组件在启动时尝试从一个保存的状态中恢复内部状态参数。 组件必须要么拥有一个 stateId 或者 id ，它们被分配给需要被管理的状态属性。 在跨页面加载时，不保证自动生成的id属性的稳定性， 并且，不能依赖此id来保存和恢复一个组件的相同状态。

为了保存状态的操作能够工作，状态管理器的提供者必须 被设置成一个Ext.state.Provider 的实现类，它覆盖了set 和get 方法，以便保存和恢复name/value对。 有一个内置的Ext.state.CookieProvider 可用。

为当前页面设置状态提供者:

Ext.state.Manager.setProvider(new Ext.state.CookieProvider({
    expires: new Date(new Date().getTime()+(1000*60*60*24*7)), //7 days from now
}));

当 stateEvents 配置项中其中之一的事件被触发时， 一个状态可保存的组件将试图保存其状态。

保存状态时，一个可保存状态的组件首先需要通过调用 getState 方法来序列化它的状态。 默认情况下，此函数什么事都不做。 开发者必须提供一个实现，返回一个hash对象，它描述了组件可恢复的状态。

getState方法产生的值将会传递给 Ext.state.Manager.set 方法，它使用配置的 Ext.state.Provider 来保存对象，以组件的 stateId 为key，或者，如果此值（指stateId）没有指定时， 使用它的 id 作为key。

在进行构造时，一个可保存状态的组件试图通过调用 Ext.state.Manager.get方法来 恢复它的状态，传递 stateId 或者，如果此值（指stateId）没有指定时， 使用它的 id 作为参数。

结果对象被传递给 applyState 。 applyState 的默认实现只是简单地把属性拷贝到对象中， 但是开发者可以覆盖此方法以支持更多行为。

通过向 beforestaterestore, staterestore, beforestatesave 和 statesave 事件上绑定监听器，你可以在保存和恢复状态时进行额外的处理。

Component
submitValue : Boolean
False将会清除表单项的name属性，这样在提交表单时它将不会被提交。 默认为true。
Field
tabTip : String
注: 这个配置只用于当该组件作为TabPanel的一个子项目时使用...

注: 这个配置只用于当该组件作为TabPanel的一个子项目时使用。

一个String类型的innerHTML(支持html标签)，当鼠标放在该选项上的时，显示一个tooltip。为了tips能够被渲染，Ext.QuickTips.init()必须被提前调用。
BoxComponent
tpl : Mixed
一个 Ext.Template , Ext.XTemplate 或者一个用来形成一个Ext.XTemplate的字符串数组...
一个 Ext.Template , Ext.XTemplate 或者一个用来形成一个Ext.XTemplate的字符串数组。 与 data 和 tplWriteMode 配置项协同使用。
Component
tplWriteMode : String
刷新组件的内容区域时使用的Ext.(X)Template方式。 默认为'overwrite' (参见 Ext.XTemplate.overwrite )。
刷新组件的内容区域时使用的Ext.(X)Template方式。 默认为'overwrite' (参见 Ext.XTemplate.overwrite )。
Component
value : Mixed
当前表单项的初始化值(默认为undefined).
Field
width : Number
组件的宽度(默认值为 auto)。注:如果想使用百分比的方式...
组件的宽度(默认值为 auto)。注:如果想使用百分比的方式来设置值，请查看 Ext.Component.anchor。
BoxComponent
x : Number
如果被包含在一个指定位置的容器中，这个值表示x(left)坐标值。
BoxComponent
xtype : String
需要创建配置的xtype。 当传递一个配置对象给构造函数时...
需要创建配置的xtype。 当传递一个配置对象给构造函数时，此配置选项不会被使用。 只有在使用懒初始化的时候此配置项才会被使用，此时容器的子项目不是 通过一个完整的实例组件，而是通过一个Component配置指定的。 在渲染时，将会查找xtype以决定创建何种类型的子组件。

预定义的xtype列表如下： here。

如果你继承Component创建你自己的组件，你需要使用Ext.ComponentMgr.registerType 对它们进行注册，以便利用懒初始化和渲染机制。
Component
y : Number
如果被包含在一个指定位置的容器中，这个值表示y(top)坐标值。
BoxComponent

公共属性

Property Defined By
buttonTips : Object
编辑器中按钮的工具栏tooltip对象集合。 key是绑定到此按钮的命令id...
编辑器中按钮的工具栏tooltip对象集合。 key是绑定到此按钮的命令id，值是一个合法的QuickTips对象。 例如:
{
    bold : {
        title: 'Bold (Ctrl+B)',
        text: 'Make the selected text bold.',
        cls: 'x-html-editor-tip'
    },
    italic : {
        title: 'Italic (Ctrl+I)',
        text: 'Make the selected text italic.',
        cls: 'x-html-editor-tip'
    },
    ...
HtmlEditor
el : Ext.Element
封装了当前组件的Ext.Element。 Read-only。通常情况下，这将是一个<DIV>元素，它由此类的...

封装了当前组件的Ext.Element。 Read-only。

通常情况下，这将是一个<DIV>元素，它由此类的 onRender方法创建，但是它可以通过使用 autoEl 配置项进行覆盖。

注意: 直到组件渲染完成此元素都将处于无效状态。

如需向当前组件的 DOM事件(而不是当前组件自己的Observable事件)添加监听器， 更多建议，参见 listeners 配置项，或者直接使用一个render监听器:

new Ext.Panel({
    title: 'The Clickable Panel',
    listeners: {
        render: function(p) {
            // Append the Panel to the click handler's argument list.
            p.getEl().on('click', handlePanelClick.createDelegate(null, [p], true));
        },
        single: true  // Remove the listener after first invocation
    }
});

另请参见 getEl

Component
hidden : Boolean
如果当前组件处于隐藏状态，此值为true。Read-only。
Component
initialConfig : Object
当前组件的初始化配置描述。 Read-only。
Component
label : Ext.Element
关联到当前表单项的label元素。 只有在当前表单项已经被一个Ext.layout.FormLayout ...

关联到当前表单项的label元素。 只有在当前表单项已经被一个Ext.layout.FormLayout 布局管理器渲染之后才可用。

Field
originalValue : mixed
表单项原来的值，它是在value 中配置的；或者，如果 trackResetOnLoad 设置为...
表单项原来的值，它是在value 中配置的；或者，如果 trackResetOnLoad 设置为 true 时，通过表单加载操作最后一次加载的。
Field
ownerCt : Ext.Container
组件所属的Container (默认为undefined，当前组件被添加到一个容器中时此值被自动设置)...
组件所属的Container (默认为undefined，当前组件被添加到一个容器中时此值被自动设置)。 Read-only。

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

Component
refOwner : Ext.Container
如果当前组件是一个容器的孩子，并且是通过一个 ref 配置项被注册的，则此值为 ref 引用被插入到的祖先容器。
如果当前组件是一个容器的孩子，并且是通过一个 ref 配置项被注册的，则此值为 ref 引用被插入到的祖先容器。
Component
rendered : Boolean
如果当前组件已经被渲染了，此值为true。Read-only.
Component
startValue : mixed
表单项最后一次获得焦点时所拥有的值。 这就是传递给change 事件的值...

表单项最后一次获得焦点时所拥有的值。 这就是传递给change 事件的值，此事件在值被改变并失去焦点时触发。

直到表单项被访问之前此值都是undefined 与originalValue 进行比较。

Field

公共方法

Method Defined By
HtmlEditor ( Object config )
创建一个新的HtmlEditor
创建一个新的HtmlEditor
参数:
  • config : Object
返回值:
  • void
HtmlEditor
addClass ( string cls ) : Ext.Component
为组件底层的元素添加CSS样式。
为组件底层的元素添加CSS样式。
参数:
  • cls : string
    需要添加的CSS样式的class名称
返回值:
  • Ext.Component
    this
Component
addEvents( Object|String o, string Optional. ) : void
添加指定的事件到事件列表上，事件会被该Observable触发。
添加指定的事件到事件列表上，事件会被该Observable触发。
参数:
  • o : Object|String
    以事件名作为属性true作为值的对象 或者当多个事件名被分开的传递时则为第一个事件名。
  • Optional. : string
    事件名被分开的传递时则为事件名。 用法:
    this.addEvents('storeloaded', 'storecleared');
返回值:
  • void
Observable
addListener( String eventName, Function handler, [Object scope], [Object options] ) : void
给对象添加事件处理器。
给对象添加事件处理器。
参数:
  • eventName : String
    监听的事件名。
  • handler : Function
    事件调用的方法
  • scope : Object
    （可选）处理方法执行的作用域 (this的引用 reference)。 如果被忽略。默认为触发事件的对象。
  • options : Object
    （可选）包含处理器配置和属性的对象。 可能包含以下的属性:
    • scope : Object
      处理方法执行的作用域(this的引用) 。 如果被忽略。默认为触发事件的对象。
    • delay : Number
      在触发事件后延迟调用处理器的毫秒数。
    • single : Boolean
      如果为True则添加一个处理器来处理下一次的事件触发（仅一次），然后移除自己。
    • buffer : Number
      使得处理器延迟指定毫秒数后预定的运行在 一个Ext.util.DelayedTask中 。 如果事件在时间内再一次被触发，原始的处理器不会被调用，但是新的处理器会预定的在他的位置上。
    • target : Observable
      如果事件在目标的Observable上触发则仅仅调用处理器， 否则 事件会从子类的Observable上冒泡

    组合选项
    使用这些选项参数,可能会组合出不同类型的监听器：

    一个延迟的，一次性的监听器。

    myDataView.on('click', this.onClick, this, {
single: true,
delay: 100
});

    一次调用附加多个处理器
    该方法同样支持传递一个包含指定的多个处理器的属性的配置对象参数。

    myGridPanel.on({
'click' : {
    fn: this.onClick,
    scope: this,
    delay: 100
},
'mouseover' : {
    fn: this.onMouseOver,
    scope: this
},
'mouseout' : {
    fn: this.onMouseOut,
    scope: this
}
});

    或者一个简写的语法：

    myGridPanel.on({
'click' : this.onClick,
'mouseover' : this.onMouseOver,
'mouseout' : this.onMouseOut,
 scope: this
});
返回值:
  • void
Observable
cleanHtml ( String html ) : String
protected型方法，一般不会被直接调用。 如果你需要/想要自定义清除HTML...
protected型方法，一般不会被直接调用。 如果你需要/想要自定义清除HTML，这就是你需要覆盖的方法。
参数:
  • html : String
    需要清除的HTML
返回值:
  • String
    被清除的HTML
HtmlEditor
cloneConfig ( Object overrides ) : Ext.Component
默认使用原先传递给当前实例的配置值克隆当前组件。
默认使用原先传递给当前实例的配置值克隆当前组件。
参数:
  • overrides : Object
    一个新的配置项，包含需要覆盖到克隆版本的所有属性。 可以传递一个id参数给此对象，否则将自动生成一个新的id以避免发生重复。
返回值:
  • Ext.Component
    当前组件的克隆副本
Component
destroy () : void
通过如下方法销毁对象：删除所有的事件监听器、将组件的元素从DOM树中删除...
通过如下方法销毁对象：删除所有的事件监听器、将组件的元素从DOM树中删除（如果可以）、 将组件从它的 Ext.Container（如果可用）中删除、 并且将它从Ext.ComponentMgr中 注销。 销毁操作一般由框架自动完成，一般情况下不需要直接调用该方法。
参数:
  • 无。
返回值:
  • void
Component
enableBubble( String/Array events ) :void
是否现在使得事件会被该Observable触发并调用 this.getBubbleTarget()方法在拥有者的继承树...

是否现在使得事件会被该Observable触发并调用 this.getBubbleTarget()方法在拥有者的继承树中冒泡。Observable的基础类中没有该方法的实现。

该方法一般被Ext.Components用来冒泡事件到拥有者的容器。参看Ext.Component.getBubbleTarget默认的实现 在Ext.Component中返回组件的直接拥有者。但是如果需要的是一个已知的目标，该方法可以被重写来更快的访问需求的目标。

例子:

Ext.override(Ext.form.Field, {
    // 添加方法到Field的initComponent上改变事件为冒泡
    initComponent : Ext.form.Field.prototype.initComponent.createSequence(function() {
        this.enableBubble('change');
    }),

    // 我们知道我们想让Field的事件冒泡到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() {
            // 如果样式被修改标题会变红。
            myForm.header.setStyle('color', 'red');
        }
    }
});
参数:
  • events : String/Array
    冒泡的事件名，或事件名数组
返回值:
  • void
Observable
execCmd ( String cmd , [ String/Boolean value ] ) : void
在编辑器文本中直接执行一个Midas编辑指令。 对于视觉相关的指令，你应该使用relayCmd 来代替。...
在编辑器文本中直接执行一个Midas编辑指令。 对于视觉相关的指令，你应该使用relayCmd 来代替。 只有在编辑器完成初始化之后才可以调用此方法。 译者注：Midas是一个编码名称，Gecko内置的富文本编辑器支持此指令。Midas 可以在HTML中 通过JavaScript来执行。Midas基于DHTML指令集，通过使用Midas可以把整个页面都变成可编辑状态。 更多详细的描述请参见这里：Midas ）。
参数:
  • cmd : String
    Midas命令
  • value : String/Boolean
    (可选)传递给命令的值(默认为null)
返回值:
  • void
HtmlEditor
findParentBy ( Function fn ) : Ext.Container
通过自定义的函数查找当前组件上层任何层次上的容器...
通过自定义的函数查找当前组件上层任何层次上的容器。 如果传递的函数返回true，容器对象将被返回。
参数:
  • fn : Function
    自定义的函数，使用如下参数调用(container,this component)。
返回值:
  • Ext.Container
    自定义函数返回true的第一个容器
Component
findParentByType ( String/Class xtype ) : Ext.Container
通过xtype或者class查找当前组件上层任何层次上的容器
通过xtype或者class查找当前组件上层任何层次上的容器
参数:
  • xtype : String/Class
    组件的xtype字符串，或者直接是组件的class
返回值:
  • Ext.Container
    符合指定xtype或者class的第一个容器
Component
fireEvent( String eventName, Object... args ) : Boolean
用传入的参数触发指定的事件 (减去事件名)。 一个事件可以被设置为冒泡 Obse...

用传入的参数触发指定的事件 (减去事件名)。

一个事件可以被设置为冒泡到Observable父类继承树(参看 Ext.Component.getBubbleTarget) 调用enableBubble实现。

参数:
  • eventName : String
    触发的事件名。
  • args : Object...
    传递给处理器的可变长度参数。
返回值:
  • Boolean
    如果有任何的处理器返回false则返回false，否则返回true。
Observable
focus ( [ Boolean selectText ], [ Boolean/Number delay ] ) : Ext.Component
尝试将当前组件设为焦点。
尝试将当前组件设为焦点。
参数:
  • selectText : Boolean
    (可选) 如果可用，同时选中组件内部的文本
  • delay : Boolean/Number
    (可选)将当前组件设置为焦点的延迟时间(设置为true等于0毫秒)
返回值:
  • Ext.Component
    this
Component
getActiveError () : String
获取当前表单项活动的出错消息。
获取当前表单项活动的出错消息。
参数:
  • 无。
返回值:
  • String
    返回表单项上活动的出错消息，如果没有错误，返回一个空字符串。
Field
getBox ( [ Boolean local ] ) : Object
获取组件底层元素当前盒子模型的尺寸。（译者注：盒子模型是CSS术语，详细解释请自行搜索。）
获取组件底层元素当前盒子模型的尺寸。（译者注：盒子模型是CSS术语，详细解释请自行搜索。）
参数:
  • local : Boolean
    (可选)值为true时，组件的left值和top值将代替页面的XY被返回。(默认值为false)
返回值:
  • Object
    返回值的格式{x, y, width, height}
BoxComponent
getBubbleTarget () : Ext.Container
为Observable的fireEvent方法提供链接，它沿着继承结构进行冒泡操作。
为Observable的fireEvent方法提供链接，它沿着继承结构进行冒泡操作。
参数:
  • 无。
返回值:
  • Ext.Container
    拥有当前组件的容器。
Component
getDocMarkup () : void
protect型方法，一般不会被直接调用。 在编辑器使用HTML内容初始化iframe时它会被调用。...
protect型方法，一般不会被直接调用。 在编辑器使用HTML内容初始化iframe时它会被调用。 如果你想要改变iframe的初始化方式(例如，添加样式表)可以覆盖此方法。 注意：IE8标准存在我们不想要的滚动条行为，所有默认的meta标签强制兼容 IE7
参数:
  • 无。
返回值:
  • void
HtmlEditor
getEl () : Ext.Element
返回 Ext.Element ，它包装了当前组件。...

返回 Ext.Element ，它包装了当前组件。

通常情况下，这将是一个<DIV>元素，它是由该类的onRender方法创建的， 但是可以使用autoEl配置项 覆盖它。

注意: 此元素将会一直处于无效状态直到当前组件渲染完成。

如需向当前组件的 DOM事件(而不是当前组件自己的Observable事件)添加监听器， 更多建议，参见 listeners 配置项，或者直接使用一个render监听器:

new Ext.Panel({
    title: 'The Clickable Panel',
    listeners: {
        render: function(p) {
            // Append the Panel to the click handler's argument list.
            p.getEl().on('click', handlePanelClick.createDelegate(null, [p], true));
        },
        single: true  // Remove the listener after first invocation
    }
});
参数:
  • 无。
返回值:
  • Ext.Element
    包装当前组件的元素。
Component
getErrors () : Array
运行当前表单项的校验器并返回一个所有校验错误信息数组。 此方法在校验期间在内部调用并且一般情况下...
运行当前表单项的校验器并返回一个所有校验错误信息数组。 此方法在校验期间在内部调用并且一般情况下不需要手工调用。 每个子类都应该重写或者增加返回值以提供它们自己的出错消息
参数:
  • 无。
返回值:
  • Array
    当前表单项的所有出错消息
Field
getHeight () : Number
获取该组件的当前高度值。
获取该组件的当前高度值。
参数:
  • 无。
返回值:
  • Number
BoxComponent
getId () : String
返回当前组件的id，如果没有定义id，则自动生成并返回一个id:'ext-comp-'...
返回当前组件的 id 如果没有定义 id 则自动生成并返回一个 id

'ext-comp-' + (++Ext.Component.AUTO_ID)
参数:
  • 无。
返回值:
  • String
    id
Component
getItemId () : String
返回当前组件的 itemId 。 如果没有通过配置参数指定 itemId 那么，将会使用...
返回当前组件的 itemId 。 如果没有通过配置参数指定 itemId 那么，将会使用 getId 返回 id 。
参数:
  • 无。
返回值:
  • String
Component
getName () : String
如果可用，返回表单项的 name 或者 hiddenName 属性。
如果可用，返回表单项的 name 或者 hiddenName 属性。
参数:
  • 无。
返回值:
  • String
    name 表单项的{@link Ext.form.Field#name name}或者{@link Ext.form.ComboBox#hiddenName hiddenName}
Field
getOuterSize () : Object
获取当前组件所在元素的尺寸大小，包括边缘的空白处。
获取当前组件所在元素的尺寸大小，包括边缘的空白处。
参数:
  • 无。
返回值:
  • Object
    一个包含元素大小的对象 {width: (element width + left/right margins), height: (element height + top/bottom margins)}
BoxComponent
getPosition ( [ Boolean local ] ) : Array
获取组件底层元素当前的XY位置。
获取组件底层元素当前的XY位置。
参数:
  • local : Boolean
    (可选)如果为true，将返回元素的left和top值，而不是相对于页面内的 XY。(默认值为 false)
返回值:
  • Array
    元素的XY位置值(例如：[100, 200])
BoxComponent
getRawValue () : Mixed
返回原始数据值，可能不是一个合法的、已定义的值。 返回格式化的值参见...
返回原始数据值，可能不是一个合法的、已定义的值。 返回格式化的值参见 getValue。
参数:
  • 无。
返回值:
  • Mixed
    value 表单项的值
Field
getResizeEl () : Ext.Element
返回该组件的最外层用来定义这些组件整体大小的Element...

返回该组件的最外层用来定义这些组件整体大小的Element对象。

通常用 getEl 方法将会返回相同的Element对象，但在有些情况下，组件可能有一些更多的封装了它的主要动态Element对象的Element对象。

例如ComboBox。它是封装在一个包含<input>元素的包装元素里(这将返回其 getEl方法和触发按钮的元素)。返回的元素为resizeEl。

参数:
  • 无。
返回值:
  • Ext.Element
    The Element which is to be resized by size managing layouts.
BoxComponent
getSize () : Object
获取组件底层元素当前的大小。
获取组件底层元素当前的大小。
参数:
  • 无。
返回值:
  • Object
    一个包含元素大小的对象{width: (element width), height: (element height)}
BoxComponent
getToolbar () : Ext.Toolbar
返回编辑器的工具条。 这仅仅在编辑器被渲染完成之后才可用。
返回编辑器的工具条。 这仅仅在编辑器被渲染完成之后才可用。
参数:
  • 无。
返回值:
  • Ext.Toolbar
HtmlEditor
getValue () : Mixed
返回格式化的数据值(undefined或者emptyText将会以''返回)。 如需返回原始值，参见...
返回格式化的数据值(undefined或者emptyText将会以''返回)。 如需返回原始值，参见 getRawValue。
参数:
  • 无。
返回值:
  • Mixed
    value 表单项的值
Field
getWidth () : Number
获取该组件的当前宽度值。
获取该组件的当前宽度值。
参数:
  • 无。
返回值:
  • Number
BoxComponent
getXType () : String
获取当前组件的xtype，它是用 Ext.ComponentMgr 注册的。 所有可用的xtype列表，参见...
获取当前组件的xtype，它是用 Ext.ComponentMgr 注册的。 所有可用的xtype列表，参见 Ext.Component 类头部。示例用法:

var t = new Ext.form.TextField();
alert(t.getXType());  // alerts 'textfield'
参数:
  • 无。
返回值:
  • String
    The xtype
Component
getXTypes () : String
返回此组件的xtype继承树，用字符'-'分隔。 所有可用的xtype值...

返回此组件的xtype继承树，用字符'-'分隔。 所有可用的xtype值，请参见Ext.Component 类的头部。

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

示例用法:

var t = new Ext.form.TextField();
alert(t.getXTypes());  // alerts 'component/box/field/textfield'
参数:
  • 无。
返回值:
  • String
    xtype层次字符串
Component
hasListener( String eventName ) : Boolean
检测对象是否包含指定事件的任何监听器
检测对象是否包含指定事件的任何监听器
参数:
  • eventName : String
    检测的事件名
返回值:
  • Boolean
    如果事件被监听则为true，否则为false
Observable
hide () : Ext.Component
隐藏当前组件。 监听 beforehide' 事件并且返回false 可以取消隐藏组件的操作。 在隐藏组件之后触发...
隐藏当前组件。 监听 beforehide' 事件并且返回false 可以取消隐藏组件的操作。 在隐藏组件之后触发 ' hide' 事件。 如果组件被配置成 hidden 那么此方法在内部被调用。
参数:
  • 无。
返回值:
  • Ext.Component
    this
Component
insertAtCursor ( String text ) : void
将传递的文本插入到鼠标当前位置。 注意：编辑器必须已经被初始化...
将传递的文本插入到鼠标当前位置。 注意：编辑器必须已经被初始化并激活以便插入文本。
参数:
  • text : String
返回值:
  • void
HtmlEditor
isDirty () : Boolean
如果此表单项的值与原始值相比发生了改变，返回true。 如果表单项...

如果此表单项的值与原始值相比发生了改变，返回true。 如果表单项被禁用或者尚未被渲染将会返回false。

注意，如果所属的 form 配置了一个Ext.form.BasicForm， 那么在使用Ext.form.BasicForm. setValues 加载值之后，原始值将会被更新。

参数:
  • 无。
返回值:
  • Boolean
    如果此表单项的值与原始值相比发生了改变(并且没有被禁用)，返回true，其它返回false。
Field
isValid ( Boolean preventMark ) : Boolean
通过 校验 表单项 处理后的值 ，返回表单项当前值是否合法。...
通过 校验 表单项 处理后的值 ，返回表单项当前值是否合法。 注意: disabled 的表单项将会被忽略。
参数:
  • preventMark : Boolean
    True将会禁止把表单项标记为非法
返回值:
  • Boolean
    如果值是合法的，为true，其它为false
Field
isVisible () : Boolean
如果当前组件可见，返回true。
如果当前组件可见，返回true。
参数:
  • 无。
返回值:
  • Boolean
    如果当前组件可见，返回true，其它返回false。
Component
isXType ( String xtype , [ Boolean shallow ] ) : Boolean
Tests whether or not this Component is of a specific xtype. This can test whether this Component is descended from th...

测试此组件是否是指定的xtype。此方法既可以测试是否是指定的xtype的某个子类， 或者它是否直接是指定的xtype类(shallow=true)。

如果使用你自己的子类，必须知道组件必须注册它的xtype值。

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

示例用法:

var t = new Ext.form.TextField();
var isText = t.isXType('textfield');        // true
var isBoxSubclass = t.isXType('box');       // true, descended from BoxComponent
var isBoxInstance = t.isXType('box', true); // false, not a direct BoxComponent instance
参数:
  • xtype : String
    需要为当前组件进行检测的xtype
  • shallow : Boolean
    (可选) 如果为false，检测组件是否是xtype继承树中的某个子类（默认是这种情况）， 如果为true，只检测组件是否是指定的xtype类型。
返回值:
  • Boolean
    如果当前组件是指定xtype的子类，返回true，其它返回flase。
Component
mon ( Observable|Element item , Object|String ename , Function fn , Object scope , Object opt ) : void
向任何Observable对象(或者元素)上添加监听器，监听器将会在组件...

向任何Observable对象(或者元素)上添加监听器，监听器将会在组件销毁时被自动删除。
用法：

myGridPanel.mon(myGridPanel.getSelectionModel(), 'selectionchange', handleSelectionChange, null, {buffer: 50});

or:

myGridPanel.mon(myGridPanel.getSelectionModel(), {
    selectionchange: handleSelectionChange,
    buffer: 50
});
参数:
  • item : Observable|Element
    需要添加listener/listeners的项目。
  • ename : Object|String
    事件名，或者一个包含事件名属性的对象。
  • fn : Function
    (可选) 如果 ename 参数是一个事件名，此参数为处理函数。
  • scope : Object
    (可选)如果 ename 参数是一个事件名称，此参数是作用域 ( this 引用)，监听函数将会在此作用域中被执行。
  • opt : Object
    (可选)如果 ename 参数是一个事件名称， 此参数是 addListener 配置项。
返回值:
  • void
Component
mun ( Observable|Element item , Object|String ename , Function fn , Object scope ) : void
删除通过mon 方法添加的监听器。
删除通过mon 方法添加的监听器。
参数:
  • item : Observable|Element
    需要删除listener/listeners的项目。
  • ename : Object|String
    事件名称，或者一个包含事件名称属性的对象。
  • fn : Function
    (可选)如果 ename 参数是一个事件名称，此参数是一个处理函数。
  • scope : Object
    (可选)如果 ename 参数是一个事件名称，此参数是作用域 ( this 引用)，监听函数将会在此作用域中被执行。
返回值:
  • void
Component
nextSibling () : Ext.Component
返回所属容器中的下一个组件
返回所属容器中的下一个组件
参数:
  • 无。
返回值:
  • Ext.Component
Component
on( String eventName, Function handler, [Object scope], [Object options] ) : void
给对象添加事件处理器 (addListener的简写形式)
给对象添加事件处理器 (addListener的简写形式。)
参数:
  • eventName : String
    监听的事件类型
  • handler : Function
    事件调用的方法
  • scope : Object
    （可选）处理方法执行时的作用域 (this 的引用)。 如果被忽略。默认为触发事件的对象。
  • options : Object
    可选 包含处理器配置的对象。
返回值:
  • void
Observable
previousSibling () : Ext.Component
返回所属容器中的前一个组件
返回所属容器中的前一个组件
参数:
  • 无。
返回值:
  • Ext.Component
Component
processValue ( Mixed value ) : void
仅仅在需要准备原始值供校验时，才需要覆盖此方法(参见 validate和 isValid)。...
仅仅在需要准备原始值供校验时，才需要覆盖此方法(参见 validate和 isValid)。 此方法被期望为表单项返回处理后的值，此值将会被用来进行校验 (参见validateValue方法)。
参数:
  • value : Mixed
返回值:
  • void
Field
purgeListeners() : void
移除对象上所有的监听器
移除对象上所有的监听器
参数:
  • 无。
返回值:
  • void
Observable
pushValue () : void
protected型方法，一般不会被直接调用。 将textarea的值推送到iframe编辑器中。
protected型方法，一般不会被直接调用。 将textarea的值推送到iframe编辑器中。
参数:
  • 无。
返回值:
  • void
HtmlEditor
relayCmd ( String cmd , [ String/Boolean value ] ) : void
在编辑器中的文本上执行Midas编辑器指令 ，执行必要的聚焦和更新toolbar的操作。...
在编辑器中的文本上执行Midas编辑器指令 ，执行必要的聚焦和更新toolbar的操作。 此方法必须在编辑被初始化之后被调用。
参数:
  • cmd : String
    Midas命令
  • value : String/Boolean
    (可选)需要传递给命令的值(默认为null)
返回值:
  • void
HtmlEditor
relayEvents( Object o, Array events ) : void
从指定的Observable上传递选择的事件就好像被当前对象触发一样。
从指定的Observable上传递选择的事件就好像被当前对象触发一样。
参数:
  • o : Object
    该Observable上的事件被当前对象传递。
  • events : Array
    传递的数组名。
返回值:
  • void
Observable
removeClass ( string cls ) : Ext.Component
从组件底层的元素上删除一个CSS类。
从组件底层的元素上删除一个CSS类。
参数:
  • cls : string
    需要移除的CSS类名
返回值:
  • Ext.Component
    this
Component
removeListener( String eventName, Function handler, [Object scope] ) : void
删除一个事件处理器。
删除一个事件处理器。
参数:
  • eventName : String
    处理器关联的事件类型。
  • handler : Function
    移除的处理器。 这应该是传递到addListener里的方法的引用。
  • scope : Object
    （可选）处理器指定的初始作用域。
返回值:
  • void
Observable
render ( [ Element/HTMLElement/String container ], [ String/Number position ] ) : void
在传递进来的HTML元素中渲染当前组件。...

在传递进来的HTML元素中渲染当前组件。

如果你正在使用一个Container 对象放置当前组件，那么请不要使用render方法。

当容器第一次被渲染时，它的子组件将会被容器的 layout 管理器渲染。

某些布局管理器允许动态添加子组件。它们包括 Ext.layout.CardLayout, Ext.layout.AnchorLayout, Ext.layout.FormLayout, Ext.layout.TableLayout。

当一个新的子组件被添加时，如果容器已经被渲染了， 你可能需要调用容器的 doLayout 方法来刷新视图，它将导致所有没有被渲染的子组件进行渲染操作。 此操作是必须的，这样你可以添加多个子组件而只刷新一次layout。

当创建复杂的UI时，非常重要的一点是，请记住调整子项目的尺寸和位置是容器的 layout 管理器的职责。 如果你希望子项目的尺寸对用户交互作出反应， 你必须为容器配置一个布局管理器，它将创建和管理你心里想要的那种布局。

忽略容器的layout 配置意味着将会使用一个基本的布局管理器，它除了按次序把子组件 渲染到容器中之外什么事情都不做。 这种情况下，任何尺寸和位置的调整操作都不会发生。

参数:
  • container : Element/HTMLElement/String
    (可选) 需要在其中渲染当前组件的元素。 如果它是从一个已存在的标签中创建的，此参数应该被忽略。
  • position : String/Number
    (可选) 容器中的一个元素ID或者一个DOM节点索引， 当前组件将会被插入到它前面 (默认append到容器的尾部)
返回值:
  • void
Component
reset () : void
将表单项的当前值重置为以前加载时的值，并且清除所有校验信息。...
将表单项的当前值重置为以前加载时的值，并且清除所有校验信息。 参见Ext.form.BasicForm. trackResetOnLoad 。
参数:
  • 无。
返回值:
  • void
Field
resumeEvents() : void
重新开始触发事件。(参见suspendEvents) 如果事件以queueSuspended参数被挂起，则在事件被挂起时 ...
重新开始触发事件。(参见 suspendEvents) 如果事件以queueSuspended 参数被挂起，则在事件被挂起时触发的事件会被传递到所有的监听器上
参数:
  • 无。
返回值:
  • void
Observable
setActiveError ( String msg , Boolean suppressEvent ) : void
将当前activeError设置为所给的字符串。 触发'invalid'事件。这不会设置出错图标...
将当前activeError设置为所给的字符串。 触发'invalid'事件。这不会设置出错图标，仅仅设置消息并触发事件。 如需显示出错图标，可使用markInvalid代替，它将在内部调用此方法。
参数:
  • msg : String
    出错消息
  • suppressEvent : Boolean
    True将会禁止触发'invalid'事件
返回值:
  • void
Field
setAutoScroll ( Boolean scroll ) : Ext.BoxComponent
设置该组件内容溢出时是否自动显示滚动条。
设置该组件内容溢出时是否自动显示滚动条。
参数:
  • scroll : Boolean
    值为true的话组件自动显示滚动条。
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setHeight ( Mixed height ) : Ext.BoxComponent
设置此组件的高度。该方法将触发resize事件。
设置此组件的高度。该方法将触发resize事件。
参数:
  • height : Mixed
    The new height to set.
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setPagePosition ( Number x , Number y ) : Ext.BoxComponent
设置组件在页面中的XY位置。 如果需要设置left和top值 ，请使用...
设置组件在页面中的XY位置。 如果需要设置left和top值 ，请使用setPosition方法。 该方法触发move事件。
参数:
  • x : Number
    The new x position
  • y : Number
    The new y position
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setPosition ( Number left , Number top ) : Ext.BoxComponent
设置组件的left和top值。设置组件的页面XY值，请使用setPagePosition方法。该方法触发...
设置组件的left和top值。设置组件的页面XY值，请使用setPagePosition方法。该方法触发move事件。
参数:
  • left : Number
    The new left
  • top : Number
    The new top
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setRawValue ( Mixed value ) : Mixed
绕过校验，直接设置底层DOM表单项的值。 设置值并进行校验，参见 setValue。
绕过校验，直接设置底层DOM表单项的值。 设置值并进行校验，参见 setValue。
参数:
  • value : Mixed
    需要设置的值
返回值:
  • Mixed
    value 被设置的表单项值
Field
setReadOnly ( Boolean readOnly ) : void
设置当前表单项的只读状态。
设置当前表单项的只读状态。
参数:
  • readOnly : Boolean
    表单项是否应该只读。
返回值:
  • void
Field
setSize ( Mixed width , Mixed height ) : Ext.BoxComponent
设置BoxComponent的宽度和高度。 此方法触发resize事件...
设置BoxComponent的宽度和高度。 此方法触发resize事件。此方法可以接收单独的width或者height值作为参数， 或者你可以传递像这样的一个size对象： {width:10, height:20} 。
参数:
  • width : Mixed
    设置的新的width值。这可以是：
    • 一个Number类型指定Element新的宽度 Ext.Element.defaultUnit(默认为像素 :'px')。
    • 一个String类型用于设置width的CSS样式。
    • 一个size对象格式为 {width: widthValue, height: heightValue} 。
    • 值为 undefined 时，保留原来的width不变。
  • height : Mixed
    设置的新的height值(如果第一个参数传递了一个size对象，此参数没有必要传递)。这可以是：
    • 一个Number类型指定Element新的高度 Ext.Element.defaultUnit(默认为像素 :'px')。
    • 一个String类型用于设置height的CSS样式。也有可能不会被使用到。
    • 值为 undefined 时，保留原来的height不变。
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setValue ( Mixed value ) : Ext.form.Field
向表单项中设置一个数据值并校验之。 如需直接设置值而不进行校验，参见 setRawValue。
向表单项中设置一个数据值并校验之。 如需直接设置值而不进行校验，参见 setRawValue。
参数:
  • value : Mixed
    需要设置的值
返回值:
  • Ext.form.Field
    this
Field
setVisible ( Boolean visible ) : Ext.Component
工具方法，通过使用布尔值隐藏或者显示当前组件。
工具方法，通过使用布尔值隐藏或者显示当前组件。
参数:
  • visible : Boolean
    true时显示，false时隐藏
返回值:
  • Ext.Component
    this
Component
setWidth ( Mixed width ) : Ext.BoxComponent
设置组件的宽度。 此方法触发resize事件。
设置组件的宽度。 此方法触发resize事件。
参数:
  • width : Mixed
    The new width to set.
返回值:
  • Ext.BoxComponent
    this
BoxComponent
show () : Ext.Component
显示当前组件。监听' beforeshow' 事件，返回 false 取消显示组件...
显示当前组件。监听' beforeshow' 事件，返回 false 取消显示组件。在显示组件之后触发' show' 事件。
参数:
  • 无。
返回值:
  • Ext.Component
    this
Component
suspendEvents( Boolean queueSuspended ) : void
暂停触发所有的事件。 (参看resumeEvents)
暂停触发所有的事件。（参看 resumeEvents)
参数:
  • queueSuspended : Boolean
    如果传递为true则排列好暂停的事件使得在调用 resumeEvents 后再触发它们，而不是抛弃所有暂停的事件。
返回值:
  • void
Observable
syncSize () : Ext.BoxComponent
强制组件的大小按照此组件底层元素当前的高度和宽度计算。
强制组件的大小按照此组件底层元素当前的高度和宽度计算。
参数:
  • 无。
返回值:
  • Ext.BoxComponent
    this
BoxComponent
syncValue () : void
protecte型方法，一般不会被直接调用。 使用textarea同步编辑器iframe的内容。
protecte型方法，一般不会被直接调用。 使用textarea同步编辑器iframe的内容。
参数:
  • 无。
返回值:
  • void
HtmlEditor
toggleSourceEdit ( [ Boolean sourceEdit ] ) : void
使编辑器在源码编辑模式和标准编辑模式之间进行切换。
使编辑器在源码编辑模式和标准编辑模式之间进行切换。
参数:
  • sourceEdit : Boolean
    (可选)源码编辑模式为true，标准编辑模式为false
返回值:
  • void
HtmlEditor
un( String eventName, Function handler, [Object scope] ) : void
删除一个事件处理器(removeListener方法的简写形式)
删除一个事件处理器(removeListener方法的简写形式。)
参数:
  • eventName : String
    处理器关联的事件类型
  • handler : Function
    被删除的处理器 这应该是传入 addListener 中的方法的引用。
  • scope : Object
    （可选）为处理器指定的初始作用域。
返回值:
  • void
Observable
unsetActiveError ( Boolean suppressEvent ) : void
清除activeError并触发'valid'事件。此方法被clearInvalid在内部进行...
清除activeError并触发'valid'事件。此方法被clearInvalid在内部进行调用， 并且一般情况下没有必要手工调用
参数:
  • suppressEvent : Boolean
    True将禁止触发'invalid'事件
返回值:
  • void
Field
update ( Mixed htmlOrData , [ Boolean loadScripts ], [ Function callback ] ) : void
刷新组件的内部区域。
刷新组件的内部区域。
参数:
  • htmlOrData : Mixed
    如果已经通过tpl为当前组件配置了一个模板，那么 将会使用此参数来装配模板。 如果没有为当前组件配置模板，组件的内容区域将会通过Ext.Element 进行刷新。
  • loadScripts : Boolean
    (可选)只用在使用html配置时此参数才合法。默认为false。
  • callback : Function
    (可选)只用在使用html配置时此参数才合法。 当脚本加载完成时回调函数才被执行。
返回值:
  • void
Component
updateBox ( Object box ) : Ext.BoxComponent
设置此组件底层元素的盒子模型尺寸。(译者注：盒子模型是CSS术语，详细资料请自行搜索。)
设置此组件底层元素的盒子模型尺寸。(译者注：盒子模型是CSS术语，详细资料请自行搜索。)
参数:
  • box : Object
    一个格式为{x, y, width, height}的对象
返回值:
  • Ext.BoxComponent
    this
BoxComponent
updateToolbar () : void
protected型方法，一般不会被直接调用。 它通过读取编辑器中当前选中项目的标记状态...
protected型方法，一般不会被直接调用。 它通过读取编辑器中当前选中项目的标记状态，触发一个工具栏进行刷新。
参数:
  • 无。
返回值:
  • void
HtmlEditor
validateValue ( Mixed The ) : Boolean
使用getErrors创建一个校验出错信息数组。 如果发现了任何错误，将会使用第一个错误作为参数...
使用getErrors创建一个校验出错信息数组。 如果发现了任何错误，将会使用第一个错误作为参数调用markInvalid方法并返回 false，否则返回true。以前，要求子类提供此方法的一个实现以处理校验过程--- 从3.2开始，应该用覆盖getErrors方法的方式替代。
参数:
  • The : Mixed
    表单项的当前值
返回值:
  • Boolean
    如果所有校验都通过，此值为true，如果一个或多个校验失败，则为false
Field

公共事件

Event Defined By
activate : ( HtmlEditor this )
当编辑器第一次获得焦点时触发。所有插入操作都必须等到此事件之后才执行。
当编辑器第一次获得焦点时触发。所有插入操作都必须等到此事件之后才执行。
监听器将会以如下参数格式被调用:
  • this : HtmlEditor
HtmlEditor
added : ( Ext.Component this , Ext.Container ownerCt , number index )
当一个组件被添加到一个Ext.Container时触发
当一个组件被添加到一个Ext.Container时触发
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • ownerCt : Ext.Container
    用于组件的容器
  • index : number
    添加组件的位置
Component
afterrender : ( Ext.Component this )
在组件渲染完成之后触发...

在组件渲染完成之后触发。

afterrender事件在当前组件被rendered 结束之后、在为组件定义的所有afterRender方法执行之后 触发，并且，如果有stateful， 也在状态被保存之后才触发。

监听器将会以如下参数格式被调用:
  • this : Ext.Component
Component
beforedestroy : ( Ext.Component this )
在组件 destroyed 之前触发。 在事件监听器中返回false以停止 destroy 操作。
在组件 destroyed 之前触发。 在事件监听器中返回false以停止 destroy 操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforehide : ( Ext.Component this )
在调用hide方法隐藏组件之前触发。 在事件监听器中返回false可以停止隐藏操作。
在调用hide方法隐藏组件之前触发。 在事件监听器中返回false可以停止隐藏操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforepush : ( HtmlEditor this , String html )
当使用textarea的内容更新iframe编辑器之前触发。返回false可以取消推入。
当使用textarea的内容更新iframe编辑器之前触发。返回false可以取消推入。
监听器将会以如下参数格式被调用:
  • this : HtmlEditor
  • html : String
HtmlEditor
beforerender : ( Ext.Component this )
在组件被rendered 之前触发。 在事件监听器中返回false可以停止render 操作。
在组件被rendered 之前触发。 在事件监听器中返回false可以停止render 操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforeshow : ( Ext.Component this )
在调用show()方法现实组件之前触发。 事件处理函数返回false可以停止show。
在调用show 方法现实组件之前触发。 事件处理函数返回false可以停止show。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforestaterestore : ( Ext.Component this , Object state )
在组件状态恢复之前触发。返回false停止恢复状态操作。
在组件状态恢复之前触发。返回false停止恢复状态操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    StateProvider返回的状态哈希值。 如果没有禁止此事件，那么状态对象会被传递给applyState。 默认情况下，这样简单地把属性值拷贝到当前组件中。 可以覆盖此方法以提供自定的状态恢复操作。
Component
beforestatesave : ( Ext.Component this , Object state )
在组件状态被保存到配置的状态提供者之前触发。 返回false可以停止保存。
在组件状态被保存到配置的状态提供者之前触发。 返回false可以停止保存。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    状态值哈希。 这由在组件上调用getState() 方法决定。 此方法必须由开发者提供，返回是否需要对状态进行描述，默认情况下， Ext.Component有一个空实现。
Component
beforesync : ( HtmlEditor this , String html )
在textarea被使用编辑器iframe中的内容更新之后触发。 返回false可以取消同步。
在textarea被使用编辑器iframe中的内容更新之后触发。 返回false可以取消同步。
监听器将会以如下参数格式被调用:
  • this : HtmlEditor
  • html : String
HtmlEditor
destroy : ( Ext.Component this )
在组件被销毁之后触发。
在组件被destroyed之后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
disable : ( Ext.Component this )
在组件被设置为无效状态后触发。
在组件被设置为无效状态后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
editmodechange : ( HtmlEditor this , Boolean sourceEdit )
当编辑器切换编辑模式时触发
当编辑器切换编辑模式时触发
监听器将会以如下参数格式调用:
  • this : HtmlEditor
  • sourceEdit : Boolean
    如果是源码编辑状态为true，如果是标准编辑状态为false
HtmlEditor
enable : ( Ext.Component this )
当组件被设置为有效(enabled)之后触发。
当组件被设置为有效(enabled)之后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
hide : ( Ext.Component this )
在组件被隐藏之后触发。 当调用hide 方法隐藏组件之后触发。
在组件被隐藏之后触发。 当调用hide 方法隐藏组件之后触发。
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
initialize : ( HtmlEditor this )
当编辑器(包括iframe)完全初始化完成时触发
当编辑器(包括iframe)完全初始化完成时触发
监听器将会以如下参数格式被调用:
  • this : HtmlEditor
HtmlEditor
invalid : ( Ext.form.Field this , String msg )
在表单项被标记为非法之后触发。
在表单项被标记为非法之后触发。
监听器将会以如下参数格式调用:
  • this : Ext.form.Field
  • msg : String
    校验信息
Field
move : ( Ext.Component this , Number x , Number y )
在组件移动之后触发。
在组件移动之后触发。
监听器将会用如下的参数格式来调用:
  • this : Ext.Component
  • x : Number
    The new x position
  • y : Number
    The new y position
BoxComponent
push : ( HtmlEditor this , String html )
当iframe编辑器被使用来自textarea中的内容进行更新时触发。
当iframe编辑器被使用来自textarea中的内容进行更新时触发。
监听器将会使用如下参数格式调用:
  • this : HtmlEditor
  • html : String
HtmlEditor
removed : ( Ext.Component this , Ext.Container ownerCt )
当一个组件被从Ext.Container容器中删除时触发
当一个组件被从Ext.Container容器中删除时触发
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • ownerCt : Ext.Container
    持有组件的容器
Component
render : ( Ext.Component this )
在组件被渲染之后触发。
在组件被 rendered(渲染) 之后触发。
监听器将以如下的参数格式被调用:
  • this : Ext.Component
Component
resize : ( Ext.Component this , Number adjWidth , Number adjHeight , Number rawWidth , Number rawHeight )
在组件被调整大小之后触发。
在组件被调整大小之后触发。
监听器将以如下的参数格式被调用:
  • this : Ext.Component
  • adjWidth : Number
    这是width调整后的值
  • adjHeight : Number
    这是height调整后的值
  • rawWidth : Number
    这是width原来的值
  • rawHeight : Number
    这是height原来的值
BoxComponent
show : ( Ext.Component this )
在调用show 方法显示组件之后触发。
在调用show 方法显示组件之后触发。
监听器将会用如下的参数格式被调用:
  • this : Ext.Component
Component
staterestore : ( Ext.Component this , Object state )
组件状态被存储之后触发。
组件状态被存储之后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    StateProvider返回的状态哈希值。 如果没有禁止此事件，那么状态对象会被传递给applyState。 默认情况下，这样简单地把属性值拷贝到当前组件中。 可以覆盖此方法以提供自定的状态恢复操作。
Component
statesave : ( Ext.Component this , Object state )
在组件状态被保存到所配置的状态提供者之后触发。
在组件状态被保存到所配置的状态提供者之后触发。
监听器将会用如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    状态值hash。 这是由在足见上调用getState() 方法决定的。 开发者必须提供此方法以返回是否需要恢复状态，默认情况下， Ext.Component有一个空实现。
Component
sync : ( HtmlEditor this , String html )
当使用编辑器iframe的内容更新textarea时触发。
当使用编辑器iframe的内容更新textarea时触发。
监听器将会使用如下参数格式被调用:
  • this : HtmlEditor
  • html : String
HtmlEditor


Observable
    Component
      BoxComponent
        Label

Class Ext.form.Label

包: | Ext.form
定义类的文件: | Label.js
类: | Label
继承自: | BoxComponent
基本Label域。

配置项

Config Options Defined By
allowDomMove : Boolean
在渲染时组件是否可以移动Dom节点(默认为true)。
Component
anchor : String
注: 这个配置只用于该组件被包含在一个已使用AnchorLayout...

注: 这个配置只用于该组件被包含在一个已使用 AnchorLayout (或者其子类)配置的Container时。 基于布局管理器，例如：

  • Ext.form.FormPanel
  • 指定 layout: 'anchor' // or 'form', or 'absolute'

参见 Ext.layout.AnchorLayout. anchor 。

BoxComponent
applyTo : Mixed
指定一个元素的id、一个DOM元素或者一个已经存在并被渲染到DIV中的元素，此DIV已经被...

指定一个元素的id、一个DOM元素或者一个已经存在并被渲染到DIV中的元素，此DIV已经被 渲染到document中，并且为当前组件指定了一些结构化的标签。

  • 描述 :
      当使用了 applyTo， 在主元素中也可以用id或者CSS类名来指定组件的托管部分， 并且，如果可以的话，创建的组件可能也会试图在那个标签中创建它的子组件。
  • 注意 :
      当使用此配置项时，无需调用render()方法。
      如果指定了applyTo属性，任何传递给 renderTo 的值都会被忽略，并且目标元素的父节点将会自动被用作组件的容器。
Component
autoEl : Mixed
一个表签名或者一个 DomHelper 描述，用来创建 Element ，它将封装当前组件...

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

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

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

{
    xtype: 'box',
    autoEl: {
        tag: 'img',
        src: 'http://www.example.com/example.jpg'

    }
}, {
    xtype: 'box',
    autoEl: {
        tag: 'blockquote',
        html: 'autoEl is cool!'
    }
}, {
    xtype: 'container',
    autoEl: 'ul',
    cls: 'ux-unordered-list',
    items: {
        xtype: 'box',
        autoEl: 'li',
        html: 'First list item'
    }
}
Component
autoHeight : Boolean
如果值为true，height配置项为'auto'，否则值为false的话使用固定的高度...

如果值为true，height配置项为'auto'，否则值为false的话使用固定的高度， 或者可以由其父类容器 layout manager来控制。(默认值为 false)。

注: 虽然很多组件继承了这个配置选项，但不是所有这些组件的自适应高度配置都会像期望的那样起作用。 设置autoHeight：值为true时，浏览器将根据元素的内容自动设置高度，这将意味着Ext不会去管理高度。

如果是由浏览器来管理高度，需要注意的是，通过浏览器进行调整的结构组件内不能被发现， 因此宽度的变化可能导致需要进行同步处理元素的高度。 例如：

var w = new Ext.Window({
    title: 'Window',
    width: 600,
    autoHeight: true,
    items: {
        title: 'Collapse Me',
        height: 400,
        collapsible: true,
        border: false,
        listeners: {
            beforecollapse: function() {
                w.el.shadow.hide();
            },
            beforeexpand: function() {
                w.el.shadow.hide();
            },
            collapse: function() {
                w.syncShadow();
            },
            expand: function() {
                w.syncShadow();
            }
        }
    }
}).show();
BoxComponent
autoScroll : Boolean
如果值为true，将会在该元素上使用overflow:'auto'配置，并且在必要的时候...
如果值为true，将会在该元素上使用overflow:'auto'配置，并且在必要的时候自动显示滚动条，否则，溢出部分的组件都会被切除(默认值为 false)。
BoxComponent
autoShow : Boolean
如果组件需要检测隐藏CSS属性(如 'x-hidden' 或者 'x-hide-display')并且在渲染时删除...
如果组件需要检测隐藏CSS属性(如 'x-hidden' 或者 'x-hide-display')并且在渲染时删除它们 (默认为false)，设置此值为true。
Component
autoWidth : Boolean
如果为true，使用width:'auto'配置，否则使用固定的宽度...

如果为true，使用width:'auto'配置，否则使用固定的宽度，或者可以由其父类容器的layout manager来控制。(默认值为 false)。

注: 虽然很多组件继承了这个配置选项，但不是所有这些组件的自适应宽度配置都会像期望的那样起作用。 设置autoWidth：值为true时，浏览器将根据元素的内容自动设置宽度，这将意味着Ext不会去管理宽度。

如果是由浏览器来管理宽度，需要注意的是，通过浏览器进行调整的结构组件内不能被发现，因此宽度的变化可能导致需要进行同步处理元素的宽度。 例如，在这个元素的目标是：

<div id='grid-container' style='margin-left:25%;width:50%'></div>
当浏览器窗口改变时，渲染后的Panel必须监听浏览器窗口大小的变化，以便通知子项，浏览器改变了其宽度：

var myPanel = new Ext.Panel({
    renderTo: 'grid-container',
    monitorResize: true, // relay on browser resize
    title: 'Panel',
    height: 400,
    autoWidth: true,
    layout: 'hbox',
    layoutConfig: {
        align: 'stretch'
    },
    defaults: {
        flex: 1
    },
    items: [{
        title: 'Box 1',
    }, {
        title: 'Box 2'
    }, {
        title: 'Box 3'
    }],
});
BoxComponent
boxMaxHeight : Number
设置组件的最大高度值...

设置组件的最大高度值。

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

BoxComponent
boxMaxWidth : Number
设置组件的最大宽度值...

设置组件的最大宽度值。

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

BoxComponent
boxMinHeight : Number
设置组件的最小高度值...

设置组件的最小高度值。

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

BoxComponent
boxMinWidth : Number
设置组件的最小宽度值...

设置组件的最小宽度值。

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

BoxComponent
bubbleEvents : Array
一个事件数组，当这些事件被触发时，将会被冒泡到所有父容器中。参见....

一个事件数组，当这些事件被触发时，将会被冒泡到所有父容器中。参见 Ext.util.Observable.enableBubble。 默认为 []。

Component
clearCls : String
应用到特殊的clearing div的CSS类， 这个clearing div直接渲染到每个form field的包装器后面...

应用到特殊的clearing div的CSS类， 这个clearing div直接渲染到每个form field的包装器后面，以提供 清除field的功能(默认为 'x-form-clear-left')。

注意: 只有在当前组件被渲染到一个使用FormLayout 布局(例如 Ext.form.FormPanel 或者指定 layout:'form')的 容器中、或者是指定了一个fieldLabel 、或者指定isFormField=true 时此配置才有效。

另请参见 Ext.layout.FormLayout. fieldTpl。

Component
cls : String
一个可选的额外CSS类，它将被添加到当前组件的元素上(默认为'')...
一个可选的额外CSS类，它将被添加到当前组件的元素上(默认为'')。 此属性对于在组件上，或者它的任何使用标准CSS规则的孩子节点上， 添加定制的样式非常有用。
Component
contentEl : String
(可选)指定一个已存在的HTML元素，或者一个已存在HTML元素的...

(可选)指定一个已存在的HTML元素，或者一个已存在HTML元素的 id ，它们将被用作当前组件的内容。

  • 描述 :
    此配置选项被用来将一个已存在的HTML元素 插入到一个新组件(在组件渲染之后它简单地移动DOM元素) 的layout元素中，使它成为该组件的内容。
  • 注意 :
    指定的HTML元素将被append到组件的layout元素中， 在所有配置的 HTML 被插入之后， 并且，这样的话，在render事件 被触发时，document中将不再包含此元素。
    指定的HTML元素将不会参与组件所有可能使用的 layout 过程(译者注：指这些HTML元素 不会参与布局操作)。 它仅是HTML而已。布局操作实在孩子 items 上进行的。
    添加 x-hidden 或者 x-hide-display CSS类，以防在内容渲染到panel时发生闪烁。
Component
ctCls : String
一个可选的外部CSS样式，添加到这个组件的容器(默认值为 '')。 这个方法对于使用标准的CSS规则...

一个可选的外部CSS样式，添加到这个组件的容器(默认值为 '')。 这个方法对于使用标准的CSS规则，为组件或它的任何一个子组件添加特定的样式非常有用。 参见 Ext.layout.ContainerLayout和 extraCls 。

注意: ctCls 默认为 ''期望如下的类，它们将指定一个默认值:

  • Box Layout : 'x-box-layout-ct'
使用一个额外的CSS类配置以上的Class，它是append到默认对象上的。例如， 对于BoxLayout (Hbox and Vbox):
                                ctCls: 'x-box-layout-ct custom-class'

Component
data : Mixed
初始化数据集，它将被应用到 tpl 上以刷新组件的内容区域。
Component
disabled : Boolean
当前组件处于无效状态时为true。 Read-only.
Component
disabledClass : String
当组件处于无效状态时添加到组件上的CSS类(默认为 'x-item-disabled')。
Component
fieldLabel : String
紧靠此field显示的标签文本(默认值为 '')。注意...

紧靠此field显示的标签文本(默认值为 '')。

注意:只有在当前组件被渲染到一个使用FormLayout 的容器中时，此配置才有效。 (例如 Ext.form.FormPanel 或 指定 layout:'form')。

另请参见 hideLabel 、 Ext.layout.FormLayout和 fieldTpl。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Name'
    }]
});
Component
flex : Number
注: 这个配置只用于该组件被包含在一个已使用BoxLayout配置的Container中时...

注: 这个配置只用于该组件被包含在一个已使用BoxLayout配置的Container中时。通过计算每一个子组件的flex值所占全部flex值之和的比例，来决定子组件的宽(HBoxLayout)高(VBoxlayout)。 任何子项的 flex = 0 或 flex = undefined 将不被设置(初始值大小将不被改变)。

BoxComponent
forId : String
input元素的id，label将会被通过标准的HTML 'for'属性绑定到其上。 如果不指定...
input元素的id，label将会被通过标准的HTML 'for'属性绑定到其上。 如果不指定，此属性将不会被添加到label上。
Label
height : Number
组件的高度(默认值为 auto)。注:如果想使用百分比的方式...
组件的高度(默认值为 auto)。注:如果想使用百分比的方式来设置值，请查看 Ext.Component.anchor。
BoxComponent
hidden : Boolean
如果当前组件处于隐藏状态，此值为true。Read-only。
Component
hideLabel : Boolean
true时完全隐藏label元素 ( label 和 separator)。 默认为 false。 默认情况下，即使你不指定...

true时完全隐藏label元素 ( label 和 separator)。 默认为 false。 默认情况下，即使你不指定 fieldLabel 它的空间仍然会被保留，这样这块区域会与其它确实拥有label的区域位于同一排。 讲此值设置为 true 将导致此区域不再保留此空间。

注意: 参见 clearCls 的注释。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield'
        hideLabel: true
    }]
});
Component
hideMode : String
组件如何隐藏，支持的值有： 'visibility' (css visibility), 'offsets' (位置偏移量为负值) 和...

组件如何隐藏，支持的值有： 'visibility' (css visibility), 'offsets' (位置偏移量为负值) 和 'display' (css display).

注意:一般首选默认值 'display'，因为当组件第一次显示的时候它们会自动进行布局 (隐藏的时候不会调整尺寸)。

Component
hideParent : Boolean
此值为true时，当调用hide/show方法时，将会hide和show组件的容器...
此值为true时，当调用hide/show方法时，将会hide和show组件的容器；false时将会 hide和show组件自身(默认为false)。例如，这可以用作window上隐藏按钮的一种 快捷操作，通过设置此按钮的hideParent:true，然后把它添加到window上。
Component
html : String
一个HTML片段，将被用作label的innerHTML(默认为'')。 注意，如果指定了 text ，它将会被优先使用...
一个HTML片段，将被用作label的innerHTML(默认为'')。 注意，如果指定了 text ，它将会被优先使用，并且此配置项的值将会被忽略。
Label
id : String
当前组件唯一的id(默认为auto-assigned id)...

当前组件唯一的id(默认为auto-assigned id)。 如果你需要在以后访问组件，而又没有一个有效的组件对象引用，那么你需要指定一个 id( 也就是，使用Ext. getCmp方法 )。

注意，此id也将被用作组件底层HTML标签的id，这些标签被渲染到页面中。 这将允许你编写基于id的CSS规则，以独立地描述指定的实例；并且，也可以通过 组件父标签的id选中子元素。

注意:为了避免与唯一的id 产生重复， 请参见 itemId 和 ref 。

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

Component
itemCls : String
注意: 只有在当前组件被渲染到一个使用FormLayout 布局的 容器中时此配置才有效...

注意: 只有在当前组件被渲染到一个使用FormLayout 布局的 容器中时此配置才有效。 (例如Ext.form.FormPanel 或者指定 layout:'form')。

一个附加的CSS类，应用到div上，包装当前field的表单元素。 如果提供了此参数， field级上的itemCls将会覆盖 container级上提供的 默认itemCls。 为itemCls指定的值将会被添加默认的 类('x-form-item')。

既然它被应用到项目的包装器上(参见 Ext.layout.FormLayout。 fieldTpl)， 它将允许你编写能应用到此field、label(如果有指定)、或者field内部任何其它元素的标准CSS规则。

注意: 参考 fieldLabel的注释。 .

示例用法:

// Apply a style to the field's label:
<style>
    .required .x-form-item-label {font-weight:bold;color:red;}
</style>

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Name',
        itemCls: 'required' //this label will be styled
    },{
        xtype: 'textfield',
        fieldLabel: 'Favorite Color'
    }]
});
Component
itemId : String
当没有可利用的对象引用时，itemId可以作为第二选择，用来获得一个组件的引用， 代替 ...

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

var c = new Ext.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'); // 与 Ext.getCmp()不同

p2 = p1.ownerCt.getComponent('p2'); // 通过兄弟对象获得引用

另请参见 id 和 ref 。

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

Component
labelSeparator : String
每个fieldLabel 文本后面现实的分隔符。 此属性可以在多个层次上进行配置...

每个fieldLabel 文本后面现实的分隔符。 此属性可以在多个层次上进行配置。优先顺序为：

  • field / component level
  • container level
  • layout level (默认为冒号 ':')
如不需要为当前field的label显示分隔符，指定一个空字符串''即可。

注意:参见 clearCls 的注释。

另请参见 hideLabel 和 Ext.layout.FormLayout。 fieldTpl。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    layoutConfig: {
        labelSeparator: '~'   // layout config has lowest priority (defaults to ':')
    },
    labelSeparator: '>>',     // config at container level
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Field 1',
        labelSeparator: '...' // field/component level config supersedes others
    },{
        xtype: 'textfield',
        fieldLabel: 'Field 2' // labelSeparator will be '='

    }]
});
Component
labelStyle : String
一个CSS样式描述字符串，它将直接应用到当前field的label上...

一个CSS样式描述字符串，它将直接应用到当前field的label上。 如果有设置，默认为容器的labelStyle值(例如 Ext.layout.FormLayout.labelStyle , 或者 '')。

注意:参见 clearCls 的注释。

另请参见 hideLabel 和 Ext.layout.FormLayout. fieldTpl。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Name',
        labelStyle: 'font-weight:bold;'
    }]
});
Component
listeners : Object
一个包含一个或多个事件处理器的配置对象，会在初始化的时候被添加到目标对象上...

一个包含一个或多个事件处理器的配置对象，会在初始化的时候被添加到目标对象上。 该配置对象应该是一个有效的监听器配置对象就像 addListener例子中指定的一样可一次附加多个处理器。

ExtJs Components上的DOM事件

一些 ExtJs Component 类导出时会选择一些DOM事件(例如 "click", "mouseover" 等等), 这通常只是在有额外的值可以被添加时发生。例如DataView类的 click事件会传递被点击的节点。也可以直接在Component的HTMLElementevent上访问DOM事件，但必需在Component被渲染后监听器才能添加到Element 上。可以按照以下步骤添加插件:

// 插件会用一个监听器配置对象进行配置。
//该组件会被添加到所有处理方法的参数列表上。
Ext.DomObserver = Ext.extend(Object, {
    constructor: function(config) {
        this.listeners = config.listeners ? config.listeners : config;
    },

    // 组件将自己传递进了插件的初始化方法里
    init: function(c) {
        var p, l = this.listeners;
        for (p in l) {
            if (Ext.isFunction(l[p])) {
                l[p] = this.createHandler(l[p], c);
            } else {
                l[p].fn = this.createHandler(l[p].fn, c);
            }
        }

        // 渲染后立即添加监听器到元素上
        c.render = c.render.createSequence(function() {
            var e = c.getEl();
            if (e) {
                e.on(l);
            }
        });
    },

    createHandler: function(fn, c) {
        return function(e) {
            fn.call(this, e, c);
        };
    }
});

var combo = new Ext.form.ComboBox({

    // 元素被点击后折叠
    plugins: [ new Ext.DomObserver({
        click: function(evt, comp) {
            comp.collapse();
        }
    })],
    store: myStore,
    typeAhead: true,
    mode: 'local',
    triggerAction: 'all'
});

Observable
margins : Object
注:此配置只用于该组件展现在一个使用BorderLayout...

注:此配置只用于该组件展现在一个使用BorderLayout 或 BoxLayout的两个子类之一作为布局的容器。

这个margins对象在该组件中的格式为：

{top: (top margin),right: (right margin),bottom: (bottom margin),left: (left margin)}

也可以是一个字符串，中间用空格分隔，margin值为数字。 把matches中每一个值的次序跟CSS中margin值的排列方式相对应：

  • 如果只有一个值，它适用于所有方面。
  • 如果有两个值，top和bottom的边框设置为第一个值，left和right设置为第二个值。
  • 如果有三个值，top设置为第一个值，left和right设置为第二个值，bottom设置为第三个值。
  • 如果有四个值，分别设置为top, right, bottom, left。

默认值:

{top:0, right:0, bottom:0, left:0}
BoxComponent
overCls : String
一个可选的额外的CSS类，它将在鼠标移过元素时被添加到组件上...
一个可选的额外的CSS类，它将在鼠标移过元素时被添加到组件上，鼠标移出时 删除。(默认为'')。此属性对于在组件上，或者它的任何使用标准CSS规则的孩子节点上， 添加定制的'active' 或者 'hover'样式非常有用。
Component
pageX : Number
如果该组件被包含在一个指定位置的容器中，这个值表示页面级的x坐标值（译者注：在有滚动条的情况下这个值很有用）。
BoxComponent
pageY : Number
如果该组件被包含在一个指定位置的容器中，这个值表示页面级的y坐标值（译者注：在有滚动条的情况下这个值很有用）。
BoxComponent
plugins : Object/Array
一个对象或者一个对象数组，为组件提供特殊的功能 ...
一个对象或者一个对象数组，为组件提供特殊的功能。 对一个合法的插件唯一的要求是它含有一个init()方法， 能接收一个Ext.Component型的参数。 当组件被创建时，如果有可用的插件，组件将会调用每个插件的init方法， 并将自身的引用作为方法参数传递给它。然后，每个插件就可以调用方法或者响应组件上的事件， 就像需要的那样提供自己的功能。
Component
ptype : String
需要创建配置的ptype。 当传递一个配置对象给构造函数时...
需要创建配置的ptype。 当传递一个配置对象给构造函数时，此配置选项不会被使用。 只有在使用懒初始化的时候此配置项才会被使用， 此时Plugin不是 通过一个完整的实例组件，而是通过一个Component配置指定的。 在渲染时，将会查找ptype以决定创建何种类型的Plugin。

如果你创建自己的Plugin，你可以通过 Ext.ComponentMgr.registerPlugin 对它们进行注册，以便能利用懒初始化和渲染机制。
Component
ref : String
一个路径描述，与组件的 ownerCt 相关，它描述了把当前组件的命名引用放置到哪个父容器中去。...

一个路径描述，与组件的 ownerCt 相关，它描述了把当前组件的命名引用放置到哪个父容器中去。

祖先的坐标路径可以通过'/'字符进行分隔。 例如，将一个Toolbar Button的引用放入 拥有此Toolbar的Panel中:

var myGrid = new Ext.grid.EditorGridPanel({
    title: 'My EditorGridPanel',
    store: myStore,
    colModel: myColModel,
    tbar: [{
        text: 'Save',
        handler: saveChanges,
        disabled: true,
        ref: '../saveButton'
    }],
    listeners: {
        afteredit: function() {
//          The button reference is in the GridPanel
            myGrid.saveButton.enable();
        }
    }
});

在上面的代码中，如果 ref 是 'saveButton' ，那么引用将会被放置到Toolbar中。 ref 中的每个'/' 都会从组件的 ownerCt 向上移动一级。

另请参见 added 和 removed 事件。

Component
region : String
注: 此配置只用于该组件展现在一个布局为BorderLayout的容器中...

注: 此配置只用于该组件展现在一个布局为BorderLayout的容器中(例如指定layout:'border')。

详见Ext.layout.BorderLayout。

BoxComponent
renderTo : Mixed
该值可以是一个节点的id、一个DOM节点或者一个已存在的元素...

该值可以是一个节点的id、一个DOM节点或者一个已存在的元素， 组件将会被渲染到其中。

  • 注意 :
      如果组件不是一个Container 的子项目时， 不要使用此选项。 渲染和管理它的子项目是一个Container 的layout manager的责任。
      当使用此配置项时，无需调用render()方法。

另请参见 render 。

Component
stateEvents : Array
一个事件数组，当它们被触发时，组件需要保存自己的状态(默认值为 none)...

一个事件数组，当它们被触发时，组件需要保存自己的状态(默认值为 none)。 它们可以是任何该组件支持的事件类型，包括浏览器事件和 自定义事件(例如['click', 'customerchange'])。

对于保存和恢复组件状态的详细解释，参见 stateful

Component
stateId : String
为该组件指定的唯一的id值，它被用作管理组件状态的目的...
为该组件指定的唯一的id值，它被用作管理组件状态的目的。 (如果设定了id，默认值为组件自己的id，否则，如果组件使用自动生成的id，此值为null)。

对于保存和反解析组件状态的解释，参见 stateful 。

Component
stateful : Boolean
一个标志参数，它将引起组件在启动时尝试从一个保存的状态中恢复内部状态参数...

一个标志参数，它将引起组件在启动时尝试从一个保存的状态中恢复内部状态参数。 组件必须要么拥有一个 stateId 或者 id ，它们被分配给需要被管理的状态属性。 在跨页面加载时，不保证自动生成的id属性的稳定性， 并且，不能依赖此id来保存和恢复一个组件的相同状态。

为了保存状态的操作能够工作，状态管理器的提供者必须 被设置成一个Ext.state.Provider 的实现类，它覆盖了set 和get 方法，以便保存和恢复name/value对。 有一个内置的Ext.state.CookieProvider 可用。

为当前页面设置状态提供者:

Ext.state.Manager.setProvider(new Ext.state.CookieProvider({
    expires: new Date(new Date().getTime()+(1000*60*60*24*7)), //7 days from now
}));

当 stateEvents 配置项中其中之一的事件被触发时， 一个状态可保存的组件将试图保存其状态。

保存状态时，一个可保存状态的组件首先需要通过调用 getState 方法来序列化它的状态。 默认情况下，此函数什么事都不做。 开发者必须提供一个实现，返回一个hash对象，它描述了组件可恢复的状态。

getState方法产生的值将会传递给 Ext.state.Manager.set 方法，它使用配置的 Ext.state.Provider 来保存对象，以组件的 stateId 为key，或者，如果此值（指stateId）没有指定时， 使用它的 id 作为key。

在进行构造时，一个可保存状态的组件试图通过调用 Ext.state.Manager.get方法来 恢复它的状态，传递 stateId 或者，如果此值（指stateId）没有指定时， 使用它的 id 作为参数。

结果对象被传递给 applyState 。 applyState 的默认实现只是简单地把属性拷贝到对象中， 但是开发者可以覆盖此方法以支持更多行为。

通过向 beforestaterestore, staterestore, beforestatesave 和 statesave 事件上绑定监听器，你可以在保存和恢复状态时进行额外的处理。

Component
style : String
被添加到组件元素的特定样式。 必须是按照...
被添加到组件元素的特定样式。 必须是按照 Ext.Element.applyStyles 类指定格式的合法参数值。

new Ext.Panel({
    title: 'Some Title',
    renderTo: Ext.getBody(),
    width: 400, height: 300,
    layout: 'form',
    items: [{
        xtype: 'textarea',
        style: {
            width: '95%',
            marginBottom: '10px'
        }
    },
        new Ext.Button({
            text: 'Send',
            minWidth: '100',
            style: {
                marginBottom: '10px'
            }
        })
    ]
});
Component
tabTip : String
注: 这个配置只用于当该组件作为TabPanel的一个子项目时使用...

注: 这个配置只用于当该组件作为TabPanel的一个子项目时使用。

一个String类型的innerHTML(支持html标签)，当鼠标放在该选项上的时，显示一个tooltip。为了tips能够被渲染，Ext.QuickTips.init()必须被提前调用。
BoxComponent
text : String
需要在label中显示的简单文本值(默认为'')。 如果你需要在label的innerHTML中包含标签，请使用...
需要在label中显示的简单文本值(默认为'')。 如果你需要在label的innerHTML中包含标签，请使用 html配置项替代。
Label
tpl : Mixed
一个 Ext.Template , Ext.XTemplate 或者一个用来形成一个Ext.XTemplate的字符串数组...
一个 Ext.Template , Ext.XTemplate 或者一个用来形成一个Ext.XTemplate的字符串数组。 与 data 和 tplWriteMode 配置项协同使用。
Component
tplWriteMode : String
刷新组件的内容区域时使用的Ext.(X)Template方式。 默认为'overwrite' (参见 Ext.XTemplate.overwrite )。
刷新组件的内容区域时使用的Ext.(X)Template方式。 默认为'overwrite' (参见 Ext.XTemplate.overwrite )。
Component
width : Number
组件的宽度(默认值为 auto)。注:如果想使用百分比的方式...
组件的宽度(默认值为 auto)。注:如果想使用百分比的方式来设置值，请查看 Ext.Component.anchor。
BoxComponent
x : Number
如果被包含在一个指定位置的容器中，这个值表示x(left)坐标值。
BoxComponent
xtype : String
需要创建配置的xtype。 当传递一个配置对象给构造函数时...
需要创建配置的xtype。 当传递一个配置对象给构造函数时，此配置选项不会被使用。 只有在使用懒初始化的时候此配置项才会被使用，此时容器的子项目不是 通过一个完整的实例组件，而是通过一个Component配置指定的。 在渲染时，将会查找xtype以决定创建何种类型的子组件。

预定义的xtype列表如下： here。

如果你继承Component创建你自己的组件，你需要使用Ext.ComponentMgr.registerType 对它们进行注册，以便利用懒初始化和渲染机制。
Component
y : Number
如果被包含在一个指定位置的容器中，这个值表示y(top)坐标值。
BoxComponent

公共属性

Property Defined By
disabled : Boolean
当前组件处于无效状态时为true。 Read-only.
Component
el : Ext.Element
封装了当前组件的Ext.Element。 Read-only。通常情况下，这将是一个<DIV>元素，它由此类的...

封装了当前组件的Ext.Element。 Read-only。

通常情况下，这将是一个<DIV>元素，它由此类的 onRender方法创建，但是它可以通过使用 autoEl 配置项进行覆盖。

注意: 直到组件渲染完成此元素都将处于无效状态。

如需向当前组件的 DOM事件(而不是当前组件自己的Observable事件)添加监听器， 更多建议，参见 listeners 配置项，或者直接使用一个render监听器:

new Ext.Panel({
    title: 'The Clickable Panel',
    listeners: {
        render: function(p) {
            // Append the Panel to the click handler's argument list.
            p.getEl().on('click', handlePanelClick.createDelegate(null, [p], true));
        },
        single: true  // Remove the listener after first invocation
    }
});

另请参见 getEl

Component
hidden : Boolean
如果当前组件处于隐藏状态，此值为true。Read-only。
Component
initialConfig : Object
当前组件的初始化配置描述。 Read-only。
Component
ownerCt : Ext.Container
组件所属的Container (默认为undefined，当前组件被添加到一个容器中时此值被自动设置)...
组件所属的Container (默认为undefined，当前组件被添加到一个容器中时此值被自动设置)。 Read-only。

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

Component
refOwner : Ext.Container
如果当前组件是一个容器的孩子，并且是通过一个 ref 配置项被注册的，则此值为 ref 引用被插入到的祖先容器。
如果当前组件是一个容器的孩子，并且是通过一个 ref 配置项被注册的，则此值为 ref 引用被插入到的祖先容器。
Component
rendered : Boolean
如果当前组件已经被渲染了，此值为true。Read-only.
Component

公共方法

Method Defined By
Label ( Ext.Element/String/Object config )
创建一个新的Label
创建一个新的Label
参数:
  • config : Ext.Element/String/Object
    配置选项。 如果传递一个元素，它将被设置为内部元素并且它的id被用作组件的id。 如果传递一个字符串，它将被假定为一个现有元素的id并且被用作组件的id。 其它情况，它将被假定为一个标准的配置对象并且被应用到组件上。
返回值:
  • void
Label
addClass ( string cls ) : Ext.Component
为组件底层的元素添加CSS样式。
为组件底层的元素添加CSS样式。
参数:
  • cls : string
    需要添加的CSS样式的class名称
返回值:
  • Ext.Component
    this
Component
addEvents( Object|String o, string Optional. ) : void
添加指定的事件到事件列表上，事件会被该Observable触发。
添加指定的事件到事件列表上，事件会被该Observable触发。
参数:
  • o : Object|String
    以事件名作为属性true作为值的对象 或者当多个事件名被分开的传递时则为第一个事件名。
  • Optional. : string
    事件名被分开的传递时则为事件名。 用法:
    this.addEvents('storeloaded', 'storecleared');
返回值:
  • void
Observable
addListener( String eventName, Function handler, [Object scope], [Object options] ) : void
给对象添加事件处理器。
给对象添加事件处理器。
参数:
  • eventName : String
    监听的事件名。
  • handler : Function
    事件调用的方法
  • scope : Object
    （可选）处理方法执行的作用域 (this的引用 reference)。 如果被忽略。默认为触发事件的对象。
  • options : Object
    （可选）包含处理器配置和属性的对象。 可能包含以下的属性:
    • scope : Object
      处理方法执行的作用域(this的引用) 。 如果被忽略。默认为触发事件的对象。
    • delay : Number
      在触发事件后延迟调用处理器的毫秒数。
    • single : Boolean
      如果为True则添加一个处理器来处理下一次的事件触发（仅一次），然后移除自己。
    • buffer : Number
      使得处理器延迟指定毫秒数后预定的运行在 一个Ext.util.DelayedTask中 。 如果事件在时间内再一次被触发，原始的处理器不会被调用，但是新的处理器会预定的在他的位置上。
    • target : Observable
      如果事件在目标的Observable上触发则仅仅调用处理器， 否则 事件会从子类的Observable上冒泡

    组合选项
    使用这些选项参数,可能会组合出不同类型的监听器：

    一个延迟的，一次性的监听器。

    myDataView.on('click', this.onClick, this, {
single: true,
delay: 100
});

    一次调用附加多个处理器
    该方法同样支持传递一个包含指定的多个处理器的属性的配置对象参数。

    myGridPanel.on({
'click' : {
    fn: this.onClick,
    scope: this,
    delay: 100
},
'mouseover' : {
    fn: this.onMouseOver,
    scope: this
},
'mouseout' : {
    fn: this.onMouseOut,
    scope: this
}
});

    或者一个简写的语法：

    myGridPanel.on({
'click' : this.onClick,
'mouseover' : this.onMouseOver,
'mouseout' : this.onMouseOut,
 scope: this
});
返回值:
  • void
Observable
applyToMarkup ( String/HTMLElement el ) : void
将此组件添加到已存在的有效的HTML标签中。 使用该方法时，无需再调用render()方法。
将此组件添加到已存在的有效的HTML标签中。 使用该方法时，无需再调用render()方法。
参数:
  • el : String/HTMLElement
返回值:
  • void
Component
cloneConfig ( Object overrides ) : Ext.Component
默认使用原先传递给当前实例的配置值克隆当前组件。
默认使用原先传递给当前实例的配置值克隆当前组件。
参数:
  • overrides : Object
    一个新的配置项，包含需要覆盖到克隆版本的所有属性。 可以传递一个id参数给此对象，否则将自动生成一个新的id以避免发生重复。
返回值:
  • Ext.Component
    当前组件的克隆副本
Component
destroy () : void
通过如下方法销毁对象：删除所有的事件监听器、将组件的元素从DOM树中删除...
通过如下方法销毁对象：删除所有的事件监听器、将组件的元素从DOM树中删除（如果可以）、 将组件从它的 Ext.Container（如果可用）中删除、 并且将它从Ext.ComponentMgr中 注销。 销毁操作一般由框架自动完成，一般情况下不需要直接调用该方法。
参数:
  • 无。
返回值:
  • void
Component
disable () : Ext.Component
将组件置为无效状态，并出发'disable'事件。
将组件置为无效状态，并出发'disable'事件。
参数:
  • 无。
返回值:
  • Ext.Component
    this
Component
enable () : Ext.Component
将组件置为有效状态并触发'enable'事件。
将组件置为有效状态并触发'enable'事件。
参数:
  • 无。
返回值:
  • Ext.Component
    this
Component
enableBubble( String/Array events ) :void
是否现在使得事件会被该Observable触发并调用 this.getBubbleTarget()方法在拥有者的继承树...

是否现在使得事件会被该Observable触发并调用 this.getBubbleTarget()方法在拥有者的继承树中冒泡。Observable的基础类中没有该方法的实现。

该方法一般被Ext.Components用来冒泡事件到拥有者的容器。参看Ext.Component.getBubbleTarget默认的实现 在Ext.Component中返回组件的直接拥有者。但是如果需要的是一个已知的目标，该方法可以被重写来更快的访问需求的目标。

例子:

Ext.override(Ext.form.Field, {
    // 添加方法到Field的initComponent上改变事件为冒泡
    initComponent : Ext.form.Field.prototype.initComponent.createSequence(function() {
        this.enableBubble('change');
    }),

    // 我们知道我们想让Field的事件冒泡到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() {
            // 如果样式被修改标题会变红。
            myForm.header.setStyle('color', 'red');
        }
    }
});
参数:
  • events : String/Array
    冒泡的事件名，或事件名数组
返回值:
  • void
Observable
findParentBy ( Function fn ) : Ext.Container
通过自定义的函数查找当前组件上层任何层次上的容器...
通过自定义的函数查找当前组件上层任何层次上的容器。 如果传递的函数返回true，容器对象将被返回。
参数:
  • fn : Function
    自定义的函数，使用如下参数调用(container,this component)。
返回值:
  • Ext.Container
    自定义函数返回true的第一个容器
Component
findParentByType ( String/Class xtype ) : Ext.Container
通过xtype或者class查找当前组件上层任何层次上的容器
通过xtype或者class查找当前组件上层任何层次上的容器
参数:
  • xtype : String/Class
    组件的xtype字符串，或者直接是组件的class
返回值:
  • Ext.Container
    符合指定xtype或者class的第一个容器
Component
fireEvent( String eventName, Object... args ) : Boolean
用传入的参数触发指定的事件 (减去事件名)。 一个事件可以被设置为冒泡 Obse...

用传入的参数触发指定的事件 (减去事件名)。

一个事件可以被设置为冒泡到Observable父类继承树(参看 Ext.Component.getBubbleTarget) 调用enableBubble实现。

参数:
  • eventName : String
    触发的事件名。
  • args : Object...
    传递给处理器的可变长度参数。
返回值:
  • Boolean
    如果有任何的处理器返回false则返回false，否则返回true。
Observable
focus ( [ Boolean selectText ], [ Boolean/Number delay ] ) : Ext.Component
尝试将当前组件设为焦点。
尝试将当前组件设为焦点。
参数:
  • selectText : Boolean
    (可选) 如果可用，同时选中组件内部的文本
  • delay : Boolean/Number
    (可选)将当前组件设置为焦点的延迟时间(设置为true等于0毫秒)
返回值:
  • Ext.Component
    this
Component
getBox ( [ Boolean local ] ) : Object
获取组件底层元素当前盒子模型的尺寸。（译者注：盒子模型是CSS术语，详细解释请自行搜索。）
获取组件底层元素当前盒子模型的尺寸。（译者注：盒子模型是CSS术语，详细解释请自行搜索。）
参数:
  • local : Boolean
    (可选)值为true时，组件的left值和top值将代替页面的XY被返回。(默认值为false)
返回值:
  • Object
    返回值的格式{x, y, width, height}
BoxComponent
getBubbleTarget () : Ext.Container
为Observable的fireEvent方法提供链接，它沿着继承结构进行冒泡操作。
为Observable的fireEvent方法提供链接，它沿着继承结构进行冒泡操作。
参数:
  • 无。
返回值:
  • Ext.Container
    拥有当前组件的容器。
Component
getEl () : Ext.Element
返回 Ext.Element ，它包装了当前组件。...

返回 Ext.Element ，它包装了当前组件。

通常情况下，这将是一个<DIV>元素，它是由该类的onRender方法创建的， 但是可以使用autoEl配置项 覆盖它。

注意: 此元素将会一直处于无效状态直到当前组件渲染完成。

如需向当前组件的 DOM事件(而不是当前组件自己的Observable事件)添加监听器， 更多建议，参见 listeners 配置项，或者直接使用一个render监听器:

new Ext.Panel({
    title: 'The Clickable Panel',
    listeners: {
        render: function(p) {
            // Append the Panel to the click handler's argument list.
            p.getEl().on('click', handlePanelClick.createDelegate(null, [p], true));
        },
        single: true  // Remove the listener after first invocation
    }
});
参数:
  • 无。
返回值:
  • Ext.Element
    包装当前组件的元素。
Component
getHeight () : Number
获取该组件的当前高度值。
获取该组件的当前高度值。
参数:
  • 无。
返回值:
  • Number
BoxComponent
getId () : String
返回当前组件的id，如果没有定义id，则自动生成并返回一个id:'ext-comp-'...
返回当前组件的 id 如果没有定义 id 则自动生成并返回一个 id

'ext-comp-' + (++Ext.Component.AUTO_ID)
参数:
  • 无。
返回值:
  • String
    id
Component
getItemId () : String
返回当前组件的 itemId 。 如果没有通过配置参数指定 itemId 那么，将会使用...
返回当前组件的 itemId 。 如果没有通过配置参数指定 itemId 那么，将会使用 getId 返回 id 。
参数:
  • 无。
返回值:
  • String
Component
getOuterSize () : Object
获取当前组件所在元素的尺寸大小，包括边缘的空白处。
获取当前组件所在元素的尺寸大小，包括边缘的空白处。
参数:
  • 无。
返回值:
  • Object
    一个包含元素大小的对象 {width: (element width + left/right margins), height: (element height + top/bottom margins)}
BoxComponent
getPosition ( [ Boolean local ] ) : Array
获取组件底层元素当前的XY位置。
获取组件底层元素当前的XY位置。
参数:
  • local : Boolean
    (可选)如果为true，将返回元素的left和top值，而不是相对于页面内的 XY。(默认值为 false)
返回值:
  • Array
    元素的XY位置值(例如：[100, 200])
BoxComponent
getResizeEl () : Ext.Element
返回该组件的最外层用来定义这些组件整体大小的Element...

返回该组件的最外层用来定义这些组件整体大小的Element对象。

通常用 getEl 方法将会返回相同的Element对象，但在有些情况下，组件可能有一些更多的封装了它的主要动态Element对象的Element对象。

例如ComboBox。它是封装在一个包含<input>元素的包装元素里(这将返回其 getEl方法和触发按钮的元素)。返回的元素为resizeEl。

参数:
  • 无。
返回值:
  • Ext.Element
    The Element which is to be resized by size managing layouts.
BoxComponent
getSize () : Object
获取组件底层元素当前的大小。
获取组件底层元素当前的大小。
参数:
  • 无。
返回值:
  • Object
    一个包含元素大小的对象{width: (element width), height: (element height)}
BoxComponent
getWidth () : Number
获取该组件的当前宽度值。
获取该组件的当前宽度值。
参数:
  • 无。
返回值:
  • Number
BoxComponent
getXType () : String
获取当前组件的xtype，它是用 Ext.ComponentMgr 注册的。 所有可用的xtype列表，参见...
获取当前组件的xtype，它是用 Ext.ComponentMgr 注册的。 所有可用的xtype列表，参见 Ext.Component 类头部。示例用法:

var t = new Ext.form.TextField();
alert(t.getXType());  // alerts 'textfield'
参数:
  • 无。
返回值:
  • String
    The xtype
Component
getXTypes () : String
返回此组件的xtype继承树，用字符'-'分隔。 所有可用的xtype值...

返回此组件的xtype继承树，用字符'-'分隔。 所有可用的xtype值，请参见Ext.Component 类的头部。

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

示例用法:

var t = new Ext.form.TextField();
alert(t.getXTypes());  // alerts 'component/box/field/textfield'
参数:
  • 无。
返回值:
  • String
    xtype层次字符串
Component
hasListener( String eventName ) : Boolean
检测对象是否包含指定事件的任何监听器
检测对象是否包含指定事件的任何监听器
参数:
  • eventName : String
    检测的事件名
返回值:
  • Boolean
    如果事件被监听则为true，否则为false
Observable
hide () : Ext.Component
隐藏当前组件。 监听 beforehide' 事件并且返回false 可以取消隐藏组件的操作。 在隐藏组件之后触发...
隐藏当前组件。 监听 beforehide' 事件并且返回false 可以取消隐藏组件的操作。 在隐藏组件之后触发 ' hide' 事件。 如果组件被配置成 hidden 那么此方法在内部被调用。
参数:
  • 无。
返回值:
  • Ext.Component
    this
Component
isVisible () : Boolean
如果当前组件可见，返回true。
如果当前组件可见，返回true。
参数:
  • 无。
返回值:
  • Boolean
    如果当前组件可见，返回true，其它返回false。
Component
isXType ( String xtype , [ Boolean shallow ] ) : Boolean
Tests whether or not this Component is of a specific xtype. This can test whether this Component is descended from th...

测试此组件是否是指定的xtype。此方法既可以测试是否是指定的xtype的某个子类， 或者它是否直接是指定的xtype类(shallow=true)。

如果使用你自己的子类，必须知道组件必须注册它的xtype值。

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

示例用法:

var t = new Ext.form.TextField();
var isText = t.isXType('textfield');        // true
var isBoxSubclass = t.isXType('box');       // true, descended from BoxComponent
var isBoxInstance = t.isXType('box', true); // false, not a direct BoxComponent instance
参数:
  • xtype : String
    需要为当前组件进行检测的xtype
  • shallow : Boolean
    (可选) 如果为false，检测组件是否是xtype继承树中的某个子类（默认是这种情况）， 如果为true，只检测组件是否是指定的xtype类型。
返回值:
  • Boolean
    如果当前组件是指定xtype的子类，返回true，其它返回flase。
Component
mon ( Observable|Element item , Object|String ename , Function fn , Object scope , Object opt ) : void
向任何Observable对象(或者元素)上添加监听器，监听器将会在组件...

向任何Observable对象(或者元素)上添加监听器，监听器将会在组件销毁时被自动删除。
用法：

myGridPanel.mon(myGridPanel.getSelectionModel(), 'selectionchange', handleSelectionChange, null, {buffer: 50});

or:

myGridPanel.mon(myGridPanel.getSelectionModel(), {
    selectionchange: handleSelectionChange,
    buffer: 50
});
参数:
  • item : Observable|Element
    需要添加listener/listeners的项目。
  • ename : Object|String
    事件名，或者一个包含事件名属性的对象。
  • fn : Function
    (可选) 如果 ename 参数是一个事件名，此参数为处理函数。
  • scope : Object
    (可选)如果 ename 参数是一个事件名称，此参数是作用域 ( this 引用)，监听函数将会在此作用域中被执行。
  • opt : Object
    (可选)如果 ename 参数是一个事件名称， 此参数是 addListener 配置项。
返回值:
  • void
Component
mun ( Observable|Element item , Object|String ename , Function fn , Object scope ) : void
删除通过mon 方法添加的监听器。
删除通过mon 方法添加的监听器。
参数:
  • item : Observable|Element
    需要删除listener/listeners的项目。
  • ename : Object|String
    事件名称，或者一个包含事件名称属性的对象。
  • fn : Function
    (可选)如果 ename 参数是一个事件名称，此参数是一个处理函数。
  • scope : Object
    (可选)如果 ename 参数是一个事件名称，此参数是作用域 ( this 引用)，监听函数将会在此作用域中被执行。
返回值:
  • void
Component
nextSibling () : Ext.Component
返回所属容器中的下一个组件
返回所属容器中的下一个组件
参数:
  • 无。
返回值:
  • Ext.Component
Component
on( String eventName, Function handler, [Object scope], [Object options] ) : void
给对象添加事件处理器 (addListener的简写形式)
给对象添加事件处理器 (addListener的简写形式。)
参数:
  • eventName : String
    监听的事件类型
  • handler : Function
    事件调用的方法
  • scope : Object
    （可选）处理方法执行时的作用域 (this 的引用)。 如果被忽略。默认为触发事件的对象。
  • options : Object
    可选 包含处理器配置的对象。
返回值:
  • void
Observable
previousSibling () : Ext.Component
返回所属容器中的前一个组件
返回所属容器中的前一个组件
参数:
  • 无。
返回值:
  • Ext.Component
Component
purgeListeners() : void
移除对象上所有的监听器
移除对象上所有的监听器
参数:
  • 无。
返回值:
  • void
Observable
relayEvents( Object o, Array events ) : void
从指定的Observable上传递选择的事件就好像被当前对象触发一样。
从指定的Observable上传递选择的事件就好像被当前对象触发一样。
参数:
  • o : Object
    该Observable上的事件被当前对象传递。
  • events : Array
    传递的数组名。
返回值:
  • void
Observable
removeClass ( string cls ) : Ext.Component
从组件底层的元素上删除一个CSS类。
从组件底层的元素上删除一个CSS类。
参数:
  • cls : string
    需要移除的CSS类名
返回值:
  • Ext.Component
    this
Component
removeListener( String eventName, Function handler, [Object scope] ) : void
删除一个事件处理器。
删除一个事件处理器。
参数:
  • eventName : String
    处理器关联的事件类型。
  • handler : Function
    移除的处理器。 这应该是传递到addListener里的方法的引用。
  • scope : Object
    （可选）处理器指定的初始作用域。
返回值:
  • void
Observable
render ( [ Element/HTMLElement/String container ], [ String/Number position ] ) : void
在传递进来的HTML元素中渲染当前组件。...

在传递进来的HTML元素中渲染当前组件。

如果你正在使用一个Container 对象放置当前组件，那么请不要使用render方法。

当容器第一次被渲染时，它的子组件将会被容器的 layout 管理器渲染。

某些布局管理器允许动态添加子组件。它们包括 Ext.layout.CardLayout, Ext.layout.AnchorLayout, Ext.layout.FormLayout, Ext.layout.TableLayout。

当一个新的子组件被添加时，如果容器已经被渲染了， 你可能需要调用容器的 doLayout 方法来刷新视图，它将导致所有没有被渲染的子组件进行渲染操作。 此操作是必须的，这样你可以添加多个子组件而只刷新一次layout。

当创建复杂的UI时，非常重要的一点是，请记住调整子项目的尺寸和位置是容器的 layout 管理器的职责。 如果你希望子项目的尺寸对用户交互作出反应， 你必须为容器配置一个布局管理器，它将创建和管理你心里想要的那种布局。

忽略容器的layout 配置意味着将会使用一个基本的布局管理器，它除了按次序把子组件 渲染到容器中之外什么事情都不做。 这种情况下，任何尺寸和位置的调整操作都不会发生。

参数:
  • container : Element/HTMLElement/String
    (可选) 需要在其中渲染当前组件的元素。 如果它是从一个已存在的标签中创建的，此参数应该被忽略。
  • position : String/Number
    (可选) 容器中的一个元素ID或者一个DOM节点索引， 当前组件将会被插入到它前面 (默认append到容器的尾部)
返回值:
  • void
Component
resumeEvents() : void
重新开始触发事件。(参见suspendEvents) 如果事件以queueSuspended参数被挂起，则在事件被挂起时 ...
重新开始触发事件。(参见 suspendEvents) 如果事件以queueSuspended 参数被挂起，则在事件被挂起时触发的事件会被传递到所有的监听器上
参数:
  • 无。
返回值:
  • void
Observable
setAutoScroll ( Boolean scroll ) : Ext.BoxComponent
设置该组件内容溢出时是否自动显示滚动条。
设置该组件内容溢出时是否自动显示滚动条。
参数:
  • scroll : Boolean
    值为true的话组件自动显示滚动条。
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setDisabled ( Boolean disabled ) : Ext.Component
工具函数，使用布尔值设置有效/无效(disabled/enabled )。
工具函数，使用布尔值设置有效/无效(disabled/enabled )。
参数:
  • disabled : Boolean
返回值:
  • Ext.Component
    this
Component
setHeight ( Mixed height ) : Ext.BoxComponent
设置此组件的高度。该方法将触发resize事件。
设置此组件的高度。该方法将触发resize事件。
参数:
  • height : Mixed
    The new height to set.
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setPagePosition ( Number x , Number y ) : Ext.BoxComponent
设置组件在页面中的XY位置。 如果需要设置left和top值 ，请使用...
设置组件在页面中的XY位置。 如果需要设置left和top值 ，请使用setPosition方法。 该方法触发move事件。
参数:
  • x : Number
    The new x position
  • y : Number
    The new y position
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setPosition ( Number left , Number top ) : Ext.BoxComponent
设置组件的left和top值。设置组件的页面XY值，请使用setPagePosition方法。该方法触发...
设置组件的left和top值。设置组件的页面XY值，请使用setPagePosition方法。该方法触发move事件。
参数:
  • left : Number
    The new left
  • top : Number
    The new top
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setSize ( Mixed width , Mixed height ) : Ext.BoxComponent
设置BoxComponent的宽度和高度。 此方法触发resize事件...
设置BoxComponent的宽度和高度。 此方法触发resize事件。此方法可以接收单独的width或者height值作为参数， 或者你可以传递像这样的一个size对象： {width:10, height:20} 。
参数:
  • width : Mixed
    设置的新的width值。这可以是：
    • 一个Number类型指定Element新的宽度 Ext.Element.defaultUnit(默认为像素 :'px')。
    • 一个String类型用于设置width的CSS样式。
    • 一个size对象格式为 {width: widthValue, height: heightValue} 。
    • 值为 undefined 时，保留原来的width不变。
  • height : Mixed
    设置的新的height值(如果第一个参数传递了一个size对象，此参数没有必要传递)。这可以是：
    • 一个Number类型指定Element新的高度 Ext.Element.defaultUnit(默认为像素 :'px')。
    • 一个String类型用于设置height的CSS样式。也有可能不会被使用到。
    • 值为 undefined 时，保留原来的height不变。
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setText ( String text , [ Boolean encode ] ) : Label
使用指定的字符串更新label的innerHTML
使用指定的字符串更新label的innerHTML
参数:
  • text : String
    新的label文本
  • encode : Boolean
    (可选)False将会在把文本渲染到label时跳过HTML编码操作 (默认为true，将会对值进行编码)。 如果你想要在label的innerHTML中包含标签，而不是通过默认的逻辑 在其中渲染字符串字面值，此配置项可能非常有用。
返回值:
  • Label
    this
Label
setVisible ( Boolean visible ) : Ext.Component
工具方法，通过使用布尔值隐藏或者显示当前组件。
工具方法，通过使用布尔值隐藏或者显示当前组件。
参数:
  • visible : Boolean
    true时显示，false时隐藏
返回值:
  • Ext.Component
    this
Component
setWidth ( Mixed width ) : Ext.BoxComponent
设置组件的宽度。 此方法触发resize事件。
设置组件的宽度。 此方法触发resize事件。
参数:
  • width : Mixed
    The new width to set.
返回值:
  • Ext.BoxComponent
    this
BoxComponent
show () : Ext.Component
显示当前组件。监听' beforeshow' 事件，返回 false 取消显示组件...
显示当前组件。监听' beforeshow' 事件，返回 false 取消显示组件。在显示组件之后触发' show' 事件。
参数:
  • 无。
返回值:
  • Ext.Component
    this
Component
suspendEvents( Boolean queueSuspended ) : void
暂停触发所有的事件。 (参看resumeEvents)
暂停触发所有的事件。（参看 resumeEvents)
参数:
  • queueSuspended : Boolean
    如果传递为true则排列好暂停的事件使得在调用 resumeEvents 后再触发它们，而不是抛弃所有暂停的事件。
返回值:
  • void
Observable
syncSize () : Ext.BoxComponent
强制组件的大小按照此组件底层元素当前的高度和宽度计算。
强制组件的大小按照此组件底层元素当前的高度和宽度计算。
参数:
  • 无。
返回值:
  • Ext.BoxComponent
    this
BoxComponent
un( String eventName, Function handler, [Object scope] ) : void
删除一个事件处理器(removeListener方法的简写形式)
删除一个事件处理器(removeListener方法的简写形式。)
参数:
  • eventName : String
    处理器关联的事件类型
  • handler : Function
    被删除的处理器 这应该是传入 addListener 中的方法的引用。
  • scope : Object
    （可选）为处理器指定的初始作用域。
返回值:
  • void
Observable
update ( Mixed htmlOrData , [ Boolean loadScripts ], [ Function callback ] ) : void
刷新组件的内部区域。
刷新组件的内部区域。
参数:
  • htmlOrData : Mixed
    如果已经通过tpl为当前组件配置了一个模板，那么 将会使用此参数来装配模板。 如果没有为当前组件配置模板，组件的内容区域将会通过Ext.Element 进行刷新。
  • loadScripts : Boolean
    (可选)只用在使用html配置时此参数才合法。默认为false。
  • callback : Function
    (可选)只用在使用html配置时此参数才合法。 当脚本加载完成时回调函数才被执行。
返回值:
  • void
Component
updateBox ( Object box ) : Ext.BoxComponent
设置此组件底层元素的盒子模型尺寸。(译者注：盒子模型是CSS术语，详细资料请自行搜索。)
设置此组件底层元素的盒子模型尺寸。(译者注：盒子模型是CSS术语，详细资料请自行搜索。)
参数:
  • box : Object
    一个格式为{x, y, width, height}的对象
返回值:
  • Ext.BoxComponent
    this
BoxComponent

公共事件

Event Defined By
added : ( Ext.Component this , Ext.Container ownerCt , number index )
当一个组件被添加到一个Ext.Container时触发
当一个组件被添加到一个Ext.Container时触发
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • ownerCt : Ext.Container
    用于组件的容器
  • index : number
    添加组件的位置
Component
afterrender : ( Ext.Component this )
在组件渲染完成之后触发...

在组件渲染完成之后触发。

afterrender事件在当前组件被rendered 结束之后、在为组件定义的所有afterRender方法执行之后 触发，并且，如果有stateful， 也在状态被保存之后才触发。

监听器将会以如下参数格式被调用:
  • this : Ext.Component
Component
beforedestroy : ( Ext.Component this )
在组件 destroyed 之前触发。 在事件监听器中返回false以停止 destroy 操作。
在组件 destroyed 之前触发。 在事件监听器中返回false以停止 destroy 操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforehide : ( Ext.Component this )
在调用hide方法隐藏组件之前触发。 在事件监听器中返回false可以停止隐藏操作。
在调用hide方法隐藏组件之前触发。 在事件监听器中返回false可以停止隐藏操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforerender : ( Ext.Component this )
在组件被rendered 之前触发。 在事件监听器中返回false可以停止render 操作。
在组件被rendered 之前触发。 在事件监听器中返回false可以停止render 操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforeshow : ( Ext.Component this )
在调用show()方法现实组件之前触发。 事件处理函数返回false可以停止show。
在调用show 方法现实组件之前触发。 事件处理函数返回false可以停止show。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforestaterestore : ( Ext.Component this , Object state )
在组件状态恢复之前触发。返回false停止恢复状态操作。
在组件状态恢复之前触发。返回false停止恢复状态操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    StateProvider返回的状态哈希值。 如果没有禁止此事件，那么状态对象会被传递给applyState。 默认情况下，这样简单地把属性值拷贝到当前组件中。 可以覆盖此方法以提供自定的状态恢复操作。
Component
beforestatesave : ( Ext.Component this , Object state )
在组件状态被保存到配置的状态提供者之前触发。 返回false可以停止保存。
在组件状态被保存到配置的状态提供者之前触发。 返回false可以停止保存。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    状态值哈希。 这由在组件上调用getState() 方法决定。 此方法必须由开发者提供，返回是否需要对状态进行描述，默认情况下， Ext.Component有一个空实现。
Component
destroy : ( Ext.Component this )
在组件被销毁之后触发。
在组件被destroyed之后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
disable : ( Ext.Component this )
在组件被设置为无效状态后触发。
在组件被设置为无效状态后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
enable : ( Ext.Component this )
当组件被设置为有效(enabled)之后触发。
当组件被设置为有效(enabled)之后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
hide : ( Ext.Component this )
在组件被隐藏之后触发。 当调用hide 方法隐藏组件之后触发。
在组件被隐藏之后触发。 当调用hide 方法隐藏组件之后触发。
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
move : ( Ext.Component this , Number x , Number y )
在组件移动之后触发。
在组件移动之后触发。
监听器将会用如下的参数格式来调用:
  • this : Ext.Component
  • x : Number
    The new x position
  • y : Number
    The new y position
BoxComponent
removed : ( Ext.Component this , Ext.Container ownerCt )
当一个组件被从Ext.Container容器中删除时触发
当一个组件被从Ext.Container容器中删除时触发
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • ownerCt : Ext.Container
    持有组件的容器
Component
render : ( Ext.Component this )
在组件被渲染之后触发。
在组件被 rendered(渲染) 之后触发。
监听器将以如下的参数格式被调用:
  • this : Ext.Component
Component
resize : ( Ext.Component this , Number adjWidth , Number adjHeight , Number rawWidth , Number rawHeight )
在组件被调整大小之后触发。
在组件被调整大小之后触发。
监听器将以如下的参数格式被调用:
  • this : Ext.Component
  • adjWidth : Number
    这是width调整后的值
  • adjHeight : Number
    这是height调整后的值
  • rawWidth : Number
    这是width原来的值
  • rawHeight : Number
    这是height原来的值
BoxComponent
show : ( Ext.Component this )
在调用show 方法显示组件之后触发。
在调用show 方法显示组件之后触发。
监听器将会用如下的参数格式被调用:
  • this : Ext.Component
Component
staterestore : ( Ext.Component this , Object state )
组件状态被存储之后触发。
组件状态被存储之后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    StateProvider返回的状态哈希值。 如果没有禁止此事件，那么状态对象会被传递给applyState。 默认情况下，这样简单地把属性值拷贝到当前组件中。 可以覆盖此方法以提供自定的状态恢复操作。
Component
statesave : ( Ext.Component this , Object state )
在组件状态被保存到所配置的状态提供者之后触发。
在组件状态被保存到所配置的状态提供者之后触发。
监听器将会用如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    状态值hash。 这是由在足见上调用getState() 方法决定的。 开发者必须提供此方法以返回是否需要恢复状态，默认情况下， Ext.Component有一个空实现。
Component


Observable
    Component
      BoxComponent
        Field
          TextField
            NumberField

Class Ext.form.NumberField

包: | Ext.form
定义类的文件: | NumberField.js
类: | NumberField
继承自: | TextField
数字文本表单项，提供自动按键过滤和数值校验。

配置项

Config Options Defined By
allowBlank : Boolean
指定为false将会只允许值的长度>0(默认为true)
TextField
allowDecimals : Boolean
False将不接受小数值(默认为true)
NumberField
allowDomMove : Boolean
在渲染时组件是否可以移动Dom节点(默认为true)。
Component
allowNegative : Boolean
False将阻止输入负号(默认为true)
NumberField
anchor : String
注: 这个配置只用于该组件被包含在一个已使用AnchorLayout...

注: 这个配置只用于该组件被包含在一个已使用 AnchorLayout (或者其子类)配置的Container时。 基于布局管理器，例如：

  • Ext.form.FormPanel
  • 指定 layout: 'anchor' // or 'form', or 'absolute'

参见 Ext.layout.AnchorLayout. anchor 。

BoxComponent
applyTo : Mixed
指定一个元素的id、一个DOM元素或者一个已经存在并被渲染到DIV中的元素，此DIV已经被...

指定一个元素的id、一个DOM元素或者一个已经存在并被渲染到DIV中的元素，此DIV已经被 渲染到document中，并且为当前组件指定了一些结构化的标签。

  • 描述 :
      当使用了 applyTo， 在主元素中也可以用id或者CSS类名来指定组件的托管部分， 并且，如果可以的话，创建的组件可能也会试图在那个标签中创建它的子组件。
  • 注意 :
      当使用此配置项时，无需调用render()方法。
      如果指定了applyTo属性，任何传递给 renderTo 的值都会被忽略，并且目标元素的父节点将会自动被用作组件的容器。
Component
autoCreate : String/Object
一个DomHelper 元素描述，或者为true使用一个默认元素描述。 用来创建封装当前组件的...

一个DomHelper 元素描述，或者为true使用一个默认元素描述。 用来创建封装当前组件的 Element。 细节参见 autoEl 。 默认为:

                                {tag: 'input', type: 'text', size: '20', autocomplete: 'off'}
Field
autoScroll : Boolean
如果值为true，将会在该元素上使用overflow:'auto'配置，并且在必要的时候...
如果值为true，将会在该元素上使用overflow:'auto'配置，并且在必要的时候自动显示滚动条，否则，溢出部分的组件都会被切除(默认值为 false)。
BoxComponent
autoShow : Boolean
如果组件需要检测隐藏CSS属性(如 'x-hidden' 或者 'x-hide-display')并且在渲染时删除...
如果组件需要检测隐藏CSS属性(如 'x-hidden' 或者 'x-hide-display')并且在渲染时删除它们 (默认为false)，设置此值为true。
Component
baseChars : String
合法数字的基本字符集(默认为'0123456789').
NumberField
blankText : String
如果 allowBlank 校验失败时需要显示的出错信息(默认为'This field is required')
TextField
boxMaxHeight : Number
设置组件的最大高度值...

设置组件的最大高度值。

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

BoxComponent
boxMaxWidth : Number
设置组件的最大宽度值...

设置组件的最大宽度值。

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

BoxComponent
boxMinHeight : Number
设置组件的最小高度值...

设置组件的最小高度值。

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

BoxComponent
boxMinWidth : Number
设置组件的最小宽度值...

设置组件的最小宽度值。

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

BoxComponent
bubbleEvents : Array
一个事件数组，当这些事件被触发时，将会被冒泡到所有父容器中。参见....

一个事件数组，当这些事件被触发时，将会被冒泡到所有父容器中。参见 Ext.util.Observable.enableBubble。 默认为 []。

Component
clearCls : String
应用到特殊的clearing div的CSS类， 这个clearing div直接渲染到每个form field的包装器后面...

应用到特殊的clearing div的CSS类， 这个clearing div直接渲染到每个form field的包装器后面，以提供 清除field的功能(默认为 'x-form-clear-left')。

注意: 只有在当前组件被渲染到一个使用FormLayout 布局(例如 Ext.form.FormPanel 或者指定 layout:'form')的 容器中、或者是指定了一个fieldLabel 、或者指定isFormField=true 时此配置才有效。

另请参见 Ext.layout.FormLayout. fieldTpl。

Component
cls : String
一个可选的额外CSS类，它将被添加到当前组件的元素上(默认为'')...
一个可选的额外CSS类，它将被添加到当前组件的元素上(默认为'')。 此属性对于在组件上，或者它的任何使用标准CSS规则的孩子节点上， 添加定制的样式非常有用。
Field
contentEl : String
(可选)指定一个已存在的HTML元素，或者一个已存在HTML元素的...

(可选)指定一个已存在的HTML元素，或者一个已存在HTML元素的 id ，它们将被用作当前组件的内容。

  • 描述 :
    此配置选项被用来将一个已存在的HTML元素 插入到一个新组件(在组件渲染之后它简单地移动DOM元素) 的layout元素中，使它成为该组件的内容。
  • 注意 :
    指定的HTML元素将被append到组件的layout元素中， 在所有配置的 HTML 被插入之后， 并且，这样的话，在render事件 被触发时，document中将不再包含此元素。
    指定的HTML元素将不会参与组件所有可能使用的 layout 过程(译者注：指这些HTML元素 不会参与布局操作)。 它仅是HTML而已。布局操作实在孩子 items 上进行的。
    添加 x-hidden 或者 x-hide-display CSS类，以防在内容渲染到panel时发生闪烁。
Component
ctCls : String
一个可选的外部CSS样式，添加到这个组件的容器(默认值为 '')。 这个方法对于使用标准的CSS规则...

一个可选的外部CSS样式，添加到这个组件的容器(默认值为 '')。 这个方法对于使用标准的CSS规则，为组件或它的任何一个子组件添加特定的样式非常有用。 参见 Ext.layout.ContainerLayout和 extraCls 。

注意: ctCls 默认为 ''期望如下的类，它们将指定一个默认值:

  • Box Layout : 'x-box-layout-ct'
使用一个额外的CSS类配置以上的Class，它是append到默认对象上的。例如， 对于BoxLayout (Hbox and Vbox):
                                ctCls: 'x-box-layout-ct custom-class'

Component
data : Mixed
初始化数据集，它将被应用到 tpl 上以刷新组件的内容区域。
Component
decimalPrecision : Number
小数点之后显示的最大精度(默认为2)
NumberField
decimalSeparator : String
允许的小数分隔符号(默认为'.')
NumberField
disableKeyFilter : Boolean
指定为true将会禁用按键过滤(默认为false)
TextField
disabled : Boolean
当前组件处于无效状态时为true。 Read-only.
Field
disabledClass : String
当组件处于无效状态时添加到组件上的CSS类(默认为 'x-item-disabled')。
Component
emptyClass : String
应用到空表单项的CSS类，以便样式化 emptyText (默认为'x-form-empty-field')。...
应用到空表单项的CSS类，以便样式化 emptyText (默认为'x-form-empty-field')。 根据表单项当前值，此样式按需要被自动添加和删除。
TextField
emptyText : String
放置到空表单项中的默认文本(默认为null)。 注意:...
放置到空表单项中的默认文本(默认为null)。 注意: 如果当前表单栏处于有效状态并且被配置了一个名称，那么此值会被 提交到服务器。
TextField
enableKeyEvents : Boolean
true将为HTML输入栏启用按键事件代理 (默认为false)。
TextField
fieldClass : String
表单项默认的CSS类(默认为"x-form-field x-form-num-field")
NumberField
fieldLabel : String
紧靠此field显示的标签文本(默认值为 '')。注意...

紧靠此field显示的标签文本(默认值为 '')。

注意:只有在当前组件被渲染到一个使用FormLayout 的容器中时，此配置才有效。 (例如 Ext.form.FormPanel 或 指定 layout:'form')。

另请参见 hideLabel 、 Ext.layout.FormLayout和 fieldTpl。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Name'
    }]
});
Component
flex : Number
注: 这个配置只用于该组件被包含在一个已使用BoxLayout配置的Container中时...

注: 这个配置只用于该组件被包含在一个已使用BoxLayout配置的Container中时。通过计算每一个子组件的flex值所占全部flex值之和的比例，来决定子组件的宽(HBoxLayout)高(VBoxlayout)。 任何子项的 flex = 0 或 flex = undefined 将不被设置(初始值大小将不被改变)。

BoxComponent
focusClass : String
当表单项获得焦点时使用的CSS类(默认为 'x-form-focus')
Field
grow : Boolean
true 如果此表单项需要自动增长、收缩到它的内容长度(默认为false)
TextField
growMax : Number
当 grow = true 时允许的最大宽度(默认为800)
TextField
growMin : Number
当 grow = true 时允许的最小宽度 (默认为30)
TextField
height : Number
组件的高度(默认值为 auto)。注:如果想使用百分比的方式...
组件的高度(默认值为 auto)。注:如果想使用百分比的方式来设置值，请查看 Ext.Component.anchor。
BoxComponent
hidden : Boolean
如果当前组件处于隐藏状态，此值为true。Read-only。
Component
hideLabel : Boolean
true时完全隐藏label元素 ( label 和 separator)。 默认为 false。 默认情况下，即使你不指定...

true时完全隐藏label元素 ( label 和 separator)。 默认为 false。 默认情况下，即使你不指定 fieldLabel 它的空间仍然会被保留，这样这块区域会与其它确实拥有label的区域位于同一排。 讲此值设置为 true 将导致此区域不再保留此空间。

注意: 参见 clearCls 的注释。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield'
        hideLabel: true
    }]
});
Component
hideMode : String
组件如何隐藏，支持的值有： 'visibility' (css visibility), 'offsets' (位置偏移量为负值) 和...

组件如何隐藏，支持的值有： 'visibility' (css visibility), 'offsets' (位置偏移量为负值) 和 'display' (css display).

注意:一般首选默认值 'display'，因为当组件第一次显示的时候它们会自动进行布局 (隐藏的时候不会调整尺寸)。

Component
hideParent : Boolean
此值为true时，当调用hide/show方法时，将会hide和show组件的容器...
此值为true时，当调用hide/show方法时，将会hide和show组件的容器；false时将会 hide和show组件自身(默认为false)。例如，这可以用作window上隐藏按钮的一种 快捷操作，通过设置此按钮的hideParent:true，然后把它添加到window上。
Component
html : String/Object
一个HTML片段，或者一个 DomHelper 描述，用作layout元素的内容(默认为'')。...
一个HTML片段，或者一个 DomHelper 描述，用作layout元素的内容(默认为'')。 这个HTML内容在组件渲染之后才被添加，所以在 render 出发的时候，document中尚未包含此HTML。 但是这个内容将会在所有配置的 contentEl 之前被插入到body标签中。
Component
id : String
当前组件唯一的id(默认为auto-assigned id)...

当前组件唯一的id(默认为auto-assigned id)。 如果你需要在以后访问组件，而又没有一个有效的组件对象引用，那么你需要指定一个 id( 也就是，使用Ext. getCmp方法 )。

注意，此id也将被用作组件底层HTML标签的id，这些标签被渲染到页面中。 这将允许你编写基于id的CSS规则，以独立地描述指定的实例；并且，也可以通过 组件父标签的id选中子元素。

注意:为了避免与唯一的id 产生重复， 请参见 itemId 和 ref 。

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

Component
inputType : String
输入栏的类型属性---例如radio,text,password,file(默认为'text')。...
输入栏的类型属性---例如radio,text,password,file(默认为'text')。 'file'和'password'类型通常必须用来渲染那些没有独立Ext组件的表单项类型。 注意，如果你使用inputType:'file'， 那么将不再支持 emptyText 并且应该避免使用。
Field
invalidClass : String
当把表单项标记为非法时所使用的CSS类(默认为'x-form-invalid')
Field
invalidText : String
当把一个表单项标记为非法状态并且没有提供消息时所使用的出错文本...
当把一个表单项标记为非法状态并且没有提供消息时所使用的出错文本 (默认为'The value in this field is invalid')
Field
itemCls : String
注意: 只有在当前组件被渲染到一个使用FormLayout 布局的 容器中时此配置才有效...

注意: 只有在当前组件被渲染到一个使用FormLayout 布局的 容器中时此配置才有效。 (例如Ext.form.FormPanel 或者指定 layout:'form')。

一个附加的CSS类，应用到div上，包装当前field的表单元素。 如果提供了此参数， field级上的itemCls将会覆盖 container级上提供的 默认itemCls。 为itemCls指定的值将会被添加默认的 类('x-form-item')。

既然它被应用到项目的包装器上(参见 Ext.layout.FormLayout。 fieldTpl)， 它将允许你编写能应用到此field、label(如果有指定)、或者field内部任何其它元素的标准CSS规则。

注意: 参考 fieldLabel的注释。 .

示例用法:

// Apply a style to the field's label:
<style>
    .required .x-form-item-label {font-weight:bold;color:red;}
</style>

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Name',
        itemCls: 'required' //this label will be styled
    },{
        xtype: 'textfield',
        fieldLabel: 'Favorite Color'
    }]
});
Component
itemId : String
当没有可利用的对象引用时，itemId可以作为第二选择，用来获得一个组件的引用， 代替 ...

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

var c = new Ext.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'); // 与 Ext.getCmp()不同

p2 = p1.ownerCt.getComponent('p2'); // 通过兄弟对象获得引用

另请参见 id 和 ref 。

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

Component
labelSeparator : String
每个fieldLabel 文本后面现实的分隔符。 此属性可以在多个层次上进行配置...

每个fieldLabel 文本后面现实的分隔符。 此属性可以在多个层次上进行配置。优先顺序为：

  • field / component level
  • container level
  • layout level (默认为冒号 ':')
如不需要为当前field的label显示分隔符，指定一个空字符串''即可。

注意:参见 clearCls 的注释。

另请参见 hideLabel 和 Ext.layout.FormLayout。 fieldTpl。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    layoutConfig: {
        labelSeparator: '~'   // layout config has lowest priority (defaults to ':')
    },
    labelSeparator: '>>',     // config at container level
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Field 1',
        labelSeparator: '...' // field/component level config supersedes others
    },{
        xtype: 'textfield',
        fieldLabel: 'Field 2' // labelSeparator will be '='

    }]
});
Component
labelStyle : String
一个CSS样式描述字符串，它将直接应用到当前field的label上...

一个CSS样式描述字符串，它将直接应用到当前field的label上。 如果有设置，默认为容器的labelStyle值(例如 Ext.layout.FormLayout.labelStyle , 或者 '')。

注意:参见 clearCls 的注释。

另请参见 hideLabel 和 Ext.layout.FormLayout. fieldTpl。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Name',
        labelStyle: 'font-weight:bold;'
    }]
});
Component
listeners : Object
一个包含一个或多个事件处理器的配置对象，会在初始化的时候被添加到目标对象上...

一个包含一个或多个事件处理器的配置对象，会在初始化的时候被添加到目标对象上。 该配置对象应该是一个有效的监听器配置对象就像 addListener例子中指定的一样可一次附加多个处理器。

ExtJs Components上的DOM事件

一些 ExtJs Component 类导出时会选择一些DOM事件(例如 "click", "mouseover" 等等), 这通常只是在有额外的值可以被添加时发生。例如DataView类的 click事件会传递被点击的节点。也可以直接在Component的HTMLElementevent上访问DOM事件，但必需在Component被渲染后监听器才能添加到Element 上。可以按照以下步骤添加插件:

// 插件会用一个监听器配置对象进行配置。
//该组件会被添加到所有处理方法的参数列表上。
Ext.DomObserver = Ext.extend(Object, {
    constructor: function(config) {
        this.listeners = config.listeners ? config.listeners : config;
    },

    // 组件将自己传递进了插件的初始化方法里
    init: function(c) {
        var p, l = this.listeners;
        for (p in l) {
            if (Ext.isFunction(l[p])) {
                l[p] = this.createHandler(l[p], c);
            } else {
                l[p].fn = this.createHandler(l[p].fn, c);
            }
        }

        // 渲染后立即添加监听器到元素上
        c.render = c.render.createSequence(function() {
            var e = c.getEl();
            if (e) {
                e.on(l);
            }
        });
    },

    createHandler: function(fn, c) {
        return function(e) {
            fn.call(this, e, c);
        };
    }
});

var combo = new Ext.form.ComboBox({

    // 元素被点击后折叠
    plugins: [ new Ext.DomObserver({
        click: function(evt, comp) {
            comp.collapse();
        }
    })],
    store: myStore,
    typeAhead: true,
    mode: 'local',
    triggerAction: 'all'
});

Observable
margins : Object
注:此配置只用于该组件展现在一个使用BorderLayout...

注:此配置只用于该组件展现在一个使用BorderLayout 或 BoxLayout的两个子类之一作为布局的容器。

这个margins对象在该组件中的格式为：

{top: (top margin),right: (right margin),bottom: (bottom margin),left: (left margin)}

也可以是一个字符串，中间用空格分隔，margin值为数字。 把matches中每一个值的次序跟CSS中margin值的排列方式相对应：

  • 如果只有一个值，它适用于所有方面。
  • 如果有两个值，top和bottom的边框设置为第一个值，left和right设置为第二个值。
  • 如果有三个值，top设置为第一个值，left和right设置为第二个值，bottom设置为第三个值。
  • 如果有四个值，分别设置为top, right, bottom, left。

默认值:

{top:0, right:0, bottom:0, left:0}
BoxComponent
maxLength : Number
校验时表单项允许的最大输入长度(默认为Number.MAX_VALUE)。 通过改善可用性允许粘贴、编辑、重做和回退...
校验时表单项允许的最大输入长度(默认为Number.MAX_VALUE)。 通过改善可用性允许粘贴、编辑、重做和回退， 此行为被设计用来为用户提供即时的反馈。 如需限定表单项中可以输入字符的最大长度， 可以使用autoCreate 向一个表单项添加任何你想要的属性，例如:
var myField = new Ext.form.NumberField({
    id: 'mobile',
    anchor:'90%',
    fieldLabel: 'Mobile',
    maxLength: 16, // for validation
    autoCreate: {tag: 'input', type: 'text', size: '20', autocomplete: 'off', maxlength: '10'}
});
TextField
maxLengthText : String
如果maximum length 校验失败时显示的出错文本...
如果maximum length 校验失败时显示的出错文本 (默认为 'The maximum length for this field is {maxLength}')
TextField
maxText : String
最大值校验失败时显示的出错文本 (默认为"The maximum value for this field is...
最大值校验失败时显示的出错文本 (默认为"The maximum value for this field is {maxValue}")
NumberField
maxValue : Number
允许的最大值(默认为Number.MAX_VALUE)
NumberField
minLength : Number
输入栏必须的最小长度(默认为0)
TextField
minLengthText : String
如果 最小长度 校验失败时显示的出错文本 (默认为...
如果 最小长度 校验失败时显示的出错文本 (默认为 'The minimum length for this field is {minLength}') 。
TextField
minText : String
最小值校验失败时显示的出错文本 (默认为"The minimum value for this field is...
最小值校验失败时显示的出错文本 (默认为"The minimum value for this field is {minValue}")
NumberField
minValue : Number
允许的最小值(默认为Number.NEGATIVE_INFINITY)
NumberField
msgFx : String
实验性参数 当在表单项下显示校验消息时使用的效果(默认为'normal')。
Field
msgTarget : String
通过markInvalid 设置的消息文本应该显示的位置。 必须是如下值之一：...

通过markInvalid 设置的消息文本应该显示的位置。 必须是如下值之一：

  • qtip 当用户鼠标滑过表单项时，显示一个包含消息的快速提示。 这是默认情况。
    为了使此参数能工作，必须调用 Ext.QuickTips.init。
  • title 在弹出的默认浏览器标题属性上显示消息。
  • under 在表单项之下添加一块div，包含出错消息。
  • side 在表单项右边添加一个出错图标，当鼠标滑过时弹出并显示一个消息。
  • [element id] 在指定元素的innerHTML中直接添加出错消息。
Field
name : String
表单项的HTML name属性(默认为'')。 注意: 如果需要当前表单项自动被包含在...
表单项的HTML name属性(默认为'')。 注意: 如果需要当前表单项自动被包含在 form submit()中，必须设置此参数。
Field
nanText : String
如果表单项的值不是一个合法数字时显示的错误文本。 例如，这种情况发生在...
如果表单项的值不是一个合法数字时显示的错误文本。 例如，这种情况发生在，如果一个合法的字符，像'.'或者'-'被留在表单项中而没有数字 (默认为"{value} is not a valid number")
NumberField
overCls : String
一个可选的额外的CSS类，它将在鼠标移过元素时被添加到组件上...
一个可选的额外的CSS类，它将在鼠标移过元素时被添加到组件上，鼠标移出时 删除。(默认为'')。此属性对于在组件上，或者它的任何使用标准CSS规则的孩子节点上， 添加定制的'active' 或者 'hover'样式非常有用。
Component
pageX : Number
如果该组件被包含在一个指定位置的容器中，这个值表示页面级的x坐标值（译者注：在有滚动条的情况下这个值很有用）。
BoxComponent
pageY : Number
如果该组件被包含在一个指定位置的容器中，这个值表示页面级的y坐标值（译者注：在有滚动条的情况下这个值很有用）。
BoxComponent
plugins : Object/Array
一个对象或者一个对象数组，为组件提供特殊的功能 ...
一个对象或者一个对象数组，为组件提供特殊的功能。 对一个合法的插件唯一的要求是它含有一个init()方法， 能接收一个Ext.Component型的参数。 当组件被创建时，如果有可用的插件，组件将会调用每个插件的init方法， 并将自身的引用作为方法参数传递给它。然后，每个插件就可以调用方法或者响应组件上的事件， 就像需要的那样提供自己的功能。
Component
preventMark : Boolean
true将会禁止 把表单项标记为非法。默认为false.
Field
ptype : String
需要创建配置的ptype。 当传递一个配置对象给构造函数时...
需要创建配置的ptype。 当传递一个配置对象给构造函数时，此配置选项不会被使用。 只有在使用懒初始化的时候此配置项才会被使用， 此时Plugin不是 通过一个完整的实例组件，而是通过一个Component配置指定的。 在渲染时，将会查找ptype以决定创建何种类型的Plugin。

如果你创建自己的Plugin，你可以通过 Ext.ComponentMgr.registerPlugin 对它们进行注册，以便能利用懒初始化和渲染机制。
Component
readOnly : Boolean
将会把表单项标记为在HTML中只读(readOnly)(默认为false)...
true 将会把表单项标记为在HTML中只读(readOnly)(默认为false)。

Note: 这仅仅设置元素的readOnly DOM参数。 例如，设置 readOnly=true ，将不会禁用触发ComboBox或者DateField； 这为你提供了一个选项，可以强制用户通过触发按钮选择一个值，而不是 在文本框进行输入。 使用 hideTrigger 可以隐藏触发按钮。

Field
ref : String
一个路径描述，与组件的 ownerCt 相关，它描述了把当前组件的命名引用放置到哪个父容器中去。...

一个路径描述，与组件的 ownerCt 相关，它描述了把当前组件的命名引用放置到哪个父容器中去。

祖先的坐标路径可以通过'/'字符进行分隔。 例如，将一个Toolbar Button的引用放入 拥有此Toolbar的Panel中:

var myGrid = new Ext.grid.EditorGridPanel({
    title: 'My EditorGridPanel',
    store: myStore,
    colModel: myColModel,
    tbar: [{
        text: 'Save',
        handler: saveChanges,
        disabled: true,
        ref: '../saveButton'
    }],
    listeners: {
        afteredit: function() {
//          The button reference is in the GridPanel
            myGrid.saveButton.enable();
        }
    }
});

在上面的代码中，如果 ref 是 'saveButton' ，那么引用将会被放置到Toolbar中。 ref 中的每个'/' 都会从组件的 ownerCt 向上移动一级。

另请参见 added 和 removed 事件。

Component
regex : RegExp
在校验时，需要在表单项值纸上进行测试的JavaScript RegExp对象(默认为 null)。 如果测试失败，表单项将会使用...
在校验时，需要在表单项值纸上进行测试的JavaScript RegExp对象(默认为 null)。 如果测试失败，表单项将会使用 regexText 进行标记。
TextField
regexText : String
当使用regex 并且校验测试失败时显示的出错文本(默认为'')
TextField
region : String
注: 此配置只用于该组件展现在一个布局为BorderLayout的容器中...

注: 此配置只用于该组件展现在一个布局为BorderLayout的容器中(例如指定layout:'border')。

详见Ext.layout.BorderLayout。

BoxComponent
renderTo : Mixed
该值可以是一个节点的id、一个DOM节点或者一个已存在的元素...

该值可以是一个节点的id、一个DOM节点或者一个已存在的元素， 组件将会被渲染到其中。

  • 注意 :
      如果组件不是一个Container 的子项目时， 不要使用此选项。 渲染和管理它的子项目是一个Container 的layout manager的责任。
      当使用此配置项时，无需调用render()方法。

另请参见 render 。

Component
selectOnFocus : Boolean
true当表单项获得输入焦点时，将会自动选中所有存在的表单项文本 (默认为false)
TextField
stateEvents : Array
一个事件数组，当它们被触发时，组件需要保存自己的状态(默认值为 none)...

一个事件数组，当它们被触发时，组件需要保存自己的状态(默认值为 none)。 它们可以是任何该组件支持的事件类型，包括浏览器事件和 自定义事件(例如['click', 'customerchange'])。

对于保存和恢复组件状态的详细解释，参见 stateful

Component
stateId : String
为该组件指定的唯一的id值，它被用作管理组件状态的目的...
为该组件指定的唯一的id值，它被用作管理组件状态的目的。 (如果设定了id，默认值为组件自己的id，否则，如果组件使用自动生成的id，此值为null)。

对于保存和反解析组件状态的解释，参见 stateful 。

Component
stateful : Boolean
一个标志参数，它将引起组件在启动时尝试从一个保存的状态中恢复内部状态参数...

一个标志参数，它将引起组件在启动时尝试从一个保存的状态中恢复内部状态参数。 组件必须要么拥有一个 stateId 或者 id ，它们被分配给需要被管理的状态属性。 在跨页面加载时，不保证自动生成的id属性的稳定性， 并且，不能依赖此id来保存和恢复一个组件的相同状态。

为了保存状态的操作能够工作，状态管理器的提供者必须 被设置成一个Ext.state.Provider 的实现类，它覆盖了set 和get 方法，以便保存和恢复name/value对。 有一个内置的Ext.state.CookieProvider 可用。

为当前页面设置状态提供者:

Ext.state.Manager.setProvider(new Ext.state.CookieProvider({
    expires: new Date(new Date().getTime()+(1000*60*60*24*7)), //7 days from now
}));

当 stateEvents 配置项中其中之一的事件被触发时， 一个状态可保存的组件将试图保存其状态。

保存状态时，一个可保存状态的组件首先需要通过调用 getState 方法来序列化它的状态。 默认情况下，此函数什么事都不做。 开发者必须提供一个实现，返回一个hash对象，它描述了组件可恢复的状态。

getState方法产生的值将会传递给 Ext.state.Manager.set 方法，它使用配置的 Ext.state.Provider 来保存对象，以组件的 stateId 为key，或者，如果此值（指stateId）没有指定时， 使用它的 id 作为key。

在进行构造时，一个可保存状态的组件试图通过调用 Ext.state.Manager.get方法来 恢复它的状态，传递 stateId 或者，如果此值（指stateId）没有指定时， 使用它的 id 作为参数。

结果对象被传递给 applyState 。 applyState 的默认实现只是简单地把属性拷贝到对象中， 但是开发者可以覆盖此方法以支持更多行为。

通过向 beforestaterestore, staterestore, beforestatesave 和 statesave 事件上绑定监听器，你可以在保存和恢复状态时进行额外的处理。

Component
style : String
被添加到组件元素的特定样式。 必须是按照...
被添加到组件元素的特定样式。 必须是按照 Ext.Element.applyStyles 类指定格式的合法参数值。

new Ext.Panel({
    title: 'Some Title',
    renderTo: Ext.getBody(),
    width: 400, height: 300,
    layout: 'form',
    items: [{
        xtype: 'textarea',
        style: {
            width: '95%',
            marginBottom: '10px'
        }
    },
        new Ext.Button({
            text: 'Send',
            minWidth: '100',
            style: {
                marginBottom: '10px'
            }
        })
    ]
});
Component
submitValue : Boolean
False将会清除表单项的name属性，这样在提交表单时它将不会被提交。 默认为true。
Field
tabIndex : Number
该表单项的tabIndex。 注意，此属性仅仅应用到被渲染好的，而不是那些通过applyTo...
该表单项的tabIndex。 注意，此属性仅仅应用到被渲染好的，而不是那些通过applyTo创建的表单项 (默认为undefined)。
Field
tabTip : String
注: 这个配置只用于当该组件作为TabPanel的一个子项目时使用...

注: 这个配置只用于当该组件作为TabPanel的一个子项目时使用。

一个String类型的innerHTML(支持html标签)，当鼠标放在该选项上的时，显示一个tooltip。为了tips能够被渲染，Ext.QuickTips.init()必须被提前调用。
BoxComponent
tpl : Mixed
一个 Ext.Template , Ext.XTemplate 或者一个用来形成一个Ext.XTemplate的字符串数组...
一个 Ext.Template , Ext.XTemplate 或者一个用来形成一个Ext.XTemplate的字符串数组。 与 data 和 tplWriteMode 配置项协同使用。
Component
tplWriteMode : String
刷新组件的内容区域时使用的Ext.(X)Template方式。 默认为'overwrite' (参见 Ext.XTemplate.overwrite )。
刷新组件的内容区域时使用的Ext.(X)Template方式。 默认为'overwrite' (参见 Ext.XTemplate.overwrite )。
Component
validateOnBlur : Boolean
在表单项失去焦点时是否进行校验(默认为 true)。
Field
validationDelay : Number
在用户开始输入到校验操作开始之间的时长毫秒数 (默认为250)
Field
validationEvent : String/Boolean
引发表单项进行校验操作的事件。 设置为false可以禁用自动校验 (默认为'keyup')。
引发表单项进行校验操作的事件。 设置为false可以禁用自动校验 (默认为'keyup')。
Field
validator : Function
一个自定义的校验方法，在校验表单项时调用( validateValue) (默认为...

一个自定义的校验方法，在校验表单项时调用( validateValue) (默认为 null)。 如果指定，此函数会被第一个调用，允许开发者覆盖默认的校验过程。

此方法会被传入以下参数:

  • value : Mixed
    表单项的当前值

此方法将会返回:

  • true : Boolean
    true 如果值合法
  • msg : String
    如果值是非法时的出错信息
TextField
value : Mixed
当前表单项的初始化值(默认为undefined).
Field
vtype : String
一个校验类型名，在Ext.form.VTypes 中定义(默认为null)
TextField
vtypeText : String
一个自定义的出错消息，用来替代为当前表单项所设置的...
一个自定义的出错消息，用来替代为当前表单项所设置的 vtype 所提供的默认消息(默认为'')。 注意: 只有设置了 vtype 时才应用此项，否则忽略。
TextField
width : Number
组件的宽度(默认值为 auto)。注:如果想使用百分比的方式...
组件的宽度(默认值为 auto)。注:如果想使用百分比的方式来设置值，请查看 Ext.Component.anchor。
BoxComponent
x : Number
如果被包含在一个指定位置的容器中，这个值表示x(left)坐标值。
BoxComponent
xtype : String
需要创建配置的xtype。 当传递一个配置对象给构造函数时...
需要创建配置的xtype。 当传递一个配置对象给构造函数时，此配置选项不会被使用。 只有在使用懒初始化的时候此配置项才会被使用，此时容器的子项目不是 通过一个完整的实例组件，而是通过一个Component配置指定的。 在渲染时，将会查找xtype以决定创建何种类型的子组件。

预定义的xtype列表如下： here。

如果你继承Component创建你自己的组件，你需要使用Ext.ComponentMgr.registerType 对它们进行注册，以便利用懒初始化和渲染机制。
Component
y : Number
如果被包含在一个指定位置的容器中，这个值表示y(top)坐标值。
BoxComponent

公共属性

Property Defined By
disabled : Boolean
当前组件处于无效状态时为true。 Read-only.
Component
el : Ext.Element
封装了当前组件的Ext.Element。 Read-only。通常情况下，这将是一个<DIV>元素，它由此类的...

封装了当前组件的Ext.Element。 Read-only。

通常情况下，这将是一个<DIV>元素，它由此类的 onRender方法创建，但是它可以通过使用 autoEl 配置项进行覆盖。

注意: 直到组件渲染完成此元素都将处于无效状态。

如需向当前组件的 DOM事件(而不是当前组件自己的Observable事件)添加监听器， 更多建议，参见 listeners 配置项，或者直接使用一个render监听器:

new Ext.Panel({
    title: 'The Clickable Panel',
    listeners: {
        render: function(p) {
            // Append the Panel to the click handler's argument list.
            p.getEl().on('click', handlePanelClick.createDelegate(null, [p], true));
        },
        single: true  // Remove the listener after first invocation
    }
});

另请参见 getEl

Component
hidden : Boolean
如果当前组件处于隐藏状态，此值为true。Read-only。
Component
initialConfig : Object
当前组件的初始化配置描述。 Read-only。
Component
label : Ext.Element
关联到当前表单项的label元素。 只有在当前表单项已经被一个Ext.layout.FormLayout ...

关联到当前表单项的label元素。 只有在当前表单项已经被一个Ext.layout.FormLayout 布局管理器渲染之后才可用。

Field
originalValue : mixed
表单项原来的值，它是在value 中配置的；或者，如果 trackResetOnLoad 设置为...
表单项原来的值，它是在value 中配置的；或者，如果 trackResetOnLoad 设置为 true 时，通过表单加载操作最后一次加载的。
Field
ownerCt : Ext.Container
组件所属的Container (默认为undefined，当前组件被添加到一个容器中时此值被自动设置)...
组件所属的Container (默认为undefined，当前组件被添加到一个容器中时此值被自动设置)。 Read-only。

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

Component
refOwner : Ext.Container
如果当前组件是一个容器的孩子，并且是通过一个 ref 配置项被注册的，则此值为 ref 引用被插入到的祖先容器。
如果当前组件是一个容器的孩子，并且是通过一个 ref 配置项被注册的，则此值为 ref 引用被插入到的祖先容器。
Component
rendered : Boolean
如果当前组件已经被渲染了，此值为true。Read-only.
Component
startValue : mixed
表单项最后一次获得焦点时所拥有的值。 这就是传递给change 事件的值...

表单项最后一次获得焦点时所拥有的值。 这就是传递给change 事件的值，此事件在值被改变并失去焦点时触发。

直到表单项被访问之前此值都是undefined 与originalValue 进行比较。

Field

公共方法

Method Defined By
NumberField ( Object config )
创建一个NumberField
创建一个NumberField
参数:
  • config : Object
    配置参数
返回值:
  • void
NumberField
addClass ( string cls ) : Ext.Component
为组件底层的元素添加CSS样式。
为组件底层的元素添加CSS样式。
参数:
  • cls : string
    需要添加的CSS样式的class名称
返回值:
  • Ext.Component
    this
Component
addEvents( Object|String o, string Optional. ) : void
添加指定的事件到事件列表上，事件会被该Observable触发。
添加指定的事件到事件列表上，事件会被该Observable触发。
参数:
  • o : Object|String
    以事件名作为属性true作为值的对象 或者当多个事件名被分开的传递时则为第一个事件名。
  • Optional. : string
    事件名被分开的传递时则为事件名。 用法:
    this.addEvents('storeloaded', 'storecleared');
返回值:
  • void
Observable
addListener( String eventName, Function handler, [Object scope], [Object options] ) : void
给对象添加事件处理器。
给对象添加事件处理器。
参数:
  • eventName : String
    监听的事件名。
  • handler : Function
    事件调用的方法
  • scope : Object
    （可选）处理方法执行的作用域 (this的引用 reference)。 如果被忽略。默认为触发事件的对象。
  • options : Object
    （可选）包含处理器配置和属性的对象。 可能包含以下的属性:
    • scope : Object
      处理方法执行的作用域(this的引用) 。 如果被忽略。默认为触发事件的对象。
    • delay : Number
      在触发事件后延迟调用处理器的毫秒数。
    • single : Boolean
      如果为True则添加一个处理器来处理下一次的事件触发（仅一次），然后移除自己。
    • buffer : Number
      使得处理器延迟指定毫秒数后预定的运行在 一个Ext.util.DelayedTask中 。 如果事件在时间内再一次被触发，原始的处理器不会被调用，但是新的处理器会预定的在他的位置上。
    • target : Observable
      如果事件在目标的Observable上触发则仅仅调用处理器， 否则 事件会从子类的Observable上冒泡

    组合选项
    使用这些选项参数,可能会组合出不同类型的监听器：

    一个延迟的，一次性的监听器。

    myDataView.on('click', this.onClick, this, {
single: true,
delay: 100
});

    一次调用附加多个处理器
    该方法同样支持传递一个包含指定的多个处理器的属性的配置对象参数。

    myGridPanel.on({
'click' : {
    fn: this.onClick,
    scope: this,
    delay: 100
},
'mouseover' : {
    fn: this.onMouseOver,
    scope: this
},
'mouseout' : {
    fn: this.onMouseOut,
    scope: this
}
});

    或者一个简写的语法：

    myGridPanel.on({
'click' : this.onClick,
'mouseover' : this.onMouseOver,
'mouseout' : this.onMouseOut,
 scope: this
});
返回值:
  • void
Observable
applyToMarkup ( String/HTMLElement el ) : void
将此组件添加到已存在的有效的HTML标签中。 使用该方法时，无需再调用render()方法。
将此组件添加到已存在的有效的HTML标签中。 使用该方法时，无需再调用render()方法。
参数:
  • el : String/HTMLElement
返回值:
  • void
Component
autoSize () : void
自动增长表单项，以便让文本宽度适应到表单项允许的最大长度。 只有...
自动增长表单项，以便让文本宽度适应到表单项允许的最大长度。 只有 grow = true时才有效果，同时会触发 autosize 事件。
参数:
  • 无。
返回值:
  • void
TextField
clearInvalid () : void
清除当前表单项上的所有非法styles/messages(样式/消息)
清除当前表单项上的所有非法styles/messages(样式/消息)
参数:
  • 无。
返回值:
  • void
Field
cloneConfig ( Object overrides ) : Ext.Component
默认使用原先传递给当前实例的配置值克隆当前组件。
默认使用原先传递给当前实例的配置值克隆当前组件。
参数:
  • overrides : Object
    一个新的配置项，包含需要覆盖到克隆版本的所有属性。 可以传递一个id参数给此对象，否则将自动生成一个新的id以避免发生重复。
返回值:
  • Ext.Component
    当前组件的克隆副本
Component
destroy () : void
通过如下方法销毁对象：删除所有的事件监听器、将组件的元素从DOM树中删除...
通过如下方法销毁对象：删除所有的事件监听器、将组件的元素从DOM树中删除（如果可以）、 将组件从它的 Ext.Container（如果可用）中删除、 并且将它从Ext.ComponentMgr中 注销。 销毁操作一般由框架自动完成，一般情况下不需要直接调用该方法。
参数:
  • 无。
返回值:
  • void
Component
disable () : Ext.Component
将组件置为无效状态，并出发'disable'事件。
将组件置为无效状态，并出发'disable'事件。
参数:
  • 无。
返回值:
  • Ext.Component
    this
Component
enable () : Ext.Component
将组件置为有效状态并触发'enable'事件。
将组件置为有效状态并触发'enable'事件。
参数:
  • 无。
返回值:
  • Ext.Component
    this
Component
enableBubble( String/Array events ) :void
是否现在使得事件会被该Observable触发并调用 this.getBubbleTarget()方法在拥有者的继承树...

是否现在使得事件会被该Observable触发并调用 this.getBubbleTarget()方法在拥有者的继承树中冒泡。Observable的基础类中没有该方法的实现。

该方法一般被Ext.Components用来冒泡事件到拥有者的容器。参看Ext.Component.getBubbleTarget默认的实现 在Ext.Component中返回组件的直接拥有者。但是如果需要的是一个已知的目标，该方法可以被重写来更快的访问需求的目标。

例子:

Ext.override(Ext.form.Field, {
    // 添加方法到Field的initComponent上改变事件为冒泡
    initComponent : Ext.form.Field.prototype.initComponent.createSequence(function() {
        this.enableBubble('change');
    }),

    // 我们知道我们想让Field的事件冒泡到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() {
            // 如果样式被修改标题会变红。
            myForm.header.setStyle('color', 'red');
        }
    }
});
参数:
  • events : String/Array
    冒泡的事件名，或事件名数组
返回值:
  • void
Observable
findParentBy ( Function fn ) : Ext.Container
通过自定义的函数查找当前组件上层任何层次上的容器...
通过自定义的函数查找当前组件上层任何层次上的容器。 如果传递的函数返回true，容器对象将被返回。
参数:
  • fn : Function
    自定义的函数，使用如下参数调用(container,this component)。
返回值:
  • Ext.Container
    自定义函数返回true的第一个容器
Component
findParentByType ( String/Class xtype ) : Ext.Container
通过xtype或者class查找当前组件上层任何层次上的容器
通过xtype或者class查找当前组件上层任何层次上的容器
参数:
  • xtype : String/Class
    组件的xtype字符串，或者直接是组件的class
返回值:
  • Ext.Container
    符合指定xtype或者class的第一个容器
Component
fireEvent( String eventName, Object... args ) : Boolean
用传入的参数触发指定的事件 (减去事件名)。 一个事件可以被设置为冒泡 Obse...

用传入的参数触发指定的事件 (减去事件名)。

一个事件可以被设置为冒泡到Observable父类继承树(参看 Ext.Component.getBubbleTarget) 调用enableBubble实现。

参数:
  • eventName : String
    触发的事件名。
  • args : Object...
    传递给处理器的可变长度参数。
返回值:
  • Boolean
    如果有任何的处理器返回false则返回false，否则返回true。
Observable
focus ( [ Boolean selectText ], [ Boolean/Number delay ] ) : Ext.Component
尝试将当前组件设为焦点。
尝试将当前组件设为焦点。
参数:
  • selectText : Boolean
    (可选) 如果可用，同时选中组件内部的文本
  • delay : Boolean/Number
    (可选)将当前组件设置为焦点的延迟时间(设置为true等于0毫秒)
返回值:
  • Ext.Component
    this
Component
getActiveError () : String
获取当前表单项活动的出错消息。
获取当前表单项活动的出错消息。
参数:
  • 无。
返回值:
  • String
    返回表单项上活动的出错消息，如果没有错误，返回一个空字符串。
Field
getBox ( [ Boolean local ] ) : Object
获取组件底层元素当前盒子模型的尺寸。（译者注：盒子模型是CSS术语，详细解释请自行搜索。）
获取组件底层元素当前盒子模型的尺寸。（译者注：盒子模型是CSS术语，详细解释请自行搜索。）
参数:
  • local : Boolean
    (可选)值为true时，组件的left值和top值将代替页面的XY被返回。(默认值为false)
返回值:
  • Object
    返回值的格式{x, y, width, height}
BoxComponent
getBubbleTarget () : Ext.Container
为Observable的fireEvent方法提供链接，它沿着继承结构进行冒泡操作。
为Observable的fireEvent方法提供链接，它沿着继承结构进行冒泡操作。
参数:
  • 无。
返回值:
  • Ext.Container
    拥有当前组件的容器。
Component
getEl () : Ext.Element
返回 Ext.Element ，它包装了当前组件。...

返回 Ext.Element ，它包装了当前组件。

通常情况下，这将是一个<DIV>元素，它是由该类的onRender方法创建的， 但是可以使用autoEl配置项 覆盖它。

注意: 此元素将会一直处于无效状态直到当前组件渲染完成。

如需向当前组件的 DOM事件(而不是当前组件自己的Observable事件)添加监听器， 更多建议，参见 listeners 配置项，或者直接使用一个render监听器:

new Ext.Panel({
    title: 'The Clickable Panel',
    listeners: {
        render: function(p) {
            // Append the Panel to the click handler's argument list.
            p.getEl().on('click', handlePanelClick.createDelegate(null, [p], true));
        },
        single: true  // Remove the listener after first invocation
    }
});
参数:
  • 无。
返回值:
  • Ext.Element
    包装当前组件的元素。
Component
getErrors ( Mixed value ) : Array
运行NumberField的所有校验器并且返回一个包含所有错误的数组。 注意，这将首先运行...
运行NumberField的所有校验器并且返回一个包含所有错误的数组。 注意，这将首先运行TextField的校验，所以返回的数组合并了表单项所有错误。 附加校验值是否是一个数字并且处于配置的最大值和最小值之间。
参数:
  • value : Mixed
    需要从中获取错误的值(默认为当前表单项的值)
返回值:
  • Array
    当前表单项的所有错误
NumberField
getHeight () : Number
获取该组件的当前高度值。
获取该组件的当前高度值。
参数:
  • 无。
返回值:
  • Number
BoxComponent
getId () : String
返回当前组件的id，如果没有定义id，则自动生成并返回一个id:'ext-comp-'...
返回当前组件的 id 如果没有定义 id 则自动生成并返回一个 id

'ext-comp-' + (++Ext.Component.AUTO_ID)
参数:
  • 无。
返回值:
  • String
    id
Component
getItemId () : String
返回当前组件的 itemId 。 如果没有通过配置参数指定 itemId 那么，将会使用...
返回当前组件的 itemId 。 如果没有通过配置参数指定 itemId 那么，将会使用 getId 返回 id 。
参数:
  • 无。
返回值:
  • String
Component
getName () : String
如果可用，返回表单项的 name 或者 hiddenName 属性。
如果可用，返回表单项的 name 或者 hiddenName 属性。
参数:
  • 无。
返回值:
  • String
    name 表单项的{@link Ext.form.Field#name name}或者{@link Ext.form.ComboBox#hiddenName hiddenName}
Field
getOuterSize () : Object
获取当前组件所在元素的尺寸大小，包括边缘的空白处。
获取当前组件所在元素的尺寸大小，包括边缘的空白处。
参数:
  • 无。
返回值:
  • Object
    一个包含元素大小的对象 {width: (element width + left/right margins), height: (element height + top/bottom margins)}
BoxComponent
getPosition ( [ Boolean local ] ) : Array
获取组件底层元素当前的XY位置。
获取组件底层元素当前的XY位置。
参数:
  • local : Boolean
    (可选)如果为true，将返回元素的left和top值，而不是相对于页面内的 XY。(默认值为 false)
返回值:
  • Array
    元素的XY位置值(例如：[100, 200])
BoxComponent
getRawValue () : Mixed
返回原始数据值，可能不是一个合法的、已定义的值。 返回格式化的值参见...
返回原始数据值，可能不是一个合法的、已定义的值。 返回格式化的值参见 getValue。
参数:
  • 无。
返回值:
  • Mixed
    value 表单项的值
Field
getResizeEl () : Ext.Element
返回该组件的最外层用来定义这些组件整体大小的Element...

返回该组件的最外层用来定义这些组件整体大小的Element对象。

通常用 getEl 方法将会返回相同的Element对象，但在有些情况下，组件可能有一些更多的封装了它的主要动态Element对象的Element对象。

例如ComboBox。它是封装在一个包含<input>元素的包装元素里(这将返回其 getEl方法和触发按钮的元素)。返回的元素为resizeEl。

参数:
  • 无。
返回值:
  • Ext.Element
    The Element which is to be resized by size managing layouts.
BoxComponent
getSize () : Object
获取组件底层元素当前的大小。
获取组件底层元素当前的大小。
参数:
  • 无。
返回值:
  • Object
    一个包含元素大小的对象{width: (element width), height: (element height)}
BoxComponent
getValue () : Mixed
返回格式化的数据值(undefined或者emptyText将会以''返回)。 如需返回原始值，参见...
返回格式化的数据值(undefined或者emptyText将会以''返回)。 如需返回原始值，参见 getRawValue。
参数:
  • 无。
返回值:
  • Mixed
    value 表单项的值
Field
getWidth () : Number
获取该组件的当前宽度值。
获取该组件的当前宽度值。
参数:
  • 无。
返回值:
  • Number
BoxComponent
getXType () : String
获取当前组件的xtype，它是用 Ext.ComponentMgr 注册的。 所有可用的xtype列表，参见...
获取当前组件的xtype，它是用 Ext.ComponentMgr 注册的。 所有可用的xtype列表，参见 Ext.Component 类头部。示例用法:

var t = new Ext.form.TextField();
alert(t.getXType());  // alerts 'textfield'
参数:
  • 无。
返回值:
  • String
    The xtype
Component
getXTypes () : String
返回此组件的xtype继承树，用字符'-'分隔。 所有可用的xtype值...

返回此组件的xtype继承树，用字符'-'分隔。 所有可用的xtype值，请参见Ext.Component 类的头部。

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

示例用法:

var t = new Ext.form.TextField();
alert(t.getXTypes());  // alerts 'component/box/field/textfield'
参数:
  • 无。
返回值:
  • String
    xtype层次字符串
Component
hasListener( String eventName ) : Boolean
检测对象是否包含指定事件的任何监听器
检测对象是否包含指定事件的任何监听器
参数:
  • eventName : String
    检测的事件名
返回值:
  • Boolean
    如果事件被监听则为true，否则为false
Observable
hide () : Ext.Component
隐藏当前组件。 监听 beforehide' 事件并且返回false 可以取消隐藏组件的操作。 在隐藏组件之后触发...
隐藏当前组件。 监听 beforehide' 事件并且返回false 可以取消隐藏组件的操作。 在隐藏组件之后触发 ' hide' 事件。 如果组件被配置成 hidden 那么此方法在内部被调用。
参数:
  • 无。
返回值:
  • Ext.Component
    this
Component
isDirty () : Boolean
如果此表单项的值与原始值相比发生了改变，返回true。 如果表单项...

如果此表单项的值与原始值相比发生了改变，返回true。 如果表单项被禁用或者尚未被渲染将会返回false。

注意，如果所属的 form 配置了一个Ext.form.BasicForm， 那么在使用Ext.form.BasicForm. setValues 加载值之后，原始值将会被更新。

参数:
  • 无。
返回值:
  • Boolean
    如果此表单项的值与原始值相比发生了改变(并且没有被禁用)，返回true，其它返回false。
Field
isValid ( Boolean preventMark ) : Boolean
通过 校验 表单项 处理后的值 ，返回表单项当前值是否合法。...
通过 校验 表单项 处理后的值 ，返回表单项当前值是否合法。 注意: disabled 的表单项将会被忽略。
参数:
  • preventMark : Boolean
    True将会禁止把表单项标记为非法
返回值:
  • Boolean
    如果值是合法的，为true，其它为false
Field
isVisible () : Boolean
如果当前组件可见，返回true。
如果当前组件可见，返回true。
参数:
  • 无。
返回值:
  • Boolean
    如果当前组件可见，返回true，其它返回false。
Component
isXType ( String xtype , [ Boolean shallow ] ) : Boolean
Tests whether or not this Component is of a specific xtype. This can test whether this Component is descended from th...

测试此组件是否是指定的xtype。此方法既可以测试是否是指定的xtype的某个子类， 或者它是否直接是指定的xtype类(shallow=true)。

如果使用你自己的子类，必须知道组件必须注册它的xtype值。

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

示例用法:

var t = new Ext.form.TextField();
var isText = t.isXType('textfield');        // true
var isBoxSubclass = t.isXType('box');       // true, descended from BoxComponent
var isBoxInstance = t.isXType('box', true); // false, not a direct BoxComponent instance
参数:
  • xtype : String
    需要为当前组件进行检测的xtype
  • shallow : Boolean
    (可选) 如果为false，检测组件是否是xtype继承树中的某个子类（默认是这种情况）， 如果为true，只检测组件是否是指定的xtype类型。
返回值:
  • Boolean
    如果当前组件是指定xtype的子类，返回true，其它返回flase。
Component
markInvalid ( [ String msg ] ) : void
显示一个关联到当前表单项的出错信息， 使用msgTarget 来决定如何显示消息并将...

显示一个关msgTarget 来决定如何显示消息并将 invalidClass 应用到表单项的UI元素上。

注意: 如果表单项的值确实通过了校验， 此方法不会导致表单项的 validate 方法返回 false 。 所以简单地把一个表单项标记为非法并不会阻止表单项 通过设置的 Ext.form.Action.Submit.clientValidation 被提交。

invalid.
参数:
  • msg : String
    (可选)校验信息(默认为invalidText)
返回值:
  • void
Field
mon ( Observable|Element item , Object|String ename , Function fn , Object scope , Object opt ) : void
向任何Observable对象(或者元素)上添加监听器，监听器将会在组件...

向任何Observable对象(或者元素)上添加监听器，监听器将会在组件销毁时被自动删除。
用法：

myGridPanel.mon(myGridPanel.getSelectionModel(), 'selectionchange', handleSelectionChange, null, {buffer: 50});

or:

myGridPanel.mon(myGridPanel.getSelectionModel(), {
    selectionchange: handleSelectionChange,
    buffer: 50
});
参数:
  • item : Observable|Element
    需要添加listener/listeners的项目。
  • ename : Object|String
    事件名，或者一个包含事件名属性的对象。
  • fn : Function
    (可选) 如果 ename 参数是一个事件名，此参数为处理函数。
  • scope : Object
    (可选)如果 ename 参数是一个事件名称，此参数是作用域 ( this 引用)，监听函数将会在此作用域中被执行。
  • opt : Object
    (可选)如果 ename 参数是一个事件名称， 此参数是 addListener 配置项。
返回值:
  • void
Component
mun ( Observable|Element item , Object|String ename , Function fn , Object scope ) : void
删除通过mon 方法添加的监听器。
删除通过mon 方法添加的监听器。
参数:
  • item : Observable|Element
    需要删除listener/listeners的项目。
  • ename : Object|String
    事件名称，或者一个包含事件名称属性的对象。
  • fn : Function
    (可选)如果 ename 参数是一个事件名称，此参数是一个处理函数。
  • scope : Object
    (可选)如果 ename 参数是一个事件名称，此参数是作用域 ( this 引用)，监听函数将会在此作用域中被执行。
返回值:
  • void
Component
nextSibling () : Ext.Component
返回所属容器中的下一个组件
返回所属容器中的下一个组件
参数:
  • 无。
返回值:
  • Ext.Component
Component
on( String eventName, Function handler, [Object scope], [Object options] ) : void
给对象添加事件处理器 (addListener的简写形式)
给对象添加事件处理器 (addListener的简写形式。)
参数:
  • eventName : String
    监听的事件类型
  • handler : Function
    事件调用的方法
  • scope : Object
    （可选）处理方法执行时的作用域 (this 的引用)。 如果被忽略。默认为触发事件的对象。
  • options : Object
    可选 包含处理器配置的对象。
返回值:
  • void
Observable
previousSibling () : Ext.Component
返回所属容器中的前一个组件
返回所属容器中的前一个组件
参数:
  • 无。
返回值:
  • Ext.Component
Component
processValue ( Mixed value ) : void
仅仅在需要准备原始值供校验时，才需要覆盖此方法(参见 validate和 isValid)。...
仅仅在需要准备原始值供校验时，才需要覆盖此方法(参见 validate和 isValid)。 此方法被期望为表单项返回处理后的值，此值将会被用来进行校验 (参见validateValue方法)。
参数:
  • value : Mixed
返回值:
  • void
Field
purgeListeners() : void
移除对象上所有的监听器
移除对象上所有的监听器
参数:
  • 无。
返回值:
  • void
Observable
relayEvents( Object o, Array events ) : void
从指定的Observable上传递选择的事件就好像被当前对象触发一样。
从指定的Observable上传递选择的事件就好像被当前对象触发一样。
参数:
  • o : Object
    该Observable上的事件被当前对象传递。
  • events : Array
    传递的数组名。
返回值:
  • void
Observable
removeClass ( string cls ) : Ext.Component
从组件底层的元素上删除一个CSS类。
从组件底层的元素上删除一个CSS类。
参数:
  • cls : string
    需要移除的CSS类名
返回值:
  • Ext.Component
    this
Component
removeListener( String eventName, Function handler, [Object scope] ) : void
删除一个事件处理器。
删除一个事件处理器。
参数:
  • eventName : String
    处理器关联的事件类型。
  • handler : Function
    移除的处理器。 这应该是传递到addListener里的方法的引用。
  • scope : Object
    （可选）处理器指定的初始作用域。
返回值:
  • void
Observable
render ( [ Element/HTMLElement/String container ], [ String/Number position ] ) : void
在传递进来的HTML元素中渲染当前组件。...

在传递进来的HTML元素中渲染当前组件。

如果你正在使用一个Container 对象放置当前组件，那么请不要使用render方法。

当容器第一次被渲染时，它的子组件将会被容器的 layout 管理器渲染。

某些布局管理器允许动态添加子组件。它们包括 Ext.layout.CardLayout, Ext.layout.AnchorLayout, Ext.layout.FormLayout, Ext.layout.TableLayout。

当一个新的子组件被添加时，如果容器已经被渲染了， 你可能需要调用容器的 doLayout 方法来刷新视图，它将导致所有没有被渲染的子组件进行渲染操作。 此操作是必须的，这样你可以添加多个子组件而只刷新一次layout。

当创建复杂的UI时，非常重要的一点是，请记住调整子项目的尺寸和位置是容器的 layout 管理器的职责。 如果你希望子项目的尺寸对用户交互作出反应， 你必须为容器配置一个布局管理器，它将创建和管理你心里想要的那种布局。

忽略容器的layout 配置意味着将会使用一个基本的布局管理器，它除了按次序把子组件 渲染到容器中之外什么事情都不做。 这种情况下，任何尺寸和位置的调整操作都不会发生。

参数:
  • container : Element/HTMLElement/String
    (可选) 需要在其中渲染当前组件的元素。 如果它是从一个已存在的标签中创建的，此参数应该被忽略。
  • position : String/Number
    (可选) 容器中的一个元素ID或者一个DOM节点索引， 当前组件将会被插入到它前面 (默认append到容器的尾部)
返回值:
  • void
Component
reset () : void
将表单项的当前值重置为以前加载时的值，并且清除所有校验信息。...
将表单项的当前值重置为以前加载时的值，并且清除所有校验信息。 参见Ext.form.BasicForm. trackResetOnLoad 。
参数:
  • 无。
返回值:
  • void
TextField
resumeEvents() : void
重新开始触发事件。(参见suspendEvents) 如果事件以queueSuspended参数被挂起，则在事件被挂起时 ...
重新开始触发事件。(参见 suspendEvents) 如果事件以queueSuspended 参数被挂起，则在事件被挂起时触发的事件会被传递到所有的监听器上
参数:
  • 无。
返回值:
  • void
Observable
selectText ( [ Number start ], [ Number end ] ) : void
选中当前表单项中的文本
选中当前表单项中的文本
参数:
  • start : Number
    (可选)选中的起点索引(默认为0)
  • end : Number
    (可选)选中的结束索引(默认为文本长度)
返回值:
  • void
TextField
setActiveError ( String msg , Boolean suppressEvent ) : void
将当前activeError设置为所给的字符串。 触发'invalid'事件。这不会设置出错图标...
将当前activeError设置为所给的字符串。 触发'invalid'事件。这不会设置出错图标，仅仅设置消息并触发事件。 如需显示出错图标，可使用markInvalid代替，它将在内部调用此方法。
参数:
  • msg : String
    出错消息
  • suppressEvent : Boolean
    True将会禁止触发'invalid'事件
返回值:
  • void
Field
setAutoScroll ( Boolean scroll ) : Ext.BoxComponent
设置该组件内容溢出时是否自动显示滚动条。
设置该组件内容溢出时是否自动显示滚动条。
参数:
  • scroll : Boolean
    值为true的话组件自动显示滚动条。
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setDisabled ( Boolean disabled ) : Ext.Component
工具函数，使用布尔值设置有效/无效(disabled/enabled )。
工具函数，使用布尔值设置有效/无效(disabled/enabled )。
参数:
  • disabled : Boolean
返回值:
  • Ext.Component
    this
Component
setHeight ( Mixed height ) : Ext.BoxComponent
设置此组件的高度。该方法将触发resize事件。
设置此组件的高度。该方法将触发resize事件。
参数:
  • height : Mixed
    The new height to set.
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setMaxValue ( Number value ) : void
使用新值替换所有现存的 maxValue 。
使用新值替换所有现存的 maxValue 。
参数:
  • value : Number
    最大值
返回值:
  • void
NumberField
setMinValue ( Number value ) : void
使用新值替换所有现存的 minValue 。
使用新值替换所有现存的 minValue 。
参数:
  • value : Number
    最小值
返回值:
  • void
NumberField
setPagePosition ( Number x , Number y ) : Ext.BoxComponent
设置组件在页面中的XY位置。 如果需要设置left和top值 ，请使用...
设置组件在页面中的XY位置。 如果需要设置left和top值 ，请使用setPosition方法。 该方法触发move事件。
参数:
  • x : Number
    The new x position
  • y : Number
    The new y position
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setPosition ( Number left , Number top ) : Ext.BoxComponent
设置组件的left和top值。设置组件的页面XY值，请使用setPagePosition方法。该方法触发...
设置组件的left和top值。设置组件的页面XY值，请使用setPagePosition方法。该方法触发move事件。
参数:
  • left : Number
    The new left
  • top : Number
    The new top
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setRawValue ( Mixed value ) : Mixed
绕过校验，直接设置底层DOM表单项的值。 设置值并进行校验，参见 setValue。
绕过校验，直接设置底层DOM表单项的值。 设置值并进行校验，参见 setValue。
参数:
  • value : Mixed
    需要设置的值
返回值:
  • Mixed
    value 被设置的表单项值
Field
setReadOnly ( Boolean readOnly ) : void
设置当前表单项的只读状态。
设置当前表单项的只读状态。
参数:
  • readOnly : Boolean
    表单项是否应该只读。
返回值:
  • void
Field
setSize ( Mixed width , Mixed height ) : Ext.BoxComponent
设置BoxComponent的宽度和高度。 此方法触发resize事件...
设置BoxComponent的宽度和高度。 此方法触发resize事件。此方法可以接收单独的width或者height值作为参数， 或者你可以传递像这样的一个size对象： {width:10, height:20} 。
参数:
  • width : Mixed
    设置的新的width值。这可以是：
    • 一个Number类型指定Element新的宽度 Ext.Element.defaultUnit(默认为像素 :'px')。
    • 一个String类型用于设置width的CSS样式。
    • 一个size对象格式为 {width: widthValue, height: heightValue} 。
    • 值为 undefined 时，保留原来的width不变。
  • height : Mixed
    设置的新的height值(如果第一个参数传递了一个size对象，此参数没有必要传递)。这可以是：
    • 一个Number类型指定Element新的高度 Ext.Element.defaultUnit(默认为像素 :'px')。
    • 一个String类型用于设置height的CSS样式。也有可能不会被使用到。
    • 值为 undefined 时，保留原来的height不变。
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setValue ( Mixed value ) : Ext.form.Field
向表单项中设置一个数据值并校验之。 如需直接设置值而不进行校验，参见 setRawValue。
向表单项中设置一个数据值并校验之。 如需直接设置值而不进行校验，参见 setRawValue。
参数:
  • value : Mixed
    需要设置的值
返回值:
  • Ext.form.Field
    this
Field
setVisible ( Boolean visible ) : Ext.Component
工具方法，通过使用布尔值隐藏或者显示当前组件。
工具方法，通过使用布尔值隐藏或者显示当前组件。
参数:
  • visible : Boolean
    true时显示，false时隐藏
返回值:
  • Ext.Component
    this
Component
setWidth ( Mixed width ) : Ext.BoxComponent
设置组件的宽度。 此方法触发resize事件。
设置组件的宽度。 此方法触发resize事件。
参数:
  • width : Mixed
    The new width to set.
返回值:
  • Ext.BoxComponent
    this
BoxComponent
show () : Ext.Component
显示当前组件。监听' beforeshow' 事件，返回 false 取消显示组件...
显示当前组件。监听' beforeshow' 事件，返回 false 取消显示组件。在显示组件之后触发' show' 事件。
参数:
  • 无。
返回值:
  • Ext.Component
    this
Component
suspendEvents( Boolean queueSuspended ) : void
暂停触发所有的事件。 (参看resumeEvents)
暂停触发所有的事件。（参看 resumeEvents)
参数:
  • queueSuspended : Boolean
    如果传递为true则排列好暂停的事件使得在调用 resumeEvents 后再触发它们，而不是抛弃所有暂停的事件。
返回值:
  • void
Observable
syncSize () : Ext.BoxComponent
强制组件的大小按照此组件底层元素当前的高度和宽度计算。
强制组件的大小按照此组件底层元素当前的高度和宽度计算。
参数:
  • 无。
返回值:
  • Ext.BoxComponent
    this
BoxComponent
un( String eventName, Function handler, [Object scope] ) : void
删除一个事件处理器(removeListener方法的简写形式)
删除一个事件处理器(removeListener方法的简写形式。)
参数:
  • eventName : String
    处理器关联的事件类型
  • handler : Function
    被删除的处理器 这应该是传入 addListener 中的方法的引用。
  • scope : Object
    （可选）为处理器指定的初始作用域。
返回值:
  • void
Observable
unsetActiveError ( Boolean suppressEvent ) : void
清除activeError并触发'valid'事件。此方法被clearInvalid在内部进行...
清除activeError并触发'valid'事件。此方法被clearInvalid在内部进行调用， 并且一般情况下没有必要手工调用
参数:
  • suppressEvent : Boolean
    True将禁止触发'invalid'事件
返回值:
  • void
Field
update ( Mixed htmlOrData , [ Boolean loadScripts ], [ Function callback ] ) : void
刷新组件的内部区域。
刷新组件的内部区域。
参数:
  • htmlOrData : Mixed
    如果已经通过tpl为当前组件配置了一个模板，那么 将会使用此参数来装配模板。 如果没有为当前组件配置模板，组件的内容区域将会通过Ext.Element 进行刷新。
  • loadScripts : Boolean
    (可选)只用在使用html配置时此参数才合法。默认为false。
  • callback : Function
    (可选)只用在使用html配置时此参数才合法。 当脚本加载完成时回调函数才被执行。
返回值:
  • void
Component
updateBox ( Object box ) : Ext.BoxComponent
设置此组件底层元素的盒子模型尺寸。(译者注：盒子模型是CSS术语，详细资料请自行搜索。)
设置此组件底层元素的盒子模型尺寸。(译者注：盒子模型是CSS术语，详细资料请自行搜索。)
参数:
  • box : Object
    一个格式为{x, y, width, height}的对象
返回值:
  • Ext.BoxComponent
    this
BoxComponent
validate () : Boolean
校验表单项的值
校验表单项的值
参数:
  • 无。
返回值:
  • Boolean
    如果值合法，为true,否则为false
Field
validateValue ( Mixed The ) : Boolean
使用getErrors创建一个校验出错信息数组。 如果发现了任何错误，将会使用第一个错误作为参数...
使用getErrors创建一个校验出错信息数组。 如果发现了任何错误，将会使用第一个错误作为参数调用markInvalid方法并返回 false，否则返回true。以前，要求子类提供此方法的一个实现以处理校验过程--- 从3.2开始，应该用覆盖getErrors方法的方式替代。
参数:
  • The : Mixed
    表单项的当前值
返回值:
  • Boolean
    如果所有校验都通过，此值为true，如果一个或多个校验失败，则为false
Field

公共事件

Event Defined By
added : ( Ext.Component this , Ext.Container ownerCt , number index )
当一个组件被添加到一个Ext.Container时触发
当一个组件被添加到一个Ext.Container时触发
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • ownerCt : Ext.Container
    用于组件的容器
  • index : number
    添加组件的位置
Component
afterrender : ( Ext.Component this )
在组件渲染完成之后触发...

在组件渲染完成之后触发。

afterrender事件在当前组件被rendered 结束之后、在为组件定义的所有afterRender方法执行之后 触发，并且，如果有stateful， 也在状态被保存之后才触发。

监听器将会以如下参数格式被调用:
  • this : Ext.Component
Component
autosize : ( Ext.form.Field this , Number width )
当autoSize 方法被触发时发出此事件。 根据默认的逻辑，表单项可以有也可以实际上没有...
当autoSize 方法被触发时发出此事件。 根据默认的逻辑，表单项可以有也可以实际上没有 改变尺寸，但是此事件提供了一个钩子，如果有需要， 开发者在运行时可以提供额外的逻辑来改变输入栏的大小。
监听器将会以如下的参数格式调用:
  • this : Ext.form.Field
    文本栏
  • width : Number
    表单项新宽度
TextField
beforedestroy : ( Ext.Component this )
在组件 destroyed 之前触发。 在事件监听器中返回false以停止 destroy 操作。
在组件 destroyed 之前触发。 在事件监听器中返回false以停止 destroy 操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforehide : ( Ext.Component this )
在调用hide方法隐藏组件之前触发。 在事件监听器中返回false可以停止隐藏操作。
在调用hide方法隐藏组件之前触发。 在事件监听器中返回false可以停止隐藏操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforerender : ( Ext.Component this )
在组件被rendered 之前触发。 在事件监听器中返回false可以停止render 操作。
在组件被rendered 之前触发。 在事件监听器中返回false可以停止render 操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforeshow : ( Ext.Component this )
在调用show()方法现实组件之前触发。 事件处理函数返回false可以停止show。
在调用show 方法现实组件之前触发。 事件处理函数返回false可以停止show。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforestaterestore : ( Ext.Component this , Object state )
在组件状态恢复之前触发。返回false停止恢复状态操作。
在组件状态恢复之前触发。返回false停止恢复状态操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    StateProvider返回的状态哈希值。 如果没有禁止此事件，那么状态对象会被传递给applyState。 默认情况下，这样简单地把属性值拷贝到当前组件中。 可以覆盖此方法以提供自定的状态恢复操作。
Component
beforestatesave : ( Ext.Component this , Object state )
在组件状态被保存到配置的状态提供者之前触发。 返回false可以停止保存。
在组件状态被保存到配置的状态提供者之前触发。 返回false可以停止保存。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    状态值哈希。 这由在组件上调用getState() 方法决定。 此方法必须由开发者提供，返回是否需要对状态进行描述，默认情况下， Ext.Component有一个空实现。
Component
blur : ( Ext.form.Field this )
当表单项时区输入焦点时触发。
当表单项时区输入焦点时触发。
监听器将会以如下参数被调用:
  • this : Ext.form.Field
Field
change : ( Ext.form.Field this , Mixed newValue , Mixed oldValue )
如果表单项的时发生改变，在表单项刚刚失去焦点时触发。
如果表单项的时发生改变，在表单项刚刚失去焦点时触发。
监听器将会以如下参数格式调用:
  • this : Ext.form.Field
  • newValue : Mixed
    新的值
  • oldValue : Mixed
    原始值
Field
destroy : ( Ext.Component this )
在组件被销毁之后触发。
在组件被destroyed之后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
disable : ( Ext.Component this )
在组件被设置为无效状态后触发。
在组件被设置为无效状态后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
enable : ( Ext.Component this )
当组件被设置为有效(enabled)之后触发。
当组件被设置为有效(enabled)之后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
focus : ( Ext.form.Field this )
当表单项获得输入焦点时触发。
当表单项获得输入焦点时触发。
监听器将会以如下参数格式被调用:
  • this : Ext.form.Field
Field
hide : ( Ext.Component this )
在组件被隐藏之后触发。 当调用hide 方法隐藏组件之后触发。
在组件被隐藏之后触发。 当调用hide 方法隐藏组件之后触发。
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
invalid : ( Ext.form.Field this , String msg )
在表单项被标记为非法之后触发。
在表单项被标记为非法之后触发。
监听器将会以如下参数格式调用:
  • this : Ext.form.Field
  • msg : String
    校验信息
Field
keydown : ( Ext.form.TextField this , Ext.EventObject e )
输入栏的keydown事件。 只有在 enableKeyEvents 被设置为true时才触发此事件。
输入栏的keydown事件。 只有在 enableKeyEvents 被设置为true时才触发此事件。
监听器将会以如下参数格式调用:
  • this : Ext.form.TextField
    文本栏
  • e : Ext.EventObject
TextField
keypress : ( Ext.form.TextField this , Ext.EventObject e )
输入栏的keypress事件。 只有在enableKeyEvents 被设置为true时才触发此事件。
输入栏的keypress事件。 只有在enableKeyEvents 被设置为true时才触发此事件。
Listeners will be called with the following arguments:
  • this : Ext.form.TextField
    文本栏
  • e : Ext.EventObject
TextField
keyup : ( Ext.form.TextField this , Ext.EventObject e )
输入栏keyup事件。 只有在 enableKeyEvents 被设置为true时才触发此事件。
输入栏keyup事件。 只有在 enableKeyEvents 被设置为true时才触发此事件。
监听器将会以如下的参数格式调用:
  • this : Ext.form.TextField
    文本栏
  • e : Ext.EventObject
TextField
move : ( Ext.Component this , Number x , Number y )
在组件移动之后触发。
在组件移动之后触发。
监听器将会用如下的参数格式来调用:
  • this : Ext.Component
  • x : Number
    The new x position
  • y : Number
    The new y position
BoxComponent
removed : ( Ext.Component this , Ext.Container ownerCt )
当一个组件被从Ext.Container容器中删除时触发
当一个组件被从Ext.Container容器中删除时触发
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • ownerCt : Ext.Container
    持有组件的容器
Component
render : ( Ext.Component this )
在组件被渲染之后触发。
在组件被 rendered(渲染) 之后触发。
监听器将以如下的参数格式被调用:
  • this : Ext.Component
Component
resize : ( Ext.Component this , Number adjWidth , Number adjHeight , Number rawWidth , Number rawHeight )
在组件被调整大小之后触发。
在组件被调整大小之后触发。
监听器将以如下的参数格式被调用:
  • this : Ext.Component
  • adjWidth : Number
    这是width调整后的值
  • adjHeight : Number
    这是height调整后的值
  • rawWidth : Number
    这是width原来的值
  • rawHeight : Number
    这是height原来的值
BoxComponent
show : ( Ext.Component this )
在调用show 方法显示组件之后触发。
在调用show 方法显示组件之后触发。
监听器将会用如下的参数格式被调用:
  • this : Ext.Component
Component
specialkey : ( Ext.form.Field this , Ext.EventObject e )
当任何和导航有关的键被按下时触发(上下左右箭头, tab, 回车,esc, 等等) is pressed. 处理其它按键参见...
当任何和导航有关的键被按下时触发(上下左右箭头, tab, 回车,esc, 等等) is pressed. 处理其它按键参见 Ext.Panel.keys或者 Ext.KeyMap。 你可以检测 Ext.EventObject.getKey 以便获知哪个键被按下。例如：
var form = new Ext.form.FormPanel({
    ...
    items: [{
            fieldLabel: 'Field 1',
            name: 'field1',
            allowBlank: false
        },{
            fieldLabel: 'Field 2',
            name: 'field2',
            listeners: {
                specialkey: function(field, e){
                    // e.HOME, e.END, e.PAGE_UP, e.PAGE_DOWN,
                    // e.TAB, e.ESC, arrow keys: e.LEFT, e.RIGHT, e.UP, e.DOWN
                    if (e.getKey() == e.ENTER) {
                        var form = field.ownerCt.getForm();
                        form.submit();
                    }
                }
            }
        }
    ],
    ...
});
监听器将会以如下参数格式被调用:
  • this : Ext.form.Field
  • e : Ext.EventObject
    事件对象
Field
staterestore : ( Ext.Component this , Object state )
组件状态被存储之后触发。
组件状态被存储之后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    StateProvider返回的状态哈希值。 如果没有禁止此事件，那么状态对象会被传递给applyState。 默认情况下，这样简单地把属性值拷贝到当前组件中。 可以覆盖此方法以提供自定的状态恢复操作。
Component
statesave : ( Ext.Component this , Object state )
在组件状态被保存到所配置的状态提供者之后触发。
在组件状态被保存到所配置的状态提供者之后触发。
监听器将会用如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    状态值hash。 这是由在足见上调用getState() 方法决定的。 开发者必须提供此方法以返回是否需要恢复状态，默认情况下， Ext.Component有一个空实现。
Component
valid : ( Ext.form.Field this )
在表单项被校验无错误之后触发。
在表单项被校验无错误之后触发。
监听器将会以如下参数格式被调用:
  • this : Ext.form.Field
Field


Observable
    Component
      BoxComponent
        Field
          Checkbox
            Radio

Class Ext.form.Radio

包: | Ext.form
定义类的文件: | Radio.js
类: | Radio
继承自: | Checkbox
单个radio表单项。和Checkbox相似，但是提供了自动设置输入值的便利。 如果你给一个组中的radio设置了相同的值，浏览器会自动处理Radio分组。

配置项

Config Options Defined By
allowDomMove : Boolean
在渲染时组件是否可以移动Dom节点(默认为true)。
Component
anchor : String
注: 这个配置只用于该组件被包含在一个已使用AnchorLayout...

注: 这个配置只用于该组件被包含在一个已使用 AnchorLayout (或者其子类)配置的Container时。 基于布局管理器，例如：

  • Ext.form.FormPanel
  • 指定 layout: 'anchor' // or 'form', or 'absolute'

参见 Ext.layout.AnchorLayout. anchor 。

BoxComponent
applyTo : Mixed
指定一个元素的id、一个DOM元素或者一个已经存在并被渲染到DIV中的元素，此DIV已经被...

指定一个元素的id、一个DOM元素或者一个已经存在并被渲染到DIV中的元素，此DIV已经被 渲染到document中，并且为当前组件指定了一些结构化的标签。

  • 描述 :
      当使用了 applyTo， 在主元素中也可以用id或者CSS类名来指定组件的托管部分， 并且，如果可以的话，创建的组件可能也会试图在那个标签中创建它的子组件。
  • 注意 :
      当使用此配置项时，无需调用render()方法。
      如果指定了applyTo属性，任何传递给 renderTo 的值都会被忽略，并且目标元素的父节点将会自动被用作组件的容器。
Component
autoCreate : String/Object
一个DomHelper 元素描述，或者为true使用一个默认元素描述。 用来创建封装当前组件的...

一个DomHelper 元素描述，或者为true使用一个默认元素描述。 用来创建封装当前组件的 Element。 细节参见 autoEl 。 默认为:

                                {tag: 'input', type: 'text', size: '20', autocomplete: 'off'}
Checkbox
autoEl : Mixed
一个表签名或者一个 DomHelper 描述，用来创建 Element ，它将封装当前组件...

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

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

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

{
    xtype: 'box',
    autoEl: {
        tag: 'img',
        src: 'http://www.example.com/example.jpg'

    }
}, {
    xtype: 'box',
    autoEl: {
        tag: 'blockquote',
        html: 'autoEl is cool!'
    }
}, {
    xtype: 'container',
    autoEl: 'ul',
    cls: 'ux-unordered-list',
    items: {
        xtype: 'box',
        autoEl: 'li',
        html: 'First list item'
    }
}
Component
autoHeight : Boolean
如果值为true，height配置项为'auto'，否则值为false的话使用固定的高度...

如果值为true，height配置项为'auto'，否则值为false的话使用固定的高度， 或者可以由其父类容器 layout manager来控制。(默认值为 false)。

注: 虽然很多组件继承了这个配置选项，但不是所有这些组件的自适应高度配置都会像期望的那样起作用。 设置autoHeight：值为true时，浏览器将根据元素的内容自动设置高度，这将意味着Ext不会去管理高度。

如果是由浏览器来管理高度，需要注意的是，通过浏览器进行调整的结构组件内不能被发现， 因此宽度的变化可能导致需要进行同步处理元素的高度。 例如：

var w = new Ext.Window({
    title: 'Window',
    width: 600,
    autoHeight: true,
    items: {
        title: 'Collapse Me',
        height: 400,
        collapsible: true,
        border: false,
        listeners: {
            beforecollapse: function() {
                w.el.shadow.hide();
            },
            beforeexpand: function() {
                w.el.shadow.hide();
            },
            collapse: function() {
                w.syncShadow();
            },
            expand: function() {
                w.syncShadow();
            }
        }
    }
}).show();
BoxComponent
autoScroll : Boolean
如果值为true，将会在该元素上使用overflow:'auto'配置，并且在必要的时候...
如果值为true，将会在该元素上使用overflow:'auto'配置，并且在必要的时候自动显示滚动条，否则，溢出部分的组件都会被切除(默认值为 false)。
BoxComponent
autoShow : Boolean
如果组件需要检测隐藏CSS属性(如 'x-hidden' 或者 'x-hide-display')并且在渲染时删除...
如果组件需要检测隐藏CSS属性(如 'x-hidden' 或者 'x-hide-display')并且在渲染时删除它们 (默认为false)，设置此值为true。
Component
autoWidth : Boolean
如果为true，使用width:'auto'配置，否则使用固定的宽度...

如果为true，使用width:'auto'配置，否则使用固定的宽度，或者可以由其父类容器的layout manager来控制。(默认值为 false)。

注: 虽然很多组件继承了这个配置选项，但不是所有这些组件的自适应宽度配置都会像期望的那样起作用。 设置autoWidth：值为true时，浏览器将根据元素的内容自动设置宽度，这将意味着Ext不会去管理宽度。

如果是由浏览器来管理宽度，需要注意的是，通过浏览器进行调整的结构组件内不能被发现，因此宽度的变化可能导致需要进行同步处理元素的宽度。 例如，在这个元素的目标是：

<div id='grid-container' style='margin-left:25%;width:50%'></div>
当浏览器窗口改变时，渲染后的Panel必须监听浏览器窗口大小的变化，以便通知子项，浏览器改变了其宽度：

var myPanel = new Ext.Panel({
    renderTo: 'grid-container',
    monitorResize: true, // relay on browser resize
    title: 'Panel',
    height: 400,
    autoWidth: true,
    layout: 'hbox',
    layoutConfig: {
        align: 'stretch'
    },
    defaults: {
        flex: 1
    },
    items: [{
        title: 'Box 1',
    }, {
        title: 'Box 2'
    }, {
        title: 'Box 3'
    }],
});
BoxComponent
boxLabel : String
复选框旁边显示的文本。（默认为''）
Checkbox
boxMaxHeight : Number
设置组件的最大高度值...

设置组件的最大高度值。

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

BoxComponent
boxMaxWidth : Number
设置组件的最大宽度值...

设置组件的最大宽度值。

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

BoxComponent
boxMinHeight : Number
设置组件的最小高度值...

设置组件的最小高度值。

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

BoxComponent
boxMinWidth : Number
设置组件的最小宽度值...

设置组件的最小宽度值。

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

BoxComponent
bubbleEvents : Array
一个事件数组，当这些事件被触发时，将会被冒泡到所有父容器中。参见....

一个事件数组，当这些事件被触发时，将会被冒泡到所有父容器中。参见 Ext.util.Observable.enableBubble。 默认为 []。

Component
checked : Boolean
true当复选框被渲染为已选中状态时，此值为true。 (默认值是 false)
Checkbox
clearCls : String
应用到特殊的clearing div的CSS类， 这个clearing div直接渲染到每个form field的包装器后面...

应用到特殊的clearing div的CSS类， 这个clearing div直接渲染到每个form field的包装器后面，以提供 清除field的功能(默认为 'x-form-clear-left')。

注意: 只有在当前组件被渲染到一个使用FormLayout 布局(例如 Ext.form.FormPanel 或者指定 layout:'form')的 容器中、或者是指定了一个fieldLabel 、或者指定isFormField=true 时此配置才有效。

另请参见 Ext.layout.FormLayout. fieldTpl。

Component
cls : String
一个可选的额外CSS类，它将被添加到当前组件的元素上(默认为'')...
一个可选的额外CSS类，它将被添加到当前组件的元素上(默认为'')。 此属性对于在组件上，或者它的任何使用标准CSS规则的孩子节点上， 添加定制的样式非常有用。
Field
contentEl : String
(可选)指定一个已存在的HTML元素，或者一个已存在HTML元素的...

(可选)指定一个已存在的HTML元素，或者一个已存在HTML元素的 id ，它们将被用作当前组件的内容。

  • 描述 :
    此配置选项被用来将一个已存在的HTML元素 插入到一个新组件(在组件渲染之后它简单地移动DOM元素) 的layout元素中，使它成为该组件的内容。
  • 注意 :
    指定的HTML元素将被append到组件的layout元素中， 在所有配置的 HTML 被插入之后， 并且，这样的话，在render事件 被触发时，document中将不再包含此元素。
    指定的HTML元素将不会参与组件所有可能使用的 layout 过程(译者注：指这些HTML元素 不会参与布局操作)。 它仅是HTML而已。布局操作实在孩子 items 上进行的。
    添加 x-hidden 或者 x-hide-display CSS类，以防在内容渲染到panel时发生闪烁。
Component
ctCls : String
一个可选的外部CSS样式，添加到这个组件的容器(默认值为 '')。 这个方法对于使用标准的CSS规则...

一个可选的外部CSS样式，添加到这个组件的容器(默认值为 '')。 这个方法对于使用标准的CSS规则，为组件或它的任何一个子组件添加特定的样式非常有用。 参见 Ext.layout.ContainerLayout和 extraCls 。

注意: ctCls 默认为 ''期望如下的类，它们将指定一个默认值:

  • Box Layout : 'x-box-layout-ct'
使用一个额外的CSS类配置以上的Class，它是append到默认对象上的。例如， 对于BoxLayout (Hbox and Vbox):
                                ctCls: 'x-box-layout-ct custom-class'

Component
data : Mixed
初始化数据集，它将被应用到 tpl 上以刷新组件的内容区域。
Component
disabled : Boolean
当前组件处于无效状态时为true。 Read-only.
Field
disabledClass : String
当组件处于无效状态时添加到组件上的CSS类(默认为 'x-item-disabled')。
Component
fieldClass : String
表单项的默认CSS类(默认为'x-form-field')
Checkbox
fieldLabel : String
紧靠此field显示的标签文本(默认值为 '')。注意...

紧靠此field显示的标签文本(默认值为 '')。

注意:只有在当前组件被渲染到一个使用FormLayout 的容器中时，此配置才有效。 (例如 Ext.form.FormPanel 或 指定 layout:'form')。

另请参见 hideLabel 、 Ext.layout.FormLayout和 fieldTpl。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Name'
    }]
});
Component
flex : Number
注: 这个配置只用于该组件被包含在一个已使用BoxLayout配置的Container中时...

注: 这个配置只用于该组件被包含在一个已使用BoxLayout配置的Container中时。通过计算每一个子组件的flex值所占全部flex值之和的比例，来决定子组件的宽(HBoxLayout)高(VBoxlayout)。 任何子项的 flex = 0 或 flex = undefined 将不被设置(初始值大小将不被改变)。

BoxComponent
focusClass : String
当表单项获得焦点时使用的CSS类(默认为 'x-form-focus')
Checkbox
handler : Function
当checked的值被改变时调用的方法(可以用来替代check事件的处理)。 该处理是......
当 checked 的值被改变时调用的方法(可以用来替代check事件的处理)。 该处理是通过以下参数：
  • checkbox : Ext.form.Checkbox
    该复选框被切换。
  • checked : Boolean
    复选框新的选中状态。
Checkbox
height : Number
组件的高度(默认值为 auto)。注:如果想使用百分比的方式...
组件的高度(默认值为 auto)。注:如果想使用百分比的方式来设置值，请查看 Ext.Component.anchor。
BoxComponent
hidden : Boolean
如果当前组件处于隐藏状态，此值为true。Read-only。
Component
hideLabel : Boolean
true时完全隐藏label元素 ( label 和 separator)。 默认为 false。 默认情况下，即使你不指定...

true时完全隐藏label元素 ( label 和 separator)。 默认为 false。 默认情况下，即使你不指定 fieldLabel 它的空间仍然会被保留，这样这块区域会与其它确实拥有label的区域位于同一排。 讲此值设置为 true 将导致此区域不再保留此空间。

注意: 参见 clearCls 的注释。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield'
        hideLabel: true
    }]
});
Component
hideMode : String
组件如何隐藏，支持的值有： 'visibility' (css visibility), 'offsets' (位置偏移量为负值) 和...

组件如何隐藏，支持的值有： 'visibility' (css visibility), 'offsets' (位置偏移量为负值) 和 'display' (css display).

注意:一般首选默认值 'display'，因为当组件第一次显示的时候它们会自动进行布局 (隐藏的时候不会调整尺寸)。

Component
hideParent : Boolean
此值为true时，当调用hide/show方法时，将会hide和show组件的容器...
此值为true时，当调用hide/show方法时，将会hide和show组件的容器；false时将会 hide和show组件自身(默认为false)。例如，这可以用作window上隐藏按钮的一种 快捷操作，通过设置此按钮的hideParent:true，然后把它添加到window上。
Component
html : String/Object
一个HTML片段，或者一个 DomHelper 描述，用作layout元素的内容(默认为'')。...
一个HTML片段，或者一个 DomHelper 描述，用作layout元素的内容(默认为'')。 这个HTML内容在组件渲染之后才被添加，所以在 render 出发的时候，document中尚未包含此HTML。 但是这个内容将会在所有配置的 contentEl 之前被插入到body标签中。
Component
id : String
当前组件唯一的id(默认为auto-assigned id)...

当前组件唯一的id(默认为auto-assigned id)。 如果你需要在以后访问组件，而又没有一个有效的组件对象引用，那么你需要指定一个 id( 也就是，使用Ext. getCmp方法 )。

注意，此id也将被用作组件底层HTML标签的id，这些标签被渲染到页面中。 这将允许你编写基于id的CSS规则，以独立地描述指定的实例；并且，也可以通过 组件父标签的id选中子元素。

注意:为了避免与唯一的id 产生重复， 请参见 itemId 和 ref 。

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

Component
inputType : String
输入栏的类型属性---例如radio,text,password,file(默认为'text')。...
输入栏的类型属性---例如radio,text,password,file(默认为'text')。 'file'和'password'类型通常必须用来渲染那些没有独立Ext组件的表单项类型。 注意，如果你使用inputType:'file'， 那么将不再支持 emptyText 并且应该避免使用。
Field
inputValue : String
值应被创建为输入元素的值的值属性。（默认值为'undefined'）
Checkbox
invalidClass : String
当把表单项标记为非法时所使用的CSS类(默认为'x-form-invalid')
Field
invalidText : String
当把一个表单项标记为非法状态并且没有提供消息时所使用的出错文本...
当把一个表单项标记为非法状态并且没有提供消息时所使用的出错文本 (默认为'The value in this field is invalid')
Field
itemCls : String
注意: 只有在当前组件被渲染到一个使用FormLayout 布局的 容器中时此配置才有效...

注意: 只有在当前组件被渲染到一个使用FormLayout 布局的 容器中时此配置才有效。 (例如Ext.form.FormPanel 或者指定 layout:'form')。

一个附加的CSS类，应用到div上，包装当前field的表单元素。 如果提供了此参数， field级上的itemCls将会覆盖 container级上提供的 默认itemCls。 为itemCls指定的值将会被添加默认的 类('x-form-item')。

既然它被应用到项目的包装器上(参见 Ext.layout.FormLayout。 fieldTpl)， 它将允许你编写能应用到此field、label(如果有指定)、或者field内部任何其它元素的标准CSS规则。

注意: 参考 fieldLabel的注释。 .

示例用法:

// Apply a style to the field's label:
<style>
    .required .x-form-item-label {font-weight:bold;color:red;}
</style>

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Name',
        itemCls: 'required' //this label will be styled
    },{
        xtype: 'textfield',
        fieldLabel: 'Favorite Color'
    }]
});
Component
itemId : String
当没有可利用的对象引用时，itemId可以作为第二选择，用来获得一个组件的引用， 代替 ...

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

var c = new Ext.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'); // 与 Ext.getCmp()不同

p2 = p1.ownerCt.getComponent('p2'); // 通过兄弟对象获得引用

另请参见 id 和 ref 。

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

Component
labelSeparator : String
每个fieldLabel 文本后面现实的分隔符。 此属性可以在多个层次上进行配置...

每个fieldLabel 文本后面现实的分隔符。 此属性可以在多个层次上进行配置。优先顺序为：

  • field / component level
  • container level
  • layout level (默认为冒号 ':')
如不需要为当前field的label显示分隔符，指定一个空字符串''即可。

注意:参见 clearCls 的注释。

另请参见 hideLabel 和 Ext.layout.FormLayout。 fieldTpl。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    layoutConfig: {
        labelSeparator: '~'   // layout config has lowest priority (defaults to ':')
    },
    labelSeparator: '>>',     // config at container level
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Field 1',
        labelSeparator: '...' // field/component level config supersedes others
    },{
        xtype: 'textfield',
        fieldLabel: 'Field 2' // labelSeparator will be '='

    }]
});
Component
labelStyle : String
一个CSS样式描述字符串，它将直接应用到当前field的label上...

一个CSS样式描述字符串，它将直接应用到当前field的label上。 如果有设置，默认为容器的labelStyle值(例如 Ext.layout.FormLayout.labelStyle , 或者 '')。

注意:参见 clearCls 的注释。

另请参见 hideLabel 和 Ext.layout.FormLayout. fieldTpl。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Name',
        labelStyle: 'font-weight:bold;'
    }]
});
Component
listeners : Object
一个包含一个或多个事件处理器的配置对象，会在初始化的时候被添加到目标对象上...

一个包含一个或多个事件处理器的配置对象，会在初始化的时候被添加到目标对象上。 该配置对象应该是一个有效的监听器配置对象就像 addListener例子中指定的一样可一次附加多个处理器。

ExtJs Components上的DOM事件

一些 ExtJs Component 类导出时会选择一些DOM事件(例如 "click", "mouseover" 等等), 这通常只是在有额外的值可以被添加时发生。例如DataView类的 click事件会传递被点击的节点。也可以直接在Component的HTMLElementevent上访问DOM事件，但必需在Component被渲染后监听器才能添加到Element 上。可以按照以下步骤添加插件:

// 插件会用一个监听器配置对象进行配置。
//该组件会被添加到所有处理方法的参数列表上。
Ext.DomObserver = Ext.extend(Object, {
    constructor: function(config) {
        this.listeners = config.listeners ? config.listeners : config;
    },

    // 组件将自己传递进了插件的初始化方法里
    init: function(c) {
        var p, l = this.listeners;
        for (p in l) {
            if (Ext.isFunction(l[p])) {
                l[p] = this.createHandler(l[p], c);
            } else {
                l[p].fn = this.createHandler(l[p].fn, c);
            }
        }

        // 渲染后立即添加监听器到元素上
        c.render = c.render.createSequence(function() {
            var e = c.getEl();
            if (e) {
                e.on(l);
            }
        });
    },

    createHandler: function(fn, c) {
        return function(e) {
            fn.call(this, e, c);
        };
    }
});

var combo = new Ext.form.ComboBox({

    // 元素被点击后折叠
    plugins: [ new Ext.DomObserver({
        click: function(evt, comp) {
            comp.collapse();
        }
    })],
    store: myStore,
    typeAhead: true,
    mode: 'local',
    triggerAction: 'all'
});

Observable
margins : Object
注:此配置只用于该组件展现在一个使用BorderLayout...

注:此配置只用于该组件展现在一个使用BorderLayout 或 BoxLayout的两个子类之一作为布局的容器。

这个margins对象在该组件中的格式为：

{top: (top margin),right: (right margin),bottom: (bottom margin),left: (left margin)}

也可以是一个字符串，中间用空格分隔，margin值为数字。 把matches中每一个值的次序跟CSS中margin值的排列方式相对应：

  • 如果只有一个值，它适用于所有方面。
  • 如果有两个值，top和bottom的边框设置为第一个值，left和right设置为第二个值。
  • 如果有三个值，top设置为第一个值，left和right设置为第二个值，bottom设置为第三个值。
  • 如果有四个值，分别设置为top, right, bottom, left。

默认值:

{top:0, right:0, bottom:0, left:0}
BoxComponent
msgFx : String
实验性参数 当在表单项下显示校验消息时使用的效果(默认为'normal')。
Field
msgTarget : String
通过markInvalid 设置的消息文本应该显示的位置。 必须是如下值之一：...

通过markInvalid 设置的消息文本应该显示的位置。 必须是如下值之一：

  • qtip 当用户鼠标滑过表单项时，显示一个包含消息的快速提示。 这是默认情况。
    为了使此参数能工作，必须调用 Ext.QuickTips.init。
  • title 在弹出的默认浏览器标题属性上显示消息。
  • under 在表单项之下添加一块div，包含出错消息。
  • side 在表单项右边添加一个出错图标，当鼠标滑过时弹出并显示一个消息。
  • [element id] 在指定元素的innerHTML中直接添加出错消息。
Field
name : String
表单项的HTML name属性(默认为'')。 注意: 如果需要当前表单项自动被包含在...
表单项的HTML name属性(默认为'')。 注意: 如果需要当前表单项自动被包含在 form submit()中，必须设置此参数。
Field
overCls : String
一个可选的额外的CSS类，它将在鼠标移过元素时被添加到组件上...
一个可选的额外的CSS类，它将在鼠标移过元素时被添加到组件上，鼠标移出时 删除。(默认为'')。此属性对于在组件上，或者它的任何使用标准CSS规则的孩子节点上， 添加定制的'active' 或者 'hover'样式非常有用。
Component
pageX : Number
如果该组件被包含在一个指定位置的容器中，这个值表示页面级的x坐标值（译者注：在有滚动条的情况下这个值很有用）。
BoxComponent
pageY : Number
如果该组件被包含在一个指定位置的容器中，这个值表示页面级的y坐标值（译者注：在有滚动条的情况下这个值很有用）。
BoxComponent
plugins : Object/Array
一个对象或者一个对象数组，为组件提供特殊的功能 ...
一个对象或者一个对象数组，为组件提供特殊的功能。 对一个合法的插件唯一的要求是它含有一个init()方法， 能接收一个Ext.Component型的参数。 当组件被创建时，如果有可用的插件，组件将会调用每个插件的init方法， 并将自身的引用作为方法参数传递给它。然后，每个插件就可以调用方法或者响应组件上的事件， 就像需要的那样提供自己的功能。
Component
preventMark : Boolean
true将会禁止 把表单项标记为非法。默认为false.
Field
ptype : String
需要创建配置的ptype。 当传递一个配置对象给构造函数时...
需要创建配置的ptype。 当传递一个配置对象给构造函数时，此配置选项不会被使用。 只有在使用懒初始化的时候此配置项才会被使用， 此时Plugin不是 通过一个完整的实例组件，而是通过一个Component配置指定的。 在渲染时，将会查找ptype以决定创建何种类型的Plugin。

如果你创建自己的Plugin，你可以通过 Ext.ComponentMgr.registerPlugin 对它们进行注册，以便能利用懒初始化和渲染机制。
Component
readOnly : Boolean
将会把表单项标记为在HTML中只读(readOnly)(默认为false)...
true 将会把表单项标记为在HTML中只读(readOnly)(默认为false)。

Note: 这仅仅设置元素的readOnly DOM参数。 例如，设置 readOnly=true ，将不会禁用触发ComboBox或者DateField； 这为你提供了一个选项，可以强制用户通过触发按钮选择一个值，而不是 在文本框进行输入。 使用 hideTrigger 可以隐藏触发按钮。

Field
ref : String
一个路径描述，与组件的 ownerCt 相关，它描述了把当前组件的命名引用放置到哪个父容器中去。...

一个路径描述，与组件的 ownerCt 相关，它描述了把当前组件的命名引用放置到哪个父容器中去。

祖先的坐标路径可以通过'/'字符进行分隔。 例如，将一个Toolbar Button的引用放入 拥有此Toolbar的Panel中:

var myGrid = new Ext.grid.EditorGridPanel({
    title: 'My EditorGridPanel',
    store: myStore,
    colModel: myColModel,
    tbar: [{
        text: 'Save',
        handler: saveChanges,
        disabled: true,
        ref: '../saveButton'
    }],
    listeners: {
        afteredit: function() {
//          The button reference is in the GridPanel
            myGrid.saveButton.enable();
        }
    }
});

在上面的代码中，如果 ref 是 'saveButton' ，那么引用将会被放置到Toolbar中。 ref 中的每个'/' 都会从组件的 ownerCt 向上移动一级。

另请参见 added 和 removed 事件。

Component
region : String
注: 此配置只用于该组件展现在一个布局为BorderLayout的容器中...

注: 此配置只用于该组件展现在一个布局为BorderLayout的容器中(例如指定layout:'border')。

详见Ext.layout.BorderLayout。

BoxComponent
renderTo : Mixed
该值可以是一个节点的id、一个DOM节点或者一个已存在的元素...

该值可以是一个节点的id、一个DOM节点或者一个已存在的元素， 组件将会被渲染到其中。

  • 注意 :
      如果组件不是一个Container 的子项目时， 不要使用此选项。 渲染和管理它的子项目是一个Container 的layout manager的责任。
      当使用此配置项时，无需调用render()方法。

另请参见 render 。

Component
scope : Object
一个对象 handler(处理) 方法 的使用范围('this' 引用)(默认为复选框对象范围)。
Checkbox
stateEvents : Array
一个事件数组，当它们被触发时，组件需要保存自己的状态(默认值为 none)...

一个事件数组，当它们被触发时，组件需要保存自己的状态(默认值为 none)。 它们可以是任何该组件支持的事件类型，包括浏览器事件和 自定义事件(例如['click', 'customerchange'])。

对于保存和恢复组件状态的详细解释，参见 stateful

Component
stateId : String
为该组件指定的唯一的id值，它被用作管理组件状态的目的...
为该组件指定的唯一的id值，它被用作管理组件状态的目的。 (如果设定了id，默认值为组件自己的id，否则，如果组件使用自动生成的id，此值为null)。

对于保存和反解析组件状态的解释，参见 stateful 。

Component
stateful : Boolean
一个标志参数，它将引起组件在启动时尝试从一个保存的状态中恢复内部状态参数...

一个标志参数，它将引起组件在启动时尝试从一个保存的状态中恢复内部状态参数。 组件必须要么拥有一个 stateId 或者 id ，它们被分配给需要被管理的状态属性。 在跨页面加载时，不保证自动生成的id属性的稳定性， 并且，不能依赖此id来保存和恢复一个组件的相同状态。

为了保存状态的操作能够工作，状态管理器的提供者必须 被设置成一个Ext.state.Provider 的实现类，它覆盖了set 和get 方法，以便保存和恢复name/value对。 有一个内置的Ext.state.CookieProvider 可用。

为当前页面设置状态提供者:

Ext.state.Manager.setProvider(new Ext.state.CookieProvider({
    expires: new Date(new Date().getTime()+(1000*60*60*24*7)), //7 days from now
}));

当 stateEvents 配置项中其中之一的事件被触发时， 一个状态可保存的组件将试图保存其状态。

保存状态时，一个可保存状态的组件首先需要通过调用 getState 方法来序列化它的状态。 默认情况下，此函数什么事都不做。 开发者必须提供一个实现，返回一个hash对象，它描述了组件可恢复的状态。

getState方法产生的值将会传递给 Ext.state.Manager.set 方法，它使用配置的 Ext.state.Provider 来保存对象，以组件的 stateId 为key，或者，如果此值（指stateId）没有指定时， 使用它的 id 作为key。

在进行构造时，一个可保存状态的组件试图通过调用 Ext.state.Manager.get方法来 恢复它的状态，传递 stateId 或者，如果此值（指stateId）没有指定时， 使用它的 id 作为参数。

结果对象被传递给 applyState 。 applyState 的默认实现只是简单地把属性拷贝到对象中， 但是开发者可以覆盖此方法以支持更多行为。

通过向 beforestaterestore, staterestore, beforestatesave 和 statesave 事件上绑定监听器，你可以在保存和恢复状态时进行额外的处理。

Component
style : String
被添加到组件元素的特定样式。 必须是按照...
被添加到组件元素的特定样式。 必须是按照 Ext.Element.applyStyles 类指定格式的合法参数值。

new Ext.Panel({
    title: 'Some Title',
    renderTo: Ext.getBody(),
    width: 400, height: 300,
    layout: 'form',
    items: [{
        xtype: 'textarea',
        style: {
            width: '95%',
            marginBottom: '10px'
        }
    },
        new Ext.Button({
            text: 'Send',
            minWidth: '100',
            style: {
                marginBottom: '10px'
            }
        })
    ]
});
Component
submitValue : Boolean
False将会清除表单项的name属性，这样在提交表单时它将不会被提交。 默认为true。
Field
tabIndex : Number
该表单项的tabIndex。 注意，此属性仅仅应用到被渲染好的，而不是那些通过applyTo...
该表单项的tabIndex。 注意，此属性仅仅应用到被渲染好的，而不是那些通过applyTo创建的表单项 (默认为undefined)。
Field
tabTip : String
注: 这个配置只用于当该组件作为TabPanel的一个子项目时使用...

注: 这个配置只用于当该组件作为TabPanel的一个子项目时使用。

一个String类型的innerHTML(支持html标签)，当鼠标放在该选项上的时，显示一个tooltip。为了tips能够被渲染，Ext.QuickTips.init()必须被提前调用。
BoxComponent
tpl : Mixed
一个 Ext.Template , Ext.XTemplate 或者一个用来形成一个Ext.XTemplate的字符串数组...
一个 Ext.Template , Ext.XTemplate 或者一个用来形成一个Ext.XTemplate的字符串数组。 与 data 和 tplWriteMode 配置项协同使用。
Component
tplWriteMode : String
刷新组件的内容区域时使用的Ext.(X)Template方式。 默认为'overwrite' (参见 Ext.XTemplate.overwrite )。
刷新组件的内容区域时使用的Ext.(X)Template方式。 默认为'overwrite' (参见 Ext.XTemplate.overwrite )。
Component
validateOnBlur : Boolean
在表单项失去焦点时是否进行校验(默认为 true)。
Field
validationDelay : Number
在用户开始输入到校验操作开始之间的时长毫秒数 (默认为250)
Field
validationEvent : String/Boolean
引发表单项进行校验操作的事件。 设置为false可以禁用自动校验 (默认为'keyup')。
引发表单项进行校验操作的事件。 设置为false可以禁用自动校验 (默认为'keyup')。
Field
value : Mixed
当前表单项的初始化值(默认为undefined).
Field
width : Number
组件的宽度(默认值为 auto)。注:如果想使用百分比的方式...
组件的宽度(默认值为 auto)。注:如果想使用百分比的方式来设置值，请查看 Ext.Component.anchor。
BoxComponent
x : Number
如果被包含在一个指定位置的容器中，这个值表示x(left)坐标值。
BoxComponent
xtype : String
需要创建配置的xtype。 当传递一个配置对象给构造函数时...
需要创建配置的xtype。 当传递一个配置对象给构造函数时，此配置选项不会被使用。 只有在使用懒初始化的时候此配置项才会被使用，此时容器的子项目不是 通过一个完整的实例组件，而是通过一个Component配置指定的。 在渲染时，将会查找xtype以决定创建何种类型的子组件。

预定义的xtype列表如下： here。

如果你继承Component创建你自己的组件，你需要使用Ext.ComponentMgr.registerType 对它们进行注册，以便利用懒初始化和渲染机制。
Component
y : Number
如果被包含在一个指定位置的容器中，这个值表示y(top)坐标值。
BoxComponent

公共属性

Property Defined By
disabled : Boolean
当前组件处于无效状态时为true。 Read-only.
Component
el : Ext.Element
封装了当前组件的Ext.Element。 Read-only。通常情况下，这将是一个<DIV>元素，它由此类的...

封装了当前组件的Ext.Element。 Read-only。

通常情况下，这将是一个<DIV>元素，它由此类的 onRender方法创建，但是它可以通过使用 autoEl 配置项进行覆盖。

注意: 直到组件渲染完成此元素都将处于无效状态。

如需向当前组件的 DOM事件(而不是当前组件自己的Observable事件)添加监听器， 更多建议，参见 listeners 配置项，或者直接使用一个render监听器:

new Ext.Panel({
    title: 'The Clickable Panel',
    listeners: {
        render: function(p) {
            // Append the Panel to the click handler's argument list.
            p.getEl().on('click', handlePanelClick.createDelegate(null, [p], true));
        },
        single: true  // Remove the listener after first invocation
    }
});

另请参见 getEl

Component
hidden : Boolean
如果当前组件处于隐藏状态，此值为true。Read-only。
Component
initialConfig : Object
当前组件的初始化配置描述。 Read-only。
Component
label : Ext.Element
关联到当前表单项的label元素。 只有在当前表单项已经被一个Ext.layout.FormLayout ...

关联到当前表单项的label元素。 只有在当前表单项已经被一个Ext.layout.FormLayout 布局管理器渲染之后才可用。

Field
originalValue : mixed
表单项原来的值，它是在value 中配置的；或者，如果 trackResetOnLoad 设置为...
表单项原来的值，它是在value 中配置的；或者，如果 trackResetOnLoad 设置为 true 时，通过表单加载操作最后一次加载的。
Field
ownerCt : Ext.Container
组件所属的Container (默认为undefined，当前组件被添加到一个容器中时此值被自动设置)...
组件所属的Container (默认为undefined，当前组件被添加到一个容器中时此值被自动设置)。 Read-only。

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

Component
refOwner : Ext.Container
如果当前组件是一个容器的孩子，并且是通过一个 ref 配置项被注册的，则此值为 ref 引用被插入到的祖先容器。
如果当前组件是一个容器的孩子，并且是通过一个 ref 配置项被注册的，则此值为 ref 引用被插入到的祖先容器。
Component
rendered : Boolean
如果当前组件已经被渲染了，此值为true。Read-only.
Component
startValue : mixed
表单项最后一次获得焦点时所拥有的值。 这就是传递给change 事件的值...

表单项最后一次获得焦点时所拥有的值。 这就是传递给change 事件的值，此事件在值被改变并失去焦点时触发。

直到表单项被访问之前此值都是undefined 与originalValue 进行比较。

Field

公共方法

Method Defined By
Radio ( Object config )
创建一个新的Radio
创建一个新的Radio
参数:
  • config : Object
    配置选项
返回值:
  • void
Radio
addClass ( string cls ) : Ext.Component
为组件底层的元素添加CSS样式。
为组件底层的元素添加CSS样式。
参数:
  • cls : string
    需要添加的CSS样式的class名称
返回值:
  • Ext.Component
    this
Component
addEvents( Object|String o, string Optional. ) : void
添加指定的事件到事件列表上，事件会被该Observable触发。
添加指定的事件到事件列表上，事件会被该Observable触发。
参数:
  • o : Object|String
    以事件名作为属性true作为值的对象 或者当多个事件名被分开的传递时则为第一个事件名。
  • Optional. : string
    事件名被分开的传递时则为事件名。 用法:
    this.addEvents('storeloaded', 'storecleared');
返回值:
  • void
Observable
addListener( String eventName, Function handler, [Object scope], [Object options] ) : void
给对象添加事件处理器。
给对象添加事件处理器。
参数:
  • eventName : String
    监听的事件名。
  • handler : Function
    事件调用的方法
  • scope : Object
    （可选）处理方法执行的作用域 (this的引用 reference)。 如果被忽略。默认为触发事件的对象。
  • options : Object
    （可选）包含处理器配置和属性的对象。 可能包含以下的属性:
    • scope : Object
      处理方法执行的作用域(this的引用) 。 如果被忽略。默认为触发事件的对象。
    • delay : Number
      在触发事件后延迟调用处理器的毫秒数。
    • single : Boolean
      如果为True则添加一个处理器来处理下一次的事件触发（仅一次），然后移除自己。
    • buffer : Number
      使得处理器延迟指定毫秒数后预定的运行在 一个Ext.util.DelayedTask中 。 如果事件在时间内再一次被触发，原始的处理器不会被调用，但是新的处理器会预定的在他的位置上。
    • target : Observable
      如果事件在目标的Observable上触发则仅仅调用处理器， 否则 事件会从子类的Observable上冒泡

    组合选项
    使用这些选项参数,可能会组合出不同类型的监听器：

    一个延迟的，一次性的监听器。

    myDataView.on('click', this.onClick, this, {
single: true,
delay: 100
});

    一次调用附加多个处理器
    该方法同样支持传递一个包含指定的多个处理器的属性的配置对象参数。

    myGridPanel.on({
'click' : {
    fn: this.onClick,
    scope: this,
    delay: 100
},
'mouseover' : {
    fn: this.onMouseOver,
    scope: this
},
'mouseout' : {
    fn: this.onMouseOut,
    scope: this
}
});

    或者一个简写的语法：

    myGridPanel.on({
'click' : this.onClick,
'mouseover' : this.onMouseOver,
'mouseout' : this.onMouseOut,
 scope: this
});
返回值:
  • void
Observable
applyToMarkup ( String/HTMLElement el ) : void
将此组件添加到已存在的有效的HTML标签中。 使用该方法时，无需再调用render()方法。
将此组件添加到已存在的有效的HTML标签中。 使用该方法时，无需再调用render()方法。
参数:
  • el : String/HTMLElement
返回值:
  • void
Component
cloneConfig ( Object overrides ) : Ext.Component
默认使用原先传递给当前实例的配置值克隆当前组件。
默认使用原先传递给当前实例的配置值克隆当前组件。
参数:
  • overrides : Object
    一个新的配置项，包含需要覆盖到克隆版本的所有属性。 可以传递一个id参数给此对象，否则将自动生成一个新的id以避免发生重复。
返回值:
  • Ext.Component
    当前组件的克隆副本
Component
destroy () : void
通过如下方法销毁对象：删除所有的事件监听器、将组件的元素从DOM树中删除...
通过如下方法销毁对象：删除所有的事件监听器、将组件的元素从DOM树中删除（如果可以）、 将组件从它的 Ext.Container（如果可用）中删除、 并且将它从Ext.ComponentMgr中 注销。 销毁操作一般由框架自动完成，一般情况下不需要直接调用该方法。
参数:
  • 无。
返回值:
  • void
Component
disable () : Ext.Component
将组件置为无效状态，并出发'disable'事件。
将组件置为无效状态，并出发'disable'事件。
参数:
  • 无。
返回值:
  • Ext.Component
    this
Component
enable () : Ext.Component
将组件置为有效状态并触发'enable'事件。
将组件置为有效状态并触发'enable'事件。
参数:
  • 无。
返回值:
  • Ext.Component
    this
Component
enableBubble( String/Array events ) :void
是否现在使得事件会被该Observable触发并调用 this.getBubbleTarget()方法在拥有者的继承树...

是否现在使得事件会被该Observable触发并调用 this.getBubbleTarget()方法在拥有者的继承树中冒泡。Observable的基础类中没有该方法的实现。

该方法一般被Ext.Components用来冒泡事件到拥有者的容器。参看Ext.Component.getBubbleTarget默认的实现 在Ext.Component中返回组件的直接拥有者。但是如果需要的是一个已知的目标，该方法可以被重写来更快的访问需求的目标。

例子:

Ext.override(Ext.form.Field, {
    // 添加方法到Field的initComponent上改变事件为冒泡
    initComponent : Ext.form.Field.prototype.initComponent.createSequence(function() {
        this.enableBubble('change');
    }),

    // 我们知道我们想让Field的事件冒泡到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() {
            // 如果样式被修改标题会变红。
            myForm.header.setStyle('color', 'red');
        }
    }
});
参数:
  • events : String/Array
    冒泡的事件名，或事件名数组
返回值:
  • void
Observable
findParentBy ( Function fn ) : Ext.Container
通过自定义的函数查找当前组件上层任何层次上的容器...
通过自定义的函数查找当前组件上层任何层次上的容器。 如果传递的函数返回true，容器对象将被返回。
参数:
  • fn : Function
    自定义的函数，使用如下参数调用(container,this component)。
返回值:
  • Ext.Container
    自定义函数返回true的第一个容器
Component
findParentByType ( String/Class xtype ) : Ext.Container
通过xtype或者class查找当前组件上层任何层次上的容器
通过xtype或者class查找当前组件上层任何层次上的容器
参数:
  • xtype : String/Class
    组件的xtype字符串，或者直接是组件的class
返回值:
  • Ext.Container
    符合指定xtype或者class的第一个容器
Component
fireEvent( String eventName, Object... args ) : Boolean
用传入的参数触发指定的事件 (减去事件名)。 一个事件可以被设置为冒泡 Obse...

用传入的参数触发指定的事件 (减去事件名)。

一个事件可以被设置为冒泡到Observable父类继承树(参看 Ext.Component.getBubbleTarget) 调用enableBubble实现。

参数:
  • eventName : String
    触发的事件名。
  • args : Object...
    传递给处理器的可变长度参数。
返回值:
  • Boolean
    如果有任何的处理器返回false则返回false，否则返回true。
Observable
focus ( [ Boolean selectText ], [ Boolean/Number delay ] ) : Ext.Component
尝试将当前组件设为焦点。
尝试将当前组件设为焦点。
参数:
  • selectText : Boolean
    (可选) 如果可用，同时选中组件内部的文本
  • delay : Boolean/Number
    (可选)将当前组件设置为焦点的延迟时间(设置为true等于0毫秒)
返回值:
  • Ext.Component
    this
Component
getActiveError () : String
获取当前表单项活动的出错消息。
获取当前表单项活动的出错消息。
参数:
  • 无。
返回值:
  • String
    返回表单项上活动的出错消息，如果没有错误，返回一个空字符串。
Field
getBox ( [ Boolean local ] ) : Object
获取组件底层元素当前盒子模型的尺寸。（译者注：盒子模型是CSS术语，详细解释请自行搜索。）
获取组件底层元素当前盒子模型的尺寸。（译者注：盒子模型是CSS术语，详细解释请自行搜索。）
参数:
  • local : Boolean
    (可选)值为true时，组件的left值和top值将代替页面的XY被返回。(默认值为false)
返回值:
  • Object
    返回值的格式{x, y, width, height}
BoxComponent
getBubbleTarget () : Ext.Container
为Observable的fireEvent方法提供链接，它沿着继承结构进行冒泡操作。
为Observable的fireEvent方法提供链接，它沿着继承结构进行冒泡操作。
参数:
  • 无。
返回值:
  • Ext.Container
    拥有当前组件的容器。
Component
getEl () : Ext.Element
返回 Ext.Element ，它包装了当前组件。...

返回 Ext.Element ，它包装了当前组件。

通常情况下，这将是一个<DIV>元素，它是由该类的onRender方法创建的， 但是可以使用autoEl配置项 覆盖它。

注意: 此元素将会一直处于无效状态直到当前组件渲染完成。

如需向当前组件的 DOM事件(而不是当前组件自己的Observable事件)添加监听器， 更多建议，参见 listeners 配置项，或者直接使用一个render监听器:

new Ext.Panel({
    title: 'The Clickable Panel',
    listeners: {
        render: function(p) {
            // Append the Panel to the click handler's argument list.
            p.getEl().on('click', handlePanelClick.createDelegate(null, [p], true));
        },
        single: true  // Remove the listener after first invocation
    }
});
参数:
  • 无。
返回值:
  • Ext.Element
    包装当前组件的元素。
Component
getErrors () : Array
运行当前表单项的校验器并返回一个所有校验错误信息数组。 此方法在校验期间在内部调用并且一般情况下...
运行当前表单项的校验器并返回一个所有校验错误信息数组。 此方法在校验期间在内部调用并且一般情况下不需要手工调用。 每个子类都应该重写或者增加返回值以提供它们自己的出错消息
参数:
  • 无。
返回值:
  • Array
    当前表单项的所有出错消息
Field
getGroupValue () : String
如果当前radio是一个组中的一部分，这将返回选中的值
如果当前radio是一个组中的一部分，这将返回选中的值
参数:
  • 无。
返回值:
  • String
Radio
getHeight () : Number
获取该组件的当前高度值。
获取该组件的当前高度值。
参数:
  • 无。
返回值:
  • Number
BoxComponent
getId () : String
返回当前组件的id，如果没有定义id，则自动生成并返回一个id:'ext-comp-'...
返回当前组件的 id 如果没有定义 id 则自动生成并返回一个 id

'ext-comp-' + (++Ext.Component.AUTO_ID)
参数:
  • 无。
返回值:
  • String
    id
Component
getItemId () : String
返回当前组件的 itemId 。 如果没有通过配置参数指定 itemId 那么，将会使用...
返回当前组件的 itemId 。 如果没有通过配置参数指定 itemId 那么，将会使用 getId 返回 id 。
参数:
  • 无。
返回值:
  • String
Component
getName () : String
如果可用，返回表单项的 name 或者 hiddenName 属性。
如果可用，返回表单项的 name 或者 hiddenName 属性。
参数:
  • 无。
返回值:
  • String
    name 表单项的{@link Ext.form.Field#name name}或者{@link Ext.form.ComboBox#hiddenName hiddenName}
Field
getOuterSize () : Object
获取当前组件所在元素的尺寸大小，包括边缘的空白处。
获取当前组件所在元素的尺寸大小，包括边缘的空白处。
参数:
  • 无。
返回值:
  • Object
    一个包含元素大小的对象 {width: (element width + left/right margins), height: (element height + top/bottom margins)}
BoxComponent
getPosition ( [ Boolean local ] ) : Array
获取组件底层元素当前的XY位置。
获取组件底层元素当前的XY位置。
参数:
  • local : Boolean
    (可选)如果为true，将返回元素的left和top值，而不是相对于页面内的 XY。(默认值为 false)
返回值:
  • Array
    元素的XY位置值(例如：[100, 200])
BoxComponent
getRawValue () : Mixed
返回原始数据值，可能不是一个合法的、已定义的值。 返回格式化的值参见...
返回原始数据值，可能不是一个合法的、已定义的值。 返回格式化的值参见 getValue。
参数:
  • 无。
返回值:
  • Mixed
    value 表单项的值
Field
getResizeEl () : Ext.Element
返回该组件的最外层用来定义这些组件整体大小的Element...

返回该组件的最外层用来定义这些组件整体大小的Element对象。

通常用 getEl 方法将会返回相同的Element对象，但在有些情况下，组件可能有一些更多的封装了它的主要动态Element对象的Element对象。

例如ComboBox。它是封装在一个包含<input>元素的包装元素里(这将返回其 getEl方法和触发按钮的元素)。返回的元素为resizeEl。

参数:
  • 无。
返回值:
  • Ext.Element
    The Element which is to be resized by size managing layouts.
BoxComponent
getSize () : Object
获取组件底层元素当前的大小。
获取组件底层元素当前的大小。
参数:
  • 无。
返回值:
  • Object
    一个包含元素大小的对象{width: (element width), height: (element height)}
BoxComponent
getValue () : Mixed
返回格式化的数据值(undefined或者emptyText将会以''返回)。 如需返回原始值，参见...
返回格式化的数据值(undefined或者emptyText将会以''返回)。 如需返回原始值，参见 getRawValue。
参数:
  • 无。
返回值:
  • Mixed
    value 表单项的值
Checkbox
getWidth () : Number
获取该组件的当前宽度值。
获取该组件的当前宽度值。
参数:
  • 无。
返回值:
  • Number
BoxComponent
getXType () : String
获取当前组件的xtype，它是用 Ext.ComponentMgr 注册的。 所有可用的xtype列表，参见...
获取当前组件的xtype，它是用 Ext.ComponentMgr 注册的。 所有可用的xtype列表，参见 Ext.Component 类头部。示例用法:

var t = new Ext.form.TextField();
alert(t.getXType());  // alerts 'textfield'
参数:
  • 无。
返回值:
  • String
    The xtype
Component
getXTypes () : String
返回此组件的xtype继承树，用字符'-'分隔。 所有可用的xtype值...

返回此组件的xtype继承树，用字符'-'分隔。 所有可用的xtype值，请参见Ext.Component 类的头部。

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

示例用法:

var t = new Ext.form.TextField();
alert(t.getXTypes());  // alerts 'component/box/field/textfield'
参数:
  • 无。
返回值:
  • String
    xtype层次字符串
Component
hasListener( String eventName ) : Boolean
检测对象是否包含指定事件的任何监听器
检测对象是否包含指定事件的任何监听器
参数:
  • eventName : String
    检测的事件名
返回值:
  • Boolean
    如果事件被监听则为true，否则为false
Observable
hide () : Ext.Component
隐藏当前组件。 监听 beforehide' 事件并且返回false 可以取消隐藏组件的操作。 在隐藏组件之后触发...
隐藏当前组件。 监听 beforehide' 事件并且返回false 可以取消隐藏组件的操作。 在隐藏组件之后触发 ' hide' 事件。 如果组件被配置成 hidden 那么此方法在内部被调用。
参数:
  • 无。
返回值:
  • Ext.Component
    this
Component
isDirty () : Boolean
如果此表单项的值与原始值相比发生了改变，返回true。 如果表单项...

如果此表单项的值与原始值相比发生了改变，返回true。 如果表单项被禁用或者尚未被渲染将会返回false。

注意，如果所属的 form 配置了一个Ext.form.BasicForm， 那么在使用Ext.form.BasicForm. setValues 加载值之后，原始值将会被更新。

参数:
  • 无。
返回值:
  • Boolean
    如果此表单项的值与原始值相比发生了改变(并且没有被禁用)，返回true，其它返回false。
Field
isValid ( Boolean preventMark ) : Boolean
通过 校验 表单项 处理后的值 ，返回表单项当前值是否合法。...
通过 校验 表单项 处理后的值 ，返回表单项当前值是否合法。 注意: disabled 的表单项将会被忽略。
参数:
  • preventMark : Boolean
    True将会禁止把表单项标记为非法
返回值:
  • Boolean
    如果值是合法的，为true，其它为false
Field
isVisible () : Boolean
如果当前组件可见，返回true。
如果当前组件可见，返回true。
参数:
  • 无。
返回值:
  • Boolean
    如果当前组件可见，返回true，其它返回false。
Component
isXType ( String xtype , [ Boolean shallow ] ) : Boolean
Tests whether or not this Component is of a specific xtype. This can test whether this Component is descended from th...

测试此组件是否是指定的xtype。此方法既可以测试是否是指定的xtype的某个子类， 或者它是否直接是指定的xtype类(shallow=true)。

如果使用你自己的子类，必须知道组件必须注册它的xtype值。

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

示例用法:

var t = new Ext.form.TextField();
var isText = t.isXType('textfield');        // true
var isBoxSubclass = t.isXType('box');       // true, descended from BoxComponent
var isBoxInstance = t.isXType('box', true); // false, not a direct BoxComponent instance
参数:
  • xtype : String
    需要为当前组件进行检测的xtype
  • shallow : Boolean
    (可选) 如果为false，检测组件是否是xtype继承树中的某个子类（默认是这种情况）， 如果为true，只检测组件是否是指定的xtype类型。
返回值:
  • Boolean
    如果当前组件是指定xtype的子类，返回true，其它返回flase。
Component
mon ( Observable|Element item , Object|String ename , Function fn , Object scope , Object opt ) : void
向任何Observable对象(或者元素)上添加监听器，监听器将会在组件...

向任何Observable对象(或者元素)上添加监听器，监听器将会在组件销毁时被自动删除。
用法：

myGridPanel.mon(myGridPanel.getSelectionModel(), 'selectionchange', handleSelectionChange, null, {buffer: 50});

or:

myGridPanel.mon(myGridPanel.getSelectionModel(), {
    selectionchange: handleSelectionChange,
    buffer: 50
});
参数:
  • item : Observable|Element
    需要添加listener/listeners的项目。
  • ename : Object|String
    事件名，或者一个包含事件名属性的对象。
  • fn : Function
    (可选) 如果 ename 参数是一个事件名，此参数为处理函数。
  • scope : Object
    (可选)如果 ename 参数是一个事件名称，此参数是作用域 ( this 引用)，监听函数将会在此作用域中被执行。
  • opt : Object
    (可选)如果 ename 参数是一个事件名称， 此参数是 addListener 配置项。
返回值:
  • void
Component
mun ( Observable|Element item , Object|String ename , Function fn , Object scope ) : void
删除通过mon 方法添加的监听器。
删除通过mon 方法添加的监听器。
参数:
  • item : Observable|Element
    需要删除listener/listeners的项目。
  • ename : Object|String
    事件名称，或者一个包含事件名称属性的对象。
  • fn : Function
    (可选)如果 ename 参数是一个事件名称，此参数是一个处理函数。
  • scope : Object
    (可选)如果 ename 参数是一个事件名称，此参数是作用域 ( this 引用)，监听函数将会在此作用域中被执行。
返回值:
  • void
Component
nextSibling () : Ext.Component
返回所属容器中的下一个组件
返回所属容器中的下一个组件
参数:
  • 无。
返回值:
  • Ext.Component
Component
on( String eventName, Function handler, [Object scope], [Object options] ) : void
给对象添加事件处理器 (addListener的简写形式)
给对象添加事件处理器 (addListener的简写形式。)
参数:
  • eventName : String
    监听的事件类型
  • handler : Function
    事件调用的方法
  • scope : Object
    （可选）处理方法执行时的作用域 (this 的引用)。 如果被忽略。默认为触发事件的对象。
  • options : Object
    可选 包含处理器配置的对象。
返回值:
  • void
Observable
previousSibling () : Ext.Component
返回所属容器中的前一个组件
返回所属容器中的前一个组件
参数:
  • 无。
返回值:
  • Ext.Component
Component
processValue ( Mixed value ) : void
仅仅在需要准备原始值供校验时，才需要覆盖此方法(参见 validate和 isValid)。...
仅仅在需要准备原始值供校验时，才需要覆盖此方法(参见 validate和 isValid)。 此方法被期望为表单项返回处理后的值，此值将会被用来进行校验 (参见validateValue方法)。
参数:
  • value : Mixed
返回值:
  • void
Field
purgeListeners() : void
移除对象上所有的监听器
移除对象上所有的监听器
参数:
  • 无。
返回值:
  • void
Observable
relayEvents( Object o, Array events ) : void
从指定的Observable上传递选择的事件就好像被当前对象触发一样。
从指定的Observable上传递选择的事件就好像被当前对象触发一样。
参数:
  • o : Object
    该Observable上的事件被当前对象传递。
  • events : Array
    传递的数组名。
返回值:
  • void
Observable
removeClass ( string cls ) : Ext.Component
从组件底层的元素上删除一个CSS类。
从组件底层的元素上删除一个CSS类。
参数:
  • cls : string
    需要移除的CSS类名
返回值:
  • Ext.Component
    this
Component
removeListener( String eventName, Function handler, [Object scope] ) : void
删除一个事件处理器。
删除一个事件处理器。
参数:
  • eventName : String
    处理器关联的事件类型。
  • handler : Function
    移除的处理器。 这应该是传递到addListener里的方法的引用。
  • scope : Object
    （可选）处理器指定的初始作用域。
返回值:
  • void
Observable
render ( [ Element/HTMLElement/String container ], [ String/Number position ] ) : void
在传递进来的HTML元素中渲染当前组件。...

在传递进来的HTML元素中渲染当前组件。

如果你正在使用一个Container 对象放置当前组件，那么请不要使用render方法。

当容器第一次被渲染时，它的子组件将会被容器的 layout 管理器渲染。

某些布局管理器允许动态添加子组件。它们包括 Ext.layout.CardLayout, Ext.layout.AnchorLayout, Ext.layout.FormLayout, Ext.layout.TableLayout。

当一个新的子组件被添加时，如果容器已经被渲染了， 你可能需要调用容器的 doLayout 方法来刷新视图，它将导致所有没有被渲染的子组件进行渲染操作。 此操作是必须的，这样你可以添加多个子组件而只刷新一次layout。

当创建复杂的UI时，非常重要的一点是，请记住调整子项目的尺寸和位置是容器的 layout 管理器的职责。 如果你希望子项目的尺寸对用户交互作出反应， 你必须为容器配置一个布局管理器，它将创建和管理你心里想要的那种布局。

忽略容器的layout 配置意味着将会使用一个基本的布局管理器，它除了按次序把子组件 渲染到容器中之外什么事情都不做。 这种情况下，任何尺寸和位置的调整操作都不会发生。

参数:
  • container : Element/HTMLElement/String
    (可选) 需要在其中渲染当前组件的元素。 如果它是从一个已存在的标签中创建的，此参数应该被忽略。
  • position : String/Number
    (可选) 容器中的一个元素ID或者一个DOM节点索引， 当前组件将会被插入到它前面 (默认append到容器的尾部)
返回值:
  • void
Component
reset () : void
将表单项的当前值重置为以前加载时的值，并且清除所有校验信息。...
将表单项的当前值重置为以前加载时的值，并且清除所有校验信息。 参见Ext.form.BasicForm. trackResetOnLoad 。
参数:
  • 无。
返回值:
  • void
Field
resumeEvents() : void
重新开始触发事件。(参见suspendEvents) 如果事件以queueSuspended参数被挂起，则在事件被挂起时 ...
重新开始触发事件。(参见 suspendEvents) 如果事件以queueSuspended 参数被挂起，则在事件被挂起时触发的事件会被传递到所有的监听器上
参数:
  • 无。
返回值:
  • void
Observable
setActiveError ( String msg , Boolean suppressEvent ) : void
将当前activeError设置为所给的字符串。 触发'invalid'事件。这不会设置出错图标...
将当前activeError设置为所给的字符串。 触发'invalid'事件。这不会设置出错图标，仅仅设置消息并触发事件。 如需显示出错图标，可使用markInvalid代替，它将在内部调用此方法。
参数:
  • msg : String
    出错消息
  • suppressEvent : Boolean
    True将会禁止触发'invalid'事件
返回值:
  • void
Field
setAutoScroll ( Boolean scroll ) : Ext.BoxComponent
设置该组件内容溢出时是否自动显示滚动条。
设置该组件内容溢出时是否自动显示滚动条。
参数:
  • scroll : Boolean
    值为true的话组件自动显示滚动条。
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setDisabled ( Boolean disabled ) : Ext.Component
工具函数，使用布尔值设置有效/无效(disabled/enabled )。
工具函数，使用布尔值设置有效/无效(disabled/enabled )。
参数:
  • disabled : Boolean
返回值:
  • Ext.Component
    this
Component
setHeight ( Mixed height ) : Ext.BoxComponent
设置此组件的高度。该方法将触发resize事件。
设置此组件的高度。该方法将触发resize事件。
参数:
  • height : Mixed
    The new height to set.
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setPagePosition ( Number x , Number y ) : Ext.BoxComponent
设置组件在页面中的XY位置。 如果需要设置left和top值 ，请使用...
设置组件在页面中的XY位置。 如果需要设置left和top值 ，请使用setPosition方法。 该方法触发move事件。
参数:
  • x : Number
    The new x position
  • y : Number
    The new y position
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setPosition ( Number left , Number top ) : Ext.BoxComponent
设置组件的left和top值。设置组件的页面XY值，请使用setPagePosition方法。该方法触发...
设置组件的left和top值。设置组件的页面XY值，请使用setPagePosition方法。该方法触发move事件。
参数:
  • left : Number
    The new left
  • top : Number
    The new top
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setRawValue ( Mixed value ) : Mixed
绕过校验，直接设置底层DOM表单项的值。 设置值并进行校验，参见 setValue。
绕过校验，直接设置底层DOM表单项的值。 设置值并进行校验，参见 setValue。
参数:
  • value : Mixed
    需要设置的值
返回值:
  • Mixed
    value 被设置的表单项值
Field
setReadOnly ( Boolean readOnly ) : void
设置当前表单项的只读状态。
设置当前表单项的只读状态。
参数:
  • readOnly : Boolean
    表单项是否应该只读。
返回值:
  • void
Field
setSize ( Mixed width , Mixed height ) : Ext.BoxComponent
设置BoxComponent的宽度和高度。 此方法触发resize事件...
设置BoxComponent的宽度和高度。 此方法触发resize事件。此方法可以接收单独的width或者height值作为参数， 或者你可以传递像这样的一个size对象： {width:10, height:20} 。
参数:
  • width : Mixed
    设置的新的width值。这可以是：
    • 一个Number类型指定Element新的宽度 Ext.Element.defaultUnit(默认为像素 :'px')。
    • 一个String类型用于设置width的CSS样式。
    • 一个size对象格式为 {width: widthValue, height: heightValue} 。
    • 值为 undefined 时，保留原来的width不变。
  • height : Mixed
    设置的新的height值(如果第一个参数传递了一个size对象，此参数没有必要传递)。这可以是：
    • 一个Number类型指定Element新的高度 Ext.Element.defaultUnit(默认为像素 :'px')。
    • 一个String类型用于设置height的CSS样式。也有可能不会被使用到。
    • 值为 undefined 时，保留原来的height不变。
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setValue ( value {String/Boolean} ) : Ext.form.Field
设置当前Radio的checked/unchecked状态，或者，如果 传递了一个字符串值...
设置当前Radio的checked/unchecked状态，或者，如果 传递了一个字符串值，则监测同名的兄弟Radio，它的值是所指定的值。
参数:
  • {String/Boolean} : value
    检测后的值，或者是需要检测的兄弟radio按钮的值。
返回值:
  • Ext.form.Field
    this
Radio
setVisible ( Boolean visible ) : Ext.Component
工具方法，通过使用布尔值隐藏或者显示当前组件。
工具方法，通过使用布尔值隐藏或者显示当前组件。
参数:
  • visible : Boolean
    true时显示，false时隐藏
返回值:
  • Ext.Component
    this
Component
setWidth ( Mixed width ) : Ext.BoxComponent
设置组件的宽度。 此方法触发resize事件。
设置组件的宽度。 此方法触发resize事件。
参数:
  • width : Mixed
    The new width to set.
返回值:
  • Ext.BoxComponent
    this
BoxComponent
show () : Ext.Component
显示当前组件。监听' beforeshow' 事件，返回 false 取消显示组件...
显示当前组件。监听' beforeshow' 事件，返回 false 取消显示组件。在显示组件之后触发' show' 事件。
参数:
  • 无。
返回值:
  • Ext.Component
    this
Component
suspendEvents( Boolean queueSuspended ) : void
暂停触发所有的事件。 (参看resumeEvents)
暂停触发所有的事件。（参看 resumeEvents)
参数:
  • queueSuspended : Boolean
    如果传递为true则排列好暂停的事件使得在调用 resumeEvents 后再触发它们，而不是抛弃所有暂停的事件。
返回值:
  • void
Observable
syncSize () : Ext.BoxComponent
强制组件的大小按照此组件底层元素当前的高度和宽度计算。
强制组件的大小按照此组件底层元素当前的高度和宽度计算。
参数:
  • 无。
返回值:
  • Ext.BoxComponent
    this
BoxComponent
un( String eventName, Function handler, [Object scope] ) : void
删除一个事件处理器(removeListener方法的简写形式)
删除一个事件处理器(removeListener方法的简写形式。)
参数:
  • eventName : String
    处理器关联的事件类型
  • handler : Function
    被删除的处理器 这应该是传入 addListener 中的方法的引用。
  • scope : Object
    （可选）为处理器指定的初始作用域。
返回值:
  • void
Observable
unsetActiveError ( Boolean suppressEvent ) : void
清除activeError并触发'valid'事件。此方法被clearInvalid在内部进行...
清除activeError并触发'valid'事件。此方法被clearInvalid在内部进行调用， 并且一般情况下没有必要手工调用
参数:
  • suppressEvent : Boolean
    True将禁止触发'invalid'事件
返回值:
  • void
Field
update ( Mixed htmlOrData , [ Boolean loadScripts ], [ Function callback ] ) : void
刷新组件的内部区域。
刷新组件的内部区域。
参数:
  • htmlOrData : Mixed
    如果已经通过tpl为当前组件配置了一个模板，那么 将会使用此参数来装配模板。 如果没有为当前组件配置模板，组件的内容区域将会通过Ext.Element 进行刷新。
  • loadScripts : Boolean
    (可选)只用在使用html配置时此参数才合法。默认为false。
  • callback : Function
    (可选)只用在使用html配置时此参数才合法。 当脚本加载完成时回调函数才被执行。
返回值:
  • void
Component
updateBox ( Object box ) : Ext.BoxComponent
设置此组件底层元素的盒子模型尺寸。(译者注：盒子模型是CSS术语，详细资料请自行搜索。)
设置此组件底层元素的盒子模型尺寸。(译者注：盒子模型是CSS术语，详细资料请自行搜索。)
参数:
  • box : Object
    一个格式为{x, y, width, height}的对象
返回值:
  • Ext.BoxComponent
    this
BoxComponent
validate () : Boolean
校验表单项的值
校验表单项的值
参数:
  • 无。
返回值:
  • Boolean
    如果值合法，为true,否则为false
Field
validateValue ( Mixed The ) : Boolean
使用getErrors创建一个校验出错信息数组。 如果发现了任何错误，将会使用第一个错误作为参数...
使用getErrors创建一个校验出错信息数组。 如果发现了任何错误，将会使用第一个错误作为参数调用markInvalid方法并返回 false，否则返回true。以前，要求子类提供此方法的一个实现以处理校验过程--- 从3.2开始，应该用覆盖getErrors方法的方式替代。
参数:
  • The : Mixed
    表单项的当前值
返回值:
  • Boolean
    如果所有校验都通过，此值为true，如果一个或多个校验失败，则为false
Field

公共事件

Event Defined By
added : ( Ext.Component this , Ext.Container ownerCt , number index )
当一个组件被添加到一个Ext.Container时触发
当一个组件被添加到一个Ext.Container时触发
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • ownerCt : Ext.Container
    用于组件的容器
  • index : number
    添加组件的位置
Component
afterrender : ( Ext.Component this )
在组件渲染完成之后触发...

在组件渲染完成之后触发。

afterrender事件在当前组件被rendered 结束之后、在为组件定义的所有afterRender方法执行之后 触发，并且，如果有stateful， 也在状态被保存之后才触发。

监听器将会以如下参数格式被调用:
  • this : Ext.Component
Component
beforedestroy : ( Ext.Component this )
在组件 destroyed 之前触发。 在事件监听器中返回false以停止 destroy 操作。
在组件 destroyed 之前触发。 在事件监听器中返回false以停止 destroy 操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforehide : ( Ext.Component this )
在调用hide方法隐藏组件之前触发。 在事件监听器中返回false可以停止隐藏操作。
在调用hide方法隐藏组件之前触发。 在事件监听器中返回false可以停止隐藏操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforerender : ( Ext.Component this )
在组件被rendered 之前触发。 在事件监听器中返回false可以停止render 操作。
在组件被rendered 之前触发。 在事件监听器中返回false可以停止render 操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforeshow : ( Ext.Component this )
在调用show()方法现实组件之前触发。 事件处理函数返回false可以停止show。
在调用show 方法现实组件之前触发。 事件处理函数返回false可以停止show。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforestaterestore : ( Ext.Component this , Object state )
在组件状态恢复之前触发。返回false停止恢复状态操作。
在组件状态恢复之前触发。返回false停止恢复状态操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    StateProvider返回的状态哈希值。 如果没有禁止此事件，那么状态对象会被传递给applyState。 默认情况下，这样简单地把属性值拷贝到当前组件中。 可以覆盖此方法以提供自定的状态恢复操作。
Component
beforestatesave : ( Ext.Component this , Object state )
在组件状态被保存到配置的状态提供者之前触发。 返回false可以停止保存。
在组件状态被保存到配置的状态提供者之前触发。 返回false可以停止保存。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    状态值哈希。 这由在组件上调用getState() 方法决定。 此方法必须由开发者提供，返回是否需要对状态进行描述，默认情况下， Ext.Component有一个空实现。
Component
blur : ( Ext.form.Field this )
当表单项时区输入焦点时触发。
当表单项时区输入焦点时触发。
监听器将会以如下参数被调用:
  • this : Ext.form.Field
Field
change : ( Ext.form.Field this , Mixed newValue , Mixed oldValue )
如果表单项的时发生改变，在表单项刚刚失去焦点时触发。
如果表单项的时发生改变，在表单项刚刚失去焦点时触发。
监听器将会以如下参数格式调用:
  • this : Ext.form.Field
  • newValue : Mixed
    新的值
  • oldValue : Mixed
    原始值
Field
check : ( Ext.form.Checkbox this , Boolean checked )
当复选框被选中或反选时触发。
当复选框被选中或反选时触发。
监听器将会已 如下的参数格式来调用：
  • this : Ext.form.Checkbox
    This checkbox
  • checked : Boolean
    The new checked value
Checkbox
destroy : ( Ext.Component this )
在组件被销毁之后触发。
在组件被destroyed之后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
disable : ( Ext.Component this )
在组件被设置为无效状态后触发。
在组件被设置为无效状态后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
enable : ( Ext.Component this )
当组件被设置为有效(enabled)之后触发。
当组件被设置为有效(enabled)之后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
focus : ( Ext.form.Field this )
当表单项获得输入焦点时触发。
当表单项获得输入焦点时触发。
监听器将会以如下参数格式被调用:
  • this : Ext.form.Field
Field
hide : ( Ext.Component this )
在组件被隐藏之后触发。 当调用hide 方法隐藏组件之后触发。
在组件被隐藏之后触发。 当调用hide 方法隐藏组件之后触发。
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
invalid : ( Ext.form.Field this , String msg )
在表单项被标记为非法之后触发。
在表单项被标记为非法之后触发。
监听器将会以如下参数格式调用:
  • this : Ext.form.Field
  • msg : String
    校验信息
Field
move : ( Ext.Component this , Number x , Number y )
在组件移动之后触发。
在组件移动之后触发。
监听器将会用如下的参数格式来调用:
  • this : Ext.Component
  • x : Number
    The new x position
  • y : Number
    The new y position
BoxComponent
removed : ( Ext.Component this , Ext.Container ownerCt )
当一个组件被从Ext.Container容器中删除时触发
当一个组件被从Ext.Container容器中删除时触发
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • ownerCt : Ext.Container
    持有组件的容器
Component
render : ( Ext.Component this )
在组件被渲染之后触发。
在组件被 rendered(渲染) 之后触发。
监听器将以如下的参数格式被调用:
  • this : Ext.Component
Component
resize : ( Ext.Component this , Number adjWidth , Number adjHeight , Number rawWidth , Number rawHeight )
在组件被调整大小之后触发。
在组件被调整大小之后触发。
监听器将以如下的参数格式被调用:
  • this : Ext.Component
  • adjWidth : Number
    这是width调整后的值
  • adjHeight : Number
    这是height调整后的值
  • rawWidth : Number
    这是width原来的值
  • rawHeight : Number
    这是height原来的值
BoxComponent
show : ( Ext.Component this )
在调用show 方法显示组件之后触发。
在调用show 方法显示组件之后触发。
监听器将会用如下的参数格式被调用:
  • this : Ext.Component
Component
specialkey : ( Ext.form.Field this , Ext.EventObject e )
当任何和导航有关的键被按下时触发(上下左右箭头, tab, 回车,esc, 等等) is pressed. 处理其它按键参见...
当任何和导航有关的键被按下时触发(上下左右箭头, tab, 回车,esc, 等等) is pressed. 处理其它按键参见 Ext.Panel.keys或者 Ext.KeyMap。 你可以检测 Ext.EventObject.getKey 以便获知哪个键被按下。例如：
var form = new Ext.form.FormPanel({
    ...
    items: [{
            fieldLabel: 'Field 1',
            name: 'field1',
            allowBlank: false
        },{
            fieldLabel: 'Field 2',
            name: 'field2',
            listeners: {
                specialkey: function(field, e){
                    // e.HOME, e.END, e.PAGE_UP, e.PAGE_DOWN,
                    // e.TAB, e.ESC, arrow keys: e.LEFT, e.RIGHT, e.UP, e.DOWN
                    if (e.getKey() == e.ENTER) {
                        var form = field.ownerCt.getForm();
                        form.submit();
                    }
                }
            }
        }
    ],
    ...
});
监听器将会以如下参数格式被调用:
  • this : Ext.form.Field
  • e : Ext.EventObject
    事件对象
Field
staterestore : ( Ext.Component this , Object state )
组件状态被存储之后触发。
组件状态被存储之后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    StateProvider返回的状态哈希值。 如果没有禁止此事件，那么状态对象会被传递给applyState。 默认情况下，这样简单地把属性值拷贝到当前组件中。 可以覆盖此方法以提供自定的状态恢复操作。
Component
statesave : ( Ext.Component this , Object state )
在组件状态被保存到所配置的状态提供者之后触发。
在组件状态被保存到所配置的状态提供者之后触发。
监听器将会用如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    状态值hash。 这是由在足见上调用getState() 方法决定的。 开发者必须提供此方法以返回是否需要恢复状态，默认情况下， Ext.Component有一个空实现。
Component
valid : ( Ext.form.Field this )
在表单项被校验无错误之后触发。
在表单项被校验无错误之后触发。
监听器将会以如下参数格式被调用:
  • this : Ext.form.Field
Field


Observable
    Component
      BoxComponent
        Field
          CheckboxGroup
            RadioGroup

Class Ext.form.RadioGroup

包: | Ext.form
定义类的文件: | RadioGroup.js
类: | RadioGroup
继承自: | CheckboxGroup
Ext.form.Radio的 一个分组容器。

配置项

Config Options Defined By
allowBlank : Boolean
True将允许分组中的每个项目都可以为空 (默认为true)。如果allowBlank = false ...
True将允许分组中的每个项目都可以为空 (默认为true)。如果allowBlank = false 并且在校验时没有项目被选中，{@link
RadioGroup
allowDomMove : Boolean
在渲染时组件是否可以移动Dom节点(默认为true)。
Component
anchor : String
注: 这个配置只用于该组件被包含在一个已使用AnchorLayout...

注: 这个配置只用于该组件被包含在一个已使用 AnchorLayout (或者其子类)配置的Container时。 基于布局管理器，例如：

  • Ext.form.FormPanel
  • 指定 layout: 'anchor' // or 'form', or 'absolute'

参见 Ext.layout.AnchorLayout. anchor 。

BoxComponent
applyTo : Mixed
指定一个元素的id、一个DOM元素或者一个已经存在并被渲染到DIV中的元素，此DIV已经被...

指定一个元素的id、一个DOM元素或者一个已经存在并被渲染到DIV中的元素，此DIV已经被 渲染到document中，并且为当前组件指定了一些结构化的标签。

  • 描述 :
      当使用了 applyTo， 在主元素中也可以用id或者CSS类名来指定组件的托管部分， 并且，如果可以的话，创建的组件可能也会试图在那个标签中创建它的子组件。
  • 注意 :
      当使用此配置项时，无需调用render()方法。
      如果指定了applyTo属性，任何传递给 renderTo 的值都会被忽略，并且目标元素的父节点将会自动被用作组件的容器。
Component
autoCreate : String/Object
一个DomHelper 元素描述，或者为true使用一个默认元素描述。 用来创建封装当前组件的...

一个DomHelper 元素描述，或者为true使用一个默认元素描述。 用来创建封装当前组件的 Element。 细节参见 autoEl 。 默认为:

                                {tag: 'input', type: 'text', size: '20', autocomplete: 'off'}
Field
autoEl : Mixed
一个表签名或者一个 DomHelper 描述，用来创建 Element ，它将封装当前组件...

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

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

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

{
    xtype: 'box',
    autoEl: {
        tag: 'img',
        src: 'http://www.example.com/example.jpg'

    }
}, {
    xtype: 'box',
    autoEl: {
        tag: 'blockquote',
        html: 'autoEl is cool!'
    }
}, {
    xtype: 'container',
    autoEl: 'ul',
    cls: 'ux-unordered-list',
    items: {
        xtype: 'box',
        autoEl: 'li',
        html: 'First list item'
    }
}
Component
autoHeight : Boolean
如果值为true，height配置项为'auto'，否则值为false的话使用固定的高度...

如果值为true，height配置项为'auto'，否则值为false的话使用固定的高度， 或者可以由其父类容器 layout manager来控制。(默认值为 false)。

注: 虽然很多组件继承了这个配置选项，但不是所有这些组件的自适应高度配置都会像期望的那样起作用。 设置autoHeight：值为true时，浏览器将根据元素的内容自动设置高度，这将意味着Ext不会去管理高度。

如果是由浏览器来管理高度，需要注意的是，通过浏览器进行调整的结构组件内不能被发现， 因此宽度的变化可能导致需要进行同步处理元素的高度。 例如：

var w = new Ext.Window({
    title: 'Window',
    width: 600,
    autoHeight: true,
    items: {
        title: 'Collapse Me',
        height: 400,
        collapsible: true,
        border: false,
        listeners: {
            beforecollapse: function() {
                w.el.shadow.hide();
            },
            beforeexpand: function() {
                w.el.shadow.hide();
            },
            collapse: function() {
                w.syncShadow();
            },
            expand: function() {
                w.syncShadow();
            }
        }
    }
}).show();
BoxComponent
autoScroll : Boolean
如果值为true，将会在该元素上使用overflow:'auto'配置，并且在必要的时候...
如果值为true，将会在该元素上使用overflow:'auto'配置，并且在必要的时候自动显示滚动条，否则，溢出部分的组件都会被切除(默认值为 false)。
BoxComponent
autoShow : Boolean
如果组件需要检测隐藏CSS属性(如 'x-hidden' 或者 'x-hide-display')并且在渲染时删除...
如果组件需要检测隐藏CSS属性(如 'x-hidden' 或者 'x-hide-display')并且在渲染时删除它们 (默认为false)，设置此值为true。
Component
autoWidth : Boolean
如果为true，使用width:'auto'配置，否则使用固定的宽度...

如果为true，使用width:'auto'配置，否则使用固定的宽度，或者可以由其父类容器的layout manager来控制。(默认值为 false)。

注: 虽然很多组件继承了这个配置选项，但不是所有这些组件的自适应宽度配置都会像期望的那样起作用。 设置autoWidth：值为true时，浏览器将根据元素的内容自动设置宽度，这将意味着Ext不会去管理宽度。

如果是由浏览器来管理宽度，需要注意的是，通过浏览器进行调整的结构组件内不能被发现，因此宽度的变化可能导致需要进行同步处理元素的宽度。 例如，在这个元素的目标是：

<div id='grid-container' style='margin-left:25%;width:50%'></div>
当浏览器窗口改变时，渲染后的Panel必须监听浏览器窗口大小的变化，以便通知子项，浏览器改变了其宽度：

var myPanel = new Ext.Panel({
    renderTo: 'grid-container',
    monitorResize: true, // relay on browser resize
    title: 'Panel',
    height: 400,
    autoWidth: true,
    layout: 'hbox',
    layoutConfig: {
        align: 'stretch'
    },
    defaults: {
        flex: 1
    },
    items: [{
        title: 'Box 1',
    }, {
        title: 'Box 2'
    }, {
        title: 'Box 3'
    }],
});
BoxComponent
blankText : String
如果allowBlank 校验失败时显示的错误信息(默认为'You must select one item in this group')
RadioGroup
boxMaxHeight : Number
设置组件的最大高度值...

设置组件的最大高度值。

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

BoxComponent
boxMaxWidth : Number
设置组件的最大宽度值...

设置组件的最大宽度值。

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

BoxComponent
boxMinHeight : Number
设置组件的最小高度值...

设置组件的最小高度值。

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

BoxComponent
boxMinWidth : Number
设置组件的最小宽度值...

设置组件的最小宽度值。

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

BoxComponent
bubbleEvents : Array
一个事件数组，当这些事件被触发时，将会被冒泡到所有父容器中。参见....

一个事件数组，当这些事件被触发时，将会被冒泡到所有父容器中。参见 Ext.util.Observable.enableBubble。 默认为 []。

Component
clearCls : String
应用到特殊的clearing div的CSS类， 这个clearing div直接渲染到每个form field的包装器后面...

应用到特殊的clearing div的CSS类， 这个clearing div直接渲染到每个form field的包装器后面，以提供 清除field的功能(默认为 'x-form-clear-left')。

注意: 只有在当前组件被渲染到一个使用FormLayout 布局(例如 Ext.form.FormPanel 或者指定 layout:'form')的 容器中、或者是指定了一个fieldLabel 、或者指定isFormField=true 时此配置才有效。

另请参见 Ext.layout.FormLayout. fieldTpl。

Component
cls : String
一个可选的额外CSS类，它将被添加到当前组件的元素上(默认为'')...
一个可选的额外CSS类，它将被添加到当前组件的元素上(默认为'')。 此属性对于在组件上，或者它的任何使用标准CSS规则的孩子节点上， 添加定制的样式非常有用。
Field
columns : String/Number/Array
当使用自动布局显示分组化的checkbox/radio控制器时，指定所使用的列数。...
当使用自动布局显示分组化的checkbox/radio控制器时，指定所使用的列数。 此选项可以使用多种类型的值:
  • 'auto' :

    控制器(译者注：指CheckBox和Radio)将会被在每一行中的每列渲染一个，并且每一列的宽度 将会根据表单项容器的全部宽度均匀地分配。这是默认情况。

  • Number :

    如果你指定了一个数字(例如3)将会创建这个数字的列数， 并且包含的控制器(译者注：指内部的CheckBox和Radio)将会 根据vertical 的值被自动分配。

  • Array : Object

    你也可以指定一个列宽度数组，根据需要混合使用整数值(固定宽度)和浮点值(宽度百分比) (例如[100, .25, .75])。所有整数值都将会被首先渲染，然后所有 浮点值都会被当作剩余空间的百分比进行计算。浮点值没有比较加起来为1(100%)， 如果你想要控制器充满整个表单项容器，你可以这么做。

CheckboxGroup
contentEl : String
(可选)指定一个已存在的HTML元素，或者一个已存在HTML元素的...

(可选)指定一个已存在的HTML元素，或者一个已存在HTML元素的 id ，它们将被用作当前组件的内容。

  • 描述 :
    此配置选项被用来将一个已存在的HTML元素 插入到一个新组件(在组件渲染之后它简单地移动DOM元素) 的layout元素中，使它成为该组件的内容。
  • 注意 :
    指定的HTML元素将被append到组件的layout元素中， 在所有配置的 HTML 被插入之后， 并且，这样的话，在render事件 被触发时，document中将不再包含此元素。
    指定的HTML元素将不会参与组件所有可能使用的 layout 过程(译者注：指这些HTML元素 不会参与布局操作)。 它仅是HTML而已。布局操作实在孩子 items 上进行的。
    添加 x-hidden 或者 x-hide-display CSS类，以防在内容渲染到panel时发生闪烁。
Component
ctCls : String
一个可选的外部CSS样式，添加到这个组件的容器(默认值为 '')。 这个方法对于使用标准的CSS规则...

一个可选的外部CSS样式，添加到这个组件的容器(默认值为 '')。 这个方法对于使用标准的CSS规则，为组件或它的任何一个子组件添加特定的样式非常有用。 参见 Ext.layout.ContainerLayout和 extraCls 。

注意: ctCls 默认为 ''期望如下的类，它们将指定一个默认值:

  • Box Layout : 'x-box-layout-ct'
使用一个额外的CSS类配置以上的Class，它是append到默认对象上的。例如， 对于BoxLayout (Hbox and Vbox):
                                ctCls: 'x-box-layout-ct custom-class'

Component
data : Mixed
初始化数据集，它将被应用到 tpl 上以刷新组件的内容区域。
Component
disabled : Boolean
当前组件处于无效状态时为true。 Read-only.
Field
disabledClass : String
当组件处于无效状态时添加到组件上的CSS类(默认为 'x-item-disabled')。
Component
fieldClass : String
表单项的默认CSS类(默认为'x-form-field')
Field
fieldLabel : String
紧靠此field显示的标签文本(默认值为 '')。注意...

紧靠此field显示的标签文本(默认值为 '')。

注意:只有在当前组件被渲染到一个使用FormLayout 的容器中时，此配置才有效。 (例如 Ext.form.FormPanel 或 指定 layout:'form')。

另请参见 hideLabel 、 Ext.layout.FormLayout和 fieldTpl。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Name'
    }]
});
Component
flex : Number
注: 这个配置只用于该组件被包含在一个已使用BoxLayout配置的Container中时...

注: 这个配置只用于该组件被包含在一个已使用BoxLayout配置的Container中时。通过计算每一个子组件的flex值所占全部flex值之和的比例，来决定子组件的宽(HBoxLayout)高(VBoxlayout)。 任何子项的 flex = 0 或 flex = undefined 将不被设置(初始值大小将不被改变)。

BoxComponent
focusClass : String
当表单项获得焦点时使用的CSS类(默认为 'x-form-focus')
Field
height : Number
组件的高度(默认值为 auto)。注:如果想使用百分比的方式...
组件的高度(默认值为 auto)。注:如果想使用百分比的方式来设置值，请查看 Ext.Component.anchor。
BoxComponent
hidden : Boolean
如果当前组件处于隐藏状态，此值为true。Read-only。
Component
hideLabel : Boolean
true时完全隐藏label元素 ( label 和 separator)。 默认为 false。 默认情况下，即使你不指定...

true时完全隐藏label元素 ( label 和 separator)。 默认为 false。 默认情况下，即使你不指定 fieldLabel 它的空间仍然会被保留，这样这块区域会与其它确实拥有label的区域位于同一排。 讲此值设置为 true 将导致此区域不再保留此空间。

注意: 参见 clearCls 的注释。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield'
        hideLabel: true
    }]
});
Component
hideMode : String
组件如何隐藏，支持的值有： 'visibility' (css visibility), 'offsets' (位置偏移量为负值) 和...

组件如何隐藏，支持的值有： 'visibility' (css visibility), 'offsets' (位置偏移量为负值) 和 'display' (css display).

注意:一般首选默认值 'display'，因为当组件第一次显示的时候它们会自动进行布局 (隐藏的时候不会调整尺寸)。

Component
hideParent : Boolean
此值为true时，当调用hide/show方法时，将会hide和show组件的容器...
此值为true时，当调用hide/show方法时，将会hide和show组件的容器；false时将会 hide和show组件自身(默认为false)。例如，这可以用作window上隐藏按钮的一种 快捷操作，通过设置此按钮的hideParent:true，然后把它添加到window上。
Component
html : String/Object
一个HTML片段，或者一个 DomHelper 描述，用作layout元素的内容(默认为'')。...
一个HTML片段，或者一个 DomHelper 描述，用作layout元素的内容(默认为'')。 这个HTML内容在组件渲染之后才被添加，所以在 render 出发的时候，document中尚未包含此HTML。 但是这个内容将会在所有配置的 contentEl 之前被插入到body标签中。
Component
id : String
当前组件唯一的id(默认为auto-assigned id)...

当前组件唯一的id(默认为auto-assigned id)。 如果你需要在以后访问组件，而又没有一个有效的组件对象引用，那么你需要指定一个 id( 也就是，使用Ext. getCmp方法 )。

注意，此id也将被用作组件底层HTML标签的id，这些标签被渲染到页面中。 这将允许你编写基于id的CSS规则，以独立地描述指定的实例；并且，也可以通过 组件父标签的id选中子元素。

注意:为了避免与唯一的id 产生重复， 请参见 itemId 和 ref 。

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

Component
inputType : String
输入栏的类型属性---例如radio,text,password,file(默认为'text')。...
输入栏的类型属性---例如radio,text,password,file(默认为'text')。 'file'和'password'类型通常必须用来渲染那些没有独立Ext组件的表单项类型。 注意，如果你使用inputType:'file'， 那么将不再支持 emptyText 并且应该避免使用。
Field
invalidClass : String
当把表单项标记为非法时所使用的CSS类(默认为'x-form-invalid')
Field
invalidText : String
当把一个表单项标记为非法状态并且没有提供消息时所使用的出错文本...
当把一个表单项标记为非法状态并且没有提供消息时所使用的出错文本 (默认为'The value in this field is invalid')
Field
itemCls : String
注意: 只有在当前组件被渲染到一个使用FormLayout 布局的 容器中时此配置才有效...

注意: 只有在当前组件被渲染到一个使用FormLayout 布局的 容器中时此配置才有效。 (例如Ext.form.FormPanel 或者指定 layout:'form')。

一个附加的CSS类，应用到div上，包装当前field的表单元素。 如果提供了此参数， field级上的itemCls将会覆盖 container级上提供的 默认itemCls。 为itemCls指定的值将会被添加默认的 类('x-form-item')。

既然它被应用到项目的包装器上(参见 Ext.layout.FormLayout。 fieldTpl)， 它将允许你编写能应用到此field、label(如果有指定)、或者field内部任何其它元素的标准CSS规则。

注意: 参考 fieldLabel的注释。 .

示例用法:

// Apply a style to the field's label:
<style>
    .required .x-form-item-label {font-weight:bold;color:red;}
</style>

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Name',
        itemCls: 'required' //this label will be styled
    },{
        xtype: 'textfield',
        fieldLabel: 'Favorite Color'
    }]
});
Component
itemId : String
当没有可利用的对象引用时，itemId可以作为第二选择，用来获得一个组件的引用， 代替 ...

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

var c = new Ext.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'); // 与 Ext.getCmp()不同

p2 = p1.ownerCt.getComponent('p2'); // 通过兄弟对象获得引用

另请参见 id 和 ref 。

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

Component
items : Array
需要安排到分组中的一个Radios 或者Radio配置对象数组。
RadioGroup
labelSeparator : String
每个fieldLabel 文本后面现实的分隔符。 此属性可以在多个层次上进行配置...

每个fieldLabel 文本后面现实的分隔符。 此属性可以在多个层次上进行配置。优先顺序为：

  • field / component level
  • container level
  • layout level (默认为冒号 ':')
如不需要为当前field的label显示分隔符，指定一个空字符串''即可。

注意:参见 clearCls 的注释。

另请参见 hideLabel 和 Ext.layout.FormLayout。 fieldTpl。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    layoutConfig: {
        labelSeparator: '~'   // layout config has lowest priority (defaults to ':')
    },
    labelSeparator: '>>',     // config at container level
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Field 1',
        labelSeparator: '...' // field/component level config supersedes others
    },{
        xtype: 'textfield',
        fieldLabel: 'Field 2' // labelSeparator will be '='

    }]
});
Component
labelStyle : String
一个CSS样式描述字符串，它将直接应用到当前field的label上...

一个CSS样式描述字符串，它将直接应用到当前field的label上。 如果有设置，默认为容器的labelStyle值(例如 Ext.layout.FormLayout.labelStyle , 或者 '')。

注意:参见 clearCls 的注释。

另请参见 hideLabel 和 Ext.layout.FormLayout. fieldTpl。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Name',
        labelStyle: 'font-weight:bold;'
    }]
});
Component
listeners : Object
一个包含一个或多个事件处理器的配置对象，会在初始化的时候被添加到目标对象上...

一个包含一个或多个事件处理器的配置对象，会在初始化的时候被添加到目标对象上。 该配置对象应该是一个有效的监听器配置对象就像 addListener例子中指定的一样可一次附加多个处理器。

ExtJs Components上的DOM事件

一些 ExtJs Component 类导出时会选择一些DOM事件(例如 "click", "mouseover" 等等), 这通常只是在有额外的值可以被添加时发生。例如DataView类的 click事件会传递被点击的节点。也可以直接在Component的HTMLElementevent上访问DOM事件，但必需在Component被渲染后监听器才能添加到Element 上。可以按照以下步骤添加插件:

// 插件会用一个监听器配置对象进行配置。
//该组件会被添加到所有处理方法的参数列表上。
Ext.DomObserver = Ext.extend(Object, {
    constructor: function(config) {
        this.listeners = config.listeners ? config.listeners : config;
    },

    // 组件将自己传递进了插件的初始化方法里
    init: function(c) {
        var p, l = this.listeners;
        for (p in l) {
            if (Ext.isFunction(l[p])) {
                l[p] = this.createHandler(l[p], c);
            } else {
                l[p].fn = this.createHandler(l[p].fn, c);
            }
        }

        // 渲染后立即添加监听器到元素上
        c.render = c.render.createSequence(function() {
            var e = c.getEl();
            if (e) {
                e.on(l);
            }
        });
    },

    createHandler: function(fn, c) {
        return function(e) {
            fn.call(this, e, c);
        };
    }
});

var combo = new Ext.form.ComboBox({

    // 元素被点击后折叠
    plugins: [ new Ext.DomObserver({
        click: function(evt, comp) {
            comp.collapse();
        }
    })],
    store: myStore,
    typeAhead: true,
    mode: 'local',
    triggerAction: 'all'
});

Observable
margins : Object
注:此配置只用于该组件展现在一个使用BorderLayout...

注:此配置只用于该组件展现在一个使用BorderLayout 或 BoxLayout的两个子类之一作为布局的容器。

这个margins对象在该组件中的格式为：

{top: (top margin),right: (right margin),bottom: (bottom margin),left: (left margin)}

也可以是一个字符串，中间用空格分隔，margin值为数字。 把matches中每一个值的次序跟CSS中margin值的排列方式相对应：

  • 如果只有一个值，它适用于所有方面。
  • 如果有两个值，top和bottom的边框设置为第一个值，left和right设置为第二个值。
  • 如果有三个值，top设置为第一个值，left和right设置为第二个值，bottom设置为第三个值。
  • 如果有四个值，分别设置为top, right, bottom, left。

默认值:

{top:0, right:0, bottom:0, left:0}
BoxComponent
msgFx : String
实验性参数 当在表单项下显示校验消息时使用的效果(默认为'normal')。
Field
msgTarget : String
通过markInvalid 设置的消息文本应该显示的位置。 必须是如下值之一：...

通过markInvalid 设置的消息文本应该显示的位置。 必须是如下值之一：

  • qtip 当用户鼠标滑过表单项时，显示一个包含消息的快速提示。 这是默认情况。
    为了使此参数能工作，必须调用 Ext.QuickTips.init。
  • title 在弹出的默认浏览器标题属性上显示消息。
  • under 在表单项之下添加一块div，包含出错消息。
  • side 在表单项右边添加一个出错图标，当鼠标滑过时弹出并显示一个消息。
  • [element id] 在指定元素的innerHTML中直接添加出错消息。
Field
overCls : String
一个可选的额外的CSS类，它将在鼠标移过元素时被添加到组件上...
一个可选的额外的CSS类，它将在鼠标移过元素时被添加到组件上，鼠标移出时 删除。(默认为'')。此属性对于在组件上，或者它的任何使用标准CSS规则的孩子节点上， 添加定制的'active' 或者 'hover'样式非常有用。
Component
pageX : Number
如果该组件被包含在一个指定位置的容器中，这个值表示页面级的x坐标值（译者注：在有滚动条的情况下这个值很有用）。
BoxComponent
pageY : Number
如果该组件被包含在一个指定位置的容器中，这个值表示页面级的y坐标值（译者注：在有滚动条的情况下这个值很有用）。
BoxComponent
plugins : Object/Array
一个对象或者一个对象数组，为组件提供特殊的功能 ...
一个对象或者一个对象数组，为组件提供特殊的功能。 对一个合法的插件唯一的要求是它含有一个init()方法， 能接收一个Ext.Component型的参数。 当组件被创建时，如果有可用的插件，组件将会调用每个插件的init方法， 并将自身的引用作为方法参数传递给它。然后，每个插件就可以调用方法或者响应组件上的事件， 就像需要的那样提供自己的功能。
Component
preventMark : Boolean
true将会禁止 把表单项标记为非法。默认为false.
Field
ptype : String
需要创建配置的ptype。 当传递一个配置对象给构造函数时...
需要创建配置的ptype。 当传递一个配置对象给构造函数时，此配置选项不会被使用。 只有在使用懒初始化的时候此配置项才会被使用， 此时Plugin不是 通过一个完整的实例组件，而是通过一个Component配置指定的。 在渲染时，将会查找ptype以决定创建何种类型的Plugin。

如果你创建自己的Plugin，你可以通过 Ext.ComponentMgr.registerPlugin 对它们进行注册，以便能利用懒初始化和渲染机制。
Component
readOnly : Boolean
将会把表单项标记为在HTML中只读(readOnly)(默认为false)...
true 将会把表单项标记为在HTML中只读(readOnly)(默认为false)。

Note: 这仅仅设置元素的readOnly DOM参数。 例如，设置 readOnly=true ，将不会禁用触发ComboBox或者DateField； 这为你提供了一个选项，可以强制用户通过触发按钮选择一个值，而不是 在文本框进行输入。 使用 hideTrigger 可以隐藏触发按钮。

Field
ref : String
一个路径描述，与组件的 ownerCt 相关，它描述了把当前组件的命名引用放置到哪个父容器中去。...

一个路径描述，与组件的 ownerCt 相关，它描述了把当前组件的命名引用放置到哪个父容器中去。

祖先的坐标路径可以通过'/'字符进行分隔。 例如，将一个Toolbar Button的引用放入 拥有此Toolbar的Panel中:

var myGrid = new Ext.grid.EditorGridPanel({
    title: 'My EditorGridPanel',
    store: myStore,
    colModel: myColModel,
    tbar: [{
        text: 'Save',
        handler: saveChanges,
        disabled: true,
        ref: '../saveButton'
    }],
    listeners: {
        afteredit: function() {
//          The button reference is in the GridPanel
            myGrid.saveButton.enable();
        }
    }
});

在上面的代码中，如果 ref 是 'saveButton' ，那么引用将会被放置到Toolbar中。 ref 中的每个'/' 都会从组件的 ownerCt 向上移动一级。

另请参见 added 和 removed 事件。

Component
region : String
注: 此配置只用于该组件展现在一个布局为BorderLayout的容器中...

注: 此配置只用于该组件展现在一个布局为BorderLayout的容器中(例如指定layout:'border')。

详见Ext.layout.BorderLayout。

BoxComponent
renderTo : Mixed
该值可以是一个节点的id、一个DOM节点或者一个已存在的元素...

该值可以是一个节点的id、一个DOM节点或者一个已存在的元素， 组件将会被渲染到其中。

  • 注意 :
      如果组件不是一个Container 的子项目时， 不要使用此选项。 渲染和管理它的子项目是一个Container 的layout manager的责任。
      当使用此配置项时，无需调用render()方法。

另请参见 render 。

Component
stateEvents : Array
一个事件数组，当它们被触发时，组件需要保存自己的状态(默认值为 none)...

一个事件数组，当它们被触发时，组件需要保存自己的状态(默认值为 none)。 它们可以是任何该组件支持的事件类型，包括浏览器事件和 自定义事件(例如['click', 'customerchange'])。

对于保存和恢复组件状态的详细解释，参见 stateful

Component
stateId : String
为该组件指定的唯一的id值，它被用作管理组件状态的目的...
为该组件指定的唯一的id值，它被用作管理组件状态的目的。 (如果设定了id，默认值为组件自己的id，否则，如果组件使用自动生成的id，此值为null)。

对于保存和反解析组件状态的解释，参见 stateful 。

Component
stateful : Boolean
一个标志参数，它将引起组件在启动时尝试从一个保存的状态中恢复内部状态参数...

一个标志参数，它将引起组件在启动时尝试从一个保存的状态中恢复内部状态参数。 组件必须要么拥有一个 stateId 或者 id ，它们被分配给需要被管理的状态属性。 在跨页面加载时，不保证自动生成的id属性的稳定性， 并且，不能依赖此id来保存和恢复一个组件的相同状态。

为了保存状态的操作能够工作，状态管理器的提供者必须 被设置成一个Ext.state.Provider 的实现类，它覆盖了set 和get 方法，以便保存和恢复name/value对。 有一个内置的Ext.state.CookieProvider 可用。

为当前页面设置状态提供者:

Ext.state.Manager.setProvider(new Ext.state.CookieProvider({
    expires: new Date(new Date().getTime()+(1000*60*60*24*7)), //7 days from now
}));

当 stateEvents 配置项中其中之一的事件被触发时， 一个状态可保存的组件将试图保存其状态。

保存状态时，一个可保存状态的组件首先需要通过调用 getState 方法来序列化它的状态。 默认情况下，此函数什么事都不做。 开发者必须提供一个实现，返回一个hash对象，它描述了组件可恢复的状态。

getState方法产生的值将会传递给 Ext.state.Manager.set 方法，它使用配置的 Ext.state.Provider 来保存对象，以组件的 stateId 为key，或者，如果此值（指stateId）没有指定时， 使用它的 id 作为key。

在进行构造时，一个可保存状态的组件试图通过调用 Ext.state.Manager.get方法来 恢复它的状态，传递 stateId 或者，如果此值（指stateId）没有指定时， 使用它的 id 作为参数。

结果对象被传递给 applyState 。 applyState 的默认实现只是简单地把属性拷贝到对象中， 但是开发者可以覆盖此方法以支持更多行为。

通过向 beforestaterestore, staterestore, beforestatesave 和 statesave 事件上绑定监听器，你可以在保存和恢复状态时进行额外的处理。

Component
style : String
被添加到组件元素的特定样式。 必须是按照...
被添加到组件元素的特定样式。 必须是按照 Ext.Element.applyStyles 类指定格式的合法参数值。

new Ext.Panel({
    title: 'Some Title',
    renderTo: Ext.getBody(),
    width: 400, height: 300,
    layout: 'form',
    items: [{
        xtype: 'textarea',
        style: {
            width: '95%',
            marginBottom: '10px'
        }
    },
        new Ext.Button({
            text: 'Send',
            minWidth: '100',
            style: {
                marginBottom: '10px'
            }
        })
    ]
});
Component
submitValue : Boolean
False将会清除表单项的name属性，这样在提交表单时它将不会被提交。 默认为true。
Field
tabIndex : Number
该表单项的tabIndex。 注意，此属性仅仅应用到被渲染好的，而不是那些通过applyTo...
该表单项的tabIndex。 注意，此属性仅仅应用到被渲染好的，而不是那些通过applyTo创建的表单项 (默认为undefined)。
Field
tabTip : String
注: 这个配置只用于当该组件作为TabPanel的一个子项目时使用...

注: 这个配置只用于当该组件作为TabPanel的一个子项目时使用。

一个String类型的innerHTML(支持html标签)，当鼠标放在该选项上的时，显示一个tooltip。为了tips能够被渲染，Ext.QuickTips.init()必须被提前调用。
BoxComponent
tpl : Mixed
一个 Ext.Template , Ext.XTemplate 或者一个用来形成一个Ext.XTemplate的字符串数组...
一个 Ext.Template , Ext.XTemplate 或者一个用来形成一个Ext.XTemplate的字符串数组。 与 data 和 tplWriteMode 配置项协同使用。
Component
tplWriteMode : String
刷新组件的内容区域时使用的Ext.(X)Template方式。 默认为'overwrite' (参见 Ext.XTemplate.overwrite )。
刷新组件的内容区域时使用的Ext.(X)Template方式。 默认为'overwrite' (参见 Ext.XTemplate.overwrite )。
Component
validateOnBlur : Boolean
在表单项失去焦点时是否进行校验(默认为 true)。
Field
validationDelay : Number
在用户开始输入到校验操作开始之间的时长毫秒数 (默认为250)
Field
validationEvent : String/Boolean
引发表单项进行校验操作的事件。 设置为false可以禁用自动校验 (默认为'keyup')。
引发表单项进行校验操作的事件。 设置为false可以禁用自动校验 (默认为'keyup')。
Field
value : Mixed
当前表单项的初始化值(默认为undefined).
Field
vertical : Boolean
True将跨列分配所包含的控制器，从上到下完全填满一列，然后再开始新的一列。...
True将跨列分配所包含的控制器，从上到下完全填满一列，然后再开始新的一列。 每一列控制器的个数将会被自动计算以便保证每一列尽可能均匀分布。 默认值为false，这样控制器将按照一次添加一个的方式被加入到列中，从左到右 完全填满一行之后再开始新的一行。
CheckboxGroup
width : Number
组件的宽度(默认值为 auto)。注:如果想使用百分比的方式...
组件的宽度(默认值为 auto)。注:如果想使用百分比的方式来设置值，请查看 Ext.Component.anchor。
BoxComponent
x : Number
如果被包含在一个指定位置的容器中，这个值表示x(left)坐标值。
BoxComponent
xtype : String
需要创建配置的xtype。 当传递一个配置对象给构造函数时...
需要创建配置的xtype。 当传递一个配置对象给构造函数时，此配置选项不会被使用。 只有在使用懒初始化的时候此配置项才会被使用，此时容器的子项目不是 通过一个完整的实例组件，而是通过一个Component配置指定的。 在渲染时，将会查找xtype以决定创建何种类型的子组件。

预定义的xtype列表如下： here。

如果你继承Component创建你自己的组件，你需要使用Ext.ComponentMgr.registerType 对它们进行注册，以便利用懒初始化和渲染机制。
Component
y : Number
如果被包含在一个指定位置的容器中，这个值表示y(top)坐标值。
BoxComponent

公共属性

Property Defined By
disabled : Boolean
当前组件处于无效状态时为true。 Read-only.
Component
el : Ext.Element
封装了当前组件的Ext.Element。 Read-only。通常情况下，这将是一个<DIV>元素，它由此类的...

封装了当前组件的Ext.Element。 Read-only。

通常情况下，这将是一个<DIV>元素，它由此类的 onRender方法创建，但是它可以通过使用 autoEl 配置项进行覆盖。

注意: 直到组件渲染完成此元素都将处于无效状态。

如需向当前组件的 DOM事件(而不是当前组件自己的Observable事件)添加监听器， 更多建议，参见 listeners 配置项，或者直接使用一个render监听器:

new Ext.Panel({
    title: 'The Clickable Panel',
    listeners: {
        render: function(p) {
            // Append the Panel to the click handler's argument list.
            p.getEl().on('click', handlePanelClick.createDelegate(null, [p], true));
        },
        single: true  // Remove the listener after first invocation
    }
});

另请参见 getEl

Component
hidden : Boolean
如果当前组件处于隐藏状态，此值为true。Read-only。
Component
initialConfig : Object
当前组件的初始化配置描述。 Read-only。
Component
label : Ext.Element
关联到当前表单项的label元素。 只有在当前表单项已经被一个Ext.layout.FormLayout ...

关联到当前表单项的label元素。 只有在当前表单项已经被一个Ext.layout.FormLayout 布局管理器渲染之后才可用。

Field
originalValue : mixed
表单项原来的值，它是在value 中配置的；或者，如果 trackResetOnLoad 设置为...
表单项原来的值，它是在value 中配置的；或者，如果 trackResetOnLoad 设置为 true 时，通过表单加载操作最后一次加载的。
Field
ownerCt : Ext.Container
组件所属的Container (默认为undefined，当前组件被添加到一个容器中时此值被自动设置)...
组件所属的Container (默认为undefined，当前组件被添加到一个容器中时此值被自动设置)。 Read-only。

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

Component
refOwner : Ext.Container
如果当前组件是一个容器的孩子，并且是通过一个 ref 配置项被注册的，则此值为 ref 引用被插入到的祖先容器。
如果当前组件是一个容器的孩子，并且是通过一个 ref 配置项被注册的，则此值为 ref 引用被插入到的祖先容器。
Component
rendered : Boolean
如果当前组件已经被渲染了，此值为true。Read-only.
Component
startValue : mixed
表单项最后一次获得焦点时所拥有的值。 这就是传递给change 事件的值...

表单项最后一次获得焦点时所拥有的值。 这就是传递给change 事件的值，此事件在值被改变并失去焦点时触发。

直到表单项被访问之前此值都是undefined 与originalValue 进行比较。

Field

公共方法

Method Defined By
RadioGroup ( Object config )
创建一个新的RadioGroup
创建一个新的RadioGroup
参数:
  • config : Object
    配置选项
返回值:
  • void
RadioGroup
addClass ( string cls ) : Ext.Component
为组件底层的元素添加CSS样式。
为组件底层的元素添加CSS样式。
参数:
  • cls : string
    需要添加的CSS样式的class名称
返回值:
  • Ext.Component
    this
Component
addEvents( Object|String o, string Optional. ) : void
添加指定的事件到事件列表上，事件会被该Observable触发。
添加指定的事件到事件列表上，事件会被该Observable触发。
参数:
  • o : Object|String
    以事件名作为属性true作为值的对象 或者当多个事件名被分开的传递时则为第一个事件名。
  • Optional. : string
    事件名被分开的传递时则为事件名。 用法:
    this.addEvents('storeloaded', 'storecleared');
返回值:
  • void
Observable
addListener( String eventName, Function handler, [Object scope], [Object options] ) : void
给对象添加事件处理器。
给对象添加事件处理器。
参数:
  • eventName : String
    监听的事件名。
  • handler : Function
    事件调用的方法
  • scope : Object
    （可选）处理方法执行的作用域 (this的引用 reference)。 如果被忽略。默认为触发事件的对象。
  • options : Object
    （可选）包含处理器配置和属性的对象。 可能包含以下的属性:
    • scope : Object
      处理方法执行的作用域(this的引用) 。 如果被忽略。默认为触发事件的对象。
    • delay : Number
      在触发事件后延迟调用处理器的毫秒数。
    • single : Boolean
      如果为True则添加一个处理器来处理下一次的事件触发（仅一次），然后移除自己。
    • buffer : Number
      使得处理器延迟指定毫秒数后预定的运行在 一个Ext.util.DelayedTask中 。 如果事件在时间内再一次被触发，原始的处理器不会被调用，但是新的处理器会预定的在他的位置上。
    • target : Observable
      如果事件在目标的Observable上触发则仅仅调用处理器， 否则 事件会从子类的Observable上冒泡

    组合选项
    使用这些选项参数,可能会组合出不同类型的监听器：

    一个延迟的，一次性的监听器。

    myDataView.on('click', this.onClick, this, {
single: true,
delay: 100
});

    一次调用附加多个处理器
    该方法同样支持传递一个包含指定的多个处理器的属性的配置对象参数。

    myGridPanel.on({
'click' : {
    fn: this.onClick,
    scope: this,
    delay: 100
},
'mouseover' : {
    fn: this.onMouseOver,
    scope: this
},
'mouseout' : {
    fn: this.onMouseOut,
    scope: this
}
});

    或者一个简写的语法：

    myGridPanel.on({
'click' : this.onClick,
'mouseover' : this.onMouseOver,
'mouseout' : this.onMouseOut,
 scope: this
});
返回值:
  • void
Observable
applyToMarkup ( String/HTMLElement el ) : void
将此组件添加到已存在的有效的HTML标签中。 使用该方法时，无需再调用render()方法。
将此组件添加到已存在的有效的HTML标签中。 使用该方法时，无需再调用render()方法。
参数:
  • el : String/HTMLElement
返回值:
  • void
Component
clearInvalid () : void
清除当前表单项上的所有非法styles/messages(样式/消息)
清除当前表单项上的所有非法styles/messages(样式/消息)
参数:
  • 无。
返回值:
  • void
Field
cloneConfig ( Object overrides ) : Ext.Component
默认使用原先传递给当前实例的配置值克隆当前组件。
默认使用原先传递给当前实例的配置值克隆当前组件。
参数:
  • overrides : Object
    一个新的配置项，包含需要覆盖到克隆版本的所有属性。 可以传递一个id参数给此对象，否则将自动生成一个新的id以避免发生重复。
返回值:
  • Ext.Component
    当前组件的克隆副本
Component
destroy () : void
通过如下方法销毁对象：删除所有的事件监听器、将组件的元素从DOM树中删除...
通过如下方法销毁对象：删除所有的事件监听器、将组件的元素从DOM树中删除（如果可以）、 将组件从它的 Ext.Container（如果可用）中删除、 并且将它从Ext.ComponentMgr中 注销。 销毁操作一般由框架自动完成，一般情况下不需要直接调用该方法。
参数:
  • 无。
返回值:
  • void
Component
disable () : Ext.Component
将组件置为无效状态，并出发'disable'事件。
将组件置为无效状态，并出发'disable'事件。
参数:
  • 无。
返回值:
  • Ext.Component
    this
Component
enable () : Ext.Component
将组件置为有效状态并触发'enable'事件。
将组件置为有效状态并触发'enable'事件。
参数:
  • 无。
返回值:
  • Ext.Component
    this
Component
enableBubble( String/Array events ) :void
是否现在使得事件会被该Observable触发并调用 this.getBubbleTarget()方法在拥有者的继承树...

是否现在使得事件会被该Observable触发并调用 this.getBubbleTarget()方法在拥有者的继承树中冒泡。Observable的基础类中没有该方法的实现。

该方法一般被Ext.Components用来冒泡事件到拥有者的容器。参看Ext.Component.getBubbleTarget默认的实现 在Ext.Component中返回组件的直接拥有者。但是如果需要的是一个已知的目标，该方法可以被重写来更快的访问需求的目标。

例子:

Ext.override(Ext.form.Field, {
    // 添加方法到Field的initComponent上改变事件为冒泡
    initComponent : Ext.form.Field.prototype.initComponent.createSequence(function() {
        this.enableBubble('change');
    }),

    // 我们知道我们想让Field的事件冒泡到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() {
            // 如果样式被修改标题会变红。
            myForm.header.setStyle('color', 'red');
        }
    }
});
参数:
  • events : String/Array
    冒泡的事件名，或事件名数组
返回值:
  • void
Observable
findParentBy ( Function fn ) : Ext.Container
通过自定义的函数查找当前组件上层任何层次上的容器...
通过自定义的函数查找当前组件上层任何层次上的容器。 如果传递的函数返回true，容器对象将被返回。
参数:
  • fn : Function
    自定义的函数，使用如下参数调用(container,this component)。
返回值:
  • Ext.Container
    自定义函数返回true的第一个容器
Component
findParentByType ( String/Class xtype ) : Ext.Container
通过xtype或者class查找当前组件上层任何层次上的容器
通过xtype或者class查找当前组件上层任何层次上的容器
参数:
  • xtype : String/Class
    组件的xtype字符串，或者直接是组件的class
返回值:
  • Ext.Container
    符合指定xtype或者class的第一个容器
Component
fireEvent( String eventName, Object... args ) : Boolean
用传入的参数触发指定的事件 (减去事件名)。 一个事件可以被设置为冒泡 Obse...

用传入的参数触发指定的事件 (减去事件名)。

一个事件可以被设置为冒泡到Observable父类继承树(参看 Ext.Component.getBubbleTarget) 调用enableBubble实现。

参数:
  • eventName : String
    触发的事件名。
  • args : Object...
    传递给处理器的可变长度参数。
返回值:
  • Boolean
    如果有任何的处理器返回false则返回false，否则返回true。
Observable
focus ( [ Boolean selectText ], [ Boolean/Number delay ] ) : Ext.Component
尝试将当前组件设为焦点。
尝试将当前组件设为焦点。
参数:
  • selectText : Boolean
    (可选) 如果可用，同时选中组件内部的文本
  • delay : Boolean/Number
    (可选)将当前组件设置为焦点的延迟时间(设置为true等于0毫秒)
返回值:
  • Ext.Component
    this
Component
getActiveError () : String
获取当前表单项活动的出错消息。
获取当前表单项活动的出错消息。
参数:
  • 无。
返回值:
  • String
    返回表单项上活动的出错消息，如果没有错误，返回一个空字符串。
Field
getBox ( [ Boolean local ] ) : Object
获取组件底层元素当前盒子模型的尺寸。（译者注：盒子模型是CSS术语，详细解释请自行搜索。）
获取组件底层元素当前盒子模型的尺寸。（译者注：盒子模型是CSS术语，详细解释请自行搜索。）
参数:
  • local : Boolean
    (可选)值为true时，组件的left值和top值将代替页面的XY被返回。(默认值为false)
返回值:
  • Object
    返回值的格式{x, y, width, height}
BoxComponent
getBubbleTarget () : Ext.Container
为Observable的fireEvent方法提供链接，它沿着继承结构进行冒泡操作。
为Observable的fireEvent方法提供链接，它沿着继承结构进行冒泡操作。
参数:
  • 无。
返回值:
  • Ext.Container
    拥有当前组件的容器。
Component
getEl () : Ext.Element
返回 Ext.Element ，它包装了当前组件。...

返回 Ext.Element ，它包装了当前组件。

通常情况下，这将是一个<DIV>元素，它是由该类的onRender方法创建的， 但是可以使用autoEl配置项 覆盖它。

注意: 此元素将会一直处于无效状态直到当前组件渲染完成。

如需向当前组件的 DOM事件(而不是当前组件自己的Observable事件)添加监听器， 更多建议，参见 listeners 配置项，或者直接使用一个render监听器:

new Ext.Panel({
    title: 'The Clickable Panel',
    listeners: {
        render: function(p) {
            // Append the Panel to the click handler's argument list.
            p.getEl().on('click', handlePanelClick.createDelegate(null, [p], true));
        },
        single: true  // Remove the listener after first invocation
    }
});
参数:
  • 无。
返回值:
  • Ext.Element
    包装当前组件的元素。
Component
getErrors () : Array
运行当前表单项的校验器并返回一个所有校验错误信息数组。 此方法在校验期间在内部调用并且一般情况下...
运行当前表单项的校验器并返回一个所有校验错误信息数组。 此方法在校验期间在内部调用并且一般情况下不需要手工调用。 每个子类都应该重写或者增加返回值以提供它们自己的出错消息
参数:
  • 无。
返回值:
  • Array
    当前表单项的所有出错消息
CheckboxGroup
getHeight () : Number
获取该组件的当前高度值。
获取该组件的当前高度值。
参数:
  • 无。
返回值:
  • Number
BoxComponent
getId () : String
返回当前组件的id，如果没有定义id，则自动生成并返回一个id:'ext-comp-'...
返回当前组件的 id 如果没有定义 id 则自动生成并返回一个 id

'ext-comp-' + (++Ext.Component.AUTO_ID)
参数:
  • 无。
返回值:
  • String
    id
Component
getItemId () : String
返回当前组件的 itemId 。 如果没有通过配置参数指定 itemId 那么，将会使用...
返回当前组件的 itemId 。 如果没有通过配置参数指定 itemId 那么，将会使用 getId 返回 id 。
参数:
  • 无。
返回值:
  • String
Component
getName () : String
如果可用，返回表单项的 name 或者 hiddenName 属性。
如果可用，返回表单项的 name 或者 hiddenName 属性。
参数:
  • 无。
返回值:
  • String
    name 表单项的{@link Ext.form.Field#name name}或者{@link Ext.form.ComboBox#hiddenName hiddenName}
Field
getOuterSize () : Object
获取当前组件所在元素的尺寸大小，包括边缘的空白处。
获取当前组件所在元素的尺寸大小，包括边缘的空白处。
参数:
  • 无。
返回值:
  • Object
    一个包含元素大小的对象 {width: (element width + left/right margins), height: (element height + top/bottom margins)}
BoxComponent
getPosition ( [ Boolean local ] ) : Array
获取组件底层元素当前的XY位置。
获取组件底层元素当前的XY位置。
参数:
  • local : Boolean
    (可选)如果为true，将返回元素的left和top值，而不是相对于页面内的 XY。(默认值为 false)
返回值:
  • Array
    元素的XY位置值(例如：[100, 200])
BoxComponent
getResizeEl () : Ext.Element
返回该组件的最外层用来定义这些组件整体大小的Element...

返回该组件的最外层用来定义这些组件整体大小的Element对象。

通常用 getEl 方法将会返回相同的Element对象，但在有些情况下，组件可能有一些更多的封装了它的主要动态Element对象的Element对象。

例如ComboBox。它是封装在一个包含<input>元素的包装元素里(这将返回其 getEl方法和触发按钮的元素)。返回的元素为resizeEl。

参数:
  • 无。
返回值:
  • Ext.Element
    The Element which is to be resized by size managing layouts.
BoxComponent
getSize () : Object
获取组件底层元素当前的大小。
获取组件底层元素当前的大小。
参数:
  • 无。
返回值:
  • Object
    一个包含元素大小的对象{width: (element width), height: (element height)}
BoxComponent
getValue () : Ext.form.Radio
如果存在，获取分组中选中的 Ext.form.Radio 。
如果存在，获取分组中选中的 Ext.form.Radio 。
参数:
  • 无。
返回值:
  • Ext.form.Radio
    选中的radio
RadioGroup
getWidth () : Number
获取该组件的当前宽度值。
获取该组件的当前宽度值。
参数:
  • 无。
返回值:
  • Number
BoxComponent
getXType () : String
获取当前组件的xtype，它是用 Ext.ComponentMgr 注册的。 所有可用的xtype列表，参见...
获取当前组件的xtype，它是用 Ext.ComponentMgr 注册的。 所有可用的xtype列表，参见 Ext.Component 类头部。示例用法:

var t = new Ext.form.TextField();
alert(t.getXType());  // alerts 'textfield'
参数:
  • 无。
返回值:
  • String
    The xtype
Component
getXTypes () : String
返回此组件的xtype继承树，用字符'-'分隔。 所有可用的xtype值...

返回此组件的xtype继承树，用字符'-'分隔。 所有可用的xtype值，请参见Ext.Component 类的头部。

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

示例用法:

var t = new Ext.form.TextField();
alert(t.getXTypes());  // alerts 'component/box/field/textfield'
参数:
  • 无。
返回值:
  • String
    xtype层次字符串
Component
hasListener( String eventName ) : Boolean
检测对象是否包含指定事件的任何监听器
检测对象是否包含指定事件的任何监听器
参数:
  • eventName : String
    检测的事件名
返回值:
  • Boolean
    如果事件被监听则为true，否则为false
Observable
hide () : Ext.Component
隐藏当前组件。 监听 beforehide' 事件并且返回false 可以取消隐藏组件的操作。 在隐藏组件之后触发...
隐藏当前组件。 监听 beforehide' 事件并且返回false 可以取消隐藏组件的操作。 在隐藏组件之后触发 ' hide' 事件。 如果组件被配置成 hidden 那么此方法在内部被调用。
参数:
  • 无。
返回值:
  • Ext.Component
    this
Component
isDirty () : Boolean
如果此表单项的值与原始值相比发生了改变，返回true。 如果表单项...

如果此表单项的值与原始值相比发生了改变，返回true。 如果表单项被禁用或者尚未被渲染将会返回false。

注意，如果所属的 form 配置了一个Ext.form.BasicForm， 那么在使用Ext.form.BasicForm. setValues 加载值之后，原始值将会被更新。

参数:
  • 无。
返回值:
  • Boolean
    如果此表单项的值与原始值相比发生了改变(并且没有被禁用)，返回true，其它返回false。
Field
isValid ( Boolean preventMark ) : Boolean
通过 校验 表单项 处理后的值 ，返回表单项当前值是否合法。...
通过 校验 表单项 处理后的值 ，返回表单项当前值是否合法。 注意: disabled 的表单项将会被忽略。
参数:
  • preventMark : Boolean
    True将会禁止把表单项标记为非法
返回值:
  • Boolean
    如果值是合法的，为true，其它为false
Field
isVisible () : Boolean
如果当前组件可见，返回true。
如果当前组件可见，返回true。
参数:
  • 无。
返回值:
  • Boolean
    如果当前组件可见，返回true，其它返回false。
Component
isXType ( String xtype , [ Boolean shallow ] ) : Boolean
Tests whether or not this Component is of a specific xtype. This can test whether this Component is descended from th...

测试此组件是否是指定的xtype。此方法既可以测试是否是指定的xtype的某个子类， 或者它是否直接是指定的xtype类(shallow=true)。

如果使用你自己的子类，必须知道组件必须注册它的xtype值。

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

示例用法:

var t = new Ext.form.TextField();
var isText = t.isXType('textfield');        // true
var isBoxSubclass = t.isXType('box');       // true, descended from BoxComponent
var isBoxInstance = t.isXType('box', true); // false, not a direct BoxComponent instance
参数:
  • xtype : String
    需要为当前组件进行检测的xtype
  • shallow : Boolean
    (可选) 如果为false，检测组件是否是xtype继承树中的某个子类（默认是这种情况）， 如果为true，只检测组件是否是指定的xtype类型。
返回值:
  • Boolean
    如果当前组件是指定xtype的子类，返回true，其它返回flase。
Component
markInvalid ( [ String msg ] ) : void
显示一个关联到当前表单项的出错信息， 使用msgTarget 来决定如何显示消息并将...

显示一个关msgTarget 来决定如何显示消息并将 invalidClass 应用到表单项的UI元素上。

注意: 如果表单项的值确实通过了校验， 此方法不会导致表单项的 validate 方法返回 false 。 所以简单地把一个表单项标记为非法并不会阻止表单项 通过设置的 Ext.form.Action.Submit.clientValidation 被提交。

invalid.
参数:
  • msg : String
    (可选)校验信息(默认为invalidText)
返回值:
  • void
Field
mon ( Observable|Element item , Object|String ename , Function fn , Object scope , Object opt ) : void
向任何Observable对象(或者元素)上添加监听器，监听器将会在组件...

向任何Observable对象(或者元素)上添加监听器，监听器将会在组件销毁时被自动删除。
用法：

myGridPanel.mon(myGridPanel.getSelectionModel(), 'selectionchange', handleSelectionChange, null, {buffer: 50});

or:

myGridPanel.mon(myGridPanel.getSelectionModel(), {
    selectionchange: handleSelectionChange,
    buffer: 50
});
参数:
  • item : Observable|Element
    需要添加listener/listeners的项目。
  • ename : Object|String
    事件名，或者一个包含事件名属性的对象。
  • fn : Function
    (可选) 如果 ename 参数是一个事件名，此参数为处理函数。
  • scope : Object
    (可选)如果 ename 参数是一个事件名称，此参数是作用域 ( this 引用)，监听函数将会在此作用域中被执行。
  • opt : Object
    (可选)如果 ename 参数是一个事件名称， 此参数是 addListener 配置项。
返回值:
  • void
Component
mun ( Observable|Element item , Object|String ename , Function fn , Object scope ) : void
删除通过mon 方法添加的监听器。
删除通过mon 方法添加的监听器。
参数:
  • item : Observable|Element
    需要删除listener/listeners的项目。
  • ename : Object|String
    事件名称，或者一个包含事件名称属性的对象。
  • fn : Function
    (可选)如果 ename 参数是一个事件名称，此参数是一个处理函数。
  • scope : Object
    (可选)如果 ename 参数是一个事件名称，此参数是作用域 ( this 引用)，监听函数将会在此作用域中被执行。
返回值:
  • void
Component
nextSibling () : Ext.Component
返回所属容器中的下一个组件
返回所属容器中的下一个组件
参数:
  • 无。
返回值:
  • Ext.Component
Component
on( String eventName, Function handler, [Object scope], [Object options] ) : void
给对象添加事件处理器 (addListener的简写形式)
给对象添加事件处理器 (addListener的简写形式。)
参数:
  • eventName : String
    监听的事件类型
  • handler : Function
    事件调用的方法
  • scope : Object
    （可选）处理方法执行时的作用域 (this 的引用)。 如果被忽略。默认为触发事件的对象。
  • options : Object
    可选 包含处理器配置的对象。
返回值:
  • void
Observable
onSetValue ( String/Ext.form.Radio id , Boolean value ) : Ext.form.RadioGroup
设置分组中选中的radio
设置分组中选中的radio
参数:
  • id : String/Ext.form.Radio
    需要选中的radio
  • value : Boolean
    需要设置给radio的值。
返回值:
  • Ext.form.RadioGroup
    this
RadioGroup
previousSibling () : Ext.Component
返回所属容器中的前一个组件
返回所属容器中的前一个组件
参数:
  • 无。
返回值:
  • Ext.Component
Component
processValue ( Mixed value ) : void
仅仅在需要准备原始值供校验时，才需要覆盖此方法(参见 validate和 isValid)。...
仅仅在需要准备原始值供校验时，才需要覆盖此方法(参见 validate和 isValid)。 此方法被期望为表单项返回处理后的值，此值将会被用来进行校验 (参见validateValue方法)。
参数:
  • value : Mixed
返回值:
  • void
Field
purgeListeners() : void
移除对象上所有的监听器
移除对象上所有的监听器
参数:
  • 无。
返回值:
  • void
Observable
relayEvents( Object o, Array events ) : void
从指定的Observable上传递选择的事件就好像被当前对象触发一样。
从指定的Observable上传递选择的事件就好像被当前对象触发一样。
参数:
  • o : Object
    该Observable上的事件被当前对象传递。
  • events : Array
    传递的数组名。
返回值:
  • void
Observable
removeClass ( string cls ) : Ext.Component
从组件底层的元素上删除一个CSS类。
从组件底层的元素上删除一个CSS类。
参数:
  • cls : string
    需要移除的CSS类名
返回值:
  • Ext.Component
    this
Component
removeListener( String eventName, Function handler, [Object scope] ) : void
删除一个事件处理器。
删除一个事件处理器。
参数:
  • eventName : String
    处理器关联的事件类型。
  • handler : Function
    移除的处理器。 这应该是传递到addListener里的方法的引用。
  • scope : Object
    （可选）处理器指定的初始作用域。
返回值:
  • void
Observable
render ( [ Element/HTMLElement/String container ], [ String/Number position ] ) : void
在传递进来的HTML元素中渲染当前组件。...

在传递进来的HTML元素中渲染当前组件。

如果你正在使用一个Container 对象放置当前组件，那么请不要使用render方法。

当容器第一次被渲染时，它的子组件将会被容器的 layout 管理器渲染。

某些布局管理器允许动态添加子组件。它们包括 Ext.layout.CardLayout, Ext.layout.AnchorLayout, Ext.layout.FormLayout, Ext.layout.TableLayout。

当一个新的子组件被添加时，如果容器已经被渲染了， 你可能需要调用容器的 doLayout 方法来刷新视图，它将导致所有没有被渲染的子组件进行渲染操作。 此操作是必须的，这样你可以添加多个子组件而只刷新一次layout。

当创建复杂的UI时，非常重要的一点是，请记住调整子项目的尺寸和位置是容器的 layout 管理器的职责。 如果你希望子项目的尺寸对用户交互作出反应， 你必须为容器配置一个布局管理器，它将创建和管理你心里想要的那种布局。

忽略容器的layout 配置意味着将会使用一个基本的布局管理器，它除了按次序把子组件 渲染到容器中之外什么事情都不做。 这种情况下，任何尺寸和位置的调整操作都不会发生。

参数:
  • container : Element/HTMLElement/String
    (可选) 需要在其中渲染当前组件的元素。 如果它是从一个已存在的标签中创建的，此参数应该被忽略。
  • position : String/Number
    (可选) 容器中的一个元素ID或者一个DOM节点索引， 当前组件将会被插入到它前面 (默认append到容器的尾部)
返回值:
  • void
Component
reset () : void
将表单项的当前值重置为以前加载时的值，并且清除所有校验信息。...
将表单项的当前值重置为以前加载时的值，并且清除所有校验信息。 参见Ext.form.BasicForm. trackResetOnLoad 。
参数:
  • 无。
返回值:
  • void
Field
resumeEvents() : void
重新开始触发事件。(参见suspendEvents) 如果事件以queueSuspended参数被挂起，则在事件被挂起时 ...
重新开始触发事件。(参见 suspendEvents) 如果事件以queueSuspended 参数被挂起，则在事件被挂起时触发的事件会被传递到所有的监听器上
参数:
  • 无。
返回值:
  • void
Observable
setActiveError ( String msg , Boolean suppressEvent ) : void
将当前activeError设置为所给的字符串。 触发'invalid'事件。这不会设置出错图标...
将当前activeError设置为所给的字符串。 触发'invalid'事件。这不会设置出错图标，仅仅设置消息并触发事件。 如需显示出错图标，可使用markInvalid代替，它将在内部调用此方法。
参数:
  • msg : String
    出错消息
  • suppressEvent : Boolean
    True将会禁止触发'invalid'事件
返回值:
  • void
Field
setAutoScroll ( Boolean scroll ) : Ext.BoxComponent
设置该组件内容溢出时是否自动显示滚动条。
设置该组件内容溢出时是否自动显示滚动条。
参数:
  • scroll : Boolean
    值为true的话组件自动显示滚动条。
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setDisabled ( Boolean disabled ) : Ext.Component
工具函数，使用布尔值设置有效/无效(disabled/enabled )。
工具函数，使用布尔值设置有效/无效(disabled/enabled )。
参数:
  • disabled : Boolean
返回值:
  • Ext.Component
    this
Component
setHeight ( Mixed height ) : Ext.BoxComponent
设置此组件的高度。该方法将触发resize事件。
设置此组件的高度。该方法将触发resize事件。
参数:
  • height : Mixed
    The new height to set.
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setPagePosition ( Number x , Number y ) : Ext.BoxComponent
设置组件在页面中的XY位置。 如果需要设置left和top值 ，请使用...
设置组件在页面中的XY位置。 如果需要设置left和top值 ，请使用setPosition方法。 该方法触发move事件。
参数:
  • x : Number
    The new x position
  • y : Number
    The new y position
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setPosition ( Number left , Number top ) : Ext.BoxComponent
设置组件的left和top值。设置组件的页面XY值，请使用setPagePosition方法。该方法触发...
设置组件的left和top值。设置组件的页面XY值，请使用setPagePosition方法。该方法触发move事件。
参数:
  • left : Number
    The new left
  • top : Number
    The new top
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setReadOnly ( Boolean readOnly ) : void
设置当前表单项的只读状态。
设置当前表单项的只读状态。
参数:
  • readOnly : Boolean
    表单项是否应该只读。
返回值:
  • void
Field
setSize ( Mixed width , Mixed height ) : Ext.BoxComponent
设置BoxComponent的宽度和高度。 此方法触发resize事件...
设置BoxComponent的宽度和高度。 此方法触发resize事件。此方法可以接收单独的width或者height值作为参数， 或者你可以传递像这样的一个size对象： {width:10, height:20} 。
参数:
  • width : Mixed
    设置的新的width值。这可以是：
    • 一个Number类型指定Element新的宽度 Ext.Element.defaultUnit(默认为像素 :'px')。
    • 一个String类型用于设置width的CSS样式。
    • 一个size对象格式为 {width: widthValue, height: heightValue} 。
    • 值为 undefined 时，保留原来的width不变。
  • height : Mixed
    设置的新的height值(如果第一个参数传递了一个size对象，此参数没有必要传递)。这可以是：
    • 一个Number类型指定Element新的高度 Ext.Element.defaultUnit(默认为像素 :'px')。
    • 一个String类型用于设置height的CSS样式。也有可能不会被使用到。
    • 值为 undefined 时，保留原来的height不变。
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setValue ( Mixed value ) : Ext.form.Field
向表单项中设置一个数据值并校验之。 如需直接设置值而不进行校验，参见 setRawValue。
向表单项中设置一个数据值并校验之。 如需直接设置值而不进行校验，参见 setRawValue。
参数:
  • value : Mixed
    需要设置的值
返回值:
  • Ext.form.Field
    this
CheckboxGroup
setVisible ( Boolean visible ) : Ext.Component
工具方法，通过使用布尔值隐藏或者显示当前组件。
工具方法，通过使用布尔值隐藏或者显示当前组件。
参数:
  • visible : Boolean
    true时显示，false时隐藏
返回值:
  • Ext.Component
    this
Component
setWidth ( Mixed width ) : Ext.BoxComponent
设置组件的宽度。 此方法触发resize事件。
设置组件的宽度。 此方法触发resize事件。
参数:
  • width : Mixed
    The new width to set.
返回值:
  • Ext.BoxComponent
    this
BoxComponent
show () : Ext.Component
显示当前组件。监听' beforeshow' 事件，返回 false 取消显示组件...
显示当前组件。监听' beforeshow' 事件，返回 false 取消显示组件。在显示组件之后触发' show' 事件。
参数:
  • 无。
返回值:
  • Ext.Component
    this
Component
suspendEvents( Boolean queueSuspended ) : void
暂停触发所有的事件。 (参看resumeEvents)
暂停触发所有的事件。（参看 resumeEvents)
参数:
  • queueSuspended : Boolean
    如果传递为true则排列好暂停的事件使得在调用 resumeEvents 后再触发它们，而不是抛弃所有暂停的事件。
返回值:
  • void
Observable
syncSize () : Ext.BoxComponent
强制组件的大小按照此组件底层元素当前的高度和宽度计算。
强制组件的大小按照此组件底层元素当前的高度和宽度计算。
参数:
  • 无。
返回值:
  • Ext.BoxComponent
    this
BoxComponent
un( String eventName, Function handler, [Object scope] ) : void
删除一个事件处理器(removeListener方法的简写形式)
删除一个事件处理器(removeListener方法的简写形式。)
参数:
  • eventName : String
    处理器关联的事件类型
  • handler : Function
    被删除的处理器 这应该是传入 addListener 中的方法的引用。
  • scope : Object
    （可选）为处理器指定的初始作用域。
返回值:
  • void
Observable
unsetActiveError ( Boolean suppressEvent ) : void
清除activeError并触发'valid'事件。此方法被clearInvalid在内部进行...
清除activeError并触发'valid'事件。此方法被clearInvalid在内部进行调用， 并且一般情况下没有必要手工调用
参数:
  • suppressEvent : Boolean
    True将禁止触发'invalid'事件
返回值:
  • void
Field
update ( Mixed htmlOrData , [ Boolean loadScripts ], [ Function callback ] ) : void
刷新组件的内部区域。
刷新组件的内部区域。
参数:
  • htmlOrData : Mixed
    如果已经通过tpl为当前组件配置了一个模板，那么 将会使用此参数来装配模板。 如果没有为当前组件配置模板，组件的内容区域将会通过Ext.Element 进行刷新。
  • loadScripts : Boolean
    (可选)只用在使用html配置时此参数才合法。默认为false。
  • callback : Function
    (可选)只用在使用html配置时此参数才合法。 当脚本加载完成时回调函数才被执行。
返回值:
  • void
Component
updateBox ( Object box ) : Ext.BoxComponent
设置此组件底层元素的盒子模型尺寸。(译者注：盒子模型是CSS术语，详细资料请自行搜索。)
设置此组件底层元素的盒子模型尺寸。(译者注：盒子模型是CSS术语，详细资料请自行搜索。)
参数:
  • box : Object
    一个格式为{x, y, width, height}的对象
返回值:
  • Ext.BoxComponent
    this
BoxComponent
validate () : Boolean
校验表单项的值
校验表单项的值
参数:
  • 无。
返回值:
  • Boolean
    如果值合法，为true,否则为false
Field
validateValue ( Mixed The ) : Boolean
使用getErrors创建一个校验出错信息数组。 如果发现了任何错误，将会使用第一个错误作为参数...
使用getErrors创建一个校验出错信息数组。 如果发现了任何错误，将会使用第一个错误作为参数调用markInvalid方法并返回 false，否则返回true。以前，要求子类提供此方法的一个实现以处理校验过程--- 从3.2开始，应该用覆盖getErrors方法的方式替代。
参数:
  • The : Mixed
    表单项的当前值
返回值:
  • Boolean
    如果所有校验都通过，此值为true，如果一个或多个校验失败，则为false
Field

公共事件

Event Defined By
added : ( Ext.Component this , Ext.Container ownerCt , number index )
当一个组件被添加到一个Ext.Container时触发
当一个组件被添加到一个Ext.Container时触发
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • ownerCt : Ext.Container
    用于组件的容器
  • index : number
    添加组件的位置
Component
afterrender : ( Ext.Component this )
在组件渲染完成之后触发...

在组件渲染完成之后触发。

afterrender事件在当前组件被rendered 结束之后、在为组件定义的所有afterRender方法执行之后 触发，并且，如果有stateful， 也在状态被保存之后才触发。

监听器将会以如下参数格式被调用:
  • this : Ext.Component
Component
beforedestroy : ( Ext.Component this )
在组件 destroyed 之前触发。 在事件监听器中返回false以停止 destroy 操作。
在组件 destroyed 之前触发。 在事件监听器中返回false以停止 destroy 操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforehide : ( Ext.Component this )
在调用hide方法隐藏组件之前触发。 在事件监听器中返回false可以停止隐藏操作。
在调用hide方法隐藏组件之前触发。 在事件监听器中返回false可以停止隐藏操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforerender : ( Ext.Component this )
在组件被rendered 之前触发。 在事件监听器中返回false可以停止render 操作。
在组件被rendered 之前触发。 在事件监听器中返回false可以停止render 操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforeshow : ( Ext.Component this )
在调用show()方法现实组件之前触发。 事件处理函数返回false可以停止show。
在调用show 方法现实组件之前触发。 事件处理函数返回false可以停止show。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforestaterestore : ( Ext.Component this , Object state )
在组件状态恢复之前触发。返回false停止恢复状态操作。
在组件状态恢复之前触发。返回false停止恢复状态操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    StateProvider返回的状态哈希值。 如果没有禁止此事件，那么状态对象会被传递给applyState。 默认情况下，这样简单地把属性值拷贝到当前组件中。 可以覆盖此方法以提供自定的状态恢复操作。
Component
beforestatesave : ( Ext.Component this , Object state )
在组件状态被保存到配置的状态提供者之前触发。 返回false可以停止保存。
在组件状态被保存到配置的状态提供者之前触发。 返回false可以停止保存。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    状态值哈希。 这由在组件上调用getState() 方法决定。 此方法必须由开发者提供，返回是否需要对状态进行描述，默认情况下， Ext.Component有一个空实现。
Component
blur : ( Ext.form.Field this )
当表单项时区输入焦点时触发。
当表单项时区输入焦点时触发。
监听器将会以如下参数被调用:
  • this : Ext.form.Field
Field
change : ( Ext.form.RadioGroup this , Ext.form.Radio checked )
当一个子radio的状态改变时触发。
当一个子radio的状态改变时触发。
监听器将会以如下参数被调用:
  • this : Ext.form.RadioGroup
  • checked : Ext.form.Radio
    被选中的radio
RadioGroup
destroy : ( Ext.Component this )
在组件被销毁之后触发。
在组件被destroyed之后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
disable : ( Ext.Component this )
在组件被设置为无效状态后触发。
在组件被设置为无效状态后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
enable : ( Ext.Component this )
当组件被设置为有效(enabled)之后触发。
当组件被设置为有效(enabled)之后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
focus : ( Ext.form.Field this )
当表单项获得输入焦点时触发。
当表单项获得输入焦点时触发。
监听器将会以如下参数格式被调用:
  • this : Ext.form.Field
Field
hide : ( Ext.Component this )
在组件被隐藏之后触发。 当调用hide 方法隐藏组件之后触发。
在组件被隐藏之后触发。 当调用hide 方法隐藏组件之后触发。
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
invalid : ( Ext.form.Field this , String msg )
在表单项被标记为非法之后触发。
在表单项被标记为非法之后触发。
监听器将会以如下参数格式调用:
  • this : Ext.form.Field
  • msg : String
    校验信息
Field
move : ( Ext.Component this , Number x , Number y )
在组件移动之后触发。
在组件移动之后触发。
监听器将会用如下的参数格式来调用:
  • this : Ext.Component
  • x : Number
    The new x position
  • y : Number
    The new y position
BoxComponent
removed : ( Ext.Component this , Ext.Container ownerCt )
当一个组件被从Ext.Container容器中删除时触发
当一个组件被从Ext.Container容器中删除时触发
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • ownerCt : Ext.Container
    持有组件的容器
Component
render : ( Ext.Component this )
在组件被渲染之后触发。
在组件被 rendered(渲染) 之后触发。
监听器将以如下的参数格式被调用:
  • this : Ext.Component
Component
resize : ( Ext.Component this , Number adjWidth , Number adjHeight , Number rawWidth , Number rawHeight )
在组件被调整大小之后触发。
在组件被调整大小之后触发。
监听器将以如下的参数格式被调用:
  • this : Ext.Component
  • adjWidth : Number
    这是width调整后的值
  • adjHeight : Number
    这是height调整后的值
  • rawWidth : Number
    这是width原来的值
  • rawHeight : Number
    这是height原来的值
BoxComponent
show : ( Ext.Component this )
在调用show 方法显示组件之后触发。
在调用show 方法显示组件之后触发。
监听器将会用如下的参数格式被调用:
  • this : Ext.Component
Component
specialkey : ( Ext.form.Field this , Ext.EventObject e )
当任何和导航有关的键被按下时触发(上下左右箭头, tab, 回车,esc, 等等) is pressed. 处理其它按键参见...
当任何和导航有关的键被按下时触发(上下左右箭头, tab, 回车,esc, 等等) is pressed. 处理其它按键参见 Ext.Panel.keys或者 Ext.KeyMap。 你可以检测 Ext.EventObject.getKey 以便获知哪个键被按下。例如：
var form = new Ext.form.FormPanel({
    ...
    items: [{
            fieldLabel: 'Field 1',
            name: 'field1',
            allowBlank: false
        },{
            fieldLabel: 'Field 2',
            name: 'field2',
            listeners: {
                specialkey: function(field, e){
                    // e.HOME, e.END, e.PAGE_UP, e.PAGE_DOWN,
                    // e.TAB, e.ESC, arrow keys: e.LEFT, e.RIGHT, e.UP, e.DOWN
                    if (e.getKey() == e.ENTER) {
                        var form = field.ownerCt.getForm();
                        form.submit();
                    }
                }
            }
        }
    ],
    ...
});
监听器将会以如下参数格式被调用:
  • this : Ext.form.Field
  • e : Ext.EventObject
    事件对象
Field
staterestore : ( Ext.Component this , Object state )
组件状态被存储之后触发。
组件状态被存储之后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    StateProvider返回的状态哈希值。 如果没有禁止此事件，那么状态对象会被传递给applyState。 默认情况下，这样简单地把属性值拷贝到当前组件中。 可以覆盖此方法以提供自定的状态恢复操作。
Component
statesave : ( Ext.Component this , Object state )
在组件状态被保存到所配置的状态提供者之后触发。
在组件状态被保存到所配置的状态提供者之后触发。
监听器将会用如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    状态值hash。 这是由在足见上调用getState() 方法决定的。 开发者必须提供此方法以返回是否需要恢复状态，默认情况下， Ext.Component有一个空实现。
Component
valid : ( Ext.form.Field this )
在表单项被校验无错误之后触发。
在表单项被校验无错误之后触发。
监听器将会以如下参数格式被调用:
  • this : Ext.form.Field
Field


Observable
    Component
      BoxComponent
        Field
          SliderField

Class Ext.form.SliderField

包: | Ext.form
定义类的文件: | SliderField.js
类: | SliderField
继承自: | Field
包装好的Slider可以用来作为form中的一个字段。

配置项

Config Options Defined By
allowDomMove : Boolean
在渲染时组件是否可以移动Dom节点(默认为true)。
Component
anchor : String
注: 这个配置只用于该组件被包含在一个已使用AnchorLayout...

注: 这个配置只用于该组件被包含在一个已使用 AnchorLayout (或者其子类)配置的Container时。 基于布局管理器，例如：

  • Ext.form.FormPanel
  • 指定 layout: 'anchor' // or 'form', or 'absolute'

参见 Ext.layout.AnchorLayout. anchor 。

BoxComponent
applyTo : Mixed
指定一个元素的id、一个DOM元素或者一个已经存在并被渲染到DIV中的元素，此DIV已经被...

指定一个元素的id、一个DOM元素或者一个已经存在并被渲染到DIV中的元素，此DIV已经被 渲染到document中，并且为当前组件指定了一些结构化的标签。

  • 描述 :
      当使用了 applyTo， 在主元素中也可以用id或者CSS类名来指定组件的托管部分， 并且，如果可以的话，创建的组件可能也会试图在那个标签中创建它的子组件。
  • 注意 :
      当使用此配置项时，无需调用render()方法。
      如果指定了applyTo属性，任何传递给 renderTo 的值都会被忽略，并且目标元素的父节点将会自动被用作组件的容器。
Component
autoCreate : String/Object
一个DomHelper 元素描述，或者为true使用一个默认元素描述。 用来创建封装当前组件的...

一个DomHelper 元素描述，或者为true使用一个默认元素描述。 用来创建封装当前组件的 Element。 细节参见 autoEl 。 默认为:

                                {tag: 'input', type: 'text', size: '20', autocomplete: 'off'}
Field
autoEl : Mixed
一个表签名或者一个 DomHelper 描述，用来创建 Element ，它将封装当前组件...

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

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

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

{
    xtype: 'box',
    autoEl: {
        tag: 'img',
        src: 'http://www.example.com/example.jpg'

    }
}, {
    xtype: 'box',
    autoEl: {
        tag: 'blockquote',
        html: 'autoEl is cool!'
    }
}, {
    xtype: 'container',
    autoEl: 'ul',
    cls: 'ux-unordered-list',
    items: {
        xtype: 'box',
        autoEl: 'li',
        html: 'First list item'
    }
}
Component
autoHeight : Boolean
如果值为true，height配置项为'auto'，否则值为false的话使用固定的高度...

如果值为true，height配置项为'auto'，否则值为false的话使用固定的高度， 或者可以由其父类容器 layout manager来控制。(默认值为 false)。

注: 虽然很多组件继承了这个配置选项，但不是所有这些组件的自适应高度配置都会像期望的那样起作用。 设置autoHeight：值为true时，浏览器将根据元素的内容自动设置高度，这将意味着Ext不会去管理高度。

如果是由浏览器来管理高度，需要注意的是，通过浏览器进行调整的结构组件内不能被发现， 因此宽度的变化可能导致需要进行同步处理元素的高度。 例如：

var w = new Ext.Window({
    title: 'Window',
    width: 600,
    autoHeight: true,
    items: {
        title: 'Collapse Me',
        height: 400,
        collapsible: true,
        border: false,
        listeners: {
            beforecollapse: function() {
                w.el.shadow.hide();
            },
            beforeexpand: function() {
                w.el.shadow.hide();
            },
            collapse: function() {
                w.syncShadow();
            },
            expand: function() {
                w.syncShadow();
            }
        }
    }
}).show();
BoxComponent
autoScroll : Boolean
如果值为true，将会在该元素上使用overflow:'auto'配置，并且在必要的时候...
如果值为true，将会在该元素上使用overflow:'auto'配置，并且在必要的时候自动显示滚动条，否则，溢出部分的组件都会被切除(默认值为 false)。
BoxComponent
autoShow : Boolean
如果组件需要检测隐藏CSS属性(如 'x-hidden' 或者 'x-hide-display')并且在渲染时删除...
如果组件需要检测隐藏CSS属性(如 'x-hidden' 或者 'x-hide-display')并且在渲染时删除它们 (默认为false)，设置此值为true。
Component
autoWidth : Boolean
如果为true，使用width:'auto'配置，否则使用固定的宽度...

如果为true，使用width:'auto'配置，否则使用固定的宽度，或者可以由其父类容器的layout manager来控制。(默认值为 false)。

注: 虽然很多组件继承了这个配置选项，但不是所有这些组件的自适应宽度配置都会像期望的那样起作用。 设置autoWidth：值为true时，浏览器将根据元素的内容自动设置宽度，这将意味着Ext不会去管理宽度。

如果是由浏览器来管理宽度，需要注意的是，通过浏览器进行调整的结构组件内不能被发现，因此宽度的变化可能导致需要进行同步处理元素的宽度。 例如，在这个元素的目标是：

<div id='grid-container' style='margin-left:25%;width:50%'></div>
当浏览器窗口改变时，渲染后的Panel必须监听浏览器窗口大小的变化，以便通知子项，浏览器改变了其宽度：

var myPanel = new Ext.Panel({
    renderTo: 'grid-container',
    monitorResize: true, // relay on browser resize
    title: 'Panel',
    height: 400,
    autoWidth: true,
    layout: 'hbox',
    layoutConfig: {
        align: 'stretch'
    },
    defaults: {
        flex: 1
    },
    items: [{
        title: 'Box 1',
    }, {
        title: 'Box 2'
    }, {
        title: 'Box 3'
    }],
});
BoxComponent
boxMaxHeight : Number
设置组件的最大高度值...

设置组件的最大高度值。

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

BoxComponent
boxMaxWidth : Number
设置组件的最大宽度值...

设置组件的最大宽度值。

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

BoxComponent
boxMinHeight : Number
设置组件的最小高度值...

设置组件的最小高度值。

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

BoxComponent
boxMinWidth : Number
设置组件的最小宽度值...

设置组件的最小宽度值。

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

BoxComponent
bubbleEvents : Array
一个事件数组，当这些事件被触发时，将会被冒泡到所有父容器中。参见....

一个事件数组，当这些事件被触发时，将会被冒泡到所有父容器中。参见 Ext.util.Observable.enableBubble。 默认为 []。

Component
clearCls : String
应用到特殊的clearing div的CSS类， 这个clearing div直接渲染到每个form field的包装器后面...

应用到特殊的clearing div的CSS类， 这个clearing div直接渲染到每个form field的包装器后面，以提供 清除field的功能(默认为 'x-form-clear-left')。

注意: 只有在当前组件被渲染到一个使用FormLayout 布局(例如 Ext.form.FormPanel 或者指定 layout:'form')的 容器中、或者是指定了一个fieldLabel 、或者指定isFormField=true 时此配置才有效。

另请参见 Ext.layout.FormLayout. fieldTpl。

Component
cls : String
一个可选的额外CSS类，它将被添加到当前组件的元素上(默认为'')...
一个可选的额外CSS类，它将被添加到当前组件的元素上(默认为'')。 此属性对于在组件上，或者它的任何使用标准CSS规则的孩子节点上， 添加定制的样式非常有用。
Field
contentEl : String
(可选)指定一个已存在的HTML元素，或者一个已存在HTML元素的...

(可选)指定一个已存在的HTML元素，或者一个已存在HTML元素的 id ，它们将被用作当前组件的内容。

  • 描述 :
    此配置选项被用来将一个已存在的HTML元素 插入到一个新组件(在组件渲染之后它简单地移动DOM元素) 的layout元素中，使它成为该组件的内容。
  • 注意 :
    指定的HTML元素将被append到组件的layout元素中， 在所有配置的 HTML 被插入之后， 并且，这样的话，在render事件 被触发时，document中将不再包含此元素。
    指定的HTML元素将不会参与组件所有可能使用的 layout 过程(译者注：指这些HTML元素 不会参与布局操作)。 它仅是HTML而已。布局操作实在孩子 items 上进行的。
    添加 x-hidden 或者 x-hide-display CSS类，以防在内容渲染到panel时发生闪烁。
Component
ctCls : String
一个可选的外部CSS样式，添加到这个组件的容器(默认值为 '')。 这个方法对于使用标准的CSS规则...

一个可选的外部CSS样式，添加到这个组件的容器(默认值为 '')。 这个方法对于使用标准的CSS规则，为组件或它的任何一个子组件添加特定的样式非常有用。 参见 Ext.layout.ContainerLayout和 extraCls 。

注意: ctCls 默认为 ''期望如下的类，它们将指定一个默认值:

  • Box Layout : 'x-box-layout-ct'
使用一个额外的CSS类配置以上的Class，它是append到默认对象上的。例如， 对于BoxLayout (Hbox and Vbox):
                                ctCls: 'x-box-layout-ct custom-class'

Component
data : Mixed
初始化数据集，它将被应用到 tpl 上以刷新组件的内容区域。
Component
disabled : Boolean
当前组件处于无效状态时为true。 Read-only.
Field
disabledClass : String
当组件处于无效状态时添加到组件上的CSS类(默认为 'x-item-disabled')。
Component
fieldClass : String
表单项的默认CSS类(默认为'x-form-field')
Field
fieldLabel : String
紧靠此field显示的标签文本(默认值为 '')。注意...

紧靠此field显示的标签文本(默认值为 '')。

注意:只有在当前组件被渲染到一个使用FormLayout 的容器中时，此配置才有效。 (例如 Ext.form.FormPanel 或 指定 layout:'form')。

另请参见 hideLabel 、 Ext.layout.FormLayout和 fieldTpl。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Name'
    }]
});
Component
flex : Number
注: 这个配置只用于该组件被包含在一个已使用BoxLayout配置的Container中时...

注: 这个配置只用于该组件被包含在一个已使用BoxLayout配置的Container中时。通过计算每一个子组件的flex值所占全部flex值之和的比例，来决定子组件的宽(HBoxLayout)高(VBoxlayout)。 任何子项的 flex = 0 或 flex = undefined 将不被设置(初始值大小将不被改变)。

BoxComponent
focusClass : String
当表单项获得焦点时使用的CSS类(默认为 'x-form-focus')
Field
height : Number
组件的高度(默认值为 auto)。注:如果想使用百分比的方式...
组件的高度(默认值为 auto)。注:如果想使用百分比的方式来设置值，请查看 Ext.Component.anchor。
BoxComponent
hidden : Boolean
如果当前组件处于隐藏状态，此值为true。Read-only。
Component
hideLabel : Boolean
true时完全隐藏label元素 ( label 和 separator)。 默认为 false。 默认情况下，即使你不指定...

true时完全隐藏label元素 ( label 和 separator)。 默认为 false。 默认情况下，即使你不指定 fieldLabel 它的空间仍然会被保留，这样这块区域会与其它确实拥有label的区域位于同一排。 讲此值设置为 true 将导致此区域不再保留此空间。

注意: 参见 clearCls 的注释。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield'
        hideLabel: true
    }]
});
Component
hideMode : String
组件如何隐藏，支持的值有： 'visibility' (css visibility), 'offsets' (位置偏移量为负值) 和...

组件如何隐藏，支持的值有： 'visibility' (css visibility), 'offsets' (位置偏移量为负值) 和 'display' (css display).

注意:一般首选默认值 'display'，因为当组件第一次显示的时候它们会自动进行布局 (隐藏的时候不会调整尺寸)。

Component
hideParent : Boolean
此值为true时，当调用hide/show方法时，将会hide和show组件的容器...
此值为true时，当调用hide/show方法时，将会hide和show组件的容器；false时将会 hide和show组件自身(默认为false)。例如，这可以用作window上隐藏按钮的一种 快捷操作，通过设置此按钮的hideParent:true，然后把它添加到window上。
Component
html : String/Object
一个HTML片段，或者一个 DomHelper 描述，用作layout元素的内容(默认为'')。...
一个HTML片段，或者一个 DomHelper 描述，用作layout元素的内容(默认为'')。 这个HTML内容在组件渲染之后才被添加，所以在 render 出发的时候，document中尚未包含此HTML。 但是这个内容将会在所有配置的 contentEl 之前被插入到body标签中。
Component
id : String
当前组件唯一的id(默认为auto-assigned id)...

当前组件唯一的id(默认为auto-assigned id)。 如果你需要在以后访问组件，而又没有一个有效的组件对象引用，那么你需要指定一个 id( 也就是，使用Ext. getCmp方法 )。

注意，此id也将被用作组件底层HTML标签的id，这些标签被渲染到页面中。 这将允许你编写基于id的CSS规则，以独立地描述指定的实例；并且，也可以通过 组件父标签的id选中子元素。

注意:为了避免与唯一的id 产生重复， 请参见 itemId 和 ref 。

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

Component
inputType : String
输入栏的类型属性---例如radio,text,password,file(默认为'text')。...
输入栏的类型属性---例如radio,text,password,file(默认为'text')。 'file'和'password'类型通常必须用来渲染那些没有独立Ext组件的表单项类型。 注意，如果你使用inputType:'file'， 那么将不再支持 emptyText 并且应该避免使用。
Field
invalidClass : String
当把表单项标记为非法时所使用的CSS类(默认为'x-form-invalid')
Field
invalidText : String
当把一个表单项标记为非法状态并且没有提供消息时所使用的出错文本...
当把一个表单项标记为非法状态并且没有提供消息时所使用的出错文本 (默认为'The value in this field is invalid')
Field
itemCls : String
注意: 只有在当前组件被渲染到一个使用FormLayout 布局的 容器中时此配置才有效...

注意: 只有在当前组件被渲染到一个使用FormLayout 布局的 容器中时此配置才有效。 (例如Ext.form.FormPanel 或者指定 layout:'form')。

一个附加的CSS类，应用到div上，包装当前field的表单元素。 如果提供了此参数， field级上的itemCls将会覆盖 container级上提供的 默认itemCls。 为itemCls指定的值将会被添加默认的 类('x-form-item')。

既然它被应用到项目的包装器上(参见 Ext.layout.FormLayout。 fieldTpl)， 它将允许你编写能应用到此field、label(如果有指定)、或者field内部任何其它元素的标准CSS规则。

注意: 参考 fieldLabel的注释。 .

示例用法:

// Apply a style to the field's label:
<style>
    .required .x-form-item-label {font-weight:bold;color:red;}
</style>

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Name',
        itemCls: 'required' //this label will be styled
    },{
        xtype: 'textfield',
        fieldLabel: 'Favorite Color'
    }]
});
Component
itemId : String
当没有可利用的对象引用时，itemId可以作为第二选择，用来获得一个组件的引用， 代替 ...

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

var c = new Ext.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'); // 与 Ext.getCmp()不同

p2 = p1.ownerCt.getComponent('p2'); // 通过兄弟对象获得引用

另请参见 id 和 ref 。

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

Component
labelSeparator : String
每个fieldLabel 文本后面现实的分隔符。 此属性可以在多个层次上进行配置...

每个fieldLabel 文本后面现实的分隔符。 此属性可以在多个层次上进行配置。优先顺序为：

  • field / component level
  • container level
  • layout level (默认为冒号 ':')
如不需要为当前field的label显示分隔符，指定一个空字符串''即可。

注意:参见 clearCls 的注释。

另请参见 hideLabel 和 Ext.layout.FormLayout。 fieldTpl。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    layoutConfig: {
        labelSeparator: '~'   // layout config has lowest priority (defaults to ':')
    },
    labelSeparator: '>>',     // config at container level
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Field 1',
        labelSeparator: '...' // field/component level config supersedes others
    },{
        xtype: 'textfield',
        fieldLabel: 'Field 2' // labelSeparator will be '='

    }]
});
Component
labelStyle : String
一个CSS样式描述字符串，它将直接应用到当前field的label上...

一个CSS样式描述字符串，它将直接应用到当前field的label上。 如果有设置，默认为容器的labelStyle值(例如 Ext.layout.FormLayout.labelStyle , 或者 '')。

注意:参见 clearCls 的注释。

另请参见 hideLabel 和 Ext.layout.FormLayout. fieldTpl。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Name',
        labelStyle: 'font-weight:bold;'
    }]
});
Component
listeners : Object
一个包含一个或多个事件处理器的配置对象，会在初始化的时候被添加到目标对象上...

一个包含一个或多个事件处理器的配置对象，会在初始化的时候被添加到目标对象上。 该配置对象应该是一个有效的监听器配置对象就像 addListener例子中指定的一样可一次附加多个处理器。

ExtJs Components上的DOM事件

一些 ExtJs Component 类导出时会选择一些DOM事件(例如 "click", "mouseover" 等等), 这通常只是在有额外的值可以被添加时发生。例如DataView类的 click事件会传递被点击的节点。也可以直接在Component的HTMLElementevent上访问DOM事件，但必需在Component被渲染后监听器才能添加到Element 上。可以按照以下步骤添加插件:

// 插件会用一个监听器配置对象进行配置。
//该组件会被添加到所有处理方法的参数列表上。
Ext.DomObserver = Ext.extend(Object, {
    constructor: function(config) {
        this.listeners = config.listeners ? config.listeners : config;
    },

    // 组件将自己传递进了插件的初始化方法里
    init: function(c) {
        var p, l = this.listeners;
        for (p in l) {
            if (Ext.isFunction(l[p])) {
                l[p] = this.createHandler(l[p], c);
            } else {
                l[p].fn = this.createHandler(l[p].fn, c);
            }
        }

        // 渲染后立即添加监听器到元素上
        c.render = c.render.createSequence(function() {
            var e = c.getEl();
            if (e) {
                e.on(l);
            }
        });
    },

    createHandler: function(fn, c) {
        return function(e) {
            fn.call(this, e, c);
        };
    }
});

var combo = new Ext.form.ComboBox({

    // 元素被点击后折叠
    plugins: [ new Ext.DomObserver({
        click: function(evt, comp) {
            comp.collapse();
        }
    })],
    store: myStore,
    typeAhead: true,
    mode: 'local',
    triggerAction: 'all'
});

Observable
margins : Object
注:此配置只用于该组件展现在一个使用BorderLayout...

注:此配置只用于该组件展现在一个使用BorderLayout 或 BoxLayout的两个子类之一作为布局的容器。

这个margins对象在该组件中的格式为：

{top: (top margin),right: (right margin),bottom: (bottom margin),left: (left margin)}

也可以是一个字符串，中间用空格分隔，margin值为数字。 把matches中每一个值的次序跟CSS中margin值的排列方式相对应：

  • 如果只有一个值，它适用于所有方面。
  • 如果有两个值，top和bottom的边框设置为第一个值，left和right设置为第二个值。
  • 如果有三个值，top设置为第一个值，left和right设置为第二个值，bottom设置为第三个值。
  • 如果有四个值，分别设置为top, right, bottom, left。

默认值:

{top:0, right:0, bottom:0, left:0}
BoxComponent
msgFx : String
实验性参数 当在表单项下显示校验消息时使用的效果(默认为'normal')。
Field
msgTarget : String
通过markInvalid 设置的消息文本应该显示的位置。 必须是如下值之一：...

通过markInvalid 设置的消息文本应该显示的位置。 必须是如下值之一：

  • qtip 当用户鼠标滑过表单项时，显示一个包含消息的快速提示。 这是默认情况。
    为了使此参数能工作，必须调用 Ext.QuickTips.init。
  • title 在弹出的默认浏览器标题属性上显示消息。
  • under 在表单项之下添加一块div，包含出错消息。
  • side 在表单项右边添加一个出错图标，当鼠标滑过时弹出并显示一个消息。
  • [element id] 在指定元素的innerHTML中直接添加出错消息。
Field
name : String
表单项的HTML name属性(默认为'')。 注意: 如果需要当前表单项自动被包含在...
表单项的HTML name属性(默认为'')。 注意: 如果需要当前表单项自动被包含在 form submit()中，必须设置此参数。
Field
overCls : String
一个可选的额外的CSS类，它将在鼠标移过元素时被添加到组件上...
一个可选的额外的CSS类，它将在鼠标移过元素时被添加到组件上，鼠标移出时 删除。(默认为'')。此属性对于在组件上，或者它的任何使用标准CSS规则的孩子节点上， 添加定制的'active' 或者 'hover'样式非常有用。
Component
pageX : Number
如果该组件被包含在一个指定位置的容器中，这个值表示页面级的x坐标值（译者注：在有滚动条的情况下这个值很有用）。
BoxComponent
pageY : Number
如果该组件被包含在一个指定位置的容器中，这个值表示页面级的y坐标值（译者注：在有滚动条的情况下这个值很有用）。
BoxComponent
plugins : Object/Array
一个对象或者一个对象数组，为组件提供特殊的功能 ...
一个对象或者一个对象数组，为组件提供特殊的功能。 对一个合法的插件唯一的要求是它含有一个init()方法， 能接收一个Ext.Component型的参数。 当组件被创建时，如果有可用的插件，组件将会调用每个插件的init方法， 并将自身的引用作为方法参数传递给它。然后，每个插件就可以调用方法或者响应组件上的事件， 就像需要的那样提供自己的功能。
Component
preventMark : Boolean
true将会禁止 把表单项标记为非法。默认为false.
Field
ptype : String
需要创建配置的ptype。 当传递一个配置对象给构造函数时...
需要创建配置的ptype。 当传递一个配置对象给构造函数时，此配置选项不会被使用。 只有在使用懒初始化的时候此配置项才会被使用， 此时Plugin不是 通过一个完整的实例组件，而是通过一个Component配置指定的。 在渲染时，将会查找ptype以决定创建何种类型的Plugin。

如果你创建自己的Plugin，你可以通过 Ext.ComponentMgr.registerPlugin 对它们进行注册，以便能利用懒初始化和渲染机制。
Component
readOnly : Boolean
将会把表单项标记为在HTML中只读(readOnly)(默认为false)...
true 将会把表单项标记为在HTML中只读(readOnly)(默认为false)。

Note: 这仅仅设置元素的readOnly DOM参数。 例如，设置 readOnly=true ，将不会禁用触发ComboBox或者DateField； 这为你提供了一个选项，可以强制用户通过触发按钮选择一个值，而不是 在文本框进行输入。 使用 hideTrigger 可以隐藏触发按钮。

Field
ref : String
一个路径描述，与组件的 ownerCt 相关，它描述了把当前组件的命名引用放置到哪个父容器中去。...

一个路径描述，与组件的 ownerCt 相关，它描述了把当前组件的命名引用放置到哪个父容器中去。

祖先的坐标路径可以通过'/'字符进行分隔。 例如，将一个Toolbar Button的引用放入 拥有此Toolbar的Panel中:

var myGrid = new Ext.grid.EditorGridPanel({
    title: 'My EditorGridPanel',
    store: myStore,
    colModel: myColModel,
    tbar: [{
        text: 'Save',
        handler: saveChanges,
        disabled: true,
        ref: '../saveButton'
    }],
    listeners: {
        afteredit: function() {
//          The button reference is in the GridPanel
            myGrid.saveButton.enable();
        }
    }
});

在上面的代码中，如果 ref 是 'saveButton' ，那么引用将会被放置到Toolbar中。 ref 中的每个'/' 都会从组件的 ownerCt 向上移动一级。

另请参见 added 和 removed 事件。

Component
region : String
注: 此配置只用于该组件展现在一个布局为BorderLayout的容器中...

注: 此配置只用于该组件展现在一个布局为BorderLayout的容器中(例如指定layout:'border')。

详见Ext.layout.BorderLayout。

BoxComponent
renderTo : Mixed
该值可以是一个节点的id、一个DOM节点或者一个已存在的元素...

该值可以是一个节点的id、一个DOM节点或者一个已存在的元素， 组件将会被渲染到其中。

  • 注意 :
      如果组件不是一个Container 的子项目时， 不要使用此选项。 渲染和管理它的子项目是一个Container 的layout manager的责任。
      当使用此配置项时，无需调用render()方法。

另请参见 render 。

Component
stateEvents : Array
一个事件数组，当它们被触发时，组件需要保存自己的状态(默认值为 none)...

一个事件数组，当它们被触发时，组件需要保存自己的状态(默认值为 none)。 它们可以是任何该组件支持的事件类型，包括浏览器事件和 自定义事件(例如['click', 'customerchange'])。

对于保存和恢复组件状态的详细解释，参见 stateful

Component
stateId : String
为该组件指定的唯一的id值，它被用作管理组件状态的目的...
为该组件指定的唯一的id值，它被用作管理组件状态的目的。 (如果设定了id，默认值为组件自己的id，否则，如果组件使用自动生成的id，此值为null)。

对于保存和反解析组件状态的解释，参见 stateful 。

Component
stateful : Boolean
一个标志参数，它将引起组件在启动时尝试从一个保存的状态中恢复内部状态参数...

一个标志参数，它将引起组件在启动时尝试从一个保存的状态中恢复内部状态参数。 组件必须要么拥有一个 stateId 或者 id ，它们被分配给需要被管理的状态属性。 在跨页面加载时，不保证自动生成的id属性的稳定性， 并且，不能依赖此id来保存和恢复一个组件的相同状态。

为了保存状态的操作能够工作，状态管理器的提供者必须 被设置成一个Ext.state.Provider 的实现类，它覆盖了set 和get 方法，以便保存和恢复name/value对。 有一个内置的Ext.state.CookieProvider 可用。

为当前页面设置状态提供者:

Ext.state.Manager.setProvider(new Ext.state.CookieProvider({
    expires: new Date(new Date().getTime()+(1000*60*60*24*7)), //7 days from now
}));

当 stateEvents 配置项中其中之一的事件被触发时， 一个状态可保存的组件将试图保存其状态。

保存状态时，一个可保存状态的组件首先需要通过调用 getState 方法来序列化它的状态。 默认情况下，此函数什么事都不做。 开发者必须提供一个实现，返回一个hash对象，它描述了组件可恢复的状态。

getState方法产生的值将会传递给 Ext.state.Manager.set 方法，它使用配置的 Ext.state.Provider 来保存对象，以组件的 stateId 为key，或者，如果此值（指stateId）没有指定时， 使用它的 id 作为key。

在进行构造时，一个可保存状态的组件试图通过调用 Ext.state.Manager.get方法来 恢复它的状态，传递 stateId 或者，如果此值（指stateId）没有指定时， 使用它的 id 作为参数。

结果对象被传递给 applyState 。 applyState 的默认实现只是简单地把属性拷贝到对象中， 但是开发者可以覆盖此方法以支持更多行为。

通过向 beforestaterestore, staterestore, beforestatesave 和 statesave 事件上绑定监听器，你可以在保存和恢复状态时进行额外的处理。

Component
style : String
被添加到组件元素的特定样式。 必须是按照...
被添加到组件元素的特定样式。 必须是按照 Ext.Element.applyStyles 类指定格式的合法参数值。

new Ext.Panel({
    title: 'Some Title',
    renderTo: Ext.getBody(),
    width: 400, height: 300,
    layout: 'form',
    items: [{
        xtype: 'textarea',
        style: {
            width: '95%',
            marginBottom: '10px'
        }
    },
        new Ext.Button({
            text: 'Send',
            minWidth: '100',
            style: {
                marginBottom: '10px'
            }
        })
    ]
});
Component
submitValue : Boolean
False将会清除表单项的name属性，这样在提交表单时它将不会被提交。 默认为true。
Field
tabIndex : Number
该表单项的tabIndex。 注意，此属性仅仅应用到被渲染好的，而不是那些通过applyTo...
该表单项的tabIndex。 注意，此属性仅仅应用到被渲染好的，而不是那些通过applyTo创建的表单项 (默认为undefined)。
Field
tabTip : String
注: 这个配置只用于当该组件作为TabPanel的一个子项目时使用...

注: 这个配置只用于当该组件作为TabPanel的一个子项目时使用。

一个String类型的innerHTML(支持html标签)，当鼠标放在该选项上的时，显示一个tooltip。为了tips能够被渲染，Ext.QuickTips.init()必须被提前调用。
BoxComponent
tipText : Function
一个函数用于显示滑块上自定义的提示文本。默认值为null，这将使用默认的插件。
一个函数用于显示滑块上自定义的提示文本。默认值为null，这将使用默认的插件。
SliderField
tpl : Mixed
一个 Ext.Template , Ext.XTemplate 或者一个用来形成一个Ext.XTemplate的字符串数组...
一个 Ext.Template , Ext.XTemplate 或者一个用来形成一个Ext.XTemplate的字符串数组。 与 data 和 tplWriteMode 配置项协同使用。
Component
tplWriteMode : String
刷新组件的内容区域时使用的Ext.(X)Template方式。 默认为'overwrite' (参见 Ext.XTemplate.overwrite )。
刷新组件的内容区域时使用的Ext.(X)Template方式。 默认为'overwrite' (参见 Ext.XTemplate.overwrite )。
Component
useTips : Boolean
设置为true，使用Ext.slider.Tip显示提示的值。默认值为true。
SliderField
validateOnBlur : Boolean
在表单项失去焦点时是否进行校验(默认为 true)。
Field
validationDelay : Number
在用户开始输入到校验操作开始之间的时长毫秒数 (默认为250)
Field
validationEvent : String/Boolean
引发表单项进行校验操作的事件。 设置为false可以禁用自动校验 (默认为'keyup')。
引发表单项进行校验操作的事件。 设置为false可以禁用自动校验 (默认为'keyup')。
Field
value : Mixed
当前表单项的初始化值(默认为undefined).
Field
width : Number
组件的宽度(默认值为 auto)。注:如果想使用百分比的方式...
组件的宽度(默认值为 auto)。注:如果想使用百分比的方式来设置值，请查看 Ext.Component.anchor。
BoxComponent
x : Number
如果被包含在一个指定位置的容器中，这个值表示x(left)坐标值。
BoxComponent
xtype : String
需要创建配置的xtype。 当传递一个配置对象给构造函数时...
需要创建配置的xtype。 当传递一个配置对象给构造函数时，此配置选项不会被使用。 只有在使用懒初始化的时候此配置项才会被使用，此时容器的子项目不是 通过一个完整的实例组件，而是通过一个Component配置指定的。 在渲染时，将会查找xtype以决定创建何种类型的子组件。

预定义的xtype列表如下： here。

如果你继承Component创建你自己的组件，你需要使用Ext.ComponentMgr.registerType 对它们进行注册，以便利用懒初始化和渲染机制。
Component
y : Number
如果被包含在一个指定位置的容器中，这个值表示y(top)坐标值。
BoxComponent

公共属性

Property Defined By
disabled : Boolean
当前组件处于无效状态时为true。 Read-only.
Component
el : Ext.Element
封装了当前组件的Ext.Element。 Read-only。通常情况下，这将是一个<DIV>元素，它由此类的...

封装了当前组件的Ext.Element。 Read-only。

通常情况下，这将是一个<DIV>元素，它由此类的 onRender方法创建，但是它可以通过使用 autoEl 配置项进行覆盖。

注意: 直到组件渲染完成此元素都将处于无效状态。

如需向当前组件的 DOM事件(而不是当前组件自己的Observable事件)添加监听器， 更多建议，参见 listeners 配置项，或者直接使用一个render监听器:

new Ext.Panel({
    title: 'The Clickable Panel',
    listeners: {
        render: function(p) {
            // Append the Panel to the click handler's argument list.
            p.getEl().on('click', handlePanelClick.createDelegate(null, [p], true));
        },
        single: true  // Remove the listener after first invocation
    }
});

另请参见 getEl

Component
hidden : Boolean
如果当前组件处于隐藏状态，此值为true。Read-only。
Component
initialConfig : Object
当前组件的初始化配置描述。 Read-only。
Component
label : Ext.Element
关联到当前表单项的label元素。 只有在当前表单项已经被一个Ext.layout.FormLayout ...

关联到当前表单项的label元素。 只有在当前表单项已经被一个Ext.layout.FormLayout 布局管理器渲染之后才可用。

Field
originalValue : mixed
表单项原来的值，它是在value 中配置的；或者，如果 trackResetOnLoad 设置为...
表单项原来的值，它是在value 中配置的；或者，如果 trackResetOnLoad 设置为 true 时，通过表单加载操作最后一次加载的。
Field
ownerCt : Ext.Container
组件所属的Container (默认为undefined，当前组件被添加到一个容器中时此值被自动设置)...
组件所属的Container (默认为undefined，当前组件被添加到一个容器中时此值被自动设置)。 Read-only。

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

Component
refOwner : Ext.Container
如果当前组件是一个容器的孩子，并且是通过一个 ref 配置项被注册的，则此值为 ref 引用被插入到的祖先容器。
如果当前组件是一个容器的孩子，并且是通过一个 ref 配置项被注册的，则此值为 ref 引用被插入到的祖先容器。
Component
rendered : Boolean
如果当前组件已经被渲染了，此值为true。Read-only.
Component
startValue : mixed
表单项最后一次获得焦点时所拥有的值。 这就是传递给change 事件的值...

表单项最后一次获得焦点时所拥有的值。 这就是传递给change 事件的值，此事件在值被改变并失去焦点时触发。

直到表单项被访问之前此值都是undefined 与originalValue 进行比较。

Field

公共方法

Method Defined By
SliderField ( Object config )
创建一个新的SliderField
创建一个新的SliderField
参数:
  • config : Object
    配置选项。注意，您可以通过任何字段的配置选项那样来配置任何滑块的配置选项。
返回值:
  • void
SliderField
addClass ( string cls ) : Ext.Component
为组件底层的元素添加CSS样式。
为组件底层的元素添加CSS样式。
参数:
  • cls : string
    需要添加的CSS样式的class名称
返回值:
  • Ext.Component
    this
Component
addEvents( Object|String o, string Optional. ) : void
添加指定的事件到事件列表上，事件会被该Observable触发。
添加指定的事件到事件列表上，事件会被该Observable触发。
参数:
  • o : Object|String
    以事件名作为属性true作为值的对象 或者当多个事件名被分开的传递时则为第一个事件名。
  • Optional. : string
    事件名被分开的传递时则为事件名。 用法:
    this.addEvents('storeloaded', 'storecleared');
返回值:
  • void
Observable
addListener( String eventName, Function handler, [Object scope], [Object options] ) : void
给对象添加事件处理器。
给对象添加事件处理器。
参数:
  • eventName : String
    监听的事件名。
  • handler : Function
    事件调用的方法
  • scope : Object
    （可选）处理方法执行的作用域 (this的引用 reference)。 如果被忽略。默认为触发事件的对象。
  • options : Object
    （可选）包含处理器配置和属性的对象。 可能包含以下的属性:
    • scope : Object
      处理方法执行的作用域(this的引用) 。 如果被忽略。默认为触发事件的对象。
    • delay : Number
      在触发事件后延迟调用处理器的毫秒数。
    • single : Boolean
      如果为True则添加一个处理器来处理下一次的事件触发（仅一次），然后移除自己。
    • buffer : Number
      使得处理器延迟指定毫秒数后预定的运行在 一个Ext.util.DelayedTask中 。 如果事件在时间内再一次被触发，原始的处理器不会被调用，但是新的处理器会预定的在他的位置上。
    • target : Observable
      如果事件在目标的Observable上触发则仅仅调用处理器， 否则 事件会从子类的Observable上冒泡

    组合选项
    使用这些选项参数,可能会组合出不同类型的监听器：

    一个延迟的，一次性的监听器。

    myDataView.on('click', this.onClick, this, {
single: true,
delay: 100
});

    一次调用附加多个处理器
    该方法同样支持传递一个包含指定的多个处理器的属性的配置对象参数。

    myGridPanel.on({
'click' : {
    fn: this.onClick,
    scope: this,
    delay: 100
},
'mouseover' : {
    fn: this.onMouseOver,
    scope: this
},
'mouseout' : {
    fn: this.onMouseOut,
    scope: this
}
});

    或者一个简写的语法：

    myGridPanel.on({
'click' : this.onClick,
'mouseover' : this.onMouseOver,
'mouseout' : this.onMouseOut,
 scope: this
});
返回值:
  • void
Observable
applyToMarkup ( String/HTMLElement el ) : void
将此组件添加到已存在的有效的HTML标签中。 使用该方法时，无需再调用render()方法。
将此组件添加到已存在的有效的HTML标签中。 使用该方法时，无需再调用render()方法。
参数:
  • el : String/HTMLElement
返回值:
  • void
Component
clearInvalid () : void
清除当前表单项上的所有非法styles/messages(样式/消息)
清除当前表单项上的所有非法styles/messages(样式/消息)
参数:
  • 无。
返回值:
  • void
Field
cloneConfig ( Object overrides ) : Ext.Component
默认使用原先传递给当前实例的配置值克隆当前组件。
默认使用原先传递给当前实例的配置值克隆当前组件。
参数:
  • overrides : Object
    一个新的配置项，包含需要覆盖到克隆版本的所有属性。 可以传递一个id参数给此对象，否则将自动生成一个新的id以避免发生重复。
返回值:
  • Ext.Component
    当前组件的克隆副本
Component
destroy () : void
通过如下方法销毁对象：删除所有的事件监听器、将组件的元素从DOM树中删除...
通过如下方法销毁对象：删除所有的事件监听器、将组件的元素从DOM树中删除（如果可以）、 将组件从它的 Ext.Container（如果可用）中删除、 并且将它从Ext.ComponentMgr中 注销。 销毁操作一般由框架自动完成，一般情况下不需要直接调用该方法。
参数:
  • 无。
返回值:
  • void
Component
disable () : Ext.Component
将组件置为无效状态，并出发'disable'事件。
将组件置为无效状态，并出发'disable'事件。
参数:
  • 无。
返回值:
  • Ext.Component
    this
Component
enable () : Ext.Component
将组件置为有效状态并触发'enable'事件。
将组件置为有效状态并触发'enable'事件。
参数:
  • 无。
返回值:
  • Ext.Component
    this
Component
enableBubble( String/Array events ) :void
是否现在使得事件会被该Observable触发并调用 this.getBubbleTarget()方法在拥有者的继承树...

是否现在使得事件会被该Observable触发并调用 this.getBubbleTarget()方法在拥有者的继承树中冒泡。Observable的基础类中没有该方法的实现。

该方法一般被Ext.Components用来冒泡事件到拥有者的容器。参看Ext.Component.getBubbleTarget默认的实现 在Ext.Component中返回组件的直接拥有者。但是如果需要的是一个已知的目标，该方法可以被重写来更快的访问需求的目标。

例子:

Ext.override(Ext.form.Field, {
    // 添加方法到Field的initComponent上改变事件为冒泡
    initComponent : Ext.form.Field.prototype.initComponent.createSequence(function() {
        this.enableBubble('change');
    }),

    // 我们知道我们想让Field的事件冒泡到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() {
            // 如果样式被修改标题会变红。
            myForm.header.setStyle('color', 'red');
        }
    }
});
参数:
  • events : String/Array
    冒泡的事件名，或事件名数组
返回值:
  • void
Observable
findParentBy ( Function fn ) : Ext.Container
通过自定义的函数查找当前组件上层任何层次上的容器...
通过自定义的函数查找当前组件上层任何层次上的容器。 如果传递的函数返回true，容器对象将被返回。
参数:
  • fn : Function
    自定义的函数，使用如下参数调用(container,this component)。
返回值:
  • Ext.Container
    自定义函数返回true的第一个容器
Component
findParentByType ( String/Class xtype ) : Ext.Container
通过xtype或者class查找当前组件上层任何层次上的容器
通过xtype或者class查找当前组件上层任何层次上的容器
参数:
  • xtype : String/Class
    组件的xtype字符串，或者直接是组件的class
返回值:
  • Ext.Container
    符合指定xtype或者class的第一个容器
Component
fireEvent( String eventName, Object... args ) : Boolean
用传入的参数触发指定的事件 (减去事件名)。 一个事件可以被设置为冒泡 Obse...

用传入的参数触发指定的事件 (减去事件名)。

一个事件可以被设置为冒泡到Observable父类继承树(参看 Ext.Component.getBubbleTarget) 调用enableBubble实现。

参数:
  • eventName : String
    触发的事件名。
  • args : Object...
    传递给处理器的可变长度参数。
返回值:
  • Boolean
    如果有任何的处理器返回false则返回false，否则返回true。
Observable
focus ( [ Boolean selectText ], [ Boolean/Number delay ] ) : Ext.Component
尝试将当前组件设为焦点。
尝试将当前组件设为焦点。
参数:
  • selectText : Boolean
    (可选) 如果可用，同时选中组件内部的文本
  • delay : Boolean/Number
    (可选)将当前组件设置为焦点的延迟时间(设置为true等于0毫秒)
返回值:
  • Ext.Component
    this
Component
getActiveError () : String
获取当前表单项活动的出错消息。
获取当前表单项活动的出错消息。
参数:
  • 无。
返回值:
  • String
    返回表单项上活动的出错消息，如果没有错误，返回一个空字符串。
Field
getBox ( [ Boolean local ] ) : Object
获取组件底层元素当前盒子模型的尺寸。（译者注：盒子模型是CSS术语，详细解释请自行搜索。）
获取组件底层元素当前盒子模型的尺寸。（译者注：盒子模型是CSS术语，详细解释请自行搜索。）
参数:
  • local : Boolean
    (可选)值为true时，组件的left值和top值将代替页面的XY被返回。(默认值为false)
返回值:
  • Object
    返回值的格式{x, y, width, height}
BoxComponent
getBubbleTarget () : Ext.Container
为Observable的fireEvent方法提供链接，它沿着继承结构进行冒泡操作。
为Observable的fireEvent方法提供链接，它沿着继承结构进行冒泡操作。
参数:
  • 无。
返回值:
  • Ext.Container
    拥有当前组件的容器。
Component
getEl () : Ext.Element
返回 Ext.Element ，它包装了当前组件。...

返回 Ext.Element ，它包装了当前组件。

通常情况下，这将是一个<DIV>元素，它是由该类的onRender方法创建的， 但是可以使用autoEl配置项 覆盖它。

注意: 此元素将会一直处于无效状态直到当前组件渲染完成。

如需向当前组件的 DOM事件(而不是当前组件自己的Observable事件)添加监听器， 更多建议，参见 listeners 配置项，或者直接使用一个render监听器:

new Ext.Panel({
    title: 'The Clickable Panel',
    listeners: {
        render: function(p) {
            // Append the Panel to the click handler's argument list.
            p.getEl().on('click', handlePanelClick.createDelegate(null, [p], true));
        },
        single: true  // Remove the listener after first invocation
    }
});
参数:
  • 无。
返回值:
  • Ext.Element
    包装当前组件的元素。
Component
getErrors () : Array
运行当前表单项的校验器并返回一个所有校验错误信息数组。 此方法在校验期间在内部调用并且一般情况下...
运行当前表单项的校验器并返回一个所有校验错误信息数组。 此方法在校验期间在内部调用并且一般情况下不需要手工调用。 每个子类都应该重写或者增加返回值以提供它们自己的出错消息
参数:
  • 无。
返回值:
  • Array
    当前表单项的所有出错消息
Field
getHeight () : Number
获取该组件的当前高度值。
获取该组件的当前高度值。
参数:
  • 无。
返回值:
  • Number
BoxComponent
getId () : String
返回当前组件的id，如果没有定义id，则自动生成并返回一个id:'ext-comp-'...
返回当前组件的 id 如果没有定义 id 则自动生成并返回一个 id

'ext-comp-' + (++Ext.Component.AUTO_ID)
参数:
  • 无。
返回值:
  • String
    id
Component
getItemId () : String
返回当前组件的 itemId 。 如果没有通过配置参数指定 itemId 那么，将会使用...
返回当前组件的 itemId 。 如果没有通过配置参数指定 itemId 那么，将会使用 getId 返回 id 。
参数:
  • 无。
返回值:
  • String
Component
getName () : String
如果可用，返回表单项的 name 或者 hiddenName 属性。
如果可用，返回表单项的 name 或者 hiddenName 属性。
参数:
  • 无。
返回值:
  • String
    name 表单项的{@link Ext.form.Field#name name}或者{@link Ext.form.ComboBox#hiddenName hiddenName}
Field
getOuterSize () : Object
获取当前组件所在元素的尺寸大小，包括边缘的空白处。
获取当前组件所在元素的尺寸大小，包括边缘的空白处。
参数:
  • 无。
返回值:
  • Object
    一个包含元素大小的对象 {width: (element width + left/right margins), height: (element height + top/bottom margins)}
BoxComponent
getPosition ( [ Boolean local ] ) : Array
获取组件底层元素当前的XY位置。
获取组件底层元素当前的XY位置。
参数:
  • local : Boolean
    (可选)如果为true，将返回元素的left和top值，而不是相对于页面内的 XY。(默认值为 false)
返回值:
  • Array
    元素的XY位置值(例如：[100, 200])
BoxComponent
getRawValue () : Mixed
返回原始数据值，可能不是一个合法的、已定义的值。 返回格式化的值参见...
返回原始数据值，可能不是一个合法的、已定义的值。 返回格式化的值参见 getValue。
参数:
  • 无。
返回值:
  • Mixed
    value 表单项的值
Field
getResizeEl () : Ext.Element
返回该组件的最外层用来定义这些组件整体大小的Element...

返回该组件的最外层用来定义这些组件整体大小的Element对象。

通常用 getEl 方法将会返回相同的Element对象，但在有些情况下，组件可能有一些更多的封装了它的主要动态Element对象的Element对象。

例如ComboBox。它是封装在一个包含<input>元素的包装元素里(这将返回其 getEl方法和触发按钮的元素)。返回的元素为resizeEl。

参数:
  • 无。
返回值:
  • Ext.Element
    The Element which is to be resized by size managing layouts.
BoxComponent
getSize () : Object
获取组件底层元素当前的大小。
获取组件底层元素当前的大小。
参数:
  • 无。
返回值:
  • Object
    一个包含元素大小的对象{width: (element width), height: (element height)}
BoxComponent
getValue () : Number
获取该字段的当前值。
获取该字段的当前值。
参数:
  • 无。
返回值:
  • Number
    当前值。
SliderField
getWidth () : Number
获取该组件的当前宽度值。
获取该组件的当前宽度值。
参数:
  • 无。
返回值:
  • Number
BoxComponent
getXType () : String
获取当前组件的xtype，它是用 Ext.ComponentMgr 注册的。 所有可用的xtype列表，参见...
获取当前组件的xtype，它是用 Ext.ComponentMgr 注册的。 所有可用的xtype列表，参见 Ext.Component 类头部。示例用法:

var t = new Ext.form.TextField();
alert(t.getXType());  // alerts 'textfield'
参数:
  • 无。
返回值:
  • String
    The xtype
Component
getXTypes () : String
返回此组件的xtype继承树，用字符'-'分隔。 所有可用的xtype值...

返回此组件的xtype继承树，用字符'-'分隔。 所有可用的xtype值，请参见Ext.Component 类的头部。

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

示例用法:

var t = new Ext.form.TextField();
alert(t.getXTypes());  // alerts 'component/box/field/textfield'
参数:
  • 无。
返回值:
  • String
    xtype层次字符串
Component
hasListener( String eventName ) : Boolean
检测对象是否包含指定事件的任何监听器
检测对象是否包含指定事件的任何监听器
参数:
  • eventName : String
    检测的事件名
返回值:
  • Boolean
    如果事件被监听则为true，否则为false
Observable
hide () : Ext.Component
隐藏当前组件。 监听 beforehide' 事件并且返回false 可以取消隐藏组件的操作。 在隐藏组件之后触发...
隐藏当前组件。 监听 beforehide' 事件并且返回false 可以取消隐藏组件的操作。 在隐藏组件之后触发 ' hide' 事件。 如果组件被配置成 hidden 那么此方法在内部被调用。
参数:
  • 无。
返回值:
  • Ext.Component
    this
Component
isDirty () : Boolean
如果此表单项的值与原始值相比发生了改变，返回true。 如果表单项...

如果此表单项的值与原始值相比发生了改变，返回true。 如果表单项被禁用或者尚未被渲染将会返回false。

注意，如果所属的 form 配置了一个Ext.form.BasicForm， 那么在使用Ext.form.BasicForm. setValues 加载值之后，原始值将会被更新。

参数:
  • 无。
返回值:
  • Boolean
    如果此表单项的值与原始值相比发生了改变(并且没有被禁用)，返回true，其它返回false。
Field
isValid ( Boolean preventMark ) : Boolean
通过 校验 表单项 处理后的值 ，返回表单项当前值是否合法。...
通过 校验 表单项 处理后的值 ，返回表单项当前值是否合法。 注意: disabled 的表单项将会被忽略。
参数:
  • preventMark : Boolean
    True将会禁止把表单项标记为非法
返回值:
  • Boolean
    如果值是合法的，为true，其它为false
Field
isVisible () : Boolean
如果当前组件可见，返回true。
如果当前组件可见，返回true。
参数:
  • 无。
返回值:
  • Boolean
    如果当前组件可见，返回true，其它返回false。
Component
isXType ( String xtype , [ Boolean shallow ] ) : Boolean
Tests whether or not this Component is of a specific xtype. This can test whether this Component is descended from th...

测试此组件是否是指定的xtype。此方法既可以测试是否是指定的xtype的某个子类， 或者它是否直接是指定的xtype类(shallow=true)。

如果使用你自己的子类，必须知道组件必须注册它的xtype值。

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

示例用法:

var t = new Ext.form.TextField();
var isText = t.isXType('textfield');        // true
var isBoxSubclass = t.isXType('box');       // true, descended from BoxComponent
var isBoxInstance = t.isXType('box', true); // false, not a direct BoxComponent instance
参数:
  • xtype : String
    需要为当前组件进行检测的xtype
  • shallow : Boolean
    (可选) 如果为false，检测组件是否是xtype继承树中的某个子类（默认是这种情况）， 如果为true，只检测组件是否是指定的xtype类型。
返回值:
  • Boolean
    如果当前组件是指定xtype的子类，返回true，其它返回flase。
Component
markInvalid ( [ String msg ] ) : void
显示一个关联到当前表单项的出错信息， 使用msgTarget 来决定如何显示消息并将...

显示一个关msgTarget 来决定如何显示消息并将 invalidClass 应用到表单项的UI元素上。

注意: 如果表单项的值确实通过了校验， 此方法不会导致表单项的 validate 方法返回 false 。 所以简单地把一个表单项标记为非法并不会阻止表单项 通过设置的 Ext.form.Action.Submit.clientValidation 被提交。

invalid.
参数:
  • msg : String
    (可选)校验信息(默认为invalidText)
返回值:
  • void
Field
mon ( Observable|Element item , Object|String ename , Function fn , Object scope , Object opt ) : void
向任何Observable对象(或者元素)上添加监听器，监听器将会在组件...

向任何Observable对象(或者元素)上添加监听器，监听器将会在组件销毁时被自动删除。
用法：

myGridPanel.mon(myGridPanel.getSelectionModel(), 'selectionchange', handleSelectionChange, null, {buffer: 50});

or:

myGridPanel.mon(myGridPanel.getSelectionModel(), {
    selectionchange: handleSelectionChange,
    buffer: 50
});
参数:
  • item : Observable|Element
    需要添加listener/listeners的项目。
  • ename : Object|String
    事件名，或者一个包含事件名属性的对象。
  • fn : Function
    (可选) 如果 ename 参数是一个事件名，此参数为处理函数。
  • scope : Object
    (可选)如果 ename 参数是一个事件名称，此参数是作用域 ( this 引用)，监听函数将会在此作用域中被执行。
  • opt : Object
    (可选)如果 ename 参数是一个事件名称， 此参数是 addListener 配置项。
返回值:
  • void
Component
mun ( Observable|Element item , Object|String ename , Function fn , Object scope ) : void
删除通过mon 方法添加的监听器。
删除通过mon 方法添加的监听器。
参数:
  • item : Observable|Element
    需要删除listener/listeners的项目。
  • ename : Object|String
    事件名称，或者一个包含事件名称属性的对象。
  • fn : Function
    (可选)如果 ename 参数是一个事件名称，此参数是一个处理函数。
  • scope : Object
    (可选)如果 ename 参数是一个事件名称，此参数是作用域 ( this 引用)，监听函数将会在此作用域中被执行。
返回值:
  • void
Component
nextSibling () : Ext.Component
返回所属容器中的下一个组件
返回所属容器中的下一个组件
参数:
  • 无。
返回值:
  • Ext.Component
Component
on( String eventName, Function handler, [Object scope], [Object options] ) : void
给对象添加事件处理器 (addListener的简写形式)
给对象添加事件处理器 (addListener的简写形式。)
参数:
  • eventName : String
    监听的事件类型
  • handler : Function
    事件调用的方法
  • scope : Object
    （可选）处理方法执行时的作用域 (this 的引用)。 如果被忽略。默认为触发事件的对象。
  • options : Object
    可选 包含处理器配置的对象。
返回值:
  • void
Observable
previousSibling () : Ext.Component
返回所属容器中的前一个组件
返回所属容器中的前一个组件
参数:
  • 无。
返回值:
  • Ext.Component
Component
processValue ( Mixed value ) : void
仅仅在需要准备原始值供校验时，才需要覆盖此方法(参见 validate和 isValid)。...
仅仅在需要准备原始值供校验时，才需要覆盖此方法(参见 validate和 isValid)。 此方法被期望为表单项返回处理后的值，此值将会被用来进行校验 (参见validateValue方法)。
参数:
  • value : Mixed
返回值:
  • void
Field
purgeListeners() : void
移除对象上所有的监听器
移除对象上所有的监听器
参数:
  • 无。
返回值:
  • void
Observable
relayEvents( Object o, Array events ) : void
从指定的Observable上传递选择的事件就好像被当前对象触发一样。
从指定的Observable上传递选择的事件就好像被当前对象触发一样。
参数:
  • o : Object
    该Observable上的事件被当前对象传递。
  • events : Array
    传递的数组名。
返回值:
  • void
Observable
removeClass ( string cls ) : Ext.Component
从组件底层的元素上删除一个CSS类。
从组件底层的元素上删除一个CSS类。
参数:
  • cls : string
    需要移除的CSS类名
返回值:
  • Ext.Component
    this
Component
removeListener( String eventName, Function handler, [Object scope] ) : void
删除一个事件处理器。
删除一个事件处理器。
参数:
  • eventName : String
    处理器关联的事件类型。
  • handler : Function
    移除的处理器。 这应该是传递到addListener里的方法的引用。
  • scope : Object
    （可选）处理器指定的初始作用域。
返回值:
  • void
Observable
render ( [ Element/HTMLElement/String container ], [ String/Number position ] ) : void
在传递进来的HTML元素中渲染当前组件。...

在传递进来的HTML元素中渲染当前组件。

如果你正在使用一个Container 对象放置当前组件，那么请不要使用render方法。

当容器第一次被渲染时，它的子组件将会被容器的 layout 管理器渲染。

某些布局管理器允许动态添加子组件。它们包括 Ext.layout.CardLayout, Ext.layout.AnchorLayout, Ext.layout.FormLayout, Ext.layout.TableLayout。

当一个新的子组件被添加时，如果容器已经被渲染了， 你可能需要调用容器的 doLayout 方法来刷新视图，它将导致所有没有被渲染的子组件进行渲染操作。 此操作是必须的，这样你可以添加多个子组件而只刷新一次layout。

当创建复杂的UI时，非常重要的一点是，请记住调整子项目的尺寸和位置是容器的 layout 管理器的职责。 如果你希望子项目的尺寸对用户交互作出反应， 你必须为容器配置一个布局管理器，它将创建和管理你心里想要的那种布局。

忽略容器的layout 配置意味着将会使用一个基本的布局管理器，它除了按次序把子组件 渲染到容器中之外什么事情都不做。 这种情况下，任何尺寸和位置的调整操作都不会发生。

参数:
  • container : Element/HTMLElement/String
    (可选) 需要在其中渲染当前组件的元素。 如果它是从一个已存在的标签中创建的，此参数应该被忽略。
  • position : String/Number
    (可选) 容器中的一个元素ID或者一个DOM节点索引， 当前组件将会被插入到它前面 (默认append到容器的尾部)
返回值:
  • void
Component
reset () : void
将表单项的当前值重置为以前加载时的值，并且清除所有校验信息。...
将表单项的当前值重置为以前加载时的值，并且清除所有校验信息。 参见Ext.form.BasicForm. trackResetOnLoad 。
参数:
  • 无。
返回值:
  • void
Field
resumeEvents() : void
重新开始触发事件。(参见suspendEvents) 如果事件以queueSuspended参数被挂起，则在事件被挂起时 ...
重新开始触发事件。(参见 suspendEvents) 如果事件以queueSuspended 参数被挂起，则在事件被挂起时触发的事件会被传递到所有的监听器上
参数:
  • 无。
返回值:
  • void
Observable
setActiveError ( String msg , Boolean suppressEvent ) : void
将当前activeError设置为所给的字符串。 触发'invalid'事件。这不会设置出错图标...
将当前activeError设置为所给的字符串。 触发'invalid'事件。这不会设置出错图标，仅仅设置消息并触发事件。 如需显示出错图标，可使用markInvalid代替，它将在内部调用此方法。
参数:
  • msg : String
    出错消息
  • suppressEvent : Boolean
    True将会禁止触发'invalid'事件
返回值:
  • void
Field
setAutoScroll ( Boolean scroll ) : Ext.BoxComponent
设置该组件内容溢出时是否自动显示滚动条。
设置该组件内容溢出时是否自动显示滚动条。
参数:
  • scroll : Boolean
    值为true的话组件自动显示滚动条。
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setDisabled ( Boolean disabled ) : Ext.Component
工具函数，使用布尔值设置有效/无效(disabled/enabled )。
工具函数，使用布尔值设置有效/无效(disabled/enabled )。
参数:
  • disabled : Boolean
返回值:
  • Ext.Component
    this
Component
setHeight ( Mixed height ) : Ext.BoxComponent
设置此组件的高度。该方法将触发resize事件。
设置此组件的高度。该方法将触发resize事件。
参数:
  • height : Mixed
    The new height to set.
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setMaxValue ( Number v ) : Ext.form.SliderField
设置字段的最大值。
设置字段的最大值。
参数:
  • v : Number
    新的最大值。
返回值:
  • Ext.form.SliderField
    this
SliderField
setMinValue ( Number v ) : Ext.form.SliderField
设置字段的最小值。
设置字段的最小值。
参数:
  • v : Number
    新的最小值。
返回值:
  • Ext.form.SliderField
    this
SliderField
setPagePosition ( Number x , Number y ) : Ext.BoxComponent
设置组件在页面中的XY位置。 如果需要设置left和top值 ，请使用...
设置组件在页面中的XY位置。 如果需要设置left和top值 ，请使用setPosition方法。 该方法触发move事件。
参数:
  • x : Number
    The new x position
  • y : Number
    The new y position
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setPosition ( Number left , Number top ) : Ext.BoxComponent
设置组件的left和top值。设置组件的页面XY值，请使用setPagePosition方法。该方法触发...
设置组件的left和top值。设置组件的页面XY值，请使用setPagePosition方法。该方法触发move事件。
参数:
  • left : Number
    The new left
  • top : Number
    The new top
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setRawValue ( Mixed value ) : Mixed
绕过校验，直接设置底层DOM表单项的值。 设置值并进行校验，参见 setValue。
绕过校验，直接设置底层DOM表单项的值。 设置值并进行校验，参见 setValue。
参数:
  • value : Mixed
    需要设置的值
返回值:
  • Mixed
    value 被设置的表单项值
Field
setReadOnly ( Boolean readOnly ) : void
设置当前表单项的只读状态。
设置当前表单项的只读状态。
参数:
  • readOnly : Boolean
    表单项是否应该只读。
返回值:
  • void
Field
setSize ( Mixed width , Mixed height ) : Ext.BoxComponent
设置BoxComponent的宽度和高度。 此方法触发resize事件...
设置BoxComponent的宽度和高度。 此方法触发resize事件。此方法可以接收单独的width或者height值作为参数， 或者你可以传递像这样的一个size对象： {width:10, height:20} 。
参数:
  • width : Mixed
    设置的新的width值。这可以是：
    • 一个Number类型指定Element新的宽度 Ext.Element.defaultUnit(默认为像素 :'px')。
    • 一个String类型用于设置width的CSS样式。
    • 一个size对象格式为 {width: widthValue, height: heightValue} 。
    • 值为 undefined 时，保留原来的width不变。
  • height : Mixed
    设置的新的height值(如果第一个参数传递了一个size对象，此参数没有必要传递)。这可以是：
    • 一个Number类型指定Element新的高度 Ext.Element.defaultUnit(默认为像素 :'px')。
    • 一个String类型用于设置height的CSS样式。也有可能不会被使用到。
    • 值为 undefined 时，保留原来的height不变。
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setValue ( Number v , [ Boolean animate ] ) : Ext.form.SliderField
设置该字段的值。
设置该字段的值。
参数:
  • v : Number
    新的值。
  • animate : Boolean
    (可选)是否使用动画过渡。如果没有指定，它将默认为动画配置。
返回值:
  • Ext.form.SliderField
    this
SliderField
setVisible ( Boolean visible ) : Ext.Component
工具方法，通过使用布尔值隐藏或者显示当前组件。
工具方法，通过使用布尔值隐藏或者显示当前组件。
参数:
  • visible : Boolean
    true时显示，false时隐藏
返回值:
  • Ext.Component
    this
Component
setWidth ( Mixed width ) : Ext.BoxComponent
设置组件的宽度。 此方法触发resize事件。
设置组件的宽度。 此方法触发resize事件。
参数:
  • width : Mixed
    The new width to set.
返回值:
  • Ext.BoxComponent
    this
BoxComponent
show () : Ext.Component
显示当前组件。监听' beforeshow' 事件，返回 false 取消显示组件...
显示当前组件。监听' beforeshow' 事件，返回 false 取消显示组件。在显示组件之后触发' show' 事件。
参数:
  • 无。
返回值:
  • Ext.Component
    this
Component
suspendEvents( Boolean queueSuspended ) : void
暂停触发所有的事件。 (参看resumeEvents)
暂停触发所有的事件。（参看 resumeEvents)
参数:
  • queueSuspended : Boolean
    如果传递为true则排列好暂停的事件使得在调用 resumeEvents 后再触发它们，而不是抛弃所有暂停的事件。
返回值:
  • void
Observable
syncSize () : Ext.BoxComponent
强制组件的大小按照此组件底层元素当前的高度和宽度计算。
强制组件的大小按照此组件底层元素当前的高度和宽度计算。
参数:
  • 无。
返回值:
  • Ext.BoxComponent
    this
BoxComponent
un( String eventName, Function handler, [Object scope] ) : void
删除一个事件处理器(removeListener方法的简写形式)
删除一个事件处理器(removeListener方法的简写形式。)
参数:
  • eventName : String
    处理器关联的事件类型
  • handler : Function
    被删除的处理器 这应该是传入 addListener 中的方法的引用。
  • scope : Object
    （可选）为处理器指定的初始作用域。
返回值:
  • void
Observable
unsetActiveError ( Boolean suppressEvent ) : void
清除activeError并触发'valid'事件。此方法被clearInvalid在内部进行...
清除activeError并触发'valid'事件。此方法被clearInvalid在内部进行调用， 并且一般情况下没有必要手工调用
参数:
  • suppressEvent : Boolean
    True将禁止触发'invalid'事件
返回值:
  • void
Field
update ( Mixed htmlOrData , [ Boolean loadScripts ], [ Function callback ] ) : void
刷新组件的内部区域。
刷新组件的内部区域。
参数:
  • htmlOrData : Mixed
    如果已经通过tpl为当前组件配置了一个模板，那么 将会使用此参数来装配模板。 如果没有为当前组件配置模板，组件的内容区域将会通过Ext.Element 进行刷新。
  • loadScripts : Boolean
    (可选)只用在使用html配置时此参数才合法。默认为false。
  • callback : Function
    (可选)只用在使用html配置时此参数才合法。 当脚本加载完成时回调函数才被执行。
返回值:
  • void
Component
updateBox ( Object box ) : Ext.BoxComponent
设置此组件底层元素的盒子模型尺寸。(译者注：盒子模型是CSS术语，详细资料请自行搜索。)
设置此组件底层元素的盒子模型尺寸。(译者注：盒子模型是CSS术语，详细资料请自行搜索。)
参数:
  • box : Object
    一个格式为{x, y, width, height}的对象
返回值:
  • Ext.BoxComponent
    this
BoxComponent
validate () : Boolean
校验表单项的值
校验表单项的值
参数:
  • 无。
返回值:
  • Boolean
    如果值合法，为true,否则为false
Field
validateValue ( Mixed The ) : Boolean
使用getErrors创建一个校验出错信息数组。 如果发现了任何错误，将会使用第一个错误作为参数...
使用getErrors创建一个校验出错信息数组。 如果发现了任何错误，将会使用第一个错误作为参数调用markInvalid方法并返回 false，否则返回true。以前，要求子类提供此方法的一个实现以处理校验过程--- 从3.2开始，应该用覆盖getErrors方法的方式替代。
参数:
  • The : Mixed
    表单项的当前值
返回值:
  • Boolean
    如果所有校验都通过，此值为true，如果一个或多个校验失败，则为false
Field

公共事件

Event Defined By
added : ( Ext.Component this , Ext.Container ownerCt , number index )
当一个组件被添加到一个Ext.Container时触发
当一个组件被添加到一个Ext.Container时触发
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • ownerCt : Ext.Container
    用于组件的容器
  • index : number
    添加组件的位置
Component
afterrender : ( Ext.Component this )
在组件渲染完成之后触发...

在组件渲染完成之后触发。

afterrender事件在当前组件被rendered 结束之后、在为组件定义的所有afterRender方法执行之后 触发，并且，如果有stateful， 也在状态被保存之后才触发。

监听器将会以如下参数格式被调用:
  • this : Ext.Component
Component
beforedestroy : ( Ext.Component this )
在组件 destroyed 之前触发。 在事件监听器中返回false以停止 destroy 操作。
在组件 destroyed 之前触发。 在事件监听器中返回false以停止 destroy 操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforehide : ( Ext.Component this )
在调用hide方法隐藏组件之前触发。 在事件监听器中返回false可以停止隐藏操作。
在调用hide方法隐藏组件之前触发。 在事件监听器中返回false可以停止隐藏操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforerender : ( Ext.Component this )
在组件被rendered 之前触发。 在事件监听器中返回false可以停止render 操作。
在组件被rendered 之前触发。 在事件监听器中返回false可以停止render 操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforeshow : ( Ext.Component this )
在调用show()方法现实组件之前触发。 事件处理函数返回false可以停止show。
在调用show 方法现实组件之前触发。 事件处理函数返回false可以停止show。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforestaterestore : ( Ext.Component this , Object state )
在组件状态恢复之前触发。返回false停止恢复状态操作。
在组件状态恢复之前触发。返回false停止恢复状态操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    StateProvider返回的状态哈希值。 如果没有禁止此事件，那么状态对象会被传递给applyState。 默认情况下，这样简单地把属性值拷贝到当前组件中。 可以覆盖此方法以提供自定的状态恢复操作。
Component
beforestatesave : ( Ext.Component this , Object state )
在组件状态被保存到配置的状态提供者之前触发。 返回false可以停止保存。
在组件状态被保存到配置的状态提供者之前触发。 返回false可以停止保存。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    状态值哈希。 这由在组件上调用getState() 方法决定。 此方法必须由开发者提供，返回是否需要对状态进行描述，默认情况下， Ext.Component有一个空实现。
Component
blur : ( Ext.form.Field this )
当表单项时区输入焦点时触发。
当表单项时区输入焦点时触发。
监听器将会以如下参数被调用:
  • this : Ext.form.Field
Field
change : ( Ext.form.Field this , Mixed newValue , Mixed oldValue )
如果表单项的时发生改变，在表单项刚刚失去焦点时触发。
如果表单项的时发生改变，在表单项刚刚失去焦点时触发。
监听器将会以如下参数格式调用:
  • this : Ext.form.Field
  • newValue : Mixed
    新的值
  • oldValue : Mixed
    原始值
Field
destroy : ( Ext.Component this )
在组件被销毁之后触发。
在组件被destroyed之后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
disable : ( Ext.Component this )
在组件被设置为无效状态后触发。
在组件被设置为无效状态后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
enable : ( Ext.Component this )
当组件被设置为有效(enabled)之后触发。
当组件被设置为有效(enabled)之后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
focus : ( Ext.form.Field this )
当表单项获得输入焦点时触发。
当表单项获得输入焦点时触发。
监听器将会以如下参数格式被调用:
  • this : Ext.form.Field
Field
hide : ( Ext.Component this )
在组件被隐藏之后触发。 当调用hide 方法隐藏组件之后触发。
在组件被隐藏之后触发。 当调用hide 方法隐藏组件之后触发。
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
invalid : ( Ext.form.Field this , String msg )
在表单项被标记为非法之后触发。
在表单项被标记为非法之后触发。
监听器将会以如下参数格式调用:
  • this : Ext.form.Field
  • msg : String
    校验信息
Field
move : ( Ext.Component this , Number x , Number y )
在组件移动之后触发。
在组件移动之后触发。
监听器将会用如下的参数格式来调用:
  • this : Ext.Component
  • x : Number
    The new x position
  • y : Number
    The new y position
BoxComponent
removed : ( Ext.Component this , Ext.Container ownerCt )
当一个组件被从Ext.Container容器中删除时触发
当一个组件被从Ext.Container容器中删除时触发
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • ownerCt : Ext.Container
    持有组件的容器
Component
render : ( Ext.Component this )
在组件被渲染之后触发。
在组件被 rendered(渲染) 之后触发。
监听器将以如下的参数格式被调用:
  • this : Ext.Component
Component
resize : ( Ext.Component this , Number adjWidth , Number adjHeight , Number rawWidth , Number rawHeight )
在组件被调整大小之后触发。
在组件被调整大小之后触发。
监听器将以如下的参数格式被调用:
  • this : Ext.Component
  • adjWidth : Number
    这是width调整后的值
  • adjHeight : Number
    这是height调整后的值
  • rawWidth : Number
    这是width原来的值
  • rawHeight : Number
    这是height原来的值
BoxComponent
show : ( Ext.Component this )
在调用show 方法显示组件之后触发。
在调用show 方法显示组件之后触发。
监听器将会用如下的参数格式被调用:
  • this : Ext.Component
Component
specialkey : ( Ext.form.Field this , Ext.EventObject e )
当任何和导航有关的键被按下时触发(上下左右箭头, tab, 回车,esc, 等等) is pressed. 处理其它按键参见...
当任何和导航有关的键被按下时触发(上下左右箭头, tab, 回车,esc, 等等) is pressed. 处理其它按键参见 Ext.Panel.keys或者 Ext.KeyMap。 你可以检测 Ext.EventObject.getKey 以便获知哪个键被按下。例如：
var form = new Ext.form.FormPanel({
    ...
    items: [{
            fieldLabel: 'Field 1',
            name: 'field1',
            allowBlank: false
        },{
            fieldLabel: 'Field 2',
            name: 'field2',
            listeners: {
                specialkey: function(field, e){
                    // e.HOME, e.END, e.PAGE_UP, e.PAGE_DOWN,
                    // e.TAB, e.ESC, arrow keys: e.LEFT, e.RIGHT, e.UP, e.DOWN
                    if (e.getKey() == e.ENTER) {
                        var form = field.ownerCt.getForm();
                        form.submit();
                    }
                }
            }
        }
    ],
    ...
});
监听器将会以如下参数格式被调用:
  • this : Ext.form.Field
  • e : Ext.EventObject
    事件对象
Field
staterestore : ( Ext.Component this , Object state )
组件状态被存储之后触发。
组件状态被存储之后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    StateProvider返回的状态哈希值。 如果没有禁止此事件，那么状态对象会被传递给applyState。 默认情况下，这样简单地把属性值拷贝到当前组件中。 可以覆盖此方法以提供自定的状态恢复操作。
Component
statesave : ( Ext.Component this , Object state )
在组件状态被保存到所配置的状态提供者之后触发。
在组件状态被保存到所配置的状态提供者之后触发。
监听器将会用如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    状态值hash。 这是由在足见上调用getState() 方法决定的。 开发者必须提供此方法以返回是否需要恢复状态，默认情况下， Ext.Component有一个空实现。
Component
valid : ( Ext.form.Field this )
在表单项被校验无错误之后触发。
在表单项被校验无错误之后触发。
监听器将会以如下参数格式被调用:
  • this : Ext.form.Field
Field


Observable
    Component
      BoxComponent
        Field
          TextField
            TextArea

Class Ext.form.TextArea

包: | Ext.form
定义类的文件: | TextArea.js
类: | TextArea
继承自: | TextField
多行文本栏。可以用来替代传统的textarea表单项，插入了自动调整尺寸支持。

配置项

Config Options Defined By
allowBlank : Boolean
指定为false将会只允许值的长度>0(默认为true)
TextField
allowDomMove : Boolean
在渲染时组件是否可以移动Dom节点(默认为true)。
Component
anchor : String
注: 这个配置只用于该组件被包含在一个已使用AnchorLayout...

注: 这个配置只用于该组件被包含在一个已使用 AnchorLayout (或者其子类)配置的Container时。 基于布局管理器，例如：

  • Ext.form.FormPanel
  • 指定 layout: 'anchor' // or 'form', or 'absolute'

参见 Ext.layout.AnchorLayout. anchor 。

BoxComponent
applyTo : Mixed
指定一个元素的id、一个DOM元素或者一个已经存在并被渲染到DIV中的元素，此DIV已经被...

指定一个元素的id、一个DOM元素或者一个已经存在并被渲染到DIV中的元素，此DIV已经被 渲染到document中，并且为当前组件指定了一些结构化的标签。

  • 描述 :
      当使用了 applyTo， 在主元素中也可以用id或者CSS类名来指定组件的托管部分， 并且，如果可以的话，创建的组件可能也会试图在那个标签中创建它的子组件。
  • 注意 :
      当使用此配置项时，无需调用render()方法。
      如果指定了applyTo属性，任何传递给 renderTo 的值都会被忽略，并且目标元素的父节点将会自动被用作组件的容器。
Component
autoCreate : String/Object
一个DomHelper 元素描述，或者对于一个默认元素描述来说为true。 用来创建包装当前组件的 Element 。细节参见...

一个DomHelper 元素描述，或者对于一个默认元素描述来说为true。 用来创建包装当前组件的 Element 。细节参见autoEl 默认为:

                                {tag: "textarea", style: "width:100px;height:60px;", autocomplete: "off"}
TextArea
autoEl : Mixed
一个表签名或者一个 DomHelper 描述，用来创建 Element ，它将封装当前组件...

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

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

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

{
    xtype: 'box',
    autoEl: {
        tag: 'img',
        src: 'http://www.example.com/example.jpg'

    }
}, {
    xtype: 'box',
    autoEl: {
        tag: 'blockquote',
        html: 'autoEl is cool!'
    }
}, {
    xtype: 'container',
    autoEl: 'ul',
    cls: 'ux-unordered-list',
    items: {
        xtype: 'box',
        autoEl: 'li',
        html: 'First list item'
    }
}
Component
autoHeight : Boolean
如果值为true，height配置项为'auto'，否则值为false的话使用固定的高度...

如果值为true，height配置项为'auto'，否则值为false的话使用固定的高度， 或者可以由其父类容器 layout manager来控制。(默认值为 false)。

注: 虽然很多组件继承了这个配置选项，但不是所有这些组件的自适应高度配置都会像期望的那样起作用。 设置autoHeight：值为true时，浏览器将根据元素的内容自动设置高度，这将意味着Ext不会去管理高度。

如果是由浏览器来管理高度，需要注意的是，通过浏览器进行调整的结构组件内不能被发现， 因此宽度的变化可能导致需要进行同步处理元素的高度。 例如：

var w = new Ext.Window({
    title: 'Window',
    width: 600,
    autoHeight: true,
    items: {
        title: 'Collapse Me',
        height: 400,
        collapsible: true,
        border: false,
        listeners: {
            beforecollapse: function() {
                w.el.shadow.hide();
            },
            beforeexpand: function() {
                w.el.shadow.hide();
            },
            collapse: function() {
                w.syncShadow();
            },
            expand: function() {
                w.syncShadow();
            }
        }
    }
}).show();
BoxComponent
autoScroll : Boolean
如果值为true，将会在该元素上使用overflow:'auto'配置，并且在必要的时候...
如果值为true，将会在该元素上使用overflow:'auto'配置，并且在必要的时候自动显示滚动条，否则，溢出部分的组件都会被切除(默认值为 false)。
BoxComponent
autoShow : Boolean
如果组件需要检测隐藏CSS属性(如 'x-hidden' 或者 'x-hide-display')并且在渲染时删除...
如果组件需要检测隐藏CSS属性(如 'x-hidden' 或者 'x-hide-display')并且在渲染时删除它们 (默认为false)，设置此值为true。
Component
autoWidth : Boolean
如果为true，使用width:'auto'配置，否则使用固定的宽度...

如果为true，使用width:'auto'配置，否则使用固定的宽度，或者可以由其父类容器的layout manager来控制。(默认值为 false)。

注: 虽然很多组件继承了这个配置选项，但不是所有这些组件的自适应宽度配置都会像期望的那样起作用。 设置autoWidth：值为true时，浏览器将根据元素的内容自动设置宽度，这将意味着Ext不会去管理宽度。

如果是由浏览器来管理宽度，需要注意的是，通过浏览器进行调整的结构组件内不能被发现，因此宽度的变化可能导致需要进行同步处理元素的宽度。 例如，在这个元素的目标是：

<div id='grid-container' style='margin-left:25%;width:50%'></div>
当浏览器窗口改变时，渲染后的Panel必须监听浏览器窗口大小的变化，以便通知子项，浏览器改变了其宽度：

var myPanel = new Ext.Panel({
    renderTo: 'grid-container',
    monitorResize: true, // relay on browser resize
    title: 'Panel',
    height: 400,
    autoWidth: true,
    layout: 'hbox',
    layoutConfig: {
        align: 'stretch'
    },
    defaults: {
        flex: 1
    },
    items: [{
        title: 'Box 1',
    }, {
        title: 'Box 2'
    }, {
        title: 'Box 3'
    }],
});
BoxComponent
blankText : String
如果 allowBlank 校验失败时需要显示的出错信息(默认为'This field is required')
TextField
boxMaxHeight : Number
设置组件的最大高度值...

设置组件的最大高度值。

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

BoxComponent
boxMaxWidth : Number
设置组件的最大宽度值...

设置组件的最大宽度值。

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

BoxComponent
boxMinHeight : Number
设置组件的最小高度值...

设置组件的最小高度值。

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

BoxComponent
boxMinWidth : Number
设置组件的最小宽度值...

设置组件的最小宽度值。

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

BoxComponent
bubbleEvents : Array
一个事件数组，当这些事件被触发时，将会被冒泡到所有父容器中。参见....

一个事件数组，当这些事件被触发时，将会被冒泡到所有父容器中。参见 Ext.util.Observable.enableBubble。 默认为 []。

Component
clearCls : String
应用到特殊的clearing div的CSS类， 这个clearing div直接渲染到每个form field的包装器后面...

应用到特殊的clearing div的CSS类， 这个clearing div直接渲染到每个form field的包装器后面，以提供 清除field的功能(默认为 'x-form-clear-left')。

注意: 只有在当前组件被渲染到一个使用FormLayout 布局(例如 Ext.form.FormPanel 或者指定 layout:'form')的 容器中、或者是指定了一个fieldLabel 、或者指定isFormField=true 时此配置才有效。

另请参见 Ext.layout.FormLayout. fieldTpl。

Component
cls : String
一个可选的额外CSS类，它将被添加到当前组件的元素上(默认为'')...
一个可选的额外CSS类，它将被添加到当前组件的元素上(默认为'')。 此属性对于在组件上，或者它的任何使用标准CSS规则的孩子节点上， 添加定制的样式非常有用。
Field
contentEl : String
(可选)指定一个已存在的HTML元素，或者一个已存在HTML元素的...

(可选)指定一个已存在的HTML元素，或者一个已存在HTML元素的 id ，它们将被用作当前组件的内容。

  • 描述 :
    此配置选项被用来将一个已存在的HTML元素 插入到一个新组件(在组件渲染之后它简单地移动DOM元素) 的layout元素中，使它成为该组件的内容。
  • 注意 :
    指定的HTML元素将被append到组件的layout元素中， 在所有配置的 HTML 被插入之后， 并且，这样的话，在render事件 被触发时，document中将不再包含此元素。
    指定的HTML元素将不会参与组件所有可能使用的 layout 过程(译者注：指这些HTML元素 不会参与布局操作)。 它仅是HTML而已。布局操作实在孩子 items 上进行的。
    添加 x-hidden 或者 x-hide-display CSS类，以防在内容渲染到panel时发生闪烁。
Component
ctCls : String
一个可选的外部CSS样式，添加到这个组件的容器(默认值为 '')。 这个方法对于使用标准的CSS规则...

一个可选的外部CSS样式，添加到这个组件的容器(默认值为 '')。 这个方法对于使用标准的CSS规则，为组件或它的任何一个子组件添加特定的样式非常有用。 参见 Ext.layout.ContainerLayout和 extraCls 。

注意: ctCls 默认为 ''期望如下的类，它们将指定一个默认值:

  • Box Layout : 'x-box-layout-ct'
使用一个额外的CSS类配置以上的Class，它是append到默认对象上的。例如， 对于BoxLayout (Hbox and Vbox):
                                ctCls: 'x-box-layout-ct custom-class'

Component
data : Mixed
初始化数据集，它将被应用到 tpl 上以刷新组件的内容区域。
Component
disableKeyFilter : Boolean
指定为true将会禁用按键过滤(默认为false)
TextField
disabled : Boolean
当前组件处于无效状态时为true。 Read-only.
Field
disabledClass : String
当组件处于无效状态时添加到组件上的CSS类(默认为 'x-item-disabled')。
Component
emptyClass : String
应用到空表单项的CSS类，以便样式化 emptyText (默认为'x-form-empty-field')。...
应用到空表单项的CSS类，以便样式化 emptyText (默认为'x-form-empty-field')。 根据表单项当前值，此样式按需要被自动添加和删除。
TextField
emptyText : String
放置到空表单项中的默认文本(默认为null)。 注意:...
放置到空表单项中的默认文本(默认为null)。 注意: 如果当前表单栏处于有效状态并且被配置了一个名称，那么此值会被 提交到服务器。
TextField
enableKeyEvents : Boolean
true将为HTML输入栏启用按键事件代理 (默认为false)。
TextField
fieldClass : String
表单项的默认CSS类(默认为'x-form-field')
Field
fieldLabel : String
紧靠此field显示的标签文本(默认值为 '')。注意...

紧靠此field显示的标签文本(默认值为 '')。

注意:只有在当前组件被渲染到一个使用FormLayout 的容器中时，此配置才有效。 (例如 Ext.form.FormPanel 或 指定 layout:'form')。

另请参见 hideLabel 、 Ext.layout.FormLayout和 fieldTpl。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Name'
    }]
});
Component
flex : Number
注: 这个配置只用于该组件被包含在一个已使用BoxLayout配置的Container中时...

注: 这个配置只用于该组件被包含在一个已使用BoxLayout配置的Container中时。通过计算每一个子组件的flex值所占全部flex值之和的比例，来决定子组件的宽(HBoxLayout)高(VBoxlayout)。 任何子项的 flex = 0 或 flex = undefined 将不被设置(初始值大小将不被改变)。

BoxComponent
focusClass : String
当表单项获得焦点时使用的CSS类(默认为 'x-form-focus')
Field
grow : Boolean
true 如果此表单项需要自动增长、收缩到它的内容长度(默认为false)
TextField
growMax : Number
当grow=true时 允许的最大高度(默认为1000)
TextArea
growMin : Number
当grow=true 时允许的最小高度(默认为60)
TextArea
height : Number
组件的高度(默认值为 auto)。注:如果想使用百分比的方式...
组件的高度(默认值为 auto)。注:如果想使用百分比的方式来设置值，请查看 Ext.Component.anchor。
BoxComponent
hidden : Boolean
如果当前组件处于隐藏状态，此值为true。Read-only。
Component
hideLabel : Boolean
true时完全隐藏label元素 ( label 和 separator)。 默认为 false。 默认情况下，即使你不指定...

true时完全隐藏label元素 ( label 和 separator)。 默认为 false。 默认情况下，即使你不指定 fieldLabel 它的空间仍然会被保留，这样这块区域会与其它确实拥有label的区域位于同一排。 讲此值设置为 true 将导致此区域不再保留此空间。

注意: 参见 clearCls 的注释。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield'
        hideLabel: true
    }]
});
Component
hideMode : String
组件如何隐藏，支持的值有： 'visibility' (css visibility), 'offsets' (位置偏移量为负值) 和...

组件如何隐藏，支持的值有： 'visibility' (css visibility), 'offsets' (位置偏移量为负值) 和 'display' (css display).

注意:一般首选默认值 'display'，因为当组件第一次显示的时候它们会自动进行布局 (隐藏的时候不会调整尺寸)。

Component
hideParent : Boolean
此值为true时，当调用hide/show方法时，将会hide和show组件的容器...
此值为true时，当调用hide/show方法时，将会hide和show组件的容器；false时将会 hide和show组件自身(默认为false)。例如，这可以用作window上隐藏按钮的一种 快捷操作，通过设置此按钮的hideParent:true，然后把它添加到window上。
Component
html : String/Object
一个HTML片段，或者一个 DomHelper 描述，用作layout元素的内容(默认为'')。...
一个HTML片段，或者一个 DomHelper 描述，用作layout元素的内容(默认为'')。 这个HTML内容在组件渲染之后才被添加，所以在 render 出发的时候，document中尚未包含此HTML。 但是这个内容将会在所有配置的 contentEl 之前被插入到body标签中。
Component
id : String
当前组件唯一的id(默认为auto-assigned id)...

当前组件唯一的id(默认为auto-assigned id)。 如果你需要在以后访问组件，而又没有一个有效的组件对象引用，那么你需要指定一个 id( 也就是，使用Ext. getCmp方法 )。

注意，此id也将被用作组件底层HTML标签的id，这些标签被渲染到页面中。 这将允许你编写基于id的CSS规则，以独立地描述指定的实例；并且，也可以通过 组件父标签的id选中子元素。

注意:为了避免与唯一的id 产生重复， 请参见 itemId 和 ref 。

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

Component
inputType : String
输入栏的类型属性---例如radio,text,password,file(默认为'text')。...
输入栏的类型属性---例如radio,text,password,file(默认为'text')。 'file'和'password'类型通常必须用来渲染那些没有独立Ext组件的表单项类型。 注意，如果你使用inputType:'file'， 那么将不再支持 emptyText 并且应该避免使用。
Field
invalidClass : String
当把表单项标记为非法时所使用的CSS类(默认为'x-form-invalid')
Field
invalidText : String
当把一个表单项标记为非法状态并且没有提供消息时所使用的出错文本...
当把一个表单项标记为非法状态并且没有提供消息时所使用的出错文本 (默认为'The value in this field is invalid')
Field
itemCls : String
注意: 只有在当前组件被渲染到一个使用FormLayout 布局的 容器中时此配置才有效...

注意: 只有在当前组件被渲染到一个使用FormLayout 布局的 容器中时此配置才有效。 (例如Ext.form.FormPanel 或者指定 layout:'form')。

一个附加的CSS类，应用到div上，包装当前field的表单元素。 如果提供了此参数， field级上的itemCls将会覆盖 container级上提供的 默认itemCls。 为itemCls指定的值将会被添加默认的 类('x-form-item')。

既然它被应用到项目的包装器上(参见 Ext.layout.FormLayout。 fieldTpl)， 它将允许你编写能应用到此field、label(如果有指定)、或者field内部任何其它元素的标准CSS规则。

注意: 参考 fieldLabel的注释。 .

示例用法:

// Apply a style to the field's label:
<style>
    .required .x-form-item-label {font-weight:bold;color:red;}
</style>

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Name',
        itemCls: 'required' //this label will be styled
    },{
        xtype: 'textfield',
        fieldLabel: 'Favorite Color'
    }]
});
Component
itemId : String
当没有可利用的对象引用时，itemId可以作为第二选择，用来获得一个组件的引用， 代替 ...

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

var c = new Ext.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'); // 与 Ext.getCmp()不同

p2 = p1.ownerCt.getComponent('p2'); // 通过兄弟对象获得引用

另请参见 id 和 ref 。

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

Component
labelSeparator : String
每个fieldLabel 文本后面现实的分隔符。 此属性可以在多个层次上进行配置...

每个fieldLabel 文本后面现实的分隔符。 此属性可以在多个层次上进行配置。优先顺序为：

  • field / component level
  • container level
  • layout level (默认为冒号 ':')
如不需要为当前field的label显示分隔符，指定一个空字符串''即可。

注意:参见 clearCls 的注释。

另请参见 hideLabel 和 Ext.layout.FormLayout。 fieldTpl。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    layoutConfig: {
        labelSeparator: '~'   // layout config has lowest priority (defaults to ':')
    },
    labelSeparator: '>>',     // config at container level
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Field 1',
        labelSeparator: '...' // field/component level config supersedes others
    },{
        xtype: 'textfield',
        fieldLabel: 'Field 2' // labelSeparator will be '='

    }]
});
Component
labelStyle : String
一个CSS样式描述字符串，它将直接应用到当前field的label上...

一个CSS样式描述字符串，它将直接应用到当前field的label上。 如果有设置，默认为容器的labelStyle值(例如 Ext.layout.FormLayout.labelStyle , 或者 '')。

注意:参见 clearCls 的注释。

另请参见 hideLabel 和 Ext.layout.FormLayout. fieldTpl。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Name',
        labelStyle: 'font-weight:bold;'
    }]
});
Component
listeners : Object
一个包含一个或多个事件处理器的配置对象，会在初始化的时候被添加到目标对象上...

一个包含一个或多个事件处理器的配置对象，会在初始化的时候被添加到目标对象上。 该配置对象应该是一个有效的监听器配置对象就像 addListener例子中指定的一样可一次附加多个处理器。

ExtJs Components上的DOM事件

一些 ExtJs Component 类导出时会选择一些DOM事件(例如 "click", "mouseover" 等等), 这通常只是在有额外的值可以被添加时发生。例如DataView类的 click事件会传递被点击的节点。也可以直接在Component的HTMLElementevent上访问DOM事件，但必需在Component被渲染后监听器才能添加到Element 上。可以按照以下步骤添加插件:

// 插件会用一个监听器配置对象进行配置。
//该组件会被添加到所有处理方法的参数列表上。
Ext.DomObserver = Ext.extend(Object, {
    constructor: function(config) {
        this.listeners = config.listeners ? config.listeners : config;
    },

    // 组件将自己传递进了插件的初始化方法里
    init: function(c) {
        var p, l = this.listeners;
        for (p in l) {
            if (Ext.isFunction(l[p])) {
                l[p] = this.createHandler(l[p], c);
            } else {
                l[p].fn = this.createHandler(l[p].fn, c);
            }
        }

        // 渲染后立即添加监听器到元素上
        c.render = c.render.createSequence(function() {
            var e = c.getEl();
            if (e) {
                e.on(l);
            }
        });
    },

    createHandler: function(fn, c) {
        return function(e) {
            fn.call(this, e, c);
        };
    }
});

var combo = new Ext.form.ComboBox({

    // 元素被点击后折叠
    plugins: [ new Ext.DomObserver({
        click: function(evt, comp) {
            comp.collapse();
        }
    })],
    store: myStore,
    typeAhead: true,
    mode: 'local',
    triggerAction: 'all'
});

Observable
margins : Object
注:此配置只用于该组件展现在一个使用BorderLayout...

注:此配置只用于该组件展现在一个使用BorderLayout 或 BoxLayout的两个子类之一作为布局的容器。

这个margins对象在该组件中的格式为：

{top: (top margin),right: (right margin),bottom: (bottom margin),left: (left margin)}

也可以是一个字符串，中间用空格分隔，margin值为数字。 把matches中每一个值的次序跟CSS中margin值的排列方式相对应：

  • 如果只有一个值，它适用于所有方面。
  • 如果有两个值，top和bottom的边框设置为第一个值，left和right设置为第二个值。
  • 如果有三个值，top设置为第一个值，left和right设置为第二个值，bottom设置为第三个值。
  • 如果有四个值，分别设置为top, right, bottom, left。

默认值:

{top:0, right:0, bottom:0, left:0}
BoxComponent
maskRe : RegExp
一个输入掩码正则表达式，用来过滤不匹配的按键(默认为null)
TextField
maxLength : Number
校验时表单项允许的最大输入长度(默认为Number.MAX_VALUE)。 通过改善可用性允许粘贴、编辑、重做和回退...
校验时表单项允许的最大输入长度(默认为Number.MAX_VALUE)。 通过改善可用性允许粘贴、编辑、重做和回退， 此行为被设计用来为用户提供即时的反馈。 如需限定表单项中可以输入字符的最大长度， 可以使用autoCreate 向一个表单项添加任何你想要的属性，例如:
var myField = new Ext.form.NumberField({
    id: 'mobile',
    anchor:'90%',
    fieldLabel: 'Mobile',
    maxLength: 16, // for validation
    autoCreate: {tag: 'input', type: 'text', size: '20', autocomplete: 'off', maxlength: '10'}
});
TextField
maxLengthText : String
如果maximum length 校验失败时显示的出错文本...
如果maximum length 校验失败时显示的出错文本 (默认为 'The maximum length for this field is {maxLength}')
TextField
minLength : Number
输入栏必须的最小长度(默认为0)
TextField
minLengthText : String
如果 最小长度 校验失败时显示的出错文本 (默认为...
如果 最小长度 校验失败时显示的出错文本 (默认为 'The minimum length for this field is {minLength}') 。
TextField
msgFx : String
实验性参数 当在表单项下显示校验消息时使用的效果(默认为'normal')。
Field
msgTarget : String
通过markInvalid 设置的消息文本应该显示的位置。 必须是如下值之一：...

通过markInvalid 设置的消息文本应该显示的位置。 必须是如下值之一：

  • qtip 当用户鼠标滑过表单项时，显示一个包含消息的快速提示。 这是默认情况。
    为了使此参数能工作，必须调用 Ext.QuickTips.init。
  • title 在弹出的默认浏览器标题属性上显示消息。
  • under 在表单项之下添加一块div，包含出错消息。
  • side 在表单项右边添加一个出错图标，当鼠标滑过时弹出并显示一个消息。
  • [element id] 在指定元素的innerHTML中直接添加出错消息。
Field
name : String
表单项的HTML name属性(默认为'')。 注意: 如果需要当前表单项自动被包含在...
表单项的HTML name属性(默认为'')。 注意: 如果需要当前表单项自动被包含在 form submit()中，必须设置此参数。
Field
overCls : String
一个可选的额外的CSS类，它将在鼠标移过元素时被添加到组件上...
一个可选的额外的CSS类，它将在鼠标移过元素时被添加到组件上，鼠标移出时 删除。(默认为'')。此属性对于在组件上，或者它的任何使用标准CSS规则的孩子节点上， 添加定制的'active' 或者 'hover'样式非常有用。
Component
pageX : Number
如果该组件被包含在一个指定位置的容器中，这个值表示页面级的x坐标值（译者注：在有滚动条的情况下这个值很有用）。
BoxComponent
pageY : Number
如果该组件被包含在一个指定位置的容器中，这个值表示页面级的y坐标值（译者注：在有滚动条的情况下这个值很有用）。
BoxComponent
plugins : Object/Array
一个对象或者一个对象数组，为组件提供特殊的功能 ...
一个对象或者一个对象数组，为组件提供特殊的功能。 对一个合法的插件唯一的要求是它含有一个init()方法， 能接收一个Ext.Component型的参数。 当组件被创建时，如果有可用的插件，组件将会调用每个插件的init方法， 并将自身的引用作为方法参数传递给它。然后，每个插件就可以调用方法或者响应组件上的事件， 就像需要的那样提供自己的功能。
Component
preventMark : Boolean
true将会禁止 把表单项标记为非法。默认为false.
Field
preventScrollbars : Boolean
true将会阻止出现滚动条，无论表单项中有多少文本。 只有当...
true将会阻止出现滚动条，无论表单项中有多少文本。 只有当grow为 true时此配置项才会被使用。 与设置overflow: hidden等效，默认为 false。
TextArea
ptype : String
需要创建配置的ptype。 当传递一个配置对象给构造函数时...
需要创建配置的ptype。 当传递一个配置对象给构造函数时，此配置选项不会被使用。 只有在使用懒初始化的时候此配置项才会被使用， 此时Plugin不是 通过一个完整的实例组件，而是通过一个Component配置指定的。 在渲染时，将会查找ptype以决定创建何种类型的Plugin。

如果你创建自己的Plugin，你可以通过 Ext.ComponentMgr.registerPlugin 对它们进行注册，以便能利用懒初始化和渲染机制。
Component
readOnly : Boolean
将会把表单项标记为在HTML中只读(readOnly)(默认为false)...
true 将会把表单项标记为在HTML中只读(readOnly)(默认为false)。

Note: 这仅仅设置元素的readOnly DOM参数。 例如，设置 readOnly=true ，将不会禁用触发ComboBox或者DateField； 这为你提供了一个选项，可以强制用户通过触发按钮选择一个值，而不是 在文本框进行输入。 使用 hideTrigger 可以隐藏触发按钮。

Field
ref : String
一个路径描述，与组件的 ownerCt 相关，它描述了把当前组件的命名引用放置到哪个父容器中去。...

一个路径描述，与组件的 ownerCt 相关，它描述了把当前组件的命名引用放置到哪个父容器中去。

祖先的坐标路径可以通过'/'字符进行分隔。 例如，将一个Toolbar Button的引用放入 拥有此Toolbar的Panel中:

var myGrid = new Ext.grid.EditorGridPanel({
    title: 'My EditorGridPanel',
    store: myStore,
    colModel: myColModel,
    tbar: [{
        text: 'Save',
        handler: saveChanges,
        disabled: true,
        ref: '../saveButton'
    }],
    listeners: {
        afteredit: function() {
//          The button reference is in the GridPanel
            myGrid.saveButton.enable();
        }
    }
});

在上面的代码中，如果 ref 是 'saveButton' ，那么引用将会被放置到Toolbar中。 ref 中的每个'/' 都会从组件的 ownerCt 向上移动一级。

另请参见 added 和 removed 事件。

Component
regex : RegExp
在校验时，需要在表单项值纸上进行测试的JavaScript RegExp对象(默认为 null)。 如果测试失败，表单项将会使用...
在校验时，需要在表单项值纸上进行测试的JavaScript RegExp对象(默认为 null)。 如果测试失败，表单项将会使用 regexText 进行标记。
TextField
regexText : String
当使用regex 并且校验测试失败时显示的出错文本(默认为'')
TextField
region : String
注: 此配置只用于该组件展现在一个布局为BorderLayout的容器中...

注: 此配置只用于该组件展现在一个布局为BorderLayout的容器中(例如指定layout:'border')。

详见Ext.layout.BorderLayout。

BoxComponent
renderTo : Mixed
该值可以是一个节点的id、一个DOM节点或者一个已存在的元素...

该值可以是一个节点的id、一个DOM节点或者一个已存在的元素， 组件将会被渲染到其中。

  • 注意 :
      如果组件不是一个Container 的子项目时， 不要使用此选项。 渲染和管理它的子项目是一个Container 的layout manager的责任。
      当使用此配置项时，无需调用render()方法。

另请参见 render 。

Component
selectOnFocus : Boolean
true当表单项获得输入焦点时，将会自动选中所有存在的表单项文本 (默认为false)
TextField
stateEvents : Array
一个事件数组，当它们被触发时，组件需要保存自己的状态(默认值为 none)...

一个事件数组，当它们被触发时，组件需要保存自己的状态(默认值为 none)。 它们可以是任何该组件支持的事件类型，包括浏览器事件和 自定义事件(例如['click', 'customerchange'])。

对于保存和恢复组件状态的详细解释，参见 stateful

Component
stateId : String
为该组件指定的唯一的id值，它被用作管理组件状态的目的...
为该组件指定的唯一的id值，它被用作管理组件状态的目的。 (如果设定了id，默认值为组件自己的id，否则，如果组件使用自动生成的id，此值为null)。

对于保存和反解析组件状态的解释，参见 stateful 。

Component
stateful : Boolean
一个标志参数，它将引起组件在启动时尝试从一个保存的状态中恢复内部状态参数...

一个标志参数，它将引起组件在启动时尝试从一个保存的状态中恢复内部状态参数。 组件必须要么拥有一个 stateId 或者 id ，它们被分配给需要被管理的状态属性。 在跨页面加载时，不保证自动生成的id属性的稳定性， 并且，不能依赖此id来保存和恢复一个组件的相同状态。

为了保存状态的操作能够工作，状态管理器的提供者必须 被设置成一个Ext.state.Provider 的实现类，它覆盖了set 和get 方法，以便保存和恢复name/value对。 有一个内置的Ext.state.CookieProvider 可用。

为当前页面设置状态提供者:

Ext.state.Manager.setProvider(new Ext.state.CookieProvider({
    expires: new Date(new Date().getTime()+(1000*60*60*24*7)), //7 days from now
}));

当 stateEvents 配置项中其中之一的事件被触发时， 一个状态可保存的组件将试图保存其状态。

保存状态时，一个可保存状态的组件首先需要通过调用 getState 方法来序列化它的状态。 默认情况下，此函数什么事都不做。 开发者必须提供一个实现，返回一个hash对象，它描述了组件可恢复的状态。

getState方法产生的值将会传递给 Ext.state.Manager.set 方法，它使用配置的 Ext.state.Provider 来保存对象，以组件的 stateId 为key，或者，如果此值（指stateId）没有指定时， 使用它的 id 作为key。

在进行构造时，一个可保存状态的组件试图通过调用 Ext.state.Manager.get方法来 恢复它的状态，传递 stateId 或者，如果此值（指stateId）没有指定时， 使用它的 id 作为参数。

结果对象被传递给 applyState 。 applyState 的默认实现只是简单地把属性拷贝到对象中， 但是开发者可以覆盖此方法以支持更多行为。

通过向 beforestaterestore, staterestore, beforestatesave 和 statesave 事件上绑定监听器，你可以在保存和恢复状态时进行额外的处理。

Component
stripCharsRe : RegExp
一个JavaScript RegExp对象，用来在校验之前从值中剥离不想要的内容(默认为 null)。
TextField
style : String
被添加到组件元素的特定样式。 必须是按照...
被添加到组件元素的特定样式。 必须是按照 Ext.Element.applyStyles 类指定格式的合法参数值。

new Ext.Panel({
    title: 'Some Title',
    renderTo: Ext.getBody(),
    width: 400, height: 300,
    layout: 'form',
    items: [{
        xtype: 'textarea',
        style: {
            width: '95%',
            marginBottom: '10px'
        }
    },
        new Ext.Button({
            text: 'Send',
            minWidth: '100',
            style: {
                marginBottom: '10px'
            }
        })
    ]
});
Component
submitValue : Boolean
False将会清除表单项的name属性，这样在提交表单时它将不会被提交。 默认为true。
Field
tabIndex : Number
该表单项的tabIndex。 注意，此属性仅仅应用到被渲染好的，而不是那些通过applyTo...
该表单项的tabIndex。 注意，此属性仅仅应用到被渲染好的，而不是那些通过applyTo创建的表单项 (默认为undefined)。
Field
tabTip : String
注: 这个配置只用于当该组件作为TabPanel的一个子项目时使用...

注: 这个配置只用于当该组件作为TabPanel的一个子项目时使用。

一个String类型的innerHTML(支持html标签)，当鼠标放在该选项上的时，显示一个tooltip。为了tips能够被渲染，Ext.QuickTips.init()必须被提前调用。
BoxComponent
tpl : Mixed
一个 Ext.Template , Ext.XTemplate 或者一个用来形成一个Ext.XTemplate的字符串数组...
一个 Ext.Template , Ext.XTemplate 或者一个用来形成一个Ext.XTemplate的字符串数组。 与 data 和 tplWriteMode 配置项协同使用。
Component
tplWriteMode : String
刷新组件的内容区域时使用的Ext.(X)Template方式。 默认为'overwrite' (参见 Ext.XTemplate.overwrite )。
刷新组件的内容区域时使用的Ext.(X)Template方式。 默认为'overwrite' (参见 Ext.XTemplate.overwrite )。
Component
validateOnBlur : Boolean
在表单项失去焦点时是否进行校验(默认为 true)。
Field
validationDelay : Number
在用户开始输入到校验操作开始之间的时长毫秒数 (默认为250)
Field
validationEvent : String/Boolean
引发表单项进行校验操作的事件。 设置为false可以禁用自动校验 (默认为'keyup')。
引发表单项进行校验操作的事件。 设置为false可以禁用自动校验 (默认为'keyup')。
Field
validator : Function
一个自定义的校验方法，在校验表单项时调用( validateValue) (默认为...

一个自定义的校验方法，在校验表单项时调用( validateValue) (默认为 null)。 如果指定，此函数会被第一个调用，允许开发者覆盖默认的校验过程。

此方法会被传入以下参数:

  • value : Mixed
    表单项的当前值

此方法将会返回:

  • true : Boolean
    true 如果值合法
  • msg : String
    如果值是非法时的出错信息
TextField
value : Mixed
当前表单项的初始化值(默认为undefined).
Field
vtype : String
一个校验类型名，在Ext.form.VTypes 中定义(默认为null)
TextField
vtypeText : String
一个自定义的出错消息，用来替代为当前表单项所设置的...
一个自定义的出错消息，用来替代为当前表单项所设置的 vtype 所提供的默认消息(默认为'')。 注意: 只有设置了 vtype 时才应用此项，否则忽略。
TextField
width : Number
组件的宽度(默认值为 auto)。注:如果想使用百分比的方式...
组件的宽度(默认值为 auto)。注:如果想使用百分比的方式来设置值，请查看 Ext.Component.anchor。
BoxComponent
x : Number
如果被包含在一个指定位置的容器中，这个值表示x(left)坐标值。
BoxComponent
xtype : String
需要创建配置的xtype。 当传递一个配置对象给构造函数时...
需要创建配置的xtype。 当传递一个配置对象给构造函数时，此配置选项不会被使用。 只有在使用懒初始化的时候此配置项才会被使用，此时容器的子项目不是 通过一个完整的实例组件，而是通过一个Component配置指定的。 在渲染时，将会查找xtype以决定创建何种类型的子组件。

预定义的xtype列表如下： here。

如果你继承Component创建你自己的组件，你需要使用Ext.ComponentMgr.registerType 对它们进行注册，以便利用懒初始化和渲染机制。
Component
y : Number
如果被包含在一个指定位置的容器中，这个值表示y(top)坐标值。
BoxComponent

公共属性

Property Defined By
disabled : Boolean
当前组件处于无效状态时为true。 Read-only.
Component
el : Ext.Element
封装了当前组件的Ext.Element。 Read-only。通常情况下，这将是一个<DIV>元素，它由此类的...

封装了当前组件的Ext.Element。 Read-only。

通常情况下，这将是一个<DIV>元素，它由此类的 onRender方法创建，但是它可以通过使用 autoEl 配置项进行覆盖。

注意: 直到组件渲染完成此元素都将处于无效状态。

如需向当前组件的 DOM事件(而不是当前组件自己的Observable事件)添加监听器， 更多建议，参见 listeners 配置项，或者直接使用一个render监听器:

new Ext.Panel({
    title: 'The Clickable Panel',
    listeners: {
        render: function(p) {
            // Append the Panel to the click handler's argument list.
            p.getEl().on('click', handlePanelClick.createDelegate(null, [p], true));
        },
        single: true  // Remove the listener after first invocation
    }
});

另请参见 getEl

Component
hidden : Boolean
如果当前组件处于隐藏状态，此值为true。Read-only。
Component
initialConfig : Object
当前组件的初始化配置描述。 Read-only。
Component
label : Ext.Element
关联到当前表单项的label元素。 只有在当前表单项已经被一个Ext.layout.FormLayout ...

关联到当前表单项的label元素。 只有在当前表单项已经被一个Ext.layout.FormLayout 布局管理器渲染之后才可用。

Field
originalValue : mixed
表单项原来的值，它是在value 中配置的；或者，如果 trackResetOnLoad 设置为...
表单项原来的值，它是在value 中配置的；或者，如果 trackResetOnLoad 设置为 true 时，通过表单加载操作最后一次加载的。
Field
ownerCt : Ext.Container
组件所属的Container (默认为undefined，当前组件被添加到一个容器中时此值被自动设置)...
组件所属的Container (默认为undefined，当前组件被添加到一个容器中时此值被自动设置)。 Read-only。

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

Component
refOwner : Ext.Container
如果当前组件是一个容器的孩子，并且是通过一个 ref 配置项被注册的，则此值为 ref 引用被插入到的祖先容器。
如果当前组件是一个容器的孩子，并且是通过一个 ref 配置项被注册的，则此值为 ref 引用被插入到的祖先容器。
Component
rendered : Boolean
如果当前组件已经被渲染了，此值为true。Read-only.
Component
startValue : mixed
表单项最后一次获得焦点时所拥有的值。 这就是传递给change 事件的值...

表单项最后一次获得焦点时所拥有的值。 这就是传递给change 事件的值，此事件在值被改变并失去焦点时触发。

直到表单项被访问之前此值都是undefined 与originalValue 进行比较。

Field

公共方法

Method Defined By
TextArea ( Object config )
创建一个新的TextArea
创建一个新的TextArea
参数:
  • config : Object
    配置选项
返回值:
  • void
TextArea
addClass ( string cls ) : Ext.Component
为组件底层的元素添加CSS样式。
为组件底层的元素添加CSS样式。
参数:
  • cls : string
    需要添加的CSS样式的class名称
返回值:
  • Ext.Component
    this
Component
addEvents( Object|String o, string Optional. ) : void
添加指定的事件到事件列表上，事件会被该Observable触发。
添加指定的事件到事件列表上，事件会被该Observable触发。
参数:
  • o : Object|String
    以事件名作为属性true作为值的对象 或者当多个事件名被分开的传递时则为第一个事件名。
  • Optional. : string
    事件名被分开的传递时则为事件名。 用法:
    this.addEvents('storeloaded', 'storecleared');
返回值:
  • void
Observable
addListener( String eventName, Function handler, [Object scope], [Object options] ) : void
给对象添加事件处理器。
给对象添加事件处理器。
参数:
  • eventName : String
    监听的事件名。
  • handler : Function
    事件调用的方法
  • scope : Object
    （可选）处理方法执行的作用域 (this的引用 reference)。 如果被忽略。默认为触发事件的对象。
  • options : Object
    （可选）包含处理器配置和属性的对象。 可能包含以下的属性:
    • scope : Object
      处理方法执行的作用域(this的引用) 。 如果被忽略。默认为触发事件的对象。
    • delay : Number
      在触发事件后延迟调用处理器的毫秒数。
    • single : Boolean
      如果为True则添加一个处理器来处理下一次的事件触发（仅一次），然后移除自己。
    • buffer : Number
      使得处理器延迟指定毫秒数后预定的运行在 一个Ext.util.DelayedTask中 。 如果事件在时间内再一次被触发，原始的处理器不会被调用，但是新的处理器会预定的在他的位置上。
    • target : Observable
      如果事件在目标的Observable上触发则仅仅调用处理器， 否则 事件会从子类的Observable上冒泡

    组合选项
    使用这些选项参数,可能会组合出不同类型的监听器：

    一个延迟的，一次性的监听器。

    myDataView.on('click', this.onClick, this, {
single: true,
delay: 100
});

    一次调用附加多个处理器
    该方法同样支持传递一个包含指定的多个处理器的属性的配置对象参数。

    myGridPanel.on({
'click' : {
    fn: this.onClick,
    scope: this,
    delay: 100
},
'mouseover' : {
    fn: this.onMouseOver,
    scope: this
},
'mouseout' : {
    fn: this.onMouseOut,
    scope: this
}
});

    或者一个简写的语法：

    myGridPanel.on({
'click' : this.onClick,
'mouseover' : this.onMouseOver,
'mouseout' : this.onMouseOut,
 scope: this
});
返回值:
  • void
Observable
applyToMarkup ( String/HTMLElement el ) : void
将此组件添加到已存在的有效的HTML标签中。 使用该方法时，无需再调用render()方法。
将此组件添加到已存在的有效的HTML标签中。 使用该方法时，无需再调用render()方法。
参数:
  • el : String/HTMLElement
返回值:
  • void
Component
autoSize () : void
自动增加表单项以适应文本高度，直到表单项允许的最大高度。 这仅仅在grow = true时才有效...
自动增加表单项以适应文本高度，直到表单项允许的最大高度。 这仅仅在grow = true时才有效，并且在高度改变时会触发 autosize 事件。
参数:
  • 无。
返回值:
  • void
TextArea
clearInvalid () : void
清除当前表单项上的所有非法styles/messages(样式/消息)
清除当前表单项上的所有非法styles/messages(样式/消息)
参数:
  • 无。
返回值:
  • void
Field
cloneConfig ( Object overrides ) : Ext.Component
默认使用原先传递给当前实例的配置值克隆当前组件。
默认使用原先传递给当前实例的配置值克隆当前组件。
参数:
  • overrides : Object
    一个新的配置项，包含需要覆盖到克隆版本的所有属性。 可以传递一个id参数给此对象，否则将自动生成一个新的id以避免发生重复。
返回值:
  • Ext.Component
    当前组件的克隆副本
Component
destroy () : void
通过如下方法销毁对象：删除所有的事件监听器、将组件的元素从DOM树中删除...
通过如下方法销毁对象：删除所有的事件监听器、将组件的元素从DOM树中删除（如果可以）、 将组件从它的 Ext.Container（如果可用）中删除、 并且将它从Ext.ComponentMgr中 注销。 销毁操作一般由框架自动完成，一般情况下不需要直接调用该方法。
参数:
  • 无。
返回值:
  • void
Component
disable () : Ext.Component
将组件置为无效状态，并出发'disable'事件。
将组件置为无效状态，并出发'disable'事件。
参数:
  • 无。
返回值:
  • Ext.Component
    this
Component
enable () : Ext.Component
将组件置为有效状态并触发'enable'事件。
将组件置为有效状态并触发'enable'事件。
参数:
  • 无。
返回值:
  • Ext.Component
    this
Component
enableBubble( String/Array events ) :void
是否现在使得事件会被该Observable触发并调用 this.getBubbleTarget()方法在拥有者的继承树...

是否现在使得事件会被该Observable触发并调用 this.getBubbleTarget()方法在拥有者的继承树中冒泡。Observable的基础类中没有该方法的实现。

该方法一般被Ext.Components用来冒泡事件到拥有者的容器。参看Ext.Component.getBubbleTarget默认的实现 在Ext.Component中返回组件的直接拥有者。但是如果需要的是一个已知的目标，该方法可以被重写来更快的访问需求的目标。

例子:

Ext.override(Ext.form.Field, {
    // 添加方法到Field的initComponent上改变事件为冒泡
    initComponent : Ext.form.Field.prototype.initComponent.createSequence(function() {
        this.enableBubble('change');
    }),

    // 我们知道我们想让Field的事件冒泡到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() {
            // 如果样式被修改标题会变红。
            myForm.header.setStyle('color', 'red');
        }
    }
});
参数:
  • events : String/Array
    冒泡的事件名，或事件名数组
返回值:
  • void
Observable
findParentBy ( Function fn ) : Ext.Container
通过自定义的函数查找当前组件上层任何层次上的容器...
通过自定义的函数查找当前组件上层任何层次上的容器。 如果传递的函数返回true，容器对象将被返回。
参数:
  • fn : Function
    自定义的函数，使用如下参数调用(container,this component)。
返回值:
  • Ext.Container
    自定义函数返回true的第一个容器
Component
findParentByType ( String/Class xtype ) : Ext.Container
通过xtype或者class查找当前组件上层任何层次上的容器
通过xtype或者class查找当前组件上层任何层次上的容器
参数:
  • xtype : String/Class
    组件的xtype字符串，或者直接是组件的class
返回值:
  • Ext.Container
    符合指定xtype或者class的第一个容器
Component
fireEvent( String eventName, Object... args ) : Boolean
用传入的参数触发指定的事件 (减去事件名)。 一个事件可以被设置为冒泡 Obse...

用传入的参数触发指定的事件 (减去事件名)。

一个事件可以被设置为冒泡到Observable父类继承树(参看 Ext.Component.getBubbleTarget) 调用enableBubble实现。

参数:
  • eventName : String
    触发的事件名。
  • args : Object...
    传递给处理器的可变长度参数。
返回值:
  • Boolean
    如果有任何的处理器返回false则返回false，否则返回true。
Observable
focus ( [ Boolean selectText ], [ Boolean/Number delay ] ) : Ext.Component
尝试将当前组件设为焦点。
尝试将当前组件设为焦点。
参数:
  • selectText : Boolean
    (可选) 如果可用，同时选中组件内部的文本
  • delay : Boolean/Number
    (可选)将当前组件设置为焦点的延迟时间(设置为true等于0毫秒)
返回值:
  • Ext.Component
    this
Component
getActiveError () : String
获取当前表单项活动的出错消息。
获取当前表单项活动的出错消息。
参数:
  • 无。
返回值:
  • String
    返回表单项上活动的出错消息，如果没有错误，返回一个空字符串。
Field
getBox ( [ Boolean local ] ) : Object
获取组件底层元素当前盒子模型的尺寸。（译者注：盒子模型是CSS术语，详细解释请自行搜索。）
获取组件底层元素当前盒子模型的尺寸。（译者注：盒子模型是CSS术语，详细解释请自行搜索。）
参数:
  • local : Boolean
    (可选)值为true时，组件的left值和top值将代替页面的XY被返回。(默认值为false)
返回值:
  • Object
    返回值的格式{x, y, width, height}
BoxComponent
getBubbleTarget () : Ext.Container
为Observable的fireEvent方法提供链接，它沿着继承结构进行冒泡操作。
为Observable的fireEvent方法提供链接，它沿着继承结构进行冒泡操作。
参数:
  • 无。
返回值:
  • Ext.Container
    拥有当前组件的容器。
Component
getEl () : Ext.Element
返回 Ext.Element ，它包装了当前组件。...

返回 Ext.Element ，它包装了当前组件。

通常情况下，这将是一个<DIV>元素，它是由该类的onRender方法创建的， 但是可以使用autoEl配置项 覆盖它。

注意: 此元素将会一直处于无效状态直到当前组件渲染完成。

如需向当前组件的 DOM事件(而不是当前组件自己的Observable事件)添加监听器， 更多建议，参见 listeners 配置项，或者直接使用一个render监听器:

new Ext.Panel({
    title: 'The Clickable Panel',
    listeners: {
        render: function(p) {
            // Append the Panel to the click handler's argument list.
            p.getEl().on('click', handlePanelClick.createDelegate(null, [p], true));
        },
        single: true  // Remove the listener after first invocation
    }
});
参数:
  • 无。
返回值:
  • Ext.Element
    包装当前组件的元素。
Component
getErrors () : Array
运行当前表单项的校验器并返回一个所有校验错误信息数组。 此方法在校验期间在内部调用并且一般情况下...
运行当前表单项的校验器并返回一个所有校验错误信息数组。 此方法在校验期间在内部调用并且一般情况下不需要手工调用。 每个子类都应该重写或者增加返回值以提供它们自己的出错消息
参数:
  • 无。
返回值:
  • Array
    当前表单项的所有出错消息
TextField
getHeight () : Number
获取该组件的当前高度值。
获取该组件的当前高度值。
参数:
  • 无。
返回值:
  • Number
BoxComponent
getId () : String
返回当前组件的id，如果没有定义id，则自动生成并返回一个id:'ext-comp-'...
返回当前组件的 id 如果没有定义 id 则自动生成并返回一个 id

'ext-comp-' + (++Ext.Component.AUTO_ID)
参数:
  • 无。
返回值:
  • String
    id
Component
getItemId () : String
返回当前组件的 itemId 。 如果没有通过配置参数指定 itemId 那么，将会使用...
返回当前组件的 itemId 。 如果没有通过配置参数指定 itemId 那么，将会使用 getId 返回 id 。
参数:
  • 无。
返回值:
  • String
Component
getName () : String
如果可用，返回表单项的 name 或者 hiddenName 属性。
如果可用，返回表单项的 name 或者 hiddenName 属性。
参数:
  • 无。
返回值:
  • String
    name 表单项的{@link Ext.form.Field#name name}或者{@link Ext.form.ComboBox#hiddenName hiddenName}
Field
getOuterSize () : Object
获取当前组件所在元素的尺寸大小，包括边缘的空白处。
获取当前组件所在元素的尺寸大小，包括边缘的空白处。
参数:
  • 无。
返回值:
  • Object
    一个包含元素大小的对象 {width: (element width + left/right margins), height: (element height + top/bottom margins)}
BoxComponent
getPosition ( [ Boolean local ] ) : Array
获取组件底层元素当前的XY位置。
获取组件底层元素当前的XY位置。
参数:
  • local : Boolean
    (可选)如果为true，将返回元素的left和top值，而不是相对于页面内的 XY。(默认值为 false)
返回值:
  • Array
    元素的XY位置值(例如：[100, 200])
BoxComponent
getRawValue () : Mixed
返回原始数据值，可能不是一个合法的、已定义的值。 返回格式化的值参见...
返回原始数据值，可能不是一个合法的、已定义的值。 返回格式化的值参见 getValue。
参数:
  • 无。
返回值:
  • Mixed
    value 表单项的值
Field
getResizeEl () : Ext.Element
返回该组件的最外层用来定义这些组件整体大小的Element...

返回该组件的最外层用来定义这些组件整体大小的Element对象。

通常用 getEl 方法将会返回相同的Element对象，但在有些情况下，组件可能有一些更多的封装了它的主要动态Element对象的Element对象。

例如ComboBox。它是封装在一个包含<input>元素的包装元素里(这将返回其 getEl方法和触发按钮的元素)。返回的元素为resizeEl。

参数:
  • 无。
返回值:
  • Ext.Element
    The Element which is to be resized by size managing layouts.
BoxComponent
getSize () : Object
获取组件底层元素当前的大小。
获取组件底层元素当前的大小。
参数:
  • 无。
返回值:
  • Object
    一个包含元素大小的对象{width: (element width), height: (element height)}
BoxComponent
getValue () : Mixed
返回格式化的数据值(undefined或者emptyText将会以''返回)。 如需返回原始值，参见...
返回格式化的数据值(undefined或者emptyText将会以''返回)。 如需返回原始值，参见 getRawValue。
参数:
  • 无。
返回值:
  • Mixed
    value 表单项的值
Field
getWidth () : Number
获取该组件的当前宽度值。
获取该组件的当前宽度值。
参数:
  • 无。
返回值:
  • Number
BoxComponent
getXType () : String
获取当前组件的xtype，它是用 Ext.ComponentMgr 注册的。 所有可用的xtype列表，参见...
获取当前组件的xtype，它是用 Ext.ComponentMgr 注册的。 所有可用的xtype列表，参见 Ext.Component 类头部。示例用法:

var t = new Ext.form.TextField();
alert(t.getXType());  // alerts 'textfield'
参数:
  • 无。
返回值:
  • String
    The xtype
Component
getXTypes () : String
返回此组件的xtype继承树，用字符'-'分隔。 所有可用的xtype值...

返回此组件的xtype继承树，用字符'-'分隔。 所有可用的xtype值，请参见Ext.Component 类的头部。

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

示例用法:

var t = new Ext.form.TextField();
alert(t.getXTypes());  // alerts 'component/box/field/textfield'
参数:
  • 无。
返回值:
  • String
    xtype层次字符串
Component
hasListener( String eventName ) : Boolean
检测对象是否包含指定事件的任何监听器
检测对象是否包含指定事件的任何监听器
参数:
  • eventName : String
    检测的事件名
返回值:
  • Boolean
    如果事件被监听则为true，否则为false
Observable
hide () : Ext.Component
隐藏当前组件。 监听 beforehide' 事件并且返回false 可以取消隐藏组件的操作。 在隐藏组件之后触发...
隐藏当前组件。 监听 beforehide' 事件并且返回false 可以取消隐藏组件的操作。 在隐藏组件之后触发 ' hide' 事件。 如果组件被配置成 hidden 那么此方法在内部被调用。
参数:
  • 无。
返回值:
  • Ext.Component
    this
Component
isDirty () : Boolean
如果此表单项的值与原始值相比发生了改变，返回true。 如果表单项...

如果此表单项的值与原始值相比发生了改变，返回true。 如果表单项被禁用或者尚未被渲染将会返回false。

注意，如果所属的 form 配置了一个Ext.form.BasicForm， 那么在使用Ext.form.BasicForm. setValues 加载值之后，原始值将会被更新。

参数:
  • 无。
返回值:
  • Boolean
    如果此表单项的值与原始值相比发生了改变(并且没有被禁用)，返回true，其它返回false。
Field
isValid ( Boolean preventMark ) : Boolean
通过 校验 表单项 处理后的值 ，返回表单项当前值是否合法。...
通过 校验 表单项 处理后的值 ，返回表单项当前值是否合法。 注意: disabled 的表单项将会被忽略。
参数:
  • preventMark : Boolean
    True将会禁止把表单项标记为非法
返回值:
  • Boolean
    如果值是合法的，为true，其它为false
Field
isVisible () : Boolean
如果当前组件可见，返回true。
如果当前组件可见，返回true。
参数:
  • 无。
返回值:
  • Boolean
    如果当前组件可见，返回true，其它返回false。
Component
isXType ( String xtype , [ Boolean shallow ] ) : Boolean
Tests whether or not this Component is of a specific xtype. This can test whether this Component is descended from th...

测试此组件是否是指定的xtype。此方法既可以测试是否是指定的xtype的某个子类， 或者它是否直接是指定的xtype类(shallow=true)。

如果使用你自己的子类，必须知道组件必须注册它的xtype值。

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

示例用法:

var t = new Ext.form.TextField();
var isText = t.isXType('textfield');        // true
var isBoxSubclass = t.isXType('box');       // true, descended from BoxComponent
var isBoxInstance = t.isXType('box', true); // false, not a direct BoxComponent instance
参数:
  • xtype : String
    需要为当前组件进行检测的xtype
  • shallow : Boolean
    (可选) 如果为false，检测组件是否是xtype继承树中的某个子类（默认是这种情况）， 如果为true，只检测组件是否是指定的xtype类型。
返回值:
  • Boolean
    如果当前组件是指定xtype的子类，返回true，其它返回flase。
Component
markInvalid ( [ String msg ] ) : void
显示一个关联到当前表单项的出错信息， 使用msgTarget 来决定如何显示消息并将...

显示一个关msgTarget 来决定如何显示消息并将 invalidClass 应用到表单项的UI元素上。

注意: 如果表单项的值确实通过了校验， 此方法不会导致表单项的 validate 方法返回 false 。 所以简单地把一个表单项标记为非法并不会阻止表单项 通过设置的 Ext.form.Action.Submit.clientValidation 被提交。

invalid.
参数:
  • msg : String
    (可选)校验信息(默认为invalidText)
返回值:
  • void
Field
mon ( Observable|Element item , Object|String ename , Function fn , Object scope , Object opt ) : void
向任何Observable对象(或者元素)上添加监听器，监听器将会在组件...

向任何Observable对象(或者元素)上添加监听器，监听器将会在组件销毁时被自动删除。
用法：

myGridPanel.mon(myGridPanel.getSelectionModel(), 'selectionchange', handleSelectionChange, null, {buffer: 50});

or:

myGridPanel.mon(myGridPanel.getSelectionModel(), {
    selectionchange: handleSelectionChange,
    buffer: 50
});
参数:
  • item : Observable|Element
    需要添加listener/listeners的项目。
  • ename : Object|String
    事件名，或者一个包含事件名属性的对象。
  • fn : Function
    (可选) 如果 ename 参数是一个事件名，此参数为处理函数。
  • scope : Object
    (可选)如果 ename 参数是一个事件名称，此参数是作用域 ( this 引用)，监听函数将会在此作用域中被执行。
  • opt : Object
    (可选)如果 ename 参数是一个事件名称， 此参数是 addListener 配置项。
返回值:
  • void
Component
mun ( Observable|Element item , Object|String ename , Function fn , Object scope ) : void
删除通过mon 方法添加的监听器。
删除通过mon 方法添加的监听器。
参数:
  • item : Observable|Element
    需要删除listener/listeners的项目。
  • ename : Object|String
    事件名称，或者一个包含事件名称属性的对象。
  • fn : Function
    (可选)如果 ename 参数是一个事件名称，此参数是一个处理函数。
  • scope : Object
    (可选)如果 ename 参数是一个事件名称，此参数是作用域 ( this 引用)，监听函数将会在此作用域中被执行。
返回值:
  • void
Component
nextSibling () : Ext.Component
返回所属容器中的下一个组件
返回所属容器中的下一个组件
参数:
  • 无。
返回值:
  • Ext.Component
Component
on( String eventName, Function handler, [Object scope], [Object options] ) : void
给对象添加事件处理器 (addListener的简写形式)
给对象添加事件处理器 (addListener的简写形式。)
参数:
  • eventName : String
    监听的事件类型
  • handler : Function
    事件调用的方法
  • scope : Object
    （可选）处理方法执行时的作用域 (this 的引用)。 如果被忽略。默认为触发事件的对象。
  • options : Object
    可选 包含处理器配置的对象。
返回值:
  • void
Observable
previousSibling () : Ext.Component
返回所属容器中的前一个组件
返回所属容器中的前一个组件
参数:
  • 无。
返回值:
  • Ext.Component
Component
processValue ( Mixed value ) : void
仅仅在需要准备原始值供校验时，才需要覆盖此方法(参见 validate和 isValid)。...
仅仅在需要准备原始值供校验时，才需要覆盖此方法(参见 validate和 isValid)。 此方法被期望为表单项返回处理后的值，此值将会被用来进行校验 (参见validateValue方法)。
参数:
  • value : Mixed
返回值:
  • void
Field
purgeListeners() : void
移除对象上所有的监听器
移除对象上所有的监听器
参数:
  • 无。
返回值:
  • void
Observable
relayEvents( Object o, Array events ) : void
从指定的Observable上传递选择的事件就好像被当前对象触发一样。
从指定的Observable上传递选择的事件就好像被当前对象触发一样。
参数:
  • o : Object
    该Observable上的事件被当前对象传递。
  • events : Array
    传递的数组名。
返回值:
  • void
Observable
removeClass ( string cls ) : Ext.Component
从组件底层的元素上删除一个CSS类。
从组件底层的元素上删除一个CSS类。
参数:
  • cls : string
    需要移除的CSS类名
返回值:
  • Ext.Component
    this
Component
removeListener( String eventName, Function handler, [Object scope] ) : void
删除一个事件处理器。
删除一个事件处理器。
参数:
  • eventName : String
    处理器关联的事件类型。
  • handler : Function
    移除的处理器。 这应该是传递到addListener里的方法的引用。
  • scope : Object
    （可选）处理器指定的初始作用域。
返回值:
  • void
Observable
render ( [ Element/HTMLElement/String container ], [ String/Number position ] ) : void
在传递进来的HTML元素中渲染当前组件。...

在传递进来的HTML元素中渲染当前组件。

如果你正在使用一个Container 对象放置当前组件，那么请不要使用render方法。

当容器第一次被渲染时，它的子组件将会被容器的 layout 管理器渲染。

某些布局管理器允许动态添加子组件。它们包括 Ext.layout.CardLayout, Ext.layout.AnchorLayout, Ext.layout.FormLayout, Ext.layout.TableLayout。

当一个新的子组件被添加时，如果容器已经被渲染了， 你可能需要调用容器的 doLayout 方法来刷新视图，它将导致所有没有被渲染的子组件进行渲染操作。 此操作是必须的，这样你可以添加多个子组件而只刷新一次layout。

当创建复杂的UI时，非常重要的一点是，请记住调整子项目的尺寸和位置是容器的 layout 管理器的职责。 如果你希望子项目的尺寸对用户交互作出反应， 你必须为容器配置一个布局管理器，它将创建和管理你心里想要的那种布局。

忽略容器的layout 配置意味着将会使用一个基本的布局管理器，它除了按次序把子组件 渲染到容器中之外什么事情都不做。 这种情况下，任何尺寸和位置的调整操作都不会发生。

参数:
  • container : Element/HTMLElement/String
    (可选) 需要在其中渲染当前组件的元素。 如果它是从一个已存在的标签中创建的，此参数应该被忽略。
  • position : String/Number
    (可选) 容器中的一个元素ID或者一个DOM节点索引， 当前组件将会被插入到它前面 (默认append到容器的尾部)
返回值:
  • void
Component
reset () : void
将表单项的当前值重置为以前加载时的值，并且清除所有校验信息。...
将表单项的当前值重置为以前加载时的值，并且清除所有校验信息。 参见Ext.form.BasicForm. trackResetOnLoad 。
参数:
  • 无。
返回值:
  • void
TextField
resumeEvents() : void
重新开始触发事件。(参见suspendEvents) 如果事件以queueSuspended参数被挂起，则在事件被挂起时 ...
重新开始触发事件。(参见 suspendEvents) 如果事件以queueSuspended 参数被挂起，则在事件被挂起时触发的事件会被传递到所有的监听器上
参数:
  • 无。
返回值:
  • void
Observable
selectText ( [ Number start ], [ Number end ] ) : void
选中当前表单项中的文本
选中当前表单项中的文本
参数:
  • start : Number
    (可选)选中的起点索引(默认为0)
  • end : Number
    (可选)选中的结束索引(默认为文本长度)
返回值:
  • void
TextField
setActiveError ( String msg , Boolean suppressEvent ) : void
将当前activeError设置为所给的字符串。 触发'invalid'事件。这不会设置出错图标...
将当前activeError设置为所给的字符串。 触发'invalid'事件。这不会设置出错图标，仅仅设置消息并触发事件。 如需显示出错图标，可使用markInvalid代替，它将在内部调用此方法。
参数:
  • msg : String
    出错消息
  • suppressEvent : Boolean
    True将会禁止触发'invalid'事件
返回值:
  • void
Field
setAutoScroll ( Boolean scroll ) : Ext.BoxComponent
设置该组件内容溢出时是否自动显示滚动条。
设置该组件内容溢出时是否自动显示滚动条。
参数:
  • scroll : Boolean
    值为true的话组件自动显示滚动条。
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setDisabled ( Boolean disabled ) : Ext.Component
工具函数，使用布尔值设置有效/无效(disabled/enabled )。
工具函数，使用布尔值设置有效/无效(disabled/enabled )。
参数:
  • disabled : Boolean
返回值:
  • Ext.Component
    this
Component
setHeight ( Mixed height ) : Ext.BoxComponent
设置此组件的高度。该方法将触发resize事件。
设置此组件的高度。该方法将触发resize事件。
参数:
  • height : Mixed
    The new height to set.
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setPagePosition ( Number x , Number y ) : Ext.BoxComponent
设置组件在页面中的XY位置。 如果需要设置left和top值 ，请使用...
设置组件在页面中的XY位置。 如果需要设置left和top值 ，请使用setPosition方法。 该方法触发move事件。
参数:
  • x : Number
    The new x position
  • y : Number
    The new y position
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setPosition ( Number left , Number top ) : Ext.BoxComponent
设置组件的left和top值。设置组件的页面XY值，请使用setPagePosition方法。该方法触发...
设置组件的left和top值。设置组件的页面XY值，请使用setPagePosition方法。该方法触发move事件。
参数:
  • left : Number
    The new left
  • top : Number
    The new top
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setRawValue ( Mixed value ) : Mixed
绕过校验，直接设置底层DOM表单项的值。 设置值并进行校验，参见 setValue。
绕过校验，直接设置底层DOM表单项的值。 设置值并进行校验，参见 setValue。
参数:
  • value : Mixed
    需要设置的值
返回值:
  • Mixed
    value 被设置的表单项值
Field
setReadOnly ( Boolean readOnly ) : void
设置当前表单项的只读状态。
设置当前表单项的只读状态。
参数:
  • readOnly : Boolean
    表单项是否应该只读。
返回值:
  • void
Field
setSize ( Mixed width , Mixed height ) : Ext.BoxComponent
设置BoxComponent的宽度和高度。 此方法触发resize事件...
设置BoxComponent的宽度和高度。 此方法触发resize事件。此方法可以接收单独的width或者height值作为参数， 或者你可以传递像这样的一个size对象： {width:10, height:20} 。
参数:
  • width : Mixed
    设置的新的width值。这可以是：
    • 一个Number类型指定Element新的宽度 Ext.Element.defaultUnit(默认为像素 :'px')。
    • 一个String类型用于设置width的CSS样式。
    • 一个size对象格式为 {width: widthValue, height: heightValue} 。
    • 值为 undefined 时，保留原来的width不变。
  • height : Mixed
    设置的新的height值(如果第一个参数传递了一个size对象，此参数没有必要传递)。这可以是：
    • 一个Number类型指定Element新的高度 Ext.Element.defaultUnit(默认为像素 :'px')。
    • 一个String类型用于设置height的CSS样式。也有可能不会被使用到。
    • 值为 undefined 时，保留原来的height不变。
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setValue ( Mixed value ) : Ext.form.Field
向表单项中设置一个数据值并校验之。 如需直接设置值而不进行校验，参见 setRawValue。
向表单项中设置一个数据值并校验之。 如需直接设置值而不进行校验，参见 setRawValue。
参数:
  • value : Mixed
    需要设置的值
返回值:
  • Ext.form.Field
    this
Field
setVisible ( Boolean visible ) : Ext.Component
工具方法，通过使用布尔值隐藏或者显示当前组件。
工具方法，通过使用布尔值隐藏或者显示当前组件。
参数:
  • visible : Boolean
    true时显示，false时隐藏
返回值:
  • Ext.Component
    this
Component
setWidth ( Mixed width ) : Ext.BoxComponent
设置组件的宽度。 此方法触发resize事件。
设置组件的宽度。 此方法触发resize事件。
参数:
  • width : Mixed
    The new width to set.
返回值:
  • Ext.BoxComponent
    this
BoxComponent
show () : Ext.Component
显示当前组件。监听' beforeshow' 事件，返回 false 取消显示组件...
显示当前组件。监听' beforeshow' 事件，返回 false 取消显示组件。在显示组件之后触发' show' 事件。
参数:
  • 无。
返回值:
  • Ext.Component
    this
Component
suspendEvents( Boolean queueSuspended ) : void
暂停触发所有的事件。 (参看resumeEvents)
暂停触发所有的事件。（参看 resumeEvents)
参数:
  • queueSuspended : Boolean
    如果传递为true则排列好暂停的事件使得在调用 resumeEvents 后再触发它们，而不是抛弃所有暂停的事件。
返回值:
  • void
Observable
syncSize () : Ext.BoxComponent
强制组件的大小按照此组件底层元素当前的高度和宽度计算。
强制组件的大小按照此组件底层元素当前的高度和宽度计算。
参数:
  • 无。
返回值:
  • Ext.BoxComponent
    this
BoxComponent
un( String eventName, Function handler, [Object scope] ) : void
删除一个事件处理器(removeListener方法的简写形式)
删除一个事件处理器(removeListener方法的简写形式。)
参数:
  • eventName : String
    处理器关联的事件类型
  • handler : Function
    被删除的处理器 这应该是传入 addListener 中的方法的引用。
  • scope : Object
    （可选）为处理器指定的初始作用域。
返回值:
  • void
Observable
unsetActiveError ( Boolean suppressEvent ) : void
清除activeError并触发'valid'事件。此方法被clearInvalid在内部进行...
清除activeError并触发'valid'事件。此方法被clearInvalid在内部进行调用， 并且一般情况下没有必要手工调用
参数:
  • suppressEvent : Boolean
    True将禁止触发'invalid'事件
返回值:
  • void
Field
update ( Mixed htmlOrData , [ Boolean loadScripts ], [ Function callback ] ) : void
刷新组件的内部区域。
刷新组件的内部区域。
参数:
  • htmlOrData : Mixed
    如果已经通过tpl为当前组件配置了一个模板，那么 将会使用此参数来装配模板。 如果没有为当前组件配置模板，组件的内容区域将会通过Ext.Element 进行刷新。
  • loadScripts : Boolean
    (可选)只用在使用html配置时此参数才合法。默认为false。
  • callback : Function
    (可选)只用在使用html配置时此参数才合法。 当脚本加载完成时回调函数才被执行。
返回值:
  • void
Component
updateBox ( Object box ) : Ext.BoxComponent
设置此组件底层元素的盒子模型尺寸。(译者注：盒子模型是CSS术语，详细资料请自行搜索。)
设置此组件底层元素的盒子模型尺寸。(译者注：盒子模型是CSS术语，详细资料请自行搜索。)
参数:
  • box : Object
    一个格式为{x, y, width, height}的对象
返回值:
  • Ext.BoxComponent
    this
BoxComponent
validate () : Boolean
校验表单项的值
校验表单项的值
参数:
  • 无。
返回值:
  • Boolean
    如果值合法，为true,否则为false
Field
validateValue ( Mixed The ) : Boolean
使用getErrors创建一个校验出错信息数组。 如果发现了任何错误，将会使用第一个错误作为参数...
使用getErrors创建一个校验出错信息数组。 如果发现了任何错误，将会使用第一个错误作为参数调用markInvalid方法并返回 false，否则返回true。以前，要求子类提供此方法的一个实现以处理校验过程--- 从3.2开始，应该用覆盖getErrors方法的方式替代。
参数:
  • The : Mixed
    表单项的当前值
返回值:
  • Boolean
    如果所有校验都通过，此值为true，如果一个或多个校验失败，则为false
Field

公共事件

Event Defined By
added : ( Ext.Component this , Ext.Container ownerCt , number index )
当一个组件被添加到一个Ext.Container时触发
当一个组件被添加到一个Ext.Container时触发
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • ownerCt : Ext.Container
    用于组件的容器
  • index : number
    添加组件的位置
Component
afterrender : ( Ext.Component this )
在组件渲染完成之后触发...

在组件渲染完成之后触发。

afterrender事件在当前组件被rendered 结束之后、在为组件定义的所有afterRender方法执行之后 触发，并且，如果有stateful， 也在状态被保存之后才触发。

监听器将会以如下参数格式被调用:
  • this : Ext.Component
Component
autosize : ( Ext.form.Field this , Number width )
当autoSize 方法被触发时发出此事件。 根据默认的逻辑，表单项可以有也可以实际上没有...
当autoSize 方法被触发时发出此事件。 根据默认的逻辑，表单项可以有也可以实际上没有 改变尺寸，但是此事件提供了一个钩子，如果有需要， 开发者在运行时可以提供额外的逻辑来改变输入栏的大小。
监听器将会以如下的参数格式调用:
  • this : Ext.form.Field
    文本栏
  • width : Number
    表单项新宽度
TextField
beforedestroy : ( Ext.Component this )
在组件 destroyed 之前触发。 在事件监听器中返回false以停止 destroy 操作。
在组件 destroyed 之前触发。 在事件监听器中返回false以停止 destroy 操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforehide : ( Ext.Component this )
在调用hide方法隐藏组件之前触发。 在事件监听器中返回false可以停止隐藏操作。
在调用hide方法隐藏组件之前触发。 在事件监听器中返回false可以停止隐藏操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforerender : ( Ext.Component this )
在组件被rendered 之前触发。 在事件监听器中返回false可以停止render 操作。
在组件被rendered 之前触发。 在事件监听器中返回false可以停止render 操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforeshow : ( Ext.Component this )
在调用show()方法现实组件之前触发。 事件处理函数返回false可以停止show。
在调用show 方法现实组件之前触发。 事件处理函数返回false可以停止show。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforestaterestore : ( Ext.Component this , Object state )
在组件状态恢复之前触发。返回false停止恢复状态操作。
在组件状态恢复之前触发。返回false停止恢复状态操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    StateProvider返回的状态哈希值。 如果没有禁止此事件，那么状态对象会被传递给applyState。 默认情况下，这样简单地把属性值拷贝到当前组件中。 可以覆盖此方法以提供自定的状态恢复操作。
Component
beforestatesave : ( Ext.Component this , Object state )
在组件状态被保存到配置的状态提供者之前触发。 返回false可以停止保存。
在组件状态被保存到配置的状态提供者之前触发。 返回false可以停止保存。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    状态值哈希。 这由在组件上调用getState() 方法决定。 此方法必须由开发者提供，返回是否需要对状态进行描述，默认情况下， Ext.Component有一个空实现。
Component
blur : ( Ext.form.Field this )
当表单项时区输入焦点时触发。
当表单项时区输入焦点时触发。
监听器将会以如下参数被调用:
  • this : Ext.form.Field
Field
change : ( Ext.form.Field this , Mixed newValue , Mixed oldValue )
如果表单项的时发生改变，在表单项刚刚失去焦点时触发。
如果表单项的时发生改变，在表单项刚刚失去焦点时触发。
监听器将会以如下参数格式调用:
  • this : Ext.form.Field
  • newValue : Mixed
    新的值
  • oldValue : Mixed
    原始值
Field
destroy : ( Ext.Component this )
在组件被销毁之后触发。
在组件被destroyed之后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
disable : ( Ext.Component this )
在组件被设置为无效状态后触发。
在组件被设置为无效状态后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
enable : ( Ext.Component this )
当组件被设置为有效(enabled)之后触发。
当组件被设置为有效(enabled)之后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
focus : ( Ext.form.Field this )
当表单项获得输入焦点时触发。
当表单项获得输入焦点时触发。
监听器将会以如下参数格式被调用:
  • this : Ext.form.Field
Field
hide : ( Ext.Component this )
在组件被隐藏之后触发。 当调用hide 方法隐藏组件之后触发。
在组件被隐藏之后触发。 当调用hide 方法隐藏组件之后触发。
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
invalid : ( Ext.form.Field this , String msg )
在表单项被标记为非法之后触发。
在表单项被标记为非法之后触发。
监听器将会以如下参数格式调用:
  • this : Ext.form.Field
  • msg : String
    校验信息
Field
keydown : ( Ext.form.TextField this , Ext.EventObject e )
输入栏的keydown事件。 只有在 enableKeyEvents 被设置为true时才触发此事件。
输入栏的keydown事件。 只有在 enableKeyEvents 被设置为true时才触发此事件。
监听器将会以如下参数格式调用:
  • this : Ext.form.TextField
    文本栏
  • e : Ext.EventObject
TextField
keypress : ( Ext.form.TextField this , Ext.EventObject e )
输入栏的keypress事件。 只有在enableKeyEvents 被设置为true时才触发此事件。
输入栏的keypress事件。 只有在enableKeyEvents 被设置为true时才触发此事件。
Listeners will be called with the following arguments:
  • this : Ext.form.TextField
    文本栏
  • e : Ext.EventObject
TextField
keyup : ( Ext.form.TextField this , Ext.EventObject e )
输入栏keyup事件。 只有在 enableKeyEvents 被设置为true时才触发此事件。
输入栏keyup事件。 只有在 enableKeyEvents 被设置为true时才触发此事件。
监听器将会以如下的参数格式调用:
  • this : Ext.form.TextField
    文本栏
  • e : Ext.EventObject
TextField
move : ( Ext.Component this , Number x , Number y )
在组件移动之后触发。
在组件移动之后触发。
监听器将会用如下的参数格式来调用:
  • this : Ext.Component
  • x : Number
    The new x position
  • y : Number
    The new y position
BoxComponent
removed : ( Ext.Component this , Ext.Container ownerCt )
当一个组件被从Ext.Container容器中删除时触发
当一个组件被从Ext.Container容器中删除时触发
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • ownerCt : Ext.Container
    持有组件的容器
Component
render : ( Ext.Component this )
在组件被渲染之后触发。
在组件被 rendered(渲染) 之后触发。
监听器将以如下的参数格式被调用:
  • this : Ext.Component
Component
resize : ( Ext.Component this , Number adjWidth , Number adjHeight , Number rawWidth , Number rawHeight )
在组件被调整大小之后触发。
在组件被调整大小之后触发。
监听器将以如下的参数格式被调用:
  • this : Ext.Component
  • adjWidth : Number
    这是width调整后的值
  • adjHeight : Number
    这是height调整后的值
  • rawWidth : Number
    这是width原来的值
  • rawHeight : Number
    这是height原来的值
BoxComponent
show : ( Ext.Component this )
在调用show 方法显示组件之后触发。
在调用show 方法显示组件之后触发。
监听器将会用如下的参数格式被调用:
  • this : Ext.Component
Component
specialkey : ( Ext.form.Field this , Ext.EventObject e )
当任何和导航有关的键被按下时触发(上下左右箭头, tab, 回车,esc, 等等) is pressed. 处理其它按键参见...
当任何和导航有关的键被按下时触发(上下左右箭头, tab, 回车,esc, 等等) is pressed. 处理其它按键参见 Ext.Panel.keys或者 Ext.KeyMap。 你可以检测 Ext.EventObject.getKey 以便获知哪个键被按下。例如：
var form = new Ext.form.FormPanel({
    ...
    items: [{
            fieldLabel: 'Field 1',
            name: 'field1',
            allowBlank: false
        },{
            fieldLabel: 'Field 2',
            name: 'field2',
            listeners: {
                specialkey: function(field, e){
                    // e.HOME, e.END, e.PAGE_UP, e.PAGE_DOWN,
                    // e.TAB, e.ESC, arrow keys: e.LEFT, e.RIGHT, e.UP, e.DOWN
                    if (e.getKey() == e.ENTER) {
                        var form = field.ownerCt.getForm();
                        form.submit();
                    }
                }
            }
        }
    ],
    ...
});
监听器将会以如下参数格式被调用:
  • this : Ext.form.Field
  • e : Ext.EventObject
    事件对象
Field
staterestore : ( Ext.Component this , Object state )
组件状态被存储之后触发。
组件状态被存储之后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    StateProvider返回的状态哈希值。 如果没有禁止此事件，那么状态对象会被传递给applyState。 默认情况下，这样简单地把属性值拷贝到当前组件中。 可以覆盖此方法以提供自定的状态恢复操作。
Component
statesave : ( Ext.Component this , Object state )
在组件状态被保存到所配置的状态提供者之后触发。
在组件状态被保存到所配置的状态提供者之后触发。
监听器将会用如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    状态值hash。 这是由在足见上调用getState() 方法决定的。 开发者必须提供此方法以返回是否需要恢复状态，默认情况下， Ext.Component有一个空实现。
Component
valid : ( Ext.form.Field this )
在表单项被校验无错误之后触发。
在表单项被校验无错误之后触发。
监听器将会以如下参数格式被调用:
  • this : Ext.form.Field
Field


Observable
    Component
      BoxComponent
        Field
          TextField

Class Ext.form.TextField

包: | Ext.form
定义类的文件: | TextField.js
类: | TextField
子类: | NumberField, TextArea, TriggerField
继承自: | Field

基本文本栏。可以直接用来替代传统的文本输入栏， 或者作为更复杂输入控制器的基类 (比如Ext.form.TextArea 和Ext.form.ComboBox)。

校验

校验流程在为validateValue 提供的文件中描述。

改变校验行为

每个表单项的校验操作都可以配置:

  • invalidText :当非法时，如果以上所有校验步骤都没有提供消息，此参数为需要显示的默认校验信息
  • maskRe :在所有校验发生之前过滤按键
  • stripCharsRe :在输入之后、校验之前需要过滤的字符
  • invalidClass :当非法时需要替换的样式
  • validateOnBlur , validationDelay ,和 validationEvent :修改how/when触发校验操作

配置项

Config Options Defined By
allowBlank : Boolean
指定为false将会只允许值的长度>0(默认为true)
TextField
allowDomMove : Boolean
在渲染时组件是否可以移动Dom节点(默认为true)。
Component
anchor : String
注: 这个配置只用于该组件被包含在一个已使用AnchorLayout...

注: 这个配置只用于该组件被包含在一个已使用 AnchorLayout (或者其子类)配置的Container时。 基于布局管理器，例如：

  • Ext.form.FormPanel
  • 指定 layout: 'anchor' // or 'form', or 'absolute'

参见 Ext.layout.AnchorLayout. anchor 。

BoxComponent
applyTo : Mixed
指定一个元素的id、一个DOM元素或者一个已经存在并被渲染到DIV中的元素，此DIV已经被...

指定一个元素的id、一个DOM元素或者一个已经存在并被渲染到DIV中的元素，此DIV已经被 渲染到document中，并且为当前组件指定了一些结构化的标签。

  • 描述 :
      当使用了 applyTo， 在主元素中也可以用id或者CSS类名来指定组件的托管部分， 并且，如果可以的话，创建的组件可能也会试图在那个标签中创建它的子组件。
  • 注意 :
      当使用此配置项时，无需调用render()方法。
      如果指定了applyTo属性，任何传递给 renderTo 的值都会被忽略，并且目标元素的父节点将会自动被用作组件的容器。
Component
autoCreate : String/Object
一个DomHelper 元素描述，或者为true使用一个默认元素描述。 用来创建封装当前组件的...

一个DomHelper 元素描述，或者为true使用一个默认元素描述。 用来创建封装当前组件的 Element。 细节参见 autoEl 。 默认为:

                                {tag: 'input', type: 'text', size: '20', autocomplete: 'off'}
Field
autoEl : Mixed
一个表签名或者一个 DomHelper 描述，用来创建 Element ，它将封装当前组件...

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

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

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

{
    xtype: 'box',
    autoEl: {
        tag: 'img',
        src: 'http://www.example.com/example.jpg'

    }
}, {
    xtype: 'box',
    autoEl: {
        tag: 'blockquote',
        html: 'autoEl is cool!'
    }
}, {
    xtype: 'container',
    autoEl: 'ul',
    cls: 'ux-unordered-list',
    items: {
        xtype: 'box',
        autoEl: 'li',
        html: 'First list item'
    }
}
Component
autoHeight : Boolean
如果值为true，height配置项为'auto'，否则值为false的话使用固定的高度...

如果值为true，height配置项为'auto'，否则值为false的话使用固定的高度， 或者可以由其父类容器 layout manager来控制。(默认值为 false)。

注: 虽然很多组件继承了这个配置选项，但不是所有这些组件的自适应高度配置都会像期望的那样起作用。 设置autoHeight：值为true时，浏览器将根据元素的内容自动设置高度，这将意味着Ext不会去管理高度。

如果是由浏览器来管理高度，需要注意的是，通过浏览器进行调整的结构组件内不能被发现， 因此宽度的变化可能导致需要进行同步处理元素的高度。 例如：

var w = new Ext.Window({
    title: 'Window',
    width: 600,
    autoHeight: true,
    items: {
        title: 'Collapse Me',
        height: 400,
        collapsible: true,
        border: false,
        listeners: {
            beforecollapse: function() {
                w.el.shadow.hide();
            },
            beforeexpand: function() {
                w.el.shadow.hide();
            },
            collapse: function() {
                w.syncShadow();
            },
            expand: function() {
                w.syncShadow();
            }
        }
    }
}).show();
BoxComponent
autoScroll : Boolean
如果值为true，将会在该元素上使用overflow:'auto'配置，并且在必要的时候...
如果值为true，将会在该元素上使用overflow:'auto'配置，并且在必要的时候自动显示滚动条，否则，溢出部分的组件都会被切除(默认值为 false)。
BoxComponent
autoShow : Boolean
如果组件需要检测隐藏CSS属性(如 'x-hidden' 或者 'x-hide-display')并且在渲染时删除...
如果组件需要检测隐藏CSS属性(如 'x-hidden' 或者 'x-hide-display')并且在渲染时删除它们 (默认为false)，设置此值为true。
Component
autoWidth : Boolean
如果为true，使用width:'auto'配置，否则使用固定的宽度...

如果为true，使用width:'auto'配置，否则使用固定的宽度，或者可以由其父类容器的layout manager来控制。(默认值为 false)。

注: 虽然很多组件继承了这个配置选项，但不是所有这些组件的自适应宽度配置都会像期望的那样起作用。 设置autoWidth：值为true时，浏览器将根据元素的内容自动设置宽度，这将意味着Ext不会去管理宽度。

如果是由浏览器来管理宽度，需要注意的是，通过浏览器进行调整的结构组件内不能被发现，因此宽度的变化可能导致需要进行同步处理元素的宽度。 例如，在这个元素的目标是：

<div id='grid-container' style='margin-left:25%;width:50%'></div>
当浏览器窗口改变时，渲染后的Panel必须监听浏览器窗口大小的变化，以便通知子项，浏览器改变了其宽度：

var myPanel = new Ext.Panel({
    renderTo: 'grid-container',
    monitorResize: true, // relay on browser resize
    title: 'Panel',
    height: 400,
    autoWidth: true,
    layout: 'hbox',
    layoutConfig: {
        align: 'stretch'
    },
    defaults: {
        flex: 1
    },
    items: [{
        title: 'Box 1',
    }, {
        title: 'Box 2'
    }, {
        title: 'Box 3'
    }],
});
BoxComponent
blankText : String
如果 allowBlank 校验失败时需要显示的出错信息(默认为'This field is required')
TextField
boxMaxHeight : Number
设置组件的最大高度值...

设置组件的最大高度值。

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

BoxComponent
boxMaxWidth : Number
设置组件的最大宽度值...

设置组件的最大宽度值。

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

BoxComponent
boxMinHeight : Number
设置组件的最小高度值...

设置组件的最小高度值。

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

BoxComponent
boxMinWidth : Number
设置组件的最小宽度值...

设置组件的最小宽度值。

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

BoxComponent
bubbleEvents : Array
一个事件数组，当这些事件被触发时，将会被冒泡到所有父容器中。参见....

一个事件数组，当这些事件被触发时，将会被冒泡到所有父容器中。参见 Ext.util.Observable.enableBubble。 默认为 []。

Component
clearCls : String
应用到特殊的clearing div的CSS类， 这个clearing div直接渲染到每个form field的包装器后面...

应用到特殊的clearing div的CSS类， 这个clearing div直接渲染到每个form field的包装器后面，以提供 清除field的功能(默认为 'x-form-clear-left')。

注意: 只有在当前组件被渲染到一个使用FormLayout 布局(例如 Ext.form.FormPanel 或者指定 layout:'form')的 容器中、或者是指定了一个fieldLabel 、或者指定isFormField=true 时此配置才有效。

另请参见 Ext.layout.FormLayout. fieldTpl。

Component
cls : String
一个可选的额外CSS类，它将被添加到当前组件的元素上(默认为'')...
一个可选的额外CSS类，它将被添加到当前组件的元素上(默认为'')。 此属性对于在组件上，或者它的任何使用标准CSS规则的孩子节点上， 添加定制的样式非常有用。
Field
contentEl : String
(可选)指定一个已存在的HTML元素，或者一个已存在HTML元素的...

(可选)指定一个已存在的HTML元素，或者一个已存在HTML元素的 id ，它们将被用作当前组件的内容。

  • 描述 :
    此配置选项被用来将一个已存在的HTML元素 插入到一个新组件(在组件渲染之后它简单地移动DOM元素) 的layout元素中，使它成为该组件的内容。
  • 注意 :
    指定的HTML元素将被append到组件的layout元素中， 在所有配置的 HTML 被插入之后， 并且，这样的话，在render事件 被触发时，document中将不再包含此元素。
    指定的HTML元素将不会参与组件所有可能使用的 layout 过程(译者注：指这些HTML元素 不会参与布局操作)。 它仅是HTML而已。布局操作实在孩子 items 上进行的。
    添加 x-hidden 或者 x-hide-display CSS类，以防在内容渲染到panel时发生闪烁。
Component
ctCls : String
一个可选的外部CSS样式，添加到这个组件的容器(默认值为 '')。 这个方法对于使用标准的CSS规则...

一个可选的外部CSS样式，添加到这个组件的容器(默认值为 '')。 这个方法对于使用标准的CSS规则，为组件或它的任何一个子组件添加特定的样式非常有用。 参见 Ext.layout.ContainerLayout和 extraCls 。

注意: ctCls 默认为 ''期望如下的类，它们将指定一个默认值:

  • Box Layout : 'x-box-layout-ct'
使用一个额外的CSS类配置以上的Class，它是append到默认对象上的。例如， 对于BoxLayout (Hbox and Vbox):
                                ctCls: 'x-box-layout-ct custom-class'

Component
data : Mixed
初始化数据集，它将被应用到 tpl 上以刷新组件的内容区域。
Component
disableKeyFilter : Boolean
指定为true将会禁用按键过滤(默认为false)
TextField
disabled : Boolean
当前组件处于无效状态时为true。 Read-only.
Field
disabledClass : String
当组件处于无效状态时添加到组件上的CSS类(默认为 'x-item-disabled')。
Component
emptyClass : String
应用到空表单项的CSS类，以便样式化 emptyText (默认为'x-form-empty-field')。...
应用到空表单项的CSS类，以便样式化 emptyText (默认为'x-form-empty-field')。 根据表单项当前值，此样式按需要被自动添加和删除。
TextField
emptyText : String
放置到空表单项中的默认文本(默认为null)。 注意:...
放置到空表单项中的默认文本(默认为null)。 注意: 如果当前表单栏处于有效状态并且被配置了一个名称，那么此值会被 提交到服务器。
TextField
enableKeyEvents : Boolean
true将为HTML输入栏启用按键事件代理 (默认为false)。
TextField
fieldClass : String
表单项的默认CSS类(默认为'x-form-field')
Field
fieldLabel : String
紧靠此field显示的标签文本(默认值为 '')。注意...

紧靠此field显示的标签文本(默认值为 '')。

注意:只有在当前组件被渲染到一个使用FormLayout 的容器中时，此配置才有效。 (例如 Ext.form.FormPanel 或 指定 layout:'form')。

另请参见 hideLabel 、 Ext.layout.FormLayout和 fieldTpl。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Name'
    }]
});
Component
flex : Number
注: 这个配置只用于该组件被包含在一个已使用BoxLayout配置的Container中时...

注: 这个配置只用于该组件被包含在一个已使用BoxLayout配置的Container中时。通过计算每一个子组件的flex值所占全部flex值之和的比例，来决定子组件的宽(HBoxLayout)高(VBoxlayout)。 任何子项的 flex = 0 或 flex = undefined 将不被设置(初始值大小将不被改变)。

BoxComponent
focusClass : String
当表单项获得焦点时使用的CSS类(默认为 'x-form-focus')
Field
grow : Boolean
true 如果此表单项需要自动增长、收缩到它的内容长度(默认为false)
TextField
growMax : Number
当 grow = true 时允许的最大宽度(默认为800)
TextField
growMin : Number
当 grow = true 时允许的最小宽度 (默认为30)
TextField
height : Number
组件的高度(默认值为 auto)。注:如果想使用百分比的方式...
组件的高度(默认值为 auto)。注:如果想使用百分比的方式来设置值，请查看 Ext.Component.anchor。
BoxComponent
hidden : Boolean
如果当前组件处于隐藏状态，此值为true。Read-only。
Component
hideLabel : Boolean
true时完全隐藏label元素 ( label 和 separator)。 默认为 false。 默认情况下，即使你不指定...

true时完全隐藏label元素 ( label 和 separator)。 默认为 false。 默认情况下，即使你不指定 fieldLabel 它的空间仍然会被保留，这样这块区域会与其它确实拥有label的区域位于同一排。 讲此值设置为 true 将导致此区域不再保留此空间。

注意: 参见 clearCls 的注释。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield'
        hideLabel: true
    }]
});
Component
hideMode : String
组件如何隐藏，支持的值有： 'visibility' (css visibility), 'offsets' (位置偏移量为负值) 和...

组件如何隐藏，支持的值有： 'visibility' (css visibility), 'offsets' (位置偏移量为负值) 和 'display' (css display).

注意:一般首选默认值 'display'，因为当组件第一次显示的时候它们会自动进行布局 (隐藏的时候不会调整尺寸)。

Component
hideParent : Boolean
此值为true时，当调用hide/show方法时，将会hide和show组件的容器...
此值为true时，当调用hide/show方法时，将会hide和show组件的容器；false时将会 hide和show组件自身(默认为false)。例如，这可以用作window上隐藏按钮的一种 快捷操作，通过设置此按钮的hideParent:true，然后把它添加到window上。
Component
html : String/Object
一个HTML片段，或者一个 DomHelper 描述，用作layout元素的内容(默认为'')。...
一个HTML片段，或者一个 DomHelper 描述，用作layout元素的内容(默认为'')。 这个HTML内容在组件渲染之后才被添加，所以在 render 出发的时候，document中尚未包含此HTML。 但是这个内容将会在所有配置的 contentEl 之前被插入到body标签中。
Component
id : String
当前组件唯一的id(默认为auto-assigned id)...

当前组件唯一的id(默认为auto-assigned id)。 如果你需要在以后访问组件，而又没有一个有效的组件对象引用，那么你需要指定一个 id( 也就是，使用Ext. getCmp方法 )。

注意，此id也将被用作组件底层HTML标签的id，这些标签被渲染到页面中。 这将允许你编写基于id的CSS规则，以独立地描述指定的实例；并且，也可以通过 组件父标签的id选中子元素。

注意:为了避免与唯一的id 产生重复， 请参见 itemId 和 ref 。

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

Component
inputType : String
输入栏的类型属性---例如radio,text,password,file(默认为'text')。...
输入栏的类型属性---例如radio,text,password,file(默认为'text')。 'file'和'password'类型通常必须用来渲染那些没有独立Ext组件的表单项类型。 注意，如果你使用inputType:'file'， 那么将不再支持 emptyText 并且应该避免使用。
Field
invalidClass : String
当把表单项标记为非法时所使用的CSS类(默认为'x-form-invalid')
Field
invalidText : String
当把一个表单项标记为非法状态并且没有提供消息时所使用的出错文本...
当把一个表单项标记为非法状态并且没有提供消息时所使用的出错文本 (默认为'The value in this field is invalid')
Field
itemCls : String
注意: 只有在当前组件被渲染到一个使用FormLayout 布局的 容器中时此配置才有效...

注意: 只有在当前组件被渲染到一个使用FormLayout 布局的 容器中时此配置才有效。 (例如Ext.form.FormPanel 或者指定 layout:'form')。

一个附加的CSS类，应用到div上，包装当前field的表单元素。 如果提供了此参数， field级上的itemCls将会覆盖 container级上提供的 默认itemCls。 为itemCls指定的值将会被添加默认的 类('x-form-item')。

既然它被应用到项目的包装器上(参见 Ext.layout.FormLayout。 fieldTpl)， 它将允许你编写能应用到此field、label(如果有指定)、或者field内部任何其它元素的标准CSS规则。

注意: 参考 fieldLabel的注释。 .

示例用法:

// Apply a style to the field's label:
<style>
    .required .x-form-item-label {font-weight:bold;color:red;}
</style>

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Name',
        itemCls: 'required' //this label will be styled
    },{
        xtype: 'textfield',
        fieldLabel: 'Favorite Color'
    }]
});
Component
itemId : String
当没有可利用的对象引用时，itemId可以作为第二选择，用来获得一个组件的引用， 代替 ...

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

var c = new Ext.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'); // 与 Ext.getCmp()不同

p2 = p1.ownerCt.getComponent('p2'); // 通过兄弟对象获得引用

另请参见 id 和 ref 。

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

Component
labelSeparator : String
每个fieldLabel 文本后面现实的分隔符。 此属性可以在多个层次上进行配置...

每个fieldLabel 文本后面现实的分隔符。 此属性可以在多个层次上进行配置。优先顺序为：

  • field / component level
  • container level
  • layout level (默认为冒号 ':')
如不需要为当前field的label显示分隔符，指定一个空字符串''即可。

注意:参见 clearCls 的注释。

另请参见 hideLabel 和 Ext.layout.FormLayout。 fieldTpl。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    layoutConfig: {
        labelSeparator: '~'   // layout config has lowest priority (defaults to ':')
    },
    labelSeparator: '>>',     // config at container level
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Field 1',
        labelSeparator: '...' // field/component level config supersedes others
    },{
        xtype: 'textfield',
        fieldLabel: 'Field 2' // labelSeparator will be '='

    }]
});
Component
labelStyle : String
一个CSS样式描述字符串，它将直接应用到当前field的label上...

一个CSS样式描述字符串，它将直接应用到当前field的label上。 如果有设置，默认为容器的labelStyle值(例如 Ext.layout.FormLayout.labelStyle , 或者 '')。

注意:参见 clearCls 的注释。

另请参见 hideLabel 和 Ext.layout.FormLayout. fieldTpl。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Name',
        labelStyle: 'font-weight:bold;'
    }]
});
Component
listeners : Object
一个包含一个或多个事件处理器的配置对象，会在初始化的时候被添加到目标对象上...

一个包含一个或多个事件处理器的配置对象，会在初始化的时候被添加到目标对象上。 该配置对象应该是一个有效的监听器配置对象就像 addListener例子中指定的一样可一次附加多个处理器。

ExtJs Components上的DOM事件

一些 ExtJs Component 类导出时会选择一些DOM事件(例如 "click", "mouseover" 等等), 这通常只是在有额外的值可以被添加时发生。例如DataView类的 click事件会传递被点击的节点。也可以直接在Component的HTMLElementevent上访问DOM事件，但必需在Component被渲染后监听器才能添加到Element 上。可以按照以下步骤添加插件:

// 插件会用一个监听器配置对象进行配置。
//该组件会被添加到所有处理方法的参数列表上。
Ext.DomObserver = Ext.extend(Object, {
    constructor: function(config) {
        this.listeners = config.listeners ? config.listeners : config;
    },

    // 组件将自己传递进了插件的初始化方法里
    init: function(c) {
        var p, l = this.listeners;
        for (p in l) {
            if (Ext.isFunction(l[p])) {
                l[p] = this.createHandler(l[p], c);
            } else {
                l[p].fn = this.createHandler(l[p].fn, c);
            }
        }

        // 渲染后立即添加监听器到元素上
        c.render = c.render.createSequence(function() {
            var e = c.getEl();
            if (e) {
                e.on(l);
            }
        });
    },

    createHandler: function(fn, c) {
        return function(e) {
            fn.call(this, e, c);
        };
    }
});

var combo = new Ext.form.ComboBox({

    // 元素被点击后折叠
    plugins: [ new Ext.DomObserver({
        click: function(evt, comp) {
            comp.collapse();
        }
    })],
    store: myStore,
    typeAhead: true,
    mode: 'local',
    triggerAction: 'all'
});

Observable
margins : Object
注:此配置只用于该组件展现在一个使用BorderLayout...

注:此配置只用于该组件展现在一个使用BorderLayout 或 BoxLayout的两个子类之一作为布局的容器。

这个margins对象在该组件中的格式为：

{top: (top margin),right: (right margin),bottom: (bottom margin),left: (left margin)}

也可以是一个字符串，中间用空格分隔，margin值为数字。 把matches中每一个值的次序跟CSS中margin值的排列方式相对应：

  • 如果只有一个值，它适用于所有方面。
  • 如果有两个值，top和bottom的边框设置为第一个值，left和right设置为第二个值。
  • 如果有三个值，top设置为第一个值，left和right设置为第二个值，bottom设置为第三个值。
  • 如果有四个值，分别设置为top, right, bottom, left。

默认值:

{top:0, right:0, bottom:0, left:0}
BoxComponent
maskRe : RegExp
一个输入掩码正则表达式，用来过滤不匹配的按键(默认为null)
TextField
maxLength : Number
校验时表单项允许的最大输入长度(默认为Number.MAX_VALUE)。 通过改善可用性允许粘贴、编辑、重做和回退...
校验时表单项允许的最大输入长度(默认为Number.MAX_VALUE)。 通过改善可用性允许粘贴、编辑、重做和回退， 此行为被设计用来为用户提供即时的反馈。 如需限定表单项中可以输入字符的最大长度， 可以使用autoCreate 向一个表单项添加任何你想要的属性，例如:
var myField = new Ext.form.NumberField({
    id: 'mobile',
    anchor:'90%',
    fieldLabel: 'Mobile',
    maxLength: 16, // for validation
    autoCreate: {tag: 'input', type: 'text', size: '20', autocomplete: 'off', maxlength: '10'}
});
TextField
maxLengthText : String
如果maximum length 校验失败时显示的出错文本...
如果maximum length 校验失败时显示的出错文本 (默认为 'The maximum length for this field is {maxLength}')
TextField
minLength : Number
输入栏必须的最小长度(默认为0)
TextField
minLengthText : String
如果 最小长度 校验失败时显示的出错文本 (默认为...
如果 最小长度 校验失败时显示的出错文本 (默认为 'The minimum length for this field is {minLength}') 。
TextField
msgFx : String
实验性参数 当在表单项下显示校验消息时使用的效果(默认为'normal')。
Field
msgTarget : String
通过markInvalid 设置的消息文本应该显示的位置。 必须是如下值之一：...

通过markInvalid 设置的消息文本应该显示的位置。 必须是如下值之一：

  • qtip 当用户鼠标滑过表单项时，显示一个包含消息的快速提示。 这是默认情况。
    为了使此参数能工作，必须调用 Ext.QuickTips.init。
  • title 在弹出的默认浏览器标题属性上显示消息。
  • under 在表单项之下添加一块div，包含出错消息。
  • side 在表单项右边添加一个出错图标，当鼠标滑过时弹出并显示一个消息。
  • [element id] 在指定元素的innerHTML中直接添加出错消息。
Field
name : String
表单项的HTML name属性(默认为'')。 注意: 如果需要当前表单项自动被包含在...
表单项的HTML name属性(默认为'')。 注意: 如果需要当前表单项自动被包含在 form submit()中，必须设置此参数。
Field
overCls : String
一个可选的额外的CSS类，它将在鼠标移过元素时被添加到组件上...
一个可选的额外的CSS类，它将在鼠标移过元素时被添加到组件上，鼠标移出时 删除。(默认为'')。此属性对于在组件上，或者它的任何使用标准CSS规则的孩子节点上， 添加定制的'active' 或者 'hover'样式非常有用。
Component
pageX : Number
如果该组件被包含在一个指定位置的容器中，这个值表示页面级的x坐标值（译者注：在有滚动条的情况下这个值很有用）。
BoxComponent
pageY : Number
如果该组件被包含在一个指定位置的容器中，这个值表示页面级的y坐标值（译者注：在有滚动条的情况下这个值很有用）。
BoxComponent
plugins : Object/Array
一个对象或者一个对象数组，为组件提供特殊的功能 ...
一个对象或者一个对象数组，为组件提供特殊的功能。 对一个合法的插件唯一的要求是它含有一个init()方法， 能接收一个Ext.Component型的参数。 当组件被创建时，如果有可用的插件，组件将会调用每个插件的init方法， 并将自身的引用作为方法参数传递给它。然后，每个插件就可以调用方法或者响应组件上的事件， 就像需要的那样提供自己的功能。
Component
preventMark : Boolean
true将会禁止 把表单项标记为非法。默认为false.
Field
ptype : String
需要创建配置的ptype。 当传递一个配置对象给构造函数时...
需要创建配置的ptype。 当传递一个配置对象给构造函数时，此配置选项不会被使用。 只有在使用懒初始化的时候此配置项才会被使用， 此时Plugin不是 通过一个完整的实例组件，而是通过一个Component配置指定的。 在渲染时，将会查找ptype以决定创建何种类型的Plugin。

如果你创建自己的Plugin，你可以通过 Ext.ComponentMgr.registerPlugin 对它们进行注册，以便能利用懒初始化和渲染机制。
Component
readOnly : Boolean
将会把表单项标记为在HTML中只读(readOnly)(默认为false)...
true 将会把表单项标记为在HTML中只读(readOnly)(默认为false)。

Note: 这仅仅设置元素的readOnly DOM参数。 例如，设置 readOnly=true ，将不会禁用触发ComboBox或者DateField； 这为你提供了一个选项，可以强制用户通过触发按钮选择一个值，而不是 在文本框进行输入。 使用 hideTrigger 可以隐藏触发按钮。

Field
ref : String
一个路径描述，与组件的 ownerCt 相关，它描述了把当前组件的命名引用放置到哪个父容器中去。...

一个路径描述，与组件的 ownerCt 相关，它描述了把当前组件的命名引用放置到哪个父容器中去。

祖先的坐标路径可以通过'/'字符进行分隔。 例如，将一个Toolbar Button的引用放入 拥有此Toolbar的Panel中:

var myGrid = new Ext.grid.EditorGridPanel({
    title: 'My EditorGridPanel',
    store: myStore,
    colModel: myColModel,
    tbar: [{
        text: 'Save',
        handler: saveChanges,
        disabled: true,
        ref: '../saveButton'
    }],
    listeners: {
        afteredit: function() {
//          The button reference is in the GridPanel
            myGrid.saveButton.enable();
        }
    }
});

在上面的代码中，如果 ref 是 'saveButton' ，那么引用将会被放置到Toolbar中。 ref 中的每个'/' 都会从组件的 ownerCt 向上移动一级。

另请参见 added 和 removed 事件。

Component
regex : RegExp
在校验时，需要在表单项值纸上进行测试的JavaScript RegExp对象(默认为 null)。 如果测试失败，表单项将会使用...
在校验时，需要在表单项值纸上进行测试的JavaScript RegExp对象(默认为 null)。 如果测试失败，表单项将会使用 regexText 进行标记。
TextField
regexText : String
当使用regex 并且校验测试失败时显示的出错文本(默认为'')
TextField
region : String
注: 此配置只用于该组件展现在一个布局为BorderLayout的容器中...

注: 此配置只用于该组件展现在一个布局为BorderLayout的容器中(例如指定layout:'border')。

详见Ext.layout.BorderLayout。

BoxComponent
renderTo : Mixed
该值可以是一个节点的id、一个DOM节点或者一个已存在的元素...

该值可以是一个节点的id、一个DOM节点或者一个已存在的元素， 组件将会被渲染到其中。

  • 注意 :
      如果组件不是一个Container 的子项目时， 不要使用此选项。 渲染和管理它的子项目是一个Container 的layout manager的责任。
      当使用此配置项时，无需调用render()方法。

另请参见 render 。

Component
selectOnFocus : Boolean
true当表单项获得输入焦点时，将会自动选中所有存在的表单项文本 (默认为false)
TextField
stateEvents : Array
一个事件数组，当它们被触发时，组件需要保存自己的状态(默认值为 none)...

一个事件数组，当它们被触发时，组件需要保存自己的状态(默认值为 none)。 它们可以是任何该组件支持的事件类型，包括浏览器事件和 自定义事件(例如['click', 'customerchange'])。

对于保存和恢复组件状态的详细解释，参见 stateful

Component
stateId : String
为该组件指定的唯一的id值，它被用作管理组件状态的目的...
为该组件指定的唯一的id值，它被用作管理组件状态的目的。 (如果设定了id，默认值为组件自己的id，否则，如果组件使用自动生成的id，此值为null)。

对于保存和反解析组件状态的解释，参见 stateful 。

Component
stateful : Boolean
一个标志参数，它将引起组件在启动时尝试从一个保存的状态中恢复内部状态参数...

一个标志参数，它将引起组件在启动时尝试从一个保存的状态中恢复内部状态参数。 组件必须要么拥有一个 stateId 或者 id ，它们被分配给需要被管理的状态属性。 在跨页面加载时，不保证自动生成的id属性的稳定性， 并且，不能依赖此id来保存和恢复一个组件的相同状态。

为了保存状态的操作能够工作，状态管理器的提供者必须 被设置成一个Ext.state.Provider 的实现类，它覆盖了set 和get 方法，以便保存和恢复name/value对。 有一个内置的Ext.state.CookieProvider 可用。

为当前页面设置状态提供者:

Ext.state.Manager.setProvider(new Ext.state.CookieProvider({
    expires: new Date(new Date().getTime()+(1000*60*60*24*7)), //7 days from now
}));

当 stateEvents 配置项中其中之一的事件被触发时， 一个状态可保存的组件将试图保存其状态。

保存状态时，一个可保存状态的组件首先需要通过调用 getState 方法来序列化它的状态。 默认情况下，此函数什么事都不做。 开发者必须提供一个实现，返回一个hash对象，它描述了组件可恢复的状态。

getState方法产生的值将会传递给 Ext.state.Manager.set 方法，它使用配置的 Ext.state.Provider 来保存对象，以组件的 stateId 为key，或者，如果此值（指stateId）没有指定时， 使用它的 id 作为key。

在进行构造时，一个可保存状态的组件试图通过调用 Ext.state.Manager.get方法来 恢复它的状态，传递 stateId 或者，如果此值（指stateId）没有指定时， 使用它的 id 作为参数。

结果对象被传递给 applyState 。 applyState 的默认实现只是简单地把属性拷贝到对象中， 但是开发者可以覆盖此方法以支持更多行为。

通过向 beforestaterestore, staterestore, beforestatesave 和 statesave 事件上绑定监听器，你可以在保存和恢复状态时进行额外的处理。

Component
stripCharsRe : RegExp
一个JavaScript RegExp对象，用来在校验之前从值中剥离不想要的内容(默认为 null)。
TextField
style : String
被添加到组件元素的特定样式。 必须是按照...
被添加到组件元素的特定样式。 必须是按照 Ext.Element.applyStyles 类指定格式的合法参数值。

new Ext.Panel({
    title: 'Some Title',
    renderTo: Ext.getBody(),
    width: 400, height: 300,
    layout: 'form',
    items: [{
        xtype: 'textarea',
        style: {
            width: '95%',
            marginBottom: '10px'
        }
    },
        new Ext.Button({
            text: 'Send',
            minWidth: '100',
            style: {
                marginBottom: '10px'
            }
        })
    ]
});
Component
submitValue : Boolean
False将会清除表单项的name属性，这样在提交表单时它将不会被提交。 默认为true。
Field
tabIndex : Number
该表单项的tabIndex。 注意，此属性仅仅应用到被渲染好的，而不是那些通过applyTo...
该表单项的tabIndex。 注意，此属性仅仅应用到被渲染好的，而不是那些通过applyTo创建的表单项 (默认为undefined)。
Field
tabTip : String
注: 这个配置只用于当该组件作为TabPanel的一个子项目时使用...

注: 这个配置只用于当该组件作为TabPanel的一个子项目时使用。

一个String类型的innerHTML(支持html标签)，当鼠标放在该选项上的时，显示一个tooltip。为了tips能够被渲染，Ext.QuickTips.init()必须被提前调用。
BoxComponent
tpl : Mixed
一个 Ext.Template , Ext.XTemplate 或者一个用来形成一个Ext.XTemplate的字符串数组...
一个 Ext.Template , Ext.XTemplate 或者一个用来形成一个Ext.XTemplate的字符串数组。 与 data 和 tplWriteMode 配置项协同使用。
Component
tplWriteMode : String
刷新组件的内容区域时使用的Ext.(X)Template方式。 默认为'overwrite' (参见 Ext.XTemplate.overwrite )。
刷新组件的内容区域时使用的Ext.(X)Template方式。 默认为'overwrite' (参见 Ext.XTemplate.overwrite )。
Component
validateOnBlur : Boolean
在表单项失去焦点时是否进行校验(默认为 true)。
Field
validationDelay : Number
在用户开始输入到校验操作开始之间的时长毫秒数 (默认为250)
Field
validationEvent : String/Boolean
引发表单项进行校验操作的事件。 设置为false可以禁用自动校验 (默认为'keyup')。
引发表单项进行校验操作的事件。 设置为false可以禁用自动校验 (默认为'keyup')。
Field
validator : Function
一个自定义的校验方法，在校验表单项时调用( validateValue) (默认为...

一个自定义的校验方法，在校验表单项时调用( validateValue) (默认为 null)。 如果指定，此函数会被第一个调用，允许开发者覆盖默认的校验过程。

此方法会被传入以下参数:

  • value : Mixed
    表单项的当前值

此方法将会返回:

  • true : Boolean
    true 如果值合法
  • msg : String
    如果值是非法时的出错信息
TextField
value : Mixed
当前表单项的初始化值(默认为undefined).
Field
vtype : String
一个校验类型名，在Ext.form.VTypes 中定义(默认为null)
TextField
vtypeText : String
一个自定义的出错消息，用来替代为当前表单项所设置的...
一个自定义的出错消息，用来替代为当前表单项所设置的 vtype 所提供的默认消息(默认为'')。 注意: 只有设置了 vtype 时才应用此项，否则忽略。
TextField
width : Number
组件的宽度(默认值为 auto)。注:如果想使用百分比的方式...
组件的宽度(默认值为 auto)。注:如果想使用百分比的方式来设置值，请查看 Ext.Component.anchor。
BoxComponent
x : Number
如果被包含在一个指定位置的容器中，这个值表示x(left)坐标值。
BoxComponent
xtype : String
需要创建配置的xtype。 当传递一个配置对象给构造函数时...
需要创建配置的xtype。 当传递一个配置对象给构造函数时，此配置选项不会被使用。 只有在使用懒初始化的时候此配置项才会被使用，此时容器的子项目不是 通过一个完整的实例组件，而是通过一个Component配置指定的。 在渲染时，将会查找xtype以决定创建何种类型的子组件。

预定义的xtype列表如下： here。

如果你继承Component创建你自己的组件，你需要使用Ext.ComponentMgr.registerType 对它们进行注册，以便利用懒初始化和渲染机制。
Component
y : Number
如果被包含在一个指定位置的容器中，这个值表示y(top)坐标值。
BoxComponent

公共属性

Property Defined By
disabled : Boolean
当前组件处于无效状态时为true。 Read-only.
Component
el : Ext.Element
封装了当前组件的Ext.Element。 Read-only。通常情况下，这将是一个<DIV>元素，它由此类的...

封装了当前组件的Ext.Element。 Read-only。

通常情况下，这将是一个<DIV>元素，它由此类的 onRender方法创建，但是它可以通过使用 autoEl 配置项进行覆盖。

注意: 直到组件渲染完成此元素都将处于无效状态。

如需向当前组件的 DOM事件(而不是当前组件自己的Observable事件)添加监听器， 更多建议，参见 listeners 配置项，或者直接使用一个render监听器:

new Ext.Panel({
    title: 'The Clickable Panel',
    listeners: {
        render: function(p) {
            // Append the Panel to the click handler's argument list.
            p.getEl().on('click', handlePanelClick.createDelegate(null, [p], true));
        },
        single: true  // Remove the listener after first invocation
    }
});

另请参见 getEl

Component
hidden : Boolean
如果当前组件处于隐藏状态，此值为true。Read-only。
Component
initialConfig : Object
当前组件的初始化配置描述。 Read-only。
Component
label : Ext.Element
关联到当前表单项的label元素。 只有在当前表单项已经被一个Ext.layout.FormLayout ...

关联到当前表单项的label元素。 只有在当前表单项已经被一个Ext.layout.FormLayout 布局管理器渲染之后才可用。

Field
originalValue : mixed
表单项原来的值，它是在value 中配置的；或者，如果 trackResetOnLoad 设置为...
表单项原来的值，它是在value 中配置的；或者，如果 trackResetOnLoad 设置为 true 时，通过表单加载操作最后一次加载的。
Field
ownerCt : Ext.Container
组件所属的Container (默认为undefined，当前组件被添加到一个容器中时此值被自动设置)...
组件所属的Container (默认为undefined，当前组件被添加到一个容器中时此值被自动设置)。 Read-only。

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

Component
refOwner : Ext.Container
如果当前组件是一个容器的孩子，并且是通过一个 ref 配置项被注册的，则此值为 ref 引用被插入到的祖先容器。
如果当前组件是一个容器的孩子，并且是通过一个 ref 配置项被注册的，则此值为 ref 引用被插入到的祖先容器。
Component
rendered : Boolean
如果当前组件已经被渲染了，此值为true。Read-only.
Component
startValue : mixed
表单项最后一次获得焦点时所拥有的值。 这就是传递给change 事件的值...

表单项最后一次获得焦点时所拥有的值。 这就是传递给change 事件的值，此事件在值被改变并失去焦点时触发。

直到表单项被访问之前此值都是undefined 与originalValue 进行比较。

Field

公共方法

Method Defined By
TextField ( Object config )
创建一个新的TextField
创建一个新的TextField
参数:
  • config : Object
    配置选项
返回值:
  • void
TextField
addClass ( string cls ) : Ext.Component
为组件底层的元素添加CSS样式。
为组件底层的元素添加CSS样式。
参数:
  • cls : string
    需要添加的CSS样式的class名称
返回值:
  • Ext.Component
    this
Component
addEvents( Object|String o, string Optional. ) : void
添加指定的事件到事件列表上，事件会被该Observable触发。
添加指定的事件到事件列表上，事件会被该Observable触发。
参数:
  • o : Object|String
    以事件名作为属性true作为值的对象 或者当多个事件名被分开的传递时则为第一个事件名。
  • Optional. : string
    事件名被分开的传递时则为事件名。 用法:
    this.addEvents('storeloaded', 'storecleared');
返回值:
  • void
Observable
addListener( String eventName, Function handler, [Object scope], [Object options] ) : void
给对象添加事件处理器。
给对象添加事件处理器。
参数:
  • eventName : String
    监听的事件名。
  • handler : Function
    事件调用的方法
  • scope : Object
    （可选）处理方法执行的作用域 (this的引用 reference)。 如果被忽略。默认为触发事件的对象。
  • options : Object
    （可选）包含处理器配置和属性的对象。 可能包含以下的属性:
    • scope : Object
      处理方法执行的作用域(this的引用) 。 如果被忽略。默认为触发事件的对象。
    • delay : Number
      在触发事件后延迟调用处理器的毫秒数。
    • single : Boolean
      如果为True则添加一个处理器来处理下一次的事件触发（仅一次），然后移除自己。
    • buffer : Number
      使得处理器延迟指定毫秒数后预定的运行在 一个Ext.util.DelayedTask中 。 如果事件在时间内再一次被触发，原始的处理器不会被调用，但是新的处理器会预定的在他的位置上。
    • target : Observable
      如果事件在目标的Observable上触发则仅仅调用处理器， 否则 事件会从子类的Observable上冒泡

    组合选项
    使用这些选项参数,可能会组合出不同类型的监听器：

    一个延迟的，一次性的监听器。

    myDataView.on('click', this.onClick, this, {
single: true,
delay: 100
});

    一次调用附加多个处理器
    该方法同样支持传递一个包含指定的多个处理器的属性的配置对象参数。

    myGridPanel.on({
'click' : {
    fn: this.onClick,
    scope: this,
    delay: 100
},
'mouseover' : {
    fn: this.onMouseOver,
    scope: this
},
'mouseout' : {
    fn: this.onMouseOut,
    scope: this
}
});

    或者一个简写的语法：

    myGridPanel.on({
'click' : this.onClick,
'mouseover' : this.onMouseOver,
'mouseout' : this.onMouseOut,
 scope: this
});
返回值:
  • void
Observable
applyToMarkup ( String/HTMLElement el ) : void
将此组件添加到已存在的有效的HTML标签中。 使用该方法时，无需再调用render()方法。
将此组件添加到已存在的有效的HTML标签中。 使用该方法时，无需再调用render()方法。
参数:
  • el : String/HTMLElement
返回值:
  • void
Component
autoSize () : void
自动增长表单项，以便让文本宽度适应到表单项允许的最大长度。 只有...
自动增长表单项，以便让文本宽度适应到表单项允许的最大长度。 只有 grow = true时才有效果，同时会触发 autosize 事件。
参数:
  • 无。
返回值:
  • void
TextField
clearInvalid () : void
清除当前表单项上的所有非法styles/messages(样式/消息)
清除当前表单项上的所有非法styles/messages(样式/消息)
参数:
  • 无。
返回值:
  • void
Field
cloneConfig ( Object overrides ) : Ext.Component
默认使用原先传递给当前实例的配置值克隆当前组件。
默认使用原先传递给当前实例的配置值克隆当前组件。
参数:
  • overrides : Object
    一个新的配置项，包含需要覆盖到克隆版本的所有属性。 可以传递一个id参数给此对象，否则将自动生成一个新的id以避免发生重复。
返回值:
  • Ext.Component
    当前组件的克隆副本
Component
destroy () : void
通过如下方法销毁对象：删除所有的事件监听器、将组件的元素从DOM树中删除...
通过如下方法销毁对象：删除所有的事件监听器、将组件的元素从DOM树中删除（如果可以）、 将组件从它的 Ext.Container（如果可用）中删除、 并且将它从Ext.ComponentMgr中 注销。 销毁操作一般由框架自动完成，一般情况下不需要直接调用该方法。
参数:
  • 无。
返回值:
  • void
Component
disable () : Ext.Component
将组件置为无效状态，并出发'disable'事件。
将组件置为无效状态，并出发'disable'事件。
参数:
  • 无。
返回值:
  • Ext.Component
    this
Component
enable () : Ext.Component
将组件置为有效状态并触发'enable'事件。
将组件置为有效状态并触发'enable'事件。
参数:
  • 无。
返回值:
  • Ext.Component
    this
Component
enableBubble( String/Array events ) :void
是否现在使得事件会被该Observable触发并调用 this.getBubbleTarget()方法在拥有者的继承树...

是否现在使得事件会被该Observable触发并调用 this.getBubbleTarget()方法在拥有者的继承树中冒泡。Observable的基础类中没有该方法的实现。

该方法一般被Ext.Components用来冒泡事件到拥有者的容器。参看Ext.Component.getBubbleTarget默认的实现 在Ext.Component中返回组件的直接拥有者。但是如果需要的是一个已知的目标，该方法可以被重写来更快的访问需求的目标。

例子:

Ext.override(Ext.form.Field, {
    // 添加方法到Field的initComponent上改变事件为冒泡
    initComponent : Ext.form.Field.prototype.initComponent.createSequence(function() {
        this.enableBubble('change');
    }),

    // 我们知道我们想让Field的事件冒泡到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() {
            // 如果样式被修改标题会变红。
            myForm.header.setStyle('color', 'red');
        }
    }
});
参数:
  • events : String/Array
    冒泡的事件名，或事件名数组
返回值:
  • void
Observable
findParentBy ( Function fn ) : Ext.Container
通过自定义的函数查找当前组件上层任何层次上的容器...
通过自定义的函数查找当前组件上层任何层次上的容器。 如果传递的函数返回true，容器对象将被返回。
参数:
  • fn : Function
    自定义的函数，使用如下参数调用(container,this component)。
返回值:
  • Ext.Container
    自定义函数返回true的第一个容器
Component
findParentByType ( String/Class xtype ) : Ext.Container
通过xtype或者class查找当前组件上层任何层次上的容器
通过xtype或者class查找当前组件上层任何层次上的容器
参数:
  • xtype : String/Class
    组件的xtype字符串，或者直接是组件的class
返回值:
  • Ext.Container
    符合指定xtype或者class的第一个容器
Component
fireEvent( String eventName, Object... args ) : Boolean
用传入的参数触发指定的事件 (减去事件名)。 一个事件可以被设置为冒泡 Obse...

用传入的参数触发指定的事件 (减去事件名)。

一个事件可以被设置为冒泡到Observable父类继承树(参看 Ext.Component.getBubbleTarget) 调用enableBubble实现。

参数:
  • eventName : String
    触发的事件名。
  • args : Object...
    传递给处理器的可变长度参数。
返回值:
  • Boolean
    如果有任何的处理器返回false则返回false，否则返回true。
Observable
focus ( [ Boolean selectText ], [ Boolean/Number delay ] ) : Ext.Component
尝试将当前组件设为焦点。
尝试将当前组件设为焦点。
参数:
  • selectText : Boolean
    (可选) 如果可用，同时选中组件内部的文本
  • delay : Boolean/Number
    (可选)将当前组件设置为焦点的延迟时间(设置为true等于0毫秒)
返回值:
  • Ext.Component
    this
Component
getActiveError () : String
获取当前表单项活动的出错消息。
获取当前表单项活动的出错消息。
参数:
  • 无。
返回值:
  • String
    返回表单项上活动的出错消息，如果没有错误，返回一个空字符串。
Field
getBox ( [ Boolean local ] ) : Object
获取组件底层元素当前盒子模型的尺寸。（译者注：盒子模型是CSS术语，详细解释请自行搜索。）
获取组件底层元素当前盒子模型的尺寸。（译者注：盒子模型是CSS术语，详细解释请自行搜索。）
参数:
  • local : Boolean
    (可选)值为true时，组件的left值和top值将代替页面的XY被返回。(默认值为false)
返回值:
  • Object
    返回值的格式{x, y, width, height}
BoxComponent
getBubbleTarget () : Ext.Container
为Observable的fireEvent方法提供链接，它沿着继承结构进行冒泡操作。
为Observable的fireEvent方法提供链接，它沿着继承结构进行冒泡操作。
参数:
  • 无。
返回值:
  • Ext.Container
    拥有当前组件的容器。
Component
getEl () : Ext.Element
返回 Ext.Element ，它包装了当前组件。...

返回 Ext.Element ，它包装了当前组件。

通常情况下，这将是一个<DIV>元素，它是由该类的onRender方法创建的， 但是可以使用autoEl配置项 覆盖它。

注意: 此元素将会一直处于无效状态直到当前组件渲染完成。

如需向当前组件的 DOM事件(而不是当前组件自己的Observable事件)添加监听器， 更多建议，参见 listeners 配置项，或者直接使用一个render监听器:

new Ext.Panel({
    title: 'The Clickable Panel',
    listeners: {
        render: function(p) {
            // Append the Panel to the click handler's argument list.
            p.getEl().on('click', handlePanelClick.createDelegate(null, [p], true));
        },
        single: true  // Remove the listener after first invocation
    }
});
参数:
  • 无。
返回值:
  • Ext.Element
    包装当前组件的元素。
Component
getErrors ( Mixed value ) : Array
根据表单项的校验规则对值进行校验，并且为所有校验失败的情况返回 一个出错数组。...

根据表单项的校验规则对值进行校验，并且为所有校验失败的情况返回 一个出错数组。校验规则以如下顺序进行处理:

  • 1. 为表单项指定的校验器

    校验器提供了一个定制和复用校验规则的方法。如果表单项配置了 validator ，它将会被传递给当前表单项的值。 validator 被期望返回如下值之一:

    • Boolean true 如果值合法(校验操作继续)。
    • 如果值非法时一个描述非法信息的字符串 (校验操作停止)。
  • 2. 基本校验

    如果 validator 的校验没有停止，基本校验按照如下方式处理:

    • allowBlank : (非法消息= emptyText )
      依赖于 allowBlank 的配置，一个空的表单项将会导致校验操作在这一步结束，然后按照情况返回一个布尔型的 true或者false。
    • minLength : (非法消息= minLengthText )
      如果传入的值不符合 minLength 指定的长度，校验停止。
    • maxLength : (非法消息= maxLengthText )
      如果传入的值不符合 maxLength 指定的长度，校验停止。
  • 3. 预先配置的校验类型(VTypes)

    如果以上校验步骤都没有终止，一个配置了 vtype 的表单项将会执行对应的VTypes 校验函数。 如果非法，要么表单项的 vtypeText ，要么VTypes的vtype Text属性将会被用作非法消息。 按键将会根据VTypes 的vtype Mask属性被过滤。

  • 4. 表单项指定的正则测试

    如果以上校验步骤都没有终止，为表单项配置的 regex 测试将会执行。 此测试的非法状态消息用 regexText 配置。

    • 参数:
    • value : Mixed
      需要校验的值。 如果没有传递任何东西，将会使用处理过的原始值
    返回值:
    • Array
      所有校验错误的数组
TextField
getHeight () : Number
获取该组件的当前高度值。
获取该组件的当前高度值。
参数:
  • 无。
返回值:
  • Number
BoxComponent
getId () : String
返回当前组件的id，如果没有定义id，则自动生成并返回一个id:'ext-comp-'...
返回当前组件的 id 如果没有定义 id 则自动生成并返回一个 id

'ext-comp-' + (++Ext.Component.AUTO_ID)
参数:
  • 无。
返回值:
  • String
    id
Component
getItemId () : String
返回当前组件的 itemId 。 如果没有通过配置参数指定 itemId 那么，将会使用...
返回当前组件的 itemId 。 如果没有通过配置参数指定 itemId 那么，将会使用 getId 返回 id 。
参数:
  • 无。
返回值:
  • String
Component
getName () : String
如果可用，返回表单项的 name 或者 hiddenName 属性。
如果可用，返回表单项的 name 或者 hiddenName 属性。
参数:
  • 无。
返回值:
  • String
    name 表单项的{@link Ext.form.Field#name name}或者{@link Ext.form.ComboBox#hiddenName hiddenName}
Field
getOuterSize () : Object
获取当前组件所在元素的尺寸大小，包括边缘的空白处。
获取当前组件所在元素的尺寸大小，包括边缘的空白处。
参数:
  • 无。
返回值:
  • Object
    一个包含元素大小的对象 {width: (element width + left/right margins), height: (element height + top/bottom margins)}
BoxComponent
getPosition ( [ Boolean local ] ) : Array
获取组件底层元素当前的XY位置。
获取组件底层元素当前的XY位置。
参数:
  • local : Boolean
    (可选)如果为true，将返回元素的left和top值，而不是相对于页面内的 XY。(默认值为 false)
返回值:
  • Array
    元素的XY位置值(例如：[100, 200])
BoxComponent
getRawValue () : Mixed
返回原始数据值，可能不是一个合法的、已定义的值。 返回格式化的值参见...
返回原始数据值，可能不是一个合法的、已定义的值。 返回格式化的值参见 getValue。
参数:
  • 无。
返回值:
  • Mixed
    value 表单项的值
Field
getResizeEl () : Ext.Element
返回该组件的最外层用来定义这些组件整体大小的Element...

返回该组件的最外层用来定义这些组件整体大小的Element对象。

通常用 getEl 方法将会返回相同的Element对象，但在有些情况下，组件可能有一些更多的封装了它的主要动态Element对象的Element对象。

例如ComboBox。它是封装在一个包含<input>元素的包装元素里(这将返回其 getEl方法和触发按钮的元素)。返回的元素为resizeEl。

参数:
  • 无。
返回值:
  • Ext.Element
    The Element which is to be resized by size managing layouts.
BoxComponent
getSize () : Object
获取组件底层元素当前的大小。
获取组件底层元素当前的大小。
参数:
  • 无。
返回值:
  • Object
    一个包含元素大小的对象{width: (element width), height: (element height)}
BoxComponent
getValue () : Mixed
返回格式化的数据值(undefined或者emptyText将会以''返回)。 如需返回原始值，参见...
返回格式化的数据值(undefined或者emptyText将会以''返回)。 如需返回原始值，参见 getRawValue。
参数:
  • 无。
返回值:
  • Mixed
    value 表单项的值
Field
getWidth () : Number
获取该组件的当前宽度值。
获取该组件的当前宽度值。
参数:
  • 无。
返回值:
  • Number
BoxComponent
getXType () : String
获取当前组件的xtype，它是用 Ext.ComponentMgr 注册的。 所有可用的xtype列表，参见...
获取当前组件的xtype，它是用 Ext.ComponentMgr 注册的。 所有可用的xtype列表，参见 Ext.Component 类头部。示例用法:

var t = new Ext.form.TextField();
alert(t.getXType());  // alerts 'textfield'
参数:
  • 无。
返回值:
  • String
    The xtype
Component
getXTypes () : String
返回此组件的xtype继承树，用字符'-'分隔。 所有可用的xtype值...

返回此组件的xtype继承树，用字符'-'分隔。 所有可用的xtype值，请参见Ext.Component 类的头部。

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

示例用法:

var t = new Ext.form.TextField();
alert(t.getXTypes());  // alerts 'component/box/field/textfield'
参数:
  • 无。
返回值:
  • String
    xtype层次字符串
Component
hasListener( String eventName ) : Boolean
检测对象是否包含指定事件的任何监听器
检测对象是否包含指定事件的任何监听器
参数:
  • eventName : String
    检测的事件名
返回值:
  • Boolean
    如果事件被监听则为true，否则为false
Observable
hide () : Ext.Component
隐藏当前组件。 监听 beforehide' 事件并且返回false 可以取消隐藏组件的操作。 在隐藏组件之后触发...
隐藏当前组件。 监听 beforehide' 事件并且返回false 可以取消隐藏组件的操作。 在隐藏组件之后触发 ' hide' 事件。 如果组件被配置成 hidden 那么此方法在内部被调用。
参数:
  • 无。
返回值:
  • Ext.Component
    this
Component
isDirty () : Boolean
如果此表单项的值与原始值相比发生了改变，返回true。 如果表单项...

如果此表单项的值与原始值相比发生了改变，返回true。 如果表单项被禁用或者尚未被渲染将会返回false。

注意，如果所属的 form 配置了一个Ext.form.BasicForm， 那么在使用Ext.form.BasicForm. setValues 加载值之后，原始值将会被更新。

参数:
  • 无。
返回值:
  • Boolean
    如果此表单项的值与原始值相比发生了改变(并且没有被禁用)，返回true，其它返回false。
Field
isValid ( Boolean preventMark ) : Boolean
通过 校验 表单项 处理后的值 ，返回表单项当前值是否合法。...
通过 校验 表单项 处理后的值 ，返回表单项当前值是否合法。 注意: disabled 的表单项将会被忽略。
参数:
  • preventMark : Boolean
    True将会禁止把表单项标记为非法
返回值:
  • Boolean
    如果值是合法的，为true，其它为false
Field
isVisible () : Boolean
如果当前组件可见，返回true。
如果当前组件可见，返回true。
参数:
  • 无。
返回值:
  • Boolean
    如果当前组件可见，返回true，其它返回false。
Component
isXType ( String xtype , [ Boolean shallow ] ) : Boolean
Tests whether or not this Component is of a specific xtype. This can test whether this Component is descended from th...

测试此组件是否是指定的xtype。此方法既可以测试是否是指定的xtype的某个子类， 或者它是否直接是指定的xtype类(shallow=true)。

如果使用你自己的子类，必须知道组件必须注册它的xtype值。

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

示例用法:

var t = new Ext.form.TextField();
var isText = t.isXType('textfield');        // true
var isBoxSubclass = t.isXType('box');       // true, descended from BoxComponent
var isBoxInstance = t.isXType('box', true); // false, not a direct BoxComponent instance
参数:
  • xtype : String
    需要为当前组件进行检测的xtype
  • shallow : Boolean
    (可选) 如果为false，检测组件是否是xtype继承树中的某个子类（默认是这种情况）， 如果为true，只检测组件是否是指定的xtype类型。
返回值:
  • Boolean
    如果当前组件是指定xtype的子类，返回true，其它返回flase。
Component
markInvalid ( [ String msg ] ) : void
显示一个关联到当前表单项的出错信息， 使用msgTarget 来决定如何显示消息并将...

显示一个关msgTarget 来决定如何显示消息并将 invalidClass 应用到表单项的UI元素上。

注意: 如果表单项的值确实通过了校验， 此方法不会导致表单项的 validate 方法返回 false 。 所以简单地把一个表单项标记为非法并不会阻止表单项 通过设置的 Ext.form.Action.Submit.clientValidation 被提交。

invalid.
参数:
  • msg : String
    (可选)校验信息(默认为invalidText)
返回值:
  • void
Field
mon ( Observable|Element item , Object|String ename , Function fn , Object scope , Object opt ) : void
向任何Observable对象(或者元素)上添加监听器，监听器将会在组件...

向任何Observable对象(或者元素)上添加监听器，监听器将会在组件销毁时被自动删除。
用法：

myGridPanel.mon(myGridPanel.getSelectionModel(), 'selectionchange', handleSelectionChange, null, {buffer: 50});

or:

myGridPanel.mon(myGridPanel.getSelectionModel(), {
    selectionchange: handleSelectionChange,
    buffer: 50
});
参数:
  • item : Observable|Element
    需要添加listener/listeners的项目。
  • ename : Object|String
    事件名，或者一个包含事件名属性的对象。
  • fn : Function
    (可选) 如果 ename 参数是一个事件名，此参数为处理函数。
  • scope : Object
    (可选)如果 ename 参数是一个事件名称，此参数是作用域 ( this 引用)，监听函数将会在此作用域中被执行。
  • opt : Object
    (可选)如果 ename 参数是一个事件名称， 此参数是 addListener 配置项。
返回值:
  • void
Component
mun ( Observable|Element item , Object|String ename , Function fn , Object scope ) : void
删除通过mon 方法添加的监听器。
删除通过mon 方法添加的监听器。
参数:
  • item : Observable|Element
    需要删除listener/listeners的项目。
  • ename : Object|String
    事件名称，或者一个包含事件名称属性的对象。
  • fn : Function
    (可选)如果 ename 参数是一个事件名称，此参数是一个处理函数。
  • scope : Object
    (可选)如果 ename 参数是一个事件名称，此参数是作用域 ( this 引用)，监听函数将会在此作用域中被执行。
返回值:
  • void
Component
nextSibling () : Ext.Component
返回所属容器中的下一个组件
返回所属容器中的下一个组件
参数:
  • 无。
返回值:
  • Ext.Component
Component
on( String eventName, Function handler, [Object scope], [Object options] ) : void
给对象添加事件处理器 (addListener的简写形式)
给对象添加事件处理器 (addListener的简写形式。)
参数:
  • eventName : String
    监听的事件类型
  • handler : Function
    事件调用的方法
  • scope : Object
    （可选）处理方法执行时的作用域 (this 的引用)。 如果被忽略。默认为触发事件的对象。
  • options : Object
    可选 包含处理器配置的对象。
返回值:
  • void
Observable
previousSibling () : Ext.Component
返回所属容器中的前一个组件
返回所属容器中的前一个组件
参数:
  • 无。
返回值:
  • Ext.Component
Component
processValue ( Mixed value ) : void
仅仅在需要准备原始值供校验时，才需要覆盖此方法(参见 validate和 isValid)。...
仅仅在需要准备原始值供校验时，才需要覆盖此方法(参见 validate和 isValid)。 此方法被期望为表单项返回处理后的值，此值将会被用来进行校验 (参见validateValue方法)。
参数:
  • value : Mixed
返回值:
  • void
Field
purgeListeners() : void
移除对象上所有的监听器
移除对象上所有的监听器
参数:
  • 无。
返回值:
  • void
Observable
relayEvents( Object o, Array events ) : void
从指定的Observable上传递选择的事件就好像被当前对象触发一样。
从指定的Observable上传递选择的事件就好像被当前对象触发一样。
参数:
  • o : Object
    该Observable上的事件被当前对象传递。
  • events : Array
    传递的数组名。
返回值:
  • void
Observable
removeClass ( string cls ) : Ext.Component
从组件底层的元素上删除一个CSS类。
从组件底层的元素上删除一个CSS类。
参数:
  • cls : string
    需要移除的CSS类名
返回值:
  • Ext.Component
    this
Component
removeListener( String eventName, Function handler, [Object scope] ) : void
删除一个事件处理器。
删除一个事件处理器。
参数:
  • eventName : String
    处理器关联的事件类型。
  • handler : Function
    移除的处理器。 这应该是传递到addListener里的方法的引用。
  • scope : Object
    （可选）处理器指定的初始作用域。
返回值:
  • void
Observable
render ( [ Element/HTMLElement/String container ], [ String/Number position ] ) : void
在传递进来的HTML元素中渲染当前组件。...

在传递进来的HTML元素中渲染当前组件。

如果你正在使用一个Container 对象放置当前组件，那么请不要使用render方法。

当容器第一次被渲染时，它的子组件将会被容器的 layout 管理器渲染。

某些布局管理器允许动态添加子组件。它们包括 Ext.layout.CardLayout, Ext.layout.AnchorLayout, Ext.layout.FormLayout, Ext.layout.TableLayout。

当一个新的子组件被添加时，如果容器已经被渲染了， 你可能需要调用容器的 doLayout 方法来刷新视图，它将导致所有没有被渲染的子组件进行渲染操作。 此操作是必须的，这样你可以添加多个子组件而只刷新一次layout。

当创建复杂的UI时，非常重要的一点是，请记住调整子项目的尺寸和位置是容器的 layout 管理器的职责。 如果你希望子项目的尺寸对用户交互作出反应， 你必须为容器配置一个布局管理器，它将创建和管理你心里想要的那种布局。

忽略容器的layout 配置意味着将会使用一个基本的布局管理器，它除了按次序把子组件 渲染到容器中之外什么事情都不做。 这种情况下，任何尺寸和位置的调整操作都不会发生。

参数:
  • container : Element/HTMLElement/String
    (可选) 需要在其中渲染当前组件的元素。 如果它是从一个已存在的标签中创建的，此参数应该被忽略。
  • position : String/Number
    (可选) 容器中的一个元素ID或者一个DOM节点索引， 当前组件将会被插入到它前面 (默认append到容器的尾部)
返回值:
  • void
Component
reset () : void
讲表单项的值重置为原先加载的值， 并且清除所有校验信息。 如果原先的值为空，也会添加...
讲表单项的值重置为原先加载的值， 并且清除所有校验信息。 如果原先的值为空，也会添加 emptyText 和 emptyClass 。
参数:
  • 无。
返回值:
  • void
TextField
resumeEvents() : void
重新开始触发事件。(参见suspendEvents) 如果事件以queueSuspended参数被挂起，则在事件被挂起时 ...
重新开始触发事件。(参见 suspendEvents) 如果事件以queueSuspended 参数被挂起，则在事件被挂起时触发的事件会被传递到所有的监听器上
参数:
  • 无。
返回值:
  • void
Observable
selectText ( [ Number start ], [ Number end ] ) : void
选中当前表单项中的文本
选中当前表单项中的文本
参数:
  • start : Number
    (可选)选中的起点索引(默认为0)
  • end : Number
    (可选)选中的结束索引(默认为文本长度)
返回值:
  • void
TextField
setActiveError ( String msg , Boolean suppressEvent ) : void
将当前activeError设置为所给的字符串。 触发'invalid'事件。这不会设置出错图标...
将当前activeError设置为所给的字符串。 触发'invalid'事件。这不会设置出错图标，仅仅设置消息并触发事件。 如需显示出错图标，可使用markInvalid代替，它将在内部调用此方法。
参数:
  • msg : String
    出错消息
  • suppressEvent : Boolean
    True将会禁止触发'invalid'事件
返回值:
  • void
Field
setAutoScroll ( Boolean scroll ) : Ext.BoxComponent
设置该组件内容溢出时是否自动显示滚动条。
设置该组件内容溢出时是否自动显示滚动条。
参数:
  • scroll : Boolean
    值为true的话组件自动显示滚动条。
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setDisabled ( Boolean disabled ) : Ext.Component
工具函数，使用布尔值设置有效/无效(disabled/enabled )。
工具函数，使用布尔值设置有效/无效(disabled/enabled )。
参数:
  • disabled : Boolean
返回值:
  • Ext.Component
    this
Component
setHeight ( Mixed height ) : Ext.BoxComponent
设置此组件的高度。该方法将触发resize事件。
设置此组件的高度。该方法将触发resize事件。
参数:
  • height : Mixed
    The new height to set.
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setPagePosition ( Number x , Number y ) : Ext.BoxComponent
设置组件在页面中的XY位置。 如果需要设置left和top值 ，请使用...
设置组件在页面中的XY位置。 如果需要设置left和top值 ，请使用setPosition方法。 该方法触发move事件。
参数:
  • x : Number
    The new x position
  • y : Number
    The new y position
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setPosition ( Number left , Number top ) : Ext.BoxComponent
设置组件的left和top值。设置组件的页面XY值，请使用setPagePosition方法。该方法触发...
设置组件的left和top值。设置组件的页面XY值，请使用setPagePosition方法。该方法触发move事件。
参数:
  • left : Number
    The new left
  • top : Number
    The new top
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setRawValue ( Mixed value ) : Mixed
绕过校验，直接设置底层DOM表单项的值。 设置值并进行校验，参见 setValue。
绕过校验，直接设置底层DOM表单项的值。 设置值并进行校验，参见 setValue。
参数:
  • value : Mixed
    需要设置的值
返回值:
  • Mixed
    value 被设置的表单项值
Field
setReadOnly ( Boolean readOnly ) : void
设置当前表单项的只读状态。
设置当前表单项的只读状态。
参数:
  • readOnly : Boolean
    表单项是否应该只读。
返回值:
  • void
Field
setSize ( Mixed width , Mixed height ) : Ext.BoxComponent
设置BoxComponent的宽度和高度。 此方法触发resize事件...
设置BoxComponent的宽度和高度。 此方法触发resize事件。此方法可以接收单独的width或者height值作为参数， 或者你可以传递像这样的一个size对象： {width:10, height:20} 。
参数:
  • width : Mixed
    设置的新的width值。这可以是：
    • 一个Number类型指定Element新的宽度 Ext.Element.defaultUnit(默认为像素 :'px')。
    • 一个String类型用于设置width的CSS样式。
    • 一个size对象格式为 {width: widthValue, height: heightValue} 。
    • 值为 undefined 时，保留原来的width不变。
  • height : Mixed
    设置的新的height值(如果第一个参数传递了一个size对象，此参数没有必要传递)。这可以是：
    • 一个Number类型指定Element新的高度 Ext.Element.defaultUnit(默认为像素 :'px')。
    • 一个String类型用于设置height的CSS样式。也有可能不会被使用到。
    • 值为 undefined 时，保留原来的height不变。
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setValue ( Mixed value ) : Ext.form.Field
向表单项中设置一个数据值并校验之。 如需直接设置值而不进行校验，参见 setRawValue。
向表单项中设置一个数据值并校验之。 如需直接设置值而不进行校验，参见 setRawValue。
参数:
  • value : Mixed
    需要设置的值
返回值:
  • Ext.form.Field
    this
Field
setVisible ( Boolean visible ) : Ext.Component
工具方法，通过使用布尔值隐藏或者显示当前组件。
工具方法，通过使用布尔值隐藏或者显示当前组件。
参数:
  • visible : Boolean
    true时显示，false时隐藏
返回值:
  • Ext.Component
    this
Component
setWidth ( Mixed width ) : Ext.BoxComponent
设置组件的宽度。 此方法触发resize事件。
设置组件的宽度。 此方法触发resize事件。
参数:
  • width : Mixed
    The new width to set.
返回值:
  • Ext.BoxComponent
    this
BoxComponent
show () : Ext.Component
显示当前组件。监听' beforeshow' 事件，返回 false 取消显示组件...
显示当前组件。监听' beforeshow' 事件，返回 false 取消显示组件。在显示组件之后触发' show' 事件。
参数:
  • 无。
返回值:
  • Ext.Component
    this
Component
suspendEvents( Boolean queueSuspended ) : void
暂停触发所有的事件。 (参看resumeEvents)
暂停触发所有的事件。（参看 resumeEvents)
参数:
  • queueSuspended : Boolean
    如果传递为true则排列好暂停的事件使得在调用 resumeEvents 后再触发它们，而不是抛弃所有暂停的事件。
返回值:
  • void
Observable
syncSize () : Ext.BoxComponent
强制组件的大小按照此组件底层元素当前的高度和宽度计算。
强制组件的大小按照此组件底层元素当前的高度和宽度计算。
参数:
  • 无。
返回值:
  • Ext.BoxComponent
    this
BoxComponent
un( String eventName, Function handler, [Object scope] ) : void
删除一个事件处理器(removeListener方法的简写形式)
删除一个事件处理器(removeListener方法的简写形式。)
参数:
  • eventName : String
    处理器关联的事件类型
  • handler : Function
    被删除的处理器 这应该是传入 addListener 中的方法的引用。
  • scope : Object
    （可选）为处理器指定的初始作用域。
返回值:
  • void
Observable
unsetActiveError ( Boolean suppressEvent ) : void
清除activeError并触发'valid'事件。此方法被clearInvalid在内部进行...
清除activeError并触发'valid'事件。此方法被clearInvalid在内部进行调用， 并且一般情况下没有必要手工调用
参数:
  • suppressEvent : Boolean
    True将禁止触发'invalid'事件
返回值:
  • void
Field
update ( Mixed htmlOrData , [ Boolean loadScripts ], [ Function callback ] ) : void
刷新组件的内部区域。
刷新组件的内部区域。
参数:
  • htmlOrData : Mixed
    如果已经通过tpl为当前组件配置了一个模板，那么 将会使用此参数来装配模板。 如果没有为当前组件配置模板，组件的内容区域将会通过Ext.Element 进行刷新。
  • loadScripts : Boolean
    (可选)只用在使用html配置时此参数才合法。默认为false。
  • callback : Function
    (可选)只用在使用html配置时此参数才合法。 当脚本加载完成时回调函数才被执行。
返回值:
  • void
Component
updateBox ( Object box ) : Ext.BoxComponent
设置此组件底层元素的盒子模型尺寸。(译者注：盒子模型是CSS术语，详细资料请自行搜索。)
设置此组件底层元素的盒子模型尺寸。(译者注：盒子模型是CSS术语，详细资料请自行搜索。)
参数:
  • box : Object
    一个格式为{x, y, width, height}的对象
返回值:
  • Ext.BoxComponent
    this
BoxComponent
validate () : Boolean
校验表单项的值
校验表单项的值
参数:
  • 无。
返回值:
  • Boolean
    如果值合法，为true,否则为false
Field
validateValue ( Mixed The ) : Boolean
使用getErrors创建一个校验出错信息数组。 如果发现了任何错误，将会使用第一个错误作为参数...
使用getErrors创建一个校验出错信息数组。 如果发现了任何错误，将会使用第一个错误作为参数调用markInvalid方法并返回 false，否则返回true。以前，要求子类提供此方法的一个实现以处理校验过程--- 从3.2开始，应该用覆盖getErrors方法的方式替代。
参数:
  • The : Mixed
    表单项的当前值
返回值:
  • Boolean
    如果所有校验都通过，此值为true，如果一个或多个校验失败，则为false
Field

公共事件

Event Defined By
added : ( Ext.Component this , Ext.Container ownerCt , number index )
当一个组件被添加到一个Ext.Container时触发
当一个组件被添加到一个Ext.Container时触发
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • ownerCt : Ext.Container
    用于组件的容器
  • index : number
    添加组件的位置
Component
afterrender : ( Ext.Component this )
在组件渲染完成之后触发...

在组件渲染完成之后触发。

afterrender事件在当前组件被rendered 结束之后、在为组件定义的所有afterRender方法执行之后 触发，并且，如果有stateful， 也在状态被保存之后才触发。

监听器将会以如下参数格式被调用:
  • this : Ext.Component
Component
autosize : ( Ext.form.Field this , Number width )
当autoSize 方法被触发时发出此事件。 根据默认的逻辑，表单项可以有也可以实际上没有...
当autoSize 方法被触发时发出此事件。 根据默认的逻辑，表单项可以有也可以实际上没有 改变尺寸，但是此事件提供了一个钩子，如果有需要， 开发者在运行时可以提供额外的逻辑来改变输入栏的大小。
监听器将会以如下的参数格式调用:
  • this : Ext.form.Field
    文本栏
  • width : Number
    表单项新宽度
TextField
beforedestroy : ( Ext.Component this )
在组件 destroyed 之前触发。 在事件监听器中返回false以停止 destroy 操作。
在组件 destroyed 之前触发。 在事件监听器中返回false以停止 destroy 操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforehide : ( Ext.Component this )
在调用hide方法隐藏组件之前触发。 在事件监听器中返回false可以停止隐藏操作。
在调用hide方法隐藏组件之前触发。 在事件监听器中返回false可以停止隐藏操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforerender : ( Ext.Component this )
在组件被rendered 之前触发。 在事件监听器中返回false可以停止render 操作。
在组件被rendered 之前触发。 在事件监听器中返回false可以停止render 操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforeshow : ( Ext.Component this )
在调用show()方法现实组件之前触发。 事件处理函数返回false可以停止show。
在调用show 方法现实组件之前触发。 事件处理函数返回false可以停止show。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforestaterestore : ( Ext.Component this , Object state )
在组件状态恢复之前触发。返回false停止恢复状态操作。
在组件状态恢复之前触发。返回false停止恢复状态操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    StateProvider返回的状态哈希值。 如果没有禁止此事件，那么状态对象会被传递给applyState。 默认情况下，这样简单地把属性值拷贝到当前组件中。 可以覆盖此方法以提供自定的状态恢复操作。
Component
beforestatesave : ( Ext.Component this , Object state )
在组件状态被保存到配置的状态提供者之前触发。 返回false可以停止保存。
在组件状态被保存到配置的状态提供者之前触发。 返回false可以停止保存。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    状态值哈希。 这由在组件上调用getState() 方法决定。 此方法必须由开发者提供，返回是否需要对状态进行描述，默认情况下， Ext.Component有一个空实现。
Component
blur : ( Ext.form.Field this )
当表单项时区输入焦点时触发。
当表单项时区输入焦点时触发。
监听器将会以如下参数被调用:
  • this : Ext.form.Field
Field
change : ( Ext.form.Field this , Mixed newValue , Mixed oldValue )
如果表单项的时发生改变，在表单项刚刚失去焦点时触发。
如果表单项的时发生改变，在表单项刚刚失去焦点时触发。
监听器将会以如下参数格式调用:
  • this : Ext.form.Field
  • newValue : Mixed
    新的值
  • oldValue : Mixed
    原始值
Field
destroy : ( Ext.Component this )
在组件被销毁之后触发。
在组件被destroyed之后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
disable : ( Ext.Component this )
在组件被设置为无效状态后触发。
在组件被设置为无效状态后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
enable : ( Ext.Component this )
当组件被设置为有效(enabled)之后触发。
当组件被设置为有效(enabled)之后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
focus : ( Ext.form.Field this )
当表单项获得输入焦点时触发。
当表单项获得输入焦点时触发。
监听器将会以如下参数格式被调用:
  • this : Ext.form.Field
Field
hide : ( Ext.Component this )
在组件被隐藏之后触发。 当调用hide 方法隐藏组件之后触发。
在组件被隐藏之后触发。 当调用hide 方法隐藏组件之后触发。
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
invalid : ( Ext.form.Field this , String msg )
在表单项被标记为非法之后触发。
在表单项被标记为非法之后触发。
监听器将会以如下参数格式调用:
  • this : Ext.form.Field
  • msg : String
    校验信息
Field
keydown : ( Ext.form.TextField this , Ext.EventObject e )
输入栏的keydown事件。 只有在 enableKeyEvents 被设置为true时才触发此事件。
输入栏的keydown事件。 只有在 enableKeyEvents 被设置为true时才触发此事件。
监听器将会以如下参数格式调用:
  • this : Ext.form.TextField
    文本栏
  • e : Ext.EventObject
TextField
keypress : ( Ext.form.TextField this , Ext.EventObject e )
输入栏的keypress事件。 只有在enableKeyEvents 被设置为true时才触发此事件。
输入栏的keypress事件。 只有在enableKeyEvents 被设置为true时才触发此事件。
Listeners will be called with the following arguments:
  • this : Ext.form.TextField
    文本栏
  • e : Ext.EventObject
TextField
keyup : ( Ext.form.TextField this , Ext.EventObject e )
输入栏keyup事件。 只有在 enableKeyEvents 被设置为true时才触发此事件。
输入栏keyup事件。 只有在 enableKeyEvents 被设置为true时才触发此事件。
监听器将会以如下的参数格式调用:
  • this : Ext.form.TextField
    文本栏
  • e : Ext.EventObject
TextField
move : ( Ext.Component this , Number x , Number y )
在组件移动之后触发。
在组件移动之后触发。
监听器将会用如下的参数格式来调用:
  • this : Ext.Component
  • x : Number
    The new x position
  • y : Number
    The new y position
BoxComponent
removed : ( Ext.Component this , Ext.Container ownerCt )
当一个组件被从Ext.Container容器中删除时触发
当一个组件被从Ext.Container容器中删除时触发
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • ownerCt : Ext.Container
    持有组件的容器
Component
render : ( Ext.Component this )
在组件被渲染之后触发。
在组件被 rendered(渲染) 之后触发。
监听器将以如下的参数格式被调用:
  • this : Ext.Component
Component
resize : ( Ext.Component this , Number adjWidth , Number adjHeight , Number rawWidth , Number rawHeight )
在组件被调整大小之后触发。
在组件被调整大小之后触发。
监听器将以如下的参数格式被调用:
  • this : Ext.Component
  • adjWidth : Number
    这是width调整后的值
  • adjHeight : Number
    这是height调整后的值
  • rawWidth : Number
    这是width原来的值
  • rawHeight : Number
    这是height原来的值
BoxComponent
show : ( Ext.Component this )
在调用show 方法显示组件之后触发。
在调用show 方法显示组件之后触发。
监听器将会用如下的参数格式被调用:
  • this : Ext.Component
Component
specialkey : ( Ext.form.Field this , Ext.EventObject e )
当任何和导航有关的键被按下时触发(上下左右箭头, tab, 回车,esc, 等等) is pressed. 处理其它按键参见...
当任何和导航有关的键被按下时触发(上下左右箭头, tab, 回车,esc, 等等) is pressed. 处理其它按键参见 Ext.Panel.keys或者 Ext.KeyMap。 你可以检测 Ext.EventObject.getKey 以便获知哪个键被按下。例如：
var form = new Ext.form.FormPanel({
    ...
    items: [{
            fieldLabel: 'Field 1',
            name: 'field1',
            allowBlank: false
        },{
            fieldLabel: 'Field 2',
            name: 'field2',
            listeners: {
                specialkey: function(field, e){
                    // e.HOME, e.END, e.PAGE_UP, e.PAGE_DOWN,
                    // e.TAB, e.ESC, arrow keys: e.LEFT, e.RIGHT, e.UP, e.DOWN
                    if (e.getKey() == e.ENTER) {
                        var form = field.ownerCt.getForm();
                        form.submit();
                    }
                }
            }
        }
    ],
    ...
});
监听器将会以如下参数格式被调用:
  • this : Ext.form.Field
  • e : Ext.EventObject
    事件对象
Field
staterestore : ( Ext.Component this , Object state )
组件状态被存储之后触发。
组件状态被存储之后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    StateProvider返回的状态哈希值。 如果没有禁止此事件，那么状态对象会被传递给applyState。 默认情况下，这样简单地把属性值拷贝到当前组件中。 可以覆盖此方法以提供自定的状态恢复操作。
Component
statesave : ( Ext.Component this , Object state )
在组件状态被保存到所配置的状态提供者之后触发。
在组件状态被保存到所配置的状态提供者之后触发。
监听器将会用如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    状态值hash。 这是由在足见上调用getState() 方法决定的。 开发者必须提供此方法以返回是否需要恢复状态，默认情况下， Ext.Component有一个空实现。
Component
valid : ( Ext.form.Field this )
在表单项被校验无错误之后触发。
在表单项被校验无错误之后触发。
监听器将会以如下参数格式被调用:
  • this : Ext.form.Field
Field


Observable
    Component
      BoxComponent
        Field
          TextField
            TriggerField
              ComboBox
                TimeField

Class Ext.form.TimeField

包: | Ext.form
定义类的文件: | TimeField.js
类: | TimeField
继承自: | ComboBox
提供一个时间输入表单项，拥有时间下拉框和自动时间校验功能。 示例用法:
new Ext.form.TimeField({
    minValue: '9:00 AM',
    maxValue: '6:00 PM',
    increment: 30
});

配置项

Config Options Defined By
allQuery : String
发送给服务器的查询文本，用来为列表返回所有记录而不进行过滤(默认为'')
ComboBox
allowBlank : Boolean
指定为false将会只允许值的长度>0(默认为true)
TextField
allowDomMove : Boolean
在渲染时组件是否可以移动Dom节点(默认为true)。
Component
altFormats : String
当解析用户输入值，而它不符合定义的格式时，所使用的日期格式，以"|"号分隔...
当解析用户输入值，而它不符合定义的格式时，所使用的日期格式，以"|"号分隔 (默认为 'g:ia|g:iA|g:i a|g:i A|h:i|g:i|H:i|ga|ha|gA|h a|g a|g A|gi|hi|gia|hia|g|H|gi a|hi a|giA|hiA|gi A|hi A')。
TimeField
anchor : String
注: 这个配置只用于该组件被包含在一个已使用AnchorLayout...

注: 这个配置只用于该组件被包含在一个已使用 AnchorLayout (或者其子类)配置的Container时。 基于布局管理器，例如：

  • Ext.form.FormPanel
  • 指定 layout: 'anchor' // or 'form', or 'absolute'

参见 Ext.layout.AnchorLayout. anchor 。

BoxComponent
applyTo : Mixed
指定一个元素的id、一个DOM元素或者一个已经存在并被渲染到DIV中的元素，此DIV已经被...

指定一个元素的id、一个DOM元素或者一个已经存在并被渲染到DIV中的元素，此DIV已经被 渲染到document中，并且为当前组件指定了一些结构化的标签。

  • 描述 :
      当使用了 applyTo， 在主元素中也可以用id或者CSS类名来指定组件的托管部分， 并且，如果可以的话，创建的组件可能也会试图在那个标签中创建它的子组件。
  • 注意 :
      当使用此配置项时，无需调用render()方法。
      如果指定了applyTo属性，任何传递给 renderTo 的值都会被忽略，并且目标元素的父节点将会自动被用作组件的容器。
Component
autoCreate : String/Object
一个DomHelper 元素描述，或者为true使用一个默认元素描述。 用来创建封装当前组件的...

一个DomHelper 元素描述，或者为true使用一个默认元素描述。 用来创建封装当前组件的 Element。 细节参见 autoEl 。 默认为:

                                {tag: 'input', type: 'text', size: '20', autocomplete: 'off'}
ComboBox
autoEl : Mixed
一个表签名或者一个 DomHelper 描述，用来创建 Element ，它将封装当前组件...

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

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

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

{
    xtype: 'box',
    autoEl: {
        tag: 'img',
        src: 'http://www.example.com/example.jpg'

    }
}, {
    xtype: 'box',
    autoEl: {
        tag: 'blockquote',
        html: 'autoEl is cool!'
    }
}, {
    xtype: 'container',
    autoEl: 'ul',
    cls: 'ux-unordered-list',
    items: {
        xtype: 'box',
        autoEl: 'li',
        html: 'First list item'
    }
}
Component
autoHeight : Boolean
如果值为true，height配置项为'auto'，否则值为false的话使用固定的高度...

如果值为true，height配置项为'auto'，否则值为false的话使用固定的高度， 或者可以由其父类容器 layout manager来控制。(默认值为 false)。

注: 虽然很多组件继承了这个配置选项，但不是所有这些组件的自适应高度配置都会像期望的那样起作用。 设置autoHeight：值为true时，浏览器将根据元素的内容自动设置高度，这将意味着Ext不会去管理高度。

如果是由浏览器来管理高度，需要注意的是，通过浏览器进行调整的结构组件内不能被发现， 因此宽度的变化可能导致需要进行同步处理元素的高度。 例如：

var w = new Ext.Window({
    title: 'Window',
    width: 600,
    autoHeight: true,
    items: {
        title: 'Collapse Me',
        height: 400,
        collapsible: true,
        border: false,
        listeners: {
            beforecollapse: function() {
                w.el.shadow.hide();
            },
            beforeexpand: function() {
                w.el.shadow.hide();
            },
            collapse: function() {
                w.syncShadow();
            },
            expand: function() {
                w.syncShadow();
            }
        }
    }
}).show();
BoxComponent
autoScroll : Boolean
如果值为true，将会在该元素上使用overflow:'auto'配置，并且在必要的时候...
如果值为true，将会在该元素上使用overflow:'auto'配置，并且在必要的时候自动显示滚动条，否则，溢出部分的组件都会被切除(默认值为 false)。
BoxComponent
autoSelect : Boolean
true将会选中数据store收集到的第一条结果 (默认为true)。 false将会需要手动从下拉列表中选择，用来设置组件的值，除非...
true将会选中数据store收集到的第一条结果 (默认为true)。 false将会需要手动从下拉列表中选择，用来设置组件的值，除非 typeAheadDelay) 的值为true。
ComboBox
autoShow : Boolean
如果组件需要检测隐藏CSS属性(如 'x-hidden' 或者 'x-hide-display')并且在渲染时删除...
如果组件需要检测隐藏CSS属性(如 'x-hidden' 或者 'x-hide-display')并且在渲染时删除它们 (默认为false)，设置此值为true。
Component
autoWidth : Boolean
如果为true，使用width:'auto'配置，否则使用固定的宽度...

如果为true，使用width:'auto'配置，否则使用固定的宽度，或者可以由其父类容器的layout manager来控制。(默认值为 false)。

注: 虽然很多组件继承了这个配置选项，但不是所有这些组件的自适应宽度配置都会像期望的那样起作用。 设置autoWidth：值为true时，浏览器将根据元素的内容自动设置宽度，这将意味着Ext不会去管理宽度。

如果是由浏览器来管理宽度，需要注意的是，通过浏览器进行调整的结构组件内不能被发现，因此宽度的变化可能导致需要进行同步处理元素的宽度。 例如，在这个元素的目标是：

<div id='grid-container' style='margin-left:25%;width:50%'></div>
当浏览器窗口改变时，渲染后的Panel必须监听浏览器窗口大小的变化，以便通知子项，浏览器改变了其宽度：

var myPanel = new Ext.Panel({
    renderTo: 'grid-container',
    monitorResize: true, // relay on browser resize
    title: 'Panel',
    height: 400,
    autoWidth: true,
    layout: 'hbox',
    layoutConfig: {
        align: 'stretch'
    },
    defaults: {
        flex: 1
    },
    items: [{
        title: 'Box 1',
    }, {
        title: 'Box 2'
    }, {
        title: 'Box 3'
    }],
});
BoxComponent
blankText : String
如果 allowBlank 校验失败时需要显示的出错信息(默认为'This field is required')
TextField
boxMaxHeight : Number
设置组件的最大高度值...

设置组件的最大高度值。

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

BoxComponent
boxMaxWidth : Number
设置组件的最大宽度值...

设置组件的最大宽度值。

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

BoxComponent
boxMinHeight : Number
设置组件的最小高度值...

设置组件的最小高度值。

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

BoxComponent
boxMinWidth : Number
设置组件的最小宽度值...

设置组件的最小宽度值。

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

BoxComponent
bubbleEvents : Array
一个事件数组，当这些事件被触发时，将会被冒泡到所有父容器中。参见....

一个事件数组，当这些事件被触发时，将会被冒泡到所有父容器中。参见 Ext.util.Observable.enableBubble。 默认为 []。

Component
clearCls : String
应用到特殊的clearing div的CSS类， 这个clearing div直接渲染到每个form field的包装器后面...

应用到特殊的clearing div的CSS类， 这个clearing div直接渲染到每个form field的包装器后面，以提供 清除field的功能(默认为 'x-form-clear-left')。

注意: 只有在当前组件被渲染到一个使用FormLayout 布局(例如 Ext.form.FormPanel 或者指定 layout:'form')的 容器中、或者是指定了一个fieldLabel 、或者指定isFormField=true 时此配置才有效。

另请参见 Ext.layout.FormLayout. fieldTpl。

Component
clearFilterOnReset : Boolean
true 当调用reset时，将会清除store上的所有filter(在local模式下) (默认为true)
ComboBox
cls : String
一个可选的额外CSS类，它将被添加到当前组件的元素上(默认为'')...
一个可选的额外CSS类，它将被添加到当前组件的元素上(默认为'')。 此属性对于在组件上，或者它的任何使用标准CSS规则的孩子节点上， 添加定制的样式非常有用。
Field
contentEl : String
(可选)指定一个已存在的HTML元素，或者一个已存在HTML元素的...

(可选)指定一个已存在的HTML元素，或者一个已存在HTML元素的 id ，它们将被用作当前组件的内容。

  • 描述 :
    此配置选项被用来将一个已存在的HTML元素 插入到一个新组件(在组件渲染之后它简单地移动DOM元素) 的layout元素中，使它成为该组件的内容。
  • 注意 :
    指定的HTML元素将被append到组件的layout元素中， 在所有配置的 HTML 被插入之后， 并且，这样的话，在render事件 被触发时，document中将不再包含此元素。
    指定的HTML元素将不会参与组件所有可能使用的 layout 过程(译者注：指这些HTML元素 不会参与布局操作)。 它仅是HTML而已。布局操作实在孩子 items 上进行的。
    添加 x-hidden 或者 x-hide-display CSS类，以防在内容渲染到panel时发生闪烁。
Component
ctCls : String
一个可选的外部CSS样式，添加到这个组件的容器(默认值为 '')。 这个方法对于使用标准的CSS规则...

一个可选的外部CSS样式，添加到这个组件的容器(默认值为 '')。 这个方法对于使用标准的CSS规则，为组件或它的任何一个子组件添加特定的样式非常有用。 参见 Ext.layout.ContainerLayout和 extraCls 。

注意: ctCls 默认为 ''期望如下的类，它们将指定一个默认值:

  • Box Layout : 'x-box-layout-ct'
使用一个额外的CSS类配置以上的Class，它是append到默认对象上的。例如， 对于BoxLayout (Hbox and Vbox):
                                ctCls: 'x-box-layout-ct custom-class'

Component
data : Mixed
初始化数据集，它将被应用到 tpl 上以刷新组件的内容区域。
Component
disableKeyFilter : Boolean
指定为true将会禁用按键过滤(默认为false)
TextField
disabled : Boolean
当前组件处于无效状态时为true。 Read-only.
Field
disabledClass : String
当组件处于无效状态时添加到组件上的CSS类(默认为 'x-item-disabled')。
Component
displayField : String
需要绑定到当前ComboBox的底层 数据值名称 (如果...
需要绑定到当前ComboBox的底层 数据值名称 (如果mode = 'remote'时默认为undefined， 如果 转换一个选中项目 或者 根据store的配置项自动生成field name 时为'field1'。

另请参见 valueField 。

注意: 如果在Editor Grid中使用 ComboBox，当editor处于非活动状态时，需要一个 renderer 显示displayField。

ComboBox
editable : Boolean
false将阻止用户直接向表单项中输入文本，表单项将仅仅响应...
false将阻止用户直接向表单项中输入文本，表单项将仅仅响应 在触发按钮上进行鼠标点击然后设置值。(默认为true)。
TriggerField
emptyClass : String
应用到空表单项的CSS类，以便样式化 emptyText (默认为'x-form-empty-field')。...
应用到空表单项的CSS类，以便样式化 emptyText (默认为'x-form-empty-field')。 根据表单项当前值，此样式按需要被自动添加和删除。
TextField
emptyText : String
放置到空表单项中的默认文本(默认为null)。 注意:...
放置到空表单项中的默认文本(默认为null)。 注意: 如果当前表单栏处于有效状态并且被配置了一个名称，那么此值会被 提交到服务器。
TextField
enableKeyEvents : Boolean
true将为HTML输入栏启用按键事件代理 (默认为false)。
TextField
fieldClass : String
表单项的默认CSS类(默认为'x-form-field')
Field
fieldLabel : String
紧靠此field显示的标签文本(默认值为 '')。注意...

紧靠此field显示的标签文本(默认值为 '')。

注意:只有在当前组件被渲染到一个使用FormLayout 的容器中时，此配置才有效。 (例如 Ext.form.FormPanel 或 指定 layout:'form')。

另请参见 hideLabel 、 Ext.layout.FormLayout和 fieldTpl。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Name'
    }]
});
Component
flex : Number
注: 这个配置只用于该组件被包含在一个已使用BoxLayout配置的Container中时...

注: 这个配置只用于该组件被包含在一个已使用BoxLayout配置的Container中时。通过计算每一个子组件的flex值所占全部flex值之和的比例，来决定子组件的宽(HBoxLayout)高(VBoxlayout)。 任何子项的 flex = 0 或 flex = undefined 将不被设置(初始值大小将不被改变)。

BoxComponent
focusClass : String
当表单项获得焦点时使用的CSS类(默认为 'x-form-focus')
Field
forceSelection : Boolean
将会限定选择的值是列表中的值之一， false将会允许用户向表单项中设置任意值...
true 将会限定选择的值是列表中的值之一， false将会允许用户向表单项中设置任意值 (默认为false)
ComboBox
format : String
默认时间格式化字符串，可以覆盖它以提供本地化支持。 根据Date.parseDate格式必须合法...
默认时间格式化字符串，可以覆盖它以提供本地化支持。 根据Date.parseDate格式必须合法 (默认为'g:i A', e.g., '3:15 PM')。 对于24小时制格式，请用'H:i'代替。
TimeField
handleHeight : Number
当resizable = true时，下拉列表尺寸调整手柄的高度像素值 (默认为8)
ComboBox
height : Number
组件的高度(默认值为 auto)。注:如果想使用百分比的方式...
组件的高度(默认值为 auto)。注:如果想使用百分比的方式来设置值，请查看 Ext.Component.anchor。
BoxComponent
hidden : Boolean
如果当前组件处于隐藏状态，此值为true。Read-only。
Component
hiddenId : String
如果指定了 hiddenName 也可以提供一个hiddenId，以给于隐藏域一个唯一的id...
如果指定了 hiddenName 也可以提供一个hiddenId，以给于隐藏域一个唯一的id (默认为hiddenName )。 hiddenId和下拉框的id 应该是不同的，因为没有两个DOM节点可以共用同一个id
ComboBox
hiddenName : String
如果指定，一个拥有此name的表单隐藏域将会被动态创建，用来存储表单项的 数据值(默认为底层DOM元素的name)。...
如果指定，一个拥有此name的表单隐藏域将会被动态创建，用来存储表单项的 数据值(默认为底层DOM元素的name)。 对于在提交表但时自动提交下拉框的值是必须的。 另请参见： valueField。

注意: 如果没有指定hiddenId， 隐藏域的id也将默认为此name的值。 ComboBox的 id和 hiddenId 必须是不同的， 因为不应该有两个DOM节点共用一个相同的id。 所以，如果ComboBox的 name 和 hiddenName是相同的，你必须指定一个唯一的 hiddenId 。

ComboBox
hiddenValue : String
如果指定了hiddenName 用来容纳选中的valueField， 从Store设置隐藏域的初始值。默认为配置的...
如果指定了hiddenName 用来容纳选中的valueField， 从Store设置隐藏域的初始值。默认为配置的 value 。
ComboBox
hideLabel : Boolean
true时完全隐藏label元素 ( label 和 separator)。 默认为 false。 默认情况下，即使你不指定...

true时完全隐藏label元素 ( label 和 separator)。 默认为 false。 默认情况下，即使你不指定 fieldLabel 它的空间仍然会被保留，这样这块区域会与其它确实拥有label的区域位于同一排。 讲此值设置为 true 将导致此区域不再保留此空间。

注意: 参见 clearCls 的注释。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield'
        hideLabel: true
    }]
});
Component
hideMode : String
组件如何隐藏，支持的值有： 'visibility' (css visibility), 'offsets' (位置偏移量为负值) 和...

组件如何隐藏，支持的值有： 'visibility' (css visibility), 'offsets' (位置偏移量为负值) 和 'display' (css display).

注意:一般首选默认值 'display'，因为当组件第一次显示的时候它们会自动进行布局 (隐藏的时候不会调整尺寸)。

Component
hideParent : Boolean
此值为true时，当调用hide/show方法时，将会hide和show组件的容器...
此值为true时，当调用hide/show方法时，将会hide和show组件的容器；false时将会 hide和show组件自身(默认为false)。例如，这可以用作window上隐藏按钮的一种 快捷操作，通过设置此按钮的hideParent:true，然后把它添加到window上。
Component
superceed hideTrigger : Boolean
true 将会隐藏触发元素并且仅仅显示基本文本项(默认为false)
TriggerField
html : String/Object
一个HTML片段，或者一个 DomHelper 描述，用作layout元素的内容(默认为'')。...
一个HTML片段，或者一个 DomHelper 描述，用作layout元素的内容(默认为'')。 这个HTML内容在组件渲染之后才被添加，所以在 render 出发的时候，document中尚未包含此HTML。 但是这个内容将会在所有配置的 contentEl 之前被插入到body标签中。
Component
id : String
当前组件唯一的id(默认为auto-assigned id)...

当前组件唯一的id(默认为auto-assigned id)。 如果你需要在以后访问组件，而又没有一个有效的组件对象引用，那么你需要指定一个 id( 也就是，使用Ext. getCmp方法 )。

注意，此id也将被用作组件底层HTML标签的id，这些标签被渲染到页面中。 这将允许你编写基于id的CSS规则，以独立地描述指定的实例；并且，也可以通过 组件父标签的id选中子元素。

注意:为了避免与唯一的id 产生重复， 请参见 itemId 和 ref 。

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

Component
increment : Number
列表中每个时间点之间间隔的分钟数 (默认为15)。
TimeField
inputType : String
输入栏的类型属性---例如radio,text,password,file(默认为'text')。...
输入栏的类型属性---例如radio,text,password,file(默认为'text')。 'file'和'password'类型通常必须用来渲染那些没有独立Ext组件的表单项类型。 注意，如果你使用inputType:'file'， 那么将不再支持 emptyText 并且应该避免使用。
Field
invalidClass : String
当把表单项标记为非法时所使用的CSS类(默认为'x-form-invalid')
Field
invalidText : String
当表单项中的时间非法时现实的错误文本 (默认为'{value} is not a valid time')。
TimeField
itemCls : String
注意: 只有在当前组件被渲染到一个使用FormLayout 布局的 容器中时此配置才有效...

注意: 只有在当前组件被渲染到一个使用FormLayout 布局的 容器中时此配置才有效。 (例如Ext.form.FormPanel 或者指定 layout:'form')。

一个附加的CSS类，应用到div上，包装当前field的表单元素。 如果提供了此参数， field级上的itemCls将会覆盖 container级上提供的 默认itemCls。 为itemCls指定的值将会被添加默认的 类('x-form-item')。

既然它被应用到项目的包装器上(参见 Ext.layout.FormLayout。 fieldTpl)， 它将允许你编写能应用到此field、label(如果有指定)、或者field内部任何其它元素的标准CSS规则。

注意: 参考 fieldLabel的注释。 .

示例用法:

// Apply a style to the field's label:
<style>
    .required .x-form-item-label {font-weight:bold;color:red;}
</style>

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Name',
        itemCls: 'required' //this label will be styled
    },{
        xtype: 'textfield',
        fieldLabel: 'Favorite Color'
    }]
});
Component
itemId : String
当没有可利用的对象引用时，itemId可以作为第二选择，用来获得一个组件的引用， 代替 ...

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

var c = new Ext.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'); // 与 Ext.getCmp()不同

p2 = p1.ownerCt.getComponent('p2'); // 通过兄弟对象获得引用

另请参见 id 和 ref 。

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

Component
itemSelector : String
一个简单的CSS选择器(例如div.some-class或者span:first-child) 用来决定处理下拉列表的...

一个简单的CSS选择器(例如div.some-class或者span:first-child) 用来决定处理下拉列表的 Ext.DataView 与什么节点协同工作。

注意: 如果在tpl中 指定了一个自定义的XTemplate，此设置是必须的，XTemplate为 下拉列表中的项目分配了一个不同于

'x-combo-list-item'
的CSS类
ComboBox
labelSeparator : String
每个fieldLabel 文本后面现实的分隔符。 此属性可以在多个层次上进行配置...

每个fieldLabel 文本后面现实的分隔符。 此属性可以在多个层次上进行配置。优先顺序为：

  • field / component level
  • container level
  • layout level (默认为冒号 ':')
如不需要为当前field的label显示分隔符，指定一个空字符串''即可。

注意:参见 clearCls 的注释。

另请参见 hideLabel 和 Ext.layout.FormLayout。 fieldTpl。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    layoutConfig: {
        labelSeparator: '~'   // layout config has lowest priority (defaults to ':')
    },
    labelSeparator: '>>',     // config at container level
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Field 1',
        labelSeparator: '...' // field/component level config supersedes others
    },{
        xtype: 'textfield',
        fieldLabel: 'Field 2' // labelSeparator will be '='

    }]
});
Component
labelStyle : String
一个CSS样式描述字符串，它将直接应用到当前field的label上...

一个CSS样式描述字符串，它将直接应用到当前field的label上。 如果有设置，默认为容器的labelStyle值(例如 Ext.layout.FormLayout.labelStyle , 或者 '')。

注意:参见 clearCls 的注释。

另请参见 hideLabel 和 Ext.layout.FormLayout. fieldTpl。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Name',
        labelStyle: 'font-weight:bold;'
    }]
});
Component
lazyInit : Boolean
true 将不会为当前下拉框初始化列表，直到表单项获得焦点为止(默认为true)
ComboBox
lazyRender : Boolean
true 将会阻止ComboBox被渲染，直到被请求为止 (当渲染到一个Ext.Editor (例如...
true 将会阻止ComboBox被渲染，直到被请求为止 (当渲染到一个Ext.Editor (例如 Grids) 时应该总是使用，默认为 false)。
ComboBox
listAlign : String/Array
一个有效的锚定位置值。 关于支持的锚定位置和偏移量细节参见 Ext.Element.alignTo 。 可以指定x/y偏移量...
一个有效的锚定位置值。 关于支持的锚定位置和偏移量细节参见 Ext.Element.alignTo 。 可以指定x/y偏移量，此值也可以指定为一个 Ext.Element.alignTo 方法的参数数组。

[ 'tl-bl?', [6,0] ]
(defaults to 'tl-bl?')
ComboBox
listClass : String
添加到预定义的'x-combo-list'类的CSS类， 应用到下拉列表元素上(默认为'')。
ComboBox
listEmptyText : String
如果没有找到项目时，需要在data视图中显示的空文本。 (defaults to '')
ComboBox
listWidth : Number
下拉列表的宽度 (用来作为Ext.Element.setWidth的参数) (默认为ComboBox表单项的宽度)...
下拉列表的宽度 (用来作为Ext.Element.setWidth的参数) (默认为ComboBox表单项的宽度)。另请参见 minListWidth。
ComboBox
listeners : Object
一个包含一个或多个事件处理器的配置对象，会在初始化的时候被添加到目标对象上...

一个包含一个或多个事件处理器的配置对象，会在初始化的时候被添加到目标对象上。 该配置对象应该是一个有效的监听器配置对象就像 addListener例子中指定的一样可一次附加多个处理器。

ExtJs Components上的DOM事件

一些 ExtJs Component 类导出时会选择一些DOM事件(例如 "click", "mouseover" 等等), 这通常只是在有额外的值可以被添加时发生。例如DataView类的 click事件会传递被点击的节点。也可以直接在Component的HTMLElementevent上访问DOM事件，但必需在Component被渲染后监听器才能添加到Element 上。可以按照以下步骤添加插件:

// 插件会用一个监听器配置对象进行配置。
//该组件会被添加到所有处理方法的参数列表上。
Ext.DomObserver = Ext.extend(Object, {
    constructor: function(config) {
        this.listeners = config.listeners ? config.listeners : config;
    },

    // 组件将自己传递进了插件的初始化方法里
    init: function(c) {
        var p, l = this.listeners;
        for (p in l) {
            if (Ext.isFunction(l[p])) {
                l[p] = this.createHandler(l[p], c);
            } else {
                l[p].fn = this.createHandler(l[p].fn, c);
            }
        }

        // 渲染后立即添加监听器到元素上
        c.render = c.render.createSequence(function() {
            var e = c.getEl();
            if (e) {
                e.on(l);
            }
        });
    },

    createHandler: function(fn, c) {
        return function(e) {
            fn.call(this, e, c);
        };
    }
});

var combo = new Ext.form.ComboBox({

    // 元素被点击后折叠
    plugins: [ new Ext.DomObserver({
        click: function(evt, comp) {
            comp.collapse();
        }
    })],
    store: myStore,
    typeAhead: true,
    mode: 'local',
    triggerAction: 'all'
});

Observable
loadingText : String
在加载数据时显示在下拉列表中的文本。 只有当 mode = 'remote'时才应用...
在加载数据时显示在下拉列表中的文本。 只有当 mode = 'remote'时才应用(默认为'Loading...')
ComboBox
margins : Object
注:此配置只用于该组件展现在一个使用BorderLayout...

注:此配置只用于该组件展现在一个使用BorderLayout 或 BoxLayout的两个子类之一作为布局的容器。

这个margins对象在该组件中的格式为：

{top: (top margin),right: (right margin),bottom: (bottom margin),left: (left margin)}

也可以是一个字符串，中间用空格分隔，margin值为数字。 把matches中每一个值的次序跟CSS中margin值的排列方式相对应：

  • 如果只有一个值，它适用于所有方面。
  • 如果有两个值，top和bottom的边框设置为第一个值，left和right设置为第二个值。
  • 如果有三个值，top设置为第一个值，left和right设置为第二个值，bottom设置为第三个值。
  • 如果有四个值，分别设置为top, right, bottom, left。

默认值:

{top:0, right:0, bottom:0, left:0}
BoxComponent
maskRe : RegExp
一个输入掩码正则表达式，用来过滤不匹配的按键(默认为null)
TextField
maxHeight : Number
在显示滚动条之前，下拉列表的最大高度像素值(默认为300)
ComboBox
maxLength : Number
校验时表单项允许的最大输入长度(默认为Number.MAX_VALUE)。 通过改善可用性允许粘贴、编辑、重做和回退...
校验时表单项允许的最大输入长度(默认为Number.MAX_VALUE)。 通过改善可用性允许粘贴、编辑、重做和回退， 此行为被设计用来为用户提供即时的反馈。 如需限定表单项中可以输入字符的最大长度， 可以使用autoCreate 向一个表单项添加任何你想要的属性，例如:
var myField = new Ext.form.NumberField({
    id: 'mobile',
    anchor:'90%',
    fieldLabel: 'Mobile',
    maxLength: 16, // for validation
    autoCreate: {tag: 'input', type: 'text', size: '20', autocomplete: 'off', maxlength: '10'}
});
TextField
maxLengthText : String
如果maximum length 校验失败时显示的出错文本...
如果maximum length 校验失败时显示的出错文本 (默认为 'The maximum length for this field is {maxLength}')
TextField
maxText : String
当时间大于maxValue时显示的出错文本 (默认为The time in this field must be equal to or...
当时间大于maxValue时显示的出错文本 (默认为The time in this field must be equal to or before {0}')。
TimeField
maxValue : Date/String
最大允许的时间。 可以是一个Javascript日期对象，它拥有一个有效的时间值，或者是一个格式有效的...
最大允许的时间。 可以是一个Javascript日期对象，它拥有一个有效的时间值，或者是一个格式有效的 时间字符串---参见 format and altFormats (默认为undefined)。
TimeField
minChars : Number
在自动完成和typeAhead 激活之前，用户必须输入的最少字符数...
在自动完成和typeAhead 激活之前，用户必须输入的最少字符数 (mode = 'remote'默认为4 或者如果mode = 'local' 时为0，如果editable = false ，不会应用此配置项)。
ComboBox
minHeight : Number
当列表尺寸被根据到视口边缘的距离进行约束时，下拉列表...
当列表尺寸被根据到视口边缘的距离进行约束时，下拉列表的最小高度像素值 (默认为90)
ComboBox
minLength : Number
输入栏必须的最小长度(默认为0)
TextField
minLengthText : String
如果 最小长度 校验失败时显示的出错文本 (默认为...
如果 最小长度 校验失败时显示的出错文本 (默认为 'The minimum length for this field is {minLength}') 。
TextField
minListWidth : Number
下拉列表宽度最小像素值(默认为 70，如果 listWidth 有一个更大的值，此值将会被忽略)
ComboBox
minText : String
如果单元格中的时间小于minValue时显示的出错文本 (默认为'The time in this field must be equal to or...
如果单元格中的时间小于minValue时显示的出错文本 (默认为'The time in this field must be equal to or after {0}')。
TimeField
minValue : Date/String
最小允许的时间。 可以是一个Javascript日期对象，它拥有一个有效的时间值，或者是一个格式有效的...
最小允许的时间。 可以是一个Javascript日期对象，它拥有一个有效的时间值，或者是一个格式有效的 时间字符串---参见 format and altFormats (默认为undefined)。
TimeField
mode : String
可接受的值有:...
可接受的值有:
  • 'remote' : Default

    在触发器第一次被点击时自动加载store 。如果你不希望在第一次点击触发器时自动加载store，设置此配置项为 'local'然后手动加载store。如需强制在每次点击触发器时都对store 进行重新查询，参见 lastQuery 。

  • 'local' :

    ComboBox加载本地数据

    var combo = new Ext.form.ComboBox({
    renderTo: document.body,
    mode: 'local',
    store: new Ext.data.ArrayStore({
        id: 0,
        fields: [
            'myId',  // numeric value is the key
            'displayText'
        ],
        data: [[1, 'item1'], [2, 'item2']]  // data is local
    }),
    valueField: 'myId',
    displayField: 'displayText',
    triggerAction: 'all'
});
ComboBox
msgFx : String
实验性参数 当在表单项下显示校验消息时使用的效果(默认为'normal')。
Field
msgTarget : String
通过markInvalid 设置的消息文本应该显示的位置。 必须是如下值之一：...

通过markInvalid 设置的消息文本应该显示的位置。 必须是如下值之一：

  • qtip 当用户鼠标滑过表单项时，显示一个包含消息的快速提示。 这是默认情况。
    为了使此参数能工作，必须调用 Ext.QuickTips.init。
  • title 在弹出的默认浏览器标题属性上显示消息。
  • under 在表单项之下添加一块div，包含出错消息。
  • side 在表单项右边添加一个出错图标，当鼠标滑过时弹出并显示一个消息。
  • [element id] 在指定元素的innerHTML中直接添加出错消息。
Field
name : String
表单项的HTML name属性(默认为'')。 注意: 如果需要当前表单项自动被包含在...
表单项的HTML name属性(默认为'')。 注意: 如果需要当前表单项自动被包含在 form submit()中，必须设置此参数。
Field
overCls : String
一个可选的额外的CSS类，它将在鼠标移过元素时被添加到组件上...
一个可选的额外的CSS类，它将在鼠标移过元素时被添加到组件上，鼠标移出时 删除。(默认为'')。此属性对于在组件上，或者它的任何使用标准CSS规则的孩子节点上， 添加定制的'active' 或者 'hover'样式非常有用。
Component
pageSize : Number
如果大于0，将会在下拉列表底部显示一个Ext.PagingToolbar， 并且过滤查询 将会包含页面的start和...
如果大于0，将会在下拉列表底部显示一个Ext.PagingToolbar， 并且过滤查询 将会包含页面的start和limit 参数一起执行。 只有当 mode = 'remote'时应用(默认为0)。
ComboBox
pageX : Number
如果该组件被包含在一个指定位置的容器中，这个值表示页面级的x坐标值（译者注：在有滚动条的情况下这个值很有用）。
BoxComponent
pageY : Number
如果该组件被包含在一个指定位置的容器中，这个值表示页面级的y坐标值（译者注：在有滚动条的情况下这个值很有用）。
BoxComponent
plugins : Object/Array
一个对象或者一个对象数组，为组件提供特殊的功能 ...
一个对象或者一个对象数组，为组件提供特殊的功能。 对一个合法的插件唯一的要求是它含有一个init()方法， 能接收一个Ext.Component型的参数。 当组件被创建时，如果有可用的插件，组件将会调用每个插件的init方法， 并将自身的引用作为方法参数传递给它。然后，每个插件就可以调用方法或者响应组件上的事件， 就像需要的那样提供自己的功能。
Component
preventMark : Boolean
true将会禁止 把表单项标记为非法。默认为false.
Field
ptype : String
需要创建配置的ptype。 当传递一个配置对象给构造函数时...
需要创建配置的ptype。 当传递一个配置对象给构造函数时，此配置选项不会被使用。 只有在使用懒初始化的时候此配置项才会被使用， 此时Plugin不是 通过一个完整的实例组件，而是通过一个Component配置指定的。 在渲染时，将会查找ptype以决定创建何种类型的Plugin。

如果你创建自己的Plugin，你可以通过 Ext.ComponentMgr.registerPlugin 对它们进行注册，以便能利用懒初始化和渲染机制。
Component
queryDelay : Number
在开始输入和发出查询过滤下拉列表之间需要延迟的毫秒数 (如果mode = 'remote'，默认为...
在开始输入和发出查询过滤下拉列表之间需要延迟的毫秒数 (如果mode = 'remote'，默认为 500，如果 mode = 'local' 为10 )
ComboBox
queryParam : String
查询的名称(store的baseParam 名称)它将被在查询字符串中被传递 (默认为'query')
ComboBox
readOnly : Boolean
将会把表单项标记为在HTML中只读(readOnly)(默认为false)...
true 将会把表单项标记为在HTML中只读(readOnly)(默认为false)。

Note: 这仅仅设置元素的readOnly DOM参数。 例如，设置 readOnly=true ，将不会禁用触发ComboBox或者DateField； 这为你提供了一个选项，可以强制用户通过触发按钮选择一个值，而不是 在文本框进行输入。 使用 hideTrigger 可以隐藏触发按钮。

TriggerField
ref : String
一个路径描述，与组件的 ownerCt 相关，它描述了把当前组件的命名引用放置到哪个父容器中去。...

一个路径描述，与组件的 ownerCt 相关，它描述了把当前组件的命名引用放置到哪个父容器中去。

祖先的坐标路径可以通过'/'字符进行分隔。 例如，将一个Toolbar Button的引用放入 拥有此Toolbar的Panel中:

var myGrid = new Ext.grid.EditorGridPanel({
    title: 'My EditorGridPanel',
    store: myStore,
    colModel: myColModel,
    tbar: [{
        text: 'Save',
        handler: saveChanges,
        disabled: true,
        ref: '../saveButton'
    }],
    listeners: {
        afteredit: function() {
//          The button reference is in the GridPanel
            myGrid.saveButton.enable();
        }
    }
});

在上面的代码中，如果 ref 是 'saveButton' ，那么引用将会被放置到Toolbar中。 ref 中的每个'/' 都会从组件的 ownerCt 向上移动一级。

另请参见 added 和 removed 事件。

Component
regex : RegExp
在校验时，需要在表单项值纸上进行测试的JavaScript RegExp对象(默认为 null)。 如果测试失败，表单项将会使用...
在校验时，需要在表单项值纸上进行测试的JavaScript RegExp对象(默认为 null)。 如果测试失败，表单项将会使用 regexText 进行标记。
TextField
regexText : String
当使用regex 并且校验测试失败时显示的出错文本(默认为'')
TextField
region : String
注: 此配置只用于该组件展现在一个布局为BorderLayout的容器中...

注: 此配置只用于该组件展现在一个布局为BorderLayout的容器中(例如指定layout:'border')。

详见Ext.layout.BorderLayout。

BoxComponent
renderTo : Mixed
该值可以是一个节点的id、一个DOM节点或者一个已存在的元素...

该值可以是一个节点的id、一个DOM节点或者一个已存在的元素， 组件将会被渲染到其中。

  • 注意 :
      如果组件不是一个Container 的子项目时， 不要使用此选项。 渲染和管理它的子项目是一个Container 的layout manager的责任。
      当使用此配置项时，无需调用render()方法。

另请参见 render 。

Component
resizable : Boolean
true将会在下拉列表底部添加一个调整尺寸的手柄(创建一个 Ext.Resizable 拥有...
true将会在下拉列表底部添加一个调整尺寸的手柄(创建一个 Ext.Resizable 拥有'se' pinned的手柄)。 默认为false。
ComboBox
selectOnFocus : Boolean
true当表单项获得输入焦点时，将会自动选中所有存在的表单项文本 (默认为false)
ComboBox
selectedClass : String
应用到下拉列表中选中项目的CSS类 (默认为'x-combo-selected')
ComboBox
shadow : Boolean/String
默认效果为true或者 "sides"， "frame"为四个方向的阴影， "drop"为右下阴影
ComboBox
stateEvents : Array
一个事件数组，当它们被触发时，组件需要保存自己的状态(默认值为 none)...

一个事件数组，当它们被触发时，组件需要保存自己的状态(默认值为 none)。 它们可以是任何该组件支持的事件类型，包括浏览器事件和 自定义事件(例如['click', 'customerchange'])。

对于保存和恢复组件状态的详细解释，参见 stateful

Component
stateId : String
为该组件指定的唯一的id值，它被用作管理组件状态的目的...
为该组件指定的唯一的id值，它被用作管理组件状态的目的。 (如果设定了id，默认值为组件自己的id，否则，如果组件使用自动生成的id，此值为null)。

对于保存和反解析组件状态的解释，参见 stateful 。

Component
stateful : Boolean
一个标志参数，它将引起组件在启动时尝试从一个保存的状态中恢复内部状态参数...

一个标志参数，它将引起组件在启动时尝试从一个保存的状态中恢复内部状态参数。 组件必须要么拥有一个 stateId 或者 id ，它们被分配给需要被管理的状态属性。 在跨页面加载时，不保证自动生成的id属性的稳定性， 并且，不能依赖此id来保存和恢复一个组件的相同状态。

为了保存状态的操作能够工作，状态管理器的提供者必须 被设置成一个Ext.state.Provider 的实现类，它覆盖了set 和get 方法，以便保存和恢复name/value对。 有一个内置的Ext.state.CookieProvider 可用。

为当前页面设置状态提供者:

Ext.state.Manager.setProvider(new Ext.state.CookieProvider({
    expires: new Date(new Date().getTime()+(1000*60*60*24*7)), //7 days from now
}));

当 stateEvents 配置项中其中之一的事件被触发时， 一个状态可保存的组件将试图保存其状态。

保存状态时，一个可保存状态的组件首先需要通过调用 getState 方法来序列化它的状态。 默认情况下，此函数什么事都不做。 开发者必须提供一个实现，返回一个hash对象，它描述了组件可恢复的状态。

getState方法产生的值将会传递给 Ext.state.Manager.set 方法，它使用配置的 Ext.state.Provider 来保存对象，以组件的 stateId 为key，或者，如果此值（指stateId）没有指定时， 使用它的 id 作为key。

在进行构造时，一个可保存状态的组件试图通过调用 Ext.state.Manager.get方法来 恢复它的状态，传递 stateId 或者，如果此值（指stateId）没有指定时， 使用它的 id 作为参数。

结果对象被传递给 applyState 。 applyState 的默认实现只是简单地把属性拷贝到对象中， 但是开发者可以覆盖此方法以支持更多行为。

通过向 beforestaterestore, staterestore, beforestatesave 和 statesave 事件上绑定监听器，你可以在保存和恢复状态时进行额外的处理。

Component
store : Ext.data.Store/Array
当前combo所绑定的数据源(默认为undefined)。 此属性可接受的值有:...
当前combo所绑定的数据源(默认为undefined)。 此属性可接受的值有:
  • 所有Store的子类
  • 一个数组 : 数组将会在内部被转换成一个 Ext.data.ArrayStore ，自动生成 表单项名称以便 与所有数据组件协同工作。
    • 一维数组 : (例如 ['Foo','Bar'])
      一维数组将会自动被展开( 数组中的每个元素都将被 valueField 和displayField 使用)
    • 二维数组 : (例如 [['f','Foo'],['b','Bar']])
      对于多维数组，每个项目中索引为0的值将会被假定为combo的 valueField， 索引为1的值被假定为combo的 displayField。

另请参见 mode 。

ComboBox
stripCharsRe : RegExp
一个JavaScript RegExp对象，用来在校验之前从值中剥离不想要的内容(默认为 null)。
TextField
style : String
被添加到组件元素的特定样式。 必须是按照...
被添加到组件元素的特定样式。 必须是按照 Ext.Element.applyStyles 类指定格式的合法参数值。

new Ext.Panel({
    title: 'Some Title',
    renderTo: Ext.getBody(),
    width: 400, height: 300,
    layout: 'form',
    items: [{
        xtype: 'textarea',
        style: {
            width: '95%',
            marginBottom: '10px'
        }
    },
        new Ext.Button({
            text: 'Send',
            minWidth: '100',
            style: {
                marginBottom: '10px'
            }
        })
    ]
});
Component
submitValue : Boolean
False将会清除表单项的name属性，这样在提交表单时它将不会被提交。 默认为true。
ComboBox
tabIndex : Number
该表单项的tabIndex。 注意，此属性仅仅应用到被渲染好的，而不是那些通过applyTo...
该表单项的tabIndex。 注意，此属性仅仅应用到被渲染好的，而不是那些通过applyTo创建的表单项 (默认为undefined)。
Field
tabTip : String
注: 这个配置只用于当该组件作为TabPanel的一个子项目时使用...

注: 这个配置只用于当该组件作为TabPanel的一个子项目时使用。

一个String类型的innerHTML(支持html标签)，当鼠标放在该选项上的时，显示一个tooltip。为了tips能够被渲染，Ext.QuickTips.init()必须被提前调用。
BoxComponent
title : String
如果提供，将会创建一个包含此文本的header元素， 并且添加到下拉列表的顶部...
如果提供，将会创建一个包含此文本的header元素， 并且添加到下拉列表的顶部(默认为undefined，没有header元素)
ComboBox
tpl : Mixed
一个 Ext.Template , Ext.XTemplate 或者一个用来形成一个Ext.XTemplate的字符串数组...
一个 Ext.Template , Ext.XTemplate 或者一个用来形成一个Ext.XTemplate的字符串数组。 与 data 和 tplWriteMode 配置项协同使用。
ComboBox
tplWriteMode : String
刷新组件的内容区域时使用的Ext.(X)Template方式。 默认为'overwrite' (参见 Ext.XTemplate.overwrite )。
刷新组件的内容区域时使用的Ext.(X)Template方式。 默认为'overwrite' (参见 Ext.XTemplate.overwrite )。
Component
transform : Mixed
id、DOM节点或者一个已经存在的HTML SELECT元素，用来转化为...
id、DOM节点或者一个已经存在的HTML SELECT元素，用来转化为 一个ComboBox。注意，如果你指定了此选项并且 combo将会使用在Ext.form.BasicForm或者 Ext.form.FormPanel中， 你必须同时设置 lazyRender = true。
ComboBox
triggerAction : String
当触发器被点击时需要执行的操作。...
当触发器被点击时需要执行的操作。
  • 'query' : Default

    使用原始值 执行查询。

  • 'all' :

    使用allQuery 指定的配置项 进行查询。

另请参见 queryParam 。

ComboBox
triggerClass : String
用来设置触发按钮的传统CSS类。 默认情况下，触发器总是获得'x-form-trigger' 类...
用来设置触发按钮的传统CSS类。 默认情况下，触发器总是获得'x-form-trigger' 类 并且如果指定，triggerClass将会被appended。
ComboBox
triggerConfig : Mixed
一个DomHelper 配置对象，指定了当前表单项触发元素的结构。(可选)...

一个DomHelper 配置对象，指定了当前表单项触发元素的结构。(可选)。

当你需要为TriggerField指定作为触发按钮的元素，可以配置此选项。

注意，当使用此配置项时，保证触发器能正确调整尺寸、定位和显示将是开发者的责任。默认为:

                                {tag: "img", src: Ext.BLANK_IMAGE_URL, cls: "x-form-trigger " + this.triggerClass}
TriggerField
typeAhead : Boolean
设置为true，当开始输入字符时，在指定的延迟之后会自动匹配剩下的内容， 如果找到了匹配的 内容则自动选中它...
设置为true，当开始输入字符时，在指定的延迟之后会自动匹配剩下的内容， 如果找到了匹配的 内容则自动选中它 (typeAheadDelay ) (默认值为 false)
ComboBox
typeAheadDelay : Number
如果typeAhead = true 时，在键入的文本被显示之前所要等待的毫秒数...
如果typeAhead = true 时，在键入的文本被显示之前所要等待的毫秒数(默认为250)
ComboBox
validateOnBlur : Boolean
在表单项失去焦点时是否进行校验(默认为 true)。
Field
validationDelay : Number
在用户开始输入到校验操作开始之间的时长毫秒数 (默认为250)
Field
validationEvent : String/Boolean
引发表单项进行校验操作的事件。 设置为false可以禁用自动校验 (默认为'keyup')。
引发表单项进行校验操作的事件。 设置为false可以禁用自动校验 (默认为'keyup')。
Field
validator : Function
一个自定义的校验方法，在校验表单项时调用( validateValue) (默认为...

一个自定义的校验方法，在校验表单项时调用( validateValue) (默认为 null)。 如果指定，此函数会被第一个调用，允许开发者覆盖默认的校验过程。

此方法会被传入以下参数:

  • value : Mixed
    表单项的当前值

此方法将会返回:

  • true : Boolean
    true 如果值合法
  • msg : String
    如果值是非法时的出错信息
TextField
value : Mixed
当前表单项的初始化值(默认为undefined).
Field
valueField : String
需要绑定到当前ComboBox的底层 数据值名称 (如果...
需要绑定到当前ComboBox的底层 数据值名称 (如果mode = 'remote' 默认为undefined，如果 转换一个选中项目 或者 根据store的配置项自动生成field name 时为'field2' )。

注意: 为了能映射一个值，使用valueField需要用户做出选择。 另请参见 hiddenName , hiddenValue ,和 displayField 。

ComboBox
valueNotFoundText : String
当使用一个name/value下拉选择框时，如果在store中没有找到传递给setValue方法 的值...
当使用一个name/value下拉选择框时，如果在store中没有找到传递给setValue方法 的值，如果有定义，valueNotFoundText将会被作为表单项文本被显示 (默认为undefined)。如果此默认文本被使用，则意味着没有设置任何值并且 当前表单项上不会发生任何校验操作。
ComboBox
vtype : String
一个校验类型名，在Ext.form.VTypes 中定义(默认为null)
TextField
vtypeText : String
一个自定义的出错消息，用来替代为当前表单项所设置的...
一个自定义的出错消息，用来替代为当前表单项所设置的 vtype 所提供的默认消息(默认为'')。 注意: 只有设置了 vtype 时才应用此项，否则忽略。
TextField
width : Number
组件的宽度(默认值为 auto)。注:如果想使用百分比的方式...
组件的宽度(默认值为 auto)。注:如果想使用百分比的方式来设置值，请查看 Ext.Component.anchor。
BoxComponent
wrapFocusClass : String
天骄到触发元素包装器上的(CSS)类， 默认为x-trigger-wrap-focus。
TriggerField
x : Number
如果被包含在一个指定位置的容器中，这个值表示x(left)坐标值。
BoxComponent
xtype : String
需要创建配置的xtype。 当传递一个配置对象给构造函数时...
需要创建配置的xtype。 当传递一个配置对象给构造函数时，此配置选项不会被使用。 只有在使用懒初始化的时候此配置项才会被使用，此时容器的子项目不是 通过一个完整的实例组件，而是通过一个Component配置指定的。 在渲染时，将会查找xtype以决定创建何种类型的子组件。

预定义的xtype列表如下： here。

如果你继承Component创建你自己的组件，你需要使用Ext.ComponentMgr.registerType 对它们进行注册，以便利用懒初始化和渲染机制。
Component
y : Number
如果被包含在一个指定位置的容器中，这个值表示y(top)坐标值。
BoxComponent

公共属性

Property Defined By
disabled : Boolean
当前组件处于无效状态时为true。 Read-only.
Component
el : Ext.Element
封装了当前组件的Ext.Element。 Read-only。通常情况下，这将是一个<DIV>元素，它由此类的...

封装了当前组件的Ext.Element。 Read-only。

通常情况下，这将是一个<DIV>元素，它由此类的 onRender方法创建，但是它可以通过使用 autoEl 配置项进行覆盖。

注意: 直到组件渲染完成此元素都将处于无效状态。

如需向当前组件的 DOM事件(而不是当前组件自己的Observable事件)添加监听器， 更多建议，参见 listeners 配置项，或者直接使用一个render监听器:

new Ext.Panel({
    title: 'The Clickable Panel',
    listeners: {
        render: function(p) {
            // Append the Panel to the click handler's argument list.
            p.getEl().on('click', handlePanelClick.createDelegate(null, [p], true));
        },
        single: true  // Remove the listener after first invocation
    }
});

另请参见 getEl

Component
hidden : Boolean
如果当前组件处于隐藏状态，此值为true。Read-only。
Component
initialConfig : Object
当前组件的初始化配置描述。 Read-only。
Component
label : Ext.Element
关联到当前表单项的label元素。 只有在当前表单项已经被一个Ext.layout.FormLayout ...

关联到当前表单项的label元素。 只有在当前表单项已经被一个Ext.layout.FormLayout 布局管理器渲染之后才可用。

Field
lastQuery : String
用来过滤store的匹配字符串值。 删除此参数以强制执行一次重新查询。示例用法...
用来过滤store的匹配字符串值。 删除此参数以强制执行一次重新查询。示例用法:
var combo = new Ext.form.ComboBox({
    ...
    mode: 'remote',
    ...
    listeners: {
        // delete the previous query in the beforequery event or set
        // combo.lastQuery = null (this will reload the store the next time it expands)
        beforequery: function(qe){
            delete qe.combo.lastQuery;
        }
    }
});
为了确定在ComboBox的触发按钮第一次被使用时 store中的filter没有被清除，可以使用lastQuery='' 来配置combo。示例用法:
var combo = new Ext.form.ComboBox({
    ...
    mode: 'local',
    triggerAction: 'all',
    lastQuery: ''
});
ComboBox
originalValue : mixed
表单项原来的值，它是在value 中配置的；或者，如果 trackResetOnLoad 设置为...
表单项原来的值，它是在value 中配置的；或者，如果 trackResetOnLoad 设置为 true 时，通过表单加载操作最后一次加载的。
Field
ownerCt : Ext.Container
组件所属的Container (默认为undefined，当前组件被添加到一个容器中时此值被自动设置)...
组件所属的Container (默认为undefined，当前组件被添加到一个容器中时此值被自动设置)。 Read-only。

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

Component
refOwner : Ext.Container
如果当前组件是一个容器的孩子，并且是通过一个 ref 配置项被注册的，则此值为 ref 引用被插入到的祖先容器。
如果当前组件是一个容器的孩子，并且是通过一个 ref 配置项被注册的，则此值为 ref 引用被插入到的祖先容器。
Component
rendered : Boolean
如果当前组件已经被渲染了，此值为true。Read-only.
Component
startValue : mixed
表单项最后一次获得焦点时所拥有的值。 这就是传递给change 事件的值...

表单项最后一次获得焦点时所拥有的值。 这就是传递给change 事件的值，此事件在值被改变并失去焦点时触发。

直到表单项被访问之前此值都是undefined 与originalValue 进行比较。

Field
view : Ext.DataView
用来显示ComboBox中选项的 DataView。
ComboBox

公共方法

Method Defined By
TimeField ( Object config )
创建一个新的TimeField
创建一个新的TimeField
参数:
  • config : Object
返回值:
  • void
TimeField
addClass ( string cls ) : Ext.Component
为组件底层的元素添加CSS样式。
为组件底层的元素添加CSS样式。
参数:
  • cls : string
    需要添加的CSS样式的class名称
返回值:
  • Ext.Component
    this
Component
addEvents( Object|String o, string Optional. ) : void
添加指定的事件到事件列表上，事件会被该Observable触发。
添加指定的事件到事件列表上，事件会被该Observable触发。
参数:
  • o : Object|String
    以事件名作为属性true作为值的对象 或者当多个事件名被分开的传递时则为第一个事件名。
  • Optional. : string
    事件名被分开的传递时则为事件名。 用法:
    this.addEvents('storeloaded', 'storecleared');
返回值:
  • void
Observable
addListener( String eventName, Function handler, [Object scope], [Object options] ) : void
给对象添加事件处理器。
给对象添加事件处理器。
参数:
  • eventName : String
    监听的事件名。
  • handler : Function
    事件调用的方法
  • scope : Object
    （可选）处理方法执行的作用域 (this的引用 reference)。 如果被忽略。默认为触发事件的对象。
  • options : Object
    （可选）包含处理器配置和属性的对象。 可能包含以下的属性:
    • scope : Object
      处理方法执行的作用域(this的引用) 。 如果被忽略。默认为触发事件的对象。
    • delay : Number
      在触发事件后延迟调用处理器的毫秒数。
    • single : Boolean
      如果为True则添加一个处理器来处理下一次的事件触发（仅一次），然后移除自己。
    • buffer : Number
      使得处理器延迟指定毫秒数后预定的运行在 一个Ext.util.DelayedTask中 。 如果事件在时间内再一次被触发，原始的处理器不会被调用，但是新的处理器会预定的在他的位置上。
    • target : Observable
      如果事件在目标的Observable上触发则仅仅调用处理器， 否则 事件会从子类的Observable上冒泡

    组合选项
    使用这些选项参数,可能会组合出不同类型的监听器：

    一个延迟的，一次性的监听器。

    myDataView.on('click', this.onClick, this, {
single: true,
delay: 100
});

    一次调用附加多个处理器
    该方法同样支持传递一个包含指定的多个处理器的属性的配置对象参数。

    myGridPanel.on({
'click' : {
    fn: this.onClick,
    scope: this,
    delay: 100
},
'mouseover' : {
    fn: this.onMouseOver,
    scope: this
},
'mouseout' : {
    fn: this.onMouseOut,
    scope: this
}
});

    或者一个简写的语法：

    myGridPanel.on({
'click' : this.onClick,
'mouseover' : this.onMouseOver,
'mouseout' : this.onMouseOut,
 scope: this
});
返回值:
  • void
Observable
applyToMarkup ( String/HTMLElement el ) : void
将此组件添加到已存在的有效的HTML标签中。 使用该方法时，无需再调用render()方法。
将此组件添加到已存在的有效的HTML标签中。 使用该方法时，无需再调用render()方法。
参数:
  • el : String/HTMLElement
返回值:
  • void
Component
clearInvalid () : void
清除当前表单项上的所有非法styles/messages(样式/消息)
清除当前表单项上的所有非法styles/messages(样式/消息)
参数:
  • 无。
返回值:
  • void
Field
clearValue () : void
清除表单项中当前所有的text/value
清除表单项中当前所有的text/value
参数:
  • 无。
返回值:
  • void
ComboBox
cloneConfig ( Object overrides ) : Ext.Component
默认使用原先传递给当前实例的配置值克隆当前组件。
默认使用原先传递给当前实例的配置值克隆当前组件。
参数:
  • overrides : Object
    一个新的配置项，包含需要覆盖到克隆版本的所有属性。 可以传递一个id参数给此对象，否则将自动生成一个新的id以避免发生重复。
返回值:
  • Ext.Component
    当前组件的克隆副本
Component
collapse () : void
隐藏下拉列表，如果它当前被展开。 完成之后触发collapse 事件。
隐藏下拉列表，如果它当前被展开。 完成之后触发collapse 事件。
参数:
  • 无。
返回值:
  • void
ComboBox
destroy () : void
通过如下方法销毁对象：删除所有的事件监听器、将组件的元素从DOM树中删除...
通过如下方法销毁对象：删除所有的事件监听器、将组件的元素从DOM树中删除（如果可以）、 将组件从它的 Ext.Container（如果可用）中删除、 并且将它从Ext.ComponentMgr中 注销。 销毁操作一般由框架自动完成，一般情况下不需要直接调用该方法。
参数:
  • 无。
返回值:
  • void
Component
disable () : Ext.Component
将组件置为无效状态，并出发'disable'事件。
将组件置为无效状态，并出发'disable'事件。
参数:
  • 无。
返回值:
  • Ext.Component
    this
Component
doQuery ( String query , Boolean forceAll ) : void
执行一次查询来过滤下拉列表。 在执行查询之前触发beforequery 事件...
执行一次查询来过滤下拉列表。 在执行查询之前触发beforequery 事件，如果需要，允许取消查询操作。
参数:
  • query : String
    需要执行的SQL查询
  • forceAll : Boolean
    true 强制执行查询，即使表单项中当前字符的个数比minChars 配置项中指定的最小个数还要少。这也将清除之前存储在当前store中的所有filter (默认为false)
返回值:
  • void
ComboBox
enable () : Ext.Component
将组件置为有效状态并触发'enable'事件。
将组件置为有效状态并触发'enable'事件。
参数:
  • 无。
返回值:
  • Ext.Component
    this
Component
enableBubble( String/Array events ) :void
是否现在使得事件会被该Observable触发并调用 this.getBubbleTarget()方法在拥有者的继承树...

是否现在使得事件会被该Observable触发并调用 this.getBubbleTarget()方法在拥有者的继承树中冒泡。Observable的基础类中没有该方法的实现。

该方法一般被Ext.Components用来冒泡事件到拥有者的容器。参看Ext.Component.getBubbleTarget默认的实现 在Ext.Component中返回组件的直接拥有者。但是如果需要的是一个已知的目标，该方法可以被重写来更快的访问需求的目标。

例子:

Ext.override(Ext.form.Field, {
    // 添加方法到Field的initComponent上改变事件为冒泡
    initComponent : Ext.form.Field.prototype.initComponent.createSequence(function() {
        this.enableBubble('change');
    }),

    // 我们知道我们想让Field的事件冒泡到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() {
            // 如果样式被修改标题会变红。
            myForm.header.setStyle('color', 'red');
        }
    }
});
参数:
  • events : String/Array
    冒泡的事件名，或事件名数组
返回值:
  • void
Observable
expand () : void
展开下拉列表，如果它当前处于隐藏状态。 完成后触发expand 事件。
展开下拉列表，如果它当前处于隐藏状态。 完成后触发expand 事件。
参数:
  • 无。
返回值:
  • void
ComboBox
findParentBy ( Function fn ) : Ext.Container
通过自定义的函数查找当前组件上层任何层次上的容器...
通过自定义的函数查找当前组件上层任何层次上的容器。 如果传递的函数返回true，容器对象将被返回。
参数:
  • fn : Function
    自定义的函数，使用如下参数调用(container,this component)。
返回值:
  • Ext.Container
    自定义函数返回true的第一个容器
Component
findParentByType ( String/Class xtype ) : Ext.Container
通过xtype或者class查找当前组件上层任何层次上的容器
通过xtype或者class查找当前组件上层任何层次上的容器
参数:
  • xtype : String/Class
    组件的xtype字符串，或者直接是组件的class
返回值:
  • Ext.Container
    符合指定xtype或者class的第一个容器
Component
fireEvent( String eventName, Object... args ) : Boolean
用传入的参数触发指定的事件 (减去事件名)。 一个事件可以被设置为冒泡 Obse...

用传入的参数触发指定的事件 (减去事件名)。

一个事件可以被设置为冒泡到Observable父类继承树(参看 Ext.Component.getBubbleTarget) 调用enableBubble实现。

参数:
  • eventName : String
    触发的事件名。
  • args : Object...
    传递给处理器的可变长度参数。
返回值:
  • Boolean
    如果有任何的处理器返回false则返回false，否则返回true。
Observable
focus ( [ Boolean selectText ], [ Boolean/Number delay ] ) : Ext.Component
尝试将当前组件设为焦点。
尝试将当前组件设为焦点。
参数:
  • selectText : Boolean
    (可选) 如果可用，同时选中组件内部的文本
  • delay : Boolean/Number
    (可选)将当前组件设置为焦点的延迟时间(设置为true等于0毫秒)
返回值:
  • Ext.Component
    this
Component
getActiveError () : String
获取当前表单项活动的出错消息。
获取当前表单项活动的出错消息。
参数:
  • 无。
返回值:
  • String
    返回表单项上活动的出错消息，如果没有错误，返回一个空字符串。
Field
getBox ( [ Boolean local ] ) : Object
获取组件底层元素当前盒子模型的尺寸。（译者注：盒子模型是CSS术语，详细解释请自行搜索。）
获取组件底层元素当前盒子模型的尺寸。（译者注：盒子模型是CSS术语，详细解释请自行搜索。）
参数:
  • local : Boolean
    (可选)值为true时，组件的left值和top值将代替页面的XY被返回。(默认值为false)
返回值:
  • Object
    返回值的格式{x, y, width, height}
BoxComponent
getBubbleTarget () : Ext.Container
为Observable的fireEvent方法提供链接，它沿着继承结构进行冒泡操作。
为Observable的fireEvent方法提供链接，它沿着继承结构进行冒泡操作。
参数:
  • 无。
返回值:
  • Ext.Container
    拥有当前组件的容器。
Component
getEl () : Ext.Element
返回 Ext.Element ，它包装了当前组件。...

返回 Ext.Element ，它包装了当前组件。

通常情况下，这将是一个<DIV>元素，它是由该类的onRender方法创建的， 但是可以使用autoEl配置项 覆盖它。

注意: 此元素将会一直处于无效状态直到当前组件渲染完成。

如需向当前组件的 DOM事件(而不是当前组件自己的Observable事件)添加监听器， 更多建议，参见 listeners 配置项，或者直接使用一个render监听器:

new Ext.Panel({
    title: 'The Clickable Panel',
    listeners: {
        render: function(p) {
            // Append the Panel to the click handler's argument list.
            p.getEl().on('click', handlePanelClick.createDelegate(null, [p], true));
        },
        single: true  // Remove the listener after first invocation
    }
});
参数:
  • 无。
返回值:
  • Ext.Element
    包装当前组件的元素。
Component
getErrors () : Array
运行当前表单项的校验器并返回一个所有校验错误信息数组。 此方法在校验期间在内部调用并且一般情况下...
运行当前表单项的校验器并返回一个所有校验错误信息数组。 此方法在校验期间在内部调用并且一般情况下不需要手工调用。 每个子类都应该重写或者增加返回值以提供它们自己的出错消息
参数:
  • 无。
返回值:
  • Array
    当前表单项的所有出错消息
TextField
getHeight () : Number
获取该组件的当前高度值。
获取该组件的当前高度值。
参数:
  • 无。
返回值:
  • Number
BoxComponent
getId () : String
返回当前组件的id，如果没有定义id，则自动生成并返回一个id:'ext-comp-'...
返回当前组件的 id 如果没有定义 id 则自动生成并返回一个 id

'ext-comp-' + (++Ext.Component.AUTO_ID)
参数:
  • 无。
返回值:
  • String
    id
Component
getItemId () : String
返回当前组件的 itemId 。 如果没有通过配置参数指定 itemId 那么，将会使用...
返回当前组件的 itemId 。 如果没有通过配置参数指定 itemId 那么，将会使用 getId 返回 id 。
参数:
  • 无。
返回值:
  • String
Component
getListParent () : void
返回用来容纳ComboBox弹出列表的元素。 默认为document body。...

返回用来容纳ComboBox弹出列表的元素。 默认为document body。

如果浮动的列表需要被渲染到一个不同的元素中，可以提供一个自定义的实现作为 配置选项。一个例子可能是把列表渲染到一个Menu内部，这样在点击列表时不会 隐藏Menu:
var store = new Ext.data.ArrayStore({
    autoDestroy: true,
    fields: ['initials', 'fullname'],
    data : [
        ['FF', 'Fred Flintstone'],
        ['BR', 'Barney Rubble']
    ]
});

var combo = new Ext.form.ComboBox({
    store: store,
    displayField: 'fullname',
    emptyText: 'Select a name...',
    forceSelection: true,
    getListParent: function() {
        return this.el.up('.x-menu');
    },
    iconCls: 'no-icon', //use iconCls if placing within menu to shift to right side of menu
    mode: 'local',
    selectOnFocus: true,
    triggerAction: 'all',
    typeAhead: true,
    width: 135
});

var menu = new Ext.menu.Menu({
    id: 'mainMenu',
    items: [
        combo // A Field in a Menu
    ]
});
参数:
  • 无。
返回值:
  • void
ComboBox
getName () : String
如果可用，返回表单项的 name 或者 hiddenName 属性。
如果可用，返回表单项的 name 或者 hiddenName 属性。
参数:
  • 无。
返回值:
  • String
    name 表单项的{@link Ext.form.Field#name name}或者{@link Ext.form.ComboBox#hiddenName hiddenName}
Field
getOuterSize () : Object
获取当前组件所在元素的尺寸大小，包括边缘的空白处。
获取当前组件所在元素的尺寸大小，包括边缘的空白处。
参数:
  • 无。
返回值:
  • Object
    一个包含元素大小的对象 {width: (element width + left/right margins), height: (element height + top/bottom margins)}
BoxComponent
getPosition ( [ Boolean local ] ) : Array
获取组件底层元素当前的XY位置。
获取组件底层元素当前的XY位置。
参数:
  • local : Boolean
    (可选)如果为true，将返回元素的left和top值，而不是相对于页面内的 XY。(默认值为 false)
返回值:
  • Array
    元素的XY位置值(例如：[100, 200])
BoxComponent
getRawValue () : Mixed
返回原始数据值，可能不是一个合法的、已定义的值。 返回格式化的值参见...
返回原始数据值，可能不是一个合法的、已定义的值。 返回格式化的值参见 getValue。
参数:
  • 无。
返回值:
  • Mixed
    value 表单项的值
Field
getResizeEl () : Ext.Element
返回该组件的最外层用来定义这些组件整体大小的Element...

返回该组件的最外层用来定义这些组件整体大小的Element对象。

通常用 getEl 方法将会返回相同的Element对象，但在有些情况下，组件可能有一些更多的封装了它的主要动态Element对象的Element对象。

例如ComboBox。它是封装在一个包含<input>元素的包装元素里(这将返回其 getEl方法和触发按钮的元素)。返回的元素为resizeEl。

参数:
  • 无。
返回值:
  • Ext.Element
    The Element which is to be resized by size managing layouts.
BoxComponent
getSize () : Object
获取组件底层元素当前的大小。
获取组件底层元素当前的大小。
参数:
  • 无。
返回值:
  • Object
    一个包含元素大小的对象{width: (element width), height: (element height)}
BoxComponent
getStore () : Ext.data.Store
返回绑定到当前下拉框的store
返回绑定到当前下拉框的store
参数:
  • 无。
返回值:
  • Ext.data.Store
    store
ComboBox
getValue () : Mixed
返回格式化的数据值(undefined或者emptyText将会以''返回)。 如需返回原始值，参见...
返回格式化的数据值(undefined或者emptyText将会以''返回)。 如需返回原始值，参见 getRawValue。
参数:
  • 无。
返回值:
  • Mixed
    value 表单项的值
ComboBox
getWidth () : Number
获取该组件的当前宽度值。
获取该组件的当前宽度值。
参数:
  • 无。
返回值:
  • Number
BoxComponent
getXType () : String
获取当前组件的xtype，它是用 Ext.ComponentMgr 注册的。 所有可用的xtype列表，参见...
获取当前组件的xtype，它是用 Ext.ComponentMgr 注册的。 所有可用的xtype列表，参见 Ext.Component 类头部。示例用法:

var t = new Ext.form.TextField();
alert(t.getXType());  // alerts 'textfield'
参数:
  • 无。
返回值:
  • String
    The xtype
Component
getXTypes () : String
返回此组件的xtype继承树，用字符'-'分隔。 所有可用的xtype值...

返回此组件的xtype继承树，用字符'-'分隔。 所有可用的xtype值，请参见Ext.Component 类的头部。

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

示例用法:

var t = new Ext.form.TextField();
alert(t.getXTypes());  // alerts 'component/box/field/textfield'
参数:
  • 无。
返回值:
  • String
    xtype层次字符串
Component
hasListener( String eventName ) : Boolean
检测对象是否包含指定事件的任何监听器
检测对象是否包含指定事件的任何监听器
参数:
  • eventName : String
    检测的事件名
返回值:
  • Boolean
    如果事件被监听则为true，否则为false
Observable
hide () : Ext.Component
隐藏当前组件。 监听 beforehide' 事件并且返回false 可以取消隐藏组件的操作。 在隐藏组件之后触发...
隐藏当前组件。 监听 beforehide' 事件并且返回false 可以取消隐藏组件的操作。 在隐藏组件之后触发 ' hide' 事件。 如果组件被配置成 hidden 那么此方法在内部被调用。
参数:
  • 无。
返回值:
  • Ext.Component
    this
Component
isDirty () : Boolean
如果此表单项的值与原始值相比发生了改变，返回true。 如果表单项...

如果此表单项的值与原始值相比发生了改变，返回true。 如果表单项被禁用或者尚未被渲染将会返回false。

注意，如果所属的 form 配置了一个Ext.form.BasicForm， 那么在使用Ext.form.BasicForm. setValues 加载值之后，原始值将会被更新。

参数:
  • 无。
返回值:
  • Boolean
    如果此表单项的值与原始值相比发生了改变(并且没有被禁用)，返回true，其它返回false。
Field
isExpanded () : void
如果下拉列表被展开，返回true，其它返回false
如果下拉列表被展开，返回true，其它返回false
参数:
  • 无。
返回值:
  • void
ComboBox
isValid ( Boolean preventMark ) : Boolean
通过 校验 表单项 处理后的值 ，返回表单项当前值是否合法。...
通过 校验 表单项 处理后的值 ，返回表单项当前值是否合法。 注意: disabled 的表单项将会被忽略。
参数:
  • preventMark : Boolean
    True将会禁止把表单项标记为非法
返回值:
  • Boolean
    如果值是合法的，为true，其它为false
Field
isVisible () : Boolean
如果当前组件可见，返回true。
如果当前组件可见，返回true。
参数:
  • 无。
返回值:
  • Boolean
    如果当前组件可见，返回true，其它返回false。
Component
isXType ( String xtype , [ Boolean shallow ] ) : Boolean
Tests whether or not this Component is of a specific xtype. This can test whether this Component is descended from th...

测试此组件是否是指定的xtype。此方法既可以测试是否是指定的xtype的某个子类， 或者它是否直接是指定的xtype类(shallow=true)。

如果使用你自己的子类，必须知道组件必须注册它的xtype值。

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

示例用法:

var t = new Ext.form.TextField();
var isText = t.isXType('textfield');        // true
var isBoxSubclass = t.isXType('box');       // true, descended from BoxComponent
var isBoxInstance = t.isXType('box', true); // false, not a direct BoxComponent instance
参数:
  • xtype : String
    需要为当前组件进行检测的xtype
  • shallow : Boolean
    (可选) 如果为false，检测组件是否是xtype继承树中的某个子类（默认是这种情况）， 如果为true，只检测组件是否是指定的xtype类型。
返回值:
  • Boolean
    如果当前组件是指定xtype的子类，返回true，其它返回flase。
Component
markInvalid ( [ String msg ] ) : void
显示一个关联到当前表单项的出错信息， 使用msgTarget 来决定如何显示消息并将...

显示一个关msgTarget 来决定如何显示消息并将 invalidClass 应用到表单项的UI元素上。

注意: 如果表单项的值确实通过了校验， 此方法不会导致表单项的 validate 方法返回 false 。 所以简单地把一个表单项标记为非法并不会阻止表单项 通过设置的 Ext.form.Action.Submit.clientValidation 被提交。

invalid.
参数:
  • msg : String
    (可选)校验信息(默认为invalidText)
返回值:
  • void
Field
mon ( Observable|Element item , Object|String ename , Function fn , Object scope , Object opt ) : void
向任何Observable对象(或者元素)上添加监听器，监听器将会在组件...

向任何Observable对象(或者元素)上添加监听器，监听器将会在组件销毁时被自动删除。
用法：

myGridPanel.mon(myGridPanel.getSelectionModel(), 'selectionchange', handleSelectionChange, null, {buffer: 50});

or:

myGridPanel.mon(myGridPanel.getSelectionModel(), {
    selectionchange: handleSelectionChange,
    buffer: 50
});
参数:
  • item : Observable|Element
    需要添加listener/listeners的项目。
  • ename : Object|String
    事件名，或者一个包含事件名属性的对象。
  • fn : Function
    (可选) 如果 ename 参数是一个事件名，此参数为处理函数。
  • scope : Object
    (可选)如果 ename 参数是一个事件名称，此参数是作用域 ( this 引用)，监听函数将会在此作用域中被执行。
  • opt : Object
    (可选)如果 ename 参数是一个事件名称， 此参数是 addListener 配置项。
返回值:
  • void
Component
mun ( Observable|Element item , Object|String ename , Function fn , Object scope ) : void
删除通过mon 方法添加的监听器。
删除通过mon 方法添加的监听器。
参数:
  • item : Observable|Element
    需要删除listener/listeners的项目。
  • ename : Object|String
    事件名称，或者一个包含事件名称属性的对象。
  • fn : Function
    (可选)如果 ename 参数是一个事件名称，此参数是一个处理函数。
  • scope : Object
    (可选)如果 ename 参数是一个事件名称，此参数是作用域 ( this 引用)，监听函数将会在此作用域中被执行。
返回值:
  • void
Component
nextSibling () : Ext.Component
返回所属容器中的下一个组件
返回所属容器中的下一个组件
参数:
  • 无。
返回值:
  • Ext.Component
Component
on( String eventName, Function handler, [Object scope], [Object options] ) : void
给对象添加事件处理器 (addListener的简写形式)
给对象添加事件处理器 (addListener的简写形式。)
参数:
  • eventName : String
    监听的事件类型
  • handler : Function
    事件调用的方法
  • scope : Object
    （可选）处理方法执行时的作用域 (this 的引用)。 如果被忽略。默认为触发事件的对象。
  • options : Object
    可选 包含处理器配置的对象。
返回值:
  • void
Observable
onTriggerClick ( EventObject e ) : void
需要处理触发器(译者注：指按钮)点击事件的函数。 默认情况下，此方法什么事都不做除非用实现方法覆盖它。...
需要处理触发器(译者注：指按钮)点击事件的函数。 默认情况下，此方法什么事都不做除非用实现方法覆盖它。 此方法的示例实现参见Ext.form.ComboBox 和 Ext.form.DateField。
参数:
  • e : EventObject
返回值:
  • void
TriggerField
previousSibling () : Ext.Component
返回所属容器中的前一个组件
返回所属容器中的前一个组件
参数:
  • 无。
返回值:
  • Ext.Component
Component
processValue ( Mixed value ) : void
仅仅在需要准备原始值供校验时，才需要覆盖此方法(参见 validate和 isValid)。...
仅仅在需要准备原始值供校验时，才需要覆盖此方法(参见 validate和 isValid)。 此方法被期望为表单项返回处理后的值，此值将会被用来进行校验 (参见validateValue方法)。
参数:
  • value : Mixed
返回值:
  • void
Field
purgeListeners() : void
移除对象上所有的监听器
移除对象上所有的监听器
参数:
  • 无。
返回值:
  • void
Observable
relayEvents( Object o, Array events ) : void
从指定的Observable上传递选择的事件就好像被当前对象触发一样。
从指定的Observable上传递选择的事件就好像被当前对象触发一样。
参数:
  • o : Object
    该Observable上的事件被当前对象传递。
  • events : Array
    传递的数组名。
返回值:
  • void
Observable
removeClass ( string cls ) : Ext.Component
从组件底层的元素上删除一个CSS类。
从组件底层的元素上删除一个CSS类。
参数:
  • cls : string
    需要移除的CSS类名
返回值:
  • Ext.Component
    this
Component
removeListener( String eventName, Function handler, [Object scope] ) : void
删除一个事件处理器。
删除一个事件处理器。
参数:
  • eventName : String
    处理器关联的事件类型。
  • handler : Function
    移除的处理器。 这应该是传递到addListener里的方法的引用。
  • scope : Object
    （可选）处理器指定的初始作用域。
返回值:
  • void
Observable
render ( [ Element/HTMLElement/String container ], [ String/Number position ] ) : void
在传递进来的HTML元素中渲染当前组件。...

在传递进来的HTML元素中渲染当前组件。

如果你正在使用一个Container 对象放置当前组件，那么请不要使用render方法。

当容器第一次被渲染时，它的子组件将会被容器的 layout 管理器渲染。

某些布局管理器允许动态添加子组件。它们包括 Ext.layout.CardLayout, Ext.layout.AnchorLayout, Ext.layout.FormLayout, Ext.layout.TableLayout。

当一个新的子组件被添加时，如果容器已经被渲染了， 你可能需要调用容器的 doLayout 方法来刷新视图，它将导致所有没有被渲染的子组件进行渲染操作。 此操作是必须的，这样你可以添加多个子组件而只刷新一次layout。

当创建复杂的UI时，非常重要的一点是，请记住调整子项目的尺寸和位置是容器的 layout 管理器的职责。 如果你希望子项目的尺寸对用户交互作出反应， 你必须为容器配置一个布局管理器，它将创建和管理你心里想要的那种布局。

忽略容器的layout 配置意味着将会使用一个基本的布局管理器，它除了按次序把子组件 渲染到容器中之外什么事情都不做。 这种情况下，任何尺寸和位置的调整操作都不会发生。

参数:
  • container : Element/HTMLElement/String
    (可选) 需要在其中渲染当前组件的元素。 如果它是从一个已存在的标签中创建的，此参数应该被忽略。
  • position : String/Number
    (可选) 容器中的一个元素ID或者一个DOM节点索引， 当前组件将会被插入到它前面 (默认append到容器的尾部)
返回值:
  • void
Component
reset () : void
将表单项的当前值重置为以前加载时的值，并且清除所有校验信息。...
将表单项的当前值重置为以前加载时的值，并且清除所有校验信息。 参见Ext.form.BasicForm. trackResetOnLoad 。
参数:
  • 无。
返回值:
  • void
TextField
resumeEvents() : void
重新开始触发事件。(参见suspendEvents) 如果事件以queueSuspended参数被挂起，则在事件被挂起时 ...
重新开始触发事件。(参见 suspendEvents) 如果事件以queueSuspended 参数被挂起，则在事件被挂起时触发的事件会被传递到所有的监听器上
参数:
  • 无。
返回值:
  • void
Observable
select ( Number index , Boolean scrollIntoView ) : void
根据项目在列表中的索引，在下拉列表中选中一个项目。 此函数不会导致select事件被触发。...
根据项目在列表中的索引，在下拉列表中选中一个项目。 此函数不会导致select事件被触发。 为了使此函数能运行，store必须已经被加载并且列表已经被展开，其它情况使用 setValue。
参数:
  • index : Number
    需要选中的列表项目索引，从0开始
  • scrollIntoView : Boolean
    False将会阻止下拉列表自动滚动到所选择的项目，如果它当前不在视图中 (默认为true)
返回值:
  • void
ComboBox
selectByValue ( String value , Boolean scrollIntoView ) : Boolean
根据数据值在下拉列表中选择一个项目。 此函数不会导致select事件被触发。为了此函数能够工作...
根据数据值在下拉列表中选择一个项目。 此函数不会导致select事件被触发。为了此函数能够工作， store必须已经加载并且列表已经被展开，其它情况使用setValue。
参数:
  • value : String
    需要选中项目的数据值
  • scrollIntoView : Boolean
    False将会阻止下拉列表自动滚动到所选择的项目，如果它当前不在视图中 (默认为true)
返回值:
  • Boolean
    如果值能与列表中的一个项目匹配，此参数为true，其它为false
ComboBox
selectText ( [ Number start ], [ Number end ] ) : void
选中当前表单项中的文本
选中当前表单项中的文本
参数:
  • start : Number
    (可选)选中的起点索引(默认为0)
  • end : Number
    (可选)选中的结束索引(默认为文本长度)
返回值:
  • void
TextField
setActiveError ( String msg , Boolean suppressEvent ) : void
将当前activeError设置为所给的字符串。 触发'invalid'事件。这不会设置出错图标...
将当前activeError设置为所给的字符串。 触发'invalid'事件。这不会设置出错图标，仅仅设置消息并触发事件。 如需显示出错图标，可使用markInvalid代替，它将在内部调用此方法。
参数:
  • msg : String
    出错消息
  • suppressEvent : Boolean
    True将会禁止触发'invalid'事件
返回值:
  • void
Field
setAutoScroll ( Boolean scroll ) : Ext.BoxComponent
设置该组件内容溢出时是否自动显示滚动条。
设置该组件内容溢出时是否自动显示滚动条。
参数:
  • scroll : Boolean
    值为true的话组件自动显示滚动条。
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setDisabled ( Boolean disabled ) : Ext.Component
工具函数，使用布尔值设置有效/无效(disabled/enabled )。
工具函数，使用布尔值设置有效/无效(disabled/enabled )。
参数:
  • disabled : Boolean
返回值:
  • Ext.Component
    this
Component
setEditable ( Boolean value ) : void
参数:
  • value : Boolean
    True将会允许用户直接编辑表单项文本。 允许或者阻止用户直接编辑表单项文本。 如果传递了false，用户将只能使用触发按钮修改表单项的值。 将会同时向文本栏添加一个click事件，它会调用触发器。 此方法是一个运行时配置，与配置时配置'editable'选项等价。
返回值:
  • void
TriggerField
setHeight ( Mixed height ) : Ext.BoxComponent
设置此组件的高度。该方法将触发resize事件。
设置此组件的高度。该方法将触发resize事件。
参数:
  • height : Mixed
    The new height to set.
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setMaxValue ( Date/String value ) : void
使用新的时间替换所有现有的 maxValue 并刷新store
使用新的时间替换所有现有的 maxValue 并刷新store
参数:
  • value : Date/String
    可以选择的最大时间
返回值:
  • void
TimeField
setMinValue ( Date/String value ) : void
使用新时间替换任何现有的 minValue 并刷新store
使用新时间替换任何现有的 minValue 并刷新store
参数:
  • value : Date/String
    可选择的最小时间
返回值:
  • void
TimeField
setPagePosition ( Number x , Number y ) : Ext.BoxComponent
设置组件在页面中的XY位置。 如果需要设置left和top值 ，请使用...
设置组件在页面中的XY位置。 如果需要设置left和top值 ，请使用setPosition方法。 该方法触发move事件。
参数:
  • x : Number
    The new x position
  • y : Number
    The new y position
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setPosition ( Number left , Number top ) : Ext.BoxComponent
设置组件的left和top值。设置组件的页面XY值，请使用setPagePosition方法。该方法触发...
设置组件的left和top值。设置组件的页面XY值，请使用setPagePosition方法。该方法触发move事件。
参数:
  • left : Number
    The new left
  • top : Number
    The new top
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setRawValue ( Mixed value ) : Mixed
绕过校验，直接设置底层DOM表单项的值。 设置值并进行校验，参见 setValue。
绕过校验，直接设置底层DOM表单项的值。 设置值并进行校验，参见 setValue。
参数:
  • value : Mixed
    需要设置的值
返回值:
  • Mixed
    value 被设置的表单项值
Field
setReadOnly ( Boolean readOnly ) : void
设置当前表单项的只读状态。
设置当前表单项的只读状态。
参数:
  • readOnly : Boolean
    表单项是否应该只读。
返回值:
  • void
TriggerField
setSize ( Mixed width , Mixed height ) : Ext.BoxComponent
设置BoxComponent的宽度和高度。 此方法触发resize事件...
设置BoxComponent的宽度和高度。 此方法触发resize事件。此方法可以接收单独的width或者height值作为参数， 或者你可以传递像这样的一个size对象： {width:10, height:20} 。
参数:
  • width : Mixed
    设置的新的width值。这可以是：
    • 一个Number类型指定Element新的宽度 Ext.Element.defaultUnit(默认为像素 :'px')。
    • 一个String类型用于设置width的CSS样式。
    • 一个size对象格式为 {width: widthValue, height: heightValue} 。
    • 值为 undefined 时，保留原来的width不变。
  • height : Mixed
    设置的新的height值(如果第一个参数传递了一个size对象，此参数没有必要传递)。这可以是：
    • 一个Number类型指定Element新的高度 Ext.Element.defaultUnit(默认为像素 :'px')。
    • 一个String类型用于设置height的CSS样式。也有可能不会被使用到。
    • 值为 undefined 时，保留原来的height不变。
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setValue ( Mixed value ) : Ext.form.Field
向表单项中设置一个数据值并校验之。 如需直接设置值而不进行校验，参见 setRawValue。
向表单项中设置一个数据值并校验之。 如需直接设置值而不进行校验，参见 setRawValue。
参数:
  • value : Mixed
    需要设置的值
返回值:
  • Ext.form.Field
    this
ComboBox
setVisible ( Boolean visible ) : Ext.Component
工具方法，通过使用布尔值隐藏或者显示当前组件。
工具方法，通过使用布尔值隐藏或者显示当前组件。
参数:
  • visible : Boolean
    true时显示，false时隐藏
返回值:
  • Ext.Component
    this
Component
setWidth ( Mixed width ) : Ext.BoxComponent
设置组件的宽度。 此方法触发resize事件。
设置组件的宽度。 此方法触发resize事件。
参数:
  • width : Mixed
    The new width to set.
返回值:
  • Ext.BoxComponent
    this
BoxComponent
show () : Ext.Component
显示当前组件。监听' beforeshow' 事件，返回 false 取消显示组件...
显示当前组件。监听' beforeshow' 事件，返回 false 取消显示组件。在显示组件之后触发' show' 事件。
参数:
  • 无。
返回值:
  • Ext.Component
    this
Component
suspendEvents( Boolean queueSuspended ) : void
暂停触发所有的事件。 (参看resumeEvents)
暂停触发所有的事件。（参看 resumeEvents)
参数:
  • queueSuspended : Boolean
    如果传递为true则排列好暂停的事件使得在调用 resumeEvents 后再触发它们，而不是抛弃所有暂停的事件。
返回值:
  • void
Observable
syncSize () : Ext.BoxComponent
强制组件的大小按照此组件底层元素当前的高度和宽度计算。
强制组件的大小按照此组件底层元素当前的高度和宽度计算。
参数:
  • 无。
返回值:
  • Ext.BoxComponent
    this
BoxComponent
un( String eventName, Function handler, [Object scope] ) : void
删除一个事件处理器(removeListener方法的简写形式)
删除一个事件处理器(removeListener方法的简写形式。)
参数:
  • eventName : String
    处理器关联的事件类型
  • handler : Function
    被删除的处理器 这应该是传入 addListener 中的方法的引用。
  • scope : Object
    （可选）为处理器指定的初始作用域。
返回值:
  • void
Observable
unsetActiveError ( Boolean suppressEvent ) : void
清除activeError并触发'valid'事件。此方法被clearInvalid在内部进行...
清除activeError并触发'valid'事件。此方法被clearInvalid在内部进行调用， 并且一般情况下没有必要手工调用
参数:
  • suppressEvent : Boolean
    True将禁止触发'invalid'事件
返回值:
  • void
Field
update ( Mixed htmlOrData , [ Boolean loadScripts ], [ Function callback ] ) : void
刷新组件的内部区域。
刷新组件的内部区域。
参数:
  • htmlOrData : Mixed
    如果已经通过tpl为当前组件配置了一个模板，那么 将会使用此参数来装配模板。 如果没有为当前组件配置模板，组件的内容区域将会通过Ext.Element 进行刷新。
  • loadScripts : Boolean
    (可选)只用在使用html配置时此参数才合法。默认为false。
  • callback : Function
    (可选)只用在使用html配置时此参数才合法。 当脚本加载完成时回调函数才被执行。
返回值:
  • void
Component
updateBox ( Object box ) : Ext.BoxComponent
设置此组件底层元素的盒子模型尺寸。(译者注：盒子模型是CSS术语，详细资料请自行搜索。)
设置此组件底层元素的盒子模型尺寸。(译者注：盒子模型是CSS术语，详细资料请自行搜索。)
参数:
  • box : Object
    一个格式为{x, y, width, height}的对象
返回值:
  • Ext.BoxComponent
    this
BoxComponent
validate () : Boolean
校验表单项的值
校验表单项的值
参数:
  • 无。
返回值:
  • Boolean
    如果值合法，为true,否则为false
Field
validateValue ( Mixed The ) : Boolean
使用getErrors创建一个校验出错信息数组。 如果发现了任何错误，将会使用第一个错误作为参数...
使用getErrors创建一个校验出错信息数组。 如果发现了任何错误，将会使用第一个错误作为参数调用markInvalid方法并返回 false，否则返回true。以前，要求子类提供此方法的一个实现以处理校验过程--- 从3.2开始，应该用覆盖getErrors方法的方式替代。
参数:
  • The : Mixed
    表单项的当前值
返回值:
  • Boolean
    如果所有校验都通过，此值为true，如果一个或多个校验失败，则为false
Field

公共事件

Event Defined By
added : ( Ext.Component this , Ext.Container ownerCt , number index )
当一个组件被添加到一个Ext.Container时触发
当一个组件被添加到一个Ext.Container时触发
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • ownerCt : Ext.Container
    用于组件的容器
  • index : number
    添加组件的位置
Component
afterrender : ( Ext.Component this )
在组件渲染完成之后触发...

在组件渲染完成之后触发。

afterrender事件在当前组件被rendered 结束之后、在为组件定义的所有afterRender方法执行之后 触发，并且，如果有stateful， 也在状态被保存之后才触发。

监听器将会以如下参数格式被调用:
  • this : Ext.Component
Component
autosize : ( Ext.form.Field this , Number width )
当autoSize 方法被触发时发出此事件。 根据默认的逻辑，表单项可以有也可以实际上没有...
当autoSize 方法被触发时发出此事件。 根据默认的逻辑，表单项可以有也可以实际上没有 改变尺寸，但是此事件提供了一个钩子，如果有需要， 开发者在运行时可以提供额外的逻辑来改变输入栏的大小。
监听器将会以如下的参数格式调用:
  • this : Ext.form.Field
    文本栏
  • width : Number
    表单项新宽度
TextField
beforedestroy : ( Ext.Component this )
在组件 destroyed 之前触发。 在事件监听器中返回false以停止 destroy 操作。
在组件 destroyed 之前触发。 在事件监听器中返回false以停止 destroy 操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforehide : ( Ext.Component this )
在调用hide方法隐藏组件之前触发。 在事件监听器中返回false可以停止隐藏操作。
在调用hide方法隐藏组件之前触发。 在事件监听器中返回false可以停止隐藏操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforequery : ( Object queryEvent )
在所有查询操作被执行之前触发。 返回false可以取消查询操作或者设置queryEvent的...
在所有查询操作被执行之前触发。 返回false可以取消查询操作或者设置queryEvent的cancel属性为true。
监听器将会以如下参数格式被调用:
  • queryEvent : Object
    一个拥有如下属性的对象:
    • combo : Ext.form.ComboBox
      当前下拉框
    • query : String
      查询
    • forceAll : Boolean
      True将强制进行"所有"查询
    • cancel : Boolean
      设置为true将会取消查询
ComboBox
beforerender : ( Ext.Component this )
在组件被rendered 之前触发。 在事件监听器中返回false可以停止render 操作。
在组件被rendered 之前触发。 在事件监听器中返回false可以停止render 操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforeselect : ( Ext.form.ComboBox combo , Ext.data.Record record , Number index )
在下拉列表中一个项目被选中之前触发。返回false可以取消选中。
在下拉列表中一个项目被选中之前触发。返回false可以取消选中。
监听器将会以如下参数格式被调用:
  • combo : Ext.form.ComboBox
    当前下拉列表
  • record : Ext.data.Record
    从底层store中返回的数据记录
  • index : Number
    选中项目在下拉列表中的索引位置
ComboBox
beforeshow : ( Ext.Component this )
在调用show()方法现实组件之前触发。 事件处理函数返回false可以停止show。
在调用show 方法现实组件之前触发。 事件处理函数返回false可以停止show。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforestaterestore : ( Ext.Component this , Object state )
在组件状态恢复之前触发。返回false停止恢复状态操作。
在组件状态恢复之前触发。返回false停止恢复状态操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    StateProvider返回的状态哈希值。 如果没有禁止此事件，那么状态对象会被传递给applyState。 默认情况下，这样简单地把属性值拷贝到当前组件中。 可以覆盖此方法以提供自定的状态恢复操作。
Component
beforestatesave : ( Ext.Component this , Object state )
在组件状态被保存到配置的状态提供者之前触发。 返回false可以停止保存。
在组件状态被保存到配置的状态提供者之前触发。 返回false可以停止保存。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    状态值哈希。 这由在组件上调用getState() 方法决定。 此方法必须由开发者提供，返回是否需要对状态进行描述，默认情况下， Ext.Component有一个空实现。
Component
blur : ( Ext.form.Field this )
当表单项时区输入焦点时触发。
当表单项时区输入焦点时触发。
监听器将会以如下参数被调用:
  • this : Ext.form.Field
Field
change : ( Ext.form.Field this , Mixed newValue , Mixed oldValue )
如果表单项的时发生改变，在表单项刚刚失去焦点时触发。
如果表单项的时发生改变，在表单项刚刚失去焦点时触发。
监听器将会以如下参数格式调用:
  • this : Ext.form.Field
  • newValue : Mixed
    新的值
  • oldValue : Mixed
    原始值
Field
collapse : ( Ext.form.ComboBox combo )
当下拉列表被收起时触发
当下拉列表被收起时触发
监听器将会以如下参数格式被调用:
  • combo : Ext.form.ComboBox
    当前下拉框
ComboBox
destroy : ( Ext.Component this )
在组件被销毁之后触发。
在组件被destroyed之后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
disable : ( Ext.Component this )
在组件被设置为无效状态后触发。
在组件被设置为无效状态后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
enable : ( Ext.Component this )
当组件被设置为有效(enabled)之后触发。
当组件被设置为有效(enabled)之后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
expand : ( Ext.form.ComboBox combo )
当下拉列表被展开时触发
当下拉列表被展开时触发
监听器将会以如下参数格式被调用:
  • combo : Ext.form.ComboBox
    当前下拉框
ComboBox
focus : ( Ext.form.Field this )
当表单项获得输入焦点时触发。
当表单项获得输入焦点时触发。
监听器将会以如下参数格式被调用:
  • this : Ext.form.Field
Field
hide : ( Ext.Component this )
在组件被隐藏之后触发。 当调用hide 方法隐藏组件之后触发。
在组件被隐藏之后触发。 当调用hide 方法隐藏组件之后触发。
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
invalid : ( Ext.form.Field this , String msg )
在表单项被标记为非法之后触发。
在表单项被标记为非法之后触发。
监听器将会以如下参数格式调用:
  • this : Ext.form.Field
  • msg : String
    校验信息
Field
keydown : ( Ext.form.TextField this , Ext.EventObject e )
输入栏的keydown事件。 只有在 enableKeyEvents 被设置为true时才触发此事件。
输入栏的keydown事件。 只有在 enableKeyEvents 被设置为true时才触发此事件。
监听器将会以如下参数格式调用:
  • this : Ext.form.TextField
    文本栏
  • e : Ext.EventObject
TextField
keypress : ( Ext.form.TextField this , Ext.EventObject e )
输入栏的keypress事件。 只有在enableKeyEvents 被设置为true时才触发此事件。
输入栏的keypress事件。 只有在enableKeyEvents 被设置为true时才触发此事件。
Listeners will be called with the following arguments:
  • this : Ext.form.TextField
    文本栏
  • e : Ext.EventObject
TextField
keyup : ( Ext.form.TextField this , Ext.EventObject e )
输入栏keyup事件。 只有在 enableKeyEvents 被设置为true时才触发此事件。
输入栏keyup事件。 只有在 enableKeyEvents 被设置为true时才触发此事件。
监听器将会以如下的参数格式调用:
  • this : Ext.form.TextField
    文本栏
  • e : Ext.EventObject
TextField
move : ( Ext.Component this , Number x , Number y )
在组件移动之后触发。
在组件移动之后触发。
监听器将会用如下的参数格式来调用:
  • this : Ext.Component
  • x : Number
    The new x position
  • y : Number
    The new y position
BoxComponent
removed : ( Ext.Component this , Ext.Container ownerCt )
当一个组件被从Ext.Container容器中删除时触发
当一个组件被从Ext.Container容器中删除时触发
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • ownerCt : Ext.Container
    持有组件的容器
Component
render : ( Ext.Component this )
在组件被渲染之后触发。
在组件被 rendered(渲染) 之后触发。
监听器将以如下的参数格式被调用:
  • this : Ext.Component
Component
resize : ( Ext.Component this , Number adjWidth , Number adjHeight , Number rawWidth , Number rawHeight )
在组件被调整大小之后触发。
在组件被调整大小之后触发。
监听器将以如下的参数格式被调用:
  • this : Ext.Component
  • adjWidth : Number
    这是width调整后的值
  • adjHeight : Number
    这是height调整后的值
  • rawWidth : Number
    这是width原来的值
  • rawHeight : Number
    这是height原来的值
BoxComponent
select : ( Ext.form.ComboBox combo , Ext.data.Record record , Number index )
当一个列表项目被选中时触发
当一个列表项目被选中时触发
监听器将会使用如下参数被调用:
  • combo : Ext.form.ComboBox
    This combo box
  • record : Ext.data.Record
    从底层store中返回的数据记录
  • index : Number
    下拉列表中被选中项目的索引
ComboBox
show : ( Ext.Component this )
在调用show 方法显示组件之后触发。
在调用show 方法显示组件之后触发。
监听器将会用如下的参数格式被调用:
  • this : Ext.Component
Component
specialkey : ( Ext.form.Field this , Ext.EventObject e )
当任何和导航有关的键被按下时触发(上下左右箭头, tab, 回车,esc, 等等) is pressed. 处理其它按键参见...
当任何和导航有关的键被按下时触发(上下左右箭头, tab, 回车,esc, 等等) is pressed. 处理其它按键参见 Ext.Panel.keys或者 Ext.KeyMap。 你可以检测 Ext.EventObject.getKey 以便获知哪个键被按下。例如：
var form = new Ext.form.FormPanel({
    ...
    items: [{
            fieldLabel: 'Field 1',
            name: 'field1',
            allowBlank: false
        },{
            fieldLabel: 'Field 2',
            name: 'field2',
            listeners: {
                specialkey: function(field, e){
                    // e.HOME, e.END, e.PAGE_UP, e.PAGE_DOWN,
                    // e.TAB, e.ESC, arrow keys: e.LEFT, e.RIGHT, e.UP, e.DOWN
                    if (e.getKey() == e.ENTER) {
                        var form = field.ownerCt.getForm();
                        form.submit();
                    }
                }
            }
        }
    ],
    ...
});
监听器将会以如下参数格式被调用:
  • this : Ext.form.Field
  • e : Ext.EventObject
    事件对象
Field
staterestore : ( Ext.Component this , Object state )
组件状态被存储之后触发。
组件状态被存储之后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    StateProvider返回的状态哈希值。 如果没有禁止此事件，那么状态对象会被传递给applyState。 默认情况下，这样简单地把属性值拷贝到当前组件中。 可以覆盖此方法以提供自定的状态恢复操作。
Component
statesave : ( Ext.Component this , Object state )
在组件状态被保存到所配置的状态提供者之后触发。
在组件状态被保存到所配置的状态提供者之后触发。
监听器将会用如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    状态值hash。 这是由在足见上调用getState() 方法决定的。 开发者必须提供此方法以返回是否需要恢复状态，默认情况下， Ext.Component有一个空实现。
Component
valid : ( Ext.form.Field this )
在表单项被校验无错误之后触发。
在表单项被校验无错误之后触发。
监听器将会以如下参数格式被调用:
  • this : Ext.form.Field
Field


Observable
    Component
      BoxComponent
        Field
          TextField
            TriggerField

Class Ext.form.TriggerField

包: | Ext.form
定义类的文件: | TriggerField.js
类: | TriggerField
子类: | ComboBox, DateField, TwinTriggerField
继承自: | TextField
为TextField提供一个便捷的包装器，添加一个可以点击的触发按钮 (默认情况下看起来像一个下拉选择框)。 触发器没有默认操作，所以你必须通过覆盖 onTriggerClick 分配一个函数来实现触发器的点击处理函数。 你可以直接创建一个TriggerField，因为它被渲染成与一个下拉框非常相似， 这样你可以提供一个自定义的实现。 例如:
var trigger = new Ext.form.TriggerField();
trigger.onTriggerClick = myTriggerFn;
trigger.applyToMarkup('my-field');
然而，一般情况下，你将最想把TriggerField用作可复用组件的基类。 Ext.form.DateField 和 Ext.form.ComboBox 是这种情况完整的例子。

配置项

Config Options Defined By
allowBlank : Boolean
指定为false将会只允许值的长度>0(默认为true)
TextField
allowDomMove : Boolean
在渲染时组件是否可以移动Dom节点(默认为true)。
Component
anchor : String
注: 这个配置只用于该组件被包含在一个已使用AnchorLayout...

注: 这个配置只用于该组件被包含在一个已使用 AnchorLayout (或者其子类)配置的Container时。 基于布局管理器，例如：

  • Ext.form.FormPanel
  • 指定 layout: 'anchor' // or 'form', or 'absolute'

参见 Ext.layout.AnchorLayout. anchor 。

BoxComponent
applyTo : Mixed
指定一个元素的id、一个DOM元素或者一个已经存在并被渲染到DIV中的元素，此DIV已经被...

指定一个元素的id、一个DOM元素或者一个已经存在并被渲染到DIV中的元素，此DIV已经被 渲染到document中，并且为当前组件指定了一些结构化的标签。

  • 描述 :
      当使用了 applyTo， 在主元素中也可以用id或者CSS类名来指定组件的托管部分， 并且，如果可以的话，创建的组件可能也会试图在那个标签中创建它的子组件。
  • 注意 :
      当使用此配置项时，无需调用render()方法。
      如果指定了applyTo属性，任何传递给 renderTo 的值都会被忽略，并且目标元素的父节点将会自动被用作组件的容器。
Component
autoCreate : String/Object
一个DomHelper 元素描述，或者对于一个默认元素描述为true。 用来创建包装此组件的...

一个DomHelper 元素描述，或者对于一个默认元素描述为true。 用来创建包装此组件的Element。 细节参见autoEl 默认为:

                                {tag: "input", type: "text", size: "16", autocomplete: "off"}
TriggerField
autoEl : Mixed
一个表签名或者一个 DomHelper 描述，用来创建 Element ，它将封装当前组件...

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

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

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

{
    xtype: 'box',
    autoEl: {
        tag: 'img',
        src: 'http://www.example.com/example.jpg'

    }
}, {
    xtype: 'box',
    autoEl: {
        tag: 'blockquote',
        html: 'autoEl is cool!'
    }
}, {
    xtype: 'container',
    autoEl: 'ul',
    cls: 'ux-unordered-list',
    items: {
        xtype: 'box',
        autoEl: 'li',
        html: 'First list item'
    }
}
Component
autoHeight : Boolean
如果值为true，height配置项为'auto'，否则值为false的话使用固定的高度...

如果值为true，height配置项为'auto'，否则值为false的话使用固定的高度， 或者可以由其父类容器 layout manager来控制。(默认值为 false)。

注: 虽然很多组件继承了这个配置选项，但不是所有这些组件的自适应高度配置都会像期望的那样起作用。 设置autoHeight：值为true时，浏览器将根据元素的内容自动设置高度，这将意味着Ext不会去管理高度。

如果是由浏览器来管理高度，需要注意的是，通过浏览器进行调整的结构组件内不能被发现， 因此宽度的变化可能导致需要进行同步处理元素的高度。 例如：

var w = new Ext.Window({
    title: 'Window',
    width: 600,
    autoHeight: true,
    items: {
        title: 'Collapse Me',
        height: 400,
        collapsible: true,
        border: false,
        listeners: {
            beforecollapse: function() {
                w.el.shadow.hide();
            },
            beforeexpand: function() {
                w.el.shadow.hide();
            },
            collapse: function() {
                w.syncShadow();
            },
            expand: function() {
                w.syncShadow();
            }
        }
    }
}).show();
BoxComponent
autoScroll : Boolean
如果值为true，将会在该元素上使用overflow:'auto'配置，并且在必要的时候...
如果值为true，将会在该元素上使用overflow:'auto'配置，并且在必要的时候自动显示滚动条，否则，溢出部分的组件都会被切除(默认值为 false)。
BoxComponent
autoShow : Boolean
如果组件需要检测隐藏CSS属性(如 'x-hidden' 或者 'x-hide-display')并且在渲染时删除...
如果组件需要检测隐藏CSS属性(如 'x-hidden' 或者 'x-hide-display')并且在渲染时删除它们 (默认为false)，设置此值为true。
Component
autoWidth : Boolean
如果为true，使用width:'auto'配置，否则使用固定的宽度...

如果为true，使用width:'auto'配置，否则使用固定的宽度，或者可以由其父类容器的layout manager来控制。(默认值为 false)。

注: 虽然很多组件继承了这个配置选项，但不是所有这些组件的自适应宽度配置都会像期望的那样起作用。 设置autoWidth：值为true时，浏览器将根据元素的内容自动设置宽度，这将意味着Ext不会去管理宽度。

如果是由浏览器来管理宽度，需要注意的是，通过浏览器进行调整的结构组件内不能被发现，因此宽度的变化可能导致需要进行同步处理元素的宽度。 例如，在这个元素的目标是：

<div id='grid-container' style='margin-left:25%;width:50%'></div>
当浏览器窗口改变时，渲染后的Panel必须监听浏览器窗口大小的变化，以便通知子项，浏览器改变了其宽度：

var myPanel = new Ext.Panel({
    renderTo: 'grid-container',
    monitorResize: true, // relay on browser resize
    title: 'Panel',
    height: 400,
    autoWidth: true,
    layout: 'hbox',
    layoutConfig: {
        align: 'stretch'
    },
    defaults: {
        flex: 1
    },
    items: [{
        title: 'Box 1',
    }, {
        title: 'Box 2'
    }, {
        title: 'Box 3'
    }],
});
BoxComponent
blankText : String
如果 allowBlank 校验失败时需要显示的出错信息(默认为'This field is required')
TextField
boxMaxHeight : Number
设置组件的最大高度值...

设置组件的最大高度值。

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

BoxComponent
boxMaxWidth : Number
设置组件的最大宽度值...

设置组件的最大宽度值。

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

BoxComponent
boxMinHeight : Number
设置组件的最小高度值...

设置组件的最小高度值。

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

BoxComponent
boxMinWidth : Number
设置组件的最小宽度值...

设置组件的最小宽度值。

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

BoxComponent
bubbleEvents : Array
一个事件数组，当这些事件被触发时，将会被冒泡到所有父容器中。参见....

一个事件数组，当这些事件被触发时，将会被冒泡到所有父容器中。参见 Ext.util.Observable.enableBubble。 默认为 []。

Component
clearCls : String
应用到特殊的clearing div的CSS类， 这个clearing div直接渲染到每个form field的包装器后面...

应用到特殊的clearing div的CSS类， 这个clearing div直接渲染到每个form field的包装器后面，以提供 清除field的功能(默认为 'x-form-clear-left')。

注意: 只有在当前组件被渲染到一个使用FormLayout 布局(例如 Ext.form.FormPanel 或者指定 layout:'form')的 容器中、或者是指定了一个fieldLabel 、或者指定isFormField=true 时此配置才有效。

另请参见 Ext.layout.FormLayout. fieldTpl。

Component
cls : String
一个可选的额外CSS类，它将被添加到当前组件的元素上(默认为'')...
一个可选的额外CSS类，它将被添加到当前组件的元素上(默认为'')。 此属性对于在组件上，或者它的任何使用标准CSS规则的孩子节点上， 添加定制的样式非常有用。
Field
contentEl : String
(可选)指定一个已存在的HTML元素，或者一个已存在HTML元素的...

(可选)指定一个已存在的HTML元素，或者一个已存在HTML元素的 id ，它们将被用作当前组件的内容。

  • 描述 :
    此配置选项被用来将一个已存在的HTML元素 插入到一个新组件(在组件渲染之后它简单地移动DOM元素) 的layout元素中，使它成为该组件的内容。
  • 注意 :
    指定的HTML元素将被append到组件的layout元素中， 在所有配置的 HTML 被插入之后， 并且，这样的话，在render事件 被触发时，document中将不再包含此元素。
    指定的HTML元素将不会参与组件所有可能使用的 layout 过程(译者注：指这些HTML元素 不会参与布局操作)。 它仅是HTML而已。布局操作实在孩子 items 上进行的。
    添加 x-hidden 或者 x-hide-display CSS类，以防在内容渲染到panel时发生闪烁。
Component
ctCls : String
一个可选的外部CSS样式，添加到这个组件的容器(默认值为 '')。 这个方法对于使用标准的CSS规则...

一个可选的外部CSS样式，添加到这个组件的容器(默认值为 '')。 这个方法对于使用标准的CSS规则，为组件或它的任何一个子组件添加特定的样式非常有用。 参见 Ext.layout.ContainerLayout和 extraCls 。

注意: ctCls 默认为 ''期望如下的类，它们将指定一个默认值:

  • Box Layout : 'x-box-layout-ct'
使用一个额外的CSS类配置以上的Class，它是append到默认对象上的。例如， 对于BoxLayout (Hbox and Vbox):
                                ctCls: 'x-box-layout-ct custom-class'

Component
data : Mixed
初始化数据集，它将被应用到 tpl 上以刷新组件的内容区域。
Component
disableKeyFilter : Boolean
指定为true将会禁用按键过滤(默认为false)
TextField
disabled : Boolean
当前组件处于无效状态时为true。 Read-only.
Field
disabledClass : String
当组件处于无效状态时添加到组件上的CSS类(默认为 'x-item-disabled')。
Component
editable : Boolean
false将阻止用户直接向表单项中输入文本，表单项将仅仅响应...
false将阻止用户直接向表单项中输入文本，表单项将仅仅响应 在触发按钮上进行鼠标点击然后设置值。(默认为true)。
TriggerField
emptyClass : String
应用到空表单项的CSS类，以便样式化 emptyText (默认为'x-form-empty-field')。...
应用到空表单项的CSS类，以便样式化 emptyText (默认为'x-form-empty-field')。 根据表单项当前值，此样式按需要被自动添加和删除。
TextField
emptyText : String
放置到空表单项中的默认文本(默认为null)。 注意:...
放置到空表单项中的默认文本(默认为null)。 注意: 如果当前表单栏处于有效状态并且被配置了一个名称，那么此值会被 提交到服务器。
TextField
enableKeyEvents : Boolean
true将为HTML输入栏启用按键事件代理 (默认为false)。
TextField
fieldClass : String
表单项的默认CSS类(默认为'x-form-field')
Field
fieldLabel : String
紧靠此field显示的标签文本(默认值为 '')。注意...

紧靠此field显示的标签文本(默认值为 '')。

注意:只有在当前组件被渲染到一个使用FormLayout 的容器中时，此配置才有效。 (例如 Ext.form.FormPanel 或 指定 layout:'form')。

另请参见 hideLabel 、 Ext.layout.FormLayout和 fieldTpl。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Name'
    }]
});
Component
flex : Number
注: 这个配置只用于该组件被包含在一个已使用BoxLayout配置的Container中时...

注: 这个配置只用于该组件被包含在一个已使用BoxLayout配置的Container中时。通过计算每一个子组件的flex值所占全部flex值之和的比例，来决定子组件的宽(HBoxLayout)高(VBoxlayout)。 任何子项的 flex = 0 或 flex = undefined 将不被设置(初始值大小将不被改变)。

BoxComponent
focusClass : String
当表单项获得焦点时使用的CSS类(默认为 'x-form-focus')
Field
height : Number
组件的高度(默认值为 auto)。注:如果想使用百分比的方式...
组件的高度(默认值为 auto)。注:如果想使用百分比的方式来设置值，请查看 Ext.Component.anchor。
BoxComponent
hidden : Boolean
如果当前组件处于隐藏状态，此值为true。Read-only。
Component
hideLabel : Boolean
true时完全隐藏label元素 ( label 和 separator)。 默认为 false。 默认情况下，即使你不指定...

true时完全隐藏label元素 ( label 和 separator)。 默认为 false。 默认情况下，即使你不指定 fieldLabel 它的空间仍然会被保留，这样这块区域会与其它确实拥有label的区域位于同一排。 讲此值设置为 true 将导致此区域不再保留此空间。

注意: 参见 clearCls 的注释。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield'
        hideLabel: true
    }]
});
Component
hideMode : String
组件如何隐藏，支持的值有： 'visibility' (css visibility), 'offsets' (位置偏移量为负值) 和...

组件如何隐藏，支持的值有： 'visibility' (css visibility), 'offsets' (位置偏移量为负值) 和 'display' (css display).

注意:一般首选默认值 'display'，因为当组件第一次显示的时候它们会自动进行布局 (隐藏的时候不会调整尺寸)。

Component
hideParent : Boolean
此值为true时，当调用hide/show方法时，将会hide和show组件的容器...
此值为true时，当调用hide/show方法时，将会hide和show组件的容器；false时将会 hide和show组件自身(默认为false)。例如，这可以用作window上隐藏按钮的一种 快捷操作，通过设置此按钮的hideParent:true，然后把它添加到window上。
Component
superceed hideTrigger : Boolean
true 将会隐藏触发元素并且仅仅显示基本文本项(默认为false)
TriggerField
html : String/Object
一个HTML片段，或者一个 DomHelper 描述，用作layout元素的内容(默认为'')。...
一个HTML片段，或者一个 DomHelper 描述，用作layout元素的内容(默认为'')。 这个HTML内容在组件渲染之后才被添加，所以在 render 出发的时候，document中尚未包含此HTML。 但是这个内容将会在所有配置的 contentEl 之前被插入到body标签中。
Component
id : String
当前组件唯一的id(默认为auto-assigned id)...

当前组件唯一的id(默认为auto-assigned id)。 如果你需要在以后访问组件，而又没有一个有效的组件对象引用，那么你需要指定一个 id( 也就是，使用Ext. getCmp方法 )。

注意，此id也将被用作组件底层HTML标签的id，这些标签被渲染到页面中。 这将允许你编写基于id的CSS规则，以独立地描述指定的实例；并且，也可以通过 组件父标签的id选中子元素。

注意:为了避免与唯一的id 产生重复， 请参见 itemId 和 ref 。

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

Component
inputType : String
输入栏的类型属性---例如radio,text,password,file(默认为'text')。...
输入栏的类型属性---例如radio,text,password,file(默认为'text')。 'file'和'password'类型通常必须用来渲染那些没有独立Ext组件的表单项类型。 注意，如果你使用inputType:'file'， 那么将不再支持 emptyText 并且应该避免使用。
Field
invalidClass : String
当把表单项标记为非法时所使用的CSS类(默认为'x-form-invalid')
Field
invalidText : String
当把一个表单项标记为非法状态并且没有提供消息时所使用的出错文本...
当把一个表单项标记为非法状态并且没有提供消息时所使用的出错文本 (默认为'The value in this field is invalid')
Field
itemCls : String
注意: 只有在当前组件被渲染到一个使用FormLayout 布局的 容器中时此配置才有效...

注意: 只有在当前组件被渲染到一个使用FormLayout 布局的 容器中时此配置才有效。 (例如Ext.form.FormPanel 或者指定 layout:'form')。

一个附加的CSS类，应用到div上，包装当前field的表单元素。 如果提供了此参数， field级上的itemCls将会覆盖 container级上提供的 默认itemCls。 为itemCls指定的值将会被添加默认的 类('x-form-item')。

既然它被应用到项目的包装器上(参见 Ext.layout.FormLayout。 fieldTpl)， 它将允许你编写能应用到此field、label(如果有指定)、或者field内部任何其它元素的标准CSS规则。

注意: 参考 fieldLabel的注释。 .

示例用法:

// Apply a style to the field's label:
<style>
    .required .x-form-item-label {font-weight:bold;color:red;}
</style>

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Name',
        itemCls: 'required' //this label will be styled
    },{
        xtype: 'textfield',
        fieldLabel: 'Favorite Color'
    }]
});
Component
itemId : String
当没有可利用的对象引用时，itemId可以作为第二选择，用来获得一个组件的引用， 代替 ...

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

var c = new Ext.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'); // 与 Ext.getCmp()不同

p2 = p1.ownerCt.getComponent('p2'); // 通过兄弟对象获得引用

另请参见 id 和 ref 。

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

Component
labelSeparator : String
每个fieldLabel 文本后面现实的分隔符。 此属性可以在多个层次上进行配置...

每个fieldLabel 文本后面现实的分隔符。 此属性可以在多个层次上进行配置。优先顺序为：

  • field / component level
  • container level
  • layout level (默认为冒号 ':')
如不需要为当前field的label显示分隔符，指定一个空字符串''即可。

注意:参见 clearCls 的注释。

另请参见 hideLabel 和 Ext.layout.FormLayout。 fieldTpl。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    layoutConfig: {
        labelSeparator: '~'   // layout config has lowest priority (defaults to ':')
    },
    labelSeparator: '>>',     // config at container level
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Field 1',
        labelSeparator: '...' // field/component level config supersedes others
    },{
        xtype: 'textfield',
        fieldLabel: 'Field 2' // labelSeparator will be '='

    }]
});
Component
labelStyle : String
一个CSS样式描述字符串，它将直接应用到当前field的label上...

一个CSS样式描述字符串，它将直接应用到当前field的label上。 如果有设置，默认为容器的labelStyle值(例如 Ext.layout.FormLayout.labelStyle , 或者 '')。

注意:参见 clearCls 的注释。

另请参见 hideLabel 和 Ext.layout.FormLayout. fieldTpl。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Name',
        labelStyle: 'font-weight:bold;'
    }]
});
Component
listeners : Object
一个包含一个或多个事件处理器的配置对象，会在初始化的时候被添加到目标对象上...

一个包含一个或多个事件处理器的配置对象，会在初始化的时候被添加到目标对象上。 该配置对象应该是一个有效的监听器配置对象就像 addListener例子中指定的一样可一次附加多个处理器。

ExtJs Components上的DOM事件

一些 ExtJs Component 类导出时会选择一些DOM事件(例如 "click", "mouseover" 等等), 这通常只是在有额外的值可以被添加时发生。例如DataView类的 click事件会传递被点击的节点。也可以直接在Component的HTMLElementevent上访问DOM事件，但必需在Component被渲染后监听器才能添加到Element 上。可以按照以下步骤添加插件:

// 插件会用一个监听器配置对象进行配置。
//该组件会被添加到所有处理方法的参数列表上。
Ext.DomObserver = Ext.extend(Object, {
    constructor: function(config) {
        this.listeners = config.listeners ? config.listeners : config;
    },

    // 组件将自己传递进了插件的初始化方法里
    init: function(c) {
        var p, l = this.listeners;
        for (p in l) {
            if (Ext.isFunction(l[p])) {
                l[p] = this.createHandler(l[p], c);
            } else {
                l[p].fn = this.createHandler(l[p].fn, c);
            }
        }

        // 渲染后立即添加监听器到元素上
        c.render = c.render.createSequence(function() {
            var e = c.getEl();
            if (e) {
                e.on(l);
            }
        });
    },

    createHandler: function(fn, c) {
        return function(e) {
            fn.call(this, e, c);
        };
    }
});

var combo = new Ext.form.ComboBox({

    // 元素被点击后折叠
    plugins: [ new Ext.DomObserver({
        click: function(evt, comp) {
            comp.collapse();
        }
    })],
    store: myStore,
    typeAhead: true,
    mode: 'local',
    triggerAction: 'all'
});

Observable
margins : Object
注:此配置只用于该组件展现在一个使用BorderLayout...

注:此配置只用于该组件展现在一个使用BorderLayout 或 BoxLayout的两个子类之一作为布局的容器。

这个margins对象在该组件中的格式为：

{top: (top margin),right: (right margin),bottom: (bottom margin),left: (left margin)}

也可以是一个字符串，中间用空格分隔，margin值为数字。 把matches中每一个值的次序跟CSS中margin值的排列方式相对应：

  • 如果只有一个值，它适用于所有方面。
  • 如果有两个值，top和bottom的边框设置为第一个值，left和right设置为第二个值。
  • 如果有三个值，top设置为第一个值，left和right设置为第二个值，bottom设置为第三个值。
  • 如果有四个值，分别设置为top, right, bottom, left。

默认值:

{top:0, right:0, bottom:0, left:0}
BoxComponent
maskRe : RegExp
一个输入掩码正则表达式，用来过滤不匹配的按键(默认为null)
TextField
maxLength : Number
校验时表单项允许的最大输入长度(默认为Number.MAX_VALUE)。 通过改善可用性允许粘贴、编辑、重做和回退...
校验时表单项允许的最大输入长度(默认为Number.MAX_VALUE)。 通过改善可用性允许粘贴、编辑、重做和回退， 此行为被设计用来为用户提供即时的反馈。 如需限定表单项中可以输入字符的最大长度， 可以使用autoCreate 向一个表单项添加任何你想要的属性，例如:
var myField = new Ext.form.NumberField({
    id: 'mobile',
    anchor:'90%',
    fieldLabel: 'Mobile',
    maxLength: 16, // for validation
    autoCreate: {tag: 'input', type: 'text', size: '20', autocomplete: 'off', maxlength: '10'}
});
TextField
maxLengthText : String
如果maximum length 校验失败时显示的出错文本...
如果maximum length 校验失败时显示的出错文本 (默认为 'The maximum length for this field is {maxLength}')
TextField
minLength : Number
输入栏必须的最小长度(默认为0)
TextField
minLengthText : String
如果 最小长度 校验失败时显示的出错文本 (默认为...
如果 最小长度 校验失败时显示的出错文本 (默认为 'The minimum length for this field is {minLength}') 。
TextField
msgFx : String
实验性参数 当在表单项下显示校验消息时使用的效果(默认为'normal')。
Field
msgTarget : String
通过markInvalid 设置的消息文本应该显示的位置。 必须是如下值之一：...

通过markInvalid 设置的消息文本应该显示的位置。 必须是如下值之一：

  • qtip 当用户鼠标滑过表单项时，显示一个包含消息的快速提示。 这是默认情况。
    为了使此参数能工作，必须调用 Ext.QuickTips.init。
  • title 在弹出的默认浏览器标题属性上显示消息。
  • under 在表单项之下添加一块div，包含出错消息。
  • side 在表单项右边添加一个出错图标，当鼠标滑过时弹出并显示一个消息。
  • [element id] 在指定元素的innerHTML中直接添加出错消息。
Field
name : String
表单项的HTML name属性(默认为'')。 注意: 如果需要当前表单项自动被包含在...
表单项的HTML name属性(默认为'')。 注意: 如果需要当前表单项自动被包含在 form submit()中，必须设置此参数。
Field
overCls : String
一个可选的额外的CSS类，它将在鼠标移过元素时被添加到组件上...
一个可选的额外的CSS类，它将在鼠标移过元素时被添加到组件上，鼠标移出时 删除。(默认为'')。此属性对于在组件上，或者它的任何使用标准CSS规则的孩子节点上， 添加定制的'active' 或者 'hover'样式非常有用。
Component
pageX : Number
如果该组件被包含在一个指定位置的容器中，这个值表示页面级的x坐标值（译者注：在有滚动条的情况下这个值很有用）。
BoxComponent
pageY : Number
如果该组件被包含在一个指定位置的容器中，这个值表示页面级的y坐标值（译者注：在有滚动条的情况下这个值很有用）。
BoxComponent
plugins : Object/Array
一个对象或者一个对象数组，为组件提供特殊的功能 ...
一个对象或者一个对象数组，为组件提供特殊的功能。 对一个合法的插件唯一的要求是它含有一个init()方法， 能接收一个Ext.Component型的参数。 当组件被创建时，如果有可用的插件，组件将会调用每个插件的init方法， 并将自身的引用作为方法参数传递给它。然后，每个插件就可以调用方法或者响应组件上的事件， 就像需要的那样提供自己的功能。
Component
preventMark : Boolean
true将会禁止 把表单项标记为非法。默认为false.
Field
ptype : String
需要创建配置的ptype。 当传递一个配置对象给构造函数时...
需要创建配置的ptype。 当传递一个配置对象给构造函数时，此配置选项不会被使用。 只有在使用懒初始化的时候此配置项才会被使用， 此时Plugin不是 通过一个完整的实例组件，而是通过一个Component配置指定的。 在渲染时，将会查找ptype以决定创建何种类型的Plugin。

如果你创建自己的Plugin，你可以通过 Ext.ComponentMgr.registerPlugin 对它们进行注册，以便能利用懒初始化和渲染机制。
Component
readOnly : Boolean
true将会阻止用户改变表单项，并且隐藏触发按钮。...
true将会阻止用户改变表单项，并且隐藏触发按钮。 如果此值为true，优先于editable和hideTrigger选项(默认为 false)
TriggerField
ref : String
一个路径描述，与组件的 ownerCt 相关，它描述了把当前组件的命名引用放置到哪个父容器中去。...

一个路径描述，与组件的 ownerCt 相关，它描述了把当前组件的命名引用放置到哪个父容器中去。

祖先的坐标路径可以通过'/'字符进行分隔。 例如，将一个Toolbar Button的引用放入 拥有此Toolbar的Panel中:

var myGrid = new Ext.grid.EditorGridPanel({
    title: 'My EditorGridPanel',
    store: myStore,
    colModel: myColModel,
    tbar: [{
        text: 'Save',
        handler: saveChanges,
        disabled: true,
        ref: '../saveButton'
    }],
    listeners: {
        afteredit: function() {
//          The button reference is in the GridPanel
            myGrid.saveButton.enable();
        }
    }
});

在上面的代码中，如果 ref 是 'saveButton' ，那么引用将会被放置到Toolbar中。 ref 中的每个'/' 都会从组件的 ownerCt 向上移动一级。

另请参见 added 和 removed 事件。

Component
regex : RegExp
在校验时，需要在表单项值纸上进行测试的JavaScript RegExp对象(默认为 null)。 如果测试失败，表单项将会使用...
在校验时，需要在表单项值纸上进行测试的JavaScript RegExp对象(默认为 null)。 如果测试失败，表单项将会使用 regexText 进行标记。
TextField
regexText : String
当使用regex 并且校验测试失败时显示的出错文本(默认为'')
TextField
region : String
注: 此配置只用于该组件展现在一个布局为BorderLayout的容器中...

注: 此配置只用于该组件展现在一个布局为BorderLayout的容器中(例如指定layout:'border')。

详见Ext.layout.BorderLayout。

BoxComponent
renderTo : Mixed
该值可以是一个节点的id、一个DOM节点或者一个已存在的元素...

该值可以是一个节点的id、一个DOM节点或者一个已存在的元素， 组件将会被渲染到其中。

  • 注意 :
      如果组件不是一个Container 的子项目时， 不要使用此选项。 渲染和管理它的子项目是一个Container 的layout manager的责任。
      当使用此配置项时，无需调用render()方法。

另请参见 render 。

Component
selectOnFocus : Boolean
true当表单项获得输入焦点时，将会自动选中所有存在的表单项文本 (默认为false)
TextField
stateEvents : Array
一个事件数组，当它们被触发时，组件需要保存自己的状态(默认值为 none)...

一个事件数组，当它们被触发时，组件需要保存自己的状态(默认值为 none)。 它们可以是任何该组件支持的事件类型，包括浏览器事件和 自定义事件(例如['click', 'customerchange'])。

对于保存和恢复组件状态的详细解释，参见 stateful

Component
stateId : String
为该组件指定的唯一的id值，它被用作管理组件状态的目的...
为该组件指定的唯一的id值，它被用作管理组件状态的目的。 (如果设定了id，默认值为组件自己的id，否则，如果组件使用自动生成的id，此值为null)。

对于保存和反解析组件状态的解释，参见 stateful 。

Component
stateful : Boolean
一个标志参数，它将引起组件在启动时尝试从一个保存的状态中恢复内部状态参数...

一个标志参数，它将引起组件在启动时尝试从一个保存的状态中恢复内部状态参数。 组件必须要么拥有一个 stateId 或者 id ，它们被分配给需要被管理的状态属性。 在跨页面加载时，不保证自动生成的id属性的稳定性， 并且，不能依赖此id来保存和恢复一个组件的相同状态。

为了保存状态的操作能够工作，状态管理器的提供者必须 被设置成一个Ext.state.Provider 的实现类，它覆盖了set 和get 方法，以便保存和恢复name/value对。 有一个内置的Ext.state.CookieProvider 可用。

为当前页面设置状态提供者:

Ext.state.Manager.setProvider(new Ext.state.CookieProvider({
    expires: new Date(new Date().getTime()+(1000*60*60*24*7)), //7 days from now
}));

当 stateEvents 配置项中其中之一的事件被触发时， 一个状态可保存的组件将试图保存其状态。

保存状态时，一个可保存状态的组件首先需要通过调用 getState 方法来序列化它的状态。 默认情况下，此函数什么事都不做。 开发者必须提供一个实现，返回一个hash对象，它描述了组件可恢复的状态。

getState方法产生的值将会传递给 Ext.state.Manager.set 方法，它使用配置的 Ext.state.Provider 来保存对象，以组件的 stateId 为key，或者，如果此值（指stateId）没有指定时， 使用它的 id 作为key。

在进行构造时，一个可保存状态的组件试图通过调用 Ext.state.Manager.get方法来 恢复它的状态，传递 stateId 或者，如果此值（指stateId）没有指定时， 使用它的 id 作为参数。

结果对象被传递给 applyState 。 applyState 的默认实现只是简单地把属性拷贝到对象中， 但是开发者可以覆盖此方法以支持更多行为。

通过向 beforestaterestore, staterestore, beforestatesave 和 statesave 事件上绑定监听器，你可以在保存和恢复状态时进行额外的处理。

Component
stripCharsRe : RegExp
一个JavaScript RegExp对象，用来在校验之前从值中剥离不想要的内容(默认为 null)。
TextField
style : String
被添加到组件元素的特定样式。 必须是按照...
被添加到组件元素的特定样式。 必须是按照 Ext.Element.applyStyles 类指定格式的合法参数值。

new Ext.Panel({
    title: 'Some Title',
    renderTo: Ext.getBody(),
    width: 400, height: 300,
    layout: 'form',
    items: [{
        xtype: 'textarea',
        style: {
            width: '95%',
            marginBottom: '10px'
        }
    },
        new Ext.Button({
            text: 'Send',
            minWidth: '100',
            style: {
                marginBottom: '10px'
            }
        })
    ]
});
Component
submitValue : Boolean
False将会清除表单项的name属性，这样在提交表单时它将不会被提交。 默认为true。
Field
tabIndex : Number
该表单项的tabIndex。 注意，此属性仅仅应用到被渲染好的，而不是那些通过applyTo...
该表单项的tabIndex。 注意，此属性仅仅应用到被渲染好的，而不是那些通过applyTo创建的表单项 (默认为undefined)。
Field
tabTip : String
注: 这个配置只用于当该组件作为TabPanel的一个子项目时使用...

注: 这个配置只用于当该组件作为TabPanel的一个子项目时使用。

一个String类型的innerHTML(支持html标签)，当鼠标放在该选项上的时，显示一个tooltip。为了tips能够被渲染，Ext.QuickTips.init()必须被提前调用。
BoxComponent
tpl : Mixed
一个 Ext.Template , Ext.XTemplate 或者一个用来形成一个Ext.XTemplate的字符串数组...
一个 Ext.Template , Ext.XTemplate 或者一个用来形成一个Ext.XTemplate的字符串数组。 与 data 和 tplWriteMode 配置项协同使用。
Component
tplWriteMode : String
刷新组件的内容区域时使用的Ext.(X)Template方式。 默认为'overwrite' (参见 Ext.XTemplate.overwrite )。
刷新组件的内容区域时使用的Ext.(X)Template方式。 默认为'overwrite' (参见 Ext.XTemplate.overwrite )。
Component
triggerClass : String
用来设置触发按钮的传统CSS类。 默认情况下，触发器总是获得'x-form-trigger' 类...
用来设置触发按钮的传统CSS类。 默认情况下，触发器总是获得'x-form-trigger' 类 并且如果指定，triggerClass将会被appended。
TriggerField
triggerConfig : Mixed
一个DomHelper 配置对象，指定了当前表单项触发元素的结构。(可选)...

一个DomHelper 配置对象，指定了当前表单项触发元素的结构。(可选)。

当你需要为TriggerField指定作为触发按钮的元素，可以配置此选项。

注意，当使用此配置项时，保证触发器能正确调整尺寸、定位和显示将是开发者的责任。默认为:

                                {tag: "img", src: Ext.BLANK_IMAGE_URL, cls: "x-form-trigger " + this.triggerClass}
TriggerField
validateOnBlur : Boolean
在表单项失去焦点时是否进行校验(默认为 true)。
Field
validationDelay : Number
在用户开始输入到校验操作开始之间的时长毫秒数 (默认为250)
Field
validationEvent : String/Boolean
引发表单项进行校验操作的事件。 设置为false可以禁用自动校验 (默认为'keyup')。
引发表单项进行校验操作的事件。 设置为false可以禁用自动校验 (默认为'keyup')。
Field
validator : Function
一个自定义的校验方法，在校验表单项时调用( validateValue) (默认为...

一个自定义的校验方法，在校验表单项时调用( validateValue) (默认为 null)。 如果指定，此函数会被第一个调用，允许开发者覆盖默认的校验过程。

此方法会被传入以下参数:

  • value : Mixed
    表单项的当前值

此方法将会返回:

  • true : Boolean
    true 如果值合法
  • msg : String
    如果值是非法时的出错信息
TextField
value : Mixed
当前表单项的初始化值(默认为undefined).
Field
vtype : String
一个校验类型名，在Ext.form.VTypes 中定义(默认为null)
TextField
vtypeText : String
一个自定义的出错消息，用来替代为当前表单项所设置的...
一个自定义的出错消息，用来替代为当前表单项所设置的 vtype 所提供的默认消息(默认为'')。 注意: 只有设置了 vtype 时才应用此项，否则忽略。
TextField
width : Number
组件的宽度(默认值为 auto)。注:如果想使用百分比的方式...
组件的宽度(默认值为 auto)。注:如果想使用百分比的方式来设置值，请查看 Ext.Component.anchor。
BoxComponent
wrapFocusClass : String
天骄到触发元素包装器上的(CSS)类， 默认为x-trigger-wrap-focus。
TriggerField
x : Number
如果被包含在一个指定位置的容器中，这个值表示x(left)坐标值。
BoxComponent
xtype : String
需要创建配置的xtype。 当传递一个配置对象给构造函数时...
需要创建配置的xtype。 当传递一个配置对象给构造函数时，此配置选项不会被使用。 只有在使用懒初始化的时候此配置项才会被使用，此时容器的子项目不是 通过一个完整的实例组件，而是通过一个Component配置指定的。 在渲染时，将会查找xtype以决定创建何种类型的子组件。

预定义的xtype列表如下： here。

如果你继承Component创建你自己的组件，你需要使用Ext.ComponentMgr.registerType 对它们进行注册，以便利用懒初始化和渲染机制。
Component
y : Number
如果被包含在一个指定位置的容器中，这个值表示y(top)坐标值。
BoxComponent

公共属性

Property Defined By
disabled : Boolean
当前组件处于无效状态时为true。 Read-only.
Component
el : Ext.Element
封装了当前组件的Ext.Element。 Read-only。通常情况下，这将是一个<DIV>元素，它由此类的...

封装了当前组件的Ext.Element。 Read-only。

通常情况下，这将是一个<DIV>元素，它由此类的 onRender方法创建，但是它可以通过使用 autoEl 配置项进行覆盖。

注意: 直到组件渲染完成此元素都将处于无效状态。

如需向当前组件的 DOM事件(而不是当前组件自己的Observable事件)添加监听器， 更多建议，参见 listeners 配置项，或者直接使用一个render监听器:

new Ext.Panel({
    title: 'The Clickable Panel',
    listeners: {
        render: function(p) {
            // Append the Panel to the click handler's argument list.
            p.getEl().on('click', handlePanelClick.createDelegate(null, [p], true));
        },
        single: true  // Remove the listener after first invocation
    }
});

另请参见 getEl

Component
hidden : Boolean
如果当前组件处于隐藏状态，此值为true。Read-only。
Component
initialConfig : Object
当前组件的初始化配置描述。 Read-only。
Component
label : Ext.Element
关联到当前表单项的label元素。 只有在当前表单项已经被一个Ext.layout.FormLayout ...

关联到当前表单项的label元素。 只有在当前表单项已经被一个Ext.layout.FormLayout 布局管理器渲染之后才可用。

Field
originalValue : mixed
表单项原来的值，它是在value 中配置的；或者，如果 trackResetOnLoad 设置为...
表单项原来的值，它是在value 中配置的；或者，如果 trackResetOnLoad 设置为 true 时，通过表单加载操作最后一次加载的。
Field
ownerCt : Ext.Container
组件所属的Container (默认为undefined，当前组件被添加到一个容器中时此值被自动设置)...
组件所属的Container (默认为undefined，当前组件被添加到一个容器中时此值被自动设置)。 Read-only。

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

Component
refOwner : Ext.Container
如果当前组件是一个容器的孩子，并且是通过一个 ref 配置项被注册的，则此值为 ref 引用被插入到的祖先容器。
如果当前组件是一个容器的孩子，并且是通过一个 ref 配置项被注册的，则此值为 ref 引用被插入到的祖先容器。
Component
rendered : Boolean
如果当前组件已经被渲染了，此值为true。Read-only.
Component
startValue : mixed
表单项最后一次获得焦点时所拥有的值。 这就是传递给change 事件的值...

表单项最后一次获得焦点时所拥有的值。 这就是传递给change 事件的值，此事件在值被改变并失去焦点时触发。

直到表单项被访问之前此值都是undefined 与originalValue 进行比较。

Field

公共方法

Method Defined By
TriggerField ( Object config )
创建一个新的TriggerField
创建一个新的TriggerField
参数:
  • config : Object
    配置选项(合法的 {@Ext.form.TextField}配置项也将被应用到基本的TextField上)
返回值:
  • void
TriggerField
addClass ( string cls ) : Ext.Component
为组件底层的元素添加CSS样式。
为组件底层的元素添加CSS样式。
参数:
  • cls : string
    需要添加的CSS样式的class名称
返回值:
  • Ext.Component
    this
Component
addEvents( Object|String o, string Optional. ) : void
添加指定的事件到事件列表上，事件会被该Observable触发。
添加指定的事件到事件列表上，事件会被该Observable触发。
参数:
  • o : Object|String
    以事件名作为属性true作为值的对象 或者当多个事件名被分开的传递时则为第一个事件名。
  • Optional. : string
    事件名被分开的传递时则为事件名。 用法:
    this.addEvents('storeloaded', 'storecleared');
返回值:
  • void
Observable
addListener( String eventName, Function handler, [Object scope], [Object options] ) : void
给对象添加事件处理器。
给对象添加事件处理器。
参数:
  • eventName : String
    监听的事件名。
  • handler : Function
    事件调用的方法
  • scope : Object
    （可选）处理方法执行的作用域 (this的引用 reference)。 如果被忽略。默认为触发事件的对象。
  • options : Object
    （可选）包含处理器配置和属性的对象。 可能包含以下的属性:
    • scope : Object
      处理方法执行的作用域(this的引用) 。 如果被忽略。默认为触发事件的对象。
    • delay : Number
      在触发事件后延迟调用处理器的毫秒数。
    • single : Boolean
      如果为True则添加一个处理器来处理下一次的事件触发（仅一次），然后移除自己。
    • buffer : Number
      使得处理器延迟指定毫秒数后预定的运行在 一个Ext.util.DelayedTask中 。 如果事件在时间内再一次被触发，原始的处理器不会被调用，但是新的处理器会预定的在他的位置上。
    • target : Observable
      如果事件在目标的Observable上触发则仅仅调用处理器， 否则 事件会从子类的Observable上冒泡

    组合选项
    使用这些选项参数,可能会组合出不同类型的监听器：

    一个延迟的，一次性的监听器。

    myDataView.on('click', this.onClick, this, {
single: true,
delay: 100
});

    一次调用附加多个处理器
    该方法同样支持传递一个包含指定的多个处理器的属性的配置对象参数。

    myGridPanel.on({
'click' : {
    fn: this.onClick,
    scope: this,
    delay: 100
},
'mouseover' : {
    fn: this.onMouseOver,
    scope: this
},
'mouseout' : {
    fn: this.onMouseOut,
    scope: this
}
});

    或者一个简写的语法：

    myGridPanel.on({
'click' : this.onClick,
'mouseover' : this.onMouseOver,
'mouseout' : this.onMouseOut,
 scope: this
});
返回值:
  • void
Observable
applyToMarkup ( String/HTMLElement el ) : void
将此组件添加到已存在的有效的HTML标签中。 使用该方法时，无需再调用render()方法。
将此组件添加到已存在的有效的HTML标签中。 使用该方法时，无需再调用render()方法。
参数:
  • el : String/HTMLElement
返回值:
  • void
Component
clearInvalid () : void
清除当前表单项上的所有非法styles/messages(样式/消息)
清除当前表单项上的所有非法styles/messages(样式/消息)
参数:
  • 无。
返回值:
  • void
Field
cloneConfig ( Object overrides ) : Ext.Component
默认使用原先传递给当前实例的配置值克隆当前组件。
默认使用原先传递给当前实例的配置值克隆当前组件。
参数:
  • overrides : Object
    一个新的配置项，包含需要覆盖到克隆版本的所有属性。 可以传递一个id参数给此对象，否则将自动生成一个新的id以避免发生重复。
返回值:
  • Ext.Component
    当前组件的克隆副本
Component
destroy () : void
通过如下方法销毁对象：删除所有的事件监听器、将组件的元素从DOM树中删除...
通过如下方法销毁对象：删除所有的事件监听器、将组件的元素从DOM树中删除（如果可以）、 将组件从它的 Ext.Container（如果可用）中删除、 并且将它从Ext.ComponentMgr中 注销。 销毁操作一般由框架自动完成，一般情况下不需要直接调用该方法。
参数:
  • 无。
返回值:
  • void
Component
disable () : Ext.Component
将组件置为无效状态，并出发'disable'事件。
将组件置为无效状态，并出发'disable'事件。
参数:
  • 无。
返回值:
  • Ext.Component
    this
Component
enable () : Ext.Component
将组件置为有效状态并触发'enable'事件。
将组件置为有效状态并触发'enable'事件。
参数:
  • 无。
返回值:
  • Ext.Component
    this
Component
enableBubble( String/Array events ) :void
是否现在使得事件会被该Observable触发并调用 this.getBubbleTarget()方法在拥有者的继承树...

是否现在使得事件会被该Observable触发并调用 this.getBubbleTarget()方法在拥有者的继承树中冒泡。Observable的基础类中没有该方法的实现。

该方法一般被Ext.Components用来冒泡事件到拥有者的容器。参看Ext.Component.getBubbleTarget默认的实现 在Ext.Component中返回组件的直接拥有者。但是如果需要的是一个已知的目标，该方法可以被重写来更快的访问需求的目标。

例子:

Ext.override(Ext.form.Field, {
    // 添加方法到Field的initComponent上改变事件为冒泡
    initComponent : Ext.form.Field.prototype.initComponent.createSequence(function() {
        this.enableBubble('change');
    }),

    // 我们知道我们想让Field的事件冒泡到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() {
            // 如果样式被修改标题会变红。
            myForm.header.setStyle('color', 'red');
        }
    }
});
参数:
  • events : String/Array
    冒泡的事件名，或事件名数组
返回值:
  • void
Observable
findParentBy ( Function fn ) : Ext.Container
通过自定义的函数查找当前组件上层任何层次上的容器...
通过自定义的函数查找当前组件上层任何层次上的容器。 如果传递的函数返回true，容器对象将被返回。
参数:
  • fn : Function
    自定义的函数，使用如下参数调用(container,this component)。
返回值:
  • Ext.Container
    自定义函数返回true的第一个容器
Component
findParentByType ( String/Class xtype ) : Ext.Container
通过xtype或者class查找当前组件上层任何层次上的容器
通过xtype或者class查找当前组件上层任何层次上的容器
参数:
  • xtype : String/Class
    组件的xtype字符串，或者直接是组件的class
返回值:
  • Ext.Container
    符合指定xtype或者class的第一个容器
Component
fireEvent( String eventName, Object... args ) : Boolean
用传入的参数触发指定的事件 (减去事件名)。 一个事件可以被设置为冒泡 Obse...

用传入的参数触发指定的事件 (减去事件名)。

一个事件可以被设置为冒泡到Observable父类继承树(参看 Ext.Component.getBubbleTarget) 调用enableBubble实现。

参数:
  • eventName : String
    触发的事件名。
  • args : Object...
    传递给处理器的可变长度参数。
返回值:
  • Boolean
    如果有任何的处理器返回false则返回false，否则返回true。
Observable
focus ( [ Boolean selectText ], [ Boolean/Number delay ] ) : Ext.Component
尝试将当前组件设为焦点。
尝试将当前组件设为焦点。
参数:
  • selectText : Boolean
    (可选) 如果可用，同时选中组件内部的文本
  • delay : Boolean/Number
    (可选)将当前组件设置为焦点的延迟时间(设置为true等于0毫秒)
返回值:
  • Ext.Component
    this
Component
getActiveError () : String
获取当前表单项活动的出错消息。
获取当前表单项活动的出错消息。
参数:
  • 无。
返回值:
  • String
    返回表单项上活动的出错消息，如果没有错误，返回一个空字符串。
Field
getBox ( [ Boolean local ] ) : Object
获取组件底层元素当前盒子模型的尺寸。（译者注：盒子模型是CSS术语，详细解释请自行搜索。）
获取组件底层元素当前盒子模型的尺寸。（译者注：盒子模型是CSS术语，详细解释请自行搜索。）
参数:
  • local : Boolean
    (可选)值为true时，组件的left值和top值将代替页面的XY被返回。(默认值为false)
返回值:
  • Object
    返回值的格式{x, y, width, height}
BoxComponent
getBubbleTarget () : Ext.Container
为Observable的fireEvent方法提供链接，它沿着继承结构进行冒泡操作。
为Observable的fireEvent方法提供链接，它沿着继承结构进行冒泡操作。
参数:
  • 无。
返回值:
  • Ext.Container
    拥有当前组件的容器。
Component
getEl () : Ext.Element
返回 Ext.Element ，它包装了当前组件。...

返回 Ext.Element ，它包装了当前组件。

通常情况下，这将是一个<DIV>元素，它是由该类的onRender方法创建的， 但是可以使用autoEl配置项 覆盖它。

注意: 此元素将会一直处于无效状态直到当前组件渲染完成。

如需向当前组件的 DOM事件(而不是当前组件自己的Observable事件)添加监听器， 更多建议，参见 listeners 配置项，或者直接使用一个render监听器:

new Ext.Panel({
    title: 'The Clickable Panel',
    listeners: {
        render: function(p) {
            // Append the Panel to the click handler's argument list.
            p.getEl().on('click', handlePanelClick.createDelegate(null, [p], true));
        },
        single: true  // Remove the listener after first invocation
    }
});
参数:
  • 无。
返回值:
  • Ext.Element
    包装当前组件的元素。
Component
getErrors () : Array
运行当前表单项的校验器并返回一个所有校验错误信息数组。 此方法在校验期间在内部调用并且一般情况下...
运行当前表单项的校验器并返回一个所有校验错误信息数组。 此方法在校验期间在内部调用并且一般情况下不需要手工调用。 每个子类都应该重写或者增加返回值以提供它们自己的出错消息
参数:
  • 无。
返回值:
  • Array
    当前表单项的所有出错消息
TextField
getHeight () : Number
获取该组件的当前高度值。
获取该组件的当前高度值。
参数:
  • 无。
返回值:
  • Number
BoxComponent
getId () : String
返回当前组件的id，如果没有定义id，则自动生成并返回一个id:'ext-comp-'...
返回当前组件的 id 如果没有定义 id 则自动生成并返回一个 id

'ext-comp-' + (++Ext.Component.AUTO_ID)
参数:
  • 无。
返回值:
  • String
    id
Component
getItemId () : String
返回当前组件的 itemId 。 如果没有通过配置参数指定 itemId 那么，将会使用...
返回当前组件的 itemId 。 如果没有通过配置参数指定 itemId 那么，将会使用 getId 返回 id 。
参数:
  • 无。
返回值:
  • String
Component
getName () : String
如果可用，返回表单项的 name 或者 hiddenName 属性。
如果可用，返回表单项的 name 或者 hiddenName 属性。
参数:
  • 无。
返回值:
  • String
    name 表单项的{@link Ext.form.Field#name name}或者{@link Ext.form.ComboBox#hiddenName hiddenName}
Field
getOuterSize () : Object
获取当前组件所在元素的尺寸大小，包括边缘的空白处。
获取当前组件所在元素的尺寸大小，包括边缘的空白处。
参数:
  • 无。
返回值:
  • Object
    一个包含元素大小的对象 {width: (element width + left/right margins), height: (element height + top/bottom margins)}
BoxComponent
getPosition ( [ Boolean local ] ) : Array
获取组件底层元素当前的XY位置。
获取组件底层元素当前的XY位置。
参数:
  • local : Boolean
    (可选)如果为true，将返回元素的left和top值，而不是相对于页面内的 XY。(默认值为 false)
返回值:
  • Array
    元素的XY位置值(例如：[100, 200])
BoxComponent
getRawValue () : Mixed
返回原始数据值，可能不是一个合法的、已定义的值。 返回格式化的值参见...
返回原始数据值，可能不是一个合法的、已定义的值。 返回格式化的值参见 getValue。
参数:
  • 无。
返回值:
  • Mixed
    value 表单项的值
Field
getResizeEl () : Ext.Element
返回该组件的最外层用来定义这些组件整体大小的Element...

返回该组件的最外层用来定义这些组件整体大小的Element对象。

通常用 getEl 方法将会返回相同的Element对象，但在有些情况下，组件可能有一些更多的封装了它的主要动态Element对象的Element对象。

例如ComboBox。它是封装在一个包含<input>元素的包装元素里(这将返回其 getEl方法和触发按钮的元素)。返回的元素为resizeEl。

参数:
  • 无。
返回值:
  • Ext.Element
    The Element which is to be resized by size managing layouts.
BoxComponent
getSize () : Object
获取组件底层元素当前的大小。
获取组件底层元素当前的大小。
参数:
  • 无。
返回值:
  • Object
    一个包含元素大小的对象{width: (element width), height: (element height)}
BoxComponent
getValue () : Mixed
返回格式化的数据值(undefined或者emptyText将会以''返回)。 如需返回原始值，参见...
返回格式化的数据值(undefined或者emptyText将会以''返回)。 如需返回原始值，参见 getRawValue。
参数:
  • 无。
返回值:
  • Mixed
    value 表单项的值
Field
getWidth () : Number
获取该组件的当前宽度值。
获取该组件的当前宽度值。
参数:
  • 无。
返回值:
  • Number
BoxComponent
getXType () : String
获取当前组件的xtype，它是用 Ext.ComponentMgr 注册的。 所有可用的xtype列表，参见...
获取当前组件的xtype，它是用 Ext.ComponentMgr 注册的。 所有可用的xtype列表，参见 Ext.Component 类头部。示例用法:

var t = new Ext.form.TextField();
alert(t.getXType());  // alerts 'textfield'
参数:
  • 无。
返回值:
  • String
    The xtype
Component
getXTypes () : String
返回此组件的xtype继承树，用字符'-'分隔。 所有可用的xtype值...

返回此组件的xtype继承树，用字符'-'分隔。 所有可用的xtype值，请参见Ext.Component 类的头部。

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

示例用法:

var t = new Ext.form.TextField();
alert(t.getXTypes());  // alerts 'component/box/field/textfield'
参数:
  • 无。
返回值:
  • String
    xtype层次字符串
Component
hasListener( String eventName ) : Boolean
检测对象是否包含指定事件的任何监听器
检测对象是否包含指定事件的任何监听器
参数:
  • eventName : String
    检测的事件名
返回值:
  • Boolean
    如果事件被监听则为true，否则为false
Observable
hide () : Ext.Component
隐藏当前组件。 监听 beforehide' 事件并且返回false 可以取消隐藏组件的操作。 在隐藏组件之后触发...
隐藏当前组件。 监听 beforehide' 事件并且返回false 可以取消隐藏组件的操作。 在隐藏组件之后触发 ' hide' 事件。 如果组件被配置成 hidden 那么此方法在内部被调用。
参数:
  • 无。
返回值:
  • Ext.Component
    this
Component
isDirty () : Boolean
如果此表单项的值与原始值相比发生了改变，返回true。 如果表单项...

如果此表单项的值与原始值相比发生了改变，返回true。 如果表单项被禁用或者尚未被渲染将会返回false。

注意，如果所属的 form 配置了一个Ext.form.BasicForm， 那么在使用Ext.form.BasicForm. setValues 加载值之后，原始值将会被更新。

参数:
  • 无。
返回值:
  • Boolean
    如果此表单项的值与原始值相比发生了改变(并且没有被禁用)，返回true，其它返回false。
Field
isValid ( Boolean preventMark ) : Boolean
通过 校验 表单项 处理后的值 ，返回表单项当前值是否合法。...
通过 校验 表单项 处理后的值 ，返回表单项当前值是否合法。 注意: disabled 的表单项将会被忽略。
参数:
  • preventMark : Boolean
    True将会禁止把表单项标记为非法
返回值:
  • Boolean
    如果值是合法的，为true，其它为false
Field
isVisible () : Boolean
如果当前组件可见，返回true。
如果当前组件可见，返回true。
参数:
  • 无。
返回值:
  • Boolean
    如果当前组件可见，返回true，其它返回false。
Component
isXType ( String xtype , [ Boolean shallow ] ) : Boolean
Tests whether or not this Component is of a specific xtype. This can test whether this Component is descended from th...

测试此组件是否是指定的xtype。此方法既可以测试是否是指定的xtype的某个子类， 或者它是否直接是指定的xtype类(shallow=true)。

如果使用你自己的子类，必须知道组件必须注册它的xtype值。

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

示例用法:

var t = new Ext.form.TextField();
var isText = t.isXType('textfield');        // true
var isBoxSubclass = t.isXType('box');       // true, descended from BoxComponent
var isBoxInstance = t.isXType('box', true); // false, not a direct BoxComponent instance
参数:
  • xtype : String
    需要为当前组件进行检测的xtype
  • shallow : Boolean
    (可选) 如果为false，检测组件是否是xtype继承树中的某个子类（默认是这种情况）， 如果为true，只检测组件是否是指定的xtype类型。
返回值:
  • Boolean
    如果当前组件是指定xtype的子类，返回true，其它返回flase。
Component
markInvalid ( [ String msg ] ) : void
显示一个关联到当前表单项的出错信息， 使用msgTarget 来决定如何显示消息并将...

显示一个关msgTarget 来决定如何显示消息并将 invalidClass 应用到表单项的UI元素上。

注意: 如果表单项的值确实通过了校验， 此方法不会导致表单项的 validate 方法返回 false 。 所以简单地把一个表单项标记为非法并不会阻止表单项 通过设置的 Ext.form.Action.Submit.clientValidation 被提交。

invalid.
参数:
  • msg : String
    (可选)校验信息(默认为invalidText)
返回值:
  • void
Field
mon ( Observable|Element item , Object|String ename , Function fn , Object scope , Object opt ) : void
向任何Observable对象(或者元素)上添加监听器，监听器将会在组件...

向任何Observable对象(或者元素)上添加监听器，监听器将会在组件销毁时被自动删除。
用法：

myGridPanel.mon(myGridPanel.getSelectionModel(), 'selectionchange', handleSelectionChange, null, {buffer: 50});

or:

myGridPanel.mon(myGridPanel.getSelectionModel(), {
    selectionchange: handleSelectionChange,
    buffer: 50
});
参数:
  • item : Observable|Element
    需要添加listener/listeners的项目。
  • ename : Object|String
    事件名，或者一个包含事件名属性的对象。
  • fn : Function
    (可选) 如果 ename 参数是一个事件名，此参数为处理函数。
  • scope : Object
    (可选)如果 ename 参数是一个事件名称，此参数是作用域 ( this 引用)，监听函数将会在此作用域中被执行。
  • opt : Object
    (可选)如果 ename 参数是一个事件名称， 此参数是 addListener 配置项。
返回值:
  • void
Component
mun ( Observable|Element item , Object|String ename , Function fn , Object scope ) : void
删除通过mon 方法添加的监听器。
删除通过mon 方法添加的监听器。
参数:
  • item : Observable|Element
    需要删除listener/listeners的项目。
  • ename : Object|String
    事件名称，或者一个包含事件名称属性的对象。
  • fn : Function
    (可选)如果 ename 参数是一个事件名称，此参数是一个处理函数。
  • scope : Object
    (可选)如果 ename 参数是一个事件名称，此参数是作用域 ( this 引用)，监听函数将会在此作用域中被执行。
返回值:
  • void
Component
nextSibling () : Ext.Component
返回所属容器中的下一个组件
返回所属容器中的下一个组件
参数:
  • 无。
返回值:
  • Ext.Component
Component
on( String eventName, Function handler, [Object scope], [Object options] ) : void
给对象添加事件处理器 (addListener的简写形式)
给对象添加事件处理器 (addListener的简写形式。)
参数:
  • eventName : String
    监听的事件类型
  • handler : Function
    事件调用的方法
  • scope : Object
    （可选）处理方法执行时的作用域 (this 的引用)。 如果被忽略。默认为触发事件的对象。
  • options : Object
    可选 包含处理器配置的对象。
返回值:
  • void
Observable
onTriggerClick ( EventObject e ) : void
需要处理触发器(译者注：指按钮)点击事件的函数。 默认情况下，此方法什么事都不做除非用实现方法覆盖它。...
需要处理触发器(译者注：指按钮)点击事件的函数。 默认情况下，此方法什么事都不做除非用实现方法覆盖它。 此方法的示例实现参见Ext.form.ComboBox 和 Ext.form.DateField。
参数:
  • e : EventObject
返回值:
  • void
TriggerField
previousSibling () : Ext.Component
返回所属容器中的前一个组件
返回所属容器中的前一个组件
参数:
  • 无。
返回值:
  • Ext.Component
Component
processValue ( Mixed value ) : void
仅仅在需要准备原始值供校验时，才需要覆盖此方法(参见 validate和 isValid)。...
仅仅在需要准备原始值供校验时，才需要覆盖此方法(参见 validate和 isValid)。 此方法被期望为表单项返回处理后的值，此值将会被用来进行校验 (参见validateValue方法)。
参数:
  • value : Mixed
返回值:
  • void
Field
purgeListeners() : void
移除对象上所有的监听器
移除对象上所有的监听器
参数:
  • 无。
返回值:
  • void
Observable
relayEvents( Object o, Array events ) : void
从指定的Observable上传递选择的事件就好像被当前对象触发一样。
从指定的Observable上传递选择的事件就好像被当前对象触发一样。
参数:
  • o : Object
    该Observable上的事件被当前对象传递。
  • events : Array
    传递的数组名。
返回值:
  • void
Observable
removeClass ( string cls ) : Ext.Component
从组件底层的元素上删除一个CSS类。
从组件底层的元素上删除一个CSS类。
参数:
  • cls : string
    需要移除的CSS类名
返回值:
  • Ext.Component
    this
Component
removeListener( String eventName, Function handler, [Object scope] ) : void
删除一个事件处理器。
删除一个事件处理器。
参数:
  • eventName : String
    处理器关联的事件类型。
  • handler : Function
    移除的处理器。 这应该是传递到addListener里的方法的引用。
  • scope : Object
    （可选）处理器指定的初始作用域。
返回值:
  • void
Observable
render ( [ Element/HTMLElement/String container ], [ String/Number position ] ) : void
在传递进来的HTML元素中渲染当前组件。...

在传递进来的HTML元素中渲染当前组件。

如果你正在使用一个Container 对象放置当前组件，那么请不要使用render方法。

当容器第一次被渲染时，它的子组件将会被容器的 layout 管理器渲染。

某些布局管理器允许动态添加子组件。它们包括 Ext.layout.CardLayout, Ext.layout.AnchorLayout, Ext.layout.FormLayout, Ext.layout.TableLayout。

当一个新的子组件被添加时，如果容器已经被渲染了， 你可能需要调用容器的 doLayout 方法来刷新视图，它将导致所有没有被渲染的子组件进行渲染操作。 此操作是必须的，这样你可以添加多个子组件而只刷新一次layout。

当创建复杂的UI时，非常重要的一点是，请记住调整子项目的尺寸和位置是容器的 layout 管理器的职责。 如果你希望子项目的尺寸对用户交互作出反应， 你必须为容器配置一个布局管理器，它将创建和管理你心里想要的那种布局。

忽略容器的layout 配置意味着将会使用一个基本的布局管理器，它除了按次序把子组件 渲染到容器中之外什么事情都不做。 这种情况下，任何尺寸和位置的调整操作都不会发生。

参数:
  • container : Element/HTMLElement/String
    (可选) 需要在其中渲染当前组件的元素。 如果它是从一个已存在的标签中创建的，此参数应该被忽略。
  • position : String/Number
    (可选) 容器中的一个元素ID或者一个DOM节点索引， 当前组件将会被插入到它前面 (默认append到容器的尾部)
返回值:
  • void
Component
reset () : void
将表单项的当前值重置为以前加载时的值，并且清除所有校验信息。...
将表单项的当前值重置为以前加载时的值，并且清除所有校验信息。 参见Ext.form.BasicForm. trackResetOnLoad 。
参数:
  • 无。
返回值:
  • void
TextField
resumeEvents() : void
重新开始触发事件。(参见suspendEvents) 如果事件以queueSuspended参数被挂起，则在事件被挂起时 ...
重新开始触发事件。(参见 suspendEvents) 如果事件以queueSuspended 参数被挂起，则在事件被挂起时触发的事件会被传递到所有的监听器上
参数:
  • 无。
返回值:
  • void
Observable
selectText ( [ Number start ], [ Number end ] ) : void
选中当前表单项中的文本
选中当前表单项中的文本
参数:
  • start : Number
    (可选)选中的起点索引(默认为0)
  • end : Number
    (可选)选中的结束索引(默认为文本长度)
返回值:
  • void
TextField
setActiveError ( String msg , Boolean suppressEvent ) : void
将当前activeError设置为所给的字符串。 触发'invalid'事件。这不会设置出错图标...
将当前activeError设置为所给的字符串。 触发'invalid'事件。这不会设置出错图标，仅仅设置消息并触发事件。 如需显示出错图标，可使用markInvalid代替，它将在内部调用此方法。
参数:
  • msg : String
    出错消息
  • suppressEvent : Boolean
    True将会禁止触发'invalid'事件
返回值:
  • void
Field
setAutoScroll ( Boolean scroll ) : Ext.BoxComponent
设置该组件内容溢出时是否自动显示滚动条。
设置该组件内容溢出时是否自动显示滚动条。
参数:
  • scroll : Boolean
    值为true的话组件自动显示滚动条。
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setDisabled ( Boolean disabled ) : Ext.Component
工具函数，使用布尔值设置有效/无效(disabled/enabled )。
工具函数，使用布尔值设置有效/无效(disabled/enabled )。
参数:
  • disabled : Boolean
返回值:
  • Ext.Component
    this
Component
setEditable ( Boolean value ) : void
参数:
  • value : Boolean
    True将会允许用户直接编辑表单项文本。 允许或者阻止用户直接编辑表单项文本。 如果传递了false，用户将只能使用触发按钮修改表单项的值。 将会同时向文本栏添加一个click事件，它会调用触发器。 此方法是一个运行时配置，与配置时配置'editable'选项等价。
返回值:
  • void
TriggerField
setHeight ( Mixed height ) : Ext.BoxComponent
设置此组件的高度。该方法将触发resize事件。
设置此组件的高度。该方法将触发resize事件。
参数:
  • height : Mixed
    The new height to set.
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setPagePosition ( Number x , Number y ) : Ext.BoxComponent
设置组件在页面中的XY位置。 如果需要设置left和top值 ，请使用...
设置组件在页面中的XY位置。 如果需要设置left和top值 ，请使用setPosition方法。 该方法触发move事件。
参数:
  • x : Number
    The new x position
  • y : Number
    The new y position
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setPosition ( Number left , Number top ) : Ext.BoxComponent
设置组件的left和top值。设置组件的页面XY值，请使用setPagePosition方法。该方法触发...
设置组件的left和top值。设置组件的页面XY值，请使用setPagePosition方法。该方法触发move事件。
参数:
  • left : Number
    The new left
  • top : Number
    The new top
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setRawValue ( Mixed value ) : Mixed
绕过校验，直接设置底层DOM表单项的值。 设置值并进行校验，参见 setValue。
绕过校验，直接设置底层DOM表单项的值。 设置值并进行校验，参见 setValue。
参数:
  • value : Mixed
    需要设置的值
返回值:
  • Mixed
    value 被设置的表单项值
Field
setReadOnly ( Boolean value ) : void
参数:
  • value : Boolean
    True将会阻止用户更改表单项的值并显式隐藏组件。 设置此值为true将会优先于editable和hideTrigger配置项目。 设置此值为false将会服从editable和hideTrigger配置项。 此方法是运行时设置，与配置时设置'readOnly'配置项等价。
返回值:
  • void
TriggerField
setSize ( Mixed width , Mixed height ) : Ext.BoxComponent
设置BoxComponent的宽度和高度。 此方法触发resize事件...
设置BoxComponent的宽度和高度。 此方法触发resize事件。此方法可以接收单独的width或者height值作为参数， 或者你可以传递像这样的一个size对象： {width:10, height:20} 。
参数:
  • width : Mixed
    设置的新的width值。这可以是：
    • 一个Number类型指定Element新的宽度 Ext.Element.defaultUnit(默认为像素 :'px')。
    • 一个String类型用于设置width的CSS样式。
    • 一个size对象格式为 {width: widthValue, height: heightValue} 。
    • 值为 undefined 时，保留原来的width不变。
  • height : Mixed
    设置的新的height值(如果第一个参数传递了一个size对象，此参数没有必要传递)。这可以是：
    • 一个Number类型指定Element新的高度 Ext.Element.defaultUnit(默认为像素 :'px')。
    • 一个String类型用于设置height的CSS样式。也有可能不会被使用到。
    • 值为 undefined 时，保留原来的height不变。
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setValue ( Mixed value ) : Ext.form.Field
向表单项中设置一个数据值并校验之。 如需直接设置值而不进行校验，参见 setRawValue。
向表单项中设置一个数据值并校验之。 如需直接设置值而不进行校验，参见 setRawValue。
参数:
  • value : Mixed
    需要设置的值
返回值:
  • Ext.form.Field
    this
Field
setVisible ( Boolean visible ) : Ext.Component
工具方法，通过使用布尔值隐藏或者显示当前组件。
工具方法，通过使用布尔值隐藏或者显示当前组件。
参数:
  • visible : Boolean
    true时显示，false时隐藏
返回值:
  • Ext.Component
    this
Component
setWidth ( Mixed width ) : Ext.BoxComponent
设置组件的宽度。 此方法触发resize事件。
设置组件的宽度。 此方法触发resize事件。
参数:
  • width : Mixed
    The new width to set.
返回值:
  • Ext.BoxComponent
    this
BoxComponent
show () : Ext.Component
显示当前组件。监听' beforeshow' 事件，返回 false 取消显示组件...
显示当前组件。监听' beforeshow' 事件，返回 false 取消显示组件。在显示组件之后触发' show' 事件。
参数:
  • 无。
返回值:
  • Ext.Component
    this
Component
suspendEvents( Boolean queueSuspended ) : void
暂停触发所有的事件。 (参看resumeEvents)
暂停触发所有的事件。（参看 resumeEvents)
参数:
  • queueSuspended : Boolean
    如果传递为true则排列好暂停的事件使得在调用 resumeEvents 后再触发它们，而不是抛弃所有暂停的事件。
返回值:
  • void
Observable
syncSize () : Ext.BoxComponent
强制组件的大小按照此组件底层元素当前的高度和宽度计算。
强制组件的大小按照此组件底层元素当前的高度和宽度计算。
参数:
  • 无。
返回值:
  • Ext.BoxComponent
    this
BoxComponent
un( String eventName, Function handler, [Object scope] ) : void
删除一个事件处理器(removeListener方法的简写形式)
删除一个事件处理器(removeListener方法的简写形式。)
参数:
  • eventName : String
    处理器关联的事件类型
  • handler : Function
    被删除的处理器 这应该是传入 addListener 中的方法的引用。
  • scope : Object
    （可选）为处理器指定的初始作用域。
返回值:
  • void
Observable
unsetActiveError ( Boolean suppressEvent ) : void
清除activeError并触发'valid'事件。此方法被clearInvalid在内部进行...
清除activeError并触发'valid'事件。此方法被clearInvalid在内部进行调用， 并且一般情况下没有必要手工调用
参数:
  • suppressEvent : Boolean
    True将禁止触发'invalid'事件
返回值:
  • void
Field
update ( Mixed htmlOrData , [ Boolean loadScripts ], [ Function callback ] ) : void
刷新组件的内部区域。
刷新组件的内部区域。
参数:
  • htmlOrData : Mixed
    如果已经通过tpl为当前组件配置了一个模板，那么 将会使用此参数来装配模板。 如果没有为当前组件配置模板，组件的内容区域将会通过Ext.Element 进行刷新。
  • loadScripts : Boolean
    (可选)只用在使用html配置时此参数才合法。默认为false。
  • callback : Function
    (可选)只用在使用html配置时此参数才合法。 当脚本加载完成时回调函数才被执行。
返回值:
  • void
Component
updateBox ( Object box ) : Ext.BoxComponent
设置此组件底层元素的盒子模型尺寸。(译者注：盒子模型是CSS术语，详细资料请自行搜索。)
设置此组件底层元素的盒子模型尺寸。(译者注：盒子模型是CSS术语，详细资料请自行搜索。)
参数:
  • box : Object
    一个格式为{x, y, width, height}的对象
返回值:
  • Ext.BoxComponent
    this
BoxComponent
validate () : Boolean
校验表单项的值
校验表单项的值
参数:
  • 无。
返回值:
  • Boolean
    如果值合法，为true,否则为false
Field
validateValue ( Mixed The ) : Boolean
使用getErrors创建一个校验出错信息数组。 如果发现了任何错误，将会使用第一个错误作为参数...
使用getErrors创建一个校验出错信息数组。 如果发现了任何错误，将会使用第一个错误作为参数调用markInvalid方法并返回 false，否则返回true。以前，要求子类提供此方法的一个实现以处理校验过程--- 从3.2开始，应该用覆盖getErrors方法的方式替代。
参数:
  • The : Mixed
    表单项的当前值
返回值:
  • Boolean
    如果所有校验都通过，此值为true，如果一个或多个校验失败，则为false
Field

公共事件

Event Defined By
added : ( Ext.Component this , Ext.Container ownerCt , number index )
当一个组件被添加到一个Ext.Container时触发
当一个组件被添加到一个Ext.Container时触发
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • ownerCt : Ext.Container
    用于组件的容器
  • index : number
    添加组件的位置
Component
afterrender : ( Ext.Component this )
在组件渲染完成之后触发...

在组件渲染完成之后触发。

afterrender事件在当前组件被rendered 结束之后、在为组件定义的所有afterRender方法执行之后 触发，并且，如果有stateful， 也在状态被保存之后才触发。

监听器将会以如下参数格式被调用:
  • this : Ext.Component
Component
autosize : ( Ext.form.Field this , Number width )
当autoSize 方法被触发时发出此事件。 根据默认的逻辑，表单项可以有也可以实际上没有...
当autoSize 方法被触发时发出此事件。 根据默认的逻辑，表单项可以有也可以实际上没有 改变尺寸，但是此事件提供了一个钩子，如果有需要， 开发者在运行时可以提供额外的逻辑来改变输入栏的大小。
监听器将会以如下的参数格式调用:
  • this : Ext.form.Field
    文本栏
  • width : Number
    表单项新宽度
TextField
beforedestroy : ( Ext.Component this )
在组件 destroyed 之前触发。 在事件监听器中返回false以停止 destroy 操作。
在组件 destroyed 之前触发。 在事件监听器中返回false以停止 destroy 操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforehide : ( Ext.Component this )
在调用hide方法隐藏组件之前触发。 在事件监听器中返回false可以停止隐藏操作。
在调用hide方法隐藏组件之前触发。 在事件监听器中返回false可以停止隐藏操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforerender : ( Ext.Component this )
在组件被rendered 之前触发。 在事件监听器中返回false可以停止render 操作。
在组件被rendered 之前触发。 在事件监听器中返回false可以停止render 操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforeshow : ( Ext.Component this )
在调用show()方法现实组件之前触发。 事件处理函数返回false可以停止show。
在调用show 方法现实组件之前触发。 事件处理函数返回false可以停止show。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforestaterestore : ( Ext.Component this , Object state )
在组件状态恢复之前触发。返回false停止恢复状态操作。
在组件状态恢复之前触发。返回false停止恢复状态操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    StateProvider返回的状态哈希值。 如果没有禁止此事件，那么状态对象会被传递给applyState。 默认情况下，这样简单地把属性值拷贝到当前组件中。 可以覆盖此方法以提供自定的状态恢复操作。
Component
beforestatesave : ( Ext.Component this , Object state )
在组件状态被保存到配置的状态提供者之前触发。 返回false可以停止保存。
在组件状态被保存到配置的状态提供者之前触发。 返回false可以停止保存。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    状态值哈希。 这由在组件上调用getState() 方法决定。 此方法必须由开发者提供，返回是否需要对状态进行描述，默认情况下， Ext.Component有一个空实现。
Component
blur : ( Ext.form.Field this )
当表单项时区输入焦点时触发。
当表单项时区输入焦点时触发。
监听器将会以如下参数被调用:
  • this : Ext.form.Field
Field
change : ( Ext.form.Field this , Mixed newValue , Mixed oldValue )
如果表单项的时发生改变，在表单项刚刚失去焦点时触发。
如果表单项的时发生改变，在表单项刚刚失去焦点时触发。
监听器将会以如下参数格式调用:
  • this : Ext.form.Field
  • newValue : Mixed
    新的值
  • oldValue : Mixed
    原始值
Field
destroy : ( Ext.Component this )
在组件被销毁之后触发。
在组件被destroyed之后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
disable : ( Ext.Component this )
在组件被设置为无效状态后触发。
在组件被设置为无效状态后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
enable : ( Ext.Component this )
当组件被设置为有效(enabled)之后触发。
当组件被设置为有效(enabled)之后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
focus : ( Ext.form.Field this )
当表单项获得输入焦点时触发。
当表单项获得输入焦点时触发。
监听器将会以如下参数格式被调用:
  • this : Ext.form.Field
Field
hide : ( Ext.Component this )
在组件被隐藏之后触发。 当调用hide 方法隐藏组件之后触发。
在组件被隐藏之后触发。 当调用hide 方法隐藏组件之后触发。
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
invalid : ( Ext.form.Field this , String msg )
在表单项被标记为非法之后触发。
在表单项被标记为非法之后触发。
监听器将会以如下参数格式调用:
  • this : Ext.form.Field
  • msg : String
    校验信息
Field
keydown : ( Ext.form.TextField this , Ext.EventObject e )
输入栏的keydown事件。 只有在 enableKeyEvents 被设置为true时才触发此事件。
输入栏的keydown事件。 只有在 enableKeyEvents 被设置为true时才触发此事件。
监听器将会以如下参数格式调用:
  • this : Ext.form.TextField
    文本栏
  • e : Ext.EventObject
TextField
keypress : ( Ext.form.TextField this , Ext.EventObject e )
输入栏的keypress事件。 只有在enableKeyEvents 被设置为true时才触发此事件。
输入栏的keypress事件。 只有在enableKeyEvents 被设置为true时才触发此事件。
Listeners will be called with the following arguments:
  • this : Ext.form.TextField
    文本栏
  • e : Ext.EventObject
TextField
keyup : ( Ext.form.TextField this , Ext.EventObject e )
输入栏keyup事件。 只有在 enableKeyEvents 被设置为true时才触发此事件。
输入栏keyup事件。 只有在 enableKeyEvents 被设置为true时才触发此事件。
监听器将会以如下的参数格式调用:
  • this : Ext.form.TextField
    文本栏
  • e : Ext.EventObject
TextField
move : ( Ext.Component this , Number x , Number y )
在组件移动之后触发。
在组件移动之后触发。
监听器将会用如下的参数格式来调用:
  • this : Ext.Component
  • x : Number
    The new x position
  • y : Number
    The new y position
BoxComponent
removed : ( Ext.Component this , Ext.Container ownerCt )
当一个组件被从Ext.Container容器中删除时触发
当一个组件被从Ext.Container容器中删除时触发
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • ownerCt : Ext.Container
    持有组件的容器
Component
render : ( Ext.Component this )
在组件被渲染之后触发。
在组件被 rendered(渲染) 之后触发。
监听器将以如下的参数格式被调用:
  • this : Ext.Component
Component
resize : ( Ext.Component this , Number adjWidth , Number adjHeight , Number rawWidth , Number rawHeight )
在组件被调整大小之后触发。
在组件被调整大小之后触发。
监听器将以如下的参数格式被调用:
  • this : Ext.Component
  • adjWidth : Number
    这是width调整后的值
  • adjHeight : Number
    这是height调整后的值
  • rawWidth : Number
    这是width原来的值
  • rawHeight : Number
    这是height原来的值
BoxComponent
show : ( Ext.Component this )
在调用show 方法显示组件之后触发。
在调用show 方法显示组件之后触发。
监听器将会用如下的参数格式被调用:
  • this : Ext.Component
Component
specialkey : ( Ext.form.Field this , Ext.EventObject e )
当任何和导航有关的键被按下时触发(上下左右箭头, tab, 回车,esc, 等等) is pressed. 处理其它按键参见...
当任何和导航有关的键被按下时触发(上下左右箭头, tab, 回车,esc, 等等) is pressed. 处理其它按键参见 Ext.Panel.keys或者 Ext.KeyMap。 你可以检测 Ext.EventObject.getKey 以便获知哪个键被按下。例如：
var form = new Ext.form.FormPanel({
    ...
    items: [{
            fieldLabel: 'Field 1',
            name: 'field1',
            allowBlank: false
        },{
            fieldLabel: 'Field 2',
            name: 'field2',
            listeners: {
                specialkey: function(field, e){
                    // e.HOME, e.END, e.PAGE_UP, e.PAGE_DOWN,
                    // e.TAB, e.ESC, arrow keys: e.LEFT, e.RIGHT, e.UP, e.DOWN
                    if (e.getKey() == e.ENTER) {
                        var form = field.ownerCt.getForm();
                        form.submit();
                    }
                }
            }
        }
    ],
    ...
});
监听器将会以如下参数格式被调用:
  • this : Ext.form.Field
  • e : Ext.EventObject
    事件对象
Field
staterestore : ( Ext.Component this , Object state )
组件状态被存储之后触发。
组件状态被存储之后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    StateProvider返回的状态哈希值。 如果没有禁止此事件，那么状态对象会被传递给applyState。 默认情况下，这样简单地把属性值拷贝到当前组件中。 可以覆盖此方法以提供自定的状态恢复操作。
Component
statesave : ( Ext.Component this , Object state )
在组件状态被保存到所配置的状态提供者之后触发。
在组件状态被保存到所配置的状态提供者之后触发。
监听器将会用如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    状态值hash。 这是由在足见上调用getState() 方法决定的。 开发者必须提供此方法以返回是否需要恢复状态，默认情况下， Ext.Component有一个空实现。
Component
valid : ( Ext.form.Field this )
在表单项被校验无错误之后触发。
在表单项被校验无错误之后触发。
监听器将会以如下参数格式被调用:
  • this : Ext.form.Field
Field


Observable
    Component
      BoxComponent
        Field
          TextField
            TriggerField
              TwinTriggerField

Class Ext.form.TwinTriggerField

包: | Ext.form
定义类的文件: | TriggerField.js
类: | TwinTriggerField
继承自: | TriggerField
TwinTriggerField不是一个可以直接使用的公共类。它被设计作为一个抽象基类用来被 实现。例如，实现该类的例子，在这里参见自定义的SearchField实现: http://extjs.com/deploy/ext/examples/form/custom.html

配置项

Config Options Defined By
allowBlank : Boolean
指定为false将会只允许值的长度>0(默认为true)
TextField
allowDomMove : Boolean
在渲染时组件是否可以移动Dom节点(默认为true)。
Component
anchor : String
注: 这个配置只用于该组件被包含在一个已使用AnchorLayout...

注: 这个配置只用于该组件被包含在一个已使用 AnchorLayout (或者其子类)配置的Container时。 基于布局管理器，例如：

  • Ext.form.FormPanel
  • 指定 layout: 'anchor' // or 'form', or 'absolute'

参见 Ext.layout.AnchorLayout. anchor 。

BoxComponent
applyTo : Mixed
指定一个元素的id、一个DOM元素或者一个已经存在并被渲染到DIV中的元素，此DIV已经被...

指定一个元素的id、一个DOM元素或者一个已经存在并被渲染到DIV中的元素，此DIV已经被 渲染到document中，并且为当前组件指定了一些结构化的标签。

  • 描述 :
      当使用了 applyTo， 在主元素中也可以用id或者CSS类名来指定组件的托管部分， 并且，如果可以的话，创建的组件可能也会试图在那个标签中创建它的子组件。
  • 注意 :
      当使用此配置项时，无需调用render()方法。
      如果指定了applyTo属性，任何传递给 renderTo 的值都会被忽略，并且目标元素的父节点将会自动被用作组件的容器。
Component
autoCreate : String/Object
一个DomHelper 元素描述，或者为true使用一个默认元素描述。 用来创建封装当前组件的...

一个DomHelper 元素描述，或者为true使用一个默认元素描述。 用来创建封装当前组件的 Element。 细节参见 autoEl 。 默认为:

                                {tag: 'input', type: 'text', size: '20', autocomplete: 'off'}
TriggerField
autoEl : Mixed
一个表签名或者一个 DomHelper 描述，用来创建 Element ，它将封装当前组件...

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

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

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

{
    xtype: 'box',
    autoEl: {
        tag: 'img',
        src: 'http://www.example.com/example.jpg'

    }
}, {
    xtype: 'box',
    autoEl: {
        tag: 'blockquote',
        html: 'autoEl is cool!'
    }
}, {
    xtype: 'container',
    autoEl: 'ul',
    cls: 'ux-unordered-list',
    items: {
        xtype: 'box',
        autoEl: 'li',
        html: 'First list item'
    }
}
Component
autoHeight : Boolean
如果值为true，height配置项为'auto'，否则值为false的话使用固定的高度...

如果值为true，height配置项为'auto'，否则值为false的话使用固定的高度， 或者可以由其父类容器 layout manager来控制。(默认值为 false)。

注: 虽然很多组件继承了这个配置选项，但不是所有这些组件的自适应高度配置都会像期望的那样起作用。 设置autoHeight：值为true时，浏览器将根据元素的内容自动设置高度，这将意味着Ext不会去管理高度。

如果是由浏览器来管理高度，需要注意的是，通过浏览器进行调整的结构组件内不能被发现， 因此宽度的变化可能导致需要进行同步处理元素的高度。 例如：

var w = new Ext.Window({
    title: 'Window',
    width: 600,
    autoHeight: true,
    items: {
        title: 'Collapse Me',
        height: 400,
        collapsible: true,
        border: false,
        listeners: {
            beforecollapse: function() {
                w.el.shadow.hide();
            },
            beforeexpand: function() {
                w.el.shadow.hide();
            },
            collapse: function() {
                w.syncShadow();
            },
            expand: function() {
                w.syncShadow();
            }
        }
    }
}).show();
BoxComponent
autoScroll : Boolean
如果值为true，将会在该元素上使用overflow:'auto'配置，并且在必要的时候...
如果值为true，将会在该元素上使用overflow:'auto'配置，并且在必要的时候自动显示滚动条，否则，溢出部分的组件都会被切除(默认值为 false)。
BoxComponent
autoShow : Boolean
如果组件需要检测隐藏CSS属性(如 'x-hidden' 或者 'x-hide-display')并且在渲染时删除...
如果组件需要检测隐藏CSS属性(如 'x-hidden' 或者 'x-hide-display')并且在渲染时删除它们 (默认为false)，设置此值为true。
Component
autoWidth : Boolean
如果为true，使用width:'auto'配置，否则使用固定的宽度...

如果为true，使用width:'auto'配置，否则使用固定的宽度，或者可以由其父类容器的layout manager来控制。(默认值为 false)。

注: 虽然很多组件继承了这个配置选项，但不是所有这些组件的自适应宽度配置都会像期望的那样起作用。 设置autoWidth：值为true时，浏览器将根据元素的内容自动设置宽度，这将意味着Ext不会去管理宽度。

如果是由浏览器来管理宽度，需要注意的是，通过浏览器进行调整的结构组件内不能被发现，因此宽度的变化可能导致需要进行同步处理元素的宽度。 例如，在这个元素的目标是：

<div id='grid-container' style='margin-left:25%;width:50%'></div>
当浏览器窗口改变时，渲染后的Panel必须监听浏览器窗口大小的变化，以便通知子项，浏览器改变了其宽度：

var myPanel = new Ext.Panel({
    renderTo: 'grid-container',
    monitorResize: true, // relay on browser resize
    title: 'Panel',
    height: 400,
    autoWidth: true,
    layout: 'hbox',
    layoutConfig: {
        align: 'stretch'
    },
    defaults: {
        flex: 1
    },
    items: [{
        title: 'Box 1',
    }, {
        title: 'Box 2'
    }, {
        title: 'Box 3'
    }],
});
BoxComponent
blankText : String
如果 allowBlank 校验失败时需要显示的出错信息(默认为'This field is required')
TextField
boxMaxHeight : Number
设置组件的最大高度值...

设置组件的最大高度值。

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

BoxComponent
boxMaxWidth : Number
设置组件的最大宽度值...

设置组件的最大宽度值。

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

BoxComponent
boxMinHeight : Number
设置组件的最小高度值...

设置组件的最小高度值。

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

BoxComponent
boxMinWidth : Number
设置组件的最小宽度值...

设置组件的最小宽度值。

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

BoxComponent
bubbleEvents : Array
一个事件数组，当这些事件被触发时，将会被冒泡到所有父容器中。参见....

一个事件数组，当这些事件被触发时，将会被冒泡到所有父容器中。参见 Ext.util.Observable.enableBubble。 默认为 []。

Component
clearCls : String
应用到特殊的clearing div的CSS类， 这个clearing div直接渲染到每个form field的包装器后面...

应用到特殊的clearing div的CSS类， 这个clearing div直接渲染到每个form field的包装器后面，以提供 清除field的功能(默认为 'x-form-clear-left')。

注意: 只有在当前组件被渲染到一个使用FormLayout 布局(例如 Ext.form.FormPanel 或者指定 layout:'form')的 容器中、或者是指定了一个fieldLabel 、或者指定isFormField=true 时此配置才有效。

另请参见 Ext.layout.FormLayout. fieldTpl。

Component
cls : String
一个可选的额外CSS类，它将被添加到当前组件的元素上(默认为'')...
一个可选的额外CSS类，它将被添加到当前组件的元素上(默认为'')。 此属性对于在组件上，或者它的任何使用标准CSS规则的孩子节点上， 添加定制的样式非常有用。
Field
contentEl : String
(可选)指定一个已存在的HTML元素，或者一个已存在HTML元素的...

(可选)指定一个已存在的HTML元素，或者一个已存在HTML元素的 id ，它们将被用作当前组件的内容。

  • 描述 :
    此配置选项被用来将一个已存在的HTML元素 插入到一个新组件(在组件渲染之后它简单地移动DOM元素) 的layout元素中，使它成为该组件的内容。
  • 注意 :
    指定的HTML元素将被append到组件的layout元素中， 在所有配置的 HTML 被插入之后， 并且，这样的话，在render事件 被触发时，document中将不再包含此元素。
    指定的HTML元素将不会参与组件所有可能使用的 layout 过程(译者注：指这些HTML元素 不会参与布局操作)。 它仅是HTML而已。布局操作实在孩子 items 上进行的。
    添加 x-hidden 或者 x-hide-display CSS类，以防在内容渲染到panel时发生闪烁。
Component
ctCls : String
一个可选的外部CSS样式，添加到这个组件的容器(默认值为 '')。 这个方法对于使用标准的CSS规则...

一个可选的外部CSS样式，添加到这个组件的容器(默认值为 '')。 这个方法对于使用标准的CSS规则，为组件或它的任何一个子组件添加特定的样式非常有用。 参见 Ext.layout.ContainerLayout和 extraCls 。

注意: ctCls 默认为 ''期望如下的类，它们将指定一个默认值:

  • Box Layout : 'x-box-layout-ct'
使用一个额外的CSS类配置以上的Class，它是append到默认对象上的。例如， 对于BoxLayout (Hbox and Vbox):
                                ctCls: 'x-box-layout-ct custom-class'

Component
data : Mixed
初始化数据集，它将被应用到 tpl 上以刷新组件的内容区域。
Component
disableKeyFilter : Boolean
指定为true将会禁用按键过滤(默认为false)
TextField
disabled : Boolean
当前组件处于无效状态时为true。 Read-only.
Field
disabledClass : String
当组件处于无效状态时添加到组件上的CSS类(默认为 'x-item-disabled')。
Component
editable : Boolean
false将阻止用户直接向表单项中输入文本，表单项将仅仅响应...
false将阻止用户直接向表单项中输入文本，表单项将仅仅响应 在触发按钮上进行鼠标点击然后设置值。(默认为true)。
TriggerField
emptyClass : String
应用到空表单项的CSS类，以便样式化 emptyText (默认为'x-form-empty-field')。...
应用到空表单项的CSS类，以便样式化 emptyText (默认为'x-form-empty-field')。 根据表单项当前值，此样式按需要被自动添加和删除。
TextField
emptyText : String
放置到空表单项中的默认文本(默认为null)。 注意:...
放置到空表单项中的默认文本(默认为null)。 注意: 如果当前表单栏处于有效状态并且被配置了一个名称，那么此值会被 提交到服务器。
TextField
enableKeyEvents : Boolean
true将为HTML输入栏启用按键事件代理 (默认为false)。
TextField
fieldClass : String
表单项的默认CSS类(默认为'x-form-field')
Field
fieldLabel : String
紧靠此field显示的标签文本(默认值为 '')。注意...

紧靠此field显示的标签文本(默认值为 '')。

注意:只有在当前组件被渲染到一个使用FormLayout 的容器中时，此配置才有效。 (例如 Ext.form.FormPanel 或 指定 layout:'form')。

另请参见 hideLabel 、 Ext.layout.FormLayout和 fieldTpl。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Name'
    }]
});
Component
flex : Number
注: 这个配置只用于该组件被包含在一个已使用BoxLayout配置的Container中时...

注: 这个配置只用于该组件被包含在一个已使用BoxLayout配置的Container中时。通过计算每一个子组件的flex值所占全部flex值之和的比例，来决定子组件的宽(HBoxLayout)高(VBoxlayout)。 任何子项的 flex = 0 或 flex = undefined 将不被设置(初始值大小将不被改变)。

BoxComponent
focusClass : String
当表单项获得焦点时使用的CSS类(默认为 'x-form-focus')
Field
grow : Boolean
true 如果此表单项需要自动增长、收缩到它的内容长度(默认为false)
TextField
growMax : Number
当 grow = true 时允许的最大宽度(默认为800)
TextField
growMin : Number
当 grow = true 时允许的最小宽度 (默认为30)
TextField
height : Number
组件的高度(默认值为 auto)。注:如果想使用百分比的方式...
组件的高度(默认值为 auto)。注:如果想使用百分比的方式来设置值，请查看 Ext.Component.anchor。
BoxComponent
hidden : Boolean
如果当前组件处于隐藏状态，此值为true。Read-only。
Component
hideLabel : Boolean
true时完全隐藏label元素 ( label 和 separator)。 默认为 false。 默认情况下，即使你不指定...

true时完全隐藏label元素 ( label 和 separator)。 默认为 false。 默认情况下，即使你不指定 fieldLabel 它的空间仍然会被保留，这样这块区域会与其它确实拥有label的区域位于同一排。 讲此值设置为 true 将导致此区域不再保留此空间。

注意: 参见 clearCls 的注释。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield'
        hideLabel: true
    }]
});
Component
hideMode : String
组件如何隐藏，支持的值有： 'visibility' (css visibility), 'offsets' (位置偏移量为负值) 和...

组件如何隐藏，支持的值有： 'visibility' (css visibility), 'offsets' (位置偏移量为负值) 和 'display' (css display).

注意:一般首选默认值 'display'，因为当组件第一次显示的时候它们会自动进行布局 (隐藏的时候不会调整尺寸)。

Component
hideParent : Boolean
此值为true时，当调用hide/show方法时，将会hide和show组件的容器...
此值为true时，当调用hide/show方法时，将会hide和show组件的容器；false时将会 hide和show组件自身(默认为false)。例如，这可以用作window上隐藏按钮的一种 快捷操作，通过设置此按钮的hideParent:true，然后把它添加到window上。
Component
superceed hideTrigger : Boolean
true 将会隐藏触发元素并且仅仅显示基本文本项(默认为false)
TriggerField
html : String/Object
一个HTML片段，或者一个 DomHelper 描述，用作layout元素的内容(默认为'')。...
一个HTML片段，或者一个 DomHelper 描述，用作layout元素的内容(默认为'')。 这个HTML内容在组件渲染之后才被添加，所以在 render 出发的时候，document中尚未包含此HTML。 但是这个内容将会在所有配置的 contentEl 之前被插入到body标签中。
Component
id : String
当前组件唯一的id(默认为auto-assigned id)...

当前组件唯一的id(默认为auto-assigned id)。 如果你需要在以后访问组件，而又没有一个有效的组件对象引用，那么你需要指定一个 id( 也就是，使用Ext. getCmp方法 )。

注意，此id也将被用作组件底层HTML标签的id，这些标签被渲染到页面中。 这将允许你编写基于id的CSS规则，以独立地描述指定的实例；并且，也可以通过 组件父标签的id选中子元素。

注意:为了避免与唯一的id 产生重复， 请参见 itemId 和 ref 。

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

Component
inputType : String
输入栏的类型属性---例如radio,text,password,file(默认为'text')。...
输入栏的类型属性---例如radio,text,password,file(默认为'text')。 'file'和'password'类型通常必须用来渲染那些没有独立Ext组件的表单项类型。 注意，如果你使用inputType:'file'， 那么将不再支持 emptyText 并且应该避免使用。
Field
invalidClass : String
当把表单项标记为非法时所使用的CSS类(默认为'x-form-invalid')
Field
invalidText : String
当把一个表单项标记为非法状态并且没有提供消息时所使用的出错文本...
当把一个表单项标记为非法状态并且没有提供消息时所使用的出错文本 (默认为'The value in this field is invalid')
Field
itemCls : String
注意: 只有在当前组件被渲染到一个使用FormLayout 布局的 容器中时此配置才有效...

注意: 只有在当前组件被渲染到一个使用FormLayout 布局的 容器中时此配置才有效。 (例如Ext.form.FormPanel 或者指定 layout:'form')。

一个附加的CSS类，应用到div上，包装当前field的表单元素。 如果提供了此参数， field级上的itemCls将会覆盖 container级上提供的 默认itemCls。 为itemCls指定的值将会被添加默认的 类('x-form-item')。

既然它被应用到项目的包装器上(参见 Ext.layout.FormLayout。 fieldTpl)， 它将允许你编写能应用到此field、label(如果有指定)、或者field内部任何其它元素的标准CSS规则。

注意: 参考 fieldLabel的注释。 .

示例用法:

// Apply a style to the field's label:
<style>
    .required .x-form-item-label {font-weight:bold;color:red;}
</style>

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Name',
        itemCls: 'required' //this label will be styled
    },{
        xtype: 'textfield',
        fieldLabel: 'Favorite Color'
    }]
});
Component
itemId : String
当没有可利用的对象引用时，itemId可以作为第二选择，用来获得一个组件的引用， 代替 ...

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

var c = new Ext.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'); // 与 Ext.getCmp()不同

p2 = p1.ownerCt.getComponent('p2'); // 通过兄弟对象获得引用

另请参见 id 和 ref 。

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

Component
labelSeparator : String
每个fieldLabel 文本后面现实的分隔符。 此属性可以在多个层次上进行配置...

每个fieldLabel 文本后面现实的分隔符。 此属性可以在多个层次上进行配置。优先顺序为：

  • field / component level
  • container level
  • layout level (默认为冒号 ':')
如不需要为当前field的label显示分隔符，指定一个空字符串''即可。

注意:参见 clearCls 的注释。

另请参见 hideLabel 和 Ext.layout.FormLayout。 fieldTpl。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    layoutConfig: {
        labelSeparator: '~'   // layout config has lowest priority (defaults to ':')
    },
    labelSeparator: '>>',     // config at container level
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Field 1',
        labelSeparator: '...' // field/component level config supersedes others
    },{
        xtype: 'textfield',
        fieldLabel: 'Field 2' // labelSeparator will be '='

    }]
});
Component
labelStyle : String
一个CSS样式描述字符串，它将直接应用到当前field的label上...

一个CSS样式描述字符串，它将直接应用到当前field的label上。 如果有设置，默认为容器的labelStyle值(例如 Ext.layout.FormLayout.labelStyle , 或者 '')。

注意:参见 clearCls 的注释。

另请参见 hideLabel 和 Ext.layout.FormLayout. fieldTpl。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Name',
        labelStyle: 'font-weight:bold;'
    }]
});
Component
listeners : Object
一个包含一个或多个事件处理器的配置对象，会在初始化的时候被添加到目标对象上...

一个包含一个或多个事件处理器的配置对象，会在初始化的时候被添加到目标对象上。 该配置对象应该是一个有效的监听器配置对象就像 addListener例子中指定的一样可一次附加多个处理器。

ExtJs Components上的DOM事件

一些 ExtJs Component 类导出时会选择一些DOM事件(例如 "click", "mouseover" 等等), 这通常只是在有额外的值可以被添加时发生。例如DataView类的 click事件会传递被点击的节点。也可以直接在Component的HTMLElementevent上访问DOM事件，但必需在Component被渲染后监听器才能添加到Element 上。可以按照以下步骤添加插件:

// 插件会用一个监听器配置对象进行配置。
//该组件会被添加到所有处理方法的参数列表上。
Ext.DomObserver = Ext.extend(Object, {
    constructor: function(config) {
        this.listeners = config.listeners ? config.listeners : config;
    },

    // 组件将自己传递进了插件的初始化方法里
    init: function(c) {
        var p, l = this.listeners;
        for (p in l) {
            if (Ext.isFunction(l[p])) {
                l[p] = this.createHandler(l[p], c);
            } else {
                l[p].fn = this.createHandler(l[p].fn, c);
            }
        }

        // 渲染后立即添加监听器到元素上
        c.render = c.render.createSequence(function() {
            var e = c.getEl();
            if (e) {
                e.on(l);
            }
        });
    },

    createHandler: function(fn, c) {
        return function(e) {
            fn.call(this, e, c);
        };
    }
});

var combo = new Ext.form.ComboBox({

    // 元素被点击后折叠
    plugins: [ new Ext.DomObserver({
        click: function(evt, comp) {
            comp.collapse();
        }
    })],
    store: myStore,
    typeAhead: true,
    mode: 'local',
    triggerAction: 'all'
});

Observable
margins : Object
注:此配置只用于该组件展现在一个使用BorderLayout...

注:此配置只用于该组件展现在一个使用BorderLayout 或 BoxLayout的两个子类之一作为布局的容器。

这个margins对象在该组件中的格式为：

{top: (top margin),right: (right margin),bottom: (bottom margin),left: (left margin)}

也可以是一个字符串，中间用空格分隔，margin值为数字。 把matches中每一个值的次序跟CSS中margin值的排列方式相对应：

  • 如果只有一个值，它适用于所有方面。
  • 如果有两个值，top和bottom的边框设置为第一个值，left和right设置为第二个值。
  • 如果有三个值，top设置为第一个值，left和right设置为第二个值，bottom设置为第三个值。
  • 如果有四个值，分别设置为top, right, bottom, left。

默认值:

{top:0, right:0, bottom:0, left:0}
BoxComponent
maskRe : RegExp
一个输入掩码正则表达式，用来过滤不匹配的按键(默认为null)
TextField
maxLength : Number
校验时表单项允许的最大输入长度(默认为Number.MAX_VALUE)。 通过改善可用性允许粘贴、编辑、重做和回退...
校验时表单项允许的最大输入长度(默认为Number.MAX_VALUE)。 通过改善可用性允许粘贴、编辑、重做和回退， 此行为被设计用来为用户提供即时的反馈。 如需限定表单项中可以输入字符的最大长度， 可以使用autoCreate 向一个表单项添加任何你想要的属性，例如:
var myField = new Ext.form.NumberField({
    id: 'mobile',
    anchor:'90%',
    fieldLabel: 'Mobile',
    maxLength: 16, // for validation
    autoCreate: {tag: 'input', type: 'text', size: '20', autocomplete: 'off', maxlength: '10'}
});
TextField
maxLengthText : String
如果maximum length 校验失败时显示的出错文本...
如果maximum length 校验失败时显示的出错文本 (默认为 'The maximum length for this field is {maxLength}')
TextField
minLength : Number
输入栏必须的最小长度(默认为0)
TextField
minLengthText : String
如果 最小长度 校验失败时显示的出错文本 (默认为...
如果 最小长度 校验失败时显示的出错文本 (默认为 'The minimum length for this field is {minLength}') 。
TextField
msgFx : String
实验性参数 当在表单项下显示校验消息时使用的效果(默认为'normal')。
Field
msgTarget : String
通过markInvalid 设置的消息文本应该显示的位置。 必须是如下值之一：...

通过markInvalid 设置的消息文本应该显示的位置。 必须是如下值之一：

  • qtip 当用户鼠标滑过表单项时，显示一个包含消息的快速提示。 这是默认情况。
    为了使此参数能工作，必须调用 Ext.QuickTips.init。
  • title 在弹出的默认浏览器标题属性上显示消息。
  • under 在表单项之下添加一块div，包含出错消息。
  • side 在表单项右边添加一个出错图标，当鼠标滑过时弹出并显示一个消息。
  • [element id] 在指定元素的innerHTML中直接添加出错消息。
Field
name : String
表单项的HTML name属性(默认为'')。 注意: 如果需要当前表单项自动被包含在...
表单项的HTML name属性(默认为'')。 注意: 如果需要当前表单项自动被包含在 form submit()中，必须设置此参数。
Field
overCls : String
一个可选的额外的CSS类，它将在鼠标移过元素时被添加到组件上...
一个可选的额外的CSS类，它将在鼠标移过元素时被添加到组件上，鼠标移出时 删除。(默认为'')。此属性对于在组件上，或者它的任何使用标准CSS规则的孩子节点上， 添加定制的'active' 或者 'hover'样式非常有用。
Component
pageX : Number
如果该组件被包含在一个指定位置的容器中，这个值表示页面级的x坐标值（译者注：在有滚动条的情况下这个值很有用）。
BoxComponent
pageY : Number
如果该组件被包含在一个指定位置的容器中，这个值表示页面级的y坐标值（译者注：在有滚动条的情况下这个值很有用）。
BoxComponent
plugins : Object/Array
一个对象或者一个对象数组，为组件提供特殊的功能 ...
一个对象或者一个对象数组，为组件提供特殊的功能。 对一个合法的插件唯一的要求是它含有一个init()方法， 能接收一个Ext.Component型的参数。 当组件被创建时，如果有可用的插件，组件将会调用每个插件的init方法， 并将自身的引用作为方法参数传递给它。然后，每个插件就可以调用方法或者响应组件上的事件， 就像需要的那样提供自己的功能。
Component
preventMark : Boolean
true将会禁止 把表单项标记为非法。默认为false.
Field
ptype : String
需要创建配置的ptype。 当传递一个配置对象给构造函数时...
需要创建配置的ptype。 当传递一个配置对象给构造函数时，此配置选项不会被使用。 只有在使用懒初始化的时候此配置项才会被使用， 此时Plugin不是 通过一个完整的实例组件，而是通过一个Component配置指定的。 在渲染时，将会查找ptype以决定创建何种类型的Plugin。

如果你创建自己的Plugin，你可以通过 Ext.ComponentMgr.registerPlugin 对它们进行注册，以便能利用懒初始化和渲染机制。
Component
readOnly : Boolean
将会把表单项标记为在HTML中只读(readOnly)(默认为false)...
true 将会把表单项标记为在HTML中只读(readOnly)(默认为false)。

Note: 这仅仅设置元素的readOnly DOM参数。 例如，设置 readOnly=true ，将不会禁用触发ComboBox或者DateField； 这为你提供了一个选项，可以强制用户通过触发按钮选择一个值，而不是 在文本框进行输入。 使用 hideTrigger 可以隐藏触发按钮。

TriggerField
ref : String
一个路径描述，与组件的 ownerCt 相关，它描述了把当前组件的命名引用放置到哪个父容器中去。...

一个路径描述，与组件的 ownerCt 相关，它描述了把当前组件的命名引用放置到哪个父容器中去。

祖先的坐标路径可以通过'/'字符进行分隔。 例如，将一个Toolbar Button的引用放入 拥有此Toolbar的Panel中:

var myGrid = new Ext.grid.EditorGridPanel({
    title: 'My EditorGridPanel',
    store: myStore,
    colModel: myColModel,
    tbar: [{
        text: 'Save',
        handler: saveChanges,
        disabled: true,
        ref: '../saveButton'
    }],
    listeners: {
        afteredit: function() {
//          The button reference is in the GridPanel
            myGrid.saveButton.enable();
        }
    }
});

在上面的代码中，如果 ref 是 'saveButton' ，那么引用将会被放置到Toolbar中。 ref 中的每个'/' 都会从组件的 ownerCt 向上移动一级。

另请参见 added 和 removed 事件。

Component
regex : RegExp
在校验时，需要在表单项值纸上进行测试的JavaScript RegExp对象(默认为 null)。 如果测试失败，表单项将会使用...
在校验时，需要在表单项值纸上进行测试的JavaScript RegExp对象(默认为 null)。 如果测试失败，表单项将会使用 regexText 进行标记。
TextField
regexText : String
当使用regex 并且校验测试失败时显示的出错文本(默认为'')
TextField
region : String
注: 此配置只用于该组件展现在一个布局为BorderLayout的容器中...

注: 此配置只用于该组件展现在一个布局为BorderLayout的容器中(例如指定layout:'border')。

详见Ext.layout.BorderLayout。

BoxComponent
renderTo : Mixed
该值可以是一个节点的id、一个DOM节点或者一个已存在的元素...

该值可以是一个节点的id、一个DOM节点或者一个已存在的元素， 组件将会被渲染到其中。

  • 注意 :
      如果组件不是一个Container 的子项目时， 不要使用此选项。 渲染和管理它的子项目是一个Container 的layout manager的责任。
      当使用此配置项时，无需调用render()方法。

另请参见 render 。

Component
selectOnFocus : Boolean
true当表单项获得输入焦点时，将会自动选中所有存在的表单项文本 (默认为false)
TextField
stateEvents : Array
一个事件数组，当它们被触发时，组件需要保存自己的状态(默认值为 none)...

一个事件数组，当它们被触发时，组件需要保存自己的状态(默认值为 none)。 它们可以是任何该组件支持的事件类型，包括浏览器事件和 自定义事件(例如['click', 'customerchange'])。

对于保存和恢复组件状态的详细解释，参见 stateful

Component
stateId : String
为该组件指定的唯一的id值，它被用作管理组件状态的目的...
为该组件指定的唯一的id值，它被用作管理组件状态的目的。 (如果设定了id，默认值为组件自己的id，否则，如果组件使用自动生成的id，此值为null)。

对于保存和反解析组件状态的解释，参见 stateful 。

Component
stateful : Boolean
一个标志参数，它将引起组件在启动时尝试从一个保存的状态中恢复内部状态参数...

一个标志参数，它将引起组件在启动时尝试从一个保存的状态中恢复内部状态参数。 组件必须要么拥有一个 stateId 或者 id ，它们被分配给需要被管理的状态属性。 在跨页面加载时，不保证自动生成的id属性的稳定性， 并且，不能依赖此id来保存和恢复一个组件的相同状态。

为了保存状态的操作能够工作，状态管理器的提供者必须 被设置成一个Ext.state.Provider 的实现类，它覆盖了set 和get 方法，以便保存和恢复name/value对。 有一个内置的Ext.state.CookieProvider 可用。

为当前页面设置状态提供者:

Ext.state.Manager.setProvider(new Ext.state.CookieProvider({
    expires: new Date(new Date().getTime()+(1000*60*60*24*7)), //7 days from now
}));

当 stateEvents 配置项中其中之一的事件被触发时， 一个状态可保存的组件将试图保存其状态。

保存状态时，一个可保存状态的组件首先需要通过调用 getState 方法来序列化它的状态。 默认情况下，此函数什么事都不做。 开发者必须提供一个实现，返回一个hash对象，它描述了组件可恢复的状态。

getState方法产生的值将会传递给 Ext.state.Manager.set 方法，它使用配置的 Ext.state.Provider 来保存对象，以组件的 stateId 为key，或者，如果此值（指stateId）没有指定时， 使用它的 id 作为key。

在进行构造时，一个可保存状态的组件试图通过调用 Ext.state.Manager.get方法来 恢复它的状态，传递 stateId 或者，如果此值（指stateId）没有指定时， 使用它的 id 作为参数。

结果对象被传递给 applyState 。 applyState 的默认实现只是简单地把属性拷贝到对象中， 但是开发者可以覆盖此方法以支持更多行为。

通过向 beforestaterestore, staterestore, beforestatesave 和 statesave 事件上绑定监听器，你可以在保存和恢复状态时进行额外的处理。

Component
stripCharsRe : RegExp
一个JavaScript RegExp对象，用来在校验之前从值中剥离不想要的内容(默认为 null)。
TextField
style : String
被添加到组件元素的特定样式。 必须是按照...
被添加到组件元素的特定样式。 必须是按照 Ext.Element.applyStyles 类指定格式的合法参数值。

new Ext.Panel({
    title: 'Some Title',
    renderTo: Ext.getBody(),
    width: 400, height: 300,
    layout: 'form',
    items: [{
        xtype: 'textarea',
        style: {
            width: '95%',
            marginBottom: '10px'
        }
    },
        new Ext.Button({
            text: 'Send',
            minWidth: '100',
            style: {
                marginBottom: '10px'
            }
        })
    ]
});
Component
submitValue : Boolean
False将会清除表单项的name属性，这样在提交表单时它将不会被提交。 默认为true。
Field
tabIndex : Number
该表单项的tabIndex。 注意，此属性仅仅应用到被渲染好的，而不是那些通过applyTo...
该表单项的tabIndex。 注意，此属性仅仅应用到被渲染好的，而不是那些通过applyTo创建的表单项 (默认为undefined)。
Field
tabTip : String
注: 这个配置只用于当该组件作为TabPanel的一个子项目时使用...

注: 这个配置只用于当该组件作为TabPanel的一个子项目时使用。

一个String类型的innerHTML(支持html标签)，当鼠标放在该选项上的时，显示一个tooltip。为了tips能够被渲染，Ext.QuickTips.init()必须被提前调用。
BoxComponent
tpl : Mixed
一个 Ext.Template , Ext.XTemplate 或者一个用来形成一个Ext.XTemplate的字符串数组...
一个 Ext.Template , Ext.XTemplate 或者一个用来形成一个Ext.XTemplate的字符串数组。 与 data 和 tplWriteMode 配置项协同使用。
Component
tplWriteMode : String
刷新组件的内容区域时使用的Ext.(X)Template方式。 默认为'overwrite' (参见 Ext.XTemplate.overwrite )。
刷新组件的内容区域时使用的Ext.(X)Template方式。 默认为'overwrite' (参见 Ext.XTemplate.overwrite )。
Component
trigger1Class : String
一个额外的CSS类，用来定义触发按钮样式。 默认情况下，触发按钮将总是获得'x-form-trigger'类...
一个额外的CSS类，用来定义触发按钮样式。 默认情况下，触发按钮将总是获得'x-form-trigger'类， 并且，如果指定triggerClass，它将会被appended。
TwinTriggerField
trigger2Class : String
一个额外的CSS类，用来定义触发按钮样式。 默认情况下，触发按钮将总是获得'x-form-trigger'类...
一个额外的CSS类，用来定义触发按钮样式。 默认情况下，触发按钮将总是获得'x-form-trigger'类， 并且，如果指定triggerClass，它将会被appended。
TwinTriggerField
triggerClass : String
用来设置触发按钮的传统CSS类。 默认情况下，触发器总是获得'x-form-trigger' 类...
用来设置触发按钮的传统CSS类。 默认情况下，触发器总是获得'x-form-trigger' 类 并且如果指定，triggerClass将会被appended。
TriggerField
triggerConfig : Mixed
一个DomHelper 配置对象，指定了此表单项触发按钮元素的结构。...

一个DomHelper 配置对象，指定了此表单项触发按钮元素的结构。 (可选)。

当你需要一个自定义的元素用来容纳此表单项的两个触发按钮元素时，指定此配置项。 每个触发按钮元素都必须被CSS类x-form-trigger标记 (另请参见 trigger1Class 和 trigger2Class )。

注意，当使用此选项时，保证触发按钮正确的尺寸、位置和外观是开发者的责任。

TwinTriggerField
validateOnBlur : Boolean
在表单项失去焦点时是否进行校验(默认为 true)。
Field
validationDelay : Number
在用户开始输入到校验操作开始之间的时长毫秒数 (默认为250)
Field
validationEvent : String/Boolean
引发表单项进行校验操作的事件。 设置为false可以禁用自动校验 (默认为'keyup')。
引发表单项进行校验操作的事件。 设置为false可以禁用自动校验 (默认为'keyup')。
Field
validator : Function
一个自定义的校验方法，在校验表单项时调用( validateValue) (默认为...

一个自定义的校验方法，在校验表单项时调用( validateValue) (默认为 null)。 如果指定，此函数会被第一个调用，允许开发者覆盖默认的校验过程。

此方法会被传入以下参数:

  • value : Mixed
    表单项的当前值

此方法将会返回:

  • true : Boolean
    true 如果值合法
  • msg : String
    如果值是非法时的出错信息
TextField
value : Mixed
当前表单项的初始化值(默认为undefined).
Field
vtype : String
一个校验类型名，在Ext.form.VTypes 中定义(默认为null)
TextField
vtypeText : String
一个自定义的出错消息，用来替代为当前表单项所设置的...
一个自定义的出错消息，用来替代为当前表单项所设置的 vtype 所提供的默认消息(默认为'')。 注意: 只有设置了 vtype 时才应用此项，否则忽略。
TextField
width : Number
组件的宽度(默认值为 auto)。注:如果想使用百分比的方式...
组件的宽度(默认值为 auto)。注:如果想使用百分比的方式来设置值，请查看 Ext.Component.anchor。
BoxComponent
wrapFocusClass : String
天骄到触发元素包装器上的(CSS)类， 默认为x-trigger-wrap-focus。
TriggerField
x : Number
如果被包含在一个指定位置的容器中，这个值表示x(left)坐标值。
BoxComponent
xtype : String
需要创建配置的xtype。 当传递一个配置对象给构造函数时...
需要创建配置的xtype。 当传递一个配置对象给构造函数时，此配置选项不会被使用。 只有在使用懒初始化的时候此配置项才会被使用，此时容器的子项目不是 通过一个完整的实例组件，而是通过一个Component配置指定的。 在渲染时，将会查找xtype以决定创建何种类型的子组件。

预定义的xtype列表如下： here。

如果你继承Component创建你自己的组件，你需要使用Ext.ComponentMgr.registerType 对它们进行注册，以便利用懒初始化和渲染机制。
Component
y : Number
如果被包含在一个指定位置的容器中，这个值表示y(top)坐标值。
BoxComponent

公共属性

Property Defined By
disabled : Boolean
当前组件处于无效状态时为true。 Read-only.
Component
el : Ext.Element
封装了当前组件的Ext.Element。 Read-only。通常情况下，这将是一个<DIV>元素，它由此类的...

封装了当前组件的Ext.Element。 Read-only。

通常情况下，这将是一个<DIV>元素，它由此类的 onRender方法创建，但是它可以通过使用 autoEl 配置项进行覆盖。

注意: 直到组件渲染完成此元素都将处于无效状态。

如需向当前组件的 DOM事件(而不是当前组件自己的Observable事件)添加监听器， 更多建议，参见 listeners 配置项，或者直接使用一个render监听器:

new Ext.Panel({
    title: 'The Clickable Panel',
    listeners: {
        render: function(p) {
            // Append the Panel to the click handler's argument list.
            p.getEl().on('click', handlePanelClick.createDelegate(null, [p], true));
        },
        single: true  // Remove the listener after first invocation
    }
});

另请参见 getEl

Component
hidden : Boolean
如果当前组件处于隐藏状态，此值为true。Read-only。
Component
initialConfig : Object
当前组件的初始化配置描述。 Read-only。
Component
label : Ext.Element
关联到当前表单项的label元素。 只有在当前表单项已经被一个Ext.layout.FormLayout ...

关联到当前表单项的label元素。 只有在当前表单项已经被一个Ext.layout.FormLayout 布局管理器渲染之后才可用。

Field
originalValue : mixed
表单项原来的值，它是在value 中配置的；或者，如果 trackResetOnLoad 设置为...
表单项原来的值，它是在value 中配置的；或者，如果 trackResetOnLoad 设置为 true 时，通过表单加载操作最后一次加载的。
Field
ownerCt : Ext.Container
组件所属的Container (默认为undefined，当前组件被添加到一个容器中时此值被自动设置)...
组件所属的Container (默认为undefined，当前组件被添加到一个容器中时此值被自动设置)。 Read-only。

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

Component
refOwner : Ext.Container
如果当前组件是一个容器的孩子，并且是通过一个 ref 配置项被注册的，则此值为 ref 引用被插入到的祖先容器。
如果当前组件是一个容器的孩子，并且是通过一个 ref 配置项被注册的，则此值为 ref 引用被插入到的祖先容器。
Component
rendered : Boolean
如果当前组件已经被渲染了，此值为true。Read-only.
Component
startValue : mixed
表单项最后一次获得焦点时所拥有的值。 这就是传递给change 事件的值...

表单项最后一次获得焦点时所拥有的值。 这就是传递给change 事件的值，此事件在值被改变并失去焦点时触发。

直到表单项被访问之前此值都是undefined 与originalValue 进行比较。

Field

公共方法

Method Defined By
addClass ( string cls ) : Ext.Component
为组件底层的元素添加CSS样式。
为组件底层的元素添加CSS样式。
参数:
  • cls : string
    需要添加的CSS样式的class名称
返回值:
  • Ext.Component
    this
Component
addEvents( Object|String o, string Optional. ) : void
添加指定的事件到事件列表上，事件会被该Observable触发。
添加指定的事件到事件列表上，事件会被该Observable触发。
参数:
  • o : Object|String
    以事件名作为属性true作为值的对象 或者当多个事件名被分开的传递时则为第一个事件名。
  • Optional. : string
    事件名被分开的传递时则为事件名。 用法:
    this.addEvents('storeloaded', 'storecleared');
返回值:
  • void
Observable
addListener( String eventName, Function handler, [Object scope], [Object options] ) : void
给对象添加事件处理器。
给对象添加事件处理器。
参数:
  • eventName : String
    监听的事件名。
  • handler : Function
    事件调用的方法
  • scope : Object
    （可选）处理方法执行的作用域 (this的引用 reference)。 如果被忽略。默认为触发事件的对象。
  • options : Object
    （可选）包含处理器配置和属性的对象。 可能包含以下的属性:
    • scope : Object
      处理方法执行的作用域(this的引用) 。 如果被忽略。默认为触发事件的对象。
    • delay : Number
      在触发事件后延迟调用处理器的毫秒数。
    • single : Boolean
      如果为True则添加一个处理器来处理下一次的事件触发（仅一次），然后移除自己。
    • buffer : Number
      使得处理器延迟指定毫秒数后预定的运行在 一个Ext.util.DelayedTask中 。 如果事件在时间内再一次被触发，原始的处理器不会被调用，但是新的处理器会预定的在他的位置上。
    • target : Observable
      如果事件在目标的Observable上触发则仅仅调用处理器， 否则 事件会从子类的Observable上冒泡

    组合选项
    使用这些选项参数,可能会组合出不同类型的监听器：

    一个延迟的，一次性的监听器。

    myDataView.on('click', this.onClick, this, {
single: true,
delay: 100
});

    一次调用附加多个处理器
    该方法同样支持传递一个包含指定的多个处理器的属性的配置对象参数。

    myGridPanel.on({
'click' : {
    fn: this.onClick,
    scope: this,
    delay: 100
},
'mouseover' : {
    fn: this.onMouseOver,
    scope: this
},
'mouseout' : {
    fn: this.onMouseOut,
    scope: this
}
});

    或者一个简写的语法：

    myGridPanel.on({
'click' : this.onClick,
'mouseover' : this.onMouseOver,
'mouseout' : this.onMouseOut,
 scope: this
});
返回值:
  • void
Observable
applyToMarkup ( String/HTMLElement el ) : void
将此组件添加到已存在的有效的HTML标签中。 使用该方法时，无需再调用render()方法。
将此组件添加到已存在的有效的HTML标签中。 使用该方法时，无需再调用render()方法。
参数:
  • el : String/HTMLElement
返回值:
  • void
Component
autoSize () : void
自动增长表单项，以便让文本宽度适应到表单项允许的最大长度。 只有...
自动增长表单项，以便让文本宽度适应到表单项允许的最大长度。 只有 grow = true时才有效果，同时会触发 autosize 事件。
参数:
  • 无。
返回值:
  • void
TextField
clearInvalid () : void
清除当前表单项上的所有非法styles/messages(样式/消息)
清除当前表单项上的所有非法styles/messages(样式/消息)
参数:
  • 无。
返回值:
  • void
Field
cloneConfig ( Object overrides ) : Ext.Component
默认使用原先传递给当前实例的配置值克隆当前组件。
默认使用原先传递给当前实例的配置值克隆当前组件。
参数:
  • overrides : Object
    一个新的配置项，包含需要覆盖到克隆版本的所有属性。 可以传递一个id参数给此对象，否则将自动生成一个新的id以避免发生重复。
返回值:
  • Ext.Component
    当前组件的克隆副本
Component
destroy () : void
通过如下方法销毁对象：删除所有的事件监听器、将组件的元素从DOM树中删除...
通过如下方法销毁对象：删除所有的事件监听器、将组件的元素从DOM树中删除（如果可以）、 将组件从它的 Ext.Container（如果可用）中删除、 并且将它从Ext.ComponentMgr中 注销。 销毁操作一般由框架自动完成，一般情况下不需要直接调用该方法。
参数:
  • 无。
返回值:
  • void
Component
disable () : Ext.Component
将组件置为无效状态，并出发'disable'事件。
将组件置为无效状态，并出发'disable'事件。
参数:
  • 无。
返回值:
  • Ext.Component
    this
Component
enable () : Ext.Component
将组件置为有效状态并触发'enable'事件。
将组件置为有效状态并触发'enable'事件。
参数:
  • 无。
返回值:
  • Ext.Component
    this
Component
enableBubble( String/Array events ) :void
是否现在使得事件会被该Observable触发并调用 this.getBubbleTarget()方法在拥有者的继承树...

是否现在使得事件会被该Observable触发并调用 this.getBubbleTarget()方法在拥有者的继承树中冒泡。Observable的基础类中没有该方法的实现。

该方法一般被Ext.Components用来冒泡事件到拥有者的容器。参看Ext.Component.getBubbleTarget默认的实现 在Ext.Component中返回组件的直接拥有者。但是如果需要的是一个已知的目标，该方法可以被重写来更快的访问需求的目标。

例子:

Ext.override(Ext.form.Field, {
    // 添加方法到Field的initComponent上改变事件为冒泡
    initComponent : Ext.form.Field.prototype.initComponent.createSequence(function() {
        this.enableBubble('change');
    }),

    // 我们知道我们想让Field的事件冒泡到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() {
            // 如果样式被修改标题会变红。
            myForm.header.setStyle('color', 'red');
        }
    }
});
参数:
  • events : String/Array
    冒泡的事件名，或事件名数组
返回值:
  • void
Observable
findParentBy ( Function fn ) : Ext.Container
通过自定义的函数查找当前组件上层任何层次上的容器...
通过自定义的函数查找当前组件上层任何层次上的容器。 如果传递的函数返回true，容器对象将被返回。
参数:
  • fn : Function
    自定义的函数，使用如下参数调用(container,this component)。
返回值:
  • Ext.Container
    自定义函数返回true的第一个容器
Component
findParentByType ( String/Class xtype ) : Ext.Container
通过xtype或者class查找当前组件上层任何层次上的容器
通过xtype或者class查找当前组件上层任何层次上的容器
参数:
  • xtype : String/Class
    组件的xtype字符串，或者直接是组件的class
返回值:
  • Ext.Container
    符合指定xtype或者class的第一个容器
Component
fireEvent( String eventName, Object... args ) : Boolean
用传入的参数触发指定的事件 (减去事件名)。 一个事件可以被设置为冒泡 Obse...

用传入的参数触发指定的事件 (减去事件名)。

一个事件可以被设置为冒泡到Observable父类继承树(参看 Ext.Component.getBubbleTarget) 调用enableBubble实现。

参数:
  • eventName : String
    触发的事件名。
  • args : Object...
    传递给处理器的可变长度参数。
返回值:
  • Boolean
    如果有任何的处理器返回false则返回false，否则返回true。
Observable
focus ( [ Boolean selectText ], [ Boolean/Number delay ] ) : Ext.Component
尝试将当前组件设为焦点。
尝试将当前组件设为焦点。
参数:
  • selectText : Boolean
    (可选) 如果可用，同时选中组件内部的文本
  • delay : Boolean/Number
    (可选)将当前组件设置为焦点的延迟时间(设置为true等于0毫秒)
返回值:
  • Ext.Component
    this
Component
getActiveError () : String
获取当前表单项活动的出错消息。
获取当前表单项活动的出错消息。
参数:
  • 无。
返回值:
  • String
    返回表单项上活动的出错消息，如果没有错误，返回一个空字符串。
Field
getBox ( [ Boolean local ] ) : Object
获取组件底层元素当前盒子模型的尺寸。（译者注：盒子模型是CSS术语，详细解释请自行搜索。）
获取组件底层元素当前盒子模型的尺寸。（译者注：盒子模型是CSS术语，详细解释请自行搜索。）
参数:
  • local : Boolean
    (可选)值为true时，组件的left值和top值将代替页面的XY被返回。(默认值为false)
返回值:
  • Object
    返回值的格式{x, y, width, height}
BoxComponent
getBubbleTarget () : Ext.Container
为Observable的fireEvent方法提供链接，它沿着继承结构进行冒泡操作。
为Observable的fireEvent方法提供链接，它沿着继承结构进行冒泡操作。
参数:
  • 无。
返回值:
  • Ext.Container
    拥有当前组件的容器。
Component
getEl () : Ext.Element
返回 Ext.Element ，它包装了当前组件。...

返回 Ext.Element ，它包装了当前组件。

通常情况下，这将是一个<DIV>元素，它是由该类的onRender方法创建的， 但是可以使用autoEl配置项 覆盖它。

注意: 此元素将会一直处于无效状态直到当前组件渲染完成。

如需向当前组件的 DOM事件(而不是当前组件自己的Observable事件)添加监听器， 更多建议，参见 listeners 配置项，或者直接使用一个render监听器:

new Ext.Panel({
    title: 'The Clickable Panel',
    listeners: {
        render: function(p) {
            // Append the Panel to the click handler's argument list.
            p.getEl().on('click', handlePanelClick.createDelegate(null, [p], true));
        },
        single: true  // Remove the listener after first invocation
    }
});
参数:
  • 无。
返回值:
  • Ext.Element
    包装当前组件的元素。
Component
getErrors () : Array
运行当前表单项的校验器并返回一个所有校验错误信息数组。 此方法在校验期间在内部调用并且一般情况下...
运行当前表单项的校验器并返回一个所有校验错误信息数组。 此方法在校验期间在内部调用并且一般情况下不需要手工调用。 每个子类都应该重写或者增加返回值以提供它们自己的出错消息
参数:
  • 无。
返回值:
  • Array
    当前表单项的所有出错消息
TextField
getHeight () : Number
获取该组件的当前高度值。
获取该组件的当前高度值。
参数:
  • 无。
返回值:
  • Number
BoxComponent
getId () : String
返回当前组件的id，如果没有定义id，则自动生成并返回一个id:'ext-comp-'...
返回当前组件的 id 如果没有定义 id 则自动生成并返回一个 id

'ext-comp-' + (++Ext.Component.AUTO_ID)
参数:
  • 无。
返回值:
  • String
    id
Component
getItemId () : String
返回当前组件的 itemId 。 如果没有通过配置参数指定 itemId 那么，将会使用...
返回当前组件的 itemId 。 如果没有通过配置参数指定 itemId 那么，将会使用 getId 返回 id 。
参数:
  • 无。
返回值:
  • String
Component
getName () : String
如果可用，返回表单项的 name 或者 hiddenName 属性。
如果可用，返回表单项的 name 或者 hiddenName 属性。
参数:
  • 无。
返回值:
  • String
    name 表单项的{@link Ext.form.Field#name name}或者{@link Ext.form.ComboBox#hiddenName hiddenName}
Field
getOuterSize () : Object
获取当前组件所在元素的尺寸大小，包括边缘的空白处。
获取当前组件所在元素的尺寸大小，包括边缘的空白处。
参数:
  • 无。
返回值:
  • Object
    一个包含元素大小的对象 {width: (element width + left/right margins), height: (element height + top/bottom margins)}
BoxComponent
getPosition ( [ Boolean local ] ) : Array
获取组件底层元素当前的XY位置。
获取组件底层元素当前的XY位置。
参数:
  • local : Boolean
    (可选)如果为true，将返回元素的left和top值，而不是相对于页面内的 XY。(默认值为 false)
返回值:
  • Array
    元素的XY位置值(例如：[100, 200])
BoxComponent
getRawValue () : Mixed
返回原始数据值，可能不是一个合法的、已定义的值。 返回格式化的值参见...
返回原始数据值，可能不是一个合法的、已定义的值。 返回格式化的值参见 getValue。
参数:
  • 无。
返回值:
  • Mixed
    value 表单项的值
Field
getResizeEl () : Ext.Element
返回该组件的最外层用来定义这些组件整体大小的Element...

返回该组件的最外层用来定义这些组件整体大小的Element对象。

通常用 getEl 方法将会返回相同的Element对象，但在有些情况下，组件可能有一些更多的封装了它的主要动态Element对象的Element对象。

例如ComboBox。它是封装在一个包含<input>元素的包装元素里(这将返回其 getEl方法和触发按钮的元素)。返回的元素为resizeEl。

参数:
  • 无。
返回值:
  • Ext.Element
    The Element which is to be resized by size managing layouts.
BoxComponent
getSize () : Object
获取组件底层元素当前的大小。
获取组件底层元素当前的大小。
参数:
  • 无。
返回值:
  • Object
    一个包含元素大小的对象{width: (element width), height: (element height)}
BoxComponent
getValue () : Mixed
返回格式化的数据值(undefined或者emptyText将会以''返回)。 如需返回原始值，参见...
返回格式化的数据值(undefined或者emptyText将会以''返回)。 如需返回原始值，参见 getRawValue。
参数:
  • 无。
返回值:
  • Mixed
    value 表单项的值
Field
getWidth () : Number
获取该组件的当前宽度值。
获取该组件的当前宽度值。
参数:
  • 无。
返回值:
  • Number
BoxComponent
getXType () : String
获取当前组件的xtype，它是用 Ext.ComponentMgr 注册的。 所有可用的xtype列表，参见...
获取当前组件的xtype，它是用 Ext.ComponentMgr 注册的。 所有可用的xtype列表，参见 Ext.Component 类头部。示例用法:

var t = new Ext.form.TextField();
alert(t.getXType());  // alerts 'textfield'
参数:
  • 无。
返回值:
  • String
    The xtype
Component
getXTypes () : String
返回此组件的xtype继承树，用字符'-'分隔。 所有可用的xtype值...

返回此组件的xtype继承树，用字符'-'分隔。 所有可用的xtype值，请参见Ext.Component 类的头部。

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

示例用法:

var t = new Ext.form.TextField();
alert(t.getXTypes());  // alerts 'component/box/field/textfield'
参数:
  • 无。
返回值:
  • String
    xtype层次字符串
Component
hasListener( String eventName ) : Boolean
检测对象是否包含指定事件的任何监听器
检测对象是否包含指定事件的任何监听器
参数:
  • eventName : String
    检测的事件名
返回值:
  • Boolean
    如果事件被监听则为true，否则为false
Observable
hide () : Ext.Component
隐藏当前组件。 监听 beforehide' 事件并且返回false 可以取消隐藏组件的操作。 在隐藏组件之后触发...
隐藏当前组件。 监听 beforehide' 事件并且返回false 可以取消隐藏组件的操作。 在隐藏组件之后触发 ' hide' 事件。 如果组件被配置成 hidden 那么此方法在内部被调用。
参数:
  • 无。
返回值:
  • Ext.Component
    this
Component
isDirty () : Boolean
如果此表单项的值与原始值相比发生了改变，返回true。 如果表单项...

如果此表单项的值与原始值相比发生了改变，返回true。 如果表单项被禁用或者尚未被渲染将会返回false。

注意，如果所属的 form 配置了一个Ext.form.BasicForm， 那么在使用Ext.form.BasicForm. setValues 加载值之后，原始值将会被更新。

参数:
  • 无。
返回值:
  • Boolean
    如果此表单项的值与原始值相比发生了改变(并且没有被禁用)，返回true，其它返回false。
Field
isValid ( Boolean preventMark ) : Boolean
通过 校验 表单项 处理后的值 ，返回表单项当前值是否合法。...
通过 校验 表单项 处理后的值 ，返回表单项当前值是否合法。 注意: disabled 的表单项将会被忽略。
参数:
  • preventMark : Boolean
    True将会禁止把表单项标记为非法
返回值:
  • Boolean
    如果值是合法的，为true，其它为false
Field
isVisible () : Boolean
如果当前组件可见，返回true。
如果当前组件可见，返回true。
参数:
  • 无。
返回值:
  • Boolean
    如果当前组件可见，返回true，其它返回false。
Component
isXType ( String xtype , [ Boolean shallow ] ) : Boolean
Tests whether or not this Component is of a specific xtype. This can test whether this Component is descended from th...

测试此组件是否是指定的xtype。此方法既可以测试是否是指定的xtype的某个子类， 或者它是否直接是指定的xtype类(shallow=true)。

如果使用你自己的子类，必须知道组件必须注册它的xtype值。

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

示例用法:

var t = new Ext.form.TextField();
var isText = t.isXType('textfield');        // true
var isBoxSubclass = t.isXType('box');       // true, descended from BoxComponent
var isBoxInstance = t.isXType('box', true); // false, not a direct BoxComponent instance
参数:
  • xtype : String
    需要为当前组件进行检测的xtype
  • shallow : Boolean
    (可选) 如果为false，检测组件是否是xtype继承树中的某个子类（默认是这种情况）， 如果为true，只检测组件是否是指定的xtype类型。
返回值:
  • Boolean
    如果当前组件是指定xtype的子类，返回true，其它返回flase。
Component
markInvalid ( [ String msg ] ) : void
显示一个关联到当前表单项的出错信息， 使用msgTarget 来决定如何显示消息并将...

显示一个关msgTarget 来决定如何显示消息并将 invalidClass 应用到表单项的UI元素上。

注意: 如果表单项的值确实通过了校验， 此方法不会导致表单项的 validate 方法返回 false 。 所以简单地把一个表单项标记为非法并不会阻止表单项 通过设置的 Ext.form.Action.Submit.clientValidation 被提交。

invalid.
参数:
  • msg : String
    (可选)校验信息(默认为invalidText)
返回值:
  • void
Field
mon ( Observable|Element item , Object|String ename , Function fn , Object scope , Object opt ) : void
向任何Observable对象(或者元素)上添加监听器，监听器将会在组件...

向任何Observable对象(或者元素)上添加监听器，监听器将会在组件销毁时被自动删除。
用法：

myGridPanel.mon(myGridPanel.getSelectionModel(), 'selectionchange', handleSelectionChange, null, {buffer: 50});

or:

myGridPanel.mon(myGridPanel.getSelectionModel(), {
    selectionchange: handleSelectionChange,
    buffer: 50
});
参数:
  • item : Observable|Element
    需要添加listener/listeners的项目。
  • ename : Object|String
    事件名，或者一个包含事件名属性的对象。
  • fn : Function
    (可选) 如果 ename 参数是一个事件名，此参数为处理函数。
  • scope : Object
    (可选)如果 ename 参数是一个事件名称，此参数是作用域 ( this 引用)，监听函数将会在此作用域中被执行。
  • opt : Object
    (可选)如果 ename 参数是一个事件名称， 此参数是 addListener 配置项。
返回值:
  • void
Component
mun ( Observable|Element item , Object|String ename , Function fn , Object scope ) : void
删除通过mon 方法添加的监听器。
删除通过mon 方法添加的监听器。
参数:
  • item : Observable|Element
    需要删除listener/listeners的项目。
  • ename : Object|String
    事件名称，或者一个包含事件名称属性的对象。
  • fn : Function
    (可选)如果 ename 参数是一个事件名称，此参数是一个处理函数。
  • scope : Object
    (可选)如果 ename 参数是一个事件名称，此参数是作用域 ( this 引用)，监听函数将会在此作用域中被执行。
返回值:
  • void
Component
nextSibling () : Ext.Component
返回所属容器中的下一个组件
返回所属容器中的下一个组件
参数:
  • 无。
返回值:
  • Ext.Component
Component
on( String eventName, Function handler, [Object scope], [Object options] ) : void
给对象添加事件处理器 (addListener的简写形式)
给对象添加事件处理器 (addListener的简写形式。)
参数:
  • eventName : String
    监听的事件类型
  • handler : Function
    事件调用的方法
  • scope : Object
    （可选）处理方法执行时的作用域 (this 的引用)。 如果被忽略。默认为触发事件的对象。
  • options : Object
    可选 包含处理器配置的对象。
返回值:
  • void
Observable
onTrigger1Click ( EventObject e ) : void
用来处理触发按钮点击事件的函数。 默认情况下此方法什么事情都不做，除非被一个实现的方法覆盖...
用来处理触发按钮点击事件的函数。 默认情况下此方法什么事情都不做，除非被一个实现的方法覆盖。 额外信息参见 Ext.form.TriggerField.onTriggerClick 。
参数:
  • e : EventObject
返回值:
  • void
TwinTriggerField
onTrigger2Click ( EventObject e ) : void
用来处理触发按钮点击事件的函数。 默认情况下此方法什么事情都不做，除非被一个实现的方法覆盖...
用来处理触发按钮点击事件的函数。 默认情况下此方法什么事情都不做，除非被一个实现的方法覆盖。 额外信息参见 Ext.form.TriggerField.onTriggerClick 。
参数:
  • e : EventObject
返回值:
  • void
TwinTriggerField
onTriggerClick ( EventObject e ) : void
需要处理触发器(译者注：指按钮)点击事件的函数。 默认情况下，此方法什么事都不做除非用实现方法覆盖它。...
需要处理触发器(译者注：指按钮)点击事件的函数。 默认情况下，此方法什么事都不做除非用实现方法覆盖它。 此方法的示例实现参见Ext.form.ComboBox 和 Ext.form.DateField。
参数:
  • e : EventObject
返回值:
  • void
TriggerField
previousSibling () : Ext.Component
返回所属容器中的前一个组件
返回所属容器中的前一个组件
参数:
  • 无。
返回值:
  • Ext.Component
Component
processValue ( Mixed value ) : void
仅仅在需要准备原始值供校验时，才需要覆盖此方法(参见 validate和 isValid)。...
仅仅在需要准备原始值供校验时，才需要覆盖此方法(参见 validate和 isValid)。 此方法被期望为表单项返回处理后的值，此值将会被用来进行校验 (参见validateValue方法)。
参数:
  • value : Mixed
返回值:
  • void
Field
purgeListeners() : void
移除对象上所有的监听器
移除对象上所有的监听器
参数:
  • 无。
返回值:
  • void
Observable
relayEvents( Object o, Array events ) : void
从指定的Observable上传递选择的事件就好像被当前对象触发一样。
从指定的Observable上传递选择的事件就好像被当前对象触发一样。
参数:
  • o : Object
    该Observable上的事件被当前对象传递。
  • events : Array
    传递的数组名。
返回值:
  • void
Observable
removeClass ( string cls ) : Ext.Component
从组件底层的元素上删除一个CSS类。
从组件底层的元素上删除一个CSS类。
参数:
  • cls : string
    需要移除的CSS类名
返回值:
  • Ext.Component
    this
Component
removeListener( String eventName, Function handler, [Object scope] ) : void
删除一个事件处理器。
删除一个事件处理器。
参数:
  • eventName : String
    处理器关联的事件类型。
  • handler : Function
    移除的处理器。 这应该是传递到addListener里的方法的引用。
  • scope : Object
    （可选）处理器指定的初始作用域。
返回值:
  • void
Observable
render ( [ Element/HTMLElement/String container ], [ String/Number position ] ) : void
在传递进来的HTML元素中渲染当前组件。...

在传递进来的HTML元素中渲染当前组件。

如果你正在使用一个Container 对象放置当前组件，那么请不要使用render方法。

当容器第一次被渲染时，它的子组件将会被容器的 layout 管理器渲染。

某些布局管理器允许动态添加子组件。它们包括 Ext.layout.CardLayout, Ext.layout.AnchorLayout, Ext.layout.FormLayout, Ext.layout.TableLayout。

当一个新的子组件被添加时，如果容器已经被渲染了， 你可能需要调用容器的 doLayout 方法来刷新视图，它将导致所有没有被渲染的子组件进行渲染操作。 此操作是必须的，这样你可以添加多个子组件而只刷新一次layout。

当创建复杂的UI时，非常重要的一点是，请记住调整子项目的尺寸和位置是容器的 layout 管理器的职责。 如果你希望子项目的尺寸对用户交互作出反应， 你必须为容器配置一个布局管理器，它将创建和管理你心里想要的那种布局。

忽略容器的layout 配置意味着将会使用一个基本的布局管理器，它除了按次序把子组件 渲染到容器中之外什么事情都不做。 这种情况下，任何尺寸和位置的调整操作都不会发生。

参数:
  • container : Element/HTMLElement/String
    (可选) 需要在其中渲染当前组件的元素。 如果它是从一个已存在的标签中创建的，此参数应该被忽略。
  • position : String/Number
    (可选) 容器中的一个元素ID或者一个DOM节点索引， 当前组件将会被插入到它前面 (默认append到容器的尾部)
返回值:
  • void
Component
reset () : void
将表单项的当前值重置为以前加载时的值，并且清除所有校验信息。...
将表单项的当前值重置为以前加载时的值，并且清除所有校验信息。 参见Ext.form.BasicForm. trackResetOnLoad 。
参数:
  • 无。
返回值:
  • void
TextField
resumeEvents() : void
重新开始触发事件。(参见suspendEvents) 如果事件以queueSuspended参数被挂起，则在事件被挂起时 ...
重新开始触发事件。(参见 suspendEvents) 如果事件以queueSuspended 参数被挂起，则在事件被挂起时触发的事件会被传递到所有的监听器上
参数:
  • 无。
返回值:
  • void
Observable
selectText ( [ Number start ], [ Number end ] ) : void
选中当前表单项中的文本
选中当前表单项中的文本
参数:
  • start : Number
    (可选)选中的起点索引(默认为0)
  • end : Number
    (可选)选中的结束索引(默认为文本长度)
返回值:
  • void
TextField
setActiveError ( String msg , Boolean suppressEvent ) : void
将当前activeError设置为所给的字符串。 触发'invalid'事件。这不会设置出错图标...
将当前activeError设置为所给的字符串。 触发'invalid'事件。这不会设置出错图标，仅仅设置消息并触发事件。 如需显示出错图标，可使用markInvalid代替，它将在内部调用此方法。
参数:
  • msg : String
    出错消息
  • suppressEvent : Boolean
    True将会禁止触发'invalid'事件
返回值:
  • void
Field
setAutoScroll ( Boolean scroll ) : Ext.BoxComponent
设置该组件内容溢出时是否自动显示滚动条。
设置该组件内容溢出时是否自动显示滚动条。
参数:
  • scroll : Boolean
    值为true的话组件自动显示滚动条。
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setDisabled ( Boolean disabled ) : Ext.Component
工具函数，使用布尔值设置有效/无效(disabled/enabled )。
工具函数，使用布尔值设置有效/无效(disabled/enabled )。
参数:
  • disabled : Boolean
返回值:
  • Ext.Component
    this
Component
setEditable ( Boolean value ) : void
参数:
  • value : Boolean
    True将会允许用户直接编辑表单项文本。 允许或者阻止用户直接编辑表单项文本。 如果传递了false，用户将只能使用触发按钮修改表单项的值。 将会同时向文本栏添加一个click事件，它会调用触发器。 此方法是一个运行时配置，与配置时配置'editable'选项等价。
返回值:
  • void
TriggerField
setHeight ( Mixed height ) : Ext.BoxComponent
设置此组件的高度。该方法将触发resize事件。
设置此组件的高度。该方法将触发resize事件。
参数:
  • height : Mixed
    The new height to set.
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setPagePosition ( Number x , Number y ) : Ext.BoxComponent
设置组件在页面中的XY位置。 如果需要设置left和top值 ，请使用...
设置组件在页面中的XY位置。 如果需要设置left和top值 ，请使用setPosition方法。 该方法触发move事件。
参数:
  • x : Number
    The new x position
  • y : Number
    The new y position
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setPosition ( Number left , Number top ) : Ext.BoxComponent
设置组件的left和top值。设置组件的页面XY值，请使用setPagePosition方法。该方法触发...
设置组件的left和top值。设置组件的页面XY值，请使用setPagePosition方法。该方法触发move事件。
参数:
  • left : Number
    The new left
  • top : Number
    The new top
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setRawValue ( Mixed value ) : Mixed
绕过校验，直接设置底层DOM表单项的值。 设置值并进行校验，参见 setValue。
绕过校验，直接设置底层DOM表单项的值。 设置值并进行校验，参见 setValue。
参数:
  • value : Mixed
    需要设置的值
返回值:
  • Mixed
    value 被设置的表单项值
Field
setReadOnly ( Boolean readOnly ) : void
设置当前表单项的只读状态。
设置当前表单项的只读状态。
参数:
  • readOnly : Boolean
    表单项是否应该只读。
返回值:
  • void
TriggerField
setSize ( Mixed width , Mixed height ) : Ext.BoxComponent
设置BoxComponent的宽度和高度。 此方法触发resize事件...
设置BoxComponent的宽度和高度。 此方法触发resize事件。此方法可以接收单独的width或者height值作为参数， 或者你可以传递像这样的一个size对象： {width:10, height:20} 。
参数:
  • width : Mixed
    设置的新的width值。这可以是：
    • 一个Number类型指定Element新的宽度 Ext.Element.defaultUnit(默认为像素 :'px')。
    • 一个String类型用于设置width的CSS样式。
    • 一个size对象格式为 {width: widthValue, height: heightValue} 。
    • 值为 undefined 时，保留原来的width不变。
  • height : Mixed
    设置的新的height值(如果第一个参数传递了一个size对象，此参数没有必要传递)。这可以是：
    • 一个Number类型指定Element新的高度 Ext.Element.defaultUnit(默认为像素 :'px')。
    • 一个String类型用于设置height的CSS样式。也有可能不会被使用到。
    • 值为 undefined 时，保留原来的height不变。
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setValue ( Mixed value ) : Ext.form.Field
向表单项中设置一个数据值并校验之。 如需直接设置值而不进行校验，参见 setRawValue。
向表单项中设置一个数据值并校验之。 如需直接设置值而不进行校验，参见 setRawValue。
参数:
  • value : Mixed
    需要设置的值
返回值:
  • Ext.form.Field
    this
Field
setVisible ( Boolean visible ) : Ext.Component
工具方法，通过使用布尔值隐藏或者显示当前组件。
工具方法，通过使用布尔值隐藏或者显示当前组件。
参数:
  • visible : Boolean
    true时显示，false时隐藏
返回值:
  • Ext.Component
    this
Component
setWidth ( Mixed width ) : Ext.BoxComponent
设置组件的宽度。 此方法触发resize事件。
设置组件的宽度。 此方法触发resize事件。
参数:
  • width : Mixed
    The new width to set.
返回值:
  • Ext.BoxComponent
    this
BoxComponent
show () : Ext.Component
显示当前组件。监听' beforeshow' 事件，返回 false 取消显示组件...
显示当前组件。监听' beforeshow' 事件，返回 false 取消显示组件。在显示组件之后触发' show' 事件。
参数:
  • 无。
返回值:
  • Ext.Component
    this
Component
suspendEvents( Boolean queueSuspended ) : void
暂停触发所有的事件。 (参看resumeEvents)
暂停触发所有的事件。（参看 resumeEvents)
参数:
  • queueSuspended : Boolean
    如果传递为true则排列好暂停的事件使得在调用 resumeEvents 后再触发它们，而不是抛弃所有暂停的事件。
返回值:
  • void
Observable
syncSize () : Ext.BoxComponent
强制组件的大小按照此组件底层元素当前的高度和宽度计算。
强制组件的大小按照此组件底层元素当前的高度和宽度计算。
参数:
  • 无。
返回值:
  • Ext.BoxComponent
    this
BoxComponent
un( String eventName, Function handler, [Object scope] ) : void
删除一个事件处理器(removeListener方法的简写形式)
删除一个事件处理器(removeListener方法的简写形式。)
参数:
  • eventName : String
    处理器关联的事件类型
  • handler : Function
    被删除的处理器 这应该是传入 addListener 中的方法的引用。
  • scope : Object
    （可选）为处理器指定的初始作用域。
返回值:
  • void
Observable
unsetActiveError ( Boolean suppressEvent ) : void
清除activeError并触发'valid'事件。此方法被clearInvalid在内部进行...
清除activeError并触发'valid'事件。此方法被clearInvalid在内部进行调用， 并且一般情况下没有必要手工调用
参数:
  • suppressEvent : Boolean
    True将禁止触发'invalid'事件
返回值:
  • void
Field
update ( Mixed htmlOrData , [ Boolean loadScripts ], [ Function callback ] ) : void
刷新组件的内部区域。
刷新组件的内部区域。
参数:
  • htmlOrData : Mixed
    如果已经通过tpl为当前组件配置了一个模板，那么 将会使用此参数来装配模板。 如果没有为当前组件配置模板，组件的内容区域将会通过Ext.Element 进行刷新。
  • loadScripts : Boolean
    (可选)只用在使用html配置时此参数才合法。默认为false。
  • callback : Function
    (可选)只用在使用html配置时此参数才合法。 当脚本加载完成时回调函数才被执行。
返回值:
  • void
Component
updateBox ( Object box ) : Ext.BoxComponent
设置此组件底层元素的盒子模型尺寸。(译者注：盒子模型是CSS术语，详细资料请自行搜索。)
设置此组件底层元素的盒子模型尺寸。(译者注：盒子模型是CSS术语，详细资料请自行搜索。)
参数:
  • box : Object
    一个格式为{x, y, width, height}的对象
返回值:
  • Ext.BoxComponent
    this
BoxComponent
validate () : Boolean
校验表单项的值
校验表单项的值
参数:
  • 无。
返回值:
  • Boolean
    如果值合法，为true,否则为false
Field
validateValue ( Mixed The ) : Boolean
使用getErrors创建一个校验出错信息数组。 如果发现了任何错误，将会使用第一个错误作为参数...
使用getErrors创建一个校验出错信息数组。 如果发现了任何错误，将会使用第一个错误作为参数调用markInvalid方法并返回 false，否则返回true。以前，要求子类提供此方法的一个实现以处理校验过程--- 从3.2开始，应该用覆盖getErrors方法的方式替代。
参数:
  • The : Mixed
    表单项的当前值
返回值:
  • Boolean
    如果所有校验都通过，此值为true，如果一个或多个校验失败，则为false
Field

公共事件

Event Defined By
added : ( Ext.Component this , Ext.Container ownerCt , number index )
当一个组件被添加到一个Ext.Container时触发
当一个组件被添加到一个Ext.Container时触发
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • ownerCt : Ext.Container
    用于组件的容器
  • index : number
    添加组件的位置
Component
afterrender : ( Ext.Component this )
在组件渲染完成之后触发...

在组件渲染完成之后触发。

afterrender事件在当前组件被rendered 结束之后、在为组件定义的所有afterRender方法执行之后 触发，并且，如果有stateful， 也在状态被保存之后才触发。

监听器将会以如下参数格式被调用:
  • this : Ext.Component
Component
autosize : ( Ext.form.Field this , Number width )
当autoSize 方法被触发时发出此事件。 根据默认的逻辑，表单项可以有也可以实际上没有...
当autoSize 方法被触发时发出此事件。 根据默认的逻辑，表单项可以有也可以实际上没有 改变尺寸，但是此事件提供了一个钩子，如果有需要， 开发者在运行时可以提供额外的逻辑来改变输入栏的大小。
监听器将会以如下的参数格式调用:
  • this : Ext.form.Field
    文本栏
  • width : Number
    表单项新宽度
TextField
beforedestroy : ( Ext.Component this )
在组件 destroyed 之前触发。 在事件监听器中返回false以停止 destroy 操作。
在组件 destroyed 之前触发。 在事件监听器中返回false以停止 destroy 操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforehide : ( Ext.Component this )
在调用hide方法隐藏组件之前触发。 在事件监听器中返回false可以停止隐藏操作。
在调用hide方法隐藏组件之前触发。 在事件监听器中返回false可以停止隐藏操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforerender : ( Ext.Component this )
在组件被rendered 之前触发。 在事件监听器中返回false可以停止render 操作。
在组件被rendered 之前触发。 在事件监听器中返回false可以停止render 操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforeshow : ( Ext.Component this )
在调用show()方法现实组件之前触发。 事件处理函数返回false可以停止show。
在调用show 方法现实组件之前触发。 事件处理函数返回false可以停止show。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforestaterestore : ( Ext.Component this , Object state )
在组件状态恢复之前触发。返回false停止恢复状态操作。
在组件状态恢复之前触发。返回false停止恢复状态操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    StateProvider返回的状态哈希值。 如果没有禁止此事件，那么状态对象会被传递给applyState。 默认情况下，这样简单地把属性值拷贝到当前组件中。 可以覆盖此方法以提供自定的状态恢复操作。
Component
beforestatesave : ( Ext.Component this , Object state )
在组件状态被保存到配置的状态提供者之前触发。 返回false可以停止保存。
在组件状态被保存到配置的状态提供者之前触发。 返回false可以停止保存。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    状态值哈希。 这由在组件上调用getState() 方法决定。 此方法必须由开发者提供，返回是否需要对状态进行描述，默认情况下， Ext.Component有一个空实现。
Component
blur : ( Ext.form.Field this )
当表单项时区输入焦点时触发。
当表单项时区输入焦点时触发。
监听器将会以如下参数被调用:
  • this : Ext.form.Field
Field
change : ( Ext.form.Field this , Mixed newValue , Mixed oldValue )
如果表单项的时发生改变，在表单项刚刚失去焦点时触发。
如果表单项的时发生改变，在表单项刚刚失去焦点时触发。
监听器将会以如下参数格式调用:
  • this : Ext.form.Field
  • newValue : Mixed
    新的值
  • oldValue : Mixed
    原始值
Field
destroy : ( Ext.Component this )
在组件被销毁之后触发。
在组件被destroyed之后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
disable : ( Ext.Component this )
在组件被设置为无效状态后触发。
在组件被设置为无效状态后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
enable : ( Ext.Component this )
当组件被设置为有效(enabled)之后触发。
当组件被设置为有效(enabled)之后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
focus : ( Ext.form.Field this )
当表单项获得输入焦点时触发。
当表单项获得输入焦点时触发。
监听器将会以如下参数格式被调用:
  • this : Ext.form.Field
Field
hide : ( Ext.Component this )
在组件被隐藏之后触发。 当调用hide 方法隐藏组件之后触发。
在组件被隐藏之后触发。 当调用hide 方法隐藏组件之后触发。
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
invalid : ( Ext.form.Field this , String msg )
在表单项被标记为非法之后触发。
在表单项被标记为非法之后触发。
监听器将会以如下参数格式调用:
  • this : Ext.form.Field
  • msg : String
    校验信息
Field
keydown : ( Ext.form.TextField this , Ext.EventObject e )
输入栏的keydown事件。 只有在 enableKeyEvents 被设置为true时才触发此事件。
输入栏的keydown事件。 只有在 enableKeyEvents 被设置为true时才触发此事件。
监听器将会以如下参数格式调用:
  • this : Ext.form.TextField
    文本栏
  • e : Ext.EventObject
TextField
keypress : ( Ext.form.TextField this , Ext.EventObject e )
输入栏的keypress事件。 只有在enableKeyEvents 被设置为true时才触发此事件。
输入栏的keypress事件。 只有在enableKeyEvents 被设置为true时才触发此事件。
Listeners will be called with the following arguments:
  • this : Ext.form.TextField
    文本栏
  • e : Ext.EventObject
TextField
keyup : ( Ext.form.TextField this , Ext.EventObject e )
输入栏keyup事件。 只有在 enableKeyEvents 被设置为true时才触发此事件。
输入栏keyup事件。 只有在 enableKeyEvents 被设置为true时才触发此事件。
监听器将会以如下的参数格式调用:
  • this : Ext.form.TextField
    文本栏
  • e : Ext.EventObject
TextField
move : ( Ext.Component this , Number x , Number y )
在组件移动之后触发。
在组件移动之后触发。
监听器将会用如下的参数格式来调用:
  • this : Ext.Component
  • x : Number
    The new x position
  • y : Number
    The new y position
BoxComponent
removed : ( Ext.Component this , Ext.Container ownerCt )
当一个组件被从Ext.Container容器中删除时触发
当一个组件被从Ext.Container容器中删除时触发
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • ownerCt : Ext.Container
    持有组件的容器
Component
render : ( Ext.Component this )
在组件被渲染之后触发。
在组件被 rendered(渲染) 之后触发。
监听器将以如下的参数格式被调用:
  • this : Ext.Component
Component
resize : ( Ext.Component this , Number adjWidth , Number adjHeight , Number rawWidth , Number rawHeight )
在组件被调整大小之后触发。
在组件被调整大小之后触发。
监听器将以如下的参数格式被调用:
  • this : Ext.Component
  • adjWidth : Number
    这是width调整后的值
  • adjHeight : Number
    这是height调整后的值
  • rawWidth : Number
    这是width原来的值
  • rawHeight : Number
    这是height原来的值
BoxComponent
show : ( Ext.Component this )
在调用show 方法显示组件之后触发。
在调用show 方法显示组件之后触发。
监听器将会用如下的参数格式被调用:
  • this : Ext.Component
Component
specialkey : ( Ext.form.Field this , Ext.EventObject e )
当任何和导航有关的键被按下时触发(上下左右箭头, tab, 回车,esc, 等等) is pressed. 处理其它按键参见...
当任何和导航有关的键被按下时触发(上下左右箭头, tab, 回车,esc, 等等) is pressed. 处理其它按键参见 Ext.Panel.keys或者 Ext.KeyMap。 你可以检测 Ext.EventObject.getKey 以便获知哪个键被按下。例如：
var form = new Ext.form.FormPanel({
    ...
    items: [{
            fieldLabel: 'Field 1',
            name: 'field1',
            allowBlank: false
        },{
            fieldLabel: 'Field 2',
            name: 'field2',
            listeners: {
                specialkey: function(field, e){
                    // e.HOME, e.END, e.PAGE_UP, e.PAGE_DOWN,
                    // e.TAB, e.ESC, arrow keys: e.LEFT, e.RIGHT, e.UP, e.DOWN
                    if (e.getKey() == e.ENTER) {
                        var form = field.ownerCt.getForm();
                        form.submit();
                    }
                }
            }
        }
    ],
    ...
});
监听器将会以如下参数格式被调用:
  • this : Ext.form.Field
  • e : Ext.EventObject
    事件对象
Field
staterestore : ( Ext.Component this , Object state )
组件状态被存储之后触发。
组件状态被存储之后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    StateProvider返回的状态哈希值。 如果没有禁止此事件，那么状态对象会被传递给applyState。 默认情况下，这样简单地把属性值拷贝到当前组件中。 可以覆盖此方法以提供自定的状态恢复操作。
Component
statesave : ( Ext.Component this , Object state )
在组件状态被保存到所配置的状态提供者之后触发。
在组件状态被保存到所配置的状态提供者之后触发。
监听器将会用如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    状态值hash。 这是由在足见上调用getState() 方法决定的。 开发者必须提供此方法以返回是否需要恢复状态，默认情况下， Ext.Component有一个空实现。
Component
valid : ( Ext.form.Field this )
在表单项被校验无错误之后触发。
在表单项被校验无错误之后触发。
监听器将会以如下参数格式被调用:
  • this : Ext.form.Field
Field


Class Ext.form.VTypes

包: | Ext.form
定义类的文件: | VTypes.js
类: | VTypes
继承自: | Object

这是一个单例(singleton)对象，它包含了一个常用的字段验证的函数集合。提供的验证都是很基本的，旨在易于自定义和扩展。

添加自定义的VTypes可以指定 vtype 验证方法，指定任何文本显示对应的错误信息以及请求按键过滤。例如:

// custom Vtype for vtype:'time'
        var timeTest = /^([1-9]|1[0-9]):([0-5][0-9])(\s[a|p]m)$/i;
        Ext.apply(Ext.form.VTypes, {
            //  vtype validation function
            time: function(val, field) {
                return timeTest.test(val);
            },
            // vtype Text property: The error text to display when the validation function returns false
            timeText: 'Not a valid time.  Must be in the format "12:34 PM".',
            // vtype Mask property: The keystroke filter mask
            timeMask: /[\d\s:amp]/i
        });
另一个例子:
// custom Vtype for vtype:'IPAddress'
        Ext.apply(Ext.form.VTypes, {
            IPAddress:  function(v) {
                return /^\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}$/.test(v);
            },
            IPAddressText: 'Must be a numeric IP address',
            IPAddressMask: /[\d\.]/i
        });

这是一个单例的类，不能直接实例化。

公共属性

Property |  | Defined By
 | alphaMask : RegExp 应用到alpha输入的按键过滤器。默认为:/[a-z_]/i | VTypes
 | alphaText : String 当alpha校验方法返回false时显示的出错提示文本... 当alpha校验方法返回false时显示的出错提示文本。默认为：'该输入项只能包含字符和_' | VTypes
 | alphanumMask : RegExp 应用到alphanumeric输入的按键过滤器 默认为:/[a-z0-9_]/i | VTypes
 | alphanumText : String 当alphanumeric校验方法返回false时显示的出错提示文本... 当alphanumeric校验方法返回false时显示的出错提示文本。默认为: '该输入项只能包含字符,数字和_' | VTypes
 | emailMask : RegExp 应用到email输入的按键过滤器。关于更复杂的email校验... 应用到email输入的按键过滤器。 关于更复杂的email校验，参见email 方法。默认为：/[a-z0-9_\.\-@]/i | VTypes
 | emailText : String 当email校验方法返回false时显示的出错提示文本... 当email校验方法返回false时显示的出错提示文本。默认为：'该输入项必须是电子邮件地址，格式如： "user@example.com"' | VTypes
 | urlText : String 当url校验方法返回false时显示的出错提示文本... 当email校验方法返回false时显示的出错提示文本。默认为：'该输入项必须是URL地址，格式如： "http://www.example.com"' | VTypes

公共方法

Method Defined By
alpha ( String value ) : Boolean
用来校验alpha值的函数
用来校验alpha值的函数
参数:
  • value : String
    The value
返回值:
  • Boolean
    如果校验通过则返回true，否则返回false。
VTypes
alphanum ( String value ) : Boolean
用来校验alphanumeric值的函数
用来校验alphanumeric值的函数
参数:
  • value : String
    The value
返回值:
  • Boolean
    如果验证通过则返回为true，否则返回false。
VTypes
email ( String value ) : Boolean
用来校验email地址的函数。注意：这只是一个非常基本的校验...
用来校验email地址的函数。 注意：这只是一个非常基本的校验－－－ 通过RFC规范的完整校验是非常复杂的， 并且超越了此类的范畴； 如果需要更复杂的校验规则，可以覆盖此方法。 附加信息，请参阅Wikipedia article on email addresses 的validation部分。这个实现旨在验证如下的emails 'barney@example.de', 'barney.rubble@example.com', 'barney-rubble@example.coop', 'barney+rubble@example.com' .
参数:
  • value : String
    email地址
返回值:
  • Boolean
    验证通过返回true，否则返回false。
VTypes
url ( String value ) : Boolean
用来校验URL的函数
用来校验URL的函数
参数:
  • value : String
    The URL
返回值:
  • Boolean
    如果校验通过则返回true，否则返回false。
VTypes

公共事件

该类没有公共事件。


Class Ext.Fx

包: | Ext
定义类的文件: | Fx.js
类: | Fx
继承自: | Object

该类用来提供基本的动画和视觉效果支持。 注意: 当包含此类时，会自动应用到 Ext.Element ，所以对于所有效果的调用应该通过 Ext.Element 执行，因为效果不是真正定义在 Ext.Element中， Ext.Fx 必须 被 包含 以便Element的视觉效果能够工作。

方法链

最重要的注意点是：虽然Fx的方法和许多非Fx元素方法支持 "方法链"，在其中它们将Element对象本身作为返回值，但是并不能总是在一个方法链中混合这两种情况。 Fx方法使用内部的作用队列，这样每种作用可以被适当地定时和队列化。另一方面，非-Fx方法，没有这种内部的队列，并且总是立即被执行。因为此原因，当在单个的作用链上混合调用Fx和非-Fx方法时，可能并不会总是出现所期望的结果，所以应该小心处理。 参见 callback .

动画效果的锚点选项

运动效果支持8个方向上的锚定，也就是说，你可以选择元素上的 8个不同的锚定点之一，以作为动画效果的起始或者结束点。以下是所有支持的锚定位置：

Value  Description
-----  -----------------------------
tl     左上角
t      顶部边缘正中间
tr     右上角
l      左侧边缘正中间
r      右侧边缘正中间
bl     左下角
b      底部边缘正中间
br     右下角
注意: 虽然一些Fx方法接收详细的定制化参数，配置属性区域展示的，是通用的选项，可以传递给任何Fx方法。

配置项

Config Options Defined By
afterCls : String
在效果过后应用的css类
Fx
afterStyle : String/Object/Function
一个样式描述字符串，例如： "width:100px"，或者一个格式如下的对象{width:"100px"}...
一个样式描述字符串，例如： "width:100px"，或者一个格式如下的对象{width:"100px"}， 或者一个能返回这种描述的方法，在效果结束时它们会被应用到元素上。
Fx
block : Boolean
当效果运行时是否阻塞其它效果排队等待
Fx
callback : Function
当效果结束时调用的方法。 注意：效果在Fx类内部被存取，所以不需要使用回调参数...
当效果结束时调用的方法。 注意：效果在Fx类内部被存取，所以不需要使用回调参数 类指定另一个效果---效果可以简单地被链在一起按顺序调用(例如：
                                el.slideIn().highlight();
回调方法是用来需要在一个特定的效果结束时调用一次的代码。 被操作的元素将作为方法的第一个参数被传递。
Fx
concurrent : Boolean
是否允许后来排队进来的效果作为当前效果同时运行，或者确保它们按次...
是否允许后来排队进来的效果作为当前效果同时运行，或者确保它们按次序运行。
Fx
duration : Number
效果持续的时间长度(以秒计)
Fx
easing : String
效果的一个合法的Ext.lib.Easing值:<div class="mdetail-params"> backBoth backIn backOut bounceBoth bounceIn ...
效果的一个合法的Ext.lib.Easing值:

  • backBoth
  • backIn
  • backOut
  • bounceBoth
  • bounceIn
  • bounceOut
  • easeBoth
  • easeBothStrong
  • easeIn
  • easeInStrong
  • easeNone
  • easeOut
  • easeOutStrong
  • elasticBoth
  • elasticIn
  • elasticOut
Fx
endOpacity : Number
只适用于 fadeIn or fadeOut, 介于 0 和 1 之间的数字，用于指定结束时的透明度。
Fx
remove : Boolean
是否在效果结束之后将元素从DOM中删除并销毁
Fx
scope : Object
callback执行的作用域The scope ( this 引用)， 默认为浏览器窗口。
Fx
stopFx : Boolean
在当前效果运行前是否停止并移除并发的效果...
在当前效果运行前是否停止并移除并发的效果(只用于非阻塞效果)
Fx
useDisplay : Boolean
当隐藏元素时，是否使用display CSS属性代替visibility...
当隐藏元素时，是否使用 displayCSS属性代替 visibility(仅仅应用到将元素在视觉上隐藏的那些效果，其它效果忽略)
Fx

公共属性

该类没有公共属性。

公共方法

Method Defined By
fadeIn ( [ Object options ] ) : Ext.Element
渐显一个元素(从透明到不透明)， 结束时的透明度可以用"endOpacity"配置项指定...
渐显一个元素(从透明到不透明)， 结束时的透明度可以用endOpacity 配置项指定。用法:

                                    // 默认: 从不透明度为0，渐显到不透明度为100%
el.fadeIn();

// 自定义: 在2秒钟之内从不透明度为0，渐显到不透明度为75%
el.fadeIn({ endOpacity: .75, duration: 2});

// 以下的配置项显示的就是Ext的默认值
el.fadeIn({
    endOpacity: 1, //can be any value between 0 and 1 (e.g. .5)
    easing: 'easeOut',
    duration: .5
});
参数:
  • options : Object
    可选 Fx可选属性组成的配置对象
返回值:
  • Ext.Element
    元素本身
Fx
fadeOut ( [ Object options ] ) : Ext.Element
渐隐元素(从不透明到透明)。 可以用"endOpacity"配置项来指定最终的不透明度...
渐隐元素(从不透明到透明)。 可以用endOpacity 配置项来指定最终的不透明度。 注意：IE下需要useDisplay:true，以便能正确地重新显示元素。用法:

                                    // 默认: 从元素当前的不透明度渐隐到0
el.fadeOut();

// 自定义: 在2秒钟之内，从元素当前的不透明度渐隐到不透明度为25%
el.fadeOut({ endOpacity: .25, duration: 2});

// 以下的配置项显示的就是Ext的默认值
el.fadeOut({
    endOpacity: 0, //can be any value between 0 and 1 (e.g. .5)
    easing: 'easeOut',
    duration: .5,
    remove: false,
    useDisplay: false
});
参数:
  • options : Object
    可选 Fx可选属性组成的配置对象
返回值:
  • Ext.Element
    元素本身
Fx
frame ( [ String color ], [ Number count ], [ Object options ] ) : Ext.Element
显示一个爆炸波纹，削弱边框来绘制Element的正确位置...
显示一个爆炸波纹，削弱边框来绘制Element的正确位置。用法:

                                    // 默认: 单个淡蓝色波纹
el.frame();

// 自定义: 三个红色波纹，一共持续3秒钟
el.frame("ff0000", 3, { duration: 3 });

// 以下的配置项显示的就是Ext的默认值
el.frame("C3DAF9", 1, {
    duration: 1 //每个波纹持续的时间。
    // 注意: 削弱效果是不可配置的，如果包含，将会被忽略
});
参数:
  • color : String
    可选 边框颜色。应该是一个6个十六进制字符，不以#开头 (默认值为淡蓝: 'C3DAF9')。
  • count : Number
    可选 需要显示的波纹数目(默认值为 1)
  • options : Object
    可选 Fx可选属性组成的配置对象
返回值:
  • Ext.Element
    元素本身
Fx
ghost ( [ String anchor ], [ Object options ] ) : Ext.Element
当从视区中淡出时滑动元素。 可选择传递一个锚点来设置效果最终的位置...
当从视区中淡出时滑动元素。 可选择传递一个锚点来设置效果最终的位置。用法:

                                    // 默认: 当淡出元素时向下滑动元素
el.ghost();

// 自定义: 向右侧滑动元素，持续2秒钟
el.ghost('r', { duration: 2 });

// 以下的配置项显示的就是Ext的默认值
el.ghost('b', {
    easing: 'easeOut',
    duration: .5,
    remove: false,
    useDisplay: false
});
参数:
  • anchor : String
    可选 任何一个合法的Fx锚点位置(默认为bottom: 'b')
  • options : Object
    可选 Fx可选属性组成的配置对象
返回值:
  • Ext.Element
    元素本身
Fx
hasActiveFx () : Boolean
如果元素有正在运行或者排队的效果，返回true，否则返回false。
如果元素有正在运行或者排队的效果，返回true，否则返回false。
参数:
  • 无。
返回值:
  • Boolean
    如果元素有正在运行的效果则返回true，否则false
Fx
hasFxBlock () : Boolean
如果元素当前出于阻塞状态，返回true，这样其它的效果 不能在其后排队，直到当前效果完成...
如果元素当前出于阻塞状态，返回true，这样其它的效果 不能在其后排队，直到当前效果完成， 否则如果没有设置阻塞，返回false。 此方法一般用来确定用户操作发起的效果在相同的效果重新开始之前优先执行完成 (例如：仅仅触发一次效果，即使用户点击了多次)。
参数:
  • 无。
返回值:
  • Boolean
    阻塞为true，否则为false
Fx
highlight ( [ String color ], [ Object options ] ) : Ext.Element
通过设置一个颜色来高亮显示元素 (默认应用到background-color，但是页可以使用"attr"配置项来改变)...
通过设置一个颜色来高亮显示元素 (默认应用到background-color，但是页可以使用"attr"配置项来改变) 然后淡出回到原来的颜色。 如果没有原来的颜色可用，你应该提供一个"endColor"配置项， 它将在动画效果之后被清除掉。用法:

                                    // 默认: 背景高亮黄色显示
el.highlight();

// 自定义: 将前景文本高亮显示为蓝色 持续 2秒钟
el.highlight("0000ff", { attr: 'color', duration: 2 });

// 以下的配置项显示的就是Ext的默认值
el.highlight("ffff9c", {
    attr: "background-color", //可以是任何合法的支持一个颜色值的CSS参数（属性）
    endColor: (current color) or "ffffff",
    easing: 'easeIn',
    duration: 1
});
参数:
  • color : String
    可选 高亮的颜色。应该是6位十六进制字符，不以#开头(默认值为 yellow: 'ffff9c')
  • Fx可选属性组成的配置对象 : Object
    可选
返回值:
  • Ext.Element
    元素本身
Fx
pause ( Number seconds ) : Ext.Element
在一个并发的排队中的效果开始之前，创建一个暂停。 如果在暂停之后没有排队中效果...
在一个并发的排队中的效果开始之前，创建一个暂停。 如果在暂停之后没有排队中效果，此方法没有作用。用法:
                                el.pause(1);
参数:
  • seconds : Number
    以秒为单位的暂停时间
返回值:
  • Ext.Element
    元素本身
Fx
puff ( [ Object options ] ) : Ext.Element
淡出元素，同时将它向四周扩张。当此效果结束时，元素将被隐藏(visibility = 'hidden')...
淡出元素，同时将它向四周扩张。当此效果结束时， 元素将被隐藏(visibility = 'hidden') ，但是块元素在文档中仍然占有空间。 如果需要，必须使用'remove'配置项将元素从DOM中删除。用法:

                                    // 默认

el.puff();

// 以下的配置项显示的就是Ext的默认值
el.puff({
    easing: 'easeOut',
    duration: .5,
    remove: false,
    useDisplay: false
});
参数:
  • options : Object
    可选 Fx可选属性组成的配置对象
返回值:
  • Ext.Element
    元素本身
Fx
scale ( Number width , Number height , [ Object options ] ) : Ext.Element
元素的尺寸变换过度动画，从一个起始的height/width到一个结束的height/width ...
元素的尺寸变换过度动画，从一个起始的height/width到一个结束的height/width。这个方法是shift的一种简便实现，用法:

                                    // 将高度和宽度变化到100x100像素
el.scale(100, 100);

// 以下的配置项显示的就是Ext的默认值。 高宽默认 和
// 元素's 现有值一致， 如果 如果传值为空。
el.scale(
    [element's width],
    [element's height], {
        easing: 'easeOut',
        duration: .35
    }
);
参数:
  • width : Number
    新的宽度（传递undefined则保持初始宽度）
  • height : Number
    新的高度（传递undefined则保持初始高度）
  • options : Object
    可选 Fx可选属性组成的配置对象
返回值:
  • Ext.Element
    元素本身
Fx
sequenceFx () : Ext.Element
确保在调用sequenceFx方法之后， 所有排队的效果在元素上被按顺序执行...
确保在调用sequenceFx方法之后， 所有排队的效果在元素上被按顺序执行。与syncFx刚好相反。
参数:
  • 无。
返回值:
  • Ext.Element
    元素本身
Fx
shift ( Object options ) : Ext.Element
为元素维度的任何组合使用转换动画，xy位置and/or不透明度...
为元素维度的任何组合使用转换动画，xy位置and/or不透明度。 任何在配置对象中没有指定的属性都不会改变。 为了方法能有效， 此效果要求至少在配置对象中传递一个新的尺寸、位置或者不透明度设置。 用法:

                                    // 当改变高度和不透明度时，水平滑动元素到x位置为200处
el.shift({ x: 200, height: 50, opacity: .8 });

// 以下的配置项显示的就是Ext的默认值
el.shift({
    width: [element's width],
    height: [element's height],
    x: [element's x position],
    y: [element's y position],
    opacity: [element's opacity],
    easing: 'easeOut',
    duration: .35
});
参数:
  • options : Object
    Fx可选属性组成的配置对象
返回值:
  • Ext.Element
    元素本身
Fx
slideIn ( [ String anchor ], [ Object options ] ) : Ext.Element
将元素滑动进入可见区域。 可以选择传递一个锚点，以设置滑动效果的起始点...
将元素滑动进入可见区域。 可以选择传递一个锚点，以设置滑动效果的起始点。 如果需要，此方法将自动用一个固定大小的容器包装 元素。 合法的锚点选项，参见Fx类概述。用法:

                                    // 默认: 元素从顶部滑入
el.slideIn();

// 自定义: 元素从右侧滑入，效果持续2秒钟
el.slideIn('r', { duration: 2 });

// 以下的配置项显示的就是Ext的默认值
el.slideIn('t', {
    easing: 'easeOut',
    duration: .5
});
参数:
  • anchor : String
    可选 Fx合法锚定位置之一(默认值为 top: 't')
  • options : Object
    可选 Fx可选属性组成的配置对象
返回值:
  • Ext.Element
    元素本身
Fx
slideOut ( [ String anchor ], [ Object options ] ) : Ext.Element
将元素从可见区域滑动出去。 可以选择传递一个锚点，以设置滑动效果的结束点...
将元素从可见区域滑动出去。 可以选择传递一个锚点，以设置滑动效果的结束点。 当效果结束时，元素将被隐藏(visibility = 'hidden') ，但是块元素仍然在文档中占据空间。如果需要，必须使用'remove'配置项将元素从DOM中删除。如果需要，此方法将自动用一个固定大小的容器来包装元素。合法的锚点选项，参见Fx类概述。用法:

                                    // 默认: 从顶部把元素滑出
el.slideOut();

// 自定义: 将元素从右侧滑出，效果 持续 2秒钟
el.slideOut('r', { duration: 2 });

// 以下的配置项显示的就是Ext的默认值
el.slideOut('t', {
    easing: 'easeOut',
    duration: .5,
    remove: false,
    useDisplay: false
});
参数:
  • anchor : String
    可选 合法的Fx锚定位置之一(默认值为 top: 't')
  • options : Object
    可选 Fx可选属性组成的配置对象
返回值:
  • Ext.Element
    The Element
Fx
stopFx () : Ext.Element
停止正在执行的效果，并清除元素内部的效果队列，如果还包含其它没有...
停止正在执行的效果，并清除元素内部的效果队列，如果还包含其它没有启动的效果。
参数:
  • 无。
返回值:
  • Ext.Element
    元素本身
Fx
switchOff ( [ Object options ] ) : Ext.Element
闪烁元素，就像它被点击时一样，然后收缩到它的正中间 (与关闭电视机类似)...
闪烁元素，就像它被点击时一样，然后收缩到它的正中间 (与关闭电视机类似)。 当此效果结束时， 元素将被隐藏(visibility = 'hidden') ，但是块元素在文档中仍然占有空间。 如果需要，必须使用'remove'配置项将元素从DOM中删除。用法:

                                    // 默认

el.switchOff();

// 以下的配置项显示的就是Ext的默认值
el.switchOff({
    easing: 'easeIn',
    duration: .3,
    remove: false,
    useDisplay: false
});
参数:
  • options : Object
    可选 Fx可选属性组成的配置对象
返回值:
  • Ext.Element
    元素本身
Fx
syncFx () : Ext.Element
确保在调用syncFx方法之后， 所有排队的效果在元素上被并发执行...
确保在调用syncFx方法之后， 所有排队的效果在元素上被并发执行。 与sequenceFx刚好相反。
参数:
  • 无。
返回值:
  • Ext.Element
    元素本身
Fx

公共事件

该类没有公共事件。


Observable
    AbstractSelectionModel

Class Ext.grid.AbstractSelectionModel

包: | Ext.grid
定义类的文件: | AbstractSelectionModel.js
类: | AbstractSelectionModel
子类: | CellSelectionModel, RowSelectionModel
继承自: | Observable
grid的选区模型(SelectionModel)提供的基类。该类是抽象类不能直接实例化，应当由子类实现该接口。

配置项

Config Options Defined By
listeners : Object
一个包含一个或多个事件处理器的配置对象，会在初始化的时候被添加到目标对象上...

一个包含一个或多个事件处理器的配置对象，会在初始化的时候被添加到目标对象上。 该配置对象应该是一个有效的监听器配置对象就像 addListener例子中指定的一样可一次附加多个处理器。

ExtJs Components上的DOM事件

一些 ExtJs Component 类导出时会选择一些DOM事件(例如 "click", "mouseover" 等等), 这通常只是在有额外的值可以被添加时发生。例如DataView类的 click事件会传递被点击的节点。也可以直接在Component的HTMLElementevent上访问DOM事件，但必需在Component被渲染后监听器才能添加到Element 上。可以按照以下步骤添加插件:

// 插件会用一个监听器配置对象进行配置。
//该组件会被添加到所有处理方法的参数列表上。
Ext.DomObserver = Ext.extend(Object, {
    constructor: function(config) {
        this.listeners = config.listeners ? config.listeners : config;
    },

    // 组件将自己传递进了插件的初始化方法里
    init: function(c) {
        var p, l = this.listeners;
        for (p in l) {
            if (Ext.isFunction(l[p])) {
                l[p] = this.createHandler(l[p], c);
            } else {
                l[p].fn = this.createHandler(l[p].fn, c);
            }
        }

        // 渲染后立即添加监听器到元素上
        c.render = c.render.createSequence(function() {
            var e = c.getEl();
            if (e) {
                e.on(l);
            }
        });
    },

    createHandler: function(fn, c) {
        return function(e) {
            fn.call(this, e, c);
        };
    }
});

var combo = new Ext.form.ComboBox({

    // 元素被点击后折叠
    plugins: [ new Ext.DomObserver({
        click: function(evt, comp) {
            comp.collapse();
        }
    })],
    store: myStore,
    typeAhead: true,
    mode: 'local',
    triggerAction: 'all'
});

Observable

公共属性

Property |  | Defined By
 | grid : Object 此SelectionModel是为该GridPanel处理选择操作的。只读。 | AbstractSelectionModel

公共方法

Method Defined By
AbstractSelectionModel ()
参数:
  • 无。
返回值:
  • void
AbstractSelectionModel
addEvents( Object|String o, string Optional. ) : void
添加指定的事件到事件列表上，事件会被该Observable触发。
添加指定的事件到事件列表上，事件会被该Observable触发。
参数:
  • o : Object|String
    以事件名作为属性true作为值的对象 或者当多个事件名被分开的传递时则为第一个事件名。
  • Optional. : string
    事件名被分开的传递时则为事件名。 用法:
    this.addEvents('storeloaded', 'storecleared');
返回值:
  • void
Observable
addListener( String eventName, Function handler, [Object scope], [Object options] ) : void
给对象添加事件处理器。
给对象添加事件处理器。
参数:
  • eventName : String
    监听的事件名。
  • handler : Function
    事件调用的方法
  • scope : Object
    （可选）处理方法执行的作用域 (this的引用 reference)。 如果被忽略。默认为触发事件的对象。
  • options : Object
    （可选）包含处理器配置和属性的对象。 可能包含以下的属性:
    • scope : Object
      处理方法执行的作用域(this的引用) 。 如果被忽略。默认为触发事件的对象。
    • delay : Number
      在触发事件后延迟调用处理器的毫秒数。
    • single : Boolean
      如果为True则添加一个处理器来处理下一次的事件触发（仅一次），然后移除自己。
    • buffer : Number
      使得处理器延迟指定毫秒数后预定的运行在 一个Ext.util.DelayedTask中 。 如果事件在时间内再一次被触发，原始的处理器不会被调用，但是新的处理器会预定的在他的位置上。
    • target : Observable
      如果事件在目标的Observable上触发则仅仅调用处理器， 否则 事件会从子类的Observable上冒泡

    组合选项
    使用这些选项参数,可能会组合出不同类型的监听器：

    一个延迟的，一次性的监听器。

    myDataView.on('click', this.onClick, this, {
single: true,
delay: 100
});

    一次调用附加多个处理器
    该方法同样支持传递一个包含指定的多个处理器的属性的配置对象参数。

    myGridPanel.on({
'click' : {
    fn: this.onClick,
    scope: this,
    delay: 100
},
'mouseover' : {
    fn: this.onMouseOver,
    scope: this
},
'mouseout' : {
    fn: this.onMouseOut,
    scope: this
}
});

    或者一个简写的语法：

    myGridPanel.on({
'click' : this.onClick,
'mouseover' : this.onMouseOver,
'mouseout' : this.onMouseOut,
 scope: this
});
返回值:
  • void
Observable
enableBubble( String/Array events ) :void
是否现在使得事件会被该Observable触发并调用 this.getBubbleTarget()方法在拥有者的继承树...

是否现在使得事件会被该Observable触发并调用 this.getBubbleTarget()方法在拥有者的继承树中冒泡。Observable的基础类中没有该方法的实现。

该方法一般被Ext.Components用来冒泡事件到拥有者的容器。参看Ext.Component.getBubbleTarget默认的实现 在Ext.Component中返回组件的直接拥有者。但是如果需要的是一个已知的目标，该方法可以被重写来更快的访问需求的目标。

例子:

Ext.override(Ext.form.Field, {
    // 添加方法到Field的initComponent上改变事件为冒泡
    initComponent : Ext.form.Field.prototype.initComponent.createSequence(function() {
        this.enableBubble('change');
    }),

    // 我们知道我们想让Field的事件冒泡到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() {
            // 如果样式被修改标题会变红。
            myForm.header.setStyle('color', 'red');
        }
    }
});
参数:
  • events : String/Array
    冒泡的事件名，或事件名数组
返回值:
  • void
Observable
fireEvent( String eventName, Object... args ) : Boolean
用传入的参数触发指定的事件 (减去事件名)。 一个事件可以被设置为冒泡 Obse...

用传入的参数触发指定的事件 (减去事件名)。

一个事件可以被设置为冒泡到Observable父类继承树(参看 Ext.Component.getBubbleTarget) 调用enableBubble实现。

参数:
  • eventName : String
    触发的事件名。
  • args : Object...
    传递给处理器的可变长度参数。
返回值:
  • Boolean
    如果有任何的处理器返回false则返回false，否则返回true。
Observable
hasListener( String eventName ) : Boolean
检测对象是否包含指定事件的任何监听器
检测对象是否包含指定事件的任何监听器
参数:
  • eventName : String
    检测的事件名
返回值:
  • Boolean
    如果事件被监听则为true，否则为false
Observable
isLocked () : Boolean
如果选区被锁定返回true。
如果选区被锁定返回true。
参数:
  • 无。
返回值:
  • Boolean
AbstractSelectionModel
lock () : void
锁定选区。
锁定选区。
参数:
  • 无。
返回值:
  • void
AbstractSelectionModel
on( String eventName, Function handler, [Object scope], [Object options] ) : void
给对象添加事件处理器 (addListener的简写形式)
给对象添加事件处理器 (addListener的简写形式。)
参数:
  • eventName : String
    监听的事件类型
  • handler : Function
    事件调用的方法
  • scope : Object
    （可选）处理方法执行时的作用域 (this 的引用)。 如果被忽略。默认为触发事件的对象。
  • options : Object
    可选 包含处理器配置的对象。
返回值:
  • void
Observable
purgeListeners() : void
移除对象上所有的监听器
移除对象上所有的监听器
参数:
  • 无。
返回值:
  • void
Observable
relayEvents( Object o, Array events ) : void
从指定的Observable上传递选择的事件就好像被当前对象触发一样。
从指定的Observable上传递选择的事件就好像被当前对象触发一样。
参数:
  • o : Object
    该Observable上的事件被当前对象传递。
  • events : Array
    传递的数组名。
返回值:
  • void
Observable
removeListener( String eventName, Function handler, [Object scope] ) : void
删除一个事件处理器。
删除一个事件处理器。
参数:
  • eventName : String
    处理器关联的事件类型。
  • handler : Function
    移除的处理器。 这应该是传递到addListener里的方法的引用。
  • scope : Object
    （可选）处理器指定的初始作用域。
返回值:
  • void
Observable
resumeEvents() : void
重新开始触发事件。(参见suspendEvents) 如果事件以queueSuspended参数被挂起，则在事件被挂起时 ...
重新开始触发事件。(参见 suspendEvents) 如果事件以queueSuspended 参数被挂起，则在事件被挂起时触发的事件会被传递到所有的监听器上
参数:
  • 无。
返回值:
  • void
Observable
suspendEvents( Boolean queueSuspended ) : void
暂停触发所有的事件。 (参看resumeEvents)
暂停触发所有的事件。（参看 resumeEvents)
参数:
  • queueSuspended : Boolean
    如果传递为true则排列好暂停的事件使得在调用 resumeEvents 后再触发它们，而不是抛弃所有暂停的事件。
返回值:
  • void
Observable
un( String eventName, Function handler, [Object scope] ) : void
删除一个事件处理器(removeListener方法的简写形式)
删除一个事件处理器(removeListener方法的简写形式。)
参数:
  • eventName : String
    处理器关联的事件类型
  • handler : Function
    被删除的处理器 这应该是传入 addListener 中的方法的引用。
  • scope : Object
    （可选）为处理器指定的初始作用域。
返回值:
  • void
Observable
unlock () : void
解除选区的锁定。
解除选区的锁定。
参数:
  • 无。
返回值:
  • void
AbstractSelectionModel

公共事件

该类没有公共事件。


Column
    BooleanColumn

Class Ext.grid.BooleanColumn

包: | Ext.grid
定义类的文件: | Column.js
类: | BooleanColumn
继承自: | Column

一个列定义类，用来渲染布尔型数据字段。更多细节参见 Ext.grid.Column 的 xtype 配置项。

配置项

Config Options Defined By
align : String
(可选)设置列的CSS text-align属性。默认值为undefined。
Column
css : String
(可选)可选，定义内嵌css样式的字符串。并应用到表格中的所有列的单元格...
(可选)可选，定义内嵌css样式的字符串。并应用到表格中的所有列的单元格(不包括表头部分)。默认值为undefined。
Column
dataIndex : String
(必填)在grid中的Ext.data.Store里面的Ext.data.Record中用来定义这个字段的名称，可以从中获取这个列的值。

(必填)在grid中的Ext.data.Store里面的Ext.data.Record中用来定义这个字段的名称，可以从中获取这个列的值。

Column
editable : Boolean
(可选)默认值为true，可以配置editor 。设置为false，初始化时此列禁用编辑...
(可选)默认值为true，可以配置editor 。设置为false，初始化时此列禁用编辑功能。使用Ext.grid.ColumnModel.setEditable()可以动态改变初始化配置。
Column
editor : Ext.form.Field
(可选)如果grid支持可编辑功能，要可以使用Ext.form.Field编辑该列的的值...
(可选)如果grid支持可编辑功能，要可以使用Ext.form.Field编辑该列的的值。见editable 。
Column
emptyGroupText : String
(可选)如果grid是被一个Ext.grid.GroupingView渲染，这个选项可以...
(可选)如果grid是被一个Ext.grid.GroupingView渲染，这个选项可以用来指定一个空的分组要显示的文本。 默认值为Ext.grid.GroupingView.emptyGroupText。
Column
falseText : String
当列的值为false(而不是undefined)时renderer所返回的字符串 (默认为'false')。
BooleanColumn
fixed : Boolean
(可选)如果为true，不能改变列的宽度。默认值为false。
Column
groupName : String
(可选)如果grid是被一个Ext.grid.GroupingView渲染，这个属性可以...
(可选)如果grid是被一个Ext.grid.GroupingView渲染，这个属性可以被用来指定按字段分组后在小组行标题的前缀名称。 详见groupRenderer和Ext.grid.GroupingView.showGroupName。
Column
groupRenderer : Function
(可选)如果grid是被一个Ext.grid.GroupingView渲染，这个选项指定...

(可选)如果grid是被一个Ext.grid.GroupingView渲染，这个选项指定的函数可以用来格式化分组字段值显示在组头的功能。 如果groupRenderer未指定，配置的渲染器renderer 将被调用；如果 renderer 也同样未指定，分组字段的新值将被使用。

被调用的函数(无论是 groupRenderer 或 renderer )将通过以下参数调用：

  • v : Object

    该组字段新值。

  • unused : undefined

    未使用的参数。

  • r : Ext.data.Record

    Record对象，为一行提供数据，此行导致了分组的改变。

  • rowIndex : Number

    导致分组改变的Record的行号。

  • colIndex : Number

    分组依据字段的列序号。

  • ds : Ext.data.Store

    提供数据Model的Store。

该函数应返回一个字符串值。

Column
groupable : Boolean
(可选)如果grid是被一个Ext.grid.GroupingView渲染，这个属性可以...
(可选)如果grid是被一个Ext.grid.GroupingView渲染，这个属性可以用来禁用表头菜单中根据字段分组功能。 默认值为true，使该列的表头菜单中有该选项。设置为false，表头菜单中的该选项被设为disable状态。 参见 groupName 。
Column
header : String
(可选)显示在网格视图头部作为标题文本的innerHTML(可以支持html标签)。注...
(可选)显示在网格视图头部作为标题文本的innerHTML(可以支持html标签)。注:有一个可点击的表头，没有没有文本显示使用' '。
Column
hidden : Boolean
(可选)设置为true，初始化时隐藏此列。默认值为 false。一个隐藏的列...
(可选)设置为true，初始化时隐藏此列。默认值为 false。一个隐藏的列通过标题菜单可能会显示。如果一列是永远不会被显示，那么在所有列中根本不包含此列模型。
Column
hideable : Boolean
(可选)设置为false，以防止用户隐藏该列(默认值为true)。在grid中为了不让...
(可选)设置为false，以防止用户隐藏该列(默认值为true)。在grid中为了不让所有的列隐藏，使用Ext.grid.GridPanel.enableColumnHide 代替。
Column
id : String
(可选)一个标识该列的名称(默认为该列的初始化依次位置)。该id是用来创建一个CSS样式的名字...
(可选)一个标识该列的名称(默认为该列的初始化依次位置)。 该id是用来创建一个CSS样式的名字，适用于所有表格的单元格(包括标题)，在这列(在这里id不需要独一无二)。 该类名采用的格式
x-grid3-td-id
表头单元格也将收到这类名字，但也有这类
x-grid3-hd
因此，针对表头单元格，使用CSS选择器，例如:
.x-grid3-hd-row .x-grid3-td-id
gird的Ext.grid.GridPanel.autoExpandColumn配置通过这种独特的标识选项引用该列。
Column
menuDisabled : Boolean
(可选)设置为true，禁用表头菜单。 默认值为false。
Column
renderer : Function
(可选)当该方法通过传递以下参数时，会返回可显示的数据:
(可选)当该方法通过传递以下参数时，会返回可显示的数据:
  • value : Object

    该单元格的数据值。

  • metadata : Object

    一个对象，您可以在其中设置以下属性:

    • css : String

      一个添加到该单元格的TD元素上的CSS样式名。

    • attr : String

      一个定义HTML属性的字符串，应用到数据容器内的表格单元格元素上(例如:'style="color:red;"')。

  • record : Ext.data.record

    从数据中提取的Ext.data.Record。

  • rowIndex : Number

    Row index

  • colIndex : Number

    Column index

  • store : Ext.data.Store

    从该Ext.data.Store对象中提取记录。

Column
resizable : Boolean
(可选)值为false的话，不能改变列的大小。默认值为true。
Column
scope : Object
(可选)在作用域(this 参考值)中执行渲染。默认值为Column配置对象。
Column
sortable : Boolean
(可选)设置为true，此列允许排序。默认值为Ext.grid.ColumnModel.defaultSortable 属性值...
(可选)设置为true，此列允许排序。默认值为Ext.grid.ColumnModel.defaultSortable 属性值。无论是本地/远程使用排序都是在 Ext.data.Store.remoteSort 中指定。
Column
tooltip : String
(可选)使用一个字符串文本作为列表头的提示语。如果已激活过Quicktips，这个值将被作为...
(可选)使用一个字符串文本作为列表头的提示语。如果已激活过Quicktips，这个值将被作为快速提示文本，否则将被设置为表头的HTML'title'属性。默认值为''。
Column
trueText : String
当列的值不为否时renderer所返回的字符串(默认为 'true')。
BooleanColumn
undefinedText : String
当列的值为undefined时renderer所返回的字符串(默认为 ' ')。
BooleanColumn
width : Number
(可选)该列的初始化宽度。如果有下列配置，每列的宽度也会受到影响...
(可选)该列的初始化宽度。如果有下列配置，每列的宽度也会受到影响:
  • Ext.grid.GridPanel. autoExpandColumn
  • Ext.grid.GridView. forceFit

    通过指定forceFit:true，non-fixed width网格的列将被重新均匀分布(基于关联初始宽度)，因此不会出现横向滚动条。

  • Ext.grid.GridView. autoFill
  • Ext.grid.GridPanel. minColumnWidth

    • 注:当确定了每列的宽度，会在右侧预留一个空间给垂直滚动条。该Ext.grid.GridView. scrollOffset 可以被修改，以减少或取消其保留部分。

Column
xtype : String
(可选)其中引用了一个String类型的预定义Ext.grid.Column子类和预先设定的一个...
(可选)其中引用了一个String类型的预定义Ext.grid.Column 子类和预先设定的一个适当的 renderer 可以很容易地成为ColumnModel的一个配置。预定义Ext.grid.Column子类的类型有：
  • gridcolumn : Ext.grid.Column ( 默认)

  • booleancolumn : Ext.grid.BooleanColumn

  • numbercolumn : Ext.grid.NumberColumn

  • datecolumn : Ext.grid.DateColumn

  • templatecolumn : Ext.grid.TemplateColumn

指定的 xtype 配置属性可以作为指定的Column的配置属性，例如:

var grid = new Ext.grid.GridPanel({
    ...
    columns: [{
        header: 'Last Updated',
        dataIndex: 'lastChange',
        width: 85,
        sortable: true,
        //renderer: Ext.util.Format.dateRenderer('m/d/Y'),
        xtype: 'datecolumn', // 使用xtype代替渲染器 use xtype instead of renderer
        format: 'M/d/Y' // configuration property for Ext.grid.DateColumn

    }, {
        ...
    }]
});
Column

公共属性

Property Defined By
renderer : Function
(可选)当该方法通过传递以下参数时，会返回可显示的数据:
(可选)当该方法通过传递以下参数时，会返回可显示的数据:
  • value : Object

    该单元格的数据值。

  • metadata : Object

    一个对象，您可以在其中设置以下属性:

    • css : String

      一个添加到该单元格的TD元素上的CSS样式名。

    • attr : String

      一个定义HTML属性的字符串，应用到数据容器内的表格单元格元素上(例如:'style="color:red;"')。

  • record : Ext.data.record

    从数据中提取的Ext.data.Record。

  • rowIndex : Number

    Row index

  • colIndex : Number

    Column index

  • store : Ext.data.Store

    从该Ext.data.Store对象中提取记录。

Column

公共方法

Method Defined By
getCellEditor ( Number rowIndex ) : Ext.Editor
返回一个为了包装编辑单元格列的Field而定义的editor。
返回一个为了包装编辑单元格列的Field而定义的editor。
参数:
  • rowIndex : Number
    The row index
返回值:
  • Ext.Editor
Column
setEditor ( Ext.Editor/Ext.form.Field editor ) : void
为该列设置一个新的编辑器。
为该列设置一个新的编辑器。
参数:
  • editor : Ext.Editor/Ext.form.Field
    The editor to set
返回值:
  • void
Column

公共事件

该类没有公共事件。


Observable
    AbstractSelectionModel
      CellSelectionModel

Class Ext.grid.CellSelectionModel

包: | Ext.grid
定义类的文件: | CellSelectionModel.js
类: | CellSelectionModel
继承自: | AbstractSelectionModel
该类提供了单独选中grid里面单个单元格功能的基本实现。选中的对象中包含以下属性:
  • cell : 见getSelectedCell方法
  • record : Ext.data.record 该Record包含了选中行的数据。

配置项

Config Options Defined By
listeners : Object
一个包含一个或多个事件处理器的配置对象，会在初始化的时候被添加到目标对象上...

一个包含一个或多个事件处理器的配置对象，会在初始化的时候被添加到目标对象上。 该配置对象应该是一个有效的监听器配置对象就像 addListener例子中指定的一样可一次附加多个处理器。

ExtJs Components上的DOM事件

一些 ExtJs Component 类导出时会选择一些DOM事件(例如 "click", "mouseover" 等等), 这通常只是在有额外的值可以被添加时发生。例如DataView类的 click事件会传递被点击的节点。也可以直接在Component的HTMLElementevent上访问DOM事件，但必需在Component被渲染后监听器才能添加到Element 上。可以按照以下步骤添加插件:

// 插件会用一个监听器配置对象进行配置。
//该组件会被添加到所有处理方法的参数列表上。
Ext.DomObserver = Ext.extend(Object, {
    constructor: function(config) {
        this.listeners = config.listeners ? config.listeners : config;
    },

    // 组件将自己传递进了插件的初始化方法里
    init: function(c) {
        var p, l = this.listeners;
        for (p in l) {
            if (Ext.isFunction(l[p])) {
                l[p] = this.createHandler(l[p], c);
            } else {
                l[p].fn = this.createHandler(l[p].fn, c);
            }
        }

        // 渲染后立即添加监听器到元素上
        c.render = c.render.createSequence(function() {
            var e = c.getEl();
            if (e) {
                e.on(l);
            }
        });
    },

    createHandler: function(fn, c) {
        return function(e) {
            fn.call(this, e, c);
        };
    }
});

var combo = new Ext.form.ComboBox({

    // 元素被点击后折叠
    plugins: [ new Ext.DomObserver({
        click: function(evt, comp) {
            comp.collapse();
        }
    })],
    store: myStore,
    typeAhead: true,
    mode: 'local',
    triggerAction: 'all'
});

Observable

公共属性

Property |  | Defined By
 | grid : Object 此SelectionModel是为该GridPanel处理选择操作的。只读。 | AbstractSelectionModel

公共方法

Method Defined By
CellSelectionModel ( Object config )
参数:
  • config : Object
    The object containing the configuration of this model.
返回值:
  • void
CellSelectionModel
addEvents( Object|String o, string Optional. ) : void
添加指定的事件到事件列表上，事件会被该Observable触发。
添加指定的事件到事件列表上，事件会被该Observable触发。
参数:
  • o : Object|String
    以事件名作为属性true作为值的对象 或者当多个事件名被分开的传递时则为第一个事件名。
  • Optional. : string
    事件名被分开的传递时则为事件名。 用法:
    this.addEvents('storeloaded', 'storecleared');
返回值:
  • void
Observable
addListener( String eventName, Function handler, [Object scope], [Object options] ) : void
给对象添加事件处理器。
给对象添加事件处理器。
参数:
  • eventName : String
    监听的事件名。
  • handler : Function
    事件调用的方法
  • scope : Object
    （可选）处理方法执行的作用域 (this的引用 reference)。 如果被忽略。默认为触发事件的对象。
  • options : Object
    （可选）包含处理器配置和属性的对象。 可能包含以下的属性:
    • scope : Object
      处理方法执行的作用域(this的引用) 。 如果被忽略。默认为触发事件的对象。
    • delay : Number
      在触发事件后延迟调用处理器的毫秒数。
    • single : Boolean
      如果为True则添加一个处理器来处理下一次的事件触发（仅一次），然后移除自己。
    • buffer : Number
      使得处理器延迟指定毫秒数后预定的运行在 一个Ext.util.DelayedTask中 。 如果事件在时间内再一次被触发，原始的处理器不会被调用，但是新的处理器会预定的在他的位置上。
    • target : Observable
      如果事件在目标的Observable上触发则仅仅调用处理器， 否则 事件会从子类的Observable上冒泡

    组合选项
    使用这些选项参数,可能会组合出不同类型的监听器：

    一个延迟的，一次性的监听器。

    myDataView.on('click', this.onClick, this, {
single: true,
delay: 100
});

    一次调用附加多个处理器
    该方法同样支持传递一个包含指定的多个处理器的属性的配置对象参数。

    myGridPanel.on({
'click' : {
    fn: this.onClick,
    scope: this,
    delay: 100
},
'mouseover' : {
    fn: this.onMouseOver,
    scope: this
},
'mouseout' : {
    fn: this.onMouseOut,
    scope: this
}
});

    或者一个简写的语法：

    myGridPanel.on({
'click' : this.onClick,
'mouseover' : this.onMouseOver,
'mouseout' : this.onMouseOut,
 scope: this
});
返回值:
  • void
Observable
clearSelections ( Boolean preventNotify ) : void
清除所有选中的项。
清除所有选中的项。
参数:
  • preventNotify : Boolean
    设置为true，阻止通知gridview选中项已发生改变。
返回值:
  • void
CellSelectionModel
enableBubble( String/Array events ) :void
是否现在使得事件会被该Observable触发并调用 this.getBubbleTarget()方法在拥有者的继承树...

是否现在使得事件会被该Observable触发并调用 this.getBubbleTarget()方法在拥有者的继承树中冒泡。Observable的基础类中没有该方法的实现。

该方法一般被Ext.Components用来冒泡事件到拥有者的容器。参看Ext.Component.getBubbleTarget默认的实现 在Ext.Component中返回组件的直接拥有者。但是如果需要的是一个已知的目标，该方法可以被重写来更快的访问需求的目标。

例子:

Ext.override(Ext.form.Field, {
    // 添加方法到Field的initComponent上改变事件为冒泡
    initComponent : Ext.form.Field.prototype.initComponent.createSequence(function() {
        this.enableBubble('change');
    }),

    // 我们知道我们想让Field的事件冒泡到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() {
            // 如果样式被修改标题会变红。
            myForm.header.setStyle('color', 'red');
        }
    }
});
参数:
  • events : String/Array
    冒泡的事件名，或事件名数组
返回值:
  • void
Observable
fireEvent( String eventName, Object... args ) : Boolean
用传入的参数触发指定的事件 (减去事件名)。 一个事件可以被设置为冒泡 Obse...

用传入的参数触发指定的事件 (减去事件名)。

一个事件可以被设置为冒泡到Observable父类继承树(参看 Ext.Component.getBubbleTarget) 调用enableBubble实现。

参数:
  • eventName : String
    触发的事件名。
  • args : Object...
    传递给处理器的可变长度参数。
返回值:
  • Boolean
    如果有任何的处理器返回false则返回false，否则返回true。
Observable
getSelectedCell () : Array
以数组形式返回当前选中的单元格的行和列(例如:[0，0])，如果没有选中则返回null...
以数组形式返回当前选中的单元格的行和列(例如:[0，0])，如果没有选中则返回null。该数组中的元素：
  • rowIndex : Number

    选中行的索引

  • cellIndex : Number

    选中列的索引。由于列可能会重新排列，所以该cellIndex不应该被记录到Record中。相反，可以使用cellIndex来获取所选单元格的字段名称，然后使用该字段名称来查找record中的数据值:

// get name
var fieldName = grid.getColumnModel().getDataIndex(cellIndex);
// get data value based on name
var data = record.get(fieldName);

参数:
  • 无。
返回值:
  • Array
    一个包含选中单元格的行序号和列序号的数组，如果没有选中项，则返回null。
CellSelectionModel
hasListener( String eventName ) : Boolean
检测对象是否包含指定事件的任何监听器
检测对象是否包含指定事件的任何监听器
参数:
  • eventName : String
    检测的事件名
返回值:
  • Boolean
    如果事件被监听则为true，否则为false
Observable
hasSelection () : Boolean
如果有选中的项，返回true。
如果有选中的项，返回true。
参数:
  • 无。
返回值:
  • Boolean
CellSelectionModel
isLocked () : Boolean
如果选区被锁定返回true。
如果选区被锁定返回true。
参数:
  • 无。
返回值:
  • Boolean
AbstractSelectionModel
lock () : void
锁定选区。
锁定选区。
参数:
  • 无。
返回值:
  • void
AbstractSelectionModel
on( String eventName, Function handler, [Object scope], [Object options] ) : void
给对象添加事件处理器 (addListener的简写形式)
给对象添加事件处理器 (addListener的简写形式。)
参数:
  • eventName : String
    监听的事件类型
  • handler : Function
    事件调用的方法
  • scope : Object
    （可选）处理方法执行时的作用域 (this 的引用)。 如果被忽略。默认为触发事件的对象。
  • options : Object
    可选 包含处理器配置的对象。
返回值:
  • void
Observable
purgeListeners() : void
移除对象上所有的监听器
移除对象上所有的监听器
参数:
  • 无。
返回值:
  • void
Observable
relayEvents( Object o, Array events ) : void
从指定的Observable上传递选择的事件就好像被当前对象触发一样。
从指定的Observable上传递选择的事件就好像被当前对象触发一样。
参数:
  • o : Object
    该Observable上的事件被当前对象传递。
  • events : Array
    传递的数组名。
返回值:
  • void
Observable
removeListener( String eventName, Function handler, [Object scope] ) : void
删除一个事件处理器。
删除一个事件处理器。
参数:
  • eventName : String
    处理器关联的事件类型。
  • handler : Function
    移除的处理器。 这应该是传递到addListener里的方法的引用。
  • scope : Object
    （可选）处理器指定的初始作用域。
返回值:
  • void
Observable
resumeEvents() : void
重新开始触发事件。(参见suspendEvents) 如果事件以queueSuspended参数被挂起，则在事件被挂起时 ...
重新开始触发事件。(参见 suspendEvents) 如果事件以queueSuspended 参数被挂起，则在事件被挂起时触发的事件会被传递到所有的监听器上
参数:
  • 无。
返回值:
  • void
Observable
select ( Number rowIndex , Number colIndex , [ Boolean preventViewNotify ], [ Boolean preventFocus ], [ Ext.data.Record r ] ) : void
选中一个单元格。在选中单元格前，触发beforecellselect事件。如果单元格验证...
选中一个单元格。在选中单元格前，触发beforecellselect事件。如果单元格验证通过将被选中，并随后触发cellselect和selectionchange事件。
参数:
  • rowIndex : Number
    The index of the row to select
  • colIndex : Number
    The index of the column to select
  • preventViewNotify : Boolean
    (可选)设置为true，将不会通知视图（禁用所选外观更新）
  • preventFocus : Boolean
    (可选) 是否要把焦点放在指定行/列的单元格上。
  • r : Ext.data.Record
    (可选) 根据该record来选择
返回值:
  • void
CellSelectionModel
suspendEvents( Boolean queueSuspended ) : void
暂停触发所有的事件。 (参看resumeEvents)
暂停触发所有的事件。（参看 resumeEvents)
参数:
  • queueSuspended : Boolean
    如果传递为true则排列好暂停的事件使得在调用 resumeEvents 后再触发它们，而不是抛弃所有暂停的事件。
返回值:
  • void
Observable
un( String eventName, Function handler, [Object scope] ) : void
删除一个事件处理器(removeListener方法的简写形式)
删除一个事件处理器(removeListener方法的简写形式。)
参数:
  • eventName : String
    处理器关联的事件类型
  • handler : Function
    被删除的处理器 这应该是传入 addListener 中的方法的引用。
  • scope : Object
    （可选）为处理器指定的初始作用域。
返回值:
  • void
Observable
unlock () : void
解除选区的锁定。
解除选区的锁定。
参数:
  • 无。
返回值:
  • void
AbstractSelectionModel

公共事件

Event Defined By
beforecellselect : ( SelectionModel this , Number rowIndex , Number colIndex )
在单元格被选中之前触发，返回false取消选择。
在单元格被选中之前触发，返回false取消选择。
监听器将会以如下的参数格式调用:
  • this : SelectionModel
  • rowIndex : Number
    The selected row index
  • colIndex : Number
    The selected cell index
CellSelectionModel
cellselect : ( SelectionModel this , Number rowIndex , Number colIndex )
当选中单元格时触发。
当选中单元格时触发。
监听器将会以如下的参数格式调用:
  • this : SelectionModel
  • rowIndex : Number
    The selected row index
  • colIndex : Number
    The selected cell index
CellSelectionModel
selectionchange : ( SelectionModel this , Object selection )
当前选中项目发生变化时触发。
当前选中项目发生变化时触发。
监听器将会以如下的参数格式调用:
  • this : SelectionModel
  • selection : Object
    如果没有选中的项，为null，否则为一个含有两个属性的对象(o)
    • cell : 见getSelectedCell方法
    • record : Ext.data.record

      被选中项所属行的Record对象

CellSelectionModel


Observable
    AbstractSelectionModel
      RowSelectionModel
        CheckboxSelectionModel

Class Ext.grid.CheckboxSelectionModel

包: | Ext.grid
定义类的文件: | CheckboxSelectionModel.js
类: | CheckboxSelectionModel
继承自: | RowSelectionModel
一个特定的选择模型，它将渲染一列复选框，可以用来选择或反选多行数据。

配置项

Config Options Defined By
checkOnly : Boolean
设置为true，只能通过点击复选框列的复选框才能选中行(默认值为false)。
CheckboxSelectionModel
header : String
任何有效的文本或HTML标签内容，将显示在复选框列的表头单元格中。默认值为...
任何有效的文本或HTML标签内容，将显示在复选框列的表头单元格中。默认值为:

'<div class="x-grid3-hd-checker">&#160;</div>'
默认的CSS样式'x-grid3-hd-checker'会在表头上显示一个复选框，单击该复选框时，提供了自动全选/全部反选的功能。 此字符串可以用任何有效的HTML标签来替代，包括一个简单的文本字符串(例如:'Select Rows'))，但是，只有在指定css样式为'x-grid3-hd-checker'时，才支持自动全选/全部反选的功能。
CheckboxSelectionModel
listeners : Object
一个包含一个或多个事件处理器的配置对象，会在初始化的时候被添加到目标对象上...

一个包含一个或多个事件处理器的配置对象，会在初始化的时候被添加到目标对象上。 该配置对象应该是一个有效的监听器配置对象就像 addListener例子中指定的一样可一次附加多个处理器。

ExtJs Components上的DOM事件

一些 ExtJs Component 类导出时会选择一些DOM事件(例如 "click", "mouseover" 等等), 这通常只是在有额外的值可以被添加时发生。例如DataView类的 click事件会传递被点击的节点。也可以直接在Component的HTMLElementevent上访问DOM事件，但必需在Component被渲染后监听器才能添加到Element 上。可以按照以下步骤添加插件:

// 插件会用一个监听器配置对象进行配置。
//该组件会被添加到所有处理方法的参数列表上。
Ext.DomObserver = Ext.extend(Object, {
    constructor: function(config) {
        this.listeners = config.listeners ? config.listeners : config;
    },

    // 组件将自己传递进了插件的初始化方法里
    init: function(c) {
        var p, l = this.listeners;
        for (p in l) {
            if (Ext.isFunction(l[p])) {
                l[p] = this.createHandler(l[p], c);
            } else {
                l[p].fn = this.createHandler(l[p].fn, c);
            }
        }

        // 渲染后立即添加监听器到元素上
        c.render = c.render.createSequence(function() {
            var e = c.getEl();
            if (e) {
                e.on(l);
            }
        });
    },

    createHandler: function(fn, c) {
        return function(e) {
            fn.call(this, e, c);
        };
    }
});

var combo = new Ext.form.ComboBox({

    // 元素被点击后折叠
    plugins: [ new Ext.DomObserver({
        click: function(evt, comp) {
            comp.collapse();
        }
    })],
    store: myStore,
    typeAhead: true,
    mode: 'local',
    triggerAction: 'all'
});

Observable
moveEditorOnEnter : Boolean
设置为false，将关闭在按下回车时把光标跳到下一个单元格
设置为false，将关闭在按下回车时把光标跳到下一个单元格
RowSelectionModel
singleSelect : Boolean
设置为true，每次只能选中一行(默认值为 false 允许多选)
RowSelectionModel
sortable : Boolean
设置为true，该复选框列支持排序(默认值为false)。
CheckboxSelectionModel
width : Number
复选框列的默认宽度值，单位像素(默认值为20)。
CheckboxSelectionModel

公共属性

Property |  | Defined By
 | grid : Object 此SelectionModel是为该GridPanel处理选择操作的。只读。 | AbstractSelectionModel

公共方法

Method Defined By
CheckboxSelectionModel ( Object config )
参数:
  • config : Object
    The configuration options
返回值:
  • void
CheckboxSelectionModel
addEvents( Object|String o, string Optional. ) : void
添加指定的事件到事件列表上，事件会被该Observable触发。
添加指定的事件到事件列表上，事件会被该Observable触发。
参数:
  • o : Object|String
    以事件名作为属性true作为值的对象 或者当多个事件名被分开的传递时则为第一个事件名。
  • Optional. : string
    事件名被分开的传递时则为事件名。 用法:
    this.addEvents('storeloaded', 'storecleared');
返回值:
  • void
Observable
addListener( String eventName, Function handler, [Object scope], [Object options] ) : void
给对象添加事件处理器。
给对象添加事件处理器。
参数:
  • eventName : String
    监听的事件名。
  • handler : Function
    事件调用的方法
  • scope : Object
    （可选）处理方法执行的作用域 (this的引用 reference)。 如果被忽略。默认为触发事件的对象。
  • options : Object
    （可选）包含处理器配置和属性的对象。 可能包含以下的属性:
    • scope : Object
      处理方法执行的作用域(this的引用) 。 如果被忽略。默认为触发事件的对象。
    • delay : Number
      在触发事件后延迟调用处理器的毫秒数。
    • single : Boolean
      如果为True则添加一个处理器来处理下一次的事件触发（仅一次），然后移除自己。
    • buffer : Number
      使得处理器延迟指定毫秒数后预定的运行在 一个Ext.util.DelayedTask中 。 如果事件在时间内再一次被触发，原始的处理器不会被调用，但是新的处理器会预定的在他的位置上。
    • target : Observable
      如果事件在目标的Observable上触发则仅仅调用处理器， 否则 事件会从子类的Observable上冒泡

    组合选项
    使用这些选项参数,可能会组合出不同类型的监听器：

    一个延迟的，一次性的监听器。

    myDataView.on('click', this.onClick, this, {
single: true,
delay: 100
});

    一次调用附加多个处理器
    该方法同样支持传递一个包含指定的多个处理器的属性的配置对象参数。

    myGridPanel.on({
'click' : {
    fn: this.onClick,
    scope: this,
    delay: 100
},
'mouseover' : {
    fn: this.onMouseOver,
    scope: this
},
'mouseout' : {
    fn: this.onMouseOut,
    scope: this
}
});

    或者一个简写的语法：

    myGridPanel.on({
'click' : this.onClick,
'mouseover' : this.onMouseOver,
'mouseout' : this.onMouseOut,
 scope: this
});
返回值:
  • void
Observable
clearSelections ( [ Boolean fast ] ) : void
清除所有的选中状态。
清除所有的选中状态。 is not locked.
参数:
  • fast : Boolean
    可选 true to bypass the conditional checks and events described in deselectRow.
返回值:
  • void
RowSelectionModel
deselectRange ( Number startRow , Number endRow ) : void
反选一个范围内的所有记录。 所有处于startRow和endRow之间的行都会被反选
反选一个范围内的所有记录。 所有处于startRow和endRow之间的行都会被反选
参数:
  • startRow : Number
    范围内第一行的序号
  • endRow : Number
    范围内最后一行的序号
返回值:
  • void
RowSelectionModel
deselectRow ( Number row , [ Boolean preventViewNotify ] ) : void
反选一行。 Before deselecting a row, checks if the selection model is locked. If this check is satisfied the r...
反选一行。 Before deselecting a row, checks if the selection model is locked. If this check is satisfied the row will be deselected and followed up by firing the rowdeselect and selectionchange events.
参数:
  • row : Number
    将被反选的行号
  • preventViewNotify : Boolean
    可选 指定true来阻止关注这个视图 (disables updating the selected appearance)
返回值:
  • void
RowSelectionModel
each ( Function fn , [ Object scope ] ) : Boolean
使用每个选中的行调用传递进来的方法。 如果调用的这个方法返回false，则停止迭代，当前方法...
使用每个选中的行调用传递进来的方法。 如果调用的这个方法返回false，则停止迭代，当前方法返回false。
参数:
  • fn : Function
    如果所有选中的行都被迭代过，返回true Record.
  • scope : Object
    可选 The scope ( this reference) in which the function is executed. Defaults to this RowSelectionModel.
返回值:
  • Boolean
    true if all selections were iterated
RowSelectionModel
enableBubble( String/Array events ) :void
是否现在使得事件会被该Observable触发并调用 this.getBubbleTarget()方法在拥有者的继承树...

是否现在使得事件会被该Observable触发并调用 this.getBubbleTarget()方法在拥有者的继承树中冒泡。Observable的基础类中没有该方法的实现。

该方法一般被Ext.Components用来冒泡事件到拥有者的容器。参看Ext.Component.getBubbleTarget默认的实现 在Ext.Component中返回组件的直接拥有者。但是如果需要的是一个已知的目标，该方法可以被重写来更快的访问需求的目标。

例子:

Ext.override(Ext.form.Field, {
    // 添加方法到Field的initComponent上改变事件为冒泡
    initComponent : Ext.form.Field.prototype.initComponent.createSequence(function() {
        this.enableBubble('change');
    }),

    // 我们知道我们想让Field的事件冒泡到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() {
            // 如果样式被修改标题会变红。
            myForm.header.setStyle('color', 'red');
        }
    }
});
参数:
  • events : String/Array
    冒泡的事件名，或事件名数组
返回值:
  • void
Observable
fireEvent( String eventName, Object... args ) : Boolean
用传入的参数触发指定的事件 (减去事件名)。 一个事件可以被设置为冒泡 Obse...

用传入的参数触发指定的事件 (减去事件名)。

一个事件可以被设置为冒泡到Observable父类继承树(参看 Ext.Component.getBubbleTarget) 调用enableBubble实现。

参数:
  • eventName : String
    触发的事件名。
  • args : Object...
    传递给处理器的可变长度参数。
返回值:
  • Boolean
    如果有任何的处理器返回false则返回false，否则返回true。
Observable
getCount () : Number
获取选中行总数。
获取选中行总数。
参数:
  • 无。
返回值:
  • Number
RowSelectionModel
getSelected () : Record
返回被第一条被选中的记录
返回被第一条被选中的记录
参数:
  • 无。
返回值:
  • Record
RowSelectionModel
getSelections () : Array
返回所有选中的记录
返回所有选中的记录
参数:
  • 无。
返回值:
  • Array
    选中记录的数组
RowSelectionModel
hasListener( String eventName ) : Boolean
检测对象是否包含指定事件的任何监听器
检测对象是否包含指定事件的任何监听器
参数:
  • eventName : String
    检测的事件名
返回值:
  • Boolean
    如果事件被监听则为true，否则为false
Observable
hasNext () : Boolean
如果还有下一条记录可供选择，返回true
如果还有下一条记录可供选择，返回true
参数:
  • 无。
返回值:
  • Boolean
RowSelectionModel
hasPrevious () : Boolean
如果存在上一条可以选择的记录，返回true
如果存在上一条可以选择的记录，返回true
参数:
  • 无。
返回值:
  • Boolean
RowSelectionModel
hasSelection () : Boolean
如果有选中的行，返回true。
如果有选中的行，返回true。
参数:
  • 无。
返回值:
  • Boolean
RowSelectionModel
isIdSelected ( String id ) : Boolean
如果指定的记录处于选中状态，返回true。
如果指定的记录处于选中状态，返回true。
参数:
  • id : String
    需要检测的记录id
返回值:
  • Boolean
RowSelectionModel
isLocked () : Boolean
如果选区被锁定返回true。
如果选区被锁定返回true。
参数:
  • 无。
返回值:
  • Boolean
AbstractSelectionModel
isSelected ( Number/Record index ) : Boolean
如果指定的行处于选中状态，返回true。
如果指定的行处于选中状态，返回true。
参数:
  • index : Number/Record
    需要检测的记录或者记录序号
返回值:
  • Boolean
RowSelectionModel
lock () : void
锁定选区。
锁定选区。
参数:
  • 无。
返回值:
  • void
AbstractSelectionModel
on( String eventName, Function handler, [Object scope], [Object options] ) : void
给对象添加事件处理器 (addListener的简写形式)
给对象添加事件处理器 (addListener的简写形式。)
参数:
  • eventName : String
    监听的事件类型
  • handler : Function
    事件调用的方法
  • scope : Object
    （可选）处理方法执行时的作用域 (this 的引用)。 如果被忽略。默认为触发事件的对象。
  • options : Object
    可选 包含处理器配置的对象。
返回值:
  • void
Observable
purgeListeners() : void
移除对象上所有的监听器
移除对象上所有的监听器
参数:
  • 无。
返回值:
  • void
Observable
relayEvents( Object o, Array events ) : void
从指定的Observable上传递选择的事件就好像被当前对象触发一样。
从指定的Observable上传递选择的事件就好像被当前对象触发一样。
参数:
  • o : Object
    该Observable上的事件被当前对象传递。
  • events : Array
    传递的数组名。
返回值:
  • void
Observable
removeListener( String eventName, Function handler, [Object scope] ) : void
删除一个事件处理器。
删除一个事件处理器。
参数:
  • eventName : String
    处理器关联的事件类型。
  • handler : Function
    移除的处理器。 这应该是传递到addListener里的方法的引用。
  • scope : Object
    （可选）处理器指定的初始作用域。
返回值:
  • void
Observable
resumeEvents() : void
重新开始触发事件。(参见suspendEvents) 如果事件以queueSuspended参数被挂起，则在事件被挂起时 ...
重新开始触发事件。(参见 suspendEvents) 如果事件以queueSuspended 参数被挂起，则在事件被挂起时触发的事件会被传递到所有的监听器上
参数:
  • 无。
返回值:
  • void
Observable
selectAll () : void
如果选择模式未被锁定就选中所有行。
如果选择模式未被锁定就选中所有行。
参数:
  • 无。
返回值:
  • void
RowSelectionModel
selectFirstRow () : void
选中grid中的第一行。
选中grid中的第一行。
参数:
  • 无。
返回值:
  • void
RowSelectionModel
selectLastRow ( [ Boolean keepExisting ] ) : void
选中最后一行。
选中最后一行。
参数:
  • keepExisting : Boolean
    可选 设置为true将保持当前选中的记录
返回值:
  • void
RowSelectionModel
selectNext ( [ Boolean keepExisting ] ) : Boolean
将紧靠当前选中行最后一行的记录选中。
将紧靠当前选中行最后一行的记录选中。
参数:
  • keepExisting : Boolean
    可选 设置为true将保持当前选中的记录
返回值:
  • Boolean
    如果存在下一行，返回true，否则返回false
RowSelectionModel
selectPrevious ( [ Boolean keepExisting ] ) : Boolean
选中紧靠在最后一条被选中行之前的那一行。
选中紧靠在最后一条被选中行之前的那一行。
参数:
  • keepExisting : Boolean
    可选 设置为true将保持当前选中的记录
返回值:
  • Boolean
    如果存在前一行，返回true；否则返回false
RowSelectionModel
selectRange ( Number startRow , Number endRow , [ Boolean keepExisting ] ) : void
选中一个范围内的所有行。 位于startRow和endRow之间的所有行也将被全部选中。...
选中一个范围内的所有行。 is not locked. 位于startRow和endRow之间的所有行也将被全部选中。
参数:
  • startRow : Number
    范围内第一行的索引
  • endRow : Number
    范围内最后一行的索引
  • keepExisting : Boolean
    可选 True to retain existing selections
返回值:
  • void
RowSelectionModel
selectRecords ( Array records , [ Boolean keepExisting ] ) : void
选中记录
选中记录
参数:
  • records : Array
    The records to select
  • keepExisting : Boolean
    可选 需要选中的记录
返回值:
  • void
RowSelectionModel
selectRow ( Number row , [ Boolean keepExisting ], [ Boolean preventViewNotify ] ) : void
选中一行。 Before selecting a row, checks if the selection model is locked and fires the beforerowselect event. ...
选中一行。 Before selecting a row, checks if the selection model is locked and fires the beforerowselect event. If these checks are satisfied the row will be selected and followed up by firing the rowselect and selectionchange events.
参数:
  • row : Number
    需要选中的行序号
  • keepExisting : Boolean
    可选 设置为true将保持当前选中的记录
  • preventViewNotify : Boolean
    可选 Specify true to prevent notifying the view (disables updating the selected appearance)
返回值:
  • void
RowSelectionModel
selectRows ( Array rows , [ Boolean keepExisting ] ) : void
选中多行。
选中多行。
参数:
  • rows : Array
    Array of the indexes of the row to select
  • keepExisting : Boolean
    可选 设置为true将保持当前选中的记录 (默认值为 false)
返回值:
  • void
RowSelectionModel
suspendEvents( Boolean queueSuspended ) : void
暂停触发所有的事件。 (参看resumeEvents)
暂停触发所有的事件。（参看 resumeEvents)
参数:
  • queueSuspended : Boolean
    如果传递为true则排列好暂停的事件使得在调用 resumeEvents 后再触发它们，而不是抛弃所有暂停的事件。
返回值:
  • void
Observable
un( String eventName, Function handler, [Object scope] ) : void
删除一个事件处理器(removeListener方法的简写形式)
删除一个事件处理器(removeListener方法的简写形式。)
参数:
  • eventName : String
    处理器关联的事件类型
  • handler : Function
    被删除的处理器 这应该是传入 addListener 中的方法的引用。
  • scope : Object
    （可选）为处理器指定的初始作用域。
返回值:
  • void
Observable
unlock () : void
解除选区的锁定。
解除选区的锁定。
参数:
  • 无。
返回值:
  • void
AbstractSelectionModel

公共事件

Event Defined By
beforerowselect : ( SelectionModel this , Number rowIndex , Boolean keepExisting , Record record )
在选中一行数据之前触发，返回false取消选中
在选中一行数据之前触发，返回false取消选中
监听器将会被以如下的参数格式调用:
  • this : SelectionModel
  • rowIndex : Number
    将要被选择的序号
  • keepExisting : Boolean
    False if other selections will be cleared
  • record : Record
    将要被选择的记录
RowSelectionModel
rowdeselect : ( SelectionModel this , Number rowIndex , Record record )
当反选一个行时触发。To prevent deselection lock the selections.
当反选一个行时触发。 To prevent deselection lock the selections.
监听器将会被以如下的参数格式调用:
  • this : SelectionModel
  • rowIndex : Number
  • record : Record
RowSelectionModel
rowselect : ( SelectionModel this , Number rowIndex , Ext.data.Record r )
当选中一行数据时触发。
当选中一行数据时触发。
监听器将会被以如下的参数格式调用:
  • this : SelectionModel
  • rowIndex : Number
    被选择的序号
  • r : Ext.data.Record
    选择的序号
RowSelectionModel
selectionchange : ( SelectionModel this )
当选中状态发生改变时触发
当选中状态发生改变时触发
监听器将会被以如下的参数格式调用:
  • this : SelectionModel
RowSelectionModel


Class Ext.grid.Column

包: | Ext.grid
定义类的文件: | Column.js
类: | Column
子类: | BooleanColumn, DateColumn, NumberColumn, TemplateColumn
继承自: | Object

这个类封装了column配置数据，用于初始化一个ColumnModel使用。

而子类如果提供了其他方式呈现数据，该类传递给到字段中的数据不变，通常作为文本列使用此类呈现。

配置项

Config Options Defined By
align : String
(可选)设置列的CSS text-align属性。默认值为undefined。
Column
css : String
(可选)可选，定义内嵌css样式的字符串。并应用到表格中的所有列的单元格...
(可选)可选，定义内嵌css样式的字符串。并应用到表格中的所有列的单元格(不包括表头部分)。默认值为undefined。
Column
dataIndex : String
(必填)在grid中的Ext.data.Store里面的Ext.data.Record中用来定义这个字段的名称，可以从中获取这个列的值。

(必填)在grid中的Ext.data.Store里面的Ext.data.Record中用来定义这个字段的名称，可以从中获取这个列的值。

Column
editable : Boolean
(可选)默认值为true，可以配置editor 。设置为false，初始化时此列禁用编辑...
(可选)默认值为true，可以配置editor 。设置为false，初始化时此列禁用编辑功能。使用Ext.grid.ColumnModel.setEditable()可以动态改变初始化配置。
Column
editor : Ext.form.Field
(可选)如果grid支持可编辑功能，要可以使用Ext.form.Field编辑该列的的值...
(可选)如果grid支持可编辑功能，要可以使用Ext.form.Field编辑该列的的值。见editable 。
Column
emptyGroupText : String
(可选)如果grid是被一个Ext.grid.GroupingView渲染，这个选项可以...
(可选)如果grid是被一个Ext.grid.GroupingView渲染，这个选项可以用来指定一个空的分组要显示的文本。 默认值为Ext.grid.GroupingView.emptyGroupText。
Column
fixed : Boolean
(可选)如果为true，不能改变列的宽度。默认值为false。
Column
groupName : String
(可选)如果grid是被一个Ext.grid.GroupingView渲染，这个属性可以...
(可选)如果grid是被一个Ext.grid.GroupingView渲染，这个属性可以被用来指定按字段分组后在小组行标题的前缀名称。 详见groupRenderer和Ext.grid.GroupingView.showGroupName。
Column
groupRenderer : Function
(可选)如果grid是被一个Ext.grid.GroupingView渲染，这个选项指定...

(可选)如果grid是被一个Ext.grid.GroupingView渲染，这个选项指定的函数可以用来格式化分组字段值显示在组头的功能。 如果groupRenderer未指定，配置的渲染器renderer 将被调用；如果 renderer 也同样未指定，分组字段的新值将被使用。

被调用的函数(无论是 groupRenderer 或 renderer )将通过以下参数调用：

  • v : Object

    该组字段新值。

  • unused : undefined

    未使用的参数。

  • r : Ext.data.Record

    Record对象，为一行提供数据，此行导致了分组的改变。

  • rowIndex : Number

    导致分组改变的Record的行号。

  • colIndex : Number

    分组依据字段的列序号。

  • ds : Ext.data.Store

    提供数据Model的Store。

该函数应返回一个字符串值。

Column
groupable : Boolean
(可选)如果grid是被一个Ext.grid.GroupingView渲染，这个属性可以...
(可选)如果grid是被一个Ext.grid.GroupingView渲染，这个属性可以用来禁用表头菜单中根据字段分组功能。 默认值为true，使该列的表头菜单中有该选项。设置为false，表头菜单中的该选项被设为disable状态。 参见 groupName 。
Column
header : String
(可选)显示在网格视图头部作为标题文本的innerHTML(可以支持html标签)。注...
(可选)显示在网格视图头部作为标题文本的innerHTML(可以支持html标签)。注:有一个可点击的表头，没有没有文本显示使用' '。
Column
hidden : Boolean
(可选)设置为true，初始化时隐藏此列。默认值为 false。一个隐藏的列...
(可选)设置为true，初始化时隐藏此列。默认值为 false。一个隐藏的列通过标题菜单可能会显示。如果一列是永远不会被显示，那么在所有列中根本不包含此列模型。
Column
hideable : Boolean
(可选)设置为false，以防止用户隐藏该列(默认值为true)。在grid中为了不让...
(可选)设置为false，以防止用户隐藏该列(默认值为true)。在grid中为了不让所有的列隐藏，使用Ext.grid.GridPanel.enableColumnHide 代替。
Column
id : String
(可选)一个标识该列的名称(默认为该列的初始化依次位置)。该id是用来创建一个CSS样式的名字...
(可选)一个标识该列的名称(默认为该列的初始化依次位置)。 该id是用来创建一个CSS样式的名字，适用于所有表格的单元格(包括标题)，在这列(在这里id不需要独一无二)。 该类名采用的格式
x-grid3-td-id
表头单元格也将收到这类名字，但也有这类
x-grid3-hd
因此，针对表头单元格，使用CSS选择器，例如:
.x-grid3-hd-row .x-grid3-td-id
gird的Ext.grid.GridPanel.autoExpandColumn配置通过这种独特的标识选项引用该列。
Column
menuDisabled : Boolean
(可选)设置为true，禁用表头菜单。 默认值为false。
Column
renderer : Function
(可选)当该方法通过传递以下参数时，会返回可显示的数据:
(可选)当该方法通过传递以下参数时，会返回可显示的数据:
  • value : Object

    该单元格的数据值。

  • metadata : Object

    一个对象，您可以在其中设置以下属性:

    • css : String

      一个添加到该单元格的TD元素上的CSS样式名。

    • attr : String

      一个定义HTML属性的字符串，应用到数据容器内的表格单元格元素上(例如:'style="color:red;"')。

  • record : Ext.data.record

    从数据中提取的Ext.data.Record。

  • rowIndex : Number

    Row index

  • colIndex : Number

    Column index

  • store : Ext.data.Store

    从该Ext.data.Store对象中提取记录。

Column
resizable : Boolean
(可选)值为false的话，不能改变列的大小。默认值为true。
Column
scope : Object
(可选)在作用域(this 参考值)中执行渲染。默认值为Column配置对象。
Column
sortable : Boolean
(可选)设置为true，此列允许排序。默认值为Ext.grid.ColumnModel.defaultSortable 属性值...
(可选)设置为true，此列允许排序。默认值为Ext.grid.ColumnModel.defaultSortable 属性值。无论是本地/远程使用排序都是在 Ext.data.Store.remoteSort 中指定。
Column
tooltip : String
(可选)使用一个字符串文本作为列表头的提示语。如果已激活过Quicktips，这个值将被作为...
(可选)使用一个字符串文本作为列表头的提示语。如果已激活过Quicktips，这个值将被作为快速提示文本，否则将被设置为表头的HTML'title'属性。默认值为''。
Column
width : Number
(可选)该列的初始化宽度。如果有下列配置，每列的宽度也会受到影响...
(可选)该列的初始化宽度。如果有下列配置，每列的宽度也会受到影响:
  • Ext.grid.GridPanel. autoExpandColumn
  • Ext.grid.GridView. forceFit

    通过指定forceFit:true，non-fixed width网格的列将被重新均匀分布(基于关联初始宽度)，因此不会出现横向滚动条。

  • Ext.grid.GridView. autoFill
  • Ext.grid.GridPanel. minColumnWidth

    • 注:当确定了每列的宽度，会在右侧预留一个空间给垂直滚动条。该Ext.grid.GridView. scrollOffset 可以被修改，以减少或取消其保留部分。

Column
xtype : String
(可选)其中引用了一个String类型的预定义Ext.grid.Column子类和预先设定的一个...
(可选)其中引用了一个String类型的预定义Ext.grid.Column 子类和预先设定的一个适当的 renderer 可以很容易地成为ColumnModel的一个配置。预定义Ext.grid.Column子类的类型有：
  • gridcolumn : Ext.grid.Column ( 默认)

  • booleancolumn : Ext.grid.BooleanColumn

  • numbercolumn : Ext.grid.NumberColumn

  • datecolumn : Ext.grid.DateColumn

  • templatecolumn : Ext.grid.TemplateColumn

指定的 xtype 配置属性可以作为指定的Column的配置属性，例如:

var grid = new Ext.grid.GridPanel({
    ...
    columns: [{
        header: 'Last Updated',
        dataIndex: 'lastChange',
        width: 85,
        sortable: true,
        //renderer: Ext.util.Format.dateRenderer('m/d/Y'),
        xtype: 'datecolumn', // 使用xtype代替渲染器 use xtype instead of renderer
        format: 'M/d/Y' // configuration property for Ext.grid.DateColumn

    }, {
        ...
    }]
});
Column

公共属性

Property Defined By
renderer : Function
(可选)当该方法通过传递以下参数时，会返回可显示的数据:
(可选)当该方法通过传递以下参数时，会返回可显示的数据:
  • value : Object

    该单元格的数据值。

  • metadata : Object

    一个对象，您可以在其中设置以下属性:

    • css : String

      一个添加到该单元格的TD元素上的CSS样式名。

    • attr : String

      一个定义HTML属性的字符串，应用到数据容器内的表格单元格元素上(例如:'style="color:red;"')。

  • record : Ext.data.record

    从数据中提取的Ext.data.Record。

  • rowIndex : Number

    Row index

  • colIndex : Number

    Column index

  • store : Ext.data.Store

    从该Ext.data.Store对象中提取记录。

Column

公共方法

Method Defined By
getCellEditor ( Number rowIndex ) : Ext.Editor
返回一个为了包装编辑单元格列的Field而定义的editor。
返回一个为了包装编辑单元格列的Field而定义的editor。
参数:
  • rowIndex : Number
    The row index
返回值:
  • Ext.Editor
Column
setEditor ( Ext.Editor/Ext.form.Field editor ) : void
为该列设置一个新的编辑器。
为该列设置一个新的编辑器。
参数:
  • editor : Ext.Editor/Ext.form.Field
    The editor to set
返回值:
  • void
Column

公共事件

该类没有公共事件。


Observable
    ColumnModel

Class Ext.grid.ColumnModel

包: | Ext.grid
定义类的文件: | ColumnModel.js
类: | ColumnModel
子类: | PropertyColumnModel
继承自: | Observable

数据读取后被存在客户端缓存中(Store ),ColumnModel用于配置如何将数据显示在gird中。在GridPanel中的ColumnModel默认实现该Ext.grid.ColumnModel类。

数据源映射到store中，然后再根据dataIndex 添加到ColumnModel中:

{data source} == mapping ==> {data store} == dataIndex

                 ==> {ColumnModel}

在grid的ColumnModel中每个Column配置了索引，指定如何把store中的每个record数据传到ColumnModel索引。

有两种方法来初始化ColumnModel类:

初始化方法 1 : Array

var colModel = new Ext.grid.ColumnModel([
    { header: "Ticker", width: 60, sortable: true},
    { header: "Company Name", width: 150, sortable: true, id: 'company'},
    { header: "Market Cap.", width: 100, sortable: true},
    { header: "$ Sales", width: 100, sortable: true, renderer: money},
    { header: "Employees", width: 100, sortable: true, resizable: false}
 ]);

该ColumnModel可以初始化一个Ext.grid.Column列配置的对象数组来定义Grid的列的布局/显示。每个Ext.grid.Column列配置对象在指定的数组中初步定义了列显示的顺序。一个列的显示最初可能是使用hidden属性来隐藏的(然后使用列标题菜单来显示它)。没有包含在ColumnModel中的字段是不会显示的。

网格中每一列根据dataIndex 配置将其与Store中的Ext.data.Record字段关联(映射)。如果没有明确定义dataIndex (如上面的例子)，列配置的索引将会使用数组的索引。

见Ext.grid.Column ，每列额外的配置选项。

初始化方法 2: Object

Ext.grid.ColumnModel配置选项可以使用一个被用来初始化ColumnModel的对象。这个columns 配置数组将指定列的配置属性。该defaults 属性可用于配置所有列的默认属性，例如:

var colModel = new Ext.grid.ColumnModel({
    columns: [
        { header: "Ticker", width: 60, menuDisabled: false},
        { header: "Company Name", width: 150, id: 'company'},
        { header: "Market Cap."},
        { header: "$ Sales", renderer: money},
        { header: "Employees", resizable: false}
    ],
    defaults: {
        sortable: true,
        menuDisabled: true,
        width: 100
    },
    listeners: {
        hiddenchange: function(cm, colIndex, hidden) {
            saveConfig(colIndex, hidden);
        }
    }
});

在上述的两个例子，都可以运用CSS样式到所有单元格(包括表头)是通过id 来配置。列可以包含以下css样式:

//add this css *after* the core css is loaded
.x-grid3-td-company {
    color: red; // entire column will have red font
}
// modify the header row only, adding an icon to the column header
.x-grid3-hd-company {
    background: transparent
        url(../../resources/images/icons/silk/building.png)
        no-repeat 3px 3px ! important;
        padding-left:20px;
}
注:"Company Name"这一列可以被指定为 Ext.grid.GridPanel.autoExpandColumn 。

配置项

Config Options Defined By
columns : Array
一个对象字面量(literals)数组，Ext.grid.Column的config选项会出现...
一个对象字面量(literals)数组，Ext.grid.Column 的config选项会出现在每个列单独定义的对象字面量(literals)中。
ColumnModel
defaultSortable : Boolean
对没有指定是否可排序的列，使用的默认值(默认为false)...
对没有指定是否可排序的列，使用的默认值(默认为false)。该属性最好通过defaults 属性配置。
ColumnModel
defaultWidth : Number
列没有指定宽度时的默认宽度(默认值为100)这个属性最好通过...
列没有指定宽度时的默认宽度(默认值为100)这个属性最好通过defaults 属性配置。
ColumnModel
defaults : Object
该对象值将应用到所有列的Ext.grid.Column配置选项。其中column有指定过这些配置的将替代这些默认值。
该对象值将应用到所有列的Ext.grid.Column配置选项。其中column有指定过这些配置的将替代这些默认值。
ColumnModel
listeners : Object
一个包含一个或多个事件处理器的配置对象，会在初始化的时候被添加到目标对象上...

一个包含一个或多个事件处理器的配置对象，会在初始化的时候被添加到目标对象上。 该配置对象应该是一个有效的监听器配置对象就像 addListener例子中指定的一样可一次附加多个处理器。

ExtJs Components上的DOM事件

一些 ExtJs Component 类导出时会选择一些DOM事件(例如 "click", "mouseover" 等等), 这通常只是在有额外的值可以被添加时发生。例如DataView类的 click事件会传递被点击的节点。也可以直接在Component的HTMLElementevent上访问DOM事件，但必需在Component被渲染后监听器才能添加到Element 上。可以按照以下步骤添加插件:

// 插件会用一个监听器配置对象进行配置。
//该组件会被添加到所有处理方法的参数列表上。
Ext.DomObserver = Ext.extend(Object, {
    constructor: function(config) {
        this.listeners = config.listeners ? config.listeners : config;
    },

    // 组件将自己传递进了插件的初始化方法里
    init: function(c) {
        var p, l = this.listeners;
        for (p in l) {
            if (Ext.isFunction(l[p])) {
                l[p] = this.createHandler(l[p], c);
            } else {
                l[p].fn = this.createHandler(l[p].fn, c);
            }
        }

        // 渲染后立即添加监听器到元素上
        c.render = c.render.createSequence(function() {
            var e = c.getEl();
            if (e) {
                e.on(l);
            }
        });
    },

    createHandler: function(fn, c) {
        return function(e) {
            fn.call(this, e, c);
        };
    }
});

var combo = new Ext.form.ComboBox({

    // 元素被点击后折叠
    plugins: [ new Ext.DomObserver({
        click: function(evt, comp) {
            comp.collapse();
        }
    })],
    store: myStore,
    typeAhead: true,
    mode: 'local',
    triggerAction: 'all'
});

Observable

公共属性

Property |  | Defined By
 | config : Array ColumnModel的构造参数。见Ext.grid.Column的配置，可以配置的属性。 ColumnModel的构造参数。见Ext.grid.Column的配置，可以配置的属性。 | ColumnModel

公共方法

Method Defined By
ColumnModel ( Mixed config )
参数:
  • config : Mixed
    一个Ext.grid.Column对象配置的数组，或者一个构造参数对象(见导言部分使用初始化方法的2个例子)。
返回值:
  • void
ColumnModel
addEvents( Object|String o, string Optional. ) : void
添加指定的事件到事件列表上，事件会被该Observable触发。
添加指定的事件到事件列表上，事件会被该Observable触发。
参数:
  • o : Object|String
    以事件名作为属性true作为值的对象 或者当多个事件名被分开的传递时则为第一个事件名。
  • Optional. : string
    事件名被分开的传递时则为事件名。 用法:
    this.addEvents('storeloaded', 'storecleared');
返回值:
  • void
Observable
addListener( String eventName, Function handler, [Object scope], [Object options] ) : void
给对象添加事件处理器。
给对象添加事件处理器。
参数:
  • eventName : String
    监听的事件名。
  • handler : Function
    事件调用的方法
  • scope : Object
    （可选）处理方法执行的作用域 (this的引用 reference)。 如果被忽略。默认为触发事件的对象。
  • options : Object
    （可选）包含处理器配置和属性的对象。 可能包含以下的属性:
    • scope : Object
      处理方法执行的作用域(this的引用) 。 如果被忽略。默认为触发事件的对象。
    • delay : Number
      在触发事件后延迟调用处理器的毫秒数。
    • single : Boolean
      如果为True则添加一个处理器来处理下一次的事件触发（仅一次），然后移除自己。
    • buffer : Number
      使得处理器延迟指定毫秒数后预定的运行在 一个Ext.util.DelayedTask中 。 如果事件在时间内再一次被触发，原始的处理器不会被调用，但是新的处理器会预定的在他的位置上。
    • target : Observable
      如果事件在目标的Observable上触发则仅仅调用处理器， 否则 事件会从子类的Observable上冒泡

    组合选项
    使用这些选项参数,可能会组合出不同类型的监听器：

    一个延迟的，一次性的监听器。

    myDataView.on('click', this.onClick, this, {
single: true,
delay: 100
});

    一次调用附加多个处理器
    该方法同样支持传递一个包含指定的多个处理器的属性的配置对象参数。

    myGridPanel.on({
'click' : {
    fn: this.onClick,
    scope: this,
    delay: 100
},
'mouseover' : {
    fn: this.onMouseOver,
    scope: this
},
'mouseout' : {
    fn: this.onMouseOut,
    scope: this
}
});

    或者一个简写的语法：

    myGridPanel.on({
'click' : this.onClick,
'mouseover' : this.onMouseOver,
'mouseout' : this.onMouseOut,
 scope: this
});
返回值:
  • void
Observable
destroy () : void
销毁此列模型清除所有事件侦听器，并删除任何编辑。
销毁此列模型清除所有事件侦听器，并删除任何编辑。
参数:
  • 无。
返回值:
  • void
ColumnModel
enableBubble( String/Array events ) :void
是否现在使得事件会被该Observable触发并调用 this.getBubbleTarget()方法在拥有者的继承树...

是否现在使得事件会被该Observable触发并调用 this.getBubbleTarget()方法在拥有者的继承树中冒泡。Observable的基础类中没有该方法的实现。

该方法一般被Ext.Components用来冒泡事件到拥有者的容器。参看Ext.Component.getBubbleTarget默认的实现 在Ext.Component中返回组件的直接拥有者。但是如果需要的是一个已知的目标，该方法可以被重写来更快的访问需求的目标。

例子:

Ext.override(Ext.form.Field, {
    // 添加方法到Field的initComponent上改变事件为冒泡
    initComponent : Ext.form.Field.prototype.initComponent.createSequence(function() {
        this.enableBubble('change');
    }),

    // 我们知道我们想让Field的事件冒泡到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() {
            // 如果样式被修改标题会变红。
            myForm.header.setStyle('color', 'red');
        }
    }
});
参数:
  • events : String/Array
    冒泡的事件名，或事件名数组
返回值:
  • void
Observable
findColumnIndex ( String col ) : Number
根据指定的dataIndex，找到第一个匹配的列的序号。
根据指定的dataIndex，找到第一个匹配的列的序号。
参数:
  • col : String
    要查找的dataIndex
返回值:
  • Number
    列索引，所以没有找到，返回-1
ColumnModel
fireEvent( String eventName, Object... args ) : Boolean
用传入的参数触发指定的事件 (减去事件名)。 一个事件可以被设置为冒泡 Obse...

用传入的参数触发指定的事件 (减去事件名)。

一个事件可以被设置为冒泡到Observable父类继承树(参看 Ext.Component.getBubbleTarget) 调用enableBubble实现。

参数:
  • eventName : String
    触发的事件名。
  • args : Object...
    传递给处理器的可变长度参数。
返回值:
  • Boolean
    如果有任何的处理器返回false则返回false，否则返回true。
Observable
getCellEditor ( Number colIndex , Number rowIndex ) : Ext.Editor
返回单元格/column所定义的编辑器。
返回单元格/column所定义的编辑器。
参数:
  • colIndex : Number
    列索引
  • rowIndex : Number
    行索引
返回值:
  • Ext.Editor
    Ext.Editor创建来用于编辑单元格的Ext.form.Field
ColumnModel
getColumnById ( String id ) : Object
根据指定的id，返回列。
根据指定的id，返回列。
参数:
  • id : String
    The column id
返回值:
  • Object
    the column
ColumnModel
getColumnCount ( Boolean visibleOnly ) : Number
返回总列数。
返回总列数。
参数:
  • visibleOnly : Boolean
    (可选)值为true不包含隐藏的列。
返回值:
  • Number
ColumnModel
getColumnHeader ( Number col ) : String
返回指定列的头部(header)。
返回指定列的头部(header)。
参数:
  • col : Number
    The column index
返回值:
  • String
ColumnModel
getColumnId ( Number index ) : String
返回指定索引的列id。
返回指定索引的列id。
参数:
  • index : Number
    The column index
返回值:
  • String
    the id
ColumnModel
getColumnTooltip ( Number col ) : String
返回指定列的tooltip。
返回指定列的tooltip。
参数:
  • col : Number
    The column index
返回值:
  • String
ColumnModel
getColumnWidth ( Number col ) : Number
返回指定列的宽度。
返回指定列的宽度。
参数:
  • col : Number
    列索引
返回值:
  • Number
ColumnModel
getColumnsBy ( Function fn , [ Object scope ] ) : Array
如果传递进来的函数调用后返回true，则返回column的配置数据，传递进来函数的的参数...
如果传递进来的函数调用后返回true，则返回column的配置数据，传递进来函数的的参数格式(columnConfig, index)

// 返回一个所有隐藏的列的配置对象数组
var columns = grid.getColumnModel().getColumnsBy(function(c){
  return c.hidden;
});
参数:
  • fn : Function
    一个函数，传入一个Column对象， 必须返回true，才会返回一个包含column对象的数组。
  • scope : Object
    (可选) 该函数被执行时(this)的作用域范围。 这里默认值为ColumnModel。
返回值:
  • Array
    result
ColumnModel
getDataIndex ( Number col ) : String
返回指定列的dataIndex。
返回指定列的dataIndex。

// Get field name for the column
var fieldName = grid.getColumnModel().getDataIndex(columnIndex);
参数:
  • col : Number
    The column index
返回值:
  • String
    The column's dataIndex
ColumnModel
getIndexById ( String id ) : Number
根据指定的id，返回列的索引编号。
根据指定的id，返回列的索引编号。
参数:
  • id : String
    The column id
返回值:
  • Number
    索引，如果没有找到则返回-1
ColumnModel
getRenderer ( Number col ) : Function
返回为列渲染(格式化)定义的函数。
返回为列渲染(格式化)定义的函数。
参数:
  • col : Number
    该列的索引。
返回值:
  • Function
    该函数用于展现单元格。见 {@link #setRenderer}。
ColumnModel
getTotalWidth ( Boolean includeHidden ) : Number
返回所有列的总宽度。
返回所有列的总宽度。
参数:
  • includeHidden : Boolean
    值为true的话，包括隐藏的列的宽度
返回值:
  • Number
ColumnModel
hasListener( String eventName ) : Boolean
检测对象是否包含指定事件的任何监听器
检测对象是否包含指定事件的任何监听器
参数:
  • eventName : String
    检测的事件名
返回值:
  • Boolean
    如果事件被监听则为true，否则为false
Observable
isCellEditable ( Number colIndex , Number rowIndex ) : Boolean
如果单元格可编辑，返回true。
如果单元格可编辑，返回true。

var store = new Ext.data.Store({...});
var colModel = new Ext.grid.ColumnModel({
  columns: [...],
  isCellEditable: function(col, row) {
    var record = store.getAt(row);
    if (record.get('readonly')) { // replace with your condition
      return false;
    }
    return Ext.grid.ColumnModel.prototype.isCellEditable.call(this, col, row);
  }
});
var grid = new Ext.grid.GridPanel({
  store: store,
  colModel: colModel,
  ...
});
参数:
  • colIndex : Number
    列索引
  • rowIndex : Number
    行索引
返回值:
  • Boolean
ColumnModel
isFixed ( Number colIndex ) : Boolean
如果列是固定(fixed )的返回true，否则为false。
如果列是固定(fixed )的返回true，否则为false。
参数:
  • colIndex : Number
    列索引
返回值:
  • Boolean
ColumnModel
isHidden ( Number colIndex ) : Boolean
返回true表示该列是隐藏的，否则返回false。
返回true表示该列是隐藏的，否则返回false。
参数:
  • colIndex : Number
    列索引
返回值:
  • Boolean
ColumnModel
isMenuDisabled ( Number col ) : Boolean
如果指定列的菜单（译者注：指列表头的下拉菜单）被禁用，返回true。
如果指定列的菜单（译者注：指列表头的下拉菜单）被禁用，返回true。
参数:
  • col : Number
    列索引
返回值:
  • Boolean
ColumnModel
isResizable () : Boolean
返回true表示列的大小可以调整
返回true表示列的大小可以调整
参数:
  • 无。
返回值:
  • Boolean
ColumnModel
isSortable ( Number col ) : Boolean
如果指定的列是可排序的，返回true。
如果指定的列是可排序的，返回true。
参数:
  • col : Number
    The column index
返回值:
  • Boolean
ColumnModel
moveColumn ( Number oldIndex , Number newIndex ) : void
将一列从一个位置移动到另一个位置。
将一列从一个位置移动到另一个位置。
参数:
  • oldIndex : Number
    将要移动的列索引。
  • newIndex : Number
    目标位置列索引。
返回值:
  • void
ColumnModel
on( String eventName, Function handler, [Object scope], [Object options] ) : void
给对象添加事件处理器 (addListener的简写形式)
给对象添加事件处理器 (addListener的简写形式。)
参数:
  • eventName : String
    监听的事件类型
  • handler : Function
    事件调用的方法
  • scope : Object
    （可选）处理方法执行时的作用域 (this 的引用)。 如果被忽略。默认为触发事件的对象。
  • options : Object
    可选 包含处理器配置的对象。
返回值:
  • void
Observable
purgeListeners() : void
移除对象上所有的监听器
移除对象上所有的监听器
参数:
  • 无。
返回值:
  • void
Observable
relayEvents( Object o, Array events ) : void
从指定的Observable上传递选择的事件就好像被当前对象触发一样。
从指定的Observable上传递选择的事件就好像被当前对象触发一样。
参数:
  • o : Object
    该Observable上的事件被当前对象传递。
  • events : Array
    传递的数组名。
返回值:
  • void
Observable
removeListener( String eventName, Function handler, [Object scope] ) : void
删除一个事件处理器。
删除一个事件处理器。
参数:
  • eventName : String
    处理器关联的事件类型。
  • handler : Function
    移除的处理器。 这应该是传递到addListener里的方法的引用。
  • scope : Object
    （可选）处理器指定的初始作用域。
返回值:
  • void
Observable
resumeEvents() : void
重新开始触发事件。(参见suspendEvents) 如果事件以queueSuspended参数被挂起，则在事件被挂起时 ...
重新开始触发事件。(参见 suspendEvents) 如果事件以queueSuspended 参数被挂起，则在事件被挂起时触发的事件会被传递到所有的监听器上
参数:
  • 无。
返回值:
  • void
Observable
setColumnHeader ( Number col , String header ) : void
设置列的表头(header)。
设置列的表头(header)。
参数:
  • col : Number
    列索引
  • header : String
    The new header
返回值:
  • void
ColumnModel
setColumnTooltip ( Number col , String tooltip ) : void
设置列的提示语(tooltip)。
设置列的提示语(tooltip)。
参数:
  • col : Number
    The column index
  • tooltip : String
    The new tooltip
返回值:
  • void
ColumnModel
setColumnWidth ( Number col , Number width , Boolean suppressEvent ) : void
设置一列的宽度。
设置一列的宽度。
参数:
  • col : Number
    列索引
  • width : Number
    新的宽度值
  • suppressEvent : Boolean
    设置为true，不触发widthchange 事件。默认值为false。
返回值:
  • void
ColumnModel
setConfig ( Array config , Boolean initial ) : void
通过传递进来的数据，重新配置列模型。对于每个列对象的属性配置...

通过传递进来的数据，重新配置列模型。对于每个列对象的属性配置，请参看Config Options。

会触发configchange事件。 GridPanel使用'configchange'事件来监听ColumnModel，并自动更新其界面。

参数:
  • config : Array
    定义Column的对象数组。
  • initial : Boolean
    设置为true不删除totalWidth和不销毁现有的编辑。
返回值:
  • void
ColumnModel
setDataIndex ( Number col , String dataIndex ) : void
设置列的数据索引。
设置列的数据索引。
参数:
  • col : Number
    列索引
  • dataIndex : String
    新的数据索引
返回值:
  • void
ColumnModel
setEditable ( Number col , Boolean editable ) : void
设置列是否可编辑。
设置列是否可编辑。
参数:
  • col : Number
    列索引
  • editable : Boolean
    如果值为true表示可编辑
返回值:
  • void
ColumnModel
setEditor ( Number col , Object editor ) : void
设置一列的编辑器，并销毁之前的编辑器。
设置一列的编辑器，并销毁之前的编辑器。
参数:
  • col : Number
    列索引
  • editor : Object
    编辑器对象
返回值:
  • void
ColumnModel
setHidden ( Number colIndex , Boolean hidden ) : void
设置是否隐藏一列。
设置是否隐藏一列。
myGrid.getColumnModel().setHidden(0, true); // hide column 0 (0 = 第一列).
参数:
  • colIndex : Number
    列索引
  • hidden : Boolean
    true为隐藏该列
返回值:
  • void
ColumnModel
setRenderer ( Number col , Function fn ) : void
设置这一列的渲染(格式)函数。见Ext.util.Format中一些默认的格式化函数。
设置这一列的渲染(格式)函数。见Ext.util.Format中一些默认的格式化函数。
参数:
  • col : Number
    The column index
  • fn : Function
    该函数用来处理单元格中的原始数据，之后返回HTML标签给grid视图。 渲染函数将会被以如下的参数格式调用:
    • value : Object

      单元格的数据值

    • metadata : Object

      一个对象，你可以设置以下属性：

      • css : String

        添加到该单元格的TD元素中的CSS类名。

      • attr : String

        一个用来定义HTML标签属性的字符串，将被用到单元格内的数据容器元素上(例如:'style="color:red;"')。

    • record : Ext.data.record

      从数据中提取的Ext.data.Record对象。

    • rowIndex : Number

      行索引

    • colIndex : Number

      列索引

    • store : Ext.data.Store

      Ext.data.Store对象，可以从中提取Record。

返回值:
  • void
ColumnModel
suspendEvents( Boolean queueSuspended ) : void
暂停触发所有的事件。 (参看resumeEvents)
暂停触发所有的事件。（参看 resumeEvents)
参数:
  • queueSuspended : Boolean
    如果传递为true则排列好暂停的事件使得在调用 resumeEvents 后再触发它们，而不是抛弃所有暂停的事件。
返回值:
  • void
Observable
un( String eventName, Function handler, [Object scope] ) : void
删除一个事件处理器(removeListener方法的简写形式)
删除一个事件处理器(removeListener方法的简写形式。)
参数:
  • eventName : String
    处理器关联的事件类型
  • handler : Function
    被删除的处理器 这应该是传入 addListener 中的方法的引用。
  • scope : Object
    （可选）为处理器指定的初始作用域。
返回值:
  • void
Observable

公共事件

Event Defined By
columnmoved : ( ColumnModel this , Number oldIndex , Number newIndex )
当移动一列时触发。
当移动一列时触发。
监听器将会以如下的参数格式调用:
  • this : ColumnModel
  • oldIndex : Number
  • newIndex : Number
ColumnModel
configchange : ( ColumnModel this )
当配置发生改变时触发。
当配置发生改变时触发。
监听器将会以如下的参数格式调用:
  • this : ColumnModel
ColumnModel
headerchange : ( ColumnModel this , Number columnIndex , String newText )
列的表头文字被改变时触发。
列的表头文字被改变时触发。
监听器将会以如下的参数格式调用:
  • this : ColumnModel
  • columnIndex : Number
    The column index
  • newText : String
    The new header text
ColumnModel
hiddenchange : ( ColumnModel this , Number columnIndex , Boolean hidden )
当某一列隐藏或"反隐藏"时触发。
当某一列隐藏或"反隐藏"时触发。
监听器将会以如下的参数格式调用:
  • this : ColumnModel
  • columnIndex : Number
    列索引
  • hidden : Boolean
    true为隐藏，否则为false
ColumnModel
widthchange : ( ColumnModel this , Number columnIndex , Number newWidth )
当一列使用setColumnWidth方法改变宽度时触发。注意从内部调整...
当一列使用setColumnWidth方法改变宽度时触发。注意从内部调整大小不会触发该事件。参见Ext.grid.GridPanel.columnresize 。
监听器将会以如下的参数格式调用:
  • this : ColumnModel
  • columnIndex : Number
    The column index
  • newWidth : Number
    The new width
ColumnModel


Column
    DateColumn

Class Ext.grid.DateColumn

包: | Ext.grid
定义类的文件: | Column.js
类: | DateColumn
继承自: | Column

一个列定义类，用来根据默认方式或者配置的format 渲染传递的日期。 更多细节参见 Ext.grid.Column 的 xtype 配置项。

配置项

Config Options Defined By
align : String
(可选)设置列的CSS text-align属性。默认值为undefined。
Column
css : String
(可选)可选，定义内嵌css样式的字符串。并应用到表格中的所有列的单元格...
(可选)可选，定义内嵌css样式的字符串。并应用到表格中的所有列的单元格(不包括表头部分)。默认值为undefined。
Column
dataIndex : String
(必填)在grid中的Ext.data.Store里面的Ext.data.Record中用来定义这个字段的名称，可以从中获取这个列的值。

(必填)在grid中的Ext.data.Store里面的Ext.data.Record中用来定义这个字段的名称，可以从中获取这个列的值。

Column
editable : Boolean
(可选)默认值为true，可以配置editor 。设置为false，初始化时此列禁用编辑...
(可选)默认值为true，可以配置editor 。设置为false，初始化时此列禁用编辑功能。使用Ext.grid.ColumnModel.setEditable()可以动态改变初始化配置。
Column
editor : Ext.form.Field
(可选)如果grid支持可编辑功能，要可以使用Ext.form.Field编辑该列的的值...
(可选)如果grid支持可编辑功能，要可以使用Ext.form.Field编辑该列的的值。见editable 。
Column
emptyGroupText : String
(可选)如果grid是被一个Ext.grid.GroupingView渲染，这个选项可以...
(可选)如果grid是被一个Ext.grid.GroupingView渲染，这个选项可以用来指定一个空的分组要显示的文本。 默认值为Ext.grid.GroupingView.emptyGroupText。
Column
fixed : Boolean
(可选)如果为true，不能改变列的宽度。默认值为false。
Column
format : String
被Date.format 用来为当前列格式化日期的格式化字符串 (默认为'm/d/Y')。
DateColumn
groupName : String
(可选)如果grid是被一个Ext.grid.GroupingView渲染，这个属性可以...
(可选)如果grid是被一个Ext.grid.GroupingView渲染，这个属性可以被用来指定按字段分组后在小组行标题的前缀名称。 详见groupRenderer和Ext.grid.GroupingView.showGroupName。
Column
groupRenderer : Function
(可选)如果grid是被一个Ext.grid.GroupingView渲染，这个选项指定...

(可选)如果grid是被一个Ext.grid.GroupingView渲染，这个选项指定的函数可以用来格式化分组字段值显示在组头的功能。 如果groupRenderer未指定，配置的渲染器renderer 将被调用；如果 renderer 也同样未指定，分组字段的新值将被使用。

被调用的函数(无论是 groupRenderer 或 renderer )将通过以下参数调用：

  • v : Object

    该组字段新值。

  • unused : undefined

    未使用的参数。

  • r : Ext.data.Record

    Record对象，为一行提供数据，此行导致了分组的改变。

  • rowIndex : Number

    导致分组改变的Record的行号。

  • colIndex : Number

    分组依据字段的列序号。

  • ds : Ext.data.Store

    提供数据Model的Store。

该函数应返回一个字符串值。

Column
groupable : Boolean
(可选)如果grid是被一个Ext.grid.GroupingView渲染，这个属性可以...
(可选)如果grid是被一个Ext.grid.GroupingView渲染，这个属性可以用来禁用表头菜单中根据字段分组功能。 默认值为true，使该列的表头菜单中有该选项。设置为false，表头菜单中的该选项被设为disable状态。 参见 groupName 。
Column
header : String
(可选)显示在网格视图头部作为标题文本的innerHTML(可以支持html标签)。注...
(可选)显示在网格视图头部作为标题文本的innerHTML(可以支持html标签)。注:有一个可点击的表头，没有没有文本显示使用' '。
Column
hidden : Boolean
(可选)设置为true，初始化时隐藏此列。默认值为 false。一个隐藏的列...
(可选)设置为true，初始化时隐藏此列。默认值为 false。一个隐藏的列通过标题菜单可能会显示。如果一列是永远不会被显示，那么在所有列中根本不包含此列模型。
Column
hideable : Boolean
(可选)设置为false，以防止用户隐藏该列(默认值为true)。在grid中为了不让...
(可选)设置为false，以防止用户隐藏该列(默认值为true)。在grid中为了不让所有的列隐藏，使用Ext.grid.GridPanel.enableColumnHide 代替。
Column
id : String
(可选)一个标识该列的名称(默认为该列的初始化依次位置)。该id是用来创建一个CSS样式的名字...
(可选)一个标识该列的名称(默认为该列的初始化依次位置)。 该id是用来创建一个CSS样式的名字，适用于所有表格的单元格(包括标题)，在这列(在这里id不需要独一无二)。 该类名采用的格式
x-grid3-td-id
表头单元格也将收到这类名字，但也有这类
x-grid3-hd
因此，针对表头单元格，使用CSS选择器，例如:
.x-grid3-hd-row .x-grid3-td-id
gird的Ext.grid.GridPanel.autoExpandColumn配置通过这种独特的标识选项引用该列。
Column
menuDisabled : Boolean
(可选)设置为true，禁用表头菜单。 默认值为false。
Column
renderer : Function
(可选)当该方法通过传递以下参数时，会返回可显示的数据:
(可选)当该方法通过传递以下参数时，会返回可显示的数据:
  • value : Object

    该单元格的数据值。

  • metadata : Object

    一个对象，您可以在其中设置以下属性:

    • css : String

      一个添加到该单元格的TD元素上的CSS样式名。

    • attr : String

      一个定义HTML属性的字符串，应用到数据容器内的表格单元格元素上(例如:'style="color:red;"')。

  • record : Ext.data.record

    从数据中提取的Ext.data.Record。

  • rowIndex : Number

    Row index

  • colIndex : Number

    Column index

  • store : Ext.data.Store

    从该Ext.data.Store对象中提取记录。

Column
resizable : Boolean
(可选)值为false的话，不能改变列的大小。默认值为true。
Column
scope : Object
(可选)在作用域(this 参考值)中执行渲染。默认值为Column配置对象。
Column
sortable : Boolean
(可选)设置为true，此列允许排序。默认值为Ext.grid.ColumnModel.defaultSortable 属性值...
(可选)设置为true，此列允许排序。默认值为Ext.grid.ColumnModel.defaultSortable 属性值。无论是本地/远程使用排序都是在 Ext.data.Store.remoteSort 中指定。
Column
tooltip : String
(可选)使用一个字符串文本作为列表头的提示语。如果已激活过Quicktips，这个值将被作为...
(可选)使用一个字符串文本作为列表头的提示语。如果已激活过Quicktips，这个值将被作为快速提示文本，否则将被设置为表头的HTML'title'属性。默认值为''。
Column
width : Number
(可选)该列的初始化宽度。如果有下列配置，每列的宽度也会受到影响...
(可选)该列的初始化宽度。如果有下列配置，每列的宽度也会受到影响:
  • Ext.grid.GridPanel. autoExpandColumn
  • Ext.grid.GridView. forceFit

    通过指定forceFit:true，non-fixed width网格的列将被重新均匀分布(基于关联初始宽度)，因此不会出现横向滚动条。

  • Ext.grid.GridView. autoFill
  • Ext.grid.GridPanel. minColumnWidth

    • 注:当确定了每列的宽度，会在右侧预留一个空间给垂直滚动条。该Ext.grid.GridView. scrollOffset 可以被修改，以减少或取消其保留部分。

Column
xtype : String
(可选)其中引用了一个String类型的预定义Ext.grid.Column子类和预先设定的一个...
(可选)其中引用了一个String类型的预定义Ext.grid.Column 子类和预先设定的一个适当的 renderer 可以很容易地成为ColumnModel的一个配置。预定义Ext.grid.Column子类的类型有：
  • gridcolumn : Ext.grid.Column ( 默认)

  • booleancolumn : Ext.grid.BooleanColumn

  • numbercolumn : Ext.grid.NumberColumn

  • datecolumn : Ext.grid.DateColumn

  • templatecolumn : Ext.grid.TemplateColumn

指定的 xtype 配置属性可以作为指定的Column的配置属性，例如:

var grid = new Ext.grid.GridPanel({
    ...
    columns: [{
        header: 'Last Updated',
        dataIndex: 'lastChange',
        width: 85,
        sortable: true,
        //renderer: Ext.util.Format.dateRenderer('m/d/Y'),
        xtype: 'datecolumn', // 使用xtype代替渲染器 use xtype instead of renderer
        format: 'M/d/Y' // configuration property for Ext.grid.DateColumn

    }, {
        ...
    }]
});
Column

公共属性

Property Defined By
renderer : Function
(可选)当该方法通过传递以下参数时，会返回可显示的数据:
(可选)当该方法通过传递以下参数时，会返回可显示的数据:
  • value : Object

    该单元格的数据值。

  • metadata : Object

    一个对象，您可以在其中设置以下属性:

    • css : String

      一个添加到该单元格的TD元素上的CSS样式名。

    • attr : String

      一个定义HTML属性的字符串，应用到数据容器内的表格单元格元素上(例如:'style="color:red;"')。

  • record : Ext.data.record

    从数据中提取的Ext.data.Record。

  • rowIndex : Number

    Row index

  • colIndex : Number

    Column index

  • store : Ext.data.Store

    从该Ext.data.Store对象中提取记录。

Column

公共方法

Method Defined By
getCellEditor ( Number rowIndex ) : Ext.Editor
返回一个为了包装编辑单元格列的Field而定义的editor。
返回一个为了包装编辑单元格列的Field而定义的editor。
参数:
  • rowIndex : Number
    The row index
返回值:
  • Ext.Editor
Column
setEditor ( Ext.Editor/Ext.form.Field editor ) : void
为该列设置一个新的编辑器。
为该列设置一个新的编辑器。
参数:
  • editor : Ext.Editor/Ext.form.Field
    The editor to set
返回值:
  • void
Column

公共事件

该类没有公共事件。


Observable
    Component
      BoxComponent
        Container
          Panel
            GridPanel
              EditorGridPanel

Class Ext.grid.EditorGridPanel

包: | Ext.grid
定义类的文件: | EditorGrid.js
类: | EditorGridPanel
子类: | PropertyGrid
继承自: | GridPanel

这个类扩展了GridPanel类，提供单元格选择编辑的columns。 这个可编辑的Ext.grid.ColumnModel提供了column 的配置。

可通过在ColumnModel中加入isCellEditable方法来指定哪些单元格可以被编辑。

修改后的字段值根据单元格的dataIndex 属性回填到Store中指定的位置(您可以使用renderer来替换需要展现的数据，那么必须在该字段声明)。

如果在渲染的时候使用键值对方式映射，比如ComboBox，将采用一个适当的编辑器使它以键值对方式映射。

如果在grid中显示着一些复杂不匹配的数据，且列表的数据存在Store中，然后在编辑表格数据之前和之后可以使用beforeedit和afteredit事件来处理这些数据。

配置项

Config Options Defined By
anchor : String
注: 这个配置只用于该组件被包含在一个已使用AnchorLayout...

注: 这个配置只用于该组件被包含在一个已使用 AnchorLayout (或者其子类)配置的Container时。 基于布局管理器，例如：

  • Ext.form.FormPanel
  • 指定 layout: 'anchor' // or 'form', or 'absolute'

参见 Ext.layout.AnchorLayout. anchor 。

BoxComponent
animCollapse : Boolean
true将会在panel被折叠时使用动画效果，false将会跳过动画效果....
true 将会在panel被折叠时使用动画效果， false 将会跳过动画效果( 如果Ext.Fx类 有效，默认为 true ，否则为 false )。
Panel
autoEncode : Boolean
设置为true将对输入的值自动进行HTML编码和解码(默认值为false)
EditorGridPanel
autoExpandColumn : String
The id of a column in this grid that should expand to fill unused space. This value specified here can not be 0. Note...

The id of a column in this grid that should expand to fill unused space. This value specified here can not be 0.

Note: If the Grid's view is configured with forceFit=true the autoExpandColumn is ignored. See Ext.grid.Column. width for additional details.

See autoExpandMax and autoExpandMin also.

GridPanel
autoExpandMax : Number
The maximum width the autoExpandColumn can have (if enabled). Defaults to 1000.
GridPanel
autoExpandMin : Number
The minimum width the autoExpandColumn can have (if enabled). Defaults to 50.
GridPanel
autoHeight : Boolean
如果值为true，height配置项为'auto'，否则值为false的话使用固定的高度...

如果值为true，height配置项为'auto'，否则值为false的话使用固定的高度， 或者可以由其父类容器 layout manager来控制。(默认值为 false)。

注: 虽然很多组件继承了这个配置选项，但不是所有这些组件的自适应高度配置都会像期望的那样起作用。 设置autoHeight：值为true时，浏览器将根据元素的内容自动设置高度，这将意味着Ext不会去管理高度。

如果是由浏览器来管理高度，需要注意的是，通过浏览器进行调整的结构组件内不能被发现， 因此宽度的变化可能导致需要进行同步处理元素的高度。 例如：

var w = new Ext.Window({
    title: 'Window',
    width: 600,
    autoHeight: true,
    items: {
        title: 'Collapse Me',
        height: 400,
        collapsible: true,
        border: false,
        listeners: {
            beforecollapse: function() {
                w.el.shadow.hide();
            },
            beforeexpand: function() {
                w.el.shadow.hide();
            },
            collapse: function() {
                w.syncShadow();
            },
            expand: function() {
                w.syncShadow();
            }
        }
    }
}).show();
Panel
autoShow : Boolean
如果组件需要检测隐藏CSS属性(如 'x-hidden' 或者 'x-hide-display')并且在渲染时删除...
如果组件需要检测隐藏CSS属性(如 'x-hidden' 或者 'x-hide-display')并且在渲染时删除它们 (默认为false)，设置此值为true。
Component
baseCls : String
应用到当前panel元素上的基本CSS类(默认为 'x-panel' )...
应用到当前panel元素上的基本CSS类(默认为 'x-panel' )。

另一个可选的默认变量是指定 'x-plain' ，它将去掉所有样式，除了Ext布局功能所必须的属性 (例如overflow:hidden)。另请参见 unstyled 。

Panel
bbar : Object/Array
panel底部工具栏。 此参数可以是一个Ext.Toolbar 、一个工具栏配置项，或者一个buttons/button配置数组---用来被添加到工具栏中...

panel底部工具栏。 此参数可以是一个Ext.Toolbar 、一个工具栏配置项，或者一个buttons/button配置数组---用来被添加到工具栏中。 注意，此参数在渲染之后是无效的。如果在渲染之后需要访问底部工具栏 ，请使用 getBottomToolbar。

注意:尽管Toolbar可以包含Field组件，但它们不会 通过加载祖先FormPanel而被更新。Panel的工具栏不是标准Container->Component 层次的一部分，所以它们不会被扫面以收集表单项。但是，这些值还是会 被提交，因为提交表单的参数是从DOM树中收集的。

Panel
bbarCfg : Object
一个 ADomHelper 元素的配置对象，描述了当前Panelbbar元素的结构...

一个DomHelper 元素的配置对象，描述了当前Panel的bbar元素结构。 另请参见 bodyCfg 。

Panel
bodyCfg : Object
一个DomHelper 元素描述对象，可以被指定给任何Panel Element...

一个DomHelper 元素描述对象，可以被指定给任何Panel Element.

默认情况下，以下表格中的Default元素将会被用作html标签，用来创建一个子元素 ，与Default类名相匹配( baseCls 将会被 baseCls 替换 ):

Panel      Default  Default             Custom      Additional       Additional
Element    element  class               element     class            style
========   ==========================   =========   ==============   ===========
header     div      baseCls+'-header'   headerCfg   headerCssClass   headerStyle
bwrap      div      baseCls+'-bwrap'     bwrapCfg    bwrapCssClass    bwrapStyle
+ tbar     div      baseCls+'-tbar'       tbarCfg     tbarCssClass     tbarStyle
+ body     div      baseCls+'-body'       bodyCfg     bodyCssClass     bodyStyle
+ bbar     div      baseCls+'-bbar'       bbarCfg     bbarCssClass     bbarStyle
+ footer   div      baseCls+'-footer'   footerCfg   footerCssClass   footerStyle

例如，配置一个自定义的元素，用来强制 body 元素使用不同形式的标签，而不是使用默认创建的。 这种情况的一个例子可能是 创建一个子 Panel，包含自定义的内容，例如header，或者通过使body拥有一个<center> 元素， 从而强制Panel中的所有内容居中:

new Ext.Panel({
    title: 'Message Title',
    renderTo: Ext.getBody(),
    width: 200, height: 130,
    bodyCfg: {
        tag: 'center',
        cls: 'x-panel-body',  // Default class not applied if Custom element specified
        html: 'Message'
    },
    footerCfg: {
        tag: 'h2',
        cls: 'x-panel-footer'        // same as the Default class
        html: 'footer html'
    },
    footerCssClass: 'custom-footer', // additional css class, see addClass

    footerStyle:    'background-color:red' // see bodyStyle

});

以上例子也显式创建了一个 footer ，拥有自定义的标签和样式。

Panel
bodyCssClass : String/Object/Function
可选的CSS类选择器，被应用到body 元素上，其格式为Ext.Element.addClass所 期望的值(默认为null)...
可选的CSS类选择器，被应用到body 元素上，其格式为Ext.Element.addClass所 期望的值(默认为null)。参见 bodyCfg.
Panel
border : Boolean
True将会显示panel body元素的边框，false将会隐藏它们 (默认为true)。默认情况下，边框是一个2px宽度的内嵌边框...
True将会显示panel body元素的边框，false将会隐藏它们 (默认为true)。默认情况下，边框是一个2px宽度的内嵌边框， 但是，以后可以通过设置bodyBorder 为false以改变它。
Panel
boxMaxHeight : Number
设置组件的最大高度值...

设置组件的最大高度值。

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

BoxComponent
boxMaxWidth : Number
设置组件的最大宽度值...

设置组件的最大宽度值。

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

BoxComponent
boxMinHeight : Number
设置组件的最小高度值...

设置组件的最小高度值。

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

BoxComponent
boxMinWidth : Number
设置组件的最小宽度值...

设置组件的最小宽度值。

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

BoxComponent
bubbleEvents : Array
一个事件数组，当这些事件被触发时，将会被冒泡到所有父容器中。参见....

一个事件数组，当这些事件被触发时，将会被冒泡到所有父容器中。参见 Ext.util.Observable.enableBubble。 默认为 []。

GridPanel
buttonAlign : String
添加到当前panel的所有 buttons 的对齐方式。 合法的值有...
添加到当前panel的所有 buttons 的对齐方式。 合法的值有 'right' , 'left' 和 'center' (默认为 'right' )。
Panel
buttons : Array
Panel的按钮数组，它们从 buttons 配置属性创建。只读。
Panel
bwrapCfg : Object
一个DomHelper 元素描述对象，描述了当前Panel的 bwrap 的元素的结构...

一个DomHelper 元素描述对象，描述了当前Panel的 bwrap 的元素的结构。另请参见 bodyCfg 。

Panel
clearCls : String
应用到特殊的clearing div的CSS类， 这个clearing div直接渲染到每个form field的包装器后面...

应用到特殊的clearing div的CSS类， 这个clearing div直接渲染到每个form field的包装器后面，以提供 清除field的功能(默认为 'x-form-clear-left')。

注意: 只有在当前组件被渲染到一个使用FormLayout 布局(例如 Ext.form.FormPanel 或者指定 layout:'form')的 容器中、或者是指定了一个fieldLabel 、或者指定isFormField=true 时此配置才有效。

另请参见 Ext.layout.FormLayout. fieldTpl。

Component
clicksToEdit : Number
转换单元格为编辑状态所需要点击的次数(默认值为2)...

转换单元格为编辑状态所需要点击的次数(默认值为2)。

设置值为'auto'时，当鼠标点击所选单元格就转换为开始编辑状态。

EditorGridPanel
closable : Boolean
Panel自身不支持关闭操作，但是Panel的一些子类 (例如Ext.Window) ，或者处于Ext.TabPanel中的 Panel支持...
Panel自身不支持关闭操作，但是Panel的一些子类 (例如Ext.Window) ，或者处于Ext.TabPanel中的 Panel支持。 指定此参数为 true 可以在这些情况下启用关闭。默认为 false 。
Panel
cls : String
一个可选的额外CSS类，它将被添加到当前组件的元素上(默认为'')...
一个可选的额外CSS类，它将被添加到当前组件的元素上(默认为'')。 此属性对于在组件上，或者它的任何使用标准CSS规则的孩子节点上， 添加定制的样式非常有用。
Component
cm : Object
Shorthand for colModel .
GridPanel
colModel : Object
The Ext.grid.ColumnModel to use when rendering the grid (required).
GridPanel
collapseFirst : Boolean
将会确保折叠/展开(collapse/expand)按钮总是被渲染在第一个位置...
true 将会确保折叠/展开(collapse/expand)按钮总是被渲染在第一个位置， 在panel顶部的工具栏中位于任何其它工具左侧， false 将会把它渲染在最后(默认为 true )。
Panel
collapsed : Boolean
如果当前panel被折叠为true。只读。
Panel
collapsedCls : String
在被折叠后，一个被添加到panel元素上的CSS类 (默认为 'x-panel-collapsed' )。
Panel
collapsible : Boolean
True将会使panel折叠并且会自动把展开/折叠(expand/collapse)按钮渲染到顶部...
True将会使panel折叠并且会自动把展开/折叠 (expand/collapse)按钮渲染到顶部工具按钮区域，false将 保持panel尺寸固定，没有按钮(默认为false)。
Panel
columnLines : Boolean
true to add css for column separation lines. Default is false.
GridPanel
columns : Array
An array of columns to auto create a Ext.grid.ColumnModel. The ColumnModel may be explicitly created via the colMode...
An array of columns to auto create a Ext.grid.ColumnModel. The ColumnModel may be explicitly created via the colModel configuration property.
GridPanel
ctCls : String
一个可选的外部CSS样式，添加到这个组件的容器(默认值为 '')。 这个方法对于使用标准的CSS规则...

一个可选的外部CSS样式，添加到这个组件的容器(默认值为 '')。 这个方法对于使用标准的CSS规则，为组件或它的任何一个子组件添加特定的样式非常有用。 参见 Ext.layout.ContainerLayout和 extraCls 。

注意: ctCls 默认为 ''期望如下的类，它们将指定一个默认值:

  • Box Layout : 'x-box-layout-ct'
使用一个额外的CSS类配置以上的Class，它是append到默认对象上的。例如， 对于BoxLayout (Hbox and Vbox):
                                ctCls: 'x-box-layout-ct custom-class'

Component
data : Mixed
初始化数据集，它将被应用到 tpl 上以刷新组件的内容区域。
Component
ddGroup : String
The DD group this GridPanel belongs to. Defaults to 'GridDD' if not specified.
GridPanel
ddText : String
Configures the text in the drag proxy. Defaults to: ddText : '{0} selected row{1}' {0} is replaced with the number o...
Configures the text in the drag proxy. Defaults to:
                                ddText : '{0} selected row{1}'
{0} is replaced with the number of selected rows.
GridPanel
deferRowRender : Boolean
Defaults to true to enable deferred row rendering. This allows the GridPanel to be initially rendered empty, with the...

Defaults to true to enable deferred row rendering.

This allows the GridPanel to be initially rendered empty, with the expensive update of the row structure deferred so that layouts with GridPanels appear more quickly.

GridPanel
disableSelection : Boolean

true to disable selections in the grid. Defaults to false.

Ignored if a SelectionModel is specified.

GridPanel
disabled : Boolean
当前组件处于无效状态时为true。 Read-only.
Panel
draggable : Boolean/Object
true 可以让当前panel启用拖拽操作(默认为 false )...

true 可以让当前panel启用拖拽操作(默认为 false )。

如需自定义的drag/drop实现，也可以向此配置项传递一个 Ext.Panel.DD配置替代 true 。 Ext.Panel.DD是一个内部没有文档化的类，它在周围移动代理元素 代替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();
Panel
enableColumnHide : Boolean
Defaults to true to enable hiding of columns with the header menu.
GridPanel
enableColumnMove : Boolean
Defaults to true to enable drag and drop reorder of columns. false to turn off column reordering via drag drop.
GridPanel
enableColumnResize : Boolean
false to turn off column resizing for the whole grid. Defaults to true.
GridPanel
enableDragDrop : Boolean
Enables dragging of the selected rows of the GridPanel. Defaults to false. Setting this to true causes this GridPanel...

Enables dragging of the selected rows of the GridPanel. Defaults to false.

Setting this to true causes this GridPanel's GridView to create an instance of Ext.grid.GridDragZone. Note: this is available only after the Grid has been rendered as the GridView's dragZone property.

A cooperating DropZone must be created who's implementations of onNodeEnter, onNodeOver, onNodeOut and onNodeDrop are able to process the data which is provided.

GridPanel
enableHdMenu : Boolean
Defaults to true to enable the drop down button for menu in the headers.
GridPanel
fbar : Object/Array
一个Toolbar 对象、一个Toolbar配置项，或者一个Buttons/ Button 配置数组，...

一个Toolbar 对象、一个Toolbar配置项，或者一个Buttons/ Button 配置数组，它们描述了一个被添加到当前Panel底部元素的 Toolbar.

在渲染后， fbar 将会为一个Toolbar 实例。

如果指定了 buttons ，它们将替代 fbar 配置项。

Panel的 buttonAlign 配置项目将会影响这些项目的布局，例如:
var w = new Ext.Window({
    height: 250,
    width: 500,
    bbar: new Ext.Toolbar({
        items: [{
            text: 'bbar Left'
        },'->',{
            text: 'bbar Right'
        }]
    }),
    buttonAlign: 'left', // anything but 'center' or 'right' and you can use '-', and '->'

                                  // to control the alignment of fbar items
    fbar: [{
        text: 'fbar Left'
    },'->',{
        text: 'fbar Right'
    }]
}).show();

注意:尽管Toolbar可以包含Field组件，但它们不会 通过加载祖先FormPanel而被更新。Panel的工具栏不是标准Container->Component 层次的一部分，所以它们不会被扫面以收集表单项。但是，这些值还是会 被提交，因为提交表单的参数是从DOM树中收集的。

Panel
fieldLabel : String
紧靠此field显示的标签文本(默认值为 '')。注意...

紧靠此field显示的标签文本(默认值为 '')。

注意:只有在当前组件被渲染到一个使用FormLayout 的容器中时，此配置才有效。 (例如 Ext.form.FormPanel 或 指定 layout:'form')。

另请参见 hideLabel 、 Ext.layout.FormLayout和 fieldTpl。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Name'
    }]
});
Component
flex : Number
注: 这个配置只用于该组件被包含在一个已使用BoxLayout配置的Container中时...

注: 这个配置只用于该组件被包含在一个已使用BoxLayout配置的Container中时。通过计算每一个子组件的flex值所占全部flex值之和的比例，来决定子组件的宽(HBoxLayout)高(VBoxlayout)。 任何子项的 flex = 0 或 flex = undefined 将不被设置(初始值大小将不被改变)。

BoxComponent
floating : Mixed
此参数被用来配置底层的 Ext.Layer. 此配置参数可接受的值有...

此参数被用来配置底层的 Ext.Layer. 此配置参数可接受的值有:

  • false : 默认。
    在渲染的地方以内嵌的方式显示panel.
  • true :
    浮动panel (绝对定位，有自动衬垫和阴影)。
      设置floating为true将会为当前panel创建一个Ext.Layer 并且在负值偏移量处显示panel，这样它就是隐藏的。
      既然panel被绝对定位，位置必须在渲染之后被显式设置 (例如 myPanel.setPosition(100,100); )。
      注意: 如果浮动面板，你必须总是指定一个固定的宽度， 否则它将是自动宽度并且总是展开以便填充到视口右侧 边缘。
  • object :
    指定的对象将会被用作将会被创建的 Ext.Layer的 配置对象。
Panel
footer : Ext.Element
Panel底部Element 。只读。此元素被用来容纳Panel的...
Panel底部Element 。只读。

此元素被用来容纳Panel的 buttons 或者 fbar 。

注意: 另请参见 el 的注释。

Panel
footerCfg : Object
一个DomHelper 元素的配置对象，描述了当前Panel的footer元素结构。 另请参见...

一个DomHelper 元素的配置对象，描述了当前Panel的footer元素结构。 另请参见 bodyCfg 。

Panel
forceLayout : Boolean
如果此值为true，容器将将强制初始化一次布局操作...
如果此值为true，容器将将强制初始化一次布局操作， 即使容器处于隐藏或者折叠状态。 此配置项对于在一个折叠或者隐藏的容器中强制渲染非常有用 (默认为false)。
Container
forceValidation : Boolean
值为true时，即使是未修改过的值也会去验证(默认值为false)
EditorGridPanel
frame : Boolean
默认情况下使用 false ，渲染简单的1px的正方形边框。 true 将会渲染9个元素，以自定义的圆角结束...
默认情况下使用 false ，渲染简单的1px的正方形边框。 true 将会渲染9个元素，以自定义的圆角结束 (另请参见 Ext.Element.boxWrap)。

每种情况下产生的模板描述如下:

// frame = false
<div id="developer-specified-id-goes-here" class="x-panel">

    <div class="x-panel-header"><span class="x-panel-header-text">Title: (frame:false)</span></div>

    <div class="x-panel-bwrap">
        <div class="x-panel-body"><p>html value goes here</p></div>
    </div>
</div>

// frame = true (create 9 elements)
<div id="developer-specified-id-goes-here" class="x-panel">
    <div class="x-panel-tl"><div class="x-panel-tr"><div class="x-panel-tc">
        <div class="x-panel-header"><span class="x-panel-header-text">Title: (frame:true)</span></div>
    </div></div></div>

    <div class="x-panel-bwrap">
        <div class="x-panel-ml"><div class="x-panel-mr"><div class="x-panel-mc">
            <div class="x-panel-body"><p>html value goes here</p></div>
        </div></div></div>

        <div class="x-panel-bl"><div class="x-panel-br"><div class="x-panel-bc"/>
        </div></div></div>
</div>
Panel
header : Ext.Element
Panel的headerElement. 只读。此元素被用来容纳 title和 tools...
Panel的headerElement. 只读。

此元素被用来容纳 title和 tools

注意: 另请参见 el 的注释。

Panel
headerAsText : Boolean
true 将会在 header 中显示panel title ， false 将会隐藏它(默认为 true )。
Panel
headerCfg : Object
一个DomHelper 元素的配置对象，描述了当前Panel的header元素结构...

一个DomHelper 元素的配置对象，描述了当前Panel的header元素结构。 另请参见 bodyCfg 。

Panel
height : Number
组件的高度(默认值为 auto)。注:如果想使用百分比的方式...
组件的高度(默认值为 auto)。注:如果想使用百分比的方式来设置值，请查看 Ext.Component.anchor。
BoxComponent
hidden : Boolean
如果当前组件处于隐藏状态，此值为true。Read-only。
Component
hideCollapseTool : Boolean
true 将会在 collapsible == true 时隐藏展开/折叠按钮， false 将会显示它(默认为 false )。
Panel
hideHeaders : Boolean
True to hide the grid's header. Defaults to false .
GridPanel
hideLabel : Boolean
true时完全隐藏label元素 ( label 和 separator)。 默认为 false。 默认情况下，即使你不指定...

true时完全隐藏label元素 ( label 和 separator)。 默认为 false。 默认情况下，即使你不指定 fieldLabel 它的空间仍然会被保留，这样这块区域会与其它确实拥有label的区域位于同一排。 讲此值设置为 true 将导致此区域不再保留此空间。

注意: 参见 clearCls 的注释。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield'
        hideLabel: true
    }]
});
Component
hideMode : String
组件如何隐藏，支持的值有： 'visibility' (css visibility), 'offsets' (位置偏移量为负值) 和...

组件如何隐藏，支持的值有： 'visibility' (css visibility), 'offsets' (位置偏移量为负值) 和 'display' (css display).

注意:一般首选默认值 'display'，因为当组件第一次显示的时候它们会自动进行布局 (隐藏的时候不会调整尺寸)。

Component
hideParent : Boolean
此值为true时，当调用hide/show方法时，将会hide和show组件的容器...
此值为true时，当调用hide/show方法时，将会hide和show组件的容器；false时将会 hide和show组件自身(默认为false)。例如，这可以用作window上隐藏按钮的一种 快捷操作，通过设置此按钮的hideParent:true，然后把它添加到window上。
Component
iconCls : String
CSS类选择器，指定被用作头部图标的背景图片(默认为'')...
CSS类选择器，指定被用作头部图标的背景图片(默认为'')。

指定自定义图表类的示例就像:

// specify the property in the config for the class:
     ...
     iconCls: 'my-icon'

// css class that specifies background image to be used as the icon image:
.my-icon { background-image: url(../images/my-icon.gif) 0 6px no-repeat !important; }
Panel
id : String
当前组件唯一的id(默认为auto-assigned id)...

当前组件唯一的id(默认为auto-assigned id)。 如果你需要在以后访问组件，而又没有一个有效的组件对象引用，那么你需要指定一个 id( 也就是，使用Ext. getCmp方法 )。

注意，此id也将被用作组件底层HTML标签的id，这些标签被渲染到页面中。 这将允许你编写基于id的CSS规则，以独立地描述指定的实例；并且，也可以通过 组件父标签的id选中子元素。

注意:为了避免与唯一的id 产生重复， 请参见 itemId 和 ref 。

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

Component
itemCls : String
注意: 只有在当前组件被渲染到一个使用FormLayout 布局的 容器中时此配置才有效...

注意: 只有在当前组件被渲染到一个使用FormLayout 布局的 容器中时此配置才有效。 (例如Ext.form.FormPanel 或者指定 layout:'form')。

一个附加的CSS类，应用到div上，包装当前field的表单元素。 如果提供了此参数， field级上的itemCls将会覆盖 container级上提供的 默认itemCls。 为itemCls指定的值将会被添加默认的 类('x-form-item')。

既然它被应用到项目的包装器上(参见 Ext.layout.FormLayout。 fieldTpl)， 它将允许你编写能应用到此field、label(如果有指定)、或者field内部任何其它元素的标准CSS规则。

注意: 参考 fieldLabel的注释。 .

示例用法:

// Apply a style to the field's label:
<style>
    .required .x-form-item-label {font-weight:bold;color:red;}
</style>

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Name',
        itemCls: 'required' //this label will be styled
    },{
        xtype: 'textfield',
        fieldLabel: 'Favorite Color'
    }]
});
Component
itemId : String
当没有可利用的对象引用时，itemId可以作为第二选择，用来获得一个组件的引用， 代替 ...

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

var c = new Ext.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'); // 与 Ext.getCmp()不同

p2 = p1.ownerCt.getComponent('p2'); // 通过兄弟对象获得引用

另请参见 id 和 ref 。

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

Component
keys : Object/Array
一个Ext.KeyMap 配置对象 (其格式为Ext.KeyMap.addBinding 所期望的值...
一个Ext.KeyMap 配置对象 (其格式为Ext.KeyMap.addBinding 所期望的值，用来向当前panel上绑定自定义的按键处理(默认为 null )
Panel
labelSeparator : String
每个fieldLabel 文本后面现实的分隔符。 此属性可以在多个层次上进行配置...

每个fieldLabel 文本后面现实的分隔符。 此属性可以在多个层次上进行配置。优先顺序为：

  • field / component level
  • container level
  • layout level (默认为冒号 ':')
如不需要为当前field的label显示分隔符，指定一个空字符串''即可。

注意:参见 clearCls 的注释。

另请参见 hideLabel 和 Ext.layout.FormLayout。 fieldTpl。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    layoutConfig: {
        labelSeparator: '~'   // layout config has lowest priority (defaults to ':')
    },
    labelSeparator: '>>',     // config at container level
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Field 1',
        labelSeparator: '...' // field/component level config supersedes others
    },{
        xtype: 'textfield',
        fieldLabel: 'Field 2' // labelSeparator will be '='

    }]
});
Component
labelStyle : String
一个CSS样式描述字符串，它将直接应用到当前field的label上...

一个CSS样式描述字符串，它将直接应用到当前field的label上。 如果有设置，默认为容器的labelStyle值(例如 Ext.layout.FormLayout.labelStyle , 或者 '')。

注意:参见 clearCls 的注释。

另请参见 hideLabel 和 Ext.layout.FormLayout. fieldTpl。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Name',
        labelStyle: 'font-weight:bold;'
    }]
});
Component
listeners : Object
一个包含一个或多个事件处理器的配置对象，会在初始化的时候被添加到目标对象上...

一个包含一个或多个事件处理器的配置对象，会在初始化的时候被添加到目标对象上。 该配置对象应该是一个有效的监听器配置对象就像 addListener例子中指定的一样可一次附加多个处理器。

ExtJs Components上的DOM事件

一些 ExtJs Component 类导出时会选择一些DOM事件(例如 "click", "mouseover" 等等), 这通常只是在有额外的值可以被添加时发生。例如DataView类的 click事件会传递被点击的节点。也可以直接在Component的HTMLElementevent上访问DOM事件，但必需在Component被渲染后监听器才能添加到Element 上。可以按照以下步骤添加插件:

// 插件会用一个监听器配置对象进行配置。
//该组件会被添加到所有处理方法的参数列表上。
Ext.DomObserver = Ext.extend(Object, {
    constructor: function(config) {
        this.listeners = config.listeners ? config.listeners : config;
    },

    // 组件将自己传递进了插件的初始化方法里
    init: function(c) {
        var p, l = this.listeners;
        for (p in l) {
            if (Ext.isFunction(l[p])) {
                l[p] = this.createHandler(l[p], c);
            } else {
                l[p].fn = this.createHandler(l[p].fn, c);
            }
        }

        // 渲染后立即添加监听器到元素上
        c.render = c.render.createSequence(function() {
            var e = c.getEl();
            if (e) {
                e.on(l);
            }
        });
    },

    createHandler: function(fn, c) {
        return function(e) {
            fn.call(this, e, c);
        };
    }
});

var combo = new Ext.form.ComboBox({

    // 元素被点击后折叠
    plugins: [ new Ext.DomObserver({
        click: function(evt, comp) {
            comp.collapse();
        }
    })],
    store: myStore,
    typeAhead: true,
    mode: 'local',
    triggerAction: 'all'
});

Observable
loadMask : Object
An Ext.LoadMask config or true to mask the grid while loading. Defaults to false .
GridPanel
margins : Object
注:此配置只用于该组件展现在一个使用BorderLayout...

注:此配置只用于该组件展现在一个使用BorderLayout 或 BoxLayout的两个子类之一作为布局的容器。

这个margins对象在该组件中的格式为：

{top: (top margin),right: (right margin),bottom: (bottom margin),left: (left margin)}

也可以是一个字符串，中间用空格分隔，margin值为数字。 把matches中每一个值的次序跟CSS中margin值的排列方式相对应：

  • 如果只有一个值，它适用于所有方面。
  • 如果有两个值，top和bottom的边框设置为第一个值，left和right设置为第二个值。
  • 如果有三个值，top设置为第一个值，left和right设置为第二个值，bottom设置为第三个值。
  • 如果有四个值，分别设置为top, right, bottom, left。

默认值:

{top:0, right:0, bottom:0, left:0}
BoxComponent
maskDisabled : Boolean
true 将会在panel被disabled时进行遮罩,false将不会遮罩它(默认为...
true 将会在panel被disabled时进行遮罩, false 将不会遮罩它(默认为 true )。使用任意一种方法，当被禁用时，panel都将告诉它包含的元素禁用它们自己， 但是遮罩panel可以提供一种额外的视觉效果，用以提示panel被禁用。
Panel
maxHeight : Number
Sets the maximum height of the grid - ignored if autoHeight is not on.
GridPanel
minButtonWidth : Number
当前panel中所有buttons 最小宽度，像素值(默认为 75 )
Panel
minColumnWidth : Number
The minimum width a column can be resized to. Defaults to 25.
GridPanel
overCls : String
一个可选的额外的CSS类，它将在鼠标移过元素时被添加到组件上...
一个可选的额外的CSS类，它将在鼠标移过元素时被添加到组件上，鼠标移出时 删除。(默认为'')。此属性对于在组件上，或者它的任何使用标准CSS规则的孩子节点上， 添加定制的'active' 或者 'hover'样式非常有用。
Component
padding : Number/String
设置body元素padding样式的快捷方式。 此值既可以是一个数值，被应用到所有侧边...
设置body元素padding样式的快捷方式。 此值既可以是一个数值，被应用到所有侧边，也可以是一个普通的描述padding的 CSS字符串。默认为undefined.
Panel
pageX : Number
如果该组件被包含在一个指定位置的容器中，这个值表示页面级的x坐标值（译者注：在有滚动条的情况下这个值很有用）。
BoxComponent
pageY : Number
如果该组件被包含在一个指定位置的容器中，这个值表示页面级的y坐标值（译者注：在有滚动条的情况下这个值很有用）。
BoxComponent
plugins : Object/Array
一个对象或者一个对象数组，为组件提供特殊的功能 ...
一个对象或者一个对象数组，为组件提供特殊的功能。 对一个合法的插件唯一的要求是它含有一个init()方法， 能接收一个Ext.Component型的参数。 当组件被创建时，如果有可用的插件，组件将会调用每个插件的init方法， 并将自身的引用作为方法参数传递给它。然后，每个插件就可以调用方法或者响应组件上的事件， 就像需要的那样提供自己的功能。
Component
ptype : String
需要创建配置的ptype。 当传递一个配置对象给构造函数时...
需要创建配置的ptype。 当传递一个配置对象给构造函数时，此配置选项不会被使用。 只有在使用懒初始化的时候此配置项才会被使用， 此时Plugin不是 通过一个完整的实例组件，而是通过一个Component配置指定的。 在渲染时，将会查找ptype以决定创建何种类型的Plugin。

如果你创建自己的Plugin，你可以通过 Ext.ComponentMgr.registerPlugin 对它们进行注册，以便能利用懒初始化和渲染机制。
Component
ref : String
一个路径描述，与组件的 ownerCt 相关，它描述了把当前组件的命名引用放置到哪个父容器中去。...

一个路径描述，与组件的 ownerCt 相关，它描述了把当前组件的命名引用放置到哪个父容器中去。

祖先的坐标路径可以通过'/'字符进行分隔。 例如，将一个Toolbar Button的引用放入 拥有此Toolbar的Panel中:

var myGrid = new Ext.grid.EditorGridPanel({
    title: 'My EditorGridPanel',
    store: myStore,
    colModel: myColModel,
    tbar: [{
        text: 'Save',
        handler: saveChanges,
        disabled: true,
        ref: '../saveButton'
    }],
    listeners: {
        afteredit: function() {
//          The button reference is in the GridPanel
            myGrid.saveButton.enable();
        }
    }
});

在上面的代码中，如果 ref 是 'saveButton' ，那么引用将会被放置到Toolbar中。 ref 中的每个'/' 都会从组件的 ownerCt 向上移动一级。

另请参见 added 和 removed 事件。

Component
region : String
注: 此配置只用于该组件展现在一个布局为BorderLayout的容器中...

注: 此配置只用于该组件展现在一个布局为BorderLayout的容器中(例如指定layout:'border')。

详见Ext.layout.BorderLayout。

BoxComponent
renderTo : Mixed
该值可以是一个节点的id、一个DOM节点或者一个已存在的元素...

该值可以是一个节点的id、一个DOM节点或者一个已存在的元素， 组件将会被渲染到其中。

  • 注意 :
      如果组件不是一个Container 的子项目时， 不要使用此选项。 渲染和管理它的子项目是一个Container 的layout manager的责任。
      当使用此配置项时，无需调用render()方法。

另请参见 render 。

Component
resizeEvent : String
在布局中进行尺寸调整需要监听的事件。 默认为 'resize' 。
Panel
selModel : Object
任何AbstractSelectionModel的子类，都将为grid提供一个选择模型(如果没有指定，默认...
任何AbstractSelectionModel的子类，都将为grid提供一个选择模型(如果没有指定，默认值为Ext.grid.CellSelectionModel)。
EditorGridPanel
shadow : Boolean/String
(或者一个有效的Ext.Shadow Ext.Shadow.mode 值)，用来在panel后面显示一个阴影...
true (或者一个有效的Ext.Shadow Ext.Shadow.mode 值)，用来在panel后面显示一个阴影， false 将不会显示阴影(默认为 'sides' )。注意，此选项只有当 floating = true 时才应用。
Panel
shadowOffset : Number
如果显示了阴影，此参数为数值偏移量(默认为 4 )。注意，只有当 floating = true 时此参数才会被应用。...
如果显示了阴影，此参数为数值偏移量(默认为 4 )。注意，只有当 floating = true 时此参数才会被应用。
Panel
shim : Boolean
false将会在需要的浏览器中禁用iframe衬垫(默认为...
false 将会在需要的浏览器中禁用iframe衬垫(默认为 true )。注意，此选项只有在 floating = true 时应用。
Panel
sm : Object
Shorthand for selModel .
GridPanel
stateEvents : Array
一个事件数组，当它们被触发时，组件需要保存自己的状态(默认值为 none)...

一个事件数组，当它们被触发时，组件需要保存自己的状态(默认值为 none)。 它们可以是任何该组件支持的事件类型，包括浏览器事件和 自定义事件(例如['click', 'customerchange'])。

对于保存和恢复组件状态的详细解释，参见 stateful

GridPanel
stateId : String
为该组件指定的唯一的id值，它被用作管理组件状态的目的...
为该组件指定的唯一的id值，它被用作管理组件状态的目的。 (如果设定了id，默认值为组件自己的id，否则，如果组件使用自动生成的id，此值为null)。

对于保存和反解析组件状态的解释，参见 stateful 。

Component
stateful : Boolean
一个标志参数，它将引起组件在启动时尝试从一个保存的状态中恢复内部状态参数...

一个标志参数，它将引起组件在启动时尝试从一个保存的状态中恢复内部状态参数。 组件必须要么拥有一个 stateId 或者 id ，它们被分配给需要被管理的状态属性。 在跨页面加载时，不保证自动生成的id属性的稳定性， 并且，不能依赖此id来保存和恢复一个组件的相同状态。

为了保存状态的操作能够工作，状态管理器的提供者必须 被设置成一个Ext.state.Provider 的实现类，它覆盖了set 和get 方法，以便保存和恢复name/value对。 有一个内置的Ext.state.CookieProvider 可用。

为当前页面设置状态提供者:

Ext.state.Manager.setProvider(new Ext.state.CookieProvider({
    expires: new Date(new Date().getTime()+(1000*60*60*24*7)), //7 days from now
}));

当 stateEvents 配置项中其中之一的事件被触发时， 一个状态可保存的组件将试图保存其状态。

保存状态时，一个可保存状态的组件首先需要通过调用 getState 方法来序列化它的状态。 默认情况下，此函数什么事都不做。 开发者必须提供一个实现，返回一个hash对象，它描述了组件可恢复的状态。

getState方法产生的值将会传递给 Ext.state.Manager.set 方法，它使用配置的 Ext.state.Provider 来保存对象，以组件的 stateId 为key，或者，如果此值（指stateId）没有指定时， 使用它的 id 作为key。

在进行构造时，一个可保存状态的组件试图通过调用 Ext.state.Manager.get方法来 恢复它的状态，传递 stateId 或者，如果此值（指stateId）没有指定时， 使用它的 id 作为参数。

结果对象被传递给 applyState 。 applyState 的默认实现只是简单地把属性拷贝到对象中， 但是开发者可以覆盖此方法以支持更多行为。

通过向 beforestaterestore, staterestore, beforestatesave 和 statesave 事件上绑定监听器，你可以在保存和恢复状态时进行额外的处理。

Component
store : Ext.data.Store
The Ext.data.Store the grid should use as its data source (required).
GridPanel
stripeRows : Boolean
true to stripe the rows. Default is false. This causes the CSS class x-grid3-row-alt to be added to alternate rows of...
true to stripe the rows. Default is false.

This causes the CSS class x-grid3-row-alt to be added to alternate rows of the grid. A default CSS rule is provided which sets a background colour, but you can override this with a rule which either overrides the background-color style using the '!important' modifier, or which uses a CSS selector of higher specificity.

GridPanel
style : String
被添加到组件元素的特定样式。 必须是按照...
被添加到组件元素的特定样式。 必须是按照 Ext.Element.applyStyles 类指定格式的合法参数值。

new Ext.Panel({
    title: 'Some Title',
    renderTo: Ext.getBody(),
    width: 400, height: 300,
    layout: 'form',
    items: [{
        xtype: 'textarea',
        style: {
            width: '95%',
            marginBottom: '10px'
        }
    },
        new Ext.Button({
            text: 'Send',
            minWidth: '100',
            style: {
                marginBottom: '10px'
            }
        })
    ]
});
Component
tabTip : String
注: 这个配置只用于当该组件作为TabPanel的一个子项目时使用...

注: 这个配置只用于当该组件作为TabPanel的一个子项目时使用。

一个String类型的innerHTML(支持html标签)，当鼠标放在该选项上的时，显示一个tooltip。为了tips能够被渲染，Ext.QuickTips.init()必须被提前调用。
BoxComponent
tbar : Object/Array
panel的顶部工具栏。 此参数可以是一个 The top toolbar of the panel. This can be a Ext.Toolbar 对象、一个工具栏配置、或者一个被添加到工具栏的...

panel的顶部工具栏。 此参数可以是一个 The top toolbar of the panel. This can be a Ext.Toolbar 对象、一个工具栏配置、或者一个被添加到工具栏的buttons/button配置数组。 注意，在渲染之后此参数无效。如需在渲染之后访问顶部工具栏，请使用 getTopToolbar。

注意:尽管Toolbar可以包含Field组件，但它们不会 通过加载祖先FormPanel而被更新。Panel的工具栏不是标准Container->Component 层次的一部分，所以它们不会被扫面以收集表单项。但是，这些值还是会 被提交，因为提交表单的参数是从DOM树中收集的。

Panel
tbarCfg : Object
一个DomHelper 元素的配置对象，描述了当前Panel的tbar元素结构。 另请参见...

一个DomHelper 元素的配置对象，描述了当前Panel的tbar元素结构。 另请参见 bodyCfg 。

Panel
title : String
被用作innerHTML的标题文本(接受html标签) ，用来显示在panel的...
被用作innerHTML的标题文本(接受html标签) ，用来显示在panel的 header 中(默认为'')。 当 title 被指定时， header 元素将会被自动创建并显示，除非 header 被显式地设置为 false 。 如果你不在配置时指定一个 title ， 但是你想以后设置，你必须要么 指定一个非空的 title (一个空格' ' 也可以)或者指定 header:true ，这样容器元素将会被创建。
Panel
titleCollapse : Boolean
将会允许通过在顶部工具条的任意地方点击展开和折叠panel(当...
true 将会允许通过在顶部工具条的任意地方点击展开和折叠panel(当 collapsible = true )， false ) 将会只允许通过点击工具按钮进行操作(默认为 false ))。如果当前panel是border布局中的一个子项目，另请参见 BorderLayout.Region floatable 配置项。
Panel
toolTemplate : Ext.Template/Ext.XTemplate
用来在header 元素中创建tools 的模板。默认为:...

用来在header 元素中创建tools 的模板。默认为:

                                    new Ext.Template('<div class="x-tool x-tool-{id}">&#160;</div>')

可以覆盖此参数，以便为基于更复杂XTemplate的tools提供自定义的DOM结构。 模板的数据为一个简单的tool配置对象(不是整个Array)， 它在 tools配置项指定。 在以下例子中，当鼠标滑过tool时，一个<a>标签被用来提供视觉效果:

var win = new Ext.Window({
    tools: [{
        id: 'download',
        href: '/MyPdfDoc.pdf'
    }],
    toolTemplate: new Ext.XTemplate(
        '<tpl if="id==\'download\'">',
            '<a class="x-tool x-tool-pdf" href="{href}"></a>',
        '</tpl>',
        '<tpl if="id!=\'download\'">',
            '<div class="x-tool x-tool-{id}">&#160;</div>',
        '</tpl>'
    ),
    width:500,
    height:300,
    closeAction:'hide'
});

注意，CSS类'x-tool-pdf'必须拥有一个关联的样式规则，它提供了一个适当的背景图片， 例如:

                                a.x-tool-pdf {background-image: url(../shared/extjs/images/pdf.gif)!important;}
Panel
tools : Array
一个工具按钮配置数组，用来添加到头部工具区域。 当渲染之后，每个工具都被存储为一个Element ，被一个叫做...
一个工具按钮配置数组，用来添加到头部工具区域。 当渲染之后，每个工具都被存储为一个Element ，被一个叫做 tools. <tool-type> 的公共参数引用。

每个工具配置都可以包含如下参数:

  • id : String
    必须。需要创建的工具类型。默认情况下，这被指定为一个 CSS类，格式为 x-tool- <tool-type> ，用来形成工具Element。 对于以下列出的工具类型，Ext提供了CSS规则，和一个包含图片的icon对象。 通过提供可选的CSS规则和背景图片，开发者可以实现自定义的工具:
      toggle (当collapsible 为 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
    • tc : Object
      工具配置对象
  • stopEvent : Boolean
    默认为true。指定为false可以允许点击事件进行冒泡。
  • scope : Object
    调用处理函数的作用域。
  • qtip : String/Object
    一个tip字符串，或者一个提供给 Ext.QuickTip.register 的配置参数
  • hidden : Boolean
    True将会在初始化时渲染成隐藏的。
  • on : Object
    一个监听器配置对象，以addListener所需的参数格式 指定事件监听器

注意，当panel被折叠时提供部分固定的工具，这些工具仅仅提供可视按钮。 所有必备的功能，都必须通过添加实现了必备行为的处理函数来实现。

示例用法:

tools:[{
    id:'refresh',
    qtip: 'Refresh form Data',
    // hidden:true,
    handler: function(event, toolEl, panel){
        // refresh logic
    }
},
{
    id:'help',
    qtip: 'Get Help',
    handler: function(event, toolEl, panel){
        // whatever
    }
}]

对于自定义 'help' 的id，定义了两个相应的css类，拥有一个到15x15图片的链接:

                                .x-tool-help {background-image: url(images/help.png);}
.x-tool-help-over {background-image: url(images/help_over.png);}
// if using an image sprite:
.x-tool-help {background-image: url(images/help.png) no-repeat 0 0;}
.x-tool-help-over {background-position:-15px 0;}
Panel
tpl : Mixed
一个 Ext.Template , Ext.XTemplate 或者一个用来形成一个Ext.XTemplate的字符串数组...
一个 Ext.Template , Ext.XTemplate 或者一个用来形成一个Ext.XTemplate的字符串数组。 与 data 和 tplWriteMode 配置项协同使用。
Component
tplWriteMode : String
刷新组件的内容区域时使用的Ext.(X)Template方式。 默认为'overwrite' (参见 Ext.XTemplate.overwrite )。
刷新组件的内容区域时使用的Ext.(X)Template方式。 默认为'overwrite' (参见 Ext.XTemplate.overwrite )。
Component
unstyled : Boolean
覆盖 baseCls 设置为 baseCls = 'x-plain' ， 除了必须的属性之外，它将panel渲染成无样式的...
覆盖 baseCls 设置为 baseCls = 'x-plain' ， 除了必须的属性之外，它将panel渲染成无样式的，以便Ext布局功能能起作用 (例如overflow:hidden)。
Panel
view : Object
The Ext.grid.GridView used by the grid. This can be set before a call to render().
GridPanel
viewConfig : Object
A config object that will be applied to the grid's UI view. Any of the config options available for Ext.grid.GridVie...
A config object that will be applied to the grid's UI view. Any of the config options available for Ext.grid.GridView can be specified here. This option is ignored if view is specified.
GridPanel
width : Number
组件的宽度(默认值为 auto)。注:如果想使用百分比的方式...
组件的宽度(默认值为 auto)。注:如果想使用百分比的方式来设置值，请查看 Ext.Component.anchor。
BoxComponent
x : Number
如果被包含在一个指定位置的容器中，这个值表示x(left)坐标值。
BoxComponent
xtype : String
需要创建配置的xtype。 当传递一个配置对象给构造函数时...
需要创建配置的xtype。 当传递一个配置对象给构造函数时，此配置选项不会被使用。 只有在使用懒初始化的时候此配置项才会被使用，此时容器的子项目不是 通过一个完整的实例组件，而是通过一个Component配置指定的。 在渲染时，将会查找xtype以决定创建何种类型的子组件。

预定义的xtype列表如下： here。

如果你继承Component创建你自己的组件，你需要使用Ext.ComponentMgr.registerType 对它们进行注册，以便利用懒初始化和渲染机制。
Component
y : Number
如果被包含在一个指定位置的容器中，这个值表示y(top)坐标值。
BoxComponent

公共属性

Property Defined By
body : Ext.Element
Panel的body Element ，可以用来包含HTML内容。 内容可以在...
Panel的body Element ，可以用来包含HTML内容。 内容可以在html 配置项中指定，或者可以使用autoLoad 配置项被加载，或者通过Panel的Updater提供。 只读。

如果这被用来通过任意方式加载可视的HTML元素，那么Panel不可以被用作 一个Layout，用来容纳其它Panel。

如果当前Panel期望被用作一个Layout的宿主 (参见 layout) 那么body元素必须不能被加载或者改变---因为它处于Panel的Layout的控制 之下。

注意: 另请参见 el .

Panel
buttons : Array
Panel的按钮数组，它们从 buttons 配置属性创建。只读。
Panel
bwrap : Ext.Element
Panel的bwrapElement ，用来包含其它Panel元素(tbar, body, bbar, footer)。 参见 bodyCfg。 只读。
Panel
collapsed : Boolean
如果当前panel被折叠为true。只读。
Panel
dd : Ext.dd.DragSource.
如果当前Panel被配置为 draggable ，此参数将会包含一个 Ext.dd.DragSource 实例，它负责处理拖拽Panel...

如果当前Panel被配置为 draggable ，此参数将会包含一个 Ext.dd.DragSource 实例，它负责处理拖拽Panel。

开发者必须提供Ext.dd.DragSource的 抽象方法的实现，用来提供drag/drop过程中的每一步行为。 参见 draggable.
Panel
el : Ext.Element
封装了当前组件的Ext.Element。 Read-only。通常情况下，这将是一个<DIV>元素，它由此类的...

封装了当前组件的Ext.Element。 Read-only。

通常情况下，这将是一个<DIV>元素，它由此类的 onRender方法创建，但是它可以通过使用 autoEl 配置项进行覆盖。

注意: 直到组件渲染完成此元素都将处于无效状态。

如需向当前组件的 DOM事件(而不是当前组件自己的Observable事件)添加监听器， 更多建议，参见 listeners 配置项，或者直接使用一个render监听器:

new Ext.Panel({
    title: 'The Clickable Panel',
    listeners: {
        render: function(p) {
            // Append the Panel to the click handler's argument list.
            p.getEl().on('click', handlePanelClick.createDelegate(null, [p], true));
        },
        single: true  // Remove the listener after first invocation
    }
});

另请参见 getEl

Component
footer : Ext.Element
Panel底部Element 。只读。此元素被用来容纳Panel的...
Panel底部Element 。只读。

此元素被用来容纳Panel的 buttons 或者 fbar 。

注意: 另请参见 el 的注释。

Panel
header : Ext.Element
Panel的headerElement. 只读。此元素被用来容纳 title和 tools...
Panel的headerElement. 只读。

此元素被用来容纳 title和 tools

注意: 另请参见 el 的注释。

Panel
hidden : Boolean
如果当前组件处于隐藏状态，此值为true。Read-only。
Component
initialConfig : Object
当前组件的初始化配置描述。 Read-only。
Component
ownerCt : Ext.Container
组件所属的Container (默认为undefined，当前组件被添加到一个容器中时此值被自动设置)...
组件所属的Container (默认为undefined，当前组件被添加到一个容器中时此值被自动设置)。 Read-only。

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

Component
private : Object
我们只能在一块可见的区域进行布局。 布局目标*或者它的任何父元素* 为...
我们只能在一块可见的区域进行布局。 布局目标*或者它的任何父元素* 为display:none， 将意味着它没有一块可见的区域。
Container
refOwner : Ext.Container
如果当前组件是一个容器的孩子，并且是通过一个 ref 配置项被注册的，则此值为 ref 引用被插入到的祖先容器。
如果当前组件是一个容器的孩子，并且是通过一个 ref 配置项被注册的，则此值为 ref 引用被插入到的祖先容器。
Component
rendered : Boolean
如果当前组件已经被渲染了，此值为true。Read-only.
Component

公共方法

Method Defined By
EditorGridPanel ( Object config )
参数:
  • config : Object
    The config object
返回值:
  • void
EditorGridPanel
addButton ( String/Object config , Function handler , Object scope ) : Ext.Button
向当前panel中添加一个按钮。注意，此方法必须在渲染之前调用。 首选的方式是通过...
向当前panel中添加一个按钮。注意，此方法必须在渲染之前调用。 首选的方式是通过buttons 配置项添加按钮。
参数:
  • config : String/Object
    一个合法的Ext.Button 配置。字符串将会变成默认按钮配置文本，对象将会被看做一个按钮配置对象。
  • handler : Function
    在按钮Ext.Button.click 时被调用的函数
  • scope : Object
    作用域( this 引用)，按钮处理函数将会在其中被执行。默认为Button.
返回值:
  • Ext.Button
    被添加的按钮
Panel
addClass ( string cls ) : Ext.Component
为组件底层的元素添加CSS样式。
为组件底层的元素添加CSS样式。
参数:
  • cls : string
    需要添加的CSS样式的class名称
返回值:
  • Ext.Component
    this
Component
addEvents( Object|String o, string Optional. ) : void
添加指定的事件到事件列表上，事件会被该Observable触发。
添加指定的事件到事件列表上，事件会被该Observable触发。
参数:
  • o : Object|String
    以事件名作为属性true作为值的对象 或者当多个事件名被分开的传递时则为第一个事件名。
  • Optional. : string
    事件名被分开的传递时则为事件名。 用法:
    this.addEvents('storeloaded', 'storecleared');
返回值:
  • void
Observable
addListener( String eventName, Function handler, [Object scope], [Object options] ) : void
给对象添加事件处理器。
给对象添加事件处理器。
参数:
  • eventName : String
    监听的事件名。
  • handler : Function
    事件调用的方法
  • scope : Object
    （可选）处理方法执行的作用域 (this的引用 reference)。 如果被忽略。默认为触发事件的对象。
  • options : Object
    （可选）包含处理器配置和属性的对象。 可能包含以下的属性:
    • scope : Object
      处理方法执行的作用域(this的引用) 。 如果被忽略。默认为触发事件的对象。
    • delay : Number
      在触发事件后延迟调用处理器的毫秒数。
    • single : Boolean
      如果为True则添加一个处理器来处理下一次的事件触发（仅一次），然后移除自己。
    • buffer : Number
      使得处理器延迟指定毫秒数后预定的运行在 一个Ext.util.DelayedTask中 。 如果事件在时间内再一次被触发，原始的处理器不会被调用，但是新的处理器会预定的在他的位置上。
    • target : Observable
      如果事件在目标的Observable上触发则仅仅调用处理器， 否则 事件会从子类的Observable上冒泡

    组合选项
    使用这些选项参数,可能会组合出不同类型的监听器：

    一个延迟的，一次性的监听器。

    myDataView.on('click', this.onClick, this, {
single: true,
delay: 100
});

    一次调用附加多个处理器
    该方法同样支持传递一个包含指定的多个处理器的属性的配置对象参数。

    myGridPanel.on({
'click' : {
    fn: this.onClick,
    scope: this,
    delay: 100
},
'mouseover' : {
    fn: this.onMouseOver,
    scope: this
},
'mouseout' : {
    fn: this.onMouseOut,
    scope: this
}
});

    或者一个简写的语法：

    myGridPanel.on({
'click' : this.onClick,
'mouseover' : this.onMouseOver,
'mouseout' : this.onMouseOut,
 scope: this
});
返回值:
  • void
Observable
bubble ( Function fn , [ Object scope ], [ Array args ] ) : Ext.Container
沿着component/container继承结构进行冒泡， 在每个组件上调用指定的函数。 所调用函数的作用域...
沿着component/container继承结构进行冒泡， 在每个组件上调用指定的函数。 所调用函数的作用域( this)将会是 指定的作用域或者是当前组件。 如果在函数任何一点上返回false，即停止冒泡过程
参数:
  • fn : Function
    需要调用的函数
  • scope : Object
    (可选) 函数的作用域(默认为当前节点)
  • args : Array
    (可选) 调用函数时需要传递的参数( 默认传递当前组件)
返回值:
  • Ext.Container
    this
Container
cloneConfig ( Object overrides ) : Ext.Component
默认使用原先传递给当前实例的配置值克隆当前组件。
默认使用原先传递给当前实例的配置值克隆当前组件。
参数:
  • overrides : Object
    一个新的配置项，包含需要覆盖到克隆版本的所有属性。 可以传递一个id参数给此对象，否则将自动生成一个新的id以避免发生重复。
返回值:
  • Ext.Component
    当前组件的克隆副本
Component
collapse ( Boolean animate ) : Ext.Panel
折叠panel的body，这样它就变成隐藏的。 触发beforecollapse 事件...
折叠panel的body，这样它就变成隐藏的。 触发beforecollapse 事件，处理函数返回false可以取消折叠操作。
参数:
  • animate : Boolean
    True将会在变换时使用动画效果，其它为false( 默认为panel的animCollapse 配置项的值)
返回值:
  • Ext.Panel
    this
Panel
destroy () : void
通过如下方法销毁对象：删除所有的事件监听器、将组件的元素从DOM树中删除...
通过如下方法销毁对象：删除所有的事件监听器、将组件的元素从DOM树中删除（如果可以）、 将组件从它的 Ext.Container（如果可用）中删除、 并且将它从Ext.ComponentMgr中 注销。 销毁操作一般由框架自动完成，一般情况下不需要直接调用该方法。
参数:
  • 无。
返回值:
  • void
Component
enableBubble( String/Array events ) :void
是否现在使得事件会被该Observable触发并调用 this.getBubbleTarget()方法在拥有者的继承树...

是否现在使得事件会被该Observable触发并调用 this.getBubbleTarget()方法在拥有者的继承树中冒泡。Observable的基础类中没有该方法的实现。

该方法一般被Ext.Components用来冒泡事件到拥有者的容器。参看Ext.Component.getBubbleTarget默认的实现 在Ext.Component中返回组件的直接拥有者。但是如果需要的是一个已知的目标，该方法可以被重写来更快的访问需求的目标。

例子:

Ext.override(Ext.form.Field, {
    // 添加方法到Field的initComponent上改变事件为冒泡
    initComponent : Ext.form.Field.prototype.initComponent.createSequence(function() {
        this.enableBubble('change');
    }),

    // 我们知道我们想让Field的事件冒泡到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() {
            // 如果样式被修改标题会变红。
            myForm.header.setStyle('color', 'red');
        }
    }
});
参数:
  • events : String/Array
    冒泡的事件名，或事件名数组
返回值:
  • void
Observable
expand ( Boolean animate ) : Ext.Panel
展开panel的body以便让其变得可见。 触发beforeexpand 事件...
展开panel的body以便让其变得可见。 触发beforeexpand 事件，如果它返回false将会取消展开操作。
参数:
  • animate : Boolean
    True将会在变换过程中使用动画效果，否则为false (默认为panel的 animCollapse 配置项的值)
返回值:
  • Ext.Panel
    this
Panel
findParentBy ( Function fn ) : Ext.Container
通过自定义的函数查找当前组件上层任何层次上的容器...
通过自定义的函数查找当前组件上层任何层次上的容器。 如果传递的函数返回true，容器对象将被返回。
参数:
  • fn : Function
    自定义的函数，使用如下参数调用(container,this component)。
返回值:
  • Ext.Container
    自定义函数返回true的第一个容器
Component
findParentByType ( String/Class xtype ) : Ext.Container
通过xtype或者class查找当前组件上层任何层次上的容器
通过xtype或者class查找当前组件上层任何层次上的容器
参数:
  • xtype : String/Class
    组件的xtype字符串，或者直接是组件的class
返回值:
  • Ext.Container
    符合指定xtype或者class的第一个容器
Component
fireEvent( String eventName, Object... args ) : Boolean
用传入的参数触发指定的事件 (减去事件名)。 一个事件可以被设置为冒泡 Obse...

用传入的参数触发指定的事件 (减去事件名)。

一个事件可以被设置为冒泡到Observable父类继承树(参看 Ext.Component.getBubbleTarget) 调用enableBubble实现。

参数:
  • eventName : String
    触发的事件名。
  • args : Object...
    传递给处理器的可变长度参数。
返回值:
  • Boolean
    如果有任何的处理器返回false则返回false，否则返回true。
Observable
focus ( [ Boolean selectText ], [ Boolean/Number delay ] ) : Ext.Component
尝试将当前组件设为焦点。
尝试将当前组件设为焦点。
参数:
  • selectText : Boolean
    (可选) 如果可用，同时选中组件内部的文本
  • delay : Boolean/Number
    (可选)将当前组件设置为焦点的延迟时间(设置为true等于0毫秒)
返回值:
  • Ext.Component
    this
Component
get ( String/Number key ) : Ext.Component
获取当前容器包含的一个组件( items.get(key)方法的别名)
获取当前容器包含的一个组件( items.get(key)方法的别名)
参数:
  • key : String/Number
    组件的索引
返回值:
  • Ext.Component
    Ext.Component
Container
getBottomToolbar () : Ext.Toolbar
返回panel底部区域toolbar ( bbar )。
返回panel底部区域toolbar ( bbar )。
参数:
  • 无。
返回值:
  • Ext.Toolbar
    toolbar
Panel
getBox ( [ Boolean local ] ) : Object
获取组件底层元素当前盒子模型的尺寸。（译者注：盒子模型是CSS术语，详细解释请自行搜索。）
获取组件底层元素当前盒子模型的尺寸。（译者注：盒子模型是CSS术语，详细解释请自行搜索。）
参数:
  • local : Boolean
    (可选)值为true时，组件的left值和top值将代替页面的XY被返回。(默认值为false)
返回值:
  • Object
    返回值的格式{x, y, width, height}
BoxComponent
getBubbleTarget () : Ext.Container
为Observable的fireEvent方法提供链接，它沿着继承结构进行冒泡操作。
为Observable的fireEvent方法提供链接，它沿着继承结构进行冒泡操作。
参数:
  • 无。
返回值:
  • Ext.Container
    拥有当前组件的容器。
Component
getColumnModel () : Ext.grid.ColumnModel
Returns the grid's ColumnModel.
Returns the grid's ColumnModel.
参数:
  • 无。
返回值:
  • Ext.grid.ColumnModel
    The column model
GridPanel
getDragDropText () : String
Called to get grid's drag proxy text, by default returns this.ddText.
Called to get grid's drag proxy text, by default returns this.ddText.
参数:
  • 无。
返回值:
  • String
    The text
GridPanel
getEl () : Ext.Element
返回 Ext.Element ，它包装了当前组件。...

返回 Ext.Element ，它包装了当前组件。

通常情况下，这将是一个<DIV>元素，它是由该类的onRender方法创建的， 但是可以使用autoEl配置项 覆盖它。

注意: 此元素将会一直处于无效状态直到当前组件渲染完成。

如需向当前组件的 DOM事件(而不是当前组件自己的Observable事件)添加监听器， 更多建议，参见 listeners 配置项，或者直接使用一个render监听器:

new Ext.Panel({
    title: 'The Clickable Panel',
    listeners: {
        render: function(p) {
            // Append the Panel to the click handler's argument list.
            p.getEl().on('click', handlePanelClick.createDelegate(null, [p], true));
        },
        single: true  // Remove the listener after first invocation
    }
});
参数:
  • 无。
返回值:
  • Ext.Element
    包装当前组件的元素。
Component
getFooterToolbar () : Ext.Toolbar
返回panel底部( fbar )区域的toolbar
返回panel底部( fbar )区域的toolbar
参数:
  • 无。
返回值:
  • Ext.Toolbar
    toolbar
Panel
getFrameHeight () : Number
返回当前panel框架元素的高度像素值 (包括所有top和bottom工具栏以及header和footer元素...
返回当前panel框架元素的高度像素值 (包括所有top和bottom工具栏以及header和footer元素， 但是不包括body高度)。 如需获取body高度，参见 getInnerHeight.
参数:
  • 无。
返回值:
  • Number
    框架高度
Panel
getFrameWidth () : Number
返回当前panel框架元素的宽度像素值 (不包含body宽度)。如需获得body宽度，参见...
返回当前panel框架元素的宽度像素值 (不包含body宽度)。如需获得body宽度，参见 getInnerWidth。
参数:
  • 无。
返回值:
  • Number
    框架宽度
Panel
getGridEl () : Element
Returns the grid's underlying element.
Returns the grid's underlying element.
参数:
  • 无。
返回值:
  • Element
    The element
GridPanel
getHeight () : Number
获取该组件的当前高度值。
获取该组件的当前高度值。
参数:
  • 无。
返回值:
  • Number
BoxComponent
getId () : String
返回当前组件的id，如果没有定义id，则自动生成并返回一个id:'ext-comp-'...
返回当前组件的 id 如果没有定义 id 则自动生成并返回一个 id

'ext-comp-' + (++Ext.Component.AUTO_ID)
参数:
  • 无。
返回值:
  • String
    id
Component
getInnerHeight () : Number
返回body元素的高度像素值(不包括任何框架元素的高度)。 对于框架高度参见...
返回body元素的高度像素值(不包括任何框架元素的高度)。 对于框架高度参见 getFrameHeight。
参数:
  • 无。
返回值:
  • Number
    body高度
Panel
getInnerWidth () : Number
返回body元素宽度像素值(不包含任何框架元素的宽度)。 对于框架宽度，参见 getFrameWidth。
返回body元素宽度像素值(不包含任何框架元素的宽度)。 对于框架宽度，参见 getFrameWidth。
参数:
  • 无。
返回值:
  • Number
    body宽度
Panel
getItemId () : String
返回当前组件的 itemId 。 如果没有通过配置参数指定 itemId 那么，将会使用...
返回当前组件的 itemId 。 如果没有通过配置参数指定 itemId 那么，将会使用 getId 返回 id 。
参数:
  • 无。
返回值:
  • String
Component
getLayoutTarget () : Ext.Element
返回当前容器中用来包含子组件的元素。提供了一个 可以返回容器的...

返回当前容器中用来包含子组件的元素。

提供了一个 可以返回容器的Element 的实现， 但是，如果容器有更复杂的结构， 可以覆盖此实现以返回 layout 在其中渲染子组件的元素。

参数:
  • 无。
返回值:
  • Ext.Element
    在其中渲染子组件的元素。
Container
getOuterSize () : Object
获取当前组件所在元素的尺寸大小，包括边缘的空白处。
获取当前组件所在元素的尺寸大小，包括边缘的空白处。
参数:
  • 无。
返回值:
  • Object
    一个包含元素大小的对象 {width: (element width + left/right margins), height: (element height + top/bottom margins)}
BoxComponent
getPosition ( [ Boolean local ] ) : Array
获取组件底层元素当前的XY位置。
获取组件底层元素当前的XY位置。
参数:
  • local : Boolean
    (可选)如果为true，将返回元素的left和top值，而不是相对于页面内的 XY。(默认值为 false)
返回值:
  • Array
    元素的XY位置值(例如：[100, 200])
BoxComponent
getResizeEl () : Ext.Element
返回该组件的最外层用来定义这些组件整体大小的Element...

返回该组件的最外层用来定义这些组件整体大小的Element对象。

通常用 getEl 方法将会返回相同的Element对象，但在有些情况下，组件可能有一些更多的封装了它的主要动态Element对象的Element对象。

例如ComboBox。它是封装在一个包含<input>元素的包装元素里(这将返回其 getEl方法和触发按钮的元素)。返回的元素为resizeEl。

参数:
  • 无。
返回值:
  • Ext.Element
    The Element which is to be resized by size managing layouts.
BoxComponent
getSelectionModel () : SelectionModel
Returns the grid's selection model configured by the selModel configuration option. If no selection model was configu...
Returns the grid's selection model configured by the selModel configuration option. If no selection model was configured, this will create and return a RowSelectionModel.
参数:
  • 无。
返回值:
  • SelectionModel
GridPanel
getSize () : Object
获取组件底层元素当前的大小。
获取组件底层元素当前的大小。
参数:
  • 无。
返回值:
  • Object
    一个包含元素大小的对象{width: (element width), height: (element height)}
BoxComponent
getStore () : Ext.data.Store
Returns the grid's data store.
Returns the grid's data store.
参数:
  • 无。
返回值:
  • Ext.data.Store
    The store
GridPanel
getTool ( String id ) : Object
根据id获取一个tool.
根据id获取一个tool.
参数:
  • id : String
返回值:
  • Object
    tool
Panel
getTopToolbar () : Ext.Toolbar
返回panel顶部区域的 toolbar ( tbar ).
返回panel顶部区域的 toolbar ( tbar ).
参数:
  • 无。
返回值:
  • Ext.Toolbar
    toolbar
Panel
getView () : Ext.grid.GridView
Returns the grid's GridView object.
Returns the grid's GridView object.
参数:
  • 无。
返回值:
  • Ext.grid.GridView
    The grid view
GridPanel
getWidth () : Number
获取该组件的当前宽度值。
获取该组件的当前宽度值。
参数:
  • 无。
返回值:
  • Number
BoxComponent
getXType () : String
获取当前组件的xtype，它是用 Ext.ComponentMgr 注册的。 所有可用的xtype列表，参见...
获取当前组件的xtype，它是用 Ext.ComponentMgr 注册的。 所有可用的xtype列表，参见 Ext.Component 类头部。示例用法:

var t = new Ext.form.TextField();
alert(t.getXType());  // alerts 'textfield'
参数:
  • 无。
返回值:
  • String
    The xtype
Component
getXTypes () : String
返回此组件的xtype继承树，用字符'-'分隔。 所有可用的xtype值...

返回此组件的xtype继承树，用字符'-'分隔。 所有可用的xtype值，请参见Ext.Component 类的头部。

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

示例用法:

var t = new Ext.form.TextField();
alert(t.getXTypes());  // alerts 'component/box/field/textfield'
参数:
  • 无。
返回值:
  • String
    xtype层次字符串
Component
hasListener( String eventName ) : Boolean
检测对象是否包含指定事件的任何监听器
检测对象是否包含指定事件的任何监听器
参数:
  • eventName : String
    检测的事件名
返回值:
  • Boolean
    如果事件被监听则为true，否则为false
Observable
hide () : Ext.Component
隐藏当前组件。 监听 beforehide' 事件并且返回false 可以取消隐藏组件的操作。 在隐藏组件之后触发...
隐藏当前组件。 监听 beforehide' 事件并且返回false 可以取消隐藏组件的操作。 在隐藏组件之后触发 ' hide' 事件。 如果组件被配置成 hidden 那么此方法在内部被调用。
参数:
  • 无。
返回值:
  • Ext.Component
    this
Component
isVisible () : Boolean
如果当前组件可见，返回true。
如果当前组件可见，返回true。
参数:
  • 无。
返回值:
  • Boolean
    如果当前组件可见，返回true，其它返回false。
Component
isXType ( String xtype , [ Boolean shallow ] ) : Boolean
Tests whether or not this Component is of a specific xtype. This can test whether this Component is descended from th...

测试此组件是否是指定的xtype。此方法既可以测试是否是指定的xtype的某个子类， 或者它是否直接是指定的xtype类(shallow=true)。

如果使用你自己的子类，必须知道组件必须注册它的xtype值。

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

示例用法:

var t = new Ext.form.TextField();
var isText = t.isXType('textfield');        // true
var isBoxSubclass = t.isXType('box');       // true, descended from BoxComponent
var isBoxInstance = t.isXType('box', true); // false, not a direct BoxComponent instance
参数:
  • xtype : String
    需要为当前组件进行检测的xtype
  • shallow : Boolean
    (可选) 如果为false，检测组件是否是xtype继承树中的某个子类（默认是这种情况）， 如果为true，只检测组件是否是指定的xtype类型。
返回值:
  • Boolean
    如果当前组件是指定xtype的子类，返回true，其它返回flase。
Component
mon ( Observable|Element item , Object|String ename , Function fn , Object scope , Object opt ) : void
向任何Observable对象(或者元素)上添加监听器，监听器将会在组件...

向任何Observable对象(或者元素)上添加监听器，监听器将会在组件销毁时被自动删除。
用法：

myGridPanel.mon(myGridPanel.getSelectionModel(), 'selectionchange', handleSelectionChange, null, {buffer: 50});

or:

myGridPanel.mon(myGridPanel.getSelectionModel(), {
    selectionchange: handleSelectionChange,
    buffer: 50
});
参数:
  • item : Observable|Element
    需要添加listener/listeners的项目。
  • ename : Object|String
    事件名，或者一个包含事件名属性的对象。
  • fn : Function
    (可选) 如果 ename 参数是一个事件名，此参数为处理函数。
  • scope : Object
    (可选)如果 ename 参数是一个事件名称，此参数是作用域 ( this 引用)，监听函数将会在此作用域中被执行。
  • opt : Object
    (可选)如果 ename 参数是一个事件名称， 此参数是 addListener 配置项。
返回值:
  • void
Component
mun ( Observable|Element item , Object|String ename , Function fn , Object scope ) : void
删除通过mon 方法添加的监听器。
删除通过mon 方法添加的监听器。
参数:
  • item : Observable|Element
    需要删除listener/listeners的项目。
  • ename : Object|String
    事件名称，或者一个包含事件名称属性的对象。
  • fn : Function
    (可选)如果 ename 参数是一个事件名称，此参数是一个处理函数。
  • scope : Object
    (可选)如果 ename 参数是一个事件名称，此参数是作用域 ( this 引用)，监听函数将会在此作用域中被执行。
返回值:
  • void
Component
nextSibling () : Ext.Component
返回所属容器中的下一个组件
返回所属容器中的下一个组件
参数:
  • 无。
返回值:
  • Ext.Component
Component
on( String eventName, Function handler, [Object scope], [Object options] ) : void
给对象添加事件处理器 (addListener的简写形式)
给对象添加事件处理器 (addListener的简写形式。)
参数:
  • eventName : String
    监听的事件类型
  • handler : Function
    事件调用的方法
  • scope : Object
    （可选）处理方法执行时的作用域 (this 的引用)。 如果被忽略。默认为触发事件的对象。
  • options : Object
    可选 包含处理器配置的对象。
返回值:
  • void
Observable
previousSibling () : Ext.Component
返回所属容器中的前一个组件
返回所属容器中的前一个组件
参数:
  • 无。
返回值:
  • Ext.Component
Component
purgeListeners() : void
移除对象上所有的监听器
移除对象上所有的监听器
参数:
  • 无。
返回值:
  • void
Observable
reconfigure ( Ext.data.Store store , Ext.grid.ColumnModel colModel ) : void
Reconfigures the grid to use a different Store and Column Model and fires the 'reconfigure' event. The View will be b...

Reconfigures the grid to use a different Store and Column Model and fires the 'reconfigure' event. The View will be bound to the new objects and refreshed.

Be aware that upon reconfiguring a GridPanel, certain existing settings may become invalidated. For example the configured autoExpandColumn may no longer exist in the new ColumnModel. Also, an existing PagingToolbar will still be bound to the old Store, and will need rebinding. Any plugins might also need reconfiguring with the new data.

参数:
  • store : Ext.data.Store
    The new Ext.data.Store object
  • colModel : Ext.grid.ColumnModel
    The new Ext.grid.ColumnModel object
返回值:
  • void
GridPanel
relayEvents( Object o, Array events ) : void
从指定的Observable上传递选择的事件就好像被当前对象触发一样。
从指定的Observable上传递选择的事件就好像被当前对象触发一样。
参数:
  • o : Object
    该Observable上的事件被当前对象传递。
  • events : Array
    传递的数组名。
返回值:
  • void
Observable
removeAll ( [ Boolean autoDestroy ] ) : Array
从当前容器中删除所有组件。
从当前容器中删除所有组件。
参数:
  • autoDestroy : Boolean
    (可选) 此参数为true时将自动调用 被删组件的 Ext.Component.destroy 方法。 默认为当前容器的 autoDestroy 配置值。
返回值:
  • Array
    被销毁的组件数组
Container
removeClass ( string cls ) : Ext.Component
从组件底层的元素上删除一个CSS类。
从组件底层的元素上删除一个CSS类。
参数:
  • cls : string
    需要移除的CSS类名
返回值:
  • Ext.Component
    this
Component
removeListener( String eventName, Function handler, [Object scope] ) : void
删除一个事件处理器。
删除一个事件处理器。
参数:
  • eventName : String
    处理器关联的事件类型。
  • handler : Function
    移除的处理器。 这应该是传递到addListener里的方法的引用。
  • scope : Object
    （可选）处理器指定的初始作用域。
返回值:
  • void
Observable
render ( [ Element/HTMLElement/String container ], [ String/Number position ] ) : void
在传递进来的HTML元素中渲染当前组件。...

在传递进来的HTML元素中渲染当前组件。

如果你正在使用一个Container 对象放置当前组件，那么请不要使用render方法。

当容器第一次被渲染时，它的子组件将会被容器的 layout 管理器渲染。

某些布局管理器允许动态添加子组件。它们包括 Ext.layout.CardLayout, Ext.layout.AnchorLayout, Ext.layout.FormLayout, Ext.layout.TableLayout。

当一个新的子组件被添加时，如果容器已经被渲染了， 你可能需要调用容器的 doLayout 方法来刷新视图，它将导致所有没有被渲染的子组件进行渲染操作。 此操作是必须的，这样你可以添加多个子组件而只刷新一次layout。

当创建复杂的UI时，非常重要的一点是，请记住调整子项目的尺寸和位置是容器的 layout 管理器的职责。 如果你希望子项目的尺寸对用户交互作出反应， 你必须为容器配置一个布局管理器，它将创建和管理你心里想要的那种布局。

忽略容器的layout 配置意味着将会使用一个基本的布局管理器，它除了按次序把子组件 渲染到容器中之外什么事情都不做。 这种情况下，任何尺寸和位置的调整操作都不会发生。

参数:
  • container : Element/HTMLElement/String
    (可选) 需要在其中渲染当前组件的元素。 如果它是从一个已存在的标签中创建的，此参数应该被忽略。
  • position : String/Number
    (可选) 容器中的一个元素ID或者一个DOM节点索引， 当前组件将会被插入到它前面 (默认append到容器的尾部)
返回值:
  • void
Component
resumeEvents() : void
重新开始触发事件。(参见suspendEvents) 如果事件以queueSuspended参数被挂起，则在事件被挂起时 ...
重新开始触发事件。(参见 suspendEvents) 如果事件以queueSuspended 参数被挂起，则在事件被挂起时触发的事件会被传递到所有的监听器上
参数:
  • 无。
返回值:
  • void
Observable
setAutoScroll ( Boolean scroll ) : Ext.BoxComponent
设置该组件内容溢出时是否自动显示滚动条。
设置该组件内容溢出时是否自动显示滚动条。
参数:
  • scroll : Boolean
    值为true的话组件自动显示滚动条。
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setHeight ( Mixed height ) : Ext.BoxComponent
设置此组件的高度。该方法将触发resize事件。
设置此组件的高度。该方法将触发resize事件。
参数:
  • height : Mixed
    The new height to set.
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setIconClass ( String cls ) : void
设置CSS类，为当前panel提供图标图片。 如果已经设置了...
设置CSS类，为当前panel提供图标图片。 如果已经设置了，此方法将会替换任何现有的图标类并在完成之后触发 iconchange 事件。
参数:
  • cls : String
    新的CSS类名
返回值:
  • void
Panel
setPagePosition ( Number x , Number y ) : Ext.BoxComponent
设置组件在页面中的XY位置。 如果需要设置left和top值 ，请使用...
设置组件在页面中的XY位置。 如果需要设置left和top值 ，请使用setPosition方法。 该方法触发move事件。
参数:
  • x : Number
    The new x position
  • y : Number
    The new y position
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setPosition ( Number left , Number top ) : Ext.BoxComponent
设置组件的left和top值。设置组件的页面XY值，请使用setPagePosition方法。该方法触发...
设置组件的left和top值。设置组件的页面XY值，请使用setPagePosition方法。该方法触发move事件。
参数:
  • left : Number
    The new left
  • top : Number
    The new top
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setSize ( Mixed width , Mixed height ) : Ext.BoxComponent
设置BoxComponent的宽度和高度。 此方法触发resize事件...
设置BoxComponent的宽度和高度。 此方法触发resize事件。此方法可以接收单独的width或者height值作为参数， 或者你可以传递像这样的一个size对象： {width:10, height:20} 。
参数:
  • width : Mixed
    设置的新的width值。这可以是：
    • 一个Number类型指定Element新的宽度 Ext.Element.defaultUnit(默认为像素 :'px')。
    • 一个String类型用于设置width的CSS样式。
    • 一个size对象格式为 {width: widthValue, height: heightValue} 。
    • 值为 undefined 时，保留原来的width不变。
  • height : Mixed
    设置的新的height值(如果第一个参数传递了一个size对象，此参数没有必要传递)。这可以是：
    • 一个Number类型指定Element新的高度 Ext.Element.defaultUnit(默认为像素 :'px')。
    • 一个String类型用于设置height的CSS样式。也有可能不会被使用到。
    • 值为 undefined 时，保留原来的height不变。
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setTitle ( String title , [ String iconCls ] ) : void
为panel设置标题文本，也可选择设置 icon class。...

为panel设置标题文本，也可选择设置 icon class。

为了能够设置标题，必须已经为Panel创建了一个header元素。 要么通过向Panel上注册一个非空的 title ，或者配置 header: true ，可触发此操作(译者注：指为Panel创建header元素)。

参数:
  • title : String
    需要设置的标题文本
  • iconCls : String
    (可选) iconCls 一个用户定义的CSS类，为当前panel提供图标图片。
返回值:
  • void
Panel
setVisible ( Boolean visible ) : Ext.Component
工具方法，通过使用布尔值隐藏或者显示当前组件。
工具方法，通过使用布尔值隐藏或者显示当前组件。
参数:
  • visible : Boolean
    true时显示，false时隐藏
返回值:
  • Ext.Component
    this
Component
setWidth ( Mixed width ) : Ext.BoxComponent
设置组件的宽度。 此方法触发resize事件。
设置组件的宽度。 此方法触发resize事件。
参数:
  • width : Mixed
    The new width to set.
返回值:
  • Ext.BoxComponent
    this
BoxComponent
show () : Ext.Component
显示当前组件。监听' beforeshow' 事件，返回 false 取消显示组件...
显示当前组件。监听' beforeshow' 事件，返回 false 取消显示组件。在显示组件之后触发' show' 事件。
参数:
  • 无。
返回值:
  • Ext.Component
    this
Component
startEditing ( Number rowIndex , Number colIndex ) : void
开始编辑指定的row/column
开始编辑指定的row/column
参数:
  • rowIndex : Number
  • colIndex : Number
返回值:
  • void
EditorGridPanel
stopEditing ( [ Boolean cancel ] ) : void
终止所有当前正在进行的编辑
终止所有当前正在进行的编辑
参数:
  • cancel : Boolean
    (可选) true撤销更改
返回值:
  • void
EditorGridPanel
suspendEvents( Boolean queueSuspended ) : void
暂停触发所有的事件。 (参看resumeEvents)
暂停触发所有的事件。（参看 resumeEvents)
参数:
  • queueSuspended : Boolean
    如果传递为true则排列好暂停的事件使得在调用 resumeEvents 后再触发它们，而不是抛弃所有暂停的事件。
返回值:
  • void
Observable
syncSize () : Ext.BoxComponent
强制组件的大小按照此组件底层元素当前的高度和宽度计算。
强制组件的大小按照此组件底层元素当前的高度和宽度计算。
参数:
  • 无。
返回值:
  • Ext.BoxComponent
    this
BoxComponent
toggleCollapse ( Boolean animate ) : Ext.Panel
根据panel的当前状态，执行expand或者 collapse操作 的快捷方式。
根据panel的当前状态，执行expand或者 collapse操作 的快捷方式。
参数:
  • animate : Boolean
    True将会在转换过程中使用动画效果，否则为false (默认为panel的animCollapse 配置项的值)
返回值:
  • Ext.Panel
    this
Panel
un( String eventName, Function handler, [Object scope] ) : void
删除一个事件处理器(removeListener方法的简写形式)
删除一个事件处理器(removeListener方法的简写形式。)
参数:
  • eventName : String
    处理器关联的事件类型
  • handler : Function
    被删除的处理器 这应该是传入 addListener 中的方法的引用。
  • scope : Object
    （可选）为处理器指定的初始作用域。
返回值:
  • void
Observable
update ( Mixed htmlOrData , [ Boolean loadScripts ], [ Function callback ] ) : void
刷新组件的内部区域。
刷新组件的内部区域。
参数:
  • htmlOrData : Mixed
    如果已经通过tpl为当前组件配置了一个模板，那么 将会使用此参数来装配模板。 如果没有为当前组件配置模板，组件的内容区域将会通过Ext.Element 进行刷新。
  • loadScripts : Boolean
    (可选)只用在使用html配置时此参数才合法。默认为false。
  • callback : Function
    (可选)只用在使用html配置时此参数才合法。 当脚本加载完成时回调函数才被执行。
返回值:
  • void
Component
updateBox ( Object box ) : Ext.BoxComponent
设置此组件底层元素的盒子模型尺寸。(译者注：盒子模型是CSS术语，详细资料请自行搜索。)
设置此组件底层元素的盒子模型尺寸。(译者注：盒子模型是CSS术语，详细资料请自行搜索。)
参数:
  • box : Object
    一个格式为{x, y, width, height}的对象
返回值:
  • Ext.BoxComponent
    this
BoxComponent

公共事件

Event Defined By
activate : ( Ext.Panel p )
当Panel被设置为视觉活动状态之后触发。 注意Panel不直接支持活动状体，但是Panel的一些子类...
当Panel被设置为视觉活动状态之后触发。 注意Panel不直接支持活动状体，但是Panel的一些子类 (例如 Ext.Window)支持。 作为TabPanel子组件的Panel，在TabPanel的控制之下触发activate和deactivate事件。
监听器将会以如下参数格式被调用:
  • p : Ext.Panel
    被激活的Panel.
Panel
added : ( Ext.Component this , Ext.Container ownerCt , number index )
当一个组件被添加到一个Ext.Container时触发
当一个组件被添加到一个Ext.Container时触发
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • ownerCt : Ext.Container
    用于组件的容器
  • index : number
    添加组件的位置
Component
afteredit : ( Object e )
在一个单元格被编辑之后触发。 编辑事件的对象包含以下属性...
在一个单元格被编辑之后触发。 编辑事件的对象包含以下属性
  • grid - 当前的grid
  • record - 当前编辑的记录
  • field - 当前编辑的字段名
  • value - 编辑后的值
  • originalValue - 字段被编辑之前的原始值。
  • row - grid的行序号
  • column - grid的列序号
grid.on('afteredit', afterEdit, this );

function afterEdit(e) {
    // execute an XHR to send/commit data to the server, in callback do (if successful):
    e.record.commit();
};
监听器将会以如下的参数格式调用:
  • e : Object
    An edit event (see above for description)
EditorGridPanel
afterrender : ( Ext.Component this )
在组件渲染完成之后触发...

在组件渲染完成之后触发。

afterrender事件在当前组件被rendered 结束之后、在为组件定义的所有afterRender方法执行之后 触发，并且，如果有stateful， 也在状态被保存之后才触发。

监听器将会以如下参数格式被调用:
  • this : Ext.Component
Component
beforeclose : ( Ext.Panel p )
在Panel被关闭之前触发。 注意，Panel不直接支持关闭操作，但是Panel的一些子类(例如...
在Panel被关闭之前触发。 注意，Panel不直接支持关闭操作，但是Panel的一些子类(例如 Ext.Window) ，或者一个位于Ext.TabPanel中的Panel支持。 此事件仅被应用到这些子类中。处理函数可以返回false以取消关闭操作。
监听器将会以如下参数格式被调用:
  • p : Ext.Panel
    正在被关闭的Panel.
Panel
beforecollapse : ( Ext.Panel p , Boolean animate )
在Panel被折叠之前触发。监听器可以返回false取消折叠。
在Panel被折叠之前触发。监听器可以返回false取消折叠。
监听器将会以如下参数格式被调用:
  • p : Ext.Panel
    被折叠的Panel
  • animate : Boolean
    如果折叠操作使用了动画效果，此参数为true，其它为false
Panel
beforedestroy : ( Ext.Component this )
在组件 destroyed 之前触发。 在事件监听器中返回false以停止 destroy 操作。
在组件 destroyed 之前触发。 在事件监听器中返回false以停止 destroy 操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforeedit : ( Object e )
在开始编辑单元格之前触发。edit事件对象包含如下参数...
在开始编辑单元格之前触发。edit事件对象包含如下参数:
  • grid - 当前grid
  • record - 被编辑过的记录
  • field - 被编辑过的字段名
  • value - 设置到被编辑字段的值。
  • row - grid行序号
  • column - grid列序号
  • cancel - 将此属性设置为true可取消编辑，或者从程序中返回false。
监听器将会以如下的参数格式调用:
  • e : Object
    edit事件(见以上介绍)
EditorGridPanel
beforeexpand : ( Ext.Panel p , Boolean animate )
在Panel被展开之前触发。监听器可以返回false取消展开操作。
在Panel被展开之前触发。监听器可以返回false取消展开操作。
监听器将会以如下参数格式被调用:
  • p : Ext.Panel
    被展开的Panel
  • animate : Boolean
    如果展开操作使用动画效果，为true，其它为false
Panel
beforehide : ( Ext.Component this )
在调用hide方法隐藏组件之前触发。 在事件监听器中返回false可以停止隐藏操作。
在调用hide方法隐藏组件之前触发。 在事件监听器中返回false可以停止隐藏操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforerender : ( Ext.Component this )
在组件被rendered 之前触发。 在事件监听器中返回false可以停止render 操作。
在组件被rendered 之前触发。 在事件监听器中返回false可以停止render 操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforeshow : ( Ext.Component this )
在调用show()方法现实组件之前触发。 事件处理函数返回false可以停止show。
在调用show 方法现实组件之前触发。 事件处理函数返回false可以停止show。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforestaterestore : ( Ext.Component this , Object state )
在组件状态恢复之前触发。返回false停止恢复状态操作。
在组件状态恢复之前触发。返回false停止恢复状态操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    StateProvider返回的状态哈希值。 如果没有禁止此事件，那么状态对象会被传递给applyState。 默认情况下，这样简单地把属性值拷贝到当前组件中。 可以覆盖此方法以提供自定的状态恢复操作。
Component
beforestatesave : ( Ext.Component this , Object state )
在组件状态被保存到配置的状态提供者之前触发。 返回false可以停止保存。
在组件状态被保存到配置的状态提供者之前触发。 返回false可以停止保存。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    状态值哈希。 这由在组件上调用getState() 方法决定。 此方法必须由开发者提供，返回是否需要对状态进行描述，默认情况下， Ext.Component有一个空实现。
Component
bodyresize : ( Ext.Panel p , Number width , Number height )
在Panel被调整尺寸之后触发。
在Panel被调整尺寸之后触发。
监听器将会以如下参数格式被调用:
  • p : Ext.Panel
    被调整尺寸的Panel
  • width : Number
    Panel body的新宽度。
  • height : Number
    Panel body的新高度。
Panel
bodyscroll : ( Number scrollLeft , Number scrollTop )
Fires when the body element is scrolled
Fires when the body element is scrolled
Listeners will be called with the following arguments:
  • scrollLeft : Number
  • scrollTop : Number
GridPanel
cellclick : ( Grid this , Number rowIndex , Number columnIndex , Ext.EventObject e )
Fires when a cell is clicked. The data for the cell is drawn from the Record for this row. To access the data in the ...
Fires when a cell is clicked. The data for the cell is drawn from the Record for this row. To access the data in the listener function use the following technique:

                                    function(grid, rowIndex, columnIndex, e) {
    var record = grid.getStore().getAt(rowIndex);  // Get the Record
    var fieldName = grid.getColumnModel().getDataIndex(columnIndex); // Get field name
    var data = record.get(fieldName);
}
Listeners will be called with the following arguments:
  • this : Grid
  • rowIndex : Number
  • columnIndex : Number
  • e : Ext.EventObject
GridPanel
cellcontextmenu : ( Grid this , Number rowIndex , Number cellIndex , Ext.EventObject e )
Fires when a cell is right clicked
Fires when a cell is right clicked
Listeners will be called with the following arguments:
  • this : Grid
  • rowIndex : Number
  • cellIndex : Number
  • e : Ext.EventObject
GridPanel
celldblclick : ( Grid this , Number rowIndex , Number columnIndex , Ext.EventObject e )
Fires when a cell is double clicked
Fires when a cell is double clicked
Listeners will be called with the following arguments:
  • this : Grid
  • rowIndex : Number
  • columnIndex : Number
  • e : Ext.EventObject
GridPanel
cellmousedown : ( Grid this , Number rowIndex , Number columnIndex , Ext.EventObject e )
Fires before a cell is clicked
Fires before a cell is clicked
Listeners will be called with the following arguments:
  • this : Grid
  • rowIndex : Number
  • columnIndex : Number
  • e : Ext.EventObject
GridPanel
click : ( Ext.EventObject e )
The raw click event for the entire grid.
The raw click event for the entire grid.
Listeners will be called with the following arguments:
  • e : Ext.EventObject
GridPanel
close : ( Ext.Panel p )
在Panel被关闭之后触发。注意，Panel不直接提供关闭操作， 但是Panel的一些子类(例如...
在Panel被关闭之后触发。注意，Panel不直接提供关闭操作， 但是Panel的一些子类(例如 Ext.Window) ，或者处于Ext.TabPanel中的Panel支持。
监听器将会以如下参数格式被调用:
  • p : Ext.Panel
    被关闭的Panel.
Panel
collapse : ( Ext.Panel p )
在Panel被折叠后触发。
在Panel被折叠后触发。
监听器将会以如下参数格式被调用:
  • p : Ext.Panel
    被折叠的Panel
Panel
columnmove : ( Number oldIndex , Number newIndex )
Fires when the user moves a column
Fires when the user moves a column
Listeners will be called with the following arguments:
  • oldIndex : Number
  • newIndex : Number
GridPanel
columnresize : ( Number columnIndex , Number newSize )
Fires when the user resizes a column
Fires when the user resizes a column
Listeners will be called with the following arguments:
  • columnIndex : Number
  • newSize : Number
GridPanel
containerclick : ( Grid this , Ext.EventObject e )
Fires when the container is clicked. The container consists of any part of the grid body that is not covered by a row...
Fires when the container is clicked. The container consists of any part of the grid body that is not covered by a row.
Listeners will be called with the following arguments:
  • this : Grid
  • e : Ext.EventObject
GridPanel
containercontextmenu : ( Grid this , Ext.EventObject e )
Fires when the container is right clicked. The container consists of any part of the grid body that is not covered by...
Fires when the container is right clicked. The container consists of any part of the grid body that is not covered by a row.
Listeners will be called with the following arguments:
  • this : Grid
  • e : Ext.EventObject
GridPanel
containerdblclick : ( Grid this , Ext.EventObject e )
Fires when the container is double clicked. The container consists of any part of the grid body that is not covered b...
Fires when the container is double clicked. The container consists of any part of the grid body that is not covered by a row.
Listeners will be called with the following arguments:
  • this : Grid
  • e : Ext.EventObject
GridPanel
containermousedown : ( Grid this , Ext.EventObject e )
Fires before the container is clicked. The container consists of any part of the grid body that is not covered by a r...
Fires before the container is clicked. The container consists of any part of the grid body that is not covered by a row.
Listeners will be called with the following arguments:
  • this : Grid
  • e : Ext.EventObject
GridPanel
contextmenu : ( Ext.EventObject e )
The raw contextmenu event for the entire grid.
The raw contextmenu event for the entire grid.
Listeners will be called with the following arguments:
  • e : Ext.EventObject
GridPanel
dblclick : ( Ext.EventObject e )
The raw dblclick event for the entire grid.
The raw dblclick event for the entire grid.
Listeners will be called with the following arguments:
  • e : Ext.EventObject
GridPanel
deactivate : ( Ext.Panel p )
在Panel被视觉上失去活动状态之后触发。 注意，Panel不直接支持此操作，但是Panel的一些子类...
在Panel被视觉上失去活动状态之后触发。 注意，Panel不直接支持此操作，但是Panel的一些子类 (例如Ext.Window)支持。 作为TabPanel的子组件的Panel将会在TabPanel的控制之下触发activate 和deactivate事件。
监听器将会以如下参数格式被调用:
  • p : Ext.Panel
    失去活动状态的Panel
Panel
destroy : ( Ext.Component this )
在组件被销毁之后触发。
在组件被destroyed之后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
disable : ( Ext.Component this )
在组件被设置为无效状态后触发。
在组件被设置为无效状态后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
enable : ( Ext.Component this )
当组件被设置为有效(enabled)之后触发。
当组件被设置为有效(enabled)之后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
expand : ( Ext.Panel p )
当Panel已经展开之后触发。
当Panel已经展开之后触发。
监听器将会以如下参数格式被调用:
  • p : Ext.Panel
    已经被展开的Panel.
Panel
groupchange : ( Grid this , String groupField )
Fires when the grid's grouping changes (only applies for grids with a GroupingView)
Fires when the grid's grouping changes (only applies for grids with a GroupingView)
Listeners will be called with the following arguments:
  • this : Grid
  • groupField : String
    A string with the grouping field, null if the store is not grouped.
GridPanel
groupclick : ( Grid this , String groupField , String groupValue , Ext.EventObject e )
Fires when group header is clicked. Only applies for grids with a GroupingView.
Fires when group header is clicked. Only applies for grids with a GroupingView .
Listeners will be called with the following arguments:
  • this : Grid
  • groupField : String
  • groupValue : String
  • e : Ext.EventObject
GridPanel
groupcontextmenu : ( Grid this , String groupField , String groupValue , Ext.EventObject e )
Fires when group header is right clicked. Only applies for grids with a GroupingView.
Fires when group header is right clicked. Only applies for grids with a GroupingView .
Listeners will be called with the following arguments:
  • this : Grid
  • groupField : String
  • groupValue : String
  • e : Ext.EventObject
GridPanel
groupdblclick : ( Grid this , String groupField , String groupValue , Ext.EventObject e )
Fires when group header is double clicked. Only applies for grids with a GroupingView.
Fires when group header is double clicked. Only applies for grids with a GroupingView .
Listeners will be called with the following arguments:
  • this : Grid
  • groupField : String
  • groupValue : String
  • e : Ext.EventObject
GridPanel
groupmousedown : ( Grid this , String groupField , String groupValue , Ext.EventObject e )
Fires before a group header is clicked. Only applies for grids with a GroupingView.
Fires before a group header is clicked. Only applies for grids with a GroupingView .
Listeners will be called with the following arguments:
  • this : Grid
  • groupField : String
  • groupValue : String
  • e : Ext.EventObject
GridPanel
headerclick : ( Grid this , Number columnIndex , Ext.EventObject e )
Fires when a header is clicked
Fires when a header is clicked
Listeners will be called with the following arguments:
  • this : Grid
  • columnIndex : Number
  • e : Ext.EventObject
GridPanel
headercontextmenu : ( Grid this , Number columnIndex , Ext.EventObject e )
Fires when a header is right clicked
Fires when a header is right clicked
Listeners will be called with the following arguments:
  • this : Grid
  • columnIndex : Number
  • e : Ext.EventObject
GridPanel
headerdblclick : ( Grid this , Number columnIndex , Ext.EventObject e )
Fires when a header cell is double clicked
Fires when a header cell is double clicked
Listeners will be called with the following arguments:
  • this : Grid
  • columnIndex : Number
  • e : Ext.EventObject
GridPanel
headermousedown : ( Grid this , Number columnIndex , Ext.EventObject e )
Fires before a header is clicked
Fires before a header is clicked
Listeners will be called with the following arguments:
  • this : Grid
  • columnIndex : Number
  • e : Ext.EventObject
GridPanel
hide : ( Ext.Component this )
在组件被隐藏之后触发。 当调用hide 方法隐藏组件之后触发。
在组件被隐藏之后触发。 当调用hide 方法隐藏组件之后触发。
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
iconchange : ( Ext.Panel p , String The , String The )
当Panel的图标被set或者 changed 之后触发。
当Panel的图标被set或者 changed 之后触发。
监听器将会以如下参数格式被调用:
  • p : Ext.Panel
    icon class被变化的Panel
  • The : String
    新icon类
  • The : String
    旧icon类
Panel
keydown : ( Ext.EventObject e )
The raw keydown event for the entire grid.
The raw keydown event for the entire grid.
Listeners will be called with the following arguments:
  • e : Ext.EventObject
GridPanel
keypress : ( Ext.EventObject e )
The raw keypress event for the entire grid.
The raw keypress event for the entire grid.
Listeners will be called with the following arguments:
  • e : Ext.EventObject
GridPanel
mousedown : ( Ext.EventObject e )
The raw mousedown event for the entire grid.
The raw mousedown event for the entire grid.
Listeners will be called with the following arguments:
  • e : Ext.EventObject
GridPanel
mouseout : ( Ext.EventObject e )
The raw mouseout event for the entire grid.
The raw mouseout event for the entire grid.
Listeners will be called with the following arguments:
  • e : Ext.EventObject
GridPanel
mouseover : ( Ext.EventObject e )
The raw mouseover event for the entire grid.
The raw mouseover event for the entire grid.
Listeners will be called with the following arguments:
  • e : Ext.EventObject
GridPanel
mouseup : ( Ext.EventObject e )
The raw mouseup event for the entire grid.
The raw mouseup event for the entire grid.
Listeners will be called with the following arguments:
  • e : Ext.EventObject
GridPanel
move : ( Ext.Component this , Number x , Number y )
在组件移动之后触发。
在组件移动之后触发。
监听器将会用如下的参数格式来调用:
  • this : Ext.Component
  • x : Number
    The new x position
  • y : Number
    The new y position
BoxComponent
reconfigure : ( Grid this , Ext.data.Store store , Ext.grid.ColumnModel colModel )
Fires when the grid is reconfigured with a new store and/or column model.
Fires when the grid is reconfigured with a new store and/or column model.
Listeners will be called with the following arguments:
  • this : Grid
  • store : Ext.data.Store
    The new store
  • colModel : Ext.grid.ColumnModel
    The new column model
GridPanel
removed : ( Ext.Component this , Ext.Container ownerCt )
当一个组件被从Ext.Container容器中删除时触发
当一个组件被从Ext.Container容器中删除时触发
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • ownerCt : Ext.Container
    持有组件的容器
Component
render : ( Ext.Component this )
在组件被渲染之后触发。
在组件被 rendered(渲染) 之后触发。
监听器将以如下的参数格式被调用:
  • this : Ext.Component
Component
resize : ( Ext.Component this , Number adjWidth , Number adjHeight , Number rawWidth , Number rawHeight )
在组件被调整大小之后触发。
在组件被调整大小之后触发。
监听器将以如下的参数格式被调用:
  • this : Ext.Component
  • adjWidth : Number
    这是width调整后的值
  • adjHeight : Number
    这是height调整后的值
  • rawWidth : Number
    这是width原来的值
  • rawHeight : Number
    这是height原来的值
BoxComponent
rowbodyclick : ( Grid this , Number rowIndex , Ext.EventObject e )
Fires when the row body is clicked. Only applies for grids with enableRowBody configured.
Fires when the row body is clicked. Only applies for grids with enableRowBody configured.
Listeners will be called with the following arguments:
  • this : Grid
  • rowIndex : Number
  • e : Ext.EventObject
GridPanel
rowbodycontextmenu : ( Grid this , Number rowIndex , Ext.EventObject e )
Fires when the row body is right clicked. Only applies for grids with enableRowBody configured.
Fires when the row body is right clicked. Only applies for grids with enableRowBody configured.
Listeners will be called with the following arguments:
  • this : Grid
  • rowIndex : Number
  • e : Ext.EventObject
GridPanel
rowbodydblclick : ( Grid this , Number rowIndex , Ext.EventObject e )
Fires when the row body is double clicked. Only applies for grids with enableRowBody configured.
Fires when the row body is double clicked. Only applies for grids with enableRowBody configured.
Listeners will be called with the following arguments:
  • this : Grid
  • rowIndex : Number
  • e : Ext.EventObject
GridPanel
rowbodymousedown : ( Grid this , Number rowIndex , Ext.EventObject e )
Fires before the row body is clicked. Only applies for grids with enableRowBody configured.
Fires before the row body is clicked. Only applies for grids with enableRowBody configured.
Listeners will be called with the following arguments:
  • this : Grid
  • rowIndex : Number
  • e : Ext.EventObject
GridPanel
rowclick : ( Grid this , Number rowIndex , Ext.EventObject e )
Fires when a row is clicked
Fires when a row is clicked
Listeners will be called with the following arguments:
  • this : Grid
  • rowIndex : Number
  • e : Ext.EventObject
GridPanel
rowcontextmenu : ( Grid this , Number rowIndex , Ext.EventObject e )
Fires when a row is right clicked
Fires when a row is right clicked
Listeners will be called with the following arguments:
  • this : Grid
  • rowIndex : Number
  • e : Ext.EventObject
GridPanel
rowdblclick : ( Grid this , Number rowIndex , Ext.EventObject e )
Fires when a row is double clicked
Fires when a row is double clicked
Listeners will be called with the following arguments:
  • this : Grid
  • rowIndex : Number
  • e : Ext.EventObject
GridPanel
rowmousedown : ( Grid this , Number rowIndex , Ext.EventObject e )
Fires before a row is clicked
Fires before a row is clicked
Listeners will be called with the following arguments:
  • this : Grid
  • rowIndex : Number
  • e : Ext.EventObject
GridPanel
show : ( Ext.Component this )
在调用show 方法显示组件之后触发。
在调用show 方法显示组件之后触发。
监听器将会用如下的参数格式被调用:
  • this : Ext.Component
Component
sortchange : ( Grid this , Object sortInfo )
Fires when the grid's store sort changes
Fires when the grid's store sort changes
Listeners will be called with the following arguments:
  • this : Grid
  • sortInfo : Object
    An object with the keys field and direction
GridPanel
staterestore : ( Ext.Component this , Object state )
组件状态被存储之后触发。
组件状态被存储之后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    StateProvider返回的状态哈希值。 如果没有禁止此事件，那么状态对象会被传递给applyState。 默认情况下，这样简单地把属性值拷贝到当前组件中。 可以覆盖此方法以提供自定的状态恢复操作。
Component
statesave : ( Ext.Component this , Object state )
在组件状态被保存到所配置的状态提供者之后触发。
在组件状态被保存到所配置的状态提供者之后触发。
监听器将会用如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    状态值hash。 这是由在足见上调用getState() 方法决定的。 开发者必须提供此方法以返回是否需要恢复状态，默认情况下， Ext.Component有一个空实现。
Component
titlechange : ( Ext.Panel p , String The )
在Panel的标题被set或者 changed 之后触发。
在Panel的标题被set或者 changed 之后触发。
监听器将会以如下参数格式被调用:
  • p : Ext.Panel
    标题被改变的Panel.
  • The : String
    新的标题。
Panel
validateedit : ( Object e )
在单元格被编辑之后，值被设置到record之前触发。返回false取消改变的值...
在单元格被编辑之后，值被设置到record之前触发。返回false取消改变的值。 编辑事件的对象包含以下属性
  • grid - 当前grid
  • record - 当前编辑的记录
  • field - 当前编辑的字段名
  • value - 编辑后的值
  • originalValue - 字段被编辑之前的原始值
  • row - grid的行序号
  • column - grid的列序号
  • 设置此参数为true，将取消当前的编辑，或者返回false值。
使用示例演示如果移除红色三角形的标记(指被编辑过的记录)指定的record(不是所有的)。通过grid的validateedit事件，可以将它移除，(例如)指定编辑某一行不让它出现该标记，可以直接设置record中该字段编辑后的值:
grid.on('validateedit', function(e) {
  var myTargetRow = 6;

  if (e.row == myTargetRow) {
    e.cancel = true;
    e.record.data[e.field] = e.value;
  }
});
监听器将会以如下的参数格式调用:
  • e : Object
    An edit event (see above for description)
EditorGridPanel
viewready : ( Grid this )
Fires when the grid view is available (use this for selecting a default row).
Fires when the grid view is available (use this for selecting a default row).
Listeners will be called with the following arguments:
  • this : Grid
GridPanel


DragDrop
    DD
      DDProxy
        DragSource
          DragZone
            GridDragZone

Class Ext.grid.GridDragZone

包: | Ext.grid
定义类的文件: | GridDD.js
类: | GridDragZone
继承自: | DragZone

DragZone 的一个定制实现，提供DragZone中两个模板方法的默认实现，使之能拖动GridPanel中 选中的行。

一个与之协作的 DropZone 必须提供自己对 onNodeEnter, onNodeOver, onNodeOut 和 onNodeDrop模板方法的实现，

以便能处理所提供的 data。

配置项

Config Options |  | Defined By
 | containerScroll : Boolean 如果为true，使用Scrollmanager注册此容器， 在拖拽过程中可以自动进行滚动。 | DragZone
 | ddGroup : String 当前对象所属的指定的drag drop组。 如果指定了一个组，那么此对象只与同一组中的其它可拖拽对象发生交互... 当前对象所属的指定的drag drop组。 如果指定了一个组，那么此对象只与同一组中的其它可拖拽对象发生交互 默认值为 undefined). | DragSource
 | dropAllowed : String 当允许执行放下操作时返回给拖拽源的CSS样式 (默认值为 "x-dd-drop-ok"). | DragSource
 | dropNotAllowed : String 当不允许放开时返回给拖拽源的CSS样式 (默认值为 "x-dd-drop-nodrop"). | DragSource
 | hlColor : String 在放下动作失败，对拖拽源进行高亮显示时使用的颜色 (默认值为... 在放下动作失败，对拖拽源进行高亮显示时使用的颜色 (默认值为 "c3daf9"---淡蓝) | DragZone

公共属性

Property Defined By
Ext.dd.DDProxy.dragElId : String
默认被拖动的框架div的id
DDProxy
available : boolean
当相关联的dom元素可以访问之前availabe属性值都是false。
DragDrop
centerFrame : boolean
默认情况下，框架会被精确地放置到拖拽元素的位置 ，所以我们必须使用Ext.dd.DD类提供的鼠标偏移量....
默认情况下，框架会被精确地放置到拖拽元素的位置 ，所以我们必须使用Ext.dd.DD类提供的鼠标偏移量。另外一点是让拖拽框架以鼠标为中心点，只有你没有为此对象设置约束时才有效。设置centerFrame为true可以使用这种效果（以鼠标为中心）。
DDProxy
config : object
传递给构造器的配置参数
DragDrop
defaultPadding : Object
为"constrainTo"元素提供默认的填充约束 (默认值为 {left: 0, right:0, top:0, bottom:0})。
DragDrop
dragData : Object
这个属性包含了展现拖拽对象的数据。通过getDragData方法创建。必须包含一个...
这个属性包含了展现拖拽对象的数据。通过 getDragData 方法创建。必须包含一个 ddel 属性，但是可以根据程序需求包含别的任何数据。
DragZone
groups : object An object in the format {'group1':true, 'group2':true
组定义了一个相关的DragDrop对象的逻辑集合。 只有在与同一组中的其它DragDrop对象发生交互时...
组定义了一个相关的DragDrop对象的逻辑集合。 只有在与同一组中的其它DragDrop对象发生交互时，实例才会收到事件。这允许我们在需要时，使用DragDrop的单个实例来定义多个组。
DragDrop
hasOuterHandles : boolean
默认情况下，只有在相关联元素的区域中发生mousedown事件时，才发起拖拽操作。 在某些浏览器中...
默认情况下，只有在相关联元素的区域中发生mousedown事件时，才发起拖拽操作。 在某些浏览器中，如果上一次mouseup事件在window外部发生的时候， 浏览器将不能报告此次的mousedown事件， 此时将会产生一个bug。 如果定义了外部的句柄，此属性值将被设置为true。
DragDrop
id : String
与当前对象相关联的元素的id。 这就是我们所谓的关联元素("linked element")，因为此元素的大小和位置...
与当前对象相关联的元素的id。 这就是我们所谓的关联元素("linked element")，因为此元素的大小和位置 将被用来决定何时与拖动和放开的对象进行交互。
DragDrop
ignoreSelf : Boolean
设置为false，拖拽时，将会使DragDrop对象在悬在自身元素上方时触发drag事件。默认为...
设置为false，拖拽时，将会使DragDrop对象在悬在自身元素上方时触发drag事件。默认为true——DragDrop对象默认不会对自身触发drag事件。
DragDrop
invalidHandleClasses : Array
CSS类名数组，应用到那些被认为是非法拖拽句柄的对象上。
DragDrop
invalidHandleIds : Object
一个对象，它的属性名标志了被认为是非法的拖动手柄元素的ID。 一个非空属性值标志着这些ID是有效的...
一个对象，它的属性名标志了被认为是非法的拖动手柄元素的ID。 一个非空属性值标志着这些ID是有效的。 例如，为了阻止从ID为"foo"的元素上发起拖动操作，使用 :
                                {
    foo: true
}
DragDrop
invalidHandleTypes : Object
一个对象，它的属性名标记了那些不能作为拖拽句柄的HTML标签。 一个非空属性值标志着此标签是无效的...
一个对象，它的属性名标记了那些不能作为拖拽句柄的HTML标签。 一个非空属性值标志着此标签是无效的。 默认为以下值，它将阻止从元素发起拖拽操作：
                                {
    A: "A"
}
DragDrop
isTarget : boolean
默认情况下，任何实例都可以是拖放的目标。 可以设置isTarget为false以禁用。
DragDrop
maintainOffset : boolean
当我们重置约束时保持偏移量。 当你需要在页面变化时，元素保持与其父元素的相对位置关系...
当我们重置约束时保持偏移量。 当你需要在页面变化时，元素保持与其父元素的相对位置关系，设置此项为true。
DragDrop
moveOnly : boolean
当设置为true时，当这个DD对象在同组的其他DD对象上方时，将...
当设置为true时，当这个DD对象在同组的其他DD对象上方时，将不会接收到notification事件。默认为false。
DragDrop
padding : int[] An array containing the 4 padding values: [top, right, bottom, left]
当前拖拽对象的padding配置项， 用来计算与当前对象相交叉的区域。
DragDrop
primaryButtonOnly : boolean
默认情况下，drag和drop实例只会响应鼠标第一个键的点击操作 (右手习惯下的左键)...
默认情况下，drag和drop实例只会响应鼠标第一个键的点击操作 (右手习惯下的左键)。 设置为true，将响应浏览器传来的任何一个键的点击
DragDrop
resizeFrame : boolean
默认情况下，我们把拖动的框架设置成与需要拖动的元素一样大小 (这是为了让框架有效...
默认情况下，我们把拖动的框架设置成与需要拖动的元素一样大小 (这是为了让框架有效)。 如果我们需要一个不同的行为，我们可以关闭它。
DDProxy
scroll : boolean
设置为true时，当一个对象被拖拽到浏览器视区边缘时，将自动尝试...
设置为true时，当一个对象被拖拽到浏览器视区边缘时，将自动尝试滚动浏览器的窗口。 默认为true。
DD
xTicks : int[]
在指定一个水平的刻度/间距时， 元素自动吸附位置的像素数组...
在指定一个水平的刻度/间距时， 元素自动吸附位置的像素数组。 当你定义一个间距记号时，这个数组是自动生成的。 （译者注：此配置可以用来实现在水平方向上拖动时的一种磁性吸附效果，这个数组就是 自动吸附的像素刻度或者间距）。
DragDrop
yTicks : int[]
在指定一个垂直的刻度/间距时， 元素自动吸附位置的像素数组...
在指定一个垂直的刻度/间距时， 元素自动吸附位置的像素数组。 当你定义一个间距记号时，这个数组是自动生成的。 （译者注：此配置可以用来实现在垂直方向上拖动时的一种磁性吸附效果，这个数组就是 自动吸附的像素刻度或者间距）。
DragDrop

公共方法

Method Defined By
addInvalidHandleClass ( string cssClass ) : void
允许你为那些不能发起拖拽操作的元素指定一个CSS类
允许你为那些不能发起拖拽操作的元素指定一个CSS类
参数:
  • cssClass : string
    你希望忽略的元素的样式class
返回值:
  • void
DragDrop
addInvalidHandleId ( string id ) : void
允许你指定一个拖拽句柄的孩子节点，使它不能发起拖拽操作
允许你指定一个拖拽句柄的孩子节点，使它不能发起拖拽操作
参数:
  • id : string
    你希望忽略的元素的id
返回值:
  • void
DragDrop
addInvalidHandleType ( string tagName ) : void
允许你指定一个在被点击时不能发起拖拽操作的标签名称。 这是被设计用来更方便地处理内嵌的link对象的...
允许你指定一个在被点击时不能发起拖拽操作的标签名称。 这是被设计用来更方便地处理内嵌的link对象的， 此对象被嵌在一个拖动句柄内部，当它被点击时需要做其他的事情，而不是开始拖拽操作。
参数:
  • tagName : string
    需要包含在内的元素类型
返回值:
  • void
DragDrop
addToGroup ( sGroup {string} ) : void
将当前实例添加到一个彼此相关的drag/drop对象组中。 每个实例至少属于一个组...
将当前实例添加到一个彼此相关的drag/drop对象组中。 每个实例至少属于一个组， 并且如果需要，可以同时属于任意多个组。
参数:
  • {string} : sGroup
    组名
返回值:
  • void
DragDrop
afterDragDrop ( Ext.dd.DragDrop target , Event e , String id ) : void
默认为一个空函数， 你可以定制一个特殊的操作，当一个合法的拖拽和放下动作发生之后执。。
默认为一个空函数， 你可以定制一个特殊的操作，当一个合法的拖拽和放下动作发生之后执行。
参数:
  • target : Ext.dd.DragDrop
    拖拽目标
  • e : Event
    事件对象
  • id : String
    被拖拽元素的id
返回值:
  • void
DragSource
afterDragEnter ( Ext.dd.DragDrop target , Event e , String id ) : void
默认为一个空函数， 你可以定制一个特殊的操作，在拖拽源已经进入到目标范围内时执行。。
默认为一个空函数， 你可以定制一个特殊的操作，在拖拽源已经进入到目标范围内时执行。
参数:
  • target : Ext.dd.DragDrop
    拖拽目标
  • e : Event
    拖拽元素
  • id : String
    拖拽元素的ID
返回值:
  • void
DragSource
afterDragOut ( Ext.dd.DragDrop target , Event e , String id ) : void
默认为一个空函数， 你可以定制一个特殊的操作，在拖拽源被拖出了目标的范围而没有被放下时执行..
默认为一个空函数， 你可以定制一个特殊的操作，在拖拽源被拖出了目标的范围而没有被放下时执行， 并且可以选择终止执行它。
参数:
  • target : Ext.dd.DragDrop
    拖拽目标
  • e : Event
    事件对象
  • id : String
    被拖拽元素的id
返回值:
  • void
DragSource
afterDragOver ( Ext.dd.DragDrop target , Event e , String id ) : void
默认为一个空函数， 你可以定制一个特殊的操作，当拖拽源被拖着滑过。。。
默认为一个空函数， 你可以定制一个特殊的操作，当拖拽源被拖着滑过目标的时候执行。
参数:
  • target : Ext.dd.DragDrop
    拖拽目标
  • e : Event
    事件对象
  • id : String
    被拖拽元素的id
返回值:
  • void
DragSource
afterInvalidDrop ( Event e , String id ) : void
默认为一个空函数， 你可以定制一个特殊的操作，当一个合法的放下动作。
默认为一个空函数， 你可以定制一个特殊的操作，当一个合法的放下动作发生之后执行 providing an implementation.
参数:
  • e : Event
    事件对象
  • id : String
    被拖拽元素的ID
返回值:
  • void
DragSource
afterRepair () : void
一个空的实现。实现此方法以便在发生一个非法的拖拽动作时提供处理...
一个空的实现。实现此方法以便在发生一个非法的拖拽动作时提供处理。方法的实现应该高亮显示选中的行，以便提示它们没有被拖拽成功。
参数:
  • 无。
返回值:
  • void
GridDragZone
alignElWithMouse ( HTMLElement el , int iPageX , int iPageY ) : void
把元素位置设置到mousedown或者click事件发生的地方，保持鼠标在被点击元素之上的位置...
把元素位置设置到mousedown或者click事件发生的地方，保持鼠标在被点击元素之上的位置。 如果想把元素放置到不是鼠标点击的地方，请覆盖此方法。
参数:
  • el : HTMLElement
    需要移动的元素
  • iPageX : int
    mousedown或者drag事件的X坐标位置
  • iPageY : int
    mousedown或者drag事件的Y坐标位置
返回值:
  • void
DD
applyConfig () : void
应用那些传递给构造器的配置参数。此操作被期望在继承链的每一层上都能起作用...
应用那些传递给构造器的配置参数。此操作被期望在继承链的每一层上都能起作用。 这样一个DDProxy的实现类将会执行在DDProxy, DD和DragDrop上应用配置项的操作，此操作是为了使这些参数在每个对象上都可用。
参数:
  • 无。
返回值:
  • void
DD
autoOffset ( int iPageX , int iPageY ) : void
设置鼠标的偏移量为：相关联元素左上角到被点击元素位置之间的距离...
设置鼠标的偏移量为：相关联元素左上角到被点击元素位置之间的距离...
参数:
  • iPageX : int
    点击位置的X坐标值
  • iPageY : int
    点击位置的Y坐标值
返回值:
  • void
DD
b4Drag () : void
在onDrag事件之前触发的事件。重写了 Ext.dd.DragDrop中的对应属性。
在onDrag事件之前触发的事件。重写了 Ext.dd.DragDrop中的对应属性。
参数:
  • 无。
返回值:
  • void
DD
b4MouseDown () : void
在onMouseDown事件之前触发的事件。 覆盖了Ext.dd.DragDrop中的相同属性。
Event that fires prior to the onMouseDown event. Overrides Ext.dd.DragDrop.
参数:
  • 无。
返回值:
  • void
DD
beforeDragDrop ( Ext.dd.DragDrop target , Event e , String id ) : Boolean
默认为一个空函数， 你可以定制一个特殊的操作，在拖拽源被放置到拖拽目标上之前执行...
默认为一个空函数， 你可以定制一个特殊的操作，在拖拽源被放置到拖拽目标上之前执行， 并且可以选择终止执行onDragDrop方法。
参数:
  • target : Ext.dd.DragDrop
    拖拽目标
  • e : Event
    事件对象
  • id : String
    拖拽元素的ID
返回值:
  • Boolean
    isValid 当drag drop事件合法时为true；否则为false并终止操作
DragSource
beforeDragEnter ( Ext.dd.DragDrop target , Event e , String id ) : Boolean
默认为一个空函数， 你可以定制一个特殊的操作，在拖拽源开始进入目标的范围之前执行...
默认为一个空函数， 你可以定制一个特殊的操作，在拖拽源开始进入目标的范围之前执行， 并且可以选择终止执行onDragEnter方法。
参数:
  • target : Ext.dd.DragDrop
    拖拽目标
  • e : Event
    事件对象
  • id : String
    被拖拽元素的id
返回值:
  • Boolean
    isValid 如果drag事件合法，为true；否则为false并退出
DragSource
beforeDragOut ( Ext.dd.DragDrop target , Event e , String id ) : Boolean
默认为一个空函数， 你可以定制一个特殊的操作，在拖拽源滑过目标而没有被放下之前执行...
默认为一个空函数， 你可以定制一个特殊的操作，在拖拽源滑过目标而没有被放下之前执行， 并可以选择终止执行onDragOut方法。
参数:
  • target : Ext.dd.DragDrop
    拖拽目标
  • e : Event
    事件对象
  • id : String
    被拖拽元素的id
返回值:
  • Boolean
    isValid 如果drag事件合法，为true；否则为false并退出
DragSource
beforeDragOver ( Ext.dd.DragDrop target , Event e , String id ) : Boolean
默认为一个空函数， 你可以定制一个特殊的操作，当被拖拽的对象滑过拖拽目标的时候执行..
默认为一个空函数， 你可以定制一个特殊的操作，当被拖拽的对象滑过拖拽目标的时候执行， 并且可以选择终止执行onDragOver方法。
参数:
  • target : Ext.dd.DragDrop
    拖拽的目标
  • e : Event
    事件对象
  • id : String
    被拖拽元素的id
返回值:
  • Boolean
    isValid 如果drag事件合法，为true；否则为false并退出
DragSource
beforeInvalidDrop ( Ext.dd.DragDrop target , Event e , String id ) : Boolean
默认为一个空函数， 你可以定制一个特殊的操作，当一个合法的放下动作发生之前执。。
默认为一个空函数， 你可以定制一个特殊的操作，当一个合法的放下动作发生之前执行。
参数:
  • target : Ext.dd.DragDrop
    拖拽目标
  • e : Event
    事件对象
  • id : String
    被拖拽元素的id
返回值:
  • Boolean
    isValid 如果drag事件合法，为true；否则为false并退出
DragSource
cachePosition ( iPageX the , iPageY the ) : void
保存最后一次的位置，这样我们可以按需要重置约束和标记...
保存最后一次的位置，这样我们可以按需要重置约束和标记。 我们必须知道这一点，以使我们能够计算元素与其原来位置偏移的像素数。
参数:
  • the : iPageX
    当前水平位置（可选的，如果使用了它，只是为了方便之后不用查看该值）
  • the : iPageY
    当前垂直位置（可选的，如果使用了它，只是为了方便之后不用查看该值）
返回值:
  • void
DD
clearConstraints () : void
清除所有应用到此实例上的约束。 同时清除标记...
清除所有应用到此实例上的约束。 同时清除标记，因为此时它们不能脱离约束而独立存在。
参数:
  • 无。
返回值:
  • void
DragDrop
clearTicks () : void
清除此实例上定义的所有“吸附”间隔
清除此实例上定义的所有“吸附”间隔
参数:
  • 无。
返回值:
  • void
DragDrop
constrainTo ( Mixed constrainTo , [ Object/Number pad ], [ Boolean inContent ] ) : void
让元素的运动范围受限于另一个元素...
让元素的运动范围受限于另一个元素， 使用方法:

                                    var dd = new Ext.dd.DDProxy("dragDiv1", "proxytest",
                { dragElId: "existingProxyDiv" });
 dd.startDrag = function(){
     this.constrainTo("parent-id");
 };
或者你可以使用 Ext.Element 对象来初始化:
                                Ext.get("dragDiv1").initDDProxy("proxytest", {dragElId: "existingProxyDiv"}, {
     startDrag : function(){
         this.constrainTo("parent-id");
     }
 });
参数:
  • constrainTo : Mixed
    要绑定到的元素。
  • pad : Object/Number
    (可选) Pad提供了定义约束的"padding"参数的一个途径， 既可以是一个数字，以便进行均匀的填充 (4 等价于{left:4, right:4, top:4, bottom:4})， 或者一个包含填充尺寸数据的对象。例如： {right:10, bottom:10}
  • inContent : Boolean
    (可选) 将可拖动区域约束到元素的盒子模型内部(在填充和边框内部)
返回值:
  • void
DragDrop
createFrame () : void
创建代理元素，如果它还不存在
创建代理元素，如果它还不存在
参数:
  • 无。
返回值:
  • void
DDProxy
endDrag ( Event e ) : void
当结束对对象的拖动操作时触发
当结束对对象的拖动操作时触发
参数:
  • e : Event
    the mouseup event
返回值:
  • void
DragDrop
getDragData () : void
提供对getDragData的实现，在鼠标按下时收集从GridPanel中被拖拽的数据...

提供对getDragData的实现，在鼠标按下时收集从GridPanel中被拖拽的数据。

数据可以在与之协作的 DropZone 的 onNodeEnter, onNodeOver, onNodeOut和 onNodeDrop 方法中被处理。

数据对象包含如下属性：

  • grid : Ext.Grid.GridPanel
    包含被拖动数据的GridPanel。
  • ddel : htmlElement
    一个htmlElement，提供被拖拽数据的“快照”（"picture"）。
  • rowIndex : Number
    数据行索引位置，它接收到mousedown手势，触发了拖拽动作。
  • selections : Array
    选中的Record数组，它们被从GridPanel中拖拽出来。

参数:
  • 无。
返回值:
  • void
GridDragZone
getDragEl () : HTMLElement
返回实际需要拖动元素的引用。默认情况下，这与html元素相同，但也可以指定到另一个元素...
返回实际需要拖动元素的引用。默认情况下，这与html元素相同，但也可以指定到另一个元素。可以在Ext.dd.DDProxy中找到这种例子。
参数:
  • 无。
返回值:
  • HTMLElement
    the html element
DragDrop
getEl () : HTMLElement
返回相关联的元素的引用
返回相关联的元素的引用
参数:
  • 无。
返回值:
  • HTMLElement
    html元素
DragDrop
getProxy () : Ext.dd.StatusProxy
返回拖拽源底层的 Ext.dd.StatusProxy
Returns the drag source's underlying Ext.dd.StatusProxy
参数:
  • 无。
返回值:
  • Ext.dd.StatusProxy
    代理的StatusProxy
DragSource
getRepairXY ( EventObject e ) : Array
一个空的实现。实现它可以让拖拽代理在执行一个非法的拖拽后回到原来的位置...

一个空的实现。实现它可以让拖拽代理在执行一个非法的拖拽后回到原来的位置。

当一个非法的拖拽发生后调用，获取要滑动到的位置的XY坐标。

参数:
  • e : EventObject
    鼠标弹起事件
返回值:
  • Array
    xy坐标 (例如： [100, 200])
GridDragZone
hideProxy () : void
隐藏拖拽源的 Ext.dd.StatusProxy
隐藏拖拽源的 Ext.dd.StatusProxy
参数:
  • 无。
返回值:
  • void
DragSource
init ( id the , String sGroup , object config ) : void
设置DragDrop对象。 必须在任何Ext.dd.DragDrop的子类构造器中调用
设置DragDrop对象。 必须在任何Ext.dd.DragDrop的子类构造器中调用
参数:
  • the : id
    相关联的元素id
  • sGroup : String
    相关元素的编组
  • config : object
    配置属性
返回值:
  • void
DragDrop
initFrame () : void
初始化拖动框架元素。 此方法必须在子类的构造器中调用。
初始化拖动框架元素。 此方法必须在子类的构造器中调用。
参数:
  • 无。
返回值:
  • void
DDProxy
initTarget ( id the , String sGroup , object config ) : void
Initializes Targeting functionality only... the object does not get a mousedown handler. （译者注：原始文档不完整，无法翻译此句。）
Initializes Targeting functionality only... the object does not get a mousedown handler. （译者注：原始文档不完整，无法翻译此句。）
参数:
  • the : id
    相关联元素的id
  • sGroup : String
    关联项目的编组
  • config : object
    配置属性
返回值:
  • void
DragDrop
isLocked () : boolean
如果此实例被锁定，或者drag drop管理器被锁定， 返回true...
如果此实例被锁定，或者drag drop管理器被锁定， 返回true (意味着此页面的所有拖拽操作都无效。)
参数:
  • 无。
返回值:
  • boolean
    如果此实例或者所有的drag/drop被锁定，返回true；否则返回false
DragDrop
isValidHandleChild ( HTMLElement node ) : boolean
检查被排除在外的标签列表，以确定此次点击是否应该被忽略
检查被排除在外的标签列表，以确定此次点击是否应该被忽略
参数:
  • node : HTMLElement
    需要检查的HTMLElement
返回值:
  • boolean
    如果这是一个合法的标签类型，返回true；如果不是，返回false
DragDrop
lock () : void
锁定此实例
锁定此实例
参数:
  • 无。
返回值:
  • void
DragDrop
onAvailable () : void
覆盖onAvailable方法，以便在决定了位置间隔之后执行所需的操作。
覆盖onAvailable方法，以便在决定了位置间隔之后执行所需的操作。
参数:
  • 无。
返回值:
  • void
DragDrop
onBeforeDrag ( Object data , Event e ) : Boolean
默认为一个空函数， 你可以定制一个特殊的操作，在发起drag事件之前执行...
默认为一个空函数， 你可以定制一个特殊的操作，在发起drag事件之前执行， 并且可以选择终止执行它。
参数:
  • data : Object
    包含任意数据的对象，可以在拖拽目标之间共享
  • e : Event
    事件对象
返回值:
  • Boolean
    isValid 如果drag事件合法，为true；否则为false并退出
DragSource
onDrag ( Event e ) : void
抽象方法，当拖动一个对象产生onMouseMove事件时调用。
抽象方法，当拖动一个对象产生onMouseMove事件时调用。
参数:
  • e : Event
    mousemove事件
返回值:
  • void
DragDrop
onDragDrop ( Event e , String|DragDrop[] id ) : void
抽象方法，在当前元素被拖放到另一个DragDrop对象上时调用。
抽象方法，在当前元素被拖放到另一个DragDrop对象上时调用。
参数:
  • e : Event
    mouseup事件
  • id : String|DragDrop[]
    在POINT模式下，这是被拖放到其上的那个元素的id（译者注：指目标元素id）。 在INTERSECT模式下，这是一个dd元素数组，当前元素被拖放到其上。
返回值:
  • void
DragDrop
onDragEnter ( Event e , String|DragDrop[] id ) : void
抽象方法，当此元素第一次从另外一个DragDrop对象上滑过时，此方法被调用。
抽象方法，当此元素第一次从另外一个DragDrop对象上滑过时，此方法被调用。
参数:
  • e : Event
    the mousemove event
  • id : String|DragDrop[]
    在POINT模式下，此id是被滑过的元素的id。 在INTERSECT模式下，这是一个或多个被滑过元素的数组。
返回值:
  • void
DragDrop
onDragOut ( Event e , String|DragDrop[] id ) : void
抽象方法，当我们不再拖动一个元素在另一个元素上滑过时触发
抽象方法，当我们不再拖动一个元素在另一个元素上滑过时触发
参数:
  • e : Event
    mousemove事件
  • id : String|DragDrop[]
    在POINT模式下，此id是被滑过的元素的id。 在INTERSECT模式下，这是dd元素的数组，鼠标不再停留在这些元素之上。
返回值:
  • void
DragDrop
onDragOver ( Event e , String|DragDrop[] id ) : void
抽象方法，当此元素从另一个DragDrop对象上滑过时调用。
抽象方法，当此元素从另一个DragDrop对象上滑过时调用。
参数:
  • e : Event
    mousemove事件
  • id : String|DragDrop[]
    在POINT模式下，此id是被滑过的元素的id。 在INTERSECT模式下，这是被滑过的dd元素数组。
返回值:
  • void
DragDrop
onInitDrag () : void
提供onInitDrag方法的实现。设置拖拽代理的innerHTML属性，它提供了被拖拽数据的“快照”("picture")...

提供onInitDrag方法的实现。设置拖拽代理的innerHTML属性，它提供了被拖拽数据的“快照”("picture")。

通过调用所属GridPanel的 getDragDropText。 方法获取innerHTML数据。

参数:
  • 无。
返回值:
  • void
GridDragZone
onInvalidDrop ( Event e ) : void
抽象方法，如果当前元素被拖动到了一个没有落下目标的区域时，此方法被调用
抽象方法，如果当前元素被拖动到了一个没有落下目标的区域时，此方法被调用
参数:
  • e : Event
    mouseup事件
返回值:
  • void
DragDrop
onMouseDown ( Event e ) : void
当一个drag/drop对象获得mousedown事件时的处理函数
当一个drag/drop对象获得mousedown事件时的处理函数
参数:
  • e : Event
    mousedown事件
返回值:
  • void
DragDrop
onMouseUp ( Event e ) : void
当在拖拽的对象松开鼠标时触发的事件处理器
当在拖拽的对象松开鼠标时触发的事件处理器
参数:
  • e : Event
    mouseup事件
返回值:
  • void
DragDrop
onStartDrag ( Number x , Number y ) : void
默认为一个空函数， 你可以定制一个特殊的操作，在发起拖拽事件开始时执行一次...
默认为一个空函数， 你可以定制一个特殊的操作，在发起拖拽事件开始时执行一次。 不能从此方法中终止拖拽操作。
参数:
  • x : Number
    点击拖拽对象的X坐标
  • y : Number
    点击拖拽对象的Y坐标
返回值:
  • void
DragSource
removeFromGroup ( string sGroup ) : void
从所提供的交互组中删除此元素
从所提供的交互组中删除此元素
参数:
  • sGroup : string
    需要从中删除的组
返回值:
  • void
DragDrop
removeInvalidHandleClass ( string cssClass ) : void
卸载一个描述非法状态的CSS类
Unsets an invalid css class
参数:
  • cssClass : string
    你想要重新启用的元素的css类。
返回值:
  • void
DragDrop
removeInvalidHandleId ( string id ) : void
卸载一个无效的handle id
Unsets an invalid handle id
参数:
  • id : string
    需要重新启用的元素的id the id of the element to re-enable
返回值:
  • void
DragDrop
removeInvalidHandleType ( string tagName ) : void
卸载由addInvalidHandleType方法添加的排除标签集合
卸载由addInvalidHandleType方法添加的排除标签集合
参数:
  • tagName : string
    需要排除的元素类型
返回值:
  • void
DragDrop
resetConstraints ( boolean maintainOffset ) : void
当你手动重新设置一个dd元素的位置时，必须调用resetConstraints方法。
当你手动重新设置一个dd元素的位置时，必须调用resetConstraints方法。
参数:
  • maintainOffset : boolean
返回值:
  • void
DragDrop
setDelta ( int iDeltaX , int iDeltaY ) : void
设置鼠标的偏移量。 你可以直接调用此方法，以强制把鼠标设置到一个特定的位置 (例如...
设置鼠标的偏移量。 你可以直接调用此方法，以强制把鼠标设置到一个特定的位置 (例如：传递0,0可以将它设置到对象的中心点位置)
参数:
  • iDeltaX : int
    和左端的距离
  • iDeltaY : int
    和顶端的距离
返回值:
  • void
DD
setDragElId ( id {string} ) : void
允许你指定一个元素，不是相关联的元素本身，在拖动时跟随鼠标移动
允许你指定一个元素，不是相关联的元素本身，在拖动时跟随鼠标移动 （译者注：也就是一个”影子对象“，拖动的时候，原来的元素不动，让和它本身一样的 一个”克隆体“来负责跟随鼠标移动）
参数:
  • {string} : id
    发起拖动操作的元素id
返回值:
  • void
DragDrop
setDragElPos ( int iPageX , int iPageY ) : void
把拖拽的元素位置设置到mousedown或者click事件发生的地方，保持鼠标在被点击元素之上的位置...
把拖拽的元素位置设置到mousedown或者click事件发生的地方，保持鼠标在被点击元素之上的位置。 如果想把元素放置到不是鼠标所在的位置，请覆盖此方法。
参数:
  • iPageX : int
    鼠标按下或者拖拽时的横坐标
  • iPageY : int
    鼠标按下或者拖拽时的纵坐标
返回值:
  • void
DD
setHandleElId ( id {string} ) : void
允许你指定关联元素的一个孩子节点，以用来发起拖动操作。 这种情况的一个例子是，你有包含text和link内容的div...
允许你指定关联元素的一个孩子节点，以用来发起拖动操作。 这种情况的一个例子是，你有包含text和link内容的div。 点击内容区域的任何地方，都会正常地启动拖动操作。使用此方法可以指定从div内容中的任何一个元素发起拖拽操作。
参数:
  • {string} : id
    将被用来发起拖拽操作的元素id。
返回值:
  • void
DragDrop
setInitPosition ( int diffX , int diffY ) : void
存储相关元素初始化的位置。
存储相关元素初始化的位置。
参数:
  • diffX : int
    X方向偏移，默认为0
  • diffY : int
    Y方向偏移，默认为0
返回值:
  • void
DragDrop
setOuterHandleElId ( id the ) : void
允许你设置一个相关元素外部的元素，作为拖动的手柄
允许你设置一个相关元素外部的元素，作为拖动的手柄
参数:
  • the : id
    元素的id，此元素将被用作发起拖动操作
返回值:
  • void
DragDrop
setPadding ( int iTop , int iRight , int iBot , int iLeft ) : void
配置拖拽时目标区域的填充像素数。为计算目标区域有效地扩展（或者缩小）虚拟对象的大小...
配置拖拽时目标区域的填充像素数。为计算目标区域有效地扩展（或者缩小）虚拟对象的大小。支持css-style快捷方式，如果只传递了一个参数，所有的边界将会拥有相同的填充；如果传递了两个参数，top和bottom会使用第一个参数， left和right会使用第二个参数。（译者注：这里的规则与CSS设置padding参数的规则是一样的，完全可以用CSS的规则来配置此参数。）
参数:
  • iTop : int
    Top pad
  • iRight : int
    Right pad
  • iBot : int
    Bot pad
  • iLeft : int
    Left pad
返回值:
  • void
DragDrop
setXConstraint ( int iLeft , int iRight , int iTickSize ) : void
默认情况下，元素可以被拖拽并放置到屏幕上的任意位置。 使用此方法来限制元素在水平方向上的运动...
默认情况下，元素可以被拖拽并放置到屏幕上的任意位置。 使用此方法来限制元素在水平方向上的运动。 如果你想锁定在y轴上的拖动，传递参数0,0
参数:
  • iLeft : int
    元素可以向左移动的像素数
  • iRight : int
    元素可以向右移动的像素数
  • iTickSize : int
    可选参数，指定元素每次以iTickSize配置项指定的像素数运动。
返回值:
  • void
DragDrop
setYConstraint ( int iUp , int iDown , int iTickSize ) : void
默认情况下，元素可以被拖放到屏幕上的任意位置。 设置此项以限制元素在垂直方向上的运动...
默认情况下，元素可以被拖放到屏幕上的任意位置。 设置此项以限制元素在垂直方向上的运动。 如果我们需要锁定元素在x轴方向上的运动，传递参数0,0
参数:
  • iUp : int
    元素可以向上移动的像素数
  • iDown : int
    元素可以向下移动的像素数
  • iTickSize : int
    可选参数，指定元素每次以iTickSize配置项指定的像素数运动。
返回值:
  • void
DragDrop
startDrag ( int X , int Y ) : void
抽象方法，当点击一个drag/drop对象，并且遇到拖动或者mousedown事件的那一刻， 此方法被调用。
抽象方法，当点击一个drag/drop对象，并且遇到拖动或者mousedown事件的那一刻， 此方法被调用。
参数:
  • X : int
    点击的位置
  • Y : int
    点击的位置
返回值:
  • void
DragDrop
toString () : string
toString方法
toString method
参数:
  • 无。
返回值:
  • string
    dd对象的字符串表述
DragDrop
unlock () : void
Unlock this instace
为此实例解锁
参数:
  • 无。
返回值:
  • void
DragDrop
unreg () : void
删除当前元素上所有拖拽和落下钩子(hook)
删除当前元素上所有拖拽和落下钩子(hook)
参数:
  • 无。
返回值:
  • void
DragDrop

公共事件

该类没有公共事件。


Observable
    Component
      BoxComponent
        Container
          Panel
            GridPanel

Class Ext.grid.GridPanel

包: | Ext.grid
定义类的文件: | GridPanel.js
类: | GridPanel
子类: | EditorGridPanel
继承自: | Panel

This class represents the primary interface of a component based grid control to represent data in a tabular format of rows and columns. The GridPanel is composed of the following:

  • Store : The Model holding the data records (rows)
  • Column model : Column makeup
  • View : Encapsulates the user interface
  • selection model : Selection behavior

Example usage:

                var grid = new Ext.grid.GridPanel({
    store: new Ext.data.Store({
        autoDestroy: true,
        reader: reader,
        data: xg.dummyData
    }),
    colModel: new Ext.grid.ColumnModel({
        defaults: {
            width: 120,
            sortable: true
        },
        columns: [
            {id: 'company', header: 'Company', width: 200, sortable: true, dataIndex: 'company'},
            {header: 'Price', renderer: Ext.util.Format.usMoney, dataIndex: 'price'},
            {header: 'Change', dataIndex: 'change'},
            {header: '% Change', dataIndex: 'pctChange'},
            // instead of specifying renderer: Ext.util.Format.dateRenderer('m/d/Y') use xtype
            {
                header: 'Last Updated', width: 135, dataIndex: 'lastChange',
                xtype: 'datecolumn', format: 'M d, Y'
            }
        ],
    }),
    viewConfig: {
        forceFit: true,

//      Return CSS class to apply to rows depending upon data values
        getRowClass: function(record, index) {
            var c = record.get('change');
            if (c < 0) {
                return 'price-fall';
            } else if (c > 0) {
                return 'price-rise';
            }
        }
    },
    sm: new Ext.grid.RowSelectionModel({singleSelect:true}),
    width: 600,
    height: 300,
    frame: true,
    title: 'Framed with Row Selection and Horizontal Scrolling',
    iconCls: 'icon-grid'
});

Notes:

  • Although this class inherits many configuration options from base classes, some of them (such as autoScroll, autoWidth, layout, items, etc) are not used by this class, and will have no effect.
  • A grid requires a width in which to scroll its columns, and a height in which to scroll its rows. These dimensions can either be set explicitly through the height and width configuration options or implicitly set by using the grid as a child item of a Container which will have a layout manager provide the sizing of its child items (for example the Container of the Grid may specify layout:'fit').
  • To access the data in a Grid, it is necessary to use the data model encapsulated by the Store. See the cellclick event for more details.

配置项

Config Options Defined By
anchor : String
注: 这个配置只用于该组件被包含在一个已使用AnchorLayout...

注: 这个配置只用于该组件被包含在一个已使用 AnchorLayout (或者其子类)配置的Container时。 基于布局管理器，例如：

  • Ext.form.FormPanel
  • 指定 layout: 'anchor' // or 'form', or 'absolute'

参见 Ext.layout.AnchorLayout. anchor 。

BoxComponent
animCollapse : Boolean
true将会在panel被折叠时使用动画效果，false将会跳过动画效果....
true 将会在panel被折叠时使用动画效果， false 将会跳过动画效果( 如果Ext.Fx类 有效，默认为 true ，否则为 false )。
Panel
autoExpandColumn : String
The id of a column in this grid that should expand to fill unused space. This value specified here can not be 0. Note...

The id of a column in this grid that should expand to fill unused space. This value specified here can not be 0.

Note: If the Grid's view is configured with forceFit=true the autoExpandColumn is ignored. See Ext.grid.Column. width for additional details.

See autoExpandMax and autoExpandMin also.

GridPanel
autoExpandMax : Number
The maximum width the autoExpandColumn can have (if enabled). Defaults to 1000.
GridPanel
autoExpandMin : Number
The minimum width the autoExpandColumn can have (if enabled). Defaults to 50.
GridPanel
autoHeight : Boolean
如果值为true，height配置项为'auto'，否则值为false的话使用固定的高度...

如果值为true，height配置项为'auto'，否则值为false的话使用固定的高度， 或者可以由其父类容器 layout manager来控制。(默认值为 false)。

注: 虽然很多组件继承了这个配置选项，但不是所有这些组件的自适应高度配置都会像期望的那样起作用。 设置autoHeight：值为true时，浏览器将根据元素的内容自动设置高度，这将意味着Ext不会去管理高度。

如果是由浏览器来管理高度，需要注意的是，通过浏览器进行调整的结构组件内不能被发现， 因此宽度的变化可能导致需要进行同步处理元素的高度。 例如：

var w = new Ext.Window({
    title: 'Window',
    width: 600,
    autoHeight: true,
    items: {
        title: 'Collapse Me',
        height: 400,
        collapsible: true,
        border: false,
        listeners: {
            beforecollapse: function() {
                w.el.shadow.hide();
            },
            beforeexpand: function() {
                w.el.shadow.hide();
            },
            collapse: function() {
                w.syncShadow();
            },
            expand: function() {
                w.syncShadow();
            }
        }
    }
}).show();
Panel
autoShow : Boolean
如果组件需要检测隐藏CSS属性(如 'x-hidden' 或者 'x-hide-display')并且在渲染时删除...
如果组件需要检测隐藏CSS属性(如 'x-hidden' 或者 'x-hide-display')并且在渲染时删除它们 (默认为false)，设置此值为true。
Component
baseCls : String
应用到当前panel元素上的基本CSS类(默认为 'x-panel' )...
应用到当前panel元素上的基本CSS类(默认为 'x-panel' )。

另一个可选的默认变量是指定 'x-plain' ，它将去掉所有样式，除了Ext布局功能所必须的属性 (例如overflow:hidden)。另请参见 unstyled 。

Panel
bbar : Object/Array
panel底部工具栏。 此参数可以是一个Ext.Toolbar 、一个工具栏配置项，或者一个buttons/button配置数组---用来被添加到工具栏中...

panel底部工具栏。 此参数可以是一个Ext.Toolbar 、一个工具栏配置项，或者一个buttons/button配置数组---用来被添加到工具栏中。 注意，此参数在渲染之后是无效的。如果在渲染之后需要访问底部工具栏 ，请使用 getBottomToolbar。

注意:尽管Toolbar可以包含Field组件，但它们不会 通过加载祖先FormPanel而被更新。Panel的工具栏不是标准Container->Component 层次的一部分，所以它们不会被扫面以收集表单项。但是，这些值还是会 被提交，因为提交表单的参数是从DOM树中收集的。

Panel
bbarCfg : Object
一个 ADomHelper 元素的配置对象，描述了当前Panelbbar元素的结构...

一个DomHelper 元素的配置对象，描述了当前Panel的bbar元素结构。 另请参见 bodyCfg 。

Panel
bodyCfg : Object
一个DomHelper 元素描述对象，可以被指定给任何Panel Element...

一个DomHelper 元素描述对象，可以被指定给任何Panel Element.

默认情况下，以下表格中的Default元素将会被用作html标签，用来创建一个子元素 ，与Default类名相匹配( baseCls 将会被 baseCls 替换 ):

Panel      Default  Default             Custom      Additional       Additional
Element    element  class               element     class            style
========   ==========================   =========   ==============   ===========
header     div      baseCls+'-header'   headerCfg   headerCssClass   headerStyle
bwrap      div      baseCls+'-bwrap'     bwrapCfg    bwrapCssClass    bwrapStyle
+ tbar     div      baseCls+'-tbar'       tbarCfg     tbarCssClass     tbarStyle
+ body     div      baseCls+'-body'       bodyCfg     bodyCssClass     bodyStyle
+ bbar     div      baseCls+'-bbar'       bbarCfg     bbarCssClass     bbarStyle
+ footer   div      baseCls+'-footer'   footerCfg   footerCssClass   footerStyle

例如，配置一个自定义的元素，用来强制 body 元素使用不同形式的标签，而不是使用默认创建的。 这种情况的一个例子可能是 创建一个子 Panel，包含自定义的内容，例如header，或者通过使body拥有一个<center> 元素， 从而强制Panel中的所有内容居中:

new Ext.Panel({
    title: 'Message Title',
    renderTo: Ext.getBody(),
    width: 200, height: 130,
    bodyCfg: {
        tag: 'center',
        cls: 'x-panel-body',  // Default class not applied if Custom element specified
        html: 'Message'
    },
    footerCfg: {
        tag: 'h2',
        cls: 'x-panel-footer'        // same as the Default class
        html: 'footer html'
    },
    footerCssClass: 'custom-footer', // additional css class, see addClass

    footerStyle:    'background-color:red' // see bodyStyle

});

以上例子也显式创建了一个 footer ，拥有自定义的标签和样式。

Panel
bodyCssClass : String/Object/Function
可选的CSS类选择器，被应用到body 元素上，其格式为Ext.Element.addClass所 期望的值(默认为null)...
可选的CSS类选择器，被应用到body 元素上，其格式为Ext.Element.addClass所 期望的值(默认为null)。参见 bodyCfg.
Panel
border : Boolean
True将会显示panel body元素的边框，false将会隐藏它们 (默认为true)。默认情况下，边框是一个2px宽度的内嵌边框...
True将会显示panel body元素的边框，false将会隐藏它们 (默认为true)。默认情况下，边框是一个2px宽度的内嵌边框， 但是，以后可以通过设置bodyBorder 为false以改变它。
Panel
boxMaxHeight : Number
设置组件的最大高度值...

设置组件的最大高度值。

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

BoxComponent
boxMaxWidth : Number
设置组件的最大宽度值...

设置组件的最大宽度值。

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

BoxComponent
boxMinHeight : Number
设置组件的最小高度值...

设置组件的最小高度值。

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

BoxComponent
boxMinWidth : Number
设置组件的最小宽度值...

设置组件的最小宽度值。

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

BoxComponent
bubbleEvents : Array
An array of events that, when fired, should be bubbled to any parent container. See Ext.util.Observable.enableBubble....

An array of events that, when fired, should be bubbled to any parent container. See Ext.util.Observable.enableBubble. Defaults to [].

GridPanel
buttonAlign : String
添加到当前panel的所有 buttons 的对齐方式。 合法的值有...
添加到当前panel的所有 buttons 的对齐方式。 合法的值有 'right' , 'left' 和 'center' (默认为 'right' )。
Panel
buttons : Array
Panel的按钮数组，它们从 buttons 配置属性创建。只读。
Panel
bwrapCfg : Object
一个DomHelper 元素描述对象，描述了当前Panel的 bwrap 的元素的结构...

一个DomHelper 元素描述对象，描述了当前Panel的 bwrap 的元素的结构。另请参见 bodyCfg 。

Panel
clearCls : String
应用到特殊的clearing div的CSS类， 这个clearing div直接渲染到每个form field的包装器后面...

应用到特殊的clearing div的CSS类， 这个clearing div直接渲染到每个form field的包装器后面，以提供 清除field的功能(默认为 'x-form-clear-left')。

注意: 只有在当前组件被渲染到一个使用FormLayout 布局(例如 Ext.form.FormPanel 或者指定 layout:'form')的 容器中、或者是指定了一个fieldLabel 、或者指定isFormField=true 时此配置才有效。

另请参见 Ext.layout.FormLayout. fieldTpl。

Component
closable : Boolean
Panel自身不支持关闭操作，但是Panel的一些子类 (例如Ext.Window) ，或者处于Ext.TabPanel中的 Panel支持...
Panel自身不支持关闭操作，但是Panel的一些子类 (例如Ext.Window) ，或者处于Ext.TabPanel中的 Panel支持。 指定此参数为 true 可以在这些情况下启用关闭。默认为 false 。
Panel
cls : String
一个可选的额外CSS类，它将被添加到当前组件的元素上(默认为'')...
一个可选的额外CSS类，它将被添加到当前组件的元素上(默认为'')。 此属性对于在组件上，或者它的任何使用标准CSS规则的孩子节点上， 添加定制的样式非常有用。
Component
cm : Object
Shorthand for colModel .
GridPanel
colModel : Object
The Ext.grid.ColumnModel to use when rendering the grid (required).
GridPanel
collapseFirst : Boolean
将会确保折叠/展开(collapse/expand)按钮总是被渲染在第一个位置...
true 将会确保折叠/展开(collapse/expand)按钮总是被渲染在第一个位置， 在panel顶部的工具栏中位于任何其它工具左侧， false 将会把它渲染在最后(默认为 true )。
Panel
collapsed : Boolean
如果当前panel被折叠为true。只读。
Panel
collapsedCls : String
在被折叠后，一个被添加到panel元素上的CSS类 (默认为 'x-panel-collapsed' )。
Panel
collapsible : Boolean
True将会使panel折叠并且会自动把展开/折叠(expand/collapse)按钮渲染到顶部...
True将会使panel折叠并且会自动把展开/折叠 (expand/collapse)按钮渲染到顶部工具按钮区域，false将 保持panel尺寸固定，没有按钮(默认为false)。
Panel
columnLines : Boolean
true to add css for column separation lines. Default is false.
GridPanel
columns : Array
An array of columns to auto create a Ext.grid.ColumnModel. The ColumnModel may be explicitly created via the colMode...
An array of columns to auto create a Ext.grid.ColumnModel. The ColumnModel may be explicitly created via the colModel configuration property.
GridPanel
ctCls : String
一个可选的外部CSS样式，添加到这个组件的容器(默认值为 '')。 这个方法对于使用标准的CSS规则...

一个可选的外部CSS样式，添加到这个组件的容器(默认值为 '')。 这个方法对于使用标准的CSS规则，为组件或它的任何一个子组件添加特定的样式非常有用。 参见 Ext.layout.ContainerLayout和 extraCls 。

注意: ctCls 默认为 ''期望如下的类，它们将指定一个默认值:

  • Box Layout : 'x-box-layout-ct'
使用一个额外的CSS类配置以上的Class，它是append到默认对象上的。例如， 对于BoxLayout (Hbox and Vbox):
                                ctCls: 'x-box-layout-ct custom-class'

Component
data : Mixed
初始化数据集，它将被应用到 tpl 上以刷新组件的内容区域。
Component
ddGroup : String
The DD group this GridPanel belongs to. Defaults to 'GridDD' if not specified.
GridPanel
ddText : String
Configures the text in the drag proxy. Defaults to: ddText : '{0} selected row{1}' {0} is replaced with the number o...
Configures the text in the drag proxy. Defaults to:
                                ddText : '{0} selected row{1}'
{0} is replaced with the number of selected rows.
GridPanel
deferRowRender : Boolean
Defaults to true to enable deferred row rendering. This allows the GridPanel to be initially rendered empty, with the...

Defaults to true to enable deferred row rendering.

This allows the GridPanel to be initially rendered empty, with the expensive update of the row structure deferred so that layouts with GridPanels appear more quickly.

GridPanel
disableSelection : Boolean

true to disable selections in the grid. Defaults to false.

Ignored if a SelectionModel is specified.

GridPanel
disabled : Boolean
当前组件处于无效状态时为true。 Read-only.
Panel
draggable : Boolean/Object
true 可以让当前panel启用拖拽操作(默认为 false )...

true 可以让当前panel启用拖拽操作(默认为 false )。

如需自定义的drag/drop实现，也可以向此配置项传递一个 Ext.Panel.DD配置替代 true 。 Ext.Panel.DD是一个内部没有文档化的类，它在周围移动代理元素 代替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();
Panel
enableColumnHide : Boolean
Defaults to true to enable hiding of columns with the header menu.
GridPanel
enableColumnMove : Boolean
Defaults to true to enable drag and drop reorder of columns. false to turn off column reordering via drag drop.
GridPanel
enableColumnResize : Boolean
false to turn off column resizing for the whole grid. Defaults to true.
GridPanel
enableDragDrop : Boolean
Enables dragging of the selected rows of the GridPanel. Defaults to false. Setting this to true causes this GridPanel...

Enables dragging of the selected rows of the GridPanel. Defaults to false.

Setting this to true causes this GridPanel's GridView to create an instance of Ext.grid.GridDragZone. Note: this is available only after the Grid has been rendered as the GridView's dragZone property.

A cooperating DropZone must be created who's implementations of onNodeEnter, onNodeOver, onNodeOut and onNodeDrop are able to process the data which is provided.

GridPanel
enableHdMenu : Boolean
Defaults to true to enable the drop down button for menu in the headers.
GridPanel
fbar : Object/Array
一个Toolbar 对象、一个Toolbar配置项，或者一个Buttons/ Button 配置数组，...

一个Toolbar 对象、一个Toolbar配置项，或者一个Buttons/ Button 配置数组，它们描述了一个被添加到当前Panel底部元素的 Toolbar.

在渲染后， fbar 将会为一个Toolbar 实例。

如果指定了 buttons ，它们将替代 fbar 配置项。

Panel的 buttonAlign 配置项目将会影响这些项目的布局，例如:
var w = new Ext.Window({
    height: 250,
    width: 500,
    bbar: new Ext.Toolbar({
        items: [{
            text: 'bbar Left'
        },'->',{
            text: 'bbar Right'
        }]
    }),
    buttonAlign: 'left', // anything but 'center' or 'right' and you can use '-', and '->'

                                  // to control the alignment of fbar items
    fbar: [{
        text: 'fbar Left'
    },'->',{
        text: 'fbar Right'
    }]
}).show();

注意:尽管Toolbar可以包含Field组件，但它们不会 通过加载祖先FormPanel而被更新。Panel的工具栏不是标准Container->Component 层次的一部分，所以它们不会被扫面以收集表单项。但是，这些值还是会 被提交，因为提交表单的参数是从DOM树中收集的。

Panel
fieldLabel : String
紧靠此field显示的标签文本(默认值为 '')。注意...

紧靠此field显示的标签文本(默认值为 '')。

注意:只有在当前组件被渲染到一个使用FormLayout 的容器中时，此配置才有效。 (例如 Ext.form.FormPanel 或 指定 layout:'form')。

另请参见 hideLabel 、 Ext.layout.FormLayout和 fieldTpl。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Name'
    }]
});
Component
flex : Number
注: 这个配置只用于该组件被包含在一个已使用BoxLayout配置的Container中时...

注: 这个配置只用于该组件被包含在一个已使用BoxLayout配置的Container中时。通过计算每一个子组件的flex值所占全部flex值之和的比例，来决定子组件的宽(HBoxLayout)高(VBoxlayout)。 任何子项的 flex = 0 或 flex = undefined 将不被设置(初始值大小将不被改变)。

BoxComponent
floating : Mixed
此参数被用来配置底层的 Ext.Layer. 此配置参数可接受的值有...

此参数被用来配置底层的 Ext.Layer. 此配置参数可接受的值有:

  • false : 默认。
    在渲染的地方以内嵌的方式显示panel.
  • true :
    浮动panel (绝对定位，有自动衬垫和阴影)。
      设置floating为true将会为当前panel创建一个Ext.Layer 并且在负值偏移量处显示panel，这样它就是隐藏的。
      既然panel被绝对定位，位置必须在渲染之后被显式设置 (例如 myPanel.setPosition(100,100); )。
      注意: 如果浮动面板，你必须总是指定一个固定的宽度， 否则它将是自动宽度并且总是展开以便填充到视口右侧 边缘。
  • object :
    指定的对象将会被用作将会被创建的 Ext.Layer的 配置对象。
Panel
footer : Ext.Element
Panel底部Element 。只读。此元素被用来容纳Panel的...
Panel底部Element 。只读。

此元素被用来容纳Panel的 buttons 或者 fbar 。

注意: 另请参见 el 的注释。

Panel
footerCfg : Object
一个DomHelper 元素的配置对象，描述了当前Panel的footer元素结构。 另请参见...

一个DomHelper 元素的配置对象，描述了当前Panel的footer元素结构。 另请参见 bodyCfg 。

Panel
forceLayout : Boolean
如果此值为true，容器将将强制初始化一次布局操作...
如果此值为true，容器将将强制初始化一次布局操作， 即使容器处于隐藏或者折叠状态。 此配置项对于在一个折叠或者隐藏的容器中强制渲染非常有用 (默认为false)。
Container
frame : Boolean
默认情况下使用 false ，渲染简单的1px的正方形边框。 true 将会渲染9个元素，以自定义的圆角结束...
默认情况下使用 false ，渲染简单的1px的正方形边框。 true 将会渲染9个元素，以自定义的圆角结束 (另请参见 Ext.Element.boxWrap)。

每种情况下产生的模板描述如下:

// frame = false
<div id="developer-specified-id-goes-here" class="x-panel">

    <div class="x-panel-header"><span class="x-panel-header-text">Title: (frame:false)</span></div>

    <div class="x-panel-bwrap">
        <div class="x-panel-body"><p>html value goes here</p></div>
    </div>
</div>

// frame = true (create 9 elements)
<div id="developer-specified-id-goes-here" class="x-panel">
    <div class="x-panel-tl"><div class="x-panel-tr"><div class="x-panel-tc">
        <div class="x-panel-header"><span class="x-panel-header-text">Title: (frame:true)</span></div>
    </div></div></div>

    <div class="x-panel-bwrap">
        <div class="x-panel-ml"><div class="x-panel-mr"><div class="x-panel-mc">
            <div class="x-panel-body"><p>html value goes here</p></div>
        </div></div></div>

        <div class="x-panel-bl"><div class="x-panel-br"><div class="x-panel-bc"/>
        </div></div></div>
</div>
Panel
header : Ext.Element
Panel的headerElement. 只读。此元素被用来容纳 title和 tools...
Panel的headerElement. 只读。

此元素被用来容纳 title和 tools

注意: 另请参见 el 的注释。

Panel
headerAsText : Boolean
true 将会在 header 中显示panel title ， false 将会隐藏它(默认为 true )。
Panel
headerCfg : Object
一个DomHelper 元素的配置对象，描述了当前Panel的header元素结构...

一个DomHelper 元素的配置对象，描述了当前Panel的header元素结构。 另请参见 bodyCfg 。

Panel
height : Number
组件的高度(默认值为 auto)。注:如果想使用百分比的方式...
组件的高度(默认值为 auto)。注:如果想使用百分比的方式来设置值，请查看 Ext.Component.anchor。
BoxComponent
hidden : Boolean
如果当前组件处于隐藏状态，此值为true。Read-only。
Component
hideCollapseTool : Boolean
true 将会在 collapsible == true 时隐藏展开/折叠按钮， false 将会显示它(默认为 false )。
Panel
hideHeaders : Boolean
True to hide the grid's header. Defaults to false .
GridPanel
hideLabel : Boolean
true时完全隐藏label元素 ( label 和 separator)。 默认为 false。 默认情况下，即使你不指定...

true时完全隐藏label元素 ( label 和 separator)。 默认为 false。 默认情况下，即使你不指定 fieldLabel 它的空间仍然会被保留，这样这块区域会与其它确实拥有label的区域位于同一排。 讲此值设置为 true 将导致此区域不再保留此空间。

注意: 参见 clearCls 的注释。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield'
        hideLabel: true
    }]
});
Component
hideMode : String
组件如何隐藏，支持的值有： 'visibility' (css visibility), 'offsets' (位置偏移量为负值) 和...

组件如何隐藏，支持的值有： 'visibility' (css visibility), 'offsets' (位置偏移量为负值) 和 'display' (css display).

注意:一般首选默认值 'display'，因为当组件第一次显示的时候它们会自动进行布局 (隐藏的时候不会调整尺寸)。

Component
hideParent : Boolean
此值为true时，当调用hide/show方法时，将会hide和show组件的容器...
此值为true时，当调用hide/show方法时，将会hide和show组件的容器；false时将会 hide和show组件自身(默认为false)。例如，这可以用作window上隐藏按钮的一种 快捷操作，通过设置此按钮的hideParent:true，然后把它添加到window上。
Component
iconCls : String
CSS类选择器，指定被用作头部图标的背景图片(默认为'')...
CSS类选择器，指定被用作头部图标的背景图片(默认为'')。

指定自定义图表类的示例就像:

// specify the property in the config for the class:
     ...
     iconCls: 'my-icon'

// css class that specifies background image to be used as the icon image:
.my-icon { background-image: url(../images/my-icon.gif) 0 6px no-repeat !important; }
Panel
id : String
当前组件唯一的id(默认为auto-assigned id)...

当前组件唯一的id(默认为auto-assigned id)。 如果你需要在以后访问组件，而又没有一个有效的组件对象引用，那么你需要指定一个 id( 也就是，使用Ext. getCmp方法 )。

注意，此id也将被用作组件底层HTML标签的id，这些标签被渲染到页面中。 这将允许你编写基于id的CSS规则，以独立地描述指定的实例；并且，也可以通过 组件父标签的id选中子元素。

注意:为了避免与唯一的id 产生重复， 请参见 itemId 和 ref 。

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

Component
itemCls : String
注意: 只有在当前组件被渲染到一个使用FormLayout 布局的 容器中时此配置才有效...

注意: 只有在当前组件被渲染到一个使用FormLayout 布局的 容器中时此配置才有效。 (例如Ext.form.FormPanel 或者指定 layout:'form')。

一个附加的CSS类，应用到div上，包装当前field的表单元素。 如果提供了此参数， field级上的itemCls将会覆盖 container级上提供的 默认itemCls。 为itemCls指定的值将会被添加默认的 类('x-form-item')。

既然它被应用到项目的包装器上(参见 Ext.layout.FormLayout。 fieldTpl)， 它将允许你编写能应用到此field、label(如果有指定)、或者field内部任何其它元素的标准CSS规则。

注意: 参考 fieldLabel的注释。 .

示例用法:

// Apply a style to the field's label:
<style>
    .required .x-form-item-label {font-weight:bold;color:red;}
</style>

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Name',
        itemCls: 'required' //this label will be styled
    },{
        xtype: 'textfield',
        fieldLabel: 'Favorite Color'
    }]
});
Component
itemId : String
当没有可利用的对象引用时，itemId可以作为第二选择，用来获得一个组件的引用， 代替 ...

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

var c = new Ext.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'); // 与 Ext.getCmp()不同

p2 = p1.ownerCt.getComponent('p2'); // 通过兄弟对象获得引用

另请参见 id 和 ref 。

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

Component
keys : Object/Array
一个Ext.KeyMap 配置对象 (其格式为Ext.KeyMap.addBinding 所期望的值...
一个Ext.KeyMap 配置对象 (其格式为Ext.KeyMap.addBinding 所期望的值，用来向当前panel上绑定自定义的按键处理(默认为 null )
Panel
labelSeparator : String
每个fieldLabel 文本后面现实的分隔符。 此属性可以在多个层次上进行配置...

每个fieldLabel 文本后面现实的分隔符。 此属性可以在多个层次上进行配置。优先顺序为：

  • field / component level
  • container level
  • layout level (默认为冒号 ':')
如不需要为当前field的label显示分隔符，指定一个空字符串''即可。

注意:参见 clearCls 的注释。

另请参见 hideLabel 和 Ext.layout.FormLayout。 fieldTpl。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    layoutConfig: {
        labelSeparator: '~'   // layout config has lowest priority (defaults to ':')
    },
    labelSeparator: '>>',     // config at container level
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Field 1',
        labelSeparator: '...' // field/component level config supersedes others
    },{
        xtype: 'textfield',
        fieldLabel: 'Field 2' // labelSeparator will be '='

    }]
});
Component
labelStyle : String
一个CSS样式描述字符串，它将直接应用到当前field的label上...

一个CSS样式描述字符串，它将直接应用到当前field的label上。 如果有设置，默认为容器的labelStyle值(例如 Ext.layout.FormLayout.labelStyle , 或者 '')。

注意:参见 clearCls 的注释。

另请参见 hideLabel 和 Ext.layout.FormLayout. fieldTpl。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Name',
        labelStyle: 'font-weight:bold;'
    }]
});
Component
listeners : Object
一个包含一个或多个事件处理器的配置对象，会在初始化的时候被添加到目标对象上...

一个包含一个或多个事件处理器的配置对象，会在初始化的时候被添加到目标对象上。 该配置对象应该是一个有效的监听器配置对象就像 addListener例子中指定的一样可一次附加多个处理器。

ExtJs Components上的DOM事件

一些 ExtJs Component 类导出时会选择一些DOM事件(例如 "click", "mouseover" 等等), 这通常只是在有额外的值可以被添加时发生。例如DataView类的 click事件会传递被点击的节点。也可以直接在Component的HTMLElementevent上访问DOM事件，但必需在Component被渲染后监听器才能添加到Element 上。可以按照以下步骤添加插件:

// 插件会用一个监听器配置对象进行配置。
//该组件会被添加到所有处理方法的参数列表上。
Ext.DomObserver = Ext.extend(Object, {
    constructor: function(config) {
        this.listeners = config.listeners ? config.listeners : config;
    },

    // 组件将自己传递进了插件的初始化方法里
    init: function(c) {
        var p, l = this.listeners;
        for (p in l) {
            if (Ext.isFunction(l[p])) {
                l[p] = this.createHandler(l[p], c);
            } else {
                l[p].fn = this.createHandler(l[p].fn, c);
            }
        }

        // 渲染后立即添加监听器到元素上
        c.render = c.render.createSequence(function() {
            var e = c.getEl();
            if (e) {
                e.on(l);
            }
        });
    },

    createHandler: function(fn, c) {
        return function(e) {
            fn.call(this, e, c);
        };
    }
});

var combo = new Ext.form.ComboBox({

    // 元素被点击后折叠
    plugins: [ new Ext.DomObserver({
        click: function(evt, comp) {
            comp.collapse();
        }
    })],
    store: myStore,
    typeAhead: true,
    mode: 'local',
    triggerAction: 'all'
});

Observable
loadMask : Object
An Ext.LoadMask config or true to mask the grid while loading. Defaults to false .
GridPanel
margins : Object
注:此配置只用于该组件展现在一个使用BorderLayout...

注:此配置只用于该组件展现在一个使用BorderLayout 或 BoxLayout的两个子类之一作为布局的容器。

这个margins对象在该组件中的格式为：

{top: (top margin),right: (right margin),bottom: (bottom margin),left: (left margin)}

也可以是一个字符串，中间用空格分隔，margin值为数字。 把matches中每一个值的次序跟CSS中margin值的排列方式相对应：

  • 如果只有一个值，它适用于所有方面。
  • 如果有两个值，top和bottom的边框设置为第一个值，left和right设置为第二个值。
  • 如果有三个值，top设置为第一个值，left和right设置为第二个值，bottom设置为第三个值。
  • 如果有四个值，分别设置为top, right, bottom, left。

默认值:

{top:0, right:0, bottom:0, left:0}
BoxComponent
maskDisabled : Boolean
true 将会在panel被disabled时进行遮罩,false将不会遮罩它(默认为...
true 将会在panel被disabled时进行遮罩, false 将不会遮罩它(默认为 true )。使用任意一种方法，当被禁用时，panel都将告诉它包含的元素禁用它们自己， 但是遮罩panel可以提供一种额外的视觉效果，用以提示panel被禁用。
Panel
maxHeight : Number
Sets the maximum height of the grid - ignored if autoHeight is not on.
GridPanel
minButtonWidth : Number
当前panel中所有buttons 最小宽度，像素值(默认为 75 )
Panel
minColumnWidth : Number
The minimum width a column can be resized to. Defaults to 25.
GridPanel
overCls : String
一个可选的额外的CSS类，它将在鼠标移过元素时被添加到组件上...
一个可选的额外的CSS类，它将在鼠标移过元素时被添加到组件上，鼠标移出时 删除。(默认为'')。此属性对于在组件上，或者它的任何使用标准CSS规则的孩子节点上， 添加定制的'active' 或者 'hover'样式非常有用。
Component
padding : Number/String
设置body元素padding样式的快捷方式。 此值既可以是一个数值，被应用到所有侧边...
设置body元素padding样式的快捷方式。 此值既可以是一个数值，被应用到所有侧边，也可以是一个普通的描述padding的 CSS字符串。默认为undefined.
Panel
pageX : Number
如果该组件被包含在一个指定位置的容器中，这个值表示页面级的x坐标值（译者注：在有滚动条的情况下这个值很有用）。
BoxComponent
pageY : Number
如果该组件被包含在一个指定位置的容器中，这个值表示页面级的y坐标值（译者注：在有滚动条的情况下这个值很有用）。
BoxComponent
plugins : Object/Array
一个对象或者一个对象数组，为组件提供特殊的功能 ...
一个对象或者一个对象数组，为组件提供特殊的功能。 对一个合法的插件唯一的要求是它含有一个init()方法， 能接收一个Ext.Component型的参数。 当组件被创建时，如果有可用的插件，组件将会调用每个插件的init方法， 并将自身的引用作为方法参数传递给它。然后，每个插件就可以调用方法或者响应组件上的事件， 就像需要的那样提供自己的功能。
Component
ptype : String
需要创建配置的ptype。 当传递一个配置对象给构造函数时...
需要创建配置的ptype。 当传递一个配置对象给构造函数时，此配置选项不会被使用。 只有在使用懒初始化的时候此配置项才会被使用， 此时Plugin不是 通过一个完整的实例组件，而是通过一个Component配置指定的。 在渲染时，将会查找ptype以决定创建何种类型的Plugin。

如果你创建自己的Plugin，你可以通过 Ext.ComponentMgr.registerPlugin 对它们进行注册，以便能利用懒初始化和渲染机制。
Component
ref : String
一个路径描述，与组件的 ownerCt 相关，它描述了把当前组件的命名引用放置到哪个父容器中去。...

一个路径描述，与组件的 ownerCt 相关，它描述了把当前组件的命名引用放置到哪个父容器中去。

祖先的坐标路径可以通过'/'字符进行分隔。 例如，将一个Toolbar Button的引用放入 拥有此Toolbar的Panel中:

var myGrid = new Ext.grid.EditorGridPanel({
    title: 'My EditorGridPanel',
    store: myStore,
    colModel: myColModel,
    tbar: [{
        text: 'Save',
        handler: saveChanges,
        disabled: true,
        ref: '../saveButton'
    }],
    listeners: {
        afteredit: function() {
//          The button reference is in the GridPanel
            myGrid.saveButton.enable();
        }
    }
});

在上面的代码中，如果 ref 是 'saveButton' ，那么引用将会被放置到Toolbar中。 ref 中的每个'/' 都会从组件的 ownerCt 向上移动一级。

另请参见 added 和 removed 事件。

Component
region : String
注: 此配置只用于该组件展现在一个布局为BorderLayout的容器中...

注: 此配置只用于该组件展现在一个布局为BorderLayout的容器中(例如指定layout:'border')。

详见Ext.layout.BorderLayout。

BoxComponent
renderTo : Mixed
该值可以是一个节点的id、一个DOM节点或者一个已存在的元素...

该值可以是一个节点的id、一个DOM节点或者一个已存在的元素， 组件将会被渲染到其中。

  • 注意 :
      如果组件不是一个Container 的子项目时， 不要使用此选项。 渲染和管理它的子项目是一个Container 的layout manager的责任。
      当使用此配置项时，无需调用render()方法。

另请参见 render 。

Component
resizeEvent : String
在布局中进行尺寸调整需要监听的事件。 默认为 'resize' 。
Panel
selModel : Object
Any subclass of Ext.grid.AbstractSelectionModel that will provide the selection model for the grid (defaults to Ext.g...
Any subclass of Ext.grid.AbstractSelectionModel that will provide the selection model for the grid (defaults to Ext.grid.RowSelectionModel if not specified).
GridPanel
shadow : Boolean/String
(或者一个有效的Ext.Shadow Ext.Shadow.mode 值)，用来在panel后面显示一个阴影...
true (或者一个有效的Ext.Shadow Ext.Shadow.mode 值)，用来在panel后面显示一个阴影， false 将不会显示阴影(默认为 'sides' )。注意，此选项只有当 floating = true 时才应用。
Panel
shadowOffset : Number
如果显示了阴影，此参数为数值偏移量(默认为 4 )。注意，只有当 floating = true 时此参数才会被应用。...
如果显示了阴影，此参数为数值偏移量(默认为 4 )。注意，只有当 floating = true 时此参数才会被应用。
Panel
shim : Boolean
false将会在需要的浏览器中禁用iframe衬垫(默认为...
false 将会在需要的浏览器中禁用iframe衬垫(默认为 true )。注意，此选项只有在 floating = true 时应用。
Panel
sm : Object
Shorthand for selModel .
GridPanel
stateEvents : Array
An array of events that, when fired, should trigger this component to save its state. Defaults to:stateEvents: ['colu...
An array of events that, when fired, should trigger this component to save its state. Defaults to:
                                stateEvents: ['columnmove', 'columnresize', 'sortchange', 'groupchange']

These can be any types of events supported by this component, including browser or custom events (e.g., ['click', 'customerchange']).

See Ext.Component.stateful for an explanation of saving and restoring Component state.

GridPanel
stateId : String
为该组件指定的唯一的id值，它被用作管理组件状态的目的...
为该组件指定的唯一的id值，它被用作管理组件状态的目的。 (如果设定了id，默认值为组件自己的id，否则，如果组件使用自动生成的id，此值为null)。

对于保存和反解析组件状态的解释，参见 stateful 。

Component
stateful : Boolean
一个标志参数，它将引起组件在启动时尝试从一个保存的状态中恢复内部状态参数...

一个标志参数，它将引起组件在启动时尝试从一个保存的状态中恢复内部状态参数。 组件必须要么拥有一个 stateId 或者 id ，它们被分配给需要被管理的状态属性。 在跨页面加载时，不保证自动生成的id属性的稳定性， 并且，不能依赖此id来保存和恢复一个组件的相同状态。

为了保存状态的操作能够工作，状态管理器的提供者必须 被设置成一个Ext.state.Provider 的实现类，它覆盖了set 和get 方法，以便保存和恢复name/value对。 有一个内置的Ext.state.CookieProvider 可用。

为当前页面设置状态提供者:

Ext.state.Manager.setProvider(new Ext.state.CookieProvider({
    expires: new Date(new Date().getTime()+(1000*60*60*24*7)), //7 days from now
}));

当 stateEvents 配置项中其中之一的事件被触发时， 一个状态可保存的组件将试图保存其状态。

保存状态时，一个可保存状态的组件首先需要通过调用 getState 方法来序列化它的状态。 默认情况下，此函数什么事都不做。 开发者必须提供一个实现，返回一个hash对象，它描述了组件可恢复的状态。

getState方法产生的值将会传递给 Ext.state.Manager.set 方法，它使用配置的 Ext.state.Provider 来保存对象，以组件的 stateId 为key，或者，如果此值（指stateId）没有指定时， 使用它的 id 作为key。

在进行构造时，一个可保存状态的组件试图通过调用 Ext.state.Manager.get方法来 恢复它的状态，传递 stateId 或者，如果此值（指stateId）没有指定时， 使用它的 id 作为参数。

结果对象被传递给 applyState 。 applyState 的默认实现只是简单地把属性拷贝到对象中， 但是开发者可以覆盖此方法以支持更多行为。

通过向 beforestaterestore, staterestore, beforestatesave 和 statesave 事件上绑定监听器，你可以在保存和恢复状态时进行额外的处理。

Component
store : Ext.data.Store
The Ext.data.Store the grid should use as its data source (required).
GridPanel
stripeRows : Boolean
true to stripe the rows. Default is false. This causes the CSS class x-grid3-row-alt to be added to alternate rows of...
true to stripe the rows. Default is false.

This causes the CSS class x-grid3-row-alt to be added to alternate rows of the grid. A default CSS rule is provided which sets a background colour, but you can override this with a rule which either overrides the background-color style using the '!important' modifier, or which uses a CSS selector of higher specificity.

GridPanel
style : String
被添加到组件元素的特定样式。 必须是按照...
被添加到组件元素的特定样式。 必须是按照 Ext.Element.applyStyles 类指定格式的合法参数值。

new Ext.Panel({
    title: 'Some Title',
    renderTo: Ext.getBody(),
    width: 400, height: 300,
    layout: 'form',
    items: [{
        xtype: 'textarea',
        style: {
            width: '95%',
            marginBottom: '10px'
        }
    },
        new Ext.Button({
            text: 'Send',
            minWidth: '100',
            style: {
                marginBottom: '10px'
            }
        })
    ]
});
Component
tabTip : String
注: 这个配置只用于当该组件作为TabPanel的一个子项目时使用...

注: 这个配置只用于当该组件作为TabPanel的一个子项目时使用。

一个String类型的innerHTML(支持html标签)，当鼠标放在该选项上的时，显示一个tooltip。为了tips能够被渲染，Ext.QuickTips.init()必须被提前调用。
BoxComponent
tbar : Object/Array
panel的顶部工具栏。 此参数可以是一个 The top toolbar of the panel. This can be a Ext.Toolbar 对象、一个工具栏配置、或者一个被添加到工具栏的...

panel的顶部工具栏。 此参数可以是一个 The top toolbar of the panel. This can be a Ext.Toolbar 对象、一个工具栏配置、或者一个被添加到工具栏的buttons/button配置数组。 注意，在渲染之后此参数无效。如需在渲染之后访问顶部工具栏，请使用 getTopToolbar。

注意:尽管Toolbar可以包含Field组件，但它们不会 通过加载祖先FormPanel而被更新。Panel的工具栏不是标准Container->Component 层次的一部分，所以它们不会被扫面以收集表单项。但是，这些值还是会 被提交，因为提交表单的参数是从DOM树中收集的。

Panel
tbarCfg : Object
一个DomHelper 元素的配置对象，描述了当前Panel的tbar元素结构。 另请参见...

一个DomHelper 元素的配置对象，描述了当前Panel的tbar元素结构。 另请参见 bodyCfg 。

Panel
title : String
被用作innerHTML的标题文本(接受html标签) ，用来显示在panel的...
被用作innerHTML的标题文本(接受html标签) ，用来显示在panel的 header 中(默认为'')。 当 title 被指定时， header 元素将会被自动创建并显示，除非 header 被显式地设置为 false 。 如果你不在配置时指定一个 title ， 但是你想以后设置，你必须要么 指定一个非空的 title (一个空格' ' 也可以)或者指定 header:true ，这样容器元素将会被创建。
Panel
titleCollapse : Boolean
将会允许通过在顶部工具条的任意地方点击展开和折叠panel(当...
true 将会允许通过在顶部工具条的任意地方点击展开和折叠panel(当 collapsible = true )， false ) 将会只允许通过点击工具按钮进行操作(默认为 false ))。如果当前panel是border布局中的一个子项目，另请参见 BorderLayout.Region floatable 配置项。
Panel
toolTemplate : Ext.Template/Ext.XTemplate
用来在header 元素中创建tools 的模板。默认为:...

用来在header 元素中创建tools 的模板。默认为:

                                    new Ext.Template('<div class="x-tool x-tool-{id}">&#160;</div>')

可以覆盖此参数，以便为基于更复杂XTemplate的tools提供自定义的DOM结构。 模板的数据为一个简单的tool配置对象(不是整个Array)， 它在 tools配置项指定。 在以下例子中，当鼠标滑过tool时，一个<a>标签被用来提供视觉效果:

var win = new Ext.Window({
    tools: [{
        id: 'download',
        href: '/MyPdfDoc.pdf'
    }],
    toolTemplate: new Ext.XTemplate(
        '<tpl if="id==\'download\'">',
            '<a class="x-tool x-tool-pdf" href="{href}"></a>',
        '</tpl>',
        '<tpl if="id!=\'download\'">',
            '<div class="x-tool x-tool-{id}">&#160;</div>',
        '</tpl>'
    ),
    width:500,
    height:300,
    closeAction:'hide'
});

注意，CSS类'x-tool-pdf'必须拥有一个关联的样式规则，它提供了一个适当的背景图片， 例如:

                                a.x-tool-pdf {background-image: url(../shared/extjs/images/pdf.gif)!important;}
Panel
tools : Array
一个工具按钮配置数组，用来添加到头部工具区域。 当渲染之后，每个工具都被存储为一个Element ，被一个叫做...
一个工具按钮配置数组，用来添加到头部工具区域。 当渲染之后，每个工具都被存储为一个Element ，被一个叫做 tools. <tool-type> 的公共参数引用。

每个工具配置都可以包含如下参数:

  • id : String
    必须。需要创建的工具类型。默认情况下，这被指定为一个 CSS类，格式为 x-tool- <tool-type> ，用来形成工具Element。 对于以下列出的工具类型，Ext提供了CSS规则，和一个包含图片的icon对象。 通过提供可选的CSS规则和背景图片，开发者可以实现自定义的工具:
      toggle (当collapsible 为 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
    • tc : Object
      工具配置对象
  • stopEvent : Boolean
    默认为true。指定为false可以允许点击事件进行冒泡。
  • scope : Object
    调用处理函数的作用域。
  • qtip : String/Object
    一个tip字符串，或者一个提供给 Ext.QuickTip.register 的配置参数
  • hidden : Boolean
    True将会在初始化时渲染成隐藏的。
  • on : Object
    一个监听器配置对象，以addListener所需的参数格式 指定事件监听器

注意，当panel被折叠时提供部分固定的工具，这些工具仅仅提供可视按钮。 所有必备的功能，都必须通过添加实现了必备行为的处理函数来实现。

示例用法:

tools:[{
    id:'refresh',
    qtip: 'Refresh form Data',
    // hidden:true,
    handler: function(event, toolEl, panel){
        // refresh logic
    }
},
{
    id:'help',
    qtip: 'Get Help',
    handler: function(event, toolEl, panel){
        // whatever
    }
}]

对于自定义 'help' 的id，定义了两个相应的css类，拥有一个到15x15图片的链接:

                                .x-tool-help {background-image: url(images/help.png);}
.x-tool-help-over {background-image: url(images/help_over.png);}
// if using an image sprite:
.x-tool-help {background-image: url(images/help.png) no-repeat 0 0;}
.x-tool-help-over {background-position:-15px 0;}
Panel
tpl : Mixed
一个 Ext.Template , Ext.XTemplate 或者一个用来形成一个Ext.XTemplate的字符串数组...
一个 Ext.Template , Ext.XTemplate 或者一个用来形成一个Ext.XTemplate的字符串数组。 与 data 和 tplWriteMode 配置项协同使用。
Component
tplWriteMode : String
刷新组件的内容区域时使用的Ext.(X)Template方式。 默认为'overwrite' (参见 Ext.XTemplate.overwrite )。
刷新组件的内容区域时使用的Ext.(X)Template方式。 默认为'overwrite' (参见 Ext.XTemplate.overwrite )。
Component
trackMouseOver : Boolean
True to highlight rows when the mouse is over. Default is true for GridPanel, but false for EditorGridPanel.
GridPanel
unstyled : Boolean
覆盖 baseCls 设置为 baseCls = 'x-plain' ， 除了必须的属性之外，它将panel渲染成无样式的...
覆盖 baseCls 设置为 baseCls = 'x-plain' ， 除了必须的属性之外，它将panel渲染成无样式的，以便Ext布局功能能起作用 (例如overflow:hidden)。
Panel
view : Object
The Ext.grid.GridView used by the grid. This can be set before a call to render().
GridPanel
viewConfig : Object
A config object that will be applied to the grid's UI view. Any of the config options available for Ext.grid.GridVie...
A config object that will be applied to the grid's UI view. Any of the config options available for Ext.grid.GridView can be specified here. This option is ignored if view is specified.
GridPanel
width : Number
组件的宽度(默认值为 auto)。注:如果想使用百分比的方式...
组件的宽度(默认值为 auto)。注:如果想使用百分比的方式来设置值，请查看 Ext.Component.anchor。
BoxComponent
x : Number
如果被包含在一个指定位置的容器中，这个值表示x(left)坐标值。
BoxComponent
xtype : String
需要创建配置的xtype。 当传递一个配置对象给构造函数时...
需要创建配置的xtype。 当传递一个配置对象给构造函数时，此配置选项不会被使用。 只有在使用懒初始化的时候此配置项才会被使用，此时容器的子项目不是 通过一个完整的实例组件，而是通过一个Component配置指定的。 在渲染时，将会查找xtype以决定创建何种类型的子组件。

预定义的xtype列表如下： here。

如果你继承Component创建你自己的组件，你需要使用Ext.ComponentMgr.registerType 对它们进行注册，以便利用懒初始化和渲染机制。
Component
y : Number
如果被包含在一个指定位置的容器中，这个值表示y(top)坐标值。
BoxComponent

公共属性

Property Defined By
body : Ext.Element
Panel的body Element ，可以用来包含HTML内容。 内容可以在...
Panel的body Element ，可以用来包含HTML内容。 内容可以在html 配置项中指定，或者可以使用autoLoad 配置项被加载，或者通过Panel的Updater提供。 只读。

如果这被用来通过任意方式加载可视的HTML元素，那么Panel不可以被用作 一个Layout，用来容纳其它Panel。

如果当前Panel期望被用作一个Layout的宿主 (参见 layout) 那么body元素必须不能被加载或者改变---因为它处于Panel的Layout的控制 之下。

注意: 另请参见 el .

Panel
buttons : Array
Panel的按钮数组，它们从 buttons 配置属性创建。只读。
Panel
bwrap : Ext.Element
Panel的bwrapElement ，用来包含其它Panel元素(tbar, body, bbar, footer)。 参见 bodyCfg。 只读。
Panel
collapsed : Boolean
如果当前panel被折叠为true。只读。
Panel
dd : Ext.dd.DragSource.
如果当前Panel被配置为 draggable ，此参数将会包含一个 Ext.dd.DragSource 实例，它负责处理拖拽Panel...

如果当前Panel被配置为 draggable ，此参数将会包含一个 Ext.dd.DragSource 实例，它负责处理拖拽Panel。

开发者必须提供Ext.dd.DragSource的 抽象方法的实现，用来提供drag/drop过程中的每一步行为。 参见 draggable.
Panel
el : Ext.Element
封装了当前组件的Ext.Element。 Read-only。通常情况下，这将是一个<DIV>元素，它由此类的...

封装了当前组件的Ext.Element。 Read-only。

通常情况下，这将是一个<DIV>元素，它由此类的 onRender方法创建，但是它可以通过使用 autoEl 配置项进行覆盖。

注意: 直到组件渲染完成此元素都将处于无效状态。

如需向当前组件的 DOM事件(而不是当前组件自己的Observable事件)添加监听器， 更多建议，参见 listeners 配置项，或者直接使用一个render监听器:

new Ext.Panel({
    title: 'The Clickable Panel',
    listeners: {
        render: function(p) {
            // Append the Panel to the click handler's argument list.
            p.getEl().on('click', handlePanelClick.createDelegate(null, [p], true));
        },
        single: true  // Remove the listener after first invocation
    }
});

另请参见 getEl

Component
footer : Ext.Element
Panel底部Element 。只读。此元素被用来容纳Panel的...
Panel底部Element 。只读。

此元素被用来容纳Panel的 buttons 或者 fbar 。

注意: 另请参见 el 的注释。

Panel
header : Ext.Element
Panel的headerElement. 只读。此元素被用来容纳 title和 tools...
Panel的headerElement. 只读。

此元素被用来容纳 title和 tools

注意: 另请参见 el 的注释。

Panel
hidden : Boolean
如果当前组件处于隐藏状态，此值为true。Read-only。
Component
initialConfig : Object
当前组件的初始化配置描述。 Read-only。
Component
ownerCt : Ext.Container
组件所属的Container (默认为undefined，当前组件被添加到一个容器中时此值被自动设置)...
组件所属的Container (默认为undefined，当前组件被添加到一个容器中时此值被自动设置)。 Read-only。

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

Component
private : Object
我们只能在一块可见的区域进行布局。 布局目标*或者它的任何父元素* 为...
我们只能在一块可见的区域进行布局。 布局目标*或者它的任何父元素* 为display:none， 将意味着它没有一块可见的区域。
Container
refOwner : Ext.Container
如果当前组件是一个容器的孩子，并且是通过一个 ref 配置项被注册的，则此值为 ref 引用被插入到的祖先容器。
如果当前组件是一个容器的孩子，并且是通过一个 ref 配置项被注册的，则此值为 ref 引用被插入到的祖先容器。
Component
rendered : Boolean
如果当前组件已经被渲染了，此值为true。Read-only.
Component

公共方法

Method Defined By
GridPanel ( Object config )
参数:
  • config : Object
    The config object
返回值:
  • void
GridPanel
addButton ( String/Object config , Function handler , Object scope ) : Ext.Button
向当前panel中添加一个按钮。注意，此方法必须在渲染之前调用。 首选的方式是通过...
向当前panel中添加一个按钮。注意，此方法必须在渲染之前调用。 首选的方式是通过buttons 配置项添加按钮。
参数:
  • config : String/Object
    一个合法的Ext.Button 配置。字符串将会变成默认按钮配置文本，对象将会被看做一个按钮配置对象。
  • handler : Function
    在按钮Ext.Button.click 时被调用的函数
  • scope : Object
    作用域( this 引用)，按钮处理函数将会在其中被执行。默认为Button.
返回值:
  • Ext.Button
    被添加的按钮
Panel
addClass ( string cls ) : Ext.Component
为组件底层的元素添加CSS样式。
为组件底层的元素添加CSS样式。
参数:
  • cls : string
    需要添加的CSS样式的class名称
返回值:
  • Ext.Component
    this
Component
addEvents( Object|String o, string Optional. ) : void
添加指定的事件到事件列表上，事件会被该Observable触发。
添加指定的事件到事件列表上，事件会被该Observable触发。
参数:
  • o : Object|String
    以事件名作为属性true作为值的对象 或者当多个事件名被分开的传递时则为第一个事件名。
  • Optional. : string
    事件名被分开的传递时则为事件名。 用法:
    this.addEvents('storeloaded', 'storecleared');
返回值:
  • void
Observable
addListener( String eventName, Function handler, [Object scope], [Object options] ) : void
给对象添加事件处理器。
给对象添加事件处理器。
参数:
  • eventName : String
    监听的事件名。
  • handler : Function
    事件调用的方法
  • scope : Object
    （可选）处理方法执行的作用域 (this的引用 reference)。 如果被忽略。默认为触发事件的对象。
  • options : Object
    （可选）包含处理器配置和属性的对象。 可能包含以下的属性:
    • scope : Object
      处理方法执行的作用域(this的引用) 。 如果被忽略。默认为触发事件的对象。
    • delay : Number
      在触发事件后延迟调用处理器的毫秒数。
    • single : Boolean
      如果为True则添加一个处理器来处理下一次的事件触发（仅一次），然后移除自己。
    • buffer : Number
      使得处理器延迟指定毫秒数后预定的运行在 一个Ext.util.DelayedTask中 。 如果事件在时间内再一次被触发，原始的处理器不会被调用，但是新的处理器会预定的在他的位置上。
    • target : Observable
      如果事件在目标的Observable上触发则仅仅调用处理器， 否则 事件会从子类的Observable上冒泡

    组合选项
    使用这些选项参数,可能会组合出不同类型的监听器：

    一个延迟的，一次性的监听器。

    myDataView.on('click', this.onClick, this, {
single: true,
delay: 100
});

    一次调用附加多个处理器
    该方法同样支持传递一个包含指定的多个处理器的属性的配置对象参数。

    myGridPanel.on({
'click' : {
    fn: this.onClick,
    scope: this,
    delay: 100
},
'mouseover' : {
    fn: this.onMouseOver,
    scope: this
},
'mouseout' : {
    fn: this.onMouseOut,
    scope: this
}
});

    或者一个简写的语法：

    myGridPanel.on({
'click' : this.onClick,
'mouseover' : this.onMouseOver,
'mouseout' : this.onMouseOut,
 scope: this
});
返回值:
  • void
Observable
bubble ( Function fn , [ Object scope ], [ Array args ] ) : Ext.Container
沿着component/container继承结构进行冒泡， 在每个组件上调用指定的函数。 所调用函数的作用域...
沿着component/container继承结构进行冒泡， 在每个组件上调用指定的函数。 所调用函数的作用域( this)将会是 指定的作用域或者是当前组件。 如果在函数任何一点上返回false，即停止冒泡过程
参数:
  • fn : Function
    需要调用的函数
  • scope : Object
    (可选) 函数的作用域(默认为当前节点)
  • args : Array
    (可选) 调用函数时需要传递的参数( 默认传递当前组件)
返回值:
  • Ext.Container
    this
Container
cloneConfig ( Object overrides ) : Ext.Component
默认使用原先传递给当前实例的配置值克隆当前组件。
默认使用原先传递给当前实例的配置值克隆当前组件。
参数:
  • overrides : Object
    一个新的配置项，包含需要覆盖到克隆版本的所有属性。 可以传递一个id参数给此对象，否则将自动生成一个新的id以避免发生重复。
返回值:
  • Ext.Component
    当前组件的克隆副本
Component
collapse ( Boolean animate ) : Ext.Panel
折叠panel的body，这样它就变成隐藏的。 触发beforecollapse 事件...
折叠panel的body，这样它就变成隐藏的。 触发beforecollapse 事件，处理函数返回false可以取消折叠操作。
参数:
  • animate : Boolean
    True将会在变换时使用动画效果，其它为false( 默认为panel的animCollapse 配置项的值)
返回值:
  • Ext.Panel
    this
Panel
destroy () : void
通过如下方法销毁对象：删除所有的事件监听器、将组件的元素从DOM树中删除...
通过如下方法销毁对象：删除所有的事件监听器、将组件的元素从DOM树中删除（如果可以）、 将组件从它的 Ext.Container（如果可用）中删除、 并且将它从Ext.ComponentMgr中 注销。 销毁操作一般由框架自动完成，一般情况下不需要直接调用该方法。
参数:
  • 无。
返回值:
  • void
Component
enableBubble( String/Array events ) :void
是否现在使得事件会被该Observable触发并调用 this.getBubbleTarget()方法在拥有者的继承树...

是否现在使得事件会被该Observable触发并调用 this.getBubbleTarget()方法在拥有者的继承树中冒泡。Observable的基础类中没有该方法的实现。

该方法一般被Ext.Components用来冒泡事件到拥有者的容器。参看Ext.Component.getBubbleTarget默认的实现 在Ext.Component中返回组件的直接拥有者。但是如果需要的是一个已知的目标，该方法可以被重写来更快的访问需求的目标。

例子:

Ext.override(Ext.form.Field, {
    // 添加方法到Field的initComponent上改变事件为冒泡
    initComponent : Ext.form.Field.prototype.initComponent.createSequence(function() {
        this.enableBubble('change');
    }),

    // 我们知道我们想让Field的事件冒泡到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() {
            // 如果样式被修改标题会变红。
            myForm.header.setStyle('color', 'red');
        }
    }
});
参数:
  • events : String/Array
    冒泡的事件名，或事件名数组
返回值:
  • void
Observable
expand ( Boolean animate ) : Ext.Panel
展开panel的body以便让其变得可见。 触发beforeexpand 事件...
展开panel的body以便让其变得可见。 触发beforeexpand 事件，如果它返回false将会取消展开操作。
参数:
  • animate : Boolean
    True将会在变换过程中使用动画效果，否则为false (默认为panel的 animCollapse 配置项的值)
返回值:
  • Ext.Panel
    this
Panel
findParentBy ( Function fn ) : Ext.Container
通过自定义的函数查找当前组件上层任何层次上的容器...
通过自定义的函数查找当前组件上层任何层次上的容器。 如果传递的函数返回true，容器对象将被返回。
参数:
  • fn : Function
    自定义的函数，使用如下参数调用(container,this component)。
返回值:
  • Ext.Container
    自定义函数返回true的第一个容器
Component
findParentByType ( String/Class xtype ) : Ext.Container
通过xtype或者class查找当前组件上层任何层次上的容器
通过xtype或者class查找当前组件上层任何层次上的容器
参数:
  • xtype : String/Class
    组件的xtype字符串，或者直接是组件的class
返回值:
  • Ext.Container
    符合指定xtype或者class的第一个容器
Component
fireEvent( String eventName, Object... args ) : Boolean
用传入的参数触发指定的事件 (减去事件名)。 一个事件可以被设置为冒泡 Obse...

用传入的参数触发指定的事件 (减去事件名)。

一个事件可以被设置为冒泡到Observable父类继承树(参看 Ext.Component.getBubbleTarget) 调用enableBubble实现。

参数:
  • eventName : String
    触发的事件名。
  • args : Object...
    传递给处理器的可变长度参数。
返回值:
  • Boolean
    如果有任何的处理器返回false则返回false，否则返回true。
Observable
focus ( [ Boolean selectText ], [ Boolean/Number delay ] ) : Ext.Component
尝试将当前组件设为焦点。
尝试将当前组件设为焦点。
参数:
  • selectText : Boolean
    (可选) 如果可用，同时选中组件内部的文本
  • delay : Boolean/Number
    (可选)将当前组件设置为焦点的延迟时间(设置为true等于0毫秒)
返回值:
  • Ext.Component
    this
Component
get ( String/Number key ) : Ext.Component
获取当前容器包含的一个组件( items.get(key)方法的别名)
获取当前容器包含的一个组件( items.get(key)方法的别名)
参数:
  • key : String/Number
    组件的索引
返回值:
  • Ext.Component
    Ext.Component
Container
getBottomToolbar () : Ext.Toolbar
返回panel底部区域toolbar ( bbar )。
返回panel底部区域toolbar ( bbar )。
参数:
  • 无。
返回值:
  • Ext.Toolbar
    toolbar
Panel
getBox ( [ Boolean local ] ) : Object
获取组件底层元素当前盒子模型的尺寸。（译者注：盒子模型是CSS术语，详细解释请自行搜索。）
获取组件底层元素当前盒子模型的尺寸。（译者注：盒子模型是CSS术语，详细解释请自行搜索。）
参数:
  • local : Boolean
    (可选)值为true时，组件的left值和top值将代替页面的XY被返回。(默认值为false)
返回值:
  • Object
    返回值的格式{x, y, width, height}
BoxComponent
getBubbleTarget () : Ext.Container
为Observable的fireEvent方法提供链接，它沿着继承结构进行冒泡操作。
为Observable的fireEvent方法提供链接，它沿着继承结构进行冒泡操作。
参数:
  • 无。
返回值:
  • Ext.Container
    拥有当前组件的容器。
Component
getColumnModel () : Ext.grid.ColumnModel
Returns the grid's ColumnModel.
Returns the grid's ColumnModel.
参数:
  • 无。
返回值:
  • Ext.grid.ColumnModel
    The column model
GridPanel
getDragDropText () : String
Called to get grid's drag proxy text, by default returns this.ddText.
Called to get grid's drag proxy text, by default returns this.ddText.
参数:
  • 无。
返回值:
  • String
    The text
GridPanel
getEl () : Ext.Element
返回 Ext.Element ，它包装了当前组件。...

返回 Ext.Element ，它包装了当前组件。

通常情况下，这将是一个<DIV>元素，它是由该类的onRender方法创建的， 但是可以使用autoEl配置项 覆盖它。

注意: 此元素将会一直处于无效状态直到当前组件渲染完成。

如需向当前组件的 DOM事件(而不是当前组件自己的Observable事件)添加监听器， 更多建议，参见 listeners 配置项，或者直接使用一个render监听器:

new Ext.Panel({
    title: 'The Clickable Panel',
    listeners: {
        render: function(p) {
            // Append the Panel to the click handler's argument list.
            p.getEl().on('click', handlePanelClick.createDelegate(null, [p], true));
        },
        single: true  // Remove the listener after first invocation
    }
});
参数:
  • 无。
返回值:
  • Ext.Element
    包装当前组件的元素。
Component
getFooterToolbar () : Ext.Toolbar
返回panel底部( fbar )区域的toolbar
返回panel底部( fbar )区域的toolbar
参数:
  • 无。
返回值:
  • Ext.Toolbar
    toolbar
Panel
getFrameHeight () : Number
返回当前panel框架元素的高度像素值 (包括所有top和bottom工具栏以及header和footer元素...
返回当前panel框架元素的高度像素值 (包括所有top和bottom工具栏以及header和footer元素， 但是不包括body高度)。 如需获取body高度，参见 getInnerHeight.
参数:
  • 无。
返回值:
  • Number
    框架高度
Panel
getFrameWidth () : Number
返回当前panel框架元素的宽度像素值 (不包含body宽度)。如需获得body宽度，参见...
返回当前panel框架元素的宽度像素值 (不包含body宽度)。如需获得body宽度，参见 getInnerWidth。
参数:
  • 无。
返回值:
  • Number
    框架宽度
Panel
getGridEl () : Element
Returns the grid's underlying element.
Returns the grid's underlying element.
参数:
  • 无。
返回值:
  • Element
    The element
GridPanel
getHeight () : Number
获取该组件的当前高度值。
获取该组件的当前高度值。
参数:
  • 无。
返回值:
  • Number
BoxComponent
getId () : String
返回当前组件的id，如果没有定义id，则自动生成并返回一个id:'ext-comp-'...
返回当前组件的 id 如果没有定义 id 则自动生成并返回一个 id

'ext-comp-' + (++Ext.Component.AUTO_ID)
参数:
  • 无。
返回值:
  • String
    id
Component
getInnerHeight () : Number
返回body元素的高度像素值(不包括任何框架元素的高度)。 对于框架高度参见...
返回body元素的高度像素值(不包括任何框架元素的高度)。 对于框架高度参见 getFrameHeight。
参数:
  • 无。
返回值:
  • Number
    body高度
Panel
getInnerWidth () : Number
返回body元素宽度像素值(不包含任何框架元素的宽度)。 对于框架宽度，参见 getFrameWidth。
返回body元素宽度像素值(不包含任何框架元素的宽度)。 对于框架宽度，参见 getFrameWidth。
参数:
  • 无。
返回值:
  • Number
    body宽度
Panel
getItemId () : String
返回当前组件的 itemId 。 如果没有通过配置参数指定 itemId 那么，将会使用...
返回当前组件的 itemId 。 如果没有通过配置参数指定 itemId 那么，将会使用 getId 返回 id 。
参数:
  • 无。
返回值:
  • String
Component
getLayoutTarget () : Ext.Element
返回当前容器中用来包含子组件的元素。提供了一个 可以返回容器的...

返回当前容器中用来包含子组件的元素。

提供了一个 可以返回容器的Element 的实现， 但是，如果容器有更复杂的结构， 可以覆盖此实现以返回 layout 在其中渲染子组件的元素。

参数:
  • 无。
返回值:
  • Ext.Element
    在其中渲染子组件的元素。
Container
getOuterSize () : Object
获取当前组件所在元素的尺寸大小，包括边缘的空白处。
获取当前组件所在元素的尺寸大小，包括边缘的空白处。
参数:
  • 无。
返回值:
  • Object
    一个包含元素大小的对象 {width: (element width + left/right margins), height: (element height + top/bottom margins)}
BoxComponent
getPosition ( [ Boolean local ] ) : Array
获取组件底层元素当前的XY位置。
获取组件底层元素当前的XY位置。
参数:
  • local : Boolean
    (可选)如果为true，将返回元素的left和top值，而不是相对于页面内的 XY。(默认值为 false)
返回值:
  • Array
    元素的XY位置值(例如：[100, 200])
BoxComponent
getResizeEl () : Ext.Element
返回该组件的最外层用来定义这些组件整体大小的Element...

返回该组件的最外层用来定义这些组件整体大小的Element对象。

通常用 getEl 方法将会返回相同的Element对象，但在有些情况下，组件可能有一些更多的封装了它的主要动态Element对象的Element对象。

例如ComboBox。它是封装在一个包含<input>元素的包装元素里(这将返回其 getEl方法和触发按钮的元素)。返回的元素为resizeEl。

参数:
  • 无。
返回值:
  • Ext.Element
    The Element which is to be resized by size managing layouts.
BoxComponent
getSelectionModel () : SelectionModel
Returns the grid's selection model configured by the selModel configuration option. If no selection model was configu...
Returns the grid's selection model configured by the selModel configuration option. If no selection model was configured, this will create and return a RowSelectionModel.
参数:
  • 无。
返回值:
  • SelectionModel
GridPanel
getSize () : Object
获取组件底层元素当前的大小。
获取组件底层元素当前的大小。
参数:
  • 无。
返回值:
  • Object
    一个包含元素大小的对象{width: (element width), height: (element height)}
BoxComponent
getStore () : Ext.data.Store
Returns the grid's data store.
Returns the grid's data store.
参数:
  • 无。
返回值:
  • Ext.data.Store
    The store
GridPanel
getTool ( String id ) : Object
根据id获取一个tool.
根据id获取一个tool.
参数:
  • id : String
返回值:
  • Object
    tool
Panel
getTopToolbar () : Ext.Toolbar
返回panel顶部区域的 toolbar ( tbar ).
返回panel顶部区域的 toolbar ( tbar ).
参数:
  • 无。
返回值:
  • Ext.Toolbar
    toolbar
Panel
getView () : Ext.grid.GridView
Returns the grid's GridView object.
Returns the grid's GridView object.
参数:
  • 无。
返回值:
  • Ext.grid.GridView
    The grid view
GridPanel
getWidth () : Number
获取该组件的当前宽度值。
获取该组件的当前宽度值。
参数:
  • 无。
返回值:
  • Number
BoxComponent
getXType () : String
获取当前组件的xtype，它是用 Ext.ComponentMgr 注册的。 所有可用的xtype列表，参见...
获取当前组件的xtype，它是用 Ext.ComponentMgr 注册的。 所有可用的xtype列表，参见 Ext.Component 类头部。示例用法:

var t = new Ext.form.TextField();
alert(t.getXType());  // alerts 'textfield'
参数:
  • 无。
返回值:
  • String
    The xtype
Component
getXTypes () : String
返回此组件的xtype继承树，用字符'-'分隔。 所有可用的xtype值...

返回此组件的xtype继承树，用字符'-'分隔。 所有可用的xtype值，请参见Ext.Component 类的头部。

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

示例用法:

var t = new Ext.form.TextField();
alert(t.getXTypes());  // alerts 'component/box/field/textfield'
参数:
  • 无。
返回值:
  • String
    xtype层次字符串
Component
hasListener( String eventName ) : Boolean
检测对象是否包含指定事件的任何监听器
检测对象是否包含指定事件的任何监听器
参数:
  • eventName : String
    检测的事件名
返回值:
  • Boolean
    如果事件被监听则为true，否则为false
Observable
hide () : Ext.Component
隐藏当前组件。 监听 beforehide' 事件并且返回false 可以取消隐藏组件的操作。 在隐藏组件之后触发...
隐藏当前组件。 监听 beforehide' 事件并且返回false 可以取消隐藏组件的操作。 在隐藏组件之后触发 ' hide' 事件。 如果组件被配置成 hidden 那么此方法在内部被调用。
参数:
  • 无。
返回值:
  • Ext.Component
    this
Component
isVisible () : Boolean
如果当前组件可见，返回true。
如果当前组件可见，返回true。
参数:
  • 无。
返回值:
  • Boolean
    如果当前组件可见，返回true，其它返回false。
Component
isXType ( String xtype , [ Boolean shallow ] ) : Boolean
Tests whether or not this Component is of a specific xtype. This can test whether this Component is descended from th...

测试此组件是否是指定的xtype。此方法既可以测试是否是指定的xtype的某个子类， 或者它是否直接是指定的xtype类(shallow=true)。

如果使用你自己的子类，必须知道组件必须注册它的xtype值。

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

示例用法:

var t = new Ext.form.TextField();
var isText = t.isXType('textfield');        // true
var isBoxSubclass = t.isXType('box');       // true, descended from BoxComponent
var isBoxInstance = t.isXType('box', true); // false, not a direct BoxComponent instance
参数:
  • xtype : String
    需要为当前组件进行检测的xtype
  • shallow : Boolean
    (可选) 如果为false，检测组件是否是xtype继承树中的某个子类（默认是这种情况）， 如果为true，只检测组件是否是指定的xtype类型。
返回值:
  • Boolean
    如果当前组件是指定xtype的子类，返回true，其它返回flase。
Component
mon ( Observable|Element item , Object|String ename , Function fn , Object scope , Object opt ) : void
向任何Observable对象(或者元素)上添加监听器，监听器将会在组件...

向任何Observable对象(或者元素)上添加监听器，监听器将会在组件销毁时被自动删除。
用法：

myGridPanel.mon(myGridPanel.getSelectionModel(), 'selectionchange', handleSelectionChange, null, {buffer: 50});

or:

myGridPanel.mon(myGridPanel.getSelectionModel(), {
    selectionchange: handleSelectionChange,
    buffer: 50
});
参数:
  • item : Observable|Element
    需要添加listener/listeners的项目。
  • ename : Object|String
    事件名，或者一个包含事件名属性的对象。
  • fn : Function
    (可选) 如果 ename 参数是一个事件名，此参数为处理函数。
  • scope : Object
    (可选)如果 ename 参数是一个事件名称，此参数是作用域 ( this 引用)，监听函数将会在此作用域中被执行。
  • opt : Object
    (可选)如果 ename 参数是一个事件名称， 此参数是 addListener 配置项。
返回值:
  • void
Component
mun ( Observable|Element item , Object|String ename , Function fn , Object scope ) : void
删除通过mon 方法添加的监听器。
删除通过mon 方法添加的监听器。
参数:
  • item : Observable|Element
    需要删除listener/listeners的项目。
  • ename : Object|String
    事件名称，或者一个包含事件名称属性的对象。
  • fn : Function
    (可选)如果 ename 参数是一个事件名称，此参数是一个处理函数。
  • scope : Object
    (可选)如果 ename 参数是一个事件名称，此参数是作用域 ( this 引用)，监听函数将会在此作用域中被执行。
返回值:
  • void
Component
nextSibling () : Ext.Component
返回所属容器中的下一个组件
返回所属容器中的下一个组件
参数:
  • 无。
返回值:
  • Ext.Component
Component
on( String eventName, Function handler, [Object scope], [Object options] ) : void
给对象添加事件处理器 (addListener的简写形式)
给对象添加事件处理器 (addListener的简写形式。)
参数:
  • eventName : String
    监听的事件类型
  • handler : Function
    事件调用的方法
  • scope : Object
    （可选）处理方法执行时的作用域 (this 的引用)。 如果被忽略。默认为触发事件的对象。
  • options : Object
    可选 包含处理器配置的对象。
返回值:
  • void
Observable
previousSibling () : Ext.Component
返回所属容器中的前一个组件
返回所属容器中的前一个组件
参数:
  • 无。
返回值:
  • Ext.Component
Component
purgeListeners() : void
移除对象上所有的监听器
移除对象上所有的监听器
参数:
  • 无。
返回值:
  • void
Observable
reconfigure ( Ext.data.Store store , Ext.grid.ColumnModel colModel ) : void
Reconfigures the grid to use a different Store and Column Model and fires the 'reconfigure' event. The View will be b...

Reconfigures the grid to use a different Store and Column Model and fires the 'reconfigure' event. The View will be bound to the new objects and refreshed.

Be aware that upon reconfiguring a GridPanel, certain existing settings may become invalidated. For example the configured autoExpandColumn may no longer exist in the new ColumnModel. Also, an existing PagingToolbar will still be bound to the old Store, and will need rebinding. Any plugins might also need reconfiguring with the new data.

参数:
  • store : Ext.data.Store
    The new Ext.data.Store object
  • colModel : Ext.grid.ColumnModel
    The new Ext.grid.ColumnModel object
返回值:
  • void
GridPanel
relayEvents( Object o, Array events ) : void
从指定的Observable上传递选择的事件就好像被当前对象触发一样。
从指定的Observable上传递选择的事件就好像被当前对象触发一样。
参数:
  • o : Object
    该Observable上的事件被当前对象传递。
  • events : Array
    传递的数组名。
返回值:
  • void
Observable
removeAll ( [ Boolean autoDestroy ] ) : Array
从当前容器中删除所有组件。
从当前容器中删除所有组件。
参数:
  • autoDestroy : Boolean
    (可选) 此参数为true时将自动调用 被删组件的 Ext.Component.destroy 方法。 默认为当前容器的 autoDestroy 配置值。
返回值:
  • Array
    被销毁的组件数组
Container
removeClass ( string cls ) : Ext.Component
从组件底层的元素上删除一个CSS类。
从组件底层的元素上删除一个CSS类。
参数:
  • cls : string
    需要移除的CSS类名
返回值:
  • Ext.Component
    this
Component
removeListener( String eventName, Function handler, [Object scope] ) : void
删除一个事件处理器。
删除一个事件处理器。
参数:
  • eventName : String
    处理器关联的事件类型。
  • handler : Function
    移除的处理器。 这应该是传递到addListener里的方法的引用。
  • scope : Object
    （可选）处理器指定的初始作用域。
返回值:
  • void
Observable
render ( [ Element/HTMLElement/String container ], [ String/Number position ] ) : void
在传递进来的HTML元素中渲染当前组件。...

在传递进来的HTML元素中渲染当前组件。

如果你正在使用一个Container 对象放置当前组件，那么请不要使用render方法。

当容器第一次被渲染时，它的子组件将会被容器的 layout 管理器渲染。

某些布局管理器允许动态添加子组件。它们包括 Ext.layout.CardLayout, Ext.layout.AnchorLayout, Ext.layout.FormLayout, Ext.layout.TableLayout。

当一个新的子组件被添加时，如果容器已经被渲染了， 你可能需要调用容器的 doLayout 方法来刷新视图，它将导致所有没有被渲染的子组件进行渲染操作。 此操作是必须的，这样你可以添加多个子组件而只刷新一次layout。

当创建复杂的UI时，非常重要的一点是，请记住调整子项目的尺寸和位置是容器的 layout 管理器的职责。 如果你希望子项目的尺寸对用户交互作出反应， 你必须为容器配置一个布局管理器，它将创建和管理你心里想要的那种布局。

忽略容器的layout 配置意味着将会使用一个基本的布局管理器，它除了按次序把子组件 渲染到容器中之外什么事情都不做。 这种情况下，任何尺寸和位置的调整操作都不会发生。

参数:
  • container : Element/HTMLElement/String
    (可选) 需要在其中渲染当前组件的元素。 如果它是从一个已存在的标签中创建的，此参数应该被忽略。
  • position : String/Number
    (可选) 容器中的一个元素ID或者一个DOM节点索引， 当前组件将会被插入到它前面 (默认append到容器的尾部)
返回值:
  • void
Component
resumeEvents() : void
重新开始触发事件。(参见suspendEvents) 如果事件以queueSuspended参数被挂起，则在事件被挂起时 ...
重新开始触发事件。(参见 suspendEvents) 如果事件以queueSuspended 参数被挂起，则在事件被挂起时触发的事件会被传递到所有的监听器上
参数:
  • 无。
返回值:
  • void
Observable
setAutoScroll ( Boolean scroll ) : Ext.BoxComponent
设置该组件内容溢出时是否自动显示滚动条。
设置该组件内容溢出时是否自动显示滚动条。
参数:
  • scroll : Boolean
    值为true的话组件自动显示滚动条。
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setHeight ( Mixed height ) : Ext.BoxComponent
设置此组件的高度。该方法将触发resize事件。
设置此组件的高度。该方法将触发resize事件。
参数:
  • height : Mixed
    The new height to set.
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setIconClass ( String cls ) : void
设置CSS类，为当前panel提供图标图片。 如果已经设置了...
设置CSS类，为当前panel提供图标图片。 如果已经设置了，此方法将会替换任何现有的图标类并在完成之后触发 iconchange 事件。
参数:
  • cls : String
    新的CSS类名
返回值:
  • void
Panel
setPagePosition ( Number x , Number y ) : Ext.BoxComponent
设置组件在页面中的XY位置。 如果需要设置left和top值 ，请使用...
设置组件在页面中的XY位置。 如果需要设置left和top值 ，请使用setPosition方法。 该方法触发move事件。
参数:
  • x : Number
    The new x position
  • y : Number
    The new y position
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setPosition ( Number left , Number top ) : Ext.BoxComponent
设置组件的left和top值。设置组件的页面XY值，请使用setPagePosition方法。该方法触发...
设置组件的left和top值。设置组件的页面XY值，请使用setPagePosition方法。该方法触发move事件。
参数:
  • left : Number
    The new left
  • top : Number
    The new top
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setSize ( Mixed width , Mixed height ) : Ext.BoxComponent
设置BoxComponent的宽度和高度。 此方法触发resize事件...
设置BoxComponent的宽度和高度。 此方法触发resize事件。此方法可以接收单独的width或者height值作为参数， 或者你可以传递像这样的一个size对象： {width:10, height:20} 。
参数:
  • width : Mixed
    设置的新的width值。这可以是：
    • 一个Number类型指定Element新的宽度 Ext.Element.defaultUnit(默认为像素 :'px')。
    • 一个String类型用于设置width的CSS样式。
    • 一个size对象格式为 {width: widthValue, height: heightValue} 。
    • 值为 undefined 时，保留原来的width不变。
  • height : Mixed
    设置的新的height值(如果第一个参数传递了一个size对象，此参数没有必要传递)。这可以是：
    • 一个Number类型指定Element新的高度 Ext.Element.defaultUnit(默认为像素 :'px')。
    • 一个String类型用于设置height的CSS样式。也有可能不会被使用到。
    • 值为 undefined 时，保留原来的height不变。
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setTitle ( String title , [ String iconCls ] ) : void
为panel设置标题文本，也可选择设置 icon class。...

为panel设置标题文本，也可选择设置 icon class。

为了能够设置标题，必须已经为Panel创建了一个header元素。 要么通过向Panel上注册一个非空的 title ，或者配置 header: true ，可触发此操作(译者注：指为Panel创建header元素)。

参数:
  • title : String
    需要设置的标题文本
  • iconCls : String
    (可选) iconCls 一个用户定义的CSS类，为当前panel提供图标图片。
返回值:
  • void
Panel
setVisible ( Boolean visible ) : Ext.Component
工具方法，通过使用布尔值隐藏或者显示当前组件。
工具方法，通过使用布尔值隐藏或者显示当前组件。
参数:
  • visible : Boolean
    true时显示，false时隐藏
返回值:
  • Ext.Component
    this
Component
setWidth ( Mixed width ) : Ext.BoxComponent
设置组件的宽度。 此方法触发resize事件。
设置组件的宽度。 此方法触发resize事件。
参数:
  • width : Mixed
    The new width to set.
返回值:
  • Ext.BoxComponent
    this
BoxComponent
show () : Ext.Component
显示当前组件。监听' beforeshow' 事件，返回 false 取消显示组件...
显示当前组件。监听' beforeshow' 事件，返回 false 取消显示组件。在显示组件之后触发' show' 事件。
参数:
  • 无。
返回值:
  • Ext.Component
    this
Component
suspendEvents( Boolean queueSuspended ) : void
暂停触发所有的事件。 (参看resumeEvents)
暂停触发所有的事件。（参看 resumeEvents)
参数:
  • queueSuspended : Boolean
    如果传递为true则排列好暂停的事件使得在调用 resumeEvents 后再触发它们，而不是抛弃所有暂停的事件。
返回值:
  • void
Observable
syncSize () : Ext.BoxComponent
强制组件的大小按照此组件底层元素当前的高度和宽度计算。
强制组件的大小按照此组件底层元素当前的高度和宽度计算。
参数:
  • 无。
返回值:
  • Ext.BoxComponent
    this
BoxComponent
toggleCollapse ( Boolean animate ) : Ext.Panel
根据panel的当前状态，执行expand或者 collapse操作 的快捷方式。
根据panel的当前状态，执行expand或者 collapse操作 的快捷方式。
参数:
  • animate : Boolean
    True将会在转换过程中使用动画效果，否则为false (默认为panel的animCollapse 配置项的值)
返回值:
  • Ext.Panel
    this
Panel
un( String eventName, Function handler, [Object scope] ) : void
删除一个事件处理器(removeListener方法的简写形式)
删除一个事件处理器(removeListener方法的简写形式。)
参数:
  • eventName : String
    处理器关联的事件类型
  • handler : Function
    被删除的处理器 这应该是传入 addListener 中的方法的引用。
  • scope : Object
    （可选）为处理器指定的初始作用域。
返回值:
  • void
Observable
update ( Mixed htmlOrData , [ Boolean loadScripts ], [ Function callback ] ) : void
刷新组件的内部区域。
刷新组件的内部区域。
参数:
  • htmlOrData : Mixed
    如果已经通过tpl为当前组件配置了一个模板，那么 将会使用此参数来装配模板。 如果没有为当前组件配置模板，组件的内容区域将会通过Ext.Element 进行刷新。
  • loadScripts : Boolean
    (可选)只用在使用html配置时此参数才合法。默认为false。
  • callback : Function
    (可选)只用在使用html配置时此参数才合法。 当脚本加载完成时回调函数才被执行。
返回值:
  • void
Component
updateBox ( Object box ) : Ext.BoxComponent
设置此组件底层元素的盒子模型尺寸。(译者注：盒子模型是CSS术语，详细资料请自行搜索。)
设置此组件底层元素的盒子模型尺寸。(译者注：盒子模型是CSS术语，详细资料请自行搜索。)
参数:
  • box : Object
    一个格式为{x, y, width, height}的对象
返回值:
  • Ext.BoxComponent
    this
BoxComponent

公共事件

Event Defined By
activate : ( Ext.Panel p )
当Panel被设置为视觉活动状态之后触发。 注意Panel不直接支持活动状体，但是Panel的一些子类...
当Panel被设置为视觉活动状态之后触发。 注意Panel不直接支持活动状体，但是Panel的一些子类 (例如 Ext.Window)支持。 作为TabPanel子组件的Panel，在TabPanel的控制之下触发activate和deactivate事件。
监听器将会以如下参数格式被调用:
  • p : Ext.Panel
    被激活的Panel.
Panel
added : ( Ext.Component this , Ext.Container ownerCt , number index )
当一个组件被添加到一个Ext.Container时触发
当一个组件被添加到一个Ext.Container时触发
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • ownerCt : Ext.Container
    用于组件的容器
  • index : number
    添加组件的位置
Component
afterrender : ( Ext.Component this )
在组件渲染完成之后触发...

在组件渲染完成之后触发。

afterrender事件在当前组件被rendered 结束之后、在为组件定义的所有afterRender方法执行之后 触发，并且，如果有stateful， 也在状态被保存之后才触发。

监听器将会以如下参数格式被调用:
  • this : Ext.Component
Component
beforeclose : ( Ext.Panel p )
在Panel被关闭之前触发。 注意，Panel不直接支持关闭操作，但是Panel的一些子类(例如...
在Panel被关闭之前触发。 注意，Panel不直接支持关闭操作，但是Panel的一些子类(例如 Ext.Window) ，或者一个位于Ext.TabPanel中的Panel支持。 此事件仅被应用到这些子类中。处理函数可以返回false以取消关闭操作。
监听器将会以如下参数格式被调用:
  • p : Ext.Panel
    正在被关闭的Panel.
Panel
beforecollapse : ( Ext.Panel p , Boolean animate )
在Panel被折叠之前触发。监听器可以返回false取消折叠。
在Panel被折叠之前触发。监听器可以返回false取消折叠。
监听器将会以如下参数格式被调用:
  • p : Ext.Panel
    被折叠的Panel
  • animate : Boolean
    如果折叠操作使用了动画效果，此参数为true，其它为false
Panel
beforedestroy : ( Ext.Component this )
在组件 destroyed 之前触发。 在事件监听器中返回false以停止 destroy 操作。
在组件 destroyed 之前触发。 在事件监听器中返回false以停止 destroy 操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforeexpand : ( Ext.Panel p , Boolean animate )
在Panel被展开之前触发。监听器可以返回false取消展开操作。
在Panel被展开之前触发。监听器可以返回false取消展开操作。
监听器将会以如下参数格式被调用:
  • p : Ext.Panel
    被展开的Panel
  • animate : Boolean
    如果展开操作使用动画效果，为true，其它为false
Panel
beforehide : ( Ext.Component this )
在调用hide方法隐藏组件之前触发。 在事件监听器中返回false可以停止隐藏操作。
在调用hide方法隐藏组件之前触发。 在事件监听器中返回false可以停止隐藏操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforerender : ( Ext.Component this )
在组件被rendered 之前触发。 在事件监听器中返回false可以停止render 操作。
在组件被rendered 之前触发。 在事件监听器中返回false可以停止render 操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforeshow : ( Ext.Component this )
在调用show()方法现实组件之前触发。 事件处理函数返回false可以停止show。
在调用show 方法现实组件之前触发。 事件处理函数返回false可以停止show。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforestaterestore : ( Ext.Component this , Object state )
在组件状态恢复之前触发。返回false停止恢复状态操作。
在组件状态恢复之前触发。返回false停止恢复状态操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    StateProvider返回的状态哈希值。 如果没有禁止此事件，那么状态对象会被传递给applyState。 默认情况下，这样简单地把属性值拷贝到当前组件中。 可以覆盖此方法以提供自定的状态恢复操作。
Component
beforestatesave : ( Ext.Component this , Object state )
在组件状态被保存到配置的状态提供者之前触发。 返回false可以停止保存。
在组件状态被保存到配置的状态提供者之前触发。 返回false可以停止保存。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    状态值哈希。 这由在组件上调用getState() 方法决定。 此方法必须由开发者提供，返回是否需要对状态进行描述，默认情况下， Ext.Component有一个空实现。
Component
bodyresize : ( Ext.Panel p , Number width , Number height )
在Panel被调整尺寸之后触发。
在Panel被调整尺寸之后触发。
监听器将会以如下参数格式被调用:
  • p : Ext.Panel
    被调整尺寸的Panel
  • width : Number
    Panel body的新宽度。
  • height : Number
    Panel body的新高度。
Panel
bodyscroll : ( Number scrollLeft , Number scrollTop )
Fires when the body element is scrolled
Fires when the body element is scrolled
Listeners will be called with the following arguments:
  • scrollLeft : Number
  • scrollTop : Number
GridPanel
cellclick : ( Grid this , Number rowIndex , Number columnIndex , Ext.EventObject e )
Fires when a cell is clicked. The data for the cell is drawn from the Record for this row. To access the data in the ...
Fires when a cell is clicked. The data for the cell is drawn from the Record for this row. To access the data in the listener function use the following technique:

                                    function(grid, rowIndex, columnIndex, e) {
    var record = grid.getStore().getAt(rowIndex);  // Get the Record
    var fieldName = grid.getColumnModel().getDataIndex(columnIndex); // Get field name
    var data = record.get(fieldName);
}
Listeners will be called with the following arguments:
  • this : Grid
  • rowIndex : Number
  • columnIndex : Number
  • e : Ext.EventObject
GridPanel
cellcontextmenu : ( Grid this , Number rowIndex , Number cellIndex , Ext.EventObject e )
Fires when a cell is right clicked
Fires when a cell is right clicked
Listeners will be called with the following arguments:
  • this : Grid
  • rowIndex : Number
  • cellIndex : Number
  • e : Ext.EventObject
GridPanel
celldblclick : ( Grid this , Number rowIndex , Number columnIndex , Ext.EventObject e )
Fires when a cell is double clicked
Fires when a cell is double clicked
Listeners will be called with the following arguments:
  • this : Grid
  • rowIndex : Number
  • columnIndex : Number
  • e : Ext.EventObject
GridPanel
cellmousedown : ( Grid this , Number rowIndex , Number columnIndex , Ext.EventObject e )
Fires before a cell is clicked
Fires before a cell is clicked
Listeners will be called with the following arguments:
  • this : Grid
  • rowIndex : Number
  • columnIndex : Number
  • e : Ext.EventObject
GridPanel
click : ( Ext.EventObject e )
The raw click event for the entire grid.
The raw click event for the entire grid.
Listeners will be called with the following arguments:
  • e : Ext.EventObject
GridPanel
close : ( Ext.Panel p )
在Panel被关闭之后触发。注意，Panel不直接提供关闭操作， 但是Panel的一些子类(例如...
在Panel被关闭之后触发。注意，Panel不直接提供关闭操作， 但是Panel的一些子类(例如 Ext.Window) ，或者处于Ext.TabPanel中的Panel支持。
监听器将会以如下参数格式被调用:
  • p : Ext.Panel
    被关闭的Panel.
Panel
collapse : ( Ext.Panel p )
在Panel被折叠后触发。
在Panel被折叠后触发。
监听器将会以如下参数格式被调用:
  • p : Ext.Panel
    被折叠的Panel
Panel
columnmove : ( Number oldIndex , Number newIndex )
Fires when the user moves a column
Fires when the user moves a column
Listeners will be called with the following arguments:
  • oldIndex : Number
  • newIndex : Number
GridPanel
columnresize : ( Number columnIndex , Number newSize )
Fires when the user resizes a column
Fires when the user resizes a column
Listeners will be called with the following arguments:
  • columnIndex : Number
  • newSize : Number
GridPanel
containerclick : ( Grid this , Ext.EventObject e )
Fires when the container is clicked. The container consists of any part of the grid body that is not covered by a row...
Fires when the container is clicked. The container consists of any part of the grid body that is not covered by a row.
Listeners will be called with the following arguments:
  • this : Grid
  • e : Ext.EventObject
GridPanel
containercontextmenu : ( Grid this , Ext.EventObject e )
Fires when the container is right clicked. The container consists of any part of the grid body that is not covered by...
Fires when the container is right clicked. The container consists of any part of the grid body that is not covered by a row.
Listeners will be called with the following arguments:
  • this : Grid
  • e : Ext.EventObject
GridPanel
containerdblclick : ( Grid this , Ext.EventObject e )
Fires when the container is double clicked. The container consists of any part of the grid body that is not covered b...
Fires when the container is double clicked. The container consists of any part of the grid body that is not covered by a row.
Listeners will be called with the following arguments:
  • this : Grid
  • e : Ext.EventObject
GridPanel
containermousedown : ( Grid this , Ext.EventObject e )
Fires before the container is clicked. The container consists of any part of the grid body that is not covered by a r...
Fires before the container is clicked. The container consists of any part of the grid body that is not covered by a row.
Listeners will be called with the following arguments:
  • this : Grid
  • e : Ext.EventObject
GridPanel
contextmenu : ( Ext.EventObject e )
The raw contextmenu event for the entire grid.
The raw contextmenu event for the entire grid.
Listeners will be called with the following arguments:
  • e : Ext.EventObject
GridPanel
dblclick : ( Ext.EventObject e )
The raw dblclick event for the entire grid.
The raw dblclick event for the entire grid.
Listeners will be called with the following arguments:
  • e : Ext.EventObject
GridPanel
deactivate : ( Ext.Panel p )
在Panel被视觉上失去活动状态之后触发。 注意，Panel不直接支持此操作，但是Panel的一些子类...
在Panel被视觉上失去活动状态之后触发。 注意，Panel不直接支持此操作，但是Panel的一些子类 (例如Ext.Window)支持。 作为TabPanel的子组件的Panel将会在TabPanel的控制之下触发activate 和deactivate事件。
监听器将会以如下参数格式被调用:
  • p : Ext.Panel
    失去活动状态的Panel
Panel
destroy : ( Ext.Component this )
在组件被销毁之后触发。
在组件被destroyed之后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
disable : ( Ext.Component this )
在组件被设置为无效状态后触发。
在组件被设置为无效状态后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
enable : ( Ext.Component this )
当组件被设置为有效(enabled)之后触发。
当组件被设置为有效(enabled)之后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
expand : ( Ext.Panel p )
当Panel已经展开之后触发。
当Panel已经展开之后触发。
监听器将会以如下参数格式被调用:
  • p : Ext.Panel
    已经被展开的Panel.
Panel
groupchange : ( Grid this , String groupField )
Fires when the grid's grouping changes (only applies for grids with a GroupingView)
Fires when the grid's grouping changes (only applies for grids with a GroupingView)
Listeners will be called with the following arguments:
  • this : Grid
  • groupField : String
    A string with the grouping field, null if the store is not grouped.
GridPanel
groupclick : ( Grid this , String groupField , String groupValue , Ext.EventObject e )
Fires when group header is clicked. Only applies for grids with a GroupingView.
Fires when group header is clicked. Only applies for grids with a GroupingView .
Listeners will be called with the following arguments:
  • this : Grid
  • groupField : String
  • groupValue : String
  • e : Ext.EventObject
GridPanel
groupcontextmenu : ( Grid this , String groupField , String groupValue , Ext.EventObject e )
Fires when group header is right clicked. Only applies for grids with a GroupingView.
Fires when group header is right clicked. Only applies for grids with a GroupingView .
Listeners will be called with the following arguments:
  • this : Grid
  • groupField : String
  • groupValue : String
  • e : Ext.EventObject
GridPanel
groupdblclick : ( Grid this , String groupField , String groupValue , Ext.EventObject e )
Fires when group header is double clicked. Only applies for grids with a GroupingView.
Fires when group header is double clicked. Only applies for grids with a GroupingView .
Listeners will be called with the following arguments:
  • this : Grid
  • groupField : String
  • groupValue : String
  • e : Ext.EventObject
GridPanel
groupmousedown : ( Grid this , String groupField , String groupValue , Ext.EventObject e )
Fires before a group header is clicked. Only applies for grids with a GroupingView.
Fires before a group header is clicked. Only applies for grids with a GroupingView .
Listeners will be called with the following arguments:
  • this : Grid
  • groupField : String
  • groupValue : String
  • e : Ext.EventObject
GridPanel
headerclick : ( Grid this , Number columnIndex , Ext.EventObject e )
Fires when a header is clicked
Fires when a header is clicked
Listeners will be called with the following arguments:
  • this : Grid
  • columnIndex : Number
  • e : Ext.EventObject
GridPanel
headercontextmenu : ( Grid this , Number columnIndex , Ext.EventObject e )
Fires when a header is right clicked
Fires when a header is right clicked
Listeners will be called with the following arguments:
  • this : Grid
  • columnIndex : Number
  • e : Ext.EventObject
GridPanel
headerdblclick : ( Grid this , Number columnIndex , Ext.EventObject e )
Fires when a header cell is double clicked
Fires when a header cell is double clicked
Listeners will be called with the following arguments:
  • this : Grid
  • columnIndex : Number
  • e : Ext.EventObject
GridPanel
headermousedown : ( Grid this , Number columnIndex , Ext.EventObject e )
Fires before a header is clicked
Fires before a header is clicked
Listeners will be called with the following arguments:
  • this : Grid
  • columnIndex : Number
  • e : Ext.EventObject
GridPanel
hide : ( Ext.Component this )
在组件被隐藏之后触发。 当调用hide 方法隐藏组件之后触发。
在组件被隐藏之后触发。 当调用hide 方法隐藏组件之后触发。
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
iconchange : ( Ext.Panel p , String The , String The )
当Panel的图标被set或者 changed 之后触发。
当Panel的图标被set或者 changed 之后触发。
监听器将会以如下参数格式被调用:
  • p : Ext.Panel
    icon class被变化的Panel
  • The : String
    新icon类
  • The : String
    旧icon类
Panel
keydown : ( Ext.EventObject e )
The raw keydown event for the entire grid.
The raw keydown event for the entire grid.
Listeners will be called with the following arguments:
  • e : Ext.EventObject
GridPanel
keypress : ( Ext.EventObject e )
The raw keypress event for the entire grid.
The raw keypress event for the entire grid.
Listeners will be called with the following arguments:
  • e : Ext.EventObject
GridPanel
mousedown : ( Ext.EventObject e )
The raw mousedown event for the entire grid.
The raw mousedown event for the entire grid.
Listeners will be called with the following arguments:
  • e : Ext.EventObject
GridPanel
mouseout : ( Ext.EventObject e )
The raw mouseout event for the entire grid.
The raw mouseout event for the entire grid.
Listeners will be called with the following arguments:
  • e : Ext.EventObject
GridPanel
mouseover : ( Ext.EventObject e )
The raw mouseover event for the entire grid.
The raw mouseover event for the entire grid.
Listeners will be called with the following arguments:
  • e : Ext.EventObject
GridPanel
mouseup : ( Ext.EventObject e )
The raw mouseup event for the entire grid.
The raw mouseup event for the entire grid.
Listeners will be called with the following arguments:
  • e : Ext.EventObject
GridPanel
move : ( Ext.Component this , Number x , Number y )
在组件移动之后触发。
在组件移动之后触发。
监听器将会用如下的参数格式来调用:
  • this : Ext.Component
  • x : Number
    The new x position
  • y : Number
    The new y position
BoxComponent
reconfigure : ( Grid this , Ext.data.Store store , Ext.grid.ColumnModel colModel )
Fires when the grid is reconfigured with a new store and/or column model.
Fires when the grid is reconfigured with a new store and/or column model.
Listeners will be called with the following arguments:
  • this : Grid
  • store : Ext.data.Store
    The new store
  • colModel : Ext.grid.ColumnModel
    The new column model
GridPanel
removed : ( Ext.Component this , Ext.Container ownerCt )
当一个组件被从Ext.Container容器中删除时触发
当一个组件被从Ext.Container容器中删除时触发
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • ownerCt : Ext.Container
    持有组件的容器
Component
render : ( Ext.Component this )
在组件被渲染之后触发。
在组件被 rendered(渲染) 之后触发。
监听器将以如下的参数格式被调用:
  • this : Ext.Component
Component
resize : ( Ext.Component this , Number adjWidth , Number adjHeight , Number rawWidth , Number rawHeight )
在组件被调整大小之后触发。
在组件被调整大小之后触发。
监听器将以如下的参数格式被调用:
  • this : Ext.Component
  • adjWidth : Number
    这是width调整后的值
  • adjHeight : Number
    这是height调整后的值
  • rawWidth : Number
    这是width原来的值
  • rawHeight : Number
    这是height原来的值
BoxComponent
rowbodyclick : ( Grid this , Number rowIndex , Ext.EventObject e )
Fires when the row body is clicked. Only applies for grids with enableRowBody configured.
Fires when the row body is clicked. Only applies for grids with enableRowBody configured.
Listeners will be called with the following arguments:
  • this : Grid
  • rowIndex : Number
  • e : Ext.EventObject
GridPanel
rowbodycontextmenu : ( Grid this , Number rowIndex , Ext.EventObject e )
Fires when the row body is right clicked. Only applies for grids with enableRowBody configured.
Fires when the row body is right clicked. Only applies for grids with enableRowBody configured.
Listeners will be called with the following arguments:
  • this : Grid
  • rowIndex : Number
  • e : Ext.EventObject
GridPanel
rowbodydblclick : ( Grid this , Number rowIndex , Ext.EventObject e )
Fires when the row body is double clicked. Only applies for grids with enableRowBody configured.
Fires when the row body is double clicked. Only applies for grids with enableRowBody configured.
Listeners will be called with the following arguments:
  • this : Grid
  • rowIndex : Number
  • e : Ext.EventObject
GridPanel
rowbodymousedown : ( Grid this , Number rowIndex , Ext.EventObject e )
Fires before the row body is clicked. Only applies for grids with enableRowBody configured.
Fires before the row body is clicked. Only applies for grids with enableRowBody configured.
Listeners will be called with the following arguments:
  • this : Grid
  • rowIndex : Number
  • e : Ext.EventObject
GridPanel
rowclick : ( Grid this , Number rowIndex , Ext.EventObject e )
Fires when a row is clicked
Fires when a row is clicked
Listeners will be called with the following arguments:
  • this : Grid
  • rowIndex : Number
  • e : Ext.EventObject
GridPanel
rowcontextmenu : ( Grid this , Number rowIndex , Ext.EventObject e )
Fires when a row is right clicked
Fires when a row is right clicked
Listeners will be called with the following arguments:
  • this : Grid
  • rowIndex : Number
  • e : Ext.EventObject
GridPanel
rowdblclick : ( Grid this , Number rowIndex , Ext.EventObject e )
Fires when a row is double clicked
Fires when a row is double clicked
Listeners will be called with the following arguments:
  • this : Grid
  • rowIndex : Number
  • e : Ext.EventObject
GridPanel
rowmousedown : ( Grid this , Number rowIndex , Ext.EventObject e )
Fires before a row is clicked
Fires before a row is clicked
Listeners will be called with the following arguments:
  • this : Grid
  • rowIndex : Number
  • e : Ext.EventObject
GridPanel
show : ( Ext.Component this )
在调用show 方法显示组件之后触发。
在调用show 方法显示组件之后触发。
监听器将会用如下的参数格式被调用:
  • this : Ext.Component
Component
sortchange : ( Grid this , Object sortInfo )
Fires when the grid's store sort changes
Fires when the grid's store sort changes
Listeners will be called with the following arguments:
  • this : Grid
  • sortInfo : Object
    An object with the keys field and direction
GridPanel
staterestore : ( Ext.Component this , Object state )
组件状态被存储之后触发。
组件状态被存储之后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    StateProvider返回的状态哈希值。 如果没有禁止此事件，那么状态对象会被传递给applyState。 默认情况下，这样简单地把属性值拷贝到当前组件中。 可以覆盖此方法以提供自定的状态恢复操作。
Component
statesave : ( Ext.Component this , Object state )
在组件状态被保存到所配置的状态提供者之后触发。
在组件状态被保存到所配置的状态提供者之后触发。
监听器将会用如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    状态值hash。 这是由在足见上调用getState() 方法决定的。 开发者必须提供此方法以返回是否需要恢复状态，默认情况下， Ext.Component有一个空实现。
Component
titlechange : ( Ext.Panel p , String The )
在Panel的标题被set或者 changed 之后触发。
在Panel的标题被set或者 changed 之后触发。
监听器将会以如下参数格式被调用:
  • p : Ext.Panel
    标题被改变的Panel.
  • The : String
    新的标题。
Panel
viewready : ( Grid this )
Fires when the grid view is available (use this for selecting a default row).
Fires when the grid view is available (use this for selecting a default row).
Listeners will be called with the following arguments:
  • this : Grid
GridPanel


Observable
    GridView

Class Ext.grid.GridView

包: | Ext.grid
定义类的文件: | GridView.js
类: | GridView
子类: | GroupingView
继承自: | Observable

该类包装了Ext.grid.GridPanel 的用户界面。 该类的方法可以用来访问用户界面元素， 以便启用特殊的显示效果。 请不要改变用户界面的DOM结构。

该类没有提供操纵底层数据的方法。 Grid的数据模型由 Ext.data.Store 维护。

配置项

Config Options Defined By
autoFill : Boolean
默认为 false. 指定为true，当表格开始被渲染之后将会重新计算列宽度比例...
默认为 false. 指定为true，当表格开始被渲染之后将会重新计算列宽度比例。 每一列的初始宽度 将会被调整到刚好适应表格的整体宽度，并且保证不产生水平 滚动条。 如果以后改变了列的尺寸(手动更改，或者通过程序更改)， 表格中的其它列将不会被调整以适应表格的整体宽度。 另请参见 forceFit
GridView
cellSelector : String
用来在内部查找单元格的选择器(默认为'td.x-grid3-cell')
GridView
cellSelectorDepth : Number
事件代理中搜索单元格的层级(默认为4)
GridView
columnsText : String
显示在'Columns'菜单项中的文本(默认为'Columns')
GridView
deferEmptyText : Boolean
True将会延迟应用 emptyText ，直到store第一次被加载(默认为true).
GridView
emptyText : String
默认文本(接受html标签)，当没有可用的数据行时显示在grid body中...
默认文本(接受html标签)，当没有可用的数据行时显示在grid body中 (默认为'')。此值将被用来刷新 mainBody :
this.mainBody.update('<div class="x-grid-empty">' + this.emptyText + '</div>');
GridView
enableRowBody : Boolean
True将会为每行添加第二个TR元素，它将被用来提供一个行body跨越所有数据行。 使用...
True将会为每行添加第二个TR元素，它将被用来提供一个行body跨越所有数据行。 使用getRowClass 方法的rowParams配置可以自定义行body.
GridView
forceFit : Boolean
默认为false. 指定为true将会让列宽度总是保持比例。 每一列的初始宽度...
默认为false. 指定为true将会让列宽度总是保持比例。 每一列的初始宽度 将会被调整到刚好适应表格的整体宽度，并且保证不产生水平 滚动条。 如果以后改变了列的尺寸(手动更改，或者通过程序更改)， 表格中的其它列将会被调整以适应表格的整体宽度。 另请参见 autoFill
GridView
headersDisabled : Boolean
True将会禁用数据列的头部(默认为 false). 可以使用 ColumnModel menuDisabled 配置项禁用单个列上的菜单...
True将会禁用数据列的头部(默认为 false). 可以使用 ColumnModel menuDisabled 配置项禁用单个列上的菜单。 当此配置项为true时，以下功能将会禁用:
  • 点击头部进行排序
  • 显示菜单的按钮。
GridView
listeners : Object
一个包含一个或多个事件处理器的配置对象，会在初始化的时候被添加到目标对象上...

一个包含一个或多个事件处理器的配置对象，会在初始化的时候被添加到目标对象上。 该配置对象应该是一个有效的监听器配置对象就像 addListener例子中指定的一样可一次附加多个处理器。

ExtJs Components上的DOM事件

一些 ExtJs Component 类导出时会选择一些DOM事件(例如 "click", "mouseover" 等等), 这通常只是在有额外的值可以被添加时发生。例如DataView类的 click事件会传递被点击的节点。也可以直接在Component的HTMLElementevent上访问DOM事件，但必需在Component被渲染后监听器才能添加到Element 上。可以按照以下步骤添加插件:

// 插件会用一个监听器配置对象进行配置。
//该组件会被添加到所有处理方法的参数列表上。
Ext.DomObserver = Ext.extend(Object, {
    constructor: function(config) {
        this.listeners = config.listeners ? config.listeners : config;
    },

    // 组件将自己传递进了插件的初始化方法里
    init: function(c) {
        var p, l = this.listeners;
        for (p in l) {
            if (Ext.isFunction(l[p])) {
                l[p] = this.createHandler(l[p], c);
            } else {
                l[p].fn = this.createHandler(l[p].fn, c);
            }
        }

        // 渲染后立即添加监听器到元素上
        c.render = c.render.createSequence(function() {
            var e = c.getEl();
            if (e) {
                e.on(l);
            }
        });
    },

    createHandler: function(fn, c) {
        return function(e) {
            fn.call(this, e, c);
        };
    }
});

var combo = new Ext.form.ComboBox({

    // 元素被点击后折叠
    plugins: [ new Ext.DomObserver({
        click: function(evt, comp) {
            comp.collapse();
        }
    })],
    store: myStore,
    typeAhead: true,
    mode: 'local',
    triggerAction: 'all'
});

Observable
rowBodySelector : String
用来在内部查找数据行的选择器(默认为'div.x-grid3-row')
GridView
rowBodySelectorDepth : Number
事件代理中搜索数据行主体的层级(默认为10)
GridView
rowSelector : String
内部用来查找数据行的选择器(默认为 'div.x-grid3-row')
GridView
rowSelectorDepth : Number
事件代理中搜索数据行的层级(默认为10)
GridView
scrollOffset : Number
为垂直滚动条保留的空间大小 (默认为undefined)。如果没有显式指定一个值...
为垂直滚动条保留的空间大小 (默认为undefined)。如果没有显式指定一个值， 此值将会被自动计算。
GridView
selectedRowClass : String
CSS类，应用到被选中的行(默认为 'x-grid3-row-selected')。 覆盖默认样式的例子:...
CSS类，应用到被选中的行(默认为 'x-grid3-row-selected')。 覆盖默认样式的例子:
                                .x-grid3-row-selected {background-color: yellow;}
注意，此参数仅仅控制行，但是不会对其中的文本做任何处理。 如需设置内部元素(例如text)的样式，使用如下:
.x-grid3-row-selected .x-grid3-cell-inner {
        color: #FFCC00;
    }
GridView
sortAscText : String
显示在'Sort Ascending'菜单项中的文本(默认为'Sort Ascending')
GridView
sortClasses : Array
当排序之后应用到头部的CSS类。(默认为['sort-asc', 'sort-desc'])
GridView
sortDescText : String
显示在'Sort Descending'菜单项中的文本(默认为'Sort Descending')
GridView

公共属性

Property Defined By
dragZone : Ext.grid.GridDragZone
DragZone 的一个特殊实现，提供DragZone模板方法的默认实现...

DragZone 的一个特殊实现，提供DragZone模板方法的默认实现，以便在GridPanel中启用拖拽被选中的行的功能。 细节参见Ext.grid.GridDragZone.

这仅仅出现在:

  • 如果所属的GridPanel配置了 enableDragDrop: true.
  • 在所属的GridPanel渲染之后 。
GridView
mainBody : Ext.Element
只读。GridView的主体Element，它包装了Grid中的所有数据行...
只读。GridView的主体Element，它包装了Grid中的所有数据行。 此Element 只有在GridPanel被渲染之后才有效。
GridView

公共方法

Method Defined By
GridView ( Object config )
参数:
  • config : Object
返回值:
  • void
GridView
addEvents( Object|String o, string Optional. ) : void
添加指定的事件到事件列表上，事件会被该Observable触发。
添加指定的事件到事件列表上，事件会被该Observable触发。
参数:
  • o : Object|String
    以事件名作为属性true作为值的对象 或者当多个事件名被分开的传递时则为第一个事件名。
  • Optional. : string
    事件名被分开的传递时则为事件名。 用法:
    this.addEvents('storeloaded', 'storecleared');
返回值:
  • void
Observable
addListener( String eventName, Function handler, [Object scope], [Object options] ) : void
给对象添加事件处理器。
给对象添加事件处理器。
参数:
  • eventName : String
    监听的事件名。
  • handler : Function
    事件调用的方法
  • scope : Object
    （可选）处理方法执行的作用域 (this的引用 reference)。 如果被忽略。默认为触发事件的对象。
  • options : Object
    （可选）包含处理器配置和属性的对象。 可能包含以下的属性:
    • scope : Object
      处理方法执行的作用域(this的引用) 。 如果被忽略。默认为触发事件的对象。
    • delay : Number
      在触发事件后延迟调用处理器的毫秒数。
    • single : Boolean
      如果为True则添加一个处理器来处理下一次的事件触发（仅一次），然后移除自己。
    • buffer : Number
      使得处理器延迟指定毫秒数后预定的运行在 一个Ext.util.DelayedTask中 。 如果事件在时间内再一次被触发，原始的处理器不会被调用，但是新的处理器会预定的在他的位置上。
    • target : Observable
      如果事件在目标的Observable上触发则仅仅调用处理器， 否则 事件会从子类的Observable上冒泡

    组合选项
    使用这些选项参数,可能会组合出不同类型的监听器：

    一个延迟的，一次性的监听器。

    myDataView.on('click', this.onClick, this, {
single: true,
delay: 100
});

    一次调用附加多个处理器
    该方法同样支持传递一个包含指定的多个处理器的属性的配置对象参数。

    myGridPanel.on({
'click' : {
    fn: this.onClick,
    scope: this,
    delay: 100
},
'mouseover' : {
    fn: this.onMouseOver,
    scope: this
},
'mouseout' : {
    fn: this.onMouseOut,
    scope: this
}
});

    或者一个简写的语法：

    myGridPanel.on({
'click' : this.onClick,
'mouseover' : this.onMouseOver,
'mouseout' : this.onMouseOut,
 scope: this
});
返回值:
  • void
Observable
enableBubble( String/Array events ) :void
是否现在使得事件会被该Observable触发并调用 this.getBubbleTarget()方法在拥有者的继承树...

是否现在使得事件会被该Observable触发并调用 this.getBubbleTarget()方法在拥有者的继承树中冒泡。Observable的基础类中没有该方法的实现。

该方法一般被Ext.Components用来冒泡事件到拥有者的容器。参看Ext.Component.getBubbleTarget默认的实现 在Ext.Component中返回组件的直接拥有者。但是如果需要的是一个已知的目标，该方法可以被重写来更快的访问需求的目标。

例子:

Ext.override(Ext.form.Field, {
    // 添加方法到Field的initComponent上改变事件为冒泡
    initComponent : Ext.form.Field.prototype.initComponent.createSequence(function() {
        this.enableBubble('change');
    }),

    // 我们知道我们想让Field的事件冒泡到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() {
            // 如果样式被修改标题会变红。
            myForm.header.setStyle('color', 'red');
        }
    }
});
参数:
  • events : String/Array
    冒泡的事件名，或事件名数组
返回值:
  • void
Observable
findCellIndex ( HTMLElement el ) : Number

返回表格列的索引位置，它包含所传递的HTMLElement。

另请参见 findRowIndex

返回表格列的索引位置，它包含所传递的HTMLElement。

另请参见 findRowIndex
参数:
  • el : HTMLElement
    目标元素
返回值:
  • Number
    列索引位置，如果目标元素不在当前GridView的数据行中，返回<b>false</b>
GridView
findRow ( HTMLElement el ) : HTMLElement
返回显示数据行的HtmlElement，它包含了所传递的元素。
返回显示数据行的HtmlElement，它包含了所传递的元素。
参数:
  • el : HTMLElement
    目标HTMLElement
返回值:
  • HTMLElement
    数据行元素，如果目标元素在当前GridView数据行中不存在，为null.
GridView
findRowBody ( HTMLElement el ) : HTMLElement
返回描绘表格数据行的HtmlElement元素，它包含了所传递的元素。
返回描绘表格数据行的HtmlElement元素，它包含了所传递的元素。
参数:
  • el : HTMLElement
    目标HTMLElement
返回值:
  • HTMLElement
    数据行主体元素，如果目标元素不在当前GridView的数据行主体中，返回null.
GridView
findRowIndex ( HTMLElement el ) : Number
返回数据行的索引位置，包含了传递的 HTMLElement.另请参见 findCellIndex

返回数据行的索引位置，包含了传递的 HTMLElement.

另请参见 findCellIndex
参数:
  • el : HTMLElement
    目标HTMLElement
返回值:
  • Number
    行索引，或者为<b>false</b> 如果目标元素不在当前GridView的数据行中。
GridView
fireEvent( String eventName, Object... args ) : Boolean
用传入的参数触发指定的事件 (减去事件名)。 一个事件可以被设置为冒泡 Obse...

用传入的参数触发指定的事件 (减去事件名)。

一个事件可以被设置为冒泡到Observable父类继承树(参看 Ext.Component.getBubbleTarget) 调用enableBubble实现。

参数:
  • eventName : String
    触发的事件名。
  • args : Object...
    传递给处理器的可变长度参数。
返回值:
  • Boolean
    如果有任何的处理器返回false则返回false，否则返回true。
Observable
focusCell ( Number row , Number col ) : void
聚焦到指定的单元格。
聚焦到指定的单元格。
参数:
  • row : Number
    行索引
  • col : Number
    列索引
返回值:
  • void
GridView
focusRow ( Number row ) : void
聚焦到指定的行。
聚焦到指定的行。
参数:
  • row : Number
    行索引。
返回值:
  • void
GridView
getCell ( Number row , Number col ) : HtmlElement
返回grid中指定坐标处的<td> HtmlElement.
返回grid中指定坐标处的<td> HtmlElement.
参数:
  • row : Number
    查找单元格的行号。
  • col : Number
    单元格的列索引。
返回值:
  • HtmlElement
    指定坐标处的td
GridView
getHeaderCell ( Number index ) : HtmlElement
返回<td> HtmlElement，它描绘了指定列的Grid头部单元格。
返回<td> HtmlElement，它描绘了指定列的Grid头部单元格。
参数:
  • index : Number
    列索引位置
返回值:
  • HtmlElement
    td元素
GridView
getRow ( Number index ) : HtmlElement
返回描绘数据行的<div> HtmlElement，此数据行位于 指定位置索引处。
返回描绘数据行的<div> HtmlElement，此数据行位于 指定位置索引处。
参数:
  • index : Number
    行索引
返回值:
  • HtmlElement
    div元素。
GridView
getRowClass ( Record record , Number index , Object rowParams , Store store ) : String
覆盖此函数可以在渲染时将自定义的CSS类应用到数据行。 使用rowParams参数...
覆盖此函数可以在渲染时将自定义的CSS类应用到数据行。 使用rowParams参数，你也可以提供自定义的参数给当前数据 行所使用的模板，以指定它如何被渲染。 此函数必须返回CSS类名(如果没有返回空字符串'')，它将会被添加到 数据行的包装div上。如需应用多个CSS类名， 简单地在一个字符串中返回它们，以空格分隔(例如'my-class another-class'). 示例用法:
viewConfig: {
    forceFit: true,
    showPreview: true, // custom property
    enableRowBody: true, // required to create a second, full-width row to show expanded Record data
    getRowClass: function(record, rowIndex, rp, ds){ // rp = rowParams
        if(this.showPreview){
            rp.body = '<p>'+record.data.excerpt+'</p>';
            return 'x-grid3-row-expanded';
        }
        return 'x-grid3-row-collapsed';
    }
},
参数:
  • record : Record
    对应到当前行的Ext.data.Record
  • index : Number
    行索引.
  • rowParams : Object
    一个配置对象，将会在渲染时传递给行模板，允许自定义数据行的多个样式。

    如果 enableRowBody 被配置为true， 那么如下参数可以通过此函数设置，并且 将会被用来在每一行下面渲染一个拥有完整宽度的可展开的行:

    • body : String
      一个HTML片段，被用作展开行body的内容(默认为'').
    • bodyStyle : String
      一个CSS样式描述，将会被应用到展开行的<tr>元素上(默认为'').
    以下参数将会被传递，并且被添加到:
    • tstyle : String
      一个CSS样式描述，将会被应用到<table>元素上， 它包装了标准数据行和所有展开行。
  • store : Store
    当前表格绑定的 Ext.data.Store
返回值:
  • String
    添加到行上的一个CSS类名。
GridView
hasListener( String eventName ) : Boolean
检测对象是否包含指定事件的任何监听器
检测对象是否包含指定事件的任何监听器
参数:
  • eventName : String
    检测的事件名
返回值:
  • Boolean
    如果事件被监听则为true，否则为false
Observable
on( String eventName, Function handler, [Object scope], [Object options] ) : void
给对象添加事件处理器 (addListener的简写形式)
给对象添加事件处理器 (addListener的简写形式。)
参数:
  • eventName : String
    监听的事件类型
  • handler : Function
    事件调用的方法
  • scope : Object
    （可选）处理方法执行时的作用域 (this 的引用)。 如果被忽略。默认为触发事件的对象。
  • options : Object
    可选 包含处理器配置的对象。
返回值:
  • void
Observable
purgeListeners() : void
移除对象上所有的监听器
移除对象上所有的监听器
参数:
  • 无。
返回值:
  • void
Observable
refresh ( [ Boolean headersToo ] ) : void
刷新表格UI
刷新表格UI
参数:
  • headersToo : Boolean
    (可选)True将同时刷新头部
返回值:
  • void
GridView
relayEvents( Object o, Array events ) : void
从指定的Observable上传递选择的事件就好像被当前对象触发一样。
从指定的Observable上传递选择的事件就好像被当前对象触发一样。
参数:
  • o : Object
    该Observable上的事件被当前对象传递。
  • events : Array
    传递的数组名。
返回值:
  • void
Observable
removeListener( String eventName, Function handler, [Object scope] ) : void
删除一个事件处理器。
删除一个事件处理器。
参数:
  • eventName : String
    处理器关联的事件类型。
  • handler : Function
    移除的处理器。 这应该是传递到addListener里的方法的引用。
  • scope : Object
    （可选）处理器指定的初始作用域。
返回值:
  • void
Observable
resumeEvents() : void
重新开始触发事件。(参见suspendEvents) 如果事件以queueSuspended参数被挂起，则在事件被挂起时 ...
重新开始触发事件。(参见 suspendEvents) 如果事件以queueSuspended 参数被挂起，则在事件被挂起时触发的事件会被传递到所有的监听器上
参数:
  • 无。
返回值:
  • void
Observable
scrollToTop () : void
将表格滚动到顶部
将表格滚动到顶部
参数:
  • 无。
返回值:
  • void
GridView
suspendEvents( Boolean queueSuspended ) : void
暂停触发所有的事件。 (参看resumeEvents)
暂停触发所有的事件。（参看 resumeEvents)
参数:
  • queueSuspended : Boolean
    如果传递为true则排列好暂停的事件使得在调用 resumeEvents 后再触发它们，而不是抛弃所有暂停的事件。
返回值:
  • void
Observable
un( String eventName, Function handler, [Object scope] ) : void
删除一个事件处理器(removeListener方法的简写形式)
删除一个事件处理器(removeListener方法的简写形式。)
参数:
  • eventName : String
    处理器关联的事件类型
  • handler : Function
    被删除的处理器 这应该是传入 addListener 中的方法的引用。
  • scope : Object
    （可选）为处理器指定的初始作用域。
返回值:
  • void
Observable

公共事件

Event Defined By
beforerefresh : ( Ext.grid.GridView view )
内部UI事件。在视图刷新之前触发。
内部UI事件。在视图刷新之前触发。
监听器将会以如下参数格式被调用:
  • view : Ext.grid.GridView
GridView
beforerowremoved : ( Ext.grid.GridView view , Number rowIndex , Ext.data.Record record )
内部UI事件。在数据行被删除之前触发。
内部UI事件。在数据行被删除之前触发。
监听器将会以如下参数格式被调用:
  • view : Ext.grid.GridView
  • rowIndex : Number
    需要被删除的数据行索引位置。
  • record : Ext.data.Record
    被删除的Record
GridView
beforerowsinserted : ( Ext.grid.GridView view , Number firstRow , Number lastRow )
内部UI事件。在数据行插入之前触发。
内部UI事件。在数据行插入之前触发。
监听器将会以如下参数格式被调用:
  • view : Ext.grid.GridView
  • firstRow : Number
    需要插入的第一行数据的索引位置。
  • lastRow : Number
    需要插入的最后一行数据的索引位置。
GridView
refresh : ( Ext.grid.GridView view )
内部UI事件。在GridView的body被刷新之后触发。
内部UI事件。在GridView的body被刷新之后触发。
监听器将会以如下参数格式被调用:
  • view : Ext.grid.GridView
GridView
rowremoved : ( Ext.grid.GridView view , Number rowIndex , Ext.data.Record record )
内部UI事件。在删除一行数据之后触发。
内部UI事件。在删除一行数据之后触发。
监听器将会以如下参数格式被调用:
  • view : Ext.grid.GridView
  • rowIndex : Number
    被删除数据行的索引位置。
  • record : Ext.data.Record
    被删除的Record
GridView
rowsinserted : ( Ext.grid.GridView view , Number firstRow , Number lastRow )
内部UI事件。在插入一行数据之后触发。
内部UI事件。在插入一行数据之后触发。
监听器将会以如下参数格式被调用:
  • view : Ext.grid.GridView
  • firstRow : Number
    插入的第一条数据的索引位置。
  • lastRow : Number
    插入的最后一条数据的索引位置。
GridView
rowupdated : ( Ext.grid.GridView view , Number firstRow , Ext.data.record record )
内部UI事件。在一行数据刷新之后触发。
内部UI事件。在一行数据刷新之后触发。
监听器将会以如下参数格式被调用:
  • view : Ext.grid.GridView
  • firstRow : Number
    刷新的数据行索引。
  • record : Ext.data.record
    被刷新行的Record备份。
GridView


Observable
    GridView
      GroupingView

Class Ext.grid.GroupingView

包: | Ext.grid
定义类的文件: | GroupingView.js
类: | GroupingView
继承自: | GridView
为grid添加单层分组功能，GroupingStore 必须用于启用分组，一些典型的分组可能在 Column 层次上配置。
  • emptyGroupText
  • groupable
  • groupName
  • groupRender

使用样例:

                var grid = new Ext.grid.GridPanel({
    // A groupingStore is required for a GroupingView
    store: new Ext.data.GroupingStore({
        autoDestroy: true,
        reader: reader,
        data: xg.dummyData,
        sortInfo: {field: 'company', direction: 'ASC'},
        groupOnSort: true,
        remoteGroup: true,
        groupField: 'industry'
    }),
    colModel: new Ext.grid.ColumnModel({
        columns:[
            {id:'company',header: 'Company', width: 60, dataIndex: 'company'},
            // groupable, groupName, groupRender are also configurable at column level
            {header: 'Price', renderer: Ext.util.Format.usMoney, dataIndex: 'price', groupable: false},
            {header: 'Change', dataIndex: 'change', renderer: Ext.util.Format.usMoney},
            {header: 'Industry', dataIndex: 'industry'},
            {header: 'Last Updated', renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}
        ],
        defaults: {
            sortable: true,
            menuDisabled: false,
            width: 20
        }
    }),

    view: new Ext.grid.GroupingView({
        forceFit: true,
        // custom grouping text template to display the number of items per group
        groupTextTpl: '{text} ({[values.rs.length]} {[values.rs.length > 1 ? "Items" : "Item"]})'
    }),

    frame:true,
    width: 700,
    height: 450,
    collapsible: true,
    animCollapse: false,
    title: 'Grouping Example',
    iconCls: 'icon-grid',
    renderTo: document.body
});

配置项

Config Options Defined By
autoFill : Boolean
默认为 false. 指定为true，当表格开始被渲染之后将会重新计算列宽度比例...
默认为 false. 指定为true，当表格开始被渲染之后将会重新计算列宽度比例。 每一列的初始宽度 将会被调整到刚好适应表格的整体宽度，并且保证不产生水平 滚动条。 如果以后改变了列的尺寸(手动更改，或者通过程序更改)， 表格中的其它列将不会被调整以适应表格的整体宽度。 另请参见 forceFit
GridView
cellSelector : String
用来在内部查找单元格的选择器(默认为'td.x-grid3-cell')
GridView
cellSelectorDepth : Number
事件代理中搜索单元格的层级(默认为4)
GridView
columnsText : String
显示在'Columns'菜单项中的文本(默认为'Columns')
GridView
deferEmptyText : Boolean
True将会延迟应用 emptyText ，直到store第一次被加载(默认为true).
GridView
emptyGroupText : String
当有一个空的分组值时显示的文本 (默认为'(None)')。可为每列指定,参见 ...
当有一个空的分组值时显示的文本 (默认为 '(None)')。可为每列指定, 参见 Ext.grid.Column， emptyGroupText.
GroupingView
emptyText : String
默认文本(接受html标签)，当没有可用的数据行时显示在grid body中...
默认文本(接受html标签)，当没有可用的数据行时显示在grid body中 (默认为'')。此值将被用来刷新 mainBody :
this.mainBody.update('<div class="x-grid-empty">' + this.emptyText + '</div>');
GridView
enableGrouping : Boolean
如果为false，将禁用分组功能。(默认为 true)
GroupingView
enableGroupingMenu : Boolean
设置为true 可以在列菜单中控制分组(默认为true)
GroupingView
enableNoGroups : Boolean
设置为true 允许用户关闭分组(默认为true)
GroupingView
enableRowBody : Boolean
True将会为每行添加第二个TR元素，它将被用来提供一个行body跨越所有数据行。 使用...
True将会为每行添加第二个TR元素，它将被用来提供一个行body跨越所有数据行。 使用getRowClass 方法的rowParams配置可以自定义行body.
GridView
forceFit : Boolean
默认为false. 指定为true将会让列宽度总是保持比例。 每一列的初始宽度...
默认为false. 指定为true将会让列宽度总是保持比例。 每一列的初始宽度 将会被调整到刚好适应表格的整体宽度，并且保证不产生水平 滚动条。 如果以后改变了列的尺寸(手动更改，或者通过程序更改)， 表格中的其它列将会被调整以适应表格的整体宽度。 另请参见 autoFill
GridView
groupByText : String
根据一列分组时显示在grid头部菜单中的文本(默认值为 'Group By This Field').
GroupingView
groupMode : String
指示如何构建分组的标识符，'value'使用raw value作为id，'display'使用...
指示如何构建分组的标识符，'value'使用raw value作为id，'display'使用rendered value 作为id，默认为'value'。
GroupingView
groupRenderer : Function
该属性必须在 Ext.grid.Column 为每列配置。
GroupingView
groupTextTpl : String
用来渲染分组表头的模板(默认为 '{text}')。用于格式化包含...
用来渲染分组表头的模板(默认为 '{text}')。 用来格式化包含如下属性的对象：
  • group : String

    分组字段 渲染 后的值。 默认为分组字段，不做改变。 如果指定了一个 groupRenderer 则为调用此方法的结果。

  • gvalue : Object

    分组字段的原始（raw）值。

  • text : String

    配置的header(如在 showGroupName)中的描述。 如果 showGroupName 为 true)加上 渲染 后的分组字段值。

  • groupId : String

    一个唯一的，自动产生的ID，被应用到包含分组的View Element。

  • startRow : Number

    导致分组改变的Record的行号。

  • rs : Array

    包含单个元素: 该Record为该行提供引起分组改变的数据。

  • cls : String

    自动生成的类名字符串，将被应用到分组的表头元素。

  • style : String

    应用到分组表头元素的内联样式规则。

参见 Ext.XTemplate 以获取如何使用模板格式化数据的相关信息，例如:

                                    var grid = new Ext.grid.GridPanel({
    ...
    view: new Ext.grid.GroupingView({
        groupTextTpl: '{text} ({[values.rs.length]} {[values.rs.length > 1 ? "Items" : "Item"]})'
    }),
});
GroupingView
headersDisabled : Boolean
True将会禁用数据列的头部(默认为 false). 可以使用 ColumnModel menuDisabled 配置项禁用单个列上的菜单...
True将会禁用数据列的头部(默认为 false). 可以使用 ColumnModel menuDisabled 配置项禁用单个列上的菜单。 当此配置项为true时，以下功能将会禁用:
  • 点击头部进行排序
  • 显示菜单的按钮。
GridView
hideGroupedColumn : Boolean
如果为true则隐藏当前已分组的列 (默认为 false)
GroupingView
ignoreAdd : Boolean
当为true时，跳过添加新纪录时刷新视图的操作。(默认为 false)
GroupingView
listeners : Object
一个包含一个或多个事件处理器的配置对象，会在初始化的时候被添加到目标对象上...

一个包含一个或多个事件处理器的配置对象，会在初始化的时候被添加到目标对象上。 该配置对象应该是一个有效的监听器配置对象就像 addListener例子中指定的一样可一次附加多个处理器。

ExtJs Components上的DOM事件

一些 ExtJs Component 类导出时会选择一些DOM事件(例如 "click", "mouseover" 等等), 这通常只是在有额外的值可以被添加时发生。例如DataView类的 click事件会传递被点击的节点。也可以直接在Component的HTMLElementevent上访问DOM事件，但必需在Component被渲染后监听器才能添加到Element 上。可以按照以下步骤添加插件:

// 插件会用一个监听器配置对象进行配置。
//该组件会被添加到所有处理方法的参数列表上。
Ext.DomObserver = Ext.extend(Object, {
    constructor: function(config) {
        this.listeners = config.listeners ? config.listeners : config;
    },

    // 组件将自己传递进了插件的初始化方法里
    init: function(c) {
        var p, l = this.listeners;
        for (p in l) {
            if (Ext.isFunction(l[p])) {
                l[p] = this.createHandler(l[p], c);
            } else {
                l[p].fn = this.createHandler(l[p].fn, c);
            }
        }

        // 渲染后立即添加监听器到元素上
        c.render = c.render.createSequence(function() {
            var e = c.getEl();
            if (e) {
                e.on(l);
            }
        });
    },

    createHandler: function(fn, c) {
        return function(e) {
            fn.call(this, e, c);
        };
    }
});

var combo = new Ext.form.ComboBox({

    // 元素被点击后折叠
    plugins: [ new Ext.DomObserver({
        click: function(evt, comp) {
            comp.collapse();
        }
    })],
    store: myStore,
    typeAhead: true,
    mode: 'local',
    triggerAction: 'all'
});

Observable
rowBodySelector : String
用来在内部查找数据行的选择器(默认为'div.x-grid3-row')
GridView
rowBodySelectorDepth : Number
事件代理中搜索数据行主体的层级(默认为10)
GridView
rowSelector : String
内部用来查找数据行的选择器(默认为 'div.x-grid3-row')
GridView
rowSelectorDepth : Number
事件代理中搜索数据行的层级(默认为10)
GridView
scrollOffset : Number
为垂直滚动条保留的空间大小 (默认为undefined)。如果没有显式指定一个值...
为垂直滚动条保留的空间大小 (默认为undefined)。如果没有显式指定一个值， 此值将会被自动计算。
GridView
selectedRowClass : String
CSS类，应用到被选中的行(默认为 'x-grid3-row-selected')。 覆盖默认样式的例子:...
CSS类，应用到被选中的行(默认为 'x-grid3-row-selected')。 覆盖默认样式的例子:
                                .x-grid3-row-selected {background-color: yellow;}
注意，此参数仅仅控制行，但是不会对其中的文本做任何处理。 如需设置内部元素(例如text)的样式，使用如下:
.x-grid3-row-selected .x-grid3-cell-inner {
        color: #FFCC00;
    }
GridView
showGroupName : Boolean
如果为true，则在分组首行的字段值前显示前缀和':'，该前缀由...
如果为 true 则在分组首行的字段值前显示前缀和':'，该前缀由为每个分组在 Ext.grid.Column中配置的 groupName 组成 (如果没有提供，则用已配置的 header ) (默认为 true)。
GroupingView
showGroupsText : String
启用或禁用分组时显示在grid头部的文本(默认值为 'Show in Groups')。
GroupingView
sortAscText : String
显示在'Sort Ascending'菜单项中的文本(默认为'Sort Ascending')
GridView
sortClasses : Array
当排序之后应用到头部的CSS类。(默认为['sort-asc', 'sort-desc'])
GridView
sortDescText : String
显示在'Sort Descending'菜单项中的文本(默认为'Sort Descending')
GridView
startCollapsed : Boolean
设置为true，开始收起所有分组 (默认为false)
GroupingView

公共属性

Property Defined By
dragZone : Ext.grid.GridDragZone
DragZone 的一个特殊实现，提供DragZone模板方法的默认实现...

DragZone 的一个特殊实现，提供DragZone模板方法的默认实现，以便在GridPanel中启用拖拽被选中的行的功能。 细节参见Ext.grid.GridDragZone.

这仅仅出现在:

  • 如果所属的GridPanel配置了 enableDragDrop: true.
  • 在所属的GridPanel渲染之后 。
GridView
mainBody : Ext.Element
只读。GridView的主体Element，它包装了Grid中的所有数据行...
只读。GridView的主体Element，它包装了Grid中的所有数据行。 此Element 只有在GridPanel被渲染之后才有效。
GridView

公共方法

Method Defined By
GroupingView ( Object config )
参数:
  • config : Object
返回值:
  • void
GroupingView
addEvents( Object|String o, string Optional. ) : void
添加指定的事件到事件列表上，事件会被该Observable触发。
添加指定的事件到事件列表上，事件会被该Observable触发。
参数:
  • o : Object|String
    以事件名作为属性true作为值的对象 或者当多个事件名被分开的传递时则为第一个事件名。
  • Optional. : string
    事件名被分开的传递时则为事件名。 用法:
    this.addEvents('storeloaded', 'storecleared');
返回值:
  • void
Observable
addListener( String eventName, Function handler, [Object scope], [Object options] ) : void
给对象添加事件处理器。
给对象添加事件处理器。
参数:
  • eventName : String
    监听的事件名。
  • handler : Function
    事件调用的方法
  • scope : Object
    （可选）处理方法执行的作用域 (this的引用 reference)。 如果被忽略。默认为触发事件的对象。
  • options : Object
    （可选）包含处理器配置和属性的对象。 可能包含以下的属性:
    • scope : Object
      处理方法执行的作用域(this的引用) 。 如果被忽略。默认为触发事件的对象。
    • delay : Number
      在触发事件后延迟调用处理器的毫秒数。
    • single : Boolean
      如果为True则添加一个处理器来处理下一次的事件触发（仅一次），然后移除自己。
    • buffer : Number
      使得处理器延迟指定毫秒数后预定的运行在 一个Ext.util.DelayedTask中 。 如果事件在时间内再一次被触发，原始的处理器不会被调用，但是新的处理器会预定的在他的位置上。
    • target : Observable
      如果事件在目标的Observable上触发则仅仅调用处理器， 否则 事件会从子类的Observable上冒泡

    组合选项
    使用这些选项参数,可能会组合出不同类型的监听器：

    一个延迟的，一次性的监听器。

    myDataView.on('click', this.onClick, this, {
single: true,
delay: 100
});

    一次调用附加多个处理器
    该方法同样支持传递一个包含指定的多个处理器的属性的配置对象参数。

    myGridPanel.on({
'click' : {
    fn: this.onClick,
    scope: this,
    delay: 100
},
'mouseover' : {
    fn: this.onMouseOver,
    scope: this
},
'mouseout' : {
    fn: this.onMouseOut,
    scope: this
}
});

    或者一个简写的语法：

    myGridPanel.on({
'click' : this.onClick,
'mouseover' : this.onMouseOver,
'mouseout' : this.onMouseOut,
 scope: this
});
返回值:
  • void
Observable
collapseAllGroups () : void
收起所有已经分组的行。
收起所有已经分组的行。
参数:
  • 无。
返回值:
  • void
GroupingView
enableBubble( String/Array events ) :void
是否现在使得事件会被该Observable触发并调用 this.getBubbleTarget()方法在拥有者的继承树...

是否现在使得事件会被该Observable触发并调用 this.getBubbleTarget()方法在拥有者的继承树中冒泡。Observable的基础类中没有该方法的实现。

该方法一般被Ext.Components用来冒泡事件到拥有者的容器。参看Ext.Component.getBubbleTarget默认的实现 在Ext.Component中返回组件的直接拥有者。但是如果需要的是一个已知的目标，该方法可以被重写来更快的访问需求的目标。

例子:

Ext.override(Ext.form.Field, {
    // 添加方法到Field的initComponent上改变事件为冒泡
    initComponent : Ext.form.Field.prototype.initComponent.createSequence(function() {
        this.enableBubble('change');
    }),

    // 我们知道我们想让Field的事件冒泡到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() {
            // 如果样式被修改标题会变红。
            myForm.header.setStyle('color', 'red');
        }
    }
});
参数:
  • events : String/Array
    冒泡的事件名，或事件名数组
返回值:
  • void
Observable
expandAllGroups () : void
展开所有分组的行。
展开所有分组的行。
参数:
  • 无。
返回值:
  • void
GroupingView
findCellIndex ( HTMLElement el ) : Number

返回表格列的索引位置，它包含所传递的HTMLElement。

另请参见 findRowIndex

返回表格列的索引位置，它包含所传递的HTMLElement。

另请参见 findRowIndex
参数:
  • el : HTMLElement
    目标元素
返回值:
  • Number
    列索引位置，如果目标元素不在当前GridView的数据行中，返回<b>false</b>
GridView
findRow ( HTMLElement el ) : HTMLElement
返回显示数据行的HtmlElement，它包含了所传递的元素。
返回显示数据行的HtmlElement，它包含了所传递的元素。
参数:
  • el : HTMLElement
    目标HTMLElement
返回值:
  • HTMLElement
    数据行元素，如果目标元素在当前GridView数据行中不存在，为null.
GridView
findRowBody ( HTMLElement el ) : HTMLElement
返回描绘表格数据行的HtmlElement元素，它包含了所传递的元素。
返回描绘表格数据行的HtmlElement元素，它包含了所传递的元素。
参数:
  • el : HTMLElement
    目标HTMLElement
返回值:
  • HTMLElement
    数据行主体元素，如果目标元素不在当前GridView的数据行主体中，返回null.
GridView
findRowIndex ( HTMLElement el ) : Number
返回数据行的索引位置，包含了传递的 HTMLElement.另请参见 findCellIndex

返回数据行的索引位置，包含了传递的 HTMLElement.

另请参见 findCellIndex
参数:
  • el : HTMLElement
    目标HTMLElement
返回值:
  • Number
    行索引，或者为<b>false</b> 如果目标元素不在当前GridView的数据行中。
GridView
fireEvent( String eventName, Object... args ) : Boolean
用传入的参数触发指定的事件 (减去事件名)。 一个事件可以被设置为冒泡 Obse...

用传入的参数触发指定的事件 (减去事件名)。

一个事件可以被设置为冒泡到Observable父类继承树(参看 Ext.Component.getBubbleTarget) 调用enableBubble实现。

参数:
  • eventName : String
    触发的事件名。
  • args : Object...
    传递给处理器的可变长度参数。
返回值:
  • Boolean
    如果有任何的处理器返回false则返回false，否则返回true。
Observable
focusCell ( Number row , Number col ) : void
聚焦到指定的单元格。
聚焦到指定的单元格。
参数:
  • row : Number
    行索引
  • col : Number
    列索引
返回值:
  • void
GridView
focusRow ( Number row ) : void
聚焦到指定的行。
聚焦到指定的行。
参数:
  • row : Number
    行索引。
返回值:
  • void
GridView
getCell ( Number row , Number col ) : HtmlElement
返回grid中指定坐标处的<td> HtmlElement.
返回grid中指定坐标处的<td> HtmlElement.
参数:
  • row : Number
    查找单元格的行号。
  • col : Number
    单元格的列索引。
返回值:
  • HtmlElement
    指定坐标处的td
GridView
getGroupId ( String value ) : String
动态地确定特定值的groupId
动态地确定特定值的groupId
参数:
  • value : String
返回值:
  • String
    The group id
GroupingView
getHeaderCell ( Number index ) : HtmlElement
返回<td> HtmlElement，它描绘了指定列的Grid头部单元格。
返回<td> HtmlElement，它描绘了指定列的Grid头部单元格。
参数:
  • index : Number
    列索引位置
返回值:
  • HtmlElement
    td元素
GridView
getRow ( Number index ) : HtmlElement
返回描绘数据行的<div> HtmlElement，此数据行位于 指定位置索引处。
返回描绘数据行的<div> HtmlElement，此数据行位于 指定位置索引处。
参数:
  • index : Number
    行索引
返回值:
  • HtmlElement
    div元素。
GridView
getRowClass ( Record record , Number index , Object rowParams , Store store ) : String
覆盖此函数可以在渲染时将自定义的CSS类应用到数据行。 使用rowParams参数...
覆盖此函数可以在渲染时将自定义的CSS类应用到数据行。 使用rowParams参数，你也可以提供自定义的参数给当前数据 行所使用的模板，以指定它如何被渲染。 此函数必须返回CSS类名(如果没有返回空字符串'')，它将会被添加到 数据行的包装div上。如需应用多个CSS类名， 简单地在一个字符串中返回它们，以空格分隔(例如'my-class another-class'). 示例用法:
viewConfig: {
    forceFit: true,
    showPreview: true, // custom property
    enableRowBody: true, // required to create a second, full-width row to show expanded Record data
    getRowClass: function(record, rowIndex, rp, ds){ // rp = rowParams
        if(this.showPreview){
            rp.body = '<p>'+record.data.excerpt+'</p>';
            return 'x-grid3-row-expanded';
        }
        return 'x-grid3-row-collapsed';
    }
},
参数:
  • record : Record
    对应到当前行的Ext.data.Record
  • index : Number
    行索引.
  • rowParams : Object
    一个配置对象，将会在渲染时传递给行模板，允许自定义数据行的多个样式。

    如果 enableRowBody 被配置为true， 那么如下参数可以通过此函数设置，并且 将会被用来在每一行下面渲染一个拥有完整宽度的可展开的行:

    • body : String
      一个HTML片段，被用作展开行body的内容(默认为'').
    • bodyStyle : String
      一个CSS样式描述，将会被应用到展开行的<tr>元素上(默认为'').
    以下参数将会被传递，并且被添加到:
    • tstyle : String
      一个CSS样式描述，将会被应用到<table>元素上， 它包装了标准数据行和所有展开行。
  • store : Store
    当前表格绑定的 Ext.data.Store
返回值:
  • String
    添加到行上的一个CSS类名。
GridView
hasListener( String eventName ) : Boolean
检测对象是否包含指定事件的任何监听器
检测对象是否包含指定事件的任何监听器
参数:
  • eventName : String
    检测的事件名
返回值:
  • Boolean
    如果事件被监听则为true，否则为false
Observable
on( String eventName, Function handler, [Object scope], [Object options] ) : void
给对象添加事件处理器 (addListener的简写形式)
给对象添加事件处理器 (addListener的简写形式。)
参数:
  • eventName : String
    监听的事件类型
  • handler : Function
    事件调用的方法
  • scope : Object
    （可选）处理方法执行时的作用域 (this 的引用)。 如果被忽略。默认为触发事件的对象。
  • options : Object
    可选 包含处理器配置的对象。
返回值:
  • void
Observable
purgeListeners() : void
移除对象上所有的监听器
移除对象上所有的监听器
参数:
  • 无。
返回值:
  • void
Observable
refresh ( [ Boolean headersToo ] ) : void
刷新表格UI
刷新表格UI
参数:
  • headersToo : Boolean
    (可选)True将同时刷新头部
返回值:
  • void
GridView
relayEvents( Object o, Array events ) : void
从指定的Observable上传递选择的事件就好像被当前对象触发一样。
从指定的Observable上传递选择的事件就好像被当前对象触发一样。
参数:
  • o : Object
    该Observable上的事件被当前对象传递。
  • events : Array
    传递的数组名。
返回值:
  • void
Observable
removeListener( String eventName, Function handler, [Object scope] ) : void
删除一个事件处理器。
删除一个事件处理器。
参数:
  • eventName : String
    处理器关联的事件类型。
  • handler : Function
    移除的处理器。 这应该是传递到addListener里的方法的引用。
  • scope : Object
    （可选）处理器指定的初始作用域。
返回值:
  • void
Observable
resumeEvents() : void
重新开始触发事件。(参见suspendEvents) 如果事件以queueSuspended参数被挂起，则在事件被挂起时 ...
重新开始触发事件。(参见 suspendEvents) 如果事件以queueSuspended 参数被挂起，则在事件被挂起时触发的事件会被传递到所有的监听器上
参数:
  • 无。
返回值:
  • void
Observable
scrollToTop () : void
将表格滚动到顶部
将表格滚动到顶部
参数:
  • 无。
返回值:
  • void
GridView
suspendEvents( Boolean queueSuspended ) : void
暂停触发所有的事件。 (参看resumeEvents)
暂停触发所有的事件。（参看 resumeEvents)
参数:
  • queueSuspended : Boolean
    如果传递为true则排列好暂停的事件使得在调用 resumeEvents 后再触发它们，而不是抛弃所有暂停的事件。
返回值:
  • void
Observable
toggleAllGroups ( [ Boolean expanded ] ) : void
如果没有指定值，切换所有分组, 否则将所有分组的展开状态设置为传递进来的值。
如果没有指定值，切换所有分组, 否则将所有分组的展开状态设置为传递进来的值。
参数:
  • expanded : Boolean
    可选
返回值:
  • void
GroupingView
toggleGroup ( String groupId , [ Boolean expanded ] ) : void
如果没有指定值则切换指定的分组，否则将展开状态设置为传递进来的值...
如果没有指定值则切换指定的分组，否则将展开状态设置为传递进来的值...
参数:
  • groupId : String
    指派给该分组的groupId (参见getGroupId)
  • expanded : Boolean
    可选
返回值:
  • void
GroupingView
toggleRowIndex ( Number rowIndex , [ Boolean expanded ] ) : void
切换包含特定行的分组
切换包含特定行的分组
参数:
  • rowIndex : Number
    分组中的行
  • expanded : Boolean
    可选
返回值:
  • void
GroupingView
un( String eventName, Function handler, [Object scope] ) : void
删除一个事件处理器(removeListener方法的简写形式)
删除一个事件处理器(removeListener方法的简写形式。)
参数:
  • eventName : String
    处理器关联的事件类型
  • handler : Function
    被删除的处理器 这应该是传入 addListener 中的方法的引用。
  • scope : Object
    （可选）为处理器指定的初始作用域。
返回值:
  • void
Observable

公共事件

Event Defined By
beforerefresh : ( Ext.grid.GridView view )
内部UI事件。在视图刷新之前触发。
内部UI事件。在视图刷新之前触发。
监听器将会以如下参数格式被调用:
  • view : Ext.grid.GridView
GridView
beforerowremoved : ( Ext.grid.GridView view , Number rowIndex , Ext.data.Record record )
内部UI事件。在数据行被删除之前触发。
内部UI事件。在数据行被删除之前触发。
监听器将会以如下参数格式被调用:
  • view : Ext.grid.GridView
  • rowIndex : Number
    需要被删除的数据行索引位置。
  • record : Ext.data.Record
    被删除的Record
GridView
beforerowsinserted : ( Ext.grid.GridView view , Number firstRow , Number lastRow )
内部UI事件。在数据行插入之前触发。
内部UI事件。在数据行插入之前触发。
监听器将会以如下参数格式被调用:
  • view : Ext.grid.GridView
  • firstRow : Number
    需要插入的第一行数据的索引位置。
  • lastRow : Number
    需要插入的最后一行数据的索引位置。
GridView
refresh : ( Ext.grid.GridView view )
内部UI事件。在GridView的body被刷新之后触发。
内部UI事件。在GridView的body被刷新之后触发。
监听器将会以如下参数格式被调用:
  • view : Ext.grid.GridView
GridView
rowremoved : ( Ext.grid.GridView view , Number rowIndex , Ext.data.Record record )
内部UI事件。在删除一行数据之后触发。
内部UI事件。在删除一行数据之后触发。
监听器将会以如下参数格式被调用:
  • view : Ext.grid.GridView
  • rowIndex : Number
    被删除数据行的索引位置。
  • record : Ext.data.Record
    被删除的Record
GridView
rowsinserted : ( Ext.grid.GridView view , Number firstRow , Number lastRow )
内部UI事件。在插入一行数据之后触发。
内部UI事件。在插入一行数据之后触发。
监听器将会以如下参数格式被调用:
  • view : Ext.grid.GridView
  • firstRow : Number
    插入的第一条数据的索引位置。
  • lastRow : Number
    插入的最后一条数据的索引位置。
GridView
rowupdated : ( Ext.grid.GridView view , Number firstRow , Ext.data.record record )
内部UI事件。在一行数据刷新之后触发。
内部UI事件。在一行数据刷新之后触发。
监听器将会以如下参数格式被调用:
  • view : Ext.grid.GridView
  • firstRow : Number
    刷新的数据行索引。
  • record : Ext.data.record
    被刷新行的Record备份。
GridView


Column
    NumberColumn

Class Ext.grid.NumberColumn

包: | Ext.grid
定义类的文件: | Column.js
类: | NumberColumn
继承自: | Column

根据 format 的String定义一个显示为数字的列 请查看 xtype 配置参数 参见 Ext.grid.Column 获取更多帮助

配置项

Config Options Defined By
align : String
(可选)设置列的CSS text-align属性。默认值为undefined。
Column
css : String
(可选)可选，定义内嵌css样式的字符串。并应用到表格中的所有列的单元格...
(可选)可选，定义内嵌css样式的字符串。并应用到表格中的所有列的单元格(不包括表头部分)。默认值为undefined。
Column
dataIndex : String
(必填)在grid中的Ext.data.Store里面的Ext.data.Record中用来定义这个字段的名称，可以从中获取这个列的值。

(必填)在grid中的Ext.data.Store里面的Ext.data.Record中用来定义这个字段的名称，可以从中获取这个列的值。

Column
editable : Boolean
(可选)默认值为true，可以配置editor 。设置为false，初始化时此列禁用编辑...
(可选)默认值为true，可以配置editor 。设置为false，初始化时此列禁用编辑功能。使用Ext.grid.ColumnModel.setEditable()可以动态改变初始化配置。
Column
editor : Ext.form.Field
(可选)如果grid支持可编辑功能，要可以使用Ext.form.Field编辑该列的的值...
(可选)如果grid支持可编辑功能，要可以使用Ext.form.Field编辑该列的的值。见editable 。
Column
emptyGroupText : String
(可选)如果grid是被一个Ext.grid.GroupingView渲染，这个选项可以...
(可选)如果grid是被一个Ext.grid.GroupingView渲染，这个选项可以用来指定一个空的分组要显示的文本。 默认值为Ext.grid.GroupingView.emptyGroupText。
Column
fixed : Boolean
(可选)如果为true，不能改变列的宽度。默认值为false。
Column
format : String
通过Ext.util.Format.number用来格式化字符串的格式化 本专栏的数值(默认为 '0,000.0...
通过 Ext.util.Format.number 来格式化字符串的格式化(默认为 '0,000.00').
NumberColumn
groupName : String
(可选)如果grid是被一个Ext.grid.GroupingView渲染，这个属性可以...
(可选)如果grid是被一个Ext.grid.GroupingView渲染，这个属性可以被用来指定按字段分组后在小组行标题的前缀名称。 详见groupRenderer和Ext.grid.GroupingView.showGroupName。
Column
groupRenderer : Function
(可选)如果grid是被一个Ext.grid.GroupingView渲染，这个选项指定...

(可选)如果grid是被一个Ext.grid.GroupingView渲染，这个选项指定的函数可以用来格式化分组字段值显示在组头的功能。 如果groupRenderer未指定，配置的渲染器renderer 将被调用；如果 renderer 也同样未指定，分组字段的新值将被使用。

被调用的函数(无论是 groupRenderer 或 renderer )将通过以下参数调用：

  • v : Object

    该组字段新值。

  • unused : undefined

    未使用的参数。

  • r : Ext.data.Record

    Record对象，为一行提供数据，此行导致了分组的改变。

  • rowIndex : Number

    导致分组改变的Record的行号。

  • colIndex : Number

    分组依据字段的列序号。

  • ds : Ext.data.Store

    提供数据Model的Store。

该函数应返回一个字符串值。

Column
groupable : Boolean
(可选)如果grid是被一个Ext.grid.GroupingView渲染，这个属性可以...
(可选)如果grid是被一个Ext.grid.GroupingView渲染，这个属性可以用来禁用表头菜单中根据字段分组功能。 默认值为true，使该列的表头菜单中有该选项。设置为false，表头菜单中的该选项被设为disable状态。 参见 groupName 。
Column
header : String
(可选)显示在网格视图头部作为标题文本的innerHTML(可以支持html标签)。注...
(可选)显示在网格视图头部作为标题文本的innerHTML(可以支持html标签)。注:有一个可点击的表头，没有没有文本显示使用' '。
Column
hidden : Boolean
(可选)设置为true，初始化时隐藏此列。默认值为 false。一个隐藏的列...
(可选)设置为true，初始化时隐藏此列。默认值为 false。一个隐藏的列通过标题菜单可能会显示。如果一列是永远不会被显示，那么在所有列中根本不包含此列模型。
Column
hideable : Boolean
(可选)设置为false，以防止用户隐藏该列(默认值为true)。在grid中为了不让...
(可选)设置为false，以防止用户隐藏该列(默认值为true)。在grid中为了不让所有的列隐藏，使用Ext.grid.GridPanel.enableColumnHide 代替。
Column
id : String
(可选)一个标识该列的名称(默认为该列的初始化依次位置)。该id是用来创建一个CSS样式的名字...
(可选)一个标识该列的名称(默认为该列的初始化依次位置)。 该id是用来创建一个CSS样式的名字，适用于所有表格的单元格(包括标题)，在这列(在这里id不需要独一无二)。 该类名采用的格式
x-grid3-td-id
表头单元格也将收到这类名字，但也有这类
x-grid3-hd
因此，针对表头单元格，使用CSS选择器，例如:
.x-grid3-hd-row .x-grid3-td-id
gird的Ext.grid.GridPanel.autoExpandColumn配置通过这种独特的标识选项引用该列。
Column
menuDisabled : Boolean
(可选)设置为true，禁用表头菜单。 默认值为false。
Column
renderer : Function
(可选)当该方法通过传递以下参数时，会返回可显示的数据:
(可选)当该方法通过传递以下参数时，会返回可显示的数据:
  • value : Object

    该单元格的数据值。

  • metadata : Object

    一个对象，您可以在其中设置以下属性:

    • css : String

      一个添加到该单元格的TD元素上的CSS样式名。

    • attr : String

      一个定义HTML属性的字符串，应用到数据容器内的表格单元格元素上(例如:'style="color:red;"')。

  • record : Ext.data.record

    从数据中提取的Ext.data.Record。

  • rowIndex : Number

    Row index

  • colIndex : Number

    Column index

  • store : Ext.data.Store

    从该Ext.data.Store对象中提取记录。

Column
resizable : Boolean
(可选)值为false的话，不能改变列的大小。默认值为true。
Column
scope : Object
(可选)在作用域(this 参考值)中执行渲染。默认值为Column配置对象。
Column
sortable : Boolean
(可选)设置为true，此列允许排序。默认值为Ext.grid.ColumnModel.defaultSortable 属性值...
(可选)设置为true，此列允许排序。默认值为Ext.grid.ColumnModel.defaultSortable 属性值。无论是本地/远程使用排序都是在 Ext.data.Store.remoteSort 中指定。
Column
tooltip : String
(可选)使用一个字符串文本作为列表头的提示语。如果已激活过Quicktips，这个值将被作为...
(可选)使用一个字符串文本作为列表头的提示语。如果已激活过Quicktips，这个值将被作为快速提示文本，否则将被设置为表头的HTML'title'属性。默认值为''。
Column
width : Number
(可选)该列的初始化宽度。如果有下列配置，每列的宽度也会受到影响...
(可选)该列的初始化宽度。如果有下列配置，每列的宽度也会受到影响:
  • Ext.grid.GridPanel. autoExpandColumn
  • Ext.grid.GridView. forceFit

    通过指定forceFit:true，non-fixed width网格的列将被重新均匀分布(基于关联初始宽度)，因此不会出现横向滚动条。

  • Ext.grid.GridView. autoFill
  • Ext.grid.GridPanel. minColumnWidth

    • 注:当确定了每列的宽度，会在右侧预留一个空间给垂直滚动条。该Ext.grid.GridView. scrollOffset 可以被修改，以减少或取消其保留部分。

Column
xtype : String
(可选)其中引用了一个String类型的预定义Ext.grid.Column子类和预先设定的一个...
(可选)其中引用了一个String类型的预定义Ext.grid.Column 子类和预先设定的一个适当的 renderer 可以很容易地成为ColumnModel的一个配置。预定义Ext.grid.Column子类的类型有：
  • gridcolumn : Ext.grid.Column ( 默认)

  • booleancolumn : Ext.grid.BooleanColumn

  • numbercolumn : Ext.grid.NumberColumn

  • datecolumn : Ext.grid.DateColumn

  • templatecolumn : Ext.grid.TemplateColumn

指定的 xtype 配置属性可以作为指定的Column的配置属性，例如:

var grid = new Ext.grid.GridPanel({
    ...
    columns: [{
        header: 'Last Updated',
        dataIndex: 'lastChange',
        width: 85,
        sortable: true,
        //renderer: Ext.util.Format.dateRenderer('m/d/Y'),
        xtype: 'datecolumn', // 使用xtype代替渲染器 use xtype instead of renderer
        format: 'M/d/Y' // configuration property for Ext.grid.DateColumn

    }, {
        ...
    }]
});
Column

公共属性

Property Defined By
renderer : Function
(可选)当该方法通过传递以下参数时，会返回可显示的数据:
(可选)当该方法通过传递以下参数时，会返回可显示的数据:
  • value : Object

    该单元格的数据值。

  • metadata : Object

    一个对象，您可以在其中设置以下属性:

    • css : String

      一个添加到该单元格的TD元素上的CSS样式名。

    • attr : String

      一个定义HTML属性的字符串，应用到数据容器内的表格单元格元素上(例如:'style="color:red;"')。

  • record : Ext.data.record

    从数据中提取的Ext.data.Record。

  • rowIndex : Number

    Row index

  • colIndex : Number

    Column index

  • store : Ext.data.Store

    从该Ext.data.Store对象中提取记录。

Column

公共方法

Method Defined By
getCellEditor ( Number rowIndex ) : Ext.Editor
返回一个为了包装编辑单元格列的Field而定义的editor。
返回一个为了包装编辑单元格列的Field而定义的editor。
参数:
  • rowIndex : Number
    The row index
返回值:
  • Ext.Editor
Column
setEditor ( Ext.Editor/Ext.form.Field editor ) : void
为该列设置一个新的编辑器。
为该列设置一个新的编辑器。
参数:
  • editor : Ext.Editor/Ext.form.Field
    The editor to set
返回值:
  • void
Column

公共事件

该类没有公共事件。


Observable
    ColumnModel
      PropertyColumnModel

Class Ext.grid.PropertyColumnModel

包: | Ext.grid
定义类的文件: | PropertyGrid.js
类: | PropertyColumnModel
继承自: | ColumnModel
Ext.grid.PropertyGrid 一个特殊的列模型。一般情况下不需要直接使用此类。

配置项

Config Options Defined By
columns : Array
一个对象字面量(literals)数组，Ext.grid.Column的config选项会出现...
一个对象字面量(literals)数组，Ext.grid.Column 的config选项会出现在每个列单独定义的对象字面量(literals)中。
ColumnModel
defaultSortable : Boolean
对没有指定是否可排序的列，使用的默认值(默认为false)...
对没有指定是否可排序的列，使用的默认值(默认为false)。该属性最好通过defaults 属性配置。
ColumnModel
defaultWidth : Number
列没有指定宽度时的默认宽度(默认值为100)这个属性最好通过...
列没有指定宽度时的默认宽度(默认值为100)这个属性最好通过defaults 属性配置。
ColumnModel
defaults : Object
该对象值将应用到所有列的Ext.grid.Column配置选项。其中column有指定过这些配置的将替代这些默认值。
该对象值将应用到所有列的Ext.grid.Column配置选项。其中column有指定过这些配置的将替代这些默认值。
ColumnModel
listeners : Object
一个包含一个或多个事件处理器的配置对象，会在初始化的时候被添加到目标对象上...

一个包含一个或多个事件处理器的配置对象，会在初始化的时候被添加到目标对象上。 该配置对象应该是一个有效的监听器配置对象就像 addListener例子中指定的一样可一次附加多个处理器。

ExtJs Components上的DOM事件

一些 ExtJs Component 类导出时会选择一些DOM事件(例如 "click", "mouseover" 等等), 这通常只是在有额外的值可以被添加时发生。例如DataView类的 click事件会传递被点击的节点。也可以直接在Component的HTMLElementevent上访问DOM事件，但必需在Component被渲染后监听器才能添加到Element 上。可以按照以下步骤添加插件:

// 插件会用一个监听器配置对象进行配置。
//该组件会被添加到所有处理方法的参数列表上。
Ext.DomObserver = Ext.extend(Object, {
    constructor: function(config) {
        this.listeners = config.listeners ? config.listeners : config;
    },

    // 组件将自己传递进了插件的初始化方法里
    init: function(c) {
        var p, l = this.listeners;
        for (p in l) {
            if (Ext.isFunction(l[p])) {
                l[p] = this.createHandler(l[p], c);
            } else {
                l[p].fn = this.createHandler(l[p].fn, c);
            }
        }

        // 渲染后立即添加监听器到元素上
        c.render = c.render.createSequence(function() {
            var e = c.getEl();
            if (e) {
                e.on(l);
            }
        });
    },

    createHandler: function(fn, c) {
        return function(e) {
            fn.call(this, e, c);
        };
    }
});

var combo = new Ext.form.ComboBox({

    // 元素被点击后折叠
    plugins: [ new Ext.DomObserver({
        click: function(evt, comp) {
            comp.collapse();
        }
    })],
    store: myStore,
    typeAhead: true,
    mode: 'local',
    triggerAction: 'all'
});

Observable

公共属性

Property |  | Defined By
 | config : Array ColumnModel的构造参数。见Ext.grid.Column的配置，可以配置的属性。 ColumnModel的构造参数。见Ext.grid.Column的配置，可以配置的属性。 | ColumnModel

公共方法

Method Defined By
PropertyColumnModel ( Ext.grid.Grid grid , Object source )
参数:
  • grid : Ext.grid.Grid
    将会绑定当前store的grid
  • source : Object
    数据源配置对象
返回值:
  • void
PropertyColumnModel
addEvents( Object|String o, string Optional. ) : void
添加指定的事件到事件列表上，事件会被该Observable触发。
添加指定的事件到事件列表上，事件会被该Observable触发。
参数:
  • o : Object|String
    以事件名作为属性true作为值的对象 或者当多个事件名被分开的传递时则为第一个事件名。
  • Optional. : string
    事件名被分开的传递时则为事件名。 用法:
    this.addEvents('storeloaded', 'storecleared');
返回值:
  • void
Observable
addListener( String eventName, Function handler, [Object scope], [Object options] ) : void
给对象添加事件处理器。
给对象添加事件处理器。
参数:
  • eventName : String
    监听的事件名。
  • handler : Function
    事件调用的方法
  • scope : Object
    （可选）处理方法执行的作用域 (this的引用 reference)。 如果被忽略。默认为触发事件的对象。
  • options : Object
    （可选）包含处理器配置和属性的对象。 可能包含以下的属性:
    • scope : Object
      处理方法执行的作用域(this的引用) 。 如果被忽略。默认为触发事件的对象。
    • delay : Number
      在触发事件后延迟调用处理器的毫秒数。
    • single : Boolean
      如果为True则添加一个处理器来处理下一次的事件触发（仅一次），然后移除自己。
    • buffer : Number
      使得处理器延迟指定毫秒数后预定的运行在 一个Ext.util.DelayedTask中 。 如果事件在时间内再一次被触发，原始的处理器不会被调用，但是新的处理器会预定的在他的位置上。
    • target : Observable
      如果事件在目标的Observable上触发则仅仅调用处理器， 否则 事件会从子类的Observable上冒泡

    组合选项
    使用这些选项参数,可能会组合出不同类型的监听器：

    一个延迟的，一次性的监听器。

    myDataView.on('click', this.onClick, this, {
single: true,
delay: 100
});

    一次调用附加多个处理器
    该方法同样支持传递一个包含指定的多个处理器的属性的配置对象参数。

    myGridPanel.on({
'click' : {
    fn: this.onClick,
    scope: this,
    delay: 100
},
'mouseover' : {
    fn: this.onMouseOver,
    scope: this
},
'mouseout' : {
    fn: this.onMouseOut,
    scope: this
}
});

    或者一个简写的语法：

    myGridPanel.on({
'click' : this.onClick,
'mouseover' : this.onMouseOver,
'mouseout' : this.onMouseOut,
 scope: this
});
返回值:
  • void
Observable
destroy () : void
销毁此列模型清除所有事件侦听器，并删除任何编辑。
销毁此列模型清除所有事件侦听器，并删除任何编辑。
参数:
  • 无。
返回值:
  • void
ColumnModel
enableBubble( String/Array events ) :void
是否现在使得事件会被该Observable触发并调用 this.getBubbleTarget()方法在拥有者的继承树...

是否现在使得事件会被该Observable触发并调用 this.getBubbleTarget()方法在拥有者的继承树中冒泡。Observable的基础类中没有该方法的实现。

该方法一般被Ext.Components用来冒泡事件到拥有者的容器。参看Ext.Component.getBubbleTarget默认的实现 在Ext.Component中返回组件的直接拥有者。但是如果需要的是一个已知的目标，该方法可以被重写来更快的访问需求的目标。

例子:

Ext.override(Ext.form.Field, {
    // 添加方法到Field的initComponent上改变事件为冒泡
    initComponent : Ext.form.Field.prototype.initComponent.createSequence(function() {
        this.enableBubble('change');
    }),

    // 我们知道我们想让Field的事件冒泡到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() {
            // 如果样式被修改标题会变红。
            myForm.header.setStyle('color', 'red');
        }
    }
});
参数:
  • events : String/Array
    冒泡的事件名，或事件名数组
返回值:
  • void
Observable
findColumnIndex ( String col ) : Number
根据指定的dataIndex，找到第一个匹配的列的序号。
根据指定的dataIndex，找到第一个匹配的列的序号。
参数:
  • col : String
    要查找的dataIndex
返回值:
  • Number
    列索引，所以没有找到，返回-1
ColumnModel
fireEvent( String eventName, Object... args ) : Boolean
用传入的参数触发指定的事件 (减去事件名)。 一个事件可以被设置为冒泡 Obse...

用传入的参数触发指定的事件 (减去事件名)。

一个事件可以被设置为冒泡到Observable父类继承树(参看 Ext.Component.getBubbleTarget) 调用enableBubble实现。

参数:
  • eventName : String
    触发的事件名。
  • args : Object...
    传递给处理器的可变长度参数。
返回值:
  • Boolean
    如果有任何的处理器返回false则返回false，否则返回true。
Observable
getCellEditor ( Number colIndex , Number rowIndex ) : Ext.Editor
返回单元格/column所定义的编辑器。
返回单元格/column所定义的编辑器。
参数:
  • colIndex : Number
    列索引
  • rowIndex : Number
    行索引
返回值:
  • Ext.Editor
    Ext.Editor创建来用于编辑单元格的Ext.form.Field
ColumnModel
getColumnById ( String id ) : Object
根据指定的id，返回列。
根据指定的id，返回列。
参数:
  • id : String
    The column id
返回值:
  • Object
    the column
ColumnModel
getColumnCount ( Boolean visibleOnly ) : Number
返回总列数。
返回总列数。
参数:
  • visibleOnly : Boolean
    (可选)值为true不包含隐藏的列。
返回值:
  • Number
ColumnModel
getColumnHeader ( Number col ) : String
返回指定列的头部(header)。
返回指定列的头部(header)。
参数:
  • col : Number
    The column index
返回值:
  • String
ColumnModel
getColumnId ( Number index ) : String
返回指定索引的列id。
返回指定索引的列id。
参数:
  • index : Number
    The column index
返回值:
  • String
    the id
ColumnModel
getColumnTooltip ( Number col ) : String
返回指定列的tooltip。
返回指定列的tooltip。
参数:
  • col : Number
    The column index
返回值:
  • String
ColumnModel
getColumnWidth ( Number col ) : Number
返回指定列的宽度。
返回指定列的宽度。
参数:
  • col : Number
    列索引
返回值:
  • Number
ColumnModel
getColumnsBy ( Function fn , [ Object scope ] ) : Array
如果传递进来的函数调用后返回true，则返回column的配置数据，传递进来函数的的参数...
如果传递进来的函数调用后返回true，则返回column的配置数据，传递进来函数的的参数格式(columnConfig, index)

// 返回一个所有隐藏的列的配置对象数组
var columns = grid.getColumnModel().getColumnsBy(function(c){
  return c.hidden;
});
参数:
  • fn : Function
    一个函数，传入一个Column对象， 必须返回true，才会返回一个包含column对象的数组。
  • scope : Object
    (可选) 该函数被执行时(this)的作用域范围。 这里默认值为ColumnModel。
返回值:
  • Array
    result
ColumnModel
getDataIndex ( Number col ) : String
返回指定列的dataIndex。
返回指定列的dataIndex。

// Get field name for the column
var fieldName = grid.getColumnModel().getDataIndex(columnIndex);
参数:
  • col : Number
    The column index
返回值:
  • String
    The column's dataIndex
ColumnModel
getIndexById ( String id ) : Number
根据指定的id，返回列的索引编号。
根据指定的id，返回列的索引编号。
参数:
  • id : String
    The column id
返回值:
  • Number
    索引，如果没有找到则返回-1
ColumnModel
getRenderer ( Number col ) : Function
返回为列渲染(格式化)定义的函数。
返回为列渲染(格式化)定义的函数。
参数:
  • col : Number
    该列的索引。
返回值:
  • Function
    该函数用于展现单元格。见 {@link #setRenderer}。
ColumnModel
getTotalWidth ( Boolean includeHidden ) : Number
返回所有列的总宽度。
返回所有列的总宽度。
参数:
  • includeHidden : Boolean
    值为true的话，包括隐藏的列的宽度
返回值:
  • Number
ColumnModel
hasListener( String eventName ) : Boolean
检测对象是否包含指定事件的任何监听器
检测对象是否包含指定事件的任何监听器
参数:
  • eventName : String
    检测的事件名
返回值:
  • Boolean
    如果事件被监听则为true，否则为false
Observable
isCellEditable ( Number colIndex , Number rowIndex ) : Boolean
如果单元格可编辑，返回true。
如果单元格可编辑，返回true。

var store = new Ext.data.Store({...});
var colModel = new Ext.grid.ColumnModel({
  columns: [...],
  isCellEditable: function(col, row) {
    var record = store.getAt(row);
    if (record.get('readonly')) { // replace with your condition
      return false;
    }
    return Ext.grid.ColumnModel.prototype.isCellEditable.call(this, col, row);
  }
});
var grid = new Ext.grid.GridPanel({
  store: store,
  colModel: colModel,
  ...
});
参数:
  • colIndex : Number
    列索引
  • rowIndex : Number
    行索引
返回值:
  • Boolean
ColumnModel
isFixed ( Number colIndex ) : Boolean
如果列是固定(fixed )的返回true，否则为false。
如果列是固定(fixed )的返回true，否则为false。
参数:
  • colIndex : Number
    列索引
返回值:
  • Boolean
ColumnModel
isHidden ( Number colIndex ) : Boolean
返回true表示该列是隐藏的，否则返回false。
返回true表示该列是隐藏的，否则返回false。
参数:
  • colIndex : Number
    列索引
返回值:
  • Boolean
ColumnModel
isMenuDisabled ( Number col ) : Boolean
如果指定列的菜单（译者注：指列表头的下拉菜单）被禁用，返回true。
如果指定列的菜单（译者注：指列表头的下拉菜单）被禁用，返回true。
参数:
  • col : Number
    列索引
返回值:
  • Boolean
ColumnModel
isResizable () : Boolean
返回true表示列的大小可以调整
返回true表示列的大小可以调整
参数:
  • 无。
返回值:
  • Boolean
ColumnModel
isSortable ( Number col ) : Boolean
如果指定的列是可排序的，返回true。
如果指定的列是可排序的，返回true。
参数:
  • col : Number
    The column index
返回值:
  • Boolean
ColumnModel
moveColumn ( Number oldIndex , Number newIndex ) : void
将一列从一个位置移动到另一个位置。
将一列从一个位置移动到另一个位置。
参数:
  • oldIndex : Number
    将要移动的列索引。
  • newIndex : Number
    目标位置列索引。
返回值:
  • void
ColumnModel
on( String eventName, Function handler, [Object scope], [Object options] ) : void
给对象添加事件处理器 (addListener的简写形式)
给对象添加事件处理器 (addListener的简写形式。)
参数:
  • eventName : String
    监听的事件类型
  • handler : Function
    事件调用的方法
  • scope : Object
    （可选）处理方法执行时的作用域 (this 的引用)。 如果被忽略。默认为触发事件的对象。
  • options : Object
    可选 包含处理器配置的对象。
返回值:
  • void
Observable
purgeListeners() : void
移除对象上所有的监听器
移除对象上所有的监听器
参数:
  • 无。
返回值:
  • void
Observable
relayEvents( Object o, Array events ) : void
从指定的Observable上传递选择的事件就好像被当前对象触发一样。
从指定的Observable上传递选择的事件就好像被当前对象触发一样。
参数:
  • o : Object
    该Observable上的事件被当前对象传递。
  • events : Array
    传递的数组名。
返回值:
  • void
Observable
removeListener( String eventName, Function handler, [Object scope] ) : void
删除一个事件处理器。
删除一个事件处理器。
参数:
  • eventName : String
    处理器关联的事件类型。
  • handler : Function
    移除的处理器。 这应该是传递到addListener里的方法的引用。
  • scope : Object
    （可选）处理器指定的初始作用域。
返回值:
  • void
Observable
resumeEvents() : void
重新开始触发事件。(参见suspendEvents) 如果事件以queueSuspended参数被挂起，则在事件被挂起时 ...
重新开始触发事件。(参见 suspendEvents) 如果事件以queueSuspended 参数被挂起，则在事件被挂起时触发的事件会被传递到所有的监听器上
参数:
  • 无。
返回值:
  • void
Observable
setColumnHeader ( Number col , String header ) : void
设置列的表头(header)。
设置列的表头(header)。
参数:
  • col : Number
    列索引
  • header : String
    The new header
返回值:
  • void
ColumnModel
setColumnTooltip ( Number col , String tooltip ) : void
设置列的提示语(tooltip)。
设置列的提示语(tooltip)。
参数:
  • col : Number
    The column index
  • tooltip : String
    The new tooltip
返回值:
  • void
ColumnModel
setColumnWidth ( Number col , Number width , Boolean suppressEvent ) : void
设置一列的宽度。
设置一列的宽度。
参数:
  • col : Number
    列索引
  • width : Number
    新的宽度值
  • suppressEvent : Boolean
    设置为true，不触发widthchange 事件。默认值为false。
返回值:
  • void
ColumnModel
setConfig ( Array config , Boolean initial ) : void
通过传递进来的数据，重新配置列模型。对于每个列对象的属性配置...

通过传递进来的数据，重新配置列模型。对于每个列对象的属性配置，请参看Config Options。

会触发configchange事件。 GridPanel使用'configchange'事件来监听ColumnModel，并自动更新其界面。

参数:
  • config : Array
    定义Column的对象数组。
  • initial : Boolean
    设置为true不删除totalWidth和不销毁现有的编辑。
返回值:
  • void
ColumnModel
setDataIndex ( Number col , String dataIndex ) : void
设置列的数据索引。
设置列的数据索引。
参数:
  • col : Number
    列索引
  • dataIndex : String
    新的数据索引
返回值:
  • void
ColumnModel
setEditable ( Number col , Boolean editable ) : void
设置列是否可编辑。
设置列是否可编辑。
参数:
  • col : Number
    列索引
  • editable : Boolean
    如果值为true表示可编辑
返回值:
  • void
ColumnModel
setEditor ( Number col , Object editor ) : void
设置一列的编辑器，并销毁之前的编辑器。
设置一列的编辑器，并销毁之前的编辑器。
参数:
  • col : Number
    列索引
  • editor : Object
    编辑器对象
返回值:
  • void
ColumnModel
setHidden ( Number colIndex , Boolean hidden ) : void
设置是否隐藏一列。
设置是否隐藏一列。
myGrid.getColumnModel().setHidden(0, true); // hide column 0 (0 = 第一列).
参数:
  • colIndex : Number
    列索引
  • hidden : Boolean
    true为隐藏该列
返回值:
  • void
ColumnModel
setRenderer ( Number col , Function fn ) : void
设置这一列的渲染(格式)函数。见Ext.util.Format中一些默认的格式化函数。
设置这一列的渲染(格式)函数。见Ext.util.Format中一些默认的格式化函数。
参数:
  • col : Number
    The column index
  • fn : Function
    该函数用来处理单元格中的原始数据，之后返回HTML标签给grid视图。 渲染函数将会被以如下的参数格式调用:
    • value : Object

      单元格的数据值

    • metadata : Object

      一个对象，你可以设置以下属性：

      • css : String

        添加到该单元格的TD元素中的CSS类名。

      • attr : String

        一个用来定义HTML标签属性的字符串，将被用到单元格内的数据容器元素上(例如:'style="color:red;"')。

    • record : Ext.data.record

      从数据中提取的Ext.data.Record对象。

    • rowIndex : Number

      行索引

    • colIndex : Number

      列索引

    • store : Ext.data.Store

      Ext.data.Store对象，可以从中提取Record。

返回值:
  • void
ColumnModel
suspendEvents( Boolean queueSuspended ) : void
暂停触发所有的事件。 (参看resumeEvents)
暂停触发所有的事件。（参看 resumeEvents)
参数:
  • queueSuspended : Boolean
    如果传递为true则排列好暂停的事件使得在调用 resumeEvents 后再触发它们，而不是抛弃所有暂停的事件。
返回值:
  • void
Observable
un( String eventName, Function handler, [Object scope] ) : void
删除一个事件处理器(removeListener方法的简写形式)
删除一个事件处理器(removeListener方法的简写形式。)
参数:
  • eventName : String
    处理器关联的事件类型
  • handler : Function
    被删除的处理器 这应该是传入 addListener 中的方法的引用。
  • scope : Object
    （可选）为处理器指定的初始作用域。
返回值:
  • void
Observable

公共事件

Event Defined By
columnmoved : ( ColumnModel this , Number oldIndex , Number newIndex )
当移动一列时触发。
当移动一列时触发。
监听器将会以如下的参数格式调用:
  • this : ColumnModel
  • oldIndex : Number
  • newIndex : Number
ColumnModel
configchange : ( ColumnModel this )
当配置发生改变时触发。
当配置发生改变时触发。
监听器将会以如下的参数格式调用:
  • this : ColumnModel
ColumnModel
headerchange : ( ColumnModel this , Number columnIndex , String newText )
列的表头文字被改变时触发。
列的表头文字被改变时触发。
监听器将会以如下的参数格式调用:
  • this : ColumnModel
  • columnIndex : Number
    The column index
  • newText : String
    The new header text
ColumnModel
hiddenchange : ( ColumnModel this , Number columnIndex , Boolean hidden )
当某一列隐藏或"反隐藏"时触发。
当某一列隐藏或"反隐藏"时触发。
监听器将会以如下的参数格式调用:
  • this : ColumnModel
  • columnIndex : Number
    列索引
  • hidden : Boolean
    true为隐藏，否则为false
ColumnModel
widthchange : ( ColumnModel this , Number columnIndex , Number newWidth )
当一列使用setColumnWidth方法改变宽度时触发。注意从内部调整...
当一列使用setColumnWidth方法改变宽度时触发。注意从内部调整大小不会触发该事件。参见Ext.grid.GridPanel.columnresize 。
监听器将会以如下的参数格式调用:
  • this : ColumnModel
  • columnIndex : Number
    The column index
  • newWidth : Number
    The new width
ColumnModel


Observable
    Component
      BoxComponent
        Container
          Panel
            GridPanel
              EditorGridPanel
                PropertyGrid

Class Ext.grid.PropertyGrid

包: | Ext.grid
定义类的文件: | PropertyGrid.js
类: | PropertyGrid
继承自: | EditorGridPanel
一个特殊的grid实现类， 被设计用来模仿传统的属性grid，就像在IDE里面看到的那种典型的property grid一样。 grid中的每行数据都表示某个对象的一种属性，数据以键/值对集合的形式被存储在 Ext.grid.PropertyRecord中。 示例用法:
var grid = new Ext.grid.PropertyGrid({
    title: 'Properties Grid',
    autoHeight: true,
    width: 300,
    renderTo: 'grid-ct',
    source: {
        "(name)": "My Object",
        "Created": new Date(Date.parse('10/15/2006')),
        "Available": false,
        "Version": .01,
        "Description": "A test object"
    }
});

配置项

Config Options Defined By
anchor : String
注: 这个配置只用于该组件被包含在一个已使用AnchorLayout...

注: 这个配置只用于该组件被包含在一个已使用 AnchorLayout (或者其子类)配置的Container时。 基于布局管理器，例如：

  • Ext.form.FormPanel
  • 指定 layout: 'anchor' // or 'form', or 'absolute'

参见 Ext.layout.AnchorLayout. anchor 。

BoxComponent
animCollapse : Boolean
true将会在panel被折叠时使用动画效果，false将会跳过动画效果....
true 将会在panel被折叠时使用动画效果， false 将会跳过动画效果( 如果Ext.Fx类 有效，默认为 true ，否则为 false )。
Panel
autoEncode : Boolean
设置为true将对输入的值自动进行HTML编码和解码(默认值为false)
EditorGridPanel
autoExpandColumn : String
The id of a column in this grid that should expand to fill unused space. This value specified here can not be 0. Note...

The id of a column in this grid that should expand to fill unused space. This value specified here can not be 0.

Note: If the Grid's view is configured with forceFit=true the autoExpandColumn is ignored. See Ext.grid.Column. width for additional details.

See autoExpandMax and autoExpandMin also.

GridPanel
autoExpandMax : Number
The maximum width the autoExpandColumn can have (if enabled). Defaults to 1000.
GridPanel
autoExpandMin : Number
The minimum width the autoExpandColumn can have (if enabled). Defaults to 50.
GridPanel
autoHeight : Boolean
如果值为true，height配置项为'auto'，否则值为false的话使用固定的高度...

如果值为true，height配置项为'auto'，否则值为false的话使用固定的高度， 或者可以由其父类容器 layout manager来控制。(默认值为 false)。

注: 虽然很多组件继承了这个配置选项，但不是所有这些组件的自适应高度配置都会像期望的那样起作用。 设置autoHeight：值为true时，浏览器将根据元素的内容自动设置高度，这将意味着Ext不会去管理高度。

如果是由浏览器来管理高度，需要注意的是，通过浏览器进行调整的结构组件内不能被发现， 因此宽度的变化可能导致需要进行同步处理元素的高度。 例如：

var w = new Ext.Window({
    title: 'Window',
    width: 600,
    autoHeight: true,
    items: {
        title: 'Collapse Me',
        height: 400,
        collapsible: true,
        border: false,
        listeners: {
            beforecollapse: function() {
                w.el.shadow.hide();
            },
            beforeexpand: function() {
                w.el.shadow.hide();
            },
            collapse: function() {
                w.syncShadow();
            },
            expand: function() {
                w.syncShadow();
            }
        }
    }
}).show();
Panel
autoShow : Boolean
如果组件需要检测隐藏CSS属性(如 'x-hidden' 或者 'x-hide-display')并且在渲染时删除...
如果组件需要检测隐藏CSS属性(如 'x-hidden' 或者 'x-hide-display')并且在渲染时删除它们 (默认为false)，设置此值为true。
Component
baseCls : String
应用到当前panel元素上的基本CSS类(默认为 'x-panel' )...
应用到当前panel元素上的基本CSS类(默认为 'x-panel' )。

另一个可选的默认变量是指定 'x-plain' ，它将去掉所有样式，除了Ext布局功能所必须的属性 (例如overflow:hidden)。另请参见 unstyled 。

Panel
bbar : Object/Array
panel底部工具栏。 此参数可以是一个Ext.Toolbar 、一个工具栏配置项，或者一个buttons/button配置数组---用来被添加到工具栏中...

panel底部工具栏。 此参数可以是一个Ext.Toolbar 、一个工具栏配置项，或者一个buttons/button配置数组---用来被添加到工具栏中。 注意，此参数在渲染之后是无效的。如果在渲染之后需要访问底部工具栏 ，请使用 getBottomToolbar。

注意:尽管Toolbar可以包含Field组件，但它们不会 通过加载祖先FormPanel而被更新。Panel的工具栏不是标准Container->Component 层次的一部分，所以它们不会被扫面以收集表单项。但是，这些值还是会 被提交，因为提交表单的参数是从DOM树中收集的。

Panel
bbarCfg : Object
一个 ADomHelper 元素的配置对象，描述了当前Panelbbar元素的结构...

一个DomHelper 元素的配置对象，描述了当前Panel的bbar元素结构。 另请参见 bodyCfg 。

Panel
bodyCfg : Object
一个DomHelper 元素描述对象，可以被指定给任何Panel Element...

一个DomHelper 元素描述对象，可以被指定给任何Panel Element.

默认情况下，以下表格中的Default元素将会被用作html标签，用来创建一个子元素 ，与Default类名相匹配( baseCls 将会被 baseCls 替换 ):

Panel      Default  Default             Custom      Additional       Additional
Element    element  class               element     class            style
========   ==========================   =========   ==============   ===========
header     div      baseCls+'-header'   headerCfg   headerCssClass   headerStyle
bwrap      div      baseCls+'-bwrap'     bwrapCfg    bwrapCssClass    bwrapStyle
+ tbar     div      baseCls+'-tbar'       tbarCfg     tbarCssClass     tbarStyle
+ body     div      baseCls+'-body'       bodyCfg     bodyCssClass     bodyStyle
+ bbar     div      baseCls+'-bbar'       bbarCfg     bbarCssClass     bbarStyle
+ footer   div      baseCls+'-footer'   footerCfg   footerCssClass   footerStyle

例如，配置一个自定义的元素，用来强制 body 元素使用不同形式的标签，而不是使用默认创建的。 这种情况的一个例子可能是 创建一个子 Panel，包含自定义的内容，例如header，或者通过使body拥有一个<center> 元素， 从而强制Panel中的所有内容居中:

new Ext.Panel({
    title: 'Message Title',
    renderTo: Ext.getBody(),
    width: 200, height: 130,
    bodyCfg: {
        tag: 'center',
        cls: 'x-panel-body',  // Default class not applied if Custom element specified
        html: 'Message'
    },
    footerCfg: {
        tag: 'h2',
        cls: 'x-panel-footer'        // same as the Default class
        html: 'footer html'
    },
    footerCssClass: 'custom-footer', // additional css class, see addClass

    footerStyle:    'background-color:red' // see bodyStyle

});

以上例子也显式创建了一个 footer ，拥有自定义的标签和样式。

Panel
bodyCssClass : String/Object/Function
可选的CSS类选择器，被应用到body 元素上，其格式为Ext.Element.addClass所 期望的值(默认为null)...
可选的CSS类选择器，被应用到body 元素上，其格式为Ext.Element.addClass所 期望的值(默认为null)。参见 bodyCfg.
Panel
border : Boolean
True将会显示panel body元素的边框，false将会隐藏它们 (默认为true)。默认情况下，边框是一个2px宽度的内嵌边框...
True将会显示panel body元素的边框，false将会隐藏它们 (默认为true)。默认情况下，边框是一个2px宽度的内嵌边框， 但是，以后可以通过设置bodyBorder 为false以改变它。
Panel
boxMaxHeight : Number
设置组件的最大高度值...

设置组件的最大高度值。

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

BoxComponent
boxMaxWidth : Number
设置组件的最大宽度值...

设置组件的最大宽度值。

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

BoxComponent
boxMinHeight : Number
设置组件的最小高度值...

设置组件的最小高度值。

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

BoxComponent
boxMinWidth : Number
设置组件的最小宽度值...

设置组件的最小宽度值。

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

BoxComponent
bubbleEvents : Array
一个事件数组，当这些事件被触发时，将会被冒泡到所有父容器中。参见....

一个事件数组，当这些事件被触发时，将会被冒泡到所有父容器中。参见 Ext.util.Observable.enableBubble。 默认为 []。

GridPanel
buttonAlign : String
添加到当前panel的所有 buttons 的对齐方式。 合法的值有...
添加到当前panel的所有 buttons 的对齐方式。 合法的值有 'right' , 'left' 和 'center' (默认为 'right' )。
Panel
buttons : Array
Panel的按钮数组，它们从 buttons 配置属性创建。只读。
Panel
bwrapCfg : Object
一个DomHelper 元素描述对象，描述了当前Panel的 bwrap 的元素的结构...

一个DomHelper 元素描述对象，描述了当前Panel的 bwrap 的元素的结构。另请参见 bodyCfg 。

Panel
clearCls : String
应用到特殊的clearing div的CSS类， 这个clearing div直接渲染到每个form field的包装器后面...

应用到特殊的clearing div的CSS类， 这个clearing div直接渲染到每个form field的包装器后面，以提供 清除field的功能(默认为 'x-form-clear-left')。

注意: 只有在当前组件被渲染到一个使用FormLayout 布局(例如 Ext.form.FormPanel 或者指定 layout:'form')的 容器中、或者是指定了一个fieldLabel 、或者指定isFormField=true 时此配置才有效。

另请参见 Ext.layout.FormLayout. fieldTpl。

Component
clicksToEdit : Number
转换单元格为编辑状态所需要点击的次数(默认值为2)...

转换单元格为编辑状态所需要点击的次数(默认值为2)。

设置值为'auto'时，当鼠标点击所选单元格就转换为开始编辑状态。

EditorGridPanel
closable : Boolean
Panel自身不支持关闭操作，但是Panel的一些子类 (例如Ext.Window) ，或者处于Ext.TabPanel中的 Panel支持...
Panel自身不支持关闭操作，但是Panel的一些子类 (例如Ext.Window) ，或者处于Ext.TabPanel中的 Panel支持。 指定此参数为 true 可以在这些情况下启用关闭。默认为 false 。
Panel
cls : String
一个可选的额外CSS类，它将被添加到当前组件的元素上(默认为'')...
一个可选的额外CSS类，它将被添加到当前组件的元素上(默认为'')。 此属性对于在组件上，或者它的任何使用标准CSS规则的孩子节点上， 添加定制的样式非常有用。
Component
cm : Object
Shorthand for colModel .
GridPanel
colModel : Object
The Ext.grid.ColumnModel to use when rendering the grid (required).
GridPanel
collapseFirst : Boolean
将会确保折叠/展开(collapse/expand)按钮总是被渲染在第一个位置...
true 将会确保折叠/展开(collapse/expand)按钮总是被渲染在第一个位置， 在panel顶部的工具栏中位于任何其它工具左侧， false 将会把它渲染在最后(默认为 true )。
Panel
collapsed : Boolean
如果当前panel被折叠为true。只读。
Panel
collapsedCls : String
在被折叠后，一个被添加到panel元素上的CSS类 (默认为 'x-panel-collapsed' )。
Panel
collapsible : Boolean
True将会使panel折叠并且会自动把展开/折叠(expand/collapse)按钮渲染到顶部...
True将会使panel折叠并且会自动把展开/折叠 (expand/collapse)按钮渲染到顶部工具按钮区域，false将 保持panel尺寸固定，没有按钮(默认为false)。
Panel
columnLines : Boolean
true to add css for column separation lines. Default is false.
GridPanel
columns : Array
An array of columns to auto create a Ext.grid.ColumnModel. The ColumnModel may be explicitly created via the colMode...
An array of columns to auto create a Ext.grid.ColumnModel. The ColumnModel may be explicitly created via the colModel configuration property.
GridPanel
ctCls : String
一个可选的外部CSS样式，添加到这个组件的容器(默认值为 '')。 这个方法对于使用标准的CSS规则...

一个可选的外部CSS样式，添加到这个组件的容器(默认值为 '')。 这个方法对于使用标准的CSS规则，为组件或它的任何一个子组件添加特定的样式非常有用。 参见 Ext.layout.ContainerLayout和 extraCls 。

注意: ctCls 默认为 ''期望如下的类，它们将指定一个默认值:

  • Box Layout : 'x-box-layout-ct'
使用一个额外的CSS类配置以上的Class，它是append到默认对象上的。例如， 对于BoxLayout (Hbox and Vbox):
                                ctCls: 'x-box-layout-ct custom-class'

Component
customEditors : Object
一个包含键值对(name/value)的对象，用于定义定制化的编辑器类型...
一个包含键值对(name/value)的对象，用于 定义自定义的编辑器类型， 以允许grid支持额外的可编辑输入栏。 默认情况下，grid使用内建的表单编辑器 支持强类型的编辑：string、date、number 和boolean，但是通过将一个自定义的编辑器关联到一个自定义的输入栏， 可以支持任何自定义的类型。 编辑器的类型名必须与使用编辑器的属性名相一致。 示例用法:
var grid = new Ext.grid.PropertyGrid({
    ...
    customEditors: {
        'Start Time': new Ext.grid.GridEditor(new Ext.form.TimeField({selectOnFocus:true}))
    },
    source: {
        'Start Time': '10:00 AM'
    }
});
PropertyGrid
customRenderers : Object
一个包含键值对(name/value)的定制渲染器类型定义，它使grid的字段能够支持定制的渲染器。
一个包含键值对(name/value)的定制渲染器类型定义，它使grid的字段能够支持定制的渲染器。默认情况下，grid使用内置的表单编辑器， 它支持对strings, dates, numbers and booleans的渲染，但任何定制的类型都必须支持并且与该类型的值相关联。 渲染器类型名称应该与将要渲染的属性名保持一致. 用法示例:
var grid = new Ext.grid.PropertyGrid({
    ...
    customRenderers: {
        Available: function(v){
            if(v){
                return '"color: green;">Yes';
            }else{
                return '"color: red;">No';
            }
        }
    },
    source: {
        Available: true
    }
});
PropertyGrid
data : Mixed
初始化数据集，它将被应用到 tpl 上以刷新组件的内容区域。
Component
ddGroup : String
The DD group this GridPanel belongs to. Defaults to 'GridDD' if not specified.
GridPanel
ddText : String
Configures the text in the drag proxy. Defaults to: ddText : '{0} selected row{1}' {0} is replaced with the number o...
Configures the text in the drag proxy. Defaults to:
                                ddText : '{0} selected row{1}'
{0} is replaced with the number of selected rows.
GridPanel
deferRowRender : Boolean
Defaults to true to enable deferred row rendering. This allows the GridPanel to be initially rendered empty, with the...

Defaults to true to enable deferred row rendering.

This allows the GridPanel to be initially rendered empty, with the expensive update of the row structure deferred so that layouts with GridPanels appear more quickly.

GridPanel
disableSelection : Boolean

true to disable selections in the grid. Defaults to false.

Ignored if a SelectionModel is specified.

GridPanel
disabled : Boolean
当前组件处于无效状态时为true。 Read-only.
Panel
draggable : Boolean/Object
true 可以让当前panel启用拖拽操作(默认为 false )...

true 可以让当前panel启用拖拽操作(默认为 false )。

如需自定义的drag/drop实现，也可以向此配置项传递一个 Ext.Panel.DD配置替代 true 。 Ext.Panel.DD是一个内部没有文档化的类，它在周围移动代理元素 代替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();
Panel
enableColumnHide : Boolean
Defaults to true to enable hiding of columns with the header menu.
GridPanel
enableColumnMove : Boolean
Defaults to true to enable drag and drop reorder of columns. false to turn off column reordering via drag drop.
GridPanel
enableColumnResize : Boolean
false to turn off column resizing for the whole grid. Defaults to true.
GridPanel
enableDragDrop : Boolean
Enables dragging of the selected rows of the GridPanel. Defaults to false. Setting this to true causes this GridPanel...

Enables dragging of the selected rows of the GridPanel. Defaults to false.

Setting this to true causes this GridPanel's GridView to create an instance of Ext.grid.GridDragZone. Note: this is available only after the Grid has been rendered as the GridView's dragZone property.

A cooperating DropZone must be created who's implementations of onNodeEnter, onNodeOver, onNodeOut and onNodeDrop are able to process the data which is provided.

GridPanel
enableHdMenu : Boolean
Defaults to true to enable the drop down button for menu in the headers.
GridPanel
fbar : Object/Array
一个Toolbar 对象、一个Toolbar配置项，或者一个Buttons/ Button 配置数组，...

一个Toolbar 对象、一个Toolbar配置项，或者一个Buttons/ Button 配置数组，它们描述了一个被添加到当前Panel底部元素的 Toolbar.

在渲染后， fbar 将会为一个Toolbar 实例。

如果指定了 buttons ，它们将替代 fbar 配置项。

Panel的 buttonAlign 配置项目将会影响这些项目的布局，例如:
var w = new Ext.Window({
    height: 250,
    width: 500,
    bbar: new Ext.Toolbar({
        items: [{
            text: 'bbar Left'
        },'->',{
            text: 'bbar Right'
        }]
    }),
    buttonAlign: 'left', // anything but 'center' or 'right' and you can use '-', and '->'

                                  // to control the alignment of fbar items
    fbar: [{
        text: 'fbar Left'
    },'->',{
        text: 'fbar Right'
    }]
}).show();

注意:尽管Toolbar可以包含Field组件，但它们不会 通过加载祖先FormPanel而被更新。Panel的工具栏不是标准Container->Component 层次的一部分，所以它们不会被扫面以收集表单项。但是，这些值还是会 被提交，因为提交表单的参数是从DOM树中收集的。

Panel
fieldLabel : String
紧靠此field显示的标签文本(默认值为 '')。注意...

紧靠此field显示的标签文本(默认值为 '')。

注意:只有在当前组件被渲染到一个使用FormLayout 的容器中时，此配置才有效。 (例如 Ext.form.FormPanel 或 指定 layout:'form')。

另请参见 hideLabel 、 Ext.layout.FormLayout和 fieldTpl。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Name'
    }]
});
Component
flex : Number
注: 这个配置只用于该组件被包含在一个已使用BoxLayout配置的Container中时...

注: 这个配置只用于该组件被包含在一个已使用BoxLayout配置的Container中时。通过计算每一个子组件的flex值所占全部flex值之和的比例，来决定子组件的宽(HBoxLayout)高(VBoxlayout)。 任何子项的 flex = 0 或 flex = undefined 将不被设置(初始值大小将不被改变)。

BoxComponent
floating : Mixed
此参数被用来配置底层的 Ext.Layer. 此配置参数可接受的值有...

此参数被用来配置底层的 Ext.Layer. 此配置参数可接受的值有:

  • false : 默认。
    在渲染的地方以内嵌的方式显示panel.
  • true :
    浮动panel (绝对定位，有自动衬垫和阴影)。
      设置floating为true将会为当前panel创建一个Ext.Layer 并且在负值偏移量处显示panel，这样它就是隐藏的。
      既然panel被绝对定位，位置必须在渲染之后被显式设置 (例如 myPanel.setPosition(100,100); )。
      注意: 如果浮动面板，你必须总是指定一个固定的宽度， 否则它将是自动宽度并且总是展开以便填充到视口右侧 边缘。
  • object :
    指定的对象将会被用作将会被创建的 Ext.Layer的 配置对象。
Panel
footer : Ext.Element
Panel底部Element 。只读。此元素被用来容纳Panel的...
Panel底部Element 。只读。

此元素被用来容纳Panel的 buttons 或者 fbar 。

注意: 另请参见 el 的注释。

Panel
footerCfg : Object
一个DomHelper 元素的配置对象，描述了当前Panel的footer元素结构。 另请参见...

一个DomHelper 元素的配置对象，描述了当前Panel的footer元素结构。 另请参见 bodyCfg 。

Panel
forceLayout : Boolean
如果此值为true，容器将将强制初始化一次布局操作...
如果此值为true，容器将将强制初始化一次布局操作， 即使容器处于隐藏或者折叠状态。 此配置项对于在一个折叠或者隐藏的容器中强制渲染非常有用 (默认为false)。
Container
forceValidation : Boolean
值为true时，即使是未修改过的值也会去验证(默认值为false)
EditorGridPanel
frame : Boolean
默认情况下使用 false ，渲染简单的1px的正方形边框。 true 将会渲染9个元素，以自定义的圆角结束...
默认情况下使用 false ，渲染简单的1px的正方形边框。 true 将会渲染9个元素，以自定义的圆角结束 (另请参见 Ext.Element.boxWrap)。

每种情况下产生的模板描述如下:

// frame = false
<div id="developer-specified-id-goes-here" class="x-panel">

    <div class="x-panel-header"><span class="x-panel-header-text">Title: (frame:false)</span></div>

    <div class="x-panel-bwrap">
        <div class="x-panel-body"><p>html value goes here</p></div>
    </div>
</div>

// frame = true (create 9 elements)
<div id="developer-specified-id-goes-here" class="x-panel">
    <div class="x-panel-tl"><div class="x-panel-tr"><div class="x-panel-tc">
        <div class="x-panel-header"><span class="x-panel-header-text">Title: (frame:true)</span></div>
    </div></div></div>

    <div class="x-panel-bwrap">
        <div class="x-panel-ml"><div class="x-panel-mr"><div class="x-panel-mc">
            <div class="x-panel-body"><p>html value goes here</p></div>
        </div></div></div>

        <div class="x-panel-bl"><div class="x-panel-br"><div class="x-panel-bc"/>
        </div></div></div>
</div>
Panel
header : Ext.Element
Panel的headerElement. 只读。此元素被用来容纳 title和 tools...
Panel的headerElement. 只读。

此元素被用来容纳 title和 tools

注意: 另请参见 el 的注释。

Panel
headerAsText : Boolean
true 将会在 header 中显示panel title ， false 将会隐藏它(默认为 true )。
Panel
headerCfg : Object
一个DomHelper 元素的配置对象，描述了当前Panel的header元素结构...

一个DomHelper 元素的配置对象，描述了当前Panel的header元素结构。 另请参见 bodyCfg 。

Panel
height : Number
组件的高度(默认值为 auto)。注:如果想使用百分比的方式...
组件的高度(默认值为 auto)。注:如果想使用百分比的方式来设置值，请查看 Ext.Component.anchor。
BoxComponent
hidden : Boolean
如果当前组件处于隐藏状态，此值为true。Read-only。
Component
hideCollapseTool : Boolean
true 将会在 collapsible == true 时隐藏展开/折叠按钮， false 将会显示它(默认为 false )。
Panel
hideHeaders : Boolean
True to hide the grid's header. Defaults to false .
GridPanel
hideLabel : Boolean
true时完全隐藏label元素 ( label 和 separator)。 默认为 false。 默认情况下，即使你不指定...

true时完全隐藏label元素 ( label 和 separator)。 默认为 false。 默认情况下，即使你不指定 fieldLabel 它的空间仍然会被保留，这样这块区域会与其它确实拥有label的区域位于同一排。 讲此值设置为 true 将导致此区域不再保留此空间。

注意: 参见 clearCls 的注释。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield'
        hideLabel: true
    }]
});
Component
hideMode : String
组件如何隐藏，支持的值有： 'visibility' (css visibility), 'offsets' (位置偏移量为负值) 和...

组件如何隐藏，支持的值有： 'visibility' (css visibility), 'offsets' (位置偏移量为负值) 和 'display' (css display).

注意:一般首选默认值 'display'，因为当组件第一次显示的时候它们会自动进行布局 (隐藏的时候不会调整尺寸)。

Component
hideParent : Boolean
此值为true时，当调用hide/show方法时，将会hide和show组件的容器...
此值为true时，当调用hide/show方法时，将会hide和show组件的容器；false时将会 hide和show组件自身(默认为false)。例如，这可以用作window上隐藏按钮的一种 快捷操作，通过设置此按钮的hideParent:true，然后把它添加到window上。
Component
iconCls : String
CSS类选择器，指定被用作头部图标的背景图片(默认为'')...
CSS类选择器，指定被用作头部图标的背景图片(默认为'')。

指定自定义图表类的示例就像:

// specify the property in the config for the class:
     ...
     iconCls: 'my-icon'

// css class that specifies background image to be used as the icon image:
.my-icon { background-image: url(../images/my-icon.gif) 0 6px no-repeat !important; }
Panel
id : String
当前组件唯一的id(默认为auto-assigned id)...

当前组件唯一的id(默认为auto-assigned id)。 如果你需要在以后访问组件，而又没有一个有效的组件对象引用，那么你需要指定一个 id( 也就是，使用Ext. getCmp方法 )。

注意，此id也将被用作组件底层HTML标签的id，这些标签被渲染到页面中。 这将允许你编写基于id的CSS规则，以独立地描述指定的实例；并且，也可以通过 组件父标签的id选中子元素。

注意:为了避免与唯一的id 产生重复， 请参见 itemId 和 ref 。

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

Component
itemCls : String
注意: 只有在当前组件被渲染到一个使用FormLayout 布局的 容器中时此配置才有效...

注意: 只有在当前组件被渲染到一个使用FormLayout 布局的 容器中时此配置才有效。 (例如Ext.form.FormPanel 或者指定 layout:'form')。

一个附加的CSS类，应用到div上，包装当前field的表单元素。 如果提供了此参数， field级上的itemCls将会覆盖 container级上提供的 默认itemCls。 为itemCls指定的值将会被添加默认的 类('x-form-item')。

既然它被应用到项目的包装器上(参见 Ext.layout.FormLayout。 fieldTpl)， 它将允许你编写能应用到此field、label(如果有指定)、或者field内部任何其它元素的标准CSS规则。

注意: 参考 fieldLabel的注释。 .

示例用法:

// Apply a style to the field's label:
<style>
    .required .x-form-item-label {font-weight:bold;color:red;}
</style>

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Name',
        itemCls: 'required' //this label will be styled
    },{
        xtype: 'textfield',
        fieldLabel: 'Favorite Color'
    }]
});
Component
itemId : String
当没有可利用的对象引用时，itemId可以作为第二选择，用来获得一个组件的引用， 代替 ...

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

var c = new Ext.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'); // 与 Ext.getCmp()不同

p2 = p1.ownerCt.getComponent('p2'); // 通过兄弟对象获得引用

另请参见 id 和 ref 。

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

Component
keys : Object/Array
一个Ext.KeyMap 配置对象 (其格式为Ext.KeyMap.addBinding 所期望的值...
一个Ext.KeyMap 配置对象 (其格式为Ext.KeyMap.addBinding 所期望的值，用来向当前panel上绑定自定义的按键处理(默认为 null )
Panel
labelSeparator : String
每个fieldLabel 文本后面现实的分隔符。 此属性可以在多个层次上进行配置...

每个fieldLabel 文本后面现实的分隔符。 此属性可以在多个层次上进行配置。优先顺序为：

  • field / component level
  • container level
  • layout level (默认为冒号 ':')
如不需要为当前field的label显示分隔符，指定一个空字符串''即可。

注意:参见 clearCls 的注释。

另请参见 hideLabel 和 Ext.layout.FormLayout。 fieldTpl。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    layoutConfig: {
        labelSeparator: '~'   // layout config has lowest priority (defaults to ':')
    },
    labelSeparator: '>>',     // config at container level
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Field 1',
        labelSeparator: '...' // field/component level config supersedes others
    },{
        xtype: 'textfield',
        fieldLabel: 'Field 2' // labelSeparator will be '='

    }]
});
Component
labelStyle : String
一个CSS样式描述字符串，它将直接应用到当前field的label上...

一个CSS样式描述字符串，它将直接应用到当前field的label上。 如果有设置，默认为容器的labelStyle值(例如 Ext.layout.FormLayout.labelStyle , 或者 '')。

注意:参见 clearCls 的注释。

另请参见 hideLabel 和 Ext.layout.FormLayout. fieldTpl。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Name',
        labelStyle: 'font-weight:bold;'
    }]
});
Component
listeners : Object
一个包含一个或多个事件处理器的配置对象，会在初始化的时候被添加到目标对象上...

一个包含一个或多个事件处理器的配置对象，会在初始化的时候被添加到目标对象上。 该配置对象应该是一个有效的监听器配置对象就像 addListener例子中指定的一样可一次附加多个处理器。

ExtJs Components上的DOM事件

一些 ExtJs Component 类导出时会选择一些DOM事件(例如 "click", "mouseover" 等等), 这通常只是在有额外的值可以被添加时发生。例如DataView类的 click事件会传递被点击的节点。也可以直接在Component的HTMLElementevent上访问DOM事件，但必需在Component被渲染后监听器才能添加到Element 上。可以按照以下步骤添加插件:

// 插件会用一个监听器配置对象进行配置。
//该组件会被添加到所有处理方法的参数列表上。
Ext.DomObserver = Ext.extend(Object, {
    constructor: function(config) {
        this.listeners = config.listeners ? config.listeners : config;
    },

    // 组件将自己传递进了插件的初始化方法里
    init: function(c) {
        var p, l = this.listeners;
        for (p in l) {
            if (Ext.isFunction(l[p])) {
                l[p] = this.createHandler(l[p], c);
            } else {
                l[p].fn = this.createHandler(l[p].fn, c);
            }
        }

        // 渲染后立即添加监听器到元素上
        c.render = c.render.createSequence(function() {
            var e = c.getEl();
            if (e) {
                e.on(l);
            }
        });
    },

    createHandler: function(fn, c) {
        return function(e) {
            fn.call(this, e, c);
        };
    }
});

var combo = new Ext.form.ComboBox({

    // 元素被点击后折叠
    plugins: [ new Ext.DomObserver({
        click: function(evt, comp) {
            comp.collapse();
        }
    })],
    store: myStore,
    typeAhead: true,
    mode: 'local',
    triggerAction: 'all'
});

Observable
loadMask : Object
An Ext.LoadMask config or true to mask the grid while loading. Defaults to false .
GridPanel
margins : Object
注:此配置只用于该组件展现在一个使用BorderLayout...

注:此配置只用于该组件展现在一个使用BorderLayout 或 BoxLayout的两个子类之一作为布局的容器。

这个margins对象在该组件中的格式为：

{top: (top margin),right: (right margin),bottom: (bottom margin),left: (left margin)}

也可以是一个字符串，中间用空格分隔，margin值为数字。 把matches中每一个值的次序跟CSS中margin值的排列方式相对应：

  • 如果只有一个值，它适用于所有方面。
  • 如果有两个值，top和bottom的边框设置为第一个值，left和right设置为第二个值。
  • 如果有三个值，top设置为第一个值，left和right设置为第二个值，bottom设置为第三个值。
  • 如果有四个值，分别设置为top, right, bottom, left。

默认值:

{top:0, right:0, bottom:0, left:0}
BoxComponent
maskDisabled : Boolean
true 将会在panel被disabled时进行遮罩,false将不会遮罩它(默认为...
true 将会在panel被disabled时进行遮罩, false 将不会遮罩它(默认为 true )。使用任意一种方法，当被禁用时，panel都将告诉它包含的元素禁用它们自己， 但是遮罩panel可以提供一种额外的视觉效果，用以提示panel被禁用。
Panel
maxHeight : Number
Sets the maximum height of the grid - ignored if autoHeight is not on.
GridPanel
minButtonWidth : Number
当前panel中所有buttons 最小宽度，像素值(默认为 75 )
Panel
minColumnWidth : Number
The minimum width a column can be resized to. Defaults to 25.
GridPanel
overCls : String
一个可选的额外的CSS类，它将在鼠标移过元素时被添加到组件上...
一个可选的额外的CSS类，它将在鼠标移过元素时被添加到组件上，鼠标移出时 删除。(默认为'')。此属性对于在组件上，或者它的任何使用标准CSS规则的孩子节点上， 添加定制的'active' 或者 'hover'样式非常有用。
Component
padding : Number/String
设置body元素padding样式的快捷方式。 此值既可以是一个数值，被应用到所有侧边...
设置body元素padding样式的快捷方式。 此值既可以是一个数值，被应用到所有侧边，也可以是一个普通的描述padding的 CSS字符串。默认为undefined.
Panel
pageX : Number
如果该组件被包含在一个指定位置的容器中，这个值表示页面级的x坐标值（译者注：在有滚动条的情况下这个值很有用）。
BoxComponent
pageY : Number
如果该组件被包含在一个指定位置的容器中，这个值表示页面级的y坐标值（译者注：在有滚动条的情况下这个值很有用）。
BoxComponent
plugins : Object/Array
一个对象或者一个对象数组，为组件提供特殊的功能 ...
一个对象或者一个对象数组，为组件提供特殊的功能。 对一个合法的插件唯一的要求是它含有一个init()方法， 能接收一个Ext.Component型的参数。 当组件被创建时，如果有可用的插件，组件将会调用每个插件的init方法， 并将自身的引用作为方法参数传递给它。然后，每个插件就可以调用方法或者响应组件上的事件， 就像需要的那样提供自己的功能。
Component
propertyNames : Object
包含属性名称/显示名称对的对象。如果指定，列名将用显示名称取代属性名称。
包含属性名称/显示名称对的对象。如果指定，列名将用显示名称取代属性名称。
PropertyGrid
ptype : String
需要创建配置的ptype。 当传递一个配置对象给构造函数时...
需要创建配置的ptype。 当传递一个配置对象给构造函数时，此配置选项不会被使用。 只有在使用懒初始化的时候此配置项才会被使用， 此时Plugin不是 通过一个完整的实例组件，而是通过一个Component配置指定的。 在渲染时，将会查找ptype以决定创建何种类型的Plugin。

如果你创建自己的Plugin，你可以通过 Ext.ComponentMgr.registerPlugin 对它们进行注册，以便能利用懒初始化和渲染机制。
Component
ref : String
一个路径描述，与组件的 ownerCt 相关，它描述了把当前组件的命名引用放置到哪个父容器中去。...

一个路径描述，与组件的 ownerCt 相关，它描述了把当前组件的命名引用放置到哪个父容器中去。

祖先的坐标路径可以通过'/'字符进行分隔。 例如，将一个Toolbar Button的引用放入 拥有此Toolbar的Panel中:

var myGrid = new Ext.grid.EditorGridPanel({
    title: 'My EditorGridPanel',
    store: myStore,
    colModel: myColModel,
    tbar: [{
        text: 'Save',
        handler: saveChanges,
        disabled: true,
        ref: '../saveButton'
    }],
    listeners: {
        afteredit: function() {
//          The button reference is in the GridPanel
            myGrid.saveButton.enable();
        }
    }
});

在上面的代码中，如果 ref 是 'saveButton' ，那么引用将会被放置到Toolbar中。 ref 中的每个'/' 都会从组件的 ownerCt 向上移动一级。

另请参见 added 和 removed 事件。

Component
region : String
注: 此配置只用于该组件展现在一个布局为BorderLayout的容器中...

注: 此配置只用于该组件展现在一个布局为BorderLayout的容器中(例如指定layout:'border')。

详见Ext.layout.BorderLayout。

BoxComponent
renderTo : Mixed
该值可以是一个节点的id、一个DOM节点或者一个已存在的元素...

该值可以是一个节点的id、一个DOM节点或者一个已存在的元素， 组件将会被渲染到其中。

  • 注意 :
      如果组件不是一个Container 的子项目时， 不要使用此选项。 渲染和管理它的子项目是一个Container 的layout manager的责任。
      当使用此配置项时，无需调用render()方法。

另请参见 render 。

Component
resizeEvent : String
在布局中进行尺寸调整需要监听的事件。 默认为 'resize' 。
Panel
selModel : Object
Any subclass of Ext.grid.AbstractSelectionModel that will provide the selection model for the grid (defaults to Ext.g...
Any subclass of Ext.grid.AbstractSelectionModel that will provide the selection model for the grid (defaults to Ext.grid.RowSelectionModel if not specified).
EditorGridPanel
shadow : Boolean/String
(或者一个有效的Ext.Shadow Ext.Shadow.mode 值)，用来在panel后面显示一个阴影...
true (或者一个有效的Ext.Shadow Ext.Shadow.mode 值)，用来在panel后面显示一个阴影， false 将不会显示阴影(默认为 'sides' )。注意，此选项只有当 floating = true 时才应用。
Panel
shadowOffset : Number
如果显示了阴影，此参数为数值偏移量(默认为 4 )。注意，只有当 floating = true 时此参数才会被应用。...
如果显示了阴影，此参数为数值偏移量(默认为 4 )。注意，只有当 floating = true 时此参数才会被应用。
Panel
shim : Boolean
false将会在需要的浏览器中禁用iframe衬垫(默认为...
false 将会在需要的浏览器中禁用iframe衬垫(默认为 true )。注意，此选项只有在 floating = true 时应用。
Panel
sm : Object
Shorthand for selModel .
GridPanel
source : Object
一个数据对象，被用作grid的数据源(详情参见setSource)。
PropertyGrid
source : Object
一个数据对象，被用作grid的数据源(详情参见setSource)。
PropertyGrid
stateEvents : Array
一个事件数组，当它们被触发时，组件需要保存自己的状态(默认值为 none)...

一个事件数组，当它们被触发时，组件需要保存自己的状态(默认值为 none)。 它们可以是任何该组件支持的事件类型，包括浏览器事件和 自定义事件(例如['click', 'customerchange'])。

对于保存和恢复组件状态的详细解释，参见 stateful

GridPanel
stateId : String
为该组件指定的唯一的id值，它被用作管理组件状态的目的...
为该组件指定的唯一的id值，它被用作管理组件状态的目的。 (如果设定了id，默认值为组件自己的id，否则，如果组件使用自动生成的id，此值为null)。

对于保存和反解析组件状态的解释，参见 stateful 。

Component
stateful : Boolean
一个标志参数，它将引起组件在启动时尝试从一个保存的状态中恢复内部状态参数...

一个标志参数，它将引起组件在启动时尝试从一个保存的状态中恢复内部状态参数。 组件必须要么拥有一个 stateId 或者 id ，它们被分配给需要被管理的状态属性。 在跨页面加载时，不保证自动生成的id属性的稳定性， 并且，不能依赖此id来保存和恢复一个组件的相同状态。

为了保存状态的操作能够工作，状态管理器的提供者必须 被设置成一个Ext.state.Provider 的实现类，它覆盖了set 和get 方法，以便保存和恢复name/value对。 有一个内置的Ext.state.CookieProvider 可用。

为当前页面设置状态提供者:

Ext.state.Manager.setProvider(new Ext.state.CookieProvider({
    expires: new Date(new Date().getTime()+(1000*60*60*24*7)), //7 days from now
}));

当 stateEvents 配置项中其中之一的事件被触发时， 一个状态可保存的组件将试图保存其状态。

保存状态时，一个可保存状态的组件首先需要通过调用 getState 方法来序列化它的状态。 默认情况下，此函数什么事都不做。 开发者必须提供一个实现，返回一个hash对象，它描述了组件可恢复的状态。

getState方法产生的值将会传递给 Ext.state.Manager.set 方法，它使用配置的 Ext.state.Provider 来保存对象，以组件的 stateId 为key，或者，如果此值（指stateId）没有指定时， 使用它的 id 作为key。

在进行构造时，一个可保存状态的组件试图通过调用 Ext.state.Manager.get方法来 恢复它的状态，传递 stateId 或者，如果此值（指stateId）没有指定时， 使用它的 id 作为参数。

结果对象被传递给 applyState 。 applyState 的默认实现只是简单地把属性拷贝到对象中， 但是开发者可以覆盖此方法以支持更多行为。

通过向 beforestaterestore, staterestore, beforestatesave 和 statesave 事件上绑定监听器，你可以在保存和恢复状态时进行额外的处理。

Component
store : Ext.data.Store
The Ext.data.Store the grid should use as its data source (required).
GridPanel
stripeRows : Boolean
true to stripe the rows. Default is false. This causes the CSS class x-grid3-row-alt to be added to alternate rows of...
true to stripe the rows. Default is false.

This causes the CSS class x-grid3-row-alt to be added to alternate rows of the grid. A default CSS rule is provided which sets a background colour, but you can override this with a rule which either overrides the background-color style using the '!important' modifier, or which uses a CSS selector of higher specificity.

GridPanel
style : String
被添加到组件元素的特定样式。 必须是按照...
被添加到组件元素的特定样式。 必须是按照 Ext.Element.applyStyles 类指定格式的合法参数值。

new Ext.Panel({
    title: 'Some Title',
    renderTo: Ext.getBody(),
    width: 400, height: 300,
    layout: 'form',
    items: [{
        xtype: 'textarea',
        style: {
            width: '95%',
            marginBottom: '10px'
        }
    },
        new Ext.Button({
            text: 'Send',
            minWidth: '100',
            style: {
                marginBottom: '10px'
            }
        })
    ]
});
Component
tabTip : String
注: 这个配置只用于当该组件作为TabPanel的一个子项目时使用...

注: 这个配置只用于当该组件作为TabPanel的一个子项目时使用。

一个String类型的innerHTML(支持html标签)，当鼠标放在该选项上的时，显示一个tooltip。为了tips能够被渲染，Ext.QuickTips.init()必须被提前调用。
BoxComponent
tbar : Object/Array
panel的顶部工具栏。 此参数可以是一个 The top toolbar of the panel. This can be a Ext.Toolbar 对象、一个工具栏配置、或者一个被添加到工具栏的...

panel的顶部工具栏。 此参数可以是一个 The top toolbar of the panel. This can be a Ext.Toolbar 对象、一个工具栏配置、或者一个被添加到工具栏的buttons/button配置数组。 注意，在渲染之后此参数无效。如需在渲染之后访问顶部工具栏，请使用 getTopToolbar。

注意:尽管Toolbar可以包含Field组件，但它们不会 通过加载祖先FormPanel而被更新。Panel的工具栏不是标准Container->Component 层次的一部分，所以它们不会被扫面以收集表单项。但是，这些值还是会 被提交，因为提交表单的参数是从DOM树中收集的。

Panel
tbarCfg : Object
一个DomHelper 元素的配置对象，描述了当前Panel的tbar元素结构。 另请参见...

一个DomHelper 元素的配置对象，描述了当前Panel的tbar元素结构。 另请参见 bodyCfg 。

Panel
title : String
被用作innerHTML的标题文本(接受html标签) ，用来显示在panel的...
被用作innerHTML的标题文本(接受html标签) ，用来显示在panel的 header 中(默认为'')。 当 title 被指定时， header 元素将会被自动创建并显示，除非 header 被显式地设置为 false 。 如果你不在配置时指定一个 title ， 但是你想以后设置，你必须要么 指定一个非空的 title (一个空格' ' 也可以)或者指定 header:true ，这样容器元素将会被创建。
Panel
titleCollapse : Boolean
将会允许通过在顶部工具条的任意地方点击展开和折叠panel(当...
true 将会允许通过在顶部工具条的任意地方点击展开和折叠panel(当 collapsible = true )， false ) 将会只允许通过点击工具按钮进行操作(默认为 false ))。如果当前panel是border布局中的一个子项目，另请参见 BorderLayout.Region floatable 配置项。
Panel
toolTemplate : Ext.Template/Ext.XTemplate
用来在header 元素中创建tools 的模板。默认为:...

用来在header 元素中创建tools 的模板。默认为:

                                    new Ext.Template('<div class="x-tool x-tool-{id}">&#160;</div>')

可以覆盖此参数，以便为基于更复杂XTemplate的tools提供自定义的DOM结构。 模板的数据为一个简单的tool配置对象(不是整个Array)， 它在 tools配置项指定。 在以下例子中，当鼠标滑过tool时，一个<a>标签被用来提供视觉效果:

var win = new Ext.Window({
    tools: [{
        id: 'download',
        href: '/MyPdfDoc.pdf'
    }],
    toolTemplate: new Ext.XTemplate(
        '<tpl if="id==\'download\'">',
            '<a class="x-tool x-tool-pdf" href="{href}"></a>',
        '</tpl>',
        '<tpl if="id!=\'download\'">',
            '<div class="x-tool x-tool-{id}">&#160;</div>',
        '</tpl>'
    ),
    width:500,
    height:300,
    closeAction:'hide'
});

注意，CSS类'x-tool-pdf'必须拥有一个关联的样式规则，它提供了一个适当的背景图片， 例如:

                                a.x-tool-pdf {background-image: url(../shared/extjs/images/pdf.gif)!important;}
Panel
tools : Array
一个工具按钮配置数组，用来添加到头部工具区域。 当渲染之后，每个工具都被存储为一个Element ，被一个叫做...
一个工具按钮配置数组，用来添加到头部工具区域。 当渲染之后，每个工具都被存储为一个Element ，被一个叫做 tools. <tool-type> 的公共参数引用。

每个工具配置都可以包含如下参数:

  • id : String
    必须。需要创建的工具类型。默认情况下，这被指定为一个 CSS类，格式为 x-tool- <tool-type> ，用来形成工具Element。 对于以下列出的工具类型，Ext提供了CSS规则，和一个包含图片的icon对象。 通过提供可选的CSS规则和背景图片，开发者可以实现自定义的工具:
      toggle (当collapsible 为 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
    • tc : Object
      工具配置对象
  • stopEvent : Boolean
    默认为true。指定为false可以允许点击事件进行冒泡。
  • scope : Object
    调用处理函数的作用域。
  • qtip : String/Object
    一个tip字符串，或者一个提供给 Ext.QuickTip.register 的配置参数
  • hidden : Boolean
    True将会在初始化时渲染成隐藏的。
  • on : Object
    一个监听器配置对象，以addListener所需的参数格式 指定事件监听器

注意，当panel被折叠时提供部分固定的工具，这些工具仅仅提供可视按钮。 所有必备的功能，都必须通过添加实现了必备行为的处理函数来实现。

示例用法:

tools:[{
    id:'refresh',
    qtip: 'Refresh form Data',
    // hidden:true,
    handler: function(event, toolEl, panel){
        // refresh logic
    }
},
{
    id:'help',
    qtip: 'Get Help',
    handler: function(event, toolEl, panel){
        // whatever
    }
}]

对于自定义 'help' 的id，定义了两个相应的css类，拥有一个到15x15图片的链接:

                                .x-tool-help {background-image: url(images/help.png);}
.x-tool-help-over {background-image: url(images/help_over.png);}
// if using an image sprite:
.x-tool-help {background-image: url(images/help.png) no-repeat 0 0;}
.x-tool-help-over {background-position:-15px 0;}
Panel
tpl : Mixed
一个 Ext.Template , Ext.XTemplate 或者一个用来形成一个Ext.XTemplate的字符串数组...
一个 Ext.Template , Ext.XTemplate 或者一个用来形成一个Ext.XTemplate的字符串数组。 与 data 和 tplWriteMode 配置项协同使用。
Component
tplWriteMode : String
刷新组件的内容区域时使用的Ext.(X)Template方式。 默认为'overwrite' (参见 Ext.XTemplate.overwrite )。
刷新组件的内容区域时使用的Ext.(X)Template方式。 默认为'overwrite' (参见 Ext.XTemplate.overwrite )。
Component
trackMouseOver : Boolean
True to highlight rows when the mouse is over. Default is true for GridPanel, but false for EditorGridPanel.
GridPanel
unstyled : Boolean
覆盖 baseCls 设置为 baseCls = 'x-plain' ， 除了必须的属性之外，它将panel渲染成无样式的...
覆盖 baseCls 设置为 baseCls = 'x-plain' ， 除了必须的属性之外，它将panel渲染成无样式的，以便Ext布局功能能起作用 (例如overflow:hidden)。
Panel
view : Object
The Ext.grid.GridView used by the grid. This can be set before a call to render().
GridPanel
viewConfig : Object
A config object that will be applied to the grid's UI view. Any of the config options available for Ext.grid.GridVie...
A config object that will be applied to the grid's UI view. Any of the config options available for Ext.grid.GridView can be specified here. This option is ignored if view is specified.
GridPanel
width : Number
组件的宽度(默认值为 auto)。注:如果想使用百分比的方式...
组件的宽度(默认值为 auto)。注:如果想使用百分比的方式来设置值，请查看 Ext.Component.anchor。
BoxComponent
x : Number
如果被包含在一个指定位置的容器中，这个值表示x(left)坐标值。
BoxComponent
xtype : String
需要创建配置的xtype。 当传递一个配置对象给构造函数时...
需要创建配置的xtype。 当传递一个配置对象给构造函数时，此配置选项不会被使用。 只有在使用懒初始化的时候此配置项才会被使用，此时容器的子项目不是 通过一个完整的实例组件，而是通过一个Component配置指定的。 在渲染时，将会查找xtype以决定创建何种类型的子组件。

预定义的xtype列表如下： here。

如果你继承Component创建你自己的组件，你需要使用Ext.ComponentMgr.registerType 对它们进行注册，以便利用懒初始化和渲染机制。
Component
y : Number
如果被包含在一个指定位置的容器中，这个值表示y(top)坐标值。
BoxComponent

公共属性

Property Defined By
body : Ext.Element
Panel的body Element ，可以用来包含HTML内容。 内容可以在...
Panel的body Element ，可以用来包含HTML内容。 内容可以在html 配置项中指定，或者可以使用autoLoad 配置项被加载，或者通过Panel的Updater提供。 只读。

如果这被用来通过任意方式加载可视的HTML元素，那么Panel不可以被用作 一个Layout，用来容纳其它Panel。

如果当前Panel期望被用作一个Layout的宿主 (参见 layout) 那么body元素必须不能被加载或者改变---因为它处于Panel的Layout的控制 之下。

注意: 另请参见 el .

Panel
buttons : Array
Panel的按钮数组，它们从 buttons 配置属性创建。只读。
Panel
bwrap : Ext.Element
Panel的bwrapElement ，用来包含其它Panel元素(tbar, body, bbar, footer)。 参见 bodyCfg。 只读。
Panel
collapsed : Boolean
如果当前panel被折叠为true。只读。
Panel
dd : Ext.dd.DragSource.
如果当前Panel被配置为 draggable ，此参数将会包含一个 Ext.dd.DragSource 实例，它负责处理拖拽Panel...

如果当前Panel被配置为 draggable ，此参数将会包含一个 Ext.dd.DragSource 实例，它负责处理拖拽Panel。

开发者必须提供Ext.dd.DragSource的 抽象方法的实现，用来提供drag/drop过程中的每一步行为。 参见 draggable.
Panel
el : Ext.Element
封装了当前组件的Ext.Element。 Read-only。通常情况下，这将是一个<DIV>元素，它由此类的...

封装了当前组件的Ext.Element。 Read-only。

通常情况下，这将是一个<DIV>元素，它由此类的 onRender方法创建，但是它可以通过使用 autoEl 配置项进行覆盖。

注意: 直到组件渲染完成此元素都将处于无效状态。

如需向当前组件的 DOM事件(而不是当前组件自己的Observable事件)添加监听器， 更多建议，参见 listeners 配置项，或者直接使用一个render监听器:

new Ext.Panel({
    title: 'The Clickable Panel',
    listeners: {
        render: function(p) {
            // Append the Panel to the click handler's argument list.
            p.getEl().on('click', handlePanelClick.createDelegate(null, [p], true));
        },
        single: true  // Remove the listener after first invocation
    }
});

另请参见 getEl

Component
footer : Ext.Element
Panel底部Element 。只读。此元素被用来容纳Panel的...
Panel底部Element 。只读。

此元素被用来容纳Panel的 buttons 或者 fbar 。

注意: 另请参见 el 的注释。

Panel
header : Ext.Element
Panel的headerElement. 只读。此元素被用来容纳 title和 tools...
Panel的headerElement. 只读。

此元素被用来容纳 title和 tools

注意: 另请参见 el 的注释。

Panel
hidden : Boolean
如果当前组件处于隐藏状态，此值为true。Read-only。
Component
initialConfig : Object
当前组件的初始化配置描述。 Read-only。
Component
ownerCt : Ext.Container
组件所属的Container (默认为undefined，当前组件被添加到一个容器中时此值被自动设置)...
组件所属的Container (默认为undefined，当前组件被添加到一个容器中时此值被自动设置)。 Read-only。

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

Component
private : Object
我们只能在一块可见的区域进行布局。 布局目标*或者它的任何父元素* 为...
我们只能在一块可见的区域进行布局。 布局目标*或者它的任何父元素* 为display:none， 将意味着它没有一块可见的区域。
Container
refOwner : Ext.Container
如果当前组件是一个容器的孩子，并且是通过一个 ref 配置项被注册的，则此值为 ref 引用被插入到的祖先容器。
如果当前组件是一个容器的孩子，并且是通过一个 ref 配置项被注册的，则此值为 ref 引用被插入到的祖先容器。
Component
rendered : Boolean
如果当前组件已经被渲染了，此值为true。Read-only.
Component

公共方法

Method Defined By
PropertyGrid ( Object config )
参数:
  • config : Object
    grid配置对象
返回值:
  • void
PropertyGrid
addButton ( String/Object config , Function handler , Object scope ) : Ext.Button
向当前panel中添加一个按钮。注意，此方法必须在渲染之前调用。 首选的方式是通过...
向当前panel中添加一个按钮。注意，此方法必须在渲染之前调用。 首选的方式是通过buttons 配置项添加按钮。
参数:
  • config : String/Object
    一个合法的Ext.Button 配置。字符串将会变成默认按钮配置文本，对象将会被看做一个按钮配置对象。
  • handler : Function
    在按钮Ext.Button.click 时被调用的函数
  • scope : Object
    作用域( this 引用)，按钮处理函数将会在其中被执行。默认为Button.
返回值:
  • Ext.Button
    被添加的按钮
Panel
addClass ( string cls ) : Ext.Component
为组件底层的元素添加CSS样式。
为组件底层的元素添加CSS样式。
参数:
  • cls : string
    需要添加的CSS样式的class名称
返回值:
  • Ext.Component
    this
Component
addEvents( Object|String o, string Optional. ) : void
添加指定的事件到事件列表上，事件会被该Observable触发。
添加指定的事件到事件列表上，事件会被该Observable触发。
参数:
  • o : Object|String
    以事件名作为属性true作为值的对象 或者当多个事件名被分开的传递时则为第一个事件名。
  • Optional. : string
    事件名被分开的传递时则为事件名。 用法:
    this.addEvents('storeloaded', 'storecleared');
返回值:
  • void
Observable
addListener( String eventName, Function handler, [Object scope], [Object options] ) : void
给对象添加事件处理器。
给对象添加事件处理器。
参数:
  • eventName : String
    监听的事件名。
  • handler : Function
    事件调用的方法
  • scope : Object
    （可选）处理方法执行的作用域 (this的引用 reference)。 如果被忽略。默认为触发事件的对象。
  • options : Object
    （可选）包含处理器配置和属性的对象。 可能包含以下的属性:
    • scope : Object
      处理方法执行的作用域(this的引用) 。 如果被忽略。默认为触发事件的对象。
    • delay : Number
      在触发事件后延迟调用处理器的毫秒数。
    • single : Boolean
      如果为True则添加一个处理器来处理下一次的事件触发（仅一次），然后移除自己。
    • buffer : Number
      使得处理器延迟指定毫秒数后预定的运行在 一个Ext.util.DelayedTask中 。 如果事件在时间内再一次被触发，原始的处理器不会被调用，但是新的处理器会预定的在他的位置上。
    • target : Observable
      如果事件在目标的Observable上触发则仅仅调用处理器， 否则 事件会从子类的Observable上冒泡

    组合选项
    使用这些选项参数,可能会组合出不同类型的监听器：

    一个延迟的，一次性的监听器。

    myDataView.on('click', this.onClick, this, {
single: true,
delay: 100
});

    一次调用附加多个处理器
    该方法同样支持传递一个包含指定的多个处理器的属性的配置对象参数。

    myGridPanel.on({
'click' : {
    fn: this.onClick,
    scope: this,
    delay: 100
},
'mouseover' : {
    fn: this.onMouseOver,
    scope: this
},
'mouseout' : {
    fn: this.onMouseOut,
    scope: this
}
});

    或者一个简写的语法：

    myGridPanel.on({
'click' : this.onClick,
'mouseover' : this.onMouseOver,
'mouseout' : this.onMouseOut,
 scope: this
});
返回值:
  • void
Observable
bubble ( Function fn , [ Object scope ], [ Array args ] ) : Ext.Container
沿着component/container继承结构进行冒泡， 在每个组件上调用指定的函数。 所调用函数的作用域...
沿着component/container继承结构进行冒泡， 在每个组件上调用指定的函数。 所调用函数的作用域( this)将会是 指定的作用域或者是当前组件。 如果在函数任何一点上返回false，即停止冒泡过程
参数:
  • fn : Function
    需要调用的函数
  • scope : Object
    (可选) 函数的作用域(默认为当前节点)
  • args : Array
    (可选) 调用函数时需要传递的参数( 默认传递当前组件)
返回值:
  • Ext.Container
    this
Container
cloneConfig ( Object overrides ) : Ext.Component
默认使用原先传递给当前实例的配置值克隆当前组件。
默认使用原先传递给当前实例的配置值克隆当前组件。
参数:
  • overrides : Object
    一个新的配置项，包含需要覆盖到克隆版本的所有属性。 可以传递一个id参数给此对象，否则将自动生成一个新的id以避免发生重复。
返回值:
  • Ext.Component
    当前组件的克隆副本
Component
collapse ( Boolean animate ) : Ext.Panel
折叠panel的body，这样它就变成隐藏的。 触发beforecollapse 事件...
折叠panel的body，这样它就变成隐藏的。 触发beforecollapse 事件，处理函数返回false可以取消折叠操作。
参数:
  • animate : Boolean
    True将会在变换时使用动画效果，其它为false( 默认为panel的animCollapse 配置项的值)
返回值:
  • Ext.Panel
    this
Panel
destroy () : void
通过如下方法销毁对象：删除所有的事件监听器、将组件的元素从DOM树中删除...
通过如下方法销毁对象：删除所有的事件监听器、将组件的元素从DOM树中删除（如果可以）、 将组件从它的 Ext.Container（如果可用）中删除、 并且将它从Ext.ComponentMgr中 注销。 销毁操作一般由框架自动完成，一般情况下不需要直接调用该方法。
参数:
  • 无。
返回值:
  • void
Component
enableBubble( String/Array events ) :void
是否现在使得事件会被该Observable触发并调用 this.getBubbleTarget()方法在拥有者的继承树...

是否现在使得事件会被该Observable触发并调用 this.getBubbleTarget()方法在拥有者的继承树中冒泡。Observable的基础类中没有该方法的实现。

该方法一般被Ext.Components用来冒泡事件到拥有者的容器。参看Ext.Component.getBubbleTarget默认的实现 在Ext.Component中返回组件的直接拥有者。但是如果需要的是一个已知的目标，该方法可以被重写来更快的访问需求的目标。

例子:

Ext.override(Ext.form.Field, {
    // 添加方法到Field的initComponent上改变事件为冒泡
    initComponent : Ext.form.Field.prototype.initComponent.createSequence(function() {
        this.enableBubble('change');
    }),

    // 我们知道我们想让Field的事件冒泡到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() {
            // 如果样式被修改标题会变红。
            myForm.header.setStyle('color', 'red');
        }
    }
});
参数:
  • events : String/Array
    冒泡的事件名，或事件名数组
返回值:
  • void
Observable
expand ( Boolean animate ) : Ext.Panel
展开panel的body以便让其变得可见。 触发beforeexpand 事件...
展开panel的body以便让其变得可见。 触发beforeexpand 事件，如果它返回false将会取消展开操作。
参数:
  • animate : Boolean
    True将会在变换过程中使用动画效果，否则为false (默认为panel的 animCollapse 配置项的值)
返回值:
  • Ext.Panel
    this
Panel
findParentBy ( Function fn ) : Ext.Container
通过自定义的函数查找当前组件上层任何层次上的容器...
通过自定义的函数查找当前组件上层任何层次上的容器。 如果传递的函数返回true，容器对象将被返回。
参数:
  • fn : Function
    自定义的函数，使用如下参数调用(container,this component)。
返回值:
  • Ext.Container
    自定义函数返回true的第一个容器
Component
findParentByType ( String/Class xtype ) : Ext.Container
通过xtype或者class查找当前组件上层任何层次上的容器
通过xtype或者class查找当前组件上层任何层次上的容器
参数:
  • xtype : String/Class
    组件的xtype字符串，或者直接是组件的class
返回值:
  • Ext.Container
    符合指定xtype或者class的第一个容器
Component
fireEvent( String eventName, Object... args ) : Boolean
用传入的参数触发指定的事件 (减去事件名)。 一个事件可以被设置为冒泡 Obse...

用传入的参数触发指定的事件 (减去事件名)。

一个事件可以被设置为冒泡到Observable父类继承树(参看 Ext.Component.getBubbleTarget) 调用enableBubble实现。

参数:
  • eventName : String
    触发的事件名。
  • args : Object...
    传递给处理器的可变长度参数。
返回值:
  • Boolean
    如果有任何的处理器返回false则返回false，否则返回true。
Observable
focus ( [ Boolean selectText ], [ Boolean/Number delay ] ) : Ext.Component
尝试将当前组件设为焦点。
尝试将当前组件设为焦点。
参数:
  • selectText : Boolean
    (可选) 如果可用，同时选中组件内部的文本
  • delay : Boolean/Number
    (可选)将当前组件设置为焦点的延迟时间(设置为true等于0毫秒)
返回值:
  • Ext.Component
    this
Component
get ( String/Number key ) : Ext.Component
获取当前容器包含的一个组件( items.get(key)方法的别名)
获取当前容器包含的一个组件( items.get(key)方法的别名)
参数:
  • key : String/Number
    组件的索引
返回值:
  • Ext.Component
    Ext.Component
Container
getBottomToolbar () : Ext.Toolbar
返回panel底部区域toolbar ( bbar )。
返回panel底部区域toolbar ( bbar )。
参数:
  • 无。
返回值:
  • Ext.Toolbar
    toolbar
Panel
getBox ( [ Boolean local ] ) : Object
获取组件底层元素当前盒子模型的尺寸。（译者注：盒子模型是CSS术语，详细解释请自行搜索。）
获取组件底层元素当前盒子模型的尺寸。（译者注：盒子模型是CSS术语，详细解释请自行搜索。）
参数:
  • local : Boolean
    (可选)值为true时，组件的left值和top值将代替页面的XY被返回。(默认值为false)
返回值:
  • Object
    返回值的格式{x, y, width, height}
BoxComponent
getBubbleTarget () : Ext.Container
为Observable的fireEvent方法提供链接，它沿着继承结构进行冒泡操作。
为Observable的fireEvent方法提供链接，它沿着继承结构进行冒泡操作。
参数:
  • 无。
返回值:
  • Ext.Container
    拥有当前组件的容器。
Component
getColumnModel () : Ext.grid.ColumnModel
Returns the grid's ColumnModel.
Returns the grid's ColumnModel.
参数:
  • 无。
返回值:
  • Ext.grid.ColumnModel
    The column model
GridPanel
getDragDropText () : String
Called to get grid's drag proxy text, by default returns this.ddText.
Called to get grid's drag proxy text, by default returns this.ddText.
参数:
  • 无。
返回值:
  • String
    The text
GridPanel
getEl () : Ext.Element
返回 Ext.Element ，它包装了当前组件。...

返回 Ext.Element ，它包装了当前组件。

通常情况下，这将是一个<DIV>元素，它是由该类的onRender方法创建的， 但是可以使用autoEl配置项 覆盖它。

注意: 此元素将会一直处于无效状态直到当前组件渲染完成。

如需向当前组件的 DOM事件(而不是当前组件自己的Observable事件)添加监听器， 更多建议，参见 listeners 配置项，或者直接使用一个render监听器:

new Ext.Panel({
    title: 'The Clickable Panel',
    listeners: {
        render: function(p) {
            // Append the Panel to the click handler's argument list.
            p.getEl().on('click', handlePanelClick.createDelegate(null, [p], true));
        },
        single: true  // Remove the listener after first invocation
    }
});
参数:
  • 无。
返回值:
  • Ext.Element
    包装当前组件的元素。
Component
getFooterToolbar () : Ext.Toolbar
返回panel底部( fbar )区域的toolbar
返回panel底部( fbar )区域的toolbar
参数:
  • 无。
返回值:
  • Ext.Toolbar
    toolbar
Panel
getFrameHeight () : Number
返回当前panel框架元素的高度像素值 (包括所有top和bottom工具栏以及header和footer元素...
返回当前panel框架元素的高度像素值 (包括所有top和bottom工具栏以及header和footer元素， 但是不包括body高度)。 如需获取body高度，参见 getInnerHeight.
参数:
  • 无。
返回值:
  • Number
    框架高度
Panel
getFrameWidth () : Number
返回当前panel框架元素的宽度像素值 (不包含body宽度)。如需获得body宽度，参见...
返回当前panel框架元素的宽度像素值 (不包含body宽度)。如需获得body宽度，参见 getInnerWidth。
参数:
  • 无。
返回值:
  • Number
    框架宽度
Panel
getGridEl () : Element
Returns the grid's underlying element.
Returns the grid's underlying element.
参数:
  • 无。
返回值:
  • Element
    The element
GridPanel
getHeight () : Number
获取该组件的当前高度值。
获取该组件的当前高度值。
参数:
  • 无。
返回值:
  • Number
BoxComponent
getId () : String
返回当前组件的id，如果没有定义id，则自动生成并返回一个id:'ext-comp-'...
返回当前组件的 id 如果没有定义 id 则自动生成并返回一个 id

'ext-comp-' + (++Ext.Component.AUTO_ID)
参数:
  • 无。
返回值:
  • String
    id
Component
getInnerHeight () : Number
返回body元素的高度像素值(不包括任何框架元素的高度)。 对于框架高度参见...
返回body元素的高度像素值(不包括任何框架元素的高度)。 对于框架高度参见 getFrameHeight。
参数:
  • 无。
返回值:
  • Number
    body高度
Panel
getInnerWidth () : Number
返回body元素宽度像素值(不包含任何框架元素的宽度)。 对于框架宽度，参见 getFrameWidth。
返回body元素宽度像素值(不包含任何框架元素的宽度)。 对于框架宽度，参见 getFrameWidth。
参数:
  • 无。
返回值:
  • Number
    body宽度
Panel
getItemId () : String
返回当前组件的 itemId 。 如果没有通过配置参数指定 itemId 那么，将会使用...
返回当前组件的 itemId 。 如果没有通过配置参数指定 itemId 那么，将会使用 getId 返回 id 。
参数:
  • 无。
返回值:
  • String
Component
getLayoutTarget () : Ext.Element
返回当前容器中用来包含子组件的元素。提供了一个 可以返回容器的...

返回当前容器中用来包含子组件的元素。

提供了一个 可以返回容器的Element 的实现， 但是，如果容器有更复杂的结构， 可以覆盖此实现以返回 layout 在其中渲染子组件的元素。

参数:
  • 无。
返回值:
  • Ext.Element
    在其中渲染子组件的元素。
Container
getOuterSize () : Object
获取当前组件所在元素的尺寸大小，包括边缘的空白处。
获取当前组件所在元素的尺寸大小，包括边缘的空白处。
参数:
  • 无。
返回值:
  • Object
    一个包含元素大小的对象 {width: (element width + left/right margins), height: (element height + top/bottom margins)}
BoxComponent
getPosition ( [ Boolean local ] ) : Array
获取组件底层元素当前的XY位置。
获取组件底层元素当前的XY位置。
参数:
  • local : Boolean
    (可选)如果为true，将返回元素的left和top值，而不是相对于页面内的 XY。(默认值为 false)
返回值:
  • Array
    元素的XY位置值(例如：[100, 200])
BoxComponent
getResizeEl () : Ext.Element
返回该组件的最外层用来定义这些组件整体大小的Element...

返回该组件的最外层用来定义这些组件整体大小的Element对象。

通常用 getEl 方法将会返回相同的Element对象，但在有些情况下，组件可能有一些更多的封装了它的主要动态Element对象的Element对象。

例如ComboBox。它是封装在一个包含<input>元素的包装元素里(这将返回其 getEl方法和触发按钮的元素)。返回的元素为resizeEl。

参数:
  • 无。
返回值:
  • Ext.Element
    The Element which is to be resized by size managing layouts.
BoxComponent
getSelectionModel () : SelectionModel
Returns the grid's selection model configured by the selModel configuration option. If no selection model was configu...
Returns the grid's selection model configured by the selModel configuration option. If no selection model was configured, this will create and return a RowSelectionModel.
参数:
  • 无。
返回值:
  • SelectionModel
GridPanel
getSize () : Object
获取组件底层元素当前的大小。
获取组件底层元素当前的大小。
参数:
  • 无。
返回值:
  • Object
    一个包含元素大小的对象{width: (element width), height: (element height)}
BoxComponent
getSource () : Object
获取包含属性值的源数据对象。关于数据对象格式的详情，参见： setSource 。
获取包含属性值的源数据对象。关于数据对象格式的详情，参见： setSource 。
参数:
  • 无。
返回值:
  • Object
    data object
PropertyGrid
getStore () : Ext.data.Store
Returns the grid's data store.
Returns the grid's data store.
参数:
  • 无。
返回值:
  • Ext.data.Store
    The store
GridPanel
getTool ( String id ) : Object
根据id获取一个tool.
根据id获取一个tool.
参数:
  • id : String
返回值:
  • Object
    tool
Panel
getTopToolbar () : Ext.Toolbar
返回panel顶部区域的 toolbar ( tbar ).
返回panel顶部区域的 toolbar ( tbar ).
参数:
  • 无。
返回值:
  • Ext.Toolbar
    toolbar
Panel
getView () : Ext.grid.GridView
Returns the grid's GridView object.
Returns the grid's GridView object.
参数:
  • 无。
返回值:
  • Ext.grid.GridView
    The grid view
GridPanel
getWidth () : Number
获取该组件的当前宽度值。
获取该组件的当前宽度值。
参数:
  • 无。
返回值:
  • Number
BoxComponent
getXType () : String
获取当前组件的xtype，它是用 Ext.ComponentMgr 注册的。 所有可用的xtype列表，参见...
获取当前组件的xtype，它是用 Ext.ComponentMgr 注册的。 所有可用的xtype列表，参见 Ext.Component 类头部。示例用法:

var t = new Ext.form.TextField();
alert(t.getXType());  // alerts 'textfield'
参数:
  • 无。
返回值:
  • String
    The xtype
Component
getXTypes () : String
返回此组件的xtype继承树，用字符'-'分隔。 所有可用的xtype值...

返回此组件的xtype继承树，用字符'-'分隔。 所有可用的xtype值，请参见Ext.Component 类的头部。

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

示例用法:

var t = new Ext.form.TextField();
alert(t.getXTypes());  // alerts 'component/box/field/textfield'
参数:
  • 无。
返回值:
  • String
    xtype层次字符串
Component
hasListener( String eventName ) : Boolean
检测对象是否包含指定事件的任何监听器
检测对象是否包含指定事件的任何监听器
参数:
  • eventName : String
    检测的事件名
返回值:
  • Boolean
    如果事件被监听则为true，否则为false
Observable
hide () : Ext.Component
隐藏当前组件。 监听 beforehide' 事件并且返回false 可以取消隐藏组件的操作。 在隐藏组件之后触发...
隐藏当前组件。 监听 beforehide' 事件并且返回false 可以取消隐藏组件的操作。 在隐藏组件之后触发 ' hide' 事件。 如果组件被配置成 hidden 那么此方法在内部被调用。
参数:
  • 无。
返回值:
  • Ext.Component
    this
Component
isVisible () : Boolean
如果当前组件可见，返回true。
如果当前组件可见，返回true。
参数:
  • 无。
返回值:
  • Boolean
    如果当前组件可见，返回true，其它返回false。
Component
isXType ( String xtype , [ Boolean shallow ] ) : Boolean
Tests whether or not this Component is of a specific xtype. This can test whether this Component is descended from th...

测试此组件是否是指定的xtype。此方法既可以测试是否是指定的xtype的某个子类， 或者它是否直接是指定的xtype类(shallow=true)。

如果使用你自己的子类，必须知道组件必须注册它的xtype值。

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

示例用法:

var t = new Ext.form.TextField();
var isText = t.isXType('textfield');        // true
var isBoxSubclass = t.isXType('box');       // true, descended from BoxComponent
var isBoxInstance = t.isXType('box', true); // false, not a direct BoxComponent instance
参数:
  • xtype : String
    需要为当前组件进行检测的xtype
  • shallow : Boolean
    (可选) 如果为false，检测组件是否是xtype继承树中的某个子类（默认是这种情况）， 如果为true，只检测组件是否是指定的xtype类型。
返回值:
  • Boolean
    如果当前组件是指定xtype的子类，返回true，其它返回flase。
Component
mon ( Observable|Element item , Object|String ename , Function fn , Object scope , Object opt ) : void
向任何Observable对象(或者元素)上添加监听器，监听器将会在组件...

向任何Observable对象(或者元素)上添加监听器，监听器将会在组件销毁时被自动删除。
用法：

myGridPanel.mon(myGridPanel.getSelectionModel(), 'selectionchange', handleSelectionChange, null, {buffer: 50});

or:

myGridPanel.mon(myGridPanel.getSelectionModel(), {
    selectionchange: handleSelectionChange,
    buffer: 50
});
参数:
  • item : Observable|Element
    需要添加listener/listeners的项目。
  • ename : Object|String
    事件名，或者一个包含事件名属性的对象。
  • fn : Function
    (可选) 如果 ename 参数是一个事件名，此参数为处理函数。
  • scope : Object
    (可选)如果 ename 参数是一个事件名称，此参数是作用域 ( this 引用)，监听函数将会在此作用域中被执行。
  • opt : Object
    (可选)如果 ename 参数是一个事件名称， 此参数是 addListener 配置项。
返回值:
  • void
Component
mun ( Observable|Element item , Object|String ename , Function fn , Object scope ) : void
删除通过mon 方法添加的监听器。
删除通过mon 方法添加的监听器。
参数:
  • item : Observable|Element
    需要删除listener/listeners的项目。
  • ename : Object|String
    事件名称，或者一个包含事件名称属性的对象。
  • fn : Function
    (可选)如果 ename 参数是一个事件名称，此参数是一个处理函数。
  • scope : Object
    (可选)如果 ename 参数是一个事件名称，此参数是作用域 ( this 引用)，监听函数将会在此作用域中被执行。
返回值:
  • void
Component
nextSibling () : Ext.Component
返回所属容器中的下一个组件
返回所属容器中的下一个组件
参数:
  • 无。
返回值:
  • Ext.Component
Component
on( String eventName, Function handler, [Object scope], [Object options] ) : void
给对象添加事件处理器 (addListener的简写形式)
给对象添加事件处理器 (addListener的简写形式。)
参数:
  • eventName : String
    监听的事件类型
  • handler : Function
    事件调用的方法
  • scope : Object
    （可选）处理方法执行时的作用域 (this 的引用)。 如果被忽略。默认为触发事件的对象。
  • options : Object
    可选 包含处理器配置的对象。
返回值:
  • void
Observable
previousSibling () : Ext.Component
返回所属容器中的前一个组件
返回所属容器中的前一个组件
参数:
  • 无。
返回值:
  • Ext.Component
Component
purgeListeners() : void
移除对象上所有的监听器
移除对象上所有的监听器
参数:
  • 无。
返回值:
  • void
Observable
reconfigure ( Ext.data.Store store , Ext.grid.ColumnModel colModel ) : void
Reconfigures the grid to use a different Store and Column Model and fires the 'reconfigure' event. The View will be b...

Reconfigures the grid to use a different Store and Column Model and fires the 'reconfigure' event. The View will be bound to the new objects and refreshed.

Be aware that upon reconfiguring a GridPanel, certain existing settings may become invalidated. For example the configured autoExpandColumn may no longer exist in the new ColumnModel. Also, an existing PagingToolbar will still be bound to the old Store, and will need rebinding. Any plugins might also need reconfiguring with the new data.

参数:
  • store : Ext.data.Store
    The new Ext.data.Store object
  • colModel : Ext.grid.ColumnModel
    The new Ext.grid.ColumnModel object
返回值:
  • void
GridPanel
relayEvents( Object o, Array events ) : void
从指定的Observable上传递选择的事件就好像被当前对象触发一样。
从指定的Observable上传递选择的事件就好像被当前对象触发一样。
参数:
  • o : Object
    该Observable上的事件被当前对象传递。
  • events : Array
    传递的数组名。
返回值:
  • void
Observable
removeAll ( [ Boolean autoDestroy ] ) : Array
从当前容器中删除所有组件。
从当前容器中删除所有组件。
参数:
  • autoDestroy : Boolean
    (可选) 此参数为true时将自动调用 被删组件的 Ext.Component.destroy 方法。 默认为当前容器的 autoDestroy 配置值。
返回值:
  • Array
    被销毁的组件数组
Container
removeClass ( string cls ) : Ext.Component
从组件底层的元素上删除一个CSS类。
从组件底层的元素上删除一个CSS类。
参数:
  • cls : string
    需要移除的CSS类名
返回值:
  • Ext.Component
    this
Component
removeListener( String eventName, Function handler, [Object scope] ) : void
删除一个事件处理器。
删除一个事件处理器。
参数:
  • eventName : String
    处理器关联的事件类型。
  • handler : Function
    移除的处理器。 这应该是传递到addListener里的方法的引用。
  • scope : Object
    （可选）处理器指定的初始作用域。
返回值:
  • void
Observable
removeProperty ( String prop ) : void
从grid移除属性。
从grid移除属性。
参数:
  • prop : String
    需要移除的属性名
返回值:
  • void
PropertyGrid
render ( [ Element/HTMLElement/String container ], [ String/Number position ] ) : void
在传递进来的HTML元素中渲染当前组件。...

在传递进来的HTML元素中渲染当前组件。

如果你正在使用一个Container 对象放置当前组件，那么请不要使用render方法。

当容器第一次被渲染时，它的子组件将会被容器的 layout 管理器渲染。

某些布局管理器允许动态添加子组件。它们包括 Ext.layout.CardLayout, Ext.layout.AnchorLayout, Ext.layout.FormLayout, Ext.layout.TableLayout。

当一个新的子组件被添加时，如果容器已经被渲染了， 你可能需要调用容器的 doLayout 方法来刷新视图，它将导致所有没有被渲染的子组件进行渲染操作。 此操作是必须的，这样你可以添加多个子组件而只刷新一次layout。

当创建复杂的UI时，非常重要的一点是，请记住调整子项目的尺寸和位置是容器的 layout 管理器的职责。 如果你希望子项目的尺寸对用户交互作出反应， 你必须为容器配置一个布局管理器，它将创建和管理你心里想要的那种布局。

忽略容器的layout 配置意味着将会使用一个基本的布局管理器，它除了按次序把子组件 渲染到容器中之外什么事情都不做。 这种情况下，任何尺寸和位置的调整操作都不会发生。

参数:
  • container : Element/HTMLElement/String
    (可选) 需要在其中渲染当前组件的元素。 如果它是从一个已存在的标签中创建的，此参数应该被忽略。
  • position : String/Number
    (可选) 容器中的一个元素ID或者一个DOM节点索引， 当前组件将会被插入到它前面 (默认append到容器的尾部)
返回值:
  • void
Component
resumeEvents() : void
重新开始触发事件。(参见suspendEvents) 如果事件以queueSuspended参数被挂起，则在事件被挂起时 ...
重新开始触发事件。(参见 suspendEvents) 如果事件以queueSuspended 参数被挂起，则在事件被挂起时触发的事件会被传递到所有的监听器上
参数:
  • 无。
返回值:
  • void
Observable
setAutoScroll ( Boolean scroll ) : Ext.BoxComponent
设置该组件内容溢出时是否自动显示滚动条。
设置该组件内容溢出时是否自动显示滚动条。
参数:
  • scroll : Boolean
    值为true的话组件自动显示滚动条。
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setHeight ( Mixed height ) : Ext.BoxComponent
设置此组件的高度。该方法将触发resize事件。
设置此组件的高度。该方法将触发resize事件。
参数:
  • height : Mixed
    The new height to set.
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setIconClass ( String cls ) : void
设置CSS类，为当前panel提供图标图片。 如果已经设置了...
设置CSS类，为当前panel提供图标图片。 如果已经设置了，此方法将会替换任何现有的图标类并在完成之后触发 iconchange 事件。
参数:
  • cls : String
    新的CSS类名
返回值:
  • void
Panel
setPagePosition ( Number x , Number y ) : Ext.BoxComponent
设置组件在页面中的XY位置。 如果需要设置left和top值 ，请使用...
设置组件在页面中的XY位置。 如果需要设置left和top值 ，请使用setPosition方法。 该方法触发move事件。
参数:
  • x : Number
    The new x position
  • y : Number
    The new y position
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setPosition ( Number left , Number top ) : Ext.BoxComponent
设置组件的left和top值。设置组件的页面XY值，请使用setPagePosition方法。该方法触发...
设置组件的left和top值。设置组件的页面XY值，请使用setPagePosition方法。该方法触发move事件。
参数:
  • left : Number
    The new left
  • top : Number
    The new top
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setProperty ( String prop , Mixed value , [ Boolean create ] ) : void
设置属性值。
设置属性值。
参数:
  • prop : String
    需要设置的属性名称
  • value : Mixed
    需要测试的值
  • create : Boolean
    (可选) 为true，如果属性不存在则创建，默认为false。
返回值:
  • void
PropertyGrid
setSize ( Mixed width , Mixed height ) : Ext.BoxComponent
设置BoxComponent的宽度和高度。 此方法触发resize事件...
设置BoxComponent的宽度和高度。 此方法触发resize事件。此方法可以接收单独的width或者height值作为参数， 或者你可以传递像这样的一个size对象： {width:10, height:20} 。
参数:
  • width : Mixed
    设置的新的width值。这可以是：
    • 一个Number类型指定Element新的宽度 Ext.Element.defaultUnit(默认为像素 :'px')。
    • 一个String类型用于设置width的CSS样式。
    • 一个size对象格式为 {width: widthValue, height: heightValue} 。
    • 值为 undefined 时，保留原来的width不变。
  • height : Mixed
    设置的新的height值(如果第一个参数传递了一个size对象，此参数没有必要传递)。这可以是：
    • 一个Number类型指定Element新的高度 Ext.Element.defaultUnit(默认为像素 :'px')。
    • 一个String类型用于设置height的CSS样式。也有可能不会被使用到。
    • 值为 undefined 时，保留原来的height不变。
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setSource ( Object source ) : void
设置包含属性值的源数据对象。数据对象包含一个或多个键/值对，表示一个对象的所有属性...
设置包含属性值的源数据对象。 数据对象包含一个或多个键/值对，表示一个对象的所有属性， 它将被显示在grid中； 并且，此数据将会被自动加载到grid的 store中。 如果需要，这些属性值必须以特定的数据格式提供， 否则将会全部被假定成string型。 如果grid中已经包含了数据，此方法将会覆盖所有现有的数据。 另见source 配置项。 示例用法:
grid.setSource({
    "(name)": "My Object",
    "Created": new Date(Date.parse('10/15/2006')),  // date type
    "Available": false,  // boolean type
    "Version": .01,      // decimal type
    "Description": "A test object"
});
参数:
  • source : Object
    The data object
返回值:
  • void
PropertyGrid
setTitle ( String title , [ String iconCls ] ) : void
为panel设置标题文本，也可选择设置 icon class。...

为panel设置标题文本，也可选择设置 icon class。

为了能够设置标题，必须已经为Panel创建了一个header元素。 要么通过向Panel上注册一个非空的 title ，或者配置 header: true ，可触发此操作(译者注：指为Panel创建header元素)。

参数:
  • title : String
    需要设置的标题文本
  • iconCls : String
    (可选) iconCls 一个用户定义的CSS类，为当前panel提供图标图片。
返回值:
  • void
Panel
setVisible ( Boolean visible ) : Ext.Component
工具方法，通过使用布尔值隐藏或者显示当前组件。
工具方法，通过使用布尔值隐藏或者显示当前组件。
参数:
  • visible : Boolean
    true时显示，false时隐藏
返回值:
  • Ext.Component
    this
Component
setWidth ( Mixed width ) : Ext.BoxComponent
设置组件的宽度。 此方法触发resize事件。
设置组件的宽度。 此方法触发resize事件。
参数:
  • width : Mixed
    The new width to set.
返回值:
  • Ext.BoxComponent
    this
BoxComponent
show () : Ext.Component
显示当前组件。监听' beforeshow' 事件，返回 false 取消显示组件...
显示当前组件。监听' beforeshow' 事件，返回 false 取消显示组件。在显示组件之后触发' show' 事件。
参数:
  • 无。
返回值:
  • Ext.Component
    this
Component
startEditing ( Number rowIndex , Number colIndex ) : void
开始编辑指定的row/column
开始编辑指定的row/column
参数:
  • rowIndex : Number
  • colIndex : Number
返回值:
  • void
EditorGridPanel
stopEditing ( [ Boolean cancel ] ) : void
终止所有当前正在进行的编辑
终止所有当前正在进行的编辑
参数:
  • cancel : Boolean
    (可选) true撤销更改
返回值:
  • void
EditorGridPanel
suspendEvents( Boolean queueSuspended ) : void
暂停触发所有的事件。 (参看resumeEvents)
暂停触发所有的事件。（参看 resumeEvents)
参数:
  • queueSuspended : Boolean
    如果传递为true则排列好暂停的事件使得在调用 resumeEvents 后再触发它们，而不是抛弃所有暂停的事件。
返回值:
  • void
Observable
syncSize () : Ext.BoxComponent
强制组件的大小按照此组件底层元素当前的高度和宽度计算。
强制组件的大小按照此组件底层元素当前的高度和宽度计算。
参数:
  • 无。
返回值:
  • Ext.BoxComponent
    this
BoxComponent
toggleCollapse ( Boolean animate ) : Ext.Panel
根据panel的当前状态，执行expand或者 collapse操作 的快捷方式。
根据panel的当前状态，执行expand或者 collapse操作 的快捷方式。
参数:
  • animate : Boolean
    True将会在转换过程中使用动画效果，否则为false (默认为panel的animCollapse 配置项的值)
返回值:
  • Ext.Panel
    this
Panel
un( String eventName, Function handler, [Object scope] ) : void
删除一个事件处理器(removeListener方法的简写形式)
删除一个事件处理器(removeListener方法的简写形式。)
参数:
  • eventName : String
    处理器关联的事件类型
  • handler : Function
    被删除的处理器 这应该是传入 addListener 中的方法的引用。
  • scope : Object
    （可选）为处理器指定的初始作用域。
返回值:
  • void
Observable
update ( Mixed htmlOrData , [ Boolean loadScripts ], [ Function callback ] ) : void
刷新组件的内部区域。
刷新组件的内部区域。
参数:
  • htmlOrData : Mixed
    如果已经通过tpl为当前组件配置了一个模板，那么 将会使用此参数来装配模板。 如果没有为当前组件配置模板，组件的内容区域将会通过Ext.Element 进行刷新。
  • loadScripts : Boolean
    (可选)只用在使用html配置时此参数才合法。默认为false。
  • callback : Function
    (可选)只用在使用html配置时此参数才合法。 当脚本加载完成时回调函数才被执行。
返回值:
  • void
Component
updateBox ( Object box ) : Ext.BoxComponent
设置此组件底层元素的盒子模型尺寸。(译者注：盒子模型是CSS术语，详细资料请自行搜索。)
设置此组件底层元素的盒子模型尺寸。(译者注：盒子模型是CSS术语，详细资料请自行搜索。)
参数:
  • box : Object
    一个格式为{x, y, width, height}的对象
返回值:
  • Ext.BoxComponent
    this
BoxComponent

公共事件

Event Defined By
activate : ( Ext.Panel p )
当Panel被设置为视觉活动状态之后触发。 注意Panel不直接支持活动状体，但是Panel的一些子类...
当Panel被设置为视觉活动状态之后触发。 注意Panel不直接支持活动状体，但是Panel的一些子类 (例如 Ext.Window)支持。 作为TabPanel子组件的Panel，在TabPanel的控制之下触发activate和deactivate事件。
监听器将会以如下参数格式被调用:
  • p : Ext.Panel
    被激活的Panel.
Panel
added : ( Ext.Component this , Ext.Container ownerCt , number index )
当一个组件被添加到一个Ext.Container时触发
当一个组件被添加到一个Ext.Container时触发
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • ownerCt : Ext.Container
    用于组件的容器
  • index : number
    添加组件的位置
Component
afteredit : ( Object e )
在一个单元格被编辑之后触发。 编辑事件的对象包含以下属性...
在一个单元格被编辑之后触发。 编辑事件的对象包含以下属性
  • grid - 当前的grid
  • record - 当前编辑的记录
  • field - 当前编辑的字段名
  • value - 编辑后的值
  • originalValue - 字段被编辑之前的原始值。
  • row - grid的行序号
  • column - grid的列序号
grid.on('afteredit', afterEdit, this );

function afterEdit(e) {
    // execute an XHR to send/commit data to the server, in callback do (if successful):
    e.record.commit();
};
监听器将会以如下的参数格式调用:
  • e : Object
    An edit event (see above for description)
EditorGridPanel
afterrender : ( Ext.Component this )
在组件渲染完成之后触发...

在组件渲染完成之后触发。

afterrender事件在当前组件被rendered 结束之后、在为组件定义的所有afterRender方法执行之后 触发，并且，如果有stateful， 也在状态被保存之后才触发。

监听器将会以如下参数格式被调用:
  • this : Ext.Component
Component
beforeclose : ( Ext.Panel p )
在Panel被关闭之前触发。 注意，Panel不直接支持关闭操作，但是Panel的一些子类(例如...
在Panel被关闭之前触发。 注意，Panel不直接支持关闭操作，但是Panel的一些子类(例如 Ext.Window) ，或者一个位于Ext.TabPanel中的Panel支持。 此事件仅被应用到这些子类中。处理函数可以返回false以取消关闭操作。
监听器将会以如下参数格式被调用:
  • p : Ext.Panel
    正在被关闭的Panel.
Panel
beforecollapse : ( Ext.Panel p , Boolean animate )
在Panel被折叠之前触发。监听器可以返回false取消折叠。
在Panel被折叠之前触发。监听器可以返回false取消折叠。
监听器将会以如下参数格式被调用:
  • p : Ext.Panel
    被折叠的Panel
  • animate : Boolean
    如果折叠操作使用了动画效果，此参数为true，其它为false
Panel
beforedestroy : ( Ext.Component this )
在组件 destroyed 之前触发。 在事件监听器中返回false以停止 destroy 操作。
在组件 destroyed 之前触发。 在事件监听器中返回false以停止 destroy 操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforeedit : ( Object e )
在开始编辑单元格之前触发。edit事件对象包含如下参数...
在开始编辑单元格之前触发。edit事件对象包含如下参数:
  • grid - 当前grid
  • record - 被编辑过的记录
  • field - 被编辑过的字段名
  • value - 设置到被编辑字段的值。
  • row - grid行序号
  • column - grid列序号
  • cancel - 将此属性设置为true可取消编辑，或者从程序中返回false。
监听器将会以如下的参数格式调用:
  • e : Object
    edit事件(见以上介绍)
EditorGridPanel
beforeexpand : ( Ext.Panel p , Boolean animate )
在Panel被展开之前触发。监听器可以返回false取消展开操作。
在Panel被展开之前触发。监听器可以返回false取消展开操作。
监听器将会以如下参数格式被调用:
  • p : Ext.Panel
    被展开的Panel
  • animate : Boolean
    如果展开操作使用动画效果，为true，其它为false
Panel
beforehide : ( Ext.Component this )
在调用hide方法隐藏组件之前触发。 在事件监听器中返回false可以停止隐藏操作。
在调用hide方法隐藏组件之前触发。 在事件监听器中返回false可以停止隐藏操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforepropertychange : ( Object source , String recordId , Mixed value , Mixed oldValue )
在一个参数的值改变之前触发。 处理器可以返回一个false以取消改变 (此方法会在内部在属性的record上调用 Ext.data.Record.reject)。
在一个参数的值改变之前触发。 处理器可以返回一个false以取消改变 (此方法会在内部在属性的record上调用 Ext.data.Record.reject)。
监听器将会被以如下的参数格式调用:
  • source : Object
    一个数据对象，被用作grid的数据源(传递的对象要与 source 中对应的属性保持一致)。
  • recordId : String
    store中record对应的id
  • value : Mixed
    修改的属性值
  • oldValue : Mixed
    修改前的属性值
PropertyGrid
beforerender : ( Ext.Component this )
在组件被rendered 之前触发。 在事件监听器中返回false可以停止render 操作。
在组件被rendered 之前触发。 在事件监听器中返回false可以停止render 操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforeshow : ( Ext.Component this )
在调用show()方法现实组件之前触发。 事件处理函数返回false可以停止show。
在调用show 方法现实组件之前触发。 事件处理函数返回false可以停止show。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforestaterestore : ( Ext.Component this , Object state )
在组件状态恢复之前触发。返回false停止恢复状态操作。
在组件状态恢复之前触发。返回false停止恢复状态操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    StateProvider返回的状态哈希值。 如果没有禁止此事件，那么状态对象会被传递给applyState。 默认情况下，这样简单地把属性值拷贝到当前组件中。 可以覆盖此方法以提供自定的状态恢复操作。
Component
beforestatesave : ( Ext.Component this , Object state )
在组件状态被保存到配置的状态提供者之前触发。 返回false可以停止保存。
在组件状态被保存到配置的状态提供者之前触发。 返回false可以停止保存。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    状态值哈希。 这由在组件上调用getState() 方法决定。 此方法必须由开发者提供，返回是否需要对状态进行描述，默认情况下， Ext.Component有一个空实现。
Component
bodyresize : ( Ext.Panel p , Number width , Number height )
在Panel被调整尺寸之后触发。
在Panel被调整尺寸之后触发。
监听器将会以如下参数格式被调用:
  • p : Ext.Panel
    被调整尺寸的Panel
  • width : Number
    Panel body的新宽度。
  • height : Number
    Panel body的新高度。
Panel
bodyscroll : ( Number scrollLeft , Number scrollTop )
Fires when the body element is scrolled
Fires when the body element is scrolled
Listeners will be called with the following arguments:
  • scrollLeft : Number
  • scrollTop : Number
GridPanel
cellclick : ( Grid this , Number rowIndex , Number columnIndex , Ext.EventObject e )
Fires when a cell is clicked. The data for the cell is drawn from the Record for this row. To access the data in the ...
Fires when a cell is clicked. The data for the cell is drawn from the Record for this row. To access the data in the listener function use the following technique:

                                    function(grid, rowIndex, columnIndex, e) {
    var record = grid.getStore().getAt(rowIndex);  // Get the Record
    var fieldName = grid.getColumnModel().getDataIndex(columnIndex); // Get field name
    var data = record.get(fieldName);
}
Listeners will be called with the following arguments:
  • this : Grid
  • rowIndex : Number
  • columnIndex : Number
  • e : Ext.EventObject
GridPanel
cellcontextmenu : ( Grid this , Number rowIndex , Number cellIndex , Ext.EventObject e )
Fires when a cell is right clicked
Fires when a cell is right clicked
Listeners will be called with the following arguments:
  • this : Grid
  • rowIndex : Number
  • cellIndex : Number
  • e : Ext.EventObject
GridPanel
celldblclick : ( Grid this , Number rowIndex , Number columnIndex , Ext.EventObject e )
Fires when a cell is double clicked
Fires when a cell is double clicked
Listeners will be called with the following arguments:
  • this : Grid
  • rowIndex : Number
  • columnIndex : Number
  • e : Ext.EventObject
GridPanel
cellmousedown : ( Grid this , Number rowIndex , Number columnIndex , Ext.EventObject e )
Fires before a cell is clicked
Fires before a cell is clicked
Listeners will be called with the following arguments:
  • this : Grid
  • rowIndex : Number
  • columnIndex : Number
  • e : Ext.EventObject
GridPanel
click : ( Ext.EventObject e )
The raw click event for the entire grid.
The raw click event for the entire grid.
Listeners will be called with the following arguments:
  • e : Ext.EventObject
GridPanel
close : ( Ext.Panel p )
在Panel被关闭之后触发。注意，Panel不直接提供关闭操作， 但是Panel的一些子类(例如...
在Panel被关闭之后触发。注意，Panel不直接提供关闭操作， 但是Panel的一些子类(例如 Ext.Window) ，或者处于Ext.TabPanel中的Panel支持。
监听器将会以如下参数格式被调用:
  • p : Ext.Panel
    被关闭的Panel.
Panel
collapse : ( Ext.Panel p )
在Panel被折叠后触发。
在Panel被折叠后触发。
监听器将会以如下参数格式被调用:
  • p : Ext.Panel
    被折叠的Panel
Panel
columnmove : ( Number oldIndex , Number newIndex )
Fires when the user moves a column
Fires when the user moves a column
Listeners will be called with the following arguments:
  • oldIndex : Number
  • newIndex : Number
GridPanel
columnresize : ( Number columnIndex , Number newSize )
Fires when the user resizes a column
Fires when the user resizes a column
Listeners will be called with the following arguments:
  • columnIndex : Number
  • newSize : Number
GridPanel
containerclick : ( Grid this , Ext.EventObject e )
Fires when the container is clicked. The container consists of any part of the grid body that is not covered by a row...
Fires when the container is clicked. The container consists of any part of the grid body that is not covered by a row.
Listeners will be called with the following arguments:
  • this : Grid
  • e : Ext.EventObject
GridPanel
containercontextmenu : ( Grid this , Ext.EventObject e )
Fires when the container is right clicked. The container consists of any part of the grid body that is not covered by...
Fires when the container is right clicked. The container consists of any part of the grid body that is not covered by a row.
Listeners will be called with the following arguments:
  • this : Grid
  • e : Ext.EventObject
GridPanel
containerdblclick : ( Grid this , Ext.EventObject e )
Fires when the container is double clicked. The container consists of any part of the grid body that is not covered b...
Fires when the container is double clicked. The container consists of any part of the grid body that is not covered by a row.
Listeners will be called with the following arguments:
  • this : Grid
  • e : Ext.EventObject
GridPanel
containermousedown : ( Grid this , Ext.EventObject e )
Fires before the container is clicked. The container consists of any part of the grid body that is not covered by a r...
Fires before the container is clicked. The container consists of any part of the grid body that is not covered by a row.
Listeners will be called with the following arguments:
  • this : Grid
  • e : Ext.EventObject
GridPanel
contextmenu : ( Ext.EventObject e )
The raw contextmenu event for the entire grid.
The raw contextmenu event for the entire grid.
Listeners will be called with the following arguments:
  • e : Ext.EventObject
GridPanel
dblclick : ( Ext.EventObject e )
The raw dblclick event for the entire grid.
The raw dblclick event for the entire grid.
Listeners will be called with the following arguments:
  • e : Ext.EventObject
GridPanel
deactivate : ( Ext.Panel p )
在Panel被视觉上失去活动状态之后触发。 注意，Panel不直接支持此操作，但是Panel的一些子类...
在Panel被视觉上失去活动状态之后触发。 注意，Panel不直接支持此操作，但是Panel的一些子类 (例如Ext.Window)支持。 作为TabPanel的子组件的Panel将会在TabPanel的控制之下触发activate 和deactivate事件。
监听器将会以如下参数格式被调用:
  • p : Ext.Panel
    失去活动状态的Panel
Panel
destroy : ( Ext.Component this )
在组件被销毁之后触发。
在组件被destroyed之后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
disable : ( Ext.Component this )
在组件被设置为无效状态后触发。
在组件被设置为无效状态后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
enable : ( Ext.Component this )
当组件被设置为有效(enabled)之后触发。
当组件被设置为有效(enabled)之后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
expand : ( Ext.Panel p )
当Panel已经展开之后触发。
当Panel已经展开之后触发。
监听器将会以如下参数格式被调用:
  • p : Ext.Panel
    已经被展开的Panel.
Panel
groupchange : ( Grid this , String groupField )
Fires when the grid's grouping changes (only applies for grids with a GroupingView)
Fires when the grid's grouping changes (only applies for grids with a GroupingView)
Listeners will be called with the following arguments:
  • this : Grid
  • groupField : String
    A string with the grouping field, null if the store is not grouped.
GridPanel
groupclick : ( Grid this , String groupField , String groupValue , Ext.EventObject e )
Fires when group header is clicked. Only applies for grids with a GroupingView.
Fires when group header is clicked. Only applies for grids with a GroupingView .
Listeners will be called with the following arguments:
  • this : Grid
  • groupField : String
  • groupValue : String
  • e : Ext.EventObject
GridPanel
groupcontextmenu : ( Grid this , String groupField , String groupValue , Ext.EventObject e )
Fires when group header is right clicked. Only applies for grids with a GroupingView.
Fires when group header is right clicked. Only applies for grids with a GroupingView .
Listeners will be called with the following arguments:
  • this : Grid
  • groupField : String
  • groupValue : String
  • e : Ext.EventObject
GridPanel
groupdblclick : ( Grid this , String groupField , String groupValue , Ext.EventObject e )
Fires when group header is double clicked. Only applies for grids with a GroupingView.
Fires when group header is double clicked. Only applies for grids with a GroupingView .
Listeners will be called with the following arguments:
  • this : Grid
  • groupField : String
  • groupValue : String
  • e : Ext.EventObject
GridPanel
groupmousedown : ( Grid this , String groupField , String groupValue , Ext.EventObject e )
Fires before a group header is clicked. Only applies for grids with a GroupingView.
Fires before a group header is clicked. Only applies for grids with a GroupingView .
Listeners will be called with the following arguments:
  • this : Grid
  • groupField : String
  • groupValue : String
  • e : Ext.EventObject
GridPanel
headerclick : ( Grid this , Number columnIndex , Ext.EventObject e )
Fires when a header is clicked
Fires when a header is clicked
Listeners will be called with the following arguments:
  • this : Grid
  • columnIndex : Number
  • e : Ext.EventObject
GridPanel
headercontextmenu : ( Grid this , Number columnIndex , Ext.EventObject e )
Fires when a header is right clicked
Fires when a header is right clicked
Listeners will be called with the following arguments:
  • this : Grid
  • columnIndex : Number
  • e : Ext.EventObject
GridPanel
headerdblclick : ( Grid this , Number columnIndex , Ext.EventObject e )
Fires when a header cell is double clicked
Fires when a header cell is double clicked
Listeners will be called with the following arguments:
  • this : Grid
  • columnIndex : Number
  • e : Ext.EventObject
GridPanel
headermousedown : ( Grid this , Number columnIndex , Ext.EventObject e )
Fires before a header is clicked
Fires before a header is clicked
Listeners will be called with the following arguments:
  • this : Grid
  • columnIndex : Number
  • e : Ext.EventObject
GridPanel
hide : ( Ext.Component this )
在组件被隐藏之后触发。 当调用hide 方法隐藏组件之后触发。
在组件被隐藏之后触发。 当调用hide 方法隐藏组件之后触发。
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
iconchange : ( Ext.Panel p , String The , String The )
当Panel的图标被set或者 changed 之后触发。
当Panel的图标被set或者 changed 之后触发。
监听器将会以如下参数格式被调用:
  • p : Ext.Panel
    icon class被变化的Panel
  • The : String
    新icon类
  • The : String
    旧icon类
Panel
keydown : ( Ext.EventObject e )
The raw keydown event for the entire grid.
The raw keydown event for the entire grid.
Listeners will be called with the following arguments:
  • e : Ext.EventObject
GridPanel
keypress : ( Ext.EventObject e )
The raw keypress event for the entire grid.
The raw keypress event for the entire grid.
Listeners will be called with the following arguments:
  • e : Ext.EventObject
GridPanel
mousedown : ( Ext.EventObject e )
The raw mousedown event for the entire grid.
The raw mousedown event for the entire grid.
Listeners will be called with the following arguments:
  • e : Ext.EventObject
GridPanel
mouseout : ( Ext.EventObject e )
The raw mouseout event for the entire grid.
The raw mouseout event for the entire grid.
Listeners will be called with the following arguments:
  • e : Ext.EventObject
GridPanel
mouseover : ( Ext.EventObject e )
The raw mouseover event for the entire grid.
The raw mouseover event for the entire grid.
Listeners will be called with the following arguments:
  • e : Ext.EventObject
GridPanel
mouseup : ( Ext.EventObject e )
The raw mouseup event for the entire grid.
The raw mouseup event for the entire grid.
Listeners will be called with the following arguments:
  • e : Ext.EventObject
GridPanel
move : ( Ext.Component this , Number x , Number y )
在组件移动之后触发。
在组件移动之后触发。
监听器将会用如下的参数格式来调用:
  • this : Ext.Component
  • x : Number
    The new x position
  • y : Number
    The new y position
BoxComponent
propertychange : ( Object source , String recordId , Mixed value , Mixed oldValue )
当一个属性值发生改变时触发。
当一个属性值发生改变时触发。
监听器将会被以如下的参数格式调用:
  • source : Object
    一个数据对象，被用作grid的数据源(传递的对象要与 source 中对应的属性保持一致)。
  • recordId : String
    store中record对应的id
  • value : Mixed
    修改的属性值
  • oldValue : Mixed
    修改前的属性值
PropertyGrid
reconfigure : ( Grid this , Ext.data.Store store , Ext.grid.ColumnModel colModel )
Fires when the grid is reconfigured with a new store and/or column model.
Fires when the grid is reconfigured with a new store and/or column model.
Listeners will be called with the following arguments:
  • this : Grid
  • store : Ext.data.Store
    The new store
  • colModel : Ext.grid.ColumnModel
    The new column model
GridPanel
removed : ( Ext.Component this , Ext.Container ownerCt )
当一个组件被从Ext.Container容器中删除时触发
当一个组件被从Ext.Container容器中删除时触发
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • ownerCt : Ext.Container
    持有组件的容器
Component
render : ( Ext.Component this )
在组件被渲染之后触发。
在组件被 rendered(渲染) 之后触发。
监听器将以如下的参数格式被调用:
  • this : Ext.Component
Component
resize : ( Ext.Component this , Number adjWidth , Number adjHeight , Number rawWidth , Number rawHeight )
在组件被调整大小之后触发。
在组件被调整大小之后触发。
监听器将以如下的参数格式被调用:
  • this : Ext.Component
  • adjWidth : Number
    这是width调整后的值
  • adjHeight : Number
    这是height调整后的值
  • rawWidth : Number
    这是width原来的值
  • rawHeight : Number
    这是height原来的值
BoxComponent
rowbodyclick : ( Grid this , Number rowIndex , Ext.EventObject e )
Fires when the row body is clicked. Only applies for grids with enableRowBody configured.
Fires when the row body is clicked. Only applies for grids with enableRowBody configured.
Listeners will be called with the following arguments:
  • this : Grid
  • rowIndex : Number
  • e : Ext.EventObject
GridPanel
rowbodycontextmenu : ( Grid this , Number rowIndex , Ext.EventObject e )
Fires when the row body is right clicked. Only applies for grids with enableRowBody configured.
Fires when the row body is right clicked. Only applies for grids with enableRowBody configured.
Listeners will be called with the following arguments:
  • this : Grid
  • rowIndex : Number
  • e : Ext.EventObject
GridPanel
rowbodydblclick : ( Grid this , Number rowIndex , Ext.EventObject e )
Fires when the row body is double clicked. Only applies for grids with enableRowBody configured.
Fires when the row body is double clicked. Only applies for grids with enableRowBody configured.
Listeners will be called with the following arguments:
  • this : Grid
  • rowIndex : Number
  • e : Ext.EventObject
GridPanel
rowbodymousedown : ( Grid this , Number rowIndex , Ext.EventObject e )
Fires before the row body is clicked. Only applies for grids with enableRowBody configured.
Fires before the row body is clicked. Only applies for grids with enableRowBody configured.
Listeners will be called with the following arguments:
  • this : Grid
  • rowIndex : Number
  • e : Ext.EventObject
GridPanel
rowclick : ( Grid this , Number rowIndex , Ext.EventObject e )
Fires when a row is clicked
Fires when a row is clicked
Listeners will be called with the following arguments:
  • this : Grid
  • rowIndex : Number
  • e : Ext.EventObject
GridPanel
rowcontextmenu : ( Grid this , Number rowIndex , Ext.EventObject e )
Fires when a row is right clicked
Fires when a row is right clicked
Listeners will be called with the following arguments:
  • this : Grid
  • rowIndex : Number
  • e : Ext.EventObject
GridPanel
rowdblclick : ( Grid this , Number rowIndex , Ext.EventObject e )
Fires when a row is double clicked
Fires when a row is double clicked
Listeners will be called with the following arguments:
  • this : Grid
  • rowIndex : Number
  • e : Ext.EventObject
GridPanel
rowmousedown : ( Grid this , Number rowIndex , Ext.EventObject e )
Fires before a row is clicked
Fires before a row is clicked
Listeners will be called with the following arguments:
  • this : Grid
  • rowIndex : Number
  • e : Ext.EventObject
GridPanel
show : ( Ext.Component this )
在调用show 方法显示组件之后触发。
在调用show 方法显示组件之后触发。
监听器将会用如下的参数格式被调用:
  • this : Ext.Component
Component
sortchange : ( Grid this , Object sortInfo )
Fires when the grid's store sort changes
Fires when the grid's store sort changes
Listeners will be called with the following arguments:
  • this : Grid
  • sortInfo : Object
    An object with the keys field and direction
GridPanel
staterestore : ( Ext.Component this , Object state )
组件状态被存储之后触发。
组件状态被存储之后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    StateProvider返回的状态哈希值。 如果没有禁止此事件，那么状态对象会被传递给applyState。 默认情况下，这样简单地把属性值拷贝到当前组件中。 可以覆盖此方法以提供自定的状态恢复操作。
Component
statesave : ( Ext.Component this , Object state )
在组件状态被保存到所配置的状态提供者之后触发。
在组件状态被保存到所配置的状态提供者之后触发。
监听器将会用如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    状态值hash。 这是由在足见上调用getState() 方法决定的。 开发者必须提供此方法以返回是否需要恢复状态，默认情况下， Ext.Component有一个空实现。
Component
titlechange : ( Ext.Panel p , String The )
在Panel的标题被set或者 changed 之后触发。
在Panel的标题被set或者 changed 之后触发。
监听器将会以如下参数格式被调用:
  • p : Ext.Panel
    标题被改变的Panel.
  • The : String
    新的标题。
Panel
validateedit : ( Object e )
在单元格被编辑之后，值被设置到record之前触发。返回false取消改变的值...
在单元格被编辑之后，值被设置到record之前触发。返回false取消改变的值。 编辑事件的对象包含以下属性
  • grid - 当前grid
  • record - 当前编辑的记录
  • field - 当前编辑的字段名
  • value - 编辑后的值
  • originalValue - 字段被编辑之前的原始值
  • row - grid的行序号
  • column - grid的列序号
  • 设置此参数为true，将取消当前的编辑，或者返回false值。
使用示例演示如果移除红色三角形的标记(指被编辑过的记录)指定的record(不是所有的)。通过grid的validateedit事件，可以将它移除，(例如)指定编辑某一行不让它出现该标记，可以直接设置record中该字段编辑后的值:
grid.on('validateedit', function(e) {
  var myTargetRow = 6;

  if (e.row == myTargetRow) {
    e.cancel = true;
    e.record.data[e.field] = e.value;
  }
});
监听器将会以如下的参数格式调用:
  • e : Object
    An edit event (see above for description)
EditorGridPanel
viewready : ( Grid this )
Fires when the grid view is available (use this for selecting a default row).
Fires when the grid view is available (use this for selecting a default row).
Listeners will be called with the following arguments:
  • this : Grid
GridPanel


Class Ext.grid.PropertyRecord

包: | Ext.grid
定义类的文件: | PropertyGrid.js
类: | PropertyRecord
继承自: | Object
一个特殊的Ext.data.Record 类型，用来表示一个键/值对，并与Ext.grid.PropertyGrid协同工作。 在典型的情况下，不需要直接创建PropertyRecord的实例，因为通过简单地使用适当的数据配置项， 它们可以在后台被自动创建：要么通过Ext.grid.PropertyGrid.source配置属性， 或者通过调用Ext.grid.PropertyGrid.setSource方法 创建。然而，在必要的时候， 这些records也可以像如以下例子所示那样直接创建。
示例用法:
var rec = new Ext.grid.PropertyRecord({
    name: 'Birthday',
    value: new Date(Date.parse('05/26/1972'))
});
// 向一个已经存在的grid中添加一条记录
grid.store.addSorted(rec);

公共属性

该类没有公共属性。

公共方法

该类没有公共方法。

公共事件

该类没有公共事件。


Observable
    PropertyStore

Class Ext.grid.PropertyStore

包: | Ext.grid
定义类的文件: | PropertyGrid.js
类: | PropertyStore
继承自: | Observable
一个用户自定义的 Ext.grid.PropertyGrid's Ext.data.Store. 这个类处理自定义数据源之间的映射对象 支持grid和 Ext.grid.PropertyRecord 格式 需要与底层store的兼容性。一般来说，这 类不应该直接使用 - grid的数据应 从底层stroe通过访问 store 属性.

配置项

Config Options Defined By
listeners : Object
一个包含一个或多个事件处理器的配置对象，会在初始化的时候被添加到目标对象上...

一个包含一个或多个事件处理器的配置对象，会在初始化的时候被添加到目标对象上。 该配置对象应该是一个有效的监听器配置对象就像 addListener例子中指定的一样可一次附加多个处理器。

ExtJs Components上的DOM事件

一些 ExtJs Component 类导出时会选择一些DOM事件(例如 "click", "mouseover" 等等), 这通常只是在有额外的值可以被添加时发生。例如DataView类的 click事件会传递被点击的节点。也可以直接在Component的HTMLElementevent上访问DOM事件，但必需在Component被渲染后监听器才能添加到Element 上。可以按照以下步骤添加插件:

// 插件会用一个监听器配置对象进行配置。
//该组件会被添加到所有处理方法的参数列表上。
Ext.DomObserver = Ext.extend(Object, {
    constructor: function(config) {
        this.listeners = config.listeners ? config.listeners : config;
    },

    // 组件将自己传递进了插件的初始化方法里
    init: function(c) {
        var p, l = this.listeners;
        for (p in l) {
            if (Ext.isFunction(l[p])) {
                l[p] = this.createHandler(l[p], c);
            } else {
                l[p].fn = this.createHandler(l[p].fn, c);
            }
        }

        // 渲染后立即添加监听器到元素上
        c.render = c.render.createSequence(function() {
            var e = c.getEl();
            if (e) {
                e.on(l);
            }
        });
    },

    createHandler: function(fn, c) {
        return function(e) {
            fn.call(this, e, c);
        };
    }
});

var combo = new Ext.form.ComboBox({

    // 元素被点击后折叠
    plugins: [ new Ext.DomObserver({
        click: function(evt, comp) {
            comp.collapse();
        }
    })],
    store: myStore,
    typeAhead: true,
    mode: 'local',
    triggerAction: 'all'
});

Observable

公共属性

该类没有公共属性。

公共方法

Method Defined By
PropertyStore ( Ext.grid.Grid grid , Object source )
参数:
  • grid : Ext.grid.Grid
    为grid绑定数据源
  • source : Object
    数据源的配置对象
返回值:
  • void
PropertyStore
addEvents( Object|String o, string Optional. ) : void
添加指定的事件到事件列表上，事件会被该Observable触发。
添加指定的事件到事件列表上，事件会被该Observable触发。
参数:
  • o : Object|String
    以事件名作为属性true作为值的对象 或者当多个事件名被分开的传递时则为第一个事件名。
  • Optional. : string
    事件名被分开的传递时则为事件名。 用法:
    this.addEvents('storeloaded', 'storecleared');
返回值:
  • void
Observable
addListener( String eventName, Function handler, [Object scope], [Object options] ) : void
给对象添加事件处理器。
给对象添加事件处理器。
参数:
  • eventName : String
    监听的事件名。
  • handler : Function
    事件调用的方法
  • scope : Object
    （可选）处理方法执行的作用域 (this的引用 reference)。 如果被忽略。默认为触发事件的对象。
  • options : Object
    （可选）包含处理器配置和属性的对象。 可能包含以下的属性:
    • scope : Object
      处理方法执行的作用域(this的引用) 。 如果被忽略。默认为触发事件的对象。
    • delay : Number
      在触发事件后延迟调用处理器的毫秒数。
    • single : Boolean
      如果为True则添加一个处理器来处理下一次的事件触发（仅一次），然后移除自己。
    • buffer : Number
      使得处理器延迟指定毫秒数后预定的运行在 一个Ext.util.DelayedTask中 。 如果事件在时间内再一次被触发，原始的处理器不会被调用，但是新的处理器会预定的在他的位置上。
    • target : Observable
      如果事件在目标的Observable上触发则仅仅调用处理器， 否则 事件会从子类的Observable上冒泡

    组合选项
    使用这些选项参数,可能会组合出不同类型的监听器：

    一个延迟的，一次性的监听器。

    myDataView.on('click', this.onClick, this, {
single: true,
delay: 100
});

    一次调用附加多个处理器
    该方法同样支持传递一个包含指定的多个处理器的属性的配置对象参数。

    myGridPanel.on({
'click' : {
    fn: this.onClick,
    scope: this,
    delay: 100
},
'mouseover' : {
    fn: this.onMouseOver,
    scope: this
},
'mouseout' : {
    fn: this.onMouseOut,
    scope: this
}
});

    或者一个简写的语法：

    myGridPanel.on({
'click' : this.onClick,
'mouseover' : this.onMouseOver,
'mouseout' : this.onMouseOut,
 scope: this
});
返回值:
  • void
Observable
enableBubble( String/Array events ) :void
是否现在使得事件会被该Observable触发并调用 this.getBubbleTarget()方法在拥有者的继承树...

是否现在使得事件会被该Observable触发并调用 this.getBubbleTarget()方法在拥有者的继承树中冒泡。Observable的基础类中没有该方法的实现。

该方法一般被Ext.Components用来冒泡事件到拥有者的容器。参看Ext.Component.getBubbleTarget默认的实现 在Ext.Component中返回组件的直接拥有者。但是如果需要的是一个已知的目标，该方法可以被重写来更快的访问需求的目标。

例子:

Ext.override(Ext.form.Field, {
    // 添加方法到Field的initComponent上改变事件为冒泡
    initComponent : Ext.form.Field.prototype.initComponent.createSequence(function() {
        this.enableBubble('change');
    }),

    // 我们知道我们想让Field的事件冒泡到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() {
            // 如果样式被修改标题会变红。
            myForm.header.setStyle('color', 'red');
        }
    }
});
参数:
  • events : String/Array
    冒泡的事件名，或事件名数组
返回值:
  • void
Observable
fireEvent( String eventName, Object... args ) : Boolean
用传入的参数触发指定的事件 (减去事件名)。 一个事件可以被设置为冒泡 Obse...

用传入的参数触发指定的事件 (减去事件名)。

一个事件可以被设置为冒泡到Observable父类继承树(参看 Ext.Component.getBubbleTarget) 调用enableBubble实现。

参数:
  • eventName : String
    触发的事件名。
  • args : Object...
    传递给处理器的可变长度参数。
返回值:
  • Boolean
    如果有任何的处理器返回false则返回false，否则返回true。
Observable
hasListener( String eventName ) : Boolean
检测对象是否包含指定事件的任何监听器
检测对象是否包含指定事件的任何监听器
参数:
  • eventName : String
    检测的事件名
返回值:
  • Boolean
    如果事件被监听则为true，否则为false
Observable
on( String eventName, Function handler, [Object scope], [Object options] ) : void
给对象添加事件处理器 (addListener的简写形式)
给对象添加事件处理器 (addListener的简写形式。)
参数:
  • eventName : String
    监听的事件类型
  • handler : Function
    事件调用的方法
  • scope : Object
    （可选）处理方法执行时的作用域 (this 的引用)。 如果被忽略。默认为触发事件的对象。
  • options : Object
    可选 包含处理器配置的对象。
返回值:
  • void
Observable
purgeListeners() : void
移除对象上所有的监听器
移除对象上所有的监听器
参数:
  • 无。
返回值:
  • void
Observable
relayEvents( Object o, Array events ) : void
从指定的Observable上传递选择的事件就好像被当前对象触发一样。
从指定的Observable上传递选择的事件就好像被当前对象触发一样。
参数:
  • o : Object
    该Observable上的事件被当前对象传递。
  • events : Array
    传递的数组名。
返回值:
  • void
Observable
removeListener( String eventName, Function handler, [Object scope] ) : void
删除一个事件处理器。
删除一个事件处理器。
参数:
  • eventName : String
    处理器关联的事件类型。
  • handler : Function
    移除的处理器。 这应该是传递到addListener里的方法的引用。
  • scope : Object
    （可选）处理器指定的初始作用域。
返回值:
  • void
Observable
resumeEvents() : void
重新开始触发事件。(参见suspendEvents) 如果事件以queueSuspended参数被挂起，则在事件被挂起时 ...
重新开始触发事件。(参见 suspendEvents) 如果事件以queueSuspended 参数被挂起，则在事件被挂起时触发的事件会被传递到所有的监听器上
参数:
  • 无。
返回值:
  • void
Observable
suspendEvents( Boolean queueSuspended ) : void
暂停触发所有的事件。 (参看resumeEvents)
暂停触发所有的事件。（参看 resumeEvents)
参数:
  • queueSuspended : Boolean
    如果传递为true则排列好暂停的事件使得在调用 resumeEvents 后再触发它们，而不是抛弃所有暂停的事件。
返回值:
  • void
Observable
un( String eventName, Function handler, [Object scope] ) : void
删除一个事件处理器(removeListener方法的简写形式)
删除一个事件处理器(removeListener方法的简写形式。)
参数:
  • eventName : String
    处理器关联的事件类型
  • handler : Function
    被删除的处理器 这应该是传入 addListener 中的方法的引用。
  • scope : Object
    （可选）为处理器指定的初始作用域。
返回值:
  • void
Observable

公共事件

该类没有公共事件。


Class Ext.grid.RowNumberer

包: | Ext.grid
定义类的文件: | RowNumberer.js
类: | RowNumberer
继承自: | Object
这是一个工具类，可以传递到Ext.grid.ColumnModel 中作为列配置项，用来提供一个自动计算行数的列。
用法:
// This is a typical column config with the first column providing row numbers
 var colModel = new Ext.grid.ColumnModel([
    new Ext.grid.RowNumberer(),
    {header: "Name", width: 80, sortable: true},
    {header: "Code", width: 50, sortable: true},
    {header: "Description", width: 200, sortable: true}
 ]);

配置项

Config Options |  | Defined By
 | header : String 用来在行数列头部单元格中显示的一个有效的文本或者HTML标签(默认为'')。 | RowNumberer
 | width : Number 行数列默认宽度像素值(默认为 23)。 | RowNumberer

公共属性

该类没有公共属性。

公共方法

该类没有公共方法。

公共事件

该类没有公共事件。


Observable
    AbstractSelectionModel
      RowSelectionModel

Class Ext.grid.RowSelectionModel

包: | Ext.grid
定义类的文件: | RowSelectionModel.js
类: | RowSelectionModel
子类: | CheckboxSelectionModel
继承自: | AbstractSelectionModel
使用的默认SelectionModel。 Ext.grid.GridPanel. 它支持选中多行和键盘选中/导航。 选中的对象被存储起来，并且可以通过： getSelected, 和 getSelections 是 Records 它将为被选中的行提供数据。

配置项

Config Options Defined By
listeners : Object
一个包含一个或多个事件处理器的配置对象，会在初始化的时候被添加到目标对象上...

一个包含一个或多个事件处理器的配置对象，会在初始化的时候被添加到目标对象上。 该配置对象应该是一个有效的监听器配置对象就像 addListener例子中指定的一样可一次附加多个处理器。

ExtJs Components上的DOM事件

一些 ExtJs Component 类导出时会选择一些DOM事件(例如 "click", "mouseover" 等等), 这通常只是在有额外的值可以被添加时发生。例如DataView类的 click事件会传递被点击的节点。也可以直接在Component的HTMLElementevent上访问DOM事件，但必需在Component被渲染后监听器才能添加到Element 上。可以按照以下步骤添加插件:

// 插件会用一个监听器配置对象进行配置。
//该组件会被添加到所有处理方法的参数列表上。
Ext.DomObserver = Ext.extend(Object, {
    constructor: function(config) {
        this.listeners = config.listeners ? config.listeners : config;
    },

    // 组件将自己传递进了插件的初始化方法里
    init: function(c) {
        var p, l = this.listeners;
        for (p in l) {
            if (Ext.isFunction(l[p])) {
                l[p] = this.createHandler(l[p], c);
            } else {
                l[p].fn = this.createHandler(l[p].fn, c);
            }
        }

        // 渲染后立即添加监听器到元素上
        c.render = c.render.createSequence(function() {
            var e = c.getEl();
            if (e) {
                e.on(l);
            }
        });
    },

    createHandler: function(fn, c) {
        return function(e) {
            fn.call(this, e, c);
        };
    }
});

var combo = new Ext.form.ComboBox({

    // 元素被点击后折叠
    plugins: [ new Ext.DomObserver({
        click: function(evt, comp) {
            comp.collapse();
        }
    })],
    store: myStore,
    typeAhead: true,
    mode: 'local',
    triggerAction: 'all'
});

Observable
moveEditorOnEnter : Boolean
设置为false，将关闭在按下回车时把光标跳到下一个单元格
设置为false，将关闭在按下回车时把光标跳到下一个单元格
RowSelectionModel
singleSelect : Boolean
设置为true，每次只能选中一行(默认值为 false 允许多选)
RowSelectionModel

公共属性

Property |  | Defined By
 | grid : Object 此SelectionModel是为该GridPanel处理选择操作的。只读。 | AbstractSelectionModel

公共方法

Method Defined By
RowSelectionModel ( Object config )
参数:
  • config : Object
返回值:
  • void
RowSelectionModel
addEvents( Object|String o, string Optional. ) : void
添加指定的事件到事件列表上，事件会被该Observable触发。
添加指定的事件到事件列表上，事件会被该Observable触发。
参数:
  • o : Object|String
    以事件名作为属性true作为值的对象 或者当多个事件名被分开的传递时则为第一个事件名。
  • Optional. : string
    事件名被分开的传递时则为事件名。 用法:
    this.addEvents('storeloaded', 'storecleared');
返回值:
  • void
Observable
addListener( String eventName, Function handler, [Object scope], [Object options] ) : void
给对象添加事件处理器。
给对象添加事件处理器。
参数:
  • eventName : String
    监听的事件名。
  • handler : Function
    事件调用的方法
  • scope : Object
    （可选）处理方法执行的作用域 (this的引用 reference)。 如果被忽略。默认为触发事件的对象。
  • options : Object
    （可选）包含处理器配置和属性的对象。 可能包含以下的属性:
    • scope : Object
      处理方法执行的作用域(this的引用) 。 如果被忽略。默认为触发事件的对象。
    • delay : Number
      在触发事件后延迟调用处理器的毫秒数。
    • single : Boolean
      如果为True则添加一个处理器来处理下一次的事件触发（仅一次），然后移除自己。
    • buffer : Number
      使得处理器延迟指定毫秒数后预定的运行在 一个Ext.util.DelayedTask中 。 如果事件在时间内再一次被触发，原始的处理器不会被调用，但是新的处理器会预定的在他的位置上。
    • target : Observable
      如果事件在目标的Observable上触发则仅仅调用处理器， 否则 事件会从子类的Observable上冒泡

    组合选项
    使用这些选项参数,可能会组合出不同类型的监听器：

    一个延迟的，一次性的监听器。

    myDataView.on('click', this.onClick, this, {
single: true,
delay: 100
});

    一次调用附加多个处理器
    该方法同样支持传递一个包含指定的多个处理器的属性的配置对象参数。

    myGridPanel.on({
'click' : {
    fn: this.onClick,
    scope: this,
    delay: 100
},
'mouseover' : {
    fn: this.onMouseOver,
    scope: this
},
'mouseout' : {
    fn: this.onMouseOut,
    scope: this
}
});

    或者一个简写的语法：

    myGridPanel.on({
'click' : this.onClick,
'mouseover' : this.onMouseOver,
'mouseout' : this.onMouseOut,
 scope: this
});
返回值:
  • void
Observable
clearSelections ( [ Boolean fast ] ) : void
清除所有的选中状态。
清除所有的选中状态。 is not locked.
参数:
  • fast : Boolean
    可选 true to bypass the conditional checks and events described in deselectRow.
返回值:
  • void
RowSelectionModel
deselectRange ( Number startRow , Number endRow ) : void
反选一个范围内的所有记录。 所有处于startRow和endRow之间的行都会被反选
反选一个范围内的所有记录。 所有处于startRow和endRow之间的行都会被反选
参数:
  • startRow : Number
    范围内第一行的序号
  • endRow : Number
    范围内最后一行的序号
返回值:
  • void
RowSelectionModel
deselectRow ( Number row , [ Boolean preventViewNotify ] ) : void
反选一行。 Before deselecting a row, checks if the selection model is locked. If this check is satisfied the r...
反选一行。 Before deselecting a row, checks if the selection model is locked. If this check is satisfied the row will be deselected and followed up by firing the rowdeselect and selectionchange events.
参数:
  • row : Number
    将被反选的行号
  • preventViewNotify : Boolean
    可选 指定true来阻止关注这个视图 (disables updating the selected appearance)
返回值:
  • void
RowSelectionModel
each ( Function fn , [ Object scope ] ) : Boolean
使用每个选中的行调用传递进来的方法。 如果调用的这个方法返回false，则停止迭代，当前方法...
使用每个选中的行调用传递进来的方法。 如果调用的这个方法返回false，则停止迭代，当前方法返回false。
参数:
  • fn : Function
    如果所有选中的行都被迭代过，返回true Record.
  • scope : Object
    可选 The scope ( this reference) in which the function is executed. Defaults to this RowSelectionModel.
返回值:
  • Boolean
    true if all selections were iterated
RowSelectionModel
enableBubble( String/Array events ) :void
是否现在使得事件会被该Observable触发并调用 this.getBubbleTarget()方法在拥有者的继承树...

是否现在使得事件会被该Observable触发并调用 this.getBubbleTarget()方法在拥有者的继承树中冒泡。Observable的基础类中没有该方法的实现。

该方法一般被Ext.Components用来冒泡事件到拥有者的容器。参看Ext.Component.getBubbleTarget默认的实现 在Ext.Component中返回组件的直接拥有者。但是如果需要的是一个已知的目标，该方法可以被重写来更快的访问需求的目标。

例子:

Ext.override(Ext.form.Field, {
    // 添加方法到Field的initComponent上改变事件为冒泡
    initComponent : Ext.form.Field.prototype.initComponent.createSequence(function() {
        this.enableBubble('change');
    }),

    // 我们知道我们想让Field的事件冒泡到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() {
            // 如果样式被修改标题会变红。
            myForm.header.setStyle('color', 'red');
        }
    }
});
参数:
  • events : String/Array
    冒泡的事件名，或事件名数组
返回值:
  • void
Observable
fireEvent( String eventName, Object... args ) : Boolean
用传入的参数触发指定的事件 (减去事件名)。 一个事件可以被设置为冒泡 Obse...

用传入的参数触发指定的事件 (减去事件名)。

一个事件可以被设置为冒泡到Observable父类继承树(参看 Ext.Component.getBubbleTarget) 调用enableBubble实现。

参数:
  • eventName : String
    触发的事件名。
  • args : Object...
    传递给处理器的可变长度参数。
返回值:
  • Boolean
    如果有任何的处理器返回false则返回false，否则返回true。
Observable
getCount () : Number
获取选中行总数。
获取选中行总数。
参数:
  • 无。
返回值:
  • Number
RowSelectionModel
getSelected () : Record
返回被第一条被选中的记录
返回被第一条被选中的记录
参数:
  • 无。
返回值:
  • Record
RowSelectionModel
getSelections () : Array
返回所有选中的记录
返回所有选中的记录
参数:
  • 无。
返回值:
  • Array
    选中记录的数组
RowSelectionModel
hasListener( String eventName ) : Boolean
检测对象是否包含指定事件的任何监听器
检测对象是否包含指定事件的任何监听器
参数:
  • eventName : String
    检测的事件名
返回值:
  • Boolean
    如果事件被监听则为true，否则为false
Observable
hasNext () : Boolean
如果还有下一条记录可供选择，返回true
如果还有下一条记录可供选择，返回true
参数:
  • 无。
返回值:
  • Boolean
RowSelectionModel
hasPrevious () : Boolean
如果存在上一条可以选择的记录，返回true
如果存在上一条可以选择的记录，返回true
参数:
  • 无。
返回值:
  • Boolean
RowSelectionModel
hasSelection () : Boolean
如果有选中的行，返回true。
如果有选中的行，返回true。
参数:
  • 无。
返回值:
  • Boolean
RowSelectionModel
isIdSelected ( String id ) : Boolean
如果指定的记录处于选中状态，返回true。
如果指定的记录处于选中状态，返回true。
参数:
  • id : String
    需要检测的记录id
返回值:
  • Boolean
RowSelectionModel
isLocked () : Boolean
如果选区被锁定返回true。
如果选区被锁定返回true。
参数:
  • 无。
返回值:
  • Boolean
AbstractSelectionModel
isSelected ( Number/Record index ) : Boolean
如果指定的行处于选中状态，返回true。
如果指定的行处于选中状态，返回true。
参数:
  • index : Number/Record
    需要检测的记录或者记录序号
返回值:
  • Boolean
RowSelectionModel
lock () : void
锁定选区。
锁定选区。
参数:
  • 无。
返回值:
  • void
AbstractSelectionModel
on( String eventName, Function handler, [Object scope], [Object options] ) : void
给对象添加事件处理器 (addListener的简写形式)
给对象添加事件处理器 (addListener的简写形式。)
参数:
  • eventName : String
    监听的事件类型
  • handler : Function
    事件调用的方法
  • scope : Object
    （可选）处理方法执行时的作用域 (this 的引用)。 如果被忽略。默认为触发事件的对象。
  • options : Object
    可选 包含处理器配置的对象。
返回值:
  • void
Observable
purgeListeners() : void
移除对象上所有的监听器
移除对象上所有的监听器
参数:
  • 无。
返回值:
  • void
Observable
relayEvents( Object o, Array events ) : void
从指定的Observable上传递选择的事件就好像被当前对象触发一样。
从指定的Observable上传递选择的事件就好像被当前对象触发一样。
参数:
  • o : Object
    该Observable上的事件被当前对象传递。
  • events : Array
    传递的数组名。
返回值:
  • void
Observable
removeListener( String eventName, Function handler, [Object scope] ) : void
删除一个事件处理器。
删除一个事件处理器。
参数:
  • eventName : String
    处理器关联的事件类型。
  • handler : Function
    移除的处理器。 这应该是传递到addListener里的方法的引用。
  • scope : Object
    （可选）处理器指定的初始作用域。
返回值:
  • void
Observable
resumeEvents() : void
重新开始触发事件。(参见suspendEvents) 如果事件以queueSuspended参数被挂起，则在事件被挂起时 ...
重新开始触发事件。(参见 suspendEvents) 如果事件以queueSuspended 参数被挂起，则在事件被挂起时触发的事件会被传递到所有的监听器上
参数:
  • 无。
返回值:
  • void
Observable
selectAll () : void
如果选择模式未被锁定就选中所有行。
如果选择模式未被锁定就选中所有行。
参数:
  • 无。
返回值:
  • void
RowSelectionModel
selectFirstRow () : void
选中grid中的第一行。
选中grid中的第一行。
参数:
  • 无。
返回值:
  • void
RowSelectionModel
selectLastRow ( [ Boolean keepExisting ] ) : void
选中最后一行。
选中最后一行。
参数:
  • keepExisting : Boolean
    可选 设置为true将保持当前选中的记录
返回值:
  • void
RowSelectionModel
selectNext ( [ Boolean keepExisting ] ) : Boolean
将紧靠当前选中行最后一行的记录选中。
将紧靠当前选中行最后一行的记录选中。
参数:
  • keepExisting : Boolean
    可选 设置为true将保持当前选中的记录
返回值:
  • Boolean
    如果存在下一行，返回true，否则返回false
RowSelectionModel
selectPrevious ( [ Boolean keepExisting ] ) : Boolean
选中紧靠在最后一条被选中行之前的那一行。
选中紧靠在最后一条被选中行之前的那一行。
参数:
  • keepExisting : Boolean
    可选 设置为true将保持当前选中的记录
返回值:
  • Boolean
    如果存在前一行，返回true；否则返回false
RowSelectionModel
selectRange ( Number startRow , Number endRow , [ Boolean keepExisting ] ) : void
选中一个范围内的所有行。 位于startRow和endRow之间的所有行也将被全部选中。...
选中一个范围内的所有行。 is not locked. 位于startRow和endRow之间的所有行也将被全部选中。
参数:
  • startRow : Number
    范围内第一行的索引
  • endRow : Number
    范围内最后一行的索引
  • keepExisting : Boolean
    可选 True to retain existing selections
返回值:
  • void
RowSelectionModel
selectRecords ( Array records , [ Boolean keepExisting ] ) : void
选中记录
选中记录
参数:
  • records : Array
    The records to select
  • keepExisting : Boolean
    可选 需要选中的记录
返回值:
  • void
RowSelectionModel
selectRow ( Number row , [ Boolean keepExisting ], [ Boolean preventViewNotify ] ) : void
选中一行。 Before selecting a row, checks if the selection model is locked and fires the beforerowselect event. ...
选中一行。 Before selecting a row, checks if the selection model is locked and fires the beforerowselect event. If these checks are satisfied the row will be selected and followed up by firing the rowselect and selectionchange events.
参数:
  • row : Number
    需要选中的行序号
  • keepExisting : Boolean
    可选 设置为true将保持当前选中的记录
  • preventViewNotify : Boolean
    可选 Specify true to prevent notifying the view (disables updating the selected appearance)
返回值:
  • void
RowSelectionModel
selectRows ( Array rows , [ Boolean keepExisting ] ) : void
选中多行。
选中多行。
参数:
  • rows : Array
    Array of the indexes of the row to select
  • keepExisting : Boolean
    可选 设置为true将保持当前选中的记录 (默认值为 false)
返回值:
  • void
RowSelectionModel
suspendEvents( Boolean queueSuspended ) : void
暂停触发所有的事件。 (参看resumeEvents)
暂停触发所有的事件。（参看 resumeEvents)
参数:
  • queueSuspended : Boolean
    如果传递为true则排列好暂停的事件使得在调用 resumeEvents 后再触发它们，而不是抛弃所有暂停的事件。
返回值:
  • void
Observable
un( String eventName, Function handler, [Object scope] ) : void
删除一个事件处理器(removeListener方法的简写形式)
删除一个事件处理器(removeListener方法的简写形式。)
参数:
  • eventName : String
    处理器关联的事件类型
  • handler : Function
    被删除的处理器 这应该是传入 addListener 中的方法的引用。
  • scope : Object
    （可选）为处理器指定的初始作用域。
返回值:
  • void
Observable
unlock () : void
解除选区的锁定。
解除选区的锁定。
参数:
  • 无。
返回值:
  • void
AbstractSelectionModel

公共事件

Event Defined By
beforerowselect : ( SelectionModel this , Number rowIndex , Boolean keepExisting , Record record )
在选中一行数据之前触发，返回false取消选中
在选中一行数据之前触发，返回false取消选中
监听器将会被以如下的参数格式调用:
  • this : SelectionModel
  • rowIndex : Number
    将要被选择的序号
  • keepExisting : Boolean
    False if other selections will be cleared
  • record : Record
    将要被选择的记录
RowSelectionModel
rowdeselect : ( SelectionModel this , Number rowIndex , Record record )
当反选一个行时触发。To prevent deselection lock the selections.
当反选一个行时触发。 To prevent deselection lock the selections.
监听器将会被以如下的参数格式调用:
  • this : SelectionModel
  • rowIndex : Number
  • record : Record
RowSelectionModel
rowselect : ( SelectionModel this , Number rowIndex , Ext.data.Record r )
当选中一行数据时触发。
当选中一行数据时触发。
监听器将会被以如下的参数格式调用:
  • this : SelectionModel
  • rowIndex : Number
    被选择的序号
  • r : Ext.data.Record
    选择的序号
RowSelectionModel
selectionchange : ( SelectionModel this )
当选中状态发生改变时触发
当选中状态发生改变时触发
监听器将会被以如下的参数格式调用:
  • this : SelectionModel
RowSelectionModel


Column
    TemplateColumn

Class Ext.grid.TemplateColumn

包: | Ext.grid
定义类的文件: | Column.js
类: | TemplateColumn
继承自: | Column

一个列定义类，通过使用一个 配置的 XTemplate 处理一个 Record的 data 以渲染数据值。更多细节参见 Ext.grid.Column 的 xtype 配置项。

配置项

Config Options Defined By
align : String
(可选)设置列的CSS text-align属性。默认值为undefined。
Column
css : String
(可选)可选，定义内嵌css样式的字符串。并应用到表格中的所有列的单元格...
(可选)可选，定义内嵌css样式的字符串。并应用到表格中的所有列的单元格(不包括表头部分)。默认值为undefined。
Column
dataIndex : String
(必填)在grid中的Ext.data.Store里面的Ext.data.Record中用来定义这个字段的名称，可以从中获取这个列的值。

(必填)在grid中的Ext.data.Store里面的Ext.data.Record中用来定义这个字段的名称，可以从中获取这个列的值。

Column
editable : Boolean
(可选)默认值为true，可以配置editor 。设置为false，初始化时此列禁用编辑...
(可选)默认值为true，可以配置editor 。设置为false，初始化时此列禁用编辑功能。使用Ext.grid.ColumnModel.setEditable()可以动态改变初始化配置。
Column
editor : Ext.form.Field
(可选)如果grid支持可编辑功能，要可以使用Ext.form.Field编辑该列的的值...
(可选)如果grid支持可编辑功能，要可以使用Ext.form.Field编辑该列的的值。见editable 。
Column
emptyGroupText : String
(可选)如果grid是被一个Ext.grid.GroupingView渲染，这个选项可以...
(可选)如果grid是被一个Ext.grid.GroupingView渲染，这个选项可以用来指定一个空的分组要显示的文本。 默认值为Ext.grid.GroupingView.emptyGroupText。
Column
fixed : Boolean
(可选)如果为true，不能改变列的宽度。默认值为false。
Column
groupName : String
(可选)如果grid是被一个Ext.grid.GroupingView渲染，这个属性可以...
(可选)如果grid是被一个Ext.grid.GroupingView渲染，这个属性可以被用来指定按字段分组后在小组行标题的前缀名称。 详见groupRenderer和Ext.grid.GroupingView.showGroupName。
Column
groupRenderer : Function
(可选)如果grid是被一个Ext.grid.GroupingView渲染，这个选项指定...

(可选)如果grid是被一个Ext.grid.GroupingView渲染，这个选项指定的函数可以用来格式化分组字段值显示在组头的功能。 如果groupRenderer未指定，配置的渲染器renderer 将被调用；如果 renderer 也同样未指定，分组字段的新值将被使用。

被调用的函数(无论是 groupRenderer 或 renderer )将通过以下参数调用：

  • v : Object

    该组字段新值。

  • unused : undefined

    未使用的参数。

  • r : Ext.data.Record

    Record对象，为一行提供数据，此行导致了分组的改变。

  • rowIndex : Number

    导致分组改变的Record的行号。

  • colIndex : Number

    分组依据字段的列序号。

  • ds : Ext.data.Store

    提供数据Model的Store。

该函数应返回一个字符串值。

Column
groupable : Boolean
(可选)如果grid是被一个Ext.grid.GroupingView渲染，这个属性可以...
(可选)如果grid是被一个Ext.grid.GroupingView渲染，这个属性可以用来禁用表头菜单中根据字段分组功能。 默认值为true，使该列的表头菜单中有该选项。设置为false，表头菜单中的该选项被设为disable状态。 参见 groupName 。
Column
header : String
(可选)显示在网格视图头部作为标题文本的innerHTML(可以支持html标签)。注...
(可选)显示在网格视图头部作为标题文本的innerHTML(可以支持html标签)。注:有一个可点击的表头，没有没有文本显示使用' '。
Column
hidden : Boolean
(可选)设置为true，初始化时隐藏此列。默认值为 false。一个隐藏的列...
(可选)设置为true，初始化时隐藏此列。默认值为 false。一个隐藏的列通过标题菜单可能会显示。如果一列是永远不会被显示，那么在所有列中根本不包含此列模型。
Column
hideable : Boolean
(可选)设置为false，以防止用户隐藏该列(默认值为true)。在grid中为了不让...
(可选)设置为false，以防止用户隐藏该列(默认值为true)。在grid中为了不让所有的列隐藏，使用Ext.grid.GridPanel.enableColumnHide 代替。
Column
id : String
(可选)一个标识该列的名称(默认为该列的初始化依次位置)。该id是用来创建一个CSS样式的名字...
(可选)一个标识该列的名称(默认为该列的初始化依次位置)。 该id是用来创建一个CSS样式的名字，适用于所有表格的单元格(包括标题)，在这列(在这里id不需要独一无二)。 该类名采用的格式
x-grid3-td-id
表头单元格也将收到这类名字，但也有这类
x-grid3-hd
因此，针对表头单元格，使用CSS选择器，例如:
.x-grid3-hd-row .x-grid3-td-id
gird的Ext.grid.GridPanel.autoExpandColumn配置通过这种独特的标识选项引用该列。
Column
menuDisabled : Boolean
(可选)设置为true，禁用表头菜单。 默认值为false。
Column
renderer : Function
(可选)当该方法通过传递以下参数时，会返回可显示的数据:
(可选)当该方法通过传递以下参数时，会返回可显示的数据:
  • value : Object

    该单元格的数据值。

  • metadata : Object

    一个对象，您可以在其中设置以下属性:

    • css : String

      一个添加到该单元格的TD元素上的CSS样式名。

    • attr : String

      一个定义HTML属性的字符串，应用到数据容器内的表格单元格元素上(例如:'style="color:red;"')。

  • record : Ext.data.record

    从数据中提取的Ext.data.Record。

  • rowIndex : Number

    Row index

  • colIndex : Number

    Column index

  • store : Ext.data.Store

    从该Ext.data.Store对象中提取记录。

Column
resizable : Boolean
(可选)值为false的话，不能改变列的大小。默认值为true。
Column
scope : Object
(可选)在作用域(this 参考值)中执行渲染。默认值为Column配置对象。
Column
sortable : Boolean
(可选)设置为true，此列允许排序。默认值为Ext.grid.ColumnModel.defaultSortable 属性值...
(可选)设置为true，此列允许排序。默认值为Ext.grid.ColumnModel.defaultSortable 属性值。无论是本地/远程使用排序都是在 Ext.data.Store.remoteSort 中指定。
Column
tooltip : String
(可选)使用一个字符串文本作为列表头的提示语。如果已激活过Quicktips，这个值将被作为...
(可选)使用一个字符串文本作为列表头的提示语。如果已激活过Quicktips，这个值将被作为快速提示文本，否则将被设置为表头的HTML'title'属性。默认值为''。
Column
tpl : String/XTemplate
一个XTemplate， 或者一个XTemplate定义字符串用来处理 Record的...
一个XTemplate， 或者一个XTemplate定义字符串用来处理 Record的 data 以便产生一个列被渲染后的值。
TemplateColumn
width : Number
(可选)该列的初始化宽度。如果有下列配置，每列的宽度也会受到影响...
(可选)该列的初始化宽度。如果有下列配置，每列的宽度也会受到影响:
  • Ext.grid.GridPanel. autoExpandColumn
  • Ext.grid.GridView. forceFit

    通过指定forceFit:true，non-fixed width网格的列将被重新均匀分布(基于关联初始宽度)，因此不会出现横向滚动条。

  • Ext.grid.GridView. autoFill
  • Ext.grid.GridPanel. minColumnWidth

    • 注:当确定了每列的宽度，会在右侧预留一个空间给垂直滚动条。该Ext.grid.GridView. scrollOffset 可以被修改，以减少或取消其保留部分。

Column
xtype : String
(可选)其中引用了一个String类型的预定义Ext.grid.Column子类和预先设定的一个...
(可选)其中引用了一个String类型的预定义Ext.grid.Column 子类和预先设定的一个适当的 renderer 可以很容易地成为ColumnModel的一个配置。预定义Ext.grid.Column子类的类型有：
  • gridcolumn : Ext.grid.Column ( 默认)

  • booleancolumn : Ext.grid.BooleanColumn

  • numbercolumn : Ext.grid.NumberColumn

  • datecolumn : Ext.grid.DateColumn

  • templatecolumn : Ext.grid.TemplateColumn

指定的 xtype 配置属性可以作为指定的Column的配置属性，例如:

var grid = new Ext.grid.GridPanel({
    ...
    columns: [{
        header: 'Last Updated',
        dataIndex: 'lastChange',
        width: 85,
        sortable: true,
        //renderer: Ext.util.Format.dateRenderer('m/d/Y'),
        xtype: 'datecolumn', // 使用xtype代替渲染器 use xtype instead of renderer
        format: 'M/d/Y' // configuration property for Ext.grid.DateColumn

    }, {
        ...
    }]
});
Column

公共属性

Property Defined By
renderer : Function
(可选)当该方法通过传递以下参数时，会返回可显示的数据:
(可选)当该方法通过传递以下参数时，会返回可显示的数据:
  • value : Object

    该单元格的数据值。

  • metadata : Object

    一个对象，您可以在其中设置以下属性:

    • css : String

      一个添加到该单元格的TD元素上的CSS样式名。

    • attr : String

      一个定义HTML属性的字符串，应用到数据容器内的表格单元格元素上(例如:'style="color:red;"')。

  • record : Ext.data.record

    从数据中提取的Ext.data.Record。

  • rowIndex : Number

    Row index

  • colIndex : Number

    Column index

  • store : Ext.data.Store

    从该Ext.data.Store对象中提取记录。

Column

公共方法

Method Defined By
getCellEditor ( Number rowIndex ) : Ext.Editor
返回一个为了包装编辑单元格列的Field而定义的editor。
返回一个为了包装编辑单元格列的Field而定义的editor。
参数:
  • rowIndex : Number
    The row index
返回值:
  • Ext.Editor
Column
setEditor ( Ext.Editor/Ext.form.Field editor ) : void
为该列设置一个新的编辑器。
为该列设置一个新的编辑器。
参数:
  • editor : Ext.Editor/Ext.form.Field
    The editor to set
返回值:
  • void
Column

公共事件

该类没有公共事件。


Observable
    History

Class Ext.History

包: | Ext
定义类的文件: | History.js
类: | History
继承自: | Observable
History管理组件，允许你在导航操作中注册任意标志以表示应用的历史状态。 然后当用户通过浏览器的历史堆栈向前或者向后导航时， 你可以处理历史的change 事件，以便将你的应用UI重置到适当的状态。

该类为单例，不应该直接创建。

配置项

Config Options Defined By
listeners : Object
一个包含一个或多个事件处理器的配置对象，会在初始化的时候被添加到目标对象上...

一个包含一个或多个事件处理器的配置对象，会在初始化的时候被添加到目标对象上。 该配置对象应该是一个有效的监听器配置对象就像 addListener例子中指定的一样可一次附加多个处理器。

ExtJs Components上的DOM事件

一些 ExtJs Component 类导出时会选择一些DOM事件(例如 "click", "mouseover" 等等), 这通常只是在有额外的值可以被添加时发生。例如DataView类的 click事件会传递被点击的节点。也可以直接在Component的HTMLElementevent上访问DOM事件，但必需在Component被渲染后监听器才能添加到Element 上。可以按照以下步骤添加插件:

// 插件会用一个监听器配置对象进行配置。
//该组件会被添加到所有处理方法的参数列表上。
Ext.DomObserver = Ext.extend(Object, {
    constructor: function(config) {
        this.listeners = config.listeners ? config.listeners : config;
    },

    // 组件将自己传递进了插件的初始化方法里
    init: function(c) {
        var p, l = this.listeners;
        for (p in l) {
            if (Ext.isFunction(l[p])) {
                l[p] = this.createHandler(l[p], c);
            } else {
                l[p].fn = this.createHandler(l[p].fn, c);
            }
        }

        // 渲染后立即添加监听器到元素上
        c.render = c.render.createSequence(function() {
            var e = c.getEl();
            if (e) {
                e.on(l);
            }
        });
    },

    createHandler: function(fn, c) {
        return function(e) {
            fn.call(this, e, c);
        };
    }
});

var combo = new Ext.form.ComboBox({

    // 元素被点击后折叠
    plugins: [ new Ext.DomObserver({
        click: function(evt, comp) {
            comp.collapse();
        }
    })],
    store: myStore,
    typeAhead: true,
    mode: 'local',
    triggerAction: 'all'
});

Observable

公共属性

Property |  | Defined By
 | fieldId : String 隐藏域必须的id，用来存储当前历史标志。 | History
 | iframeId : String 在IE中必须的iframeid，用来管理历史堆栈。 | History

公共方法

Method Defined By
add ( String token , Boolean preventDuplicates ) : void
向历史栈中添加一个新标记。 可以是任意值，尽管通常情况下这是一个组件的id串， 并且另一个...
向历史栈中添加一个新标记。 可以是任意值，尽管通常情况下这是一个组件的id串， 并且另一个id标记了此组件指定的历史状态。 示例用法:
// Handle tab changes on a TabPanel
tabPanel.on('tabchange', function(tabPanel, tab){
    Ext.History.add(tabPanel.id + ':' + tab.id);
});
参数:
  • token : String
    定义了与特定应用相关的历史状态值
  • preventDuplicates : Boolean
    当为true时，如果传递的标记与当前标记相同，它将不会保存一个新的 历史步骤。如果相同的状态可以在相同的历史堆栈位置保存多次， 设置此参数为false(默认为true)。
返回值:
  • void
History
addEvents( Object|String o, string Optional. ) : void
添加指定的事件到事件列表上，事件会被该Observable触发。
添加指定的事件到事件列表上，事件会被该Observable触发。
参数:
  • o : Object|String
    以事件名作为属性true作为值的对象 或者当多个事件名被分开的传递时则为第一个事件名。
  • Optional. : string
    事件名被分开的传递时则为事件名。 用法:
    this.addEvents('storeloaded', 'storecleared');
返回值:
  • void
Observable
addListener( String eventName, Function handler, [Object scope], [Object options] ) : void
给对象添加事件处理器。
给对象添加事件处理器。
参数:
  • eventName : String
    监听的事件名。
  • handler : Function
    事件调用的方法
  • scope : Object
    （可选）处理方法执行的作用域 (this的引用 reference)。 如果被忽略。默认为触发事件的对象。
  • options : Object
    （可选）包含处理器配置和属性的对象。 可能包含以下的属性:
    • scope : Object
      处理方法执行的作用域(this的引用) 。 如果被忽略。默认为触发事件的对象。
    • delay : Number
      在触发事件后延迟调用处理器的毫秒数。
    • single : Boolean
      如果为True则添加一个处理器来处理下一次的事件触发（仅一次），然后移除自己。
    • buffer : Number
      使得处理器延迟指定毫秒数后预定的运行在 一个Ext.util.DelayedTask中 。 如果事件在时间内再一次被触发，原始的处理器不会被调用，但是新的处理器会预定的在他的位置上。
    • target : Observable
      如果事件在目标的Observable上触发则仅仅调用处理器， 否则 事件会从子类的Observable上冒泡

    组合选项
    使用这些选项参数,可能会组合出不同类型的监听器：

    一个延迟的，一次性的监听器。

    myDataView.on('click', this.onClick, this, {
single: true,
delay: 100
});

    一次调用附加多个处理器
    该方法同样支持传递一个包含指定的多个处理器的属性的配置对象参数。

    myGridPanel.on({
'click' : {
    fn: this.onClick,
    scope: this,
    delay: 100
},
'mouseover' : {
    fn: this.onMouseOver,
    scope: this
},
'mouseout' : {
    fn: this.onMouseOut,
    scope: this
}
});

    或者一个简写的语法：

    myGridPanel.on({
'click' : this.onClick,
'mouseover' : this.onMouseOver,
'mouseout' : this.onMouseOut,
 scope: this
});
返回值:
  • void
Observable
back () : void
使用程序在浏览器历史中后退一步(与用户按下“后退”按钮等价)。
使用程序在浏览器历史中后退一步(与用户按下“后退”按钮等价)。
参数:
  • 无。
返回值:
  • void
History
enableBubble( String/Array events ) :void
是否现在使得事件会被该Observable触发并调用 this.getBubbleTarget()方法在拥有者的继承树...

是否现在使得事件会被该Observable触发并调用 this.getBubbleTarget()方法在拥有者的继承树中冒泡。Observable的基础类中没有该方法的实现。

该方法一般被Ext.Components用来冒泡事件到拥有者的容器。参看Ext.Component.getBubbleTarget默认的实现 在Ext.Component中返回组件的直接拥有者。但是如果需要的是一个已知的目标，该方法可以被重写来更快的访问需求的目标。

例子:

Ext.override(Ext.form.Field, {
    // 添加方法到Field的initComponent上改变事件为冒泡
    initComponent : Ext.form.Field.prototype.initComponent.createSequence(function() {
        this.enableBubble('change');
    }),

    // 我们知道我们想让Field的事件冒泡到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() {
            // 如果样式被修改标题会变红。
            myForm.header.setStyle('color', 'red');
        }
    }
});
参数:
  • events : String/Array
    冒泡的事件名，或事件名数组
返回值:
  • void
Observable
fireEvent( String eventName, Object... args ) : Boolean
用传入的参数触发指定的事件 (减去事件名)。 一个事件可以被设置为冒泡 Obse...

用传入的参数触发指定的事件 (减去事件名)。

一个事件可以被设置为冒泡到Observable父类继承树(参看 Ext.Component.getBubbleTarget) 调用enableBubble实现。

参数:
  • eventName : String
    触发的事件名。
  • args : Object...
    传递给处理器的可变长度参数。
返回值:
  • Boolean
    如果有任何的处理器返回false则返回false，否则返回true。
Observable
forward () : void
使用程序在浏览器历史中前进一步(与用户按下“前进”按钮等价)。
使用程序在浏览器历史中前进一步(与用户按下“前进”按钮等价)。
参数:
  • 无。
返回值:
  • void
History
getToken () : String
查询当前活动的历史标记。
查询当前活动的历史标记。
参数:
  • 无。
返回值:
  • String
    符号标记。
History
hasListener( String eventName ) : Boolean
检测对象是否包含指定事件的任何监听器
检测对象是否包含指定事件的任何监听器
参数:
  • eventName : String
    检测的事件名
返回值:
  • Boolean
    如果事件被监听则为true，否则为false
Observable
init ( [ Boolean onReady ], [ Object scope ] ) : void
初始化全局History实例。
初始化全局History实例。
参数:
  • onReady : Boolean
    (可选)当history组件被完全初始化后调用的回调函数。
  • scope : Object
    (可选)作用域( this 引用)，回调函数将在其中被执行。默认为浏览器window。
返回值:
  • void
History
on( String eventName, Function handler, [Object scope], [Object options] ) : void
给对象添加事件处理器 (addListener的简写形式)
给对象添加事件处理器 (addListener的简写形式。)
参数:
  • eventName : String
    监听的事件类型
  • handler : Function
    事件调用的方法
  • scope : Object
    （可选）处理方法执行时的作用域 (this 的引用)。 如果被忽略。默认为触发事件的对象。
  • options : Object
    可选 包含处理器配置的对象。
返回值:
  • void
Observable
purgeListeners() : void
移除对象上所有的监听器
移除对象上所有的监听器
参数:
  • 无。
返回值:
  • void
Observable
relayEvents( Object o, Array events ) : void
从指定的Observable上传递选择的事件就好像被当前对象触发一样。
从指定的Observable上传递选择的事件就好像被当前对象触发一样。
参数:
  • o : Object
    该Observable上的事件被当前对象传递。
  • events : Array
    传递的数组名。
返回值:
  • void
Observable
removeListener( String eventName, Function handler, [Object scope] ) : void
删除一个事件处理器。
删除一个事件处理器。
参数:
  • eventName : String
    处理器关联的事件类型。
  • handler : Function
    移除的处理器。 这应该是传递到addListener里的方法的引用。
  • scope : Object
    （可选）处理器指定的初始作用域。
返回值:
  • void
Observable
resumeEvents() : void
重新开始触发事件。(参见suspendEvents) 如果事件以queueSuspended参数被挂起，则在事件被挂起时 ...
重新开始触发事件。(参见 suspendEvents) 如果事件以queueSuspended 参数被挂起，则在事件被挂起时触发的事件会被传递到所有的监听器上
参数:
  • 无。
返回值:
  • void
Observable
suspendEvents( Boolean queueSuspended ) : void
暂停触发所有的事件。 (参看resumeEvents)
暂停触发所有的事件。（参看 resumeEvents)
参数:
  • queueSuspended : Boolean
    如果传递为true则排列好暂停的事件使得在调用 resumeEvents 后再触发它们，而不是抛弃所有暂停的事件。
返回值:
  • void
Observable
un( String eventName, Function handler, [Object scope] ) : void
删除一个事件处理器(removeListener方法的简写形式)
删除一个事件处理器(removeListener方法的简写形式。)
参数:
  • eventName : String
    处理器关联的事件类型
  • handler : Function
    被删除的处理器 这应该是传入 addListener 中的方法的引用。
  • scope : Object
    （可选）为处理器指定的初始作用域。
返回值:
  • void
Observable

公共事件

Event Defined By
change : ( String token )
在当前页面的历史记录中发生导航前进或者后退时触发。
在当前页面的历史记录中发生导航前进或者后退时触发。
监听器将会以如下参数格式被调用:
  • token : String
    一个的标识符，绑定到在历史中页面当前点的状态。
History
ready : ( Ext.History The )
当Ext.History单例被初始化完成并且已经可以使用时触发。
当Ext.History单例被初始化完成并且已经可以使用时触发。
监听器将会以如下参数格式被调用:
  • The : Ext.History
    Ext.History单例。
History


Class Ext

包: | Global(全局)
定义类的文件: | Ext.js
类: | Ext
继承自: | Object
Ext 核心的实用程序和函数。

这是一个单例的类，不能直接实例化。

公共属性

Property |  | Defined By
 | : Object 移除文档中的一个DOM节点 | Ext
 | BLANK_IMAGE_URL : String 图片路径：一张1×1的透明图片，Ext使用它来和CSS一起创建内嵌的图标。（默认路径为： ... 图片路径：一张1×1的透明图片，Ext使用它来和CSS一起创建内嵌的图标。 （默认路径为："http://extjs.com/s.gif"，你必须把它改成你自己的服务器上的图片路径。 译者注：Ext的资源包里面有这张图片，路径：“ext/resources/images/default/s.gif”） | Ext
 | SSL_SECURE_URL : String 指向一个空文件的URL，在安全模式下为iframe和onReady的src属性赋值时... 指向一个空文件的URL，在安全模式下为iframe和onReady的src属性赋值时，Ext使用它来防止IE弹出不安全内容信息栏。 ( 'about:blank', 在安全模式下是 'javascript:""'). | Ext
 | USE_NATIVE_JSON : Boolean 指出是否使用本地浏览器解析JSON方法。 如果浏览器不支持本地的JSON方法的解析... 指出是否使用本地浏览器解析JSON方法。 如果浏览器不支持本地的JSON方法的解析，此配置会被忽略。 注意: 如果解析的对象有方法，那么本地JSON方法将不工作。同时，属性名也必需使用引号，否则数据不会解析。 (默认为false) | Ext
 | emptyFn : Function 一个可复用的空函数 | Ext
 | enableFx : Boolean 如果 Ext.Fx 类有效则为true | Ext
 | enableGarbageCollector : Boolean 如果为True则会自动的不缓存孤立的Ext.Elements (默认为true) | Ext
 | enableListenerCollection : Boolean 在垃圾回收时候自动清除它的事件监听器如果为true。(默认值为 false)。 | Ext
 | enableNestedListenerRemoval : Boolean 实验性 - 如果为True当一个元素被移除时会级联删除其子元素。现在还... 实验性 - 如果为True当一个元素被移除时会级联删除其子元素。现在还没有达到最佳性能。 | Ext
 | isAir : Boolean 如果发现平台为Adobe Air则为true。 | Ext
 | isBorderBox : Boolean 如果检测到浏览器是IE，并且运行在non-strict模式下，该值为true。 | Ext
 | isChrome : Boolean 如果发现浏览器是Chrome则为true。 | Ext
 | isGecko : Boolean 如果发现浏览器使用Gecko布局引擎则为true(例如 Mozilla, Firefox)。 | Ext
 | isGecko2 : Boolean 如果发现浏览器使用pre-Gecko 1.9 布局引擎则为true (例如 Firefox 2.x). | Ext
 | isGecko3 : Boolean 当发现浏览器使用Gecko 1.9+ 布局引擎时则为true (例如 Firefox 3.x). | Ext
 | isIE : Boolean 如果发现浏览器是Internet Explorer则为true。 | Ext
 | isIE6 : Boolean 当发现浏览器的版本为 Internet Explorer 6.x时为true。 | Ext
 | isIE7 : Boolean 如果发现浏览器为Internet Explorer 7.x则为true。 | Ext
 | isIE8 : Boolean 如果浏览器的版本是Internet Explorer 8.x则返回true。 | Ext
 | isLinux : Boolean 如果发现操作系统为Linux则为true。 | Ext
 | isMac : Boolean 如果检测到系统为Mac OS则返回true。 | Ext
 | isOpera : Boolean 如果发现浏览器是Opera则为true。 | Ext
 | isReady : Boolean 如果文档已经完全的初始化并且已经准备好开始后续的操作时为true。 | Ext
 | isSafari : Boolean 如果发现浏览器是Safari，则为true。 | Ext
 | isSafari2 : Boolean 如果发现浏览器为Safari 2.x则为true。 | Ext
 | isSafari3 : Boolean 如果浏览器是Safari 3.x则为true。 | Ext
 | isSafari4 : Boolean 如果发现浏览器的版本是Safari 4.x则返回true。 | Ext
 | isSecure : Boolean 如果网页使用SSL协议则返回true | Ext
 | isStrict : Boolean 如果浏览器是strict（执行标准）mode（译者注：这里说的应该是严格遵循W3C 和 IETF 标准），与之对应的是quirks mode（译者注：这里说的是一种为了向后兼容老版本浏览器的一种模式）。 | Ext
 | isWebKit : Boolean 如果发现浏览器使用了WebKit则为true。 | Ext
 | isWindows : Boolean 如果发现操作系统为Windows则为true。 | Ext
 | useShims : Boolean 默认情况下，Ext会智能地决定浮动的element是不是需要一个垫片。如果你使用flash，你可能... 默认情况下，Ext会智能地决定浮动的element是不是需要垫片。如果你使用flash，你可能想把该值设为true。 | Ext
 | ux : Object 分派给框架的扩展部分的命名空间 | Ext
 | version : String 框架的版本信息 | Ext

公共方法

Method Defined By
addBehaviors ( Object obj ) : void
在文档加载完成时，通过选择器为元素添加事件监听器。 事件名称通过一个 &#64...
在文档加载完成时，通过选择器为元素添加事件监听器。 事件名称通过一个 @符号来分隔。
                                Ext.addBehaviors({
    // 为id为foo的元素中的所有锚点添加一个监听器
    '#foo a@click' : function(e, t){
        // 一些代码
    },

    //为不同的选择器添加相同的监听器 ( 在 @之前用逗号分隔)
    '#foo a, #bar span.some-class@mouseover' : function(){
        // 一些代码
    }
});
参数:
  • obj : Object
    应用的行为列表
返回值:
  • void
Ext
apply ( Object obj , Object config , Object defaults ) : Object
将config对象的所有属性拷贝到obj对象。
将config对象的所有属性拷贝到obj对象。
参数:
  • obj : Object
    接收属性的对象
  • config : Object
    提供属性的对象
  • defaults : Object
    一个不同的对象，属性可以作为默认值被拷贝。
返回值:
  • Object
    returns obj
Ext
applyIf ( Object obj , Object config ) : Object
如果obj对象不存在相同的属性，将config的属性拷贝到obj对象。
如果obj对象不存在相同的属性，将config的属性拷贝到obj对象。
参数:
  • obj : Object
    属性的接受者
  • config : Object
    属性提供者
返回值:
  • Object
    返回的对象
Ext
clean ( Array/NodeList arr ) : Array
为传递进来的数组创建一个副本，该副本剔除了所有错误的值。
为传递进来的数组创建一个副本，该副本剔除了所有错误的值。
参数:
  • arr : Array/NodeList
    需要剔除错误值的数组
返回值:
  • Array
    新的被压缩的数组。
Ext
copyTo ( Object dest , Object source , Array/String names ) : Object
拷贝原始对象中的一个属性名的集合到目标对象中。例如:ImageComponent = Ext.extend...
拷贝原始对象中的一个属性名的集合到目标对象中。

例如:

                                ImageComponent = Ext.extend(Ext.BoxComponent, {
    initComponent: function() {
        this.autoEl = { tag: 'img' };
        MyComponent.superclass.initComponent.apply(this, arguments);
        this.initialBox = Ext.copyTo({}, this.initialConfig, 'x,y,width,height');
    }
});
参数:
  • dest : Object
    目标对象。
  • source : Object
    原始对象。
  • names : Array/String
    拷贝的一组属性名或者是一个以逗号分隔的属性名列表。
返回值:
  • Object
    修改后的对象。
Ext
create ( Object config , Constructor defaultType ) : Ext.Component
Ext.ComponentMgr.create 的简写形式，以指定的config对象创建一个新的Component，使用config对象...
Ext.ComponentMgr.create的简写形式， 以指定的config对象创建一个新的Component，使用config对象的 xtype来决定被实例化的类 。
参数:
  • config : Object
    用于创建对象的配置对象。
  • defaultType : Constructor
    如果config对象没有包含一个 xtype 则此构造器提供默认的Component类型 . (可选，如果config包含一个 xtype )。
返回值:
  • Ext.Component
    新的Component实例。
Ext
decode ( String json , [ Boolean safe ] ) : Object
Ext.util.JSON.decode的简写形式
Ext.util.JSON.decode的简写形式
参数:
  • json : String
    JSON 字符串
  • safe : Boolean
    （可选）当JSON不可用时，是返回null还是抛出异常。
返回值:
  • Object
    The resulting object
Ext
destroy ( Mixed arg1 , [ Mixed arg2 ], [ Mixed etc... ] ) : void
该方法的作用是尝试销毁传递给它的对象。它会移除对象的所有监听器，并从DOM树中删除它们 (如果...
该方法的作用是尝试销毁传递给它的对象。它会移除对象的所有监听器，并从DOM树中删除它们 (如果可以) 同时 调用它们的销毁方法(如果可以)。 该方法主要用于 Ext.Element 和 Ext.Component， 但是 Ext.util.Observable 的子类也可以当做参数传递进来。 任何数量的elements 和/或 components 都可以作为独立的参数传递进来。（译者注：意为该方法的参数是可变长的，可以传递任意多个参数。）
参数:
  • arg1 : Mixed
    一个 Ext.Element, Ext.Component, 或它们的数组
  • arg2 : Mixed
    可选
  • etc... : Mixed
    可选
返回值:
  • void
Ext
destroyMembers ( Object o , Mixed arg1 , Mixed etc... ) : void
企图销毁然后移除一个传递进来的对象的被命名的属性的集合。
企图销毁然后移除一个传递进来的对象的被命名的属性的集合。
参数:
  • o : Object
    你希望销毁属性的那个对象 (很可能是一个Component)
  • arg1 : Mixed
    从对象中销毁移除的属性的名称
  • etc... : Mixed
    更多合适被销毁移除的名称。
返回值:
  • void
Ext
each ( Array/NodeList/Mixed array , Function fn , Object scope ) : See
迭代数组，使用数组中的每个元素作为参数来调用传递进来的function。
迭代数组，使用数组中的每个元素作为参数来调用传递进来的function。
参数:
  • array : Array/NodeList/Mixed
    如果传递进来的数组不是一个真实的数组，你的function只会被用这个伪数组作参数调用一次。
  • fn : Function
    该function会被每个数组中的元素当做参数调用，如果function返回false，则停止迭代然后会返回当前的 index 。该方法会被以下的参数调用:
    • item : Mixed
      在传递进来的 array 中，当前的元素的 index
    • index : Number
      数组中当前的索引值
    • allItems : Array
      该 array 被当做第一个参数传递进 Ext.each 。
  • scope : Object
    指定方法执行的 作用域 ( this 的引用)。 默认为 item 在传递进来的 array 中 的当前 index 。
返回值:
  • See
    fn 参数的描述。
Ext
encode ( Mixed o ) : String
Ext.util.JSON.encode的简写形式
Ext.util.JSON.encode的简写形式
参数:
  • o : Mixed
    编码的变量
返回值:
  • String
    JSON字符串
Ext
escapeRe ( String str ) : String
使用正则表达式转义传递进来的字符串。
使用正则表达式转义传递进来的字符串。
参数:
  • str : String
返回值:
  • String
Ext
extend ( Function superclass , Object overrides ) : Function
使一个类继承另一个类从而创建一个子类，同时可以使用传递的字面量（json对象）...

使一个类继承另一个类从而创建一个子类，同时可以使用传递的字面量（json对象）来重写父类的成员。 此方法同样会给子类添加 This method also adds the function "override()"方法，该方法可以用来重写类的成员 。

例如，要创建一个Ext GridPanel的子类:
                                MyGridPanel = Ext.extend(Ext.grid.GridPanel, {
    constructor: function(config) {

//      为 该Grid创建配置项。
        var store = new Ext.data.Store({...});
        var colModel = new Ext.grid.ColumnModel({...});

//      创建一个包含我们在上面计算了的属性的新的config对象
//      *附加* 无论怎样都会在config参数中。
        config = Ext.apply({
            store: store,
            colModel: colModel
        }, config);

        MyGridPanel.superclass.constructor.call(this, config);

//      你的一些代码
    },

    yourMethod: function() {
        // 等等。
    }
});

当子类的构造器被当成参数传递时， 该函数同样支持3个参数的调用。 在这种情况下，传递的参数为：

  • subclass : Function
    子类的构造器。
  • superclass : Function
    继承的构造器
  • overrides : Object
    将会复制到子类的属性中，是包含一些成员的字面量（json对象）， 同时新类的所有实例会共享它。
参数:
  • superclass : Function
    父类的构造器
  • overrides : Object

    将会复制到子类的属性中，是包含一些成员的字面量（json对象）， 同时新类的所有实例会共享它。

    该对象可能包含一个 constructor 成员。此成员用来定义新类的构造器，并会被返回。如果此属性 没有 被指定， 则会产生并返回一个构造器，但此构造器仅仅在它的参数中调用父类的构造器。

    它是在任何你提供的构造器中调用父类构造器的。请参看实例代码。

返回值:
  • Function
    <code>overrides</code> 参数中的子类构造器，如果没有提供则会产生一个。
Ext
flatten ( Array arr ) : Array
将嵌套的多维数组合并成一个一维数组。
将嵌套的多维数组合并成一个一维数组。
参数:
  • arr : Array
    需要合并的数组。
返回值:
  • Array
    新的，合并后的数组。
Ext
fly ( String/HTMLElement el , [ String named ] ) : Element
获得全局共享的享元元素（Google 享元模式），使传入的节点为活动的节点。不要存储...

获得全局共享的享元元素（Google 享元模式），使传入的节点为活动的节点。不要存储 该元素的引用-因为此dom节点可能被其他的节点覆盖。 Ext.Element.fly的简写形式。

在应用节点或Ext的类只会访问DOM元素一次时，使用此方法产生对DOM元素的一次性引用。 如果将会有规律的多次访问某个元素，那么使用 Ext.get 将会更适合，Ext.Element 类提供的缓存也会起到作用。

参数:
  • el : String/HTMLElement
    dom节点或id
  • named : String
    （可选 ）允许创建可重用的享元名来避免冲突。(例如 Ext 内部使用"_global")
返回值:
  • Element
    分享的元素对象(或为 null 如果没有发现匹配的元素)
Ext
get ( Mixed el ) : Element
这个方法用来捕获Ext.Element对象，而不能用来捕获 Components. 此方法捕获的Ext.Element包装...
Retrieves Ext.Element objects.

这个方法用来捕获Ext.Element对象，而不能用来捕获 Components. 此方法捕获的Ext.Element包装了原始的DOM元素。 如果需要通过一个Component的id获得Component对象，请使用 Ext.ComponentMgr.get。

此方法使用简单的缓存一致的返回同一个对象。 如果一个对象通过AJAX或者DOM使用相同的id被重新创建，此方法返回的对象将会自动调整。

Ext.Element.get方法的简写形式。
参数:
  • el : Mixed
    节点的id，一个DOM节点或者是已存的Element.
返回值:
  • Element
    Element对象 (如果没有匹配的element则为空）
Ext
getBody () : Ext.Element
将当前文档的body以一个Ext.Element的形式放回。
将当前文档的body以一个 Ext.Element的形式放回。
参数:
  • 无。
返回值:
  • Ext.Element
    该文档的body
Ext
getCmp ( String id ) : Ext.Component
Ext.ComponentMgr.get的简写形式。 根据id查询一个已存的Component。
Ext.ComponentMgr.get的简写形式。 根据id查询一个已存的 Component。
参数:
  • id : String
    The component id
返回值:
  • Ext.Component
    The Component, 如果没找到则为<tt>undefined</tt> or <tt>null</tt> if a Class was found.
Ext
getDoc () : Ext.Element
将当前的HTML 文档对象作为一个Ext.Element返回。
将当前的HTML 文档对象作为一个 Ext.Element返回。
参数:
  • 无。
返回值:
  • Ext.Element
    该文档
Ext
getDom ( Mixed el ) : HTMLElement
返回传递进来的string(id)、DOM节点或者Ext.Element的（原始）DOM节点。 在IE中可能需要 'strict' 标签...
返回传递进来的string(id)、DOM节点或者Ext.Element的（原始）DOM节点。 在IE中可能需要 'strict' 标签，其可以通过getElementById方法返回 'name' 和 'id' 元素。下面是一些例子 :

                                    // 根据id获得dom节点
var elDom = Ext.getDom('elId');
// 根据dom节点获得（原始）dom节点
var elDom1 = Ext.getDom(elDom);

// 如果我们不知道用的是一个
// Ext.Element 或一个dom节点时，使用Ext.getDom
function(el){
    var dom = Ext.getDom(el);
    // 使用dom节点做一些事情
}
注意: 当该方法被成功调用时，DOM节点必需实际的存在(被 渲染, 等等) 。
参数:
  • el : Mixed
返回值:
  • HTMLElement
Ext
getScrollBarWidth ( [ Boolean force ] ) : Number
一个实用的方法，取得浏览器的滚动条的宽度。 由于操作系统的设置不同宽度会不同...
一个实用的方法，取得浏览器的滚动条的宽度。 由于操作系统的设置不同宽度会不同, 例如主题或者字体大小。
参数:
  • force : Boolean
    （可选）如果为true则强制重算该值。
返回值:
  • Number
    滚动条的宽度。
Ext
id ( [ Mixed el ], [ String prefix ] ) : String
产生唯一的id。如果元素已经有一个id，则不会改变它的id值。
产生唯一的id。如果元素已经有一个id，则不会改变它的id值。
参数:
  • el : Mixed
    可选 需要产生id的元素
  • prefix : String
    （可选）Id 的前缀 (默认为 "ext-gen")
返回值:
  • String
    产生的Id.
Ext
invoke ( Array|NodeList arr , String methodName , ...* args ) : Array
在数组中的每个元素上调用同一方法。// 例如: Ext.invoke(Ext.query("p"), "getAttribute", "id"); // [el1.getA...
在数组中的每个元素上调用同一方法。

                                    // 例如:
Ext.invoke(Ext.query("p"), "getAttribute", "id");
// [el1.getAttribute("id"), el2.getAttribute("id"), ..., elN.getAttribute("id")]
参数:
  • arr : Array|NodeList
    调用方法的元素的数组。
  • methodName : String
    调用的方法的名称。
  • args : ...*
    传递给调用的方法的参数。
返回值:
  • Array
    在数组的每个元素上调用方法的返回结果。
Ext
isArray ( Mixed value ) : Boolean
如果传递的值是JavaScript 的数组则返回true，否则返回 false。
如果传递的值是JavaScript 的数组则返回true，否则返回 false。
参数:
  • value : Mixed
    被测试的值
返回值:
  • Boolean
Ext
isBoolean ( Mixed value ) : Boolean
如果传递的值为布尔值则返回true。
如果传递的值为布尔值则返回true。
参数:
  • value : Mixed
    被测试的值
返回值:
  • Boolean
Ext
isDate ( Object object ) : Boolean
如果传递进来的是一个JavaScript的date对象，返回true，否则返回false。
如果传递进来的是一个JavaScript的date对象，返回true，否则返回false。
参数:
  • object : Object
    测试的对象
返回值:
  • Boolean
Ext
isDefined ( Mixed value ) : Boolean
如果传递的值未定义则为true 。
如果传递的值未定义则为true 。
参数:
  • value : Mixed
    被测试的值
返回值:
  • Boolean
Ext
isElement ( Mixed value ) : Boolean
如果传递的值时HTMLElement则返回true
如果传递的值时HTMLElement则返回true
参数:
  • value : Mixed
    被测试的值
返回值:
  • Boolean
Ext
isEmpty ( Mixed value , [ Boolean allowBlank ] ) : Boolean
返回true，如果传递进来的值为null、undefined或者一个空的字符串...
返回true，如果传递进来的值为null、undefined或者一个空的字符串 (除非 allowBlank参数为 true)。
参数:
  • value : Mixed
    被测试的值
  • allowBlank : Boolean
    可选 如果为true则允许空字符串 (默认为false)
返回值:
  • Boolean
Ext
isFunction ( Mixed value ) : Boolean
如果是一个JavaScript函数则返回true，否则为false。
如果是一个JavaScript函数则返回true，否则为false。
参数:
  • value : Mixed
    被测试的值
返回值:
  • Boolean
Ext
isNumber ( Mixed value ) : Boolean
当传递的值为数字时返回true 。如果为无穷数则返回false。
当传递的值为数字时返回true 。如果为无穷数则返回false。
参数:
  • value : Mixed
    被测试的值
返回值:
  • Boolean
Ext
isObject ( Mixed value ) : Boolean
如果发现传入的值是JavaScript对象，否则为false。
如果发现传入的值是JavaScript对象，否则为false
参数:
  • value : Mixed
    被测试的值
返回值:
  • Boolean
Ext
isPrimitive ( Mixed value ) : Boolean
如果传递的值是一个JavaScript 的'原始'类型则返回true， string, number 或 boolean。
如果传递的值是一个JavaScript 的'原始'类型则返回true， string, number 或 boolean。
参数:
  • value : Mixed
    被测试的值
返回值:
  • Boolean
Ext
isString ( Mixed value ) : Boolean
如果传递的值为字符串则返回true。
如果传递的值为字符串则返回true。
参数:
  • value : Mixed
    被测试的值
返回值:
  • Boolean
Ext
iterate ( Object/Array object , Function fn , Object scope ) : void
迭代数组中的元素，或对象中的每个属性，注意：如果你仅仅迭代数组...
迭代数组中的元素，或对象中的每个属性， 注意：如果你仅仅迭代数组，最好调用 each。
参数:
  • object : Object/Array
    被迭代的数组或对象
  • fn : Function
    每一次迭代调用的方法，如果提供的方法返回false，或所有的数组元素/对象属性已经被遍历。 不同的对象类型对应不同的方法签名:
    • Arrays : (Object item, Number index, Array allItems)
      当迭代一个数组时，其中每个元素会被当做参数调用提供的方法。
    • Objects : (String key, Object value, Object)
      当迭代一个对象是，每一个对象中的键值对和被迭代的对象会被当成参数调用提供的方法。
  • scope : Object
    指定方法执行的作用域 ( this 的引用) 。默认为 被迭代的 object 。
返回值:
  • void
Ext
max ( Array|NodeList arr , [ Function comp ] ) : Object
返回数组中的最大值
返回数组中的最大值
参数:
  • arr : Array|NodeList
    选择最大值的数组。
  • comp : Function
    （可选）一个比较元素大小决定最大值的方法。 如果此方法被省略将会使用">"运算符。注意: gt = 1; eq = 0; lt = -1
返回值:
  • Object
    数组中的最大值。
Ext
mean ( Array arr ) : Number
计算数组的评价值
计算数组的评价值
参数:
  • arr : Array
    需要被计算平均值的数组
返回值:
  • Number
    平均值。
Ext
min ( Array|NodeList arr , [ Function comp ] ) : Object
返回数组中的最小值。
返回数组中的最小值。
参数:
  • arr : Array|NodeList
    选择最小值的数组
  • comp : Function
    （可选）一个进行元素间的比较决定最小值的方法 ，如果省略了该方法则会用"<"运算符。注意: gt = 1; eq = 0; lt = -1
返回值:
  • Object
    数组中的最小值
Ext
namespace ( String namespace1 , String namespace2 , String etc ) : Object
创建一个命名空间来划分变量和类的作用域，这样他们就不是全局的作用域了...
创建一个命名空间来划分变量和类的作用域，这样他们就不是全局的作用域了。 具体指定命名空间的最后一个节点来准确的创建其他的节点，用法:
                                Ext.namespace('Company', 'Company.data');
Ext.namespace('Company.data'); // 与上面的语法等效而且更好。
Company.Widget = function() { ... }
Company.data.CustomStore = function(config) { ... }
参数:
  • namespace1 : String
  • namespace2 : String
  • etc : String
返回值:
  • Object
    命名空间对象。（如果传入了多个参数，则此对象将会在最后被创建）
Ext
ns ( String namespace1 , String namespace2 , String etc ) : Object
创建一个命名空间使得作用域里的变量和类都不会是全局的。具体指定...
创建一个命名空间使得作用域里的变量和类都不会是全局的。具体指定命名空间的最后一个节点来准确的创建其他不同节点 用例:
                                Ext.namespace('Company', 'Company.data');
Ext.namespace('Company.data'); // 和上面的语法等效而且更好
Company.Widget = function() { ... }
Company.data.CustomStore = function(config) { ... }
参数:
  • namespace1 : String
  • namespace2 : String
  • etc : String
返回值:
  • Object
    命名空间对象 (如果传递了多个参数，这将是被创建的最后一个命名空间)
Ext
num ( Mixed value , Number defaultValue ) : Number
工具方法，检查一个值是不是数值， 如果不是，返回指定的默认值。
工具方法，检查一个值是不是数值， 如果不是，返回指定的默认值。
参数:
  • value : Mixed
    应该是一个数值，但是任何类型（的数据）都会被恰当地处理。
  • defaultValue : Number
    如果原始值（译者注：指第一个参数）不是数值时的返回值。
返回值:
  • Number
    如果是数值，返回value（译者注：指第一个参数），否则返回defaultValue
Ext
onReady ( Function fn , [ Object scope ], [ boolean options ] ) : void
当文档初始化完成时（在onload事件和图片加载完成之前）触发该方法。此方法为...
当文档初始化完成时（在onload事件和图片加载完成之前）触发该方法。此方法为 Ext.EventManager.onDocumentReady的简写形式。
参数:
  • fn : Function
    事件的回调方法。
  • scope : Object
    （可选）处理方法执行的作用域 ( this 的引用) 。默认为浏览器的window。
  • options : boolean
    （可选）传递给 Ext.Element.addListener的选项对象。 要注意当选项 {single: true} 被使用时，处理方法在第一次调用时会被移除。
返回值:
  • void
Ext
override ( Object origclass , Object overrides ) : void
向一个已存在类的prototype中添加一个方法列表，覆盖已存在的同名方法。...
向一个已存在类的prototype中添加一个方法列表，覆盖已存在的同名方法。 举例:
                                Ext.override(MyClass, {
    newMethod1: function(){
        // etc.
    },
    newMethod2: function(foo){
        // etc.
    }
});
参数:
  • origclass : Object
    The class to override
  • overrides : Object
    原始类添加的方法列表，该表应该指定为一个包含一个或多个方法的对象字面量。
返回值:
  • void
Ext
partition ( Array|NodeList arr , [ Function truth ] ) : Array
分割一个集合为两个: 一个true集合和一个false。 例如: 例子2: // 例子 1: Ext.partition([true,...
分割一个集合为两个: 一个true集合和一个false。 例如: 例子2:

                                    // 例子 1:
Ext.partition([true, false, true, true, false]); // [[true, true, true], [false, false]]

// 例子 2:
Ext.partition(
    Ext.query("p"),
    function(val){
        return val.className == "class1"
    }
);
// 如果段落元素（p标签）的className为"class1"则为true,
// 没有那样的className则为false。
参数:
  • arr : Array|NodeList
    分割的数组
  • truth : Function
    （可选）决定真假的方法。如果忽略了此方法则它自身必须能够分辨真假。（例如上面的例子1）
返回值:
  • Array
    [true<Array>,false<Array>]
Ext
pluck ( Array|NodeList arr , String prop ) : Array
从数组中的每个元素中提取属性的值// 例如: Ext.pluck(Ext.query("p"), "className"); // [el...
从数组中的每个元素中提取属性的值

                                    // 例如:
Ext.pluck(Ext.query("p"), "className"); // [el1.className, el2.className, ..., elN.className]
参数:
  • arr : Array|NodeList
    提取属性值的数组。
  • prop : String
    从数组的每个元素中提取的属性的名称。
返回值:
  • Array
    从数组的每个元素中提取的值。
Ext
preg ( String ptype , Constructor cls ) : void
Ext.ComponentMgr.registerPlugin的简写形式
Ext.ComponentMgr.registerPlugin的简写形式。
参数:
  • ptype : String
    Plugin类查询的 mnemonic string 。
  • cls : Constructor
    新的Plugin类
返回值:
  • void
Ext
query ( String path , [ Node root ] ) : Array
使用CSS/XPath选择一个DOM节点数组， Ext.DomQuery.select的简写形式。
使用CSS/XPath选择一个DOM节点数组， Ext.DomQuery.select的简写形式。
参数:
  • path : String
    查询的 selector/xpath
  • root : Node
    （可选）查询的开始处(默认为document).
返回值:
  • Array
Ext
reg ( String xtype , Constructor cls ) : void
Ext.ComponentMgr.registerType的简写形式
Ext.ComponentMgr.registerType的简写形式
参数:
  • xtype : String
    Component 类查询的 mnemonic string 。
  • cls : Constructor
    新的Component 类。
返回值:
  • void
Ext
removeNode ( HTMLElement node ) : void
从文档中删除此元素，移除所有的DOM事件监听器，同时删除缓存的引用，所有该元素上的...

从文档中删除此元素，移除所有的DOM事件监听器，同时删除缓存的引用，所有该元素上的所有DOM事件监听器会被移除。 如果 Ext.enableNestedListenerRemoval 为 true ,那么所有子节点的DOM事件监听将会被移除。 如果传递的是body节点，将会被忽略。

参数:
  • node : HTMLElement
    要移除的节点。
返回值:
  • void
Ext
select ( String/Array selector , [ HTMLElement/String root ] ) : CompositeElementLite/CompositeElement
根据传递的CSS选择器选择Element，使得 Element 的方法在一条语句中通过返回...
根据传递的CSS选择器选择Element，使得 Element 的方法在一条语句中通过返回 CompositeElement 或 CompositeElementLite 对象，可以被应用到一些相关的元素上。
参数:
  • selector : String/Array
    CSS选择器或一个element数组。
  • root : HTMLElement/String
    （可选）查询的根元素或根的id
返回值:
  • CompositeElementLite/CompositeElement
Ext
sum ( Array arr ) : Number
计算数组的总数
计算数组的总数
参数:
  • arr : Array
    计算总数的数组
返回值:
  • Number
    计算出的总数
Ext
toArray ( Iterable the ) : (Array)
转化任何可迭代的对象（含有索引值和一个表长度的属性）为一个真正的数组，不要在字符串上用...
转化任何可迭代的对象（含有索引值和一个表长度的属性）为一个真正的数组，不要在字符串上用。 IE不支持依赖 "abc"[0]这种的实现。如果是字符串，使用"abc".match(/./g) => [a,b,c];代替（译者注：使用正则表达式分隔字符串形成数组）
参数:
  • the : Iterable
    准备转化为数组返回的对象。
返回值:
  • (Array)
    array
Ext
type ( Mixed object ) : String
返回传入的对象的类型。 如果传入的对象为null或undefined，返回false；否则，返回以下列表中的一个值...
返回传入的对象的类型。 如果传入的对象为null或undefined，返回false；否则，返回以下列表中的一个值：
  • string: 如果传入的对象是一个string
  • number:如果传入的对象是一个number
  • boolean:如果传入的对象是一个布尔值
  • date:如果传入的对象是一个Date对象
  • function:如果传入的对象是一个function的引用
  • object: 如果传入的对象是一个object
  • array: 如果传入的对象是一个array
  • regexp:如果传入的对象是一个正则表达式
  • element:如果传入的对象是一个DOM元素
  • nodelist:如果传入的对象是一个DOM节点链表
  • textnode:如果传入的对象是一个text节点并且包含除空格以外的东西
  • whitespace:如果传入的对象是一个DOM text元素，并且仅仅包含空格
参数:
  • object : Mixed
返回值:
  • String
Ext
unique ( Array arr ) : Array
为传递的数组创建一个过滤掉重复值的拷贝。
为传递的数组创建一个过滤掉重复值的拷贝。
参数:
  • arr : Array
    过滤的数组
返回值:
  • Array
    去掉重复值的数组
Ext
urlAppend ( String url , String s ) : (String)
为URL的查询字符串添加内容，处理逻辑判断添加问号还是与运算符。
为URL的查询字符串添加内容，处理逻辑判断添加问号还是与运算符。
参数:
  • url : String
    添加到的URL。
  • s : String
    添加到URL上的内容。
返回值:
  • (String)
    完成添加的URL
Ext
urlDecode ( String string , [ Boolean overwrite ] ) : Object
将一个编码好的URL转换成一个对象。例如：Ext.urlDecode("foo=1&bar=2")，将会返回 ...
将一个编码好的URL转换成一个对象。例如：
                                Ext.urlDecode("foo=1&bar=2"); // 返回 {foo: "1", bar: "2"}
Ext.urlDecode("foo=1&bar=2&bar=3&bar=4", false); // 返回 {foo: "1", bar: ["2", "3", "4"]}
参数:
  • string : String
  • overwrite : Boolean
    （可选）相同名字的元素将会覆盖先前的值，而不是创建一个数组 (默认为 false)。
返回值:
  • Object
    成员的字面量（json对象）
Ext
urlEncode ( Object o , [ String pre ] ) : String
将一个对象转换成URL编码，例如： Ext.urlEncode({foo: 1, bar: 2}); 将会返回"foo=1&bar=2". ...
将一个对象转换成URL编码，例如：Ext.urlEncode({foo: 1, bar: 2})，将会返回"foo=1&bar=2"。 可选的，属性值也可能是数组，其中的每个元素值将是由键/值对组成，而不是键数组(keys)和返回的结果字符串组成。 pair for each array value.
参数:
  • o : Object
  • pre : String
    （可选）为编码的字符串添加的前缀
返回值:
  • String
Ext
value ( Mixed value , Mixed defaultValue , [ Boolean allowBlank ] ) : Mixed
一个实用的方法，如果传递的值为空则返回一个默认值。 如果为以下的值时被认定为空...

一个实用的方法，如果传递的值为空则返回一个默认值。

如果为以下的值时被认定为空：

  • null
  • undefined
  • 空的array
  • 0长度的字符串(除非 allowBlank 参数为 true)
参数:
  • value : Mixed
    被测试的值
  • defaultValue : Mixed
    如果原始值为空，该值会被返回
  • allowBlank : Boolean
    可选 如果为true则允许0长度的字符串会被认定为非空(默认为false)
返回值:
  • Mixed
    value的值, 如果非空，反之为defaultValue的值。
Ext
zip ( Arrays|NodeLists arr , [ Function zipper ] ) : Array
压缩N个集合在一起。// 例子 1: Ext.zip([1,2,3],[4,5,6]); // [[1,4],[2,5],[3,6]] // 例子 2: Ext.zip( [ "+"...
。

压缩N个集合在一起

                                    // 例子 1:
Ext.zip([1,2,3],[4,5,6]); // [[1,4],[2,5],[3,6]]
//例子 2:
Ext.zip(
    [ "+", "-", "+"],
    [  12,  10,  22],
    [  43,  15,  96],
    function(a, b, c){
        return "$" + a + "" + b + "." + c
    }
); // ["$+12.43", "$-10.15", "$+22.96"]
参数:
  • arr : Arrays|NodeLists
    该参数可能重复，推荐使用Array(s)。
  • zipper : Function
    （可选）参数列表的最后一项，该项表示将元素压缩在一起的方法。
返回值:
  • Array
    被压缩的集合。
Ext

公共事件

该类没有公共事件。


Class Ext.KeyMap

包: | Ext
定义类的文件: | KeyMap.js
类: | KeyMap
继承自: | Object
为元素提供绑定按键到操作的映射。一个按键映射可以被多个操作使用。 构造器接受相同的配置对象，在addBinding 定义。如果你将一个回调函数绑定到一个KeyMap，任何时刻KeyMap处理一个期望的 按键绑定时将会使用当前签名调用此函数(如果映射是一个多按键绑定，回调函数只会被调用 一次):(String key, Ext.EventObject e)一个KeyMap也可以处理一个按键字符串描述。
用法:
// 根据按键码映射一个按键
var map = new Ext.KeyMap("my-element", {
    key: 13, // 或者Ext.EventObject.ENTER
    fn: myHandler,
    scope: myObject
});

// 同字符串将多个按键映射到一个操作
var map = new Ext.KeyMap("my-element", {
    key: "a\r\n\t",
    fn: myHandler,
    scope: myObject
});

// 根据字符串和按键码数组讲多个按键映射到多个操作
var map = new Ext.KeyMap("my-element", [
    {
        key: [10,13],
        fn: function(){ alert("Return was pressed"); }
    }, {
        key: "abc",
        fn: function(){ alert('a, b or c was pressed'); }
    }, {
        key: "\t",
        ctrl:true,
        shift:true,
        fn: function(){ alert('Control + shift + tab was pressed.'); }
    }
]);
注意: 开始时KeyMap都是启用的

公共属性

Property |  | Defined By
 | stopEvent : Boolean 如果按键被KeyMap处理，true将会停止事件冒泡并且阻止默认的浏览器操作... 如果按键被KeyMap处理，true将会停止事件冒泡并且阻止默认的浏览器操作 (默认为false) | KeyMap

公共方法

Method Defined By
KeyMap ( Mixed el , Object config , [ String eventName ] )
参数:
  • el : Mixed
    需要绑定的目标元素
  • config : Object
    配置项(参见 addBinding)
  • eventName : String
    (可选)需要绑定的目标事件(默认为"keydown")
返回值:
  • void
KeyMap
addBinding ( Object/Array config ) : void
向当前KeyMap中添加一个新的绑定。 支持如下配置对象参数...
向当前KeyMap中添加一个新的绑定。 支持如下配置对象参数:
Property    Type             Description
----------  ---------------  ----------------------------------------------------------------------
key         String/Array     需要处理的单个按键码或者一个按键码数组
shift       Boolean          True时将会仅仅在shift被按下时才处理按键，false将仅仅在不按shift时才处理按键(默认为undefined)
ctrl        Boolean          True时将会仅仅在ctrl被按下时才处理按键，false将仅仅在不按ctrl时才处理按键(默认为undefined)
alt         Boolean          True时将会仅仅在alt被按下时才处理按键，false将仅仅在不按alt时才处理按键(默认为undefined)
handler     Function         当KeyMap找到了对应的按键绑定时需要调用的函数
fn          Function         处理函数的别名(为了向后兼容)
scope       Object           回调函数的作用域
stopEvent   Boolean          True将会在按键被KeyMap处理时停止事件冒泡并且阻止默认的浏览器操作(默认为false)
用法:
// 创建一个KeyMap
var map = new Ext.KeyMap(document, {
    key: Ext.EventObject.ENTER,
    fn: handleKey,
    scope: this
});

//以后向现有的KeyMap中添加一个新的绑定
map.addBinding({
    key: 'abc',
    shift: true,
    fn: handleKey,
    scope: this
});
参数:
  • config : Object/Array
    单个的KeyMap配置或者一个配置数组
返回值:
  • void
KeyMap
disable () : void
禁用当前KeyMap
禁用当前KeyMap
参数:
  • 无。
返回值:
  • void
KeyMap
enable () : void
启用当前KeyMap
启用当前KeyMap
参数:
  • 无。
返回值:
  • void
KeyMap
isEnabled () : Boolean
如果当前KeyMap被启用返回true
如果当前KeyMap被启用返回true
参数:
  • 无。
返回值:
  • Boolean
KeyMap
on ( Number/Array/Object key , Function fn , [ Object scope ] ) : void
添加单个按键监听器的快捷方式
添加单个按键监听器的快捷方式
参数:
  • key : Number/Array/Object
    要么是数字按键码，要么是一个按键码数组，或者是一个拥有如下选项的 对象: {key: (number 或者 array), shift: (true/false), ctrl: (true/false), alt: (true/false)}
  • fn : Function
    需要调用的函数
  • scope : Object
    (可选) 作用域( this 引用)，函数将会在其中被执行，默认为浏览器的window。
返回值:
  • void
KeyMap
setDisabled ( Boolean disabled ) : void
通过布尔值设置启用/禁用的工具方法。
通过布尔值设置启用/禁用的工具方法。
参数:
  • disabled : Boolean
返回值:
  • void
KeyMap

公共事件

该类没有公共事件。


Class Ext.KeyNav

包: | Ext
定义类的文件: | KeyNav.js
类: | KeyNav
继承自: | Object

为规范化的键盘导航提供一个方便的包装器。KeyNav允许你将导航键绑定到 一个函数，当键被按下时函数被调用，为所有UI组件实现定制导航提供一个 简单的方法。

以下是可以被实现的所有可能按键: enter, left, right, up, down, tab, esc, pageUp, pageDown, del, home, end。 用法:

var nav = new Ext.KeyNav("my-element", {
    "left" : function(e){
        this.moveLeft(e.ctrlKey);
    },
    "right" : function(e){
        this.moveRight(e.ctrlKey);
    },
    "enter" : function(e){
        this.save();
    },
    scope : this
});

配置项

Config Options |  | Defined By
 | defaultEventAction : String 在KeyNav截获一次按键后在Ext.EventObject 上调用的方法。合法的值有... 在KeyNav截获一次按键后在Ext.EventObject 上调用的方法。合法的值有 Ext.EventObject.stopEvent, Ext.EventObject.preventDefault 和 Ext.EventObject.stopPropagation (默认为'stopEvent') | KeyNav
 | disabled : Boolean True将会禁用当前KeyNav实例(默认为false) | KeyNav
 | forceKeyDown : Boolean 处理keydown事件替代keypress(默认为false)。 KeyNav自动如此处理，因为IE不会在keypress时传播特殊按键... 处理keydown事件替代keypress(默认为false)。 KeyNav自动如此处理，因为IE不会在keypress时传播特殊按键， 但是设置此参数为true将会强制其它浏览器也使用keydown替代keypress。 | KeyNav

公共属性

该类没有公共属性。

公共方法

Method Defined By
KeyNav ( Mixed el , Object config )
参数:
  • el : Mixed
    The element to bind to
  • config : Object
    The config
返回值:
  • void
KeyNav
destroy () : void
销毁当前KeyNav(这和调用disable方法等价)。
销毁当前KeyNav(这和调用disable方法等价)。
参数:
  • 无。
返回值:
  • void
KeyNav
disable () : void
禁用当前KeyNav
禁用当前KeyNav
参数:
  • 无。
返回值:
  • void
KeyNav
enable () : void
启用当前KeyNav
启用当前KeyNav
参数:
  • 无。
返回值:
  • void
KeyNav
setDisabled ( Boolean disabled ) : void
为根据布尔值设置启用/禁用的便捷方法。
为根据布尔值设置启用/禁用的便捷方法。
参数:
  • disabled : Boolean
返回值:
  • void
KeyNav

公共事件

该类没有公共事件。


Element
    Layer

Class Ext.Layer

包: | Ext
定义类的文件: | Layer.js
类: | Layer
继承自: | Element
一个继承自Ext.Element的 对象，提供阴影和衬垫(shadow and shim)，对齐到视口并自动维护shadow/shim的位置。

配置项

Config Options |  | Defined By
 | cls : String 需要添加到元素上的CSS类 | Layer
 | constrain : Boolean False将会禁用对齐到视口(默认为true) | Layer
 | dh : Object 用来创建元素的DomHelper配置对象(默认为{tag:'div', cls: 'x-layer'})。 | Layer
 | shadow : String/Boolean True将会自动创建一个Ext.Shadow 或者一个描述阴影显示模式Ext.Shadow.mode 的字符串。... True将会自动创建一个Ext.Shadow 或者一个描述阴影显示模式Ext.Shadow.mode 的字符串。 False将会禁用阴影。(默认为false) | Layer
 | shadowOffset : Number 阴影便宜量，像素值(默认为4) | Layer
 | shim : Boolean False将会在需要的它的浏览器中禁用基于iframe的衬垫 (默认为true) | Layer
 | useDisplay : Boolean 默认使用CSS偏移量来隐藏Layer。 指定为true将会使用CSS样式'display:none;'来隐藏 Layer。 | Layer
 | zindex : Number 起始z-index(默认为11000) | Layer

公共属性

Property |  | Defined By
 | DISPLAY : Number 可视模式常量，setVisibilityMode 使用。使用display隐藏元素 | Element
 | VISIBILITY : Number 可视模式常量，setVisibilityMode 使用。 使用visibility隐藏元素 | Element
 | autoBoxAdjust : Object true将会自动调整宽度和高度设置，因为某些box-model问题(默认为true) | Element
 | defaultUnit : String The default unit to append to CSS values where a unit isn't provided (defaults to px). | Element
 | dom : HTMLElement DOM元素 | Element
 | id : String DOM元素的ID | Element
 | originalDisplay : String 元素默认的显示模式(默认为"") | Element

公共方法

Method Defined By
Layer ( Object config , [ String/HTMLElement existingEl ] )
参数:
  • config : Object
    一个包含配置选项的对象。
  • existingEl : String/HTMLElement
    (可选)使用现有的DOM元素。如果元素不存在，则创建之。
返回值:
  • void
Layer
addClass ( String/Array className ) : Ext.Element
向元素上添加一个活多个CSS样式类。 重复的类将会被自动过滤掉。
向元素上添加一个活多个CSS样式类。 重复的类将会被自动过滤掉。
参数:
  • className : String/Array
    需要添加的CSS类，或者是一个样式数组
返回值:
  • Ext.Element
    this
Element
addClassOnClick ( String className ) : Ext.Element
设置事件处理器，当鼠标在元素上按下并弹起时添加并删除...
设置事件处理器，当鼠标在元素上按下并弹起时添加并删除一个CSS类(一种点击特效)。
参数:
  • className : String
返回值:
  • Ext.Element
    this
Element
addClassOnFocus ( String className ) : Ext.Element
设置一个事件处理函数，在当前元素获得焦点时添加然后删除一个CSS类
设置一个事件处理函数，在当前元素获得焦点时添加然后删除一个CSS类
参数:
  • className : String
返回值:
  • Ext.Element
    this
Element
addClassOnOver ( String className ) : Ext.Element
设置需要添加的事件监听器并在鼠标滑过当前元素时删除一个CSS类
设置需要添加的事件监听器并在鼠标滑过当前元素时删除一个CSS类
参数:
  • className : String
返回值:
  • Ext.Element
    this
Element
addKeyListener ( Number/Array/Object/String key , Function fn , [ Object scope ] ) : Ext.KeyMap
用来构造KeyMap的便捷方法
用来构造KeyMap的便捷方法
参数:
  • key : Number/Array/Object/String
    可以是一个包含了需要监听的key的字符串、按键码、按键码数组， 或者是一个拥有如下选项的对象: {key: (number or array), shift: (true/false), ctrl: (true/false), alt: (true/false)}
  • fn : Function
    需要调用的方法
  • scope : Object
    (可选)作用域( this 引用)，指定的函数将会在其中被执行。默认为当前元素。
返回值:
  • Ext.KeyMap
    创建的KeyMap
Element
addKeyMap ( Object config ) : Ext.KeyMap
为当前元素创建一个KeyMap
为当前元素创建一个KeyMap
参数:
  • config : Object
    KeyMap配置。更多细节参见Ext.KeyMap
返回值:
  • Ext.KeyMap
    创建的KeyMap
Element
addListener ( String eventName , Function fn , [ Object scope ], [ Object options ] ) : Ext.Element
向当前元素添加一个事件处理函数。 与快捷方式on等价。
向当前元素添加一个事件处理函数。 与快捷方式on等价。
参数:
  • eventName : String
    需要处理的事件名。
  • fn : Function
    事件调用的处理函数。 此函数将会被传递如下参数:
    • evt : EventObject
      EventObject 对象，描述事件。
    • el : HtmlElement
      DOM元素，它是事件的目标。 注意，此参数可以通过使用delegate选项进行过滤。
    • o : Object
      来自addListener调用的选项对象。
  • scope : Object
    (可选)作用域( this 引用)处理函数将会在其中被执行。 如果忽略，默认为当前Element。
  • options : Object
    (可选)一个包含处理函数配置参数的对象。 此参数可以包含一下任何参数:
    • scope Object :
      作用域( this 引用)处理函数将会在其中被执行。 如果忽略，默认为当前Element
    • delegate String:
      一个简单的选择器，用来过滤事件目标或者用来查找事件目标的后代节点。 额外细节参见下文。
    • stopEvent Boolean:
      设置为true将终止事件。也就是停止冒泡、并阻止默认的操作。
    • preventDefault Boolean:
      设置为true将阻止默认的操作。
    • stopPropagation Boolean:
      设置为true将阻止事件冒泡。
    • normalized Boolean:
      设置为false将把浏览器事件传递给处理函数，而不是Ext.EventObject
    • target Ext.Element:
      只有事件在目标Element上被触发时才调用处理函数， 而不是在一个子节点冒泡的事件上调用。
    • delay Number:
      在事件触发后，延迟调用处理函数的毫秒数。
    • single Boolean:
      设置为true，将在事件发生后立即添加一个处理函数来处理事件，然后马上删除此处理函数。
    • buffer Number:
      导致处理函数在Ext.util.DelayedTask中按计划执行，延迟指定的毫秒数。 如果在这段时间内此事件被再次触发，原来的处理函数将不会被调用， 但是新的处理函数将会在计划任务中替代它。

    组合选项
    在以下的例子中，将使用缩写形式 on 来替代冗长的addListener方法。 这两种写法是等价的。使用配置参数，可以绑定不同类型的监听器：

    一个规格化的、延迟的、只调用一次的监听器，将会自动停止事件并添加一个定制的参数(forumId) 到配置对象。配置对象被作为处理函数的第三个参数来使用。

    Code:
    el.on('click', this.onClick, this, {
    single: true,
    delay: 100,
    stopEvent : true,
    forumId: 4
});

    一次调用添加多个处理函数
    此方法也允许传递单个的参数，它是一个配置对象，包含了多个处理函数的详细描述。

    Code:

    el.on({
    'click' : {
        fn: this.onClick,
        scope: this,
        delay: 100
    },
    'mouseover' : {
        fn: this.onMouseOver,
        scope: this
    },
    'mouseout' : {
        fn: this.onMouseOut,
        scope: this
    }
});

    或者一种缩写的方式:
    Code:

el.on({
    'click' : this.onClick,
    'mouseover' : this.onMouseOver,
    'mouseout' : this.onMouseOut,
    scope: this
});

    代理

    这是一个配置选项，你可以在注册处理函数时一起传递，用来 使用事件代理协助处理事件。 事件代理是一种用来降低内存消耗并阻止内存泄漏的技术。 通过在一个容器元素上注册一个事件而不是在容器中的每个元素 上注册。通过将此配置选项设置为一个简单选择子， 目标元素将会被过滤，以便寻找目标的后代元素。例如:

// using this markup:
<div id='elId'>
    <p id='p1'>paragraph one</p>
    <p id='p2' class='clickable'>paragraph two</p>
    <p id='p3'>paragraph three</p>
</div>
// utilize event delegation to registering just one handler on the container element:
el = Ext.get('elId');
el.on(
    'click',
    function(e,t) {
        // handle click
        console.info(t.id); // 'p2'

    },
    this,
    {
        // filter the target element to be a descendant with the class 'clickable'

        delegate: '.clickable'
    }
);

返回值:
  • Ext.Element
    this
Element
alignTo ( Mixed element , String position , [ Array offsets ], [ Boolean/Object animate ] ) : Ext.Element
根据指定的锚定点，把当前元素对齐到另一个元素。 如果其它元素是document，将会把它对齐到视口。...
根据指定的锚定点，把当前元素对齐到另一个元素。 如果其它元素是document，将会把它对齐到视口。 位置参数是可选的，可以指定为以下任何格式之一:
  • 空值: 默认将把元素的左上角对齐到目标的左下角("tl-bl")。
  • One anchor (已废弃): 所传递的锚定位置被用作目标元素的锚定点。被对齐的元素将会 把它的左上角(tl)定位到那个点。 此方法已废弃，推荐使用下面新的两个锚定符号。
  • Two anchors: 如果传递来自下面表格中的两个值，用中划线分隔，第一个值被用作元素的锚定点， 第二个值被用作目标的锚定点。
除了锚定点之外，位置参数也支持"?"字符。如果在位置字符串末尾传递"?"， 元素将会试图按照指定方式对齐，但是如果必要，位置将会根据视口进行计算。 注意，被对齐的元素可以被交换而对齐到一个与指定值不同的位置，以便强制 视口约束。以下是所有支持的锚定位置:
Value  Description
-----  -----------------------------
tl     左上角(默认)
t      顶边中点
tr     右上角
l      左侧中点
c      元素中点
r      右侧中点
bl     左下角
b      底部中点
br     右下角
示例用法:
// 使用默认定位("tl-bl"，不强制)将一个元素对齐到另一个元素
el.alignTo("other-el");

// align the top left corner of el with the top right corner of other-el (constrained to viewport)
el.alignTo("other-el", "tr?");

// align the bottom right corner of el with the center left edge of other-el
el.alignTo("other-el", "br-l?");

// align the center of el with the bottom left corner of other-el and
// adjust the x position by -6 pixels (and the y position by 0)
el.alignTo("other-el", "c-bl", [-6, 0]);
参数:
  • element : Mixed
    需要对齐到的元素。
  • position : String
    (可选，默认为"tl-bl?")需要对齐到的位置。
  • offsets : Array
    (可选)根据[x, y]的位置偏移
  • animate : Boolean/Object
    (可选)True将进行默认的动画效果，或者是一个标准的Element 动画配置对象
返回值:
  • Ext.Element
    this
Element
anchorTo ( Mixed element , String position , [ Array offsets ], [ Boolean/Object animate ], [ Boolean/Number monitorScroll ], Function callback ) : Ext.Element
将一个元素锚定到另一个元素上，并在window尺寸发生变化时重新进行对齐。
将一个元素锚定到另一个元素上，并在window尺寸发生变化时重新进行对齐。
参数:
  • element : Mixed
    对齐到的元素。
  • position : String
    需要对齐到的位置。
  • offsets : Array
    (可选)根据[x, y]偏移量进行定位
  • animate : Boolean/Object
    (可选)True将会使用默认动画效果或者使用一个标准的Element动画配置对象
  • monitorScroll : Boolean/Number
    (可选)True将会监听并响应body的滚动操作。 如果此参数是一个数字，它将被用作延时缓存 (默认为50ms)。
  • callback : Function
    在动画效果结束后需要调用的函数
返回值:
  • Ext.Element
    this
Element
animate ( Object args , [ Float duration ], [ Function onComplete ], [ String easing ], [ String animType ] ) : Ext.Element
在当前元素上执行自定义的动画效果...
在当前元素上执行自定义的动画效果。
  • Animation Properties

    • The Animation Control Object enables gradual transitions for any member of an element's style object that takes a numeric value including but not limited to these properties:

    • bottom, top, left, right
    • height, width
    • margin, padding
    • borderWidth
    • opacity
    • fontSize
    • lineHeight
  • Animation Property Attributes

    • 每个动画参数都是一个配置对象，拥有可配置的参数:

    • by* : relative change - start at current value, change by this value
    • from : ignore current value, start from this value
    • to* : start at current value, go to this value
    • unit : any allowable unit specification

      • *对于同一个动画属性，不要同时指定to和by

  • Animation Types

    • 支持的动画类型:

    • 'run' : Default
      var el = Ext.get('complexEl');
el.animate(
    // animation control object
    {
        borderWidth: {to: 3, from: 0},
        opacity: {to: .3, from: 1},
        height: {to: 50, from: el.getHeight()},
        width: {to: 300, from: el.getWidth()},
        top  : {by: - 100, unit: 'px'},
    },
    0.35,      // animation duration
    null,      // callback
    'easeOut', // easing method
    'run'      // animation type ('run','color','motion','scroll')
);
    • 'color'

      Animates transition of background, text, or border colors.

      el.animate(
    // animation control object
    {
        color: { to: '#06e' },
        backgroundColor: { to: '#e06' }
    },
    0.35,      // animation duration
    null,      // callback
    'easeOut', // easing method
    'color'    // animation type ('run','color','motion','scroll')
);
    • 'motion'

      Animates the motion of an element to/from specific points using optional bezier way points during transit.

      el.animate(
    // animation control object
    {
        borderWidth: {to: 3, from: 0},
        opacity: {to: .3, from: 1},
        height: {to: 50, from: el.getHeight()},
        width: {to: 300, from: el.getWidth()},
        top  : {by: - 100, unit: 'px'},
        points: {
            to: [50, 100],  // go to this point
            control: [      // optional bezier way points
                [ 600, 800],
                [-100, 200]
            ]
        }
    },
    3000,      // animation duration (milliseconds!)
    null,      // callback
    'easeOut', // easing method
    'motion'   // animation type ('run','color','motion','scroll')
);
    • 'scroll'

      Animate horizontal or vertical scrolling of an overflowing page element.

      el.animate(
    // animation control object
    {
        scroll: {to: [400, 300]}
    },
    0.35,      // animation duration
    null,      // callback
    'easeOut', // easing method
    'scroll'   // animation type ('run','color','motion','scroll')
);
参数:
  • args : Object
    动画控制参数
  • duration : Float
    (可选)动画持续的秒数(默认为.35)
  • onComplete : Function
    (可选)当动画效果结束时需要调用的函数
  • easing : String
    (可选)需要使用的 Ext.Fx.easing 方式(默认为'easeOut')
  • animType : String
    (可选) 'run'是默认参数。也可以是 'color', 'motion',或者 'scroll'
返回值:
  • Ext.Element
    this
Element
appendChild ( String/HTMLElement/Array/Element/CompositeElement el ) : Ext.Element
将传递的element(s)添加到当前元素
将传递的element(s)添加到当前元素
参数:
  • el : String/HTMLElement/Array/Element/CompositeElement
返回值:
  • Ext.Element
    this
Element
appendTo ( Mixed el ) : Ext.Element
将当前元素添加到传递的元素上
将当前元素添加到传递的元素上
参数:
  • el : Mixed
    新的父元素
返回值:
  • Ext.Element
    this
Element
applyStyles ( String/Object/Function styles ) : Ext.Element
setStyle 方法更灵活的版本，用来设置样式参数。
setStyle 方法更灵活的版本，用来设置样式参数。
参数:
  • styles : String/Object/Function
    一个样式描述字符串，例如:"width:100px"，或者是一个格式为 {width:"100px"}的对象 or object，或者是一个函数，它返回 以上内容。
返回值:
  • Ext.Element
    this
Element
autoHeight ( [ Boolean animate ], [ Float duration ], [ Function onComplete ], [ String easing ] ) : Ext.Element
Measures the element's content height and updates height to match. Note: this function uses setTimeout so the new hei...
Measures the element's content height and updates height to match. Note: this function uses setTimeout so the new height may not be available immediately.
参数:
  • animate : Boolean
    可选 Animate the transition (defaults to false)
  • duration : Float
    可选 Length of the animation in seconds (defaults to .35)
  • onComplete : Function
    可选 Function to call when animation completes
  • easing : String
    可选 Easing method to use (defaults to easeOut)
返回值:
  • Ext.Element
    this
Element
blur () : Ext.Element
尝试让元素失去焦点。所有异常都会被捕捉并忽略掉。
尝试让元素失去焦点。所有异常都会被捕捉并忽略掉。
参数:
  • 无。
返回值:
  • Ext.Element
    this
Element
boxWrap ( [ String class ] ) : Ext.Element
Wraps the specified element with a special 9 element markup/CSS block that renders by default as a gray container wit...

使用一个特殊的9元素标志/CSS块(译者注：类似nine-grid)包装指定的元素， 默认情况下它渲染成一个灰色的容器，有线性渐变背景、圆角，和4个方向的阴影。

当使用盒子包装元素时，这种特殊的标志的使用贯穿整个Ext ( Ext.Button, Ext.Panel 当 frame=true , Ext.Window)。 此标志的格式如下:

Ext.Element.boxMarkup =
    '<div class="{0}-tl"><div class="{0}-tr"><div class="{0}-tc"></div></div></div>
     <div class="{0}-ml"><div class="{0}-mr"><div class="{0}-mc"></div></div></div>
     <div class="{0}-bl"><div class="{0}-br"><div class="{0}-bc"></div></div></div>';

示例用法:

// 基本盒子包装
    Ext.get("foo").boxWrap();
    // 你也可以添加自定义的CSS类并使用CSS继承规则以定制盒子的外观。
    // 'x-box-blue' 是一个内建的选项--对于如何创建一个自定义的包装盒样式
    // 参见例子中相关的CSS定义。
    Ext.get("foo").boxWrap().addClass("x-box-blue");
参数:
  • class : String
    (可选)一个被应用到容器包装器元素的基本CSS类 (默认为'x-box')。 注意有很多CSS规则依赖此名称，用来保证全部效果能起作用， 所以，如果你提供一个用来替换的基类，确保你同时提供了所有必须的规则。
返回值:
  • Ext.Element
    创建的盒子结构最外层的包装元素。
Element
center ( [ Mixed centerIn ] ) : void
将元素放置到视口或者另一个元素的正中。
将元素放置到视口或者另一个元素的正中。
参数:
  • centerIn : Mixed
    (可选)需要在其中进行置中的元素。
返回值:
  • void
Element
child ( String selector , [ Boolean returnDom ] ) : HTMLElement/Ext.Element
根据所传递的CSS选择子，选中当前元素之下任何深度的单个子元素...
根据所传递的CSS选择子，选中当前元素之下任何深度的单个子元素 (选择子不应该包含id)。
参数:
  • selector : String
    CSS选择子
  • returnDom : Boolean
    (可选)True将会返回DOM节点而不是Ext.Element(默认为false)
返回值:
  • HTMLElement/Ext.Element
    子Ext.Element(如果returnDom = true为DOM节点)
Element
clean ( [ Boolean forceReclean ] ) : void
删除无用的文本节点
删除无用的文本节点
参数:
  • forceReclean : Boolean
    (可选)默认情况下，如果元素已经被清理过，它保存调用轨迹， 所以你可以不断调用此方法。然而，如果你更新元素时需要强制 进行一次重新清理，你可以传递true。
返回值:
  • void
Element
clearOpacity () : Ext.Element
从当前元素上清除所有不透明度设置。在IE中，某些情况下是必须的。
从当前元素上清除所有不透明度设置。在IE中，某些情况下是必须的。
参数:
  • 无。
返回值:
  • Ext.Element
    this
Element
clearPositioning ( [ String value ] ) : Ext.Element
当文档被加载之后，将位置返回到默认值
当文档被加载之后，将位置返回到默认值
参数:
  • value : String
    (可选)left,right,top,bottom使用的值，默认为''(空字符串)。 你也可以使用'auto'。
返回值:
  • Ext.Element
    this
Element
clip () : Ext.Element
存储当前元素上溢出的设置并截断溢出的部分---可以使用unclip 移除
存储当前元素上溢出的设置并截断溢出的部分---可以使用unclip 移除
参数:
  • 无。
返回值:
  • Ext.Element
    this
Element
contains ( HTMLElement/String el ) : Boolean
如果当前元素是所传递元素的祖先，返回true
如果当前元素是所传递元素的祖先，返回true
参数:
  • el : HTMLElement/String
    需要检查的元素
返回值:
  • Boolean
    如果当前元素是所传递元素的祖先，为true，其它为false
Element
createChild ( Object config , [ HTMLElement insertBefore ], [ Boolean returnDom ] ) : Ext.Element
创建传递的DomHelper配置并将它添加到当前元素，可以选择将它...
创建传递的DomHelper配置并将它添加到当前元素，可以选择将它 插入到传递的子元素之前。
参数:
  • config : Object
    DomHelper元素配置对象。 如果没有指定标签 (例如{tag:'input'})，将会自动使用指定参数创建一个div
  • insertBefore : HTMLElement
    (可选)当前元素的一个子元素
  • returnDom : Boolean
    (可选)true将会返回dom节点而不是创建一个Element
返回值:
  • Ext.Element
    新的子元素
Element
createProxy ( String/Object config , [ String/HTMLElement renderTo ], [ Boolean matchBox ] ) : Ext.Element
创建当前元素的一个代理元素
创建当前元素的一个代理元素
参数:
  • config : String/Object
    代理元素的类名，或者一个DomHelper配置对象
  • renderTo : String/HTMLElement
    (可选)元素或者元素id，代理元素将会被渲染到其中(默认为document.body)
  • matchBox : Boolean
    (可选)True将会把代理元素对齐到当前元素并调整为当前元素的尺寸(默认为false)
返回值:
  • Ext.Element
    新的代理元素
Element
createShim () : Ext.Element
为当前元素创建一个iframe衬垫，以保持选中状态，避免其它窗体对象显示在其前面。
为当前元素创建一个iframe衬垫，以保持选中状态，避免其它窗体对象显示在其前面。
参数:
  • 无。
返回值:
  • Ext.Element
    新的衬垫元素
Element
down ( String selector , [ Boolean returnDom ] ) : HTMLElement/Ext.Element
根据传递进来的CSS选择器选择单个*直接*子元素 (选择器不能含有id)。
根据传递进来的CSS选择器选择单个*直接*子元素 (选择器不能含有id)。
参数:
  • selector : String
    CSS选择子
  • returnDom : Boolean
    (可选)True将会返回DOM节点而不是Ext.Element(默认为false)
返回值:
  • HTMLElement/Ext.Element
    子Ext.Element(或者是DOM节点，如果returnDom = true)
Element
enableDisplayMode ( [ String display ] ) : Ext.Element
setVisibilityMode(Element.DISPLAY)方法的快捷方式
setVisibilityMode(Element.DISPLAY)方法的快捷方式
参数:
  • display : String
    (可选)当可见时设置给display的值
返回值:
  • Ext.Element
    this
Element
findParent ( String selector , [ Number/Mixed maxDepth ], [ Boolean returnEl ] ) : HTMLElement
先查看当前节点，然后查看其父节点，查找一个与传递尽进来的简单选择器相 匹配的节点(例如div.some-class或者 span:first-child)
先查看当前节点，然后查看其父节点，查找一个与传递尽进来的简单选择器相 匹配的节点(例如div.some-class或者 span:first-child)
参数:
  • selector : String
    需要进行测试的简单选择子
  • maxDepth : Number/Mixed
    (可选)搜索的最大深度，可以是一个数字或者元素 (默认为50||document.body)
  • returnEl : Boolean
    (可选)True将会返回一个Ext.Element对象而不是DOM节点
返回值:
  • HTMLElement
    匹配的DOM节点(如果没有找到匹配的项目为null)
Element
findParentNode ( String selector , [ Number/Mixed maxDepth ], [ Boolean returnEl ] ) : HTMLElement
在父节点中进行查找，知道一个与传递的简单选择子相匹配的项目 (例如div.some-class或者span:first-child)
在父节点中进行查找，知道一个与传递的简单选择子相匹配的项目 (例如div.some-class或者span:first-child)
参数:
  • selector : String
    需要进行测试的简单选择子
  • maxDepth : Number/Mixed
    (可选)最大搜索深度，可以是一个数字或者元素(默认为10||document.body)
  • returnEl : Boolean
    (可选)True将会返回一个Ext.Element对象而不是DOM节点
返回值:
  • HTMLElement
    符合条件的DOM节点(如果没有查找到时为null)
Element
first ( [ String selector ], [ Boolean returnDom ] ) : Ext.Element/HTMLElement
获取第一个孩子，跳过文本节点
获取第一个孩子，跳过文本节点
参数:
  • selector : String
    (可选)查找符合所传递的简单选择子的下一个兄弟节点
  • returnDom : Boolean
    (可选)True将会返回一个原始的dom节点而不是Ext.Element
返回值:
  • Ext.Element/HTMLElement
    第一个孩子节点，或者null
Element
fly ( String/HTMLElement el , [ String named ] ) : Element
Gets the globally shared flyweight Element, with the passed node as the active element. Do not store a reference to t...

Gets the globally shared flyweight Element, with the passed node as the active element. Do not store a reference to this element - the dom node can be overwritten by other code. Shorthand of Ext.Element.fly

Use this to make one-time references to DOM elements which are not going to be accessed again either by application code, or by Ext's classes. If accessing an element which will be processed regularly, then Ext.get will be more appropriate to take advantage of the caching provided by the Ext.Element class.

参数:
  • el : String/HTMLElement
    The dom node or id
  • named : String
    可选 Allows for creation of named reusable flyweights to prevent conflicts (e.g. internally Ext uses "_global")
返回值:
  • Element
    The shared Element object (or null if no matching element was found)
Element
focus ( [ Number defer ] ) : Ext.Element
尝试聚焦到元素。捕捉并忽略所有异常。
尝试聚焦到元素。捕捉并忽略所有异常。
参数:
  • defer : Number
    (可选)聚焦延迟的毫秒数
返回值:
  • Ext.Element
    this
Element
getAlignToXY ( Mixed element , String position , [ Array offsets ] ) : Array
获取当前元素与其它元素对齐的x,y坐标。 对于支持位置值的更多信息，参见...
获取当前元素与其它元素对齐的x,y坐标。 对于支持位置值的更多信息，参见 alignTo。
参数:
  • element : Mixed
    需要对齐到的元素。
  • position : String
    (可选，默认为"tl-bl?")需要对齐到的位置。
  • offsets : Array
    (可选)通过[x,y]偏移位置
返回值:
  • Array
    [x, y]
Element
getAnchorXY ( [ String anchor ], [ Boolean local ], [ Object size ] ) : Array
获取x,y坐标，根据元素上的锚定位置指定。
获取x,y坐标，根据元素上的锚定位置指定。
参数:
  • anchor : String
    (可选)指定的锚定位置(默认为"c")。 支持锚定位置的更多细节，参见 alignTo。
  • local : Boolean
    (可选)True将会获取本地锚定位置(element top/left-relative)而不是页面坐标
  • size : Object
    (可选)一个包含用来计算锚定位置的尺寸的对象 {width: (target width), height: (target height)} (默认为元素的当前尺寸)
返回值:
  • Array
    [x, y]一个包含了元素x和y坐标的数组
Element
getAttribute ( String name , [ String namespace ] ) : String
返回元素底层DOM节点的一个属性值。
返回元素底层DOM节点的一个属性值。
参数:
  • name : String
    属性名
  • namespace : String
    (可选)查找属性的命名空间
返回值:
  • String
    属性值
Element
getAttributeNS ( String namespace , String name ) : String
从元素底层的DOM节点上返回一个特定命名空间中的属性值。
从元素底层的DOM节点上返回一个特定命名空间中的属性值。
参数:
  • namespace : String
    查找属性的命名空间
  • name : String
    属性名
返回值:
  • String
    属性值
Element
getBorderWidth ( String side ) : Number
获取指定侧边的border(s)宽度
获取指定侧边的border(s)宽度
参数:
  • side : String
    可以是t, l, r, b或者这些参数的任意组合，多个参数将返回结果之和。 例如，传递'lr'将会获取 left边框宽度 +right 边框宽度。
返回值:
  • Number
    所传递的侧边的宽度之和
Element
getBottom ( Boolean local ) : Number
获取元素底部的Y坐标(元素的Y位置+元素高度)
获取元素底部的Y坐标(元素的Y位置+元素高度)
参数:
  • local : Boolean
    True将会获取本地的CSS位置而不是页面坐标
返回值:
  • Number
Element
getBox ( [ Boolean contentBox ], [ Boolean local ] ) : Object
返回一个描述当前元素区域的对象，可以传递给setBox 方法用来设置另外一个...
返回一个描述当前元素区域的对象，可以传递给setBox 方法用来设置另外一个Element的size/location，以便与当前元素相匹配。
参数:
  • contentBox : Boolean
    (可选)如果为true，描述元素内容的盒子将会被返回。
  • local : Boolean
    (可选)如果为true，将会返回元素的left和top而不是页面x/y
返回值:
  • Object
    box 一个格式如下的对象 <pre><code> { x: &lt;Element's X position>, y: &lt;Element's Y position>, width: &lt;Element's width>, height: &lt;Element's height>, bottom: &lt;Element's lower bound>, right: &lt;Element's rightmost bound> } </code></pre> 返回的对象也可以放到一个数组中，索引0包含X位置，索引1包含Y位置。 所以结果也可以被{@link #setXY}使用。
Element
getCenterXY () : Array
计算x,y值，把当前元素放置到屏幕正中
计算x,y值，把当前元素放置到屏幕正中
参数:
  • 无。
返回值:
  • Array
    x, y值[x, y]
Element
getColor ( String attr , String defaultValue , [ String prefix ] ) : void
返回指定的CSS属性的颜色值。 rgb，3位（例如#fff）， 合法的值将会被转换成一个标准的 6位十六进制颜色值。
返回指定的CSS属性的颜色值。 rgb，3位（例如#fff）， 合法的值将会被转换成一个标准的 6位十六进制颜色值。
参数:
  • attr : String
    css属性
  • defaultValue : String
    当找不到合法的颜色时使用的默认值
  • prefix : String
    (可选)默认为#。当使用颜色值时使用一个空字符串。
返回值:
  • void
Element
getComputedHeight () : Number
当偏移量无效，必要时根据CSS高度通过padding或者borders， 要么返回当前元素的offsetHeight...
当偏移量无效，必要时根据CSS高度通过padding或者borders， 要么返回当前元素的offsetHeight，要么返回元素的height. 对于display:none的元素，如果没有使用CSS设置高度，此机制可能无效。
参数:
  • 无。
返回值:
  • Number
Element
getComputedWidth () : Number
返回当前元素的offsetWidth或者宽度，根据校准后的CSS宽度， 当偏移量不可用需要模拟offsetWidth时...
返回当前元素的offsetWidth或者宽度，根据校准后的CSS宽度， 当偏移量不可用需要模拟offsetWidth时，通过padding或者border校准。 如果没有通过CSS设置一个宽度值，对于一个display:none的元素此方法可能没有作用。
参数:
  • 无。
返回值:
  • Number
Element
getFrameWidth ( String sides ) : Number
返回所传递“侧边”("sides")的padding和border宽度之和。...
返回所传递“侧边”("sides")的padding和border宽度之和。 关于侧边的更多信息参见getBorderWidth()方法。
参数:
  • sides : String
返回值:
  • Number
Element
getHeight ( [ Boolean contentHeight ] ) : Number
返回元素的高度偏移量
返回元素的高度偏移量
参数:
  • contentHeight : Boolean
    (可选)true将会获得减去边框和填充之后的高度
返回值:
  • Number
    元素的高度
Element
getLeft ( Boolean local ) : Number
获取左侧X坐标
获取左侧X坐标
参数:
  • local : Boolean
    True将会获取本地CSS位置而不是页面坐标
返回值:
  • Number
Element
getMargins ( [ String sides ] ) : Object/Number
如果不传递特定一边， 将获取一个对象，包含top, left, right 和 bottom参数， 表示当前元素的页边空白...
如果不传递特定一边， 将获取一个对象，包含top, left, right 和 bottom参数， 表示当前元素的页边空白， 然后返回所有边加在一起的宽度值(参见 getPadding)
参数:
  • sides : String
    (可选) l, r, t, b 的结合物，用来获取这些边距的和
返回值:
  • Object/Number
Element
getOffsetsTo ( Mixed element ) : Array
返回当前元素与所传递元素之间的位置偏移量。 两个函数都必须是DOM树的一部分并且没有display:none属性...
返回当前元素与所传递元素之间的位置偏移量。 两个函数都必须是DOM树的一部分并且没有display:none属性，以便拥有页面坐标。
参数:
  • element : Mixed
    获取偏移量的起始元素。
返回值:
  • Array
    XY页面偏移量(例如[100, -200])
Element
getPadding ( String side ) : Number
获得指定一边的填充宽度
获得指定一边的填充宽度
参数:
  • side : String
    可以是t, l, r, b或者这些值的任意组合，用来添加多个值。 例如，传递 'lr'将会获得 l eft侧的填充 + r ight侧的填充
返回值:
  • Number
    侧边填充加在一起的值
Element
getPositioning () : Object
返回一个对象，拥有所有CSS位置属性。 与setPostioning配合使用...
返回一个对象，拥有所有CSS位置属性。 与setPostioning配合使用，在执行更新然后重置元素位置之前，用来获得一份位置快照。
参数:
  • 无。
返回值:
  • Object
Element
getRegion () : Region
返回所给元素的区域。元素必须是DOM树的一部分，拥有一个区域参数...
返回所给元素的区域。元素必须是DOM树的一部分，拥有一个区域参数 (display:none 或者没有添加的元素将会返回false)。
参数:
  • 无。
返回值:
  • Region
    一个Ext.lib.Region，包含"top, left, bottom, right"成员值。
Element
getRight ( Boolean local ) : Number
获取元素右侧的X坐标(元素的X位置 +元素宽度)
获取元素右侧的X坐标(元素的X位置 +元素宽度)
参数:
  • local : Boolean
    True将会获取本地CSS位置而不是页面坐标
返回值:
  • Number
Element
getScroll () : Object
返回元素当前的滚动位置。
返回元素当前的滚动位置。
参数:
  • 无。
返回值:
  • Object
    一个包含滚动位置的对象，格式为{left: (scrollLeft), top: (scrollTop)}
Element
getSize ( [ Boolean contentSize ] ) : Object
返回元素的尺寸。
返回元素的尺寸。
参数:
  • contentSize : Boolean
    (可选)treu将会获取减去边框和填充后的width/size
返回值:
  • Object
    一个包含元素尺寸的对象{width: (element width), height: (element height)}
Element
getStyle ( String property ) : String
规格化currentStyle 和 computedStyle。
规格化currentStyle 和 computedStyle。
参数:
  • property : String
    样式属性，它的值将会被返回。
返回值:
  • String
    当前元素上style属性的当前值。
Element
getStyleSize () : void
返回元素可用的尺寸以便对内部的内容进行布局...

返回元素可用的尺寸以便对内部的内容进行布局。

如果存在，getStyleSize优先使用样式尺寸，否则 它选择offsetHeight/clientHeight和offsetWidth/clientWidth 中比较大的值。 如需获得去掉滚动条后的尺寸，使用getViewSize。 document body的尺寸在适配器层被处理，它为IE以及严格模式等情况做处理。

参数:
  • 无。
返回值:
  • void
Element
getStyles ( String style1 , String style2 , String etc. ) : Object
返回一个对象，包含了匹配的所需样式属性。例如，el.getStyles('color', 'font-size', 'width')可能返回...
返回一个对象，包含了匹配的所需样式属性。例如，el.getStyles('color', 'font-size', 'width')可能返回 {'color': '#FFFFFF', 'font-size': '13px', 'width': '100px'}。
参数:
  • style1 : String
    样式名称
  • style2 : String
    样式名称
  • 等等 : String
返回值:
  • Object
    样式对象
Element
getTextWidth ( String text , [ Number min ], [ Number max ] ) : Number
返回所传递文本的宽度像素值，或者返回当前元素中的文本宽度。
返回所传递文本的宽度像素值，或者返回当前元素中的文本宽度。
参数:
  • text : String
    需要测量的文本。 默认为元素中的innerHTML
  • min : Number
    (可选) 返回的最小值。
  • max : Number
    (可选) 返回的最大值。
返回值:
  • Number
    文本宽度像素值。
Element
getTop ( Boolean local ) : Number
获得顶部Y坐标
获得顶部Y坐标
参数:
  • local : Boolean
    True将会获得本地CSS位置而不是页面坐标
返回值:
  • Number
Element
getUpdater () : Ext.Updater
获取当前元素的 Updater
获取当前元素的 Updater
参数:
  • 无。
返回值:
  • Ext.Updater
    Updater
Element
getValue ( Boolean asNumber ) : String/Number
返回"value"参数的值
返回"value"参数的值
参数:
  • asNumber : Boolean
    true将会把值解析为一个数字
返回值:
  • String/Number
Element
getViewSize () : void
返回可用元素的尺寸以便进行内部布局。如果元素(或者任何祖先元素)有CSS样式...

返回可用元素的尺寸以便进行内部布局。

如果元素(或者任何祖先元素)有CSS样式 display : none ，尺寸将会为0

例如:
var vpSize = Ext.getBody().getViewSize();
        // all Windows created afterwards will have a default value of 90% height and 95% width
        Ext.Window.override({
            width: vpSize.width * 0.9,
            height: vpSize.height * 0.95
        });
        // To handle window resizing you would have to hook onto onWindowResize.
getViewSize使用clientHeight/clientWidth，它们去除了滚动条的尺寸。 如需获得包含滚动条的尺寸，使用getStyleSize。document body的尺寸在 适配器层被处理，它为IE和严格模式(strict mode)等情况做了处理。
参数:
  • 无。
返回值:
  • void
Element
getWidth ( [ Boolean contentWidth ] ) : Number
Returns the offset width of the element
Returns the offset width of the element
参数:
  • contentWidth : Boolean
    可选 true to get the width minus borders and padding
返回值:
  • Number
    The element's width
Element
getX () : Number
获取元素当前的X位置值，基于页面坐标。 元素必须是DOM树的一部分， 拥有页面坐标...
获取元素当前的X位置值，基于页面坐标。 元素必须是DOM树的一部分， 拥有页面坐标 (display:none 或者未被添加的元素将返回false)。
参数:
  • 无。
返回值:
  • Number
    元素的X位置
Element
getXY () : Array
获取元素的当前位置，基于页面坐标。 Element必须是DOM树的一部分，有页面坐标...
获取元素的当前位置，基于页面坐标。 Element必须是DOM树的一部分，有页面坐标 (display:none或者没有被添加的元素将会返回false)。
参数:
  • 无。
返回值:
  • Array
    元素的XY位置
Element
getY () : Number
获取元素当前的Y位置值，基于页面坐标。 元素必须是DOM树的一部分，拥有页面坐标...
获取元素当前的Y位置值，基于页面坐标。 元素必须是DOM树的一部分，拥有页面坐标 (display:none 或者未被添加的元素将返回false)。
参数:
  • 无。
返回值:
  • Number
    元素的Y位置
Element
hasClass ( String className ) : Boolean
检查指定的CSS类在当前元素的DOM节点上是否存在。
检查指定的CSS类在当前元素的DOM节点上是否存在。
参数:
  • className : String
    需要测试的CSS类
返回值:
  • Boolean
    如果(CSS)类存在为true，其它false
Element
hide ( [ Boolean/Object animate ] ) : Ext.Element
Hide this element - Uses display mode to determine whether to use "display" or "visibility". See setVisible.
Hide this element - Uses display mode to determine whether to use "display" or "visibility". See setVisible.
参数:
  • animate : Boolean/Object
    (可选)true将会使用默认动画效果，或者是一个标准的元素动画配置对象。
返回值:
  • Ext.Element
    this
Element
hover ( Function overFn , Function outFn , [ Object scope ], [ Object options ] ) : Ext.Element
设置事件监听器，当鼠标移入和移出Element时调用传递的函数。
设置事件监听器，当鼠标移入和移出Element时调用传递的函数。
参数:
  • overFn : Function
    当鼠标进入Element时需要调用的函数。
  • outFn : Function
    当鼠标离开Element时需要调用的函数。
  • scope : Object
    (可选)作用域( this 引用)，函数将在其中被执行。默认为Element的DOM元素。
  • options : Object
    (可选)监听器选项。参见 options参数。
返回值:
  • Ext.Element
    this
Element
initDD ( String group , Object config , Object overrides ) : Ext.dd.DD
为当前元素初始化一个Ext.dd.DD 拖拽对象。
为当前元素初始化一个Ext.dd.DD 拖拽对象。
参数:
  • group : String
    DD对象所属的组
  • config : Object
    DD配置对象
  • overrides : Object
    一个对象，包含需要在DD上覆盖/实现的方法
返回值:
  • Ext.dd.DD
    DD对象
Element
initDDProxy ( String group , Object config , Object overrides ) : Ext.dd.DDProxy
Initializes a Ext.dd.DDProxy object for this element.
Initializes a Ext.dd.DDProxy object for this element.
参数:
  • group : String
    The group the DDProxy object is member of
  • config : Object
    The DDProxy config object
  • overrides : Object
    An object containing methods to override/implement on the DDProxy object
返回值:
  • Ext.dd.DDProxy
    The DDProxy object
Element
initDDTarget ( String group , Object config , Object overrides ) : Ext.dd.DDTarget
为当前元素初始化一个 Ext.dd.DDTarget 对象。
为当前元素初始化一个 Ext.dd.DDTarget 对象。
参数:
  • group : String
    DDTarget对象所属的组
  • config : Object
    DDTarget配置对象
  • overrides : Object
    一个包含了用来在DDTarget对象上覆盖/继承方法的对象
返回值:
  • Ext.dd.DDTarget
    DDTarget对象
Element
insertAfter ( Mixed el ) : Ext.Element
Inserts this element after the passed element in the DOM
Inserts this element after the passed element in the DOM
参数:
  • el : Mixed
    The element to insert after
返回值:
  • Ext.Element
    this
Element
insertBefore ( Mixed el ) : Ext.Element
在DOM中把当前元素插入到所传递的元素之前
在DOM中把当前元素插入到所传递的元素之前
参数:
  • el : Mixed
    一个元素，当前元素将插入到其前面
返回值:
  • Ext.Element
    this
Element
insertFirst ( Mixed/Object el ) : Ext.Element
插入（或创建）一个元素（或者一个DomHelper配置），作为当前元素的第一个子节点
插入（或创建）一个元素（或者一个DomHelper配置），作为当前元素的第一个子节点
参数:
  • el : Mixed/Object
    需要插入的元素或者一个元素的id，或者是一个需要创建并插入的DomHelper配置
返回值:
  • Ext.Element
    新的孩子
Element
insertHtml ( String where , String html , [ Boolean returnEl ] ) : HTMLElement/Ext.Element
向当前元素中插入一个html标签
向当前元素中插入一个html标签
参数:
  • where : String
    插入的html与当前元素的位置关系---beforeBegin, afterBegin, beforeEnd, afterEnd
  • html : String
    HTML标签
  • returnEl : Boolean
    (可选)True将会返回一个Ext.Element(默认为false)
返回值:
  • HTMLElement/Ext.Element
    插入的节点(或者是位置最近的，如果插入了多于1个标签)
Element
insertSibling ( Mixed/Object/Array el , [ String where ], [ Boolean returnDom ] ) : Ext.Element
将传递的元素(或者DomHelper配置)插入(或者创建)为当前元素的兄弟节点
将传递的元素(或者DomHelper配置)插入(或者创建)为当前元素的兄弟节点
参数:
  • el : Mixed/Object/Array
    需要插入的id、元素，或者一个需要创建和插入的DomHelper配置，*或者*是这些对象的一个数组。
  • where : String
    (可选) 'before' 或者 'after'，默认为before
  • returnDom : Boolean
    (可选)True将会返回原始的DOM元素而不是Ext.Element
返回值:
  • Ext.Element
    插入的Element。如果传递了一个数组，最后一个插入的元素将会被返回。
Element
is ( String selector ) : Boolean
如果当前元素与所传递的简单选择子相匹配，返回true (例如div.some-class或者span:first-child)
如果当前元素与所传递的简单选择子相匹配，返回true (例如div.some-class或者span:first-child)
参数:
  • selector : String
    需要测试的简单选择子
返回值:
  • Boolean
    如果当前元素与所传递的简单选择子相匹配，返回true，其它为false
Element
isBorderBox () : Boolean
测试各种CSS rules/browsers 以检测当前元素是否使用了一个边框box
测试各种CSS rules/browsers 以检测当前元素是否使用了一个边框box
参数:
  • 无。
返回值:
  • Boolean
Element
isDisplayed () : Boolean
如果display不是"none"返回true
如果display不是"none"返回true
参数:
  • 无。
返回值:
  • Boolean
Element
isMasked () : Boolean
如果当前元素被遮罩，返回true
如果当前元素被遮罩，返回true
参数:
  • 无。
返回值:
  • Boolean
Element
isScrollable () : Boolean
如果当前元素可以滚动返回true
如果当前元素可以滚动返回true
参数:
  • 无。
返回值:
  • Boolean
Element
isVisible ( [ Boolean deep ] ) : Boolean
同时使用visibility和display属性检测元素当前是否可见。
同时使用visibility和display属性检测元素当前是否可见。
参数:
  • deep : Boolean
    (可选)True将会遍历dom查看父元素是否是隐藏的(默认为false)
返回值:
  • Boolean
    如果元素当前可见为true，其它为false
Element
last ( [ String selector ], [ Boolean returnDom ] ) : Ext.Element/HTMLElement
获取最后一个孩子，跳过文本节点
获取最后一个孩子，跳过文本节点
参数:
  • selector : String
    (可选)查找与所传递的简单选择子相匹配的上一个兄弟
  • returnDom : Boolean
    (可选)True将会返回一个原始的dom节点而不是 Ext.Element
返回值:
  • Ext.Element/HTMLElement
    最后一个孩子或者null
Element
load () : Ext.Element
直接访问Updater的 Ext.Updater.update 方法...
直接访问Updater的 Ext.Updater.update 方法。方法接收的参数与 Ext.Updater.update 相同。
参数:
  • 无。
返回值:
  • Ext.Element
    this
Element
mask ( [ String msg ], [ String msgCls ] ) : Element
在当前元素之上覆盖遮罩以禁用用户交互。 必须core.css。此方法只能在可以接受子节点...
在当前元素之上覆盖遮罩以禁用用户交互。 必须core.css。此方法只能在可以接受子节点的元素上使用。
参数:
  • msg : String
    (可选)需要在遮罩中显示的消息
  • msgCls : String
    (可选)需要应用到msg元素上的css类
返回值:
  • Element
    遮罩元素
Element
move ( String direction , Number distance , [ Boolean/Object animate ] ) : Ext.Element
根据当前位置移动当前元素。
根据当前位置移动当前元素。
参数:
  • direction : String
    可能的值是: "l" (或者"left"), "r" (或者"right"), "t" (或者"top", 或者"up"), "b" (或者"bottom", 或者"down")。
  • distance : Number
    将元素移动多远，像素值
  • animate : Boolean/Object
    (可选)True将会使用默认动画效果，或者使用一个标准的Element动画配置对象
返回值:
  • Ext.Element
    this
Element
moveTo ( Number x , Number y , [ Boolean/Object animate ] ) : Ext.Element
使用页面坐标设置元素的位置，忽略元素是如何定位的。 元素必须是DOM树的一部分，拥有页面坐标(display:none或者没有添加...
使用页面坐标设置元素的位置，忽略元素是如何定位的。 元素必须是DOM树的一部分，拥有页面坐标(display:none或者没有添加 的元素将会返回false)。
参数:
  • x : Number
    新位置的X值(坐标是基于页面的)
  • y : Number
    新位置的Y值(坐标是基于页面的)
  • animate : Boolean/Object
    (可选)True将会使用默认动画效果，或者使用一个标准的Element动画配置对象
返回值:
  • Ext.Element
    this
Element
next ( [ String selector ], [ Boolean returnDom ] ) : Ext.Element/HTMLElement
获取下一个兄弟节点，跳过文本节点
获取下一个兄弟节点，跳过文本节点
参数:
  • selector : String
    (可选)查找下一个与所传递的简单选择子相匹配的兄弟节点
  • returnDom : Boolean
    (可选)True将会返回一个原始的dom节点而不是一个Ext.Element
返回值:
  • Ext.Element/HTMLElement
    下一个兄弟节点或者null
Element
on ( String eventName , Function fn , [ Object scope ], [ Object options ] ) : void
添加一个事件处理函数( addListener 方法的快捷方式)。
添加一个事件处理函数( addListener 方法的快捷方式)。
参数:
  • eventName : String
    需要处理的事件名称。
  • fn : Function
    事件调用的处理函数
  • scope : Object
    (可选)作用域( this 引用)处理函数将会在其中被执行。
  • options : Object
    (可选)一个包含标准addListener 选项的对象
返回值:
  • void
Element
parent ( [ String selector ], [ Boolean returnDom ] ) : Ext.Element/HTMLElement
获取当前元素的父节点，可以选择沿着层次链向上查找，以便匹配一个选择器
获取当前元素的父节点，可以选择沿着层次链向上查找，以便匹配一个选择器
参数:
  • selector : String
    (可选) 获取一个与传递进来的选择器相匹配的父节点
  • returnDom : Boolean
    (可选) 设置为true将返回一个原始的dom节点，而不是一个Ext.Element
返回值:
  • Ext.Element/HTMLElement
    父节点，或者null
Element
position ( [ String pos ], [ Number zIndex ], [ Number x ], [ Number y ] ) : void
初始化当前元素的位置。 如果没有传递必须的位置并且它没有没有被定位...
初始化当前元素的位置。 如果没有传递必须的位置并且它没有没有被定位，将会使得元素按照相对位置被放置。
参数:
  • pos : String
    (可选)需要使用的定位方式"relative", "absolute"或者"fixed"
  • zIndex : Number
    (可选)需要应用的zIndex
  • x : Number
    (可选)设置在页面中的X位置
  • y : Number
    (可选)设置在页面中的Y位置
返回值:
  • void
Element
prev ( [ String selector ], [ Boolean returnDom ] ) : Ext.Element/HTMLElement
获取前一个兄弟节点，跳过文本节点
获取前一个兄弟节点，跳过文本节点
参数:
  • selector : String
    (可选)返回与所传递的简单选择子相匹配的上一个兄弟节点
  • returnDom : Boolean
    (可选)True将会返回一个原始DOM节点而不是Ext.Element
返回值:
  • Ext.Element/HTMLElement
    上一个兄弟节点，或者null
Element
purgeAllListeners () : Ext.Element
从当前元素及其孩子递归地移除之前添加的所有监听器
从当前元素及其孩子递归地移除之前添加的所有监听器
参数:
  • 无。
返回值:
  • Ext.Element
    this
Element
query ( String selector ) : Array
根据传递的CSS选择子选择子节点(选择子不能含有id)。
根据传递的CSS选择子选择子节点(选择子不能含有id)。
参数:
  • selector : String
    CSS选择子
返回值:
  • Array
    符合条件的节点数组
Element
radioClass ( String/Array className ) : Ext.Element
向当前元素添加一个或多个CSS类，并且从所有兄弟节点删除相同的CSS类。
向当前元素添加一个或多个CSS类，并且从所有兄弟节点删除相同的CSS类。
参数:
  • className : String/Array
    需要添加的CSS类，或者一个CSS类数组
返回值:
  • Ext.Element
    this
Element
relayEvent ( String eventName , Object object ) : void
在当前元素上创建一个事件处理函数，这样当前元素触发和处理事件时，它可以被 转发给其它对象...
在当前元素上创建一个事件处理函数，这样当前元素触发和处理事件时，它可以被 转发给其它对象(例如再次触发事件，就像从之前的对象触发一样)。
参数:
  • eventName : String
    需要转发的事件类型
  • object : Object
    任何继承Ext.util.Observable的对象， 提供了再次触发被转发事件的上下文
返回值:
  • void
Element
remove () : void
删除当前元素的dom引用。注意，事件和缓存的删除操作在 Ext.removeNode 中进行处理

删除当前元素的dom引用。注意，事件和缓存的删除操作在 Ext.removeNode 中进行处理

参数:
  • 无。
返回值:
  • void
Element
removeAllListeners () : Ext.Element
从当前元素上删除所有添加的事件监听器
从当前元素上删除所有添加的事件监听器
参数:
  • 无。
返回值:
  • Ext.Element
    this
Element
removeAnchor () : Ext.Element
删除到当前元素的所有锚定。 参见anchorTo。
删除到当前元素的所有锚定。 参见anchorTo。
参数:
  • 无。
返回值:
  • Ext.Element
    this
Element
removeClass ( String/Array className ) : Ext.Element
从元素上删除一个或多个CSS类。
从元素上删除一个或多个CSS类。
参数:
  • className : String/Array
    需要删除的一个CSS类，或者一个CSS数组
返回值:
  • Ext.Element
    this
Element
removeListener ( String eventName , Function fn , Object scope ) : Ext.Element
从当前元素上删除一个事件监听器。 快捷方式un 与此等价。...
从当前元素上删除一个事件监听器。 快捷方式un 与此等价。 注意:当adding监听器时 明确指定了一个scope，在此处必须指定同一个作用域。例如:
el.removeListener('click', this.handlerFn);
// or
el.un('click', this.handlerFn);
参数:
  • eventName : String
    需要从其中删除监听器的事件名。
  • fn : Function
    需要删除的监听函数。 这必须是调用addListener 时所传递的函数引用。
  • scope : Object
    如果在添加监听器时指定了作用域 ( this 引用)，那么此参数必须指向同一个对象。
返回值:
  • Ext.Element
    this
Element
repaint () : Ext.Element
强制浏览器重绘当前元素
强制浏览器重绘当前元素
参数:
  • 无。
返回值:
  • Ext.Element
    this
Element
replace ( Mixed el ) : Ext.Element
使用当前元素替换所传递的元素
使用当前元素替换所传递的元素
参数:
  • el : Mixed
    需要被替换的元素
返回值:
  • Ext.Element
    this
Element
replaceClass ( String oldClassName , String newClassName ) : Ext.Element
是用另一个CSS类替换元素上的当前CSS类。如果不存在相同名称的老CSS类， 将会简单地添加新的CSS类。
是用另一个CSS类替换元素上的当前CSS类。如果不存在相同名称的老CSS类， 将会简单地添加新的CSS类。
参数:
  • oldClassName : String
    需要被替换的CSS类
  • newClassName : String
    用来替换的CSS类
返回值:
  • Ext.Element
    this
Element
replaceWith ( Mixed/Object el ) : Ext.Element
使用传递的元素替换当前元素
使用传递的元素替换当前元素
参数:
  • el : Mixed/Object
    新元素，或者一个需要创建元素的DomHelper配置
返回值:
  • Ext.Element
    this
Element
scroll ( String direction , Number distance , [ Boolean/Object animate ] ) : Boolean
向指定的方向滚动当前元素。 进行边界检测用以确保滚动操作在元素...
向指定的方向滚动当前元素。 进行边界检测用以确保滚动操作在元素可滚动的范围内进行。
参数:
  • direction : String
    可能的值有: "l" (或"left"), "r" (或"right"), "t" (或"top", 或"up"), "b" (或"bottom", 或"down")。
  • distance : Number
    将元素滚动多远，像素值
  • animate : Boolean/Object
    (可选)True将会使用默认动画效果，或者使用一个标准的Element动画配置对象
返回值:
  • Boolean
    如果触发了滚动，返回true，如果元素滚动了它能到达的最远距离，返回false.
Element
scrollIntoView ( [ Mixed container ], [ Boolean hscroll ] ) : Ext.Element
将当前元素滚动到所传递容器的可见区域中。
将当前元素滚动到所传递容器的可见区域中。
参数:
  • container : Mixed
    (可选)需要滚动的容器元素(默认为document.body)。应该是一个string (id), dom node, 或者Ext.Element.
  • hscroll : Boolean
    (可选)False将会禁止水平滚动(默认为true)
返回值:
  • Ext.Element
    this
Element
scrollTo ( String side , Number value , [ Boolean/Object animate ] ) : Element
将当前元素滚动指定的滚动点。 该方法不会进行边界检测，所以...
将当前元素滚动指定的滚动点。 该方法不会进行边界检测，所以，如果你滚动到一个怪异的值，它还是会试图去这么做。 如需自动检测边界，使用scroll()
参数:
  • side : String
    要么是"left"，scrollLeft值； 要么是"top"，scrollTop值。
  • value : Number
    新滚动值
  • animate : Boolean/Object
    (可选)True将会使用默认动画效果，或者是一个标准的Element动画配置对象
返回值:
  • Element
    this
Element
select ( String/Array selector , [ Boolean unique ], [ HTMLElement/String root ] ) : CompositeElementLite/CompositeElement
根据传递的CSS选择子选择元素，以便通过返回的 CompositeElement或 CompositeElementLite 对象...
根据传递的CSS选择子选择元素，以便通过返回的 CompositeElement或 CompositeElementLite 对象，让Element 的方法可以在一次事务中被应用到许多相关的元素。
参数:
  • selector : String/Array
    CSS选择子或者一个元素数组
  • unique : Boolean
    (可选)true将会为每个元素创建一个单独的Ext.Element对象 (默认为一个轻量级对象)(译者注：默认是“享元模式”，不会创建单独的元素)
  • root : HTMLElement/String
    (可选)开始查询的根元素或者是根元素的id
返回值:
  • CompositeElementLite/CompositeElement
Element
set ( Object o , [ Boolean useSet ] ) : Ext.Element
将传递的属性设置为当前元素的属性 (样式属性可以是字符串、对象，或者函数)
将传递的属性设置为当前元素的属性 (样式属性可以是字符串、对象，或者函数)
参数:
  • o : Object
    拥有属性的对象
  • useSet : Boolean
    (可选)false可以覆盖默认的setAttribute，使用扩展的属性。
返回值:
  • Ext.Element
    this
Element
setBottom ( String bottom ) : Ext.Element
设置元素底部的CSS样式。
设置元素底部的CSS样式。
参数:
  • bottom : String
    CSS bottom属性值
返回值:
  • Ext.Element
    this
Element
setBounds ( Number x , Number y , Mixed width , Mixed height , [ Boolean/Object animate ] ) : Ext.Element
在一次调用中设置元素的位置和尺寸。 如果animation为true，width, height, x 和 y将会同步使用动画效果。
在一次调用中设置元素的位置和尺寸。 如果animation为true，width, height, x 和 y将会同步使用动画效果。
参数:
  • x : Number
    新X位置值(坐标是基于页面的)
  • y : Number
    新Y位置值(坐标是基于页面的)
  • width : Mixed
    新宽度，可以是如下之一:
    • A Number specifying the new width in this Element's defaultUnits (by default, pixels)
    • A String used to set the CSS width style. Animation may not be used.
  • height : Mixed
    The new height. This may be one of:
    • A Number specifying the new height in this Element's defaultUnits (by default, pixels)
    • A String used to set the CSS height style. Animation may not be used.
  • animate : Boolean/Object
    (可选)true将会使用默认动画效果，或者是一个标准的元素动画配置对象。
返回值:
  • Ext.Element
    this
Element
setBox ( Object box , [ Boolean adjust ], [ Boolean/Object animate ] ) : Ext.Element
设置元素的盒子。在另一个元素上用getBox()方法获取一个盒子对象。 如果animate为true...
设置元素的盒子。在另一个元素上用getBox()方法获取一个盒子对象。 如果animate为true，那么width,height,x和y都会同步进行动画效果。
参数:
  • box : Object
    需要填充的盒子{x, y, width, height}
  • adjust : Boolean
    (可选)是否为盒子模型问题进行自动调整
  • animate : Boolean/Object
    (可选)True将会使用默认动画效果，或者使用一个标准的Element动画配置对象
返回值:
  • Ext.Element
    this
Element
setDisplayed ( Mixed value ) : Ext.Element
设置CSS的display属性。如果指定的值是一个布尔型的true，请使用 使用originalDisplay。
设置CSS的display属性。如果指定的值是一个布尔型的true，请使用 使用originalDisplay。
参数:
  • value : Mixed
    布尔值将会使用它的默认display显示元素，或者一个直接设置display的字符串。
返回值:
  • Ext.Element
    this
Element
setHeight ( Mixed height , [ Boolean/Object animate ] ) : Ext.Element
设置当前元素的高度...
设置当前元素的高度。
// 将高度变为200px，并使用默认配置进行动画效果
Ext.fly('elementId').setHeight(200, true);
// 将高度变为150px，并使用自定义配置进行动画效果
Ext.fly('elId').setHeight(150, {
    duration : .5, // 动画效果将会持续.5秒
    // 将会被内容变为"finished"
    callback: function(){ this.update("finished"); }
});
参数:
  • height : Mixed
    新的高度。可以是以下之一:
    • 在当前元素的defaultUnits 中指定新高度的一个数字(默认为像素值)。
    • 一个用来设置CSS高度样式的字符串。可以不使用动画效果。
  • animate : Boolean/Object
    (可选)true将会使用默认动画效果或者使用一个标准的元素动画配置对象
返回值:
  • Ext.Element
    this
Element
setLeft ( String left ) : Ext.Element
直接使用CSS样式设置元素左侧的位置 (替代 setX)。
直接使用CSS样式设置元素左侧的位置 (替代 setX)。
参数:
  • left : String
    CSS的left属性值
返回值:
  • Ext.Element
    this
Element
setLeftTop ( String left , String top ) : Ext.Element
快速设置左上角，增加默认单位
快速设置左上角，增加默认单位
参数:
  • left : String
    CSS的left属性值
  • top : String
    CSS的top属性值
返回值:
  • Ext.Element
    this
Element
setLocation ( Number x , Number y , [ Boolean/Object animate ] ) : Ext.Element
使用页面坐标设置元素的位置，忽略元素是如何定位的。 元素必须是DOM树的一部分，拥有页面坐标(display:none或者没有添加...
使用页面坐标设置元素的位置，忽略元素是如何定位的。 元素必须是DOM树的一部分，拥有页面坐标(display:none或者没有添加 的元素将会返回false)。
参数:
  • x : Number
    新的X位置值(坐标是基于页面的)
  • y : Number
    新的Y位置值(坐标是基于页面的)
  • animate : Boolean/Object
    (可选)True将会使用默认动画效果，或者使用一个标准的Element动画配置对象
返回值:
  • Ext.Element
    this
Element
setOpacity ( Float opacity , [ Boolean/Object animate ] ) : Ext.Element
设置元素的不透明度
设置元素的不透明度
参数:
  • opacity : Float
    新的不透明度。0 =全透明,.5 = 50%可见, 1 =完全可见,等等
  • animate : Boolean/Object
    (可选)一个标准的Element动画配置对象，或者 true将会使用默认动画效果({duration: .35, easing: 'easeIn'})
返回值:
  • Ext.Element
    this
Element
setPositioning ( Object posCfg ) : Ext.Element
使用getPositioning()返回的对象设置位置。
使用getPositioning()返回的对象设置位置。
参数:
  • posCfg : Object
返回值:
  • Ext.Element
    this
Element
setRegion ( Ext.lib.Region region , [ Boolean/Object animate ] ) : Ext.Element
设置元素的位置并调整指定区域的尺寸。 如果animation配置项为true，则width,height,x 和y...
设置元素的位置并调整指定区域的尺寸。 如果animation配置项为true，则width,height,x 和y都会同步使用动画效果。
参数:
  • region : Ext.lib.Region
    需要填充的区域
  • animate : Boolean/Object
    (可选)true将会使用默认动画效果，或者是一个标准的元素动画配置对象。
返回值:
  • Ext.Element
    this
Element
setRight ( String right ) : Ext.Element
设置元素CSS的right样式。
设置元素CSS的right样式。
参数:
  • right : String
    CSS的right参数值
返回值:
  • Ext.Element
    this
Element
setSize ( Mixed width , Mixed height , [ Boolean/Object animate ] ) : Ext.Element
设置当前元素的尺寸。如果动画效果为true，宽度和高度都会同时进行动画效果。
设置当前元素的尺寸。如果动画效果为true，宽度和高度都会同时进行动画效果。
参数:
  • width : Mixed
    新宽度。可以是以下之一:
    • 在元素的 defaultUnits 中指定新宽度的数字(默认为像素值)。
    • 一个用来设置CSS宽度样式的字符串。动画效果可能不会被使用。
    • 一个尺寸对象，格式为 {width: widthValue, height: heightValue} 。
  • height : Mixed
    新高度。可以是如下之一:
    • 在元素的 defaultUnits 中指定新高度的数字(默认为像素值)。
    • 一个用来设置CSS高度样式的字符串。动画效果可能不会被使用。
  • animate : Boolean/Object
    (可选)True将进行默认的动画效果，或者是一个标准的Element 动画配置对象
返回值:
  • Ext.Element
    this
Element
setStyle ( String/Object property , [ String value ] ) : Ext.Element
用来设置style属性的包装器，也可以使用包含多个样式的单个object参数。
用来设置style属性的包装器，也可以使用包含多个样式的单个object参数。
参数:
  • property : String/Object
    需要设置的样式属性，或者一个包含多个样式的对象。
  • value : String
    (可选)需要应用到给定属性的值，如果传递的是一个object，此值为null.
返回值:
  • Ext.Element
    this
Element
setTop ( String top ) : Ext.Element
使用CSS样式直接设置元素的顶部位置(替代 setY)。
使用CSS样式直接设置元素的顶部位置(替代 setY)。
参数:
  • top : String
    CSS top属性值
返回值:
  • Ext.Element
    this
Element
setVisibilityMode ( Number visMode ) : Ext.Element
Sets the element's visibility mode. When setVisible() is called it will use this to determine whether to set the visi...
Sets the element's visibility mode. When setVisible() is called it will use this to determine whether to set the visibility or the display property.
参数:
  • visMode : Number
    Ext.Element.VISIBILITY or Ext.Element.DISPLAY
返回值:
  • Ext.Element
    this
Element
setVisible ( Boolean visible , [ Boolean/Object animate ] ) : Ext.Element
设置元素的可见性(参见细节)。 如果visibilityMode被设置为Element.DISPLAY， 将会使用display属性隐藏元素...
设置元素的可见性(参见细节)。 如果visibilityMode被设置为Element.DISPLAY， 将会使用display属性隐藏元素，否则使用visibility属性。 默认使用visibility属性隐藏和显示。
参数:
  • visible : Boolean
    元素是否可见
  • animate : Boolean/Object
    (可选)True将会使用默认动画效果，或者使用一个标准的Element动画配置对象
返回值:
  • Ext.Element
    this
Element
setWidth ( Mixed width , [ Boolean/Object animate ] ) : Ext.Element
设置当前元素的宽度。
设置当前元素的宽度。
参数:
  • width : Mixed
    新宽度。此参数可以是如下之一：
    • 在当前元素的defaultUnits属性 指定新宽度值(默认使用此方式，单位为像素)。
    • 一个用来设置CSS宽度样式的字符串。不能使用动画效果。
  • animate : Boolean/Object
    (可选)true将会使用默认动画效果，或者是一个标准的元素动画配置对象。
返回值:
  • Ext.Element
    this
Element
setX ( Number The , [ Boolean/Object animate ] ) : Ext.Element
使用页面坐标设置元素的X位置。 元素必须是DOM树的一部分，拥有页面坐标(display:none或者没有添加...
使用页面坐标设置元素的X位置。 元素必须是DOM树的一部分，拥有页面坐标(display:none或者没有添加 的元素将会返回false)。
参数:
  • The : Number
    元素的X位置
  • animate : Boolean/Object
    (可选)True将会使用默认动画效果，或者使用一个标准的Element动画配置对象
返回值:
  • Ext.Element
    this
Element
setXY ( Array pos , [ Boolean/Object animate ] ) : Ext.Element
使用页面坐标设置元素的位置，忽略元素是如何定位的。 元素必须是DOM树的一部分，拥有页面坐标(display:none或者没有添加...
使用页面坐标设置元素的位置，忽略元素是如何定位的。 元素必须是DOM树的一部分，拥有页面坐标(display:none或者没有添加 的元素将会返回false)。
参数:
  • pos : Array
    新位置，包含X & Y [x, y]值(坐标以页面为依据)
  • animate : Boolean/Object
    (可选)True将会使用默认动画效果，或者使用一个标准的Element动画配置对象
返回值:
  • Ext.Element
    this
Element
setY ( Number The , [ Boolean/Object animate ] ) : Ext.Element
根据页面坐标设置元素的Y位置。 元素必须是DOM树的一部分，并且有页面坐标...
根据页面坐标设置元素的Y位置。 元素必须是DOM树的一部分，并且有页面坐标 (display:none或者没有被添加的元素将会返回false)。
参数:
  • The : Number
    元素的Y位置
  • animate : Boolean/Object
    (可选)True将会使用默认动画效果，或者使用一个标准的Element动画配置对象
返回值:
  • Ext.Element
    this
Element
setZIndex ( Number zindex ) : this
设置layer的z-index并调整所有阴影和衬垫的z-index。 layer的z-index被自动加2，这样它就会总是显示在所有阴影和...
设置layer的z-index并调整所有阴影和衬垫的z-index。 layer的z-index被自动加2，这样它就会总是显示在所有阴影和 衬垫之上(如果存在任何阴影元素，将会被指定为z-index + 1， 如果存在衬垫元素，将会被指定为未修改的z-index)。
参数:
  • zindex : Number
    需要设置的新z-index
返回值:
  • this
    Layer
Layer
show ( [ Boolean/Object animate ] ) : Ext.Element
显示当前元素---使用显示模式以决定是使用"display"还是"visibility"。 参见setVisible。
显示当前元素---使用显示模式以决定是使用"display"还是"visibility"。 参见setVisible。
参数:
  • animate : Boolean/Object
    (可选)True将会使用默认动画效果，或者使用一个标准的Element动画配置对象
返回值:
  • Ext.Element
    this
Element
swallowEvent ( String/Array eventName , [ Boolean preventDefault ] ) : Ext.Element
停止指定事件的冒泡并可以选择阻止默认操作。
停止指定事件的冒泡并可以选择阻止默认操作。
参数:
  • eventName : String/Array
    需要停止冒泡的一个事件/事件数组
  • preventDefault : Boolean
    (可选)true将会同时阻止默认操作
返回值:
  • Ext.Element
    this
Element
toggle ( [ Boolean/Object animate ] ) : Ext.Element
轮换元素的visibility或者display，根据可视模式。
轮换元素的visibility或者display，根据可视模式。
参数:
  • animate : Boolean/Object
    (可选)True将会使用默认动画效果，或者使用一个标准的Element动画配置对象
返回值:
  • Ext.Element
    this
Element
toggleClass ( String className ) : Ext.Element
在当前元素上轮换指定的CSS类(如果已经存在删除它，否则添加它)。
在当前元素上轮换指定的CSS类(如果已经存在删除它，否则添加它)。
参数:
  • className : String
    需要轮换的CSS类
返回值:
  • Ext.Element
    this
Element
translatePoints ( Number/Array x , [ Number y ] ) : Object
将传递的页面坐标翻译成当前元素的left/top CSS值
将传递的页面坐标翻译成当前元素的left/top CSS值
参数:
  • x : Number/Array
    页面x或者一个包含[x, y]的数组
  • y : Number
    (可选)页面y值，如果x不是数组，此项为必须
返回值:
  • Object
    一个包含left和top属性的对象。例如{left: (value), top: (value)}
Element
un ( String eventName , Function fn , Object scope ) : Ext.Element
从当前元素上删除一个事件监听器( 附加注释参见 removeListener )。
从当前元素上删除一个事件监听器( 附加注释参见 removeListener )。
参数:
  • eventName : String
    事件名，将从其上删除监听器。
  • fn : Function
    需要删除的处理函数。 这必须是调用addListener 时传递的函数引用。
  • scope : Object
    如果在添加监听器时指定了作用域 ( this 引用)，那么此参数必须指向同一个对象。
返回值:
  • Ext.Element
    this
Element
unclip () : Ext.Element
将剪裁（溢出）返回到调用clip 之前的状态
将剪裁（溢出）返回到调用clip 之前的状态
参数:
  • 无。
返回值:
  • Ext.Element
    this
Element
unmask () : void
删除之前应用的一个遮罩。
删除之前应用的一个遮罩。
参数:
  • 无。
返回值:
  • void
Element
unselectable () : Ext.Element
禁止选中当前元素中的文本(为跨浏览器做了规格化处理)
禁止选中当前元素中的文本(为跨浏览器做了规格化处理)
参数:
  • 无。
返回值:
  • Ext.Element
    this
Element
up ( String selector , [ Number/Mixed maxDepth ] ) : Ext.Element
沿着dom向上回溯，查找与传递进来的简单选择器相匹配的父节点 (例如div.some-class或者span:first-child)...
沿着dom向上回溯，查找与传递进来的简单选择器相匹配的父节点 (例如div.some-class或者span:first-child)。 这是findParentNode()方法的快捷方式， 此方法总是返回一个Ext.Element。
参数:
  • selector : String
    需要进行测试的简单选择子
  • maxDepth : Number/Mixed
    (可选)搜索的最大深度，可以是一个数字或者元素 (默认为10||document.body)
返回值:
  • Ext.Element
    匹配的DOM节点(如果没有找到匹配的项目为null)
Element
update ( String html , [ Boolean loadScripts ], [ Function callback ] ) : Ext.Element
刷新当前元素的innerHTML，可选择搜索并处理脚本
刷新当前元素的innerHTML，可选择搜索并处理脚本
参数:
  • html : String
    新的HTML
  • loadScripts : Boolean
    (可选)True将会查找并处理脚本(默认为false)
  • callback : Function
    (可选)对于异步加载脚本，将会在update操作完成时通知你
返回值:
  • Ext.Element
    this
Element
wrap ( [ Object config ], [ Boolean returnDom ] ) : HTMLElement/Element
使用另一个元素创建并包装当前元素
使用另一个元素创建并包装当前元素
参数:
  • config : Object
    (可选)为包装器元素提供的DomHelper元素配置对象，或者对于一个空div来说为null
  • returnDom : Boolean
    (可选)True将会返回原始的DOM元素而不是Ext.Element
返回值:
  • HTMLElement/Element
    The newly created wrapper element
Element

公共事件

Event Defined By
DOMActivate : ( Ext.EventObject e , HtmlElement t , Object o )
在支持的地方。当一个元素被激活时触发，对于实例，通过鼠标点击或者按键(激活)。
在支持的地方。当一个元素被激活时触发，对于实例，通过鼠标点击或者按键(激活)。
监听器将会以如下参数格式被调用:
  • e : Ext.EventObject
    包装DOM事件的Ext.EventObject
  • t : HtmlElement
    事件的目标。
  • o : Object
    调用addListener 时传递的配置选项。
Element
DOMAttrModified : ( Ext.EventObject e , HtmlElement t , Object o )
在支持的地方。当属性被修改时触发。
在支持的地方。当属性被修改时触发。
监听器将会以如下参数格式被调用:
  • e : Ext.EventObject
    包装DOM事件的 Ext.EventObject 。
  • t : HtmlElement
    事件的目标。
  • o : Object
    调用addListener 时传递的配置选项。
Element
DOMCharacterDataModified : ( Ext.EventObject e , HtmlElement t , Object o )
在支持的地方。 当特征数据被修改时触发。
在支持的地方。 当特征数据被修改时触发。
监听器将会以如下参数格式被调用:
  • e : Ext.EventObject
    包装DOM事件的Ext.EventObject
  • t : HtmlElement
    事件的目标。
  • o : Object
    调用addListener 时传递的配置选项。
Element
DOMFocusIn : ( Ext.EventObject e , HtmlElement t , Object o )
在支持的地方。类似HTML的focus事件，但是可以应用到所有可以被聚焦的元素。
在支持的地方。类似HTML的focus事件，但是可以应用到所有可以被聚焦的元素。
监听器将会以如下参数格式被调用:
  • e : Ext.EventObject
    包装DOM事件的Ext.EventObject
  • t : HtmlElement
    事件的目标。
  • o : Object
    调用addListener 时传递的配置选项。
Element
DOMFocusOut : ( Ext.EventObject e , HtmlElement t , Object o )
在支持的地方。与HTML的blur事件类似，但是可以应用到任何可以获得焦点 的元素上。
在支持的地方。与HTML的blur事件类似，但是可以应用到任何可以获得焦点 的元素上。
监听器将会以如下参数格式被调用:
  • e : Ext.EventObject
    包装DOM事件的Ext.EventObject
  • t : HtmlElement
    事件的目标。
  • o : Object
    调用addListener 时传递的配置选项。
Element
DOMNodeInserted : ( Ext.EventObject e , HtmlElement t , Object o )
在支持的地方。当一个节点被添加为另一个节点的孩子时触发。
在支持的地方。当一个节点被添加为另一个节点的孩子时触发。
监听器将会以如下参数格式被调用:
  • e : Ext.EventObject
    包装DOM事件的Ext.EventObject
  • t : HtmlElement
    事件的目标。
  • o : Object
    调用addListener 时传递的配置选项。
Element
DOMNodeInsertedIntoDocument : ( Ext.EventObject e , HtmlElement t , Object o )
在支持的地方。当一个节点被插入到document中时触发。
在支持的地方。当一个节点被插入到document中时触发。
监听器将会以如下参数格式被调用:
  • e : Ext.EventObject
    包装DOM事件的Ext.EventObject
  • t : HtmlElement
    事件的目标。
  • o : Object
    调用addListener 时传递的配置选项。
Element
DOMNodeRemoved : ( Ext.EventObject e , HtmlElement t , Object o )
在支持的地方。当元素的子节点被删除时触发。
在支持的地方。当元素的子节点被删除时触发。
监听器将会以如下参数格式被调用:
  • e : Ext.EventObject
    包装DOM事件的Ext.EventObject
  • t : HtmlElement
    事件的目标。
  • o : Object
    调用addListener 时传递的配置选项。
Element
DOMNodeRemovedFromDocument : ( Ext.EventObject e , HtmlElement t , Object o )
在支持的地方。当节点被从document中删除时触发。
在支持的地方。当节点被从document中删除时触发。
监听器将会以如下参数格式被调用:
  • e : Ext.EventObject
    包装DOM事件的Ext.EventObject
  • t : HtmlElement
    事件的目标。
  • o : Object
    调用addListener 时传递的配置选项。
Element
DOMSubtreeModified : ( Ext.EventObject e , HtmlElement t , Object o )
Where supported. Fires when the subtree is modified.
Where supported. Fires when the subtree is modified.
监听器将会以如下参数格式被调用:
  • e : Ext.EventObject
    包装DOM事件的Ext.EventObject
  • t : HtmlElement
    事件的目标。
  • o : Object
    调用addListener 时传递的配置选项。
Element
abort : ( Ext.EventObject e , HtmlElement t , Object o )
当object/image在完成加载之前被取消时触发。
当object/image在完成加载之前被取消时触发。
监听器将会以如下参数格式被调用:
  • e : Ext.EventObject
    包装DOM事件的Ext.EventObject
  • t : HtmlElement
    事件的目标。
  • o : Object
    调用addListener 时传递的配置选项。
Element
blur : ( Ext.EventObject e , HtmlElement t , Object o )
当元素失去焦点时触发，可以通过点击设备引起或者通过tab导航引起。
当元素失去焦点时触发，可以通过点击设备引起或者通过tab导航引起。
监听器将会以如下参数格式被调用:
  • e : Ext.EventObject
    包装DOM事件的Ext.EventObject
  • t : HtmlElement
    事件的目标。
  • o : Object
    调用addListener 时传递的配置选项。
Element
change : ( Ext.EventObject e , HtmlElement t , Object o )
当一个控制器时区输入焦点并且从获得焦点以来它的值发生了改变时触发。
当一个控制器时区输入焦点并且从获得焦点以来它的值发生了改变时触发。
监听器将会以如下参数格式被调用:
  • e : Ext.EventObject
    包装DOM事件的Ext.EventObject
  • t : HtmlElement
    事件的目标。
  • o : Object
    调用addListener 时传递的配置选项。
Element
click : ( Ext.EventObject e , HtmlElement t , Object o )
当在元素内部检测到一次鼠标点击时触发。
当在元素内部检测到一次鼠标点击时触发。
监听器将会以如下参数格式被调用:
  • e : Ext.EventObject
    包装DOM事件的Ext.EventObject
  • t : HtmlElement
    事件的目标。
  • o : Object
    调用addListener 时传递的配置选项。
Element
contextmenu : ( Ext.EventObject e , HtmlElement t , Object o )
在元素内部检测到右键点击时触发。
在元素内部检测到右键点击时触发。
监听器将会以如下参数格式被调用:
  • e : Ext.EventObject
    包装DOM事件的Ext.EventObject
  • t : HtmlElement
    事件的目标。
  • o : Object
    调用addListener 时传递的配置选项。
Element
dblclick : ( Ext.EventObject e , HtmlElement t , Object o )
当在元素内部检测到鼠标双击时触发。
当在元素内部检测到鼠标双击时触发。
监听器将会以如下参数格式被调用:
  • e : Ext.EventObject
    包装DOM事件的Ext.EventObject
  • t : HtmlElement
    事件的目标。
  • o : Object
    调用addListener 时传递的配置选项。
Element
error : ( Ext.EventObject e , HtmlElement t , Object o )
当一个object/image/frame无法完全加载时触发。
当一个object/image/frame无法完全加载时触发。
监听器将会以如下参数格式被调用:
  • e : Ext.EventObject
    包装DOM事件的Ext.EventObject
  • t : HtmlElement
    事件的目标。
  • o : Object
    调用addListener 时传递的配置选项。
Element
focus : ( Ext.EventObject e , HtmlElement t , Object o )
当一个元素通过点击设备或者通过tab导航获得焦点时触发。
当一个元素通过点击设备或者通过tab导航获得焦点时触发。
监听器将会以如下参数格式被调用:
  • e : Ext.EventObject
    包装DOM事件的Ext.EventObject
  • t : HtmlElement
    事件的目标。
  • o : Object
    调用addListener 时传递的配置选项。
Element
keydown : ( Ext.EventObject e , HtmlElement t , Object o )
当在元素内部检测到keydown时触发。
当在元素内部检测到keydown时触发。
监听器将会以如下参数格式被调用:
  • e : Ext.EventObject
    包装DOM事件的Ext.EventObject
  • t : HtmlElement
    事件的目标。
  • o : Object
    调用addListener 时传递的配置选项。
Element
keypress : ( Ext.EventObject e , HtmlElement t , Object o )
当在元素内部检测到一个keypress时触发。
当在元素内部检测到一个keypress时触发。
监听器将会以如下参数格式被调用:
  • e : Ext.EventObject
    包装DOM事件的Ext.EventObject
  • t : HtmlElement
    事件的目标。
  • o : Object
    调用addListener 时传递的配置选项。
Element
keyup : ( Ext.EventObject e , HtmlElement t , Object o )
如果检测到元素内部发生keyup事件时触发。
如果检测到元素内部发生keyup事件时触发。
监听器将会以如下参数格式被调用:
  • e : Ext.EventObject
    包装DOM事件的Ext.EventObject。
  • t : HtmlElement
    事件的目标。
  • o : Object
    调用addListener 时传递的配置选项。
Element
load : ( Ext.EventObject e , HtmlElement t , Object o )
当用户代理加载完元素内部所有内容时触发。 只有window,frames,objects和images支持。
当用户代理加载完元素内部所有内容时触发。 只有window,frames,objects和images支持。
监听器将会以如下参数格式被调用:
  • e : Ext.EventObject
    包装DOM事件的Ext.EventObject
  • t : HtmlElement
    事件的目标。
  • o : Object
    调用addListener 时传递的配置选项。
Element
mousedown : ( Ext.EventObject e , HtmlElement t , Object o )
在元素内部检测到mousedown时触发。
在元素内部检测到mousedown时触发。
监听器将会以如下参数格式被调用:
  • e : Ext.EventObject
    包装DOM事件的Ext.EventObject
  • t : HtmlElement
    事件的目标。
  • o : Object
    调用addListener 时传递的配置选项。
Element
mouseenter : ( Ext.EventObject e , HtmlElement t , Object o )
当鼠标进入元素时触发。
当鼠标进入元素时触发。
监听器将会以如下参数格式被调用:
  • e : Ext.EventObject
    包装DOM事件的Ext.EventObject
  • t : HtmlElement
    事件的目标。
  • o : Object
    调用addListener 时传递的配置选项。
Element
mouseleave : ( Ext.EventObject e , HtmlElement t , Object o )
当鼠标离开元素时触发。
当鼠标离开元素时触发。
监听器将会以如下参数格式被调用:
  • e : Ext.EventObject
    包装DOM事件的Ext.EventObject
  • t : HtmlElement
    事件的目标。
  • o : Object
    调用addListener 时传递的配置选项。
Element
mousemove : ( Ext.EventObject e , HtmlElement t , Object o )
当在元素内部检测到mousemove时触发。
当在元素内部检测到mousemove时触发。
监听器将会以如下参数格式被调用:
  • e : Ext.EventObject
    包装DOM事件的Ext.EventObject
  • t : HtmlElement
    事件的目标。
  • o : Object
    调用addListener 时传递的配置选项。
Element
mouseout : ( Ext.EventObject e , HtmlElement t , Object o )
当在元素上检测到mouseout时触发。
当在元素上检测到mouseout时触发。
监听器将会以如下参数格式被调用:
  • e : Ext.EventObject
    包装DOM事件的Ext.EventObject
  • t : HtmlElement
    事件的目标。
  • o : Object
    调用addListener 时传递的配置选项。
Element
mouseover : ( Ext.EventObject e , HtmlElement t , Object o )
Fires when a mouseover is detected within the element.
Fires when a mouseover is detected within the element.
监听器将会以如下参数格式被调用:
  • e : Ext.EventObject
    包装DOM事件的Ext.EventObject
  • t : HtmlElement
    事件的目标。
  • o : Object
    调用addListener 时传递的配置选项。
Element
mouseup : ( Ext.EventObject e , HtmlElement t , Object o )
当在元素内部检测到鼠标弹起事件时触发。
当在元素内部检测到鼠标弹起事件时触发。
监听器将会以如下参数格式被调用:
  • e : Ext.EventObject
    包装DOM事件的Ext.EventObject
  • t : HtmlElement
    事件的目标。
  • o : Object
    调用addListener 时传递的配置选项。
Element
reset : ( Ext.EventObject e , HtmlElement t , Object o )
当表单被重置时触发。
当表单被重置时触发。
监听器将会以如下参数格式被调用:
  • e : Ext.EventObject
    包装DOM事件的Ext.EventObject
  • t : HtmlElement
    事件的目标。
  • o : Object
    调用addListener 时传递的配置选项。
Element
resize : ( Ext.EventObject e , HtmlElement t , Object o )
当文档视图被调整大小时触发。
当文档视图被调整大小时触发。
监听器将会以如下参数格式被调用:
  • e : Ext.EventObject
    包装DOM事件的Ext.EventObject
  • t : HtmlElement
    事件的目标。
  • o : Object
    调用addListener 时传递的配置选项。
Element
scroll : ( Ext.EventObject e , HtmlElement t , Object o )
当document视图被滚动时触发。
当document视图被滚动时触发。
监听器将会以如下参数格式被调用:
  • e : Ext.EventObject
    包装DOM事件的Ext.EventObject
  • t : HtmlElement
    事件的目标。
  • o : Object
    调用addListener 时传递的配置选项。
Element
select : ( Ext.EventObject e , HtmlElement t , Object o )
当用户选中一个text field，包括input元素和textarea中的文本时触发。
当用户选中一个text field，包括input元素和textarea中的文本时触发。
监听器将会以如下参数格式被调用:
  • e : Ext.EventObject
    包装DOM事件的Ext.EventObject
  • t : HtmlElement
    事件的目标。
  • o : Object
    调用addListener 时传递的配置选项。
Element
submit : ( Ext.EventObject e , HtmlElement t , Object o )
当表单被提交时触发。
当表单被提交时触发。
监听器将会以如下参数格式被调用:
  • e : Ext.EventObject
    包装DOM事件的Ext.EventObject
  • t : HtmlElement
    事件的目标。
  • o : Object
    调用addListener 时传递的配置选项。
Element
unload : ( Ext.EventObject e , HtmlElement t , Object o )
当用户代理从window或者frame中删除了所有内容时触发。 对于元素...
当用户代理从window或者frame中删除了所有内容时触发。 对于元素，当目标元素或者它的任何内容被删除时触发。
监听器将会以如下参数格式被调用:
  • e : Ext.EventObject
    包装DOM事件的Ext.EventObject
  • t : HtmlElement
    事件的目标。
  • o : Object
    调用addListener 时传递的配置选项。
Element


ContainerLayout
    AnchorLayout
      AbsoluteLayout

Class Ext.layout.AbsoluteLayout

包: | Ext.layout
定义类的文件: | AbsoluteLayout.js
类: | AbsoluteLayout
继承自: | AnchorLayout

这是一种继承了 Ext.layout.AnchorLayout 锚定方式的布局，并且使用标准的x和y组件配置选项添加了x/y定位的功能。

该类被设计通过layout 配置参数继承或创建。 附加细节参见 Ext.Container.layout 。

示例用法:

var form = new Ext.form.FormPanel({
    title: 'Absolute Layout',
    layout:'absolute',
    layoutConfig: {
        // layout-specific configs go here
        extraCls: 'x-abs-layout-item',
    },
    baseCls: 'x-plain',
    url:'save-form.php',
    defaultType: 'textfield',
    items: [{
        x: 0,
        y: 5,
        xtype:'label',
        text: 'Send To:'
    },{
        x: 60,
        y: 0,
        name: 'to',
        anchor:'100%'  // anchor width by percentage
    },{
        x: 0,
        y: 35,
        xtype:'label',
        text: 'Subject:'
    },{
        x: 60,
        y: 30,
        name: 'subject',
        anchor: '100%'  // anchor width by percentage
    },{
        x:0,
        y: 60,
        xtype: 'textarea',
        name: 'msg',
        anchor: '100% 100%'  // anchor width and height
    }]
});

配置项

Config Options Defined By
anchor : String
即将被应用到容器中子 项目 的配置选项，此容器被当前容器管理...

即将被应用到容器中子 项目 的配置选项，此容器被当前容器管理 (例如，配置了layout:'anchor')。

此值告诉布局管理器如何将一个项目锚定到容器中。 添加到AnchorLayout的items接受一个 指定锚定位置的配置anchor参数， 它是一个包含两个值的字符串 :水平方向的锚定值和垂直方向的锚定值 (例如:'100% 50%')。 支持如下锚定值类型:

  • 百分比 : 1到100之间的任何值，表示一个百分比。
    第一个锚定值是组件在容器中所需占有的宽度百分比， 第二个是高度百分比。 例如:
    // 指定两个值
anchor: '100% 50%' // 使用容器的全部宽度和1/2高度渲染组件
// 指定一个值
anchor: '100%'// 宽度值；高度默认为auto
  • 偏移量 : 任何正数或负数值。
    这是一个原始位置，第一个锚定位置是从右侧开始计算的偏移位置， 第二个是从底部开始计算的偏移位置。例如:
    // 指定两个值
anchor: '-50 -100' // 在容器整个宽度的-50像素处，
                   // 整个高度的-100像素处渲染项目。
// one value specified
anchor: '-50'      // 锚定值被假定为到右侧的偏移量
                   // 到底部的偏移量将会默认为0
  • 侧边值 : 可用的值是 'right' (或 'r') 和 'bottom' (或 'b')。
    对于拥有特效的对象， 容器必须有一个固定的尺寸，或者有一个 在渲染时定义的anchorSize配置值 。
  • 混合值 :
    如果需要，锚定值也可以是混合型。 例如，如果需要以距离容器右侧边缘50像素，容器高度的75%渲染，使用:
                                                    anchor: '-50 75%'
AnchorLayout
defaultAnchor : String
如果没有为子项目指定anchor位置或者宽度时， 子容器中...
如果没有为子项目指定anchor位置或者宽度时， 子容器中所有组件的默认锚定位置。默认为'100%'。
AnchorLayout
extraCls : String
添加到容器上的可选的外部 CSS 样式。可以用做给容器添加自定义的 ...

添加到容器上的可选的外部 CSS 样式。可以用做给容器或其所包含的其他组件按照CSS 标准添加自定义的 样式。 参看 Ext.Component.ctCls 。

注意: extraCls 默认为 ''除了以下几个分配了默认值的类以外：

  • Absolute Layout : 'x-abs-layout-item'
  • Box Layout : 'x-box-item'
  • Column Layout : 'x-column'
给上述类的默认CSS样式增加外部的CSS样式。例如，对于 ColumnLayout:
extraCls: 'x-column custom-class'

ContainerLayout
renderHidden : Boolean
如果为true，在渲染时隐藏所有包含的元素(默认值为 false)。
ContainerLayout

公共属性

Property |  | Defined By
 | fieldTpl : Ext.Template 此 Ext.Template 使用域渲染布局 (例如 Ext.layout.FormLayout)去构建一个完... 此 Ext.Template (例如 Ext.layout.FormLayout) 去构建一个完全被包装，标记和样式化的表单域的DOM结构 。需要一个默认的 Templateis, 但是此配置可能被重写以构建自定义的域结构。 此 template 拥有的值从 Ext.layout.FormLayout.getTemplateArgs返回。 | ContainerLayout
 | if : Object monitorResize 标签会很快的重命名以避免容器的版本混乱并关联... monitorResize 标签会很快的重命名以避免容器的版本混乱 在这种情况下附加resize事件到容器和他的布局之间 | ContainerLayout

公共方法

Method Defined By
parseMargins( Number|String v ) : Object
解析一个象征margin大小的数字或字符串成对象，支持 CSS样式的margin声明 (例如 10, ...
解析一个象征margin大小的数字或字符串成对象，支持 CSS样式的margin声明 (例如 10, "10", "10 10", "10 10 10" 和 "10 10 10 10" 都是有效地配置项而且会返回相同的结果)
参数:
  • v : Number|String
    The encoded margins
返回值:
  • Object
    An object with margin sizes for top, right, bottom and left
ContainerLayout

公共事件

该类没有公共事件。


ContainerLayout
    FitLayout
      AccordionLayout

Class Ext.layout.AccordionLayout

包: | Ext.layout
定义类的文件: | AccordionLayout.js
类: | AccordionLayout
继承自: | FitLayout

这是一种可以包含多个panel的，可折叠式的布局， 在任意时刻只能打开一个panel。布局中的每个panel都有内置的展开/折叠功能。

注意：只有 Ext.Panels 和所有Ext.Panel的子类可以用在accordion 布局的容器里。

扩展或创建此类需要通过 layout 配置项。参看 Ext.Container.layout 有更的详细信息。

示例用法:

var accordion = new Ext.Panel({
    title: 'Accordion Layout',
    layout:'accordion',
    defaults: {
        // 应用到每个包含的panel
        bodyStyle: 'padding:15px'
    },
    layoutConfig: {
        // 这里是布局相关的配置项<
        titleCollapse: false,
        animate: true,
        activeOnTop: true
    },
    items: [{
        title: 'Panel 1',
        html: '<p>Panel content!</p>'
    },{
        title: 'Panel 2',
        html: '<p>Panel content!</p>'
    },{
        title: 'Panel 3',
        html: '<p>Panel content!</p>'
    }]
});

配置项

Config Options Defined By
activeOnTop : Boolean
如果为true，当panel展开时，将它调整为容器的第一项， 为false时...
如果为true，当panel展开时，将它调整为容器的第一项， 为false时，保持panel在渲染时的顺序。该选项不能与"animate:true"协同工作 (默认值为 false)。
AccordionLayout
animate : Boolean
如果为true，当包含的panel在折叠/展开时具有滑动效果， 如果为...
如果为true，当包含的panel在折叠/展开时具有滑动效果， 如果为false，则直接打开和关闭，没有动画效果(默认值为 false)。 注意：如需要为每个包含的panel定义不同的配置，请在layout层将此项设置为undefined。
AccordionLayout
autoWidth : Boolean
如果为true，将所包含的每个项目的宽度设置为'auto'， 如果为false，使用项目当前的宽度(默认值为 true)。 Note tha...
如果为true，将所包含的每个项目的宽度设置为'auto'， 如果为false，使用项目当前的宽度(默认值为 true)。 注意 有一些组件, 特别是在grid中, 如果含有auto width 则布局中将没有方法属性, 因此在这种情况下此配置项应该设置为false。
AccordionLayout
collapseFirst : Boolean
如果为true，保证折叠/展开触发按钮总是第一个被渲染 并在在所包含...
如果为true，则保证折叠/展开按钮总是第一个被渲染 并在所包含的panel的标题栏的任何其它按钮的左侧， 如果为false，则最后一个渲染它(默认值为 false).
AccordionLayout
extraCls : String
添加到容器上的可选的外部 CSS 样式。可以用做给容器添加自定义的 ...

添加到容器上的可选的外部 CSS 样式。可以用做给容器或其所包含的其他组件按照CSS 标准添加自定义的 样式。 参看 Ext.Component.ctCls 。

注意: extraCls 默认为 ''除了以下几个分配了默认值的类以外：

  • Absolute Layout : 'x-abs-layout-item'
  • Box Layout : 'x-box-item'
  • Column Layout : 'x-column'
给上述类的默认CSS样式增加外部的CSS样式。例如，对于 ColumnLayout:
extraCls: 'x-column custom-class'

ContainerLayout
fill : Boolean
如果为true，则调整活动项的高度来填满容器的有效空间， 如果为...
如果为true，调整活动项的高度来填满容器的有效空间， 如果为false，使用项目当前的高度，如果没有特别设置则使用自动高度(默认值为 true)。
AccordionLayout
hideCollapseTool : Boolean
如果为true，隐藏包含panel的折叠/展开触发按钮， 如果为false，显示他们(默认值为 false)...
如果为true，隐藏包含panel的折叠/展开触发按钮， 如果为false，显示他们(默认值为 false)。 当设置为true时，需要同时设置titleCollapse 为true。
AccordionLayout
renderHidden : Boolean
如果为true，在渲染时隐藏所有包含的元素(默认值为 false)。
ContainerLayout
sequence : Boolean
实验性参数 如果animate参数被设置为true， 该选项将导致每个动画效果按顺序执行。
AccordionLayout
titleCollapse : Boolean
如果为true，允许在容器包含的panel中的标题栏的任意地方点击时展开/折叠面板， 为false时，只有在点击按钮时才会触发展开/折叠动作...
如果为true，允许在容器包含的panel中的标题栏的任意地方点击时展开/折叠面板， 为false时，只有在点击按钮时才会触发展开/折叠动作 (默认值为 true)。 当设置为false时， 需要同时设置 hideCollapseTool 为false。
AccordionLayout

公共属性

Property Defined By
activeItem : Ext.Component
一个指向当前活动的Ext.Component 的引用。例如， if(myPanel.layout.activeItem.id == 'item-1') { ... } ...
一个指向当前活动的 Ext.Component的引用。例如，
if(myPanel.layout.activeItem.id == 'item-1') { ... }
activeItem 只能应用到一次只显示一个元素的布局中 (如 Ext.layout.AccordionLayout, Ext.layout.CardLayout 和Ext.layout.FitLayout)。只读属性。相关项：Ext.Container.activeItem.
ContainerLayout
fieldTpl : Ext.Template
此 Ext.Template 使用域渲染布局 (例如 Ext.layout.FormLayout)去构建一个完...
此 Ext.Template (例如 Ext.layout.FormLayout) 去构建一个完全被包装，标记和样式化的表单域的DOM结构 。需要一个默认的 Templateis, 但是此配置可能被重写以构建自定义的域结构。 此 template 拥有的值从 Ext.layout.FormLayout.getTemplateArgs返回。
ContainerLayout
if : Object
monitorResize 标签会很快的重命名以避免容器的版本混乱并关联...
monitorResize 标签会很快的重命名以避免容器的版本混乱 在这种情况下附加resize事件到容器和他的布局之间
ContainerLayout

公共方法

Method Defined By
parseMargins( Number|String v ) : Object
解析一个象征margin大小的数字或字符串成对象，支持 CSS样式的margin声明 (例如 10, ...
解析一个象征margin大小的数字或字符串成对象，支持 CSS样式的margin声明 (例如 10, "10", "10 10", "10 10 10" 和 "10 10 10 10" 都是有效地配置项而且会返回相同的结果)
参数:
  • v : Number|String
    The encoded margins
返回值:
  • Object
    An object with margin sizes for top, right, bottom and left
ContainerLayout
setActiveItem( String/Number item ) : void
设置布局中活动（展开）的项。
设置布局中活动（展开）的项。
参数:
  • item : String/Number
    要被设置为活动的项的id或索引值
返回值:
  • void
AccordionLayout

公共事件

该类没有公共事件。


ContainerLayout
    AnchorLayout

Class Ext.layout.AnchorLayout

包: | Ext.layout
定义类的文件: | AnchorLayout.js
类: | AnchorLayout
子类: | AbsoluteLayout, FormLayout
继承自: | ContainerLayout

这是一种可以根据容器的尺寸确定 所包含元素的位置的布局方式。 如果容器尺寸被调整，所有锚定的组件都根据它们的 anchor 规则会被自动重新渲染。

该类被设计来通过 layout:'anchor' Ext.Container.layout 配置被继承或者创建， 并且一般不应该通过new关键字直接创建。

AnchorLayout没有任何直接的配置项 (除了继承来的)。 默认情况下，AnchorLayout将会根据容器自身的尺寸计算锚定位置。 但是，使用AnchorLayout的容器可以提供一个用来指定锚定位置的 anchorSize配置项。 如果指定了anchorSize， 布局管理器将会把它用作一个虚拟的容器，根据它的尺寸来计算 锚定位置，如果必要，允许容器与调整锚定位置的逻辑无关。 例如:

var viewport = new Ext.Viewport({
    layout:'anchor',
    anchorSize: {width:800, height:600},
    items:[{
        title:'Item 1',
        html:'Content 1',
        width:800,
        anchor:'right 20%'
    },{
        title:'Item 2',
        html:'Content 2',
        width:300,
        anchor:'50% 30%'
    },{
        title:'Item 3',
        html:'Content 3',
        width:600,
        anchor:'-100 50%'
    }]
});

配置项

Config Options Defined By
anchor : String
即将被应用到容器中子 项目 的配置选项，此容器被当前容器管理...

即将被应用到容器中子 项目 的配置选项，此容器被当前容器管理 (例如，配置了layout:'anchor')。

此值告诉布局管理器如何将一个项目锚定到容器中。 添加到AnchorLayout的items接受一个 指定锚定位置的配置anchor参数， 它是一个包含两个值的字符串 :水平方向的锚定值和垂直方向的锚定值 (例如:'100% 50%')。 支持如下锚定值类型:

  • 百分比 : 1到100之间的任何值，表示一个百分比。
    第一个锚定值是组件在容器中所需占有的宽度百分比， 第二个是高度百分比。 例如:
    // 指定两个值
anchor: '100% 50%' // 使用容器的全部宽度和1/2高度渲染组件
// 指定一个值
anchor: '100%'// 宽度值；高度默认为auto
  • 偏移量 : 任何正数或负数值。
    这是一个原始位置，第一个锚定位置是从右侧开始计算的偏移位置， 第二个是从底部开始计算的偏移位置。例如:
    // 指定两个值
anchor: '-50 -100' // 在容器整个宽度的-50像素处，
                   // 整个高度的-100像素处渲染项目。
// one value specified
anchor: '-50'      // 锚定值被假定为到右侧的偏移量
                   // 到底部的偏移量将会默认为0
  • 侧边值 : 可用的值是 'right' (或 'r') 和 'bottom' (或 'b')。
    对于拥有特效的对象， 容器必须有一个固定的尺寸，或者有一个 在渲染时定义的anchorSize配置值 。
  • 混合值 :
    如果需要，锚定值也可以是混合型。 例如，如果需要以距离容器右侧边缘50像素，容器高度的75%渲染，使用:
                                                    anchor: '-50 75%'
AnchorLayout
defaultAnchor : String
如果没有为子项目指定anchor位置或者宽度时， 子容器中...
如果没有为子项目指定anchor位置或者宽度时， 子容器中所有组件的默认锚定位置。默认为'100%'。
AnchorLayout
extraCls : String
添加到容器上的可选的外部 CSS 样式。可以用做给容器添加自定义的 ...

添加到容器上的可选的外部 CSS 样式。可以用做给容器或其所包含的其他组件按照CSS 标准添加自定义的 样式。 参看 Ext.Component.ctCls 。

注意: extraCls 默认为 ''除了以下几个分配了默认值的类以外：

  • Absolute Layout : 'x-abs-layout-item'
  • Box Layout : 'x-box-item'
  • Column Layout : 'x-column'
给上述类的默认CSS样式增加外部的CSS样式。例如，对于 ColumnLayout:
extraCls: 'x-column custom-class'

ContainerLayout
renderHidden : Boolean
如果为true，在渲染时隐藏所有包含的元素(默认值为 false)。
ContainerLayout

公共属性

Property |  | Defined By
 | fieldTpl : Ext.Template 此 Ext.Template 使用域渲染布局 (例如 Ext.layout.FormLayout)去构建一个完... 此 Ext.Template (例如 Ext.layout.FormLayout) 去构建一个完全被包装，标记和样式化的表单域的DOM结构 。需要一个默认的 Templateis, 但是此配置可能被重写以构建自定义的域结构。 此 template 拥有的值从 Ext.layout.FormLayout.getTemplateArgs返回。 | ContainerLayout
 | if : Object monitorResize 标签会很快的重命名以避免容器的版本混乱并关联... monitorResize 标签会很快的重命名以避免容器的版本混乱 在这种情况下附加resize事件到容器和他的布局之间 | ContainerLayout

公共方法

Method Defined By
parseMargins( Number|String v ) : Object
解析一个象征margin大小的数字或字符串成对象，支持 CSS样式的margin声明 (例如 10, ...
解析一个象征margin大小的数字或字符串成对象，支持 CSS样式的margin声明 (例如 10, "10", "10 10", "10 10 10" 和 "10 10 10 10" 都是有效地配置项而且会返回相同的结果)
参数:
  • v : Number|String
    The encoded margins
返回值:
  • Object
    An object with margin sizes for top, right, bottom and left
ContainerLayout

公共事件

该类没有公共事件。


Class Ext.layout.AutoLayout

包: | Ext.layout
定义类的文件: | AutoLayout.js
类: | AutoLayout
继承自: | Object

当没有为 Container 指定layout 配置项， AutoLayout是 Ext.Container 渲染任何子组件时作为代理的默认布局管理器。 AutoLayout仅仅提供一个到所有子容器layout的调用通道。

公共属性

该类没有公共属性。

公共方法

该类没有公共方法。

公共事件

该类没有公共事件。


ContainerLayout
    BorderLayout

Class Ext.layout.BorderLayout

包: | Ext.layout
定义类的文件: | BorderLayout.js
类: | BorderLayout
继承自: | ContainerLayout

这是一个多块，面向应用的UI布局风格， 支持多个嵌套的面板、 在regions 和内建的 展开和折叠 区域之间的自动split 工具条。

该类被期望通过 layout:'border' Ext.Container.layout 配置项继承或者创建，并且一般情况下不应该通过new关键字直接创建。

BorderLayout没有任何直接的配置选项(除了继承来的)。 定制BorderLayout的所有配置项参数都位于 Ext.layout.BorderLayout.Region 和 Ext.layout.BorderLayout.SplitRegion 的层次上。

示例用法:

var myBorderPanel = new Ext.Panel({
    renderTo: document.body,
    width: 700,
    height: 500,
    title: 'Border Layout',
    layout: 'border',
    items: [{
        title: 'South Region is resizable',
        region: 'south',     // position for region
        height: 100,
        split: true,         // enable resizing
        minSize: 75,         // defaults to 50

        maxSize: 150,
        margins: '0 5 5 5'
    },{
        // xtype: 'panel' implied by default

        title: 'West Region is collapsible',
        region:'west',
        margins: '5 0 0 5',
        width: 200,
        collapsible: true,   // make collapsible
        cmargins: '5 5 0 5', // adjust top margin when collapsed
        id: 'west-region-container',
        layout: 'fit',
        unstyled: true
    },{
        title: 'Center Region',
        region: 'center',     // center region is required, no width/height specified
        xtype: 'container',
        layout: 'fit',
        margins: '5 5 0 0'
    }]
});

注意 :

  • 任何使用BorderLayout的容器必须拥有一个region:'center' 的子组件。中部区域的子组件将会总是充满布局中其它区域不使用的剩余区域。
  • 任何拥有west 或者east区域的子组件必须定义width (一个整数值，指定了区域所占的像素数)。
  • 任何拥有north 或者south区域的子组件必须定义height。
  • BorderLayout的区域 在渲染时确定，然后 它的子组件不能被删除或者添加。 如需在BorderLayout中add/remove组件， 通过把它们包装到一个额外的Container中， 它直接被BorderLayout管理。 如果需要区域可折叠， 直接使用BorderLayout进行管理的Container必须是一个Panel。 在以下的示例中，Container(一个Ext.Panel)被添加到west区域:
    wrc = Ext.getCmp('west-region-container');
wrc.removeAll();
wrc.add({
    title: 'Added Panel',
    html: 'Some content'
});
wrc.doLayout();
  • 到Region的引用:
                                wr = myBorderPanel.layout.west;

配置项

Config Options Defined By
extraCls : String
添加到容器上的可选的外部 CSS 样式。可以用做给容器添加自定义的 ...

添加到容器上的可选的外部 CSS 样式。可以用做给容器或其所包含的其他组件按照CSS 标准添加自定义的 样式。 参看 Ext.Component.ctCls 。

注意: extraCls 默认为 ''除了以下几个分配了默认值的类以外：

  • Absolute Layout : 'x-abs-layout-item'
  • Box Layout : 'x-box-item'
  • Column Layout : 'x-column'
给上述类的默认CSS样式增加外部的CSS样式。例如，对于 ColumnLayout:
extraCls: 'x-column custom-class'

ContainerLayout
renderHidden : Boolean
如果为true，在渲染时隐藏所有包含的元素(默认值为 false)。
ContainerLayout

公共属性

Property |  | Defined By
 | fieldTpl : Ext.Template 此 Ext.Template 使用域渲染布局 (例如 Ext.layout.FormLayout)去构建一个完... 此 Ext.Template (例如 Ext.layout.FormLayout) 去构建一个完全被包装，标记和样式化的表单域的DOM结构 。需要一个默认的 Templateis, 但是此配置可能被重写以构建自定义的域结构。 此 template 拥有的值从 Ext.layout.FormLayout.getTemplateArgs返回。 | ContainerLayout
 | if : Object monitorResize 标签会很快的重命名以避免容器的版本混乱并关联... monitorResize 标签会很快的重命名以避免容器的版本混乱 在这种情况下附加resize事件到容器和他的布局之间 | ContainerLayout

公共方法

Method Defined By
parseMargins( Number|String v ) : Object
解析一个象征margin大小的数字或字符串成对象，支持 CSS样式的margin声明 (例如 10, ...
解析一个象征margin大小的数字或字符串成对象，支持 CSS样式的margin声明 (例如 10, "10", "10 10", "10 10 10" 和 "10 10 10 10" 都是有效地配置项而且会返回相同的结果)
参数:
  • v : Number|String
    The encoded margins
返回值:
  • Object
    An object with margin sizes for top, right, bottom and left
ContainerLayout

公共事件

该类没有公共事件。


Class Ext.layout.BorderLayout.Region

包: | Ext.layout
定义类的文件: | BorderLayout.js
类: | BorderLayout.Region
子类: | BorderLayout.SplitRegion
继承自: | Object

这是 BorderLayout 中的一个区域， 被用作布局中的子容器。 每个区域拥有自己的 layout ，与其它区域和所属的BorderLayout无关， 并且可以是任何 有效的Ext布局类型。

区域尺寸被自动管理，并且不能被用户改变 ---对于 尺寸可变的区域, see 参见 Ext.layout.BorderLayout.SplitRegion。

配置项

Config Options Defined By
animFloat : Boolean
当一个折叠区域的工具栏被点击是， 区域中的面板将会显示为一个浮动的panel， 当用户鼠标移出此panel的区域...
当一个折叠区域的工具栏被点击是， 区域中的面板将会显示为一个浮动的panel， 当用户鼠标移出此panel的区域 ( 或者在 autoHide = false时在外部点击) 时它会被再次关闭。 设置 animFloat = false 将会避免使用动态效果打开和关闭这些浮动的panel(默认为 true)。
BorderLayout.Region
autoHide : Boolean
当一个折叠区域的工具栏被点击时，区域中的panel 将被显示为一个浮动的panel。...
当一个折叠区域的工具栏被点击时，区域中的panel 将被显示为一个浮动的panel。 如果autoHide = true， 此panel将会在用户鼠标移出panel之后自动隐藏。 如果autoHide = false， 此panel将会一直显示，直到用户在panel区域之外点击(默认为 true)。
BorderLayout.Region
cmargins : Object
一个包含页边距的对象， 当区域处于折叠状态时被应用，格式如下...
一个包含页边距的对象， 当区域处于折叠状态时被应用，格式如下:
{
    top: (top margin),
    right: (right margin),
    bottom: (bottom margin),
    left: (left margin)
}

也可以是一个字符串，包含通过空格分隔的，数值型margin值。 每个值指定的侧边顺序与CSS处理margin值的方式一致:

  • 如果只有一个值，应用到所有侧边。
  • 如果有两个值，顶部和底部被设置为第一个值，左侧和右侧被设置为第二个。
  • 如果有三个值，顶部被设置为第一个值， 左侧和右侧被设置为第二个值，底部被设置为第三个值。
  • 如果有四个值，它们分别被应用到上、右、下、左四边。(译者注：从上部开始顺时针旋转。)

BorderLayout.Region
collapseMode : String
collapseMode 支持两个配置值:...
collapseMode 支持两个配置值:
  • undefined (默认)
    默认情况下，通过点击渲染到区域头部工具栏的expand/collapse工具按钮 折叠 区域。
  • 'mini'
    可选的是，当collapseMode被设置为'mini'， 区域的分隔栏也将在工具栏的中间显示一个小的折叠按钮。 在'mini'模式下，区域将会折叠成一个比普通模式更细的 工具条。

注意: 如果一个可折叠区域没有标题栏，那么 设置collapseMode = 'mini'和 split = true， 用户用来进行 折叠的 expand/collapse的工具按钮(显示在标题栏)将不会被渲染。

另请参见 cmargins 。

BorderLayout.Region
collapsible : Boolean
true将会允许用户折叠此区域 (默认为 false)。 如果为true，一个expand/collapse工具按钮将会被自动...

true将会允许用户折叠此区域 (默认为 false)。 如果为true，一个expand/collapse工具按钮将会被自动 渲染到区域顶部的标题栏，否则将不会显示此按钮。

注意: 需要一个标题栏来显示collapse/expand按钮--- 如果没有为区域中的panel指定title， 只有在collapseMode = 'mini' 和 split = true时区域才会被折叠。

BorderLayout.Region
floatable : Boolean
true 将允许点击区域工具栏上的折叠按钮，以便显示区域中浮动在布局上的面板；...
true 将允许点击区域工具栏上的折叠按钮，以便显示区域中浮动在布局上的面板； false 将会强制用户通过点击展开按钮来展开一个折叠的区域，以便再次看到它(默认为 true)。
BorderLayout.Region
margins : Object
一个包含页边空白值的对象，当处于展开状态时被应用到区域上...
一个包含页边空白值的对象，当处于展开状态时被应用到区域上，格式如下:
{
    top: (top margin),
    right: (right margin),
    bottom: (bottom margin),
    left: (left margin)
}

也可以是一个字符串，包含通过空格分隔的，数值型margin值。 每个值指定的侧边顺序与CSS处理margin值的方式一致:

  • 如果只有一个值，应用到所有侧边。
  • 如果有两个值，顶部和底部被设置为第一个值，左侧和右侧被设置为第二个。
  • 如果有三个值，顶部被设置为第一个值， 左侧和右侧被设置为第二个值，底部被设置为第三个值。
  • 如果有四个值，它们分别被应用到上、右、下、左四边。(译者注：从上部开始顺时针旋转。)

默认为:

                                {top:0, right:0, bottom:0, left:0}
BorderLayout.Region
minHeight : Number
当前区域所允许的最小尺寸像素值(默认为 50) 也可以指定maxHeight。...
当前区域所允许的最小尺寸像素值(默认为 50) 也可以指定maxHeight。

注意: 设置minSize / maxSize 将会覆盖所有指定的minHeight / maxHeight。

BorderLayout.Region
minWidth : Number
当前区域所允许的最小宽度像素值(默认为50)。也可以指定maxWidth。...

当前区域所允许的最小宽度像素值(默认为50)。也可以指定maxWidth。

注意: 设置 minSize / maxSize 会覆盖所有指定的 minWidth / maxWidth。

BorderLayout.Region
split : Boolean
true 将会创建一个 SplitRegion 并在当前区域和相邻区域之间动态地显示一个宽度为5px的...

true 将会创建一个 SplitRegion 并在当前区域和相邻区域之间动态地显示一个宽度为5px的 Ext.SplitBar 。默认为false， 将会创建一个 Region。

注意:

  • 如果region='center'此配置项将会被忽略
  • 当split == true时， 通常需要为BoxComponent 指定一个minSize 和 maxSize 参数来描述区域。 这些不是 BoxComponent 类的本地配置，并且仅仅被该类使用。
  • 如果 collapseMode = 'mini' 需要split = true以便为折叠工具保留空间
BorderLayout.Region

公共属性

Property |  | Defined By
 | isCollapsed : Boolean 如果当前区域被折叠，此值为true。只读。 | BorderLayout.Region
 | layout : Layout 当前区域的布局。只读。 | BorderLayout.Region
 | panel : Ext.Panel 当前区域中的panel。只读。 | BorderLayout.Region
 | position : String 当前区域的布局位置(north, south, east, west或者 center)。只读。 | BorderLayout.Region

公共方法

Method Defined By
BorderLayout.Region ( Layout layout , Object config , String position )
创建一个新的Region
创建一个新的Region
参数:
  • layout : Layout
    管理当前Region的 BorderLayout 实例。
  • config : Object
    配置选项
  • position : String
    区域的位置。合法的值为: north, south, east, west 和 center。 每个 BorderLayout 必须拥有一个center区域作为主内容 ---所有其它区域都是可选的。
返回值:
  • void
BorderLayout.Region
getMargins () : Object
返回当前区域当前的页边距。 如果区域被折叠，...
返回当前区域当前的页边距。 如果区域被折叠， cmargins(折叠状态的页边距) 值将会被返回，否则将会返回margins 值。
参数:
  • 无。
返回值:
  • Object
    一个包含元素页边距的对象: <tt>{left: (left margin), top: (top margin), right: (right margin), bottom: (bottom margin)}</tt>
BorderLayout.Region
getMinHeight () : Number
返回当前区域所允许的最小高度值。
返回当前区域所允许的最小高度值。
参数:
  • 无。
返回值:
  • Number
    最小高度
BorderLayout.Region
getMinWidth () : Number
返回当前区域所允许的最小宽度值。
返回当前区域所允许的最小宽度值。
参数:
  • 无。
返回值:
  • Number
    最小宽度
BorderLayout.Region
getSize () : Object
返回当前区域的当前尺寸。 如果区域被折叠，collapsedEl的尺寸将会被返回...
返回当前区域的当前尺寸。 如果区域被折叠，collapsedEl的尺寸将会被返回， 否则将会返回区域中panel的尺寸。
参数:
  • 无。
返回值:
  • Object
    一个包含元素尺寸的对象: <tt>{width: (元素的宽度), height: (元素的高度)}</tt>
BorderLayout.Region
isVisible () : Boolean
如果当前区域可见，此值为true，否则为false
如果当前区域可见，此值为true，否则为false
参数:
  • 无。
返回值:
  • Boolean
BorderLayout.Region
setPanel ( Ext.Panel panel ) : void
将指定的panel设置为当前区域的容器元素。
将指定的panel设置为当前区域的容器元素。
参数:
  • panel : Ext.Panel
    新的panel
返回值:
  • void
BorderLayout.Region
slideIn () : void
如果当前Region是 floatable的 ，并且当前Region被滑动作一个浮动方式，那么...
如果当前Region是 floatable的 ，并且当前Region被滑动作一个浮动方式，那么 此方法将会把当前区域滑动回折叠状态。
参数:
  • 无。
返回值:
  • void
BorderLayout.Region
slideOut () : void
如果此Region是 floatable ，此方法将此Region滑动到全部可见...
如果此Region是 floatable ，此方法将此Region滑动到全部可见 越过中部Region的顶部---它浮动的位置，直到要么调用 slideIn 要么布局中的其它区域被点击，或者鼠标移出Region。
参数:
  • 无。
返回值:
  • void
BorderLayout.Region

公共事件

该类没有公共事件。


BorderLayout.Region
    BorderLayout.SplitRegion

Class Ext.layout.BorderLayout.SplitRegion

包: | Ext.layout
定义类的文件: | BorderLayout.js
类: | BorderLayout.SplitRegion
继承自: | BorderLayout.Region

这是 BorderLayout region 的一个特殊类型，拥有一个内置的 Ext.SplitBar 以便让用户调整区域的尺寸。 分隔栏的运动可配置为 smooth 或者 incrementally。

配置项

Config Options Defined By
animFloat : Boolean
当一个折叠区域的工具栏被点击是， 区域中的面板将会显示为一个浮动的panel， 当用户鼠标移出此panel的区域...
当一个折叠区域的工具栏被点击是， 区域中的面板将会显示为一个浮动的panel， 当用户鼠标移出此panel的区域 ( 或者在 autoHide = false时在外部点击) 时它会被再次关闭。 设置 animFloat = false 将会避免使用动态效果打开和关闭这些浮动的panel(默认为 true)。
BorderLayout.Region
autoHide : Boolean
当一个折叠区域的工具栏被点击时，区域中的panel 将被显示为一个浮动的panel。...
当一个折叠区域的工具栏被点击时，区域中的panel 将被显示为一个浮动的panel。 如果autoHide = true， 此panel将会在用户鼠标移出panel之后自动隐藏。 如果autoHide = false， 此panel将会一直显示，直到用户在panel区域之外点击(默认为 true)。
BorderLayout.Region
cmargins : Object
一个包含页边距的对象， 当区域处于折叠状态时被应用，格式如下...
一个包含页边距的对象， 当区域处于折叠状态时被应用，格式如下:
{
    top: (top margin),
    right: (right margin),
    bottom: (bottom margin),
    left: (left margin)
}

也可以是一个字符串，包含通过空格分隔的，数值型margin值。 每个值指定的侧边顺序与CSS处理margin值的方式一致:

  • 如果只有一个值，应用到所有侧边。
  • 如果有两个值，顶部和底部被设置为第一个值，左侧和右侧被设置为第二个。
  • 如果有三个值，顶部被设置为第一个值， 左侧和右侧被设置为第二个值，底部被设置为第三个值。
  • 如果有四个值，它们分别被应用到上、右、下、左四边。(译者注：从上部开始顺时针旋转。)

BorderLayout.Region
collapseMode : String
collapseMode 支持两个配置值:...
collapseMode 支持两个配置值:
  • undefined (默认)
    默认情况下，通过点击渲染到区域头部工具栏的expand/collapse工具按钮 折叠 区域。
  • 'mini'
    可选的是，当collapseMode被设置为'mini'， 区域的分隔栏也将在工具栏的中间显示一个小的折叠按钮。 在'mini'模式下，区域将会折叠成一个比普通模式更细的 工具条。

注意: 如果一个可折叠区域没有标题栏，那么 设置collapseMode = 'mini'和 split = true， 用户用来进行 折叠的 expand/collapse的工具按钮(显示在标题栏)将不会被渲染。

另请参见 cmargins 。

BorderLayout.Region
collapsible : Boolean
true将会允许用户折叠此区域 (默认为 false)。 如果为true，一个expand/collapse工具按钮将会被自动...

true将会允许用户折叠此区域 (默认为 false)。 如果为true，一个expand/collapse工具按钮将会被自动 渲染到区域顶部的标题栏，否则将不会显示此按钮。

注意: 需要一个标题栏来显示collapse/expand按钮--- 如果没有为区域中的panel指定title， 只有在collapseMode = 'mini' 和 split = true时区域才会被折叠。

BorderLayout.Region
collapsibleSplitTip : String
当用户鼠标滑过一个 collapsible 区域的分隔栏时显示的tooltip(默认为...
当用户鼠标滑过一个 collapsible 区域的分隔栏时显示的tooltip(默认为"Drag to resize. Double click to hide.")。 只有当useSplitTips = true 时才应用。
BorderLayout.SplitRegion
floatable : Boolean
true 将允许点击区域工具栏上的折叠按钮，以便显示区域中浮动在布局上的面板；...
true 将允许点击区域工具栏上的折叠按钮，以便显示区域中浮动在布局上的面板； false 将会强制用户通过点击展开按钮来展开一个折叠的区域，以便再次看到它(默认为 true)。
BorderLayout.Region
margins : Object
一个包含页边空白值的对象，当处于展开状态时被应用到区域上...
一个包含页边空白值的对象，当处于展开状态时被应用到区域上，格式如下:
{
    top: (top margin),
    right: (right margin),
    bottom: (bottom margin),
    left: (left margin)
}

也可以是一个字符串，包含通过空格分隔的，数值型margin值。 每个值指定的侧边顺序与CSS处理margin值的方式一致:

  • 如果只有一个值，应用到所有侧边。
  • 如果有两个值，顶部和底部被设置为第一个值，左侧和右侧被设置为第二个。
  • 如果有三个值，顶部被设置为第一个值， 左侧和右侧被设置为第二个值，底部被设置为第三个值。
  • 如果有四个值，它们分别被应用到上、右、下、左四边。(译者注：从上部开始顺时针旋转。)

默认为:

                                {top:0, right:0, bottom:0, left:0}
BorderLayout.Region
minHeight : Number
当前区域所允许的最小尺寸像素值(默认为 50) 也可以指定maxHeight。...
当前区域所允许的最小尺寸像素值(默认为 50) 也可以指定maxHeight。

注意: 设置minSize / maxSize 将会覆盖所有指定的minHeight / maxHeight。

BorderLayout.Region
minWidth : Number
当前区域所允许的最小宽度像素值(默认为50)。也可以指定maxWidth。...

当前区域所允许的最小宽度像素值(默认为50)。也可以指定maxWidth。

注意: 设置 minSize / maxSize 会覆盖所有指定的 minWidth / maxWidth。

BorderLayout.Region
split : Boolean
true 将会创建一个 SplitRegion 并在当前区域和相邻区域之间动态地显示一个宽度为5px的...

true 将会创建一个 SplitRegion 并在当前区域和相邻区域之间动态地显示一个宽度为5px的 Ext.SplitBar 。默认为false， 将会创建一个 Region。

注意:

  • 如果region='center'此配置项将会被忽略
  • 当split == true时， 通常需要为BoxComponent 指定一个minSize 和 maxSize 参数来描述区域。 这些不是 BoxComponent 类的本地配置，并且仅仅被该类使用。
  • 如果 collapseMode = 'mini' 需要split = true以便为折叠工具保留空间
BorderLayout.Region
splitTip : String
当用户鼠标滑过一个 non-collapsible 区域的分隔栏上时显示的tooltip (默认为...
当用户鼠标滑过一个 non-collapsible 区域的分隔栏上时显示的tooltip (默认为 "Drag to resize.")。 只有在 useSplitTips = true 时才使用。
BorderLayout.SplitRegion
tickSize : Number
移动当前区域的SplitBar 时的像素值增量。 默认情况下，SplitBar 平滑移动。
BorderLayout.SplitRegion
useSplitTips : Boolean
true将在用户鼠标滑过一个 区域的分隔栏时显示一个tooltip(默认为 false)。 tooltip文本可以是...
true将在用户鼠标滑过一个 区域的分隔栏时显示一个tooltip(默认为 false)。 tooltip文本可以是 splitTip 或者是collapsibleSplitTip 的合适的值。
BorderLayout.SplitRegion

公共属性

Property |  | Defined By
 | isCollapsed : Boolean 如果当前区域被折叠，此值为true。只读。 | BorderLayout.Region
 | layout : Layout 当前区域的布局。只读。 | BorderLayout.Region
 | panel : Ext.Panel 当前区域中的panel。只读。 | BorderLayout.Region
 | position : String 当前区域的布局位置(north, south, east, west或者 center)。只读。 | BorderLayout.Region

公共方法

Method Defined By
BorderLayout.SplitRegion ( Layout layout , Object config , String position )
创建一个新的SplitRegion
创建一个新的SplitRegion
参数:
  • layout : Layout
    管理当前Region的 BorderLayout实例。
  • config : Object
    配置选项
  • position : String
    区域位置。 合法值为: north, south, east, west 和 center。 每个BorderLayout都必须有一个center区域，作为主内容--- 其它区域都是可选的。
返回值:
  • void
BorderLayout.SplitRegion
getMargins () : Object
返回当前区域当前的页边距。 如果区域被折叠，...
返回当前区域当前的页边距。 如果区域被折叠， cmargins(折叠状态的页边距) 值将会被返回，否则将会返回margins 值。
参数:
  • 无。
返回值:
  • Object
    一个包含元素页边距的对象: <tt>{left: (left margin), top: (top margin), right: (right margin), bottom: (bottom margin)}</tt>
BorderLayout.Region
getMinHeight () : Number
返回当前区域所允许的最小高度值。
返回当前区域所允许的最小高度值。
参数:
  • 无。
返回值:
  • Number
    最小高度
BorderLayout.Region
getMinWidth () : Number
返回当前区域所允许的最小宽度值。
返回当前区域所允许的最小宽度值。
参数:
  • 无。
返回值:
  • Number
    最小宽度
BorderLayout.Region
getSize () : Object
返回当前区域的当前尺寸。 如果区域被折叠，collapsedEl的尺寸将会被返回...
返回当前区域的当前尺寸。 如果区域被折叠，collapsedEl的尺寸将会被返回， 否则将会返回区域中panel的尺寸。
参数:
  • 无。
返回值:
  • Object
    一个包含元素尺寸的对象: <tt>{width: (元素的宽度), height: (元素的高度)}</tt>
BorderLayout.Region
getSplitBar () : Ext.SplitBar
返回一个到当前区域所使用分隔工具栏的引用。
返回一个到当前区域所使用分隔栏的引用。
参数:
  • 无。
返回值:
  • Ext.SplitBar
    分隔栏
BorderLayout.SplitRegion
isVisible () : Boolean
如果当前区域可见，此值为true，否则为false
如果当前区域可见，此值为true，否则为false
参数:
  • 无。
返回值:
  • Boolean
BorderLayout.Region
setPanel ( Ext.Panel panel ) : void
将指定的panel设置为当前区域的容器元素。
将指定的panel设置为当前区域的容器元素。
参数:
  • panel : Ext.Panel
    新的panel
返回值:
  • void
BorderLayout.Region
slideIn () : void
如果当前Region是 floatable的 ，并且当前Region被滑动作一个浮动方式，那么...
如果当前Region是 floatable的 ，并且当前Region被滑动作一个浮动方式，那么 此方法将会把当前区域滑动回折叠状态。
参数:
  • 无。
返回值:
  • void
BorderLayout.Region
slideOut () : void
如果此Region是 floatable ，此方法将此Region滑动到全部可见...
如果此Region是 floatable ，此方法将此Region滑动到全部可见 越过中部Region的顶部---它浮动的位置，直到要么调用 slideIn 要么布局中的其它区域被点击，或者鼠标移出Region。
参数:
  • 无。
返回值:
  • void
BorderLayout.Region

公共事件

该类没有公共事件。


ContainerLayout
    BoxLayout

Class Ext.layout.BoxLayout

包: | Ext.layout
定义类的文件: | BoxLayout.js
类: | BoxLayout
子类: | HBoxLayout, VBoxLayout
继承自: | ContainerLayout

HBoxLayout和VBoxLayout的基类。 一般情况下不需要直接使用它。

配置项

Config Options Defined By
defaultMargins : Object
如果包含的某个项目没有指定margins属性， 此参数的默认margins值将会被设置到每个项目...

如果包含的某个项目没有指定margins属性， 此参数的默认margins值将会被设置到每个项目。

此参数可以指定为一个对象，包含需要设置的margins，格式:

{
    top: (top margin),
    right: (right margin),
    bottom: (bottom margin),
    left: (left margin)
}

此参数也可以指定为一个字符串，包含以空格分隔的数值。 每个值对应的侧边顺序与CSS处理margin值对应:

  • 如果只有一个值，应用到所有边。
  • 如果有两个值，顶部和底部边被设置为第一个值，左侧和右侧边被设置为第二个值。
  • 如果有三个值，顶部被设置为第一个值， 左侧和右侧被设置为第二个值，底部被设置为第三个值。
  • 如果有四个值，它们分别被设置到上、右、下、左四边(译者注：从顶部开始顺时针转)。

默认为:

                                {top:0, right:0, bottom:0, left:0}
BoxLayout
extraCls : String
添加到容器上的可选的外部 CSS 样式。可以用做给容器添加自定义的 ...

添加到容器上的可选的外部 CSS 样式。可以用做给容器或其所包含的其他组件按照CSS 标准添加自定义的 样式。 参看 Ext.Component.ctCls 。

注意: extraCls 默认为 ''除了以下几个分配了默认值的类以外：

  • Absolute Layout : 'x-abs-layout-item'
  • Box Layout : 'x-box-item'
  • Column Layout : 'x-column'
给上述类的默认CSS样式增加外部的CSS样式。例如，对于 ColumnLayout:
extraCls: 'x-column custom-class'

ContainerLayout
padding : String
设置padding，被应用到当前布局管理的所有子项目。此属性必须指定为一个字符串...

设置padding，被应用到当前布局管理的所有子项目。

此属性必须指定为一个字符串，包含以空格分隔的padding数值。 每个值对应的侧边顺序与CSS处理padding值对应:

  • 如果只有一个值，应用到所有边。
  • 如果有两个值，顶部和底部边被设置为第一个值，左侧和右侧边被设置为第二个值。
  • 如果有三个值，顶部被设置为第一个值， 左侧和右侧被设置为第二个值，底部被设置为第三个值。
  • 如果有四个值，它们分别被设置到上、右、下、左四边(译者注：从顶部开始顺时针转)。

默认为: "0"

BoxLayout
renderHidden : Boolean
如果为true，在渲染时隐藏所有包含的元素(默认值为 false)。
ContainerLayout

公共属性

Property Defined By
activeItem : Ext.Component
一个指向当前活动的Ext.Component 的引用。例如， if(myPanel.layout.activeItem.id == 'item-1') { ... } ...
一个指向当前活动的 Ext.Component的引用。例如，
if(myPanel.layout.activeItem.id == 'item-1') { ... }
activeItem 只能应用到一次只显示一个元素的布局中 (如 Ext.layout.AccordionLayout, Ext.layout.CardLayout 和Ext.layout.FitLayout)。只读属性。相关项：Ext.Container.activeItem.
ContainerLayout
fieldTpl : Ext.Template
此 Ext.Template 使用域渲染布局 (例如 Ext.layout.FormLayout)去构建一个完...
此 Ext.Template (例如 Ext.layout.FormLayout) 去构建一个完全被包装，标记和样式化的表单域的DOM结构 。需要一个默认的 Templateis, 但是此配置可能被重写以构建自定义的域结构。 此 template 拥有的值从 Ext.layout.FormLayout.getTemplateArgs返回。
ContainerLayout
if : Object
monitorResize 标签会很快的重命名以避免容器的版本混乱并关联...
monitorResize 标签会很快的重命名以避免容器的版本混乱 在这种情况下附加resize事件到容器和他的布局之间
ContainerLayout

公共方法

Method Defined By
parseMargins( Number|String v ) : Object
解析一个象征margin大小的数字或字符串成对象，支持 CSS样式的margin声明 (例如 10, ...
解析一个象征margin大小的数字或字符串成对象，支持 CSS样式的margin声明 (例如 10, "10", "10 10", "10 10 10" 和 "10 10 10 10" 都是有效地配置项而且会返回相同的结果)
参数:
  • v : Number|String
    The encoded margins
返回值:
  • Object
    An object with margin sizes for top, right, bottom and left
ContainerLayout
updateChildBoxes ( Array boxes ) : void
调整每个子组件的位置和大小
调整每个子组件的位置和大小
参数:
  • boxes : Array
    盒子尺寸
返回值:
  • void
BoxLayout

公共事件

该类没有公共事件。


ContainerLayout
    FitLayout
      CardLayout

Class Ext.layout.CardLayout

包: | Ext.layout
定义类的文件: | CardLayout.js
类: | CardLayout
继承自: | FitLayout

该布局包含多个panel，每一个都自适应到容器， 在同一时刻只有一个panel是可见的。 这种布局风格最常用于安装向导、标签式浏览等等。该类是被设计用来继承的， 或者通过layout:'card' Ext.Container.layout配置项来创建， 一般情况下不需要通过new关键字直接创建。

CardLayout的最重要的方法是setActiveItem。 因为一次只显示一个panel，从一个panel切换到另一个panel的 唯一方法是调用setActiveItem 方法，将下一个需要显示的panel的 id或者序号传递给它。布局本身并不提供处理这种导航功能的机制， 所以必须由开发者提供此功能的实现。

以下的示例，演示了一个简单的安装向导。一个按钮工具条被添加到所包含的panel底部， 以提供导航按钮。按钮将会被一个通用的导航程序类处理---对于这个例子， 由于这个通用的导航程序可能是任何用户相关特殊逻辑，所以具体实现被省略掉了。 注意，CardLayout的其它用途可能需要一个完全不同的实现（例如标签式的控制）。 对于严谨的实现来说，一个更好的办法是继承CardLayout，来提供所需的特定功能。 示例用法:

var navHandler = function(direction){
   // 这段程序可以包含控制导航步骤所需的业务逻辑。
   // 在需要的时候它将调用setActiveItem方法，管理导航按钮的状态，
   // 处理任何可能需要的逻辑分支，处理可能的操作，像退出或操作完成，等等。
   // 在现实的实现中，一个完整的安装向导实现会非常复杂，它与复杂的需求有关。
   // 可能需要要扩展CardLayout类。
};

var card = new Ext.Panel({
    title: 'Example Wizard',
    layout:'card',
    activeItem: 0, //确保在容器的配置项中设置了当前活动项！
    bodyStyle: 'padding:15px',
    defaults: {
        //应用到包含的每个面板上
        border:false
    },
    // 只是一个例子，一个可能的导航方案，使用按钮
    bbar: [
        {
            id: 'move-prev',
            text: 'Back',
            handler: navHandler.createDelegate(this, [-1]),
            disabled: true
        },
        '->', // 贪婪分隔符，这样按钮就被对齐到边界处
        {
            id: 'move-next',
            text: 'Next',
            handler: navHandler.createDelegate(this, [1])
        }
    ],
    // 布局中的panels(或者 "cards")
    items: [{
        id: 'card-0',
        html: '<h1>Welcome to the Wizard!</h1><p>Step 1 of 3</p>'
    },{
        id: 'card-1',
        html: '<p>Step 2 of 3</p>'
    },{
        id: 'card-2',
        html: '<h1>Congratulations!</h1><p>Step 3 of 3 - Complete</p>'
    }]
});

配置项

Config Options Defined By
deferredRender : Boolean
如果true，只有在每个包含的项目成为当前活动项时才渲染它， 否则在布局渲染完成后将渲染包含的所有项目(默认值为 false)...
如果true，只有在每个包含的项目成为当前活动项时才渲染它， 否则在布局渲染完成后将渲染包含的所有项目(默认值为 false)。 如果有大量的内容或者大量的重量级的控制器被渲染到panel中， 并且在默认情况下不显示它， 将该选项设置为true可以改善性能。 （译者注：这是一种延迟渲染的实现，在包含的内容多而且复杂的时候建议一定要设置该选项。）
CardLayout
extraCls : String
添加到容器上的可选的外部 CSS 样式。可以用做给容器添加自定义的 ...

添加到容器上的可选的外部 CSS 样式。可以用做给容器或其所包含的其他组件按照CSS 标准添加自定义的 样式。 参看 Ext.Component.ctCls 。

注意: extraCls 默认为 ''除了以下几个分配了默认值的类以外：

  • Absolute Layout : 'x-abs-layout-item'
  • Box Layout : 'x-box-item'
  • Column Layout : 'x-column'
给上述类的默认CSS样式增加外部的CSS样式。例如，对于 ColumnLayout:
extraCls: 'x-column custom-class'

ContainerLayout
layoutOnCardChange : Boolean
True将会在活动的卡片发生变化时，强制活动项目进行一次布局操作。 默认为false。
CardLayout

公共属性

Property Defined By
activeItem : Ext.Component
一个指向当前活动的Ext.Component 的引用。例如， if(myPanel.layout.activeItem.id == 'item-1') { ... } ...
一个指向当前活动的 Ext.Component的引用。例如，
if(myPanel.layout.activeItem.id == 'item-1') { ... }
activeItem 只能应用到一次只显示一个元素的布局中 (如 Ext.layout.AccordionLayout, Ext.layout.CardLayout 和Ext.layout.FitLayout)。只读属性。相关项：Ext.Container.activeItem.
ContainerLayout
fieldTpl : Ext.Template
此 Ext.Template 使用域渲染布局 (例如 Ext.layout.FormLayout)去构建一个完...
此 Ext.Template (例如 Ext.layout.FormLayout) 去构建一个完全被包装，标记和样式化的表单域的DOM结构 。需要一个默认的 Templateis, 但是此配置可能被重写以构建自定义的域结构。 此 template 拥有的值从 Ext.layout.FormLayout.getTemplateArgs返回。
ContainerLayout
if : Object
monitorResize 标签会很快的重命名以避免容器的版本混乱并关联...
monitorResize 标签会很快的重命名以避免容器的版本混乱 在这种情况下附加resize事件到容器和他的布局之间
ContainerLayout

公共方法

Method Defined By
parseMargins( Number|String v ) : Object
解析一个象征margin大小的数字或字符串成对象，支持 CSS样式的margin声明 (例如 10, ...
解析一个象征margin大小的数字或字符串成对象，支持 CSS样式的margin声明 (例如 10, "10", "10 10", "10 10 10" 和 "10 10 10 10" 都是有效地配置项而且会返回相同的结果)
参数:
  • v : Number|String
    The encoded margins
返回值:
  • Object
    An object with margin sizes for top, right, bottom and left
ContainerLayout
setActiveItem ( String/Number item ) : void
设置布局中的当前活动（可见）项。
设置布局中的当前活动（可见）项。
参数:
  • item : String/Number
    需要成为当前活动项的组件的id或序号
返回值:
  • void
CardLayout

公共事件

该类没有公共事件。


ContainerLayout
    ColumnLayout

Class Ext.layout.ColumnLayout

包: | Ext.layout
定义类的文件: | ColumnLayout.js
类: | ColumnLayout
继承自: | ContainerLayout

这是一种可选的布局风格，用来在用一个多列的格式中创建结构化的布局 ，可以使用百分比或者一个固定值指定每一列的宽度，但是允许根据内容 改变高度。该类被期望通过layout:'column' Ext.Container.layout 配置项继承或者创建，并且一般情况下没必要通过new关键字直接创建。

ColumnLayout没有任何直接的配置项(除了继承获得的)， 但是它确实支持一个特殊的配置参数 columnWidth ，在添加到其中的任意一个panel的配置中包含此参数。 布局管理器将会在进行布局操作时使用columnWidth(如果存在)或者每个panel的宽度 ，以决定如何调整每个panel的尺寸。 如果所给的panel没有指定width或者columnWidth，它的宽度将会 默认为panel的宽度(或者auto)。

width属性总是被当作像素值， 并且必须是一个大于等于1的数值。 columnWidth属性总是被当作百分比，并且必须是一个大于0小于1的十进制值(例如.25)。

指定列宽度的规则非常简单。 布局逻辑对所包含的panel集合进行两轮遍历。 第一轮布局期间，拥有固定宽度或者没有指定宽度(auto)的所有panel都被跳过， 但是它们的宽度会被从外部容器的宽度中减去。 在第二轮布局期间，根据在容器剩余宽度中所占的百分比， 拥有columnWidth属性的所有panel将会被分配宽度像素值。 换句话说，百分比宽度的panel是被设计用来填充剩余宽度的， 此宽度是被固定宽度和自动宽度panel们所剩余下来的。 因为如此，你可以指定任意个拥有不同百分比的列数， columnWidth之和必须为1(或者100%)，否则你的布局管理器可能不会像所期望的那样 进行布局。 示例用法:

// All columns are percentages -- they must add up to 1
var p = new Ext.Panel({
    title: 'Column Layout - Percentage Only',
    layout:'column',
    items: [{
        title: 'Column 1',
        columnWidth: .25
    },{
        title: 'Column 2',
        columnWidth: .6
    },{
        title: 'Column 3',
        columnWidth: .15
    }]
});

// Mix of width and columnWidth -- all columnWidth values must add up
// to 1. The first column will take up exactly 120px, and the last two
// columns will fill the remaining container width.
var p = new Ext.Panel({
    title: 'Column Layout - Mixed',
    layout:'column',
    items: [{
        title: 'Column 1',
        width: 120
    },{
        title: 'Column 2',
        columnWidth: .8
    },{
        title: 'Column 3',
        columnWidth: .2
    }]
});

配置项

Config Options Defined By
extraCls : String
添加到容器上的可选的外部 CSS 样式。可以用做给容器添加自定义的 ...

添加到容器上的可选的外部 CSS 样式。可以用做给容器或其所包含的其他组件按照CSS 标准添加自定义的 样式。 参看 Ext.Component.ctCls 。

注意: extraCls 默认为 ''除了以下几个分配了默认值的类以外：

  • Absolute Layout : 'x-abs-layout-item'
  • Box Layout : 'x-box-item'
  • Column Layout : 'x-column'
给上述类的默认CSS样式增加外部的CSS样式。例如，对于 ColumnLayout:
extraCls: 'x-column custom-class'

ContainerLayout
renderHidden : Boolean
如果为true，在渲染时隐藏所有包含的元素(默认值为 false)。
ContainerLayout

公共属性

Property |  | Defined By
 | fieldTpl : Ext.Template 此 Ext.Template 使用域渲染布局 (例如 Ext.layout.FormLayout)去构建一个完... 此 Ext.Template (例如 Ext.layout.FormLayout) 去构建一个完全被包装，标记和样式化的表单域的DOM结构 。需要一个默认的 Templateis, 但是此配置可能被重写以构建自定义的域结构。 此 template 拥有的值从 Ext.layout.FormLayout.getTemplateArgs返回。 | ContainerLayout
 | if : Object monitorResize 标签会很快的重命名以避免容器的版本混乱并关联... monitorResize 标签会很快的重命名以避免容器的版本混乱 在这种情况下附加resize事件到容器和他的布局之间 | ContainerLayout

公共方法

Method Defined By
parseMargins( Number|String v ) : Object
解析一个象征margin大小的数字或字符串成对象，支持 CSS样式的margin声明 (例如 10, ...
解析一个象征margin大小的数字或字符串成对象，支持 CSS样式的margin声明 (例如 10, "10", "10 10", "10 10 10" 和 "10 10 10 10" 都是有效地配置项而且会返回相同的结果)
参数:
  • v : Number|String
    The encoded margins
返回值:
  • Object
    An object with margin sizes for top, right, bottom and left
ContainerLayout

公共事件

该类没有公共事件。


Class Ext.layout.ContainerLayout

包: | Ext.layout
定义类的文件: | ContainerLayout.js
类: | ContainerLayout
子类: | AnchorLayout, BorderLayout, BoxLayout, ColumnLayout, FitLayout, MenuLayout, TableLayout, ToolbarLayout
继承自: | Object

扩展或创建此类需要通过 layout 配置项。参看 Ext.Container.layout 有更的详细信息。

配置项

Config Options Defined By
extraCls : String
添加到容器上的可选的外部 CSS 样式。可以用做给容器添加自定义的 ...

添加到容器上的可选的外部 CSS 样式。可以用做给容器或其所包含的其他组件按照CSS 标准添加自定义的 样式。 参看 Ext.Component.ctCls 。

注意: extraCls 默认为 ''除了以下几个分配了默认值的类以外：

  • Absolute Layout : 'x-abs-layout-item'
  • Box Layout : 'x-box-item'
  • Column Layout : 'x-column'
给上述类的默认CSS样式增加外部的CSS样式。例如，对于 ColumnLayout:
extraCls: 'x-column custom-class'

ContainerLayout
renderHidden : Boolean
如果为true，在渲染时隐藏所有包含的元素(默认值为 false)。
ContainerLayout

公共属性

Property Defined By
activeItem : Ext.Component
一个指向当前活动的Ext.Component 的引用。例如， if(myPanel.layout.activeItem.id == 'item-1') { ... } ...
一个指向当前活动的 Ext.Component的引用。例如，
if(myPanel.layout.activeItem.id == 'item-1') { ... }
activeItem 只能应用到一次只显示一个元素的布局中 (如 Ext.layout.AccordionLayout, Ext.layout.CardLayout 和Ext.layout.FitLayout)。只读属性。相关项：Ext.Container.activeItem.
ContainerLayout
fieldTpl : Ext.Template
此 Ext.Template 使用域渲染布局 (例如 Ext.layout.FormLayout)去构建一个完...
此 Ext.Template (例如 Ext.layout.FormLayout) 去构建一个完全被包装，标记和样式化的表单域的DOM结构 。需要一个默认的 Templateis, 但是此配置可能被重写以构建自定义的域结构。 此 template 拥有的值从 Ext.layout.FormLayout.getTemplateArgs返回。
ContainerLayout
if : Object
monitorResize 标签会很快的重命名以避免容器的版本混乱并关联...
monitorResize 标签会很快的重命名以避免容器的版本混乱 在这种情况下附加resize事件到容器和他的布局之间
ContainerLayout

公共方法

Method Defined By
parseMargins( Number|String v ) : Object
解析一个象征margin大小的数字或字符串成对象，支持 CSS样式的margin声明 (例如 10, ...
解析一个象征margin大小的数字或字符串成对象，支持 CSS样式的margin声明 (例如 10, "10", "10 10", "10 10 10" 和 "10 10 10 10" 都是有效地配置项而且会返回相同的结果)
参数:
  • v : Number|String
    The encoded margins
返回值:
  • Object
    An object with margin sizes for top, right, bottom and left
ContainerLayout

公共事件

该类没有公共事件。


ContainerLayout
    FitLayout

Class Ext.layout.FitLayout

包: | Ext.layout
定义类的文件: | FitLayout.js
类: | FitLayout
子类: | AccordionLayout, CardLayout
继承自: | ContainerLayout

这是一个基类，对于包含一个单独的项目，自动展开到能充满 布局所属的容器。 该类被期望通过layout:'fit' Ext.Container.layout 配置项继承或者创建，并且一般情况下没必要通过new关键字直接创建。

FitLayout没有任何直接的配置项(除了继承获得的)。 如需讲一个panel适应到一个使用FitLayout的容器中， 在容器上简单滴设置layout:'fit'然后向其中添加一个单独的panel即可。 如果容器拥有多个panel，只有第一个会被显示。 示例用法:

var p = new Ext.Panel({
    title: 'Fit Layout',
    layout:'fit',
    items: {
        title: 'Inner Panel',
        html: '<p>This is the inner panel content</p>',
        border: false
    }
});

配置项

Config Options Defined By
extraCls : String
添加到容器上的可选的外部 CSS 样式。可以用做给容器添加自定义的 ...

添加到容器上的可选的外部 CSS 样式。可以用做给容器或其所包含的其他组件按照CSS 标准添加自定义的 样式。 参看 Ext.Component.ctCls 。

注意: extraCls 默认为 ''除了以下几个分配了默认值的类以外：

  • Absolute Layout : 'x-abs-layout-item'
  • Box Layout : 'x-box-item'
  • Column Layout : 'x-column'
给上述类的默认CSS样式增加外部的CSS样式。例如，对于 ColumnLayout:
extraCls: 'x-column custom-class'

ContainerLayout
renderHidden : Boolean
如果为true，在渲染时隐藏所有包含的元素(默认值为 false)。
ContainerLayout

公共属性

Property Defined By
activeItem : Ext.Component
一个指向当前活动的Ext.Component 的引用。例如， if(myPanel.layout.activeItem.id == 'item-1') { ... } ...
一个指向当前活动的 Ext.Component的引用。例如，
if(myPanel.layout.activeItem.id == 'item-1') { ... }
activeItem 只能应用到一次只显示一个元素的布局中 (如 Ext.layout.AccordionLayout, Ext.layout.CardLayout 和Ext.layout.FitLayout)。只读属性。相关项：Ext.Container.activeItem.
ContainerLayout
fieldTpl : Ext.Template
此 Ext.Template 使用域渲染布局 (例如 Ext.layout.FormLayout)去构建一个完...
此 Ext.Template (例如 Ext.layout.FormLayout) 去构建一个完全被包装，标记和样式化的表单域的DOM结构 。需要一个默认的 Templateis, 但是此配置可能被重写以构建自定义的域结构。 此 template 拥有的值从 Ext.layout.FormLayout.getTemplateArgs返回。
ContainerLayout
if : Object
monitorResize 标签会很快的重命名以避免容器的版本混乱并关联...
monitorResize 标签会很快的重命名以避免容器的版本混乱 在这种情况下附加resize事件到容器和他的布局之间
ContainerLayout

公共方法

Method Defined By
parseMargins( Number|String v ) : Object
解析一个象征margin大小的数字或字符串成对象，支持 CSS样式的margin声明 (例如 10, ...
解析一个象征margin大小的数字或字符串成对象，支持 CSS样式的margin声明 (例如 10, "10", "10 10", "10 10 10" 和 "10 10 10 10" 都是有效地配置项而且会返回相同的结果)
参数:
  • v : Number|String
    The encoded margins
返回值:
  • Object
    An object with margin sizes for top, right, bottom and left
ContainerLayout

公共事件

该类没有公共事件。


ContainerLayout
    AnchorLayout
      FormLayout

Class Ext.layout.FormLayout

包: | Ext.layout
定义类的文件: | FormLayout.js
类: | FormLayout
继承自: | AnchorLayout

此布局管理器被特别设计用来 渲染和管理forms 的子组件。 它负责渲染Fields 的labels。

当一个容器被配置为 layout:'form' layout 配置项时，此布局管理器被使用， 并且一般情况下不必使用new关键字直接创建。 附加详情参见 Ext.Container.layout 。

在应用中，通常首选使用 FormPanel (默认情况下配置成FormLayout作为它的布局类) 因为它同时为loading(加载), validating(校验)和submitting(提交)表单 提供了内建的功能。

一个使用FormLayout布局管理器的 Container (例如 Ext.form.FormPanel 或者指定 layout:'form') 也可以接受如下指定布局的配置参数:

  • hideLabels
  • labelAlign
  • labelPad
  • labelSeparator
  • labelWidth

任何被FormLayout管理的组件(包括表单项)，都接受如下配置选项:

  • anchor

通过配置一个非空的fieldLabel ， 任何被FormLayout管理的组件都可以被渲染作一个表单项(联通一个指定的label)。 使用此方法配置的组件可以 使用如下选项进行配置，这将影响FormLayout渲染它们的方式:

  • clearCls
  • fieldLabel
  • hideLabel
  • itemCls
  • labelSeparator
  • labelStyle

示例用法:

// Required if showing validation messages
Ext.QuickTips.init();
// While you can create a basic Panel with layout:'form', practically
// you should usually use a FormPanel to also get its form functionality
// since it already creates a FormLayout internally.
var form = new Ext.form.FormPanel({
    title: 'Form Layout',
    bodyStyle: 'padding:15px',
    width: 350,
    defaultType: 'textfield',
    defaults: {
        // applied to each contained item
        width: 230,
        msgTarget: 'side'
    },
    items: [{
            fieldLabel: 'First Name',
            name: 'first',
            allowBlank: false,
            labelSeparator: ':' // override labelSeparator layout config
        },{
            fieldLabel: 'Last Name',
            name: 'last'
        },{
            fieldLabel: 'Email',
            name: 'email',
            vtype:'email'
        }, {
            xtype: 'textarea',
            hideLabel: true,     // override hideLabels layout config
            name: 'msg',
            anchor: '100% -53'
        }
    ],
    buttons: [
        {text: 'Save'},
        {text: 'Cancel'}
    ],
    layoutConfig: {
        labelSeparator: '~' // superseded by assignment below
    },
    // config options applicable to container when layout='form':
    hideLabels: false,
    labelAlign: 'left',   // or 'right' or 'top'

    labelSeparator: '>>', // takes precedence over layoutConfig value
    labelWidth: 65,       // defaults to 100
    labelPad: 8           // defaults to 5, must specify labelWidth to be honored
});

配置项

Config Options Defined By
anchor : String
即将被应用到容器中子 项目 的配置选项，此容器被当前容器管理...

即将被应用到容器中子 项目 的配置选项，此容器被当前容器管理 (例如，配置了layout:'anchor')。

此值告诉布局管理器如何将一个项目锚定到容器中。 添加到AnchorLayout的items接受一个 指定锚定位置的配置anchor参数， 它是一个包含两个值的字符串 :水平方向的锚定值和垂直方向的锚定值 (例如:'100% 50%')。 支持如下锚定值类型:

  • 百分比 : 1到100之间的任何值，表示一个百分比。
    第一个锚定值是组件在容器中所需占有的宽度百分比， 第二个是高度百分比。 例如:
    // 指定两个值
anchor: '100% 50%' // 使用容器的全部宽度和1/2高度渲染组件
// 指定一个值
anchor: '100%'// 宽度值；高度默认为auto
  • 偏移量 : 任何正数或负数值。
    这是一个原始位置，第一个锚定位置是从右侧开始计算的偏移位置， 第二个是从底部开始计算的偏移位置。例如:
    // 指定两个值
anchor: '-50 -100' // 在容器整个宽度的-50像素处，
                   // 整个高度的-100像素处渲染项目。
// one value specified
anchor: '-50'      // 锚定值被假定为到右侧的偏移量
                   // 到底部的偏移量将会默认为0
  • 侧边值 : 可用的值是 'right' (或 'r') 和 'bottom' (或 'b')。
    对于拥有特效的对象， 容器必须有一个固定的尺寸，或者有一个 在渲染时定义的anchorSize配置值 。
  • 混合值 :
    如果需要，锚定值也可以是混合型。 例如，如果需要以距离容器右侧边缘50像素，容器高度的75%渲染，使用:
                                                    anchor: '-50 75%'
AnchorLayout
defaultAnchor : String
如果没有为子项目指定anchor位置或者宽度时， 子容器中...
如果没有为子项目指定anchor位置或者宽度时， 子容器中所有组件的默认锚定位置。默认为'100%'。
AnchorLayout
extraCls : String
添加到容器上的可选的外部 CSS 样式。可以用做给容器添加自定义的 ...

添加到容器上的可选的外部 CSS 样式。可以用做给容器或其所包含的其他组件按照CSS 标准添加自定义的 样式。 参看 Ext.Component.ctCls 。

注意: extraCls 默认为 ''除了以下几个分配了默认值的类以外：

  • Absolute Layout : 'x-abs-layout-item'
  • Box Layout : 'x-box-item'
  • Column Layout : 'x-column'
给上述类的默认CSS样式增加外部的CSS样式。例如，对于 ColumnLayout:
extraCls: 'x-column custom-class'

ContainerLayout
fieldTpl : Ext.Template
一个已编译的 Ext.Template ，用来渲染完全包装的...
一个已编译的 Ext.Template ，用来渲染完全包装的、有标签以及样式的表单项。 默认为:

new Ext.Template(
    '<div class="x-form-item {itemCls}" tabIndex="-1">',
        '<label for="{id}" style="{labelStyle}" class="x-form-item-label">{label}{labelSeparator}</label>',
        '<div class="x-form-element" id="x-form-el-{id}" style="{elementStyle}">',
        '</div><div class="{clearCls}"></div>',
    '</div>'
);

在渲染表单项时，可以配置此属性以便创建一个不同的DOM结构。

模板内部参数描述遵循:

  • itemCls : String
    应用到最外层div包装器的CSS类，它包含了当前表单项label和表单项元素 (默认class为 'x-form-item'， itemCls也将被添加到其上)。 如果提供，表单项级别的itemCls将会覆盖 容器级别提供的默认itemCls。
  • id : String
    表单项的id
  • labelStyle : String
    一个CSS样式描述字符串，添加到当前表单项的label上(默认为 ''或者 layout的labelStyle值 )。
  • label : String
    当作此表单项标签显示的文本(默认为'')
  • labelSeparator : String
    当前表单项label文本之后显示的分隔符号(默认为一个冒号 ':' 或者 layout的 labelSeparator值)。 使用空字符串''可以隐藏分隔符。
  • elementStyle : String
    输入元素包装器的样式文本。
  • clearCls : String
    应用到特殊的清除div的CSS样式，此div被直接渲染在每个表单项包装器的后面 (默认为'x-form-clear-left')

另请参见 getTemplateArgs

FormLayout
labelSeparator : String
参见 Ext.form.FormPanel. labelSeparator。 容器级别对于此参数的配置优先。
FormLayout
renderHidden : Boolean
如果为true，在渲染时隐藏所有包含的元素(默认值为 false)。
ContainerLayout
trackLabels : Boolean
当表单项被隐藏时，true将会show/hide表单项的label。默认为 false。
FormLayout

公共属性

Property |  | Defined By
 | fieldTpl : Ext.Template 此 Ext.Template 使用域渲染布局 (例如 Ext.layout.FormLayout)去构建一个完... 此 Ext.Template (例如 Ext.layout.FormLayout) 去构建一个完全被包装，标记和样式化的表单域的DOM结构 。需要一个默认的 Templateis, 但是此配置可能被重写以构建自定义的域结构。 此 template 拥有的值从 Ext.layout.FormLayout.getTemplateArgs返回。 | ContainerLayout
 | if : Object monitorResize 标签会很快的重命名以避免容器的版本混乱并关联... monitorResize 标签会很快的重命名以避免容器的版本混乱 在这种情况下附加resize事件到容器和他的布局之间 | ContainerLayout
 | labelStyle : String 只读。CSS样式描述字符串，添加到当前布局中的表单项label... 只读。CSS样式描述字符串，添加到当前布局中的表单项label， 如果没有 通过每个包含的表单项指定。 | FormLayout

公共方法

Method Defined By
getTemplateArgs ( (Ext.form.Field field ) : Object
提供模板参数，用来渲染完全包装的、有标签以及样式的表单项。...

提供模板参数，用来渲染完全包装的、有标签以及样式的表单项。

此方法返回一个hash对象，包含了布局管理器的 fieldTpl 所使用的参数，用来正确创建一个完全包装的、有标签以及样式的表单项。 可以覆盖此方法以创建定制的布局。 必须返回的参数是:

  • itemCls : String
    应用到最外层div包装器的CSS类，它包含了当前表单项label和表单项元素 (默认class为 'x-form-item'， itemCls也将被添加到其上)。 如果提供，表单项级别的itemCls将会覆盖 容器级别提供的默认itemCls。
  • id : String
    表单项的id
  • labelStyle : String
    一个CSS样式描述字符串，添加到当前表单项的label上(默认为 ''或者 layout的labelStyle值 )。
  • label : String
    当作此表单项标签显示的文本(默认为表单项所配置的fieldLabel属性)
  • labelSeparator : String
    当前表单项label文本之后显示的分隔符号(默认为一个冒号 ':' 或者 layout的 labelSeparator值)。 使用空字符串''可以隐藏分隔符。
  • elementStyle : String
    输入元素包装器的样式文本。
  • clearCls : String
    应用到特殊的清除div的CSS样式，此div被直接渲染在每个表单项包装器的后面 (默认为'x-form-clear-left')
参数:
  • field : (Ext.form.Field
    被渲染的 Field 。
返回值:
  • Object
    一个hash对象，包含了渲染Field所必须的参数。
FormLayout
parseMargins( Number|String v ) : Object
解析一个象征margin大小的数字或字符串成对象，支持 CSS样式的margin声明 (例如 10, ...
解析一个象征margin大小的数字或字符串成对象，支持 CSS样式的margin声明 (例如 10, "10", "10 10", "10 10 10" 和 "10 10 10 10" 都是有效地配置项而且会返回相同的结果)
参数:
  • v : Number|String
    The encoded margins
返回值:
  • Object
    An object with margin sizes for top, right, bottom and left
ContainerLayout

公共事件

该类没有公共事件。


ContainerLayout
    BoxLayout
      HBoxLayout

Class Ext.layout.HBoxLayout

包: | Ext.layout
定义类的文件: | BoxLayout.js
类: | HBoxLayout
继承自: | BoxLayout

一个在容器中按照水平方向布置项目的布局。 此布局在包含一个数字 flex 配置项的 子项目之间分割可用水平空间。

通过配置 align 选项，此布局也可以用来设置子项目的高度。

配置项

Config Options Defined By
align : String
控制容器中的子项目如何对齐。 此参数可接受的配置值为...
控制容器中的子项目如何对齐。 此参数可接受的配置值为:
  • top : Default
    子项目被布置在容器垂直方向的顶部
  • middle :
    子项目被布置在容器垂直方向的中部
  • stretch :
    子项目在垂直方向上被延长，充满容器的高度
  • stretchmax :
    子项目在垂直方向上被延长为最大项目的高度。
HBoxLayout
defaultMargins : Object
如果包含的某个项目没有指定margins属性， 此参数的默认margins值将会被设置到每个项目...

如果包含的某个项目没有指定margins属性， 此参数的默认margins值将会被设置到每个项目。

此参数可以指定为一个对象，包含需要设置的margins，格式:

{
    top: (top margin),
    right: (right margin),
    bottom: (bottom margin),
    left: (left margin)
}

此参数也可以指定为一个字符串，包含以空格分隔的数值。 每个值对应的侧边顺序与CSS处理margin值对应:

  • 如果只有一个值，应用到所有边。
  • 如果有两个值，顶部和底部边被设置为第一个值，左侧和右侧边被设置为第二个值。
  • 如果有三个值，顶部被设置为第一个值， 左侧和右侧被设置为第二个值，底部被设置为第三个值。
  • 如果有四个值，它们分别被设置到上、右、下、左四边(译者注：从顶部开始顺时针转)。

默认为:

                                {top:0, right:0, bottom:0, left:0}
BoxLayout
extraCls : String
添加到容器上的可选的外部 CSS 样式。可以用做给容器添加自定义的 ...

添加到容器上的可选的外部 CSS 样式。可以用做给容器或其所包含的其他组件按照CSS 标准添加自定义的 样式。 参看 Ext.Component.ctCls 。

注意: extraCls 默认为 ''除了以下几个分配了默认值的类以外：

  • Absolute Layout : 'x-abs-layout-item'
  • Box Layout : 'x-box-item'
  • Column Layout : 'x-column'
给上述类的默认CSS样式增加外部的CSS样式。例如，对于 ColumnLayout:
extraCls: 'x-column custom-class'

ContainerLayout
flex : Number
此配置选项将被应用到容器中的子项目，此容器...
此配置选项将被应用到容器中的子项目，此容器 被当前布局管理。 每个拥有flex参数的子项目 都将被水平折叠， 根据每个项目的 相关的 flex值与所有项目总和的比例， 任何拥有 flex = 0或者 flex = undefined 的子项目都将不会被'flexed' (初始的尺寸不会被改变)。
HBoxLayout
pack : String
控制如何将容器中的子项目装在一起。 此属性可接受的配置值是...
控制如何将容器中的子项目装在一起。 此属性可接受的配置值是:
  • start : Default
    子项目在容器的左侧被装在一起
  • center :
    子项目在容器的中间宽度被装在一起
  • end :
    子项目在容器的右侧被装在一起
HBoxLayout
padding : String
设置padding，被应用到当前布局管理的所有子项目。此属性必须指定为一个字符串...

设置padding，被应用到当前布局管理的所有子项目。

此属性必须指定为一个字符串，包含以空格分隔的padding数值。 每个值对应的侧边顺序与CSS处理padding值对应:

  • 如果只有一个值，应用到所有边。
  • 如果有两个值，顶部和底部边被设置为第一个值，左侧和右侧边被设置为第二个值。
  • 如果有三个值，顶部被设置为第一个值， 左侧和右侧被设置为第二个值，底部被设置为第三个值。
  • 如果有四个值，它们分别被设置到上、右、下、左四边(译者注：从顶部开始顺时针转)。

默认为: "0"

BoxLayout
renderHidden : Boolean
如果为true，在渲染时隐藏所有包含的元素(默认值为 false)。
ContainerLayout

公共属性

Property Defined By
activeItem : Ext.Component
一个指向当前活动的Ext.Component 的引用。例如， if(myPanel.layout.activeItem.id == 'item-1') { ... } ...
一个指向当前活动的 Ext.Component的引用。例如，
if(myPanel.layout.activeItem.id == 'item-1') { ... }
activeItem 只能应用到一次只显示一个元素的布局中 (如 Ext.layout.AccordionLayout, Ext.layout.CardLayout 和Ext.layout.FitLayout)。只读属性。相关项：Ext.Container.activeItem.
ContainerLayout
fieldTpl : Ext.Template
此 Ext.Template 使用域渲染布局 (例如 Ext.layout.FormLayout)去构建一个完...
此 Ext.Template (例如 Ext.layout.FormLayout) 去构建一个完全被包装，标记和样式化的表单域的DOM结构 。需要一个默认的 Templateis, 但是此配置可能被重写以构建自定义的域结构。 此 template 拥有的值从 Ext.layout.FormLayout.getTemplateArgs返回。
ContainerLayout
if : Object
monitorResize 标签会很快的重命名以避免容器的版本混乱并关联...
monitorResize 标签会很快的重命名以避免容器的版本混乱 在这种情况下附加resize事件到容器和他的布局之间
ContainerLayout

公共方法

Method Defined By
parseMargins( Number|String v ) : Object
解析一个象征margin大小的数字或字符串成对象，支持 CSS样式的margin声明 (例如 10, ...
解析一个象征margin大小的数字或字符串成对象，支持 CSS样式的margin声明 (例如 10, "10", "10 10", "10 10 10" 和 "10 10 10 10" 都是有效地配置项而且会返回相同的结果)
参数:
  • v : Number|String
    The encoded margins
返回值:
  • Object
    An object with margin sizes for top, right, bottom and left
ContainerLayout
updateChildBoxes ( Array boxes ) : void
调整每个子组件的位置和大小
调整每个子组件的位置和大小
参数:
  • boxes : Array
    盒子尺寸
返回值:
  • void
BoxLayout

公共事件

该类没有公共事件。


ContainerLayout
    MenuLayout

Class Ext.layout.MenuLayout

包: | Ext.layout
定义类的文件: | MenuLayout.js
类: | MenuLayout
继承自: | ContainerLayout

被Ext.menu.Menu 使用的布局管理器。 一般情况下，没有必要直接使用该类。

配置项

Config Options Defined By
extraCls : String
添加到容器上的可选的外部 CSS 样式。可以用做给容器添加自定义的 ...

添加到容器上的可选的外部 CSS 样式。可以用做给容器或其所包含的其他组件按照CSS 标准添加自定义的 样式。 参看 Ext.Component.ctCls 。

注意: extraCls 默认为 ''除了以下几个分配了默认值的类以外：

  • Absolute Layout : 'x-abs-layout-item'
  • Box Layout : 'x-box-item'
  • Column Layout : 'x-column'
给上述类的默认CSS样式增加外部的CSS样式。例如，对于 ColumnLayout:
extraCls: 'x-column custom-class'

ContainerLayout
renderHidden : Boolean
如果为true，在渲染时隐藏所有包含的元素(默认值为 false)。
ContainerLayout

公共属性

Property Defined By
activeItem : Ext.Component
一个指向当前活动的Ext.Component 的引用。例如， if(myPanel.layout.activeItem.id == 'item-1') { ... } ...
一个指向当前活动的 Ext.Component的引用。例如，
if(myPanel.layout.activeItem.id == 'item-1') { ... }
activeItem 只能应用到一次只显示一个元素的布局中 (如 Ext.layout.AccordionLayout, Ext.layout.CardLayout 和Ext.layout.FitLayout)。只读属性。相关项：Ext.Container.activeItem.
ContainerLayout
fieldTpl : Ext.Template
此 Ext.Template 使用域渲染布局 (例如 Ext.layout.FormLayout)去构建一个完...
此 Ext.Template (例如 Ext.layout.FormLayout) 去构建一个完全被包装，标记和样式化的表单域的DOM结构 。需要一个默认的 Templateis, 但是此配置可能被重写以构建自定义的域结构。 此 template 拥有的值从 Ext.layout.FormLayout.getTemplateArgs返回。
ContainerLayout
if : Object
monitorResize 标签会很快的重命名以避免容器的版本混乱并关联...
monitorResize 标签会很快的重命名以避免容器的版本混乱 在这种情况下附加resize事件到容器和他的布局之间
ContainerLayout

公共方法

Method Defined By
parseMargins( Number|String v ) : Object
解析一个象征margin大小的数字或字符串成对象，支持 CSS样式的margin声明 (例如 10, ...
解析一个象征margin大小的数字或字符串成对象，支持 CSS样式的margin声明 (例如 10, "10", "10 10", "10 10 10" 和 "10 10 10 10" 都是有效地配置项而且会返回相同的结果)
参数:
  • v : Number|String
    The encoded margins
返回值:
  • Object
    An object with margin sizes for top, right, bottom and left
ContainerLayout

公共事件

该类没有公共事件。


ContainerLayout
    TableLayout

Class Ext.layout.TableLayout

包: | Ext.layout
定义类的文件: | TableLayout.js
类: | TableLayout
继承自: | ContainerLayout

此布局允许你方便地向一个HTML表格中渲染内容。 可以指定列总数，并且可以用rowspan和colspan来在表格内部创建 复杂的布局。 该类被期望通过layout:'table' Ext.Container.layout 选项进行继承或者创建，并且一般情况下没有必要通过new关键字直接创建。

注意，当通过配置项创建布局时， 必须通过Ext.Container.layoutConfig 对象传递布局描述配置参数，这将在内部被应用到布局上。 在TableLayout的情况下，唯一合法的配置参数是 columns。 但是，添加到TableLayout中的项目可以提供如下表格-特定的配置参数:

  • rowspan 应用到包含项目的表格单元上。
  • colspan 应用到包含项目的表格单元上。
  • cellId 一个id，应用到包含项目的表格单元上。
  • cellCls 一个CSS类名，添加到包含项目的表格单元上。

创建一个TableLayout的基本概念与创建一个标准的HTML表格概念上非常相似。 你简单地添加每个你想要包含的panel(或者'cell')， 同时指定任何span参数，作为特殊的配置参数的rowspan和colspan，与它们的HTML 副本的运作方式极其相似。 胜于明确地创建和嵌套行和列，就像你在HTML中做的那样，你在layoutConfig中 简单地指定列的总数，然后按照它们的自然顺序，开始从左到右、从上到下添加panel。 布局将会根据列数自动计算rowspans和colspans，以及如何定位表格中的每个panel。 就像在HTML表格中一样，你的rowspans和colspans必须能在你整个的布局中 正确地加在一起，否则你将会丢失额外的cells! 示例用法:

// This code will generate a layout table that is 3 columns by 2 rows
// with some spanning included.  The basic layout will be:
// +--------+-----------------+
// |   A    |   B             |
// |        |--------+--------|
// |        |   C    |   D    |
// +--------+--------+--------+
var table = new Ext.Panel({
    title: 'Table Layout',
    layout:'table',
    defaults: {
        // applied to each contained panel
        bodyStyle:'padding:20px'
    },
    layoutConfig: {
        // The total column count must be specified here
        columns: 3
    },
    items: [{
        html: '<p>Cell A content</p>',
        rowspan: 2
    },{
        html: '<p>Cell B content</p>',
        colspan: 2
    },{
        html: '<p>Cell C content</p>',
        cellCls: 'highlight'
    },{
        html: '<p>Cell D content</p>'
    }]
});

配置项

Config Options Defined By
columns : Number
此布局的表格中需要创建的所有列的总数。 如果没有指定...
此布局的表格中需要创建的所有列的总数。 如果没有指定，所有添加到此布局中的组件都将被 渲染到一个单独的行当中，每列一个组件。
TableLayout
extraCls : String
添加到容器上的可选的外部 CSS 样式。可以用做给容器添加自定义的 ...

添加到容器上的可选的外部 CSS 样式。可以用做给容器或其所包含的其他组件按照CSS 标准添加自定义的 样式。 参看 Ext.Component.ctCls 。

注意: extraCls 默认为 ''除了以下几个分配了默认值的类以外：

  • Absolute Layout : 'x-abs-layout-item'
  • Box Layout : 'x-box-item'
  • Column Layout : 'x-column'
给上述类的默认CSS样式增加外部的CSS样式。例如，对于 ColumnLayout:
extraCls: 'x-column custom-class'

ContainerLayout
renderHidden : Boolean
如果为true，在渲染时隐藏所有包含的元素(默认值为 false)。
ContainerLayout
tableAttrs : Object
一个包含参数的对象，被添加到 DomHelper 描述中，用来创建布局的...

一个包含参数的对象，被添加到 DomHelper 描述中，用来创建布局的 <表格>元素。例如:

{
    xtype: 'panel',
    layout: 'table',
    layoutConfig: {
        tableAttrs: {
            style: {
                width: '100%'
            }
        },
        columns: 3
    }
}
TableLayout

公共属性

Property |  | Defined By
 | fieldTpl : Ext.Template 此 Ext.Template 使用域渲染布局 (例如 Ext.layout.FormLayout)去构建一个完... 此 Ext.Template (例如 Ext.layout.FormLayout) 去构建一个完全被包装，标记和样式化的表单域的DOM结构 。需要一个默认的 Templateis, 但是此配置可能被重写以构建自定义的域结构。 此 template 拥有的值从 Ext.layout.FormLayout.getTemplateArgs返回。 | ContainerLayout
 | if : Object monitorResize 标签会很快的重命名以避免容器的版本混乱并关联... monitorResize 标签会很快的重命名以避免容器的版本混乱 在这种情况下附加resize事件到容器和他的布局之间 | ContainerLayout

公共方法

Method Defined By
parseMargins( Number|String v ) : Object
解析一个象征margin大小的数字或字符串成对象，支持 CSS样式的margin声明 (例如 10, ...
解析一个象征margin大小的数字或字符串成对象，支持 CSS样式的margin声明 (例如 10, "10", "10 10", "10 10 10" 和 "10 10 10 10" 都是有效地配置项而且会返回相同的结果)
参数:
  • v : Number|String
    The encoded margins
返回值:
  • Object
    An object with margin sizes for top, right, bottom and left
ContainerLayout

公共事件

该类没有公共事件。


ContainerLayout
    ToolbarLayout

Class Ext.layout.ToolbarLayout

包: | Ext.layout
定义类的文件: | ToolbarLayout.js
类: | ToolbarLayout
继承自: | ContainerLayout
Ext.Toolbar所使用的布局管理器。 该类被Toolbars专门使用，并且一般情况下不应该在其它类中使用。

配置项

Config Options Defined By
extraCls : String
添加到容器上的可选的外部 CSS 样式。可以用做给容器添加自定义的 ...

添加到容器上的可选的外部 CSS 样式。可以用做给容器或其所包含的其他组件按照CSS 标准添加自定义的 样式。 参看 Ext.Component.ctCls 。

注意: extraCls 默认为 ''除了以下几个分配了默认值的类以外：

  • Absolute Layout : 'x-abs-layout-item'
  • Box Layout : 'x-box-item'
  • Column Layout : 'x-column'
给上述类的默认CSS样式增加外部的CSS样式。例如，对于 ColumnLayout:
extraCls: 'x-column custom-class'

ContainerLayout
renderHidden : Boolean
如果为true，在渲染时隐藏所有包含的元素(默认值为 false)。
ContainerLayout

公共属性

Property Defined By
activeItem : Ext.Component
一个指向当前活动的Ext.Component 的引用。例如， if(myPanel.layout.activeItem.id == 'item-1') { ... } ...
一个指向当前活动的 Ext.Component的引用。例如，
if(myPanel.layout.activeItem.id == 'item-1') { ... }
activeItem 只能应用到一次只显示一个元素的布局中 (如 Ext.layout.AccordionLayout, Ext.layout.CardLayout 和Ext.layout.FitLayout)。只读属性。相关项：Ext.Container.activeItem.
ContainerLayout
fieldTpl : Ext.Template
此 Ext.Template 使用域渲染布局 (例如 Ext.layout.FormLayout)去构建一个完...
此 Ext.Template (例如 Ext.layout.FormLayout) 去构建一个完全被包装，标记和样式化的表单域的DOM结构 。需要一个默认的 Templateis, 但是此配置可能被重写以构建自定义的域结构。 此 template 拥有的值从 Ext.layout.FormLayout.getTemplateArgs返回。
ContainerLayout
hiddenItems : Array 持用所有项目的引用，这些项目因为没有足够的空间渲染而被隐藏。 这些项目将会在下来菜单中出现。
ToolbarLayout
if : Object
monitorResize 标签会很快的重命名以避免容器的版本混乱并关联...
monitorResize 标签会很快的重命名以避免容器的版本混乱 在这种情况下附加resize事件到容器和他的布局之间
ContainerLayout
noItemsMenuText : String 如果没有项目显示时， 渲染到工具栏溢出菜单中的HTML标签
ToolbarLayout
triggerWidth : Number 在Toolbar最右侧尽头为菜单触发器分配的宽度
ToolbarLayout

公共方法

Method Defined By
parseMargins( Number|String v ) : Object
解析一个象征margin大小的数字或字符串成对象，支持 CSS样式的margin声明 (例如 10, ...
解析一个象征margin大小的数字或字符串成对象，支持 CSS样式的margin声明 (例如 10, "10", "10 10", "10 10 10" 和 "10 10 10 10" 都是有效地配置项而且会返回相同的结果)
参数:
  • v : Number|String
    The encoded margins
返回值:
  • Object
    An object with margin sizes for top, right, bottom and left
ContainerLayout

公共事件

该类没有公共事件。


ContainerLayout
    BoxLayout
      VBoxLayout

Class Ext.layout.VBoxLayout

包: | Ext.layout
定义类的文件: | BoxLayout.js
类: | VBoxLayout
继承自: | BoxLayout

一种在容器中垂直布置项目的布局。 此布局在包含一个数字 flex 配置项的 子项目之间分割可用垂直空间。

通过配置 align 选项，此布局也可以用来设置子项目的宽度。

配置项

Config Options Defined By
align : String
控制容器中的子项目如何对齐。 此参数可接受的配置值为:...
控制容器中的子项目如何对齐。 此参数可接受的配置值为:
  • left : Default
    子项目被布置在容器水平方向的左侧
  • center :
    子项目被布置在容器垂直方向的中部
  • stretch :
    子项目在水平方向上被延长，充满容器的宽度
  • stretchmax :
    子项目在水平方向上被延长为最大项目的高度。
VBoxLayout
defaultMargins : Object
如果包含的某个项目没有指定margins属性， 此参数的默认margins值将会被设置到每个项目...

如果包含的某个项目没有指定margins属性， 此参数的默认margins值将会被设置到每个项目。

此参数可以指定为一个对象，包含需要设置的margins，格式:

{
    top: (top margin),
    right: (right margin),
    bottom: (bottom margin),
    left: (left margin)
}

此参数也可以指定为一个字符串，包含以空格分隔的数值。 每个值对应的侧边顺序与CSS处理margin值对应:

  • 如果只有一个值，应用到所有边。
  • 如果有两个值，顶部和底部边被设置为第一个值，左侧和右侧边被设置为第二个值。
  • 如果有三个值，顶部被设置为第一个值， 左侧和右侧被设置为第二个值，底部被设置为第三个值。
  • 如果有四个值，它们分别被设置到上、右、下、左四边(译者注：从顶部开始顺时针转)。

默认为:

                                {top:0, right:0, bottom:0, left:0}
BoxLayout
extraCls : String
添加到容器上的可选的外部 CSS 样式。可以用做给容器添加自定义的 ...

添加到容器上的可选的外部 CSS 样式。可以用做给容器或其所包含的其他组件按照CSS 标准添加自定义的 样式。 参看 Ext.Component.ctCls 。

注意: extraCls 默认为 ''除了以下几个分配了默认值的类以外：

  • Absolute Layout : 'x-abs-layout-item'
  • Box Layout : 'x-box-item'
  • Column Layout : 'x-column'
给上述类的默认CSS样式增加外部的CSS样式。例如，对于 ColumnLayout:
extraCls: 'x-column custom-class'

ContainerLayout
flex : Number
此配置选项将被应用到容器中的子项目，此容器 被当前布局管理。...
此配置选项将被应用到容器中的子项目，此容器 被当前布局管理。 每个拥有flex参数的子项目 都将被垂直伸缩， 根据每个项目的 相关的 flex值与所有项目总和的比例， 任何拥有 flex = 0或者 flex = undefined 的子项目都将不会被'flexed' (初始的尺寸不会被改变)。
VBoxLayout
pack : String
控制如何将容器中的子项目装在一起。 此属性可接受的配置值是:...
控制如何将容器中的子项目装在一起。 此属性可接受的配置值是:
  • start : Default
    子项目在容器的顶部被装在一起
  • center :
    子项目在容器的中间高度被装在一起
  • end :
    子项目在容器的底部被装在一起
VBoxLayout
padding : String
设置padding，被应用到当前布局管理的所有子项目。此属性必须指定为一个字符串...

设置padding，被应用到当前布局管理的所有子项目。

此属性必须指定为一个字符串，包含以空格分隔的padding数值。 每个值对应的侧边顺序与CSS处理padding值对应:

  • 如果只有一个值，应用到所有边。
  • 如果有两个值，顶部和底部边被设置为第一个值，左侧和右侧边被设置为第二个值。
  • 如果有三个值，顶部被设置为第一个值， 左侧和右侧被设置为第二个值，底部被设置为第三个值。
  • 如果有四个值，它们分别被设置到上、右、下、左四边(译者注：从顶部开始顺时针转)。

默认为: "0"

BoxLayout
renderHidden : Boolean
如果为true，在渲染时隐藏所有包含的元素(默认值为 false)。
ContainerLayout

公共属性

Property Defined By
activeItem : Ext.Component
一个指向当前活动的Ext.Component 的引用。例如， if(myPanel.layout.activeItem.id == 'item-1') { ... } ...
一个指向当前活动的 Ext.Component的引用。例如，
if(myPanel.layout.activeItem.id == 'item-1') { ... }
activeItem 只能应用到一次只显示一个元素的布局中 (如 Ext.layout.AccordionLayout, Ext.layout.CardLayout 和Ext.layout.FitLayout)。只读属性。相关项：Ext.Container.activeItem.
ContainerLayout
fieldTpl : Ext.Template
此 Ext.Template 使用域渲染布局 (例如 Ext.layout.FormLayout)去构建一个完...
此 Ext.Template (例如 Ext.layout.FormLayout) 去构建一个完全被包装，标记和样式化的表单域的DOM结构 。需要一个默认的 Templateis, 但是此配置可能被重写以构建自定义的域结构。 此 template 拥有的值从 Ext.layout.FormLayout.getTemplateArgs返回。
ContainerLayout
if : Object
monitorResize 标签会很快的重命名以避免容器的版本混乱并关联...
monitorResize 标签会很快的重命名以避免容器的版本混乱 在这种情况下附加resize事件到容器和他的布局之间
ContainerLayout

公共方法

Method Defined By
parseMargins( Number|String v ) : Object
解析一个象征margin大小的数字或字符串成对象，支持 CSS样式的margin声明 (例如 10, ...
解析一个象征margin大小的数字或字符串成对象，支持 CSS样式的margin声明 (例如 10, "10", "10 10", "10 10 10" 和 "10 10 10 10" 都是有效地配置项而且会返回相同的结果)
参数:
  • v : Number|String
    The encoded margins
返回值:
  • Object
    An object with margin sizes for top, right, bottom and left
ContainerLayout
updateChildBoxes ( Array boxes ) : void
调整每个子组件的位置和大小
调整每个子组件的位置和大小
参数:
  • boxes : Array
    盒子尺寸
返回值:
  • void
BoxLayout

公共事件

该类没有公共事件。


Column
    BooleanColumn

Class Ext.list.BooleanColumn

包: | Ext.list
定义类的文件: | Column.js
类: | BooleanColumn
继承自: | Column

一个列定义类，根据format 字符串渲染布尔型型数据项。 更多细节参见Ext.list.Column 的xtype 配置项。

配置项

Config Options |  | Defined By
 | align : String 设置列中CSS的text-align参数。默认为'left'。 | Column
 | cls : String 可选。此选项可以用来为每列中每一行的单元格添加CSS样式类。 | Column
 | dataIndex : String 必须。 ListViews的Ext.data.Store的 Ext.data.Record 定义中定义的字段名... 必须。 ListViews的Ext.data.Store的 Ext.data.Record 定义中定义的字段名，用来渲染列值。 | Column
 | falseText : String 当列值为否定型(但不是undefined)时renderer返回的字符串(默认为'false')。 | BooleanColumn
 | header : String 可选。需要被用作innerHTML的标题文本(接受html标签)，在ListView中显示。... 可选。需要被用作innerHTML的标题文本(接受html标签)，在ListView中显示。 注意:如需一个可以被点击的标题而没有显示的文本，使用 ' '。 | Column
 | tpl : String 可选。指定一个字符串 作为Ext.XTemplate 的配置字符串传递... 可选。指定一个字符串 作为Ext.XTemplate 的配置字符串传递。 默认情况下，使用dataIndex在内部隐含创建一个 Ext.XTemplate。 | Column
 | trueText : String 当列值不为否定型时renderer返回的字符串(默认为'true')。 | BooleanColumn
 | undefinedText : String 当列值为undefined时renderer返回的字符串(默认为 ' ')。 | BooleanColumn
 | width : Number 可选。当前列占容器宽度的百分比。如果列没有指定宽度，将会平均分配容器100%的宽度。... 可选。当前列占容器宽度的百分比。如果列没有指定宽度，将会平均分配容器100%的宽度。 如需简单地利用容器的全部宽度，至少留下一列为undefined。注意，如果你不想占满容器 的全部宽度，每一列的宽度都需要明确定义。 | Column

公共属性

该类没有公共属性。

公共方法

该类没有公共方法。

公共事件

该类没有公共事件。


Class Ext.list.Column

包: | Ext.list
定义类的文件: | Column.js
类: | Column
子类: | BooleanColumn, DateColumn, NumberColumn
继承自: | Object

该类包装了列定义数据，可以在ListView 初始化时使用。

如果提供了不同渲染数据方式的子类，该类以不变的方式渲染传递的数据列，并且总是 被用作文本列。

配置项

Config Options |  | Defined By
 | align : String 设置列中CSS的text-align参数。默认为'left'。 | Column
 | cls : String 可选。此选项可以用来为每列中每一行的单元格添加CSS样式类。 | Column
 | dataIndex : String 必须。 ListViews的Ext.data.Store的 Ext.data.Record 定义中定义的字段名... 必须。 ListViews的Ext.data.Store的 Ext.data.Record 定义中定义的字段名，用来渲染列值。 | Column
 | header : String 可选。需要被用作innerHTML的标题文本(接受html标签)，在ListView中显示。... 可选。需要被用作innerHTML的标题文本(接受html标签)，在ListView中显示。 注意:如需一个可以被点击的标题而没有显示的文本，使用 ' '。 | Column
 | tpl : String 可选。指定一个字符串 作为Ext.XTemplate 的配置字符串传递... 可选。指定一个字符串 作为Ext.XTemplate 的配置字符串传递。 默认情况下，使用dataIndex在内部隐含创建一个 Ext.XTemplate。 | Column
 | width : Number 可选。当前列占容器宽度的百分比。如果列没有指定宽度，将会平均分配容器100%的宽度。... 可选。当前列占容器宽度的百分比。如果列没有指定宽度，将会平均分配容器100%的宽度。 如需简单地利用容器的全部宽度，至少留下一列为undefined。注意，如果你不想占满容器 的全部宽度，每一列的宽度都需要明确定义。 | Column

公共属性

该类没有公共属性。

公共方法

该类没有公共方法。

公共事件

该类没有公共事件。


Observable
    ColumnResizer

Class Ext.list.ColumnResizer

包: | Ext.list
定义类的文件: | ColumnResizer.js
类: | ColumnResizer
继承自: | Observable

支持Ext.list.ListView类

配置项

Config Options Defined By
listeners : Object
一个包含一个或多个事件处理器的配置对象，会在初始化的时候被添加到目标对象上...

一个包含一个或多个事件处理器的配置对象，会在初始化的时候被添加到目标对象上。 该配置对象应该是一个有效的监听器配置对象就像 addListener例子中指定的一样可一次附加多个处理器。

ExtJs Components上的DOM事件

一些 ExtJs Component 类导出时会选择一些DOM事件(例如 "click", "mouseover" 等等), 这通常只是在有额外的值可以被添加时发生。例如DataView类的 click事件会传递被点击的节点。也可以直接在Component的HTMLElementevent上访问DOM事件，但必需在Component被渲染后监听器才能添加到Element 上。可以按照以下步骤添加插件:

// 插件会用一个监听器配置对象进行配置。
//该组件会被添加到所有处理方法的参数列表上。
Ext.DomObserver = Ext.extend(Object, {
    constructor: function(config) {
        this.listeners = config.listeners ? config.listeners : config;
    },

    // 组件将自己传递进了插件的初始化方法里
    init: function(c) {
        var p, l = this.listeners;
        for (p in l) {
            if (Ext.isFunction(l[p])) {
                l[p] = this.createHandler(l[p], c);
            } else {
                l[p].fn = this.createHandler(l[p].fn, c);
            }
        }

        // 渲染后立即添加监听器到元素上
        c.render = c.render.createSequence(function() {
            var e = c.getEl();
            if (e) {
                e.on(l);
            }
        });
    },

    createHandler: function(fn, c) {
        return function(e) {
            fn.call(this, e, c);
        };
    }
});

var combo = new Ext.form.ComboBox({

    // 元素被点击后折叠
    plugins: [ new Ext.DomObserver({
        click: function(evt, comp) {
            comp.collapse();
        }
    })],
    store: myStore,
    typeAhead: true,
    mode: 'local',
    triggerAction: 'all'
});

Observable
minPct : Number
分配给每个列最低的比例(默认为 .05)
ColumnResizer

公共属性

该类没有公共属性。

公共方法

Method Defined By
ColumnResizer ( Object config )
参数:
  • config : Object
返回值:
  • void
ColumnResizer
addEvents( Object|String o, string Optional. ) : void
添加指定的事件到事件列表上，事件会被该Observable触发。
添加指定的事件到事件列表上，事件会被该Observable触发。
参数:
  • o : Object|String
    以事件名作为属性true作为值的对象 或者当多个事件名被分开的传递时则为第一个事件名。
  • Optional. : string
    事件名被分开的传递时则为事件名。 用法:
    this.addEvents('storeloaded', 'storecleared');
返回值:
  • void
Observable
addListener( String eventName, Function handler, [Object scope], [Object options] ) : void
给对象添加事件处理器。
给对象添加事件处理器。
参数:
  • eventName : String
    监听的事件名。
  • handler : Function
    事件调用的方法
  • scope : Object
    （可选）处理方法执行的作用域 (this的引用 reference)。 如果被忽略。默认为触发事件的对象。
  • options : Object
    （可选）包含处理器配置和属性的对象。 可能包含以下的属性:
    • scope : Object
      处理方法执行的作用域(this的引用) 。 如果被忽略。默认为触发事件的对象。
    • delay : Number
      在触发事件后延迟调用处理器的毫秒数。
    • single : Boolean
      如果为True则添加一个处理器来处理下一次的事件触发（仅一次），然后移除自己。
    • buffer : Number
      使得处理器延迟指定毫秒数后预定的运行在 一个Ext.util.DelayedTask中 。 如果事件在时间内再一次被触发，原始的处理器不会被调用，但是新的处理器会预定的在他的位置上。
    • target : Observable
      如果事件在目标的Observable上触发则仅仅调用处理器， 否则 事件会从子类的Observable上冒泡

    组合选项
    使用这些选项参数,可能会组合出不同类型的监听器：

    一个延迟的，一次性的监听器。

    myDataView.on('click', this.onClick, this, {
single: true,
delay: 100
});

    一次调用附加多个处理器
    该方法同样支持传递一个包含指定的多个处理器的属性的配置对象参数。

    myGridPanel.on({
'click' : {
    fn: this.onClick,
    scope: this,
    delay: 100
},
'mouseover' : {
    fn: this.onMouseOver,
    scope: this
},
'mouseout' : {
    fn: this.onMouseOut,
    scope: this
}
});

    或者一个简写的语法：

    myGridPanel.on({
'click' : this.onClick,
'mouseover' : this.onMouseOver,
'mouseout' : this.onMouseOut,
 scope: this
});
返回值:
  • void
Observable
enableBubble( String/Array events ) :void
是否现在使得事件会被该Observable触发并调用 this.getBubbleTarget()方法在拥有者的继承树...

是否现在使得事件会被该Observable触发并调用 this.getBubbleTarget()方法在拥有者的继承树中冒泡。Observable的基础类中没有该方法的实现。

该方法一般被Ext.Components用来冒泡事件到拥有者的容器。参看Ext.Component.getBubbleTarget默认的实现 在Ext.Component中返回组件的直接拥有者。但是如果需要的是一个已知的目标，该方法可以被重写来更快的访问需求的目标。

例子:

Ext.override(Ext.form.Field, {
    // 添加方法到Field的initComponent上改变事件为冒泡
    initComponent : Ext.form.Field.prototype.initComponent.createSequence(function() {
        this.enableBubble('change');
    }),

    // 我们知道我们想让Field的事件冒泡到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() {
            // 如果样式被修改标题会变红。
            myForm.header.setStyle('color', 'red');
        }
    }
});
参数:
  • events : String/Array
    冒泡的事件名，或事件名数组
返回值:
  • void
Observable
fireEvent( String eventName, Object... args ) : Boolean
用传入的参数触发指定的事件 (减去事件名)。 一个事件可以被设置为冒泡 Obse...

用传入的参数触发指定的事件 (减去事件名)。

一个事件可以被设置为冒泡到Observable父类继承树(参看 Ext.Component.getBubbleTarget) 调用enableBubble实现。

参数:
  • eventName : String
    触发的事件名。
  • args : Object...
    传递给处理器的可变长度参数。
返回值:
  • Boolean
    如果有任何的处理器返回false则返回false，否则返回true。
Observable
hasListener( String eventName ) : Boolean
检测对象是否包含指定事件的任何监听器
检测对象是否包含指定事件的任何监听器
参数:
  • eventName : String
    检测的事件名
返回值:
  • Boolean
    如果事件被监听则为true，否则为false
Observable
on( String eventName, Function handler, [Object scope], [Object options] ) : void
给对象添加事件处理器 (addListener的简写形式)
给对象添加事件处理器 (addListener的简写形式。)
参数:
  • eventName : String
    监听的事件类型
  • handler : Function
    事件调用的方法
  • scope : Object
    （可选）处理方法执行时的作用域 (this 的引用)。 如果被忽略。默认为触发事件的对象。
  • options : Object
    可选 包含处理器配置的对象。
返回值:
  • void
Observable
purgeListeners() : void
移除对象上所有的监听器
移除对象上所有的监听器
参数:
  • 无。
返回值:
  • void
Observable
relayEvents( Object o, Array events ) : void
从指定的Observable上传递选择的事件就好像被当前对象触发一样。
从指定的Observable上传递选择的事件就好像被当前对象触发一样。
参数:
  • o : Object
    该Observable上的事件被当前对象传递。
  • events : Array
    传递的数组名。
返回值:
  • void
Observable
removeListener( String eventName, Function handler, [Object scope] ) : void
删除一个事件处理器。
删除一个事件处理器。
参数:
  • eventName : String
    处理器关联的事件类型。
  • handler : Function
    移除的处理器。 这应该是传递到addListener里的方法的引用。
  • scope : Object
    （可选）处理器指定的初始作用域。
返回值:
  • void
Observable
resumeEvents() : void
重新开始触发事件。(参见suspendEvents) 如果事件以queueSuspended参数被挂起，则在事件被挂起时 ...
重新开始触发事件。(参见 suspendEvents) 如果事件以queueSuspended 参数被挂起，则在事件被挂起时触发的事件会被传递到所有的监听器上
参数:
  • 无。
返回值:
  • void
Observable
suspendEvents( Boolean queueSuspended ) : void
暂停触发所有的事件。 (参看resumeEvents)
暂停触发所有的事件。（参看 resumeEvents)
参数:
  • queueSuspended : Boolean
    如果传递为true则排列好暂停的事件使得在调用 resumeEvents 后再触发它们，而不是抛弃所有暂停的事件。
返回值:
  • void
Observable
un( String eventName, Function handler, [Object scope] ) : void
删除一个事件处理器(removeListener方法的简写形式)
删除一个事件处理器(removeListener方法的简写形式。)
参数:
  • eventName : String
    处理器关联的事件类型
  • handler : Function
    被删除的处理器 这应该是传入 addListener 中的方法的引用。
  • scope : Object
    （可选）为处理器指定的初始作用域。
返回值:
  • void
Observable

公共事件

该类没有公共事件。


Column
    DateColumn

Class Ext.list.DateColumn

包: | Ext.list
定义类的文件: | Column.js
类: | DateColumn
继承自: | Column

一个Column定义类，它将根据默认的时区或者 一个配置的format 渲染传入的日期。 更多细节，参见Ext.list.Column 的 xtype 配置选项。

配置项

Config Options |  | Defined By
 | align : String 设置列中CSS的text-align参数。默认为'left'。 | Column
 | cls : String 可选。此选项可以用来为每列中每一行的单元格添加CSS样式类。 | Column
 | dataIndex : String 必须。 ListViews的Ext.data.Store的 Ext.data.Record 定义中定义的字段名... 必须。 ListViews的Ext.data.Store的 Ext.data.Record 定义中定义的字段名，用来渲染列值。 | Column
 | header : String 可选。需要被用作innerHTML的标题文本(接受html标签)，在ListView中显示。... 可选。需要被用作innerHTML的标题文本(接受html标签)，在ListView中显示。 注意:如需一个可以被点击的标题而没有显示的文本，使用 ' '。 | Column
 | tpl : String 可选。指定一个字符串 作为Ext.XTemplate 的配置字符串传递... 可选。指定一个字符串 作为Ext.XTemplate 的配置字符串传递。 默认情况下，使用dataIndex在内部隐含创建一个 Ext.XTemplate。 | Column
 | width : Number 可选。当前列占容器宽度的百分比。如果列没有指定宽度，将会平均分配容器100%的宽度。... 可选。当前列占容器宽度的百分比。如果列没有指定宽度，将会平均分配容器100%的宽度。 如需简单地利用容器的全部宽度，至少留下一列为undefined。注意，如果你不想占满容器 的全部宽度，每一列的宽度都需要明确定义。 | Column

公共属性

该类没有公共属性。

公共方法

该类没有公共方法。

公共事件

该类没有公共事件。


Observable
    Component
      BoxComponent
        DataView
          ListView

Class Ext.list.ListView

包: | Ext.list
定义类的文件: | ListView.js
类: | ListView
继承自: | DataView

Ext.list.ListView是一个快速，轻量级的 Grid实现， 包含如下特性:

  • 可调节的列
  • 可选择性
  • 列宽百分比根据整个容器的宽度和列数目均衡的初始化
  • 使用模板以任意需要的格式渲染数据
  • 没有水平滚动
  • 不可编辑

示例用法:

                // consume JSON of this form:
{
   "images":[
      {
         "name":"dance_fever.jpg",
         "size":2067,
         "lastmod":1236974993000,
         "url":"images\/thumbs\/dance_fever.jpg"
      },
      {
         "name":"zack_sink.jpg",
         "size":2303,
         "lastmod":1236974993000,
         "url":"images\/thumbs\/zack_sink.jpg"
      }
   ]
}
var store = new Ext.data.JsonStore({
    url: 'get-images.php',
    root: 'images',
    fields: [
        'name', 'url',
        {name:'size', type: 'float'},
        {name:'lastmod', type:'date', dateFormat:'timestamp'}
    ]
});
store.load();

var listView = new Ext.list.ListView({
    store: store,
    multiSelect: true,
    emptyText: 'No images to display',
    reserveScrollOffset: true,
    columns: [{
        header: 'File',
        width: .5,
        dataIndex: 'name'
    },{
        header: 'Last Modified',
        width: .35,
        dataIndex: 'lastmod',
        tpl: '{lastmod:date("m-d h:i a")}'
    },{
        header: 'Size',
        dataIndex: 'size',
        tpl: '{size:fileSize}', // format using Ext.util.Format.fileSize()
        align: 'right'
    }]
});

// put it in a Panel so it looks pretty
var panel = new Ext.Panel({
    id:'images-view',
    width:425,
    height:250,
    collapsible:true,
    layout:'fit',
    title:'Simple ListView (0 items selected)',
    items: listView
});
panel.render(document.body);

// little bit of feedback
listView.on('selectionchange', function(view, nodes){
    var l = nodes.length;
    var s = l != 1 ? 's' : '';
    panel.setTitle('Simple ListView ('
                +l+' item'+s+' selected)');
});

配置项

Config Options Defined By
allowDomMove : Boolean
在渲染时组件是否可以移动Dom节点(默认为true)。
Component
anchor : String
注: 这个配置只用于该组件被包含在一个已使用AnchorLayout...

注: 这个配置只用于该组件被包含在一个已使用 AnchorLayout (或者其子类)配置的Container时。 基于布局管理器，例如：

  • Ext.form.FormPanel
  • 指定 layout: 'anchor' // or 'form', or 'absolute'

参见 Ext.layout.AnchorLayout. anchor 。

BoxComponent
applyTo : Mixed
指定一个元素的id、一个DOM元素或者一个已经存在并被渲染到DIV中的元素，此DIV已经被...

指定一个元素的id、一个DOM元素或者一个已经存在并被渲染到DIV中的元素，此DIV已经被 渲染到document中，并且为当前组件指定了一些结构化的标签。

  • 描述 :
      当使用了 applyTo， 在主元素中也可以用id或者CSS类名来指定组件的托管部分， 并且，如果可以的话，创建的组件可能也会试图在那个标签中创建它的子组件。
  • 注意 :
      当使用此配置项时，无需调用render()方法。
      如果指定了applyTo属性，任何传递给 renderTo 的值都会被忽略，并且目标元素的父节点将会自动被用作组件的容器。
Component
autoEl : Mixed
一个表签名或者一个 DomHelper 描述，用来创建 Element ，它将封装当前组件...

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

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

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

{
    xtype: 'box',
    autoEl: {
        tag: 'img',
        src: 'http://www.example.com/example.jpg'

    }
}, {
    xtype: 'box',
    autoEl: {
        tag: 'blockquote',
        html: 'autoEl is cool!'
    }
}, {
    xtype: 'container',
    autoEl: 'ul',
    cls: 'ux-unordered-list',
    items: {
        xtype: 'box',
        autoEl: 'li',
        html: 'First list item'
    }
}
Component
autoHeight : Boolean
如果值为true，height配置项为'auto'，否则值为false的话使用固定的高度...

如果值为true，height配置项为'auto'，否则值为false的话使用固定的高度， 或者可以由其父类容器 layout manager来控制。(默认值为 false)。

注: 虽然很多组件继承了这个配置选项，但不是所有这些组件的自适应高度配置都会像期望的那样起作用。 设置autoHeight：值为true时，浏览器将根据元素的内容自动设置高度，这将意味着Ext不会去管理高度。

如果是由浏览器来管理高度，需要注意的是，通过浏览器进行调整的结构组件内不能被发现， 因此宽度的变化可能导致需要进行同步处理元素的高度。 例如：

var w = new Ext.Window({
    title: 'Window',
    width: 600,
    autoHeight: true,
    items: {
        title: 'Collapse Me',
        height: 400,
        collapsible: true,
        border: false,
        listeners: {
            beforecollapse: function() {
                w.el.shadow.hide();
            },
            beforeexpand: function() {
                w.el.shadow.hide();
            },
            collapse: function() {
                w.syncShadow();
            },
            expand: function() {
                w.syncShadow();
            }
        }
    }
}).show();
BoxComponent
autoScroll : Boolean
如果值为true，将会在该元素上使用overflow:'auto'配置，并且在必要的时候...
如果值为true，将会在该元素上使用overflow:'auto'配置，并且在必要的时候自动显示滚动条，否则，溢出部分的组件都会被切除(默认值为 false)。
BoxComponent
autoShow : Boolean
如果组件需要检测隐藏CSS属性(如 'x-hidden' 或者 'x-hide-display')并且在渲染时删除...
如果组件需要检测隐藏CSS属性(如 'x-hidden' 或者 'x-hide-display')并且在渲染时删除它们 (默认为false)，设置此值为true。
Component
autoWidth : Boolean
如果为true，使用width:'auto'配置，否则使用固定的宽度...

如果为true，使用width:'auto'配置，否则使用固定的宽度，或者可以由其父类容器的layout manager来控制。(默认值为 false)。

注: 虽然很多组件继承了这个配置选项，但不是所有这些组件的自适应宽度配置都会像期望的那样起作用。 设置autoWidth：值为true时，浏览器将根据元素的内容自动设置宽度，这将意味着Ext不会去管理宽度。

如果是由浏览器来管理宽度，需要注意的是，通过浏览器进行调整的结构组件内不能被发现，因此宽度的变化可能导致需要进行同步处理元素的宽度。 例如，在这个元素的目标是：

<div id='grid-container' style='margin-left:25%;width:50%'></div>
当浏览器窗口改变时，渲染后的Panel必须监听浏览器窗口大小的变化，以便通知子项，浏览器改变了其宽度：

var myPanel = new Ext.Panel({
    renderTo: 'grid-container',
    monitorResize: true, // relay on browser resize
    title: 'Panel',
    height: 400,
    autoWidth: true,
    layout: 'hbox',
    layoutConfig: {
        align: 'stretch'
    },
    defaults: {
        flex: 1
    },
    items: [{
        title: 'Box 1',
    }, {
        title: 'Box 2'
    }, {
        title: 'Box 3'
    }],
});
BoxComponent
blockRefresh : Boolean
设置此项为true可以忽略所绑定store上的datachanged事件。 如果你希望通过插件提供自定义的转换动画...
设置此项为true可以忽略所绑定store上的datachanged事件。 如果你希望通过插件提供自定义的转换动画，这非常有用(默认为false)。
DataView
boxMaxHeight : Number
设置组件的最大高度值...

设置组件的最大高度值。

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

BoxComponent
boxMaxWidth : Number
设置组件的最大宽度值...

设置组件的最大宽度值。

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

BoxComponent
boxMinHeight : Number
设置组件的最小高度值...

设置组件的最小高度值。

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

BoxComponent
boxMinWidth : Number
设置组件的最小宽度值...

设置组件的最小宽度值。

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

BoxComponent
bubbleEvents : Array
一个事件数组，当这些事件被触发时，将会被冒泡到所有父容器中。参见....

一个事件数组，当这些事件被触发时，将会被冒泡到所有父容器中。参见 Ext.util.Observable.enableBubble。 默认为 []。

Component
clearCls : String
应用到特殊的clearing div的CSS类， 这个clearing div直接渲染到每个form field的包装器后面...

应用到特殊的clearing div的CSS类， 这个clearing div直接渲染到每个form field的包装器后面，以提供 清除field的功能(默认为 'x-form-clear-left')。

注意: 只有在当前组件被渲染到一个使用FormLayout 布局(例如 Ext.form.FormPanel 或者指定 layout:'form')的 容器中、或者是指定了一个fieldLabel 、或者指定isFormField=true 时此配置才有效。

另请参见 Ext.layout.FormLayout. fieldTpl。

Component
cls : String
一个可选的额外CSS类，它将被添加到当前组件的元素上(默认为'')...
一个可选的额外CSS类，它将被添加到当前组件的元素上(默认为'')。 此属性对于在组件上，或者它的任何使用标准CSS规则的孩子节点上， 添加定制的样式非常有用。
Component
columnResize : Boolean/Object
为Ext.list.ListView.ColumnResizertrue或者一个配置项以使这些列可以调整... Specify true or specify a configuration object for to enable the columns to be resiza...
为Ext.list.ListView.ColumnResizer 指定true或者一个配置项以使这些列可以调整(默认为true)。
ListView
columnSort : Boolean/Object
为Ext.list.ListView.Sorter指定true或者一个配置项来使这些列可以排序(默认... (def...
为Ext.list.ListView.Sorter指定 true或者一个配置项来使这些列可以排序(默认为 true)。
ListView
columns : Array
一个列配置项的数组, 例如: { align: 'right', dataIndex: 'size', header: 'Size...
一个列配置项的数组, 例如:
                                {
    align: 'right',
    dataIndex: 'size',
    header: 'Size',
    tpl: '{size:fileSize}',
    width: .35
}
每列配置项可配置的属性有：
  • align : String
    设置该列的text-align的CSS属性，默认为 'left'.
  • dataIndex : String
    更多细节参见 Ext.grid.Column. dataIndex
  • header : String
    更多细节参见 Ext.grid.Column. header
  • tpl : String
    为 Ext.XTemplate设置一个字符串作为配置字符串。 默认情况 Ext.XTemplate 使用 dataIndex隐式生成。
  • width : Number
    该列被分配的容器宽度百分比，没有指定宽度的列将被分配一个可以100%适合该容器的数值。要轻松使用整个容器的宽度，只需留出一列不指定其宽度。如果要占用该容器的整个宽度，每列的宽度都需要显式指定。
ListView
contentEl : String
(可选)指定一个已存在的HTML元素，或者一个已存在HTML元素的...

(可选)指定一个已存在的HTML元素，或者一个已存在HTML元素的 id ，它们将被用作当前组件的内容。

  • 描述 :
    此配置选项被用来将一个已存在的HTML元素 插入到一个新组件(在组件渲染之后它简单地移动DOM元素) 的layout元素中，使它成为该组件的内容。
  • 注意 :
    指定的HTML元素将被append到组件的layout元素中， 在所有配置的 HTML 被插入之后， 并且，这样的话，在render事件 被触发时，document中将不再包含此元素。
    指定的HTML元素将不会参与组件所有可能使用的 layout 过程(译者注：指这些HTML元素 不会参与布局操作)。 它仅是HTML而已。布局操作实在孩子 items 上进行的。
    添加 x-hidden 或者 x-hide-display CSS类，以防在内容渲染到panel时发生闪烁。
Component
ctCls : String
一个可选的外部CSS样式，添加到这个组件的容器(默认值为 '')。 这个方法对于使用标准的CSS规则...

一个可选的外部CSS样式，添加到这个组件的容器(默认值为 '')。 这个方法对于使用标准的CSS规则，为组件或它的任何一个子组件添加特定的样式非常有用。 参见 Ext.layout.ContainerLayout和 extraCls 。

注意: ctCls 默认为 ''期望如下的类，它们将指定一个默认值:

  • Box Layout : 'x-box-layout-ct'
使用一个额外的CSS类配置以上的Class，它是append到默认对象上的。例如， 对于BoxLayout (Hbox and Vbox):
                                ctCls: 'x-box-layout-ct custom-class'

Component
data : Mixed
初始化数据集，它将被应用到 tpl 上以刷新组件的内容区域。
Component
deferEmptyText : Boolean
设置为true以延迟应用emptyText直到store第一次加载
DataView
disabled : Boolean
当前组件处于无效状态时为true。 Read-only.
Component
disabledClass : String
当组件处于无效状态时添加到组件上的CSS类(默认为 'x-item-disabled')。
Component
emptyText : String
当没有数据时显示在视图中的文本 (默认值为 '')。
DataView
fieldLabel : String
紧靠此field显示的标签文本(默认值为 '')。注意...

紧靠此field显示的标签文本(默认值为 '')。

注意:只有在当前组件被渲染到一个使用FormLayout 的容器中时，此配置才有效。 (例如 Ext.form.FormPanel 或 指定 layout:'form')。

另请参见 hideLabel 、 Ext.layout.FormLayout和 fieldTpl。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Name'
    }]
});
Component
flex : Number
注: 这个配置只用于该组件被包含在一个已使用BoxLayout配置的Container中时...

注: 这个配置只用于该组件被包含在一个已使用BoxLayout配置的Container中时。通过计算每一个子组件的flex值所占全部flex值之和的比例，来决定子组件的宽(HBoxLayout)高(VBoxlayout)。 任何子项的 flex = 0 或 flex = undefined 将不被设置(初始值大小将不被改变)。

BoxComponent
height : Number
组件的高度(默认值为 auto)。注:如果想使用百分比的方式...
组件的高度(默认值为 auto)。注:如果想使用百分比的方式来设置值，请查看 Ext.Component.anchor。
BoxComponent
hidden : Boolean
如果当前组件处于隐藏状态，此值为true。Read-only。
Component
hideHeaders : Boolean
设置true以隐藏 header row (默认为 false所以 header row将显示).
ListView
hideLabel : Boolean
true时完全隐藏label元素 ( label 和 separator)。 默认为 false。 默认情况下，即使你不指定...

true时完全隐藏label元素 ( label 和 separator)。 默认为 false。 默认情况下，即使你不指定 fieldLabel 它的空间仍然会被保留，这样这块区域会与其它确实拥有label的区域位于同一排。 讲此值设置为 true 将导致此区域不再保留此空间。

注意: 参见 clearCls 的注释。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield'
        hideLabel: true
    }]
});
Component
hideMode : String
组件如何隐藏，支持的值有： 'visibility' (css visibility), 'offsets' (位置偏移量为负值) 和...

组件如何隐藏，支持的值有： 'visibility' (css visibility), 'offsets' (位置偏移量为负值) 和 'display' (css display).

注意:一般首选默认值 'display'，因为当组件第一次显示的时候它们会自动进行布局 (隐藏的时候不会调整尺寸)。

Component
hideParent : Boolean
此值为true时，当调用hide/show方法时，将会hide和show组件的容器...
此值为true时，当调用hide/show方法时，将会hide和show组件的容器；false时将会 hide和show组件自身(默认为false)。例如，这可以用作window上隐藏按钮的一种 快捷操作，通过设置此按钮的hideParent:true，然后把它添加到window上。
Component
html : String/Object
一个HTML片段，或者一个 DomHelper 描述，用作layout元素的内容(默认为'')。...
一个HTML片段，或者一个 DomHelper 描述，用作layout元素的内容(默认为'')。 这个HTML内容在组件渲染之后才被添加，所以在 render 出发的时候，document中尚未包含此HTML。 但是这个内容将会在所有配置的 contentEl 之前被插入到body标签中。
Component
id : String
当前组件唯一的id(默认为auto-assigned id)...

当前组件唯一的id(默认为auto-assigned id)。 如果你需要在以后访问组件，而又没有一个有效的组件对象引用，那么你需要指定一个 id( 也就是，使用Ext. getCmp方法 )。

注意，此id也将被用作组件底层HTML标签的id，这些标签被渲染到页面中。 这将允许你编写基于id的CSS规则，以独立地描述指定的实例；并且，也可以通过 组件父标签的id选中子元素。

注意:为了避免与唯一的id 产生重复， 请参见 itemId 和 ref 。

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

Component
internalTpl : String/Array
header row使用的模板。更多细节参见 tpl。
ListView
itemCls : String
注意: 只有在当前组件被渲染到一个使用FormLayout 布局的 容器中时此配置才有效...

注意: 只有在当前组件被渲染到一个使用FormLayout 布局的 容器中时此配置才有效。 (例如Ext.form.FormPanel 或者指定 layout:'form')。

一个附加的CSS类，应用到div上，包装当前field的表单元素。 如果提供了此参数， field级上的itemCls将会覆盖 container级上提供的 默认itemCls。 为itemCls指定的值将会被添加默认的 类('x-form-item')。

既然它被应用到项目的包装器上(参见 Ext.layout.FormLayout。 fieldTpl)， 它将允许你编写能应用到此field、label(如果有指定)、或者field内部任何其它元素的标准CSS规则。

注意: 参考 fieldLabel的注释。 .

示例用法:

// Apply a style to the field's label:
<style>
    .required .x-form-item-label {font-weight:bold;color:red;}
</style>

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Name',
        itemCls: 'required' //this label will be styled
    },{
        xtype: 'textfield',
        fieldLabel: 'Favorite Color'
    }]
});
Component
itemId : String
当没有可利用的对象引用时，itemId可以作为第二选择，用来获得一个组件的引用， 代替 ...

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

var c = new Ext.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'); // 与 Ext.getCmp()不同

p2 = p1.ownerCt.getComponent('p2'); // 通过兄弟对象获得引用

另请参见 id 和 ref 。

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

Component
itemSelector : String
默认为'dl'以适合先前配置的tpl。该设置会指定CSS选择器(e.g. div.some-class or ...
默认为 'dl' 以适合先前配置的 tpl 。该设置会指定CSS选择器(e.g. div.some-class or span:first-child) ，用来确定ListView将与哪些nodes一起。
ListView
labelSeparator : String
每个fieldLabel 文本后面现实的分隔符。 此属性可以在多个层次上进行配置...

每个fieldLabel 文本后面现实的分隔符。 此属性可以在多个层次上进行配置。优先顺序为：

  • field / component level
  • container level
  • layout level (默认为冒号 ':')
如不需要为当前field的label显示分隔符，指定一个空字符串''即可。

注意:参见 clearCls 的注释。

另请参见 hideLabel 和 Ext.layout.FormLayout。 fieldTpl。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    layoutConfig: {
        labelSeparator: '~'   // layout config has lowest priority (defaults to ':')
    },
    labelSeparator: '>>',     // config at container level
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Field 1',
        labelSeparator: '...' // field/component level config supersedes others
    },{
        xtype: 'textfield',
        fieldLabel: 'Field 2' // labelSeparator will be '='

    }]
});
Component
labelStyle : String
一个CSS样式描述字符串，它将直接应用到当前field的label上...

一个CSS样式描述字符串，它将直接应用到当前field的label上。 如果有设置，默认为容器的labelStyle值(例如 Ext.layout.FormLayout.labelStyle , 或者 '')。

注意:参见 clearCls 的注释。

另请参见 hideLabel 和 Ext.layout.FormLayout. fieldTpl。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Name',
        labelStyle: 'font-weight:bold;'
    }]
});
Component
listeners : Object
一个包含一个或多个事件处理器的配置对象，会在初始化的时候被添加到目标对象上...

一个包含一个或多个事件处理器的配置对象，会在初始化的时候被添加到目标对象上。 该配置对象应该是一个有效的监听器配置对象就像 addListener例子中指定的一样可一次附加多个处理器。

ExtJs Components上的DOM事件

一些 ExtJs Component 类导出时会选择一些DOM事件(例如 "click", "mouseover" 等等), 这通常只是在有额外的值可以被添加时发生。例如DataView类的 click事件会传递被点击的节点。也可以直接在Component的HTMLElementevent上访问DOM事件，但必需在Component被渲染后监听器才能添加到Element 上。可以按照以下步骤添加插件:

// 插件会用一个监听器配置对象进行配置。
//该组件会被添加到所有处理方法的参数列表上。
Ext.DomObserver = Ext.extend(Object, {
    constructor: function(config) {
        this.listeners = config.listeners ? config.listeners : config;
    },

    // 组件将自己传递进了插件的初始化方法里
    init: function(c) {
        var p, l = this.listeners;
        for (p in l) {
            if (Ext.isFunction(l[p])) {
                l[p] = this.createHandler(l[p], c);
            } else {
                l[p].fn = this.createHandler(l[p].fn, c);
            }
        }

        // 渲染后立即添加监听器到元素上
        c.render = c.render.createSequence(function() {
            var e = c.getEl();
            if (e) {
                e.on(l);
            }
        });
    },

    createHandler: function(fn, c) {
        return function(e) {
            fn.call(this, e, c);
        };
    }
});

var combo = new Ext.form.ComboBox({

    // 元素被点击后折叠
    plugins: [ new Ext.DomObserver({
        click: function(evt, comp) {
            comp.collapse();
        }
    })],
    store: myStore,
    typeAhead: true,
    mode: 'local',
    triggerAction: 'all'
});

Observable
loadingText : String
在进行数据加载操作时显示的字符串 (默认值为 undefined)。 如果指定，此文本会被显示在一个加载div中...
在进行数据加载操作时显示的字符串 (默认值为 undefined)。 如果指定，此文本会被显示在一个加载div中， 并且在进行加载时view的内容会被清除掉； 否则， view的内容将仍然会显示直到新的数据 加在完成并且内容被替换掉。
DataView
margins : Object
注:此配置只用于该组件展现在一个使用BorderLayout...

注:此配置只用于该组件展现在一个使用BorderLayout 或 BoxLayout的两个子类之一作为布局的容器。

这个margins对象在该组件中的格式为：

{top: (top margin),right: (right margin),bottom: (bottom margin),left: (left margin)}

也可以是一个字符串，中间用空格分隔，margin值为数字。 把matches中每一个值的次序跟CSS中margin值的排列方式相对应：

  • 如果只有一个值，它适用于所有方面。
  • 如果有两个值，top和bottom的边框设置为第一个值，left和right设置为第二个值。
  • 如果有三个值，top设置为第一个值，left和right设置为第二个值，bottom设置为第三个值。
  • 如果有四个值，分别设置为top, right, bottom, left。

默认值:

{top:0, right:0, bottom:0, left:0}
BoxComponent
multiSelect : Boolean
设置为true，以便允许一次选择多个项目，设置为false一次只允许选择唯一个项目或者不选择， 这取决于singleSelect的值...
设置为true，以便允许一次选择多个项目，设置为false一次只允许选择唯一个项目或者不选择， 这取决于singleSelect的值(默认值为 false)。
DataView
overClass : String
当结束一行时使用的CSS类，(默认为 'x-list-over')。下面是一个覆盖默认样式的例子：.x-...
当结束一行时使用的CSS类，(默认为 'x-list-over')。下面是一个覆盖默认样式的例子：
                                .x-list-over {background-color: orange;}
ListView
overCls : String
一个可选的额外的CSS类，它将在鼠标移过元素时被添加到组件上...
一个可选的额外的CSS类，它将在鼠标移过元素时被添加到组件上，鼠标移出时 删除。(默认为'')。此属性对于在组件上，或者它的任何使用标准CSS规则的孩子节点上， 添加定制的'active' 或者 'hover'样式非常有用。
Component
pageX : Number
如果该组件被包含在一个指定位置的容器中，这个值表示页面级的x坐标值（译者注：在有滚动条的情况下这个值很有用）。
BoxComponent
pageY : Number
如果该组件被包含在一个指定位置的容器中，这个值表示页面级的y坐标值（译者注：在有滚动条的情况下这个值很有用）。
BoxComponent
plugins : Object/Array
一个对象或者一个对象数组，为组件提供特殊的功能 ...
一个对象或者一个对象数组，为组件提供特殊的功能。 对一个合法的插件唯一的要求是它含有一个init()方法， 能接收一个Ext.Component型的参数。 当组件被创建时，如果有可用的插件，组件将会调用每个插件的init方法， 并将自身的引用作为方法参数传递给它。然后，每个插件就可以调用方法或者响应组件上的事件， 就像需要的那样提供自己的功能。
Component
ptype : String
需要创建配置的ptype。 当传递一个配置对象给构造函数时...
需要创建配置的ptype。 当传递一个配置对象给构造函数时，此配置选项不会被使用。 只有在使用懒初始化的时候此配置项才会被使用， 此时Plugin不是 通过一个完整的实例组件，而是通过一个Component配置指定的。 在渲染时，将会查找ptype以决定创建何种类型的Plugin。

如果你创建自己的Plugin，你可以通过 Ext.ComponentMgr.registerPlugin 对它们进行注册，以便能利用懒初始化和渲染机制。
Component
ref : String
一个路径描述，与组件的 ownerCt 相关，它描述了把当前组件的命名引用放置到哪个父容器中去。...

一个路径描述，与组件的 ownerCt 相关，它描述了把当前组件的命名引用放置到哪个父容器中去。

祖先的坐标路径可以通过'/'字符进行分隔。 例如，将一个Toolbar Button的引用放入 拥有此Toolbar的Panel中:

var myGrid = new Ext.grid.EditorGridPanel({
    title: 'My EditorGridPanel',
    store: myStore,
    colModel: myColModel,
    tbar: [{
        text: 'Save',
        handler: saveChanges,
        disabled: true,
        ref: '../saveButton'
    }],
    listeners: {
        afteredit: function() {
//          The button reference is in the GridPanel
            myGrid.saveButton.enable();
        }
    }
});

在上面的代码中，如果 ref 是 'saveButton' ，那么引用将会被放置到Toolbar中。 ref 中的每个'/' 都会从组件的 ownerCt 向上移动一级。

另请参见 added 和 removed 事件。

Component
region : String
注: 此配置只用于该组件展现在一个布局为BorderLayout的容器中...

注: 此配置只用于该组件展现在一个布局为BorderLayout的容器中(例如指定layout:'border')。

详见Ext.layout.BorderLayout。

BoxComponent
renderTo : Mixed
该值可以是一个节点的id、一个DOM节点或者一个已存在的元素...

该值可以是一个节点的id、一个DOM节点或者一个已存在的元素， 组件将会被渲染到其中。

  • 注意 :
      如果组件不是一个Container 的子项目时， 不要使用此选项。 渲染和管理它的子项目是一个Container 的layout manager的责任。
      当使用此配置项时，无需调用render()方法。

另请参见 render 。

Component
reserveScrollOffset : Boolean
默认将延迟10毫秒解释配置的scrollOffset。指定ture以...
默认将延迟10毫秒解释配置的 scrollOffset 。指定 true以立即解释配置的 scrollOffset 。
ListView
scrollOffset : Number
The amount of space to reserve for the scrollbar (defaults to undefined). If an explicit value isn't specified, this ...
为scrollbar留出的空间数值，(默认为 undefined)，如果没有指定一个确切值，则将自动计算。
ListView
selectedClass : String
应用在选择的行上面的CSS类，(默认为 'x-list-selected')。下面是一个覆盖默认样式的例子: ...
应用在选择的行上面的CSS类(默认为 'x-list-selected')。下面是一个覆盖默认样式的例子:
                                .x-list-selected {background-color: yellow;}
ListView
simpleSelect : Boolean
设置为true，启用在多个项目上点击时进行多选， 而不需要用户按住Shift或者Ctrl，false时，如果需要...
设置为true，启用在多个项目上点击时进行多选， 而不需要用户按住Shift或者Ctrl，false时，如果需要 选中多于一个项目时，将强制用户必须按住Ctrl或者Shift (默认值为 false)。
DataView
singleSelect : Boolean
True将会严格地一次只许选中一个节点，false可以不选择任何节点 (默认为false)。注意如果multiSelect = true...
True将会严格地一次只许选中一个节点，false可以不选择任何节点 (默认为false)。注意如果multiSelect = true，此值将会被忽略。
DataView
stateEvents : Array
一个事件数组，当它们被触发时，组件需要保存自己的状态(默认值为 none)...

一个事件数组，当它们被触发时，组件需要保存自己的状态(默认值为 none)。 它们可以是任何该组件支持的事件类型，包括浏览器事件和 自定义事件(例如['click', 'customerchange'])。

对于保存和恢复组件状态的详细解释，参见 stateful

Component
stateId : String
为该组件指定的唯一的id值，它被用作管理组件状态的目的...
为该组件指定的唯一的id值，它被用作管理组件状态的目的。 (如果设定了id，默认值为组件自己的id，否则，如果组件使用自动生成的id，此值为null)。

对于保存和反解析组件状态的解释，参见 stateful 。

Component
stateful : Boolean
一个标志参数，它将引起组件在启动时尝试从一个保存的状态中恢复内部状态参数...

一个标志参数，它将引起组件在启动时尝试从一个保存的状态中恢复内部状态参数。 组件必须要么拥有一个 stateId 或者 id ，它们被分配给需要被管理的状态属性。 在跨页面加载时，不保证自动生成的id属性的稳定性， 并且，不能依赖此id来保存和恢复一个组件的相同状态。

为了保存状态的操作能够工作，状态管理器的提供者必须 被设置成一个Ext.state.Provider 的实现类，它覆盖了set 和get 方法，以便保存和恢复name/value对。 有一个内置的Ext.state.CookieProvider 可用。

为当前页面设置状态提供者:

Ext.state.Manager.setProvider(new Ext.state.CookieProvider({
    expires: new Date(new Date().getTime()+(1000*60*60*24*7)), //7 days from now
}));

当 stateEvents 配置项中其中之一的事件被触发时， 一个状态可保存的组件将试图保存其状态。

保存状态时，一个可保存状态的组件首先需要通过调用 getState 方法来序列化它的状态。 默认情况下，此函数什么事都不做。 开发者必须提供一个实现，返回一个hash对象，它描述了组件可恢复的状态。

getState方法产生的值将会传递给 Ext.state.Manager.set 方法，它使用配置的 Ext.state.Provider 来保存对象，以组件的 stateId 为key，或者，如果此值（指stateId）没有指定时， 使用它的 id 作为key。

在进行构造时，一个可保存状态的组件试图通过调用 Ext.state.Manager.get方法来 恢复它的状态，传递 stateId 或者，如果此值（指stateId）没有指定时， 使用它的 id 作为参数。

结果对象被传递给 applyState 。 applyState 的默认实现只是简单地把属性拷贝到对象中， 但是开发者可以覆盖此方法以支持更多行为。

通过向 beforestaterestore, staterestore, beforestatesave 和 statesave 事件上绑定监听器，你可以在保存和恢复状态时进行额外的处理。

Component
store : Ext.data.Store
当前DataView绑定到的Ext.data.Store 。
DataView
style : String
被添加到组件元素的特定样式。 必须是按照...
被添加到组件元素的特定样式。 必须是按照 Ext.Element.applyStyles 类指定格式的合法参数值。

new Ext.Panel({
    title: 'Some Title',
    renderTo: Ext.getBody(),
    width: 400, height: 300,
    layout: 'form',
    items: [{
        xtype: 'textarea',
        style: {
            width: '95%',
            marginBottom: '10px'
        }
    },
        new Ext.Button({
            text: 'Send',
            minWidth: '100',
            style: {
                marginBottom: '10px'
            }
        })
    ]
});
Component
tabTip : String
注: 这个配置只用于当该组件作为TabPanel的一个子项目时使用...

注: 这个配置只用于当该组件作为TabPanel的一个子项目时使用。

一个String类型的innerHTML(支持html标签)，当鼠标放在该选项上的时，显示一个tooltip。为了tips能够被渲染，Ext.QuickTips.init()必须被提前调用。
BoxComponent
tpl : Mixed
一个 Ext.Template , Ext.XTemplate 或者一个用来形成一个Ext.XTemplate的字符串数组...
一个 Ext.Template , Ext.XTemplate 或者一个用来形成一个Ext.XTemplate的字符串数组。 与 data 和 tplWriteMode 配置项协同使用。
DataView
tplWriteMode : String
刷新组件的内容区域时使用的Ext.(X)Template方式。 默认为'overwrite' (参见 Ext.XTemplate.overwrite )。
刷新组件的内容区域时使用的Ext.(X)Template方式。 默认为'overwrite' (参见 Ext.XTemplate.overwrite )。
Component
trackOver : Boolean
True将启用mouseenter和mouseleave事件
DataView
width : Number
组件的宽度(默认值为 auto)。注:如果想使用百分比的方式...
组件的宽度(默认值为 auto)。注:如果想使用百分比的方式来设置值，请查看 Ext.Component.anchor。
BoxComponent
x : Number
如果被包含在一个指定位置的容器中，这个值表示x(left)坐标值。
BoxComponent
xtype : String
需要创建配置的xtype。 当传递一个配置对象给构造函数时...
需要创建配置的xtype。 当传递一个配置对象给构造函数时，此配置选项不会被使用。 只有在使用懒初始化的时候此配置项才会被使用，此时容器的子项目不是 通过一个完整的实例组件，而是通过一个Component配置指定的。 在渲染时，将会查找xtype以决定创建何种类型的子组件。

预定义的xtype列表如下： here。

如果你继承Component创建你自己的组件，你需要使用Ext.ComponentMgr.registerType 对它们进行注册，以便利用懒初始化和渲染机制。
Component
y : Number
如果被包含在一个指定位置的容器中，这个值表示y(top)坐标值。
BoxComponent

公共属性

Property Defined By
disableHeaders : Boolean
设置该属性为 true可在单击头部时禁用排序(默认为 false)。
ListView
disabled : Boolean
当前组件处于无效状态时为true。 Read-only.
Component
el : Ext.Element
封装了当前组件的Ext.Element。 Read-only。通常情况下，这将是一个<DIV>元素，它由此类的...

封装了当前组件的Ext.Element。 Read-only。

通常情况下，这将是一个<DIV>元素，它由此类的 onRender方法创建，但是它可以通过使用 autoEl 配置项进行覆盖。

注意: 直到组件渲染完成此元素都将处于无效状态。

如需向当前组件的 DOM事件(而不是当前组件自己的Observable事件)添加监听器， 更多建议，参见 listeners 配置项，或者直接使用一个render监听器:

new Ext.Panel({
    title: 'The Clickable Panel',
    listeners: {
        render: function(p) {
            // Append the Panel to the click handler's argument list.
            p.getEl().on('click', handlePanelClick.createDelegate(null, [p], true));
        },
        single: true  // Remove the listener after first invocation
    }
});

另请参见 getEl

Component
hidden : Boolean
如果当前组件处于隐藏状态，此值为true。Read-only。
Component
initialConfig : Object
当前组件的初始化配置描述。 Read-only。
Component
ownerCt : Ext.Container
组件所属的Container (默认为undefined，当前组件被添加到一个容器中时此值被自动设置)...
组件所属的Container (默认为undefined，当前组件被添加到一个容器中时此值被自动设置)。 Read-only。

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

Component
refOwner : Ext.Container
如果当前组件是一个容器的孩子，并且是通过一个 ref 配置项被注册的，则此值为 ref 引用被插入到的祖先容器。
如果当前组件是一个容器的孩子，并且是通过一个 ref 配置项被注册的，则此值为 ref 引用被插入到的祖先容器。
Component
rendered : Boolean
如果当前组件已经被渲染了，此值为true。Read-only.
Component

公共方法

Method Defined By
ListView ( Object config )
参数:
  • config : Object
返回值:
  • void
ListView
addClass ( string cls ) : Ext.Component
为组件底层的元素添加CSS样式。
为组件底层的元素添加CSS样式。
参数:
  • cls : string
    需要添加的CSS样式的class名称
返回值:
  • Ext.Component
    this
Component
addEvents( Object|String o, string Optional. ) : void
添加指定的事件到事件列表上，事件会被该Observable触发。
添加指定的事件到事件列表上，事件会被该Observable触发。
参数:
  • o : Object|String
    以事件名作为属性true作为值的对象 或者当多个事件名被分开的传递时则为第一个事件名。
  • Optional. : string
    事件名被分开的传递时则为事件名。 用法:
    this.addEvents('storeloaded', 'storecleared');
返回值:
  • void
Observable
addListener( String eventName, Function handler, [Object scope], [Object options] ) : void
给对象添加事件处理器。
给对象添加事件处理器。
参数:
  • eventName : String
    监听的事件名。
  • handler : Function
    事件调用的方法
  • scope : Object
    （可选）处理方法执行的作用域 (this的引用 reference)。 如果被忽略。默认为触发事件的对象。
  • options : Object
    （可选）包含处理器配置和属性的对象。 可能包含以下的属性:
    • scope : Object
      处理方法执行的作用域(this的引用) 。 如果被忽略。默认为触发事件的对象。
    • delay : Number
      在触发事件后延迟调用处理器的毫秒数。
    • single : Boolean
      如果为True则添加一个处理器来处理下一次的事件触发（仅一次），然后移除自己。
    • buffer : Number
      使得处理器延迟指定毫秒数后预定的运行在 一个Ext.util.DelayedTask中 。 如果事件在时间内再一次被触发，原始的处理器不会被调用，但是新的处理器会预定的在他的位置上。
    • target : Observable
      如果事件在目标的Observable上触发则仅仅调用处理器， 否则 事件会从子类的Observable上冒泡

    组合选项
    使用这些选项参数,可能会组合出不同类型的监听器：

    一个延迟的，一次性的监听器。

    myDataView.on('click', this.onClick, this, {
single: true,
delay: 100
});

    一次调用附加多个处理器
    该方法同样支持传递一个包含指定的多个处理器的属性的配置对象参数。

    myGridPanel.on({
'click' : {
    fn: this.onClick,
    scope: this,
    delay: 100
},
'mouseover' : {
    fn: this.onMouseOver,
    scope: this
},
'mouseout' : {
    fn: this.onMouseOut,
    scope: this
}
});

    或者一个简写的语法：

    myGridPanel.on({
'click' : this.onClick,
'mouseover' : this.onMouseOver,
'mouseout' : this.onMouseOut,
 scope: this
});
返回值:
  • void
Observable
applyToMarkup ( String/HTMLElement el ) : void
将此组件添加到已存在的有效的HTML标签中。 使用该方法时，无需再调用render()方法。
将此组件添加到已存在的有效的HTML标签中。 使用该方法时，无需再调用render()方法。
参数:
  • el : String/HTMLElement
返回值:
  • void
Component
bindStore ( Store store ) : void
改变绑定到当前视图的数据store并刷新视图。
改变绑定到当前视图的数据store并刷新视图。
参数:
  • store : Store
    需要绑定到当前视图的store
返回值:
  • void
DataView
clearSelections ( [ Boolean suppressEvent ] ) : void
清除所有选中。
清除所有选中。
参数:
  • suppressEvent : Boolean
    (可选)True将会跳过触发selectionchange事件
返回值:
  • void
DataView
cloneConfig ( Object overrides ) : Ext.Component
默认使用原先传递给当前实例的配置值克隆当前组件。
默认使用原先传递给当前实例的配置值克隆当前组件。
参数:
  • overrides : Object
    一个新的配置项，包含需要覆盖到克隆版本的所有属性。 可以传递一个id参数给此对象，否则将自动生成一个新的id以避免发生重复。
返回值:
  • Ext.Component
    当前组件的克隆副本
Component
collectData ( Array records , Number startIndex ) : Object
一个可以覆盖的函数，它返回哪些传递给view模板(template)，渲染整个ListView的数据项...

一个可以覆盖的函数，它返回哪些传递给view 模板(template) 渲染整个ListView的数据项. 返回的对象应该包含如下属性:

  • columns : String
    参见 columns
  • rows : String
    参见 Ext.DataView.collectData
参数:
  • records : Array
    一个渲染DataView的 Ext.data.Record数组。
  • startIndex : Number
    正在准备渲染的记录的索引号
返回值:
  • Object
    一个被重复的XTemplate处理的包含上述属性的对象，
ListView
deselect ( HTMLElement/Number/Record node ) : void
反选一个节点。
反选一个节点。
参数:
  • node : HTMLElement/Number/Record
    节点、节点索引，或者一个需要反选的记录
返回值:
  • void
DataView
destroy () : void
通过如下方法销毁对象：删除所有的事件监听器、将组件的元素从DOM树中删除...
通过如下方法销毁对象：删除所有的事件监听器、将组件的元素从DOM树中删除（如果可以）、 将组件从它的 Ext.Container（如果可用）中删除、 并且将它从Ext.ComponentMgr中 注销。 销毁操作一般由框架自动完成，一般情况下不需要直接调用该方法。
参数:
  • 无。
返回值:
  • void
Component
disable () : Ext.Component
将组件置为无效状态，并出发'disable'事件。
将组件置为无效状态，并出发'disable'事件。
参数:
  • 无。
返回值:
  • Ext.Component
    this
Component
enable () : Ext.Component
将组件置为有效状态并触发'enable'事件。
将组件置为有效状态并触发'enable'事件。
参数:
  • 无。
返回值:
  • Ext.Component
    this
Component
enableBubble( String/Array events ) :void
是否现在使得事件会被该Observable触发并调用 this.getBubbleTarget()方法在拥有者的继承树...

是否现在使得事件会被该Observable触发并调用 this.getBubbleTarget()方法在拥有者的继承树中冒泡。Observable的基础类中没有该方法的实现。

该方法一般被Ext.Components用来冒泡事件到拥有者的容器。参看Ext.Component.getBubbleTarget默认的实现 在Ext.Component中返回组件的直接拥有者。但是如果需要的是一个已知的目标，该方法可以被重写来更快的访问需求的目标。

例子:

Ext.override(Ext.form.Field, {
    // 添加方法到Field的initComponent上改变事件为冒泡
    initComponent : Ext.form.Field.prototype.initComponent.createSequence(function() {
        this.enableBubble('change');
    }),

    // 我们知道我们想让Field的事件冒泡到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() {
            // 如果样式被修改标题会变红。
            myForm.header.setStyle('color', 'red');
        }
    }
});
参数:
  • events : String/Array
    冒泡的事件名，或事件名数组
返回值:
  • void
Observable
findItemFromChild ( HTMLElement node ) : HTMLElement
返回传递进来的孩子所属的模板节点，如果它不属于任何一个，返回null。
返回传递进来的孩子所属的模板节点，如果它不属于任何一个，返回null。
参数:
  • node : HTMLElement
返回值:
  • HTMLElement
    模板节点
DataView
findParentBy ( Function fn ) : Ext.Container
通过自定义的函数查找当前组件上层任何层次上的容器...
通过自定义的函数查找当前组件上层任何层次上的容器。 如果传递的函数返回true，容器对象将被返回。
参数:
  • fn : Function
    自定义的函数，使用如下参数调用(container,this component)。
返回值:
  • Ext.Container
    自定义函数返回true的第一个容器
Component
findParentByType ( String/Class xtype ) : Ext.Container
通过xtype或者class查找当前组件上层任何层次上的容器
通过xtype或者class查找当前组件上层任何层次上的容器
参数:
  • xtype : String/Class
    组件的xtype字符串，或者直接是组件的class
返回值:
  • Ext.Container
    符合指定xtype或者class的第一个容器
Component
fireEvent( String eventName, Object... args ) : Boolean
用传入的参数触发指定的事件 (减去事件名)。 一个事件可以被设置为冒泡 Obse...

用传入的参数触发指定的事件 (减去事件名)。

一个事件可以被设置为冒泡到Observable父类继承树(参看 Ext.Component.getBubbleTarget) 调用enableBubble实现。

参数:
  • eventName : String
    触发的事件名。
  • args : Object...
    传递给处理器的可变长度参数。
返回值:
  • Boolean
    如果有任何的处理器返回false则返回false，否则返回true。
Observable
focus ( [ Boolean selectText ], [ Boolean/Number delay ] ) : Ext.Component
尝试将当前组件设为焦点。
尝试将当前组件设为焦点。
参数:
  • selectText : Boolean
    (可选) 如果可用，同时选中组件内部的文本
  • delay : Boolean/Number
    (可选)将当前组件设置为焦点的延迟时间(设置为true等于0毫秒)
返回值:
  • Ext.Component
    this
Component
getBox ( [ Boolean local ] ) : Object
获取组件底层元素当前盒子模型的尺寸。（译者注：盒子模型是CSS术语，详细解释请自行搜索。）
获取组件底层元素当前盒子模型的尺寸。（译者注：盒子模型是CSS术语，详细解释请自行搜索。）
参数:
  • local : Boolean
    (可选)值为true时，组件的left值和top值将代替页面的XY被返回。(默认值为false)
返回值:
  • Object
    返回值的格式{x, y, width, height}
BoxComponent
getBubbleTarget () : Ext.Container
为Observable的fireEvent方法提供链接，它沿着继承结构进行冒泡操作。
为Observable的fireEvent方法提供链接，它沿着继承结构进行冒泡操作。
参数:
  • 无。
返回值:
  • Ext.Container
    拥有当前组件的容器。
Component
getEl () : Ext.Element
返回 Ext.Element ，它包装了当前组件。...

返回 Ext.Element ，它包装了当前组件。

通常情况下，这将是一个<DIV>元素，它是由该类的onRender方法创建的， 但是可以使用autoEl配置项 覆盖它。

注意: 此元素将会一直处于无效状态直到当前组件渲染完成。

如需向当前组件的 DOM事件(而不是当前组件自己的Observable事件)添加监听器， 更多建议，参见 listeners 配置项，或者直接使用一个render监听器:

new Ext.Panel({
    title: 'The Clickable Panel',
    listeners: {
        render: function(p) {
            // Append the Panel to the click handler's argument list.
            p.getEl().on('click', handlePanelClick.createDelegate(null, [p], true));
        },
        single: true  // Remove the listener after first invocation
    }
});
参数:
  • 无。
返回值:
  • Ext.Element
    包装当前组件的元素。
Component
getHeight () : Number
获取该组件的当前高度值。
获取该组件的当前高度值。
参数:
  • 无。
返回值:
  • Number
BoxComponent
getId () : String
返回当前组件的id，如果没有定义id，则自动生成并返回一个id:'ext-comp-'...
返回当前组件的 id 如果没有定义 id 则自动生成并返回一个 id

'ext-comp-' + (++Ext.Component.AUTO_ID)
参数:
  • 无。
返回值:
  • String
    id
Component
getItemId () : String
返回当前组件的 itemId 。 如果没有通过配置参数指定 itemId 那么，将会使用...
返回当前组件的 itemId 。 如果没有通过配置参数指定 itemId 那么，将会使用 getId 返回 id 。
参数:
  • 无。
返回值:
  • String
Component
getNode ( HTMLElement/String/Number/Ext.data.Record nodeInfo ) : HTMLElement
获取一个模板节点。
获取一个模板节点。
参数:
  • nodeInfo : HTMLElement/String/Number/Ext.data.Record
    一个HTMLElement模板节点、一个模板节点的索引、一个模板节点的 id，一个绑定到节点的记录
返回值:
  • HTMLElement
    节点，如果没有找到时为null
DataView
getNodes ( [ Number start ], [ Number end ] ) : Array
获取一个区间内的节点。
获取一个区间内的节点。
参数:
  • start : Number
    (可选)区间中第一个节点的索引
  • end : Number
    (可选)区间中最后一个节点的索引
返回值:
  • Array
    节点数组
DataView
getOuterSize () : Object
获取当前组件所在元素的尺寸大小，包括边缘的空白处。
获取当前组件所在元素的尺寸大小，包括边缘的空白处。
参数:
  • 无。
返回值:
  • Object
    一个包含元素大小的对象 {width: (element width + left/right margins), height: (element height + top/bottom margins)}
BoxComponent
getPosition ( [ Boolean local ] ) : Array
获取组件底层元素当前的XY位置。
获取组件底层元素当前的XY位置。
参数:
  • local : Boolean
    (可选)如果为true，将返回元素的left和top值，而不是相对于页面内的 XY。(默认值为 false)
返回值:
  • Array
    元素的XY位置值(例如：[100, 200])
BoxComponent
getRecord ( HTMLElement node ) : Record
从一个节点上获取一条记录
从一个节点上获取一条记录
参数:
  • node : HTMLElement
    需要求值的节点
返回值:
  • Record
    record {@link Ext.data.Record}对象
DataView
getRecords ( Array nodes ) : Array
从一个节点数组中获取一个记录数组
从一个节点数组中获取一个记录数组
参数:
  • nodes : Array
    需要求值的节点数组
返回值:
  • Array
    records {@link Ext.data.Record}对象数组
DataView
getResizeEl () : Ext.Element
返回该组件的最外层用来定义这些组件整体大小的Element...

返回该组件的最外层用来定义这些组件整体大小的Element对象。

通常用 getEl 方法将会返回相同的Element对象，但在有些情况下，组件可能有一些更多的封装了它的主要动态Element对象的Element对象。

例如ComboBox。它是封装在一个包含<input>元素的包装元素里(这将返回其 getEl方法和触发按钮的元素)。返回的元素为resizeEl。

参数:
  • 无。
返回值:
  • Ext.Element
    The Element which is to be resized by size managing layouts.
BoxComponent
getSelectedIndexes () : Array
获取所有选中节点的索引。
获取所有选中节点的索引。
参数:
  • 无。
返回值:
  • Array
    索引值数组
DataView
getSelectedNodes () : Array
获取当前选中的节点。
获取当前选中的节点。
参数:
  • 无。
返回值:
  • Array
    HTMLElement数组
DataView
getSelectedRecords () : Array
获取选中记录的数组
获取选中记录的数组
参数:
  • 无。
返回值:
  • Array
    一个{@link Ext.data.Record}对象数组
DataView
getSelectionCount () : Number
获取选中节点的个数。
获取选中节点的个数。
参数:
  • 无。
返回值:
  • Number
    节点数
DataView
getSize () : Object
获取组件底层元素当前的大小。
获取组件底层元素当前的大小。
参数:
  • 无。
返回值:
  • Object
    一个包含元素大小的对象{width: (element width), height: (element height)}
BoxComponent
getStore () : Ext.data.Store
返回绑定到当前DataView是Store。
返回绑定到当前DataView是Store。
参数:
  • 无。
返回值:
  • Ext.data.Store
    store
DataView
getWidth () : Number
获取该组件的当前宽度值。
获取该组件的当前宽度值。
参数:
  • 无。
返回值:
  • Number
BoxComponent
getXType () : String
获取当前组件的xtype，它是用 Ext.ComponentMgr 注册的。 所有可用的xtype列表，参见...
获取当前组件的xtype，它是用 Ext.ComponentMgr 注册的。 所有可用的xtype列表，参见 Ext.Component 类头部。示例用法:

var t = new Ext.form.TextField();
alert(t.getXType());  // alerts 'textfield'
参数:
  • 无。
返回值:
  • String
    The xtype
Component
getXTypes () : String
返回此组件的xtype继承树，用字符'-'分隔。 所有可用的xtype值...

返回此组件的xtype继承树，用字符'-'分隔。 所有可用的xtype值，请参见Ext.Component 类的头部。

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

示例用法:

var t = new Ext.form.TextField();
alert(t.getXTypes());  // alerts 'component/box/field/textfield'
参数:
  • 无。
返回值:
  • String
    xtype层次字符串
Component
hasListener( String eventName ) : Boolean
检测对象是否包含指定事件的任何监听器
检测对象是否包含指定事件的任何监听器
参数:
  • eventName : String
    检测的事件名
返回值:
  • Boolean
    如果事件被监听则为true，否则为false
Observable
hide () : Ext.Component
隐藏当前组件。 监听 beforehide' 事件并且返回false 可以取消隐藏组件的操作。 在隐藏组件之后触发...
隐藏当前组件。 监听 beforehide' 事件并且返回false 可以取消隐藏组件的操作。 在隐藏组件之后触发 ' hide' 事件。 如果组件被配置成 hidden 那么此方法在内部被调用。
参数:
  • 无。
返回值:
  • Ext.Component
    this
Component
indexOf ( HTMLElement/String/Number/Record nodeInfo ) : Number
查找所传递节点的索引。
查找所传递节点的索引。
参数:
  • nodeInfo : HTMLElement/String/Number/Record
    一个HTMLElement模板节点、模板节点索引、模板节点id，或者一个 绑定到节点的记录。
返回值:
  • Number
    节点的索引，或者-1
DataView
isSelected ( HTMLElement/Number/Ext.data.Record node ) : Boolean
如果所传递的节点处于选中状态，返回true，其它为false
如果所传递的节点处于选中状态，返回true，其它为false
参数:
  • node : HTMLElement/Number/Ext.data.Record
    需要检测的节点、节点索引或者记录
返回值:
  • Boolean
    如果处于选中状态为true，其它为false
DataView
isVisible () : Boolean
如果当前组件可见，返回true。
如果当前组件可见，返回true。
参数:
  • 无。
返回值:
  • Boolean
    如果当前组件可见，返回true，其它返回false。
Component
isXType ( String xtype , [ Boolean shallow ] ) : Boolean
Tests whether or not this Component is of a specific xtype. This can test whether this Component is descended from th...

测试此组件是否是指定的xtype。此方法既可以测试是否是指定的xtype的某个子类， 或者它是否直接是指定的xtype类(shallow=true)。

如果使用你自己的子类，必须知道组件必须注册它的xtype值。

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

示例用法:

var t = new Ext.form.TextField();
var isText = t.isXType('textfield');        // true
var isBoxSubclass = t.isXType('box');       // true, descended from BoxComponent
var isBoxInstance = t.isXType('box', true); // false, not a direct BoxComponent instance
参数:
  • xtype : String
    需要为当前组件进行检测的xtype
  • shallow : Boolean
    (可选) 如果为false，检测组件是否是xtype继承树中的某个子类（默认是这种情况）， 如果为true，只检测组件是否是指定的xtype类型。
返回值:
  • Boolean
    如果当前组件是指定xtype的子类，返回true，其它返回flase。
Component
mon ( Observable|Element item , Object|String ename , Function fn , Object scope , Object opt ) : void
向任何Observable对象(或者元素)上添加监听器，监听器将会在组件...

向任何Observable对象(或者元素)上添加监听器，监听器将会在组件销毁时被自动删除。
用法：

myGridPanel.mon(myGridPanel.getSelectionModel(), 'selectionchange', handleSelectionChange, null, {buffer: 50});

or:

myGridPanel.mon(myGridPanel.getSelectionModel(), {
    selectionchange: handleSelectionChange,
    buffer: 50
});
参数:
  • item : Observable|Element
    需要添加listener/listeners的项目。
  • ename : Object|String
    事件名，或者一个包含事件名属性的对象。
  • fn : Function
    (可选) 如果 ename 参数是一个事件名，此参数为处理函数。
  • scope : Object
    (可选)如果 ename 参数是一个事件名称，此参数是作用域 ( this 引用)，监听函数将会在此作用域中被执行。
  • opt : Object
    (可选)如果 ename 参数是一个事件名称， 此参数是 addListener 配置项。
返回值:
  • void
Component
mun ( Observable|Element item , Object|String ename , Function fn , Object scope ) : void
删除通过mon 方法添加的监听器。
删除通过mon 方法添加的监听器。
参数:
  • item : Observable|Element
    需要删除listener/listeners的项目。
  • ename : Object|String
    事件名称，或者一个包含事件名称属性的对象。
  • fn : Function
    (可选)如果 ename 参数是一个事件名称，此参数是一个处理函数。
  • scope : Object
    (可选)如果 ename 参数是一个事件名称，此参数是作用域 ( this 引用)，监听函数将会在此作用域中被执行。
返回值:
  • void
Component
nextSibling () : Ext.Component
返回所属容器中的下一个组件
返回所属容器中的下一个组件
参数:
  • 无。
返回值:
  • Ext.Component
Component
on( String eventName, Function handler, [Object scope], [Object options] ) : void
给对象添加事件处理器 (addListener的简写形式)
给对象添加事件处理器 (addListener的简写形式。)
参数:
  • eventName : String
    监听的事件类型
  • handler : Function
    事件调用的方法
  • scope : Object
    （可选）处理方法执行时的作用域 (this 的引用)。 如果被忽略。默认为触发事件的对象。
  • options : Object
    可选 包含处理器配置的对象。
返回值:
  • void
Observable
prepareData ( Array/Object data , Number recordIndex , Record record ) : Array/Object
一个可以被覆盖的函数，用来为每条记录提供自定义格式，这些记录被 当前DataView的template用来...
一个可以被覆盖的函数，用来为每条记录提供自定义格式，这些记录被 当前DataView的template用来 渲染每个节点。
参数:
  • data : Array/Object
    原始数据对象，被用来创建记录。
  • recordIndex : Number
    准备被渲染的Record的索引值。
  • record : Record
    准备被渲染的Record
返回值:
  • Array/Object
    格式化后的数据，格式与内部{@link #tpl template}的overwrite() 方法期望的格式相同(如果你的参数是数字(例如{0})可以是数组；或者是一个 对象(例如{foo: 'bar'}))
DataView
previousSibling () : Ext.Component
返回所属容器中的前一个组件
返回所属容器中的前一个组件
参数:
  • 无。
返回值:
  • Ext.Component
Component
purgeListeners() : void
移除对象上所有的监听器
移除对象上所有的监听器
参数:
  • 无。
返回值:
  • void
Observable
refresh () : void
通过从store重新加载数据刷新视图并重新渲染模板。
通过从store重新加载数据刷新视图并重新渲染模板。
参数:
  • 无。
返回值:
  • void
DataView
refreshNode ( Number index ) : void
从store刷新一个无效节点的数据。
从store刷新一个无效节点的数据。
参数:
  • index : Number
    项目数据在store中的索引
返回值:
  • void
DataView
relayEvents( Object o, Array events ) : void
从指定的Observable上传递选择的事件就好像被当前对象触发一样。
从指定的Observable上传递选择的事件就好像被当前对象触发一样。
参数:
  • o : Object
    该Observable上的事件被当前对象传递。
  • events : Array
    传递的数组名。
返回值:
  • void
Observable
removeClass ( string cls ) : Ext.Component
从组件底层的元素上删除一个CSS类。
从组件底层的元素上删除一个CSS类。
参数:
  • cls : string
    需要移除的CSS类名
返回值:
  • Ext.Component
    this
Component
removeListener( String eventName, Function handler, [Object scope] ) : void
删除一个事件处理器。
删除一个事件处理器。
参数:
  • eventName : String
    处理器关联的事件类型。
  • handler : Function
    移除的处理器。 这应该是传递到addListener里的方法的引用。
  • scope : Object
    （可选）处理器指定的初始作用域。
返回值:
  • void
Observable
render ( [ Element/HTMLElement/String container ], [ String/Number position ] ) : void
在传递进来的HTML元素中渲染当前组件。...

在传递进来的HTML元素中渲染当前组件。

如果你正在使用一个Container 对象放置当前组件，那么请不要使用render方法。

当容器第一次被渲染时，它的子组件将会被容器的 layout 管理器渲染。

某些布局管理器允许动态添加子组件。它们包括 Ext.layout.CardLayout, Ext.layout.AnchorLayout, Ext.layout.FormLayout, Ext.layout.TableLayout。

当一个新的子组件被添加时，如果容器已经被渲染了， 你可能需要调用容器的 doLayout 方法来刷新视图，它将导致所有没有被渲染的子组件进行渲染操作。 此操作是必须的，这样你可以添加多个子组件而只刷新一次layout。

当创建复杂的UI时，非常重要的一点是，请记住调整子项目的尺寸和位置是容器的 layout 管理器的职责。 如果你希望子项目的尺寸对用户交互作出反应， 你必须为容器配置一个布局管理器，它将创建和管理你心里想要的那种布局。

忽略容器的layout 配置意味着将会使用一个基本的布局管理器，它除了按次序把子组件 渲染到容器中之外什么事情都不做。 这种情况下，任何尺寸和位置的调整操作都不会发生。

参数:
  • container : Element/HTMLElement/String
    (可选) 需要在其中渲染当前组件的元素。 如果它是从一个已存在的标签中创建的，此参数应该被忽略。
  • position : String/Number
    (可选) 容器中的一个元素ID或者一个DOM节点索引， 当前组件将会被插入到它前面 (默认append到容器的尾部)
返回值:
  • void
Component
resumeEvents() : void
重新开始触发事件。(参见suspendEvents) 如果事件以queueSuspended参数被挂起，则在事件被挂起时 ...
重新开始触发事件。(参见 suspendEvents) 如果事件以queueSuspended 参数被挂起，则在事件被挂起时触发的事件会被传递到所有的监听器上
参数:
  • 无。
返回值:
  • void
Observable
select ( Array/HTMLElement/String/Number/Ext.data.Record nodeInfo , [ Boolean keepExisting ], [ Boolean suppressEvent ] ) : void
选中一组节点。
选中一组节点。
参数:
  • nodeInfo : Array/HTMLElement/String/Number/Ext.data.Record
    一个HTMLElement模板节点、一个模板节点的索引、一个模板节点的 id，一个绑定到节点的记录，或者以上需要选中的任意组合的一个数组
  • keepExisting : Boolean
    (可选)true将会保持现有的选中状态
  • suppressEvent : Boolean
    (可选)True将会跳过触发selectionchange事件
返回值:
  • void
DataView
selectRange ( Number start , Number end , [ Boolean keepExisting ] ) : void
选中一个范围内的节点。所有处于start和end之间的节点都会被选中。
选中一个范围内的节点。所有处于start和end之间的节点都会被选中。
参数:
  • start : Number
    区间中第一个节点的索引
  • end : Number
    区间中最后一个节点的索引
  • keepExisting : Boolean
    (可选)True将保留现有的选中
返回值:
  • void
DataView
setAutoScroll ( Boolean scroll ) : Ext.BoxComponent
设置该组件内容溢出时是否自动显示滚动条。
设置该组件内容溢出时是否自动显示滚动条。
参数:
  • scroll : Boolean
    值为true的话组件自动显示滚动条。
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setDisabled ( Boolean disabled ) : Ext.Component
工具函数，使用布尔值设置有效/无效(disabled/enabled )。
工具函数，使用布尔值设置有效/无效(disabled/enabled )。
参数:
  • disabled : Boolean
返回值:
  • Ext.Component
    this
Component
setHeight ( Mixed height ) : Ext.BoxComponent
设置此组件的高度。该方法将触发resize事件。
设置此组件的高度。该方法将触发resize事件。
参数:
  • height : Mixed
    The new height to set.
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setPagePosition ( Number x , Number y ) : Ext.BoxComponent
设置组件在页面中的XY位置。 如果需要设置left和top值 ，请使用...
设置组件在页面中的XY位置。 如果需要设置left和top值 ，请使用setPosition方法。 该方法触发move事件。
参数:
  • x : Number
    The new x position
  • y : Number
    The new y position
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setPosition ( Number left , Number top ) : Ext.BoxComponent
设置组件的left和top值。设置组件的页面XY值，请使用setPagePosition方法。该方法触发...
设置组件的left和top值。设置组件的页面XY值，请使用setPagePosition方法。该方法触发move事件。
参数:
  • left : Number
    The new left
  • top : Number
    The new top
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setSize ( Mixed width , Mixed height ) : Ext.BoxComponent
设置BoxComponent的宽度和高度。 此方法触发resize事件...
设置BoxComponent的宽度和高度。 此方法触发resize事件。此方法可以接收单独的width或者height值作为参数， 或者你可以传递像这样的一个size对象： {width:10, height:20} 。
参数:
  • width : Mixed
    设置的新的width值。这可以是：
    • 一个Number类型指定Element新的宽度 Ext.Element.defaultUnit(默认为像素 :'px')。
    • 一个String类型用于设置width的CSS样式。
    • 一个size对象格式为 {width: widthValue, height: heightValue} 。
    • 值为 undefined 时，保留原来的width不变。
  • height : Mixed
    设置的新的height值(如果第一个参数传递了一个size对象，此参数没有必要传递)。这可以是：
    • 一个Number类型指定Element新的高度 Ext.Element.defaultUnit(默认为像素 :'px')。
    • 一个String类型用于设置height的CSS样式。也有可能不会被使用到。
    • 值为 undefined 时，保留原来的height不变。
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setStore ( Store store ) : void
改变绑定到当前view的数据store并且刷新它(已废弃，推荐使用bindStore)
改变绑定到当前view的数据store并且刷新它(已废弃，推荐使用bindStore)
参数:
  • store : Store
    需要绑定到当前view的store
返回值:
  • void
DataView
setVisible ( Boolean visible ) : Ext.Component
工具方法，通过使用布尔值隐藏或者显示当前组件。
工具方法，通过使用布尔值隐藏或者显示当前组件。
参数:
  • visible : Boolean
    true时显示，false时隐藏
返回值:
  • Ext.Component
    this
Component
setWidth ( Mixed width ) : Ext.BoxComponent
设置组件的宽度。 此方法触发resize事件。
设置组件的宽度。 此方法触发resize事件。
参数:
  • width : Mixed
    The new width to set.
返回值:
  • Ext.BoxComponent
    this
BoxComponent
show () : Ext.Component
显示当前组件。监听' beforeshow' 事件，返回 false 取消显示组件...
显示当前组件。监听' beforeshow' 事件，返回 false 取消显示组件。在显示组件之后触发' show' 事件。
参数:
  • 无。
返回值:
  • Ext.Component
    this
Component
suspendEvents( Boolean queueSuspended ) : void
暂停触发所有的事件。 (参看resumeEvents)
暂停触发所有的事件。（参看 resumeEvents)
参数:
  • queueSuspended : Boolean
    如果传递为true则排列好暂停的事件使得在调用 resumeEvents 后再触发它们，而不是抛弃所有暂停的事件。
返回值:
  • void
Observable
syncSize () : Ext.BoxComponent
强制组件的大小按照此组件底层元素当前的高度和宽度计算。
强制组件的大小按照此组件底层元素当前的高度和宽度计算。
参数:
  • 无。
返回值:
  • Ext.BoxComponent
    this
BoxComponent
un( String eventName, Function handler, [Object scope] ) : void
删除一个事件处理器(removeListener方法的简写形式)
删除一个事件处理器(removeListener方法的简写形式。)
参数:
  • eventName : String
    处理器关联的事件类型
  • handler : Function
    被删除的处理器 这应该是传入 addListener 中的方法的引用。
  • scope : Object
    （可选）为处理器指定的初始作用域。
返回值:
  • void
Observable
update ( Mixed htmlOrData , [ Boolean loadScripts ], [ Function callback ] ) : void
刷新组件的内部区域。
刷新组件的内部区域。
参数:
  • htmlOrData : Mixed
    如果已经通过tpl为当前组件配置了一个模板，那么 将会使用此参数来装配模板。 如果没有为当前组件配置模板，组件的内容区域将会通过Ext.Element 进行刷新。
  • loadScripts : Boolean
    (可选)只用在使用html配置时此参数才合法。默认为false。
  • callback : Function
    (可选)只用在使用html配置时此参数才合法。 当脚本加载完成时回调函数才被执行。
返回值:
  • void
Component
updateBox ( Object box ) : Ext.BoxComponent
设置此组件底层元素的盒子模型尺寸。(译者注：盒子模型是CSS术语，详细资料请自行搜索。)
设置此组件底层元素的盒子模型尺寸。(译者注：盒子模型是CSS术语，详细资料请自行搜索。)
参数:
  • box : Object
    一个格式为{x, y, width, height}的对象
返回值:
  • Ext.BoxComponent
    this
BoxComponent

公共事件

Event Defined By
added : ( Ext.Component this , Ext.Container ownerCt , number index )
当一个组件被添加到一个Ext.Container时触发
当一个组件被添加到一个Ext.Container时触发
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • ownerCt : Ext.Container
    用于组件的容器
  • index : number
    添加组件的位置
Component
afterrender : ( Ext.Component this )
在组件渲染完成之后触发...

在组件渲染完成之后触发。

afterrender事件在当前组件被rendered 结束之后、在为组件定义的所有afterRender方法执行之后 触发，并且，如果有stateful， 也在状态被保存之后才触发。

监听器将会以如下参数格式被调用:
  • this : Ext.Component
Component
beforeclick : ( Ext.DataView this , Number index , HTMLElement node , Ext.EventObject e )
在处理一个单击之前触发。 返回false以取消默认的操作。
在处理一个单击之前触发。 返回false以取消默认的操作。
监听器将会以如下参数格式被调用:
  • this : Ext.DataView
  • index : Number
    目标节点的索引
  • node : HTMLElement
    目标节点
  • e : Ext.EventObject
    原始事件对象
DataView
beforedestroy : ( Ext.Component this )
在组件 destroyed 之前触发。 在事件监听器中返回false以停止 destroy 操作。
在组件 destroyed 之前触发。 在事件监听器中返回false以停止 destroy 操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforehide : ( Ext.Component this )
在调用hide方法隐藏组件之前触发。 在事件监听器中返回false可以停止隐藏操作。
在调用hide方法隐藏组件之前触发。 在事件监听器中返回false可以停止隐藏操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforerender : ( Ext.Component this )
在组件被rendered 之前触发。 在事件监听器中返回false可以停止render 操作。
在组件被rendered 之前触发。 在事件监听器中返回false可以停止render 操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforeselect : ( Ext.DataView this , HTMLElement node , Array selections )
在进行一次选择之前触发。 如果任何监听器返回false，则取消选中。
在进行一次选择之前触发。 如果任何监听器返回false，则取消选中。
监听器将会以如下参数格式被调用:
  • this : Ext.DataView
  • node : HTMLElement
    需要被选中的节点
  • selections : Array
    当前选中节点的数组
DataView
beforeshow : ( Ext.Component this )
在调用show()方法现实组件之前触发。 事件处理函数返回false可以停止show。
在调用show 方法现实组件之前触发。 事件处理函数返回false可以停止show。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforestaterestore : ( Ext.Component this , Object state )
在组件状态恢复之前触发。返回false停止恢复状态操作。
在组件状态恢复之前触发。返回false停止恢复状态操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    StateProvider返回的状态哈希值。 如果没有禁止此事件，那么状态对象会被传递给applyState。 默认情况下，这样简单地把属性值拷贝到当前组件中。 可以覆盖此方法以提供自定的状态恢复操作。
Component
beforestatesave : ( Ext.Component this , Object state )
在组件状态被保存到配置的状态提供者之前触发。 返回false可以停止保存。
在组件状态被保存到配置的状态提供者之前触发。 返回false可以停止保存。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    状态值哈希。 这由在组件上调用getState() 方法决定。 此方法必须由开发者提供，返回是否需要对状态进行描述，默认情况下， Ext.Component有一个空实现。
Component
click : ( Ext.DataView this , Number index , HTMLElement node , Ext.EventObject e )
当一个模板节点被点击时触发。
当一个模板节点被点击时触发。
监听器将会以如下参数格式被调用:
  • this : Ext.DataView
  • index : Number
    目标节点的索引
  • node : HTMLElement
    目标节点
  • e : Ext.EventObject
    原始事件对象
DataView
containerclick : ( Ext.DataView this , Ext.EventObject e )
当发生点击并且目标不是模板节点时触发。
当发生点击并且目标不是模板节点时触发。
监听器将会以如下参数格式被调用:
  • this : Ext.DataView
  • e : Ext.EventObject
    原始事件对象
DataView
containercontextmenu : ( Ext.DataView this , Ext.EventObject e )
当发生右击并且目标不是模板节点时触发。
当发生右击并且目标不是模板节点时触发。
监听器将会以如下参数格式被调用:
  • this : Ext.DataView
  • e : Ext.EventObject
    原始事件对象
DataView
contextmenu : ( Ext.DataView this , Number index , HTMLElement node , Ext.EventObject e )
当一个模板节点被右击时触发。
当一个模板节点被右击时触发。
监听器将会以如下参数格式被调用:
  • this : Ext.DataView
  • index : Number
    目标节点的索引
  • node : HTMLElement
    目标节点
  • e : Ext.EventObject
    原始事件对象
DataView
dblclick : ( Ext.DataView this , Number index , HTMLElement node , Ext.EventObject e )
当一个模板节点被双击时触发。
当一个模板节点被双击时触发。
监听器将会以如下参数格式被调用:
  • this : Ext.DataView
  • index : Number
    目标节点的索引
  • node : HTMLElement
    目标节点
  • e : Ext.EventObject
    原始事件对象
DataView
destroy : ( Ext.Component this )
在组件被销毁之后触发。
在组件被destroyed之后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
disable : ( Ext.Component this )
在组件被设置为无效状态后触发。
在组件被设置为无效状态后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
enable : ( Ext.Component this )
当组件被设置为有效(enabled)之后触发。
当组件被设置为有效(enabled)之后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
hide : ( Ext.Component this )
在组件被隐藏之后触发。 当调用hide 方法隐藏组件之后触发。
在组件被隐藏之后触发。 当调用hide 方法隐藏组件之后触发。
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
mouseenter : ( Ext.DataView this , Number index , HTMLElement node , Ext.EventObject e )
当鼠标进入模板节点时触发。 必须设置trackOver:true或者overClass以便启用此事件。
当鼠标进入模板节点时触发。 必须设置trackOver:true或者overClass以便启用此事件。
监听器将会以如下参数格式被调用:
  • this : Ext.DataView
  • index : Number
    目标节点的索引
  • node : HTMLElement
    目标节点
  • e : Ext.EventObject
    原始事件对象
DataView
mouseleave : ( Ext.DataView this , Number index , HTMLElement node , Ext.EventObject e )
当鼠标离开一个模板节点时触发。必须设置trackOver:true或者overCls，以便启用此事件。
当鼠标离开一个模板节点时触发。必须设置trackOver:true或者overCls，以便启用此事件。
监听器将会以如下参数格式被调用:
  • this : Ext.DataView
  • index : Number
    目标节点的索引
  • node : HTMLElement
    目标节点
  • e : Ext.EventObject
    原始事件对象
DataView
move : ( Ext.Component this , Number x , Number y )
在组件移动之后触发。
在组件移动之后触发。
监听器将会用如下的参数格式来调用:
  • this : Ext.Component
  • x : Number
    The new x position
  • y : Number
    The new y position
BoxComponent
removed : ( Ext.Component this , Ext.Container ownerCt )
当一个组件被从Ext.Container容器中删除时触发
当一个组件被从Ext.Container容器中删除时触发
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • ownerCt : Ext.Container
    持有组件的容器
Component
render : ( Ext.Component this )
在组件被渲染之后触发。
在组件被 rendered(渲染) 之后触发。
监听器将以如下的参数格式被调用:
  • this : Ext.Component
Component
resize : ( Ext.Component this , Number adjWidth , Number adjHeight , Number rawWidth , Number rawHeight )
在组件被调整大小之后触发。
在组件被调整大小之后触发。
监听器将以如下的参数格式被调用:
  • this : Ext.Component
  • adjWidth : Number
    这是width调整后的值
  • adjHeight : Number
    这是height调整后的值
  • rawWidth : Number
    这是width原来的值
  • rawHeight : Number
    这是height原来的值
BoxComponent
selectionchange : ( Ext.DataView this , Array selections )
当选中的节点发生变化时触发。
当选中的节点发生变化时触发。
监听器将会以如下参数格式被调用:
  • this : Ext.DataView
  • selections : Array
    选中节点的数组
DataView
show : ( Ext.Component this )
在调用show 方法显示组件之后触发。
在调用show 方法显示组件之后触发。
监听器将会用如下的参数格式被调用:
  • this : Ext.Component
Component
staterestore : ( Ext.Component this , Object state )
组件状态被存储之后触发。
组件状态被存储之后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    StateProvider返回的状态哈希值。 如果没有禁止此事件，那么状态对象会被传递给applyState。 默认情况下，这样简单地把属性值拷贝到当前组件中。 可以覆盖此方法以提供自定的状态恢复操作。
Component
statesave : ( Ext.Component this , Object state )
在组件状态被保存到所配置的状态提供者之后触发。
在组件状态被保存到所配置的状态提供者之后触发。
监听器将会用如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    状态值hash。 这是由在足见上调用getState() 方法决定的。 开发者必须提供此方法以返回是否需要恢复状态，默认情况下， Ext.Component有一个空实现。
Component


Column
    NumberColumn

Class Ext.list.NumberColumn

包: | Ext.list
定义类的文件: | Column.js
类: | NumberColumn
继承自: | Column

一个列定义类，根据format 字符串渲染数值型数据项。 更多细节参见Ext.list.Column 的xtype 配置项。

配置项

Config Options |  | Defined By
 | align : String 设置列中CSS的text-align参数。默认为'left'。 | Column
 | cls : String 可选。此选项可以用来为每列中每一行的单元格添加CSS样式类。 | Column
 | dataIndex : String 必须。 ListViews的Ext.data.Store的 Ext.data.Record 定义中定义的字段名... 必须。 ListViews的Ext.data.Store的 Ext.data.Record 定义中定义的字段名，用来渲染列值。 | Column
 | format : String 一个格式字符串，与Ext.util.Format.number 中使用的相同，用来为当前列格式化一个数字值... 一个格式字符串，与Ext.util.Format.number 中使用的相同，用来为当前列格式化一个数字值(默认为 '0,000.00')。 | NumberColumn
 | header : String 可选。需要被用作innerHTML的标题文本(接受html标签)，在ListView中显示。... 可选。需要被用作innerHTML的标题文本(接受html标签)，在ListView中显示。 注意:如需一个可以被点击的标题而没有显示的文本，使用 ' '。 | Column
 | tpl : String 可选。指定一个字符串 作为Ext.XTemplate 的配置字符串传递... 可选。指定一个字符串 作为Ext.XTemplate 的配置字符串传递。 默认情况下，使用dataIndex在内部隐含创建一个 Ext.XTemplate。 | Column
 | width : Number 可选。当前列占容器宽度的百分比。如果列没有指定宽度，将会平均分配容器100%的宽度。... 可选。当前列占容器宽度的百分比。如果列没有指定宽度，将会平均分配容器100%的宽度。 如需简单地利用容器的全部宽度，至少留下一列为undefined。注意，如果你不想占满容器 的全部宽度，每一列的宽度都需要明确定义。 | Column

公共属性

该类没有公共属性。

公共方法

该类没有公共方法。

公共事件

该类没有公共事件。


Observable
    Sorter

Class Ext.list.Sorter

包: | Ext.list
定义类的文件: | Sorter.js
类: | Sorter
继承自: | Observable

Ext.list.ListView的支持类

配置项

Config Options Defined By
listeners : Object
一个包含一个或多个事件处理器的配置对象，会在初始化的时候被添加到目标对象上...

一个包含一个或多个事件处理器的配置对象，会在初始化的时候被添加到目标对象上。 该配置对象应该是一个有效的监听器配置对象就像 addListener例子中指定的一样可一次附加多个处理器。

ExtJs Components上的DOM事件

一些 ExtJs Component 类导出时会选择一些DOM事件(例如 "click", "mouseover" 等等), 这通常只是在有额外的值可以被添加时发生。例如DataView类的 click事件会传递被点击的节点。也可以直接在Component的HTMLElementevent上访问DOM事件，但必需在Component被渲染后监听器才能添加到Element 上。可以按照以下步骤添加插件:

// 插件会用一个监听器配置对象进行配置。
//该组件会被添加到所有处理方法的参数列表上。
Ext.DomObserver = Ext.extend(Object, {
    constructor: function(config) {
        this.listeners = config.listeners ? config.listeners : config;
    },

    // 组件将自己传递进了插件的初始化方法里
    init: function(c) {
        var p, l = this.listeners;
        for (p in l) {
            if (Ext.isFunction(l[p])) {
                l[p] = this.createHandler(l[p], c);
            } else {
                l[p].fn = this.createHandler(l[p].fn, c);
            }
        }

        // 渲染后立即添加监听器到元素上
        c.render = c.render.createSequence(function() {
            var e = c.getEl();
            if (e) {
                e.on(l);
            }
        });
    },

    createHandler: function(fn, c) {
        return function(e) {
            fn.call(this, e, c);
        };
    }
});

var combo = new Ext.form.ComboBox({

    // 元素被点击后折叠
    plugins: [ new Ext.DomObserver({
        click: function(evt, comp) {
            comp.collapse();
        }
    })],
    store: myStore,
    typeAhead: true,
    mode: 'local',
    triggerAction: 'all'
});

Observable
sortClasses : Array
当被排序后应用到头部区域的CSS类(默认为 ["sort-asc", "sort-desc"])
Sorter

公共属性

该类没有公共属性。

公共方法

Method Defined By
Sorter ( Object config )
参数:
  • config : Object
返回值:
  • void
Sorter
addEvents( Object|String o, string Optional. ) : void
添加指定的事件到事件列表上，事件会被该Observable触发。
添加指定的事件到事件列表上，事件会被该Observable触发。
参数:
  • o : Object|String
    以事件名作为属性true作为值的对象 或者当多个事件名被分开的传递时则为第一个事件名。
  • Optional. : string
    事件名被分开的传递时则为事件名。 用法:
    this.addEvents('storeloaded', 'storecleared');
返回值:
  • void
Observable
addListener( String eventName, Function handler, [Object scope], [Object options] ) : void
给对象添加事件处理器。
给对象添加事件处理器。
参数:
  • eventName : String
    监听的事件名。
  • handler : Function
    事件调用的方法
  • scope : Object
    （可选）处理方法执行的作用域 (this的引用 reference)。 如果被忽略。默认为触发事件的对象。
  • options : Object
    （可选）包含处理器配置和属性的对象。 可能包含以下的属性:
    • scope : Object
      处理方法执行的作用域(this的引用) 。 如果被忽略。默认为触发事件的对象。
    • delay : Number
      在触发事件后延迟调用处理器的毫秒数。
    • single : Boolean
      如果为True则添加一个处理器来处理下一次的事件触发（仅一次），然后移除自己。
    • buffer : Number
      使得处理器延迟指定毫秒数后预定的运行在 一个Ext.util.DelayedTask中 。 如果事件在时间内再一次被触发，原始的处理器不会被调用，但是新的处理器会预定的在他的位置上。
    • target : Observable
      如果事件在目标的Observable上触发则仅仅调用处理器， 否则 事件会从子类的Observable上冒泡

    组合选项
    使用这些选项参数,可能会组合出不同类型的监听器：

    一个延迟的，一次性的监听器。

    myDataView.on('click', this.onClick, this, {
single: true,
delay: 100
});

    一次调用附加多个处理器
    该方法同样支持传递一个包含指定的多个处理器的属性的配置对象参数。

    myGridPanel.on({
'click' : {
    fn: this.onClick,
    scope: this,
    delay: 100
},
'mouseover' : {
    fn: this.onMouseOver,
    scope: this
},
'mouseout' : {
    fn: this.onMouseOut,
    scope: this
}
});

    或者一个简写的语法：

    myGridPanel.on({
'click' : this.onClick,
'mouseover' : this.onMouseOver,
'mouseout' : this.onMouseOut,
 scope: this
});
返回值:
  • void
Observable
enableBubble( String/Array events ) :void
是否现在使得事件会被该Observable触发并调用 this.getBubbleTarget()方法在拥有者的继承树...

是否现在使得事件会被该Observable触发并调用 this.getBubbleTarget()方法在拥有者的继承树中冒泡。Observable的基础类中没有该方法的实现。

该方法一般被Ext.Components用来冒泡事件到拥有者的容器。参看Ext.Component.getBubbleTarget默认的实现 在Ext.Component中返回组件的直接拥有者。但是如果需要的是一个已知的目标，该方法可以被重写来更快的访问需求的目标。

例子:

Ext.override(Ext.form.Field, {
    // 添加方法到Field的initComponent上改变事件为冒泡
    initComponent : Ext.form.Field.prototype.initComponent.createSequence(function() {
        this.enableBubble('change');
    }),

    // 我们知道我们想让Field的事件冒泡到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() {
            // 如果样式被修改标题会变红。
            myForm.header.setStyle('color', 'red');
        }
    }
});
参数:
  • events : String/Array
    冒泡的事件名，或事件名数组
返回值:
  • void
Observable
fireEvent( String eventName, Object... args ) : Boolean
用传入的参数触发指定的事件 (减去事件名)。 一个事件可以被设置为冒泡 Obse...

用传入的参数触发指定的事件 (减去事件名)。

一个事件可以被设置为冒泡到Observable父类继承树(参看 Ext.Component.getBubbleTarget) 调用enableBubble实现。

参数:
  • eventName : String
    触发的事件名。
  • args : Object...
    传递给处理器的可变长度参数。
返回值:
  • Boolean
    如果有任何的处理器返回false则返回false，否则返回true。
Observable
hasListener( String eventName ) : Boolean
检测对象是否包含指定事件的任何监听器
检测对象是否包含指定事件的任何监听器
参数:
  • eventName : String
    检测的事件名
返回值:
  • Boolean
    如果事件被监听则为true，否则为false
Observable
on( String eventName, Function handler, [Object scope], [Object options] ) : void
给对象添加事件处理器 (addListener的简写形式)
给对象添加事件处理器 (addListener的简写形式。)
参数:
  • eventName : String
    监听的事件类型
  • handler : Function
    事件调用的方法
  • scope : Object
    （可选）处理方法执行时的作用域 (this 的引用)。 如果被忽略。默认为触发事件的对象。
  • options : Object
    可选 包含处理器配置的对象。
返回值:
  • void
Observable
purgeListeners() : void
移除对象上所有的监听器
移除对象上所有的监听器
参数:
  • 无。
返回值:
  • void
Observable
relayEvents( Object o, Array events ) : void
从指定的Observable上传递选择的事件就好像被当前对象触发一样。
从指定的Observable上传递选择的事件就好像被当前对象触发一样。
参数:
  • o : Object
    该Observable上的事件被当前对象传递。
  • events : Array
    传递的数组名。
返回值:
  • void
Observable
removeListener( String eventName, Function handler, [Object scope] ) : void
删除一个事件处理器。
删除一个事件处理器。
参数:
  • eventName : String
    处理器关联的事件类型。
  • handler : Function
    移除的处理器。 这应该是传递到addListener里的方法的引用。
  • scope : Object
    （可选）处理器指定的初始作用域。
返回值:
  • void
Observable
resumeEvents() : void
重新开始触发事件。(参见suspendEvents) 如果事件以queueSuspended参数被挂起，则在事件被挂起时 ...
重新开始触发事件。(参见 suspendEvents) 如果事件以queueSuspended 参数被挂起，则在事件被挂起时触发的事件会被传递到所有的监听器上
参数:
  • 无。
返回值:
  • void
Observable
suspendEvents( Boolean queueSuspended ) : void
暂停触发所有的事件。 (参看resumeEvents)
暂停触发所有的事件。（参看 resumeEvents)
参数:
  • queueSuspended : Boolean
    如果传递为true则排列好暂停的事件使得在调用 resumeEvents 后再触发它们，而不是抛弃所有暂停的事件。
返回值:
  • void
Observable
un( String eventName, Function handler, [Object scope] ) : void
删除一个事件处理器(removeListener方法的简写形式)
删除一个事件处理器(removeListener方法的简写形式。)
参数:
  • eventName : String
    处理器关联的事件类型
  • handler : Function
    被删除的处理器 这应该是传入 addListener 中的方法的引用。
  • scope : Object
    （可选）为处理器指定的初始作用域。
返回值:
  • void
Observable

公共事件

该类没有公共事件。


Class Ext.LoadMask

包: | Ext
定义类的文件: | LoadMask.js
类: | LoadMask
继承自: | Object
一个简单的工具类，一般用来在加载数据时遮罩住元素。如果指定了 store配置选项， 遮罩将自动与store的加载进程同步，并且遮罩元素将被缓存以复用。对于其它所有元素， 当前遮罩将会替换元素Updater的加载提示器，并且在初始化加载之后销毁。

Example usage:

// Basic mask:
var myMask = new Ext.LoadMask(Ext.getBody(), {msg:"Please wait..."});
myMask.show();

配置项

Config Options |  | Defined By
 | msg : String 居中显示的加载消息框内显示的文本。(默认值为 'Loading...') | LoadMask
 | msgCls : String 应用到加载消息元素上的CSS类 (默认值为 "x-mask-loading") | LoadMask
 | removeMask : Boolean 设置为true将创建一个一次性的遮罩，在加载完成之后被自动销毁 (对于页面加载非常有用)， 设置为false...... 设置为true将创建一个一次性的遮罩，在加载完成之后被自动销毁 (对于页面加载非常有用)， 设置为false将存储遮罩元素的引用以便复用 (例如：对于分页数据组件)。 默认为false。 | LoadMask
 | store : Ext.data.Store 可选的Store，遮罩被绑定到其上。 当一个加载请求发出后遮罩被显示， 在加载...... 可选的Store，遮罩被绑定到其上。 当一个加载请求发出后遮罩被显示， 在加载成功或者加载失败时被隐藏。 | LoadMask

公共属性

Property |  | Defined By
 | disabled : Boolean 只读属性。 如果遮罩当前被禁用，返回true， 这样它就不会被显示 。 (默认值为 false) | LoadMask

公共方法

Method Defined By
LoadMask ( Mixed el , Object config )
创建一个新的遮罩。
创建一个新的遮罩。
参数:
  • el : Mixed
    该元素或DOM节点, 或它的ID
  • config : Object
    The config object
返回值:
  • void
LoadMask
disable () : void
禁用遮罩，阻止它被显示。
禁用遮罩，阻止它被显示。
参数:
  • 无。
返回值:
  • void
LoadMask
enable () : void
启用遮罩，以便显示它。
启用遮罩，以便显示它。
参数:
  • 无。
返回值:
  • void
LoadMask
hide () : void
隐藏当前的遮罩。
隐藏当前的遮罩。
参数:
  • 无。
返回值:
  • void
LoadMask
show () : void
将当前遮罩显示在配置的元素上。
将当前遮罩显示在配置的元素上。
参数:
  • 无。
返回值:
  • void
LoadMask

公共事件

该类没有公共事件。


Observable
    Component
      BaseItem

Class Ext.menu.BaseItem

包: | Ext.menu
定义类的文件: | BaseItem.js
类: | BaseItem
子类: | Item, Separator, TextItem
继承自: | Component
渲染到菜单中的所有项目的基类。 BaseItem为所有菜单组件提供基本的渲染、活动状态管理和配置选项共享的功能。

配置项

Config Options Defined By
activeClass : String
当一个项目变成当前活动项时所应用的CSS样式 (默认值为"x-menu-item-active")
BaseItem
allowDomMove : Boolean
在渲染时组件是否可以移动Dom节点(默认为true)。
Component
applyTo : Mixed
指定一个元素的id、一个DOM元素或者一个已经存在并被渲染到DIV中的元素，此DIV已经被...

指定一个元素的id、一个DOM元素或者一个已经存在并被渲染到DIV中的元素，此DIV已经被 渲染到document中，并且为当前组件指定了一些结构化的标签。

  • 描述 :
      当使用了 applyTo， 在主元素中也可以用id或者CSS类名来指定组件的托管部分， 并且，如果可以的话，创建的组件可能也会试图在那个标签中创建它的子组件。
  • 注意 :
      当使用此配置项时，无需调用render()方法。
      如果指定了applyTo属性，任何传递给 renderTo 的值都会被忽略，并且目标元素的父节点将会自动被用作组件的容器。
Component
autoEl : Mixed
一个表签名或者一个 DomHelper 描述，用来创建 Element ，它将封装当前组件...

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

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

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

{
    xtype: 'box',
    autoEl: {
        tag: 'img',
        src: 'http://www.example.com/example.jpg'

    }
}, {
    xtype: 'box',
    autoEl: {
        tag: 'blockquote',
        html: 'autoEl is cool!'
    }
}, {
    xtype: 'container',
    autoEl: 'ul',
    cls: 'ux-unordered-list',
    items: {
        xtype: 'box',
        autoEl: 'li',
        html: 'First list item'
    }
}
Component
autoShow : Boolean
如果组件需要检测隐藏CSS属性(如 'x-hidden' 或者 'x-hide-display')并且在渲染时删除...
如果组件需要检测隐藏CSS属性(如 'x-hidden' 或者 'x-hide-display')并且在渲染时删除它们 (默认为false)，设置此值为true。
Component
bubbleEvents : Array
一个事件数组，当这些事件被触发时，将会被冒泡到所有父容器中。参见....

一个事件数组，当这些事件被触发时，将会被冒泡到所有父容器中。参见 Ext.util.Observable.enableBubble。 默认为 []。

Component
canActivate : Boolean
当值为true时该选项被视觉激活 (默认值为 false)
BaseItem
clearCls : String
应用到特殊的clearing div的CSS类， 这个clearing div直接渲染到每个form field的包装器后面...

应用到特殊的clearing div的CSS类， 这个clearing div直接渲染到每个form field的包装器后面，以提供 清除field的功能(默认为 'x-form-clear-left')。

注意: 只有在当前组件被渲染到一个使用FormLayout 布局(例如 Ext.form.FormPanel 或者指定 layout:'form')的 容器中、或者是指定了一个fieldLabel 、或者指定isFormField=true 时此配置才有效。

另请参见 Ext.layout.FormLayout. fieldTpl。

Component
clickHideDelay : Number
点击之后的隐藏一个项目的延迟毫秒数(默认值为 1 )
BaseItem
cls : String
一个可选的额外CSS类，它将被添加到当前组件的元素上(默认为'')...
一个可选的额外CSS类，它将被添加到当前组件的元素上(默认为'')。 此属性对于在组件上，或者它的任何使用标准CSS规则的孩子节点上， 添加定制的样式非常有用。
Component
contentEl : String
(可选)指定一个已存在的HTML元素，或者一个已存在HTML元素的...

(可选)指定一个已存在的HTML元素，或者一个已存在HTML元素的 id ，它们将被用作当前组件的内容。

  • 描述 :
    此配置选项被用来将一个已存在的HTML元素 插入到一个新组件(在组件渲染之后它简单地移动DOM元素) 的layout元素中，使它成为该组件的内容。
  • 注意 :
    指定的HTML元素将被append到组件的layout元素中， 在所有配置的 HTML 被插入之后， 并且，这样的话，在render事件 被触发时，document中将不再包含此元素。
    指定的HTML元素将不会参与组件所有可能使用的 layout 过程(译者注：指这些HTML元素 不会参与布局操作)。 它仅是HTML而已。布局操作实在孩子 items 上进行的。
    添加 x-hidden 或者 x-hide-display CSS类，以防在内容渲染到panel时发生闪烁。
Component
ctCls : String
一个可选的外部CSS样式，添加到这个组件的容器(默认值为 '')。 这个方法对于使用标准的CSS规则...

一个可选的外部CSS样式，添加到这个组件的容器(默认值为 '')。 这个方法对于使用标准的CSS规则，为组件或它的任何一个子组件添加特定的样式非常有用。 参见 Ext.layout.ContainerLayout和 extraCls 。

注意: ctCls 默认为 ''期望如下的类，它们将指定一个默认值:

  • Box Layout : 'x-box-layout-ct'
使用一个额外的CSS类配置以上的Class，它是append到默认对象上的。例如， 对于BoxLayout (Hbox and Vbox):
                                ctCls: 'x-box-layout-ct custom-class'

Component
data : Mixed
初始化数据集，它将被应用到 tpl 上以刷新组件的内容区域。
Component
disabled : Boolean
当前组件处于无效状态时为true。 Read-only.
Component
disabledClass : String
当组件处于无效状态时添加到组件上的CSS类(默认为 'x-item-disabled')。
Component
fieldLabel : String
紧靠此field显示的标签文本(默认值为 '')。注意...

紧靠此field显示的标签文本(默认值为 '')。

注意:只有在当前组件被渲染到一个使用FormLayout 的容器中时，此配置才有效。 (例如 Ext.form.FormPanel 或 指定 layout:'form')。

另请参见 hideLabel 、 Ext.layout.FormLayout和 fieldTpl。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Name'
    }]
});
Component
handler : Function
(可选)一个处理菜单项点击事件的函数。该函数包含下列...
(可选)一个处理菜单项点击事件的函数。该函数包含下列参数：
  • b : Item
    当前菜单。
  • e : EventObject
    单击事件。
BaseItem
hidden : Boolean
如果当前组件处于隐藏状态，此值为true。Read-only。
Component
hideLabel : Boolean
true时完全隐藏label元素 ( label 和 separator)。 默认为 false。 默认情况下，即使你不指定...

true时完全隐藏label元素 ( label 和 separator)。 默认为 false。 默认情况下，即使你不指定 fieldLabel 它的空间仍然会被保留，这样这块区域会与其它确实拥有label的区域位于同一排。 讲此值设置为 true 将导致此区域不再保留此空间。

注意: 参见 clearCls 的注释。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield'
        hideLabel: true
    }]
});
Component
hideMode : String
组件如何隐藏，支持的值有： 'visibility' (css visibility), 'offsets' (位置偏移量为负值) 和...

组件如何隐藏，支持的值有： 'visibility' (css visibility), 'offsets' (位置偏移量为负值) 和 'display' (css display).

注意:一般首选默认值 'display'，因为当组件第一次显示的时候它们会自动进行布局 (隐藏的时候不会调整尺寸)。

Component
hideOnClick : Boolean
当值为true时，单击该选项后隐藏所包含的内部菜单 (默认值为 true)
BaseItem
hideParent : Boolean
此值为true时，当调用hide/show方法时，将会hide和show组件的容器...
此值为true时，当调用hide/show方法时，将会hide和show组件的容器；false时将会 hide和show组件自身(默认为false)。例如，这可以用作window上隐藏按钮的一种 快捷操作，通过设置此按钮的hideParent:true，然后把它添加到window上。
Component
html : String/Object
一个HTML片段，或者一个 DomHelper 描述，用作layout元素的内容(默认为'')。...
一个HTML片段，或者一个 DomHelper 描述，用作layout元素的内容(默认为'')。 这个HTML内容在组件渲染之后才被添加，所以在 render 出发的时候，document中尚未包含此HTML。 但是这个内容将会在所有配置的 contentEl 之前被插入到body标签中。
Component
id : String
当前组件唯一的id(默认为auto-assigned id)...

当前组件唯一的id(默认为auto-assigned id)。 如果你需要在以后访问组件，而又没有一个有效的组件对象引用，那么你需要指定一个 id( 也就是，使用Ext. getCmp方法 )。

注意，此id也将被用作组件底层HTML标签的id，这些标签被渲染到页面中。 这将允许你编写基于id的CSS规则，以独立地描述指定的实例；并且，也可以通过 组件父标签的id选中子元素。

注意:为了避免与唯一的id 产生重复， 请参见 itemId 和 ref 。

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

Component
itemCls : String
注意: 只有在当前组件被渲染到一个使用FormLayout 布局的 容器中时此配置才有效...

注意: 只有在当前组件被渲染到一个使用FormLayout 布局的 容器中时此配置才有效。 (例如Ext.form.FormPanel 或者指定 layout:'form')。

一个附加的CSS类，应用到div上，包装当前field的表单元素。 如果提供了此参数， field级上的itemCls将会覆盖 container级上提供的 默认itemCls。 为itemCls指定的值将会被添加默认的 类('x-form-item')。

既然它被应用到项目的包装器上(参见 Ext.layout.FormLayout。 fieldTpl)， 它将允许你编写能应用到此field、label(如果有指定)、或者field内部任何其它元素的标准CSS规则。

注意: 参考 fieldLabel的注释。 .

示例用法:

// Apply a style to the field's label:
<style>
    .required .x-form-item-label {font-weight:bold;color:red;}
</style>

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Name',
        itemCls: 'required' //this label will be styled
    },{
        xtype: 'textfield',
        fieldLabel: 'Favorite Color'
    }]
});
Component
itemId : String
当没有可利用的对象引用时，itemId可以作为第二选择，用来获得一个组件的引用， 代替 ...

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

var c = new Ext.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'); // 与 Ext.getCmp()不同

p2 = p1.ownerCt.getComponent('p2'); // 通过兄弟对象获得引用

另请参见 id 和 ref 。

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

Component
labelSeparator : String
每个fieldLabel 文本后面现实的分隔符。 此属性可以在多个层次上进行配置...

每个fieldLabel 文本后面现实的分隔符。 此属性可以在多个层次上进行配置。优先顺序为：

  • field / component level
  • container level
  • layout level (默认为冒号 ':')
如不需要为当前field的label显示分隔符，指定一个空字符串''即可。

注意:参见 clearCls 的注释。

另请参见 hideLabel 和 Ext.layout.FormLayout。 fieldTpl。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    layoutConfig: {
        labelSeparator: '~'   // layout config has lowest priority (defaults to ':')
    },
    labelSeparator: '>>',     // config at container level
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Field 1',
        labelSeparator: '...' // field/component level config supersedes others
    },{
        xtype: 'textfield',
        fieldLabel: 'Field 2' // labelSeparator will be '='

    }]
});
Component
labelStyle : String
一个CSS样式描述字符串，它将直接应用到当前field的label上...

一个CSS样式描述字符串，它将直接应用到当前field的label上。 如果有设置，默认为容器的labelStyle值(例如 Ext.layout.FormLayout.labelStyle , 或者 '')。

注意:参见 clearCls 的注释。

另请参见 hideLabel 和 Ext.layout.FormLayout. fieldTpl。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Name',
        labelStyle: 'font-weight:bold;'
    }]
});
Component
listeners : Object
一个包含一个或多个事件处理器的配置对象，会在初始化的时候被添加到目标对象上...

一个包含一个或多个事件处理器的配置对象，会在初始化的时候被添加到目标对象上。 该配置对象应该是一个有效的监听器配置对象就像 addListener例子中指定的一样可一次附加多个处理器。

ExtJs Components上的DOM事件

一些 ExtJs Component 类导出时会选择一些DOM事件(例如 "click", "mouseover" 等等), 这通常只是在有额外的值可以被添加时发生。例如DataView类的 click事件会传递被点击的节点。也可以直接在Component的HTMLElementevent上访问DOM事件，但必需在Component被渲染后监听器才能添加到Element 上。可以按照以下步骤添加插件:

// 插件会用一个监听器配置对象进行配置。
//该组件会被添加到所有处理方法的参数列表上。
Ext.DomObserver = Ext.extend(Object, {
    constructor: function(config) {
        this.listeners = config.listeners ? config.listeners : config;
    },

    // 组件将自己传递进了插件的初始化方法里
    init: function(c) {
        var p, l = this.listeners;
        for (p in l) {
            if (Ext.isFunction(l[p])) {
                l[p] = this.createHandler(l[p], c);
            } else {
                l[p].fn = this.createHandler(l[p].fn, c);
            }
        }

        // 渲染后立即添加监听器到元素上
        c.render = c.render.createSequence(function() {
            var e = c.getEl();
            if (e) {
                e.on(l);
            }
        });
    },

    createHandler: function(fn, c) {
        return function(e) {
            fn.call(this, e, c);
        };
    }
});

var combo = new Ext.form.ComboBox({

    // 元素被点击后折叠
    plugins: [ new Ext.DomObserver({
        click: function(evt, comp) {
            comp.collapse();
        }
    })],
    store: myStore,
    typeAhead: true,
    mode: 'local',
    triggerAction: 'all'
});

Observable
overCls : String
一个可选的额外的CSS类，它将在鼠标移过元素时被添加到组件上...
一个可选的额外的CSS类，它将在鼠标移过元素时被添加到组件上，鼠标移出时 删除。(默认为'')。此属性对于在组件上，或者它的任何使用标准CSS规则的孩子节点上， 添加定制的'active' 或者 'hover'样式非常有用。
Component
plugins : Object/Array
一个对象或者一个对象数组，为组件提供特殊的功能 ...
一个对象或者一个对象数组，为组件提供特殊的功能。 对一个合法的插件唯一的要求是它含有一个init()方法， 能接收一个Ext.Component型的参数。 当组件被创建时，如果有可用的插件，组件将会调用每个插件的init方法， 并将自身的引用作为方法参数传递给它。然后，每个插件就可以调用方法或者响应组件上的事件， 就像需要的那样提供自己的功能。
Component
ptype : String
需要创建配置的ptype。 当传递一个配置对象给构造函数时...
需要创建配置的ptype。 当传递一个配置对象给构造函数时，此配置选项不会被使用。 只有在使用懒初始化的时候此配置项才会被使用， 此时Plugin不是 通过一个完整的实例组件，而是通过一个Component配置指定的。 在渲染时，将会查找ptype以决定创建何种类型的Plugin。

如果你创建自己的Plugin，你可以通过 Ext.ComponentMgr.registerPlugin 对它们进行注册，以便能利用懒初始化和渲染机制。
Component
ref : String
一个路径描述，与组件的 ownerCt 相关，它描述了把当前组件的命名引用放置到哪个父容器中去。...

一个路径描述，与组件的 ownerCt 相关，它描述了把当前组件的命名引用放置到哪个父容器中去。

祖先的坐标路径可以通过'/'字符进行分隔。 例如，将一个Toolbar Button的引用放入 拥有此Toolbar的Panel中:

var myGrid = new Ext.grid.EditorGridPanel({
    title: 'My EditorGridPanel',
    store: myStore,
    colModel: myColModel,
    tbar: [{
        text: 'Save',
        handler: saveChanges,
        disabled: true,
        ref: '../saveButton'
    }],
    listeners: {
        afteredit: function() {
//          The button reference is in the GridPanel
            myGrid.saveButton.enable();
        }
    }
});

在上面的代码中，如果 ref 是 'saveButton' ，那么引用将会被放置到Toolbar中。 ref 中的每个'/' 都会从组件的 ownerCt 向上移动一级。

另请参见 added 和 removed 事件。

Component
renderTo : Mixed
该值可以是一个节点的id、一个DOM节点或者一个已存在的元素...

该值可以是一个节点的id、一个DOM节点或者一个已存在的元素， 组件将会被渲染到其中。

  • 注意 :
      如果组件不是一个Container 的子项目时， 不要使用此选项。 渲染和管理它的子项目是一个Container 的layout manager的责任。
      当使用此配置项时，无需调用render()方法。

另请参见 render 。

Component
scope : Object
调用处理器时使用的作用域。
BaseItem
stateEvents : Array
一个事件数组，当它们被触发时，组件需要保存自己的状态(默认值为 none)...

一个事件数组，当它们被触发时，组件需要保存自己的状态(默认值为 none)。 它们可以是任何该组件支持的事件类型，包括浏览器事件和 自定义事件(例如['click', 'customerchange'])。

对于保存和恢复组件状态的详细解释，参见 stateful

Component
stateId : String
为该组件指定的唯一的id值，它被用作管理组件状态的目的...
为该组件指定的唯一的id值，它被用作管理组件状态的目的。 (如果设定了id，默认值为组件自己的id，否则，如果组件使用自动生成的id，此值为null)。

对于保存和反解析组件状态的解释，参见 stateful 。

Component
stateful : Boolean
一个标志参数，它将引起组件在启动时尝试从一个保存的状态中恢复内部状态参数...

一个标志参数，它将引起组件在启动时尝试从一个保存的状态中恢复内部状态参数。 组件必须要么拥有一个 stateId 或者 id ，它们被分配给需要被管理的状态属性。 在跨页面加载时，不保证自动生成的id属性的稳定性， 并且，不能依赖此id来保存和恢复一个组件的相同状态。

为了保存状态的操作能够工作，状态管理器的提供者必须 被设置成一个Ext.state.Provider 的实现类，它覆盖了set 和get 方法，以便保存和恢复name/value对。 有一个内置的Ext.state.CookieProvider 可用。

为当前页面设置状态提供者:

Ext.state.Manager.setProvider(new Ext.state.CookieProvider({
    expires: new Date(new Date().getTime()+(1000*60*60*24*7)), //7 days from now
}));

当 stateEvents 配置项中其中之一的事件被触发时， 一个状态可保存的组件将试图保存其状态。

保存状态时，一个可保存状态的组件首先需要通过调用 getState 方法来序列化它的状态。 默认情况下，此函数什么事都不做。 开发者必须提供一个实现，返回一个hash对象，它描述了组件可恢复的状态。

getState方法产生的值将会传递给 Ext.state.Manager.set 方法，它使用配置的 Ext.state.Provider 来保存对象，以组件的 stateId 为key，或者，如果此值（指stateId）没有指定时， 使用它的 id 作为key。

在进行构造时，一个可保存状态的组件试图通过调用 Ext.state.Manager.get方法来 恢复它的状态，传递 stateId 或者，如果此值（指stateId）没有指定时， 使用它的 id 作为参数。

结果对象被传递给 applyState 。 applyState 的默认实现只是简单地把属性拷贝到对象中， 但是开发者可以覆盖此方法以支持更多行为。

通过向 beforestaterestore, staterestore, beforestatesave 和 statesave 事件上绑定监听器，你可以在保存和恢复状态时进行额外的处理。

Component
style : String
被添加到组件元素的特定样式。 必须是按照...
被添加到组件元素的特定样式。 必须是按照 Ext.Element.applyStyles 类指定格式的合法参数值。

new Ext.Panel({
    title: 'Some Title',
    renderTo: Ext.getBody(),
    width: 400, height: 300,
    layout: 'form',
    items: [{
        xtype: 'textarea',
        style: {
            width: '95%',
            marginBottom: '10px'
        }
    },
        new Ext.Button({
            text: 'Send',
            minWidth: '100',
            style: {
                marginBottom: '10px'
            }
        })
    ]
});
Component
tpl : Mixed
一个 Ext.Template , Ext.XTemplate 或者一个用来形成一个Ext.XTemplate的字符串数组...
一个 Ext.Template , Ext.XTemplate 或者一个用来形成一个Ext.XTemplate的字符串数组。 与 data 和 tplWriteMode 配置项协同使用。
Component
tplWriteMode : String
刷新组件的内容区域时使用的Ext.(X)Template方式。 默认为'overwrite' (参见 Ext.XTemplate.overwrite )。
刷新组件的内容区域时使用的Ext.(X)Template方式。 默认为'overwrite' (参见 Ext.XTemplate.overwrite )。
Component
xtype : String
需要创建配置的xtype。 当传递一个配置对象给构造函数时...
需要创建配置的xtype。 当传递一个配置对象给构造函数时，此配置选项不会被使用。 只有在使用懒初始化的时候此配置项才会被使用，此时容器的子项目不是 通过一个完整的实例组件，而是通过一个Component配置指定的。 在渲染时，将会查找xtype以决定创建何种类型的子组件。

预定义的xtype列表如下： here。

如果你继承Component创建你自己的组件，你需要使用Ext.ComponentMgr.registerType 对它们进行注册，以便利用懒初始化和渲染机制。
Component

公共属性

Property Defined By
disabled : Boolean
当前组件处于无效状态时为true。 Read-only.
Component
el : Ext.Element
封装了当前组件的Ext.Element。 Read-only。通常情况下，这将是一个<DIV>元素，它由此类的...

封装了当前组件的Ext.Element。 Read-only。

通常情况下，这将是一个<DIV>元素，它由此类的 onRender方法创建，但是它可以通过使用 autoEl 配置项进行覆盖。

注意: 直到组件渲染完成此元素都将处于无效状态。

如需向当前组件的 DOM事件(而不是当前组件自己的Observable事件)添加监听器， 更多建议，参见 listeners 配置项，或者直接使用一个render监听器:

new Ext.Panel({
    title: 'The Clickable Panel',
    listeners: {
        render: function(p) {
            // Append the Panel to the click handler's argument list.
            p.getEl().on('click', handlePanelClick.createDelegate(null, [p], true));
        },
        single: true  // Remove the listener after first invocation
    }
});

另请参见 getEl

Component
hidden : Boolean
如果当前组件处于隐藏状态，此值为true。Read-only。
Component
initialConfig : Object
当前组件的初始化配置描述。 Read-only。
Component
ownerCt : Ext.Container
组件所属的Container (默认为undefined，当前组件被添加到一个容器中时此值被自动设置)...
组件所属的Container (默认为undefined，当前组件被添加到一个容器中时此值被自动设置)。 Read-only。

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

Component
parentMenu : Ext.menu.Menu
当前项的父菜单。
BaseItem
refOwner : Ext.Container
如果当前组件是一个容器的孩子，并且是通过一个 ref 配置项被注册的，则此值为 ref 引用被插入到的祖先容器。
如果当前组件是一个容器的孩子，并且是通过一个 ref 配置项被注册的，则此值为 ref 引用被插入到的祖先容器。
Component
rendered : Boolean
如果当前组件已经被渲染了，此值为true。Read-only.
Component

公共方法

Method Defined By
BaseItem ( Object config )
创建一个新的 BaseItem
创建一个新的 BaseItem
参数:
  • config : Object
    配置选项
返回值:
  • void
BaseItem
addClass ( string cls ) : Ext.Component
为组件底层的元素添加CSS样式。
为组件底层的元素添加CSS样式。
参数:
  • cls : string
    需要添加的CSS样式的class名称
返回值:
  • Ext.Component
    this
Component
addEvents( Object|String o, string Optional. ) : void
添加指定的事件到事件列表上，事件会被该Observable触发。
添加指定的事件到事件列表上，事件会被该Observable触发。
参数:
  • o : Object|String
    以事件名作为属性true作为值的对象 或者当多个事件名被分开的传递时则为第一个事件名。
  • Optional. : string
    事件名被分开的传递时则为事件名。 用法:
    this.addEvents('storeloaded', 'storecleared');
返回值:
  • void
Observable
addListener( String eventName, Function handler, [Object scope], [Object options] ) : void
给对象添加事件处理器。
给对象添加事件处理器。
参数:
  • eventName : String
    监听的事件名。
  • handler : Function
    事件调用的方法
  • scope : Object
    （可选）处理方法执行的作用域 (this的引用 reference)。 如果被忽略。默认为触发事件的对象。
  • options : Object
    （可选）包含处理器配置和属性的对象。 可能包含以下的属性:
    • scope : Object
      处理方法执行的作用域(this的引用) 。 如果被忽略。默认为触发事件的对象。
    • delay : Number
      在触发事件后延迟调用处理器的毫秒数。
    • single : Boolean
      如果为True则添加一个处理器来处理下一次的事件触发（仅一次），然后移除自己。
    • buffer : Number
      使得处理器延迟指定毫秒数后预定的运行在 一个Ext.util.DelayedTask中 。 如果事件在时间内再一次被触发，原始的处理器不会被调用，但是新的处理器会预定的在他的位置上。
    • target : Observable
      如果事件在目标的Observable上触发则仅仅调用处理器， 否则 事件会从子类的Observable上冒泡

    组合选项
    使用这些选项参数,可能会组合出不同类型的监听器：

    一个延迟的，一次性的监听器。

    myDataView.on('click', this.onClick, this, {
single: true,
delay: 100
});

    一次调用附加多个处理器
    该方法同样支持传递一个包含指定的多个处理器的属性的配置对象参数。

    myGridPanel.on({
'click' : {
    fn: this.onClick,
    scope: this,
    delay: 100
},
'mouseover' : {
    fn: this.onMouseOver,
    scope: this
},
'mouseout' : {
    fn: this.onMouseOut,
    scope: this
}
});

    或者一个简写的语法：

    myGridPanel.on({
'click' : this.onClick,
'mouseover' : this.onMouseOver,
'mouseout' : this.onMouseOut,
 scope: this
});
返回值:
  • void
Observable
applyToMarkup ( String/HTMLElement el ) : void
将此组件添加到已存在的有效的HTML标签中。 使用该方法时，无需再调用render()方法。
将此组件添加到已存在的有效的HTML标签中。 使用该方法时，无需再调用render()方法。
参数:
  • el : String/HTMLElement
返回值:
  • void
Component
cloneConfig ( Object overrides ) : Ext.Component
默认使用原先传递给当前实例的配置值克隆当前组件。
默认使用原先传递给当前实例的配置值克隆当前组件。
参数:
  • overrides : Object
    一个新的配置项，包含需要覆盖到克隆版本的所有属性。 可以传递一个id参数给此对象，否则将自动生成一个新的id以避免发生重复。
返回值:
  • Ext.Component
    当前组件的克隆副本
Component
destroy () : void
通过如下方法销毁对象：删除所有的事件监听器、将组件的元素从DOM树中删除...
通过如下方法销毁对象：删除所有的事件监听器、将组件的元素从DOM树中删除（如果可以）、 将组件从它的 Ext.Container（如果可用）中删除、 并且将它从Ext.ComponentMgr中 注销。 销毁操作一般由框架自动完成，一般情况下不需要直接调用该方法。
参数:
  • 无。
返回值:
  • void
Component
disable () : Ext.Component
将组件置为无效状态，并出发'disable'事件。
将组件置为无效状态，并出发'disable'事件。
参数:
  • 无。
返回值:
  • Ext.Component
    this
Component
enable () : Ext.Component
将组件置为有效状态并触发'enable'事件。
将组件置为有效状态并触发'enable'事件。
参数:
  • 无。
返回值:
  • Ext.Component
    this
Component
enableBubble( String/Array events ) :void
是否现在使得事件会被该Observable触发并调用 this.getBubbleTarget()方法在拥有者的继承树...

是否现在使得事件会被该Observable触发并调用 this.getBubbleTarget()方法在拥有者的继承树中冒泡。Observable的基础类中没有该方法的实现。

该方法一般被Ext.Components用来冒泡事件到拥有者的容器。参看Ext.Component.getBubbleTarget默认的实现 在Ext.Component中返回组件的直接拥有者。但是如果需要的是一个已知的目标，该方法可以被重写来更快的访问需求的目标。

例子:

Ext.override(Ext.form.Field, {
    // 添加方法到Field的initComponent上改变事件为冒泡
    initComponent : Ext.form.Field.prototype.initComponent.createSequence(function() {
        this.enableBubble('change');
    }),

    // 我们知道我们想让Field的事件冒泡到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() {
            // 如果样式被修改标题会变红。
            myForm.header.setStyle('color', 'red');
        }
    }
});
参数:
  • events : String/Array
    冒泡的事件名，或事件名数组
返回值:
  • void
Observable
findParentBy ( Function fn ) : Ext.Container
通过自定义的函数查找当前组件上层任何层次上的容器...
通过自定义的函数查找当前组件上层任何层次上的容器。 如果传递的函数返回true，容器对象将被返回。
参数:
  • fn : Function
    自定义的函数，使用如下参数调用(container,this component)。
返回值:
  • Ext.Container
    自定义函数返回true的第一个容器
Component
findParentByType ( String/Class xtype ) : Ext.Container
通过xtype或者class查找当前组件上层任何层次上的容器
通过xtype或者class查找当前组件上层任何层次上的容器
参数:
  • xtype : String/Class
    组件的xtype字符串，或者直接是组件的class
返回值:
  • Ext.Container
    符合指定xtype或者class的第一个容器
Component
fireEvent( String eventName, Object... args ) : Boolean
用传入的参数触发指定的事件 (减去事件名)。 一个事件可以被设置为冒泡 Obse...

用传入的参数触发指定的事件 (减去事件名)。

一个事件可以被设置为冒泡到Observable父类继承树(参看 Ext.Component.getBubbleTarget) 调用enableBubble实现。

参数:
  • eventName : String
    触发的事件名。
  • args : Object...
    传递给处理器的可变长度参数。
返回值:
  • Boolean
    如果有任何的处理器返回false则返回false，否则返回true。
Observable
focus ( [ Boolean selectText ], [ Boolean/Number delay ] ) : Ext.Component
尝试将当前组件设为焦点。
尝试将当前组件设为焦点。
参数:
  • selectText : Boolean
    (可选) 如果可用，同时选中组件内部的文本
  • delay : Boolean/Number
    (可选)将当前组件设置为焦点的延迟时间(设置为true等于0毫秒)
返回值:
  • Ext.Component
    this
Component
getBubbleTarget () : Ext.Container
为Observable的fireEvent方法提供链接，它沿着继承结构进行冒泡操作。
为Observable的fireEvent方法提供链接，它沿着继承结构进行冒泡操作。
参数:
  • 无。
返回值:
  • Ext.Container
    拥有当前组件的容器。
Component
getEl () : Ext.Element
返回 Ext.Element ，它包装了当前组件。...

返回 Ext.Element ，它包装了当前组件。

通常情况下，这将是一个<DIV>元素，它是由该类的onRender方法创建的， 但是可以使用autoEl配置项 覆盖它。

注意: 此元素将会一直处于无效状态直到当前组件渲染完成。

如需向当前组件的 DOM事件(而不是当前组件自己的Observable事件)添加监听器， 更多建议，参见 listeners 配置项，或者直接使用一个render监听器:

new Ext.Panel({
    title: 'The Clickable Panel',
    listeners: {
        render: function(p) {
            // Append the Panel to the click handler's argument list.
            p.getEl().on('click', handlePanelClick.createDelegate(null, [p], true));
        },
        single: true  // Remove the listener after first invocation
    }
});
参数:
  • 无。
返回值:
  • Ext.Element
    包装当前组件的元素。
Component
getId () : String
返回当前组件的id，如果没有定义id，则自动生成并返回一个id:'ext-comp-'...
返回当前组件的 id 如果没有定义 id 则自动生成并返回一个 id

'ext-comp-' + (++Ext.Component.AUTO_ID)
参数:
  • 无。
返回值:
  • String
    id
Component
getItemId () : String
返回当前组件的 itemId 。 如果没有通过配置参数指定 itemId 那么，将会使用...
返回当前组件的 itemId 。 如果没有通过配置参数指定 itemId 那么，将会使用 getId 返回 id 。
参数:
  • 无。
返回值:
  • String
Component
getXType () : String
获取当前组件的xtype，它是用 Ext.ComponentMgr 注册的。 所有可用的xtype列表，参见...
获取当前组件的xtype，它是用 Ext.ComponentMgr 注册的。 所有可用的xtype列表，参见 Ext.Component 类头部。示例用法:

var t = new Ext.form.TextField();
alert(t.getXType());  // alerts 'textfield'
参数:
  • 无。
返回值:
  • String
    The xtype
Component
getXTypes () : String
返回此组件的xtype继承树，用字符'-'分隔。 所有可用的xtype值...

返回此组件的xtype继承树，用字符'-'分隔。 所有可用的xtype值，请参见Ext.Component 类的头部。

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

示例用法:

var t = new Ext.form.TextField();
alert(t.getXTypes());  // alerts 'component/box/field/textfield'
参数:
  • 无。
返回值:
  • String
    xtype层次字符串
Component
hasListener( String eventName ) : Boolean
检测对象是否包含指定事件的任何监听器
检测对象是否包含指定事件的任何监听器
参数:
  • eventName : String
    检测的事件名
返回值:
  • Boolean
    如果事件被监听则为true，否则为false
Observable
hide () : Ext.Component
隐藏当前组件。 监听 beforehide' 事件并且返回false 可以取消隐藏组件的操作。 在隐藏组件之后触发...
隐藏当前组件。 监听 beforehide' 事件并且返回false 可以取消隐藏组件的操作。 在隐藏组件之后触发 ' hide' 事件。 如果组件被配置成 hidden 那么此方法在内部被调用。
参数:
  • 无。
返回值:
  • Ext.Component
    this
Component
isVisible () : Boolean
如果当前组件可见，返回true。
如果当前组件可见，返回true。
参数:
  • 无。
返回值:
  • Boolean
    如果当前组件可见，返回true，其它返回false。
Component
isXType ( String xtype , [ Boolean shallow ] ) : Boolean
Tests whether or not this Component is of a specific xtype. This can test whether this Component is descended from th...

测试此组件是否是指定的xtype。此方法既可以测试是否是指定的xtype的某个子类， 或者它是否直接是指定的xtype类(shallow=true)。

如果使用你自己的子类，必须知道组件必须注册它的xtype值。

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

示例用法:

var t = new Ext.form.TextField();
var isText = t.isXType('textfield');        // true
var isBoxSubclass = t.isXType('box');       // true, descended from BoxComponent
var isBoxInstance = t.isXType('box', true); // false, not a direct BoxComponent instance
参数:
  • xtype : String
    需要为当前组件进行检测的xtype
  • shallow : Boolean
    (可选) 如果为false，检测组件是否是xtype继承树中的某个子类（默认是这种情况）， 如果为true，只检测组件是否是指定的xtype类型。
返回值:
  • Boolean
    如果当前组件是指定xtype的子类，返回true，其它返回flase。
Component
mon ( Observable|Element item , Object|String ename , Function fn , Object scope , Object opt ) : void
向任何Observable对象(或者元素)上添加监听器，监听器将会在组件...

向任何Observable对象(或者元素)上添加监听器，监听器将会在组件销毁时被自动删除。
用法：

myGridPanel.mon(myGridPanel.getSelectionModel(), 'selectionchange', handleSelectionChange, null, {buffer: 50});

or:

myGridPanel.mon(myGridPanel.getSelectionModel(), {
    selectionchange: handleSelectionChange,
    buffer: 50
});
参数:
  • item : Observable|Element
    需要添加listener/listeners的项目。
  • ename : Object|String
    事件名，或者一个包含事件名属性的对象。
  • fn : Function
    (可选) 如果 ename 参数是一个事件名，此参数为处理函数。
  • scope : Object
    (可选)如果 ename 参数是一个事件名称，此参数是作用域 ( this 引用)，监听函数将会在此作用域中被执行。
  • opt : Object
    (可选)如果 ename 参数是一个事件名称， 此参数是 addListener 配置项。
返回值:
  • void
Component
mun ( Observable|Element item , Object|String ename , Function fn , Object scope ) : void
删除通过mon 方法添加的监听器。
删除通过mon 方法添加的监听器。
参数:
  • item : Observable|Element
    需要删除listener/listeners的项目。
  • ename : Object|String
    事件名称，或者一个包含事件名称属性的对象。
  • fn : Function
    (可选)如果 ename 参数是一个事件名称，此参数是一个处理函数。
  • scope : Object
    (可选)如果 ename 参数是一个事件名称，此参数是作用域 ( this 引用)，监听函数将会在此作用域中被执行。
返回值:
  • void
Component
nextSibling () : Ext.Component
返回所属容器中的下一个组件
返回所属容器中的下一个组件
参数:
  • 无。
返回值:
  • Ext.Component
Component
on( String eventName, Function handler, [Object scope], [Object options] ) : void
给对象添加事件处理器 (addListener的简写形式)
给对象添加事件处理器 (addListener的简写形式。)
参数:
  • eventName : String
    监听的事件类型
  • handler : Function
    事件调用的方法
  • scope : Object
    （可选）处理方法执行时的作用域 (this 的引用)。 如果被忽略。默认为触发事件的对象。
  • options : Object
    可选 包含处理器配置的对象。
返回值:
  • void
Observable
previousSibling () : Ext.Component
返回所属容器中的前一个组件
返回所属容器中的前一个组件
参数:
  • 无。
返回值:
  • Ext.Component
Component
purgeListeners() : void
移除对象上所有的监听器
移除对象上所有的监听器
参数:
  • 无。
返回值:
  • void
Observable
relayEvents( Object o, Array events ) : void
从指定的Observable上传递选择的事件就好像被当前对象触发一样。
从指定的Observable上传递选择的事件就好像被当前对象触发一样。
参数:
  • o : Object
    该Observable上的事件被当前对象传递。
  • events : Array
    传递的数组名。
返回值:
  • void
Observable
removeClass ( string cls ) : Ext.Component
从组件底层的元素上删除一个CSS类。
从组件底层的元素上删除一个CSS类。
参数:
  • cls : string
    需要移除的CSS类名
返回值:
  • Ext.Component
    this
Component
removeListener( String eventName, Function handler, [Object scope] ) : void
删除一个事件处理器。
删除一个事件处理器。
参数:
  • eventName : String
    处理器关联的事件类型。
  • handler : Function
    移除的处理器。 这应该是传递到addListener里的方法的引用。
  • scope : Object
    （可选）处理器指定的初始作用域。
返回值:
  • void
Observable
render ( [ Element/HTMLElement/String container ], [ String/Number position ] ) : void
在传递进来的HTML元素中渲染当前组件。...

在传递进来的HTML元素中渲染当前组件。

如果你正在使用一个Container 对象放置当前组件，那么请不要使用render方法。

当容器第一次被渲染时，它的子组件将会被容器的 layout 管理器渲染。

某些布局管理器允许动态添加子组件。它们包括 Ext.layout.CardLayout, Ext.layout.AnchorLayout, Ext.layout.FormLayout, Ext.layout.TableLayout。

当一个新的子组件被添加时，如果容器已经被渲染了， 你可能需要调用容器的 doLayout 方法来刷新视图，它将导致所有没有被渲染的子组件进行渲染操作。 此操作是必须的，这样你可以添加多个子组件而只刷新一次layout。

当创建复杂的UI时，非常重要的一点是，请记住调整子项目的尺寸和位置是容器的 layout 管理器的职责。 如果你希望子项目的尺寸对用户交互作出反应， 你必须为容器配置一个布局管理器，它将创建和管理你心里想要的那种布局。

忽略容器的layout 配置意味着将会使用一个基本的布局管理器，它除了按次序把子组件 渲染到容器中之外什么事情都不做。 这种情况下，任何尺寸和位置的调整操作都不会发生。

参数:
  • container : Element/HTMLElement/String
    (可选) 需要在其中渲染当前组件的元素。 如果它是从一个已存在的标签中创建的，此参数应该被忽略。
  • position : String/Number
    (可选) 容器中的一个元素ID或者一个DOM节点索引， 当前组件将会被插入到它前面 (默认append到容器的尾部)
返回值:
  • void
Component
resumeEvents() : void
重新开始触发事件。(参见suspendEvents) 如果事件以queueSuspended参数被挂起，则在事件被挂起时 ...
重新开始触发事件。(参见 suspendEvents) 如果事件以queueSuspended 参数被挂起，则在事件被挂起时触发的事件会被传递到所有的监听器上
参数:
  • 无。
返回值:
  • void
Observable
setDisabled ( Boolean disabled ) : Ext.Component
工具函数，使用布尔值设置有效/无效(disabled/enabled )。
工具函数，使用布尔值设置有效/无效(disabled/enabled )。
参数:
  • disabled : Boolean
返回值:
  • Ext.Component
    this
Component
setHandler ( Function handler , Object scope ) : void
设置处理当前项单击事件的处理器 (等价于传递到 handler 配置属性)....
设置处理当前项单击事件的处理器 (等价于传递到 handler 配置属性)。 如果存在一个已经注册的处理器，它将会被注销。
参数:
  • handler : Function
    点击时调用的方法
  • scope : Object
    传递给处理器的作用域，默认为当前菜单选项。
返回值:
  • void
BaseItem
setVisible ( Boolean visible ) : Ext.Component
工具方法，通过使用布尔值隐藏或者显示当前组件。
工具方法，通过使用布尔值隐藏或者显示当前组件。
参数:
  • visible : Boolean
    true时显示，false时隐藏
返回值:
  • Ext.Component
    this
Component
show () : Ext.Component
显示当前组件。监听' beforeshow' 事件，返回 false 取消显示组件...
显示当前组件。监听' beforeshow' 事件，返回 false 取消显示组件。在显示组件之后触发' show' 事件。
参数:
  • 无。
返回值:
  • Ext.Component
    this
Component
suspendEvents( Boolean queueSuspended ) : void
暂停触发所有的事件。 (参看resumeEvents)
暂停触发所有的事件。（参看 resumeEvents)
参数:
  • queueSuspended : Boolean
    如果传递为true则排列好暂停的事件使得在调用 resumeEvents 后再触发它们，而不是抛弃所有暂停的事件。
返回值:
  • void
Observable
un( String eventName, Function handler, [Object scope] ) : void
删除一个事件处理器(removeListener方法的简写形式)
删除一个事件处理器(removeListener方法的简写形式。)
参数:
  • eventName : String
    处理器关联的事件类型
  • handler : Function
    被删除的处理器 这应该是传入 addListener 中的方法的引用。
  • scope : Object
    （可选）为处理器指定的初始作用域。
返回值:
  • void
Observable
update ( Mixed htmlOrData , [ Boolean loadScripts ], [ Function callback ] ) : void
刷新组件的内部区域。
刷新组件的内部区域。
参数:
  • htmlOrData : Mixed
    如果已经通过tpl为当前组件配置了一个模板，那么 将会使用此参数来装配模板。 如果没有为当前组件配置模板，组件的内容区域将会通过Ext.Element 进行刷新。
  • loadScripts : Boolean
    (可选)只用在使用html配置时此参数才合法。默认为false。
  • callback : Function
    (可选)只用在使用html配置时此参数才合法。 当脚本加载完成时回调函数才被执行。
返回值:
  • void
Component

公共事件

Event Defined By
activate : ( Ext.menu.BaseItem this )
该项目被激活为当前活动项时触发
该项目被激活为当前活动项时触发
监听器将会以如下的参数格式调用：
  • this : Ext.menu.BaseItem
BaseItem
added : ( Ext.Component this , Ext.Container ownerCt , number index )
当一个组件被添加到一个Ext.Container时触发
当一个组件被添加到一个Ext.Container时触发
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • ownerCt : Ext.Container
    用于组件的容器
  • index : number
    添加组件的位置
Component
afterrender : ( Ext.Component this )
在组件渲染完成之后触发...

在组件渲染完成之后触发。

afterrender事件在当前组件被rendered 结束之后、在为组件定义的所有afterRender方法执行之后 触发，并且，如果有stateful， 也在状态被保存之后才触发。

监听器将会以如下参数格式被调用:
  • this : Ext.Component
Component
beforedestroy : ( Ext.Component this )
在组件 destroyed 之前触发。 在事件监听器中返回false以停止 destroy 操作。
在组件 destroyed 之前触发。 在事件监听器中返回false以停止 destroy 操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforehide : ( Ext.Component this )
在调用hide方法隐藏组件之前触发。 在事件监听器中返回false可以停止隐藏操作。
在调用hide方法隐藏组件之前触发。 在事件监听器中返回false可以停止隐藏操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforerender : ( Ext.Component this )
在组件被rendered 之前触发。 在事件监听器中返回false可以停止render 操作。
在组件被rendered 之前触发。 在事件监听器中返回false可以停止render 操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforeshow : ( Ext.Component this )
在调用show()方法现实组件之前触发。 事件处理函数返回false可以停止show。
在调用show 方法现实组件之前触发。 事件处理函数返回false可以停止show。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforestaterestore : ( Ext.Component this , Object state )
在组件状态恢复之前触发。返回false停止恢复状态操作。
在组件状态恢复之前触发。返回false停止恢复状态操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    StateProvider返回的状态哈希值。 如果没有禁止此事件，那么状态对象会被传递给applyState。 默认情况下，这样简单地把属性值拷贝到当前组件中。 可以覆盖此方法以提供自定的状态恢复操作。
Component
beforestatesave : ( Ext.Component this , Object state )
在组件状态被保存到配置的状态提供者之前触发。 返回false可以停止保存。
在组件状态被保存到配置的状态提供者之前触发。 返回false可以停止保存。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    状态值哈希。 这由在组件上调用getState() 方法决定。 此方法必须由开发者提供，返回是否需要对状态进行描述，默认情况下， Ext.Component有一个空实现。
Component
click : ( Ext.menu.BaseItem this , Ext.EventObject e )
当前选项被点击时触发
当前选项被点击时触发
监听器将会以如下的参数格式调用:
  • this : Ext.menu.BaseItem
  • e : Ext.EventObject
BaseItem
deactivate : ( Ext.menu.BaseItem this )
当此项目被设置为非当前活动项时触发
当此项目被设置为非当前活动项时触发
监听器将会以如下的参数格式调用:
  • this : Ext.menu.BaseItem
BaseItem
destroy : ( Ext.Component this )
在组件被销毁之后触发。
在组件被destroyed之后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
disable : ( Ext.Component this )
在组件被设置为无效状态后触发。
在组件被设置为无效状态后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
enable : ( Ext.Component this )
当组件被设置为有效(enabled)之后触发。
当组件被设置为有效(enabled)之后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
hide : ( Ext.Component this )
在组件被隐藏之后触发。 当调用hide 方法隐藏组件之后触发。
在组件被隐藏之后触发。 当调用hide 方法隐藏组件之后触发。
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
removed : ( Ext.Component this , Ext.Container ownerCt )
当一个组件被从Ext.Container容器中删除时触发
当一个组件被从Ext.Container容器中删除时触发
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • ownerCt : Ext.Container
    持有组件的容器
Component
render : ( Ext.Component this )
在组件被渲染之后触发。
在组件被 rendered(渲染) 之后触发。
监听器将以如下的参数格式被调用:
  • this : Ext.Component
Component
show : ( Ext.Component this )
在调用show 方法显示组件之后触发。
在调用show 方法显示组件之后触发。
监听器将会用如下的参数格式被调用:
  • this : Ext.Component
Component
staterestore : ( Ext.Component this , Object state )
组件状态被存储之后触发。
组件状态被存储之后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    StateProvider返回的状态哈希值。 如果没有禁止此事件，那么状态对象会被传递给applyState。 默认情况下，这样简单地把属性值拷贝到当前组件中。 可以覆盖此方法以提供自定的状态恢复操作。
Component
statesave : ( Ext.Component this , Object state )
在组件状态被保存到所配置的状态提供者之后触发。
在组件状态被保存到所配置的状态提供者之后触发。
监听器将会用如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    状态值hash。 这是由在足见上调用getState() 方法决定的。 开发者必须提供此方法以返回是否需要恢复状态，默认情况下， Ext.Component有一个空实现。
Component


Observable
    Component
      BaseItem
        Item
          CheckItem

Class Ext.menu.CheckItem

包: | Ext.menu
定义类的文件: | CheckItem.js
类: | CheckItem
继承自: | Item
添加一个菜单项，默认包含一个复选框，但也可以是一个radio组的一部分。

配置项

Config Options Defined By
activeClass : String
当一个项目变成当前活动项时所应用的CSS样式 (默认值为"x-menu-item-active")
BaseItem
allowDomMove : Boolean
在渲染时组件是否可以移动Dom节点(默认为true)。
Component
applyTo : Mixed
指定一个元素的id、一个DOM元素或者一个已经存在并被渲染到DIV中的元素，此DIV已经被...

指定一个元素的id、一个DOM元素或者一个已经存在并被渲染到DIV中的元素，此DIV已经被 渲染到document中，并且为当前组件指定了一些结构化的标签。

  • 描述 :
      当使用了 applyTo， 在主元素中也可以用id或者CSS类名来指定组件的托管部分， 并且，如果可以的话，创建的组件可能也会试图在那个标签中创建它的子组件。
  • 注意 :
      当使用此配置项时，无需调用render()方法。
      如果指定了applyTo属性，任何传递给 renderTo 的值都会被忽略，并且目标元素的父节点将会自动被用作组件的容器。
Component
autoEl : Mixed
一个表签名或者一个 DomHelper 描述，用来创建 Element ，它将封装当前组件...

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

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

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

{
    xtype: 'box',
    autoEl: {
        tag: 'img',
        src: 'http://www.example.com/example.jpg'

    }
}, {
    xtype: 'box',
    autoEl: {
        tag: 'blockquote',
        html: 'autoEl is cool!'
    }
}, {
    xtype: 'container',
    autoEl: 'ul',
    cls: 'ux-unordered-list',
    items: {
        xtype: 'box',
        autoEl: 'li',
        html: 'First list item'
    }
}
Component
autoShow : Boolean
如果组件需要检测隐藏CSS属性(如 'x-hidden' 或者 'x-hide-display')并且在渲染时删除...
如果组件需要检测隐藏CSS属性(如 'x-hidden' 或者 'x-hide-display')并且在渲染时删除它们 (默认为false)，设置此值为true。
Component
bubbleEvents : Array
一个事件数组，当这些事件被触发时，将会被冒泡到所有父容器中。参见....

一个事件数组，当这些事件被触发时，将会被冒泡到所有父容器中。参见 Ext.util.Observable.enableBubble。 默认为 []。

Component
canActivate : Boolean
当值为true时该选项被视觉激活 (默认值为 false)
Item
checked : Boolean
将当前复选框初始化为选中状态(默认值为 false)。 注意：如果当前复选框是radio组的一部分...
将当前复选框初始化为选中状态(默认值为 false)。 注意：如果当前复选框是radio组的一部分(group = true) 只有组中最后一项初始化时设置checked = true才会被渲染成选中状态。
CheckItem
clearCls : String
应用到特殊的clearing div的CSS类， 这个clearing div直接渲染到每个form field的包装器后面...

应用到特殊的clearing div的CSS类， 这个clearing div直接渲染到每个form field的包装器后面，以提供 清除field的功能(默认为 'x-form-clear-left')。

注意: 只有在当前组件被渲染到一个使用FormLayout 布局(例如 Ext.form.FormPanel 或者指定 layout:'form')的 容器中、或者是指定了一个fieldLabel 、或者指定isFormField=true 时此配置才有效。

另请参见 Ext.layout.FormLayout. fieldTpl。

Component
clickHideDelay : Number
点击之后的隐藏一个项目的延迟毫秒数(默认值为 1 )
BaseItem
cls : String
一个可选的额外CSS类，它将被添加到当前组件的元素上(默认为'')...
一个可选的额外CSS类，它将被添加到当前组件的元素上(默认为'')。 此属性对于在组件上，或者它的任何使用标准CSS规则的孩子节点上， 添加定制的样式非常有用。
Component
contentEl : String
(可选)指定一个已存在的HTML元素，或者一个已存在HTML元素的...

(可选)指定一个已存在的HTML元素，或者一个已存在HTML元素的 id ，它们将被用作当前组件的内容。

  • 描述 :
    此配置选项被用来将一个已存在的HTML元素 插入到一个新组件(在组件渲染之后它简单地移动DOM元素) 的layout元素中，使它成为该组件的内容。
  • 注意 :
    指定的HTML元素将被append到组件的layout元素中， 在所有配置的 HTML 被插入之后， 并且，这样的话，在render事件 被触发时，document中将不再包含此元素。
    指定的HTML元素将不会参与组件所有可能使用的 layout 过程(译者注：指这些HTML元素 不会参与布局操作)。 它仅是HTML而已。布局操作实在孩子 items 上进行的。
    添加 x-hidden 或者 x-hide-display CSS类，以防在内容渲染到panel时发生闪烁。
Component
ctCls : String
一个可选的外部CSS样式，添加到这个组件的容器(默认值为 '')。 这个方法对于使用标准的CSS规则...

一个可选的外部CSS样式，添加到这个组件的容器(默认值为 '')。 这个方法对于使用标准的CSS规则，为组件或它的任何一个子组件添加特定的样式非常有用。 参见 Ext.layout.ContainerLayout和 extraCls 。

注意: ctCls 默认为 ''期望如下的类，它们将指定一个默认值:

  • Box Layout : 'x-box-layout-ct'
使用一个额外的CSS类配置以上的Class，它是append到默认对象上的。例如， 对于BoxLayout (Hbox and Vbox):
                                ctCls: 'x-box-layout-ct custom-class'

Component
data : Mixed
初始化数据集，它将被应用到 tpl 上以刷新组件的内容区域。
Component
disabled : Boolean
当前组件处于无效状态时为true。 Read-only.
Component
disabledClass : String
当组件处于无效状态时添加到组件上的CSS类(默认为 'x-item-disabled')。
Component
fieldLabel : String
紧靠此field显示的标签文本(默认值为 '')。注意...

紧靠此field显示的标签文本(默认值为 '')。

注意:只有在当前组件被渲染到一个使用FormLayout 的容器中时，此配置才有效。 (例如 Ext.form.FormPanel 或 指定 layout:'form')。

另请参见 hideLabel 、 Ext.layout.FormLayout和 fieldTpl。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Name'
    }]
});
Component
group : String
所有具有相同组名的选择项，都会被自动分组到一个单选按钮组...
所有具有相同组名的选择项，都会被自动分组到一个单选按钮组(默认值为 '')
CheckItem
groupClass : String
radio组中选项使用的CSS样式(默认值为 "x-menu-group-item")
CheckItem
handler : Function
(可选)一个处理菜单项点击事件的函数。该函数包含下列...
(可选)一个处理菜单项点击事件的函数。该函数包含下列参数：
  • b : Item
    当前菜单。
  • e : EventObject
    单击事件。
BaseItem
hidden : Boolean
如果当前组件处于隐藏状态，此值为true。Read-only。
Component
hideLabel : Boolean
true时完全隐藏label元素 ( label 和 separator)。 默认为 false。 默认情况下，即使你不指定...

true时完全隐藏label元素 ( label 和 separator)。 默认为 false。 默认情况下，即使你不指定 fieldLabel 它的空间仍然会被保留，这样这块区域会与其它确实拥有label的区域位于同一排。 讲此值设置为 true 将导致此区域不再保留此空间。

注意: 参见 clearCls 的注释。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield'
        hideLabel: true
    }]
});
Component
hideMode : String
组件如何隐藏，支持的值有： 'visibility' (css visibility), 'offsets' (位置偏移量为负值) 和...

组件如何隐藏，支持的值有： 'visibility' (css visibility), 'offsets' (位置偏移量为负值) 和 'display' (css display).

注意:一般首选默认值 'display'，因为当组件第一次显示的时候它们会自动进行布局 (隐藏的时候不会调整尺寸)。

Component
hideOnClick : Boolean
当值为true时，单击该选项后隐藏所包含的内部菜单 (默认值为 true)
BaseItem
hideParent : Boolean
此值为true时，当调用hide/show方法时，将会hide和show组件的容器...
此值为true时，当调用hide/show方法时，将会hide和show组件的容器；false时将会 hide和show组件自身(默认为false)。例如，这可以用作window上隐藏按钮的一种 快捷操作，通过设置此按钮的hideParent:true，然后把它添加到window上。
Component
href : String
底层锚定的链接所使用的href属性(默认值为 '#')。
Item
hrefTarget : String
底层锚定的链接所使用的target属性(默认值为 '')。
Item
html : String/Object
一个HTML片段，或者一个 DomHelper 描述，用作layout元素的内容(默认为'')。...
一个HTML片段，或者一个 DomHelper 描述，用作layout元素的内容(默认为'')。 这个HTML内容在组件渲染之后才被添加，所以在 render 出发的时候，document中尚未包含此HTML。 但是这个内容将会在所有配置的 contentEl 之前被插入到body标签中。
Component
icon : String
显示在此项目中的图标路径(默认值为 Ext.BLANK_IMAGE_URL)。 如果指定了icon， 则不应该指定...
显示在此项目中的图标路径(默认值为 Ext.BLANK_IMAGE_URL)。 如果指定了icon，则不应该指定 iconCls。
Item
iconCls : String
一个CSS样式指定的背景图片，将被用作此项目的图标...
一个CSS样式指定的背景图片，将被用作此项目的图标(默认值为'')。 如果指定了iconCls，就不应该指定 icon。
Item
id : String
当前组件唯一的id(默认为auto-assigned id)...

当前组件唯一的id(默认为auto-assigned id)。 如果你需要在以后访问组件，而又没有一个有效的组件对象引用，那么你需要指定一个 id( 也就是，使用Ext. getCmp方法 )。

注意，此id也将被用作组件底层HTML标签的id，这些标签被渲染到页面中。 这将允许你编写基于id的CSS规则，以独立地描述指定的实例；并且，也可以通过 组件父标签的id选中子元素。

注意:为了避免与唯一的id 产生重复， 请参见 itemId 和 ref 。

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

Component
itemCls : String
选项使用的默认CSS样式(默认值为 "x-menu-item x-menu-check-item")
CheckItem
itemId : String
当没有可利用的对象引用时，itemId可以作为第二选择，用来获得一个组件的引用， 代替 ...

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

var c = new Ext.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'); // 与 Ext.getCmp()不同

p2 = p1.ownerCt.getComponent('p2'); // 通过兄弟对象获得引用

另请参见 id 和 ref 。

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

Component
labelSeparator : String
每个fieldLabel 文本后面现实的分隔符。 此属性可以在多个层次上进行配置...

每个fieldLabel 文本后面现实的分隔符。 此属性可以在多个层次上进行配置。优先顺序为：

  • field / component level
  • container level
  • layout level (默认为冒号 ':')
如不需要为当前field的label显示分隔符，指定一个空字符串''即可。

注意:参见 clearCls 的注释。

另请参见 hideLabel 和 Ext.layout.FormLayout。 fieldTpl。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    layoutConfig: {
        labelSeparator: '~'   // layout config has lowest priority (defaults to ':')
    },
    labelSeparator: '>>',     // config at container level
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Field 1',
        labelSeparator: '...' // field/component level config supersedes others
    },{
        xtype: 'textfield',
        fieldLabel: 'Field 2' // labelSeparator will be '='

    }]
});
Component
labelStyle : String
一个CSS样式描述字符串，它将直接应用到当前field的label上...

一个CSS样式描述字符串，它将直接应用到当前field的label上。 如果有设置，默认为容器的labelStyle值(例如 Ext.layout.FormLayout.labelStyle , 或者 '')。

注意:参见 clearCls 的注释。

另请参见 hideLabel 和 Ext.layout.FormLayout. fieldTpl。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Name',
        labelStyle: 'font-weight:bold;'
    }]
});
Component
listeners : Object
一个包含一个或多个事件处理器的配置对象，会在初始化的时候被添加到目标对象上...

一个包含一个或多个事件处理器的配置对象，会在初始化的时候被添加到目标对象上。 该配置对象应该是一个有效的监听器配置对象就像 addListener例子中指定的一样可一次附加多个处理器。

ExtJs Components上的DOM事件

一些 ExtJs Component 类导出时会选择一些DOM事件(例如 "click", "mouseover" 等等), 这通常只是在有额外的值可以被添加时发生。例如DataView类的 click事件会传递被点击的节点。也可以直接在Component的HTMLElementevent上访问DOM事件，但必需在Component被渲染后监听器才能添加到Element 上。可以按照以下步骤添加插件:

// 插件会用一个监听器配置对象进行配置。
//该组件会被添加到所有处理方法的参数列表上。
Ext.DomObserver = Ext.extend(Object, {
    constructor: function(config) {
        this.listeners = config.listeners ? config.listeners : config;
    },

    // 组件将自己传递进了插件的初始化方法里
    init: function(c) {
        var p, l = this.listeners;
        for (p in l) {
            if (Ext.isFunction(l[p])) {
                l[p] = this.createHandler(l[p], c);
            } else {
                l[p].fn = this.createHandler(l[p].fn, c);
            }
        }

        // 渲染后立即添加监听器到元素上
        c.render = c.render.createSequence(function() {
            var e = c.getEl();
            if (e) {
                e.on(l);
            }
        });
    },

    createHandler: function(fn, c) {
        return function(e) {
            fn.call(this, e, c);
        };
    }
});

var combo = new Ext.form.ComboBox({

    // 元素被点击后折叠
    plugins: [ new Ext.DomObserver({
        click: function(evt, comp) {
            comp.collapse();
        }
    })],
    store: myStore,
    typeAhead: true,
    mode: 'local',
    triggerAction: 'all'
});

Observable
menu : Ext.menu.Menu
如果配置了该属性，那么它将作为当前项的子菜单。
Item
overCls : String
一个可选的额外的CSS类，它将在鼠标移过元素时被添加到组件上...
一个可选的额外的CSS类，它将在鼠标移过元素时被添加到组件上，鼠标移出时 删除。(默认为'')。此属性对于在组件上，或者它的任何使用标准CSS规则的孩子节点上， 添加定制的'active' 或者 'hover'样式非常有用。
Component
plugins : Object/Array
一个对象或者一个对象数组，为组件提供特殊的功能 ...
一个对象或者一个对象数组，为组件提供特殊的功能。 对一个合法的插件唯一的要求是它含有一个init()方法， 能接收一个Ext.Component型的参数。 当组件被创建时，如果有可用的插件，组件将会调用每个插件的init方法， 并将自身的引用作为方法参数传递给它。然后，每个插件就可以调用方法或者响应组件上的事件， 就像需要的那样提供自己的功能。
Component
ptype : String
需要创建配置的ptype。 当传递一个配置对象给构造函数时...
需要创建配置的ptype。 当传递一个配置对象给构造函数时，此配置选项不会被使用。 只有在使用懒初始化的时候此配置项才会被使用， 此时Plugin不是 通过一个完整的实例组件，而是通过一个Component配置指定的。 在渲染时，将会查找ptype以决定创建何种类型的Plugin。

如果你创建自己的Plugin，你可以通过 Ext.ComponentMgr.registerPlugin 对它们进行注册，以便能利用懒初始化和渲染机制。
Component
ref : String
一个路径描述，与组件的 ownerCt 相关，它描述了把当前组件的命名引用放置到哪个父容器中去。...

一个路径描述，与组件的 ownerCt 相关，它描述了把当前组件的命名引用放置到哪个父容器中去。

祖先的坐标路径可以通过'/'字符进行分隔。 例如，将一个Toolbar Button的引用放入 拥有此Toolbar的Panel中:

var myGrid = new Ext.grid.EditorGridPanel({
    title: 'My EditorGridPanel',
    store: myStore,
    colModel: myColModel,
    tbar: [{
        text: 'Save',
        handler: saveChanges,
        disabled: true,
        ref: '../saveButton'
    }],
    listeners: {
        afteredit: function() {
//          The button reference is in the GridPanel
            myGrid.saveButton.enable();
        }
    }
});

在上面的代码中，如果 ref 是 'saveButton' ，那么引用将会被放置到Toolbar中。 ref 中的每个'/' 都会从组件的 ownerCt 向上移动一级。

另请参见 added 和 removed 事件。

Component
renderTo : Mixed
该值可以是一个节点的id、一个DOM节点或者一个已存在的元素...

该值可以是一个节点的id、一个DOM节点或者一个已存在的元素， 组件将会被渲染到其中。

  • 注意 :
      如果组件不是一个Container 的子项目时， 不要使用此选项。 渲染和管理它的子项目是一个Container 的layout manager的责任。
      当使用此配置项时，无需调用render()方法。

另请参见 render 。

Component
scope : Object
调用处理器时使用的作用域。
BaseItem
showDelay : Number
显示此项目时等待（延迟）的毫秒数(默认值为 200)
Item
stateEvents : Array
一个事件数组，当它们被触发时，组件需要保存自己的状态(默认值为 none)...

一个事件数组，当它们被触发时，组件需要保存自己的状态(默认值为 none)。 它们可以是任何该组件支持的事件类型，包括浏览器事件和 自定义事件(例如['click', 'customerchange'])。

对于保存和恢复组件状态的详细解释，参见 stateful

Component
stateId : String
为该组件指定的唯一的id值，它被用作管理组件状态的目的...
为该组件指定的唯一的id值，它被用作管理组件状态的目的。 (如果设定了id，默认值为组件自己的id，否则，如果组件使用自动生成的id，此值为null)。

对于保存和反解析组件状态的解释，参见 stateful 。

Component
stateful : Boolean
一个标志参数，它将引起组件在启动时尝试从一个保存的状态中恢复内部状态参数...

一个标志参数，它将引起组件在启动时尝试从一个保存的状态中恢复内部状态参数。 组件必须要么拥有一个 stateId 或者 id ，它们被分配给需要被管理的状态属性。 在跨页面加载时，不保证自动生成的id属性的稳定性， 并且，不能依赖此id来保存和恢复一个组件的相同状态。

为了保存状态的操作能够工作，状态管理器的提供者必须 被设置成一个Ext.state.Provider 的实现类，它覆盖了set 和get 方法，以便保存和恢复name/value对。 有一个内置的Ext.state.CookieProvider 可用。

为当前页面设置状态提供者:

Ext.state.Manager.setProvider(new Ext.state.CookieProvider({
    expires: new Date(new Date().getTime()+(1000*60*60*24*7)), //7 days from now
}));

当 stateEvents 配置项中其中之一的事件被触发时， 一个状态可保存的组件将试图保存其状态。

保存状态时，一个可保存状态的组件首先需要通过调用 getState 方法来序列化它的状态。 默认情况下，此函数什么事都不做。 开发者必须提供一个实现，返回一个hash对象，它描述了组件可恢复的状态。

getState方法产生的值将会传递给 Ext.state.Manager.set 方法，它使用配置的 Ext.state.Provider 来保存对象，以组件的 stateId 为key，或者，如果此值（指stateId）没有指定时， 使用它的 id 作为key。

在进行构造时，一个可保存状态的组件试图通过调用 Ext.state.Manager.get方法来 恢复它的状态，传递 stateId 或者，如果此值（指stateId）没有指定时， 使用它的 id 作为参数。

结果对象被传递给 applyState 。 applyState 的默认实现只是简单地把属性拷贝到对象中， 但是开发者可以覆盖此方法以支持更多行为。

通过向 beforestaterestore, staterestore, beforestatesave 和 statesave 事件上绑定监听器，你可以在保存和恢复状态时进行额外的处理。

Component
style : String
被添加到组件元素的特定样式。 必须是按照...
被添加到组件元素的特定样式。 必须是按照 Ext.Element.applyStyles 类指定格式的合法参数值。

new Ext.Panel({
    title: 'Some Title',
    renderTo: Ext.getBody(),
    width: 400, height: 300,
    layout: 'form',
    items: [{
        xtype: 'textarea',
        style: {
            width: '95%',
            marginBottom: '10px'
        }
    },
        new Ext.Button({
            text: 'Send',
            minWidth: '100',
            style: {
                marginBottom: '10px'
            }
        })
    ]
});
Component
text : String
此项目中显示的文本(默认值为 '')。
Item
tpl : Mixed
一个 Ext.Template , Ext.XTemplate 或者一个用来形成一个Ext.XTemplate的字符串数组...
一个 Ext.Template , Ext.XTemplate 或者一个用来形成一个Ext.XTemplate的字符串数组。 与 data 和 tplWriteMode 配置项协同使用。
Component
tplWriteMode : String
刷新组件的内容区域时使用的Ext.(X)Template方式。 默认为'overwrite' (参见 Ext.XTemplate.overwrite )。
刷新组件的内容区域时使用的Ext.(X)Template方式。 默认为'overwrite' (参见 Ext.XTemplate.overwrite )。
Component
xtype : String
需要创建配置的xtype。 当传递一个配置对象给构造函数时...
需要创建配置的xtype。 当传递一个配置对象给构造函数时，此配置选项不会被使用。 只有在使用懒初始化的时候此配置项才会被使用，此时容器的子项目不是 通过一个完整的实例组件，而是通过一个Component配置指定的。 在渲染时，将会查找xtype以决定创建何种类型的子组件。

预定义的xtype列表如下： here。

如果你继承Component创建你自己的组件，你需要使用Ext.ComponentMgr.registerType 对它们进行注册，以便利用懒初始化和渲染机制。
Component

公共属性

Property Defined By
disabled : Boolean
当前组件处于无效状态时为true。 Read-only.
Component
el : Ext.Element
封装了当前组件的Ext.Element。 Read-only。通常情况下，这将是一个<DIV>元素，它由此类的...

封装了当前组件的Ext.Element。 Read-only。

通常情况下，这将是一个<DIV>元素，它由此类的 onRender方法创建，但是它可以通过使用 autoEl 配置项进行覆盖。

注意: 直到组件渲染完成此元素都将处于无效状态。

如需向当前组件的 DOM事件(而不是当前组件自己的Observable事件)添加监听器， 更多建议，参见 listeners 配置项，或者直接使用一个render监听器:

new Ext.Panel({
    title: 'The Clickable Panel',
    listeners: {
        render: function(p) {
            // Append the Panel to the click handler's argument list.
            p.getEl().on('click', handlePanelClick.createDelegate(null, [p], true));
        },
        single: true  // Remove the listener after first invocation
    }
});

另请参见 getEl

Component
hidden : Boolean
如果当前组件处于隐藏状态，此值为true。Read-only。
Component
initialConfig : Object
当前组件的初始化配置描述。 Read-only。
Component
menu : Ext.menu.Menu
如果配置了该属性，那么它将作为当前项的子菜单。
Item
ownerCt : Ext.Container
组件所属的Container (默认为undefined，当前组件被添加到一个容器中时此值被自动设置)...
组件所属的Container (默认为undefined，当前组件被添加到一个容器中时此值被自动设置)。 Read-only。

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

Component
parentMenu : Ext.menu.Menu
当前项的父菜单。
BaseItem
refOwner : Ext.Container
如果当前组件是一个容器的孩子，并且是通过一个 ref 配置项被注册的，则此值为 ref 引用被插入到的祖先容器。
如果当前组件是一个容器的孩子，并且是通过一个 ref 配置项被注册的，则此值为 ref 引用被插入到的祖先容器。
Component
rendered : Boolean
如果当前组件已经被渲染了，此值为true。Read-only.
Component

公共方法

Method Defined By
CheckItem ( Object config )
创建一个新的CheckItem
创建一个新的CheckItem
参数:
  • config : Object
    配置选项
返回值:
  • void
CheckItem
addClass ( string cls ) : Ext.Component
为组件底层的元素添加CSS样式。
为组件底层的元素添加CSS样式。
参数:
  • cls : string
    需要添加的CSS样式的class名称
返回值:
  • Ext.Component
    this
Component
addEvents( Object|String o, string Optional. ) : void
添加指定的事件到事件列表上，事件会被该Observable触发。
添加指定的事件到事件列表上，事件会被该Observable触发。
参数:
  • o : Object|String
    以事件名作为属性true作为值的对象 或者当多个事件名被分开的传递时则为第一个事件名。
  • Optional. : string
    事件名被分开的传递时则为事件名。 用法:
    this.addEvents('storeloaded', 'storecleared');
返回值:
  • void
Observable
addListener( String eventName, Function handler, [Object scope], [Object options] ) : void
给对象添加事件处理器。
给对象添加事件处理器。
参数:
  • eventName : String
    监听的事件名。
  • handler : Function
    事件调用的方法
  • scope : Object
    （可选）处理方法执行的作用域 (this的引用 reference)。 如果被忽略。默认为触发事件的对象。
  • options : Object
    （可选）包含处理器配置和属性的对象。 可能包含以下的属性:
    • scope : Object
      处理方法执行的作用域(this的引用) 。 如果被忽略。默认为触发事件的对象。
    • delay : Number
      在触发事件后延迟调用处理器的毫秒数。
    • single : Boolean
      如果为True则添加一个处理器来处理下一次的事件触发（仅一次），然后移除自己。
    • buffer : Number
      使得处理器延迟指定毫秒数后预定的运行在 一个Ext.util.DelayedTask中 。 如果事件在时间内再一次被触发，原始的处理器不会被调用，但是新的处理器会预定的在他的位置上。
    • target : Observable
      如果事件在目标的Observable上触发则仅仅调用处理器， 否则 事件会从子类的Observable上冒泡

    组合选项
    使用这些选项参数,可能会组合出不同类型的监听器：

    一个延迟的，一次性的监听器。

    myDataView.on('click', this.onClick, this, {
single: true,
delay: 100
});

    一次调用附加多个处理器
    该方法同样支持传递一个包含指定的多个处理器的属性的配置对象参数。

    myGridPanel.on({
'click' : {
    fn: this.onClick,
    scope: this,
    delay: 100
},
'mouseover' : {
    fn: this.onMouseOver,
    scope: this
},
'mouseout' : {
    fn: this.onMouseOut,
    scope: this
}
});

    或者一个简写的语法：

    myGridPanel.on({
'click' : this.onClick,
'mouseover' : this.onMouseOver,
'mouseout' : this.onMouseOut,
 scope: this
});
返回值:
  • void
Observable
applyToMarkup ( String/HTMLElement el ) : void
将此组件添加到已存在的有效的HTML标签中。 使用该方法时，无需再调用render()方法。
将此组件添加到已存在的有效的HTML标签中。 使用该方法时，无需再调用render()方法。
参数:
  • el : String/HTMLElement
返回值:
  • void
Component
checkHandler ( Ext.menu.CheckItem this , Boolean checked ) : void
当选择发生变化时的事件处理器。默认情况下，没有定义此函数，但是如果提供一个实现...
当选择发生变化时的事件处理器。默认情况下，没有定义此函数，但是如果提供一个实现，当选择发生变化时它将被自动调用。
参数:
  • this : Ext.menu.CheckItem
  • checked : Boolean
    The checked value that was set
返回值:
  • void
CheckItem
cloneConfig ( Object overrides ) : Ext.Component
默认使用原先传递给当前实例的配置值克隆当前组件。
默认使用原先传递给当前实例的配置值克隆当前组件。
参数:
  • overrides : Object
    一个新的配置项，包含需要覆盖到克隆版本的所有属性。 可以传递一个id参数给此对象，否则将自动生成一个新的id以避免发生重复。
返回值:
  • Ext.Component
    当前组件的克隆副本
Component
destroy () : void
通过如下方法销毁对象：删除所有的事件监听器、将组件的元素从DOM树中删除...
通过如下方法销毁对象：删除所有的事件监听器、将组件的元素从DOM树中删除（如果可以）、 将组件从它的 Ext.Container（如果可用）中删除、 并且将它从Ext.ComponentMgr中 注销。 销毁操作一般由框架自动完成，一般情况下不需要直接调用该方法。
参数:
  • 无。
返回值:
  • void
Component
disable () : Ext.Component
将组件置为无效状态，并出发'disable'事件。
将组件置为无效状态，并出发'disable'事件。
参数:
  • 无。
返回值:
  • Ext.Component
    this
Component
enable () : Ext.Component
将组件置为有效状态并触发'enable'事件。
将组件置为有效状态并触发'enable'事件。
参数:
  • 无。
返回值:
  • Ext.Component
    this
Component
enableBubble( String/Array events ) :void
是否现在使得事件会被该Observable触发并调用 this.getBubbleTarget()方法在拥有者的继承树...

是否现在使得事件会被该Observable触发并调用 this.getBubbleTarget()方法在拥有者的继承树中冒泡。Observable的基础类中没有该方法的实现。

该方法一般被Ext.Components用来冒泡事件到拥有者的容器。参看Ext.Component.getBubbleTarget默认的实现 在Ext.Component中返回组件的直接拥有者。但是如果需要的是一个已知的目标，该方法可以被重写来更快的访问需求的目标。

例子:

Ext.override(Ext.form.Field, {
    // 添加方法到Field的initComponent上改变事件为冒泡
    initComponent : Ext.form.Field.prototype.initComponent.createSequence(function() {
        this.enableBubble('change');
    }),

    // 我们知道我们想让Field的事件冒泡到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() {
            // 如果样式被修改标题会变红。
            myForm.header.setStyle('color', 'red');
        }
    }
});
参数:
  • events : String/Array
    冒泡的事件名，或事件名数组
返回值:
  • void
Observable
findParentBy ( Function fn ) : Ext.Container
通过自定义的函数查找当前组件上层任何层次上的容器...
通过自定义的函数查找当前组件上层任何层次上的容器。 如果传递的函数返回true，容器对象将被返回。
参数:
  • fn : Function
    自定义的函数，使用如下参数调用(container,this component)。
返回值:
  • Ext.Container
    自定义函数返回true的第一个容器
Component
findParentByType ( String/Class xtype ) : Ext.Container
通过xtype或者class查找当前组件上层任何层次上的容器
通过xtype或者class查找当前组件上层任何层次上的容器
参数:
  • xtype : String/Class
    组件的xtype字符串，或者直接是组件的class
返回值:
  • Ext.Container
    符合指定xtype或者class的第一个容器
Component
fireEvent( String eventName, Object... args ) : Boolean
用传入的参数触发指定的事件 (减去事件名)。 一个事件可以被设置为冒泡 Obse...

用传入的参数触发指定的事件 (减去事件名)。

一个事件可以被设置为冒泡到Observable父类继承树(参看 Ext.Component.getBubbleTarget) 调用enableBubble实现。

参数:
  • eventName : String
    触发的事件名。
  • args : Object...
    传递给处理器的可变长度参数。
返回值:
  • Boolean
    如果有任何的处理器返回false则返回false，否则返回true。
Observable
focus ( [ Boolean selectText ], [ Boolean/Number delay ] ) : Ext.Component
尝试将当前组件设为焦点。
尝试将当前组件设为焦点。
参数:
  • selectText : Boolean
    (可选) 如果可用，同时选中组件内部的文本
  • delay : Boolean/Number
    (可选)将当前组件设置为焦点的延迟时间(设置为true等于0毫秒)
返回值:
  • Ext.Component
    this
Component
getBubbleTarget () : Ext.Container
为Observable的fireEvent方法提供链接，它沿着继承结构进行冒泡操作。
为Observable的fireEvent方法提供链接，它沿着继承结构进行冒泡操作。
参数:
  • 无。
返回值:
  • Ext.Container
    拥有当前组件的容器。
Component
getEl () : Ext.Element
返回 Ext.Element ，它包装了当前组件。...

返回 Ext.Element ，它包装了当前组件。

通常情况下，这将是一个<DIV>元素，它是由该类的onRender方法创建的， 但是可以使用autoEl配置项 覆盖它。

注意: 此元素将会一直处于无效状态直到当前组件渲染完成。

如需向当前组件的 DOM事件(而不是当前组件自己的Observable事件)添加监听器， 更多建议，参见 listeners 配置项，或者直接使用一个render监听器:

new Ext.Panel({
    title: 'The Clickable Panel',
    listeners: {
        render: function(p) {
            // Append the Panel to the click handler's argument list.
            p.getEl().on('click', handlePanelClick.createDelegate(null, [p], true));
        },
        single: true  // Remove the listener after first invocation
    }
});
参数:
  • 无。
返回值:
  • Ext.Element
    包装当前组件的元素。
Component
getId () : String
返回当前组件的id，如果没有定义id，则自动生成并返回一个id:'ext-comp-'...
返回当前组件的 id 如果没有定义 id 则自动生成并返回一个 id

'ext-comp-' + (++Ext.Component.AUTO_ID)
参数:
  • 无。
返回值:
  • String
    id
Component
getItemId () : String
返回当前组件的 itemId 。 如果没有通过配置参数指定 itemId 那么，将会使用...
返回当前组件的 itemId 。 如果没有通过配置参数指定 itemId 那么，将会使用 getId 返回 id 。
参数:
  • 无。
返回值:
  • String
Component
getXType () : String
获取当前组件的xtype，它是用 Ext.ComponentMgr 注册的。 所有可用的xtype列表，参见...
获取当前组件的xtype，它是用 Ext.ComponentMgr 注册的。 所有可用的xtype列表，参见 Ext.Component 类头部。示例用法:

var t = new Ext.form.TextField();
alert(t.getXType());  // alerts 'textfield'
参数:
  • 无。
返回值:
  • String
    The xtype
Component
getXTypes () : String
返回此组件的xtype继承树，用字符'-'分隔。 所有可用的xtype值...

返回此组件的xtype继承树，用字符'-'分隔。 所有可用的xtype值，请参见Ext.Component 类的头部。

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

示例用法:

var t = new Ext.form.TextField();
alert(t.getXTypes());  // alerts 'component/box/field/textfield'
参数:
  • 无。
返回值:
  • String
    xtype层次字符串
Component
hasListener( String eventName ) : Boolean
检测对象是否包含指定事件的任何监听器
检测对象是否包含指定事件的任何监听器
参数:
  • eventName : String
    检测的事件名
返回值:
  • Boolean
    如果事件被监听则为true，否则为false
Observable
hide () : Ext.Component
隐藏当前组件。 监听 beforehide' 事件并且返回false 可以取消隐藏组件的操作。 在隐藏组件之后触发...
隐藏当前组件。 监听 beforehide' 事件并且返回false 可以取消隐藏组件的操作。 在隐藏组件之后触发 ' hide' 事件。 如果组件被配置成 hidden 那么此方法在内部被调用。
参数:
  • 无。
返回值:
  • Ext.Component
    this
Component
isVisible () : Boolean
如果当前组件可见，返回true。
如果当前组件可见，返回true。
参数:
  • 无。
返回值:
  • Boolean
    如果当前组件可见，返回true，其它返回false。
Component
isXType ( String xtype , [ Boolean shallow ] ) : Boolean
Tests whether or not this Component is of a specific xtype. This can test whether this Component is descended from th...

测试此组件是否是指定的xtype。此方法既可以测试是否是指定的xtype的某个子类， 或者它是否直接是指定的xtype类(shallow=true)。

如果使用你自己的子类，必须知道组件必须注册它的xtype值。

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

示例用法:

var t = new Ext.form.TextField();
var isText = t.isXType('textfield');        // true
var isBoxSubclass = t.isXType('box');       // true, descended from BoxComponent
var isBoxInstance = t.isXType('box', true); // false, not a direct BoxComponent instance
参数:
  • xtype : String
    需要为当前组件进行检测的xtype
  • shallow : Boolean
    (可选) 如果为false，检测组件是否是xtype继承树中的某个子类（默认是这种情况）， 如果为true，只检测组件是否是指定的xtype类型。
返回值:
  • Boolean
    如果当前组件是指定xtype的子类，返回true，其它返回flase。
Component
mon ( Observable|Element item , Object|String ename , Function fn , Object scope , Object opt ) : void
向任何Observable对象(或者元素)上添加监听器，监听器将会在组件...

向任何Observable对象(或者元素)上添加监听器，监听器将会在组件销毁时被自动删除。
用法：

myGridPanel.mon(myGridPanel.getSelectionModel(), 'selectionchange', handleSelectionChange, null, {buffer: 50});

or:

myGridPanel.mon(myGridPanel.getSelectionModel(), {
    selectionchange: handleSelectionChange,
    buffer: 50
});
参数:
  • item : Observable|Element
    需要添加listener/listeners的项目。
  • ename : Object|String
    事件名，或者一个包含事件名属性的对象。
  • fn : Function
    (可选) 如果 ename 参数是一个事件名，此参数为处理函数。
  • scope : Object
    (可选)如果 ename 参数是一个事件名称，此参数是作用域 ( this 引用)，监听函数将会在此作用域中被执行。
  • opt : Object
    (可选)如果 ename 参数是一个事件名称， 此参数是 addListener 配置项。
返回值:
  • void
Component
mun ( Observable|Element item , Object|String ename , Function fn , Object scope ) : void
删除通过mon 方法添加的监听器。
删除通过mon 方法添加的监听器。
参数:
  • item : Observable|Element
    需要删除listener/listeners的项目。
  • ename : Object|String
    事件名称，或者一个包含事件名称属性的对象。
  • fn : Function
    (可选)如果 ename 参数是一个事件名称，此参数是一个处理函数。
  • scope : Object
    (可选)如果 ename 参数是一个事件名称，此参数是作用域 ( this 引用)，监听函数将会在此作用域中被执行。
返回值:
  • void
Component
nextSibling () : Ext.Component
返回所属容器中的下一个组件
返回所属容器中的下一个组件
参数:
  • 无。
返回值:
  • Ext.Component
Component
on( String eventName, Function handler, [Object scope], [Object options] ) : void
给对象添加事件处理器 (addListener的简写形式)
给对象添加事件处理器 (addListener的简写形式。)
参数:
  • eventName : String
    监听的事件类型
  • handler : Function
    事件调用的方法
  • scope : Object
    （可选）处理方法执行时的作用域 (this 的引用)。 如果被忽略。默认为触发事件的对象。
  • options : Object
    可选 包含处理器配置的对象。
返回值:
  • void
Observable
previousSibling () : Ext.Component
返回所属容器中的前一个组件
返回所属容器中的前一个组件
参数:
  • 无。
返回值:
  • Ext.Component
Component
purgeListeners() : void
移除对象上所有的监听器
移除对象上所有的监听器
参数:
  • 无。
返回值:
  • void
Observable
relayEvents( Object o, Array events ) : void
从指定的Observable上传递选择的事件就好像被当前对象触发一样。
从指定的Observable上传递选择的事件就好像被当前对象触发一样。
参数:
  • o : Object
    该Observable上的事件被当前对象传递。
  • events : Array
    传递的数组名。
返回值:
  • void
Observable
removeClass ( string cls ) : Ext.Component
从组件底层的元素上删除一个CSS类。
从组件底层的元素上删除一个CSS类。
参数:
  • cls : string
    需要移除的CSS类名
返回值:
  • Ext.Component
    this
Component
removeListener( String eventName, Function handler, [Object scope] ) : void
删除一个事件处理器。
删除一个事件处理器。
参数:
  • eventName : String
    处理器关联的事件类型。
  • handler : Function
    移除的处理器。 这应该是传递到addListener里的方法的引用。
  • scope : Object
    （可选）处理器指定的初始作用域。
返回值:
  • void
Observable
render ( [ Element/HTMLElement/String container ], [ String/Number position ] ) : void
在传递进来的HTML元素中渲染当前组件。...

在传递进来的HTML元素中渲染当前组件。

如果你正在使用一个Container 对象放置当前组件，那么请不要使用render方法。

当容器第一次被渲染时，它的子组件将会被容器的 layout 管理器渲染。

某些布局管理器允许动态添加子组件。它们包括 Ext.layout.CardLayout, Ext.layout.AnchorLayout, Ext.layout.FormLayout, Ext.layout.TableLayout。

当一个新的子组件被添加时，如果容器已经被渲染了， 你可能需要调用容器的 doLayout 方法来刷新视图，它将导致所有没有被渲染的子组件进行渲染操作。 此操作是必须的，这样你可以添加多个子组件而只刷新一次layout。

当创建复杂的UI时，非常重要的一点是，请记住调整子项目的尺寸和位置是容器的 layout 管理器的职责。 如果你希望子项目的尺寸对用户交互作出反应， 你必须为容器配置一个布局管理器，它将创建和管理你心里想要的那种布局。

忽略容器的layout 配置意味着将会使用一个基本的布局管理器，它除了按次序把子组件 渲染到容器中之外什么事情都不做。 这种情况下，任何尺寸和位置的调整操作都不会发生。

参数:
  • container : Element/HTMLElement/String
    (可选) 需要在其中渲染当前组件的元素。 如果它是从一个已存在的标签中创建的，此参数应该被忽略。
  • position : String/Number
    (可选) 容器中的一个元素ID或者一个DOM节点索引， 当前组件将会被插入到它前面 (默认append到容器的尾部)
返回值:
  • void
Component
resumeEvents() : void
重新开始触发事件。(参见suspendEvents) 如果事件以queueSuspended参数被挂起，则在事件被挂起时 ...
重新开始触发事件。(参见 suspendEvents) 如果事件以queueSuspended 参数被挂起，则在事件被挂起时触发的事件会被传递到所有的监听器上
参数:
  • 无。
返回值:
  • void
Observable
setChecked ( Boolean checked , [ Boolean suppressEvent ] ) : void
设置当前项目的选中状态
设置当前项目的选中状态
参数:
  • checked : Boolean
    新的值
  • suppressEvent : Boolean
    (可选) 当值为 true 时将不触发 checkchange 事件(默认值为 false)
返回值:
  • void
CheckItem
setDisabled ( Boolean disabled ) : Ext.Component
工具函数，使用布尔值设置有效/无效(disabled/enabled )。
工具函数，使用布尔值设置有效/无效(disabled/enabled )。
参数:
  • disabled : Boolean
返回值:
  • Ext.Component
    this
Component
setHandler ( Function handler , Object scope ) : void
设置处理当前项单击事件的处理器 (等价于传递到 handler 配置属性)....
设置处理当前项单击事件的处理器 (等价于传递到 handler 配置属性)。 如果存在一个已经注册的处理器，它将会被注销。
参数:
  • handler : Function
    点击时调用的方法
  • scope : Object
    传递给处理器的作用域，默认为当前菜单选项。
返回值:
  • void
BaseItem
setIconClass ( String cls ) : void
设置应用到项目图标元素的CSS样式
设置应用到项目图标元素的CSS样式
参数:
  • cls : String
    The CSS class to apply
返回值:
  • void
Item
setText ( String text ) : void
设置显示在当前菜单项中的文本
设置显示在当前菜单项中的文本
参数:
  • text : String
    显示的文本
返回值:
  • void
Item
setVisible ( Boolean visible ) : Ext.Component
工具方法，通过使用布尔值隐藏或者显示当前组件。
工具方法，通过使用布尔值隐藏或者显示当前组件。
参数:
  • visible : Boolean
    true时显示，false时隐藏
返回值:
  • Ext.Component
    this
Component
show () : Ext.Component
显示当前组件。监听' beforeshow' 事件，返回 false 取消显示组件...
显示当前组件。监听' beforeshow' 事件，返回 false 取消显示组件。在显示组件之后触发' show' 事件。
参数:
  • 无。
返回值:
  • Ext.Component
    this
Component
suspendEvents( Boolean queueSuspended ) : void
暂停触发所有的事件。 (参看resumeEvents)
暂停触发所有的事件。（参看 resumeEvents)
参数:
  • queueSuspended : Boolean
    如果传递为true则排列好暂停的事件使得在调用 resumeEvents 后再触发它们，而不是抛弃所有暂停的事件。
返回值:
  • void
Observable
un( String eventName, Function handler, [Object scope] ) : void
删除一个事件处理器(removeListener方法的简写形式)
删除一个事件处理器(removeListener方法的简写形式。)
参数:
  • eventName : String
    处理器关联的事件类型
  • handler : Function
    被删除的处理器 这应该是传入 addListener 中的方法的引用。
  • scope : Object
    （可选）为处理器指定的初始作用域。
返回值:
  • void
Observable
update ( Mixed htmlOrData , [ Boolean loadScripts ], [ Function callback ] ) : void
刷新组件的内部区域。
刷新组件的内部区域。
参数:
  • htmlOrData : Mixed
    如果已经通过tpl为当前组件配置了一个模板，那么 将会使用此参数来装配模板。 如果没有为当前组件配置模板，组件的内容区域将会通过Ext.Element 进行刷新。
  • loadScripts : Boolean
    (可选)只用在使用html配置时此参数才合法。默认为false。
  • callback : Function
    (可选)只用在使用html配置时此参数才合法。 当脚本加载完成时回调函数才被执行。
返回值:
  • void
Component

公共事件

Event Defined By
activate : ( Ext.menu.BaseItem this )
该项目被激活为当前活动项时触发
该项目被激活为当前活动项时触发
监听器将会以如下的参数格式调用：
  • this : Ext.menu.BaseItem
BaseItem
added : ( Ext.Component this , Ext.Container ownerCt , number index )
当一个组件被添加到一个Ext.Container时触发
当一个组件被添加到一个Ext.Container时触发
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • ownerCt : Ext.Container
    用于组件的容器
  • index : number
    添加组件的位置
Component
afterrender : ( Ext.Component this )
在组件渲染完成之后触发...

在组件渲染完成之后触发。

afterrender事件在当前组件被rendered 结束之后、在为组件定义的所有afterRender方法执行之后 触发，并且，如果有stateful， 也在状态被保存之后才触发。

监听器将会以如下参数格式被调用:
  • this : Ext.Component
Component
beforecheckchange : ( Ext.menu.CheckItem this , Boolean checked )
在设置新的选择值之前触发，提供一个机会在需要的时候取消操作。
在设置新的选择值之前触发，提供一个机会在需要的时候取消操作。
监听器将会以如下的参数调用:
  • this : Ext.menu.CheckItem
  • checked : Boolean
    The new checked value that will be set
CheckItem
beforedestroy : ( Ext.Component this )
在组件 destroyed 之前触发。 在事件监听器中返回false以停止 destroy 操作。
在组件 destroyed 之前触发。 在事件监听器中返回false以停止 destroy 操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforehide : ( Ext.Component this )
在调用hide方法隐藏组件之前触发。 在事件监听器中返回false可以停止隐藏操作。
在调用hide方法隐藏组件之前触发。 在事件监听器中返回false可以停止隐藏操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforerender : ( Ext.Component this )
在组件被rendered 之前触发。 在事件监听器中返回false可以停止render 操作。
在组件被rendered 之前触发。 在事件监听器中返回false可以停止render 操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforeshow : ( Ext.Component this )
在调用show()方法现实组件之前触发。 事件处理函数返回false可以停止show。
在调用show 方法现实组件之前触发。 事件处理函数返回false可以停止show。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforestaterestore : ( Ext.Component this , Object state )
在组件状态恢复之前触发。返回false停止恢复状态操作。
在组件状态恢复之前触发。返回false停止恢复状态操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    StateProvider返回的状态哈希值。 如果没有禁止此事件，那么状态对象会被传递给applyState。 默认情况下，这样简单地把属性值拷贝到当前组件中。 可以覆盖此方法以提供自定的状态恢复操作。
Component
beforestatesave : ( Ext.Component this , Object state )
在组件状态被保存到配置的状态提供者之前触发。 返回false可以停止保存。
在组件状态被保存到配置的状态提供者之前触发。 返回false可以停止保存。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    状态值哈希。 这由在组件上调用getState() 方法决定。 此方法必须由开发者提供，返回是否需要对状态进行描述，默认情况下， Ext.Component有一个空实现。
Component
checkchange : ( Ext.menu.CheckItem this , Boolean checked )
当设置了选中的值时触发
当设置了选中的值时触发
监听器将会以如下的参数调用:
  • this : Ext.menu.CheckItem
  • checked : Boolean
    The checked value that was set
CheckItem
click : ( Ext.menu.BaseItem this , Ext.EventObject e )
当前选项被点击时触发
当前选项被点击时触发
监听器将会以如下的参数格式调用:
  • this : Ext.menu.BaseItem
  • e : Ext.EventObject
BaseItem
deactivate : ( Ext.menu.BaseItem this )
当此项目被设置为非当前活动项时触发
当此项目被设置为非当前活动项时触发
监听器将会以如下的参数格式调用:
  • this : Ext.menu.BaseItem
BaseItem
destroy : ( Ext.Component this )
在组件被销毁之后触发。
在组件被destroyed之后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
disable : ( Ext.Component this )
在组件被设置为无效状态后触发。
在组件被设置为无效状态后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
enable : ( Ext.Component this )
当组件被设置为有效(enabled)之后触发。
当组件被设置为有效(enabled)之后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
hide : ( Ext.Component this )
在组件被隐藏之后触发。 当调用hide 方法隐藏组件之后触发。
在组件被隐藏之后触发。 当调用hide 方法隐藏组件之后触发。
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
removed : ( Ext.Component this , Ext.Container ownerCt )
当一个组件被从Ext.Container容器中删除时触发
当一个组件被从Ext.Container容器中删除时触发
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • ownerCt : Ext.Container
    持有组件的容器
Component
render : ( Ext.Component this )
在组件被渲染之后触发。
在组件被 rendered(渲染) 之后触发。
监听器将以如下的参数格式被调用:
  • this : Ext.Component
Component
show : ( Ext.Component this )
在调用show 方法显示组件之后触发。
在调用show 方法显示组件之后触发。
监听器将会用如下的参数格式被调用:
  • this : Ext.Component
Component
staterestore : ( Ext.Component this , Object state )
组件状态被存储之后触发。
组件状态被存储之后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    StateProvider返回的状态哈希值。 如果没有禁止此事件，那么状态对象会被传递给applyState。 默认情况下，这样简单地把属性值拷贝到当前组件中。 可以覆盖此方法以提供自定的状态恢复操作。
Component
statesave : ( Ext.Component this , Object state )
在组件状态被保存到所配置的状态提供者之后触发。
在组件状态被保存到所配置的状态提供者之后触发。
监听器将会用如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    状态值hash。 这是由在足见上调用getState() 方法决定的。 开发者必须提供此方法以返回是否需要恢复状态，默认情况下， Ext.Component有一个空实现。
Component


Observable
    Component
      BoxComponent
        Container
          Menu
            ColorMenu

Class Ext.menu.ColorMenu

包: | Ext.menu
定义类的文件: | ColorMenu.js
类: | ColorMenu
继承自: | Menu

包含一个 Ext.ColorPalette 组件的菜单(提供一个基本的颜色选择器)。

说明:

  • 虽然这里没有列出，但是该类constructor可以接受 Ext.ColorPalette 的所有配置选项。
  • 如果扩展ColorMenu，那么ColorPalette的配置必须配置到ColorMenu的 initialConfig里。如果把 ColorPalette 的配置项设置在this里，则不会有效。

配置项

Config Options Defined By
activeItem : String/Number
一个string型的组件id，或者组件的数字索引， 它需要...
一个string型的组件id，或者组件的数字索引， 它需要在渲染时在容器内的布局管理器中被初始化并激活。 例如：activeItem: 'item-1' 或者 activeItem: 0 ( 索引 0 =容器子项目集合中的第一个元素)。 activeItem仅仅适用于一次显示一个组件的布局模式(比如 Ext.layout.AccordionLayout, Ext.layout.CardLayout 和 Ext.layout.FitLayout)。 与 Ext.layout.ContainerLayout.activeItem 相关。
Container
allowDomMove : Boolean
在渲染时组件是否可以移动Dom节点(默认为true)。
Component
allowOtherMenus : Boolean
为true时，将允许同一时刻显示多个菜单 （默认为false）。
Menu
anchor : String
注: 这个配置只用于该组件被包含在一个已使用AnchorLayout...

注: 这个配置只用于该组件被包含在一个已使用 AnchorLayout (或者其子类)配置的Container时。 基于布局管理器，例如：

  • Ext.form.FormPanel
  • 指定 layout: 'anchor' // or 'form', or 'absolute'

参见 Ext.layout.AnchorLayout. anchor 。

BoxComponent
applyTo : Mixed
指定一个元素的id、一个DOM元素或者一个已经存在并被渲染到DIV中的元素，此DIV已经被...

指定一个元素的id、一个DOM元素或者一个已经存在并被渲染到DIV中的元素，此DIV已经被 渲染到document中，并且为当前组件指定了一些结构化的标签。

  • 描述 :
      当使用了 applyTo， 在主元素中也可以用id或者CSS类名来指定组件的托管部分， 并且，如果可以的话，创建的组件可能也会试图在那个标签中创建它的子组件。
  • 注意 :
      当使用此配置项时，无需调用render()方法。
      如果指定了applyTo属性，任何传递给 renderTo 的值都会被忽略，并且目标元素的父节点将会自动被用作组件的容器。
Component
autoDestroy : Boolean
如果为true，容器将自动销毁任何从其中被删除的组件， 否则...
如果为true，容器将自动销毁任何从其中被删除的组件， 否则必须手动处理销毁操作(默认为true)。
Container
autoEl : Mixed
一个表签名或者一个 DomHelper 描述，用来创建 Element ，它将封装当前组件...

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

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

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

{
    xtype: 'box',
    autoEl: {
        tag: 'img',
        src: 'http://www.example.com/example.jpg'

    }
}, {
    xtype: 'box',
    autoEl: {
        tag: 'blockquote',
        html: 'autoEl is cool!'
    }
}, {
    xtype: 'container',
    autoEl: 'ul',
    cls: 'ux-unordered-list',
    items: {
        xtype: 'box',
        autoEl: 'li',
        html: 'First list item'
    }
}
Component
autoHeight : Boolean
如果值为true，height配置项为'auto'，否则值为false的话使用固定的高度...

如果值为true，height配置项为'auto'，否则值为false的话使用固定的高度， 或者可以由其父类容器 layout manager来控制。(默认值为 false)。

注: 虽然很多组件继承了这个配置选项，但不是所有这些组件的自适应高度配置都会像期望的那样起作用。 设置autoHeight：值为true时，浏览器将根据元素的内容自动设置高度，这将意味着Ext不会去管理高度。

如果是由浏览器来管理高度，需要注意的是，通过浏览器进行调整的结构组件内不能被发现， 因此宽度的变化可能导致需要进行同步处理元素的高度。 例如：

var w = new Ext.Window({
    title: 'Window',
    width: 600,
    autoHeight: true,
    items: {
        title: 'Collapse Me',
        height: 400,
        collapsible: true,
        border: false,
        listeners: {
            beforecollapse: function() {
                w.el.shadow.hide();
            },
            beforeexpand: function() {
                w.el.shadow.hide();
            },
            collapse: function() {
                w.syncShadow();
            },
            expand: function() {
                w.syncShadow();
            }
        }
    }
}).show();
BoxComponent
autoScroll : Boolean
如果值为true，将会在该元素上使用overflow:'auto'配置，并且在必要的时候...
如果值为true，将会在该元素上使用overflow:'auto'配置，并且在必要的时候自动显示滚动条，否则，溢出部分的组件都会被切除(默认值为 false)。
BoxComponent
autoShow : Boolean
如果组件需要检测隐藏CSS属性(如 'x-hidden' 或者 'x-hide-display')并且在渲染时删除...
如果组件需要检测隐藏CSS属性(如 'x-hidden' 或者 'x-hide-display')并且在渲染时删除它们 (默认为false)，设置此值为true。
Component
autoWidth : Boolean
如果为true，使用width:'auto'配置，否则使用固定的宽度...

如果为true，使用width:'auto'配置，否则使用固定的宽度，或者可以由其父类容器的layout manager来控制。(默认值为 false)。

注: 虽然很多组件继承了这个配置选项，但不是所有这些组件的自适应宽度配置都会像期望的那样起作用。 设置autoWidth：值为true时，浏览器将根据元素的内容自动设置宽度，这将意味着Ext不会去管理宽度。

如果是由浏览器来管理宽度，需要注意的是，通过浏览器进行调整的结构组件内不能被发现，因此宽度的变化可能导致需要进行同步处理元素的宽度。 例如，在这个元素的目标是：

<div id='grid-container' style='margin-left:25%;width:50%'></div>
当浏览器窗口改变时，渲染后的Panel必须监听浏览器窗口大小的变化，以便通知子项，浏览器改变了其宽度：

var myPanel = new Ext.Panel({
    renderTo: 'grid-container',
    monitorResize: true, // relay on browser resize
    title: 'Panel',
    height: 400,
    autoWidth: true,
    layout: 'hbox',
    layoutConfig: {
        align: 'stretch'
    },
    defaults: {
        flex: 1
    },
    items: [{
        title: 'Box 1',
    }, {
        title: 'Box 2'
    }, {
        title: 'Box 3'
    }],
});
BoxComponent
boxMaxHeight : Number
设置组件的最大高度值...

设置组件的最大高度值。

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

BoxComponent
boxMaxWidth : Number
设置组件的最大宽度值...

设置组件的最大宽度值。

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

BoxComponent
boxMinHeight : Number
设置组件的最小高度值...

设置组件的最小高度值。

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

BoxComponent
boxMinWidth : Number
设置组件的最小宽度值...

设置组件的最小宽度值。

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

BoxComponent
bubbleEvents : Array
一个事件数组，当这些事件被触发时，将会被冒泡到所有父容器中。参见....

一个事件数组，当这些事件被触发时，将会被冒泡到所有父容器中。参见 Ext.util.Observable.enableBubble。 默认为 []。

Container
bufferResize : Boolean/Number
当设置为true时(50毫秒)或者是一个毫秒数值， 指定给当前容器的布...
当设置为true时(50毫秒)或者是一个毫秒数值， 指定给当前容器的布局管理器将会缓存它计算出的频率，然后 对组件进行一次重新布局操作。 对于重量级的容器，或者拥有大量子组件的容器来说，这非常有用， 因为频繁进行布局是非常昂贵的。 默认为 50 .
Container
clearCls : String
应用到特殊的clearing div的CSS类， 这个clearing div直接渲染到每个form field的包装器后面...

应用到特殊的clearing div的CSS类， 这个clearing div直接渲染到每个form field的包装器后面，以提供 清除field的功能(默认为 'x-form-clear-left')。

注意: 只有在当前组件被渲染到一个使用FormLayout 布局(例如 Ext.form.FormPanel 或者指定 layout:'form')的 容器中、或者是指定了一个fieldLabel 、或者指定isFormField=true 时此配置才有效。

另请参见 Ext.layout.FormLayout. fieldTpl。

Component
cls : String
一个可选的额外CSS类，它将被添加到当前组件的元素上(默认为'')...
一个可选的额外CSS类，它将被添加到当前组件的元素上(默认为'')。 此属性对于在组件上，或者它的任何使用标准CSS规则的孩子节点上， 添加定制的样式非常有用。
Component
contentEl : String
(可选)指定一个已存在的HTML元素，或者一个已存在HTML元素的...

(可选)指定一个已存在的HTML元素，或者一个已存在HTML元素的 id ，它们将被用作当前组件的内容。

  • 描述 :
    此配置选项被用来将一个已存在的HTML元素 插入到一个新组件(在组件渲染之后它简单地移动DOM元素) 的layout元素中，使它成为该组件的内容。
  • 注意 :
    指定的HTML元素将被append到组件的layout元素中， 在所有配置的 HTML 被插入之后， 并且，这样的话，在render事件 被触发时，document中将不再包含此元素。
    指定的HTML元素将不会参与组件所有可能使用的 layout 过程(译者注：指这些HTML元素 不会参与布局操作)。 它仅是HTML而已。布局操作实在孩子 items 上进行的。
    添加 x-hidden 或者 x-hide-display CSS类，以防在内容渲染到panel时发生闪烁。
Component
ctCls : String
一个可选的外部CSS样式，添加到这个组件的容器(默认值为 '')。 这个方法对于使用标准的CSS规则...

一个可选的外部CSS样式，添加到这个组件的容器(默认值为 '')。 这个方法对于使用标准的CSS规则，为组件或它的任何一个子组件添加特定的样式非常有用。 参见 Ext.layout.ContainerLayout和 extraCls 。

注意: ctCls 默认为 ''期望如下的类，它们将指定一个默认值:

  • Box Layout : 'x-box-layout-ct'
使用一个额外的CSS类配置以上的Class，它是append到默认对象上的。例如， 对于BoxLayout (Hbox and Vbox):
                                ctCls: 'x-box-layout-ct custom-class'

Component
data : Mixed
初始化数据集，它将被应用到 tpl 上以刷新组件的内容区域。
Component
defaultAlign : String
此菜单默认的 Ext.Element.alignTo 锚定位置值，与前一个项目的位置有关 (默认值为......
此菜单默认的 Ext.Element.alignTo 锚定位置值，与前一个项目的位置有关(默认值为 "tl-bl?")。
Menu
defaultOffsets : Array
根据指定的[x, y]坐标去更改菜单默认弹出的位置......
在调整菜单的 defaultAlign 配置选项后，根据指定的[x, y]坐标去更改菜单默认弹出的位置。 默认 [0, 0].
Menu
defaultType : String
当一个子项目通过一个原生的配置对象 而不是一个组件的实例指定时。...

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

默认为 'panel' ， Ext.menu.Menu 默认为 'menuitem' ， Ext.Toolbar 和 Ext.ButtonGroup 默认为 'button' 。

Container
defaults : Object|Function
此选项是在所有添加的项目上应用默认设置的手段， 这些项目要么是通过...

此选项是在所有添加的项目上应用默认设置的手段， 这些项目要么是通过 items 配置项添加的， 或者是通过 add 或者是通过 insert 方法添加的。

如果添加的项目是一个配置对象， 并且不是一个组件的实例， 那么默认参数将会被无条件地被应用。 如果添加的项目是一个组件的实例， 那么默认参数将有条件地被应用，以免覆盖项目上的现有属性你。

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

例如，如需自动在 Ext.Panel 所包含的每个项目上应用padding属性，你可以传递: defaults: {bodyStyle: 'padding:15px'} 。

用法:

defaults: {               // defaults are applied to items, not the container
    autoScroll:true
},
items: [
    {
        xtype: 'panel',   // defaults do not have precedence over
        id: 'panel1',     // options in config objects, so the defaults
        autoScroll: false // will not be applied here, panel1 will be autoScroll:false
    },
    new Ext.Panel({       // defaults do
                                     have precedence over options
        id: 'panel2',     // options in components, so the defaults
        autoScroll: false // will be applied here, panel2 will be autoScroll:true.
    })
]
Menu
disabled : Boolean
当前组件处于无效状态时为true。 Read-only.
Component
disabledClass : String
当组件处于无效状态时添加到组件上的CSS类(默认为 'x-item-disabled')。
Component
fieldLabel : String
紧靠此field显示的标签文本(默认值为 '')。注意...

紧靠此field显示的标签文本(默认值为 '')。

注意:只有在当前组件被渲染到一个使用FormLayout 的容器中时，此配置才有效。 (例如 Ext.form.FormPanel 或 指定 layout:'form')。

另请参见 hideLabel 、 Ext.layout.FormLayout和 fieldTpl。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Name'
    }]
});
Component
flex : Number
注: 这个配置只用于该组件被包含在一个已使用BoxLayout配置的Container中时...

注: 这个配置只用于该组件被包含在一个已使用BoxLayout配置的Container中时。通过计算每一个子组件的flex值所占全部flex值之和的比例，来决定子组件的宽(HBoxLayout)高(VBoxlayout)。 任何子项的 flex = 0 或 flex = undefined 将不被设置(初始值大小将不被改变)。

BoxComponent
floating : Boolean
在默认情况下，一个菜单配置中，floating:true 将会被一个Ext.Layer 所渲染(一个绝对定位，浮动......)

在默认情况下，一个菜单配置中， floating:true 将会被一个 Ext.Layer (一个绝对定位，浮动的组成部分中zindex=15000)所渲染。 如果配置项是 floating:false , 菜单可作为子菜单的另一个容器，而不是一个自由浮动的 Layer（层）。

Menu
forceLayout : Boolean
如果此值为true，容器将将强制初始化一次布局操作...
如果此值为true，容器将将强制初始化一次布局操作， 即使容器处于隐藏或者折叠状态。 此配置项对于在一个折叠或者隐藏的容器中强制渲染非常有用 (默认为false)。
Container
handler : Function
(可选)一个处理菜单项点击事件的方法。 该方法将会被以如下的参数调用:...
(可选)一个处理菜单项点击事件的方法。 该方法将会被以如下的参数调用:
  • palette : ColorPalette
    The Ext.ColorPalette.
  • color : String
    颜色值是6位数十六进制值(不带#开头)。
ColorMenu
height : Number
组件的高度(默认值为 auto)。注:如果想使用百分比的方式...
组件的高度(默认值为 auto)。注:如果想使用百分比的方式来设置值，请查看 Ext.Component.anchor。
BoxComponent
hidden : Boolean
如果当前组件处于隐藏状态，此值为true。Read-only。
Component
hideBorders : Boolean
设置为true可以隐藏所包含的每个组件的边框， false为遵照组件现有的边框设置...
设置为true可以隐藏所包含的每个组件的边框， false为遵照组件现有的边框设置(默认为 false)。
Container
hideLabel : Boolean
true时完全隐藏label元素 ( label 和 separator)。 默认为 false。 默认情况下，即使你不指定...

true时完全隐藏label元素 ( label 和 separator)。 默认为 false。 默认情况下，即使你不指定 fieldLabel 它的空间仍然会被保留，这样这块区域会与其它确实拥有label的区域位于同一排。 讲此值设置为 true 将导致此区域不再保留此空间。

注意: 参见 clearCls 的注释。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield'
        hideLabel: true
    }]
});
Component
hideMode : String
组件如何隐藏，支持的值有： 'visibility' (css visibility), 'offsets' (位置偏移量为负值) 和...

组件如何隐藏，支持的值有： 'visibility' (css visibility), 'offsets' (位置偏移量为负值) 和 'display' (css display).

注意:一般首选默认值 'display'，因为当组件第一次显示的时候它们会自动进行布局 (隐藏的时候不会调整尺寸)。

Component
hideOnClick : Boolean
值为false时选择颜色后继续显示菜单，默认为true。
ColorMenu
hideParent : Boolean
此值为true时，当调用hide/show方法时，将会hide和show组件的容器...
此值为true时，当调用hide/show方法时，将会hide和show组件的容器；false时将会 hide和show组件自身(默认为false)。例如，这可以用作window上隐藏按钮的一种 快捷操作，通过设置此按钮的hideParent:true，然后把它添加到window上。
Component
html : String/Object
一个HTML片段，或者一个 DomHelper 描述，用作layout元素的内容(默认为'')。...
一个HTML片段，或者一个 DomHelper 描述，用作layout元素的内容(默认为'')。 这个HTML内容在组件渲染之后才被添加，所以在 render 出发的时候，document中尚未包含此HTML。 但是这个内容将会在所有配置的 contentEl 之前被插入到body标签中。
Component
id : String
当前组件唯一的id(默认为auto-assigned id)...

当前组件唯一的id(默认为auto-assigned id)。 如果你需要在以后访问组件，而又没有一个有效的组件对象引用，那么你需要指定一个 id( 也就是，使用Ext. getCmp方法 )。

注意，此id也将被用作组件底层HTML标签的id，这些标签被渲染到页面中。 这将允许你编写基于id的CSS规则，以独立地描述指定的实例；并且，也可以通过 组件父标签的id选中子元素。

注意:为了避免与唯一的id 产生重复， 请参见 itemId 和 ref 。

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

Component
ignoreParentClicks : Boolean
设置为true时，将忽略在任何父菜单项(显示子菜单)上的点击操作， 这样在点击......
设置为true时，将忽略在任何父菜单项(显示子菜单)上的点击操作， 这样在点击父菜单项时子菜单不会隐藏掉(默认值为 false)。
Menu
itemCls : String
注意: 只有在当前组件被渲染到一个使用FormLayout 布局的 容器中时此配置才有效...

注意: 只有在当前组件被渲染到一个使用FormLayout 布局的 容器中时此配置才有效。 (例如Ext.form.FormPanel 或者指定 layout:'form')。

一个附加的CSS类，应用到div上，包装当前field的表单元素。 如果提供了此参数， field级上的itemCls将会覆盖 container级上提供的 默认itemCls。 为itemCls指定的值将会被添加默认的 类('x-form-item')。

既然它被应用到项目的包装器上(参见 Ext.layout.FormLayout。 fieldTpl)， 它将允许你编写能应用到此field、label(如果有指定)、或者field内部任何其它元素的标准CSS规则。

注意: 参考 fieldLabel的注释。 .

示例用法:

// Apply a style to the field's label:
<style>
    .required .x-form-item-label {font-weight:bold;color:red;}
</style>

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Name',
        itemCls: 'required' //this label will be styled
    },{
        xtype: 'textfield',
        fieldLabel: 'Favorite Color'
    }]
});
Component
itemId : String
当没有可利用的对象引用时，itemId可以作为第二选择，用来获得一个组件的引用， 代替 ...

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

var c = new Ext.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'); // 与 Ext.getCmp()不同

p2 = p1.ownerCt.getComponent('p2'); // 通过兄弟对象获得引用

另请参见 id 和 ref 。

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

Component
items : MixedCollection
当前容器中的子组件集合 Ext.util.MixedCollection
Menu
labelSeparator : String
每个fieldLabel 文本后面现实的分隔符。 此属性可以在多个层次上进行配置...

每个fieldLabel 文本后面现实的分隔符。 此属性可以在多个层次上进行配置。优先顺序为：

  • field / component level
  • container level
  • layout level (默认为冒号 ':')
如不需要为当前field的label显示分隔符，指定一个空字符串''即可。

注意:参见 clearCls 的注释。

另请参见 hideLabel 和 Ext.layout.FormLayout。 fieldTpl。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    layoutConfig: {
        labelSeparator: '~'   // layout config has lowest priority (defaults to ':')
    },
    labelSeparator: '>>',     // config at container level
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Field 1',
        labelSeparator: '...' // field/component level config supersedes others
    },{
        xtype: 'textfield',
        fieldLabel: 'Field 2' // labelSeparator will be '='

    }]
});
Component
labelStyle : String
一个CSS样式描述字符串，它将直接应用到当前field的label上...

一个CSS样式描述字符串，它将直接应用到当前field的label上。 如果有设置，默认为容器的labelStyle值(例如 Ext.layout.FormLayout.labelStyle , 或者 '')。

注意:参见 clearCls 的注释。

另请参见 hideLabel 和 Ext.layout.FormLayout. fieldTpl。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Name',
        labelStyle: 'font-weight:bold;'
    }]
});
Component
layout : String/Object
*重要: 为了让子项目能被正确地调整尺寸和位置， 典型地，必须通过 layout 配置项指定一个布局管理器。...

*重要: 为了让子项目能被正确地调整尺寸和位置， 典型地，必须通过 layout 配置项指定一个布局管理器。

调整子items的尺寸和位置 是容器的布局管理器的职责，它负责创建和管理你想要的那种布局类型。 例如:

new Ext.Window({
    width:300, height: 300,
    layout: 'fit', // explicitly set layout manager: override the default (layout:'auto')
    items: [{
        title: 'Panel inside a Window'
    }]
}).show();

如果没有为一个通用的容器(例如Container或者Panel)特别指定 layout ，将会使用default layout manager ，它除了将子组件按顺序渲染到容器中之外什么事情都不做( 这种情况下不会发生调整尺寸和位置的操作)。 一些容器类内部指定了一个默认的布局 (例如FormPanel指定了 layout: 'form' )。 另一些有特殊用途的类内部指定/管理它们内置的布局( 例如GridPanel, TabPanel, TreePanel, Toolbar, Menu等等)。

layout 既可以通过一个对象或者一个字符串指定:

  • 用一个对象指定
    • 示例用法:
      • layout: {
    type: 'vbox',
    padding: '5',
    align: 'left'
}
    • type

      • 当前容器需要使用的布局类型。 如果不指定，将创建并使用一个默认的 Ext.layout.ContainerLayout 。

      可用的布局 type 值是:

      • absolute
      • accordion
      • anchor
      • auto Default
      • border
      • card
      • column
      • fit
      • form
      • hbox
      • menu
      • table
      • toolbar
      • vbox
    • 布局描述配置参数

      • 也可以指定附加的布局描述配置。 关于每个布局类型可用配置选项完整的细节，参见 type 参数指定的相关布局类。

  • 通过一个字符串指定
    • 示例用法:
      • layout: 'vbox',
layoutConfig: {
    padding: '5',
    align: 'left'
}
    • layout

      • 当前容器使用的布局 type ( 可用的布局类型值参见上述列表)。

    • layoutConfig

      • 附件的布局描述配置参数。 关于每个布局类型可用配置选项完整的细节，参见 layout 参数指定的相关布局类。

Menu
layoutConfig : Object
这是一个配置对象，包含为 layout 指定的参数， 如果 layout 是作为一个 string 来指定的。

Container
listeners : Object
一个包含一个或多个事件处理器的配置对象，会在初始化的时候被添加到目标对象上...

一个包含一个或多个事件处理器的配置对象，会在初始化的时候被添加到目标对象上。 该配置对象应该是一个有效的监听器配置对象就像 addListener例子中指定的一样可一次附加多个处理器。

ExtJs Components上的DOM事件

一些 ExtJs Component 类导出时会选择一些DOM事件(例如 "click", "mouseover" 等等), 这通常只是在有额外的值可以被添加时发生。例如DataView类的 click事件会传递被点击的节点。也可以直接在Component的HTMLElementevent上访问DOM事件，但必需在Component被渲染后监听器才能添加到Element 上。可以按照以下步骤添加插件:

// 插件会用一个监听器配置对象进行配置。
//该组件会被添加到所有处理方法的参数列表上。
Ext.DomObserver = Ext.extend(Object, {
    constructor: function(config) {
        this.listeners = config.listeners ? config.listeners : config;
    },

    // 组件将自己传递进了插件的初始化方法里
    init: function(c) {
        var p, l = this.listeners;
        for (p in l) {
            if (Ext.isFunction(l[p])) {
                l[p] = this.createHandler(l[p], c);
            } else {
                l[p].fn = this.createHandler(l[p].fn, c);
            }
        }

        // 渲染后立即添加监听器到元素上
        c.render = c.render.createSequence(function() {
            var e = c.getEl();
            if (e) {
                e.on(l);
            }
        });
    },

    createHandler: function(fn, c) {
        return function(e) {
            fn.call(this, e, c);
        };
    }
});

var combo = new Ext.form.ComboBox({

    // 元素被点击后折叠
    plugins: [ new Ext.DomObserver({
        click: function(evt, comp) {
            comp.collapse();
        }
    })],
    store: myStore,
    typeAhead: true,
    mode: 'local',
    triggerAction: 'all'
});

Observable
margins : Object
注:此配置只用于该组件展现在一个使用BorderLayout...

注:此配置只用于该组件展现在一个使用BorderLayout 或 BoxLayout的两个子类之一作为布局的容器。

这个margins对象在该组件中的格式为：

{top: (top margin),right: (right margin),bottom: (bottom margin),left: (left margin)}

也可以是一个字符串，中间用空格分隔，margin值为数字。 把matches中每一个值的次序跟CSS中margin值的排列方式相对应：

  • 如果只有一个值，它适用于所有方面。
  • 如果有两个值，top和bottom的边框设置为第一个值，left和right设置为第二个值。
  • 如果有三个值，top设置为第一个值，left和right设置为第二个值，bottom设置为第三个值。
  • 如果有四个值，分别设置为top, right, bottom, left。

默认值:

{top:0, right:0, bottom:0, left:0}
BoxComponent
minWidth : Number
菜单最小宽度像素值 (默认值是 120)
Menu
monitorResize : Boolean
设置为true自动监测window的resize事件，以便处理所有对当前窗口尺寸 敏感的事情。...
设置为true自动监测window的resize事件，以便处理所有对当前窗口尺寸 敏感的事情。 典型地，通过选择一个 layout 来管理这个值，并且不应该手动设置它。
Container
overCls : String
一个可选的额外的CSS类，它将在鼠标移过元素时被添加到组件上...
一个可选的额外的CSS类，它将在鼠标移过元素时被添加到组件上，鼠标移出时 删除。(默认为'')。此属性对于在组件上，或者它的任何使用标准CSS规则的孩子节点上， 添加定制的'active' 或者 'hover'样式非常有用。
Component
pageX : Number
如果该组件被包含在一个指定位置的容器中，这个值表示页面级的x坐标值（译者注：在有滚动条的情况下这个值很有用）。
BoxComponent
pageY : Number
如果该组件被包含在一个指定位置的容器中，这个值表示页面级的y坐标值（译者注：在有滚动条的情况下这个值很有用）。
BoxComponent
paletteId : String
给颜色选择器设置一个id。默认为null。
ColorMenu
plain : Boolean
如果为true就删除下拉菜单的左边分割线。 默认为 false。
Menu
plugins : Object/Array
一个对象或者一个对象数组，为组件提供特殊的功能 ...
一个对象或者一个对象数组，为组件提供特殊的功能。 对一个合法的插件唯一的要求是它含有一个init()方法， 能接收一个Ext.Component型的参数。 当组件被创建时，如果有可用的插件，组件将会调用每个插件的init方法， 并将自身的引用作为方法参数传递给它。然后，每个插件就可以调用方法或者响应组件上的事件， 就像需要的那样提供自己的功能。
Component
ptype : String
需要创建配置的ptype。 当传递一个配置对象给构造函数时...
需要创建配置的ptype。 当传递一个配置对象给构造函数时，此配置选项不会被使用。 只有在使用懒初始化的时候此配置项才会被使用， 此时Plugin不是 通过一个完整的实例组件，而是通过一个Component配置指定的。 在渲染时，将会查找ptype以决定创建何种类型的Plugin。

如果你创建自己的Plugin，你可以通过 Ext.ComponentMgr.registerPlugin 对它们进行注册，以便能利用懒初始化和渲染机制。
Component
ref : String
一个路径描述，与组件的 ownerCt 相关，它描述了把当前组件的命名引用放置到哪个父容器中去。...

一个路径描述，与组件的 ownerCt 相关，它描述了把当前组件的命名引用放置到哪个父容器中去。

祖先的坐标路径可以通过'/'字符进行分隔。 例如，将一个Toolbar Button的引用放入 拥有此Toolbar的Panel中:

var myGrid = new Ext.grid.EditorGridPanel({
    title: 'My EditorGridPanel',
    store: myStore,
    colModel: myColModel,
    tbar: [{
        text: 'Save',
        handler: saveChanges,
        disabled: true,
        ref: '../saveButton'
    }],
    listeners: {
        afteredit: function() {
//          The button reference is in the GridPanel
            myGrid.saveButton.enable();
        }
    }
});

在上面的代码中，如果 ref 是 'saveButton' ，那么引用将会被放置到Toolbar中。 ref 中的每个'/' 都会从组件的 ownerCt 向上移动一级。

另请参见 added 和 removed 事件。

Component
region : String
注: 此配置只用于该组件展现在一个布局为BorderLayout的容器中...

注: 此配置只用于该组件展现在一个布局为BorderLayout的容器中(例如指定layout:'border')。

详见Ext.layout.BorderLayout。

BoxComponent
renderTo : Mixed
该值可以是一个节点的id、一个DOM节点或者一个已存在的元素...

该值可以是一个节点的id、一个DOM节点或者一个已存在的元素， 组件将会被渲染到其中。

  • 注意 :
      如果组件不是一个Container 的子项目时， 不要使用此选项。 渲染和管理它的子项目是一个Container 的layout manager的责任。
      当使用此配置项时，无需调用render()方法。

另请参见 render 。

Component
resizeEvent : String
在布局中进行尺寸调整需要监听的事件。 默认为 'resize' 。
Container
scope : Object
在作用域(this 参考)范围内， handler 函数会被调用。默认的this是ColorMenu。
ColorMenu
shadow : Boolean/String
当值为 true 或者 "sides" 时为默认效果，"frame" 时为4方向有阴影......
当值为 true 或者 "sides" 时为默认效果，"frame" 时为4方向有阴影， "drop" 时为右下角有阴影（默认为 "sides"）。
Menu
showSeparator : Boolean
当为true时，显示分割栏的图标(默认为true)。
Menu
stateEvents : Array
一个事件数组，当它们被触发时，组件需要保存自己的状态(默认值为 none)...

一个事件数组，当它们被触发时，组件需要保存自己的状态(默认值为 none)。 它们可以是任何该组件支持的事件类型，包括浏览器事件和 自定义事件(例如['click', 'customerchange'])。

对于保存和恢复组件状态的详细解释，参见 stateful

Component
stateId : String
为该组件指定的唯一的id值，它被用作管理组件状态的目的...
为该组件指定的唯一的id值，它被用作管理组件状态的目的。 (如果设定了id，默认值为组件自己的id，否则，如果组件使用自动生成的id，此值为null)。

对于保存和反解析组件状态的解释，参见 stateful 。

Component
stateful : Boolean
一个标志参数，它将引起组件在启动时尝试从一个保存的状态中恢复内部状态参数...

一个标志参数，它将引起组件在启动时尝试从一个保存的状态中恢复内部状态参数。 组件必须要么拥有一个 stateId 或者 id ，它们被分配给需要被管理的状态属性。 在跨页面加载时，不保证自动生成的id属性的稳定性， 并且，不能依赖此id来保存和恢复一个组件的相同状态。

为了保存状态的操作能够工作，状态管理器的提供者必须 被设置成一个Ext.state.Provider 的实现类，它覆盖了set 和get 方法，以便保存和恢复name/value对。 有一个内置的Ext.state.CookieProvider 可用。

为当前页面设置状态提供者:

Ext.state.Manager.setProvider(new Ext.state.CookieProvider({
    expires: new Date(new Date().getTime()+(1000*60*60*24*7)), //7 days from now
}));

当 stateEvents 配置项中其中之一的事件被触发时， 一个状态可保存的组件将试图保存其状态。

保存状态时，一个可保存状态的组件首先需要通过调用 getState 方法来序列化它的状态。 默认情况下，此函数什么事都不做。 开发者必须提供一个实现，返回一个hash对象，它描述了组件可恢复的状态。

getState方法产生的值将会传递给 Ext.state.Manager.set 方法，它使用配置的 Ext.state.Provider 来保存对象，以组件的 stateId 为key，或者，如果此值（指stateId）没有指定时， 使用它的 id 作为key。

在进行构造时，一个可保存状态的组件试图通过调用 Ext.state.Manager.get方法来 恢复它的状态，传递 stateId 或者，如果此值（指stateId）没有指定时， 使用它的 id 作为参数。

结果对象被传递给 applyState 。 applyState 的默认实现只是简单地把属性拷贝到对象中， 但是开发者可以覆盖此方法以支持更多行为。

通过向 beforestaterestore, staterestore, beforestatesave 和 statesave 事件上绑定监听器，你可以在保存和恢复状态时进行额外的处理。

Component
style : String
被添加到组件元素的特定样式。 必须是按照...
被添加到组件元素的特定样式。 必须是按照 Ext.Element.applyStyles 类指定格式的合法参数值。

new Ext.Panel({
    title: 'Some Title',
    renderTo: Ext.getBody(),
    width: 400, height: 300,
    layout: 'form',
    items: [{
        xtype: 'textarea',
        style: {
            width: '95%',
            marginBottom: '10px'
        }
    },
        new Ext.Button({
            text: 'Send',
            minWidth: '100',
            style: {
                marginBottom: '10px'
            }
        })
    ]
});
Component
subMenuAlign : String
应用到当前菜单的子菜单的 Ext.Element.alignTo 锚定位置值（默认值为 "tl-tr?"）。
Menu
tabTip : String
注: 这个配置只用于当该组件作为TabPanel的一个子项目时使用...

注: 这个配置只用于当该组件作为TabPanel的一个子项目时使用。

一个String类型的innerHTML(支持html标签)，当鼠标放在该选项上的时，显示一个tooltip。为了tips能够被渲染，Ext.QuickTips.init()必须被提前调用。
BoxComponent
tpl : Mixed
一个 Ext.Template , Ext.XTemplate 或者一个用来形成一个Ext.XTemplate的字符串数组...
一个 Ext.Template , Ext.XTemplate 或者一个用来形成一个Ext.XTemplate的字符串数组。 与 data 和 tplWriteMode 配置项协同使用。
Component
tplWriteMode : String
刷新组件的内容区域时使用的Ext.(X)Template方式。 默认为'overwrite' (参见 Ext.XTemplate.overwrite )。
刷新组件的内容区域时使用的Ext.(X)Template方式。 默认为'overwrite' (参见 Ext.XTemplate.overwrite )。
Component
width : Number
组件的宽度(默认值为 auto)。注:如果想使用百分比的方式...
组件的宽度(默认值为 auto)。注:如果想使用百分比的方式来设置值，请查看 Ext.Component.anchor。
BoxComponent
x : Number
如果被包含在一个指定位置的容器中，这个值表示x(left)坐标值。
BoxComponent
xtype : String
需要创建配置的xtype。 当传递一个配置对象给构造函数时...
需要创建配置的xtype。 当传递一个配置对象给构造函数时，此配置选项不会被使用。 只有在使用懒初始化的时候此配置项才会被使用，此时容器的子项目不是 通过一个完整的实例组件，而是通过一个Component配置指定的。 在渲染时，将会查找xtype以决定创建何种类型的子组件。

预定义的xtype列表如下： here。

如果你继承Component创建你自己的组件，你需要使用Ext.ComponentMgr.registerType 对它们进行注册，以便利用懒初始化和渲染机制。
Component
y : Number
如果被包含在一个指定位置的容器中，这个值表示y(top)坐标值。
BoxComponent
zIndex : Number
zIndex时，使用的菜单是浮动的。
Menu

公共属性

Property Defined By
disabled : Boolean
当前组件处于无效状态时为true。 Read-only.
Component
el : Ext.Element
封装了当前组件的Ext.Element。 Read-only。通常情况下，这将是一个<DIV>元素，它由此类的...

封装了当前组件的Ext.Element。 Read-only。

通常情况下，这将是一个<DIV>元素，它由此类的 onRender方法创建，但是它可以通过使用 autoEl 配置项进行覆盖。

注意: 直到组件渲染完成此元素都将处于无效状态。

如需向当前组件的 DOM事件(而不是当前组件自己的Observable事件)添加监听器， 更多建议，参见 listeners 配置项，或者直接使用一个render监听器:

new Ext.Panel({
    title: 'The Clickable Panel',
    listeners: {
        render: function(p) {
            // Append the Panel to the click handler's argument list.
            p.getEl().on('click', handlePanelClick.createDelegate(null, [p], true));
        },
        single: true  // Remove the listener after first invocation
    }
});

另请参见 getEl

Component
hidden : Boolean
如果当前组件处于隐藏状态，此值为true。Read-only。
Component
initialConfig : Object
当前组件的初始化配置描述。 Read-only。
Component
items : MixedCollection
当前容器中的子组件集合 Ext.util.MixedCollection
Container
ownerCt : Ext.Container
组件所属的Container (默认为undefined，当前组件被添加到一个容器中时此值被自动设置)...
组件所属的Container (默认为undefined，当前组件被添加到一个容器中时此值被自动设置)。 Read-only。

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

Component
palette : ColorMenu中的ColorPalette，是{@link Ext.ColorPalette}的一个实例
ColorMenu中的Ext.ColorPalette 实例
ColorMenu
private : Object
我们只能在一块可见的区域进行布局。 布局目标*或者它的任何父元素* 为...
我们只能在一块可见的区域进行布局。 布局目标*或者它的任何父元素* 为display:none， 将意味着它没有一块可见的区域。
Container
refOwner : Ext.Container
如果当前组件是一个容器的孩子，并且是通过一个 ref 配置项被注册的，则此值为 ref 引用被插入到的祖先容器。
如果当前组件是一个容器的孩子，并且是通过一个 ref 配置项被注册的，则此值为 ref 引用被插入到的祖先容器。
Component
rendered : Boolean
如果当前组件已经被渲染了，此值为true。Read-only.
Component

公共方法

Method Defined By
add ( ...Object/Array component ) : Ext.Component/Array
向当前容器中添加 Component(s)。 描述 :在添加之前触发 beforeadd 事件...

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

描述 :

  • 在添加之前触发 beforeadd 事件
  • 将会相应地应用 容器的default config values (细节参见 defaults )。
  • 在组件添加之后触发 add 事件。

注意 :

  • 当调用 add 时如果容器已经被渲染， 你可能需要调用 doLayout 方法来刷新视图，它将导致所有尚未渲染的子组件进行渲染操作。 此操作是必须的，这样你可以 add 多个子组件而只刷新一次layout。 示例用法:

var tb = new Ext.Toolbar();
tb.render(document.body);  // toolbar is rendered
tb.add({text:'Button 1'}); // add multiple items (defaultType for Toolbar is 'button')
tb.add({text:'Button 2'});
tb.doLayout();             // refresh the layout
  • 警告: 使用BorderLayout布局的容器可能不能删除或者添加组件。 更多细节参见BorderLayout 的注释。
参数:
  • component : ...Object/Array

    需要添加的一个或多个组件，或者是一个组件数组。 更多信息参见 items 。

返回值:
  • Ext.Component/Array
    被添加的组件。
Container
addClass ( string cls ) : Ext.Component
为组件底层的元素添加CSS样式。
为组件底层的元素添加CSS样式。
参数:
  • cls : string
    需要添加的CSS样式的class名称
返回值:
  • Ext.Component
    this
Component
addElement ( Mixed el ) : Ext.menu.Item
添加一个Ext.Element对象到菜单中。
添加一个 Ext.Element 对象到菜单中。
参数:
  • el : Mixed
    需要添加的元素或DOM节点，或它的id。
返回值:
  • Ext.menu.Item
    被添加的菜单项
Menu
addEvents( Object|String o, string Optional. ) : void
添加指定的事件到事件列表上，事件会被该Observable触发。
添加指定的事件到事件列表上，事件会被该Observable触发。
参数:
  • o : Object|String
    以事件名作为属性true作为值的对象 或者当多个事件名被分开的传递时则为第一个事件名。
  • Optional. : string
    事件名被分开的传递时则为事件名。 用法:
    this.addEvents('storeloaded', 'storecleared');
返回值:
  • void
Observable
addItem ( Ext.menu.Item item ) : Ext.menu.Item
向菜单中添加一个基于Ext.menu.BaseItem的已存在的组件。
向菜单中添加一个基于 Ext.menu.BaseItem的已存在的组件。
参数:
  • item : Ext.menu.Item
    需要添加的菜单项。
返回值:
  • Ext.menu.Item
    被添加的菜单项。
Menu
addListener( String eventName, Function handler, [Object scope], [Object options] ) : void
给对象添加事件处理器。
给对象添加事件处理器。
参数:
  • eventName : String
    监听的事件名。
  • handler : Function
    事件调用的方法
  • scope : Object
    （可选）处理方法执行的作用域 (this的引用 reference)。 如果被忽略。默认为触发事件的对象。
  • options : Object
    （可选）包含处理器配置和属性的对象。 可能包含以下的属性:
    • scope : Object
      处理方法执行的作用域(this的引用) 。 如果被忽略。默认为触发事件的对象。
    • delay : Number
      在触发事件后延迟调用处理器的毫秒数。
    • single : Boolean
      如果为True则添加一个处理器来处理下一次的事件触发（仅一次），然后移除自己。
    • buffer : Number
      使得处理器延迟指定毫秒数后预定的运行在 一个Ext.util.DelayedTask中 。 如果事件在时间内再一次被触发，原始的处理器不会被调用，但是新的处理器会预定的在他的位置上。
    • target : Observable
      如果事件在目标的Observable上触发则仅仅调用处理器， 否则 事件会从子类的Observable上冒泡

    组合选项
    使用这些选项参数,可能会组合出不同类型的监听器：

    一个延迟的，一次性的监听器。

    myDataView.on('click', this.onClick, this, {
single: true,
delay: 100
});

    一次调用附加多个处理器
    该方法同样支持传递一个包含指定的多个处理器的属性的配置对象参数。

    myGridPanel.on({
'click' : {
    fn: this.onClick,
    scope: this,
    delay: 100
},
'mouseover' : {
    fn: this.onMouseOver,
    scope: this
},
'mouseout' : {
    fn: this.onMouseOut,
    scope: this
}
});

    或者一个简写的语法：

    myGridPanel.on({
'click' : this.onClick,
'mouseover' : this.onMouseOver,
'mouseout' : this.onMouseOut,
 scope: this
});
返回值:
  • void
Observable
addMenuItem ( Object config ) : Ext.menu.Item
使用所给的配置对象创建一个基于Ext.menu.Item的对象，并添加到菜单中。
使用所给的配置对象创建一个基于 Ext.menu.Item 的对象，并添加到菜单中。
参数:
  • config : Object
    一个菜单项配置对象。
返回值:
  • Ext.menu.Item
    被添加的菜单项。
Menu
addSeparator () : Ext.menu.Item
向菜单添加一个分割栏。
向菜单添加一个分割栏。
参数:
  • 无。
返回值:
  • Ext.menu.Item
    所添加的菜单项。
Menu
addText ( String text ) : Ext.menu.Item
使用给定的文本创建一个新的Ext.menu.TextItem并添加到菜单中。
使用给定的文本创建一个新的 Ext.menu.TextItem 并 添加到菜单中。
参数:
  • text : String
    显示在菜单项的文本。
返回值:
  • Ext.menu.Item
    被添加的菜单项。
Menu
applyToMarkup ( String/HTMLElement el ) : void
将此组件添加到已存在的有效的HTML标签中。 使用该方法时，无需再调用render()方法。
将此组件添加到已存在的有效的HTML标签中。 使用该方法时，无需再调用render()方法。
参数:
  • el : String/HTMLElement
返回值:
  • void
Component
bubble ( Function fn , [ Object scope ], [ Array args ] ) : Ext.Container
沿着component/container继承结构进行冒泡， 在每个组件上调用指定的函数。 所调用函数的作用域...
沿着component/container继承结构进行冒泡， 在每个组件上调用指定的函数。 所调用函数的作用域( this)将会是 指定的作用域或者是当前组件。 如果在函数任何一点上返回false，即停止冒泡过程
参数:
  • fn : Function
    需要调用的函数
  • scope : Object
    (可选) 函数的作用域(默认为当前节点)
  • args : Array
    (可选) 调用函数时需要传递的参数( 默认传递当前组件)
返回值:
  • Ext.Container
    this
Container
cascade ( Function fn , [ Object scope ], [ Array args ] ) : Ext.Container
从当前组件(第一个被调用的组件)开始，沿着component/container的继承树向下回溯...
从当前组件(第一个被调用的组件)开始，沿着component/container的继承树向下回溯， 在每个组件上调用指定的方法， 调用方法时的(this)作用域为指定的scope或者为当前组件。 传递给方法的参数为传递进来args或者当前组件。 在起泡的任意一个节点上，如果function返回false，即停止在那个分支上。
参数:
  • fn : Function
    需要调用的函数
  • scope : Object
    (可选)函数的作用域(默认为当前组件)
  • args : Array
    (可选) 调用函数时传递的参数 (默认传递当前组件)
返回值:
  • Ext.Container
    this
Container
cloneConfig ( Object overrides ) : Ext.Component
默认使用原先传递给当前实例的配置值克隆当前组件。
默认使用原先传递给当前实例的配置值克隆当前组件。
参数:
  • overrides : Object
    一个新的配置项，包含需要覆盖到克隆版本的所有属性。 可以传递一个id参数给此对象，否则将自动生成一个新的id以避免发生重复。
返回值:
  • Ext.Component
    当前组件的克隆副本
Component
destroy () : void
通过如下方法销毁对象：删除所有的事件监听器、将组件的元素从DOM树中删除...
通过如下方法销毁对象：删除所有的事件监听器、将组件的元素从DOM树中删除（如果可以）、 将组件从它的 Ext.Container（如果可用）中删除、 并且将它从Ext.ComponentMgr中 注销。 销毁操作一般由框架自动完成，一般情况下不需要直接调用该方法。
参数:
  • 无。
返回值:
  • void
Component
disable () : Ext.Component
将组件置为无效状态，并出发'disable'事件。
将组件置为无效状态，并出发'disable'事件。
参数:
  • 无。
返回值:
  • Ext.Component
    this
Component
doLayout ( [ Boolean shallow ], [ Boolean force ] ) : Ext.Container
强制容器的布局进行重新计算。 在向一个已经渲染的容器中添加...
强制容器的布局进行重新计算。 在向一个已经渲染的容器中添加一个新的组件， 或者改变子组件的尺寸/位置参数之后，必须调用此函数。
参数:
  • shallow : Boolean
    (可选) 设置为true时将仅仅计算当前组件的布局， 并且让子组件在需要时自动计算布局 (默认为flase，它将递归地调用每个子容器的doLayout方法)
  • force : Boolean
    (可选) 设置为true将强制进行布局，即使项目是隐藏的也进行。
返回值:
  • Ext.Container
    this
Container
enable () : Ext.Component
将组件置为有效状态并触发'enable'事件。
将组件置为有效状态并触发'enable'事件。
参数:
  • 无。
返回值:
  • Ext.Component
    this
Component
enableBubble( String/Array events ) :void
是否现在使得事件会被该Observable触发并调用 this.getBubbleTarget()方法在拥有者的继承树...

是否现在使得事件会被该Observable触发并调用 this.getBubbleTarget()方法在拥有者的继承树中冒泡。Observable的基础类中没有该方法的实现。

该方法一般被Ext.Components用来冒泡事件到拥有者的容器。参看Ext.Component.getBubbleTarget默认的实现 在Ext.Component中返回组件的直接拥有者。但是如果需要的是一个已知的目标，该方法可以被重写来更快的访问需求的目标。

例子:

Ext.override(Ext.form.Field, {
    // 添加方法到Field的initComponent上改变事件为冒泡
    initComponent : Ext.form.Field.prototype.initComponent.createSequence(function() {
        this.enableBubble('change');
    }),

    // 我们知道我们想让Field的事件冒泡到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() {
            // 如果样式被修改标题会变红。
            myForm.header.setStyle('color', 'red');
        }
    }
});
参数:
  • events : String/Array
    冒泡的事件名，或事件名数组
返回值:
  • void
Observable
find ( String prop , String value ) : Array
根据属性查找当前容器中任何层次上的组件
根据属性查找当前容器中任何层次上的组件
参数:
  • prop : String
  • value : String
返回值:
  • Array
    Ext.Component数组
Container
findBy ( Function fn , [ Object scope ] ) : Array
根据一个自定义的函数，查找当前容器中任意层级上的一个组件。 如果传递的函数返回true...
根据一个自定义的函数，查找当前容器中任意层级上的一个组件。 如果传递的函数返回true，组件将会被包含在结果中。 函数将会被用如下参数(component, this container)进行调用。
参数:
  • fn : Function
    需要调用的函数
  • scope : Object
    可选
返回值:
  • Array
    Ext.Component数组
Container
findById ( String id ) : Ext.Component
通过id查找容器中位于任何层级上的组件
通过id查找容器中位于任何层级上的组件
参数:
  • id : String
返回值:
  • Ext.Component
Container
findByType ( String/Class xtype , [ Boolean shallow ] ) : Array
根据xtype或者类型，查找当前容器中任何层级上的组件
根据xtype或者类型，查找当前容器中任何层级上的组件
参数:
  • xtype : String/Class
    组件的xtype字符串，或者直接是组件的class类型
  • shallow : Boolean
    (可选) 此参数为flase时将检查当前组件是否是指定xtype的后裔 (这是默认情况)，或者设置为true， 将检查当前组件是否直接是指定xtype类型（译者注：即指不按照多态性进行检查）。
返回值:
  • Array
    Ext.Component数组
Container
findParentBy ( Function fn ) : Ext.Container
通过自定义的函数查找当前组件上层任何层次上的容器...
通过自定义的函数查找当前组件上层任何层次上的容器。 如果传递的函数返回true，容器对象将被返回。
参数:
  • fn : Function
    自定义的函数，使用如下参数调用(container,this component)。
返回值:
  • Ext.Container
    自定义函数返回true的第一个容器
Component
findParentByType ( String/Class xtype ) : Ext.Container
通过xtype或者class查找当前组件上层任何层次上的容器
通过xtype或者class查找当前组件上层任何层次上的容器
参数:
  • xtype : String/Class
    组件的xtype字符串，或者直接是组件的class
返回值:
  • Ext.Container
    符合指定xtype或者class的第一个容器
Component
fireEvent( String eventName, Object... args ) : Boolean
用传入的参数触发指定的事件 (减去事件名)。 一个事件可以被设置为冒泡 Obse...

用传入的参数触发指定的事件 (减去事件名)。

一个事件可以被设置为冒泡到Observable父类继承树(参看 Ext.Component.getBubbleTarget) 调用enableBubble实现。

参数:
  • eventName : String
    触发的事件名。
  • args : Object...
    传递给处理器的可变长度参数。
返回值:
  • Boolean
    如果有任何的处理器返回false则返回false，否则返回true。
Observable
focus ( [ Boolean selectText ], [ Boolean/Number delay ] ) : Ext.Component
尝试将当前组件设为焦点。
尝试将当前组件设为焦点。
参数:
  • selectText : Boolean
    (可选) 如果可用，同时选中组件内部的文本
  • delay : Boolean/Number
    (可选)将当前组件设置为焦点的延迟时间(设置为true等于0毫秒)
返回值:
  • Ext.Component
    this
Component
get ( String/Number key ) : Ext.Component
获取当前容器包含的一个组件( items.get(key)方法的别名)
获取当前容器包含的一个组件( items.get(key)方法的别名)
参数:
  • key : String/Number
    组件的索引
返回值:
  • Ext.Component
    Ext.Component
Container
getBox ( [ Boolean local ] ) : Object
获取组件底层元素当前盒子模型的尺寸。（译者注：盒子模型是CSS术语，详细解释请自行搜索。）
获取组件底层元素当前盒子模型的尺寸。（译者注：盒子模型是CSS术语，详细解释请自行搜索。）
参数:
  • local : Boolean
    (可选)值为true时，组件的left值和top值将代替页面的XY被返回。(默认值为false)
返回值:
  • Object
    返回值的格式{x, y, width, height}
BoxComponent
getBubbleTarget () : Ext.Container
为Observable的fireEvent方法提供链接，它沿着继承结构进行冒泡操作。
为Observable的fireEvent方法提供链接，它沿着继承结构进行冒泡操作。
参数:
  • 无。
返回值:
  • Ext.Container
    拥有当前组件的容器。
Component
getComponent ( String/Number comp ) : Ext.Component
检查当前容器的 items property 并且获取当前容器的一个直接的子组件。
检查当前容器的 items property 并且获取当前容器的一个直接的子组件。
参数:
  • comp : String/Number
    参数可以是以下任何值：
    • 一个 String : 代表子组件的 itemId 或者 id
    • 一个 Number : 代表子组件在 items property 中的位置

    其它信息参见 Ext.util.MixedCollection.get。

返回值:
  • Ext.Component
    组件(如果有找到)。
Container
getEl () : Ext.Element
返回 Ext.Element ，它包装了当前组件。...

返回 Ext.Element ，它包装了当前组件。

通常情况下，这将是一个<DIV>元素，它是由该类的onRender方法创建的， 但是可以使用autoEl配置项 覆盖它。

注意: 此元素将会一直处于无效状态直到当前组件渲染完成。

如需向当前组件的 DOM事件(而不是当前组件自己的Observable事件)添加监听器， 更多建议，参见 listeners 配置项，或者直接使用一个render监听器:

new Ext.Panel({
    title: 'The Clickable Panel',
    listeners: {
        render: function(p) {
            // Append the Panel to the click handler's argument list.
            p.getEl().on('click', handlePanelClick.createDelegate(null, [p], true));
        },
        single: true  // Remove the listener after first invocation
    }
});
参数:
  • 无。
返回值:
  • Ext.Element
    包装当前组件的元素。
Component
getHeight () : Number
获取该组件的当前高度值。
获取该组件的当前高度值。
参数:
  • 无。
返回值:
  • Number
BoxComponent
getId () : String
返回当前组件的id，如果没有定义id，则自动生成并返回一个id:'ext-comp-'...
返回当前组件的 id 如果没有定义 id 则自动生成并返回一个 id

'ext-comp-' + (++Ext.Component.AUTO_ID)
参数:
  • 无。
返回值:
  • String
    id
Component
getItemId () : String
返回当前组件的 itemId 。 如果没有通过配置参数指定 itemId 那么，将会使用...
返回当前组件的 itemId 。 如果没有通过配置参数指定 itemId 那么，将会使用 getId 返回 id 。
参数:
  • 无。
返回值:
  • String
Component
getLayout () : ContainerLayout
返回容器当前使用的布局管理器。 如果容器当前没有设置布局管理器， 将会创建一个默认的...
返回容器当前使用的布局管理器。 如果容器当前没有设置布局管理器， 将会创建一个默认的 Ext.layout.ContainerLayout 并被设置为容器的布局管理器。
参数:
  • 无。
返回值:
  • ContainerLayout
    容器的布局管理器
Container
getLayoutTarget () : Ext.Element
返回当前容器中用来包含子组件的元素。提供了一个 可以返回容器的...

返回当前容器中用来包含子组件的元素。

提供了一个 可以返回容器的Element 的实现， 但是，如果容器有更复杂的结构， 可以覆盖此实现以返回 layout 在其中渲染子组件的元素。

参数:
  • 无。
返回值:
  • Ext.Element
    在其中渲染子组件的元素。
Container
getOuterSize () : Object
获取当前组件所在元素的尺寸大小，包括边缘的空白处。
获取当前组件所在元素的尺寸大小，包括边缘的空白处。
参数:
  • 无。
返回值:
  • Object
    一个包含元素大小的对象 {width: (element width + left/right margins), height: (element height + top/bottom margins)}
BoxComponent
getPosition ( [ Boolean local ] ) : Array
获取组件底层元素当前的XY位置。
获取组件底层元素当前的XY位置。
参数:
  • local : Boolean
    (可选)如果为true，将返回元素的left和top值，而不是相对于页面内的 XY。(默认值为 false)
返回值:
  • Array
    元素的XY位置值(例如：[100, 200])
BoxComponent
getResizeEl () : Ext.Element
返回该组件的最外层用来定义这些组件整体大小的Element...

返回该组件的最外层用来定义这些组件整体大小的Element对象。

通常用 getEl 方法将会返回相同的Element对象，但在有些情况下，组件可能有一些更多的封装了它的主要动态Element对象的Element对象。

例如ComboBox。它是封装在一个包含<input>元素的包装元素里(这将返回其 getEl方法和触发按钮的元素)。返回的元素为resizeEl。

参数:
  • 无。
返回值:
  • Ext.Element
    The Element which is to be resized by size managing layouts.
BoxComponent
getSize () : Object
获取组件底层元素当前的大小。
获取组件底层元素当前的大小。
参数:
  • 无。
返回值:
  • Object
    一个包含元素大小的对象{width: (element width), height: (element height)}
BoxComponent
getWidth () : Number
获取该组件的当前宽度值。
获取该组件的当前宽度值。
参数:
  • 无。
返回值:
  • Number
BoxComponent
getXType () : String
获取当前组件的xtype，它是用 Ext.ComponentMgr 注册的。 所有可用的xtype列表，参见...
获取当前组件的xtype，它是用 Ext.ComponentMgr 注册的。 所有可用的xtype列表，参见 Ext.Component 类头部。示例用法:

var t = new Ext.form.TextField();
alert(t.getXType());  // alerts 'textfield'
参数:
  • 无。
返回值:
  • String
    The xtype
Component
getXTypes () : String
返回此组件的xtype继承树，用字符'-'分隔。 所有可用的xtype值...

返回此组件的xtype继承树，用字符'-'分隔。 所有可用的xtype值，请参见Ext.Component 类的头部。

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

示例用法:

var t = new Ext.form.TextField();
alert(t.getXTypes());  // alerts 'component/box/field/textfield'
参数:
  • 无。
返回值:
  • String
    xtype层次字符串
Component
hasListener( String eventName ) : Boolean
检测对象是否包含指定事件的任何监听器
检测对象是否包含指定事件的任何监听器
参数:
  • eventName : String
    检测的事件名
返回值:
  • Boolean
    如果事件被监听则为true，否则为false
Observable
hide () : Ext.Component
隐藏当前组件。 监听 beforehide' 事件并且返回false 可以取消隐藏组件的操作。 在隐藏组件之后触发...
隐藏当前组件。 监听 beforehide' 事件并且返回false 可以取消隐藏组件的操作。 在隐藏组件之后触发 ' hide' 事件。 如果组件被配置成 hidden 那么此方法在内部被调用。
参数:
  • 无。
返回值:
  • Ext.Component
    this
Menu
insert ( Number index , Ext.Component component ) : Ext.Component
在当前容器的指定索引处插入一个组件。 在插入之前触发...
在当前容器的指定索引处插入一个组件。 在插入之前触发 beforeadd 事件， 然后在组件被插入之后触发 add 事件。
参数:
  • index : Number
    组件会被插入到容器子项集合中时的索引位置
  • component : Ext.Component
    需要插入的子组件。

    Ext使用懒渲染，只有在必要的时候才会渲染插入的组件。

    如果使用懒渲染，可以传递一个组件配置对象以避免创建一个真实组件的开销， 这意味着，插入的组件不会立即被渲染。 为了利用这个“懒初始化”('lazy instantiation')， 必须把组件设置为它注册的 Ext.Component.xtype 值。

    所有可用的xtype列表，参见 Ext.Component。
返回值:
  • Ext.Component
    使用容器默认配置值插入的组件(或者配置对象)。
Container
isVisible () : Boolean
如果当前组件可见，返回true。
如果当前组件可见，返回true。
参数:
  • 无。
返回值:
  • Boolean
    如果当前组件可见，返回true，其它返回false。
Component
isXType ( String xtype , [ Boolean shallow ] ) : Boolean
Tests whether or not this Component is of a specific xtype. This can test whether this Component is descended from th...

测试此组件是否是指定的xtype。此方法既可以测试是否是指定的xtype的某个子类， 或者它是否直接是指定的xtype类(shallow=true)。

如果使用你自己的子类，必须知道组件必须注册它的xtype值。

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

示例用法:

var t = new Ext.form.TextField();
var isText = t.isXType('textfield');        // true
var isBoxSubclass = t.isXType('box');       // true, descended from BoxComponent
var isBoxInstance = t.isXType('box', true); // false, not a direct BoxComponent instance
参数:
  • xtype : String
    需要为当前组件进行检测的xtype
  • shallow : Boolean
    (可选) 如果为false，检测组件是否是xtype继承树中的某个子类（默认是这种情况）， 如果为true，只检测组件是否是指定的xtype类型。
返回值:
  • Boolean
    如果当前组件是指定xtype的子类，返回true，其它返回flase。
Component
mon ( Observable|Element item , Object|String ename , Function fn , Object scope , Object opt ) : void
向任何Observable对象(或者元素)上添加监听器，监听器将会在组件...

向任何Observable对象(或者元素)上添加监听器，监听器将会在组件销毁时被自动删除。
用法：

myGridPanel.mon(myGridPanel.getSelectionModel(), 'selectionchange', handleSelectionChange, null, {buffer: 50});

or:

myGridPanel.mon(myGridPanel.getSelectionModel(), {
    selectionchange: handleSelectionChange,
    buffer: 50
});
参数:
  • item : Observable|Element
    需要添加listener/listeners的项目。
  • ename : Object|String
    事件名，或者一个包含事件名属性的对象。
  • fn : Function
    (可选) 如果 ename 参数是一个事件名，此参数为处理函数。
  • scope : Object
    (可选)如果 ename 参数是一个事件名称，此参数是作用域 ( this 引用)，监听函数将会在此作用域中被执行。
  • opt : Object
    (可选)如果 ename 参数是一个事件名称， 此参数是 addListener 配置项。
返回值:
  • void
Component
mun ( Observable|Element item , Object|String ename , Function fn , Object scope ) : void
删除通过mon 方法添加的监听器。
删除通过mon 方法添加的监听器。
参数:
  • item : Observable|Element
    需要删除listener/listeners的项目。
  • ename : Object|String
    事件名称，或者一个包含事件名称属性的对象。
  • fn : Function
    (可选)如果 ename 参数是一个事件名称，此参数是一个处理函数。
  • scope : Object
    (可选)如果 ename 参数是一个事件名称，此参数是作用域 ( this 引用)，监听函数将会在此作用域中被执行。
返回值:
  • void
Component
nextSibling () : Ext.Component
返回所属容器中的下一个组件
返回所属容器中的下一个组件
参数:
  • 无。
返回值:
  • Ext.Component
Component
on( String eventName, Function handler, [Object scope], [Object options] ) : void
给对象添加事件处理器 (addListener的简写形式)
给对象添加事件处理器 (addListener的简写形式。)
参数:
  • eventName : String
    监听的事件类型
  • handler : Function
    事件调用的方法
  • scope : Object
    （可选）处理方法执行时的作用域 (this 的引用)。 如果被忽略。默认为触发事件的对象。
  • options : Object
    可选 包含处理器配置的对象。
返回值:
  • void
Observable
previousSibling () : Ext.Component
返回所属容器中的前一个组件
返回所属容器中的前一个组件
参数:
  • 无。
返回值:
  • Ext.Component
Component
purgeListeners() : void
移除对象上所有的监听器
移除对象上所有的监听器
参数:
  • 无。
返回值:
  • void
Observable
relayEvents( Object o, Array events ) : void
从指定的Observable上传递选择的事件就好像被当前对象触发一样。
从指定的Observable上传递选择的事件就好像被当前对象触发一样。
参数:
  • o : Object
    该Observable上的事件被当前对象传递。
  • events : Array
    传递的数组名。
返回值:
  • void
Observable
remove ( Component/String component , [ Boolean autoDestroy ] ) : Ext.Component
从当前容器中移除一个组件。 在移除之前触发 beforeremove 事件， 然后在组件被移除之后触发...
从当前容器中移除一个组件。 在移除之前触发 beforeremove 事件， 然后在组件被移除之后触发 remove 事件。
参数:
  • component : Component/String
    需要移除的组件引用或者id
  • autoDestroy : Boolean
    (可选) 设置为true将自动调用被删组件的 Ext.Component.destroy 函数。 默认为容器的 autoDestroy 配置值。
返回值:
  • Ext.Component
    被移除的组件。
Container
removeAll ( [ Boolean autoDestroy ] ) : Array
从当前容器中删除所有组件。
从当前容器中删除所有组件。
参数:
  • autoDestroy : Boolean
    (可选) 此参数为true时将自动调用 被删组件的 Ext.Component.destroy 方法。 默认为当前容器的 autoDestroy 配置值。
返回值:
  • Array
    被销毁的组件数组
Container
removeClass ( string cls ) : Ext.Component
从组件底层的元素上删除一个CSS类。
从组件底层的元素上删除一个CSS类。
参数:
  • cls : string
    需要移除的CSS类名
返回值:
  • Ext.Component
    this
Component
removeListener( String eventName, Function handler, [Object scope] ) : void
删除一个事件处理器。
删除一个事件处理器。
参数:
  • eventName : String
    处理器关联的事件类型。
  • handler : Function
    移除的处理器。 这应该是传递到addListener里的方法的引用。
  • scope : Object
    （可选）处理器指定的初始作用域。
返回值:
  • void
Observable
render ( [ Element/HTMLElement/String container ], [ String/Number position ] ) : void
在传递进来的HTML元素中渲染当前组件。...

在传递进来的HTML元素中渲染当前组件。

如果你正在使用一个Container 对象放置当前组件，那么请不要使用render方法。

当容器第一次被渲染时，它的子组件将会被容器的 layout 管理器渲染。

某些布局管理器允许动态添加子组件。它们包括 Ext.layout.CardLayout, Ext.layout.AnchorLayout, Ext.layout.FormLayout, Ext.layout.TableLayout。

当一个新的子组件被添加时，如果容器已经被渲染了， 你可能需要调用容器的 doLayout 方法来刷新视图，它将导致所有没有被渲染的子组件进行渲染操作。 此操作是必须的，这样你可以添加多个子组件而只刷新一次layout。

当创建复杂的UI时，非常重要的一点是，请记住调整子项目的尺寸和位置是容器的 layout 管理器的职责。 如果你希望子项目的尺寸对用户交互作出反应， 你必须为容器配置一个布局管理器，它将创建和管理你心里想要的那种布局。

忽略容器的layout 配置意味着将会使用一个基本的布局管理器，它除了按次序把子组件 渲染到容器中之外什么事情都不做。 这种情况下，任何尺寸和位置的调整操作都不会发生。

参数:
  • container : Element/HTMLElement/String
    (可选) 需要在其中渲染当前组件的元素。 如果它是从一个已存在的标签中创建的，此参数应该被忽略。
  • position : String/Number
    (可选) 容器中的一个元素ID或者一个DOM节点索引， 当前组件将会被插入到它前面 (默认append到容器的尾部)
返回值:
  • void
Component
resumeEvents() : void
重新开始触发事件。(参见suspendEvents) 如果事件以queueSuspended参数被挂起，则在事件被挂起时 ...
重新开始触发事件。(参见 suspendEvents) 如果事件以queueSuspended 参数被挂起，则在事件被挂起时触发的事件会被传递到所有的监听器上
参数:
  • 无。
返回值:
  • void
Observable
setAutoScroll ( Boolean scroll ) : Ext.BoxComponent
设置该组件内容溢出时是否自动显示滚动条。
设置该组件内容溢出时是否自动显示滚动条。
参数:
  • scroll : Boolean
    值为true的话组件自动显示滚动条。
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setDisabled ( Boolean disabled ) : Ext.Component
工具函数，使用布尔值设置有效/无效(disabled/enabled )。
工具函数，使用布尔值设置有效/无效(disabled/enabled )。
参数:
  • disabled : Boolean
返回值:
  • Ext.Component
    this
Component
setHeight ( Mixed height ) : Ext.BoxComponent
设置此组件的高度。该方法将触发resize事件。
设置此组件的高度。该方法将触发resize事件。
参数:
  • height : Mixed
    The new height to set.
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setPagePosition ( Number x , Number y ) : Ext.BoxComponent
设置组件在页面中的XY位置。 如果需要设置left和top值 ，请使用...
设置组件在页面中的XY位置。 如果需要设置left和top值 ，请使用setPosition方法。 该方法触发move事件。
参数:
  • x : Number
    The new x position
  • y : Number
    The new y position
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setPosition ( Number left , Number top ) : Ext.BoxComponent
设置组件的left和top值。设置组件的页面XY值，请使用setPagePosition方法。该方法触发...
设置组件的left和top值。设置组件的页面XY值，请使用setPagePosition方法。该方法触发move事件。
参数:
  • left : Number
    The new left
  • top : Number
    The new top
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setSize ( Mixed width , Mixed height ) : Ext.BoxComponent
设置BoxComponent的宽度和高度。 此方法触发resize事件...
设置BoxComponent的宽度和高度。 此方法触发resize事件。此方法可以接收单独的width或者height值作为参数， 或者你可以传递像这样的一个size对象： {width:10, height:20} 。
参数:
  • width : Mixed
    设置的新的width值。这可以是：
    • 一个Number类型指定Element新的宽度 Ext.Element.defaultUnit(默认为像素 :'px')。
    • 一个String类型用于设置width的CSS样式。
    • 一个size对象格式为 {width: widthValue, height: heightValue} 。
    • 值为 undefined 时，保留原来的width不变。
  • height : Mixed
    设置的新的height值(如果第一个参数传递了一个size对象，此参数没有必要传递)。这可以是：
    • 一个Number类型指定Element新的高度 Ext.Element.defaultUnit(默认为像素 :'px')。
    • 一个String类型用于设置height的CSS样式。也有可能不会被使用到。
    • 值为 undefined 时，保留原来的height不变。
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setVisible ( Boolean visible ) : Ext.Component
工具方法，通过使用布尔值隐藏或者显示当前组件。
工具方法，通过使用布尔值隐藏或者显示当前组件。
参数:
  • visible : Boolean
    true时显示，false时隐藏
返回值:
  • Ext.Component
    this
Component
setWidth ( Mixed width ) : Ext.BoxComponent
设置组件的宽度。 此方法触发resize事件。
设置组件的宽度。 此方法触发resize事件。
参数:
  • width : Mixed
    The new width to set.
返回值:
  • Ext.BoxComponent
    this
BoxComponent
show () : Ext.Component
显示当前组件。监听' beforeshow' 事件，返回 false 取消显示组件...
显示当前组件。监听' beforeshow' 事件，返回 false 取消显示组件。在显示组件之后触发' show' 事件。
参数:
  • 无。
返回值:
  • Ext.Component
    this
Menu
showAt ( Array xyPosition , [ Ext.menu.Menu parentMenu ] ) : void
在指定的xy位置显示当前菜单并触发'show'事件， 如果'beforeshow'事件的处理程序......
在指定的xy位置显示当前菜单并触发'show'事件， 如果'beforeshow'事件的处理程序后返回false，就取消操。
参数:
  • xyPosition : Array
    包含X & Y [x, y]位置值，菜单将会被显示在此位置 (坐标是基于页面的)。
  • parentMenu : Ext.menu.Menu
    (可选)当前菜单的父菜单，如果可用(默认值为 undefined).
返回值:
  • void
Menu
suspendEvents( Boolean queueSuspended ) : void
暂停触发所有的事件。 (参看resumeEvents)
暂停触发所有的事件。（参看 resumeEvents)
参数:
  • queueSuspended : Boolean
    如果传递为true则排列好暂停的事件使得在调用 resumeEvents 后再触发它们，而不是抛弃所有暂停的事件。
返回值:
  • void
Observable
syncSize () : Ext.BoxComponent
强制组件的大小按照此组件底层元素当前的高度和宽度计算。
强制组件的大小按照此组件底层元素当前的高度和宽度计算。
参数:
  • 无。
返回值:
  • Ext.BoxComponent
    this
BoxComponent
un( String eventName, Function handler, [Object scope] ) : void
删除一个事件处理器(removeListener方法的简写形式)
删除一个事件处理器(removeListener方法的简写形式。)
参数:
  • eventName : String
    处理器关联的事件类型
  • handler : Function
    被删除的处理器 这应该是传入 addListener 中的方法的引用。
  • scope : Object
    （可选）为处理器指定的初始作用域。
返回值:
  • void
Observable
update ( Mixed htmlOrData , [ Boolean loadScripts ], [ Function callback ] ) : void
刷新组件的内部区域。
刷新组件的内部区域。
参数:
  • htmlOrData : Mixed
    如果已经通过tpl为当前组件配置了一个模板，那么 将会使用此参数来装配模板。 如果没有为当前组件配置模板，组件的内容区域将会通过Ext.Element 进行刷新。
  • loadScripts : Boolean
    (可选)只用在使用html配置时此参数才合法。默认为false。
  • callback : Function
    (可选)只用在使用html配置时此参数才合法。 当脚本加载完成时回调函数才被执行。
返回值:
  • void
Component
updateBox ( Object box ) : Ext.BoxComponent
设置此组件底层元素的盒子模型尺寸。(译者注：盒子模型是CSS术语，详细资料请自行搜索。)
设置此组件底层元素的盒子模型尺寸。(译者注：盒子模型是CSS术语，详细资料请自行搜索。)
参数:
  • box : Object
    一个格式为{x, y, width, height}的对象
返回值:
  • Ext.BoxComponent
    this
BoxComponent

公共事件

Event Defined By
add : ( Ext.Container this , Ext.Component component , Number index )
监听器将会被使用如下的参数被调用:
  • this : Ext.Container
  • component : Ext.Component
    被添加的组件
  • index : Number
    将组件添加到容器子组件集合时的位置索引
Container
added : ( Ext.Component this , Ext.Container ownerCt , number index )
当一个组件被添加到一个Ext.Container时触发
当一个组件被添加到一个Ext.Container时触发
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • ownerCt : Ext.Container
    用于组件的容器
  • index : number
    添加组件的位置
Component
afterlayout : ( Ext.Container this , ContainerLayout layout )
当容器中的组件被指定的布局管理器排列的时候触发。
当容器中的组件被指定的布局管理器排列的时候触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Container
  • layout : ContainerLayout
    为当前容器提供的ContainerLayout实现
Container
afterrender : ( Ext.Component this )
在组件渲染完成之后触发...

在组件渲染完成之后触发。

afterrender事件在当前组件被rendered 结束之后、在为组件定义的所有afterRender方法执行之后 触发，并且，如果有stateful， 也在状态被保存之后才触发。

监听器将会以如下参数格式被调用:
  • this : Ext.Component
Component
beforeadd : ( Ext.Container this , Ext.Component component , Number index )
在任何 Ext.Component 被添加或者插入到容器中之前触发。 事件处理器可以返回false取消添加操作。
在任何 Ext.Component 被添加或者插入到容器中之前触发。 事件处理器可以返回false取消添加操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Container
  • component : Ext.Component
    被添加的组件
  • index : Number
    组件被添加到容器子项目集合中时的索引位置
Container
beforedestroy : ( Ext.Component this )
在组件 destroyed 之前触发。 在事件监听器中返回false以停止 destroy 操作。
在组件 destroyed 之前触发。 在事件监听器中返回false以停止 destroy 操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforehide : ( Ext.Component this )
在调用hide方法隐藏组件之前触发。 在事件监听器中返回false可以停止隐藏操作。
在调用hide方法隐藏组件之前触发。 在事件监听器中返回false可以停止隐藏操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforeremove : ( Ext.Container this , Ext.Component component )
从容器中删除任何Ext.Component 之前触发。 处理器可以返回false取消remove操作。
从容器中删除任何Ext.Component 之前触发。 处理器可以返回false取消remove操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Container
  • component : Ext.Component
    被删除的组件
Container
beforerender : ( Ext.Component this )
在组件被rendered 之前触发。 在事件监听器中返回false可以停止render 操作。
在组件被rendered 之前触发。 在事件监听器中返回false可以停止render 操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforeshow : ( Ext.Component this )
在调用show()方法现实组件之前触发。 事件处理函数返回false可以停止show。
在调用show 方法现实组件之前触发。 事件处理函数返回false可以停止show。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforestaterestore : ( Ext.Component this , Object state )
在组件状态恢复之前触发。返回false停止恢复状态操作。
在组件状态恢复之前触发。返回false停止恢复状态操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    StateProvider返回的状态哈希值。 如果没有禁止此事件，那么状态对象会被传递给applyState。 默认情况下，这样简单地把属性值拷贝到当前组件中。 可以覆盖此方法以提供自定的状态恢复操作。
Component
beforestatesave : ( Ext.Component this , Object state )
在组件状态被保存到配置的状态提供者之前触发。 返回false可以停止保存。
在组件状态被保存到配置的状态提供者之前触发。 返回false可以停止保存。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    状态值哈希。 这由在组件上调用getState() 方法决定。 此方法必须由开发者提供，返回是否需要对状态进行描述，默认情况下， Ext.Component有一个空实现。
Component
destroy : ( Ext.Component this )
在组件被销毁之后触发。
在组件被destroyed之后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
disable : ( Ext.Component this )
在组件被设置为无效状态后触发。
在组件被设置为无效状态后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
enable : ( Ext.Component this )
当组件被设置为有效(enabled)之后触发。
当组件被设置为有效(enabled)之后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
hide : ( Ext.Component this )
在组件被隐藏之后触发。 当调用hide 方法隐藏组件之后触发。
在组件被隐藏之后触发。 当调用hide 方法隐藏组件之后触发。
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
mouseout : ( Ext.menu.Menu this , Ext.EventObject e , Ext.menu.Item menuItem )
当鼠标移出菜单时触发。
当鼠标移出菜单时触发。
监听器将会以如下的参数格式调用:
  • this : Ext.menu.Menu
  • e : Ext.EventObject
  • menuItem : Ext.menu.Item
    菜单项会被点击。
Menu
mouseover : ( Ext.menu.Menu this , Ext.EventObject e , Ext.menu.Item menuItem )
当鼠标滑过菜单时触发。
当鼠标滑过菜单时触发。
监听器将会以如下的参数格式调用:
  • this : Ext.menu.Menu
  • e : Ext.EventObject
  • menuItem : Ext.menu.Item
    菜单项将会被点击。
Menu
move : ( Ext.Component this , Number x , Number y )
在组件移动之后触发。
在组件移动之后触发。
监听器将会用如下的参数格式来调用:
  • this : Ext.Component
  • x : Number
    The new x position
  • y : Number
    The new y position
BoxComponent
remove : ( Ext.Container this , Ext.Component component )
监听器将会以如下的参数格式被调用:
  • this : Ext.Container
  • component : Ext.Component
    被删除的组件
Container
removed : ( Ext.Component this , Ext.Container ownerCt )
当一个组件被从Ext.Container容器中删除时触发
当一个组件被从Ext.Container容器中删除时触发
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • ownerCt : Ext.Container
    持有组件的容器
Component
render : ( Ext.Component this )
在组件被渲染之后触发。
在组件被 rendered(渲染) 之后触发。
监听器将以如下的参数格式被调用:
  • this : Ext.Component
Component
resize : ( Ext.Component this , Number adjWidth , Number adjHeight , Number rawWidth , Number rawHeight )
在组件被调整大小之后触发。
在组件被调整大小之后触发。
监听器将以如下的参数格式被调用:
  • this : Ext.Component
  • adjWidth : Number
    这是width调整后的值
  • adjHeight : Number
    这是height调整后的值
  • rawWidth : Number
    这是width原来的值
  • rawHeight : Number
    这是height原来的值
BoxComponent
select : ( Ext.ColorPalette palette , String color )
当从Ext.ColorPalette选择一个颜色后触发
当从 Ext.ColorPalette 选择一个颜色时触发
监听器将会被以如下的参数调用:
  • palette : Ext.ColorPalette
    The Ext.ColorPalette
  • color : String
    颜色值是6位数十六进制值(不带#开头)。
ColorMenu
show : ( Ext.Component this )
在调用show 方法显示组件之后触发。
在调用show 方法显示组件之后触发。
监听器将会用如下的参数格式被调用:
  • this : Ext.Component
Component
staterestore : ( Ext.Component this , Object state )
组件状态被存储之后触发。
组件状态被存储之后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    StateProvider返回的状态哈希值。 如果没有禁止此事件，那么状态对象会被传递给applyState。 默认情况下，这样简单地把属性值拷贝到当前组件中。 可以覆盖此方法以提供自定的状态恢复操作。
Component
statesave : ( Ext.Component this , Object state )
在组件状态被保存到所配置的状态提供者之后触发。
在组件状态被保存到所配置的状态提供者之后触发。
监听器将会用如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    状态值hash。 这是由在足见上调用getState() 方法决定的。 开发者必须提供此方法以返回是否需要恢复状态，默认情况下， Ext.Component有一个空实现。
Component


Observable
    Component
      BoxComponent
        Container
          Menu
            DateMenu

Class Ext.menu.DateMenu

包: | Ext.menu
定义类的文件: | DateMenu.js
类: | DateMenu
继承自: | Menu

包含一个 Ext.DatePicker 组件的菜单项(提供一个日期选择器)。

说明:

  • 虽然没有列出，但是该类 constructor可以接受Ext.DatePicker的所有配置选项。
  • 如果扩展DateMenu这个类，那么DatePicker的配置必须配置到DateMenu的initialConfig里。如果把DatePicker的配置项设置在this里，则不会有效。

配置项

Config Options Defined By
activeItem : String/Number
一个string型的组件id，或者组件的数字索引， 它需要...
一个string型的组件id，或者组件的数字索引， 它需要在渲染时在容器内的布局管理器中被初始化并激活。 例如：activeItem: 'item-1' 或者 activeItem: 0 ( 索引 0 =容器子项目集合中的第一个元素)。 activeItem仅仅适用于一次显示一个组件的布局模式(比如 Ext.layout.AccordionLayout, Ext.layout.CardLayout 和 Ext.layout.FitLayout)。 与 Ext.layout.ContainerLayout.activeItem 相关。
Container
allowDomMove : Boolean
在渲染时组件是否可以移动Dom节点(默认为true)。
Component
allowOtherMenus : Boolean
为true时，将允许同一时刻显示多个菜单 （默认为false）。
Menu
anchor : String
注: 这个配置只用于该组件被包含在一个已使用AnchorLayout...

注: 这个配置只用于该组件被包含在一个已使用 AnchorLayout (或者其子类)配置的Container时。 基于布局管理器，例如：

  • Ext.form.FormPanel
  • 指定 layout: 'anchor' // or 'form', or 'absolute'

参见 Ext.layout.AnchorLayout. anchor 。

BoxComponent
applyTo : Mixed
指定一个元素的id、一个DOM元素或者一个已经存在并被渲染到DIV中的元素，此DIV已经被...

指定一个元素的id、一个DOM元素或者一个已经存在并被渲染到DIV中的元素，此DIV已经被 渲染到document中，并且为当前组件指定了一些结构化的标签。

  • 描述 :
      当使用了 applyTo， 在主元素中也可以用id或者CSS类名来指定组件的托管部分， 并且，如果可以的话，创建的组件可能也会试图在那个标签中创建它的子组件。
  • 注意 :
      当使用此配置项时，无需调用render()方法。
      如果指定了applyTo属性，任何传递给 renderTo 的值都会被忽略，并且目标元素的父节点将会自动被用作组件的容器。
Component
autoDestroy : Boolean
如果为true，容器将自动销毁任何从其中被删除的组件， 否则...
如果为true，容器将自动销毁任何从其中被删除的组件， 否则必须手动处理销毁操作(默认为true)。
Container
autoEl : Mixed
一个表签名或者一个 DomHelper 描述，用来创建 Element ，它将封装当前组件...

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

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

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

{
    xtype: 'box',
    autoEl: {
        tag: 'img',
        src: 'http://www.example.com/example.jpg'

    }
}, {
    xtype: 'box',
    autoEl: {
        tag: 'blockquote',
        html: 'autoEl is cool!'
    }
}, {
    xtype: 'container',
    autoEl: 'ul',
    cls: 'ux-unordered-list',
    items: {
        xtype: 'box',
        autoEl: 'li',
        html: 'First list item'
    }
}
Component
autoHeight : Boolean
如果值为true，height配置项为'auto'，否则值为false的话使用固定的高度...

如果值为true，height配置项为'auto'，否则值为false的话使用固定的高度， 或者可以由其父类容器 layout manager来控制。(默认值为 false)。

注: 虽然很多组件继承了这个配置选项，但不是所有这些组件的自适应高度配置都会像期望的那样起作用。 设置autoHeight：值为true时，浏览器将根据元素的内容自动设置高度，这将意味着Ext不会去管理高度。

如果是由浏览器来管理高度，需要注意的是，通过浏览器进行调整的结构组件内不能被发现， 因此宽度的变化可能导致需要进行同步处理元素的高度。 例如：

var w = new Ext.Window({
    title: 'Window',
    width: 600,
    autoHeight: true,
    items: {
        title: 'Collapse Me',
        height: 400,
        collapsible: true,
        border: false,
        listeners: {
            beforecollapse: function() {
                w.el.shadow.hide();
            },
            beforeexpand: function() {
                w.el.shadow.hide();
            },
            collapse: function() {
                w.syncShadow();
            },
            expand: function() {
                w.syncShadow();
            }
        }
    }
}).show();
BoxComponent
autoScroll : Boolean
如果值为true，将会在该元素上使用overflow:'auto'配置，并且在必要的时候...
如果值为true，将会在该元素上使用overflow:'auto'配置，并且在必要的时候自动显示滚动条，否则，溢出部分的组件都会被切除(默认值为 false)。
BoxComponent
autoShow : Boolean
如果组件需要检测隐藏CSS属性(如 'x-hidden' 或者 'x-hide-display')并且在渲染时删除...
如果组件需要检测隐藏CSS属性(如 'x-hidden' 或者 'x-hide-display')并且在渲染时删除它们 (默认为false)，设置此值为true。
Component
autoWidth : Boolean
如果为true，使用width:'auto'配置，否则使用固定的宽度...

如果为true，使用width:'auto'配置，否则使用固定的宽度，或者可以由其父类容器的layout manager来控制。(默认值为 false)。

注: 虽然很多组件继承了这个配置选项，但不是所有这些组件的自适应宽度配置都会像期望的那样起作用。 设置autoWidth：值为true时，浏览器将根据元素的内容自动设置宽度，这将意味着Ext不会去管理宽度。

如果是由浏览器来管理宽度，需要注意的是，通过浏览器进行调整的结构组件内不能被发现，因此宽度的变化可能导致需要进行同步处理元素的宽度。 例如，在这个元素的目标是：

<div id='grid-container' style='margin-left:25%;width:50%'></div>
当浏览器窗口改变时，渲染后的Panel必须监听浏览器窗口大小的变化，以便通知子项，浏览器改变了其宽度：

var myPanel = new Ext.Panel({
    renderTo: 'grid-container',
    monitorResize: true, // relay on browser resize
    title: 'Panel',
    height: 400,
    autoWidth: true,
    layout: 'hbox',
    layoutConfig: {
        align: 'stretch'
    },
    defaults: {
        flex: 1
    },
    items: [{
        title: 'Box 1',
    }, {
        title: 'Box 2'
    }, {
        title: 'Box 3'
    }],
});
BoxComponent
boxMaxHeight : Number
设置组件的最大高度值...

设置组件的最大高度值。

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

BoxComponent
boxMaxWidth : Number
设置组件的最大宽度值...

设置组件的最大宽度值。

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

BoxComponent
boxMinHeight : Number
设置组件的最小高度值...

设置组件的最小高度值。

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

BoxComponent
boxMinWidth : Number
设置组件的最小宽度值...

设置组件的最小宽度值。

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

BoxComponent
bubbleEvents : Array
一个事件数组，当这些事件被触发时，将会被冒泡到所有父容器中。参见....

一个事件数组，当这些事件被触发时，将会被冒泡到所有父容器中。参见 Ext.util.Observable.enableBubble。 默认为 []。

Container
bufferResize : Boolean/Number
当设置为true时(50毫秒)或者是一个毫秒数值， 指定给当前容器的布...
当设置为true时(50毫秒)或者是一个毫秒数值， 指定给当前容器的布局管理器将会缓存它计算出的频率，然后 对组件进行一次重新布局操作。 对于重量级的容器，或者拥有大量子组件的容器来说，这非常有用， 因为频繁进行布局是非常昂贵的。 默认为 50 .
Container
clearCls : String
应用到特殊的clearing div的CSS类， 这个clearing div直接渲染到每个form field的包装器后面...

应用到特殊的clearing div的CSS类， 这个clearing div直接渲染到每个form field的包装器后面，以提供 清除field的功能(默认为 'x-form-clear-left')。

注意: 只有在当前组件被渲染到一个使用FormLayout 布局(例如 Ext.form.FormPanel 或者指定 layout:'form')的 容器中、或者是指定了一个fieldLabel 、或者指定isFormField=true 时此配置才有效。

另请参见 Ext.layout.FormLayout. fieldTpl。

Component
cls : String
一个可选的额外CSS类，它将被添加到当前组件的元素上(默认为'')...
一个可选的额外CSS类，它将被添加到当前组件的元素上(默认为'')。 此属性对于在组件上，或者它的任何使用标准CSS规则的孩子节点上， 添加定制的样式非常有用。
Component
contentEl : String
(可选)指定一个已存在的HTML元素，或者一个已存在HTML元素的...

(可选)指定一个已存在的HTML元素，或者一个已存在HTML元素的 id ，它们将被用作当前组件的内容。

  • 描述 :
    此配置选项被用来将一个已存在的HTML元素 插入到一个新组件(在组件渲染之后它简单地移动DOM元素) 的layout元素中，使它成为该组件的内容。
  • 注意 :
    指定的HTML元素将被append到组件的layout元素中， 在所有配置的 HTML 被插入之后， 并且，这样的话，在render事件 被触发时，document中将不再包含此元素。
    指定的HTML元素将不会参与组件所有可能使用的 layout 过程(译者注：指这些HTML元素 不会参与布局操作)。 它仅是HTML而已。布局操作实在孩子 items 上进行的。
    添加 x-hidden 或者 x-hide-display CSS类，以防在内容渲染到panel时发生闪烁。
Component
ctCls : String
一个可选的外部CSS样式，添加到这个组件的容器(默认值为 '')。 这个方法对于使用标准的CSS规则...

一个可选的外部CSS样式，添加到这个组件的容器(默认值为 '')。 这个方法对于使用标准的CSS规则，为组件或它的任何一个子组件添加特定的样式非常有用。 参见 Ext.layout.ContainerLayout和 extraCls 。

注意: ctCls 默认为 ''期望如下的类，它们将指定一个默认值:

  • Box Layout : 'x-box-layout-ct'
使用一个额外的CSS类配置以上的Class，它是append到默认对象上的。例如， 对于BoxLayout (Hbox and Vbox):
                                ctCls: 'x-box-layout-ct custom-class'

Component
data : Mixed
初始化数据集，它将被应用到 tpl 上以刷新组件的内容区域。
Component
defaultAlign : String
此菜单默认的 Ext.Element.alignTo 锚定位置值，与前一个项目的位置有关 (默认值为......
此菜单默认的 Ext.Element.alignTo 锚定位置值，与前一个项目的位置有关(默认值为 "tl-bl?")。
Menu
defaultOffsets : Array
根据指定的[x, y]坐标去更改菜单默认弹出的位置......
在调整菜单的 defaultAlign 配置选项后，根据指定的[x, y]坐标去更改菜单默认弹出的位置。 默认 [0, 0].
Menu
defaultType : String
当一个子项目通过一个原生的配置对象 而不是一个组件的实例指定时。...

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

默认为 'panel' ， Ext.menu.Menu 默认为 'menuitem' ， Ext.Toolbar 和 Ext.ButtonGroup 默认为 'button' 。

Container
defaults : Object|Function
此选项是在所有添加的项目上应用默认设置的手段， 这些项目要么是通过...

此选项是在所有添加的项目上应用默认设置的手段， 这些项目要么是通过 items 配置项添加的， 或者是通过 add 或者是通过 insert 方法添加的。

如果添加的项目是一个配置对象， 并且不是一个组件的实例， 那么默认参数将会被无条件地被应用。 如果添加的项目是一个组件的实例， 那么默认参数将有条件地被应用，以免覆盖项目上的现有属性你。

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

例如，如需自动在 Ext.Panel 所包含的每个项目上应用padding属性，你可以传递: defaults: {bodyStyle: 'padding:15px'} 。

用法:

defaults: {               // defaults are applied to items, not the container
    autoScroll:true
},
items: [
    {
        xtype: 'panel',   // defaults do not have precedence over
        id: 'panel1',     // options in config objects, so the defaults
        autoScroll: false // will not be applied here, panel1 will be autoScroll:false
    },
    new Ext.Panel({       // defaults do
                                     have precedence over options
        id: 'panel2',     // options in components, so the defaults
        autoScroll: false // will be applied here, panel2 will be autoScroll:true.
    })
]
Menu
disabled : Boolean
当前组件处于无效状态时为true。 Read-only.
Component
disabledClass : String
当组件处于无效状态时添加到组件上的CSS类(默认为 'x-item-disabled')。
Component
fieldLabel : String
紧靠此field显示的标签文本(默认值为 '')。注意...

紧靠此field显示的标签文本(默认值为 '')。

注意:只有在当前组件被渲染到一个使用FormLayout 的容器中时，此配置才有效。 (例如 Ext.form.FormPanel 或 指定 layout:'form')。

另请参见 hideLabel 、 Ext.layout.FormLayout和 fieldTpl。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Name'
    }]
});
Component
flex : Number
注: 这个配置只用于该组件被包含在一个已使用BoxLayout配置的Container中时...

注: 这个配置只用于该组件被包含在一个已使用BoxLayout配置的Container中时。通过计算每一个子组件的flex值所占全部flex值之和的比例，来决定子组件的宽(HBoxLayout)高(VBoxlayout)。 任何子项的 flex = 0 或 flex = undefined 将不被设置(初始值大小将不被改变)。

BoxComponent
floating : Boolean
在默认情况下，一个菜单配置中，floating:true 将会被一个Ext.Layer 所渲染(一个绝对定位，浮动......)

在默认情况下，一个菜单配置中， floating:true 将会被一个 Ext.Layer (一个绝对定位，浮动的组成部分中zindex=15000)所渲染。 如果配置项是 floating:false , 菜单可作为子菜单的另一个容器，而不是一个自由浮动的 Layer（层）。

Menu
forceLayout : Boolean
如果此值为true，容器将将强制初始化一次布局操作...
如果此值为true，容器将将强制初始化一次布局操作， 即使容器处于隐藏或者折叠状态。 此配置项对于在一个折叠或者隐藏的容器中强制渲染非常有用 (默认为false)。
Container
handler : Function
(可选)一个处理菜单项点击事件的方法。 该方法将会被以如下的参数调用:...
(可选)一个处理菜单项点击事件的方法。 该方法将会被以如下的参数调用:
  • picker : DatePicker
    The Ext.DatePicker.
  • date : Date
    The selected date.
DateMenu
height : Number
组件的高度(默认值为 auto)。注:如果想使用百分比的方式...
组件的高度(默认值为 auto)。注:如果想使用百分比的方式来设置值，请查看 Ext.Component.anchor。
BoxComponent
hidden : Boolean
如果当前组件处于隐藏状态，此值为true。Read-only。
Component
hideBorders : Boolean
设置为true可以隐藏所包含的每个组件的边框， false为遵照组件现有的边框设置...
设置为true可以隐藏所包含的每个组件的边框， false为遵照组件现有的边框设置(默认为 false)。
Container
hideLabel : Boolean
true时完全隐藏label元素 ( label 和 separator)。 默认为 false。 默认情况下，即使你不指定...

true时完全隐藏label元素 ( label 和 separator)。 默认为 false。 默认情况下，即使你不指定 fieldLabel 它的空间仍然会被保留，这样这块区域会与其它确实拥有label的区域位于同一排。 讲此值设置为 true 将导致此区域不再保留此空间。

注意: 参见 clearCls 的注释。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield'
        hideLabel: true
    }]
});
Component
hideMode : String
组件如何隐藏，支持的值有： 'visibility' (css visibility), 'offsets' (位置偏移量为负值) 和...

组件如何隐藏，支持的值有： 'visibility' (css visibility), 'offsets' (位置偏移量为负值) 和 'display' (css display).

注意:一般首选默认值 'display'，因为当组件第一次显示的时候它们会自动进行布局 (隐藏的时候不会调整尺寸)。

Component
hideOnClick : Boolean
值为false时选择一个日期后继续显示菜单，默认为true。
DateMenu
hideParent : Boolean
此值为true时，当调用hide/show方法时，将会hide和show组件的容器...
此值为true时，当调用hide/show方法时，将会hide和show组件的容器；false时将会 hide和show组件自身(默认为false)。例如，这可以用作window上隐藏按钮的一种 快捷操作，通过设置此按钮的hideParent:true，然后把它添加到window上。
Component
html : String/Object
一个HTML片段，或者一个 DomHelper 描述，用作layout元素的内容(默认为'')。...
一个HTML片段，或者一个 DomHelper 描述，用作layout元素的内容(默认为'')。 这个HTML内容在组件渲染之后才被添加，所以在 render 出发的时候，document中尚未包含此HTML。 但是这个内容将会在所有配置的 contentEl 之前被插入到body标签中。
Component
id : String
当前组件唯一的id(默认为auto-assigned id)...

当前组件唯一的id(默认为auto-assigned id)。 如果你需要在以后访问组件，而又没有一个有效的组件对象引用，那么你需要指定一个 id( 也就是，使用Ext. getCmp方法 )。

注意，此id也将被用作组件底层HTML标签的id，这些标签被渲染到页面中。 这将允许你编写基于id的CSS规则，以独立地描述指定的实例；并且，也可以通过 组件父标签的id选中子元素。

注意:为了避免与唯一的id 产生重复， 请参见 itemId 和 ref 。

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

Component
ignoreParentClicks : Boolean
设置为true时，将忽略在任何父菜单项(显示子菜单)上的点击操作， 这样在点击......
设置为true时，将忽略在任何父菜单项(显示子菜单)上的点击操作， 这样在点击父菜单项时子菜单不会隐藏掉(默认值为 false)。
Menu
itemCls : String
注意: 只有在当前组件被渲染到一个使用FormLayout 布局的 容器中时此配置才有效...

注意: 只有在当前组件被渲染到一个使用FormLayout 布局的 容器中时此配置才有效。 (例如Ext.form.FormPanel 或者指定 layout:'form')。

一个附加的CSS类，应用到div上，包装当前field的表单元素。 如果提供了此参数， field级上的itemCls将会覆盖 container级上提供的 默认itemCls。 为itemCls指定的值将会被添加默认的 类('x-form-item')。

既然它被应用到项目的包装器上(参见 Ext.layout.FormLayout。 fieldTpl)， 它将允许你编写能应用到此field、label(如果有指定)、或者field内部任何其它元素的标准CSS规则。

注意: 参考 fieldLabel的注释。 .

示例用法:

// Apply a style to the field's label:
<style>
    .required .x-form-item-label {font-weight:bold;color:red;}
</style>

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Name',
        itemCls: 'required' //this label will be styled
    },{
        xtype: 'textfield',
        fieldLabel: 'Favorite Color'
    }]
});
Component
itemId : String
当没有可利用的对象引用时，itemId可以作为第二选择，用来获得一个组件的引用， 代替 ...

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

var c = new Ext.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'); // 与 Ext.getCmp()不同

p2 = p1.ownerCt.getComponent('p2'); // 通过兄弟对象获得引用

另请参见 id 和 ref 。

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

Component
items : MixedCollection
当前容器中的子组件集合 Ext.util.MixedCollection
Menu
labelSeparator : String
每个fieldLabel 文本后面现实的分隔符。 此属性可以在多个层次上进行配置...

每个fieldLabel 文本后面现实的分隔符。 此属性可以在多个层次上进行配置。优先顺序为：

  • field / component level
  • container level
  • layout level (默认为冒号 ':')
如不需要为当前field的label显示分隔符，指定一个空字符串''即可。

注意:参见 clearCls 的注释。

另请参见 hideLabel 和 Ext.layout.FormLayout。 fieldTpl。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    layoutConfig: {
        labelSeparator: '~'   // layout config has lowest priority (defaults to ':')
    },
    labelSeparator: '>>',     // config at container level
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Field 1',
        labelSeparator: '...' // field/component level config supersedes others
    },{
        xtype: 'textfield',
        fieldLabel: 'Field 2' // labelSeparator will be '='

    }]
});
Component
labelStyle : String
一个CSS样式描述字符串，它将直接应用到当前field的label上...

一个CSS样式描述字符串，它将直接应用到当前field的label上。 如果有设置，默认为容器的labelStyle值(例如 Ext.layout.FormLayout.labelStyle , 或者 '')。

注意:参见 clearCls 的注释。

另请参见 hideLabel 和 Ext.layout.FormLayout. fieldTpl。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Name',
        labelStyle: 'font-weight:bold;'
    }]
});
Component
layout : String/Object
*重要: 为了让子项目能被正确地调整尺寸和位置， 典型地，必须通过 layout 配置项指定一个布局管理器。...

*重要: 为了让子项目能被正确地调整尺寸和位置， 典型地，必须通过 layout 配置项指定一个布局管理器。

调整子items的尺寸和位置 是容器的布局管理器的职责，它负责创建和管理你想要的那种布局类型。 例如:

new Ext.Window({
    width:300, height: 300,
    layout: 'fit', // explicitly set layout manager: override the default (layout:'auto')
    items: [{
        title: 'Panel inside a Window'
    }]
}).show();

如果没有为一个通用的容器(例如Container或者Panel)特别指定 layout ，将会使用default layout manager ，它除了将子组件按顺序渲染到容器中之外什么事情都不做( 这种情况下不会发生调整尺寸和位置的操作)。 一些容器类内部指定了一个默认的布局 (例如FormPanel指定了 layout: 'form' )。 另一些有特殊用途的类内部指定/管理它们内置的布局( 例如GridPanel, TabPanel, TreePanel, Toolbar, Menu等等)。

layout 既可以通过一个对象或者一个字符串指定:

  • 用一个对象指定
    • 示例用法:
      • layout: {
    type: 'vbox',
    padding: '5',
    align: 'left'
}
    • type

      • 当前容器需要使用的布局类型。 如果不指定，将创建并使用一个默认的 Ext.layout.ContainerLayout 。

      可用的布局 type 值是:

      • absolute
      • accordion
      • anchor
      • auto Default
      • border
      • card
      • column
      • fit
      • form
      • hbox
      • menu
      • table
      • toolbar
      • vbox
    • 布局描述配置参数

      • 也可以指定附加的布局描述配置。 关于每个布局类型可用配置选项完整的细节，参见 type 参数指定的相关布局类。

  • 通过一个字符串指定
    • 示例用法:
      • layout: 'vbox',
layoutConfig: {
    padding: '5',
    align: 'left'
}
    • layout

      • 当前容器使用的布局 type ( 可用的布局类型值参见上述列表)。

    • layoutConfig

      • 附件的布局描述配置参数。 关于每个布局类型可用配置选项完整的细节，参见 layout 参数指定的相关布局类。

Menu
layoutConfig : Object
这是一个配置对象，包含为 layout 指定的参数， 如果 layout 是作为一个 string 来指定的。

Container
listeners : Object
一个包含一个或多个事件处理器的配置对象，会在初始化的时候被添加到目标对象上...

一个包含一个或多个事件处理器的配置对象，会在初始化的时候被添加到目标对象上。 该配置对象应该是一个有效的监听器配置对象就像 addListener例子中指定的一样可一次附加多个处理器。

ExtJs Components上的DOM事件

一些 ExtJs Component 类导出时会选择一些DOM事件(例如 "click", "mouseover" 等等), 这通常只是在有额外的值可以被添加时发生。例如DataView类的 click事件会传递被点击的节点。也可以直接在Component的HTMLElementevent上访问DOM事件，但必需在Component被渲染后监听器才能添加到Element 上。可以按照以下步骤添加插件:

// 插件会用一个监听器配置对象进行配置。
//该组件会被添加到所有处理方法的参数列表上。
Ext.DomObserver = Ext.extend(Object, {
    constructor: function(config) {
        this.listeners = config.listeners ? config.listeners : config;
    },

    // 组件将自己传递进了插件的初始化方法里
    init: function(c) {
        var p, l = this.listeners;
        for (p in l) {
            if (Ext.isFunction(l[p])) {
                l[p] = this.createHandler(l[p], c);
            } else {
                l[p].fn = this.createHandler(l[p].fn, c);
            }
        }

        // 渲染后立即添加监听器到元素上
        c.render = c.render.createSequence(function() {
            var e = c.getEl();
            if (e) {
                e.on(l);
            }
        });
    },

    createHandler: function(fn, c) {
        return function(e) {
            fn.call(this, e, c);
        };
    }
});

var combo = new Ext.form.ComboBox({

    // 元素被点击后折叠
    plugins: [ new Ext.DomObserver({
        click: function(evt, comp) {
            comp.collapse();
        }
    })],
    store: myStore,
    typeAhead: true,
    mode: 'local',
    triggerAction: 'all'
});

Observable
margins : Object
注:此配置只用于该组件展现在一个使用BorderLayout...

注:此配置只用于该组件展现在一个使用BorderLayout 或 BoxLayout的两个子类之一作为布局的容器。

这个margins对象在该组件中的格式为：

{top: (top margin),right: (right margin),bottom: (bottom margin),left: (left margin)}

也可以是一个字符串，中间用空格分隔，margin值为数字。 把matches中每一个值的次序跟CSS中margin值的排列方式相对应：

  • 如果只有一个值，它适用于所有方面。
  • 如果有两个值，top和bottom的边框设置为第一个值，left和right设置为第二个值。
  • 如果有三个值，top设置为第一个值，left和right设置为第二个值，bottom设置为第三个值。
  • 如果有四个值，分别设置为top, right, bottom, left。

默认值:

{top:0, right:0, bottom:0, left:0}
BoxComponent
minWidth : Number
菜单最小宽度像素值 (默认值是 120)
Menu
monitorResize : Boolean
设置为true自动监测window的resize事件，以便处理所有对当前窗口尺寸 敏感的事情。...
设置为true自动监测window的resize事件，以便处理所有对当前窗口尺寸 敏感的事情。 典型地，通过选择一个 layout 来管理这个值，并且不应该手动设置它。
Container
overCls : String
一个可选的额外的CSS类，它将在鼠标移过元素时被添加到组件上...
一个可选的额外的CSS类，它将在鼠标移过元素时被添加到组件上，鼠标移出时 删除。(默认为'')。此属性对于在组件上，或者它的任何使用标准CSS规则的孩子节点上， 添加定制的'active' 或者 'hover'样式非常有用。
Component
pageX : Number
如果该组件被包含在一个指定位置的容器中，这个值表示页面级的x坐标值（译者注：在有滚动条的情况下这个值很有用）。
BoxComponent
pageY : Number
如果该组件被包含在一个指定位置的容器中，这个值表示页面级的y坐标值（译者注：在有滚动条的情况下这个值很有用）。
BoxComponent
pickerId : String
给该组件设置一个id。默认为null。
DateMenu
plain : Boolean
如果为true就删除下拉菜单的左边分割线。 默认为 false。
Menu
plugins : Object/Array
一个对象或者一个对象数组，为组件提供特殊的功能 ...
一个对象或者一个对象数组，为组件提供特殊的功能。 对一个合法的插件唯一的要求是它含有一个init()方法， 能接收一个Ext.Component型的参数。 当组件被创建时，如果有可用的插件，组件将会调用每个插件的init方法， 并将自身的引用作为方法参数传递给它。然后，每个插件就可以调用方法或者响应组件上的事件， 就像需要的那样提供自己的功能。
Component
ptype : String
需要创建配置的ptype。 当传递一个配置对象给构造函数时...
需要创建配置的ptype。 当传递一个配置对象给构造函数时，此配置选项不会被使用。 只有在使用懒初始化的时候此配置项才会被使用， 此时Plugin不是 通过一个完整的实例组件，而是通过一个Component配置指定的。 在渲染时，将会查找ptype以决定创建何种类型的Plugin。

如果你创建自己的Plugin，你可以通过 Ext.ComponentMgr.registerPlugin 对它们进行注册，以便能利用懒初始化和渲染机制。
Component
ref : String
一个路径描述，与组件的 ownerCt 相关，它描述了把当前组件的命名引用放置到哪个父容器中去。...

一个路径描述，与组件的 ownerCt 相关，它描述了把当前组件的命名引用放置到哪个父容器中去。

祖先的坐标路径可以通过'/'字符进行分隔。 例如，将一个Toolbar Button的引用放入 拥有此Toolbar的Panel中:

var myGrid = new Ext.grid.EditorGridPanel({
    title: 'My EditorGridPanel',
    store: myStore,
    colModel: myColModel,
    tbar: [{
        text: 'Save',
        handler: saveChanges,
        disabled: true,
        ref: '../saveButton'
    }],
    listeners: {
        afteredit: function() {
//          The button reference is in the GridPanel
            myGrid.saveButton.enable();
        }
    }
});

在上面的代码中，如果 ref 是 'saveButton' ，那么引用将会被放置到Toolbar中。 ref 中的每个'/' 都会从组件的 ownerCt 向上移动一级。

另请参见 added 和 removed 事件。

Component
region : String
注: 此配置只用于该组件展现在一个布局为BorderLayout的容器中...

注: 此配置只用于该组件展现在一个布局为BorderLayout的容器中(例如指定layout:'border')。

详见Ext.layout.BorderLayout。

BoxComponent
renderTo : Mixed
该值可以是一个节点的id、一个DOM节点或者一个已存在的元素...

该值可以是一个节点的id、一个DOM节点或者一个已存在的元素， 组件将会被渲染到其中。

  • 注意 :
      如果组件不是一个Container 的子项目时， 不要使用此选项。 渲染和管理它的子项目是一个Container 的layout manager的责任。
      当使用此配置项时，无需调用render()方法。

另请参见 render 。

Component
resizeEvent : String
在布局中进行尺寸调整需要监听的事件。 默认为 'resize' 。
Container
scope : Object
在作用域(this 参考)的范围内， handler 函数会被调用。默认的this是DateMenu。
DateMenu
shadow : Boolean/String
当值为 true 或者 "sides" 时为默认效果，"frame" 时为4方向有阴影......
当值为 true 或者 "sides" 时为默认效果，"frame" 时为4方向有阴影， "drop" 时为右下角有阴影（默认为 "sides"）。
Menu
showSeparator : Boolean
当为true时，显示分割栏的图标(默认为true)。
Menu
stateEvents : Array
一个事件数组，当它们被触发时，组件需要保存自己的状态(默认值为 none)...

一个事件数组，当它们被触发时，组件需要保存自己的状态(默认值为 none)。 它们可以是任何该组件支持的事件类型，包括浏览器事件和 自定义事件(例如['click', 'customerchange'])。

对于保存和恢复组件状态的详细解释，参见 stateful

Component
stateId : String
为该组件指定的唯一的id值，它被用作管理组件状态的目的...
为该组件指定的唯一的id值，它被用作管理组件状态的目的。 (如果设定了id，默认值为组件自己的id，否则，如果组件使用自动生成的id，此值为null)。

对于保存和反解析组件状态的解释，参见 stateful 。

Component
stateful : Boolean
一个标志参数，它将引起组件在启动时尝试从一个保存的状态中恢复内部状态参数...

一个标志参数，它将引起组件在启动时尝试从一个保存的状态中恢复内部状态参数。 组件必须要么拥有一个 stateId 或者 id ，它们被分配给需要被管理的状态属性。 在跨页面加载时，不保证自动生成的id属性的稳定性， 并且，不能依赖此id来保存和恢复一个组件的相同状态。

为了保存状态的操作能够工作，状态管理器的提供者必须 被设置成一个Ext.state.Provider 的实现类，它覆盖了set 和get 方法，以便保存和恢复name/value对。 有一个内置的Ext.state.CookieProvider 可用。

为当前页面设置状态提供者:

Ext.state.Manager.setProvider(new Ext.state.CookieProvider({
    expires: new Date(new Date().getTime()+(1000*60*60*24*7)), //7 days from now
}));

当 stateEvents 配置项中其中之一的事件被触发时， 一个状态可保存的组件将试图保存其状态。

保存状态时，一个可保存状态的组件首先需要通过调用 getState 方法来序列化它的状态。 默认情况下，此函数什么事都不做。 开发者必须提供一个实现，返回一个hash对象，它描述了组件可恢复的状态。

getState方法产生的值将会传递给 Ext.state.Manager.set 方法，它使用配置的 Ext.state.Provider 来保存对象，以组件的 stateId 为key，或者，如果此值（指stateId）没有指定时， 使用它的 id 作为key。

在进行构造时，一个可保存状态的组件试图通过调用 Ext.state.Manager.get方法来 恢复它的状态，传递 stateId 或者，如果此值（指stateId）没有指定时， 使用它的 id 作为参数。

结果对象被传递给 applyState 。 applyState 的默认实现只是简单地把属性拷贝到对象中， 但是开发者可以覆盖此方法以支持更多行为。

通过向 beforestaterestore, staterestore, beforestatesave 和 statesave 事件上绑定监听器，你可以在保存和恢复状态时进行额外的处理。

Component
style : String
被添加到组件元素的特定样式。 必须是按照...
被添加到组件元素的特定样式。 必须是按照 Ext.Element.applyStyles 类指定格式的合法参数值。

new Ext.Panel({
    title: 'Some Title',
    renderTo: Ext.getBody(),
    width: 400, height: 300,
    layout: 'form',
    items: [{
        xtype: 'textarea',
        style: {
            width: '95%',
            marginBottom: '10px'
        }
    },
        new Ext.Button({
            text: 'Send',
            minWidth: '100',
            style: {
                marginBottom: '10px'
            }
        })
    ]
});
Component
subMenuAlign : String
应用到当前菜单的子菜单的 Ext.Element.alignTo 锚定位置值（默认值为 "tl-tr?"）。
Menu
tabTip : String
注: 这个配置只用于当该组件作为TabPanel的一个子项目时使用...

注: 这个配置只用于当该组件作为TabPanel的一个子项目时使用。

一个String类型的innerHTML(支持html标签)，当鼠标放在该选项上的时，显示一个tooltip。为了tips能够被渲染，Ext.QuickTips.init()必须被提前调用。
BoxComponent
tpl : Mixed
一个 Ext.Template , Ext.XTemplate 或者一个用来形成一个Ext.XTemplate的字符串数组...
一个 Ext.Template , Ext.XTemplate 或者一个用来形成一个Ext.XTemplate的字符串数组。 与 data 和 tplWriteMode 配置项协同使用。
Component
tplWriteMode : String
刷新组件的内容区域时使用的Ext.(X)Template方式。 默认为'overwrite' (参见 Ext.XTemplate.overwrite )。
刷新组件的内容区域时使用的Ext.(X)Template方式。 默认为'overwrite' (参见 Ext.XTemplate.overwrite )。
Component
width : Number
组件的宽度(默认值为 auto)。注:如果想使用百分比的方式...
组件的宽度(默认值为 auto)。注:如果想使用百分比的方式来设置值，请查看 Ext.Component.anchor。
BoxComponent
x : Number
如果被包含在一个指定位置的容器中，这个值表示x(left)坐标值。
BoxComponent
xtype : String
需要创建配置的xtype。 当传递一个配置对象给构造函数时...
需要创建配置的xtype。 当传递一个配置对象给构造函数时，此配置选项不会被使用。 只有在使用懒初始化的时候此配置项才会被使用，此时容器的子项目不是 通过一个完整的实例组件，而是通过一个Component配置指定的。 在渲染时，将会查找xtype以决定创建何种类型的子组件。

预定义的xtype列表如下： here。

如果你继承Component创建你自己的组件，你需要使用Ext.ComponentMgr.registerType 对它们进行注册，以便利用懒初始化和渲染机制。
Component
y : Number
如果被包含在一个指定位置的容器中，这个值表示y(top)坐标值。
BoxComponent
zIndex : Number
zIndex时，使用的菜单是浮动的。
Menu

公共属性

Property Defined By
disabled : Boolean
当前组件处于无效状态时为true。 Read-only.
Component
el : Ext.Element
封装了当前组件的Ext.Element。 Read-only。通常情况下，这将是一个<DIV>元素，它由此类的...

封装了当前组件的Ext.Element。 Read-only。

通常情况下，这将是一个<DIV>元素，它由此类的 onRender方法创建，但是它可以通过使用 autoEl 配置项进行覆盖。

注意: 直到组件渲染完成此元素都将处于无效状态。

如需向当前组件的 DOM事件(而不是当前组件自己的Observable事件)添加监听器， 更多建议，参见 listeners 配置项，或者直接使用一个render监听器:

new Ext.Panel({
    title: 'The Clickable Panel',
    listeners: {
        render: function(p) {
            // Append the Panel to the click handler's argument list.
            p.getEl().on('click', handlePanelClick.createDelegate(null, [p], true));
        },
        single: true  // Remove the listener after first invocation
    }
});

另请参见 getEl

Component
hidden : Boolean
如果当前组件处于隐藏状态，此值为true。Read-only。
Component
initialConfig : Object
当前组件的初始化配置描述。 Read-only。
Component
items : MixedCollection
当前容器中的子组件集合 Ext.util.MixedCollection
Container
ownerCt : Ext.Container
组件所属的Container (默认为undefined，当前组件被添加到一个容器中时此值被自动设置)...
组件所属的Container (默认为undefined，当前组件被添加到一个容器中时此值被自动设置)。 Read-only。

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

Component
picker : DatePicker
DateMenu中的 Ext.DatePicker 实例。
DateMenu
private : Object
我们只能在一块可见的区域进行布局。 布局目标*或者它的任何父元素* 为...
我们只能在一块可见的区域进行布局。 布局目标*或者它的任何父元素* 为display:none， 将意味着它没有一块可见的区域。
Container
refOwner : Ext.Container
如果当前组件是一个容器的孩子，并且是通过一个 ref 配置项被注册的，则此值为 ref 引用被插入到的祖先容器。
如果当前组件是一个容器的孩子，并且是通过一个 ref 配置项被注册的，则此值为 ref 引用被插入到的祖先容器。
Component
rendered : Boolean
如果当前组件已经被渲染了，此值为true。Read-only.
Component

公共方法

Method Defined By
add ( ...Object/Array component ) : Ext.Component/Array
向当前容器中添加 Component(s)。 描述 :在添加之前触发 beforeadd 事件...

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

描述 :

  • 在添加之前触发 beforeadd 事件
  • 将会相应地应用 容器的default config values (细节参见 defaults )。
  • 在组件添加之后触发 add 事件。

注意 :

  • 当调用 add 时如果容器已经被渲染， 你可能需要调用 doLayout 方法来刷新视图，它将导致所有尚未渲染的子组件进行渲染操作。 此操作是必须的，这样你可以 add 多个子组件而只刷新一次layout。 示例用法:

var tb = new Ext.Toolbar();
tb.render(document.body);  // toolbar is rendered
tb.add({text:'Button 1'}); // add multiple items (defaultType for Toolbar is 'button')
tb.add({text:'Button 2'});
tb.doLayout();             // refresh the layout
  • 警告: 使用BorderLayout布局的容器可能不能删除或者添加组件。 更多细节参见BorderLayout 的注释。
参数:
  • component : ...Object/Array

    需要添加的一个或多个组件，或者是一个组件数组。 更多信息参见 items 。

返回值:
  • Ext.Component/Array
    被添加的组件。
Container
addClass ( string cls ) : Ext.Component
为组件底层的元素添加CSS样式。
为组件底层的元素添加CSS样式。
参数:
  • cls : string
    需要添加的CSS样式的class名称
返回值:
  • Ext.Component
    this
Component
addElement ( Mixed el ) : Ext.menu.Item
添加一个Ext.Element对象到菜单中。
添加一个 Ext.Element 对象到菜单中。
参数:
  • el : Mixed
    需要添加的元素或DOM节点，或它的id。
返回值:
  • Ext.menu.Item
    被添加的菜单项
Menu
addEvents( Object|String o, string Optional. ) : void
添加指定的事件到事件列表上，事件会被该Observable触发。
添加指定的事件到事件列表上，事件会被该Observable触发。
参数:
  • o : Object|String
    以事件名作为属性true作为值的对象 或者当多个事件名被分开的传递时则为第一个事件名。
  • Optional. : string
    事件名被分开的传递时则为事件名。 用法:
    this.addEvents('storeloaded', 'storecleared');
返回值:
  • void
Observable
addItem ( Ext.menu.Item item ) : Ext.menu.Item
向菜单中添加一个基于Ext.menu.BaseItem的已存在的组件。
向菜单中添加一个基于 Ext.menu.BaseItem的已存在的组件。
参数:
  • item : Ext.menu.Item
    需要添加的菜单项。
返回值:
  • Ext.menu.Item
    被添加的菜单项。
Menu
addListener( String eventName, Function handler, [Object scope], [Object options] ) : void
给对象添加事件处理器。
给对象添加事件处理器。
参数:
  • eventName : String
    监听的事件名。
  • handler : Function
    事件调用的方法
  • scope : Object
    （可选）处理方法执行的作用域 (this的引用 reference)。 如果被忽略。默认为触发事件的对象。
  • options : Object
    （可选）包含处理器配置和属性的对象。 可能包含以下的属性:
    • scope : Object
      处理方法执行的作用域(this的引用) 。 如果被忽略。默认为触发事件的对象。
    • delay : Number
      在触发事件后延迟调用处理器的毫秒数。
    • single : Boolean
      如果为True则添加一个处理器来处理下一次的事件触发（仅一次），然后移除自己。
    • buffer : Number
      使得处理器延迟指定毫秒数后预定的运行在 一个Ext.util.DelayedTask中 。 如果事件在时间内再一次被触发，原始的处理器不会被调用，但是新的处理器会预定的在他的位置上。
    • target : Observable
      如果事件在目标的Observable上触发则仅仅调用处理器， 否则 事件会从子类的Observable上冒泡

    组合选项
    使用这些选项参数,可能会组合出不同类型的监听器：

    一个延迟的，一次性的监听器。

    myDataView.on('click', this.onClick, this, {
single: true,
delay: 100
});

    一次调用附加多个处理器
    该方法同样支持传递一个包含指定的多个处理器的属性的配置对象参数。

    myGridPanel.on({
'click' : {
    fn: this.onClick,
    scope: this,
    delay: 100
},
'mouseover' : {
    fn: this.onMouseOver,
    scope: this
},
'mouseout' : {
    fn: this.onMouseOut,
    scope: this
}
});

    或者一个简写的语法：

    myGridPanel.on({
'click' : this.onClick,
'mouseover' : this.onMouseOver,
'mouseout' : this.onMouseOut,
 scope: this
});
返回值:
  • void
Observable
addMenuItem ( Object config ) : Ext.menu.Item
使用所给的配置对象创建一个基于Ext.menu.Item的对象，并添加到菜单中。
使用所给的配置对象创建一个基于 Ext.menu.Item 的对象，并添加到菜单中。
参数:
  • config : Object
    一个菜单项配置对象。
返回值:
  • Ext.menu.Item
    被添加的菜单项。
Menu
addSeparator () : Ext.menu.Item
向菜单添加一个分割栏。
向菜单添加一个分割栏。
参数:
  • 无。
返回值:
  • Ext.menu.Item
    所添加的菜单项。
Menu
addText ( String text ) : Ext.menu.Item
使用给定的文本创建一个新的Ext.menu.TextItem并添加到菜单中。
使用给定的文本创建一个新的 Ext.menu.TextItem 并 添加到菜单中。
参数:
  • text : String
    显示在菜单项的文本。
返回值:
  • Ext.menu.Item
    被添加的菜单项。
Menu
applyToMarkup ( String/HTMLElement el ) : void
将此组件添加到已存在的有效的HTML标签中。 使用该方法时，无需再调用render()方法。
将此组件添加到已存在的有效的HTML标签中。 使用该方法时，无需再调用render()方法。
参数:
  • el : String/HTMLElement
返回值:
  • void
Component
bubble ( Function fn , [ Object scope ], [ Array args ] ) : Ext.Container
沿着component/container继承结构进行冒泡， 在每个组件上调用指定的函数。 所调用函数的作用域...
沿着component/container继承结构进行冒泡， 在每个组件上调用指定的函数。 所调用函数的作用域( this)将会是 指定的作用域或者是当前组件。 如果在函数任何一点上返回false，即停止冒泡过程
参数:
  • fn : Function
    需要调用的函数
  • scope : Object
    (可选) 函数的作用域(默认为当前节点)
  • args : Array
    (可选) 调用函数时需要传递的参数( 默认传递当前组件)
返回值:
  • Ext.Container
    this
Container
cascade ( Function fn , [ Object scope ], [ Array args ] ) : Ext.Container
从当前组件(第一个被调用的组件)开始，沿着component/container的继承树向下回溯...
从当前组件(第一个被调用的组件)开始，沿着component/container的继承树向下回溯， 在每个组件上调用指定的方法， 调用方法时的(this)作用域为指定的scope或者为当前组件。 传递给方法的参数为传递进来args或者当前组件。 在起泡的任意一个节点上，如果function返回false，即停止在那个分支上。
参数:
  • fn : Function
    需要调用的函数
  • scope : Object
    (可选)函数的作用域(默认为当前组件)
  • args : Array
    (可选) 调用函数时传递的参数 (默认传递当前组件)
返回值:
  • Ext.Container
    this
Container
cloneConfig ( Object overrides ) : Ext.Component
默认使用原先传递给当前实例的配置值克隆当前组件。
默认使用原先传递给当前实例的配置值克隆当前组件。
参数:
  • overrides : Object
    一个新的配置项，包含需要覆盖到克隆版本的所有属性。 可以传递一个id参数给此对象，否则将自动生成一个新的id以避免发生重复。
返回值:
  • Ext.Component
    当前组件的克隆副本
Component
destroy () : void
通过如下方法销毁对象：删除所有的事件监听器、将组件的元素从DOM树中删除...
通过如下方法销毁对象：删除所有的事件监听器、将组件的元素从DOM树中删除（如果可以）、 将组件从它的 Ext.Container（如果可用）中删除、 并且将它从Ext.ComponentMgr中 注销。 销毁操作一般由框架自动完成，一般情况下不需要直接调用该方法。
参数:
  • 无。
返回值:
  • void
Component
disable () : Ext.Component
将组件置为无效状态，并出发'disable'事件。
将组件置为无效状态，并出发'disable'事件。
参数:
  • 无。
返回值:
  • Ext.Component
    this
Component
doLayout ( [ Boolean shallow ], [ Boolean force ] ) : Ext.Container
强制容器的布局进行重新计算。 在向一个已经渲染的容器中添加...
强制容器的布局进行重新计算。 在向一个已经渲染的容器中添加一个新的组件， 或者改变子组件的尺寸/位置参数之后，必须调用此函数。
参数:
  • shallow : Boolean
    (可选) 设置为true时将仅仅计算当前组件的布局， 并且让子组件在需要时自动计算布局 (默认为flase，它将递归地调用每个子容器的doLayout方法)
  • force : Boolean
    (可选) 设置为true将强制进行布局，即使项目是隐藏的也进行。
返回值:
  • Ext.Container
    this
Container
enable () : Ext.Component
将组件置为有效状态并触发'enable'事件。
将组件置为有效状态并触发'enable'事件。
参数:
  • 无。
返回值:
  • Ext.Component
    this
Component
enableBubble( String/Array events ) :void
是否现在使得事件会被该Observable触发并调用 this.getBubbleTarget()方法在拥有者的继承树...

是否现在使得事件会被该Observable触发并调用 this.getBubbleTarget()方法在拥有者的继承树中冒泡。Observable的基础类中没有该方法的实现。

该方法一般被Ext.Components用来冒泡事件到拥有者的容器。参看Ext.Component.getBubbleTarget默认的实现 在Ext.Component中返回组件的直接拥有者。但是如果需要的是一个已知的目标，该方法可以被重写来更快的访问需求的目标。

例子:

Ext.override(Ext.form.Field, {
    // 添加方法到Field的initComponent上改变事件为冒泡
    initComponent : Ext.form.Field.prototype.initComponent.createSequence(function() {
        this.enableBubble('change');
    }),

    // 我们知道我们想让Field的事件冒泡到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() {
            // 如果样式被修改标题会变红。
            myForm.header.setStyle('color', 'red');
        }
    }
});
参数:
  • events : String/Array
    冒泡的事件名，或事件名数组
返回值:
  • void
Observable
find ( String prop , String value ) : Array
根据属性查找当前容器中任何层次上的组件
根据属性查找当前容器中任何层次上的组件
参数:
  • prop : String
  • value : String
返回值:
  • Array
    Ext.Component数组
Container
findBy ( Function fn , [ Object scope ] ) : Array
根据一个自定义的函数，查找当前容器中任意层级上的一个组件。 如果传递的函数返回true...
根据一个自定义的函数，查找当前容器中任意层级上的一个组件。 如果传递的函数返回true，组件将会被包含在结果中。 函数将会被用如下参数(component, this container)进行调用。
参数:
  • fn : Function
    需要调用的函数
  • scope : Object
    可选
返回值:
  • Array
    Ext.Component数组
Container
findById ( String id ) : Ext.Component
通过id查找容器中位于任何层级上的组件
通过id查找容器中位于任何层级上的组件
参数:
  • id : String
返回值:
  • Ext.Component
Container
findByType ( String/Class xtype , [ Boolean shallow ] ) : Array
根据xtype或者类型，查找当前容器中任何层级上的组件
根据xtype或者类型，查找当前容器中任何层级上的组件
参数:
  • xtype : String/Class
    组件的xtype字符串，或者直接是组件的class类型
  • shallow : Boolean
    (可选) 此参数为flase时将检查当前组件是否是指定xtype的后裔 (这是默认情况)，或者设置为true， 将检查当前组件是否直接是指定xtype类型（译者注：即指不按照多态性进行检查）。
返回值:
  • Array
    Ext.Component数组
Container
findParentBy ( Function fn ) : Ext.Container
通过自定义的函数查找当前组件上层任何层次上的容器...
通过自定义的函数查找当前组件上层任何层次上的容器。 如果传递的函数返回true，容器对象将被返回。
参数:
  • fn : Function
    自定义的函数，使用如下参数调用(container,this component)。
返回值:
  • Ext.Container
    自定义函数返回true的第一个容器
Component
findParentByType ( String/Class xtype ) : Ext.Container
通过xtype或者class查找当前组件上层任何层次上的容器
通过xtype或者class查找当前组件上层任何层次上的容器
参数:
  • xtype : String/Class
    组件的xtype字符串，或者直接是组件的class
返回值:
  • Ext.Container
    符合指定xtype或者class的第一个容器
Component
fireEvent( String eventName, Object... args ) : Boolean
用传入的参数触发指定的事件 (减去事件名)。 一个事件可以被设置为冒泡 Obse...

用传入的参数触发指定的事件 (减去事件名)。

一个事件可以被设置为冒泡到Observable父类继承树(参看 Ext.Component.getBubbleTarget) 调用enableBubble实现。

参数:
  • eventName : String
    触发的事件名。
  • args : Object...
    传递给处理器的可变长度参数。
返回值:
  • Boolean
    如果有任何的处理器返回false则返回false，否则返回true。
Observable
focus ( [ Boolean selectText ], [ Boolean/Number delay ] ) : Ext.Component
尝试将当前组件设为焦点。
尝试将当前组件设为焦点。
参数:
  • selectText : Boolean
    (可选) 如果可用，同时选中组件内部的文本
  • delay : Boolean/Number
    (可选)将当前组件设置为焦点的延迟时间(设置为true等于0毫秒)
返回值:
  • Ext.Component
    this
Component
get ( String/Number key ) : Ext.Component
获取当前容器包含的一个组件( items.get(key)方法的别名)
获取当前容器包含的一个组件( items.get(key)方法的别名)
参数:
  • key : String/Number
    组件的索引
返回值:
  • Ext.Component
    Ext.Component
Container
getBox ( [ Boolean local ] ) : Object
获取组件底层元素当前盒子模型的尺寸。（译者注：盒子模型是CSS术语，详细解释请自行搜索。）
获取组件底层元素当前盒子模型的尺寸。（译者注：盒子模型是CSS术语，详细解释请自行搜索。）
参数:
  • local : Boolean
    (可选)值为true时，组件的left值和top值将代替页面的XY被返回。(默认值为false)
返回值:
  • Object
    返回值的格式{x, y, width, height}
BoxComponent
getBubbleTarget () : Ext.Container
为Observable的fireEvent方法提供链接，它沿着继承结构进行冒泡操作。
为Observable的fireEvent方法提供链接，它沿着继承结构进行冒泡操作。
参数:
  • 无。
返回值:
  • Ext.Container
    拥有当前组件的容器。
Component
getComponent ( String/Number comp ) : Ext.Component
检查当前容器的 items property 并且获取当前容器的一个直接的子组件。
检查当前容器的 items property 并且获取当前容器的一个直接的子组件。
参数:
  • comp : String/Number
    参数可以是以下任何值：
    • 一个 String : 代表子组件的 itemId 或者 id
    • 一个 Number : 代表子组件在 items property 中的位置

    其它信息参见 Ext.util.MixedCollection.get。

返回值:
  • Ext.Component
    组件(如果有找到)。
Container
getEl () : Ext.Element
返回 Ext.Element ，它包装了当前组件。...

返回 Ext.Element ，它包装了当前组件。

通常情况下，这将是一个<DIV>元素，它是由该类的onRender方法创建的， 但是可以使用autoEl配置项 覆盖它。

注意: 此元素将会一直处于无效状态直到当前组件渲染完成。

如需向当前组件的 DOM事件(而不是当前组件自己的Observable事件)添加监听器， 更多建议，参见 listeners 配置项，或者直接使用一个render监听器:

new Ext.Panel({
    title: 'The Clickable Panel',
    listeners: {
        render: function(p) {
            // Append the Panel to the click handler's argument list.
            p.getEl().on('click', handlePanelClick.createDelegate(null, [p], true));
        },
        single: true  // Remove the listener after first invocation
    }
});
参数:
  • 无。
返回值:
  • Ext.Element
    包装当前组件的元素。
Component
getHeight () : Number
获取该组件的当前高度值。
获取该组件的当前高度值。
参数:
  • 无。
返回值:
  • Number
BoxComponent
getId () : String
返回当前组件的id，如果没有定义id，则自动生成并返回一个id:'ext-comp-'...
返回当前组件的 id 如果没有定义 id 则自动生成并返回一个 id

'ext-comp-' + (++Ext.Component.AUTO_ID)
参数:
  • 无。
返回值:
  • String
    id
Component
getItemId () : String
返回当前组件的 itemId 。 如果没有通过配置参数指定 itemId 那么，将会使用...
返回当前组件的 itemId 。 如果没有通过配置参数指定 itemId 那么，将会使用 getId 返回 id 。
参数:
  • 无。
返回值:
  • String
Component
getLayout () : ContainerLayout
返回容器当前使用的布局管理器。 如果容器当前没有设置布局管理器， 将会创建一个默认的...
返回容器当前使用的布局管理器。 如果容器当前没有设置布局管理器， 将会创建一个默认的 Ext.layout.ContainerLayout 并被设置为容器的布局管理器。
参数:
  • 无。
返回值:
  • ContainerLayout
    容器的布局管理器
Container
getLayoutTarget () : Ext.Element
返回当前容器中用来包含子组件的元素。提供了一个 可以返回容器的...

返回当前容器中用来包含子组件的元素。

提供了一个 可以返回容器的Element 的实现， 但是，如果容器有更复杂的结构， 可以覆盖此实现以返回 layout 在其中渲染子组件的元素。

参数:
  • 无。
返回值:
  • Ext.Element
    在其中渲染子组件的元素。
Container
getOuterSize () : Object
获取当前组件所在元素的尺寸大小，包括边缘的空白处。
获取当前组件所在元素的尺寸大小，包括边缘的空白处。
参数:
  • 无。
返回值:
  • Object
    一个包含元素大小的对象 {width: (element width + left/right margins), height: (element height + top/bottom margins)}
BoxComponent
getPosition ( [ Boolean local ] ) : Array
获取组件底层元素当前的XY位置。
获取组件底层元素当前的XY位置。
参数:
  • local : Boolean
    (可选)如果为true，将返回元素的left和top值，而不是相对于页面内的 XY。(默认值为 false)
返回值:
  • Array
    元素的XY位置值(例如：[100, 200])
BoxComponent
getResizeEl () : Ext.Element
返回该组件的最外层用来定义这些组件整体大小的Element...

返回该组件的最外层用来定义这些组件整体大小的Element对象。

通常用 getEl 方法将会返回相同的Element对象，但在有些情况下，组件可能有一些更多的封装了它的主要动态Element对象的Element对象。

例如ComboBox。它是封装在一个包含<input>元素的包装元素里(这将返回其 getEl方法和触发按钮的元素)。返回的元素为resizeEl。

参数:
  • 无。
返回值:
  • Ext.Element
    The Element which is to be resized by size managing layouts.
BoxComponent
getSize () : Object
获取组件底层元素当前的大小。
获取组件底层元素当前的大小。
参数:
  • 无。
返回值:
  • Object
    一个包含元素大小的对象{width: (element width), height: (element height)}
BoxComponent
getWidth () : Number
获取该组件的当前宽度值。
获取该组件的当前宽度值。
参数:
  • 无。
返回值:
  • Number
BoxComponent
getXType () : String
获取当前组件的xtype，它是用 Ext.ComponentMgr 注册的。 所有可用的xtype列表，参见...
获取当前组件的xtype，它是用 Ext.ComponentMgr 注册的。 所有可用的xtype列表，参见 Ext.Component 类头部。示例用法:

var t = new Ext.form.TextField();
alert(t.getXType());  // alerts 'textfield'
参数:
  • 无。
返回值:
  • String
    The xtype
Component
getXTypes () : String
返回此组件的xtype继承树，用字符'-'分隔。 所有可用的xtype值...

返回此组件的xtype继承树，用字符'-'分隔。 所有可用的xtype值，请参见Ext.Component 类的头部。

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

示例用法:

var t = new Ext.form.TextField();
alert(t.getXTypes());  // alerts 'component/box/field/textfield'
参数:
  • 无。
返回值:
  • String
    xtype层次字符串
Component
hasListener( String eventName ) : Boolean
检测对象是否包含指定事件的任何监听器
检测对象是否包含指定事件的任何监听器
参数:
  • eventName : String
    检测的事件名
返回值:
  • Boolean
    如果事件被监听则为true，否则为false
Observable
hide () : Ext.Component
隐藏当前组件。 监听 beforehide' 事件并且返回false 可以取消隐藏组件的操作。 在隐藏组件之后触发...
隐藏当前组件。 监听 beforehide' 事件并且返回false 可以取消隐藏组件的操作。 在隐藏组件之后触发 ' hide' 事件。 如果组件被配置成 hidden 那么此方法在内部被调用。
参数:
  • 无。
返回值:
  • Ext.Component
    this
Menu
insert ( Number index , Ext.Component component ) : Ext.Component
在当前容器的指定索引处插入一个组件。 在插入之前触发...
在当前容器的指定索引处插入一个组件。 在插入之前触发 beforeadd 事件， 然后在组件被插入之后触发 add 事件。
参数:
  • index : Number
    组件会被插入到容器子项集合中时的索引位置
  • component : Ext.Component
    需要插入的子组件。

    Ext使用懒渲染，只有在必要的时候才会渲染插入的组件。

    如果使用懒渲染，可以传递一个组件配置对象以避免创建一个真实组件的开销， 这意味着，插入的组件不会立即被渲染。 为了利用这个“懒初始化”('lazy instantiation')， 必须把组件设置为它注册的 Ext.Component.xtype 值。

    所有可用的xtype列表，参见 Ext.Component。
返回值:
  • Ext.Component
    使用容器默认配置值插入的组件(或者配置对象)。
Container
isVisible () : Boolean
如果当前组件可见，返回true。
如果当前组件可见，返回true。
参数:
  • 无。
返回值:
  • Boolean
    如果当前组件可见，返回true，其它返回false。
Component
isXType ( String xtype , [ Boolean shallow ] ) : Boolean
Tests whether or not this Component is of a specific xtype. This can test whether this Component is descended from th...

测试此组件是否是指定的xtype。此方法既可以测试是否是指定的xtype的某个子类， 或者它是否直接是指定的xtype类(shallow=true)。

如果使用你自己的子类，必须知道组件必须注册它的xtype值。

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

示例用法:

var t = new Ext.form.TextField();
var isText = t.isXType('textfield');        // true
var isBoxSubclass = t.isXType('box');       // true, descended from BoxComponent
var isBoxInstance = t.isXType('box', true); // false, not a direct BoxComponent instance
参数:
  • xtype : String
    需要为当前组件进行检测的xtype
  • shallow : Boolean
    (可选) 如果为false，检测组件是否是xtype继承树中的某个子类（默认是这种情况）， 如果为true，只检测组件是否是指定的xtype类型。
返回值:
  • Boolean
    如果当前组件是指定xtype的子类，返回true，其它返回flase。
Component
mon ( Observable|Element item , Object|String ename , Function fn , Object scope , Object opt ) : void
向任何Observable对象(或者元素)上添加监听器，监听器将会在组件...

向任何Observable对象(或者元素)上添加监听器，监听器将会在组件销毁时被自动删除。
用法：

myGridPanel.mon(myGridPanel.getSelectionModel(), 'selectionchange', handleSelectionChange, null, {buffer: 50});

or:

myGridPanel.mon(myGridPanel.getSelectionModel(), {
    selectionchange: handleSelectionChange,
    buffer: 50
});
参数:
  • item : Observable|Element
    需要添加listener/listeners的项目。
  • ename : Object|String
    事件名，或者一个包含事件名属性的对象。
  • fn : Function
    (可选) 如果 ename 参数是一个事件名，此参数为处理函数。
  • scope : Object
    (可选)如果 ename 参数是一个事件名称，此参数是作用域 ( this 引用)，监听函数将会在此作用域中被执行。
  • opt : Object
    (可选)如果 ename 参数是一个事件名称， 此参数是 addListener 配置项。
返回值:
  • void
Component
mun ( Observable|Element item , Object|String ename , Function fn , Object scope ) : void
删除通过mon 方法添加的监听器。
删除通过mon 方法添加的监听器。
参数:
  • item : Observable|Element
    需要删除listener/listeners的项目。
  • ename : Object|String
    事件名称，或者一个包含事件名称属性的对象。
  • fn : Function
    (可选)如果 ename 参数是一个事件名称，此参数是一个处理函数。
  • scope : Object
    (可选)如果 ename 参数是一个事件名称，此参数是作用域 ( this 引用)，监听函数将会在此作用域中被执行。
返回值:
  • void
Component
nextSibling () : Ext.Component
返回所属容器中的下一个组件
返回所属容器中的下一个组件
参数:
  • 无。
返回值:
  • Ext.Component
Component
on( String eventName, Function handler, [Object scope], [Object options] ) : void
给对象添加事件处理器 (addListener的简写形式)
给对象添加事件处理器 (addListener的简写形式。)
参数:
  • eventName : String
    监听的事件类型
  • handler : Function
    事件调用的方法
  • scope : Object
    （可选）处理方法执行时的作用域 (this 的引用)。 如果被忽略。默认为触发事件的对象。
  • options : Object
    可选 包含处理器配置的对象。
返回值:
  • void
Observable
previousSibling () : Ext.Component
返回所属容器中的前一个组件
返回所属容器中的前一个组件
参数:
  • 无。
返回值:
  • Ext.Component
Component
purgeListeners() : void
移除对象上所有的监听器
移除对象上所有的监听器
参数:
  • 无。
返回值:
  • void
Observable
relayEvents( Object o, Array events ) : void
从指定的Observable上传递选择的事件就好像被当前对象触发一样。
从指定的Observable上传递选择的事件就好像被当前对象触发一样。
参数:
  • o : Object
    该Observable上的事件被当前对象传递。
  • events : Array
    传递的数组名。
返回值:
  • void
Observable
remove ( Component/String component , [ Boolean autoDestroy ] ) : Ext.Component
从当前容器中移除一个组件。 在移除之前触发 beforeremove 事件， 然后在组件被移除之后触发...
从当前容器中移除一个组件。 在移除之前触发 beforeremove 事件， 然后在组件被移除之后触发 remove 事件。
参数:
  • component : Component/String
    需要移除的组件引用或者id
  • autoDestroy : Boolean
    (可选) 设置为true将自动调用被删组件的 Ext.Component.destroy 函数。 默认为容器的 autoDestroy 配置值。
返回值:
  • Ext.Component
    被移除的组件。
Container
removeAll ( [ Boolean autoDestroy ] ) : Array
从当前容器中删除所有组件。
从当前容器中删除所有组件。
参数:
  • autoDestroy : Boolean
    (可选) 此参数为true时将自动调用 被删组件的 Ext.Component.destroy 方法。 默认为当前容器的 autoDestroy 配置值。
返回值:
  • Array
    被销毁的组件数组
Container
removeClass ( string cls ) : Ext.Component
从组件底层的元素上删除一个CSS类。
从组件底层的元素上删除一个CSS类。
参数:
  • cls : string
    需要移除的CSS类名
返回值:
  • Ext.Component
    this
Component
removeListener( String eventName, Function handler, [Object scope] ) : void
删除一个事件处理器。
删除一个事件处理器。
参数:
  • eventName : String
    处理器关联的事件类型。
  • handler : Function
    移除的处理器。 这应该是传递到addListener里的方法的引用。
  • scope : Object
    （可选）处理器指定的初始作用域。
返回值:
  • void
Observable
render ( [ Element/HTMLElement/String container ], [ String/Number position ] ) : void
在传递进来的HTML元素中渲染当前组件。...

在传递进来的HTML元素中渲染当前组件。

如果你正在使用一个Container 对象放置当前组件，那么请不要使用render方法。

当容器第一次被渲染时，它的子组件将会被容器的 layout 管理器渲染。

某些布局管理器允许动态添加子组件。它们包括 Ext.layout.CardLayout, Ext.layout.AnchorLayout, Ext.layout.FormLayout, Ext.layout.TableLayout。

当一个新的子组件被添加时，如果容器已经被渲染了， 你可能需要调用容器的 doLayout 方法来刷新视图，它将导致所有没有被渲染的子组件进行渲染操作。 此操作是必须的，这样你可以添加多个子组件而只刷新一次layout。

当创建复杂的UI时，非常重要的一点是，请记住调整子项目的尺寸和位置是容器的 layout 管理器的职责。 如果你希望子项目的尺寸对用户交互作出反应， 你必须为容器配置一个布局管理器，它将创建和管理你心里想要的那种布局。

忽略容器的layout 配置意味着将会使用一个基本的布局管理器，它除了按次序把子组件 渲染到容器中之外什么事情都不做。 这种情况下，任何尺寸和位置的调整操作都不会发生。

参数:
  • container : Element/HTMLElement/String
    (可选) 需要在其中渲染当前组件的元素。 如果它是从一个已存在的标签中创建的，此参数应该被忽略。
  • position : String/Number
    (可选) 容器中的一个元素ID或者一个DOM节点索引， 当前组件将会被插入到它前面 (默认append到容器的尾部)
返回值:
  • void
Component
resumeEvents() : void
重新开始触发事件。(参见suspendEvents) 如果事件以queueSuspended参数被挂起，则在事件被挂起时 ...
重新开始触发事件。(参见 suspendEvents) 如果事件以queueSuspended 参数被挂起，则在事件被挂起时触发的事件会被传递到所有的监听器上
参数:
  • 无。
返回值:
  • void
Observable
setAutoScroll ( Boolean scroll ) : Ext.BoxComponent
设置该组件内容溢出时是否自动显示滚动条。
设置该组件内容溢出时是否自动显示滚动条。
参数:
  • scroll : Boolean
    值为true的话组件自动显示滚动条。
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setDisabled ( Boolean disabled ) : Ext.Component
工具函数，使用布尔值设置有效/无效(disabled/enabled )。
工具函数，使用布尔值设置有效/无效(disabled/enabled )。
参数:
  • disabled : Boolean
返回值:
  • Ext.Component
    this
Component
setHeight ( Mixed height ) : Ext.BoxComponent
设置此组件的高度。该方法将触发resize事件。
设置此组件的高度。该方法将触发resize事件。
参数:
  • height : Mixed
    The new height to set.
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setPagePosition ( Number x , Number y ) : Ext.BoxComponent
设置组件在页面中的XY位置。 如果需要设置left和top值 ，请使用...
设置组件在页面中的XY位置。 如果需要设置left和top值 ，请使用setPosition方法。 该方法触发move事件。
参数:
  • x : Number
    The new x position
  • y : Number
    The new y position
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setPosition ( Number left , Number top ) : Ext.BoxComponent
设置组件的left和top值。设置组件的页面XY值，请使用setPagePosition方法。该方法触发...
设置组件的left和top值。设置组件的页面XY值，请使用setPagePosition方法。该方法触发move事件。
参数:
  • left : Number
    The new left
  • top : Number
    The new top
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setSize ( Mixed width , Mixed height ) : Ext.BoxComponent
设置BoxComponent的宽度和高度。 此方法触发resize事件...
设置BoxComponent的宽度和高度。 此方法触发resize事件。此方法可以接收单独的width或者height值作为参数， 或者你可以传递像这样的一个size对象： {width:10, height:20} 。
参数:
  • width : Mixed
    设置的新的width值。这可以是：
    • 一个Number类型指定Element新的宽度 Ext.Element.defaultUnit(默认为像素 :'px')。
    • 一个String类型用于设置width的CSS样式。
    • 一个size对象格式为 {width: widthValue, height: heightValue} 。
    • 值为 undefined 时，保留原来的width不变。
  • height : Mixed
    设置的新的height值(如果第一个参数传递了一个size对象，此参数没有必要传递)。这可以是：
    • 一个Number类型指定Element新的高度 Ext.Element.defaultUnit(默认为像素 :'px')。
    • 一个String类型用于设置height的CSS样式。也有可能不会被使用到。
    • 值为 undefined 时，保留原来的height不变。
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setVisible ( Boolean visible ) : Ext.Component
工具方法，通过使用布尔值隐藏或者显示当前组件。
工具方法，通过使用布尔值隐藏或者显示当前组件。
参数:
  • visible : Boolean
    true时显示，false时隐藏
返回值:
  • Ext.Component
    this
Component
setWidth ( Mixed width ) : Ext.BoxComponent
设置组件的宽度。 此方法触发resize事件。
设置组件的宽度。 此方法触发resize事件。
参数:
  • width : Mixed
    The new width to set.
返回值:
  • Ext.BoxComponent
    this
BoxComponent
show () : Ext.Component
显示当前组件。监听' beforeshow' 事件，返回 false 取消显示组件...
显示当前组件。监听' beforeshow' 事件，返回 false 取消显示组件。在显示组件之后触发' show' 事件。
参数:
  • 无。
返回值:
  • Ext.Component
    this
Menu
showAt ( Array xyPosition , [ Ext.menu.Menu parentMenu ] ) : void
在指定的xy位置显示当前菜单并触发'show'事件， 如果'beforeshow'事件的处理程序......
在指定的xy位置显示当前菜单并触发'show'事件， 如果'beforeshow'事件的处理程序后返回false，就取消操。
参数:
  • xyPosition : Array
    包含X & Y [x, y]位置值，菜单将会被显示在此位置 (坐标是基于页面的)。
  • parentMenu : Ext.menu.Menu
    (可选)当前菜单的父菜单，如果可用(默认值为 undefined).
返回值:
  • void
Menu
suspendEvents( Boolean queueSuspended ) : void
暂停触发所有的事件。 (参看resumeEvents)
暂停触发所有的事件。（参看 resumeEvents)
参数:
  • queueSuspended : Boolean
    如果传递为true则排列好暂停的事件使得在调用 resumeEvents 后再触发它们，而不是抛弃所有暂停的事件。
返回值:
  • void
Observable
syncSize () : Ext.BoxComponent
强制组件的大小按照此组件底层元素当前的高度和宽度计算。
强制组件的大小按照此组件底层元素当前的高度和宽度计算。
参数:
  • 无。
返回值:
  • Ext.BoxComponent
    this
BoxComponent
un( String eventName, Function handler, [Object scope] ) : void
删除一个事件处理器(removeListener方法的简写形式)
删除一个事件处理器(removeListener方法的简写形式。)
参数:
  • eventName : String
    处理器关联的事件类型
  • handler : Function
    被删除的处理器 这应该是传入 addListener 中的方法的引用。
  • scope : Object
    （可选）为处理器指定的初始作用域。
返回值:
  • void
Observable
update ( Mixed htmlOrData , [ Boolean loadScripts ], [ Function callback ] ) : void
刷新组件的内部区域。
刷新组件的内部区域。
参数:
  • htmlOrData : Mixed
    如果已经通过tpl为当前组件配置了一个模板，那么 将会使用此参数来装配模板。 如果没有为当前组件配置模板，组件的内容区域将会通过Ext.Element 进行刷新。
  • loadScripts : Boolean
    (可选)只用在使用html配置时此参数才合法。默认为false。
  • callback : Function
    (可选)只用在使用html配置时此参数才合法。 当脚本加载完成时回调函数才被执行。
返回值:
  • void
Component
updateBox ( Object box ) : Ext.BoxComponent
设置此组件底层元素的盒子模型尺寸。(译者注：盒子模型是CSS术语，详细资料请自行搜索。)
设置此组件底层元素的盒子模型尺寸。(译者注：盒子模型是CSS术语，详细资料请自行搜索。)
参数:
  • box : Object
    一个格式为{x, y, width, height}的对象
返回值:
  • Ext.BoxComponent
    this
BoxComponent

公共事件

Event Defined By
add : ( Ext.Container this , Ext.Component component , Number index )
监听器将会被使用如下的参数被调用:
  • this : Ext.Container
  • component : Ext.Component
    被添加的组件
  • index : Number
    将组件添加到容器子组件集合时的位置索引
Container
added : ( Ext.Component this , Ext.Container ownerCt , number index )
当一个组件被添加到一个Ext.Container时触发
当一个组件被添加到一个Ext.Container时触发
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • ownerCt : Ext.Container
    用于组件的容器
  • index : number
    添加组件的位置
Component
afterlayout : ( Ext.Container this , ContainerLayout layout )
当容器中的组件被指定的布局管理器排列的时候触发。
当容器中的组件被指定的布局管理器排列的时候触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Container
  • layout : ContainerLayout
    为当前容器提供的ContainerLayout实现
Container
afterrender : ( Ext.Component this )
在组件渲染完成之后触发...

在组件渲染完成之后触发。

afterrender事件在当前组件被rendered 结束之后、在为组件定义的所有afterRender方法执行之后 触发，并且，如果有stateful， 也在状态被保存之后才触发。

监听器将会以如下参数格式被调用:
  • this : Ext.Component
Component
beforeadd : ( Ext.Container this , Ext.Component component , Number index )
在任何 Ext.Component 被添加或者插入到容器中之前触发。 事件处理器可以返回false取消添加操作。
在任何 Ext.Component 被添加或者插入到容器中之前触发。 事件处理器可以返回false取消添加操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Container
  • component : Ext.Component
    被添加的组件
  • index : Number
    组件被添加到容器子项目集合中时的索引位置
Container
beforedestroy : ( Ext.Component this )
在组件 destroyed 之前触发。 在事件监听器中返回false以停止 destroy 操作。
在组件 destroyed 之前触发。 在事件监听器中返回false以停止 destroy 操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforehide : ( Ext.Component this )
在调用hide方法隐藏组件之前触发。 在事件监听器中返回false可以停止隐藏操作。
在调用hide方法隐藏组件之前触发。 在事件监听器中返回false可以停止隐藏操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforeremove : ( Ext.Container this , Ext.Component component )
从容器中删除任何Ext.Component 之前触发。 处理器可以返回false取消remove操作。
从容器中删除任何Ext.Component 之前触发。 处理器可以返回false取消remove操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Container
  • component : Ext.Component
    被删除的组件
Container
beforerender : ( Ext.Component this )
在组件被rendered 之前触发。 在事件监听器中返回false可以停止render 操作。
在组件被rendered 之前触发。 在事件监听器中返回false可以停止render 操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforeshow : ( Ext.Component this )
在调用show()方法现实组件之前触发。 事件处理函数返回false可以停止show。
在调用show 方法现实组件之前触发。 事件处理函数返回false可以停止show。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforestaterestore : ( Ext.Component this , Object state )
在组件状态恢复之前触发。返回false停止恢复状态操作。
在组件状态恢复之前触发。返回false停止恢复状态操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    StateProvider返回的状态哈希值。 如果没有禁止此事件，那么状态对象会被传递给applyState。 默认情况下，这样简单地把属性值拷贝到当前组件中。 可以覆盖此方法以提供自定的状态恢复操作。
Component
beforestatesave : ( Ext.Component this , Object state )
在组件状态被保存到配置的状态提供者之前触发。 返回false可以停止保存。
在组件状态被保存到配置的状态提供者之前触发。 返回false可以停止保存。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    状态值哈希。 这由在组件上调用getState() 方法决定。 此方法必须由开发者提供，返回是否需要对状态进行描述，默认情况下， Ext.Component有一个空实现。
Component
destroy : ( Ext.Component this )
在组件被销毁之后触发。
在组件被destroyed之后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
disable : ( Ext.Component this )
在组件被设置为无效状态后触发。
在组件被设置为无效状态后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
enable : ( Ext.Component this )
当组件被设置为有效(enabled)之后触发。
当组件被设置为有效(enabled)之后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
hide : ( Ext.Component this )
在组件被隐藏之后触发。 当调用hide 方法隐藏组件之后触发。
在组件被隐藏之后触发。 当调用hide 方法隐藏组件之后触发。
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
mouseout : ( Ext.menu.Menu this , Ext.EventObject e , Ext.menu.Item menuItem )
当鼠标移出菜单时触发。
当鼠标移出菜单时触发。
监听器将会以如下的参数格式调用:
  • this : Ext.menu.Menu
  • e : Ext.EventObject
  • menuItem : Ext.menu.Item
    菜单项会被点击。
Menu
mouseover : ( Ext.menu.Menu this , Ext.EventObject e , Ext.menu.Item menuItem )
当鼠标滑过菜单时触发。
当鼠标滑过菜单时触发。
监听器将会以如下的参数格式调用:
  • this : Ext.menu.Menu
  • e : Ext.EventObject
  • menuItem : Ext.menu.Item
    菜单项将会被点击。
Menu
move : ( Ext.Component this , Number x , Number y )
在组件移动之后触发。
在组件移动之后触发。
监听器将会用如下的参数格式来调用:
  • this : Ext.Component
  • x : Number
    The new x position
  • y : Number
    The new y position
BoxComponent
remove : ( Ext.Container this , Ext.Component component )
监听器将会以如下的参数格式被调用:
  • this : Ext.Container
  • component : Ext.Component
    被删除的组件
Container
removed : ( Ext.Component this , Ext.Container ownerCt )
当一个组件被从Ext.Container容器中删除时触发
当一个组件被从Ext.Container容器中删除时触发
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • ownerCt : Ext.Container
    持有组件的容器
Component
render : ( Ext.Component this )
在组件被渲染之后触发。
在组件被 rendered(渲染) 之后触发。
监听器将以如下的参数格式被调用:
  • this : Ext.Component
Component
resize : ( Ext.Component this , Number adjWidth , Number adjHeight , Number rawWidth , Number rawHeight )
在组件被调整大小之后触发。
在组件被调整大小之后触发。
监听器将以如下的参数格式被调用:
  • this : Ext.Component
  • adjWidth : Number
    这是width调整后的值
  • adjHeight : Number
    这是height调整后的值
  • rawWidth : Number
    这是width原来的值
  • rawHeight : Number
    这是height原来的值
BoxComponent
select : ( DatePicker picker , Date date )
当从Ext.DatePicker选择一个时间后触发
当从Ext.DatePicker选择一个时间后触发
监听器将会被以如下的参数调用:
  • picker : DatePicker
    The Ext.DatePicker
  • date : Date
    The selected date
DateMenu
show : ( Ext.Component this )
在调用show 方法显示组件之后触发。
在调用show 方法显示组件之后触发。
监听器将会用如下的参数格式被调用:
  • this : Ext.Component
Component
staterestore : ( Ext.Component this , Object state )
组件状态被存储之后触发。
组件状态被存储之后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    StateProvider返回的状态哈希值。 如果没有禁止此事件，那么状态对象会被传递给applyState。 默认情况下，这样简单地把属性值拷贝到当前组件中。 可以覆盖此方法以提供自定的状态恢复操作。
Component
statesave : ( Ext.Component this , Object state )
在组件状态被保存到所配置的状态提供者之后触发。
在组件状态被保存到所配置的状态提供者之后触发。
监听器将会用如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    状态值hash。 这是由在足见上调用getState() 方法决定的。 开发者必须提供此方法以返回是否需要恢复状态，默认情况下， Ext.Component有一个空实现。
Component


Observable
    Component
      BaseItem
        Item

Class Ext.menu.Item

包: | Ext.menu
定义类的文件: | Item.js
类: | Item
子类: | CheckItem
继承自: | BaseItem
所有菜单项的基类，这些菜单项需要依赖菜单的一些功能(例如子菜单)，并且这些项目不是静态显示的。 继承 Ext.menu.BaseItem 项目，将获得其基本的功能，添加菜单特定的激活和点击处理。

配置项

Config Options Defined By
activeClass : String
当一个项目变成当前活动项时所应用的CSS样式 (默认值为"x-menu-item-active")
BaseItem
allowDomMove : Boolean
在渲染时组件是否可以移动Dom节点(默认为true)。
Component
applyTo : Mixed
指定一个元素的id、一个DOM元素或者一个已经存在并被渲染到DIV中的元素，此DIV已经被...

指定一个元素的id、一个DOM元素或者一个已经存在并被渲染到DIV中的元素，此DIV已经被 渲染到document中，并且为当前组件指定了一些结构化的标签。

  • 描述 :
      当使用了 applyTo， 在主元素中也可以用id或者CSS类名来指定组件的托管部分， 并且，如果可以的话，创建的组件可能也会试图在那个标签中创建它的子组件。
  • 注意 :
      当使用此配置项时，无需调用render()方法。
      如果指定了applyTo属性，任何传递给 renderTo 的值都会被忽略，并且目标元素的父节点将会自动被用作组件的容器。
Component
autoEl : Mixed
一个表签名或者一个 DomHelper 描述，用来创建 Element ，它将封装当前组件...

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

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

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

{
    xtype: 'box',
    autoEl: {
        tag: 'img',
        src: 'http://www.example.com/example.jpg'

    }
}, {
    xtype: 'box',
    autoEl: {
        tag: 'blockquote',
        html: 'autoEl is cool!'
    }
}, {
    xtype: 'container',
    autoEl: 'ul',
    cls: 'ux-unordered-list',
    items: {
        xtype: 'box',
        autoEl: 'li',
        html: 'First list item'
    }
}
Component
autoShow : Boolean
如果组件需要检测隐藏CSS属性(如 'x-hidden' 或者 'x-hide-display')并且在渲染时删除...
如果组件需要检测隐藏CSS属性(如 'x-hidden' 或者 'x-hide-display')并且在渲染时删除它们 (默认为false)，设置此值为true。
Component
bubbleEvents : Array
一个事件数组，当这些事件被触发时，将会被冒泡到所有父容器中。参见....

一个事件数组，当这些事件被触发时，将会被冒泡到所有父容器中。参见 Ext.util.Observable.enableBubble。 默认为 []。

Component
canActivate : Boolean
设置为true，此项目可以视觉上激活(默认值为 true)。
Item
clearCls : String
应用到特殊的clearing div的CSS类， 这个clearing div直接渲染到每个form field的包装器后面...

应用到特殊的clearing div的CSS类， 这个clearing div直接渲染到每个form field的包装器后面，以提供 清除field的功能(默认为 'x-form-clear-left')。

注意: 只有在当前组件被渲染到一个使用FormLayout 布局(例如 Ext.form.FormPanel 或者指定 layout:'form')的 容器中、或者是指定了一个fieldLabel 、或者指定isFormField=true 时此配置才有效。

另请参见 Ext.layout.FormLayout. fieldTpl。

Component
clickHideDelay : Number
点击之后的隐藏一个项目的延迟毫秒数(默认值为 1 )
BaseItem
cls : String
一个可选的额外CSS类，它将被添加到当前组件的元素上(默认为'')...
一个可选的额外CSS类，它将被添加到当前组件的元素上(默认为'')。 此属性对于在组件上，或者它的任何使用标准CSS规则的孩子节点上， 添加定制的样式非常有用。
Component
contentEl : String
(可选)指定一个已存在的HTML元素，或者一个已存在HTML元素的...

(可选)指定一个已存在的HTML元素，或者一个已存在HTML元素的 id ，它们将被用作当前组件的内容。

  • 描述 :
    此配置选项被用来将一个已存在的HTML元素 插入到一个新组件(在组件渲染之后它简单地移动DOM元素) 的layout元素中，使它成为该组件的内容。
  • 注意 :
    指定的HTML元素将被append到组件的layout元素中， 在所有配置的 HTML 被插入之后， 并且，这样的话，在render事件 被触发时，document中将不再包含此元素。
    指定的HTML元素将不会参与组件所有可能使用的 layout 过程(译者注：指这些HTML元素 不会参与布局操作)。 它仅是HTML而已。布局操作实在孩子 items 上进行的。
    添加 x-hidden 或者 x-hide-display CSS类，以防在内容渲染到panel时发生闪烁。
Component
ctCls : String
一个可选的外部CSS样式，添加到这个组件的容器(默认值为 '')。 这个方法对于使用标准的CSS规则...

一个可选的外部CSS样式，添加到这个组件的容器(默认值为 '')。 这个方法对于使用标准的CSS规则，为组件或它的任何一个子组件添加特定的样式非常有用。 参见 Ext.layout.ContainerLayout和 extraCls 。

注意: ctCls 默认为 ''期望如下的类，它们将指定一个默认值:

  • Box Layout : 'x-box-layout-ct'
使用一个额外的CSS类配置以上的Class，它是append到默认对象上的。例如， 对于BoxLayout (Hbox and Vbox):
                                ctCls: 'x-box-layout-ct custom-class'

Component
data : Mixed
初始化数据集，它将被应用到 tpl 上以刷新组件的内容区域。
Component
disabled : Boolean
当前组件处于无效状态时为true。 Read-only.
Component
disabledClass : String
当组件处于无效状态时添加到组件上的CSS类(默认为 'x-item-disabled')。
Component
fieldLabel : String
紧靠此field显示的标签文本(默认值为 '')。注意...

紧靠此field显示的标签文本(默认值为 '')。

注意:只有在当前组件被渲染到一个使用FormLayout 的容器中时，此配置才有效。 (例如 Ext.form.FormPanel 或 指定 layout:'form')。

另请参见 hideLabel 、 Ext.layout.FormLayout和 fieldTpl。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Name'
    }]
});
Component
handler : Function
(可选)一个处理菜单项点击事件的函数。该函数包含下列...
(可选)一个处理菜单项点击事件的函数。该函数包含下列参数：
  • b : Item
    当前菜单。
  • e : EventObject
    单击事件。
BaseItem
hidden : Boolean
如果当前组件处于隐藏状态，此值为true。Read-only。
Component
hideLabel : Boolean
true时完全隐藏label元素 ( label 和 separator)。 默认为 false。 默认情况下，即使你不指定...

true时完全隐藏label元素 ( label 和 separator)。 默认为 false。 默认情况下，即使你不指定 fieldLabel 它的空间仍然会被保留，这样这块区域会与其它确实拥有label的区域位于同一排。 讲此值设置为 true 将导致此区域不再保留此空间。

注意: 参见 clearCls 的注释。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield'
        hideLabel: true
    }]
});
Component
hideMode : String
组件如何隐藏，支持的值有： 'visibility' (css visibility), 'offsets' (位置偏移量为负值) 和...

组件如何隐藏，支持的值有： 'visibility' (css visibility), 'offsets' (位置偏移量为负值) 和 'display' (css display).

注意:一般首选默认值 'display'，因为当组件第一次显示的时候它们会自动进行布局 (隐藏的时候不会调整尺寸)。

Component
hideOnClick : Boolean
当值为true时，单击该选项后隐藏所包含的内部菜单 (默认值为 true)
BaseItem
hideParent : Boolean
此值为true时，当调用hide/show方法时，将会hide和show组件的容器...
此值为true时，当调用hide/show方法时，将会hide和show组件的容器；false时将会 hide和show组件自身(默认为false)。例如，这可以用作window上隐藏按钮的一种 快捷操作，通过设置此按钮的hideParent:true，然后把它添加到window上。
Component
href : String
底层锚定的链接所使用的href属性(默认值为 '#')。
Item
hrefTarget : String
底层锚定的链接所使用的target属性(默认值为 '')。
Item
html : String/Object
一个HTML片段，或者一个 DomHelper 描述，用作layout元素的内容(默认为'')。...
一个HTML片段，或者一个 DomHelper 描述，用作layout元素的内容(默认为'')。 这个HTML内容在组件渲染之后才被添加，所以在 render 出发的时候，document中尚未包含此HTML。 但是这个内容将会在所有配置的 contentEl 之前被插入到body标签中。
Component
icon : String
显示在此项目中的图标路径(默认值为 Ext.BLANK_IMAGE_URL)。 如果指定了icon， 则不应该指定...
显示在此项目中的图标路径(默认值为 Ext.BLANK_IMAGE_URL)。 如果指定了icon，则不应该指定 iconCls。
Item
iconCls : String
一个CSS样式指定的背景图片，将被用作此项目的图标...
一个CSS样式指定的背景图片，将被用作此项目的图标(默认值为'')。 如果指定了iconCls，就不应该指定 icon。
Item
id : String
当前组件唯一的id(默认为auto-assigned id)...

当前组件唯一的id(默认为auto-assigned id)。 如果你需要在以后访问组件，而又没有一个有效的组件对象引用，那么你需要指定一个 id( 也就是，使用Ext. getCmp方法 )。

注意，此id也将被用作组件底层HTML标签的id，这些标签被渲染到页面中。 这将允许你编写基于id的CSS规则，以独立地描述指定的实例；并且，也可以通过 组件父标签的id选中子元素。

注意:为了避免与唯一的id 产生重复， 请参见 itemId 和 ref 。

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

Component
itemCls : String
菜单项使用的默认CSS样式(默认值为 'x-menu-item')
Item
itemId : String
当没有可利用的对象引用时，itemId可以作为第二选择，用来获得一个组件的引用， 代替 ...

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

var c = new Ext.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'); // 与 Ext.getCmp()不同

p2 = p1.ownerCt.getComponent('p2'); // 通过兄弟对象获得引用

另请参见 id 和 ref 。

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

Component
labelSeparator : String
每个fieldLabel 文本后面现实的分隔符。 此属性可以在多个层次上进行配置...

每个fieldLabel 文本后面现实的分隔符。 此属性可以在多个层次上进行配置。优先顺序为：

  • field / component level
  • container level
  • layout level (默认为冒号 ':')
如不需要为当前field的label显示分隔符，指定一个空字符串''即可。

注意:参见 clearCls 的注释。

另请参见 hideLabel 和 Ext.layout.FormLayout。 fieldTpl。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    layoutConfig: {
        labelSeparator: '~'   // layout config has lowest priority (defaults to ':')
    },
    labelSeparator: '>>',     // config at container level
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Field 1',
        labelSeparator: '...' // field/component level config supersedes others
    },{
        xtype: 'textfield',
        fieldLabel: 'Field 2' // labelSeparator will be '='

    }]
});
Component
labelStyle : String
一个CSS样式描述字符串，它将直接应用到当前field的label上...

一个CSS样式描述字符串，它将直接应用到当前field的label上。 如果有设置，默认为容器的labelStyle值(例如 Ext.layout.FormLayout.labelStyle , 或者 '')。

注意:参见 clearCls 的注释。

另请参见 hideLabel 和 Ext.layout.FormLayout. fieldTpl。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Name',
        labelStyle: 'font-weight:bold;'
    }]
});
Component
listeners : Object
一个包含一个或多个事件处理器的配置对象，会在初始化的时候被添加到目标对象上...

一个包含一个或多个事件处理器的配置对象，会在初始化的时候被添加到目标对象上。 该配置对象应该是一个有效的监听器配置对象就像 addListener例子中指定的一样可一次附加多个处理器。

ExtJs Components上的DOM事件

一些 ExtJs Component 类导出时会选择一些DOM事件(例如 "click", "mouseover" 等等), 这通常只是在有额外的值可以被添加时发生。例如DataView类的 click事件会传递被点击的节点。也可以直接在Component的HTMLElementevent上访问DOM事件，但必需在Component被渲染后监听器才能添加到Element 上。可以按照以下步骤添加插件:

// 插件会用一个监听器配置对象进行配置。
//该组件会被添加到所有处理方法的参数列表上。
Ext.DomObserver = Ext.extend(Object, {
    constructor: function(config) {
        this.listeners = config.listeners ? config.listeners : config;
    },

    // 组件将自己传递进了插件的初始化方法里
    init: function(c) {
        var p, l = this.listeners;
        for (p in l) {
            if (Ext.isFunction(l[p])) {
                l[p] = this.createHandler(l[p], c);
            } else {
                l[p].fn = this.createHandler(l[p].fn, c);
            }
        }

        // 渲染后立即添加监听器到元素上
        c.render = c.render.createSequence(function() {
            var e = c.getEl();
            if (e) {
                e.on(l);
            }
        });
    },

    createHandler: function(fn, c) {
        return function(e) {
            fn.call(this, e, c);
        };
    }
});

var combo = new Ext.form.ComboBox({

    // 元素被点击后折叠
    plugins: [ new Ext.DomObserver({
        click: function(evt, comp) {
            comp.collapse();
        }
    })],
    store: myStore,
    typeAhead: true,
    mode: 'local',
    triggerAction: 'all'
});

Observable
menu : Ext.menu.Menu
如果配置了该属性，那么它将作为当前项的子菜单。
Item
overCls : String
一个可选的额外的CSS类，它将在鼠标移过元素时被添加到组件上...
一个可选的额外的CSS类，它将在鼠标移过元素时被添加到组件上，鼠标移出时 删除。(默认为'')。此属性对于在组件上，或者它的任何使用标准CSS规则的孩子节点上， 添加定制的'active' 或者 'hover'样式非常有用。
Component
plugins : Object/Array
一个对象或者一个对象数组，为组件提供特殊的功能 ...
一个对象或者一个对象数组，为组件提供特殊的功能。 对一个合法的插件唯一的要求是它含有一个init()方法， 能接收一个Ext.Component型的参数。 当组件被创建时，如果有可用的插件，组件将会调用每个插件的init方法， 并将自身的引用作为方法参数传递给它。然后，每个插件就可以调用方法或者响应组件上的事件， 就像需要的那样提供自己的功能。
Component
ptype : String
需要创建配置的ptype。 当传递一个配置对象给构造函数时...
需要创建配置的ptype。 当传递一个配置对象给构造函数时，此配置选项不会被使用。 只有在使用懒初始化的时候此配置项才会被使用， 此时Plugin不是 通过一个完整的实例组件，而是通过一个Component配置指定的。 在渲染时，将会查找ptype以决定创建何种类型的Plugin。

如果你创建自己的Plugin，你可以通过 Ext.ComponentMgr.registerPlugin 对它们进行注册，以便能利用懒初始化和渲染机制。
Component
ref : String
一个路径描述，与组件的 ownerCt 相关，它描述了把当前组件的命名引用放置到哪个父容器中去。...

一个路径描述，与组件的 ownerCt 相关，它描述了把当前组件的命名引用放置到哪个父容器中去。

祖先的坐标路径可以通过'/'字符进行分隔。 例如，将一个Toolbar Button的引用放入 拥有此Toolbar的Panel中:

var myGrid = new Ext.grid.EditorGridPanel({
    title: 'My EditorGridPanel',
    store: myStore,
    colModel: myColModel,
    tbar: [{
        text: 'Save',
        handler: saveChanges,
        disabled: true,
        ref: '../saveButton'
    }],
    listeners: {
        afteredit: function() {
//          The button reference is in the GridPanel
            myGrid.saveButton.enable();
        }
    }
});

在上面的代码中，如果 ref 是 'saveButton' ，那么引用将会被放置到Toolbar中。 ref 中的每个'/' 都会从组件的 ownerCt 向上移动一级。

另请参见 added 和 removed 事件。

Component
renderTo : Mixed
该值可以是一个节点的id、一个DOM节点或者一个已存在的元素...

该值可以是一个节点的id、一个DOM节点或者一个已存在的元素， 组件将会被渲染到其中。

  • 注意 :
      如果组件不是一个Container 的子项目时， 不要使用此选项。 渲染和管理它的子项目是一个Container 的layout manager的责任。
      当使用此配置项时，无需调用render()方法。

另请参见 render 。

Component
scope : Object
调用处理器时使用的作用域。
BaseItem
showDelay : Number
显示此项目时等待（延迟）的毫秒数(默认值为 200)
Item
stateEvents : Array
一个事件数组，当它们被触发时，组件需要保存自己的状态(默认值为 none)...

一个事件数组，当它们被触发时，组件需要保存自己的状态(默认值为 none)。 它们可以是任何该组件支持的事件类型，包括浏览器事件和 自定义事件(例如['click', 'customerchange'])。

对于保存和恢复组件状态的详细解释，参见 stateful

Component
stateId : String
为该组件指定的唯一的id值，它被用作管理组件状态的目的...
为该组件指定的唯一的id值，它被用作管理组件状态的目的。 (如果设定了id，默认值为组件自己的id，否则，如果组件使用自动生成的id，此值为null)。

对于保存和反解析组件状态的解释，参见 stateful 。

Component
stateful : Boolean
一个标志参数，它将引起组件在启动时尝试从一个保存的状态中恢复内部状态参数...

一个标志参数，它将引起组件在启动时尝试从一个保存的状态中恢复内部状态参数。 组件必须要么拥有一个 stateId 或者 id ，它们被分配给需要被管理的状态属性。 在跨页面加载时，不保证自动生成的id属性的稳定性， 并且，不能依赖此id来保存和恢复一个组件的相同状态。

为了保存状态的操作能够工作，状态管理器的提供者必须 被设置成一个Ext.state.Provider 的实现类，它覆盖了set 和get 方法，以便保存和恢复name/value对。 有一个内置的Ext.state.CookieProvider 可用。

为当前页面设置状态提供者:

Ext.state.Manager.setProvider(new Ext.state.CookieProvider({
    expires: new Date(new Date().getTime()+(1000*60*60*24*7)), //7 days from now
}));

当 stateEvents 配置项中其中之一的事件被触发时， 一个状态可保存的组件将试图保存其状态。

保存状态时，一个可保存状态的组件首先需要通过调用 getState 方法来序列化它的状态。 默认情况下，此函数什么事都不做。 开发者必须提供一个实现，返回一个hash对象，它描述了组件可恢复的状态。

getState方法产生的值将会传递给 Ext.state.Manager.set 方法，它使用配置的 Ext.state.Provider 来保存对象，以组件的 stateId 为key，或者，如果此值（指stateId）没有指定时， 使用它的 id 作为key。

在进行构造时，一个可保存状态的组件试图通过调用 Ext.state.Manager.get方法来 恢复它的状态，传递 stateId 或者，如果此值（指stateId）没有指定时， 使用它的 id 作为参数。

结果对象被传递给 applyState 。 applyState 的默认实现只是简单地把属性拷贝到对象中， 但是开发者可以覆盖此方法以支持更多行为。

通过向 beforestaterestore, staterestore, beforestatesave 和 statesave 事件上绑定监听器，你可以在保存和恢复状态时进行额外的处理。

Component
style : String
被添加到组件元素的特定样式。 必须是按照...
被添加到组件元素的特定样式。 必须是按照 Ext.Element.applyStyles 类指定格式的合法参数值。

new Ext.Panel({
    title: 'Some Title',
    renderTo: Ext.getBody(),
    width: 400, height: 300,
    layout: 'form',
    items: [{
        xtype: 'textarea',
        style: {
            width: '95%',
            marginBottom: '10px'
        }
    },
        new Ext.Button({
            text: 'Send',
            minWidth: '100',
            style: {
                marginBottom: '10px'
            }
        })
    ]
});
Component
text : String
此项目中显示的文本(默认值为 '')。
Item
tpl : Mixed
一个 Ext.Template , Ext.XTemplate 或者一个用来形成一个Ext.XTemplate的字符串数组...
一个 Ext.Template , Ext.XTemplate 或者一个用来形成一个Ext.XTemplate的字符串数组。 与 data 和 tplWriteMode 配置项协同使用。
Component
tplWriteMode : String
刷新组件的内容区域时使用的Ext.(X)Template方式。 默认为'overwrite' (参见 Ext.XTemplate.overwrite )。
刷新组件的内容区域时使用的Ext.(X)Template方式。 默认为'overwrite' (参见 Ext.XTemplate.overwrite )。
Component
xtype : String
需要创建配置的xtype。 当传递一个配置对象给构造函数时...
需要创建配置的xtype。 当传递一个配置对象给构造函数时，此配置选项不会被使用。 只有在使用懒初始化的时候此配置项才会被使用，此时容器的子项目不是 通过一个完整的实例组件，而是通过一个Component配置指定的。 在渲染时，将会查找xtype以决定创建何种类型的子组件。

预定义的xtype列表如下： here。

如果你继承Component创建你自己的组件，你需要使用Ext.ComponentMgr.registerType 对它们进行注册，以便利用懒初始化和渲染机制。
Component

公共属性

Property Defined By
disabled : Boolean
当前组件处于无效状态时为true。 Read-only.
Component
el : Ext.Element
封装了当前组件的Ext.Element。 Read-only。通常情况下，这将是一个<DIV>元素，它由此类的...

封装了当前组件的Ext.Element。 Read-only。

通常情况下，这将是一个<DIV>元素，它由此类的 onRender方法创建，但是它可以通过使用 autoEl 配置项进行覆盖。

注意: 直到组件渲染完成此元素都将处于无效状态。

如需向当前组件的 DOM事件(而不是当前组件自己的Observable事件)添加监听器， 更多建议，参见 listeners 配置项，或者直接使用一个render监听器:

new Ext.Panel({
    title: 'The Clickable Panel',
    listeners: {
        render: function(p) {
            // Append the Panel to the click handler's argument list.
            p.getEl().on('click', handlePanelClick.createDelegate(null, [p], true));
        },
        single: true  // Remove the listener after first invocation
    }
});

另请参见 getEl

Component
hidden : Boolean
如果当前组件处于隐藏状态，此值为true。Read-only。
Component
initialConfig : Object
当前组件的初始化配置描述。 Read-only。
Component
menu : Ext.menu.Menu
如果配置了该属性，那么它将作为当前项的子菜单。
Item
ownerCt : Ext.Container
组件所属的Container (默认为undefined，当前组件被添加到一个容器中时此值被自动设置)...
组件所属的Container (默认为undefined，当前组件被添加到一个容器中时此值被自动设置)。 Read-only。

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

Component
parentMenu : Ext.menu.Menu
当前项的父菜单。
BaseItem
refOwner : Ext.Container
如果当前组件是一个容器的孩子，并且是通过一个 ref 配置项被注册的，则此值为 ref 引用被插入到的祖先容器。
如果当前组件是一个容器的孩子，并且是通过一个 ref 配置项被注册的，则此值为 ref 引用被插入到的祖先容器。
Component
rendered : Boolean
如果当前组件已经被渲染了，此值为true。Read-only.
Component

公共方法

Method Defined By
Item ( Object config )
Creates a new Item
Creates a new Item
参数:
  • config : Object
    Configuration options
返回值:
  • void
Item
addClass ( string cls ) : Ext.Component
为组件底层的元素添加CSS样式。
为组件底层的元素添加CSS样式。
参数:
  • cls : string
    需要添加的CSS样式的class名称
返回值:
  • Ext.Component
    this
Component
addEvents( Object|String o, string Optional. ) : void
添加指定的事件到事件列表上，事件会被该Observable触发。
添加指定的事件到事件列表上，事件会被该Observable触发。
参数:
  • o : Object|String
    以事件名作为属性true作为值的对象 或者当多个事件名被分开的传递时则为第一个事件名。
  • Optional. : string
    事件名被分开的传递时则为事件名。 用法:
    this.addEvents('storeloaded', 'storecleared');
返回值:
  • void
Observable
addListener( String eventName, Function handler, [Object scope], [Object options] ) : void
给对象添加事件处理器。
给对象添加事件处理器。
参数:
  • eventName : String
    监听的事件名。
  • handler : Function
    事件调用的方法
  • scope : Object
    （可选）处理方法执行的作用域 (this的引用 reference)。 如果被忽略。默认为触发事件的对象。
  • options : Object
    （可选）包含处理器配置和属性的对象。 可能包含以下的属性:
    • scope : Object
      处理方法执行的作用域(this的引用) 。 如果被忽略。默认为触发事件的对象。
    • delay : Number
      在触发事件后延迟调用处理器的毫秒数。
    • single : Boolean
      如果为True则添加一个处理器来处理下一次的事件触发（仅一次），然后移除自己。
    • buffer : Number
      使得处理器延迟指定毫秒数后预定的运行在 一个Ext.util.DelayedTask中 。 如果事件在时间内再一次被触发，原始的处理器不会被调用，但是新的处理器会预定的在他的位置上。
    • target : Observable
      如果事件在目标的Observable上触发则仅仅调用处理器， 否则 事件会从子类的Observable上冒泡

    组合选项
    使用这些选项参数,可能会组合出不同类型的监听器：

    一个延迟的，一次性的监听器。

    myDataView.on('click', this.onClick, this, {
single: true,
delay: 100
});

    一次调用附加多个处理器
    该方法同样支持传递一个包含指定的多个处理器的属性的配置对象参数。

    myGridPanel.on({
'click' : {
    fn: this.onClick,
    scope: this,
    delay: 100
},
'mouseover' : {
    fn: this.onMouseOver,
    scope: this
},
'mouseout' : {
    fn: this.onMouseOut,
    scope: this
}
});

    或者一个简写的语法：

    myGridPanel.on({
'click' : this.onClick,
'mouseover' : this.onMouseOver,
'mouseout' : this.onMouseOut,
 scope: this
});
返回值:
  • void
Observable
applyToMarkup ( String/HTMLElement el ) : void
将此组件添加到已存在的有效的HTML标签中。 使用该方法时，无需再调用render()方法。
将此组件添加到已存在的有效的HTML标签中。 使用该方法时，无需再调用render()方法。
参数:
  • el : String/HTMLElement
返回值:
  • void
Component
cloneConfig ( Object overrides ) : Ext.Component
默认使用原先传递给当前实例的配置值克隆当前组件。
默认使用原先传递给当前实例的配置值克隆当前组件。
参数:
  • overrides : Object
    一个新的配置项，包含需要覆盖到克隆版本的所有属性。 可以传递一个id参数给此对象，否则将自动生成一个新的id以避免发生重复。
返回值:
  • Ext.Component
    当前组件的克隆副本
Component
destroy () : void
通过如下方法销毁对象：删除所有的事件监听器、将组件的元素从DOM树中删除...
通过如下方法销毁对象：删除所有的事件监听器、将组件的元素从DOM树中删除（如果可以）、 将组件从它的 Ext.Container（如果可用）中删除、 并且将它从Ext.ComponentMgr中 注销。 销毁操作一般由框架自动完成，一般情况下不需要直接调用该方法。
参数:
  • 无。
返回值:
  • void
Component
disable () : Ext.Component
将组件置为无效状态，并出发'disable'事件。
将组件置为无效状态，并出发'disable'事件。
参数:
  • 无。
返回值:
  • Ext.Component
    this
Component
enable () : Ext.Component
将组件置为有效状态并触发'enable'事件。
将组件置为有效状态并触发'enable'事件。
参数:
  • 无。
返回值:
  • Ext.Component
    this
Component
enableBubble( String/Array events ) :void
是否现在使得事件会被该Observable触发并调用 this.getBubbleTarget()方法在拥有者的继承树...

是否现在使得事件会被该Observable触发并调用 this.getBubbleTarget()方法在拥有者的继承树中冒泡。Observable的基础类中没有该方法的实现。

该方法一般被Ext.Components用来冒泡事件到拥有者的容器。参看Ext.Component.getBubbleTarget默认的实现 在Ext.Component中返回组件的直接拥有者。但是如果需要的是一个已知的目标，该方法可以被重写来更快的访问需求的目标。

例子:

Ext.override(Ext.form.Field, {
    // 添加方法到Field的initComponent上改变事件为冒泡
    initComponent : Ext.form.Field.prototype.initComponent.createSequence(function() {
        this.enableBubble('change');
    }),

    // 我们知道我们想让Field的事件冒泡到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() {
            // 如果样式被修改标题会变红。
            myForm.header.setStyle('color', 'red');
        }
    }
});
参数:
  • events : String/Array
    冒泡的事件名，或事件名数组
返回值:
  • void
Observable
findParentBy ( Function fn ) : Ext.Container
通过自定义的函数查找当前组件上层任何层次上的容器...
通过自定义的函数查找当前组件上层任何层次上的容器。 如果传递的函数返回true，容器对象将被返回。
参数:
  • fn : Function
    自定义的函数，使用如下参数调用(container,this component)。
返回值:
  • Ext.Container
    自定义函数返回true的第一个容器
Component
findParentByType ( String/Class xtype ) : Ext.Container
通过xtype或者class查找当前组件上层任何层次上的容器
通过xtype或者class查找当前组件上层任何层次上的容器
参数:
  • xtype : String/Class
    组件的xtype字符串，或者直接是组件的class
返回值:
  • Ext.Container
    符合指定xtype或者class的第一个容器
Component
fireEvent( String eventName, Object... args ) : Boolean
用传入的参数触发指定的事件 (减去事件名)。 一个事件可以被设置为冒泡 Obse...

用传入的参数触发指定的事件 (减去事件名)。

一个事件可以被设置为冒泡到Observable父类继承树(参看 Ext.Component.getBubbleTarget) 调用enableBubble实现。

参数:
  • eventName : String
    触发的事件名。
  • args : Object...
    传递给处理器的可变长度参数。
返回值:
  • Boolean
    如果有任何的处理器返回false则返回false，否则返回true。
Observable
focus ( [ Boolean selectText ], [ Boolean/Number delay ] ) : Ext.Component
尝试将当前组件设为焦点。
尝试将当前组件设为焦点。
参数:
  • selectText : Boolean
    (可选) 如果可用，同时选中组件内部的文本
  • delay : Boolean/Number
    (可选)将当前组件设置为焦点的延迟时间(设置为true等于0毫秒)
返回值:
  • Ext.Component
    this
Component
getBubbleTarget () : Ext.Container
为Observable的fireEvent方法提供链接，它沿着继承结构进行冒泡操作。
为Observable的fireEvent方法提供链接，它沿着继承结构进行冒泡操作。
参数:
  • 无。
返回值:
  • Ext.Container
    拥有当前组件的容器。
Component
getEl () : Ext.Element
返回 Ext.Element ，它包装了当前组件。...

返回 Ext.Element ，它包装了当前组件。

通常情况下，这将是一个<DIV>元素，它是由该类的onRender方法创建的， 但是可以使用autoEl配置项 覆盖它。

注意: 此元素将会一直处于无效状态直到当前组件渲染完成。

如需向当前组件的 DOM事件(而不是当前组件自己的Observable事件)添加监听器， 更多建议，参见 listeners 配置项，或者直接使用一个render监听器:

new Ext.Panel({
    title: 'The Clickable Panel',
    listeners: {
        render: function(p) {
            // Append the Panel to the click handler's argument list.
            p.getEl().on('click', handlePanelClick.createDelegate(null, [p], true));
        },
        single: true  // Remove the listener after first invocation
    }
});
参数:
  • 无。
返回值:
  • Ext.Element
    包装当前组件的元素。
Component
getId () : String
返回当前组件的id，如果没有定义id，则自动生成并返回一个id:'ext-comp-'...
返回当前组件的 id 如果没有定义 id 则自动生成并返回一个 id

'ext-comp-' + (++Ext.Component.AUTO_ID)
参数:
  • 无。
返回值:
  • String
    id
Component
getItemId () : String
返回当前组件的 itemId 。 如果没有通过配置参数指定 itemId 那么，将会使用...
返回当前组件的 itemId 。 如果没有通过配置参数指定 itemId 那么，将会使用 getId 返回 id 。
参数:
  • 无。
返回值:
  • String
Component
getXType () : String
获取当前组件的xtype，它是用 Ext.ComponentMgr 注册的。 所有可用的xtype列表，参见...
获取当前组件的xtype，它是用 Ext.ComponentMgr 注册的。 所有可用的xtype列表，参见 Ext.Component 类头部。示例用法:

var t = new Ext.form.TextField();
alert(t.getXType());  // alerts 'textfield'
参数:
  • 无。
返回值:
  • String
    The xtype
Component
getXTypes () : String
返回此组件的xtype继承树，用字符'-'分隔。 所有可用的xtype值...

返回此组件的xtype继承树，用字符'-'分隔。 所有可用的xtype值，请参见Ext.Component 类的头部。

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

示例用法:

var t = new Ext.form.TextField();
alert(t.getXTypes());  // alerts 'component/box/field/textfield'
参数:
  • 无。
返回值:
  • String
    xtype层次字符串
Component
hasListener( String eventName ) : Boolean
检测对象是否包含指定事件的任何监听器
检测对象是否包含指定事件的任何监听器
参数:
  • eventName : String
    检测的事件名
返回值:
  • Boolean
    如果事件被监听则为true，否则为false
Observable
hide () : Ext.Component
隐藏当前组件。 监听 beforehide' 事件并且返回false 可以取消隐藏组件的操作。 在隐藏组件之后触发...
隐藏当前组件。 监听 beforehide' 事件并且返回false 可以取消隐藏组件的操作。 在隐藏组件之后触发 ' hide' 事件。 如果组件被配置成 hidden 那么此方法在内部被调用。
参数:
  • 无。
返回值:
  • Ext.Component
    this
Component
isVisible () : Boolean
如果当前组件可见，返回true。
如果当前组件可见，返回true。
参数:
  • 无。
返回值:
  • Boolean
    如果当前组件可见，返回true，其它返回false。
Component
isXType ( String xtype , [ Boolean shallow ] ) : Boolean
Tests whether or not this Component is of a specific xtype. This can test whether this Component is descended from th...

测试此组件是否是指定的xtype。此方法既可以测试是否是指定的xtype的某个子类， 或者它是否直接是指定的xtype类(shallow=true)。

如果使用你自己的子类，必须知道组件必须注册它的xtype值。

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

示例用法:

var t = new Ext.form.TextField();
var isText = t.isXType('textfield');        // true
var isBoxSubclass = t.isXType('box');       // true, descended from BoxComponent
var isBoxInstance = t.isXType('box', true); // false, not a direct BoxComponent instance
参数:
  • xtype : String
    需要为当前组件进行检测的xtype
  • shallow : Boolean
    (可选) 如果为false，检测组件是否是xtype继承树中的某个子类（默认是这种情况）， 如果为true，只检测组件是否是指定的xtype类型。
返回值:
  • Boolean
    如果当前组件是指定xtype的子类，返回true，其它返回flase。
Component
mon ( Observable|Element item , Object|String ename , Function fn , Object scope , Object opt ) : void
向任何Observable对象(或者元素)上添加监听器，监听器将会在组件...

向任何Observable对象(或者元素)上添加监听器，监听器将会在组件销毁时被自动删除。
用法：

myGridPanel.mon(myGridPanel.getSelectionModel(), 'selectionchange', handleSelectionChange, null, {buffer: 50});

or:

myGridPanel.mon(myGridPanel.getSelectionModel(), {
    selectionchange: handleSelectionChange,
    buffer: 50
});
参数:
  • item : Observable|Element
    需要添加listener/listeners的项目。
  • ename : Object|String
    事件名，或者一个包含事件名属性的对象。
  • fn : Function
    (可选) 如果 ename 参数是一个事件名，此参数为处理函数。
  • scope : Object
    (可选)如果 ename 参数是一个事件名称，此参数是作用域 ( this 引用)，监听函数将会在此作用域中被执行。
  • opt : Object
    (可选)如果 ename 参数是一个事件名称， 此参数是 addListener 配置项。
返回值:
  • void
Component
mun ( Observable|Element item , Object|String ename , Function fn , Object scope ) : void
删除通过mon 方法添加的监听器。
删除通过mon 方法添加的监听器。
参数:
  • item : Observable|Element
    需要删除listener/listeners的项目。
  • ename : Object|String
    事件名称，或者一个包含事件名称属性的对象。
  • fn : Function
    (可选)如果 ename 参数是一个事件名称，此参数是一个处理函数。
  • scope : Object
    (可选)如果 ename 参数是一个事件名称，此参数是作用域 ( this 引用)，监听函数将会在此作用域中被执行。
返回值:
  • void
Component
nextSibling () : Ext.Component
返回所属容器中的下一个组件
返回所属容器中的下一个组件
参数:
  • 无。
返回值:
  • Ext.Component
Component
on( String eventName, Function handler, [Object scope], [Object options] ) : void
给对象添加事件处理器 (addListener的简写形式)
给对象添加事件处理器 (addListener的简写形式。)
参数:
  • eventName : String
    监听的事件类型
  • handler : Function
    事件调用的方法
  • scope : Object
    （可选）处理方法执行时的作用域 (this 的引用)。 如果被忽略。默认为触发事件的对象。
  • options : Object
    可选 包含处理器配置的对象。
返回值:
  • void
Observable
previousSibling () : Ext.Component
返回所属容器中的前一个组件
返回所属容器中的前一个组件
参数:
  • 无。
返回值:
  • Ext.Component
Component
purgeListeners() : void
移除对象上所有的监听器
移除对象上所有的监听器
参数:
  • 无。
返回值:
  • void
Observable
relayEvents( Object o, Array events ) : void
从指定的Observable上传递选择的事件就好像被当前对象触发一样。
从指定的Observable上传递选择的事件就好像被当前对象触发一样。
参数:
  • o : Object
    该Observable上的事件被当前对象传递。
  • events : Array
    传递的数组名。
返回值:
  • void
Observable
removeClass ( string cls ) : Ext.Component
从组件底层的元素上删除一个CSS类。
从组件底层的元素上删除一个CSS类。
参数:
  • cls : string
    需要移除的CSS类名
返回值:
  • Ext.Component
    this
Component
removeListener( String eventName, Function handler, [Object scope] ) : void
删除一个事件处理器。
删除一个事件处理器。
参数:
  • eventName : String
    处理器关联的事件类型。
  • handler : Function
    移除的处理器。 这应该是传递到addListener里的方法的引用。
  • scope : Object
    （可选）处理器指定的初始作用域。
返回值:
  • void
Observable
render ( [ Element/HTMLElement/String container ], [ String/Number position ] ) : void
在传递进来的HTML元素中渲染当前组件。...

在传递进来的HTML元素中渲染当前组件。

如果你正在使用一个Container 对象放置当前组件，那么请不要使用render方法。

当容器第一次被渲染时，它的子组件将会被容器的 layout 管理器渲染。

某些布局管理器允许动态添加子组件。它们包括 Ext.layout.CardLayout, Ext.layout.AnchorLayout, Ext.layout.FormLayout, Ext.layout.TableLayout。

当一个新的子组件被添加时，如果容器已经被渲染了， 你可能需要调用容器的 doLayout 方法来刷新视图，它将导致所有没有被渲染的子组件进行渲染操作。 此操作是必须的，这样你可以添加多个子组件而只刷新一次layout。

当创建复杂的UI时，非常重要的一点是，请记住调整子项目的尺寸和位置是容器的 layout 管理器的职责。 如果你希望子项目的尺寸对用户交互作出反应， 你必须为容器配置一个布局管理器，它将创建和管理你心里想要的那种布局。

忽略容器的layout 配置意味着将会使用一个基本的布局管理器，它除了按次序把子组件 渲染到容器中之外什么事情都不做。 这种情况下，任何尺寸和位置的调整操作都不会发生。

参数:
  • container : Element/HTMLElement/String
    (可选) 需要在其中渲染当前组件的元素。 如果它是从一个已存在的标签中创建的，此参数应该被忽略。
  • position : String/Number
    (可选) 容器中的一个元素ID或者一个DOM节点索引， 当前组件将会被插入到它前面 (默认append到容器的尾部)
返回值:
  • void
Component
resumeEvents() : void
重新开始触发事件。(参见suspendEvents) 如果事件以queueSuspended参数被挂起，则在事件被挂起时 ...
重新开始触发事件。(参见 suspendEvents) 如果事件以queueSuspended 参数被挂起，则在事件被挂起时触发的事件会被传递到所有的监听器上
参数:
  • 无。
返回值:
  • void
Observable
setDisabled ( Boolean disabled ) : Ext.Component
工具函数，使用布尔值设置有效/无效(disabled/enabled )。
工具函数，使用布尔值设置有效/无效(disabled/enabled )。
参数:
  • disabled : Boolean
返回值:
  • Ext.Component
    this
Component
setHandler ( Function handler , Object scope ) : void
设置处理当前项单击事件的处理器 (等价于传递到 handler 配置属性)....
设置处理当前项单击事件的处理器 (等价于传递到 handler 配置属性)。 如果存在一个已经注册的处理器，它将会被注销。
参数:
  • handler : Function
    点击时调用的方法
  • scope : Object
    传递给处理器的作用域，默认为当前菜单选项。
返回值:
  • void
BaseItem
setIconClass ( String cls ) : void
设置应用到项目图标元素的CSS样式
设置应用到项目图标元素的CSS样式
参数:
  • cls : String
    The CSS class to apply
返回值:
  • void
Item
setText ( String text ) : void
设置显示在当前菜单项中的文本
设置显示在当前菜单项中的文本
参数:
  • text : String
    显示的文本
返回值:
  • void
Item
setVisible ( Boolean visible ) : Ext.Component
工具方法，通过使用布尔值隐藏或者显示当前组件。
工具方法，通过使用布尔值隐藏或者显示当前组件。
参数:
  • visible : Boolean
    true时显示，false时隐藏
返回值:
  • Ext.Component
    this
Component
show () : Ext.Component
显示当前组件。监听' beforeshow' 事件，返回 false 取消显示组件...
显示当前组件。监听' beforeshow' 事件，返回 false 取消显示组件。在显示组件之后触发' show' 事件。
参数:
  • 无。
返回值:
  • Ext.Component
    this
Component
suspendEvents( Boolean queueSuspended ) : void
暂停触发所有的事件。 (参看resumeEvents)
暂停触发所有的事件。（参看 resumeEvents)
参数:
  • queueSuspended : Boolean
    如果传递为true则排列好暂停的事件使得在调用 resumeEvents 后再触发它们，而不是抛弃所有暂停的事件。
返回值:
  • void
Observable
un( String eventName, Function handler, [Object scope] ) : void
删除一个事件处理器(removeListener方法的简写形式)
删除一个事件处理器(removeListener方法的简写形式。)
参数:
  • eventName : String
    处理器关联的事件类型
  • handler : Function
    被删除的处理器 这应该是传入 addListener 中的方法的引用。
  • scope : Object
    （可选）为处理器指定的初始作用域。
返回值:
  • void
Observable
update ( Mixed htmlOrData , [ Boolean loadScripts ], [ Function callback ] ) : void
刷新组件的内部区域。
刷新组件的内部区域。
参数:
  • htmlOrData : Mixed
    如果已经通过tpl为当前组件配置了一个模板，那么 将会使用此参数来装配模板。 如果没有为当前组件配置模板，组件的内容区域将会通过Ext.Element 进行刷新。
  • loadScripts : Boolean
    (可选)只用在使用html配置时此参数才合法。默认为false。
  • callback : Function
    (可选)只用在使用html配置时此参数才合法。 当脚本加载完成时回调函数才被执行。
返回值:
  • void
Component

公共事件

Event Defined By
activate : ( Ext.menu.BaseItem this )
该项目被激活为当前活动项时触发
该项目被激活为当前活动项时触发
监听器将会以如下的参数格式调用：
  • this : Ext.menu.BaseItem
BaseItem
added : ( Ext.Component this , Ext.Container ownerCt , number index )
当一个组件被添加到一个Ext.Container时触发
当一个组件被添加到一个Ext.Container时触发
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • ownerCt : Ext.Container
    用于组件的容器
  • index : number
    添加组件的位置
Component
afterrender : ( Ext.Component this )
在组件渲染完成之后触发...

在组件渲染完成之后触发。

afterrender事件在当前组件被rendered 结束之后、在为组件定义的所有afterRender方法执行之后 触发，并且，如果有stateful， 也在状态被保存之后才触发。

监听器将会以如下参数格式被调用:
  • this : Ext.Component
Component
beforedestroy : ( Ext.Component this )
在组件 destroyed 之前触发。 在事件监听器中返回false以停止 destroy 操作。
在组件 destroyed 之前触发。 在事件监听器中返回false以停止 destroy 操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforehide : ( Ext.Component this )
在调用hide方法隐藏组件之前触发。 在事件监听器中返回false可以停止隐藏操作。
在调用hide方法隐藏组件之前触发。 在事件监听器中返回false可以停止隐藏操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforerender : ( Ext.Component this )
在组件被rendered 之前触发。 在事件监听器中返回false可以停止render 操作。
在组件被rendered 之前触发。 在事件监听器中返回false可以停止render 操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforeshow : ( Ext.Component this )
在调用show()方法现实组件之前触发。 事件处理函数返回false可以停止show。
在调用show 方法现实组件之前触发。 事件处理函数返回false可以停止show。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforestaterestore : ( Ext.Component this , Object state )
在组件状态恢复之前触发。返回false停止恢复状态操作。
在组件状态恢复之前触发。返回false停止恢复状态操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    StateProvider返回的状态哈希值。 如果没有禁止此事件，那么状态对象会被传递给applyState。 默认情况下，这样简单地把属性值拷贝到当前组件中。 可以覆盖此方法以提供自定的状态恢复操作。
Component
beforestatesave : ( Ext.Component this , Object state )
在组件状态被保存到配置的状态提供者之前触发。 返回false可以停止保存。
在组件状态被保存到配置的状态提供者之前触发。 返回false可以停止保存。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    状态值哈希。 这由在组件上调用getState() 方法决定。 此方法必须由开发者提供，返回是否需要对状态进行描述，默认情况下， Ext.Component有一个空实现。
Component
click : ( Ext.menu.BaseItem this , Ext.EventObject e )
当前选项被点击时触发
当前选项被点击时触发
监听器将会以如下的参数格式调用:
  • this : Ext.menu.BaseItem
  • e : Ext.EventObject
BaseItem
deactivate : ( Ext.menu.BaseItem this )
当此项目被设置为非当前活动项时触发
当此项目被设置为非当前活动项时触发
监听器将会以如下的参数格式调用:
  • this : Ext.menu.BaseItem
BaseItem
destroy : ( Ext.Component this )
在组件被销毁之后触发。
在组件被destroyed之后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
disable : ( Ext.Component this )
在组件被设置为无效状态后触发。
在组件被设置为无效状态后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
enable : ( Ext.Component this )
当组件被设置为有效(enabled)之后触发。
当组件被设置为有效(enabled)之后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
hide : ( Ext.Component this )
在组件被隐藏之后触发。 当调用hide 方法隐藏组件之后触发。
在组件被隐藏之后触发。 当调用hide 方法隐藏组件之后触发。
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
removed : ( Ext.Component this , Ext.Container ownerCt )
当一个组件被从Ext.Container容器中删除时触发
当一个组件被从Ext.Container容器中删除时触发
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • ownerCt : Ext.Container
    持有组件的容器
Component
render : ( Ext.Component this )
在组件被渲染之后触发。
在组件被 rendered(渲染) 之后触发。
监听器将以如下的参数格式被调用:
  • this : Ext.Component
Component
show : ( Ext.Component this )
在调用show 方法显示组件之后触发。
在调用show 方法显示组件之后触发。
监听器将会用如下的参数格式被调用:
  • this : Ext.Component
Component
staterestore : ( Ext.Component this , Object state )
组件状态被存储之后触发。
组件状态被存储之后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    StateProvider返回的状态哈希值。 如果没有禁止此事件，那么状态对象会被传递给applyState。 默认情况下，这样简单地把属性值拷贝到当前组件中。 可以覆盖此方法以提供自定的状态恢复操作。
Component
statesave : ( Ext.Component this , Object state )
在组件状态被保存到所配置的状态提供者之后触发。
在组件状态被保存到所配置的状态提供者之后触发。
监听器将会用如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    状态值hash。 这是由在足见上调用getState() 方法决定的。 开发者必须提供此方法以返回是否需要恢复状态，默认情况下， Ext.Component有一个空实现。
Component


Observable
    Component
      BoxComponent
        Container
          Menu

Class Ext.menu.Menu

包: | Ext.menu
定义类的文件: | Menu.js
类: | Menu
子类: | ColorMenu, DateMenu
继承自: | Container

一个菜单对象。这是一个容器，你可以把所有其它的菜单项添加到其中。 当你需要一个基于其它组件的特定菜单时，Menu也可以用作一个基类。 (例如 Ext.menu.DateMenu )。

菜单既可以包含 menu items（菜单项）, 也可以是自己创建的 Component （组件）。

为了区分自己创建的 Component (组件)与其他 menu items（菜单项），自己的组件默认的 iconCls: 'no-icon'(图标样式)。 这个特别的图标缩进用来分割组件与菜单项。 可参考 Ext.form.ComboBox。 getListParent 的例子。

在默认情况下，菜单是绝对定位，组件是浮动定位的。 当才当的配置项 floating:false ,菜单将会被当作子容器使用。

配置项

Config Options Defined By
activeItem : String/Number
一个string型的组件id，或者组件的数字索引， 它需要...
一个string型的组件id，或者组件的数字索引， 它需要在渲染时在容器内的布局管理器中被初始化并激活。 例如：activeItem: 'item-1' 或者 activeItem: 0 ( 索引 0 =容器子项目集合中的第一个元素)。 activeItem仅仅适用于一次显示一个组件的布局模式(比如 Ext.layout.AccordionLayout, Ext.layout.CardLayout 和 Ext.layout.FitLayout)。 与 Ext.layout.ContainerLayout.activeItem 相关。
Container
allowDomMove : Boolean
在渲染时组件是否可以移动Dom节点(默认为true)。
Component
allowOtherMenus : Boolean
为true时，将允许同一时刻显示多个菜单 （默认为false）。
Menu
anchor : String
注: 这个配置只用于该组件被包含在一个已使用AnchorLayout...

注: 这个配置只用于该组件被包含在一个已使用 AnchorLayout (或者其子类)配置的Container时。 基于布局管理器，例如：

  • Ext.form.FormPanel
  • 指定 layout: 'anchor' // or 'form', or 'absolute'

参见 Ext.layout.AnchorLayout. anchor 。

BoxComponent
applyTo : Mixed
指定一个元素的id、一个DOM元素或者一个已经存在并被渲染到DIV中的元素，此DIV已经被...

指定一个元素的id、一个DOM元素或者一个已经存在并被渲染到DIV中的元素，此DIV已经被 渲染到document中，并且为当前组件指定了一些结构化的标签。

  • 描述 :
      当使用了 applyTo， 在主元素中也可以用id或者CSS类名来指定组件的托管部分， 并且，如果可以的话，创建的组件可能也会试图在那个标签中创建它的子组件。
  • 注意 :
      当使用此配置项时，无需调用render()方法。
      如果指定了applyTo属性，任何传递给 renderTo 的值都会被忽略，并且目标元素的父节点将会自动被用作组件的容器。
Component
autoDestroy : Boolean
如果为true，容器将自动销毁任何从其中被删除的组件， 否则...
如果为true，容器将自动销毁任何从其中被删除的组件， 否则必须手动处理销毁操作(默认为true)。
Container
autoEl : Mixed
一个表签名或者一个 DomHelper 描述，用来创建 Element ，它将封装当前组件...

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

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

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

{
    xtype: 'box',
    autoEl: {
        tag: 'img',
        src: 'http://www.example.com/example.jpg'

    }
}, {
    xtype: 'box',
    autoEl: {
        tag: 'blockquote',
        html: 'autoEl is cool!'
    }
}, {
    xtype: 'container',
    autoEl: 'ul',
    cls: 'ux-unordered-list',
    items: {
        xtype: 'box',
        autoEl: 'li',
        html: 'First list item'
    }
}
Component
autoHeight : Boolean
如果值为true，height配置项为'auto'，否则值为false的话使用固定的高度...

如果值为true，height配置项为'auto'，否则值为false的话使用固定的高度， 或者可以由其父类容器 layout manager来控制。(默认值为 false)。

注: 虽然很多组件继承了这个配置选项，但不是所有这些组件的自适应高度配置都会像期望的那样起作用。 设置autoHeight：值为true时，浏览器将根据元素的内容自动设置高度，这将意味着Ext不会去管理高度。

如果是由浏览器来管理高度，需要注意的是，通过浏览器进行调整的结构组件内不能被发现， 因此宽度的变化可能导致需要进行同步处理元素的高度。 例如：

var w = new Ext.Window({
    title: 'Window',
    width: 600,
    autoHeight: true,
    items: {
        title: 'Collapse Me',
        height: 400,
        collapsible: true,
        border: false,
        listeners: {
            beforecollapse: function() {
                w.el.shadow.hide();
            },
            beforeexpand: function() {
                w.el.shadow.hide();
            },
            collapse: function() {
                w.syncShadow();
            },
            expand: function() {
                w.syncShadow();
            }
        }
    }
}).show();
BoxComponent
autoScroll : Boolean
如果值为true，将会在该元素上使用overflow:'auto'配置，并且在必要的时候...
如果值为true，将会在该元素上使用overflow:'auto'配置，并且在必要的时候自动显示滚动条，否则，溢出部分的组件都会被切除(默认值为 false)。
BoxComponent
autoShow : Boolean
如果组件需要检测隐藏CSS属性(如 'x-hidden' 或者 'x-hide-display')并且在渲染时删除...
如果组件需要检测隐藏CSS属性(如 'x-hidden' 或者 'x-hide-display')并且在渲染时删除它们 (默认为false)，设置此值为true。
Component
autoWidth : Boolean
如果为true，使用width:'auto'配置，否则使用固定的宽度...

如果为true，使用width:'auto'配置，否则使用固定的宽度，或者可以由其父类容器的layout manager来控制。(默认值为 false)。

注: 虽然很多组件继承了这个配置选项，但不是所有这些组件的自适应宽度配置都会像期望的那样起作用。 设置autoWidth：值为true时，浏览器将根据元素的内容自动设置宽度，这将意味着Ext不会去管理宽度。

如果是由浏览器来管理宽度，需要注意的是，通过浏览器进行调整的结构组件内不能被发现，因此宽度的变化可能导致需要进行同步处理元素的宽度。 例如，在这个元素的目标是：

<div id='grid-container' style='margin-left:25%;width:50%'></div>
当浏览器窗口改变时，渲染后的Panel必须监听浏览器窗口大小的变化，以便通知子项，浏览器改变了其宽度：

var myPanel = new Ext.Panel({
    renderTo: 'grid-container',
    monitorResize: true, // relay on browser resize
    title: 'Panel',
    height: 400,
    autoWidth: true,
    layout: 'hbox',
    layoutConfig: {
        align: 'stretch'
    },
    defaults: {
        flex: 1
    },
    items: [{
        title: 'Box 1',
    }, {
        title: 'Box 2'
    }, {
        title: 'Box 3'
    }],
});
BoxComponent
boxMaxHeight : Number
设置组件的最大高度值...

设置组件的最大高度值。

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

BoxComponent
boxMaxWidth : Number
设置组件的最大宽度值...

设置组件的最大宽度值。

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

BoxComponent
boxMinHeight : Number
设置组件的最小高度值...

设置组件的最小高度值。

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

BoxComponent
boxMinWidth : Number
设置组件的最小宽度值...

设置组件的最小宽度值。

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

BoxComponent
bubbleEvents : Array
一个事件数组，当这些事件被触发时，将会被冒泡到所有父容器中。参见....

一个事件数组，当这些事件被触发时，将会被冒泡到所有父容器中。参见 Ext.util.Observable.enableBubble。 默认为 []。

Container
bufferResize : Boolean/Number
当设置为true时(50毫秒)或者是一个毫秒数值， 指定给当前容器的布...
当设置为true时(50毫秒)或者是一个毫秒数值， 指定给当前容器的布局管理器将会缓存它计算出的频率，然后 对组件进行一次重新布局操作。 对于重量级的容器，或者拥有大量子组件的容器来说，这非常有用， 因为频繁进行布局是非常昂贵的。 默认为 50 .
Container
clearCls : String
应用到特殊的clearing div的CSS类， 这个clearing div直接渲染到每个form field的包装器后面...

应用到特殊的clearing div的CSS类， 这个clearing div直接渲染到每个form field的包装器后面，以提供 清除field的功能(默认为 'x-form-clear-left')。

注意: 只有在当前组件被渲染到一个使用FormLayout 布局(例如 Ext.form.FormPanel 或者指定 layout:'form')的 容器中、或者是指定了一个fieldLabel 、或者指定isFormField=true 时此配置才有效。

另请参见 Ext.layout.FormLayout. fieldTpl。

Component
cls : String
一个可选的额外CSS类，它将被添加到当前组件的元素上(默认为'')...
一个可选的额外CSS类，它将被添加到当前组件的元素上(默认为'')。 此属性对于在组件上，或者它的任何使用标准CSS规则的孩子节点上， 添加定制的样式非常有用。
Component
contentEl : String
(可选)指定一个已存在的HTML元素，或者一个已存在HTML元素的...

(可选)指定一个已存在的HTML元素，或者一个已存在HTML元素的 id ，它们将被用作当前组件的内容。

  • 描述 :
    此配置选项被用来将一个已存在的HTML元素 插入到一个新组件(在组件渲染之后它简单地移动DOM元素) 的layout元素中，使它成为该组件的内容。
  • 注意 :
    指定的HTML元素将被append到组件的layout元素中， 在所有配置的 HTML 被插入之后， 并且，这样的话，在render事件 被触发时，document中将不再包含此元素。
    指定的HTML元素将不会参与组件所有可能使用的 layout 过程(译者注：指这些HTML元素 不会参与布局操作)。 它仅是HTML而已。布局操作实在孩子 items 上进行的。
    添加 x-hidden 或者 x-hide-display CSS类，以防在内容渲染到panel时发生闪烁。
Component
ctCls : String
一个可选的外部CSS样式，添加到这个组件的容器(默认值为 '')。 这个方法对于使用标准的CSS规则...

一个可选的外部CSS样式，添加到这个组件的容器(默认值为 '')。 这个方法对于使用标准的CSS规则，为组件或它的任何一个子组件添加特定的样式非常有用。 参见 Ext.layout.ContainerLayout和 extraCls 。

注意: ctCls 默认为 ''期望如下的类，它们将指定一个默认值:

  • Box Layout : 'x-box-layout-ct'
使用一个额外的CSS类配置以上的Class，它是append到默认对象上的。例如， 对于BoxLayout (Hbox and Vbox):
                                ctCls: 'x-box-layout-ct custom-class'

Component
data : Mixed
初始化数据集，它将被应用到 tpl 上以刷新组件的内容区域。
Component
defaultAlign : String
此菜单默认的 Ext.Element.alignTo 锚定位置值，与前一个项目的位置有关 (默认值为......
此菜单默认的 Ext.Element.alignTo 锚定位置值，与前一个项目的位置有关(默认值为 "tl-bl?")。
Menu
defaultOffsets : Array
根据指定的[x, y]坐标去更改菜单默认弹出的位置......
在调整菜单的 defaultAlign 配置选项后，根据指定的[x, y]坐标去更改菜单默认弹出的位置。 默认 [0, 0].
Menu
defaultType : String
当一个子项目通过一个原生的配置对象 而不是一个组件的实例指定时。...

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

默认为 'panel' ， Ext.menu.Menu 默认为 'menuitem' ， Ext.Toolbar 和 Ext.ButtonGroup 默认为 'button' 。

Container
defaults : Object
个配置对象，要么通过items配置项，或者通过add方法， 被应用到当前容器中的所有项目......
一个配置对象，要么通过 items配置项， 或者通过add add 方法， 被应用到当前容器中的所有项目。defaults配置可以包含任何数量的键/值对属性， 它们将被添加到每个项目中，对于菜单中的所有项目类型来说，它们必须是合法的。
Menu
disabled : Boolean
当前组件处于无效状态时为true。 Read-only.
Component
disabledClass : String
当组件处于无效状态时添加到组件上的CSS类(默认为 'x-item-disabled')。
Component
enableScrolling : Boolean
当为true时，菜单将会在菜单太长的时候显示滚动条(默认为true)。
Menu
fieldLabel : String
紧靠此field显示的标签文本(默认值为 '')。注意...

紧靠此field显示的标签文本(默认值为 '')。

注意:只有在当前组件被渲染到一个使用FormLayout 的容器中时，此配置才有效。 (例如 Ext.form.FormPanel 或 指定 layout:'form')。

另请参见 hideLabel 、 Ext.layout.FormLayout和 fieldTpl。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Name'
    }]
});
Component
flex : Number
注: 这个配置只用于该组件被包含在一个已使用BoxLayout配置的Container中时...

注: 这个配置只用于该组件被包含在一个已使用BoxLayout配置的Container中时。通过计算每一个子组件的flex值所占全部flex值之和的比例，来决定子组件的宽(HBoxLayout)高(VBoxlayout)。 任何子项的 flex = 0 或 flex = undefined 将不被设置(初始值大小将不被改变)。

BoxComponent
floating : Boolean
在默认情况下，一个菜单配置中，floating:true 将会被一个Ext.Layer 所渲染(一个绝对定位，浮动......)

在默认情况下，一个菜单配置中， floating:true 将会被一个 Ext.Layer (一个绝对定位，浮动的组成部分中zindex=15000)所渲染。 如果配置项是 floating:false , 菜单可作为子菜单的另一个容器，而不是一个自由浮动的 Layer（层）。

Menu
forceLayout : Boolean
如果此值为true，容器将将强制初始化一次布局操作...
如果此值为true，容器将将强制初始化一次布局操作， 即使容器处于隐藏或者折叠状态。 此配置项对于在一个折叠或者隐藏的容器中强制渲染非常有用 (默认为false)。
Container
height : Number
组件的高度(默认值为 auto)。注:如果想使用百分比的方式...
组件的高度(默认值为 auto)。注:如果想使用百分比的方式来设置值，请查看 Ext.Component.anchor。
BoxComponent
hidden : Boolean
如果当前组件处于隐藏状态，此值为true。Read-only。
Component
hideBorders : Boolean
设置为true可以隐藏所包含的每个组件的边框， false为遵照组件现有的边框设置...
设置为true可以隐藏所包含的每个组件的边框， false为遵照组件现有的边框设置(默认为 false)。
Container
hideLabel : Boolean
true时完全隐藏label元素 ( label 和 separator)。 默认为 false。 默认情况下，即使你不指定...

true时完全隐藏label元素 ( label 和 separator)。 默认为 false。 默认情况下，即使你不指定 fieldLabel 它的空间仍然会被保留，这样这块区域会与其它确实拥有label的区域位于同一排。 讲此值设置为 true 将导致此区域不再保留此空间。

注意: 参见 clearCls 的注释。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield'
        hideLabel: true
    }]
});
Component
hideMode : String
组件如何隐藏，支持的值有： 'visibility' (css visibility), 'offsets' (位置偏移量为负值) 和...

组件如何隐藏，支持的值有： 'visibility' (css visibility), 'offsets' (位置偏移量为负值) 和 'display' (css display).

注意:一般首选默认值 'display'，因为当组件第一次显示的时候它们会自动进行布局 (隐藏的时候不会调整尺寸)。

Component
hideParent : Boolean
此值为true时，当调用hide/show方法时，将会hide和show组件的容器...
此值为true时，当调用hide/show方法时，将会hide和show组件的容器；false时将会 hide和show组件自身(默认为false)。例如，这可以用作window上隐藏按钮的一种 快捷操作，通过设置此按钮的hideParent:true，然后把它添加到window上。
Component
html : String/Object
一个HTML片段，或者一个 DomHelper 描述，用作layout元素的内容(默认为'')。...
一个HTML片段，或者一个 DomHelper 描述，用作layout元素的内容(默认为'')。 这个HTML内容在组件渲染之后才被添加，所以在 render 出发的时候，document中尚未包含此HTML。 但是这个内容将会在所有配置的 contentEl 之前被插入到body标签中。
Component
id : String
当前组件唯一的id(默认为auto-assigned id)...

当前组件唯一的id(默认为auto-assigned id)。 如果你需要在以后访问组件，而又没有一个有效的组件对象引用，那么你需要指定一个 id( 也就是，使用Ext. getCmp方法 )。

注意，此id也将被用作组件底层HTML标签的id，这些标签被渲染到页面中。 这将允许你编写基于id的CSS规则，以独立地描述指定的实例；并且，也可以通过 组件父标签的id选中子元素。

注意:为了避免与唯一的id 产生重复， 请参见 itemId 和 ref 。

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

Component
ignoreParentClicks : Boolean
设置为true时，将忽略在任何父菜单项(显示子菜单)上的点击操作， 这样在点击......
设置为true时，将忽略在任何父菜单项(显示子菜单)上的点击操作， 这样在点击父菜单项时子菜单不会隐藏掉(默认值为 false)。
Menu
itemCls : String
注意: 只有在当前组件被渲染到一个使用FormLayout 布局的 容器中时此配置才有效...

注意: 只有在当前组件被渲染到一个使用FormLayout 布局的 容器中时此配置才有效。 (例如Ext.form.FormPanel 或者指定 layout:'form')。

一个附加的CSS类，应用到div上，包装当前field的表单元素。 如果提供了此参数， field级上的itemCls将会覆盖 container级上提供的 默认itemCls。 为itemCls指定的值将会被添加默认的 类('x-form-item')。

既然它被应用到项目的包装器上(参见 Ext.layout.FormLayout。 fieldTpl)， 它将允许你编写能应用到此field、label(如果有指定)、或者field内部任何其它元素的标准CSS规则。

注意: 参考 fieldLabel的注释。 .

示例用法:

// Apply a style to the field's label:
<style>
    .required .x-form-item-label {font-weight:bold;color:red;}
</style>

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Name',
        itemCls: 'required' //this label will be styled
    },{
        xtype: 'textfield',
        fieldLabel: 'Favorite Color'
    }]
});
Component
itemId : String
当没有可利用的对象引用时，itemId可以作为第二选择，用来获得一个组件的引用， 代替 ...

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

var c = new Ext.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'); // 与 Ext.getCmp()不同

p2 = p1.ownerCt.getComponent('p2'); // 通过兄弟对象获得引用

另请参见 id 和 ref 。

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

Component
items : Mixed
一系列的项目将被添加到菜单。菜单包含 menu items（子菜单）,或其他 Component 组件。
Menu
labelSeparator : String
每个fieldLabel 文本后面现实的分隔符。 此属性可以在多个层次上进行配置...

每个fieldLabel 文本后面现实的分隔符。 此属性可以在多个层次上进行配置。优先顺序为：

  • field / component level
  • container level
  • layout level (默认为冒号 ':')
如不需要为当前field的label显示分隔符，指定一个空字符串''即可。

注意:参见 clearCls 的注释。

另请参见 hideLabel 和 Ext.layout.FormLayout。 fieldTpl。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    layoutConfig: {
        labelSeparator: '~'   // layout config has lowest priority (defaults to ':')
    },
    labelSeparator: '>>',     // config at container level
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Field 1',
        labelSeparator: '...' // field/component level config supersedes others
    },{
        xtype: 'textfield',
        fieldLabel: 'Field 2' // labelSeparator will be '='

    }]
});
Component
labelStyle : String
一个CSS样式描述字符串，它将直接应用到当前field的label上...

一个CSS样式描述字符串，它将直接应用到当前field的label上。 如果有设置，默认为容器的labelStyle值(例如 Ext.layout.FormLayout.labelStyle , 或者 '')。

注意:参见 clearCls 的注释。

另请参见 hideLabel 和 Ext.layout.FormLayout. fieldTpl。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Name',
        labelStyle: 'font-weight:bold;'
    }]
});
Component
layout : String/Object
这个类指定了一个默认布局 (layout:'menu'). 如果有其他需求的话， 开发者可以......
这个类指定了一个默认布局 ( layout: 'menu' )。如果有其他需求的话，开发者 可以 重写这个类的配置选项。 可参考 Ext.Container.layout 。
Menu
layoutConfig : Object
这是一个配置对象，包含为 layout 指定的参数， 如果 layout 是作为一个 string 来指定的。

Container
listeners : Object
一个包含一个或多个事件处理器的配置对象，会在初始化的时候被添加到目标对象上...

一个包含一个或多个事件处理器的配置对象，会在初始化的时候被添加到目标对象上。 该配置对象应该是一个有效的监听器配置对象就像 addListener例子中指定的一样可一次附加多个处理器。

ExtJs Components上的DOM事件

一些 ExtJs Component 类导出时会选择一些DOM事件(例如 "click", "mouseover" 等等), 这通常只是在有额外的值可以被添加时发生。例如DataView类的 click事件会传递被点击的节点。也可以直接在Component的HTMLElementevent上访问DOM事件，但必需在Component被渲染后监听器才能添加到Element 上。可以按照以下步骤添加插件:

// 插件会用一个监听器配置对象进行配置。
//该组件会被添加到所有处理方法的参数列表上。
Ext.DomObserver = Ext.extend(Object, {
    constructor: function(config) {
        this.listeners = config.listeners ? config.listeners : config;
    },

    // 组件将自己传递进了插件的初始化方法里
    init: function(c) {
        var p, l = this.listeners;
        for (p in l) {
            if (Ext.isFunction(l[p])) {
                l[p] = this.createHandler(l[p], c);
            } else {
                l[p].fn = this.createHandler(l[p].fn, c);
            }
        }

        // 渲染后立即添加监听器到元素上
        c.render = c.render.createSequence(function() {
            var e = c.getEl();
            if (e) {
                e.on(l);
            }
        });
    },

    createHandler: function(fn, c) {
        return function(e) {
            fn.call(this, e, c);
        };
    }
});

var combo = new Ext.form.ComboBox({

    // 元素被点击后折叠
    plugins: [ new Ext.DomObserver({
        click: function(evt, comp) {
            comp.collapse();
        }
    })],
    store: myStore,
    typeAhead: true,
    mode: 'local',
    triggerAction: 'all'
});

Observable
margins : Object
注:此配置只用于该组件展现在一个使用BorderLayout...

注:此配置只用于该组件展现在一个使用BorderLayout 或 BoxLayout的两个子类之一作为布局的容器。

这个margins对象在该组件中的格式为：

{top: (top margin),right: (right margin),bottom: (bottom margin),left: (left margin)}

也可以是一个字符串，中间用空格分隔，margin值为数字。 把matches中每一个值的次序跟CSS中margin值的排列方式相对应：

  • 如果只有一个值，它适用于所有方面。
  • 如果有两个值，top和bottom的边框设置为第一个值，left和right设置为第二个值。
  • 如果有三个值，top设置为第一个值，left和right设置为第二个值，bottom设置为第三个值。
  • 如果有四个值，分别设置为top, right, bottom, left。

默认值:

{top:0, right:0, bottom:0, left:0}
BoxComponent
maxHeight : Number
菜单的最高高度。只适用于当enablesScrolling为true时使用 (默认为null)。
Menu
minWidth : Number
菜单最小宽度像素值 (默认值是 120)
Menu
monitorResize : Boolean
设置为true自动监测window的resize事件，以便处理所有对当前窗口尺寸 敏感的事情。...
设置为true自动监测window的resize事件，以便处理所有对当前窗口尺寸 敏感的事情。 典型地，通过选择一个 layout 来管理这个值，并且不应该手动设置它。
Container
overCls : String
一个可选的额外的CSS类，它将在鼠标移过元素时被添加到组件上...
一个可选的额外的CSS类，它将在鼠标移过元素时被添加到组件上，鼠标移出时 删除。(默认为'')。此属性对于在组件上，或者它的任何使用标准CSS规则的孩子节点上， 添加定制的'active' 或者 'hover'样式非常有用。
Component
pageX : Number
如果该组件被包含在一个指定位置的容器中，这个值表示页面级的x坐标值（译者注：在有滚动条的情况下这个值很有用）。
BoxComponent
pageY : Number
如果该组件被包含在一个指定位置的容器中，这个值表示页面级的y坐标值（译者注：在有滚动条的情况下这个值很有用）。
BoxComponent
plain : Boolean
如果为true就删除下拉菜单的左边分割线。 默认为 false。
Menu
plugins : Object/Array
一个对象或者一个对象数组，为组件提供特殊的功能 ...
一个对象或者一个对象数组，为组件提供特殊的功能。 对一个合法的插件唯一的要求是它含有一个init()方法， 能接收一个Ext.Component型的参数。 当组件被创建时，如果有可用的插件，组件将会调用每个插件的init方法， 并将自身的引用作为方法参数传递给它。然后，每个插件就可以调用方法或者响应组件上的事件， 就像需要的那样提供自己的功能。
Component
ptype : String
需要创建配置的ptype。 当传递一个配置对象给构造函数时...
需要创建配置的ptype。 当传递一个配置对象给构造函数时，此配置选项不会被使用。 只有在使用懒初始化的时候此配置项才会被使用， 此时Plugin不是 通过一个完整的实例组件，而是通过一个Component配置指定的。 在渲染时，将会查找ptype以决定创建何种类型的Plugin。

如果你创建自己的Plugin，你可以通过 Ext.ComponentMgr.registerPlugin 对它们进行注册，以便能利用懒初始化和渲染机制。
Component
ref : String
一个路径描述，与组件的 ownerCt 相关，它描述了把当前组件的命名引用放置到哪个父容器中去。...

一个路径描述，与组件的 ownerCt 相关，它描述了把当前组件的命名引用放置到哪个父容器中去。

祖先的坐标路径可以通过'/'字符进行分隔。 例如，将一个Toolbar Button的引用放入 拥有此Toolbar的Panel中:

var myGrid = new Ext.grid.EditorGridPanel({
    title: 'My EditorGridPanel',
    store: myStore,
    colModel: myColModel,
    tbar: [{
        text: 'Save',
        handler: saveChanges,
        disabled: true,
        ref: '../saveButton'
    }],
    listeners: {
        afteredit: function() {
//          The button reference is in the GridPanel
            myGrid.saveButton.enable();
        }
    }
});

在上面的代码中，如果 ref 是 'saveButton' ，那么引用将会被放置到Toolbar中。 ref 中的每个'/' 都会从组件的 ownerCt 向上移动一级。

另请参见 added 和 removed 事件。

Component
region : String
注: 此配置只用于该组件展现在一个布局为BorderLayout的容器中...

注: 此配置只用于该组件展现在一个布局为BorderLayout的容器中(例如指定layout:'border')。

详见Ext.layout.BorderLayout。

BoxComponent
renderTo : Mixed
该值可以是一个节点的id、一个DOM节点或者一个已存在的元素...

该值可以是一个节点的id、一个DOM节点或者一个已存在的元素， 组件将会被渲染到其中。

  • 注意 :
      如果组件不是一个Container 的子项目时， 不要使用此选项。 渲染和管理它的子项目是一个Container 的layout manager的责任。
      当使用此配置项时，无需调用render()方法。

另请参见 render 。

Component
resizeEvent : String
在布局中进行尺寸调整需要监听的事件。 默认为 'resize' 。
Container
scrollIncrement : Number
菜单达到某一值时出现滚动条. 只有在enableScrolling为true时才可以使用 (默认值为24)。
Menu
shadow : Boolean/String
当值为 true 或者 "sides" 时为默认效果，"frame" 时为4方向有阴影......
当值为 true 或者 "sides" 时为默认效果，"frame" 时为4方向有阴影， "drop" 时为右下角有阴影（默认为 "sides"）。
Menu
showSeparator : Boolean
当为true时，显示分割栏的图标(默认为true)。
Menu
stateEvents : Array
一个事件数组，当它们被触发时，组件需要保存自己的状态(默认值为 none)...

一个事件数组，当它们被触发时，组件需要保存自己的状态(默认值为 none)。 它们可以是任何该组件支持的事件类型，包括浏览器事件和 自定义事件(例如['click', 'customerchange'])。

对于保存和恢复组件状态的详细解释，参见 stateful

Component
stateId : String
为该组件指定的唯一的id值，它被用作管理组件状态的目的...
为该组件指定的唯一的id值，它被用作管理组件状态的目的。 (如果设定了id，默认值为组件自己的id，否则，如果组件使用自动生成的id，此值为null)。

对于保存和反解析组件状态的解释，参见 stateful 。

Component
stateful : Boolean
一个标志参数，它将引起组件在启动时尝试从一个保存的状态中恢复内部状态参数...

一个标志参数，它将引起组件在启动时尝试从一个保存的状态中恢复内部状态参数。 组件必须要么拥有一个 stateId 或者 id ，它们被分配给需要被管理的状态属性。 在跨页面加载时，不保证自动生成的id属性的稳定性， 并且，不能依赖此id来保存和恢复一个组件的相同状态。

为了保存状态的操作能够工作，状态管理器的提供者必须 被设置成一个Ext.state.Provider 的实现类，它覆盖了set 和get 方法，以便保存和恢复name/value对。 有一个内置的Ext.state.CookieProvider 可用。

为当前页面设置状态提供者:

Ext.state.Manager.setProvider(new Ext.state.CookieProvider({
    expires: new Date(new Date().getTime()+(1000*60*60*24*7)), //7 days from now
}));

当 stateEvents 配置项中其中之一的事件被触发时， 一个状态可保存的组件将试图保存其状态。

保存状态时，一个可保存状态的组件首先需要通过调用 getState 方法来序列化它的状态。 默认情况下，此函数什么事都不做。 开发者必须提供一个实现，返回一个hash对象，它描述了组件可恢复的状态。

getState方法产生的值将会传递给 Ext.state.Manager.set 方法，它使用配置的 Ext.state.Provider 来保存对象，以组件的 stateId 为key，或者，如果此值（指stateId）没有指定时， 使用它的 id 作为key。

在进行构造时，一个可保存状态的组件试图通过调用 Ext.state.Manager.get方法来 恢复它的状态，传递 stateId 或者，如果此值（指stateId）没有指定时， 使用它的 id 作为参数。

结果对象被传递给 applyState 。 applyState 的默认实现只是简单地把属性拷贝到对象中， 但是开发者可以覆盖此方法以支持更多行为。

通过向 beforestaterestore, staterestore, beforestatesave 和 statesave 事件上绑定监听器，你可以在保存和恢复状态时进行额外的处理。

Component
style : String
被添加到组件元素的特定样式。 必须是按照...
被添加到组件元素的特定样式。 必须是按照 Ext.Element.applyStyles 类指定格式的合法参数值。

new Ext.Panel({
    title: 'Some Title',
    renderTo: Ext.getBody(),
    width: 400, height: 300,
    layout: 'form',
    items: [{
        xtype: 'textarea',
        style: {
            width: '95%',
            marginBottom: '10px'
        }
    },
        new Ext.Button({
            text: 'Send',
            minWidth: '100',
            style: {
                marginBottom: '10px'
            }
        })
    ]
});
Component
subMenuAlign : String
应用到当前菜单的子菜单的 Ext.Element.alignTo 锚定位置值（默认值为 "tl-tr?"）。
Menu
tabTip : String
注: 这个配置只用于当该组件作为TabPanel的一个子项目时使用...

注: 这个配置只用于当该组件作为TabPanel的一个子项目时使用。

一个String类型的innerHTML(支持html标签)，当鼠标放在该选项上的时，显示一个tooltip。为了tips能够被渲染，Ext.QuickTips.init()必须被提前调用。
BoxComponent
tpl : Mixed
一个 Ext.Template , Ext.XTemplate 或者一个用来形成一个Ext.XTemplate的字符串数组...
一个 Ext.Template , Ext.XTemplate 或者一个用来形成一个Ext.XTemplate的字符串数组。 与 data 和 tplWriteMode 配置项协同使用。
Component
tplWriteMode : String
刷新组件的内容区域时使用的Ext.(X)Template方式。 默认为'overwrite' (参见 Ext.XTemplate.overwrite )。
刷新组件的内容区域时使用的Ext.(X)Template方式。 默认为'overwrite' (参见 Ext.XTemplate.overwrite )。
Component
width : Number
组件的宽度(默认值为 auto)。注:如果想使用百分比的方式...
组件的宽度(默认值为 auto)。注:如果想使用百分比的方式来设置值，请查看 Ext.Component.anchor。
BoxComponent
x : Number
如果被包含在一个指定位置的容器中，这个值表示x(left)坐标值。
BoxComponent
xtype : String
需要创建配置的xtype。 当传递一个配置对象给构造函数时...
需要创建配置的xtype。 当传递一个配置对象给构造函数时，此配置选项不会被使用。 只有在使用懒初始化的时候此配置项才会被使用，此时容器的子项目不是 通过一个完整的实例组件，而是通过一个Component配置指定的。 在渲染时，将会查找xtype以决定创建何种类型的子组件。

预定义的xtype列表如下： here。

如果你继承Component创建你自己的组件，你需要使用Ext.ComponentMgr.registerType 对它们进行注册，以便利用懒初始化和渲染机制。
Component
y : Number
如果被包含在一个指定位置的容器中，这个值表示y(top)坐标值。
BoxComponent
zIndex : Number
zIndex时，使用的菜单是浮动的。
Menu

公共属性

Property Defined By
disabled : Boolean
当前组件处于无效状态时为true。 Read-only.
Component
el : Ext.Element
封装了当前组件的Ext.Element。 Read-only。通常情况下，这将是一个<DIV>元素，它由此类的...

封装了当前组件的Ext.Element。 Read-only。

通常情况下，这将是一个<DIV>元素，它由此类的 onRender方法创建，但是它可以通过使用 autoEl 配置项进行覆盖。

注意: 直到组件渲染完成此元素都将处于无效状态。

如需向当前组件的 DOM事件(而不是当前组件自己的Observable事件)添加监听器， 更多建议，参见 listeners 配置项，或者直接使用一个render监听器:

new Ext.Panel({
    title: 'The Clickable Panel',
    listeners: {
        render: function(p) {
            // Append the Panel to the click handler's argument list.
            p.getEl().on('click', handlePanelClick.createDelegate(null, [p], true));
        },
        single: true  // Remove the listener after first invocation
    }
});

另请参见 getEl

Component
hidden : Boolean
如果当前组件处于隐藏状态，此值为true。Read-only。
Component
initialConfig : Object
当前组件的初始化配置描述。 Read-only。
Component
items : MixedCollection
当前容器中的子组件集合 Ext.util.MixedCollection
Container
ownerCt : Ext.Container
组件所属的Container (默认为undefined，当前组件被添加到一个容器中时此值被自动设置)...
组件所属的Container (默认为undefined，当前组件被添加到一个容器中时此值被自动设置)。 Read-only。

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

Component
private : Object
我们只能在一块可见的区域进行布局。 布局目标*或者它的任何父元素* 为...
我们只能在一块可见的区域进行布局。 布局目标*或者它的任何父元素* 为display:none， 将意味着它没有一块可见的区域。
Container
refOwner : Ext.Container
如果当前组件是一个容器的孩子，并且是通过一个 ref 配置项被注册的，则此值为 ref 引用被插入到的祖先容器。
如果当前组件是一个容器的孩子，并且是通过一个 ref 配置项被注册的，则此值为 ref 引用被插入到的祖先容器。
Component
rendered : Boolean
如果当前组件已经被渲染了，此值为true。Read-only.
Component

公共方法

Method Defined By
add ( ...Object/Array component ) : Ext.Component/Array
向当前容器中添加 Component(s)。 描述 :在添加之前触发 beforeadd 事件...

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

描述 :

  • 在添加之前触发 beforeadd 事件
  • 将会相应地应用 容器的default config values (细节参见 defaults )。
  • 在组件添加之后触发 add 事件。

注意 :

  • 当调用 add 时如果容器已经被渲染， 你可能需要调用 doLayout 方法来刷新视图，它将导致所有尚未渲染的子组件进行渲染操作。 此操作是必须的，这样你可以 add 多个子组件而只刷新一次layout。 示例用法:

var tb = new Ext.Toolbar();
tb.render(document.body);  // toolbar is rendered
tb.add({text:'Button 1'}); // add multiple items (defaultType for Toolbar is 'button')
tb.add({text:'Button 2'});
tb.doLayout();             // refresh the layout
  • 警告: 使用BorderLayout布局的容器可能不能删除或者添加组件。 更多细节参见BorderLayout 的注释。
参数:
  • component : ...Object/Array

    需要添加的一个或多个组件，或者是一个组件数组。 更多信息参见 items 。

返回值:
  • Ext.Component/Array
    被添加的组件。
Container
addClass ( string cls ) : Ext.Component
为组件底层的元素添加CSS样式。
为组件底层的元素添加CSS样式。
参数:
  • cls : string
    需要添加的CSS样式的class名称
返回值:
  • Ext.Component
    this
Component
addElement ( Mixed el ) : Ext.menu.Item
添加一个Ext.Element对象到菜单中。
添加一个 Ext.Element 对象到菜单中。
参数:
  • el : Mixed
    需要添加的元素或DOM节点，或它的id。
返回值:
  • Ext.menu.Item
    被添加的菜单项
Menu
addEvents( Object|String o, string Optional. ) : void
添加指定的事件到事件列表上，事件会被该Observable触发。
添加指定的事件到事件列表上，事件会被该Observable触发。
参数:
  • o : Object|String
    以事件名作为属性true作为值的对象 或者当多个事件名被分开的传递时则为第一个事件名。
  • Optional. : string
    事件名被分开的传递时则为事件名。 用法:
    this.addEvents('storeloaded', 'storecleared');
返回值:
  • void
Observable
addItem ( Ext.menu.Item item ) : Ext.menu.Item
向菜单中添加一个基于Ext.menu.BaseItem的已存在的组件。
向菜单中添加一个基于 Ext.menu.BaseItem的已存在的组件。
参数:
  • item : Ext.menu.Item
    需要添加的菜单项。
返回值:
  • Ext.menu.Item
    被添加的菜单项。
Menu
addListener( String eventName, Function handler, [Object scope], [Object options] ) : void
给对象添加事件处理器。
给对象添加事件处理器。
参数:
  • eventName : String
    监听的事件名。
  • handler : Function
    事件调用的方法
  • scope : Object
    （可选）处理方法执行的作用域 (this的引用 reference)。 如果被忽略。默认为触发事件的对象。
  • options : Object
    （可选）包含处理器配置和属性的对象。 可能包含以下的属性:
    • scope : Object
      处理方法执行的作用域(this的引用) 。 如果被忽略。默认为触发事件的对象。
    • delay : Number
      在触发事件后延迟调用处理器的毫秒数。
    • single : Boolean
      如果为True则添加一个处理器来处理下一次的事件触发（仅一次），然后移除自己。
    • buffer : Number
      使得处理器延迟指定毫秒数后预定的运行在 一个Ext.util.DelayedTask中 。 如果事件在时间内再一次被触发，原始的处理器不会被调用，但是新的处理器会预定的在他的位置上。
    • target : Observable
      如果事件在目标的Observable上触发则仅仅调用处理器， 否则 事件会从子类的Observable上冒泡

    组合选项
    使用这些选项参数,可能会组合出不同类型的监听器：

    一个延迟的，一次性的监听器。

    myDataView.on('click', this.onClick, this, {
single: true,
delay: 100
});

    一次调用附加多个处理器
    该方法同样支持传递一个包含指定的多个处理器的属性的配置对象参数。

    myGridPanel.on({
'click' : {
    fn: this.onClick,
    scope: this,
    delay: 100
},
'mouseover' : {
    fn: this.onMouseOver,
    scope: this
},
'mouseout' : {
    fn: this.onMouseOut,
    scope: this
}
});

    或者一个简写的语法：

    myGridPanel.on({
'click' : this.onClick,
'mouseover' : this.onMouseOver,
'mouseout' : this.onMouseOut,
 scope: this
});
返回值:
  • void
Observable
addMenuItem ( Object config ) : Ext.menu.Item
使用所给的配置对象创建一个基于Ext.menu.Item的对象，并添加到菜单中。
使用所给的配置对象创建一个基于 Ext.menu.Item 的对象，并添加到菜单中。
参数:
  • config : Object
    一个菜单项配置对象。
返回值:
  • Ext.menu.Item
    被添加的菜单项。
Menu
addSeparator () : Ext.menu.Item
向菜单添加一个分割栏。
向菜单添加一个分割栏。
参数:
  • 无。
返回值:
  • Ext.menu.Item
    所添加的菜单项。
Menu
addText ( String text ) : Ext.menu.Item
使用给定的文本创建一个新的Ext.menu.TextItem并添加到菜单中。
使用给定的文本创建一个新的 Ext.menu.TextItem 并 添加到菜单中。
参数:
  • text : String
    显示在菜单项的文本。
返回值:
  • Ext.menu.Item
    被添加的菜单项。
Menu
applyToMarkup ( String/HTMLElement el ) : void
将此组件添加到已存在的有效的HTML标签中。 使用该方法时，无需再调用render()方法。
将此组件添加到已存在的有效的HTML标签中。 使用该方法时，无需再调用render()方法。
参数:
  • el : String/HTMLElement
返回值:
  • void
Component
bubble ( Function fn , [ Object scope ], [ Array args ] ) : Ext.Container
沿着component/container继承结构进行冒泡， 在每个组件上调用指定的函数。 所调用函数的作用域...
沿着component/container继承结构进行冒泡， 在每个组件上调用指定的函数。 所调用函数的作用域( this)将会是 指定的作用域或者是当前组件。 如果在函数任何一点上返回false，即停止冒泡过程
参数:
  • fn : Function
    需要调用的函数
  • scope : Object
    (可选) 函数的作用域(默认为当前节点)
  • args : Array
    (可选) 调用函数时需要传递的参数( 默认传递当前组件)
返回值:
  • Ext.Container
    this
Container
cascade ( Function fn , [ Object scope ], [ Array args ] ) : Ext.Container
从当前组件(第一个被调用的组件)开始，沿着component/container的继承树向下回溯...
从当前组件(第一个被调用的组件)开始，沿着component/container的继承树向下回溯， 在每个组件上调用指定的方法， 调用方法时的(this)作用域为指定的scope或者为当前组件。 传递给方法的参数为传递进来args或者当前组件。 在起泡的任意一个节点上，如果function返回false，即停止在那个分支上。
参数:
  • fn : Function
    需要调用的函数
  • scope : Object
    (可选)函数的作用域(默认为当前组件)
  • args : Array
    (可选) 调用函数时传递的参数 (默认传递当前组件)
返回值:
  • Ext.Container
    this
Container
cloneConfig ( Object overrides ) : Ext.Component
默认使用原先传递给当前实例的配置值克隆当前组件。
默认使用原先传递给当前实例的配置值克隆当前组件。
参数:
  • overrides : Object
    一个新的配置项，包含需要覆盖到克隆版本的所有属性。 可以传递一个id参数给此对象，否则将自动生成一个新的id以避免发生重复。
返回值:
  • Ext.Component
    当前组件的克隆副本
Component
destroy () : void
通过如下方法销毁对象：删除所有的事件监听器、将组件的元素从DOM树中删除...
通过如下方法销毁对象：删除所有的事件监听器、将组件的元素从DOM树中删除（如果可以）、 将组件从它的 Ext.Container（如果可用）中删除、 并且将它从Ext.ComponentMgr中 注销。 销毁操作一般由框架自动完成，一般情况下不需要直接调用该方法。
参数:
  • 无。
返回值:
  • void
Component
disable () : Ext.Component
将组件置为无效状态，并出发'disable'事件。
将组件置为无效状态，并出发'disable'事件。
参数:
  • 无。
返回值:
  • Ext.Component
    this
Component
doLayout ( [ Boolean shallow ], [ Boolean force ] ) : Ext.Container
强制容器的布局进行重新计算。 在向一个已经渲染的容器中添加...
强制容器的布局进行重新计算。 在向一个已经渲染的容器中添加一个新的组件， 或者改变子组件的尺寸/位置参数之后，必须调用此函数。
参数:
  • shallow : Boolean
    (可选) 设置为true时将仅仅计算当前组件的布局， 并且让子组件在需要时自动计算布局 (默认为flase，它将递归地调用每个子容器的doLayout方法)
  • force : Boolean
    (可选) 设置为true将强制进行布局，即使项目是隐藏的也进行。
返回值:
  • Ext.Container
    this
Container
enable () : Ext.Component
将组件置为有效状态并触发'enable'事件。
将组件置为有效状态并触发'enable'事件。
参数:
  • 无。
返回值:
  • Ext.Component
    this
Component
enableBubble( String/Array events ) :void
是否现在使得事件会被该Observable触发并调用 this.getBubbleTarget()方法在拥有者的继承树...

是否现在使得事件会被该Observable触发并调用 this.getBubbleTarget()方法在拥有者的继承树中冒泡。Observable的基础类中没有该方法的实现。

该方法一般被Ext.Components用来冒泡事件到拥有者的容器。参看Ext.Component.getBubbleTarget默认的实现 在Ext.Component中返回组件的直接拥有者。但是如果需要的是一个已知的目标，该方法可以被重写来更快的访问需求的目标。

例子:

Ext.override(Ext.form.Field, {
    // 添加方法到Field的initComponent上改变事件为冒泡
    initComponent : Ext.form.Field.prototype.initComponent.createSequence(function() {
        this.enableBubble('change');
    }),

    // 我们知道我们想让Field的事件冒泡到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() {
            // 如果样式被修改标题会变红。
            myForm.header.setStyle('color', 'red');
        }
    }
});
参数:
  • events : String/Array
    冒泡的事件名，或事件名数组
返回值:
  • void
Observable
find ( String prop , String value ) : Array
根据属性查找当前容器中任何层次上的组件
根据属性查找当前容器中任何层次上的组件
参数:
  • prop : String
  • value : String
返回值:
  • Array
    Ext.Component数组
Container
findBy ( Function fn , [ Object scope ] ) : Array
根据一个自定义的函数，查找当前容器中任意层级上的一个组件。 如果传递的函数返回true...
根据一个自定义的函数，查找当前容器中任意层级上的一个组件。 如果传递的函数返回true，组件将会被包含在结果中。 函数将会被用如下参数(component, this container)进行调用。
参数:
  • fn : Function
    需要调用的函数
  • scope : Object
    可选
返回值:
  • Array
    Ext.Component数组
Container
findById ( String id ) : Ext.Component
通过id查找容器中位于任何层级上的组件
通过id查找容器中位于任何层级上的组件
参数:
  • id : String
返回值:
  • Ext.Component
Container
findByType ( String/Class xtype , [ Boolean shallow ] ) : Array
根据xtype或者类型，查找当前容器中任何层级上的组件
根据xtype或者类型，查找当前容器中任何层级上的组件
参数:
  • xtype : String/Class
    组件的xtype字符串，或者直接是组件的class类型
  • shallow : Boolean
    (可选) 此参数为flase时将检查当前组件是否是指定xtype的后裔 (这是默认情况)，或者设置为true， 将检查当前组件是否直接是指定xtype类型（译者注：即指不按照多态性进行检查）。
返回值:
  • Array
    Ext.Component数组
Container
findParentBy ( Function fn ) : Ext.Container
通过自定义的函数查找当前组件上层任何层次上的容器...
通过自定义的函数查找当前组件上层任何层次上的容器。 如果传递的函数返回true，容器对象将被返回。
参数:
  • fn : Function
    自定义的函数，使用如下参数调用(container,this component)。
返回值:
  • Ext.Container
    自定义函数返回true的第一个容器
Component
findParentByType ( String/Class xtype ) : Ext.Container
通过xtype或者class查找当前组件上层任何层次上的容器
通过xtype或者class查找当前组件上层任何层次上的容器
参数:
  • xtype : String/Class
    组件的xtype字符串，或者直接是组件的class
返回值:
  • Ext.Container
    符合指定xtype或者class的第一个容器
Component
fireEvent( String eventName, Object... args ) : Boolean
用传入的参数触发指定的事件 (减去事件名)。 一个事件可以被设置为冒泡 Obse...

用传入的参数触发指定的事件 (减去事件名)。

一个事件可以被设置为冒泡到Observable父类继承树(参看 Ext.Component.getBubbleTarget) 调用enableBubble实现。

参数:
  • eventName : String
    触发的事件名。
  • args : Object...
    传递给处理器的可变长度参数。
返回值:
  • Boolean
    如果有任何的处理器返回false则返回false，否则返回true。
Observable
focus ( [ Boolean selectText ], [ Boolean/Number delay ] ) : Ext.Component
尝试将当前组件设为焦点。
尝试将当前组件设为焦点。
参数:
  • selectText : Boolean
    (可选) 如果可用，同时选中组件内部的文本
  • delay : Boolean/Number
    (可选)将当前组件设置为焦点的延迟时间(设置为true等于0毫秒)
返回值:
  • Ext.Component
    this
Component
get ( String/Number key ) : Ext.Component
获取当前容器包含的一个组件( items.get(key)方法的别名)
获取当前容器包含的一个组件( items.get(key)方法的别名)
参数:
  • key : String/Number
    组件的索引
返回值:
  • Ext.Component
    Ext.Component
Container
getBox ( [ Boolean local ] ) : Object
获取组件底层元素当前盒子模型的尺寸。（译者注：盒子模型是CSS术语，详细解释请自行搜索。）
获取组件底层元素当前盒子模型的尺寸。（译者注：盒子模型是CSS术语，详细解释请自行搜索。）
参数:
  • local : Boolean
    (可选)值为true时，组件的left值和top值将代替页面的XY被返回。(默认值为false)
返回值:
  • Object
    返回值的格式{x, y, width, height}
BoxComponent
getBubbleTarget () : Ext.Container
为Observable的fireEvent方法提供链接，它沿着继承结构进行冒泡操作。
为Observable的fireEvent方法提供链接，它沿着继承结构进行冒泡操作。
参数:
  • 无。
返回值:
  • Ext.Container
    拥有当前组件的容器。
Component
getComponent ( String/Number comp ) : Ext.Component
检查当前容器的 items property 并且获取当前容器的一个直接的子组件。
检查当前容器的 items property 并且获取当前容器的一个直接的子组件。
参数:
  • comp : String/Number
    参数可以是以下任何值：
    • 一个 String : 代表子组件的 itemId 或者 id
    • 一个 Number : 代表子组件在 items property 中的位置

    其它信息参见 Ext.util.MixedCollection.get。

返回值:
  • Ext.Component
    组件(如果有找到)。
Container
getEl () : Ext.Element
返回 Ext.Element ，它包装了当前组件。...

返回 Ext.Element ，它包装了当前组件。

通常情况下，这将是一个<DIV>元素，它是由该类的onRender方法创建的， 但是可以使用autoEl配置项 覆盖它。

注意: 此元素将会一直处于无效状态直到当前组件渲染完成。

如需向当前组件的 DOM事件(而不是当前组件自己的Observable事件)添加监听器， 更多建议，参见 listeners 配置项，或者直接使用一个render监听器:

new Ext.Panel({
    title: 'The Clickable Panel',
    listeners: {
        render: function(p) {
            // Append the Panel to the click handler's argument list.
            p.getEl().on('click', handlePanelClick.createDelegate(null, [p], true));
        },
        single: true  // Remove the listener after first invocation
    }
});
参数:
  • 无。
返回值:
  • Ext.Element
    包装当前组件的元素。
Component
getHeight () : Number
获取该组件的当前高度值。
获取该组件的当前高度值。
参数:
  • 无。
返回值:
  • Number
BoxComponent
getId () : String
返回当前组件的id，如果没有定义id，则自动生成并返回一个id:'ext-comp-'...
返回当前组件的 id 如果没有定义 id 则自动生成并返回一个 id

'ext-comp-' + (++Ext.Component.AUTO_ID)
参数:
  • 无。
返回值:
  • String
    id
Component
getItemId () : String
返回当前组件的 itemId 。 如果没有通过配置参数指定 itemId 那么，将会使用...
返回当前组件的 itemId 。 如果没有通过配置参数指定 itemId 那么，将会使用 getId 返回 id 。
参数:
  • 无。
返回值:
  • String
Component
getLayout () : ContainerLayout
返回容器当前使用的布局管理器。 如果容器当前没有设置布局管理器， 将会创建一个默认的...
返回容器当前使用的布局管理器。 如果容器当前没有设置布局管理器， 将会创建一个默认的 Ext.layout.ContainerLayout 并被设置为容器的布局管理器。
参数:
  • 无。
返回值:
  • ContainerLayout
    容器的布局管理器
Container
getLayoutTarget () : Ext.Element
返回当前容器中用来包含子组件的元素。提供了一个 可以返回容器的...

返回当前容器中用来包含子组件的元素。

提供了一个 可以返回容器的Element 的实现， 但是，如果容器有更复杂的结构， 可以覆盖此实现以返回 layout 在其中渲染子组件的元素。

参数:
  • 无。
返回值:
  • Ext.Element
    在其中渲染子组件的元素。
Container
getOuterSize () : Object
获取当前组件所在元素的尺寸大小，包括边缘的空白处。
获取当前组件所在元素的尺寸大小，包括边缘的空白处。
参数:
  • 无。
返回值:
  • Object
    一个包含元素大小的对象 {width: (element width + left/right margins), height: (element height + top/bottom margins)}
BoxComponent
getPosition ( [ Boolean local ] ) : Array
获取组件底层元素当前的XY位置。
获取组件底层元素当前的XY位置。
参数:
  • local : Boolean
    (可选)如果为true，将返回元素的left和top值，而不是相对于页面内的 XY。(默认值为 false)
返回值:
  • Array
    元素的XY位置值(例如：[100, 200])
BoxComponent
getResizeEl () : Ext.Element
返回该组件的最外层用来定义这些组件整体大小的Element...

返回该组件的最外层用来定义这些组件整体大小的Element对象。

通常用 getEl 方法将会返回相同的Element对象，但在有些情况下，组件可能有一些更多的封装了它的主要动态Element对象的Element对象。

例如ComboBox。它是封装在一个包含<input>元素的包装元素里(这将返回其 getEl方法和触发按钮的元素)。返回的元素为resizeEl。

参数:
  • 无。
返回值:
  • Ext.Element
    The Element which is to be resized by size managing layouts.
BoxComponent
getSize () : Object
获取组件底层元素当前的大小。
获取组件底层元素当前的大小。
参数:
  • 无。
返回值:
  • Object
    一个包含元素大小的对象{width: (element width), height: (element height)}
BoxComponent
getWidth () : Number
获取该组件的当前宽度值。
获取该组件的当前宽度值。
参数:
  • 无。
返回值:
  • Number
BoxComponent
getXType () : String
获取当前组件的xtype，它是用 Ext.ComponentMgr 注册的。 所有可用的xtype列表，参见...
获取当前组件的xtype，它是用 Ext.ComponentMgr 注册的。 所有可用的xtype列表，参见 Ext.Component 类头部。示例用法:

var t = new Ext.form.TextField();
alert(t.getXType());  // alerts 'textfield'
参数:
  • 无。
返回值:
  • String
    The xtype
Component
getXTypes () : String
返回此组件的xtype继承树，用字符'-'分隔。 所有可用的xtype值...

返回此组件的xtype继承树，用字符'-'分隔。 所有可用的xtype值，请参见Ext.Component 类的头部。

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

示例用法:

var t = new Ext.form.TextField();
alert(t.getXTypes());  // alerts 'component/box/field/textfield'
参数:
  • 无。
返回值:
  • String
    xtype层次字符串
Component
hasListener( String eventName ) : Boolean
检测对象是否包含指定事件的任何监听器
检测对象是否包含指定事件的任何监听器
参数:
  • eventName : String
    检测的事件名
返回值:
  • Boolean
    如果事件被监听则为true，否则为false
Observable
hide ( [ Boolean deep ] ) : void
隐藏当前菜单，可选地隐藏所有的父菜单。
隐藏当前菜单，可选地隐藏所有的父菜单。
参数:
  • deep : Boolean
    当为true时，隐藏所有的父菜单。 (默认为false)
返回值:
  • void
Menu
insert ( Number index , Ext.Component component ) : Ext.Component
在当前容器的指定索引处插入一个组件。 在插入之前触发...
在当前容器的指定索引处插入一个组件。 在插入之前触发 beforeadd 事件， 然后在组件被插入之后触发 add 事件。
参数:
  • index : Number
    组件会被插入到容器子项集合中时的索引位置
  • component : Ext.Component
    需要插入的子组件。

    Ext使用懒渲染，只有在必要的时候才会渲染插入的组件。

    如果使用懒渲染，可以传递一个组件配置对象以避免创建一个真实组件的开销， 这意味着，插入的组件不会立即被渲染。 为了利用这个“懒初始化”('lazy instantiation')， 必须把组件设置为它注册的 Ext.Component.xtype 值。

    所有可用的xtype列表，参见 Ext.Component。
返回值:
  • Ext.Component
    使用容器默认配置值插入的组件(或者配置对象)。
Container
isVisible () : Boolean
如果当前组件可见，返回true。
如果当前组件可见，返回true。
参数:
  • 无。
返回值:
  • Boolean
    如果当前组件可见，返回true，其它返回false。
Component
isXType ( String xtype , [ Boolean shallow ] ) : Boolean
Tests whether or not this Component is of a specific xtype. This can test whether this Component is descended from th...

测试此组件是否是指定的xtype。此方法既可以测试是否是指定的xtype的某个子类， 或者它是否直接是指定的xtype类(shallow=true)。

如果使用你自己的子类，必须知道组件必须注册它的xtype值。

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

示例用法:

var t = new Ext.form.TextField();
var isText = t.isXType('textfield');        // true
var isBoxSubclass = t.isXType('box');       // true, descended from BoxComponent
var isBoxInstance = t.isXType('box', true); // false, not a direct BoxComponent instance
参数:
  • xtype : String
    需要为当前组件进行检测的xtype
  • shallow : Boolean
    (可选) 如果为false，检测组件是否是xtype继承树中的某个子类（默认是这种情况）， 如果为true，只检测组件是否是指定的xtype类型。
返回值:
  • Boolean
    如果当前组件是指定xtype的子类，返回true，其它返回flase。
Component
mon ( Observable|Element item , Object|String ename , Function fn , Object scope , Object opt ) : void
向任何Observable对象(或者元素)上添加监听器，监听器将会在组件...

向任何Observable对象(或者元素)上添加监听器，监听器将会在组件销毁时被自动删除。
用法：

myGridPanel.mon(myGridPanel.getSelectionModel(), 'selectionchange', handleSelectionChange, null, {buffer: 50});

or:

myGridPanel.mon(myGridPanel.getSelectionModel(), {
    selectionchange: handleSelectionChange,
    buffer: 50
});
参数:
  • item : Observable|Element
    需要添加listener/listeners的项目。
  • ename : Object|String
    事件名，或者一个包含事件名属性的对象。
  • fn : Function
    (可选) 如果 ename 参数是一个事件名，此参数为处理函数。
  • scope : Object
    (可选)如果 ename 参数是一个事件名称，此参数是作用域 ( this 引用)，监听函数将会在此作用域中被执行。
  • opt : Object
    (可选)如果 ename 参数是一个事件名称， 此参数是 addListener 配置项。
返回值:
  • void
Component
mun ( Observable|Element item , Object|String ename , Function fn , Object scope ) : void
删除通过mon 方法添加的监听器。
删除通过mon 方法添加的监听器。
参数:
  • item : Observable|Element
    需要删除listener/listeners的项目。
  • ename : Object|String
    事件名称，或者一个包含事件名称属性的对象。
  • fn : Function
    (可选)如果 ename 参数是一个事件名称，此参数是一个处理函数。
  • scope : Object
    (可选)如果 ename 参数是一个事件名称，此参数是作用域 ( this 引用)，监听函数将会在此作用域中被执行。
返回值:
  • void
Component
nextSibling () : Ext.Component
返回所属容器中的下一个组件
返回所属容器中的下一个组件
参数:
  • 无。
返回值:
  • Ext.Component
Component
on( String eventName, Function handler, [Object scope], [Object options] ) : void
给对象添加事件处理器 (addListener的简写形式)
给对象添加事件处理器 (addListener的简写形式。)
参数:
  • eventName : String
    监听的事件类型
  • handler : Function
    事件调用的方法
  • scope : Object
    （可选）处理方法执行时的作用域 (this 的引用)。 如果被忽略。默认为触发事件的对象。
  • options : Object
    可选 包含处理器配置的对象。
返回值:
  • void
Observable
previousSibling () : Ext.Component
返回所属容器中的前一个组件
返回所属容器中的前一个组件
参数:
  • 无。
返回值:
  • Ext.Component
Component
purgeListeners() : void
移除对象上所有的监听器
移除对象上所有的监听器
参数:
  • 无。
返回值:
  • void
Observable
relayEvents( Object o, Array events ) : void
从指定的Observable上传递选择的事件就好像被当前对象触发一样。
从指定的Observable上传递选择的事件就好像被当前对象触发一样。
参数:
  • o : Object
    该Observable上的事件被当前对象传递。
  • events : Array
    传递的数组名。
返回值:
  • void
Observable
remove ( Component/String component , [ Boolean autoDestroy ] ) : Ext.Component
从当前容器中移除一个组件。 在移除之前触发 beforeremove 事件， 然后在组件被移除之后触发...
从当前容器中移除一个组件。 在移除之前触发 beforeremove 事件， 然后在组件被移除之后触发 remove 事件。
参数:
  • component : Component/String
    需要移除的组件引用或者id
  • autoDestroy : Boolean
    (可选) 设置为true将自动调用被删组件的 Ext.Component.destroy 函数。 默认为容器的 autoDestroy 配置值。
返回值:
  • Ext.Component
    被移除的组件。
Container
removeAll ( [ Boolean autoDestroy ] ) : Array
从当前容器中删除所有组件。
从当前容器中删除所有组件。
参数:
  • autoDestroy : Boolean
    (可选) 此参数为true时将自动调用 被删组件的 Ext.Component.destroy 方法。 默认为当前容器的 autoDestroy 配置值。
返回值:
  • Array
    被销毁的组件数组
Container
removeClass ( string cls ) : Ext.Component
从组件底层的元素上删除一个CSS类。
从组件底层的元素上删除一个CSS类。
参数:
  • cls : string
    需要移除的CSS类名
返回值:
  • Ext.Component
    this
Component
removeListener( String eventName, Function handler, [Object scope] ) : void
删除一个事件处理器。
删除一个事件处理器。
参数:
  • eventName : String
    处理器关联的事件类型。
  • handler : Function
    移除的处理器。 这应该是传递到addListener里的方法的引用。
  • scope : Object
    （可选）处理器指定的初始作用域。
返回值:
  • void
Observable
render ( [ Element/HTMLElement/String container ], [ String/Number position ] ) : void
在传递进来的HTML元素中渲染当前组件。...

在传递进来的HTML元素中渲染当前组件。

如果你正在使用一个Container 对象放置当前组件，那么请不要使用render方法。

当容器第一次被渲染时，它的子组件将会被容器的 layout 管理器渲染。

某些布局管理器允许动态添加子组件。它们包括 Ext.layout.CardLayout, Ext.layout.AnchorLayout, Ext.layout.FormLayout, Ext.layout.TableLayout。

当一个新的子组件被添加时，如果容器已经被渲染了， 你可能需要调用容器的 doLayout 方法来刷新视图，它将导致所有没有被渲染的子组件进行渲染操作。 此操作是必须的，这样你可以添加多个子组件而只刷新一次layout。

当创建复杂的UI时，非常重要的一点是，请记住调整子项目的尺寸和位置是容器的 layout 管理器的职责。 如果你希望子项目的尺寸对用户交互作出反应， 你必须为容器配置一个布局管理器，它将创建和管理你心里想要的那种布局。

忽略容器的layout 配置意味着将会使用一个基本的布局管理器，它除了按次序把子组件 渲染到容器中之外什么事情都不做。 这种情况下，任何尺寸和位置的调整操作都不会发生。

参数:
  • container : Element/HTMLElement/String
    (可选) 需要在其中渲染当前组件的元素。 如果它是从一个已存在的标签中创建的，此参数应该被忽略。
  • position : String/Number
    (可选) 容器中的一个元素ID或者一个DOM节点索引， 当前组件将会被插入到它前面 (默认append到容器的尾部)
返回值:
  • void
Component
resumeEvents() : void
重新开始触发事件。(参见suspendEvents) 如果事件以queueSuspended参数被挂起，则在事件被挂起时 ...
重新开始触发事件。(参见 suspendEvents) 如果事件以queueSuspended 参数被挂起，则在事件被挂起时触发的事件会被传递到所有的监听器上
参数:
  • 无。
返回值:
  • void
Observable
setAutoScroll ( Boolean scroll ) : Ext.BoxComponent
设置该组件内容溢出时是否自动显示滚动条。
设置该组件内容溢出时是否自动显示滚动条。
参数:
  • scroll : Boolean
    值为true的话组件自动显示滚动条。
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setDisabled ( Boolean disabled ) : Ext.Component
工具函数，使用布尔值设置有效/无效(disabled/enabled )。
工具函数，使用布尔值设置有效/无效(disabled/enabled )。
参数:
  • disabled : Boolean
返回值:
  • Ext.Component
    this
Component
setHeight ( Mixed height ) : Ext.BoxComponent
设置此组件的高度。该方法将触发resize事件。
设置此组件的高度。该方法将触发resize事件。
参数:
  • height : Mixed
    The new height to set.
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setPagePosition ( Number x , Number y ) : Ext.BoxComponent
设置组件在页面中的XY位置。 如果需要设置left和top值 ，请使用...
设置组件在页面中的XY位置。 如果需要设置left和top值 ，请使用setPosition方法。 该方法触发move事件。
参数:
  • x : Number
    The new x position
  • y : Number
    The new y position
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setPosition ( Number left , Number top ) : Ext.BoxComponent
设置组件的left和top值。设置组件的页面XY值，请使用setPagePosition方法。该方法触发...
设置组件的left和top值。设置组件的页面XY值，请使用setPagePosition方法。该方法触发move事件。
参数:
  • left : Number
    The new left
  • top : Number
    The new top
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setSize ( Mixed width , Mixed height ) : Ext.BoxComponent
设置BoxComponent的宽度和高度。 此方法触发resize事件...
设置BoxComponent的宽度和高度。 此方法触发resize事件。此方法可以接收单独的width或者height值作为参数， 或者你可以传递像这样的一个size对象： {width:10, height:20} 。
参数:
  • width : Mixed
    设置的新的width值。这可以是：
    • 一个Number类型指定Element新的宽度 Ext.Element.defaultUnit(默认为像素 :'px')。
    • 一个String类型用于设置width的CSS样式。
    • 一个size对象格式为 {width: widthValue, height: heightValue} 。
    • 值为 undefined 时，保留原来的width不变。
  • height : Mixed
    设置的新的height值(如果第一个参数传递了一个size对象，此参数没有必要传递)。这可以是：
    • 一个Number类型指定Element新的高度 Ext.Element.defaultUnit(默认为像素 :'px')。
    • 一个String类型用于设置height的CSS样式。也有可能不会被使用到。
    • 值为 undefined 时，保留原来的height不变。
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setVisible ( Boolean visible ) : Ext.Component
工具方法，通过使用布尔值隐藏或者显示当前组件。
工具方法，通过使用布尔值隐藏或者显示当前组件。
参数:
  • visible : Boolean
    true时显示，false时隐藏
返回值:
  • Ext.Component
    this
Component
setWidth ( Mixed width ) : Ext.BoxComponent
设置组件的宽度。 此方法触发resize事件。
设置组件的宽度。 此方法触发resize事件。
参数:
  • width : Mixed
    The new width to set.
返回值:
  • Ext.BoxComponent
    this
BoxComponent
show ( Mixed element , [ String position ], [ Ext.menu.Menu parentMenu ] ) : void
如果floating=true，使用showat将当前菜单显示在紧靠其它元素的位置， 否则使用Ext.Component.show。
如果 floating=true 使用 showat 将当前菜单显示在紧靠其它元素的位置， 否则使用 Ext.Component.show。
参数:
  • element : Mixed
    对齐元素。
  • position : String
    （可选）使用的 Ext.Element.alignTo 锚定位置，用来对齐元素(默认值为 this.defaultAlign)。
  • parentMenu : Ext.menu.Menu
    （可选） 菜单的父菜单，如果可用(默认值为 undefined)。
返回值:
  • void
Menu
showAt ( Array xyPosition , [ Ext.menu.Menu parentMenu ] ) : void
在指定的xy位置显示当前菜单并触发'show'事件， 如果'beforeshow'事件的处理程序......
在指定的xy位置显示当前菜单并触发'show'事件， 如果'beforeshow'事件的处理程序后返回false，就取消操。
参数:
  • xyPosition : Array
    包含X & Y [x, y]位置值，菜单将会被显示在此位置 (坐标是基于页面的)。
  • parentMenu : Ext.menu.Menu
    (可选)当前菜单的父菜单，如果可用(默认值为 undefined).
返回值:
  • void
Menu
suspendEvents( Boolean queueSuspended ) : void
暂停触发所有的事件。 (参看resumeEvents)
暂停触发所有的事件。（参看 resumeEvents)
参数:
  • queueSuspended : Boolean
    如果传递为true则排列好暂停的事件使得在调用 resumeEvents 后再触发它们，而不是抛弃所有暂停的事件。
返回值:
  • void
Observable
syncSize () : Ext.BoxComponent
强制组件的大小按照此组件底层元素当前的高度和宽度计算。
强制组件的大小按照此组件底层元素当前的高度和宽度计算。
参数:
  • 无。
返回值:
  • Ext.BoxComponent
    this
BoxComponent
un( String eventName, Function handler, [Object scope] ) : void
删除一个事件处理器(removeListener方法的简写形式)
删除一个事件处理器(removeListener方法的简写形式。)
参数:
  • eventName : String
    处理器关联的事件类型
  • handler : Function
    被删除的处理器 这应该是传入 addListener 中的方法的引用。
  • scope : Object
    （可选）为处理器指定的初始作用域。
返回值:
  • void
Observable
update ( Mixed htmlOrData , [ Boolean loadScripts ], [ Function callback ] ) : void
刷新组件的内部区域。
刷新组件的内部区域。
参数:
  • htmlOrData : Mixed
    如果已经通过tpl为当前组件配置了一个模板，那么 将会使用此参数来装配模板。 如果没有为当前组件配置模板，组件的内容区域将会通过Ext.Element 进行刷新。
  • loadScripts : Boolean
    (可选)只用在使用html配置时此参数才合法。默认为false。
  • callback : Function
    (可选)只用在使用html配置时此参数才合法。 当脚本加载完成时回调函数才被执行。
返回值:
  • void
Component
updateBox ( Object box ) : Ext.BoxComponent
设置此组件底层元素的盒子模型尺寸。(译者注：盒子模型是CSS术语，详细资料请自行搜索。)
设置此组件底层元素的盒子模型尺寸。(译者注：盒子模型是CSS术语，详细资料请自行搜索。)
参数:
  • box : Object
    一个格式为{x, y, width, height}的对象
返回值:
  • Ext.BoxComponent
    this
BoxComponent

公共事件

Event Defined By
add : ( Ext.Container this , Ext.Component component , Number index )
监听器将会被使用如下的参数被调用:
  • this : Ext.Container
  • component : Ext.Component
    被添加的组件
  • index : Number
    将组件添加到容器子组件集合时的位置索引
Container
added : ( Ext.Component this , Ext.Container ownerCt , number index )
当一个组件被添加到一个Ext.Container时触发
当一个组件被添加到一个Ext.Container时触发
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • ownerCt : Ext.Container
    用于组件的容器
  • index : number
    添加组件的位置
Component
afterlayout : ( Ext.Container this , ContainerLayout layout )
当容器中的组件被指定的布局管理器排列的时候触发。
当容器中的组件被指定的布局管理器排列的时候触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Container
  • layout : ContainerLayout
    为当前容器提供的ContainerLayout实现
Container
afterrender : ( Ext.Component this )
在组件渲染完成之后触发...

在组件渲染完成之后触发。

afterrender事件在当前组件被rendered 结束之后、在为组件定义的所有afterRender方法执行之后 触发，并且，如果有stateful， 也在状态被保存之后才触发。

监听器将会以如下参数格式被调用:
  • this : Ext.Component
Component
beforeadd : ( Ext.Container this , Ext.Component component , Number index )
在任何 Ext.Component 被添加或者插入到容器中之前触发。 事件处理器可以返回false取消添加操作。
在任何 Ext.Component 被添加或者插入到容器中之前触发。 事件处理器可以返回false取消添加操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Container
  • component : Ext.Component
    被添加的组件
  • index : Number
    组件被添加到容器子项目集合中时的索引位置
Container
beforedestroy : ( Ext.Component this )
在组件 destroyed 之前触发。 在事件监听器中返回false以停止 destroy 操作。
在组件 destroyed 之前触发。 在事件监听器中返回false以停止 destroy 操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforehide : ( Ext.Component this )
在调用hide方法隐藏组件之前触发。 在事件监听器中返回false可以停止隐藏操作。
在调用hide方法隐藏组件之前触发。 在事件监听器中返回false可以停止隐藏操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforeremove : ( Ext.Container this , Ext.Component component )
从容器中删除任何Ext.Component 之前触发。 处理器可以返回false取消remove操作。
从容器中删除任何Ext.Component 之前触发。 处理器可以返回false取消remove操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Container
  • component : Ext.Component
    被删除的组件
Container
beforerender : ( Ext.Component this )
在组件被rendered 之前触发。 在事件监听器中返回false可以停止render 操作。
在组件被rendered 之前触发。 在事件监听器中返回false可以停止render 操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforeshow : ( Ext.Component this )
在调用show()方法现实组件之前触发。 事件处理函数返回false可以停止show。
在调用show 方法现实组件之前触发。 事件处理函数返回false可以停止show。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforestaterestore : ( Ext.Component this , Object state )
在组件状态恢复之前触发。返回false停止恢复状态操作。
在组件状态恢复之前触发。返回false停止恢复状态操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    StateProvider返回的状态哈希值。 如果没有禁止此事件，那么状态对象会被传递给applyState。 默认情况下，这样简单地把属性值拷贝到当前组件中。 可以覆盖此方法以提供自定的状态恢复操作。
Component
beforestatesave : ( Ext.Component this , Object state )
在组件状态被保存到配置的状态提供者之前触发。 返回false可以停止保存。
在组件状态被保存到配置的状态提供者之前触发。 返回false可以停止保存。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    状态值哈希。 这由在组件上调用getState() 方法决定。 此方法必须由开发者提供，返回是否需要对状态进行描述，默认情况下， Ext.Component有一个空实现。
Component
click : ( Ext.menu.Menu this , Ext.menu.Item menuItem , Ext.EventObject e )
当菜单项被点击是触发(或者当菜单为当前活动项时敲回车键)。
当菜单项被点击是触发(或者当菜单为当前活动项时敲回车键)。
监听器将会以如下的参数格式调用:
  • this : Ext.menu.Menu
  • menuItem : Ext.menu.Item
    菜单项会被点击。
  • e : Ext.EventObject
Menu
destroy : ( Ext.Component this )
在组件被销毁之后触发。
在组件被destroyed之后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
disable : ( Ext.Component this )
在组件被设置为无效状态后触发。
在组件被设置为无效状态后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
enable : ( Ext.Component this )
当组件被设置为有效(enabled)之后触发。
当组件被设置为有效(enabled)之后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
hide : ( Ext.Component this )
在组件被隐藏之后触发。 当调用hide 方法隐藏组件之后触发。
在组件被隐藏之后触发。 当调用hide 方法隐藏组件之后触发。
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
itemclick : ( Ext.menu.BaseItem baseItem , Ext.EventObject e )
当包含在当前菜单中的菜单项被点击时触发。
当包含在当前菜单中的菜单项被点击时触发。
监听器将会以如下的参数格式调用:
  • baseItem : Ext.menu.BaseItem
    基类也会被点击。
  • e : Ext.EventObject
Menu
mouseout : ( Ext.menu.Menu this , Ext.EventObject e , Ext.menu.Item menuItem )
当鼠标移出菜单时触发。
当鼠标移出菜单时触发。
监听器将会以如下的参数格式调用:
  • this : Ext.menu.Menu
  • e : Ext.EventObject
  • menuItem : Ext.menu.Item
    菜单项会被点击。
Menu
mouseover : ( Ext.menu.Menu this , Ext.EventObject e , Ext.menu.Item menuItem )
当鼠标滑过菜单时触发。
当鼠标滑过菜单时触发。
监听器将会以如下的参数格式调用:
  • this : Ext.menu.Menu
  • e : Ext.EventObject
  • menuItem : Ext.menu.Item
    菜单项将会被点击。
Menu
move : ( Ext.Component this , Number x , Number y )
在组件移动之后触发。
在组件移动之后触发。
监听器将会用如下的参数格式来调用:
  • this : Ext.Component
  • x : Number
    The new x position
  • y : Number
    The new y position
BoxComponent
remove : ( Ext.Container this , Ext.Component component )
监听器将会以如下的参数格式被调用:
  • this : Ext.Container
  • component : Ext.Component
    被删除的组件
Container
removed : ( Ext.Component this , Ext.Container ownerCt )
当一个组件被从Ext.Container容器中删除时触发
当一个组件被从Ext.Container容器中删除时触发
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • ownerCt : Ext.Container
    持有组件的容器
Component
render : ( Ext.Component this )
在组件被渲染之后触发。
在组件被 rendered(渲染) 之后触发。
监听器将以如下的参数格式被调用:
  • this : Ext.Component
Component
resize : ( Ext.Component this , Number adjWidth , Number adjHeight , Number rawWidth , Number rawHeight )
在组件被调整大小之后触发。
在组件被调整大小之后触发。
监听器将以如下的参数格式被调用:
  • this : Ext.Component
  • adjWidth : Number
    这是width调整后的值
  • adjHeight : Number
    这是height调整后的值
  • rawWidth : Number
    这是width原来的值
  • rawHeight : Number
    这是height原来的值
BoxComponent
show : ( Ext.Component this )
在调用show 方法显示组件之后触发。
在调用show 方法显示组件之后触发。
监听器将会用如下的参数格式被调用:
  • this : Ext.Component
Component
staterestore : ( Ext.Component this , Object state )
组件状态被存储之后触发。
组件状态被存储之后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    StateProvider返回的状态哈希值。 如果没有禁止此事件，那么状态对象会被传递给applyState。 默认情况下，这样简单地把属性值拷贝到当前组件中。 可以覆盖此方法以提供自定的状态恢复操作。
Component
statesave : ( Ext.Component this , Object state )
在组件状态被保存到所配置的状态提供者之后触发。
在组件状态被保存到所配置的状态提供者之后触发。
监听器将会用如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    状态值hash。 这是由在足见上调用getState() 方法决定的。 开发者必须提供此方法以返回是否需要恢复状态，默认情况下， Ext.Component有一个空实现。
Component


Class Ext.menu.MenuMgr

包: | Ext.menu
定义类的文件: | MenuMgr.js
类: | MenuMgr
继承自: | Object
为一个页面中的所有菜单项提供一个通用的注册方式，这样可以轻松地通过id访问它们。

这是一个单例的类，不能直接实例化。

公共属性

该类没有公共属性。

公共方法

Method Defined By
get ( String/Object menu ) : Ext.menu.Menu
返回一个Ext.menu.Menu对象。
返回一个Ext.menu.Menu对象。
参数:
  • menu : String/Object
    一个string型的菜单id，一个已存在的菜单对象引用， 或者一个菜单配置，将被用来创建和返回一个新的菜单实例。
返回值:
  • Ext.menu.Menu
    指定的菜单，如果没有找到则返回null
MenuMgr
hideAll () : Boolean
隐藏所有当前可见的菜单
隐藏所有当前可见的菜单
参数:
  • 无。
返回值:
  • Boolean
    true,如果有菜单被成功隐藏。
MenuMgr

公共事件

该类没有公共事件。


Observable
    Component
      BaseItem
        Separator

Class Ext.menu.Separator

包: | Ext.menu
定义类的文件: | Separator.js
类: | Separator
继承自: | BaseItem
向一个菜单中添加一个分隔栏，用来分隔菜单项的逻辑分组。 一般情况下，你可以调用add()添加一个"-"来添加一个分隔栏， 或者在你的配置选项中配置，而不是直接创建。

配置项

Config Options Defined By
allowDomMove : Boolean
在渲染时组件是否可以移动Dom节点(默认为true)。
Component
applyTo : Mixed
指定一个元素的id、一个DOM元素或者一个已经存在并被渲染到DIV中的元素，此DIV已经被...

指定一个元素的id、一个DOM元素或者一个已经存在并被渲染到DIV中的元素，此DIV已经被 渲染到document中，并且为当前组件指定了一些结构化的标签。

  • 描述 :
      当使用了 applyTo， 在主元素中也可以用id或者CSS类名来指定组件的托管部分， 并且，如果可以的话，创建的组件可能也会试图在那个标签中创建它的子组件。
  • 注意 :
      当使用此配置项时，无需调用render()方法。
      如果指定了applyTo属性，任何传递给 renderTo 的值都会被忽略，并且目标元素的父节点将会自动被用作组件的容器。
Component
autoEl : Mixed
一个表签名或者一个 DomHelper 描述，用来创建 Element ，它将封装当前组件...

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

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

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

{
    xtype: 'box',
    autoEl: {
        tag: 'img',
        src: 'http://www.example.com/example.jpg'

    }
}, {
    xtype: 'box',
    autoEl: {
        tag: 'blockquote',
        html: 'autoEl is cool!'
    }
}, {
    xtype: 'container',
    autoEl: 'ul',
    cls: 'ux-unordered-list',
    items: {
        xtype: 'box',
        autoEl: 'li',
        html: 'First list item'
    }
}
Component
autoShow : Boolean
如果组件需要检测隐藏CSS属性(如 'x-hidden' 或者 'x-hide-display')并且在渲染时删除...
如果组件需要检测隐藏CSS属性(如 'x-hidden' 或者 'x-hide-display')并且在渲染时删除它们 (默认为false)，设置此值为true。
Component
bubbleEvents : Array
一个事件数组，当这些事件被触发时，将会被冒泡到所有父容器中。参见....

一个事件数组，当这些事件被触发时，将会被冒泡到所有父容器中。参见 Ext.util.Observable.enableBubble。 默认为 []。

Component
canActivate : Boolean
当值为true时该选项被视觉激活 (默认值为 false)
BaseItem
clearCls : String
应用到特殊的clearing div的CSS类， 这个clearing div直接渲染到每个form field的包装器后面...

应用到特殊的clearing div的CSS类， 这个clearing div直接渲染到每个form field的包装器后面，以提供 清除field的功能(默认为 'x-form-clear-left')。

注意: 只有在当前组件被渲染到一个使用FormLayout 布局(例如 Ext.form.FormPanel 或者指定 layout:'form')的 容器中、或者是指定了一个fieldLabel 、或者指定isFormField=true 时此配置才有效。

另请参见 Ext.layout.FormLayout. fieldTpl。

Component
clickHideDelay : Number
点击之后的隐藏一个项目的延迟毫秒数(默认值为 1 )
BaseItem
cls : String
一个可选的额外CSS类，它将被添加到当前组件的元素上(默认为'')...
一个可选的额外CSS类，它将被添加到当前组件的元素上(默认为'')。 此属性对于在组件上，或者它的任何使用标准CSS规则的孩子节点上， 添加定制的样式非常有用。
Component
contentEl : String
(可选)指定一个已存在的HTML元素，或者一个已存在HTML元素的...

(可选)指定一个已存在的HTML元素，或者一个已存在HTML元素的 id ，它们将被用作当前组件的内容。

  • 描述 :
    此配置选项被用来将一个已存在的HTML元素 插入到一个新组件(在组件渲染之后它简单地移动DOM元素) 的layout元素中，使它成为该组件的内容。
  • 注意 :
    指定的HTML元素将被append到组件的layout元素中， 在所有配置的 HTML 被插入之后， 并且，这样的话，在render事件 被触发时，document中将不再包含此元素。
    指定的HTML元素将不会参与组件所有可能使用的 layout 过程(译者注：指这些HTML元素 不会参与布局操作)。 它仅是HTML而已。布局操作实在孩子 items 上进行的。
    添加 x-hidden 或者 x-hide-display CSS类，以防在内容渲染到panel时发生闪烁。
Component
ctCls : String
一个可选的外部CSS样式，添加到这个组件的容器(默认值为 '')。 这个方法对于使用标准的CSS规则...

一个可选的外部CSS样式，添加到这个组件的容器(默认值为 '')。 这个方法对于使用标准的CSS规则，为组件或它的任何一个子组件添加特定的样式非常有用。 参见 Ext.layout.ContainerLayout和 extraCls 。

注意: ctCls 默认为 ''期望如下的类，它们将指定一个默认值:

  • Box Layout : 'x-box-layout-ct'
使用一个额外的CSS类配置以上的Class，它是append到默认对象上的。例如， 对于BoxLayout (Hbox and Vbox):
                                ctCls: 'x-box-layout-ct custom-class'

Component
data : Mixed
初始化数据集，它将被应用到 tpl 上以刷新组件的内容区域。
Component
disabled : Boolean
当前组件处于无效状态时为true。 Read-only.
Component
disabledClass : String
当组件处于无效状态时添加到组件上的CSS类(默认为 'x-item-disabled')。
Component
fieldLabel : String
紧靠此field显示的标签文本(默认值为 '')。注意...

紧靠此field显示的标签文本(默认值为 '')。

注意:只有在当前组件被渲染到一个使用FormLayout 的容器中时，此配置才有效。 (例如 Ext.form.FormPanel 或 指定 layout:'form')。

另请参见 hideLabel 、 Ext.layout.FormLayout和 fieldTpl。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Name'
    }]
});
Component
handler : Function
(可选)一个处理菜单项点击事件的函数。该函数包含下列...
(可选)一个处理菜单项点击事件的函数。该函数包含下列参数：
  • b : Item
    当前菜单。
  • e : EventObject
    单击事件。
BaseItem
hidden : Boolean
如果当前组件处于隐藏状态，此值为true。Read-only。
Component
hideLabel : Boolean
true时完全隐藏label元素 ( label 和 separator)。 默认为 false。 默认情况下，即使你不指定...

true时完全隐藏label元素 ( label 和 separator)。 默认为 false。 默认情况下，即使你不指定 fieldLabel 它的空间仍然会被保留，这样这块区域会与其它确实拥有label的区域位于同一排。 讲此值设置为 true 将导致此区域不再保留此空间。

注意: 参见 clearCls 的注释。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield'
        hideLabel: true
    }]
});
Component
hideMode : String
组件如何隐藏，支持的值有： 'visibility' (css visibility), 'offsets' (位置偏移量为负值) 和...

组件如何隐藏，支持的值有： 'visibility' (css visibility), 'offsets' (位置偏移量为负值) 和 'display' (css display).

注意:一般首选默认值 'display'，因为当组件第一次显示的时候它们会自动进行布局 (隐藏的时候不会调整尺寸)。

Component
hideOnClick : Boolean
值为true时在当前项目被点击之后隐藏所包含的菜单(默认值为 false)
Separator
hideParent : Boolean
此值为true时，当调用hide/show方法时，将会hide和show组件的容器...
此值为true时，当调用hide/show方法时，将会hide和show组件的容器；false时将会 hide和show组件自身(默认为false)。例如，这可以用作window上隐藏按钮的一种 快捷操作，通过设置此按钮的hideParent:true，然后把它添加到window上。
Component
html : String/Object
一个HTML片段，或者一个 DomHelper 描述，用作layout元素的内容(默认为'')。...
一个HTML片段，或者一个 DomHelper 描述，用作layout元素的内容(默认为'')。 这个HTML内容在组件渲染之后才被添加，所以在 render 出发的时候，document中尚未包含此HTML。 但是这个内容将会在所有配置的 contentEl 之前被插入到body标签中。
Component
id : String
当前组件唯一的id(默认为auto-assigned id)...

当前组件唯一的id(默认为auto-assigned id)。 如果你需要在以后访问组件，而又没有一个有效的组件对象引用，那么你需要指定一个 id( 也就是，使用Ext. getCmp方法 )。

注意，此id也将被用作组件底层HTML标签的id，这些标签被渲染到页面中。 这将允许你编写基于id的CSS规则，以独立地描述指定的实例；并且，也可以通过 组件父标签的id选中子元素。

注意:为了避免与唯一的id 产生重复， 请参见 itemId 和 ref 。

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

Component
itemCls : String
分隔栏使用的默认CSS样式(默认值为 "x-menu-sep")
Separator
itemId : String
当没有可利用的对象引用时，itemId可以作为第二选择，用来获得一个组件的引用， 代替 ...

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

var c = new Ext.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'); // 与 Ext.getCmp()不同

p2 = p1.ownerCt.getComponent('p2'); // 通过兄弟对象获得引用

另请参见 id 和 ref 。

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

Component
labelSeparator : String
每个fieldLabel 文本后面现实的分隔符。 此属性可以在多个层次上进行配置...

每个fieldLabel 文本后面现实的分隔符。 此属性可以在多个层次上进行配置。优先顺序为：

  • field / component level
  • container level
  • layout level (默认为冒号 ':')
如不需要为当前field的label显示分隔符，指定一个空字符串''即可。

注意:参见 clearCls 的注释。

另请参见 hideLabel 和 Ext.layout.FormLayout。 fieldTpl。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    layoutConfig: {
        labelSeparator: '~'   // layout config has lowest priority (defaults to ':')
    },
    labelSeparator: '>>',     // config at container level
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Field 1',
        labelSeparator: '...' // field/component level config supersedes others
    },{
        xtype: 'textfield',
        fieldLabel: 'Field 2' // labelSeparator will be '='

    }]
});
Component
labelStyle : String
一个CSS样式描述字符串，它将直接应用到当前field的label上...

一个CSS样式描述字符串，它将直接应用到当前field的label上。 如果有设置，默认为容器的labelStyle值(例如 Ext.layout.FormLayout.labelStyle , 或者 '')。

注意:参见 clearCls 的注释。

另请参见 hideLabel 和 Ext.layout.FormLayout. fieldTpl。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Name',
        labelStyle: 'font-weight:bold;'
    }]
});
Component
listeners : Object
一个包含一个或多个事件处理器的配置对象，会在初始化的时候被添加到目标对象上...

一个包含一个或多个事件处理器的配置对象，会在初始化的时候被添加到目标对象上。 该配置对象应该是一个有效的监听器配置对象就像 addListener例子中指定的一样可一次附加多个处理器。

ExtJs Components上的DOM事件

一些 ExtJs Component 类导出时会选择一些DOM事件(例如 "click", "mouseover" 等等), 这通常只是在有额外的值可以被添加时发生。例如DataView类的 click事件会传递被点击的节点。也可以直接在Component的HTMLElementevent上访问DOM事件，但必需在Component被渲染后监听器才能添加到Element 上。可以按照以下步骤添加插件:

// 插件会用一个监听器配置对象进行配置。
//该组件会被添加到所有处理方法的参数列表上。
Ext.DomObserver = Ext.extend(Object, {
    constructor: function(config) {
        this.listeners = config.listeners ? config.listeners : config;
    },

    // 组件将自己传递进了插件的初始化方法里
    init: function(c) {
        var p, l = this.listeners;
        for (p in l) {
            if (Ext.isFunction(l[p])) {
                l[p] = this.createHandler(l[p], c);
            } else {
                l[p].fn = this.createHandler(l[p].fn, c);
            }
        }

        // 渲染后立即添加监听器到元素上
        c.render = c.render.createSequence(function() {
            var e = c.getEl();
            if (e) {
                e.on(l);
            }
        });
    },

    createHandler: function(fn, c) {
        return function(e) {
            fn.call(this, e, c);
        };
    }
});

var combo = new Ext.form.ComboBox({

    // 元素被点击后折叠
    plugins: [ new Ext.DomObserver({
        click: function(evt, comp) {
            comp.collapse();
        }
    })],
    store: myStore,
    typeAhead: true,
    mode: 'local',
    triggerAction: 'all'
});

Observable
overCls : String
一个可选的额外的CSS类，它将在鼠标移过元素时被添加到组件上...
一个可选的额外的CSS类，它将在鼠标移过元素时被添加到组件上，鼠标移出时 删除。(默认为'')。此属性对于在组件上，或者它的任何使用标准CSS规则的孩子节点上， 添加定制的'active' 或者 'hover'样式非常有用。
Component
plugins : Object/Array
一个对象或者一个对象数组，为组件提供特殊的功能 ...
一个对象或者一个对象数组，为组件提供特殊的功能。 对一个合法的插件唯一的要求是它含有一个init()方法， 能接收一个Ext.Component型的参数。 当组件被创建时，如果有可用的插件，组件将会调用每个插件的init方法， 并将自身的引用作为方法参数传递给它。然后，每个插件就可以调用方法或者响应组件上的事件， 就像需要的那样提供自己的功能。
Component
ptype : String
需要创建配置的ptype。 当传递一个配置对象给构造函数时...
需要创建配置的ptype。 当传递一个配置对象给构造函数时，此配置选项不会被使用。 只有在使用懒初始化的时候此配置项才会被使用， 此时Plugin不是 通过一个完整的实例组件，而是通过一个Component配置指定的。 在渲染时，将会查找ptype以决定创建何种类型的Plugin。

如果你创建自己的Plugin，你可以通过 Ext.ComponentMgr.registerPlugin 对它们进行注册，以便能利用懒初始化和渲染机制。
Component
ref : String
一个路径描述，与组件的 ownerCt 相关，它描述了把当前组件的命名引用放置到哪个父容器中去。...

一个路径描述，与组件的 ownerCt 相关，它描述了把当前组件的命名引用放置到哪个父容器中去。

祖先的坐标路径可以通过'/'字符进行分隔。 例如，将一个Toolbar Button的引用放入 拥有此Toolbar的Panel中:

var myGrid = new Ext.grid.EditorGridPanel({
    title: 'My EditorGridPanel',
    store: myStore,
    colModel: myColModel,
    tbar: [{
        text: 'Save',
        handler: saveChanges,
        disabled: true,
        ref: '../saveButton'
    }],
    listeners: {
        afteredit: function() {
//          The button reference is in the GridPanel
            myGrid.saveButton.enable();
        }
    }
});

在上面的代码中，如果 ref 是 'saveButton' ，那么引用将会被放置到Toolbar中。 ref 中的每个'/' 都会从组件的 ownerCt 向上移动一级。

另请参见 added 和 removed 事件。

Component
renderTo : Mixed
该值可以是一个节点的id、一个DOM节点或者一个已存在的元素...

该值可以是一个节点的id、一个DOM节点或者一个已存在的元素， 组件将会被渲染到其中。

  • 注意 :
      如果组件不是一个Container 的子项目时， 不要使用此选项。 渲染和管理它的子项目是一个Container 的layout manager的责任。
      当使用此配置项时，无需调用render()方法。

另请参见 render 。

Component
scope : Object
调用处理器时使用的作用域。
BaseItem
stateEvents : Array
一个事件数组，当它们被触发时，组件需要保存自己的状态(默认值为 none)...

一个事件数组，当它们被触发时，组件需要保存自己的状态(默认值为 none)。 它们可以是任何该组件支持的事件类型，包括浏览器事件和 自定义事件(例如['click', 'customerchange'])。

对于保存和恢复组件状态的详细解释，参见 stateful

Component
stateId : String
为该组件指定的唯一的id值，它被用作管理组件状态的目的...
为该组件指定的唯一的id值，它被用作管理组件状态的目的。 (如果设定了id，默认值为组件自己的id，否则，如果组件使用自动生成的id，此值为null)。

对于保存和反解析组件状态的解释，参见 stateful 。

Component
stateful : Boolean
一个标志参数，它将引起组件在启动时尝试从一个保存的状态中恢复内部状态参数...

一个标志参数，它将引起组件在启动时尝试从一个保存的状态中恢复内部状态参数。 组件必须要么拥有一个 stateId 或者 id ，它们被分配给需要被管理的状态属性。 在跨页面加载时，不保证自动生成的id属性的稳定性， 并且，不能依赖此id来保存和恢复一个组件的相同状态。

为了保存状态的操作能够工作，状态管理器的提供者必须 被设置成一个Ext.state.Provider 的实现类，它覆盖了set 和get 方法，以便保存和恢复name/value对。 有一个内置的Ext.state.CookieProvider 可用。

为当前页面设置状态提供者:

Ext.state.Manager.setProvider(new Ext.state.CookieProvider({
    expires: new Date(new Date().getTime()+(1000*60*60*24*7)), //7 days from now
}));

当 stateEvents 配置项中其中之一的事件被触发时， 一个状态可保存的组件将试图保存其状态。

保存状态时，一个可保存状态的组件首先需要通过调用 getState 方法来序列化它的状态。 默认情况下，此函数什么事都不做。 开发者必须提供一个实现，返回一个hash对象，它描述了组件可恢复的状态。

getState方法产生的值将会传递给 Ext.state.Manager.set 方法，它使用配置的 Ext.state.Provider 来保存对象，以组件的 stateId 为key，或者，如果此值（指stateId）没有指定时， 使用它的 id 作为key。

在进行构造时，一个可保存状态的组件试图通过调用 Ext.state.Manager.get方法来 恢复它的状态，传递 stateId 或者，如果此值（指stateId）没有指定时， 使用它的 id 作为参数。

结果对象被传递给 applyState 。 applyState 的默认实现只是简单地把属性拷贝到对象中， 但是开发者可以覆盖此方法以支持更多行为。

通过向 beforestaterestore, staterestore, beforestatesave 和 statesave 事件上绑定监听器，你可以在保存和恢复状态时进行额外的处理。

Component
style : String
被添加到组件元素的特定样式。 必须是按照...
被添加到组件元素的特定样式。 必须是按照 Ext.Element.applyStyles 类指定格式的合法参数值。

new Ext.Panel({
    title: 'Some Title',
    renderTo: Ext.getBody(),
    width: 400, height: 300,
    layout: 'form',
    items: [{
        xtype: 'textarea',
        style: {
            width: '95%',
            marginBottom: '10px'
        }
    },
        new Ext.Button({
            text: 'Send',
            minWidth: '100',
            style: {
                marginBottom: '10px'
            }
        })
    ]
});
Component
tpl : Mixed
一个 Ext.Template , Ext.XTemplate 或者一个用来形成一个Ext.XTemplate的字符串数组...
一个 Ext.Template , Ext.XTemplate 或者一个用来形成一个Ext.XTemplate的字符串数组。 与 data 和 tplWriteMode 配置项协同使用。
Component
tplWriteMode : String
刷新组件的内容区域时使用的Ext.(X)Template方式。 默认为'overwrite' (参见 Ext.XTemplate.overwrite )。
刷新组件的内容区域时使用的Ext.(X)Template方式。 默认为'overwrite' (参见 Ext.XTemplate.overwrite )。
Component
xtype : String
需要创建配置的xtype。 当传递一个配置对象给构造函数时...
需要创建配置的xtype。 当传递一个配置对象给构造函数时，此配置选项不会被使用。 只有在使用懒初始化的时候此配置项才会被使用，此时容器的子项目不是 通过一个完整的实例组件，而是通过一个Component配置指定的。 在渲染时，将会查找xtype以决定创建何种类型的子组件。

预定义的xtype列表如下： here。

如果你继承Component创建你自己的组件，你需要使用Ext.ComponentMgr.registerType 对它们进行注册，以便利用懒初始化和渲染机制。
Component

公共属性

Property Defined By
disabled : Boolean
当前组件处于无效状态时为true。 Read-only.
Component
el : Ext.Element
封装了当前组件的Ext.Element。 Read-only。通常情况下，这将是一个<DIV>元素，它由此类的...

封装了当前组件的Ext.Element。 Read-only。

通常情况下，这将是一个<DIV>元素，它由此类的 onRender方法创建，但是它可以通过使用 autoEl 配置项进行覆盖。

注意: 直到组件渲染完成此元素都将处于无效状态。

如需向当前组件的 DOM事件(而不是当前组件自己的Observable事件)添加监听器， 更多建议，参见 listeners 配置项，或者直接使用一个render监听器:

new Ext.Panel({
    title: 'The Clickable Panel',
    listeners: {
        render: function(p) {
            // Append the Panel to the click handler's argument list.
            p.getEl().on('click', handlePanelClick.createDelegate(null, [p], true));
        },
        single: true  // Remove the listener after first invocation
    }
});

另请参见 getEl

Component
hidden : Boolean
如果当前组件处于隐藏状态，此值为true。Read-only。
Component
initialConfig : Object
当前组件的初始化配置描述。 Read-only。
Component
ownerCt : Ext.Container
组件所属的Container (默认为undefined，当前组件被添加到一个容器中时此值被自动设置)...
组件所属的Container (默认为undefined，当前组件被添加到一个容器中时此值被自动设置)。 Read-only。

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

Component
parentMenu : Ext.menu.Menu
当前项的父菜单。
BaseItem
refOwner : Ext.Container
如果当前组件是一个容器的孩子，并且是通过一个 ref 配置项被注册的，则此值为 ref 引用被插入到的祖先容器。
如果当前组件是一个容器的孩子，并且是通过一个 ref 配置项被注册的，则此值为 ref 引用被插入到的祖先容器。
Component
rendered : Boolean
如果当前组件已经被渲染了，此值为true。Read-only.
Component

公共方法

Method Defined By
Separator ( Object config )
参数:
  • config : Object
    Configuration options
返回值:
  • void
Separator
addClass ( string cls ) : Ext.Component
为组件底层的元素添加CSS样式。
为组件底层的元素添加CSS样式。
参数:
  • cls : string
    需要添加的CSS样式的class名称
返回值:
  • Ext.Component
    this
Component
addEvents( Object|String o, string Optional. ) : void
添加指定的事件到事件列表上，事件会被该Observable触发。
添加指定的事件到事件列表上，事件会被该Observable触发。
参数:
  • o : Object|String
    以事件名作为属性true作为值的对象 或者当多个事件名被分开的传递时则为第一个事件名。
  • Optional. : string
    事件名被分开的传递时则为事件名。 用法:
    this.addEvents('storeloaded', 'storecleared');
返回值:
  • void
Observable
addListener( String eventName, Function handler, [Object scope], [Object options] ) : void
给对象添加事件处理器。
给对象添加事件处理器。
参数:
  • eventName : String
    监听的事件名。
  • handler : Function
    事件调用的方法
  • scope : Object
    （可选）处理方法执行的作用域 (this的引用 reference)。 如果被忽略。默认为触发事件的对象。
  • options : Object
    （可选）包含处理器配置和属性的对象。 可能包含以下的属性:
    • scope : Object
      处理方法执行的作用域(this的引用) 。 如果被忽略。默认为触发事件的对象。
    • delay : Number
      在触发事件后延迟调用处理器的毫秒数。
    • single : Boolean
      如果为True则添加一个处理器来处理下一次的事件触发（仅一次），然后移除自己。
    • buffer : Number
      使得处理器延迟指定毫秒数后预定的运行在 一个Ext.util.DelayedTask中 。 如果事件在时间内再一次被触发，原始的处理器不会被调用，但是新的处理器会预定的在他的位置上。
    • target : Observable
      如果事件在目标的Observable上触发则仅仅调用处理器， 否则 事件会从子类的Observable上冒泡

    组合选项
    使用这些选项参数,可能会组合出不同类型的监听器：

    一个延迟的，一次性的监听器。

    myDataView.on('click', this.onClick, this, {
single: true,
delay: 100
});

    一次调用附加多个处理器
    该方法同样支持传递一个包含指定的多个处理器的属性的配置对象参数。

    myGridPanel.on({
'click' : {
    fn: this.onClick,
    scope: this,
    delay: 100
},
'mouseover' : {
    fn: this.onMouseOver,
    scope: this
},
'mouseout' : {
    fn: this.onMouseOut,
    scope: this
}
});

    或者一个简写的语法：

    myGridPanel.on({
'click' : this.onClick,
'mouseover' : this.onMouseOver,
'mouseout' : this.onMouseOut,
 scope: this
});
返回值:
  • void
Observable
applyToMarkup ( String/HTMLElement el ) : void
将此组件添加到已存在的有效的HTML标签中。 使用该方法时，无需再调用render()方法。
将此组件添加到已存在的有效的HTML标签中。 使用该方法时，无需再调用render()方法。
参数:
  • el : String/HTMLElement
返回值:
  • void
Component
cloneConfig ( Object overrides ) : Ext.Component
默认使用原先传递给当前实例的配置值克隆当前组件。
默认使用原先传递给当前实例的配置值克隆当前组件。
参数:
  • overrides : Object
    一个新的配置项，包含需要覆盖到克隆版本的所有属性。 可以传递一个id参数给此对象，否则将自动生成一个新的id以避免发生重复。
返回值:
  • Ext.Component
    当前组件的克隆副本
Component
destroy () : void
通过如下方法销毁对象：删除所有的事件监听器、将组件的元素从DOM树中删除...
通过如下方法销毁对象：删除所有的事件监听器、将组件的元素从DOM树中删除（如果可以）、 将组件从它的 Ext.Container（如果可用）中删除、 并且将它从Ext.ComponentMgr中 注销。 销毁操作一般由框架自动完成，一般情况下不需要直接调用该方法。
参数:
  • 无。
返回值:
  • void
Component
disable () : Ext.Component
将组件置为无效状态，并出发'disable'事件。
将组件置为无效状态，并出发'disable'事件。
参数:
  • 无。
返回值:
  • Ext.Component
    this
Component
enable () : Ext.Component
将组件置为有效状态并触发'enable'事件。
将组件置为有效状态并触发'enable'事件。
参数:
  • 无。
返回值:
  • Ext.Component
    this
Component
enableBubble( String/Array events ) :void
是否现在使得事件会被该Observable触发并调用 this.getBubbleTarget()方法在拥有者的继承树...

是否现在使得事件会被该Observable触发并调用 this.getBubbleTarget()方法在拥有者的继承树中冒泡。Observable的基础类中没有该方法的实现。

该方法一般被Ext.Components用来冒泡事件到拥有者的容器。参看Ext.Component.getBubbleTarget默认的实现 在Ext.Component中返回组件的直接拥有者。但是如果需要的是一个已知的目标，该方法可以被重写来更快的访问需求的目标。

例子:

Ext.override(Ext.form.Field, {
    // 添加方法到Field的initComponent上改变事件为冒泡
    initComponent : Ext.form.Field.prototype.initComponent.createSequence(function() {
        this.enableBubble('change');
    }),

    // 我们知道我们想让Field的事件冒泡到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() {
            // 如果样式被修改标题会变红。
            myForm.header.setStyle('color', 'red');
        }
    }
});
参数:
  • events : String/Array
    冒泡的事件名，或事件名数组
返回值:
  • void
Observable
findParentBy ( Function fn ) : Ext.Container
通过自定义的函数查找当前组件上层任何层次上的容器...
通过自定义的函数查找当前组件上层任何层次上的容器。 如果传递的函数返回true，容器对象将被返回。
参数:
  • fn : Function
    自定义的函数，使用如下参数调用(container,this component)。
返回值:
  • Ext.Container
    自定义函数返回true的第一个容器
Component
findParentByType ( String/Class xtype ) : Ext.Container
通过xtype或者class查找当前组件上层任何层次上的容器
通过xtype或者class查找当前组件上层任何层次上的容器
参数:
  • xtype : String/Class
    组件的xtype字符串，或者直接是组件的class
返回值:
  • Ext.Container
    符合指定xtype或者class的第一个容器
Component
fireEvent( String eventName, Object... args ) : Boolean
用传入的参数触发指定的事件 (减去事件名)。 一个事件可以被设置为冒泡 Obse...

用传入的参数触发指定的事件 (减去事件名)。

一个事件可以被设置为冒泡到Observable父类继承树(参看 Ext.Component.getBubbleTarget) 调用enableBubble实现。

参数:
  • eventName : String
    触发的事件名。
  • args : Object...
    传递给处理器的可变长度参数。
返回值:
  • Boolean
    如果有任何的处理器返回false则返回false，否则返回true。
Observable
focus ( [ Boolean selectText ], [ Boolean/Number delay ] ) : Ext.Component
尝试将当前组件设为焦点。
尝试将当前组件设为焦点。
参数:
  • selectText : Boolean
    (可选) 如果可用，同时选中组件内部的文本
  • delay : Boolean/Number
    (可选)将当前组件设置为焦点的延迟时间(设置为true等于0毫秒)
返回值:
  • Ext.Component
    this
Component
getBubbleTarget () : Ext.Container
为Observable的fireEvent方法提供链接，它沿着继承结构进行冒泡操作。
为Observable的fireEvent方法提供链接，它沿着继承结构进行冒泡操作。
参数:
  • 无。
返回值:
  • Ext.Container
    拥有当前组件的容器。
Component
getEl () : Ext.Element
返回 Ext.Element ，它包装了当前组件。...

返回 Ext.Element ，它包装了当前组件。

通常情况下，这将是一个<DIV>元素，它是由该类的onRender方法创建的， 但是可以使用autoEl配置项 覆盖它。

注意: 此元素将会一直处于无效状态直到当前组件渲染完成。

如需向当前组件的 DOM事件(而不是当前组件自己的Observable事件)添加监听器， 更多建议，参见 listeners 配置项，或者直接使用一个render监听器:

new Ext.Panel({
    title: 'The Clickable Panel',
    listeners: {
        render: function(p) {
            // Append the Panel to the click handler's argument list.
            p.getEl().on('click', handlePanelClick.createDelegate(null, [p], true));
        },
        single: true  // Remove the listener after first invocation
    }
});
参数:
  • 无。
返回值:
  • Ext.Element
    包装当前组件的元素。
Component
getId () : String
返回当前组件的id，如果没有定义id，则自动生成并返回一个id:'ext-comp-'...
返回当前组件的 id 如果没有定义 id 则自动生成并返回一个 id

'ext-comp-' + (++Ext.Component.AUTO_ID)
参数:
  • 无。
返回值:
  • String
    id
Component
getItemId () : String
返回当前组件的 itemId 。 如果没有通过配置参数指定 itemId 那么，将会使用...
返回当前组件的 itemId 。 如果没有通过配置参数指定 itemId 那么，将会使用 getId 返回 id 。
参数:
  • 无。
返回值:
  • String
Component
getXType () : String
获取当前组件的xtype，它是用 Ext.ComponentMgr 注册的。 所有可用的xtype列表，参见...
获取当前组件的xtype，它是用 Ext.ComponentMgr 注册的。 所有可用的xtype列表，参见 Ext.Component 类头部。示例用法:

var t = new Ext.form.TextField();
alert(t.getXType());  // alerts 'textfield'
参数:
  • 无。
返回值:
  • String
    The xtype
Component
getXTypes () : String
返回此组件的xtype继承树，用字符'-'分隔。 所有可用的xtype值...

返回此组件的xtype继承树，用字符'-'分隔。 所有可用的xtype值，请参见Ext.Component 类的头部。

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

示例用法:

var t = new Ext.form.TextField();
alert(t.getXTypes());  // alerts 'component/box/field/textfield'
参数:
  • 无。
返回值:
  • String
    xtype层次字符串
Component
hasListener( String eventName ) : Boolean
检测对象是否包含指定事件的任何监听器
检测对象是否包含指定事件的任何监听器
参数:
  • eventName : String
    检测的事件名
返回值:
  • Boolean
    如果事件被监听则为true，否则为false
Observable
hide () : Ext.Component
隐藏当前组件。 监听 beforehide' 事件并且返回false 可以取消隐藏组件的操作。 在隐藏组件之后触发...
隐藏当前组件。 监听 beforehide' 事件并且返回false 可以取消隐藏组件的操作。 在隐藏组件之后触发 ' hide' 事件。 如果组件被配置成 hidden 那么此方法在内部被调用。
参数:
  • 无。
返回值:
  • Ext.Component
    this
Component
isVisible () : Boolean
如果当前组件可见，返回true。
如果当前组件可见，返回true。
参数:
  • 无。
返回值:
  • Boolean
    如果当前组件可见，返回true，其它返回false。
Component
isXType ( String xtype , [ Boolean shallow ] ) : Boolean
Tests whether or not this Component is of a specific xtype. This can test whether this Component is descended from th...

测试此组件是否是指定的xtype。此方法既可以测试是否是指定的xtype的某个子类， 或者它是否直接是指定的xtype类(shallow=true)。

如果使用你自己的子类，必须知道组件必须注册它的xtype值。

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

示例用法:

var t = new Ext.form.TextField();
var isText = t.isXType('textfield');        // true
var isBoxSubclass = t.isXType('box');       // true, descended from BoxComponent
var isBoxInstance = t.isXType('box', true); // false, not a direct BoxComponent instance
参数:
  • xtype : String
    需要为当前组件进行检测的xtype
  • shallow : Boolean
    (可选) 如果为false，检测组件是否是xtype继承树中的某个子类（默认是这种情况）， 如果为true，只检测组件是否是指定的xtype类型。
返回值:
  • Boolean
    如果当前组件是指定xtype的子类，返回true，其它返回flase。
Component
mon ( Observable|Element item , Object|String ename , Function fn , Object scope , Object opt ) : void
向任何Observable对象(或者元素)上添加监听器，监听器将会在组件...

向任何Observable对象(或者元素)上添加监听器，监听器将会在组件销毁时被自动删除。
用法：

myGridPanel.mon(myGridPanel.getSelectionModel(), 'selectionchange', handleSelectionChange, null, {buffer: 50});

or:

myGridPanel.mon(myGridPanel.getSelectionModel(), {
    selectionchange: handleSelectionChange,
    buffer: 50
});
参数:
  • item : Observable|Element
    需要添加listener/listeners的项目。
  • ename : Object|String
    事件名，或者一个包含事件名属性的对象。
  • fn : Function
    (可选) 如果 ename 参数是一个事件名，此参数为处理函数。
  • scope : Object
    (可选)如果 ename 参数是一个事件名称，此参数是作用域 ( this 引用)，监听函数将会在此作用域中被执行。
  • opt : Object
    (可选)如果 ename 参数是一个事件名称， 此参数是 addListener 配置项。
返回值:
  • void
Component
mun ( Observable|Element item , Object|String ename , Function fn , Object scope ) : void
删除通过mon 方法添加的监听器。
删除通过mon 方法添加的监听器。
参数:
  • item : Observable|Element
    需要删除listener/listeners的项目。
  • ename : Object|String
    事件名称，或者一个包含事件名称属性的对象。
  • fn : Function
    (可选)如果 ename 参数是一个事件名称，此参数是一个处理函数。
  • scope : Object
    (可选)如果 ename 参数是一个事件名称，此参数是作用域 ( this 引用)，监听函数将会在此作用域中被执行。
返回值:
  • void
Component
nextSibling () : Ext.Component
返回所属容器中的下一个组件
返回所属容器中的下一个组件
参数:
  • 无。
返回值:
  • Ext.Component
Component
on( String eventName, Function handler, [Object scope], [Object options] ) : void
给对象添加事件处理器 (addListener的简写形式)
给对象添加事件处理器 (addListener的简写形式。)
参数:
  • eventName : String
    监听的事件类型
  • handler : Function
    事件调用的方法
  • scope : Object
    （可选）处理方法执行时的作用域 (this 的引用)。 如果被忽略。默认为触发事件的对象。
  • options : Object
    可选 包含处理器配置的对象。
返回值:
  • void
Observable
previousSibling () : Ext.Component
返回所属容器中的前一个组件
返回所属容器中的前一个组件
参数:
  • 无。
返回值:
  • Ext.Component
Component
purgeListeners() : void
移除对象上所有的监听器
移除对象上所有的监听器
参数:
  • 无。
返回值:
  • void
Observable
relayEvents( Object o, Array events ) : void
从指定的Observable上传递选择的事件就好像被当前对象触发一样。
从指定的Observable上传递选择的事件就好像被当前对象触发一样。
参数:
  • o : Object
    该Observable上的事件被当前对象传递。
  • events : Array
    传递的数组名。
返回值:
  • void
Observable
removeClass ( string cls ) : Ext.Component
从组件底层的元素上删除一个CSS类。
从组件底层的元素上删除一个CSS类。
参数:
  • cls : string
    需要移除的CSS类名
返回值:
  • Ext.Component
    this
Component
removeListener( String eventName, Function handler, [Object scope] ) : void
删除一个事件处理器。
删除一个事件处理器。
参数:
  • eventName : String
    处理器关联的事件类型。
  • handler : Function
    移除的处理器。 这应该是传递到addListener里的方法的引用。
  • scope : Object
    （可选）处理器指定的初始作用域。
返回值:
  • void
Observable
render ( [ Element/HTMLElement/String container ], [ String/Number position ] ) : void
在传递进来的HTML元素中渲染当前组件。...

在传递进来的HTML元素中渲染当前组件。

如果你正在使用一个Container 对象放置当前组件，那么请不要使用render方法。

当容器第一次被渲染时，它的子组件将会被容器的 layout 管理器渲染。

某些布局管理器允许动态添加子组件。它们包括 Ext.layout.CardLayout, Ext.layout.AnchorLayout, Ext.layout.FormLayout, Ext.layout.TableLayout。

当一个新的子组件被添加时，如果容器已经被渲染了， 你可能需要调用容器的 doLayout 方法来刷新视图，它将导致所有没有被渲染的子组件进行渲染操作。 此操作是必须的，这样你可以添加多个子组件而只刷新一次layout。

当创建复杂的UI时，非常重要的一点是，请记住调整子项目的尺寸和位置是容器的 layout 管理器的职责。 如果你希望子项目的尺寸对用户交互作出反应， 你必须为容器配置一个布局管理器，它将创建和管理你心里想要的那种布局。

忽略容器的layout 配置意味着将会使用一个基本的布局管理器，它除了按次序把子组件 渲染到容器中之外什么事情都不做。 这种情况下，任何尺寸和位置的调整操作都不会发生。

参数:
  • container : Element/HTMLElement/String
    (可选) 需要在其中渲染当前组件的元素。 如果它是从一个已存在的标签中创建的，此参数应该被忽略。
  • position : String/Number
    (可选) 容器中的一个元素ID或者一个DOM节点索引， 当前组件将会被插入到它前面 (默认append到容器的尾部)
返回值:
  • void
Component
resumeEvents() : void
重新开始触发事件。(参见suspendEvents) 如果事件以queueSuspended参数被挂起，则在事件被挂起时 ...
重新开始触发事件。(参见 suspendEvents) 如果事件以queueSuspended 参数被挂起，则在事件被挂起时触发的事件会被传递到所有的监听器上
参数:
  • 无。
返回值:
  • void
Observable
setDisabled ( Boolean disabled ) : Ext.Component
工具函数，使用布尔值设置有效/无效(disabled/enabled )。
工具函数，使用布尔值设置有效/无效(disabled/enabled )。
参数:
  • disabled : Boolean
返回值:
  • Ext.Component
    this
Component
setHandler ( Function handler , Object scope ) : void
设置处理当前项单击事件的处理器 (等价于传递到 handler 配置属性)....
设置处理当前项单击事件的处理器 (等价于传递到 handler 配置属性)。 如果存在一个已经注册的处理器，它将会被注销。
参数:
  • handler : Function
    点击时调用的方法
  • scope : Object
    传递给处理器的作用域，默认为当前菜单选项。
返回值:
  • void
BaseItem
setVisible ( Boolean visible ) : Ext.Component
工具方法，通过使用布尔值隐藏或者显示当前组件。
工具方法，通过使用布尔值隐藏或者显示当前组件。
参数:
  • visible : Boolean
    true时显示，false时隐藏
返回值:
  • Ext.Component
    this
Component
show () : Ext.Component
显示当前组件。监听' beforeshow' 事件，返回 false 取消显示组件...
显示当前组件。监听' beforeshow' 事件，返回 false 取消显示组件。在显示组件之后触发' show' 事件。
参数:
  • 无。
返回值:
  • Ext.Component
    this
Component
suspendEvents( Boolean queueSuspended ) : void
暂停触发所有的事件。 (参看resumeEvents)
暂停触发所有的事件。（参看 resumeEvents)
参数:
  • queueSuspended : Boolean
    如果传递为true则排列好暂停的事件使得在调用 resumeEvents 后再触发它们，而不是抛弃所有暂停的事件。
返回值:
  • void
Observable
un( String eventName, Function handler, [Object scope] ) : void
删除一个事件处理器(removeListener方法的简写形式)
删除一个事件处理器(removeListener方法的简写形式。)
参数:
  • eventName : String
    处理器关联的事件类型
  • handler : Function
    被删除的处理器 这应该是传入 addListener 中的方法的引用。
  • scope : Object
    （可选）为处理器指定的初始作用域。
返回值:
  • void
Observable
update ( Mixed htmlOrData , [ Boolean loadScripts ], [ Function callback ] ) : void
刷新组件的内部区域。
刷新组件的内部区域。
参数:
  • htmlOrData : Mixed
    如果已经通过tpl为当前组件配置了一个模板，那么 将会使用此参数来装配模板。 如果没有为当前组件配置模板，组件的内容区域将会通过Ext.Element 进行刷新。
  • loadScripts : Boolean
    (可选)只用在使用html配置时此参数才合法。默认为false。
  • callback : Function
    (可选)只用在使用html配置时此参数才合法。 当脚本加载完成时回调函数才被执行。
返回值:
  • void
Component

公共事件

Event Defined By
activate : ( Ext.menu.BaseItem this )
该项目被激活为当前活动项时触发
该项目被激活为当前活动项时触发
监听器将会以如下的参数格式调用：
  • this : Ext.menu.BaseItem
BaseItem
added : ( Ext.Component this , Ext.Container ownerCt , number index )
当一个组件被添加到一个Ext.Container时触发
当一个组件被添加到一个Ext.Container时触发
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • ownerCt : Ext.Container
    用于组件的容器
  • index : number
    添加组件的位置
Component
afterrender : ( Ext.Component this )
在组件渲染完成之后触发...

在组件渲染完成之后触发。

afterrender事件在当前组件被rendered 结束之后、在为组件定义的所有afterRender方法执行之后 触发，并且，如果有stateful， 也在状态被保存之后才触发。

监听器将会以如下参数格式被调用:
  • this : Ext.Component
Component
beforedestroy : ( Ext.Component this )
在组件 destroyed 之前触发。 在事件监听器中返回false以停止 destroy 操作。
在组件 destroyed 之前触发。 在事件监听器中返回false以停止 destroy 操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforehide : ( Ext.Component this )
在调用hide方法隐藏组件之前触发。 在事件监听器中返回false可以停止隐藏操作。
在调用hide方法隐藏组件之前触发。 在事件监听器中返回false可以停止隐藏操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforerender : ( Ext.Component this )
在组件被rendered 之前触发。 在事件监听器中返回false可以停止render 操作。
在组件被rendered 之前触发。 在事件监听器中返回false可以停止render 操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforeshow : ( Ext.Component this )
在调用show()方法现实组件之前触发。 事件处理函数返回false可以停止show。
在调用show 方法现实组件之前触发。 事件处理函数返回false可以停止show。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforestaterestore : ( Ext.Component this , Object state )
在组件状态恢复之前触发。返回false停止恢复状态操作。
在组件状态恢复之前触发。返回false停止恢复状态操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    StateProvider返回的状态哈希值。 如果没有禁止此事件，那么状态对象会被传递给applyState。 默认情况下，这样简单地把属性值拷贝到当前组件中。 可以覆盖此方法以提供自定的状态恢复操作。
Component
beforestatesave : ( Ext.Component this , Object state )
在组件状态被保存到配置的状态提供者之前触发。 返回false可以停止保存。
在组件状态被保存到配置的状态提供者之前触发。 返回false可以停止保存。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    状态值哈希。 这由在组件上调用getState() 方法决定。 此方法必须由开发者提供，返回是否需要对状态进行描述，默认情况下， Ext.Component有一个空实现。
Component
click : ( Ext.menu.BaseItem this , Ext.EventObject e )
当前选项被点击时触发
当前选项被点击时触发
监听器将会以如下的参数格式调用:
  • this : Ext.menu.BaseItem
  • e : Ext.EventObject
BaseItem
deactivate : ( Ext.menu.BaseItem this )
当此项目被设置为非当前活动项时触发
当此项目被设置为非当前活动项时触发
监听器将会以如下的参数格式调用:
  • this : Ext.menu.BaseItem
BaseItem
destroy : ( Ext.Component this )
在组件被销毁之后触发。
在组件被destroyed之后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
disable : ( Ext.Component this )
在组件被设置为无效状态后触发。
在组件被设置为无效状态后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
enable : ( Ext.Component this )
当组件被设置为有效(enabled)之后触发。
当组件被设置为有效(enabled)之后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
hide : ( Ext.Component this )
在组件被隐藏之后触发。 当调用hide 方法隐藏组件之后触发。
在组件被隐藏之后触发。 当调用hide 方法隐藏组件之后触发。
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
removed : ( Ext.Component this , Ext.Container ownerCt )
当一个组件被从Ext.Container容器中删除时触发
当一个组件被从Ext.Container容器中删除时触发
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • ownerCt : Ext.Container
    持有组件的容器
Component
render : ( Ext.Component this )
在组件被渲染之后触发。
在组件被 rendered(渲染) 之后触发。
监听器将以如下的参数格式被调用:
  • this : Ext.Component
Component
show : ( Ext.Component this )
在调用show 方法显示组件之后触发。
在调用show 方法显示组件之后触发。
监听器将会用如下的参数格式被调用:
  • this : Ext.Component
Component
staterestore : ( Ext.Component this , Object state )
组件状态被存储之后触发。
组件状态被存储之后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    StateProvider返回的状态哈希值。 如果没有禁止此事件，那么状态对象会被传递给applyState。 默认情况下，这样简单地把属性值拷贝到当前组件中。 可以覆盖此方法以提供自定的状态恢复操作。
Component
statesave : ( Ext.Component this , Object state )
在组件状态被保存到所配置的状态提供者之后触发。
在组件状态被保存到所配置的状态提供者之后触发。
监听器将会用如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    状态值hash。 这是由在足见上调用getState() 方法决定的。 开发者必须提供此方法以返回是否需要恢复状态，默认情况下， Ext.Component有一个空实现。
Component


Observable
    Component
      BaseItem
        TextItem

Class Ext.menu.TextItem

包: | Ext.menu
定义类的文件: | TextItem.js
类: | TextItem
继承自: | BaseItem
向菜单中添加一个静态文本，一般被用作表头或者一个分组分隔栏。

配置项

Config Options Defined By
activeClass : String
当一个项目变成当前活动项时所应用的CSS样式 (默认值为"x-menu-item-active")
BaseItem
allowDomMove : Boolean
在渲染时组件是否可以移动Dom节点(默认为true)。
Component
applyTo : Mixed
指定一个元素的id、一个DOM元素或者一个已经存在并被渲染到DIV中的元素，此DIV已经被...

指定一个元素的id、一个DOM元素或者一个已经存在并被渲染到DIV中的元素，此DIV已经被 渲染到document中，并且为当前组件指定了一些结构化的标签。

  • 描述 :
      当使用了 applyTo， 在主元素中也可以用id或者CSS类名来指定组件的托管部分， 并且，如果可以的话，创建的组件可能也会试图在那个标签中创建它的子组件。
  • 注意 :
      当使用此配置项时，无需调用render()方法。
      如果指定了applyTo属性，任何传递给 renderTo 的值都会被忽略，并且目标元素的父节点将会自动被用作组件的容器。
Component
autoEl : Mixed
一个表签名或者一个 DomHelper 描述，用来创建 Element ，它将封装当前组件...

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

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

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

{
    xtype: 'box',
    autoEl: {
        tag: 'img',
        src: 'http://www.example.com/example.jpg'

    }
}, {
    xtype: 'box',
    autoEl: {
        tag: 'blockquote',
        html: 'autoEl is cool!'
    }
}, {
    xtype: 'container',
    autoEl: 'ul',
    cls: 'ux-unordered-list',
    items: {
        xtype: 'box',
        autoEl: 'li',
        html: 'First list item'
    }
}
Component
autoShow : Boolean
如果组件需要检测隐藏CSS属性(如 'x-hidden' 或者 'x-hide-display')并且在渲染时删除...
如果组件需要检测隐藏CSS属性(如 'x-hidden' 或者 'x-hide-display')并且在渲染时删除它们 (默认为false)，设置此值为true。
Component
bubbleEvents : Array
一个事件数组，当这些事件被触发时，将会被冒泡到所有父容器中。参见....

一个事件数组，当这些事件被触发时，将会被冒泡到所有父容器中。参见 Ext.util.Observable.enableBubble。 默认为 []。

Component
canActivate : Boolean
当值为true时该选项被视觉激活 (默认值为 false)
BaseItem
clearCls : String
应用到特殊的clearing div的CSS类， 这个clearing div直接渲染到每个form field的包装器后面...

应用到特殊的clearing div的CSS类， 这个clearing div直接渲染到每个form field的包装器后面，以提供 清除field的功能(默认为 'x-form-clear-left')。

注意: 只有在当前组件被渲染到一个使用FormLayout 布局(例如 Ext.form.FormPanel 或者指定 layout:'form')的 容器中、或者是指定了一个fieldLabel 、或者指定isFormField=true 时此配置才有效。

另请参见 Ext.layout.FormLayout. fieldTpl。

Component
clickHideDelay : Number
点击之后的隐藏一个项目的延迟毫秒数(默认值为 1 )
BaseItem
cls : String
一个可选的额外CSS类，它将被添加到当前组件的元素上(默认为'')...
一个可选的额外CSS类，它将被添加到当前组件的元素上(默认为'')。 此属性对于在组件上，或者它的任何使用标准CSS规则的孩子节点上， 添加定制的样式非常有用。
Component
contentEl : String
(可选)指定一个已存在的HTML元素，或者一个已存在HTML元素的...

(可选)指定一个已存在的HTML元素，或者一个已存在HTML元素的 id ，它们将被用作当前组件的内容。

  • 描述 :
    此配置选项被用来将一个已存在的HTML元素 插入到一个新组件(在组件渲染之后它简单地移动DOM元素) 的layout元素中，使它成为该组件的内容。
  • 注意 :
    指定的HTML元素将被append到组件的layout元素中， 在所有配置的 HTML 被插入之后， 并且，这样的话，在render事件 被触发时，document中将不再包含此元素。
    指定的HTML元素将不会参与组件所有可能使用的 layout 过程(译者注：指这些HTML元素 不会参与布局操作)。 它仅是HTML而已。布局操作实在孩子 items 上进行的。
    添加 x-hidden 或者 x-hide-display CSS类，以防在内容渲染到panel时发生闪烁。
Component
ctCls : String
一个可选的外部CSS样式，添加到这个组件的容器(默认值为 '')。 这个方法对于使用标准的CSS规则...

一个可选的外部CSS样式，添加到这个组件的容器(默认值为 '')。 这个方法对于使用标准的CSS规则，为组件或它的任何一个子组件添加特定的样式非常有用。 参见 Ext.layout.ContainerLayout和 extraCls 。

注意: ctCls 默认为 ''期望如下的类，它们将指定一个默认值:

  • Box Layout : 'x-box-layout-ct'
使用一个额外的CSS类配置以上的Class，它是append到默认对象上的。例如， 对于BoxLayout (Hbox and Vbox):
                                ctCls: 'x-box-layout-ct custom-class'

Component
data : Mixed
初始化数据集，它将被应用到 tpl 上以刷新组件的内容区域。
Component
disabled : Boolean
当前组件处于无效状态时为true。 Read-only.
Component
disabledClass : String
当组件处于无效状态时添加到组件上的CSS类(默认为 'x-item-disabled')。
Component
fieldLabel : String
紧靠此field显示的标签文本(默认值为 '')。注意...

紧靠此field显示的标签文本(默认值为 '')。

注意:只有在当前组件被渲染到一个使用FormLayout 的容器中时，此配置才有效。 (例如 Ext.form.FormPanel 或 指定 layout:'form')。

另请参见 hideLabel 、 Ext.layout.FormLayout和 fieldTpl。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Name'
    }]
});
Component
handler : Function
(可选)一个处理菜单项点击事件的函数。该函数包含下列...
(可选)一个处理菜单项点击事件的函数。该函数包含下列参数：
  • b : Item
    当前菜单。
  • e : EventObject
    单击事件。
BaseItem
hidden : Boolean
如果当前组件处于隐藏状态，此值为true。Read-only。
Component
hideLabel : Boolean
true时完全隐藏label元素 ( label 和 separator)。 默认为 false。 默认情况下，即使你不指定...

true时完全隐藏label元素 ( label 和 separator)。 默认为 false。 默认情况下，即使你不指定 fieldLabel 它的空间仍然会被保留，这样这块区域会与其它确实拥有label的区域位于同一排。 讲此值设置为 true 将导致此区域不再保留此空间。

注意: 参见 clearCls 的注释。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield'
        hideLabel: true
    }]
});
Component
hideMode : String
组件如何隐藏，支持的值有： 'visibility' (css visibility), 'offsets' (位置偏移量为负值) 和...

组件如何隐藏，支持的值有： 'visibility' (css visibility), 'offsets' (位置偏移量为负值) 和 'display' (css display).

注意:一般首选默认值 'display'，因为当组件第一次显示的时候它们会自动进行布局 (隐藏的时候不会调整尺寸)。

Component
hideOnClick : Boolean
设置为true，将在点击此项目后隐藏菜单(默认值为 false)
TextItem
hideParent : Boolean
此值为true时，当调用hide/show方法时，将会hide和show组件的容器...
此值为true时，当调用hide/show方法时，将会hide和show组件的容器；false时将会 hide和show组件自身(默认为false)。例如，这可以用作window上隐藏按钮的一种 快捷操作，通过设置此按钮的hideParent:true，然后把它添加到window上。
Component
html : String/Object
一个HTML片段，或者一个 DomHelper 描述，用作layout元素的内容(默认为'')。...
一个HTML片段，或者一个 DomHelper 描述，用作layout元素的内容(默认为'')。 这个HTML内容在组件渲染之后才被添加，所以在 render 出发的时候，document中尚未包含此HTML。 但是这个内容将会在所有配置的 contentEl 之前被插入到body标签中。
Component
id : String
当前组件唯一的id(默认为auto-assigned id)...

当前组件唯一的id(默认为auto-assigned id)。 如果你需要在以后访问组件，而又没有一个有效的组件对象引用，那么你需要指定一个 id( 也就是，使用Ext. getCmp方法 )。

注意，此id也将被用作组件底层HTML标签的id，这些标签被渲染到页面中。 这将允许你编写基于id的CSS规则，以独立地描述指定的实例；并且，也可以通过 组件父标签的id选中子元素。

注意:为了避免与唯一的id 产生重复， 请参见 itemId 和 ref 。

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

Component
itemCls : String
text项使用的默认CSS样式 (默认值为 "x-menu-text")
TextItem
itemId : String
当没有可利用的对象引用时，itemId可以作为第二选择，用来获得一个组件的引用， 代替 ...

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

var c = new Ext.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'); // 与 Ext.getCmp()不同

p2 = p1.ownerCt.getComponent('p2'); // 通过兄弟对象获得引用

另请参见 id 和 ref 。

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

Component
labelSeparator : String
每个fieldLabel 文本后面现实的分隔符。 此属性可以在多个层次上进行配置...

每个fieldLabel 文本后面现实的分隔符。 此属性可以在多个层次上进行配置。优先顺序为：

  • field / component level
  • container level
  • layout level (默认为冒号 ':')
如不需要为当前field的label显示分隔符，指定一个空字符串''即可。

注意:参见 clearCls 的注释。

另请参见 hideLabel 和 Ext.layout.FormLayout。 fieldTpl。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    layoutConfig: {
        labelSeparator: '~'   // layout config has lowest priority (defaults to ':')
    },
    labelSeparator: '>>',     // config at container level
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Field 1',
        labelSeparator: '...' // field/component level config supersedes others
    },{
        xtype: 'textfield',
        fieldLabel: 'Field 2' // labelSeparator will be '='

    }]
});
Component
labelStyle : String
一个CSS样式描述字符串，它将直接应用到当前field的label上...

一个CSS样式描述字符串，它将直接应用到当前field的label上。 如果有设置，默认为容器的labelStyle值(例如 Ext.layout.FormLayout.labelStyle , 或者 '')。

注意:参见 clearCls 的注释。

另请参见 hideLabel 和 Ext.layout.FormLayout. fieldTpl。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Name',
        labelStyle: 'font-weight:bold;'
    }]
});
Component
listeners : Object
一个包含一个或多个事件处理器的配置对象，会在初始化的时候被添加到目标对象上...

一个包含一个或多个事件处理器的配置对象，会在初始化的时候被添加到目标对象上。 该配置对象应该是一个有效的监听器配置对象就像 addListener例子中指定的一样可一次附加多个处理器。

ExtJs Components上的DOM事件

一些 ExtJs Component 类导出时会选择一些DOM事件(例如 "click", "mouseover" 等等), 这通常只是在有额外的值可以被添加时发生。例如DataView类的 click事件会传递被点击的节点。也可以直接在Component的HTMLElementevent上访问DOM事件，但必需在Component被渲染后监听器才能添加到Element 上。可以按照以下步骤添加插件:

// 插件会用一个监听器配置对象进行配置。
//该组件会被添加到所有处理方法的参数列表上。
Ext.DomObserver = Ext.extend(Object, {
    constructor: function(config) {
        this.listeners = config.listeners ? config.listeners : config;
    },

    // 组件将自己传递进了插件的初始化方法里
    init: function(c) {
        var p, l = this.listeners;
        for (p in l) {
            if (Ext.isFunction(l[p])) {
                l[p] = this.createHandler(l[p], c);
            } else {
                l[p].fn = this.createHandler(l[p].fn, c);
            }
        }

        // 渲染后立即添加监听器到元素上
        c.render = c.render.createSequence(function() {
            var e = c.getEl();
            if (e) {
                e.on(l);
            }
        });
    },

    createHandler: function(fn, c) {
        return function(e) {
            fn.call(this, e, c);
        };
    }
});

var combo = new Ext.form.ComboBox({

    // 元素被点击后折叠
    plugins: [ new Ext.DomObserver({
        click: function(evt, comp) {
            comp.collapse();
        }
    })],
    store: myStore,
    typeAhead: true,
    mode: 'local',
    triggerAction: 'all'
});

Observable
overCls : String
一个可选的额外的CSS类，它将在鼠标移过元素时被添加到组件上...
一个可选的额外的CSS类，它将在鼠标移过元素时被添加到组件上，鼠标移出时 删除。(默认为'')。此属性对于在组件上，或者它的任何使用标准CSS规则的孩子节点上， 添加定制的'active' 或者 'hover'样式非常有用。
Component
plugins : Object/Array
一个对象或者一个对象数组，为组件提供特殊的功能 ...
一个对象或者一个对象数组，为组件提供特殊的功能。 对一个合法的插件唯一的要求是它含有一个init()方法， 能接收一个Ext.Component型的参数。 当组件被创建时，如果有可用的插件，组件将会调用每个插件的init方法， 并将自身的引用作为方法参数传递给它。然后，每个插件就可以调用方法或者响应组件上的事件， 就像需要的那样提供自己的功能。
Component
ptype : String
需要创建配置的ptype。 当传递一个配置对象给构造函数时...
需要创建配置的ptype。 当传递一个配置对象给构造函数时，此配置选项不会被使用。 只有在使用懒初始化的时候此配置项才会被使用， 此时Plugin不是 通过一个完整的实例组件，而是通过一个Component配置指定的。 在渲染时，将会查找ptype以决定创建何种类型的Plugin。

如果你创建自己的Plugin，你可以通过 Ext.ComponentMgr.registerPlugin 对它们进行注册，以便能利用懒初始化和渲染机制。
Component
ref : String
一个路径描述，与组件的 ownerCt 相关，它描述了把当前组件的命名引用放置到哪个父容器中去。...

一个路径描述，与组件的 ownerCt 相关，它描述了把当前组件的命名引用放置到哪个父容器中去。

祖先的坐标路径可以通过'/'字符进行分隔。 例如，将一个Toolbar Button的引用放入 拥有此Toolbar的Panel中:

var myGrid = new Ext.grid.EditorGridPanel({
    title: 'My EditorGridPanel',
    store: myStore,
    colModel: myColModel,
    tbar: [{
        text: 'Save',
        handler: saveChanges,
        disabled: true,
        ref: '../saveButton'
    }],
    listeners: {
        afteredit: function() {
//          The button reference is in the GridPanel
            myGrid.saveButton.enable();
        }
    }
});

在上面的代码中，如果 ref 是 'saveButton' ，那么引用将会被放置到Toolbar中。 ref 中的每个'/' 都会从组件的 ownerCt 向上移动一级。

另请参见 added 和 removed 事件。

Component
renderTo : Mixed
该值可以是一个节点的id、一个DOM节点或者一个已存在的元素...

该值可以是一个节点的id、一个DOM节点或者一个已存在的元素， 组件将会被渲染到其中。

  • 注意 :
      如果组件不是一个Container 的子项目时， 不要使用此选项。 渲染和管理它的子项目是一个Container 的layout manager的责任。
      当使用此配置项时，无需调用render()方法。

另请参见 render 。

Component
scope : Object
调用处理器时使用的作用域。
BaseItem
stateEvents : Array
一个事件数组，当它们被触发时，组件需要保存自己的状态(默认值为 none)...

一个事件数组，当它们被触发时，组件需要保存自己的状态(默认值为 none)。 它们可以是任何该组件支持的事件类型，包括浏览器事件和 自定义事件(例如['click', 'customerchange'])。

对于保存和恢复组件状态的详细解释，参见 stateful

Component
stateId : String
为该组件指定的唯一的id值，它被用作管理组件状态的目的...
为该组件指定的唯一的id值，它被用作管理组件状态的目的。 (如果设定了id，默认值为组件自己的id，否则，如果组件使用自动生成的id，此值为null)。

对于保存和反解析组件状态的解释，参见 stateful 。

Component
stateful : Boolean
一个标志参数，它将引起组件在启动时尝试从一个保存的状态中恢复内部状态参数...

一个标志参数，它将引起组件在启动时尝试从一个保存的状态中恢复内部状态参数。 组件必须要么拥有一个 stateId 或者 id ，它们被分配给需要被管理的状态属性。 在跨页面加载时，不保证自动生成的id属性的稳定性， 并且，不能依赖此id来保存和恢复一个组件的相同状态。

为了保存状态的操作能够工作，状态管理器的提供者必须 被设置成一个Ext.state.Provider 的实现类，它覆盖了set 和get 方法，以便保存和恢复name/value对。 有一个内置的Ext.state.CookieProvider 可用。

为当前页面设置状态提供者:

Ext.state.Manager.setProvider(new Ext.state.CookieProvider({
    expires: new Date(new Date().getTime()+(1000*60*60*24*7)), //7 days from now
}));

当 stateEvents 配置项中其中之一的事件被触发时， 一个状态可保存的组件将试图保存其状态。

保存状态时，一个可保存状态的组件首先需要通过调用 getState 方法来序列化它的状态。 默认情况下，此函数什么事都不做。 开发者必须提供一个实现，返回一个hash对象，它描述了组件可恢复的状态。

getState方法产生的值将会传递给 Ext.state.Manager.set 方法，它使用配置的 Ext.state.Provider 来保存对象，以组件的 stateId 为key，或者，如果此值（指stateId）没有指定时， 使用它的 id 作为key。

在进行构造时，一个可保存状态的组件试图通过调用 Ext.state.Manager.get方法来 恢复它的状态，传递 stateId 或者，如果此值（指stateId）没有指定时， 使用它的 id 作为参数。

结果对象被传递给 applyState 。 applyState 的默认实现只是简单地把属性拷贝到对象中， 但是开发者可以覆盖此方法以支持更多行为。

通过向 beforestaterestore, staterestore, beforestatesave 和 statesave 事件上绑定监听器，你可以在保存和恢复状态时进行额外的处理。

Component
style : String
被添加到组件元素的特定样式。 必须是按照...
被添加到组件元素的特定样式。 必须是按照 Ext.Element.applyStyles 类指定格式的合法参数值。

new Ext.Panel({
    title: 'Some Title',
    renderTo: Ext.getBody(),
    width: 400, height: 300,
    layout: 'form',
    items: [{
        xtype: 'textarea',
        style: {
            width: '95%',
            marginBottom: '10px'
        }
    },
        new Ext.Button({
            text: 'Send',
            minWidth: '100',
            style: {
                marginBottom: '10px'
            }
        })
    ]
});
Component
text : String
当前项显示的文本(默认值为 ' ')
TextItem
tpl : Mixed
一个 Ext.Template , Ext.XTemplate 或者一个用来形成一个Ext.XTemplate的字符串数组...
一个 Ext.Template , Ext.XTemplate 或者一个用来形成一个Ext.XTemplate的字符串数组。 与 data 和 tplWriteMode 配置项协同使用。
Component
tplWriteMode : String
刷新组件的内容区域时使用的Ext.(X)Template方式。 默认为'overwrite' (参见 Ext.XTemplate.overwrite )。
刷新组件的内容区域时使用的Ext.(X)Template方式。 默认为'overwrite' (参见 Ext.XTemplate.overwrite )。
Component
xtype : String
需要创建配置的xtype。 当传递一个配置对象给构造函数时...
需要创建配置的xtype。 当传递一个配置对象给构造函数时，此配置选项不会被使用。 只有在使用懒初始化的时候此配置项才会被使用，此时容器的子项目不是 通过一个完整的实例组件，而是通过一个Component配置指定的。 在渲染时，将会查找xtype以决定创建何种类型的子组件。

预定义的xtype列表如下： here。

如果你继承Component创建你自己的组件，你需要使用Ext.ComponentMgr.registerType 对它们进行注册，以便利用懒初始化和渲染机制。
Component

公共属性

Property Defined By
disabled : Boolean
当前组件处于无效状态时为true。 Read-only.
Component
el : Ext.Element
封装了当前组件的Ext.Element。 Read-only。通常情况下，这将是一个<DIV>元素，它由此类的...

封装了当前组件的Ext.Element。 Read-only。

通常情况下，这将是一个<DIV>元素，它由此类的 onRender方法创建，但是它可以通过使用 autoEl 配置项进行覆盖。

注意: 直到组件渲染完成此元素都将处于无效状态。

如需向当前组件的 DOM事件(而不是当前组件自己的Observable事件)添加监听器， 更多建议，参见 listeners 配置项，或者直接使用一个render监听器:

new Ext.Panel({
    title: 'The Clickable Panel',
    listeners: {
        render: function(p) {
            // Append the Panel to the click handler's argument list.
            p.getEl().on('click', handlePanelClick.createDelegate(null, [p], true));
        },
        single: true  // Remove the listener after first invocation
    }
});

另请参见 getEl

Component
hidden : Boolean
如果当前组件处于隐藏状态，此值为true。Read-only。
Component
initialConfig : Object
当前组件的初始化配置描述。 Read-only。
Component
ownerCt : Ext.Container
组件所属的Container (默认为undefined，当前组件被添加到一个容器中时此值被自动设置)...
组件所属的Container (默认为undefined，当前组件被添加到一个容器中时此值被自动设置)。 Read-only。

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

Component
parentMenu : Ext.menu.Menu
当前项的父菜单。
BaseItem
refOwner : Ext.Container
如果当前组件是一个容器的孩子，并且是通过一个 ref 配置项被注册的，则此值为 ref 引用被插入到的祖先容器。
如果当前组件是一个容器的孩子，并且是通过一个 ref 配置项被注册的，则此值为 ref 引用被插入到的祖先容器。
Component
rendered : Boolean
如果当前组件已经被渲染了，此值为true。Read-only.
Component

公共方法

Method Defined By
TextItem ( Object/String config )
创建一个新TextItem
创建一个新TextItem
参数:
  • config : Object/String
    如果config是一个字符串，它将被作为文本来显示， 否则它将被作为一个配置对象来应用（并需要包含一个text属性）。
返回值:
  • void
TextItem
addClass ( string cls ) : Ext.Component
为组件底层的元素添加CSS样式。
为组件底层的元素添加CSS样式。
参数:
  • cls : string
    需要添加的CSS样式的class名称
返回值:
  • Ext.Component
    this
Component
addEvents( Object|String o, string Optional. ) : void
添加指定的事件到事件列表上，事件会被该Observable触发。
添加指定的事件到事件列表上，事件会被该Observable触发。
参数:
  • o : Object|String
    以事件名作为属性true作为值的对象 或者当多个事件名被分开的传递时则为第一个事件名。
  • Optional. : string
    事件名被分开的传递时则为事件名。 用法:
    this.addEvents('storeloaded', 'storecleared');
返回值:
  • void
Observable
addListener( String eventName, Function handler, [Object scope], [Object options] ) : void
给对象添加事件处理器。
给对象添加事件处理器。
参数:
  • eventName : String
    监听的事件名。
  • handler : Function
    事件调用的方法
  • scope : Object
    （可选）处理方法执行的作用域 (this的引用 reference)。 如果被忽略。默认为触发事件的对象。
  • options : Object
    （可选）包含处理器配置和属性的对象。 可能包含以下的属性:
    • scope : Object
      处理方法执行的作用域(this的引用) 。 如果被忽略。默认为触发事件的对象。
    • delay : Number
      在触发事件后延迟调用处理器的毫秒数。
    • single : Boolean
      如果为True则添加一个处理器来处理下一次的事件触发（仅一次），然后移除自己。
    • buffer : Number
      使得处理器延迟指定毫秒数后预定的运行在 一个Ext.util.DelayedTask中 。 如果事件在时间内再一次被触发，原始的处理器不会被调用，但是新的处理器会预定的在他的位置上。
    • target : Observable
      如果事件在目标的Observable上触发则仅仅调用处理器， 否则 事件会从子类的Observable上冒泡

    组合选项
    使用这些选项参数,可能会组合出不同类型的监听器：

    一个延迟的，一次性的监听器。

    myDataView.on('click', this.onClick, this, {
single: true,
delay: 100
});

    一次调用附加多个处理器
    该方法同样支持传递一个包含指定的多个处理器的属性的配置对象参数。

    myGridPanel.on({
'click' : {
    fn: this.onClick,
    scope: this,
    delay: 100
},
'mouseover' : {
    fn: this.onMouseOver,
    scope: this
},
'mouseout' : {
    fn: this.onMouseOut,
    scope: this
}
});

    或者一个简写的语法：

    myGridPanel.on({
'click' : this.onClick,
'mouseover' : this.onMouseOver,
'mouseout' : this.onMouseOut,
 scope: this
});
返回值:
  • void
Observable
applyToMarkup ( String/HTMLElement el ) : void
将此组件添加到已存在的有效的HTML标签中。 使用该方法时，无需再调用render()方法。
将此组件添加到已存在的有效的HTML标签中。 使用该方法时，无需再调用render()方法。
参数:
  • el : String/HTMLElement
返回值:
  • void
Component
cloneConfig ( Object overrides ) : Ext.Component
默认使用原先传递给当前实例的配置值克隆当前组件。
默认使用原先传递给当前实例的配置值克隆当前组件。
参数:
  • overrides : Object
    一个新的配置项，包含需要覆盖到克隆版本的所有属性。 可以传递一个id参数给此对象，否则将自动生成一个新的id以避免发生重复。
返回值:
  • Ext.Component
    当前组件的克隆副本
Component
destroy () : void
通过如下方法销毁对象：删除所有的事件监听器、将组件的元素从DOM树中删除...
通过如下方法销毁对象：删除所有的事件监听器、将组件的元素从DOM树中删除（如果可以）、 将组件从它的 Ext.Container（如果可用）中删除、 并且将它从Ext.ComponentMgr中 注销。 销毁操作一般由框架自动完成，一般情况下不需要直接调用该方法。
参数:
  • 无。
返回值:
  • void
Component
disable () : Ext.Component
将组件置为无效状态，并出发'disable'事件。
将组件置为无效状态，并出发'disable'事件。
参数:
  • 无。
返回值:
  • Ext.Component
    this
Component
enable () : Ext.Component
将组件置为有效状态并触发'enable'事件。
将组件置为有效状态并触发'enable'事件。
参数:
  • 无。
返回值:
  • Ext.Component
    this
Component
enableBubble( String/Array events ) :void
是否现在使得事件会被该Observable触发并调用 this.getBubbleTarget()方法在拥有者的继承树...

是否现在使得事件会被该Observable触发并调用 this.getBubbleTarget()方法在拥有者的继承树中冒泡。Observable的基础类中没有该方法的实现。

该方法一般被Ext.Components用来冒泡事件到拥有者的容器。参看Ext.Component.getBubbleTarget默认的实现 在Ext.Component中返回组件的直接拥有者。但是如果需要的是一个已知的目标，该方法可以被重写来更快的访问需求的目标。

例子:

Ext.override(Ext.form.Field, {
    // 添加方法到Field的initComponent上改变事件为冒泡
    initComponent : Ext.form.Field.prototype.initComponent.createSequence(function() {
        this.enableBubble('change');
    }),

    // 我们知道我们想让Field的事件冒泡到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() {
            // 如果样式被修改标题会变红。
            myForm.header.setStyle('color', 'red');
        }
    }
});
参数:
  • events : String/Array
    冒泡的事件名，或事件名数组
返回值:
  • void
Observable
findParentBy ( Function fn ) : Ext.Container
通过自定义的函数查找当前组件上层任何层次上的容器...
通过自定义的函数查找当前组件上层任何层次上的容器。 如果传递的函数返回true，容器对象将被返回。
参数:
  • fn : Function
    自定义的函数，使用如下参数调用(container,this component)。
返回值:
  • Ext.Container
    自定义函数返回true的第一个容器
Component
findParentByType ( String/Class xtype ) : Ext.Container
通过xtype或者class查找当前组件上层任何层次上的容器
通过xtype或者class查找当前组件上层任何层次上的容器
参数:
  • xtype : String/Class
    组件的xtype字符串，或者直接是组件的class
返回值:
  • Ext.Container
    符合指定xtype或者class的第一个容器
Component
fireEvent( String eventName, Object... args ) : Boolean
用传入的参数触发指定的事件 (减去事件名)。 一个事件可以被设置为冒泡 Obse...

用传入的参数触发指定的事件 (减去事件名)。

一个事件可以被设置为冒泡到Observable父类继承树(参看 Ext.Component.getBubbleTarget) 调用enableBubble实现。

参数:
  • eventName : String
    触发的事件名。
  • args : Object...
    传递给处理器的可变长度参数。
返回值:
  • Boolean
    如果有任何的处理器返回false则返回false，否则返回true。
Observable
focus ( [ Boolean selectText ], [ Boolean/Number delay ] ) : Ext.Component
尝试将当前组件设为焦点。
尝试将当前组件设为焦点。
参数:
  • selectText : Boolean
    (可选) 如果可用，同时选中组件内部的文本
  • delay : Boolean/Number
    (可选)将当前组件设置为焦点的延迟时间(设置为true等于0毫秒)
返回值:
  • Ext.Component
    this
Component
getBubbleTarget () : Ext.Container
为Observable的fireEvent方法提供链接，它沿着继承结构进行冒泡操作。
为Observable的fireEvent方法提供链接，它沿着继承结构进行冒泡操作。
参数:
  • 无。
返回值:
  • Ext.Container
    拥有当前组件的容器。
Component
getEl () : Ext.Element
返回 Ext.Element ，它包装了当前组件。...

返回 Ext.Element ，它包装了当前组件。

通常情况下，这将是一个<DIV>元素，它是由该类的onRender方法创建的， 但是可以使用autoEl配置项 覆盖它。

注意: 此元素将会一直处于无效状态直到当前组件渲染完成。

如需向当前组件的 DOM事件(而不是当前组件自己的Observable事件)添加监听器， 更多建议，参见 listeners 配置项，或者直接使用一个render监听器:

new Ext.Panel({
    title: 'The Clickable Panel',
    listeners: {
        render: function(p) {
            // Append the Panel to the click handler's argument list.
            p.getEl().on('click', handlePanelClick.createDelegate(null, [p], true));
        },
        single: true  // Remove the listener after first invocation
    }
});
参数:
  • 无。
返回值:
  • Ext.Element
    包装当前组件的元素。
Component
getId () : String
返回当前组件的id，如果没有定义id，则自动生成并返回一个id:'ext-comp-'...
返回当前组件的 id 如果没有定义 id 则自动生成并返回一个 id

'ext-comp-' + (++Ext.Component.AUTO_ID)
参数:
  • 无。
返回值:
  • String
    id
Component
getItemId () : String
返回当前组件的 itemId 。 如果没有通过配置参数指定 itemId 那么，将会使用...
返回当前组件的 itemId 。 如果没有通过配置参数指定 itemId 那么，将会使用 getId 返回 id 。
参数:
  • 无。
返回值:
  • String
Component
getXType () : String
获取当前组件的xtype，它是用 Ext.ComponentMgr 注册的。 所有可用的xtype列表，参见...
获取当前组件的xtype，它是用 Ext.ComponentMgr 注册的。 所有可用的xtype列表，参见 Ext.Component 类头部。示例用法:

var t = new Ext.form.TextField();
alert(t.getXType());  // alerts 'textfield'
参数:
  • 无。
返回值:
  • String
    The xtype
Component
getXTypes () : String
返回此组件的xtype继承树，用字符'-'分隔。 所有可用的xtype值...

返回此组件的xtype继承树，用字符'-'分隔。 所有可用的xtype值，请参见Ext.Component 类的头部。

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

示例用法:

var t = new Ext.form.TextField();
alert(t.getXTypes());  // alerts 'component/box/field/textfield'
参数:
  • 无。
返回值:
  • String
    xtype层次字符串
Component
hasListener( String eventName ) : Boolean
检测对象是否包含指定事件的任何监听器
检测对象是否包含指定事件的任何监听器
参数:
  • eventName : String
    检测的事件名
返回值:
  • Boolean
    如果事件被监听则为true，否则为false
Observable
hide () : Ext.Component
隐藏当前组件。 监听 beforehide' 事件并且返回false 可以取消隐藏组件的操作。 在隐藏组件之后触发...
隐藏当前组件。 监听 beforehide' 事件并且返回false 可以取消隐藏组件的操作。 在隐藏组件之后触发 ' hide' 事件。 如果组件被配置成 hidden 那么此方法在内部被调用。
参数:
  • 无。
返回值:
  • Ext.Component
    this
Component
isVisible () : Boolean
如果当前组件可见，返回true。
如果当前组件可见，返回true。
参数:
  • 无。
返回值:
  • Boolean
    如果当前组件可见，返回true，其它返回false。
Component
isXType ( String xtype , [ Boolean shallow ] ) : Boolean
Tests whether or not this Component is of a specific xtype. This can test whether this Component is descended from th...

测试此组件是否是指定的xtype。此方法既可以测试是否是指定的xtype的某个子类， 或者它是否直接是指定的xtype类(shallow=true)。

如果使用你自己的子类，必须知道组件必须注册它的xtype值。

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

示例用法:

var t = new Ext.form.TextField();
var isText = t.isXType('textfield');        // true
var isBoxSubclass = t.isXType('box');       // true, descended from BoxComponent
var isBoxInstance = t.isXType('box', true); // false, not a direct BoxComponent instance
参数:
  • xtype : String
    需要为当前组件进行检测的xtype
  • shallow : Boolean
    (可选) 如果为false，检测组件是否是xtype继承树中的某个子类（默认是这种情况）， 如果为true，只检测组件是否是指定的xtype类型。
返回值:
  • Boolean
    如果当前组件是指定xtype的子类，返回true，其它返回flase。
Component
mon ( Observable|Element item , Object|String ename , Function fn , Object scope , Object opt ) : void
向任何Observable对象(或者元素)上添加监听器，监听器将会在组件...

向任何Observable对象(或者元素)上添加监听器，监听器将会在组件销毁时被自动删除。
用法：

myGridPanel.mon(myGridPanel.getSelectionModel(), 'selectionchange', handleSelectionChange, null, {buffer: 50});

or:

myGridPanel.mon(myGridPanel.getSelectionModel(), {
    selectionchange: handleSelectionChange,
    buffer: 50
});
参数:
  • item : Observable|Element
    需要添加listener/listeners的项目。
  • ename : Object|String
    事件名，或者一个包含事件名属性的对象。
  • fn : Function
    (可选) 如果 ename 参数是一个事件名，此参数为处理函数。
  • scope : Object
    (可选)如果 ename 参数是一个事件名称，此参数是作用域 ( this 引用)，监听函数将会在此作用域中被执行。
  • opt : Object
    (可选)如果 ename 参数是一个事件名称， 此参数是 addListener 配置项。
返回值:
  • void
Component
mun ( Observable|Element item , Object|String ename , Function fn , Object scope ) : void
删除通过mon 方法添加的监听器。
删除通过mon 方法添加的监听器。
参数:
  • item : Observable|Element
    需要删除listener/listeners的项目。
  • ename : Object|String
    事件名称，或者一个包含事件名称属性的对象。
  • fn : Function
    (可选)如果 ename 参数是一个事件名称，此参数是一个处理函数。
  • scope : Object
    (可选)如果 ename 参数是一个事件名称，此参数是作用域 ( this 引用)，监听函数将会在此作用域中被执行。
返回值:
  • void
Component
nextSibling () : Ext.Component
返回所属容器中的下一个组件
返回所属容器中的下一个组件
参数:
  • 无。
返回值:
  • Ext.Component
Component
on( String eventName, Function handler, [Object scope], [Object options] ) : void
给对象添加事件处理器 (addListener的简写形式)
给对象添加事件处理器 (addListener的简写形式。)
参数:
  • eventName : String
    监听的事件类型
  • handler : Function
    事件调用的方法
  • scope : Object
    （可选）处理方法执行时的作用域 (this 的引用)。 如果被忽略。默认为触发事件的对象。
  • options : Object
    可选 包含处理器配置的对象。
返回值:
  • void
Observable
previousSibling () : Ext.Component
返回所属容器中的前一个组件
返回所属容器中的前一个组件
参数:
  • 无。
返回值:
  • Ext.Component
Component
purgeListeners() : void
移除对象上所有的监听器
移除对象上所有的监听器
参数:
  • 无。
返回值:
  • void
Observable
relayEvents( Object o, Array events ) : void
从指定的Observable上传递选择的事件就好像被当前对象触发一样。
从指定的Observable上传递选择的事件就好像被当前对象触发一样。
参数:
  • o : Object
    该Observable上的事件被当前对象传递。
  • events : Array
    传递的数组名。
返回值:
  • void
Observable
removeClass ( string cls ) : Ext.Component
从组件底层的元素上删除一个CSS类。
从组件底层的元素上删除一个CSS类。
参数:
  • cls : string
    需要移除的CSS类名
返回值:
  • Ext.Component
    this
Component
removeListener( String eventName, Function handler, [Object scope] ) : void
删除一个事件处理器。
删除一个事件处理器。
参数:
  • eventName : String
    处理器关联的事件类型。
  • handler : Function
    移除的处理器。 这应该是传递到addListener里的方法的引用。
  • scope : Object
    （可选）处理器指定的初始作用域。
返回值:
  • void
Observable
render ( [ Element/HTMLElement/String container ], [ String/Number position ] ) : void
在传递进来的HTML元素中渲染当前组件。...

在传递进来的HTML元素中渲染当前组件。

如果你正在使用一个Container 对象放置当前组件，那么请不要使用render方法。

当容器第一次被渲染时，它的子组件将会被容器的 layout 管理器渲染。

某些布局管理器允许动态添加子组件。它们包括 Ext.layout.CardLayout, Ext.layout.AnchorLayout, Ext.layout.FormLayout, Ext.layout.TableLayout。

当一个新的子组件被添加时，如果容器已经被渲染了， 你可能需要调用容器的 doLayout 方法来刷新视图，它将导致所有没有被渲染的子组件进行渲染操作。 此操作是必须的，这样你可以添加多个子组件而只刷新一次layout。

当创建复杂的UI时，非常重要的一点是，请记住调整子项目的尺寸和位置是容器的 layout 管理器的职责。 如果你希望子项目的尺寸对用户交互作出反应， 你必须为容器配置一个布局管理器，它将创建和管理你心里想要的那种布局。

忽略容器的layout 配置意味着将会使用一个基本的布局管理器，它除了按次序把子组件 渲染到容器中之外什么事情都不做。 这种情况下，任何尺寸和位置的调整操作都不会发生。

参数:
  • container : Element/HTMLElement/String
    (可选) 需要在其中渲染当前组件的元素。 如果它是从一个已存在的标签中创建的，此参数应该被忽略。
  • position : String/Number
    (可选) 容器中的一个元素ID或者一个DOM节点索引， 当前组件将会被插入到它前面 (默认append到容器的尾部)
返回值:
  • void
Component
resumeEvents() : void
重新开始触发事件。(参见suspendEvents) 如果事件以queueSuspended参数被挂起，则在事件被挂起时 ...
重新开始触发事件。(参见 suspendEvents) 如果事件以queueSuspended 参数被挂起，则在事件被挂起时触发的事件会被传递到所有的监听器上
参数:
  • 无。
返回值:
  • void
Observable
setDisabled ( Boolean disabled ) : Ext.Component
工具函数，使用布尔值设置有效/无效(disabled/enabled )。
工具函数，使用布尔值设置有效/无效(disabled/enabled )。
参数:
  • disabled : Boolean
返回值:
  • Ext.Component
    this
Component
setHandler ( Function handler , Object scope ) : void
设置处理当前项单击事件的处理器 (等价于传递到 handler 配置属性)....
设置处理当前项单击事件的处理器 (等价于传递到 handler 配置属性)。 如果存在一个已经注册的处理器，它将会被注销。
参数:
  • handler : Function
    点击时调用的方法
  • scope : Object
    传递给处理器的作用域，默认为当前菜单选项。
返回值:
  • void
BaseItem
setVisible ( Boolean visible ) : Ext.Component
工具方法，通过使用布尔值隐藏或者显示当前组件。
工具方法，通过使用布尔值隐藏或者显示当前组件。
参数:
  • visible : Boolean
    true时显示，false时隐藏
返回值:
  • Ext.Component
    this
Component
show () : Ext.Component
显示当前组件。监听' beforeshow' 事件，返回 false 取消显示组件...
显示当前组件。监听' beforeshow' 事件，返回 false 取消显示组件。在显示组件之后触发' show' 事件。
参数:
  • 无。
返回值:
  • Ext.Component
    this
Component
suspendEvents( Boolean queueSuspended ) : void
暂停触发所有的事件。 (参看resumeEvents)
暂停触发所有的事件。（参看 resumeEvents)
参数:
  • queueSuspended : Boolean
    如果传递为true则排列好暂停的事件使得在调用 resumeEvents 后再触发它们，而不是抛弃所有暂停的事件。
返回值:
  • void
Observable
un( String eventName, Function handler, [Object scope] ) : void
删除一个事件处理器(removeListener方法的简写形式)
删除一个事件处理器(removeListener方法的简写形式。)
参数:
  • eventName : String
    处理器关联的事件类型
  • handler : Function
    被删除的处理器 这应该是传入 addListener 中的方法的引用。
  • scope : Object
    （可选）为处理器指定的初始作用域。
返回值:
  • void
Observable
update ( Mixed htmlOrData , [ Boolean loadScripts ], [ Function callback ] ) : void
刷新组件的内部区域。
刷新组件的内部区域。
参数:
  • htmlOrData : Mixed
    如果已经通过tpl为当前组件配置了一个模板，那么 将会使用此参数来装配模板。 如果没有为当前组件配置模板，组件的内容区域将会通过Ext.Element 进行刷新。
  • loadScripts : Boolean
    (可选)只用在使用html配置时此参数才合法。默认为false。
  • callback : Function
    (可选)只用在使用html配置时此参数才合法。 当脚本加载完成时回调函数才被执行。
返回值:
  • void
Component

公共事件

Event Defined By
activate : ( Ext.menu.BaseItem this )
该项目被激活为当前活动项时触发
该项目被激活为当前活动项时触发
监听器将会以如下的参数格式调用：
  • this : Ext.menu.BaseItem
BaseItem
added : ( Ext.Component this , Ext.Container ownerCt , number index )
当一个组件被添加到一个Ext.Container时触发
当一个组件被添加到一个Ext.Container时触发
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • ownerCt : Ext.Container
    用于组件的容器
  • index : number
    添加组件的位置
Component
afterrender : ( Ext.Component this )
在组件渲染完成之后触发...

在组件渲染完成之后触发。

afterrender事件在当前组件被rendered 结束之后、在为组件定义的所有afterRender方法执行之后 触发，并且，如果有stateful， 也在状态被保存之后才触发。

监听器将会以如下参数格式被调用:
  • this : Ext.Component
Component
beforedestroy : ( Ext.Component this )
在组件 destroyed 之前触发。 在事件监听器中返回false以停止 destroy 操作。
在组件 destroyed 之前触发。 在事件监听器中返回false以停止 destroy 操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforehide : ( Ext.Component this )
在调用hide方法隐藏组件之前触发。 在事件监听器中返回false可以停止隐藏操作。
在调用hide方法隐藏组件之前触发。 在事件监听器中返回false可以停止隐藏操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforerender : ( Ext.Component this )
在组件被rendered 之前触发。 在事件监听器中返回false可以停止render 操作。
在组件被rendered 之前触发。 在事件监听器中返回false可以停止render 操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforeshow : ( Ext.Component this )
在调用show()方法现实组件之前触发。 事件处理函数返回false可以停止show。
在调用show 方法现实组件之前触发。 事件处理函数返回false可以停止show。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforestaterestore : ( Ext.Component this , Object state )
在组件状态恢复之前触发。返回false停止恢复状态操作。
在组件状态恢复之前触发。返回false停止恢复状态操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    StateProvider返回的状态哈希值。 如果没有禁止此事件，那么状态对象会被传递给applyState。 默认情况下，这样简单地把属性值拷贝到当前组件中。 可以覆盖此方法以提供自定的状态恢复操作。
Component
beforestatesave : ( Ext.Component this , Object state )
在组件状态被保存到配置的状态提供者之前触发。 返回false可以停止保存。
在组件状态被保存到配置的状态提供者之前触发。 返回false可以停止保存。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    状态值哈希。 这由在组件上调用getState() 方法决定。 此方法必须由开发者提供，返回是否需要对状态进行描述，默认情况下， Ext.Component有一个空实现。
Component
click : ( Ext.menu.BaseItem this , Ext.EventObject e )
当前选项被点击时触发
当前选项被点击时触发
监听器将会以如下的参数格式调用:
  • this : Ext.menu.BaseItem
  • e : Ext.EventObject
BaseItem
deactivate : ( Ext.menu.BaseItem this )
当此项目被设置为非当前活动项时触发
当此项目被设置为非当前活动项时触发
监听器将会以如下的参数格式调用:
  • this : Ext.menu.BaseItem
BaseItem
destroy : ( Ext.Component this )
在组件被销毁之后触发。
在组件被destroyed之后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
disable : ( Ext.Component this )
在组件被设置为无效状态后触发。
在组件被设置为无效状态后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
enable : ( Ext.Component this )
当组件被设置为有效(enabled)之后触发。
当组件被设置为有效(enabled)之后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
hide : ( Ext.Component this )
在组件被隐藏之后触发。 当调用hide 方法隐藏组件之后触发。
在组件被隐藏之后触发。 当调用hide 方法隐藏组件之后触发。
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
removed : ( Ext.Component this , Ext.Container ownerCt )
当一个组件被从Ext.Container容器中删除时触发
当一个组件被从Ext.Container容器中删除时触发
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • ownerCt : Ext.Container
    持有组件的容器
Component
render : ( Ext.Component this )
在组件被渲染之后触发。
在组件被 rendered(渲染) 之后触发。
监听器将以如下的参数格式被调用:
  • this : Ext.Component
Component
show : ( Ext.Component this )
在调用show 方法显示组件之后触发。
在调用show 方法显示组件之后触发。
监听器将会用如下的参数格式被调用:
  • this : Ext.Component
Component
staterestore : ( Ext.Component this , Object state )
组件状态被存储之后触发。
组件状态被存储之后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    StateProvider返回的状态哈希值。 如果没有禁止此事件，那么状态对象会被传递给applyState。 默认情况下，这样简单地把属性值拷贝到当前组件中。 可以覆盖此方法以提供自定的状态恢复操作。
Component
statesave : ( Ext.Component this , Object state )
在组件状态被保存到所配置的状态提供者之后触发。
在组件状态被保存到所配置的状态提供者之后触发。
监听器将会用如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    状态值hash。 这是由在足见上调用getState() 方法决定的。 开发者必须提供此方法以返回是否需要恢复状态，默认情况下， Ext.Component有一个空实现。
Component


Class Ext.MessageBox

包: | Ext
定义类的文件: | MessageBox.js
类: | MessageBox
继承自: | Object

工具类，用来产生不同风格的消息框。 也可以使用Ext.Msg这个别名。

MessageBox是异步的。与常规的JavaScript alert (它会挂起浏览器，不能执行其它脚本) 不同，显示一个MessageBox不会导致代码停止执行。因为此原因，如果你的代码需要在用户对MessageBox作出反馈之后才执行，你必须使用一个回调函数 (详情参见show的 function 参数)。

示例用法:

                // 基本的alert:
Ext.Msg.alert('Status', 'Changes saved successfully.');

// 用户对话框，用一个回调函数处理结果:
Ext.Msg.prompt('Name', 'Please enter your name:', function(btn, text){
    if (btn == 'ok'){
        // 处理文本值，然后关闭...
    }
});

// 使用配置选项显示一个对话框:
Ext.Msg.show({
   title:'Save Changes?',
   msg: 'You are closing a tab that has unsaved changes. Would you like to save your changes?',
   buttons: Ext.Msg.YESNOCANCEL,
   fn: processResult,
   animEl: 'elId',
   icon: Ext.MessageBox.QUESTION
});

这是一个单例的类，不能直接实例化。

公共属性

Property |  | Defined By
 | CANCEL : Object 按钮配置，显示单个“Cancle”按钮 | MessageBox
 | ERROR : String CSS类，提供了ERROR图标的图片 | MessageBox
 | INFO : String CSS类，提供INFO图标的图片 | MessageBox
 | Msg : Object Ext.MessageBox的缩写 | MessageBox
 | OK : Object 按钮配置，显示单个的“OK”按钮 | MessageBox
 | OKCANCEL : Object 按钮配置，显示OK和Cancle按钮 | MessageBox
 | QUESTION : String CSS类，提供了QUESTION图标的图片 | MessageBox
 | WARNING : String CSS类，提供了WARNING图标的图片 | MessageBox
 | YESNO : Object 按钮配置，显示Yes和No按钮 | MessageBox
 | YESNOCANCEL : Object 按钮配置，显示Yes,No和Cancle按钮 | MessageBox
 | buttonText : Object 一个包含默认按钮文本字符串的对象，可以覆盖它以提供本地化支持。 支持的属性有 ok, cancel, yes 和 no... 一个包含默认按钮文本字符串的对象，可以覆盖它以提供本地化支持。 支持的属性有 ok, cancel, yes 和 no。 一般情况下，你需要包含一个本地特定的源文件来提供对整个框架的语言支持。 定制默认的文本就像这样： Ext.MessageBox.buttonText.yes = "oui"; //法语 （译者注：晕倒，为什么不是中文！严重打击了我的爱国主义热情！） | MessageBox
 | defaultTextHeight : Number 消息框多行文本域默认高度像素值，如果它被显示(默认值为 75) | MessageBox
 | maxWidth : Number T消息框最大宽度像素值 (默认值为 600) | MessageBox
 | minProgressWidth : Number 如果是一个进展条风格的对话框，此值为消息框的最小宽度像素值... 如果是一个进展条风格的对话框，此值为消息框的最小宽度像素值。 这对于设置一个不同的最小宽度很有用，如果不是纯文本的对话框可能非常 需要此属性(默认值为 250) | MessageBox
 | minPromptWidth : Number 以像素为单位的消息窗体（如果这是个prompt窗体）最小宽度... 以像素为单位的消息窗体（如果这是个prompt窗体）最小宽度，设置一个和只有文本的对话窗体不同的最小宽度是很有用的（默认值为250）。 | MessageBox
 | minWidth : Number 消息框的最小宽度像素值 (默认值为 100) | MessageBox

公共方法

Method Defined By
alert ( String title , String msg , [ Function fn ], [ Object scope ] ) : Ext.MessageBox
显示一个标准的只读消息框，含有一个OK按钮 (类似于基本的alert提示框)...
显示一个标准的只读消息框，含有一个OK按钮 (类似于基本的alert提示框)。如果传递了一个回调函数，在用户点击按钮之后它会被调用，并且被点击按钮的id会作为唯一的参数传递给回调函数 (也可以是右上角的关闭按钮)。
参数:
  • title : String
    标题栏文本
  • msg : String
    窗体文本
  • fn : Function
    可选 窗口关闭时的回调函数
  • scope : Object
    可选 回调函数的作用域( this 引用)，默认为浏览器窗体。
返回值:
  • Ext.MessageBox
    this
MessageBox
confirm ( String title , String msg , [ Function fn ], [ Object scope ] ) : Ext.MessageBox
显示一个确认消息框，含有Yes和No按钮(与JavaScript的confirm类似)...
显示一个确认消息框，含有Yes和No按钮(与JavaScript的confirm类似)。 如果传递了回调函数，在用户点击任意一个按钮之后它都会被调用， 并且被点击的按钮的id会作为唯一的参数传递给回调函数 (也可以是右上角的关闭按钮)。
参数:
  • title : String
    标题栏文本
  • msg : String
    窗体文本
  • fn : Function
    可选 窗口关闭时的回调函数
  • scope : Object
    可选 回调函数的作用域( this 引用)，默认为浏览器窗体。
返回值:
  • Ext.MessageBox
    this
MessageBox
getDialog () : Ext.Window
Returns a reference to the underlying Ext.Window element
返回底层 Ext.Window元素的一个引用
参数:
  • 无。
返回值:
  • Ext.Window
    窗口
MessageBox
hide () : Ext.MessageBox
隐藏消息框如果它处于显示状态
隐藏消息框如果它处于显示状态
参数:
  • 无。
返回值:
  • Ext.MessageBox
    this
MessageBox
isVisible () : Boolean
如果消息框当前被显示，返回true
如果消息框当前被显示，返回true
参数:
  • 无。
返回值:
  • Boolean
    如果消息框当前被显示则为true，反之false
MessageBox
progress ( String title , String msg , [ String progressText ] ) : Ext.MessageBox
显示一个消息框，包含一个进展条。 此消息框没有按钮，并且不能被用户关闭...
显示一个消息框，包含一个进展条。 此消息框没有按钮，并且不能被用户关闭。 如果需要，你自己负责通过Ext.MessageBox.updateProgress更新进展条，并且在处理完成时关闭消息框。
参数:
  • title : String
    标题栏文本
  • msg : String
    窗体文本
  • progressText : String
    可选 进度条文本 (默认为'')
返回值:
  • Ext.MessageBox
    this
MessageBox
prompt ( String title , String msg , [ Function fn ], [ Object scope ], [ Boolean/Number multiline ], [ String value ] ) : Ext.MessageBox
显示一个消息框，含有OK和Cancle按钮，提示用户输入一些文本 (类似于JavaScript的 prompt)...
显示一个消息框，含有OK和Cancle按钮，提示用户输入一些文本 (类似于JavaScript的 prompt)。 prompt可以是一个单行或者多行文本框。 如果传递了一个回调函数，当用户点击任意一个按钮时都会被调用， 并且被点击按钮的id(也可以是右上角的关闭按钮) 和输入的文本将被作为两个参数传递给回调函数。
参数:
  • title : String
    标题栏文本
  • msg : String
    窗体文本
  • fn : Function
    可选 窗口关闭时的回调函数
  • scope : Object
    可选 回调函数的作用域( this 引用)，默认为浏览器窗体。
  • multiline : Boolean/Number
    可选 为真则利用defaultTextHeight或者指定高度（以像素为单位）建立一个多行文本区（默认为false/single-line单行）
  • value : String
    可选 文本输入元素的某人值（默认为‘’）
返回值:
  • Ext.MessageBox
    this
MessageBox
setIcon ( String icon ) : Ext.MessageBox
向对话框添加一个指定的图标。 默认情况下，'ext-mb-icon'被用作默认的风格...
向对话框添加一个指定的图标。 默认情况下，'ext-mb-icon'被用作默认的风格， 传递进来的CSS类被期望提供一个背景图片的url。 传递一个空字符串('')可以清除任何现存的图标。 支持以下内建的图标CSS类，但是你也可以传递一个定制的CSS类名：
Ext.MessageBox.INFO
Ext.MessageBox.WARNING
Ext.MessageBox.QUESTION
Ext.MessageBox.ERROR
参数:
  • icon : String
    CSS类名，用来定义图标背景图片的url，或者空字符串用于清楚图标
返回值:
  • Ext.MessageBox
    this
MessageBox
show ( Object config ) : Ext.MessageBox
根据传递进来的配置选项， 显示一个新的消息框，或者重新初始化一个已有的消息框...
根据传递进来的配置选项， 显示一个新的消息框，或者重新初始化一个已有的消息框。 MessageBox上的所有显示函数（例如prompt, alert等等）在内部调用此函数， 虽然这些调用是基本的快捷方式且并不支持这里所允许的所有配置选项。
参数:
  • config : Object
    The following config options are supported:
    • animEl : String/Element
      一个id或者元素，作为当打开和关闭消息框时动画效果的起点(终点) (默认值为 undefined)
    • buttons : Object/Boolean
      一个按钮配置对象 (例如： Ext.MessageBox.OKCANCEL 或者 {ok:'Foo', cancel:'Bar'})，或者为false，不允许任何按钮 (默认值为 false)
    • closable : Boolean
      设置为false，禁用右上角的关闭按钮(默认值为 true)。注意：进展条和等待对话框将忽略此属性，并且总是隐藏关闭按钮，因为它们只能通过程序关闭。
    • cls : String
      一个应用到消息框容器元素的定制CSS类
    • defaultTextHeight : Number
      T如果显示，此值为消息框多行文本默认高度的像素值(默认值为 75)
    • fn : Function
      一个回调函数，在解散对话框时调用：通过点击所配置的按钮，或者对话框的关闭按钮，或者通过按下返回按钮键入输入。

      进展条和等待对话框将忽略此选项，因为它们不会对用户操作作出响应，并且只能通过程序关闭，所以在关闭对话框之后，任何所需的函数都应该在相同的代码中被调用。 参数 passed:

      • buttonId : String
        被按下的按钮的ID，属于如下情况之一:
        • ok
        • yes
        • no
        • cancel
      • text : String
        prompt 或者 multiline 为true时，输入栏的值。
      • opt : Object
        配置对象。

    • scope : Object
      回调方法的作用域
    • icon : String
      一个CSS类，提供一个背景图片，被用作对话框body的图标 (例如Ext.MessageBox.WARNING 或者'custom-class') (默认值为 '')
    • iconCls : String
      标准的Ext.Window.iconCls用来添加一个可选的头部图标(默认值为 '')
    • maxWidth : Number
      消息框最大宽度像素值(默认值为 600)
    • minWidth : Number
      消息框最小宽度像素值(默认值为 100)
    • modal : Boolean
      设置为false，在显示消息框时允许用户与页面进行交互(默认值为 true)
    • msg : String
      一个字符串，用来替换消息框现有的body文本 (默认值为遵守XHTML标准的不间断的空字符' ')
    • multiline : Boolean
      设置为true，提示用户输入多行文本(默认值为 false)
    • progress : Boolean
      设置为true以显示一个进展条(默认值为 false)
    • progressText : String
      当progress = true时在进展条内显示的文本 (默认值为 '')
    • prompt : Boolean
      设置为true，提示用户输入单行文本(默认值为 false)
    • proxyDrag : Boolean
      设置为true，在拖拽时显示一个轻量级的代理对象(默认值为 false)
    • title : String
      标题文本
    • value : String
      字符串值，用来设置到活动的textbox元素，如果它被显示
    • wait : Boolean
      设置为true以显示一个进展条 (默认值为 false)
    • waitConfig : Object
      一个 Ext.ProgressBar.waitConfig 对象 (只有在wait = true时有效)
    • width : Number
      对话框宽度像素值
    示例用法:
                                                    Ext.Msg.show({
   title: 'Address',
   msg: 'Please enter your address:',
   width: 300,
   buttons: Ext.MessageBox.OKCANCEL,
   multiline: true,
   fn: saveAddress,
   animEl: 'addAddressBtn',
   icon: Ext.MessageBox.INFO
});
返回值:
  • Ext.MessageBox
    this
MessageBox
updateProgress ( Number value , String progressText , String msg ) : Ext.MessageBox
更新一个进展条风格消息框的文本和进展条...
更新一个进展条风格消息框的文本和进展条。只与通过 Ext.MessageBox.progress 或 Ext.MessageBox.wait, 或者通过调用 Ext.MessageBox.show 同时progress:true初始化的消息框相关。
参数:
  • value : Number
    0和1之间的任何数值 (例如： .5, 默认值为 0)
  • progressText : String
    进度文本 (默认值为 '')
  • msg : String
    替换消息窗体的文本的指定文本（默认undefined，除非赋予新值否则窗体文本不会被覆盖）
返回值:
  • Ext.MessageBox
    this
MessageBox
updateText ( [ String text ] ) : Ext.MessageBox
更新消息框body中的文本
更新消息框body中的文本
参数:
  • text : String
    可选 替换消息窗体innerHTML的指定字符串（某人为'&#160;'）
返回值:
  • Ext.MessageBox
    this
MessageBox
wait ( String msg , [ String title ], [ Object config ] ) : Ext.MessageBox
显示一个消息框，含有一个无限次滚动的进展条。 当等待一个长时间的处理，而没有定义时间间隔时...
显示一个消息框，含有一个无限次滚动的进展条。 当等待一个长时间的处理，而没有定义时间间隔时， 可以用来阻塞与用户交互。 当处理结束时，你必须自己负责关闭消息框。
参数:
  • msg : String
    窗体文本
  • title : String
    可选 标题栏文本
  • config : Object
    可选 一个 Ext.ProgressBar.waitConfig 对象
返回值:
  • Ext.MessageBox
    this
MessageBox

公共事件

该类没有公共事件。


Observable
    Component
      BoxComponent
        Container
          Toolbar
            PagingToolbar

Class Ext.PagingToolbar

包: | Ext
定义类的文件: | PagingToolbar.js
类: | PagingToolbar
继承自: | Toolbar

随着记录数量的增加，浏览器渲染它们所需要的事件越来越长。 分页用来降低与客户端交互的数据量。注意：如果记录/行数 比屏幕的有效可见区域更多，将会自动添加垂直滚动条。

典型的分页在服务端进行处理(参见以下例外情况)。 客户端发送参数到服务端，服务端需要解析它们并返回所需要的数据。

Ext.PagingToolbar是一个专用的工具条，它被绑定到 Ext.data.Store 并提供自动分页控制。 通过传递paramNames 作为分页参数，此组件 loads 数据块到 store 中。

PagingToolbar典型地被用作Grid的工具条之一:

Ext.QuickTips.init(); // 用来显示按钮的快速提示
var myStore = new Ext.data.Store({
    reader: new Ext.data.JsonReader({
        totalProperty: 'results',
        ...
    }),
    ...
});

var myPageSize = 25;  // 服务端脚本每次应该只返回25条记录

var grid = new Ext.grid.GridPanel({
    ...
    store: myStore,
    bbar: new Ext.PagingToolbar({
        store: myStore,       // grid and PagingToolbar using same store
        displayInfo: true,
        pageSize: myPageSize,
        prependButtons: true,
        items: [
            'text 1'
        ]
    })
});

如需使用分页，在store第一次加载时传递分页请求到服务器。

store.load({
    params: {
        // specify params for the first page load if using paging
        start: 0,
        limit: myPageSize,
        // other params
        foo:   'bar'
    }
});

如果使用store's autoLoad 配置项:

var myStore = new Ext.data.Store({
    autoLoad: {params:{start: 0, limit: 25}},
    ...
});

从服务端返回的数据包格式可能如下:

{
    "success": true,
    "results": 2000,
    "rows": [ // *Note: this must be an Array
        { "id":  1, "name": "Bill", "occupation": "Gardener" },
        { "id":  2, "name":  "Ben", "occupation": "Horticulturalist" },
        ...
        { "id": 25, "name":  "Sue", "occupation": "Botanist" }
    ]
}

本地数据分页

分页也可以使用插件完成本地分页:

  • Ext.ux.data.PagingStore
  • Memory Proxy分页(examples/ux/PagingMemoryProxy.js)

配置项

Config Options Defined By
activeItem : String/Number
一个string型的组件id，或者组件的数字索引， 它需要...
一个string型的组件id，或者组件的数字索引， 它需要在渲染时在容器内的布局管理器中被初始化并激活。 例如：activeItem: 'item-1' 或者 activeItem: 0 ( 索引 0 =容器子项目集合中的第一个元素)。 activeItem仅仅适用于一次显示一个组件的布局模式(比如 Ext.layout.AccordionLayout, Ext.layout.CardLayout 和 Ext.layout.FitLayout)。 与 Ext.layout.ContainerLayout.activeItem 相关。
Container
afterPageText : String
自定义的默认分页文本(默认为 'of {0}'). 注意，此字符串被使用{0}作为占位符被初始化...
自定义的默认分页文本(默认为 'of {0}'). 注意，此字符串被使用{0}作为占位符被初始化， 它将会被总页数值替换。如果必须显示总页数，当覆盖此字符串时，占位符应该保留。
PagingToolbar
allowDomMove : Boolean
在渲染时组件是否可以移动Dom节点(默认为true)。
Component
anchor : String
注: 这个配置只用于该组件被包含在一个已使用AnchorLayout...

注: 这个配置只用于该组件被包含在一个已使用 AnchorLayout (或者其子类)配置的Container时。 基于布局管理器，例如：

  • Ext.form.FormPanel
  • 指定 layout: 'anchor' // or 'form', or 'absolute'

参见 Ext.layout.AnchorLayout. anchor 。

BoxComponent
applyTo : Mixed
指定一个元素的id、一个DOM元素或者一个已经存在并被渲染到DIV中的元素，此DIV已经被...

指定一个元素的id、一个DOM元素或者一个已经存在并被渲染到DIV中的元素，此DIV已经被 渲染到document中，并且为当前组件指定了一些结构化的标签。

  • 描述 :
      当使用了 applyTo， 在主元素中也可以用id或者CSS类名来指定组件的托管部分， 并且，如果可以的话，创建的组件可能也会试图在那个标签中创建它的子组件。
  • 注意 :
      当使用此配置项时，无需调用render()方法。
      如果指定了applyTo属性，任何传递给 renderTo 的值都会被忽略，并且目标元素的父节点将会自动被用作组件的容器。
Component
autoDestroy : Boolean
如果为true，容器将自动销毁任何从其中被删除的组件， 否则...
如果为true，容器将自动销毁任何从其中被删除的组件， 否则必须手动处理销毁操作(默认为true)。
Container
autoEl : Mixed
一个表签名或者一个 DomHelper 描述，用来创建 Element ，它将封装当前组件...

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

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

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

{
    xtype: 'box',
    autoEl: {
        tag: 'img',
        src: 'http://www.example.com/example.jpg'

    }
}, {
    xtype: 'box',
    autoEl: {
        tag: 'blockquote',
        html: 'autoEl is cool!'
    }
}, {
    xtype: 'container',
    autoEl: 'ul',
    cls: 'ux-unordered-list',
    items: {
        xtype: 'box',
        autoEl: 'li',
        html: 'First list item'
    }
}
Component
autoHeight : Boolean
如果值为true，height配置项为'auto'，否则值为false的话使用固定的高度...

如果值为true，height配置项为'auto'，否则值为false的话使用固定的高度， 或者可以由其父类容器 layout manager来控制。(默认值为 false)。

注: 虽然很多组件继承了这个配置选项，但不是所有这些组件的自适应高度配置都会像期望的那样起作用。 设置autoHeight：值为true时，浏览器将根据元素的内容自动设置高度，这将意味着Ext不会去管理高度。

如果是由浏览器来管理高度，需要注意的是，通过浏览器进行调整的结构组件内不能被发现， 因此宽度的变化可能导致需要进行同步处理元素的高度。 例如：

var w = new Ext.Window({
    title: 'Window',
    width: 600,
    autoHeight: true,
    items: {
        title: 'Collapse Me',
        height: 400,
        collapsible: true,
        border: false,
        listeners: {
            beforecollapse: function() {
                w.el.shadow.hide();
            },
            beforeexpand: function() {
                w.el.shadow.hide();
            },
            collapse: function() {
                w.syncShadow();
            },
            expand: function() {
                w.syncShadow();
            }
        }
    }
}).show();
BoxComponent
autoScroll : Boolean
如果值为true，将会在该元素上使用overflow:'auto'配置，并且在必要的时候...
如果值为true，将会在该元素上使用overflow:'auto'配置，并且在必要的时候自动显示滚动条，否则，溢出部分的组件都会被切除(默认值为 false)。
BoxComponent
autoShow : Boolean
如果组件需要检测隐藏CSS属性(如 'x-hidden' 或者 'x-hide-display')并且在渲染时删除...
如果组件需要检测隐藏CSS属性(如 'x-hidden' 或者 'x-hide-display')并且在渲染时删除它们 (默认为false)，设置此值为true。
Component
autoWidth : Boolean
如果为true，使用width:'auto'配置，否则使用固定的宽度...

如果为true，使用width:'auto'配置，否则使用固定的宽度，或者可以由其父类容器的layout manager来控制。(默认值为 false)。

注: 虽然很多组件继承了这个配置选项，但不是所有这些组件的自适应宽度配置都会像期望的那样起作用。 设置autoWidth：值为true时，浏览器将根据元素的内容自动设置宽度，这将意味着Ext不会去管理宽度。

如果是由浏览器来管理宽度，需要注意的是，通过浏览器进行调整的结构组件内不能被发现，因此宽度的变化可能导致需要进行同步处理元素的宽度。 例如，在这个元素的目标是：

<div id='grid-container' style='margin-left:25%;width:50%'></div>
当浏览器窗口改变时，渲染后的Panel必须监听浏览器窗口大小的变化，以便通知子项，浏览器改变了其宽度：

var myPanel = new Ext.Panel({
    renderTo: 'grid-container',
    monitorResize: true, // relay on browser resize
    title: 'Panel',
    height: 400,
    autoWidth: true,
    layout: 'hbox',
    layoutConfig: {
        align: 'stretch'
    },
    defaults: {
        flex: 1
    },
    items: [{
        title: 'Box 1',
    }, {
        title: 'Box 2'
    }, {
        title: 'Box 3'
    }],
});
BoxComponent
beforePageText : String
在输入元素前面显示的文本(默认为 'Page').
PagingToolbar
boxMaxHeight : Number
设置组件的最大高度值...

设置组件的最大高度值。

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

BoxComponent
boxMaxWidth : Number
设置组件的最大宽度值...

设置组件的最大宽度值。

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

BoxComponent
boxMinHeight : Number
设置组件的最小高度值...

设置组件的最小高度值。

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

BoxComponent
boxMinWidth : Number
设置组件的最小宽度值...

设置组件的最小宽度值。

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

BoxComponent
bubbleEvents : Array
一个事件数组，当这些事件被触发时，将会被冒泡到所有父容器中。参见....

一个事件数组，当这些事件被触发时，将会被冒泡到所有父容器中。参见 Ext.util.Observable.enableBubble。 默认为 []。

Container
bufferResize : Boolean/Number
当设置为true时(50毫秒)或者是一个毫秒数值， 指定给当前容器的布...
当设置为true时(50毫秒)或者是一个毫秒数值， 指定给当前容器的布局管理器将会缓存它计算出的频率，然后 对组件进行一次重新布局操作。 对于重量级的容器，或者拥有大量子组件的容器来说，这非常有用， 因为频繁进行布局是非常昂贵的。 默认为 50 .
Container
buttonAlign : String
子项目的默认对齐位置。 默认为 "left" .也可以指定为 "center" ，这将会导致项目被添加到一个Fill(一个 "->" )...

子项目的默认对齐位置。 默认为 "left"

也可以指定为 "center" ，这将会导致项目被添加到一个Fill(一个 "->" )项目之前，以保证位于Toolbar中间。 在Fill之后添加的项目仍然靠右对齐。

指定为 "right" 可以让所有子项目靠右对齐。

Toolbar
clearCls : String
应用到特殊的clearing div的CSS类， 这个clearing div直接渲染到每个form field的包装器后面...

应用到特殊的clearing div的CSS类， 这个clearing div直接渲染到每个form field的包装器后面，以提供 清除field的功能(默认为 'x-form-clear-left')。

注意: 只有在当前组件被渲染到一个使用FormLayout 布局(例如 Ext.form.FormPanel 或者指定 layout:'form')的 容器中、或者是指定了一个fieldLabel 、或者指定isFormField=true 时此配置才有效。

另请参见 Ext.layout.FormLayout. fieldTpl。

Component
cls : String
一个可选的额外CSS类，它将被添加到当前组件的元素上(默认为'')...
一个可选的额外CSS类，它将被添加到当前组件的元素上(默认为'')。 此属性对于在组件上，或者它的任何使用标准CSS规则的孩子节点上， 添加定制的样式非常有用。
Component
contentEl : String
(可选)指定一个已存在的HTML元素，或者一个已存在HTML元素的...

(可选)指定一个已存在的HTML元素，或者一个已存在HTML元素的 id ，它们将被用作当前组件的内容。

  • 描述 :
    此配置选项被用来将一个已存在的HTML元素 插入到一个新组件(在组件渲染之后它简单地移动DOM元素) 的layout元素中，使它成为该组件的内容。
  • 注意 :
    指定的HTML元素将被append到组件的layout元素中， 在所有配置的 HTML 被插入之后， 并且，这样的话，在render事件 被触发时，document中将不再包含此元素。
    指定的HTML元素将不会参与组件所有可能使用的 layout 过程(译者注：指这些HTML元素 不会参与布局操作)。 它仅是HTML而已。布局操作实在孩子 items 上进行的。
    添加 x-hidden 或者 x-hide-display CSS类，以防在内容渲染到panel时发生闪烁。
Component
ctCls : String
一个可选的外部CSS样式，添加到这个组件的容器(默认值为 '')。 这个方法对于使用标准的CSS规则...

一个可选的外部CSS样式，添加到这个组件的容器(默认值为 '')。 这个方法对于使用标准的CSS规则，为组件或它的任何一个子组件添加特定的样式非常有用。 参见 Ext.layout.ContainerLayout和 extraCls 。

注意: ctCls 默认为 ''期望如下的类，它们将指定一个默认值:

  • Box Layout : 'x-box-layout-ct'
使用一个额外的CSS类配置以上的Class，它是append到默认对象上的。例如， 对于BoxLayout (Hbox and Vbox):
                                ctCls: 'x-box-layout-ct custom-class'

Component
data : Mixed
初始化数据集，它将被应用到 tpl 上以刷新组件的内容区域。
Component
defaultType : String
当一个子项目通过一个原生的配置对象 而不是一个组件的实例指定时。...

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

默认为 'panel' ， Ext.menu.Menu 默认为 'menuitem' ， Ext.Toolbar 和 Ext.ButtonGroup 默认为 'button' 。

Container
defaults : Object|Function
此选项是在所有添加的项目上应用默认设置的手段， 这些项目要么是通过...

此选项是在所有添加的项目上应用默认设置的手段， 这些项目要么是通过 items 配置项添加的， 或者是通过 add 或者是通过 insert 方法添加的。

如果添加的项目是一个配置对象， 并且不是一个组件的实例， 那么默认参数将会被无条件地被应用。 如果添加的项目是一个组件的实例， 那么默认参数将有条件地被应用，以免覆盖项目上的现有属性你。

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

例如，如需自动在 Ext.Panel 所包含的每个项目上应用padding属性，你可以传递: defaults: {bodyStyle: 'padding:15px'} 。

用法:

defaults: {               // defaults are applied to items, not the container
    autoScroll:true
},
items: [
    {
        xtype: 'panel',   // defaults do not have precedence over
        id: 'panel1',     // options in config objects, so the defaults
        autoScroll: false // will not be applied here, panel1 will be autoScroll:false
    },
    new Ext.Panel({       // defaults do
                                     have precedence over options
        id: 'panel2',     // options in components, so the defaults
        autoScroll: false // will be applied here, panel2 will be autoScroll:true.
    })
]
Container
disabled : Boolean
当前组件处于无效状态时为true。 Read-only.
Component
disabledClass : String
当组件处于无效状态时添加到组件上的CSS类(默认为 'x-item-disabled')。
Component
displayInfo : Boolean
true将会显示displayMsg(默认为false)
PagingToolbar
displayMsg : String
需要显示的分页状态信息(默认为 'Displaying {0} - {1} of {2}'). 注意，此字符串被格式化成使用连接的数字...
需要显示的分页状态信息(默认为 'Displaying {0} - {1} of {2}'). 注意，此字符串被格式化成使用连接的数字 {0}-{2}作为占位符号，它们会分别被 start, end 和 total的值替换掉。 如果必须显示这些值，当覆盖此字符串时，应该保留占位符。
PagingToolbar
emptyMsg : String
在没有找到记录时显示的消息(默认为'No data to display')
PagingToolbar
enableOverflow : Boolean
默认为false。 配置 true 可以使工具条提供一个按钮，它扮演一个下拉菜单，用来显示...
默认为false。 配置 true 可以使工具条提供一个按钮，它扮演一个下拉菜单，用来显示 溢出Toolbar宽度的项目。
Toolbar
fieldLabel : String
紧靠此field显示的标签文本(默认值为 '')。注意...

紧靠此field显示的标签文本(默认值为 '')。

注意:只有在当前组件被渲染到一个使用FormLayout 的容器中时，此配置才有效。 (例如 Ext.form.FormPanel 或 指定 layout:'form')。

另请参见 hideLabel 、 Ext.layout.FormLayout和 fieldTpl。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Name'
    }]
});
Component
firstText : String
第一个分页按钮显示的快速提示文本(默认为 'First Page'). 注意: 为了显示快速提示，必须初始化。
第一个分页按钮显示的快速提示文本(默认为 'First Page'). 注意: 为了显示快速提示，必须初始化。
PagingToolbar
flex : Number
注: 这个配置只用于该组件被包含在一个已使用BoxLayout配置的Container中时...

注: 这个配置只用于该组件被包含在一个已使用BoxLayout配置的Container中时。通过计算每一个子组件的flex值所占全部flex值之和的比例，来决定子组件的宽(HBoxLayout)高(VBoxlayout)。 任何子项的 flex = 0 或 flex = undefined 将不被设置(初始值大小将不被改变)。

BoxComponent
forceLayout : Boolean
如果此值为true，容器将将强制初始化一次布局操作...
如果此值为true，容器将将强制初始化一次布局操作， 即使容器处于隐藏或者折叠状态。 此配置项对于在一个折叠或者隐藏的容器中强制渲染非常有用 (默认为false)。
Container
height : Number
组件的高度(默认值为 auto)。注:如果想使用百分比的方式...
组件的高度(默认值为 auto)。注:如果想使用百分比的方式来设置值，请查看 Ext.Component.anchor。
BoxComponent
hidden : Boolean
如果当前组件处于隐藏状态，此值为true。Read-only。
Component
hideBorders : Boolean
设置为true可以隐藏所包含的每个组件的边框， false为遵照组件现有的边框设置...
设置为true可以隐藏所包含的每个组件的边框， false为遵照组件现有的边框设置(默认为 false)。
Container
hideLabel : Boolean
true时完全隐藏label元素 ( label 和 separator)。 默认为 false。 默认情况下，即使你不指定...

true时完全隐藏label元素 ( label 和 separator)。 默认为 false。 默认情况下，即使你不指定 fieldLabel 它的空间仍然会被保留，这样这块区域会与其它确实拥有label的区域位于同一排。 讲此值设置为 true 将导致此区域不再保留此空间。

注意: 参见 clearCls 的注释。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield'
        hideLabel: true
    }]
});
Component
hideMode : String
组件如何隐藏，支持的值有： 'visibility' (css visibility), 'offsets' (位置偏移量为负值) 和...

组件如何隐藏，支持的值有： 'visibility' (css visibility), 'offsets' (位置偏移量为负值) 和 'display' (css display).

注意:一般首选默认值 'display'，因为当组件第一次显示的时候它们会自动进行布局 (隐藏的时候不会调整尺寸)。

Component
hideParent : Boolean
此值为true时，当调用hide/show方法时，将会hide和show组件的容器...
此值为true时，当调用hide/show方法时，将会hide和show组件的容器；false时将会 hide和show组件自身(默认为false)。例如，这可以用作window上隐藏按钮的一种 快捷操作，通过设置此按钮的hideParent:true，然后把它添加到window上。
Component
html : String/Object
一个HTML片段，或者一个 DomHelper 描述，用作layout元素的内容(默认为'')。...
一个HTML片段，或者一个 DomHelper 描述，用作layout元素的内容(默认为'')。 这个HTML内容在组件渲染之后才被添加，所以在 render 出发的时候，document中尚未包含此HTML。 但是这个内容将会在所有配置的 contentEl 之前被插入到body标签中。
Component
id : String
当前组件唯一的id(默认为auto-assigned id)...

当前组件唯一的id(默认为auto-assigned id)。 如果你需要在以后访问组件，而又没有一个有效的组件对象引用，那么你需要指定一个 id( 也就是，使用Ext. getCmp方法 )。

注意，此id也将被用作组件底层HTML标签的id，这些标签被渲染到页面中。 这将允许你编写基于id的CSS规则，以独立地描述指定的实例；并且，也可以通过 组件父标签的id选中子元素。

注意:为了避免与唯一的id 产生重复， 请参见 itemId 和 ref 。

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

Component
itemCls : String
注意: 只有在当前组件被渲染到一个使用FormLayout 布局的 容器中时此配置才有效...

注意: 只有在当前组件被渲染到一个使用FormLayout 布局的 容器中时此配置才有效。 (例如Ext.form.FormPanel 或者指定 layout:'form')。

一个附加的CSS类，应用到div上，包装当前field的表单元素。 如果提供了此参数， field级上的itemCls将会覆盖 container级上提供的 默认itemCls。 为itemCls指定的值将会被添加默认的 类('x-form-item')。

既然它被应用到项目的包装器上(参见 Ext.layout.FormLayout。 fieldTpl)， 它将允许你编写能应用到此field、label(如果有指定)、或者field内部任何其它元素的标准CSS规则。

注意: 参考 fieldLabel的注释。 .

示例用法:

// Apply a style to the field's label:
<style>
    .required .x-form-item-label {font-weight:bold;color:red;}
</style>

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Name',
        itemCls: 'required' //this label will be styled
    },{
        xtype: 'textfield',
        fieldLabel: 'Favorite Color'
    }]
});
Component
itemId : String
当没有可利用的对象引用时，itemId可以作为第二选择，用来获得一个组件的引用， 代替 ...

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

var c = new Ext.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'); // 与 Ext.getCmp()不同

p2 = p1.ownerCt.getComponent('p2'); // 通过兄弟对象获得引用

另请参见 id 和 ref 。

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

Component
items : MixedCollection
当前容器中的子组件集合 Ext.util.MixedCollection
Container
labelSeparator : String
每个fieldLabel 文本后面现实的分隔符。 此属性可以在多个层次上进行配置...

每个fieldLabel 文本后面现实的分隔符。 此属性可以在多个层次上进行配置。优先顺序为：

  • field / component level
  • container level
  • layout level (默认为冒号 ':')
如不需要为当前field的label显示分隔符，指定一个空字符串''即可。

注意:参见 clearCls 的注释。

另请参见 hideLabel 和 Ext.layout.FormLayout。 fieldTpl。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    layoutConfig: {
        labelSeparator: '~'   // layout config has lowest priority (defaults to ':')
    },
    labelSeparator: '>>',     // config at container level
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Field 1',
        labelSeparator: '...' // field/component level config supersedes others
    },{
        xtype: 'textfield',
        fieldLabel: 'Field 2' // labelSeparator will be '='

    }]
});
Component
labelStyle : String
一个CSS样式描述字符串，它将直接应用到当前field的label上...

一个CSS样式描述字符串，它将直接应用到当前field的label上。 如果有设置，默认为容器的labelStyle值(例如 Ext.layout.FormLayout.labelStyle , 或者 '')。

注意:参见 clearCls 的注释。

另请参见 hideLabel 和 Ext.layout.FormLayout. fieldTpl。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Name',
        labelStyle: 'font-weight:bold;'
    }]
});
Component
lastText : String
最后一页按钮上显示的快速提示文本(默认为'Last Page'). 注意: 为了显示快速提示，必须初始化。
最后一页按钮上显示的快速提示文本(默认为'Last Page'). 注意: 为了显示快速提示，必须初始化。
PagingToolbar
layout : String/Object
*重要: 为了让子项目能被正确地调整尺寸和位置， 典型地，必须通过 layout 配置项指定一个布局管理器。...

*重要: 为了让子项目能被正确地调整尺寸和位置， 典型地，必须通过 layout 配置项指定一个布局管理器。

调整子items的尺寸和位置 是容器的布局管理器的职责，它负责创建和管理你想要的那种布局类型。 例如:

new Ext.Window({
    width:300, height: 300,
    layout: 'fit', // explicitly set layout manager: override the default (layout:'auto')
    items: [{
        title: 'Panel inside a Window'
    }]
}).show();

如果没有为一个通用的容器(例如Container或者Panel)特别指定 layout ，将会使用default layout manager ，它除了将子组件按顺序渲染到容器中之外什么事情都不做( 这种情况下不会发生调整尺寸和位置的操作)。 一些容器类内部指定了一个默认的布局 (例如FormPanel指定了 layout: 'form' )。 另一些有特殊用途的类内部指定/管理它们内置的布局( 例如GridPanel, TabPanel, TreePanel, Toolbar, Menu等等)。

layout 既可以通过一个对象或者一个字符串指定:

  • 用一个对象指定
    • 示例用法:
      • layout: {
    type: 'vbox',
    padding: '5',
    align: 'left'
}
    • type

      • 当前容器需要使用的布局类型。 如果不指定，将创建并使用一个默认的 Ext.layout.ContainerLayout 。

      可用的布局 type 值是:

      • absolute
      • accordion
      • anchor
      • auto Default
      • border
      • card
      • column
      • fit
      • form
      • hbox
      • menu
      • table
      • toolbar
      • vbox
    • 布局描述配置参数

      • 也可以指定附加的布局描述配置。 关于每个布局类型可用配置选项完整的细节，参见 type 参数指定的相关布局类。

  • 通过一个字符串指定
    • 示例用法:
      • layout: 'vbox',
layoutConfig: {
    padding: '5',
    align: 'left'
}
    • layout

      • 当前容器使用的布局 type ( 可用的布局类型值参见上述列表)。

    • layoutConfig

      • 附件的布局描述配置参数。 关于每个布局类型可用配置选项完整的细节，参见 layout 参数指定的相关布局类。

Toolbar
layoutConfig : Object
这是一个配置对象，包含为 layout 指定的参数， 如果 layout 是作为一个 string 来指定的。

Container
listeners : Object
一个包含一个或多个事件处理器的配置对象，会在初始化的时候被添加到目标对象上...

一个包含一个或多个事件处理器的配置对象，会在初始化的时候被添加到目标对象上。 该配置对象应该是一个有效的监听器配置对象就像 addListener例子中指定的一样可一次附加多个处理器。

ExtJs Components上的DOM事件

一些 ExtJs Component 类导出时会选择一些DOM事件(例如 "click", "mouseover" 等等), 这通常只是在有额外的值可以被添加时发生。例如DataView类的 click事件会传递被点击的节点。也可以直接在Component的HTMLElementevent上访问DOM事件，但必需在Component被渲染后监听器才能添加到Element 上。可以按照以下步骤添加插件:

// 插件会用一个监听器配置对象进行配置。
//该组件会被添加到所有处理方法的参数列表上。
Ext.DomObserver = Ext.extend(Object, {
    constructor: function(config) {
        this.listeners = config.listeners ? config.listeners : config;
    },

    // 组件将自己传递进了插件的初始化方法里
    init: function(c) {
        var p, l = this.listeners;
        for (p in l) {
            if (Ext.isFunction(l[p])) {
                l[p] = this.createHandler(l[p], c);
            } else {
                l[p].fn = this.createHandler(l[p].fn, c);
            }
        }

        // 渲染后立即添加监听器到元素上
        c.render = c.render.createSequence(function() {
            var e = c.getEl();
            if (e) {
                e.on(l);
            }
        });
    },

    createHandler: function(fn, c) {
        return function(e) {
            fn.call(this, e, c);
        };
    }
});

var combo = new Ext.form.ComboBox({

    // 元素被点击后折叠
    plugins: [ new Ext.DomObserver({
        click: function(evt, comp) {
            comp.collapse();
        }
    })],
    store: myStore,
    typeAhead: true,
    mode: 'local',
    triggerAction: 'all'
});

Observable
margins : Object
注:此配置只用于该组件展现在一个使用BorderLayout...

注:此配置只用于该组件展现在一个使用BorderLayout 或 BoxLayout的两个子类之一作为布局的容器。

这个margins对象在该组件中的格式为：

{top: (top margin),right: (right margin),bottom: (bottom margin),left: (left margin)}

也可以是一个字符串，中间用空格分隔，margin值为数字。 把matches中每一个值的次序跟CSS中margin值的排列方式相对应：

  • 如果只有一个值，它适用于所有方面。
  • 如果有两个值，top和bottom的边框设置为第一个值，left和right设置为第二个值。
  • 如果有三个值，top设置为第一个值，left和right设置为第二个值，bottom设置为第三个值。
  • 如果有四个值，分别设置为top, right, bottom, left。

默认值:

{top:0, right:0, bottom:0, left:0}
BoxComponent
monitorResize : Boolean
设置为true自动监测window的resize事件，以便处理所有对当前窗口尺寸 敏感的事情。...
设置为true自动监测window的resize事件，以便处理所有对当前窗口尺寸 敏感的事情。 典型地，通过选择一个 layout 来管理这个值，并且不应该手动设置它。
Container
nextText : String
下一页按钮显示的快速提示文本(默认为 'Next Page'). 注意: 为了显示快速提示，必须初始化。
下一页按钮显示的快速提示文本(默认为 'Next Page'). 注意: 为了显示快速提示，必须初始化。
PagingToolbar
overCls : String
一个可选的额外的CSS类，它将在鼠标移过元素时被添加到组件上...
一个可选的额外的CSS类，它将在鼠标移过元素时被添加到组件上，鼠标移出时 删除。(默认为'')。此属性对于在组件上，或者它的任何使用标准CSS规则的孩子节点上， 添加定制的'active' 或者 'hover'样式非常有用。
Component
pageSize : Number
每页显示的记录条数。 另请参见 cursor .
PagingToolbar
pageX : Number
如果该组件被包含在一个指定位置的容器中，这个值表示页面级的x坐标值（译者注：在有滚动条的情况下这个值很有用）。
BoxComponent
pageY : Number
如果该组件被包含在一个指定位置的容器中，这个值表示页面级的y坐标值（译者注：在有滚动条的情况下这个值很有用）。
BoxComponent
plugins : Object/Array
一个对象或者一个对象数组，为组件提供特殊的功能 ...
一个对象或者一个对象数组，为组件提供特殊的功能。 对一个合法的插件唯一的要求是它含有一个init()方法， 能接收一个Ext.Component型的参数。 当组件被创建时，如果有可用的插件，组件将会调用每个插件的init方法， 并将自身的引用作为方法参数传递给它。然后，每个插件就可以调用方法或者响应组件上的事件， 就像需要的那样提供自己的功能。
Component
prependButtons : Boolean
true将会把所有配置的 items插入到分页按钮 之前。默认为 false.
PagingToolbar
prevText : String
上一页按钮上显示的快速提示文本(默认为'Previous Page')...
上一页按钮上显示的快速提示文本(默认为'Previous Page')。 注意: 为了显示快速提示，必须初始化。
PagingToolbar
ptype : String
需要创建配置的ptype。 当传递一个配置对象给构造函数时...
需要创建配置的ptype。 当传递一个配置对象给构造函数时，此配置选项不会被使用。 只有在使用懒初始化的时候此配置项才会被使用， 此时Plugin不是 通过一个完整的实例组件，而是通过一个Component配置指定的。 在渲染时，将会查找ptype以决定创建何种类型的Plugin。

如果你创建自己的Plugin，你可以通过 Ext.ComponentMgr.registerPlugin 对它们进行注册，以便能利用懒初始化和渲染机制。
Component
ref : String
一个路径描述，与组件的 ownerCt 相关，它描述了把当前组件的命名引用放置到哪个父容器中去。...

一个路径描述，与组件的 ownerCt 相关，它描述了把当前组件的命名引用放置到哪个父容器中去。

祖先的坐标路径可以通过'/'字符进行分隔。 例如，将一个Toolbar Button的引用放入 拥有此Toolbar的Panel中:

var myGrid = new Ext.grid.EditorGridPanel({
    title: 'My EditorGridPanel',
    store: myStore,
    colModel: myColModel,
    tbar: [{
        text: 'Save',
        handler: saveChanges,
        disabled: true,
        ref: '../saveButton'
    }],
    listeners: {
        afteredit: function() {
//          The button reference is in the GridPanel
            myGrid.saveButton.enable();
        }
    }
});

在上面的代码中，如果 ref 是 'saveButton' ，那么引用将会被放置到Toolbar中。 ref 中的每个'/' 都会从组件的 ownerCt 向上移动一级。

另请参见 added 和 removed 事件。

Component
refreshText : String
刷新按钮显示的快速提示文本(默认为 'Refresh'). 注意: 为了显示快速提示，必须初始化。
刷新按钮显示的快速提示文本(默认为 'Refresh'). 注意: 为了显示快速提示，必须初始化。
PagingToolbar
region : String
注: 此配置只用于该组件展现在一个布局为BorderLayout的容器中...

注: 此配置只用于该组件展现在一个布局为BorderLayout的容器中(例如指定layout:'border')。

详见Ext.layout.BorderLayout。

BoxComponent
renderTo : Mixed
该值可以是一个节点的id、一个DOM节点或者一个已存在的元素...

该值可以是一个节点的id、一个DOM节点或者一个已存在的元素， 组件将会被渲染到其中。

  • 注意 :
      如果组件不是一个Container 的子项目时， 不要使用此选项。 渲染和管理它的子项目是一个Container 的layout manager的责任。
      当使用此配置项时，无需调用render()方法。

另请参见 render 。

Component
resizeEvent : String
在布局中进行尺寸调整需要监听的事件。 默认为 'resize' 。
Container
stateEvents : Array
一个事件数组，当它们被触发时，组件需要保存自己的状态(默认值为 none)...

一个事件数组，当它们被触发时，组件需要保存自己的状态(默认值为 none)。 它们可以是任何该组件支持的事件类型，包括浏览器事件和 自定义事件(例如['click', 'customerchange'])。

对于保存和恢复组件状态的详细解释，参见 stateful

Component
stateId : String
为该组件指定的唯一的id值，它被用作管理组件状态的目的...
为该组件指定的唯一的id值，它被用作管理组件状态的目的。 (如果设定了id，默认值为组件自己的id，否则，如果组件使用自动生成的id，此值为null)。

对于保存和反解析组件状态的解释，参见 stateful 。

Component
stateful : Boolean
一个标志参数，它将引起组件在启动时尝试从一个保存的状态中恢复内部状态参数...

一个标志参数，它将引起组件在启动时尝试从一个保存的状态中恢复内部状态参数。 组件必须要么拥有一个 stateId 或者 id ，它们被分配给需要被管理的状态属性。 在跨页面加载时，不保证自动生成的id属性的稳定性， 并且，不能依赖此id来保存和恢复一个组件的相同状态。

为了保存状态的操作能够工作，状态管理器的提供者必须 被设置成一个Ext.state.Provider 的实现类，它覆盖了set 和get 方法，以便保存和恢复name/value对。 有一个内置的Ext.state.CookieProvider 可用。

为当前页面设置状态提供者:

Ext.state.Manager.setProvider(new Ext.state.CookieProvider({
    expires: new Date(new Date().getTime()+(1000*60*60*24*7)), //7 days from now
}));

当 stateEvents 配置项中其中之一的事件被触发时， 一个状态可保存的组件将试图保存其状态。

保存状态时，一个可保存状态的组件首先需要通过调用 getState 方法来序列化它的状态。 默认情况下，此函数什么事都不做。 开发者必须提供一个实现，返回一个hash对象，它描述了组件可恢复的状态。

getState方法产生的值将会传递给 Ext.state.Manager.set 方法，它使用配置的 Ext.state.Provider 来保存对象，以组件的 stateId 为key，或者，如果此值（指stateId）没有指定时， 使用它的 id 作为key。

在进行构造时，一个可保存状态的组件试图通过调用 Ext.state.Manager.get方法来 恢复它的状态，传递 stateId 或者，如果此值（指stateId）没有指定时， 使用它的 id 作为参数。

结果对象被传递给 applyState 。 applyState 的默认实现只是简单地把属性拷贝到对象中， 但是开发者可以覆盖此方法以支持更多行为。

通过向 beforestaterestore, staterestore, beforestatesave 和 statesave 事件上绑定监听器，你可以在保存和恢复状态时进行额外的处理。

Component
store : Ext.data.Store
分页工具条用作数据源的Ext.data.Store(必须)。
PagingToolbar
style : String
被添加到组件元素的特定样式。 必须是按照...
被添加到组件元素的特定样式。 必须是按照 Ext.Element.applyStyles 类指定格式的合法参数值。

new Ext.Panel({
    title: 'Some Title',
    renderTo: Ext.getBody(),
    width: 400, height: 300,
    layout: 'form',
    items: [{
        xtype: 'textarea',
        style: {
            width: '95%',
            marginBottom: '10px'
        }
    },
        new Ext.Button({
            text: 'Send',
            minWidth: '100',
            style: {
                marginBottom: '10px'
            }
        })
    ]
});
Component
tabTip : String
注: 这个配置只用于当该组件作为TabPanel的一个子项目时使用...

注: 这个配置只用于当该组件作为TabPanel的一个子项目时使用。

一个String类型的innerHTML(支持html标签)，当鼠标放在该选项上的时，显示一个tooltip。为了tips能够被渲染，Ext.QuickTips.init()必须被提前调用。
BoxComponent
tpl : Mixed
一个 Ext.Template , Ext.XTemplate 或者一个用来形成一个Ext.XTemplate的字符串数组...
一个 Ext.Template , Ext.XTemplate 或者一个用来形成一个Ext.XTemplate的字符串数组。 与 data 和 tplWriteMode 配置项协同使用。
Component
tplWriteMode : String
刷新组件的内容区域时使用的Ext.(X)Template方式。 默认为'overwrite' (参见 Ext.XTemplate.overwrite )。
刷新组件的内容区域时使用的Ext.(X)Template方式。 默认为'overwrite' (参见 Ext.XTemplate.overwrite )。
Component
width : Number
组件的宽度(默认值为 auto)。注:如果想使用百分比的方式...
组件的宽度(默认值为 auto)。注:如果想使用百分比的方式来设置值，请查看 Ext.Component.anchor。
BoxComponent
x : Number
如果被包含在一个指定位置的容器中，这个值表示x(left)坐标值。
BoxComponent
xtype : String
需要创建配置的xtype。 当传递一个配置对象给构造函数时...
需要创建配置的xtype。 当传递一个配置对象给构造函数时，此配置选项不会被使用。 只有在使用懒初始化的时候此配置项才会被使用，此时容器的子项目不是 通过一个完整的实例组件，而是通过一个Component配置指定的。 在渲染时，将会查找xtype以决定创建何种类型的子组件。

预定义的xtype列表如下： here。

如果你继承Component创建你自己的组件，你需要使用Ext.ComponentMgr.registerType 对它们进行注册，以便利用懒初始化和渲染机制。
Component
y : Number
如果被包含在一个指定位置的容器中，这个值表示y(top)坐标值。
BoxComponent

公共属性

Property Defined By
cursor : Number
记录位置指示器。 此参数可以用来获得当前活动的页码，例如:...
记录位置指示器。 此参数可以用来获得当前活动的页码，例如:
// t是分页工具条的引用
var activePage = Math.ceil((t.cursor + t.pageSize) / t.pageSize);
PagingToolbar
disabled : Boolean
当前组件处于无效状态时为true。 Read-only.
Component
el : Ext.Element
封装了当前组件的Ext.Element。 Read-only。通常情况下，这将是一个<DIV>元素，它由此类的...

封装了当前组件的Ext.Element。 Read-only。

通常情况下，这将是一个<DIV>元素，它由此类的 onRender方法创建，但是它可以通过使用 autoEl 配置项进行覆盖。

注意: 直到组件渲染完成此元素都将处于无效状态。

如需向当前组件的 DOM事件(而不是当前组件自己的Observable事件)添加监听器， 更多建议，参见 listeners 配置项，或者直接使用一个render监听器:

new Ext.Panel({
    title: 'The Clickable Panel',
    listeners: {
        render: function(p) {
            // Append the Panel to the click handler's argument list.
            p.getEl().on('click', handlePanelClick.createDelegate(null, [p], true));
        },
        single: true  // Remove the listener after first invocation
    }
});

另请参见 getEl

Component
hidden : Boolean
如果当前组件处于隐藏状态，此值为true。Read-only。
Component
initialConfig : Object
当前组件的初始化配置描述。 Read-only。
Component
items : MixedCollection
当前容器中的子组件集合 Ext.util.MixedCollection
Container
ownerCt : Ext.Container
组件所属的Container (默认为undefined，当前组件被添加到一个容器中时此值被自动设置)...
组件所属的Container (默认为undefined，当前组件被添加到一个容器中时此值被自动设置)。 Read-only。

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

Component
pageSize : Number
每页显示的记录条数。 另请参见 cursor .
PagingToolbar
paramNames : Object
不赞成。paramNames应该在data store中设置...

不赞成。 paramNames 应该在data store中设置 (参见Ext.data.Store.paramNames).

参数名对象映射，被load调用，初始设置为:

{start: 'start', limit: 'limit'}
PagingToolbar
private : Object
我们只能在一块可见的区域进行布局。 布局目标*或者它的任何父元素* 为...
我们只能在一块可见的区域进行布局。 布局目标*或者它的任何父元素* 为display:none， 将意味着它没有一块可见的区域。
Container
refOwner : Ext.Container
如果当前组件是一个容器的孩子，并且是通过一个 ref 配置项被注册的，则此值为 ref 引用被插入到的祖先容器。
如果当前组件是一个容器的孩子，并且是通过一个 ref 配置项被注册的，则此值为 ref 引用被插入到的祖先容器。
Component
rendered : Boolean
如果当前组件已经被渲染了，此值为true。Read-only.
Component

公共方法

Method Defined By
PagingToolbar ( Object config )
创建新的PagingToolbar
创建新的PagingToolbar
参数:
  • config : Object
    配置对象
返回值:
  • void
PagingToolbar
add ( ...Object/Array component ) : Ext.Component/Array
向当前容器中添加 Component(s)。 描述 :在添加之前触发 beforeadd 事件...

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

描述 :

  • 在添加之前触发 beforeadd 事件
  • 将会相应地应用 容器的default config values (细节参见 defaults )。
  • 在组件添加之后触发 add 事件。

注意 :

  • 当调用 add 时如果容器已经被渲染， 你可能需要调用 doLayout 方法来刷新视图，它将导致所有尚未渲染的子组件进行渲染操作。 此操作是必须的，这样你可以 add 多个子组件而只刷新一次layout。 示例用法:

var tb = new Ext.Toolbar();
tb.render(document.body);  // toolbar is rendered
tb.add({text:'Button 1'}); // add multiple items (defaultType for Toolbar is 'button')
tb.add({text:'Button 2'});
tb.doLayout();             // refresh the layout
  • 警告: 使用BorderLayout布局的容器可能不能删除或者添加组件。 更多细节参见BorderLayout 的注释。
参数:
  • component : ...Object/Array

    需要添加的一个或多个组件，或者是一个组件数组。 更多信息参见 items 。

返回值:
  • Ext.Component/Array
    被添加的组件。
Toolbar
addButton ( Object/Array config ) : Ext.Button/Array
添加按钮(或者buttons)。 对于此配置的更多信息参见 Ext.Button .
添加按钮(或者buttons)。 对于此配置的更多信息参见 Ext.Button .

注意: 参见Ext.Container.add 中的注释。

参数:
  • config : Object/Array
    一个按钮配置或者配置数组
返回值:
  • Ext.Button/Array
Toolbar
addClass ( string cls ) : Ext.Component
为组件底层的元素添加CSS样式。
为组件底层的元素添加CSS样式。
参数:
  • cls : string
    需要添加的CSS样式的class名称
返回值:
  • Ext.Component
    this
Component
addDom ( Object config ) : Ext.Toolbar.Item
使用传递的Ext.DomHelper 配置项，向工具条中添加一个新元素。注意: 参见Ext.Container.add 中的注释。
使用传递的Ext.DomHelper 配置项，向工具条中添加一个新元素。

注意: 参见Ext.Container.add 中的注释。

参数:
  • config : Object
返回值:
  • Ext.Toolbar.Item
    元素的项目
Toolbar
addElement ( Mixed el ) : Ext.Toolbar.Item
向工具条中添加任何标准的HTML元素。注意: 参见Ext.Container.add 中的注释。
向工具条中添加任何标准的HTML元素。

注意: 参见Ext.Container.add 中的注释。

参数:
  • el : Mixed
    需要添加的元素或其id
返回值:
  • Ext.Toolbar.Item
    元素项目
Toolbar
addEvents( Object|String o, string Optional. ) : void
添加指定的事件到事件列表上，事件会被该Observable触发。
添加指定的事件到事件列表上，事件会被该Observable触发。
参数:
  • o : Object|String
    以事件名作为属性true作为值的对象 或者当多个事件名被分开的传递时则为第一个事件名。
  • Optional. : string
    事件名被分开的传递时则为事件名。 用法:
    this.addEvents('storeloaded', 'storecleared');
返回值:
  • void
Observable
addField ( Ext.form.Field field ) : Ext.Toolbar.Item
添加一个动态渲染的Ext.form表单项(TextField, ComboBox, 等)。注意：表单项必须尚未被渲染...
添加一个动态渲染的Ext.form表单项(TextField, ComboBox, 等)。注意：表单项必须尚未被渲染。 对于一个已经被渲染的表单项，请使用 addElement.

注意: 参见Ext.Container.add 中的注释。

参数:
  • field : Ext.form.Field
返回值:
  • Ext.Toolbar.Item
Toolbar
addFill () : void
强制后来添加的对象被添加到float:right工具条中。 注意: 参见Ext.Container.add 中的注释。
强制后来添加的对象被添加到float:right工具条中。

注意: 参见Ext.Container.add 中的注释。

参数:
  • 无。
返回值:
  • void
Toolbar
addItem ( Ext.Toolbar.Item item ) : Ext.Toolbar.Item
添加任何Toolbar.Item或者子类。 注意: 参见Ext.Container.add 中的注释。
添加任何Toolbar.Item或者子类。

注意: 参见Ext.Container.add 中的注释。

参数:
  • item : Ext.Toolbar.Item
返回值:
  • Ext.Toolbar.Item
    item
Toolbar
addListener( String eventName, Function handler, [Object scope], [Object options] ) : void
给对象添加事件处理器。
给对象添加事件处理器。
参数:
  • eventName : String
    监听的事件名。
  • handler : Function
    事件调用的方法
  • scope : Object
    （可选）处理方法执行的作用域 (this的引用 reference)。 如果被忽略。默认为触发事件的对象。
  • options : Object
    （可选）包含处理器配置和属性的对象。 可能包含以下的属性:
    • scope : Object
      处理方法执行的作用域(this的引用) 。 如果被忽略。默认为触发事件的对象。
    • delay : Number
      在触发事件后延迟调用处理器的毫秒数。
    • single : Boolean
      如果为True则添加一个处理器来处理下一次的事件触发（仅一次），然后移除自己。
    • buffer : Number
      使得处理器延迟指定毫秒数后预定的运行在 一个Ext.util.DelayedTask中 。 如果事件在时间内再一次被触发，原始的处理器不会被调用，但是新的处理器会预定的在他的位置上。
    • target : Observable
      如果事件在目标的Observable上触发则仅仅调用处理器， 否则 事件会从子类的Observable上冒泡

    组合选项
    使用这些选项参数,可能会组合出不同类型的监听器：

    一个延迟的，一次性的监听器。

    myDataView.on('click', this.onClick, this, {
single: true,
delay: 100
});

    一次调用附加多个处理器
    该方法同样支持传递一个包含指定的多个处理器的属性的配置对象参数。

    myGridPanel.on({
'click' : {
    fn: this.onClick,
    scope: this,
    delay: 100
},
'mouseover' : {
    fn: this.onMouseOver,
    scope: this
},
'mouseout' : {
    fn: this.onMouseOut,
    scope: this
}
});

    或者一个简写的语法：

    myGridPanel.on({
'click' : this.onClick,
'mouseover' : this.onMouseOver,
'mouseout' : this.onMouseOut,
 scope: this
});
返回值:
  • void
Observable
addSeparator () : Ext.Toolbar.Item
添加一个分隔栏。 注意: 参见Ext.Container.add 中的注释。
添加一个分隔栏。

注意: 参见Ext.Container.add 中的注释。

参数:
  • 无。
返回值:
  • Ext.Toolbar.Item
    分隔栏{@link Ext.Toolbar.Item item}
Toolbar
addSpacer () : Ext.Toolbar.Spacer
添加一个空格元素。 注意: 参见Ext.Container.add 中的注释。
添加一个空格元素。

注意: 参见Ext.Container.add 中的注释。

参数:
  • 无。
返回值:
  • Ext.Toolbar.Spacer
    空格元素
Toolbar
addText ( String text ) : Ext.Toolbar.Item
向工具条中添加文本。 注意:参见Ext.Container.add 中的注释。
向工具条中添加文本。

注意:参见Ext.Container.add 中的注释。

参数:
  • text : String
    需要添加的文本
返回值:
  • Ext.Toolbar.Item
    元素的项目
Toolbar
applyToMarkup ( String/HTMLElement el ) : void
将此组件添加到已存在的有效的HTML标签中。 使用该方法时，无需再调用render()方法。
将此组件添加到已存在的有效的HTML标签中。 使用该方法时，无需再调用render()方法。
参数:
  • el : String/HTMLElement
返回值:
  • void
Component
bind ( Ext.data.Store store ) : void
将分页工具栏绑定到指定的 Ext.data.Store (不推荐)
将分页工具栏绑定到指定的 Ext.data.Store (不推荐)
参数:
  • store : Ext.data.Store
    需要绑定的数据store
返回值:
  • void
PagingToolbar
bindStore ( Store store , [ Boolean initial ] ) : void
将分页工具栏绑定到指定的 Ext.data.Store 上
将分页工具栏绑定到指定的 Ext.data.Store 上
参数:
  • store : Store
    需要绑定当前工具条的store
  • initial : Boolean
    (可选)true将不会删除监听器
返回值:
  • void
PagingToolbar
bubble ( Function fn , [ Object scope ], [ Array args ] ) : Ext.Container
沿着component/container继承结构进行冒泡， 在每个组件上调用指定的函数。 所调用函数的作用域...
沿着component/container继承结构进行冒泡， 在每个组件上调用指定的函数。 所调用函数的作用域( this)将会是 指定的作用域或者是当前组件。 如果在函数任何一点上返回false，即停止冒泡过程
参数:
  • fn : Function
    需要调用的函数
  • scope : Object
    (可选) 函数的作用域(默认为当前节点)
  • args : Array
    (可选) 调用函数时需要传递的参数( 默认传递当前组件)
返回值:
  • Ext.Container
    this
Container
cascade ( Function fn , [ Object scope ], [ Array args ] ) : Ext.Container
从当前组件(第一个被调用的组件)开始，沿着component/container的继承树向下回溯...
从当前组件(第一个被调用的组件)开始，沿着component/container的继承树向下回溯， 在每个组件上调用指定的方法， 调用方法时的(this)作用域为指定的scope或者为当前组件。 传递给方法的参数为传递进来args或者当前组件。 在起泡的任意一个节点上，如果function返回false，即停止在那个分支上。
参数:
  • fn : Function
    需要调用的函数
  • scope : Object
    (可选)函数的作用域(默认为当前组件)
  • args : Array
    (可选) 调用函数时传递的参数 (默认传递当前组件)
返回值:
  • Ext.Container
    this
Container
changePage ( Integer page ) : void
切换活动页面
切换活动页面
参数:
  • page : Integer
    需要显示的页面
返回值:
  • void
PagingToolbar
cloneConfig ( Object overrides ) : Ext.Component
默认使用原先传递给当前实例的配置值克隆当前组件。
默认使用原先传递给当前实例的配置值克隆当前组件。
参数:
  • overrides : Object
    一个新的配置项，包含需要覆盖到克隆版本的所有属性。 可以传递一个id参数给此对象，否则将自动生成一个新的id以避免发生重复。
返回值:
  • Ext.Component
    当前组件的克隆副本
Component
destroy () : void
通过如下方法销毁对象：删除所有的事件监听器、将组件的元素从DOM树中删除...
通过如下方法销毁对象：删除所有的事件监听器、将组件的元素从DOM树中删除（如果可以）、 将组件从它的 Ext.Container（如果可用）中删除、 并且将它从Ext.ComponentMgr中 注销。 销毁操作一般由框架自动完成，一般情况下不需要直接调用该方法。
参数:
  • 无。
返回值:
  • void
Component
disable () : Ext.Component
将组件置为无效状态，并出发'disable'事件。
将组件置为无效状态，并出发'disable'事件。
参数:
  • 无。
返回值:
  • Ext.Component
    this
Component
doLayout ( [ Boolean shallow ], [ Boolean force ] ) : Ext.Container
强制容器的布局进行重新计算。 在向一个已经渲染的容器中添加...
强制容器的布局进行重新计算。 在向一个已经渲染的容器中添加一个新的组件， 或者改变子组件的尺寸/位置参数之后，必须调用此函数。
参数:
  • shallow : Boolean
    (可选) 设置为true时将仅仅计算当前组件的布局， 并且让子组件在需要时自动计算布局 (默认为flase，它将递归地调用每个子容器的doLayout方法)
  • force : Boolean
    (可选) 设置为true将强制进行布局，即使项目是隐藏的也进行。
返回值:
  • Ext.Container
    this
Container
doRefresh () : void
刷新当前页面，与点击'refresh'按钮效果相同。
刷新当前页面，与点击'refresh'按钮效果相同。
参数:
  • 无。
返回值:
  • void
PagingToolbar
enable () : Ext.Component
将组件置为有效状态并触发'enable'事件。
将组件置为有效状态并触发'enable'事件。
参数:
  • 无。
返回值:
  • Ext.Component
    this
Component
enableBubble( String/Array events ) :void
是否现在使得事件会被该Observable触发并调用 this.getBubbleTarget()方法在拥有者的继承树...

是否现在使得事件会被该Observable触发并调用 this.getBubbleTarget()方法在拥有者的继承树中冒泡。Observable的基础类中没有该方法的实现。

该方法一般被Ext.Components用来冒泡事件到拥有者的容器。参看Ext.Component.getBubbleTarget默认的实现 在Ext.Component中返回组件的直接拥有者。但是如果需要的是一个已知的目标，该方法可以被重写来更快的访问需求的目标。

例子:

Ext.override(Ext.form.Field, {
    // 添加方法到Field的initComponent上改变事件为冒泡
    initComponent : Ext.form.Field.prototype.initComponent.createSequence(function() {
        this.enableBubble('change');
    }),

    // 我们知道我们想让Field的事件冒泡到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() {
            // 如果样式被修改标题会变红。
            myForm.header.setStyle('color', 'red');
        }
    }
});
参数:
  • events : String/Array
    冒泡的事件名，或事件名数组
返回值:
  • void
Observable
find ( String prop , String value ) : Array
根据属性查找当前容器中任何层次上的组件
根据属性查找当前容器中任何层次上的组件
参数:
  • prop : String
  • value : String
返回值:
  • Array
    Ext.Component数组
Container
findBy ( Function fn , [ Object scope ] ) : Array
根据一个自定义的函数，查找当前容器中任意层级上的一个组件。 如果传递的函数返回true...
根据一个自定义的函数，查找当前容器中任意层级上的一个组件。 如果传递的函数返回true，组件将会被包含在结果中。 函数将会被用如下参数(component, this container)进行调用。
参数:
  • fn : Function
    需要调用的函数
  • scope : Object
    可选
返回值:
  • Array
    Ext.Component数组
Container
findById ( String id ) : Ext.Component
通过id查找容器中位于任何层级上的组件
通过id查找容器中位于任何层级上的组件
参数:
  • id : String
返回值:
  • Ext.Component
Container
findByType ( String/Class xtype , [ Boolean shallow ] ) : Array
根据xtype或者类型，查找当前容器中任何层级上的组件
根据xtype或者类型，查找当前容器中任何层级上的组件
参数:
  • xtype : String/Class
    组件的xtype字符串，或者直接是组件的class类型
  • shallow : Boolean
    (可选) 此参数为flase时将检查当前组件是否是指定xtype的后裔 (这是默认情况)，或者设置为true， 将检查当前组件是否直接是指定xtype类型（译者注：即指不按照多态性进行检查）。
返回值:
  • Array
    Ext.Component数组
Container
findParentBy ( Function fn ) : Ext.Container
通过自定义的函数查找当前组件上层任何层次上的容器...
通过自定义的函数查找当前组件上层任何层次上的容器。 如果传递的函数返回true，容器对象将被返回。
参数:
  • fn : Function
    自定义的函数，使用如下参数调用(container,this component)。
返回值:
  • Ext.Container
    自定义函数返回true的第一个容器
Component
findParentByType ( String/Class xtype ) : Ext.Container
通过xtype或者class查找当前组件上层任何层次上的容器
通过xtype或者class查找当前组件上层任何层次上的容器
参数:
  • xtype : String/Class
    组件的xtype字符串，或者直接是组件的class
返回值:
  • Ext.Container
    符合指定xtype或者class的第一个容器
Component
fireEvent( String eventName, Object... args ) : Boolean
用传入的参数触发指定的事件 (减去事件名)。 一个事件可以被设置为冒泡 Obse...

用传入的参数触发指定的事件 (减去事件名)。

一个事件可以被设置为冒泡到Observable父类继承树(参看 Ext.Component.getBubbleTarget) 调用enableBubble实现。

参数:
  • eventName : String
    触发的事件名。
  • args : Object...
    传递给处理器的可变长度参数。
返回值:
  • Boolean
    如果有任何的处理器返回false则返回false，否则返回true。
Observable
focus ( [ Boolean selectText ], [ Boolean/Number delay ] ) : Ext.Component
尝试将当前组件设为焦点。
尝试将当前组件设为焦点。
参数:
  • selectText : Boolean
    (可选) 如果可用，同时选中组件内部的文本
  • delay : Boolean/Number
    (可选)将当前组件设置为焦点的延迟时间(设置为true等于0毫秒)
返回值:
  • Ext.Component
    this
Component
get ( String/Number key ) : Ext.Component
获取当前容器包含的一个组件( items.get(key)方法的别名)
获取当前容器包含的一个组件( items.get(key)方法的别名)
参数:
  • key : String/Number
    组件的索引
返回值:
  • Ext.Component
    Ext.Component
Container
getBox ( [ Boolean local ] ) : Object
获取组件底层元素当前盒子模型的尺寸。（译者注：盒子模型是CSS术语，详细解释请自行搜索。）
获取组件底层元素当前盒子模型的尺寸。（译者注：盒子模型是CSS术语，详细解释请自行搜索。）
参数:
  • local : Boolean
    (可选)值为true时，组件的left值和top值将代替页面的XY被返回。(默认值为false)
返回值:
  • Object
    返回值的格式{x, y, width, height}
BoxComponent
getBubbleTarget () : Ext.Container
为Observable的fireEvent方法提供链接，它沿着继承结构进行冒泡操作。
为Observable的fireEvent方法提供链接，它沿着继承结构进行冒泡操作。
参数:
  • 无。
返回值:
  • Ext.Container
    拥有当前组件的容器。
Component
getComponent ( String/Number comp ) : Ext.Component
检查当前容器的 items property 并且获取当前容器的一个直接的子组件。
检查当前容器的 items property 并且获取当前容器的一个直接的子组件。
参数:
  • comp : String/Number
    参数可以是以下任何值：
    • 一个 String : 代表子组件的 itemId 或者 id
    • 一个 Number : 代表子组件在 items property 中的位置

    其它信息参见 Ext.util.MixedCollection.get。

返回值:
  • Ext.Component
    组件(如果有找到)。
Container
getEl () : Ext.Element
返回 Ext.Element ，它包装了当前组件。...

返回 Ext.Element ，它包装了当前组件。

通常情况下，这将是一个<DIV>元素，它是由该类的onRender方法创建的， 但是可以使用autoEl配置项 覆盖它。

注意: 此元素将会一直处于无效状态直到当前组件渲染完成。

如需向当前组件的 DOM事件(而不是当前组件自己的Observable事件)添加监听器， 更多建议，参见 listeners 配置项，或者直接使用一个render监听器:

new Ext.Panel({
    title: 'The Clickable Panel',
    listeners: {
        render: function(p) {
            // Append the Panel to the click handler's argument list.
            p.getEl().on('click', handlePanelClick.createDelegate(null, [p], true));
        },
        single: true  // Remove the listener after first invocation
    }
});
参数:
  • 无。
返回值:
  • Ext.Element
    包装当前组件的元素。
Component
getHeight () : Number
获取该组件的当前高度值。
获取该组件的当前高度值。
参数:
  • 无。
返回值:
  • Number
BoxComponent
getId () : String
返回当前组件的id，如果没有定义id，则自动生成并返回一个id:'ext-comp-'...
返回当前组件的 id 如果没有定义 id 则自动生成并返回一个 id

'ext-comp-' + (++Ext.Component.AUTO_ID)
参数:
  • 无。
返回值:
  • String
    id
Component
getItemId () : String
返回当前组件的 itemId 。 如果没有通过配置参数指定 itemId 那么，将会使用...
返回当前组件的 itemId 。 如果没有通过配置参数指定 itemId 那么，将会使用 getId 返回 id 。
参数:
  • 无。
返回值:
  • String
Component
getLayout () : ContainerLayout
返回容器当前使用的布局管理器。 如果容器当前没有设置布局管理器， 将会创建一个默认的...
返回容器当前使用的布局管理器。 如果容器当前没有设置布局管理器， 将会创建一个默认的 Ext.layout.ContainerLayout 并被设置为容器的布局管理器。
参数:
  • 无。
返回值:
  • ContainerLayout
    容器的布局管理器
Container
getLayoutTarget () : Ext.Element
返回当前容器中用来包含子组件的元素。提供了一个 可以返回容器的...

返回当前容器中用来包含子组件的元素。

提供了一个 可以返回容器的Element 的实现， 但是，如果容器有更复杂的结构， 可以覆盖此实现以返回 layout 在其中渲染子组件的元素。

参数:
  • 无。
返回值:
  • Ext.Element
    在其中渲染子组件的元素。
Container
getOuterSize () : Object
获取当前组件所在元素的尺寸大小，包括边缘的空白处。
获取当前组件所在元素的尺寸大小，包括边缘的空白处。
参数:
  • 无。
返回值:
  • Object
    一个包含元素大小的对象 {width: (element width + left/right margins), height: (element height + top/bottom margins)}
BoxComponent
getPosition ( [ Boolean local ] ) : Array
获取组件底层元素当前的XY位置。
获取组件底层元素当前的XY位置。
参数:
  • local : Boolean
    (可选)如果为true，将返回元素的left和top值，而不是相对于页面内的 XY。(默认值为 false)
返回值:
  • Array
    元素的XY位置值(例如：[100, 200])
BoxComponent
getResizeEl () : Ext.Element
返回该组件的最外层用来定义这些组件整体大小的Element...

返回该组件的最外层用来定义这些组件整体大小的Element对象。

通常用 getEl 方法将会返回相同的Element对象，但在有些情况下，组件可能有一些更多的封装了它的主要动态Element对象的Element对象。

例如ComboBox。它是封装在一个包含<input>元素的包装元素里(这将返回其 getEl方法和触发按钮的元素)。返回的元素为resizeEl。

参数:
  • 无。
返回值:
  • Ext.Element
    The Element which is to be resized by size managing layouts.
BoxComponent
getSize () : Object
获取组件底层元素当前的大小。
获取组件底层元素当前的大小。
参数:
  • 无。
返回值:
  • Object
    一个包含元素大小的对象{width: (element width), height: (element height)}
BoxComponent
getWidth () : Number
获取该组件的当前宽度值。
获取该组件的当前宽度值。
参数:
  • 无。
返回值:
  • Number
BoxComponent
getXType () : String
获取当前组件的xtype，它是用 Ext.ComponentMgr 注册的。 所有可用的xtype列表，参见...
获取当前组件的xtype，它是用 Ext.ComponentMgr 注册的。 所有可用的xtype列表，参见 Ext.Component 类头部。示例用法:

var t = new Ext.form.TextField();
alert(t.getXType());  // alerts 'textfield'
参数:
  • 无。
返回值:
  • String
    The xtype
Component
getXTypes () : String
返回此组件的xtype继承树，用字符'-'分隔。 所有可用的xtype值...

返回此组件的xtype继承树，用字符'-'分隔。 所有可用的xtype值，请参见Ext.Component 类的头部。

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

示例用法:

var t = new Ext.form.TextField();
alert(t.getXTypes());  // alerts 'component/box/field/textfield'
参数:
  • 无。
返回值:
  • String
    xtype层次字符串
Component
hasListener( String eventName ) : Boolean
检测对象是否包含指定事件的任何监听器
检测对象是否包含指定事件的任何监听器
参数:
  • eventName : String
    检测的事件名
返回值:
  • Boolean
    如果事件被监听则为true，否则为false
Observable
hide () : Ext.Component
隐藏当前组件。 监听 beforehide' 事件并且返回false 可以取消隐藏组件的操作。 在隐藏组件之后触发...
隐藏当前组件。 监听 beforehide' 事件并且返回false 可以取消隐藏组件的操作。 在隐藏组件之后触发 ' hide' 事件。 如果组件被配置成 hidden 那么此方法在内部被调用。
参数:
  • 无。
返回值:
  • Ext.Component
    this
Component
insert ( Number index , Ext.Component component ) : Ext.Component
在当前容器的指定索引处插入一个组件。 在插入之前触发...
在当前容器的指定索引处插入一个组件。 在插入之前触发 beforeadd 事件， 然后在组件被插入之后触发 add 事件。
参数:
  • index : Number
    组件会被插入到容器子项集合中时的索引位置
  • component : Ext.Component
    需要插入的子组件。

    Ext使用懒渲染，只有在必要的时候才会渲染插入的组件。

    如果使用懒渲染，可以传递一个组件配置对象以避免创建一个真实组件的开销， 这意味着，插入的组件不会立即被渲染。 为了利用这个“懒初始化”('lazy instantiation')， 必须把组件设置为它注册的 Ext.Component.xtype 值。

    所有可用的xtype列表，参见 Ext.Component。
返回值:
  • Ext.Component
    使用容器默认配置值插入的组件(或者配置对象)。
Container
insertButton ( Number index , Object/Ext.Toolbar.Item/Ext.Button/Array item ) : Ext.Button/Item
在指定的位置插入任何 Ext.Toolbar.Item/ Ext.Button. 注意: 参见Ext.Container.add 中的注释。
在指定的位置插入任何 Ext.Toolbar.Item/ Ext.Button.

注意: 参见Ext.Container.add 中的注释。

参数:
  • index : Number
    项目被插入的索引位置
  • item : Object/Ext.Toolbar.Item/Ext.Button/Array
    需要被插入的按钮或者按钮配置对象，或者一个 buttons/configs数组。
返回值:
  • Ext.Button/Item
Toolbar
isVisible () : Boolean
如果当前组件可见，返回true。
如果当前组件可见，返回true。
参数:
  • 无。
返回值:
  • Boolean
    如果当前组件可见，返回true，其它返回false。
Component
isXType ( String xtype , [ Boolean shallow ] ) : Boolean
Tests whether or not this Component is of a specific xtype. This can test whether this Component is descended from th...

测试此组件是否是指定的xtype。此方法既可以测试是否是指定的xtype的某个子类， 或者它是否直接是指定的xtype类(shallow=true)。

如果使用你自己的子类，必须知道组件必须注册它的xtype值。

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

示例用法:

var t = new Ext.form.TextField();
var isText = t.isXType('textfield');        // true
var isBoxSubclass = t.isXType('box');       // true, descended from BoxComponent
var isBoxInstance = t.isXType('box', true); // false, not a direct BoxComponent instance
参数:
  • xtype : String
    需要为当前组件进行检测的xtype
  • shallow : Boolean
    (可选) 如果为false，检测组件是否是xtype继承树中的某个子类（默认是这种情况）， 如果为true，只检测组件是否是指定的xtype类型。
返回值:
  • Boolean
    如果当前组件是指定xtype的子类，返回true，其它返回flase。
Component
mon ( Observable|Element item , Object|String ename , Function fn , Object scope , Object opt ) : void
向任何Observable对象(或者元素)上添加监听器，监听器将会在组件...

向任何Observable对象(或者元素)上添加监听器，监听器将会在组件销毁时被自动删除。
用法：

myGridPanel.mon(myGridPanel.getSelectionModel(), 'selectionchange', handleSelectionChange, null, {buffer: 50});

or:

myGridPanel.mon(myGridPanel.getSelectionModel(), {
    selectionchange: handleSelectionChange,
    buffer: 50
});
参数:
  • item : Observable|Element
    需要添加listener/listeners的项目。
  • ename : Object|String
    事件名，或者一个包含事件名属性的对象。
  • fn : Function
    (可选) 如果 ename 参数是一个事件名，此参数为处理函数。
  • scope : Object
    (可选)如果 ename 参数是一个事件名称，此参数是作用域 ( this 引用)，监听函数将会在此作用域中被执行。
  • opt : Object
    (可选)如果 ename 参数是一个事件名称， 此参数是 addListener 配置项。
返回值:
  • void
Component
moveFirst () : void
移动到第一页，与点击'first'按钮效果相同。
移动到第一页，与点击'first'按钮效果相同。
参数:
  • 无。
返回值:
  • void
PagingToolbar
moveLast () : void
移动到最后一页，与点击'last'按钮的效果相同。
移动到最后一页，与点击'last'按钮的效果相同。
参数:
  • 无。
返回值:
  • void
PagingToolbar
moveNext () : void
移动到下一页，与点击'next'按钮效果相同。
移动到下一页，与点击'next'按钮效果相同。
参数:
  • 无。
返回值:
  • void
PagingToolbar
movePrevious () : void
移动到上一页，与点击'previous'按钮效果相同。
移动到上一页，与点击'previous'按钮效果相同。
参数:
  • 无。
返回值:
  • void
PagingToolbar
mun ( Observable|Element item , Object|String ename , Function fn , Object scope ) : void
删除通过mon 方法添加的监听器。
删除通过mon 方法添加的监听器。
参数:
  • item : Observable|Element
    需要删除listener/listeners的项目。
  • ename : Object|String
    事件名称，或者一个包含事件名称属性的对象。
  • fn : Function
    (可选)如果 ename 参数是一个事件名称，此参数是一个处理函数。
  • scope : Object
    (可选)如果 ename 参数是一个事件名称，此参数是作用域 ( this 引用)，监听函数将会在此作用域中被执行。
返回值:
  • void
Component
nextSibling () : Ext.Component
返回所属容器中的下一个组件
返回所属容器中的下一个组件
参数:
  • 无。
返回值:
  • Ext.Component
Component
on( String eventName, Function handler, [Object scope], [Object options] ) : void
给对象添加事件处理器 (addListener的简写形式)
给对象添加事件处理器 (addListener的简写形式。)
参数:
  • eventName : String
    监听的事件类型
  • handler : Function
    事件调用的方法
  • scope : Object
    （可选）处理方法执行时的作用域 (this 的引用)。 如果被忽略。默认为触发事件的对象。
  • options : Object
    可选 包含处理器配置的对象。
返回值:
  • void
Observable
previousSibling () : Ext.Component
返回所属容器中的前一个组件
返回所属容器中的前一个组件
参数:
  • 无。
返回值:
  • Ext.Component
Component
purgeListeners() : void
移除对象上所有的监听器
移除对象上所有的监听器
参数:
  • 无。
返回值:
  • void
Observable
relayEvents( Object o, Array events ) : void
从指定的Observable上传递选择的事件就好像被当前对象触发一样。
从指定的Observable上传递选择的事件就好像被当前对象触发一样。
参数:
  • o : Object
    该Observable上的事件被当前对象传递。
  • events : Array
    传递的数组名。
返回值:
  • void
Observable
remove ( Component/String component , [ Boolean autoDestroy ] ) : Ext.Component
从当前容器中移除一个组件。 在移除之前触发 beforeremove 事件， 然后在组件被移除之后触发...
从当前容器中移除一个组件。 在移除之前触发 beforeremove 事件， 然后在组件被移除之后触发 remove 事件。
参数:
  • component : Component/String
    需要移除的组件引用或者id
  • autoDestroy : Boolean
    (可选) 设置为true将自动调用被删组件的 Ext.Component.destroy 函数。 默认为容器的 autoDestroy 配置值。
返回值:
  • Ext.Component
    被移除的组件。
Container
removeAll ( [ Boolean autoDestroy ] ) : Array
从当前容器中删除所有组件。
从当前容器中删除所有组件。
参数:
  • autoDestroy : Boolean
    (可选) 此参数为true时将自动调用 被删组件的 Ext.Component.destroy 方法。 默认为当前容器的 autoDestroy 配置值。
返回值:
  • Array
    被销毁的组件数组
Container
removeClass ( string cls ) : Ext.Component
从组件底层的元素上删除一个CSS类。
从组件底层的元素上删除一个CSS类。
参数:
  • cls : string
    需要移除的CSS类名
返回值:
  • Ext.Component
    this
Component
removeListener( String eventName, Function handler, [Object scope] ) : void
删除一个事件处理器。
删除一个事件处理器。
参数:
  • eventName : String
    处理器关联的事件类型。
  • handler : Function
    移除的处理器。 这应该是传递到addListener里的方法的引用。
  • scope : Object
    （可选）处理器指定的初始作用域。
返回值:
  • void
Observable
render ( [ Element/HTMLElement/String container ], [ String/Number position ] ) : void
在传递进来的HTML元素中渲染当前组件。...

在传递进来的HTML元素中渲染当前组件。

如果你正在使用一个Container 对象放置当前组件，那么请不要使用render方法。

当容器第一次被渲染时，它的子组件将会被容器的 layout 管理器渲染。

某些布局管理器允许动态添加子组件。它们包括 Ext.layout.CardLayout, Ext.layout.AnchorLayout, Ext.layout.FormLayout, Ext.layout.TableLayout。

当一个新的子组件被添加时，如果容器已经被渲染了， 你可能需要调用容器的 doLayout 方法来刷新视图，它将导致所有没有被渲染的子组件进行渲染操作。 此操作是必须的，这样你可以添加多个子组件而只刷新一次layout。

当创建复杂的UI时，非常重要的一点是，请记住调整子项目的尺寸和位置是容器的 layout 管理器的职责。 如果你希望子项目的尺寸对用户交互作出反应， 你必须为容器配置一个布局管理器，它将创建和管理你心里想要的那种布局。

忽略容器的layout 配置意味着将会使用一个基本的布局管理器，它除了按次序把子组件 渲染到容器中之外什么事情都不做。 这种情况下，任何尺寸和位置的调整操作都不会发生。

参数:
  • container : Element/HTMLElement/String
    (可选) 需要在其中渲染当前组件的元素。 如果它是从一个已存在的标签中创建的，此参数应该被忽略。
  • position : String/Number
    (可选) 容器中的一个元素ID或者一个DOM节点索引， 当前组件将会被插入到它前面 (默认append到容器的尾部)
返回值:
  • void
Component
resumeEvents() : void
重新开始触发事件。(参见suspendEvents) 如果事件以queueSuspended参数被挂起，则在事件被挂起时 ...
重新开始触发事件。(参见 suspendEvents) 如果事件以queueSuspended 参数被挂起，则在事件被挂起时触发的事件会被传递到所有的监听器上
参数:
  • 无。
返回值:
  • void
Observable
setAutoScroll ( Boolean scroll ) : Ext.BoxComponent
设置该组件内容溢出时是否自动显示滚动条。
设置该组件内容溢出时是否自动显示滚动条。
参数:
  • scroll : Boolean
    值为true的话组件自动显示滚动条。
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setDisabled ( Boolean disabled ) : Ext.Component
工具函数，使用布尔值设置有效/无效(disabled/enabled )。
工具函数，使用布尔值设置有效/无效(disabled/enabled )。
参数:
  • disabled : Boolean
返回值:
  • Ext.Component
    this
Component
setHeight ( Mixed height ) : Ext.BoxComponent
设置此组件的高度。该方法将触发resize事件。
设置此组件的高度。该方法将触发resize事件。
参数:
  • height : Mixed
    The new height to set.
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setPagePosition ( Number x , Number y ) : Ext.BoxComponent
设置组件在页面中的XY位置。 如果需要设置left和top值 ，请使用...
设置组件在页面中的XY位置。 如果需要设置left和top值 ，请使用setPosition方法。 该方法触发move事件。
参数:
  • x : Number
    The new x position
  • y : Number
    The new y position
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setPosition ( Number left , Number top ) : Ext.BoxComponent
设置组件的left和top值。设置组件的页面XY值，请使用setPagePosition方法。该方法触发...
设置组件的left和top值。设置组件的页面XY值，请使用setPagePosition方法。该方法触发move事件。
参数:
  • left : Number
    The new left
  • top : Number
    The new top
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setSize ( Mixed width , Mixed height ) : Ext.BoxComponent
设置BoxComponent的宽度和高度。 此方法触发resize事件...
设置BoxComponent的宽度和高度。 此方法触发resize事件。此方法可以接收单独的width或者height值作为参数， 或者你可以传递像这样的一个size对象： {width:10, height:20} 。
参数:
  • width : Mixed
    设置的新的width值。这可以是：
    • 一个Number类型指定Element新的宽度 Ext.Element.defaultUnit(默认为像素 :'px')。
    • 一个String类型用于设置width的CSS样式。
    • 一个size对象格式为 {width: widthValue, height: heightValue} 。
    • 值为 undefined 时，保留原来的width不变。
  • height : Mixed
    设置的新的height值(如果第一个参数传递了一个size对象，此参数没有必要传递)。这可以是：
    • 一个Number类型指定Element新的高度 Ext.Element.defaultUnit(默认为像素 :'px')。
    • 一个String类型用于设置height的CSS样式。也有可能不会被使用到。
    • 值为 undefined 时，保留原来的height不变。
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setVisible ( Boolean visible ) : Ext.Component
工具方法，通过使用布尔值隐藏或者显示当前组件。
工具方法，通过使用布尔值隐藏或者显示当前组件。
参数:
  • visible : Boolean
    true时显示，false时隐藏
返回值:
  • Ext.Component
    this
Component
setWidth ( Mixed width ) : Ext.BoxComponent
设置组件的宽度。 此方法触发resize事件。
设置组件的宽度。 此方法触发resize事件。
参数:
  • width : Mixed
    The new width to set.
返回值:
  • Ext.BoxComponent
    this
BoxComponent
show () : Ext.Component
显示当前组件。监听' beforeshow' 事件，返回 false 取消显示组件...
显示当前组件。监听' beforeshow' 事件，返回 false 取消显示组件。在显示组件之后触发' show' 事件。
参数:
  • 无。
返回值:
  • Ext.Component
    this
Component
suspendEvents( Boolean queueSuspended ) : void
暂停触发所有的事件。 (参看resumeEvents)
暂停触发所有的事件。（参看 resumeEvents)
参数:
  • queueSuspended : Boolean
    如果传递为true则排列好暂停的事件使得在调用 resumeEvents 后再触发它们，而不是抛弃所有暂停的事件。
返回值:
  • void
Observable
syncSize () : Ext.BoxComponent
强制组件的大小按照此组件底层元素当前的高度和宽度计算。
强制组件的大小按照此组件底层元素当前的高度和宽度计算。
参数:
  • 无。
返回值:
  • Ext.BoxComponent
    this
BoxComponent
un( String eventName, Function handler, [Object scope] ) : void
删除一个事件处理器(removeListener方法的简写形式)
删除一个事件处理器(removeListener方法的简写形式。)
参数:
  • eventName : String
    处理器关联的事件类型
  • handler : Function
    被删除的处理器 这应该是传入 addListener 中的方法的引用。
  • scope : Object
    （可选）为处理器指定的初始作用域。
返回值:
  • void
Observable
unbind ( Ext.data.Store store ) : void
将分页工具栏 从指定的Ext.data.Store 上解除绑定 (不推荐)
将分页工具栏 从指定的Ext.data.Store 上解除绑定 (不推荐)
参数:
  • store : Ext.data.Store
    需要解除绑定的数据store
返回值:
  • void
PagingToolbar
update ( Mixed htmlOrData , [ Boolean loadScripts ], [ Function callback ] ) : void
刷新组件的内部区域。
刷新组件的内部区域。
参数:
  • htmlOrData : Mixed
    如果已经通过tpl为当前组件配置了一个模板，那么 将会使用此参数来装配模板。 如果没有为当前组件配置模板，组件的内容区域将会通过Ext.Element 进行刷新。
  • loadScripts : Boolean
    (可选)只用在使用html配置时此参数才合法。默认为false。
  • callback : Function
    (可选)只用在使用html配置时此参数才合法。 当脚本加载完成时回调函数才被执行。
返回值:
  • void
Component
updateBox ( Object box ) : Ext.BoxComponent
设置此组件底层元素的盒子模型尺寸。(译者注：盒子模型是CSS术语，详细资料请自行搜索。)
设置此组件底层元素的盒子模型尺寸。(译者注：盒子模型是CSS术语，详细资料请自行搜索。)
参数:
  • box : Object
    一个格式为{x, y, width, height}的对象
返回值:
  • Ext.BoxComponent
    this
BoxComponent

公共事件

Event Defined By
add : ( Ext.Container this , Ext.Component component , Number index )
监听器将会被使用如下的参数被调用:
  • this : Ext.Container
  • component : Ext.Component
    被添加的组件
  • index : Number
    将组件添加到容器子组件集合时的位置索引
Container
added : ( Ext.Component this , Ext.Container ownerCt , number index )
当一个组件被添加到一个Ext.Container时触发
当一个组件被添加到一个Ext.Container时触发
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • ownerCt : Ext.Container
    用于组件的容器
  • index : number
    添加组件的位置
Component
afterlayout : ( Ext.Container this , ContainerLayout layout )
当容器中的组件被指定的布局管理器排列的时候触发。
当容器中的组件被指定的布局管理器排列的时候触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Container
  • layout : ContainerLayout
    为当前容器提供的ContainerLayout实现
Container
afterrender : ( Ext.Component this )
在组件渲染完成之后触发...

在组件渲染完成之后触发。

afterrender事件在当前组件被rendered 结束之后、在为组件定义的所有afterRender方法执行之后 触发，并且，如果有stateful， 也在状态被保存之后才触发。

监听器将会以如下参数格式被调用:
  • this : Ext.Component
Component
beforeadd : ( Ext.Container this , Ext.Component component , Number index )
在任何 Ext.Component 被添加或者插入到容器中之前触发。 事件处理器可以返回false取消添加操作。
在任何 Ext.Component 被添加或者插入到容器中之前触发。 事件处理器可以返回false取消添加操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Container
  • component : Ext.Component
    被添加的组件
  • index : Number
    组件被添加到容器子项目集合中时的索引位置
Container
beforechange : ( Ext.PagingToolbar this , Object params )
在活动页面发生变化之前触发。 返回false可以阻止变换当前活动页面。
在活动页面发生变化之前触发。 返回false可以阻止变换当前活动页面。
监听器将会以如下参数格式被调用:
  • this : Ext.PagingToolbar
  • params : Object
    当加载请求的页面时，PagingToolbar将会发送的 对象hash，它包含了参数。此对象将会包含:
    • start : Number
      需要从服务器加载的下一页数据的起始行号
    • limit : Number
      需要从服务器加载的记录数量

    (注意: start和 limit 参数的名称取决于store的 paramNames 参数)

    可以在事件监听器中根据需要添加参数。

PagingToolbar
beforedestroy : ( Ext.Component this )
在组件 destroyed 之前触发。 在事件监听器中返回false以停止 destroy 操作。
在组件 destroyed 之前触发。 在事件监听器中返回false以停止 destroy 操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforehide : ( Ext.Component this )
在调用hide方法隐藏组件之前触发。 在事件监听器中返回false可以停止隐藏操作。
在调用hide方法隐藏组件之前触发。 在事件监听器中返回false可以停止隐藏操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforeremove : ( Ext.Container this , Ext.Component component )
从容器中删除任何Ext.Component 之前触发。 处理器可以返回false取消remove操作。
从容器中删除任何Ext.Component 之前触发。 处理器可以返回false取消remove操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Container
  • component : Ext.Component
    被删除的组件
Container
beforerender : ( Ext.Component this )
在组件被rendered 之前触发。 在事件监听器中返回false可以停止render 操作。
在组件被rendered 之前触发。 在事件监听器中返回false可以停止render 操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforeshow : ( Ext.Component this )
在调用show()方法现实组件之前触发。 事件处理函数返回false可以停止show。
在调用show 方法现实组件之前触发。 事件处理函数返回false可以停止show。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforestaterestore : ( Ext.Component this , Object state )
在组件状态恢复之前触发。返回false停止恢复状态操作。
在组件状态恢复之前触发。返回false停止恢复状态操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    StateProvider返回的状态哈希值。 如果没有禁止此事件，那么状态对象会被传递给applyState。 默认情况下，这样简单地把属性值拷贝到当前组件中。 可以覆盖此方法以提供自定的状态恢复操作。
Component
beforestatesave : ( Ext.Component this , Object state )
在组件状态被保存到配置的状态提供者之前触发。 返回false可以停止保存。
在组件状态被保存到配置的状态提供者之前触发。 返回false可以停止保存。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    状态值哈希。 这由在组件上调用getState() 方法决定。 此方法必须由开发者提供，返回是否需要对状态进行描述，默认情况下， Ext.Component有一个空实现。
Component
change : ( Ext.PagingToolbar this , Object pageData )
在活动页面发生变化之后触发。
在活动页面发生变化之后触发。
监听器将会以如下参数格式被调用:
  • this : Ext.PagingToolbar
  • pageData : Object
    一个拥有如下属性的对象:
    • total : Number
      服务器返回的数据集中的记录总数
    • activePage : Number
      当前页码
    • pages : Number
      总页数(根据服务器返回的数据集中的记录总数，以及当前的 pageSize计算)
PagingToolbar
destroy : ( Ext.Component this )
在组件被销毁之后触发。
在组件被destroyed之后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
disable : ( Ext.Component this )
在组件被设置为无效状态后触发。
在组件被设置为无效状态后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
enable : ( Ext.Component this )
当组件被设置为有效(enabled)之后触发。
当组件被设置为有效(enabled)之后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
hide : ( Ext.Component this )
在组件被隐藏之后触发。 当调用hide 方法隐藏组件之后触发。
在组件被隐藏之后触发。 当调用hide 方法隐藏组件之后触发。
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
move : ( Ext.Component this , Number x , Number y )
在组件移动之后触发。
在组件移动之后触发。
监听器将会用如下的参数格式来调用:
  • this : Ext.Component
  • x : Number
    The new x position
  • y : Number
    The new y position
BoxComponent
overflowchange : ( Object c , Boolean lastOverflow )
在溢出状态被改变之后触发。
在溢出状态被改变之后触发。
监听器将会以如下参数格式被调用:
  • c : Object
    Container
  • lastOverflow : Boolean
    溢出状态
Toolbar
remove : ( Ext.Container this , Ext.Component component )
监听器将会以如下的参数格式被调用:
  • this : Ext.Container
  • component : Ext.Component
    被删除的组件
Container
removed : ( Ext.Component this , Ext.Container ownerCt )
当一个组件被从Ext.Container容器中删除时触发
当一个组件被从Ext.Container容器中删除时触发
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • ownerCt : Ext.Container
    持有组件的容器
Component
render : ( Ext.Component this )
在组件被渲染之后触发。
在组件被 rendered(渲染) 之后触发。
监听器将以如下的参数格式被调用:
  • this : Ext.Component
Component
resize : ( Ext.Component this , Number adjWidth , Number adjHeight , Number rawWidth , Number rawHeight )
在组件被调整大小之后触发。
在组件被调整大小之后触发。
监听器将以如下的参数格式被调用:
  • this : Ext.Component
  • adjWidth : Number
    这是width调整后的值
  • adjHeight : Number
    这是height调整后的值
  • rawWidth : Number
    这是width原来的值
  • rawHeight : Number
    这是height原来的值
BoxComponent
show : ( Ext.Component this )
在调用show 方法显示组件之后触发。
在调用show 方法显示组件之后触发。
监听器将会用如下的参数格式被调用:
  • this : Ext.Component
Component
staterestore : ( Ext.Component this , Object state )
组件状态被存储之后触发。
组件状态被存储之后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    StateProvider返回的状态哈希值。 如果没有禁止此事件，那么状态对象会被传递给applyState。 默认情况下，这样简单地把属性值拷贝到当前组件中。 可以覆盖此方法以提供自定的状态恢复操作。
Component
statesave : ( Ext.Component this , Object state )
在组件状态被保存到所配置的状态提供者之后触发。
在组件状态被保存到所配置的状态提供者之后触发。
监听器将会用如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    状态值hash。 这是由在足见上调用getState() 方法决定的。 开发者必须提供此方法以返回是否需要恢复状态，默认情况下， Ext.Component有一个空实现。
Component


Observable
    Component
      BoxComponent
        Container
          Panel

Class Ext.Panel

包: | Ext
定义类的文件: | Panel.js
类: | Panel
子类: | ButtonGroup, TabPanel, Tip, Window, FieldSet, FormPanel, GridPanel, TreePanel
继承自: | Container

Panel是一个容器，拥有特殊的功能和结构化的组件， 这使能够完美地为面向应用的用户界面创建部件。

由于继承自Ext.Container ，Panel可以配置一个layout，并且 包含子组件。

要么指定Panel的子 items， 要么动态向Panel中adding Components， 谨记考虑你希望Panel如何排列这些子元素， 并且这些子元素是否需要使用Ext内建的 layout 规则调整尺寸。 默认情况下，Panel使用 ContainerLayout规则。 它简单地渲染子组件，将它们一个接一个地添加到Container中，并且 不进行任何调整尺寸的操作.

Panel也可以包含 bottom和 top工具栏，同时有单独的 header, footer和 body区域(附加信息参见 frame)。

Panel也提供内置的 展开和折叠行为，同时有许多 预先构建的工具按钮，它们可以被包装用来提供 其它自定义的行为。Panel可以被方便地拖拽到任何 Container 或者布局中，并且布局和渲染的过程 完全由框架进行管理。

配置项

Config Options Defined By
activeItem : String/Number
一个string型的组件id，或者组件的数字索引， 它需要...
一个string型的组件id，或者组件的数字索引， 它需要在渲染时在容器内的布局管理器中被初始化并激活。 例如：activeItem: 'item-1' 或者 activeItem: 0 ( 索引 0 =容器子项目集合中的第一个元素)。 activeItem仅仅适用于一次显示一个组件的布局模式(比如 Ext.layout.AccordionLayout, Ext.layout.CardLayout 和 Ext.layout.FitLayout)。 与 Ext.layout.ContainerLayout.activeItem 相关。
Container
allowDomMove : Boolean
在渲染时组件是否可以移动Dom节点(默认为true)。
Component
anchor : String
注: 这个配置只用于该组件被包含在一个已使用AnchorLayout...

注: 这个配置只用于该组件被包含在一个已使用 AnchorLayout (或者其子类)配置的Container时。 基于布局管理器，例如：

  • Ext.form.FormPanel
  • 指定 layout: 'anchor' // or 'form', or 'absolute'

参见 Ext.layout.AnchorLayout. anchor 。

BoxComponent
animCollapse : Boolean
true将会在panel被折叠时使用动画效果，false将会跳过动画效果....
true 将会在panel被折叠时使用动画效果， false 将会跳过动画效果( 如果Ext.Fx类 有效，默认为 true ，否则为 false )。
Panel
applyTo : Mixed
节点id、一个DOM节点，或者一个现有的Element---它对应一个document 中已经存在的DIV ...

节点id、一个DOM节点，或者一个现有的Element---它对应一个document 中已经存在的DIV，描述了一些panel特定的标签结构。 当使用 applyTo 时，位于主元素中的panel组成部分可以被CSS类名描述， 并且panel将会自动从标签创建这些组件。如有需要， 任何没有在标签中指定的必备组件将会被自动创建。

支持如下类名(baseCls将会被 baseCls替换):

  • baseCls + '-header'
  • baseCls + '-header-text'
  • baseCls + '-bwrap'
  • baseCls + '-tbar'
  • baseCls + '-body'
  • baseCls + '-bbar'
  • baseCls + '-footer'

使用此配置项是，没有必要调用render()方法。 如果指定了applyTo，任何传递给renderTo 的值都会被忽略，并且目标元素的父节点将会自动被用作panel的容器。

Panel
autoDestroy : Boolean
如果为true，容器将自动销毁任何从其中被删除的组件， 否则...
如果为true，容器将自动销毁任何从其中被删除的组件， 否则必须手动处理销毁操作(默认为true)。
Container
autoHeight : Boolean
true 将会使用height:'auto',false将会使用固定的高度(默认为false...
true 将会使用height:'auto', false 将会使用固定的高度(默认为 false )。 注意:设置 autoHeight: true 意为着浏览器将会根据其中的内容管理panel的高度， 并且Ext将完全不会管理它。如果panel处在一个管理尺寸的 布局中( fit , border , 等等)，那么设置 autoHeight: true 可能会导致滚动条的问题，并且将不会像所期望的那样工作，因为 panel将会使用其内容的高度，而不是Ext布局所必须的高度。
Panel
autoLoad : Object/String/Function
一个合法的url描述，依照Updater Ext.Updater.update 方法...
一个合法的url描述，依照Updater Ext.Updater.update 方法。如果autoLoad不为null，panel将会在渲染之后立即尝试加载它的内容。

URL将会成为当前panel的body元素的默认URL，这样它可以在任意时刻被 refresh.

Panel
autoScroll : Boolean
如果值为true，将会在该元素上使用overflow:'auto'配置，并且在必要的时候...
如果值为true，将会在该元素上使用overflow:'auto'配置，并且在必要的时候自动显示滚动条，否则，溢出部分的组件都会被切除(默认值为 false)。
BoxComponent
autoShow : Boolean
如果组件需要检测隐藏CSS属性(如 'x-hidden' 或者 'x-hide-display')并且在渲染时删除...
如果组件需要检测隐藏CSS属性(如 'x-hidden' 或者 'x-hide-display')并且在渲染时删除它们 (默认为false)，设置此值为true。
Component
autoWidth : Boolean
如果为true，使用width:'auto'配置，否则使用固定的宽度...

如果为true，使用width:'auto'配置，否则使用固定的宽度，或者可以由其父类容器的layout manager来控制。(默认值为 false)。

注: 虽然很多组件继承了这个配置选项，但不是所有这些组件的自适应宽度配置都会像期望的那样起作用。 设置autoWidth：值为true时，浏览器将根据元素的内容自动设置宽度，这将意味着Ext不会去管理宽度。

如果是由浏览器来管理宽度，需要注意的是，通过浏览器进行调整的结构组件内不能被发现，因此宽度的变化可能导致需要进行同步处理元素的宽度。 例如，在这个元素的目标是：

<div id='grid-container' style='margin-left:25%;width:50%'></div>
当浏览器窗口改变时，渲染后的Panel必须监听浏览器窗口大小的变化，以便通知子项，浏览器改变了其宽度：

var myPanel = new Ext.Panel({
    renderTo: 'grid-container',
    monitorResize: true, // relay on browser resize
    title: 'Panel',
    height: 400,
    autoWidth: true,
    layout: 'hbox',
    layoutConfig: {
        align: 'stretch'
    },
    defaults: {
        flex: 1
    },
    items: [{
        title: 'Box 1',
    }, {
        title: 'Box 2'
    }, {
        title: 'Box 3'
    }],
});
BoxComponent
baseCls : String
应用到当前panel元素上的基本CSS类(默认为 'x-panel' )...
应用到当前panel元素上的基本CSS类(默认为 'x-panel' )。

另一个可选的默认变量是指定 'x-plain' ，它将去掉所有样式，除了Ext布局功能所必须的属性 (例如overflow:hidden)。另请参见 unstyled 。

Panel
bbar : Object/Array
panel底部工具栏。 此参数可以是一个Ext.Toolbar 、一个工具栏配置项，或者一个buttons/button配置数组---用来被添加到工具栏中...

panel底部工具栏。 此参数可以是一个Ext.Toolbar 、一个工具栏配置项，或者一个buttons/button配置数组---用来被添加到工具栏中。 注意，此参数在渲染之后是无效的。如果在渲染之后需要访问底部工具栏 ，请使用 getBottomToolbar。

注意:尽管Toolbar可以包含Field组件，但它们不会 通过加载祖先FormPanel而被更新。Panel的工具栏不是标准Container->Component 层次的一部分，所以它们不会被扫面以收集表单项。但是，这些值还是会 被提交，因为提交表单的参数是从DOM树中收集的。

Panel
bbarCfg : Object
一个 ADomHelper 元素的配置对象，描述了当前Panelbbar元素的结构...

一个DomHelper 元素的配置对象，描述了当前Panel的bbar元素结构。 另请参见 bodyCfg 。

Panel
bodyBorder : Boolean
True将会在Panel的body元素内部显示一个边框，false将会隐藏它 (默认为true)。只有当border == true 时...
True将会在Panel的body元素内部显示一个边框，false将会隐藏它 (默认为true)。只有当border == true 时，此参数才会被应用。如果border == true 并且 bodyBorder == false， 将会给整个body元素一种凹陷式的外观。
Panel
bodyCfg : Object
一个DomHelper 元素描述对象，可以被指定给任何Panel Element...

一个DomHelper 元素描述对象，可以被指定给任何Panel Element.

默认情况下，以下表格中的Default元素将会被用作html标签，用来创建一个子元素 ，与Default类名相匹配( baseCls 将会被 baseCls 替换 ):

Panel      Default  Default             Custom      Additional       Additional
Element    element  class               element     class            style
========   ==========================   =========   ==============   ===========
header     div      baseCls+'-header'   headerCfg   headerCssClass   headerStyle
bwrap      div      baseCls+'-bwrap'     bwrapCfg    bwrapCssClass    bwrapStyle
+ tbar     div      baseCls+'-tbar'       tbarCfg     tbarCssClass     tbarStyle
+ body     div      baseCls+'-body'       bodyCfg     bodyCssClass     bodyStyle
+ bbar     div      baseCls+'-bbar'       bbarCfg     bbarCssClass     bbarStyle
+ footer   div      baseCls+'-footer'   footerCfg   footerCssClass   footerStyle

例如，配置一个自定义的元素，用来强制 body 元素使用不同形式的标签，而不是使用默认创建的。 这种情况的一个例子可能是 创建一个子 Panel，包含自定义的内容，例如header，或者通过使body拥有一个<center> 元素， 从而强制Panel中的所有内容居中:

new Ext.Panel({
    title: 'Message Title',
    renderTo: Ext.getBody(),
    width: 200, height: 130,
    bodyCfg: {
        tag: 'center',
        cls: 'x-panel-body',  // Default class not applied if Custom element specified
        html: 'Message'
    },
    footerCfg: {
        tag: 'h2',
        cls: 'x-panel-footer'        // same as the Default class
        html: 'footer html'
    },
    footerCssClass: 'custom-footer', // additional css class, see addClass

    footerStyle:    'background-color:red' // see bodyStyle

});

以上例子也显式创建了一个 footer ，拥有自定义的标签和样式。

Panel
bodyCssClass : String/Object/Function
可选的CSS类选择器，被应用到body 元素上，其格式为Ext.Element.addClass所 期望的值(默认为null)...
可选的CSS类选择器，被应用到body 元素上，其格式为Ext.Element.addClass所 期望的值(默认为null)。参见 bodyCfg.
Panel
bodyStyle : String/Object/Function
自定义的CSS样式，它将被应用到body 元素上，其格式为...
自定义的CSS样式，它将被应用到body 元素上，其格式为Ext.Element.applyStyles 所期望的值(默认为null)。参见bodyCfg。
Panel
border : Boolean
True将会显示panel body元素的边框，false将会隐藏它们 (默认为true)。默认情况下，边框是一个2px宽度的内嵌边框...
True将会显示panel body元素的边框，false将会隐藏它们 (默认为true)。默认情况下，边框是一个2px宽度的内嵌边框， 但是，以后可以通过设置bodyBorder 为false以改变它。
Panel
boxMaxHeight : Number
设置组件的最大高度值...

设置组件的最大高度值。

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

BoxComponent
boxMaxWidth : Number
设置组件的最大宽度值...

设置组件的最大宽度值。

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

BoxComponent
boxMinHeight : Number
设置组件的最小高度值...

设置组件的最小高度值。

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

BoxComponent
boxMinWidth : Number
设置组件的最小宽度值...

设置组件的最小宽度值。

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

BoxComponent
bubbleEvents : Array
一个事件数组，当这些事件被触发时，将会被冒泡到所有父容器中。参见....

一个事件数组，当这些事件被触发时，将会被冒泡到所有父容器中。参见 Ext.util.Observable.enableBubble。 默认为 []。

Container
bufferResize : Boolean/Number
当设置为true时(50毫秒)或者是一个毫秒数值， 指定给当前容器的布...
当设置为true时(50毫秒)或者是一个毫秒数值， 指定给当前容器的布局管理器将会缓存它计算出的频率，然后 对组件进行一次重新布局操作。 对于重量级的容器，或者拥有大量子组件的容器来说，这非常有用， 因为频繁进行布局是非常昂贵的。 默认为 50 .
Container
buttonAlign : String
添加到当前panel的所有 buttons 的对齐方式。 合法的值有...
添加到当前panel的所有 buttons 的对齐方式。 合法的值有 'right' , 'left' 和 'center' (默认为 'right' )。
Panel
buttons : Array
Panel的按钮数组，它们从 buttons 配置属性创建。只读。
Panel
bwrapCfg : Object
一个DomHelper 元素描述对象，描述了当前Panel的 bwrap 的元素的结构...

一个DomHelper 元素描述对象，描述了当前Panel的 bwrap 的元素的结构。另请参见 bodyCfg 。

Panel
clearCls : String
应用到特殊的clearing div的CSS类， 这个clearing div直接渲染到每个form field的包装器后面...

应用到特殊的clearing div的CSS类， 这个clearing div直接渲染到每个form field的包装器后面，以提供 清除field的功能(默认为 'x-form-clear-left')。

注意: 只有在当前组件被渲染到一个使用FormLayout 布局(例如 Ext.form.FormPanel 或者指定 layout:'form')的 容器中、或者是指定了一个fieldLabel 、或者指定isFormField=true 时此配置才有效。

另请参见 Ext.layout.FormLayout. fieldTpl。

Component
closable : Boolean
Panel自身不支持关闭操作，但是Panel的一些子类 (例如Ext.Window) ，或者处于Ext.TabPanel中的 Panel支持...
Panel自身不支持关闭操作，但是Panel的一些子类 (例如Ext.Window) ，或者处于Ext.TabPanel中的 Panel支持。 指定此参数为 true 可以在这些情况下启用关闭。默认为 false 。
Panel
cls : String
一个可选的额外CSS类，它将被添加到当前组件的元素上(默认为'')...
一个可选的额外CSS类，它将被添加到当前组件的元素上(默认为'')。 此属性对于在组件上，或者它的任何使用标准CSS规则的孩子节点上， 添加定制的样式非常有用。
Component
collapseFirst : Boolean
将会确保折叠/展开(collapse/expand)按钮总是被渲染在第一个位置...
true 将会确保折叠/展开(collapse/expand)按钮总是被渲染在第一个位置， 在panel顶部的工具栏中位于任何其它工具左侧， false 将会把它渲染在最后(默认为 true )。
Panel
collapsed : Boolean
如果当前panel被折叠为true。只读。
Panel
collapsedCls : String
在被折叠后，一个被添加到panel元素上的CSS类 (默认为 'x-panel-collapsed' )。
Panel
collapsible : Boolean
True将会使panel折叠并且会自动把展开/折叠(expand/collapse)按钮渲染到顶部...
True将会使panel折叠并且会自动把展开/折叠 (expand/collapse)按钮渲染到顶部工具按钮区域，false将 保持panel尺寸固定，没有按钮(默认为false)。
Panel
contentEl : String
(可选)指定一个已存在的HTML元素，或者一个已存在HTML元素的...

(可选)指定一个已存在的HTML元素，或者一个已存在HTML元素的 id ，它们将被用作当前组件的内容。

  • 描述 :
    此配置选项被用来将一个已存在的HTML元素 插入到一个新组件(在组件渲染之后它简单地移动DOM元素) 的layout元素中，使它成为该组件的内容。
  • 注意 :
    指定的HTML元素将被append到组件的layout元素中， 在所有配置的 HTML 被插入之后， 并且，这样的话，在render事件 被触发时，document中将不再包含此元素。
    指定的HTML元素将不会参与组件所有可能使用的 layout 过程(译者注：指这些HTML元素 不会参与布局操作)。 它仅是HTML而已。布局操作实在孩子 items 上进行的。
    添加 x-hidden 或者 x-hide-display CSS类，以防在内容渲染到panel时发生闪烁。
Component
ctCls : String
一个可选的外部CSS样式，添加到这个组件的容器(默认值为 '')。 这个方法对于使用标准的CSS规则...

一个可选的外部CSS样式，添加到这个组件的容器(默认值为 '')。 这个方法对于使用标准的CSS规则，为组件或它的任何一个子组件添加特定的样式非常有用。 参见 Ext.layout.ContainerLayout和 extraCls 。

注意: ctCls 默认为 ''期望如下的类，它们将指定一个默认值:

  • Box Layout : 'x-box-layout-ct'
使用一个额外的CSS类配置以上的Class，它是append到默认对象上的。例如， 对于BoxLayout (Hbox and Vbox):
                                ctCls: 'x-box-layout-ct custom-class'

Component
data : Mixed
初始化数据集，它将被应用到 tpl 上以刷新组件的内容区域。
Component
defaultType : String
当一个子项目通过一个原生的配置对象 而不是一个组件的实例指定时。...

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

默认为 'panel' ， Ext.menu.Menu 默认为 'menuitem' ， Ext.Toolbar 和 Ext.ButtonGroup 默认为 'button' 。

Container
defaults : Object|Function
此选项是在所有添加的项目上应用默认设置的手段， 这些项目要么是通过...

此选项是在所有添加的项目上应用默认设置的手段， 这些项目要么是通过 items 配置项添加的， 或者是通过 add 或者是通过 insert 方法添加的。

如果添加的项目是一个配置对象， 并且不是一个组件的实例， 那么默认参数将会被无条件地被应用。 如果添加的项目是一个组件的实例， 那么默认参数将有条件地被应用，以免覆盖项目上的现有属性你。

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

例如，如需自动在 Ext.Panel 所包含的每个项目上应用padding属性，你可以传递: defaults: {bodyStyle: 'padding:15px'} 。

用法:

defaults: {               // defaults are applied to items, not the container
    autoScroll:true
},
items: [
    {
        xtype: 'panel',   // defaults do not have precedence over
        id: 'panel1',     // options in config objects, so the defaults
        autoScroll: false // will not be applied here, panel1 will be autoScroll:false
    },
    new Ext.Panel({       // defaults do
                                     have precedence over options
        id: 'panel2',     // options in components, so the defaults
        autoScroll: false // will be applied here, panel2 will be autoScroll:true.
    })
]
Container
disabled : Boolean
将当前Panel渲染成无效的(默认为 false )。 使用panel的disabled配置项的一个重要注意点是，在渲染过程中...
将当前Panel渲染成无效的(默认为 false )。 使用panel的disabled配置项的一个重要注意点是，在渲染过程中， 当Panel被设置为无效之前如果panel的布局尚未完成 IE总是无法正确初始化无效状态遮罩元素。 如果你遇到此问题，你可能需要使用 afterlayout 事件来初始化无效状态:
new Ext.Panel({
    ...
    listeners: {
        'afterlayout': {
            fn: function(p){
                p.disable();
            },
            single: true // important, as many layouts can occur
        }
    }
});
Panel
disabledClass : String
当组件处于无效状态时添加到组件上的CSS类(默认为 'x-item-disabled')。
Component
draggable : Boolean/Object
true 可以让当前panel启用拖拽操作(默认为 false )...

true 可以让当前panel启用拖拽操作(默认为 false )。

如需自定义的drag/drop实现，也可以向此配置项传递一个 Ext.Panel.DD配置替代 true 。 Ext.Panel.DD是一个内部没有文档化的类，它在周围移动代理元素 代替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();
Panel
elements : String
panel元素列表，以逗号分隔，在panel被渲染时初始化。 通常情况下...
panel元素列表，以逗号分隔，在panel被渲染时初始化。 通常情况下，此列表在配置时根据添加到panel的项目被自动创建， 但有时，即使没有在配置时指定，对于确保一个结构化的元素被渲染也很有用 (例如，你可能希望在panel被渲染后动态地添加一个按钮或者工具栏)。 添加这些元素到此列表中将会在panel被渲染时分配必须的占位符。 合法的值有
  • header
  • tbar (top bar)
  • body
  • bbar (bottom bar)
  • footer
Defaults to ' body '.
Panel
fbar : Object/Array
一个Toolbar 对象、一个Toolbar配置项，或者一个Buttons/ Button 配置数组，...

一个Toolbar 对象、一个Toolbar配置项，或者一个Buttons/ Button 配置数组，它们描述了一个被添加到当前Panel底部元素的 Toolbar.

在渲染后， fbar 将会为一个Toolbar 实例。

如果指定了 buttons ，它们将替代 fbar 配置项。

Panel的 buttonAlign 配置项目将会影响这些项目的布局，例如:
var w = new Ext.Window({
    height: 250,
    width: 500,
    bbar: new Ext.Toolbar({
        items: [{
            text: 'bbar Left'
        },'->',{
            text: 'bbar Right'
        }]
    }),
    buttonAlign: 'left', // anything but 'center' or 'right' and you can use '-', and '->'

                                  // to control the alignment of fbar items
    fbar: [{
        text: 'fbar Left'
    },'->',{
        text: 'fbar Right'
    }]
}).show();

注意:尽管Toolbar可以包含Field组件，但它们不会 通过加载祖先FormPanel而被更新。Panel的工具栏不是标准Container->Component 层次的一部分，所以它们不会被扫面以收集表单项。但是，这些值还是会 被提交，因为提交表单的参数是从DOM树中收集的。

Panel
fieldLabel : String
紧靠此field显示的标签文本(默认值为 '')。注意...

紧靠此field显示的标签文本(默认值为 '')。

注意:只有在当前组件被渲染到一个使用FormLayout 的容器中时，此配置才有效。 (例如 Ext.form.FormPanel 或 指定 layout:'form')。

另请参见 hideLabel 、 Ext.layout.FormLayout和 fieldTpl。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Name'
    }]
});
Component
flex : Number
注: 这个配置只用于该组件被包含在一个已使用BoxLayout配置的Container中时...

注: 这个配置只用于该组件被包含在一个已使用BoxLayout配置的Container中时。通过计算每一个子组件的flex值所占全部flex值之和的比例，来决定子组件的宽(HBoxLayout)高(VBoxlayout)。 任何子项的 flex = 0 或 flex = undefined 将不被设置(初始值大小将不被改变)。

BoxComponent
floating : Mixed
此参数被用来配置底层的 Ext.Layer. 此配置参数可接受的值有...

此参数被用来配置底层的 Ext.Layer. 此配置参数可接受的值有:

  • false : 默认。
    在渲染的地方以内嵌的方式显示panel.
  • true :
    浮动panel (绝对定位，有自动衬垫和阴影)。
      设置floating为true将会为当前panel创建一个Ext.Layer 并且在负值偏移量处显示panel，这样它就是隐藏的。
      既然panel被绝对定位，位置必须在渲染之后被显式设置 (例如 myPanel.setPosition(100,100); )。
      注意: 如果浮动面板，你必须总是指定一个固定的宽度， 否则它将是自动宽度并且总是展开以便填充到视口右侧 边缘。
  • object :
    指定的对象将会被用作将会被创建的 Ext.Layer的 配置对象。
Panel
footer : Ext.Element
Panel底部Element 。只读。此元素被用来容纳Panel的...
Panel底部Element 。只读。

此元素被用来容纳Panel的 buttons 或者 fbar 。

注意: 另请参见 el 的注释。

Panel
footerCfg : Object
一个DomHelper 元素的配置对象，描述了当前Panel的footer元素结构。 另请参见...

一个DomHelper 元素的配置对象，描述了当前Panel的footer元素结构。 另请参见 bodyCfg 。

Panel
forceLayout : Boolean
如果此值为true，容器将将强制初始化一次布局操作...
如果此值为true，容器将将强制初始化一次布局操作， 即使容器处于隐藏或者折叠状态。 此配置项对于在一个折叠或者隐藏的容器中强制渲染非常有用 (默认为false)。
Container
frame : Boolean
默认情况下使用 false ，渲染简单的1px的正方形边框。 true 将会渲染9个元素，以自定义的圆角结束...
默认情况下使用 false ，渲染简单的1px的正方形边框。 true 将会渲染9个元素，以自定义的圆角结束 (另请参见 Ext.Element.boxWrap)。

每种情况下产生的模板描述如下:

// frame = false
<div id="developer-specified-id-goes-here" class="x-panel">

    <div class="x-panel-header"><span class="x-panel-header-text">Title: (frame:false)</span></div>

    <div class="x-panel-bwrap">
        <div class="x-panel-body"><p>html value goes here</p></div>
    </div>
</div>

// frame = true (create 9 elements)
<div id="developer-specified-id-goes-here" class="x-panel">
    <div class="x-panel-tl"><div class="x-panel-tr"><div class="x-panel-tc">
        <div class="x-panel-header"><span class="x-panel-header-text">Title: (frame:true)</span></div>
    </div></div></div>

    <div class="x-panel-bwrap">
        <div class="x-panel-ml"><div class="x-panel-mr"><div class="x-panel-mc">
            <div class="x-panel-body"><p>html value goes here</p></div>
        </div></div></div>

        <div class="x-panel-bl"><div class="x-panel-br"><div class="x-panel-bc"/>
        </div></div></div>
</div>
Panel
header : Ext.Element
Panel的headerElement. 只读。此元素被用来容纳 title和 tools...
Panel的headerElement. 只读。

此元素被用来容纳 title和 tools

注意: 另请参见 el 的注释。

Panel
headerAsText : Boolean
true 将会在 header 中显示panel title ， false 将会隐藏它(默认为 true )。
Panel
headerCfg : Object
一个DomHelper 元素的配置对象，描述了当前Panel的header元素结构...

一个DomHelper 元素的配置对象，描述了当前Panel的header元素结构。 另请参见 bodyCfg 。

Panel
height : Number
组件的高度(默认值为 auto)。注:如果想使用百分比的方式...
组件的高度(默认值为 auto)。注:如果想使用百分比的方式来设置值，请查看 Ext.Component.anchor。
BoxComponent
hidden : Boolean
如果当前组件处于隐藏状态，此值为true。Read-only。
Component
hideBorders : Boolean
设置为true可以隐藏所包含的每个组件的边框， false为遵照组件现有的边框设置...
设置为true可以隐藏所包含的每个组件的边框， false为遵照组件现有的边框设置(默认为 false)。
Container
hideCollapseTool : Boolean
true 将会在 collapsible == true 时隐藏展开/折叠按钮， false 将会显示它(默认为 false )。
Panel
hideLabel : Boolean
true时完全隐藏label元素 ( label 和 separator)。 默认为 false。 默认情况下，即使你不指定...

true时完全隐藏label元素 ( label 和 separator)。 默认为 false。 默认情况下，即使你不指定 fieldLabel 它的空间仍然会被保留，这样这块区域会与其它确实拥有label的区域位于同一排。 讲此值设置为 true 将导致此区域不再保留此空间。

注意: 参见 clearCls 的注释。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield'
        hideLabel: true
    }]
});
Component
hideMode : String
组件如何隐藏，支持的值有： 'visibility' (css visibility), 'offsets' (位置偏移量为负值) 和...

组件如何隐藏，支持的值有： 'visibility' (css visibility), 'offsets' (位置偏移量为负值) 和 'display' (css display).

注意:一般首选默认值 'display'，因为当组件第一次显示的时候它们会自动进行布局 (隐藏的时候不会调整尺寸)。

Component
hideParent : Boolean
此值为true时，当调用hide/show方法时，将会hide和show组件的容器...
此值为true时，当调用hide/show方法时，将会hide和show组件的容器；false时将会 hide和show组件自身(默认为false)。例如，这可以用作window上隐藏按钮的一种 快捷操作，通过设置此按钮的hideParent:true，然后把它添加到window上。
Component
html : String/Object
一个HTML片段，或者一个 DomHelper 描述，用作layout元素的内容(默认为'')。...
一个HTML片段，或者一个 DomHelper 描述，用作layout元素的内容(默认为'')。 这个HTML内容在组件渲染之后才被添加，所以在 render 出发的时候，document中尚未包含此HTML。 但是这个内容将会在所有配置的 contentEl 之前被插入到body标签中。
Component
iconCls : String
CSS类选择器，指定被用作头部图标的背景图片(默认为'')...
CSS类选择器，指定被用作头部图标的背景图片(默认为'')。

指定自定义图表类的示例就像:

// specify the property in the config for the class:
     ...
     iconCls: 'my-icon'

// css class that specifies background image to be used as the icon image:
.my-icon { background-image: url(../images/my-icon.gif) 0 6px no-repeat !important; }
Panel
id : String
当前组件唯一的id(默认为auto-assigned id)...

当前组件唯一的id(默认为auto-assigned id)。 如果你需要在以后访问组件，而又没有一个有效的组件对象引用，那么你需要指定一个 id( 也就是，使用Ext. getCmp方法 )。

注意，此id也将被用作组件底层HTML标签的id，这些标签被渲染到页面中。 这将允许你编写基于id的CSS规则，以独立地描述指定的实例；并且，也可以通过 组件父标签的id选中子元素。

注意:为了避免与唯一的id 产生重复， 请参见 itemId 和 ref 。

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

Component
itemCls : String
注意: 只有在当前组件被渲染到一个使用FormLayout 布局的 容器中时此配置才有效...

注意: 只有在当前组件被渲染到一个使用FormLayout 布局的 容器中时此配置才有效。 (例如Ext.form.FormPanel 或者指定 layout:'form')。

一个附加的CSS类，应用到div上，包装当前field的表单元素。 如果提供了此参数， field级上的itemCls将会覆盖 container级上提供的 默认itemCls。 为itemCls指定的值将会被添加默认的 类('x-form-item')。

既然它被应用到项目的包装器上(参见 Ext.layout.FormLayout。 fieldTpl)， 它将允许你编写能应用到此field、label(如果有指定)、或者field内部任何其它元素的标准CSS规则。

注意: 参考 fieldLabel的注释。 .

示例用法:

// Apply a style to the field's label:
<style>
    .required .x-form-item-label {font-weight:bold;color:red;}
</style>

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Name',
        itemCls: 'required' //this label will be styled
    },{
        xtype: 'textfield',
        fieldLabel: 'Favorite Color'
    }]
});
Component
itemId : String
当没有可利用的对象引用时，itemId可以作为第二选择，用来获得一个组件的引用， 代替 ...

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

var c = new Ext.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'); // 与 Ext.getCmp()不同

p2 = p1.ownerCt.getComponent('p2'); // 通过兄弟对象获得引用

另请参见 id 和 ref 。

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

Component
items : MixedCollection
当前容器中的子组件集合 Ext.util.MixedCollection
Container
keys : Object/Array
一个Ext.KeyMap 配置对象 (其格式为Ext.KeyMap.addBinding 所期望的值...
一个Ext.KeyMap 配置对象 (其格式为Ext.KeyMap.addBinding 所期望的值，用来向当前panel上绑定自定义的按键处理(默认为 null )
Panel
labelSeparator : String
每个fieldLabel 文本后面现实的分隔符。 此属性可以在多个层次上进行配置...

每个fieldLabel 文本后面现实的分隔符。 此属性可以在多个层次上进行配置。优先顺序为：

  • field / component level
  • container level
  • layout level (默认为冒号 ':')
如不需要为当前field的label显示分隔符，指定一个空字符串''即可。

注意:参见 clearCls 的注释。

另请参见 hideLabel 和 Ext.layout.FormLayout。 fieldTpl。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    layoutConfig: {
        labelSeparator: '~'   // layout config has lowest priority (defaults to ':')
    },
    labelSeparator: '>>',     // config at container level
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Field 1',
        labelSeparator: '...' // field/component level config supersedes others
    },{
        xtype: 'textfield',
        fieldLabel: 'Field 2' // labelSeparator will be '='

    }]
});
Component
labelStyle : String
一个CSS样式描述字符串，它将直接应用到当前field的label上...

一个CSS样式描述字符串，它将直接应用到当前field的label上。 如果有设置，默认为容器的labelStyle值(例如 Ext.layout.FormLayout.labelStyle , 或者 '')。

注意:参见 clearCls 的注释。

另请参见 hideLabel 和 Ext.layout.FormLayout. fieldTpl。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Name',
        labelStyle: 'font-weight:bold;'
    }]
});
Component
layout : String/Object
*重要: 为了让子项目能被正确地调整尺寸和位置， 典型地，必须通过 layout 配置项指定一个布局管理器。...

*重要: 为了让子项目能被正确地调整尺寸和位置， 典型地，必须通过 layout 配置项指定一个布局管理器。

调整子items的尺寸和位置 是容器的布局管理器的职责，它负责创建和管理你想要的那种布局类型。 例如:

new Ext.Window({
    width:300, height: 300,
    layout: 'fit', // explicitly set layout manager: override the default (layout:'auto')
    items: [{
        title: 'Panel inside a Window'
    }]
}).show();

如果没有为一个通用的容器(例如Container或者Panel)特别指定 layout ，将会使用default layout manager ，它除了将子组件按顺序渲染到容器中之外什么事情都不做( 这种情况下不会发生调整尺寸和位置的操作)。 一些容器类内部指定了一个默认的布局 (例如FormPanel指定了 layout: 'form' )。 另一些有特殊用途的类内部指定/管理它们内置的布局( 例如GridPanel, TabPanel, TreePanel, Toolbar, Menu等等)。

layout 既可以通过一个对象或者一个字符串指定:

  • 用一个对象指定
    • 示例用法:
      • layout: {
    type: 'vbox',
    padding: '5',
    align: 'left'
}
    • type

      • 当前容器需要使用的布局类型。 如果不指定，将创建并使用一个默认的 Ext.layout.ContainerLayout 。

      可用的布局 type 值是:

      • absolute
      • accordion
      • anchor
      • auto Default
      • border
      • card
      • column
      • fit
      • form
      • hbox
      • menu
      • table
      • toolbar
      • vbox
    • 布局描述配置参数

      • 也可以指定附加的布局描述配置。 关于每个布局类型可用配置选项完整的细节，参见 type 参数指定的相关布局类。

  • 通过一个字符串指定
    • 示例用法:
      • layout: 'vbox',
layoutConfig: {
    padding: '5',
    align: 'left'
}
    • layout

      • 当前容器使用的布局 type ( 可用的布局类型值参见上述列表)。

    • layoutConfig

      • 附件的布局描述配置参数。 关于每个布局类型可用配置选项完整的细节，参见 layout 参数指定的相关布局类。

Container
layoutConfig : Object
这是一个配置对象，包含为 layout 指定的参数， 如果 layout 是作为一个 string 来指定的。

Container
listeners : Object
一个包含一个或多个事件处理器的配置对象，会在初始化的时候被添加到目标对象上...

一个包含一个或多个事件处理器的配置对象，会在初始化的时候被添加到目标对象上。 该配置对象应该是一个有效的监听器配置对象就像 addListener例子中指定的一样可一次附加多个处理器。

ExtJs Components上的DOM事件

一些 ExtJs Component 类导出时会选择一些DOM事件(例如 "click", "mouseover" 等等), 这通常只是在有额外的值可以被添加时发生。例如DataView类的 click事件会传递被点击的节点。也可以直接在Component的HTMLElementevent上访问DOM事件，但必需在Component被渲染后监听器才能添加到Element 上。可以按照以下步骤添加插件:

// 插件会用一个监听器配置对象进行配置。
//该组件会被添加到所有处理方法的参数列表上。
Ext.DomObserver = Ext.extend(Object, {
    constructor: function(config) {
        this.listeners = config.listeners ? config.listeners : config;
    },

    // 组件将自己传递进了插件的初始化方法里
    init: function(c) {
        var p, l = this.listeners;
        for (p in l) {
            if (Ext.isFunction(l[p])) {
                l[p] = this.createHandler(l[p], c);
            } else {
                l[p].fn = this.createHandler(l[p].fn, c);
            }
        }

        // 渲染后立即添加监听器到元素上
        c.render = c.render.createSequence(function() {
            var e = c.getEl();
            if (e) {
                e.on(l);
            }
        });
    },

    createHandler: function(fn, c) {
        return function(e) {
            fn.call(this, e, c);
        };
    }
});

var combo = new Ext.form.ComboBox({

    // 元素被点击后折叠
    plugins: [ new Ext.DomObserver({
        click: function(evt, comp) {
            comp.collapse();
        }
    })],
    store: myStore,
    typeAhead: true,
    mode: 'local',
    triggerAction: 'all'
});

Observable
margins : Object
注:此配置只用于该组件展现在一个使用BorderLayout...

注:此配置只用于该组件展现在一个使用BorderLayout 或 BoxLayout的两个子类之一作为布局的容器。

这个margins对象在该组件中的格式为：

{top: (top margin),right: (right margin),bottom: (bottom margin),left: (left margin)}

也可以是一个字符串，中间用空格分隔，margin值为数字。 把matches中每一个值的次序跟CSS中margin值的排列方式相对应：

  • 如果只有一个值，它适用于所有方面。
  • 如果有两个值，top和bottom的边框设置为第一个值，left和right设置为第二个值。
  • 如果有三个值，top设置为第一个值，left和right设置为第二个值，bottom设置为第三个值。
  • 如果有四个值，分别设置为top, right, bottom, left。

默认值:

{top:0, right:0, bottom:0, left:0}
BoxComponent
maskDisabled : Boolean
true 将会在panel被disabled时进行遮罩,false将不会遮罩它(默认为...
true 将会在panel被disabled时进行遮罩, false 将不会遮罩它(默认为 true )。使用任意一种方法，当被禁用时，panel都将告诉它包含的元素禁用它们自己， 但是遮罩panel可以提供一种额外的视觉效果，用以提示panel被禁用。
Panel
minButtonWidth : Number
当前panel中所有buttons 最小宽度，像素值(默认为 75 )
Panel
monitorResize : Boolean
设置为true自动监测window的resize事件，以便处理所有对当前窗口尺寸 敏感的事情。...
设置为true自动监测window的resize事件，以便处理所有对当前窗口尺寸 敏感的事情。 典型地，通过选择一个 layout 来管理这个值，并且不应该手动设置它。
Container
overCls : String
一个可选的额外的CSS类，它将在鼠标移过元素时被添加到组件上...
一个可选的额外的CSS类，它将在鼠标移过元素时被添加到组件上，鼠标移出时 删除。(默认为'')。此属性对于在组件上，或者它的任何使用标准CSS规则的孩子节点上， 添加定制的'active' 或者 'hover'样式非常有用。
Component
padding : Number/String
设置body元素padding样式的快捷方式。 此值既可以是一个数值，被应用到所有侧边...
设置body元素padding样式的快捷方式。 此值既可以是一个数值，被应用到所有侧边，也可以是一个普通的描述padding的 CSS字符串。默认为undefined.
Panel
pageX : Number
如果该组件被包含在一个指定位置的容器中，这个值表示页面级的x坐标值（译者注：在有滚动条的情况下这个值很有用）。
BoxComponent
pageY : Number
如果该组件被包含在一个指定位置的容器中，这个值表示页面级的y坐标值（译者注：在有滚动条的情况下这个值很有用）。
BoxComponent
plugins : Object/Array
一个对象或者一个对象数组，为组件提供特殊的功能 ...
一个对象或者一个对象数组，为组件提供特殊的功能。 对一个合法的插件唯一的要求是它含有一个init()方法， 能接收一个Ext.Component型的参数。 当组件被创建时，如果有可用的插件，组件将会调用每个插件的init方法， 并将自身的引用作为方法参数传递给它。然后，每个插件就可以调用方法或者响应组件上的事件， 就像需要的那样提供自己的功能。
Component
preventBodyReset : Boolean
默认为 false 。当设置为 true 时， 一个额外的CSS类 'x-panel-normal' 将会被田间到panel的元素， 有效地将W3C(参见 http://www.w3.org/TR/CSS21/sample.html)...
默认为 false 。当设置为 true 时， 一个额外的CSS类 'x-panel-normal' 将会被田间到panel的元素， 有效地将W3C(参见 http://www.w3.org/TR/CSS21/sample.html) 建议的CSS样式应用到Panel的body元素上 (不是header, footer等等)。
Panel
ptype : String
需要创建配置的ptype。 当传递一个配置对象给构造函数时...
需要创建配置的ptype。 当传递一个配置对象给构造函数时，此配置选项不会被使用。 只有在使用懒初始化的时候此配置项才会被使用， 此时Plugin不是 通过一个完整的实例组件，而是通过一个Component配置指定的。 在渲染时，将会查找ptype以决定创建何种类型的Plugin。

如果你创建自己的Plugin，你可以通过 Ext.ComponentMgr.registerPlugin 对它们进行注册，以便能利用懒初始化和渲染机制。
Component
ref : String
一个路径描述，与组件的 ownerCt 相关，它描述了把当前组件的命名引用放置到哪个父容器中去。...

一个路径描述，与组件的 ownerCt 相关，它描述了把当前组件的命名引用放置到哪个父容器中去。

祖先的坐标路径可以通过'/'字符进行分隔。 例如，将一个Toolbar Button的引用放入 拥有此Toolbar的Panel中:

var myGrid = new Ext.grid.EditorGridPanel({
    title: 'My EditorGridPanel',
    store: myStore,
    colModel: myColModel,
    tbar: [{
        text: 'Save',
        handler: saveChanges,
        disabled: true,
        ref: '../saveButton'
    }],
    listeners: {
        afteredit: function() {
//          The button reference is in the GridPanel
            myGrid.saveButton.enable();
        }
    }
});

在上面的代码中，如果 ref 是 'saveButton' ，那么引用将会被放置到Toolbar中。 ref 中的每个'/' 都会从组件的 ownerCt 向上移动一级。

另请参见 added 和 removed 事件。

Component
region : String
注: 此配置只用于该组件展现在一个布局为BorderLayout的容器中...

注: 此配置只用于该组件展现在一个布局为BorderLayout的容器中(例如指定layout:'border')。

详见Ext.layout.BorderLayout。

BoxComponent
renderTo : Mixed
该值可以是一个节点的id、一个DOM节点或者一个已存在的元素...

该值可以是一个节点的id、一个DOM节点或者一个已存在的元素， 组件将会被渲染到其中。

  • 注意 :
      如果组件不是一个Container 的子项目时， 不要使用此选项。 渲染和管理它的子项目是一个Container 的layout manager的责任。
      当使用此配置项时，无需调用render()方法。

另请参见 render 。

Component
resizeEvent : String
在布局中进行尺寸调整所需要监听的事件。默认为'bodyresize'。
Panel
shadow : Boolean/String
(或者一个有效的Ext.Shadow Ext.Shadow.mode 值)，用来在panel后面显示一个阴影...
true (或者一个有效的Ext.Shadow Ext.Shadow.mode 值)，用来在panel后面显示一个阴影， false 将不会显示阴影(默认为 'sides' )。注意，此选项只有当 floating = true 时才应用。
Panel
shadowOffset : Number
如果显示了阴影，此参数为数值偏移量(默认为 4 )。注意，只有当 floating = true 时此参数才会被应用。...
如果显示了阴影，此参数为数值偏移量(默认为 4 )。注意，只有当 floating = true 时此参数才会被应用。
Panel
shim : Boolean
false将会在需要的浏览器中禁用iframe衬垫(默认为...
false 将会在需要的浏览器中禁用iframe衬垫(默认为 true )。注意，此选项只有在 floating = true 时应用。
Panel
stateEvents : Array
一个事件数组，当它们被触发时，组件需要保存自己的状态(默认值为 none)...

一个事件数组，当它们被触发时，组件需要保存自己的状态(默认值为 none)。 它们可以是任何该组件支持的事件类型，包括浏览器事件和 自定义事件(例如['click', 'customerchange'])。

对于保存和恢复组件状态的详细解释，参见 stateful

Component
stateId : String
为该组件指定的唯一的id值，它被用作管理组件状态的目的...
为该组件指定的唯一的id值，它被用作管理组件状态的目的。 (如果设定了id，默认值为组件自己的id，否则，如果组件使用自动生成的id，此值为null)。

对于保存和反解析组件状态的解释，参见 stateful 。

Component
stateful : Boolean
一个标志参数，它将引起组件在启动时尝试从一个保存的状态中恢复内部状态参数...

一个标志参数，它将引起组件在启动时尝试从一个保存的状态中恢复内部状态参数。 组件必须要么拥有一个 stateId 或者 id ，它们被分配给需要被管理的状态属性。 在跨页面加载时，不保证自动生成的id属性的稳定性， 并且，不能依赖此id来保存和恢复一个组件的相同状态。

为了保存状态的操作能够工作，状态管理器的提供者必须 被设置成一个Ext.state.Provider 的实现类，它覆盖了set 和get 方法，以便保存和恢复name/value对。 有一个内置的Ext.state.CookieProvider 可用。

为当前页面设置状态提供者:

Ext.state.Manager.setProvider(new Ext.state.CookieProvider({
    expires: new Date(new Date().getTime()+(1000*60*60*24*7)), //7 days from now
}));

当 stateEvents 配置项中其中之一的事件被触发时， 一个状态可保存的组件将试图保存其状态。

保存状态时，一个可保存状态的组件首先需要通过调用 getState 方法来序列化它的状态。 默认情况下，此函数什么事都不做。 开发者必须提供一个实现，返回一个hash对象，它描述了组件可恢复的状态。

getState方法产生的值将会传递给 Ext.state.Manager.set 方法，它使用配置的 Ext.state.Provider 来保存对象，以组件的 stateId 为key，或者，如果此值（指stateId）没有指定时， 使用它的 id 作为key。

在进行构造时，一个可保存状态的组件试图通过调用 Ext.state.Manager.get方法来 恢复它的状态，传递 stateId 或者，如果此值（指stateId）没有指定时， 使用它的 id 作为参数。

结果对象被传递给 applyState 。 applyState 的默认实现只是简单地把属性拷贝到对象中， 但是开发者可以覆盖此方法以支持更多行为。

通过向 beforestaterestore, staterestore, beforestatesave 和 statesave 事件上绑定监听器，你可以在保存和恢复状态时进行额外的处理。

Component
style : String
被添加到组件元素的特定样式。 必须是按照...
被添加到组件元素的特定样式。 必须是按照 Ext.Element.applyStyles 类指定格式的合法参数值。

new Ext.Panel({
    title: 'Some Title',
    renderTo: Ext.getBody(),
    width: 400, height: 300,
    layout: 'form',
    items: [{
        xtype: 'textarea',
        style: {
            width: '95%',
            marginBottom: '10px'
        }
    },
        new Ext.Button({
            text: 'Send',
            minWidth: '100',
            style: {
                marginBottom: '10px'
            }
        })
    ]
});
Component
tabTip : String
注: 这个配置只用于当该组件作为TabPanel的一个子项目时使用...

注: 这个配置只用于当该组件作为TabPanel的一个子项目时使用。

一个String类型的innerHTML(支持html标签)，当鼠标放在该选项上的时，显示一个tooltip。为了tips能够被渲染，Ext.QuickTips.init()必须被提前调用。
BoxComponent
tbar : Object/Array
panel的顶部工具栏。 此参数可以是一个 The top toolbar of the panel. This can be a Ext.Toolbar 对象、一个工具栏配置、或者一个被添加到工具栏的...

panel的顶部工具栏。 此参数可以是一个 The top toolbar of the panel. This can be a Ext.Toolbar 对象、一个工具栏配置、或者一个被添加到工具栏的buttons/button配置数组。 注意，在渲染之后此参数无效。如需在渲染之后访问顶部工具栏，请使用 getTopToolbar。

注意:尽管Toolbar可以包含Field组件，但它们不会 通过加载祖先FormPanel而被更新。Panel的工具栏不是标准Container->Component 层次的一部分，所以它们不会被扫面以收集表单项。但是，这些值还是会 被提交，因为提交表单的参数是从DOM树中收集的。

Panel
tbarCfg : Object
一个DomHelper 元素的配置对象，描述了当前Panel的tbar元素结构。 另请参见...

一个DomHelper 元素的配置对象，描述了当前Panel的tbar元素结构。 另请参见 bodyCfg 。

Panel
title : String
被用作innerHTML的标题文本(接受html标签) ，用来显示在panel的...
被用作innerHTML的标题文本(接受html标签) ，用来显示在panel的 header 中(默认为'')。 当 title 被指定时， header 元素将会被自动创建并显示，除非 header 被显式地设置为 false 。 如果你不在配置时指定一个 title ， 但是你想以后设置，你必须要么 指定一个非空的 title (一个空格' ' 也可以)或者指定 header:true ，这样容器元素将会被创建。
Panel
titleCollapse : Boolean
将会允许通过在顶部工具条的任意地方点击展开和折叠panel(当...
true 将会允许通过在顶部工具条的任意地方点击展开和折叠panel(当 collapsible = true )， false ) 将会只允许通过点击工具按钮进行操作(默认为 false ))。如果当前panel是border布局中的一个子项目，另请参见 BorderLayout.Region floatable 配置项。
Panel
toolTemplate : Ext.Template/Ext.XTemplate
用来在header 元素中创建tools 的模板。默认为:...

用来在header 元素中创建tools 的模板。默认为:

                                    new Ext.Template('<div class="x-tool x-tool-{id}">&#160;</div>')

可以覆盖此参数，以便为基于更复杂XTemplate的tools提供自定义的DOM结构。 模板的数据为一个简单的tool配置对象(不是整个Array)， 它在 tools配置项指定。 在以下例子中，当鼠标滑过tool时，一个<a>标签被用来提供视觉效果:

var win = new Ext.Window({
    tools: [{
        id: 'download',
        href: '/MyPdfDoc.pdf'
    }],
    toolTemplate: new Ext.XTemplate(
        '<tpl if="id==\'download\'">',
            '<a class="x-tool x-tool-pdf" href="{href}"></a>',
        '</tpl>',
        '<tpl if="id!=\'download\'">',
            '<div class="x-tool x-tool-{id}">&#160;</div>',
        '</tpl>'
    ),
    width:500,
    height:300,
    closeAction:'hide'
});

注意，CSS类'x-tool-pdf'必须拥有一个关联的样式规则，它提供了一个适当的背景图片， 例如:

                                a.x-tool-pdf {background-image: url(../shared/extjs/images/pdf.gif)!important;}
Panel
tools : Array
一个工具按钮配置数组，用来添加到头部工具区域。 当渲染之后，每个工具都被存储为一个Element ，被一个叫做...
一个工具按钮配置数组，用来添加到头部工具区域。 当渲染之后，每个工具都被存储为一个Element ，被一个叫做 tools. <tool-type> 的公共参数引用。

每个工具配置都可以包含如下参数:

  • id : String
    必须。需要创建的工具类型。默认情况下，这被指定为一个 CSS类，格式为 x-tool- <tool-type> ，用来形成工具Element。 对于以下列出的工具类型，Ext提供了CSS规则，和一个包含图片的icon对象。 通过提供可选的CSS规则和背景图片，开发者可以实现自定义的工具:
      toggle (当collapsible 为 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
    • tc : Object
      工具配置对象
  • stopEvent : Boolean
    默认为true。指定为false可以允许点击事件进行冒泡。
  • scope : Object
    调用处理函数的作用域。
  • qtip : String/Object
    一个tip字符串，或者一个提供给 Ext.QuickTip.register 的配置参数
  • hidden : Boolean
    True将会在初始化时渲染成隐藏的。
  • on : Object
    一个监听器配置对象，以addListener所需的参数格式 指定事件监听器

注意，当panel被折叠时提供部分固定的工具，这些工具仅仅提供可视按钮。 所有必备的功能，都必须通过添加实现了必备行为的处理函数来实现。

示例用法:

tools:[{
    id:'refresh',
    qtip: 'Refresh form Data',
    // hidden:true,
    handler: function(event, toolEl, panel){
        // refresh logic
    }
},
{
    id:'help',
    qtip: 'Get Help',
    handler: function(event, toolEl, panel){
        // whatever
    }
}]

对于自定义 'help' 的id，定义了两个相应的css类，拥有一个到15x15图片的链接:

                                .x-tool-help {background-image: url(images/help.png);}
.x-tool-help-over {background-image: url(images/help_over.png);}
// if using an image sprite:
.x-tool-help {background-image: url(images/help.png) no-repeat 0 0;}
.x-tool-help-over {background-position:-15px 0;}
Panel
tpl : Mixed
一个 Ext.Template , Ext.XTemplate 或者一个用来形成一个Ext.XTemplate的字符串数组...
一个 Ext.Template , Ext.XTemplate 或者一个用来形成一个Ext.XTemplate的字符串数组。 与 data 和 tplWriteMode 配置项协同使用。
Component
tplWriteMode : String
刷新组件的内容区域时使用的Ext.(X)Template方式。 默认为'overwrite' (参见 Ext.XTemplate.overwrite )。
刷新组件的内容区域时使用的Ext.(X)Template方式。 默认为'overwrite' (参见 Ext.XTemplate.overwrite )。
Component
unstyled : Boolean
覆盖 baseCls 设置为 baseCls = 'x-plain' ， 除了必须的属性之外，它将panel渲染成无样式的...
覆盖 baseCls 设置为 baseCls = 'x-plain' ， 除了必须的属性之外，它将panel渲染成无样式的，以便Ext布局功能能起作用 (例如overflow:hidden)。
Panel
width : Number
组件的宽度(默认值为 auto)。注:如果想使用百分比的方式...
组件的宽度(默认值为 auto)。注:如果想使用百分比的方式来设置值，请查看 Ext.Component.anchor。
BoxComponent
x : Number
如果被包含在一个指定位置的容器中，这个值表示x(left)坐标值。
BoxComponent
xtype : String
需要创建配置的xtype。 当传递一个配置对象给构造函数时...
需要创建配置的xtype。 当传递一个配置对象给构造函数时，此配置选项不会被使用。 只有在使用懒初始化的时候此配置项才会被使用，此时容器的子项目不是 通过一个完整的实例组件，而是通过一个Component配置指定的。 在渲染时，将会查找xtype以决定创建何种类型的子组件。

预定义的xtype列表如下： here。

如果你继承Component创建你自己的组件，你需要使用Ext.ComponentMgr.registerType 对它们进行注册，以便利用懒初始化和渲染机制。
Component
y : Number
如果被包含在一个指定位置的容器中，这个值表示y(top)坐标值。
BoxComponent

公共属性

Property Defined By
body : Ext.Element
Panel的body Element ，可以用来包含HTML内容。 内容可以在...
Panel的body Element ，可以用来包含HTML内容。 内容可以在html 配置项中指定，或者可以使用autoLoad 配置项被加载，或者通过Panel的Updater提供。 只读。

如果这被用来通过任意方式加载可视的HTML元素，那么Panel不可以被用作 一个Layout，用来容纳其它Panel。

如果当前Panel期望被用作一个Layout的宿主 (参见 layout) 那么body元素必须不能被加载或者改变---因为它处于Panel的Layout的控制 之下。

注意: 另请参见 el .

Panel
buttons : Array
Panel的按钮数组，它们从 buttons 配置属性创建。只读。
Panel
bwrap : Ext.Element
Panel的bwrapElement ，用来包含其它Panel元素(tbar, body, bbar, footer)。 参见 bodyCfg。 只读。
Panel
collapsed : Boolean
如果当前panel被折叠为true。只读。
Panel
dd : Ext.dd.DragSource.
如果当前Panel被配置为 draggable ，此参数将会包含一个 Ext.dd.DragSource 实例，它负责处理拖拽Panel...

如果当前Panel被配置为 draggable ，此参数将会包含一个 Ext.dd.DragSource 实例，它负责处理拖拽Panel。

开发者必须提供Ext.dd.DragSource的 抽象方法的实现，用来提供drag/drop过程中的每一步行为。 参见 draggable.
Panel
disabled : Boolean
当前组件处于无效状态时为true。 Read-only.
Component
el : Ext.Element
封装了当前组件的Ext.Element。 Read-only。通常情况下，这将是一个<DIV>元素，它由此类的...

封装了当前组件的Ext.Element。 Read-only。

通常情况下，这将是一个<DIV>元素，它由此类的 onRender方法创建，但是它可以通过使用 autoEl 配置项进行覆盖。

注意: 直到组件渲染完成此元素都将处于无效状态。

如需向当前组件的 DOM事件(而不是当前组件自己的Observable事件)添加监听器， 更多建议，参见 listeners 配置项，或者直接使用一个render监听器:

new Ext.Panel({
    title: 'The Clickable Panel',
    listeners: {
        render: function(p) {
            // Append the Panel to the click handler's argument list.
            p.getEl().on('click', handlePanelClick.createDelegate(null, [p], true));
        },
        single: true  // Remove the listener after first invocation
    }
});

另请参见 getEl

Component
footer : Ext.Element
Panel底部Element 。只读。此元素被用来容纳Panel的...
Panel底部Element 。只读。

此元素被用来容纳Panel的 buttons 或者 fbar 。

注意: 另请参见 el 的注释。

Panel
header : Ext.Element
Panel的headerElement. 只读。此元素被用来容纳 title和 tools...
Panel的headerElement. 只读。

此元素被用来容纳 title和 tools

注意: 另请参见 el 的注释。

Panel
hidden : Boolean
如果当前组件处于隐藏状态，此值为true。Read-only。
Component
initialConfig : Object
当前组件的初始化配置描述。 Read-only。
Component
items : MixedCollection
当前容器中的子组件集合 Ext.util.MixedCollection
Container
ownerCt : Ext.Container
组件所属的Container (默认为undefined，当前组件被添加到一个容器中时此值被自动设置)...
组件所属的Container (默认为undefined，当前组件被添加到一个容器中时此值被自动设置)。 Read-only。

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

Component
private : Object
我们只能在一块可见的区域进行布局。 布局目标*或者它的任何父元素* 为...
我们只能在一块可见的区域进行布局。 布局目标*或者它的任何父元素* 为display:none， 将意味着它没有一块可见的区域。
Container
refOwner : Ext.Container
如果当前组件是一个容器的孩子，并且是通过一个 ref 配置项被注册的，则此值为 ref 引用被插入到的祖先容器。
如果当前组件是一个容器的孩子，并且是通过一个 ref 配置项被注册的，则此值为 ref 引用被插入到的祖先容器。
Component
rendered : Boolean
如果当前组件已经被渲染了，此值为true。Read-only.
Component

公共方法

Method Defined By
Panel ( Object config )
参数:
  • config : Object
    配置对象
返回值:
  • void
Panel
add ( ...Object/Array component ) : Ext.Component/Array
向当前容器中添加 Component(s)。 描述 :在添加之前触发 beforeadd 事件...

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

描述 :

  • 在添加之前触发 beforeadd 事件
  • 将会相应地应用 容器的default config values (细节参见 defaults )。
  • 在组件添加之后触发 add 事件。

注意 :

  • 当调用 add 时如果容器已经被渲染， 你可能需要调用 doLayout 方法来刷新视图，它将导致所有尚未渲染的子组件进行渲染操作。 此操作是必须的，这样你可以 add 多个子组件而只刷新一次layout。 示例用法:

var tb = new Ext.Toolbar();
tb.render(document.body);  // toolbar is rendered
tb.add({text:'Button 1'}); // add multiple items (defaultType for Toolbar is 'button')
tb.add({text:'Button 2'});
tb.doLayout();             // refresh the layout
  • 警告: 使用BorderLayout布局的容器可能不能删除或者添加组件。 更多细节参见BorderLayout 的注释。
参数:
  • component : ...Object/Array

    需要添加的一个或多个组件，或者是一个组件数组。 更多信息参见 items 。

返回值:
  • Ext.Component/Array
    被添加的组件。
Container
addButton ( String/Object config , Function handler , Object scope ) : Ext.Button
向当前panel中添加一个按钮。注意，此方法必须在渲染之前调用。 首选的方式是通过...
向当前panel中添加一个按钮。注意，此方法必须在渲染之前调用。 首选的方式是通过buttons 配置项添加按钮。
参数:
  • config : String/Object
    一个合法的Ext.Button 配置。字符串将会变成默认按钮配置文本，对象将会被看做一个按钮配置对象。
  • handler : Function
    在按钮Ext.Button.click 时被调用的函数
  • scope : Object
    作用域( this 引用)，按钮处理函数将会在其中被执行。默认为Button.
返回值:
  • Ext.Button
    被添加的按钮
Panel
addClass ( string cls ) : Ext.Component
为组件底层的元素添加CSS样式。
为组件底层的元素添加CSS样式。
参数:
  • cls : string
    需要添加的CSS样式的class名称
返回值:
  • Ext.Component
    this
Component
addEvents( Object|String o, string Optional. ) : void
添加指定的事件到事件列表上，事件会被该Observable触发。
添加指定的事件到事件列表上，事件会被该Observable触发。
参数:
  • o : Object|String
    以事件名作为属性true作为值的对象 或者当多个事件名被分开的传递时则为第一个事件名。
  • Optional. : string
    事件名被分开的传递时则为事件名。 用法:
    this.addEvents('storeloaded', 'storecleared');
返回值:
  • void
Observable
addListener( String eventName, Function handler, [Object scope], [Object options] ) : void
给对象添加事件处理器。
给对象添加事件处理器。
参数:
  • eventName : String
    监听的事件名。
  • handler : Function
    事件调用的方法
  • scope : Object
    （可选）处理方法执行的作用域 (this的引用 reference)。 如果被忽略。默认为触发事件的对象。
  • options : Object
    （可选）包含处理器配置和属性的对象。 可能包含以下的属性:
    • scope : Object
      处理方法执行的作用域(this的引用) 。 如果被忽略。默认为触发事件的对象。
    • delay : Number
      在触发事件后延迟调用处理器的毫秒数。
    • single : Boolean
      如果为True则添加一个处理器来处理下一次的事件触发（仅一次），然后移除自己。
    • buffer : Number
      使得处理器延迟指定毫秒数后预定的运行在 一个Ext.util.DelayedTask中 。 如果事件在时间内再一次被触发，原始的处理器不会被调用，但是新的处理器会预定的在他的位置上。
    • target : Observable
      如果事件在目标的Observable上触发则仅仅调用处理器， 否则 事件会从子类的Observable上冒泡

    组合选项
    使用这些选项参数,可能会组合出不同类型的监听器：

    一个延迟的，一次性的监听器。

    myDataView.on('click', this.onClick, this, {
single: true,
delay: 100
});

    一次调用附加多个处理器
    该方法同样支持传递一个包含指定的多个处理器的属性的配置对象参数。

    myGridPanel.on({
'click' : {
    fn: this.onClick,
    scope: this,
    delay: 100
},
'mouseover' : {
    fn: this.onMouseOver,
    scope: this
},
'mouseout' : {
    fn: this.onMouseOut,
    scope: this
}
});

    或者一个简写的语法：

    myGridPanel.on({
'click' : this.onClick,
'mouseover' : this.onMouseOver,
'mouseout' : this.onMouseOut,
 scope: this
});
返回值:
  • void
Observable
applyToMarkup ( String/HTMLElement el ) : void
将此组件添加到已存在的有效的HTML标签中。 使用该方法时，无需再调用render()方法。
将此组件添加到已存在的有效的HTML标签中。 使用该方法时，无需再调用render()方法。
参数:
  • el : String/HTMLElement
返回值:
  • void
Component
bubble ( Function fn , [ Object scope ], [ Array args ] ) : Ext.Container
沿着component/container继承结构进行冒泡， 在每个组件上调用指定的函数。 所调用函数的作用域...
沿着component/container继承结构进行冒泡， 在每个组件上调用指定的函数。 所调用函数的作用域( this)将会是 指定的作用域或者是当前组件。 如果在函数任何一点上返回false，即停止冒泡过程
参数:
  • fn : Function
    需要调用的函数
  • scope : Object
    (可选) 函数的作用域(默认为当前节点)
  • args : Array
    (可选) 调用函数时需要传递的参数( 默认传递当前组件)
返回值:
  • Ext.Container
    this
Container
cascade ( Function fn , [ Object scope ], [ Array args ] ) : Ext.Container
从当前组件(第一个被调用的组件)开始，沿着component/container的继承树向下回溯...
从当前组件(第一个被调用的组件)开始，沿着component/container的继承树向下回溯， 在每个组件上调用指定的方法， 调用方法时的(this)作用域为指定的scope或者为当前组件。 传递给方法的参数为传递进来args或者当前组件。 在起泡的任意一个节点上，如果function返回false，即停止在那个分支上。
参数:
  • fn : Function
    需要调用的函数
  • scope : Object
    (可选)函数的作用域(默认为当前组件)
  • args : Array
    (可选) 调用函数时传递的参数 (默认传递当前组件)
返回值:
  • Ext.Container
    this
Container
cloneConfig ( Object overrides ) : Ext.Component
默认使用原先传递给当前实例的配置值克隆当前组件。
默认使用原先传递给当前实例的配置值克隆当前组件。
参数:
  • overrides : Object
    一个新的配置项，包含需要覆盖到克隆版本的所有属性。 可以传递一个id参数给此对象，否则将自动生成一个新的id以避免发生重复。
返回值:
  • Ext.Component
    当前组件的克隆副本
Component
collapse ( Boolean animate ) : Ext.Panel
折叠panel的body，这样它就变成隐藏的。 触发beforecollapse 事件...
折叠panel的body，这样它就变成隐藏的。 触发beforecollapse 事件，处理函数返回false可以取消折叠操作。
参数:
  • animate : Boolean
    True将会在变换时使用动画效果，其它为false( 默认为panel的animCollapse 配置项的值)
返回值:
  • Ext.Panel
    this
Panel
destroy () : void
通过如下方法销毁对象：删除所有的事件监听器、将组件的元素从DOM树中删除...
通过如下方法销毁对象：删除所有的事件监听器、将组件的元素从DOM树中删除（如果可以）、 将组件从它的 Ext.Container（如果可用）中删除、 并且将它从Ext.ComponentMgr中 注销。 销毁操作一般由框架自动完成，一般情况下不需要直接调用该方法。
参数:
  • 无。
返回值:
  • void
Component
disable () : Ext.Component
将组件置为无效状态，并出发'disable'事件。
将组件置为无效状态，并出发'disable'事件。
参数:
  • 无。
返回值:
  • Ext.Component
    this
Component
doLayout ( [ Boolean shallow ], [ Boolean force ] ) : Ext.Container
强制容器的布局进行重新计算。 在向一个已经渲染的容器中添加...
强制容器的布局进行重新计算。 在向一个已经渲染的容器中添加一个新的组件， 或者改变子组件的尺寸/位置参数之后，必须调用此函数。
参数:
  • shallow : Boolean
    (可选) 设置为true时将仅仅计算当前组件的布局， 并且让子组件在需要时自动计算布局 (默认为flase，它将递归地调用每个子容器的doLayout方法)
  • force : Boolean
    (可选) 设置为true将强制进行布局，即使项目是隐藏的也进行。
返回值:
  • Ext.Container
    this
Container
enable () : Ext.Component
将组件置为有效状态并触发'enable'事件。
将组件置为有效状态并触发'enable'事件。
参数:
  • 无。
返回值:
  • Ext.Component
    this
Component
enableBubble( String/Array events ) :void
是否现在使得事件会被该Observable触发并调用 this.getBubbleTarget()方法在拥有者的继承树...

是否现在使得事件会被该Observable触发并调用 this.getBubbleTarget()方法在拥有者的继承树中冒泡。Observable的基础类中没有该方法的实现。

该方法一般被Ext.Components用来冒泡事件到拥有者的容器。参看Ext.Component.getBubbleTarget默认的实现 在Ext.Component中返回组件的直接拥有者。但是如果需要的是一个已知的目标，该方法可以被重写来更快的访问需求的目标。

例子:

Ext.override(Ext.form.Field, {
    // 添加方法到Field的initComponent上改变事件为冒泡
    initComponent : Ext.form.Field.prototype.initComponent.createSequence(function() {
        this.enableBubble('change');
    }),

    // 我们知道我们想让Field的事件冒泡到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() {
            // 如果样式被修改标题会变红。
            myForm.header.setStyle('color', 'red');
        }
    }
});
参数:
  • events : String/Array
    冒泡的事件名，或事件名数组
返回值:
  • void
Observable
expand ( Boolean animate ) : Ext.Panel
展开panel的body以便让其变得可见。 触发beforeexpand 事件...
展开panel的body以便让其变得可见。 触发beforeexpand 事件，如果它返回false将会取消展开操作。
参数:
  • animate : Boolean
    True将会在变换过程中使用动画效果，否则为false (默认为panel的 animCollapse 配置项的值)
返回值:
  • Ext.Panel
    this
Panel
find ( String prop , String value ) : Array
根据属性查找当前容器中任何层次上的组件
根据属性查找当前容器中任何层次上的组件
参数:
  • prop : String
  • value : String
返回值:
  • Array
    Ext.Component数组
Container
findBy ( Function fn , [ Object scope ] ) : Array
根据一个自定义的函数，查找当前容器中任意层级上的一个组件。 如果传递的函数返回true...
根据一个自定义的函数，查找当前容器中任意层级上的一个组件。 如果传递的函数返回true，组件将会被包含在结果中。 函数将会被用如下参数(component, this container)进行调用。
参数:
  • fn : Function
    需要调用的函数
  • scope : Object
    可选
返回值:
  • Array
    Ext.Component数组
Container
findById ( String id ) : Ext.Component
通过id查找容器中位于任何层级上的组件
通过id查找容器中位于任何层级上的组件
参数:
  • id : String
返回值:
  • Ext.Component
Container
findByType ( String/Class xtype , [ Boolean shallow ] ) : Array
根据xtype或者类型，查找当前容器中任何层级上的组件
根据xtype或者类型，查找当前容器中任何层级上的组件
参数:
  • xtype : String/Class
    组件的xtype字符串，或者直接是组件的class类型
  • shallow : Boolean
    (可选) 此参数为flase时将检查当前组件是否是指定xtype的后裔 (这是默认情况)，或者设置为true， 将检查当前组件是否直接是指定xtype类型（译者注：即指不按照多态性进行检查）。
返回值:
  • Array
    Ext.Component数组
Container
findParentBy ( Function fn ) : Ext.Container
通过自定义的函数查找当前组件上层任何层次上的容器...
通过自定义的函数查找当前组件上层任何层次上的容器。 如果传递的函数返回true，容器对象将被返回。
参数:
  • fn : Function
    自定义的函数，使用如下参数调用(container,this component)。
返回值:
  • Ext.Container
    自定义函数返回true的第一个容器
Component
findParentByType ( String/Class xtype ) : Ext.Container
通过xtype或者class查找当前组件上层任何层次上的容器
通过xtype或者class查找当前组件上层任何层次上的容器
参数:
  • xtype : String/Class
    组件的xtype字符串，或者直接是组件的class
返回值:
  • Ext.Container
    符合指定xtype或者class的第一个容器
Component
fireEvent( String eventName, Object... args ) : Boolean
用传入的参数触发指定的事件 (减去事件名)。 一个事件可以被设置为冒泡 Obse...

用传入的参数触发指定的事件 (减去事件名)。

一个事件可以被设置为冒泡到Observable父类继承树(参看 Ext.Component.getBubbleTarget) 调用enableBubble实现。

参数:
  • eventName : String
    触发的事件名。
  • args : Object...
    传递给处理器的可变长度参数。
返回值:
  • Boolean
    如果有任何的处理器返回false则返回false，否则返回true。
Observable
focus ( [ Boolean selectText ], [ Boolean/Number delay ] ) : Ext.Component
尝试将当前组件设为焦点。
尝试将当前组件设为焦点。
参数:
  • selectText : Boolean
    (可选) 如果可用，同时选中组件内部的文本
  • delay : Boolean/Number
    (可选)将当前组件设置为焦点的延迟时间(设置为true等于0毫秒)
返回值:
  • Ext.Component
    this
Component
get ( String/Number key ) : Ext.Component
获取当前容器包含的一个组件( items.get(key)方法的别名)
获取当前容器包含的一个组件( items.get(key)方法的别名)
参数:
  • key : String/Number
    组件的索引
返回值:
  • Ext.Component
    Ext.Component
Container
getBottomToolbar () : Ext.Toolbar
返回panel底部区域toolbar ( bbar )。
返回panel底部区域toolbar ( bbar )。
参数:
  • 无。
返回值:
  • Ext.Toolbar
    toolbar
Panel
getBox ( [ Boolean local ] ) : Object
获取组件底层元素当前盒子模型的尺寸。（译者注：盒子模型是CSS术语，详细解释请自行搜索。）
获取组件底层元素当前盒子模型的尺寸。（译者注：盒子模型是CSS术语，详细解释请自行搜索。）
参数:
  • local : Boolean
    (可选)值为true时，组件的left值和top值将代替页面的XY被返回。(默认值为false)
返回值:
  • Object
    返回值的格式{x, y, width, height}
BoxComponent
getBubbleTarget () : Ext.Container
为Observable的fireEvent方法提供链接，它沿着继承结构进行冒泡操作。
为Observable的fireEvent方法提供链接，它沿着继承结构进行冒泡操作。
参数:
  • 无。
返回值:
  • Ext.Container
    拥有当前组件的容器。
Component
getComponent ( String/Number comp ) : Ext.Component
检查当前容器的 items property 并且获取当前容器的一个直接的子组件。
检查当前容器的 items property 并且获取当前容器的一个直接的子组件。
参数:
  • comp : String/Number
    参数可以是以下任何值：
    • 一个 String : 代表子组件的 itemId 或者 id
    • 一个 Number : 代表子组件在 items property 中的位置

    其它信息参见 Ext.util.MixedCollection.get。

返回值:
  • Ext.Component
    组件(如果有找到)。
Container
getEl () : Ext.Element
返回 Ext.Element ，它包装了当前组件。...

返回 Ext.Element ，它包装了当前组件。

通常情况下，这将是一个<DIV>元素，它是由该类的onRender方法创建的， 但是可以使用autoEl配置项 覆盖它。

注意: 此元素将会一直处于无效状态直到当前组件渲染完成。

如需向当前组件的 DOM事件(而不是当前组件自己的Observable事件)添加监听器， 更多建议，参见 listeners 配置项，或者直接使用一个render监听器:

new Ext.Panel({
    title: 'The Clickable Panel',
    listeners: {
        render: function(p) {
            // Append the Panel to the click handler's argument list.
            p.getEl().on('click', handlePanelClick.createDelegate(null, [p], true));
        },
        single: true  // Remove the listener after first invocation
    }
});
参数:
  • 无。
返回值:
  • Ext.Element
    包装当前组件的元素。
Component
getFooterToolbar () : Ext.Toolbar
返回panel底部( fbar )区域的toolbar
返回panel底部( fbar )区域的toolbar
参数:
  • 无。
返回值:
  • Ext.Toolbar
    toolbar
Panel
getFrameHeight () : Number
返回当前panel框架元素的高度像素值 (包括所有top和bottom工具栏以及header和footer元素...
返回当前panel框架元素的高度像素值 (包括所有top和bottom工具栏以及header和footer元素， 但是不包括body高度)。 如需获取body高度，参见 getInnerHeight.
参数:
  • 无。
返回值:
  • Number
    框架高度
Panel
getFrameWidth () : Number
返回当前panel框架元素的宽度像素值 (不包含body宽度)。如需获得body宽度，参见...
返回当前panel框架元素的宽度像素值 (不包含body宽度)。如需获得body宽度，参见 getInnerWidth。
参数:
  • 无。
返回值:
  • Number
    框架宽度
Panel
getHeight () : Number
获取该组件的当前高度值。
获取该组件的当前高度值。
参数:
  • 无。
返回值:
  • Number
BoxComponent
getId () : String
返回当前组件的id，如果没有定义id，则自动生成并返回一个id:'ext-comp-'...
返回当前组件的 id 如果没有定义 id 则自动生成并返回一个 id

'ext-comp-' + (++Ext.Component.AUTO_ID)
参数:
  • 无。
返回值:
  • String
    id
Component
getInnerHeight () : Number
返回body元素的高度像素值(不包括任何框架元素的高度)。 对于框架高度参见...
返回body元素的高度像素值(不包括任何框架元素的高度)。 对于框架高度参见 getFrameHeight。
参数:
  • 无。
返回值:
  • Number
    body高度
Panel
getInnerWidth () : Number
返回body元素宽度像素值(不包含任何框架元素的宽度)。 对于框架宽度，参见 getFrameWidth。
返回body元素宽度像素值(不包含任何框架元素的宽度)。 对于框架宽度，参见 getFrameWidth。
参数:
  • 无。
返回值:
  • Number
    body宽度
Panel
getItemId () : String
返回当前组件的 itemId 。 如果没有通过配置参数指定 itemId 那么，将会使用...
返回当前组件的 itemId 。 如果没有通过配置参数指定 itemId 那么，将会使用 getId 返回 id 。
参数:
  • 无。
返回值:
  • String
Component
getLayout () : ContainerLayout
返回容器当前使用的布局管理器。 如果容器当前没有设置布局管理器， 将会创建一个默认的...
返回容器当前使用的布局管理器。 如果容器当前没有设置布局管理器， 将会创建一个默认的 Ext.layout.ContainerLayout 并被设置为容器的布局管理器。
参数:
  • 无。
返回值:
  • ContainerLayout
    容器的布局管理器
Container
getLayoutTarget () : Ext.Element
返回当前容器中用来包含子组件的元素。提供了一个 可以返回容器的...

返回当前容器中用来包含子组件的元素。

提供了一个 可以返回容器的Element 的实现， 但是，如果容器有更复杂的结构， 可以覆盖此实现以返回 layout 在其中渲染子组件的元素。

参数:
  • 无。
返回值:
  • Ext.Element
    在其中渲染子组件的元素。
Container
getOuterSize () : Object
获取当前组件所在元素的尺寸大小，包括边缘的空白处。
获取当前组件所在元素的尺寸大小，包括边缘的空白处。
参数:
  • 无。
返回值:
  • Object
    一个包含元素大小的对象 {width: (element width + left/right margins), height: (element height + top/bottom margins)}
BoxComponent
getPosition ( [ Boolean local ] ) : Array
获取组件底层元素当前的XY位置。
获取组件底层元素当前的XY位置。
参数:
  • local : Boolean
    (可选)如果为true，将返回元素的left和top值，而不是相对于页面内的 XY。(默认值为 false)
返回值:
  • Array
    元素的XY位置值(例如：[100, 200])
BoxComponent
getResizeEl () : Ext.Element
返回该组件的最外层用来定义这些组件整体大小的Element...

返回该组件的最外层用来定义这些组件整体大小的Element对象。

通常用 getEl 方法将会返回相同的Element对象，但在有些情况下，组件可能有一些更多的封装了它的主要动态Element对象的Element对象。

例如ComboBox。它是封装在一个包含<input>元素的包装元素里(这将返回其 getEl方法和触发按钮的元素)。返回的元素为resizeEl。

参数:
  • 无。
返回值:
  • Ext.Element
    The Element which is to be resized by size managing layouts.
BoxComponent
getSize () : Object
获取组件底层元素当前的大小。
获取组件底层元素当前的大小。
参数:
  • 无。
返回值:
  • Object
    一个包含元素大小的对象{width: (element width), height: (element height)}
BoxComponent
getTool ( String id ) : Object
根据id获取一个tool.
根据id获取一个tool.
参数:
  • id : String
返回值:
  • Object
    tool
Panel
getTopToolbar () : Ext.Toolbar
返回panel顶部区域的 toolbar ( tbar ).
返回panel顶部区域的 toolbar ( tbar ).
参数:
  • 无。
返回值:
  • Ext.Toolbar
    toolbar
Panel
getUpdater () : Ext.Updater
获取当前panel的 Ext.Updater .让你可以为当前panel的body执行Ajax更新。
获取当前panel的 Ext.Updater .让你可以为当前panel的body执行Ajax更新。
参数:
  • 无。
返回值:
  • Ext.Updater
    Updater
Panel
getWidth () : Number
获取该组件的当前宽度值。
获取该组件的当前宽度值。
参数:
  • 无。
返回值:
  • Number
BoxComponent
getXType () : String
获取当前组件的xtype，它是用 Ext.ComponentMgr 注册的。 所有可用的xtype列表，参见...
获取当前组件的xtype，它是用 Ext.ComponentMgr 注册的。 所有可用的xtype列表，参见 Ext.Component 类头部。示例用法:

var t = new Ext.form.TextField();
alert(t.getXType());  // alerts 'textfield'
参数:
  • 无。
返回值:
  • String
    The xtype
Component
getXTypes () : String
返回此组件的xtype继承树，用字符'-'分隔。 所有可用的xtype值...

返回此组件的xtype继承树，用字符'-'分隔。 所有可用的xtype值，请参见Ext.Component 类的头部。

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

示例用法:

var t = new Ext.form.TextField();
alert(t.getXTypes());  // alerts 'component/box/field/textfield'
参数:
  • 无。
返回值:
  • String
    xtype层次字符串
Component
hasListener( String eventName ) : Boolean
检测对象是否包含指定事件的任何监听器
检测对象是否包含指定事件的任何监听器
参数:
  • eventName : String
    检测的事件名
返回值:
  • Boolean
    如果事件被监听则为true，否则为false
Observable
hide () : Ext.Component
隐藏当前组件。 监听 beforehide' 事件并且返回false 可以取消隐藏组件的操作。 在隐藏组件之后触发...
隐藏当前组件。 监听 beforehide' 事件并且返回false 可以取消隐藏组件的操作。 在隐藏组件之后触发 ' hide' 事件。 如果组件被配置成 hidden 那么此方法在内部被调用。
参数:
  • 无。
返回值:
  • Ext.Component
    this
Component
insert ( Number index , Ext.Component component ) : Ext.Component
在当前容器的指定索引处插入一个组件。 在插入之前触发...
在当前容器的指定索引处插入一个组件。 在插入之前触发 beforeadd 事件， 然后在组件被插入之后触发 add 事件。
参数:
  • index : Number
    组件会被插入到容器子项集合中时的索引位置
  • component : Ext.Component
    需要插入的子组件。

    Ext使用懒渲染，只有在必要的时候才会渲染插入的组件。

    如果使用懒渲染，可以传递一个组件配置对象以避免创建一个真实组件的开销， 这意味着，插入的组件不会立即被渲染。 为了利用这个“懒初始化”('lazy instantiation')， 必须把组件设置为它注册的 Ext.Component.xtype 值。

    所有可用的xtype列表，参见 Ext.Component。
返回值:
  • Ext.Component
    使用容器默认配置值插入的组件(或者配置对象)。
Container
isVisible () : Boolean
如果当前组件可见，返回true。
如果当前组件可见，返回true。
参数:
  • 无。
返回值:
  • Boolean
    如果当前组件可见，返回true，其它返回false。
Component
isXType ( String xtype , [ Boolean shallow ] ) : Boolean
Tests whether or not this Component is of a specific xtype. This can test whether this Component is descended from th...

测试此组件是否是指定的xtype。此方法既可以测试是否是指定的xtype的某个子类， 或者它是否直接是指定的xtype类(shallow=true)。

如果使用你自己的子类，必须知道组件必须注册它的xtype值。

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

示例用法:

var t = new Ext.form.TextField();
var isText = t.isXType('textfield');        // true
var isBoxSubclass = t.isXType('box');       // true, descended from BoxComponent
var isBoxInstance = t.isXType('box', true); // false, not a direct BoxComponent instance
参数:
  • xtype : String
    需要为当前组件进行检测的xtype
  • shallow : Boolean
    (可选) 如果为false，检测组件是否是xtype继承树中的某个子类（默认是这种情况）， 如果为true，只检测组件是否是指定的xtype类型。
返回值:
  • Boolean
    如果当前组件是指定xtype的子类，返回true，其它返回flase。
Component
load ( Object/String/Function config ) : Ext.Panel
立即使用XHR返回的内容装载当前panel的内容。
立即使用XHR返回的内容装载当前panel的内容。
参数:
  • config : Object/String/Function
    一个包含任何如下选项的配置对象:
    panel.load({
    url: 'your-url.php',
    params: {param1: 'foo', param2: 'bar'}, // or a URL encoded string
    callback: yourFunction,
    scope: yourObject, // optional scope for the callback
    discardUrl: false,
    nocache: false,
    text: 'Loading...',
    timeout: 30,
    scripts: false
});
    唯一的必须参数是url。 可选的nocache、text和script参数是 disableCaching、indicatorText和loadScripts的快捷方式， 它们被用来设置到当前panel的Updater实例所绑定的 属性上。
返回值:
  • Ext.Panel
    this
Panel
mon ( Observable|Element item , Object|String ename , Function fn , Object scope , Object opt ) : void
向任何Observable对象(或者元素)上添加监听器，监听器将会在组件...

向任何Observable对象(或者元素)上添加监听器，监听器将会在组件销毁时被自动删除。
用法：

myGridPanel.mon(myGridPanel.getSelectionModel(), 'selectionchange', handleSelectionChange, null, {buffer: 50});

or:

myGridPanel.mon(myGridPanel.getSelectionModel(), {
    selectionchange: handleSelectionChange,
    buffer: 50
});
参数:
  • item : Observable|Element
    需要添加listener/listeners的项目。
  • ename : Object|String
    事件名，或者一个包含事件名属性的对象。
  • fn : Function
    (可选) 如果 ename 参数是一个事件名，此参数为处理函数。
  • scope : Object
    (可选)如果 ename 参数是一个事件名称，此参数是作用域 ( this 引用)，监听函数将会在此作用域中被执行。
  • opt : Object
    (可选)如果 ename 参数是一个事件名称， 此参数是 addListener 配置项。
返回值:
  • void
Component
mun ( Observable|Element item , Object|String ename , Function fn , Object scope ) : void
删除通过mon 方法添加的监听器。
删除通过mon 方法添加的监听器。
参数:
  • item : Observable|Element
    需要删除listener/listeners的项目。
  • ename : Object|String
    事件名称，或者一个包含事件名称属性的对象。
  • fn : Function
    (可选)如果 ename 参数是一个事件名称，此参数是一个处理函数。
  • scope : Object
    (可选)如果 ename 参数是一个事件名称，此参数是作用域 ( this 引用)，监听函数将会在此作用域中被执行。
返回值:
  • void
Component
nextSibling () : Ext.Component
返回所属容器中的下一个组件
返回所属容器中的下一个组件
参数:
  • 无。
返回值:
  • Ext.Component
Component
on( String eventName, Function handler, [Object scope], [Object options] ) : void
给对象添加事件处理器 (addListener的简写形式)
给对象添加事件处理器 (addListener的简写形式。)
参数:
  • eventName : String
    监听的事件类型
  • handler : Function
    事件调用的方法
  • scope : Object
    （可选）处理方法执行时的作用域 (this 的引用)。 如果被忽略。默认为触发事件的对象。
  • options : Object
    可选 包含处理器配置的对象。
返回值:
  • void
Observable
previousSibling () : Ext.Component
返回所属容器中的前一个组件
返回所属容器中的前一个组件
参数:
  • 无。
返回值:
  • Ext.Component
Component
purgeListeners() : void
移除对象上所有的监听器
移除对象上所有的监听器
参数:
  • 无。
返回值:
  • void
Observable
relayEvents( Object o, Array events ) : void
从指定的Observable上传递选择的事件就好像被当前对象触发一样。
从指定的Observable上传递选择的事件就好像被当前对象触发一样。
参数:
  • o : Object
    该Observable上的事件被当前对象传递。
  • events : Array
    传递的数组名。
返回值:
  • void
Observable
remove ( Component/String component , [ Boolean autoDestroy ] ) : Ext.Component
从当前容器中移除一个组件。 在移除之前触发 beforeremove 事件， 然后在组件被移除之后触发...
从当前容器中移除一个组件。 在移除之前触发 beforeremove 事件， 然后在组件被移除之后触发 remove 事件。
参数:
  • component : Component/String
    需要移除的组件引用或者id
  • autoDestroy : Boolean
    (可选) 设置为true将自动调用被删组件的 Ext.Component.destroy 函数。 默认为容器的 autoDestroy 配置值。
返回值:
  • Ext.Component
    被移除的组件。
Container
removeAll ( [ Boolean autoDestroy ] ) : Array
从当前容器中删除所有组件。
从当前容器中删除所有组件。
参数:
  • autoDestroy : Boolean
    (可选) 此参数为true时将自动调用 被删组件的 Ext.Component.destroy 方法。 默认为当前容器的 autoDestroy 配置值。
返回值:
  • Array
    被销毁的组件数组
Container
removeClass ( string cls ) : Ext.Component
从组件底层的元素上删除一个CSS类。
从组件底层的元素上删除一个CSS类。
参数:
  • cls : string
    需要移除的CSS类名
返回值:
  • Ext.Component
    this
Component
removeListener( String eventName, Function handler, [Object scope] ) : void
删除一个事件处理器。
删除一个事件处理器。
参数:
  • eventName : String
    处理器关联的事件类型。
  • handler : Function
    移除的处理器。 这应该是传递到addListener里的方法的引用。
  • scope : Object
    （可选）处理器指定的初始作用域。
返回值:
  • void
Observable
render ( [ Element/HTMLElement/String container ], [ String/Number position ] ) : void
在传递进来的HTML元素中渲染当前组件。...

在传递进来的HTML元素中渲染当前组件。

如果你正在使用一个Container 对象放置当前组件，那么请不要使用render方法。

当容器第一次被渲染时，它的子组件将会被容器的 layout 管理器渲染。

某些布局管理器允许动态添加子组件。它们包括 Ext.layout.CardLayout, Ext.layout.AnchorLayout, Ext.layout.FormLayout, Ext.layout.TableLayout。

当一个新的子组件被添加时，如果容器已经被渲染了， 你可能需要调用容器的 doLayout 方法来刷新视图，它将导致所有没有被渲染的子组件进行渲染操作。 此操作是必须的，这样你可以添加多个子组件而只刷新一次layout。

当创建复杂的UI时，非常重要的一点是，请记住调整子项目的尺寸和位置是容器的 layout 管理器的职责。 如果你希望子项目的尺寸对用户交互作出反应， 你必须为容器配置一个布局管理器，它将创建和管理你心里想要的那种布局。

忽略容器的layout 配置意味着将会使用一个基本的布局管理器，它除了按次序把子组件 渲染到容器中之外什么事情都不做。 这种情况下，任何尺寸和位置的调整操作都不会发生。

参数:
  • container : Element/HTMLElement/String
    (可选) 需要在其中渲染当前组件的元素。 如果它是从一个已存在的标签中创建的，此参数应该被忽略。
  • position : String/Number
    (可选) 容器中的一个元素ID或者一个DOM节点索引， 当前组件将会被插入到它前面 (默认append到容器的尾部)
返回值:
  • void
Component
resumeEvents() : void
重新开始触发事件。(参见suspendEvents) 如果事件以queueSuspended参数被挂起，则在事件被挂起时 ...
重新开始触发事件。(参见 suspendEvents) 如果事件以queueSuspended 参数被挂起，则在事件被挂起时触发的事件会被传递到所有的监听器上
参数:
  • 无。
返回值:
  • void
Observable
setAutoScroll ( Boolean scroll ) : Ext.BoxComponent
设置该组件内容溢出时是否自动显示滚动条。
设置该组件内容溢出时是否自动显示滚动条。
参数:
  • scroll : Boolean
    值为true的话组件自动显示滚动条。
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setDisabled ( Boolean disabled ) : Ext.Component
工具函数，使用布尔值设置有效/无效(disabled/enabled )。
工具函数，使用布尔值设置有效/无效(disabled/enabled )。
参数:
  • disabled : Boolean
返回值:
  • Ext.Component
    this
Component
setHeight ( Mixed height ) : Ext.BoxComponent
设置此组件的高度。该方法将触发resize事件。
设置此组件的高度。该方法将触发resize事件。
参数:
  • height : Mixed
    The new height to set.
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setIconClass ( String cls ) : void
设置CSS类，为当前panel提供图标图片。 如果已经设置了...
设置CSS类，为当前panel提供图标图片。 如果已经设置了，此方法将会替换任何现有的图标类并在完成之后触发 iconchange 事件。
参数:
  • cls : String
    新的CSS类名
返回值:
  • void
Panel
setPagePosition ( Number x , Number y ) : Ext.BoxComponent
设置组件在页面中的XY位置。 如果需要设置left和top值 ，请使用...
设置组件在页面中的XY位置。 如果需要设置left和top值 ，请使用setPosition方法。 该方法触发move事件。
参数:
  • x : Number
    The new x position
  • y : Number
    The new y position
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setPosition ( Number left , Number top ) : Ext.BoxComponent
设置组件的left和top值。设置组件的页面XY值，请使用setPagePosition方法。该方法触发...
设置组件的left和top值。设置组件的页面XY值，请使用setPagePosition方法。该方法触发move事件。
参数:
  • left : Number
    The new left
  • top : Number
    The new top
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setSize ( Mixed width , Mixed height ) : Ext.BoxComponent
设置BoxComponent的宽度和高度。 此方法触发resize事件...
设置BoxComponent的宽度和高度。 此方法触发resize事件。此方法可以接收单独的width或者height值作为参数， 或者你可以传递像这样的一个size对象： {width:10, height:20} 。
参数:
  • width : Mixed
    设置的新的width值。这可以是：
    • 一个Number类型指定Element新的宽度 Ext.Element.defaultUnit(默认为像素 :'px')。
    • 一个String类型用于设置width的CSS样式。
    • 一个size对象格式为 {width: widthValue, height: heightValue} 。
    • 值为 undefined 时，保留原来的width不变。
  • height : Mixed
    设置的新的height值(如果第一个参数传递了一个size对象，此参数没有必要传递)。这可以是：
    • 一个Number类型指定Element新的高度 Ext.Element.defaultUnit(默认为像素 :'px')。
    • 一个String类型用于设置height的CSS样式。也有可能不会被使用到。
    • 值为 undefined 时，保留原来的height不变。
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setTitle ( String title , [ String iconCls ] ) : void
为panel设置标题文本，也可选择设置 icon class。...

为panel设置标题文本，也可选择设置 icon class。

为了能够设置标题，必须已经为Panel创建了一个header元素。 要么通过向Panel上注册一个非空的 title ，或者配置 header: true ，可触发此操作(译者注：指为Panel创建header元素)。

参数:
  • title : String
    需要设置的标题文本
  • iconCls : String
    (可选) iconCls 一个用户定义的CSS类，为当前panel提供图标图片。
返回值:
  • void
Panel
setVisible ( Boolean visible ) : Ext.Component
工具方法，通过使用布尔值隐藏或者显示当前组件。
工具方法，通过使用布尔值隐藏或者显示当前组件。
参数:
  • visible : Boolean
    true时显示，false时隐藏
返回值:
  • Ext.Component
    this
Component
setWidth ( Mixed width ) : Ext.BoxComponent
设置组件的宽度。 此方法触发resize事件。
设置组件的宽度。 此方法触发resize事件。
参数:
  • width : Mixed
    The new width to set.
返回值:
  • Ext.BoxComponent
    this
BoxComponent
show () : Ext.Component
显示当前组件。监听' beforeshow' 事件，返回 false 取消显示组件...
显示当前组件。监听' beforeshow' 事件，返回 false 取消显示组件。在显示组件之后触发' show' 事件。
参数:
  • 无。
返回值:
  • Ext.Component
    this
Component
suspendEvents( Boolean queueSuspended ) : void
暂停触发所有的事件。 (参看resumeEvents)
暂停触发所有的事件。（参看 resumeEvents)
参数:
  • queueSuspended : Boolean
    如果传递为true则排列好暂停的事件使得在调用 resumeEvents 后再触发它们，而不是抛弃所有暂停的事件。
返回值:
  • void
Observable
syncSize () : Ext.BoxComponent
强制组件的大小按照此组件底层元素当前的高度和宽度计算。
强制组件的大小按照此组件底层元素当前的高度和宽度计算。
参数:
  • 无。
返回值:
  • Ext.BoxComponent
    this
BoxComponent
toggleCollapse ( Boolean animate ) : Ext.Panel
根据panel的当前状态，执行expand或者 collapse操作 的快捷方式。
根据panel的当前状态，执行expand或者 collapse操作 的快捷方式。
参数:
  • animate : Boolean
    True将会在转换过程中使用动画效果，否则为false (默认为panel的animCollapse 配置项的值)
返回值:
  • Ext.Panel
    this
Panel
un( String eventName, Function handler, [Object scope] ) : void
删除一个事件处理器(removeListener方法的简写形式)
删除一个事件处理器(removeListener方法的简写形式。)
参数:
  • eventName : String
    处理器关联的事件类型
  • handler : Function
    被删除的处理器 这应该是传入 addListener 中的方法的引用。
  • scope : Object
    （可选）为处理器指定的初始作用域。
返回值:
  • void
Observable
update ( Mixed htmlOrData , [ Boolean loadScripts ], [ Function callback ] ) : void
刷新组件的内部区域。
刷新组件的内部区域。
参数:
  • htmlOrData : Mixed
    如果已经通过tpl为当前组件配置了一个模板，那么 将会使用此参数来装配模板。 如果没有为当前组件配置模板，组件的内容区域将会通过Ext.Element 进行刷新。
  • loadScripts : Boolean
    (可选)只用在使用html配置时此参数才合法。默认为false。
  • callback : Function
    (可选)只用在使用html配置时此参数才合法。 当脚本加载完成时回调函数才被执行。
返回值:
  • void
Component
updateBox ( Object box ) : Ext.BoxComponent
设置此组件底层元素的盒子模型尺寸。(译者注：盒子模型是CSS术语，详细资料请自行搜索。)
设置此组件底层元素的盒子模型尺寸。(译者注：盒子模型是CSS术语，详细资料请自行搜索。)
参数:
  • box : Object
    一个格式为{x, y, width, height}的对象
返回值:
  • Ext.BoxComponent
    this
BoxComponent

公共事件

Event Defined By
activate : ( Ext.Panel p )
当Panel被设置为视觉活动状态之后触发。 注意Panel不直接支持活动状体，但是Panel的一些子类...
当Panel被设置为视觉活动状态之后触发。 注意Panel不直接支持活动状体，但是Panel的一些子类 (例如 Ext.Window)支持。 作为TabPanel子组件的Panel，在TabPanel的控制之下触发activate和deactivate事件。
监听器将会以如下参数格式被调用:
  • p : Ext.Panel
    被激活的Panel.
Panel
add : ( Ext.Container this , Ext.Component component , Number index )
监听器将会被使用如下的参数被调用:
  • this : Ext.Container
  • component : Ext.Component
    被添加的组件
  • index : Number
    将组件添加到容器子组件集合时的位置索引
Container
added : ( Ext.Component this , Ext.Container ownerCt , number index )
当一个组件被添加到一个Ext.Container时触发
当一个组件被添加到一个Ext.Container时触发
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • ownerCt : Ext.Container
    用于组件的容器
  • index : number
    添加组件的位置
Component
afterlayout : ( Ext.Container this , ContainerLayout layout )
当容器中的组件被指定的布局管理器排列的时候触发。
当容器中的组件被指定的布局管理器排列的时候触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Container
  • layout : ContainerLayout
    为当前容器提供的ContainerLayout实现
Container
afterrender : ( Ext.Component this )
在组件渲染完成之后触发...

在组件渲染完成之后触发。

afterrender事件在当前组件被rendered 结束之后、在为组件定义的所有afterRender方法执行之后 触发，并且，如果有stateful， 也在状态被保存之后才触发。

监听器将会以如下参数格式被调用:
  • this : Ext.Component
Component
beforeadd : ( Ext.Container this , Ext.Component component , Number index )
在任何 Ext.Component 被添加或者插入到容器中之前触发。 事件处理器可以返回false取消添加操作。
在任何 Ext.Component 被添加或者插入到容器中之前触发。 事件处理器可以返回false取消添加操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Container
  • component : Ext.Component
    被添加的组件
  • index : Number
    组件被添加到容器子项目集合中时的索引位置
Container
beforeclose : ( Ext.Panel p )
在Panel被关闭之前触发。 注意，Panel不直接支持关闭操作，但是Panel的一些子类(例如...
在Panel被关闭之前触发。 注意，Panel不直接支持关闭操作，但是Panel的一些子类(例如 Ext.Window) ，或者一个位于Ext.TabPanel中的Panel支持。 此事件仅被应用到这些子类中。处理函数可以返回false以取消关闭操作。
监听器将会以如下参数格式被调用:
  • p : Ext.Panel
    正在被关闭的Panel.
Panel
beforecollapse : ( Ext.Panel p , Boolean animate )
在Panel被折叠之前触发。监听器可以返回false取消折叠。
在Panel被折叠之前触发。监听器可以返回false取消折叠。
监听器将会以如下参数格式被调用:
  • p : Ext.Panel
    被折叠的Panel
  • animate : Boolean
    如果折叠操作使用了动画效果，此参数为true，其它为false
Panel
beforedestroy : ( Ext.Component this )
在组件 destroyed 之前触发。 在事件监听器中返回false以停止 destroy 操作。
在组件 destroyed 之前触发。 在事件监听器中返回false以停止 destroy 操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforeexpand : ( Ext.Panel p , Boolean animate )
在Panel被展开之前触发。监听器可以返回false取消展开操作。
在Panel被展开之前触发。监听器可以返回false取消展开操作。
监听器将会以如下参数格式被调用:
  • p : Ext.Panel
    被展开的Panel
  • animate : Boolean
    如果展开操作使用动画效果，为true，其它为false
Panel
beforehide : ( Ext.Component this )
在调用hide方法隐藏组件之前触发。 在事件监听器中返回false可以停止隐藏操作。
在调用hide方法隐藏组件之前触发。 在事件监听器中返回false可以停止隐藏操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforeremove : ( Ext.Container this , Ext.Component component )
从容器中删除任何Ext.Component 之前触发。 处理器可以返回false取消remove操作。
从容器中删除任何Ext.Component 之前触发。 处理器可以返回false取消remove操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Container
  • component : Ext.Component
    被删除的组件
Container
beforerender : ( Ext.Component this )
在组件被rendered 之前触发。 在事件监听器中返回false可以停止render 操作。
在组件被rendered 之前触发。 在事件监听器中返回false可以停止render 操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforeshow : ( Ext.Component this )
在调用show()方法现实组件之前触发。 事件处理函数返回false可以停止show。
在调用show 方法现实组件之前触发。 事件处理函数返回false可以停止show。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforestaterestore : ( Ext.Component this , Object state )
在组件状态恢复之前触发。返回false停止恢复状态操作。
在组件状态恢复之前触发。返回false停止恢复状态操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    StateProvider返回的状态哈希值。 如果没有禁止此事件，那么状态对象会被传递给applyState。 默认情况下，这样简单地把属性值拷贝到当前组件中。 可以覆盖此方法以提供自定的状态恢复操作。
Component
beforestatesave : ( Ext.Component this , Object state )
在组件状态被保存到配置的状态提供者之前触发。 返回false可以停止保存。
在组件状态被保存到配置的状态提供者之前触发。 返回false可以停止保存。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    状态值哈希。 这由在组件上调用getState() 方法决定。 此方法必须由开发者提供，返回是否需要对状态进行描述，默认情况下， Ext.Component有一个空实现。
Component
bodyresize : ( Ext.Panel p , Number width , Number height )
在Panel被调整尺寸之后触发。
在Panel被调整尺寸之后触发。
监听器将会以如下参数格式被调用:
  • p : Ext.Panel
    被调整尺寸的Panel
  • width : Number
    Panel body的新宽度。
  • height : Number
    Panel body的新高度。
Panel
close : ( Ext.Panel p )
在Panel被关闭之后触发。注意，Panel不直接提供关闭操作， 但是Panel的一些子类(例如...
在Panel被关闭之后触发。注意，Panel不直接提供关闭操作， 但是Panel的一些子类(例如 Ext.Window) ，或者处于Ext.TabPanel中的Panel支持。
监听器将会以如下参数格式被调用:
  • p : Ext.Panel
    被关闭的Panel.
Panel
collapse : ( Ext.Panel p )
在Panel被折叠后触发。
在Panel被折叠后触发。
监听器将会以如下参数格式被调用:
  • p : Ext.Panel
    被折叠的Panel
Panel
deactivate : ( Ext.Panel p )
在Panel被视觉上失去活动状态之后触发。 注意，Panel不直接支持此操作，但是Panel的一些子类...
在Panel被视觉上失去活动状态之后触发。 注意，Panel不直接支持此操作，但是Panel的一些子类 (例如Ext.Window)支持。 作为TabPanel的子组件的Panel将会在TabPanel的控制之下触发activate 和deactivate事件。
监听器将会以如下参数格式被调用:
  • p : Ext.Panel
    失去活动状态的Panel
Panel
destroy : ( Ext.Component this )
在组件被销毁之后触发。
在组件被destroyed之后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
disable : ( Ext.Component this )
在组件被设置为无效状态后触发。
在组件被设置为无效状态后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
enable : ( Ext.Component this )
当组件被设置为有效(enabled)之后触发。
当组件被设置为有效(enabled)之后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
expand : ( Ext.Panel p )
当Panel已经展开之后触发。
当Panel已经展开之后触发。
监听器将会以如下参数格式被调用:
  • p : Ext.Panel
    已经被展开的Panel.
Panel
hide : ( Ext.Component this )
在组件被隐藏之后触发。 当调用hide 方法隐藏组件之后触发。
在组件被隐藏之后触发。 当调用hide 方法隐藏组件之后触发。
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
iconchange : ( Ext.Panel p , String The , String The )
当Panel的图标被set或者 changed 之后触发。
当Panel的图标被set或者 changed 之后触发。
监听器将会以如下参数格式被调用:
  • p : Ext.Panel
    icon class被变化的Panel
  • The : String
    新icon类
  • The : String
    旧icon类
Panel
move : ( Ext.Component this , Number x , Number y )
在组件移动之后触发。
在组件移动之后触发。
监听器将会用如下的参数格式来调用:
  • this : Ext.Component
  • x : Number
    The new x position
  • y : Number
    The new y position
BoxComponent
remove : ( Ext.Container this , Ext.Component component )
监听器将会以如下的参数格式被调用:
  • this : Ext.Container
  • component : Ext.Component
    被删除的组件
Container
removed : ( Ext.Component this , Ext.Container ownerCt )
当一个组件被从Ext.Container容器中删除时触发
当一个组件被从Ext.Container容器中删除时触发
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • ownerCt : Ext.Container
    持有组件的容器
Component
render : ( Ext.Component this )
在组件被渲染之后触发。
在组件被 rendered(渲染) 之后触发。
监听器将以如下的参数格式被调用:
  • this : Ext.Component
Component
resize : ( Ext.Component this , Number adjWidth , Number adjHeight , Number rawWidth , Number rawHeight )
在组件被调整大小之后触发。
在组件被调整大小之后触发。
监听器将以如下的参数格式被调用:
  • this : Ext.Component
  • adjWidth : Number
    这是width调整后的值
  • adjHeight : Number
    这是height调整后的值
  • rawWidth : Number
    这是width原来的值
  • rawHeight : Number
    这是height原来的值
BoxComponent
show : ( Ext.Component this )
在调用show 方法显示组件之后触发。
在调用show 方法显示组件之后触发。
监听器将会用如下的参数格式被调用:
  • this : Ext.Component
Component
staterestore : ( Ext.Component this , Object state )
组件状态被存储之后触发。
组件状态被存储之后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    StateProvider返回的状态哈希值。 如果没有禁止此事件，那么状态对象会被传递给applyState。 默认情况下，这样简单地把属性值拷贝到当前组件中。 可以覆盖此方法以提供自定的状态恢复操作。
Component
statesave : ( Ext.Component this , Object state )
在组件状态被保存到所配置的状态提供者之后触发。
在组件状态被保存到所配置的状态提供者之后触发。
监听器将会用如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    状态值hash。 这是由在足见上调用getState() 方法决定的。 开发者必须提供此方法以返回是否需要恢复状态，默认情况下， Ext.Component有一个空实现。
Component
titlechange : ( Ext.Panel p , String The )
在Panel的标题被set或者 changed 之后触发。
在Panel的标题被set或者 changed 之后触发。
监听器将会以如下参数格式被调用:
  • p : Ext.Panel
    标题被改变的Panel.
  • The : String
    新的标题。
Panel


Observable
    Component
      BoxComponent
        ProgressBar

Class Ext.ProgressBar

包: | Ext
定义类的文件: | ProgressBar.js
类: | ProgressBar
继承自: | BoxComponent

一个可以刷新的进展条组件。 进展条支持两种不同的模式:手动和自动。

在手动模式下，在必要时，你自己负责在代码中显示、刷新(通过 updateProgress) 并且清理进展条。 这种方式最适用的情况是，你想要在一个操作中始终显示进度，此操作具有 可预知的关键点，在这些点你可以刷新进展条。

在自动模式下，你简单地调用wait 方法，然后让进展条无线滚动，仅仅在操作结束时清除它。 你可以选择让进展条等待指定的时间然后清除自己。 自动模式最适用的情况是耗时较长的异步操作，在此操作中你不需要显示中间进展。

配置项

Config Options Defined By
allowDomMove : Boolean
在渲染时组件是否可以移动Dom节点(默认为true)。
Component
anchor : String
注: 这个配置只用于该组件被包含在一个已使用AnchorLayout...

注: 这个配置只用于该组件被包含在一个已使用 AnchorLayout (或者其子类)配置的Container时。 基于布局管理器，例如：

  • Ext.form.FormPanel
  • 指定 layout: 'anchor' // or 'form', or 'absolute'

参见 Ext.layout.AnchorLayout. anchor 。

BoxComponent
animate : Boolean
True将会在变换的时候对进展条使用动画效果(默认为 false)
ProgressBar
applyTo : Mixed
指定一个元素的id、一个DOM元素或者一个已经存在并被渲染到DIV中的元素，此DIV已经被...

指定一个元素的id、一个DOM元素或者一个已经存在并被渲染到DIV中的元素，此DIV已经被 渲染到document中，并且为当前组件指定了一些结构化的标签。

  • 描述 :
      当使用了 applyTo， 在主元素中也可以用id或者CSS类名来指定组件的托管部分， 并且，如果可以的话，创建的组件可能也会试图在那个标签中创建它的子组件。
  • 注意 :
      当使用此配置项时，无需调用render()方法。
      如果指定了applyTo属性，任何传递给 renderTo 的值都会被忽略，并且目标元素的父节点将会自动被用作组件的容器。
Component
autoEl : Mixed
一个表签名或者一个 DomHelper 描述，用来创建 Element ，它将封装当前组件...

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

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

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

{
    xtype: 'box',
    autoEl: {
        tag: 'img',
        src: 'http://www.example.com/example.jpg'

    }
}, {
    xtype: 'box',
    autoEl: {
        tag: 'blockquote',
        html: 'autoEl is cool!'
    }
}, {
    xtype: 'container',
    autoEl: 'ul',
    cls: 'ux-unordered-list',
    items: {
        xtype: 'box',
        autoEl: 'li',
        html: 'First list item'
    }
}
Component
autoHeight : Boolean
如果值为true，height配置项为'auto'，否则值为false的话使用固定的高度...

如果值为true，height配置项为'auto'，否则值为false的话使用固定的高度， 或者可以由其父类容器 layout manager来控制。(默认值为 false)。

注: 虽然很多组件继承了这个配置选项，但不是所有这些组件的自适应高度配置都会像期望的那样起作用。 设置autoHeight：值为true时，浏览器将根据元素的内容自动设置高度，这将意味着Ext不会去管理高度。

如果是由浏览器来管理高度，需要注意的是，通过浏览器进行调整的结构组件内不能被发现， 因此宽度的变化可能导致需要进行同步处理元素的高度。 例如：

var w = new Ext.Window({
    title: 'Window',
    width: 600,
    autoHeight: true,
    items: {
        title: 'Collapse Me',
        height: 400,
        collapsible: true,
        border: false,
        listeners: {
            beforecollapse: function() {
                w.el.shadow.hide();
            },
            beforeexpand: function() {
                w.el.shadow.hide();
            },
            collapse: function() {
                w.syncShadow();
            },
            expand: function() {
                w.syncShadow();
            }
        }
    }
}).show();
BoxComponent
autoScroll : Boolean
如果值为true，将会在该元素上使用overflow:'auto'配置，并且在必要的时候...
如果值为true，将会在该元素上使用overflow:'auto'配置，并且在必要的时候自动显示滚动条，否则，溢出部分的组件都会被切除(默认值为 false)。
BoxComponent
autoShow : Boolean
如果组件需要检测隐藏CSS属性(如 'x-hidden' 或者 'x-hide-display')并且在渲染时删除...
如果组件需要检测隐藏CSS属性(如 'x-hidden' 或者 'x-hide-display')并且在渲染时删除它们 (默认为false)，设置此值为true。
Component
autoWidth : Boolean
如果为true，使用width:'auto'配置，否则使用固定的宽度...

如果为true，使用width:'auto'配置，否则使用固定的宽度，或者可以由其父类容器的layout manager来控制。(默认值为 false)。

注: 虽然很多组件继承了这个配置选项，但不是所有这些组件的自适应宽度配置都会像期望的那样起作用。 设置autoWidth：值为true时，浏览器将根据元素的内容自动设置宽度，这将意味着Ext不会去管理宽度。

如果是由浏览器来管理宽度，需要注意的是，通过浏览器进行调整的结构组件内不能被发现，因此宽度的变化可能导致需要进行同步处理元素的宽度。 例如，在这个元素的目标是：

<div id='grid-container' style='margin-left:25%;width:50%'></div>
当浏览器窗口改变时，渲染后的Panel必须监听浏览器窗口大小的变化，以便通知子项，浏览器改变了其宽度：

var myPanel = new Ext.Panel({
    renderTo: 'grid-container',
    monitorResize: true, // relay on browser resize
    title: 'Panel',
    height: 400,
    autoWidth: true,
    layout: 'hbox',
    layoutConfig: {
        align: 'stretch'
    },
    defaults: {
        flex: 1
    },
    items: [{
        title: 'Box 1',
    }, {
        title: 'Box 2'
    }, {
        title: 'Box 3'
    }],
});
BoxComponent
baseCls : String
应用到进展条包装元素上的基本CSS类(默认为'x-progress')
ProgressBar
boxMaxHeight : Number
设置组件的最大高度值...

设置组件的最大高度值。

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

BoxComponent
boxMaxWidth : Number
设置组件的最大宽度值...

设置组件的最大宽度值。

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

BoxComponent
boxMinHeight : Number
设置组件的最小高度值...

设置组件的最小高度值。

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

BoxComponent
boxMinWidth : Number
设置组件的最小宽度值...

设置组件的最小宽度值。

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

BoxComponent
bubbleEvents : Array
一个事件数组，当这些事件被触发时，将会被冒泡到所有父容器中。参见....

一个事件数组，当这些事件被触发时，将会被冒泡到所有父容器中。参见 Ext.util.Observable.enableBubble。 默认为 []。

Component
clearCls : String
应用到特殊的clearing div的CSS类， 这个clearing div直接渲染到每个form field的包装器后面...

应用到特殊的clearing div的CSS类， 这个clearing div直接渲染到每个form field的包装器后面，以提供 清除field的功能(默认为 'x-form-clear-left')。

注意: 只有在当前组件被渲染到一个使用FormLayout 布局(例如 Ext.form.FormPanel 或者指定 layout:'form')的 容器中、或者是指定了一个fieldLabel 、或者指定isFormField=true 时此配置才有效。

另请参见 Ext.layout.FormLayout. fieldTpl。

Component
cls : String
一个可选的额外CSS类，它将被添加到当前组件的元素上(默认为'')...
一个可选的额外CSS类，它将被添加到当前组件的元素上(默认为'')。 此属性对于在组件上，或者它的任何使用标准CSS规则的孩子节点上， 添加定制的样式非常有用。
Component
contentEl : String
(可选)指定一个已存在的HTML元素，或者一个已存在HTML元素的...

(可选)指定一个已存在的HTML元素，或者一个已存在HTML元素的 id ，它们将被用作当前组件的内容。

  • 描述 :
    此配置选项被用来将一个已存在的HTML元素 插入到一个新组件(在组件渲染之后它简单地移动DOM元素) 的layout元素中，使它成为该组件的内容。
  • 注意 :
    指定的HTML元素将被append到组件的layout元素中， 在所有配置的 HTML 被插入之后， 并且，这样的话，在render事件 被触发时，document中将不再包含此元素。
    指定的HTML元素将不会参与组件所有可能使用的 layout 过程(译者注：指这些HTML元素 不会参与布局操作)。 它仅是HTML而已。布局操作实在孩子 items 上进行的。
    添加 x-hidden 或者 x-hide-display CSS类，以防在内容渲染到panel时发生闪烁。
Component
ctCls : String
一个可选的外部CSS样式，添加到这个组件的容器(默认值为 '')。 这个方法对于使用标准的CSS规则...

一个可选的外部CSS样式，添加到这个组件的容器(默认值为 '')。 这个方法对于使用标准的CSS规则，为组件或它的任何一个子组件添加特定的样式非常有用。 参见 Ext.layout.ContainerLayout和 extraCls 。

注意: ctCls 默认为 ''期望如下的类，它们将指定一个默认值:

  • Box Layout : 'x-box-layout-ct'
使用一个额外的CSS类配置以上的Class，它是append到默认对象上的。例如， 对于BoxLayout (Hbox and Vbox):
                                ctCls: 'x-box-layout-ct custom-class'

Component
data : Mixed
初始化数据集，它将被应用到 tpl 上以刷新组件的内容区域。
Component
disabled : Boolean
当前组件处于无效状态时为true。 Read-only.
Component
disabledClass : String
当组件处于无效状态时添加到组件上的CSS类(默认为 'x-item-disabled')。
Component
fieldLabel : String
紧靠此field显示的标签文本(默认值为 '')。注意...

紧靠此field显示的标签文本(默认值为 '')。

注意:只有在当前组件被渲染到一个使用FormLayout 的容器中时，此配置才有效。 (例如 Ext.form.FormPanel 或 指定 layout:'form')。

另请参见 hideLabel 、 Ext.layout.FormLayout和 fieldTpl。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Name'
    }]
});
Component
flex : Number
注: 这个配置只用于该组件被包含在一个已使用BoxLayout配置的Container中时...

注: 这个配置只用于该组件被包含在一个已使用BoxLayout配置的Container中时。通过计算每一个子组件的flex值所占全部flex值之和的比例，来决定子组件的宽(HBoxLayout)高(VBoxlayout)。 任何子项的 flex = 0 或 flex = undefined 将不被设置(初始值大小将不被改变)。

BoxComponent
height : Number
组件的高度(默认值为 auto)。注:如果想使用百分比的方式...
组件的高度(默认值为 auto)。注:如果想使用百分比的方式来设置值，请查看 Ext.Component.anchor。
BoxComponent
hidden : Boolean
如果当前组件处于隐藏状态，此值为true。Read-only。
Component
hideLabel : Boolean
true时完全隐藏label元素 ( label 和 separator)。 默认为 false。 默认情况下，即使你不指定...

true时完全隐藏label元素 ( label 和 separator)。 默认为 false。 默认情况下，即使你不指定 fieldLabel 它的空间仍然会被保留，这样这块区域会与其它确实拥有label的区域位于同一排。 讲此值设置为 true 将导致此区域不再保留此空间。

注意: 参见 clearCls 的注释。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield'
        hideLabel: true
    }]
});
Component
hideMode : String
组件如何隐藏，支持的值有： 'visibility' (css visibility), 'offsets' (位置偏移量为负值) 和...

组件如何隐藏，支持的值有： 'visibility' (css visibility), 'offsets' (位置偏移量为负值) 和 'display' (css display).

注意:一般首选默认值 'display'，因为当组件第一次显示的时候它们会自动进行布局 (隐藏的时候不会调整尺寸)。

Component
hideParent : Boolean
此值为true时，当调用hide/show方法时，将会hide和show组件的容器...
此值为true时，当调用hide/show方法时，将会hide和show组件的容器；false时将会 hide和show组件自身(默认为false)。例如，这可以用作window上隐藏按钮的一种 快捷操作，通过设置此按钮的hideParent:true，然后把它添加到window上。
Component
html : String/Object
一个HTML片段，或者一个 DomHelper 描述，用作layout元素的内容(默认为'')。...
一个HTML片段，或者一个 DomHelper 描述，用作layout元素的内容(默认为'')。 这个HTML内容在组件渲染之后才被添加，所以在 render 出发的时候，document中尚未包含此HTML。 但是这个内容将会在所有配置的 contentEl 之前被插入到body标签中。
Component
id : String
进展条元素的id (默认为一个自动生成的id)
ProgressBar
itemCls : String
注意: 只有在当前组件被渲染到一个使用FormLayout 布局的 容器中时此配置才有效...

注意: 只有在当前组件被渲染到一个使用FormLayout 布局的 容器中时此配置才有效。 (例如Ext.form.FormPanel 或者指定 layout:'form')。

一个附加的CSS类，应用到div上，包装当前field的表单元素。 如果提供了此参数， field级上的itemCls将会覆盖 container级上提供的 默认itemCls。 为itemCls指定的值将会被添加默认的 类('x-form-item')。

既然它被应用到项目的包装器上(参见 Ext.layout.FormLayout。 fieldTpl)， 它将允许你编写能应用到此field、label(如果有指定)、或者field内部任何其它元素的标准CSS规则。

注意: 参考 fieldLabel的注释。 .

示例用法:

// Apply a style to the field's label:
<style>
    .required .x-form-item-label {font-weight:bold;color:red;}
</style>

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Name',
        itemCls: 'required' //this label will be styled
    },{
        xtype: 'textfield',
        fieldLabel: 'Favorite Color'
    }]
});
Component
itemId : String
当没有可利用的对象引用时，itemId可以作为第二选择，用来获得一个组件的引用， 代替 ...

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

var c = new Ext.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'); // 与 Ext.getCmp()不同

p2 = p1.ownerCt.getComponent('p2'); // 通过兄弟对象获得引用

另请参见 id 和 ref 。

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

Component
labelSeparator : String
每个fieldLabel 文本后面现实的分隔符。 此属性可以在多个层次上进行配置...

每个fieldLabel 文本后面现实的分隔符。 此属性可以在多个层次上进行配置。优先顺序为：

  • field / component level
  • container level
  • layout level (默认为冒号 ':')
如不需要为当前field的label显示分隔符，指定一个空字符串''即可。

注意:参见 clearCls 的注释。

另请参见 hideLabel 和 Ext.layout.FormLayout。 fieldTpl。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    layoutConfig: {
        labelSeparator: '~'   // layout config has lowest priority (defaults to ':')
    },
    labelSeparator: '>>',     // config at container level
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Field 1',
        labelSeparator: '...' // field/component level config supersedes others
    },{
        xtype: 'textfield',
        fieldLabel: 'Field 2' // labelSeparator will be '='

    }]
});
Component
labelStyle : String
一个CSS样式描述字符串，它将直接应用到当前field的label上...

一个CSS样式描述字符串，它将直接应用到当前field的label上。 如果有设置，默认为容器的labelStyle值(例如 Ext.layout.FormLayout.labelStyle , 或者 '')。

注意:参见 clearCls 的注释。

另请参见 hideLabel 和 Ext.layout.FormLayout. fieldTpl。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Name',
        labelStyle: 'font-weight:bold;'
    }]
});
Component
listeners : Object
一个包含一个或多个事件处理器的配置对象，会在初始化的时候被添加到目标对象上...

一个包含一个或多个事件处理器的配置对象，会在初始化的时候被添加到目标对象上。 该配置对象应该是一个有效的监听器配置对象就像 addListener例子中指定的一样可一次附加多个处理器。

ExtJs Components上的DOM事件

一些 ExtJs Component 类导出时会选择一些DOM事件(例如 "click", "mouseover" 等等), 这通常只是在有额外的值可以被添加时发生。例如DataView类的 click事件会传递被点击的节点。也可以直接在Component的HTMLElementevent上访问DOM事件，但必需在Component被渲染后监听器才能添加到Element 上。可以按照以下步骤添加插件:

// 插件会用一个监听器配置对象进行配置。
//该组件会被添加到所有处理方法的参数列表上。
Ext.DomObserver = Ext.extend(Object, {
    constructor: function(config) {
        this.listeners = config.listeners ? config.listeners : config;
    },

    // 组件将自己传递进了插件的初始化方法里
    init: function(c) {
        var p, l = this.listeners;
        for (p in l) {
            if (Ext.isFunction(l[p])) {
                l[p] = this.createHandler(l[p], c);
            } else {
                l[p].fn = this.createHandler(l[p].fn, c);
            }
        }

        // 渲染后立即添加监听器到元素上
        c.render = c.render.createSequence(function() {
            var e = c.getEl();
            if (e) {
                e.on(l);
            }
        });
    },

    createHandler: function(fn, c) {
        return function(e) {
            fn.call(this, e, c);
        };
    }
});

var combo = new Ext.form.ComboBox({

    // 元素被点击后折叠
    plugins: [ new Ext.DomObserver({
        click: function(evt, comp) {
            comp.collapse();
        }
    })],
    store: myStore,
    typeAhead: true,
    mode: 'local',
    triggerAction: 'all'
});

Observable
margins : Object
注:此配置只用于该组件展现在一个使用BorderLayout...

注:此配置只用于该组件展现在一个使用BorderLayout 或 BoxLayout的两个子类之一作为布局的容器。

这个margins对象在该组件中的格式为：

{top: (top margin),right: (right margin),bottom: (bottom margin),left: (left margin)}

也可以是一个字符串，中间用空格分隔，margin值为数字。 把matches中每一个值的次序跟CSS中margin值的排列方式相对应：

  • 如果只有一个值，它适用于所有方面。
  • 如果有两个值，top和bottom的边框设置为第一个值，left和right设置为第二个值。
  • 如果有三个值，top设置为第一个值，left和right设置为第二个值，bottom设置为第三个值。
  • 如果有四个值，分别设置为top, right, bottom, left。

默认值:

{top:0, right:0, bottom:0, left:0}
BoxComponent
overCls : String
一个可选的额外的CSS类，它将在鼠标移过元素时被添加到组件上...
一个可选的额外的CSS类，它将在鼠标移过元素时被添加到组件上，鼠标移出时 删除。(默认为'')。此属性对于在组件上，或者它的任何使用标准CSS规则的孩子节点上， 添加定制的'active' 或者 'hover'样式非常有用。
Component
pageX : Number
如果该组件被包含在一个指定位置的容器中，这个值表示页面级的x坐标值（译者注：在有滚动条的情况下这个值很有用）。
BoxComponent
pageY : Number
如果该组件被包含在一个指定位置的容器中，这个值表示页面级的y坐标值（译者注：在有滚动条的情况下这个值很有用）。
BoxComponent
plugins : Object/Array
一个对象或者一个对象数组，为组件提供特殊的功能 ...
一个对象或者一个对象数组，为组件提供特殊的功能。 对一个合法的插件唯一的要求是它含有一个init()方法， 能接收一个Ext.Component型的参数。 当组件被创建时，如果有可用的插件，组件将会调用每个插件的init方法， 并将自身的引用作为方法参数传递给它。然后，每个插件就可以调用方法或者响应组件上的事件， 就像需要的那样提供自己的功能。
Component
ptype : String
需要创建配置的ptype。 当传递一个配置对象给构造函数时...
需要创建配置的ptype。 当传递一个配置对象给构造函数时，此配置选项不会被使用。 只有在使用懒初始化的时候此配置项才会被使用， 此时Plugin不是 通过一个完整的实例组件，而是通过一个Component配置指定的。 在渲染时，将会查找ptype以决定创建何种类型的Plugin。

如果你创建自己的Plugin，你可以通过 Ext.ComponentMgr.registerPlugin 对它们进行注册，以便能利用懒初始化和渲染机制。
Component
ref : String
一个路径描述，与组件的 ownerCt 相关，它描述了把当前组件的命名引用放置到哪个父容器中去。...

一个路径描述，与组件的 ownerCt 相关，它描述了把当前组件的命名引用放置到哪个父容器中去。

祖先的坐标路径可以通过'/'字符进行分隔。 例如，将一个Toolbar Button的引用放入 拥有此Toolbar的Panel中:

var myGrid = new Ext.grid.EditorGridPanel({
    title: 'My EditorGridPanel',
    store: myStore,
    colModel: myColModel,
    tbar: [{
        text: 'Save',
        handler: saveChanges,
        disabled: true,
        ref: '../saveButton'
    }],
    listeners: {
        afteredit: function() {
//          The button reference is in the GridPanel
            myGrid.saveButton.enable();
        }
    }
});

在上面的代码中，如果 ref 是 'saveButton' ，那么引用将会被放置到Toolbar中。 ref 中的每个'/' 都会从组件的 ownerCt 向上移动一级。

另请参见 added 和 removed 事件。

Component
region : String
注: 此配置只用于该组件展现在一个布局为BorderLayout的容器中...

注: 此配置只用于该组件展现在一个布局为BorderLayout的容器中(例如指定layout:'border')。

详见Ext.layout.BorderLayout。

BoxComponent
renderTo : Mixed
该值可以是一个节点的id、一个DOM节点或者一个已存在的元素...

该值可以是一个节点的id、一个DOM节点或者一个已存在的元素， 组件将会被渲染到其中。

  • 注意 :
      如果组件不是一个Container 的子项目时， 不要使用此选项。 渲染和管理它的子项目是一个Container 的layout manager的责任。
      当使用此配置项时，无需调用render()方法。

另请参见 render 。

Component
stateEvents : Array
一个事件数组，当它们被触发时，组件需要保存自己的状态(默认值为 none)...

一个事件数组，当它们被触发时，组件需要保存自己的状态(默认值为 none)。 它们可以是任何该组件支持的事件类型，包括浏览器事件和 自定义事件(例如['click', 'customerchange'])。

对于保存和恢复组件状态的详细解释，参见 stateful

Component
stateId : String
为该组件指定的唯一的id值，它被用作管理组件状态的目的...
为该组件指定的唯一的id值，它被用作管理组件状态的目的。 (如果设定了id，默认值为组件自己的id，否则，如果组件使用自动生成的id，此值为null)。

对于保存和反解析组件状态的解释，参见 stateful 。

Component
stateful : Boolean
一个标志参数，它将引起组件在启动时尝试从一个保存的状态中恢复内部状态参数...

一个标志参数，它将引起组件在启动时尝试从一个保存的状态中恢复内部状态参数。 组件必须要么拥有一个 stateId 或者 id ，它们被分配给需要被管理的状态属性。 在跨页面加载时，不保证自动生成的id属性的稳定性， 并且，不能依赖此id来保存和恢复一个组件的相同状态。

为了保存状态的操作能够工作，状态管理器的提供者必须 被设置成一个Ext.state.Provider 的实现类，它覆盖了set 和get 方法，以便保存和恢复name/value对。 有一个内置的Ext.state.CookieProvider 可用。

为当前页面设置状态提供者:

Ext.state.Manager.setProvider(new Ext.state.CookieProvider({
    expires: new Date(new Date().getTime()+(1000*60*60*24*7)), //7 days from now
}));

当 stateEvents 配置项中其中之一的事件被触发时， 一个状态可保存的组件将试图保存其状态。

保存状态时，一个可保存状态的组件首先需要通过调用 getState 方法来序列化它的状态。 默认情况下，此函数什么事都不做。 开发者必须提供一个实现，返回一个hash对象，它描述了组件可恢复的状态。

getState方法产生的值将会传递给 Ext.state.Manager.set 方法，它使用配置的 Ext.state.Provider 来保存对象，以组件的 stateId 为key，或者，如果此值（指stateId）没有指定时， 使用它的 id 作为key。

在进行构造时，一个可保存状态的组件试图通过调用 Ext.state.Manager.get方法来 恢复它的状态，传递 stateId 或者，如果此值（指stateId）没有指定时， 使用它的 id 作为参数。

结果对象被传递给 applyState 。 applyState 的默认实现只是简单地把属性拷贝到对象中， 但是开发者可以覆盖此方法以支持更多行为。

通过向 beforestaterestore, staterestore, beforestatesave 和 statesave 事件上绑定监听器，你可以在保存和恢复状态时进行额外的处理。

Component
style : String
被添加到组件元素的特定样式。 必须是按照...
被添加到组件元素的特定样式。 必须是按照 Ext.Element.applyStyles 类指定格式的合法参数值。

new Ext.Panel({
    title: 'Some Title',
    renderTo: Ext.getBody(),
    width: 400, height: 300,
    layout: 'form',
    items: [{
        xtype: 'textarea',
        style: {
            width: '95%',
            marginBottom: '10px'
        }
    },
        new Ext.Button({
            text: 'Send',
            minWidth: '100',
            style: {
                marginBottom: '10px'
            }
        })
    ]
});
Component
tabTip : String
注: 这个配置只用于当该组件作为TabPanel的一个子项目时使用...

注: 这个配置只用于当该组件作为TabPanel的一个子项目时使用。

一个String类型的innerHTML(支持html标签)，当鼠标放在该选项上的时，显示一个tooltip。为了tips能够被渲染，Ext.QuickTips.init()必须被提前调用。
BoxComponent
text : String
进展条文本(默认为'')
ProgressBar
textEl : Mixed
用来渲染进展条文本的元素(默认为进展条内部的文本元素)
ProgressBar
tpl : Mixed
一个 Ext.Template , Ext.XTemplate 或者一个用来形成一个Ext.XTemplate的字符串数组...
一个 Ext.Template , Ext.XTemplate 或者一个用来形成一个Ext.XTemplate的字符串数组。 与 data 和 tplWriteMode 配置项协同使用。
Component
tplWriteMode : String
刷新组件的内容区域时使用的Ext.(X)Template方式。 默认为'overwrite' (参见 Ext.XTemplate.overwrite )。
刷新组件的内容区域时使用的Ext.(X)Template方式。 默认为'overwrite' (参见 Ext.XTemplate.overwrite )。
Component
value : Float
一个处于0到1之间的浮点值(例如.5，默认为0)
ProgressBar
width : Number
组件的宽度(默认值为 auto)。注:如果想使用百分比的方式...
组件的宽度(默认值为 auto)。注:如果想使用百分比的方式来设置值，请查看 Ext.Component.anchor。
BoxComponent
x : Number
如果被包含在一个指定位置的容器中，这个值表示x(left)坐标值。
BoxComponent
xtype : String
需要创建配置的xtype。 当传递一个配置对象给构造函数时...
需要创建配置的xtype。 当传递一个配置对象给构造函数时，此配置选项不会被使用。 只有在使用懒初始化的时候此配置项才会被使用，此时容器的子项目不是 通过一个完整的实例组件，而是通过一个Component配置指定的。 在渲染时，将会查找xtype以决定创建何种类型的子组件。

预定义的xtype列表如下： here。

如果你继承Component创建你自己的组件，你需要使用Ext.ComponentMgr.registerType 对它们进行注册，以便利用懒初始化和渲染机制。
Component
y : Number
如果被包含在一个指定位置的容器中，这个值表示y(top)坐标值。
BoxComponent

公共属性

Property Defined By
disabled : Boolean
当前组件处于无效状态时为true。 Read-only.
Component
el : Ext.Element
封装了当前组件的Ext.Element。 Read-only。通常情况下，这将是一个<DIV>元素，它由此类的...

封装了当前组件的Ext.Element。 Read-only。

通常情况下，这将是一个<DIV>元素，它由此类的 onRender方法创建，但是它可以通过使用 autoEl 配置项进行覆盖。

注意: 直到组件渲染完成此元素都将处于无效状态。

如需向当前组件的 DOM事件(而不是当前组件自己的Observable事件)添加监听器， 更多建议，参见 listeners 配置项，或者直接使用一个render监听器:

new Ext.Panel({
    title: 'The Clickable Panel',
    listeners: {
        render: function(p) {
            // Append the Panel to the click handler's argument list.
            p.getEl().on('click', handlePanelClick.createDelegate(null, [p], true));
        },
        single: true  // Remove the listener after first invocation
    }
});

另请参见 getEl

Component
hidden : Boolean
如果当前组件处于隐藏状态，此值为true。Read-only。
Component
initialConfig : Object
当前组件的初始化配置描述。 Read-only。
Component
ownerCt : Ext.Container
组件所属的Container (默认为undefined，当前组件被添加到一个容器中时此值被自动设置)...
组件所属的Container (默认为undefined，当前组件被添加到一个容器中时此值被自动设置)。 Read-only。

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

Component
refOwner : Ext.Container
如果当前组件是一个容器的孩子，并且是通过一个 ref 配置项被注册的，则此值为 ref 引用被插入到的祖先容器。
如果当前组件是一个容器的孩子，并且是通过一个 ref 配置项被注册的，则此值为 ref 引用被插入到的祖先容器。
Component
rendered : Boolean
如果当前组件已经被渲染了，此值为true。Read-only.
Component

公共方法

Method Defined By
addClass ( string cls ) : Ext.Component
为组件底层的元素添加CSS样式。
为组件底层的元素添加CSS样式。
参数:
  • cls : string
    需要添加的CSS样式的class名称
返回值:
  • Ext.Component
    this
Component
addEvents( Object|String o, string Optional. ) : void
添加指定的事件到事件列表上，事件会被该Observable触发。
添加指定的事件到事件列表上，事件会被该Observable触发。
参数:
  • o : Object|String
    以事件名作为属性true作为值的对象 或者当多个事件名被分开的传递时则为第一个事件名。
  • Optional. : string
    事件名被分开的传递时则为事件名。 用法:
    this.addEvents('storeloaded', 'storecleared');
返回值:
  • void
Observable
addListener( String eventName, Function handler, [Object scope], [Object options] ) : void
给对象添加事件处理器。
给对象添加事件处理器。
参数:
  • eventName : String
    监听的事件名。
  • handler : Function
    事件调用的方法
  • scope : Object
    （可选）处理方法执行的作用域 (this的引用 reference)。 如果被忽略。默认为触发事件的对象。
  • options : Object
    （可选）包含处理器配置和属性的对象。 可能包含以下的属性:
    • scope : Object
      处理方法执行的作用域(this的引用) 。 如果被忽略。默认为触发事件的对象。
    • delay : Number
      在触发事件后延迟调用处理器的毫秒数。
    • single : Boolean
      如果为True则添加一个处理器来处理下一次的事件触发（仅一次），然后移除自己。
    • buffer : Number
      使得处理器延迟指定毫秒数后预定的运行在 一个Ext.util.DelayedTask中 。 如果事件在时间内再一次被触发，原始的处理器不会被调用，但是新的处理器会预定的在他的位置上。
    • target : Observable
      如果事件在目标的Observable上触发则仅仅调用处理器， 否则 事件会从子类的Observable上冒泡

    组合选项
    使用这些选项参数,可能会组合出不同类型的监听器：

    一个延迟的，一次性的监听器。

    myDataView.on('click', this.onClick, this, {
single: true,
delay: 100
});

    一次调用附加多个处理器
    该方法同样支持传递一个包含指定的多个处理器的属性的配置对象参数。

    myGridPanel.on({
'click' : {
    fn: this.onClick,
    scope: this,
    delay: 100
},
'mouseover' : {
    fn: this.onMouseOver,
    scope: this
},
'mouseout' : {
    fn: this.onMouseOut,
    scope: this
}
});

    或者一个简写的语法：

    myGridPanel.on({
'click' : this.onClick,
'mouseover' : this.onMouseOver,
'mouseout' : this.onMouseOut,
 scope: this
});
返回值:
  • void
Observable
applyToMarkup ( String/HTMLElement el ) : void
将此组件添加到已存在的有效的HTML标签中。 使用该方法时，无需再调用render()方法。
将此组件添加到已存在的有效的HTML标签中。 使用该方法时，无需再调用render()方法。
参数:
  • el : String/HTMLElement
返回值:
  • void
Component
cloneConfig ( Object overrides ) : Ext.Component
默认使用原先传递给当前实例的配置值克隆当前组件。
默认使用原先传递给当前实例的配置值克隆当前组件。
参数:
  • overrides : Object
    一个新的配置项，包含需要覆盖到克隆版本的所有属性。 可以传递一个id参数给此对象，否则将自动生成一个新的id以避免发生重复。
返回值:
  • Ext.Component
    当前组件的克隆副本
Component
destroy () : void
通过如下方法销毁对象：删除所有的事件监听器、将组件的元素从DOM树中删除...
通过如下方法销毁对象：删除所有的事件监听器、将组件的元素从DOM树中删除（如果可以）、 将组件从它的 Ext.Container（如果可用）中删除、 并且将它从Ext.ComponentMgr中 注销。 销毁操作一般由框架自动完成，一般情况下不需要直接调用该方法。
参数:
  • 无。
返回值:
  • void
Component
disable () : Ext.Component
将组件置为无效状态，并出发'disable'事件。
将组件置为无效状态，并出发'disable'事件。
参数:
  • 无。
返回值:
  • Ext.Component
    this
Component
enable () : Ext.Component
将组件置为有效状态并触发'enable'事件。
将组件置为有效状态并触发'enable'事件。
参数:
  • 无。
返回值:
  • Ext.Component
    this
Component
enableBubble( String/Array events ) :void
是否现在使得事件会被该Observable触发并调用 this.getBubbleTarget()方法在拥有者的继承树...

是否现在使得事件会被该Observable触发并调用 this.getBubbleTarget()方法在拥有者的继承树中冒泡。Observable的基础类中没有该方法的实现。

该方法一般被Ext.Components用来冒泡事件到拥有者的容器。参看Ext.Component.getBubbleTarget默认的实现 在Ext.Component中返回组件的直接拥有者。但是如果需要的是一个已知的目标，该方法可以被重写来更快的访问需求的目标。

例子:

Ext.override(Ext.form.Field, {
    // 添加方法到Field的initComponent上改变事件为冒泡
    initComponent : Ext.form.Field.prototype.initComponent.createSequence(function() {
        this.enableBubble('change');
    }),

    // 我们知道我们想让Field的事件冒泡到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() {
            // 如果样式被修改标题会变红。
            myForm.header.setStyle('color', 'red');
        }
    }
});
参数:
  • events : String/Array
    冒泡的事件名，或事件名数组
返回值:
  • void
Observable
findParentBy ( Function fn ) : Ext.Container
通过自定义的函数查找当前组件上层任何层次上的容器...
通过自定义的函数查找当前组件上层任何层次上的容器。 如果传递的函数返回true，容器对象将被返回。
参数:
  • fn : Function
    自定义的函数，使用如下参数调用(container,this component)。
返回值:
  • Ext.Container
    自定义函数返回true的第一个容器
Component
findParentByType ( String/Class xtype ) : Ext.Container
通过xtype或者class查找当前组件上层任何层次上的容器
通过xtype或者class查找当前组件上层任何层次上的容器
参数:
  • xtype : String/Class
    组件的xtype字符串，或者直接是组件的class
返回值:
  • Ext.Container
    符合指定xtype或者class的第一个容器
Component
fireEvent( String eventName, Object... args ) : Boolean
用传入的参数触发指定的事件 (减去事件名)。 一个事件可以被设置为冒泡 Obse...

用传入的参数触发指定的事件 (减去事件名)。

一个事件可以被设置为冒泡到Observable父类继承树(参看 Ext.Component.getBubbleTarget) 调用enableBubble实现。

参数:
  • eventName : String
    触发的事件名。
  • args : Object...
    传递给处理器的可变长度参数。
返回值:
  • Boolean
    如果有任何的处理器返回false则返回false，否则返回true。
Observable
focus ( [ Boolean selectText ], [ Boolean/Number delay ] ) : Ext.Component
尝试将当前组件设为焦点。
尝试将当前组件设为焦点。
参数:
  • selectText : Boolean
    (可选) 如果可用，同时选中组件内部的文本
  • delay : Boolean/Number
    (可选)将当前组件设置为焦点的延迟时间(设置为true等于0毫秒)
返回值:
  • Ext.Component
    this
Component
getBox ( [ Boolean local ] ) : Object
获取组件底层元素当前盒子模型的尺寸。（译者注：盒子模型是CSS术语，详细解释请自行搜索。）
获取组件底层元素当前盒子模型的尺寸。（译者注：盒子模型是CSS术语，详细解释请自行搜索。）
参数:
  • local : Boolean
    (可选)值为true时，组件的left值和top值将代替页面的XY被返回。(默认值为false)
返回值:
  • Object
    返回值的格式{x, y, width, height}
BoxComponent
getBubbleTarget () : Ext.Container
为Observable的fireEvent方法提供链接，它沿着继承结构进行冒泡操作。
为Observable的fireEvent方法提供链接，它沿着继承结构进行冒泡操作。
参数:
  • 无。
返回值:
  • Ext.Container
    拥有当前组件的容器。
Component
getEl () : Ext.Element
返回 Ext.Element ，它包装了当前组件。...

返回 Ext.Element ，它包装了当前组件。

通常情况下，这将是一个<DIV>元素，它是由该类的onRender方法创建的， 但是可以使用autoEl配置项 覆盖它。

注意: 此元素将会一直处于无效状态直到当前组件渲染完成。

如需向当前组件的 DOM事件(而不是当前组件自己的Observable事件)添加监听器， 更多建议，参见 listeners 配置项，或者直接使用一个render监听器:

new Ext.Panel({
    title: 'The Clickable Panel',
    listeners: {
        render: function(p) {
            // Append the Panel to the click handler's argument list.
            p.getEl().on('click', handlePanelClick.createDelegate(null, [p], true));
        },
        single: true  // Remove the listener after first invocation
    }
});
参数:
  • 无。
返回值:
  • Ext.Element
    包装当前组件的元素。
Component
getHeight () : Number
获取该组件的当前高度值。
获取该组件的当前高度值。
参数:
  • 无。
返回值:
  • Number
BoxComponent
getId () : String
返回当前组件的id，如果没有定义id，则自动生成并返回一个id:'ext-comp-'...
返回当前组件的 id 如果没有定义 id 则自动生成并返回一个 id

'ext-comp-' + (++Ext.Component.AUTO_ID)
参数:
  • 无。
返回值:
  • String
    id
Component
getItemId () : String
返回当前组件的 itemId 。 如果没有通过配置参数指定 itemId 那么，将会使用...
返回当前组件的 itemId 。 如果没有通过配置参数指定 itemId 那么，将会使用 getId 返回 id 。
参数:
  • 无。
返回值:
  • String
Component
getOuterSize () : Object
获取当前组件所在元素的尺寸大小，包括边缘的空白处。
获取当前组件所在元素的尺寸大小，包括边缘的空白处。
参数:
  • 无。
返回值:
  • Object
    一个包含元素大小的对象 {width: (element width + left/right margins), height: (element height + top/bottom margins)}
BoxComponent
getPosition ( [ Boolean local ] ) : Array
获取组件底层元素当前的XY位置。
获取组件底层元素当前的XY位置。
参数:
  • local : Boolean
    (可选)如果为true，将返回元素的left和top值，而不是相对于页面内的 XY。(默认值为 false)
返回值:
  • Array
    元素的XY位置值(例如：[100, 200])
BoxComponent
getResizeEl () : Ext.Element
返回该组件的最外层用来定义这些组件整体大小的Element...

返回该组件的最外层用来定义这些组件整体大小的Element对象。

通常用 getEl 方法将会返回相同的Element对象，但在有些情况下，组件可能有一些更多的封装了它的主要动态Element对象的Element对象。

例如ComboBox。它是封装在一个包含<input>元素的包装元素里(这将返回其 getEl方法和触发按钮的元素)。返回的元素为resizeEl。

参数:
  • 无。
返回值:
  • Ext.Element
    The Element which is to be resized by size managing layouts.
BoxComponent
getSize () : Object
获取组件底层元素当前的大小。
获取组件底层元素当前的大小。
参数:
  • 无。
返回值:
  • Object
    一个包含元素大小的对象{width: (element width), height: (element height)}
BoxComponent
getWidth () : Number
获取该组件的当前宽度值。
获取该组件的当前宽度值。
参数:
  • 无。
返回值:
  • Number
BoxComponent
getXType () : String
获取当前组件的xtype，它是用 Ext.ComponentMgr 注册的。 所有可用的xtype列表，参见...
获取当前组件的xtype，它是用 Ext.ComponentMgr 注册的。 所有可用的xtype列表，参见 Ext.Component 类头部。示例用法:

var t = new Ext.form.TextField();
alert(t.getXType());  // alerts 'textfield'
参数:
  • 无。
返回值:
  • String
    The xtype
Component
getXTypes () : String
返回此组件的xtype继承树，用字符'-'分隔。 所有可用的xtype值...

返回此组件的xtype继承树，用字符'-'分隔。 所有可用的xtype值，请参见Ext.Component 类的头部。

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

示例用法:

var t = new Ext.form.TextField();
alert(t.getXTypes());  // alerts 'component/box/field/textfield'
参数:
  • 无。
返回值:
  • String
    xtype层次字符串
Component
hasListener( String eventName ) : Boolean
检测对象是否包含指定事件的任何监听器
检测对象是否包含指定事件的任何监听器
参数:
  • eventName : String
    检测的事件名
返回值:
  • Boolean
    如果事件被监听则为true，否则为false
Observable
hide () : Ext.Component
隐藏当前组件。 监听 beforehide' 事件并且返回false 可以取消隐藏组件的操作。 在隐藏组件之后触发...
隐藏当前组件。 监听 beforehide' 事件并且返回false 可以取消隐藏组件的操作。 在隐藏组件之后触发 ' hide' 事件。 如果组件被配置成 hidden 那么此方法在内部被调用。
参数:
  • 无。
返回值:
  • Ext.Component
    this
Component
isVisible () : Boolean
如果当前组件可见，返回true。
如果当前组件可见，返回true。
参数:
  • 无。
返回值:
  • Boolean
    如果当前组件可见，返回true，其它返回false。
Component
isWaiting () : Boolean
如果进展条当前处于wait操作中， 返回true
如果进展条当前处于wait操作中， 返回true
参数:
  • 无。
返回值:
  • Boolean
    如果正在等待，返回true，其它false
ProgressBar
isXType ( String xtype , [ Boolean shallow ] ) : Boolean
Tests whether or not this Component is of a specific xtype. This can test whether this Component is descended from th...

测试此组件是否是指定的xtype。此方法既可以测试是否是指定的xtype的某个子类， 或者它是否直接是指定的xtype类(shallow=true)。

如果使用你自己的子类，必须知道组件必须注册它的xtype值。

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

示例用法:

var t = new Ext.form.TextField();
var isText = t.isXType('textfield');        // true
var isBoxSubclass = t.isXType('box');       // true, descended from BoxComponent
var isBoxInstance = t.isXType('box', true); // false, not a direct BoxComponent instance
参数:
  • xtype : String
    需要为当前组件进行检测的xtype
  • shallow : Boolean
    (可选) 如果为false，检测组件是否是xtype继承树中的某个子类（默认是这种情况）， 如果为true，只检测组件是否是指定的xtype类型。
返回值:
  • Boolean
    如果当前组件是指定xtype的子类，返回true，其它返回flase。
Component
mon ( Observable|Element item , Object|String ename , Function fn , Object scope , Object opt ) : void
向任何Observable对象(或者元素)上添加监听器，监听器将会在组件...

向任何Observable对象(或者元素)上添加监听器，监听器将会在组件销毁时被自动删除。
用法：

myGridPanel.mon(myGridPanel.getSelectionModel(), 'selectionchange', handleSelectionChange, null, {buffer: 50});

or:

myGridPanel.mon(myGridPanel.getSelectionModel(), {
    selectionchange: handleSelectionChange,
    buffer: 50
});
参数:
  • item : Observable|Element
    需要添加listener/listeners的项目。
  • ename : Object|String
    事件名，或者一个包含事件名属性的对象。
  • fn : Function
    (可选) 如果 ename 参数是一个事件名，此参数为处理函数。
  • scope : Object
    (可选)如果 ename 参数是一个事件名称，此参数是作用域 ( this 引用)，监听函数将会在此作用域中被执行。
  • opt : Object
    (可选)如果 ename 参数是一个事件名称， 此参数是 addListener 配置项。
返回值:
  • void
Component
mun ( Observable|Element item , Object|String ename , Function fn , Object scope ) : void
删除通过mon 方法添加的监听器。
删除通过mon 方法添加的监听器。
参数:
  • item : Observable|Element
    需要删除listener/listeners的项目。
  • ename : Object|String
    事件名称，或者一个包含事件名称属性的对象。
  • fn : Function
    (可选)如果 ename 参数是一个事件名称，此参数是一个处理函数。
  • scope : Object
    (可选)如果 ename 参数是一个事件名称，此参数是作用域 ( this 引用)，监听函数将会在此作用域中被执行。
返回值:
  • void
Component
nextSibling () : Ext.Component
返回所属容器中的下一个组件
返回所属容器中的下一个组件
参数:
  • 无。
返回值:
  • Ext.Component
Component
on( String eventName, Function handler, [Object scope], [Object options] ) : void
给对象添加事件处理器 (addListener的简写形式)
给对象添加事件处理器 (addListener的简写形式。)
参数:
  • eventName : String
    监听的事件类型
  • handler : Function
    事件调用的方法
  • scope : Object
    （可选）处理方法执行时的作用域 (this 的引用)。 如果被忽略。默认为触发事件的对象。
  • options : Object
    可选 包含处理器配置的对象。
返回值:
  • void
Observable
previousSibling () : Ext.Component
返回所属容器中的前一个组件
返回所属容器中的前一个组件
参数:
  • 无。
返回值:
  • Ext.Component
Component
purgeListeners() : void
移除对象上所有的监听器
移除对象上所有的监听器
参数:
  • 无。
返回值:
  • void
Observable
relayEvents( Object o, Array events ) : void
从指定的Observable上传递选择的事件就好像被当前对象触发一样。
从指定的Observable上传递选择的事件就好像被当前对象触发一样。
参数:
  • o : Object
    该Observable上的事件被当前对象传递。
  • events : Array
    传递的数组名。
返回值:
  • void
Observable
removeClass ( string cls ) : Ext.Component
从组件底层的元素上删除一个CSS类。
从组件底层的元素上删除一个CSS类。
参数:
  • cls : string
    需要移除的CSS类名
返回值:
  • Ext.Component
    this
Component
removeListener( String eventName, Function handler, [Object scope] ) : void
删除一个事件处理器。
删除一个事件处理器。
参数:
  • eventName : String
    处理器关联的事件类型。
  • handler : Function
    移除的处理器。 这应该是传递到addListener里的方法的引用。
  • scope : Object
    （可选）处理器指定的初始作用域。
返回值:
  • void
Observable
render ( [ Element/HTMLElement/String container ], [ String/Number position ] ) : void
在传递进来的HTML元素中渲染当前组件。...

在传递进来的HTML元素中渲染当前组件。

如果你正在使用一个Container 对象放置当前组件，那么请不要使用render方法。

当容器第一次被渲染时，它的子组件将会被容器的 layout 管理器渲染。

某些布局管理器允许动态添加子组件。它们包括 Ext.layout.CardLayout, Ext.layout.AnchorLayout, Ext.layout.FormLayout, Ext.layout.TableLayout。

当一个新的子组件被添加时，如果容器已经被渲染了， 你可能需要调用容器的 doLayout 方法来刷新视图，它将导致所有没有被渲染的子组件进行渲染操作。 此操作是必须的，这样你可以添加多个子组件而只刷新一次layout。

当创建复杂的UI时，非常重要的一点是，请记住调整子项目的尺寸和位置是容器的 layout 管理器的职责。 如果你希望子项目的尺寸对用户交互作出反应， 你必须为容器配置一个布局管理器，它将创建和管理你心里想要的那种布局。

忽略容器的layout 配置意味着将会使用一个基本的布局管理器，它除了按次序把子组件 渲染到容器中之外什么事情都不做。 这种情况下，任何尺寸和位置的调整操作都不会发生。

参数:
  • container : Element/HTMLElement/String
    (可选) 需要在其中渲染当前组件的元素。 如果它是从一个已存在的标签中创建的，此参数应该被忽略。
  • position : String/Number
    (可选) 容器中的一个元素ID或者一个DOM节点索引， 当前组件将会被插入到它前面 (默认append到容器的尾部)
返回值:
  • void
Component
reset ( [ Boolean hide ] ) : Ext.ProgressBar
将进展条的值重置为0，文本重置为空字符串。 如果hide = true，进展条同时会变成隐藏状态...
将进展条的值重置为0，文本重置为空字符串。 如果hide = true，进展条同时会变成隐藏状态 (内部使用 hideMode 属性)
参数:
  • hide : Boolean
    (可选)True将会隐藏进展条(默认为false)
返回值:
  • Ext.ProgressBar
    this
ProgressBar
resumeEvents() : void
重新开始触发事件。(参见suspendEvents) 如果事件以queueSuspended参数被挂起，则在事件被挂起时 ...
重新开始触发事件。(参见 suspendEvents) 如果事件以queueSuspended 参数被挂起，则在事件被挂起时触发的事件会被传递到所有的监听器上
参数:
  • 无。
返回值:
  • void
Observable
setAutoScroll ( Boolean scroll ) : Ext.BoxComponent
设置该组件内容溢出时是否自动显示滚动条。
设置该组件内容溢出时是否自动显示滚动条。
参数:
  • scroll : Boolean
    值为true的话组件自动显示滚动条。
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setDisabled ( Boolean disabled ) : Ext.Component
工具函数，使用布尔值设置有效/无效(disabled/enabled )。
工具函数，使用布尔值设置有效/无效(disabled/enabled )。
参数:
  • disabled : Boolean
返回值:
  • Ext.Component
    this
Component
setHeight ( Mixed height ) : Ext.BoxComponent
设置此组件的高度。该方法将触发resize事件。
设置此组件的高度。该方法将触发resize事件。
参数:
  • height : Mixed
    The new height to set.
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setPagePosition ( Number x , Number y ) : Ext.BoxComponent
设置组件在页面中的XY位置。 如果需要设置left和top值 ，请使用...
设置组件在页面中的XY位置。 如果需要设置left和top值 ，请使用setPosition方法。 该方法触发move事件。
参数:
  • x : Number
    The new x position
  • y : Number
    The new y position
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setPosition ( Number left , Number top ) : Ext.BoxComponent
设置组件的left和top值。设置组件的页面XY值，请使用setPagePosition方法。该方法触发...
设置组件的left和top值。设置组件的页面XY值，请使用setPagePosition方法。该方法触发move事件。
参数:
  • left : Number
    The new left
  • top : Number
    The new top
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setSize ( Number width , Number height ) : Ext.ProgressBar
设置进展条的尺寸。
设置进展条的尺寸。
参数:
  • width : Number
    新宽度像素值
  • height : Number
    新高度像素值
返回值:
  • Ext.ProgressBar
    this
ProgressBar
setVisible ( Boolean visible ) : Ext.Component
工具方法，通过使用布尔值隐藏或者显示当前组件。
工具方法，通过使用布尔值隐藏或者显示当前组件。
参数:
  • visible : Boolean
    true时显示，false时隐藏
返回值:
  • Ext.Component
    this
Component
setWidth ( Mixed width ) : Ext.BoxComponent
设置组件的宽度。 此方法触发resize事件。
设置组件的宽度。 此方法触发resize事件。
参数:
  • width : Mixed
    The new width to set.
返回值:
  • Ext.BoxComponent
    this
BoxComponent
show () : Ext.Component
显示当前组件。监听' beforeshow' 事件，返回 false 取消显示组件...
显示当前组件。监听' beforeshow' 事件，返回 false 取消显示组件。在显示组件之后触发' show' 事件。
参数:
  • 无。
返回值:
  • Ext.Component
    this
Component
suspendEvents( Boolean queueSuspended ) : void
暂停触发所有的事件。 (参看resumeEvents)
暂停触发所有的事件。（参看 resumeEvents)
参数:
  • queueSuspended : Boolean
    如果传递为true则排列好暂停的事件使得在调用 resumeEvents 后再触发它们，而不是抛弃所有暂停的事件。
返回值:
  • void
Observable
syncProgressBar () : void
根据当前进展value， 同步进展条内部的宽度到占有整个组件宽度的正确比例...
根据当前进展value， 同步进展条内部的宽度到占有整个组件宽度的正确比例。 当ProgressBar被布局调整尺寸时此方法将会自动被调用， 可以从其它resize处理函数中调用此方法，以便在必要时同步ProgressBar.
参数:
  • 无。
返回值:
  • void
ProgressBar
syncSize () : Ext.BoxComponent
强制组件的大小按照此组件底层元素当前的高度和宽度计算。
强制组件的大小按照此组件底层元素当前的高度和宽度计算。
参数:
  • 无。
返回值:
  • Ext.BoxComponent
    this
BoxComponent
un( String eventName, Function handler, [Object scope] ) : void
删除一个事件处理器(removeListener方法的简写形式)
删除一个事件处理器(removeListener方法的简写形式。)
参数:
  • eventName : String
    处理器关联的事件类型
  • handler : Function
    被删除的处理器 这应该是传入 addListener 中的方法的引用。
  • scope : Object
    （可选）为处理器指定的初始作用域。
返回值:
  • void
Observable
update ( Mixed htmlOrData , [ Boolean loadScripts ], [ Function callback ] ) : void
刷新组件的内部区域。
刷新组件的内部区域。
参数:
  • htmlOrData : Mixed
    如果已经通过tpl为当前组件配置了一个模板，那么 将会使用此参数来装配模板。 如果没有为当前组件配置模板，组件的内容区域将会通过Ext.Element 进行刷新。
  • loadScripts : Boolean
    (可选)只用在使用html配置时此参数才合法。默认为false。
  • callback : Function
    (可选)只用在使用html配置时此参数才合法。 当脚本加载完成时回调函数才被执行。
返回值:
  • void
Component
updateBox ( Object box ) : Ext.BoxComponent
设置此组件底层元素的盒子模型尺寸。(译者注：盒子模型是CSS术语，详细资料请自行搜索。)
设置此组件底层元素的盒子模型尺寸。(译者注：盒子模型是CSS术语，详细资料请自行搜索。)
参数:
  • box : Object
    一个格式为{x, y, width, height}的对象
返回值:
  • Ext.BoxComponent
    this
BoxComponent
updateProgress ( [ Float value ], [ String text ], [ Boolean animate ] ) : Ext.ProgressBar
刷新进展条的值，并可以选择刷新它的文本。 如果没有指定text参数，所有现存的文本值都不会改变...
刷新进展条的值，并可以选择刷新它的文本。 如果没有指定text参数，所有现存的文本值都不会改变。 如需清空现有文本，请传递''. 注意，即使进展条的值超过1，它也不会自动重置--- 你自己负责决定进展条何时刷新结束，并且调用 reset 清空and/or隐藏它。
参数:
  • value : Float
    (可选)一个位于0到1之间的浮点值(例如.5，默认为0)
  • text : String
    (可选)显示在进展条文本元素中的字符串(默认为'')
  • animate : Boolean
    (可选)是否对进展条的变换使用动画效果。如果没有指定此值， 将会使用该类的默认值(默认为false)
返回值:
  • Ext.ProgressBar
    this
ProgressBar
updateText ( [ String text ] ) : Ext.ProgressBar
更新进展条文本。 如果指定了此参数，textEl将会被更新...
更新进展条文本。 如果指定了此参数，textEl将会被更新，否则进展条自身 将会显示更新的文本。
参数:
  • text : String
    (可选)需要显示在进展条文本元素中的字符串(默认为'')
返回值:
  • Ext.ProgressBar
    this
ProgressBar
wait ( [ Object config ] ) : Ext.ProgressBar
初始化一个自动刷新的进展条。 可以指定一个持续时间，在此时间内进展条将会 在固定的时间内自动重置...
初始化一个自动刷新的进展条。 可以指定一个持续时间，在此时间内进展条将会 在固定的时间内自动重置，并可以选择调用一个 回调函数，如果有指定。如果没有传递持续时间， 那么进展条将会无限运行并且必须调用 reset 方法手动清除。 wait方法接受一个拥有如下属性的配置对象:
Property   Type          Description
---------- ------------  ----------------------------------------------------------------------
duration   Number        进展条在重置自身之前运行的时间长度，毫秒
                         (默认为undefined，在这种情况下它将无限运行直到调用reset)
interval   Number        每一步更新间隔的时间长度(默认为1000 ms)
animate    Boolean       是否对进展条的变换使用动画效果。如果不指定此值，将会使用
                         该类的默认值。
increment  Number        用来显示在进展条中的更新步长值(默认为10)。
                         如果进展条到达终点，并且任然在刷新，它将自动转回到起点。
text       String        可选的文本，用来显示在进展条元素中(默认为'')。
fn         Function      在进展条完成自动刷新后需要执行的回调函数。
                         调用此函数时不会传递参数。如果没有指定duration，此函数将会被忽略
                         因为在这种情况下，进展条只能在程序中被停止
                         所以然和必须的函数都必须在重置滚动条后，被相同的代码调用。
scope      Object        传递给回调函数的作用域(只有当
                         duration和fn都被传递时才会应用)。
示例用法:
var p = new Ext.ProgressBar({
   renderTo: 'my-el'
});

//Wait for 5 seconds, then update the status el (progress bar will auto-reset)
p.wait({
   interval: 100, //bar will move fast!
   duration: 5000,
   increment: 15,
   text: 'Updating...',
   scope: this,
   fn: function(){
      Ext.fly('status').update('Done!');
   }
});

//Or update indefinitely until some async action completes, then reset manually
p.wait();
myAction.on('complete', function(){
    p.reset();
    Ext.fly('status').update('Done!');
});
参数:
  • config : Object
    (可选)配置选项
返回值:
  • Ext.ProgressBar
    this
ProgressBar

公共事件

Event Defined By
added : ( Ext.Component this , Ext.Container ownerCt , number index )
当一个组件被添加到一个Ext.Container时触发
当一个组件被添加到一个Ext.Container时触发
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • ownerCt : Ext.Container
    用于组件的容器
  • index : number
    添加组件的位置
Component
afterrender : ( Ext.Component this )
在组件渲染完成之后触发...

在组件渲染完成之后触发。

afterrender事件在当前组件被rendered 结束之后、在为组件定义的所有afterRender方法执行之后 触发，并且，如果有stateful， 也在状态被保存之后才触发。

监听器将会以如下参数格式被调用:
  • this : Ext.Component
Component
beforedestroy : ( Ext.Component this )
在组件 destroyed 之前触发。 在事件监听器中返回false以停止 destroy 操作。
在组件 destroyed 之前触发。 在事件监听器中返回false以停止 destroy 操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforehide : ( Ext.Component this )
在调用hide方法隐藏组件之前触发。 在事件监听器中返回false可以停止隐藏操作。
在调用hide方法隐藏组件之前触发。 在事件监听器中返回false可以停止隐藏操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforerender : ( Ext.Component this )
在组件被rendered 之前触发。 在事件监听器中返回false可以停止render 操作。
在组件被rendered 之前触发。 在事件监听器中返回false可以停止render 操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforeshow : ( Ext.Component this )
在调用show()方法现实组件之前触发。 事件处理函数返回false可以停止show。
在调用show 方法现实组件之前触发。 事件处理函数返回false可以停止show。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforestaterestore : ( Ext.Component this , Object state )
在组件状态恢复之前触发。返回false停止恢复状态操作。
在组件状态恢复之前触发。返回false停止恢复状态操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    StateProvider返回的状态哈希值。 如果没有禁止此事件，那么状态对象会被传递给applyState。 默认情况下，这样简单地把属性值拷贝到当前组件中。 可以覆盖此方法以提供自定的状态恢复操作。
Component
beforestatesave : ( Ext.Component this , Object state )
在组件状态被保存到配置的状态提供者之前触发。 返回false可以停止保存。
在组件状态被保存到配置的状态提供者之前触发。 返回false可以停止保存。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    状态值哈希。 这由在组件上调用getState() 方法决定。 此方法必须由开发者提供，返回是否需要对状态进行描述，默认情况下， Ext.Component有一个空实现。
Component
destroy : ( Ext.Component this )
在组件被销毁之后触发。
在组件被destroyed之后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
disable : ( Ext.Component this )
在组件被设置为无效状态后触发。
在组件被设置为无效状态后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
enable : ( Ext.Component this )
当组件被设置为有效(enabled)之后触发。
当组件被设置为有效(enabled)之后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
hide : ( Ext.Component this )
在组件被隐藏之后触发。 当调用hide 方法隐藏组件之后触发。
在组件被隐藏之后触发。 当调用hide 方法隐藏组件之后触发。
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
move : ( Ext.Component this , Number x , Number y )
在组件移动之后触发。
在组件移动之后触发。
监听器将会用如下的参数格式来调用:
  • this : Ext.Component
  • x : Number
    The new x position
  • y : Number
    The new y position
BoxComponent
removed : ( Ext.Component this , Ext.Container ownerCt )
当一个组件被从Ext.Container容器中删除时触发
当一个组件被从Ext.Container容器中删除时触发
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • ownerCt : Ext.Container
    持有组件的容器
Component
render : ( Ext.Component this )
在组件被渲染之后触发。
在组件被 rendered(渲染) 之后触发。
监听器将以如下的参数格式被调用:
  • this : Ext.Component
Component
resize : ( Ext.Component this , Number adjWidth , Number adjHeight , Number rawWidth , Number rawHeight )
在组件被调整大小之后触发。
在组件被调整大小之后触发。
监听器将以如下的参数格式被调用:
  • this : Ext.Component
  • adjWidth : Number
    这是width调整后的值
  • adjHeight : Number
    这是height调整后的值
  • rawWidth : Number
    这是width原来的值
  • rawHeight : Number
    这是height原来的值
BoxComponent
show : ( Ext.Component this )
在调用show 方法显示组件之后触发。
在调用show 方法显示组件之后触发。
监听器将会用如下的参数格式被调用:
  • this : Ext.Component
Component
staterestore : ( Ext.Component this , Object state )
组件状态被存储之后触发。
组件状态被存储之后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    StateProvider返回的状态哈希值。 如果没有禁止此事件，那么状态对象会被传递给applyState。 默认情况下，这样简单地把属性值拷贝到当前组件中。 可以覆盖此方法以提供自定的状态恢复操作。
Component
statesave : ( Ext.Component this , Object state )
在组件状态被保存到所配置的状态提供者之后触发。
在组件状态被保存到所配置的状态提供者之后触发。
监听器将会用如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    状态值hash。 这是由在足见上调用getState() 方法决定的。 开发者必须提供此方法以返回是否需要恢复状态，默认情况下， Ext.Component有一个空实现。
Component
update : ( Ext.ProgressBar this , Number The , String The )
在每次更新间隔之后触发
在每次更新间隔之后触发
监听器将会以如下参数格式被调用:
  • this : Ext.ProgressBar
  • The : Number
    当前进展值
  • The : String
    当前进展文本
ProgressBar


Observable
    Component
      BoxComponent
        Container
          Panel
            Tip
              ToolTip
                QuickTip

Class Ext.QuickTip

包: | Ext
定义类的文件: | QuickTip.js
类: | QuickTip
继承自: | ToolTip

配置项

Config Options Defined By
activeItem : String/Number
一个string型的组件id，或者组件的数字索引， 它需要...
一个string型的组件id，或者组件的数字索引， 它需要在渲染时在容器内的布局管理器中被初始化并激活。 例如：activeItem: 'item-1' 或者 activeItem: 0 ( 索引 0 =容器子项目集合中的第一个元素)。 activeItem仅仅适用于一次显示一个组件的布局模式(比如 Ext.layout.AccordionLayout, Ext.layout.CardLayout 和 Ext.layout.FitLayout)。 与 Ext.layout.ContainerLayout.activeItem 相关。
Container
allowDomMove : Boolean
在渲染时组件是否可以移动Dom节点(默认为true)。
Component
anchor : String
注: 这个配置只用于该组件被包含在一个已使用AnchorLayout...

注: 这个配置只用于该组件被包含在一个已使用 AnchorLayout (或者其子类)配置的Container时。 基于布局管理器，例如：

  • Ext.form.FormPanel
  • 指定 layout: 'anchor' // or 'form', or 'absolute'

参见 Ext.layout.AnchorLayout. anchor 。

BoxComponent
anchorOffset : Number
一个像素数值被用作表示到锚点箭头的默认位置的偏移量...
一个像素数值被用作表示到锚点箭头的默认位置的偏移量（默认为0）。 当锚点位于tooltip的顶部或底部时， anchorOffset 将被当做横向的偏移量。相似的，当锚点位于左边或右边时， anchorOffset 将被当做竖直方向的偏移量。
ToolTip
anchorToTarget : Boolean
如果为True则表示关联tooltip到目标元素上，false则 表示关联tooltip到光标坐标处（默认为...
如果为True则表示关联tooltip到目标元素上，false则 表示关联tooltip到光标坐标处（默认为true）。 当 anchorToTarget 为true时, 用 defaultAlign 去控制目标元素的排列。 当anchorToTarget为false时，则用 anchorPosition 代替控制排列。
ToolTip
animCollapse : Boolean
true将会在panel被折叠时使用动画效果，false将会跳过动画效果....
true 将会在panel被折叠时使用动画效果， false 将会跳过动画效果( 如果Ext.Fx类 有效，默认为 true ，否则为 false )。
Panel
applyTo : Mixed
指定一个元素的id、一个DOM元素或者一个已经存在并被渲染到DIV中的元素，此DIV已经被...

指定一个元素的id、一个DOM元素或者一个已经存在并被渲染到DIV中的元素，此DIV已经被 渲染到document中，并且为当前组件指定了一些结构化的标签。

  • 描述 :
      当使用了 applyTo， 在主元素中也可以用id或者CSS类名来指定组件的托管部分， 并且，如果可以的话，创建的组件可能也会试图在那个标签中创建它的子组件。
  • 注意 :
      当使用此配置项时，无需调用render()方法。
      如果指定了applyTo属性，任何传递给 renderTo 的值都会被忽略，并且目标元素的父节点将会自动被用作组件的容器。
Panel
autoDestroy : Boolean
如果为true，容器将自动销毁任何从其中被删除的组件， 否则...
如果为true，容器将自动销毁任何从其中被删除的组件， 否则必须手动处理销毁操作(默认为true)。
Container
autoHeight : Boolean
如果值为true，height配置项为'auto'，否则值为false的话使用固定的高度...

如果值为true，height配置项为'auto'，否则值为false的话使用固定的高度， 或者可以由其父类容器 layout manager来控制。(默认值为 false)。

注: 虽然很多组件继承了这个配置选项，但不是所有这些组件的自适应高度配置都会像期望的那样起作用。 设置autoHeight：值为true时，浏览器将根据元素的内容自动设置高度，这将意味着Ext不会去管理高度。

如果是由浏览器来管理高度，需要注意的是，通过浏览器进行调整的结构组件内不能被发现， 因此宽度的变化可能导致需要进行同步处理元素的高度。 例如：

var w = new Ext.Window({
    title: 'Window',
    width: 600,
    autoHeight: true,
    items: {
        title: 'Collapse Me',
        height: 400,
        collapsible: true,
        border: false,
        listeners: {
            beforecollapse: function() {
                w.el.shadow.hide();
            },
            beforeexpand: function() {
                w.el.shadow.hide();
            },
            collapse: function() {
                w.syncShadow();
            },
            expand: function() {
                w.syncShadow();
            }
        }
    }
}).show();
Panel
autoHide : Boolean
如果为true，当鼠标移出目标元素， 或者到达dismissDelay 参数...
如果为true，当鼠标移出目标元素， 或者到达dismissDelay 参数指定的时间之后（如果有指定，默认为true）， 自动隐藏提示信息。 如果closable = true 一个关闭按钮将会被渲染到 tooltip的头部。
ToolTip
autoLoad : Object/String/Function
一个合法的url描述，依照Updater Ext.Updater.update 方法...
一个合法的url描述，依照Updater Ext.Updater.update 方法。如果autoLoad不为null，panel将会在渲染之后立即尝试加载它的内容。

URL将会成为当前panel的body元素的默认URL，这样它可以在任意时刻被 refresh.

Panel
autoScroll : Boolean
如果值为true，将会在该元素上使用overflow:'auto'配置，并且在必要的时候...
如果值为true，将会在该元素上使用overflow:'auto'配置，并且在必要的时候自动显示滚动条，否则，溢出部分的组件都会被切除(默认值为 false)。
BoxComponent
autoShow : Boolean
如果组件需要检测隐藏CSS属性(如 'x-hidden' 或者 'x-hide-display')并且在渲染时删除...
如果组件需要检测隐藏CSS属性(如 'x-hidden' 或者 'x-hide-display')并且在渲染时删除它们 (默认为false)，设置此值为true。
Component
autoWidth : Boolean
如果为true，使用width:'auto'配置，否则使用固定的宽度...

如果为true，使用width:'auto'配置，否则使用固定的宽度，或者可以由其父类容器的layout manager来控制。(默认值为 false)。

注: 虽然很多组件继承了这个配置选项，但不是所有这些组件的自适应宽度配置都会像期望的那样起作用。 设置autoWidth：值为true时，浏览器将根据元素的内容自动设置宽度，这将意味着Ext不会去管理宽度。

如果是由浏览器来管理宽度，需要注意的是，通过浏览器进行调整的结构组件内不能被发现，因此宽度的变化可能导致需要进行同步处理元素的宽度。 例如，在这个元素的目标是：

<div id='grid-container' style='margin-left:25%;width:50%'></div>
当浏览器窗口改变时，渲染后的Panel必须监听浏览器窗口大小的变化，以便通知子项，浏览器改变了其宽度：

var myPanel = new Ext.Panel({
    renderTo: 'grid-container',
    monitorResize: true, // relay on browser resize
    title: 'Panel',
    height: 400,
    autoWidth: true,
    layout: 'hbox',
    layoutConfig: {
        align: 'stretch'
    },
    defaults: {
        flex: 1
    },
    items: [{
        title: 'Box 1',
    }, {
        title: 'Box 2'
    }, {
        title: 'Box 3'
    }],
});
BoxComponent
baseCls : String
应用到当前panel元素上的基本CSS类(默认为 'x-panel' )...
应用到当前panel元素上的基本CSS类(默认为 'x-panel' )。

另一个可选的默认变量是指定 'x-plain' ，它将去掉所有样式，除了Ext布局功能所必须的属性 (例如overflow:hidden)。另请参见 unstyled 。

Panel
bbar : Object/Array
panel底部工具栏。 此参数可以是一个Ext.Toolbar 、一个工具栏配置项，或者一个buttons/button配置数组---用来被添加到工具栏中...

panel底部工具栏。 此参数可以是一个Ext.Toolbar 、一个工具栏配置项，或者一个buttons/button配置数组---用来被添加到工具栏中。 注意，此参数在渲染之后是无效的。如果在渲染之后需要访问底部工具栏 ，请使用 getBottomToolbar。

注意:尽管Toolbar可以包含Field组件，但它们不会 通过加载祖先FormPanel而被更新。Panel的工具栏不是标准Container->Component 层次的一部分，所以它们不会被扫面以收集表单项。但是，这些值还是会 被提交，因为提交表单的参数是从DOM树中收集的。

Panel
bbarCfg : Object
一个 ADomHelper 元素的配置对象，描述了当前Panelbbar元素的结构...

一个DomHelper 元素的配置对象，描述了当前Panel的bbar元素结构。 另请参见 bodyCfg 。

Panel
bodyBorder : Boolean
True将会在Panel的body元素内部显示一个边框，false将会隐藏它 (默认为true)。只有当border == true 时...
True将会在Panel的body元素内部显示一个边框，false将会隐藏它 (默认为true)。只有当border == true 时，此参数才会被应用。如果border == true 并且 bodyBorder == false， 将会给整个body元素一种凹陷式的外观。
Panel
bodyCfg : Object
一个DomHelper 元素描述对象，可以被指定给任何Panel Element...

一个DomHelper 元素描述对象，可以被指定给任何Panel Element.

默认情况下，以下表格中的Default元素将会被用作html标签，用来创建一个子元素 ，与Default类名相匹配( baseCls 将会被 baseCls 替换 ):

Panel      Default  Default             Custom      Additional       Additional
Element    element  class               element     class            style
========   ==========================   =========   ==============   ===========
header     div      baseCls+'-header'   headerCfg   headerCssClass   headerStyle
bwrap      div      baseCls+'-bwrap'     bwrapCfg    bwrapCssClass    bwrapStyle
+ tbar     div      baseCls+'-tbar'       tbarCfg     tbarCssClass     tbarStyle
+ body     div      baseCls+'-body'       bodyCfg     bodyCssClass     bodyStyle
+ bbar     div      baseCls+'-bbar'       bbarCfg     bbarCssClass     bbarStyle
+ footer   div      baseCls+'-footer'   footerCfg   footerCssClass   footerStyle

例如，配置一个自定义的元素，用来强制 body 元素使用不同形式的标签，而不是使用默认创建的。 这种情况的一个例子可能是 创建一个子 Panel，包含自定义的内容，例如header，或者通过使body拥有一个<center> 元素， 从而强制Panel中的所有内容居中:

new Ext.Panel({
    title: 'Message Title',
    renderTo: Ext.getBody(),
    width: 200, height: 130,
    bodyCfg: {
        tag: 'center',
        cls: 'x-panel-body',  // Default class not applied if Custom element specified
        html: 'Message'
    },
    footerCfg: {
        tag: 'h2',
        cls: 'x-panel-footer'        // same as the Default class
        html: 'footer html'
    },
    footerCssClass: 'custom-footer', // additional css class, see addClass

    footerStyle:    'background-color:red' // see bodyStyle

});

以上例子也显式创建了一个 footer ，拥有自定义的标签和样式。

Panel
bodyCssClass : String/Object/Function
可选的CSS类选择器，被应用到body 元素上，其格式为Ext.Element.addClass所 期望的值(默认为null)...
可选的CSS类选择器，被应用到body 元素上，其格式为Ext.Element.addClass所 期望的值(默认为null)。参见 bodyCfg.
Panel
bodyStyle : String/Object/Function
自定义的CSS样式，它将被应用到body 元素上，其格式为...
自定义的CSS样式，它将被应用到body 元素上，其格式为Ext.Element.applyStyles 所期望的值(默认为null)。参见bodyCfg。
Panel
border : Boolean
True将会显示panel body元素的边框，false将会隐藏它们 (默认为true)。默认情况下，边框是一个2px宽度的内嵌边框...
True将会显示panel body元素的边框，false将会隐藏它们 (默认为true)。默认情况下，边框是一个2px宽度的内嵌边框， 但是，以后可以通过设置bodyBorder 为false以改变它。
Panel
boxMaxHeight : Number
设置组件的最大高度值...

设置组件的最大高度值。

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

BoxComponent
boxMaxWidth : Number
设置组件的最大宽度值...

设置组件的最大宽度值。

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

BoxComponent
boxMinHeight : Number
设置组件的最小高度值...

设置组件的最小高度值。

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

BoxComponent
boxMinWidth : Number
设置组件的最小宽度值...

设置组件的最小宽度值。

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

BoxComponent
bubbleEvents : Array
一个事件数组，当这些事件被触发时，将会被冒泡到所有父容器中。参见....

一个事件数组，当这些事件被触发时，将会被冒泡到所有父容器中。参见 Ext.util.Observable.enableBubble。 默认为 []。

Container
bufferResize : Boolean/Number
当设置为true时(50毫秒)或者是一个毫秒数值， 指定给当前容器的布...
当设置为true时(50毫秒)或者是一个毫秒数值， 指定给当前容器的布局管理器将会缓存它计算出的频率，然后 对组件进行一次重新布局操作。 对于重量级的容器，或者拥有大量子组件的容器来说，这非常有用， 因为频繁进行布局是非常昂贵的。 默认为 50 .
Container
buttonAlign : String
添加到当前panel的所有 buttons 的对齐方式。 合法的值有...
添加到当前panel的所有 buttons 的对齐方式。 合法的值有 'right' , 'left' 和 'center' (默认为 'right' )。
Panel
buttons : Array
Panel的按钮数组，它们从 buttons 配置属性创建。只读。
Panel
bwrapCfg : Object
一个DomHelper 元素描述对象，描述了当前Panel的 bwrap 的元素的结构...

一个DomHelper 元素描述对象，描述了当前Panel的 bwrap 的元素的结构。另请参见 bodyCfg 。

Panel
clearCls : String
应用到特殊的clearing div的CSS类， 这个clearing div直接渲染到每个form field的包装器后面...

应用到特殊的clearing div的CSS类， 这个clearing div直接渲染到每个form field的包装器后面，以提供 清除field的功能(默认为 'x-form-clear-left')。

注意: 只有在当前组件被渲染到一个使用FormLayout 布局(例如 Ext.form.FormPanel 或者指定 layout:'form')的 容器中、或者是指定了一个fieldLabel 、或者指定isFormField=true 时此配置才有效。

另请参见 Ext.layout.FormLayout. fieldTpl。

Component
closable : Boolean
Panel自身不支持关闭操作，但是Panel的一些子类 (例如Ext.Window) ，或者处于Ext.TabPanel中的 Panel支持...
Panel自身不支持关闭操作，但是Panel的一些子类 (例如Ext.Window) ，或者处于Ext.TabPanel中的 Panel支持。 指定此参数为 true 可以在这些情况下启用关闭。默认为 false 。
Tip
cls : String
一个可选的额外CSS类，它将被添加到当前组件的元素上(默认为'')...
一个可选的额外CSS类，它将被添加到当前组件的元素上(默认为'')。 此属性对于在组件上，或者它的任何使用标准CSS规则的孩子节点上， 添加定制的样式非常有用。
Component
collapseFirst : Boolean
将会确保折叠/展开(collapse/expand)按钮总是被渲染在第一个位置...
true 将会确保折叠/展开(collapse/expand)按钮总是被渲染在第一个位置， 在panel顶部的工具栏中位于任何其它工具左侧， false 将会把它渲染在最后(默认为 true )。
Panel
collapsed : Boolean
如果当前panel被折叠为true。只读。
Panel
collapsedCls : String
在被折叠后，一个被添加到panel元素上的CSS类 (默认为 'x-panel-collapsed' )。
Panel
collapsible : Boolean
True将会使panel折叠并且会自动把展开/折叠(expand/collapse)按钮渲染到顶部...
True将会使panel折叠并且会自动把展开/折叠 (expand/collapse)按钮渲染到顶部工具按钮区域，false将 保持panel尺寸固定，没有按钮(默认为false)。
Panel
contentEl : String
(可选)指定一个已存在的HTML元素，或者一个已存在HTML元素的...

(可选)指定一个已存在的HTML元素，或者一个已存在HTML元素的 id ，它们将被用作当前组件的内容。

  • 描述 :
    此配置选项被用来将一个已存在的HTML元素 插入到一个新组件(在组件渲染之后它简单地移动DOM元素) 的layout元素中，使它成为该组件的内容。
  • 注意 :
    指定的HTML元素将被append到组件的layout元素中， 在所有配置的 HTML 被插入之后， 并且，这样的话，在render事件 被触发时，document中将不再包含此元素。
    指定的HTML元素将不会参与组件所有可能使用的 layout 过程(译者注：指这些HTML元素 不会参与布局操作)。 它仅是HTML而已。布局操作实在孩子 items 上进行的。
    添加 x-hidden 或者 x-hide-display CSS类，以防在内容渲染到panel时发生闪烁。
Component
ctCls : String
一个可选的外部CSS样式，添加到这个组件的容器(默认值为 '')。 这个方法对于使用标准的CSS规则...

一个可选的外部CSS样式，添加到这个组件的容器(默认值为 '')。 这个方法对于使用标准的CSS规则，为组件或它的任何一个子组件添加特定的样式非常有用。 参见 Ext.layout.ContainerLayout和 extraCls 。

注意: ctCls 默认为 ''期望如下的类，它们将指定一个默认值:

  • Box Layout : 'x-box-layout-ct'
使用一个额外的CSS类配置以上的Class，它是append到默认对象上的。例如， 对于BoxLayout (Hbox and Vbox):
                                ctCls: 'x-box-layout-ct custom-class'

Component
data : Mixed
初始化数据集，它将被应用到 tpl 上以刷新组件的内容区域。
Component
defaultAlign : String
实验性参数。 当前tip默认的Ext.Element.alignTo 锚定位置值，与它的起源元素...
实验性参数。 当前tip默认的Ext.Element.alignTo 锚定位置值，与它的起源元素(译者注：指弹出tip那个元素)有关(默认为"tl-bl?")。
Tip
defaultType : String
当一个子项目通过一个原生的配置对象 而不是一个组件的实例指定时。...

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

默认为 'panel' ， Ext.menu.Menu 默认为 'menuitem' ， Ext.Toolbar 和 Ext.ButtonGroup 默认为 'button' 。

Container
defaults : Object|Function
此选项是在所有添加的项目上应用默认设置的手段， 这些项目要么是通过...

此选项是在所有添加的项目上应用默认设置的手段， 这些项目要么是通过 items 配置项添加的， 或者是通过 add 或者是通过 insert 方法添加的。

如果添加的项目是一个配置对象， 并且不是一个组件的实例， 那么默认参数将会被无条件地被应用。 如果添加的项目是一个组件的实例， 那么默认参数将有条件地被应用，以免覆盖项目上的现有属性你。

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

例如，如需自动在 Ext.Panel 所包含的每个项目上应用padding属性，你可以传递: defaults: {bodyStyle: 'padding:15px'} 。

用法:

defaults: {               // defaults are applied to items, not the container
    autoScroll:true
},
items: [
    {
        xtype: 'panel',   // defaults do not have precedence over
        id: 'panel1',     // options in config objects, so the defaults
        autoScroll: false // will not be applied here, panel1 will be autoScroll:false
    },
    new Ext.Panel({       // defaults do
                                     have precedence over options
        id: 'panel2',     // options in components, so the defaults
        autoScroll: false // will be applied here, panel2 will be autoScroll:true.
    })
]
Container
delegate : String
（可选）一个DomQuery 选择器 使得target元素中选中的私有元素...

（可选）一个DomQuery选择器 使得 target元素中选中的私有元素 在光标移至target元素上时可触发显示和隐藏Tooltip。

当此属性具体指定时，在Tooltip显示之前，触发了一个显示事件的target的子元素会被放进 triggerElement 属性里。

当一个组件有一些常规的，重复的元素，而它们中的每一个都包含特有的信息并且需要一个Tooltip时可能会用到该属性。 例如:

var myGrid = new Ext.grid.gridPanel(gridConfig);
myGrid.on('render', function(grid) {
    var store = grid.getStore();  // 获取 Store.
    var view = grid.getView();    // 获取 GridView.
    myGrid.tip = new Ext.ToolTip({
        target: view.mainBody,    // 全部的元素。
        delegate: '.x-grid3-row', // 每一行都会触发其单独的显示和隐藏。
        trackMouse: true,         // 在行内移动时不会隐藏tip。
        renderTo: document.body,  // 立即渲染，使得tip.body可以
                                  //  在第一次显示时预先被引用。
        listeners: {              // 对于不同的触发元素
                                  //  显示不同的值。
            beforeshow: function updateTipBody(tip) {
                var rowIndex = view.findRowIndex(tip.triggerElement);
                tip.body.dom.innerHTML = 'Over Record ID ' + store.getAt(rowIndex).id;
            }
        }
    });
});
ToolTip
disabled : Boolean
当前组件处于无效状态时为true。 Read-only.
Panel
disabledClass : String
当组件处于无效状态时添加到组件上的CSS类(默认为 'x-item-disabled')。
Component
dismissDelay : Number
在tooltip自动隐藏之前延迟的毫秒数(默认值为 5000)...
在tooltip自动隐藏之前延迟的毫秒数(默认值为 5000)。（译者注：也就是tooltip显示的毫秒数）。 如需要使自动隐藏无效，设置dismissDelay = 0。
ToolTip
draggable : Boolean/Object
true 可以让当前panel启用拖拽操作(默认为 false )...

true 可以让当前panel启用拖拽操作(默认为 false )。

如需自定义的drag/drop实现，也可以向此配置项传递一个 Ext.Panel.DD配置替代 true 。 Ext.Panel.DD是一个内部没有文档化的类，它在周围移动代理元素 代替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();
Panel
elements : String
panel元素列表，以逗号分隔，在panel被渲染时初始化。 通常情况下...
panel元素列表，以逗号分隔，在panel被渲染时初始化。 通常情况下，此列表在配置时根据添加到panel的项目被自动创建， 但有时，即使没有在配置时指定，对于确保一个结构化的元素被渲染也很有用 (例如，你可能希望在panel被渲染后动态地添加一个按钮或者工具栏)。 添加这些元素到此列表中将会在panel被渲染时分配必须的占位符。 合法的值有
  • header
  • tbar (top bar)
  • body
  • bbar (bottom bar)
  • footer
Defaults to ' body '.
Panel
fbar : Object/Array
一个Toolbar 对象、一个Toolbar配置项，或者一个Buttons/ Button 配置数组，...

一个Toolbar 对象、一个Toolbar配置项，或者一个Buttons/ Button 配置数组，它们描述了一个被添加到当前Panel底部元素的 Toolbar.

在渲染后， fbar 将会为一个Toolbar 实例。

如果指定了 buttons ，它们将替代 fbar 配置项。

Panel的 buttonAlign 配置项目将会影响这些项目的布局，例如:
var w = new Ext.Window({
    height: 250,
    width: 500,
    bbar: new Ext.Toolbar({
        items: [{
            text: 'bbar Left'
        },'->',{
            text: 'bbar Right'
        }]
    }),
    buttonAlign: 'left', // anything but 'center' or 'right' and you can use '-', and '->'

                                  // to control the alignment of fbar items
    fbar: [{
        text: 'fbar Left'
    },'->',{
        text: 'fbar Right'
    }]
}).show();

注意:尽管Toolbar可以包含Field组件，但它们不会 通过加载祖先FormPanel而被更新。Panel的工具栏不是标准Container->Component 层次的一部分，所以它们不会被扫面以收集表单项。但是，这些值还是会 被提交，因为提交表单的参数是从DOM树中收集的。

Panel
fieldLabel : String
紧靠此field显示的标签文本(默认值为 '')。注意...

紧靠此field显示的标签文本(默认值为 '')。

注意:只有在当前组件被渲染到一个使用FormLayout 的容器中时，此配置才有效。 (例如 Ext.form.FormPanel 或 指定 layout:'form')。

另请参见 hideLabel 、 Ext.layout.FormLayout和 fieldTpl。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Name'
    }]
});
Component
flex : Number
注: 这个配置只用于该组件被包含在一个已使用BoxLayout配置的Container中时...

注: 这个配置只用于该组件被包含在一个已使用BoxLayout配置的Container中时。通过计算每一个子组件的flex值所占全部flex值之和的比例，来决定子组件的宽(HBoxLayout)高(VBoxlayout)。 任何子项的 flex = 0 或 flex = undefined 将不被设置(初始值大小将不被改变)。

BoxComponent
floating : Mixed
此参数被用来配置底层的 Ext.Layer. 此配置参数可接受的值有...

此参数被用来配置底层的 Ext.Layer. 此配置参数可接受的值有:

  • false : 默认。
    在渲染的地方以内嵌的方式显示panel.
  • true :
    浮动panel (绝对定位，有自动衬垫和阴影)。
      设置floating为true将会为当前panel创建一个Ext.Layer 并且在负值偏移量处显示panel，这样它就是隐藏的。
      既然panel被绝对定位，位置必须在渲染之后被显式设置 (例如 myPanel.setPosition(100,100); )。
      注意: 如果浮动面板，你必须总是指定一个固定的宽度， 否则它将是自动宽度并且总是展开以便填充到视口右侧 边缘。
  • object :
    指定的对象将会被用作将会被创建的 Ext.Layer的 配置对象。
Panel
footer : Ext.Element
Panel底部Element 。只读。此元素被用来容纳Panel的...
Panel底部Element 。只读。

此元素被用来容纳Panel的 buttons 或者 fbar 。

注意: 另请参见 el 的注释。

Panel
footerCfg : Object
一个DomHelper 元素的配置对象，描述了当前Panel的footer元素结构。 另请参见...

一个DomHelper 元素的配置对象，描述了当前Panel的footer元素结构。 另请参见 bodyCfg 。

Panel
forceLayout : Boolean
如果此值为true，容器将将强制初始化一次布局操作...
如果此值为true，容器将将强制初始化一次布局操作， 即使容器处于隐藏或者折叠状态。 此配置项对于在一个折叠或者隐藏的容器中强制渲染非常有用 (默认为false)。
Container
frame : Boolean
默认情况下使用 false ，渲染简单的1px的正方形边框。 true 将会渲染9个元素，以自定义的圆角结束...
默认情况下使用 false ，渲染简单的1px的正方形边框。 true 将会渲染9个元素，以自定义的圆角结束 (另请参见 Ext.Element.boxWrap)。

每种情况下产生的模板描述如下:

// frame = false
<div id="developer-specified-id-goes-here" class="x-panel">

    <div class="x-panel-header"><span class="x-panel-header-text">Title: (frame:false)</span></div>

    <div class="x-panel-bwrap">
        <div class="x-panel-body"><p>html value goes here</p></div>
    </div>
</div>

// frame = true (create 9 elements)
<div id="developer-specified-id-goes-here" class="x-panel">
    <div class="x-panel-tl"><div class="x-panel-tr"><div class="x-panel-tc">
        <div class="x-panel-header"><span class="x-panel-header-text">Title: (frame:true)</span></div>
    </div></div></div>

    <div class="x-panel-bwrap">
        <div class="x-panel-ml"><div class="x-panel-mr"><div class="x-panel-mc">
            <div class="x-panel-body"><p>html value goes here</p></div>
        </div></div></div>

        <div class="x-panel-bl"><div class="x-panel-br"><div class="x-panel-bc"/>
        </div></div></div>
</div>
Panel
header : Ext.Element
Panel的headerElement. 只读。此元素被用来容纳 title和 tools...
Panel的headerElement. 只读。

此元素被用来容纳 title和 tools

注意: 另请参见 el 的注释。

Panel
headerAsText : Boolean
true 将会在 header 中显示panel title ， false 将会隐藏它(默认为 true )。
Panel
headerCfg : Object
一个DomHelper 元素的配置对象，描述了当前Panel的header元素结构...

一个DomHelper 元素的配置对象，描述了当前Panel的header元素结构。 另请参见 bodyCfg 。

Panel
height : Number
组件的高度(默认值为 auto)。注:如果想使用百分比的方式...
组件的高度(默认值为 auto)。注:如果想使用百分比的方式来设置值，请查看 Ext.Component.anchor。
BoxComponent
hidden : Boolean
如果当前组件处于隐藏状态，此值为true。Read-only。
Component
hideBorders : Boolean
设置为true可以隐藏所包含的每个组件的边框， false为遵照组件现有的边框设置...
设置为true可以隐藏所包含的每个组件的边框， false为遵照组件现有的边框设置(默认为 false)。
Container
hideCollapseTool : Boolean
true 将会在 collapsible == true 时隐藏展开/折叠按钮， false 将会显示它(默认为 false )。
Panel
hideDelay : Number
鼠标移出目标之后，tooltip隐藏之前的延迟时间毫秒数(默认值为 200)。 设置为...
鼠标移出目标之后，tooltip隐藏之前的延迟时间毫秒数(默认值为 200)。 设置为0，tooltip将立即隐藏。
ToolTip
hideLabel : Boolean
true时完全隐藏label元素 ( label 和 separator)。 默认为 false。 默认情况下，即使你不指定...

true时完全隐藏label元素 ( label 和 separator)。 默认为 false。 默认情况下，即使你不指定 fieldLabel 它的空间仍然会被保留，这样这块区域会与其它确实拥有label的区域位于同一排。 讲此值设置为 true 将导致此区域不再保留此空间。

注意: 参见 clearCls 的注释。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield'
        hideLabel: true
    }]
});
Component
hideMode : String
组件如何隐藏，支持的值有： 'visibility' (css visibility), 'offsets' (位置偏移量为负值) 和...

组件如何隐藏，支持的值有： 'visibility' (css visibility), 'offsets' (位置偏移量为负值) 和 'display' (css display).

注意:一般首选默认值 'display'，因为当组件第一次显示的时候它们会自动进行布局 (隐藏的时候不会调整尺寸)。

Component
hideParent : Boolean
此值为true时，当调用hide/show方法时，将会hide和show组件的容器...
此值为true时，当调用hide/show方法时，将会hide和show组件的容器；false时将会 hide和show组件自身(默认为false)。例如，这可以用作window上隐藏按钮的一种 快捷操作，通过设置此按钮的hideParent:true，然后把它添加到window上。
Component
html : String/Object
一个HTML片段，或者一个 DomHelper 描述，用作layout元素的内容(默认为'')。...
一个HTML片段，或者一个 DomHelper 描述，用作layout元素的内容(默认为'')。 这个HTML内容在组件渲染之后才被添加，所以在 render 出发的时候，document中尚未包含此HTML。 但是这个内容将会在所有配置的 contentEl 之前被插入到body标签中。
Component
iconCls : String
CSS类选择器，指定被用作头部图标的背景图片(默认为'')...
CSS类选择器，指定被用作头部图标的背景图片(默认为'')。

指定自定义图表类的示例就像:

// specify the property in the config for the class:
     ...
     iconCls: 'my-icon'

// css class that specifies background image to be used as the icon image:
.my-icon { background-image: url(../images/my-icon.gif) 0 6px no-repeat !important; }
Panel
id : String
当前组件唯一的id(默认为auto-assigned id)...

当前组件唯一的id(默认为auto-assigned id)。 如果你需要在以后访问组件，而又没有一个有效的组件对象引用，那么你需要指定一个 id( 也就是，使用Ext. getCmp方法 )。

注意，此id也将被用作组件底层HTML标签的id，这些标签被渲染到页面中。 这将允许你编写基于id的CSS规则，以独立地描述指定的实例；并且，也可以通过 组件父标签的id选中子元素。

注意:为了避免与唯一的id 产生重复， 请参见 itemId 和 ref 。

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

Component
interceptTitles : Boolean
True将会自动使用元素的DOM title值---如果可用(默认为false)。
QuickTip
itemCls : String
注意: 只有在当前组件被渲染到一个使用FormLayout 布局的 容器中时此配置才有效...

注意: 只有在当前组件被渲染到一个使用FormLayout 布局的 容器中时此配置才有效。 (例如Ext.form.FormPanel 或者指定 layout:'form')。

一个附加的CSS类，应用到div上，包装当前field的表单元素。 如果提供了此参数， field级上的itemCls将会覆盖 container级上提供的 默认itemCls。 为itemCls指定的值将会被添加默认的 类('x-form-item')。

既然它被应用到项目的包装器上(参见 Ext.layout.FormLayout。 fieldTpl)， 它将允许你编写能应用到此field、label(如果有指定)、或者field内部任何其它元素的标准CSS规则。

注意: 参考 fieldLabel的注释。 .

示例用法:

// Apply a style to the field's label:
<style>
    .required .x-form-item-label {font-weight:bold;color:red;}
</style>

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Name',
        itemCls: 'required' //this label will be styled
    },{
        xtype: 'textfield',
        fieldLabel: 'Favorite Color'
    }]
});
Component
itemId : String
当没有可利用的对象引用时，itemId可以作为第二选择，用来获得一个组件的引用， 代替 ...

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

var c = new Ext.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'); // 与 Ext.getCmp()不同

p2 = p1.ownerCt.getComponent('p2'); // 通过兄弟对象获得引用

另请参见 id 和 ref 。

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

Component
items : MixedCollection
当前容器中的子组件集合 Ext.util.MixedCollection
Container
keys : Object/Array
一个Ext.KeyMap 配置对象 (其格式为Ext.KeyMap.addBinding 所期望的值...
一个Ext.KeyMap 配置对象 (其格式为Ext.KeyMap.addBinding 所期望的值，用来向当前panel上绑定自定义的按键处理(默认为 null )
Panel
labelSeparator : String
每个fieldLabel 文本后面现实的分隔符。 此属性可以在多个层次上进行配置...

每个fieldLabel 文本后面现实的分隔符。 此属性可以在多个层次上进行配置。优先顺序为：

  • field / component level
  • container level
  • layout level (默认为冒号 ':')
如不需要为当前field的label显示分隔符，指定一个空字符串''即可。

注意:参见 clearCls 的注释。

另请参见 hideLabel 和 Ext.layout.FormLayout。 fieldTpl。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    layoutConfig: {
        labelSeparator: '~'   // layout config has lowest priority (defaults to ':')
    },
    labelSeparator: '>>',     // config at container level
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Field 1',
        labelSeparator: '...' // field/component level config supersedes others
    },{
        xtype: 'textfield',
        fieldLabel: 'Field 2' // labelSeparator will be '='

    }]
});
Component
labelStyle : String
一个CSS样式描述字符串，它将直接应用到当前field的label上...

一个CSS样式描述字符串，它将直接应用到当前field的label上。 如果有设置，默认为容器的labelStyle值(例如 Ext.layout.FormLayout.labelStyle , 或者 '')。

注意:参见 clearCls 的注释。

另请参见 hideLabel 和 Ext.layout.FormLayout. fieldTpl。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Name',
        labelStyle: 'font-weight:bold;'
    }]
});
Component
layout : String/Object
*重要: 为了让子项目能被正确地调整尺寸和位置， 典型地，必须通过 layout 配置项指定一个布局管理器。...

*重要: 为了让子项目能被正确地调整尺寸和位置， 典型地，必须通过 layout 配置项指定一个布局管理器。

调整子items的尺寸和位置 是容器的布局管理器的职责，它负责创建和管理你想要的那种布局类型。 例如:

new Ext.Window({
    width:300, height: 300,
    layout: 'fit', // explicitly set layout manager: override the default (layout:'auto')
    items: [{
        title: 'Panel inside a Window'
    }]
}).show();

如果没有为一个通用的容器(例如Container或者Panel)特别指定 layout ，将会使用default layout manager ，它除了将子组件按顺序渲染到容器中之外什么事情都不做( 这种情况下不会发生调整尺寸和位置的操作)。 一些容器类内部指定了一个默认的布局 (例如FormPanel指定了 layout: 'form' )。 另一些有特殊用途的类内部指定/管理它们内置的布局( 例如GridPanel, TabPanel, TreePanel, Toolbar, Menu等等)。

layout 既可以通过一个对象或者一个字符串指定:

  • 用一个对象指定
    • 示例用法:
      • layout: {
    type: 'vbox',
    padding: '5',
    align: 'left'
}
    • type

      • 当前容器需要使用的布局类型。 如果不指定，将创建并使用一个默认的 Ext.layout.ContainerLayout 。

      可用的布局 type 值是:

      • absolute
      • accordion
      • anchor
      • auto Default
      • border
      • card
      • column
      • fit
      • form
      • hbox
      • menu
      • table
      • toolbar
      • vbox
    • 布局描述配置参数

      • 也可以指定附加的布局描述配置。 关于每个布局类型可用配置选项完整的细节，参见 type 参数指定的相关布局类。

  • 通过一个字符串指定
    • 示例用法:
      • layout: 'vbox',
layoutConfig: {
    padding: '5',
    align: 'left'
}
    • layout

      • 当前容器使用的布局 type ( 可用的布局类型值参见上述列表)。

    • layoutConfig

      • 附件的布局描述配置参数。 关于每个布局类型可用配置选项完整的细节，参见 layout 参数指定的相关布局类。

Container
layoutConfig : Object
这是一个配置对象，包含为 layout 指定的参数， 如果 layout 是作为一个 string 来指定的。

Container
listeners : Object
一个包含一个或多个事件处理器的配置对象，会在初始化的时候被添加到目标对象上...

一个包含一个或多个事件处理器的配置对象，会在初始化的时候被添加到目标对象上。 该配置对象应该是一个有效的监听器配置对象就像 addListener例子中指定的一样可一次附加多个处理器。

ExtJs Components上的DOM事件

一些 ExtJs Component 类导出时会选择一些DOM事件(例如 "click", "mouseover" 等等), 这通常只是在有额外的值可以被添加时发生。例如DataView类的 click事件会传递被点击的节点。也可以直接在Component的HTMLElementevent上访问DOM事件，但必需在Component被渲染后监听器才能添加到Element 上。可以按照以下步骤添加插件:

// 插件会用一个监听器配置对象进行配置。
//该组件会被添加到所有处理方法的参数列表上。
Ext.DomObserver = Ext.extend(Object, {
    constructor: function(config) {
        this.listeners = config.listeners ? config.listeners : config;
    },

    // 组件将自己传递进了插件的初始化方法里
    init: function(c) {
        var p, l = this.listeners;
        for (p in l) {
            if (Ext.isFunction(l[p])) {
                l[p] = this.createHandler(l[p], c);
            } else {
                l[p].fn = this.createHandler(l[p].fn, c);
            }
        }

        // 渲染后立即添加监听器到元素上
        c.render = c.render.createSequence(function() {
            var e = c.getEl();
            if (e) {
                e.on(l);
            }
        });
    },

    createHandler: function(fn, c) {
        return function(e) {
            fn.call(this, e, c);
        };
    }
});

var combo = new Ext.form.ComboBox({

    // 元素被点击后折叠
    plugins: [ new Ext.DomObserver({
        click: function(evt, comp) {
            comp.collapse();
        }
    })],
    store: myStore,
    typeAhead: true,
    mode: 'local',
    triggerAction: 'all'
});

Observable
margins : Object
注:此配置只用于该组件展现在一个使用BorderLayout...

注:此配置只用于该组件展现在一个使用BorderLayout 或 BoxLayout的两个子类之一作为布局的容器。

这个margins对象在该组件中的格式为：

{top: (top margin),right: (right margin),bottom: (bottom margin),left: (left margin)}

也可以是一个字符串，中间用空格分隔，margin值为数字。 把matches中每一个值的次序跟CSS中margin值的排列方式相对应：

  • 如果只有一个值，它适用于所有方面。
  • 如果有两个值，top和bottom的边框设置为第一个值，left和right设置为第二个值。
  • 如果有三个值，top设置为第一个值，left和right设置为第二个值，bottom设置为第三个值。
  • 如果有四个值，分别设置为top, right, bottom, left。

默认值:

{top:0, right:0, bottom:0, left:0}
BoxComponent
maskDisabled : Boolean
true 将会在panel被disabled时进行遮罩,false将不会遮罩它(默认为...
true 将会在panel被disabled时进行遮罩, false 将不会遮罩它(默认为 true )。使用任意一种方法，当被禁用时，panel都将告诉它包含的元素禁用它们自己， 但是遮罩panel可以提供一种额外的视觉效果，用以提示panel被禁用。
Panel
maxWidth : Number
tip最大宽度像素值(默认为300)。支持的最大值为500。
Tip
minButtonWidth : Number
当前panel中所有buttons 最小宽度，像素值(默认为 75 )
Panel
minWidth : Number
tip最小宽度像素值(默认为40)。
Tip
monitorResize : Boolean
设置为true自动监测window的resize事件，以便处理所有对当前窗口尺寸 敏感的事情。...
设置为true自动监测window的resize事件，以便处理所有对当前窗口尺寸 敏感的事情。 典型地，通过选择一个 layout 来管理这个值，并且不应该手动设置它。
Container
mouseOffset : Array
一个到鼠标位置的XY偏移量，tooltip将会被显示在此位置(默认值为 [15,18])。
ToolTip
overCls : String
一个可选的额外的CSS类，它将在鼠标移过元素时被添加到组件上...
一个可选的额外的CSS类，它将在鼠标移过元素时被添加到组件上，鼠标移出时 删除。(默认为'')。此属性对于在组件上，或者它的任何使用标准CSS规则的孩子节点上， 添加定制的'active' 或者 'hover'样式非常有用。
Component
padding : Number/String
设置body元素padding样式的快捷方式。 此值既可以是一个数值，被应用到所有侧边...
设置body元素padding样式的快捷方式。 此值既可以是一个数值，被应用到所有侧边，也可以是一个普通的描述padding的 CSS字符串。默认为undefined.
Panel
pageX : Number
如果该组件被包含在一个指定位置的容器中，这个值表示页面级的x坐标值（译者注：在有滚动条的情况下这个值很有用）。
BoxComponent
pageY : Number
如果该组件被包含在一个指定位置的容器中，这个值表示页面级的y坐标值（译者注：在有滚动条的情况下这个值很有用）。
BoxComponent
plugins : Object/Array
一个对象或者一个对象数组，为组件提供特殊的功能 ...
一个对象或者一个对象数组，为组件提供特殊的功能。 对一个合法的插件唯一的要求是它含有一个init()方法， 能接收一个Ext.Component型的参数。 当组件被创建时，如果有可用的插件，组件将会调用每个插件的init方法， 并将自身的引用作为方法参数传递给它。然后，每个插件就可以调用方法或者响应组件上的事件， 就像需要的那样提供自己的功能。
Component
preventBodyReset : Boolean
默认为 false 。当设置为 true 时， 一个额外的CSS类 'x-panel-normal' 将会被田间到panel的元素， 有效地将W3C(参见 http://www.w3.org/TR/CSS21/sample.html)...
默认为 false 。当设置为 true 时， 一个额外的CSS类 'x-panel-normal' 将会被田间到panel的元素， 有效地将W3C(参见 http://www.w3.org/TR/CSS21/sample.html) 建议的CSS样式应用到Panel的body元素上 (不是header, footer等等)。
Panel
ptype : String
需要创建配置的ptype。 当传递一个配置对象给构造函数时...
需要创建配置的ptype。 当传递一个配置对象给构造函数时，此配置选项不会被使用。 只有在使用懒初始化的时候此配置项才会被使用， 此时Plugin不是 通过一个完整的实例组件，而是通过一个Component配置指定的。 在渲染时，将会查找ptype以决定创建何种类型的Plugin。

如果你创建自己的Plugin，你可以通过 Ext.ComponentMgr.registerPlugin 对它们进行注册，以便能利用懒初始化和渲染机制。
Component
ref : String
一个路径描述，与组件的 ownerCt 相关，它描述了把当前组件的命名引用放置到哪个父容器中去。...

一个路径描述，与组件的 ownerCt 相关，它描述了把当前组件的命名引用放置到哪个父容器中去。

祖先的坐标路径可以通过'/'字符进行分隔。 例如，将一个Toolbar Button的引用放入 拥有此Toolbar的Panel中:

var myGrid = new Ext.grid.EditorGridPanel({
    title: 'My EditorGridPanel',
    store: myStore,
    colModel: myColModel,
    tbar: [{
        text: 'Save',
        handler: saveChanges,
        disabled: true,
        ref: '../saveButton'
    }],
    listeners: {
        afteredit: function() {
//          The button reference is in the GridPanel
            myGrid.saveButton.enable();
        }
    }
});

在上面的代码中，如果 ref 是 'saveButton' ，那么引用将会被放置到Toolbar中。 ref 中的每个'/' 都会从组件的 ownerCt 向上移动一级。

另请参见 added 和 removed 事件。

Component
region : String
注: 此配置只用于该组件展现在一个布局为BorderLayout的容器中...

注: 此配置只用于该组件展现在一个布局为BorderLayout的容器中(例如指定layout:'border')。

详见Ext.layout.BorderLayout。

BoxComponent
renderTo : Mixed
该值可以是一个节点的id、一个DOM节点或者一个已存在的元素...

该值可以是一个节点的id、一个DOM节点或者一个已存在的元素， 组件将会被渲染到其中。

  • 注意 :
      如果组件不是一个Container 的子项目时， 不要使用此选项。 渲染和管理它的子项目是一个Container 的layout manager的责任。
      当使用此配置项时，无需调用render()方法。

另请参见 render 。

Component
resizeEvent : String
在布局中进行尺寸调整需要监听的事件。 默认为 'resize' 。
Panel
shadow : Boolean/String
(或者一个有效的Ext.Shadow Ext.Shadow.mode 值)，用来在panel后面显示一个阴影...
true (或者一个有效的Ext.Shadow Ext.Shadow.mode 值)，用来在panel后面显示一个阴影， false 将不会显示阴影(默认为 'sides' )。注意，此选项只有当 floating = true 时才应用。
Tip
shadowOffset : Number
如果显示了阴影，此参数为数值偏移量(默认为 4 )。注意，只有当 floating = true 时此参数才会被应用。...
如果显示了阴影，此参数为数值偏移量(默认为 4 )。注意，只有当 floating = true 时此参数才会被应用。
Panel
shim : Boolean
false将会在需要的浏览器中禁用iframe衬垫(默认为...
false 将会在需要的浏览器中禁用iframe衬垫(默认为 true )。注意，此选项只有在 floating = true 时应用。
Panel
showDelay : Number
鼠标进入目标元素之后，tooltip显示之前的延迟时间毫秒数(默认值为 500)。
ToolTip
stateEvents : Array
一个事件数组，当它们被触发时，组件需要保存自己的状态(默认值为 none)...

一个事件数组，当它们被触发时，组件需要保存自己的状态(默认值为 none)。 它们可以是任何该组件支持的事件类型，包括浏览器事件和 自定义事件(例如['click', 'customerchange'])。

对于保存和恢复组件状态的详细解释，参见 stateful

Component
stateId : String
为该组件指定的唯一的id值，它被用作管理组件状态的目的...
为该组件指定的唯一的id值，它被用作管理组件状态的目的。 (如果设定了id，默认值为组件自己的id，否则，如果组件使用自动生成的id，此值为null)。

对于保存和反解析组件状态的解释，参见 stateful 。

Component
stateful : Boolean
一个标志参数，它将引起组件在启动时尝试从一个保存的状态中恢复内部状态参数...

一个标志参数，它将引起组件在启动时尝试从一个保存的状态中恢复内部状态参数。 组件必须要么拥有一个 stateId 或者 id ，它们被分配给需要被管理的状态属性。 在跨页面加载时，不保证自动生成的id属性的稳定性， 并且，不能依赖此id来保存和恢复一个组件的相同状态。

为了保存状态的操作能够工作，状态管理器的提供者必须 被设置成一个Ext.state.Provider 的实现类，它覆盖了set 和get 方法，以便保存和恢复name/value对。 有一个内置的Ext.state.CookieProvider 可用。

为当前页面设置状态提供者:

Ext.state.Manager.setProvider(new Ext.state.CookieProvider({
    expires: new Date(new Date().getTime()+(1000*60*60*24*7)), //7 days from now
}));

当 stateEvents 配置项中其中之一的事件被触发时， 一个状态可保存的组件将试图保存其状态。

保存状态时，一个可保存状态的组件首先需要通过调用 getState 方法来序列化它的状态。 默认情况下，此函数什么事都不做。 开发者必须提供一个实现，返回一个hash对象，它描述了组件可恢复的状态。

getState方法产生的值将会传递给 Ext.state.Manager.set 方法，它使用配置的 Ext.state.Provider 来保存对象，以组件的 stateId 为key，或者，如果此值（指stateId）没有指定时， 使用它的 id 作为key。

在进行构造时，一个可保存状态的组件试图通过调用 Ext.state.Manager.get方法来 恢复它的状态，传递 stateId 或者，如果此值（指stateId）没有指定时， 使用它的 id 作为参数。

结果对象被传递给 applyState 。 applyState 的默认实现只是简单地把属性拷贝到对象中， 但是开发者可以覆盖此方法以支持更多行为。

通过向 beforestaterestore, staterestore, beforestatesave 和 statesave 事件上绑定监听器，你可以在保存和恢复状态时进行额外的处理。

Component
style : String
被添加到组件元素的特定样式。 必须是按照...
被添加到组件元素的特定样式。 必须是按照 Ext.Element.applyStyles 类指定格式的合法参数值。

new Ext.Panel({
    title: 'Some Title',
    renderTo: Ext.getBody(),
    width: 400, height: 300,
    layout: 'form',
    items: [{
        xtype: 'textarea',
        style: {
            width: '95%',
            marginBottom: '10px'
        }
    },
        new Ext.Button({
            text: 'Send',
            minWidth: '100',
            style: {
                marginBottom: '10px'
            }
        })
    ]
});
Component
tabTip : String
注: 这个配置只用于当该组件作为TabPanel的一个子项目时使用...

注: 这个配置只用于当该组件作为TabPanel的一个子项目时使用。

一个String类型的innerHTML(支持html标签)，当鼠标放在该选项上的时，显示一个tooltip。为了tips能够被渲染，Ext.QuickTips.init()必须被提前调用。
BoxComponent
target : Mixed
绑定当前快速提示的目标HTMLElement,Ext.Element或者id(默认绑定到document)。
QuickTip
tbar : Object/Array
panel的顶部工具栏。 此参数可以是一个 The top toolbar of the panel. This can be a Ext.Toolbar 对象、一个工具栏配置、或者一个被添加到工具栏的...

panel的顶部工具栏。 此参数可以是一个 The top toolbar of the panel. This can be a Ext.Toolbar 对象、一个工具栏配置、或者一个被添加到工具栏的buttons/button配置数组。 注意，在渲染之后此参数无效。如需在渲染之后访问顶部工具栏，请使用 getTopToolbar。

注意:尽管Toolbar可以包含Field组件，但它们不会 通过加载祖先FormPanel而被更新。Panel的工具栏不是标准Container->Component 层次的一部分，所以它们不会被扫面以收集表单项。但是，这些值还是会 被提交，因为提交表单的参数是从DOM树中收集的。

Panel
tbarCfg : Object
一个DomHelper 元素的配置对象，描述了当前Panel的tbar元素结构。 另请参见...

一个DomHelper 元素的配置对象，描述了当前Panel的tbar元素结构。 另请参见 bodyCfg 。

Panel
title : String
被用作innerHTML的标题文本(接受html标签) ，用来显示在panel的...
被用作innerHTML的标题文本(接受html标签) ，用来显示在panel的 header 中(默认为'')。 当 title 被指定时， header 元素将会被自动创建并显示，除非 header 被显式地设置为 false 。 如果你不在配置时指定一个 title ， 但是你想以后设置，你必须要么 指定一个非空的 title (一个空格' ' 也可以)或者指定 header:true ，这样容器元素将会被创建。
Panel
titleCollapse : Boolean
将会允许通过在顶部工具条的任意地方点击展开和折叠panel(当...
true 将会允许通过在顶部工具条的任意地方点击展开和折叠panel(当 collapsible = true )， false ) 将会只允许通过点击工具按钮进行操作(默认为 false ))。如果当前panel是border布局中的一个子项目，另请参见 BorderLayout.Region floatable 配置项。
Panel
toolTemplate : Ext.Template/Ext.XTemplate
用来在header 元素中创建tools 的模板。默认为:...

用来在header 元素中创建tools 的模板。默认为:

                                    new Ext.Template('<div class="x-tool x-tool-{id}">&#160;</div>')

可以覆盖此参数，以便为基于更复杂XTemplate的tools提供自定义的DOM结构。 模板的数据为一个简单的tool配置对象(不是整个Array)， 它在 tools配置项指定。 在以下例子中，当鼠标滑过tool时，一个<a>标签被用来提供视觉效果:

var win = new Ext.Window({
    tools: [{
        id: 'download',
        href: '/MyPdfDoc.pdf'
    }],
    toolTemplate: new Ext.XTemplate(
        '<tpl if="id==\'download\'">',
            '<a class="x-tool x-tool-pdf" href="{href}"></a>',
        '</tpl>',
        '<tpl if="id!=\'download\'">',
            '<div class="x-tool x-tool-{id}">&#160;</div>',
        '</tpl>'
    ),
    width:500,
    height:300,
    closeAction:'hide'
});

注意，CSS类'x-tool-pdf'必须拥有一个关联的样式规则，它提供了一个适当的背景图片， 例如:

                                a.x-tool-pdf {background-image: url(../shared/extjs/images/pdf.gif)!important;}
Panel
tools : Array
一个工具按钮配置数组，用来添加到头部工具区域。 当渲染之后，每个工具都被存储为一个Element ，被一个叫做...
一个工具按钮配置数组，用来添加到头部工具区域。 当渲染之后，每个工具都被存储为一个Element ，被一个叫做 tools. <tool-type> 的公共参数引用。

每个工具配置都可以包含如下参数:

  • id : String
    必须。需要创建的工具类型。默认情况下，这被指定为一个 CSS类，格式为 x-tool- <tool-type> ，用来形成工具Element。 对于以下列出的工具类型，Ext提供了CSS规则，和一个包含图片的icon对象。 通过提供可选的CSS规则和背景图片，开发者可以实现自定义的工具:
      toggle (当collapsible 为 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
    • tc : Object
      工具配置对象
  • stopEvent : Boolean
    默认为true。指定为false可以允许点击事件进行冒泡。
  • scope : Object
    调用处理函数的作用域。
  • qtip : String/Object
    一个tip字符串，或者一个提供给 Ext.QuickTip.register 的配置参数
  • hidden : Boolean
    True将会在初始化时渲染成隐藏的。
  • on : Object
    一个监听器配置对象，以addListener所需的参数格式 指定事件监听器

注意，当panel被折叠时提供部分固定的工具，这些工具仅仅提供可视按钮。 所有必备的功能，都必须通过添加实现了必备行为的处理函数来实现。

示例用法:

tools:[{
    id:'refresh',
    qtip: 'Refresh form Data',
    // hidden:true,
    handler: function(event, toolEl, panel){
        // refresh logic
    }
},
{
    id:'help',
    qtip: 'Get Help',
    handler: function(event, toolEl, panel){
        // whatever
    }
}]

对于自定义 'help' 的id，定义了两个相应的css类，拥有一个到15x15图片的链接:

                                .x-tool-help {background-image: url(images/help.png);}
.x-tool-help-over {background-image: url(images/help_over.png);}
// if using an image sprite:
.x-tool-help {background-image: url(images/help.png) no-repeat 0 0;}
.x-tool-help-over {background-position:-15px 0;}
Panel
tpl : Mixed
一个 Ext.Template , Ext.XTemplate 或者一个用来形成一个Ext.XTemplate的字符串数组...
一个 Ext.Template , Ext.XTemplate 或者一个用来形成一个Ext.XTemplate的字符串数组。 与 data 和 tplWriteMode 配置项协同使用。
Component
tplWriteMode : String
刷新组件的内容区域时使用的Ext.(X)Template方式。 默认为'overwrite' (参见 Ext.XTemplate.overwrite )。
刷新组件的内容区域时使用的Ext.(X)Template方式。 默认为'overwrite' (参见 Ext.XTemplate.overwrite )。
Component
trackMouse : Boolean
如果为true，当鼠标移过目标元素时，则tooltip会跟随鼠标移动(默认值为 false)。
ToolTip
unstyled : Boolean
覆盖 baseCls 设置为 baseCls = 'x-plain' ， 除了必须的属性之外，它将panel渲染成无样式的...
覆盖 baseCls 设置为 baseCls = 'x-plain' ， 除了必须的属性之外，它将panel渲染成无样式的，以便Ext布局功能能起作用 (例如overflow:hidden)。
Panel
width : Number
组件的宽度(默认值为 auto)。注:如果想使用百分比的方式...
组件的宽度(默认值为 auto)。注:如果想使用百分比的方式来设置值，请查看 Ext.Component.anchor。
Tip
x : Number
如果被包含在一个指定位置的容器中，这个值表示x(left)坐标值。
BoxComponent
xtype : String
需要创建配置的xtype。 当传递一个配置对象给构造函数时...
需要创建配置的xtype。 当传递一个配置对象给构造函数时，此配置选项不会被使用。 只有在使用懒初始化的时候此配置项才会被使用，此时容器的子项目不是 通过一个完整的实例组件，而是通过一个Component配置指定的。 在渲染时，将会查找xtype以决定创建何种类型的子组件。

预定义的xtype列表如下： here。

如果你继承Component创建你自己的组件，你需要使用Ext.ComponentMgr.registerType 对它们进行注册，以便利用懒初始化和渲染机制。
Component
y : Number
如果被包含在一个指定位置的容器中，这个值表示y(top)坐标值。
BoxComponent

公共属性

Property Defined By
body : Ext.Element
Panel的body Element ，可以用来包含HTML内容。 内容可以在...
Panel的body Element ，可以用来包含HTML内容。 内容可以在html 配置项中指定，或者可以使用autoLoad 配置项被加载，或者通过Panel的Updater提供。 只读。

如果这被用来通过任意方式加载可视的HTML元素，那么Panel不可以被用作 一个Layout，用来容纳其它Panel。

如果当前Panel期望被用作一个Layout的宿主 (参见 layout) 那么body元素必须不能被加载或者改变---因为它处于Panel的Layout的控制 之下。

注意: 另请参见 el .

Panel
buttons : Array
Panel的按钮数组，它们从 buttons 配置属性创建。只读。
Panel
bwrap : Ext.Element
Panel的bwrapElement ，用来包含其它Panel元素(tbar, body, bbar, footer)。 参见 bodyCfg。 只读。
Panel
collapsed : Boolean
如果当前panel被折叠为true。只读。
Panel
dd : Ext.dd.DragSource.
如果当前Panel被配置为 draggable ，此参数将会包含一个 Ext.dd.DragSource 实例，它负责处理拖拽Panel...

如果当前Panel被配置为 draggable ，此参数将会包含一个 Ext.dd.DragSource 实例，它负责处理拖拽Panel。

开发者必须提供Ext.dd.DragSource的 抽象方法的实现，用来提供drag/drop过程中的每一步行为。 参见 draggable.
Panel
disabled : Boolean
当前组件处于无效状态时为true。 Read-only.
Component
el : Ext.Element
封装了当前组件的Ext.Element。 Read-only。通常情况下，这将是一个<DIV>元素，它由此类的...

封装了当前组件的Ext.Element。 Read-only。

通常情况下，这将是一个<DIV>元素，它由此类的 onRender方法创建，但是它可以通过使用 autoEl 配置项进行覆盖。

注意: 直到组件渲染完成此元素都将处于无效状态。

如需向当前组件的 DOM事件(而不是当前组件自己的Observable事件)添加监听器， 更多建议，参见 listeners 配置项，或者直接使用一个render监听器:

new Ext.Panel({
    title: 'The Clickable Panel',
    listeners: {
        render: function(p) {
            // Append the Panel to the click handler's argument list.
            p.getEl().on('click', handlePanelClick.createDelegate(null, [p], true));
        },
        single: true  // Remove the listener after first invocation
    }
});

另请参见 getEl

Component
footer : Ext.Element
Panel底部Element 。只读。此元素被用来容纳Panel的...
Panel底部Element 。只读。

此元素被用来容纳Panel的 buttons 或者 fbar 。

注意: 另请参见 el 的注释。

Panel
header : Ext.Element
Panel的headerElement. 只读。此元素被用来容纳 title和 tools...
Panel的headerElement. 只读。

此元素被用来容纳 title和 tools

注意: 另请参见 el 的注释。

Panel
hidden : Boolean
如果当前组件处于隐藏状态，此值为true。Read-only。
Component
initialConfig : Object
当前组件的初始化配置描述。 Read-only。
Component
items : MixedCollection
当前容器中的子组件集合 Ext.util.MixedCollection
Container
ownerCt : Ext.Container
组件所属的Container (默认为undefined，当前组件被添加到一个容器中时此值被自动设置)...
组件所属的Container (默认为undefined，当前组件被添加到一个容器中时此值被自动设置)。 Read-only。

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

Component
private : Object
我们只能在一块可见的区域进行布局。 布局目标*或者它的任何父元素* 为...
我们只能在一块可见的区域进行布局。 布局目标*或者它的任何父元素* 为display:none， 将意味着它没有一块可见的区域。
Container
refOwner : Ext.Container
如果当前组件是一个容器的孩子，并且是通过一个 ref 配置项被注册的，则此值为 ref 引用被插入到的祖先容器。
如果当前组件是一个容器的孩子，并且是通过一个 ref 配置项被注册的，则此值为 ref 引用被插入到的祖先容器。
Component
rendered : Boolean
如果当前组件已经被渲染了，此值为true。Read-only.
Component
triggerElement : DOMElement
配置项被配置时 此target 元素的所有选中子元素将触发各自不同的...
当一个Tooltip的delegate 配置项被配置时 此target 元素的所有选中子元素将触发各自不同的显示事件，触发显示的DOM元素将设置此属性。
ToolTip

公共方法

Method Defined By
QuickTip ( Object config )
创建一个新的Tip
创建一个新的Tip
参数:
  • config : Object
    配置选项
返回值:
  • void
QuickTip
add ( ...Object/Array component ) : Ext.Component/Array
向当前容器中添加 Component(s)。 描述 :在添加之前触发 beforeadd 事件...

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

描述 :

  • 在添加之前触发 beforeadd 事件
  • 将会相应地应用 容器的default config values (细节参见 defaults )。
  • 在组件添加之后触发 add 事件。

注意 :

  • 当调用 add 时如果容器已经被渲染， 你可能需要调用 doLayout 方法来刷新视图，它将导致所有尚未渲染的子组件进行渲染操作。 此操作是必须的，这样你可以 add 多个子组件而只刷新一次layout。 示例用法:

var tb = new Ext.Toolbar();
tb.render(document.body);  // toolbar is rendered
tb.add({text:'Button 1'}); // add multiple items (defaultType for Toolbar is 'button')
tb.add({text:'Button 2'});
tb.doLayout();             // refresh the layout
  • 警告: 使用BorderLayout布局的容器可能不能删除或者添加组件。 更多细节参见BorderLayout 的注释。
参数:
  • component : ...Object/Array

    需要添加的一个或多个组件，或者是一个组件数组。 更多信息参见 items 。

返回值:
  • Ext.Component/Array
    被添加的组件。
Container
addButton ( String/Object config , Function handler , Object scope ) : Ext.Button
向当前panel中添加一个按钮。注意，此方法必须在渲染之前调用。 首选的方式是通过...
向当前panel中添加一个按钮。注意，此方法必须在渲染之前调用。 首选的方式是通过buttons 配置项添加按钮。
参数:
  • config : String/Object
    一个合法的Ext.Button 配置。字符串将会变成默认按钮配置文本，对象将会被看做一个按钮配置对象。
  • handler : Function
    在按钮Ext.Button.click 时被调用的函数
  • scope : Object
    作用域( this 引用)，按钮处理函数将会在其中被执行。默认为Button.
返回值:
  • Ext.Button
    被添加的按钮
Panel
addClass ( string cls ) : Ext.Component
为组件底层的元素添加CSS样式。
为组件底层的元素添加CSS样式。
参数:
  • cls : string
    需要添加的CSS样式的class名称
返回值:
  • Ext.Component
    this
Component
addEvents( Object|String o, string Optional. ) : void
添加指定的事件到事件列表上，事件会被该Observable触发。
添加指定的事件到事件列表上，事件会被该Observable触发。
参数:
  • o : Object|String
    以事件名作为属性true作为值的对象 或者当多个事件名被分开的传递时则为第一个事件名。
  • Optional. : string
    事件名被分开的传递时则为事件名。 用法:
    this.addEvents('storeloaded', 'storecleared');
返回值:
  • void
Observable
addListener( String eventName, Function handler, [Object scope], [Object options] ) : void
给对象添加事件处理器。
给对象添加事件处理器。
参数:
  • eventName : String
    监听的事件名。
  • handler : Function
    事件调用的方法
  • scope : Object
    （可选）处理方法执行的作用域 (this的引用 reference)。 如果被忽略。默认为触发事件的对象。
  • options : Object
    （可选）包含处理器配置和属性的对象。 可能包含以下的属性:
    • scope : Object
      处理方法执行的作用域(this的引用) 。 如果被忽略。默认为触发事件的对象。
    • delay : Number
      在触发事件后延迟调用处理器的毫秒数。
    • single : Boolean
      如果为True则添加一个处理器来处理下一次的事件触发（仅一次），然后移除自己。
    • buffer : Number
      使得处理器延迟指定毫秒数后预定的运行在 一个Ext.util.DelayedTask中 。 如果事件在时间内再一次被触发，原始的处理器不会被调用，但是新的处理器会预定的在他的位置上。
    • target : Observable
      如果事件在目标的Observable上触发则仅仅调用处理器， 否则 事件会从子类的Observable上冒泡

    组合选项
    使用这些选项参数,可能会组合出不同类型的监听器：

    一个延迟的，一次性的监听器。

    myDataView.on('click', this.onClick, this, {
single: true,
delay: 100
});

    一次调用附加多个处理器
    该方法同样支持传递一个包含指定的多个处理器的属性的配置对象参数。

    myGridPanel.on({
'click' : {
    fn: this.onClick,
    scope: this,
    delay: 100
},
'mouseover' : {
    fn: this.onMouseOver,
    scope: this
},
'mouseout' : {
    fn: this.onMouseOut,
    scope: this
}
});

    或者一个简写的语法：

    myGridPanel.on({
'click' : this.onClick,
'mouseover' : this.onMouseOver,
'mouseout' : this.onMouseOut,
 scope: this
});
返回值:
  • void
Observable
applyToMarkup ( String/HTMLElement el ) : void
将此组件添加到已存在的有效的HTML标签中。 使用该方法时，无需再调用render()方法。
将此组件添加到已存在的有效的HTML标签中。 使用该方法时，无需再调用render()方法。
参数:
  • el : String/HTMLElement
返回值:
  • void
Component
bubble ( Function fn , [ Object scope ], [ Array args ] ) : Ext.Container
沿着component/container继承结构进行冒泡， 在每个组件上调用指定的函数。 所调用函数的作用域...
沿着component/container继承结构进行冒泡， 在每个组件上调用指定的函数。 所调用函数的作用域( this)将会是 指定的作用域或者是当前组件。 如果在函数任何一点上返回false，即停止冒泡过程
参数:
  • fn : Function
    需要调用的函数
  • scope : Object
    (可选) 函数的作用域(默认为当前节点)
  • args : Array
    (可选) 调用函数时需要传递的参数( 默认传递当前组件)
返回值:
  • Ext.Container
    this
Container
cancelShow ( String/HTMLElement/Element el ) : void
隐藏一个可见的tip或者取消一个特殊元素即将进行的显示操作。
隐藏一个可见的tip或者取消一个特殊元素即将进行的显示操作。
参数:
  • el : String/HTMLElement/Element
    tip的目标元素。
返回值:
  • void
QuickTip
cascade ( Function fn , [ Object scope ], [ Array args ] ) : Ext.Container
从当前组件(第一个被调用的组件)开始，沿着component/container的继承树向下回溯...
从当前组件(第一个被调用的组件)开始，沿着component/container的继承树向下回溯， 在每个组件上调用指定的方法， 调用方法时的(this)作用域为指定的scope或者为当前组件。 传递给方法的参数为传递进来args或者当前组件。 在起泡的任意一个节点上，如果function返回false，即停止在那个分支上。
参数:
  • fn : Function
    需要调用的函数
  • scope : Object
    (可选)函数的作用域(默认为当前组件)
  • args : Array
    (可选) 调用函数时传递的参数 (默认传递当前组件)
返回值:
  • Ext.Container
    this
Container
cloneConfig ( Object overrides ) : Ext.Component
默认使用原先传递给当前实例的配置值克隆当前组件。
默认使用原先传递给当前实例的配置值克隆当前组件。
参数:
  • overrides : Object
    一个新的配置项，包含需要覆盖到克隆版本的所有属性。 可以传递一个id参数给此对象，否则将自动生成一个新的id以避免发生重复。
返回值:
  • Ext.Component
    当前组件的克隆副本
Component
collapse ( Boolean animate ) : Ext.Panel
折叠panel的body，这样它就变成隐藏的。 触发beforecollapse 事件...
折叠panel的body，这样它就变成隐藏的。 触发beforecollapse 事件，处理函数返回false可以取消折叠操作。
参数:
  • animate : Boolean
    True将会在变换时使用动画效果，其它为false( 默认为panel的animCollapse 配置项的值)
返回值:
  • Ext.Panel
    this
Panel
destroy () : void
通过如下方法销毁对象：删除所有的事件监听器、将组件的元素从DOM树中删除...
通过如下方法销毁对象：删除所有的事件监听器、将组件的元素从DOM树中删除（如果可以）、 将组件从它的 Ext.Container（如果可用）中删除、 并且将它从Ext.ComponentMgr中 注销。 销毁操作一般由框架自动完成，一般情况下不需要直接调用该方法。
参数:
  • 无。
返回值:
  • void
Component
disable () : Ext.Component
将组件置为无效状态，并出发'disable'事件。
将组件置为无效状态，并出发'disable'事件。
参数:
  • 无。
返回值:
  • Ext.Component
    this
Component
doLayout ( [ Boolean shallow ], [ Boolean force ] ) : Ext.Container
强制容器的布局进行重新计算。 在向一个已经渲染的容器中添加...
强制容器的布局进行重新计算。 在向一个已经渲染的容器中添加一个新的组件， 或者改变子组件的尺寸/位置参数之后，必须调用此函数。
参数:
  • shallow : Boolean
    (可选) 设置为true时将仅仅计算当前组件的布局， 并且让子组件在需要时自动计算布局 (默认为flase，它将递归地调用每个子容器的doLayout方法)
  • force : Boolean
    (可选) 设置为true将强制进行布局，即使项目是隐藏的也进行。
返回值:
  • Ext.Container
    this
Container
enable () : Ext.Component
将组件置为有效状态并触发'enable'事件。
将组件置为有效状态并触发'enable'事件。
参数:
  • 无。
返回值:
  • Ext.Component
    this
Component
enableBubble( String/Array events ) :void
是否现在使得事件会被该Observable触发并调用 this.getBubbleTarget()方法在拥有者的继承树...

是否现在使得事件会被该Observable触发并调用 this.getBubbleTarget()方法在拥有者的继承树中冒泡。Observable的基础类中没有该方法的实现。

该方法一般被Ext.Components用来冒泡事件到拥有者的容器。参看Ext.Component.getBubbleTarget默认的实现 在Ext.Component中返回组件的直接拥有者。但是如果需要的是一个已知的目标，该方法可以被重写来更快的访问需求的目标。

例子:

Ext.override(Ext.form.Field, {
    // 添加方法到Field的initComponent上改变事件为冒泡
    initComponent : Ext.form.Field.prototype.initComponent.createSequence(function() {
        this.enableBubble('change');
    }),

    // 我们知道我们想让Field的事件冒泡到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() {
            // 如果样式被修改标题会变红。
            myForm.header.setStyle('color', 'red');
        }
    }
});
参数:
  • events : String/Array
    冒泡的事件名，或事件名数组
返回值:
  • void
Observable
expand ( Boolean animate ) : Ext.Panel
展开panel的body以便让其变得可见。 触发beforeexpand 事件...
展开panel的body以便让其变得可见。 触发beforeexpand 事件，如果它返回false将会取消展开操作。
参数:
  • animate : Boolean
    True将会在变换过程中使用动画效果，否则为false (默认为panel的 animCollapse 配置项的值)
返回值:
  • Ext.Panel
    this
Panel
find ( String prop , String value ) : Array
根据属性查找当前容器中任何层次上的组件
根据属性查找当前容器中任何层次上的组件
参数:
  • prop : String
  • value : String
返回值:
  • Array
    Ext.Component数组
Container
findBy ( Function fn , [ Object scope ] ) : Array
根据一个自定义的函数，查找当前容器中任意层级上的一个组件。 如果传递的函数返回true...
根据一个自定义的函数，查找当前容器中任意层级上的一个组件。 如果传递的函数返回true，组件将会被包含在结果中。 函数将会被用如下参数(component, this container)进行调用。
参数:
  • fn : Function
    需要调用的函数
  • scope : Object
    可选
返回值:
  • Array
    Ext.Component数组
Container
findById ( String id ) : Ext.Component
通过id查找容器中位于任何层级上的组件
通过id查找容器中位于任何层级上的组件
参数:
  • id : String
返回值:
  • Ext.Component
Container
findByType ( String/Class xtype , [ Boolean shallow ] ) : Array
根据xtype或者类型，查找当前容器中任何层级上的组件
根据xtype或者类型，查找当前容器中任何层级上的组件
参数:
  • xtype : String/Class
    组件的xtype字符串，或者直接是组件的class类型
  • shallow : Boolean
    (可选) 此参数为flase时将检查当前组件是否是指定xtype的后裔 (这是默认情况)，或者设置为true， 将检查当前组件是否直接是指定xtype类型（译者注：即指不按照多态性进行检查）。
返回值:
  • Array
    Ext.Component数组
Container
findParentBy ( Function fn ) : Ext.Container
通过自定义的函数查找当前组件上层任何层次上的容器...
通过自定义的函数查找当前组件上层任何层次上的容器。 如果传递的函数返回true，容器对象将被返回。
参数:
  • fn : Function
    自定义的函数，使用如下参数调用(container,this component)。
返回值:
  • Ext.Container
    自定义函数返回true的第一个容器
Component
findParentByType ( String/Class xtype ) : Ext.Container
通过xtype或者class查找当前组件上层任何层次上的容器
通过xtype或者class查找当前组件上层任何层次上的容器
参数:
  • xtype : String/Class
    组件的xtype字符串，或者直接是组件的class
返回值:
  • Ext.Container
    符合指定xtype或者class的第一个容器
Component
fireEvent( String eventName, Object... args ) : Boolean
用传入的参数触发指定的事件 (减去事件名)。 一个事件可以被设置为冒泡 Obse...

用传入的参数触发指定的事件 (减去事件名)。

一个事件可以被设置为冒泡到Observable父类继承树(参看 Ext.Component.getBubbleTarget) 调用enableBubble实现。

参数:
  • eventName : String
    触发的事件名。
  • args : Object...
    传递给处理器的可变长度参数。
返回值:
  • Boolean
    如果有任何的处理器返回false则返回false，否则返回true。
Observable
focus ( [ Boolean selectText ], [ Boolean/Number delay ] ) : Ext.Component
尝试将当前组件设为焦点。
尝试将当前组件设为焦点。
参数:
  • selectText : Boolean
    (可选) 如果可用，同时选中组件内部的文本
  • delay : Boolean/Number
    (可选)将当前组件设置为焦点的延迟时间(设置为true等于0毫秒)
返回值:
  • Ext.Component
    this
Component
get ( String/Number key ) : Ext.Component
获取当前容器包含的一个组件( items.get(key)方法的别名)
获取当前容器包含的一个组件( items.get(key)方法的别名)
参数:
  • key : String/Number
    组件的索引
返回值:
  • Ext.Component
    Ext.Component
Container
getBottomToolbar () : Ext.Toolbar
返回panel底部区域toolbar ( bbar )。
返回panel底部区域toolbar ( bbar )。
参数:
  • 无。
返回值:
  • Ext.Toolbar
    toolbar
Panel
getBox ( [ Boolean local ] ) : Object
获取组件底层元素当前盒子模型的尺寸。（译者注：盒子模型是CSS术语，详细解释请自行搜索。）
获取组件底层元素当前盒子模型的尺寸。（译者注：盒子模型是CSS术语，详细解释请自行搜索。）
参数:
  • local : Boolean
    (可选)值为true时，组件的left值和top值将代替页面的XY被返回。(默认值为false)
返回值:
  • Object
    返回值的格式{x, y, width, height}
BoxComponent
getBubbleTarget () : Ext.Container
为Observable的fireEvent方法提供链接，它沿着继承结构进行冒泡操作。
为Observable的fireEvent方法提供链接，它沿着继承结构进行冒泡操作。
参数:
  • 无。
返回值:
  • Ext.Container
    拥有当前组件的容器。
Component
getComponent ( String/Number comp ) : Ext.Component
检查当前容器的 items property 并且获取当前容器的一个直接的子组件。
检查当前容器的 items property 并且获取当前容器的一个直接的子组件。
参数:
  • comp : String/Number
    参数可以是以下任何值：
    • 一个 String : 代表子组件的 itemId 或者 id
    • 一个 Number : 代表子组件在 items property 中的位置

    其它信息参见 Ext.util.MixedCollection.get。

返回值:
  • Ext.Component
    组件(如果有找到)。
Container
getEl () : Ext.Element
返回 Ext.Element ，它包装了当前组件。...

返回 Ext.Element ，它包装了当前组件。

通常情况下，这将是一个<DIV>元素，它是由该类的onRender方法创建的， 但是可以使用autoEl配置项 覆盖它。

注意: 此元素将会一直处于无效状态直到当前组件渲染完成。

如需向当前组件的 DOM事件(而不是当前组件自己的Observable事件)添加监听器， 更多建议，参见 listeners 配置项，或者直接使用一个render监听器:

new Ext.Panel({
    title: 'The Clickable Panel',
    listeners: {
        render: function(p) {
            // Append the Panel to the click handler's argument list.
            p.getEl().on('click', handlePanelClick.createDelegate(null, [p], true));
        },
        single: true  // Remove the listener after first invocation
    }
});
参数:
  • 无。
返回值:
  • Ext.Element
    包装当前组件的元素。
Component
getFooterToolbar () : Ext.Toolbar
返回panel底部( fbar )区域的toolbar
返回panel底部( fbar )区域的toolbar
参数:
  • 无。
返回值:
  • Ext.Toolbar
    toolbar
Panel
getFrameHeight () : Number
返回当前panel框架元素的高度像素值 (包括所有top和bottom工具栏以及header和footer元素...
返回当前panel框架元素的高度像素值 (包括所有top和bottom工具栏以及header和footer元素， 但是不包括body高度)。 如需获取body高度，参见 getInnerHeight.
参数:
  • 无。
返回值:
  • Number
    框架高度
Panel
getFrameWidth () : Number
返回当前panel框架元素的宽度像素值 (不包含body宽度)。如需获得body宽度，参见...
返回当前panel框架元素的宽度像素值 (不包含body宽度)。如需获得body宽度，参见 getInnerWidth。
参数:
  • 无。
返回值:
  • Number
    框架宽度
Panel
getHeight () : Number
获取该组件的当前高度值。
获取该组件的当前高度值。
参数:
  • 无。
返回值:
  • Number
BoxComponent
getId () : String
返回当前组件的id，如果没有定义id，则自动生成并返回一个id:'ext-comp-'...
返回当前组件的 id 如果没有定义 id 则自动生成并返回一个 id

'ext-comp-' + (++Ext.Component.AUTO_ID)
参数:
  • 无。
返回值:
  • String
    id
Component
getInnerHeight () : Number
返回body元素的高度像素值(不包括任何框架元素的高度)。 对于框架高度参见...
返回body元素的高度像素值(不包括任何框架元素的高度)。 对于框架高度参见 getFrameHeight。
参数:
  • 无。
返回值:
  • Number
    body高度
Panel
getInnerWidth () : Number
返回body元素宽度像素值(不包含任何框架元素的宽度)。 对于框架宽度，参见 getFrameWidth。
返回body元素宽度像素值(不包含任何框架元素的宽度)。 对于框架宽度，参见 getFrameWidth。
参数:
  • 无。
返回值:
  • Number
    body宽度
Panel
getItemId () : String
返回当前组件的 itemId 。 如果没有通过配置参数指定 itemId 那么，将会使用...
返回当前组件的 itemId 。 如果没有通过配置参数指定 itemId 那么，将会使用 getId 返回 id 。
参数:
  • 无。
返回值:
  • String
Component
getLayout () : ContainerLayout
返回容器当前使用的布局管理器。 如果容器当前没有设置布局管理器， 将会创建一个默认的...
返回容器当前使用的布局管理器。 如果容器当前没有设置布局管理器， 将会创建一个默认的 Ext.layout.ContainerLayout 并被设置为容器的布局管理器。
参数:
  • 无。
返回值:
  • ContainerLayout
    容器的布局管理器
Container
getLayoutTarget () : Ext.Element
返回当前容器中用来包含子组件的元素。提供了一个 可以返回容器的...

返回当前容器中用来包含子组件的元素。

提供了一个 可以返回容器的Element 的实现， 但是，如果容器有更复杂的结构， 可以覆盖此实现以返回 layout 在其中渲染子组件的元素。

参数:
  • 无。
返回值:
  • Ext.Element
    在其中渲染子组件的元素。
Container
getOuterSize () : Object
获取当前组件所在元素的尺寸大小，包括边缘的空白处。
获取当前组件所在元素的尺寸大小，包括边缘的空白处。
参数:
  • 无。
返回值:
  • Object
    一个包含元素大小的对象 {width: (element width + left/right margins), height: (element height + top/bottom margins)}
BoxComponent
getPosition ( [ Boolean local ] ) : Array
获取组件底层元素当前的XY位置。
获取组件底层元素当前的XY位置。
参数:
  • local : Boolean
    (可选)如果为true，将返回元素的left和top值，而不是相对于页面内的 XY。(默认值为 false)
返回值:
  • Array
    元素的XY位置值(例如：[100, 200])
BoxComponent
getResizeEl () : Ext.Element
返回该组件的最外层用来定义这些组件整体大小的Element...

返回该组件的最外层用来定义这些组件整体大小的Element对象。

通常用 getEl 方法将会返回相同的Element对象，但在有些情况下，组件可能有一些更多的封装了它的主要动态Element对象的Element对象。

例如ComboBox。它是封装在一个包含<input>元素的包装元素里(这将返回其 getEl方法和触发按钮的元素)。返回的元素为resizeEl。

参数:
  • 无。
返回值:
  • Ext.Element
    The Element which is to be resized by size managing layouts.
BoxComponent
getSize () : Object
获取组件底层元素当前的大小。
获取组件底层元素当前的大小。
参数:
  • 无。
返回值:
  • Object
    一个包含元素大小的对象{width: (element width), height: (element height)}
BoxComponent
getTool ( String id ) : Object
根据id获取一个tool.
根据id获取一个tool.
参数:
  • id : String
返回值:
  • Object
    tool
Panel
getTopToolbar () : Ext.Toolbar
返回panel顶部区域的 toolbar ( tbar ).
返回panel顶部区域的 toolbar ( tbar ).
参数:
  • 无。
返回值:
  • Ext.Toolbar
    toolbar
Panel
getUpdater () : Ext.Updater
获取当前panel的 Ext.Updater .让你可以为当前panel的body执行Ajax更新。
获取当前panel的 Ext.Updater .让你可以为当前panel的body执行Ajax更新。
参数:
  • 无。
返回值:
  • Ext.Updater
    Updater
Panel
getWidth () : Number
获取该组件的当前宽度值。
获取该组件的当前宽度值。
参数:
  • 无。
返回值:
  • Number
BoxComponent
getXType () : String
获取当前组件的xtype，它是用 Ext.ComponentMgr 注册的。 所有可用的xtype列表，参见...
获取当前组件的xtype，它是用 Ext.ComponentMgr 注册的。 所有可用的xtype列表，参见 Ext.Component 类头部。示例用法:

var t = new Ext.form.TextField();
alert(t.getXType());  // alerts 'textfield'
参数:
  • 无。
返回值:
  • String
    The xtype
Component
getXTypes () : String
返回此组件的xtype继承树，用字符'-'分隔。 所有可用的xtype值...

返回此组件的xtype继承树，用字符'-'分隔。 所有可用的xtype值，请参见Ext.Component 类的头部。

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

示例用法:

var t = new Ext.form.TextField();
alert(t.getXTypes());  // alerts 'component/box/field/textfield'
参数:
  • 无。
返回值:
  • String
    xtype层次字符串
Component
hasListener( String eventName ) : Boolean
检测对象是否包含指定事件的任何监听器
检测对象是否包含指定事件的任何监听器
参数:
  • eventName : String
    检测的事件名
返回值:
  • Boolean
    如果事件被监听则为true，否则为false
Observable
hide () : Ext.Component
隐藏当前组件。 监听 beforehide' 事件并且返回false 可以取消隐藏组件的操作。 在隐藏组件之后触发...
隐藏当前组件。 监听 beforehide' 事件并且返回false 可以取消隐藏组件的操作。 在隐藏组件之后触发 ' hide' 事件。 如果组件被配置成 hidden 那么此方法在内部被调用。
参数:
  • 无。
返回值:
  • Ext.Component
    this
ToolTip
initTarget( Mixed t ) : void
将此Tooltip绑定到指定的元素上。Tooltip会在鼠标移至该元素上时显示。
将此Tooltip绑定到指定的元素上。Tooltip会在鼠标移至该元素上时显示。
参数:
  • t : Mixed
    绑定到的 Element, HtmlElement,或元素的ID
返回值:
  • void
ToolTip
insert ( Number index , Ext.Component component ) : Ext.Component
在当前容器的指定索引处插入一个组件。 在插入之前触发...
在当前容器的指定索引处插入一个组件。 在插入之前触发 beforeadd 事件， 然后在组件被插入之后触发 add 事件。
参数:
  • index : Number
    组件会被插入到容器子项集合中时的索引位置
  • component : Ext.Component
    需要插入的子组件。

    Ext使用懒渲染，只有在必要的时候才会渲染插入的组件。

    如果使用懒渲染，可以传递一个组件配置对象以避免创建一个真实组件的开销， 这意味着，插入的组件不会立即被渲染。 为了利用这个“懒初始化”('lazy instantiation')， 必须把组件设置为它注册的 Ext.Component.xtype 值。

    所有可用的xtype列表，参见 Ext.Component。
返回值:
  • Ext.Component
    使用容器默认配置值插入的组件(或者配置对象)。
Container
isVisible () : Boolean
如果当前组件可见，返回true。
如果当前组件可见，返回true。
参数:
  • 无。
返回值:
  • Boolean
    如果当前组件可见，返回true，其它返回false。
Component
isXType ( String xtype , [ Boolean shallow ] ) : Boolean
Tests whether or not this Component is of a specific xtype. This can test whether this Component is descended from th...

测试此组件是否是指定的xtype。此方法既可以测试是否是指定的xtype的某个子类， 或者它是否直接是指定的xtype类(shallow=true)。

如果使用你自己的子类，必须知道组件必须注册它的xtype值。

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

示例用法:

var t = new Ext.form.TextField();
var isText = t.isXType('textfield');        // true
var isBoxSubclass = t.isXType('box');       // true, descended from BoxComponent
var isBoxInstance = t.isXType('box', true); // false, not a direct BoxComponent instance
参数:
  • xtype : String
    需要为当前组件进行检测的xtype
  • shallow : Boolean
    (可选) 如果为false，检测组件是否是xtype继承树中的某个子类（默认是这种情况）， 如果为true，只检测组件是否是指定的xtype类型。
返回值:
  • Boolean
    如果当前组件是指定xtype的子类，返回true，其它返回flase。
Component
load ( Object/String/Function config ) : Ext.Panel
立即使用XHR返回的内容装载当前panel的内容。
立即使用XHR返回的内容装载当前panel的内容。
参数:
  • config : Object/String/Function
    一个包含任何如下选项的配置对象:
    panel.load({
    url: 'your-url.php',
    params: {param1: 'foo', param2: 'bar'}, // or a URL encoded string
    callback: yourFunction,
    scope: yourObject, // optional scope for the callback
    discardUrl: false,
    nocache: false,
    text: 'Loading...',
    timeout: 30,
    scripts: false
});
    唯一的必须参数是url。 可选的nocache、text和script参数是 disableCaching、indicatorText和loadScripts的快捷方式， 它们被用来设置到当前panel的Updater实例所绑定的 属性上。
返回值:
  • Ext.Panel
    this
Panel
mon ( Observable|Element item , Object|String ename , Function fn , Object scope , Object opt ) : void
向任何Observable对象(或者元素)上添加监听器，监听器将会在组件...

向任何Observable对象(或者元素)上添加监听器，监听器将会在组件销毁时被自动删除。
用法：

myGridPanel.mon(myGridPanel.getSelectionModel(), 'selectionchange', handleSelectionChange, null, {buffer: 50});

or:

myGridPanel.mon(myGridPanel.getSelectionModel(), {
    selectionchange: handleSelectionChange,
    buffer: 50
});
参数:
  • item : Observable|Element
    需要添加listener/listeners的项目。
  • ename : Object|String
    事件名，或者一个包含事件名属性的对象。
  • fn : Function
    (可选) 如果 ename 参数是一个事件名，此参数为处理函数。
  • scope : Object
    (可选)如果 ename 参数是一个事件名称，此参数是作用域 ( this 引用)，监听函数将会在此作用域中被执行。
  • opt : Object
    (可选)如果 ename 参数是一个事件名称， 此参数是 addListener 配置项。
返回值:
  • void
Component
mun ( Observable|Element item , Object|String ename , Function fn , Object scope ) : void
删除通过mon 方法添加的监听器。
删除通过mon 方法添加的监听器。
参数:
  • item : Observable|Element
    需要删除listener/listeners的项目。
  • ename : Object|String
    事件名称，或者一个包含事件名称属性的对象。
  • fn : Function
    (可选)如果 ename 参数是一个事件名称，此参数是一个处理函数。
  • scope : Object
    (可选)如果 ename 参数是一个事件名称，此参数是作用域 ( this 引用)，监听函数将会在此作用域中被执行。
返回值:
  • void
Component
nextSibling () : Ext.Component
返回所属容器中的下一个组件
返回所属容器中的下一个组件
参数:
  • 无。
返回值:
  • Ext.Component
Component
on( String eventName, Function handler, [Object scope], [Object options] ) : void
给对象添加事件处理器 (addListener的简写形式)
给对象添加事件处理器 (addListener的简写形式。)
参数:
  • eventName : String
    监听的事件类型
  • handler : Function
    事件调用的方法
  • scope : Object
    （可选）处理方法执行时的作用域 (this 的引用)。 如果被忽略。默认为触发事件的对象。
  • options : Object
    可选 包含处理器配置的对象。
返回值:
  • void
Observable
previousSibling () : Ext.Component
返回所属容器中的前一个组件
返回所属容器中的前一个组件
参数:
  • 无。
返回值:
  • Ext.Component
Component
purgeListeners() : void
移除对象上所有的监听器
移除对象上所有的监听器
参数:
  • 无。
返回值:
  • void
Observable
register ( Object config ) : void
配置一个新的快速提示实例并且将它分配到一个目标元素上。 支持如下配置值(示例用法参见...
配置一个新的快速提示实例并且将它分配到一个目标元素上。 支持如下配置值(示例用法参见 Ext.QuickTips 类头部):
  • autoHide
  • cls
  • dismissDelay (overrides the singleton value)
  • target (required)
  • text (required)
  • title
  • width
参数:
  • config : Object
    配置对象
返回值:
  • void
QuickTip
relayEvents( Object o, Array events ) : void
从指定的Observable上传递选择的事件就好像被当前对象触发一样。
从指定的Observable上传递选择的事件就好像被当前对象触发一样。
参数:
  • o : Object
    该Observable上的事件被当前对象传递。
  • events : Array
    传递的数组名。
返回值:
  • void
Observable
remove ( Component/String component , [ Boolean autoDestroy ] ) : Ext.Component
从当前容器中移除一个组件。 在移除之前触发 beforeremove 事件， 然后在组件被移除之后触发...
从当前容器中移除一个组件。 在移除之前触发 beforeremove 事件， 然后在组件被移除之后触发 remove 事件。
参数:
  • component : Component/String
    需要移除的组件引用或者id
  • autoDestroy : Boolean
    (可选) 设置为true将自动调用被删组件的 Ext.Component.destroy 函数。 默认为容器的 autoDestroy 配置值。
返回值:
  • Ext.Component
    被移除的组件。
Container
removeAll ( [ Boolean autoDestroy ] ) : Array
从当前容器中删除所有组件。
从当前容器中删除所有组件。
参数:
  • autoDestroy : Boolean
    (可选) 此参数为true时将自动调用 被删组件的 Ext.Component.destroy 方法。 默认为当前容器的 autoDestroy 配置值。
返回值:
  • Array
    被销毁的组件数组
Container
removeClass ( string cls ) : Ext.Component
从组件底层的元素上删除一个CSS类。
从组件底层的元素上删除一个CSS类。
参数:
  • cls : string
    需要移除的CSS类名
返回值:
  • Ext.Component
    this
Component
removeListener( String eventName, Function handler, [Object scope] ) : void
删除一个事件处理器。
删除一个事件处理器。
参数:
  • eventName : String
    处理器关联的事件类型。
  • handler : Function
    移除的处理器。 这应该是传递到addListener里的方法的引用。
  • scope : Object
    （可选）处理器指定的初始作用域。
返回值:
  • void
Observable
render ( [ Element/HTMLElement/String container ], [ String/Number position ] ) : void
在传递进来的HTML元素中渲染当前组件。...

在传递进来的HTML元素中渲染当前组件。

如果你正在使用一个Container 对象放置当前组件，那么请不要使用render方法。

当容器第一次被渲染时，它的子组件将会被容器的 layout 管理器渲染。

某些布局管理器允许动态添加子组件。它们包括 Ext.layout.CardLayout, Ext.layout.AnchorLayout, Ext.layout.FormLayout, Ext.layout.TableLayout。

当一个新的子组件被添加时，如果容器已经被渲染了， 你可能需要调用容器的 doLayout 方法来刷新视图，它将导致所有没有被渲染的子组件进行渲染操作。 此操作是必须的，这样你可以添加多个子组件而只刷新一次layout。

当创建复杂的UI时，非常重要的一点是，请记住调整子项目的尺寸和位置是容器的 layout 管理器的职责。 如果你希望子项目的尺寸对用户交互作出反应， 你必须为容器配置一个布局管理器，它将创建和管理你心里想要的那种布局。

忽略容器的layout 配置意味着将会使用一个基本的布局管理器，它除了按次序把子组件 渲染到容器中之外什么事情都不做。 这种情况下，任何尺寸和位置的调整操作都不会发生。

参数:
  • container : Element/HTMLElement/String
    (可选) 需要在其中渲染当前组件的元素。 如果它是从一个已存在的标签中创建的，此参数应该被忽略。
  • position : String/Number
    (可选) 容器中的一个元素ID或者一个DOM节点索引， 当前组件将会被插入到它前面 (默认append到容器的尾部)
返回值:
  • void
Component
resumeEvents() : void
重新开始触发事件。(参见suspendEvents) 如果事件以queueSuspended参数被挂起，则在事件被挂起时 ...
重新开始触发事件。(参见 suspendEvents) 如果事件以queueSuspended 参数被挂起，则在事件被挂起时触发的事件会被传递到所有的监听器上
参数:
  • 无。
返回值:
  • void
Observable
setAutoScroll ( Boolean scroll ) : Ext.BoxComponent
设置该组件内容溢出时是否自动显示滚动条。
设置该组件内容溢出时是否自动显示滚动条。
参数:
  • scroll : Boolean
    值为true的话组件自动显示滚动条。
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setDisabled ( Boolean disabled ) : Ext.Component
工具函数，使用布尔值设置有效/无效(disabled/enabled )。
工具函数，使用布尔值设置有效/无效(disabled/enabled )。
参数:
  • disabled : Boolean
返回值:
  • Ext.Component
    this
Component
setHeight ( Mixed height ) : Ext.BoxComponent
设置此组件的高度。该方法将触发resize事件。
设置此组件的高度。该方法将触发resize事件。
参数:
  • height : Mixed
    The new height to set.
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setIconClass ( String cls ) : void
设置CSS类，为当前panel提供图标图片。 如果已经设置了...
设置CSS类，为当前panel提供图标图片。 如果已经设置了，此方法将会替换任何现有的图标类并在完成之后触发 iconchange 事件。
参数:
  • cls : String
    新的CSS类名
返回值:
  • void
Panel
setPagePosition ( Number x , Number y ) : Ext.BoxComponent
设置组件在页面中的XY位置。 如果需要设置left和top值 ，请使用...
设置组件在页面中的XY位置。 如果需要设置left和top值 ，请使用setPosition方法。 该方法触发move事件。
参数:
  • x : Number
    The new x position
  • y : Number
    The new y position
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setPosition ( Number left , Number top ) : Ext.BoxComponent
设置组件的left和top值。设置组件的页面XY值，请使用setPagePosition方法。该方法触发...
设置组件的left和top值。设置组件的页面XY值，请使用setPagePosition方法。该方法触发move事件。
参数:
  • left : Number
    The new left
  • top : Number
    The new top
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setSize ( Mixed width , Mixed height ) : Ext.BoxComponent
设置BoxComponent的宽度和高度。 此方法触发resize事件...
设置BoxComponent的宽度和高度。 此方法触发resize事件。此方法可以接收单独的width或者height值作为参数， 或者你可以传递像这样的一个size对象： {width:10, height:20} 。
参数:
  • width : Mixed
    设置的新的width值。这可以是：
    • 一个Number类型指定Element新的宽度 Ext.Element.defaultUnit(默认为像素 :'px')。
    • 一个String类型用于设置width的CSS样式。
    • 一个size对象格式为 {width: widthValue, height: heightValue} 。
    • 值为 undefined 时，保留原来的width不变。
  • height : Mixed
    设置的新的height值(如果第一个参数传递了一个size对象，此参数没有必要传递)。这可以是：
    • 一个Number类型指定Element新的高度 Ext.Element.defaultUnit(默认为像素 :'px')。
    • 一个String类型用于设置height的CSS样式。也有可能不会被使用到。
    • 值为 undefined 时，保留原来的height不变。
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setTitle ( String title , [ String iconCls ] ) : void
为panel设置标题文本，也可选择设置 icon class。...

为panel设置标题文本，也可选择设置 icon class。

为了能够设置标题，必须已经为Panel创建了一个header元素。 要么通过向Panel上注册一个非空的 title ，或者配置 header: true ，可触发此操作(译者注：指为Panel创建header元素)。

参数:
  • title : String
    需要设置的标题文本
  • iconCls : String
    (可选) iconCls 一个用户定义的CSS类，为当前panel提供图标图片。
返回值:
  • void
Panel
setVisible ( Boolean visible ) : Ext.Component
工具方法，通过使用布尔值隐藏或者显示当前组件。
工具方法，通过使用布尔值隐藏或者显示当前组件。
参数:
  • visible : Boolean
    true时显示，false时隐藏
返回值:
  • Ext.Component
    this
Component
setWidth ( Mixed width ) : Ext.BoxComponent
设置组件的宽度。 此方法触发resize事件。
设置组件的宽度。 此方法触发resize事件。
参数:
  • width : Mixed
    The new width to set.
返回值:
  • Ext.BoxComponent
    this
BoxComponent
show () : Ext.Component
显示当前组件。监听' beforeshow' 事件，返回 false 取消显示组件...
显示当前组件。监听' beforeshow' 事件，返回 false 取消显示组件。在显示组件之后触发' show' 事件。
参数:
  • 无。
返回值:
  • Ext.Component
    this
ToolTip
showAt ( Array xy ) : void
在指定的XY位置显示当前tip。示例用法:
// 在x:50 和 y:100位置处显示tip
tip.showAt([50,100]);
在指定的XY位置显示当前tip。示例用法:
// 在x:50 和 y:100位置处显示tip
tip.showAt([50,100]);
参数:
  • xy : Array
    一个包含x和y坐标的数组
返回值:
  • void
Tip
showBy ( Mixed el , [ String position ] ) : void
实验性参数。 根据标准的Ext.Element.alignTo 位置值，在与其它元素相关的位置显示当前...
实验性参数。 根据标准的Ext.Element.alignTo 位置值，在与其它元素相关的位置显示当前tip。示例用法:
// 在默认位置显示tip('tl-br?')
tip.showBy('my-el');

// 将tip的左上角对齐显示到元素的右上角
tip.showBy('my-el', 'tl-tr');
参数:
  • el : Mixed
    需要对齐到的一个HTMLElement、Ext.Element或者目标元素的字符串id
  • position : String
    (可选) 一个有效的Ext.Element.alignTo 锚定位置(如果不指定，默认为'tl-br?'或者 defaultAlign )。
返回值:
  • void
Tip
suspendEvents( Boolean queueSuspended ) : void
暂停触发所有的事件。 (参看resumeEvents)
暂停触发所有的事件。（参看 resumeEvents)
参数:
  • queueSuspended : Boolean
    如果传递为true则排列好暂停的事件使得在调用 resumeEvents 后再触发它们，而不是抛弃所有暂停的事件。
返回值:
  • void
Observable
syncSize () : Ext.BoxComponent
强制组件的大小按照此组件底层元素当前的高度和宽度计算。
强制组件的大小按照此组件底层元素当前的高度和宽度计算。
参数:
  • 无。
返回值:
  • Ext.BoxComponent
    this
BoxComponent
toggleCollapse ( Boolean animate ) : Ext.Panel
根据panel的当前状态，执行expand或者 collapse操作 的快捷方式。
根据panel的当前状态，执行expand或者 collapse操作 的快捷方式。
参数:
  • animate : Boolean
    True将会在转换过程中使用动画效果，否则为false (默认为panel的animCollapse 配置项的值)
返回值:
  • Ext.Panel
    this
Panel
un( String eventName, Function handler, [Object scope] ) : void
删除一个事件处理器(removeListener方法的简写形式)
删除一个事件处理器(removeListener方法的简写形式。)
参数:
  • eventName : String
    处理器关联的事件类型
  • handler : Function
    被删除的处理器 这应该是传入 addListener 中的方法的引用。
  • scope : Object
    （可选）为处理器指定的初始作用域。
返回值:
  • void
Observable
unregister ( String/HTMLElement/Element el ) : void
从元素上删除当前quick tip并销毁。
从元素上删除当前quick tip并销毁。
参数:
  • el : String/HTMLElement/Element
    需要从其上删除quick tip的元素。
返回值:
  • void
QuickTip
update ( Mixed htmlOrData , [ Boolean loadScripts ], [ Function callback ] ) : void
刷新组件的内部区域。
刷新组件的内部区域。
参数:
  • htmlOrData : Mixed
    如果已经通过tpl为当前组件配置了一个模板，那么 将会使用此参数来装配模板。 如果没有为当前组件配置模板，组件的内容区域将会通过Ext.Element 进行刷新。
  • loadScripts : Boolean
    (可选)只用在使用html配置时此参数才合法。默认为false。
  • callback : Function
    (可选)只用在使用html配置时此参数才合法。 当脚本加载完成时回调函数才被执行。
返回值:
  • void
Component
updateBox ( Object box ) : Ext.BoxComponent
设置此组件底层元素的盒子模型尺寸。(译者注：盒子模型是CSS术语，详细资料请自行搜索。)
设置此组件底层元素的盒子模型尺寸。(译者注：盒子模型是CSS术语，详细资料请自行搜索。)
参数:
  • box : Object
    一个格式为{x, y, width, height}的对象
返回值:
  • Ext.BoxComponent
    this
BoxComponent

公共事件

Event Defined By
activate : ( Ext.Panel p )
当Panel被设置为视觉活动状态之后触发。 注意Panel不直接支持活动状体，但是Panel的一些子类...
当Panel被设置为视觉活动状态之后触发。 注意Panel不直接支持活动状体，但是Panel的一些子类 (例如 Ext.Window)支持。 作为TabPanel子组件的Panel，在TabPanel的控制之下触发activate和deactivate事件。
监听器将会以如下参数格式被调用:
  • p : Ext.Panel
    被激活的Panel.
Panel
add : ( Ext.Container this , Ext.Component component , Number index )
监听器将会被使用如下的参数被调用:
  • this : Ext.Container
  • component : Ext.Component
    被添加的组件
  • index : Number
    将组件添加到容器子组件集合时的位置索引
Container
added : ( Ext.Component this , Ext.Container ownerCt , number index )
当一个组件被添加到一个Ext.Container时触发
当一个组件被添加到一个Ext.Container时触发
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • ownerCt : Ext.Container
    用于组件的容器
  • index : number
    添加组件的位置
Component
afterlayout : ( Ext.Container this , ContainerLayout layout )
当容器中的组件被指定的布局管理器排列的时候触发。
当容器中的组件被指定的布局管理器排列的时候触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Container
  • layout : ContainerLayout
    为当前容器提供的ContainerLayout实现
Container
afterrender : ( Ext.Component this )
在组件渲染完成之后触发...

在组件渲染完成之后触发。

afterrender事件在当前组件被rendered 结束之后、在为组件定义的所有afterRender方法执行之后 触发，并且，如果有stateful， 也在状态被保存之后才触发。

监听器将会以如下参数格式被调用:
  • this : Ext.Component
Component
beforeadd : ( Ext.Container this , Ext.Component component , Number index )
在任何 Ext.Component 被添加或者插入到容器中之前触发。 事件处理器可以返回false取消添加操作。
在任何 Ext.Component 被添加或者插入到容器中之前触发。 事件处理器可以返回false取消添加操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Container
  • component : Ext.Component
    被添加的组件
  • index : Number
    组件被添加到容器子项目集合中时的索引位置
Container
beforeclose : ( Ext.Panel p )
在Panel被关闭之前触发。 注意，Panel不直接支持关闭操作，但是Panel的一些子类(例如...
在Panel被关闭之前触发。 注意，Panel不直接支持关闭操作，但是Panel的一些子类(例如 Ext.Window) ，或者一个位于Ext.TabPanel中的Panel支持。 此事件仅被应用到这些子类中。处理函数可以返回false以取消关闭操作。
监听器将会以如下参数格式被调用:
  • p : Ext.Panel
    正在被关闭的Panel.
Panel
beforecollapse : ( Ext.Panel p , Boolean animate )
在Panel被折叠之前触发。监听器可以返回false取消折叠。
在Panel被折叠之前触发。监听器可以返回false取消折叠。
监听器将会以如下参数格式被调用:
  • p : Ext.Panel
    被折叠的Panel
  • animate : Boolean
    如果折叠操作使用了动画效果，此参数为true，其它为false
Panel
beforedestroy : ( Ext.Component this )
在组件 destroyed 之前触发。 在事件监听器中返回false以停止 destroy 操作。
在组件 destroyed 之前触发。 在事件监听器中返回false以停止 destroy 操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforeexpand : ( Ext.Panel p , Boolean animate )
在Panel被展开之前触发。监听器可以返回false取消展开操作。
在Panel被展开之前触发。监听器可以返回false取消展开操作。
监听器将会以如下参数格式被调用:
  • p : Ext.Panel
    被展开的Panel
  • animate : Boolean
    如果展开操作使用动画效果，为true，其它为false
Panel
beforehide : ( Ext.Component this )
在调用hide方法隐藏组件之前触发。 在事件监听器中返回false可以停止隐藏操作。
在调用hide方法隐藏组件之前触发。 在事件监听器中返回false可以停止隐藏操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforeremove : ( Ext.Container this , Ext.Component component )
从容器中删除任何Ext.Component 之前触发。 处理器可以返回false取消remove操作。
从容器中删除任何Ext.Component 之前触发。 处理器可以返回false取消remove操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Container
  • component : Ext.Component
    被删除的组件
Container
beforerender : ( Ext.Component this )
在组件被rendered 之前触发。 在事件监听器中返回false可以停止render 操作。
在组件被rendered 之前触发。 在事件监听器中返回false可以停止render 操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforeshow : ( Ext.Component this )
在调用show()方法现实组件之前触发。 事件处理函数返回false可以停止show。
在调用show 方法现实组件之前触发。 事件处理函数返回false可以停止show。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforestaterestore : ( Ext.Component this , Object state )
在组件状态恢复之前触发。返回false停止恢复状态操作。
在组件状态恢复之前触发。返回false停止恢复状态操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    StateProvider返回的状态哈希值。 如果没有禁止此事件，那么状态对象会被传递给applyState。 默认情况下，这样简单地把属性值拷贝到当前组件中。 可以覆盖此方法以提供自定的状态恢复操作。
Component
beforestatesave : ( Ext.Component this , Object state )
在组件状态被保存到配置的状态提供者之前触发。 返回false可以停止保存。
在组件状态被保存到配置的状态提供者之前触发。 返回false可以停止保存。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    状态值哈希。 这由在组件上调用getState() 方法决定。 此方法必须由开发者提供，返回是否需要对状态进行描述，默认情况下， Ext.Component有一个空实现。
Component
bodyresize : ( Ext.Panel p , Number width , Number height )
在Panel被调整尺寸之后触发。
在Panel被调整尺寸之后触发。
监听器将会以如下参数格式被调用:
  • p : Ext.Panel
    被调整尺寸的Panel
  • width : Number
    Panel body的新宽度。
  • height : Number
    Panel body的新高度。
Panel
close : ( Ext.Panel p )
在Panel被关闭之后触发。注意，Panel不直接提供关闭操作， 但是Panel的一些子类(例如...
在Panel被关闭之后触发。注意，Panel不直接提供关闭操作， 但是Panel的一些子类(例如 Ext.Window) ，或者处于Ext.TabPanel中的Panel支持。
监听器将会以如下参数格式被调用:
  • p : Ext.Panel
    被关闭的Panel.
Panel
collapse : ( Ext.Panel p )
在Panel被折叠后触发。
在Panel被折叠后触发。
监听器将会以如下参数格式被调用:
  • p : Ext.Panel
    被折叠的Panel
Panel
deactivate : ( Ext.Panel p )
在Panel被视觉上失去活动状态之后触发。 注意，Panel不直接支持此操作，但是Panel的一些子类...
在Panel被视觉上失去活动状态之后触发。 注意，Panel不直接支持此操作，但是Panel的一些子类 (例如Ext.Window)支持。 作为TabPanel的子组件的Panel将会在TabPanel的控制之下触发activate 和deactivate事件。
监听器将会以如下参数格式被调用:
  • p : Ext.Panel
    失去活动状态的Panel
Panel
destroy : ( Ext.Component this )
在组件被销毁之后触发。
在组件被destroyed之后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
disable : ( Ext.Component this )
在组件被设置为无效状态后触发。
在组件被设置为无效状态后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
enable : ( Ext.Component this )
当组件被设置为有效(enabled)之后触发。
当组件被设置为有效(enabled)之后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
expand : ( Ext.Panel p )
当Panel已经展开之后触发。
当Panel已经展开之后触发。
监听器将会以如下参数格式被调用:
  • p : Ext.Panel
    已经被展开的Panel.
Panel
hide : ( Ext.Component this )
在组件被隐藏之后触发。 当调用hide 方法隐藏组件之后触发。
在组件被隐藏之后触发。 当调用hide 方法隐藏组件之后触发。
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
iconchange : ( Ext.Panel p , String The , String The )
当Panel的图标被set或者 changed 之后触发。
当Panel的图标被set或者 changed 之后触发。
监听器将会以如下参数格式被调用:
  • p : Ext.Panel
    icon class被变化的Panel
  • The : String
    新icon类
  • The : String
    旧icon类
Panel
move : ( Ext.Component this , Number x , Number y )
在组件移动之后触发。
在组件移动之后触发。
监听器将会用如下的参数格式来调用:
  • this : Ext.Component
  • x : Number
    The new x position
  • y : Number
    The new y position
BoxComponent
remove : ( Ext.Container this , Ext.Component component )
监听器将会以如下的参数格式被调用:
  • this : Ext.Container
  • component : Ext.Component
    被删除的组件
Container
removed : ( Ext.Component this , Ext.Container ownerCt )
当一个组件被从Ext.Container容器中删除时触发
当一个组件被从Ext.Container容器中删除时触发
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • ownerCt : Ext.Container
    持有组件的容器
Component
render : ( Ext.Component this )
在组件被渲染之后触发。
在组件被 rendered(渲染) 之后触发。
监听器将以如下的参数格式被调用:
  • this : Ext.Component
Component
resize : ( Ext.Component this , Number adjWidth , Number adjHeight , Number rawWidth , Number rawHeight )
在组件被调整大小之后触发。
在组件被调整大小之后触发。
监听器将以如下的参数格式被调用:
  • this : Ext.Component
  • adjWidth : Number
    这是width调整后的值
  • adjHeight : Number
    这是height调整后的值
  • rawWidth : Number
    这是width原来的值
  • rawHeight : Number
    这是height原来的值
BoxComponent
show : ( Ext.Component this )
在调用show 方法显示组件之后触发。
在调用show 方法显示组件之后触发。
监听器将会用如下的参数格式被调用:
  • this : Ext.Component
Component
staterestore : ( Ext.Component this , Object state )
组件状态被存储之后触发。
组件状态被存储之后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    StateProvider返回的状态哈希值。 如果没有禁止此事件，那么状态对象会被传递给applyState。 默认情况下，这样简单地把属性值拷贝到当前组件中。 可以覆盖此方法以提供自定的状态恢复操作。
Component
statesave : ( Ext.Component this , Object state )
在组件状态被保存到所配置的状态提供者之后触发。
在组件状态被保存到所配置的状态提供者之后触发。
监听器将会用如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    状态值hash。 这是由在足见上调用getState() 方法决定的。 开发者必须提供此方法以返回是否需要恢复状态，默认情况下， Ext.Component有一个空实现。
Component
titlechange : ( Ext.Panel p , String The )
在Panel的标题被set或者 changed 之后触发。
在Panel的标题被set或者 changed 之后触发。
监听器将会以如下参数格式被调用:
  • p : Ext.Panel
    标题被改变的Panel.
  • The : String
    新的标题。
Panel


Class Ext.QuickTips

包: | Ext
定义类的文件: | QuickTips.js
类: | QuickTips
继承自: | Object

为任何元素提供定制化的超炫tooltip。 QuickTips单例被用来为同一风格的多个元素配置和管理全局的tooltip。 为了最大程度地创建定制化的tooltip， 你既可以考虑使用 Ext.Tip 也可以考虑使用 Ext.ToolTip.

Quicktips可以通过标签的属性直接在标签中配置， 或者通过编程使用 register 方法来使用。

The singleton's instance of Ext.QuickTip 的实例可以通过此类的 getQuickTip, 方法 获得，并且支持Ext.QuickTip类所有的方法和所有的配置属性。 这些属性可以应用到所有此单态类中显示的tooltip。

以下是所有可用配置参数的列表。 详细描述请参见 getQuickTip

QuickTips 单态配置(所有均是可选项)

  • dismissDelay
  • hideDelay
  • maxWidth
  • minWidth
  • showDelay
  • trackMouse

(除非特别指定，其余均为可选项)

  • autoHide
  • cls
  • dismissDelay (overrides singleton value)
  • target (required)
  • text (required)
  • title
  • width

以下是一个示例，展示了部分配置选项的用法:

                // 初始化单例。任何基于标签的快速提示开始工作。
Ext.QuickTips.init();

// 将一些配置属性应用到此单态
Ext.apply(Ext.QuickTips.getQuickTip(), {
    maxWidth: 200,
    minWidth: 100,
    showDelay: 50,
    trackMouse: true
});

// 为指定的元素手工配置一个快速提示
Ext.QuickTips.register({
    target: 'my-div',
    title: 'My Tooltip',
    text: 'This tooltip was added in code',
    width: 100,
    dismissDelay: 20
});

需要在标签中注册一个快速提示， 你只要简单地添加一个或多个合法的QuickTip属性，以ext:命名空间前缀开头。 HTML元素自己将被自动地设置成快速提示的目标。 以下是所有支持属性的列表(除非特别指定，其它均为可选项):

  • hide: Specifying "user" is equivalent to setting autoHide = false. Any other value will be the same as autoHide = true.
  • qclass: 应用到此快速提示的CSS样式(等同于目标元素的'cls'配置项的target元素)。
  • qtip (required): 快速提示的文本(等同于目标元素的'text'配置项)。
  • qtitle: 快速提示的标题(等同于目标元素的'title'配置项)。
  • qwidth: 快速提示的宽度(等同于目标元素的'width'配置项)。

这里是一个配置HTML元素的例子，使它从标签中显示一个快速提示:

                // 向一个HTML按钮中添加一个快速提示
<input type="button" value="OK" ext:qtitle="OK Button" ext:qwidth="100"
     ext:qtip="This is a quick tip from markup!"></input>

这是一个单例的类，不能直接实例化。

公共属性

该类没有公共属性。

公共方法

Method Defined By
disable () : void
全局禁用快速提示。
全局禁用快速提示。
参数:
  • 无。
返回值:
  • void
QuickTips
enable () : void
全局启用快速提示。
全局启用快速提示。
参数:
  • 无。
返回值:
  • void
QuickTips
getQuickTip () : void
获取全局快速提示实例
获取全局快速提示实例
参数:
  • 无。
返回值:
  • void
QuickTips
init ( Boolean autoRender ) : void
初始化全局快速提示的实例并且准备快速提示
初始化全局快速提示的实例并且准备快速提示
参数:
  • autoRender : Boolean
    True to render the QuickTips container immediately to preload images. (默认是true)
返回值:
  • void
QuickTips
isEnabled () : Boolean
如果启用了快速提示，返回true，否则返回false。
如果启用了快速提示，返回true，否则返回false。
参数:
  • 无。
返回值:
  • Boolean
QuickTips
register ( Object config ) : void
配置一个新的快速提示实例并将它分配到一个目标元素上。
配置一个新的快速提示实例并将它分配到一个目标元素上。 详细请参见 Ext.QuickTip.register for details.
参数:
  • config : Object
    配置对象
返回值:
  • void
QuickTips
tips ( Object config ) : void
方法的别名。
方法的别名。 register.
参数:
  • config : Object
    配置目标
返回值:
  • void
QuickTips
unregister ( String/HTMLElement/Element el ) : void
从目标元素中删除所有快速提示并摧毁之。
从目标元素中删除所有快速提示并摧毁之。
参数:
  • el : String/HTMLElement/Element
    需要从其中删除快速提示的元素
返回值:
  • void
QuickTips

公共事件

该类没有公共事件。


Observable
    Resizable

Class Ext.Resizable

包: | Ext
定义类的文件: | Resizable.js
类: | Resizable
继承自: | Observable

向元素上添加拖动手柄，让它可以调整尺寸。 拖动手柄被插入到元素中并绝对定位。 一些元素，例如textarea和image，不支持此操作。 如需避免此问题，你可以把textarea包装到一个div中并设置 'resizeChild'为true(或者元素的id), 或者在你的配置中设置wrap:true，然后元素将会自动被包装。

这里是有效的尺寸调整手柄:

Value   Description
------  -------------------
 'n'     north
 's'     south
 'e'     east
 'w'     west
 'nw'    northwest
 'sw'    southwest
 'se'    southeast
 'ne'    northeast
 'all'   all

这里是一个显示创建典型Resizable的例子:

var resizer = new Ext.Resizable('element-id', {
    handles: 'all',
    minWidth: 200,
    minHeight: 100,
    maxWidth: 500,
    maxHeight: 400,
    pinned: true
});
resizer.on('resize', myHandler);

如需隐藏一个特定的手柄，在CSS中设置它的display为none，或者 通过脚本:
resizer.east.setDisplayed(false);

配置项

Config Options Defined By
adjustments : Array/String
字符串'auto'或者一个[width, height]数组， 它的值将会被增加...
字符串'auto'或者一个[width, height]数组， 它的值将会被增加到调整尺寸操作后的新尺寸上(默认为 [0, 0])
Resizable
animate : Boolean
True将会对调整尺寸使用动画效果(与动态调整尺寸不兼容，默认为false)
Resizable
constrainTo : Mixed
将尺寸操作限定在一个特定的元素内
Resizable
disableTrackOver : Boolean
True将会禁用鼠标轨迹。此属性只有在配置时有效。(默认为false)
Resizable
draggable : Boolean
初始化拖拽的便捷方式(默认为false)
Resizable
duration : Number
当animate = true时动画效果持续的时间(默认为0.35)
Resizable
dynamic : Boolean
True将会在拖动时调整元素大小而不是使用代理对象 (默认为false)
Resizable
easing : String
当animate = true时淡出动画(默认为'easingOutStrong')
Resizable
enabled : Boolean
可写。当禁用尺寸调整是为false.
Resizable
handleCls : String
添加到每个手柄上的一个CSS类。 默认为''.
Resizable
handles : String
调整尺寸的手柄显示的字符串常量(默认为undefined). 要么指定'all'或者'n s e w ne nw se sw'...
调整尺寸的手柄显示的字符串常量(默认为undefined). 要么指定'all'或者'n s e w ne nw se sw' 中的任意值。
Resizable
height : Number
元素高度像素值(高度为null)
Resizable
heightIncrement : Number
每一步高度变化的增量像素值(只有当 dynamic==true 有效)。默认为0.
Resizable
listeners : Object
一个包含一个或多个事件处理器的配置对象，会在初始化的时候被添加到目标对象上...

一个包含一个或多个事件处理器的配置对象，会在初始化的时候被添加到目标对象上。 该配置对象应该是一个有效的监听器配置对象就像 addListener例子中指定的一样可一次附加多个处理器。

ExtJs Components上的DOM事件

一些 ExtJs Component 类导出时会选择一些DOM事件(例如 "click", "mouseover" 等等), 这通常只是在有额外的值可以被添加时发生。例如DataView类的 click事件会传递被点击的节点。也可以直接在Component的HTMLElementevent上访问DOM事件，但必需在Component被渲染后监听器才能添加到Element 上。可以按照以下步骤添加插件:

// 插件会用一个监听器配置对象进行配置。
//该组件会被添加到所有处理方法的参数列表上。
Ext.DomObserver = Ext.extend(Object, {
    constructor: function(config) {
        this.listeners = config.listeners ? config.listeners : config;
    },

    // 组件将自己传递进了插件的初始化方法里
    init: function(c) {
        var p, l = this.listeners;
        for (p in l) {
            if (Ext.isFunction(l[p])) {
                l[p] = this.createHandler(l[p], c);
            } else {
                l[p].fn = this.createHandler(l[p].fn, c);
            }
        }

        // 渲染后立即添加监听器到元素上
        c.render = c.render.createSequence(function() {
            var e = c.getEl();
            if (e) {
                e.on(l);
            }
        });
    },

    createHandler: function(fn, c) {
        return function(e) {
            fn.call(this, e, c);
        };
    }
});

var combo = new Ext.form.ComboBox({

    // 元素被点击后折叠
    plugins: [ new Ext.DomObserver({
        click: function(evt, comp) {
            comp.collapse();
        }
    })],
    store: myStore,
    typeAhead: true,
    mode: 'local',
    triggerAction: 'all'
});

Observable
maxHeight : Number
元素的最大高度(默认为10000)
Resizable
maxWidth : Number
元素的最大宽度(默认为10000)
Resizable
minHeight : Number
元素高度的最小值(默认为5)
Resizable
minWidth : Number
元素的最小宽度(默认为5)
Resizable
minX : Number
元素的最小x值(默认为0)
Resizable
minY : Number
元素的最小x值(默认为0)
Resizable
multiDirectional : Boolean
已过时。已过时的方式，添加多个方向的尺寸调整手柄。
Resizable
pinned : Boolean
True将会保证调整尺寸的手柄总是可见，false仅仅在用户鼠标滑过可以调整尺寸的...
True将会保证调整尺寸的手柄总是可见，false仅仅在用户鼠标滑过可以调整尺寸的 边缘时显示它们。此属性仅在配置时可用。(默认为false)
Resizable
preserveRatio : Boolean
True将在调整尺寸时保存原先的宽高比(默认为false)
Resizable
resizeChild : Boolean/String/Element
True将会调整第一个孩子的尺寸，或者是一个需要调整尺寸的id/元素(默认为false)
Resizable
resizeRegion : Ext.lib.Region
将尺寸限定在一个特定的区域内
Resizable
transparent : Boolean
True将会透明化拖动手柄。 此参数只能在配置时应用。 (默认为false)
Resizable
width : Number
元素宽度像素值(默认为null)
Resizable
widthIncrement : Number
每一步宽度变化的增量像素值(只有当 dynamic==true 有效)。默认为0.
Resizable
wrap : Boolean
True将会在需要时将一个元素包装到一个div(对textarea和image必须，默认为false)...
True将会在需要时将一个元素包装到一个div(对textarea和image必须，默认为false) 有利于handles配置项(默认为false)
Resizable

公共属性

Property |  | Defined By
 | enabled : Boolean 可写。当禁用尺寸调整是为false. | Resizable
 | proxy : Ext.Element. 代理元素，在调整尺寸的操作中替代真实的元素被调整尺寸。 使用Ext.Element.getBox... 代理元素，在调整尺寸的操作中替代真实的元素被调整尺寸。 使用Ext.Element.getBox 时此配置项为必须，用来提供调整尺寸到的新区域。 只读。 | Resizable

公共方法

Method Defined By
Resizable ( Mixed el , Object config )
创建一个新的可以改变尺寸的组件
创建一个新的可以改变尺寸的组件
参数:
  • el : Mixed
    需要调整尺寸的元素或其id
  • config : Object
    配置选项
返回值:
  • void
Resizable
addEvents( Object|String o, string Optional. ) : void
添加指定的事件到事件列表上，事件会被该Observable触发。
添加指定的事件到事件列表上，事件会被该Observable触发。
参数:
  • o : Object|String
    以事件名作为属性true作为值的对象 或者当多个事件名被分开的传递时则为第一个事件名。
  • Optional. : string
    事件名被分开的传递时则为事件名。 用法:
    this.addEvents('storeloaded', 'storecleared');
返回值:
  • void
Observable
addListener( String eventName, Function handler, [Object scope], [Object options] ) : void
给对象添加事件处理器。
给对象添加事件处理器。
参数:
  • eventName : String
    监听的事件名。
  • handler : Function
    事件调用的方法
  • scope : Object
    （可选）处理方法执行的作用域 (this的引用 reference)。 如果被忽略。默认为触发事件的对象。
  • options : Object
    （可选）包含处理器配置和属性的对象。 可能包含以下的属性:
    • scope : Object
      处理方法执行的作用域(this的引用) 。 如果被忽略。默认为触发事件的对象。
    • delay : Number
      在触发事件后延迟调用处理器的毫秒数。
    • single : Boolean
      如果为True则添加一个处理器来处理下一次的事件触发（仅一次），然后移除自己。
    • buffer : Number
      使得处理器延迟指定毫秒数后预定的运行在 一个Ext.util.DelayedTask中 。 如果事件在时间内再一次被触发，原始的处理器不会被调用，但是新的处理器会预定的在他的位置上。
    • target : Observable
      如果事件在目标的Observable上触发则仅仅调用处理器， 否则 事件会从子类的Observable上冒泡

    组合选项
    使用这些选项参数,可能会组合出不同类型的监听器：

    一个延迟的，一次性的监听器。

    myDataView.on('click', this.onClick, this, {
single: true,
delay: 100
});

    一次调用附加多个处理器
    该方法同样支持传递一个包含指定的多个处理器的属性的配置对象参数。

    myGridPanel.on({
'click' : {
    fn: this.onClick,
    scope: this,
    delay: 100
},
'mouseover' : {
    fn: this.onMouseOver,
    scope: this
},
'mouseout' : {
    fn: this.onMouseOut,
    scope: this
}
});

    或者一个简写的语法：

    myGridPanel.on({
'click' : this.onClick,
'mouseover' : this.onMouseOver,
'mouseout' : this.onMouseOut,
 scope: this
});
返回值:
  • void
Observable
destroy ( [ Boolean removeEl ] ) : void
销毁当前可改变尺寸的元素。 如果元素被包装过并且removeEl 不为true则保留元素。
销毁当前可改变尺寸的元素。 如果元素被包装过并且removeEl 不为true则保留元素。
参数:
  • removeEl : Boolean
    (可选)true将会从DOM中删除元素
返回值:
  • void
Resizable
enableBubble( String/Array events ) :void
是否现在使得事件会被该Observable触发并调用 this.getBubbleTarget()方法在拥有者的继承树...

是否现在使得事件会被该Observable触发并调用 this.getBubbleTarget()方法在拥有者的继承树中冒泡。Observable的基础类中没有该方法的实现。

该方法一般被Ext.Components用来冒泡事件到拥有者的容器。参看Ext.Component.getBubbleTarget默认的实现 在Ext.Component中返回组件的直接拥有者。但是如果需要的是一个已知的目标，该方法可以被重写来更快的访问需求的目标。

例子:

Ext.override(Ext.form.Field, {
    // 添加方法到Field的initComponent上改变事件为冒泡
    initComponent : Ext.form.Field.prototype.initComponent.createSequence(function() {
        this.enableBubble('change');
    }),

    // 我们知道我们想让Field的事件冒泡到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() {
            // 如果样式被修改标题会变红。
            myForm.header.setStyle('color', 'red');
        }
    }
});
参数:
  • events : String/Array
    冒泡的事件名，或事件名数组
返回值:
  • void
Observable
fireEvent( String eventName, Object... args ) : Boolean
用传入的参数触发指定的事件 (减去事件名)。 一个事件可以被设置为冒泡 Obse...

用传入的参数触发指定的事件 (减去事件名)。

一个事件可以被设置为冒泡到Observable父类继承树(参看 Ext.Component.getBubbleTarget) 调用enableBubble实现。

参数:
  • eventName : String
    触发的事件名。
  • args : Object...
    传递给处理器的可变长度参数。
返回值:
  • Boolean
    如果有任何的处理器返回false则返回false，否则返回true。
Observable
getEl () : Ext.Element
返回当前组件绑定到的元素。
返回当前组件绑定到的元素。
参数:
  • 无。
返回值:
  • Ext.Element
Resizable
getResizeChild () : Ext.Element
返回resizeChild元素(或者 null).
返回resizeChild元素(或者 null).
参数:
  • 无。
返回值:
  • Ext.Element
Resizable
hasListener( String eventName ) : Boolean
检测对象是否包含指定事件的任何监听器
检测对象是否包含指定事件的任何监听器
参数:
  • eventName : String
    检测的事件名
返回值:
  • Boolean
    如果事件被监听则为true，否则为false
Observable
on( String eventName, Function handler, [Object scope], [Object options] ) : void
给对象添加事件处理器 (addListener的简写形式)
给对象添加事件处理器 (addListener的简写形式。)
参数:
  • eventName : String
    监听的事件类型
  • handler : Function
    事件调用的方法
  • scope : Object
    （可选）处理方法执行时的作用域 (this 的引用)。 如果被忽略。默认为触发事件的对象。
  • options : Object
    可选 包含处理器配置的对象。
返回值:
  • void
Observable
purgeListeners() : void
移除对象上所有的监听器
移除对象上所有的监听器
参数:
  • 无。
返回值:
  • void
Observable
relayEvents( Object o, Array events ) : void
从指定的Observable上传递选择的事件就好像被当前对象触发一样。
从指定的Observable上传递选择的事件就好像被当前对象触发一样。
参数:
  • o : Object
    该Observable上的事件被当前对象传递。
  • events : Array
    传递的数组名。
返回值:
  • void
Observable
removeListener( String eventName, Function handler, [Object scope] ) : void
删除一个事件处理器。
删除一个事件处理器。
参数:
  • eventName : String
    处理器关联的事件类型。
  • handler : Function
    移除的处理器。 这应该是传递到addListener里的方法的引用。
  • scope : Object
    （可选）处理器指定的初始作用域。
返回值:
  • void
Observable
resizeElement () : void
执行关联元素的尺寸调整操作。 此方法由该类内部调用，用户代码不应该调用...

执行关联Element的尺寸调整操作。 此方法由该类内部调用，用户代码不应该调用。

如果Resizable被用来调整一个Element的尺寸， 此Element封装了一个更复杂的UI组件，例如一个Panel. 通过配置选项指定一个实现，此方法可以被覆盖， 用来提供当尺寸调整操作完成鼠标抬起时的适当行为， 例如调整Panel的尺寸，并传递到Panel的内容。

通过检查proxy元素的 状态，需要调整到的新区域可以利用。 例如:

new Ext.Panel({
    title: 'Resize me',
    x: 100,
    y: 100,
    renderTo: Ext.getBody(),
    floating: true,
    frame: true,
    width: 400,
    height: 200,
    listeners: {
        render: function(p) {
            new Ext.Resizable(p.getEl(), {
                handles: 'all',
                pinned: true,
                transparent: true,
                resizeElement: function() {
                    var box = this.proxy.getBox();
                    p.updateBox(box);
                    if (p.layout) {
                        p.doLayout();
                    }
                    return box;
                }
           });
       }
    }
}).show();
参数:
  • 无。
返回值:
  • void
Resizable
resizeTo ( Number width , Number height ) : void
执行一次手动调整尺寸操作，并触发'resize'事件。
执行一次手动调整尺寸操作，并触发'resize'事件。
参数:
  • width : Number
  • height : Number
返回值:
  • void
Resizable
resumeEvents() : void
重新开始触发事件。(参见suspendEvents) 如果事件以queueSuspended参数被挂起，则在事件被挂起时 ...
重新开始触发事件。(参见 suspendEvents) 如果事件以queueSuspended 参数被挂起，则在事件被挂起时触发的事件会被传递到所有的监听器上
参数:
  • 无。
返回值:
  • void
Observable
suspendEvents( Boolean queueSuspended ) : void
暂停触发所有的事件。 (参看resumeEvents)
暂停触发所有的事件。（参看 resumeEvents)
参数:
  • queueSuspended : Boolean
    如果传递为true则排列好暂停的事件使得在调用 resumeEvents 后再触发它们，而不是抛弃所有暂停的事件。
返回值:
  • void
Observable
un( String eventName, Function handler, [Object scope] ) : void
删除一个事件处理器(removeListener方法的简写形式)
删除一个事件处理器(removeListener方法的简写形式。)
参数:
  • eventName : String
    处理器关联的事件类型
  • handler : Function
    被删除的处理器 这应该是传入 addListener 中的方法的引用。
  • scope : Object
    （可选）为处理器指定的初始作用域。
返回值:
  • void
Observable

公共事件

Event Defined By
beforeresize : ( Ext.Resizable this , Ext.EventObject e )
在开始调整尺寸之前触发。 设置 enabled 为false可以取消操作。
在开始调整尺寸之前触发。 设置 enabled 为false可以取消操作。
监听器将会以如下参数格式被调用:
  • this : Ext.Resizable
  • e : Ext.EventObject
    mousedown事件
Resizable
resize : ( Ext.Resizable this , Number width , Number height , Ext.EventObject e )
在尺寸调整之后触发。
在尺寸调整之后触发。
监听器将会以如下参数格式被调用:
  • this : Ext.Resizable
  • width : Number
    新宽度
  • height : Number
    新高度
  • e : Ext.EventObject
    mouseup事件
Resizable


Class Ext.Shadow

包: | Ext
定义类的文件: | Shadow.js
类: | Shadow
继承自: | Object
可以为任何元素提供阴影效果的简单类。注意，元素必须是绝对位置，并且阴影不提供 任何衬垫效果。这只应该在简单的情况下被使用---可以提供相同阴影效果的更多高级 功能，参见Ext.Layer 类。

配置项

Config Options Defined By
mode : String
阴影的显示模式。支持如下选项:...
阴影的显示模式。支持如下选项:
  • sides : 阴影显示在两侧和底部
  • frame : 阴影均匀显示在四个方向
  • drop : 传统的右-下式的下拉阴影
Shadow
offset : String
阴影与元素之间便宜的像素值 (默认为 4)
Shadow

公共属性

该类没有公共属性。

公共方法

Method Defined By
Shadow ( Object config )
创建一个新Shadow
创建一个新Shadow
参数:
  • config : Object
    配置对象
返回值:
  • void
Shadow
hide () : void
隐藏当前阴影
隐藏当前阴影
参数:
  • 无。
返回值:
  • void
Shadow
isVisible () : void
如果阴影可见返回true，否则false
如果阴影可见返回true，否则false
参数:
  • 无。
返回值:
  • void
Shadow
realign ( Number left , Number top , Number width , Number height ) : void
当值可用时直接进行对齐。 在调用此方法前必须至少调用一次show方法...
当值可用时直接进行对齐。 在调用此方法前必须至少调用一次show方法，以保证已经被初始化。
参数:
  • left : Number
    目标元素左侧位置
  • top : Number
    目标元素顶部位置
  • width : Number
    目标元素宽度
  • height : Number
    目标元素高度
返回值:
  • void
Shadow
setZIndex ( Number zindex ) : void
调整当前阴影的z-index
调整当前阴影的z-index
参数:
  • zindex : Number
    新的z-index
返回值:
  • void
Shadow
show ( Mixed targetEl ) : void
在目标元素之下显示阴影
在目标元素之下显示阴影
参数:
  • targetEl : Mixed
    元素引用或者元素id，阴影将会在其下显示
返回值:
  • void
Shadow

公共事件

该类没有公共事件。


Observable
    Component
      BoxComponent
        MultiSlider

Class Ext.slider.MultiSlider

包: | Ext.slider
定义类的文件: | Slider.js
类: | MultiSlider
子类: | SingleSlider
继承自: | BoxComponent
支持横向/纵向排列、键盘驱动、可配置snapping、轴点击和动画效果的滑动条。可以被添加到任何容器中。用例：
new Ext.Slider({
    renderTo: Ext.getBody(),
    width: 200,
    value: 50,
    increment: 10,
    minValue: 0,
    maxValue: 100
});
滑动条可以被配置为包含多个滑块，只需传递一个数组而非单一数值：
new Ext.Slider({
    renderTo: Ext.getBody(),
    width: 200,
    values: [25, 50, 75],
    minValue: 0,
    maxValue: 100,

    //默认为true，设置为false时，可以让滑块互相穿越。
    constrainThumbs: false
});

配置项

Config Options Defined By
allowDomMove : Boolean
在渲染时组件是否可以移动Dom节点(默认为true)。
Component
anchor : String
注: 这个配置只用于该组件被包含在一个已使用AnchorLayout...

注: 这个配置只用于该组件被包含在一个已使用 AnchorLayout (或者其子类)配置的Container时。 基于布局管理器，例如：

  • Ext.form.FormPanel
  • 指定 layout: 'anchor' // or 'form', or 'absolute'

参见 Ext.layout.AnchorLayout. anchor 。

BoxComponent
animate : Boolean
是否关闭开启动画效果。某人为true。
MultiSlider
applyTo : Mixed
指定一个元素的id、一个DOM元素或者一个已经存在并被渲染到DIV中的元素，此DIV已经被...

指定一个元素的id、一个DOM元素或者一个已经存在并被渲染到DIV中的元素，此DIV已经被 渲染到document中，并且为当前组件指定了一些结构化的标签。

  • 描述 :
      当使用了 applyTo， 在主元素中也可以用id或者CSS类名来指定组件的托管部分， 并且，如果可以的话，创建的组件可能也会试图在那个标签中创建它的子组件。
  • 注意 :
      当使用此配置项时，无需调用render()方法。
      如果指定了applyTo属性，任何传递给 renderTo 的值都会被忽略，并且目标元素的父节点将会自动被用作组件的容器。
Component
autoEl : Mixed
一个表签名或者一个 DomHelper 描述，用来创建 Element ，它将封装当前组件...

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

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

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

{
    xtype: 'box',
    autoEl: {
        tag: 'img',
        src: 'http://www.example.com/example.jpg'

    }
}, {
    xtype: 'box',
    autoEl: {
        tag: 'blockquote',
        html: 'autoEl is cool!'
    }
}, {
    xtype: 'container',
    autoEl: 'ul',
    cls: 'ux-unordered-list',
    items: {
        xtype: 'box',
        autoEl: 'li',
        html: 'First list item'
    }
}
Component
autoHeight : Boolean
如果值为true，height配置项为'auto'，否则值为false的话使用固定的高度...

如果值为true，height配置项为'auto'，否则值为false的话使用固定的高度， 或者可以由其父类容器 layout manager来控制。(默认值为 false)。

注: 虽然很多组件继承了这个配置选项，但不是所有这些组件的自适应高度配置都会像期望的那样起作用。 设置autoHeight：值为true时，浏览器将根据元素的内容自动设置高度，这将意味着Ext不会去管理高度。

如果是由浏览器来管理高度，需要注意的是，通过浏览器进行调整的结构组件内不能被发现， 因此宽度的变化可能导致需要进行同步处理元素的高度。 例如：

var w = new Ext.Window({
    title: 'Window',
    width: 600,
    autoHeight: true,
    items: {
        title: 'Collapse Me',
        height: 400,
        collapsible: true,
        border: false,
        listeners: {
            beforecollapse: function() {
                w.el.shadow.hide();
            },
            beforeexpand: function() {
                w.el.shadow.hide();
            },
            collapse: function() {
                w.syncShadow();
            },
            expand: function() {
                w.syncShadow();
            }
        }
    }
}).show();
BoxComponent
autoScroll : Boolean
如果值为true，将会在该元素上使用overflow:'auto'配置，并且在必要的时候...
如果值为true，将会在该元素上使用overflow:'auto'配置，并且在必要的时候自动显示滚动条，否则，溢出部分的组件都会被切除(默认值为 false)。
BoxComponent
autoShow : Boolean
如果组件需要检测隐藏CSS属性(如 'x-hidden' 或者 'x-hide-display')并且在渲染时删除...
如果组件需要检测隐藏CSS属性(如 'x-hidden' 或者 'x-hide-display')并且在渲染时删除它们 (默认为false)，设置此值为true。
Component
autoWidth : Boolean
如果为true，使用width:'auto'配置，否则使用固定的宽度...

如果为true，使用width:'auto'配置，否则使用固定的宽度，或者可以由其父类容器的layout manager来控制。(默认值为 false)。

注: 虽然很多组件继承了这个配置选项，但不是所有这些组件的自适应宽度配置都会像期望的那样起作用。 设置autoWidth：值为true时，浏览器将根据元素的内容自动设置宽度，这将意味着Ext不会去管理宽度。

如果是由浏览器来管理宽度，需要注意的是，通过浏览器进行调整的结构组件内不能被发现，因此宽度的变化可能导致需要进行同步处理元素的宽度。 例如，在这个元素的目标是：

<div id='grid-container' style='margin-left:25%;width:50%'></div>
当浏览器窗口改变时，渲染后的Panel必须监听浏览器窗口大小的变化，以便通知子项，浏览器改变了其宽度：

var myPanel = new Ext.Panel({
    renderTo: 'grid-container',
    monitorResize: true, // relay on browser resize
    title: 'Panel',
    height: 400,
    autoWidth: true,
    layout: 'hbox',
    layoutConfig: {
        align: 'stretch'
    },
    defaults: {
        flex: 1
    },
    items: [{
        title: 'Box 1',
    }, {
        title: 'Box 2'
    }, {
        title: 'Box 3'
    }],
});
BoxComponent
boxMaxHeight : Number
设置组件的最大高度值...

设置组件的最大高度值。

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

BoxComponent
boxMaxWidth : Number
设置组件的最大宽度值...

设置组件的最大宽度值。

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

BoxComponent
boxMinHeight : Number
设置组件的最小高度值...

设置组件的最小高度值。

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

BoxComponent
boxMinWidth : Number
设置组件的最小宽度值...

设置组件的最小宽度值。

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

BoxComponent
bubbleEvents : Array
一个事件数组，当这些事件被触发时，将会被冒泡到所有父容器中。参见....

一个事件数组，当这些事件被触发时，将会被冒泡到所有父容器中。参见 Ext.util.Observable.enableBubble。 默认为 []。

Component
clearCls : String
应用到特殊的clearing div的CSS类， 这个clearing div直接渲染到每个form field的包装器后面...

应用到特殊的clearing div的CSS类， 这个clearing div直接渲染到每个form field的包装器后面，以提供 清除field的功能(默认为 'x-form-clear-left')。

注意: 只有在当前组件被渲染到一个使用FormLayout 布局(例如 Ext.form.FormPanel 或者指定 layout:'form')的 容器中、或者是指定了一个fieldLabel 、或者指定isFormField=true 时此配置才有效。

另请参见 Ext.layout.FormLayout. fieldTpl。

Component
clickToChange : Boolean
决定是否在点击滑块所在轴时，移动滑块，默认为true。
MultiSlider
cls : String
一个可选的额外CSS类，它将被添加到当前组件的元素上(默认为'')...
一个可选的额外CSS类，它将被添加到当前组件的元素上(默认为'')。 此属性对于在组件上，或者它的任何使用标准CSS规则的孩子节点上， 添加定制的样式非常有用。
Component
constrainThumbs : Boolean
为true时，将不允许滑块之间相互重叠。默认为true。
MultiSlider
contentEl : String
(可选)指定一个已存在的HTML元素，或者一个已存在HTML元素的...

(可选)指定一个已存在的HTML元素，或者一个已存在HTML元素的 id ，它们将被用作当前组件的内容。

  • 描述 :
    此配置选项被用来将一个已存在的HTML元素 插入到一个新组件(在组件渲染之后它简单地移动DOM元素) 的layout元素中，使它成为该组件的内容。
  • 注意 :
    指定的HTML元素将被append到组件的layout元素中， 在所有配置的 HTML 被插入之后， 并且，这样的话，在render事件 被触发时，document中将不再包含此元素。
    指定的HTML元素将不会参与组件所有可能使用的 layout 过程(译者注：指这些HTML元素 不会参与布局操作)。 它仅是HTML而已。布局操作实在孩子 items 上进行的。
    添加 x-hidden 或者 x-hide-display CSS类，以防在内容渲染到panel时发生闪烁。
Component
ctCls : String
一个可选的外部CSS样式，添加到这个组件的容器(默认值为 '')。 这个方法对于使用标准的CSS规则...

一个可选的外部CSS样式，添加到这个组件的容器(默认值为 '')。 这个方法对于使用标准的CSS规则，为组件或它的任何一个子组件添加特定的样式非常有用。 参见 Ext.layout.ContainerLayout和 extraCls 。

注意: ctCls 默认为 ''期望如下的类，它们将指定一个默认值:

  • Box Layout : 'x-box-layout-ct'
使用一个额外的CSS类配置以上的Class，它是append到默认对象上的。例如， 对于BoxLayout (Hbox and Vbox):
                                ctCls: 'x-box-layout-ct custom-class'

Component
data : Mixed
初始化数据集，它将被应用到 tpl 上以刷新组件的内容区域。
Component
decimalPrecision. : Number/Boolean
指定滑动条数值四舍五入时，小数的位数。默认为0。如果想要...

指定滑动条数值四舍五入时，小数的位数。默认为0。

如果想要禁止四舍五入，设置为 false .

MultiSlider
disabled : Boolean
当前组件处于无效状态时为true。 Read-only.
Component
disabledClass : String
当组件处于无效状态时添加到组件上的CSS类(默认为 'x-item-disabled')。
Component
fieldLabel : String
紧靠此field显示的标签文本(默认值为 '')。注意...

紧靠此field显示的标签文本(默认值为 '')。

注意:只有在当前组件被渲染到一个使用FormLayout 的容器中时，此配置才有效。 (例如 Ext.form.FormPanel 或 指定 layout:'form')。

另请参见 hideLabel 、 Ext.layout.FormLayout和 fieldTpl。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Name'
    }]
});
Component
flex : Number
注: 这个配置只用于该组件被包含在一个已使用BoxLayout配置的Container中时...

注: 这个配置只用于该组件被包含在一个已使用BoxLayout配置的Container中时。通过计算每一个子组件的flex值所占全部flex值之和的比例，来决定子组件的宽(HBoxLayout)高(VBoxlayout)。 任何子项的 flex = 0 或 flex = undefined 将不被设置(初始值大小将不被改变)。

BoxComponent
height : Number
组件的高度(默认值为 auto)。注:如果想使用百分比的方式...
组件的高度(默认值为 auto)。注:如果想使用百分比的方式来设置值，请查看 Ext.Component.anchor。
BoxComponent
hidden : Boolean
如果当前组件处于隐藏状态，此值为true。Read-only。
Component
hideLabel : Boolean
true时完全隐藏label元素 ( label 和 separator)。 默认为 false。 默认情况下，即使你不指定...

true时完全隐藏label元素 ( label 和 separator)。 默认为 false。 默认情况下，即使你不指定 fieldLabel 它的空间仍然会被保留，这样这块区域会与其它确实拥有label的区域位于同一排。 讲此值设置为 true 将导致此区域不再保留此空间。

注意: 参见 clearCls 的注释。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield'
        hideLabel: true
    }]
});
Component
hideMode : String
组件如何隐藏，支持的值有： 'visibility' (css visibility), 'offsets' (位置偏移量为负值) 和...

组件如何隐藏，支持的值有： 'visibility' (css visibility), 'offsets' (位置偏移量为负值) 和 'display' (css display).

注意:一般首选默认值 'display'，因为当组件第一次显示的时候它们会自动进行布局 (隐藏的时候不会调整尺寸)。

Component
hideParent : Boolean
此值为true时，当调用hide/show方法时，将会hide和show组件的容器...
此值为true时，当调用hide/show方法时，将会hide和show组件的容器；false时将会 hide和show组件自身(默认为false)。例如，这可以用作window上隐藏按钮的一种 快捷操作，通过设置此按钮的hideParent:true，然后把它添加到window上。
Component
html : String/Object
一个HTML片段，或者一个 DomHelper 描述，用作layout元素的内容(默认为'')。...
一个HTML片段，或者一个 DomHelper 描述，用作layout元素的内容(默认为'')。 这个HTML内容在组件渲染之后才被添加，所以在 render 出发的时候，document中尚未包含此HTML。 但是这个内容将会在所有配置的 contentEl 之前被插入到body标签中。
Component
id : String
当前组件唯一的id(默认为auto-assigned id)...

当前组件唯一的id(默认为auto-assigned id)。 如果你需要在以后访问组件，而又没有一个有效的组件对象引用，那么你需要指定一个 id( 也就是，使用Ext. getCmp方法 )。

注意，此id也将被用作组件底层HTML标签的id，这些标签被渲染到页面中。 这将允许你编写基于id的CSS规则，以独立地描述指定的实例；并且，也可以通过 组件父标签的id选中子元素。

注意:为了避免与唯一的id 产生重复， 请参见 itemId 和 ref 。

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

Component
increment : Number
当滑块被拖拽时递增的单位数。使用次配置项时，将会启用“snapping”。
MultiSlider
itemCls : String
注意: 只有在当前组件被渲染到一个使用FormLayout 布局的 容器中时此配置才有效...

注意: 只有在当前组件被渲染到一个使用FormLayout 布局的 容器中时此配置才有效。 (例如Ext.form.FormPanel 或者指定 layout:'form')。

一个附加的CSS类，应用到div上，包装当前field的表单元素。 如果提供了此参数， field级上的itemCls将会覆盖 container级上提供的 默认itemCls。 为itemCls指定的值将会被添加默认的 类('x-form-item')。

既然它被应用到项目的包装器上(参见 Ext.layout.FormLayout。 fieldTpl)， 它将允许你编写能应用到此field、label(如果有指定)、或者field内部任何其它元素的标准CSS规则。

注意: 参考 fieldLabel的注释。 .

示例用法:

// Apply a style to the field's label:
<style>
    .required .x-form-item-label {font-weight:bold;color:red;}
</style>

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Name',
        itemCls: 'required' //this label will be styled
    },{
        xtype: 'textfield',
        fieldLabel: 'Favorite Color'
    }]
});
Component
itemId : String
当没有可利用的对象引用时，itemId可以作为第二选择，用来获得一个组件的引用， 代替 ...

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

var c = new Ext.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'); // 与 Ext.getCmp()不同

p2 = p1.ownerCt.getComponent('p2'); // 通过兄弟对象获得引用

另请参见 id 和 ref 。

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

Component
keyIncrement : Number
当按下键盘方向键时，滑动条将要移动的单位。默认为1，如果递增值被设置为更大...
当按下键盘方向键时，滑动条将要移动的单位。默认为1，如果递增值（increment）被设置为更大,那么滑块的移动距离将会增加。
MultiSlider
labelSeparator : String
每个fieldLabel 文本后面现实的分隔符。 此属性可以在多个层次上进行配置...

每个fieldLabel 文本后面现实的分隔符。 此属性可以在多个层次上进行配置。优先顺序为：

  • field / component level
  • container level
  • layout level (默认为冒号 ':')
如不需要为当前field的label显示分隔符，指定一个空字符串''即可。

注意:参见 clearCls 的注释。

另请参见 hideLabel 和 Ext.layout.FormLayout。 fieldTpl。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    layoutConfig: {
        labelSeparator: '~'   // layout config has lowest priority (defaults to ':')
    },
    labelSeparator: '>>',     // config at container level
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Field 1',
        labelSeparator: '...' // field/component level config supersedes others
    },{
        xtype: 'textfield',
        fieldLabel: 'Field 2' // labelSeparator will be '='

    }]
});
Component
labelStyle : String
一个CSS样式描述字符串，它将直接应用到当前field的label上...

一个CSS样式描述字符串，它将直接应用到当前field的label上。 如果有设置，默认为容器的labelStyle值(例如 Ext.layout.FormLayout.labelStyle , 或者 '')。

注意:参见 clearCls 的注释。

另请参见 hideLabel 和 Ext.layout.FormLayout. fieldTpl。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Name',
        labelStyle: 'font-weight:bold;'
    }]
});
Component
listeners : Object
一个包含一个或多个事件处理器的配置对象，会在初始化的时候被添加到目标对象上...

一个包含一个或多个事件处理器的配置对象，会在初始化的时候被添加到目标对象上。 该配置对象应该是一个有效的监听器配置对象就像 addListener例子中指定的一样可一次附加多个处理器。

ExtJs Components上的DOM事件

一些 ExtJs Component 类导出时会选择一些DOM事件(例如 "click", "mouseover" 等等), 这通常只是在有额外的值可以被添加时发生。例如DataView类的 click事件会传递被点击的节点。也可以直接在Component的HTMLElementevent上访问DOM事件，但必需在Component被渲染后监听器才能添加到Element 上。可以按照以下步骤添加插件:

// 插件会用一个监听器配置对象进行配置。
//该组件会被添加到所有处理方法的参数列表上。
Ext.DomObserver = Ext.extend(Object, {
    constructor: function(config) {
        this.listeners = config.listeners ? config.listeners : config;
    },

    // 组件将自己传递进了插件的初始化方法里
    init: function(c) {
        var p, l = this.listeners;
        for (p in l) {
            if (Ext.isFunction(l[p])) {
                l[p] = this.createHandler(l[p], c);
            } else {
                l[p].fn = this.createHandler(l[p].fn, c);
            }
        }

        // 渲染后立即添加监听器到元素上
        c.render = c.render.createSequence(function() {
            var e = c.getEl();
            if (e) {
                e.on(l);
            }
        });
    },

    createHandler: function(fn, c) {
        return function(e) {
            fn.call(this, e, c);
        };
    }
});

var combo = new Ext.form.ComboBox({

    // 元素被点击后折叠
    plugins: [ new Ext.DomObserver({
        click: function(evt, comp) {
            comp.collapse();
        }
    })],
    store: myStore,
    typeAhead: true,
    mode: 'local',
    triggerAction: 'all'
});

Observable
margins : Object
注:此配置只用于该组件展现在一个使用BorderLayout...

注:此配置只用于该组件展现在一个使用BorderLayout 或 BoxLayout的两个子类之一作为布局的容器。

这个margins对象在该组件中的格式为：

{top: (top margin),right: (right margin),bottom: (bottom margin),left: (left margin)}

也可以是一个字符串，中间用空格分隔，margin值为数字。 把matches中每一个值的次序跟CSS中margin值的排列方式相对应：

  • 如果只有一个值，它适用于所有方面。
  • 如果有两个值，top和bottom的边框设置为第一个值，left和right设置为第二个值。
  • 如果有三个值，top设置为第一个值，left和right设置为第二个值，bottom设置为第三个值。
  • 如果有四个值，分别设置为top, right, bottom, left。

默认值:

{top:0, right:0, bottom:0, left:0}
BoxComponent
maxValue : Number
滑动条的最大值，默认为100 。
MultiSlider
minValue : Number
滑动条的最小值，默认为0。
MultiSlider
overCls : String
一个可选的额外的CSS类，它将在鼠标移过元素时被添加到组件上...
一个可选的额外的CSS类，它将在鼠标移过元素时被添加到组件上，鼠标移出时 删除。(默认为'')。此属性对于在组件上，或者它的任何使用标准CSS规则的孩子节点上， 添加定制的'active' 或者 'hover'样式非常有用。
Component
pageX : Number
如果该组件被包含在一个指定位置的容器中，这个值表示页面级的x坐标值（译者注：在有滚动条的情况下这个值很有用）。
BoxComponent
pageY : Number
如果该组件被包含在一个指定位置的容器中，这个值表示页面级的y坐标值（译者注：在有滚动条的情况下这个值很有用）。
BoxComponent
plugins : Object/Array
一个对象或者一个对象数组，为组件提供特殊的功能 ...
一个对象或者一个对象数组，为组件提供特殊的功能。 对一个合法的插件唯一的要求是它含有一个init()方法， 能接收一个Ext.Component型的参数。 当组件被创建时，如果有可用的插件，组件将会调用每个插件的init方法， 并将自身的引用作为方法参数传递给它。然后，每个插件就可以调用方法或者响应组件上的事件， 就像需要的那样提供自己的功能。
Component
ptype : String
需要创建配置的ptype。 当传递一个配置对象给构造函数时...
需要创建配置的ptype。 当传递一个配置对象给构造函数时，此配置选项不会被使用。 只有在使用懒初始化的时候此配置项才会被使用， 此时Plugin不是 通过一个完整的实例组件，而是通过一个Component配置指定的。 在渲染时，将会查找ptype以决定创建何种类型的Plugin。

如果你创建自己的Plugin，你可以通过 Ext.ComponentMgr.registerPlugin 对它们进行注册，以便能利用懒初始化和渲染机制。
Component
ref : String
一个路径描述，与组件的 ownerCt 相关，它描述了把当前组件的命名引用放置到哪个父容器中去。...

一个路径描述，与组件的 ownerCt 相关，它描述了把当前组件的命名引用放置到哪个父容器中去。

祖先的坐标路径可以通过'/'字符进行分隔。 例如，将一个Toolbar Button的引用放入 拥有此Toolbar的Panel中:

var myGrid = new Ext.grid.EditorGridPanel({
    title: 'My EditorGridPanel',
    store: myStore,
    colModel: myColModel,
    tbar: [{
        text: 'Save',
        handler: saveChanges,
        disabled: true,
        ref: '../saveButton'
    }],
    listeners: {
        afteredit: function() {
//          The button reference is in the GridPanel
            myGrid.saveButton.enable();
        }
    }
});

在上面的代码中，如果 ref 是 'saveButton' ，那么引用将会被放置到Toolbar中。 ref 中的每个'/' 都会从组件的 ownerCt 向上移动一级。

另请参见 added 和 removed 事件。

Component
region : String
注: 此配置只用于该组件展现在一个布局为BorderLayout的容器中...

注: 此配置只用于该组件展现在一个布局为BorderLayout的容器中(例如指定layout:'border')。

详见Ext.layout.BorderLayout。

BoxComponent
renderTo : Mixed
该值可以是一个节点的id、一个DOM节点或者一个已存在的元素...

该值可以是一个节点的id、一个DOM节点或者一个已存在的元素， 组件将会被渲染到其中。

  • 注意 :
      如果组件不是一个Container 的子项目时， 不要使用此选项。 渲染和管理它的子项目是一个Container 的layout manager的责任。
      当使用此配置项时，无需调用render()方法。

另请参见 render 。

Component
stateEvents : Array
一个事件数组，当它们被触发时，组件需要保存自己的状态(默认值为 none)...

一个事件数组，当它们被触发时，组件需要保存自己的状态(默认值为 none)。 它们可以是任何该组件支持的事件类型，包括浏览器事件和 自定义事件(例如['click', 'customerchange'])。

对于保存和恢复组件状态的详细解释，参见 stateful

Component
stateId : String
为该组件指定的唯一的id值，它被用作管理组件状态的目的...
为该组件指定的唯一的id值，它被用作管理组件状态的目的。 (如果设定了id，默认值为组件自己的id，否则，如果组件使用自动生成的id，此值为null)。

对于保存和反解析组件状态的解释，参见 stateful 。

Component
stateful : Boolean
一个标志参数，它将引起组件在启动时尝试从一个保存的状态中恢复内部状态参数...

一个标志参数，它将引起组件在启动时尝试从一个保存的状态中恢复内部状态参数。 组件必须要么拥有一个 stateId 或者 id ，它们被分配给需要被管理的状态属性。 在跨页面加载时，不保证自动生成的id属性的稳定性， 并且，不能依赖此id来保存和恢复一个组件的相同状态。

为了保存状态的操作能够工作，状态管理器的提供者必须 被设置成一个Ext.state.Provider 的实现类，它覆盖了set 和get 方法，以便保存和恢复name/value对。 有一个内置的Ext.state.CookieProvider 可用。

为当前页面设置状态提供者:

Ext.state.Manager.setProvider(new Ext.state.CookieProvider({
    expires: new Date(new Date().getTime()+(1000*60*60*24*7)), //7 days from now
}));

当 stateEvents 配置项中其中之一的事件被触发时， 一个状态可保存的组件将试图保存其状态。

保存状态时，一个可保存状态的组件首先需要通过调用 getState 方法来序列化它的状态。 默认情况下，此函数什么事都不做。 开发者必须提供一个实现，返回一个hash对象，它描述了组件可恢复的状态。

getState方法产生的值将会传递给 Ext.state.Manager.set 方法，它使用配置的 Ext.state.Provider 来保存对象，以组件的 stateId 为key，或者，如果此值（指stateId）没有指定时， 使用它的 id 作为key。

在进行构造时，一个可保存状态的组件试图通过调用 Ext.state.Manager.get方法来 恢复它的状态，传递 stateId 或者，如果此值（指stateId）没有指定时， 使用它的 id 作为参数。

结果对象被传递给 applyState 。 applyState 的默认实现只是简单地把属性拷贝到对象中， 但是开发者可以覆盖此方法以支持更多行为。

通过向 beforestaterestore, staterestore, beforestatesave 和 statesave 事件上绑定监听器，你可以在保存和恢复状态时进行额外的处理。

Component
style : String
被添加到组件元素的特定样式。 必须是按照...
被添加到组件元素的特定样式。 必须是按照 Ext.Element.applyStyles 类指定格式的合法参数值。

new Ext.Panel({
    title: 'Some Title',
    renderTo: Ext.getBody(),
    width: 400, height: 300,
    layout: 'form',
    items: [{
        xtype: 'textarea',
        style: {
            width: '95%',
            marginBottom: '10px'
        }
    },
        new Ext.Button({
            text: 'Send',
            minWidth: '100',
            style: {
                marginBottom: '10px'
            }
        })
    ]
});
Component
tabTip : String
注: 这个配置只用于当该组件作为TabPanel的一个子项目时使用...

注: 这个配置只用于当该组件作为TabPanel的一个子项目时使用。

一个String类型的innerHTML(支持html标签)，当鼠标放在该选项上的时，显示一个tooltip。为了tips能够被渲染，Ext.QuickTips.init()必须被提前调用。
BoxComponent
tpl : Mixed
一个 Ext.Template , Ext.XTemplate 或者一个用来形成一个Ext.XTemplate的字符串数组...
一个 Ext.Template , Ext.XTemplate 或者一个用来形成一个Ext.XTemplate的字符串数组。 与 data 和 tplWriteMode 配置项协同使用。
Component
tplWriteMode : String
刷新组件的内容区域时使用的Ext.(X)Template方式。 默认为'overwrite' (参见 Ext.XTemplate.overwrite )。
刷新组件的内容区域时使用的Ext.(X)Template方式。 默认为'overwrite' (参见 Ext.XTemplate.overwrite )。
Component
value : Number
滑动条的初始值。默认为最小值。
MultiSlider
vertical : Boolean
使滑动条纵向而非水平放置，默认为false。
MultiSlider
width : Number
组件的宽度(默认值为 auto)。注:如果想使用百分比的方式...
组件的宽度(默认值为 auto)。注:如果想使用百分比的方式来设置值，请查看 Ext.Component.anchor。
BoxComponent
x : Number
如果被包含在一个指定位置的容器中，这个值表示x(left)坐标值。
BoxComponent
xtype : String
需要创建配置的xtype。 当传递一个配置对象给构造函数时...
需要创建配置的xtype。 当传递一个配置对象给构造函数时，此配置选项不会被使用。 只有在使用懒初始化的时候此配置项才会被使用，此时容器的子项目不是 通过一个完整的实例组件，而是通过一个Component配置指定的。 在渲染时，将会查找xtype以决定创建何种类型的子组件。

预定义的xtype列表如下： here。

如果你继承Component创建你自己的组件，你需要使用Ext.ComponentMgr.registerType 对它们进行注册，以便利用懒初始化和渲染机制。
Component
y : Number
如果被包含在一个指定位置的容器中，这个值表示y(top)坐标值。
BoxComponent

公共属性

Property Defined By
disabled : Boolean
当前组件处于无效状态时为true。 Read-only.
Component
dragging : Boolean
当滑块处于拖拽状态时，该值为true。
MultiSlider
el : Ext.Element
封装了当前组件的Ext.Element。 Read-only。通常情况下，这将是一个<DIV>元素，它由此类的...

封装了当前组件的Ext.Element。 Read-only。

通常情况下，这将是一个<DIV>元素，它由此类的 onRender方法创建，但是它可以通过使用 autoEl 配置项进行覆盖。

注意: 直到组件渲染完成此元素都将处于无效状态。

如需向当前组件的 DOM事件(而不是当前组件自己的Observable事件)添加监听器， 更多建议，参见 listeners 配置项，或者直接使用一个render监听器:

new Ext.Panel({
    title: 'The Clickable Panel',
    listeners: {
        render: function(p) {
            // Append the Panel to the click handler's argument list.
            p.getEl().on('click', handlePanelClick.createDelegate(null, [p], true));
        },
        single: true  // Remove the listener after first invocation
    }
});

另请参见 getEl

Component
hidden : Boolean
如果当前组件处于隐藏状态，此值为true。Read-only。
Component
initialConfig : Object
当前组件的初始化配置描述。 Read-only。
Component
ownerCt : Ext.Container
组件所属的Container (默认为undefined，当前组件被添加到一个容器中时此值被自动设置)...
组件所属的Container (默认为undefined，当前组件被添加到一个容器中时此值被自动设置)。 Read-only。

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

Component
refOwner : Ext.Container
如果当前组件是一个容器的孩子，并且是通过一个 ref 配置项被注册的，则此值为 ref 引用被插入到的祖先容器。
如果当前组件是一个容器的孩子，并且是通过一个 ref 配置项被注册的，则此值为 ref 引用被插入到的祖先容器。
Component
rendered : Boolean
如果当前组件已经被渲染了，此值为true。Read-only.
Component
thumbs : Array 包含所有滑块引用的数组。
MultiSlider
values : Array 用于初始化所有滑块的数组。
MultiSlider

公共方法

Method Defined By
addClass ( string cls ) : Ext.Component
为组件底层的元素添加CSS样式。
为组件底层的元素添加CSS样式。
参数:
  • cls : string
    需要添加的CSS样式的class名称
返回值:
  • Ext.Component
    this
Component
addEvents( Object|String o, string Optional. ) : void
添加指定的事件到事件列表上，事件会被该Observable触发。
添加指定的事件到事件列表上，事件会被该Observable触发。
参数:
  • o : Object|String
    以事件名作为属性true作为值的对象 或者当多个事件名被分开的传递时则为第一个事件名。
  • Optional. : string
    事件名被分开的传递时则为事件名。 用法:
    this.addEvents('storeloaded', 'storecleared');
返回值:
  • void
Observable
addListener( String eventName, Function handler, [Object scope], [Object options] ) : void
给对象添加事件处理器。
给对象添加事件处理器。
参数:
  • eventName : String
    监听的事件名。
  • handler : Function
    事件调用的方法
  • scope : Object
    （可选）处理方法执行的作用域 (this的引用 reference)。 如果被忽略。默认为触发事件的对象。
  • options : Object
    （可选）包含处理器配置和属性的对象。 可能包含以下的属性:
    • scope : Object
      处理方法执行的作用域(this的引用) 。 如果被忽略。默认为触发事件的对象。
    • delay : Number
      在触发事件后延迟调用处理器的毫秒数。
    • single : Boolean
      如果为True则添加一个处理器来处理下一次的事件触发（仅一次），然后移除自己。
    • buffer : Number
      使得处理器延迟指定毫秒数后预定的运行在 一个Ext.util.DelayedTask中 。 如果事件在时间内再一次被触发，原始的处理器不会被调用，但是新的处理器会预定的在他的位置上。
    • target : Observable
      如果事件在目标的Observable上触发则仅仅调用处理器， 否则 事件会从子类的Observable上冒泡

    组合选项
    使用这些选项参数,可能会组合出不同类型的监听器：

    一个延迟的，一次性的监听器。

    myDataView.on('click', this.onClick, this, {
single: true,
delay: 100
});

    一次调用附加多个处理器
    该方法同样支持传递一个包含指定的多个处理器的属性的配置对象参数。

    myGridPanel.on({
'click' : {
    fn: this.onClick,
    scope: this,
    delay: 100
},
'mouseover' : {
    fn: this.onMouseOver,
    scope: this
},
'mouseout' : {
    fn: this.onMouseOut,
    scope: this
}
});

    或者一个简写的语法：

    myGridPanel.on({
'click' : this.onClick,
'mouseover' : this.onMouseOver,
'mouseout' : this.onMouseOut,
 scope: this
});
返回值:
  • void
Observable
addThumb ( Number value ) : void
新建并为滑动条增加滑块。
新建并为滑动条增加滑块。
参数:
  • value : Number
    滑块的初始值。某人为0。
返回值:
  • void
MultiSlider
applyToMarkup ( String/HTMLElement el ) : void
将此组件添加到已存在的有效的HTML标签中。 使用该方法时，无需再调用render()方法。
将此组件添加到已存在的有效的HTML标签中。 使用该方法时，无需再调用render()方法。
参数:
  • el : String/HTMLElement
返回值:
  • void
Component
cloneConfig ( Object overrides ) : Ext.Component
默认使用原先传递给当前实例的配置值克隆当前组件。
默认使用原先传递给当前实例的配置值克隆当前组件。
参数:
  • overrides : Object
    一个新的配置项，包含需要覆盖到克隆版本的所有属性。 可以传递一个id参数给此对象，否则将自动生成一个新的id以避免发生重复。
返回值:
  • Ext.Component
    当前组件的克隆副本
Component
destroy () : void
通过如下方法销毁对象：删除所有的事件监听器、将组件的元素从DOM树中删除...
通过如下方法销毁对象：删除所有的事件监听器、将组件的元素从DOM树中删除（如果可以）、 将组件从它的 Ext.Container（如果可用）中删除、 并且将它从Ext.ComponentMgr中 注销。 销毁操作一般由框架自动完成，一般情况下不需要直接调用该方法。
参数:
  • 无。
返回值:
  • void
Component
disable () : Ext.Component
将组件置为无效状态，并出发'disable'事件。
将组件置为无效状态，并出发'disable'事件。
参数:
  • 无。
返回值:
  • Ext.Component
    this
Component
enable () : Ext.Component
将组件置为有效状态并触发'enable'事件。
将组件置为有效状态并触发'enable'事件。
参数:
  • 无。
返回值:
  • Ext.Component
    this
Component
enableBubble( String/Array events ) :void
是否现在使得事件会被该Observable触发并调用 this.getBubbleTarget()方法在拥有者的继承树...

是否现在使得事件会被该Observable触发并调用 this.getBubbleTarget()方法在拥有者的继承树中冒泡。Observable的基础类中没有该方法的实现。

该方法一般被Ext.Components用来冒泡事件到拥有者的容器。参看Ext.Component.getBubbleTarget默认的实现 在Ext.Component中返回组件的直接拥有者。但是如果需要的是一个已知的目标，该方法可以被重写来更快的访问需求的目标。

例子:

Ext.override(Ext.form.Field, {
    // 添加方法到Field的initComponent上改变事件为冒泡
    initComponent : Ext.form.Field.prototype.initComponent.createSequence(function() {
        this.enableBubble('change');
    }),

    // 我们知道我们想让Field的事件冒泡到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() {
            // 如果样式被修改标题会变红。
            myForm.header.setStyle('color', 'red');
        }
    }
});
参数:
  • events : String/Array
    冒泡的事件名，或事件名数组
返回值:
  • void
Observable
findParentBy ( Function fn ) : Ext.Container
通过自定义的函数查找当前组件上层任何层次上的容器...
通过自定义的函数查找当前组件上层任何层次上的容器。 如果传递的函数返回true，容器对象将被返回。
参数:
  • fn : Function
    自定义的函数，使用如下参数调用(container,this component)。
返回值:
  • Ext.Container
    自定义函数返回true的第一个容器
Component
findParentByType ( String/Class xtype ) : Ext.Container
通过xtype或者class查找当前组件上层任何层次上的容器
通过xtype或者class查找当前组件上层任何层次上的容器
参数:
  • xtype : String/Class
    组件的xtype字符串，或者直接是组件的class
返回值:
  • Ext.Container
    符合指定xtype或者class的第一个容器
Component
fireEvent( String eventName, Object... args ) : Boolean
用传入的参数触发指定的事件 (减去事件名)。 一个事件可以被设置为冒泡 Obse...

用传入的参数触发指定的事件 (减去事件名)。

一个事件可以被设置为冒泡到Observable父类继承树(参看 Ext.Component.getBubbleTarget) 调用enableBubble实现。

参数:
  • eventName : String
    触发的事件名。
  • args : Object...
    传递给处理器的可变长度参数。
返回值:
  • Boolean
    如果有任何的处理器返回false则返回false，否则返回true。
Observable
focus ( [ Boolean selectText ], [ Boolean/Number delay ] ) : Ext.Component
尝试将当前组件设为焦点。
尝试将当前组件设为焦点。
参数:
  • selectText : Boolean
    (可选) 如果可用，同时选中组件内部的文本
  • delay : Boolean/Number
    (可选)将当前组件设置为焦点的延迟时间(设置为true等于0毫秒)
返回值:
  • Ext.Component
    this
Component
getBox ( [ Boolean local ] ) : Object
获取组件底层元素当前盒子模型的尺寸。（译者注：盒子模型是CSS术语，详细解释请自行搜索。）
获取组件底层元素当前盒子模型的尺寸。（译者注：盒子模型是CSS术语，详细解释请自行搜索。）
参数:
  • local : Boolean
    (可选)值为true时，组件的left值和top值将代替页面的XY被返回。(默认值为false)
返回值:
  • Object
    返回值的格式{x, y, width, height}
BoxComponent
getBubbleTarget () : Ext.Container
为Observable的fireEvent方法提供链接，它沿着继承结构进行冒泡操作。
为Observable的fireEvent方法提供链接，它沿着继承结构进行冒泡操作。
参数:
  • 无。
返回值:
  • Ext.Container
    拥有当前组件的容器。
Component
getEl () : Ext.Element
返回 Ext.Element ，它包装了当前组件。...

返回 Ext.Element ，它包装了当前组件。

通常情况下，这将是一个<DIV>元素，它是由该类的onRender方法创建的， 但是可以使用autoEl配置项 覆盖它。

注意: 此元素将会一直处于无效状态直到当前组件渲染完成。

如需向当前组件的 DOM事件(而不是当前组件自己的Observable事件)添加监听器， 更多建议，参见 listeners 配置项，或者直接使用一个render监听器:

new Ext.Panel({
    title: 'The Clickable Panel',
    listeners: {
        render: function(p) {
            // Append the Panel to the click handler's argument list.
            p.getEl().on('click', handlePanelClick.createDelegate(null, [p], true));
        },
        single: true  // Remove the listener after first invocation
    }
});
参数:
  • 无。
返回值:
  • Ext.Element
    包装当前组件的元素。
Component
getHeight () : Number
获取该组件的当前高度值。
获取该组件的当前高度值。
参数:
  • 无。
返回值:
  • Number
BoxComponent
getId () : String
返回当前组件的id，如果没有定义id，则自动生成并返回一个id:'ext-comp-'...
返回当前组件的 id 如果没有定义 id 则自动生成并返回一个 id

'ext-comp-' + (++Ext.Component.AUTO_ID)
参数:
  • 无。
返回值:
  • String
    id
Component
getItemId () : String
返回当前组件的 itemId 。 如果没有通过配置参数指定 itemId 那么，将会使用...
返回当前组件的 itemId 。 如果没有通过配置参数指定 itemId 那么，将会使用 getId 返回 id 。
参数:
  • 无。
返回值:
  • String
Component
getOuterSize () : Object
获取当前组件所在元素的尺寸大小，包括边缘的空白处。
获取当前组件所在元素的尺寸大小，包括边缘的空白处。
参数:
  • 无。
返回值:
  • Object
    一个包含元素大小的对象 {width: (element width + left/right margins), height: (element height + top/bottom margins)}
BoxComponent
getPosition ( [ Boolean local ] ) : Array
获取组件底层元素当前的XY位置。
获取组件底层元素当前的XY位置。
参数:
  • local : Boolean
    (可选)如果为true，将返回元素的left和top值，而不是相对于页面内的 XY。(默认值为 false)
返回值:
  • Array
    元素的XY位置值(例如：[100, 200])
BoxComponent
getResizeEl () : Ext.Element
返回该组件的最外层用来定义这些组件整体大小的Element...

返回该组件的最外层用来定义这些组件整体大小的Element对象。

通常用 getEl 方法将会返回相同的Element对象，但在有些情况下，组件可能有一些更多的封装了它的主要动态Element对象的Element对象。

例如ComboBox。它是封装在一个包含<input>元素的包装元素里(这将返回其 getEl方法和触发按钮的元素)。返回的元素为resizeEl。

参数:
  • 无。
返回值:
  • Ext.Element
    The Element which is to be resized by size managing layouts.
BoxComponent
getSize () : Object
获取组件底层元素当前的大小。
获取组件底层元素当前的大小。
参数:
  • 无。
返回值:
  • Object
    一个包含元素大小的对象{width: (element width), height: (element height)}
BoxComponent
getValue ( Number index ) : Number
返回滑动条的当前值。
返回滑动条的当前值。
参数:
  • index : Number
    滑块的索引值。
返回值:
  • Number
    滑动条的当前值。
MultiSlider
getValues () : Array
返回一组数值——每一项指明滑块的位置。
返回一组数值——每一项指明滑块的位置。
参数:
  • 无。
返回值:
  • Array
    所有滑块值组成的数组。
MultiSlider
getWidth () : Number
获取该组件的当前宽度值。
获取该组件的当前宽度值。
参数:
  • 无。
返回值:
  • Number
BoxComponent
getXType () : String
获取当前组件的xtype，它是用 Ext.ComponentMgr 注册的。 所有可用的xtype列表，参见...
获取当前组件的xtype，它是用 Ext.ComponentMgr 注册的。 所有可用的xtype列表，参见 Ext.Component 类头部。示例用法:

var t = new Ext.form.TextField();
alert(t.getXType());  // alerts 'textfield'
参数:
  • 无。
返回值:
  • String
    The xtype
Component
getXTypes () : String
返回此组件的xtype继承树，用字符'-'分隔。 所有可用的xtype值...

返回此组件的xtype继承树，用字符'-'分隔。 所有可用的xtype值，请参见Ext.Component 类的头部。

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

示例用法:

var t = new Ext.form.TextField();
alert(t.getXTypes());  // alerts 'component/box/field/textfield'
参数:
  • 无。
返回值:
  • String
    xtype层次字符串
Component
hasListener( String eventName ) : Boolean
检测对象是否包含指定事件的任何监听器
检测对象是否包含指定事件的任何监听器
参数:
  • eventName : String
    检测的事件名
返回值:
  • Boolean
    如果事件被监听则为true，否则为false
Observable
hide () : Ext.Component
隐藏当前组件。 监听 beforehide' 事件并且返回false 可以取消隐藏组件的操作。 在隐藏组件之后触发...
隐藏当前组件。 监听 beforehide' 事件并且返回false 可以取消隐藏组件的操作。 在隐藏组件之后触发 ' hide' 事件。 如果组件被配置成 hidden 那么此方法在内部被调用。
参数:
  • 无。
返回值:
  • Ext.Component
    this
Component
isVisible () : Boolean
如果当前组件可见，返回true。
如果当前组件可见，返回true。
参数:
  • 无。
返回值:
  • Boolean
    如果当前组件可见，返回true，其它返回false。
Component
isXType ( String xtype , [ Boolean shallow ] ) : Boolean
Tests whether or not this Component is of a specific xtype. This can test whether this Component is descended from th...

测试此组件是否是指定的xtype。此方法既可以测试是否是指定的xtype的某个子类， 或者它是否直接是指定的xtype类(shallow=true)。

如果使用你自己的子类，必须知道组件必须注册它的xtype值。

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

示例用法:

var t = new Ext.form.TextField();
var isText = t.isXType('textfield');        // true
var isBoxSubclass = t.isXType('box');       // true, descended from BoxComponent
var isBoxInstance = t.isXType('box', true); // false, not a direct BoxComponent instance
参数:
  • xtype : String
    需要为当前组件进行检测的xtype
  • shallow : Boolean
    (可选) 如果为false，检测组件是否是xtype继承树中的某个子类（默认是这种情况）， 如果为true，只检测组件是否是指定的xtype类型。
返回值:
  • Boolean
    如果当前组件是指定xtype的子类，返回true，其它返回flase。
Component
mon ( Observable|Element item , Object|String ename , Function fn , Object scope , Object opt ) : void
向任何Observable对象(或者元素)上添加监听器，监听器将会在组件...

向任何Observable对象(或者元素)上添加监听器，监听器将会在组件销毁时被自动删除。
用法：

myGridPanel.mon(myGridPanel.getSelectionModel(), 'selectionchange', handleSelectionChange, null, {buffer: 50});

or:

myGridPanel.mon(myGridPanel.getSelectionModel(), {
    selectionchange: handleSelectionChange,
    buffer: 50
});
参数:
  • item : Observable|Element
    需要添加listener/listeners的项目。
  • ename : Object|String
    事件名，或者一个包含事件名属性的对象。
  • fn : Function
    (可选) 如果 ename 参数是一个事件名，此参数为处理函数。
  • scope : Object
    (可选)如果 ename 参数是一个事件名称，此参数是作用域 ( this 引用)，监听函数将会在此作用域中被执行。
  • opt : Object
    (可选)如果 ename 参数是一个事件名称， 此参数是 addListener 配置项。
返回值:
  • void
Component
mun ( Observable|Element item , Object|String ename , Function fn , Object scope ) : void
删除通过mon 方法添加的监听器。
删除通过mon 方法添加的监听器。
参数:
  • item : Observable|Element
    需要删除listener/listeners的项目。
  • ename : Object|String
    事件名称，或者一个包含事件名称属性的对象。
  • fn : Function
    (可选)如果 ename 参数是一个事件名称，此参数是一个处理函数。
  • scope : Object
    (可选)如果 ename 参数是一个事件名称，此参数是作用域 ( this 引用)，监听函数将会在此作用域中被执行。
返回值:
  • void
Component
nextSibling () : Ext.Component
返回所属容器中的下一个组件
返回所属容器中的下一个组件
参数:
  • 无。
返回值:
  • Ext.Component
Component
on( String eventName, Function handler, [Object scope], [Object options] ) : void
给对象添加事件处理器 (addListener的简写形式)
给对象添加事件处理器 (addListener的简写形式。)
参数:
  • eventName : String
    监听的事件类型
  • handler : Function
    事件调用的方法
  • scope : Object
    （可选）处理方法执行时的作用域 (this 的引用)。 如果被忽略。默认为触发事件的对象。
  • options : Object
    可选 包含处理器配置的对象。
返回值:
  • void
Observable
previousSibling () : Ext.Component
返回所属容器中的前一个组件
返回所属容器中的前一个组件
参数:
  • 无。
返回值:
  • Ext.Component
Component
purgeListeners() : void
移除对象上所有的监听器
移除对象上所有的监听器
参数:
  • 无。
返回值:
  • void
Observable
relayEvents( Object o, Array events ) : void
从指定的Observable上传递选择的事件就好像被当前对象触发一样。
从指定的Observable上传递选择的事件就好像被当前对象触发一样。
参数:
  • o : Object
    该Observable上的事件被当前对象传递。
  • events : Array
    传递的数组名。
返回值:
  • void
Observable
removeClass ( string cls ) : Ext.Component
从组件底层的元素上删除一个CSS类。
从组件底层的元素上删除一个CSS类。
参数:
  • cls : string
    需要移除的CSS类名
返回值:
  • Ext.Component
    this
Component
removeListener( String eventName, Function handler, [Object scope] ) : void
删除一个事件处理器。
删除一个事件处理器。
参数:
  • eventName : String
    处理器关联的事件类型。
  • handler : Function
    移除的处理器。 这应该是传递到addListener里的方法的引用。
  • scope : Object
    （可选）处理器指定的初始作用域。
返回值:
  • void
Observable
render ( [ Element/HTMLElement/String container ], [ String/Number position ] ) : void
在传递进来的HTML元素中渲染当前组件。...

在传递进来的HTML元素中渲染当前组件。

如果你正在使用一个Container 对象放置当前组件，那么请不要使用render方法。

当容器第一次被渲染时，它的子组件将会被容器的 layout 管理器渲染。

某些布局管理器允许动态添加子组件。它们包括 Ext.layout.CardLayout, Ext.layout.AnchorLayout, Ext.layout.FormLayout, Ext.layout.TableLayout。

当一个新的子组件被添加时，如果容器已经被渲染了， 你可能需要调用容器的 doLayout 方法来刷新视图，它将导致所有没有被渲染的子组件进行渲染操作。 此操作是必须的，这样你可以添加多个子组件而只刷新一次layout。

当创建复杂的UI时，非常重要的一点是，请记住调整子项目的尺寸和位置是容器的 layout 管理器的职责。 如果你希望子项目的尺寸对用户交互作出反应， 你必须为容器配置一个布局管理器，它将创建和管理你心里想要的那种布局。

忽略容器的layout 配置意味着将会使用一个基本的布局管理器，它除了按次序把子组件 渲染到容器中之外什么事情都不做。 这种情况下，任何尺寸和位置的调整操作都不会发生。

参数:
  • container : Element/HTMLElement/String
    (可选) 需要在其中渲染当前组件的元素。 如果它是从一个已存在的标签中创建的，此参数应该被忽略。
  • position : String/Number
    (可选) 容器中的一个元素ID或者一个DOM节点索引， 当前组件将会被插入到它前面 (默认append到容器的尾部)
返回值:
  • void
Component
resumeEvents() : void
重新开始触发事件。(参见suspendEvents) 如果事件以queueSuspended参数被挂起，则在事件被挂起时 ...
重新开始触发事件。(参见 suspendEvents) 如果事件以queueSuspended 参数被挂起，则在事件被挂起时触发的事件会被传递到所有的监听器上
参数:
  • 无。
返回值:
  • void
Observable
setAutoScroll ( Boolean scroll ) : Ext.BoxComponent
设置该组件内容溢出时是否自动显示滚动条。
设置该组件内容溢出时是否自动显示滚动条。
参数:
  • scroll : Boolean
    值为true的话组件自动显示滚动条。
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setDisabled ( Boolean disabled ) : Ext.Component
工具函数，使用布尔值设置有效/无效(disabled/enabled )。
工具函数，使用布尔值设置有效/无效(disabled/enabled )。
参数:
  • disabled : Boolean
返回值:
  • Ext.Component
    this
Component
setHeight ( Mixed height ) : Ext.BoxComponent
设置此组件的高度。该方法将触发resize事件。
设置此组件的高度。该方法将触发resize事件。
参数:
  • height : Mixed
    The new height to set.
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setMaxValue ( Number val ) : void
设置滑动条的最大值。如果当前的数值超过了最大值，则...
设置滑动条的最大值。如果当前的数值超过了最大值，则当前当前值会被改变。 Sets the maximum value for the slider instance. If the current value is more than the maximum value, the current value will be changed.
参数:
  • val : Number
    新的最大值
返回值:
  • void
MultiSlider
setMinValue ( Number val ) : void
设置滑动条的最小值。如果当前值小于最小值，则当前值...
设置滑动条的最小值。如果当前值小于最小值，则当前值将被改变。
参数:
  • val : Number
    新的最小值。
返回值:
  • void
MultiSlider
setPagePosition ( Number x , Number y ) : Ext.BoxComponent
设置组件在页面中的XY位置。 如果需要设置left和top值 ，请使用...
设置组件在页面中的XY位置。 如果需要设置left和top值 ，请使用setPosition方法。 该方法触发move事件。
参数:
  • x : Number
    The new x position
  • y : Number
    The new y position
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setPosition ( Number left , Number top ) : Ext.BoxComponent
设置组件的left和top值。设置组件的页面XY值，请使用setPagePosition方法。该方法触发...
设置组件的left和top值。设置组件的页面XY值，请使用setPagePosition方法。该方法触发move事件。
参数:
  • left : Number
    The new left
  • top : Number
    The new top
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setSize ( Mixed width , Mixed height ) : Ext.BoxComponent
设置BoxComponent的宽度和高度。 此方法触发resize事件...
设置BoxComponent的宽度和高度。 此方法触发resize事件。此方法可以接收单独的width或者height值作为参数， 或者你可以传递像这样的一个size对象： {width:10, height:20} 。
参数:
  • width : Mixed
    设置的新的width值。这可以是：
    • 一个Number类型指定Element新的宽度 Ext.Element.defaultUnit(默认为像素 :'px')。
    • 一个String类型用于设置width的CSS样式。
    • 一个size对象格式为 {width: widthValue, height: heightValue} 。
    • 值为 undefined 时，保留原来的width不变。
  • height : Mixed
    设置的新的height值(如果第一个参数传递了一个size对象，此参数没有必要传递)。这可以是：
    • 一个Number类型指定Element新的高度 Ext.Element.defaultUnit(默认为像素 :'px')。
    • 一个String类型用于设置height的CSS样式。也有可能不会被使用到。
    • 值为 undefined 时，保留原来的height不变。
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setValue ( Number index , Number value , Boolean animate ) : void
设置滑动条的的值，保证设置的值在最大值和最小值之间...
设置滑动条的的值，保证设置的值在最大值和最小值之间。
参数:
  • index : Number
    将要移动的滑块的索引值。
  • value : Number
    设置的值。（这个值将被约束至最大值和最小值之间）
  • animate : Boolean
    是否开启动画效果，默认为true
返回值:
  • void
MultiSlider
setVisible ( Boolean visible ) : Ext.Component
工具方法，通过使用布尔值隐藏或者显示当前组件。
工具方法，通过使用布尔值隐藏或者显示当前组件。
参数:
  • visible : Boolean
    true时显示，false时隐藏
返回值:
  • Ext.Component
    this
Component
setWidth ( Mixed width ) : Ext.BoxComponent
设置组件的宽度。 此方法触发resize事件。
设置组件的宽度。 此方法触发resize事件。
参数:
  • width : Mixed
    The new width to set.
返回值:
  • Ext.BoxComponent
    this
BoxComponent
show () : Ext.Component
显示当前组件。监听' beforeshow' 事件，返回 false 取消显示组件...
显示当前组件。监听' beforeshow' 事件，返回 false 取消显示组件。在显示组件之后触发' show' 事件。
参数:
  • 无。
返回值:
  • Ext.Component
    this
Component
suspendEvents( Boolean queueSuspended ) : void
暂停触发所有的事件。 (参看resumeEvents)
暂停触发所有的事件。（参看 resumeEvents)
参数:
  • queueSuspended : Boolean
    如果传递为true则排列好暂停的事件使得在调用 resumeEvents 后再触发它们，而不是抛弃所有暂停的事件。
返回值:
  • void
Observable
syncSize () : Ext.BoxComponent
强制组件的大小按照此组件底层元素当前的高度和宽度计算。
强制组件的大小按照此组件底层元素当前的高度和宽度计算。
参数:
  • 无。
返回值:
  • Ext.BoxComponent
    this
BoxComponent
syncThumb () : void
通过计算滑块在组件全长中所占的比例，来同步滑块的...
通过计算滑块在组件全长中所占的比例，来同步滑块的位置。 value. 当滑动条被缩放时，该方法将被自动调用，但是，如果渲染时渲染时采用自动宽度（auto width），这个方法将在需要时被另外的缩放处理函数所调用。
参数:
  • 无。
返回值:
  • void
MultiSlider
un( String eventName, Function handler, [Object scope] ) : void
删除一个事件处理器(removeListener方法的简写形式)
删除一个事件处理器(removeListener方法的简写形式。)
参数:
  • eventName : String
    处理器关联的事件类型
  • handler : Function
    被删除的处理器 这应该是传入 addListener 中的方法的引用。
  • scope : Object
    （可选）为处理器指定的初始作用域。
返回值:
  • void
Observable
update ( Mixed htmlOrData , [ Boolean loadScripts ], [ Function callback ] ) : void
刷新组件的内部区域。
刷新组件的内部区域。
参数:
  • htmlOrData : Mixed
    如果已经通过tpl为当前组件配置了一个模板，那么 将会使用此参数来装配模板。 如果没有为当前组件配置模板，组件的内容区域将会通过Ext.Element 进行刷新。
  • loadScripts : Boolean
    (可选)只用在使用html配置时此参数才合法。默认为false。
  • callback : Function
    (可选)只用在使用html配置时此参数才合法。 当脚本加载完成时回调函数才被执行。
返回值:
  • void
Component
updateBox ( Object box ) : Ext.BoxComponent
设置此组件底层元素的盒子模型尺寸。(译者注：盒子模型是CSS术语，详细资料请自行搜索。)
设置此组件底层元素的盒子模型尺寸。(译者注：盒子模型是CSS术语，详细资料请自行搜索。)
参数:
  • box : Object
    一个格式为{x, y, width, height}的对象
返回值:
  • Ext.BoxComponent
    this
BoxComponent

公共事件

Event Defined By
added : ( Ext.Component this , Ext.Container ownerCt , number index )
当一个组件被添加到一个Ext.Container时触发
当一个组件被添加到一个Ext.Container时触发
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • ownerCt : Ext.Container
    用于组件的容器
  • index : number
    添加组件的位置
Component
afterrender : ( Ext.Component this )
在组件渲染完成之后触发...

在组件渲染完成之后触发。

afterrender事件在当前组件被rendered 结束之后、在为组件定义的所有afterRender方法执行之后 触发，并且，如果有stateful， 也在状态被保存之后才触发。

监听器将会以如下参数格式被调用:
  • this : Ext.Component
Component
beforechange : ( Ext.Slider slider , Number newValue , Number oldValue )
当滑动条改变之前触发。当事件处理函数返回false时，你可以取消这个事件并且...
当滑动条改变之前触发。当事件处理函数返回false时，你可以取消这个事件并且阻止滑动条的改变。
监听函数被调用时，将会传递以下参数：
  • slider : Ext.Slider
    滑动条（slider）
  • newValue : Number
    滑动条的新值。
  • oldValue : Number
    滑动条之前的值。
MultiSlider
beforedestroy : ( Ext.Component this )
在组件 destroyed 之前触发。 在事件监听器中返回false以停止 destroy 操作。
在组件 destroyed 之前触发。 在事件监听器中返回false以停止 destroy 操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforehide : ( Ext.Component this )
在调用hide方法隐藏组件之前触发。 在事件监听器中返回false可以停止隐藏操作。
在调用hide方法隐藏组件之前触发。 在事件监听器中返回false可以停止隐藏操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforerender : ( Ext.Component this )
在组件被rendered 之前触发。 在事件监听器中返回false可以停止render 操作。
在组件被rendered 之前触发。 在事件监听器中返回false可以停止render 操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforeshow : ( Ext.Component this )
在调用show()方法现实组件之前触发。 事件处理函数返回false可以停止show。
在调用show 方法现实组件之前触发。 事件处理函数返回false可以停止show。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforestaterestore : ( Ext.Component this , Object state )
在组件状态恢复之前触发。返回false停止恢复状态操作。
在组件状态恢复之前触发。返回false停止恢复状态操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    StateProvider返回的状态哈希值。 如果没有禁止此事件，那么状态对象会被传递给applyState。 默认情况下，这样简单地把属性值拷贝到当前组件中。 可以覆盖此方法以提供自定的状态恢复操作。
Component
beforestatesave : ( Ext.Component this , Object state )
在组件状态被保存到配置的状态提供者之前触发。 返回false可以停止保存。
在组件状态被保存到配置的状态提供者之前触发。 返回false可以停止保存。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    状态值哈希。 这由在组件上调用getState() 方法决定。 此方法必须由开发者提供，返回是否需要对状态进行描述，默认情况下， Ext.Component有一个空实现。
Component
change : ( Ext.Slider slider , Number newValue , Ext.slider.Thumb thumb )
滑动条改变时触发。
Fires when the slider value is changed.
监听函数被调用时，将会传递以下参数：
  • slider : Ext.Slider
    滑动条（slider）
  • newValue : Number
    滑动条的新值。
  • thumb : Ext.slider.Thumb
    被改变的滑块。
MultiSlider
changecomplete : ( Ext.Slider slider , Number newValue , Ext.slider.Thumb thumb )
在滑动条被改变时触发，并且所有的拖拽操作已经完成。
在滑动条被改变时触发，并且所有的拖拽操作已经完成。
监听函数被调用时，将会传递以下参数：
  • slider : Ext.Slider
    滑动条（slider）
  • newValue : Number
    滑动条的新值。
  • thumb : Ext.slider.Thumb
    被改变的滑块
MultiSlider
destroy : ( Ext.Component this )
在组件被销毁之后触发。
在组件被destroyed之后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
disable : ( Ext.Component this )
在组件被设置为无效状态后触发。
在组件被设置为无效状态后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
drag : ( Ext.Slider slider , Ext.EventObject e )
在拖拽时鼠标移动的过程中持续触发。
在拖拽时鼠标移动的过程中持续触发。
监听函数在被调用时，会传递如下参数：
  • slider : Ext.Slider
    滑动条（slider）
  • e : Ext.EventObject
    被触发的事件，源自Ext.dd.DragTracker
MultiSlider
dragend : ( Ext.Slider slider , Ext.EventObject e )
当拖拽完成时触发。
Fires after the drag operation has completed.
监听函数被调用时，将传递以下参数：
  • slider : Ext.Slider
    滑动条（slider）
  • e : Ext.EventObject
    从Ext.dd.DragTracker抛出的事件。
MultiSlider
dragstart : ( Ext.Slider slider , Ext.EventObject e )
当拖拽开始后触发。
当拖拽开始后触发。
监听函数被调用时，将会传递以下参数：
  • slider : Ext.Slider
    滑动条（slider）
  • e : Ext.EventObject
    从Ext.dd.DragTracker抛出的事件。
MultiSlider
enable : ( Ext.Component this )
当组件被设置为有效(enabled)之后触发。
当组件被设置为有效(enabled)之后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
hide : ( Ext.Component this )
在组件被隐藏之后触发。 当调用hide 方法隐藏组件之后触发。
在组件被隐藏之后触发。 当调用hide 方法隐藏组件之后触发。
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
move : ( Ext.Component this , Number x , Number y )
在组件移动之后触发。
在组件移动之后触发。
监听器将会用如下的参数格式来调用:
  • this : Ext.Component
  • x : Number
    The new x position
  • y : Number
    The new y position
BoxComponent
removed : ( Ext.Component this , Ext.Container ownerCt )
当一个组件被从Ext.Container容器中删除时触发
当一个组件被从Ext.Container容器中删除时触发
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • ownerCt : Ext.Container
    持有组件的容器
Component
render : ( Ext.Component this )
在组件被渲染之后触发。
在组件被 rendered(渲染) 之后触发。
监听器将以如下的参数格式被调用:
  • this : Ext.Component
Component
resize : ( Ext.Component this , Number adjWidth , Number adjHeight , Number rawWidth , Number rawHeight )
在组件被调整大小之后触发。
在组件被调整大小之后触发。
监听器将以如下的参数格式被调用:
  • this : Ext.Component
  • adjWidth : Number
    这是width调整后的值
  • adjHeight : Number
    这是height调整后的值
  • rawWidth : Number
    这是width原来的值
  • rawHeight : Number
    这是height原来的值
BoxComponent
show : ( Ext.Component this )
在调用show 方法显示组件之后触发。
在调用show 方法显示组件之后触发。
监听器将会用如下的参数格式被调用:
  • this : Ext.Component
Component
staterestore : ( Ext.Component this , Object state )
组件状态被存储之后触发。
组件状态被存储之后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    StateProvider返回的状态哈希值。 如果没有禁止此事件，那么状态对象会被传递给applyState。 默认情况下，这样简单地把属性值拷贝到当前组件中。 可以覆盖此方法以提供自定的状态恢复操作。
Component
statesave : ( Ext.Component this , Object state )
在组件状态被保存到所配置的状态提供者之后触发。
在组件状态被保存到所配置的状态提供者之后触发。
监听器将会用如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    状态值hash。 这是由在足见上调用getState() 方法决定的。 开发者必须提供此方法以返回是否需要恢复状态，默认情况下， Ext.Component有一个空实现。
Component


Observable
    Component
      BoxComponent
        MultiSlider
          SingleSlider

Class Ext.slider.SingleSlider

包: | Ext.slider
定义类的文件: | Slider.js
类: | SingleSlider
继承自: | MultiSlider
支持横向/纵向排列、键盘驱动、可配置snapping、轴点击和动画效果的滑动条。可以被添加到任何容器中。用例：

                new Ext.slider.SingleSlider({
    renderTo: Ext.getBody(),
    width: 200,
    value: 50,
    increment: 10,
    minValue: 0,
    maxValue: 100
});
Ext.slider.SingleSlider的别名为Ext.Slider，考虑到向后的兼容性。

配置项

Config Options Defined By
allowDomMove : Boolean
在渲染时组件是否可以移动Dom节点(默认为true)。
Component
anchor : String
注: 这个配置只用于该组件被包含在一个已使用AnchorLayout...

注: 这个配置只用于该组件被包含在一个已使用 AnchorLayout (或者其子类)配置的Container时。 基于布局管理器，例如：

  • Ext.form.FormPanel
  • 指定 layout: 'anchor' // or 'form', or 'absolute'

参见 Ext.layout.AnchorLayout. anchor 。

BoxComponent
animate : Boolean
是否关闭开启动画效果。某人为true。
MultiSlider
applyTo : Mixed
指定一个元素的id、一个DOM元素或者一个已经存在并被渲染到DIV中的元素，此DIV已经被...

指定一个元素的id、一个DOM元素或者一个已经存在并被渲染到DIV中的元素，此DIV已经被 渲染到document中，并且为当前组件指定了一些结构化的标签。

  • 描述 :
      当使用了 applyTo， 在主元素中也可以用id或者CSS类名来指定组件的托管部分， 并且，如果可以的话，创建的组件可能也会试图在那个标签中创建它的子组件。
  • 注意 :
      当使用此配置项时，无需调用render()方法。
      如果指定了applyTo属性，任何传递给 renderTo 的值都会被忽略，并且目标元素的父节点将会自动被用作组件的容器。
Component
autoEl : Mixed
一个表签名或者一个 DomHelper 描述，用来创建 Element ，它将封装当前组件...

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

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

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

{
    xtype: 'box',
    autoEl: {
        tag: 'img',
        src: 'http://www.example.com/example.jpg'

    }
}, {
    xtype: 'box',
    autoEl: {
        tag: 'blockquote',
        html: 'autoEl is cool!'
    }
}, {
    xtype: 'container',
    autoEl: 'ul',
    cls: 'ux-unordered-list',
    items: {
        xtype: 'box',
        autoEl: 'li',
        html: 'First list item'
    }
}
Component
autoHeight : Boolean
如果值为true，height配置项为'auto'，否则值为false的话使用固定的高度...

如果值为true，height配置项为'auto'，否则值为false的话使用固定的高度， 或者可以由其父类容器 layout manager来控制。(默认值为 false)。

注: 虽然很多组件继承了这个配置选项，但不是所有这些组件的自适应高度配置都会像期望的那样起作用。 设置autoHeight：值为true时，浏览器将根据元素的内容自动设置高度，这将意味着Ext不会去管理高度。

如果是由浏览器来管理高度，需要注意的是，通过浏览器进行调整的结构组件内不能被发现， 因此宽度的变化可能导致需要进行同步处理元素的高度。 例如：

var w = new Ext.Window({
    title: 'Window',
    width: 600,
    autoHeight: true,
    items: {
        title: 'Collapse Me',
        height: 400,
        collapsible: true,
        border: false,
        listeners: {
            beforecollapse: function() {
                w.el.shadow.hide();
            },
            beforeexpand: function() {
                w.el.shadow.hide();
            },
            collapse: function() {
                w.syncShadow();
            },
            expand: function() {
                w.syncShadow();
            }
        }
    }
}).show();
BoxComponent
autoScroll : Boolean
如果值为true，将会在该元素上使用overflow:'auto'配置，并且在必要的时候...
如果值为true，将会在该元素上使用overflow:'auto'配置，并且在必要的时候自动显示滚动条，否则，溢出部分的组件都会被切除(默认值为 false)。
BoxComponent
autoShow : Boolean
如果组件需要检测隐藏CSS属性(如 'x-hidden' 或者 'x-hide-display')并且在渲染时删除...
如果组件需要检测隐藏CSS属性(如 'x-hidden' 或者 'x-hide-display')并且在渲染时删除它们 (默认为false)，设置此值为true。
Component
autoWidth : Boolean
如果为true，使用width:'auto'配置，否则使用固定的宽度...

如果为true，使用width:'auto'配置，否则使用固定的宽度，或者可以由其父类容器的layout manager来控制。(默认值为 false)。

注: 虽然很多组件继承了这个配置选项，但不是所有这些组件的自适应宽度配置都会像期望的那样起作用。 设置autoWidth：值为true时，浏览器将根据元素的内容自动设置宽度，这将意味着Ext不会去管理宽度。

如果是由浏览器来管理宽度，需要注意的是，通过浏览器进行调整的结构组件内不能被发现，因此宽度的变化可能导致需要进行同步处理元素的宽度。 例如，在这个元素的目标是：

<div id='grid-container' style='margin-left:25%;width:50%'></div>
当浏览器窗口改变时，渲染后的Panel必须监听浏览器窗口大小的变化，以便通知子项，浏览器改变了其宽度：

var myPanel = new Ext.Panel({
    renderTo: 'grid-container',
    monitorResize: true, // relay on browser resize
    title: 'Panel',
    height: 400,
    autoWidth: true,
    layout: 'hbox',
    layoutConfig: {
        align: 'stretch'
    },
    defaults: {
        flex: 1
    },
    items: [{
        title: 'Box 1',
    }, {
        title: 'Box 2'
    }, {
        title: 'Box 3'
    }],
});
BoxComponent
boxMaxHeight : Number
设置组件的最大高度值...

设置组件的最大高度值。

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

BoxComponent
boxMaxWidth : Number
设置组件的最大宽度值...

设置组件的最大宽度值。

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

BoxComponent
boxMinHeight : Number
设置组件的最小高度值...

设置组件的最小高度值。

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

BoxComponent
boxMinWidth : Number
设置组件的最小宽度值...

设置组件的最小宽度值。

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

BoxComponent
bubbleEvents : Array
一个事件数组，当这些事件被触发时，将会被冒泡到所有父容器中。参见....

一个事件数组，当这些事件被触发时，将会被冒泡到所有父容器中。参见 Ext.util.Observable.enableBubble。 默认为 []。

Component
clearCls : String
应用到特殊的clearing div的CSS类， 这个clearing div直接渲染到每个form field的包装器后面...

应用到特殊的clearing div的CSS类， 这个clearing div直接渲染到每个form field的包装器后面，以提供 清除field的功能(默认为 'x-form-clear-left')。

注意: 只有在当前组件被渲染到一个使用FormLayout 布局(例如 Ext.form.FormPanel 或者指定 layout:'form')的 容器中、或者是指定了一个fieldLabel 、或者指定isFormField=true 时此配置才有效。

另请参见 Ext.layout.FormLayout. fieldTpl。

Component
clickToChange : Boolean
决定是否在点击滑块所在轴时，移动滑块，默认为true。
MultiSlider
cls : String
一个可选的额外CSS类，它将被添加到当前组件的元素上(默认为'')...
一个可选的额外CSS类，它将被添加到当前组件的元素上(默认为'')。 此属性对于在组件上，或者它的任何使用标准CSS规则的孩子节点上， 添加定制的样式非常有用。
Component
constrainThumbs : Boolean
为true时，将不允许滑块之间相互重叠。默认为true。
MultiSlider
contentEl : String
(可选)指定一个已存在的HTML元素，或者一个已存在HTML元素的...

(可选)指定一个已存在的HTML元素，或者一个已存在HTML元素的 id ，它们将被用作当前组件的内容。

  • 描述 :
    此配置选项被用来将一个已存在的HTML元素 插入到一个新组件(在组件渲染之后它简单地移动DOM元素) 的layout元素中，使它成为该组件的内容。
  • 注意 :
    指定的HTML元素将被append到组件的layout元素中， 在所有配置的 HTML 被插入之后， 并且，这样的话，在render事件 被触发时，document中将不再包含此元素。
    指定的HTML元素将不会参与组件所有可能使用的 layout 过程(译者注：指这些HTML元素 不会参与布局操作)。 它仅是HTML而已。布局操作实在孩子 items 上进行的。
    添加 x-hidden 或者 x-hide-display CSS类，以防在内容渲染到panel时发生闪烁。
Component
ctCls : String
一个可选的外部CSS样式，添加到这个组件的容器(默认值为 '')。 这个方法对于使用标准的CSS规则...

一个可选的外部CSS样式，添加到这个组件的容器(默认值为 '')。 这个方法对于使用标准的CSS规则，为组件或它的任何一个子组件添加特定的样式非常有用。 参见 Ext.layout.ContainerLayout和 extraCls 。

注意: ctCls 默认为 ''期望如下的类，它们将指定一个默认值:

  • Box Layout : 'x-box-layout-ct'
使用一个额外的CSS类配置以上的Class，它是append到默认对象上的。例如， 对于BoxLayout (Hbox and Vbox):
                                ctCls: 'x-box-layout-ct custom-class'

Component
data : Mixed
初始化数据集，它将被应用到 tpl 上以刷新组件的内容区域。
Component
decimalPrecision. : Number/Boolean
指定滑动条数值四舍五入时，小数的位数。默认为0。如果想要...

指定滑动条数值四舍五入时，小数的位数。默认为0。

如果想要禁止四舍五入，设置为 false .

MultiSlider
disabled : Boolean
当前组件处于无效状态时为true。 Read-only.
Component
disabledClass : String
当组件处于无效状态时添加到组件上的CSS类(默认为 'x-item-disabled')。
Component
fieldLabel : String
紧靠此field显示的标签文本(默认值为 '')。注意...

紧靠此field显示的标签文本(默认值为 '')。

注意:只有在当前组件被渲染到一个使用FormLayout 的容器中时，此配置才有效。 (例如 Ext.form.FormPanel 或 指定 layout:'form')。

另请参见 hideLabel 、 Ext.layout.FormLayout和 fieldTpl。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Name'
    }]
});
Component
flex : Number
注: 这个配置只用于该组件被包含在一个已使用BoxLayout配置的Container中时...

注: 这个配置只用于该组件被包含在一个已使用BoxLayout配置的Container中时。通过计算每一个子组件的flex值所占全部flex值之和的比例，来决定子组件的宽(HBoxLayout)高(VBoxlayout)。 任何子项的 flex = 0 或 flex = undefined 将不被设置(初始值大小将不被改变)。

BoxComponent
height : Number
组件的高度(默认值为 auto)。注:如果想使用百分比的方式...
组件的高度(默认值为 auto)。注:如果想使用百分比的方式来设置值，请查看 Ext.Component.anchor。
BoxComponent
hidden : Boolean
如果当前组件处于隐藏状态，此值为true。Read-only。
Component
hideLabel : Boolean
true时完全隐藏label元素 ( label 和 separator)。 默认为 false。 默认情况下，即使你不指定...

true时完全隐藏label元素 ( label 和 separator)。 默认为 false。 默认情况下，即使你不指定 fieldLabel 它的空间仍然会被保留，这样这块区域会与其它确实拥有label的区域位于同一排。 讲此值设置为 true 将导致此区域不再保留此空间。

注意: 参见 clearCls 的注释。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield'
        hideLabel: true
    }]
});
Component
hideMode : String
组件如何隐藏，支持的值有： 'visibility' (css visibility), 'offsets' (位置偏移量为负值) 和...

组件如何隐藏，支持的值有： 'visibility' (css visibility), 'offsets' (位置偏移量为负值) 和 'display' (css display).

注意:一般首选默认值 'display'，因为当组件第一次显示的时候它们会自动进行布局 (隐藏的时候不会调整尺寸)。

Component
hideParent : Boolean
此值为true时，当调用hide/show方法时，将会hide和show组件的容器...
此值为true时，当调用hide/show方法时，将会hide和show组件的容器；false时将会 hide和show组件自身(默认为false)。例如，这可以用作window上隐藏按钮的一种 快捷操作，通过设置此按钮的hideParent:true，然后把它添加到window上。
Component
html : String/Object
一个HTML片段，或者一个 DomHelper 描述，用作layout元素的内容(默认为'')。...
一个HTML片段，或者一个 DomHelper 描述，用作layout元素的内容(默认为'')。 这个HTML内容在组件渲染之后才被添加，所以在 render 出发的时候，document中尚未包含此HTML。 但是这个内容将会在所有配置的 contentEl 之前被插入到body标签中。
Component
id : String
当前组件唯一的id(默认为auto-assigned id)...

当前组件唯一的id(默认为auto-assigned id)。 如果你需要在以后访问组件，而又没有一个有效的组件对象引用，那么你需要指定一个 id( 也就是，使用Ext. getCmp方法 )。

注意，此id也将被用作组件底层HTML标签的id，这些标签被渲染到页面中。 这将允许你编写基于id的CSS规则，以独立地描述指定的实例；并且，也可以通过 组件父标签的id选中子元素。

注意:为了避免与唯一的id 产生重复， 请参见 itemId 和 ref 。

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

Component
increment : Number
当滑块被拖拽时递增的单位数。使用次配置项时，将会启用“snapping”。
MultiSlider
itemCls : String
注意: 只有在当前组件被渲染到一个使用FormLayout 布局的 容器中时此配置才有效...

注意: 只有在当前组件被渲染到一个使用FormLayout 布局的 容器中时此配置才有效。 (例如Ext.form.FormPanel 或者指定 layout:'form')。

一个附加的CSS类，应用到div上，包装当前field的表单元素。 如果提供了此参数， field级上的itemCls将会覆盖 container级上提供的 默认itemCls。 为itemCls指定的值将会被添加默认的 类('x-form-item')。

既然它被应用到项目的包装器上(参见 Ext.layout.FormLayout。 fieldTpl)， 它将允许你编写能应用到此field、label(如果有指定)、或者field内部任何其它元素的标准CSS规则。

注意: 参考 fieldLabel的注释。 .

示例用法:

// Apply a style to the field's label:
<style>
    .required .x-form-item-label {font-weight:bold;color:red;}
</style>

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Name',
        itemCls: 'required' //this label will be styled
    },{
        xtype: 'textfield',
        fieldLabel: 'Favorite Color'
    }]
});
Component
itemId : String
当没有可利用的对象引用时，itemId可以作为第二选择，用来获得一个组件的引用， 代替 ...

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

var c = new Ext.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'); // 与 Ext.getCmp()不同

p2 = p1.ownerCt.getComponent('p2'); // 通过兄弟对象获得引用

另请参见 id 和 ref 。

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

Component
keyIncrement : Number
当按下键盘方向键时，滑动条将要移动的单位。默认为1，如果递增值被设置为更大...
当按下键盘方向键时，滑动条将要移动的单位。默认为1，如果递增值（increment）被设置为更大,那么滑块的移动距离将会增加。
MultiSlider
labelSeparator : String
每个fieldLabel 文本后面现实的分隔符。 此属性可以在多个层次上进行配置...

每个fieldLabel 文本后面现实的分隔符。 此属性可以在多个层次上进行配置。优先顺序为：

  • field / component level
  • container level
  • layout level (默认为冒号 ':')
如不需要为当前field的label显示分隔符，指定一个空字符串''即可。

注意:参见 clearCls 的注释。

另请参见 hideLabel 和 Ext.layout.FormLayout。 fieldTpl。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    layoutConfig: {
        labelSeparator: '~'   // layout config has lowest priority (defaults to ':')
    },
    labelSeparator: '>>',     // config at container level
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Field 1',
        labelSeparator: '...' // field/component level config supersedes others
    },{
        xtype: 'textfield',
        fieldLabel: 'Field 2' // labelSeparator will be '='

    }]
});
Component
labelStyle : String
一个CSS样式描述字符串，它将直接应用到当前field的label上...

一个CSS样式描述字符串，它将直接应用到当前field的label上。 如果有设置，默认为容器的labelStyle值(例如 Ext.layout.FormLayout.labelStyle , 或者 '')。

注意:参见 clearCls 的注释。

另请参见 hideLabel 和 Ext.layout.FormLayout. fieldTpl。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Name',
        labelStyle: 'font-weight:bold;'
    }]
});
Component
listeners : Object
一个包含一个或多个事件处理器的配置对象，会在初始化的时候被添加到目标对象上...

一个包含一个或多个事件处理器的配置对象，会在初始化的时候被添加到目标对象上。 该配置对象应该是一个有效的监听器配置对象就像 addListener例子中指定的一样可一次附加多个处理器。

ExtJs Components上的DOM事件

一些 ExtJs Component 类导出时会选择一些DOM事件(例如 "click", "mouseover" 等等), 这通常只是在有额外的值可以被添加时发生。例如DataView类的 click事件会传递被点击的节点。也可以直接在Component的HTMLElementevent上访问DOM事件，但必需在Component被渲染后监听器才能添加到Element 上。可以按照以下步骤添加插件:

// 插件会用一个监听器配置对象进行配置。
//该组件会被添加到所有处理方法的参数列表上。
Ext.DomObserver = Ext.extend(Object, {
    constructor: function(config) {
        this.listeners = config.listeners ? config.listeners : config;
    },

    // 组件将自己传递进了插件的初始化方法里
    init: function(c) {
        var p, l = this.listeners;
        for (p in l) {
            if (Ext.isFunction(l[p])) {
                l[p] = this.createHandler(l[p], c);
            } else {
                l[p].fn = this.createHandler(l[p].fn, c);
            }
        }

        // 渲染后立即添加监听器到元素上
        c.render = c.render.createSequence(function() {
            var e = c.getEl();
            if (e) {
                e.on(l);
            }
        });
    },

    createHandler: function(fn, c) {
        return function(e) {
            fn.call(this, e, c);
        };
    }
});

var combo = new Ext.form.ComboBox({

    // 元素被点击后折叠
    plugins: [ new Ext.DomObserver({
        click: function(evt, comp) {
            comp.collapse();
        }
    })],
    store: myStore,
    typeAhead: true,
    mode: 'local',
    triggerAction: 'all'
});

Observable
margins : Object
注:此配置只用于该组件展现在一个使用BorderLayout...

注:此配置只用于该组件展现在一个使用BorderLayout 或 BoxLayout的两个子类之一作为布局的容器。

这个margins对象在该组件中的格式为：

{top: (top margin),right: (right margin),bottom: (bottom margin),left: (left margin)}

也可以是一个字符串，中间用空格分隔，margin值为数字。 把matches中每一个值的次序跟CSS中margin值的排列方式相对应：

  • 如果只有一个值，它适用于所有方面。
  • 如果有两个值，top和bottom的边框设置为第一个值，left和right设置为第二个值。
  • 如果有三个值，top设置为第一个值，left和right设置为第二个值，bottom设置为第三个值。
  • 如果有四个值，分别设置为top, right, bottom, left。

默认值:

{top:0, right:0, bottom:0, left:0}
BoxComponent
maxValue : Number
滑动条的最大值，默认为100 。
MultiSlider
minValue : Number
滑动条的最小值，默认为0。
MultiSlider
overCls : String
一个可选的额外的CSS类，它将在鼠标移过元素时被添加到组件上...
一个可选的额外的CSS类，它将在鼠标移过元素时被添加到组件上，鼠标移出时 删除。(默认为'')。此属性对于在组件上，或者它的任何使用标准CSS规则的孩子节点上， 添加定制的'active' 或者 'hover'样式非常有用。
Component
pageX : Number
如果该组件被包含在一个指定位置的容器中，这个值表示页面级的x坐标值（译者注：在有滚动条的情况下这个值很有用）。
BoxComponent
pageY : Number
如果该组件被包含在一个指定位置的容器中，这个值表示页面级的y坐标值（译者注：在有滚动条的情况下这个值很有用）。
BoxComponent
plugins : Object/Array
一个对象或者一个对象数组，为组件提供特殊的功能 ...
一个对象或者一个对象数组，为组件提供特殊的功能。 对一个合法的插件唯一的要求是它含有一个init()方法， 能接收一个Ext.Component型的参数。 当组件被创建时，如果有可用的插件，组件将会调用每个插件的init方法， 并将自身的引用作为方法参数传递给它。然后，每个插件就可以调用方法或者响应组件上的事件， 就像需要的那样提供自己的功能。
Component
ptype : String
需要创建配置的ptype。 当传递一个配置对象给构造函数时...
需要创建配置的ptype。 当传递一个配置对象给构造函数时，此配置选项不会被使用。 只有在使用懒初始化的时候此配置项才会被使用， 此时Plugin不是 通过一个完整的实例组件，而是通过一个Component配置指定的。 在渲染时，将会查找ptype以决定创建何种类型的Plugin。

如果你创建自己的Plugin，你可以通过 Ext.ComponentMgr.registerPlugin 对它们进行注册，以便能利用懒初始化和渲染机制。
Component
ref : String
一个路径描述，与组件的 ownerCt 相关，它描述了把当前组件的命名引用放置到哪个父容器中去。...

一个路径描述，与组件的 ownerCt 相关，它描述了把当前组件的命名引用放置到哪个父容器中去。

祖先的坐标路径可以通过'/'字符进行分隔。 例如，将一个Toolbar Button的引用放入 拥有此Toolbar的Panel中:

var myGrid = new Ext.grid.EditorGridPanel({
    title: 'My EditorGridPanel',
    store: myStore,
    colModel: myColModel,
    tbar: [{
        text: 'Save',
        handler: saveChanges,
        disabled: true,
        ref: '../saveButton'
    }],
    listeners: {
        afteredit: function() {
//          The button reference is in the GridPanel
            myGrid.saveButton.enable();
        }
    }
});

在上面的代码中，如果 ref 是 'saveButton' ，那么引用将会被放置到Toolbar中。 ref 中的每个'/' 都会从组件的 ownerCt 向上移动一级。

另请参见 added 和 removed 事件。

Component
region : String
注: 此配置只用于该组件展现在一个布局为BorderLayout的容器中...

注: 此配置只用于该组件展现在一个布局为BorderLayout的容器中(例如指定layout:'border')。

详见Ext.layout.BorderLayout。

BoxComponent
renderTo : Mixed
该值可以是一个节点的id、一个DOM节点或者一个已存在的元素...

该值可以是一个节点的id、一个DOM节点或者一个已存在的元素， 组件将会被渲染到其中。

  • 注意 :
      如果组件不是一个Container 的子项目时， 不要使用此选项。 渲染和管理它的子项目是一个Container 的layout manager的责任。
      当使用此配置项时，无需调用render()方法。

另请参见 render 。

Component
stateEvents : Array
一个事件数组，当它们被触发时，组件需要保存自己的状态(默认值为 none)...

一个事件数组，当它们被触发时，组件需要保存自己的状态(默认值为 none)。 它们可以是任何该组件支持的事件类型，包括浏览器事件和 自定义事件(例如['click', 'customerchange'])。

对于保存和恢复组件状态的详细解释，参见 stateful

Component
stateId : String
为该组件指定的唯一的id值，它被用作管理组件状态的目的...
为该组件指定的唯一的id值，它被用作管理组件状态的目的。 (如果设定了id，默认值为组件自己的id，否则，如果组件使用自动生成的id，此值为null)。

对于保存和反解析组件状态的解释，参见 stateful 。

Component
stateful : Boolean
一个标志参数，它将引起组件在启动时尝试从一个保存的状态中恢复内部状态参数...

一个标志参数，它将引起组件在启动时尝试从一个保存的状态中恢复内部状态参数。 组件必须要么拥有一个 stateId 或者 id ，它们被分配给需要被管理的状态属性。 在跨页面加载时，不保证自动生成的id属性的稳定性， 并且，不能依赖此id来保存和恢复一个组件的相同状态。

为了保存状态的操作能够工作，状态管理器的提供者必须 被设置成一个Ext.state.Provider 的实现类，它覆盖了set 和get 方法，以便保存和恢复name/value对。 有一个内置的Ext.state.CookieProvider 可用。

为当前页面设置状态提供者:

Ext.state.Manager.setProvider(new Ext.state.CookieProvider({
    expires: new Date(new Date().getTime()+(1000*60*60*24*7)), //7 days from now
}));

当 stateEvents 配置项中其中之一的事件被触发时， 一个状态可保存的组件将试图保存其状态。

保存状态时，一个可保存状态的组件首先需要通过调用 getState 方法来序列化它的状态。 默认情况下，此函数什么事都不做。 开发者必须提供一个实现，返回一个hash对象，它描述了组件可恢复的状态。

getState方法产生的值将会传递给 Ext.state.Manager.set 方法，它使用配置的 Ext.state.Provider 来保存对象，以组件的 stateId 为key，或者，如果此值（指stateId）没有指定时， 使用它的 id 作为key。

在进行构造时，一个可保存状态的组件试图通过调用 Ext.state.Manager.get方法来 恢复它的状态，传递 stateId 或者，如果此值（指stateId）没有指定时， 使用它的 id 作为参数。

结果对象被传递给 applyState 。 applyState 的默认实现只是简单地把属性拷贝到对象中， 但是开发者可以覆盖此方法以支持更多行为。

通过向 beforestaterestore, staterestore, beforestatesave 和 statesave 事件上绑定监听器，你可以在保存和恢复状态时进行额外的处理。

Component
style : String
被添加到组件元素的特定样式。 必须是按照...
被添加到组件元素的特定样式。 必须是按照 Ext.Element.applyStyles 类指定格式的合法参数值。

new Ext.Panel({
    title: 'Some Title',
    renderTo: Ext.getBody(),
    width: 400, height: 300,
    layout: 'form',
    items: [{
        xtype: 'textarea',
        style: {
            width: '95%',
            marginBottom: '10px'
        }
    },
        new Ext.Button({
            text: 'Send',
            minWidth: '100',
            style: {
                marginBottom: '10px'
            }
        })
    ]
});
Component
tabTip : String
注: 这个配置只用于当该组件作为TabPanel的一个子项目时使用...

注: 这个配置只用于当该组件作为TabPanel的一个子项目时使用。

一个String类型的innerHTML(支持html标签)，当鼠标放在该选项上的时，显示一个tooltip。为了tips能够被渲染，Ext.QuickTips.init()必须被提前调用。
BoxComponent
tpl : Mixed
一个 Ext.Template , Ext.XTemplate 或者一个用来形成一个Ext.XTemplate的字符串数组...
一个 Ext.Template , Ext.XTemplate 或者一个用来形成一个Ext.XTemplate的字符串数组。 与 data 和 tplWriteMode 配置项协同使用。
Component
tplWriteMode : String
刷新组件的内容区域时使用的Ext.(X)Template方式。 默认为'overwrite' (参见 Ext.XTemplate.overwrite )。
刷新组件的内容区域时使用的Ext.(X)Template方式。 默认为'overwrite' (参见 Ext.XTemplate.overwrite )。
Component
value : Number
滑动条的初始值。默认为最小值。
MultiSlider
vertical : Boolean
使滑动条纵向而非水平放置，默认为false。
MultiSlider
width : Number
组件的宽度(默认值为 auto)。注:如果想使用百分比的方式...
组件的宽度(默认值为 auto)。注:如果想使用百分比的方式来设置值，请查看 Ext.Component.anchor。
BoxComponent
x : Number
如果被包含在一个指定位置的容器中，这个值表示x(left)坐标值。
BoxComponent
xtype : String
需要创建配置的xtype。 当传递一个配置对象给构造函数时...
需要创建配置的xtype。 当传递一个配置对象给构造函数时，此配置选项不会被使用。 只有在使用懒初始化的时候此配置项才会被使用，此时容器的子项目不是 通过一个完整的实例组件，而是通过一个Component配置指定的。 在渲染时，将会查找xtype以决定创建何种类型的子组件。

预定义的xtype列表如下： here。

如果你继承Component创建你自己的组件，你需要使用Ext.ComponentMgr.registerType 对它们进行注册，以便利用懒初始化和渲染机制。
Component
y : Number
如果被包含在一个指定位置的容器中，这个值表示y(top)坐标值。
BoxComponent

公共属性

Property Defined By
disabled : Boolean
当前组件处于无效状态时为true。 Read-only.
Component
dragging : Boolean
当滑块处于拖拽状态时，该值为true。
MultiSlider
el : Ext.Element
封装了当前组件的Ext.Element。 Read-only。通常情况下，这将是一个<DIV>元素，它由此类的...

封装了当前组件的Ext.Element。 Read-only。

通常情况下，这将是一个<DIV>元素，它由此类的 onRender方法创建，但是它可以通过使用 autoEl 配置项进行覆盖。

注意: 直到组件渲染完成此元素都将处于无效状态。

如需向当前组件的 DOM事件(而不是当前组件自己的Observable事件)添加监听器， 更多建议，参见 listeners 配置项，或者直接使用一个render监听器:

new Ext.Panel({
    title: 'The Clickable Panel',
    listeners: {
        render: function(p) {
            // Append the Panel to the click handler's argument list.
            p.getEl().on('click', handlePanelClick.createDelegate(null, [p], true));
        },
        single: true  // Remove the listener after first invocation
    }
});

另请参见 getEl

Component
hidden : Boolean
如果当前组件处于隐藏状态，此值为true。Read-only。
Component
initialConfig : Object
当前组件的初始化配置描述。 Read-only。
Component
ownerCt : Ext.Container
组件所属的Container (默认为undefined，当前组件被添加到一个容器中时此值被自动设置)...
组件所属的Container (默认为undefined，当前组件被添加到一个容器中时此值被自动设置)。 Read-only。

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

Component
refOwner : Ext.Container
如果当前组件是一个容器的孩子，并且是通过一个 ref 配置项被注册的，则此值为 ref 引用被插入到的祖先容器。
如果当前组件是一个容器的孩子，并且是通过一个 ref 配置项被注册的，则此值为 ref 引用被插入到的祖先容器。
Component
rendered : Boolean
如果当前组件已经被渲染了，此值为true。Read-only.
Component
thumbs : Array 包含所有滑块引用的数组。
MultiSlider
values : Array 用于初始化所有滑块的数组。
MultiSlider

公共方法

Method Defined By
addClass ( string cls ) : Ext.Component
为组件底层的元素添加CSS样式。
为组件底层的元素添加CSS样式。
参数:
  • cls : string
    需要添加的CSS样式的class名称
返回值:
  • Ext.Component
    this
Component
addEvents( Object|String o, string Optional. ) : void
添加指定的事件到事件列表上，事件会被该Observable触发。
添加指定的事件到事件列表上，事件会被该Observable触发。
参数:
  • o : Object|String
    以事件名作为属性true作为值的对象 或者当多个事件名被分开的传递时则为第一个事件名。
  • Optional. : string
    事件名被分开的传递时则为事件名。 用法:
    this.addEvents('storeloaded', 'storecleared');
返回值:
  • void
Observable
addListener( String eventName, Function handler, [Object scope], [Object options] ) : void
给对象添加事件处理器。
给对象添加事件处理器。
参数:
  • eventName : String
    监听的事件名。
  • handler : Function
    事件调用的方法
  • scope : Object
    （可选）处理方法执行的作用域 (this的引用 reference)。 如果被忽略。默认为触发事件的对象。
  • options : Object
    （可选）包含处理器配置和属性的对象。 可能包含以下的属性:
    • scope : Object
      处理方法执行的作用域(this的引用) 。 如果被忽略。默认为触发事件的对象。
    • delay : Number
      在触发事件后延迟调用处理器的毫秒数。
    • single : Boolean
      如果为True则添加一个处理器来处理下一次的事件触发（仅一次），然后移除自己。
    • buffer : Number
      使得处理器延迟指定毫秒数后预定的运行在 一个Ext.util.DelayedTask中 。 如果事件在时间内再一次被触发，原始的处理器不会被调用，但是新的处理器会预定的在他的位置上。
    • target : Observable
      如果事件在目标的Observable上触发则仅仅调用处理器， 否则 事件会从子类的Observable上冒泡

    组合选项
    使用这些选项参数,可能会组合出不同类型的监听器：

    一个延迟的，一次性的监听器。

    myDataView.on('click', this.onClick, this, {
single: true,
delay: 100
});

    一次调用附加多个处理器
    该方法同样支持传递一个包含指定的多个处理器的属性的配置对象参数。

    myGridPanel.on({
'click' : {
    fn: this.onClick,
    scope: this,
    delay: 100
},
'mouseover' : {
    fn: this.onMouseOver,
    scope: this
},
'mouseout' : {
    fn: this.onMouseOut,
    scope: this
}
});

    或者一个简写的语法：

    myGridPanel.on({
'click' : this.onClick,
'mouseover' : this.onMouseOver,
'mouseout' : this.onMouseOut,
 scope: this
});
返回值:
  • void
Observable
addThumb ( Number value ) : void
新建并为滑动条增加滑块。
新建并为滑动条增加滑块。
参数:
  • value : Number
    滑块的初始值。某人为0。
返回值:
  • void
MultiSlider
applyToMarkup ( String/HTMLElement el ) : void
将此组件添加到已存在的有效的HTML标签中。 使用该方法时，无需再调用render()方法。
将此组件添加到已存在的有效的HTML标签中。 使用该方法时，无需再调用render()方法。
参数:
  • el : String/HTMLElement
返回值:
  • void
Component
cloneConfig ( Object overrides ) : Ext.Component
默认使用原先传递给当前实例的配置值克隆当前组件。
默认使用原先传递给当前实例的配置值克隆当前组件。
参数:
  • overrides : Object
    一个新的配置项，包含需要覆盖到克隆版本的所有属性。 可以传递一个id参数给此对象，否则将自动生成一个新的id以避免发生重复。
返回值:
  • Ext.Component
    当前组件的克隆副本
Component
destroy () : void
通过如下方法销毁对象：删除所有的事件监听器、将组件的元素从DOM树中删除...
通过如下方法销毁对象：删除所有的事件监听器、将组件的元素从DOM树中删除（如果可以）、 将组件从它的 Ext.Container（如果可用）中删除、 并且将它从Ext.ComponentMgr中 注销。 销毁操作一般由框架自动完成，一般情况下不需要直接调用该方法。
参数:
  • 无。
返回值:
  • void
Component
disable () : Ext.Component
将组件置为无效状态，并出发'disable'事件。
将组件置为无效状态，并出发'disable'事件。
参数:
  • 无。
返回值:
  • Ext.Component
    this
Component
enable () : Ext.Component
将组件置为有效状态并触发'enable'事件。
将组件置为有效状态并触发'enable'事件。
参数:
  • 无。
返回值:
  • Ext.Component
    this
Component
enableBubble( String/Array events ) :void
是否现在使得事件会被该Observable触发并调用 this.getBubbleTarget()方法在拥有者的继承树...

是否现在使得事件会被该Observable触发并调用 this.getBubbleTarget()方法在拥有者的继承树中冒泡。Observable的基础类中没有该方法的实现。

该方法一般被Ext.Components用来冒泡事件到拥有者的容器。参看Ext.Component.getBubbleTarget默认的实现 在Ext.Component中返回组件的直接拥有者。但是如果需要的是一个已知的目标，该方法可以被重写来更快的访问需求的目标。

例子:

Ext.override(Ext.form.Field, {
    // 添加方法到Field的initComponent上改变事件为冒泡
    initComponent : Ext.form.Field.prototype.initComponent.createSequence(function() {
        this.enableBubble('change');
    }),

    // 我们知道我们想让Field的事件冒泡到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() {
            // 如果样式被修改标题会变红。
            myForm.header.setStyle('color', 'red');
        }
    }
});
参数:
  • events : String/Array
    冒泡的事件名，或事件名数组
返回值:
  • void
Observable
findParentBy ( Function fn ) : Ext.Container
通过自定义的函数查找当前组件上层任何层次上的容器...
通过自定义的函数查找当前组件上层任何层次上的容器。 如果传递的函数返回true，容器对象将被返回。
参数:
  • fn : Function
    自定义的函数，使用如下参数调用(container,this component)。
返回值:
  • Ext.Container
    自定义函数返回true的第一个容器
Component
findParentByType ( String/Class xtype ) : Ext.Container
通过xtype或者class查找当前组件上层任何层次上的容器
通过xtype或者class查找当前组件上层任何层次上的容器
参数:
  • xtype : String/Class
    组件的xtype字符串，或者直接是组件的class
返回值:
  • Ext.Container
    符合指定xtype或者class的第一个容器
Component
fireEvent( String eventName, Object... args ) : Boolean
用传入的参数触发指定的事件 (减去事件名)。 一个事件可以被设置为冒泡 Obse...

用传入的参数触发指定的事件 (减去事件名)。

一个事件可以被设置为冒泡到Observable父类继承树(参看 Ext.Component.getBubbleTarget) 调用enableBubble实现。

参数:
  • eventName : String
    触发的事件名。
  • args : Object...
    传递给处理器的可变长度参数。
返回值:
  • Boolean
    如果有任何的处理器返回false则返回false，否则返回true。
Observable
focus ( [ Boolean selectText ], [ Boolean/Number delay ] ) : Ext.Component
尝试将当前组件设为焦点。
尝试将当前组件设为焦点。
参数:
  • selectText : Boolean
    (可选) 如果可用，同时选中组件内部的文本
  • delay : Boolean/Number
    (可选)将当前组件设置为焦点的延迟时间(设置为true等于0毫秒)
返回值:
  • Ext.Component
    this
Component
getBox ( [ Boolean local ] ) : Object
获取组件底层元素当前盒子模型的尺寸。（译者注：盒子模型是CSS术语，详细解释请自行搜索。）
获取组件底层元素当前盒子模型的尺寸。（译者注：盒子模型是CSS术语，详细解释请自行搜索。）
参数:
  • local : Boolean
    (可选)值为true时，组件的left值和top值将代替页面的XY被返回。(默认值为false)
返回值:
  • Object
    返回值的格式{x, y, width, height}
BoxComponent
getBubbleTarget () : Ext.Container
为Observable的fireEvent方法提供链接，它沿着继承结构进行冒泡操作。
为Observable的fireEvent方法提供链接，它沿着继承结构进行冒泡操作。
参数:
  • 无。
返回值:
  • Ext.Container
    拥有当前组件的容器。
Component
getEl () : Ext.Element
返回 Ext.Element ，它包装了当前组件。...

返回 Ext.Element ，它包装了当前组件。

通常情况下，这将是一个<DIV>元素，它是由该类的onRender方法创建的， 但是可以使用autoEl配置项 覆盖它。

注意: 此元素将会一直处于无效状态直到当前组件渲染完成。

如需向当前组件的 DOM事件(而不是当前组件自己的Observable事件)添加监听器， 更多建议，参见 listeners 配置项，或者直接使用一个render监听器:

new Ext.Panel({
    title: 'The Clickable Panel',
    listeners: {
        render: function(p) {
            // Append the Panel to the click handler's argument list.
            p.getEl().on('click', handlePanelClick.createDelegate(null, [p], true));
        },
        single: true  // Remove the listener after first invocation
    }
});
参数:
  • 无。
返回值:
  • Ext.Element
    包装当前组件的元素。
Component
getHeight () : Number
获取该组件的当前高度值。
获取该组件的当前高度值。
参数:
  • 无。
返回值:
  • Number
BoxComponent
getId () : String
返回当前组件的id，如果没有定义id，则自动生成并返回一个id:'ext-comp-'...
返回当前组件的 id 如果没有定义 id 则自动生成并返回一个 id

'ext-comp-' + (++Ext.Component.AUTO_ID)
参数:
  • 无。
返回值:
  • String
    id
Component
getItemId () : String
返回当前组件的 itemId 。 如果没有通过配置参数指定 itemId 那么，将会使用...
返回当前组件的 itemId 。 如果没有通过配置参数指定 itemId 那么，将会使用 getId 返回 id 。
参数:
  • 无。
返回值:
  • String
Component
getOuterSize () : Object
获取当前组件所在元素的尺寸大小，包括边缘的空白处。
获取当前组件所在元素的尺寸大小，包括边缘的空白处。
参数:
  • 无。
返回值:
  • Object
    一个包含元素大小的对象 {width: (element width + left/right margins), height: (element height + top/bottom margins)}
BoxComponent
getPosition ( [ Boolean local ] ) : Array
获取组件底层元素当前的XY位置。
获取组件底层元素当前的XY位置。
参数:
  • local : Boolean
    (可选)如果为true，将返回元素的left和top值，而不是相对于页面内的 XY。(默认值为 false)
返回值:
  • Array
    元素的XY位置值(例如：[100, 200])
BoxComponent
getResizeEl () : Ext.Element
返回该组件的最外层用来定义这些组件整体大小的Element...

返回该组件的最外层用来定义这些组件整体大小的Element对象。

通常用 getEl 方法将会返回相同的Element对象，但在有些情况下，组件可能有一些更多的封装了它的主要动态Element对象的Element对象。

例如ComboBox。它是封装在一个包含<input>元素的包装元素里(这将返回其 getEl方法和触发按钮的元素)。返回的元素为resizeEl。

参数:
  • 无。
返回值:
  • Ext.Element
    The Element which is to be resized by size managing layouts.
BoxComponent
getSize () : Object
获取组件底层元素当前的大小。
获取组件底层元素当前的大小。
参数:
  • 无。
返回值:
  • Object
    一个包含元素大小的对象{width: (element width), height: (element height)}
BoxComponent
getValue () : Number
返回滑动条的当前值。
返回滑动条的当前值。
参数:
  • 无。
返回值:
  • Number
    滑动条的当前值。
SingleSlider
getValues () : Array
返回一组数值——每一项指明滑块的位置。
返回一组数值——每一项指明滑块的位置。
参数:
  • 无。
返回值:
  • Array
    所有滑块值组成的数组。
MultiSlider
getWidth () : Number
获取该组件的当前宽度值。
获取该组件的当前宽度值。
参数:
  • 无。
返回值:
  • Number
BoxComponent
getXType () : String
获取当前组件的xtype，它是用 Ext.ComponentMgr 注册的。 所有可用的xtype列表，参见...
获取当前组件的xtype，它是用 Ext.ComponentMgr 注册的。 所有可用的xtype列表，参见 Ext.Component 类头部。示例用法:

var t = new Ext.form.TextField();
alert(t.getXType());  // alerts 'textfield'
参数:
  • 无。
返回值:
  • String
    The xtype
Component
getXTypes () : String
返回此组件的xtype继承树，用字符'-'分隔。 所有可用的xtype值...

返回此组件的xtype继承树，用字符'-'分隔。 所有可用的xtype值，请参见Ext.Component 类的头部。

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

示例用法:

var t = new Ext.form.TextField();
alert(t.getXTypes());  // alerts 'component/box/field/textfield'
参数:
  • 无。
返回值:
  • String
    xtype层次字符串
Component
hasListener( String eventName ) : Boolean
检测对象是否包含指定事件的任何监听器
检测对象是否包含指定事件的任何监听器
参数:
  • eventName : String
    检测的事件名
返回值:
  • Boolean
    如果事件被监听则为true，否则为false
Observable
hide () : Ext.Component
隐藏当前组件。 监听 beforehide' 事件并且返回false 可以取消隐藏组件的操作。 在隐藏组件之后触发...
隐藏当前组件。 监听 beforehide' 事件并且返回false 可以取消隐藏组件的操作。 在隐藏组件之后触发 ' hide' 事件。 如果组件被配置成 hidden 那么此方法在内部被调用。
参数:
  • 无。
返回值:
  • Ext.Component
    this
Component
isVisible () : Boolean
如果当前组件可见，返回true。
如果当前组件可见，返回true。
参数:
  • 无。
返回值:
  • Boolean
    如果当前组件可见，返回true，其它返回false。
Component
isXType ( String xtype , [ Boolean shallow ] ) : Boolean
Tests whether or not this Component is of a specific xtype. This can test whether this Component is descended from th...

测试此组件是否是指定的xtype。此方法既可以测试是否是指定的xtype的某个子类， 或者它是否直接是指定的xtype类(shallow=true)。

如果使用你自己的子类，必须知道组件必须注册它的xtype值。

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

示例用法:

var t = new Ext.form.TextField();
var isText = t.isXType('textfield');        // true
var isBoxSubclass = t.isXType('box');       // true, descended from BoxComponent
var isBoxInstance = t.isXType('box', true); // false, not a direct BoxComponent instance
参数:
  • xtype : String
    需要为当前组件进行检测的xtype
  • shallow : Boolean
    (可选) 如果为false，检测组件是否是xtype继承树中的某个子类（默认是这种情况）， 如果为true，只检测组件是否是指定的xtype类型。
返回值:
  • Boolean
    如果当前组件是指定xtype的子类，返回true，其它返回flase。
Component
mon ( Observable|Element item , Object|String ename , Function fn , Object scope , Object opt ) : void
向任何Observable对象(或者元素)上添加监听器，监听器将会在组件...

向任何Observable对象(或者元素)上添加监听器，监听器将会在组件销毁时被自动删除。
用法：

myGridPanel.mon(myGridPanel.getSelectionModel(), 'selectionchange', handleSelectionChange, null, {buffer: 50});

or:

myGridPanel.mon(myGridPanel.getSelectionModel(), {
    selectionchange: handleSelectionChange,
    buffer: 50
});
参数:
  • item : Observable|Element
    需要添加listener/listeners的项目。
  • ename : Object|String
    事件名，或者一个包含事件名属性的对象。
  • fn : Function
    (可选) 如果 ename 参数是一个事件名，此参数为处理函数。
  • scope : Object
    (可选)如果 ename 参数是一个事件名称，此参数是作用域 ( this 引用)，监听函数将会在此作用域中被执行。
  • opt : Object
    (可选)如果 ename 参数是一个事件名称， 此参数是 addListener 配置项。
返回值:
  • void
Component
mun ( Observable|Element item , Object|String ename , Function fn , Object scope ) : void
删除通过mon 方法添加的监听器。
删除通过mon 方法添加的监听器。
参数:
  • item : Observable|Element
    需要删除listener/listeners的项目。
  • ename : Object|String
    事件名称，或者一个包含事件名称属性的对象。
  • fn : Function
    (可选)如果 ename 参数是一个事件名称，此参数是一个处理函数。
  • scope : Object
    (可选)如果 ename 参数是一个事件名称，此参数是作用域 ( this 引用)，监听函数将会在此作用域中被执行。
返回值:
  • void
Component
nextSibling () : Ext.Component
返回所属容器中的下一个组件
返回所属容器中的下一个组件
参数:
  • 无。
返回值:
  • Ext.Component
Component
on( String eventName, Function handler, [Object scope], [Object options] ) : void
给对象添加事件处理器 (addListener的简写形式)
给对象添加事件处理器 (addListener的简写形式。)
参数:
  • eventName : String
    监听的事件类型
  • handler : Function
    事件调用的方法
  • scope : Object
    （可选）处理方法执行时的作用域 (this 的引用)。 如果被忽略。默认为触发事件的对象。
  • options : Object
    可选 包含处理器配置的对象。
返回值:
  • void
Observable
previousSibling () : Ext.Component
返回所属容器中的前一个组件
返回所属容器中的前一个组件
参数:
  • 无。
返回值:
  • Ext.Component
Component
purgeListeners() : void
移除对象上所有的监听器
移除对象上所有的监听器
参数:
  • 无。
返回值:
  • void
Observable
relayEvents( Object o, Array events ) : void
从指定的Observable上传递选择的事件就好像被当前对象触发一样。
从指定的Observable上传递选择的事件就好像被当前对象触发一样。
参数:
  • o : Object
    该Observable上的事件被当前对象传递。
  • events : Array
    传递的数组名。
返回值:
  • void
Observable
removeClass ( string cls ) : Ext.Component
从组件底层的元素上删除一个CSS类。
从组件底层的元素上删除一个CSS类。
参数:
  • cls : string
    需要移除的CSS类名
返回值:
  • Ext.Component
    this
Component
removeListener( String eventName, Function handler, [Object scope] ) : void
删除一个事件处理器。
删除一个事件处理器。
参数:
  • eventName : String
    处理器关联的事件类型。
  • handler : Function
    移除的处理器。 这应该是传递到addListener里的方法的引用。
  • scope : Object
    （可选）处理器指定的初始作用域。
返回值:
  • void
Observable
render ( [ Element/HTMLElement/String container ], [ String/Number position ] ) : void
在传递进来的HTML元素中渲染当前组件。...

在传递进来的HTML元素中渲染当前组件。

如果你正在使用一个Container 对象放置当前组件，那么请不要使用render方法。

当容器第一次被渲染时，它的子组件将会被容器的 layout 管理器渲染。

某些布局管理器允许动态添加子组件。它们包括 Ext.layout.CardLayout, Ext.layout.AnchorLayout, Ext.layout.FormLayout, Ext.layout.TableLayout。

当一个新的子组件被添加时，如果容器已经被渲染了， 你可能需要调用容器的 doLayout 方法来刷新视图，它将导致所有没有被渲染的子组件进行渲染操作。 此操作是必须的，这样你可以添加多个子组件而只刷新一次layout。

当创建复杂的UI时，非常重要的一点是，请记住调整子项目的尺寸和位置是容器的 layout 管理器的职责。 如果你希望子项目的尺寸对用户交互作出反应， 你必须为容器配置一个布局管理器，它将创建和管理你心里想要的那种布局。

忽略容器的layout 配置意味着将会使用一个基本的布局管理器，它除了按次序把子组件 渲染到容器中之外什么事情都不做。 这种情况下，任何尺寸和位置的调整操作都不会发生。

参数:
  • container : Element/HTMLElement/String
    (可选) 需要在其中渲染当前组件的元素。 如果它是从一个已存在的标签中创建的，此参数应该被忽略。
  • position : String/Number
    (可选) 容器中的一个元素ID或者一个DOM节点索引， 当前组件将会被插入到它前面 (默认append到容器的尾部)
返回值:
  • void
Component
resumeEvents() : void
重新开始触发事件。(参见suspendEvents) 如果事件以queueSuspended参数被挂起，则在事件被挂起时 ...
重新开始触发事件。(参见 suspendEvents) 如果事件以queueSuspended 参数被挂起，则在事件被挂起时触发的事件会被传递到所有的监听器上
参数:
  • 无。
返回值:
  • void
Observable
setAutoScroll ( Boolean scroll ) : Ext.BoxComponent
设置该组件内容溢出时是否自动显示滚动条。
设置该组件内容溢出时是否自动显示滚动条。
参数:
  • scroll : Boolean
    值为true的话组件自动显示滚动条。
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setDisabled ( Boolean disabled ) : Ext.Component
工具函数，使用布尔值设置有效/无效(disabled/enabled )。
工具函数，使用布尔值设置有效/无效(disabled/enabled )。
参数:
  • disabled : Boolean
返回值:
  • Ext.Component
    this
Component
setHeight ( Mixed height ) : Ext.BoxComponent
设置此组件的高度。该方法将触发resize事件。
设置此组件的高度。该方法将触发resize事件。
参数:
  • height : Mixed
    The new height to set.
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setMaxValue ( Number val ) : void
设置滑动条的最大值。如果当前的数值超过了最大值，则...
设置滑动条的最大值。如果当前的数值超过了最大值，则当前当前值会被改变。 Sets the maximum value for the slider instance. If the current value is more than the maximum value, the current value will be changed.
参数:
  • val : Number
    新的最大值
返回值:
  • void
MultiSlider
setMinValue ( Number val ) : void
设置滑动条的最小值。如果当前值小于最小值，则当前值...
设置滑动条的最小值。如果当前值小于最小值，则当前值将被改变。
参数:
  • val : Number
    新的最小值。
返回值:
  • void
MultiSlider
setPagePosition ( Number x , Number y ) : Ext.BoxComponent
设置组件在页面中的XY位置。 如果需要设置left和top值 ，请使用...
设置组件在页面中的XY位置。 如果需要设置left和top值 ，请使用setPosition方法。 该方法触发move事件。
参数:
  • x : Number
    The new x position
  • y : Number
    The new y position
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setPosition ( Number left , Number top ) : Ext.BoxComponent
设置组件的left和top值。设置组件的页面XY值，请使用setPagePosition方法。该方法触发...
设置组件的left和top值。设置组件的页面XY值，请使用setPagePosition方法。该方法触发move事件。
参数:
  • left : Number
    The new left
  • top : Number
    The new top
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setSize ( Mixed width , Mixed height ) : Ext.BoxComponent
设置BoxComponent的宽度和高度。 此方法触发resize事件...
设置BoxComponent的宽度和高度。 此方法触发resize事件。此方法可以接收单独的width或者height值作为参数， 或者你可以传递像这样的一个size对象： {width:10, height:20} 。
参数:
  • width : Mixed
    设置的新的width值。这可以是：
    • 一个Number类型指定Element新的宽度 Ext.Element.defaultUnit(默认为像素 :'px')。
    • 一个String类型用于设置width的CSS样式。
    • 一个size对象格式为 {width: widthValue, height: heightValue} 。
    • 值为 undefined 时，保留原来的width不变。
  • height : Mixed
    设置的新的height值(如果第一个参数传递了一个size对象，此参数没有必要传递)。这可以是：
    • 一个Number类型指定Element新的高度 Ext.Element.defaultUnit(默认为像素 :'px')。
    • 一个String类型用于设置height的CSS样式。也有可能不会被使用到。
    • 值为 undefined 时，保留原来的height不变。
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setValue ( Number value , Boolean animate ) : void
设置滑动条的的值，保证设置的值在最大值和最小值之间...
设置滑动条的的值，保证设置的值在最大值和最小值之间。
参数:
  • value : Number
    设置的值。（这个值将被约束至最大值和最小值之间）
  • animate : Boolean
    是否开启动画效果，默认为true
返回值:
  • void
SingleSlider
setVisible ( Boolean visible ) : Ext.Component
工具方法，通过使用布尔值隐藏或者显示当前组件。
工具方法，通过使用布尔值隐藏或者显示当前组件。
参数:
  • visible : Boolean
    true时显示，false时隐藏
返回值:
  • Ext.Component
    this
Component
setWidth ( Mixed width ) : Ext.BoxComponent
设置组件的宽度。 此方法触发resize事件。
设置组件的宽度。 此方法触发resize事件。
参数:
  • width : Mixed
    The new width to set.
返回值:
  • Ext.BoxComponent
    this
BoxComponent
show () : Ext.Component
显示当前组件。监听' beforeshow' 事件，返回 false 取消显示组件...
显示当前组件。监听' beforeshow' 事件，返回 false 取消显示组件。在显示组件之后触发' show' 事件。
参数:
  • 无。
返回值:
  • Ext.Component
    this
Component
suspendEvents( Boolean queueSuspended ) : void
暂停触发所有的事件。 (参看resumeEvents)
暂停触发所有的事件。（参看 resumeEvents)
参数:
  • queueSuspended : Boolean
    如果传递为true则排列好暂停的事件使得在调用 resumeEvents 后再触发它们，而不是抛弃所有暂停的事件。
返回值:
  • void
Observable
syncSize () : Ext.BoxComponent
强制组件的大小按照此组件底层元素当前的高度和宽度计算。
强制组件的大小按照此组件底层元素当前的高度和宽度计算。
参数:
  • 无。
返回值:
  • Ext.BoxComponent
    this
BoxComponent
syncThumb () : void
通过计算滑块在组件全长中所占的比例，来同步滑块的...
通过计算滑块在组件全长中所占的比例，来同步滑块的位置。 value. 当滑动条被缩放时，该方法将被自动调用，但是，如果渲染时渲染时采用自动宽度（auto width），这个方法将在需要时被另外的缩放处理函数所调用。 necessary.
参数:
  • 无。
返回值:
  • void
SingleSlider
un( String eventName, Function handler, [Object scope] ) : void
删除一个事件处理器(removeListener方法的简写形式)
删除一个事件处理器(removeListener方法的简写形式。)
参数:
  • eventName : String
    处理器关联的事件类型
  • handler : Function
    被删除的处理器 这应该是传入 addListener 中的方法的引用。
  • scope : Object
    （可选）为处理器指定的初始作用域。
返回值:
  • void
Observable
update ( Mixed htmlOrData , [ Boolean loadScripts ], [ Function callback ] ) : void
刷新组件的内部区域。
刷新组件的内部区域。
参数:
  • htmlOrData : Mixed
    如果已经通过tpl为当前组件配置了一个模板，那么 将会使用此参数来装配模板。 如果没有为当前组件配置模板，组件的内容区域将会通过Ext.Element 进行刷新。
  • loadScripts : Boolean
    (可选)只用在使用html配置时此参数才合法。默认为false。
  • callback : Function
    (可选)只用在使用html配置时此参数才合法。 当脚本加载完成时回调函数才被执行。
返回值:
  • void
Component
updateBox ( Object box ) : Ext.BoxComponent
设置此组件底层元素的盒子模型尺寸。(译者注：盒子模型是CSS术语，详细资料请自行搜索。)
设置此组件底层元素的盒子模型尺寸。(译者注：盒子模型是CSS术语，详细资料请自行搜索。)
参数:
  • box : Object
    一个格式为{x, y, width, height}的对象
返回值:
  • Ext.BoxComponent
    this
BoxComponent

公共事件

Event Defined By
added : ( Ext.Component this , Ext.Container ownerCt , number index )
当一个组件被添加到一个Ext.Container时触发
当一个组件被添加到一个Ext.Container时触发
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • ownerCt : Ext.Container
    用于组件的容器
  • index : number
    添加组件的位置
Component
afterrender : ( Ext.Component this )
在组件渲染完成之后触发...

在组件渲染完成之后触发。

afterrender事件在当前组件被rendered 结束之后、在为组件定义的所有afterRender方法执行之后 触发，并且，如果有stateful， 也在状态被保存之后才触发。

监听器将会以如下参数格式被调用:
  • this : Ext.Component
Component
beforechange : ( Ext.Slider slider , Number newValue , Number oldValue )
当滑动条改变之前触发。当事件处理函数返回false时，你可以取消这个事件并且...
当滑动条改变之前触发。当事件处理函数返回false时，你可以取消这个事件并且阻止滑动条的改变。
监听函数被调用时，将会传递以下参数：
  • slider : Ext.Slider
    滑动条（slider）
  • newValue : Number
    滑动条的新值。
  • oldValue : Number
    滑动条之前的值。
MultiSlider
beforedestroy : ( Ext.Component this )
在组件 destroyed 之前触发。 在事件监听器中返回false以停止 destroy 操作。
在组件 destroyed 之前触发。 在事件监听器中返回false以停止 destroy 操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforehide : ( Ext.Component this )
在调用hide方法隐藏组件之前触发。 在事件监听器中返回false可以停止隐藏操作。
在调用hide方法隐藏组件之前触发。 在事件监听器中返回false可以停止隐藏操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforerender : ( Ext.Component this )
在组件被rendered 之前触发。 在事件监听器中返回false可以停止render 操作。
在组件被rendered 之前触发。 在事件监听器中返回false可以停止render 操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforeshow : ( Ext.Component this )
在调用show()方法现实组件之前触发。 事件处理函数返回false可以停止show。
在调用show 方法现实组件之前触发。 事件处理函数返回false可以停止show。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforestaterestore : ( Ext.Component this , Object state )
在组件状态恢复之前触发。返回false停止恢复状态操作。
在组件状态恢复之前触发。返回false停止恢复状态操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    StateProvider返回的状态哈希值。 如果没有禁止此事件，那么状态对象会被传递给applyState。 默认情况下，这样简单地把属性值拷贝到当前组件中。 可以覆盖此方法以提供自定的状态恢复操作。
Component
beforestatesave : ( Ext.Component this , Object state )
在组件状态被保存到配置的状态提供者之前触发。 返回false可以停止保存。
在组件状态被保存到配置的状态提供者之前触发。 返回false可以停止保存。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    状态值哈希。 这由在组件上调用getState() 方法决定。 此方法必须由开发者提供，返回是否需要对状态进行描述，默认情况下， Ext.Component有一个空实现。
Component
change : ( Ext.Slider slider , Number newValue , Ext.slider.Thumb thumb )
滑动条改变时触发。
Fires when the slider value is changed.
监听函数被调用时，将会传递以下参数：
  • slider : Ext.Slider
    滑动条（slider）
  • newValue : Number
    滑动条的新值。
  • thumb : Ext.slider.Thumb
    被改变的滑块。
MultiSlider
changecomplete : ( Ext.Slider slider , Number newValue , Ext.slider.Thumb thumb )
在滑动条被改变时触发，并且所有的拖拽操作已经完成。
在滑动条被改变时触发，并且所有的拖拽操作已经完成。
监听函数被调用时，将会传递以下参数：
  • slider : Ext.Slider
    滑动条（slider）
  • newValue : Number
    滑动条的新值。
  • thumb : Ext.slider.Thumb
    被改变的滑块
MultiSlider
destroy : ( Ext.Component this )
在组件被销毁之后触发。
在组件被destroyed之后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
disable : ( Ext.Component this )
在组件被设置为无效状态后触发。
在组件被设置为无效状态后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
drag : ( Ext.Slider slider , Ext.EventObject e )
在拖拽时鼠标移动的过程中持续触发。
在拖拽时鼠标移动的过程中持续触发。
监听函数在被调用时，会传递如下参数：
  • slider : Ext.Slider
    滑动条（slider）
  • e : Ext.EventObject
    被触发的事件，源自Ext.dd.DragTracker
MultiSlider
dragend : ( Ext.Slider slider , Ext.EventObject e )
当拖拽完成时触发。
Fires after the drag operation has completed.
监听函数被调用时，将传递以下参数：
  • slider : Ext.Slider
    滑动条（slider）
  • e : Ext.EventObject
    从Ext.dd.DragTracker抛出的事件。
MultiSlider
dragstart : ( Ext.Slider slider , Ext.EventObject e )
当拖拽开始后触发。
当拖拽开始后触发。
监听函数被调用时，将会传递以下参数：
  • slider : Ext.Slider
    滑动条（slider）
  • e : Ext.EventObject
    从Ext.dd.DragTracker抛出的事件。
MultiSlider
enable : ( Ext.Component this )
当组件被设置为有效(enabled)之后触发。
当组件被设置为有效(enabled)之后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
hide : ( Ext.Component this )
在组件被隐藏之后触发。 当调用hide 方法隐藏组件之后触发。
在组件被隐藏之后触发。 当调用hide 方法隐藏组件之后触发。
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
move : ( Ext.Component this , Number x , Number y )
在组件移动之后触发。
在组件移动之后触发。
监听器将会用如下的参数格式来调用:
  • this : Ext.Component
  • x : Number
    The new x position
  • y : Number
    The new y position
BoxComponent
removed : ( Ext.Component this , Ext.Container ownerCt )
当一个组件被从Ext.Container容器中删除时触发
当一个组件被从Ext.Container容器中删除时触发
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • ownerCt : Ext.Container
    持有组件的容器
Component
render : ( Ext.Component this )
在组件被渲染之后触发。
在组件被 rendered(渲染) 之后触发。
监听器将以如下的参数格式被调用:
  • this : Ext.Component
Component
resize : ( Ext.Component this , Number adjWidth , Number adjHeight , Number rawWidth , Number rawHeight )
在组件被调整大小之后触发。
在组件被调整大小之后触发。
监听器将以如下的参数格式被调用:
  • this : Ext.Component
  • adjWidth : Number
    这是width调整后的值
  • adjHeight : Number
    这是height调整后的值
  • rawWidth : Number
    这是width原来的值
  • rawHeight : Number
    这是height原来的值
BoxComponent
show : ( Ext.Component this )
在调用show 方法显示组件之后触发。
在调用show 方法显示组件之后触发。
监听器将会用如下的参数格式被调用:
  • this : Ext.Component
Component
staterestore : ( Ext.Component this , Object state )
组件状态被存储之后触发。
组件状态被存储之后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    StateProvider返回的状态哈希值。 如果没有禁止此事件，那么状态对象会被传递给applyState。 默认情况下，这样简单地把属性值拷贝到当前组件中。 可以覆盖此方法以提供自定的状态恢复操作。
Component
statesave : ( Ext.Component this , Object state )
在组件状态被保存到所配置的状态提供者之后触发。
在组件状态被保存到所配置的状态提供者之后触发。
监听器将会用如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    状态值hash。 这是由在足见上调用getState() 方法决定的。 开发者必须提供此方法以返回是否需要恢复状态，默认情况下， Ext.Component有一个空实现。
Component


Class Ext.slider.Thumb

包: | Ext.slider
定义类的文件: | Slider.js
类: | Thumb
继承自: | Object
在滑动条（slider）上现实一个滑块。滑块通常不会被人工创建，而是在 Ext.Slider内被自动创建。

配置项

Config Options |  | Defined By
 | constrain : Boolean 如果为true，则滑块不可以和兄弟滑块重叠。 | Thumb
 | slider : Ext.slider.MultiSlider 滑块所在的滑动条（slider） | Thumb

公共属性

Property |  | Defined By
 | slider : Ext.slider.MultiSlider 滑块所在的滑动条（slider） | Thumb

公共方法

Method Defined By
disable () : void
如果当前滑块处于启用状态，则把将其禁用。
如果当前滑块处于启用状态，则把将其禁用。
参数:
  • 无。
返回值:
  • void
Thumb
enable () : void
如果当前滑块处于禁用状态，则把将其启用。
如果当前滑块处于禁用状态，则把将其启用。
参数:
  • 无。
返回值:
  • void
Thumb
initEvents () : void
为滑块设置一个Ext.dd.DragTracker
为滑块设置一个Ext.dd.DragTracker
参数:
  • 无。
返回值:
  • void
Thumb
render () : void
在滑动条内渲染一个滑块
在滑动条内渲染一个滑块
参数:
  • 无。
返回值:
  • void
Thumb

公共事件

该类没有公共事件。


Observable
    Component
      BoxComponent
        Container
          Panel
            Tip
              Tip

Class Ext.slider.Tip

包: | Ext.slider
定义类的文件: | SliderTip.js
类: | Tip
继承自: | Tip
采用Ext.Tip所做的一种显示滑动条数值的简单插件。用例：
new Ext.Slider({
    width: 214,
    minValue: 0,
    maxValue: 100,
    plugins: new Ext.slider.Tip()
});
可以通过覆盖getText方法来提供自定义的提示文字：
 new Ext.Slider({
     width: 214,
     minValue: 0,
     maxValue: 100,
     plugins: new Ext.slider.Tip({
         getText: function(thumb){
             return String.format('{0}% complete', thumb.value);
         }
     })
 });

配置项

Config Options Defined By
activeItem : String/Number
一个string型的组件id，或者组件的数字索引， 它需要...
一个string型的组件id，或者组件的数字索引， 它需要在渲染时在容器内的布局管理器中被初始化并激活。 例如：activeItem: 'item-1' 或者 activeItem: 0 ( 索引 0 =容器子项目集合中的第一个元素)。 activeItem仅仅适用于一次显示一个组件的布局模式(比如 Ext.layout.AccordionLayout, Ext.layout.CardLayout 和 Ext.layout.FitLayout)。 与 Ext.layout.ContainerLayout.activeItem 相关。
Container
allowDomMove : Boolean
在渲染时组件是否可以移动Dom节点(默认为true)。
Component
anchor : String
注: 这个配置只用于该组件被包含在一个已使用AnchorLayout...

注: 这个配置只用于该组件被包含在一个已使用 AnchorLayout (或者其子类)配置的Container时。 基于布局管理器，例如：

  • Ext.form.FormPanel
  • 指定 layout: 'anchor' // or 'form', or 'absolute'

参见 Ext.layout.AnchorLayout. anchor 。

BoxComponent
animCollapse : Boolean
true将会在panel被折叠时使用动画效果，false将会跳过动画效果....
true 将会在panel被折叠时使用动画效果， false 将会跳过动画效果( 如果Ext.Fx类 有效，默认为 true ，否则为 false )。
Panel
applyTo : Mixed
指定一个元素的id、一个DOM元素或者一个已经存在并被渲染到DIV中的元素，此DIV已经被...

指定一个元素的id、一个DOM元素或者一个已经存在并被渲染到DIV中的元素，此DIV已经被 渲染到document中，并且为当前组件指定了一些结构化的标签。

  • 描述 :
      当使用了 applyTo， 在主元素中也可以用id或者CSS类名来指定组件的托管部分， 并且，如果可以的话，创建的组件可能也会试图在那个标签中创建它的子组件。
  • 注意 :
      当使用此配置项时，无需调用render()方法。
      如果指定了applyTo属性，任何传递给 renderTo 的值都会被忽略，并且目标元素的父节点将会自动被用作组件的容器。
Panel
autoDestroy : Boolean
如果为true，容器将自动销毁任何从其中被删除的组件， 否则...
如果为true，容器将自动销毁任何从其中被删除的组件， 否则必须手动处理销毁操作(默认为true)。
Container
autoHeight : Boolean
如果值为true，height配置项为'auto'，否则值为false的话使用固定的高度...

如果值为true，height配置项为'auto'，否则值为false的话使用固定的高度， 或者可以由其父类容器 layout manager来控制。(默认值为 false)。

注: 虽然很多组件继承了这个配置选项，但不是所有这些组件的自适应高度配置都会像期望的那样起作用。 设置autoHeight：值为true时，浏览器将根据元素的内容自动设置高度，这将意味着Ext不会去管理高度。

如果是由浏览器来管理高度，需要注意的是，通过浏览器进行调整的结构组件内不能被发现， 因此宽度的变化可能导致需要进行同步处理元素的高度。 例如：

var w = new Ext.Window({
    title: 'Window',
    width: 600,
    autoHeight: true,
    items: {
        title: 'Collapse Me',
        height: 400,
        collapsible: true,
        border: false,
        listeners: {
            beforecollapse: function() {
                w.el.shadow.hide();
            },
            beforeexpand: function() {
                w.el.shadow.hide();
            },
            collapse: function() {
                w.syncShadow();
            },
            expand: function() {
                w.syncShadow();
            }
        }
    }
}).show();
Panel
autoLoad : Object/String/Function
一个合法的url描述，依照Updater Ext.Updater.update 方法...
一个合法的url描述，依照Updater Ext.Updater.update 方法。如果autoLoad不为null，panel将会在渲染之后立即尝试加载它的内容。

URL将会成为当前panel的body元素的默认URL，这样它可以在任意时刻被 refresh.

Panel
autoScroll : Boolean
如果值为true，将会在该元素上使用overflow:'auto'配置，并且在必要的时候...
如果值为true，将会在该元素上使用overflow:'auto'配置，并且在必要的时候自动显示滚动条，否则，溢出部分的组件都会被切除(默认值为 false)。
BoxComponent
autoShow : Boolean
如果组件需要检测隐藏CSS属性(如 'x-hidden' 或者 'x-hide-display')并且在渲染时删除...
如果组件需要检测隐藏CSS属性(如 'x-hidden' 或者 'x-hide-display')并且在渲染时删除它们 (默认为false)，设置此值为true。
Component
autoWidth : Boolean
如果为true，使用width:'auto'配置，否则使用固定的宽度...

如果为true，使用width:'auto'配置，否则使用固定的宽度，或者可以由其父类容器的layout manager来控制。(默认值为 false)。

注: 虽然很多组件继承了这个配置选项，但不是所有这些组件的自适应宽度配置都会像期望的那样起作用。 设置autoWidth：值为true时，浏览器将根据元素的内容自动设置宽度，这将意味着Ext不会去管理宽度。

如果是由浏览器来管理宽度，需要注意的是，通过浏览器进行调整的结构组件内不能被发现，因此宽度的变化可能导致需要进行同步处理元素的宽度。 例如，在这个元素的目标是：

<div id='grid-container' style='margin-left:25%;width:50%'></div>
当浏览器窗口改变时，渲染后的Panel必须监听浏览器窗口大小的变化，以便通知子项，浏览器改变了其宽度：

var myPanel = new Ext.Panel({
    renderTo: 'grid-container',
    monitorResize: true, // relay on browser resize
    title: 'Panel',
    height: 400,
    autoWidth: true,
    layout: 'hbox',
    layoutConfig: {
        align: 'stretch'
    },
    defaults: {
        flex: 1
    },
    items: [{
        title: 'Box 1',
    }, {
        title: 'Box 2'
    }, {
        title: 'Box 3'
    }],
});
BoxComponent
baseCls : String
应用到当前panel元素上的基本CSS类(默认为 'x-panel' )...
应用到当前panel元素上的基本CSS类(默认为 'x-panel' )。

另一个可选的默认变量是指定 'x-plain' ，它将去掉所有样式，除了Ext布局功能所必须的属性 (例如overflow:hidden)。另请参见 unstyled 。

Panel
bbar : Object/Array
panel底部工具栏。 此参数可以是一个Ext.Toolbar 、一个工具栏配置项，或者一个buttons/button配置数组---用来被添加到工具栏中...

panel底部工具栏。 此参数可以是一个Ext.Toolbar 、一个工具栏配置项，或者一个buttons/button配置数组---用来被添加到工具栏中。 注意，此参数在渲染之后是无效的。如果在渲染之后需要访问底部工具栏 ，请使用 getBottomToolbar。

注意:尽管Toolbar可以包含Field组件，但它们不会 通过加载祖先FormPanel而被更新。Panel的工具栏不是标准Container->Component 层次的一部分，所以它们不会被扫面以收集表单项。但是，这些值还是会 被提交，因为提交表单的参数是从DOM树中收集的。

Panel
bbarCfg : Object
一个 ADomHelper 元素的配置对象，描述了当前Panelbbar元素的结构...

一个DomHelper 元素的配置对象，描述了当前Panel的bbar元素结构。 另请参见 bodyCfg 。

Panel
bodyBorder : Boolean
True将会在Panel的body元素内部显示一个边框，false将会隐藏它 (默认为true)。只有当border == true 时...
True将会在Panel的body元素内部显示一个边框，false将会隐藏它 (默认为true)。只有当border == true 时，此参数才会被应用。如果border == true 并且 bodyBorder == false， 将会给整个body元素一种凹陷式的外观。
Panel
bodyCfg : Object
一个DomHelper 元素描述对象，可以被指定给任何Panel Element...

一个DomHelper 元素描述对象，可以被指定给任何Panel Element.

默认情况下，以下表格中的Default元素将会被用作html标签，用来创建一个子元素 ，与Default类名相匹配( baseCls 将会被 baseCls 替换 ):

Panel      Default  Default             Custom      Additional       Additional
Element    element  class               element     class            style
========   ==========================   =========   ==============   ===========
header     div      baseCls+'-header'   headerCfg   headerCssClass   headerStyle
bwrap      div      baseCls+'-bwrap'     bwrapCfg    bwrapCssClass    bwrapStyle
+ tbar     div      baseCls+'-tbar'       tbarCfg     tbarCssClass     tbarStyle
+ body     div      baseCls+'-body'       bodyCfg     bodyCssClass     bodyStyle
+ bbar     div      baseCls+'-bbar'       bbarCfg     bbarCssClass     bbarStyle
+ footer   div      baseCls+'-footer'   footerCfg   footerCssClass   footerStyle

例如，配置一个自定义的元素，用来强制 body 元素使用不同形式的标签，而不是使用默认创建的。 这种情况的一个例子可能是 创建一个子 Panel，包含自定义的内容，例如header，或者通过使body拥有一个<center> 元素， 从而强制Panel中的所有内容居中:

new Ext.Panel({
    title: 'Message Title',
    renderTo: Ext.getBody(),
    width: 200, height: 130,
    bodyCfg: {
        tag: 'center',
        cls: 'x-panel-body',  // Default class not applied if Custom element specified
        html: 'Message'
    },
    footerCfg: {
        tag: 'h2',
        cls: 'x-panel-footer'        // same as the Default class
        html: 'footer html'
    },
    footerCssClass: 'custom-footer', // additional css class, see addClass

    footerStyle:    'background-color:red' // see bodyStyle

});

以上例子也显式创建了一个 footer ，拥有自定义的标签和样式。

Panel
bodyCssClass : String/Object/Function
可选的CSS类选择器，被应用到body 元素上，其格式为Ext.Element.addClass所 期望的值(默认为null)...
可选的CSS类选择器，被应用到body 元素上，其格式为Ext.Element.addClass所 期望的值(默认为null)。参见 bodyCfg.
Panel
bodyStyle : String/Object/Function
自定义的CSS样式，它将被应用到body 元素上，其格式为...
自定义的CSS样式，它将被应用到body 元素上，其格式为Ext.Element.applyStyles 所期望的值(默认为null)。参见bodyCfg。
Panel
border : Boolean
True将会显示panel body元素的边框，false将会隐藏它们 (默认为true)。默认情况下，边框是一个2px宽度的内嵌边框...
True将会显示panel body元素的边框，false将会隐藏它们 (默认为true)。默认情况下，边框是一个2px宽度的内嵌边框， 但是，以后可以通过设置bodyBorder 为false以改变它。
Panel
boxMaxHeight : Number
设置组件的最大高度值...

设置组件的最大高度值。

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

BoxComponent
boxMaxWidth : Number
设置组件的最大宽度值...

设置组件的最大宽度值。

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

BoxComponent
boxMinHeight : Number
设置组件的最小高度值...

设置组件的最小高度值。

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

BoxComponent
boxMinWidth : Number
设置组件的最小宽度值...

设置组件的最小宽度值。

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

BoxComponent
bubbleEvents : Array
一个事件数组，当这些事件被触发时，将会被冒泡到所有父容器中。参见....

一个事件数组，当这些事件被触发时，将会被冒泡到所有父容器中。参见 Ext.util.Observable.enableBubble。 默认为 []。

Container
bufferResize : Boolean/Number
当设置为true时(50毫秒)或者是一个毫秒数值， 指定给当前容器的布...
当设置为true时(50毫秒)或者是一个毫秒数值， 指定给当前容器的布局管理器将会缓存它计算出的频率，然后 对组件进行一次重新布局操作。 对于重量级的容器，或者拥有大量子组件的容器来说，这非常有用， 因为频繁进行布局是非常昂贵的。 默认为 50 .
Container
buttonAlign : String
添加到当前panel的所有 buttons 的对齐方式。 合法的值有...
添加到当前panel的所有 buttons 的对齐方式。 合法的值有 'right' , 'left' 和 'center' (默认为 'right' )。
Panel
buttons : Array
Panel的按钮数组，它们从 buttons 配置属性创建。只读。
Panel
bwrapCfg : Object
一个DomHelper 元素描述对象，描述了当前Panel的 bwrap 的元素的结构...

一个DomHelper 元素描述对象，描述了当前Panel的 bwrap 的元素的结构。另请参见 bodyCfg 。

Panel
clearCls : String
应用到特殊的clearing div的CSS类， 这个clearing div直接渲染到每个form field的包装器后面...

应用到特殊的clearing div的CSS类， 这个clearing div直接渲染到每个form field的包装器后面，以提供 清除field的功能(默认为 'x-form-clear-left')。

注意: 只有在当前组件被渲染到一个使用FormLayout 布局(例如 Ext.form.FormPanel 或者指定 layout:'form')的 容器中、或者是指定了一个fieldLabel 、或者指定isFormField=true 时此配置才有效。

另请参见 Ext.layout.FormLayout. fieldTpl。

Component
closable : Boolean
Panel自身不支持关闭操作，但是Panel的一些子类 (例如Ext.Window) ，或者处于Ext.TabPanel中的 Panel支持...
Panel自身不支持关闭操作，但是Panel的一些子类 (例如Ext.Window) ，或者处于Ext.TabPanel中的 Panel支持。 指定此参数为 true 可以在这些情况下启用关闭。默认为 false 。
Tip
cls : String
一个可选的额外CSS类，它将被添加到当前组件的元素上(默认为'')...
一个可选的额外CSS类，它将被添加到当前组件的元素上(默认为'')。 此属性对于在组件上，或者它的任何使用标准CSS规则的孩子节点上， 添加定制的样式非常有用。
Component
collapseFirst : Boolean
将会确保折叠/展开(collapse/expand)按钮总是被渲染在第一个位置...
true 将会确保折叠/展开(collapse/expand)按钮总是被渲染在第一个位置， 在panel顶部的工具栏中位于任何其它工具左侧， false 将会把它渲染在最后(默认为 true )。
Panel
collapsed : Boolean
如果当前panel被折叠为true。只读。
Panel
collapsedCls : String
在被折叠后，一个被添加到panel元素上的CSS类 (默认为 'x-panel-collapsed' )。
Panel
collapsible : Boolean
True将会使panel折叠并且会自动把展开/折叠(expand/collapse)按钮渲染到顶部...
True将会使panel折叠并且会自动把展开/折叠 (expand/collapse)按钮渲染到顶部工具按钮区域，false将 保持panel尺寸固定，没有按钮(默认为false)。
Panel
contentEl : String
(可选)指定一个已存在的HTML元素，或者一个已存在HTML元素的...

(可选)指定一个已存在的HTML元素，或者一个已存在HTML元素的 id ，它们将被用作当前组件的内容。

  • 描述 :
    此配置选项被用来将一个已存在的HTML元素 插入到一个新组件(在组件渲染之后它简单地移动DOM元素) 的layout元素中，使它成为该组件的内容。
  • 注意 :
    指定的HTML元素将被append到组件的layout元素中， 在所有配置的 HTML 被插入之后， 并且，这样的话，在render事件 被触发时，document中将不再包含此元素。
    指定的HTML元素将不会参与组件所有可能使用的 layout 过程(译者注：指这些HTML元素 不会参与布局操作)。 它仅是HTML而已。布局操作实在孩子 items 上进行的。
    添加 x-hidden 或者 x-hide-display CSS类，以防在内容渲染到panel时发生闪烁。
Component
ctCls : String
一个可选的外部CSS样式，添加到这个组件的容器(默认值为 '')。 这个方法对于使用标准的CSS规则...

一个可选的外部CSS样式，添加到这个组件的容器(默认值为 '')。 这个方法对于使用标准的CSS规则，为组件或它的任何一个子组件添加特定的样式非常有用。 参见 Ext.layout.ContainerLayout和 extraCls 。

注意: ctCls 默认为 ''期望如下的类，它们将指定一个默认值:

  • Box Layout : 'x-box-layout-ct'
使用一个额外的CSS类配置以上的Class，它是append到默认对象上的。例如， 对于BoxLayout (Hbox and Vbox):
                                ctCls: 'x-box-layout-ct custom-class'

Component
data : Mixed
初始化数据集，它将被应用到 tpl 上以刷新组件的内容区域。
Component
defaultAlign : String
实验性参数。 当前tip默认的Ext.Element.alignTo 锚定位置值，与它的起源元素...
实验性参数。 当前tip默认的Ext.Element.alignTo 锚定位置值，与它的起源元素(译者注：指弹出tip那个元素)有关(默认为"tl-bl?")。
Tip
defaultType : String
当一个子项目通过一个原生的配置对象 而不是一个组件的实例指定时。...

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

默认为 'panel' ， Ext.menu.Menu 默认为 'menuitem' ， Ext.Toolbar 和 Ext.ButtonGroup 默认为 'button' 。

Container
defaults : Object|Function
此选项是在所有添加的项目上应用默认设置的手段， 这些项目要么是通过...

此选项是在所有添加的项目上应用默认设置的手段， 这些项目要么是通过 items 配置项添加的， 或者是通过 add 或者是通过 insert 方法添加的。

如果添加的项目是一个配置对象， 并且不是一个组件的实例， 那么默认参数将会被无条件地被应用。 如果添加的项目是一个组件的实例， 那么默认参数将有条件地被应用，以免覆盖项目上的现有属性你。

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

例如，如需自动在 Ext.Panel 所包含的每个项目上应用padding属性，你可以传递: defaults: {bodyStyle: 'padding:15px'} 。

用法:

defaults: {               // defaults are applied to items, not the container
    autoScroll:true
},
items: [
    {
        xtype: 'panel',   // defaults do not have precedence over
        id: 'panel1',     // options in config objects, so the defaults
        autoScroll: false // will not be applied here, panel1 will be autoScroll:false
    },
    new Ext.Panel({       // defaults do
                                     have precedence over options
        id: 'panel2',     // options in components, so the defaults
        autoScroll: false // will be applied here, panel2 will be autoScroll:true.
    })
]
Container
disabled : Boolean
当前组件处于无效状态时为true。 Read-only.
Panel
disabledClass : String
当组件处于无效状态时添加到组件上的CSS类(默认为 'x-item-disabled')。
Component
draggable : Boolean/Object
true 可以让当前panel启用拖拽操作(默认为 false )...

true 可以让当前panel启用拖拽操作(默认为 false )。

如需自定义的drag/drop实现，也可以向此配置项传递一个 Ext.Panel.DD配置替代 true 。 Ext.Panel.DD是一个内部没有文档化的类，它在周围移动代理元素 代替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();
Panel
elements : String
panel元素列表，以逗号分隔，在panel被渲染时初始化。 通常情况下...
panel元素列表，以逗号分隔，在panel被渲染时初始化。 通常情况下，此列表在配置时根据添加到panel的项目被自动创建， 但有时，即使没有在配置时指定，对于确保一个结构化的元素被渲染也很有用 (例如，你可能希望在panel被渲染后动态地添加一个按钮或者工具栏)。 添加这些元素到此列表中将会在panel被渲染时分配必须的占位符。 合法的值有
  • header
  • tbar (top bar)
  • body
  • bbar (bottom bar)
  • footer
Defaults to ' body '.
Panel
fbar : Object/Array
一个Toolbar 对象、一个Toolbar配置项，或者一个Buttons/ Button 配置数组，...

一个Toolbar 对象、一个Toolbar配置项，或者一个Buttons/ Button 配置数组，它们描述了一个被添加到当前Panel底部元素的 Toolbar.

在渲染后， fbar 将会为一个Toolbar 实例。

如果指定了 buttons ，它们将替代 fbar 配置项。

Panel的 buttonAlign 配置项目将会影响这些项目的布局，例如:
var w = new Ext.Window({
    height: 250,
    width: 500,
    bbar: new Ext.Toolbar({
        items: [{
            text: 'bbar Left'
        },'->',{
            text: 'bbar Right'
        }]
    }),
    buttonAlign: 'left', // anything but 'center' or 'right' and you can use '-', and '->'

                                  // to control the alignment of fbar items
    fbar: [{
        text: 'fbar Left'
    },'->',{
        text: 'fbar Right'
    }]
}).show();

注意:尽管Toolbar可以包含Field组件，但它们不会 通过加载祖先FormPanel而被更新。Panel的工具栏不是标准Container->Component 层次的一部分，所以它们不会被扫面以收集表单项。但是，这些值还是会 被提交，因为提交表单的参数是从DOM树中收集的。

Panel
fieldLabel : String
紧靠此field显示的标签文本(默认值为 '')。注意...

紧靠此field显示的标签文本(默认值为 '')。

注意:只有在当前组件被渲染到一个使用FormLayout 的容器中时，此配置才有效。 (例如 Ext.form.FormPanel 或 指定 layout:'form')。

另请参见 hideLabel 、 Ext.layout.FormLayout和 fieldTpl。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Name'
    }]
});
Component
flex : Number
注: 这个配置只用于该组件被包含在一个已使用BoxLayout配置的Container中时...

注: 这个配置只用于该组件被包含在一个已使用BoxLayout配置的Container中时。通过计算每一个子组件的flex值所占全部flex值之和的比例，来决定子组件的宽(HBoxLayout)高(VBoxlayout)。 任何子项的 flex = 0 或 flex = undefined 将不被设置(初始值大小将不被改变)。

BoxComponent
floating : Mixed
此参数被用来配置底层的 Ext.Layer. 此配置参数可接受的值有...

此参数被用来配置底层的 Ext.Layer. 此配置参数可接受的值有:

  • false : 默认。
    在渲染的地方以内嵌的方式显示panel.
  • true :
    浮动panel (绝对定位，有自动衬垫和阴影)。
      设置floating为true将会为当前panel创建一个Ext.Layer 并且在负值偏移量处显示panel，这样它就是隐藏的。
      既然panel被绝对定位，位置必须在渲染之后被显式设置 (例如 myPanel.setPosition(100,100); )。
      注意: 如果浮动面板，你必须总是指定一个固定的宽度， 否则它将是自动宽度并且总是展开以便填充到视口右侧 边缘。
  • object :
    指定的对象将会被用作将会被创建的 Ext.Layer的 配置对象。
Panel
footer : Ext.Element
Panel底部Element 。只读。此元素被用来容纳Panel的...
Panel底部Element 。只读。

此元素被用来容纳Panel的 buttons 或者 fbar 。

注意: 另请参见 el 的注释。

Panel
footerCfg : Object
一个DomHelper 元素的配置对象，描述了当前Panel的footer元素结构。 另请参见...

一个DomHelper 元素的配置对象，描述了当前Panel的footer元素结构。 另请参见 bodyCfg 。

Panel
forceLayout : Boolean
如果此值为true，容器将将强制初始化一次布局操作...
如果此值为true，容器将将强制初始化一次布局操作， 即使容器处于隐藏或者折叠状态。 此配置项对于在一个折叠或者隐藏的容器中强制渲染非常有用 (默认为false)。
Container
frame : Boolean
默认情况下使用 false ，渲染简单的1px的正方形边框。 true 将会渲染9个元素，以自定义的圆角结束...
默认情况下使用 false ，渲染简单的1px的正方形边框。 true 将会渲染9个元素，以自定义的圆角结束 (另请参见 Ext.Element.boxWrap)。

每种情况下产生的模板描述如下:

// frame = false
<div id="developer-specified-id-goes-here" class="x-panel">

    <div class="x-panel-header"><span class="x-panel-header-text">Title: (frame:false)</span></div>

    <div class="x-panel-bwrap">
        <div class="x-panel-body"><p>html value goes here</p></div>
    </div>
</div>

// frame = true (create 9 elements)
<div id="developer-specified-id-goes-here" class="x-panel">
    <div class="x-panel-tl"><div class="x-panel-tr"><div class="x-panel-tc">
        <div class="x-panel-header"><span class="x-panel-header-text">Title: (frame:true)</span></div>
    </div></div></div>

    <div class="x-panel-bwrap">
        <div class="x-panel-ml"><div class="x-panel-mr"><div class="x-panel-mc">
            <div class="x-panel-body"><p>html value goes here</p></div>
        </div></div></div>

        <div class="x-panel-bl"><div class="x-panel-br"><div class="x-panel-bc"/>
        </div></div></div>
</div>
Panel
header : Ext.Element
Panel的headerElement. 只读。此元素被用来容纳 title和 tools...
Panel的headerElement. 只读。

此元素被用来容纳 title和 tools

注意: 另请参见 el 的注释。

Panel
headerAsText : Boolean
true 将会在 header 中显示panel title ， false 将会隐藏它(默认为 true )。
Panel
headerCfg : Object
一个DomHelper 元素的配置对象，描述了当前Panel的header元素结构...

一个DomHelper 元素的配置对象，描述了当前Panel的header元素结构。 另请参见 bodyCfg 。

Panel
height : Number
组件的高度(默认值为 auto)。注:如果想使用百分比的方式...
组件的高度(默认值为 auto)。注:如果想使用百分比的方式来设置值，请查看 Ext.Component.anchor。
BoxComponent
hidden : Boolean
如果当前组件处于隐藏状态，此值为true。Read-only。
Component
hideBorders : Boolean
设置为true可以隐藏所包含的每个组件的边框， false为遵照组件现有的边框设置...
设置为true可以隐藏所包含的每个组件的边框， false为遵照组件现有的边框设置(默认为 false)。
Container
hideCollapseTool : Boolean
true 将会在 collapsible == true 时隐藏展开/折叠按钮， false 将会显示它(默认为 false )。
Panel
hideLabel : Boolean
true时完全隐藏label元素 ( label 和 separator)。 默认为 false。 默认情况下，即使你不指定...

true时完全隐藏label元素 ( label 和 separator)。 默认为 false。 默认情况下，即使你不指定 fieldLabel 它的空间仍然会被保留，这样这块区域会与其它确实拥有label的区域位于同一排。 讲此值设置为 true 将导致此区域不再保留此空间。

注意: 参见 clearCls 的注释。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield'
        hideLabel: true
    }]
});
Component
hideMode : String
组件如何隐藏，支持的值有： 'visibility' (css visibility), 'offsets' (位置偏移量为负值) 和...

组件如何隐藏，支持的值有： 'visibility' (css visibility), 'offsets' (位置偏移量为负值) 和 'display' (css display).

注意:一般首选默认值 'display'，因为当组件第一次显示的时候它们会自动进行布局 (隐藏的时候不会调整尺寸)。

Component
hideParent : Boolean
此值为true时，当调用hide/show方法时，将会hide和show组件的容器...
此值为true时，当调用hide/show方法时，将会hide和show组件的容器；false时将会 hide和show组件自身(默认为false)。例如，这可以用作window上隐藏按钮的一种 快捷操作，通过设置此按钮的hideParent:true，然后把它添加到window上。
Component
html : String/Object
一个HTML片段，或者一个 DomHelper 描述，用作layout元素的内容(默认为'')。...
一个HTML片段，或者一个 DomHelper 描述，用作layout元素的内容(默认为'')。 这个HTML内容在组件渲染之后才被添加，所以在 render 出发的时候，document中尚未包含此HTML。 但是这个内容将会在所有配置的 contentEl 之前被插入到body标签中。
Component
iconCls : String
CSS类选择器，指定被用作头部图标的背景图片(默认为'')...
CSS类选择器，指定被用作头部图标的背景图片(默认为'')。

指定自定义图表类的示例就像:

// specify the property in the config for the class:
     ...
     iconCls: 'my-icon'

// css class that specifies background image to be used as the icon image:
.my-icon { background-image: url(../images/my-icon.gif) 0 6px no-repeat !important; }
Panel
id : String
当前组件唯一的id(默认为auto-assigned id)...

当前组件唯一的id(默认为auto-assigned id)。 如果你需要在以后访问组件，而又没有一个有效的组件对象引用，那么你需要指定一个 id( 也就是，使用Ext. getCmp方法 )。

注意，此id也将被用作组件底层HTML标签的id，这些标签被渲染到页面中。 这将允许你编写基于id的CSS规则，以独立地描述指定的实例；并且，也可以通过 组件父标签的id选中子元素。

注意:为了避免与唯一的id 产生重复， 请参见 itemId 和 ref 。

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

Component
itemCls : String
注意: 只有在当前组件被渲染到一个使用FormLayout 布局的 容器中时此配置才有效...

注意: 只有在当前组件被渲染到一个使用FormLayout 布局的 容器中时此配置才有效。 (例如Ext.form.FormPanel 或者指定 layout:'form')。

一个附加的CSS类，应用到div上，包装当前field的表单元素。 如果提供了此参数， field级上的itemCls将会覆盖 container级上提供的 默认itemCls。 为itemCls指定的值将会被添加默认的 类('x-form-item')。

既然它被应用到项目的包装器上(参见 Ext.layout.FormLayout。 fieldTpl)， 它将允许你编写能应用到此field、label(如果有指定)、或者field内部任何其它元素的标准CSS规则。

注意: 参考 fieldLabel的注释。 .

示例用法:

// Apply a style to the field's label:
<style>
    .required .x-form-item-label {font-weight:bold;color:red;}
</style>

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Name',
        itemCls: 'required' //this label will be styled
    },{
        xtype: 'textfield',
        fieldLabel: 'Favorite Color'
    }]
});
Component
itemId : String
当没有可利用的对象引用时，itemId可以作为第二选择，用来获得一个组件的引用， 代替 ...

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

var c = new Ext.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'); // 与 Ext.getCmp()不同

p2 = p1.ownerCt.getComponent('p2'); // 通过兄弟对象获得引用

另请参见 id 和 ref 。

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

Component
items : MixedCollection
当前容器中的子组件集合 Ext.util.MixedCollection
Container
keys : Object/Array
一个Ext.KeyMap 配置对象 (其格式为Ext.KeyMap.addBinding 所期望的值...
一个Ext.KeyMap 配置对象 (其格式为Ext.KeyMap.addBinding 所期望的值，用来向当前panel上绑定自定义的按键处理(默认为 null )
Panel
labelSeparator : String
每个fieldLabel 文本后面现实的分隔符。 此属性可以在多个层次上进行配置...

每个fieldLabel 文本后面现实的分隔符。 此属性可以在多个层次上进行配置。优先顺序为：

  • field / component level
  • container level
  • layout level (默认为冒号 ':')
如不需要为当前field的label显示分隔符，指定一个空字符串''即可。

注意:参见 clearCls 的注释。

另请参见 hideLabel 和 Ext.layout.FormLayout。 fieldTpl。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    layoutConfig: {
        labelSeparator: '~'   // layout config has lowest priority (defaults to ':')
    },
    labelSeparator: '>>',     // config at container level
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Field 1',
        labelSeparator: '...' // field/component level config supersedes others
    },{
        xtype: 'textfield',
        fieldLabel: 'Field 2' // labelSeparator will be '='

    }]
});
Component
labelStyle : String
一个CSS样式描述字符串，它将直接应用到当前field的label上...

一个CSS样式描述字符串，它将直接应用到当前field的label上。 如果有设置，默认为容器的labelStyle值(例如 Ext.layout.FormLayout.labelStyle , 或者 '')。

注意:参见 clearCls 的注释。

另请参见 hideLabel 和 Ext.layout.FormLayout. fieldTpl。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Name',
        labelStyle: 'font-weight:bold;'
    }]
});
Component
layout : String/Object
*重要: 为了让子项目能被正确地调整尺寸和位置， 典型地，必须通过 layout 配置项指定一个布局管理器。...

*重要: 为了让子项目能被正确地调整尺寸和位置， 典型地，必须通过 layout 配置项指定一个布局管理器。

调整子items的尺寸和位置 是容器的布局管理器的职责，它负责创建和管理你想要的那种布局类型。 例如:

new Ext.Window({
    width:300, height: 300,
    layout: 'fit', // explicitly set layout manager: override the default (layout:'auto')
    items: [{
        title: 'Panel inside a Window'
    }]
}).show();

如果没有为一个通用的容器(例如Container或者Panel)特别指定 layout ，将会使用default layout manager ，它除了将子组件按顺序渲染到容器中之外什么事情都不做( 这种情况下不会发生调整尺寸和位置的操作)。 一些容器类内部指定了一个默认的布局 (例如FormPanel指定了 layout: 'form' )。 另一些有特殊用途的类内部指定/管理它们内置的布局( 例如GridPanel, TabPanel, TreePanel, Toolbar, Menu等等)。

layout 既可以通过一个对象或者一个字符串指定:

  • 用一个对象指定
    • 示例用法:
      • layout: {
    type: 'vbox',
    padding: '5',
    align: 'left'
}
    • type

      • 当前容器需要使用的布局类型。 如果不指定，将创建并使用一个默认的 Ext.layout.ContainerLayout 。

      可用的布局 type 值是:

      • absolute
      • accordion
      • anchor
      • auto Default
      • border
      • card
      • column
      • fit
      • form
      • hbox
      • menu
      • table
      • toolbar
      • vbox
    • 布局描述配置参数

      • 也可以指定附加的布局描述配置。 关于每个布局类型可用配置选项完整的细节，参见 type 参数指定的相关布局类。

  • 通过一个字符串指定
    • 示例用法:
      • layout: 'vbox',
layoutConfig: {
    padding: '5',
    align: 'left'
}
    • layout

      • 当前容器使用的布局 type ( 可用的布局类型值参见上述列表)。

    • layoutConfig

      • 附件的布局描述配置参数。 关于每个布局类型可用配置选项完整的细节，参见 layout 参数指定的相关布局类。

Container
layoutConfig : Object
这是一个配置对象，包含为 layout 指定的参数， 如果 layout 是作为一个 string 来指定的。

Container
listeners : Object
一个包含一个或多个事件处理器的配置对象，会在初始化的时候被添加到目标对象上...

一个包含一个或多个事件处理器的配置对象，会在初始化的时候被添加到目标对象上。 该配置对象应该是一个有效的监听器配置对象就像 addListener例子中指定的一样可一次附加多个处理器。

ExtJs Components上的DOM事件

一些 ExtJs Component 类导出时会选择一些DOM事件(例如 "click", "mouseover" 等等), 这通常只是在有额外的值可以被添加时发生。例如DataView类的 click事件会传递被点击的节点。也可以直接在Component的HTMLElementevent上访问DOM事件，但必需在Component被渲染后监听器才能添加到Element 上。可以按照以下步骤添加插件:

// 插件会用一个监听器配置对象进行配置。
//该组件会被添加到所有处理方法的参数列表上。
Ext.DomObserver = Ext.extend(Object, {
    constructor: function(config) {
        this.listeners = config.listeners ? config.listeners : config;
    },

    // 组件将自己传递进了插件的初始化方法里
    init: function(c) {
        var p, l = this.listeners;
        for (p in l) {
            if (Ext.isFunction(l[p])) {
                l[p] = this.createHandler(l[p], c);
            } else {
                l[p].fn = this.createHandler(l[p].fn, c);
            }
        }

        // 渲染后立即添加监听器到元素上
        c.render = c.render.createSequence(function() {
            var e = c.getEl();
            if (e) {
                e.on(l);
            }
        });
    },

    createHandler: function(fn, c) {
        return function(e) {
            fn.call(this, e, c);
        };
    }
});

var combo = new Ext.form.ComboBox({

    // 元素被点击后折叠
    plugins: [ new Ext.DomObserver({
        click: function(evt, comp) {
            comp.collapse();
        }
    })],
    store: myStore,
    typeAhead: true,
    mode: 'local',
    triggerAction: 'all'
});

Observable
margins : Object
注:此配置只用于该组件展现在一个使用BorderLayout...

注:此配置只用于该组件展现在一个使用BorderLayout 或 BoxLayout的两个子类之一作为布局的容器。

这个margins对象在该组件中的格式为：

{top: (top margin),right: (right margin),bottom: (bottom margin),left: (left margin)}

也可以是一个字符串，中间用空格分隔，margin值为数字。 把matches中每一个值的次序跟CSS中margin值的排列方式相对应：

  • 如果只有一个值，它适用于所有方面。
  • 如果有两个值，top和bottom的边框设置为第一个值，left和right设置为第二个值。
  • 如果有三个值，top设置为第一个值，left和right设置为第二个值，bottom设置为第三个值。
  • 如果有四个值，分别设置为top, right, bottom, left。

默认值:

{top:0, right:0, bottom:0, left:0}
BoxComponent
maskDisabled : Boolean
true 将会在panel被disabled时进行遮罩,false将不会遮罩它(默认为...
true 将会在panel被disabled时进行遮罩, false 将不会遮罩它(默认为 true )。使用任意一种方法，当被禁用时，panel都将告诉它包含的元素禁用它们自己， 但是遮罩panel可以提供一种额外的视觉效果，用以提示panel被禁用。
Panel
maxWidth : Number
tip最大宽度像素值(默认为300)。支持的最大值为500。
Tip
minButtonWidth : Number
当前panel中所有buttons 最小宽度，像素值(默认为 75 )
Panel
minWidth : Number
tip最小宽度像素值(默认为40)。
Tip
monitorResize : Boolean
设置为true自动监测window的resize事件，以便处理所有对当前窗口尺寸 敏感的事情。...
设置为true自动监测window的resize事件，以便处理所有对当前窗口尺寸 敏感的事情。 典型地，通过选择一个 layout 来管理这个值，并且不应该手动设置它。
Container
overCls : String
一个可选的额外的CSS类，它将在鼠标移过元素时被添加到组件上...
一个可选的额外的CSS类，它将在鼠标移过元素时被添加到组件上，鼠标移出时 删除。(默认为'')。此属性对于在组件上，或者它的任何使用标准CSS规则的孩子节点上， 添加定制的'active' 或者 'hover'样式非常有用。
Component
padding : Number/String
设置body元素padding样式的快捷方式。 此值既可以是一个数值，被应用到所有侧边...
设置body元素padding样式的快捷方式。 此值既可以是一个数值，被应用到所有侧边，也可以是一个普通的描述padding的 CSS字符串。默认为undefined.
Panel
pageX : Number
如果该组件被包含在一个指定位置的容器中，这个值表示页面级的x坐标值（译者注：在有滚动条的情况下这个值很有用）。
BoxComponent
pageY : Number
如果该组件被包含在一个指定位置的容器中，这个值表示页面级的y坐标值（译者注：在有滚动条的情况下这个值很有用）。
BoxComponent
plugins : Object/Array
一个对象或者一个对象数组，为组件提供特殊的功能 ...
一个对象或者一个对象数组，为组件提供特殊的功能。 对一个合法的插件唯一的要求是它含有一个init()方法， 能接收一个Ext.Component型的参数。 当组件被创建时，如果有可用的插件，组件将会调用每个插件的init方法， 并将自身的引用作为方法参数传递给它。然后，每个插件就可以调用方法或者响应组件上的事件， 就像需要的那样提供自己的功能。
Component
preventBodyReset : Boolean
默认为 false 。当设置为 true 时， 一个额外的CSS类 'x-panel-normal' 将会被田间到panel的元素， 有效地将W3C(参见 http://www.w3.org/TR/CSS21/sample.html)...
默认为 false 。当设置为 true 时， 一个额外的CSS类 'x-panel-normal' 将会被田间到panel的元素， 有效地将W3C(参见 http://www.w3.org/TR/CSS21/sample.html) 建议的CSS样式应用到Panel的body元素上 (不是header, footer等等)。
Panel
ptype : String
需要创建配置的ptype。 当传递一个配置对象给构造函数时...
需要创建配置的ptype。 当传递一个配置对象给构造函数时，此配置选项不会被使用。 只有在使用懒初始化的时候此配置项才会被使用， 此时Plugin不是 通过一个完整的实例组件，而是通过一个Component配置指定的。 在渲染时，将会查找ptype以决定创建何种类型的Plugin。

如果你创建自己的Plugin，你可以通过 Ext.ComponentMgr.registerPlugin 对它们进行注册，以便能利用懒初始化和渲染机制。
Component
ref : String
一个路径描述，与组件的 ownerCt 相关，它描述了把当前组件的命名引用放置到哪个父容器中去。...

一个路径描述，与组件的 ownerCt 相关，它描述了把当前组件的命名引用放置到哪个父容器中去。

祖先的坐标路径可以通过'/'字符进行分隔。 例如，将一个Toolbar Button的引用放入 拥有此Toolbar的Panel中:

var myGrid = new Ext.grid.EditorGridPanel({
    title: 'My EditorGridPanel',
    store: myStore,
    colModel: myColModel,
    tbar: [{
        text: 'Save',
        handler: saveChanges,
        disabled: true,
        ref: '../saveButton'
    }],
    listeners: {
        afteredit: function() {
//          The button reference is in the GridPanel
            myGrid.saveButton.enable();
        }
    }
});

在上面的代码中，如果 ref 是 'saveButton' ，那么引用将会被放置到Toolbar中。 ref 中的每个'/' 都会从组件的 ownerCt 向上移动一级。

另请参见 added 和 removed 事件。

Component
region : String
注: 此配置只用于该组件展现在一个布局为BorderLayout的容器中...

注: 此配置只用于该组件展现在一个布局为BorderLayout的容器中(例如指定layout:'border')。

详见Ext.layout.BorderLayout。

BoxComponent
renderTo : Mixed
该值可以是一个节点的id、一个DOM节点或者一个已存在的元素...

该值可以是一个节点的id、一个DOM节点或者一个已存在的元素， 组件将会被渲染到其中。

  • 注意 :
      如果组件不是一个Container 的子项目时， 不要使用此选项。 渲染和管理它的子项目是一个Container 的layout manager的责任。
      当使用此配置项时，无需调用render()方法。

另请参见 render 。

Component
resizeEvent : String
在布局中进行尺寸调整需要监听的事件。 默认为 'resize' 。
Panel
shadow : Boolean/String
(或者一个有效的Ext.Shadow Ext.Shadow.mode 值)，用来在panel后面显示一个阴影...
true (或者一个有效的Ext.Shadow Ext.Shadow.mode 值)，用来在panel后面显示一个阴影， false 将不会显示阴影(默认为 'sides' )。注意，此选项只有当 floating = true 时才应用。
Tip
shadowOffset : Number
如果显示了阴影，此参数为数值偏移量(默认为 4 )。注意，只有当 floating = true 时此参数才会被应用。...
如果显示了阴影，此参数为数值偏移量(默认为 4 )。注意，只有当 floating = true 时此参数才会被应用。
Panel
shim : Boolean
false将会在需要的浏览器中禁用iframe衬垫(默认为...
false 将会在需要的浏览器中禁用iframe衬垫(默认为 true )。注意，此选项只有在 floating = true 时应用。
Panel
stateEvents : Array
一个事件数组，当它们被触发时，组件需要保存自己的状态(默认值为 none)...

一个事件数组，当它们被触发时，组件需要保存自己的状态(默认值为 none)。 它们可以是任何该组件支持的事件类型，包括浏览器事件和 自定义事件(例如['click', 'customerchange'])。

对于保存和恢复组件状态的详细解释，参见 stateful

Component
stateId : String
为该组件指定的唯一的id值，它被用作管理组件状态的目的...
为该组件指定的唯一的id值，它被用作管理组件状态的目的。 (如果设定了id，默认值为组件自己的id，否则，如果组件使用自动生成的id，此值为null)。

对于保存和反解析组件状态的解释，参见 stateful 。

Component
stateful : Boolean
一个标志参数，它将引起组件在启动时尝试从一个保存的状态中恢复内部状态参数...

一个标志参数，它将引起组件在启动时尝试从一个保存的状态中恢复内部状态参数。 组件必须要么拥有一个 stateId 或者 id ，它们被分配给需要被管理的状态属性。 在跨页面加载时，不保证自动生成的id属性的稳定性， 并且，不能依赖此id来保存和恢复一个组件的相同状态。

为了保存状态的操作能够工作，状态管理器的提供者必须 被设置成一个Ext.state.Provider 的实现类，它覆盖了set 和get 方法，以便保存和恢复name/value对。 有一个内置的Ext.state.CookieProvider 可用。

为当前页面设置状态提供者:

Ext.state.Manager.setProvider(new Ext.state.CookieProvider({
    expires: new Date(new Date().getTime()+(1000*60*60*24*7)), //7 days from now
}));

当 stateEvents 配置项中其中之一的事件被触发时， 一个状态可保存的组件将试图保存其状态。

保存状态时，一个可保存状态的组件首先需要通过调用 getState 方法来序列化它的状态。 默认情况下，此函数什么事都不做。 开发者必须提供一个实现，返回一个hash对象，它描述了组件可恢复的状态。

getState方法产生的值将会传递给 Ext.state.Manager.set 方法，它使用配置的 Ext.state.Provider 来保存对象，以组件的 stateId 为key，或者，如果此值（指stateId）没有指定时， 使用它的 id 作为key。

在进行构造时，一个可保存状态的组件试图通过调用 Ext.state.Manager.get方法来 恢复它的状态，传递 stateId 或者，如果此值（指stateId）没有指定时， 使用它的 id 作为参数。

结果对象被传递给 applyState 。 applyState 的默认实现只是简单地把属性拷贝到对象中， 但是开发者可以覆盖此方法以支持更多行为。

通过向 beforestaterestore, staterestore, beforestatesave 和 statesave 事件上绑定监听器，你可以在保存和恢复状态时进行额外的处理。

Component
style : String
被添加到组件元素的特定样式。 必须是按照...
被添加到组件元素的特定样式。 必须是按照 Ext.Element.applyStyles 类指定格式的合法参数值。

new Ext.Panel({
    title: 'Some Title',
    renderTo: Ext.getBody(),
    width: 400, height: 300,
    layout: 'form',
    items: [{
        xtype: 'textarea',
        style: {
            width: '95%',
            marginBottom: '10px'
        }
    },
        new Ext.Button({
            text: 'Send',
            minWidth: '100',
            style: {
                marginBottom: '10px'
            }
        })
    ]
});
Component
tabTip : String
注: 这个配置只用于当该组件作为TabPanel的一个子项目时使用...

注: 这个配置只用于当该组件作为TabPanel的一个子项目时使用。

一个String类型的innerHTML(支持html标签)，当鼠标放在该选项上的时，显示一个tooltip。为了tips能够被渲染，Ext.QuickTips.init()必须被提前调用。
BoxComponent
tbar : Object/Array
panel的顶部工具栏。 此参数可以是一个 The top toolbar of the panel. This can be a Ext.Toolbar 对象、一个工具栏配置、或者一个被添加到工具栏的...

panel的顶部工具栏。 此参数可以是一个 The top toolbar of the panel. This can be a Ext.Toolbar 对象、一个工具栏配置、或者一个被添加到工具栏的buttons/button配置数组。 注意，在渲染之后此参数无效。如需在渲染之后访问顶部工具栏，请使用 getTopToolbar。

注意:尽管Toolbar可以包含Field组件，但它们不会 通过加载祖先FormPanel而被更新。Panel的工具栏不是标准Container->Component 层次的一部分，所以它们不会被扫面以收集表单项。但是，这些值还是会 被提交，因为提交表单的参数是从DOM树中收集的。

Panel
tbarCfg : Object
一个DomHelper 元素的配置对象，描述了当前Panel的tbar元素结构。 另请参见...

一个DomHelper 元素的配置对象，描述了当前Panel的tbar元素结构。 另请参见 bodyCfg 。

Panel
title : String
被用作innerHTML的标题文本(接受html标签) ，用来显示在panel的...
被用作innerHTML的标题文本(接受html标签) ，用来显示在panel的 header 中(默认为'')。 当 title 被指定时， header 元素将会被自动创建并显示，除非 header 被显式地设置为 false 。 如果你不在配置时指定一个 title ， 但是你想以后设置，你必须要么 指定一个非空的 title (一个空格' ' 也可以)或者指定 header:true ，这样容器元素将会被创建。
Panel
titleCollapse : Boolean
将会允许通过在顶部工具条的任意地方点击展开和折叠panel(当...
true 将会允许通过在顶部工具条的任意地方点击展开和折叠panel(当 collapsible = true )， false ) 将会只允许通过点击工具按钮进行操作(默认为 false ))。如果当前panel是border布局中的一个子项目，另请参见 BorderLayout.Region floatable 配置项。
Panel
toolTemplate : Ext.Template/Ext.XTemplate
用来在header 元素中创建tools 的模板。默认为:...

用来在header 元素中创建tools 的模板。默认为:

                                    new Ext.Template('<div class="x-tool x-tool-{id}">&#160;</div>')

可以覆盖此参数，以便为基于更复杂XTemplate的tools提供自定义的DOM结构。 模板的数据为一个简单的tool配置对象(不是整个Array)， 它在 tools配置项指定。 在以下例子中，当鼠标滑过tool时，一个<a>标签被用来提供视觉效果:

var win = new Ext.Window({
    tools: [{
        id: 'download',
        href: '/MyPdfDoc.pdf'
    }],
    toolTemplate: new Ext.XTemplate(
        '<tpl if="id==\'download\'">',
            '<a class="x-tool x-tool-pdf" href="{href}"></a>',
        '</tpl>',
        '<tpl if="id!=\'download\'">',
            '<div class="x-tool x-tool-{id}">&#160;</div>',
        '</tpl>'
    ),
    width:500,
    height:300,
    closeAction:'hide'
});

注意，CSS类'x-tool-pdf'必须拥有一个关联的样式规则，它提供了一个适当的背景图片， 例如:

                                a.x-tool-pdf {background-image: url(../shared/extjs/images/pdf.gif)!important;}
Panel
tools : Array
一个工具按钮配置数组，用来添加到头部工具区域。 当渲染之后，每个工具都被存储为一个Element ，被一个叫做...
一个工具按钮配置数组，用来添加到头部工具区域。 当渲染之后，每个工具都被存储为一个Element ，被一个叫做 tools. <tool-type> 的公共参数引用。

每个工具配置都可以包含如下参数:

  • id : String
    必须。需要创建的工具类型。默认情况下，这被指定为一个 CSS类，格式为 x-tool- <tool-type> ，用来形成工具Element。 对于以下列出的工具类型，Ext提供了CSS规则，和一个包含图片的icon对象。 通过提供可选的CSS规则和背景图片，开发者可以实现自定义的工具:
      toggle (当collapsible 为 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
    • tc : Object
      工具配置对象
  • stopEvent : Boolean
    默认为true。指定为false可以允许点击事件进行冒泡。
  • scope : Object
    调用处理函数的作用域。
  • qtip : String/Object
    一个tip字符串，或者一个提供给 Ext.QuickTip.register 的配置参数
  • hidden : Boolean
    True将会在初始化时渲染成隐藏的。
  • on : Object
    一个监听器配置对象，以addListener所需的参数格式 指定事件监听器

注意，当panel被折叠时提供部分固定的工具，这些工具仅仅提供可视按钮。 所有必备的功能，都必须通过添加实现了必备行为的处理函数来实现。

示例用法:

tools:[{
    id:'refresh',
    qtip: 'Refresh form Data',
    // hidden:true,
    handler: function(event, toolEl, panel){
        // refresh logic
    }
},
{
    id:'help',
    qtip: 'Get Help',
    handler: function(event, toolEl, panel){
        // whatever
    }
}]

对于自定义 'help' 的id，定义了两个相应的css类，拥有一个到15x15图片的链接:

                                .x-tool-help {background-image: url(images/help.png);}
.x-tool-help-over {background-image: url(images/help_over.png);}
// if using an image sprite:
.x-tool-help {background-image: url(images/help.png) no-repeat 0 0;}
.x-tool-help-over {background-position:-15px 0;}
Panel
tpl : Mixed
一个 Ext.Template , Ext.XTemplate 或者一个用来形成一个Ext.XTemplate的字符串数组...
一个 Ext.Template , Ext.XTemplate 或者一个用来形成一个Ext.XTemplate的字符串数组。 与 data 和 tplWriteMode 配置项协同使用。
Component
tplWriteMode : String
刷新组件的内容区域时使用的Ext.(X)Template方式。 默认为'overwrite' (参见 Ext.XTemplate.overwrite )。
刷新组件的内容区域时使用的Ext.(X)Template方式。 默认为'overwrite' (参见 Ext.XTemplate.overwrite )。
Component
unstyled : Boolean
覆盖 baseCls 设置为 baseCls = 'x-plain' ， 除了必须的属性之外，它将panel渲染成无样式的...
覆盖 baseCls 设置为 baseCls = 'x-plain' ， 除了必须的属性之外，它将panel渲染成无样式的，以便Ext布局功能能起作用 (例如overflow:hidden)。
Panel
width : Number
组件的宽度(默认值为 auto)。注:如果想使用百分比的方式...
组件的宽度(默认值为 auto)。注:如果想使用百分比的方式来设置值，请查看 Ext.Component.anchor。
Tip
x : Number
如果被包含在一个指定位置的容器中，这个值表示x(left)坐标值。
BoxComponent
xtype : String
需要创建配置的xtype。 当传递一个配置对象给构造函数时...
需要创建配置的xtype。 当传递一个配置对象给构造函数时，此配置选项不会被使用。 只有在使用懒初始化的时候此配置项才会被使用，此时容器的子项目不是 通过一个完整的实例组件，而是通过一个Component配置指定的。 在渲染时，将会查找xtype以决定创建何种类型的子组件。

预定义的xtype列表如下： here。

如果你继承Component创建你自己的组件，你需要使用Ext.ComponentMgr.registerType 对它们进行注册，以便利用懒初始化和渲染机制。
Component
y : Number
如果被包含在一个指定位置的容器中，这个值表示y(top)坐标值。
BoxComponent

公共属性

Property Defined By
body : Ext.Element
Panel的body Element ，可以用来包含HTML内容。 内容可以在...
Panel的body Element ，可以用来包含HTML内容。 内容可以在html 配置项中指定，或者可以使用autoLoad 配置项被加载，或者通过Panel的Updater提供。 只读。

如果这被用来通过任意方式加载可视的HTML元素，那么Panel不可以被用作 一个Layout，用来容纳其它Panel。

如果当前Panel期望被用作一个Layout的宿主 (参见 layout) 那么body元素必须不能被加载或者改变---因为它处于Panel的Layout的控制 之下。

注意: 另请参见 el .

Panel
buttons : Array
Panel的按钮数组，它们从 buttons 配置属性创建。只读。
Panel
bwrap : Ext.Element
Panel的bwrapElement ，用来包含其它Panel元素(tbar, body, bbar, footer)。 参见 bodyCfg。 只读。
Panel
collapsed : Boolean
如果当前panel被折叠为true。只读。
Panel
dd : Ext.dd.DragSource.
如果当前Panel被配置为 draggable ，此参数将会包含一个 Ext.dd.DragSource 实例，它负责处理拖拽Panel...

如果当前Panel被配置为 draggable ，此参数将会包含一个 Ext.dd.DragSource 实例，它负责处理拖拽Panel。

开发者必须提供Ext.dd.DragSource的 抽象方法的实现，用来提供drag/drop过程中的每一步行为。 参见 draggable.
Panel
disabled : Boolean
当前组件处于无效状态时为true。 Read-only.
Component
el : Ext.Element
封装了当前组件的Ext.Element。 Read-only。通常情况下，这将是一个<DIV>元素，它由此类的...

封装了当前组件的Ext.Element。 Read-only。

通常情况下，这将是一个<DIV>元素，它由此类的 onRender方法创建，但是它可以通过使用 autoEl 配置项进行覆盖。

注意: 直到组件渲染完成此元素都将处于无效状态。

如需向当前组件的 DOM事件(而不是当前组件自己的Observable事件)添加监听器， 更多建议，参见 listeners 配置项，或者直接使用一个render监听器:

new Ext.Panel({
    title: 'The Clickable Panel',
    listeners: {
        render: function(p) {
            // Append the Panel to the click handler's argument list.
            p.getEl().on('click', handlePanelClick.createDelegate(null, [p], true));
        },
        single: true  // Remove the listener after first invocation
    }
});

另请参见 getEl

Component
footer : Ext.Element
Panel底部Element 。只读。此元素被用来容纳Panel的...
Panel底部Element 。只读。

此元素被用来容纳Panel的 buttons 或者 fbar 。

注意: 另请参见 el 的注释。

Panel
header : Ext.Element
Panel的headerElement. 只读。此元素被用来容纳 title和 tools...
Panel的headerElement. 只读。

此元素被用来容纳 title和 tools

注意: 另请参见 el 的注释。

Panel
hidden : Boolean
如果当前组件处于隐藏状态，此值为true。Read-only。
Component
initialConfig : Object
当前组件的初始化配置描述。 Read-only。
Component
items : MixedCollection
当前容器中的子组件集合 Ext.util.MixedCollection
Container
ownerCt : Ext.Container
组件所属的Container (默认为undefined，当前组件被添加到一个容器中时此值被自动设置)...
组件所属的Container (默认为undefined，当前组件被添加到一个容器中时此值被自动设置)。 Read-only。

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

Component
private : Object
我们只能在一块可见的区域进行布局。 布局目标*或者它的任何父元素* 为...
我们只能在一块可见的区域进行布局。 布局目标*或者它的任何父元素* 为display:none， 将意味着它没有一块可见的区域。
Container
refOwner : Ext.Container
如果当前组件是一个容器的孩子，并且是通过一个 ref 配置项被注册的，则此值为 ref 引用被插入到的祖先容器。
如果当前组件是一个容器的孩子，并且是通过一个 ref 配置项被注册的，则此值为 ref 引用被插入到的祖先容器。
Component
rendered : Boolean
如果当前组件已经被渲染了，此值为true。Read-only.
Component

公共方法

Method Defined By
add ( ...Object/Array component ) : Ext.Component/Array
向当前容器中添加 Component(s)。 描述 :在添加之前触发 beforeadd 事件...

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

描述 :

  • 在添加之前触发 beforeadd 事件
  • 将会相应地应用 容器的default config values (细节参见 defaults )。
  • 在组件添加之后触发 add 事件。

注意 :

  • 当调用 add 时如果容器已经被渲染， 你可能需要调用 doLayout 方法来刷新视图，它将导致所有尚未渲染的子组件进行渲染操作。 此操作是必须的，这样你可以 add 多个子组件而只刷新一次layout。 示例用法:

var tb = new Ext.Toolbar();
tb.render(document.body);  // toolbar is rendered
tb.add({text:'Button 1'}); // add multiple items (defaultType for Toolbar is 'button')
tb.add({text:'Button 2'});
tb.doLayout();             // refresh the layout
  • 警告: 使用BorderLayout布局的容器可能不能删除或者添加组件。 更多细节参见BorderLayout 的注释。
参数:
  • component : ...Object/Array

    需要添加的一个或多个组件，或者是一个组件数组。 更多信息参见 items 。

返回值:
  • Ext.Component/Array
    被添加的组件。
Container
addButton ( String/Object config , Function handler , Object scope ) : Ext.Button
向当前panel中添加一个按钮。注意，此方法必须在渲染之前调用。 首选的方式是通过...
向当前panel中添加一个按钮。注意，此方法必须在渲染之前调用。 首选的方式是通过buttons 配置项添加按钮。
参数:
  • config : String/Object
    一个合法的Ext.Button 配置。字符串将会变成默认按钮配置文本，对象将会被看做一个按钮配置对象。
  • handler : Function
    在按钮Ext.Button.click 时被调用的函数
  • scope : Object
    作用域( this 引用)，按钮处理函数将会在其中被执行。默认为Button.
返回值:
  • Ext.Button
    被添加的按钮
Panel
addClass ( string cls ) : Ext.Component
为组件底层的元素添加CSS样式。
为组件底层的元素添加CSS样式。
参数:
  • cls : string
    需要添加的CSS样式的class名称
返回值:
  • Ext.Component
    this
Component
addEvents( Object|String o, string Optional. ) : void
添加指定的事件到事件列表上，事件会被该Observable触发。
添加指定的事件到事件列表上，事件会被该Observable触发。
参数:
  • o : Object|String
    以事件名作为属性true作为值的对象 或者当多个事件名被分开的传递时则为第一个事件名。
  • Optional. : string
    事件名被分开的传递时则为事件名。 用法:
    this.addEvents('storeloaded', 'storecleared');
返回值:
  • void
Observable
addListener( String eventName, Function handler, [Object scope], [Object options] ) : void
给对象添加事件处理器。
给对象添加事件处理器。
参数:
  • eventName : String
    监听的事件名。
  • handler : Function
    事件调用的方法
  • scope : Object
    （可选）处理方法执行的作用域 (this的引用 reference)。 如果被忽略。默认为触发事件的对象。
  • options : Object
    （可选）包含处理器配置和属性的对象。 可能包含以下的属性:
    • scope : Object
      处理方法执行的作用域(this的引用) 。 如果被忽略。默认为触发事件的对象。
    • delay : Number
      在触发事件后延迟调用处理器的毫秒数。
    • single : Boolean
      如果为True则添加一个处理器来处理下一次的事件触发（仅一次），然后移除自己。
    • buffer : Number
      使得处理器延迟指定毫秒数后预定的运行在 一个Ext.util.DelayedTask中 。 如果事件在时间内再一次被触发，原始的处理器不会被调用，但是新的处理器会预定的在他的位置上。
    • target : Observable
      如果事件在目标的Observable上触发则仅仅调用处理器， 否则 事件会从子类的Observable上冒泡

    组合选项
    使用这些选项参数,可能会组合出不同类型的监听器：

    一个延迟的，一次性的监听器。

    myDataView.on('click', this.onClick, this, {
single: true,
delay: 100
});

    一次调用附加多个处理器
    该方法同样支持传递一个包含指定的多个处理器的属性的配置对象参数。

    myGridPanel.on({
'click' : {
    fn: this.onClick,
    scope: this,
    delay: 100
},
'mouseover' : {
    fn: this.onMouseOver,
    scope: this
},
'mouseout' : {
    fn: this.onMouseOut,
    scope: this
}
});

    或者一个简写的语法：

    myGridPanel.on({
'click' : this.onClick,
'mouseover' : this.onMouseOver,
'mouseout' : this.onMouseOut,
 scope: this
});
返回值:
  • void
Observable
applyToMarkup ( String/HTMLElement el ) : void
将此组件添加到已存在的有效的HTML标签中。 使用该方法时，无需再调用render()方法。
将此组件添加到已存在的有效的HTML标签中。 使用该方法时，无需再调用render()方法。
参数:
  • el : String/HTMLElement
返回值:
  • void
Component
bubble ( Function fn , [ Object scope ], [ Array args ] ) : Ext.Container
沿着component/container继承结构进行冒泡， 在每个组件上调用指定的函数。 所调用函数的作用域...
沿着component/container继承结构进行冒泡， 在每个组件上调用指定的函数。 所调用函数的作用域( this)将会是 指定的作用域或者是当前组件。 如果在函数任何一点上返回false，即停止冒泡过程
参数:
  • fn : Function
    需要调用的函数
  • scope : Object
    (可选) 函数的作用域(默认为当前节点)
  • args : Array
    (可选) 调用函数时需要传递的参数( 默认传递当前组件)
返回值:
  • Ext.Container
    this
Container
cascade ( Function fn , [ Object scope ], [ Array args ] ) : Ext.Container
从当前组件(第一个被调用的组件)开始，沿着component/container的继承树向下回溯...
从当前组件(第一个被调用的组件)开始，沿着component/container的继承树向下回溯， 在每个组件上调用指定的方法， 调用方法时的(this)作用域为指定的scope或者为当前组件。 传递给方法的参数为传递进来args或者当前组件。 在起泡的任意一个节点上，如果function返回false，即停止在那个分支上。
参数:
  • fn : Function
    需要调用的函数
  • scope : Object
    (可选)函数的作用域(默认为当前组件)
  • args : Array
    (可选) 调用函数时传递的参数 (默认传递当前组件)
返回值:
  • Ext.Container
    this
Container
cloneConfig ( Object overrides ) : Ext.Component
默认使用原先传递给当前实例的配置值克隆当前组件。
默认使用原先传递给当前实例的配置值克隆当前组件。
参数:
  • overrides : Object
    一个新的配置项，包含需要覆盖到克隆版本的所有属性。 可以传递一个id参数给此对象，否则将自动生成一个新的id以避免发生重复。
返回值:
  • Ext.Component
    当前组件的克隆副本
Component
collapse ( Boolean animate ) : Ext.Panel
折叠panel的body，这样它就变成隐藏的。 触发beforecollapse 事件...
折叠panel的body，这样它就变成隐藏的。 触发beforecollapse 事件，处理函数返回false可以取消折叠操作。
参数:
  • animate : Boolean
    True将会在变换时使用动画效果，其它为false( 默认为panel的animCollapse 配置项的值)
返回值:
  • Ext.Panel
    this
Panel
destroy () : void
通过如下方法销毁对象：删除所有的事件监听器、将组件的元素从DOM树中删除...
通过如下方法销毁对象：删除所有的事件监听器、将组件的元素从DOM树中删除（如果可以）、 将组件从它的 Ext.Container（如果可用）中删除、 并且将它从Ext.ComponentMgr中 注销。 销毁操作一般由框架自动完成，一般情况下不需要直接调用该方法。
参数:
  • 无。
返回值:
  • void
Component
disable () : Ext.Component
将组件置为无效状态，并出发'disable'事件。
将组件置为无效状态，并出发'disable'事件。
参数:
  • 无。
返回值:
  • Ext.Component
    this
Component
doLayout ( [ Boolean shallow ], [ Boolean force ] ) : Ext.Container
强制容器的布局进行重新计算。 在向一个已经渲染的容器中添加...
强制容器的布局进行重新计算。 在向一个已经渲染的容器中添加一个新的组件， 或者改变子组件的尺寸/位置参数之后，必须调用此函数。
参数:
  • shallow : Boolean
    (可选) 设置为true时将仅仅计算当前组件的布局， 并且让子组件在需要时自动计算布局 (默认为flase，它将递归地调用每个子容器的doLayout方法)
  • force : Boolean
    (可选) 设置为true将强制进行布局，即使项目是隐藏的也进行。
返回值:
  • Ext.Container
    this
Container
enable () : Ext.Component
将组件置为有效状态并触发'enable'事件。
将组件置为有效状态并触发'enable'事件。
参数:
  • 无。
返回值:
  • Ext.Component
    this
Component
enableBubble( String/Array events ) :void
是否现在使得事件会被该Observable触发并调用 this.getBubbleTarget()方法在拥有者的继承树...

是否现在使得事件会被该Observable触发并调用 this.getBubbleTarget()方法在拥有者的继承树中冒泡。Observable的基础类中没有该方法的实现。

该方法一般被Ext.Components用来冒泡事件到拥有者的容器。参看Ext.Component.getBubbleTarget默认的实现 在Ext.Component中返回组件的直接拥有者。但是如果需要的是一个已知的目标，该方法可以被重写来更快的访问需求的目标。

例子:

Ext.override(Ext.form.Field, {
    // 添加方法到Field的initComponent上改变事件为冒泡
    initComponent : Ext.form.Field.prototype.initComponent.createSequence(function() {
        this.enableBubble('change');
    }),

    // 我们知道我们想让Field的事件冒泡到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() {
            // 如果样式被修改标题会变红。
            myForm.header.setStyle('color', 'red');
        }
    }
});
参数:
  • events : String/Array
    冒泡的事件名，或事件名数组
返回值:
  • void
Observable
expand ( Boolean animate ) : Ext.Panel
展开panel的body以便让其变得可见。 触发beforeexpand 事件...
展开panel的body以便让其变得可见。 触发beforeexpand 事件，如果它返回false将会取消展开操作。
参数:
  • animate : Boolean
    True将会在变换过程中使用动画效果，否则为false (默认为panel的 animCollapse 配置项的值)
返回值:
  • Ext.Panel
    this
Panel
find ( String prop , String value ) : Array
根据属性查找当前容器中任何层次上的组件
根据属性查找当前容器中任何层次上的组件
参数:
  • prop : String
  • value : String
返回值:
  • Array
    Ext.Component数组
Container
findBy ( Function fn , [ Object scope ] ) : Array
根据一个自定义的函数，查找当前容器中任意层级上的一个组件。 如果传递的函数返回true...
根据一个自定义的函数，查找当前容器中任意层级上的一个组件。 如果传递的函数返回true，组件将会被包含在结果中。 函数将会被用如下参数(component, this container)进行调用。
参数:
  • fn : Function
    需要调用的函数
  • scope : Object
    可选
返回值:
  • Array
    Ext.Component数组
Container
findById ( String id ) : Ext.Component
通过id查找容器中位于任何层级上的组件
通过id查找容器中位于任何层级上的组件
参数:
  • id : String
返回值:
  • Ext.Component
Container
findByType ( String/Class xtype , [ Boolean shallow ] ) : Array
根据xtype或者类型，查找当前容器中任何层级上的组件
根据xtype或者类型，查找当前容器中任何层级上的组件
参数:
  • xtype : String/Class
    组件的xtype字符串，或者直接是组件的class类型
  • shallow : Boolean
    (可选) 此参数为flase时将检查当前组件是否是指定xtype的后裔 (这是默认情况)，或者设置为true， 将检查当前组件是否直接是指定xtype类型（译者注：即指不按照多态性进行检查）。
返回值:
  • Array
    Ext.Component数组
Container
findParentBy ( Function fn ) : Ext.Container
通过自定义的函数查找当前组件上层任何层次上的容器...
通过自定义的函数查找当前组件上层任何层次上的容器。 如果传递的函数返回true，容器对象将被返回。
参数:
  • fn : Function
    自定义的函数，使用如下参数调用(container,this component)。
返回值:
  • Ext.Container
    自定义函数返回true的第一个容器
Component
findParentByType ( String/Class xtype ) : Ext.Container
通过xtype或者class查找当前组件上层任何层次上的容器
通过xtype或者class查找当前组件上层任何层次上的容器
参数:
  • xtype : String/Class
    组件的xtype字符串，或者直接是组件的class
返回值:
  • Ext.Container
    符合指定xtype或者class的第一个容器
Component
fireEvent( String eventName, Object... args ) : Boolean
用传入的参数触发指定的事件 (减去事件名)。 一个事件可以被设置为冒泡 Obse...

用传入的参数触发指定的事件 (减去事件名)。

一个事件可以被设置为冒泡到Observable父类继承树(参看 Ext.Component.getBubbleTarget) 调用enableBubble实现。

参数:
  • eventName : String
    触发的事件名。
  • args : Object...
    传递给处理器的可变长度参数。
返回值:
  • Boolean
    如果有任何的处理器返回false则返回false，否则返回true。
Observable
focus ( [ Boolean selectText ], [ Boolean/Number delay ] ) : Ext.Component
尝试将当前组件设为焦点。
尝试将当前组件设为焦点。
参数:
  • selectText : Boolean
    (可选) 如果可用，同时选中组件内部的文本
  • delay : Boolean/Number
    (可选)将当前组件设置为焦点的延迟时间(设置为true等于0毫秒)
返回值:
  • Ext.Component
    this
Component
get ( String/Number key ) : Ext.Component
获取当前容器包含的一个组件( items.get(key)方法的别名)
获取当前容器包含的一个组件( items.get(key)方法的别名)
参数:
  • key : String/Number
    组件的索引
返回值:
  • Ext.Component
    Ext.Component
Container
getBottomToolbar () : Ext.Toolbar
返回panel底部区域toolbar ( bbar )。
返回panel底部区域toolbar ( bbar )。
参数:
  • 无。
返回值:
  • Ext.Toolbar
    toolbar
Panel
getBox ( [ Boolean local ] ) : Object
获取组件底层元素当前盒子模型的尺寸。（译者注：盒子模型是CSS术语，详细解释请自行搜索。）
获取组件底层元素当前盒子模型的尺寸。（译者注：盒子模型是CSS术语，详细解释请自行搜索。）
参数:
  • local : Boolean
    (可选)值为true时，组件的left值和top值将代替页面的XY被返回。(默认值为false)
返回值:
  • Object
    返回值的格式{x, y, width, height}
BoxComponent
getBubbleTarget () : Ext.Container
为Observable的fireEvent方法提供链接，它沿着继承结构进行冒泡操作。
为Observable的fireEvent方法提供链接，它沿着继承结构进行冒泡操作。
参数:
  • 无。
返回值:
  • Ext.Container
    拥有当前组件的容器。
Component
getComponent ( String/Number comp ) : Ext.Component
检查当前容器的 items property 并且获取当前容器的一个直接的子组件。
检查当前容器的 items property 并且获取当前容器的一个直接的子组件。
参数:
  • comp : String/Number
    参数可以是以下任何值：
    • 一个 String : 代表子组件的 itemId 或者 id
    • 一个 Number : 代表子组件在 items property 中的位置

    其它信息参见 Ext.util.MixedCollection.get。

返回值:
  • Ext.Component
    组件(如果有找到)。
Container
getEl () : Ext.Element
返回 Ext.Element ，它包装了当前组件。...

返回 Ext.Element ，它包装了当前组件。

通常情况下，这将是一个<DIV>元素，它是由该类的onRender方法创建的， 但是可以使用autoEl配置项 覆盖它。

注意: 此元素将会一直处于无效状态直到当前组件渲染完成。

如需向当前组件的 DOM事件(而不是当前组件自己的Observable事件)添加监听器， 更多建议，参见 listeners 配置项，或者直接使用一个render监听器:

new Ext.Panel({
    title: 'The Clickable Panel',
    listeners: {
        render: function(p) {
            // Append the Panel to the click handler's argument list.
            p.getEl().on('click', handlePanelClick.createDelegate(null, [p], true));
        },
        single: true  // Remove the listener after first invocation
    }
});
参数:
  • 无。
返回值:
  • Ext.Element
    包装当前组件的元素。
Component
getFooterToolbar () : Ext.Toolbar
返回panel底部( fbar )区域的toolbar
返回panel底部( fbar )区域的toolbar
参数:
  • 无。
返回值:
  • Ext.Toolbar
    toolbar
Panel
getFrameHeight () : Number
返回当前panel框架元素的高度像素值 (包括所有top和bottom工具栏以及header和footer元素...
返回当前panel框架元素的高度像素值 (包括所有top和bottom工具栏以及header和footer元素， 但是不包括body高度)。 如需获取body高度，参见 getInnerHeight.
参数:
  • 无。
返回值:
  • Number
    框架高度
Panel
getFrameWidth () : Number
返回当前panel框架元素的宽度像素值 (不包含body宽度)。如需获得body宽度，参见...
返回当前panel框架元素的宽度像素值 (不包含body宽度)。如需获得body宽度，参见 getInnerWidth。
参数:
  • 无。
返回值:
  • Number
    框架宽度
Panel
getHeight () : Number
获取该组件的当前高度值。
获取该组件的当前高度值。
参数:
  • 无。
返回值:
  • Number
BoxComponent
getId () : String
返回当前组件的id，如果没有定义id，则自动生成并返回一个id:'ext-comp-'...
返回当前组件的 id 如果没有定义 id 则自动生成并返回一个 id

'ext-comp-' + (++Ext.Component.AUTO_ID)
参数:
  • 无。
返回值:
  • String
    id
Component
getInnerHeight () : Number
返回body元素的高度像素值(不包括任何框架元素的高度)。 对于框架高度参见...
返回body元素的高度像素值(不包括任何框架元素的高度)。 对于框架高度参见 getFrameHeight。
参数:
  • 无。
返回值:
  • Number
    body高度
Panel
getInnerWidth () : Number
返回body元素宽度像素值(不包含任何框架元素的宽度)。 对于框架宽度，参见 getFrameWidth。
返回body元素宽度像素值(不包含任何框架元素的宽度)。 对于框架宽度，参见 getFrameWidth。
参数:
  • 无。
返回值:
  • Number
    body宽度
Panel
getItemId () : String
返回当前组件的 itemId 。 如果没有通过配置参数指定 itemId 那么，将会使用...
返回当前组件的 itemId 。 如果没有通过配置参数指定 itemId 那么，将会使用 getId 返回 id 。
参数:
  • 无。
返回值:
  • String
Component
getLayout () : ContainerLayout
返回容器当前使用的布局管理器。 如果容器当前没有设置布局管理器， 将会创建一个默认的...
返回容器当前使用的布局管理器。 如果容器当前没有设置布局管理器， 将会创建一个默认的 Ext.layout.ContainerLayout 并被设置为容器的布局管理器。
参数:
  • 无。
返回值:
  • ContainerLayout
    容器的布局管理器
Container
getLayoutTarget () : Ext.Element
返回当前容器中用来包含子组件的元素。提供了一个 可以返回容器的...

返回当前容器中用来包含子组件的元素。

提供了一个 可以返回容器的Element 的实现， 但是，如果容器有更复杂的结构， 可以覆盖此实现以返回 layout 在其中渲染子组件的元素。

参数:
  • 无。
返回值:
  • Ext.Element
    在其中渲染子组件的元素。
Container
getOuterSize () : Object
获取当前组件所在元素的尺寸大小，包括边缘的空白处。
获取当前组件所在元素的尺寸大小，包括边缘的空白处。
参数:
  • 无。
返回值:
  • Object
    一个包含元素大小的对象 {width: (element width + left/right margins), height: (element height + top/bottom margins)}
BoxComponent
getPosition ( [ Boolean local ] ) : Array
获取组件底层元素当前的XY位置。
获取组件底层元素当前的XY位置。
参数:
  • local : Boolean
    (可选)如果为true，将返回元素的left和top值，而不是相对于页面内的 XY。(默认值为 false)
返回值:
  • Array
    元素的XY位置值(例如：[100, 200])
BoxComponent
getResizeEl () : Ext.Element
返回该组件的最外层用来定义这些组件整体大小的Element...

返回该组件的最外层用来定义这些组件整体大小的Element对象。

通常用 getEl 方法将会返回相同的Element对象，但在有些情况下，组件可能有一些更多的封装了它的主要动态Element对象的Element对象。

例如ComboBox。它是封装在一个包含<input>元素的包装元素里(这将返回其 getEl方法和触发按钮的元素)。返回的元素为resizeEl。

参数:
  • 无。
返回值:
  • Ext.Element
    The Element which is to be resized by size managing layouts.
BoxComponent
getSize () : Object
获取组件底层元素当前的大小。
获取组件底层元素当前的大小。
参数:
  • 无。
返回值:
  • Object
    一个包含元素大小的对象{width: (element width), height: (element height)}
BoxComponent
getText ( Ext.slider.Thumb thumb ) : String
用于设置在提示中显示的文字。默认返回和提示绑定的滑动条的值。可以自定义覆盖该方法。
用于设置在提示中显示的文字。默认返回和提示绑定的滑动条的值。可以自定义覆盖该方法。
参数:
  • thumb : Ext.slider.Thumb
    提示绑定的滑块
返回值:
  • String
    提示里显示的文字
Tip
getTool ( String id ) : Object
根据id获取一个tool.
根据id获取一个tool.
参数:
  • id : String
返回值:
  • Object
    tool
Panel
getTopToolbar () : Ext.Toolbar
返回panel顶部区域的 toolbar ( tbar ).
返回panel顶部区域的 toolbar ( tbar ).
参数:
  • 无。
返回值:
  • Ext.Toolbar
    toolbar
Panel
getUpdater () : Ext.Updater
获取当前panel的 Ext.Updater .让你可以为当前panel的body执行Ajax更新。
获取当前panel的 Ext.Updater .让你可以为当前panel的body执行Ajax更新。
参数:
  • 无。
返回值:
  • Ext.Updater
    Updater
Panel
getWidth () : Number
获取该组件的当前宽度值。
获取该组件的当前宽度值。
参数:
  • 无。
返回值:
  • Number
BoxComponent
getXType () : String
获取当前组件的xtype，它是用 Ext.ComponentMgr 注册的。 所有可用的xtype列表，参见...
获取当前组件的xtype，它是用 Ext.ComponentMgr 注册的。 所有可用的xtype列表，参见 Ext.Component 类头部。示例用法:

var t = new Ext.form.TextField();
alert(t.getXType());  // alerts 'textfield'
参数:
  • 无。
返回值:
  • String
    The xtype
Component
getXTypes () : String
返回此组件的xtype继承树，用字符'-'分隔。 所有可用的xtype值...

返回此组件的xtype继承树，用字符'-'分隔。 所有可用的xtype值，请参见Ext.Component 类的头部。

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

示例用法:

var t = new Ext.form.TextField();
alert(t.getXTypes());  // alerts 'component/box/field/textfield'
参数:
  • 无。
返回值:
  • String
    xtype层次字符串
Component
hasListener( String eventName ) : Boolean
检测对象是否包含指定事件的任何监听器
检测对象是否包含指定事件的任何监听器
参数:
  • eventName : String
    检测的事件名
返回值:
  • Boolean
    如果事件被监听则为true，否则为false
Observable
hide () : Ext.Component
隐藏当前组件。 监听 beforehide' 事件并且返回false 可以取消隐藏组件的操作。 在隐藏组件之后触发...
隐藏当前组件。 监听 beforehide' 事件并且返回false 可以取消隐藏组件的操作。 在隐藏组件之后触发 ' hide' 事件。 如果组件被配置成 hidden 那么此方法在内部被调用。
参数:
  • 无。
返回值:
  • Ext.Component
    this
Component
insert ( Number index , Ext.Component component ) : Ext.Component
在当前容器的指定索引处插入一个组件。 在插入之前触发...
在当前容器的指定索引处插入一个组件。 在插入之前触发 beforeadd 事件， 然后在组件被插入之后触发 add 事件。
参数:
  • index : Number
    组件会被插入到容器子项集合中时的索引位置
  • component : Ext.Component
    需要插入的子组件。

    Ext使用懒渲染，只有在必要的时候才会渲染插入的组件。

    如果使用懒渲染，可以传递一个组件配置对象以避免创建一个真实组件的开销， 这意味着，插入的组件不会立即被渲染。 为了利用这个“懒初始化”('lazy instantiation')， 必须把组件设置为它注册的 Ext.Component.xtype 值。

    所有可用的xtype列表，参见 Ext.Component。
返回值:
  • Ext.Component
    使用容器默认配置值插入的组件(或者配置对象)。
Container
isVisible () : Boolean
如果当前组件可见，返回true。
如果当前组件可见，返回true。
参数:
  • 无。
返回值:
  • Boolean
    如果当前组件可见，返回true，其它返回false。
Component
isXType ( String xtype , [ Boolean shallow ] ) : Boolean
Tests whether or not this Component is of a specific xtype. This can test whether this Component is descended from th...

测试此组件是否是指定的xtype。此方法既可以测试是否是指定的xtype的某个子类， 或者它是否直接是指定的xtype类(shallow=true)。

如果使用你自己的子类，必须知道组件必须注册它的xtype值。

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

示例用法:

var t = new Ext.form.TextField();
var isText = t.isXType('textfield');        // true
var isBoxSubclass = t.isXType('box');       // true, descended from BoxComponent
var isBoxInstance = t.isXType('box', true); // false, not a direct BoxComponent instance
参数:
  • xtype : String
    需要为当前组件进行检测的xtype
  • shallow : Boolean
    (可选) 如果为false，检测组件是否是xtype继承树中的某个子类（默认是这种情况）， 如果为true，只检测组件是否是指定的xtype类型。
返回值:
  • Boolean
    如果当前组件是指定xtype的子类，返回true，其它返回flase。
Component
load ( Object/String/Function config ) : Ext.Panel
立即使用XHR返回的内容装载当前panel的内容。
立即使用XHR返回的内容装载当前panel的内容。
参数:
  • config : Object/String/Function
    一个包含任何如下选项的配置对象:
    panel.load({
    url: 'your-url.php',
    params: {param1: 'foo', param2: 'bar'}, // or a URL encoded string
    callback: yourFunction,
    scope: yourObject, // optional scope for the callback
    discardUrl: false,
    nocache: false,
    text: 'Loading...',
    timeout: 30,
    scripts: false
});
    唯一的必须参数是url。 可选的nocache、text和script参数是 disableCaching、indicatorText和loadScripts的快捷方式， 它们被用来设置到当前panel的Updater实例所绑定的 属性上。
返回值:
  • Ext.Panel
    this
Panel
mon ( Observable|Element item , Object|String ename , Function fn , Object scope , Object opt ) : void
向任何Observable对象(或者元素)上添加监听器，监听器将会在组件...

向任何Observable对象(或者元素)上添加监听器，监听器将会在组件销毁时被自动删除。
用法：

myGridPanel.mon(myGridPanel.getSelectionModel(), 'selectionchange', handleSelectionChange, null, {buffer: 50});

or:

myGridPanel.mon(myGridPanel.getSelectionModel(), {
    selectionchange: handleSelectionChange,
    buffer: 50
});
参数:
  • item : Observable|Element
    需要添加listener/listeners的项目。
  • ename : Object|String
    事件名，或者一个包含事件名属性的对象。
  • fn : Function
    (可选) 如果 ename 参数是一个事件名，此参数为处理函数。
  • scope : Object
    (可选)如果 ename 参数是一个事件名称，此参数是作用域 ( this 引用)，监听函数将会在此作用域中被执行。
  • opt : Object
    (可选)如果 ename 参数是一个事件名称， 此参数是 addListener 配置项。
返回值:
  • void
Component
mun ( Observable|Element item , Object|String ename , Function fn , Object scope ) : void
删除通过mon 方法添加的监听器。
删除通过mon 方法添加的监听器。
参数:
  • item : Observable|Element
    需要删除listener/listeners的项目。
  • ename : Object|String
    事件名称，或者一个包含事件名称属性的对象。
  • fn : Function
    (可选)如果 ename 参数是一个事件名称，此参数是一个处理函数。
  • scope : Object
    (可选)如果 ename 参数是一个事件名称，此参数是作用域 ( this 引用)，监听函数将会在此作用域中被执行。
返回值:
  • void
Component
nextSibling () : Ext.Component
返回所属容器中的下一个组件
返回所属容器中的下一个组件
参数:
  • 无。
返回值:
  • Ext.Component
Component
on( String eventName, Function handler, [Object scope], [Object options] ) : void
给对象添加事件处理器 (addListener的简写形式)
给对象添加事件处理器 (addListener的简写形式。)
参数:
  • eventName : String
    监听的事件类型
  • handler : Function
    事件调用的方法
  • scope : Object
    （可选）处理方法执行时的作用域 (this 的引用)。 如果被忽略。默认为触发事件的对象。
  • options : Object
    可选 包含处理器配置的对象。
返回值:
  • void
Observable
previousSibling () : Ext.Component
返回所属容器中的前一个组件
返回所属容器中的前一个组件
参数:
  • 无。
返回值:
  • Ext.Component
Component
purgeListeners() : void
移除对象上所有的监听器
移除对象上所有的监听器
参数:
  • 无。
返回值:
  • void
Observable
relayEvents( Object o, Array events ) : void
从指定的Observable上传递选择的事件就好像被当前对象触发一样。
从指定的Observable上传递选择的事件就好像被当前对象触发一样。
参数:
  • o : Object
    该Observable上的事件被当前对象传递。
  • events : Array
    传递的数组名。
返回值:
  • void
Observable
remove ( Component/String component , [ Boolean autoDestroy ] ) : Ext.Component
从当前容器中移除一个组件。 在移除之前触发 beforeremove 事件， 然后在组件被移除之后触发...
从当前容器中移除一个组件。 在移除之前触发 beforeremove 事件， 然后在组件被移除之后触发 remove 事件。
参数:
  • component : Component/String
    需要移除的组件引用或者id
  • autoDestroy : Boolean
    (可选) 设置为true将自动调用被删组件的 Ext.Component.destroy 函数。 默认为容器的 autoDestroy 配置值。
返回值:
  • Ext.Component
    被移除的组件。
Container
removeAll ( [ Boolean autoDestroy ] ) : Array
从当前容器中删除所有组件。
从当前容器中删除所有组件。
参数:
  • autoDestroy : Boolean
    (可选) 此参数为true时将自动调用 被删组件的 Ext.Component.destroy 方法。 默认为当前容器的 autoDestroy 配置值。
返回值:
  • Array
    被销毁的组件数组
Container
removeClass ( string cls ) : Ext.Component
从组件底层的元素上删除一个CSS类。
从组件底层的元素上删除一个CSS类。
参数:
  • cls : string
    需要移除的CSS类名
返回值:
  • Ext.Component
    this
Component
removeListener( String eventName, Function handler, [Object scope] ) : void
删除一个事件处理器。
删除一个事件处理器。
参数:
  • eventName : String
    处理器关联的事件类型。
  • handler : Function
    移除的处理器。 这应该是传递到addListener里的方法的引用。
  • scope : Object
    （可选）处理器指定的初始作用域。
返回值:
  • void
Observable
render ( [ Element/HTMLElement/String container ], [ String/Number position ] ) : void
在传递进来的HTML元素中渲染当前组件。...

在传递进来的HTML元素中渲染当前组件。

如果你正在使用一个Container 对象放置当前组件，那么请不要使用render方法。

当容器第一次被渲染时，它的子组件将会被容器的 layout 管理器渲染。

某些布局管理器允许动态添加子组件。它们包括 Ext.layout.CardLayout, Ext.layout.AnchorLayout, Ext.layout.FormLayout, Ext.layout.TableLayout。

当一个新的子组件被添加时，如果容器已经被渲染了， 你可能需要调用容器的 doLayout 方法来刷新视图，它将导致所有没有被渲染的子组件进行渲染操作。 此操作是必须的，这样你可以添加多个子组件而只刷新一次layout。

当创建复杂的UI时，非常重要的一点是，请记住调整子项目的尺寸和位置是容器的 layout 管理器的职责。 如果你希望子项目的尺寸对用户交互作出反应， 你必须为容器配置一个布局管理器，它将创建和管理你心里想要的那种布局。

忽略容器的layout 配置意味着将会使用一个基本的布局管理器，它除了按次序把子组件 渲染到容器中之外什么事情都不做。 这种情况下，任何尺寸和位置的调整操作都不会发生。

参数:
  • container : Element/HTMLElement/String
    (可选) 需要在其中渲染当前组件的元素。 如果它是从一个已存在的标签中创建的，此参数应该被忽略。
  • position : String/Number
    (可选) 容器中的一个元素ID或者一个DOM节点索引， 当前组件将会被插入到它前面 (默认append到容器的尾部)
返回值:
  • void
Component
resumeEvents() : void
重新开始触发事件。(参见suspendEvents) 如果事件以queueSuspended参数被挂起，则在事件被挂起时 ...
重新开始触发事件。(参见 suspendEvents) 如果事件以queueSuspended 参数被挂起，则在事件被挂起时触发的事件会被传递到所有的监听器上
参数:
  • 无。
返回值:
  • void
Observable
setAutoScroll ( Boolean scroll ) : Ext.BoxComponent
设置该组件内容溢出时是否自动显示滚动条。
设置该组件内容溢出时是否自动显示滚动条。
参数:
  • scroll : Boolean
    值为true的话组件自动显示滚动条。
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setDisabled ( Boolean disabled ) : Ext.Component
工具函数，使用布尔值设置有效/无效(disabled/enabled )。
工具函数，使用布尔值设置有效/无效(disabled/enabled )。
参数:
  • disabled : Boolean
返回值:
  • Ext.Component
    this
Component
setHeight ( Mixed height ) : Ext.BoxComponent
设置此组件的高度。该方法将触发resize事件。
设置此组件的高度。该方法将触发resize事件。
参数:
  • height : Mixed
    The new height to set.
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setIconClass ( String cls ) : void
设置CSS类，为当前panel提供图标图片。 如果已经设置了...
设置CSS类，为当前panel提供图标图片。 如果已经设置了，此方法将会替换任何现有的图标类并在完成之后触发 iconchange 事件。
参数:
  • cls : String
    新的CSS类名
返回值:
  • void
Panel
setPagePosition ( Number x , Number y ) : Ext.BoxComponent
设置组件在页面中的XY位置。 如果需要设置left和top值 ，请使用...
设置组件在页面中的XY位置。 如果需要设置left和top值 ，请使用setPosition方法。 该方法触发move事件。
参数:
  • x : Number
    The new x position
  • y : Number
    The new y position
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setPosition ( Number left , Number top ) : Ext.BoxComponent
设置组件的left和top值。设置组件的页面XY值，请使用setPagePosition方法。该方法触发...
设置组件的left和top值。设置组件的页面XY值，请使用setPagePosition方法。该方法触发move事件。
参数:
  • left : Number
    The new left
  • top : Number
    The new top
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setSize ( Mixed width , Mixed height ) : Ext.BoxComponent
设置BoxComponent的宽度和高度。 此方法触发resize事件...
设置BoxComponent的宽度和高度。 此方法触发resize事件。此方法可以接收单独的width或者height值作为参数， 或者你可以传递像这样的一个size对象： {width:10, height:20} 。
参数:
  • width : Mixed
    设置的新的width值。这可以是：
    • 一个Number类型指定Element新的宽度 Ext.Element.defaultUnit(默认为像素 :'px')。
    • 一个String类型用于设置width的CSS样式。
    • 一个size对象格式为 {width: widthValue, height: heightValue} 。
    • 值为 undefined 时，保留原来的width不变。
  • height : Mixed
    设置的新的height值(如果第一个参数传递了一个size对象，此参数没有必要传递)。这可以是：
    • 一个Number类型指定Element新的高度 Ext.Element.defaultUnit(默认为像素 :'px')。
    • 一个String类型用于设置height的CSS样式。也有可能不会被使用到。
    • 值为 undefined 时，保留原来的height不变。
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setTitle ( String title , [ String iconCls ] ) : void
为panel设置标题文本，也可选择设置 icon class。...

为panel设置标题文本，也可选择设置 icon class。

为了能够设置标题，必须已经为Panel创建了一个header元素。 要么通过向Panel上注册一个非空的 title ，或者配置 header: true ，可触发此操作(译者注：指为Panel创建header元素)。

参数:
  • title : String
    需要设置的标题文本
  • iconCls : String
    (可选) iconCls 一个用户定义的CSS类，为当前panel提供图标图片。
返回值:
  • void
Panel
setVisible ( Boolean visible ) : Ext.Component
工具方法，通过使用布尔值隐藏或者显示当前组件。
工具方法，通过使用布尔值隐藏或者显示当前组件。
参数:
  • visible : Boolean
    true时显示，false时隐藏
返回值:
  • Ext.Component
    this
Component
setWidth ( Mixed width ) : Ext.BoxComponent
设置组件的宽度。 此方法触发resize事件。
设置组件的宽度。 此方法触发resize事件。
参数:
  • width : Mixed
    The new width to set.
返回值:
  • Ext.BoxComponent
    this
BoxComponent
show () : Ext.Component
显示当前组件。监听' beforeshow' 事件，返回 false 取消显示组件...
显示当前组件。监听' beforeshow' 事件，返回 false 取消显示组件。在显示组件之后触发' show' 事件。
参数:
  • 无。
返回值:
  • Ext.Component
    this
Component
showAt ( Array xy ) : void
在指定的XY位置显示当前tip。示例用法:
// 在x:50 和 y:100位置处显示tip
tip.showAt([50,100]);
在指定的XY位置显示当前tip。示例用法:
// 在x:50 和 y:100位置处显示tip
tip.showAt([50,100]);
参数:
  • xy : Array
    一个包含x和y坐标的数组
返回值:
  • void
Tip
showBy ( Mixed el , [ String position ] ) : void
实验性参数。 根据标准的Ext.Element.alignTo 位置值，在与其它元素相关的位置显示当前...
实验性参数。 根据标准的Ext.Element.alignTo 位置值，在与其它元素相关的位置显示当前tip。示例用法:
// 在默认位置显示tip('tl-br?')
tip.showBy('my-el');

// 将tip的左上角对齐显示到元素的右上角
tip.showBy('my-el', 'tl-tr');
参数:
  • el : Mixed
    需要对齐到的一个HTMLElement、Ext.Element或者目标元素的字符串id
  • position : String
    (可选) 一个有效的Ext.Element.alignTo 锚定位置(如果不指定，默认为'tl-br?'或者 defaultAlign )。
返回值:
  • void
Tip
suspendEvents( Boolean queueSuspended ) : void
暂停触发所有的事件。 (参看resumeEvents)
暂停触发所有的事件。（参看 resumeEvents)
参数:
  • queueSuspended : Boolean
    如果传递为true则排列好暂停的事件使得在调用 resumeEvents 后再触发它们，而不是抛弃所有暂停的事件。
返回值:
  • void
Observable
syncSize () : Ext.BoxComponent
强制组件的大小按照此组件底层元素当前的高度和宽度计算。
强制组件的大小按照此组件底层元素当前的高度和宽度计算。
参数:
  • 无。
返回值:
  • Ext.BoxComponent
    this
BoxComponent
toggleCollapse ( Boolean animate ) : Ext.Panel
根据panel的当前状态，执行expand或者 collapse操作 的快捷方式。
根据panel的当前状态，执行expand或者 collapse操作 的快捷方式。
参数:
  • animate : Boolean
    True将会在转换过程中使用动画效果，否则为false (默认为panel的animCollapse 配置项的值)
返回值:
  • Ext.Panel
    this
Panel
un( String eventName, Function handler, [Object scope] ) : void
删除一个事件处理器(removeListener方法的简写形式)
删除一个事件处理器(removeListener方法的简写形式。)
参数:
  • eventName : String
    处理器关联的事件类型
  • handler : Function
    被删除的处理器 这应该是传入 addListener 中的方法的引用。
  • scope : Object
    （可选）为处理器指定的初始作用域。
返回值:
  • void
Observable
update ( Mixed htmlOrData , [ Boolean loadScripts ], [ Function callback ] ) : void
刷新组件的内部区域。
刷新组件的内部区域。
参数:
  • htmlOrData : Mixed
    如果已经通过tpl为当前组件配置了一个模板，那么 将会使用此参数来装配模板。 如果没有为当前组件配置模板，组件的内容区域将会通过Ext.Element 进行刷新。
  • loadScripts : Boolean
    (可选)只用在使用html配置时此参数才合法。默认为false。
  • callback : Function
    (可选)只用在使用html配置时此参数才合法。 当脚本加载完成时回调函数才被执行。
返回值:
  • void
Component
updateBox ( Object box ) : Ext.BoxComponent
设置此组件底层元素的盒子模型尺寸。(译者注：盒子模型是CSS术语，详细资料请自行搜索。)
设置此组件底层元素的盒子模型尺寸。(译者注：盒子模型是CSS术语，详细资料请自行搜索。)
参数:
  • box : Object
    一个格式为{x, y, width, height}的对象
返回值:
  • Ext.BoxComponent
    this
BoxComponent

公共事件

Event Defined By
activate : ( Ext.Panel p )
当Panel被设置为视觉活动状态之后触发。 注意Panel不直接支持活动状体，但是Panel的一些子类...
当Panel被设置为视觉活动状态之后触发。 注意Panel不直接支持活动状体，但是Panel的一些子类 (例如 Ext.Window)支持。 作为TabPanel子组件的Panel，在TabPanel的控制之下触发activate和deactivate事件。
监听器将会以如下参数格式被调用:
  • p : Ext.Panel
    被激活的Panel.
Panel
add : ( Ext.Container this , Ext.Component component , Number index )
监听器将会被使用如下的参数被调用:
  • this : Ext.Container
  • component : Ext.Component
    被添加的组件
  • index : Number
    将组件添加到容器子组件集合时的位置索引
Container
added : ( Ext.Component this , Ext.Container ownerCt , number index )
当一个组件被添加到一个Ext.Container时触发
当一个组件被添加到一个Ext.Container时触发
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • ownerCt : Ext.Container
    用于组件的容器
  • index : number
    添加组件的位置
Component
afterlayout : ( Ext.Container this , ContainerLayout layout )
当容器中的组件被指定的布局管理器排列的时候触发。
当容器中的组件被指定的布局管理器排列的时候触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Container
  • layout : ContainerLayout
    为当前容器提供的ContainerLayout实现
Container
afterrender : ( Ext.Component this )
在组件渲染完成之后触发...

在组件渲染完成之后触发。

afterrender事件在当前组件被rendered 结束之后、在为组件定义的所有afterRender方法执行之后 触发，并且，如果有stateful， 也在状态被保存之后才触发。

监听器将会以如下参数格式被调用:
  • this : Ext.Component
Component
beforeadd : ( Ext.Container this , Ext.Component component , Number index )
在任何 Ext.Component 被添加或者插入到容器中之前触发。 事件处理器可以返回false取消添加操作。
在任何 Ext.Component 被添加或者插入到容器中之前触发。 事件处理器可以返回false取消添加操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Container
  • component : Ext.Component
    被添加的组件
  • index : Number
    组件被添加到容器子项目集合中时的索引位置
Container
beforeclose : ( Ext.Panel p )
在Panel被关闭之前触发。 注意，Panel不直接支持关闭操作，但是Panel的一些子类(例如...
在Panel被关闭之前触发。 注意，Panel不直接支持关闭操作，但是Panel的一些子类(例如 Ext.Window) ，或者一个位于Ext.TabPanel中的Panel支持。 此事件仅被应用到这些子类中。处理函数可以返回false以取消关闭操作。
监听器将会以如下参数格式被调用:
  • p : Ext.Panel
    正在被关闭的Panel.
Panel
beforecollapse : ( Ext.Panel p , Boolean animate )
在Panel被折叠之前触发。监听器可以返回false取消折叠。
在Panel被折叠之前触发。监听器可以返回false取消折叠。
监听器将会以如下参数格式被调用:
  • p : Ext.Panel
    被折叠的Panel
  • animate : Boolean
    如果折叠操作使用了动画效果，此参数为true，其它为false
Panel
beforedestroy : ( Ext.Component this )
在组件 destroyed 之前触发。 在事件监听器中返回false以停止 destroy 操作。
在组件 destroyed 之前触发。 在事件监听器中返回false以停止 destroy 操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforeexpand : ( Ext.Panel p , Boolean animate )
在Panel被展开之前触发。监听器可以返回false取消展开操作。
在Panel被展开之前触发。监听器可以返回false取消展开操作。
监听器将会以如下参数格式被调用:
  • p : Ext.Panel
    被展开的Panel
  • animate : Boolean
    如果展开操作使用动画效果，为true，其它为false
Panel
beforehide : ( Ext.Component this )
在调用hide方法隐藏组件之前触发。 在事件监听器中返回false可以停止隐藏操作。
在调用hide方法隐藏组件之前触发。 在事件监听器中返回false可以停止隐藏操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforeremove : ( Ext.Container this , Ext.Component component )
从容器中删除任何Ext.Component 之前触发。 处理器可以返回false取消remove操作。
从容器中删除任何Ext.Component 之前触发。 处理器可以返回false取消remove操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Container
  • component : Ext.Component
    被删除的组件
Container
beforerender : ( Ext.Component this )
在组件被rendered 之前触发。 在事件监听器中返回false可以停止render 操作。
在组件被rendered 之前触发。 在事件监听器中返回false可以停止render 操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforeshow : ( Ext.Component this )
在调用show()方法现实组件之前触发。 事件处理函数返回false可以停止show。
在调用show 方法现实组件之前触发。 事件处理函数返回false可以停止show。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforestaterestore : ( Ext.Component this , Object state )
在组件状态恢复之前触发。返回false停止恢复状态操作。
在组件状态恢复之前触发。返回false停止恢复状态操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    StateProvider返回的状态哈希值。 如果没有禁止此事件，那么状态对象会被传递给applyState。 默认情况下，这样简单地把属性值拷贝到当前组件中。 可以覆盖此方法以提供自定的状态恢复操作。
Component
beforestatesave : ( Ext.Component this , Object state )
在组件状态被保存到配置的状态提供者之前触发。 返回false可以停止保存。
在组件状态被保存到配置的状态提供者之前触发。 返回false可以停止保存。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    状态值哈希。 这由在组件上调用getState() 方法决定。 此方法必须由开发者提供，返回是否需要对状态进行描述，默认情况下， Ext.Component有一个空实现。
Component
bodyresize : ( Ext.Panel p , Number width , Number height )
在Panel被调整尺寸之后触发。
在Panel被调整尺寸之后触发。
监听器将会以如下参数格式被调用:
  • p : Ext.Panel
    被调整尺寸的Panel
  • width : Number
    Panel body的新宽度。
  • height : Number
    Panel body的新高度。
Panel
close : ( Ext.Panel p )
在Panel被关闭之后触发。注意，Panel不直接提供关闭操作， 但是Panel的一些子类(例如...
在Panel被关闭之后触发。注意，Panel不直接提供关闭操作， 但是Panel的一些子类(例如 Ext.Window) ，或者处于Ext.TabPanel中的Panel支持。
监听器将会以如下参数格式被调用:
  • p : Ext.Panel
    被关闭的Panel.
Panel
collapse : ( Ext.Panel p )
在Panel被折叠后触发。
在Panel被折叠后触发。
监听器将会以如下参数格式被调用:
  • p : Ext.Panel
    被折叠的Panel
Panel
deactivate : ( Ext.Panel p )
在Panel被视觉上失去活动状态之后触发。 注意，Panel不直接支持此操作，但是Panel的一些子类...
在Panel被视觉上失去活动状态之后触发。 注意，Panel不直接支持此操作，但是Panel的一些子类 (例如Ext.Window)支持。 作为TabPanel的子组件的Panel将会在TabPanel的控制之下触发activate 和deactivate事件。
监听器将会以如下参数格式被调用:
  • p : Ext.Panel
    失去活动状态的Panel
Panel
destroy : ( Ext.Component this )
在组件被销毁之后触发。
在组件被destroyed之后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
disable : ( Ext.Component this )
在组件被设置为无效状态后触发。
在组件被设置为无效状态后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
enable : ( Ext.Component this )
当组件被设置为有效(enabled)之后触发。
当组件被设置为有效(enabled)之后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
expand : ( Ext.Panel p )
当Panel已经展开之后触发。
当Panel已经展开之后触发。
监听器将会以如下参数格式被调用:
  • p : Ext.Panel
    已经被展开的Panel.
Panel
hide : ( Ext.Component this )
在组件被隐藏之后触发。 当调用hide 方法隐藏组件之后触发。
在组件被隐藏之后触发。 当调用hide 方法隐藏组件之后触发。
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
iconchange : ( Ext.Panel p , String The , String The )
当Panel的图标被set或者 changed 之后触发。
当Panel的图标被set或者 changed 之后触发。
监听器将会以如下参数格式被调用:
  • p : Ext.Panel
    icon class被变化的Panel
  • The : String
    新icon类
  • The : String
    旧icon类
Panel
move : ( Ext.Component this , Number x , Number y )
在组件移动之后触发。
在组件移动之后触发。
监听器将会用如下的参数格式来调用:
  • this : Ext.Component
  • x : Number
    The new x position
  • y : Number
    The new y position
BoxComponent
remove : ( Ext.Container this , Ext.Component component )
监听器将会以如下的参数格式被调用:
  • this : Ext.Container
  • component : Ext.Component
    被删除的组件
Container
removed : ( Ext.Component this , Ext.Container ownerCt )
当一个组件被从Ext.Container容器中删除时触发
当一个组件被从Ext.Container容器中删除时触发
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • ownerCt : Ext.Container
    持有组件的容器
Component
render : ( Ext.Component this )
在组件被渲染之后触发。
在组件被 rendered(渲染) 之后触发。
监听器将以如下的参数格式被调用:
  • this : Ext.Component
Component
resize : ( Ext.Component this , Number adjWidth , Number adjHeight , Number rawWidth , Number rawHeight )
在组件被调整大小之后触发。
在组件被调整大小之后触发。
监听器将以如下的参数格式被调用:
  • this : Ext.Component
  • adjWidth : Number
    这是width调整后的值
  • adjHeight : Number
    这是height调整后的值
  • rawWidth : Number
    这是width原来的值
  • rawHeight : Number
    这是height原来的值
BoxComponent
show : ( Ext.Component this )
在调用show 方法显示组件之后触发。
在调用show 方法显示组件之后触发。
监听器将会用如下的参数格式被调用:
  • this : Ext.Component
Component
staterestore : ( Ext.Component this , Object state )
组件状态被存储之后触发。
组件状态被存储之后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    StateProvider返回的状态哈希值。 如果没有禁止此事件，那么状态对象会被传递给applyState。 默认情况下，这样简单地把属性值拷贝到当前组件中。 可以覆盖此方法以提供自定的状态恢复操作。
Component
statesave : ( Ext.Component this , Object state )
在组件状态被保存到所配置的状态提供者之后触发。
在组件状态被保存到所配置的状态提供者之后触发。
监听器将会用如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    状态值hash。 这是由在足见上调用getState() 方法决定的。 开发者必须提供此方法以返回是否需要恢复状态，默认情况下， Ext.Component有一个空实现。
Component
titlechange : ( Ext.Panel p , String The )
在Panel的标题被set或者 changed 之后触发。
在Panel的标题被set或者 changed 之后触发。
监听器将会以如下参数格式被调用:
  • p : Ext.Panel
    标题被改变的Panel.
  • The : String
    新的标题。
Panel


Observable
    Component
      BoxComponent
        Spacer

Class Ext.Spacer

包: | Ext
定义类的文件: | BoxComponent.js
类: | Spacer
继承自: | BoxComponent

用来在布局中提供一个可调整尺寸的空白区域。

配置项

Config Options Defined By
allowDomMove : Boolean
在渲染时组件是否可以移动Dom节点(默认为true)。
Component
anchor : String
注: 这个配置只用于该组件被包含在一个已使用AnchorLayout...

注: 这个配置只用于该组件被包含在一个已使用 AnchorLayout (或者其子类)配置的Container时。 基于布局管理器，例如：

  • Ext.form.FormPanel
  • 指定 layout: 'anchor' // or 'form', or 'absolute'

参见 Ext.layout.AnchorLayout. anchor 。

BoxComponent
applyTo : Mixed
指定一个元素的id、一个DOM元素或者一个已经存在并被渲染到DIV中的元素，此DIV已经被...

指定一个元素的id、一个DOM元素或者一个已经存在并被渲染到DIV中的元素，此DIV已经被 渲染到document中，并且为当前组件指定了一些结构化的标签。

  • 描述 :
      当使用了 applyTo， 在主元素中也可以用id或者CSS类名来指定组件的托管部分， 并且，如果可以的话，创建的组件可能也会试图在那个标签中创建它的子组件。
  • 注意 :
      当使用此配置项时，无需调用render()方法。
      如果指定了applyTo属性，任何传递给 renderTo 的值都会被忽略，并且目标元素的父节点将会自动被用作组件的容器。
Component
autoEl : Mixed
一个表签名或者一个 DomHelper 描述，用来创建 Element ，它将封装当前组件...

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

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

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

{
    xtype: 'box',
    autoEl: {
        tag: 'img',
        src: 'http://www.example.com/example.jpg'

    }
}, {
    xtype: 'box',
    autoEl: {
        tag: 'blockquote',
        html: 'autoEl is cool!'
    }
}, {
    xtype: 'container',
    autoEl: 'ul',
    cls: 'ux-unordered-list',
    items: {
        xtype: 'box',
        autoEl: 'li',
        html: 'First list item'
    }
}
Component
autoHeight : Boolean
如果值为true，height配置项为'auto'，否则值为false的话使用固定的高度...

如果值为true，height配置项为'auto'，否则值为false的话使用固定的高度， 或者可以由其父类容器 layout manager来控制。(默认值为 false)。

注: 虽然很多组件继承了这个配置选项，但不是所有这些组件的自适应高度配置都会像期望的那样起作用。 设置autoHeight：值为true时，浏览器将根据元素的内容自动设置高度，这将意味着Ext不会去管理高度。

如果是由浏览器来管理高度，需要注意的是，通过浏览器进行调整的结构组件内不能被发现， 因此宽度的变化可能导致需要进行同步处理元素的高度。 例如：

var w = new Ext.Window({
    title: 'Window',
    width: 600,
    autoHeight: true,
    items: {
        title: 'Collapse Me',
        height: 400,
        collapsible: true,
        border: false,
        listeners: {
            beforecollapse: function() {
                w.el.shadow.hide();
            },
            beforeexpand: function() {
                w.el.shadow.hide();
            },
            collapse: function() {
                w.syncShadow();
            },
            expand: function() {
                w.syncShadow();
            }
        }
    }
}).show();
BoxComponent
autoScroll : Boolean
如果值为true，将会在该元素上使用overflow:'auto'配置，并且在必要的时候...
如果值为true，将会在该元素上使用overflow:'auto'配置，并且在必要的时候自动显示滚动条，否则，溢出部分的组件都会被切除(默认值为 false)。
BoxComponent
autoShow : Boolean
如果组件需要检测隐藏CSS属性(如 'x-hidden' 或者 'x-hide-display')并且在渲染时删除...
如果组件需要检测隐藏CSS属性(如 'x-hidden' 或者 'x-hide-display')并且在渲染时删除它们 (默认为false)，设置此值为true。
Component
autoWidth : Boolean
如果为true，使用width:'auto'配置，否则使用固定的宽度...

如果为true，使用width:'auto'配置，否则使用固定的宽度，或者可以由其父类容器的layout manager来控制。(默认值为 false)。

注: 虽然很多组件继承了这个配置选项，但不是所有这些组件的自适应宽度配置都会像期望的那样起作用。 设置autoWidth：值为true时，浏览器将根据元素的内容自动设置宽度，这将意味着Ext不会去管理宽度。

如果是由浏览器来管理宽度，需要注意的是，通过浏览器进行调整的结构组件内不能被发现，因此宽度的变化可能导致需要进行同步处理元素的宽度。 例如，在这个元素的目标是：

<div id='grid-container' style='margin-left:25%;width:50%'></div>
当浏览器窗口改变时，渲染后的Panel必须监听浏览器窗口大小的变化，以便通知子项，浏览器改变了其宽度：

var myPanel = new Ext.Panel({
    renderTo: 'grid-container',
    monitorResize: true, // relay on browser resize
    title: 'Panel',
    height: 400,
    autoWidth: true,
    layout: 'hbox',
    layoutConfig: {
        align: 'stretch'
    },
    defaults: {
        flex: 1
    },
    items: [{
        title: 'Box 1',
    }, {
        title: 'Box 2'
    }, {
        title: 'Box 3'
    }],
});
BoxComponent
boxMaxHeight : Number
设置组件的最大高度值...

设置组件的最大高度值。

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

BoxComponent
boxMaxWidth : Number
设置组件的最大宽度值...

设置组件的最大宽度值。

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

BoxComponent
boxMinHeight : Number
设置组件的最小高度值...

设置组件的最小高度值。

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

BoxComponent
boxMinWidth : Number
设置组件的最小宽度值...

设置组件的最小宽度值。

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

BoxComponent
bubbleEvents : Array
一个事件数组，当这些事件被触发时，将会被冒泡到所有父容器中。参见....

一个事件数组，当这些事件被触发时，将会被冒泡到所有父容器中。参见 Ext.util.Observable.enableBubble。 默认为 []。

Component
clearCls : String
应用到特殊的clearing div的CSS类， 这个clearing div直接渲染到每个form field的包装器后面...

应用到特殊的clearing div的CSS类， 这个clearing div直接渲染到每个form field的包装器后面，以提供 清除field的功能(默认为 'x-form-clear-left')。

注意: 只有在当前组件被渲染到一个使用FormLayout 布局(例如 Ext.form.FormPanel 或者指定 layout:'form')的 容器中、或者是指定了一个fieldLabel 、或者指定isFormField=true 时此配置才有效。

另请参见 Ext.layout.FormLayout. fieldTpl。

Component
cls : String
一个可选的额外CSS类，它将被添加到当前组件的元素上(默认为'')...
一个可选的额外CSS类，它将被添加到当前组件的元素上(默认为'')。 此属性对于在组件上，或者它的任何使用标准CSS规则的孩子节点上， 添加定制的样式非常有用。
Component
contentEl : String
(可选)指定一个已存在的HTML元素，或者一个已存在HTML元素的...

(可选)指定一个已存在的HTML元素，或者一个已存在HTML元素的 id ，它们将被用作当前组件的内容。

  • 描述 :
    此配置选项被用来将一个已存在的HTML元素 插入到一个新组件(在组件渲染之后它简单地移动DOM元素) 的layout元素中，使它成为该组件的内容。
  • 注意 :
    指定的HTML元素将被append到组件的layout元素中， 在所有配置的 HTML 被插入之后， 并且，这样的话，在render事件 被触发时，document中将不再包含此元素。
    指定的HTML元素将不会参与组件所有可能使用的 layout 过程(译者注：指这些HTML元素 不会参与布局操作)。 它仅是HTML而已。布局操作实在孩子 items 上进行的。
    添加 x-hidden 或者 x-hide-display CSS类，以防在内容渲染到panel时发生闪烁。
Component
ctCls : String
一个可选的外部CSS样式，添加到这个组件的容器(默认值为 '')。 这个方法对于使用标准的CSS规则...

一个可选的外部CSS样式，添加到这个组件的容器(默认值为 '')。 这个方法对于使用标准的CSS规则，为组件或它的任何一个子组件添加特定的样式非常有用。 参见 Ext.layout.ContainerLayout和 extraCls 。

注意: ctCls 默认为 ''期望如下的类，它们将指定一个默认值:

  • Box Layout : 'x-box-layout-ct'
使用一个额外的CSS类配置以上的Class，它是append到默认对象上的。例如， 对于BoxLayout (Hbox and Vbox):
                                ctCls: 'x-box-layout-ct custom-class'

Component
data : Mixed
初始化数据集，它将被应用到 tpl 上以刷新组件的内容区域。
Component
disabled : Boolean
当前组件处于无效状态时为true。 Read-only.
Component
disabledClass : String
当组件处于无效状态时添加到组件上的CSS类(默认为 'x-item-disabled')。
Component
fieldLabel : String
紧靠此field显示的标签文本(默认值为 '')。注意...

紧靠此field显示的标签文本(默认值为 '')。

注意:只有在当前组件被渲染到一个使用FormLayout 的容器中时，此配置才有效。 (例如 Ext.form.FormPanel 或 指定 layout:'form')。

另请参见 hideLabel 、 Ext.layout.FormLayout和 fieldTpl。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Name'
    }]
});
Component
flex : Number
注: 这个配置只用于该组件被包含在一个已使用BoxLayout配置的Container中时...

注: 这个配置只用于该组件被包含在一个已使用BoxLayout配置的Container中时。通过计算每一个子组件的flex值所占全部flex值之和的比例，来决定子组件的宽(HBoxLayout)高(VBoxlayout)。 任何子项的 flex = 0 或 flex = undefined 将不被设置(初始值大小将不被改变)。

BoxComponent
height : Number
组件的高度(默认值为 auto)。注:如果想使用百分比的方式...
组件的高度(默认值为 auto)。注:如果想使用百分比的方式来设置值，请查看 Ext.Component.anchor。
BoxComponent
hidden : Boolean
如果当前组件处于隐藏状态，此值为true。Read-only。
Component
hideLabel : Boolean
true时完全隐藏label元素 ( label 和 separator)。 默认为 false。 默认情况下，即使你不指定...

true时完全隐藏label元素 ( label 和 separator)。 默认为 false。 默认情况下，即使你不指定 fieldLabel 它的空间仍然会被保留，这样这块区域会与其它确实拥有label的区域位于同一排。 讲此值设置为 true 将导致此区域不再保留此空间。

注意: 参见 clearCls 的注释。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield'
        hideLabel: true
    }]
});
Component
hideMode : String
组件如何隐藏，支持的值有： 'visibility' (css visibility), 'offsets' (位置偏移量为负值) 和...

组件如何隐藏，支持的值有： 'visibility' (css visibility), 'offsets' (位置偏移量为负值) 和 'display' (css display).

注意:一般首选默认值 'display'，因为当组件第一次显示的时候它们会自动进行布局 (隐藏的时候不会调整尺寸)。

Component
hideParent : Boolean
此值为true时，当调用hide/show方法时，将会hide和show组件的容器...
此值为true时，当调用hide/show方法时，将会hide和show组件的容器；false时将会 hide和show组件自身(默认为false)。例如，这可以用作window上隐藏按钮的一种 快捷操作，通过设置此按钮的hideParent:true，然后把它添加到window上。
Component
html : String/Object
一个HTML片段，或者一个 DomHelper 描述，用作layout元素的内容(默认为'')。...
一个HTML片段，或者一个 DomHelper 描述，用作layout元素的内容(默认为'')。 这个HTML内容在组件渲染之后才被添加，所以在 render 出发的时候，document中尚未包含此HTML。 但是这个内容将会在所有配置的 contentEl 之前被插入到body标签中。
Component
id : String
当前组件唯一的id(默认为auto-assigned id)...

当前组件唯一的id(默认为auto-assigned id)。 如果你需要在以后访问组件，而又没有一个有效的组件对象引用，那么你需要指定一个 id( 也就是，使用Ext. getCmp方法 )。

注意，此id也将被用作组件底层HTML标签的id，这些标签被渲染到页面中。 这将允许你编写基于id的CSS规则，以独立地描述指定的实例；并且，也可以通过 组件父标签的id选中子元素。

注意:为了避免与唯一的id 产生重复， 请参见 itemId 和 ref 。

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

Component
itemCls : String
注意: 只有在当前组件被渲染到一个使用FormLayout 布局的 容器中时此配置才有效...

注意: 只有在当前组件被渲染到一个使用FormLayout 布局的 容器中时此配置才有效。 (例如Ext.form.FormPanel 或者指定 layout:'form')。

一个附加的CSS类，应用到div上，包装当前field的表单元素。 如果提供了此参数， field级上的itemCls将会覆盖 container级上提供的 默认itemCls。 为itemCls指定的值将会被添加默认的 类('x-form-item')。

既然它被应用到项目的包装器上(参见 Ext.layout.FormLayout。 fieldTpl)， 它将允许你编写能应用到此field、label(如果有指定)、或者field内部任何其它元素的标准CSS规则。

注意: 参考 fieldLabel的注释。 .

示例用法:

// Apply a style to the field's label:
<style>
    .required .x-form-item-label {font-weight:bold;color:red;}
</style>

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Name',
        itemCls: 'required' //this label will be styled
    },{
        xtype: 'textfield',
        fieldLabel: 'Favorite Color'
    }]
});
Component
itemId : String
当没有可利用的对象引用时，itemId可以作为第二选择，用来获得一个组件的引用， 代替 ...

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

var c = new Ext.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'); // 与 Ext.getCmp()不同

p2 = p1.ownerCt.getComponent('p2'); // 通过兄弟对象获得引用

另请参见 id 和 ref 。

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

Component
labelSeparator : String
每个fieldLabel 文本后面现实的分隔符。 此属性可以在多个层次上进行配置...

每个fieldLabel 文本后面现实的分隔符。 此属性可以在多个层次上进行配置。优先顺序为：

  • field / component level
  • container level
  • layout level (默认为冒号 ':')
如不需要为当前field的label显示分隔符，指定一个空字符串''即可。

注意:参见 clearCls 的注释。

另请参见 hideLabel 和 Ext.layout.FormLayout。 fieldTpl。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    layoutConfig: {
        labelSeparator: '~'   // layout config has lowest priority (defaults to ':')
    },
    labelSeparator: '>>',     // config at container level
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Field 1',
        labelSeparator: '...' // field/component level config supersedes others
    },{
        xtype: 'textfield',
        fieldLabel: 'Field 2' // labelSeparator will be '='

    }]
});
Component
labelStyle : String
一个CSS样式描述字符串，它将直接应用到当前field的label上...

一个CSS样式描述字符串，它将直接应用到当前field的label上。 如果有设置，默认为容器的labelStyle值(例如 Ext.layout.FormLayout.labelStyle , 或者 '')。

注意:参见 clearCls 的注释。

另请参见 hideLabel 和 Ext.layout.FormLayout. fieldTpl。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Name',
        labelStyle: 'font-weight:bold;'
    }]
});
Component
listeners : Object
一个包含一个或多个事件处理器的配置对象，会在初始化的时候被添加到目标对象上...

一个包含一个或多个事件处理器的配置对象，会在初始化的时候被添加到目标对象上。 该配置对象应该是一个有效的监听器配置对象就像 addListener例子中指定的一样可一次附加多个处理器。

ExtJs Components上的DOM事件

一些 ExtJs Component 类导出时会选择一些DOM事件(例如 "click", "mouseover" 等等), 这通常只是在有额外的值可以被添加时发生。例如DataView类的 click事件会传递被点击的节点。也可以直接在Component的HTMLElementevent上访问DOM事件，但必需在Component被渲染后监听器才能添加到Element 上。可以按照以下步骤添加插件:

// 插件会用一个监听器配置对象进行配置。
//该组件会被添加到所有处理方法的参数列表上。
Ext.DomObserver = Ext.extend(Object, {
    constructor: function(config) {
        this.listeners = config.listeners ? config.listeners : config;
    },

    // 组件将自己传递进了插件的初始化方法里
    init: function(c) {
        var p, l = this.listeners;
        for (p in l) {
            if (Ext.isFunction(l[p])) {
                l[p] = this.createHandler(l[p], c);
            } else {
                l[p].fn = this.createHandler(l[p].fn, c);
            }
        }

        // 渲染后立即添加监听器到元素上
        c.render = c.render.createSequence(function() {
            var e = c.getEl();
            if (e) {
                e.on(l);
            }
        });
    },

    createHandler: function(fn, c) {
        return function(e) {
            fn.call(this, e, c);
        };
    }
});

var combo = new Ext.form.ComboBox({

    // 元素被点击后折叠
    plugins: [ new Ext.DomObserver({
        click: function(evt, comp) {
            comp.collapse();
        }
    })],
    store: myStore,
    typeAhead: true,
    mode: 'local',
    triggerAction: 'all'
});

Observable
margins : Object
注:此配置只用于该组件展现在一个使用BorderLayout...

注:此配置只用于该组件展现在一个使用BorderLayout 或 BoxLayout的两个子类之一作为布局的容器。

这个margins对象在该组件中的格式为：

{top: (top margin),right: (right margin),bottom: (bottom margin),left: (left margin)}

也可以是一个字符串，中间用空格分隔，margin值为数字。 把matches中每一个值的次序跟CSS中margin值的排列方式相对应：

  • 如果只有一个值，它适用于所有方面。
  • 如果有两个值，top和bottom的边框设置为第一个值，left和right设置为第二个值。
  • 如果有三个值，top设置为第一个值，left和right设置为第二个值，bottom设置为第三个值。
  • 如果有四个值，分别设置为top, right, bottom, left。

默认值:

{top:0, right:0, bottom:0, left:0}
BoxComponent
overCls : String
一个可选的额外的CSS类，它将在鼠标移过元素时被添加到组件上...
一个可选的额外的CSS类，它将在鼠标移过元素时被添加到组件上，鼠标移出时 删除。(默认为'')。此属性对于在组件上，或者它的任何使用标准CSS规则的孩子节点上， 添加定制的'active' 或者 'hover'样式非常有用。
Component
pageX : Number
如果该组件被包含在一个指定位置的容器中，这个值表示页面级的x坐标值（译者注：在有滚动条的情况下这个值很有用）。
BoxComponent
pageY : Number
如果该组件被包含在一个指定位置的容器中，这个值表示页面级的y坐标值（译者注：在有滚动条的情况下这个值很有用）。
BoxComponent
plugins : Object/Array
一个对象或者一个对象数组，为组件提供特殊的功能 ...
一个对象或者一个对象数组，为组件提供特殊的功能。 对一个合法的插件唯一的要求是它含有一个init()方法， 能接收一个Ext.Component型的参数。 当组件被创建时，如果有可用的插件，组件将会调用每个插件的init方法， 并将自身的引用作为方法参数传递给它。然后，每个插件就可以调用方法或者响应组件上的事件， 就像需要的那样提供自己的功能。
Component
ptype : String
需要创建配置的ptype。 当传递一个配置对象给构造函数时...
需要创建配置的ptype。 当传递一个配置对象给构造函数时，此配置选项不会被使用。 只有在使用懒初始化的时候此配置项才会被使用， 此时Plugin不是 通过一个完整的实例组件，而是通过一个Component配置指定的。 在渲染时，将会查找ptype以决定创建何种类型的Plugin。

如果你创建自己的Plugin，你可以通过 Ext.ComponentMgr.registerPlugin 对它们进行注册，以便能利用懒初始化和渲染机制。
Component
ref : String
一个路径描述，与组件的 ownerCt 相关，它描述了把当前组件的命名引用放置到哪个父容器中去。...

一个路径描述，与组件的 ownerCt 相关，它描述了把当前组件的命名引用放置到哪个父容器中去。

祖先的坐标路径可以通过'/'字符进行分隔。 例如，将一个Toolbar Button的引用放入 拥有此Toolbar的Panel中:

var myGrid = new Ext.grid.EditorGridPanel({
    title: 'My EditorGridPanel',
    store: myStore,
    colModel: myColModel,
    tbar: [{
        text: 'Save',
        handler: saveChanges,
        disabled: true,
        ref: '../saveButton'
    }],
    listeners: {
        afteredit: function() {
//          The button reference is in the GridPanel
            myGrid.saveButton.enable();
        }
    }
});

在上面的代码中，如果 ref 是 'saveButton' ，那么引用将会被放置到Toolbar中。 ref 中的每个'/' 都会从组件的 ownerCt 向上移动一级。

另请参见 added 和 removed 事件。

Component
region : String
注: 此配置只用于该组件展现在一个布局为BorderLayout的容器中...

注: 此配置只用于该组件展现在一个布局为BorderLayout的容器中(例如指定layout:'border')。

详见Ext.layout.BorderLayout。

BoxComponent
renderTo : Mixed
该值可以是一个节点的id、一个DOM节点或者一个已存在的元素...

该值可以是一个节点的id、一个DOM节点或者一个已存在的元素， 组件将会被渲染到其中。

  • 注意 :
      如果组件不是一个Container 的子项目时， 不要使用此选项。 渲染和管理它的子项目是一个Container 的layout manager的责任。
      当使用此配置项时，无需调用render()方法。

另请参见 render 。

Component
stateEvents : Array
一个事件数组，当它们被触发时，组件需要保存自己的状态(默认值为 none)...

一个事件数组，当它们被触发时，组件需要保存自己的状态(默认值为 none)。 它们可以是任何该组件支持的事件类型，包括浏览器事件和 自定义事件(例如['click', 'customerchange'])。

对于保存和恢复组件状态的详细解释，参见 stateful

Component
stateId : String
为该组件指定的唯一的id值，它被用作管理组件状态的目的...
为该组件指定的唯一的id值，它被用作管理组件状态的目的。 (如果设定了id，默认值为组件自己的id，否则，如果组件使用自动生成的id，此值为null)。

对于保存和反解析组件状态的解释，参见 stateful 。

Component
stateful : Boolean
一个标志参数，它将引起组件在启动时尝试从一个保存的状态中恢复内部状态参数...

一个标志参数，它将引起组件在启动时尝试从一个保存的状态中恢复内部状态参数。 组件必须要么拥有一个 stateId 或者 id ，它们被分配给需要被管理的状态属性。 在跨页面加载时，不保证自动生成的id属性的稳定性， 并且，不能依赖此id来保存和恢复一个组件的相同状态。

为了保存状态的操作能够工作，状态管理器的提供者必须 被设置成一个Ext.state.Provider 的实现类，它覆盖了set 和get 方法，以便保存和恢复name/value对。 有一个内置的Ext.state.CookieProvider 可用。

为当前页面设置状态提供者:

Ext.state.Manager.setProvider(new Ext.state.CookieProvider({
    expires: new Date(new Date().getTime()+(1000*60*60*24*7)), //7 days from now
}));

当 stateEvents 配置项中其中之一的事件被触发时， 一个状态可保存的组件将试图保存其状态。

保存状态时，一个可保存状态的组件首先需要通过调用 getState 方法来序列化它的状态。 默认情况下，此函数什么事都不做。 开发者必须提供一个实现，返回一个hash对象，它描述了组件可恢复的状态。

getState方法产生的值将会传递给 Ext.state.Manager.set 方法，它使用配置的 Ext.state.Provider 来保存对象，以组件的 stateId 为key，或者，如果此值（指stateId）没有指定时， 使用它的 id 作为key。

在进行构造时，一个可保存状态的组件试图通过调用 Ext.state.Manager.get方法来 恢复它的状态，传递 stateId 或者，如果此值（指stateId）没有指定时， 使用它的 id 作为参数。

结果对象被传递给 applyState 。 applyState 的默认实现只是简单地把属性拷贝到对象中， 但是开发者可以覆盖此方法以支持更多行为。

通过向 beforestaterestore, staterestore, beforestatesave 和 statesave 事件上绑定监听器，你可以在保存和恢复状态时进行额外的处理。

Component
style : String
被添加到组件元素的特定样式。 必须是按照...
被添加到组件元素的特定样式。 必须是按照 Ext.Element.applyStyles 类指定格式的合法参数值。

new Ext.Panel({
    title: 'Some Title',
    renderTo: Ext.getBody(),
    width: 400, height: 300,
    layout: 'form',
    items: [{
        xtype: 'textarea',
        style: {
            width: '95%',
            marginBottom: '10px'
        }
    },
        new Ext.Button({
            text: 'Send',
            minWidth: '100',
            style: {
                marginBottom: '10px'
            }
        })
    ]
});
Component
tabTip : String
注: 这个配置只用于当该组件作为TabPanel的一个子项目时使用...

注: 这个配置只用于当该组件作为TabPanel的一个子项目时使用。

一个String类型的innerHTML(支持html标签)，当鼠标放在该选项上的时，显示一个tooltip。为了tips能够被渲染，Ext.QuickTips.init()必须被提前调用。
BoxComponent
tpl : Mixed
一个 Ext.Template , Ext.XTemplate 或者一个用来形成一个Ext.XTemplate的字符串数组...
一个 Ext.Template , Ext.XTemplate 或者一个用来形成一个Ext.XTemplate的字符串数组。 与 data 和 tplWriteMode 配置项协同使用。
Component
tplWriteMode : String
刷新组件的内容区域时使用的Ext.(X)Template方式。 默认为'overwrite' (参见 Ext.XTemplate.overwrite )。
刷新组件的内容区域时使用的Ext.(X)Template方式。 默认为'overwrite' (参见 Ext.XTemplate.overwrite )。
Component
width : Number
组件的宽度(默认值为 auto)。注:如果想使用百分比的方式...
组件的宽度(默认值为 auto)。注:如果想使用百分比的方式来设置值，请查看 Ext.Component.anchor。
BoxComponent
x : Number
如果被包含在一个指定位置的容器中，这个值表示x(left)坐标值。
BoxComponent
xtype : String
需要创建配置的xtype。 当传递一个配置对象给构造函数时...
需要创建配置的xtype。 当传递一个配置对象给构造函数时，此配置选项不会被使用。 只有在使用懒初始化的时候此配置项才会被使用，此时容器的子项目不是 通过一个完整的实例组件，而是通过一个Component配置指定的。 在渲染时，将会查找xtype以决定创建何种类型的子组件。

预定义的xtype列表如下： here。

如果你继承Component创建你自己的组件，你需要使用Ext.ComponentMgr.registerType 对它们进行注册，以便利用懒初始化和渲染机制。
Component
y : Number
如果被包含在一个指定位置的容器中，这个值表示y(top)坐标值。
BoxComponent

公共属性

Property Defined By
disabled : Boolean
当前组件处于无效状态时为true。 Read-only.
Component
el : Ext.Element
封装了当前组件的Ext.Element。 Read-only。通常情况下，这将是一个<DIV>元素，它由此类的...

封装了当前组件的Ext.Element。 Read-only。

通常情况下，这将是一个<DIV>元素，它由此类的 onRender方法创建，但是它可以通过使用 autoEl 配置项进行覆盖。

注意: 直到组件渲染完成此元素都将处于无效状态。

如需向当前组件的 DOM事件(而不是当前组件自己的Observable事件)添加监听器， 更多建议，参见 listeners 配置项，或者直接使用一个render监听器:

new Ext.Panel({
    title: 'The Clickable Panel',
    listeners: {
        render: function(p) {
            // Append the Panel to the click handler's argument list.
            p.getEl().on('click', handlePanelClick.createDelegate(null, [p], true));
        },
        single: true  // Remove the listener after first invocation
    }
});

另请参见 getEl

Component
hidden : Boolean
如果当前组件处于隐藏状态，此值为true。Read-only。
Component
initialConfig : Object
当前组件的初始化配置描述。 Read-only。
Component
ownerCt : Ext.Container
组件所属的Container (默认为undefined，当前组件被添加到一个容器中时此值被自动设置)...
组件所属的Container (默认为undefined，当前组件被添加到一个容器中时此值被自动设置)。 Read-only。

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

Component
refOwner : Ext.Container
如果当前组件是一个容器的孩子，并且是通过一个 ref 配置项被注册的，则此值为 ref 引用被插入到的祖先容器。
如果当前组件是一个容器的孩子，并且是通过一个 ref 配置项被注册的，则此值为 ref 引用被插入到的祖先容器。
Component
rendered : Boolean
如果当前组件已经被渲染了，此值为true。Read-only.
Component

公共方法

Method Defined By
Spacer ( Object config )
参数:
  • config : Object
返回值:
  • void
Spacer
addClass ( string cls ) : Ext.Component
为组件底层的元素添加CSS样式。
为组件底层的元素添加CSS样式。
参数:
  • cls : string
    需要添加的CSS样式的class名称
返回值:
  • Ext.Component
    this
Component
addEvents( Object|String o, string Optional. ) : void
添加指定的事件到事件列表上，事件会被该Observable触发。
添加指定的事件到事件列表上，事件会被该Observable触发。
参数:
  • o : Object|String
    以事件名作为属性true作为值的对象 或者当多个事件名被分开的传递时则为第一个事件名。
  • Optional. : string
    事件名被分开的传递时则为事件名。 用法:
    this.addEvents('storeloaded', 'storecleared');
返回值:
  • void
Observable
addListener( String eventName, Function handler, [Object scope], [Object options] ) : void
给对象添加事件处理器。
给对象添加事件处理器。
参数:
  • eventName : String
    监听的事件名。
  • handler : Function
    事件调用的方法
  • scope : Object
    （可选）处理方法执行的作用域 (this的引用 reference)。 如果被忽略。默认为触发事件的对象。
  • options : Object
    （可选）包含处理器配置和属性的对象。 可能包含以下的属性:
    • scope : Object
      处理方法执行的作用域(this的引用) 。 如果被忽略。默认为触发事件的对象。
    • delay : Number
      在触发事件后延迟调用处理器的毫秒数。
    • single : Boolean
      如果为True则添加一个处理器来处理下一次的事件触发（仅一次），然后移除自己。
    • buffer : Number
      使得处理器延迟指定毫秒数后预定的运行在 一个Ext.util.DelayedTask中 。 如果事件在时间内再一次被触发，原始的处理器不会被调用，但是新的处理器会预定的在他的位置上。
    • target : Observable
      如果事件在目标的Observable上触发则仅仅调用处理器， 否则 事件会从子类的Observable上冒泡

    组合选项
    使用这些选项参数,可能会组合出不同类型的监听器：

    一个延迟的，一次性的监听器。

    myDataView.on('click', this.onClick, this, {
single: true,
delay: 100
});

    一次调用附加多个处理器
    该方法同样支持传递一个包含指定的多个处理器的属性的配置对象参数。

    myGridPanel.on({
'click' : {
    fn: this.onClick,
    scope: this,
    delay: 100
},
'mouseover' : {
    fn: this.onMouseOver,
    scope: this
},
'mouseout' : {
    fn: this.onMouseOut,
    scope: this
}
});

    或者一个简写的语法：

    myGridPanel.on({
'click' : this.onClick,
'mouseover' : this.onMouseOver,
'mouseout' : this.onMouseOut,
 scope: this
});
返回值:
  • void
Observable
applyToMarkup ( String/HTMLElement el ) : void
将此组件添加到已存在的有效的HTML标签中。 使用该方法时，无需再调用render()方法。
将此组件添加到已存在的有效的HTML标签中。 使用该方法时，无需再调用render()方法。
参数:
  • el : String/HTMLElement
返回值:
  • void
Component
cloneConfig ( Object overrides ) : Ext.Component
默认使用原先传递给当前实例的配置值克隆当前组件。
默认使用原先传递给当前实例的配置值克隆当前组件。
参数:
  • overrides : Object
    一个新的配置项，包含需要覆盖到克隆版本的所有属性。 可以传递一个id参数给此对象，否则将自动生成一个新的id以避免发生重复。
返回值:
  • Ext.Component
    当前组件的克隆副本
Component
destroy () : void
通过如下方法销毁对象：删除所有的事件监听器、将组件的元素从DOM树中删除...
通过如下方法销毁对象：删除所有的事件监听器、将组件的元素从DOM树中删除（如果可以）、 将组件从它的 Ext.Container（如果可用）中删除、 并且将它从Ext.ComponentMgr中 注销。 销毁操作一般由框架自动完成，一般情况下不需要直接调用该方法。
参数:
  • 无。
返回值:
  • void
Component
disable () : Ext.Component
将组件置为无效状态，并出发'disable'事件。
将组件置为无效状态，并出发'disable'事件。
参数:
  • 无。
返回值:
  • Ext.Component
    this
Component
enable () : Ext.Component
将组件置为有效状态并触发'enable'事件。
将组件置为有效状态并触发'enable'事件。
参数:
  • 无。
返回值:
  • Ext.Component
    this
Component
enableBubble( String/Array events ) :void
是否现在使得事件会被该Observable触发并调用 this.getBubbleTarget()方法在拥有者的继承树...

是否现在使得事件会被该Observable触发并调用 this.getBubbleTarget()方法在拥有者的继承树中冒泡。Observable的基础类中没有该方法的实现。

该方法一般被Ext.Components用来冒泡事件到拥有者的容器。参看Ext.Component.getBubbleTarget默认的实现 在Ext.Component中返回组件的直接拥有者。但是如果需要的是一个已知的目标，该方法可以被重写来更快的访问需求的目标。

例子:

Ext.override(Ext.form.Field, {
    // 添加方法到Field的initComponent上改变事件为冒泡
    initComponent : Ext.form.Field.prototype.initComponent.createSequence(function() {
        this.enableBubble('change');
    }),

    // 我们知道我们想让Field的事件冒泡到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() {
            // 如果样式被修改标题会变红。
            myForm.header.setStyle('color', 'red');
        }
    }
});
参数:
  • events : String/Array
    冒泡的事件名，或事件名数组
返回值:
  • void
Observable
findParentBy ( Function fn ) : Ext.Container
通过自定义的函数查找当前组件上层任何层次上的容器...
通过自定义的函数查找当前组件上层任何层次上的容器。 如果传递的函数返回true，容器对象将被返回。
参数:
  • fn : Function
    自定义的函数，使用如下参数调用(container,this component)。
返回值:
  • Ext.Container
    自定义函数返回true的第一个容器
Component
findParentByType ( String/Class xtype ) : Ext.Container
通过xtype或者class查找当前组件上层任何层次上的容器
通过xtype或者class查找当前组件上层任何层次上的容器
参数:
  • xtype : String/Class
    组件的xtype字符串，或者直接是组件的class
返回值:
  • Ext.Container
    符合指定xtype或者class的第一个容器
Component
fireEvent( String eventName, Object... args ) : Boolean
用传入的参数触发指定的事件 (减去事件名)。 一个事件可以被设置为冒泡 Obse...

用传入的参数触发指定的事件 (减去事件名)。

一个事件可以被设置为冒泡到Observable父类继承树(参看 Ext.Component.getBubbleTarget) 调用enableBubble实现。

参数:
  • eventName : String
    触发的事件名。
  • args : Object...
    传递给处理器的可变长度参数。
返回值:
  • Boolean
    如果有任何的处理器返回false则返回false，否则返回true。
Observable
focus ( [ Boolean selectText ], [ Boolean/Number delay ] ) : Ext.Component
尝试将当前组件设为焦点。
尝试将当前组件设为焦点。
参数:
  • selectText : Boolean
    (可选) 如果可用，同时选中组件内部的文本
  • delay : Boolean/Number
    (可选)将当前组件设置为焦点的延迟时间(设置为true等于0毫秒)
返回值:
  • Ext.Component
    this
Component
getBox ( [ Boolean local ] ) : Object
获取组件底层元素当前盒子模型的尺寸。（译者注：盒子模型是CSS术语，详细解释请自行搜索。）
获取组件底层元素当前盒子模型的尺寸。（译者注：盒子模型是CSS术语，详细解释请自行搜索。）
参数:
  • local : Boolean
    (可选)值为true时，组件的left值和top值将代替页面的XY被返回。(默认值为false)
返回值:
  • Object
    返回值的格式{x, y, width, height}
BoxComponent
getBubbleTarget () : Ext.Container
为Observable的fireEvent方法提供链接，它沿着继承结构进行冒泡操作。
为Observable的fireEvent方法提供链接，它沿着继承结构进行冒泡操作。
参数:
  • 无。
返回值:
  • Ext.Container
    拥有当前组件的容器。
Component
getEl () : Ext.Element
返回 Ext.Element ，它包装了当前组件。...

返回 Ext.Element ，它包装了当前组件。

通常情况下，这将是一个<DIV>元素，它是由该类的onRender方法创建的， 但是可以使用autoEl配置项 覆盖它。

注意: 此元素将会一直处于无效状态直到当前组件渲染完成。

如需向当前组件的 DOM事件(而不是当前组件自己的Observable事件)添加监听器， 更多建议，参见 listeners 配置项，或者直接使用一个render监听器:

new Ext.Panel({
    title: 'The Clickable Panel',
    listeners: {
        render: function(p) {
            // Append the Panel to the click handler's argument list.
            p.getEl().on('click', handlePanelClick.createDelegate(null, [p], true));
        },
        single: true  // Remove the listener after first invocation
    }
});
参数:
  • 无。
返回值:
  • Ext.Element
    包装当前组件的元素。
Component
getHeight () : Number
获取该组件的当前高度值。
获取该组件的当前高度值。
参数:
  • 无。
返回值:
  • Number
BoxComponent
getId () : String
返回当前组件的id，如果没有定义id，则自动生成并返回一个id:'ext-comp-'...
返回当前组件的 id 如果没有定义 id 则自动生成并返回一个 id

'ext-comp-' + (++Ext.Component.AUTO_ID)
参数:
  • 无。
返回值:
  • String
    id
Component
getItemId () : String
返回当前组件的 itemId 。 如果没有通过配置参数指定 itemId 那么，将会使用...
返回当前组件的 itemId 。 如果没有通过配置参数指定 itemId 那么，将会使用 getId 返回 id 。
参数:
  • 无。
返回值:
  • String
Component
getOuterSize () : Object
获取当前组件所在元素的尺寸大小，包括边缘的空白处。
获取当前组件所在元素的尺寸大小，包括边缘的空白处。
参数:
  • 无。
返回值:
  • Object
    一个包含元素大小的对象 {width: (element width + left/right margins), height: (element height + top/bottom margins)}
BoxComponent
getPosition ( [ Boolean local ] ) : Array
获取组件底层元素当前的XY位置。
获取组件底层元素当前的XY位置。
参数:
  • local : Boolean
    (可选)如果为true，将返回元素的left和top值，而不是相对于页面内的 XY。(默认值为 false)
返回值:
  • Array
    元素的XY位置值(例如：[100, 200])
BoxComponent
getResizeEl () : Ext.Element
返回该组件的最外层用来定义这些组件整体大小的Element...

返回该组件的最外层用来定义这些组件整体大小的Element对象。

通常用 getEl 方法将会返回相同的Element对象，但在有些情况下，组件可能有一些更多的封装了它的主要动态Element对象的Element对象。

例如ComboBox。它是封装在一个包含<input>元素的包装元素里(这将返回其 getEl方法和触发按钮的元素)。返回的元素为resizeEl。

参数:
  • 无。
返回值:
  • Ext.Element
    The Element which is to be resized by size managing layouts.
BoxComponent
getSize () : Object
获取组件底层元素当前的大小。
获取组件底层元素当前的大小。
参数:
  • 无。
返回值:
  • Object
    一个包含元素大小的对象{width: (element width), height: (element height)}
BoxComponent
getWidth () : Number
获取该组件的当前宽度值。
获取该组件的当前宽度值。
参数:
  • 无。
返回值:
  • Number
BoxComponent
getXType () : String
获取当前组件的xtype，它是用 Ext.ComponentMgr 注册的。 所有可用的xtype列表，参见...
获取当前组件的xtype，它是用 Ext.ComponentMgr 注册的。 所有可用的xtype列表，参见 Ext.Component 类头部。示例用法:

var t = new Ext.form.TextField();
alert(t.getXType());  // alerts 'textfield'
参数:
  • 无。
返回值:
  • String
    The xtype
Component
getXTypes () : String
返回此组件的xtype继承树，用字符'-'分隔。 所有可用的xtype值...

返回此组件的xtype继承树，用字符'-'分隔。 所有可用的xtype值，请参见Ext.Component 类的头部。

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

示例用法:

var t = new Ext.form.TextField();
alert(t.getXTypes());  // alerts 'component/box/field/textfield'
参数:
  • 无。
返回值:
  • String
    xtype层次字符串
Component
hasListener( String eventName ) : Boolean
检测对象是否包含指定事件的任何监听器
检测对象是否包含指定事件的任何监听器
参数:
  • eventName : String
    检测的事件名
返回值:
  • Boolean
    如果事件被监听则为true，否则为false
Observable
hide () : Ext.Component
隐藏当前组件。 监听 beforehide' 事件并且返回false 可以取消隐藏组件的操作。 在隐藏组件之后触发...
隐藏当前组件。 监听 beforehide' 事件并且返回false 可以取消隐藏组件的操作。 在隐藏组件之后触发 ' hide' 事件。 如果组件被配置成 hidden 那么此方法在内部被调用。
参数:
  • 无。
返回值:
  • Ext.Component
    this
Component
isVisible () : Boolean
如果当前组件可见，返回true。
如果当前组件可见，返回true。
参数:
  • 无。
返回值:
  • Boolean
    如果当前组件可见，返回true，其它返回false。
Component
isXType ( String xtype , [ Boolean shallow ] ) : Boolean
Tests whether or not this Component is of a specific xtype. This can test whether this Component is descended from th...

测试此组件是否是指定的xtype。此方法既可以测试是否是指定的xtype的某个子类， 或者它是否直接是指定的xtype类(shallow=true)。

如果使用你自己的子类，必须知道组件必须注册它的xtype值。

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

示例用法:

var t = new Ext.form.TextField();
var isText = t.isXType('textfield');        // true
var isBoxSubclass = t.isXType('box');       // true, descended from BoxComponent
var isBoxInstance = t.isXType('box', true); // false, not a direct BoxComponent instance
参数:
  • xtype : String
    需要为当前组件进行检测的xtype
  • shallow : Boolean
    (可选) 如果为false，检测组件是否是xtype继承树中的某个子类（默认是这种情况）， 如果为true，只检测组件是否是指定的xtype类型。
返回值:
  • Boolean
    如果当前组件是指定xtype的子类，返回true，其它返回flase。
Component
mon ( Observable|Element item , Object|String ename , Function fn , Object scope , Object opt ) : void
向任何Observable对象(或者元素)上添加监听器，监听器将会在组件...

向任何Observable对象(或者元素)上添加监听器，监听器将会在组件销毁时被自动删除。
用法：

myGridPanel.mon(myGridPanel.getSelectionModel(), 'selectionchange', handleSelectionChange, null, {buffer: 50});

or:

myGridPanel.mon(myGridPanel.getSelectionModel(), {
    selectionchange: handleSelectionChange,
    buffer: 50
});
参数:
  • item : Observable|Element
    需要添加listener/listeners的项目。
  • ename : Object|String
    事件名，或者一个包含事件名属性的对象。
  • fn : Function
    (可选) 如果 ename 参数是一个事件名，此参数为处理函数。
  • scope : Object
    (可选)如果 ename 参数是一个事件名称，此参数是作用域 ( this 引用)，监听函数将会在此作用域中被执行。
  • opt : Object
    (可选)如果 ename 参数是一个事件名称， 此参数是 addListener 配置项。
返回值:
  • void
Component
mun ( Observable|Element item , Object|String ename , Function fn , Object scope ) : void
删除通过mon 方法添加的监听器。
删除通过mon 方法添加的监听器。
参数:
  • item : Observable|Element
    需要删除listener/listeners的项目。
  • ename : Object|String
    事件名称，或者一个包含事件名称属性的对象。
  • fn : Function
    (可选)如果 ename 参数是一个事件名称，此参数是一个处理函数。
  • scope : Object
    (可选)如果 ename 参数是一个事件名称，此参数是作用域 ( this 引用)，监听函数将会在此作用域中被执行。
返回值:
  • void
Component
nextSibling () : Ext.Component
返回所属容器中的下一个组件
返回所属容器中的下一个组件
参数:
  • 无。
返回值:
  • Ext.Component
Component
on( String eventName, Function handler, [Object scope], [Object options] ) : void
给对象添加事件处理器 (addListener的简写形式)
给对象添加事件处理器 (addListener的简写形式。)
参数:
  • eventName : String
    监听的事件类型
  • handler : Function
    事件调用的方法
  • scope : Object
    （可选）处理方法执行时的作用域 (this 的引用)。 如果被忽略。默认为触发事件的对象。
  • options : Object
    可选 包含处理器配置的对象。
返回值:
  • void
Observable
previousSibling () : Ext.Component
返回所属容器中的前一个组件
返回所属容器中的前一个组件
参数:
  • 无。
返回值:
  • Ext.Component
Component
purgeListeners() : void
移除对象上所有的监听器
移除对象上所有的监听器
参数:
  • 无。
返回值:
  • void
Observable
relayEvents( Object o, Array events ) : void
从指定的Observable上传递选择的事件就好像被当前对象触发一样。
从指定的Observable上传递选择的事件就好像被当前对象触发一样。
参数:
  • o : Object
    该Observable上的事件被当前对象传递。
  • events : Array
    传递的数组名。
返回值:
  • void
Observable
removeClass ( string cls ) : Ext.Component
从组件底层的元素上删除一个CSS类。
从组件底层的元素上删除一个CSS类。
参数:
  • cls : string
    需要移除的CSS类名
返回值:
  • Ext.Component
    this
Component
removeListener( String eventName, Function handler, [Object scope] ) : void
删除一个事件处理器。
删除一个事件处理器。
参数:
  • eventName : String
    处理器关联的事件类型。
  • handler : Function
    移除的处理器。 这应该是传递到addListener里的方法的引用。
  • scope : Object
    （可选）处理器指定的初始作用域。
返回值:
  • void
Observable
render ( [ Element/HTMLElement/String container ], [ String/Number position ] ) : void
在传递进来的HTML元素中渲染当前组件。...

在传递进来的HTML元素中渲染当前组件。

如果你正在使用一个Container 对象放置当前组件，那么请不要使用render方法。

当容器第一次被渲染时，它的子组件将会被容器的 layout 管理器渲染。

某些布局管理器允许动态添加子组件。它们包括 Ext.layout.CardLayout, Ext.layout.AnchorLayout, Ext.layout.FormLayout, Ext.layout.TableLayout。

当一个新的子组件被添加时，如果容器已经被渲染了， 你可能需要调用容器的 doLayout 方法来刷新视图，它将导致所有没有被渲染的子组件进行渲染操作。 此操作是必须的，这样你可以添加多个子组件而只刷新一次layout。

当创建复杂的UI时，非常重要的一点是，请记住调整子项目的尺寸和位置是容器的 layout 管理器的职责。 如果你希望子项目的尺寸对用户交互作出反应， 你必须为容器配置一个布局管理器，它将创建和管理你心里想要的那种布局。

忽略容器的layout 配置意味着将会使用一个基本的布局管理器，它除了按次序把子组件 渲染到容器中之外什么事情都不做。 这种情况下，任何尺寸和位置的调整操作都不会发生。

参数:
  • container : Element/HTMLElement/String
    (可选) 需要在其中渲染当前组件的元素。 如果它是从一个已存在的标签中创建的，此参数应该被忽略。
  • position : String/Number
    (可选) 容器中的一个元素ID或者一个DOM节点索引， 当前组件将会被插入到它前面 (默认append到容器的尾部)
返回值:
  • void
Component
resumeEvents() : void
重新开始触发事件。(参见suspendEvents) 如果事件以queueSuspended参数被挂起，则在事件被挂起时 ...
重新开始触发事件。(参见 suspendEvents) 如果事件以queueSuspended 参数被挂起，则在事件被挂起时触发的事件会被传递到所有的监听器上
参数:
  • 无。
返回值:
  • void
Observable
setAutoScroll ( Boolean scroll ) : Ext.BoxComponent
设置该组件内容溢出时是否自动显示滚动条。
设置该组件内容溢出时是否自动显示滚动条。
参数:
  • scroll : Boolean
    值为true的话组件自动显示滚动条。
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setDisabled ( Boolean disabled ) : Ext.Component
工具函数，使用布尔值设置有效/无效(disabled/enabled )。
工具函数，使用布尔值设置有效/无效(disabled/enabled )。
参数:
  • disabled : Boolean
返回值:
  • Ext.Component
    this
Component
setHeight ( Mixed height ) : Ext.BoxComponent
设置此组件的高度。该方法将触发resize事件。
设置此组件的高度。该方法将触发resize事件。
参数:
  • height : Mixed
    The new height to set.
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setPagePosition ( Number x , Number y ) : Ext.BoxComponent
设置组件在页面中的XY位置。 如果需要设置left和top值 ，请使用...
设置组件在页面中的XY位置。 如果需要设置left和top值 ，请使用setPosition方法。 该方法触发move事件。
参数:
  • x : Number
    The new x position
  • y : Number
    The new y position
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setPosition ( Number left , Number top ) : Ext.BoxComponent
设置组件的left和top值。设置组件的页面XY值，请使用setPagePosition方法。该方法触发...
设置组件的left和top值。设置组件的页面XY值，请使用setPagePosition方法。该方法触发move事件。
参数:
  • left : Number
    The new left
  • top : Number
    The new top
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setSize ( Mixed width , Mixed height ) : Ext.BoxComponent
设置BoxComponent的宽度和高度。 此方法触发resize事件...
设置BoxComponent的宽度和高度。 此方法触发resize事件。此方法可以接收单独的width或者height值作为参数， 或者你可以传递像这样的一个size对象： {width:10, height:20} 。
参数:
  • width : Mixed
    设置的新的width值。这可以是：
    • 一个Number类型指定Element新的宽度 Ext.Element.defaultUnit(默认为像素 :'px')。
    • 一个String类型用于设置width的CSS样式。
    • 一个size对象格式为 {width: widthValue, height: heightValue} 。
    • 值为 undefined 时，保留原来的width不变。
  • height : Mixed
    设置的新的height值(如果第一个参数传递了一个size对象，此参数没有必要传递)。这可以是：
    • 一个Number类型指定Element新的高度 Ext.Element.defaultUnit(默认为像素 :'px')。
    • 一个String类型用于设置height的CSS样式。也有可能不会被使用到。
    • 值为 undefined 时，保留原来的height不变。
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setVisible ( Boolean visible ) : Ext.Component
工具方法，通过使用布尔值隐藏或者显示当前组件。
工具方法，通过使用布尔值隐藏或者显示当前组件。
参数:
  • visible : Boolean
    true时显示，false时隐藏
返回值:
  • Ext.Component
    this
Component
setWidth ( Mixed width ) : Ext.BoxComponent
设置组件的宽度。 此方法触发resize事件。
设置组件的宽度。 此方法触发resize事件。
参数:
  • width : Mixed
    The new width to set.
返回值:
  • Ext.BoxComponent
    this
BoxComponent
show () : Ext.Component
显示当前组件。监听' beforeshow' 事件，返回 false 取消显示组件...
显示当前组件。监听' beforeshow' 事件，返回 false 取消显示组件。在显示组件之后触发' show' 事件。
参数:
  • 无。
返回值:
  • Ext.Component
    this
Component
suspendEvents( Boolean queueSuspended ) : void
暂停触发所有的事件。 (参看resumeEvents)
暂停触发所有的事件。（参看 resumeEvents)
参数:
  • queueSuspended : Boolean
    如果传递为true则排列好暂停的事件使得在调用 resumeEvents 后再触发它们，而不是抛弃所有暂停的事件。
返回值:
  • void
Observable
syncSize () : Ext.BoxComponent
强制组件的大小按照此组件底层元素当前的高度和宽度计算。
强制组件的大小按照此组件底层元素当前的高度和宽度计算。
参数:
  • 无。
返回值:
  • Ext.BoxComponent
    this
BoxComponent
un( String eventName, Function handler, [Object scope] ) : void
删除一个事件处理器(removeListener方法的简写形式)
删除一个事件处理器(removeListener方法的简写形式。)
参数:
  • eventName : String
    处理器关联的事件类型
  • handler : Function
    被删除的处理器 这应该是传入 addListener 中的方法的引用。
  • scope : Object
    （可选）为处理器指定的初始作用域。
返回值:
  • void
Observable
update ( Mixed htmlOrData , [ Boolean loadScripts ], [ Function callback ] ) : void
刷新组件的内部区域。
刷新组件的内部区域。
参数:
  • htmlOrData : Mixed
    如果已经通过tpl为当前组件配置了一个模板，那么 将会使用此参数来装配模板。 如果没有为当前组件配置模板，组件的内容区域将会通过Ext.Element 进行刷新。
  • loadScripts : Boolean
    (可选)只用在使用html配置时此参数才合法。默认为false。
  • callback : Function
    (可选)只用在使用html配置时此参数才合法。 当脚本加载完成时回调函数才被执行。
返回值:
  • void
Component
updateBox ( Object box ) : Ext.BoxComponent
设置此组件底层元素的盒子模型尺寸。(译者注：盒子模型是CSS术语，详细资料请自行搜索。)
设置此组件底层元素的盒子模型尺寸。(译者注：盒子模型是CSS术语，详细资料请自行搜索。)
参数:
  • box : Object
    一个格式为{x, y, width, height}的对象
返回值:
  • Ext.BoxComponent
    this
BoxComponent

公共事件

Event Defined By
added : ( Ext.Component this , Ext.Container ownerCt , number index )
当一个组件被添加到一个Ext.Container时触发
当一个组件被添加到一个Ext.Container时触发
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • ownerCt : Ext.Container
    用于组件的容器
  • index : number
    添加组件的位置
Component
afterrender : ( Ext.Component this )
在组件渲染完成之后触发...

在组件渲染完成之后触发。

afterrender事件在当前组件被rendered 结束之后、在为组件定义的所有afterRender方法执行之后 触发，并且，如果有stateful， 也在状态被保存之后才触发。

监听器将会以如下参数格式被调用:
  • this : Ext.Component
Component
beforedestroy : ( Ext.Component this )
在组件 destroyed 之前触发。 在事件监听器中返回false以停止 destroy 操作。
在组件 destroyed 之前触发。 在事件监听器中返回false以停止 destroy 操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforehide : ( Ext.Component this )
在调用hide方法隐藏组件之前触发。 在事件监听器中返回false可以停止隐藏操作。
在调用hide方法隐藏组件之前触发。 在事件监听器中返回false可以停止隐藏操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforerender : ( Ext.Component this )
在组件被rendered 之前触发。 在事件监听器中返回false可以停止render 操作。
在组件被rendered 之前触发。 在事件监听器中返回false可以停止render 操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforeshow : ( Ext.Component this )
在调用show()方法现实组件之前触发。 事件处理函数返回false可以停止show。
在调用show 方法现实组件之前触发。 事件处理函数返回false可以停止show。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforestaterestore : ( Ext.Component this , Object state )
在组件状态恢复之前触发。返回false停止恢复状态操作。
在组件状态恢复之前触发。返回false停止恢复状态操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    StateProvider返回的状态哈希值。 如果没有禁止此事件，那么状态对象会被传递给applyState。 默认情况下，这样简单地把属性值拷贝到当前组件中。 可以覆盖此方法以提供自定的状态恢复操作。
Component
beforestatesave : ( Ext.Component this , Object state )
在组件状态被保存到配置的状态提供者之前触发。 返回false可以停止保存。
在组件状态被保存到配置的状态提供者之前触发。 返回false可以停止保存。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    状态值哈希。 这由在组件上调用getState() 方法决定。 此方法必须由开发者提供，返回是否需要对状态进行描述，默认情况下， Ext.Component有一个空实现。
Component
destroy : ( Ext.Component this )
在组件被销毁之后触发。
在组件被destroyed之后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
disable : ( Ext.Component this )
在组件被设置为无效状态后触发。
在组件被设置为无效状态后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
enable : ( Ext.Component this )
当组件被设置为有效(enabled)之后触发。
当组件被设置为有效(enabled)之后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
hide : ( Ext.Component this )
在组件被隐藏之后触发。 当调用hide 方法隐藏组件之后触发。
在组件被隐藏之后触发。 当调用hide 方法隐藏组件之后触发。
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
move : ( Ext.Component this , Number x , Number y )
在组件移动之后触发。
在组件移动之后触发。
监听器将会用如下的参数格式来调用:
  • this : Ext.Component
  • x : Number
    The new x position
  • y : Number
    The new y position
BoxComponent
removed : ( Ext.Component this , Ext.Container ownerCt )
当一个组件被从Ext.Container容器中删除时触发
当一个组件被从Ext.Container容器中删除时触发
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • ownerCt : Ext.Container
    持有组件的容器
Component
render : ( Ext.Component this )
在组件被渲染之后触发。
在组件被 rendered(渲染) 之后触发。
监听器将以如下的参数格式被调用:
  • this : Ext.Component
Component
resize : ( Ext.Component this , Number adjWidth , Number adjHeight , Number rawWidth , Number rawHeight )
在组件被调整大小之后触发。
在组件被调整大小之后触发。
监听器将以如下的参数格式被调用:
  • this : Ext.Component
  • adjWidth : Number
    这是width调整后的值
  • adjHeight : Number
    这是height调整后的值
  • rawWidth : Number
    这是width原来的值
  • rawHeight : Number
    这是height原来的值
BoxComponent
show : ( Ext.Component this )
在调用show 方法显示组件之后触发。
在调用show 方法显示组件之后触发。
监听器将会用如下的参数格式被调用:
  • this : Ext.Component
Component
staterestore : ( Ext.Component this , Object state )
组件状态被存储之后触发。
组件状态被存储之后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    StateProvider返回的状态哈希值。 如果没有禁止此事件，那么状态对象会被传递给applyState。 默认情况下，这样简单地把属性值拷贝到当前组件中。 可以覆盖此方法以提供自定的状态恢复操作。
Component
statesave : ( Ext.Component this , Object state )
在组件状态被保存到所配置的状态提供者之后触发。
在组件状态被保存到所配置的状态提供者之后触发。
监听器将会用如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    状态值hash。 这是由在足见上调用getState() 方法决定的。 开发者必须提供此方法以返回是否需要恢复状态，默认情况下， Ext.Component有一个空实现。
Component


SplitBar.BasicLayoutAdapter
    SplitBar.AbsoluteLayoutAdapter

Class Ext.SplitBar.AbsoluteLayoutAdapter

包: | Ext
定义类的文件: | SplitBar.js
类: | SplitBar.AbsoluteLayoutAdapter
继承自: | SplitBar.BasicLayoutAdapter
适配器，将分隔元素移动对齐到被调整尺寸的元素。 与绝对定位的SplitBar配合使用。

公共属性

Property |  | Defined By
 | BOTTOM : Number 位置常量-调整尺寸的元素被放置到分隔元素之下 | SplitBar.AbsoluteLayoutAdapter
 | HORIZONTAL : Number 方位常量-创建一个水平SplitBar | SplitBar.AbsoluteLayoutAdapter
 | LEFT : Number 位置常量-调整尺寸的元素被放置到分隔元素左侧 | SplitBar.AbsoluteLayoutAdapter
 | RIGHT : Number 位置常量-调整尺寸的元素被放置到分隔元素右侧 | SplitBar.AbsoluteLayoutAdapter
 | TOP : Number 位置常量-调整尺寸的元素被放置到分隔元素之上 | SplitBar.AbsoluteLayoutAdapter
 | VERTICAL : Number 方位常量-创建一个垂直SplitBar | SplitBar.AbsoluteLayoutAdapter

公共方法

Method Defined By
getElementSize ( Ext.SplitBar s ) : void
在拖拽操作之前调用，以便获得被改变大小元素的当前大小。
在拖拽操作之前调用，以便获得被改变大小元素的当前大小。
参数:
  • s : Ext.SplitBar
    要应用此适配器的 SplitBar对象
返回值:
  • void
SplitBar.BasicLayoutAdapter
setElementSize ( Ext.SplitBar s , Number newSize , Function onComplete ) : void
在拖拽操作之后调用，以便设置被调整元素的大小。
Called after drag operations to set the size of the resizing element.
参数:
  • s : Ext.SplitBar
    要应用此适配器的 SplitBar对象
  • newSize : Number
    要设置的新宽度
  • onComplete : Function
    当缩放完成时调用的函数
返回值:
  • void
SplitBar.BasicLayoutAdapter

公共事件

该类没有公共事件。


Class Ext.SplitBar.BasicLayoutAdapter

包: | Ext
定义类的文件: | SplitBar.js
类: | SplitBar.BasicLayoutAdapter
子类: | SplitBar.AbsoluteLayoutAdapter
继承自: | Object
默认的适配器。 它负责呈现没有定位的分割器和大小发生改变的元素， 并且仅仅get/set元素的宽度。 一般用于基于表格的布局。

公共属性

该类没有公共属性。

公共方法

Method Defined By
getElementSize ( Ext.SplitBar s ) : void
在拖拽操作之前调用，以便获得被改变大小元素的当前大小。
在拖拽操作之前调用，以便获得被改变大小元素的当前大小。
参数:
  • s : Ext.SplitBar
    要应用此适配器的 SplitBar对象
返回值:
  • void
SplitBar.BasicLayoutAdapter
setElementSize ( Ext.SplitBar s , Number newSize , Function onComplete ) : void
在拖拽操作之后调用，以便设置被调整元素的大小。
Called after drag operations to set the size of the resizing element.
参数:
  • s : Ext.SplitBar
    要应用此适配器的 SplitBar对象
  • newSize : Number
    要设置的新宽度
  • onComplete : Function
    当缩放完成时调用的函数
返回值:
  • void
SplitBar.BasicLayoutAdapter

公共事件

该类没有公共事件。


Observable
    SplitBar

Class Ext.SplitBar

包: | Ext
定义类的文件: | SplitBar.js
类: | SplitBar
继承自: | Observable
在两个元素之间创建分隔工具条(被拖拽的元素和被设置大小的元素)。

用法:
var split = new Ext.SplitBar("elementToDrag", "elementToSize",
            Ext.SplitBar.HORIZONTAL, Ext.SplitBar.LEFT);
            split.setAdapter(new Ext.SplitBar.AbsoluteLayoutAdapter("container"));
            split.minSize = 100;
            split.maxSize = 600;
            split.animate = true;
            split.on('moved', splitterMoved);

配置项

Config Options Defined By
listeners : Object
一个包含一个或多个事件处理器的配置对象，会在初始化的时候被添加到目标对象上...

一个包含一个或多个事件处理器的配置对象，会在初始化的时候被添加到目标对象上。 该配置对象应该是一个有效的监听器配置对象就像 addListener例子中指定的一样可一次附加多个处理器。

ExtJs Components上的DOM事件

一些 ExtJs Component 类导出时会选择一些DOM事件(例如 "click", "mouseover" 等等), 这通常只是在有额外的值可以被添加时发生。例如DataView类的 click事件会传递被点击的节点。也可以直接在Component的HTMLElementevent上访问DOM事件，但必需在Component被渲染后监听器才能添加到Element 上。可以按照以下步骤添加插件:

// 插件会用一个监听器配置对象进行配置。
//该组件会被添加到所有处理方法的参数列表上。
Ext.DomObserver = Ext.extend(Object, {
    constructor: function(config) {
        this.listeners = config.listeners ? config.listeners : config;
    },

    // 组件将自己传递进了插件的初始化方法里
    init: function(c) {
        var p, l = this.listeners;
        for (p in l) {
            if (Ext.isFunction(l[p])) {
                l[p] = this.createHandler(l[p], c);
            } else {
                l[p].fn = this.createHandler(l[p].fn, c);
            }
        }

        // 渲染后立即添加监听器到元素上
        c.render = c.render.createSequence(function() {
            var e = c.getEl();
            if (e) {
                e.on(l);
            }
        });
    },

    createHandler: function(fn, c) {
        return function(e) {
            fn.call(this, e, c);
        };
    }
});

var combo = new Ext.form.ComboBox({

    // 元素被点击后折叠
    plugins: [ new Ext.DomObserver({
        click: function(evt, comp) {
            comp.collapse();
        }
    })],
    store: myStore,
    typeAhead: true,
    mode: 'local',
    triggerAction: 'all'
});

Observable

公共属性

Property |  | Defined By
 | animate : Boolean 在转换成新的大小时是否使用动画效果 | SplitBar
 | maxSize : Number 被调整大小元素的最小尺寸。(默认为2000) | SplitBar
 | minSize : Number 被调整大小元素的最小尺寸(默认为0) | SplitBar
 | tickSize : Number 增量, 以像素为单位移动SplitBar. 为undefined时,SplitBar平滑移动。 | SplitBar
 | useShim : Boolean 当拖拽时是否创建一个透明的衬垫覆盖住页面， 允许在不同的iframe之间拖拽。 | SplitBar

公共方法

Method Defined By
SplitBar ( Mixed dragElement , Mixed resizingElement , [ Number orientation ], [ Number placement ] )
创建一个新的SplitBar
创建一个新的SplitBar
参数:
  • dragElement : Mixed
    被拖拽作为SplitBar的元素.
  • resizingElement : Mixed
    基于被拖拽的SplitBar元素调整大小的元素
  • orientation : Number
    可选 Either Ext.SplitBar.HORIZONTAL 或者 Ext.SplitBar.VERTICAL. (Defaults to HORIZONTAL)
  • placement : Number
    可选水平的Ext.SplitBar.LEFT和Ext.SplitBar.RIGHT 或者垂直的Ext.SplitBar.TOP和Ext.SplitBar.BOTTOM (默认情况下，由SplitBar得初始位置)。
返回值:
  • void
SplitBar
addEvents( Object|String o, string Optional. ) : void
添加指定的事件到事件列表上，事件会被该Observable触发。
添加指定的事件到事件列表上，事件会被该Observable触发。
参数:
  • o : Object|String
    以事件名作为属性true作为值的对象 或者当多个事件名被分开的传递时则为第一个事件名。
  • Optional. : string
    事件名被分开的传递时则为事件名。 用法:
    this.addEvents('storeloaded', 'storecleared');
返回值:
  • void
Observable
addListener( String eventName, Function handler, [Object scope], [Object options] ) : void
给对象添加事件处理器。
给对象添加事件处理器。
参数:
  • eventName : String
    监听的事件名。
  • handler : Function
    事件调用的方法
  • scope : Object
    （可选）处理方法执行的作用域 (this的引用 reference)。 如果被忽略。默认为触发事件的对象。
  • options : Object
    （可选）包含处理器配置和属性的对象。 可能包含以下的属性:
    • scope : Object
      处理方法执行的作用域(this的引用) 。 如果被忽略。默认为触发事件的对象。
    • delay : Number
      在触发事件后延迟调用处理器的毫秒数。
    • single : Boolean
      如果为True则添加一个处理器来处理下一次的事件触发（仅一次），然后移除自己。
    • buffer : Number
      使得处理器延迟指定毫秒数后预定的运行在 一个Ext.util.DelayedTask中 。 如果事件在时间内再一次被触发，原始的处理器不会被调用，但是新的处理器会预定的在他的位置上。
    • target : Observable
      如果事件在目标的Observable上触发则仅仅调用处理器， 否则 事件会从子类的Observable上冒泡

    组合选项
    使用这些选项参数,可能会组合出不同类型的监听器：

    一个延迟的，一次性的监听器。

    myDataView.on('click', this.onClick, this, {
single: true,
delay: 100
});

    一次调用附加多个处理器
    该方法同样支持传递一个包含指定的多个处理器的属性的配置对象参数。

    myGridPanel.on({
'click' : {
    fn: this.onClick,
    scope: this,
    delay: 100
},
'mouseover' : {
    fn: this.onMouseOver,
    scope: this
},
'mouseout' : {
    fn: this.onMouseOut,
    scope: this
}
});

    或者一个简写的语法：

    myGridPanel.on({
'click' : this.onClick,
'mouseover' : this.onMouseOver,
'mouseout' : this.onMouseOut,
 scope: this
});
返回值:
  • void
Observable
destroy ( Boolean removeEl ) : void
销毁splitbar。
销毁splitbar。
参数:
  • removeEl : Boolean
    为true移除元素
返回值:
  • void
SplitBar
enableBubble( String/Array events ) :void
是否现在使得事件会被该Observable触发并调用 this.getBubbleTarget()方法在拥有者的继承树...

是否现在使得事件会被该Observable触发并调用 this.getBubbleTarget()方法在拥有者的继承树中冒泡。Observable的基础类中没有该方法的实现。

该方法一般被Ext.Components用来冒泡事件到拥有者的容器。参看Ext.Component.getBubbleTarget默认的实现 在Ext.Component中返回组件的直接拥有者。但是如果需要的是一个已知的目标，该方法可以被重写来更快的访问需求的目标。

例子:

Ext.override(Ext.form.Field, {
    // 添加方法到Field的initComponent上改变事件为冒泡
    initComponent : Ext.form.Field.prototype.initComponent.createSequence(function() {
        this.enableBubble('change');
    }),

    // 我们知道我们想让Field的事件冒泡到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() {
            // 如果样式被修改标题会变红。
            myForm.header.setStyle('color', 'red');
        }
    }
});
参数:
  • events : String/Array
    冒泡的事件名，或事件名数组
返回值:
  • void
Observable
fireEvent( String eventName, Object... args ) : Boolean
用传入的参数触发指定的事件 (减去事件名)。 一个事件可以被设置为冒泡 Obse...

用传入的参数触发指定的事件 (减去事件名)。

一个事件可以被设置为冒泡到Observable父类继承树(参看 Ext.Component.getBubbleTarget) 调用enableBubble实现。

参数:
  • eventName : String
    触发的事件名。
  • args : Object...
    传递给处理器的可变长度参数。
返回值:
  • Boolean
    如果有任何的处理器返回false则返回false，否则返回true。
Observable
getAdapter () : The
获取SplitBar使用的适配器
获取SplitBar使用的适配器
参数:
  • 无。
返回值:
  • 适配器对象
SplitBar
getMaximumSize () : Number
获取被调整大小元素的最大尺寸
获取被调整大小元素的最大尺寸
参数:
  • 无。
返回值:
  • Number
    最大尺寸
SplitBar
getMinimumSize () : Number
获取被调整大小的元素的最小尺寸
获取被调整大小的元素的最小尺寸
参数:
  • 无。
返回值:
  • Number
    最小尺寸
SplitBar
hasListener( String eventName ) : Boolean
检测对象是否包含指定事件的任何监听器
检测对象是否包含指定事件的任何监听器
参数:
  • eventName : String
    检测的事件名
返回值:
  • Boolean
    如果事件被监听则为true，否则为false
Observable
on( String eventName, Function handler, [Object scope], [Object options] ) : void
给对象添加事件处理器 (addListener的简写形式)
给对象添加事件处理器 (addListener的简写形式。)
参数:
  • eventName : String
    监听的事件类型
  • handler : Function
    事件调用的方法
  • scope : Object
    （可选）处理方法执行时的作用域 (this 的引用)。 如果被忽略。默认为触发事件的对象。
  • options : Object
    可选 包含处理器配置的对象。
返回值:
  • void
Observable
purgeListeners() : void
移除对象上所有的监听器
移除对象上所有的监听器
参数:
  • 无。
返回值:
  • void
Observable
relayEvents( Object o, Array events ) : void
从指定的Observable上传递选择的事件就好像被当前对象触发一样。
从指定的Observable上传递选择的事件就好像被当前对象触发一样。
参数:
  • o : Object
    该Observable上的事件被当前对象传递。
  • events : Array
    传递的数组名。
返回值:
  • void
Observable
removeListener( String eventName, Function handler, [Object scope] ) : void
删除一个事件处理器。
删除一个事件处理器。
参数:
  • eventName : String
    处理器关联的事件类型。
  • handler : Function
    移除的处理器。 这应该是传递到addListener里的方法的引用。
  • scope : Object
    （可选）处理器指定的初始作用域。
返回值:
  • void
Observable
resumeEvents() : void
重新开始触发事件。(参见suspendEvents) 如果事件以queueSuspended参数被挂起，则在事件被挂起时 ...
重新开始触发事件。(参见 suspendEvents) 如果事件以queueSuspended 参数被挂起，则在事件被挂起时触发的事件会被传递到所有的监听器上
参数:
  • 无。
返回值:
  • void
Observable
setAdapter ( Object adapter ) : void
设置SplitBar使用的适配器
设置SplitBar使用的适配器
参数:
  • adapter : Object
    SplitBar适配器对象
返回值:
  • void
SplitBar
setCurrentSize ( Number size ) : void
设置被改变大小的元素的初始化尺寸
设置被改变大小的元素的初始化尺寸
参数:
  • size : Number
    初始化尺寸
返回值:
  • void
SplitBar
setMaximumSize ( Number maxSize ) : void
设置被改变大小的元素的最大尺寸
设置被改变大小的元素的最大尺寸
参数:
  • maxSize : Number
    最大尺寸
返回值:
  • void
SplitBar
setMinimumSize ( Number minSize ) : void
设置被改变大小的元素的最小尺寸
设置被改变大小的元素的最小尺寸
参数:
  • minSize : Number
    最小尺寸
返回值:
  • void
SplitBar
suspendEvents( Boolean queueSuspended ) : void
暂停触发所有的事件。 (参看resumeEvents)
暂停触发所有的事件。（参看 resumeEvents)
参数:
  • queueSuspended : Boolean
    如果传递为true则排列好暂停的事件使得在调用 resumeEvents 后再触发它们，而不是抛弃所有暂停的事件。
返回值:
  • void
Observable
un( String eventName, Function handler, [Object scope] ) : void
删除一个事件处理器(removeListener方法的简写形式)
删除一个事件处理器(removeListener方法的简写形式。)
参数:
  • eventName : String
    处理器关联的事件类型
  • handler : Function
    被删除的处理器 这应该是传入 addListener 中的方法的引用。
  • scope : Object
    （可选）为处理器指定的初始作用域。
返回值:
  • void
Observable

公共事件

Event Defined By
beforeresize : ( Ext.SplitBar this )
当分割器被拖动时触发
当分割器被拖动时触发
监听器将会以如下的参数格式调用:
  • this : Ext.SplitBar
SplitBar
moved : ( Ext.SplitBar this , Number newSize )
当分隔元素被移动时触发
当分隔元素被移动时触发
监听器将会以如下的参数格式调用:
  • this : Ext.SplitBar
  • newSize : Number
    新的宽度和高度
SplitBar
resize : ( Ext.SplitBar this , Number newSize )
当分割器被删除时触发(moved的别名)
当分割器被删除时触发( moved的别名)
监听器将会以如下的参数格式调用:
  • this : Ext.SplitBar
  • newSize : Number
    新的宽度和高度
SplitBar


Observable
    Component
      BoxComponent
        Button
          SplitButton

Class Ext.SplitButton

包: | Ext
定义类的文件: | SplitButton.js
类: | SplitButton
子类: | CycleButton
继承自: | Button
一个分隔按钮，提供一个内建的下拉箭头，可以独立从按钮的点击事件中 触发出一个事件。 典型的情况下，该类被用来显示一个下拉菜单，为主要的按钮动作 提供额外补充的选项，但是任何定制的处理函数都可以提供对箭头点击的实现。示例用法:

                // display a dropdown menu:
new Ext.SplitButton({
    renderTo: 'button-ct', // the container id
       text: 'Options',
       handler: optionsHandler, // handle a click on the button itself
       menu: new Ext.menu.Menu({
        items: [
            // these items will render as dropdown menu items when the arrow is clicked:
            {text: 'Item 1', handler: item1Handler},
            {text: 'Item 2', handler: item2Handler}
        ]
       })
});

// Instead of showing a menu, you provide any type of custom
// functionality you want when the dropdown arrow is clicked:
new Ext.SplitButton({
    renderTo: 'button-ct',
       text: 'Options',
       handler: optionsHandler,
       arrowHandler: myCustomHandler
});

配置项

Config Options Defined By
allowDepress : Boolean
设置为false将允许一个按下的按钮弹起来(默认值为 undefined)。 只有当enableToggle为true时有效。
Button
allowDomMove : Boolean
在渲染时组件是否可以移动Dom节点(默认为true)。
Component
anchor : String
注: 这个配置只用于该组件被包含在一个已使用AnchorLayout...

注: 这个配置只用于该组件被包含在一个已使用 AnchorLayout (或者其子类)配置的Container时。 基于布局管理器，例如：

  • Ext.form.FormPanel
  • 指定 layout: 'anchor' // or 'form', or 'absolute'

参见 Ext.layout.AnchorLayout. anchor 。

BoxComponent
applyTo : Mixed
指定一个元素的id、一个DOM元素或者一个已经存在并被渲染到DIV中的元素，此DIV已经被...

指定一个元素的id、一个DOM元素或者一个已经存在并被渲染到DIV中的元素，此DIV已经被 渲染到document中，并且为当前组件指定了一些结构化的标签。

  • 描述 :
      当使用了 applyTo， 在主元素中也可以用id或者CSS类名来指定组件的托管部分， 并且，如果可以的话，创建的组件可能也会试图在那个标签中创建它的子组件。
  • 注意 :
      当使用此配置项时，无需调用render()方法。
      如果指定了applyTo属性，任何传递给 renderTo 的值都会被忽略，并且目标元素的父节点将会自动被用作组件的容器。
Component
arrowAlign : String
(可选) 如果按钮有关联菜单，用于指定箭头的位置...

(可选) 如果按钮有关联menu，用于指定箭头的位置。 两个值有效：

  • 'right'
  • 'bottom'

默认为 'right' .

Button
arrowHandler : Function
当箭头按钮被点击时调用的函数 (可以用来代替点击事件)
SplitButton
arrowTooltip : String
箭头的title属性
SplitButton
autoHeight : Boolean
如果值为true，height配置项为'auto'，否则值为false的话使用固定的高度...

如果值为true，height配置项为'auto'，否则值为false的话使用固定的高度， 或者可以由其父类容器 layout manager来控制。(默认值为 false)。

注: 虽然很多组件继承了这个配置选项，但不是所有这些组件的自适应高度配置都会像期望的那样起作用。 设置autoHeight：值为true时，浏览器将根据元素的内容自动设置高度，这将意味着Ext不会去管理高度。

如果是由浏览器来管理高度，需要注意的是，通过浏览器进行调整的结构组件内不能被发现， 因此宽度的变化可能导致需要进行同步处理元素的高度。 例如：

var w = new Ext.Window({
    title: 'Window',
    width: 600,
    autoHeight: true,
    items: {
        title: 'Collapse Me',
        height: 400,
        collapsible: true,
        border: false,
        listeners: {
            beforecollapse: function() {
                w.el.shadow.hide();
            },
            beforeexpand: function() {
                w.el.shadow.hide();
            },
            collapse: function() {
                w.syncShadow();
            },
            expand: function() {
                w.syncShadow();
            }
        }
    }
}).show();
BoxComponent
autoScroll : Boolean
如果值为true，将会在该元素上使用overflow:'auto'配置，并且在必要的时候...
如果值为true，将会在该元素上使用overflow:'auto'配置，并且在必要的时候自动显示滚动条，否则，溢出部分的组件都会被切除(默认值为 false)。
BoxComponent
autoShow : Boolean
如果组件需要检测隐藏CSS属性(如 'x-hidden' 或者 'x-hide-display')并且在渲染时删除...
如果组件需要检测隐藏CSS属性(如 'x-hidden' 或者 'x-hide-display')并且在渲染时删除它们 (默认为false)，设置此值为true。
Component
autoWidth : Boolean
如果为true，使用width:'auto'配置，否则使用固定的宽度...

如果为true，使用width:'auto'配置，否则使用固定的宽度，或者可以由其父类容器的layout manager来控制。(默认值为 false)。

注: 虽然很多组件继承了这个配置选项，但不是所有这些组件的自适应宽度配置都会像期望的那样起作用。 设置autoWidth：值为true时，浏览器将根据元素的内容自动设置宽度，这将意味着Ext不会去管理宽度。

如果是由浏览器来管理宽度，需要注意的是，通过浏览器进行调整的结构组件内不能被发现，因此宽度的变化可能导致需要进行同步处理元素的宽度。 例如，在这个元素的目标是：

<div id='grid-container' style='margin-left:25%;width:50%'></div>
当浏览器窗口改变时，渲染后的Panel必须监听浏览器窗口大小的变化，以便通知子项，浏览器改变了其宽度：

var myPanel = new Ext.Panel({
    renderTo: 'grid-container',
    monitorResize: true, // relay on browser resize
    title: 'Panel',
    height: 400,
    autoWidth: true,
    layout: 'hbox',
    layoutConfig: {
        align: 'stretch'
    },
    defaults: {
        flex: 1
    },
    items: [{
        title: 'Box 1',
    }, {
        title: 'Box 2'
    }, {
        title: 'Box 3'
    }],
});
BoxComponent
boxMaxHeight : Number
设置组件的最大高度值...

设置组件的最大高度值。

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

BoxComponent
boxMaxWidth : Number
设置组件的最大宽度值...

设置组件的最大宽度值。

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

BoxComponent
boxMinHeight : Number
设置组件的最小高度值...

设置组件的最小高度值。

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

BoxComponent
boxMinWidth : Number
设置组件的最小宽度值...

设置组件的最小宽度值。

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

BoxComponent
bubbleEvents : Array
一个事件数组，当这些事件被触发时，将会被冒泡到所有父容器中。参见....

一个事件数组，当这些事件被触发时，将会被冒泡到所有父容器中。参见 Ext.util.Observable.enableBubble。 默认为 []。

Component
buttonSelector : String
(可选) DomQuery选择器， 用于从创建的DOM结构中提取激活的，可点击的元素...

(可选) DomQuery 选择器， 用于从创建的DOM结构中提取激活的，可点击的元素。

当一个自定义的 template is 被使用时，您必须确定这个选择器的结果在可聚焦的选择集合里。

默认 'button:first-child' .

Button
clearCls : String
应用到特殊的clearing div的CSS类， 这个clearing div直接渲染到每个form field的包装器后面...

应用到特殊的clearing div的CSS类， 这个clearing div直接渲染到每个form field的包装器后面，以提供 清除field的功能(默认为 'x-form-clear-left')。

注意: 只有在当前组件被渲染到一个使用FormLayout 布局(例如 Ext.form.FormPanel 或者指定 layout:'form')的 容器中、或者是指定了一个fieldLabel 、或者指定isFormField=true 时此配置才有效。

另请参见 Ext.layout.FormLayout. fieldTpl。

Component
clickEvent : String
触发按钮处理函数的DOM事件...
触发按钮处理函数的DOM事件。可以是任何有效的事件名称（dblclick, contextmenu）。默认为'click'.
Button
cls : String
一个可选的额外CSS类，它将被添加到当前组件的元素上(默认为'')...
一个可选的额外CSS类，它将被添加到当前组件的元素上(默认为'')。 此属性对于在组件上，或者它的任何使用标准CSS规则的孩子节点上， 添加定制的样式非常有用。
Button
ctCls : String
一个可选的外部CSS样式，添加到这个组件的容器(默认值为 '')。 这个方法对于使用标准的CSS规则...

一个可选的外部CSS样式，添加到这个组件的容器(默认值为 '')。 这个方法对于使用标准的CSS规则，为组件或它的任何一个子组件添加特定的样式非常有用。 参见 Ext.layout.ContainerLayout和 extraCls 。

注意: ctCls 默认为 ''期望如下的类，它们将指定一个默认值:

  • Box Layout : 'x-box-layout-ct'
使用一个额外的CSS类配置以上的Class，它是append到默认对象上的。例如， 对于BoxLayout (Hbox and Vbox):
                                ctCls: 'x-box-layout-ct custom-class'

Component
disabled : Boolean
当前组件处于无效状态时为true。 Read-only.
Button
disabledClass : String
当组件处于无效状态时添加到组件上的CSS类(默认为 'x-item-disabled')。
Component
enableToggle : Boolean
设置为true将允许固定按下/非按下状态(默认值为 false)
Button
fieldLabel : String
紧靠此field显示的标签文本(默认值为 '')。注意...

紧靠此field显示的标签文本(默认值为 '')。

注意:只有在当前组件被渲染到一个使用FormLayout 的容器中时，此配置才有效。 (例如 Ext.form.FormPanel 或 指定 layout:'form')。

另请参见 hideLabel 、 Ext.layout.FormLayout和 fieldTpl。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Name'
    }]
});
Component
flex : Number
注: 这个配置只用于该组件被包含在一个已使用BoxLayout配置的Container中时...

注: 这个配置只用于该组件被包含在一个已使用BoxLayout配置的Container中时。通过计算每一个子组件的flex值所占全部flex值之和的比例，来决定子组件的宽(HBoxLayout)高(VBoxlayout)。 任何子项的 flex = 0 或 flex = undefined 将不被设置(初始值大小将不被改变)。

BoxComponent
handleMouseEvents : Boolean
设置为true，将禁用发生 mouseover, mouseout 和 mousedown事件时的视觉提示 (默认值为 true)
Button
handler : Function
当按钮被点击时调用的方法 (可以用来替代点击事件)
当按钮被点击时调用的方法 (可以用来替代点击事件)，参数如下:
  • b : Button
    这个按钮。
  • e : EventObject
    点击事件。
Button
height : Number
组件的高度(默认值为 auto)。注:如果想使用百分比的方式...
组件的高度(默认值为 auto)。注:如果想使用百分比的方式来设置值，请查看 Ext.Component.anchor。
BoxComponent
hidden : Boolean
如果当前组件处于隐藏状态，此值为true。Read-only。
Button
hideLabel : Boolean
true时完全隐藏label元素 ( label 和 separator)。 默认为 false。 默认情况下，即使你不指定...

true时完全隐藏label元素 ( label 和 separator)。 默认为 false。 默认情况下，即使你不指定 fieldLabel 它的空间仍然会被保留，这样这块区域会与其它确实拥有label的区域位于同一排。 讲此值设置为 true 将导致此区域不再保留此空间。

注意: 参见 clearCls 的注释。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield'
        hideLabel: true
    }]
});
Component
hideMode : String
组件如何隐藏，支持的值有： 'visibility' (css visibility), 'offsets' (位置偏移量为负值) 和...

组件如何隐藏，支持的值有： 'visibility' (css visibility), 'offsets' (位置偏移量为负值) 和 'display' (css display).

注意:一般首选默认值 'display'，因为当组件第一次显示的时候它们会自动进行布局 (隐藏的时候不会调整尺寸)。

Component
hideParent : Boolean
此值为true时，当调用hide/show方法时，将会hide和show组件的容器...
此值为true时，当调用hide/show方法时，将会hide和show组件的容器；false时将会 hide和show组件自身(默认为false)。例如，这可以用作window上隐藏按钮的一种 快捷操作，通过设置此按钮的hideParent:true，然后把它添加到window上。
Component
icon : String
显示在按钮中的图片路径 (默认情况下，图片将会被设置为按钮的CSS背景图片属性，所以，如果你需要一个 图标/文本混合型的按钮...
显示在按钮中的图片路径 (默认情况下，图片将会被设置为按钮的CSS背景图片属性，所以，如果你需要一个 图标/文本混合型的按钮， 请设置cls:"x-btn-text-icon")
Button
iconAlign : String
(可选) 图表渲染的位置。允许四个值：<ul class="mdetail-params"> 'top'<...

(可选) 图表渲染的位置。允许四个值：

  • 'top'
  • 'right'
  • 'bottom'
  • 'left'

默认 'left' .

Button
iconCls : String
一个CSS类，设置一个背景图片，当前按钮将使用此图片作为图标
Button
id : String
当前组件唯一的id(默认为auto-assigned id)...

当前组件唯一的id(默认为auto-assigned id)。 如果你需要在以后访问组件，而又没有一个有效的组件对象引用，那么你需要指定一个 id( 也就是，使用Ext. getCmp方法 )。

注意，此id也将被用作组件底层HTML标签的id，这些标签被渲染到页面中。 这将允许你编写基于id的CSS规则，以独立地描述指定的实例；并且，也可以通过 组件父标签的id选中子元素。

注意:为了避免与唯一的id 产生重复， 请参见 itemId 和 ref 。

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

Component
itemCls : String
注意: 只有在当前组件被渲染到一个使用FormLayout 布局的 容器中时此配置才有效...

注意: 只有在当前组件被渲染到一个使用FormLayout 布局的 容器中时此配置才有效。 (例如Ext.form.FormPanel 或者指定 layout:'form')。

一个附加的CSS类，应用到div上，包装当前field的表单元素。 如果提供了此参数， field级上的itemCls将会覆盖 container级上提供的 默认itemCls。 为itemCls指定的值将会被添加默认的 类('x-form-item')。

既然它被应用到项目的包装器上(参见 Ext.layout.FormLayout。 fieldTpl)， 它将允许你编写能应用到此field、label(如果有指定)、或者field内部任何其它元素的标准CSS规则。

注意: 参考 fieldLabel的注释。 .

示例用法:

// Apply a style to the field's label:
<style>
    .required .x-form-item-label {font-weight:bold;color:red;}
</style>

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Name',
        itemCls: 'required' //this label will be styled
    },{
        xtype: 'textfield',
        fieldLabel: 'Favorite Color'
    }]
});
Component
itemId : String
当没有可利用的对象引用时，itemId可以作为第二选择，用来获得一个组件的引用， 代替 ...

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

var c = new Ext.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'); // 与 Ext.getCmp()不同

p2 = p1.ownerCt.getComponent('p2'); // 通过兄弟对象获得引用

另请参见 id 和 ref 。

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

Component
labelSeparator : String
每个fieldLabel 文本后面现实的分隔符。 此属性可以在多个层次上进行配置...

每个fieldLabel 文本后面现实的分隔符。 此属性可以在多个层次上进行配置。优先顺序为：

  • field / component level
  • container level
  • layout level (默认为冒号 ':')
如不需要为当前field的label显示分隔符，指定一个空字符串''即可。

注意:参见 clearCls 的注释。

另请参见 hideLabel 和 Ext.layout.FormLayout。 fieldTpl。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    layoutConfig: {
        labelSeparator: '~'   // layout config has lowest priority (defaults to ':')
    },
    labelSeparator: '>>',     // config at container level
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Field 1',
        labelSeparator: '...' // field/component level config supersedes others
    },{
        xtype: 'textfield',
        fieldLabel: 'Field 2' // labelSeparator will be '='

    }]
});
Component
labelStyle : String
一个CSS样式描述字符串，它将直接应用到当前field的label上...

一个CSS样式描述字符串，它将直接应用到当前field的label上。 如果有设置，默认为容器的labelStyle值(例如 Ext.layout.FormLayout.labelStyle , 或者 '')。

注意:参见 clearCls 的注释。

另请参见 hideLabel 和 Ext.layout.FormLayout. fieldTpl。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Name',
        labelStyle: 'font-weight:bold;'
    }]
});
Component
listeners : Object
一个包含一个或多个事件处理器的配置对象，会在初始化的时候被添加到目标对象上...

一个包含一个或多个事件处理器的配置对象，会在初始化的时候被添加到目标对象上。 该配置对象应该是一个有效的监听器配置对象就像 addListener例子中指定的一样可一次附加多个处理器。

ExtJs Components上的DOM事件

一些 ExtJs Component 类导出时会选择一些DOM事件(例如 "click", "mouseover" 等等), 这通常只是在有额外的值可以被添加时发生。例如DataView类的 click事件会传递被点击的节点。也可以直接在Component的HTMLElementevent上访问DOM事件，但必需在Component被渲染后监听器才能添加到Element 上。可以按照以下步骤添加插件:

// 插件会用一个监听器配置对象进行配置。
//该组件会被添加到所有处理方法的参数列表上。
Ext.DomObserver = Ext.extend(Object, {
    constructor: function(config) {
        this.listeners = config.listeners ? config.listeners : config;
    },

    // 组件将自己传递进了插件的初始化方法里
    init: function(c) {
        var p, l = this.listeners;
        for (p in l) {
            if (Ext.isFunction(l[p])) {
                l[p] = this.createHandler(l[p], c);
            } else {
                l[p].fn = this.createHandler(l[p].fn, c);
            }
        }

        // 渲染后立即添加监听器到元素上
        c.render = c.render.createSequence(function() {
            var e = c.getEl();
            if (e) {
                e.on(l);
            }
        });
    },

    createHandler: function(fn, c) {
        return function(e) {
            fn.call(this, e, c);
        };
    }
});

var combo = new Ext.form.ComboBox({

    // 元素被点击后折叠
    plugins: [ new Ext.DomObserver({
        click: function(evt, comp) {
            comp.collapse();
        }
    })],
    store: myStore,
    typeAhead: true,
    mode: 'local',
    triggerAction: 'all'
});

Observable
margins : Object
注:此配置只用于该组件展现在一个使用BorderLayout...

注:此配置只用于该组件展现在一个使用BorderLayout 或 BoxLayout的两个子类之一作为布局的容器。

这个margins对象在该组件中的格式为：

{top: (top margin),right: (right margin),bottom: (bottom margin),left: (left margin)}

也可以是一个字符串，中间用空格分隔，margin值为数字。 把matches中每一个值的次序跟CSS中margin值的排列方式相对应：

  • 如果只有一个值，它适用于所有方面。
  • 如果有两个值，top和bottom的边框设置为第一个值，left和right设置为第二个值。
  • 如果有三个值，top设置为第一个值，left和right设置为第二个值，bottom设置为第三个值。
  • 如果有四个值，分别设置为top, right, bottom, left。

默认值:

{top:0, right:0, bottom:0, left:0}
BoxComponent
menu : Menu 与按钮相关联的{@link Ext.menu.Menu Menu}对象，被配置了{@link #menu}配置项.
Button
menuAlign : String
菜单对齐的位置 (详情参见Ext.Element.alignTo ，默认值为 'tl-bl?').
Button
minWidth : Number
按钮的最小宽度(用来为一组按钮指定一个统一的宽度)，参见 Ext.Panel. minButtonWidth .
Button
overCls : String
一个可选的额外的CSS类，它将在鼠标移过元素时被添加到组件上...
一个可选的额外的CSS类，它将在鼠标移过元素时被添加到组件上，鼠标移出时 删除。(默认为'')。此属性对于在组件上，或者它的任何使用标准CSS规则的孩子节点上， 添加定制的'active' 或者 'hover'样式非常有用。
Component
overflowText : String
如果被用在 Toolbar，这段文字用于显示在溢出菜单上...
如果被用在 Toolbar, 这段文字用于显示在溢出菜单上。 参见 Ext.Toolbar.Item. overflowText .
Button
pageX : Number
如果该组件被包含在一个指定位置的容器中，这个值表示页面级的x坐标值（译者注：在有滚动条的情况下这个值很有用）。
BoxComponent
pageY : Number
如果该组件被包含在一个指定位置的容器中，这个值表示页面级的y坐标值（译者注：在有滚动条的情况下这个值很有用）。
BoxComponent
plugins : Object/Array
一个对象或者一个对象数组，为组件提供特殊的功能 ...
一个对象或者一个对象数组，为组件提供特殊的功能。 对一个合法的插件唯一的要求是它含有一个init()方法， 能接收一个Ext.Component型的参数。 当组件被创建时，如果有可用的插件，组件将会调用每个插件的init方法， 并将自身的引用作为方法参数传递给它。然后，每个插件就可以调用方法或者响应组件上的事件， 就像需要的那样提供自己的功能。
Component
pressed : Boolean
只读属性。 如果按钮被按下，此值为true (只有在 enableToggle = true时有效)
Button
ptype : String
需要创建配置的ptype。 当传递一个配置对象给构造函数时...
需要创建配置的ptype。 当传递一个配置对象给构造函数时，此配置选项不会被使用。 只有在使用懒初始化的时候此配置项才会被使用， 此时Plugin不是 通过一个完整的实例组件，而是通过一个Component配置指定的。 在渲染时，将会查找ptype以决定创建何种类型的Plugin。

如果你创建自己的Plugin，你可以通过 Ext.ComponentMgr.registerPlugin 对它们进行注册，以便能利用懒初始化和渲染机制。
Component
ref : String
一个路径描述，与组件的 ownerCt 相关，它描述了把当前组件的命名引用放置到哪个父容器中去。...

一个路径描述，与组件的 ownerCt 相关，它描述了把当前组件的命名引用放置到哪个父容器中去。

祖先的坐标路径可以通过'/'字符进行分隔。 例如，将一个Toolbar Button的引用放入 拥有此Toolbar的Panel中:

var myGrid = new Ext.grid.EditorGridPanel({
    title: 'My EditorGridPanel',
    store: myStore,
    colModel: myColModel,
    tbar: [{
        text: 'Save',
        handler: saveChanges,
        disabled: true,
        ref: '../saveButton'
    }],
    listeners: {
        afteredit: function() {
//          The button reference is in the GridPanel
            myGrid.saveButton.enable();
        }
    }
});

在上面的代码中，如果 ref 是 'saveButton' ，那么引用将会被放置到Toolbar中。 ref 中的每个'/' 都会从组件的 ownerCt 向上移动一级。

另请参见 added 和 removed 事件。

Component
region : String
注: 此配置只用于该组件展现在一个布局为BorderLayout的容器中...

注: 此配置只用于该组件展现在一个布局为BorderLayout的容器中(例如指定layout:'border')。

详见Ext.layout.BorderLayout。

BoxComponent
renderTo : Mixed
该值可以是一个节点的id、一个DOM节点或者一个已存在的元素...

该值可以是一个节点的id、一个DOM节点或者一个已存在的元素， 组件将会被渲染到其中。

  • 注意 :
      如果组件不是一个Container 的子项目时， 不要使用此选项。 渲染和管理它的子项目是一个Container 的layout manager的责任。
      当使用此配置项时，无需调用render()方法。

另请参见 render 。

Component
repeat : Boolean/Object
设置为true，在鼠标被按下时将重复触发点击事件。 此项也可以是一个ClickRepeater配置对象(默认值为 false)。
设置为true，在鼠标被按下时将重复触发点击事件。 此项也可以是一个ClickRepeater配置对象(默认值为 false)。
Button
scale : String
(可选) 按钮大小。允许三种值： <ul class="mdetail-params"> 'small'<div class="sub-desc"...

(可选) 按钮大小。允许三种值：

  • 'small'
    按钮高度16px。
  • 'medium'
    按钮高度24px。
  • 'large'
    按钮高度32px。

默认 'small' .

Button
scope : Object
handler and toggleHandler 执行时的作用域( this 引用) 默认为这个按钮。
Button
stateEvents : Array
一个事件数组，当它们被触发时，组件需要保存自己的状态(默认值为 none)...

一个事件数组，当它们被触发时，组件需要保存自己的状态(默认值为 none)。 它们可以是任何该组件支持的事件类型，包括浏览器事件和 自定义事件(例如['click', 'customerchange'])。

对于保存和恢复组件状态的详细解释，参见 stateful

Component
stateId : String
为该组件指定的唯一的id值，它被用作管理组件状态的目的...
为该组件指定的唯一的id值，它被用作管理组件状态的目的。 (如果设定了id，默认值为组件自己的id，否则，如果组件使用自动生成的id，此值为null)。

对于保存和反解析组件状态的解释，参见 stateful 。

Component
stateful : Boolean
一个标志参数，它将引起组件在启动时尝试从一个保存的状态中恢复内部状态参数...

一个标志参数，它将引起组件在启动时尝试从一个保存的状态中恢复内部状态参数。 组件必须要么拥有一个 stateId 或者 id ，它们被分配给需要被管理的状态属性。 在跨页面加载时，不保证自动生成的id属性的稳定性， 并且，不能依赖此id来保存和恢复一个组件的相同状态。

为了保存状态的操作能够工作，状态管理器的提供者必须 被设置成一个Ext.state.Provider 的实现类，它覆盖了set 和get 方法，以便保存和恢复name/value对。 有一个内置的Ext.state.CookieProvider 可用。

为当前页面设置状态提供者:

Ext.state.Manager.setProvider(new Ext.state.CookieProvider({
    expires: new Date(new Date().getTime()+(1000*60*60*24*7)), //7 days from now
}));

当 stateEvents 配置项中其中之一的事件被触发时， 一个状态可保存的组件将试图保存其状态。

保存状态时，一个可保存状态的组件首先需要通过调用 getState 方法来序列化它的状态。 默认情况下，此函数什么事都不做。 开发者必须提供一个实现，返回一个hash对象，它描述了组件可恢复的状态。

getState方法产生的值将会传递给 Ext.state.Manager.set 方法，它使用配置的 Ext.state.Provider 来保存对象，以组件的 stateId 为key，或者，如果此值（指stateId）没有指定时， 使用它的 id 作为key。

在进行构造时，一个可保存状态的组件试图通过调用 Ext.state.Manager.get方法来 恢复它的状态，传递 stateId 或者，如果此值（指stateId）没有指定时， 使用它的 id 作为参数。

结果对象被传递给 applyState 。 applyState 的默认实现只是简单地把属性拷贝到对象中， 但是开发者可以覆盖此方法以支持更多行为。

通过向 beforestaterestore, staterestore, beforestatesave 和 statesave 事件上绑定监听器，你可以在保存和恢复状态时进行额外的处理。

Component
style : String
被添加到组件元素的特定样式。 必须是按照...
被添加到组件元素的特定样式。 必须是按照 Ext.Element.applyStyles 类指定格式的合法参数值。

new Ext.Panel({
    title: 'Some Title',
    renderTo: Ext.getBody(),
    width: 400, height: 300,
    layout: 'form',
    items: [{
        xtype: 'textarea',
        style: {
            width: '95%',
            marginBottom: '10px'
        }
    },
        new Ext.Button({
            text: 'Send',
            minWidth: '100',
            style: {
                marginBottom: '10px'
            }
        })
    ]
});
Component
tabIndex : Number
为当前按钮设置一个DOM tabIndex(默认值为 undefined)
Button
tabTip : String
注: 这个配置只用于当该组件作为TabPanel的一个子项目时使用...

注: 这个配置只用于当该组件作为TabPanel的一个子项目时使用。

一个String类型的innerHTML(支持html标签)，当鼠标放在该选项上的时，显示一个tooltip。为了tips能够被渲染，Ext.QuickTips.init()必须被提前调用。
BoxComponent
template : Ext.Template
一个Ext.Template，用于构建按钮的DOM结构...

一个 Template， 用于构建按钮的DOM结构。

需要一个不同的DOM结构的实例或者子类可以通过使用getTemplateArgs来提供一个不同的模版布局。
Button
text : String
按钮文本，innerHTML(允许html标签)
Button
toggleGroup : String
当前被按下的按钮所属的组 (一组中只有1个按钮可以被按下， 只有在enableToggle = true时有效)
Button
toggleHandler : Function
当一个enableToggle 被设置为true的按钮被点击时调用的函数...
当一个enableToggle 被设置为true的按钮被点击时调用的函数。 将会传递两个参数：
  • button : Ext.Button
    这个按钮对象
  • state : Boolean
    按钮的下一个状态，为true代表按下。
Button
tooltip : String/Object
按钮的tooltip---可以是一个字符串（接受html标签），或者一个QuickTips...
按钮的tooltip---可以是一个字符串（接受html标签），或者一个QuickTips配置对象
Button
tooltipType : String
使用的tooltip类型。 要么是 "qtip" (默认) QuickTips 要么是"title"以做标题属性。
Button
type : String
submit, reset 或者 button - 默认值为 'button'
Button
width : Number
组件的宽度(默认值为 auto)。注:如果想使用百分比的方式...
组件的宽度(默认值为 auto)。注:如果想使用百分比的方式来设置值，请查看 Ext.Component.anchor。
BoxComponent
x : Number
如果被包含在一个指定位置的容器中，这个值表示x(left)坐标值。
BoxComponent
xtype : String
需要创建配置的xtype。 当传递一个配置对象给构造函数时...
需要创建配置的xtype。 当传递一个配置对象给构造函数时，此配置选项不会被使用。 只有在使用懒初始化的时候此配置项才会被使用，此时容器的子项目不是 通过一个完整的实例组件，而是通过一个Component配置指定的。 在渲染时，将会查找xtype以决定创建何种类型的子组件。

预定义的xtype列表如下： here。

如果你继承Component创建你自己的组件，你需要使用Ext.ComponentMgr.registerType 对它们进行注册，以便利用懒初始化和渲染机制。
Component
y : Number
如果被包含在一个指定位置的容器中，这个值表示y(top)坐标值。
BoxComponent

公共属性

Property Defined By
btnEl : Ext.Element
封装按钮可点击与元素的元素Element。默认情况下，引用一个...
封装按钮可点击与元素的元素Element。默认情况下，引用一个 <button> 元素。只读。
Button
disabled : Boolean
当前组件处于无效状态时为true。 Read-only.
Button
el : Ext.Element
封装了当前组件的Ext.Element。 Read-only。通常情况下，这将是一个<DIV>元素，它由此类的...

封装了当前组件的Ext.Element。 Read-only。

通常情况下，这将是一个<DIV>元素，它由此类的 onRender方法创建，但是它可以通过使用 autoEl 配置项进行覆盖。

注意: 直到组件渲染完成此元素都将处于无效状态。

如需向当前组件的 DOM事件(而不是当前组件自己的Observable事件)添加监听器， 更多建议，参见 listeners 配置项，或者直接使用一个render监听器:

new Ext.Panel({
    title: 'The Clickable Panel',
    listeners: {
        render: function(p) {
            // Append the Panel to the click handler's argument list.
            p.getEl().on('click', handlePanelClick.createDelegate(null, [p], true));
        },
        single: true  // Remove the listener after first invocation
    }
});

另请参见 getEl

Component
hidden : Boolean
如果当前组件处于隐藏状态，此值为true。Read-only。
Button
initialConfig : Object
当前组件的初始化配置描述。 Read-only。
Component
menu : Menu 与按钮相关联的{@link Ext.menu.Menu Menu}对象，被配置了{@link #menu}配置项.
Button
ownerCt : Ext.Container
组件所属的Container (默认为undefined，当前组件被添加到一个容器中时此值被自动设置)...
组件所属的Container (默认为undefined，当前组件被添加到一个容器中时此值被自动设置)。 Read-only。

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

Component
pressed : Boolean
只读属性。 如果按钮被按下，此值为true (只有在 enableToggle = true时有效)
Button
refOwner : Ext.Container
如果当前组件是一个容器的孩子，并且是通过一个 ref 配置项被注册的，则此值为 ref 引用被插入到的祖先容器。
如果当前组件是一个容器的孩子，并且是通过一个 ref 配置项被注册的，则此值为 ref 引用被插入到的祖先容器。
Component
rendered : Boolean
如果当前组件已经被渲染了，此值为true。Read-only.
Component

公共方法

Method Defined By
SplitButton ( Object config )
创建一个新的菜单按钮
Create a new menu button
参数:
  • config : Object
    配置对象
返回值:
  • void
SplitButton
addClass ( string cls ) : Ext.Component
为组件底层的元素添加CSS样式。
为组件底层的元素添加CSS样式。
参数:
  • cls : string
    需要添加的CSS样式的class名称
返回值:
  • Ext.Component
    this
Component
addEvents( Object|String o, string Optional. ) : void
添加指定的事件到事件列表上，事件会被该Observable触发。
添加指定的事件到事件列表上，事件会被该Observable触发。
参数:
  • o : Object|String
    以事件名作为属性true作为值的对象 或者当多个事件名被分开的传递时则为第一个事件名。
  • Optional. : string
    事件名被分开的传递时则为事件名。 用法:
    this.addEvents('storeloaded', 'storecleared');
返回值:
  • void
Observable
addListener( String eventName, Function handler, [Object scope], [Object options] ) : void
给对象添加事件处理器。
给对象添加事件处理器。
参数:
  • eventName : String
    监听的事件名。
  • handler : Function
    事件调用的方法
  • scope : Object
    （可选）处理方法执行的作用域 (this的引用 reference)。 如果被忽略。默认为触发事件的对象。
  • options : Object
    （可选）包含处理器配置和属性的对象。 可能包含以下的属性:
    • scope : Object
      处理方法执行的作用域(this的引用) 。 如果被忽略。默认为触发事件的对象。
    • delay : Number
      在触发事件后延迟调用处理器的毫秒数。
    • single : Boolean
      如果为True则添加一个处理器来处理下一次的事件触发（仅一次），然后移除自己。
    • buffer : Number
      使得处理器延迟指定毫秒数后预定的运行在 一个Ext.util.DelayedTask中 。 如果事件在时间内再一次被触发，原始的处理器不会被调用，但是新的处理器会预定的在他的位置上。
    • target : Observable
      如果事件在目标的Observable上触发则仅仅调用处理器， 否则 事件会从子类的Observable上冒泡

    组合选项
    使用这些选项参数,可能会组合出不同类型的监听器：

    一个延迟的，一次性的监听器。

    myDataView.on('click', this.onClick, this, {
single: true,
delay: 100
});

    一次调用附加多个处理器
    该方法同样支持传递一个包含指定的多个处理器的属性的配置对象参数。

    myGridPanel.on({
'click' : {
    fn: this.onClick,
    scope: this,
    delay: 100
},
'mouseover' : {
    fn: this.onMouseOver,
    scope: this
},
'mouseout' : {
    fn: this.onMouseOut,
    scope: this
}
});

    或者一个简写的语法：

    myGridPanel.on({
'click' : this.onClick,
'mouseover' : this.onMouseOver,
'mouseout' : this.onMouseOut,
 scope: this
});
返回值:
  • void
Observable
applyToMarkup ( String/HTMLElement el ) : void
将此组件添加到已存在的有效的HTML标签中。 使用该方法时，无需再调用render()方法。
将此组件添加到已存在的有效的HTML标签中。 使用该方法时，无需再调用render()方法。
参数:
  • el : String/HTMLElement
返回值:
  • void
Component
cloneConfig ( Object overrides ) : Ext.Component
默认使用原先传递给当前实例的配置值克隆当前组件。
默认使用原先传递给当前实例的配置值克隆当前组件。
参数:
  • overrides : Object
    一个新的配置项，包含需要覆盖到克隆版本的所有属性。 可以传递一个id参数给此对象，否则将自动生成一个新的id以避免发生重复。
返回值:
  • Ext.Component
    当前组件的克隆副本
Component
destroy () : void
通过如下方法销毁对象：删除所有的事件监听器、将组件的元素从DOM树中删除...
通过如下方法销毁对象：删除所有的事件监听器、将组件的元素从DOM树中删除（如果可以）、 将组件从它的 Ext.Container（如果可用）中删除、 并且将它从Ext.ComponentMgr中 注销。 销毁操作一般由框架自动完成，一般情况下不需要直接调用该方法。
参数:
  • 无。
返回值:
  • void
Component
disable () : Ext.Component
将组件置为无效状态，并出发'disable'事件。
将组件置为无效状态，并出发'disable'事件。
参数:
  • 无。
返回值:
  • Ext.Component
    this
Component
enable () : Ext.Component
将组件置为有效状态并触发'enable'事件。
将组件置为有效状态并触发'enable'事件。
参数:
  • 无。
返回值:
  • Ext.Component
    this
Component
enableBubble( String/Array events ) :void
是否现在使得事件会被该Observable触发并调用 this.getBubbleTarget()方法在拥有者的继承树...

是否现在使得事件会被该Observable触发并调用 this.getBubbleTarget()方法在拥有者的继承树中冒泡。Observable的基础类中没有该方法的实现。

该方法一般被Ext.Components用来冒泡事件到拥有者的容器。参看Ext.Component.getBubbleTarget默认的实现 在Ext.Component中返回组件的直接拥有者。但是如果需要的是一个已知的目标，该方法可以被重写来更快的访问需求的目标。

例子:

Ext.override(Ext.form.Field, {
    // 添加方法到Field的initComponent上改变事件为冒泡
    initComponent : Ext.form.Field.prototype.initComponent.createSequence(function() {
        this.enableBubble('change');
    }),

    // 我们知道我们想让Field的事件冒泡到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() {
            // 如果样式被修改标题会变红。
            myForm.header.setStyle('color', 'red');
        }
    }
});
参数:
  • events : String/Array
    冒泡的事件名，或事件名数组
返回值:
  • void
Observable
findParentBy ( Function fn ) : Ext.Container
通过自定义的函数查找当前组件上层任何层次上的容器...
通过自定义的函数查找当前组件上层任何层次上的容器。 如果传递的函数返回true，容器对象将被返回。
参数:
  • fn : Function
    自定义的函数，使用如下参数调用(container,this component)。
返回值:
  • Ext.Container
    自定义函数返回true的第一个容器
Component
findParentByType ( String/Class xtype ) : Ext.Container
通过xtype或者class查找当前组件上层任何层次上的容器
通过xtype或者class查找当前组件上层任何层次上的容器
参数:
  • xtype : String/Class
    组件的xtype字符串，或者直接是组件的class
返回值:
  • Ext.Container
    符合指定xtype或者class的第一个容器
Component
fireEvent( String eventName, Object... args ) : Boolean
用传入的参数触发指定的事件 (减去事件名)。 一个事件可以被设置为冒泡 Obse...

用传入的参数触发指定的事件 (减去事件名)。

一个事件可以被设置为冒泡到Observable父类继承树(参看 Ext.Component.getBubbleTarget) 调用enableBubble实现。

参数:
  • eventName : String
    触发的事件名。
  • args : Object...
    传递给处理器的可变长度参数。
返回值:
  • Boolean
    如果有任何的处理器返回false则返回false，否则返回true。
Observable
focus ( [ Boolean selectText ], [ Boolean/Number delay ] ) : Ext.Component
尝试将当前组件设为焦点。
尝试将当前组件设为焦点。
参数:
  • selectText : Boolean
    (可选) 如果可用，同时选中组件内部的文本
  • delay : Boolean/Number
    (可选)将当前组件设置为焦点的延迟时间(设置为true等于0毫秒)
返回值:
  • Ext.Component
    this
Component
getBox ( [ Boolean local ] ) : Object
获取组件底层元素当前盒子模型的尺寸。（译者注：盒子模型是CSS术语，详细解释请自行搜索。）
获取组件底层元素当前盒子模型的尺寸。（译者注：盒子模型是CSS术语，详细解释请自行搜索。）
参数:
  • local : Boolean
    (可选)值为true时，组件的left值和top值将代替页面的XY被返回。(默认值为false)
返回值:
  • Object
    返回值的格式{x, y, width, height}
BoxComponent
getBubbleTarget () : Ext.Container
为Observable的fireEvent方法提供链接，它沿着继承结构进行冒泡操作。
为Observable的fireEvent方法提供链接，它沿着继承结构进行冒泡操作。
参数:
  • 无。
返回值:
  • Ext.Container
    拥有当前组件的容器。
Component
getEl () : Ext.Element
返回 Ext.Element ，它包装了当前组件。...

返回 Ext.Element ，它包装了当前组件。

通常情况下，这将是一个<DIV>元素，它是由该类的onRender方法创建的， 但是可以使用autoEl配置项 覆盖它。

注意: 此元素将会一直处于无效状态直到当前组件渲染完成。

如需向当前组件的 DOM事件(而不是当前组件自己的Observable事件)添加监听器， 更多建议，参见 listeners 配置项，或者直接使用一个render监听器:

new Ext.Panel({
    title: 'The Clickable Panel',
    listeners: {
        render: function(p) {
            // Append the Panel to the click handler's argument list.
            p.getEl().on('click', handlePanelClick.createDelegate(null, [p], true));
        },
        single: true  // Remove the listener after first invocation
    }
});
参数:
  • 无。
返回值:
  • Ext.Element
    包装当前组件的元素。
Component
getHeight () : Number
获取该组件的当前高度值。
获取该组件的当前高度值。
参数:
  • 无。
返回值:
  • Number
BoxComponent
getId () : String
返回当前组件的id，如果没有定义id，则自动生成并返回一个id:'ext-comp-'...
返回当前组件的 id 如果没有定义 id 则自动生成并返回一个 id

'ext-comp-' + (++Ext.Component.AUTO_ID)
参数:
  • 无。
返回值:
  • String
    id
Component
getItemId () : String
返回当前组件的 itemId 。 如果没有通过配置参数指定 itemId 那么，将会使用...
返回当前组件的 itemId 。 如果没有通过配置参数指定 itemId 那么，将会使用 getId 返回 id 。
参数:
  • 无。
返回值:
  • String
Component
getOuterSize () : Object
获取当前组件所在元素的尺寸大小，包括边缘的空白处。
获取当前组件所在元素的尺寸大小，包括边缘的空白处。
参数:
  • 无。
返回值:
  • Object
    一个包含元素大小的对象 {width: (element width + left/right margins), height: (element height + top/bottom margins)}
BoxComponent
getPosition ( [ Boolean local ] ) : Array
获取组件底层元素当前的XY位置。
获取组件底层元素当前的XY位置。
参数:
  • local : Boolean
    (可选)如果为true，将返回元素的left和top值，而不是相对于页面内的 XY。(默认值为 false)
返回值:
  • Array
    元素的XY位置值(例如：[100, 200])
BoxComponent
getPressed ( String group ) : Button
获得一组中按下的按钮或者null
获得一组中按下的按钮或者null
参数:
  • group : String
返回值:
  • Button
Button
getResizeEl () : Ext.Element
返回该组件的最外层用来定义这些组件整体大小的Element...

返回该组件的最外层用来定义这些组件整体大小的Element对象。

通常用 getEl 方法将会返回相同的Element对象，但在有些情况下，组件可能有一些更多的封装了它的主要动态Element对象的Element对象。

例如ComboBox。它是封装在一个包含<input>元素的包装元素里(这将返回其 getEl方法和触发按钮的元素)。返回的元素为resizeEl。

参数:
  • 无。
返回值:
  • Ext.Element
    The Element which is to be resized by size managing layouts.
BoxComponent
getSize () : Object
获取组件底层元素当前的大小。
获取组件底层元素当前的大小。
参数:
  • 无。
返回值:
  • Object
    一个包含元素大小的对象{width: (element width), height: (element height)}
BoxComponent
getTemplateArgs () : Array
这个方法返回一个数组，用于为Template提供替代参数从而建立按钮的DOM...

这个方法返回一个数组，用于为Template提供替代参数从而建立按钮的DOM的框架。

采用不同的模板来建立不同的DOM结构的实例或者子类可能需要指定此方法。

为创建一个template，该函数返回一个数组，包含如下几项：

  • The <button>'s type
  • CSS类名，用于按钮主 <tbody> 元素，指定按钮大小排列位置。
  • 用于指定箭头位置和显示的CSS类。 ( 'x-btn-arrow' or 'x-btn-arrow-bottom' or '' )
  • cls CSS类名，用于按钮的容器<table> 元素。
  • 组件id，应用于按钮的容器<table> 元素。
参数:
  • 无。
返回值:
  • Array
    模板的替换数据。
Button
getText () : String
获取此按钮的文本
Gets the text for this Button
参数:
  • 无。
返回值:
  • String
    The button text
Button
getWidth () : Number
获取该组件的当前宽度值。
获取该组件的当前宽度值。
参数:
  • 无。
返回值:
  • Number
BoxComponent
getXType () : String
获取当前组件的xtype，它是用 Ext.ComponentMgr 注册的。 所有可用的xtype列表，参见...
获取当前组件的xtype，它是用 Ext.ComponentMgr 注册的。 所有可用的xtype列表，参见 Ext.Component 类头部。示例用法:

var t = new Ext.form.TextField();
alert(t.getXType());  // alerts 'textfield'
参数:
  • 无。
返回值:
  • String
    The xtype
Component
getXTypes () : String
返回此组件的xtype继承树，用字符'-'分隔。 所有可用的xtype值...

返回此组件的xtype继承树，用字符'-'分隔。 所有可用的xtype值，请参见Ext.Component 类的头部。

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

示例用法:

var t = new Ext.form.TextField();
alert(t.getXTypes());  // alerts 'component/box/field/textfield'
参数:
  • 无。
返回值:
  • String
    xtype层次字符串
Component
hasListener( String eventName ) : Boolean
检测对象是否包含指定事件的任何监听器
检测对象是否包含指定事件的任何监听器
参数:
  • eventName : String
    检测的事件名
返回值:
  • Boolean
    如果事件被监听则为true，否则为false
Observable
hasVisibleMenu () : Boolean
如果按钮有一个菜单，并且它是可见的，返回true
如果按钮有一个菜单，并且它是可见的，返回true
参数:
  • 无。
返回值:
  • Boolean
Button
hide () : Ext.Component
隐藏当前组件。 监听 beforehide' 事件并且返回false 可以取消隐藏组件的操作。 在隐藏组件之后触发...
隐藏当前组件。 监听 beforehide' 事件并且返回false 可以取消隐藏组件的操作。 在隐藏组件之后触发 ' hide' 事件。 如果组件被配置成 hidden 那么此方法在内部被调用。
参数:
  • 无。
返回值:
  • Ext.Component
    this
Component
hideMenu () : void
隐藏当前按钮的菜单（如果有的话）
隐藏当前按钮的菜单（如果有的话）
参数:
  • 无。
返回值:
  • void
Button
isVisible () : Boolean
如果当前组件可见，返回true。
如果当前组件可见，返回true。
参数:
  • 无。
返回值:
  • Boolean
    如果当前组件可见，返回true，其它返回false。
Component
isXType ( String xtype , [ Boolean shallow ] ) : Boolean
Tests whether or not this Component is of a specific xtype. This can test whether this Component is descended from th...

测试此组件是否是指定的xtype。此方法既可以测试是否是指定的xtype的某个子类， 或者它是否直接是指定的xtype类(shallow=true)。

如果使用你自己的子类，必须知道组件必须注册它的xtype值。

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

示例用法:

var t = new Ext.form.TextField();
var isText = t.isXType('textfield');        // true
var isBoxSubclass = t.isXType('box');       // true, descended from BoxComponent
var isBoxInstance = t.isXType('box', true); // false, not a direct BoxComponent instance
参数:
  • xtype : String
    需要为当前组件进行检测的xtype
  • shallow : Boolean
    (可选) 如果为false，检测组件是否是xtype继承树中的某个子类（默认是这种情况）， 如果为true，只检测组件是否是指定的xtype类型。
返回值:
  • Boolean
    如果当前组件是指定xtype的子类，返回true，其它返回flase。
Component
mon ( Observable|Element item , Object|String ename , Function fn , Object scope , Object opt ) : void
向任何Observable对象(或者元素)上添加监听器，监听器将会在组件...

向任何Observable对象(或者元素)上添加监听器，监听器将会在组件销毁时被自动删除。
用法：

myGridPanel.mon(myGridPanel.getSelectionModel(), 'selectionchange', handleSelectionChange, null, {buffer: 50});

or:

myGridPanel.mon(myGridPanel.getSelectionModel(), {
    selectionchange: handleSelectionChange,
    buffer: 50
});
参数:
  • item : Observable|Element
    需要添加listener/listeners的项目。
  • ename : Object|String
    事件名，或者一个包含事件名属性的对象。
  • fn : Function
    (可选) 如果 ename 参数是一个事件名，此参数为处理函数。
  • scope : Object
    (可选)如果 ename 参数是一个事件名称，此参数是作用域 ( this 引用)，监听函数将会在此作用域中被执行。
  • opt : Object
    (可选)如果 ename 参数是一个事件名称， 此参数是 addListener 配置项。
返回值:
  • void
Component
mun ( Observable|Element item , Object|String ename , Function fn , Object scope ) : void
删除通过mon 方法添加的监听器。
删除通过mon 方法添加的监听器。
参数:
  • item : Observable|Element
    需要删除listener/listeners的项目。
  • ename : Object|String
    事件名称，或者一个包含事件名称属性的对象。
  • fn : Function
    (可选)如果 ename 参数是一个事件名称，此参数是一个处理函数。
  • scope : Object
    (可选)如果 ename 参数是一个事件名称，此参数是作用域 ( this 引用)，监听函数将会在此作用域中被执行。
返回值:
  • void
Component
nextSibling () : Ext.Component
返回所属容器中的下一个组件
返回所属容器中的下一个组件
参数:
  • 无。
返回值:
  • Ext.Component
Component
on( String eventName, Function handler, [Object scope], [Object options] ) : void
给对象添加事件处理器 (addListener的简写形式)
给对象添加事件处理器 (addListener的简写形式。)
参数:
  • eventName : String
    监听的事件类型
  • handler : Function
    事件调用的方法
  • scope : Object
    （可选）处理方法执行时的作用域 (this 的引用)。 如果被忽略。默认为触发事件的对象。
  • options : Object
    可选 包含处理器配置的对象。
返回值:
  • void
Observable
previousSibling () : Ext.Component
返回所属容器中的前一个组件
返回所属容器中的前一个组件
参数:
  • 无。
返回值:
  • Ext.Component
Component
purgeListeners() : void
移除对象上所有的监听器
移除对象上所有的监听器
参数:
  • 无。
返回值:
  • void
Observable
relayEvents( Object o, Array events ) : void
从指定的Observable上传递选择的事件就好像被当前对象触发一样。
从指定的Observable上传递选择的事件就好像被当前对象触发一样。
参数:
  • o : Object
    该Observable上的事件被当前对象传递。
  • events : Array
    传递的数组名。
返回值:
  • void
Observable
removeClass ( string cls ) : Ext.Component
从组件底层的元素上删除一个CSS类。
从组件底层的元素上删除一个CSS类。
参数:
  • cls : string
    需要移除的CSS类名
返回值:
  • Ext.Component
    this
Component
removeListener( String eventName, Function handler, [Object scope] ) : void
删除一个事件处理器。
删除一个事件处理器。
参数:
  • eventName : String
    处理器关联的事件类型。
  • handler : Function
    移除的处理器。 这应该是传递到addListener里的方法的引用。
  • scope : Object
    （可选）处理器指定的初始作用域。
返回值:
  • void
Observable
render ( [ Element/HTMLElement/String container ], [ String/Number position ] ) : void
在传递进来的HTML元素中渲染当前组件。...

在传递进来的HTML元素中渲染当前组件。

如果你正在使用一个Container 对象放置当前组件，那么请不要使用render方法。

当容器第一次被渲染时，它的子组件将会被容器的 layout 管理器渲染。

某些布局管理器允许动态添加子组件。它们包括 Ext.layout.CardLayout, Ext.layout.AnchorLayout, Ext.layout.FormLayout, Ext.layout.TableLayout。

当一个新的子组件被添加时，如果容器已经被渲染了， 你可能需要调用容器的 doLayout 方法来刷新视图，它将导致所有没有被渲染的子组件进行渲染操作。 此操作是必须的，这样你可以添加多个子组件而只刷新一次layout。

当创建复杂的UI时，非常重要的一点是，请记住调整子项目的尺寸和位置是容器的 layout 管理器的职责。 如果你希望子项目的尺寸对用户交互作出反应， 你必须为容器配置一个布局管理器，它将创建和管理你心里想要的那种布局。

忽略容器的layout 配置意味着将会使用一个基本的布局管理器，它除了按次序把子组件 渲染到容器中之外什么事情都不做。 这种情况下，任何尺寸和位置的调整操作都不会发生。

参数:
  • container : Element/HTMLElement/String
    (可选) 需要在其中渲染当前组件的元素。 如果它是从一个已存在的标签中创建的，此参数应该被忽略。
  • position : String/Number
    (可选) 容器中的一个元素ID或者一个DOM节点索引， 当前组件将会被插入到它前面 (默认append到容器的尾部)
返回值:
  • void
Component
resumeEvents() : void
重新开始触发事件。(参见suspendEvents) 如果事件以queueSuspended参数被挂起，则在事件被挂起时 ...
重新开始触发事件。(参见 suspendEvents) 如果事件以queueSuspended 参数被挂起，则在事件被挂起时触发的事件会被传递到所有的监听器上
参数:
  • 无。
返回值:
  • void
Observable
setArrowHandler ( Function handler , [ Object scope ] ) : void
设置按钮箭头的点击处理方法。
设置按钮箭头的点击处理方法。
参数:
  • handler : Function
    当箭头点击时调用的函数
  • scope : Object
    (可选)上面传递的函数的作用域
返回值:
  • void
SplitButton
setAutoScroll ( Boolean scroll ) : Ext.BoxComponent
设置该组件内容溢出时是否自动显示滚动条。
设置该组件内容溢出时是否自动显示滚动条。
参数:
  • scroll : Boolean
    值为true的话组件自动显示滚动条。
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setDisabled ( Boolean disabled ) : Ext.Component
工具函数，使用布尔值设置有效/无效(disabled/enabled )。
工具函数，使用布尔值设置有效/无效(disabled/enabled )。
参数:
  • disabled : Boolean
返回值:
  • Ext.Component
    this
Component
setHandler ( Function handler , [ Object scope ] ) : Ext.Button
指定按钮的点击处理器
指定按钮的点击处理器
参数:
  • handler : Function
    当按钮被点击时调用的函数
  • scope : Object
    可选 处理函数执行时的作用域( this 引用) 默认为按钮本身。
返回值:
  • Ext.Button
    this
Button
setHeight ( Mixed height ) : Ext.BoxComponent
设置此组件的高度。该方法将触发resize事件。
设置此组件的高度。该方法将触发resize事件。
参数:
  • height : Mixed
    The new height to set.
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setIcon ( String icon ) : Ext.Button
设置按钮的背景图片，这个方法还会改变...
设置按钮的背景图片，这个方法还会改变icon的值。
参数:
  • icon : String
    图片路径
返回值:
  • Ext.Button
    this
Button
setIconClass ( String cls ) : Ext.Button
设置一个CSS类，提供一个背景图片，它将被用作按钮的图标。 此方法同时在内部改变 iconCls 配置项的值。
设置一个CSS类，提供一个背景图片，它将被用作按钮的图标。 此方法同时在内部改变 iconCls 配置项的值。
参数:
  • cls : String
    提供图标图片的CSS类
返回值:
  • Ext.Button
    this
Button
setPagePosition ( Number x , Number y ) : Ext.BoxComponent
设置组件在页面中的XY位置。 如果需要设置left和top值 ，请使用...
设置组件在页面中的XY位置。 如果需要设置left和top值 ，请使用setPosition方法。 该方法触发move事件。
参数:
  • x : Number
    The new x position
  • y : Number
    The new y position
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setPosition ( Number left , Number top ) : Ext.BoxComponent
设置组件的left和top值。设置组件的页面XY值，请使用setPagePosition方法。该方法触发...
设置组件的left和top值。设置组件的页面XY值，请使用setPagePosition方法。该方法触发move事件。
参数:
  • left : Number
    The new left
  • top : Number
    The new top
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setSize ( Mixed width , Mixed height ) : Ext.BoxComponent
设置BoxComponent的宽度和高度。 此方法触发resize事件...
设置BoxComponent的宽度和高度。 此方法触发resize事件。此方法可以接收单独的width或者height值作为参数， 或者你可以传递像这样的一个size对象： {width:10, height:20} 。
参数:
  • width : Mixed
    设置的新的width值。这可以是：
    • 一个Number类型指定Element新的宽度 Ext.Element.defaultUnit(默认为像素 :'px')。
    • 一个String类型用于设置width的CSS样式。
    • 一个size对象格式为 {width: widthValue, height: heightValue} 。
    • 值为 undefined 时，保留原来的width不变。
  • height : Mixed
    设置的新的height值(如果第一个参数传递了一个size对象，此参数没有必要传递)。这可以是：
    • 一个Number类型指定Element新的高度 Ext.Element.defaultUnit(默认为像素 :'px')。
    • 一个String类型用于设置height的CSS样式。也有可能不会被使用到。
    • 值为 undefined 时，保留原来的height不变。
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setText ( String text ) : Ext.Button
设置按钮的文本
Sets this Button's text
参数:
  • text : String
    按钮文本
返回值:
  • Ext.Button
    this
Button
setTooltip ( String/Object tooltip. ) : Ext.Button
设置这个按钮的提示信息。
Sets the tooltip for this Button.
参数:
  • tooltip. : String/Object
    This may be:
    • String : 按照innerHTML（接受html标签）显示的字符串。
    • Object : Ext.QuickTips.register的配置对象。
返回值:
  • Ext.Button
    this
Button
setVisible ( Boolean visible ) : Ext.Component
工具方法，通过使用布尔值隐藏或者显示当前组件。
工具方法，通过使用布尔值隐藏或者显示当前组件。
参数:
  • visible : Boolean
    true时显示，false时隐藏
返回值:
  • Ext.Component
    this
Component
setWidth ( Mixed width ) : Ext.BoxComponent
设置组件的宽度。 此方法触发resize事件。
设置组件的宽度。 此方法触发resize事件。
参数:
  • width : Mixed
    The new width to set.
返回值:
  • Ext.BoxComponent
    this
BoxComponent
show () : Ext.Component
显示当前组件。监听' beforeshow' 事件，返回 false 取消显示组件...
显示当前组件。监听' beforeshow' 事件，返回 false 取消显示组件。在显示组件之后触发' show' 事件。
参数:
  • 无。
返回值:
  • Ext.Component
    this
Component
showMenu () : void
显示当前按钮的菜单（如果有的话）
显示当前按钮的菜单（如果有的话）
参数:
  • 无。
返回值:
  • void
Button
suspendEvents( Boolean queueSuspended ) : void
暂停触发所有的事件。 (参看resumeEvents)
暂停触发所有的事件。（参看 resumeEvents)
参数:
  • queueSuspended : Boolean
    如果传递为true则排列好暂停的事件使得在调用 resumeEvents 后再触发它们，而不是抛弃所有暂停的事件。
返回值:
  • void
Observable
syncSize () : Ext.BoxComponent
强制组件的大小按照此组件底层元素当前的高度和宽度计算。
强制组件的大小按照此组件底层元素当前的高度和宽度计算。
参数:
  • 无。
返回值:
  • Ext.BoxComponent
    this
BoxComponent
toggle ( [ Boolean state ], [ Boolean supressEvent ] ) : Ext.Button
如果传递了一个状态，它将成为按钮当前的按下状态，除非当前的状态被固定了。
如果传递了一个状态，它将成为按钮当前的按下状态，除非当前的状态被固定了。
参数:
  • state : Boolean
    可选 强制设为一个指定的状态
  • supressEvent : Boolean
    可选 如果为true，在调用这个方法时将阻止事件触发。
返回值:
  • Ext.Button
    this
Button
un( String eventName, Function handler, [Object scope] ) : void
删除一个事件处理器(removeListener方法的简写形式)
删除一个事件处理器(removeListener方法的简写形式。)
参数:
  • eventName : String
    处理器关联的事件类型
  • handler : Function
    被删除的处理器 这应该是传入 addListener 中的方法的引用。
  • scope : Object
    （可选）为处理器指定的初始作用域。
返回值:
  • void
Observable
update ( Mixed htmlOrData , [ Boolean loadScripts ], [ Function callback ] ) : void
刷新组件的内部区域。
刷新组件的内部区域。
参数:
  • htmlOrData : Mixed
    如果已经通过tpl为当前组件配置了一个模板，那么 将会使用此参数来装配模板。 如果没有为当前组件配置模板，组件的内容区域将会通过Ext.Element 进行刷新。
  • loadScripts : Boolean
    (可选)只用在使用html配置时此参数才合法。默认为false。
  • callback : Function
    (可选)只用在使用html配置时此参数才合法。 当脚本加载完成时回调函数才被执行。
返回值:
  • void
Component
updateBox ( Object box ) : Ext.BoxComponent
设置此组件底层元素的盒子模型尺寸。(译者注：盒子模型是CSS术语，详细资料请自行搜索。)
设置此组件底层元素的盒子模型尺寸。(译者注：盒子模型是CSS术语，详细资料请自行搜索。)
参数:
  • box : Object
    一个格式为{x, y, width, height}的对象
返回值:
  • Ext.BoxComponent
    this
BoxComponent

公共事件

Event Defined By
added : ( Ext.Component this , Ext.Container ownerCt , number index )
当一个组件被添加到一个Ext.Container时触发
当一个组件被添加到一个Ext.Container时触发
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • ownerCt : Ext.Container
    用于组件的容器
  • index : number
    添加组件的位置
Component
afterrender : ( Ext.Component this )
在组件渲染完成之后触发...

在组件渲染完成之后触发。

afterrender事件在当前组件被rendered 结束之后、在为组件定义的所有afterRender方法执行之后 触发，并且，如果有stateful， 也在状态被保存之后才触发。

监听器将会以如下参数格式被调用:
  • this : Ext.Component
Component
arrowclick : ( MenuButton this , EventObject e )
当按钮上的箭头被点击时触发
当按钮上的箭头被点击时触发
监听器将会以如下的参数格式调用:
  • this : MenuButton
  • e : EventObject
    点击事件
SplitButton
beforedestroy : ( Ext.Component this )
在组件 destroyed 之前触发。 在事件监听器中返回false以停止 destroy 操作。
在组件 destroyed 之前触发。 在事件监听器中返回false以停止 destroy 操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforehide : ( Ext.Component this )
在调用hide方法隐藏组件之前触发。 在事件监听器中返回false可以停止隐藏操作。
在调用hide方法隐藏组件之前触发。 在事件监听器中返回false可以停止隐藏操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforerender : ( Ext.Component this )
在组件被rendered 之前触发。 在事件监听器中返回false可以停止render 操作。
在组件被rendered 之前触发。 在事件监听器中返回false可以停止render 操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforeshow : ( Ext.Component this )
在调用show()方法现实组件之前触发。 事件处理函数返回false可以停止show。
在调用show 方法现实组件之前触发。 事件处理函数返回false可以停止show。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforestaterestore : ( Ext.Component this , Object state )
在组件状态恢复之前触发。返回false停止恢复状态操作。
在组件状态恢复之前触发。返回false停止恢复状态操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    StateProvider返回的状态哈希值。 如果没有禁止此事件，那么状态对象会被传递给applyState。 默认情况下，这样简单地把属性值拷贝到当前组件中。 可以覆盖此方法以提供自定的状态恢复操作。
Component
beforestatesave : ( Ext.Component this , Object state )
在组件状态被保存到配置的状态提供者之前触发。 返回false可以停止保存。
在组件状态被保存到配置的状态提供者之前触发。 返回false可以停止保存。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    状态值哈希。 这由在组件上调用getState() 方法决定。 此方法必须由开发者提供，返回是否需要对状态进行描述，默认情况下， Ext.Component有一个空实现。
Component
click : ( Button this , EventObject e )
当按钮被点击时触发
当按钮被点击时触发
监听器将会以如下的参数格式调用:
  • this : Button
  • e : EventObject
    点击事件
Button
destroy : ( Ext.Component this )
在组件被销毁之后触发。
在组件被destroyed之后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
disable : ( Ext.Component this )
在组件被设置为无效状态后触发。
在组件被设置为无效状态后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
enable : ( Ext.Component this )
当组件被设置为有效(enabled)之后触发。
当组件被设置为有效(enabled)之后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
hide : ( Ext.Component this )
在组件被隐藏之后触发。 当调用hide 方法隐藏组件之后触发。
在组件被隐藏之后触发。 当调用hide 方法隐藏组件之后触发。
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
menuhide : ( Button this , Menu menu )
如果按钮有菜单，这个事件在它隐藏时触发。
如果按钮有菜单，这个事件在它隐藏时触发。
监听函数传递如下参数：
  • this : Button
  • menu : Menu
Button
menushow : ( Button this , Menu menu )
如果当前按钮有一个菜单，当显示此菜单时触发此事件。
如果当前按钮有一个菜单，当显示此菜单时触发此事件。
监听器将会以如下的参数格式调用:
  • this : Button
  • menu : Menu
Button
menutriggerout : ( Button this , Menu menu , EventObject e )
如果当前按钮有一个菜单，当鼠标离开菜单触发元素范围时触发此事件。
如果当前按钮有一个菜单，当鼠标离开菜单触发元素范围时触发此事件。
监听器将会以如下的参数格式调用:
  • this : Button
  • menu : Menu
  • e : EventObject
Button
menutriggerover : ( Button this , Menu menu , EventObject e )
如果当前按钮有一个菜单，当鼠标进入菜单触发元素范围时触发此事件。
如果当前按钮有一个菜单，当鼠标进入菜单触发元素范围时触发此事件。
监听器将会以如下的参数格式调用:
  • this : Button
  • menu : Menu
  • e : EventObject
Button
mouseout : ( Button this , Event e )
当鼠标离开按钮时触发
当鼠标离开按钮时触发
监听器将会以如下的参数格式调用:
  • this : Button
  • e : Event
    事件对象
Button
mouseover : ( Button this , Event e )
当鼠标滑过按钮时触发
当鼠标滑过按钮时触发
监听器将会以如下的参数格式调用:
  • this : Button
  • e : Event
    事件对象
Button
move : ( Ext.Component this , Number x , Number y )
在组件移动之后触发。
在组件移动之后触发。
监听器将会用如下的参数格式来调用:
  • this : Ext.Component
  • x : Number
    The new x position
  • y : Number
    The new y position
BoxComponent
removed : ( Ext.Component this , Ext.Container ownerCt )
当一个组件被从Ext.Container容器中删除时触发
当一个组件被从Ext.Container容器中删除时触发
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • ownerCt : Ext.Container
    持有组件的容器
Component
render : ( Ext.Component this )
在组件被渲染之后触发。
在组件被 rendered(渲染) 之后触发。
监听器将以如下的参数格式被调用:
  • this : Ext.Component
Component
resize : ( Ext.Component this , Number adjWidth , Number adjHeight , Number rawWidth , Number rawHeight )
在组件被调整大小之后触发。
在组件被调整大小之后触发。
监听器将以如下的参数格式被调用:
  • this : Ext.Component
  • adjWidth : Number
    这是width调整后的值
  • adjHeight : Number
    这是height调整后的值
  • rawWidth : Number
    这是width原来的值
  • rawHeight : Number
    这是height原来的值
BoxComponent
show : ( Ext.Component this )
在调用show 方法显示组件之后触发。
在调用show 方法显示组件之后触发。
监听器将会用如下的参数格式被调用:
  • this : Ext.Component
Component
staterestore : ( Ext.Component this , Object state )
组件状态被存储之后触发。
组件状态被存储之后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    StateProvider返回的状态哈希值。 如果没有禁止此事件，那么状态对象会被传递给applyState。 默认情况下，这样简单地把属性值拷贝到当前组件中。 可以覆盖此方法以提供自定的状态恢复操作。
Component
statesave : ( Ext.Component this , Object state )
在组件状态被保存到所配置的状态提供者之后触发。
在组件状态被保存到所配置的状态提供者之后触发。
监听器将会用如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    状态值hash。 这是由在足见上调用getState() 方法决定的。 开发者必须提供此方法以返回是否需要恢复状态，默认情况下， Ext.Component有一个空实现。
Component
toggle : ( Button this , Boolean pressed )
当‘pressed’状态发生变化时触发（当enableToggle = true）
当‘pressed’状态发生变化时触发（当enableToggle = true）
监听函数被调用时传递以下参数:
  • this : Button
  • pressed : Boolean
Button


Provider
    CookieProvider

Class Ext.state.CookieProvider

包: | Ext.state
定义类的文件: | CookieProvider.js
类: | CookieProvider
继承自: | Provider
Provider的默认实现，通过cookies保存状态。
用法:
var cp = new Ext.state.CookieProvider({
       path: "/cgi-bin/",
       expires: new Date(new Date().getTime()+(1000*60*60*24*30)), //30 days
       domain: "extjs.com"
   });
   Ext.state.Manager.setProvider(cp);

配置项

Config Options |  | Defined By
 | domain : String 保存cookie的域名。 注意，你不能指定一个与你所在的页面不同的域名... 保存cookie的域名。 注意，你不能指定一个与你所在的页面不同的域名， 但是你可以指定一个子域名，或者页面所在域名本身，例如'extjs.com'， 以包含所有需要通过cookies访问的不同子域(默认值为 null， 它使用当前正在运行的页面的域名 包含'www'字符，例如'www.extjs.com') | CookieProvider
 | expires : Date cookie失效日期(默认值为 7 天以后) | CookieProvider
 | path : String 设置激活cookie的路径 (默认值为 root '/'将激为此站点的所有页面激活cookie) | CookieProvider
 | secure : Boolean 如果站点使用SSL，为true(默认值为 false) | CookieProvider

公共属性

Property |  | Defined By
 | : Object 由extjs.com论坛mystix编译的列表，谢谢Mystix！ | Provider
 | Slovak : Object 由extjs.com论坛mystix编译的列表，谢谢Mystix！ | Provider
 | indicatorText : Object 2007年四月25日由Matja?(UTF-8编码)做的斯洛文尼亚翻译。 | Provider

公共方法

Method Defined By
CookieProvider ( Object config )
创建一个新的CookieProvider
创建一个新的CookieProvider
参数:
  • config : Object
    配置对象
返回值:
  • void
CookieProvider
clear ( String name ) : void
从状态中清除一个值
从状态中清除一个值
参数:
  • name : String
    key的名称
返回值:
  • void
Provider
decodeValue ( String value ) : Mixed
对先前使用 encodeValue 编码的一个字符串进行解码。
对先前使用 encodeValue编码的一个字符串进行解码。
参数:
  • value : String
    要解码的值
返回值:
  • Mixed
    解码后的值
Provider
encodeValue ( Mixed value ) : String
编码一个值，包含类型信息。 使用 decodeValue可以解码。
编码一个值，包含类型信息。使用 decodeValue可以解码。
参数:
  • value : Mixed
    要编码的值
返回值:
  • String
    编码后的值
Provider
get ( String name , Mixed defaultValue ) : Mixed
返回一个key的当前值
返回一个key的当前值
参数:
  • name : String
    key的名称
  • defaultValue : Mixed
    当key对应的值没找到时返回的默认值
返回值:
  • Mixed
    该状态值
Provider
set ( String name , Mixed value ) : void
为一个key设置一个值
为一个key设置一个值
参数:
  • name : String
    key的名称
  • value : Mixed
    要设置的值
返回值:
  • void
Provider

公共事件

Event Defined By
statechange : ( Provider this , String key , String value )
当状态发生改变时触发。
当状态发生改变时触发。
Listeners will be 监听器将会以如下的参数格式调用:
  • this : Provider
    该状态提供者
  • key : String
    被修改的状态的key
  • value : String
    该状态的编码后的值
Provider


Class Ext.state.Manager

包: | Ext.state
定义类的文件: | StateManager.js
类: | Manager
继承自: | Object
这是一个全局状态管理器。 默认情况下，如果你不传递一个特定的状态提供者(state provider)， 所有具有状态的组件将检测此类以获取状态信息。 为了让该类能起作用，必须在你的应用初始化时初始化此类并提供一个状态提供者(provider)。
示例用法:
// in your initialization function
init : function(){
   Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
   var win = new Window(...);
   win.restoreState();
}

这是一个单例的类，不能直接实例化。

公共属性

该类没有公共属性。

公共方法

Method Defined By
clear ( String name ) : void
从状态中清除一个值
从状态中清除一个值
参数:
  • name : String
    key名
返回值:
  • void
Manager
get ( String name , Mixed defaultValue ) : Mixed
根据指定的key返回当前的值
根据指定的key返回当前的值
参数:
  • name : String
    key名
  • defaultValue : Mixed
    如果没有找到key所匹配的值时返回的默认值
返回值:
  • Mixed
    状态数据
Manager
getProvider () : Provider
获取当前配置的状态提供者 （state provider）
获取当前配置的状态提供者 （state provider）
参数:
  • 无。
返回值:
  • Provider
    状态提供者 （state provider）
Manager
set ( String name , Mixed value ) : void
为一个key设置值
为一个key设置值
参数:
  • name : String
    key名
  • value : Mixed
    状态数据
返回值:
  • void
Manager
setProvider ( Provider stateProvider ) : void
为你的应用配置默认的状态提供者(state provider)
为你的应用配置默认的状态提供者(state provider)
参数:
  • stateProvider : Provider
    需要设置的状态提供者(state provider)
返回值:
  • void
Manager

公共事件

该类没有公共事件。


Class Ext.state.Provider

包: | Ext.state
定义类的文件: | Provider.js
类: | Provider
子类: | CookieProvider
继承自: | Object
为状态提供者(state provider)的实现提供抽象基类。该类提供对有类型的变量包括日期进行编码和解码的功能,并定义了Provider接口。

公共属性

Property |  | Defined By
 | : Object 由extjs.com论坛mystix编译的列表，谢谢Mystix！ | Provider
 | Slovak : Object 由extjs.com论坛mystix编译的列表，谢谢Mystix！ | Provider
 | indicatorText : Object 2007年四月25日由Matja?(UTF-8编码)做的斯洛文尼亚翻译。 | Provider
 | indicatorText : Object 2007年四月25日由Matja?(UTF-8编码)做的斯洛文尼亚翻译。 | Provider
 | indicatorText : Object 2007年四月25日由Matja?(UTF-8编码)做的斯洛文尼亚翻译。 | Provider
 | indicatorText : Object 2007年四月25日由Matja?(UTF-8编码)做的斯洛文尼亚翻译。 | Provider
 | indicatorText : Object 2007年四月25日由Matja?(UTF-8编码)做的斯洛文尼亚翻译。 | Provider
 | indicatorText : Object 2007年四月25日由Matja?(UTF-8编码)做的斯洛文尼亚翻译。 | Provider
 | indicatorText : Object 2007年四月25日由Matja?(UTF-8编码)做的斯洛文尼亚翻译。 | Provider
 | indicatorText : Object 2007年四月25日由Matja?(UTF-8编码)做的斯洛文尼亚翻译。 | Provider
 | indicatorText : Object 2007年四月25日由Matja?(UTF-8编码)做的斯洛文尼亚翻译。 | Provider
 | indicatorText : Object 2007年四月25日由Matja?(UTF-8编码)做的斯洛文尼亚翻译。 | Provider
 | indicatorText : Object 2007年四月25日由Matja?(UTF-8编码)做的斯洛文尼亚翻译。 | Provider
 | indicatorText : Object 2007年四月25日由Matja?(UTF-8编码)做的斯洛文尼亚翻译。 | Provider
 | indicatorText : Object 2007年四月25日由Matja?(UTF-8编码)做的斯洛文尼亚翻译。 | Provider
 | indicatorText : Object 2007年四月25日由Matja?(UTF-8编码)做的斯洛文尼亚翻译。 | Provider
 | indicatorText : Object 2007年四月25日由Matja?(UTF-8编码)做的斯洛文尼亚翻译。 | Provider
 | indicatorText : Object 2007年四月25日由Matja?(UTF-8编码)做的斯洛文尼亚翻译。 | Provider
 | indicatorText : Object 2007年四月25日由Matja?(UTF-8编码)做的斯洛文尼亚翻译。 | Provider
 | indicatorText : Object 2007年四月25日由Matja?(UTF-8编码)做的斯洛文尼亚翻译。 | Provider
 | indicatorText : Object 2007年四月25日由Matja?(UTF-8编码)做的斯洛文尼亚翻译。 | Provider
 | indicatorText : Object 2007年四月25日由Matja?(UTF-8编码)做的斯洛文尼亚翻译。 | Provider
 | indicatorText : Object 2007年四月25日由Matja?(UTF-8编码)做的斯洛文尼亚翻译。 | Provider
 | indicatorText : Object 2007年四月25日由Matja?(UTF-8编码)做的斯洛文尼亚翻译。 | Provider
 | indicatorText : Object 2007年四月25日由Matja?(UTF-8编码)做的斯洛文尼亚翻译。 | Provider
 | indicatorText : Object 2007年四月25日由Matja?(UTF-8编码)做的斯洛文尼亚翻译。 | Provider
 | indicatorText : Object 2007年四月25日由Matja?(UTF-8编码)做的斯洛文尼亚翻译。 | Provider
 | indicatorText : Object 2007年四月25日由Matja?(UTF-8编码)做的斯洛文尼亚翻译。 | Provider

公共方法

Method Defined By
clear ( String name ) : void
从状态中清除一个值
从状态中清除一个值
参数:
  • name : String
    key的名称
返回值:
  • void
Provider
decodeValue ( String value ) : Mixed
对先前使用 encodeValue 编码的一个字符串进行解码。
对先前使用 encodeValue编码的一个字符串进行解码。
参数:
  • value : String
    要解码的值
返回值:
  • Mixed
    解码后的值
Provider
encodeValue ( Mixed value ) : String
编码一个值，包含类型信息。 使用 decodeValue可以解码。
编码一个值，包含类型信息。使用 decodeValue可以解码。
参数:
  • value : Mixed
    要编码的值
返回值:
  • String
    编码后的值
Provider
get ( String name , Mixed defaultValue ) : Mixed
返回一个key的当前值
返回一个key的当前值
参数:
  • name : String
    key的名称
  • defaultValue : Mixed
    当key对应的值没找到时返回的默认值
返回值:
  • Mixed
    该状态值
Provider
set ( String name , Mixed value ) : void
为一个key设置一个值
为一个key设置一个值
参数:
  • name : String
    key的名称
  • value : Mixed
    要设置的值
返回值:
  • void
Provider

公共事件

Event Defined By
statechange : ( Provider this , String key , String value )
当状态发生改变时触发。
当状态发生改变时触发。
Listeners will be 监听器将会以如下的参数格式调用:
  • this : Provider
    该状态提供者
  • key : String
    被修改的状态的key
  • value : String
    该状态的编码后的值
Provider


Observable
    MixedCollection
      StoreMgr

Class Ext.StoreMgr

包: | Ext
定义类的文件: | StoreMgr.js
类: | StoreMgr
继承自: | MixedCollection
默认的全局store组。

这是一个单例的类，不能直接实例化。

配置项

Config Options |  | Defined By
 | allowFunctions : Boolean 如果addAll 方法可以把函数引用添加到集合中，指定此参数为true。 默认为false。 | MixedCollection

公共属性

该类没有公共属性。

公共方法

Method Defined By
add ( String key , Object o ) : Object
向集合中添加一个项目。在完成时触发 add 事件。
向集合中添加一个项目。在完成时触发 add 事件。
参数:
  • key : String

    用来绑定项目的key，或者新项目。

    如果你为当前MixedCollection指定了一个 getKey 的实现，或者被存储项目的key不是一个叫做 id 的属性，MixedCollection能够为新项目获得key。 在这种情况下，只要在此参数中传递新项目。

  • o : Object
    需要添加的项目。
返回值:
  • Object
    被添加的项目。
MixedCollection
addAll ( Object/Array objs ) : void
把一个Array或者Object中所有元素添加到集合中。
把一个Array或者Object中所有元素添加到集合中。
参数:
  • objs : Object/Array
    一个包含属性的对象，将会被添加到集合中，或者是一个值数组，其中每个 元素都会被添加到集合中。如果 allowFunctions 被设置为true，函数引用也将被添加到集合中。
返回值:
  • void
MixedCollection
addEvents( Object|String o, string Optional. ) : void
添加指定的事件到事件列表上，事件会被该Observable触发。
添加指定的事件到事件列表上，事件会被该Observable触发。
参数:
  • o : Object|String
    以事件名作为属性true作为值的对象 或者当多个事件名被分开的传递时则为第一个事件名。
  • Optional. : string
    事件名被分开的传递时则为事件名。 用法:
    this.addEvents('storeloaded', 'storecleared');
返回值:
  • void
Observable
addListener( String eventName, Function handler, [Object scope], [Object options] ) : void
给对象添加事件处理器。
给对象添加事件处理器。
参数:
  • eventName : String
    监听的事件名。
  • handler : Function
    事件调用的方法
  • scope : Object
    （可选）处理方法执行的作用域 (this的引用 reference)。 如果被忽略。默认为触发事件的对象。
  • options : Object
    （可选）包含处理器配置和属性的对象。 可能包含以下的属性:
    • scope : Object
      处理方法执行的作用域(this的引用) 。 如果被忽略。默认为触发事件的对象。
    • delay : Number
      在触发事件后延迟调用处理器的毫秒数。
    • single : Boolean
      如果为True则添加一个处理器来处理下一次的事件触发（仅一次），然后移除自己。
    • buffer : Number
      使得处理器延迟指定毫秒数后预定的运行在 一个Ext.util.DelayedTask中 。 如果事件在时间内再一次被触发，原始的处理器不会被调用，但是新的处理器会预定的在他的位置上。
    • target : Observable
      如果事件在目标的Observable上触发则仅仅调用处理器， 否则 事件会从子类的Observable上冒泡

    组合选项
    使用这些选项参数,可能会组合出不同类型的监听器：

    一个延迟的，一次性的监听器。

    myDataView.on('click', this.onClick, this, {
single: true,
delay: 100
});

    一次调用附加多个处理器
    该方法同样支持传递一个包含指定的多个处理器的属性的配置对象参数。

    myGridPanel.on({
'click' : {
    fn: this.onClick,
    scope: this,
    delay: 100
},
'mouseover' : {
    fn: this.onMouseOver,
    scope: this
},
'mouseout' : {
    fn: this.onMouseOut,
    scope: this
}
});

    或者一个简写的语法：

    myGridPanel.on({
'click' : this.onClick,
'mouseover' : this.onMouseOver,
'mouseout' : this.onMouseOut,
 scope: this
});
返回值:
  • void
Observable
clear () : void
从集合中删除所有项目。在完成时触发 clear 事件。
从集合中删除所有项目。在完成时触发 clear 事件。
参数:
  • 无。
返回值:
  • void
MixedCollection
clone () : MixedCollection
创建当前集合的一个浅拷贝
创建当前集合的一个浅拷贝
参数:
  • 无。
返回值:
  • MixedCollection
MixedCollection
contains ( Object o ) : Boolean
如果集合的项目中包含所传递的对象，返回true。
如果集合的项目中包含所传递的对象，返回true。
参数:
  • o : Object
    需要在集合中进行查找的对象。
返回值:
  • Boolean
    如果集合的项目中包含指定对象，返回true
MixedCollection
containsKey ( String key ) : Boolean
如果集合包含所传递的对象作为一个key，返回true。
如果集合包含所传递的对象作为一个key，返回true。
参数:
  • key : String
    需要在集合中查找的key。
返回值:
  • Boolean
    如果集合的key包含此对象，返回true
MixedCollection
each ( Function fn , [ Object scope ] ) : void
在集合中的每个项目上调用一次指定的函数，传递如下参数...
在集合中的每个项目上调用一次指定的函数，传递如下参数：
  • item : Mixed

    集合中的项目

  • index : Number

    项目的索引

  • length : Number

    集合中所有项目的总数

函数应该返回一个布尔值。函数返回false将会停止迭代。
参数:
  • fn : Function
    需要在每个项目上执行的函数。
  • scope : Object
    (可选)作用域( this 引用)，函数将会其中被执行。默认为迭代过程中的当前项目。
返回值:
  • void
MixedCollection
eachKey ( Function fn , [ Object scope ] ) : void
在集合中的每个key上执行一次指定的函数，传递每个key和它绑定的项目作为...
在集合中的每个key上执行一次指定的函数，传递每个key和它绑定的项目作为 前2个参数。
参数:
  • fn : Function
    需要在每个项目上执行的函数。
  • scope : Object
    (可选)作用域( this 引用)，函数将会在其中被执行。默认为浏览器window
返回值:
  • void
MixedCollection
enableBubble( String/Array events ) :void
是否现在使得事件会被该Observable触发并调用 this.getBubbleTarget()方法在拥有者的继承树...

是否现在使得事件会被该Observable触发并调用 this.getBubbleTarget()方法在拥有者的继承树中冒泡。Observable的基础类中没有该方法的实现。

该方法一般被Ext.Components用来冒泡事件到拥有者的容器。参看Ext.Component.getBubbleTarget默认的实现 在Ext.Component中返回组件的直接拥有者。但是如果需要的是一个已知的目标，该方法可以被重写来更快的访问需求的目标。

例子:

Ext.override(Ext.form.Field, {
    // 添加方法到Field的initComponent上改变事件为冒泡
    initComponent : Ext.form.Field.prototype.initComponent.createSequence(function() {
        this.enableBubble('change');
    }),

    // 我们知道我们想让Field的事件冒泡到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() {
            // 如果样式被修改标题会变红。
            myForm.header.setStyle('color', 'red');
        }
    }
});
参数:
  • events : String/Array
    冒泡的事件名，或事件名数组
返回值:
  • void
Observable
filter ( String property , String/RegExp value , [ Boolean anyMatch ], [ Boolean caseSensitive ] ) : MixedCollection
根据指定的属性过滤集合中的objects。 返回过滤出的一个新集合。
根据指定的属性过滤集合中的objects。 返回过滤出的一个新集合。
参数:
  • property : String
    你的对象中的一个属性
  • value : String/RegExp
    要么是一个字符串，属性值以此字符串起始；或者是一个RegExp，用来测试 属性
  • anyMatch : Boolean
    (可选)True将会匹配字符串中的任意部分，而不仅仅是开始
  • caseSensitive : Boolean
    (可选)True将会在比较时对大小写敏感(默认为False)。
返回值:
  • MixedCollection
    新过滤出的集合
MixedCollection
filterBy ( Function fn , [ Object scope ] ) : MixedCollection
根据一个函数进行过滤。 返回一个过滤后的新集合。 所传递的函数将会在集合中的每个项目上进行调用...
根据一个函数进行过滤。 返回一个过滤后的新集合。 所传递的函数将会在集合中的每个项目上进行调用。 如果函数返回true，项目被包含在结果中，否则被过滤掉。
参数:
  • fn : Function
    需要被调用的函数，它将接受参数o (the object), k (the key)
  • scope : Object
    (可选)作用域( this 引用)，函数将会在其中被调用。默认为当前MixedCollection。
返回值:
  • MixedCollection
    过滤出的新集合
MixedCollection
find ( Function fn , [ Object scope ] ) : Object
返回集合中第一个元素，在此元素上调用所传递的选择函数时返回true。
返回集合中第一个元素，在此元素上调用所传递的选择函数时返回true。
参数:
  • fn : Function
    在每个项目上执行的选择函数。
  • scope : Object
    (可选)作用域( this 引用)，函数将会在其中被执行。默认为浏览器的window。
返回值:
  • Object
    集合中在调用选择函数时返回true的第一个元素。
MixedCollection
findIndex ( String property , String/RegExp value , [ Number start ], [ Boolean anyMatch ], [ Boolean caseSensitive ] ) : Number
根据指定的属性/值，在集合中查找第一个符合条件对象的索引。
根据指定的属性/值，在集合中查找第一个符合条件对象的索引。
参数:
  • property : String
    你的对象的一个属性名。
  • value : String/RegExp
    一个字符串，属性值需要以此开头；或者是一个用来对属性进行测试的RegExp。
  • start : Number
    (可选)开始搜索的起始索引(默认为0)。
  • anyMatch : Boolean
    (可选)True将会匹配字符串中的任意部分，而不仅仅是开始。
  • caseSensitive : Boolean
    (可选)True将会在比较时对大小写敏感(默认为False)。
返回值:
  • Number
    匹配到的索引，或者-1
MixedCollection
findIndexBy ( Function fn , [ Object scope ], [ Number start ] ) : Number
根据一个函数，在集合中查找第一个符合条件的对象的索引。 如果函数返回true...
根据一个函数，在集合中查找第一个符合条件的对象的索引。 如果函数返回true，项目将会被当作符合条件。
参数:
  • fn : Function
    需要调用的函数，它将接受参数o (the object), k (the key)。
  • scope : Object
    (可选)作用域( this 引用)，函数将会在其中被执行。 默认为当前MixedCollection。
  • start : Number
    (可选)查找起始索引位置(默认为0)。
返回值:
  • Number
    匹配的索引或者-1
MixedCollection
fireEvent( String eventName, Object... args ) : Boolean
用传入的参数触发指定的事件 (减去事件名)。 一个事件可以被设置为冒泡 Obse...

用传入的参数触发指定的事件 (减去事件名)。

一个事件可以被设置为冒泡到Observable父类继承树(参看 Ext.Component.getBubbleTarget) 调用enableBubble实现。

参数:
  • eventName : String
    触发的事件名。
  • args : Object...
    传递给处理器的可变长度参数。
返回值:
  • Boolean
    如果有任何的处理器返回false则返回false，否则返回true。
Observable
first () : Object
返回集合中的第一个项目。
返回集合中的第一个项目。
参数:
  • 无。
返回值:
  • Object
    集合中的第一个项目。
MixedCollection
get ( String/Number key ) : Object
此方法调用 item()。 返回绑定到所传递的key或者索引位置的项目。...
此方法调用 item()。 返回绑定到所传递的key或者索引位置的项目。 key的优先级比索引高。 这个调用key 等价，如果没有符合的项目再调用itemAt。
参数:
  • key : String/Number
    项目的key或者索引。
返回值:
  • Object
    如果找到了项目，返回此项目。如果没有找到项目， 返回<tt>undefined</tt>。 如果找到了一个项目，但是它是一个Class，返回<tt>null</tt>。
MixedCollection
getCount () : Number
返回集合中项目个数。
返回集合中项目个数。
参数:
  • 无。
返回值:
  • Number
    集合中项目的个数。
MixedCollection
getKey ( Object item ) : Object
如果你实现getKey，MixedCollection拥有一个一般的方法获取key。 默认实现简单地返回...
如果你实现getKey，MixedCollection拥有一个一般的方法获取key。 默认实现简单地返回 item.id ，但是你可以提供你自己的实现返回一个不同的值，就像如下的例子：
// 一般方法
var mc = new Ext.util.MixedCollection();
mc.add(someEl.dom.id, someEl);
mc.add(otherEl.dom.id, otherEl);
//等等

// 使用getKey
var mc = new Ext.util.MixedCollection();
mc.getKey = function(el){
   return el.dom.id;
};
mc.add(someEl);
mc.add(otherEl);

// 或者通过构造器
var mc = new Ext.util.MixedCollection(false, function(el){
   return el.dom.id;
});
mc.add(someEl);
mc.add(otherEl);
参数:
  • item : Object
    需要查找key的项目。
返回值:
  • Object
    所传递项目的key。
MixedCollection
getRange ( [ Number startIndex ], [ Number endIndex ] ) : Array
返回当前集合中一个范围中的项目
返回当前集合中一个范围中的项目
参数:
  • startIndex : Number
    (可选)其实索引。默认为0。
  • endIndex : Number
    (可选)结束索引。默认为最后一个项目。
返回值:
  • Array
    一个项目数组
MixedCollection
hasListener( String eventName ) : Boolean
检测对象是否包含指定事件的任何监听器
检测对象是否包含指定事件的任何监听器
参数:
  • eventName : String
    检测的事件名
返回值:
  • Boolean
    如果事件被监听则为true，否则为false
Observable
indexOf ( Object o ) : Number
返回所传递对象在集合中的索引位置。
返回所传递对象在集合中的索引位置。
参数:
  • o : Object
    需要查找索引的项目。
返回值:
  • Number
    项目的索引。如果没有找到返回-1。
MixedCollection
indexOfKey ( String key ) : Number
返回所传递的key在集合中的索引位置。
返回所传递的key在集合中的索引位置。
参数:
  • key : String
    需要查找索引的key。
返回值:
  • Number
    key的索引。
MixedCollection
insert ( Number index , String key , [ Object o ] ) : Object
在集合的指定索引位置插入一个项目。 在完成时触发add 事件。
在集合的指定索引位置插入一个项目。 在完成时触发add 事件。
参数:
  • index : Number
    需要插入项目的索引位置。
  • key : String
    需要绑定新项目的key，或者是项目自身。
  • o : Object
    (可选)如果第二个参数是一个key，此参数为新项目。
返回值:
  • Object
    插入的新项目。
MixedCollection
item ( String/Number key ) : Object
返回绑定到所传递的key或者index的项目。 key的优先级比index高。这与首先调用...
返回绑定到所传递的key或者index的项目。 key的优先级比index高。这与首先调用key 等价，然后如果没有项目匹配时调用 itemAt。
参数:
  • key : String/Number
    项目的key或者index
返回值:
  • Object
    如果找到了项目，返回此项目。如果没有找到项目，返回<tt>undefined</tt>。 如果找到了一个项目，但是它是一个Class，返回<tt>null</tt>。
MixedCollection
itemAt ( Number index ) : Object
返回指定索引位置处的项目。
返回指定索引位置处的项目。
参数:
  • index : Number
    项目的索引。
返回值:
  • Object
    指定索引处的项目。
MixedCollection
key ( String/Number key ) : Object
返回绑定到所传递key的项目。
返回绑定到所传递key的项目。
参数:
  • key : String/Number
    项目的key。
返回值:
  • Object
    绑定到所传递key的项目。
MixedCollection
keySort ( [ String direction ], [ Function fn ] ) : void
根据keys对当前集合进行排序。
根据keys对当前集合进行排序。
参数:
  • direction : String
    (可选)'ASC' 或者 'DESC'。默认为'ASC'。
  • fn : Function
    (可选)比较函数，定义了排序规则。默认根据大小写不敏感的字符串排序。
返回值:
  • void
MixedCollection
last () : Object
返回集合中的最后一个项目。
返回集合中的最后一个项目。
参数:
  • 无。
返回值:
  • Object
    集合中的最后一个项目。
MixedCollection
lookup ( String/Object id ) : Ext.data.Store
根据id获取一个已经注册的Store
根据id获取一个已经注册的Store
参数:
  • id : String/Object
    Store的id，或者Store的实例
返回值:
  • Ext.data.Store
StoreMgr
on( String eventName, Function handler, [Object scope], [Object options] ) : void
给对象添加事件处理器 (addListener的简写形式)
给对象添加事件处理器 (addListener的简写形式。)
参数:
  • eventName : String
    监听的事件类型
  • handler : Function
    事件调用的方法
  • scope : Object
    （可选）处理方法执行时的作用域 (this 的引用)。 如果被忽略。默认为触发事件的对象。
  • options : Object
    可选 包含处理器配置的对象。
返回值:
  • void
Observable
purgeListeners() : void
移除对象上所有的监听器
移除对象上所有的监听器
参数:
  • 无。
返回值:
  • void
Observable
register ( Ext.data.Store store1 , [ Ext.data.Store store2 ], [ Ext.data.Store etc... ] ) : void
将一个或多个Sotre注册到StoreMgr。一般情况下，你不需要手工注册store...
将一个或多个Sotre注册到StoreMgr。一般情况下，你不需要手工注册store。 任何初始化时含有Ext.data.Store.storeId 的store会被自动注册。
参数:
  • store1 : Ext.data.Store
    一个Store实例
  • store2 : Ext.data.Store
    可选
  • etc... : Ext.data.Store
    可选
返回值:
  • void
StoreMgr
relayEvents( Object o, Array events ) : void
从指定的Observable上传递选择的事件就好像被当前对象触发一样。
从指定的Observable上传递选择的事件就好像被当前对象触发一样。
参数:
  • o : Object
    该Observable上的事件被当前对象传递。
  • events : Array
    传递的数组名。
返回值:
  • void
Observable
remove ( Object o ) : Object
从集合中删除一个项目。
从集合中删除一个项目。
参数:
  • o : Object
    需要删除的项目。
返回值:
  • Object
    被删除的项目，没有项目可删除时返回false。
MixedCollection
removeAt ( Number index ) : Object
删除集合中指定索引位置的项目。在完成时触发 remove 事件。
删除集合中指定索引位置的项目。在完成时触发 remove 事件。
参数:
  • index : Number
    需要删除的项目在集合中的索引位置。
返回值:
  • Object
    被删除的项目，或者没有项目被删除时为false。
MixedCollection
removeKey ( String key ) : Object
从集合中删除一个绑定到所传递key的项目。
从集合中删除一个绑定到所传递key的项目。
参数:
  • key : String
    需要删除项目的key
返回值:
  • Object
    被删除的项目，如果没有项目被删除时为false
MixedCollection
removeListener( String eventName, Function handler, [Object scope] ) : void
删除一个事件处理器。
删除一个事件处理器。
参数:
  • eventName : String
    处理器关联的事件类型。
  • handler : Function
    移除的处理器。 这应该是传递到addListener里的方法的引用。
  • scope : Object
    （可选）处理器指定的初始作用域。
返回值:
  • void
Observable
reorder ( Object mapping ) : void
根据从旧索引到新索引的映射关系，对每个项目进行重新排序。 在内部，这仅仅被当作一次排序...
根据从旧索引到新索引的映射关系，对每个项目进行重新排序。 在内部，这仅仅被当作一次排序。无论重新排序是否发生都会触发 'sort'事件。
参数:
  • mapping : Object
    从旧项目索引到新项目索引的映射关系
返回值:
  • void
MixedCollection
replace ( String key , o {Object} ) : Object
替换集合中的一个项目。 在完成时触发 replace 事件。
替换集合中的一个项目。 在完成时触发 replace 事件。
参数:
  • key : String

    需要替换的项目所绑定的key，或者为替换项目。

    如果你为当前MixedCollection指定了一个 getKey 的实现，或者被存储项目的key不是一个叫做 id 的属性，MixedCollection能够为进行替换的项目获得key。 如果你想要替换一个拥有相同key值的项目，那么只要在此参数中传递 进行替换的项目。

  • {Object} : o
    o (可选) 如果传递的第一个参数是一个key，项目将会绑定到此key。
返回值:
  • Object
    新项目。
MixedCollection
resumeEvents() : void
重新开始触发事件。(参见suspendEvents) 如果事件以queueSuspended参数被挂起，则在事件被挂起时 ...
重新开始触发事件。(参见 suspendEvents) 如果事件以queueSuspended 参数被挂起，则在事件被挂起时触发的事件会被传递到所有的监听器上
参数:
  • 无。
返回值:
  • void
Observable
sort ( [ String direction ], [ Function fn ] ) : void
使用传递的比较函数对集合的item值进行排序。
使用传递的比较函数对集合的item值进行排序。
参数:
  • direction : String
    (可选)'ASC'或者'DESC'。默认为'ASC'。
  • fn : Function
    (可选)比较函数，定义了排序规则。默认根据数字值进行排序。
返回值:
  • void
MixedCollection
suspendEvents( Boolean queueSuspended ) : void
暂停触发所有的事件。 (参看resumeEvents)
暂停触发所有的事件。（参看 resumeEvents)
参数:
  • queueSuspended : Boolean
    如果传递为true则排列好暂停的事件使得在调用 resumeEvents 后再触发它们，而不是抛弃所有暂停的事件。
返回值:
  • void
Observable
un( String eventName, Function handler, [Object scope] ) : void
删除一个事件处理器(removeListener方法的简写形式)
删除一个事件处理器(removeListener方法的简写形式。)
参数:
  • eventName : String
    处理器关联的事件类型
  • handler : Function
    被删除的处理器 这应该是传入 addListener 中的方法的引用。
  • scope : Object
    （可选）为处理器指定的初始作用域。
返回值:
  • void
Observable
unregister ( String/Object id1 , [ String/Object id2 ], [ String/Object etc... ] ) : void
从StoreMgr注销一个或者多个Store
从StoreMgr注销一个或者多个Store
参数:
  • id1 : String/Object
    Store的id，或者Store的实例
  • id2 : String/Object
    可选
  • etc... : String/Object
    可选
返回值:
  • void
StoreMgr

公共事件

Event Defined By
add : ( Number index , Object o , String key )
当一个项目被添加到集合中时触发。
当一个项目被添加到集合中时触发。
监听器将会以如下参数格式被调用:
  • index : Number
    项目被添加的索引位置。
  • o : Object
    被添加的项目。
  • key : String
    被添加项目绑定的key
MixedCollection
clear : ()
当集合被清空时触发。
当集合被清空时触发。
监听器将会以如下参数格式被调用:
  • None.
MixedCollection
remove : ( Object o , [ String key ] )
当一个项目被从集合中删除时触发。
当一个项目被从集合中删除时触发。
监听器将会以如下参数被调用:
  • o : Object
    被删除的项目。
  • key : String
    (可选)被删除项目绑定的key
MixedCollection
replace : ( String key , Object old , Object new )
当集合中一个项目被替换时触发。
当集合中一个项目被替换时触发。
监听器将会以如下参数格式被调用:
  • key : String
    新增项目绑定的key
  • old : Object
    被替换的项目。
  • new : Object
    新项目。
MixedCollection


Observable
    Component
      BoxComponent
        Container
          Panel
            TabPanel

Class Ext.TabPanel

包: | Ext
定义类的文件: | TabPanel.js
类: | TabPanel
继承自: | Panel

一个基本的tab容器。 对于布局的目的， TabPanel可以被用作一个标准的 Ext.Panel ，但也为包含子组件提供了特殊支持( items )，它们使用 CardLayout布局管理器进行管理， 并且显示为单独的tab页。

注意: 默认情况下，tab的关闭工具销毁子tab组件及其所有子孙。 这将导致子tab组件，以及所有子孙不可用。 如需复用tab页，配置TabPanel的 autoDestroy: false .

TabPanel header/footer元素

TabPanel使用它们的 header或者 footer element (根据 tabPosition 配置项)容纳tab选择按钮。 这意为着TabPanel不会显示任何配置的title，并且不会显示任何配置的头部 tools.

如需显示一个标题栏，可以将TabPanel嵌入到一个 Panel中 ，使用 layout:'fit' .

Tab事件

并不存在实际的tab类— 每个tab都简单的为一个 Component ，例如一个 Panel. 然而，当被渲染到一个TabPanel中时，每个组件都可以触发更多事件， 它们只对tab页存在，并且对其它组件无效。 这些事件有:

  • activate : 当组件变成当前活动的tab页时触发。
  • deactivate : 当组件从活动tab页变成非活动时触发。
  • beforeclose : 当用户点击一个可关闭tab页上的关闭工具时触发。 可以从处理函数返回 false 取消关闭操作。
  • close : 当用户关闭了一个可关闭的tab页后触发。

用代码创建TabPanel

TabPanel可以通过代码创建并完成渲染，就像这个例子:

var tabs = new Ext.TabPanel({
    renderTo: Ext.getBody(),
    activeTab: 0,
    items: [{
        title: 'Tab 1',
        html: 'A simple tab'
    },{
        title: 'Tab 2',
        html: 'Another one'
    }]
});

从现有的标签创建TabPanel

也可以通过许多方法，从预先已经存在的标签创建TabPanel

  • 结构化标签

    • 可以从现有标签完全渲染一个容器div，并拥有一个或多个嵌套的tab div，CSS类为'x-tab'， (参见 autoTabs 示例)。

  • 非结构化标签

    • TabPanel也可以从没有严格结构化的标签创建， 通过id简单地指定哪些元素是容器，哪些元素是tab页。 使用此方法，tab内容可以通过id从页面中的不同元素中拉取， 而与页面结构无关。例如:

    var tabs = new Ext.TabPanel({
    renderTo: 'my-tabs',
    activeTab: 0,
    items:[
        {contentEl:'tab1', title:'Tab 1'},
        {contentEl:'tab2', title:'Tab 2'}
    ]
});

// Note that the tabs do not have to be nested within the container (although they can be)
<div id="my-tabs"></div>
<div id="tab1" class="x-hide-display">A simple tab</div>
<div id="tab2" class="x-hide-display">Another one</div>
    注意，这个例子中的tab divs包含CSS类'x-hide-display'， 这样它们就可以延迟渲染，而不显示外面的tab. 你可以选择设置 deferredRender = false 以便在页面加载完成时渲染所有tab内容。

配置项

Config Options Defined By
activeItem : String/Number
一个string型的组件id，或者组件的数字索引， 它需要...
一个string型的组件id，或者组件的数字索引， 它需要在渲染时在容器内的布局管理器中被初始化并激活。 例如：activeItem: 'item-1' 或者 activeItem: 0 ( 索引 0 =容器子项目集合中的第一个元素)。 activeItem仅仅适用于一次显示一个组件的布局模式(比如 Ext.layout.AccordionLayout, Ext.layout.CardLayout 和 Ext.layout.FitLayout)。 与 Ext.layout.ContainerLayout.activeItem 相关。
Container
activeTab : String/Number
一个字符串id或者tab页的索引位置，将会在渲染时被初始化成当前活动的 (默认为undefined).
TabPanel
allowDomMove : Boolean
在渲染时组件是否可以移动Dom节点(默认为true)。
Component
anchor : String
注: 这个配置只用于该组件被包含在一个已使用AnchorLayout...

注: 这个配置只用于该组件被包含在一个已使用 AnchorLayout (或者其子类)配置的Container时。 基于布局管理器，例如：

  • Ext.form.FormPanel
  • 指定 layout: 'anchor' // or 'form', or 'absolute'

参见 Ext.layout.AnchorLayout. anchor 。

BoxComponent
animCollapse : Boolean
true将会在panel被折叠时使用动画效果，false将会跳过动画效果....
true 将会在panel被折叠时使用动画效果， false 将会跳过动画效果( 如果Ext.Fx类 有效，默认为 true ，否则为 false )。
Panel
animScroll : Boolean
True将会使用动画效果滚动tab，这样隐藏的tab可以平滑地滑动到视口内...
True将会使用动画效果滚动tab，这样隐藏的tab可以平滑地滑动到视口内 (默认为true). 只有当enableTabScroll = true 时应用。
TabPanel
applyTo : Mixed
指定一个元素的id、一个DOM元素或者一个已经存在并被渲染到DIV中的元素，此DIV已经被...

指定一个元素的id、一个DOM元素或者一个已经存在并被渲染到DIV中的元素，此DIV已经被 渲染到document中，并且为当前组件指定了一些结构化的标签。

  • 描述 :
      当使用了 applyTo， 在主元素中也可以用id或者CSS类名来指定组件的托管部分， 并且，如果可以的话，创建的组件可能也会试图在那个标签中创建它的子组件。
  • 注意 :
      当使用此配置项时，无需调用render()方法。
      如果指定了applyTo属性，任何传递给 renderTo 的值都会被忽略，并且目标元素的父节点将会自动被用作组件的容器。
Panel
autoDestroy : Boolean
如果为true，容器将自动销毁任何从其中被删除的组件， 否则...
如果为true，容器将自动销毁任何从其中被删除的组件， 否则必须手动处理销毁操作(默认为true)。
Container
autoEl : Mixed
一个表签名或者一个 DomHelper 描述，用来创建 Element ，它将封装当前组件...

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

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

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

{
    xtype: 'box',
    autoEl: {
        tag: 'img',
        src: 'http://www.example.com/example.jpg'

    }
}, {
    xtype: 'box',
    autoEl: {
        tag: 'blockquote',
        html: 'autoEl is cool!'
    }
}, {
    xtype: 'container',
    autoEl: 'ul',
    cls: 'ux-unordered-list',
    items: {
        xtype: 'box',
        autoEl: 'li',
        html: 'First list item'
    }
}
Component
autoHeight : Boolean
如果值为true，height配置项为'auto'，否则值为false的话使用固定的高度...

如果值为true，height配置项为'auto'，否则值为false的话使用固定的高度， 或者可以由其父类容器 layout manager来控制。(默认值为 false)。

注: 虽然很多组件继承了这个配置选项，但不是所有这些组件的自适应高度配置都会像期望的那样起作用。 设置autoHeight：值为true时，浏览器将根据元素的内容自动设置高度，这将意味着Ext不会去管理高度。

如果是由浏览器来管理高度，需要注意的是，通过浏览器进行调整的结构组件内不能被发现， 因此宽度的变化可能导致需要进行同步处理元素的高度。 例如：

var w = new Ext.Window({
    title: 'Window',
    width: 600,
    autoHeight: true,
    items: {
        title: 'Collapse Me',
        height: 400,
        collapsible: true,
        border: false,
        listeners: {
            beforecollapse: function() {
                w.el.shadow.hide();
            },
            beforeexpand: function() {
                w.el.shadow.hide();
            },
            collapse: function() {
                w.syncShadow();
            },
            expand: function() {
                w.syncShadow();
            }
        }
    }
}).show();
Panel
autoLoad : Object/String/Function
一个合法的url描述，依照Updater Ext.Updater.update 方法...
一个合法的url描述，依照Updater Ext.Updater.update 方法。如果autoLoad不为null，panel将会在渲染之后立即尝试加载它的内容。

URL将会成为当前panel的body元素的默认URL，这样它可以在任意时刻被 refresh.

Panel
autoScroll : Boolean
如果值为true，将会在该元素上使用overflow:'auto'配置，并且在必要的时候...
如果值为true，将会在该元素上使用overflow:'auto'配置，并且在必要的时候自动显示滚动条，否则，溢出部分的组件都会被切除(默认值为 false)。
BoxComponent
autoShow : Boolean
如果组件需要检测隐藏CSS属性(如 'x-hidden' 或者 'x-hide-display')并且在渲染时删除...
如果组件需要检测隐藏CSS属性(如 'x-hidden' 或者 'x-hide-display')并且在渲染时删除它们 (默认为false)，设置此值为true。
Component
autoTabSelector : String
当autoTabs = true时 用来在现有的标签中搜索tab页的CSS选择器 (默认为...
当autoTabs = true时 用来在现有的标签中搜索tab页的CSS选择器 (默认为 'div.x-tab'). 此参数可以是任何由Ext.DomQuery.select 提供的合法选择器。 注意，查询操作将会仅仅在当前tab面板的作用域内进行 (这样可以在同一个页面中支持多个标记相同的tab面板)。
TabPanel
autoTabs : Boolean
true 将会查询所有CSS类为'x-tab'DOM，它们将会自动 被转化为tab并添加到当前panel中(默认为...

true 将会查询所有CSS类为'x-tab'DOM，它们将会自动 被转化为tab并添加到当前panel中(默认为 false). 注意，查询操作将会仅仅在当前容器元素作用域中执行 (所以支持通过当前方法从标签创建多个tab面板)。

此方法只有在标签结构正确时才有用，它可以作为一个容器， 包含CSS类为'x-tab'的div. 如需不管这些限制创建TabPanels， 或者需要从页面中的其它元素提取tab内容， 参见该类顶部的例子：从标签创建tab页。

当使用此方法时，有两件事需要注意:

  • 当使用autoTabs配置时 (与传递当个tab配置项给TabPanel的 items 集合相反)你必须使用 applyTo 去正确使用指定的id作为tab容器。 autoTabs方法会使用TabPanel组件替换现有的内容。
  • 请确定你设置deferredRender: false ，这样每个tab的内容元素将会在页面加载之后 被立即渲染到TabPanel中，否则它们将不会被转换 直到tab变成活动的并在TabPanel外部可见。
示例用法:

var tabs = new Ext.TabPanel({
    applyTo: 'my-tabs',
    activeTab: 0,
    deferredRender: false,
    autoTabs: true
});

// This markup will be converted to a TabPanel from the code above
<div id="my-tabs">
    <div class="x-tab" title="Tab 1">A simple tab</div>
    <div class="x-tab" title="Tab 2">Another one</div>
</div>
TabPanel
autoWidth : Boolean
如果为true，使用width:'auto'配置，否则使用固定的宽度...

如果为true，使用width:'auto'配置，否则使用固定的宽度，或者可以由其父类容器的layout manager来控制。(默认值为 false)。

注: 虽然很多组件继承了这个配置选项，但不是所有这些组件的自适应宽度配置都会像期望的那样起作用。 设置autoWidth：值为true时，浏览器将根据元素的内容自动设置宽度，这将意味着Ext不会去管理宽度。

如果是由浏览器来管理宽度，需要注意的是，通过浏览器进行调整的结构组件内不能被发现，因此宽度的变化可能导致需要进行同步处理元素的宽度。 例如，在这个元素的目标是：

<div id='grid-container' style='margin-left:25%;width:50%'></div>
当浏览器窗口改变时，渲染后的Panel必须监听浏览器窗口大小的变化，以便通知子项，浏览器改变了其宽度：

var myPanel = new Ext.Panel({
    renderTo: 'grid-container',
    monitorResize: true, // relay on browser resize
    title: 'Panel',
    height: 400,
    autoWidth: true,
    layout: 'hbox',
    layoutConfig: {
        align: 'stretch'
    },
    defaults: {
        flex: 1
    },
    items: [{
        title: 'Box 1',
    }, {
        title: 'Box 2'
    }, {
        title: 'Box 3'
    }],
});
BoxComponent
baseCls : String
应用到面板上的基本CSS类(默认为 'x-tab-panel').
TabPanel
bbar : Object/Array
panel底部工具栏。 此参数可以是一个Ext.Toolbar 、一个工具栏配置项，或者一个buttons/button配置数组---用来被添加到工具栏中...

panel底部工具栏。 此参数可以是一个Ext.Toolbar 、一个工具栏配置项，或者一个buttons/button配置数组---用来被添加到工具栏中。 注意，此参数在渲染之后是无效的。如果在渲染之后需要访问底部工具栏 ，请使用 getBottomToolbar。

注意:尽管Toolbar可以包含Field组件，但它们不会 通过加载祖先FormPanel而被更新。Panel的工具栏不是标准Container->Component 层次的一部分，所以它们不会被扫面以收集表单项。但是，这些值还是会 被提交，因为提交表单的参数是从DOM树中收集的。

Panel
bbarCfg : Object
一个 ADomHelper 元素的配置对象，描述了当前Panelbbar元素的结构...

一个DomHelper 元素的配置对象，描述了当前Panel的bbar元素结构。 另请参见 bodyCfg 。

Panel
bodyBorder : Boolean
True将会在Panel的body元素内部显示一个边框，false将会隐藏它 (默认为true)。只有当border == true 时...
True将会在Panel的body元素内部显示一个边框，false将会隐藏它 (默认为true)。只有当border == true 时，此参数才会被应用。如果border == true 并且 bodyBorder == false， 将会给整个body元素一种凹陷式的外观。
Panel
bodyCfg : Object
一个DomHelper 元素描述对象，可以被指定给任何Panel Element...

一个DomHelper 元素描述对象，可以被指定给任何Panel Element.

默认情况下，以下表格中的Default元素将会被用作html标签，用来创建一个子元素 ，与Default类名相匹配( baseCls 将会被 baseCls 替换 ):

Panel      Default  Default             Custom      Additional       Additional
Element    element  class               element     class            style
========   ==========================   =========   ==============   ===========
header     div      baseCls+'-header'   headerCfg   headerCssClass   headerStyle
bwrap      div      baseCls+'-bwrap'     bwrapCfg    bwrapCssClass    bwrapStyle
+ tbar     div      baseCls+'-tbar'       tbarCfg     tbarCssClass     tbarStyle
+ body     div      baseCls+'-body'       bodyCfg     bodyCssClass     bodyStyle
+ bbar     div      baseCls+'-bbar'       bbarCfg     bbarCssClass     bbarStyle
+ footer   div      baseCls+'-footer'   footerCfg   footerCssClass   footerStyle

例如，配置一个自定义的元素，用来强制 body 元素使用不同形式的标签，而不是使用默认创建的。 这种情况的一个例子可能是 创建一个子 Panel，包含自定义的内容，例如header，或者通过使body拥有一个<center> 元素， 从而强制Panel中的所有内容居中:

new Ext.Panel({
    title: 'Message Title',
    renderTo: Ext.getBody(),
    width: 200, height: 130,
    bodyCfg: {
        tag: 'center',
        cls: 'x-panel-body',  // Default class not applied if Custom element specified
        html: 'Message'
    },
    footerCfg: {
        tag: 'h2',
        cls: 'x-panel-footer'        // same as the Default class
        html: 'footer html'
    },
    footerCssClass: 'custom-footer', // additional css class, see addClass

    footerStyle:    'background-color:red' // see bodyStyle

});

以上例子也显式创建了一个 footer ，拥有自定义的标签和样式。

Panel
bodyCssClass : String/Object/Function
可选的CSS类选择器，被应用到body 元素上，其格式为Ext.Element.addClass所 期望的值(默认为null)...
可选的CSS类选择器，被应用到body 元素上，其格式为Ext.Element.addClass所 期望的值(默认为null)。参见 bodyCfg.
Panel
bodyStyle : String/Object/Function
自定义的CSS样式，它将被应用到body 元素上，其格式为...
自定义的CSS样式，它将被应用到body 元素上，其格式为Ext.Element.applyStyles 所期望的值(默认为null)。参见bodyCfg。
Panel
border : Boolean
True将会显示panel body元素的边框，false将会隐藏它们 (默认为true)。默认情况下，边框是一个2px宽度的内嵌边框...
True将会显示panel body元素的边框，false将会隐藏它们 (默认为true)。默认情况下，边框是一个2px宽度的内嵌边框， 但是，以后可以通过设置bodyBorder 为false以改变它。
Panel
boxMaxHeight : Number
设置组件的最大高度值...

设置组件的最大高度值。

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

BoxComponent
boxMaxWidth : Number
设置组件的最大宽度值...

设置组件的最大宽度值。

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

BoxComponent
boxMinHeight : Number
设置组件的最小高度值...

设置组件的最小高度值。

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

BoxComponent
boxMinWidth : Number
设置组件的最小宽度值...

设置组件的最小宽度值。

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

BoxComponent
bubbleEvents : Array
一个事件数组，当这些事件被触发时，将会被冒泡到所有父容器中。参见....

一个事件数组，当这些事件被触发时，将会被冒泡到所有父容器中。参见 Ext.util.Observable.enableBubble。 默认为 []。

Container
bufferResize : Boolean/Number
当设置为true时(50毫秒)或者是一个毫秒数值， 指定给当前容器的布...
当设置为true时(50毫秒)或者是一个毫秒数值， 指定给当前容器的布局管理器将会缓存它计算出的频率，然后 对组件进行一次重新布局操作。 对于重量级的容器，或者拥有大量子组件的容器来说，这非常有用， 因为频繁进行布局是非常昂贵的。 默认为 50 .
Container
buttonAlign : String
添加到当前panel的所有 buttons 的对齐方式。 合法的值有...
添加到当前panel的所有 buttons 的对齐方式。 合法的值有 'right' , 'left' 和 'center' (默认为 'right' )。
Panel
buttons : Array
Panel的按钮数组，它们从 buttons 配置属性创建。只读。
Panel
bwrapCfg : Object
一个DomHelper 元素描述对象，描述了当前Panel的 bwrap 的元素的结构...

一个DomHelper 元素描述对象，描述了当前Panel的 bwrap 的元素的结构。另请参见 bodyCfg 。

Panel
clearCls : String
应用到特殊的clearing div的CSS类， 这个clearing div直接渲染到每个form field的包装器后面...

应用到特殊的clearing div的CSS类， 这个clearing div直接渲染到每个form field的包装器后面，以提供 清除field的功能(默认为 'x-form-clear-left')。

注意: 只有在当前组件被渲染到一个使用FormLayout 布局(例如 Ext.form.FormPanel 或者指定 layout:'form')的 容器中、或者是指定了一个fieldLabel 、或者指定isFormField=true 时此配置才有效。

另请参见 Ext.layout.FormLayout. fieldTpl。

Component
closable : Boolean
Panel自身不支持关闭操作，但是Panel的一些子类 (例如Ext.Window) ，或者处于Ext.TabPanel中的 Panel支持...
Panel自身不支持关闭操作，但是Panel的一些子类 (例如Ext.Window) ，或者处于Ext.TabPanel中的 Panel支持。 指定此参数为 true 可以在这些情况下启用关闭。默认为 false 。
Panel
cls : String
一个可选的额外CSS类，它将被添加到当前组件的元素上(默认为'')...
一个可选的额外CSS类，它将被添加到当前组件的元素上(默认为'')。 此属性对于在组件上，或者它的任何使用标准CSS规则的孩子节点上， 添加定制的样式非常有用。
Component
collapseFirst : Boolean
将会确保折叠/展开(collapse/expand)按钮总是被渲染在第一个位置...
true 将会确保折叠/展开(collapse/expand)按钮总是被渲染在第一个位置， 在panel顶部的工具栏中位于任何其它工具左侧， false 将会把它渲染在最后(默认为 true )。
Panel
collapsedCls : String
在被折叠后，一个被添加到panel元素上的CSS类 (默认为 'x-panel-collapsed' )。
Panel
contentEl : String
(可选)指定一个已存在的HTML元素，或者一个已存在HTML元素的...

(可选)指定一个已存在的HTML元素，或者一个已存在HTML元素的 id ，它们将被用作当前组件的内容。

  • 描述 :
    此配置选项被用来将一个已存在的HTML元素 插入到一个新组件(在组件渲染之后它简单地移动DOM元素) 的layout元素中，使它成为该组件的内容。
  • 注意 :
    指定的HTML元素将被append到组件的layout元素中， 在所有配置的 HTML 被插入之后， 并且，这样的话，在render事件 被触发时，document中将不再包含此元素。
    指定的HTML元素将不会参与组件所有可能使用的 layout 过程(译者注：指这些HTML元素 不会参与布局操作)。 它仅是HTML而已。布局操作实在孩子 items 上进行的。
    添加 x-hidden 或者 x-hide-display CSS类，以防在内容渲染到panel时发生闪烁。
Component
ctCls : String
一个可选的外部CSS样式，添加到这个组件的容器(默认值为 '')。 这个方法对于使用标准的CSS规则...

一个可选的外部CSS样式，添加到这个组件的容器(默认值为 '')。 这个方法对于使用标准的CSS规则，为组件或它的任何一个子组件添加特定的样式非常有用。 参见 Ext.layout.ContainerLayout和 extraCls 。

注意: ctCls 默认为 ''期望如下的类，它们将指定一个默认值:

  • Box Layout : 'x-box-layout-ct'
使用一个额外的CSS类配置以上的Class，它是append到默认对象上的。例如， 对于BoxLayout (Hbox and Vbox):
                                ctCls: 'x-box-layout-ct custom-class'

Component
data : Mixed
初始化数据集，它将被应用到 tpl 上以刷新组件的内容区域。
Component
defaultType : String
当一个子项目通过一个原生的配置对象 而不是一个组件的实例指定时。...

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

默认为 'panel' ， Ext.menu.Menu 默认为 'menuitem' ， Ext.Toolbar 和 Ext.ButtonGroup 默认为 'button' 。

Container
defaults : Object|Function
此选项是在所有添加的项目上应用默认设置的手段， 这些项目要么是通过...

此选项是在所有添加的项目上应用默认设置的手段， 这些项目要么是通过 items 配置项添加的， 或者是通过 add 或者是通过 insert 方法添加的。

如果添加的项目是一个配置对象， 并且不是一个组件的实例， 那么默认参数将会被无条件地被应用。 如果添加的项目是一个组件的实例， 那么默认参数将有条件地被应用，以免覆盖项目上的现有属性你。

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

例如，如需自动在 Ext.Panel 所包含的每个项目上应用padding属性，你可以传递: defaults: {bodyStyle: 'padding:15px'} 。

用法:

defaults: {               // defaults are applied to items, not the container
    autoScroll:true
},
items: [
    {
        xtype: 'panel',   // defaults do not have precedence over
        id: 'panel1',     // options in config objects, so the defaults
        autoScroll: false // will not be applied here, panel1 will be autoScroll:false
    },
    new Ext.Panel({       // defaults do
                                     have precedence over options
        id: 'panel2',     // options in components, so the defaults
        autoScroll: false // will be applied here, panel2 will be autoScroll:true.
    })
]
Container
deferredRender : Boolean
默认为true，延迟将子 items 渲染到浏览器的DOM中，直到tab页被激活。 false 将会...

默认为true，延迟将子 items 渲染到浏览器的DOM中，直到tab页被激活。 false 将会 在layout一被渲染就 渲染所有包含的 items . 如果存在重要的内容或者许多重量级组件需要渲染到默认不显示的面板中， 设置此参数为true将会提升效率。

deferredRender参数在内部被传递给TabPanel的布局管理器 (Ext.layout.CardLayout)，作为 其Ext.layout.CardLayout.deferredRender 配置项的值。

注意: 让 deferredRender保持为 true意味着在未激活tab页中的内容不可见。 例如，这意味着如果TabPanel位于一个form之内， 然后，直到一个tab页被激活，任何处于未激活tab页中的表单项将不会被渲染， 并且不能被提交、对getValues 或者 setValues 无效。

TabPanel
disabled : Boolean
当前组件处于无效状态时为true。 Read-only.
Panel
disabledClass : String
当组件处于无效状态时添加到组件上的CSS类(默认为 'x-item-disabled')。
Component
draggable : Boolean/Object
true 可以让当前panel启用拖拽操作(默认为 false )...

true 可以让当前panel启用拖拽操作(默认为 false )。

如需自定义的drag/drop实现，也可以向此配置项传递一个 Ext.Panel.DD配置替代 true 。 Ext.Panel.DD是一个内部没有文档化的类，它在周围移动代理元素 代替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();
Panel
elements : String
panel元素列表，以逗号分隔，在panel被渲染时初始化。 通常情况下...
panel元素列表，以逗号分隔，在panel被渲染时初始化。 通常情况下，此列表在配置时根据添加到panel的项目被自动创建， 但有时，即使没有在配置时指定，对于确保一个结构化的元素被渲染也很有用 (例如，你可能希望在panel被渲染后动态地添加一个按钮或者工具栏)。 添加这些元素到此列表中将会在panel被渲染时分配必须的占位符。 合法的值有
  • header
  • tbar (top bar)
  • body
  • bbar (bottom bar)
  • footer
Defaults to ' body '.
Panel
enableTabScroll : Boolean
True将会启用滚动到由于溢出了外部TabPanel的宽度而不可见的tab。 只有...
True将会启用滚动到由于溢出了外部TabPanel的宽度而不可见的tab。 只有tabPosition:'top'时有效(默认为false).
TabPanel
fbar : Object/Array
一个Toolbar 对象、一个Toolbar配置项，或者一个Buttons/ Button 配置数组，...

一个Toolbar 对象、一个Toolbar配置项，或者一个Buttons/ Button 配置数组，它们描述了一个被添加到当前Panel底部元素的 Toolbar.

在渲染后， fbar 将会为一个Toolbar 实例。

如果指定了 buttons ，它们将替代 fbar 配置项。

Panel的 buttonAlign 配置项目将会影响这些项目的布局，例如:
var w = new Ext.Window({
    height: 250,
    width: 500,
    bbar: new Ext.Toolbar({
        items: [{
            text: 'bbar Left'
        },'->',{
            text: 'bbar Right'
        }]
    }),
    buttonAlign: 'left', // anything but 'center' or 'right' and you can use '-', and '->'

                                  // to control the alignment of fbar items
    fbar: [{
        text: 'fbar Left'
    },'->',{
        text: 'fbar Right'
    }]
}).show();

注意:尽管Toolbar可以包含Field组件，但它们不会 通过加载祖先FormPanel而被更新。Panel的工具栏不是标准Container->Component 层次的一部分，所以它们不会被扫面以收集表单项。但是，这些值还是会 被提交，因为提交表单的参数是从DOM树中收集的。

Panel
fieldLabel : String
紧靠此field显示的标签文本(默认值为 '')。注意...

紧靠此field显示的标签文本(默认值为 '')。

注意:只有在当前组件被渲染到一个使用FormLayout 的容器中时，此配置才有效。 (例如 Ext.form.FormPanel 或 指定 layout:'form')。

另请参见 hideLabel 、 Ext.layout.FormLayout和 fieldTpl。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Name'
    }]
});
Component
flex : Number
注: 这个配置只用于该组件被包含在一个已使用BoxLayout配置的Container中时...

注: 这个配置只用于该组件被包含在一个已使用BoxLayout配置的Container中时。通过计算每一个子组件的flex值所占全部flex值之和的比例，来决定子组件的宽(HBoxLayout)高(VBoxlayout)。 任何子项的 flex = 0 或 flex = undefined 将不被设置(初始值大小将不被改变)。

BoxComponent
floating : Mixed
此参数被用来配置底层的 Ext.Layer. 此配置参数可接受的值有...

此参数被用来配置底层的 Ext.Layer. 此配置参数可接受的值有:

  • false : 默认。
    在渲染的地方以内嵌的方式显示panel.
  • true :
    浮动panel (绝对定位，有自动衬垫和阴影)。
      设置floating为true将会为当前panel创建一个Ext.Layer 并且在负值偏移量处显示panel，这样它就是隐藏的。
      既然panel被绝对定位，位置必须在渲染之后被显式设置 (例如 myPanel.setPosition(100,100); )。
      注意: 如果浮动面板，你必须总是指定一个固定的宽度， 否则它将是自动宽度并且总是展开以便填充到视口右侧 边缘。
  • object :
    指定的对象将会被用作将会被创建的 Ext.Layer的 配置对象。
Panel
footer : Ext.Element
Panel底部Element 。只读。此元素被用来容纳Panel的...
Panel底部Element 。只读。

此元素被用来容纳Panel的 buttons 或者 fbar 。

注意: 另请参见 el 的注释。

Panel
footerCfg : Object
一个DomHelper 元素的配置对象，描述了当前Panel的footer元素结构。 另请参见...

一个DomHelper 元素的配置对象，描述了当前Panel的footer元素结构。 另请参见 bodyCfg 。

Panel
forceLayout : Boolean
如果此值为true，容器将将强制初始化一次布局操作...
如果此值为true，容器将将强制初始化一次布局操作， 即使容器处于隐藏或者折叠状态。 此配置项对于在一个折叠或者隐藏的容器中强制渲染非常有用 (默认为false)。
Container
frame : Boolean
默认情况下使用 false ，渲染简单的1px的正方形边框。 true 将会渲染9个元素，以自定义的圆角结束...
默认情况下使用 false ，渲染简单的1px的正方形边框。 true 将会渲染9个元素，以自定义的圆角结束 (另请参见 Ext.Element.boxWrap)。

每种情况下产生的模板描述如下:

// frame = false
<div id="developer-specified-id-goes-here" class="x-panel">

    <div class="x-panel-header"><span class="x-panel-header-text">Title: (frame:false)</span></div>

    <div class="x-panel-bwrap">
        <div class="x-panel-body"><p>html value goes here</p></div>
    </div>
</div>

// frame = true (create 9 elements)
<div id="developer-specified-id-goes-here" class="x-panel">
    <div class="x-panel-tl"><div class="x-panel-tr"><div class="x-panel-tc">
        <div class="x-panel-header"><span class="x-panel-header-text">Title: (frame:true)</span></div>
    </div></div></div>

    <div class="x-panel-bwrap">
        <div class="x-panel-ml"><div class="x-panel-mr"><div class="x-panel-mc">
            <div class="x-panel-body"><p>html value goes here</p></div>
        </div></div></div>

        <div class="x-panel-bl"><div class="x-panel-br"><div class="x-panel-bc"/>
        </div></div></div>
</div>
Panel
headerCfg : Object
一个DomHelper 元素的配置对象，描述了当前Panel的header元素结构...

一个DomHelper 元素的配置对象，描述了当前Panel的header元素结构。 另请参见 bodyCfg 。

Panel
height : Number
组件的高度(默认值为 auto)。注:如果想使用百分比的方式...
组件的高度(默认值为 auto)。注:如果想使用百分比的方式来设置值，请查看 Ext.Component.anchor。
BoxComponent
hidden : Boolean
如果当前组件处于隐藏状态，此值为true。Read-only。
Component
hideBorders : Boolean
设置为true可以隐藏所包含的每个组件的边框， false为遵照组件现有的边框设置...
设置为true可以隐藏所包含的每个组件的边框， false为遵照组件现有的边框设置(默认为 false)。
Container
hideLabel : Boolean
true时完全隐藏label元素 ( label 和 separator)。 默认为 false。 默认情况下，即使你不指定...

true时完全隐藏label元素 ( label 和 separator)。 默认为 false。 默认情况下，即使你不指定 fieldLabel 它的空间仍然会被保留，这样这块区域会与其它确实拥有label的区域位于同一排。 讲此值设置为 true 将导致此区域不再保留此空间。

注意: 参见 clearCls 的注释。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield'
        hideLabel: true
    }]
});
Component
hideMode : String
组件如何隐藏，支持的值有： 'visibility' (css visibility), 'offsets' (位置偏移量为负值) 和...

组件如何隐藏，支持的值有： 'visibility' (css visibility), 'offsets' (位置偏移量为负值) 和 'display' (css display).

注意:一般首选默认值 'display'，因为当组件第一次显示的时候它们会自动进行布局 (隐藏的时候不会调整尺寸)。

Component
hideParent : Boolean
此值为true时，当调用hide/show方法时，将会hide和show组件的容器...
此值为true时，当调用hide/show方法时，将会hide和show组件的容器；false时将会 hide和show组件自身(默认为false)。例如，这可以用作window上隐藏按钮的一种 快捷操作，通过设置此按钮的hideParent:true，然后把它添加到window上。
Component
html : String/Object
一个HTML片段，或者一个 DomHelper 描述，用作layout元素的内容(默认为'')。...
一个HTML片段，或者一个 DomHelper 描述，用作layout元素的内容(默认为'')。 这个HTML内容在组件渲染之后才被添加，所以在 render 出发的时候，document中尚未包含此HTML。 但是这个内容将会在所有配置的 contentEl 之前被插入到body标签中。
Component
iconCls : String
CSS类选择器，指定被用作头部图标的背景图片(默认为'')...
CSS类选择器，指定被用作头部图标的背景图片(默认为'')。

指定自定义图表类的示例就像:

// specify the property in the config for the class:
     ...
     iconCls: 'my-icon'

// css class that specifies background image to be used as the icon image:
.my-icon { background-image: url(../images/my-icon.gif) 0 6px no-repeat !important; }
Panel
id : String
当前组件唯一的id(默认为auto-assigned id)...

当前组件唯一的id(默认为auto-assigned id)。 如果你需要在以后访问组件，而又没有一个有效的组件对象引用，那么你需要指定一个 id( 也就是，使用Ext. getCmp方法 )。

注意，此id也将被用作组件底层HTML标签的id，这些标签被渲染到页面中。 这将允许你编写基于id的CSS规则，以独立地描述指定的实例；并且，也可以通过 组件父标签的id选中子元素。

注意:为了避免与唯一的id 产生重复， 请参见 itemId 和 ref 。

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

Component
itemCls : String
注意: 只有在当前组件被渲染到一个使用FormLayout 布局的 容器中时此配置才有效...

注意: 只有在当前组件被渲染到一个使用FormLayout 布局的 容器中时此配置才有效。 (例如Ext.form.FormPanel 或者指定 layout:'form')。

一个附加的CSS类，应用到div上，包装当前field的表单元素。 如果提供了此参数， field级上的itemCls将会覆盖 container级上提供的 默认itemCls。 为itemCls指定的值将会被添加默认的 类('x-form-item')。

既然它被应用到项目的包装器上(参见 Ext.layout.FormLayout。 fieldTpl)， 它将允许你编写能应用到此field、label(如果有指定)、或者field内部任何其它元素的标准CSS规则。

注意: 参考 fieldLabel的注释。 .

示例用法:

// Apply a style to the field's label:
<style>
    .required .x-form-item-label {font-weight:bold;color:red;}
</style>

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Name',
        itemCls: 'required' //this label will be styled
    },{
        xtype: 'textfield',
        fieldLabel: 'Favorite Color'
    }]
});
Component
itemId : String
当没有可利用的对象引用时，itemId可以作为第二选择，用来获得一个组件的引用， 代替 ...

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

var c = new Ext.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'); // 与 Ext.getCmp()不同

p2 = p1.ownerCt.getComponent('p2'); // 通过兄弟对象获得引用

另请参见 id 和 ref 。

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

Component
itemTpl : Template/XTemplate
(可选) 一个 Template 或者 XTemplate ，可以用来处理 从getTemplateArgs 返回的数据对象...

(可选) 一个 Template 或者 XTemplate ，可以用来处理 从getTemplateArgs 返回的数据对象，以便在tab条产生一个可点击的选择元素。

创建的主要元素应该是一个 <li> element. 为了让选择元素上的点击事件连接到它对应的项目上， 它必须从TabPanel的本地getTemplateArgs 获得id.

包含标题文本的子元素必须通过CSS类x-tab-strip-inner进行标记。

如需启用关闭功能，创建的元素应该包含一个 被CSS类x-tab-strip-close所标记的元素。

如果提供了一个自定义的itemTpl， 由开发者负责创建CSS样式规则，以便创建所需的外观。

以下是一个如何创建自定义tab选择项的例子:
new Ext.TabPanel({
    renderTo: document.body,
    minTabWidth: 115,
    tabWidth: 135,
    enableTabScroll: true,
    width: 600,
    height: 250,
    defaults: {autoScroll:true},
    itemTpl: new Ext.XTemplate(
    '<li class="{cls}" id="{id}" style="overflow:hidden">',
         '<tpl if="closable">',
            '<a class="x-tab-strip-close"></a>',
         '</tpl>',
         '<a class="x-tab-right" href="#" style="padding-left:6px">',
            '<em class="x-tab-left">',
                '<span class="x-tab-strip-inner">',
                    '<img src="{src}" style="float:left;margin:3px 3px 0 0">',
                    '<span style="margin-left:20px" class="x-tab-strip-text {iconCls}">{text} {extra}</span>',
                '</span>',
            '</em>',
        '</a>',
    '</li>'
    ),
    getTemplateArgs: function(item) {
//      Call the native method to collect the base data. Like the ID!
        var result = Ext.TabPanel.prototype.getTemplateArgs.call(this, item);

//      Add stuff used in our template
        return Ext.apply(result, {
            closable: item.closable,
            src: item.iconSrc,
            extra: item.extraText || ''
        });
    },
    items: [{
        title: 'New Tab 1',
        iconSrc: '../shared/icons/fam/grid.png',
        html: 'Tab Body 1',
        closable: true
    }, {
        title: 'New Tab 2',
        iconSrc: '../shared/icons/fam/grid.png',
        html: 'Tab Body 2',
        extraText: 'Extra stuff in the tab button'
    }]
});
TabPanel
items : MixedCollection
当前容器中的子组件集合 Ext.util.MixedCollection
Container
keys : Object/Array
一个Ext.KeyMap 配置对象 (其格式为Ext.KeyMap.addBinding 所期望的值...
一个Ext.KeyMap 配置对象 (其格式为Ext.KeyMap.addBinding 所期望的值，用来向当前panel上绑定自定义的按键处理(默认为 null )
Panel
labelSeparator : String
每个fieldLabel 文本后面现实的分隔符。 此属性可以在多个层次上进行配置...

每个fieldLabel 文本后面现实的分隔符。 此属性可以在多个层次上进行配置。优先顺序为：

  • field / component level
  • container level
  • layout level (默认为冒号 ':')
如不需要为当前field的label显示分隔符，指定一个空字符串''即可。

注意:参见 clearCls 的注释。

另请参见 hideLabel 和 Ext.layout.FormLayout。 fieldTpl。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    layoutConfig: {
        labelSeparator: '~'   // layout config has lowest priority (defaults to ':')
    },
    labelSeparator: '>>',     // config at container level
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Field 1',
        labelSeparator: '...' // field/component level config supersedes others
    },{
        xtype: 'textfield',
        fieldLabel: 'Field 2' // labelSeparator will be '='

    }]
});
Component
labelStyle : String
一个CSS样式描述字符串，它将直接应用到当前field的label上...

一个CSS样式描述字符串，它将直接应用到当前field的label上。 如果有设置，默认为容器的labelStyle值(例如 Ext.layout.FormLayout.labelStyle , 或者 '')。

注意:参见 clearCls 的注释。

另请参见 hideLabel 和 Ext.layout.FormLayout. fieldTpl。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Name',
        labelStyle: 'font-weight:bold;'
    }]
});
Component
layoutConfig : Object
TabPanel隐式使用 Ext.layout.CardLayout 作为布局管理器。 layoutConfig 可以用来配置此布局管理器。 TabPanel上配置的...
TabPanel隐式使用 Ext.layout.CardLayout 作为布局管理器。 layoutConfig 可以用来配置此布局管理器。 TabPanel上配置的 deferredRender 和 layoutOnTabChange 将会被用来作为布局管理器的配置项。
TabPanel
layoutOnTabChange : Boolean
设置为true，当变换tab时，可以对活动的tab页强制进行布局操作。 默认为false...
设置为true，当变换tab时，可以对活动的tab页强制进行布局操作。 默认为false。 参见 Ext.layout.CardLayout. layoutOnCardChange .
TabPanel
listeners : Object
一个包含一个或多个事件处理器的配置对象，会在初始化的时候被添加到目标对象上...

一个包含一个或多个事件处理器的配置对象，会在初始化的时候被添加到目标对象上。 该配置对象应该是一个有效的监听器配置对象就像 addListener例子中指定的一样可一次附加多个处理器。

ExtJs Components上的DOM事件

一些 ExtJs Component 类导出时会选择一些DOM事件(例如 "click", "mouseover" 等等), 这通常只是在有额外的值可以被添加时发生。例如DataView类的 click事件会传递被点击的节点。也可以直接在Component的HTMLElementevent上访问DOM事件，但必需在Component被渲染后监听器才能添加到Element 上。可以按照以下步骤添加插件:

// 插件会用一个监听器配置对象进行配置。
//该组件会被添加到所有处理方法的参数列表上。
Ext.DomObserver = Ext.extend(Object, {
    constructor: function(config) {
        this.listeners = config.listeners ? config.listeners : config;
    },

    // 组件将自己传递进了插件的初始化方法里
    init: function(c) {
        var p, l = this.listeners;
        for (p in l) {
            if (Ext.isFunction(l[p])) {
                l[p] = this.createHandler(l[p], c);
            } else {
                l[p].fn = this.createHandler(l[p].fn, c);
            }
        }

        // 渲染后立即添加监听器到元素上
        c.render = c.render.createSequence(function() {
            var e = c.getEl();
            if (e) {
                e.on(l);
            }
        });
    },

    createHandler: function(fn, c) {
        return function(e) {
            fn.call(this, e, c);
        };
    }
});

var combo = new Ext.form.ComboBox({

    // 元素被点击后折叠
    plugins: [ new Ext.DomObserver({
        click: function(evt, comp) {
            comp.collapse();
        }
    })],
    store: myStore,
    typeAhead: true,
    mode: 'local',
    triggerAction: 'all'
});

Observable
margins : Object
注:此配置只用于该组件展现在一个使用BorderLayout...

注:此配置只用于该组件展现在一个使用BorderLayout 或 BoxLayout的两个子类之一作为布局的容器。

这个margins对象在该组件中的格式为：

{top: (top margin),right: (right margin),bottom: (bottom margin),left: (left margin)}

也可以是一个字符串，中间用空格分隔，margin值为数字。 把matches中每一个值的次序跟CSS中margin值的排列方式相对应：

  • 如果只有一个值，它适用于所有方面。
  • 如果有两个值，top和bottom的边框设置为第一个值，left和right设置为第二个值。
  • 如果有三个值，top设置为第一个值，left和right设置为第二个值，bottom设置为第三个值。
  • 如果有四个值，分别设置为top, right, bottom, left。

默认值:

{top:0, right:0, bottom:0, left:0}
BoxComponent
maskDisabled : Boolean
true 将会在panel被disabled时进行遮罩,false将不会遮罩它(默认为...
true 将会在panel被disabled时进行遮罩, false 将不会遮罩它(默认为 true )。使用任意一种方法，当被禁用时，panel都将告诉它包含的元素禁用它们自己， 但是遮罩panel可以提供一种额外的视觉效果，用以提示panel被禁用。
Panel
minButtonWidth : Number
当前panel中所有buttons 最小宽度，像素值(默认为 75 )
Panel
minTabWidth : Number
当resizeTabs = true时，每个tab页的最小宽度，像素值(默认为30)。
TabPanel
monitorResize : Boolean
设置为true自动监测window的resize事件，以便处理所有对当前窗口尺寸 敏感的事情。...
设置为true自动监测window的resize事件，以便处理所有对当前窗口尺寸 敏感的事情。 典型地，通过选择一个 layout 来管理这个值，并且不应该手动设置它。
Container
overCls : String
一个可选的额外的CSS类，它将在鼠标移过元素时被添加到组件上...
一个可选的额外的CSS类，它将在鼠标移过元素时被添加到组件上，鼠标移出时 删除。(默认为'')。此属性对于在组件上，或者它的任何使用标准CSS规则的孩子节点上， 添加定制的'active' 或者 'hover'样式非常有用。
Component
padding : Number/String
设置body元素padding样式的快捷方式。 此值既可以是一个数值，被应用到所有侧边...
设置body元素padding样式的快捷方式。 此值既可以是一个数值，被应用到所有侧边，也可以是一个普通的描述padding的 CSS字符串。默认为undefined.
Panel
pageX : Number
如果该组件被包含在一个指定位置的容器中，这个值表示页面级的x坐标值（译者注：在有滚动条的情况下这个值很有用）。
BoxComponent
pageY : Number
如果该组件被包含在一个指定位置的容器中，这个值表示页面级的y坐标值（译者注：在有滚动条的情况下这个值很有用）。
BoxComponent
plain : Boolean
true 将会把tab条(译者注：指在顶部显示的小方块，每个页面对应一个)渲染成没有容器背景图的样式 (默认为false).
TabPanel
plugins : Object/Array
一个对象或者一个对象数组，为组件提供特殊的功能 ...
一个对象或者一个对象数组，为组件提供特殊的功能。 对一个合法的插件唯一的要求是它含有一个init()方法， 能接收一个Ext.Component型的参数。 当组件被创建时，如果有可用的插件，组件将会调用每个插件的init方法， 并将自身的引用作为方法参数传递给它。然后，每个插件就可以调用方法或者响应组件上的事件， 就像需要的那样提供自己的功能。
Component
ptype : String
需要创建配置的ptype。 当传递一个配置对象给构造函数时...
需要创建配置的ptype。 当传递一个配置对象给构造函数时，此配置选项不会被使用。 只有在使用懒初始化的时候此配置项才会被使用， 此时Plugin不是 通过一个完整的实例组件，而是通过一个Component配置指定的。 在渲染时，将会查找ptype以决定创建何种类型的Plugin。

如果你创建自己的Plugin，你可以通过 Ext.ComponentMgr.registerPlugin 对它们进行注册，以便能利用懒初始化和渲染机制。
Component
ref : String
一个路径描述，与组件的 ownerCt 相关，它描述了把当前组件的命名引用放置到哪个父容器中去。...

一个路径描述，与组件的 ownerCt 相关，它描述了把当前组件的命名引用放置到哪个父容器中去。

祖先的坐标路径可以通过'/'字符进行分隔。 例如，将一个Toolbar Button的引用放入 拥有此Toolbar的Panel中:

var myGrid = new Ext.grid.EditorGridPanel({
    title: 'My EditorGridPanel',
    store: myStore,
    colModel: myColModel,
    tbar: [{
        text: 'Save',
        handler: saveChanges,
        disabled: true,
        ref: '../saveButton'
    }],
    listeners: {
        afteredit: function() {
//          The button reference is in the GridPanel
            myGrid.saveButton.enable();
        }
    }
});

在上面的代码中，如果 ref 是 'saveButton' ，那么引用将会被放置到Toolbar中。 ref 中的每个'/' 都会从组件的 ownerCt 向上移动一级。

另请参见 added 和 removed 事件。

Component
region : String
注: 此配置只用于该组件展现在一个布局为BorderLayout的容器中...

注: 此配置只用于该组件展现在一个布局为BorderLayout的容器中(例如指定layout:'border')。

详见Ext.layout.BorderLayout。

BoxComponent
renderTo : Mixed
该值可以是一个节点的id、一个DOM节点或者一个已存在的元素...

该值可以是一个节点的id、一个DOM节点或者一个已存在的元素， 组件将会被渲染到其中。

  • 注意 :
      如果组件不是一个Container 的子项目时， 不要使用此选项。 渲染和管理它的子项目是一个Container 的layout manager的责任。
      当使用此配置项时，无需调用render()方法。

另请参见 render 。

Component
resizeEvent : String
在布局中进行尺寸调整需要监听的事件。 默认为 'resize' 。
Panel
resizeTabs : Boolean
True将会自动调整每个tab页的尺寸， 这样tab耶将会完全填充tab条(默认为false). 设置此参数为true，为了将它们充满视图...
True将会自动调整每个tab页的尺寸， 这样tab耶将会完全填充tab条(默认为false). 设置此参数为true，为了将它们充满视图， 可能导致特殊的宽度被设置到每个tab页以便被覆盖。 (尽管minTabWidth 总是被考虑到)。
TabPanel
scrollDuration : Float
每个滚动动画需要持续的时间，毫秒数(默认为 .35). 只有当...
每个滚动动画需要持续的时间，毫秒数(默认为 .35). 只有当animScroll = true时应用。
TabPanel
scrollIncrement : Number
每次tab上的滚动按钮被按下时滚动的像素数 (默认为100,如果...
每次tab上的滚动按钮被按下时滚动的像素数 (默认为100,如果 resizeTabs = true, 为计算出的tab宽度)。 只有当 enableTabScroll = true 时有效。
TabPanel
scrollRepeatInterval : Number
当滚动按钮被持续按住时，每次滚动一个tab之间的时间间隔，毫秒数(默认为400).
TabPanel
shadow : Boolean/String
(或者一个有效的Ext.Shadow Ext.Shadow.mode 值)，用来在panel后面显示一个阴影...
true (或者一个有效的Ext.Shadow Ext.Shadow.mode 值)，用来在panel后面显示一个阴影， false 将不会显示阴影(默认为 'sides' )。注意，此选项只有当 floating = true 时才应用。
Panel
shadowOffset : Number
如果显示了阴影，此参数为数值偏移量(默认为 4 )。注意，只有当 floating = true 时此参数才会被应用。...
如果显示了阴影，此参数为数值偏移量(默认为 4 )。注意，只有当 floating = true 时此参数才会被应用。
Panel
shim : Boolean
false将会在需要的浏览器中禁用iframe衬垫(默认为...
false 将会在需要的浏览器中禁用iframe衬垫(默认为 true )。注意，此选项只有在 floating = true 时应用。
Panel
stateEvents : Array
一个事件数组，当它们被触发时，组件需要保存自己的状态(默认值为 none)...

一个事件数组，当它们被触发时，组件需要保存自己的状态(默认值为 none)。 它们可以是任何该组件支持的事件类型，包括浏览器事件和 自定义事件(例如['click', 'customerchange'])。

对于保存和恢复组件状态的详细解释，参见 stateful

Component
stateId : String
为该组件指定的唯一的id值，它被用作管理组件状态的目的...
为该组件指定的唯一的id值，它被用作管理组件状态的目的。 (如果设定了id，默认值为组件自己的id，否则，如果组件使用自动生成的id，此值为null)。

对于保存和反解析组件状态的解释，参见 stateful 。

Component
stateful : Boolean
一个标志参数，它将引起组件在启动时尝试从一个保存的状态中恢复内部状态参数...

一个标志参数，它将引起组件在启动时尝试从一个保存的状态中恢复内部状态参数。 组件必须要么拥有一个 stateId 或者 id ，它们被分配给需要被管理的状态属性。 在跨页面加载时，不保证自动生成的id属性的稳定性， 并且，不能依赖此id来保存和恢复一个组件的相同状态。

为了保存状态的操作能够工作，状态管理器的提供者必须 被设置成一个Ext.state.Provider 的实现类，它覆盖了set 和get 方法，以便保存和恢复name/value对。 有一个内置的Ext.state.CookieProvider 可用。

为当前页面设置状态提供者:

Ext.state.Manager.setProvider(new Ext.state.CookieProvider({
    expires: new Date(new Date().getTime()+(1000*60*60*24*7)), //7 days from now
}));

当 stateEvents 配置项中其中之一的事件被触发时， 一个状态可保存的组件将试图保存其状态。

保存状态时，一个可保存状态的组件首先需要通过调用 getState 方法来序列化它的状态。 默认情况下，此函数什么事都不做。 开发者必须提供一个实现，返回一个hash对象，它描述了组件可恢复的状态。

getState方法产生的值将会传递给 Ext.state.Manager.set 方法，它使用配置的 Ext.state.Provider 来保存对象，以组件的 stateId 为key，或者，如果此值（指stateId）没有指定时， 使用它的 id 作为key。

在进行构造时，一个可保存状态的组件试图通过调用 Ext.state.Manager.get方法来 恢复它的状态，传递 stateId 或者，如果此值（指stateId）没有指定时， 使用它的 id 作为参数。

结果对象被传递给 applyState 。 applyState 的默认实现只是简单地把属性拷贝到对象中， 但是开发者可以覆盖此方法以支持更多行为。

通过向 beforestaterestore, staterestore, beforestatesave 和 statesave 事件上绑定监听器，你可以在保存和恢复状态时进行额外的处理。

Component
style : String
被添加到组件元素的特定样式。 必须是按照...
被添加到组件元素的特定样式。 必须是按照 Ext.Element.applyStyles 类指定格式的合法参数值。

new Ext.Panel({
    title: 'Some Title',
    renderTo: Ext.getBody(),
    width: 400, height: 300,
    layout: 'form',
    items: [{
        xtype: 'textarea',
        style: {
            width: '95%',
            marginBottom: '10px'
        }
    },
        new Ext.Button({
            text: 'Send',
            minWidth: '100',
            style: {
                marginBottom: '10px'
            }
        })
    ]
});
Component
tabCls : String
此配置选项被用在TabPanel的子组件上。 一个CSS类被应用到tab条(译者注：指在顶部显...
此配置选项被用在TabPanel的子组件上。 一个CSS类被应用到tab条(译者注：指在顶部显示的小方块，每个页面对应一个)项目上，以描绘子组件，允许 应用特殊的样式。
TabPanel
tabMargin : Number
像素值，被计算到tab页的尺寸和滚动条中的空间。 如果你在CSS中改变margin，你需要更新此值以便能正确计算...
像素值，被计算到tab页的尺寸和滚动条中的空间。 如果你在CSS中改变margin，你需要更新此值以便能正确计算 resizeTabs 以及滚动tab页。(默认为 2)
TabPanel
tabPosition : String
渲染tab条的位置(默认为 'top')。 另一个支持的唯一值是 'bottom'...
渲染tab条的位置(默认为 'top')。 另一个支持的唯一值是 'bottom'. 注意: 只有tabPosition: 'top'时才支持tab页滚动。
TabPanel
tabTip : String
注: 这个配置只用于当该组件作为TabPanel的一个子项目时使用...

注: 这个配置只用于当该组件作为TabPanel的一个子项目时使用。

一个String类型的innerHTML(支持html标签)，当鼠标放在该选项上的时，显示一个tooltip。为了tips能够被渲染，Ext.QuickTips.init()必须被提前调用。
BoxComponent
tabWidth : Number
每个新tab的初始宽度像素值(默认为120)
TabPanel
tbar : Object/Array
panel的顶部工具栏。 此参数可以是一个 The top toolbar of the panel. This can be a Ext.Toolbar 对象、一个工具栏配置、或者一个被添加到工具栏的...

panel的顶部工具栏。 此参数可以是一个 The top toolbar of the panel. This can be a Ext.Toolbar 对象、一个工具栏配置、或者一个被添加到工具栏的buttons/button配置数组。 注意，在渲染之后此参数无效。如需在渲染之后访问顶部工具栏，请使用 getTopToolbar。

注意:尽管Toolbar可以包含Field组件，但它们不会 通过加载祖先FormPanel而被更新。Panel的工具栏不是标准Container->Component 层次的一部分，所以它们不会被扫面以收集表单项。但是，这些值还是会 被提交，因为提交表单的参数是从DOM树中收集的。

Panel
tbarCfg : Object
一个DomHelper 元素的配置对象，描述了当前Panel的tbar元素结构。 另请参见...

一个DomHelper 元素的配置对象，描述了当前Panel的tbar元素结构。 另请参见 bodyCfg 。

Panel
title : String
被用作innerHTML的标题文本(接受html标签) ，用来显示在panel的...
被用作innerHTML的标题文本(接受html标签) ，用来显示在panel的 header 中(默认为'')。 当 title 被指定时， header 元素将会被自动创建并显示，除非 header 被显式地设置为 false 。 如果你不在配置时指定一个 title ， 但是你想以后设置，你必须要么 指定一个非空的 title (一个空格' ' 也可以)或者指定 header:true ，这样容器元素将会被创建。
Panel
tpl : Mixed
一个 Ext.Template , Ext.XTemplate 或者一个用来形成一个Ext.XTemplate的字符串数组...
一个 Ext.Template , Ext.XTemplate 或者一个用来形成一个Ext.XTemplate的字符串数组。 与 data 和 tplWriteMode 配置项协同使用。
Component
tplWriteMode : String
刷新组件的内容区域时使用的Ext.(X)Template方式。 默认为'overwrite' (参见 Ext.XTemplate.overwrite )。
刷新组件的内容区域时使用的Ext.(X)Template方式。 默认为'overwrite' (参见 Ext.XTemplate.overwrite )。
Component
unstyled : Boolean
覆盖 baseCls 设置为 baseCls = 'x-plain' ， 除了必须的属性之外，它将panel渲染成无样式的...
覆盖 baseCls 设置为 baseCls = 'x-plain' ， 除了必须的属性之外，它将panel渲染成无样式的，以便Ext布局功能能起作用 (例如overflow:hidden)。
Panel
wheelIncrement : Number
在滚动tab页时，鼠标滚轮滚动增加的像素值(默认为 20).
TabPanel
width : Number
组件的宽度(默认值为 auto)。注:如果想使用百分比的方式...
组件的宽度(默认值为 auto)。注:如果想使用百分比的方式来设置值，请查看 Ext.Component.anchor。
BoxComponent
x : Number
如果被包含在一个指定位置的容器中，这个值表示x(left)坐标值。
BoxComponent
xtype : String
需要创建配置的xtype。 当传递一个配置对象给构造函数时...
需要创建配置的xtype。 当传递一个配置对象给构造函数时，此配置选项不会被使用。 只有在使用懒初始化的时候此配置项才会被使用，此时容器的子项目不是 通过一个完整的实例组件，而是通过一个Component配置指定的。 在渲染时，将会查找xtype以决定创建何种类型的子组件。

预定义的xtype列表如下： here。

如果你继承Component创建你自己的组件，你需要使用Ext.ComponentMgr.registerType 对它们进行注册，以便利用懒初始化和渲染机制。
Component
y : Number
如果被包含在一个指定位置的容器中，这个值表示y(top)坐标值。
BoxComponent

公共属性

Property Defined By
body : Ext.Element
Panel的body Element ，可以用来包含HTML内容。 内容可以在...
Panel的body Element ，可以用来包含HTML内容。 内容可以在html 配置项中指定，或者可以使用autoLoad 配置项被加载，或者通过Panel的Updater提供。 只读。

如果这被用来通过任意方式加载可视的HTML元素，那么Panel不可以被用作 一个Layout，用来容纳其它Panel。

如果当前Panel期望被用作一个Layout的宿主 (参见 layout) 那么body元素必须不能被加载或者改变---因为它处于Panel的Layout的控制 之下。

注意: 另请参见 el .

Panel
buttons : Array
Panel的按钮数组，它们从 buttons 配置属性创建。只读。
Panel
bwrap : Ext.Element
Panel的bwrapElement ，用来包含其它Panel元素(tbar, body, bbar, footer)。 参见 bodyCfg。 只读。
Panel
collapsed : Boolean
如果当前panel被折叠为true。只读。
Panel
dd : Ext.dd.DragSource.
如果当前Panel被配置为 draggable ，此参数将会包含一个 Ext.dd.DragSource 实例，它负责处理拖拽Panel...

如果当前Panel被配置为 draggable ，此参数将会包含一个 Ext.dd.DragSource 实例，它负责处理拖拽Panel。

开发者必须提供Ext.dd.DragSource的 抽象方法的实现，用来提供drag/drop过程中的每一步行为。 参见 draggable.
Panel
disabled : Boolean
当前组件处于无效状态时为true。 Read-only.
Component
el : Ext.Element
封装了当前组件的Ext.Element。 Read-only。通常情况下，这将是一个<DIV>元素，它由此类的...

封装了当前组件的Ext.Element。 Read-only。

通常情况下，这将是一个<DIV>元素，它由此类的 onRender方法创建，但是它可以通过使用 autoEl 配置项进行覆盖。

注意: 直到组件渲染完成此元素都将处于无效状态。

如需向当前组件的 DOM事件(而不是当前组件自己的Observable事件)添加监听器， 更多建议，参见 listeners 配置项，或者直接使用一个render监听器:

new Ext.Panel({
    title: 'The Clickable Panel',
    listeners: {
        render: function(p) {
            // Append the Panel to the click handler's argument list.
            p.getEl().on('click', handlePanelClick.createDelegate(null, [p], true));
        },
        single: true  // Remove the listener after first invocation
    }
});

另请参见 getEl

Component
footer : Ext.Element
Panel底部Element 。只读。此元素被用来容纳Panel的...
Panel底部Element 。只读。

此元素被用来容纳Panel的 buttons 或者 fbar 。

注意: 另请参见 el 的注释。

Panel
hidden : Boolean
如果当前组件处于隐藏状态，此值为true。Read-only。
Component
initialConfig : Object
当前组件的初始化配置描述。 Read-only。
Component
items : MixedCollection
当前容器中的子组件集合 Ext.util.MixedCollection
Container
ownerCt : Ext.Container
组件所属的Container (默认为undefined，当前组件被添加到一个容器中时此值被自动设置)...
组件所属的Container (默认为undefined，当前组件被添加到一个容器中时此值被自动设置)。 Read-only。

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

Component
private : Object
我们只能在一块可见的区域进行布局。 布局目标*或者它的任何父元素* 为...
我们只能在一块可见的区域进行布局。 布局目标*或者它的任何父元素* 为display:none， 将意味着它没有一块可见的区域。
Container
refOwner : Ext.Container
如果当前组件是一个容器的孩子，并且是通过一个 ref 配置项被注册的，则此值为 ref 引用被插入到的祖先容器。
如果当前组件是一个容器的孩子，并且是通过一个 ref 配置项被注册的，则此值为 ref 引用被插入到的祖先容器。
Component
rendered : Boolean
如果当前组件已经被渲染了，此值为true。Read-only.
Component

公共方法

Method Defined By
TabPanel ( Object config )
参数:
  • config : Object
    配置选项
返回值:
  • void
TabPanel
activate ( String/Panel tab ) : void
参见 setActiveTab. 将指定的tab设置为当前活动的tab. 此方法触发beforetabchange 事件...
参见 setActiveTab. 将指定的tab设置为当前活动的tab. 此方法触发beforetabchange 事件，可以返回 false取消变换tab。
参数:
  • tab : String/Panel
    需要设置为活动状态的id或者tab Panel
返回值:
  • void
TabPanel
add ( ...Object/Array component ) : Ext.Component/Array
向当前容器中添加 Component(s)。 描述 :在添加之前触发 beforeadd 事件...

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

描述 :

  • 在添加之前触发 beforeadd 事件
  • 将会相应地应用 容器的default config values (细节参见 defaults )。
  • 在组件添加之后触发 add 事件。

注意 :

  • 当调用 add 时如果容器已经被渲染， 你可能需要调用 doLayout 方法来刷新视图，它将导致所有尚未渲染的子组件进行渲染操作。 此操作是必须的，这样你可以 add 多个子组件而只刷新一次layout。 示例用法:

var tb = new Ext.Toolbar();
tb.render(document.body);  // toolbar is rendered
tb.add({text:'Button 1'}); // add multiple items (defaultType for Toolbar is 'button')
tb.add({text:'Button 2'});
tb.doLayout();             // refresh the layout
  • 警告: 使用BorderLayout布局的容器可能不能删除或者添加组件。 更多细节参见BorderLayout 的注释。
参数:
  • component : ...Object/Array

    需要添加的一个或多个组件，或者是一个组件数组。 更多信息参见 items 。

返回值:
  • Ext.Component/Array
    被添加的组件。
Container
addButton ( String/Object config , Function handler , Object scope ) : Ext.Button
向当前panel中添加一个按钮。注意，此方法必须在渲染之前调用。 首选的方式是通过...
向当前panel中添加一个按钮。注意，此方法必须在渲染之前调用。 首选的方式是通过buttons 配置项添加按钮。
参数:
  • config : String/Object
    一个合法的Ext.Button 配置。字符串将会变成默认按钮配置文本，对象将会被看做一个按钮配置对象。
  • handler : Function
    在按钮Ext.Button.click 时被调用的函数
  • scope : Object
    作用域( this 引用)，按钮处理函数将会在其中被执行。默认为Button.
返回值:
  • Ext.Button
    被添加的按钮
Panel
addClass ( string cls ) : Ext.Component
为组件底层的元素添加CSS样式。
为组件底层的元素添加CSS样式。
参数:
  • cls : string
    需要添加的CSS样式的class名称
返回值:
  • Ext.Component
    this
Component
addEvents( Object|String o, string Optional. ) : void
添加指定的事件到事件列表上，事件会被该Observable触发。
添加指定的事件到事件列表上，事件会被该Observable触发。
参数:
  • o : Object|String
    以事件名作为属性true作为值的对象 或者当多个事件名被分开的传递时则为第一个事件名。
  • Optional. : string
    事件名被分开的传递时则为事件名。 用法:
    this.addEvents('storeloaded', 'storecleared');
返回值:
  • void
Observable
addListener( String eventName, Function handler, [Object scope], [Object options] ) : void
给对象添加事件处理器。
给对象添加事件处理器。
参数:
  • eventName : String
    监听的事件名。
  • handler : Function
    事件调用的方法
  • scope : Object
    （可选）处理方法执行的作用域 (this的引用 reference)。 如果被忽略。默认为触发事件的对象。
  • options : Object
    （可选）包含处理器配置和属性的对象。 可能包含以下的属性:
    • scope : Object
      处理方法执行的作用域(this的引用) 。 如果被忽略。默认为触发事件的对象。
    • delay : Number
      在触发事件后延迟调用处理器的毫秒数。
    • single : Boolean
      如果为True则添加一个处理器来处理下一次的事件触发（仅一次），然后移除自己。
    • buffer : Number
      使得处理器延迟指定毫秒数后预定的运行在 一个Ext.util.DelayedTask中 。 如果事件在时间内再一次被触发，原始的处理器不会被调用，但是新的处理器会预定的在他的位置上。
    • target : Observable
      如果事件在目标的Observable上触发则仅仅调用处理器， 否则 事件会从子类的Observable上冒泡

    组合选项
    使用这些选项参数,可能会组合出不同类型的监听器：

    一个延迟的，一次性的监听器。

    myDataView.on('click', this.onClick, this, {
single: true,
delay: 100
});

    一次调用附加多个处理器
    该方法同样支持传递一个包含指定的多个处理器的属性的配置对象参数。

    myGridPanel.on({
'click' : {
    fn: this.onClick,
    scope: this,
    delay: 100
},
'mouseover' : {
    fn: this.onMouseOver,
    scope: this
},
'mouseout' : {
    fn: this.onMouseOut,
    scope: this
}
});

    或者一个简写的语法：

    myGridPanel.on({
'click' : this.onClick,
'mouseover' : this.onMouseOver,
'mouseout' : this.onMouseOut,
 scope: this
});
返回值:
  • void
Observable
applyToMarkup ( String/HTMLElement el ) : void
将此组件添加到已存在的有效的HTML标签中。 使用该方法时，无需再调用render()方法。
将此组件添加到已存在的有效的HTML标签中。 使用该方法时，无需再调用render()方法。
参数:
  • el : String/HTMLElement
返回值:
  • void
Component
beginUpdate () : void
在进行批量操作时挂起所有内部的运算和滚动操作。 参见endUpdate
在进行批量操作时挂起所有内部的运算和滚动操作。 参见 endUpdate
参数:
  • 无。
返回值:
  • void
TabPanel
bubble ( Function fn , [ Object scope ], [ Array args ] ) : Ext.Container
沿着component/container继承结构进行冒泡， 在每个组件上调用指定的函数。 所调用函数的作用域...
沿着component/container继承结构进行冒泡， 在每个组件上调用指定的函数。 所调用函数的作用域( this)将会是 指定的作用域或者是当前组件。 如果在函数任何一点上返回false，即停止冒泡过程
参数:
  • fn : Function
    需要调用的函数
  • scope : Object
    (可选) 函数的作用域(默认为当前节点)
  • args : Array
    (可选) 调用函数时需要传递的参数( 默认传递当前组件)
返回值:
  • Ext.Container
    this
Container
cascade ( Function fn , [ Object scope ], [ Array args ] ) : Ext.Container
从当前组件(第一个被调用的组件)开始，沿着component/container的继承树向下回溯...
从当前组件(第一个被调用的组件)开始，沿着component/container的继承树向下回溯， 在每个组件上调用指定的方法， 调用方法时的(this)作用域为指定的scope或者为当前组件。 传递给方法的参数为传递进来args或者当前组件。 在起泡的任意一个节点上，如果function返回false，即停止在那个分支上。
参数:
  • fn : Function
    需要调用的函数
  • scope : Object
    (可选)函数的作用域(默认为当前组件)
  • args : Array
    (可选) 调用函数时传递的参数 (默认传递当前组件)
返回值:
  • Ext.Container
    this
Container
cloneConfig ( Object overrides ) : Ext.Component
默认使用原先传递给当前实例的配置值克隆当前组件。
默认使用原先传递给当前实例的配置值克隆当前组件。
参数:
  • overrides : Object
    一个新的配置项，包含需要覆盖到克隆版本的所有属性。 可以传递一个id参数给此对象，否则将自动生成一个新的id以避免发生重复。
返回值:
  • Ext.Component
    当前组件的克隆副本
Component
collapse ( Boolean animate ) : Ext.Panel
折叠panel的body，这样它就变成隐藏的。 触发beforecollapse 事件...
折叠panel的body，这样它就变成隐藏的。 触发beforecollapse 事件，处理函数返回false可以取消折叠操作。
参数:
  • animate : Boolean
    True将会在变换时使用动画效果，其它为false( 默认为panel的animCollapse 配置项的值)
返回值:
  • Ext.Panel
    this
Panel
destroy () : void
通过如下方法销毁对象：删除所有的事件监听器、将组件的元素从DOM树中删除...
通过如下方法销毁对象：删除所有的事件监听器、将组件的元素从DOM树中删除（如果可以）、 将组件从它的 Ext.Container（如果可用）中删除、 并且将它从Ext.ComponentMgr中 注销。 销毁操作一般由框架自动完成，一般情况下不需要直接调用该方法。
参数:
  • 无。
返回值:
  • void
Component
disable () : Ext.Component
将组件置为无效状态，并出发'disable'事件。
将组件置为无效状态，并出发'disable'事件。
参数:
  • 无。
返回值:
  • Ext.Component
    this
Component
doLayout ( [ Boolean shallow ], [ Boolean force ] ) : Ext.Container
强制容器的布局进行重新计算。 在向一个已经渲染的容器中添加...
强制容器的布局进行重新计算。 在向一个已经渲染的容器中添加一个新的组件， 或者改变子组件的尺寸/位置参数之后，必须调用此函数。
参数:
  • shallow : Boolean
    (可选) 设置为true时将仅仅计算当前组件的布局， 并且让子组件在需要时自动计算布局 (默认为flase，它将递归地调用每个子容器的doLayout方法)
  • force : Boolean
    (可选) 设置为true将强制进行布局，即使项目是隐藏的也进行。
返回值:
  • Ext.Container
    this
Container
enable () : Ext.Component
将组件置为有效状态并触发'enable'事件。
将组件置为有效状态并触发'enable'事件。
参数:
  • 无。
返回值:
  • Ext.Component
    this
Component
enableBubble( String/Array events ) :void
是否现在使得事件会被该Observable触发并调用 this.getBubbleTarget()方法在拥有者的继承树...

是否现在使得事件会被该Observable触发并调用 this.getBubbleTarget()方法在拥有者的继承树中冒泡。Observable的基础类中没有该方法的实现。

该方法一般被Ext.Components用来冒泡事件到拥有者的容器。参看Ext.Component.getBubbleTarget默认的实现 在Ext.Component中返回组件的直接拥有者。但是如果需要的是一个已知的目标，该方法可以被重写来更快的访问需求的目标。

例子:

Ext.override(Ext.form.Field, {
    // 添加方法到Field的initComponent上改变事件为冒泡
    initComponent : Ext.form.Field.prototype.initComponent.createSequence(function() {
        this.enableBubble('change');
    }),

    // 我们知道我们想让Field的事件冒泡到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() {
            // 如果样式被修改标题会变红。
            myForm.header.setStyle('color', 'red');
        }
    }
});
参数:
  • events : String/Array
    冒泡的事件名，或事件名数组
返回值:
  • void
Observable
endUpdate () : void
恢复计算并且在批量操作结束之后滚动。 参见beginUpdate
恢复计算并且在批量操作结束之后滚动。 参见 beginUpdate
参数:
  • 无。
返回值:
  • void
TabPanel
expand ( Boolean animate ) : Ext.Panel
展开panel的body以便让其变得可见。 触发beforeexpand 事件...
展开panel的body以便让其变得可见。 触发beforeexpand 事件，如果它返回false将会取消展开操作。
参数:
  • animate : Boolean
    True将会在变换过程中使用动画效果，否则为false (默认为panel的 animCollapse 配置项的值)
返回值:
  • Ext.Panel
    this
Panel
find ( String prop , String value ) : Array
根据属性查找当前容器中任何层次上的组件
根据属性查找当前容器中任何层次上的组件
参数:
  • prop : String
  • value : String
返回值:
  • Array
    Ext.Component数组
Container
findBy ( Function fn , [ Object scope ] ) : Array
根据一个自定义的函数，查找当前容器中任意层级上的一个组件。 如果传递的函数返回true...
根据一个自定义的函数，查找当前容器中任意层级上的一个组件。 如果传递的函数返回true，组件将会被包含在结果中。 函数将会被用如下参数(component, this container)进行调用。
参数:
  • fn : Function
    需要调用的函数
  • scope : Object
    可选
返回值:
  • Array
    Ext.Component数组
Container
findById ( String id ) : Ext.Component
通过id查找容器中位于任何层级上的组件
通过id查找容器中位于任何层级上的组件
参数:
  • id : String
返回值:
  • Ext.Component
Container
findByType ( String/Class xtype , [ Boolean shallow ] ) : Array
根据xtype或者类型，查找当前容器中任何层级上的组件
根据xtype或者类型，查找当前容器中任何层级上的组件
参数:
  • xtype : String/Class
    组件的xtype字符串，或者直接是组件的class类型
  • shallow : Boolean
    (可选) 此参数为flase时将检查当前组件是否是指定xtype的后裔 (这是默认情况)，或者设置为true， 将检查当前组件是否直接是指定xtype类型（译者注：即指不按照多态性进行检查）。
返回值:
  • Array
    Ext.Component数组
Container
findParentBy ( Function fn ) : Ext.Container
通过自定义的函数查找当前组件上层任何层次上的容器...
通过自定义的函数查找当前组件上层任何层次上的容器。 如果传递的函数返回true，容器对象将被返回。
参数:
  • fn : Function
    自定义的函数，使用如下参数调用(container,this component)。
返回值:
  • Ext.Container
    自定义函数返回true的第一个容器
Component
findParentByType ( String/Class xtype ) : Ext.Container
通过xtype或者class查找当前组件上层任何层次上的容器
通过xtype或者class查找当前组件上层任何层次上的容器
参数:
  • xtype : String/Class
    组件的xtype字符串，或者直接是组件的class
返回值:
  • Ext.Container
    符合指定xtype或者class的第一个容器
Component
fireEvent( String eventName, Object... args ) : Boolean
用传入的参数触发指定的事件 (减去事件名)。 一个事件可以被设置为冒泡 Obse...

用传入的参数触发指定的事件 (减去事件名)。

一个事件可以被设置为冒泡到Observable父类继承树(参看 Ext.Component.getBubbleTarget) 调用enableBubble实现。

参数:
  • eventName : String
    触发的事件名。
  • args : Object...
    传递给处理器的可变长度参数。
返回值:
  • Boolean
    如果有任何的处理器返回false则返回false，否则返回true。
Observable
focus ( [ Boolean selectText ], [ Boolean/Number delay ] ) : Ext.Component
尝试将当前组件设为焦点。
尝试将当前组件设为焦点。
参数:
  • selectText : Boolean
    (可选) 如果可用，同时选中组件内部的文本
  • delay : Boolean/Number
    (可选)将当前组件设置为焦点的延迟时间(设置为true等于0毫秒)
返回值:
  • Ext.Component
    this
Component
get ( String/Number key ) : Ext.Component
获取当前容器包含的一个组件( items.get(key)方法的别名)
获取当前容器包含的一个组件( items.get(key)方法的别名)
参数:
  • key : String/Number
    组件的索引
返回值:
  • Ext.Component
    Ext.Component
Container
getActiveTab () : BoxComponent
返回当前活动tab组件。注意，在TabPanel激活一个子组件之前， 此方法将会返回...
返回当前活动tab组件。注意，在TabPanel激活一个子组件之前， 此方法将会返回 activeTab 配置项中项目。
参数:
  • 无。
返回值:
  • BoxComponent
    当前活动的子组件，如果有活动的；或者返回 {@link #activeTab}配置值。
TabPanel
getBottomToolbar () : Ext.Toolbar
返回panel底部区域toolbar ( bbar )。
返回panel底部区域toolbar ( bbar )。
参数:
  • 无。
返回值:
  • Ext.Toolbar
    toolbar
Panel
getBox ( [ Boolean local ] ) : Object
获取组件底层元素当前盒子模型的尺寸。（译者注：盒子模型是CSS术语，详细解释请自行搜索。）
获取组件底层元素当前盒子模型的尺寸。（译者注：盒子模型是CSS术语，详细解释请自行搜索。）
参数:
  • local : Boolean
    (可选)值为true时，组件的left值和top值将代替页面的XY被返回。(默认值为false)
返回值:
  • Object
    返回值的格式{x, y, width, height}
BoxComponent
getBubbleTarget () : Ext.Container
为Observable的fireEvent方法提供链接，它沿着继承结构进行冒泡操作。
为Observable的fireEvent方法提供链接，它沿着继承结构进行冒泡操作。
参数:
  • 无。
返回值:
  • Ext.Container
    拥有当前组件的容器。
Component
getComponent ( String/Number comp ) : Ext.Component
检查当前容器的 items property 并且获取当前容器的一个直接的子组件。
检查当前容器的 items property 并且获取当前容器的一个直接的子组件。
参数:
  • comp : String/Number
    参数可以是以下任何值：
    • 一个 String : 代表子组件的 itemId 或者 id
    • 一个 Number : 代表子组件在 items property 中的位置

    其它信息参见 Ext.util.MixedCollection.get。

返回值:
  • Ext.Component
    组件(如果有找到)。
Container
getEl () : Ext.Element
返回 Ext.Element ，它包装了当前组件。...

返回 Ext.Element ，它包装了当前组件。

通常情况下，这将是一个<DIV>元素，它是由该类的onRender方法创建的， 但是可以使用autoEl配置项 覆盖它。

注意: 此元素将会一直处于无效状态直到当前组件渲染完成。

如需向当前组件的 DOM事件(而不是当前组件自己的Observable事件)添加监听器， 更多建议，参见 listeners 配置项，或者直接使用一个render监听器:

new Ext.Panel({
    title: 'The Clickable Panel',
    listeners: {
        render: function(p) {
            // Append the Panel to the click handler's argument list.
            p.getEl().on('click', handlePanelClick.createDelegate(null, [p], true));
        },
        single: true  // Remove the listener after first invocation
    }
});
参数:
  • 无。
返回值:
  • Ext.Element
    包装当前组件的元素。
Component
getFooterToolbar () : Ext.Toolbar
返回panel底部( fbar )区域的toolbar
返回panel底部( fbar )区域的toolbar
参数:
  • 无。
返回值:
  • Ext.Toolbar
    toolbar
Panel
getFrameHeight () : Number
返回当前panel框架元素的高度像素值 (包括所有top和bottom工具栏以及header和footer元素...
返回当前panel框架元素的高度像素值 (包括所有top和bottom工具栏以及header和footer元素， 但是不包括body高度)。 如需获取body高度，参见 getInnerHeight.
参数:
  • 无。
返回值:
  • Number
    框架高度
Panel
getFrameWidth () : Number
返回当前panel框架元素的宽度像素值 (不包含body宽度)。如需获得body宽度，参见...
返回当前panel框架元素的宽度像素值 (不包含body宽度)。如需获得body宽度，参见 getInnerWidth。
参数:
  • 无。
返回值:
  • Number
    框架宽度
Panel
getHeight () : Number
获取该组件的当前高度值。
获取该组件的当前高度值。
参数:
  • 无。
返回值:
  • Number
BoxComponent
getId () : String
返回当前组件的id，如果没有定义id，则自动生成并返回一个id:'ext-comp-'...
返回当前组件的 id 如果没有定义 id 则自动生成并返回一个 id

'ext-comp-' + (++Ext.Component.AUTO_ID)
参数:
  • 无。
返回值:
  • String
    id
Component
getInnerHeight () : Number
返回body元素的高度像素值(不包括任何框架元素的高度)。 对于框架高度参见...
返回body元素的高度像素值(不包括任何框架元素的高度)。 对于框架高度参见 getFrameHeight。
参数:
  • 无。
返回值:
  • Number
    body高度
Panel
getInnerWidth () : Number
返回body元素宽度像素值(不包含任何框架元素的宽度)。 对于框架宽度，参见 getFrameWidth。
返回body元素宽度像素值(不包含任何框架元素的宽度)。 对于框架宽度，参见 getFrameWidth。
参数:
  • 无。
返回值:
  • Number
    body宽度
Panel
getItem ( String id ) : Panel
根据指定的id获取tab页。
根据指定的id获取tab页。
参数:
  • id : String
    tab id
返回值:
  • Panel
    tab
TabPanel
getItemId () : String
返回当前组件的 itemId 。 如果没有通过配置参数指定 itemId 那么，将会使用...
返回当前组件的 itemId 。 如果没有通过配置参数指定 itemId 那么，将会使用 getId 返回 id 。
参数:
  • 无。
返回值:
  • String
Component
getLayout () : ContainerLayout
返回容器当前使用的布局管理器。 如果容器当前没有设置布局管理器， 将会创建一个默认的...
返回容器当前使用的布局管理器。 如果容器当前没有设置布局管理器， 将会创建一个默认的 Ext.layout.ContainerLayout 并被设置为容器的布局管理器。
参数:
  • 无。
返回值:
  • ContainerLayout
    容器的布局管理器
Container
getLayoutTarget () : Ext.Element
返回当前容器中用来包含子组件的元素。提供了一个 可以返回容器的...

返回当前容器中用来包含子组件的元素。

提供了一个 可以返回容器的Element 的实现， 但是，如果容器有更复杂的结构， 可以覆盖此实现以返回 layout 在其中渲染子组件的元素。

参数:
  • 无。
返回值:
  • Ext.Element
    在其中渲染子组件的元素。
Container
getOuterSize () : Object
获取当前组件所在元素的尺寸大小，包括边缘的空白处。
获取当前组件所在元素的尺寸大小，包括边缘的空白处。
参数:
  • 无。
返回值:
  • Object
    一个包含元素大小的对象 {width: (element width + left/right margins), height: (element height + top/bottom margins)}
BoxComponent
getPosition ( [ Boolean local ] ) : Array
获取组件底层元素当前的XY位置。
获取组件底层元素当前的XY位置。
参数:
  • local : Boolean
    (可选)如果为true，将返回元素的left和top值，而不是相对于页面内的 XY。(默认值为 false)
返回值:
  • Array
    元素的XY位置值(例如：[100, 200])
BoxComponent
getResizeEl () : Ext.Element
返回该组件的最外层用来定义这些组件整体大小的Element...

返回该组件的最外层用来定义这些组件整体大小的Element对象。

通常用 getEl 方法将会返回相同的Element对象，但在有些情况下，组件可能有一些更多的封装了它的主要动态Element对象的Element对象。

例如ComboBox。它是封装在一个包含<input>元素的包装元素里(这将返回其 getEl方法和触发按钮的元素)。返回的元素为resizeEl。

参数:
  • 无。
返回值:
  • Ext.Element
    The Element which is to be resized by size managing layouts.
BoxComponent
getSize () : Object
获取组件底层元素当前的大小。
获取组件底层元素当前的大小。
参数:
  • 无。
返回值:
  • Object
    一个包含元素大小的对象{width: (element width), height: (element height)}
BoxComponent
getTabEl ( Panel/Number/String tab ) : HTMLElement
获取tab的DOM元素，去掉活动元素，它使得具有指定ID的子面板具有激活状态...
获取tab的DOM元素，去掉活动元素，它使得具有指定ID的子面板具有激活状态。 访问此对象可以改变项目的视觉状态，例如改变CSS类名。
参数:
  • tab : Panel/Number/String
    tab组件，或者tab的索引位置，或者tab的id/itemId
返回值:
  • HTMLElement
    DOM节点
TabPanel
getTemplateArgs ( Ext.BoxComponent item ) : Object
提供模板参数，用来在tab条(译者注：指在顶部显示的小方块，每个页面对应一个)...

提供模板参数，用来在tab条(译者注：指在顶部显示的小方块，每个页面对应一个)渲染一个tab选择器项目。

此方法返回一个hash对象，包含了 TabPanel的itemTpl 创建格式化的、可点击的选择器元素所需使用的参数。 必须返回的参数有:

  • id : String
    关联到item的唯一标志
  • text : String
    需要显示的文本
  • cls : String
    CSS类名
  • iconCls : String
    提供图标外观的CSS类
参数:
  • item : Ext.BoxComponent
    BoxComponent， 将会为它在tab条(译者注：指在顶部显示的小方块，每个页面对应一个)创建一个选择器元素。
返回值:
  • Object
    一个hash对象，包含了渲染选择器元素所必需的参数。
TabPanel
getTool ( String id ) : Object
根据id获取一个tool.
根据id获取一个tool.
参数:
  • id : String
返回值:
  • Object
    tool
Panel
getTopToolbar () : Ext.Toolbar
返回panel顶部区域的 toolbar ( tbar ).
返回panel顶部区域的 toolbar ( tbar ).
参数:
  • 无。
返回值:
  • Ext.Toolbar
    toolbar
Panel
getUpdater () : Ext.Updater
获取当前panel的 Ext.Updater .让你可以为当前panel的body执行Ajax更新。
获取当前panel的 Ext.Updater .让你可以为当前panel的body执行Ajax更新。
参数:
  • 无。
返回值:
  • Ext.Updater
    Updater
Panel
getWidth () : Number
获取该组件的当前宽度值。
获取该组件的当前宽度值。
参数:
  • 无。
返回值:
  • Number
BoxComponent
getXType () : String
获取当前组件的xtype，它是用 Ext.ComponentMgr 注册的。 所有可用的xtype列表，参见...
获取当前组件的xtype，它是用 Ext.ComponentMgr 注册的。 所有可用的xtype列表，参见 Ext.Component 类头部。示例用法:

var t = new Ext.form.TextField();
alert(t.getXType());  // alerts 'textfield'
参数:
  • 无。
返回值:
  • String
    The xtype
Component
getXTypes () : String
返回此组件的xtype继承树，用字符'-'分隔。 所有可用的xtype值...

返回此组件的xtype继承树，用字符'-'分隔。 所有可用的xtype值，请参见Ext.Component 类的头部。

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

示例用法:

var t = new Ext.form.TextField();
alert(t.getXTypes());  // alerts 'component/box/field/textfield'
参数:
  • 无。
返回值:
  • String
    xtype层次字符串
Component
hasListener( String eventName ) : Boolean
检测对象是否包含指定事件的任何监听器
检测对象是否包含指定事件的任何监听器
参数:
  • eventName : String
    检测的事件名
返回值:
  • Boolean
    如果事件被监听则为true，否则为false
Observable
hide () : Ext.Component
隐藏当前组件。 监听 beforehide' 事件并且返回false 可以取消隐藏组件的操作。 在隐藏组件之后触发...
隐藏当前组件。 监听 beforehide' 事件并且返回false 可以取消隐藏组件的操作。 在隐藏组件之后触发 ' hide' 事件。 如果组件被配置成 hidden 那么此方法在内部被调用。
参数:
  • 无。
返回值:
  • Ext.Component
    this
Component
hideTabStripItem ( Number/String/Panel item ) : void
为所传递的tab页隐藏顶部的tab条(译者注：指在顶部显示的小方块，每个页面对应一个)
为所传递的tab页隐藏顶部的tab块(译者注：指在顶部显示的小方块，每个页面对应一个)
参数:
  • item : Number/String/Panel
    tab页索引位置，id，或者item
返回值:
  • void
TabPanel
insert ( Number index , Ext.Component component ) : Ext.Component
在当前容器的指定索引处插入一个组件。 在插入之前触发...
在当前容器的指定索引处插入一个组件。 在插入之前触发 beforeadd 事件， 然后在组件被插入之后触发 add 事件。
参数:
  • index : Number
    组件会被插入到容器子项集合中时的索引位置
  • component : Ext.Component
    需要插入的子组件。

    Ext使用懒渲染，只有在必要的时候才会渲染插入的组件。

    如果使用懒渲染，可以传递一个组件配置对象以避免创建一个真实组件的开销， 这意味着，插入的组件不会立即被渲染。 为了利用这个“懒初始化”('lazy instantiation')， 必须把组件设置为它注册的 Ext.Component.xtype 值。

    所有可用的xtype列表，参见 Ext.Component。
返回值:
  • Ext.Component
    使用容器默认配置值插入的组件(或者配置对象)。
Container
isVisible () : Boolean
如果当前组件可见，返回true。
如果当前组件可见，返回true。
参数:
  • 无。
返回值:
  • Boolean
    如果当前组件可见，返回true，其它返回false。
Component
isXType ( String xtype , [ Boolean shallow ] ) : Boolean
Tests whether or not this Component is of a specific xtype. This can test whether this Component is descended from th...

测试此组件是否是指定的xtype。此方法既可以测试是否是指定的xtype的某个子类， 或者它是否直接是指定的xtype类(shallow=true)。

如果使用你自己的子类，必须知道组件必须注册它的xtype值。

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

示例用法:

var t = new Ext.form.TextField();
var isText = t.isXType('textfield');        // true
var isBoxSubclass = t.isXType('box');       // true, descended from BoxComponent
var isBoxInstance = t.isXType('box', true); // false, not a direct BoxComponent instance
参数:
  • xtype : String
    需要为当前组件进行检测的xtype
  • shallow : Boolean
    (可选) 如果为false，检测组件是否是xtype继承树中的某个子类（默认是这种情况）， 如果为true，只检测组件是否是指定的xtype类型。
返回值:
  • Boolean
    如果当前组件是指定xtype的子类，返回true，其它返回flase。
Component
load ( Object/String/Function config ) : Ext.Panel
立即使用XHR返回的内容装载当前panel的内容。
立即使用XHR返回的内容装载当前panel的内容。
参数:
  • config : Object/String/Function
    一个包含任何如下选项的配置对象:
    panel.load({
    url: 'your-url.php',
    params: {param1: 'foo', param2: 'bar'}, // or a URL encoded string
    callback: yourFunction,
    scope: yourObject, // optional scope for the callback
    discardUrl: false,
    nocache: false,
    text: 'Loading...',
    timeout: 30,
    scripts: false
});
    唯一的必须参数是url。 可选的nocache、text和script参数是 disableCaching、indicatorText和loadScripts的快捷方式， 它们被用来设置到当前panel的Updater实例所绑定的 属性上。
返回值:
  • Ext.Panel
    this
Panel
mon ( Observable|Element item , Object|String ename , Function fn , Object scope , Object opt ) : void
向任何Observable对象(或者元素)上添加监听器，监听器将会在组件...

向任何Observable对象(或者元素)上添加监听器，监听器将会在组件销毁时被自动删除。
用法：

myGridPanel.mon(myGridPanel.getSelectionModel(), 'selectionchange', handleSelectionChange, null, {buffer: 50});

or:

myGridPanel.mon(myGridPanel.getSelectionModel(), {
    selectionchange: handleSelectionChange,
    buffer: 50
});
参数:
  • item : Observable|Element
    需要添加listener/listeners的项目。
  • ename : Object|String
    事件名，或者一个包含事件名属性的对象。
  • fn : Function
    (可选) 如果 ename 参数是一个事件名，此参数为处理函数。
  • scope : Object
    (可选)如果 ename 参数是一个事件名称，此参数是作用域 ( this 引用)，监听函数将会在此作用域中被执行。
  • opt : Object
    (可选)如果 ename 参数是一个事件名称， 此参数是 addListener 配置项。
返回值:
  • void
Component
mun ( Observable|Element item , Object|String ename , Function fn , Object scope ) : void
删除通过mon 方法添加的监听器。
删除通过mon 方法添加的监听器。
参数:
  • item : Observable|Element
    需要删除listener/listeners的项目。
  • ename : Object|String
    事件名称，或者一个包含事件名称属性的对象。
  • fn : Function
    (可选)如果 ename 参数是一个事件名称，此参数是一个处理函数。
  • scope : Object
    (可选)如果 ename 参数是一个事件名称，此参数是作用域 ( this 引用)，监听函数将会在此作用域中被执行。
返回值:
  • void
Component
nextSibling () : Ext.Component
返回所属容器中的下一个组件
返回所属容器中的下一个组件
参数:
  • 无。
返回值:
  • Ext.Component
Component
on( String eventName, Function handler, [Object scope], [Object options] ) : void
给对象添加事件处理器 (addListener的简写形式)
给对象添加事件处理器 (addListener的简写形式。)
参数:
  • eventName : String
    监听的事件类型
  • handler : Function
    事件调用的方法
  • scope : Object
    （可选）处理方法执行时的作用域 (this 的引用)。 如果被忽略。默认为触发事件的对象。
  • options : Object
    可选 包含处理器配置的对象。
返回值:
  • void
Observable
previousSibling () : Ext.Component
返回所属容器中的前一个组件
返回所属容器中的前一个组件
参数:
  • 无。
返回值:
  • Ext.Component
Component
purgeListeners() : void
移除对象上所有的监听器
移除对象上所有的监听器
参数:
  • 无。
返回值:
  • void
Observable
readTabs ( Boolean removeExisting ) : void
True将会扫描当前tab面板中的标签，查找 使用 autoTabSelector 的 autoTabs
True将会扫描当前tab面板中的标签，查找 使用 autoTabSelector 的 autoTabs
参数:
  • removeExisting : Boolean
    True将会删除现有的tab页
返回值:
  • void
TabPanel
relayEvents( Object o, Array events ) : void
从指定的Observable上传递选择的事件就好像被当前对象触发一样。
从指定的Observable上传递选择的事件就好像被当前对象触发一样。
参数:
  • o : Object
    该Observable上的事件被当前对象传递。
  • events : Array
    传递的数组名。
返回值:
  • void
Observable
remove ( Component/String component , [ Boolean autoDestroy ] ) : Ext.Component
从当前容器中移除一个组件。 在移除之前触发 beforeremove 事件， 然后在组件被移除之后触发...
从当前容器中移除一个组件。 在移除之前触发 beforeremove 事件， 然后在组件被移除之后触发 remove 事件。
参数:
  • component : Component/String
    需要移除的组件引用或者id
  • autoDestroy : Boolean
    (可选) 设置为true将自动调用被删组件的 Ext.Component.destroy 函数。 默认为容器的 autoDestroy 配置值。
返回值:
  • Ext.Component
    被移除的组件。
Container
removeAll ( [ Boolean autoDestroy ] ) : Array
从当前容器中删除所有组件。
从当前容器中删除所有组件。
参数:
  • autoDestroy : Boolean
    (可选) 此参数为true时将自动调用 被删组件的 Ext.Component.destroy 方法。 默认为当前容器的 autoDestroy 配置值。
返回值:
  • Array
    被销毁的组件数组
Container
removeClass ( string cls ) : Ext.Component
从组件底层的元素上删除一个CSS类。
从组件底层的元素上删除一个CSS类。
参数:
  • cls : string
    需要移除的CSS类名
返回值:
  • Ext.Component
    this
Component
removeListener( String eventName, Function handler, [Object scope] ) : void
删除一个事件处理器。
删除一个事件处理器。
参数:
  • eventName : String
    处理器关联的事件类型。
  • handler : Function
    移除的处理器。 这应该是传递到addListener里的方法的引用。
  • scope : Object
    （可选）处理器指定的初始作用域。
返回值:
  • void
Observable
render ( [ Element/HTMLElement/String container ], [ String/Number position ] ) : void
在传递进来的HTML元素中渲染当前组件。...

在传递进来的HTML元素中渲染当前组件。

如果你正在使用一个Container 对象放置当前组件，那么请不要使用render方法。

当容器第一次被渲染时，它的子组件将会被容器的 layout 管理器渲染。

某些布局管理器允许动态添加子组件。它们包括 Ext.layout.CardLayout, Ext.layout.AnchorLayout, Ext.layout.FormLayout, Ext.layout.TableLayout。

当一个新的子组件被添加时，如果容器已经被渲染了， 你可能需要调用容器的 doLayout 方法来刷新视图，它将导致所有没有被渲染的子组件进行渲染操作。 此操作是必须的，这样你可以添加多个子组件而只刷新一次layout。

当创建复杂的UI时，非常重要的一点是，请记住调整子项目的尺寸和位置是容器的 layout 管理器的职责。 如果你希望子项目的尺寸对用户交互作出反应， 你必须为容器配置一个布局管理器，它将创建和管理你心里想要的那种布局。

忽略容器的layout 配置意味着将会使用一个基本的布局管理器，它除了按次序把子组件 渲染到容器中之外什么事情都不做。 这种情况下，任何尺寸和位置的调整操作都不会发生。

参数:
  • container : Element/HTMLElement/String
    (可选) 需要在其中渲染当前组件的元素。 如果它是从一个已存在的标签中创建的，此参数应该被忽略。
  • position : String/Number
    (可选) 容器中的一个元素ID或者一个DOM节点索引， 当前组件将会被插入到它前面 (默认append到容器的尾部)
返回值:
  • void
Component
resumeEvents() : void
重新开始触发事件。(参见suspendEvents) 如果事件以queueSuspended参数被挂起，则在事件被挂起时 ...
重新开始触发事件。(参见 suspendEvents) 如果事件以queueSuspended 参数被挂起，则在事件被挂起时触发的事件会被传递到所有的监听器上
参数:
  • 无。
返回值:
  • void
Observable
scrollToTab ( Panel item , Boolean animate ) : void
如果启用了tab滚动功能，此方法可以滚动到特定的tab
如果启用了tab滚动功能，此方法可以滚动到特定的tab
参数:
  • item : Panel
    需要滚动到的项目
  • animate : Boolean
    True将会启用动画效果
返回值:
  • void
TabPanel
setActiveTab ( String/Number item ) : void
将指定的tab设置为当前活动的tab. 此方法触发
将指定的tab设置为当前活动的tab. 此方法触发 beforetabchange 事件，它可以return false取消变换tab页。
参数:
  • item : String/Number
    需要激活的id或者tab Panel. 此参数可以是以下任意值:
    • 一个 String : 表示 itemId 或者是子组件的 id
    • 一个 Number : 表示 items 属性中子组件的位置

    附加信息参见Ext.util.MixedCollection.get.

返回值:
  • void
TabPanel
setAutoScroll ( Boolean scroll ) : Ext.BoxComponent
设置该组件内容溢出时是否自动显示滚动条。
设置该组件内容溢出时是否自动显示滚动条。
参数:
  • scroll : Boolean
    值为true的话组件自动显示滚动条。
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setDisabled ( Boolean disabled ) : Ext.Component
工具函数，使用布尔值设置有效/无效(disabled/enabled )。
工具函数，使用布尔值设置有效/无效(disabled/enabled )。
参数:
  • disabled : Boolean
返回值:
  • Ext.Component
    this
Component
setHeight ( Mixed height ) : Ext.BoxComponent
设置此组件的高度。该方法将触发resize事件。
设置此组件的高度。该方法将触发resize事件。
参数:
  • height : Mixed
    The new height to set.
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setIconClass ( String cls ) : void
设置CSS类，为当前panel提供图标图片。 如果已经设置了...
设置CSS类，为当前panel提供图标图片。 如果已经设置了，此方法将会替换任何现有的图标类并在完成之后触发 iconchange 事件。
参数:
  • cls : String
    新的CSS类名
返回值:
  • void
Panel
setPagePosition ( Number x , Number y ) : Ext.BoxComponent
设置组件在页面中的XY位置。 如果需要设置left和top值 ，请使用...
设置组件在页面中的XY位置。 如果需要设置left和top值 ，请使用setPosition方法。 该方法触发move事件。
参数:
  • x : Number
    The new x position
  • y : Number
    The new y position
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setPosition ( Number left , Number top ) : Ext.BoxComponent
设置组件的left和top值。设置组件的页面XY值，请使用setPagePosition方法。该方法触发...
设置组件的left和top值。设置组件的页面XY值，请使用setPagePosition方法。该方法触发move事件。
参数:
  • left : Number
    The new left
  • top : Number
    The new top
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setSize ( Mixed width , Mixed height ) : Ext.BoxComponent
设置BoxComponent的宽度和高度。 此方法触发resize事件...
设置BoxComponent的宽度和高度。 此方法触发resize事件。此方法可以接收单独的width或者height值作为参数， 或者你可以传递像这样的一个size对象： {width:10, height:20} 。
参数:
  • width : Mixed
    设置的新的width值。这可以是：
    • 一个Number类型指定Element新的宽度 Ext.Element.defaultUnit(默认为像素 :'px')。
    • 一个String类型用于设置width的CSS样式。
    • 一个size对象格式为 {width: widthValue, height: heightValue} 。
    • 值为 undefined 时，保留原来的width不变。
  • height : Mixed
    设置的新的height值(如果第一个参数传递了一个size对象，此参数没有必要传递)。这可以是：
    • 一个Number类型指定Element新的高度 Ext.Element.defaultUnit(默认为像素 :'px')。
    • 一个String类型用于设置height的CSS样式。也有可能不会被使用到。
    • 值为 undefined 时，保留原来的height不变。
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setTitle ( String title , [ String iconCls ] ) : void
为panel设置标题文本，也可选择设置 icon class。...

为panel设置标题文本，也可选择设置 icon class。

为了能够设置标题，必须已经为Panel创建了一个header元素。 要么通过向Panel上注册一个非空的 title ，或者配置 header: true ，可触发此操作(译者注：指为Panel创建header元素)。

参数:
  • title : String
    需要设置的标题文本
  • iconCls : String
    (可选) iconCls 一个用户定义的CSS类，为当前panel提供图标图片。
返回值:
  • void
Panel
setVisible ( Boolean visible ) : Ext.Component
工具方法，通过使用布尔值隐藏或者显示当前组件。
工具方法，通过使用布尔值隐藏或者显示当前组件。
参数:
  • visible : Boolean
    true时显示，false时隐藏
返回值:
  • Ext.Component
    this
Component
setWidth ( Mixed width ) : Ext.BoxComponent
设置组件的宽度。 此方法触发resize事件。
设置组件的宽度。 此方法触发resize事件。
参数:
  • width : Mixed
    The new width to set.
返回值:
  • Ext.BoxComponent
    this
BoxComponent
show () : Ext.Component
显示当前组件。监听' beforeshow' 事件，返回 false 取消显示组件...
显示当前组件。监听' beforeshow' 事件，返回 false 取消显示组件。在显示组件之后触发' show' 事件。
参数:
  • 无。
返回值:
  • Ext.Component
    this
Component
suspendEvents( Boolean queueSuspended ) : void
暂停触发所有的事件。 (参看resumeEvents)
暂停触发所有的事件。（参看 resumeEvents)
参数:
  • queueSuspended : Boolean
    如果传递为true则排列好暂停的事件使得在调用 resumeEvents 后再触发它们，而不是抛弃所有暂停的事件。
返回值:
  • void
Observable
syncSize () : Ext.BoxComponent
强制组件的大小按照此组件底层元素当前的高度和宽度计算。
强制组件的大小按照此组件底层元素当前的高度和宽度计算。
参数:
  • 无。
返回值:
  • Ext.BoxComponent
    this
BoxComponent
toggleCollapse ( Boolean animate ) : Ext.Panel
根据panel的当前状态，执行expand或者 collapse操作 的快捷方式。
根据panel的当前状态，执行expand或者 collapse操作 的快捷方式。
参数:
  • animate : Boolean
    True将会在转换过程中使用动画效果，否则为false (默认为panel的animCollapse 配置项的值)
返回值:
  • Ext.Panel
    this
Panel
un( String eventName, Function handler, [Object scope] ) : void
删除一个事件处理器(removeListener方法的简写形式)
删除一个事件处理器(removeListener方法的简写形式。)
参数:
  • eventName : String
    处理器关联的事件类型
  • handler : Function
    被删除的处理器 这应该是传入 addListener 中的方法的引用。
  • scope : Object
    （可选）为处理器指定的初始作用域。
返回值:
  • void
Observable
unhideTabStripItem ( Number/String/Panel item ) : void
为所传递的tab页取消隐藏tab 块项目(译者注：指在顶部显示的小方块，每个页面对应一个)
为所传递的tab页取消隐藏tab 块项目(译者注：指在顶部显示的小方块，每个页面对应一个)
参数:
  • item : Number/String/Panel
    tab索引位置，id或者item
返回值:
  • void
TabPanel
update ( Mixed htmlOrData , [ Boolean loadScripts ], [ Function callback ] ) : void
刷新组件的内部区域。
刷新组件的内部区域。
参数:
  • htmlOrData : Mixed
    如果已经通过tpl为当前组件配置了一个模板，那么 将会使用此参数来装配模板。 如果没有为当前组件配置模板，组件的内容区域将会通过Ext.Element 进行刷新。
  • loadScripts : Boolean
    (可选)只用在使用html配置时此参数才合法。默认为false。
  • callback : Function
    (可选)只用在使用html配置时此参数才合法。 当脚本加载完成时回调函数才被执行。
返回值:
  • void
Component
updateBox ( Object box ) : Ext.BoxComponent
设置此组件底层元素的盒子模型尺寸。(译者注：盒子模型是CSS术语，详细资料请自行搜索。)
设置此组件底层元素的盒子模型尺寸。(译者注：盒子模型是CSS术语，详细资料请自行搜索。)
参数:
  • box : Object
    一个格式为{x, y, width, height}的对象
返回值:
  • Ext.BoxComponent
    this
BoxComponent

公共事件

Event Defined By
activate : ( Ext.Panel p )
当Panel被设置为视觉活动状态之后触发。 注意Panel不直接支持活动状体，但是Panel的一些子类...
当Panel被设置为视觉活动状态之后触发。 注意Panel不直接支持活动状体，但是Panel的一些子类 (例如 Ext.Window)支持。 作为TabPanel子组件的Panel，在TabPanel的控制之下触发activate和deactivate事件。
监听器将会以如下参数格式被调用:
  • p : Ext.Panel
    被激活的Panel.
Panel
add : ( Ext.Container this , Ext.Component component , Number index )
监听器将会被使用如下的参数被调用:
  • this : Ext.Container
  • component : Ext.Component
    被添加的组件
  • index : Number
    将组件添加到容器子组件集合时的位置索引
Container
added : ( Ext.Component this , Ext.Container ownerCt , number index )
当一个组件被添加到一个Ext.Container时触发
当一个组件被添加到一个Ext.Container时触发
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • ownerCt : Ext.Container
    用于组件的容器
  • index : number
    添加组件的位置
Component
afterlayout : ( Ext.Container this , ContainerLayout layout )
当容器中的组件被指定的布局管理器排列的时候触发。
当容器中的组件被指定的布局管理器排列的时候触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Container
  • layout : ContainerLayout
    为当前容器提供的ContainerLayout实现
Container
afterrender : ( Ext.Component this )
在组件渲染完成之后触发...

在组件渲染完成之后触发。

afterrender事件在当前组件被rendered 结束之后、在为组件定义的所有afterRender方法执行之后 触发，并且，如果有stateful， 也在状态被保存之后才触发。

监听器将会以如下参数格式被调用:
  • this : Ext.Component
Component
beforeadd : ( Ext.Container this , Ext.Component component , Number index )
在任何 Ext.Component 被添加或者插入到容器中之前触发。 事件处理器可以返回false取消添加操作。
在任何 Ext.Component 被添加或者插入到容器中之前触发。 事件处理器可以返回false取消添加操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Container
  • component : Ext.Component
    被添加的组件
  • index : Number
    组件被添加到容器子项目集合中时的索引位置
Container
beforeclose : ( Ext.Panel p )
在Panel被关闭之前触发。 注意，Panel不直接支持关闭操作，但是Panel的一些子类(例如...
在Panel被关闭之前触发。 注意，Panel不直接支持关闭操作，但是Panel的一些子类(例如 Ext.Window) ，或者一个位于Ext.TabPanel中的Panel支持。 此事件仅被应用到这些子类中。处理函数可以返回false以取消关闭操作。
监听器将会以如下参数格式被调用:
  • p : Ext.Panel
    正在被关闭的Panel.
Panel
beforecollapse : ( Ext.Panel p , Boolean animate )
在Panel被折叠之前触发。监听器可以返回false取消折叠。
在Panel被折叠之前触发。监听器可以返回false取消折叠。
监听器将会以如下参数格式被调用:
  • p : Ext.Panel
    被折叠的Panel
  • animate : Boolean
    如果折叠操作使用了动画效果，此参数为true，其它为false
Panel
beforedestroy : ( Ext.Component this )
在组件 destroyed 之前触发。 在事件监听器中返回false以停止 destroy 操作。
在组件 destroyed 之前触发。 在事件监听器中返回false以停止 destroy 操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforeexpand : ( Ext.Panel p , Boolean animate )
在Panel被展开之前触发。监听器可以返回false取消展开操作。
在Panel被展开之前触发。监听器可以返回false取消展开操作。
监听器将会以如下参数格式被调用:
  • p : Ext.Panel
    被展开的Panel
  • animate : Boolean
    如果展开操作使用动画效果，为true，其它为false
Panel
beforehide : ( Ext.Component this )
在调用hide方法隐藏组件之前触发。 在事件监听器中返回false可以停止隐藏操作。
在调用hide方法隐藏组件之前触发。 在事件监听器中返回false可以停止隐藏操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforeremove : ( Ext.Container this , Ext.Component component )
从容器中删除任何Ext.Component 之前触发。 处理器可以返回false取消remove操作。
从容器中删除任何Ext.Component 之前触发。 处理器可以返回false取消remove操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Container
  • component : Ext.Component
    被删除的组件
Container
beforerender : ( Ext.Component this )
在组件被rendered 之前触发。 在事件监听器中返回false可以停止render 操作。
在组件被rendered 之前触发。 在事件监听器中返回false可以停止render 操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforeshow : ( Ext.Component this )
在调用show()方法现实组件之前触发。 事件处理函数返回false可以停止show。
在调用show 方法现实组件之前触发。 事件处理函数返回false可以停止show。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforestaterestore : ( Ext.Component this , Object state )
在组件状态恢复之前触发。返回false停止恢复状态操作。
在组件状态恢复之前触发。返回false停止恢复状态操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    StateProvider返回的状态哈希值。 如果没有禁止此事件，那么状态对象会被传递给applyState。 默认情况下，这样简单地把属性值拷贝到当前组件中。 可以覆盖此方法以提供自定的状态恢复操作。
Component
beforestatesave : ( Ext.Component this , Object state )
在组件状态被保存到配置的状态提供者之前触发。 返回false可以停止保存。
在组件状态被保存到配置的状态提供者之前触发。 返回false可以停止保存。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    状态值哈希。 这由在组件上调用getState() 方法决定。 此方法必须由开发者提供，返回是否需要对状态进行描述，默认情况下， Ext.Component有一个空实现。
Component
beforetabchange : ( TabPanel this , Panel newTab , Panel currentTab )
在改变活动tab页之前触发。处理函数可以return false取消改变。
在改变活动tab页之前触发。处理函数可以return false取消改变。
监听器将会以如下参数格式被调用:
  • this : TabPanel
  • newTab : Panel
    被激活的tab页
  • currentTab : Panel
    当前活动的tab页
TabPanel
bodyresize : ( Ext.Panel p , Number width , Number height )
在Panel被调整尺寸之后触发。
在Panel被调整尺寸之后触发。
监听器将会以如下参数格式被调用:
  • p : Ext.Panel
    被调整尺寸的Panel
  • width : Number
    Panel body的新宽度。
  • height : Number
    Panel body的新高度。
Panel
close : ( Ext.Panel p )
在Panel被关闭之后触发。注意，Panel不直接提供关闭操作， 但是Panel的一些子类(例如...
在Panel被关闭之后触发。注意，Panel不直接提供关闭操作， 但是Panel的一些子类(例如 Ext.Window) ，或者处于Ext.TabPanel中的Panel支持。
监听器将会以如下参数格式被调用:
  • p : Ext.Panel
    被关闭的Panel.
Panel
collapse : ( Ext.Panel p )
在Panel被折叠后触发。
在Panel被折叠后触发。
监听器将会以如下参数格式被调用:
  • p : Ext.Panel
    被折叠的Panel
Panel
contextmenu : ( TabPanel this , Panel tab , EventObject e )
从tab条中(译者注：指在顶部显示的小方块，每个页面对应一个)tab选择器元素上转发右键事件。
从tab条(译者注：指在顶部显示的小方块，每个页面对应一个)中tab选择器元素上转发右键事件。
监听器将会以如下参数格式被调用:
  • this : TabPanel
  • tab : Panel
    目标tab
  • e : EventObject
TabPanel
deactivate : ( Ext.Panel p )
在Panel被视觉上失去活动状态之后触发。 注意，Panel不直接支持此操作，但是Panel的一些子类...
在Panel被视觉上失去活动状态之后触发。 注意，Panel不直接支持此操作，但是Panel的一些子类 (例如Ext.Window)支持。 作为TabPanel的子组件的Panel将会在TabPanel的控制之下触发activate 和deactivate事件。
监听器将会以如下参数格式被调用:
  • p : Ext.Panel
    失去活动状态的Panel
Panel
destroy : ( Ext.Component this )
在组件被销毁之后触发。
在组件被destroyed之后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
disable : ( Ext.Component this )
在组件被设置为无效状态后触发。
在组件被设置为无效状态后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
enable : ( Ext.Component this )
当组件被设置为有效(enabled)之后触发。
当组件被设置为有效(enabled)之后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
expand : ( Ext.Panel p )
当Panel已经展开之后触发。
当Panel已经展开之后触发。
监听器将会以如下参数格式被调用:
  • p : Ext.Panel
    已经被展开的Panel.
Panel
hide : ( Ext.Component this )
在组件被隐藏之后触发。 当调用hide 方法隐藏组件之后触发。
在组件被隐藏之后触发。 当调用hide 方法隐藏组件之后触发。
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
iconchange : ( Ext.Panel p , String The , String The )
当Panel的图标被set或者 changed 之后触发。
当Panel的图标被set或者 changed 之后触发。
监听器将会以如下参数格式被调用:
  • p : Ext.Panel
    icon class被变化的Panel
  • The : String
    新icon类
  • The : String
    旧icon类
Panel
move : ( Ext.Component this , Number x , Number y )
在组件移动之后触发。
在组件移动之后触发。
监听器将会用如下的参数格式来调用:
  • this : Ext.Component
  • x : Number
    The new x position
  • y : Number
    The new y position
BoxComponent
remove : ( Ext.Container this , Ext.Component component )
监听器将会以如下的参数格式被调用:
  • this : Ext.Container
  • component : Ext.Component
    被删除的组件
Container
removed : ( Ext.Component this , Ext.Container ownerCt )
当一个组件被从Ext.Container容器中删除时触发
当一个组件被从Ext.Container容器中删除时触发
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • ownerCt : Ext.Container
    持有组件的容器
Component
render : ( Ext.Component this )
在组件被渲染之后触发。
在组件被 rendered(渲染) 之后触发。
监听器将以如下的参数格式被调用:
  • this : Ext.Component
Component
resize : ( Ext.Component this , Number adjWidth , Number adjHeight , Number rawWidth , Number rawHeight )
在组件被调整大小之后触发。
在组件被调整大小之后触发。
监听器将以如下的参数格式被调用:
  • this : Ext.Component
  • adjWidth : Number
    这是width调整后的值
  • adjHeight : Number
    这是height调整后的值
  • rawWidth : Number
    这是width原来的值
  • rawHeight : Number
    这是height原来的值
BoxComponent
show : ( Ext.Component this )
在调用show 方法显示组件之后触发。
在调用show 方法显示组件之后触发。
监听器将会用如下的参数格式被调用:
  • this : Ext.Component
Component
staterestore : ( Ext.Component this , Object state )
组件状态被存储之后触发。
组件状态被存储之后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    StateProvider返回的状态哈希值。 如果没有禁止此事件，那么状态对象会被传递给applyState。 默认情况下，这样简单地把属性值拷贝到当前组件中。 可以覆盖此方法以提供自定的状态恢复操作。
Component
statesave : ( Ext.Component this , Object state )
在组件状态被保存到所配置的状态提供者之后触发。
在组件状态被保存到所配置的状态提供者之后触发。
监听器将会用如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    状态值hash。 这是由在足见上调用getState() 方法决定的。 开发者必须提供此方法以返回是否需要恢复状态，默认情况下， Ext.Component有一个空实现。
Component
tabchange : ( TabPanel this , Panel tab )
在活动tab页变化之后触发。
在活动tab页变化之后触发。
监听器将会以如下参数格式被调用:
  • this : TabPanel
  • tab : Panel
    新的活动tab页
TabPanel
titlechange : ( Ext.Panel p , String The )
在Panel的标题被set或者 changed 之后触发。
在Panel的标题被set或者 changed 之后触发。
监听器将会以如下参数格式被调用:
  • p : Ext.Panel
    标题被改变的Panel.
  • The : String
    新的标题。
Panel


TaskRunner
    TaskMgr

Class Ext.TaskMgr

包: | Ext
定义类的文件: | TaskMgr.js
类: | TaskMgr
继承自: | TaskRunner
一个静态的Ext.util.TaskRunner实例，可以用来启动和停止任意的任务。 所支持的方法和任务配置参数，参见Ext.util.TaskRunner。
// 启动一个简单的定时任务，每隔一秒钟更新一次div
var task = {
    run: function(){
        Ext.fly('clock').update(new Date().format('g:i:s A'));
    },
    interval: 1000 //1秒
}
Ext.TaskMgr.start(task);

配置任务对象的方法参见 start方法。

这是一个单例的类，不能直接实例化。

公共属性

该类没有公共属性。

公共方法

Method Defined By
start ( Object task ) : Object
启动一个新的任务。
启动一个新的任务。
参数:
  • task : Object

    一个拥有以下属性的配置对象:

    • run : Function

      在这个任务中需要定时执行的函数。它会在每个任务间隔时间执行,并传递定义的 args 参数和执行计数。

      如果需要特定( this 引用)的作用域,则需要配置 scope 参数。

      函数返回 false 可终止该任务。

    • interval : Number
      任务执行的频率,单位毫秒。
    • args : Array
      (可选) 传递由 run 指定的函数的参数数组。如果没有指定，则传递当前执行计数。
    • scope : Object
      (可选) 执行 run 函数(this 引用)的作用域，默认为任务配置对象。
    • duration : Number
      (可选) 自动停止任务的时间长度,即任务最长运行时间,单位:毫秒(默认值为 indefinite)。
    • repeat : Number
      (可选) 自动停止任务前任务执行的最大重复次数 (默认值为 indefinite)。

    在每次执行前，Ext将 taskRunCount 属性注入每个任务对象中以使重复计数的运算可以被执行。

返回值:
  • Object
    该任务
TaskRunner
stop ( Object task ) : Object
停止一个运行中的任务。
停止一个运行中的任务。
参数:
  • task : Object
    要停止的任务。
返回值:
  • Object
    该任务
TaskRunner
stopAll () : void
立即停止当前运行的所有任务。
立即停止当前运行的所有任务。
参数:
  • 无。
返回值:
  • void
TaskRunner

公共事件

该类没有公共事件。


Class Ext.Template

包: | Ext
定义类的文件: | Template.js
类: | Template
子类: | XTemplate
继承自: | Object

描述一个HTML片段模板。 模板可以被precompiled 以提供高效的性能。

示例用法 参见constructor.

配置项

Config Options |  | Defined By
 | compiled : Boolean 指定为true可以理解编译模板(参见 compile )。默认为 false. | Template
 | disableFormats : Boolean 参见 disableFormats . | Template
 | re : RegExp 参见 re . | Template

公共属性

Property |  | Defined By
 | disableFormats : Boolean 参见 disableFormats . | Template
 | re : RegExp 参见 re . | Template

公共方法

Method Defined By
Template ( Mixed config )
可以给构造函数传递一个或者多个参数创建该类的实例:...
可以给构造函数传递一个或者多个参数创建该类的实例:
  • single argument : String/Array
    单个参数可以是一个String或者Array:
    • String :
      •
                                                        var t = new Ext.Template("<div>Hello {0}.</div>");
t.append('some-element', ['foo']);
    • Array :
      • 数组会被用 join( '') 连接起来。
      var t = new Ext.Template([
    '<div name="{id}">',
        '<span class="{cls}">{name:trim} {value:ellipsis(10)}</span>',
    '</div>',
]);
t.compile();
t.append('some-element', {id: 'myid', cls: 'myclass', name: 'foo', value: 'bar'});
  • 多个参数 : String, Object, Array, ...
    多个参数将会被用 join( '') 连接起来。
    var t = new Ext.Template(
    '<div name="{id}">',
        '<span class="{cls}">{name} {value}</span>',
    '</div>',
    // a configuration object:
    {
        compiled: true,      // compile immediately
        disableFormats: true // See Notes below.
    }
);

    注意:

    • 对于Ext Core，formatting 和 disableFormats 不可用。
    • 可用的格式化函数列表参见 Ext.util.Format.
    • 当不需要格式化时， disableFormats 退化为 apply
参数:
  • config : Mixed
返回值:
  • void
Template
Template.from ( String/HTMLElement el , Object config ) : Ext.Template
<静态> 使用所传递的元素值创建一个模板或者innerHTML(display:none textarea, preferred).
<静态> 使用所传递的元素值创建一个模板或者innerHTML(display:none textarea, preferred).
参数:
  • el : String/HTMLElement
    一个DOM元素，或者它的id
  • config : Object
    配置对象
返回值:
  • Ext.Template
    创建的模板
Template
append ( Mixed el , Object/Array values , [ Boolean returnElement ] ) : HTMLElement/Ext.Element
将提供的 values 应用到模板，并将新节点(s)添加到指定的 el ...
将提供的 values 应用到模板，并将新节点(s)添加到指定的 el .

示例用法参见 see the constructor.

参数:
  • el : Mixed
    内容元素
  • values : Object/Array
    模板值。 如果你的参数是数值(例如 {0} )可以是一个数组， 或者是一个对象(例如 {foo: 'bar'} )
  • returnElement : Boolean
    (可选)true将会返回一个Ext.Element (默认为undefined)
返回值:
  • HTMLElement/Ext.Element
    新节点或者Element
Template
apply ( Object/Array values ) : String
applyTemplate方法的别名 ，返回此模板的一个HTML片段，模板应用了指定的 values
applyTemplate方法的别名 ，返回此模板的一个HTML片段，模板应用了指定的 values
参数:
  • values : Object/Array
    模板值。 如果你的参数是数值(例如 {0} )可以是一个数组， 或者是一个对象(例如 {foo: 'bar'} )
返回值:
  • String
    HTML片段
Template
insertAfter ( Mixed el , Object/Array values , [ Boolean returnElement ] ) : HTMLElement/Ext.Element
将提供的值应用到模板并将新节点(s)插入到el之后。
将提供的值应用到模板并将新节点(s)插入到el之后。
参数:
  • el : Mixed
    内容元素
  • values : Object/Array
    模板值。 如果你的参数是数值(例如{0})可以是一个数组， 或者是一个对象(例如{foo:'bar'})
  • returnElement : Boolean
    (可选)true将会返回一个Ext.Element (默认为undefined)
返回值:
  • HTMLElement/Ext.Element
    新节点或者Element
Template
insertBefore ( Mixed el , Object/Array values , [ Boolean returnElement ] ) : HTMLElement/Ext.Element
将提供的新值应用到模板上并将新节点(s)插入到el之前。
将提供的新值应用到模板上并将新节点(s)插入到el之前。
参数:
  • el : Mixed
    内容元素
  • values : Object/Array
    模板值。 如果你的参数是数值(例如{0})可以是一个数组，或者是一个对象(例如{foo: 'bar'})
  • returnElement : Boolean
    (可选)true将会返回一个Ext.Element (默认为 undefined)
返回值:
  • HTMLElement/Ext.Element
    新节点或者Element
Template
insertFirst ( Mixed el , Object/Array values , [ Boolean returnElement ] ) : HTMLElement/Ext.Element
将提供的值应用到模板上并将新节点(s)插入为el的第一个孩子。
将提供的值应用到模板上并将新节点(s)插入为el的第一个孩子。
参数:
  • el : Mixed
    内容元素
  • values : Object/Array
    模板值。 如果你的参数是数值(例如{0})可以是一个数组， 或者是一个对象(例如{foo:'bar'})
  • returnElement : Boolean
    (可选) true将返回一个Ext.Element (默认为 undefined)
返回值:
  • HTMLElement/Ext.Element
    新节点或者Element
Template
overwrite ( Mixed el , Object/Array values , [ Boolean returnElement ] ) : HTMLElement/Ext.Element
将提供的新值应用到模板上，并用新节点(s)覆盖el的内容。
将提供的新值应用到模板上，并用新节点(s)覆盖el的内容。
参数:
  • el : Mixed
    内容元素
  • values : Object/Array
    模板值。 如果你的参数是数值(例如{0})可以是一个数组，或者是一个对象(例如{foo: 'bar'})
  • returnElement : Boolean
    (可选)true将会返回一个Ext.Element (默认为undefined)
返回值:
  • HTMLElement/Ext.Element
    新节点或者Element
Template
set ( String html , [ Boolean compile ] ) : Ext.Template
设置被用作模板的HTML并可以选择编译它。
设置被用作模板的HTML并可以选择编译它。
参数:
  • html : String
  • compile : Boolean
    (可选) True可以编译模板(默认undefined)
返回值:
  • Ext.Template
    this
Template

公共事件

该类没有公共事件。


Observable
    Component
      BoxComponent
        Container
          Panel
            Tip

Class Ext.Tip

包: | Ext
定义类的文件: | Tip.js
类: | Tip
子类: | ToolTip, Tip
继承自: | Panel

配置项

Config Options Defined By
activeItem : String/Number
一个string型的组件id，或者组件的数字索引， 它需要...
一个string型的组件id，或者组件的数字索引， 它需要在渲染时在容器内的布局管理器中被初始化并激活。 例如：activeItem: 'item-1' 或者 activeItem: 0 ( 索引 0 =容器子项目集合中的第一个元素)。 activeItem仅仅适用于一次显示一个组件的布局模式(比如 Ext.layout.AccordionLayout, Ext.layout.CardLayout 和 Ext.layout.FitLayout)。 与 Ext.layout.ContainerLayout.activeItem 相关。
Container
allowDomMove : Boolean
在渲染时组件是否可以移动Dom节点(默认为true)。
Component
anchor : String
注: 这个配置只用于该组件被包含在一个已使用AnchorLayout...

注: 这个配置只用于该组件被包含在一个已使用 AnchorLayout (或者其子类)配置的Container时。 基于布局管理器，例如：

  • Ext.form.FormPanel
  • 指定 layout: 'anchor' // or 'form', or 'absolute'

参见 Ext.layout.AnchorLayout. anchor 。

BoxComponent
animCollapse : Boolean
true将会在panel被折叠时使用动画效果，false将会跳过动画效果....
true 将会在panel被折叠时使用动画效果， false 将会跳过动画效果( 如果Ext.Fx类 有效，默认为 true ，否则为 false )。
Panel
applyTo : Mixed
指定一个元素的id、一个DOM元素或者一个已经存在并被渲染到DIV中的元素，此DIV已经被...

指定一个元素的id、一个DOM元素或者一个已经存在并被渲染到DIV中的元素，此DIV已经被 渲染到document中，并且为当前组件指定了一些结构化的标签。

  • 描述 :
      当使用了 applyTo， 在主元素中也可以用id或者CSS类名来指定组件的托管部分， 并且，如果可以的话，创建的组件可能也会试图在那个标签中创建它的子组件。
  • 注意 :
      当使用此配置项时，无需调用render()方法。
      如果指定了applyTo属性，任何传递给 renderTo 的值都会被忽略，并且目标元素的父节点将会自动被用作组件的容器。
Panel
autoDestroy : Boolean
如果为true，容器将自动销毁任何从其中被删除的组件， 否则...
如果为true，容器将自动销毁任何从其中被删除的组件， 否则必须手动处理销毁操作(默认为true)。
Container
autoHeight : Boolean
如果值为true，height配置项为'auto'，否则值为false的话使用固定的高度...

如果值为true，height配置项为'auto'，否则值为false的话使用固定的高度， 或者可以由其父类容器 layout manager来控制。(默认值为 false)。

注: 虽然很多组件继承了这个配置选项，但不是所有这些组件的自适应高度配置都会像期望的那样起作用。 设置autoHeight：值为true时，浏览器将根据元素的内容自动设置高度，这将意味着Ext不会去管理高度。

如果是由浏览器来管理高度，需要注意的是，通过浏览器进行调整的结构组件内不能被发现， 因此宽度的变化可能导致需要进行同步处理元素的高度。 例如：

var w = new Ext.Window({
    title: 'Window',
    width: 600,
    autoHeight: true,
    items: {
        title: 'Collapse Me',
        height: 400,
        collapsible: true,
        border: false,
        listeners: {
            beforecollapse: function() {
                w.el.shadow.hide();
            },
            beforeexpand: function() {
                w.el.shadow.hide();
            },
            collapse: function() {
                w.syncShadow();
            },
            expand: function() {
                w.syncShadow();
            }
        }
    }
}).show();
Panel
autoLoad : Object/String/Function
一个合法的url描述，依照Updater Ext.Updater.update 方法...
一个合法的url描述，依照Updater Ext.Updater.update 方法。如果autoLoad不为null，panel将会在渲染之后立即尝试加载它的内容。

URL将会成为当前panel的body元素的默认URL，这样它可以在任意时刻被 refresh.

Panel
autoScroll : Boolean
如果值为true，将会在该元素上使用overflow:'auto'配置，并且在必要的时候...
如果值为true，将会在该元素上使用overflow:'auto'配置，并且在必要的时候自动显示滚动条，否则，溢出部分的组件都会被切除(默认值为 false)。
BoxComponent
autoShow : Boolean
如果组件需要检测隐藏CSS属性(如 'x-hidden' 或者 'x-hide-display')并且在渲染时删除...
如果组件需要检测隐藏CSS属性(如 'x-hidden' 或者 'x-hide-display')并且在渲染时删除它们 (默认为false)，设置此值为true。
Component
autoWidth : Boolean
如果为true，使用width:'auto'配置，否则使用固定的宽度...

如果为true，使用width:'auto'配置，否则使用固定的宽度，或者可以由其父类容器的layout manager来控制。(默认值为 false)。

注: 虽然很多组件继承了这个配置选项，但不是所有这些组件的自适应宽度配置都会像期望的那样起作用。 设置autoWidth：值为true时，浏览器将根据元素的内容自动设置宽度，这将意味着Ext不会去管理宽度。

如果是由浏览器来管理宽度，需要注意的是，通过浏览器进行调整的结构组件内不能被发现，因此宽度的变化可能导致需要进行同步处理元素的宽度。 例如，在这个元素的目标是：

<div id='grid-container' style='margin-left:25%;width:50%'></div>
当浏览器窗口改变时，渲染后的Panel必须监听浏览器窗口大小的变化，以便通知子项，浏览器改变了其宽度：

var myPanel = new Ext.Panel({
    renderTo: 'grid-container',
    monitorResize: true, // relay on browser resize
    title: 'Panel',
    height: 400,
    autoWidth: true,
    layout: 'hbox',
    layoutConfig: {
        align: 'stretch'
    },
    defaults: {
        flex: 1
    },
    items: [{
        title: 'Box 1',
    }, {
        title: 'Box 2'
    }, {
        title: 'Box 3'
    }],
});
BoxComponent
baseCls : String
应用到当前panel元素上的基本CSS类(默认为 'x-panel' )...
应用到当前panel元素上的基本CSS类(默认为 'x-panel' )。

另一个可选的默认变量是指定 'x-plain' ，它将去掉所有样式，除了Ext布局功能所必须的属性 (例如overflow:hidden)。另请参见 unstyled 。

Panel
bbar : Object/Array
panel底部工具栏。 此参数可以是一个Ext.Toolbar 、一个工具栏配置项，或者一个buttons/button配置数组---用来被添加到工具栏中...

panel底部工具栏。 此参数可以是一个Ext.Toolbar 、一个工具栏配置项，或者一个buttons/button配置数组---用来被添加到工具栏中。 注意，此参数在渲染之后是无效的。如果在渲染之后需要访问底部工具栏 ，请使用 getBottomToolbar。

注意:尽管Toolbar可以包含Field组件，但它们不会 通过加载祖先FormPanel而被更新。Panel的工具栏不是标准Container->Component 层次的一部分，所以它们不会被扫面以收集表单项。但是，这些值还是会 被提交，因为提交表单的参数是从DOM树中收集的。

Panel
bbarCfg : Object
一个 ADomHelper 元素的配置对象，描述了当前Panelbbar元素的结构...

一个DomHelper 元素的配置对象，描述了当前Panel的bbar元素结构。 另请参见 bodyCfg 。

Panel
bodyBorder : Boolean
True将会在Panel的body元素内部显示一个边框，false将会隐藏它 (默认为true)。只有当border == true 时...
True将会在Panel的body元素内部显示一个边框，false将会隐藏它 (默认为true)。只有当border == true 时，此参数才会被应用。如果border == true 并且 bodyBorder == false， 将会给整个body元素一种凹陷式的外观。
Panel
bodyCfg : Object
一个DomHelper 元素描述对象，可以被指定给任何Panel Element...

一个DomHelper 元素描述对象，可以被指定给任何Panel Element.

默认情况下，以下表格中的Default元素将会被用作html标签，用来创建一个子元素 ，与Default类名相匹配( baseCls 将会被 baseCls 替换 ):

Panel      Default  Default             Custom      Additional       Additional
Element    element  class               element     class            style
========   ==========================   =========   ==============   ===========
header     div      baseCls+'-header'   headerCfg   headerCssClass   headerStyle
bwrap      div      baseCls+'-bwrap'     bwrapCfg    bwrapCssClass    bwrapStyle
+ tbar     div      baseCls+'-tbar'       tbarCfg     tbarCssClass     tbarStyle
+ body     div      baseCls+'-body'       bodyCfg     bodyCssClass     bodyStyle
+ bbar     div      baseCls+'-bbar'       bbarCfg     bbarCssClass     bbarStyle
+ footer   div      baseCls+'-footer'   footerCfg   footerCssClass   footerStyle

例如，配置一个自定义的元素，用来强制 body 元素使用不同形式的标签，而不是使用默认创建的。 这种情况的一个例子可能是 创建一个子 Panel，包含自定义的内容，例如header，或者通过使body拥有一个<center> 元素， 从而强制Panel中的所有内容居中:

new Ext.Panel({
    title: 'Message Title',
    renderTo: Ext.getBody(),
    width: 200, height: 130,
    bodyCfg: {
        tag: 'center',
        cls: 'x-panel-body',  // Default class not applied if Custom element specified
        html: 'Message'
    },
    footerCfg: {
        tag: 'h2',
        cls: 'x-panel-footer'        // same as the Default class
        html: 'footer html'
    },
    footerCssClass: 'custom-footer', // additional css class, see addClass

    footerStyle:    'background-color:red' // see bodyStyle

});

以上例子也显式创建了一个 footer ，拥有自定义的标签和样式。

Panel
bodyCssClass : String/Object/Function
可选的CSS类选择器，被应用到body 元素上，其格式为Ext.Element.addClass所 期望的值(默认为null)...
可选的CSS类选择器，被应用到body 元素上，其格式为Ext.Element.addClass所 期望的值(默认为null)。参见 bodyCfg.
Panel
bodyStyle : String/Object/Function
自定义的CSS样式，它将被应用到body 元素上，其格式为...
自定义的CSS样式，它将被应用到body 元素上，其格式为Ext.Element.applyStyles 所期望的值(默认为null)。参见bodyCfg。
Panel
border : Boolean
True将会显示panel body元素的边框，false将会隐藏它们 (默认为true)。默认情况下，边框是一个2px宽度的内嵌边框...
True将会显示panel body元素的边框，false将会隐藏它们 (默认为true)。默认情况下，边框是一个2px宽度的内嵌边框， 但是，以后可以通过设置bodyBorder 为false以改变它。
Panel
boxMaxHeight : Number
设置组件的最大高度值...

设置组件的最大高度值。

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

BoxComponent
boxMaxWidth : Number
设置组件的最大宽度值...

设置组件的最大宽度值。

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

BoxComponent
boxMinHeight : Number
设置组件的最小高度值...

设置组件的最小高度值。

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

BoxComponent
boxMinWidth : Number
设置组件的最小宽度值...

设置组件的最小宽度值。

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

BoxComponent
bubbleEvents : Array
一个事件数组，当这些事件被触发时，将会被冒泡到所有父容器中。参见....

一个事件数组，当这些事件被触发时，将会被冒泡到所有父容器中。参见 Ext.util.Observable.enableBubble。 默认为 []。

Container
bufferResize : Boolean/Number
当设置为true时(50毫秒)或者是一个毫秒数值， 指定给当前容器的布...
当设置为true时(50毫秒)或者是一个毫秒数值， 指定给当前容器的布局管理器将会缓存它计算出的频率，然后 对组件进行一次重新布局操作。 对于重量级的容器，或者拥有大量子组件的容器来说，这非常有用， 因为频繁进行布局是非常昂贵的。 默认为 50 .
Container
buttonAlign : String
添加到当前panel的所有 buttons 的对齐方式。 合法的值有...
添加到当前panel的所有 buttons 的对齐方式。 合法的值有 'right' , 'left' 和 'center' (默认为 'right' )。
Panel
buttons : Array
Panel的按钮数组，它们从 buttons 配置属性创建。只读。
Panel
bwrapCfg : Object
一个DomHelper 元素描述对象，描述了当前Panel的 bwrap 的元素的结构...

一个DomHelper 元素描述对象，描述了当前Panel的 bwrap 的元素的结构。另请参见 bodyCfg 。

Panel
clearCls : String
应用到特殊的clearing div的CSS类， 这个clearing div直接渲染到每个form field的包装器后面...

应用到特殊的clearing div的CSS类， 这个clearing div直接渲染到每个form field的包装器后面，以提供 清除field的功能(默认为 'x-form-clear-left')。

注意: 只有在当前组件被渲染到一个使用FormLayout 布局(例如 Ext.form.FormPanel 或者指定 layout:'form')的 容器中、或者是指定了一个fieldLabel 、或者指定isFormField=true 时此配置才有效。

另请参见 Ext.layout.FormLayout. fieldTpl。

Component
closable : Boolean
True将会在tooltip头部渲染一个关闭按钮(默认为false)。
Tip
cls : String
一个可选的额外CSS类，它将被添加到当前组件的元素上(默认为'')...
一个可选的额外CSS类，它将被添加到当前组件的元素上(默认为'')。 此属性对于在组件上，或者它的任何使用标准CSS规则的孩子节点上， 添加定制的样式非常有用。
Component
collapseFirst : Boolean
将会确保折叠/展开(collapse/expand)按钮总是被渲染在第一个位置...
true 将会确保折叠/展开(collapse/expand)按钮总是被渲染在第一个位置， 在panel顶部的工具栏中位于任何其它工具左侧， false 将会把它渲染在最后(默认为 true )。
Panel
collapsed : Boolean
如果当前panel被折叠为true。只读。
Panel
collapsedCls : String
在被折叠后，一个被添加到panel元素上的CSS类 (默认为 'x-panel-collapsed' )。
Panel
collapsible : Boolean
True将会使panel折叠并且会自动把展开/折叠(expand/collapse)按钮渲染到顶部...
True将会使panel折叠并且会自动把展开/折叠 (expand/collapse)按钮渲染到顶部工具按钮区域，false将 保持panel尺寸固定，没有按钮(默认为false)。
Panel
contentEl : String
(可选)指定一个已存在的HTML元素，或者一个已存在HTML元素的...

(可选)指定一个已存在的HTML元素，或者一个已存在HTML元素的 id ，它们将被用作当前组件的内容。

  • 描述 :
    此配置选项被用来将一个已存在的HTML元素 插入到一个新组件(在组件渲染之后它简单地移动DOM元素) 的layout元素中，使它成为该组件的内容。
  • 注意 :
    指定的HTML元素将被append到组件的layout元素中， 在所有配置的 HTML 被插入之后， 并且，这样的话，在render事件 被触发时，document中将不再包含此元素。
    指定的HTML元素将不会参与组件所有可能使用的 layout 过程(译者注：指这些HTML元素 不会参与布局操作)。 它仅是HTML而已。布局操作实在孩子 items 上进行的。
    添加 x-hidden 或者 x-hide-display CSS类，以防在内容渲染到panel时发生闪烁。
Component
ctCls : String
一个可选的外部CSS样式，添加到这个组件的容器(默认值为 '')。 这个方法对于使用标准的CSS规则...

一个可选的外部CSS样式，添加到这个组件的容器(默认值为 '')。 这个方法对于使用标准的CSS规则，为组件或它的任何一个子组件添加特定的样式非常有用。 参见 Ext.layout.ContainerLayout和 extraCls 。

注意: ctCls 默认为 ''期望如下的类，它们将指定一个默认值:

  • Box Layout : 'x-box-layout-ct'
使用一个额外的CSS类配置以上的Class，它是append到默认对象上的。例如， 对于BoxLayout (Hbox and Vbox):
                                ctCls: 'x-box-layout-ct custom-class'

Component
data : Mixed
初始化数据集，它将被应用到 tpl 上以刷新组件的内容区域。
Component
defaultAlign : String
实验性参数。 当前tip默认的Ext.Element.alignTo 锚定位置值，与它的起源元素...
实验性参数。 当前tip默认的Ext.Element.alignTo 锚定位置值，与它的起源元素(译者注：指弹出tip那个元素)有关(默认为"tl-bl?")。
Tip
defaultType : String
当一个子项目通过一个原生的配置对象 而不是一个组件的实例指定时。...

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

默认为 'panel' ， Ext.menu.Menu 默认为 'menuitem' ， Ext.Toolbar 和 Ext.ButtonGroup 默认为 'button' 。

Container
defaults : Object|Function
此选项是在所有添加的项目上应用默认设置的手段， 这些项目要么是通过...

此选项是在所有添加的项目上应用默认设置的手段， 这些项目要么是通过 items 配置项添加的， 或者是通过 add 或者是通过 insert 方法添加的。

如果添加的项目是一个配置对象， 并且不是一个组件的实例， 那么默认参数将会被无条件地被应用。 如果添加的项目是一个组件的实例， 那么默认参数将有条件地被应用，以免覆盖项目上的现有属性你。

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

例如，如需自动在 Ext.Panel 所包含的每个项目上应用padding属性，你可以传递: defaults: {bodyStyle: 'padding:15px'} 。

用法:

defaults: {               // defaults are applied to items, not the container
    autoScroll:true
},
items: [
    {
        xtype: 'panel',   // defaults do not have precedence over
        id: 'panel1',     // options in config objects, so the defaults
        autoScroll: false // will not be applied here, panel1 will be autoScroll:false
    },
    new Ext.Panel({       // defaults do
                                     have precedence over options
        id: 'panel2',     // options in components, so the defaults
        autoScroll: false // will be applied here, panel2 will be autoScroll:true.
    })
]
Container
disabled : Boolean
当前组件处于无效状态时为true。 Read-only.
Panel
disabledClass : String
当组件处于无效状态时添加到组件上的CSS类(默认为 'x-item-disabled')。
Component
draggable : Boolean/Object
true 可以让当前panel启用拖拽操作(默认为 false )...

true 可以让当前panel启用拖拽操作(默认为 false )。

如需自定义的drag/drop实现，也可以向此配置项传递一个 Ext.Panel.DD配置替代 true 。 Ext.Panel.DD是一个内部没有文档化的类，它在周围移动代理元素 代替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();
Panel
elements : String
panel元素列表，以逗号分隔，在panel被渲染时初始化。 通常情况下...
panel元素列表，以逗号分隔，在panel被渲染时初始化。 通常情况下，此列表在配置时根据添加到panel的项目被自动创建， 但有时，即使没有在配置时指定，对于确保一个结构化的元素被渲染也很有用 (例如，你可能希望在panel被渲染后动态地添加一个按钮或者工具栏)。 添加这些元素到此列表中将会在panel被渲染时分配必须的占位符。 合法的值有
  • header
  • tbar (top bar)
  • body
  • bbar (bottom bar)
  • footer
Defaults to ' body '.
Panel
fbar : Object/Array
一个Toolbar 对象、一个Toolbar配置项，或者一个Buttons/ Button 配置数组，...

一个Toolbar 对象、一个Toolbar配置项，或者一个Buttons/ Button 配置数组，它们描述了一个被添加到当前Panel底部元素的 Toolbar.

在渲染后， fbar 将会为一个Toolbar 实例。

如果指定了 buttons ，它们将替代 fbar 配置项。

Panel的 buttonAlign 配置项目将会影响这些项目的布局，例如:
var w = new Ext.Window({
    height: 250,
    width: 500,
    bbar: new Ext.Toolbar({
        items: [{
            text: 'bbar Left'
        },'->',{
            text: 'bbar Right'
        }]
    }),
    buttonAlign: 'left', // anything but 'center' or 'right' and you can use '-', and '->'

                                  // to control the alignment of fbar items
    fbar: [{
        text: 'fbar Left'
    },'->',{
        text: 'fbar Right'
    }]
}).show();

注意:尽管Toolbar可以包含Field组件，但它们不会 通过加载祖先FormPanel而被更新。Panel的工具栏不是标准Container->Component 层次的一部分，所以它们不会被扫面以收集表单项。但是，这些值还是会 被提交，因为提交表单的参数是从DOM树中收集的。

Panel
fieldLabel : String
紧靠此field显示的标签文本(默认值为 '')。注意...

紧靠此field显示的标签文本(默认值为 '')。

注意:只有在当前组件被渲染到一个使用FormLayout 的容器中时，此配置才有效。 (例如 Ext.form.FormPanel 或 指定 layout:'form')。

另请参见 hideLabel 、 Ext.layout.FormLayout和 fieldTpl。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Name'
    }]
});
Component
flex : Number
注: 这个配置只用于该组件被包含在一个已使用BoxLayout配置的Container中时...

注: 这个配置只用于该组件被包含在一个已使用BoxLayout配置的Container中时。通过计算每一个子组件的flex值所占全部flex值之和的比例，来决定子组件的宽(HBoxLayout)高(VBoxlayout)。 任何子项的 flex = 0 或 flex = undefined 将不被设置(初始值大小将不被改变)。

BoxComponent
floating : Mixed
此参数被用来配置底层的 Ext.Layer. 此配置参数可接受的值有...

此参数被用来配置底层的 Ext.Layer. 此配置参数可接受的值有:

  • false : 默认。
    在渲染的地方以内嵌的方式显示panel.
  • true :
    浮动panel (绝对定位，有自动衬垫和阴影)。
      设置floating为true将会为当前panel创建一个Ext.Layer 并且在负值偏移量处显示panel，这样它就是隐藏的。
      既然panel被绝对定位，位置必须在渲染之后被显式设置 (例如 myPanel.setPosition(100,100); )。
      注意: 如果浮动面板，你必须总是指定一个固定的宽度， 否则它将是自动宽度并且总是展开以便填充到视口右侧 边缘。
  • object :
    指定的对象将会被用作将会被创建的 Ext.Layer的 配置对象。
Panel
footer : Ext.Element
Panel底部Element 。只读。此元素被用来容纳Panel的...
Panel底部Element 。只读。

此元素被用来容纳Panel的 buttons 或者 fbar 。

注意: 另请参见 el 的注释。

Panel
footerCfg : Object
一个DomHelper 元素的配置对象，描述了当前Panel的footer元素结构。 另请参见...

一个DomHelper 元素的配置对象，描述了当前Panel的footer元素结构。 另请参见 bodyCfg 。

Panel
forceLayout : Boolean
如果此值为true，容器将将强制初始化一次布局操作...
如果此值为true，容器将将强制初始化一次布局操作， 即使容器处于隐藏或者折叠状态。 此配置项对于在一个折叠或者隐藏的容器中强制渲染非常有用 (默认为false)。
Container
frame : Boolean
默认情况下使用 false ，渲染简单的1px的正方形边框。 true 将会渲染9个元素，以自定义的圆角结束...
默认情况下使用 false ，渲染简单的1px的正方形边框。 true 将会渲染9个元素，以自定义的圆角结束 (另请参见 Ext.Element.boxWrap)。

每种情况下产生的模板描述如下:

// frame = false
<div id="developer-specified-id-goes-here" class="x-panel">

    <div class="x-panel-header"><span class="x-panel-header-text">Title: (frame:false)</span></div>

    <div class="x-panel-bwrap">
        <div class="x-panel-body"><p>html value goes here</p></div>
    </div>
</div>

// frame = true (create 9 elements)
<div id="developer-specified-id-goes-here" class="x-panel">
    <div class="x-panel-tl"><div class="x-panel-tr"><div class="x-panel-tc">
        <div class="x-panel-header"><span class="x-panel-header-text">Title: (frame:true)</span></div>
    </div></div></div>

    <div class="x-panel-bwrap">
        <div class="x-panel-ml"><div class="x-panel-mr"><div class="x-panel-mc">
            <div class="x-panel-body"><p>html value goes here</p></div>
        </div></div></div>

        <div class="x-panel-bl"><div class="x-panel-br"><div class="x-panel-bc"/>
        </div></div></div>
</div>
Panel
header : Ext.Element
Panel的headerElement. 只读。此元素被用来容纳 title和 tools...
Panel的headerElement. 只读。

此元素被用来容纳 title和 tools

注意: 另请参见 el 的注释。

Panel
headerAsText : Boolean
true 将会在 header 中显示panel title ， false 将会隐藏它(默认为 true )。
Panel
headerCfg : Object
一个DomHelper 元素的配置对象，描述了当前Panel的header元素结构...

一个DomHelper 元素的配置对象，描述了当前Panel的header元素结构。 另请参见 bodyCfg 。

Panel
height : Number
组件的高度(默认值为 auto)。注:如果想使用百分比的方式...
组件的高度(默认值为 auto)。注:如果想使用百分比的方式来设置值，请查看 Ext.Component.anchor。
BoxComponent
hidden : Boolean
如果当前组件处于隐藏状态，此值为true。Read-only。
Component
hideBorders : Boolean
设置为true可以隐藏所包含的每个组件的边框， false为遵照组件现有的边框设置...
设置为true可以隐藏所包含的每个组件的边框， false为遵照组件现有的边框设置(默认为 false)。
Container
hideCollapseTool : Boolean
true 将会在 collapsible == true 时隐藏展开/折叠按钮， false 将会显示它(默认为 false )。
Panel
hideLabel : Boolean
true时完全隐藏label元素 ( label 和 separator)。 默认为 false。 默认情况下，即使你不指定...

true时完全隐藏label元素 ( label 和 separator)。 默认为 false。 默认情况下，即使你不指定 fieldLabel 它的空间仍然会被保留，这样这块区域会与其它确实拥有label的区域位于同一排。 讲此值设置为 true 将导致此区域不再保留此空间。

注意: 参见 clearCls 的注释。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield'
        hideLabel: true
    }]
});
Component
hideMode : String
组件如何隐藏，支持的值有： 'visibility' (css visibility), 'offsets' (位置偏移量为负值) 和...

组件如何隐藏，支持的值有： 'visibility' (css visibility), 'offsets' (位置偏移量为负值) 和 'display' (css display).

注意:一般首选默认值 'display'，因为当组件第一次显示的时候它们会自动进行布局 (隐藏的时候不会调整尺寸)。

Component
hideParent : Boolean
此值为true时，当调用hide/show方法时，将会hide和show组件的容器...
此值为true时，当调用hide/show方法时，将会hide和show组件的容器；false时将会 hide和show组件自身(默认为false)。例如，这可以用作window上隐藏按钮的一种 快捷操作，通过设置此按钮的hideParent:true，然后把它添加到window上。
Component
html : String/Object
一个HTML片段，或者一个 DomHelper 描述，用作layout元素的内容(默认为'')。...
一个HTML片段，或者一个 DomHelper 描述，用作layout元素的内容(默认为'')。 这个HTML内容在组件渲染之后才被添加，所以在 render 出发的时候，document中尚未包含此HTML。 但是这个内容将会在所有配置的 contentEl 之前被插入到body标签中。
Component
iconCls : String
CSS类选择器，指定被用作头部图标的背景图片(默认为'')...
CSS类选择器，指定被用作头部图标的背景图片(默认为'')。

指定自定义图表类的示例就像:

// specify the property in the config for the class:
     ...
     iconCls: 'my-icon'

// css class that specifies background image to be used as the icon image:
.my-icon { background-image: url(../images/my-icon.gif) 0 6px no-repeat !important; }
Panel
id : String
当前组件唯一的id(默认为auto-assigned id)...

当前组件唯一的id(默认为auto-assigned id)。 如果你需要在以后访问组件，而又没有一个有效的组件对象引用，那么你需要指定一个 id( 也就是，使用Ext. getCmp方法 )。

注意，此id也将被用作组件底层HTML标签的id，这些标签被渲染到页面中。 这将允许你编写基于id的CSS规则，以独立地描述指定的实例；并且，也可以通过 组件父标签的id选中子元素。

注意:为了避免与唯一的id 产生重复， 请参见 itemId 和 ref 。

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

Component
itemCls : String
注意: 只有在当前组件被渲染到一个使用FormLayout 布局的 容器中时此配置才有效...

注意: 只有在当前组件被渲染到一个使用FormLayout 布局的 容器中时此配置才有效。 (例如Ext.form.FormPanel 或者指定 layout:'form')。

一个附加的CSS类，应用到div上，包装当前field的表单元素。 如果提供了此参数， field级上的itemCls将会覆盖 container级上提供的 默认itemCls。 为itemCls指定的值将会被添加默认的 类('x-form-item')。

既然它被应用到项目的包装器上(参见 Ext.layout.FormLayout。 fieldTpl)， 它将允许你编写能应用到此field、label(如果有指定)、或者field内部任何其它元素的标准CSS规则。

注意: 参考 fieldLabel的注释。 .

示例用法:

// Apply a style to the field's label:
<style>
    .required .x-form-item-label {font-weight:bold;color:red;}
</style>

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Name',
        itemCls: 'required' //this label will be styled
    },{
        xtype: 'textfield',
        fieldLabel: 'Favorite Color'
    }]
});
Component
itemId : String
当没有可利用的对象引用时，itemId可以作为第二选择，用来获得一个组件的引用， 代替 ...

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

var c = new Ext.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'); // 与 Ext.getCmp()不同

p2 = p1.ownerCt.getComponent('p2'); // 通过兄弟对象获得引用

另请参见 id 和 ref 。

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

Component
items : MixedCollection
当前容器中的子组件集合 Ext.util.MixedCollection
Container
keys : Object/Array
一个Ext.KeyMap 配置对象 (其格式为Ext.KeyMap.addBinding 所期望的值...
一个Ext.KeyMap 配置对象 (其格式为Ext.KeyMap.addBinding 所期望的值，用来向当前panel上绑定自定义的按键处理(默认为 null )
Panel
labelSeparator : String
每个fieldLabel 文本后面现实的分隔符。 此属性可以在多个层次上进行配置...

每个fieldLabel 文本后面现实的分隔符。 此属性可以在多个层次上进行配置。优先顺序为：

  • field / component level
  • container level
  • layout level (默认为冒号 ':')
如不需要为当前field的label显示分隔符，指定一个空字符串''即可。

注意:参见 clearCls 的注释。

另请参见 hideLabel 和 Ext.layout.FormLayout。 fieldTpl。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    layoutConfig: {
        labelSeparator: '~'   // layout config has lowest priority (defaults to ':')
    },
    labelSeparator: '>>',     // config at container level
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Field 1',
        labelSeparator: '...' // field/component level config supersedes others
    },{
        xtype: 'textfield',
        fieldLabel: 'Field 2' // labelSeparator will be '='

    }]
});
Component
labelStyle : String
一个CSS样式描述字符串，它将直接应用到当前field的label上...

一个CSS样式描述字符串，它将直接应用到当前field的label上。 如果有设置，默认为容器的labelStyle值(例如 Ext.layout.FormLayout.labelStyle , 或者 '')。

注意:参见 clearCls 的注释。

另请参见 hideLabel 和 Ext.layout.FormLayout. fieldTpl。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Name',
        labelStyle: 'font-weight:bold;'
    }]
});
Component
layout : String/Object
*重要: 为了让子项目能被正确地调整尺寸和位置， 典型地，必须通过 layout 配置项指定一个布局管理器。...

*重要: 为了让子项目能被正确地调整尺寸和位置， 典型地，必须通过 layout 配置项指定一个布局管理器。

调整子items的尺寸和位置 是容器的布局管理器的职责，它负责创建和管理你想要的那种布局类型。 例如:

new Ext.Window({
    width:300, height: 300,
    layout: 'fit', // explicitly set layout manager: override the default (layout:'auto')
    items: [{
        title: 'Panel inside a Window'
    }]
}).show();

如果没有为一个通用的容器(例如Container或者Panel)特别指定 layout ，将会使用default layout manager ，它除了将子组件按顺序渲染到容器中之外什么事情都不做( 这种情况下不会发生调整尺寸和位置的操作)。 一些容器类内部指定了一个默认的布局 (例如FormPanel指定了 layout: 'form' )。 另一些有特殊用途的类内部指定/管理它们内置的布局( 例如GridPanel, TabPanel, TreePanel, Toolbar, Menu等等)。

layout 既可以通过一个对象或者一个字符串指定:

  • 用一个对象指定
    • 示例用法:
      • layout: {
    type: 'vbox',
    padding: '5',
    align: 'left'
}
    • type

      • 当前容器需要使用的布局类型。 如果不指定，将创建并使用一个默认的 Ext.layout.ContainerLayout 。

      可用的布局 type 值是:

      • absolute
      • accordion
      • anchor
      • auto Default
      • border
      • card
      • column
      • fit
      • form
      • hbox
      • menu
      • table
      • toolbar
      • vbox
    • 布局描述配置参数

      • 也可以指定附加的布局描述配置。 关于每个布局类型可用配置选项完整的细节，参见 type 参数指定的相关布局类。

  • 通过一个字符串指定
    • 示例用法:
      • layout: 'vbox',
layoutConfig: {
    padding: '5',
    align: 'left'
}
    • layout

      • 当前容器使用的布局 type ( 可用的布局类型值参见上述列表)。

    • layoutConfig

      • 附件的布局描述配置参数。 关于每个布局类型可用配置选项完整的细节，参见 layout 参数指定的相关布局类。

Container
layoutConfig : Object
这是一个配置对象，包含为 layout 指定的参数， 如果 layout 是作为一个 string 来指定的。

Container
listeners : Object
一个包含一个或多个事件处理器的配置对象，会在初始化的时候被添加到目标对象上...

一个包含一个或多个事件处理器的配置对象，会在初始化的时候被添加到目标对象上。 该配置对象应该是一个有效的监听器配置对象就像 addListener例子中指定的一样可一次附加多个处理器。

ExtJs Components上的DOM事件

一些 ExtJs Component 类导出时会选择一些DOM事件(例如 "click", "mouseover" 等等), 这通常只是在有额外的值可以被添加时发生。例如DataView类的 click事件会传递被点击的节点。也可以直接在Component的HTMLElementevent上访问DOM事件，但必需在Component被渲染后监听器才能添加到Element 上。可以按照以下步骤添加插件:

// 插件会用一个监听器配置对象进行配置。
//该组件会被添加到所有处理方法的参数列表上。
Ext.DomObserver = Ext.extend(Object, {
    constructor: function(config) {
        this.listeners = config.listeners ? config.listeners : config;
    },

    // 组件将自己传递进了插件的初始化方法里
    init: function(c) {
        var p, l = this.listeners;
        for (p in l) {
            if (Ext.isFunction(l[p])) {
                l[p] = this.createHandler(l[p], c);
            } else {
                l[p].fn = this.createHandler(l[p].fn, c);
            }
        }

        // 渲染后立即添加监听器到元素上
        c.render = c.render.createSequence(function() {
            var e = c.getEl();
            if (e) {
                e.on(l);
            }
        });
    },

    createHandler: function(fn, c) {
        return function(e) {
            fn.call(this, e, c);
        };
    }
});

var combo = new Ext.form.ComboBox({

    // 元素被点击后折叠
    plugins: [ new Ext.DomObserver({
        click: function(evt, comp) {
            comp.collapse();
        }
    })],
    store: myStore,
    typeAhead: true,
    mode: 'local',
    triggerAction: 'all'
});

Observable
margins : Object
注:此配置只用于该组件展现在一个使用BorderLayout...

注:此配置只用于该组件展现在一个使用BorderLayout 或 BoxLayout的两个子类之一作为布局的容器。

这个margins对象在该组件中的格式为：

{top: (top margin),right: (right margin),bottom: (bottom margin),left: (left margin)}

也可以是一个字符串，中间用空格分隔，margin值为数字。 把matches中每一个值的次序跟CSS中margin值的排列方式相对应：

  • 如果只有一个值，它适用于所有方面。
  • 如果有两个值，top和bottom的边框设置为第一个值，left和right设置为第二个值。
  • 如果有三个值，top设置为第一个值，left和right设置为第二个值，bottom设置为第三个值。
  • 如果有四个值，分别设置为top, right, bottom, left。

默认值:

{top:0, right:0, bottom:0, left:0}
BoxComponent
maskDisabled : Boolean
true 将会在panel被disabled时进行遮罩,false将不会遮罩它(默认为...
true 将会在panel被disabled时进行遮罩, false 将不会遮罩它(默认为 true )。使用任意一种方法，当被禁用时，panel都将告诉它包含的元素禁用它们自己， 但是遮罩panel可以提供一种额外的视觉效果，用以提示panel被禁用。
Panel
maxWidth : Number
tip最大宽度像素值(默认为300)。支持的最大值为500。
Tip
minButtonWidth : Number
当前panel中所有buttons 最小宽度，像素值(默认为 75 )
Panel
minWidth : Number
tip最小宽度像素值(默认为40)。
Tip
monitorResize : Boolean
设置为true自动监测window的resize事件，以便处理所有对当前窗口尺寸 敏感的事情。...
设置为true自动监测window的resize事件，以便处理所有对当前窗口尺寸 敏感的事情。 典型地，通过选择一个 layout 来管理这个值，并且不应该手动设置它。
Container
overCls : String
一个可选的额外的CSS类，它将在鼠标移过元素时被添加到组件上...
一个可选的额外的CSS类，它将在鼠标移过元素时被添加到组件上，鼠标移出时 删除。(默认为'')。此属性对于在组件上，或者它的任何使用标准CSS规则的孩子节点上， 添加定制的'active' 或者 'hover'样式非常有用。
Component
padding : Number/String
设置body元素padding样式的快捷方式。 此值既可以是一个数值，被应用到所有侧边...
设置body元素padding样式的快捷方式。 此值既可以是一个数值，被应用到所有侧边，也可以是一个普通的描述padding的 CSS字符串。默认为undefined.
Panel
pageX : Number
如果该组件被包含在一个指定位置的容器中，这个值表示页面级的x坐标值（译者注：在有滚动条的情况下这个值很有用）。
BoxComponent
pageY : Number
如果该组件被包含在一个指定位置的容器中，这个值表示页面级的y坐标值（译者注：在有滚动条的情况下这个值很有用）。
BoxComponent
plugins : Object/Array
一个对象或者一个对象数组，为组件提供特殊的功能 ...
一个对象或者一个对象数组，为组件提供特殊的功能。 对一个合法的插件唯一的要求是它含有一个init()方法， 能接收一个Ext.Component型的参数。 当组件被创建时，如果有可用的插件，组件将会调用每个插件的init方法， 并将自身的引用作为方法参数传递给它。然后，每个插件就可以调用方法或者响应组件上的事件， 就像需要的那样提供自己的功能。
Component
preventBodyReset : Boolean
默认为 false 。当设置为 true 时， 一个额外的CSS类 'x-panel-normal' 将会被田间到panel的元素， 有效地将W3C(参见 http://www.w3.org/TR/CSS21/sample.html)...
默认为 false 。当设置为 true 时， 一个额外的CSS类 'x-panel-normal' 将会被田间到panel的元素， 有效地将W3C(参见 http://www.w3.org/TR/CSS21/sample.html) 建议的CSS样式应用到Panel的body元素上 (不是header, footer等等)。
Panel
ptype : String
需要创建配置的ptype。 当传递一个配置对象给构造函数时...
需要创建配置的ptype。 当传递一个配置对象给构造函数时，此配置选项不会被使用。 只有在使用懒初始化的时候此配置项才会被使用， 此时Plugin不是 通过一个完整的实例组件，而是通过一个Component配置指定的。 在渲染时，将会查找ptype以决定创建何种类型的Plugin。

如果你创建自己的Plugin，你可以通过 Ext.ComponentMgr.registerPlugin 对它们进行注册，以便能利用懒初始化和渲染机制。
Component
ref : String
一个路径描述，与组件的 ownerCt 相关，它描述了把当前组件的命名引用放置到哪个父容器中去。...

一个路径描述，与组件的 ownerCt 相关，它描述了把当前组件的命名引用放置到哪个父容器中去。

祖先的坐标路径可以通过'/'字符进行分隔。 例如，将一个Toolbar Button的引用放入 拥有此Toolbar的Panel中:

var myGrid = new Ext.grid.EditorGridPanel({
    title: 'My EditorGridPanel',
    store: myStore,
    colModel: myColModel,
    tbar: [{
        text: 'Save',
        handler: saveChanges,
        disabled: true,
        ref: '../saveButton'
    }],
    listeners: {
        afteredit: function() {
//          The button reference is in the GridPanel
            myGrid.saveButton.enable();
        }
    }
});

在上面的代码中，如果 ref 是 'saveButton' ，那么引用将会被放置到Toolbar中。 ref 中的每个'/' 都会从组件的 ownerCt 向上移动一级。

另请参见 added 和 removed 事件。

Component
region : String
注: 此配置只用于该组件展现在一个布局为BorderLayout的容器中...

注: 此配置只用于该组件展现在一个布局为BorderLayout的容器中(例如指定layout:'border')。

详见Ext.layout.BorderLayout。

BoxComponent
renderTo : Mixed
该值可以是一个节点的id、一个DOM节点或者一个已存在的元素...

该值可以是一个节点的id、一个DOM节点或者一个已存在的元素， 组件将会被渲染到其中。

  • 注意 :
      如果组件不是一个Container 的子项目时， 不要使用此选项。 渲染和管理它的子项目是一个Container 的layout manager的责任。
      当使用此配置项时，无需调用render()方法。

另请参见 render 。

Component
resizeEvent : String
在布局中进行尺寸调整需要监听的事件。 默认为 'resize' 。
Panel
shadow : Boolean/String
True或者"sides"将会使用默认效果，"frame"将会使用四个方向的阴影， "drop"会使用右下阴影...
True或者"sides"将会使用默认效果，"frame"将会使用四个方向的阴影， "drop"会使用右下阴影(默认为"sides")。
Tip
shadowOffset : Number
如果显示了阴影，此参数为数值偏移量(默认为 4 )。注意，只有当 floating = true 时此参数才会被应用。...
如果显示了阴影，此参数为数值偏移量(默认为 4 )。注意，只有当 floating = true 时此参数才会被应用。
Panel
shim : Boolean
false将会在需要的浏览器中禁用iframe衬垫(默认为...
false 将会在需要的浏览器中禁用iframe衬垫(默认为 true )。注意，此选项只有在 floating = true 时应用。
Panel
stateEvents : Array
一个事件数组，当它们被触发时，组件需要保存自己的状态(默认值为 none)...

一个事件数组，当它们被触发时，组件需要保存自己的状态(默认值为 none)。 它们可以是任何该组件支持的事件类型，包括浏览器事件和 自定义事件(例如['click', 'customerchange'])。

对于保存和恢复组件状态的详细解释，参见 stateful

Component
stateId : String
为该组件指定的唯一的id值，它被用作管理组件状态的目的...
为该组件指定的唯一的id值，它被用作管理组件状态的目的。 (如果设定了id，默认值为组件自己的id，否则，如果组件使用自动生成的id，此值为null)。

对于保存和反解析组件状态的解释，参见 stateful 。

Component
stateful : Boolean
一个标志参数，它将引起组件在启动时尝试从一个保存的状态中恢复内部状态参数...

一个标志参数，它将引起组件在启动时尝试从一个保存的状态中恢复内部状态参数。 组件必须要么拥有一个 stateId 或者 id ，它们被分配给需要被管理的状态属性。 在跨页面加载时，不保证自动生成的id属性的稳定性， 并且，不能依赖此id来保存和恢复一个组件的相同状态。

为了保存状态的操作能够工作，状态管理器的提供者必须 被设置成一个Ext.state.Provider 的实现类，它覆盖了set 和get 方法，以便保存和恢复name/value对。 有一个内置的Ext.state.CookieProvider 可用。

为当前页面设置状态提供者:

Ext.state.Manager.setProvider(new Ext.state.CookieProvider({
    expires: new Date(new Date().getTime()+(1000*60*60*24*7)), //7 days from now
}));

当 stateEvents 配置项中其中之一的事件被触发时， 一个状态可保存的组件将试图保存其状态。

保存状态时，一个可保存状态的组件首先需要通过调用 getState 方法来序列化它的状态。 默认情况下，此函数什么事都不做。 开发者必须提供一个实现，返回一个hash对象，它描述了组件可恢复的状态。

getState方法产生的值将会传递给 Ext.state.Manager.set 方法，它使用配置的 Ext.state.Provider 来保存对象，以组件的 stateId 为key，或者，如果此值（指stateId）没有指定时， 使用它的 id 作为key。

在进行构造时，一个可保存状态的组件试图通过调用 Ext.state.Manager.get方法来 恢复它的状态，传递 stateId 或者，如果此值（指stateId）没有指定时， 使用它的 id 作为参数。

结果对象被传递给 applyState 。 applyState 的默认实现只是简单地把属性拷贝到对象中， 但是开发者可以覆盖此方法以支持更多行为。

通过向 beforestaterestore, staterestore, beforestatesave 和 statesave 事件上绑定监听器，你可以在保存和恢复状态时进行额外的处理。

Component
style : String
被添加到组件元素的特定样式。 必须是按照...
被添加到组件元素的特定样式。 必须是按照 Ext.Element.applyStyles 类指定格式的合法参数值。

new Ext.Panel({
    title: 'Some Title',
    renderTo: Ext.getBody(),
    width: 400, height: 300,
    layout: 'form',
    items: [{
        xtype: 'textarea',
        style: {
            width: '95%',
            marginBottom: '10px'
        }
    },
        new Ext.Button({
            text: 'Send',
            minWidth: '100',
            style: {
                marginBottom: '10px'
            }
        })
    ]
});
Component
tabTip : String
注: 这个配置只用于当该组件作为TabPanel的一个子项目时使用...

注: 这个配置只用于当该组件作为TabPanel的一个子项目时使用。

一个String类型的innerHTML(支持html标签)，当鼠标放在该选项上的时，显示一个tooltip。为了tips能够被渲染，Ext.QuickTips.init()必须被提前调用。
BoxComponent
tbar : Object/Array
panel的顶部工具栏。 此参数可以是一个 The top toolbar of the panel. This can be a Ext.Toolbar 对象、一个工具栏配置、或者一个被添加到工具栏的...

panel的顶部工具栏。 此参数可以是一个 The top toolbar of the panel. This can be a Ext.Toolbar 对象、一个工具栏配置、或者一个被添加到工具栏的buttons/button配置数组。 注意，在渲染之后此参数无效。如需在渲染之后访问顶部工具栏，请使用 getTopToolbar。

注意:尽管Toolbar可以包含Field组件，但它们不会 通过加载祖先FormPanel而被更新。Panel的工具栏不是标准Container->Component 层次的一部分，所以它们不会被扫面以收集表单项。但是，这些值还是会 被提交，因为提交表单的参数是从DOM树中收集的。

Panel
tbarCfg : Object
一个DomHelper 元素的配置对象，描述了当前Panel的tbar元素结构。 另请参见...

一个DomHelper 元素的配置对象，描述了当前Panel的tbar元素结构。 另请参见 bodyCfg 。

Panel
title : String
被用作innerHTML的标题文本(接受html标签) ，用来显示在panel的...
被用作innerHTML的标题文本(接受html标签) ，用来显示在panel的 header 中(默认为'')。 当 title 被指定时， header 元素将会被自动创建并显示，除非 header 被显式地设置为 false 。 如果你不在配置时指定一个 title ， 但是你想以后设置，你必须要么 指定一个非空的 title (一个空格' ' 也可以)或者指定 header:true ，这样容器元素将会被创建。
Panel
titleCollapse : Boolean
将会允许通过在顶部工具条的任意地方点击展开和折叠panel(当...
true 将会允许通过在顶部工具条的任意地方点击展开和折叠panel(当 collapsible = true )， false ) 将会只允许通过点击工具按钮进行操作(默认为 false ))。如果当前panel是border布局中的一个子项目，另请参见 BorderLayout.Region floatable 配置项。
Panel
toolTemplate : Ext.Template/Ext.XTemplate
用来在header 元素中创建tools 的模板。默认为:...

用来在header 元素中创建tools 的模板。默认为:

                                    new Ext.Template('<div class="x-tool x-tool-{id}">&#160;</div>')

可以覆盖此参数，以便为基于更复杂XTemplate的tools提供自定义的DOM结构。 模板的数据为一个简单的tool配置对象(不是整个Array)， 它在 tools配置项指定。 在以下例子中，当鼠标滑过tool时，一个<a>标签被用来提供视觉效果:

var win = new Ext.Window({
    tools: [{
        id: 'download',
        href: '/MyPdfDoc.pdf'
    }],
    toolTemplate: new Ext.XTemplate(
        '<tpl if="id==\'download\'">',
            '<a class="x-tool x-tool-pdf" href="{href}"></a>',
        '</tpl>',
        '<tpl if="id!=\'download\'">',
            '<div class="x-tool x-tool-{id}">&#160;</div>',
        '</tpl>'
    ),
    width:500,
    height:300,
    closeAction:'hide'
});

注意，CSS类'x-tool-pdf'必须拥有一个关联的样式规则，它提供了一个适当的背景图片， 例如:

                                a.x-tool-pdf {background-image: url(../shared/extjs/images/pdf.gif)!important;}
Panel
tools : Array
一个工具按钮配置数组，用来添加到头部工具区域。 当渲染之后，每个工具都被存储为一个Element ，被一个叫做...
一个工具按钮配置数组，用来添加到头部工具区域。 当渲染之后，每个工具都被存储为一个Element ，被一个叫做 tools. <tool-type> 的公共参数引用。

每个工具配置都可以包含如下参数:

  • id : String
    必须。需要创建的工具类型。默认情况下，这被指定为一个 CSS类，格式为 x-tool- <tool-type> ，用来形成工具Element。 对于以下列出的工具类型，Ext提供了CSS规则，和一个包含图片的icon对象。 通过提供可选的CSS规则和背景图片，开发者可以实现自定义的工具:
      toggle (当collapsible 为 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
    • tc : Object
      工具配置对象
  • stopEvent : Boolean
    默认为true。指定为false可以允许点击事件进行冒泡。
  • scope : Object
    调用处理函数的作用域。
  • qtip : String/Object
    一个tip字符串，或者一个提供给 Ext.QuickTip.register 的配置参数
  • hidden : Boolean
    True将会在初始化时渲染成隐藏的。
  • on : Object
    一个监听器配置对象，以addListener所需的参数格式 指定事件监听器

注意，当panel被折叠时提供部分固定的工具，这些工具仅仅提供可视按钮。 所有必备的功能，都必须通过添加实现了必备行为的处理函数来实现。

示例用法:

tools:[{
    id:'refresh',
    qtip: 'Refresh form Data',
    // hidden:true,
    handler: function(event, toolEl, panel){
        // refresh logic
    }
},
{
    id:'help',
    qtip: 'Get Help',
    handler: function(event, toolEl, panel){
        // whatever
    }
}]

对于自定义 'help' 的id，定义了两个相应的css类，拥有一个到15x15图片的链接:

                                .x-tool-help {background-image: url(images/help.png);}
.x-tool-help-over {background-image: url(images/help_over.png);}
// if using an image sprite:
.x-tool-help {background-image: url(images/help.png) no-repeat 0 0;}
.x-tool-help-over {background-position:-15px 0;}
Panel
tpl : Mixed
一个 Ext.Template , Ext.XTemplate 或者一个用来形成一个Ext.XTemplate的字符串数组...
一个 Ext.Template , Ext.XTemplate 或者一个用来形成一个Ext.XTemplate的字符串数组。 与 data 和 tplWriteMode 配置项协同使用。
Component
tplWriteMode : String
刷新组件的内容区域时使用的Ext.(X)Template方式。 默认为'overwrite' (参见 Ext.XTemplate.overwrite )。
刷新组件的内容区域时使用的Ext.(X)Template方式。 默认为'overwrite' (参见 Ext.XTemplate.overwrite )。
Component
unstyled : Boolean
覆盖 baseCls 设置为 baseCls = 'x-plain' ， 除了必须的属性之外，它将panel渲染成无样式的...
覆盖 baseCls 设置为 baseCls = 'x-plain' ， 除了必须的属性之外，它将panel渲染成无样式的，以便Ext布局功能能起作用 (例如overflow:hidden)。
Panel
width : Number
tip宽度像素值(默认为auto)。 如果超过了minWidth或者 maxWidth的范围， width将会被忽略...
tip宽度像素值(默认为auto)。 如果超过了minWidth或者 maxWidth的范围， width将会被忽略。支持的最大值是500
Tip
x : Number
如果被包含在一个指定位置的容器中，这个值表示x(left)坐标值。
BoxComponent
xtype : String
需要创建配置的xtype。 当传递一个配置对象给构造函数时...
需要创建配置的xtype。 当传递一个配置对象给构造函数时，此配置选项不会被使用。 只有在使用懒初始化的时候此配置项才会被使用，此时容器的子项目不是 通过一个完整的实例组件，而是通过一个Component配置指定的。 在渲染时，将会查找xtype以决定创建何种类型的子组件。

预定义的xtype列表如下： here。

如果你继承Component创建你自己的组件，你需要使用Ext.ComponentMgr.registerType 对它们进行注册，以便利用懒初始化和渲染机制。
Component
y : Number
如果被包含在一个指定位置的容器中，这个值表示y(top)坐标值。
BoxComponent

公共属性

Property Defined By
body : Ext.Element
Panel的body Element ，可以用来包含HTML内容。 内容可以在...
Panel的body Element ，可以用来包含HTML内容。 内容可以在html 配置项中指定，或者可以使用autoLoad 配置项被加载，或者通过Panel的Updater提供。 只读。

如果这被用来通过任意方式加载可视的HTML元素，那么Panel不可以被用作 一个Layout，用来容纳其它Panel。

如果当前Panel期望被用作一个Layout的宿主 (参见 layout) 那么body元素必须不能被加载或者改变---因为它处于Panel的Layout的控制 之下。

注意: 另请参见 el .

Panel
buttons : Array
Panel的按钮数组，它们从 buttons 配置属性创建。只读。
Panel
bwrap : Ext.Element
Panel的bwrapElement ，用来包含其它Panel元素(tbar, body, bbar, footer)。 参见 bodyCfg。 只读。
Panel
collapsed : Boolean
如果当前panel被折叠为true。只读。
Panel
dd : Ext.dd.DragSource.
如果当前Panel被配置为 draggable ，此参数将会包含一个 Ext.dd.DragSource 实例，它负责处理拖拽Panel...

如果当前Panel被配置为 draggable ，此参数将会包含一个 Ext.dd.DragSource 实例，它负责处理拖拽Panel。

开发者必须提供Ext.dd.DragSource的 抽象方法的实现，用来提供drag/drop过程中的每一步行为。 参见 draggable.
Panel
disabled : Boolean
当前组件处于无效状态时为true。 Read-only.
Component
el : Ext.Element
封装了当前组件的Ext.Element。 Read-only。通常情况下，这将是一个<DIV>元素，它由此类的...

封装了当前组件的Ext.Element。 Read-only。

通常情况下，这将是一个<DIV>元素，它由此类的 onRender方法创建，但是它可以通过使用 autoEl 配置项进行覆盖。

注意: 直到组件渲染完成此元素都将处于无效状态。

如需向当前组件的 DOM事件(而不是当前组件自己的Observable事件)添加监听器， 更多建议，参见 listeners 配置项，或者直接使用一个render监听器:

new Ext.Panel({
    title: 'The Clickable Panel',
    listeners: {
        render: function(p) {
            // Append the Panel to the click handler's argument list.
            p.getEl().on('click', handlePanelClick.createDelegate(null, [p], true));
        },
        single: true  // Remove the listener after first invocation
    }
});

另请参见 getEl

Component
footer : Ext.Element
Panel底部Element 。只读。此元素被用来容纳Panel的...
Panel底部Element 。只读。

此元素被用来容纳Panel的 buttons 或者 fbar 。

注意: 另请参见 el 的注释。

Panel
header : Ext.Element
Panel的headerElement. 只读。此元素被用来容纳 title和 tools...
Panel的headerElement. 只读。

此元素被用来容纳 title和 tools

注意: 另请参见 el 的注释。

Panel
hidden : Boolean
如果当前组件处于隐藏状态，此值为true。Read-only。
Component
initialConfig : Object
当前组件的初始化配置描述。 Read-only。
Component
items : MixedCollection
当前容器中的子组件集合 Ext.util.MixedCollection
Container
ownerCt : Ext.Container
组件所属的Container (默认为undefined，当前组件被添加到一个容器中时此值被自动设置)...
组件所属的Container (默认为undefined，当前组件被添加到一个容器中时此值被自动设置)。 Read-only。

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

Component
private : Object
我们只能在一块可见的区域进行布局。 布局目标*或者它的任何父元素* 为...
我们只能在一块可见的区域进行布局。 布局目标*或者它的任何父元素* 为display:none， 将意味着它没有一块可见的区域。
Container
refOwner : Ext.Container
如果当前组件是一个容器的孩子，并且是通过一个 ref 配置项被注册的，则此值为 ref 引用被插入到的祖先容器。
如果当前组件是一个容器的孩子，并且是通过一个 ref 配置项被注册的，则此值为 ref 引用被插入到的祖先容器。
Component
rendered : Boolean
如果当前组件已经被渲染了，此值为true。Read-only.
Component

公共方法

Method Defined By
Tip ( Object config )
创建一个新Tip
创建一个新Tip
参数:
  • config : Object
    配置选项
返回值:
  • void
Tip
add ( ...Object/Array component ) : Ext.Component/Array
向当前容器中添加 Component(s)。 描述 :在添加之前触发 beforeadd 事件...

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

描述 :

  • 在添加之前触发 beforeadd 事件
  • 将会相应地应用 容器的default config values (细节参见 defaults )。
  • 在组件添加之后触发 add 事件。

注意 :

  • 当调用 add 时如果容器已经被渲染， 你可能需要调用 doLayout 方法来刷新视图，它将导致所有尚未渲染的子组件进行渲染操作。 此操作是必须的，这样你可以 add 多个子组件而只刷新一次layout。 示例用法:

var tb = new Ext.Toolbar();
tb.render(document.body);  // toolbar is rendered
tb.add({text:'Button 1'}); // add multiple items (defaultType for Toolbar is 'button')
tb.add({text:'Button 2'});
tb.doLayout();             // refresh the layout
  • 警告: 使用BorderLayout布局的容器可能不能删除或者添加组件。 更多细节参见BorderLayout 的注释。
参数:
  • component : ...Object/Array

    需要添加的一个或多个组件，或者是一个组件数组。 更多信息参见 items 。

返回值:
  • Ext.Component/Array
    被添加的组件。
Container
addButton ( String/Object config , Function handler , Object scope ) : Ext.Button
向当前panel中添加一个按钮。注意，此方法必须在渲染之前调用。 首选的方式是通过...
向当前panel中添加一个按钮。注意，此方法必须在渲染之前调用。 首选的方式是通过buttons 配置项添加按钮。
参数:
  • config : String/Object
    一个合法的Ext.Button 配置。字符串将会变成默认按钮配置文本，对象将会被看做一个按钮配置对象。
  • handler : Function
    在按钮Ext.Button.click 时被调用的函数
  • scope : Object
    作用域( this 引用)，按钮处理函数将会在其中被执行。默认为Button.
返回值:
  • Ext.Button
    被添加的按钮
Panel
addClass ( string cls ) : Ext.Component
为组件底层的元素添加CSS样式。
为组件底层的元素添加CSS样式。
参数:
  • cls : string
    需要添加的CSS样式的class名称
返回值:
  • Ext.Component
    this
Component
addEvents( Object|String o, string Optional. ) : void
添加指定的事件到事件列表上，事件会被该Observable触发。
添加指定的事件到事件列表上，事件会被该Observable触发。
参数:
  • o : Object|String
    以事件名作为属性true作为值的对象 或者当多个事件名被分开的传递时则为第一个事件名。
  • Optional. : string
    事件名被分开的传递时则为事件名。 用法:
    this.addEvents('storeloaded', 'storecleared');
返回值:
  • void
Observable
addListener( String eventName, Function handler, [Object scope], [Object options] ) : void
给对象添加事件处理器。
给对象添加事件处理器。
参数:
  • eventName : String
    监听的事件名。
  • handler : Function
    事件调用的方法
  • scope : Object
    （可选）处理方法执行的作用域 (this的引用 reference)。 如果被忽略。默认为触发事件的对象。
  • options : Object
    （可选）包含处理器配置和属性的对象。 可能包含以下的属性:
    • scope : Object
      处理方法执行的作用域(this的引用) 。 如果被忽略。默认为触发事件的对象。
    • delay : Number
      在触发事件后延迟调用处理器的毫秒数。
    • single : Boolean
      如果为True则添加一个处理器来处理下一次的事件触发（仅一次），然后移除自己。
    • buffer : Number
      使得处理器延迟指定毫秒数后预定的运行在 一个Ext.util.DelayedTask中 。 如果事件在时间内再一次被触发，原始的处理器不会被调用，但是新的处理器会预定的在他的位置上。
    • target : Observable
      如果事件在目标的Observable上触发则仅仅调用处理器， 否则 事件会从子类的Observable上冒泡

    组合选项
    使用这些选项参数,可能会组合出不同类型的监听器：

    一个延迟的，一次性的监听器。

    myDataView.on('click', this.onClick, this, {
single: true,
delay: 100
});

    一次调用附加多个处理器
    该方法同样支持传递一个包含指定的多个处理器的属性的配置对象参数。

    myGridPanel.on({
'click' : {
    fn: this.onClick,
    scope: this,
    delay: 100
},
'mouseover' : {
    fn: this.onMouseOver,
    scope: this
},
'mouseout' : {
    fn: this.onMouseOut,
    scope: this
}
});

    或者一个简写的语法：

    myGridPanel.on({
'click' : this.onClick,
'mouseover' : this.onMouseOver,
'mouseout' : this.onMouseOut,
 scope: this
});
返回值:
  • void
Observable
applyToMarkup ( String/HTMLElement el ) : void
将此组件添加到已存在的有效的HTML标签中。 使用该方法时，无需再调用render()方法。
将此组件添加到已存在的有效的HTML标签中。 使用该方法时，无需再调用render()方法。
参数:
  • el : String/HTMLElement
返回值:
  • void
Component
bubble ( Function fn , [ Object scope ], [ Array args ] ) : Ext.Container
沿着component/container继承结构进行冒泡， 在每个组件上调用指定的函数。 所调用函数的作用域...
沿着component/container继承结构进行冒泡， 在每个组件上调用指定的函数。 所调用函数的作用域( this)将会是 指定的作用域或者是当前组件。 如果在函数任何一点上返回false，即停止冒泡过程
参数:
  • fn : Function
    需要调用的函数
  • scope : Object
    (可选) 函数的作用域(默认为当前节点)
  • args : Array
    (可选) 调用函数时需要传递的参数( 默认传递当前组件)
返回值:
  • Ext.Container
    this
Container
cascade ( Function fn , [ Object scope ], [ Array args ] ) : Ext.Container
从当前组件(第一个被调用的组件)开始，沿着component/container的继承树向下回溯...
从当前组件(第一个被调用的组件)开始，沿着component/container的继承树向下回溯， 在每个组件上调用指定的方法， 调用方法时的(this)作用域为指定的scope或者为当前组件。 传递给方法的参数为传递进来args或者当前组件。 在起泡的任意一个节点上，如果function返回false，即停止在那个分支上。
参数:
  • fn : Function
    需要调用的函数
  • scope : Object
    (可选)函数的作用域(默认为当前组件)
  • args : Array
    (可选) 调用函数时传递的参数 (默认传递当前组件)
返回值:
  • Ext.Container
    this
Container
cloneConfig ( Object overrides ) : Ext.Component
默认使用原先传递给当前实例的配置值克隆当前组件。
默认使用原先传递给当前实例的配置值克隆当前组件。
参数:
  • overrides : Object
    一个新的配置项，包含需要覆盖到克隆版本的所有属性。 可以传递一个id参数给此对象，否则将自动生成一个新的id以避免发生重复。
返回值:
  • Ext.Component
    当前组件的克隆副本
Component
collapse ( Boolean animate ) : Ext.Panel
折叠panel的body，这样它就变成隐藏的。 触发beforecollapse 事件...
折叠panel的body，这样它就变成隐藏的。 触发beforecollapse 事件，处理函数返回false可以取消折叠操作。
参数:
  • animate : Boolean
    True将会在变换时使用动画效果，其它为false( 默认为panel的animCollapse 配置项的值)
返回值:
  • Ext.Panel
    this
Panel
destroy () : void
通过如下方法销毁对象：删除所有的事件监听器、将组件的元素从DOM树中删除...
通过如下方法销毁对象：删除所有的事件监听器、将组件的元素从DOM树中删除（如果可以）、 将组件从它的 Ext.Container（如果可用）中删除、 并且将它从Ext.ComponentMgr中 注销。 销毁操作一般由框架自动完成，一般情况下不需要直接调用该方法。
参数:
  • 无。
返回值:
  • void
Component
disable () : Ext.Component
将组件置为无效状态，并出发'disable'事件。
将组件置为无效状态，并出发'disable'事件。
参数:
  • 无。
返回值:
  • Ext.Component
    this
Component
doLayout ( [ Boolean shallow ], [ Boolean force ] ) : Ext.Container
强制容器的布局进行重新计算。 在向一个已经渲染的容器中添加...
强制容器的布局进行重新计算。 在向一个已经渲染的容器中添加一个新的组件， 或者改变子组件的尺寸/位置参数之后，必须调用此函数。
参数:
  • shallow : Boolean
    (可选) 设置为true时将仅仅计算当前组件的布局， 并且让子组件在需要时自动计算布局 (默认为flase，它将递归地调用每个子容器的doLayout方法)
  • force : Boolean
    (可选) 设置为true将强制进行布局，即使项目是隐藏的也进行。
返回值:
  • Ext.Container
    this
Container
enable () : Ext.Component
将组件置为有效状态并触发'enable'事件。
将组件置为有效状态并触发'enable'事件。
参数:
  • 无。
返回值:
  • Ext.Component
    this
Component
enableBubble( String/Array events ) :void
是否现在使得事件会被该Observable触发并调用 this.getBubbleTarget()方法在拥有者的继承树...

是否现在使得事件会被该Observable触发并调用 this.getBubbleTarget()方法在拥有者的继承树中冒泡。Observable的基础类中没有该方法的实现。

该方法一般被Ext.Components用来冒泡事件到拥有者的容器。参看Ext.Component.getBubbleTarget默认的实现 在Ext.Component中返回组件的直接拥有者。但是如果需要的是一个已知的目标，该方法可以被重写来更快的访问需求的目标。

例子:

Ext.override(Ext.form.Field, {
    // 添加方法到Field的initComponent上改变事件为冒泡
    initComponent : Ext.form.Field.prototype.initComponent.createSequence(function() {
        this.enableBubble('change');
    }),

    // 我们知道我们想让Field的事件冒泡到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() {
            // 如果样式被修改标题会变红。
            myForm.header.setStyle('color', 'red');
        }
    }
});
参数:
  • events : String/Array
    冒泡的事件名，或事件名数组
返回值:
  • void
Observable
expand ( Boolean animate ) : Ext.Panel
展开panel的body以便让其变得可见。 触发beforeexpand 事件...
展开panel的body以便让其变得可见。 触发beforeexpand 事件，如果它返回false将会取消展开操作。
参数:
  • animate : Boolean
    True将会在变换过程中使用动画效果，否则为false (默认为panel的 animCollapse 配置项的值)
返回值:
  • Ext.Panel
    this
Panel
find ( String prop , String value ) : Array
根据属性查找当前容器中任何层次上的组件
根据属性查找当前容器中任何层次上的组件
参数:
  • prop : String
  • value : String
返回值:
  • Array
    Ext.Component数组
Container
findBy ( Function fn , [ Object scope ] ) : Array
根据一个自定义的函数，查找当前容器中任意层级上的一个组件。 如果传递的函数返回true...
根据一个自定义的函数，查找当前容器中任意层级上的一个组件。 如果传递的函数返回true，组件将会被包含在结果中。 函数将会被用如下参数(component, this container)进行调用。
参数:
  • fn : Function
    需要调用的函数
  • scope : Object
    可选
返回值:
  • Array
    Ext.Component数组
Container
findById ( String id ) : Ext.Component
通过id查找容器中位于任何层级上的组件
通过id查找容器中位于任何层级上的组件
参数:
  • id : String
返回值:
  • Ext.Component
Container
findByType ( String/Class xtype , [ Boolean shallow ] ) : Array
根据xtype或者类型，查找当前容器中任何层级上的组件
根据xtype或者类型，查找当前容器中任何层级上的组件
参数:
  • xtype : String/Class
    组件的xtype字符串，或者直接是组件的class类型
  • shallow : Boolean
    (可选) 此参数为flase时将检查当前组件是否是指定xtype的后裔 (这是默认情况)，或者设置为true， 将检查当前组件是否直接是指定xtype类型（译者注：即指不按照多态性进行检查）。
返回值:
  • Array
    Ext.Component数组
Container
findParentBy ( Function fn ) : Ext.Container
通过自定义的函数查找当前组件上层任何层次上的容器...
通过自定义的函数查找当前组件上层任何层次上的容器。 如果传递的函数返回true，容器对象将被返回。
参数:
  • fn : Function
    自定义的函数，使用如下参数调用(container,this component)。
返回值:
  • Ext.Container
    自定义函数返回true的第一个容器
Component
findParentByType ( String/Class xtype ) : Ext.Container
通过xtype或者class查找当前组件上层任何层次上的容器
通过xtype或者class查找当前组件上层任何层次上的容器
参数:
  • xtype : String/Class
    组件的xtype字符串，或者直接是组件的class
返回值:
  • Ext.Container
    符合指定xtype或者class的第一个容器
Component
fireEvent( String eventName, Object... args ) : Boolean
用传入的参数触发指定的事件 (减去事件名)。 一个事件可以被设置为冒泡 Obse...

用传入的参数触发指定的事件 (减去事件名)。

一个事件可以被设置为冒泡到Observable父类继承树(参看 Ext.Component.getBubbleTarget) 调用enableBubble实现。

参数:
  • eventName : String
    触发的事件名。
  • args : Object...
    传递给处理器的可变长度参数。
返回值:
  • Boolean
    如果有任何的处理器返回false则返回false，否则返回true。
Observable
focus ( [ Boolean selectText ], [ Boolean/Number delay ] ) : Ext.Component
尝试将当前组件设为焦点。
尝试将当前组件设为焦点。
参数:
  • selectText : Boolean
    (可选) 如果可用，同时选中组件内部的文本
  • delay : Boolean/Number
    (可选)将当前组件设置为焦点的延迟时间(设置为true等于0毫秒)
返回值:
  • Ext.Component
    this
Component
get ( String/Number key ) : Ext.Component
获取当前容器包含的一个组件( items.get(key)方法的别名)
获取当前容器包含的一个组件( items.get(key)方法的别名)
参数:
  • key : String/Number
    组件的索引
返回值:
  • Ext.Component
    Ext.Component
Container
getBottomToolbar () : Ext.Toolbar
返回panel底部区域toolbar ( bbar )。
返回panel底部区域toolbar ( bbar )。
参数:
  • 无。
返回值:
  • Ext.Toolbar
    toolbar
Panel
getBox ( [ Boolean local ] ) : Object
获取组件底层元素当前盒子模型的尺寸。（译者注：盒子模型是CSS术语，详细解释请自行搜索。）
获取组件底层元素当前盒子模型的尺寸。（译者注：盒子模型是CSS术语，详细解释请自行搜索。）
参数:
  • local : Boolean
    (可选)值为true时，组件的left值和top值将代替页面的XY被返回。(默认值为false)
返回值:
  • Object
    返回值的格式{x, y, width, height}
BoxComponent
getBubbleTarget () : Ext.Container
为Observable的fireEvent方法提供链接，它沿着继承结构进行冒泡操作。
为Observable的fireEvent方法提供链接，它沿着继承结构进行冒泡操作。
参数:
  • 无。
返回值:
  • Ext.Container
    拥有当前组件的容器。
Component
getComponent ( String/Number comp ) : Ext.Component
检查当前容器的 items property 并且获取当前容器的一个直接的子组件。
检查当前容器的 items property 并且获取当前容器的一个直接的子组件。
参数:
  • comp : String/Number
    参数可以是以下任何值：
    • 一个 String : 代表子组件的 itemId 或者 id
    • 一个 Number : 代表子组件在 items property 中的位置

    其它信息参见 Ext.util.MixedCollection.get。

返回值:
  • Ext.Component
    组件(如果有找到)。
Container
getEl () : Ext.Element
返回 Ext.Element ，它包装了当前组件。...

返回 Ext.Element ，它包装了当前组件。

通常情况下，这将是一个<DIV>元素，它是由该类的onRender方法创建的， 但是可以使用autoEl配置项 覆盖它。

注意: 此元素将会一直处于无效状态直到当前组件渲染完成。

如需向当前组件的 DOM事件(而不是当前组件自己的Observable事件)添加监听器， 更多建议，参见 listeners 配置项，或者直接使用一个render监听器:

new Ext.Panel({
    title: 'The Clickable Panel',
    listeners: {
        render: function(p) {
            // Append the Panel to the click handler's argument list.
            p.getEl().on('click', handlePanelClick.createDelegate(null, [p], true));
        },
        single: true  // Remove the listener after first invocation
    }
});
参数:
  • 无。
返回值:
  • Ext.Element
    包装当前组件的元素。
Component
getFooterToolbar () : Ext.Toolbar
返回panel底部( fbar )区域的toolbar
返回panel底部( fbar )区域的toolbar
参数:
  • 无。
返回值:
  • Ext.Toolbar
    toolbar
Panel
getFrameHeight () : Number
返回当前panel框架元素的高度像素值 (包括所有top和bottom工具栏以及header和footer元素...
返回当前panel框架元素的高度像素值 (包括所有top和bottom工具栏以及header和footer元素， 但是不包括body高度)。 如需获取body高度，参见 getInnerHeight.
参数:
  • 无。
返回值:
  • Number
    框架高度
Panel
getFrameWidth () : Number
返回当前panel框架元素的宽度像素值 (不包含body宽度)。如需获得body宽度，参见...
返回当前panel框架元素的宽度像素值 (不包含body宽度)。如需获得body宽度，参见 getInnerWidth。
参数:
  • 无。
返回值:
  • Number
    框架宽度
Panel
getHeight () : Number
获取该组件的当前高度值。
获取该组件的当前高度值。
参数:
  • 无。
返回值:
  • Number
BoxComponent
getId () : String
返回当前组件的id，如果没有定义id，则自动生成并返回一个id:'ext-comp-'...
返回当前组件的 id 如果没有定义 id 则自动生成并返回一个 id

'ext-comp-' + (++Ext.Component.AUTO_ID)
参数:
  • 无。
返回值:
  • String
    id
Component
getInnerHeight () : Number
返回body元素的高度像素值(不包括任何框架元素的高度)。 对于框架高度参见...
返回body元素的高度像素值(不包括任何框架元素的高度)。 对于框架高度参见 getFrameHeight。
参数:
  • 无。
返回值:
  • Number
    body高度
Panel
getInnerWidth () : Number
返回body元素宽度像素值(不包含任何框架元素的宽度)。 对于框架宽度，参见 getFrameWidth。
返回body元素宽度像素值(不包含任何框架元素的宽度)。 对于框架宽度，参见 getFrameWidth。
参数:
  • 无。
返回值:
  • Number
    body宽度
Panel
getItemId () : String
返回当前组件的 itemId 。 如果没有通过配置参数指定 itemId 那么，将会使用...
返回当前组件的 itemId 。 如果没有通过配置参数指定 itemId 那么，将会使用 getId 返回 id 。
参数:
  • 无。
返回值:
  • String
Component
getLayout () : ContainerLayout
返回容器当前使用的布局管理器。 如果容器当前没有设置布局管理器， 将会创建一个默认的...
返回容器当前使用的布局管理器。 如果容器当前没有设置布局管理器， 将会创建一个默认的 Ext.layout.ContainerLayout 并被设置为容器的布局管理器。
参数:
  • 无。
返回值:
  • ContainerLayout
    容器的布局管理器
Container
getLayoutTarget () : Ext.Element
返回当前容器中用来包含子组件的元素。提供了一个 可以返回容器的...

返回当前容器中用来包含子组件的元素。

提供了一个 可以返回容器的Element 的实现， 但是，如果容器有更复杂的结构， 可以覆盖此实现以返回 layout 在其中渲染子组件的元素。

参数:
  • 无。
返回值:
  • Ext.Element
    在其中渲染子组件的元素。
Container
getOuterSize () : Object
获取当前组件所在元素的尺寸大小，包括边缘的空白处。
获取当前组件所在元素的尺寸大小，包括边缘的空白处。
参数:
  • 无。
返回值:
  • Object
    一个包含元素大小的对象 {width: (element width + left/right margins), height: (element height + top/bottom margins)}
BoxComponent
getPosition ( [ Boolean local ] ) : Array
获取组件底层元素当前的XY位置。
获取组件底层元素当前的XY位置。
参数:
  • local : Boolean
    (可选)如果为true，将返回元素的left和top值，而不是相对于页面内的 XY。(默认值为 false)
返回值:
  • Array
    元素的XY位置值(例如：[100, 200])
BoxComponent
getResizeEl () : Ext.Element
返回该组件的最外层用来定义这些组件整体大小的Element...

返回该组件的最外层用来定义这些组件整体大小的Element对象。

通常用 getEl 方法将会返回相同的Element对象，但在有些情况下，组件可能有一些更多的封装了它的主要动态Element对象的Element对象。

例如ComboBox。它是封装在一个包含<input>元素的包装元素里(这将返回其 getEl方法和触发按钮的元素)。返回的元素为resizeEl。

参数:
  • 无。
返回值:
  • Ext.Element
    The Element which is to be resized by size managing layouts.
BoxComponent
getSize () : Object
获取组件底层元素当前的大小。
获取组件底层元素当前的大小。
参数:
  • 无。
返回值:
  • Object
    一个包含元素大小的对象{width: (element width), height: (element height)}
BoxComponent
getTool ( String id ) : Object
根据id获取一个tool.
根据id获取一个tool.
参数:
  • id : String
返回值:
  • Object
    tool
Panel
getTopToolbar () : Ext.Toolbar
返回panel顶部区域的 toolbar ( tbar ).
返回panel顶部区域的 toolbar ( tbar ).
参数:
  • 无。
返回值:
  • Ext.Toolbar
    toolbar
Panel
getUpdater () : Ext.Updater
获取当前panel的 Ext.Updater .让你可以为当前panel的body执行Ajax更新。
获取当前panel的 Ext.Updater .让你可以为当前panel的body执行Ajax更新。
参数:
  • 无。
返回值:
  • Ext.Updater
    Updater
Panel
getWidth () : Number
获取该组件的当前宽度值。
获取该组件的当前宽度值。
参数:
  • 无。
返回值:
  • Number
BoxComponent
getXType () : String
获取当前组件的xtype，它是用 Ext.ComponentMgr 注册的。 所有可用的xtype列表，参见...
获取当前组件的xtype，它是用 Ext.ComponentMgr 注册的。 所有可用的xtype列表，参见 Ext.Component 类头部。示例用法:

var t = new Ext.form.TextField();
alert(t.getXType());  // alerts 'textfield'
参数:
  • 无。
返回值:
  • String
    The xtype
Component
getXTypes () : String
返回此组件的xtype继承树，用字符'-'分隔。 所有可用的xtype值...

返回此组件的xtype继承树，用字符'-'分隔。 所有可用的xtype值，请参见Ext.Component 类的头部。

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

示例用法:

var t = new Ext.form.TextField();
alert(t.getXTypes());  // alerts 'component/box/field/textfield'
参数:
  • 无。
返回值:
  • String
    xtype层次字符串
Component
hasListener( String eventName ) : Boolean
检测对象是否包含指定事件的任何监听器
检测对象是否包含指定事件的任何监听器
参数:
  • eventName : String
    检测的事件名
返回值:
  • Boolean
    如果事件被监听则为true，否则为false
Observable
hide () : Ext.Component
隐藏当前组件。 监听 beforehide' 事件并且返回false 可以取消隐藏组件的操作。 在隐藏组件之后触发...
隐藏当前组件。 监听 beforehide' 事件并且返回false 可以取消隐藏组件的操作。 在隐藏组件之后触发 ' hide' 事件。 如果组件被配置成 hidden 那么此方法在内部被调用。
参数:
  • 无。
返回值:
  • Ext.Component
    this
Component
insert ( Number index , Ext.Component component ) : Ext.Component
在当前容器的指定索引处插入一个组件。 在插入之前触发...
在当前容器的指定索引处插入一个组件。 在插入之前触发 beforeadd 事件， 然后在组件被插入之后触发 add 事件。
参数:
  • index : Number
    组件会被插入到容器子项集合中时的索引位置
  • component : Ext.Component
    需要插入的子组件。

    Ext使用懒渲染，只有在必要的时候才会渲染插入的组件。

    如果使用懒渲染，可以传递一个组件配置对象以避免创建一个真实组件的开销， 这意味着，插入的组件不会立即被渲染。 为了利用这个“懒初始化”('lazy instantiation')， 必须把组件设置为它注册的 Ext.Component.xtype 值。

    所有可用的xtype列表，参见 Ext.Component。
返回值:
  • Ext.Component
    使用容器默认配置值插入的组件(或者配置对象)。
Container
isVisible () : Boolean
如果当前组件可见，返回true。
如果当前组件可见，返回true。
参数:
  • 无。
返回值:
  • Boolean
    如果当前组件可见，返回true，其它返回false。
Component
isXType ( String xtype , [ Boolean shallow ] ) : Boolean
Tests whether or not this Component is of a specific xtype. This can test whether this Component is descended from th...

测试此组件是否是指定的xtype。此方法既可以测试是否是指定的xtype的某个子类， 或者它是否直接是指定的xtype类(shallow=true)。

如果使用你自己的子类，必须知道组件必须注册它的xtype值。

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

示例用法:

var t = new Ext.form.TextField();
var isText = t.isXType('textfield');        // true
var isBoxSubclass = t.isXType('box');       // true, descended from BoxComponent
var isBoxInstance = t.isXType('box', true); // false, not a direct BoxComponent instance
参数:
  • xtype : String
    需要为当前组件进行检测的xtype
  • shallow : Boolean
    (可选) 如果为false，检测组件是否是xtype继承树中的某个子类（默认是这种情况）， 如果为true，只检测组件是否是指定的xtype类型。
返回值:
  • Boolean
    如果当前组件是指定xtype的子类，返回true，其它返回flase。
Component
load ( Object/String/Function config ) : Ext.Panel
立即使用XHR返回的内容装载当前panel的内容。
立即使用XHR返回的内容装载当前panel的内容。
参数:
  • config : Object/String/Function
    一个包含任何如下选项的配置对象:
    panel.load({
    url: 'your-url.php',
    params: {param1: 'foo', param2: 'bar'}, // or a URL encoded string
    callback: yourFunction,
    scope: yourObject, // optional scope for the callback
    discardUrl: false,
    nocache: false,
    text: 'Loading...',
    timeout: 30,
    scripts: false
});
    唯一的必须参数是url。 可选的nocache、text和script参数是 disableCaching、indicatorText和loadScripts的快捷方式， 它们被用来设置到当前panel的Updater实例所绑定的 属性上。
返回值:
  • Ext.Panel
    this
Panel
mon ( Observable|Element item , Object|String ename , Function fn , Object scope , Object opt ) : void
向任何Observable对象(或者元素)上添加监听器，监听器将会在组件...

向任何Observable对象(或者元素)上添加监听器，监听器将会在组件销毁时被自动删除。
用法：

myGridPanel.mon(myGridPanel.getSelectionModel(), 'selectionchange', handleSelectionChange, null, {buffer: 50});

or:

myGridPanel.mon(myGridPanel.getSelectionModel(), {
    selectionchange: handleSelectionChange,
    buffer: 50
});
参数:
  • item : Observable|Element
    需要添加listener/listeners的项目。
  • ename : Object|String
    事件名，或者一个包含事件名属性的对象。
  • fn : Function
    (可选) 如果 ename 参数是一个事件名，此参数为处理函数。
  • scope : Object
    (可选)如果 ename 参数是一个事件名称，此参数是作用域 ( this 引用)，监听函数将会在此作用域中被执行。
  • opt : Object
    (可选)如果 ename 参数是一个事件名称， 此参数是 addListener 配置项。
返回值:
  • void
Component
mun ( Observable|Element item , Object|String ename , Function fn , Object scope ) : void
删除通过mon 方法添加的监听器。
删除通过mon 方法添加的监听器。
参数:
  • item : Observable|Element
    需要删除listener/listeners的项目。
  • ename : Object|String
    事件名称，或者一个包含事件名称属性的对象。
  • fn : Function
    (可选)如果 ename 参数是一个事件名称，此参数是一个处理函数。
  • scope : Object
    (可选)如果 ename 参数是一个事件名称，此参数是作用域 ( this 引用)，监听函数将会在此作用域中被执行。
返回值:
  • void
Component
nextSibling () : Ext.Component
返回所属容器中的下一个组件
返回所属容器中的下一个组件
参数:
  • 无。
返回值:
  • Ext.Component
Component
on( String eventName, Function handler, [Object scope], [Object options] ) : void
给对象添加事件处理器 (addListener的简写形式)
给对象添加事件处理器 (addListener的简写形式。)
参数:
  • eventName : String
    监听的事件类型
  • handler : Function
    事件调用的方法
  • scope : Object
    （可选）处理方法执行时的作用域 (this 的引用)。 如果被忽略。默认为触发事件的对象。
  • options : Object
    可选 包含处理器配置的对象。
返回值:
  • void
Observable
previousSibling () : Ext.Component
返回所属容器中的前一个组件
返回所属容器中的前一个组件
参数:
  • 无。
返回值:
  • Ext.Component
Component
purgeListeners() : void
移除对象上所有的监听器
移除对象上所有的监听器
参数:
  • 无。
返回值:
  • void
Observable
relayEvents( Object o, Array events ) : void
从指定的Observable上传递选择的事件就好像被当前对象触发一样。
从指定的Observable上传递选择的事件就好像被当前对象触发一样。
参数:
  • o : Object
    该Observable上的事件被当前对象传递。
  • events : Array
    传递的数组名。
返回值:
  • void
Observable
remove ( Component/String component , [ Boolean autoDestroy ] ) : Ext.Component
从当前容器中移除一个组件。 在移除之前触发 beforeremove 事件， 然后在组件被移除之后触发...
从当前容器中移除一个组件。 在移除之前触发 beforeremove 事件， 然后在组件被移除之后触发 remove 事件。
参数:
  • component : Component/String
    需要移除的组件引用或者id
  • autoDestroy : Boolean
    (可选) 设置为true将自动调用被删组件的 Ext.Component.destroy 函数。 默认为容器的 autoDestroy 配置值。
返回值:
  • Ext.Component
    被移除的组件。
Container
removeAll ( [ Boolean autoDestroy ] ) : Array
从当前容器中删除所有组件。
从当前容器中删除所有组件。
参数:
  • autoDestroy : Boolean
    (可选) 此参数为true时将自动调用 被删组件的 Ext.Component.destroy 方法。 默认为当前容器的 autoDestroy 配置值。
返回值:
  • Array
    被销毁的组件数组
Container
removeClass ( string cls ) : Ext.Component
从组件底层的元素上删除一个CSS类。
从组件底层的元素上删除一个CSS类。
参数:
  • cls : string
    需要移除的CSS类名
返回值:
  • Ext.Component
    this
Component
removeListener( String eventName, Function handler, [Object scope] ) : void
删除一个事件处理器。
删除一个事件处理器。
参数:
  • eventName : String
    处理器关联的事件类型。
  • handler : Function
    移除的处理器。 这应该是传递到addListener里的方法的引用。
  • scope : Object
    （可选）处理器指定的初始作用域。
返回值:
  • void
Observable
render ( [ Element/HTMLElement/String container ], [ String/Number position ] ) : void
在传递进来的HTML元素中渲染当前组件。...

在传递进来的HTML元素中渲染当前组件。

如果你正在使用一个Container 对象放置当前组件，那么请不要使用render方法。

当容器第一次被渲染时，它的子组件将会被容器的 layout 管理器渲染。

某些布局管理器允许动态添加子组件。它们包括 Ext.layout.CardLayout, Ext.layout.AnchorLayout, Ext.layout.FormLayout, Ext.layout.TableLayout。

当一个新的子组件被添加时，如果容器已经被渲染了， 你可能需要调用容器的 doLayout 方法来刷新视图，它将导致所有没有被渲染的子组件进行渲染操作。 此操作是必须的，这样你可以添加多个子组件而只刷新一次layout。

当创建复杂的UI时，非常重要的一点是，请记住调整子项目的尺寸和位置是容器的 layout 管理器的职责。 如果你希望子项目的尺寸对用户交互作出反应， 你必须为容器配置一个布局管理器，它将创建和管理你心里想要的那种布局。

忽略容器的layout 配置意味着将会使用一个基本的布局管理器，它除了按次序把子组件 渲染到容器中之外什么事情都不做。 这种情况下，任何尺寸和位置的调整操作都不会发生。

参数:
  • container : Element/HTMLElement/String
    (可选) 需要在其中渲染当前组件的元素。 如果它是从一个已存在的标签中创建的，此参数应该被忽略。
  • position : String/Number
    (可选) 容器中的一个元素ID或者一个DOM节点索引， 当前组件将会被插入到它前面 (默认append到容器的尾部)
返回值:
  • void
Component
resumeEvents() : void
重新开始触发事件。(参见suspendEvents) 如果事件以queueSuspended参数被挂起，则在事件被挂起时 ...
重新开始触发事件。(参见 suspendEvents) 如果事件以queueSuspended 参数被挂起，则在事件被挂起时触发的事件会被传递到所有的监听器上
参数:
  • 无。
返回值:
  • void
Observable
setAutoScroll ( Boolean scroll ) : Ext.BoxComponent
设置该组件内容溢出时是否自动显示滚动条。
设置该组件内容溢出时是否自动显示滚动条。
参数:
  • scroll : Boolean
    值为true的话组件自动显示滚动条。
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setDisabled ( Boolean disabled ) : Ext.Component
工具函数，使用布尔值设置有效/无效(disabled/enabled )。
工具函数，使用布尔值设置有效/无效(disabled/enabled )。
参数:
  • disabled : Boolean
返回值:
  • Ext.Component
    this
Component
setHeight ( Mixed height ) : Ext.BoxComponent
设置此组件的高度。该方法将触发resize事件。
设置此组件的高度。该方法将触发resize事件。
参数:
  • height : Mixed
    The new height to set.
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setIconClass ( String cls ) : void
设置CSS类，为当前panel提供图标图片。 如果已经设置了...
设置CSS类，为当前panel提供图标图片。 如果已经设置了，此方法将会替换任何现有的图标类并在完成之后触发 iconchange 事件。
参数:
  • cls : String
    新的CSS类名
返回值:
  • void
Panel
setPagePosition ( Number x , Number y ) : Ext.BoxComponent
设置组件在页面中的XY位置。 如果需要设置left和top值 ，请使用...
设置组件在页面中的XY位置。 如果需要设置left和top值 ，请使用setPosition方法。 该方法触发move事件。
参数:
  • x : Number
    The new x position
  • y : Number
    The new y position
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setPosition ( Number left , Number top ) : Ext.BoxComponent
设置组件的left和top值。设置组件的页面XY值，请使用setPagePosition方法。该方法触发...
设置组件的left和top值。设置组件的页面XY值，请使用setPagePosition方法。该方法触发move事件。
参数:
  • left : Number
    The new left
  • top : Number
    The new top
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setSize ( Mixed width , Mixed height ) : Ext.BoxComponent
设置BoxComponent的宽度和高度。 此方法触发resize事件...
设置BoxComponent的宽度和高度。 此方法触发resize事件。此方法可以接收单独的width或者height值作为参数， 或者你可以传递像这样的一个size对象： {width:10, height:20} 。
参数:
  • width : Mixed
    设置的新的width值。这可以是：
    • 一个Number类型指定Element新的宽度 Ext.Element.defaultUnit(默认为像素 :'px')。
    • 一个String类型用于设置width的CSS样式。
    • 一个size对象格式为 {width: widthValue, height: heightValue} 。
    • 值为 undefined 时，保留原来的width不变。
  • height : Mixed
    设置的新的height值(如果第一个参数传递了一个size对象，此参数没有必要传递)。这可以是：
    • 一个Number类型指定Element新的高度 Ext.Element.defaultUnit(默认为像素 :'px')。
    • 一个String类型用于设置height的CSS样式。也有可能不会被使用到。
    • 值为 undefined 时，保留原来的height不变。
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setTitle ( String title , [ String iconCls ] ) : void
为panel设置标题文本，也可选择设置 icon class。...

为panel设置标题文本，也可选择设置 icon class。

为了能够设置标题，必须已经为Panel创建了一个header元素。 要么通过向Panel上注册一个非空的 title ，或者配置 header: true ，可触发此操作(译者注：指为Panel创建header元素)。

参数:
  • title : String
    需要设置的标题文本
  • iconCls : String
    (可选) iconCls 一个用户定义的CSS类，为当前panel提供图标图片。
返回值:
  • void
Panel
setVisible ( Boolean visible ) : Ext.Component
工具方法，通过使用布尔值隐藏或者显示当前组件。
工具方法，通过使用布尔值隐藏或者显示当前组件。
参数:
  • visible : Boolean
    true时显示，false时隐藏
返回值:
  • Ext.Component
    this
Component
setWidth ( Mixed width ) : Ext.BoxComponent
设置组件的宽度。 此方法触发resize事件。
设置组件的宽度。 此方法触发resize事件。
参数:
  • width : Mixed
    The new width to set.
返回值:
  • Ext.BoxComponent
    this
BoxComponent
show () : Ext.Component
显示当前组件。监听' beforeshow' 事件，返回 false 取消显示组件...
显示当前组件。监听' beforeshow' 事件，返回 false 取消显示组件。在显示组件之后触发' show' 事件。
参数:
  • 无。
返回值:
  • Ext.Component
    this
Component
showAt ( Array xy ) : void
在指定的XY位置显示当前tip。示例用法:
// 在x:50 和 y:100位置处显示tip
tip.showAt([50,100]);
在指定的XY位置显示当前tip。示例用法:
// 在x:50 和 y:100位置处显示tip
tip.showAt([50,100]);
参数:
  • xy : Array
    一个包含x和y坐标的数组
返回值:
  • void
Tip
showBy ( Mixed el , [ String position ] ) : void
实验性参数。 根据标准的Ext.Element.alignTo 位置值，在与其它元素相关的位置显示当前...
实验性参数。 根据标准的Ext.Element.alignTo 位置值，在与其它元素相关的位置显示当前tip。示例用法:
// 在默认位置显示tip('tl-br?')
tip.showBy('my-el');

// 将tip的左上角对齐显示到元素的右上角
tip.showBy('my-el', 'tl-tr');
参数:
  • el : Mixed
    需要对齐到的一个HTMLElement、Ext.Element或者目标元素的字符串id
  • position : String
    (可选) 一个有效的Ext.Element.alignTo 锚定位置(如果不指定，默认为'tl-br?'或者 defaultAlign )。
返回值:
  • void
Tip
suspendEvents( Boolean queueSuspended ) : void
暂停触发所有的事件。 (参看resumeEvents)
暂停触发所有的事件。（参看 resumeEvents)
参数:
  • queueSuspended : Boolean
    如果传递为true则排列好暂停的事件使得在调用 resumeEvents 后再触发它们，而不是抛弃所有暂停的事件。
返回值:
  • void
Observable
syncSize () : Ext.BoxComponent
强制组件的大小按照此组件底层元素当前的高度和宽度计算。
强制组件的大小按照此组件底层元素当前的高度和宽度计算。
参数:
  • 无。
返回值:
  • Ext.BoxComponent
    this
BoxComponent
toggleCollapse ( Boolean animate ) : Ext.Panel
根据panel的当前状态，执行expand或者 collapse操作 的快捷方式。
根据panel的当前状态，执行expand或者 collapse操作 的快捷方式。
参数:
  • animate : Boolean
    True将会在转换过程中使用动画效果，否则为false (默认为panel的animCollapse 配置项的值)
返回值:
  • Ext.Panel
    this
Panel
un( String eventName, Function handler, [Object scope] ) : void
删除一个事件处理器(removeListener方法的简写形式)
删除一个事件处理器(removeListener方法的简写形式。)
参数:
  • eventName : String
    处理器关联的事件类型
  • handler : Function
    被删除的处理器 这应该是传入 addListener 中的方法的引用。
  • scope : Object
    （可选）为处理器指定的初始作用域。
返回值:
  • void
Observable
update ( Mixed htmlOrData , [ Boolean loadScripts ], [ Function callback ] ) : void
刷新组件的内部区域。
刷新组件的内部区域。
参数:
  • htmlOrData : Mixed
    如果已经通过tpl为当前组件配置了一个模板，那么 将会使用此参数来装配模板。 如果没有为当前组件配置模板，组件的内容区域将会通过Ext.Element 进行刷新。
  • loadScripts : Boolean
    (可选)只用在使用html配置时此参数才合法。默认为false。
  • callback : Function
    (可选)只用在使用html配置时此参数才合法。 当脚本加载完成时回调函数才被执行。
返回值:
  • void
Component
updateBox ( Object box ) : Ext.BoxComponent
设置此组件底层元素的盒子模型尺寸。(译者注：盒子模型是CSS术语，详细资料请自行搜索。)
设置此组件底层元素的盒子模型尺寸。(译者注：盒子模型是CSS术语，详细资料请自行搜索。)
参数:
  • box : Object
    一个格式为{x, y, width, height}的对象
返回值:
  • Ext.BoxComponent
    this
BoxComponent

公共事件

Event Defined By
activate : ( Ext.Panel p )
当Panel被设置为视觉活动状态之后触发。 注意Panel不直接支持活动状体，但是Panel的一些子类...
当Panel被设置为视觉活动状态之后触发。 注意Panel不直接支持活动状体，但是Panel的一些子类 (例如 Ext.Window)支持。 作为TabPanel子组件的Panel，在TabPanel的控制之下触发activate和deactivate事件。
监听器将会以如下参数格式被调用:
  • p : Ext.Panel
    被激活的Panel.
Panel
add : ( Ext.Container this , Ext.Component component , Number index )
监听器将会被使用如下的参数被调用:
  • this : Ext.Container
  • component : Ext.Component
    被添加的组件
  • index : Number
    将组件添加到容器子组件集合时的位置索引
Container
added : ( Ext.Component this , Ext.Container ownerCt , number index )
当一个组件被添加到一个Ext.Container时触发
当一个组件被添加到一个Ext.Container时触发
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • ownerCt : Ext.Container
    用于组件的容器
  • index : number
    添加组件的位置
Component
afterlayout : ( Ext.Container this , ContainerLayout layout )
当容器中的组件被指定的布局管理器排列的时候触发。
当容器中的组件被指定的布局管理器排列的时候触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Container
  • layout : ContainerLayout
    为当前容器提供的ContainerLayout实现
Container
afterrender : ( Ext.Component this )
在组件渲染完成之后触发...

在组件渲染完成之后触发。

afterrender事件在当前组件被rendered 结束之后、在为组件定义的所有afterRender方法执行之后 触发，并且，如果有stateful， 也在状态被保存之后才触发。

监听器将会以如下参数格式被调用:
  • this : Ext.Component
Component
beforeadd : ( Ext.Container this , Ext.Component component , Number index )
在任何 Ext.Component 被添加或者插入到容器中之前触发。 事件处理器可以返回false取消添加操作。
在任何 Ext.Component 被添加或者插入到容器中之前触发。 事件处理器可以返回false取消添加操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Container
  • component : Ext.Component
    被添加的组件
  • index : Number
    组件被添加到容器子项目集合中时的索引位置
Container
beforeclose : ( Ext.Panel p )
在Panel被关闭之前触发。 注意，Panel不直接支持关闭操作，但是Panel的一些子类(例如...
在Panel被关闭之前触发。 注意，Panel不直接支持关闭操作，但是Panel的一些子类(例如 Ext.Window) ，或者一个位于Ext.TabPanel中的Panel支持。 此事件仅被应用到这些子类中。处理函数可以返回false以取消关闭操作。
监听器将会以如下参数格式被调用:
  • p : Ext.Panel
    正在被关闭的Panel.
Panel
beforecollapse : ( Ext.Panel p , Boolean animate )
在Panel被折叠之前触发。监听器可以返回false取消折叠。
在Panel被折叠之前触发。监听器可以返回false取消折叠。
监听器将会以如下参数格式被调用:
  • p : Ext.Panel
    被折叠的Panel
  • animate : Boolean
    如果折叠操作使用了动画效果，此参数为true，其它为false
Panel
beforedestroy : ( Ext.Component this )
在组件 destroyed 之前触发。 在事件监听器中返回false以停止 destroy 操作。
在组件 destroyed 之前触发。 在事件监听器中返回false以停止 destroy 操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforeexpand : ( Ext.Panel p , Boolean animate )
在Panel被展开之前触发。监听器可以返回false取消展开操作。
在Panel被展开之前触发。监听器可以返回false取消展开操作。
监听器将会以如下参数格式被调用:
  • p : Ext.Panel
    被展开的Panel
  • animate : Boolean
    如果展开操作使用动画效果，为true，其它为false
Panel
beforehide : ( Ext.Component this )
在调用hide方法隐藏组件之前触发。 在事件监听器中返回false可以停止隐藏操作。
在调用hide方法隐藏组件之前触发。 在事件监听器中返回false可以停止隐藏操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforeremove : ( Ext.Container this , Ext.Component component )
从容器中删除任何Ext.Component 之前触发。 处理器可以返回false取消remove操作。
从容器中删除任何Ext.Component 之前触发。 处理器可以返回false取消remove操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Container
  • component : Ext.Component
    被删除的组件
Container
beforerender : ( Ext.Component this )
在组件被rendered 之前触发。 在事件监听器中返回false可以停止render 操作。
在组件被rendered 之前触发。 在事件监听器中返回false可以停止render 操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforeshow : ( Ext.Component this )
在调用show()方法现实组件之前触发。 事件处理函数返回false可以停止show。
在调用show 方法现实组件之前触发。 事件处理函数返回false可以停止show。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforestaterestore : ( Ext.Component this , Object state )
在组件状态恢复之前触发。返回false停止恢复状态操作。
在组件状态恢复之前触发。返回false停止恢复状态操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    StateProvider返回的状态哈希值。 如果没有禁止此事件，那么状态对象会被传递给applyState。 默认情况下，这样简单地把属性值拷贝到当前组件中。 可以覆盖此方法以提供自定的状态恢复操作。
Component
beforestatesave : ( Ext.Component this , Object state )
在组件状态被保存到配置的状态提供者之前触发。 返回false可以停止保存。
在组件状态被保存到配置的状态提供者之前触发。 返回false可以停止保存。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    状态值哈希。 这由在组件上调用getState() 方法决定。 此方法必须由开发者提供，返回是否需要对状态进行描述，默认情况下， Ext.Component有一个空实现。
Component
bodyresize : ( Ext.Panel p , Number width , Number height )
在Panel被调整尺寸之后触发。
在Panel被调整尺寸之后触发。
监听器将会以如下参数格式被调用:
  • p : Ext.Panel
    被调整尺寸的Panel
  • width : Number
    Panel body的新宽度。
  • height : Number
    Panel body的新高度。
Panel
close : ( Ext.Panel p )
在Panel被关闭之后触发。注意，Panel不直接提供关闭操作， 但是Panel的一些子类(例如...
在Panel被关闭之后触发。注意，Panel不直接提供关闭操作， 但是Panel的一些子类(例如 Ext.Window) ，或者处于Ext.TabPanel中的Panel支持。
监听器将会以如下参数格式被调用:
  • p : Ext.Panel
    被关闭的Panel.
Panel
collapse : ( Ext.Panel p )
在Panel被折叠后触发。
在Panel被折叠后触发。
监听器将会以如下参数格式被调用:
  • p : Ext.Panel
    被折叠的Panel
Panel
deactivate : ( Ext.Panel p )
在Panel被视觉上失去活动状态之后触发。 注意，Panel不直接支持此操作，但是Panel的一些子类...
在Panel被视觉上失去活动状态之后触发。 注意，Panel不直接支持此操作，但是Panel的一些子类 (例如Ext.Window)支持。 作为TabPanel的子组件的Panel将会在TabPanel的控制之下触发activate 和deactivate事件。
监听器将会以如下参数格式被调用:
  • p : Ext.Panel
    失去活动状态的Panel
Panel
destroy : ( Ext.Component this )
在组件被销毁之后触发。
在组件被destroyed之后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
disable : ( Ext.Component this )
在组件被设置为无效状态后触发。
在组件被设置为无效状态后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
enable : ( Ext.Component this )
当组件被设置为有效(enabled)之后触发。
当组件被设置为有效(enabled)之后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
expand : ( Ext.Panel p )
当Panel已经展开之后触发。
当Panel已经展开之后触发。
监听器将会以如下参数格式被调用:
  • p : Ext.Panel
    已经被展开的Panel.
Panel
hide : ( Ext.Component this )
在组件被隐藏之后触发。 当调用hide 方法隐藏组件之后触发。
在组件被隐藏之后触发。 当调用hide 方法隐藏组件之后触发。
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
iconchange : ( Ext.Panel p , String The , String The )
当Panel的图标被set或者 changed 之后触发。
当Panel的图标被set或者 changed 之后触发。
监听器将会以如下参数格式被调用:
  • p : Ext.Panel
    icon class被变化的Panel
  • The : String
    新icon类
  • The : String
    旧icon类
Panel
move : ( Ext.Component this , Number x , Number y )
在组件移动之后触发。
在组件移动之后触发。
监听器将会用如下的参数格式来调用:
  • this : Ext.Component
  • x : Number
    The new x position
  • y : Number
    The new y position
BoxComponent
remove : ( Ext.Container this , Ext.Component component )
监听器将会以如下的参数格式被调用:
  • this : Ext.Container
  • component : Ext.Component
    被删除的组件
Container
removed : ( Ext.Component this , Ext.Container ownerCt )
当一个组件被从Ext.Container容器中删除时触发
当一个组件被从Ext.Container容器中删除时触发
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • ownerCt : Ext.Container
    持有组件的容器
Component
render : ( Ext.Component this )
在组件被渲染之后触发。
在组件被 rendered(渲染) 之后触发。
监听器将以如下的参数格式被调用:
  • this : Ext.Component
Component
resize : ( Ext.Component this , Number adjWidth , Number adjHeight , Number rawWidth , Number rawHeight )
在组件被调整大小之后触发。
在组件被调整大小之后触发。
监听器将以如下的参数格式被调用:
  • this : Ext.Component
  • adjWidth : Number
    这是width调整后的值
  • adjHeight : Number
    这是height调整后的值
  • rawWidth : Number
    这是width原来的值
  • rawHeight : Number
    这是height原来的值
BoxComponent
show : ( Ext.Component this )
在调用show 方法显示组件之后触发。
在调用show 方法显示组件之后触发。
监听器将会用如下的参数格式被调用:
  • this : Ext.Component
Component
staterestore : ( Ext.Component this , Object state )
组件状态被存储之后触发。
组件状态被存储之后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    StateProvider返回的状态哈希值。 如果没有禁止此事件，那么状态对象会被传递给applyState。 默认情况下，这样简单地把属性值拷贝到当前组件中。 可以覆盖此方法以提供自定的状态恢复操作。
Component
statesave : ( Ext.Component this , Object state )
在组件状态被保存到所配置的状态提供者之后触发。
在组件状态被保存到所配置的状态提供者之后触发。
监听器将会用如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    状态值hash。 这是由在足见上调用getState() 方法决定的。 开发者必须提供此方法以返回是否需要恢复状态，默认情况下， Ext.Component有一个空实现。
Component
titlechange : ( Ext.Panel p , String The )
在Panel的标题被set或者 changed 之后触发。
在Panel的标题被set或者 changed 之后触发。
监听器将会以如下参数格式被调用:
  • p : Ext.Panel
    标题被改变的Panel.
  • The : String
    新的标题。
Panel


Observable
    Component
      BoxComponent
        Toolbar.Item
          Toolbar.Spacer
            Toolbar.Fill

Class Ext.Toolbar.Fill

包: | Ext
定义类的文件: | Toolbar.js
类: | Toolbar.Fill
继承自: | Toolbar.Spacer
一个简单的元素，在工具栏的两个项目之间添加一个贪婪的(100% 宽度)水平空白区。
new Ext.Panel({
    tbar : [
        'Item 1',
        {xtype: 'tbfill'}, // or '->'

        'Item 2'
    ]
});

配置项

Config Options Defined By
allowDomMove : Boolean
在渲染时组件是否可以移动Dom节点(默认为true)。
Component
anchor : String
注: 这个配置只用于该组件被包含在一个已使用AnchorLayout...

注: 这个配置只用于该组件被包含在一个已使用 AnchorLayout (或者其子类)配置的Container时。 基于布局管理器，例如：

  • Ext.form.FormPanel
  • 指定 layout: 'anchor' // or 'form', or 'absolute'

参见 Ext.layout.AnchorLayout. anchor 。

BoxComponent
applyTo : Mixed
指定一个元素的id、一个DOM元素或者一个已经存在并被渲染到DIV中的元素，此DIV已经被...

指定一个元素的id、一个DOM元素或者一个已经存在并被渲染到DIV中的元素，此DIV已经被 渲染到document中，并且为当前组件指定了一些结构化的标签。

  • 描述 :
      当使用了 applyTo， 在主元素中也可以用id或者CSS类名来指定组件的托管部分， 并且，如果可以的话，创建的组件可能也会试图在那个标签中创建它的子组件。
  • 注意 :
      当使用此配置项时，无需调用render()方法。
      如果指定了applyTo属性，任何传递给 renderTo 的值都会被忽略，并且目标元素的父节点将会自动被用作组件的容器。
Component
autoEl : Mixed
一个表签名或者一个 DomHelper 描述，用来创建 Element ，它将封装当前组件...

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

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

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

{
    xtype: 'box',
    autoEl: {
        tag: 'img',
        src: 'http://www.example.com/example.jpg'

    }
}, {
    xtype: 'box',
    autoEl: {
        tag: 'blockquote',
        html: 'autoEl is cool!'
    }
}, {
    xtype: 'container',
    autoEl: 'ul',
    cls: 'ux-unordered-list',
    items: {
        xtype: 'box',
        autoEl: 'li',
        html: 'First list item'
    }
}
Component
autoHeight : Boolean
如果值为true，height配置项为'auto'，否则值为false的话使用固定的高度...

如果值为true，height配置项为'auto'，否则值为false的话使用固定的高度， 或者可以由其父类容器 layout manager来控制。(默认值为 false)。

注: 虽然很多组件继承了这个配置选项，但不是所有这些组件的自适应高度配置都会像期望的那样起作用。 设置autoHeight：值为true时，浏览器将根据元素的内容自动设置高度，这将意味着Ext不会去管理高度。

如果是由浏览器来管理高度，需要注意的是，通过浏览器进行调整的结构组件内不能被发现， 因此宽度的变化可能导致需要进行同步处理元素的高度。 例如：

var w = new Ext.Window({
    title: 'Window',
    width: 600,
    autoHeight: true,
    items: {
        title: 'Collapse Me',
        height: 400,
        collapsible: true,
        border: false,
        listeners: {
            beforecollapse: function() {
                w.el.shadow.hide();
            },
            beforeexpand: function() {
                w.el.shadow.hide();
            },
            collapse: function() {
                w.syncShadow();
            },
            expand: function() {
                w.syncShadow();
            }
        }
    }
}).show();
BoxComponent
autoScroll : Boolean
如果值为true，将会在该元素上使用overflow:'auto'配置，并且在必要的时候...
如果值为true，将会在该元素上使用overflow:'auto'配置，并且在必要的时候自动显示滚动条，否则，溢出部分的组件都会被切除(默认值为 false)。
BoxComponent
autoShow : Boolean
如果组件需要检测隐藏CSS属性(如 'x-hidden' 或者 'x-hide-display')并且在渲染时删除...
如果组件需要检测隐藏CSS属性(如 'x-hidden' 或者 'x-hide-display')并且在渲染时删除它们 (默认为false)，设置此值为true。
Component
autoWidth : Boolean
如果为true，使用width:'auto'配置，否则使用固定的宽度...

如果为true，使用width:'auto'配置，否则使用固定的宽度，或者可以由其父类容器的layout manager来控制。(默认值为 false)。

注: 虽然很多组件继承了这个配置选项，但不是所有这些组件的自适应宽度配置都会像期望的那样起作用。 设置autoWidth：值为true时，浏览器将根据元素的内容自动设置宽度，这将意味着Ext不会去管理宽度。

如果是由浏览器来管理宽度，需要注意的是，通过浏览器进行调整的结构组件内不能被发现，因此宽度的变化可能导致需要进行同步处理元素的宽度。 例如，在这个元素的目标是：

<div id='grid-container' style='margin-left:25%;width:50%'></div>
当浏览器窗口改变时，渲染后的Panel必须监听浏览器窗口大小的变化，以便通知子项，浏览器改变了其宽度：

var myPanel = new Ext.Panel({
    renderTo: 'grid-container',
    monitorResize: true, // relay on browser resize
    title: 'Panel',
    height: 400,
    autoWidth: true,
    layout: 'hbox',
    layoutConfig: {
        align: 'stretch'
    },
    defaults: {
        flex: 1
    },
    items: [{
        title: 'Box 1',
    }, {
        title: 'Box 2'
    }, {
        title: 'Box 3'
    }],
});
BoxComponent
boxMaxHeight : Number
设置组件的最大高度值...

设置组件的最大高度值。

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

BoxComponent
boxMaxWidth : Number
设置组件的最大宽度值...

设置组件的最大宽度值。

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

BoxComponent
boxMinHeight : Number
设置组件的最小高度值...

设置组件的最小高度值。

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

BoxComponent
boxMinWidth : Number
设置组件的最小宽度值...

设置组件的最小宽度值。

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

BoxComponent
bubbleEvents : Array
一个事件数组，当这些事件被触发时，将会被冒泡到所有父容器中。参见....

一个事件数组，当这些事件被触发时，将会被冒泡到所有父容器中。参见 Ext.util.Observable.enableBubble。 默认为 []。

Component
clearCls : String
应用到特殊的clearing div的CSS类， 这个clearing div直接渲染到每个form field的包装器后面...

应用到特殊的clearing div的CSS类， 这个clearing div直接渲染到每个form field的包装器后面，以提供 清除field的功能(默认为 'x-form-clear-left')。

注意: 只有在当前组件被渲染到一个使用FormLayout 布局(例如 Ext.form.FormPanel 或者指定 layout:'form')的 容器中、或者是指定了一个fieldLabel 、或者指定isFormField=true 时此配置才有效。

另请参见 Ext.layout.FormLayout. fieldTpl。

Component
cls : String
一个可选的额外CSS类，它将被添加到当前组件的元素上(默认为'')...
一个可选的额外CSS类，它将被添加到当前组件的元素上(默认为'')。 此属性对于在组件上，或者它的任何使用标准CSS规则的孩子节点上， 添加定制的样式非常有用。
Component
contentEl : String
(可选)指定一个已存在的HTML元素，或者一个已存在HTML元素的...

(可选)指定一个已存在的HTML元素，或者一个已存在HTML元素的 id ，它们将被用作当前组件的内容。

  • 描述 :
    此配置选项被用来将一个已存在的HTML元素 插入到一个新组件(在组件渲染之后它简单地移动DOM元素) 的layout元素中，使它成为该组件的内容。
  • 注意 :
    指定的HTML元素将被append到组件的layout元素中， 在所有配置的 HTML 被插入之后， 并且，这样的话，在render事件 被触发时，document中将不再包含此元素。
    指定的HTML元素将不会参与组件所有可能使用的 layout 过程(译者注：指这些HTML元素 不会参与布局操作)。 它仅是HTML而已。布局操作实在孩子 items 上进行的。
    添加 x-hidden 或者 x-hide-display CSS类，以防在内容渲染到panel时发生闪烁。
Component
ctCls : String
一个可选的外部CSS样式，添加到这个组件的容器(默认值为 '')。 这个方法对于使用标准的CSS规则...

一个可选的外部CSS样式，添加到这个组件的容器(默认值为 '')。 这个方法对于使用标准的CSS规则，为组件或它的任何一个子组件添加特定的样式非常有用。 参见 Ext.layout.ContainerLayout和 extraCls 。

注意: ctCls 默认为 ''期望如下的类，它们将指定一个默认值:

  • Box Layout : 'x-box-layout-ct'
使用一个额外的CSS类配置以上的Class，它是append到默认对象上的。例如， 对于BoxLayout (Hbox and Vbox):
                                ctCls: 'x-box-layout-ct custom-class'

Component
data : Mixed
初始化数据集，它将被应用到 tpl 上以刷新组件的内容区域。
Component
disabled : Boolean
当前组件处于无效状态时为true。 Read-only.
Component
disabledClass : String
当组件处于无效状态时添加到组件上的CSS类(默认为 'x-item-disabled')。
Component
fieldLabel : String
紧靠此field显示的标签文本(默认值为 '')。注意...

紧靠此field显示的标签文本(默认值为 '')。

注意:只有在当前组件被渲染到一个使用FormLayout 的容器中时，此配置才有效。 (例如 Ext.form.FormPanel 或 指定 layout:'form')。

另请参见 hideLabel 、 Ext.layout.FormLayout和 fieldTpl。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Name'
    }]
});
Component
flex : Number
注: 这个配置只用于该组件被包含在一个已使用BoxLayout配置的Container中时...

注: 这个配置只用于该组件被包含在一个已使用BoxLayout配置的Container中时。通过计算每一个子组件的flex值所占全部flex值之和的比例，来决定子组件的宽(HBoxLayout)高(VBoxlayout)。 任何子项的 flex = 0 或 flex = undefined 将不被设置(初始值大小将不被改变)。

BoxComponent
height : Number
组件的高度(默认值为 auto)。注:如果想使用百分比的方式...
组件的高度(默认值为 auto)。注:如果想使用百分比的方式来设置值，请查看 Ext.Component.anchor。
BoxComponent
hidden : Boolean
如果当前组件处于隐藏状态，此值为true。Read-only。
Component
hideLabel : Boolean
true时完全隐藏label元素 ( label 和 separator)。 默认为 false。 默认情况下，即使你不指定...

true时完全隐藏label元素 ( label 和 separator)。 默认为 false。 默认情况下，即使你不指定 fieldLabel 它的空间仍然会被保留，这样这块区域会与其它确实拥有label的区域位于同一排。 讲此值设置为 true 将导致此区域不再保留此空间。

注意: 参见 clearCls 的注释。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield'
        hideLabel: true
    }]
});
Component
hideMode : String
组件如何隐藏，支持的值有： 'visibility' (css visibility), 'offsets' (位置偏移量为负值) 和...

组件如何隐藏，支持的值有： 'visibility' (css visibility), 'offsets' (位置偏移量为负值) 和 'display' (css display).

注意:一般首选默认值 'display'，因为当组件第一次显示的时候它们会自动进行布局 (隐藏的时候不会调整尺寸)。

Component
hideParent : Boolean
此值为true时，当调用hide/show方法时，将会hide和show组件的容器...
此值为true时，当调用hide/show方法时，将会hide和show组件的容器；false时将会 hide和show组件自身(默认为false)。例如，这可以用作window上隐藏按钮的一种 快捷操作，通过设置此按钮的hideParent:true，然后把它添加到window上。
Component
html : String/Object
一个HTML片段，或者一个 DomHelper 描述，用作layout元素的内容(默认为'')。...
一个HTML片段，或者一个 DomHelper 描述，用作layout元素的内容(默认为'')。 这个HTML内容在组件渲染之后才被添加，所以在 render 出发的时候，document中尚未包含此HTML。 但是这个内容将会在所有配置的 contentEl 之前被插入到body标签中。
Component
id : String
当前组件唯一的id(默认为auto-assigned id)...

当前组件唯一的id(默认为auto-assigned id)。 如果你需要在以后访问组件，而又没有一个有效的组件对象引用，那么你需要指定一个 id( 也就是，使用Ext. getCmp方法 )。

注意，此id也将被用作组件底层HTML标签的id，这些标签被渲染到页面中。 这将允许你编写基于id的CSS规则，以独立地描述指定的实例；并且，也可以通过 组件父标签的id选中子元素。

注意:为了避免与唯一的id 产生重复， 请参见 itemId 和 ref 。

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

Component
itemCls : String
注意: 只有在当前组件被渲染到一个使用FormLayout 布局的 容器中时此配置才有效...

注意: 只有在当前组件被渲染到一个使用FormLayout 布局的 容器中时此配置才有效。 (例如Ext.form.FormPanel 或者指定 layout:'form')。

一个附加的CSS类，应用到div上，包装当前field的表单元素。 如果提供了此参数， field级上的itemCls将会覆盖 container级上提供的 默认itemCls。 为itemCls指定的值将会被添加默认的 类('x-form-item')。

既然它被应用到项目的包装器上(参见 Ext.layout.FormLayout。 fieldTpl)， 它将允许你编写能应用到此field、label(如果有指定)、或者field内部任何其它元素的标准CSS规则。

注意: 参考 fieldLabel的注释。 .

示例用法:

// Apply a style to the field's label:
<style>
    .required .x-form-item-label {font-weight:bold;color:red;}
</style>

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Name',
        itemCls: 'required' //this label will be styled
    },{
        xtype: 'textfield',
        fieldLabel: 'Favorite Color'
    }]
});
Component
itemId : String
当没有可利用的对象引用时，itemId可以作为第二选择，用来获得一个组件的引用， 代替 ...

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

var c = new Ext.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'); // 与 Ext.getCmp()不同

p2 = p1.ownerCt.getComponent('p2'); // 通过兄弟对象获得引用

另请参见 id 和 ref 。

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

Component
labelSeparator : String
每个fieldLabel 文本后面现实的分隔符。 此属性可以在多个层次上进行配置...

每个fieldLabel 文本后面现实的分隔符。 此属性可以在多个层次上进行配置。优先顺序为：

  • field / component level
  • container level
  • layout level (默认为冒号 ':')
如不需要为当前field的label显示分隔符，指定一个空字符串''即可。

注意:参见 clearCls 的注释。

另请参见 hideLabel 和 Ext.layout.FormLayout。 fieldTpl。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    layoutConfig: {
        labelSeparator: '~'   // layout config has lowest priority (defaults to ':')
    },
    labelSeparator: '>>',     // config at container level
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Field 1',
        labelSeparator: '...' // field/component level config supersedes others
    },{
        xtype: 'textfield',
        fieldLabel: 'Field 2' // labelSeparator will be '='

    }]
});
Component
labelStyle : String
一个CSS样式描述字符串，它将直接应用到当前field的label上...

一个CSS样式描述字符串，它将直接应用到当前field的label上。 如果有设置，默认为容器的labelStyle值(例如 Ext.layout.FormLayout.labelStyle , 或者 '')。

注意:参见 clearCls 的注释。

另请参见 hideLabel 和 Ext.layout.FormLayout. fieldTpl。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Name',
        labelStyle: 'font-weight:bold;'
    }]
});
Component
listeners : Object
一个包含一个或多个事件处理器的配置对象，会在初始化的时候被添加到目标对象上...

一个包含一个或多个事件处理器的配置对象，会在初始化的时候被添加到目标对象上。 该配置对象应该是一个有效的监听器配置对象就像 addListener例子中指定的一样可一次附加多个处理器。

ExtJs Components上的DOM事件

一些 ExtJs Component 类导出时会选择一些DOM事件(例如 "click", "mouseover" 等等), 这通常只是在有额外的值可以被添加时发生。例如DataView类的 click事件会传递被点击的节点。也可以直接在Component的HTMLElementevent上访问DOM事件，但必需在Component被渲染后监听器才能添加到Element 上。可以按照以下步骤添加插件:

// 插件会用一个监听器配置对象进行配置。
//该组件会被添加到所有处理方法的参数列表上。
Ext.DomObserver = Ext.extend(Object, {
    constructor: function(config) {
        this.listeners = config.listeners ? config.listeners : config;
    },

    // 组件将自己传递进了插件的初始化方法里
    init: function(c) {
        var p, l = this.listeners;
        for (p in l) {
            if (Ext.isFunction(l[p])) {
                l[p] = this.createHandler(l[p], c);
            } else {
                l[p].fn = this.createHandler(l[p].fn, c);
            }
        }

        // 渲染后立即添加监听器到元素上
        c.render = c.render.createSequence(function() {
            var e = c.getEl();
            if (e) {
                e.on(l);
            }
        });
    },

    createHandler: function(fn, c) {
        return function(e) {
            fn.call(this, e, c);
        };
    }
});

var combo = new Ext.form.ComboBox({

    // 元素被点击后折叠
    plugins: [ new Ext.DomObserver({
        click: function(evt, comp) {
            comp.collapse();
        }
    })],
    store: myStore,
    typeAhead: true,
    mode: 'local',
    triggerAction: 'all'
});

Observable
margins : Object
注:此配置只用于该组件展现在一个使用BorderLayout...

注:此配置只用于该组件展现在一个使用BorderLayout 或 BoxLayout的两个子类之一作为布局的容器。

这个margins对象在该组件中的格式为：

{top: (top margin),right: (right margin),bottom: (bottom margin),left: (left margin)}

也可以是一个字符串，中间用空格分隔，margin值为数字。 把matches中每一个值的次序跟CSS中margin值的排列方式相对应：

  • 如果只有一个值，它适用于所有方面。
  • 如果有两个值，top和bottom的边框设置为第一个值，left和right设置为第二个值。
  • 如果有三个值，top设置为第一个值，left和right设置为第二个值，bottom设置为第三个值。
  • 如果有四个值，分别设置为top, right, bottom, left。

默认值:

{top:0, right:0, bottom:0, left:0}
BoxComponent
overCls : String
一个可选的额外的CSS类，它将在鼠标移过元素时被添加到组件上...
一个可选的额外的CSS类，它将在鼠标移过元素时被添加到组件上，鼠标移出时 删除。(默认为'')。此属性对于在组件上，或者它的任何使用标准CSS规则的孩子节点上， 添加定制的'active' 或者 'hover'样式非常有用。
Component
overflowText : String
当该项目发生溢出时，用于菜单的文本。
Toolbar.Item
pageX : Number
如果该组件被包含在一个指定位置的容器中，这个值表示页面级的x坐标值（译者注：在有滚动条的情况下这个值很有用）。
BoxComponent
pageY : Number
如果该组件被包含在一个指定位置的容器中，这个值表示页面级的y坐标值（译者注：在有滚动条的情况下这个值很有用）。
BoxComponent
plugins : Object/Array
一个对象或者一个对象数组，为组件提供特殊的功能 ...
一个对象或者一个对象数组，为组件提供特殊的功能。 对一个合法的插件唯一的要求是它含有一个init()方法， 能接收一个Ext.Component型的参数。 当组件被创建时，如果有可用的插件，组件将会调用每个插件的init方法， 并将自身的引用作为方法参数传递给它。然后，每个插件就可以调用方法或者响应组件上的事件， 就像需要的那样提供自己的功能。
Component
ptype : String
需要创建配置的ptype。 当传递一个配置对象给构造函数时...
需要创建配置的ptype。 当传递一个配置对象给构造函数时，此配置选项不会被使用。 只有在使用懒初始化的时候此配置项才会被使用， 此时Plugin不是 通过一个完整的实例组件，而是通过一个Component配置指定的。 在渲染时，将会查找ptype以决定创建何种类型的Plugin。

如果你创建自己的Plugin，你可以通过 Ext.ComponentMgr.registerPlugin 对它们进行注册，以便能利用懒初始化和渲染机制。
Component
ref : String
一个路径描述，与组件的 ownerCt 相关，它描述了把当前组件的命名引用放置到哪个父容器中去。...

一个路径描述，与组件的 ownerCt 相关，它描述了把当前组件的命名引用放置到哪个父容器中去。

祖先的坐标路径可以通过'/'字符进行分隔。 例如，将一个Toolbar Button的引用放入 拥有此Toolbar的Panel中:

var myGrid = new Ext.grid.EditorGridPanel({
    title: 'My EditorGridPanel',
    store: myStore,
    colModel: myColModel,
    tbar: [{
        text: 'Save',
        handler: saveChanges,
        disabled: true,
        ref: '../saveButton'
    }],
    listeners: {
        afteredit: function() {
//          The button reference is in the GridPanel
            myGrid.saveButton.enable();
        }
    }
});

在上面的代码中，如果 ref 是 'saveButton' ，那么引用将会被放置到Toolbar中。 ref 中的每个'/' 都会从组件的 ownerCt 向上移动一级。

另请参见 added 和 removed 事件。

Component
region : String
注: 此配置只用于该组件展现在一个布局为BorderLayout的容器中...

注: 此配置只用于该组件展现在一个布局为BorderLayout的容器中(例如指定layout:'border')。

详见Ext.layout.BorderLayout。

BoxComponent
renderTo : Mixed
该值可以是一个节点的id、一个DOM节点或者一个已存在的元素...

该值可以是一个节点的id、一个DOM节点或者一个已存在的元素， 组件将会被渲染到其中。

  • 注意 :
      如果组件不是一个Container 的子项目时， 不要使用此选项。 渲染和管理它的子项目是一个Container 的layout manager的责任。
      当使用此配置项时，无需调用render()方法。

另请参见 render 。

Component
stateEvents : Array
一个事件数组，当它们被触发时，组件需要保存自己的状态(默认值为 none)...

一个事件数组，当它们被触发时，组件需要保存自己的状态(默认值为 none)。 它们可以是任何该组件支持的事件类型，包括浏览器事件和 自定义事件(例如['click', 'customerchange'])。

对于保存和恢复组件状态的详细解释，参见 stateful

Component
stateId : String
为该组件指定的唯一的id值，它被用作管理组件状态的目的...
为该组件指定的唯一的id值，它被用作管理组件状态的目的。 (如果设定了id，默认值为组件自己的id，否则，如果组件使用自动生成的id，此值为null)。

对于保存和反解析组件状态的解释，参见 stateful 。

Component
stateful : Boolean
一个标志参数，它将引起组件在启动时尝试从一个保存的状态中恢复内部状态参数...

一个标志参数，它将引起组件在启动时尝试从一个保存的状态中恢复内部状态参数。 组件必须要么拥有一个 stateId 或者 id ，它们被分配给需要被管理的状态属性。 在跨页面加载时，不保证自动生成的id属性的稳定性， 并且，不能依赖此id来保存和恢复一个组件的相同状态。

为了保存状态的操作能够工作，状态管理器的提供者必须 被设置成一个Ext.state.Provider 的实现类，它覆盖了set 和get 方法，以便保存和恢复name/value对。 有一个内置的Ext.state.CookieProvider 可用。

为当前页面设置状态提供者:

Ext.state.Manager.setProvider(new Ext.state.CookieProvider({
    expires: new Date(new Date().getTime()+(1000*60*60*24*7)), //7 days from now
}));

当 stateEvents 配置项中其中之一的事件被触发时， 一个状态可保存的组件将试图保存其状态。

保存状态时，一个可保存状态的组件首先需要通过调用 getState 方法来序列化它的状态。 默认情况下，此函数什么事都不做。 开发者必须提供一个实现，返回一个hash对象，它描述了组件可恢复的状态。

getState方法产生的值将会传递给 Ext.state.Manager.set 方法，它使用配置的 Ext.state.Provider 来保存对象，以组件的 stateId 为key，或者，如果此值（指stateId）没有指定时， 使用它的 id 作为key。

在进行构造时，一个可保存状态的组件试图通过调用 Ext.state.Manager.get方法来 恢复它的状态，传递 stateId 或者，如果此值（指stateId）没有指定时， 使用它的 id 作为参数。

结果对象被传递给 applyState 。 applyState 的默认实现只是简单地把属性拷贝到对象中， 但是开发者可以覆盖此方法以支持更多行为。

通过向 beforestaterestore, staterestore, beforestatesave 和 statesave 事件上绑定监听器，你可以在保存和恢复状态时进行额外的处理。

Component
style : String
被添加到组件元素的特定样式。 必须是按照...
被添加到组件元素的特定样式。 必须是按照 Ext.Element.applyStyles 类指定格式的合法参数值。

new Ext.Panel({
    title: 'Some Title',
    renderTo: Ext.getBody(),
    width: 400, height: 300,
    layout: 'form',
    items: [{
        xtype: 'textarea',
        style: {
            width: '95%',
            marginBottom: '10px'
        }
    },
        new Ext.Button({
            text: 'Send',
            minWidth: '100',
            style: {
                marginBottom: '10px'
            }
        })
    ]
});
Component
tabTip : String
注: 这个配置只用于当该组件作为TabPanel的一个子项目时使用...

注: 这个配置只用于当该组件作为TabPanel的一个子项目时使用。

一个String类型的innerHTML(支持html标签)，当鼠标放在该选项上的时，显示一个tooltip。为了tips能够被渲染，Ext.QuickTips.init()必须被提前调用。
BoxComponent
tpl : Mixed
一个 Ext.Template , Ext.XTemplate 或者一个用来形成一个Ext.XTemplate的字符串数组...
一个 Ext.Template , Ext.XTemplate 或者一个用来形成一个Ext.XTemplate的字符串数组。 与 data 和 tplWriteMode 配置项协同使用。
Component
tplWriteMode : String
刷新组件的内容区域时使用的Ext.(X)Template方式。 默认为'overwrite' (参见 Ext.XTemplate.overwrite )。
刷新组件的内容区域时使用的Ext.(X)Template方式。 默认为'overwrite' (参见 Ext.XTemplate.overwrite )。
Component
width : Number
组件的宽度(默认值为 auto)。注:如果想使用百分比的方式...
组件的宽度(默认值为 auto)。注:如果想使用百分比的方式来设置值，请查看 Ext.Component.anchor。
Toolbar.Spacer
x : Number
如果被包含在一个指定位置的容器中，这个值表示x(left)坐标值。
BoxComponent
xtype : String
需要创建配置的xtype。 当传递一个配置对象给构造函数时...
需要创建配置的xtype。 当传递一个配置对象给构造函数时，此配置选项不会被使用。 只有在使用懒初始化的时候此配置项才会被使用，此时容器的子项目不是 通过一个完整的实例组件，而是通过一个Component配置指定的。 在渲染时，将会查找xtype以决定创建何种类型的子组件。

预定义的xtype列表如下： here。

如果你继承Component创建你自己的组件，你需要使用Ext.ComponentMgr.registerType 对它们进行注册，以便利用懒初始化和渲染机制。
Component
y : Number
如果被包含在一个指定位置的容器中，这个值表示y(top)坐标值。
BoxComponent

公共属性

Property Defined By
disabled : Boolean
当前组件处于无效状态时为true。 Read-only.
Component
el : Ext.Element
封装了当前组件的Ext.Element。 Read-only。通常情况下，这将是一个<DIV>元素，它由此类的...

封装了当前组件的Ext.Element。 Read-only。

通常情况下，这将是一个<DIV>元素，它由此类的 onRender方法创建，但是它可以通过使用 autoEl 配置项进行覆盖。

注意: 直到组件渲染完成此元素都将处于无效状态。

如需向当前组件的 DOM事件(而不是当前组件自己的Observable事件)添加监听器， 更多建议，参见 listeners 配置项，或者直接使用一个render监听器:

new Ext.Panel({
    title: 'The Clickable Panel',
    listeners: {
        render: function(p) {
            // Append the Panel to the click handler's argument list.
            p.getEl().on('click', handlePanelClick.createDelegate(null, [p], true));
        },
        single: true  // Remove the listener after first invocation
    }
});

另请参见 getEl

Component
hidden : Boolean
如果当前组件处于隐藏状态，此值为true。Read-only。
Component
initialConfig : Object
当前组件的初始化配置描述。 Read-only。
Component
ownerCt : Ext.Container
组件所属的Container (默认为undefined，当前组件被添加到一个容器中时此值被自动设置)...
组件所属的Container (默认为undefined，当前组件被添加到一个容器中时此值被自动设置)。 Read-only。

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

Component
refOwner : Ext.Container
如果当前组件是一个容器的孩子，并且是通过一个 ref 配置项被注册的，则此值为 ref 引用被插入到的祖先容器。
如果当前组件是一个容器的孩子，并且是通过一个 ref 配置项被注册的，则此值为 ref 引用被插入到的祖先容器。
Component
rendered : Boolean
如果当前组件已经被渲染了，此值为true。Read-only.
Component

公共方法

Method Defined By
Toolbar.Fill ()
创建一个新的填充
创建一个新的填充
参数:
  • 无。
返回值:
  • void
Toolbar.Fill
addClass ( string cls ) : Ext.Component
为组件底层的元素添加CSS样式。
为组件底层的元素添加CSS样式。
参数:
  • cls : string
    需要添加的CSS样式的class名称
返回值:
  • Ext.Component
    this
Component
addEvents( Object|String o, string Optional. ) : void
添加指定的事件到事件列表上，事件会被该Observable触发。
添加指定的事件到事件列表上，事件会被该Observable触发。
参数:
  • o : Object|String
    以事件名作为属性true作为值的对象 或者当多个事件名被分开的传递时则为第一个事件名。
  • Optional. : string
    事件名被分开的传递时则为事件名。 用法:
    this.addEvents('storeloaded', 'storecleared');
返回值:
  • void
Observable
addListener( String eventName, Function handler, [Object scope], [Object options] ) : void
给对象添加事件处理器。
给对象添加事件处理器。
参数:
  • eventName : String
    监听的事件名。
  • handler : Function
    事件调用的方法
  • scope : Object
    （可选）处理方法执行的作用域 (this的引用 reference)。 如果被忽略。默认为触发事件的对象。
  • options : Object
    （可选）包含处理器配置和属性的对象。 可能包含以下的属性:
    • scope : Object
      处理方法执行的作用域(this的引用) 。 如果被忽略。默认为触发事件的对象。
    • delay : Number
      在触发事件后延迟调用处理器的毫秒数。
    • single : Boolean
      如果为True则添加一个处理器来处理下一次的事件触发（仅一次），然后移除自己。
    • buffer : Number
      使得处理器延迟指定毫秒数后预定的运行在 一个Ext.util.DelayedTask中 。 如果事件在时间内再一次被触发，原始的处理器不会被调用，但是新的处理器会预定的在他的位置上。
    • target : Observable
      如果事件在目标的Observable上触发则仅仅调用处理器， 否则 事件会从子类的Observable上冒泡

    组合选项
    使用这些选项参数,可能会组合出不同类型的监听器：

    一个延迟的，一次性的监听器。

    myDataView.on('click', this.onClick, this, {
single: true,
delay: 100
});

    一次调用附加多个处理器
    该方法同样支持传递一个包含指定的多个处理器的属性的配置对象参数。

    myGridPanel.on({
'click' : {
    fn: this.onClick,
    scope: this,
    delay: 100
},
'mouseover' : {
    fn: this.onMouseOver,
    scope: this
},
'mouseout' : {
    fn: this.onMouseOut,
    scope: this
}
});

    或者一个简写的语法：

    myGridPanel.on({
'click' : this.onClick,
'mouseover' : this.onMouseOver,
'mouseout' : this.onMouseOut,
 scope: this
});
返回值:
  • void
Observable
applyToMarkup ( String/HTMLElement el ) : void
将此组件添加到已存在的有效的HTML标签中。 使用该方法时，无需再调用render()方法。
将此组件添加到已存在的有效的HTML标签中。 使用该方法时，无需再调用render()方法。
参数:
  • el : String/HTMLElement
返回值:
  • void
Component
cloneConfig ( Object overrides ) : Ext.Component
默认使用原先传递给当前实例的配置值克隆当前组件。
默认使用原先传递给当前实例的配置值克隆当前组件。
参数:
  • overrides : Object
    一个新的配置项，包含需要覆盖到克隆版本的所有属性。 可以传递一个id参数给此对象，否则将自动生成一个新的id以避免发生重复。
返回值:
  • Ext.Component
    当前组件的克隆副本
Component
destroy () : void
通过如下方法销毁对象：删除所有的事件监听器、将组件的元素从DOM树中删除...
通过如下方法销毁对象：删除所有的事件监听器、将组件的元素从DOM树中删除（如果可以）、 将组件从它的 Ext.Container（如果可用）中删除、 并且将它从Ext.ComponentMgr中 注销。 销毁操作一般由框架自动完成，一般情况下不需要直接调用该方法。
参数:
  • 无。
返回值:
  • void
Component
disable () : Ext.Component
将组件置为无效状态，并出发'disable'事件。
将组件置为无效状态，并出发'disable'事件。
参数:
  • 无。
返回值:
  • Ext.Component
    this
Component
enable () : Ext.Component
将组件置为有效状态并触发'enable'事件。
将组件置为有效状态并触发'enable'事件。
参数:
  • 无。
返回值:
  • Ext.Component
    this
Component
enableBubble( String/Array events ) :void
是否现在使得事件会被该Observable触发并调用 this.getBubbleTarget()方法在拥有者的继承树...

是否现在使得事件会被该Observable触发并调用 this.getBubbleTarget()方法在拥有者的继承树中冒泡。Observable的基础类中没有该方法的实现。

该方法一般被Ext.Components用来冒泡事件到拥有者的容器。参看Ext.Component.getBubbleTarget默认的实现 在Ext.Component中返回组件的直接拥有者。但是如果需要的是一个已知的目标，该方法可以被重写来更快的访问需求的目标。

例子:

Ext.override(Ext.form.Field, {
    // 添加方法到Field的initComponent上改变事件为冒泡
    initComponent : Ext.form.Field.prototype.initComponent.createSequence(function() {
        this.enableBubble('change');
    }),

    // 我们知道我们想让Field的事件冒泡到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() {
            // 如果样式被修改标题会变红。
            myForm.header.setStyle('color', 'red');
        }
    }
});
参数:
  • events : String/Array
    冒泡的事件名，或事件名数组
返回值:
  • void
Observable
findParentBy ( Function fn ) : Ext.Container
通过自定义的函数查找当前组件上层任何层次上的容器...
通过自定义的函数查找当前组件上层任何层次上的容器。 如果传递的函数返回true，容器对象将被返回。
参数:
  • fn : Function
    自定义的函数，使用如下参数调用(container,this component)。
返回值:
  • Ext.Container
    自定义函数返回true的第一个容器
Component
findParentByType ( String/Class xtype ) : Ext.Container
通过xtype或者class查找当前组件上层任何层次上的容器
通过xtype或者class查找当前组件上层任何层次上的容器
参数:
  • xtype : String/Class
    组件的xtype字符串，或者直接是组件的class
返回值:
  • Ext.Container
    符合指定xtype或者class的第一个容器
Component
fireEvent( String eventName, Object... args ) : Boolean
用传入的参数触发指定的事件 (减去事件名)。 一个事件可以被设置为冒泡 Obse...

用传入的参数触发指定的事件 (减去事件名)。

一个事件可以被设置为冒泡到Observable父类继承树(参看 Ext.Component.getBubbleTarget) 调用enableBubble实现。

参数:
  • eventName : String
    触发的事件名。
  • args : Object...
    传递给处理器的可变长度参数。
返回值:
  • Boolean
    如果有任何的处理器返回false则返回false，否则返回true。
Observable
focus ( [ Boolean selectText ], [ Boolean/Number delay ] ) : Ext.Component
尝试将当前组件设为焦点。
尝试将当前组件设为焦点。
参数:
  • selectText : Boolean
    (可选) 如果可用，同时选中组件内部的文本
  • delay : Boolean/Number
    (可选)将当前组件设置为焦点的延迟时间(设置为true等于0毫秒)
返回值:
  • Ext.Component
    this
Component
getBox ( [ Boolean local ] ) : Object
获取组件底层元素当前盒子模型的尺寸。（译者注：盒子模型是CSS术语，详细解释请自行搜索。）
获取组件底层元素当前盒子模型的尺寸。（译者注：盒子模型是CSS术语，详细解释请自行搜索。）
参数:
  • local : Boolean
    (可选)值为true时，组件的left值和top值将代替页面的XY被返回。(默认值为false)
返回值:
  • Object
    返回值的格式{x, y, width, height}
BoxComponent
getBubbleTarget () : Ext.Container
为Observable的fireEvent方法提供链接，它沿着继承结构进行冒泡操作。
为Observable的fireEvent方法提供链接，它沿着继承结构进行冒泡操作。
参数:
  • 无。
返回值:
  • Ext.Container
    拥有当前组件的容器。
Component
getEl () : Ext.Element
返回 Ext.Element ，它包装了当前组件。...

返回 Ext.Element ，它包装了当前组件。

通常情况下，这将是一个<DIV>元素，它是由该类的onRender方法创建的， 但是可以使用autoEl配置项 覆盖它。

注意: 此元素将会一直处于无效状态直到当前组件渲染完成。

如需向当前组件的 DOM事件(而不是当前组件自己的Observable事件)添加监听器， 更多建议，参见 listeners 配置项，或者直接使用一个render监听器:

new Ext.Panel({
    title: 'The Clickable Panel',
    listeners: {
        render: function(p) {
            // Append the Panel to the click handler's argument list.
            p.getEl().on('click', handlePanelClick.createDelegate(null, [p], true));
        },
        single: true  // Remove the listener after first invocation
    }
});
参数:
  • 无。
返回值:
  • Ext.Element
    包装当前组件的元素。
Component
getHeight () : Number
获取该组件的当前高度值。
获取该组件的当前高度值。
参数:
  • 无。
返回值:
  • Number
BoxComponent
getId () : String
返回当前组件的id，如果没有定义id，则自动生成并返回一个id:'ext-comp-'...
返回当前组件的 id 如果没有定义 id 则自动生成并返回一个 id

'ext-comp-' + (++Ext.Component.AUTO_ID)
参数:
  • 无。
返回值:
  • String
    id
Component
getItemId () : String
返回当前组件的 itemId 。 如果没有通过配置参数指定 itemId 那么，将会使用...
返回当前组件的 itemId 。 如果没有通过配置参数指定 itemId 那么，将会使用 getId 返回 id 。
参数:
  • 无。
返回值:
  • String
Component
getOuterSize () : Object
获取当前组件所在元素的尺寸大小，包括边缘的空白处。
获取当前组件所在元素的尺寸大小，包括边缘的空白处。
参数:
  • 无。
返回值:
  • Object
    一个包含元素大小的对象 {width: (element width + left/right margins), height: (element height + top/bottom margins)}
BoxComponent
getPosition ( [ Boolean local ] ) : Array
获取组件底层元素当前的XY位置。
获取组件底层元素当前的XY位置。
参数:
  • local : Boolean
    (可选)如果为true，将返回元素的left和top值，而不是相对于页面内的 XY。(默认值为 false)
返回值:
  • Array
    元素的XY位置值(例如：[100, 200])
BoxComponent
getResizeEl () : Ext.Element
返回该组件的最外层用来定义这些组件整体大小的Element...

返回该组件的最外层用来定义这些组件整体大小的Element对象。

通常用 getEl 方法将会返回相同的Element对象，但在有些情况下，组件可能有一些更多的封装了它的主要动态Element对象的Element对象。

例如ComboBox。它是封装在一个包含<input>元素的包装元素里(这将返回其 getEl方法和触发按钮的元素)。返回的元素为resizeEl。

参数:
  • 无。
返回值:
  • Ext.Element
    The Element which is to be resized by size managing layouts.
BoxComponent
getSize () : Object
获取组件底层元素当前的大小。
获取组件底层元素当前的大小。
参数:
  • 无。
返回值:
  • Object
    一个包含元素大小的对象{width: (element width), height: (element height)}
BoxComponent
getWidth () : Number
获取该组件的当前宽度值。
获取该组件的当前宽度值。
参数:
  • 无。
返回值:
  • Number
BoxComponent
getXType () : String
获取当前组件的xtype，它是用 Ext.ComponentMgr 注册的。 所有可用的xtype列表，参见...
获取当前组件的xtype，它是用 Ext.ComponentMgr 注册的。 所有可用的xtype列表，参见 Ext.Component 类头部。示例用法:

var t = new Ext.form.TextField();
alert(t.getXType());  // alerts 'textfield'
参数:
  • 无。
返回值:
  • String
    The xtype
Component
getXTypes () : String
返回此组件的xtype继承树，用字符'-'分隔。 所有可用的xtype值...

返回此组件的xtype继承树，用字符'-'分隔。 所有可用的xtype值，请参见Ext.Component 类的头部。

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

示例用法:

var t = new Ext.form.TextField();
alert(t.getXTypes());  // alerts 'component/box/field/textfield'
参数:
  • 无。
返回值:
  • String
    xtype层次字符串
Component
hasListener( String eventName ) : Boolean
检测对象是否包含指定事件的任何监听器
检测对象是否包含指定事件的任何监听器
参数:
  • eventName : String
    检测的事件名
返回值:
  • Boolean
    如果事件被监听则为true，否则为false
Observable
hide () : Ext.Component
隐藏当前组件。 监听 beforehide' 事件并且返回false 可以取消隐藏组件的操作。 在隐藏组件之后触发...
隐藏当前组件。 监听 beforehide' 事件并且返回false 可以取消隐藏组件的操作。 在隐藏组件之后触发 ' hide' 事件。 如果组件被配置成 hidden 那么此方法在内部被调用。
参数:
  • 无。
返回值:
  • Ext.Component
    this
Component
isVisible () : Boolean
如果当前组件可见，返回true。
如果当前组件可见，返回true。
参数:
  • 无。
返回值:
  • Boolean
    如果当前组件可见，返回true，其它返回false。
Component
isXType ( String xtype , [ Boolean shallow ] ) : Boolean
Tests whether or not this Component is of a specific xtype. This can test whether this Component is descended from th...

测试此组件是否是指定的xtype。此方法既可以测试是否是指定的xtype的某个子类， 或者它是否直接是指定的xtype类(shallow=true)。

如果使用你自己的子类，必须知道组件必须注册它的xtype值。

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

示例用法:

var t = new Ext.form.TextField();
var isText = t.isXType('textfield');        // true
var isBoxSubclass = t.isXType('box');       // true, descended from BoxComponent
var isBoxInstance = t.isXType('box', true); // false, not a direct BoxComponent instance
参数:
  • xtype : String
    需要为当前组件进行检测的xtype
  • shallow : Boolean
    (可选) 如果为false，检测组件是否是xtype继承树中的某个子类（默认是这种情况）， 如果为true，只检测组件是否是指定的xtype类型。
返回值:
  • Boolean
    如果当前组件是指定xtype的子类，返回true，其它返回flase。
Component
mon ( Observable|Element item , Object|String ename , Function fn , Object scope , Object opt ) : void
向任何Observable对象(或者元素)上添加监听器，监听器将会在组件...

向任何Observable对象(或者元素)上添加监听器，监听器将会在组件销毁时被自动删除。
用法：

myGridPanel.mon(myGridPanel.getSelectionModel(), 'selectionchange', handleSelectionChange, null, {buffer: 50});

or:

myGridPanel.mon(myGridPanel.getSelectionModel(), {
    selectionchange: handleSelectionChange,
    buffer: 50
});
参数:
  • item : Observable|Element
    需要添加listener/listeners的项目。
  • ename : Object|String
    事件名，或者一个包含事件名属性的对象。
  • fn : Function
    (可选) 如果 ename 参数是一个事件名，此参数为处理函数。
  • scope : Object
    (可选)如果 ename 参数是一个事件名称，此参数是作用域 ( this 引用)，监听函数将会在此作用域中被执行。
  • opt : Object
    (可选)如果 ename 参数是一个事件名称， 此参数是 addListener 配置项。
返回值:
  • void
Component
mun ( Observable|Element item , Object|String ename , Function fn , Object scope ) : void
删除通过mon 方法添加的监听器。
删除通过mon 方法添加的监听器。
参数:
  • item : Observable|Element
    需要删除listener/listeners的项目。
  • ename : Object|String
    事件名称，或者一个包含事件名称属性的对象。
  • fn : Function
    (可选)如果 ename 参数是一个事件名称，此参数是一个处理函数。
  • scope : Object
    (可选)如果 ename 参数是一个事件名称，此参数是作用域 ( this 引用)，监听函数将会在此作用域中被执行。
返回值:
  • void
Component
nextSibling () : Ext.Component
返回所属容器中的下一个组件
返回所属容器中的下一个组件
参数:
  • 无。
返回值:
  • Ext.Component
Component
on( String eventName, Function handler, [Object scope], [Object options] ) : void
给对象添加事件处理器 (addListener的简写形式)
给对象添加事件处理器 (addListener的简写形式。)
参数:
  • eventName : String
    监听的事件类型
  • handler : Function
    事件调用的方法
  • scope : Object
    （可选）处理方法执行时的作用域 (this 的引用)。 如果被忽略。默认为触发事件的对象。
  • options : Object
    可选 包含处理器配置的对象。
返回值:
  • void
Observable
previousSibling () : Ext.Component
返回所属容器中的前一个组件
返回所属容器中的前一个组件
参数:
  • 无。
返回值:
  • Ext.Component
Component
purgeListeners() : void
移除对象上所有的监听器
移除对象上所有的监听器
参数:
  • 无。
返回值:
  • void
Observable
relayEvents( Object o, Array events ) : void
从指定的Observable上传递选择的事件就好像被当前对象触发一样。
从指定的Observable上传递选择的事件就好像被当前对象触发一样。
参数:
  • o : Object
    该Observable上的事件被当前对象传递。
  • events : Array
    传递的数组名。
返回值:
  • void
Observable
removeClass ( string cls ) : Ext.Component
从组件底层的元素上删除一个CSS类。
从组件底层的元素上删除一个CSS类。
参数:
  • cls : string
    需要移除的CSS类名
返回值:
  • Ext.Component
    this
Component
removeListener( String eventName, Function handler, [Object scope] ) : void
删除一个事件处理器。
删除一个事件处理器。
参数:
  • eventName : String
    处理器关联的事件类型。
  • handler : Function
    移除的处理器。 这应该是传递到addListener里的方法的引用。
  • scope : Object
    （可选）处理器指定的初始作用域。
返回值:
  • void
Observable
render ( [ Element/HTMLElement/String container ], [ String/Number position ] ) : void
在传递进来的HTML元素中渲染当前组件。...

在传递进来的HTML元素中渲染当前组件。

如果你正在使用一个Container 对象放置当前组件，那么请不要使用render方法。

当容器第一次被渲染时，它的子组件将会被容器的 layout 管理器渲染。

某些布局管理器允许动态添加子组件。它们包括 Ext.layout.CardLayout, Ext.layout.AnchorLayout, Ext.layout.FormLayout, Ext.layout.TableLayout。

当一个新的子组件被添加时，如果容器已经被渲染了， 你可能需要调用容器的 doLayout 方法来刷新视图，它将导致所有没有被渲染的子组件进行渲染操作。 此操作是必须的，这样你可以添加多个子组件而只刷新一次layout。

当创建复杂的UI时，非常重要的一点是，请记住调整子项目的尺寸和位置是容器的 layout 管理器的职责。 如果你希望子项目的尺寸对用户交互作出反应， 你必须为容器配置一个布局管理器，它将创建和管理你心里想要的那种布局。

忽略容器的layout 配置意味着将会使用一个基本的布局管理器，它除了按次序把子组件 渲染到容器中之外什么事情都不做。 这种情况下，任何尺寸和位置的调整操作都不会发生。

参数:
  • container : Element/HTMLElement/String
    (可选) 需要在其中渲染当前组件的元素。 如果它是从一个已存在的标签中创建的，此参数应该被忽略。
  • position : String/Number
    (可选) 容器中的一个元素ID或者一个DOM节点索引， 当前组件将会被插入到它前面 (默认append到容器的尾部)
返回值:
  • void
Component
resumeEvents() : void
重新开始触发事件。(参见suspendEvents) 如果事件以queueSuspended参数被挂起，则在事件被挂起时 ...
重新开始触发事件。(参见 suspendEvents) 如果事件以queueSuspended 参数被挂起，则在事件被挂起时触发的事件会被传递到所有的监听器上
参数:
  • 无。
返回值:
  • void
Observable
setAutoScroll ( Boolean scroll ) : Ext.BoxComponent
设置该组件内容溢出时是否自动显示滚动条。
设置该组件内容溢出时是否自动显示滚动条。
参数:
  • scroll : Boolean
    值为true的话组件自动显示滚动条。
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setDisabled ( Boolean disabled ) : Ext.Component
工具函数，使用布尔值设置有效/无效(disabled/enabled )。
工具函数，使用布尔值设置有效/无效(disabled/enabled )。
参数:
  • disabled : Boolean
返回值:
  • Ext.Component
    this
Component
setHeight ( Mixed height ) : Ext.BoxComponent
设置此组件的高度。该方法将触发resize事件。
设置此组件的高度。该方法将触发resize事件。
参数:
  • height : Mixed
    The new height to set.
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setPagePosition ( Number x , Number y ) : Ext.BoxComponent
设置组件在页面中的XY位置。 如果需要设置left和top值 ，请使用...
设置组件在页面中的XY位置。 如果需要设置left和top值 ，请使用setPosition方法。 该方法触发move事件。
参数:
  • x : Number
    The new x position
  • y : Number
    The new y position
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setPosition ( Number left , Number top ) : Ext.BoxComponent
设置组件的left和top值。设置组件的页面XY值，请使用setPagePosition方法。该方法触发...
设置组件的left和top值。设置组件的页面XY值，请使用setPagePosition方法。该方法触发move事件。
参数:
  • left : Number
    The new left
  • top : Number
    The new top
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setSize ( Mixed width , Mixed height ) : Ext.BoxComponent
设置BoxComponent的宽度和高度。 此方法触发resize事件...
设置BoxComponent的宽度和高度。 此方法触发resize事件。此方法可以接收单独的width或者height值作为参数， 或者你可以传递像这样的一个size对象： {width:10, height:20} 。
参数:
  • width : Mixed
    设置的新的width值。这可以是：
    • 一个Number类型指定Element新的宽度 Ext.Element.defaultUnit(默认为像素 :'px')。
    • 一个String类型用于设置width的CSS样式。
    • 一个size对象格式为 {width: widthValue, height: heightValue} 。
    • 值为 undefined 时，保留原来的width不变。
  • height : Mixed
    设置的新的height值(如果第一个参数传递了一个size对象，此参数没有必要传递)。这可以是：
    • 一个Number类型指定Element新的高度 Ext.Element.defaultUnit(默认为像素 :'px')。
    • 一个String类型用于设置height的CSS样式。也有可能不会被使用到。
    • 值为 undefined 时，保留原来的height不变。
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setVisible ( Boolean visible ) : Ext.Component
工具方法，通过使用布尔值隐藏或者显示当前组件。
工具方法，通过使用布尔值隐藏或者显示当前组件。
参数:
  • visible : Boolean
    true时显示，false时隐藏
返回值:
  • Ext.Component
    this
Component
setWidth ( Mixed width ) : Ext.BoxComponent
设置组件的宽度。 此方法触发resize事件。
设置组件的宽度。 此方法触发resize事件。
参数:
  • width : Mixed
    The new width to set.
返回值:
  • Ext.BoxComponent
    this
BoxComponent
show () : Ext.Component
显示当前组件。监听' beforeshow' 事件，返回 false 取消显示组件...
显示当前组件。监听' beforeshow' 事件，返回 false 取消显示组件。在显示组件之后触发' show' 事件。
参数:
  • 无。
返回值:
  • Ext.Component
    this
Component
suspendEvents( Boolean queueSuspended ) : void
暂停触发所有的事件。 (参看resumeEvents)
暂停触发所有的事件。（参看 resumeEvents)
参数:
  • queueSuspended : Boolean
    如果传递为true则排列好暂停的事件使得在调用 resumeEvents 后再触发它们，而不是抛弃所有暂停的事件。
返回值:
  • void
Observable
syncSize () : Ext.BoxComponent
强制组件的大小按照此组件底层元素当前的高度和宽度计算。
强制组件的大小按照此组件底层元素当前的高度和宽度计算。
参数:
  • 无。
返回值:
  • Ext.BoxComponent
    this
BoxComponent
un( String eventName, Function handler, [Object scope] ) : void
删除一个事件处理器(removeListener方法的简写形式)
删除一个事件处理器(removeListener方法的简写形式。)
参数:
  • eventName : String
    处理器关联的事件类型
  • handler : Function
    被删除的处理器 这应该是传入 addListener 中的方法的引用。
  • scope : Object
    （可选）为处理器指定的初始作用域。
返回值:
  • void
Observable
update ( Mixed htmlOrData , [ Boolean loadScripts ], [ Function callback ] ) : void
刷新组件的内部区域。
刷新组件的内部区域。
参数:
  • htmlOrData : Mixed
    如果已经通过tpl为当前组件配置了一个模板，那么 将会使用此参数来装配模板。 如果没有为当前组件配置模板，组件的内容区域将会通过Ext.Element 进行刷新。
  • loadScripts : Boolean
    (可选)只用在使用html配置时此参数才合法。默认为false。
  • callback : Function
    (可选)只用在使用html配置时此参数才合法。 当脚本加载完成时回调函数才被执行。
返回值:
  • void
Component
updateBox ( Object box ) : Ext.BoxComponent
设置此组件底层元素的盒子模型尺寸。(译者注：盒子模型是CSS术语，详细资料请自行搜索。)
设置此组件底层元素的盒子模型尺寸。(译者注：盒子模型是CSS术语，详细资料请自行搜索。)
参数:
  • box : Object
    一个格式为{x, y, width, height}的对象
返回值:
  • Ext.BoxComponent
    this
BoxComponent

公共事件

Event Defined By
added : ( Ext.Component this , Ext.Container ownerCt , number index )
当一个组件被添加到一个Ext.Container时触发
当一个组件被添加到一个Ext.Container时触发
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • ownerCt : Ext.Container
    用于组件的容器
  • index : number
    添加组件的位置
Component
afterrender : ( Ext.Component this )
在组件渲染完成之后触发...

在组件渲染完成之后触发。

afterrender事件在当前组件被rendered 结束之后、在为组件定义的所有afterRender方法执行之后 触发，并且，如果有stateful， 也在状态被保存之后才触发。

监听器将会以如下参数格式被调用:
  • this : Ext.Component
Component
beforedestroy : ( Ext.Component this )
在组件 destroyed 之前触发。 在事件监听器中返回false以停止 destroy 操作。
在组件 destroyed 之前触发。 在事件监听器中返回false以停止 destroy 操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforehide : ( Ext.Component this )
在调用hide方法隐藏组件之前触发。 在事件监听器中返回false可以停止隐藏操作。
在调用hide方法隐藏组件之前触发。 在事件监听器中返回false可以停止隐藏操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforerender : ( Ext.Component this )
在组件被rendered 之前触发。 在事件监听器中返回false可以停止render 操作。
在组件被rendered 之前触发。 在事件监听器中返回false可以停止render 操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforeshow : ( Ext.Component this )
在调用show()方法现实组件之前触发。 事件处理函数返回false可以停止show。
在调用show 方法现实组件之前触发。 事件处理函数返回false可以停止show。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforestaterestore : ( Ext.Component this , Object state )
在组件状态恢复之前触发。返回false停止恢复状态操作。
在组件状态恢复之前触发。返回false停止恢复状态操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    StateProvider返回的状态哈希值。 如果没有禁止此事件，那么状态对象会被传递给applyState。 默认情况下，这样简单地把属性值拷贝到当前组件中。 可以覆盖此方法以提供自定的状态恢复操作。
Component
beforestatesave : ( Ext.Component this , Object state )
在组件状态被保存到配置的状态提供者之前触发。 返回false可以停止保存。
在组件状态被保存到配置的状态提供者之前触发。 返回false可以停止保存。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    状态值哈希。 这由在组件上调用getState() 方法决定。 此方法必须由开发者提供，返回是否需要对状态进行描述，默认情况下， Ext.Component有一个空实现。
Component
destroy : ( Ext.Component this )
在组件被销毁之后触发。
在组件被destroyed之后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
disable : ( Ext.Component this )
在组件被设置为无效状态后触发。
在组件被设置为无效状态后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
enable : ( Ext.Component this )
当组件被设置为有效(enabled)之后触发。
当组件被设置为有效(enabled)之后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
hide : ( Ext.Component this )
在组件被隐藏之后触发。 当调用hide 方法隐藏组件之后触发。
在组件被隐藏之后触发。 当调用hide 方法隐藏组件之后触发。
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
move : ( Ext.Component this , Number x , Number y )
在组件移动之后触发。
在组件移动之后触发。
监听器将会用如下的参数格式来调用:
  • this : Ext.Component
  • x : Number
    The new x position
  • y : Number
    The new y position
BoxComponent
removed : ( Ext.Component this , Ext.Container ownerCt )
当一个组件被从Ext.Container容器中删除时触发
当一个组件被从Ext.Container容器中删除时触发
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • ownerCt : Ext.Container
    持有组件的容器
Component
render : ( Ext.Component this )
在组件被渲染之后触发。
在组件被 rendered(渲染) 之后触发。
监听器将以如下的参数格式被调用:
  • this : Ext.Component
Component
resize : ( Ext.Component this , Number adjWidth , Number adjHeight , Number rawWidth , Number rawHeight )
在组件被调整大小之后触发。
在组件被调整大小之后触发。
监听器将以如下的参数格式被调用:
  • this : Ext.Component
  • adjWidth : Number
    这是width调整后的值
  • adjHeight : Number
    这是height调整后的值
  • rawWidth : Number
    这是width原来的值
  • rawHeight : Number
    这是height原来的值
BoxComponent
show : ( Ext.Component this )
在调用show 方法显示组件之后触发。
在调用show 方法显示组件之后触发。
监听器将会用如下的参数格式被调用:
  • this : Ext.Component
Component
staterestore : ( Ext.Component this , Object state )
组件状态被存储之后触发。
组件状态被存储之后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    StateProvider返回的状态哈希值。 如果没有禁止此事件，那么状态对象会被传递给applyState。 默认情况下，这样简单地把属性值拷贝到当前组件中。 可以覆盖此方法以提供自定的状态恢复操作。
Component
statesave : ( Ext.Component this , Object state )
在组件状态被保存到所配置的状态提供者之后触发。
在组件状态被保存到所配置的状态提供者之后触发。
监听器将会用如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    状态值hash。 这是由在足见上调用getState() 方法决定的。 开发者必须提供此方法以返回是否需要恢复状态，默认情况下， Ext.Component有一个空实现。
Component


Observable
    Component
      BoxComponent
        Container
          Toolbar

Class Ext.Toolbar

包: | Ext
定义类的文件: | Toolbar.js
类: | Toolbar
子类: | PagingToolbar
继承自: | Container

基本工具条类。 尽管Toolbar的defaultType 为button ，事实上Toolbar元素(Toolbar容器的子元素)可以是任意类型的Component. Toolbar元素可以显式地通过它们的构造函数创建，或者隐式地通过他们的xtype， 也可以动态地add 。

一些项目拥有快速创建字符串:

Shortcut  xtype          Class                  Description
'->'      'tbfill'       Ext.Toolbar.Fill       begin using the right-justified button container
'-'       'tbseparator'  Ext.Toolbar.Separator  add a vertical separator bar between toolbar items
' '       'tbspacer'     Ext.Toolbar.Spacer     add horiztonal space between elements
多个元素的示例用法:
var tb = new Ext.Toolbar({
    renderTo: document.body,
    width: 600,
    height: 100,
    items: [
        {
            // xtype: 'button', // default for Toolbars, same as 'tbbutton'

            text: 'Button'
        },
        {
            xtype: 'splitbutton', // same as 'tbsplitbutton'

            text: 'Split Button'
        },
        // begin using the right-justified button container
        '->', // same as {xtype: 'tbfill'}, // Ext.Toolbar.Fill
        {
            xtype: 'textfield',
            name: 'field1',
            emptyText: 'enter search term'
        },
        // add a vertical separator bar between toolbar items
        '-', // same as {xtype: 'tbseparator'} to create Ext.Toolbar.Separator
        'text 1', // same as {xtype: 'tbtext', text: 'text1'} to create Ext.Toolbar.TextItem
        {xtype: 'tbspacer'},// same as ' ' to create Ext.Toolbar.Spacer
        'text 2',
        {xtype: 'tbspacer', width: 50}, // add a 50px space
        'text 3'
    ]
});
在按钮菜单中添加一个ComboBox的示例:
// ComboBox creation
var combo = new Ext.form.ComboBox({
    store: new Ext.data.ArrayStore({
        autoDestroy: true,
        fields: ['initials', 'fullname'],
        data : [
            ['FF', 'Fred Flintstone'],
            ['BR', 'Barney Rubble']
        ]
    }),
    displayField: 'fullname',
    typeAhead: true,
    mode: 'local',
    forceSelection: true,
    triggerAction: 'all',
    emptyText: 'Select a name...',
    selectOnFocus: true,
    width: 135,
    getListParent: function() {
        return this.el.up('.x-menu');
    },
    iconCls: 'no-icon' //use iconCls if placing within menu to shift to right side of menu
});

// put ComboBox in a Menu
var menu = new Ext.menu.Menu({
    id: 'mainMenu',
    items: [
        combo // A Field in a Menu
    ]
});

// add a Button with the menu
tb.add({
        text:'Button w/ Menu',
        menu: menu  // assign menu by instance
    });
tb.doLayout();

配置项

Config Options Defined By
activeItem : String/Number
一个string型的组件id，或者组件的数字索引， 它需要...
一个string型的组件id，或者组件的数字索引， 它需要在渲染时在容器内的布局管理器中被初始化并激活。 例如：activeItem: 'item-1' 或者 activeItem: 0 ( 索引 0 =容器子项目集合中的第一个元素)。 activeItem仅仅适用于一次显示一个组件的布局模式(比如 Ext.layout.AccordionLayout, Ext.layout.CardLayout 和 Ext.layout.FitLayout)。 与 Ext.layout.ContainerLayout.activeItem 相关。
Container
allowDomMove : Boolean
在渲染时组件是否可以移动Dom节点(默认为true)。
Component
anchor : String
注: 这个配置只用于该组件被包含在一个已使用AnchorLayout...

注: 这个配置只用于该组件被包含在一个已使用 AnchorLayout (或者其子类)配置的Container时。 基于布局管理器，例如：

  • Ext.form.FormPanel
  • 指定 layout: 'anchor' // or 'form', or 'absolute'

参见 Ext.layout.AnchorLayout. anchor 。

BoxComponent
applyTo : Mixed
指定一个元素的id、一个DOM元素或者一个已经存在并被渲染到DIV中的元素，此DIV已经被...

指定一个元素的id、一个DOM元素或者一个已经存在并被渲染到DIV中的元素，此DIV已经被 渲染到document中，并且为当前组件指定了一些结构化的标签。

  • 描述 :
      当使用了 applyTo， 在主元素中也可以用id或者CSS类名来指定组件的托管部分， 并且，如果可以的话，创建的组件可能也会试图在那个标签中创建它的子组件。
  • 注意 :
      当使用此配置项时，无需调用render()方法。
      如果指定了applyTo属性，任何传递给 renderTo 的值都会被忽略，并且目标元素的父节点将会自动被用作组件的容器。
Component
autoDestroy : Boolean
如果为true，容器将自动销毁任何从其中被删除的组件， 否则...
如果为true，容器将自动销毁任何从其中被删除的组件， 否则必须手动处理销毁操作(默认为true)。
Container
autoEl : Mixed
一个表签名或者一个 DomHelper 描述，用来创建 Element ，它将封装当前组件...

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

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

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

{
    xtype: 'box',
    autoEl: {
        tag: 'img',
        src: 'http://www.example.com/example.jpg'

    }
}, {
    xtype: 'box',
    autoEl: {
        tag: 'blockquote',
        html: 'autoEl is cool!'
    }
}, {
    xtype: 'container',
    autoEl: 'ul',
    cls: 'ux-unordered-list',
    items: {
        xtype: 'box',
        autoEl: 'li',
        html: 'First list item'
    }
}
Component
autoHeight : Boolean
如果值为true，height配置项为'auto'，否则值为false的话使用固定的高度...

如果值为true，height配置项为'auto'，否则值为false的话使用固定的高度， 或者可以由其父类容器 layout manager来控制。(默认值为 false)。

注: 虽然很多组件继承了这个配置选项，但不是所有这些组件的自适应高度配置都会像期望的那样起作用。 设置autoHeight：值为true时，浏览器将根据元素的内容自动设置高度，这将意味着Ext不会去管理高度。

如果是由浏览器来管理高度，需要注意的是，通过浏览器进行调整的结构组件内不能被发现， 因此宽度的变化可能导致需要进行同步处理元素的高度。 例如：

var w = new Ext.Window({
    title: 'Window',
    width: 600,
    autoHeight: true,
    items: {
        title: 'Collapse Me',
        height: 400,
        collapsible: true,
        border: false,
        listeners: {
            beforecollapse: function() {
                w.el.shadow.hide();
            },
            beforeexpand: function() {
                w.el.shadow.hide();
            },
            collapse: function() {
                w.syncShadow();
            },
            expand: function() {
                w.syncShadow();
            }
        }
    }
}).show();
BoxComponent
autoScroll : Boolean
如果值为true，将会在该元素上使用overflow:'auto'配置，并且在必要的时候...
如果值为true，将会在该元素上使用overflow:'auto'配置，并且在必要的时候自动显示滚动条，否则，溢出部分的组件都会被切除(默认值为 false)。
BoxComponent
autoShow : Boolean
如果组件需要检测隐藏CSS属性(如 'x-hidden' 或者 'x-hide-display')并且在渲染时删除...
如果组件需要检测隐藏CSS属性(如 'x-hidden' 或者 'x-hide-display')并且在渲染时删除它们 (默认为false)，设置此值为true。
Component
autoWidth : Boolean
如果为true，使用width:'auto'配置，否则使用固定的宽度...

如果为true，使用width:'auto'配置，否则使用固定的宽度，或者可以由其父类容器的layout manager来控制。(默认值为 false)。

注: 虽然很多组件继承了这个配置选项，但不是所有这些组件的自适应宽度配置都会像期望的那样起作用。 设置autoWidth：值为true时，浏览器将根据元素的内容自动设置宽度，这将意味着Ext不会去管理宽度。

如果是由浏览器来管理宽度，需要注意的是，通过浏览器进行调整的结构组件内不能被发现，因此宽度的变化可能导致需要进行同步处理元素的宽度。 例如，在这个元素的目标是：

<div id='grid-container' style='margin-left:25%;width:50%'></div>
当浏览器窗口改变时，渲染后的Panel必须监听浏览器窗口大小的变化，以便通知子项，浏览器改变了其宽度：

var myPanel = new Ext.Panel({
    renderTo: 'grid-container',
    monitorResize: true, // relay on browser resize
    title: 'Panel',
    height: 400,
    autoWidth: true,
    layout: 'hbox',
    layoutConfig: {
        align: 'stretch'
    },
    defaults: {
        flex: 1
    },
    items: [{
        title: 'Box 1',
    }, {
        title: 'Box 2'
    }, {
        title: 'Box 3'
    }],
});
BoxComponent
boxMaxHeight : Number
设置组件的最大高度值...

设置组件的最大高度值。

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

BoxComponent
boxMaxWidth : Number
设置组件的最大宽度值...

设置组件的最大宽度值。

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

BoxComponent
boxMinHeight : Number
设置组件的最小高度值...

设置组件的最小高度值。

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

BoxComponent
boxMinWidth : Number
设置组件的最小宽度值...

设置组件的最小宽度值。

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

BoxComponent
bubbleEvents : Array
一个事件数组，当这些事件被触发时，将会被冒泡到所有父容器中。参见....

一个事件数组，当这些事件被触发时，将会被冒泡到所有父容器中。参见 Ext.util.Observable.enableBubble。 默认为 []。

Container
bufferResize : Boolean/Number
当设置为true时(50毫秒)或者是一个毫秒数值， 指定给当前容器的布...
当设置为true时(50毫秒)或者是一个毫秒数值， 指定给当前容器的布局管理器将会缓存它计算出的频率，然后 对组件进行一次重新布局操作。 对于重量级的容器，或者拥有大量子组件的容器来说，这非常有用， 因为频繁进行布局是非常昂贵的。 默认为 50 .
Container
buttonAlign : String
子项目的默认对齐位置。 默认为 "left" .也可以指定为 "center" ，这将会导致项目被添加到一个Fill(一个 "->" )...

子项目的默认对齐位置。 默认为 "left"

也可以指定为 "center" ，这将会导致项目被添加到一个Fill(一个 "->" )项目之前，以保证位于Toolbar中间。 在Fill之后添加的项目仍然靠右对齐。

指定为 "right" 可以让所有子项目靠右对齐。

Toolbar
clearCls : String
应用到特殊的clearing div的CSS类， 这个clearing div直接渲染到每个form field的包装器后面...

应用到特殊的clearing div的CSS类， 这个clearing div直接渲染到每个form field的包装器后面，以提供 清除field的功能(默认为 'x-form-clear-left')。

注意: 只有在当前组件被渲染到一个使用FormLayout 布局(例如 Ext.form.FormPanel 或者指定 layout:'form')的 容器中、或者是指定了一个fieldLabel 、或者指定isFormField=true 时此配置才有效。

另请参见 Ext.layout.FormLayout. fieldTpl。

Component
cls : String
一个可选的额外CSS类，它将被添加到当前组件的元素上(默认为'')...
一个可选的额外CSS类，它将被添加到当前组件的元素上(默认为'')。 此属性对于在组件上，或者它的任何使用标准CSS规则的孩子节点上， 添加定制的样式非常有用。
Component
contentEl : String
(可选)指定一个已存在的HTML元素，或者一个已存在HTML元素的...

(可选)指定一个已存在的HTML元素，或者一个已存在HTML元素的 id ，它们将被用作当前组件的内容。

  • 描述 :
    此配置选项被用来将一个已存在的HTML元素 插入到一个新组件(在组件渲染之后它简单地移动DOM元素) 的layout元素中，使它成为该组件的内容。
  • 注意 :
    指定的HTML元素将被append到组件的layout元素中， 在所有配置的 HTML 被插入之后， 并且，这样的话，在render事件 被触发时，document中将不再包含此元素。
    指定的HTML元素将不会参与组件所有可能使用的 layout 过程(译者注：指这些HTML元素 不会参与布局操作)。 它仅是HTML而已。布局操作实在孩子 items 上进行的。
    添加 x-hidden 或者 x-hide-display CSS类，以防在内容渲染到panel时发生闪烁。
Component
ctCls : String
一个可选的外部CSS样式，添加到这个组件的容器(默认值为 '')。 这个方法对于使用标准的CSS规则...

一个可选的外部CSS样式，添加到这个组件的容器(默认值为 '')。 这个方法对于使用标准的CSS规则，为组件或它的任何一个子组件添加特定的样式非常有用。 参见 Ext.layout.ContainerLayout和 extraCls 。

注意: ctCls 默认为 ''期望如下的类，它们将指定一个默认值:

  • Box Layout : 'x-box-layout-ct'
使用一个额外的CSS类配置以上的Class，它是append到默认对象上的。例如， 对于BoxLayout (Hbox and Vbox):
                                ctCls: 'x-box-layout-ct custom-class'

Component
data : Mixed
初始化数据集，它将被应用到 tpl 上以刷新组件的内容区域。
Component
defaultType : String
当一个子项目通过一个原生的配置对象 而不是一个组件的实例指定时。...

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

默认为 'panel' ， Ext.menu.Menu 默认为 'menuitem' ， Ext.Toolbar 和 Ext.ButtonGroup 默认为 'button' 。

Container
defaults : Object|Function
此选项是在所有添加的项目上应用默认设置的手段， 这些项目要么是通过...

此选项是在所有添加的项目上应用默认设置的手段， 这些项目要么是通过 items 配置项添加的， 或者是通过 add 或者是通过 insert 方法添加的。

如果添加的项目是一个配置对象， 并且不是一个组件的实例， 那么默认参数将会被无条件地被应用。 如果添加的项目是一个组件的实例， 那么默认参数将有条件地被应用，以免覆盖项目上的现有属性你。

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

例如，如需自动在 Ext.Panel 所包含的每个项目上应用padding属性，你可以传递: defaults: {bodyStyle: 'padding:15px'} 。

用法:

defaults: {               // defaults are applied to items, not the container
    autoScroll:true
},
items: [
    {
        xtype: 'panel',   // defaults do not have precedence over
        id: 'panel1',     // options in config objects, so the defaults
        autoScroll: false // will not be applied here, panel1 will be autoScroll:false
    },
    new Ext.Panel({       // defaults do
                                     have precedence over options
        id: 'panel2',     // options in components, so the defaults
        autoScroll: false // will be applied here, panel2 will be autoScroll:true.
    })
]
Container
disabled : Boolean
当前组件处于无效状态时为true。 Read-only.
Component
disabledClass : String
当组件处于无效状态时添加到组件上的CSS类(默认为 'x-item-disabled')。
Component
enableOverflow : Boolean
默认为false。 配置 true 可以使工具条提供一个按钮，它扮演一个下拉菜单，用来显示...
默认为false。 配置 true 可以使工具条提供一个按钮，它扮演一个下拉菜单，用来显示 溢出Toolbar宽度的项目。
Toolbar
fieldLabel : String
紧靠此field显示的标签文本(默认值为 '')。注意...

紧靠此field显示的标签文本(默认值为 '')。

注意:只有在当前组件被渲染到一个使用FormLayout 的容器中时，此配置才有效。 (例如 Ext.form.FormPanel 或 指定 layout:'form')。

另请参见 hideLabel 、 Ext.layout.FormLayout和 fieldTpl。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Name'
    }]
});
Component
flex : Number
注: 这个配置只用于该组件被包含在一个已使用BoxLayout配置的Container中时...

注: 这个配置只用于该组件被包含在一个已使用BoxLayout配置的Container中时。通过计算每一个子组件的flex值所占全部flex值之和的比例，来决定子组件的宽(HBoxLayout)高(VBoxlayout)。 任何子项的 flex = 0 或 flex = undefined 将不被设置(初始值大小将不被改变)。

BoxComponent
forceLayout : Boolean
如果此值为true，容器将将强制初始化一次布局操作...
如果此值为true，容器将将强制初始化一次布局操作， 即使容器处于隐藏或者折叠状态。 此配置项对于在一个折叠或者隐藏的容器中强制渲染非常有用 (默认为false)。
Container
height : Number
组件的高度(默认值为 auto)。注:如果想使用百分比的方式...
组件的高度(默认值为 auto)。注:如果想使用百分比的方式来设置值，请查看 Ext.Component.anchor。
BoxComponent
hidden : Boolean
如果当前组件处于隐藏状态，此值为true。Read-only。
Component
hideBorders : Boolean
设置为true可以隐藏所包含的每个组件的边框， false为遵照组件现有的边框设置...
设置为true可以隐藏所包含的每个组件的边框， false为遵照组件现有的边框设置(默认为 false)。
Container
hideLabel : Boolean
true时完全隐藏label元素 ( label 和 separator)。 默认为 false。 默认情况下，即使你不指定...

true时完全隐藏label元素 ( label 和 separator)。 默认为 false。 默认情况下，即使你不指定 fieldLabel 它的空间仍然会被保留，这样这块区域会与其它确实拥有label的区域位于同一排。 讲此值设置为 true 将导致此区域不再保留此空间。

注意: 参见 clearCls 的注释。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield'
        hideLabel: true
    }]
});
Component
hideMode : String
组件如何隐藏，支持的值有： 'visibility' (css visibility), 'offsets' (位置偏移量为负值) 和...

组件如何隐藏，支持的值有： 'visibility' (css visibility), 'offsets' (位置偏移量为负值) 和 'display' (css display).

注意:一般首选默认值 'display'，因为当组件第一次显示的时候它们会自动进行布局 (隐藏的时候不会调整尺寸)。

Component
hideParent : Boolean
此值为true时，当调用hide/show方法时，将会hide和show组件的容器...
此值为true时，当调用hide/show方法时，将会hide和show组件的容器；false时将会 hide和show组件自身(默认为false)。例如，这可以用作window上隐藏按钮的一种 快捷操作，通过设置此按钮的hideParent:true，然后把它添加到window上。
Component
html : String/Object
一个HTML片段，或者一个 DomHelper 描述，用作layout元素的内容(默认为'')。...
一个HTML片段，或者一个 DomHelper 描述，用作layout元素的内容(默认为'')。 这个HTML内容在组件渲染之后才被添加，所以在 render 出发的时候，document中尚未包含此HTML。 但是这个内容将会在所有配置的 contentEl 之前被插入到body标签中。
Component
id : String
当前组件唯一的id(默认为auto-assigned id)...

当前组件唯一的id(默认为auto-assigned id)。 如果你需要在以后访问组件，而又没有一个有效的组件对象引用，那么你需要指定一个 id( 也就是，使用Ext. getCmp方法 )。

注意，此id也将被用作组件底层HTML标签的id，这些标签被渲染到页面中。 这将允许你编写基于id的CSS规则，以独立地描述指定的实例；并且，也可以通过 组件父标签的id选中子元素。

注意:为了避免与唯一的id 产生重复， 请参见 itemId 和 ref 。

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

Component
itemCls : String
注意: 只有在当前组件被渲染到一个使用FormLayout 布局的 容器中时此配置才有效...

注意: 只有在当前组件被渲染到一个使用FormLayout 布局的 容器中时此配置才有效。 (例如Ext.form.FormPanel 或者指定 layout:'form')。

一个附加的CSS类，应用到div上，包装当前field的表单元素。 如果提供了此参数， field级上的itemCls将会覆盖 container级上提供的 默认itemCls。 为itemCls指定的值将会被添加默认的 类('x-form-item')。

既然它被应用到项目的包装器上(参见 Ext.layout.FormLayout。 fieldTpl)， 它将允许你编写能应用到此field、label(如果有指定)、或者field内部任何其它元素的标准CSS规则。

注意: 参考 fieldLabel的注释。 .

示例用法:

// Apply a style to the field's label:
<style>
    .required .x-form-item-label {font-weight:bold;color:red;}
</style>

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Name',
        itemCls: 'required' //this label will be styled
    },{
        xtype: 'textfield',
        fieldLabel: 'Favorite Color'
    }]
});
Component
itemId : String
当没有可利用的对象引用时，itemId可以作为第二选择，用来获得一个组件的引用， 代替 ...

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

var c = new Ext.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'); // 与 Ext.getCmp()不同

p2 = p1.ownerCt.getComponent('p2'); // 通过兄弟对象获得引用

另请参见 id 和 ref 。

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

Component
items : MixedCollection
当前容器中的子组件集合 Ext.util.MixedCollection
Container
labelSeparator : String
每个fieldLabel 文本后面现实的分隔符。 此属性可以在多个层次上进行配置...

每个fieldLabel 文本后面现实的分隔符。 此属性可以在多个层次上进行配置。优先顺序为：

  • field / component level
  • container level
  • layout level (默认为冒号 ':')
如不需要为当前field的label显示分隔符，指定一个空字符串''即可。

注意:参见 clearCls 的注释。

另请参见 hideLabel 和 Ext.layout.FormLayout。 fieldTpl。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    layoutConfig: {
        labelSeparator: '~'   // layout config has lowest priority (defaults to ':')
    },
    labelSeparator: '>>',     // config at container level
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Field 1',
        labelSeparator: '...' // field/component level config supersedes others
    },{
        xtype: 'textfield',
        fieldLabel: 'Field 2' // labelSeparator will be '='

    }]
});
Component
labelStyle : String
一个CSS样式描述字符串，它将直接应用到当前field的label上...

一个CSS样式描述字符串，它将直接应用到当前field的label上。 如果有设置，默认为容器的labelStyle值(例如 Ext.layout.FormLayout.labelStyle , 或者 '')。

注意:参见 clearCls 的注释。

另请参见 hideLabel 和 Ext.layout.FormLayout. fieldTpl。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Name',
        labelStyle: 'font-weight:bold;'
    }]
});
Component
layout : String/Object
该类分配一个默认布局( layout: 'toolbar' )。如果需要其它布局，开发者可以覆盖此配置项...
该类分配一个默认布局( layout: 'toolbar' )。如果需要其它布局，开发者可以覆盖此配置项 (在这种情况下，构造函数必须在一个配置对象中传递，而不是用一个数组)。 附加信息参见Ext.Container.layout.
Toolbar
layoutConfig : Object
这是一个配置对象，包含为 layout 指定的参数， 如果 layout 是作为一个 string 来指定的。

Container
listeners : Object
一个包含一个或多个事件处理器的配置对象，会在初始化的时候被添加到目标对象上...

一个包含一个或多个事件处理器的配置对象，会在初始化的时候被添加到目标对象上。 该配置对象应该是一个有效的监听器配置对象就像 addListener例子中指定的一样可一次附加多个处理器。

ExtJs Components上的DOM事件

一些 ExtJs Component 类导出时会选择一些DOM事件(例如 "click", "mouseover" 等等), 这通常只是在有额外的值可以被添加时发生。例如DataView类的 click事件会传递被点击的节点。也可以直接在Component的HTMLElementevent上访问DOM事件，但必需在Component被渲染后监听器才能添加到Element 上。可以按照以下步骤添加插件:

// 插件会用一个监听器配置对象进行配置。
//该组件会被添加到所有处理方法的参数列表上。
Ext.DomObserver = Ext.extend(Object, {
    constructor: function(config) {
        this.listeners = config.listeners ? config.listeners : config;
    },

    // 组件将自己传递进了插件的初始化方法里
    init: function(c) {
        var p, l = this.listeners;
        for (p in l) {
            if (Ext.isFunction(l[p])) {
                l[p] = this.createHandler(l[p], c);
            } else {
                l[p].fn = this.createHandler(l[p].fn, c);
            }
        }

        // 渲染后立即添加监听器到元素上
        c.render = c.render.createSequence(function() {
            var e = c.getEl();
            if (e) {
                e.on(l);
            }
        });
    },

    createHandler: function(fn, c) {
        return function(e) {
            fn.call(this, e, c);
        };
    }
});

var combo = new Ext.form.ComboBox({

    // 元素被点击后折叠
    plugins: [ new Ext.DomObserver({
        click: function(evt, comp) {
            comp.collapse();
        }
    })],
    store: myStore,
    typeAhead: true,
    mode: 'local',
    triggerAction: 'all'
});

Observable
margins : Object
注:此配置只用于该组件展现在一个使用BorderLayout...

注:此配置只用于该组件展现在一个使用BorderLayout 或 BoxLayout的两个子类之一作为布局的容器。

这个margins对象在该组件中的格式为：

{top: (top margin),right: (right margin),bottom: (bottom margin),left: (left margin)}

也可以是一个字符串，中间用空格分隔，margin值为数字。 把matches中每一个值的次序跟CSS中margin值的排列方式相对应：

  • 如果只有一个值，它适用于所有方面。
  • 如果有两个值，top和bottom的边框设置为第一个值，left和right设置为第二个值。
  • 如果有三个值，top设置为第一个值，left和right设置为第二个值，bottom设置为第三个值。
  • 如果有四个值，分别设置为top, right, bottom, left。

默认值:

{top:0, right:0, bottom:0, left:0}
BoxComponent
monitorResize : Boolean
设置为true自动监测window的resize事件，以便处理所有对当前窗口尺寸 敏感的事情。...
设置为true自动监测window的resize事件，以便处理所有对当前窗口尺寸 敏感的事情。 典型地，通过选择一个 layout 来管理这个值，并且不应该手动设置它。
Container
overCls : String
一个可选的额外的CSS类，它将在鼠标移过元素时被添加到组件上...
一个可选的额外的CSS类，它将在鼠标移过元素时被添加到组件上，鼠标移出时 删除。(默认为'')。此属性对于在组件上，或者它的任何使用标准CSS规则的孩子节点上， 添加定制的'active' 或者 'hover'样式非常有用。
Component
pageX : Number
如果该组件被包含在一个指定位置的容器中，这个值表示页面级的x坐标值（译者注：在有滚动条的情况下这个值很有用）。
BoxComponent
pageY : Number
如果该组件被包含在一个指定位置的容器中，这个值表示页面级的y坐标值（译者注：在有滚动条的情况下这个值很有用）。
BoxComponent
plugins : Object/Array
一个对象或者一个对象数组，为组件提供特殊的功能 ...
一个对象或者一个对象数组，为组件提供特殊的功能。 对一个合法的插件唯一的要求是它含有一个init()方法， 能接收一个Ext.Component型的参数。 当组件被创建时，如果有可用的插件，组件将会调用每个插件的init方法， 并将自身的引用作为方法参数传递给它。然后，每个插件就可以调用方法或者响应组件上的事件， 就像需要的那样提供自己的功能。
Component
ptype : String
需要创建配置的ptype。 当传递一个配置对象给构造函数时...
需要创建配置的ptype。 当传递一个配置对象给构造函数时，此配置选项不会被使用。 只有在使用懒初始化的时候此配置项才会被使用， 此时Plugin不是 通过一个完整的实例组件，而是通过一个Component配置指定的。 在渲染时，将会查找ptype以决定创建何种类型的Plugin。

如果你创建自己的Plugin，你可以通过 Ext.ComponentMgr.registerPlugin 对它们进行注册，以便能利用懒初始化和渲染机制。
Component
ref : String
一个路径描述，与组件的 ownerCt 相关，它描述了把当前组件的命名引用放置到哪个父容器中去。...

一个路径描述，与组件的 ownerCt 相关，它描述了把当前组件的命名引用放置到哪个父容器中去。

祖先的坐标路径可以通过'/'字符进行分隔。 例如，将一个Toolbar Button的引用放入 拥有此Toolbar的Panel中:

var myGrid = new Ext.grid.EditorGridPanel({
    title: 'My EditorGridPanel',
    store: myStore,
    colModel: myColModel,
    tbar: [{
        text: 'Save',
        handler: saveChanges,
        disabled: true,
        ref: '../saveButton'
    }],
    listeners: {
        afteredit: function() {
//          The button reference is in the GridPanel
            myGrid.saveButton.enable();
        }
    }
});

在上面的代码中，如果 ref 是 'saveButton' ，那么引用将会被放置到Toolbar中。 ref 中的每个'/' 都会从组件的 ownerCt 向上移动一级。

另请参见 added 和 removed 事件。

Component
region : String
注: 此配置只用于该组件展现在一个布局为BorderLayout的容器中...

注: 此配置只用于该组件展现在一个布局为BorderLayout的容器中(例如指定layout:'border')。

详见Ext.layout.BorderLayout。

BoxComponent
renderTo : Mixed
该值可以是一个节点的id、一个DOM节点或者一个已存在的元素...

该值可以是一个节点的id、一个DOM节点或者一个已存在的元素， 组件将会被渲染到其中。

  • 注意 :
      如果组件不是一个Container 的子项目时， 不要使用此选项。 渲染和管理它的子项目是一个Container 的layout manager的责任。
      当使用此配置项时，无需调用render()方法。

另请参见 render 。

Component
resizeEvent : String
在布局中进行尺寸调整需要监听的事件。 默认为 'resize' 。
Container
stateEvents : Array
一个事件数组，当它们被触发时，组件需要保存自己的状态(默认值为 none)...

一个事件数组，当它们被触发时，组件需要保存自己的状态(默认值为 none)。 它们可以是任何该组件支持的事件类型，包括浏览器事件和 自定义事件(例如['click', 'customerchange'])。

对于保存和恢复组件状态的详细解释，参见 stateful

Component
stateId : String
为该组件指定的唯一的id值，它被用作管理组件状态的目的...
为该组件指定的唯一的id值，它被用作管理组件状态的目的。 (如果设定了id，默认值为组件自己的id，否则，如果组件使用自动生成的id，此值为null)。

对于保存和反解析组件状态的解释，参见 stateful 。

Component
stateful : Boolean
一个标志参数，它将引起组件在启动时尝试从一个保存的状态中恢复内部状态参数...

一个标志参数，它将引起组件在启动时尝试从一个保存的状态中恢复内部状态参数。 组件必须要么拥有一个 stateId 或者 id ，它们被分配给需要被管理的状态属性。 在跨页面加载时，不保证自动生成的id属性的稳定性， 并且，不能依赖此id来保存和恢复一个组件的相同状态。

为了保存状态的操作能够工作，状态管理器的提供者必须 被设置成一个Ext.state.Provider 的实现类，它覆盖了set 和get 方法，以便保存和恢复name/value对。 有一个内置的Ext.state.CookieProvider 可用。

为当前页面设置状态提供者:

Ext.state.Manager.setProvider(new Ext.state.CookieProvider({
    expires: new Date(new Date().getTime()+(1000*60*60*24*7)), //7 days from now
}));

当 stateEvents 配置项中其中之一的事件被触发时， 一个状态可保存的组件将试图保存其状态。

保存状态时，一个可保存状态的组件首先需要通过调用 getState 方法来序列化它的状态。 默认情况下，此函数什么事都不做。 开发者必须提供一个实现，返回一个hash对象，它描述了组件可恢复的状态。

getState方法产生的值将会传递给 Ext.state.Manager.set 方法，它使用配置的 Ext.state.Provider 来保存对象，以组件的 stateId 为key，或者，如果此值（指stateId）没有指定时， 使用它的 id 作为key。

在进行构造时，一个可保存状态的组件试图通过调用 Ext.state.Manager.get方法来 恢复它的状态，传递 stateId 或者，如果此值（指stateId）没有指定时， 使用它的 id 作为参数。

结果对象被传递给 applyState 。 applyState 的默认实现只是简单地把属性拷贝到对象中， 但是开发者可以覆盖此方法以支持更多行为。

通过向 beforestaterestore, staterestore, beforestatesave 和 statesave 事件上绑定监听器，你可以在保存和恢复状态时进行额外的处理。

Component
style : String
被添加到组件元素的特定样式。 必须是按照...
被添加到组件元素的特定样式。 必须是按照 Ext.Element.applyStyles 类指定格式的合法参数值。

new Ext.Panel({
    title: 'Some Title',
    renderTo: Ext.getBody(),
    width: 400, height: 300,
    layout: 'form',
    items: [{
        xtype: 'textarea',
        style: {
            width: '95%',
            marginBottom: '10px'
        }
    },
        new Ext.Button({
            text: 'Send',
            minWidth: '100',
            style: {
                marginBottom: '10px'
            }
        })
    ]
});
Component
tabTip : String
注: 这个配置只用于当该组件作为TabPanel的一个子项目时使用...

注: 这个配置只用于当该组件作为TabPanel的一个子项目时使用。

一个String类型的innerHTML(支持html标签)，当鼠标放在该选项上的时，显示一个tooltip。为了tips能够被渲染，Ext.QuickTips.init()必须被提前调用。
BoxComponent
tpl : Mixed
一个 Ext.Template , Ext.XTemplate 或者一个用来形成一个Ext.XTemplate的字符串数组...
一个 Ext.Template , Ext.XTemplate 或者一个用来形成一个Ext.XTemplate的字符串数组。 与 data 和 tplWriteMode 配置项协同使用。
Component
tplWriteMode : String
刷新组件的内容区域时使用的Ext.(X)Template方式。 默认为'overwrite' (参见 Ext.XTemplate.overwrite )。
刷新组件的内容区域时使用的Ext.(X)Template方式。 默认为'overwrite' (参见 Ext.XTemplate.overwrite )。
Component
width : Number
组件的宽度(默认值为 auto)。注:如果想使用百分比的方式...
组件的宽度(默认值为 auto)。注:如果想使用百分比的方式来设置值，请查看 Ext.Component.anchor。
BoxComponent
x : Number
如果被包含在一个指定位置的容器中，这个值表示x(left)坐标值。
BoxComponent
xtype : String
需要创建配置的xtype。 当传递一个配置对象给构造函数时...
需要创建配置的xtype。 当传递一个配置对象给构造函数时，此配置选项不会被使用。 只有在使用懒初始化的时候此配置项才会被使用，此时容器的子项目不是 通过一个完整的实例组件，而是通过一个Component配置指定的。 在渲染时，将会查找xtype以决定创建何种类型的子组件。

预定义的xtype列表如下： here。

如果你继承Component创建你自己的组件，你需要使用Ext.ComponentMgr.registerType 对它们进行注册，以便利用懒初始化和渲染机制。
Component
y : Number
如果被包含在一个指定位置的容器中，这个值表示y(top)坐标值。
BoxComponent

公共属性

Property Defined By
disabled : Boolean
当前组件处于无效状态时为true。 Read-only.
Component
el : Ext.Element
封装了当前组件的Ext.Element。 Read-only。通常情况下，这将是一个<DIV>元素，它由此类的...

封装了当前组件的Ext.Element。 Read-only。

通常情况下，这将是一个<DIV>元素，它由此类的 onRender方法创建，但是它可以通过使用 autoEl 配置项进行覆盖。

注意: 直到组件渲染完成此元素都将处于无效状态。

如需向当前组件的 DOM事件(而不是当前组件自己的Observable事件)添加监听器， 更多建议，参见 listeners 配置项，或者直接使用一个render监听器:

new Ext.Panel({
    title: 'The Clickable Panel',
    listeners: {
        render: function(p) {
            // Append the Panel to the click handler's argument list.
            p.getEl().on('click', handlePanelClick.createDelegate(null, [p], true));
        },
        single: true  // Remove the listener after first invocation
    }
});

另请参见 getEl

Component
hidden : Boolean
如果当前组件处于隐藏状态，此值为true。Read-only。
Component
initialConfig : Object
当前组件的初始化配置描述。 Read-only。
Component
items : MixedCollection
当前容器中的子组件集合 Ext.util.MixedCollection
Container
ownerCt : Ext.Container
组件所属的Container (默认为undefined，当前组件被添加到一个容器中时此值被自动设置)...
组件所属的Container (默认为undefined，当前组件被添加到一个容器中时此值被自动设置)。 Read-only。

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

Component
private : Object
我们只能在一块可见的区域进行布局。 布局目标*或者它的任何父元素* 为...
我们只能在一块可见的区域进行布局。 布局目标*或者它的任何父元素* 为display:none， 将意味着它没有一块可见的区域。
Container
refOwner : Ext.Container
如果当前组件是一个容器的孩子，并且是通过一个 ref 配置项被注册的，则此值为 ref 引用被插入到的祖先容器。
如果当前组件是一个容器的孩子，并且是通过一个 ref 配置项被注册的，则此值为 ref 引用被插入到的祖先容器。
Component
rendered : Boolean
如果当前组件已经被渲染了，此值为true。Read-only.
Component

公共方法

Method Defined By
Toolbar ( Object/Array config )
创建一个新的Toolbar
创建一个新的Toolbar
参数:
  • config : Object/Array
    一个配置对象，或者一个需要 add 的数组
返回值:
  • void
Toolbar
add ( Mixed arg1 , Mixed arg2 , Mixed etc. ) : void
向工具条中添加元素---此函数有许多混合类型的参数，并且添加它们到工具条中...

向工具条中添加元素---此函数有许多混合类型的参数，并且添加它们到工具条中。

注意: 参见Ext.Container.add 中的注释。

参数:
  • arg1 : Mixed
    以下类型的参数都是有效的:
    • Ext.Button 配置: 一个有效的按钮配置对象(等价于 addButton)
    • HtmlElement: 任何标准HTML元素(等价于 addElement)
    • Field: 任何表单项(等价于 addField)
    • Item: 任何 Ext.Toolbar.Item的子类 (等价于 addItem)
    • String: 任何普通的字符串(被包装到一个 Ext.Toolbar.TextItem中， 等价于 addText)。 注意，有一些特殊字符串将会与普通文本区别对待。
    • '-': 创建一个分隔元素(等价于 addSeparator)
    • ' ': 创建一个空白元素(等价于 addSpacer)
    • '->': 创建一个填充元素(等价于 addFill)
  • arg2 : Mixed
  • etc. : Mixed
返回值:
  • void
Toolbar
addButton ( Object/Array config ) : Ext.Button/Array
添加按钮(或者buttons)。 对于此配置的更多信息参见 Ext.Button .
添加按钮(或者buttons)。 对于此配置的更多信息参见 Ext.Button .

注意: 参见Ext.Container.add 中的注释。

参数:
  • config : Object/Array
    一个按钮配置或者配置数组
返回值:
  • Ext.Button/Array
Toolbar
addClass ( string cls ) : Ext.Component
为组件底层的元素添加CSS样式。
为组件底层的元素添加CSS样式。
参数:
  • cls : string
    需要添加的CSS样式的class名称
返回值:
  • Ext.Component
    this
Component
addDom ( Object config ) : Ext.Toolbar.Item
使用传递的Ext.DomHelper 配置项，向工具条中添加一个新元素。注意: 参见Ext.Container.add 中的注释。
使用传递的Ext.DomHelper 配置项，向工具条中添加一个新元素。

注意: 参见Ext.Container.add 中的注释。

参数:
  • config : Object
返回值:
  • Ext.Toolbar.Item
    元素的项目
Toolbar
addElement ( Mixed el ) : Ext.Toolbar.Item
向工具条中添加任何标准的HTML元素。注意: 参见Ext.Container.add 中的注释。
向工具条中添加任何标准的HTML元素。

注意: 参见Ext.Container.add 中的注释。

参数:
  • el : Mixed
    需要添加的元素或其id
返回值:
  • Ext.Toolbar.Item
    元素项目
Toolbar
addEvents( Object|String o, string Optional. ) : void
添加指定的事件到事件列表上，事件会被该Observable触发。
添加指定的事件到事件列表上，事件会被该Observable触发。
参数:
  • o : Object|String
    以事件名作为属性true作为值的对象 或者当多个事件名被分开的传递时则为第一个事件名。
  • Optional. : string
    事件名被分开的传递时则为事件名。 用法:
    this.addEvents('storeloaded', 'storecleared');
返回值:
  • void
Observable
addField ( Ext.form.Field field ) : Ext.Toolbar.Item
添加一个动态渲染的Ext.form表单项(TextField, ComboBox, 等)。注意：表单项必须尚未被渲染...
添加一个动态渲染的Ext.form表单项(TextField, ComboBox, 等)。注意：表单项必须尚未被渲染。 对于一个已经被渲染的表单项，请使用 addElement.

注意: 参见Ext.Container.add 中的注释。

参数:
  • field : Ext.form.Field
返回值:
  • Ext.Toolbar.Item
Toolbar
addFill () : void
强制后来添加的对象被添加到float:right工具条中。 注意: 参见Ext.Container.add 中的注释。
强制后来添加的对象被添加到float:right工具条中。

注意: 参见Ext.Container.add 中的注释。

参数:
  • 无。
返回值:
  • void
Toolbar
addItem ( Ext.Toolbar.Item item ) : Ext.Toolbar.Item
添加任何Toolbar.Item或者子类。 注意: 参见Ext.Container.add 中的注释。
添加任何Toolbar.Item或者子类。

注意: 参见Ext.Container.add 中的注释。

参数:
  • item : Ext.Toolbar.Item
返回值:
  • Ext.Toolbar.Item
    item
Toolbar
addListener( String eventName, Function handler, [Object scope], [Object options] ) : void
给对象添加事件处理器。
给对象添加事件处理器。
参数:
  • eventName : String
    监听的事件名。
  • handler : Function
    事件调用的方法
  • scope : Object
    （可选）处理方法执行的作用域 (this的引用 reference)。 如果被忽略。默认为触发事件的对象。
  • options : Object
    （可选）包含处理器配置和属性的对象。 可能包含以下的属性:
    • scope : Object
      处理方法执行的作用域(this的引用) 。 如果被忽略。默认为触发事件的对象。
    • delay : Number
      在触发事件后延迟调用处理器的毫秒数。
    • single : Boolean
      如果为True则添加一个处理器来处理下一次的事件触发（仅一次），然后移除自己。
    • buffer : Number
      使得处理器延迟指定毫秒数后预定的运行在 一个Ext.util.DelayedTask中 。 如果事件在时间内再一次被触发，原始的处理器不会被调用，但是新的处理器会预定的在他的位置上。
    • target : Observable
      如果事件在目标的Observable上触发则仅仅调用处理器， 否则 事件会从子类的Observable上冒泡

    组合选项
    使用这些选项参数,可能会组合出不同类型的监听器：

    一个延迟的，一次性的监听器。

    myDataView.on('click', this.onClick, this, {
single: true,
delay: 100
});

    一次调用附加多个处理器
    该方法同样支持传递一个包含指定的多个处理器的属性的配置对象参数。

    myGridPanel.on({
'click' : {
    fn: this.onClick,
    scope: this,
    delay: 100
},
'mouseover' : {
    fn: this.onMouseOver,
    scope: this
},
'mouseout' : {
    fn: this.onMouseOut,
    scope: this
}
});

    或者一个简写的语法：

    myGridPanel.on({
'click' : this.onClick,
'mouseover' : this.onMouseOver,
'mouseout' : this.onMouseOut,
 scope: this
});
返回值:
  • void
Observable
addSeparator () : Ext.Toolbar.Item
添加一个分隔栏。 注意: 参见Ext.Container.add 中的注释。
添加一个分隔栏。

注意: 参见Ext.Container.add 中的注释。

参数:
  • 无。
返回值:
  • Ext.Toolbar.Item
    分隔栏{@link Ext.Toolbar.Item item}
Toolbar
addSpacer () : Ext.Toolbar.Spacer
添加一个空格元素。 注意: 参见Ext.Container.add 中的注释。
添加一个空格元素。

注意: 参见Ext.Container.add 中的注释。

参数:
  • 无。
返回值:
  • Ext.Toolbar.Spacer
    空格元素
Toolbar
addText ( String text ) : Ext.Toolbar.Item
向工具条中添加文本。 注意:参见Ext.Container.add 中的注释。
向工具条中添加文本。

注意:参见Ext.Container.add 中的注释。

参数:
  • text : String
    需要添加的文本
返回值:
  • Ext.Toolbar.Item
    元素的项目
Toolbar
applyToMarkup ( String/HTMLElement el ) : void
将此组件添加到已存在的有效的HTML标签中。 使用该方法时，无需再调用render()方法。
将此组件添加到已存在的有效的HTML标签中。 使用该方法时，无需再调用render()方法。
参数:
  • el : String/HTMLElement
返回值:
  • void
Component
bubble ( Function fn , [ Object scope ], [ Array args ] ) : Ext.Container
沿着component/container继承结构进行冒泡， 在每个组件上调用指定的函数。 所调用函数的作用域...
沿着component/container继承结构进行冒泡， 在每个组件上调用指定的函数。 所调用函数的作用域( this)将会是 指定的作用域或者是当前组件。 如果在函数任何一点上返回false，即停止冒泡过程
参数:
  • fn : Function
    需要调用的函数
  • scope : Object
    (可选) 函数的作用域(默认为当前节点)
  • args : Array
    (可选) 调用函数时需要传递的参数( 默认传递当前组件)
返回值:
  • Ext.Container
    this
Container
cascade ( Function fn , [ Object scope ], [ Array args ] ) : Ext.Container
从当前组件(第一个被调用的组件)开始，沿着component/container的继承树向下回溯...
从当前组件(第一个被调用的组件)开始，沿着component/container的继承树向下回溯， 在每个组件上调用指定的方法， 调用方法时的(this)作用域为指定的scope或者为当前组件。 传递给方法的参数为传递进来args或者当前组件。 在起泡的任意一个节点上，如果function返回false，即停止在那个分支上。
参数:
  • fn : Function
    需要调用的函数
  • scope : Object
    (可选)函数的作用域(默认为当前组件)
  • args : Array
    (可选) 调用函数时传递的参数 (默认传递当前组件)
返回值:
  • Ext.Container
    this
Container
cloneConfig ( Object overrides ) : Ext.Component
默认使用原先传递给当前实例的配置值克隆当前组件。
默认使用原先传递给当前实例的配置值克隆当前组件。
参数:
  • overrides : Object
    一个新的配置项，包含需要覆盖到克隆版本的所有属性。 可以传递一个id参数给此对象，否则将自动生成一个新的id以避免发生重复。
返回值:
  • Ext.Component
    当前组件的克隆副本
Component
destroy () : void
通过如下方法销毁对象：删除所有的事件监听器、将组件的元素从DOM树中删除...
通过如下方法销毁对象：删除所有的事件监听器、将组件的元素从DOM树中删除（如果可以）、 将组件从它的 Ext.Container（如果可用）中删除、 并且将它从Ext.ComponentMgr中 注销。 销毁操作一般由框架自动完成，一般情况下不需要直接调用该方法。
参数:
  • 无。
返回值:
  • void
Component
disable () : Ext.Component
将组件置为无效状态，并出发'disable'事件。
将组件置为无效状态，并出发'disable'事件。
参数:
  • 无。
返回值:
  • Ext.Component
    this
Component
doLayout ( [ Boolean shallow ], [ Boolean force ] ) : Ext.Container
强制容器的布局进行重新计算。 在向一个已经渲染的容器中添加...
强制容器的布局进行重新计算。 在向一个已经渲染的容器中添加一个新的组件， 或者改变子组件的尺寸/位置参数之后，必须调用此函数。
参数:
  • shallow : Boolean
    (可选) 设置为true时将仅仅计算当前组件的布局， 并且让子组件在需要时自动计算布局 (默认为flase，它将递归地调用每个子容器的doLayout方法)
  • force : Boolean
    (可选) 设置为true将强制进行布局，即使项目是隐藏的也进行。
返回值:
  • Ext.Container
    this
Container
enable () : Ext.Component
将组件置为有效状态并触发'enable'事件。
将组件置为有效状态并触发'enable'事件。
参数:
  • 无。
返回值:
  • Ext.Component
    this
Component
enableBubble( String/Array events ) :void
是否现在使得事件会被该Observable触发并调用 this.getBubbleTarget()方法在拥有者的继承树...

是否现在使得事件会被该Observable触发并调用 this.getBubbleTarget()方法在拥有者的继承树中冒泡。Observable的基础类中没有该方法的实现。

该方法一般被Ext.Components用来冒泡事件到拥有者的容器。参看Ext.Component.getBubbleTarget默认的实现 在Ext.Component中返回组件的直接拥有者。但是如果需要的是一个已知的目标，该方法可以被重写来更快的访问需求的目标。

例子:

Ext.override(Ext.form.Field, {
    // 添加方法到Field的initComponent上改变事件为冒泡
    initComponent : Ext.form.Field.prototype.initComponent.createSequence(function() {
        this.enableBubble('change');
    }),

    // 我们知道我们想让Field的事件冒泡到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() {
            // 如果样式被修改标题会变红。
            myForm.header.setStyle('color', 'red');
        }
    }
});
参数:
  • events : String/Array
    冒泡的事件名，或事件名数组
返回值:
  • void
Observable
find ( String prop , String value ) : Array
根据属性查找当前容器中任何层次上的组件
根据属性查找当前容器中任何层次上的组件
参数:
  • prop : String
  • value : String
返回值:
  • Array
    Ext.Component数组
Container
findBy ( Function fn , [ Object scope ] ) : Array
根据一个自定义的函数，查找当前容器中任意层级上的一个组件。 如果传递的函数返回true...
根据一个自定义的函数，查找当前容器中任意层级上的一个组件。 如果传递的函数返回true，组件将会被包含在结果中。 函数将会被用如下参数(component, this container)进行调用。
参数:
  • fn : Function
    需要调用的函数
  • scope : Object
    可选
返回值:
  • Array
    Ext.Component数组
Container
findById ( String id ) : Ext.Component
通过id查找容器中位于任何层级上的组件
通过id查找容器中位于任何层级上的组件
参数:
  • id : String
返回值:
  • Ext.Component
Container
findByType ( String/Class xtype , [ Boolean shallow ] ) : Array
根据xtype或者类型，查找当前容器中任何层级上的组件
根据xtype或者类型，查找当前容器中任何层级上的组件
参数:
  • xtype : String/Class
    组件的xtype字符串，或者直接是组件的class类型
  • shallow : Boolean
    (可选) 此参数为flase时将检查当前组件是否是指定xtype的后裔 (这是默认情况)，或者设置为true， 将检查当前组件是否直接是指定xtype类型（译者注：即指不按照多态性进行检查）。
返回值:
  • Array
    Ext.Component数组
Container
findParentBy ( Function fn ) : Ext.Container
通过自定义的函数查找当前组件上层任何层次上的容器...
通过自定义的函数查找当前组件上层任何层次上的容器。 如果传递的函数返回true，容器对象将被返回。
参数:
  • fn : Function
    自定义的函数，使用如下参数调用(container,this component)。
返回值:
  • Ext.Container
    自定义函数返回true的第一个容器
Component
findParentByType ( String/Class xtype ) : Ext.Container
通过xtype或者class查找当前组件上层任何层次上的容器
通过xtype或者class查找当前组件上层任何层次上的容器
参数:
  • xtype : String/Class
    组件的xtype字符串，或者直接是组件的class
返回值:
  • Ext.Container
    符合指定xtype或者class的第一个容器
Component
fireEvent( String eventName, Object... args ) : Boolean
用传入的参数触发指定的事件 (减去事件名)。 一个事件可以被设置为冒泡 Obse...

用传入的参数触发指定的事件 (减去事件名)。

一个事件可以被设置为冒泡到Observable父类继承树(参看 Ext.Component.getBubbleTarget) 调用enableBubble实现。

参数:
  • eventName : String
    触发的事件名。
  • args : Object...
    传递给处理器的可变长度参数。
返回值:
  • Boolean
    如果有任何的处理器返回false则返回false，否则返回true。
Observable
focus ( [ Boolean selectText ], [ Boolean/Number delay ] ) : Ext.Component
尝试将当前组件设为焦点。
尝试将当前组件设为焦点。
参数:
  • selectText : Boolean
    (可选) 如果可用，同时选中组件内部的文本
  • delay : Boolean/Number
    (可选)将当前组件设置为焦点的延迟时间(设置为true等于0毫秒)
返回值:
  • Ext.Component
    this
Component
get ( String/Number key ) : Ext.Component
获取当前容器包含的一个组件( items.get(key)方法的别名)
获取当前容器包含的一个组件( items.get(key)方法的别名)
参数:
  • key : String/Number
    组件的索引
返回值:
  • Ext.Component
    Ext.Component
Container
getBox ( [ Boolean local ] ) : Object
获取组件底层元素当前盒子模型的尺寸。（译者注：盒子模型是CSS术语，详细解释请自行搜索。）
获取组件底层元素当前盒子模型的尺寸。（译者注：盒子模型是CSS术语，详细解释请自行搜索。）
参数:
  • local : Boolean
    (可选)值为true时，组件的left值和top值将代替页面的XY被返回。(默认值为false)
返回值:
  • Object
    返回值的格式{x, y, width, height}
BoxComponent
getBubbleTarget () : Ext.Container
为Observable的fireEvent方法提供链接，它沿着继承结构进行冒泡操作。
为Observable的fireEvent方法提供链接，它沿着继承结构进行冒泡操作。
参数:
  • 无。
返回值:
  • Ext.Container
    拥有当前组件的容器。
Component
getComponent ( String/Number comp ) : Ext.Component
检查当前容器的 items property 并且获取当前容器的一个直接的子组件。
检查当前容器的 items property 并且获取当前容器的一个直接的子组件。
参数:
  • comp : String/Number
    参数可以是以下任何值：
    • 一个 String : 代表子组件的 itemId 或者 id
    • 一个 Number : 代表子组件在 items property 中的位置

    其它信息参见 Ext.util.MixedCollection.get。

返回值:
  • Ext.Component
    组件(如果有找到)。
Container
getEl () : Ext.Element
返回 Ext.Element ，它包装了当前组件。...

返回 Ext.Element ，它包装了当前组件。

通常情况下，这将是一个<DIV>元素，它是由该类的onRender方法创建的， 但是可以使用autoEl配置项 覆盖它。

注意: 此元素将会一直处于无效状态直到当前组件渲染完成。

如需向当前组件的 DOM事件(而不是当前组件自己的Observable事件)添加监听器， 更多建议，参见 listeners 配置项，或者直接使用一个render监听器:

new Ext.Panel({
    title: 'The Clickable Panel',
    listeners: {
        render: function(p) {
            // Append the Panel to the click handler's argument list.
            p.getEl().on('click', handlePanelClick.createDelegate(null, [p], true));
        },
        single: true  // Remove the listener after first invocation
    }
});
参数:
  • 无。
返回值:
  • Ext.Element
    包装当前组件的元素。
Component
getHeight () : Number
获取该组件的当前高度值。
获取该组件的当前高度值。
参数:
  • 无。
返回值:
  • Number
BoxComponent
getId () : String
返回当前组件的id，如果没有定义id，则自动生成并返回一个id:'ext-comp-'...
返回当前组件的 id 如果没有定义 id 则自动生成并返回一个 id

'ext-comp-' + (++Ext.Component.AUTO_ID)
参数:
  • 无。
返回值:
  • String
    id
Component
getItemId () : String
返回当前组件的 itemId 。 如果没有通过配置参数指定 itemId 那么，将会使用...
返回当前组件的 itemId 。 如果没有通过配置参数指定 itemId 那么，将会使用 getId 返回 id 。
参数:
  • 无。
返回值:
  • String
Component
getLayout () : ContainerLayout
返回容器当前使用的布局管理器。 如果容器当前没有设置布局管理器， 将会创建一个默认的...
返回容器当前使用的布局管理器。 如果容器当前没有设置布局管理器， 将会创建一个默认的 Ext.layout.ContainerLayout 并被设置为容器的布局管理器。
参数:
  • 无。
返回值:
  • ContainerLayout
    容器的布局管理器
Container
getLayoutTarget () : Ext.Element
返回当前容器中用来包含子组件的元素。提供了一个 可以返回容器的...

返回当前容器中用来包含子组件的元素。

提供了一个 可以返回容器的Element 的实现， 但是，如果容器有更复杂的结构， 可以覆盖此实现以返回 layout 在其中渲染子组件的元素。

参数:
  • 无。
返回值:
  • Ext.Element
    在其中渲染子组件的元素。
Container
getOuterSize () : Object
获取当前组件所在元素的尺寸大小，包括边缘的空白处。
获取当前组件所在元素的尺寸大小，包括边缘的空白处。
参数:
  • 无。
返回值:
  • Object
    一个包含元素大小的对象 {width: (element width + left/right margins), height: (element height + top/bottom margins)}
BoxComponent
getPosition ( [ Boolean local ] ) : Array
获取组件底层元素当前的XY位置。
获取组件底层元素当前的XY位置。
参数:
  • local : Boolean
    (可选)如果为true，将返回元素的left和top值，而不是相对于页面内的 XY。(默认值为 false)
返回值:
  • Array
    元素的XY位置值(例如：[100, 200])
BoxComponent
getResizeEl () : Ext.Element
返回该组件的最外层用来定义这些组件整体大小的Element...

返回该组件的最外层用来定义这些组件整体大小的Element对象。

通常用 getEl 方法将会返回相同的Element对象，但在有些情况下，组件可能有一些更多的封装了它的主要动态Element对象的Element对象。

例如ComboBox。它是封装在一个包含<input>元素的包装元素里(这将返回其 getEl方法和触发按钮的元素)。返回的元素为resizeEl。

参数:
  • 无。
返回值:
  • Ext.Element
    The Element which is to be resized by size managing layouts.
BoxComponent
getSize () : Object
获取组件底层元素当前的大小。
获取组件底层元素当前的大小。
参数:
  • 无。
返回值:
  • Object
    一个包含元素大小的对象{width: (element width), height: (element height)}
BoxComponent
getWidth () : Number
获取该组件的当前宽度值。
获取该组件的当前宽度值。
参数:
  • 无。
返回值:
  • Number
BoxComponent
getXType () : String
获取当前组件的xtype，它是用 Ext.ComponentMgr 注册的。 所有可用的xtype列表，参见...
获取当前组件的xtype，它是用 Ext.ComponentMgr 注册的。 所有可用的xtype列表，参见 Ext.Component 类头部。示例用法:

var t = new Ext.form.TextField();
alert(t.getXType());  // alerts 'textfield'
参数:
  • 无。
返回值:
  • String
    The xtype
Component
getXTypes () : String
返回此组件的xtype继承树，用字符'-'分隔。 所有可用的xtype值...

返回此组件的xtype继承树，用字符'-'分隔。 所有可用的xtype值，请参见Ext.Component 类的头部。

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

示例用法:

var t = new Ext.form.TextField();
alert(t.getXTypes());  // alerts 'component/box/field/textfield'
参数:
  • 无。
返回值:
  • String
    xtype层次字符串
Component
hasListener( String eventName ) : Boolean
检测对象是否包含指定事件的任何监听器
检测对象是否包含指定事件的任何监听器
参数:
  • eventName : String
    检测的事件名
返回值:
  • Boolean
    如果事件被监听则为true，否则为false
Observable
hide () : Ext.Component
隐藏当前组件。 监听 beforehide' 事件并且返回false 可以取消隐藏组件的操作。 在隐藏组件之后触发...
隐藏当前组件。 监听 beforehide' 事件并且返回false 可以取消隐藏组件的操作。 在隐藏组件之后触发 ' hide' 事件。 如果组件被配置成 hidden 那么此方法在内部被调用。
参数:
  • 无。
返回值:
  • Ext.Component
    this
Component
insert ( Number index , Ext.Component component ) : Ext.Component
在当前容器的指定索引处插入一个组件。 在插入之前触发...
在当前容器的指定索引处插入一个组件。 在插入之前触发 beforeadd 事件， 然后在组件被插入之后触发 add 事件。
参数:
  • index : Number
    组件会被插入到容器子项集合中时的索引位置
  • component : Ext.Component
    需要插入的子组件。

    Ext使用懒渲染，只有在必要的时候才会渲染插入的组件。

    如果使用懒渲染，可以传递一个组件配置对象以避免创建一个真实组件的开销， 这意味着，插入的组件不会立即被渲染。 为了利用这个“懒初始化”('lazy instantiation')， 必须把组件设置为它注册的 Ext.Component.xtype 值。

    所有可用的xtype列表，参见 Ext.Component。
返回值:
  • Ext.Component
    使用容器默认配置值插入的组件(或者配置对象)。
Container
insertButton ( Number index , Object/Ext.Toolbar.Item/Ext.Button/Array item ) : Ext.Button/Item
在指定的位置插入任何 Ext.Toolbar.Item/ Ext.Button. 注意: 参见Ext.Container.add 中的注释。
在指定的位置插入任何 Ext.Toolbar.Item/ Ext.Button.

注意: 参见Ext.Container.add 中的注释。

参数:
  • index : Number
    项目被插入的索引位置
  • item : Object/Ext.Toolbar.Item/Ext.Button/Array
    需要被插入的按钮或者按钮配置对象，或者一个 buttons/configs数组。
返回值:
  • Ext.Button/Item
Toolbar
isVisible () : Boolean
如果当前组件可见，返回true。
如果当前组件可见，返回true。
参数:
  • 无。
返回值:
  • Boolean
    如果当前组件可见，返回true，其它返回false。
Component
isXType ( String xtype , [ Boolean shallow ] ) : Boolean
Tests whether or not this Component is of a specific xtype. This can test whether this Component is descended from th...

测试此组件是否是指定的xtype。此方法既可以测试是否是指定的xtype的某个子类， 或者它是否直接是指定的xtype类(shallow=true)。

如果使用你自己的子类，必须知道组件必须注册它的xtype值。

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

示例用法:

var t = new Ext.form.TextField();
var isText = t.isXType('textfield');        // true
var isBoxSubclass = t.isXType('box');       // true, descended from BoxComponent
var isBoxInstance = t.isXType('box', true); // false, not a direct BoxComponent instance
参数:
  • xtype : String
    需要为当前组件进行检测的xtype
  • shallow : Boolean
    (可选) 如果为false，检测组件是否是xtype继承树中的某个子类（默认是这种情况）， 如果为true，只检测组件是否是指定的xtype类型。
返回值:
  • Boolean
    如果当前组件是指定xtype的子类，返回true，其它返回flase。
Component
mon ( Observable|Element item , Object|String ename , Function fn , Object scope , Object opt ) : void
向任何Observable对象(或者元素)上添加监听器，监听器将会在组件...

向任何Observable对象(或者元素)上添加监听器，监听器将会在组件销毁时被自动删除。
用法：

myGridPanel.mon(myGridPanel.getSelectionModel(), 'selectionchange', handleSelectionChange, null, {buffer: 50});

or:

myGridPanel.mon(myGridPanel.getSelectionModel(), {
    selectionchange: handleSelectionChange,
    buffer: 50
});
参数:
  • item : Observable|Element
    需要添加listener/listeners的项目。
  • ename : Object|String
    事件名，或者一个包含事件名属性的对象。
  • fn : Function
    (可选) 如果 ename 参数是一个事件名，此参数为处理函数。
  • scope : Object
    (可选)如果 ename 参数是一个事件名称，此参数是作用域 ( this 引用)，监听函数将会在此作用域中被执行。
  • opt : Object
    (可选)如果 ename 参数是一个事件名称， 此参数是 addListener 配置项。
返回值:
  • void
Component
mun ( Observable|Element item , Object|String ename , Function fn , Object scope ) : void
删除通过mon 方法添加的监听器。
删除通过mon 方法添加的监听器。
参数:
  • item : Observable|Element
    需要删除listener/listeners的项目。
  • ename : Object|String
    事件名称，或者一个包含事件名称属性的对象。
  • fn : Function
    (可选)如果 ename 参数是一个事件名称，此参数是一个处理函数。
  • scope : Object
    (可选)如果 ename 参数是一个事件名称，此参数是作用域 ( this 引用)，监听函数将会在此作用域中被执行。
返回值:
  • void
Component
nextSibling () : Ext.Component
返回所属容器中的下一个组件
返回所属容器中的下一个组件
参数:
  • 无。
返回值:
  • Ext.Component
Component
on( String eventName, Function handler, [Object scope], [Object options] ) : void
给对象添加事件处理器 (addListener的简写形式)
给对象添加事件处理器 (addListener的简写形式。)
参数:
  • eventName : String
    监听的事件类型
  • handler : Function
    事件调用的方法
  • scope : Object
    （可选）处理方法执行时的作用域 (this 的引用)。 如果被忽略。默认为触发事件的对象。
  • options : Object
    可选 包含处理器配置的对象。
返回值:
  • void
Observable
previousSibling () : Ext.Component
返回所属容器中的前一个组件
返回所属容器中的前一个组件
参数:
  • 无。
返回值:
  • Ext.Component
Component
purgeListeners() : void
移除对象上所有的监听器
移除对象上所有的监听器
参数:
  • 无。
返回值:
  • void
Observable
relayEvents( Object o, Array events ) : void
从指定的Observable上传递选择的事件就好像被当前对象触发一样。
从指定的Observable上传递选择的事件就好像被当前对象触发一样。
参数:
  • o : Object
    该Observable上的事件被当前对象传递。
  • events : Array
    传递的数组名。
返回值:
  • void
Observable
remove ( Component/String component , [ Boolean autoDestroy ] ) : Ext.Component
从当前容器中移除一个组件。 在移除之前触发 beforeremove 事件， 然后在组件被移除之后触发...
从当前容器中移除一个组件。 在移除之前触发 beforeremove 事件， 然后在组件被移除之后触发 remove 事件。
参数:
  • component : Component/String
    需要移除的组件引用或者id
  • autoDestroy : Boolean
    (可选) 设置为true将自动调用被删组件的 Ext.Component.destroy 函数。 默认为容器的 autoDestroy 配置值。
返回值:
  • Ext.Component
    被移除的组件。
Container
removeAll ( [ Boolean autoDestroy ] ) : Array
从当前容器中删除所有组件。
从当前容器中删除所有组件。
参数:
  • autoDestroy : Boolean
    (可选) 此参数为true时将自动调用 被删组件的 Ext.Component.destroy 方法。 默认为当前容器的 autoDestroy 配置值。
返回值:
  • Array
    被销毁的组件数组
Container
removeClass ( string cls ) : Ext.Component
从组件底层的元素上删除一个CSS类。
从组件底层的元素上删除一个CSS类。
参数:
  • cls : string
    需要移除的CSS类名
返回值:
  • Ext.Component
    this
Component
removeListener( String eventName, Function handler, [Object scope] ) : void
删除一个事件处理器。
删除一个事件处理器。
参数:
  • eventName : String
    处理器关联的事件类型。
  • handler : Function
    移除的处理器。 这应该是传递到addListener里的方法的引用。
  • scope : Object
    （可选）处理器指定的初始作用域。
返回值:
  • void
Observable
render ( [ Element/HTMLElement/String container ], [ String/Number position ] ) : void
在传递进来的HTML元素中渲染当前组件。...

在传递进来的HTML元素中渲染当前组件。

如果你正在使用一个Container 对象放置当前组件，那么请不要使用render方法。

当容器第一次被渲染时，它的子组件将会被容器的 layout 管理器渲染。

某些布局管理器允许动态添加子组件。它们包括 Ext.layout.CardLayout, Ext.layout.AnchorLayout, Ext.layout.FormLayout, Ext.layout.TableLayout。

当一个新的子组件被添加时，如果容器已经被渲染了， 你可能需要调用容器的 doLayout 方法来刷新视图，它将导致所有没有被渲染的子组件进行渲染操作。 此操作是必须的，这样你可以添加多个子组件而只刷新一次layout。

当创建复杂的UI时，非常重要的一点是，请记住调整子项目的尺寸和位置是容器的 layout 管理器的职责。 如果你希望子项目的尺寸对用户交互作出反应， 你必须为容器配置一个布局管理器，它将创建和管理你心里想要的那种布局。

忽略容器的layout 配置意味着将会使用一个基本的布局管理器，它除了按次序把子组件 渲染到容器中之外什么事情都不做。 这种情况下，任何尺寸和位置的调整操作都不会发生。

参数:
  • container : Element/HTMLElement/String
    (可选) 需要在其中渲染当前组件的元素。 如果它是从一个已存在的标签中创建的，此参数应该被忽略。
  • position : String/Number
    (可选) 容器中的一个元素ID或者一个DOM节点索引， 当前组件将会被插入到它前面 (默认append到容器的尾部)
返回值:
  • void
Component
resumeEvents() : void
重新开始触发事件。(参见suspendEvents) 如果事件以queueSuspended参数被挂起，则在事件被挂起时 ...
重新开始触发事件。(参见 suspendEvents) 如果事件以queueSuspended 参数被挂起，则在事件被挂起时触发的事件会被传递到所有的监听器上
参数:
  • 无。
返回值:
  • void
Observable
setAutoScroll ( Boolean scroll ) : Ext.BoxComponent
设置该组件内容溢出时是否自动显示滚动条。
设置该组件内容溢出时是否自动显示滚动条。
参数:
  • scroll : Boolean
    值为true的话组件自动显示滚动条。
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setDisabled ( Boolean disabled ) : Ext.Component
工具函数，使用布尔值设置有效/无效(disabled/enabled )。
工具函数，使用布尔值设置有效/无效(disabled/enabled )。
参数:
  • disabled : Boolean
返回值:
  • Ext.Component
    this
Component
setHeight ( Mixed height ) : Ext.BoxComponent
设置此组件的高度。该方法将触发resize事件。
设置此组件的高度。该方法将触发resize事件。
参数:
  • height : Mixed
    The new height to set.
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setPagePosition ( Number x , Number y ) : Ext.BoxComponent
设置组件在页面中的XY位置。 如果需要设置left和top值 ，请使用...
设置组件在页面中的XY位置。 如果需要设置left和top值 ，请使用setPosition方法。 该方法触发move事件。
参数:
  • x : Number
    The new x position
  • y : Number
    The new y position
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setPosition ( Number left , Number top ) : Ext.BoxComponent
设置组件的left和top值。设置组件的页面XY值，请使用setPagePosition方法。该方法触发...
设置组件的left和top值。设置组件的页面XY值，请使用setPagePosition方法。该方法触发move事件。
参数:
  • left : Number
    The new left
  • top : Number
    The new top
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setSize ( Mixed width , Mixed height ) : Ext.BoxComponent
设置BoxComponent的宽度和高度。 此方法触发resize事件...
设置BoxComponent的宽度和高度。 此方法触发resize事件。此方法可以接收单独的width或者height值作为参数， 或者你可以传递像这样的一个size对象： {width:10, height:20} 。
参数:
  • width : Mixed
    设置的新的width值。这可以是：
    • 一个Number类型指定Element新的宽度 Ext.Element.defaultUnit(默认为像素 :'px')。
    • 一个String类型用于设置width的CSS样式。
    • 一个size对象格式为 {width: widthValue, height: heightValue} 。
    • 值为 undefined 时，保留原来的width不变。
  • height : Mixed
    设置的新的height值(如果第一个参数传递了一个size对象，此参数没有必要传递)。这可以是：
    • 一个Number类型指定Element新的高度 Ext.Element.defaultUnit(默认为像素 :'px')。
    • 一个String类型用于设置height的CSS样式。也有可能不会被使用到。
    • 值为 undefined 时，保留原来的height不变。
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setVisible ( Boolean visible ) : Ext.Component
工具方法，通过使用布尔值隐藏或者显示当前组件。
工具方法，通过使用布尔值隐藏或者显示当前组件。
参数:
  • visible : Boolean
    true时显示，false时隐藏
返回值:
  • Ext.Component
    this
Component
setWidth ( Mixed width ) : Ext.BoxComponent
设置组件的宽度。 此方法触发resize事件。
设置组件的宽度。 此方法触发resize事件。
参数:
  • width : Mixed
    The new width to set.
返回值:
  • Ext.BoxComponent
    this
BoxComponent
show () : Ext.Component
显示当前组件。监听' beforeshow' 事件，返回 false 取消显示组件...
显示当前组件。监听' beforeshow' 事件，返回 false 取消显示组件。在显示组件之后触发' show' 事件。
参数:
  • 无。
返回值:
  • Ext.Component
    this
Component
suspendEvents( Boolean queueSuspended ) : void
暂停触发所有的事件。 (参看resumeEvents)
暂停触发所有的事件。（参看 resumeEvents)
参数:
  • queueSuspended : Boolean
    如果传递为true则排列好暂停的事件使得在调用 resumeEvents 后再触发它们，而不是抛弃所有暂停的事件。
返回值:
  • void
Observable
syncSize () : Ext.BoxComponent
强制组件的大小按照此组件底层元素当前的高度和宽度计算。
强制组件的大小按照此组件底层元素当前的高度和宽度计算。
参数:
  • 无。
返回值:
  • Ext.BoxComponent
    this
BoxComponent
un( String eventName, Function handler, [Object scope] ) : void
删除一个事件处理器(removeListener方法的简写形式)
删除一个事件处理器(removeListener方法的简写形式。)
参数:
  • eventName : String
    处理器关联的事件类型
  • handler : Function
    被删除的处理器 这应该是传入 addListener 中的方法的引用。
  • scope : Object
    （可选）为处理器指定的初始作用域。
返回值:
  • void
Observable
update ( Mixed htmlOrData , [ Boolean loadScripts ], [ Function callback ] ) : void
刷新组件的内部区域。
刷新组件的内部区域。
参数:
  • htmlOrData : Mixed
    如果已经通过tpl为当前组件配置了一个模板，那么 将会使用此参数来装配模板。 如果没有为当前组件配置模板，组件的内容区域将会通过Ext.Element 进行刷新。
  • loadScripts : Boolean
    (可选)只用在使用html配置时此参数才合法。默认为false。
  • callback : Function
    (可选)只用在使用html配置时此参数才合法。 当脚本加载完成时回调函数才被执行。
返回值:
  • void
Component
updateBox ( Object box ) : Ext.BoxComponent
设置此组件底层元素的盒子模型尺寸。(译者注：盒子模型是CSS术语，详细资料请自行搜索。)
设置此组件底层元素的盒子模型尺寸。(译者注：盒子模型是CSS术语，详细资料请自行搜索。)
参数:
  • box : Object
    一个格式为{x, y, width, height}的对象
返回值:
  • Ext.BoxComponent
    this
BoxComponent

公共事件

Event Defined By
add : ( Ext.Container this , Ext.Component component , Number index )
监听器将会被使用如下的参数被调用:
  • this : Ext.Container
  • component : Ext.Component
    被添加的组件
  • index : Number
    将组件添加到容器子组件集合时的位置索引
Container
added : ( Ext.Component this , Ext.Container ownerCt , number index )
当一个组件被添加到一个Ext.Container时触发
当一个组件被添加到一个Ext.Container时触发
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • ownerCt : Ext.Container
    用于组件的容器
  • index : number
    添加组件的位置
Component
afterlayout : ( Ext.Container this , ContainerLayout layout )
当容器中的组件被指定的布局管理器排列的时候触发。
当容器中的组件被指定的布局管理器排列的时候触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Container
  • layout : ContainerLayout
    为当前容器提供的ContainerLayout实现
Container
afterrender : ( Ext.Component this )
在组件渲染完成之后触发...

在组件渲染完成之后触发。

afterrender事件在当前组件被rendered 结束之后、在为组件定义的所有afterRender方法执行之后 触发，并且，如果有stateful， 也在状态被保存之后才触发。

监听器将会以如下参数格式被调用:
  • this : Ext.Component
Component
beforeadd : ( Ext.Container this , Ext.Component component , Number index )
在任何 Ext.Component 被添加或者插入到容器中之前触发。 事件处理器可以返回false取消添加操作。
在任何 Ext.Component 被添加或者插入到容器中之前触发。 事件处理器可以返回false取消添加操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Container
  • component : Ext.Component
    被添加的组件
  • index : Number
    组件被添加到容器子项目集合中时的索引位置
Container
beforedestroy : ( Ext.Component this )
在组件 destroyed 之前触发。 在事件监听器中返回false以停止 destroy 操作。
在组件 destroyed 之前触发。 在事件监听器中返回false以停止 destroy 操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforehide : ( Ext.Component this )
在调用hide方法隐藏组件之前触发。 在事件监听器中返回false可以停止隐藏操作。
在调用hide方法隐藏组件之前触发。 在事件监听器中返回false可以停止隐藏操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforeremove : ( Ext.Container this , Ext.Component component )
从容器中删除任何Ext.Component 之前触发。 处理器可以返回false取消remove操作。
从容器中删除任何Ext.Component 之前触发。 处理器可以返回false取消remove操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Container
  • component : Ext.Component
    被删除的组件
Container
beforerender : ( Ext.Component this )
在组件被rendered 之前触发。 在事件监听器中返回false可以停止render 操作。
在组件被rendered 之前触发。 在事件监听器中返回false可以停止render 操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforeshow : ( Ext.Component this )
在调用show()方法现实组件之前触发。 事件处理函数返回false可以停止show。
在调用show 方法现实组件之前触发。 事件处理函数返回false可以停止show。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforestaterestore : ( Ext.Component this , Object state )
在组件状态恢复之前触发。返回false停止恢复状态操作。
在组件状态恢复之前触发。返回false停止恢复状态操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    StateProvider返回的状态哈希值。 如果没有禁止此事件，那么状态对象会被传递给applyState。 默认情况下，这样简单地把属性值拷贝到当前组件中。 可以覆盖此方法以提供自定的状态恢复操作。
Component
beforestatesave : ( Ext.Component this , Object state )
在组件状态被保存到配置的状态提供者之前触发。 返回false可以停止保存。
在组件状态被保存到配置的状态提供者之前触发。 返回false可以停止保存。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    状态值哈希。 这由在组件上调用getState() 方法决定。 此方法必须由开发者提供，返回是否需要对状态进行描述，默认情况下， Ext.Component有一个空实现。
Component
destroy : ( Ext.Component this )
在组件被销毁之后触发。
在组件被destroyed之后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
disable : ( Ext.Component this )
在组件被设置为无效状态后触发。
在组件被设置为无效状态后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
enable : ( Ext.Component this )
当组件被设置为有效(enabled)之后触发。
当组件被设置为有效(enabled)之后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
hide : ( Ext.Component this )
在组件被隐藏之后触发。 当调用hide 方法隐藏组件之后触发。
在组件被隐藏之后触发。 当调用hide 方法隐藏组件之后触发。
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
move : ( Ext.Component this , Number x , Number y )
在组件移动之后触发。
在组件移动之后触发。
监听器将会用如下的参数格式来调用:
  • this : Ext.Component
  • x : Number
    The new x position
  • y : Number
    The new y position
BoxComponent
overflowchange : ( Object c , Boolean lastOverflow )
在溢出状态被改变之后触发。
在溢出状态被改变之后触发。
监听器将会以如下参数格式被调用:
  • c : Object
    Container
  • lastOverflow : Boolean
    溢出状态
Toolbar
remove : ( Ext.Container this , Ext.Component component )
监听器将会以如下的参数格式被调用:
  • this : Ext.Container
  • component : Ext.Component
    被删除的组件
Container
removed : ( Ext.Component this , Ext.Container ownerCt )
当一个组件被从Ext.Container容器中删除时触发
当一个组件被从Ext.Container容器中删除时触发
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • ownerCt : Ext.Container
    持有组件的容器
Component
render : ( Ext.Component this )
在组件被渲染之后触发。
在组件被 rendered(渲染) 之后触发。
监听器将以如下的参数格式被调用:
  • this : Ext.Component
Component
resize : ( Ext.Component this , Number adjWidth , Number adjHeight , Number rawWidth , Number rawHeight )
在组件被调整大小之后触发。
在组件被调整大小之后触发。
监听器将以如下的参数格式被调用:
  • this : Ext.Component
  • adjWidth : Number
    这是width调整后的值
  • adjHeight : Number
    这是height调整后的值
  • rawWidth : Number
    这是width原来的值
  • rawHeight : Number
    这是height原来的值
BoxComponent
show : ( Ext.Component this )
在调用show 方法显示组件之后触发。
在调用show 方法显示组件之后触发。
监听器将会用如下的参数格式被调用:
  • this : Ext.Component
Component
staterestore : ( Ext.Component this , Object state )
组件状态被存储之后触发。
组件状态被存储之后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    StateProvider返回的状态哈希值。 如果没有禁止此事件，那么状态对象会被传递给applyState。 默认情况下，这样简单地把属性值拷贝到当前组件中。 可以覆盖此方法以提供自定的状态恢复操作。
Component
statesave : ( Ext.Component this , Object state )
在组件状态被保存到所配置的状态提供者之后触发。
在组件状态被保存到所配置的状态提供者之后触发。
监听器将会用如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    状态值hash。 这是由在足见上调用getState() 方法决定的。 开发者必须提供此方法以返回是否需要恢复状态，默认情况下， Ext.Component有一个空实现。
Component


Observable
    Component
      BoxComponent
        Toolbar.Item

Class Ext.Toolbar.Item

包: | Ext
定义类的文件: | Toolbar.js
类: | Toolbar.Item
子类: | Toolbar.Separator, Toolbar.Spacer, Toolbar.TextItem
继承自: | BoxComponent
一个基类，其它非交互工具栏项目类应该继承此类，以获得工具栏项目的一些基本功能。

配置项

Config Options Defined By
allowDomMove : Boolean
在渲染时组件是否可以移动Dom节点(默认为true)。
Component
anchor : String
注: 这个配置只用于该组件被包含在一个已使用AnchorLayout...

注: 这个配置只用于该组件被包含在一个已使用 AnchorLayout (或者其子类)配置的Container时。 基于布局管理器，例如：

  • Ext.form.FormPanel
  • 指定 layout: 'anchor' // or 'form', or 'absolute'

参见 Ext.layout.AnchorLayout. anchor 。

BoxComponent
applyTo : Mixed
指定一个元素的id、一个DOM元素或者一个已经存在并被渲染到DIV中的元素，此DIV已经被...

指定一个元素的id、一个DOM元素或者一个已经存在并被渲染到DIV中的元素，此DIV已经被 渲染到document中，并且为当前组件指定了一些结构化的标签。

  • 描述 :
      当使用了 applyTo， 在主元素中也可以用id或者CSS类名来指定组件的托管部分， 并且，如果可以的话，创建的组件可能也会试图在那个标签中创建它的子组件。
  • 注意 :
      当使用此配置项时，无需调用render()方法。
      如果指定了applyTo属性，任何传递给 renderTo 的值都会被忽略，并且目标元素的父节点将会自动被用作组件的容器。
Component
autoEl : Mixed
一个表签名或者一个 DomHelper 描述，用来创建 Element ，它将封装当前组件...

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

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

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

{
    xtype: 'box',
    autoEl: {
        tag: 'img',
        src: 'http://www.example.com/example.jpg'

    }
}, {
    xtype: 'box',
    autoEl: {
        tag: 'blockquote',
        html: 'autoEl is cool!'
    }
}, {
    xtype: 'container',
    autoEl: 'ul',
    cls: 'ux-unordered-list',
    items: {
        xtype: 'box',
        autoEl: 'li',
        html: 'First list item'
    }
}
Component
autoHeight : Boolean
如果值为true，height配置项为'auto'，否则值为false的话使用固定的高度...

如果值为true，height配置项为'auto'，否则值为false的话使用固定的高度， 或者可以由其父类容器 layout manager来控制。(默认值为 false)。

注: 虽然很多组件继承了这个配置选项，但不是所有这些组件的自适应高度配置都会像期望的那样起作用。 设置autoHeight：值为true时，浏览器将根据元素的内容自动设置高度，这将意味着Ext不会去管理高度。

如果是由浏览器来管理高度，需要注意的是，通过浏览器进行调整的结构组件内不能被发现， 因此宽度的变化可能导致需要进行同步处理元素的高度。 例如：

var w = new Ext.Window({
    title: 'Window',
    width: 600,
    autoHeight: true,
    items: {
        title: 'Collapse Me',
        height: 400,
        collapsible: true,
        border: false,
        listeners: {
            beforecollapse: function() {
                w.el.shadow.hide();
            },
            beforeexpand: function() {
                w.el.shadow.hide();
            },
            collapse: function() {
                w.syncShadow();
            },
            expand: function() {
                w.syncShadow();
            }
        }
    }
}).show();
BoxComponent
autoScroll : Boolean
如果值为true，将会在该元素上使用overflow:'auto'配置，并且在必要的时候...
如果值为true，将会在该元素上使用overflow:'auto'配置，并且在必要的时候自动显示滚动条，否则，溢出部分的组件都会被切除(默认值为 false)。
BoxComponent
autoShow : Boolean
如果组件需要检测隐藏CSS属性(如 'x-hidden' 或者 'x-hide-display')并且在渲染时删除...
如果组件需要检测隐藏CSS属性(如 'x-hidden' 或者 'x-hide-display')并且在渲染时删除它们 (默认为false)，设置此值为true。
Component
autoWidth : Boolean
如果为true，使用width:'auto'配置，否则使用固定的宽度...

如果为true，使用width:'auto'配置，否则使用固定的宽度，或者可以由其父类容器的layout manager来控制。(默认值为 false)。

注: 虽然很多组件继承了这个配置选项，但不是所有这些组件的自适应宽度配置都会像期望的那样起作用。 设置autoWidth：值为true时，浏览器将根据元素的内容自动设置宽度，这将意味着Ext不会去管理宽度。

如果是由浏览器来管理宽度，需要注意的是，通过浏览器进行调整的结构组件内不能被发现，因此宽度的变化可能导致需要进行同步处理元素的宽度。 例如，在这个元素的目标是：

<div id='grid-container' style='margin-left:25%;width:50%'></div>
当浏览器窗口改变时，渲染后的Panel必须监听浏览器窗口大小的变化，以便通知子项，浏览器改变了其宽度：

var myPanel = new Ext.Panel({
    renderTo: 'grid-container',
    monitorResize: true, // relay on browser resize
    title: 'Panel',
    height: 400,
    autoWidth: true,
    layout: 'hbox',
    layoutConfig: {
        align: 'stretch'
    },
    defaults: {
        flex: 1
    },
    items: [{
        title: 'Box 1',
    }, {
        title: 'Box 2'
    }, {
        title: 'Box 3'
    }],
});
BoxComponent
boxMaxHeight : Number
设置组件的最大高度值...

设置组件的最大高度值。

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

BoxComponent
boxMaxWidth : Number
设置组件的最大宽度值...

设置组件的最大宽度值。

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

BoxComponent
boxMinHeight : Number
设置组件的最小高度值...

设置组件的最小高度值。

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

BoxComponent
boxMinWidth : Number
设置组件的最小宽度值...

设置组件的最小宽度值。

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

BoxComponent
bubbleEvents : Array
一个事件数组，当这些事件被触发时，将会被冒泡到所有父容器中。参见....

一个事件数组，当这些事件被触发时，将会被冒泡到所有父容器中。参见 Ext.util.Observable.enableBubble。 默认为 []。

Component
clearCls : String
应用到特殊的clearing div的CSS类， 这个clearing div直接渲染到每个form field的包装器后面...

应用到特殊的clearing div的CSS类， 这个clearing div直接渲染到每个form field的包装器后面，以提供 清除field的功能(默认为 'x-form-clear-left')。

注意: 只有在当前组件被渲染到一个使用FormLayout 布局(例如 Ext.form.FormPanel 或者指定 layout:'form')的 容器中、或者是指定了一个fieldLabel 、或者指定isFormField=true 时此配置才有效。

另请参见 Ext.layout.FormLayout. fieldTpl。

Component
cls : String
一个可选的额外CSS类，它将被添加到当前组件的元素上(默认为'')...
一个可选的额外CSS类，它将被添加到当前组件的元素上(默认为'')。 此属性对于在组件上，或者它的任何使用标准CSS规则的孩子节点上， 添加定制的样式非常有用。
Component
contentEl : String
(可选)指定一个已存在的HTML元素，或者一个已存在HTML元素的...

(可选)指定一个已存在的HTML元素，或者一个已存在HTML元素的 id ，它们将被用作当前组件的内容。

  • 描述 :
    此配置选项被用来将一个已存在的HTML元素 插入到一个新组件(在组件渲染之后它简单地移动DOM元素) 的layout元素中，使它成为该组件的内容。
  • 注意 :
    指定的HTML元素将被append到组件的layout元素中， 在所有配置的 HTML 被插入之后， 并且，这样的话，在render事件 被触发时，document中将不再包含此元素。
    指定的HTML元素将不会参与组件所有可能使用的 layout 过程(译者注：指这些HTML元素 不会参与布局操作)。 它仅是HTML而已。布局操作实在孩子 items 上进行的。
    添加 x-hidden 或者 x-hide-display CSS类，以防在内容渲染到panel时发生闪烁。
Component
ctCls : String
一个可选的外部CSS样式，添加到这个组件的容器(默认值为 '')。 这个方法对于使用标准的CSS规则...

一个可选的外部CSS样式，添加到这个组件的容器(默认值为 '')。 这个方法对于使用标准的CSS规则，为组件或它的任何一个子组件添加特定的样式非常有用。 参见 Ext.layout.ContainerLayout和 extraCls 。

注意: ctCls 默认为 ''期望如下的类，它们将指定一个默认值:

  • Box Layout : 'x-box-layout-ct'
使用一个额外的CSS类配置以上的Class，它是append到默认对象上的。例如， 对于BoxLayout (Hbox and Vbox):
                                ctCls: 'x-box-layout-ct custom-class'

Component
data : Mixed
初始化数据集，它将被应用到 tpl 上以刷新组件的内容区域。
Component
disabled : Boolean
当前组件处于无效状态时为true。 Read-only.
Component
disabledClass : String
当组件处于无效状态时添加到组件上的CSS类(默认为 'x-item-disabled')。
Component
fieldLabel : String
紧靠此field显示的标签文本(默认值为 '')。注意...

紧靠此field显示的标签文本(默认值为 '')。

注意:只有在当前组件被渲染到一个使用FormLayout 的容器中时，此配置才有效。 (例如 Ext.form.FormPanel 或 指定 layout:'form')。

另请参见 hideLabel 、 Ext.layout.FormLayout和 fieldTpl。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Name'
    }]
});
Component
flex : Number
注: 这个配置只用于该组件被包含在一个已使用BoxLayout配置的Container中时...

注: 这个配置只用于该组件被包含在一个已使用BoxLayout配置的Container中时。通过计算每一个子组件的flex值所占全部flex值之和的比例，来决定子组件的宽(HBoxLayout)高(VBoxlayout)。 任何子项的 flex = 0 或 flex = undefined 将不被设置(初始值大小将不被改变)。

BoxComponent
height : Number
组件的高度(默认值为 auto)。注:如果想使用百分比的方式...
组件的高度(默认值为 auto)。注:如果想使用百分比的方式来设置值，请查看 Ext.Component.anchor。
BoxComponent
hidden : Boolean
如果当前组件处于隐藏状态，此值为true。Read-only。
Component
hideLabel : Boolean
true时完全隐藏label元素 ( label 和 separator)。 默认为 false。 默认情况下，即使你不指定...

true时完全隐藏label元素 ( label 和 separator)。 默认为 false。 默认情况下，即使你不指定 fieldLabel 它的空间仍然会被保留，这样这块区域会与其它确实拥有label的区域位于同一排。 讲此值设置为 true 将导致此区域不再保留此空间。

注意: 参见 clearCls 的注释。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield'
        hideLabel: true
    }]
});
Component
hideMode : String
组件如何隐藏，支持的值有： 'visibility' (css visibility), 'offsets' (位置偏移量为负值) 和...

组件如何隐藏，支持的值有： 'visibility' (css visibility), 'offsets' (位置偏移量为负值) 和 'display' (css display).

注意:一般首选默认值 'display'，因为当组件第一次显示的时候它们会自动进行布局 (隐藏的时候不会调整尺寸)。

Component
hideParent : Boolean
此值为true时，当调用hide/show方法时，将会hide和show组件的容器...
此值为true时，当调用hide/show方法时，将会hide和show组件的容器；false时将会 hide和show组件自身(默认为false)。例如，这可以用作window上隐藏按钮的一种 快捷操作，通过设置此按钮的hideParent:true，然后把它添加到window上。
Component
html : String/Object
一个HTML片段，或者一个 DomHelper 描述，用作layout元素的内容(默认为'')。...
一个HTML片段，或者一个 DomHelper 描述，用作layout元素的内容(默认为'')。 这个HTML内容在组件渲染之后才被添加，所以在 render 出发的时候，document中尚未包含此HTML。 但是这个内容将会在所有配置的 contentEl 之前被插入到body标签中。
Component
id : String
当前组件唯一的id(默认为auto-assigned id)...

当前组件唯一的id(默认为auto-assigned id)。 如果你需要在以后访问组件，而又没有一个有效的组件对象引用，那么你需要指定一个 id( 也就是，使用Ext. getCmp方法 )。

注意，此id也将被用作组件底层HTML标签的id，这些标签被渲染到页面中。 这将允许你编写基于id的CSS规则，以独立地描述指定的实例；并且，也可以通过 组件父标签的id选中子元素。

注意:为了避免与唯一的id 产生重复， 请参见 itemId 和 ref 。

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

Component
itemCls : String
注意: 只有在当前组件被渲染到一个使用FormLayout 布局的 容器中时此配置才有效...

注意: 只有在当前组件被渲染到一个使用FormLayout 布局的 容器中时此配置才有效。 (例如Ext.form.FormPanel 或者指定 layout:'form')。

一个附加的CSS类，应用到div上，包装当前field的表单元素。 如果提供了此参数， field级上的itemCls将会覆盖 container级上提供的 默认itemCls。 为itemCls指定的值将会被添加默认的 类('x-form-item')。

既然它被应用到项目的包装器上(参见 Ext.layout.FormLayout。 fieldTpl)， 它将允许你编写能应用到此field、label(如果有指定)、或者field内部任何其它元素的标准CSS规则。

注意: 参考 fieldLabel的注释。 .

示例用法:

// Apply a style to the field's label:
<style>
    .required .x-form-item-label {font-weight:bold;color:red;}
</style>

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Name',
        itemCls: 'required' //this label will be styled
    },{
        xtype: 'textfield',
        fieldLabel: 'Favorite Color'
    }]
});
Component
itemId : String
当没有可利用的对象引用时，itemId可以作为第二选择，用来获得一个组件的引用， 代替 ...

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

var c = new Ext.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'); // 与 Ext.getCmp()不同

p2 = p1.ownerCt.getComponent('p2'); // 通过兄弟对象获得引用

另请参见 id 和 ref 。

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

Component
labelSeparator : String
每个fieldLabel 文本后面现实的分隔符。 此属性可以在多个层次上进行配置...

每个fieldLabel 文本后面现实的分隔符。 此属性可以在多个层次上进行配置。优先顺序为：

  • field / component level
  • container level
  • layout level (默认为冒号 ':')
如不需要为当前field的label显示分隔符，指定一个空字符串''即可。

注意:参见 clearCls 的注释。

另请参见 hideLabel 和 Ext.layout.FormLayout。 fieldTpl。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    layoutConfig: {
        labelSeparator: '~'   // layout config has lowest priority (defaults to ':')
    },
    labelSeparator: '>>',     // config at container level
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Field 1',
        labelSeparator: '...' // field/component level config supersedes others
    },{
        xtype: 'textfield',
        fieldLabel: 'Field 2' // labelSeparator will be '='

    }]
});
Component
labelStyle : String
一个CSS样式描述字符串，它将直接应用到当前field的label上...

一个CSS样式描述字符串，它将直接应用到当前field的label上。 如果有设置，默认为容器的labelStyle值(例如 Ext.layout.FormLayout.labelStyle , 或者 '')。

注意:参见 clearCls 的注释。

另请参见 hideLabel 和 Ext.layout.FormLayout. fieldTpl。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Name',
        labelStyle: 'font-weight:bold;'
    }]
});
Component
listeners : Object
一个包含一个或多个事件处理器的配置对象，会在初始化的时候被添加到目标对象上...

一个包含一个或多个事件处理器的配置对象，会在初始化的时候被添加到目标对象上。 该配置对象应该是一个有效的监听器配置对象就像 addListener例子中指定的一样可一次附加多个处理器。

ExtJs Components上的DOM事件

一些 ExtJs Component 类导出时会选择一些DOM事件(例如 "click", "mouseover" 等等), 这通常只是在有额外的值可以被添加时发生。例如DataView类的 click事件会传递被点击的节点。也可以直接在Component的HTMLElementevent上访问DOM事件，但必需在Component被渲染后监听器才能添加到Element 上。可以按照以下步骤添加插件:

// 插件会用一个监听器配置对象进行配置。
//该组件会被添加到所有处理方法的参数列表上。
Ext.DomObserver = Ext.extend(Object, {
    constructor: function(config) {
        this.listeners = config.listeners ? config.listeners : config;
    },

    // 组件将自己传递进了插件的初始化方法里
    init: function(c) {
        var p, l = this.listeners;
        for (p in l) {
            if (Ext.isFunction(l[p])) {
                l[p] = this.createHandler(l[p], c);
            } else {
                l[p].fn = this.createHandler(l[p].fn, c);
            }
        }

        // 渲染后立即添加监听器到元素上
        c.render = c.render.createSequence(function() {
            var e = c.getEl();
            if (e) {
                e.on(l);
            }
        });
    },

    createHandler: function(fn, c) {
        return function(e) {
            fn.call(this, e, c);
        };
    }
});

var combo = new Ext.form.ComboBox({

    // 元素被点击后折叠
    plugins: [ new Ext.DomObserver({
        click: function(evt, comp) {
            comp.collapse();
        }
    })],
    store: myStore,
    typeAhead: true,
    mode: 'local',
    triggerAction: 'all'
});

Observable
margins : Object
注:此配置只用于该组件展现在一个使用BorderLayout...

注:此配置只用于该组件展现在一个使用BorderLayout 或 BoxLayout的两个子类之一作为布局的容器。

这个margins对象在该组件中的格式为：

{top: (top margin),right: (right margin),bottom: (bottom margin),left: (left margin)}

也可以是一个字符串，中间用空格分隔，margin值为数字。 把matches中每一个值的次序跟CSS中margin值的排列方式相对应：

  • 如果只有一个值，它适用于所有方面。
  • 如果有两个值，top和bottom的边框设置为第一个值，left和right设置为第二个值。
  • 如果有三个值，top设置为第一个值，left和right设置为第二个值，bottom设置为第三个值。
  • 如果有四个值，分别设置为top, right, bottom, left。

默认值:

{top:0, right:0, bottom:0, left:0}
BoxComponent
overCls : String
一个可选的额外的CSS类，它将在鼠标移过元素时被添加到组件上...
一个可选的额外的CSS类，它将在鼠标移过元素时被添加到组件上，鼠标移出时 删除。(默认为'')。此属性对于在组件上，或者它的任何使用标准CSS规则的孩子节点上， 添加定制的'active' 或者 'hover'样式非常有用。
Component
overflowText : String
当该项目发生溢出时，用于菜单的文本。
Toolbar.Item
pageX : Number
如果该组件被包含在一个指定位置的容器中，这个值表示页面级的x坐标值（译者注：在有滚动条的情况下这个值很有用）。
BoxComponent
pageY : Number
如果该组件被包含在一个指定位置的容器中，这个值表示页面级的y坐标值（译者注：在有滚动条的情况下这个值很有用）。
BoxComponent
plugins : Object/Array
一个对象或者一个对象数组，为组件提供特殊的功能 ...
一个对象或者一个对象数组，为组件提供特殊的功能。 对一个合法的插件唯一的要求是它含有一个init()方法， 能接收一个Ext.Component型的参数。 当组件被创建时，如果有可用的插件，组件将会调用每个插件的init方法， 并将自身的引用作为方法参数传递给它。然后，每个插件就可以调用方法或者响应组件上的事件， 就像需要的那样提供自己的功能。
Component
ptype : String
需要创建配置的ptype。 当传递一个配置对象给构造函数时...
需要创建配置的ptype。 当传递一个配置对象给构造函数时，此配置选项不会被使用。 只有在使用懒初始化的时候此配置项才会被使用， 此时Plugin不是 通过一个完整的实例组件，而是通过一个Component配置指定的。 在渲染时，将会查找ptype以决定创建何种类型的Plugin。

如果你创建自己的Plugin，你可以通过 Ext.ComponentMgr.registerPlugin 对它们进行注册，以便能利用懒初始化和渲染机制。
Component
ref : String
一个路径描述，与组件的 ownerCt 相关，它描述了把当前组件的命名引用放置到哪个父容器中去。...

一个路径描述，与组件的 ownerCt 相关，它描述了把当前组件的命名引用放置到哪个父容器中去。

祖先的坐标路径可以通过'/'字符进行分隔。 例如，将一个Toolbar Button的引用放入 拥有此Toolbar的Panel中:

var myGrid = new Ext.grid.EditorGridPanel({
    title: 'My EditorGridPanel',
    store: myStore,
    colModel: myColModel,
    tbar: [{
        text: 'Save',
        handler: saveChanges,
        disabled: true,
        ref: '../saveButton'
    }],
    listeners: {
        afteredit: function() {
//          The button reference is in the GridPanel
            myGrid.saveButton.enable();
        }
    }
});

在上面的代码中，如果 ref 是 'saveButton' ，那么引用将会被放置到Toolbar中。 ref 中的每个'/' 都会从组件的 ownerCt 向上移动一级。

另请参见 added 和 removed 事件。

Component
region : String
注: 此配置只用于该组件展现在一个布局为BorderLayout的容器中...

注: 此配置只用于该组件展现在一个布局为BorderLayout的容器中(例如指定layout:'border')。

详见Ext.layout.BorderLayout。

BoxComponent
renderTo : Mixed
该值可以是一个节点的id、一个DOM节点或者一个已存在的元素...

该值可以是一个节点的id、一个DOM节点或者一个已存在的元素， 组件将会被渲染到其中。

  • 注意 :
      如果组件不是一个Container 的子项目时， 不要使用此选项。 渲染和管理它的子项目是一个Container 的layout manager的责任。
      当使用此配置项时，无需调用render()方法。

另请参见 render 。

Component
stateEvents : Array
一个事件数组，当它们被触发时，组件需要保存自己的状态(默认值为 none)...

一个事件数组，当它们被触发时，组件需要保存自己的状态(默认值为 none)。 它们可以是任何该组件支持的事件类型，包括浏览器事件和 自定义事件(例如['click', 'customerchange'])。

对于保存和恢复组件状态的详细解释，参见 stateful

Component
stateId : String
为该组件指定的唯一的id值，它被用作管理组件状态的目的...
为该组件指定的唯一的id值，它被用作管理组件状态的目的。 (如果设定了id，默认值为组件自己的id，否则，如果组件使用自动生成的id，此值为null)。

对于保存和反解析组件状态的解释，参见 stateful 。

Component
stateful : Boolean
一个标志参数，它将引起组件在启动时尝试从一个保存的状态中恢复内部状态参数...

一个标志参数，它将引起组件在启动时尝试从一个保存的状态中恢复内部状态参数。 组件必须要么拥有一个 stateId 或者 id ，它们被分配给需要被管理的状态属性。 在跨页面加载时，不保证自动生成的id属性的稳定性， 并且，不能依赖此id来保存和恢复一个组件的相同状态。

为了保存状态的操作能够工作，状态管理器的提供者必须 被设置成一个Ext.state.Provider 的实现类，它覆盖了set 和get 方法，以便保存和恢复name/value对。 有一个内置的Ext.state.CookieProvider 可用。

为当前页面设置状态提供者:

Ext.state.Manager.setProvider(new Ext.state.CookieProvider({
    expires: new Date(new Date().getTime()+(1000*60*60*24*7)), //7 days from now
}));

当 stateEvents 配置项中其中之一的事件被触发时， 一个状态可保存的组件将试图保存其状态。

保存状态时，一个可保存状态的组件首先需要通过调用 getState 方法来序列化它的状态。 默认情况下，此函数什么事都不做。 开发者必须提供一个实现，返回一个hash对象，它描述了组件可恢复的状态。

getState方法产生的值将会传递给 Ext.state.Manager.set 方法，它使用配置的 Ext.state.Provider 来保存对象，以组件的 stateId 为key，或者，如果此值（指stateId）没有指定时， 使用它的 id 作为key。

在进行构造时，一个可保存状态的组件试图通过调用 Ext.state.Manager.get方法来 恢复它的状态，传递 stateId 或者，如果此值（指stateId）没有指定时， 使用它的 id 作为参数。

结果对象被传递给 applyState 。 applyState 的默认实现只是简单地把属性拷贝到对象中， 但是开发者可以覆盖此方法以支持更多行为。

通过向 beforestaterestore, staterestore, beforestatesave 和 statesave 事件上绑定监听器，你可以在保存和恢复状态时进行额外的处理。

Component
style : String
被添加到组件元素的特定样式。 必须是按照...
被添加到组件元素的特定样式。 必须是按照 Ext.Element.applyStyles 类指定格式的合法参数值。

new Ext.Panel({
    title: 'Some Title',
    renderTo: Ext.getBody(),
    width: 400, height: 300,
    layout: 'form',
    items: [{
        xtype: 'textarea',
        style: {
            width: '95%',
            marginBottom: '10px'
        }
    },
        new Ext.Button({
            text: 'Send',
            minWidth: '100',
            style: {
                marginBottom: '10px'
            }
        })
    ]
});
Component
tabTip : String
注: 这个配置只用于当该组件作为TabPanel的一个子项目时使用...

注: 这个配置只用于当该组件作为TabPanel的一个子项目时使用。

一个String类型的innerHTML(支持html标签)，当鼠标放在该选项上的时，显示一个tooltip。为了tips能够被渲染，Ext.QuickTips.init()必须被提前调用。
BoxComponent
tpl : Mixed
一个 Ext.Template , Ext.XTemplate 或者一个用来形成一个Ext.XTemplate的字符串数组...
一个 Ext.Template , Ext.XTemplate 或者一个用来形成一个Ext.XTemplate的字符串数组。 与 data 和 tplWriteMode 配置项协同使用。
Component
tplWriteMode : String
刷新组件的内容区域时使用的Ext.(X)Template方式。 默认为'overwrite' (参见 Ext.XTemplate.overwrite )。
刷新组件的内容区域时使用的Ext.(X)Template方式。 默认为'overwrite' (参见 Ext.XTemplate.overwrite )。
Component
width : Number
组件的宽度(默认值为 auto)。注:如果想使用百分比的方式...
组件的宽度(默认值为 auto)。注:如果想使用百分比的方式来设置值，请查看 Ext.Component.anchor。
BoxComponent
x : Number
如果被包含在一个指定位置的容器中，这个值表示x(left)坐标值。
BoxComponent
xtype : String
需要创建配置的xtype。 当传递一个配置对象给构造函数时...
需要创建配置的xtype。 当传递一个配置对象给构造函数时，此配置选项不会被使用。 只有在使用懒初始化的时候此配置项才会被使用，此时容器的子项目不是 通过一个完整的实例组件，而是通过一个Component配置指定的。 在渲染时，将会查找xtype以决定创建何种类型的子组件。

预定义的xtype列表如下： here。

如果你继承Component创建你自己的组件，你需要使用Ext.ComponentMgr.registerType 对它们进行注册，以便利用懒初始化和渲染机制。
Component
y : Number
如果被包含在一个指定位置的容器中，这个值表示y(top)坐标值。
BoxComponent

公共属性

Property Defined By
disabled : Boolean
当前组件处于无效状态时为true。 Read-only.
Component
el : Ext.Element
封装了当前组件的Ext.Element。 Read-only。通常情况下，这将是一个<DIV>元素，它由此类的...

封装了当前组件的Ext.Element。 Read-only。

通常情况下，这将是一个<DIV>元素，它由此类的 onRender方法创建，但是它可以通过使用 autoEl 配置项进行覆盖。

注意: 直到组件渲染完成此元素都将处于无效状态。

如需向当前组件的 DOM事件(而不是当前组件自己的Observable事件)添加监听器， 更多建议，参见 listeners 配置项，或者直接使用一个render监听器:

new Ext.Panel({
    title: 'The Clickable Panel',
    listeners: {
        render: function(p) {
            // Append the Panel to the click handler's argument list.
            p.getEl().on('click', handlePanelClick.createDelegate(null, [p], true));
        },
        single: true  // Remove the listener after first invocation
    }
});

另请参见 getEl

Component
hidden : Boolean
如果当前组件处于隐藏状态，此值为true。Read-only。
Component
initialConfig : Object
当前组件的初始化配置描述。 Read-only。
Component
ownerCt : Ext.Container
组件所属的Container (默认为undefined，当前组件被添加到一个容器中时此值被自动设置)...
组件所属的Container (默认为undefined，当前组件被添加到一个容器中时此值被自动设置)。 Read-only。

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

Component
refOwner : Ext.Container
如果当前组件是一个容器的孩子，并且是通过一个 ref 配置项被注册的，则此值为 ref 引用被插入到的祖先容器。
如果当前组件是一个容器的孩子，并且是通过一个 ref 配置项被注册的，则此值为 ref 引用被插入到的祖先容器。
Component
rendered : Boolean
如果当前组件已经被渲染了，此值为true。Read-only.
Component

公共方法

Method Defined By
Toolbar.Item ( HTMLElement el )
创建一个新项目
创建一个新项目
参数:
  • el : HTMLElement
返回值:
  • void
Toolbar.Item
addClass ( string cls ) : Ext.Component
为组件底层的元素添加CSS样式。
为组件底层的元素添加CSS样式。
参数:
  • cls : string
    需要添加的CSS样式的class名称
返回值:
  • Ext.Component
    this
Component
addEvents( Object|String o, string Optional. ) : void
添加指定的事件到事件列表上，事件会被该Observable触发。
添加指定的事件到事件列表上，事件会被该Observable触发。
参数:
  • o : Object|String
    以事件名作为属性true作为值的对象 或者当多个事件名被分开的传递时则为第一个事件名。
  • Optional. : string
    事件名被分开的传递时则为事件名。 用法:
    this.addEvents('storeloaded', 'storecleared');
返回值:
  • void
Observable
addListener( String eventName, Function handler, [Object scope], [Object options] ) : void
给对象添加事件处理器。
给对象添加事件处理器。
参数:
  • eventName : String
    监听的事件名。
  • handler : Function
    事件调用的方法
  • scope : Object
    （可选）处理方法执行的作用域 (this的引用 reference)。 如果被忽略。默认为触发事件的对象。
  • options : Object
    （可选）包含处理器配置和属性的对象。 可能包含以下的属性:
    • scope : Object
      处理方法执行的作用域(this的引用) 。 如果被忽略。默认为触发事件的对象。
    • delay : Number
      在触发事件后延迟调用处理器的毫秒数。
    • single : Boolean
      如果为True则添加一个处理器来处理下一次的事件触发（仅一次），然后移除自己。
    • buffer : Number
      使得处理器延迟指定毫秒数后预定的运行在 一个Ext.util.DelayedTask中 。 如果事件在时间内再一次被触发，原始的处理器不会被调用，但是新的处理器会预定的在他的位置上。
    • target : Observable
      如果事件在目标的Observable上触发则仅仅调用处理器， 否则 事件会从子类的Observable上冒泡

    组合选项
    使用这些选项参数,可能会组合出不同类型的监听器：

    一个延迟的，一次性的监听器。

    myDataView.on('click', this.onClick, this, {
single: true,
delay: 100
});

    一次调用附加多个处理器
    该方法同样支持传递一个包含指定的多个处理器的属性的配置对象参数。

    myGridPanel.on({
'click' : {
    fn: this.onClick,
    scope: this,
    delay: 100
},
'mouseover' : {
    fn: this.onMouseOver,
    scope: this
},
'mouseout' : {
    fn: this.onMouseOut,
    scope: this
}
});

    或者一个简写的语法：

    myGridPanel.on({
'click' : this.onClick,
'mouseover' : this.onMouseOver,
'mouseout' : this.onMouseOut,
 scope: this
});
返回值:
  • void
Observable
applyToMarkup ( String/HTMLElement el ) : void
将此组件添加到已存在的有效的HTML标签中。 使用该方法时，无需再调用render()方法。
将此组件添加到已存在的有效的HTML标签中。 使用该方法时，无需再调用render()方法。
参数:
  • el : String/HTMLElement
返回值:
  • void
Component
cloneConfig ( Object overrides ) : Ext.Component
默认使用原先传递给当前实例的配置值克隆当前组件。
默认使用原先传递给当前实例的配置值克隆当前组件。
参数:
  • overrides : Object
    一个新的配置项，包含需要覆盖到克隆版本的所有属性。 可以传递一个id参数给此对象，否则将自动生成一个新的id以避免发生重复。
返回值:
  • Ext.Component
    当前组件的克隆副本
Component
destroy () : void
通过如下方法销毁对象：删除所有的事件监听器、将组件的元素从DOM树中删除...
通过如下方法销毁对象：删除所有的事件监听器、将组件的元素从DOM树中删除（如果可以）、 将组件从它的 Ext.Container（如果可用）中删除、 并且将它从Ext.ComponentMgr中 注销。 销毁操作一般由框架自动完成，一般情况下不需要直接调用该方法。
参数:
  • 无。
返回值:
  • void
Component
disable () : Ext.Component
将组件置为无效状态，并出发'disable'事件。
将组件置为无效状态，并出发'disable'事件。
参数:
  • 无。
返回值:
  • Ext.Component
    this
Component
enable () : Ext.Component
将组件置为有效状态并触发'enable'事件。
将组件置为有效状态并触发'enable'事件。
参数:
  • 无。
返回值:
  • Ext.Component
    this
Component
enableBubble( String/Array events ) :void
是否现在使得事件会被该Observable触发并调用 this.getBubbleTarget()方法在拥有者的继承树...

是否现在使得事件会被该Observable触发并调用 this.getBubbleTarget()方法在拥有者的继承树中冒泡。Observable的基础类中没有该方法的实现。

该方法一般被Ext.Components用来冒泡事件到拥有者的容器。参看Ext.Component.getBubbleTarget默认的实现 在Ext.Component中返回组件的直接拥有者。但是如果需要的是一个已知的目标，该方法可以被重写来更快的访问需求的目标。

例子:

Ext.override(Ext.form.Field, {
    // 添加方法到Field的initComponent上改变事件为冒泡
    initComponent : Ext.form.Field.prototype.initComponent.createSequence(function() {
        this.enableBubble('change');
    }),

    // 我们知道我们想让Field的事件冒泡到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() {
            // 如果样式被修改标题会变红。
            myForm.header.setStyle('color', 'red');
        }
    }
});
参数:
  • events : String/Array
    冒泡的事件名，或事件名数组
返回值:
  • void
Observable
findParentBy ( Function fn ) : Ext.Container
通过自定义的函数查找当前组件上层任何层次上的容器...
通过自定义的函数查找当前组件上层任何层次上的容器。 如果传递的函数返回true，容器对象将被返回。
参数:
  • fn : Function
    自定义的函数，使用如下参数调用(container,this component)。
返回值:
  • Ext.Container
    自定义函数返回true的第一个容器
Component
findParentByType ( String/Class xtype ) : Ext.Container
通过xtype或者class查找当前组件上层任何层次上的容器
通过xtype或者class查找当前组件上层任何层次上的容器
参数:
  • xtype : String/Class
    组件的xtype字符串，或者直接是组件的class
返回值:
  • Ext.Container
    符合指定xtype或者class的第一个容器
Component
fireEvent( String eventName, Object... args ) : Boolean
用传入的参数触发指定的事件 (减去事件名)。 一个事件可以被设置为冒泡 Obse...

用传入的参数触发指定的事件 (减去事件名)。

一个事件可以被设置为冒泡到Observable父类继承树(参看 Ext.Component.getBubbleTarget) 调用enableBubble实现。

参数:
  • eventName : String
    触发的事件名。
  • args : Object...
    传递给处理器的可变长度参数。
返回值:
  • Boolean
    如果有任何的处理器返回false则返回false，否则返回true。
Observable
focus ( [ Boolean selectText ], [ Boolean/Number delay ] ) : Ext.Component
尝试将当前组件设为焦点。
尝试将当前组件设为焦点。
参数:
  • selectText : Boolean
    (可选) 如果可用，同时选中组件内部的文本
  • delay : Boolean/Number
    (可选)将当前组件设置为焦点的延迟时间(设置为true等于0毫秒)
返回值:
  • Ext.Component
    this
Component
getBox ( [ Boolean local ] ) : Object
获取组件底层元素当前盒子模型的尺寸。（译者注：盒子模型是CSS术语，详细解释请自行搜索。）
获取组件底层元素当前盒子模型的尺寸。（译者注：盒子模型是CSS术语，详细解释请自行搜索。）
参数:
  • local : Boolean
    (可选)值为true时，组件的left值和top值将代替页面的XY被返回。(默认值为false)
返回值:
  • Object
    返回值的格式{x, y, width, height}
BoxComponent
getBubbleTarget () : Ext.Container
为Observable的fireEvent方法提供链接，它沿着继承结构进行冒泡操作。
为Observable的fireEvent方法提供链接，它沿着继承结构进行冒泡操作。
参数:
  • 无。
返回值:
  • Ext.Container
    拥有当前组件的容器。
Component
getEl () : Ext.Element
返回 Ext.Element ，它包装了当前组件。...

返回 Ext.Element ，它包装了当前组件。

通常情况下，这将是一个<DIV>元素，它是由该类的onRender方法创建的， 但是可以使用autoEl配置项 覆盖它。

注意: 此元素将会一直处于无效状态直到当前组件渲染完成。

如需向当前组件的 DOM事件(而不是当前组件自己的Observable事件)添加监听器， 更多建议，参见 listeners 配置项，或者直接使用一个render监听器:

new Ext.Panel({
    title: 'The Clickable Panel',
    listeners: {
        render: function(p) {
            // Append the Panel to the click handler's argument list.
            p.getEl().on('click', handlePanelClick.createDelegate(null, [p], true));
        },
        single: true  // Remove the listener after first invocation
    }
});
参数:
  • 无。
返回值:
  • Ext.Element
    包装当前组件的元素。
Component
getHeight () : Number
获取该组件的当前高度值。
获取该组件的当前高度值。
参数:
  • 无。
返回值:
  • Number
BoxComponent
getId () : String
返回当前组件的id，如果没有定义id，则自动生成并返回一个id:'ext-comp-'...
返回当前组件的 id 如果没有定义 id 则自动生成并返回一个 id

'ext-comp-' + (++Ext.Component.AUTO_ID)
参数:
  • 无。
返回值:
  • String
    id
Component
getItemId () : String
返回当前组件的 itemId 。 如果没有通过配置参数指定 itemId 那么，将会使用...
返回当前组件的 itemId 。 如果没有通过配置参数指定 itemId 那么，将会使用 getId 返回 id 。
参数:
  • 无。
返回值:
  • String
Component
getOuterSize () : Object
获取当前组件所在元素的尺寸大小，包括边缘的空白处。
获取当前组件所在元素的尺寸大小，包括边缘的空白处。
参数:
  • 无。
返回值:
  • Object
    一个包含元素大小的对象 {width: (element width + left/right margins), height: (element height + top/bottom margins)}
BoxComponent
getPosition ( [ Boolean local ] ) : Array
获取组件底层元素当前的XY位置。
获取组件底层元素当前的XY位置。
参数:
  • local : Boolean
    (可选)如果为true，将返回元素的left和top值，而不是相对于页面内的 XY。(默认值为 false)
返回值:
  • Array
    元素的XY位置值(例如：[100, 200])
BoxComponent
getResizeEl () : Ext.Element
返回该组件的最外层用来定义这些组件整体大小的Element...

返回该组件的最外层用来定义这些组件整体大小的Element对象。

通常用 getEl 方法将会返回相同的Element对象，但在有些情况下，组件可能有一些更多的封装了它的主要动态Element对象的Element对象。

例如ComboBox。它是封装在一个包含<input>元素的包装元素里(这将返回其 getEl方法和触发按钮的元素)。返回的元素为resizeEl。

参数:
  • 无。
返回值:
  • Ext.Element
    The Element which is to be resized by size managing layouts.
BoxComponent
getSize () : Object
获取组件底层元素当前的大小。
获取组件底层元素当前的大小。
参数:
  • 无。
返回值:
  • Object
    一个包含元素大小的对象{width: (element width), height: (element height)}
BoxComponent
getWidth () : Number
获取该组件的当前宽度值。
获取该组件的当前宽度值。
参数:
  • 无。
返回值:
  • Number
BoxComponent
getXType () : String
获取当前组件的xtype，它是用 Ext.ComponentMgr 注册的。 所有可用的xtype列表，参见...
获取当前组件的xtype，它是用 Ext.ComponentMgr 注册的。 所有可用的xtype列表，参见 Ext.Component 类头部。示例用法:

var t = new Ext.form.TextField();
alert(t.getXType());  // alerts 'textfield'
参数:
  • 无。
返回值:
  • String
    The xtype
Component
getXTypes () : String
返回此组件的xtype继承树，用字符'-'分隔。 所有可用的xtype值...

返回此组件的xtype继承树，用字符'-'分隔。 所有可用的xtype值，请参见Ext.Component 类的头部。

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

示例用法:

var t = new Ext.form.TextField();
alert(t.getXTypes());  // alerts 'component/box/field/textfield'
参数:
  • 无。
返回值:
  • String
    xtype层次字符串
Component
hasListener( String eventName ) : Boolean
检测对象是否包含指定事件的任何监听器
检测对象是否包含指定事件的任何监听器
参数:
  • eventName : String
    检测的事件名
返回值:
  • Boolean
    如果事件被监听则为true，否则为false
Observable
hide () : Ext.Component
隐藏当前组件。 监听 beforehide' 事件并且返回false 可以取消隐藏组件的操作。 在隐藏组件之后触发...
隐藏当前组件。 监听 beforehide' 事件并且返回false 可以取消隐藏组件的操作。 在隐藏组件之后触发 ' hide' 事件。 如果组件被配置成 hidden 那么此方法在内部被调用。
参数:
  • 无。
返回值:
  • Ext.Component
    this
Component
isVisible () : Boolean
如果当前组件可见，返回true。
如果当前组件可见，返回true。
参数:
  • 无。
返回值:
  • Boolean
    如果当前组件可见，返回true，其它返回false。
Component
isXType ( String xtype , [ Boolean shallow ] ) : Boolean
Tests whether or not this Component is of a specific xtype. This can test whether this Component is descended from th...

测试此组件是否是指定的xtype。此方法既可以测试是否是指定的xtype的某个子类， 或者它是否直接是指定的xtype类(shallow=true)。

如果使用你自己的子类，必须知道组件必须注册它的xtype值。

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

示例用法:

var t = new Ext.form.TextField();
var isText = t.isXType('textfield');        // true
var isBoxSubclass = t.isXType('box');       // true, descended from BoxComponent
var isBoxInstance = t.isXType('box', true); // false, not a direct BoxComponent instance
参数:
  • xtype : String
    需要为当前组件进行检测的xtype
  • shallow : Boolean
    (可选) 如果为false，检测组件是否是xtype继承树中的某个子类（默认是这种情况）， 如果为true，只检测组件是否是指定的xtype类型。
返回值:
  • Boolean
    如果当前组件是指定xtype的子类，返回true，其它返回flase。
Component
mon ( Observable|Element item , Object|String ename , Function fn , Object scope , Object opt ) : void
向任何Observable对象(或者元素)上添加监听器，监听器将会在组件...

向任何Observable对象(或者元素)上添加监听器，监听器将会在组件销毁时被自动删除。
用法：

myGridPanel.mon(myGridPanel.getSelectionModel(), 'selectionchange', handleSelectionChange, null, {buffer: 50});

or:

myGridPanel.mon(myGridPanel.getSelectionModel(), {
    selectionchange: handleSelectionChange,
    buffer: 50
});
参数:
  • item : Observable|Element
    需要添加listener/listeners的项目。
  • ename : Object|String
    事件名，或者一个包含事件名属性的对象。
  • fn : Function
    (可选) 如果 ename 参数是一个事件名，此参数为处理函数。
  • scope : Object
    (可选)如果 ename 参数是一个事件名称，此参数是作用域 ( this 引用)，监听函数将会在此作用域中被执行。
  • opt : Object
    (可选)如果 ename 参数是一个事件名称， 此参数是 addListener 配置项。
返回值:
  • void
Component
mun ( Observable|Element item , Object|String ename , Function fn , Object scope ) : void
删除通过mon 方法添加的监听器。
删除通过mon 方法添加的监听器。
参数:
  • item : Observable|Element
    需要删除listener/listeners的项目。
  • ename : Object|String
    事件名称，或者一个包含事件名称属性的对象。
  • fn : Function
    (可选)如果 ename 参数是一个事件名称，此参数是一个处理函数。
  • scope : Object
    (可选)如果 ename 参数是一个事件名称，此参数是作用域 ( this 引用)，监听函数将会在此作用域中被执行。
返回值:
  • void
Component
nextSibling () : Ext.Component
返回所属容器中的下一个组件
返回所属容器中的下一个组件
参数:
  • 无。
返回值:
  • Ext.Component
Component
on( String eventName, Function handler, [Object scope], [Object options] ) : void
给对象添加事件处理器 (addListener的简写形式)
给对象添加事件处理器 (addListener的简写形式。)
参数:
  • eventName : String
    监听的事件类型
  • handler : Function
    事件调用的方法
  • scope : Object
    （可选）处理方法执行时的作用域 (this 的引用)。 如果被忽略。默认为触发事件的对象。
  • options : Object
    可选 包含处理器配置的对象。
返回值:
  • void
Observable
previousSibling () : Ext.Component
返回所属容器中的前一个组件
返回所属容器中的前一个组件
参数:
  • 无。
返回值:
  • Ext.Component
Component
purgeListeners() : void
移除对象上所有的监听器
移除对象上所有的监听器
参数:
  • 无。
返回值:
  • void
Observable
relayEvents( Object o, Array events ) : void
从指定的Observable上传递选择的事件就好像被当前对象触发一样。
从指定的Observable上传递选择的事件就好像被当前对象触发一样。
参数:
  • o : Object
    该Observable上的事件被当前对象传递。
  • events : Array
    传递的数组名。
返回值:
  • void
Observable
removeClass ( string cls ) : Ext.Component
从组件底层的元素上删除一个CSS类。
从组件底层的元素上删除一个CSS类。
参数:
  • cls : string
    需要移除的CSS类名
返回值:
  • Ext.Component
    this
Component
removeListener( String eventName, Function handler, [Object scope] ) : void
删除一个事件处理器。
删除一个事件处理器。
参数:
  • eventName : String
    处理器关联的事件类型。
  • handler : Function
    移除的处理器。 这应该是传递到addListener里的方法的引用。
  • scope : Object
    （可选）处理器指定的初始作用域。
返回值:
  • void
Observable
render ( [ Element/HTMLElement/String container ], [ String/Number position ] ) : void
在传递进来的HTML元素中渲染当前组件。...

在传递进来的HTML元素中渲染当前组件。

如果你正在使用一个Container 对象放置当前组件，那么请不要使用render方法。

当容器第一次被渲染时，它的子组件将会被容器的 layout 管理器渲染。

某些布局管理器允许动态添加子组件。它们包括 Ext.layout.CardLayout, Ext.layout.AnchorLayout, Ext.layout.FormLayout, Ext.layout.TableLayout。

当一个新的子组件被添加时，如果容器已经被渲染了， 你可能需要调用容器的 doLayout 方法来刷新视图，它将导致所有没有被渲染的子组件进行渲染操作。 此操作是必须的，这样你可以添加多个子组件而只刷新一次layout。

当创建复杂的UI时，非常重要的一点是，请记住调整子项目的尺寸和位置是容器的 layout 管理器的职责。 如果你希望子项目的尺寸对用户交互作出反应， 你必须为容器配置一个布局管理器，它将创建和管理你心里想要的那种布局。

忽略容器的layout 配置意味着将会使用一个基本的布局管理器，它除了按次序把子组件 渲染到容器中之外什么事情都不做。 这种情况下，任何尺寸和位置的调整操作都不会发生。

参数:
  • container : Element/HTMLElement/String
    (可选) 需要在其中渲染当前组件的元素。 如果它是从一个已存在的标签中创建的，此参数应该被忽略。
  • position : String/Number
    (可选) 容器中的一个元素ID或者一个DOM节点索引， 当前组件将会被插入到它前面 (默认append到容器的尾部)
返回值:
  • void
Component
resumeEvents() : void
重新开始触发事件。(参见suspendEvents) 如果事件以queueSuspended参数被挂起，则在事件被挂起时 ...
重新开始触发事件。(参见 suspendEvents) 如果事件以queueSuspended 参数被挂起，则在事件被挂起时触发的事件会被传递到所有的监听器上
参数:
  • 无。
返回值:
  • void
Observable
setAutoScroll ( Boolean scroll ) : Ext.BoxComponent
设置该组件内容溢出时是否自动显示滚动条。
设置该组件内容溢出时是否自动显示滚动条。
参数:
  • scroll : Boolean
    值为true的话组件自动显示滚动条。
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setDisabled ( Boolean disabled ) : Ext.Component
工具函数，使用布尔值设置有效/无效(disabled/enabled )。
工具函数，使用布尔值设置有效/无效(disabled/enabled )。
参数:
  • disabled : Boolean
返回值:
  • Ext.Component
    this
Component
setHeight ( Mixed height ) : Ext.BoxComponent
设置此组件的高度。该方法将触发resize事件。
设置此组件的高度。该方法将触发resize事件。
参数:
  • height : Mixed
    The new height to set.
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setPagePosition ( Number x , Number y ) : Ext.BoxComponent
设置组件在页面中的XY位置。 如果需要设置left和top值 ，请使用...
设置组件在页面中的XY位置。 如果需要设置left和top值 ，请使用setPosition方法。 该方法触发move事件。
参数:
  • x : Number
    The new x position
  • y : Number
    The new y position
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setPosition ( Number left , Number top ) : Ext.BoxComponent
设置组件的left和top值。设置组件的页面XY值，请使用setPagePosition方法。该方法触发...
设置组件的left和top值。设置组件的页面XY值，请使用setPagePosition方法。该方法触发move事件。
参数:
  • left : Number
    The new left
  • top : Number
    The new top
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setSize ( Mixed width , Mixed height ) : Ext.BoxComponent
设置BoxComponent的宽度和高度。 此方法触发resize事件...
设置BoxComponent的宽度和高度。 此方法触发resize事件。此方法可以接收单独的width或者height值作为参数， 或者你可以传递像这样的一个size对象： {width:10, height:20} 。
参数:
  • width : Mixed
    设置的新的width值。这可以是：
    • 一个Number类型指定Element新的宽度 Ext.Element.defaultUnit(默认为像素 :'px')。
    • 一个String类型用于设置width的CSS样式。
    • 一个size对象格式为 {width: widthValue, height: heightValue} 。
    • 值为 undefined 时，保留原来的width不变。
  • height : Mixed
    设置的新的height值(如果第一个参数传递了一个size对象，此参数没有必要传递)。这可以是：
    • 一个Number类型指定Element新的高度 Ext.Element.defaultUnit(默认为像素 :'px')。
    • 一个String类型用于设置height的CSS样式。也有可能不会被使用到。
    • 值为 undefined 时，保留原来的height不变。
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setVisible ( Boolean visible ) : Ext.Component
工具方法，通过使用布尔值隐藏或者显示当前组件。
工具方法，通过使用布尔值隐藏或者显示当前组件。
参数:
  • visible : Boolean
    true时显示，false时隐藏
返回值:
  • Ext.Component
    this
Component
setWidth ( Mixed width ) : Ext.BoxComponent
设置组件的宽度。 此方法触发resize事件。
设置组件的宽度。 此方法触发resize事件。
参数:
  • width : Mixed
    The new width to set.
返回值:
  • Ext.BoxComponent
    this
BoxComponent
show () : Ext.Component
显示当前组件。监听' beforeshow' 事件，返回 false 取消显示组件...
显示当前组件。监听' beforeshow' 事件，返回 false 取消显示组件。在显示组件之后触发' show' 事件。
参数:
  • 无。
返回值:
  • Ext.Component
    this
Component
suspendEvents( Boolean queueSuspended ) : void
暂停触发所有的事件。 (参看resumeEvents)
暂停触发所有的事件。（参看 resumeEvents)
参数:
  • queueSuspended : Boolean
    如果传递为true则排列好暂停的事件使得在调用 resumeEvents 后再触发它们，而不是抛弃所有暂停的事件。
返回值:
  • void
Observable
syncSize () : Ext.BoxComponent
强制组件的大小按照此组件底层元素当前的高度和宽度计算。
强制组件的大小按照此组件底层元素当前的高度和宽度计算。
参数:
  • 无。
返回值:
  • Ext.BoxComponent
    this
BoxComponent
un( String eventName, Function handler, [Object scope] ) : void
删除一个事件处理器(removeListener方法的简写形式)
删除一个事件处理器(removeListener方法的简写形式。)
参数:
  • eventName : String
    处理器关联的事件类型
  • handler : Function
    被删除的处理器 这应该是传入 addListener 中的方法的引用。
  • scope : Object
    （可选）为处理器指定的初始作用域。
返回值:
  • void
Observable
update ( Mixed htmlOrData , [ Boolean loadScripts ], [ Function callback ] ) : void
刷新组件的内部区域。
刷新组件的内部区域。
参数:
  • htmlOrData : Mixed
    如果已经通过tpl为当前组件配置了一个模板，那么 将会使用此参数来装配模板。 如果没有为当前组件配置模板，组件的内容区域将会通过Ext.Element 进行刷新。
  • loadScripts : Boolean
    (可选)只用在使用html配置时此参数才合法。默认为false。
  • callback : Function
    (可选)只用在使用html配置时此参数才合法。 当脚本加载完成时回调函数才被执行。
返回值:
  • void
Component
updateBox ( Object box ) : Ext.BoxComponent
设置此组件底层元素的盒子模型尺寸。(译者注：盒子模型是CSS术语，详细资料请自行搜索。)
设置此组件底层元素的盒子模型尺寸。(译者注：盒子模型是CSS术语，详细资料请自行搜索。)
参数:
  • box : Object
    一个格式为{x, y, width, height}的对象
返回值:
  • Ext.BoxComponent
    this
BoxComponent

公共事件

Event Defined By
added : ( Ext.Component this , Ext.Container ownerCt , number index )
当一个组件被添加到一个Ext.Container时触发
当一个组件被添加到一个Ext.Container时触发
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • ownerCt : Ext.Container
    用于组件的容器
  • index : number
    添加组件的位置
Component
afterrender : ( Ext.Component this )
在组件渲染完成之后触发...

在组件渲染完成之后触发。

afterrender事件在当前组件被rendered 结束之后、在为组件定义的所有afterRender方法执行之后 触发，并且，如果有stateful， 也在状态被保存之后才触发。

监听器将会以如下参数格式被调用:
  • this : Ext.Component
Component
beforedestroy : ( Ext.Component this )
在组件 destroyed 之前触发。 在事件监听器中返回false以停止 destroy 操作。
在组件 destroyed 之前触发。 在事件监听器中返回false以停止 destroy 操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforehide : ( Ext.Component this )
在调用hide方法隐藏组件之前触发。 在事件监听器中返回false可以停止隐藏操作。
在调用hide方法隐藏组件之前触发。 在事件监听器中返回false可以停止隐藏操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforerender : ( Ext.Component this )
在组件被rendered 之前触发。 在事件监听器中返回false可以停止render 操作。
在组件被rendered 之前触发。 在事件监听器中返回false可以停止render 操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforeshow : ( Ext.Component this )
在调用show()方法现实组件之前触发。 事件处理函数返回false可以停止show。
在调用show 方法现实组件之前触发。 事件处理函数返回false可以停止show。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforestaterestore : ( Ext.Component this , Object state )
在组件状态恢复之前触发。返回false停止恢复状态操作。
在组件状态恢复之前触发。返回false停止恢复状态操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    StateProvider返回的状态哈希值。 如果没有禁止此事件，那么状态对象会被传递给applyState。 默认情况下，这样简单地把属性值拷贝到当前组件中。 可以覆盖此方法以提供自定的状态恢复操作。
Component
beforestatesave : ( Ext.Component this , Object state )
在组件状态被保存到配置的状态提供者之前触发。 返回false可以停止保存。
在组件状态被保存到配置的状态提供者之前触发。 返回false可以停止保存。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    状态值哈希。 这由在组件上调用getState() 方法决定。 此方法必须由开发者提供，返回是否需要对状态进行描述，默认情况下， Ext.Component有一个空实现。
Component
destroy : ( Ext.Component this )
在组件被销毁之后触发。
在组件被destroyed之后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
disable : ( Ext.Component this )
在组件被设置为无效状态后触发。
在组件被设置为无效状态后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
enable : ( Ext.Component this )
当组件被设置为有效(enabled)之后触发。
当组件被设置为有效(enabled)之后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
hide : ( Ext.Component this )
在组件被隐藏之后触发。 当调用hide 方法隐藏组件之后触发。
在组件被隐藏之后触发。 当调用hide 方法隐藏组件之后触发。
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
move : ( Ext.Component this , Number x , Number y )
在组件移动之后触发。
在组件移动之后触发。
监听器将会用如下的参数格式来调用:
  • this : Ext.Component
  • x : Number
    The new x position
  • y : Number
    The new y position
BoxComponent
removed : ( Ext.Component this , Ext.Container ownerCt )
当一个组件被从Ext.Container容器中删除时触发
当一个组件被从Ext.Container容器中删除时触发
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • ownerCt : Ext.Container
    持有组件的容器
Component
render : ( Ext.Component this )
在组件被渲染之后触发。
在组件被 rendered(渲染) 之后触发。
监听器将以如下的参数格式被调用:
  • this : Ext.Component
Component
resize : ( Ext.Component this , Number adjWidth , Number adjHeight , Number rawWidth , Number rawHeight )
在组件被调整大小之后触发。
在组件被调整大小之后触发。
监听器将以如下的参数格式被调用:
  • this : Ext.Component
  • adjWidth : Number
    这是width调整后的值
  • adjHeight : Number
    这是height调整后的值
  • rawWidth : Number
    这是width原来的值
  • rawHeight : Number
    这是height原来的值
BoxComponent
show : ( Ext.Component this )
在调用show 方法显示组件之后触发。
在调用show 方法显示组件之后触发。
监听器将会用如下的参数格式被调用:
  • this : Ext.Component
Component
staterestore : ( Ext.Component this , Object state )
组件状态被存储之后触发。
组件状态被存储之后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    StateProvider返回的状态哈希值。 如果没有禁止此事件，那么状态对象会被传递给applyState。 默认情况下，这样简单地把属性值拷贝到当前组件中。 可以覆盖此方法以提供自定的状态恢复操作。
Component
statesave : ( Ext.Component this , Object state )
在组件状态被保存到所配置的状态提供者之后触发。
在组件状态被保存到所配置的状态提供者之后触发。
监听器将会用如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    状态值hash。 这是由在足见上调用getState() 方法决定的。 开发者必须提供此方法以返回是否需要恢复状态，默认情况下， Ext.Component有一个空实现。
Component


Observable
    Component
      BoxComponent
        Toolbar.Item
          Toolbar.Separator

Class Ext.Toolbar.Separator

包: | Ext
定义类的文件: | Toolbar.js
类: | Toolbar.Separator
继承自: | Toolbar.Item
一个简单的类，在工具栏中的两个项目之间添加一个垂直的分隔栏。 (css类: 'xtb-sep')。 示例用法:
new Ext.Panel({
    tbar : [
        'Item 1',
        {xtype: 'tbseparator'}, // or '-'

        'Item 2'
    ]
});

配置项

Config Options Defined By
allowDomMove : Boolean
在渲染时组件是否可以移动Dom节点(默认为true)。
Component
anchor : String
注: 这个配置只用于该组件被包含在一个已使用AnchorLayout...

注: 这个配置只用于该组件被包含在一个已使用 AnchorLayout (或者其子类)配置的Container时。 基于布局管理器，例如：

  • Ext.form.FormPanel
  • 指定 layout: 'anchor' // or 'form', or 'absolute'

参见 Ext.layout.AnchorLayout. anchor 。

BoxComponent
applyTo : Mixed
指定一个元素的id、一个DOM元素或者一个已经存在并被渲染到DIV中的元素，此DIV已经被...

指定一个元素的id、一个DOM元素或者一个已经存在并被渲染到DIV中的元素，此DIV已经被 渲染到document中，并且为当前组件指定了一些结构化的标签。

  • 描述 :
      当使用了 applyTo， 在主元素中也可以用id或者CSS类名来指定组件的托管部分， 并且，如果可以的话，创建的组件可能也会试图在那个标签中创建它的子组件。
  • 注意 :
      当使用此配置项时，无需调用render()方法。
      如果指定了applyTo属性，任何传递给 renderTo 的值都会被忽略，并且目标元素的父节点将会自动被用作组件的容器。
Component
autoEl : Mixed
一个表签名或者一个 DomHelper 描述，用来创建 Element ，它将封装当前组件...

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

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

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

{
    xtype: 'box',
    autoEl: {
        tag: 'img',
        src: 'http://www.example.com/example.jpg'

    }
}, {
    xtype: 'box',
    autoEl: {
        tag: 'blockquote',
        html: 'autoEl is cool!'
    }
}, {
    xtype: 'container',
    autoEl: 'ul',
    cls: 'ux-unordered-list',
    items: {
        xtype: 'box',
        autoEl: 'li',
        html: 'First list item'
    }
}
Component
autoHeight : Boolean
如果值为true，height配置项为'auto'，否则值为false的话使用固定的高度...

如果值为true，height配置项为'auto'，否则值为false的话使用固定的高度， 或者可以由其父类容器 layout manager来控制。(默认值为 false)。

注: 虽然很多组件继承了这个配置选项，但不是所有这些组件的自适应高度配置都会像期望的那样起作用。 设置autoHeight：值为true时，浏览器将根据元素的内容自动设置高度，这将意味着Ext不会去管理高度。

如果是由浏览器来管理高度，需要注意的是，通过浏览器进行调整的结构组件内不能被发现， 因此宽度的变化可能导致需要进行同步处理元素的高度。 例如：

var w = new Ext.Window({
    title: 'Window',
    width: 600,
    autoHeight: true,
    items: {
        title: 'Collapse Me',
        height: 400,
        collapsible: true,
        border: false,
        listeners: {
            beforecollapse: function() {
                w.el.shadow.hide();
            },
            beforeexpand: function() {
                w.el.shadow.hide();
            },
            collapse: function() {
                w.syncShadow();
            },
            expand: function() {
                w.syncShadow();
            }
        }
    }
}).show();
BoxComponent
autoScroll : Boolean
如果值为true，将会在该元素上使用overflow:'auto'配置，并且在必要的时候...
如果值为true，将会在该元素上使用overflow:'auto'配置，并且在必要的时候自动显示滚动条，否则，溢出部分的组件都会被切除(默认值为 false)。
BoxComponent
autoShow : Boolean
如果组件需要检测隐藏CSS属性(如 'x-hidden' 或者 'x-hide-display')并且在渲染时删除...
如果组件需要检测隐藏CSS属性(如 'x-hidden' 或者 'x-hide-display')并且在渲染时删除它们 (默认为false)，设置此值为true。
Component
autoWidth : Boolean
如果为true，使用width:'auto'配置，否则使用固定的宽度...

如果为true，使用width:'auto'配置，否则使用固定的宽度，或者可以由其父类容器的layout manager来控制。(默认值为 false)。

注: 虽然很多组件继承了这个配置选项，但不是所有这些组件的自适应宽度配置都会像期望的那样起作用。 设置autoWidth：值为true时，浏览器将根据元素的内容自动设置宽度，这将意味着Ext不会去管理宽度。

如果是由浏览器来管理宽度，需要注意的是，通过浏览器进行调整的结构组件内不能被发现，因此宽度的变化可能导致需要进行同步处理元素的宽度。 例如，在这个元素的目标是：

<div id='grid-container' style='margin-left:25%;width:50%'></div>
当浏览器窗口改变时，渲染后的Panel必须监听浏览器窗口大小的变化，以便通知子项，浏览器改变了其宽度：

var myPanel = new Ext.Panel({
    renderTo: 'grid-container',
    monitorResize: true, // relay on browser resize
    title: 'Panel',
    height: 400,
    autoWidth: true,
    layout: 'hbox',
    layoutConfig: {
        align: 'stretch'
    },
    defaults: {
        flex: 1
    },
    items: [{
        title: 'Box 1',
    }, {
        title: 'Box 2'
    }, {
        title: 'Box 3'
    }],
});
BoxComponent
boxMaxHeight : Number
设置组件的最大高度值...

设置组件的最大高度值。

警告:布局管理器应用的任何管理大小的配置将会被此属性覆盖。

BoxComponent
boxMaxWidth : Number
设置组件的最大宽度值...

设置组件的最大宽度值。

警告:布局管理器应用的任何管理大小的配置将会被此属性覆盖。

BoxComponent
boxMinHeight : Number
设置组件的最小高度值...

设置组件的最小高度值。

警告:布局管理器应用的任何管理大小的配置将会被此属性覆盖。

BoxComponent
boxMinWidth : Number
设置组件的最小宽度值...

设置组件的最小宽度值。

警告: 布局管理器应用的任何管理大小的配置将会被此属性覆盖。

BoxComponent
bubbleEvents : Array
一个事件数组，当这些事件被触发时，将会被冒泡到所有父容器中。参见....

一个事件数组，当这些事件被触发时，将会被冒泡到所有父容器中。参见 Ext.util.Observable.enableBubble。 默认为 []。

Component
clearCls : String
应用到特殊的clearing div的CSS类， 这个clearing div直接渲染到每个form field的包装器后面...

应用到特殊的clearing div的CSS类， 这个clearing div直接渲染到每个form field的包装器后面，以提供 清除field的功能(默认为 'x-form-clear-left')。

注意: 只有在当前组件被渲染到一个使用FormLayout 布局(例如 Ext.form.FormPanel 或者指定 layout:'form')的 容器中、或者是指定了一个fieldLabel 、或者指定isFormField=true 时此配置才有效。

另请参见 Ext.layout.FormLayout. fieldTpl。

Component
cls : String
一个可选的额外CSS类，它将被添加到当前组件的元素上(默认为'')...
一个可选的额外CSS类，它将被添加到当前组件的元素上(默认为'')。 此属性对于在组件上，或者它的任何使用标准CSS规则的孩子节点上， 添加定制的样式非常有用。
Component
contentEl : String
(可选)指定一个已存在的HTML元素，或者一个已存在HTML元素的...

(可选)指定一个已存在的HTML元素，或者一个已存在HTML元素的 id ，它们将被用作当前组件的内容。

  • 描述 :
    此配置选项被用来将一个已存在的HTML元素 插入到一个新组件(在组件渲染之后它简单地移动DOM元素) 的layout元素中，使它成为该组件的内容。
  • 注意 :
    指定的HTML元素将被append到组件的layout元素中， 在所有配置的 HTML 被插入之后， 并且，这样的话，在render事件 被触发时，document中将不再包含此元素。
    指定的HTML元素将不会参与组件所有可能使用的 layout 过程(译者注：指这些HTML元素 不会参与布局操作)。 它仅是HTML而已。布局操作实在孩子 items 上进行的。
    添加 x-hidden 或者 x-hide-display CSS类，以防在内容渲染到panel时发生闪烁。
Component
ctCls : String
一个可选的外部CSS样式，添加到这个组件的容器(默认值为 '')。 这个方法对于使用标准的CSS规则...

一个可选的外部CSS样式，添加到这个组件的容器(默认值为 '')。 这个方法对于使用标准的CSS规则，为组件或它的任何一个子组件添加特定的样式非常有用。 参见 Ext.layout.ContainerLayout和 extraCls 。

注意: ctCls 默认为 ''期望如下的类，它们将指定一个默认值:

  • Box Layout : 'x-box-layout-ct'
使用一个额外的CSS类配置以上的Class，它是append到默认对象上的。例如， 对于BoxLayout (Hbox and Vbox):
                                ctCls: 'x-box-layout-ct custom-class'

Component
data : Mixed
初始化数据集，它将被应用到 tpl 上以刷新组件的内容区域。
Component
disabled : Boolean
当前组件处于无效状态时为true。 Read-only.
Component
disabledClass : String
当组件处于无效状态时添加到组件上的CSS类(默认为 'x-item-disabled')。
Component
fieldLabel : String
紧靠此field显示的标签文本(默认值为 '')。注意...

紧靠此field显示的标签文本(默认值为 '')。

注意:只有在当前组件被渲染到一个使用FormLayout 的容器中时，此配置才有效。 (例如 Ext.form.FormPanel 或 指定 layout:'form')。

另请参见 hideLabel 、 Ext.layout.FormLayout和 fieldTpl。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Name'
    }]
});
Component
flex : Number
注: 这个配置只用于该组件被包含在一个已使用BoxLayout配置的Container中时...

注: 这个配置只用于该组件被包含在一个已使用BoxLayout配置的Container中时。通过计算每一个子组件的flex值所占全部flex值之和的比例，来决定子组件的宽(HBoxLayout)高(VBoxlayout)。 任何子项的 flex = 0 或 flex = undefined 将不被设置(初始值大小将不被改变)。

BoxComponent
height : Number
组件的高度(默认值为 auto)。注:如果想使用百分比的方式...
组件的高度(默认值为 auto)。注:如果想使用百分比的方式来设置值，请查看 Ext.Component.anchor。
BoxComponent
hidden : Boolean
如果当前组件处于隐藏状态，此值为true。Read-only。
Component
hideLabel : Boolean
true时完全隐藏label元素 ( label 和 separator)。 默认为 false。 默认情况下，即使你不指定...

true时完全隐藏label元素 ( label 和 separator)。 默认为 false。 默认情况下，即使你不指定 fieldLabel 它的空间仍然会被保留，这样这块区域会与其它确实拥有label的区域位于同一排。 讲此值设置为 true 将导致此区域不再保留此空间。

注意: 参见 clearCls 的注释。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield'
        hideLabel: true
    }]
});
Component
hideMode : String
组件如何隐藏，支持的值有： 'visibility' (css visibility), 'offsets' (位置偏移量为负值) 和...

组件如何隐藏，支持的值有： 'visibility' (css visibility), 'offsets' (位置偏移量为负值) 和 'display' (css display).

注意:一般首选默认值 'display'，因为当组件第一次显示的时候它们会自动进行布局 (隐藏的时候不会调整尺寸)。

Component
hideParent : Boolean
此值为true时，当调用hide/show方法时，将会hide和show组件的容器...
此值为true时，当调用hide/show方法时，将会hide和show组件的容器；false时将会 hide和show组件自身(默认为false)。例如，这可以用作window上隐藏按钮的一种 快捷操作，通过设置此按钮的hideParent:true，然后把它添加到window上。
Component
html : String/Object
一个HTML片段，或者一个 DomHelper 描述，用作layout元素的内容(默认为'')。...
一个HTML片段，或者一个 DomHelper 描述，用作layout元素的内容(默认为'')。 这个HTML内容在组件渲染之后才被添加，所以在 render 出发的时候，document中尚未包含此HTML。 但是这个内容将会在所有配置的 contentEl 之前被插入到body标签中。
Component
id : String
当前组件唯一的id(默认为auto-assigned id)...

当前组件唯一的id(默认为auto-assigned id)。 如果你需要在以后访问组件，而又没有一个有效的组件对象引用，那么你需要指定一个 id( 也就是，使用Ext. getCmp方法 )。

注意，此id也将被用作组件底层HTML标签的id，这些标签被渲染到页面中。 这将允许你编写基于id的CSS规则，以独立地描述指定的实例；并且，也可以通过 组件父标签的id选中子元素。

注意:为了避免与唯一的id 产生重复， 请参见 itemId 和 ref 。

注意: 如需访问一个元素的容器，参见 ownerCt 。

Component
itemCls : String
注意: 只有在当前组件被渲染到一个使用FormLayout 布局的 容器中时此配置才有效...

注意: 只有在当前组件被渲染到一个使用FormLayout 布局的 容器中时此配置才有效。 (例如Ext.form.FormPanel 或者指定 layout:'form')。

一个附加的CSS类，应用到div上，包装当前field的表单元素。 如果提供了此参数， field级上的itemCls将会覆盖 container级上提供的 默认itemCls。 为itemCls指定的值将会被添加默认的 类('x-form-item')。

既然它被应用到项目的包装器上(参见 Ext.layout.FormLayout。 fieldTpl)， 它将允许你编写能应用到此field、label(如果有指定)、或者field内部任何其它元素的标准CSS规则。

注意: 参考 fieldLabel的注释。 .

示例用法:

// Apply a style to the field's label:
<style>
    .required .x-form-item-label {font-weight:bold;color:red;}
</style>

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Name',
        itemCls: 'required' //this label will be styled
    },{
        xtype: 'textfield',
        fieldLabel: 'Favorite Color'
    }]
});
Component
itemId : String
当没有可利用的对象引用时，itemId可以作为第二选择，用来获得一个组件的引用， 代替 ...

当没有可利用的对象引用时，itemId可以作为第二选择，用来获得一个组件的引用， 代替 id 与 Ext. getCmp的组合， 使用 itemId 与 Ext.Container. getComponent 方法配合将会获得 itemId 's（的所有者） 或者 id 's（的所有者）。 既然 itemId 's（的所有者）是一个到容器内部MixedCollection的索引， itemId 的作用域就被限定在容器之内---避免与 Ext.ComponentMgr 产生潜在的冲突，它（指Ext.ComponentMgr）需要一个 唯一的 id 。

var c = new Ext.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'); // 与 Ext.getCmp()不同

p2 = p1.ownerCt.getComponent('p2'); // 通过兄弟对象获得引用

另请参见 id 和 ref 。

注意:需要访问一个item的容器请参见 ownerCt 。

Component
labelSeparator : String
每个fieldLabel 文本后面现实的分隔符。 此属性可以在多个层次上进行配置...

每个fieldLabel 文本后面现实的分隔符。 此属性可以在多个层次上进行配置。优先顺序为：

  • field / component level
  • container level
  • layout level (默认为冒号 ':')
如不需要为当前field的label显示分隔符，指定一个空字符串''即可。

注意:参见 clearCls 的注释。

另请参见 hideLabel 和 Ext.layout.FormLayout。 fieldTpl。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    layoutConfig: {
        labelSeparator: '~'   // layout config has lowest priority (defaults to ':')
    },
    labelSeparator: '>>',     // config at container level
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Field 1',
        labelSeparator: '...' // field/component level config supersedes others
    },{
        xtype: 'textfield',
        fieldLabel: 'Field 2' // labelSeparator will be '='

    }]
});
Component
labelStyle : String
一个CSS样式描述字符串，它将直接应用到当前field的label上...

一个CSS样式描述字符串，它将直接应用到当前field的label上。 如果有设置，默认为容器的labelStyle值(例如 Ext.layout.FormLayout.labelStyle , 或者 '')。

注意:参见 clearCls 的注释。

另请参见 hideLabel 和 Ext.layout.FormLayout. fieldTpl。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Name',
        labelStyle: 'font-weight:bold;'
    }]
});
Component
listeners : Object
一个包含一个或多个事件处理器的配置对象，会在初始化的时候被添加到目标对象上...

一个包含一个或多个事件处理器的配置对象，会在初始化的时候被添加到目标对象上。 该配置对象应该是一个有效的监听器配置对象就像 addListener例子中指定的一样可一次附加多个处理器。

ExtJs Components上的DOM事件

一些 ExtJs Component 类导出时会选择一些DOM事件(例如 "click", "mouseover" 等等), 这通常只是在有额外的值可以被添加时发生。例如DataView类的 click事件会传递被点击的节点。也可以直接在Component的HTMLElementevent上访问DOM事件，但必需在Component被渲染后监听器才能添加到Element 上。可以按照以下步骤添加插件:

// 插件会用一个监听器配置对象进行配置。
//该组件会被添加到所有处理方法的参数列表上。
Ext.DomObserver = Ext.extend(Object, {
    constructor: function(config) {
        this.listeners = config.listeners ? config.listeners : config;
    },

    // 组件将自己传递进了插件的初始化方法里
    init: function(c) {
        var p, l = this.listeners;
        for (p in l) {
            if (Ext.isFunction(l[p])) {
                l[p] = this.createHandler(l[p], c);
            } else {
                l[p].fn = this.createHandler(l[p].fn, c);
            }
        }

        // 渲染后立即添加监听器到元素上
        c.render = c.render.createSequence(function() {
            var e = c.getEl();
            if (e) {
                e.on(l);
            }
        });
    },

    createHandler: function(fn, c) {
        return function(e) {
            fn.call(this, e, c);
        };
    }
});

var combo = new Ext.form.ComboBox({

    // 元素被点击后折叠
    plugins: [ new Ext.DomObserver({
        click: function(evt, comp) {
            comp.collapse();
        }
    })],
    store: myStore,
    typeAhead: true,
    mode: 'local',
    triggerAction: 'all'
});

Observable
margins : Object
注:此配置只用于该组件展现在一个使用BorderLayout...

注:此配置只用于该组件展现在一个使用BorderLayout 或 BoxLayout的两个子类之一作为布局的容器。

这个margins对象在该组件中的格式为：

{top: (top margin),right: (right margin),bottom: (bottom margin),left: (left margin)}

也可以是一个字符串，中间用空格分隔，margin值为数字。 把matches中每一个值的次序跟CSS中margin值的排列方式相对应：

  • 如果只有一个值，它适用于所有方面。
  • 如果有两个值，top和bottom的边框设置为第一个值，left和right设置为第二个值。
  • 如果有三个值，top设置为第一个值，left和right设置为第二个值，bottom设置为第三个值。
  • 如果有四个值，分别设置为top, right, bottom, left。

默认值:

{top:0, right:0, bottom:0, left:0}
BoxComponent
overCls : String
一个可选的额外的CSS类，它将在鼠标移过元素时被添加到组件上...
一个可选的额外的CSS类，它将在鼠标移过元素时被添加到组件上，鼠标移出时 删除。(默认为'')。此属性对于在组件上，或者它的任何使用标准CSS规则的孩子节点上， 添加定制的'active' 或者 'hover'样式非常有用。
Component
overflowText : String
当该项目发生溢出时，用于菜单的文本。
Toolbar.Item
pageX : Number
如果该组件被包含在一个指定位置的容器中，这个值表示页面级的x坐标值（译者注：在有滚动条的情况下这个值很有用）。
BoxComponent
pageY : Number
如果该组件被包含在一个指定位置的容器中，这个值表示页面级的y坐标值（译者注：在有滚动条的情况下这个值很有用）。
BoxComponent
plugins : Object/Array
一个对象或者一个对象数组，为组件提供特殊的功能 ...
一个对象或者一个对象数组，为组件提供特殊的功能。 对一个合法的插件唯一的要求是它含有一个init()方法， 能接收一个Ext.Component型的参数。 当组件被创建时，如果有可用的插件，组件将会调用每个插件的init方法， 并将自身的引用作为方法参数传递给它。然后，每个插件就可以调用方法或者响应组件上的事件， 就像需要的那样提供自己的功能。
Component
ptype : String
需要创建配置的ptype。 当传递一个配置对象给构造函数时...
需要创建配置的ptype。 当传递一个配置对象给构造函数时，此配置选项不会被使用。 只有在使用懒初始化的时候此配置项才会被使用， 此时Plugin不是 通过一个完整的实例组件，而是通过一个Component配置指定的。 在渲染时，将会查找ptype以决定创建何种类型的Plugin。

如果你创建自己的Plugin，你可以通过 Ext.ComponentMgr.registerPlugin 对它们进行注册，以便能利用懒初始化和渲染机制。
Component
ref : String
一个路径描述，与组件的 ownerCt 相关，它描述了把当前组件的命名引用放置到哪个父容器中去。...

一个路径描述，与组件的 ownerCt 相关，它描述了把当前组件的命名引用放置到哪个父容器中去。

祖先的坐标路径可以通过'/'字符进行分隔。 例如，将一个Toolbar Button的引用放入 拥有此Toolbar的Panel中:

var myGrid = new Ext.grid.EditorGridPanel({
    title: 'My EditorGridPanel',
    store: myStore,
    colModel: myColModel,
    tbar: [{
        text: 'Save',
        handler: saveChanges,
        disabled: true,
        ref: '../saveButton'
    }],
    listeners: {
        afteredit: function() {
//          The button reference is in the GridPanel
            myGrid.saveButton.enable();
        }
    }
});

在上面的代码中，如果 ref 是 'saveButton' ，那么引用将会被放置到Toolbar中。 ref 中的每个'/' 都会从组件的 ownerCt 向上移动一级。

另请参见 added 和 removed 事件。

Component
region : String
注: 此配置只用于该组件展现在一个布局为BorderLayout的容器中...

注: 此配置只用于该组件展现在一个布局为BorderLayout的容器中(例如指定layout:'border')。

详见Ext.layout.BorderLayout。

BoxComponent
renderTo : Mixed
该值可以是一个节点的id、一个DOM节点或者一个已存在的元素...

该值可以是一个节点的id、一个DOM节点或者一个已存在的元素， 组件将会被渲染到其中。

  • 注意 :
      如果组件不是一个Container 的子项目时， 不要使用此选项。 渲染和管理它的子项目是一个Container 的layout manager的责任。
      当使用此配置项时，无需调用render()方法。

另请参见 render 。

Component
stateEvents : Array
一个事件数组，当它们被触发时，组件需要保存自己的状态(默认值为 none)...

一个事件数组，当它们被触发时，组件需要保存自己的状态(默认值为 none)。 它们可以是任何该组件支持的事件类型，包括浏览器事件和 自定义事件(例如['click', 'customerchange'])。

对于保存和恢复组件状态的详细解释，参见 stateful

Component
stateId : String
为该组件指定的唯一的id值，它被用作管理组件状态的目的...
为该组件指定的唯一的id值，它被用作管理组件状态的目的。 (如果设定了id，默认值为组件自己的id，否则，如果组件使用自动生成的id，此值为null)。

对于保存和反解析组件状态的解释，参见 stateful 。

Component
stateful : Boolean
一个标志参数，它将引起组件在启动时尝试从一个保存的状态中恢复内部状态参数...

一个标志参数，它将引起组件在启动时尝试从一个保存的状态中恢复内部状态参数。 组件必须要么拥有一个 stateId 或者 id ，它们被分配给需要被管理的状态属性。 在跨页面加载时，不保证自动生成的id属性的稳定性， 并且，不能依赖此id来保存和恢复一个组件的相同状态。

为了保存状态的操作能够工作，状态管理器的提供者必须 被设置成一个Ext.state.Provider 的实现类，它覆盖了set 和get 方法，以便保存和恢复name/value对。 有一个内置的Ext.state.CookieProvider 可用。

为当前页面设置状态提供者:

Ext.state.Manager.setProvider(new Ext.state.CookieProvider({
    expires: new Date(new Date().getTime()+(1000*60*60*24*7)), //7 days from now
}));

当 stateEvents 配置项中其中之一的事件被触发时， 一个状态可保存的组件将试图保存其状态。

保存状态时，一个可保存状态的组件首先需要通过调用 getState 方法来序列化它的状态。 默认情况下，此函数什么事都不做。 开发者必须提供一个实现，返回一个hash对象，它描述了组件可恢复的状态。

getState方法产生的值将会传递给 Ext.state.Manager.set 方法，它使用配置的 Ext.state.Provider 来保存对象，以组件的 stateId 为key，或者，如果此值（指stateId）没有指定时， 使用它的 id 作为key。

在进行构造时，一个可保存状态的组件试图通过调用 Ext.state.Manager.get方法来 恢复它的状态，传递 stateId 或者，如果此值（指stateId）没有指定时， 使用它的 id 作为参数。

结果对象被传递给 applyState 。 applyState 的默认实现只是简单地把属性拷贝到对象中， 但是开发者可以覆盖此方法以支持更多行为。

通过向 beforestaterestore, staterestore, beforestatesave 和 statesave 事件上绑定监听器，你可以在保存和恢复状态时进行额外的处理。

Component
style : String
被添加到组件元素的特定样式。 必须是按照...
被添加到组件元素的特定样式。 必须是按照 Ext.Element.applyStyles 类指定格式的合法参数值。

new Ext.Panel({
    title: 'Some Title',
    renderTo: Ext.getBody(),
    width: 400, height: 300,
    layout: 'form',
    items: [{
        xtype: 'textarea',
        style: {
            width: '95%',
            marginBottom: '10px'
        }
    },
        new Ext.Button({
            text: 'Send',
            minWidth: '100',
            style: {
                marginBottom: '10px'
            }
        })
    ]
});
Component
tabTip : String
注: 这个配置只用于当该组件作为TabPanel的一个子项目时使用...

注: 这个配置只用于当该组件作为TabPanel的一个子项目时使用。

一个String类型的innerHTML(支持html标签)，当鼠标放在该选项上的时，显示一个tooltip。为了tips能够被渲染，Ext.QuickTips.init()必须被提前调用。
BoxComponent
tpl : Mixed
一个 Ext.Template , Ext.XTemplate 或者一个用来形成一个Ext.XTemplate的字符串数组...
一个 Ext.Template , Ext.XTemplate 或者一个用来形成一个Ext.XTemplate的字符串数组。 与 data 和 tplWriteMode 配置项协同使用。
Component
tplWriteMode : String
刷新组件的内容区域时使用的Ext.(X)Template方式。 默认为'overwrite' (参见 Ext.XTemplate.overwrite )。
刷新组件的内容区域时使用的Ext.(X)Template方式。 默认为'overwrite' (参见 Ext.XTemplate.overwrite )。
Component
width : Number
组件的宽度(默认值为 auto)。注:如果想使用百分比的方式...
组件的宽度(默认值为 auto)。注:如果想使用百分比的方式来设置值，请查看 Ext.Component.anchor。
BoxComponent
x : Number
如果被包含在一个指定位置的容器中，这个值表示x(left)坐标值。
BoxComponent
xtype : String
需要创建配置的xtype。 当传递一个配置对象给构造函数时...
需要创建配置的xtype。 当传递一个配置对象给构造函数时，此配置选项不会被使用。 只有在使用懒初始化的时候此配置项才会被使用，此时容器的子项目不是 通过一个完整的实例组件，而是通过一个Component配置指定的。 在渲染时，将会查找xtype以决定创建何种类型的子组件。

预定义的xtype列表如下： here。

如果你继承Component创建你自己的组件，你需要使用Ext.ComponentMgr.registerType 对它们进行注册，以便利用懒初始化和渲染机制。
Component
y : Number
如果被包含在一个指定位置的容器中，这个值表示y(top)坐标值。
BoxComponent

公共属性

Property Defined By
disabled : Boolean
当前组件处于无效状态时为true。 Read-only.
Component
el : Ext.Element
封装了当前组件的Ext.Element。 Read-only。通常情况下，这将是一个<DIV>元素，它由此类的...

封装了当前组件的Ext.Element。 Read-only。

通常情况下，这将是一个<DIV>元素，它由此类的 onRender方法创建，但是它可以通过使用 autoEl 配置项进行覆盖。

注意: 直到组件渲染完成此元素都将处于无效状态。

如需向当前组件的 DOM事件(而不是当前组件自己的Observable事件)添加监听器， 更多建议，参见 listeners 配置项，或者直接使用一个render监听器:

new Ext.Panel({
    title: 'The Clickable Panel',
    listeners: {
        render: function(p) {
            // Append the Panel to the click handler's argument list.
            p.getEl().on('click', handlePanelClick.createDelegate(null, [p], true));
        },
        single: true  // Remove the listener after first invocation
    }
});

另请参见 getEl

Component
hidden : Boolean
如果当前组件处于隐藏状态，此值为true。Read-only。
Component
initialConfig : Object
当前组件的初始化配置描述。 Read-only。
Component
ownerCt : Ext.Container
组件所属的Container (默认为undefined，当前组件被添加到一个容器中时此值被自动设置)...
组件所属的Container (默认为undefined，当前组件被添加到一个容器中时此值被自动设置)。 Read-only。

注意: 如需访问容器中的子组件，参见 itemId 。

Component
refOwner : Ext.Container
如果当前组件是一个容器的孩子，并且是通过一个 ref 配置项被注册的，则此值为 ref 引用被插入到的祖先容器。
如果当前组件是一个容器的孩子，并且是通过一个 ref 配置项被注册的，则此值为 ref 引用被插入到的祖先容器。
Component
rendered : Boolean
如果当前组件已经被渲染了，此值为true。Read-only.
Component

公共方法

Method Defined By
Toolbar.Separator ()
创建一个新的Separator
创建一个新的Separator
参数:
  • 无。
返回值:
  • void
Toolbar.Separator
addClass ( string cls ) : Ext.Component
为组件底层的元素添加CSS样式。
为组件底层的元素添加CSS样式。
参数:
  • cls : string
    需要添加的CSS样式的class名称
返回值:
  • Ext.Component
    this
Component
addEvents( Object|String o, string Optional. ) : void
添加指定的事件到事件列表上，事件会被该Observable触发。
添加指定的事件到事件列表上，事件会被该Observable触发。
参数:
  • o : Object|String
    以事件名作为属性true作为值的对象 或者当多个事件名被分开的传递时则为第一个事件名。
  • Optional. : string
    事件名被分开的传递时则为事件名。 用法:
    this.addEvents('storeloaded', 'storecleared');
返回值:
  • void
Observable
addListener( String eventName, Function handler, [Object scope], [Object options] ) : void
给对象添加事件处理器。
给对象添加事件处理器。
参数:
  • eventName : String
    监听的事件名。
  • handler : Function
    事件调用的方法
  • scope : Object
    （可选）处理方法执行的作用域 (this的引用 reference)。 如果被忽略。默认为触发事件的对象。
  • options : Object
    （可选）包含处理器配置和属性的对象。 可能包含以下的属性:
    • scope : Object
      处理方法执行的作用域(this的引用) 。 如果被忽略。默认为触发事件的对象。
    • delay : Number
      在触发事件后延迟调用处理器的毫秒数。
    • single : Boolean
      如果为True则添加一个处理器来处理下一次的事件触发（仅一次），然后移除自己。
    • buffer : Number
      使得处理器延迟指定毫秒数后预定的运行在 一个Ext.util.DelayedTask中 。 如果事件在时间内再一次被触发，原始的处理器不会被调用，但是新的处理器会预定的在他的位置上。
    • target : Observable
      如果事件在目标的Observable上触发则仅仅调用处理器， 否则 事件会从子类的Observable上冒泡

    组合选项
    使用这些选项参数,可能会组合出不同类型的监听器：

    一个延迟的，一次性的监听器。

    myDataView.on('click', this.onClick, this, {
single: true,
delay: 100
});

    一次调用附加多个处理器
    该方法同样支持传递一个包含指定的多个处理器的属性的配置对象参数。

    myGridPanel.on({
'click' : {
    fn: this.onClick,
    scope: this,
    delay: 100
},
'mouseover' : {
    fn: this.onMouseOver,
    scope: this
},
'mouseout' : {
    fn: this.onMouseOut,
    scope: this
}
});

    或者一个简写的语法：

    myGridPanel.on({
'click' : this.onClick,
'mouseover' : this.onMouseOver,
'mouseout' : this.onMouseOut,
 scope: this
});
返回值:
  • void
Observable
applyToMarkup ( String/HTMLElement el ) : void
将此组件添加到已存在的有效的HTML标签中。 使用该方法时，无需再调用render()方法。
将此组件添加到已存在的有效的HTML标签中。 使用该方法时，无需再调用render()方法。
参数:
  • el : String/HTMLElement
返回值:
  • void
Component
cloneConfig ( Object overrides ) : Ext.Component
默认使用原先传递给当前实例的配置值克隆当前组件。
默认使用原先传递给当前实例的配置值克隆当前组件。
参数:
  • overrides : Object
    一个新的配置项，包含需要覆盖到克隆版本的所有属性。 可以传递一个id参数给此对象，否则将自动生成一个新的id以避免发生重复。
返回值:
  • Ext.Component
    当前组件的克隆副本
Component
destroy () : void
通过如下方法销毁对象：删除所有的事件监听器、将组件的元素从DOM树中删除...
通过如下方法销毁对象：删除所有的事件监听器、将组件的元素从DOM树中删除（如果可以）、 将组件从它的 Ext.Container（如果可用）中删除、 并且将它从Ext.ComponentMgr中 注销。 销毁操作一般由框架自动完成，一般情况下不需要直接调用该方法。
参数:
  • 无。
返回值:
  • void
Component
disable () : Ext.Component
将组件置为无效状态，并出发'disable'事件。
将组件置为无效状态，并出发'disable'事件。
参数:
  • 无。
返回值:
  • Ext.Component
    this
Component
enable () : Ext.Component
将组件置为有效状态并触发'enable'事件。
将组件置为有效状态并触发'enable'事件。
参数:
  • 无。
返回值:
  • Ext.Component
    this
Component
enableBubble( String/Array events ) :void
是否现在使得事件会被该Observable触发并调用 this.getBubbleTarget()方法在拥有者的继承树...

是否现在使得事件会被该Observable触发并调用 this.getBubbleTarget()方法在拥有者的继承树中冒泡。Observable的基础类中没有该方法的实现。

该方法一般被Ext.Components用来冒泡事件到拥有者的容器。参看Ext.Component.getBubbleTarget默认的实现 在Ext.Component中返回组件的直接拥有者。但是如果需要的是一个已知的目标，该方法可以被重写来更快的访问需求的目标。

例子:

Ext.override(Ext.form.Field, {
    // 添加方法到Field的initComponent上改变事件为冒泡
    initComponent : Ext.form.Field.prototype.initComponent.createSequence(function() {
        this.enableBubble('change');
    }),

    // 我们知道我们想让Field的事件冒泡到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() {
            // 如果样式被修改标题会变红。
            myForm.header.setStyle('color', 'red');
        }
    }
});
参数:
  • events : String/Array
    冒泡的事件名，或事件名数组
返回值:
  • void
Observable
findParentBy ( Function fn ) : Ext.Container
通过自定义的函数查找当前组件上层任何层次上的容器...
通过自定义的函数查找当前组件上层任何层次上的容器。 如果传递的函数返回true，容器对象将被返回。
参数:
  • fn : Function
    自定义的函数，使用如下参数调用(container,this component)。
返回值:
  • Ext.Container
    自定义函数返回true的第一个容器
Component
findParentByType ( String/Class xtype ) : Ext.Container
通过xtype或者class查找当前组件上层任何层次上的容器
通过xtype或者class查找当前组件上层任何层次上的容器
参数:
  • xtype : String/Class
    组件的xtype字符串，或者直接是组件的class
返回值:
  • Ext.Container
    符合指定xtype或者class的第一个容器
Component
fireEvent( String eventName, Object... args ) : Boolean
用传入的参数触发指定的事件 (减去事件名)。 一个事件可以被设置为冒泡 Obse...

用传入的参数触发指定的事件 (减去事件名)。

一个事件可以被设置为冒泡到Observable父类继承树(参看 Ext.Component.getBubbleTarget) 调用enableBubble实现。

参数:
  • eventName : String
    触发的事件名。
  • args : Object...
    传递给处理器的可变长度参数。
返回值:
  • Boolean
    如果有任何的处理器返回false则返回false，否则返回true。
Observable
focus ( [ Boolean selectText ], [ Boolean/Number delay ] ) : Ext.Component
尝试将当前组件设为焦点。
尝试将当前组件设为焦点。
参数:
  • selectText : Boolean
    (可选) 如果可用，同时选中组件内部的文本
  • delay : Boolean/Number
    (可选)将当前组件设置为焦点的延迟时间(设置为true等于0毫秒)
返回值:
  • Ext.Component
    this
Component
getBox ( [ Boolean local ] ) : Object
获取组件底层元素当前盒子模型的尺寸。（译者注：盒子模型是CSS术语，详细解释请自行搜索。）
获取组件底层元素当前盒子模型的尺寸。（译者注：盒子模型是CSS术语，详细解释请自行搜索。）
参数:
  • local : Boolean
    (可选)值为true时，组件的left值和top值将代替页面的XY被返回。(默认值为false)
返回值:
  • Object
    返回值的格式{x, y, width, height}
BoxComponent
getBubbleTarget () : Ext.Container
为Observable的fireEvent方法提供链接，它沿着继承结构进行冒泡操作。
为Observable的fireEvent方法提供链接，它沿着继承结构进行冒泡操作。
参数:
  • 无。
返回值:
  • Ext.Container
    拥有当前组件的容器。
Component
getEl () : Ext.Element
返回 Ext.Element ，它包装了当前组件。...

返回 Ext.Element ，它包装了当前组件。

通常情况下，这将是一个<DIV>元素，它是由该类的onRender方法创建的， 但是可以使用autoEl配置项 覆盖它。

注意: 此元素将会一直处于无效状态直到当前组件渲染完成。

如需向当前组件的 DOM事件(而不是当前组件自己的Observable事件)添加监听器， 更多建议，参见 listeners 配置项，或者直接使用一个render监听器:

new Ext.Panel({
    title: 'The Clickable Panel',
    listeners: {
        render: function(p) {
            // Append the Panel to the click handler's argument list.
            p.getEl().on('click', handlePanelClick.createDelegate(null, [p], true));
        },
        single: true  // Remove the listener after first invocation
    }
});
参数:
  • 无。
返回值:
  • Ext.Element
    包装当前组件的元素。
Component
getHeight () : Number
获取该组件的当前高度值。
获取该组件的当前高度值。
参数:
  • 无。
返回值:
  • Number
BoxComponent
getId () : String
返回当前组件的id，如果没有定义id，则自动生成并返回一个id:'ext-comp-'...
返回当前组件的 id 如果没有定义 id 则自动生成并返回一个 id

'ext-comp-' + (++Ext.Component.AUTO_ID)
参数:
  • 无。
返回值:
  • String
    id
Component
getItemId () : String
返回当前组件的 itemId 。 如果没有通过配置参数指定 itemId 那么，将会使用...
返回当前组件的 itemId 。 如果没有通过配置参数指定 itemId 那么，将会使用 getId 返回 id 。
参数:
  • 无。
返回值:
  • String
Component
getOuterSize () : Object
获取当前组件所在元素的尺寸大小，包括边缘的空白处。
获取当前组件所在元素的尺寸大小，包括边缘的空白处。
参数:
  • 无。
返回值:
  • Object
    一个包含元素大小的对象 {width: (element width + left/right margins), height: (element height + top/bottom margins)}
BoxComponent
getPosition ( [ Boolean local ] ) : Array
获取组件底层元素当前的XY位置。
获取组件底层元素当前的XY位置。
参数:
  • local : Boolean
    (可选)如果为true，将返回元素的left和top值，而不是相对于页面内的 XY。(默认值为 false)
返回值:
  • Array
    元素的XY位置值(例如：[100, 200])
BoxComponent
getResizeEl () : Ext.Element
返回该组件的最外层用来定义这些组件整体大小的Element...

返回该组件的最外层用来定义这些组件整体大小的Element对象。

通常用 getEl 方法将会返回相同的Element对象，但在有些情况下，组件可能有一些更多的封装了它的主要动态Element对象的Element对象。

例如ComboBox。它是封装在一个包含<input>元素的包装元素里(这将返回其 getEl方法和触发按钮的元素)。返回的元素为resizeEl。

参数:
  • 无。
返回值:
  • Ext.Element
    The Element which is to be resized by size managing layouts.
BoxComponent
getSize () : Object
获取组件底层元素当前的大小。
获取组件底层元素当前的大小。
参数:
  • 无。
返回值:
  • Object
    一个包含元素大小的对象{width: (element width), height: (element height)}
BoxComponent
getWidth () : Number
获取该组件的当前宽度值。
获取该组件的当前宽度值。
参数:
  • 无。
返回值:
  • Number
BoxComponent
getXType () : String
获取当前组件的xtype，它是用 Ext.ComponentMgr 注册的。 所有可用的xtype列表，参见...
获取当前组件的xtype，它是用 Ext.ComponentMgr 注册的。 所有可用的xtype列表，参见 Ext.Component 类头部。示例用法:

var t = new Ext.form.TextField();
alert(t.getXType());  // alerts 'textfield'
参数:
  • 无。
返回值:
  • String
    The xtype
Component
getXTypes () : String
返回此组件的xtype继承树，用字符'-'分隔。 所有可用的xtype值...

返回此组件的xtype继承树，用字符'-'分隔。 所有可用的xtype值，请参见Ext.Component 类的头部。

如果使用你自己的子类，请注意，组件必须注册它自己的xtype值以便区别于继承的xtype。

示例用法:

var t = new Ext.form.TextField();
alert(t.getXTypes());  // alerts 'component/box/field/textfield'
参数:
  • 无。
返回值:
  • String
    xtype层次字符串
Component
hasListener( String eventName ) : Boolean
检测对象是否包含指定事件的任何监听器
检测对象是否包含指定事件的任何监听器
参数:
  • eventName : String
    检测的事件名
返回值:
  • Boolean
    如果事件被监听则为true，否则为false
Observable
hide () : Ext.Component
隐藏当前组件。 监听 beforehide' 事件并且返回false 可以取消隐藏组件的操作。 在隐藏组件之后触发...
隐藏当前组件。 监听 beforehide' 事件并且返回false 可以取消隐藏组件的操作。 在隐藏组件之后触发 ' hide' 事件。 如果组件被配置成 hidden 那么此方法在内部被调用。
参数:
  • 无。
返回值:
  • Ext.Component
    this
Component
isVisible () : Boolean
如果当前组件可见，返回true。
如果当前组件可见，返回true。
参数:
  • 无。
返回值:
  • Boolean
    如果当前组件可见，返回true，其它返回false。
Component
isXType ( String xtype , [ Boolean shallow ] ) : Boolean
Tests whether or not this Component is of a specific xtype. This can test whether this Component is descended from th...

测试此组件是否是指定的xtype。此方法既可以测试是否是指定的xtype的某个子类， 或者它是否直接是指定的xtype类(shallow=true)。

如果使用你自己的子类，必须知道组件必须注册它的xtype值。

所有可用的xtype列表，参见 Ext.Component 类头部。

示例用法:

var t = new Ext.form.TextField();
var isText = t.isXType('textfield');        // true
var isBoxSubclass = t.isXType('box');       // true, descended from BoxComponent
var isBoxInstance = t.isXType('box', true); // false, not a direct BoxComponent instance
参数:
  • xtype : String
    需要为当前组件进行检测的xtype
  • shallow : Boolean
    (可选) 如果为false，检测组件是否是xtype继承树中的某个子类（默认是这种情况）， 如果为true，只检测组件是否是指定的xtype类型。
返回值:
  • Boolean
    如果当前组件是指定xtype的子类，返回true，其它返回flase。
Component
mon ( Observable|Element item , Object|String ename , Function fn , Object scope , Object opt ) : void
向任何Observable对象(或者元素)上添加监听器，监听器将会在组件...

向任何Observable对象(或者元素)上添加监听器，监听器将会在组件销毁时被自动删除。
用法：

myGridPanel.mon(myGridPanel.getSelectionModel(), 'selectionchange', handleSelectionChange, null, {buffer: 50});

or:

myGridPanel.mon(myGridPanel.getSelectionModel(), {
    selectionchange: handleSelectionChange,
    buffer: 50
});
参数:
  • item : Observable|Element
    需要添加listener/listeners的项目。
  • ename : Object|String
    事件名，或者一个包含事件名属性的对象。
  • fn : Function
    (可选) 如果 ename 参数是一个事件名，此参数为处理函数。
  • scope : Object
    (可选)如果 ename 参数是一个事件名称，此参数是作用域 ( this 引用)，监听函数将会在此作用域中被执行。
  • opt : Object
    (可选)如果 ename 参数是一个事件名称， 此参数是 addListener 配置项。
返回值:
  • void
Component
mun ( Observable|Element item , Object|String ename , Function fn , Object scope ) : void
删除通过mon 方法添加的监听器。
删除通过mon 方法添加的监听器。
参数:
  • item : Observable|Element
    需要删除listener/listeners的项目。
  • ename : Object|String
    事件名称，或者一个包含事件名称属性的对象。
  • fn : Function
    (可选)如果 ename 参数是一个事件名称，此参数是一个处理函数。
  • scope : Object
    (可选)如果 ename 参数是一个事件名称，此参数是作用域 ( this 引用)，监听函数将会在此作用域中被执行。
返回值:
  • void
Component
nextSibling () : Ext.Component
返回所属容器中的下一个组件
返回所属容器中的下一个组件
参数:
  • 无。
返回值:
  • Ext.Component
Component
on( String eventName, Function handler, [Object scope], [Object options] ) : void
给对象添加事件处理器 (addListener的简写形式)
给对象添加事件处理器 (addListener的简写形式。)
参数:
  • eventName : String
    监听的事件类型
  • handler : Function
    事件调用的方法
  • scope : Object
    （可选）处理方法执行时的作用域 (this 的引用)。 如果被忽略。默认为触发事件的对象。
  • options : Object
    可选 包含处理器配置的对象。
返回值:
  • void
Observable
previousSibling () : Ext.Component
返回所属容器中的前一个组件
返回所属容器中的前一个组件
参数:
  • 无。
返回值:
  • Ext.Component
Component
purgeListeners() : void
移除对象上所有的监听器
移除对象上所有的监听器
参数:
  • 无。
返回值:
  • void
Observable
relayEvents( Object o, Array events ) : void
从指定的Observable上传递选择的事件就好像被当前对象触发一样。
从指定的Observable上传递选择的事件就好像被当前对象触发一样。
参数:
  • o : Object
    该Observable上的事件被当前对象传递。
  • events : Array
    传递的数组名。
返回值:
  • void
Observable
removeClass ( string cls ) : Ext.Component
从组件底层的元素上删除一个CSS类。
从组件底层的元素上删除一个CSS类。
参数:
  • cls : string
    需要移除的CSS类名
返回值:
  • Ext.Component
    this
Component
removeListener( String eventName, Function handler, [Object scope] ) : void
删除一个事件处理器。
删除一个事件处理器。
参数:
  • eventName : String
    处理器关联的事件类型。
  • handler : Function
    移除的处理器。 这应该是传递到addListener里的方法的引用。
  • scope : Object
    （可选）处理器指定的初始作用域。
返回值:
  • void
Observable
render ( [ Element/HTMLElement/String container ], [ String/Number position ] ) : void
在传递进来的HTML元素中渲染当前组件。...

在传递进来的HTML元素中渲染当前组件。

如果你正在使用一个Container 对象放置当前组件，那么请不要使用render方法。

当容器第一次被渲染时，它的子组件将会被容器的 layout 管理器渲染。

某些布局管理器允许动态添加子组件。它们包括 Ext.layout.CardLayout, Ext.layout.AnchorLayout, Ext.layout.FormLayout, Ext.layout.TableLayout。

当一个新的子组件被添加时，如果容器已经被渲染了， 你可能需要调用容器的 doLayout 方法来刷新视图，它将导致所有没有被渲染的子组件进行渲染操作。 此操作是必须的，这样你可以添加多个子组件而只刷新一次layout。

当创建复杂的UI时，非常重要的一点是，请记住调整子项目的尺寸和位置是容器的 layout 管理器的职责。 如果你希望子项目的尺寸对用户交互作出反应， 你必须为容器配置一个布局管理器，它将创建和管理你心里想要的那种布局。

忽略容器的layout 配置意味着将会使用一个基本的布局管理器，它除了按次序把子组件 渲染到容器中之外什么事情都不做。 这种情况下，任何尺寸和位置的调整操作都不会发生。

参数:
  • container : Element/HTMLElement/String
    (可选) 需要在其中渲染当前组件的元素。 如果它是从一个已存在的标签中创建的，此参数应该被忽略。
  • position : String/Number
    (可选) 容器中的一个元素ID或者一个DOM节点索引， 当前组件将会被插入到它前面 (默认append到容器的尾部)
返回值:
  • void
Component
resumeEvents() : void
重新开始触发事件。(参见suspendEvents) 如果事件以queueSuspended参数被挂起，则在事件被挂起时 ...
重新开始触发事件。(参见 suspendEvents) 如果事件以queueSuspended 参数被挂起，则在事件被挂起时触发的事件会被传递到所有的监听器上
参数:
  • 无。
返回值:
  • void
Observable
setAutoScroll ( Boolean scroll ) : Ext.BoxComponent
设置该组件内容溢出时是否自动显示滚动条。
设置该组件内容溢出时是否自动显示滚动条。
参数:
  • scroll : Boolean
    值为true的话组件自动显示滚动条。
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setDisabled ( Boolean disabled ) : Ext.Component
工具函数，使用布尔值设置有效/无效(disabled/enabled )。
工具函数，使用布尔值设置有效/无效(disabled/enabled )。
参数:
  • disabled : Boolean
返回值:
  • Ext.Component
    this
Component
setHeight ( Mixed height ) : Ext.BoxComponent
设置此组件的高度。该方法将触发resize事件。
设置此组件的高度。该方法将触发resize事件。
参数:
  • height : Mixed
    The new height to set.
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setPagePosition ( Number x , Number y ) : Ext.BoxComponent
设置组件在页面中的XY位置。 如果需要设置left和top值 ，请使用...
设置组件在页面中的XY位置。 如果需要设置left和top值 ，请使用setPosition方法。 该方法触发move事件。
参数:
  • x : Number
    The new x position
  • y : Number
    The new y position
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setPosition ( Number left , Number top ) : Ext.BoxComponent
设置组件的left和top值。设置组件的页面XY值，请使用setPagePosition方法。该方法触发...
设置组件的left和top值。设置组件的页面XY值，请使用setPagePosition方法。该方法触发move事件。
参数:
  • left : Number
    The new left
  • top : Number
    The new top
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setSize ( Mixed width , Mixed height ) : Ext.BoxComponent
设置BoxComponent的宽度和高度。 此方法触发resize事件...
设置BoxComponent的宽度和高度。 此方法触发resize事件。此方法可以接收单独的width或者height值作为参数， 或者你可以传递像这样的一个size对象： {width:10, height:20} 。
参数:
  • width : Mixed
    设置的新的width值。这可以是：
    • 一个Number类型指定Element新的宽度 Ext.Element.defaultUnit(默认为像素 :'px')。
    • 一个String类型用于设置width的CSS样式。
    • 一个size对象格式为 {width: widthValue, height: heightValue} 。
    • 值为 undefined 时，保留原来的width不变。
  • height : Mixed
    设置的新的height值(如果第一个参数传递了一个size对象，此参数没有必要传递)。这可以是：
    • 一个Number类型指定Element新的高度 Ext.Element.defaultUnit(默认为像素 :'px')。
    • 一个String类型用于设置height的CSS样式。也有可能不会被使用到。
    • 值为 undefined 时，保留原来的height不变。
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setVisible ( Boolean visible ) : Ext.Component
工具方法，通过使用布尔值隐藏或者显示当前组件。
工具方法，通过使用布尔值隐藏或者显示当前组件。
参数:
  • visible : Boolean
    true时显示，false时隐藏
返回值:
  • Ext.Component
    this
Component
setWidth ( Mixed width ) : Ext.BoxComponent
设置组件的宽度。 此方法触发resize事件。
设置组件的宽度。 此方法触发resize事件。
参数:
  • width : Mixed
    The new width to set.
返回值:
  • Ext.BoxComponent
    this
BoxComponent
show () : Ext.Component
显示当前组件。监听' beforeshow' 事件，返回 false 取消显示组件...
显示当前组件。监听' beforeshow' 事件，返回 false 取消显示组件。在显示组件之后触发' show' 事件。
参数:
  • 无。
返回值:
  • Ext.Component
    this
Component
suspendEvents( Boolean queueSuspended ) : void
暂停触发所有的事件。 (参看resumeEvents)
暂停触发所有的事件。（参看 resumeEvents)
参数:
  • queueSuspended : Boolean
    如果传递为true则排列好暂停的事件使得在调用 resumeEvents 后再触发它们，而不是抛弃所有暂停的事件。
返回值:
  • void
Observable
syncSize () : Ext.BoxComponent
强制组件的大小按照此组件底层元素当前的高度和宽度计算。
强制组件的大小按照此组件底层元素当前的高度和宽度计算。
参数:
  • 无。
返回值:
  • Ext.BoxComponent
    this
BoxComponent
un( String eventName, Function handler, [Object scope] ) : void
删除一个事件处理器(removeListener方法的简写形式)
删除一个事件处理器(removeListener方法的简写形式。)
参数:
  • eventName : String
    处理器关联的事件类型
  • handler : Function
    被删除的处理器 这应该是传入 addListener 中的方法的引用。
  • scope : Object
    （可选）为处理器指定的初始作用域。
返回值:
  • void
Observable
update ( Mixed htmlOrData , [ Boolean loadScripts ], [ Function callback ] ) : void
刷新组件的内部区域。
刷新组件的内部区域。
参数:
  • htmlOrData : Mixed
    如果已经通过tpl为当前组件配置了一个模板，那么 将会使用此参数来装配模板。 如果没有为当前组件配置模板，组件的内容区域将会通过Ext.Element 进行刷新。
  • loadScripts : Boolean
    (可选)只用在使用html配置时此参数才合法。默认为false。
  • callback : Function
    (可选)只用在使用html配置时此参数才合法。 当脚本加载完成时回调函数才被执行。
返回值:
  • void
Component
updateBox ( Object box ) : Ext.BoxComponent
设置此组件底层元素的盒子模型尺寸。(译者注：盒子模型是CSS术语，详细资料请自行搜索。)
设置此组件底层元素的盒子模型尺寸。(译者注：盒子模型是CSS术语，详细资料请自行搜索。)
参数:
  • box : Object
    一个格式为{x, y, width, height}的对象
返回值:
  • Ext.BoxComponent
    this
BoxComponent

公共事件

Event Defined By
added : ( Ext.Component this , Ext.Container ownerCt , number index )
当一个组件被添加到一个Ext.Container时触发
当一个组件被添加到一个Ext.Container时触发
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • ownerCt : Ext.Container
    用于组件的容器
  • index : number
    添加组件的位置
Component
afterrender : ( Ext.Component this )
在组件渲染完成之后触发...

在组件渲染完成之后触发。

afterrender事件在当前组件被rendered 结束之后、在为组件定义的所有afterRender方法执行之后 触发，并且，如果有stateful， 也在状态被保存之后才触发。

监听器将会以如下参数格式被调用:
  • this : Ext.Component
Component
beforedestroy : ( Ext.Component this )
在组件 destroyed 之前触发。 在事件监听器中返回false以停止 destroy 操作。
在组件 destroyed 之前触发。 在事件监听器中返回false以停止 destroy 操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforehide : ( Ext.Component this )
在调用hide方法隐藏组件之前触发。 在事件监听器中返回false可以停止隐藏操作。
在调用hide方法隐藏组件之前触发。 在事件监听器中返回false可以停止隐藏操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforerender : ( Ext.Component this )
在组件被rendered 之前触发。 在事件监听器中返回false可以停止render 操作。
在组件被rendered 之前触发。 在事件监听器中返回false可以停止render 操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforeshow : ( Ext.Component this )
在调用show()方法现实组件之前触发。 事件处理函数返回false可以停止show。
在调用show 方法现实组件之前触发。 事件处理函数返回false可以停止show。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforestaterestore : ( Ext.Component this , Object state )
在组件状态恢复之前触发。返回false停止恢复状态操作。
在组件状态恢复之前触发。返回false停止恢复状态操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    StateProvider返回的状态哈希值。 如果没有禁止此事件，那么状态对象会被传递给applyState。 默认情况下，这样简单地把属性值拷贝到当前组件中。 可以覆盖此方法以提供自定的状态恢复操作。
Component
beforestatesave : ( Ext.Component this , Object state )
在组件状态被保存到配置的状态提供者之前触发。 返回false可以停止保存。
在组件状态被保存到配置的状态提供者之前触发。 返回false可以停止保存。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    状态值哈希。 这由在组件上调用getState() 方法决定。 此方法必须由开发者提供，返回是否需要对状态进行描述，默认情况下， Ext.Component有一个空实现。
Component
destroy : ( Ext.Component this )
在组件被销毁之后触发。
在组件被destroyed之后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
disable : ( Ext.Component this )
在组件被设置为无效状态后触发。
在组件被设置为无效状态后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
enable : ( Ext.Component this )
当组件被设置为有效(enabled)之后触发。
当组件被设置为有效(enabled)之后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
hide : ( Ext.Component this )
在组件被隐藏之后触发。 当调用hide 方法隐藏组件之后触发。
在组件被隐藏之后触发。 当调用hide 方法隐藏组件之后触发。
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
move : ( Ext.Component this , Number x , Number y )
在组件移动之后触发。
在组件移动之后触发。
监听器将会用如下的参数格式来调用:
  • this : Ext.Component
  • x : Number
    The new x position
  • y : Number
    The new y position
BoxComponent
removed : ( Ext.Component this , Ext.Container ownerCt )
当一个组件被从Ext.Container容器中删除时触发
当一个组件被从Ext.Container容器中删除时触发
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • ownerCt : Ext.Container
    持有组件的容器
Component
render : ( Ext.Component this )
在组件被渲染之后触发。
在组件被 rendered(渲染) 之后触发。
监听器将以如下的参数格式被调用:
  • this : Ext.Component
Component
resize : ( Ext.Component this , Number adjWidth , Number adjHeight , Number rawWidth , Number rawHeight )
在组件被调整大小之后触发。
在组件被调整大小之后触发。
监听器将以如下的参数格式被调用:
  • this : Ext.Component
  • adjWidth : Number
    这是width调整后的值
  • adjHeight : Number
    这是height调整后的值
  • rawWidth : Number
    这是width原来的值
  • rawHeight : Number
    这是height原来的值
BoxComponent
show : ( Ext.Component this )
在调用show 方法显示组件之后触发。
在调用show 方法显示组件之后触发。
监听器将会用如下的参数格式被调用:
  • this : Ext.Component
Component
staterestore : ( Ext.Component this , Object state )
组件状态被存储之后触发。
组件状态被存储之后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    StateProvider返回的状态哈希值。 如果没有禁止此事件，那么状态对象会被传递给applyState。 默认情况下，这样简单地把属性值拷贝到当前组件中。 可以覆盖此方法以提供自定的状态恢复操作。
Component
statesave : ( Ext.Component this , Object state )
在组件状态被保存到所配置的状态提供者之后触发。
在组件状态被保存到所配置的状态提供者之后触发。
监听器将会用如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    状态值hash。 这是由在足见上调用getState() 方法决定的。 开发者必须提供此方法以返回是否需要恢复状态，默认情况下， Ext.Component有一个空实现。
Component


Observable
    Component
      BoxComponent
        Toolbar.Item
          Toolbar.Spacer

Class Ext.Toolbar.Spacer

包: | Ext
定义类的文件: | Toolbar.js
类: | Toolbar.Spacer
子类: | Toolbar.Fill
继承自: | Toolbar.Item
一个简单的元素，在工具栏的两个项目之间添加一个特殊的水平空白区。 默认情况下通过CSS描述添加一个2px宽的空白:
.x-toolbar .xtb-spacer {
    width:2px;
}

示例用法:

new Ext.Panel({
    tbar : [
        'Item 1',
        {xtype: 'tbspacer'}, // 或者 ' '

        'Item 2',
        // 空白宽度也可以通过javascript配置
        {xtype: 'tbspacer', width: 50}, // 添加一个50px的空包
        'Item 3'
    ]
});

配置项

Config Options Defined By
allowDomMove : Boolean
在渲染时组件是否可以移动Dom节点(默认为true)。
Component
anchor : String
注: 这个配置只用于该组件被包含在一个已使用AnchorLayout...

注: 这个配置只用于该组件被包含在一个已使用 AnchorLayout (或者其子类)配置的Container时。 基于布局管理器，例如：

  • Ext.form.FormPanel
  • 指定 layout: 'anchor' // or 'form', or 'absolute'

参见 Ext.layout.AnchorLayout. anchor 。

BoxComponent
applyTo : Mixed
指定一个元素的id、一个DOM元素或者一个已经存在并被渲染到DIV中的元素，此DIV已经被...

指定一个元素的id、一个DOM元素或者一个已经存在并被渲染到DIV中的元素，此DIV已经被 渲染到document中，并且为当前组件指定了一些结构化的标签。

  • 描述 :
      当使用了 applyTo， 在主元素中也可以用id或者CSS类名来指定组件的托管部分， 并且，如果可以的话，创建的组件可能也会试图在那个标签中创建它的子组件。
  • 注意 :
      当使用此配置项时，无需调用render()方法。
      如果指定了applyTo属性，任何传递给 renderTo 的值都会被忽略，并且目标元素的父节点将会自动被用作组件的容器。
Component
autoEl : Mixed
一个表签名或者一个 DomHelper 描述，用来创建 Element ，它将封装当前组件...

一个表签名或者一个 DomHelper 描述，用来创建 Element ，它将封装当前组件。

一般情况下你不必指定此值。对于基类 Ext.Component, Ext.BoxComponent, 和 Ext.Container, 此值默认为 'div'。 越复杂的Ext类使用越复杂的DOM结构，这些是由它们自己的onRender方法创建的。

这被设计用来允许开发者创建针对特定应用的 工具组件，这些组件由不同的DOM元素封装而成。 示例用法:

{
    xtype: 'box',
    autoEl: {
        tag: 'img',
        src: 'http://www.example.com/example.jpg'

    }
}, {
    xtype: 'box',
    autoEl: {
        tag: 'blockquote',
        html: 'autoEl is cool!'
    }
}, {
    xtype: 'container',
    autoEl: 'ul',
    cls: 'ux-unordered-list',
    items: {
        xtype: 'box',
        autoEl: 'li',
        html: 'First list item'
    }
}
Component
autoHeight : Boolean
如果值为true，height配置项为'auto'，否则值为false的话使用固定的高度...

如果值为true，height配置项为'auto'，否则值为false的话使用固定的高度， 或者可以由其父类容器 layout manager来控制。(默认值为 false)。

注: 虽然很多组件继承了这个配置选项，但不是所有这些组件的自适应高度配置都会像期望的那样起作用。 设置autoHeight：值为true时，浏览器将根据元素的内容自动设置高度，这将意味着Ext不会去管理高度。

如果是由浏览器来管理高度，需要注意的是，通过浏览器进行调整的结构组件内不能被发现， 因此宽度的变化可能导致需要进行同步处理元素的高度。 例如：

var w = new Ext.Window({
    title: 'Window',
    width: 600,
    autoHeight: true,
    items: {
        title: 'Collapse Me',
        height: 400,
        collapsible: true,
        border: false,
        listeners: {
            beforecollapse: function() {
                w.el.shadow.hide();
            },
            beforeexpand: function() {
                w.el.shadow.hide();
            },
            collapse: function() {
                w.syncShadow();
            },
            expand: function() {
                w.syncShadow();
            }
        }
    }
}).show();
BoxComponent
autoScroll : Boolean
如果值为true，将会在该元素上使用overflow:'auto'配置，并且在必要的时候...
如果值为true，将会在该元素上使用overflow:'auto'配置，并且在必要的时候自动显示滚动条，否则，溢出部分的组件都会被切除(默认值为 false)。
BoxComponent
autoShow : Boolean
如果组件需要检测隐藏CSS属性(如 'x-hidden' 或者 'x-hide-display')并且在渲染时删除...
如果组件需要检测隐藏CSS属性(如 'x-hidden' 或者 'x-hide-display')并且在渲染时删除它们 (默认为false)，设置此值为true。
Component
autoWidth : Boolean
如果为true，使用width:'auto'配置，否则使用固定的宽度...

如果为true，使用width:'auto'配置，否则使用固定的宽度，或者可以由其父类容器的layout manager来控制。(默认值为 false)。

注: 虽然很多组件继承了这个配置选项，但不是所有这些组件的自适应宽度配置都会像期望的那样起作用。 设置autoWidth：值为true时，浏览器将根据元素的内容自动设置宽度，这将意味着Ext不会去管理宽度。

如果是由浏览器来管理宽度，需要注意的是，通过浏览器进行调整的结构组件内不能被发现，因此宽度的变化可能导致需要进行同步处理元素的宽度。 例如，在这个元素的目标是：

<div id='grid-container' style='margin-left:25%;width:50%'></div>
当浏览器窗口改变时，渲染后的Panel必须监听浏览器窗口大小的变化，以便通知子项，浏览器改变了其宽度：

var myPanel = new Ext.Panel({
    renderTo: 'grid-container',
    monitorResize: true, // relay on browser resize
    title: 'Panel',
    height: 400,
    autoWidth: true,
    layout: 'hbox',
    layoutConfig: {
        align: 'stretch'
    },
    defaults: {
        flex: 1
    },
    items: [{
        title: 'Box 1',
    }, {
        title: 'Box 2'
    }, {
        title: 'Box 3'
    }],
});
BoxComponent
boxMaxHeight : Number
设置组件的最大高度值...

设置组件的最大高度值。

警告:布局管理器应用的任何管理大小的配置将会被此属性覆盖。

BoxComponent
boxMaxWidth : Number
设置组件的最大宽度值...

设置组件的最大宽度值。

警告:布局管理器应用的任何管理大小的配置将会被此属性覆盖。

BoxComponent
boxMinHeight : Number
设置组件的最小高度值...

设置组件的最小高度值。

警告:布局管理器应用的任何管理大小的配置将会被此属性覆盖。

BoxComponent
boxMinWidth : Number
设置组件的最小宽度值...

设置组件的最小宽度值。

警告: 布局管理器应用的任何管理大小的配置将会被此属性覆盖。

BoxComponent
bubbleEvents : Array
一个事件数组，当这些事件被触发时，将会被冒泡到所有父容器中。参见....

一个事件数组，当这些事件被触发时，将会被冒泡到所有父容器中。参见 Ext.util.Observable.enableBubble。 默认为 []。

Component
clearCls : String
应用到特殊的clearing div的CSS类， 这个clearing div直接渲染到每个form field的包装器后面...

应用到特殊的clearing div的CSS类， 这个clearing div直接渲染到每个form field的包装器后面，以提供 清除field的功能(默认为 'x-form-clear-left')。

注意: 只有在当前组件被渲染到一个使用FormLayout 布局(例如 Ext.form.FormPanel 或者指定 layout:'form')的 容器中、或者是指定了一个fieldLabel 、或者指定isFormField=true 时此配置才有效。

另请参见 Ext.layout.FormLayout. fieldTpl。

Component
cls : String
一个可选的额外CSS类，它将被添加到当前组件的元素上(默认为'')...
一个可选的额外CSS类，它将被添加到当前组件的元素上(默认为'')。 此属性对于在组件上，或者它的任何使用标准CSS规则的孩子节点上， 添加定制的样式非常有用。
Component
contentEl : String
(可选)指定一个已存在的HTML元素，或者一个已存在HTML元素的...

(可选)指定一个已存在的HTML元素，或者一个已存在HTML元素的 id ，它们将被用作当前组件的内容。

  • 描述 :
    此配置选项被用来将一个已存在的HTML元素 插入到一个新组件(在组件渲染之后它简单地移动DOM元素) 的layout元素中，使它成为该组件的内容。
  • 注意 :
    指定的HTML元素将被append到组件的layout元素中， 在所有配置的 HTML 被插入之后， 并且，这样的话，在render事件 被触发时，document中将不再包含此元素。
    指定的HTML元素将不会参与组件所有可能使用的 layout 过程(译者注：指这些HTML元素 不会参与布局操作)。 它仅是HTML而已。布局操作实在孩子 items 上进行的。
    添加 x-hidden 或者 x-hide-display CSS类，以防在内容渲染到panel时发生闪烁。
Component
ctCls : String
一个可选的外部CSS样式，添加到这个组件的容器(默认值为 '')。 这个方法对于使用标准的CSS规则...

一个可选的外部CSS样式，添加到这个组件的容器(默认值为 '')。 这个方法对于使用标准的CSS规则，为组件或它的任何一个子组件添加特定的样式非常有用。 参见 Ext.layout.ContainerLayout和 extraCls 。

注意: ctCls 默认为 ''期望如下的类，它们将指定一个默认值:

  • Box Layout : 'x-box-layout-ct'
使用一个额外的CSS类配置以上的Class，它是append到默认对象上的。例如， 对于BoxLayout (Hbox and Vbox):
                                ctCls: 'x-box-layout-ct custom-class'

Component
data : Mixed
初始化数据集，它将被应用到 tpl 上以刷新组件的内容区域。
Component
disabled : Boolean
当前组件处于无效状态时为true。 Read-only.
Component
disabledClass : String
当组件处于无效状态时添加到组件上的CSS类(默认为 'x-item-disabled')。
Component
fieldLabel : String
紧靠此field显示的标签文本(默认值为 '')。注意...

紧靠此field显示的标签文本(默认值为 '')。

注意:只有在当前组件被渲染到一个使用FormLayout 的容器中时，此配置才有效。 (例如 Ext.form.FormPanel 或 指定 layout:'form')。

另请参见 hideLabel 、 Ext.layout.FormLayout和 fieldTpl。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Name'
    }]
});
Component
flex : Number
注: 这个配置只用于该组件被包含在一个已使用BoxLayout配置的Container中时...

注: 这个配置只用于该组件被包含在一个已使用BoxLayout配置的Container中时。通过计算每一个子组件的flex值所占全部flex值之和的比例，来决定子组件的宽(HBoxLayout)高(VBoxlayout)。 任何子项的 flex = 0 或 flex = undefined 将不被设置(初始值大小将不被改变)。

BoxComponent
height : Number
组件的高度(默认值为 auto)。注:如果想使用百分比的方式...
组件的高度(默认值为 auto)。注:如果想使用百分比的方式来设置值，请查看 Ext.Component.anchor。
BoxComponent
hidden : Boolean
如果当前组件处于隐藏状态，此值为true。Read-only。
Component
hideLabel : Boolean
true时完全隐藏label元素 ( label 和 separator)。 默认为 false。 默认情况下，即使你不指定...

true时完全隐藏label元素 ( label 和 separator)。 默认为 false。 默认情况下，即使你不指定 fieldLabel 它的空间仍然会被保留，这样这块区域会与其它确实拥有label的区域位于同一排。 讲此值设置为 true 将导致此区域不再保留此空间。

注意: 参见 clearCls 的注释。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield'
        hideLabel: true
    }]
});
Component
hideMode : String
组件如何隐藏，支持的值有： 'visibility' (css visibility), 'offsets' (位置偏移量为负值) 和...

组件如何隐藏，支持的值有： 'visibility' (css visibility), 'offsets' (位置偏移量为负值) 和 'display' (css display).

注意:一般首选默认值 'display'，因为当组件第一次显示的时候它们会自动进行布局 (隐藏的时候不会调整尺寸)。

Component
hideParent : Boolean
此值为true时，当调用hide/show方法时，将会hide和show组件的容器...
此值为true时，当调用hide/show方法时，将会hide和show组件的容器；false时将会 hide和show组件自身(默认为false)。例如，这可以用作window上隐藏按钮的一种 快捷操作，通过设置此按钮的hideParent:true，然后把它添加到window上。
Component
html : String/Object
一个HTML片段，或者一个 DomHelper 描述，用作layout元素的内容(默认为'')。...
一个HTML片段，或者一个 DomHelper 描述，用作layout元素的内容(默认为'')。 这个HTML内容在组件渲染之后才被添加，所以在 render 出发的时候，document中尚未包含此HTML。 但是这个内容将会在所有配置的 contentEl 之前被插入到body标签中。
Component
id : String
当前组件唯一的id(默认为auto-assigned id)...

当前组件唯一的id(默认为auto-assigned id)。 如果你需要在以后访问组件，而又没有一个有效的组件对象引用，那么你需要指定一个 id( 也就是，使用Ext. getCmp方法 )。

注意，此id也将被用作组件底层HTML标签的id，这些标签被渲染到页面中。 这将允许你编写基于id的CSS规则，以独立地描述指定的实例；并且，也可以通过 组件父标签的id选中子元素。

注意:为了避免与唯一的id 产生重复， 请参见 itemId 和 ref 。

注意: 如需访问一个元素的容器，参见 ownerCt 。

Component
itemCls : String
注意: 只有在当前组件被渲染到一个使用FormLayout 布局的 容器中时此配置才有效...

注意: 只有在当前组件被渲染到一个使用FormLayout 布局的 容器中时此配置才有效。 (例如Ext.form.FormPanel 或者指定 layout:'form')。

一个附加的CSS类，应用到div上，包装当前field的表单元素。 如果提供了此参数， field级上的itemCls将会覆盖 container级上提供的 默认itemCls。 为itemCls指定的值将会被添加默认的 类('x-form-item')。

既然它被应用到项目的包装器上(参见 Ext.layout.FormLayout。 fieldTpl)， 它将允许你编写能应用到此field、label(如果有指定)、或者field内部任何其它元素的标准CSS规则。

注意: 参考 fieldLabel的注释。 .

示例用法:

// Apply a style to the field's label:
<style>
    .required .x-form-item-label {font-weight:bold;color:red;}
</style>

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Name',
        itemCls: 'required' //this label will be styled
    },{
        xtype: 'textfield',
        fieldLabel: 'Favorite Color'
    }]
});
Component
itemId : String
当没有可利用的对象引用时，itemId可以作为第二选择，用来获得一个组件的引用， 代替 ...

当没有可利用的对象引用时，itemId可以作为第二选择，用来获得一个组件的引用， 代替 id 与 Ext. getCmp的组合， 使用 itemId 与 Ext.Container. getComponent 方法配合将会获得 itemId 's（的所有者） 或者 id 's（的所有者）。 既然 itemId 's（的所有者）是一个到容器内部MixedCollection的索引， itemId 的作用域就被限定在容器之内---避免与 Ext.ComponentMgr 产生潜在的冲突，它（指Ext.ComponentMgr）需要一个 唯一的 id 。

var c = new Ext.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'); // 与 Ext.getCmp()不同

p2 = p1.ownerCt.getComponent('p2'); // 通过兄弟对象获得引用

另请参见 id 和 ref 。

注意:需要访问一个item的容器请参见 ownerCt 。

Component
labelSeparator : String
每个fieldLabel 文本后面现实的分隔符。 此属性可以在多个层次上进行配置...

每个fieldLabel 文本后面现实的分隔符。 此属性可以在多个层次上进行配置。优先顺序为：

  • field / component level
  • container level
  • layout level (默认为冒号 ':')
如不需要为当前field的label显示分隔符，指定一个空字符串''即可。

注意:参见 clearCls 的注释。

另请参见 hideLabel 和 Ext.layout.FormLayout。 fieldTpl。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    layoutConfig: {
        labelSeparator: '~'   // layout config has lowest priority (defaults to ':')
    },
    labelSeparator: '>>',     // config at container level
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Field 1',
        labelSeparator: '...' // field/component level config supersedes others
    },{
        xtype: 'textfield',
        fieldLabel: 'Field 2' // labelSeparator will be '='

    }]
});
Component
labelStyle : String
一个CSS样式描述字符串，它将直接应用到当前field的label上...

一个CSS样式描述字符串，它将直接应用到当前field的label上。 如果有设置，默认为容器的labelStyle值(例如 Ext.layout.FormLayout.labelStyle , 或者 '')。

注意:参见 clearCls 的注释。

另请参见 hideLabel 和 Ext.layout.FormLayout. fieldTpl。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Name',
        labelStyle: 'font-weight:bold;'
    }]
});
Component
listeners : Object
一个包含一个或多个事件处理器的配置对象，会在初始化的时候被添加到目标对象上...

一个包含一个或多个事件处理器的配置对象，会在初始化的时候被添加到目标对象上。 该配置对象应该是一个有效的监听器配置对象就像 addListener例子中指定的一样可一次附加多个处理器。

ExtJs Components上的DOM事件

一些 ExtJs Component 类导出时会选择一些DOM事件(例如 "click", "mouseover" 等等), 这通常只是在有额外的值可以被添加时发生。例如DataView类的 click事件会传递被点击的节点。也可以直接在Component的HTMLElementevent上访问DOM事件，但必需在Component被渲染后监听器才能添加到Element 上。可以按照以下步骤添加插件:

// 插件会用一个监听器配置对象进行配置。
//该组件会被添加到所有处理方法的参数列表上。
Ext.DomObserver = Ext.extend(Object, {
    constructor: function(config) {
        this.listeners = config.listeners ? config.listeners : config;
    },

    // 组件将自己传递进了插件的初始化方法里
    init: function(c) {
        var p, l = this.listeners;
        for (p in l) {
            if (Ext.isFunction(l[p])) {
                l[p] = this.createHandler(l[p], c);
            } else {
                l[p].fn = this.createHandler(l[p].fn, c);
            }
        }

        // 渲染后立即添加监听器到元素上
        c.render = c.render.createSequence(function() {
            var e = c.getEl();
            if (e) {
                e.on(l);
            }
        });
    },

    createHandler: function(fn, c) {
        return function(e) {
            fn.call(this, e, c);
        };
    }
});

var combo = new Ext.form.ComboBox({

    // 元素被点击后折叠
    plugins: [ new Ext.DomObserver({
        click: function(evt, comp) {
            comp.collapse();
        }
    })],
    store: myStore,
    typeAhead: true,
    mode: 'local',
    triggerAction: 'all'
});

Observable
margins : Object
注:此配置只用于该组件展现在一个使用BorderLayout...

注:此配置只用于该组件展现在一个使用BorderLayout 或 BoxLayout的两个子类之一作为布局的容器。

这个margins对象在该组件中的格式为：

{top: (top margin),right: (right margin),bottom: (bottom margin),left: (left margin)}

也可以是一个字符串，中间用空格分隔，margin值为数字。 把matches中每一个值的次序跟CSS中margin值的排列方式相对应：

  • 如果只有一个值，它适用于所有方面。
  • 如果有两个值，top和bottom的边框设置为第一个值，left和right设置为第二个值。
  • 如果有三个值，top设置为第一个值，left和right设置为第二个值，bottom设置为第三个值。
  • 如果有四个值，分别设置为top, right, bottom, left。

默认值:

{top:0, right:0, bottom:0, left:0}
BoxComponent
overCls : String
一个可选的额外的CSS类，它将在鼠标移过元素时被添加到组件上...
一个可选的额外的CSS类，它将在鼠标移过元素时被添加到组件上，鼠标移出时 删除。(默认为'')。此属性对于在组件上，或者它的任何使用标准CSS规则的孩子节点上， 添加定制的'active' 或者 'hover'样式非常有用。
Component
overflowText : String
当该项目发生溢出时，用于菜单的文本。
Toolbar.Item
pageX : Number
如果该组件被包含在一个指定位置的容器中，这个值表示页面级的x坐标值（译者注：在有滚动条的情况下这个值很有用）。
BoxComponent
pageY : Number
如果该组件被包含在一个指定位置的容器中，这个值表示页面级的y坐标值（译者注：在有滚动条的情况下这个值很有用）。
BoxComponent
plugins : Object/Array
一个对象或者一个对象数组，为组件提供特殊的功能 ...
一个对象或者一个对象数组，为组件提供特殊的功能。 对一个合法的插件唯一的要求是它含有一个init()方法， 能接收一个Ext.Component型的参数。 当组件被创建时，如果有可用的插件，组件将会调用每个插件的init方法， 并将自身的引用作为方法参数传递给它。然后，每个插件就可以调用方法或者响应组件上的事件， 就像需要的那样提供自己的功能。
Component
ptype : String
需要创建配置的ptype。 当传递一个配置对象给构造函数时...
需要创建配置的ptype。 当传递一个配置对象给构造函数时，此配置选项不会被使用。 只有在使用懒初始化的时候此配置项才会被使用， 此时Plugin不是 通过一个完整的实例组件，而是通过一个Component配置指定的。 在渲染时，将会查找ptype以决定创建何种类型的Plugin。

如果你创建自己的Plugin，你可以通过 Ext.ComponentMgr.registerPlugin 对它们进行注册，以便能利用懒初始化和渲染机制。
Component
ref : String
一个路径描述，与组件的 ownerCt 相关，它描述了把当前组件的命名引用放置到哪个父容器中去。...

一个路径描述，与组件的 ownerCt 相关，它描述了把当前组件的命名引用放置到哪个父容器中去。

祖先的坐标路径可以通过'/'字符进行分隔。 例如，将一个Toolbar Button的引用放入 拥有此Toolbar的Panel中:

var myGrid = new Ext.grid.EditorGridPanel({
    title: 'My EditorGridPanel',
    store: myStore,
    colModel: myColModel,
    tbar: [{
        text: 'Save',
        handler: saveChanges,
        disabled: true,
        ref: '../saveButton'
    }],
    listeners: {
        afteredit: function() {
//          The button reference is in the GridPanel
            myGrid.saveButton.enable();
        }
    }
});

在上面的代码中，如果 ref 是 'saveButton' ，那么引用将会被放置到Toolbar中。 ref 中的每个'/' 都会从组件的 ownerCt 向上移动一级。

另请参见 added 和 removed 事件。

Component
region : String
注: 此配置只用于该组件展现在一个布局为BorderLayout的容器中...

注: 此配置只用于该组件展现在一个布局为BorderLayout的容器中(例如指定layout:'border')。

详见Ext.layout.BorderLayout。

BoxComponent
renderTo : Mixed
该值可以是一个节点的id、一个DOM节点或者一个已存在的元素...

该值可以是一个节点的id、一个DOM节点或者一个已存在的元素， 组件将会被渲染到其中。

  • 注意 :
      如果组件不是一个Container 的子项目时， 不要使用此选项。 渲染和管理它的子项目是一个Container 的layout manager的责任。
      当使用此配置项时，无需调用render()方法。

另请参见 render 。

Component
stateEvents : Array
一个事件数组，当它们被触发时，组件需要保存自己的状态(默认值为 none)...

一个事件数组，当它们被触发时，组件需要保存自己的状态(默认值为 none)。 它们可以是任何该组件支持的事件类型，包括浏览器事件和 自定义事件(例如['click', 'customerchange'])。

对于保存和恢复组件状态的详细解释，参见 stateful

Component
stateId : String
为该组件指定的唯一的id值，它被用作管理组件状态的目的...
为该组件指定的唯一的id值，它被用作管理组件状态的目的。 (如果设定了id，默认值为组件自己的id，否则，如果组件使用自动生成的id，此值为null)。

对于保存和反解析组件状态的解释，参见 stateful 。

Component
stateful : Boolean
一个标志参数，它将引起组件在启动时尝试从一个保存的状态中恢复内部状态参数...

一个标志参数，它将引起组件在启动时尝试从一个保存的状态中恢复内部状态参数。 组件必须要么拥有一个 stateId 或者 id ，它们被分配给需要被管理的状态属性。 在跨页面加载时，不保证自动生成的id属性的稳定性， 并且，不能依赖此id来保存和恢复一个组件的相同状态。

为了保存状态的操作能够工作，状态管理器的提供者必须 被设置成一个Ext.state.Provider 的实现类，它覆盖了set 和get 方法，以便保存和恢复name/value对。 有一个内置的Ext.state.CookieProvider 可用。

为当前页面设置状态提供者:

Ext.state.Manager.setProvider(new Ext.state.CookieProvider({
    expires: new Date(new Date().getTime()+(1000*60*60*24*7)), //7 days from now
}));

当 stateEvents 配置项中其中之一的事件被触发时， 一个状态可保存的组件将试图保存其状态。

保存状态时，一个可保存状态的组件首先需要通过调用 getState 方法来序列化它的状态。 默认情况下，此函数什么事都不做。 开发者必须提供一个实现，返回一个hash对象，它描述了组件可恢复的状态。

getState方法产生的值将会传递给 Ext.state.Manager.set 方法，它使用配置的 Ext.state.Provider 来保存对象，以组件的 stateId 为key，或者，如果此值（指stateId）没有指定时， 使用它的 id 作为key。

在进行构造时，一个可保存状态的组件试图通过调用 Ext.state.Manager.get方法来 恢复它的状态，传递 stateId 或者，如果此值（指stateId）没有指定时， 使用它的 id 作为参数。

结果对象被传递给 applyState 。 applyState 的默认实现只是简单地把属性拷贝到对象中， 但是开发者可以覆盖此方法以支持更多行为。

通过向 beforestaterestore, staterestore, beforestatesave 和 statesave 事件上绑定监听器，你可以在保存和恢复状态时进行额外的处理。

Component
style : String
被添加到组件元素的特定样式。 必须是按照...
被添加到组件元素的特定样式。 必须是按照 Ext.Element.applyStyles 类指定格式的合法参数值。

new Ext.Panel({
    title: 'Some Title',
    renderTo: Ext.getBody(),
    width: 400, height: 300,
    layout: 'form',
    items: [{
        xtype: 'textarea',
        style: {
            width: '95%',
            marginBottom: '10px'
        }
    },
        new Ext.Button({
            text: 'Send',
            minWidth: '100',
            style: {
                marginBottom: '10px'
            }
        })
    ]
});
Component
tabTip : String
注: 这个配置只用于当该组件作为TabPanel的一个子项目时使用...

注: 这个配置只用于当该组件作为TabPanel的一个子项目时使用。

一个String类型的innerHTML(支持html标签)，当鼠标放在该选项上的时，显示一个tooltip。为了tips能够被渲染，Ext.QuickTips.init()必须被提前调用。
BoxComponent
tpl : Mixed
一个 Ext.Template , Ext.XTemplate 或者一个用来形成一个Ext.XTemplate的字符串数组...
一个 Ext.Template , Ext.XTemplate 或者一个用来形成一个Ext.XTemplate的字符串数组。 与 data 和 tplWriteMode 配置项协同使用。
Component
tplWriteMode : String
刷新组件的内容区域时使用的Ext.(X)Template方式。 默认为'overwrite' (参见 Ext.XTemplate.overwrite )。
刷新组件的内容区域时使用的Ext.(X)Template方式。 默认为'overwrite' (参见 Ext.XTemplate.overwrite )。
Component
width : Number
空白区域的宽度像素值(通过CSS样式默认为2px.x-toolbar .xtb-spacer)。
Toolbar.Spacer
x : Number
如果被包含在一个指定位置的容器中，这个值表示x(left)坐标值。
BoxComponent
xtype : String
需要创建配置的xtype。 当传递一个配置对象给构造函数时...
需要创建配置的xtype。 当传递一个配置对象给构造函数时，此配置选项不会被使用。 只有在使用懒初始化的时候此配置项才会被使用，此时容器的子项目不是 通过一个完整的实例组件，而是通过一个Component配置指定的。 在渲染时，将会查找xtype以决定创建何种类型的子组件。

预定义的xtype列表如下： here。

如果你继承Component创建你自己的组件，你需要使用Ext.ComponentMgr.registerType 对它们进行注册，以便利用懒初始化和渲染机制。
Component
y : Number
如果被包含在一个指定位置的容器中，这个值表示y(top)坐标值。
BoxComponent

公共属性

Property Defined By
disabled : Boolean
当前组件处于无效状态时为true。 Read-only.
Component
el : Ext.Element
封装了当前组件的Ext.Element。 Read-only。通常情况下，这将是一个<DIV>元素，它由此类的...

封装了当前组件的Ext.Element。 Read-only。

通常情况下，这将是一个<DIV>元素，它由此类的 onRender方法创建，但是它可以通过使用 autoEl 配置项进行覆盖。

注意: 直到组件渲染完成此元素都将处于无效状态。

如需向当前组件的 DOM事件(而不是当前组件自己的Observable事件)添加监听器， 更多建议，参见 listeners 配置项，或者直接使用一个render监听器:

new Ext.Panel({
    title: 'The Clickable Panel',
    listeners: {
        render: function(p) {
            // Append the Panel to the click handler's argument list.
            p.getEl().on('click', handlePanelClick.createDelegate(null, [p], true));
        },
        single: true  // Remove the listener after first invocation
    }
});

另请参见 getEl

Component
hidden : Boolean
如果当前组件处于隐藏状态，此值为true。Read-only。
Component
initialConfig : Object
当前组件的初始化配置描述。 Read-only。
Component
ownerCt : Ext.Container
组件所属的Container (默认为undefined，当前组件被添加到一个容器中时此值被自动设置)...
组件所属的Container (默认为undefined，当前组件被添加到一个容器中时此值被自动设置)。 Read-only。

注意: 如需访问容器中的子组件，参见 itemId 。

Component
refOwner : Ext.Container
如果当前组件是一个容器的孩子，并且是通过一个 ref 配置项被注册的，则此值为 ref 引用被插入到的祖先容器。
如果当前组件是一个容器的孩子，并且是通过一个 ref 配置项被注册的，则此值为 ref 引用被插入到的祖先容器。
Component
rendered : Boolean
如果当前组件已经被渲染了，此值为true。Read-only.
Component

公共方法

Method Defined By
Toolbar.Spacer ()
创建一个新的Spacer
创建一个新的Spacer
参数:
  • 无。
返回值:
  • void
Toolbar.Spacer
addClass ( string cls ) : Ext.Component
为组件底层的元素添加CSS样式。
为组件底层的元素添加CSS样式。
参数:
  • cls : string
    需要添加的CSS样式的class名称
返回值:
  • Ext.Component
    this
Component
addEvents( Object|String o, string Optional. ) : void
添加指定的事件到事件列表上，事件会被该Observable触发。
添加指定的事件到事件列表上，事件会被该Observable触发。
参数:
  • o : Object|String
    以事件名作为属性true作为值的对象 或者当多个事件名被分开的传递时则为第一个事件名。
  • Optional. : string
    事件名被分开的传递时则为事件名。 用法:
    this.addEvents('storeloaded', 'storecleared');
返回值:
  • void
Observable
addListener( String eventName, Function handler, [Object scope], [Object options] ) : void
给对象添加事件处理器。
给对象添加事件处理器。
参数:
  • eventName : String
    监听的事件名。
  • handler : Function
    事件调用的方法
  • scope : Object
    （可选）处理方法执行的作用域 (this的引用 reference)。 如果被忽略。默认为触发事件的对象。
  • options : Object
    （可选）包含处理器配置和属性的对象。 可能包含以下的属性:
    • scope : Object
      处理方法执行的作用域(this的引用) 。 如果被忽略。默认为触发事件的对象。
    • delay : Number
      在触发事件后延迟调用处理器的毫秒数。
    • single : Boolean
      如果为True则添加一个处理器来处理下一次的事件触发（仅一次），然后移除自己。
    • buffer : Number
      使得处理器延迟指定毫秒数后预定的运行在 一个Ext.util.DelayedTask中 。 如果事件在时间内再一次被触发，原始的处理器不会被调用，但是新的处理器会预定的在他的位置上。
    • target : Observable
      如果事件在目标的Observable上触发则仅仅调用处理器， 否则 事件会从子类的Observable上冒泡

    组合选项
    使用这些选项参数,可能会组合出不同类型的监听器：

    一个延迟的，一次性的监听器。

    myDataView.on('click', this.onClick, this, {
single: true,
delay: 100
});

    一次调用附加多个处理器
    该方法同样支持传递一个包含指定的多个处理器的属性的配置对象参数。

    myGridPanel.on({
'click' : {
    fn: this.onClick,
    scope: this,
    delay: 100
},
'mouseover' : {
    fn: this.onMouseOver,
    scope: this
},
'mouseout' : {
    fn: this.onMouseOut,
    scope: this
}
});

    或者一个简写的语法：

    myGridPanel.on({
'click' : this.onClick,
'mouseover' : this.onMouseOver,
'mouseout' : this.onMouseOut,
 scope: this
});
返回值:
  • void
Observable
applyToMarkup ( String/HTMLElement el ) : void
将此组件添加到已存在的有效的HTML标签中。 使用该方法时，无需再调用render()方法。
将此组件添加到已存在的有效的HTML标签中。 使用该方法时，无需再调用render()方法。
参数:
  • el : String/HTMLElement
返回值:
  • void
Component
cloneConfig ( Object overrides ) : Ext.Component
默认使用原先传递给当前实例的配置值克隆当前组件。
默认使用原先传递给当前实例的配置值克隆当前组件。
参数:
  • overrides : Object
    一个新的配置项，包含需要覆盖到克隆版本的所有属性。 可以传递一个id参数给此对象，否则将自动生成一个新的id以避免发生重复。
返回值:
  • Ext.Component
    当前组件的克隆副本
Component
destroy () : void
通过如下方法销毁对象：删除所有的事件监听器、将组件的元素从DOM树中删除...
通过如下方法销毁对象：删除所有的事件监听器、将组件的元素从DOM树中删除（如果可以）、 将组件从它的 Ext.Container（如果可用）中删除、 并且将它从Ext.ComponentMgr中 注销。 销毁操作一般由框架自动完成，一般情况下不需要直接调用该方法。
参数:
  • 无。
返回值:
  • void
Component
disable () : Ext.Component
将组件置为无效状态，并出发'disable'事件。
将组件置为无效状态，并出发'disable'事件。
参数:
  • 无。
返回值:
  • Ext.Component
    this
Component
enable () : Ext.Component
将组件置为有效状态并触发'enable'事件。
将组件置为有效状态并触发'enable'事件。
参数:
  • 无。
返回值:
  • Ext.Component
    this
Component
enableBubble( String/Array events ) :void
是否现在使得事件会被该Observable触发并调用 this.getBubbleTarget()方法在拥有者的继承树...

是否现在使得事件会被该Observable触发并调用 this.getBubbleTarget()方法在拥有者的继承树中冒泡。Observable的基础类中没有该方法的实现。

该方法一般被Ext.Components用来冒泡事件到拥有者的容器。参看Ext.Component.getBubbleTarget默认的实现 在Ext.Component中返回组件的直接拥有者。但是如果需要的是一个已知的目标，该方法可以被重写来更快的访问需求的目标。

例子:

Ext.override(Ext.form.Field, {
    // 添加方法到Field的initComponent上改变事件为冒泡
    initComponent : Ext.form.Field.prototype.initComponent.createSequence(function() {
        this.enableBubble('change');
    }),

    // 我们知道我们想让Field的事件冒泡到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() {
            // 如果样式被修改标题会变红。
            myForm.header.setStyle('color', 'red');
        }
    }
});
参数:
  • events : String/Array
    冒泡的事件名，或事件名数组
返回值:
  • void
Observable
findParentBy ( Function fn ) : Ext.Container
通过自定义的函数查找当前组件上层任何层次上的容器...
通过自定义的函数查找当前组件上层任何层次上的容器。 如果传递的函数返回true，容器对象将被返回。
参数:
  • fn : Function
    自定义的函数，使用如下参数调用(container,this component)。
返回值:
  • Ext.Container
    自定义函数返回true的第一个容器
Component
findParentByType ( String/Class xtype ) : Ext.Container
通过xtype或者class查找当前组件上层任何层次上的容器
通过xtype或者class查找当前组件上层任何层次上的容器
参数:
  • xtype : String/Class
    组件的xtype字符串，或者直接是组件的class
返回值:
  • Ext.Container
    符合指定xtype或者class的第一个容器
Component
fireEvent( String eventName, Object... args ) : Boolean
用传入的参数触发指定的事件 (减去事件名)。 一个事件可以被设置为冒泡 Obse...

用传入的参数触发指定的事件 (减去事件名)。

一个事件可以被设置为冒泡到Observable父类继承树(参看 Ext.Component.getBubbleTarget) 调用enableBubble实现。

参数:
  • eventName : String
    触发的事件名。
  • args : Object...
    传递给处理器的可变长度参数。
返回值:
  • Boolean
    如果有任何的处理器返回false则返回false，否则返回true。
Observable
focus ( [ Boolean selectText ], [ Boolean/Number delay ] ) : Ext.Component
尝试将当前组件设为焦点。
尝试将当前组件设为焦点。
参数:
  • selectText : Boolean
    (可选) 如果可用，同时选中组件内部的文本
  • delay : Boolean/Number
    (可选)将当前组件设置为焦点的延迟时间(设置为true等于0毫秒)
返回值:
  • Ext.Component
    this
Component
getBox ( [ Boolean local ] ) : Object
获取组件底层元素当前盒子模型的尺寸。（译者注：盒子模型是CSS术语，详细解释请自行搜索。）
获取组件底层元素当前盒子模型的尺寸。（译者注：盒子模型是CSS术语，详细解释请自行搜索。）
参数:
  • local : Boolean
    (可选)值为true时，组件的left值和top值将代替页面的XY被返回。(默认值为false)
返回值:
  • Object
    返回值的格式{x, y, width, height}
BoxComponent
getBubbleTarget () : Ext.Container
为Observable的fireEvent方法提供链接，它沿着继承结构进行冒泡操作。
为Observable的fireEvent方法提供链接，它沿着继承结构进行冒泡操作。
参数:
  • 无。
返回值:
  • Ext.Container
    拥有当前组件的容器。
Component
getEl () : Ext.Element
返回 Ext.Element ，它包装了当前组件。...

返回 Ext.Element ，它包装了当前组件。

通常情况下，这将是一个<DIV>元素，它是由该类的onRender方法创建的， 但是可以使用autoEl配置项 覆盖它。

注意: 此元素将会一直处于无效状态直到当前组件渲染完成。

如需向当前组件的 DOM事件(而不是当前组件自己的Observable事件)添加监听器， 更多建议，参见 listeners 配置项，或者直接使用一个render监听器:

new Ext.Panel({
    title: 'The Clickable Panel',
    listeners: {
        render: function(p) {
            // Append the Panel to the click handler's argument list.
            p.getEl().on('click', handlePanelClick.createDelegate(null, [p], true));
        },
        single: true  // Remove the listener after first invocation
    }
});
参数:
  • 无。
返回值:
  • Ext.Element
    包装当前组件的元素。
Component
getHeight () : Number
获取该组件的当前高度值。
获取该组件的当前高度值。
参数:
  • 无。
返回值:
  • Number
BoxComponent
getId () : String
返回当前组件的id，如果没有定义id，则自动生成并返回一个id:'ext-comp-'...
返回当前组件的 id 如果没有定义 id 则自动生成并返回一个 id

'ext-comp-' + (++Ext.Component.AUTO_ID)
参数:
  • 无。
返回值:
  • String
    id
Component
getItemId () : String
返回当前组件的 itemId 。 如果没有通过配置参数指定 itemId 那么，将会使用...
返回当前组件的 itemId 。 如果没有通过配置参数指定 itemId 那么，将会使用 getId 返回 id 。
参数:
  • 无。
返回值:
  • String
Component
getOuterSize () : Object
获取当前组件所在元素的尺寸大小，包括边缘的空白处。
获取当前组件所在元素的尺寸大小，包括边缘的空白处。
参数:
  • 无。
返回值:
  • Object
    一个包含元素大小的对象 {width: (element width + left/right margins), height: (element height + top/bottom margins)}
BoxComponent
getPosition ( [ Boolean local ] ) : Array
获取组件底层元素当前的XY位置。
获取组件底层元素当前的XY位置。
参数:
  • local : Boolean
    (可选)如果为true，将返回元素的left和top值，而不是相对于页面内的 XY。(默认值为 false)
返回值:
  • Array
    元素的XY位置值(例如：[100, 200])
BoxComponent
getResizeEl () : Ext.Element
返回该组件的最外层用来定义这些组件整体大小的Element...

返回该组件的最外层用来定义这些组件整体大小的Element对象。

通常用 getEl 方法将会返回相同的Element对象，但在有些情况下，组件可能有一些更多的封装了它的主要动态Element对象的Element对象。

例如ComboBox。它是封装在一个包含<input>元素的包装元素里(这将返回其 getEl方法和触发按钮的元素)。返回的元素为resizeEl。

参数:
  • 无。
返回值:
  • Ext.Element
    The Element which is to be resized by size managing layouts.
BoxComponent
getSize () : Object
获取组件底层元素当前的大小。
获取组件底层元素当前的大小。
参数:
  • 无。
返回值:
  • Object
    一个包含元素大小的对象{width: (element width), height: (element height)}
BoxComponent
getWidth () : Number
获取该组件的当前宽度值。
获取该组件的当前宽度值。
参数:
  • 无。
返回值:
  • Number
BoxComponent
getXType () : String
获取当前组件的xtype，它是用 Ext.ComponentMgr 注册的。 所有可用的xtype列表，参见...
获取当前组件的xtype，它是用 Ext.ComponentMgr 注册的。 所有可用的xtype列表，参见 Ext.Component 类头部。示例用法:

var t = new Ext.form.TextField();
alert(t.getXType());  // alerts 'textfield'
参数:
  • 无。
返回值:
  • String
    The xtype
Component
getXTypes () : String
返回此组件的xtype继承树，用字符'-'分隔。 所有可用的xtype值...

返回此组件的xtype继承树，用字符'-'分隔。 所有可用的xtype值，请参见Ext.Component 类的头部。

如果使用你自己的子类，请注意，组件必须注册它自己的xtype值以便区别于继承的xtype。

示例用法:

var t = new Ext.form.TextField();
alert(t.getXTypes());  // alerts 'component/box/field/textfield'
参数:
  • 无。
返回值:
  • String
    xtype层次字符串
Component
hasListener( String eventName ) : Boolean
检测对象是否包含指定事件的任何监听器
检测对象是否包含指定事件的任何监听器
参数:
  • eventName : String
    检测的事件名
返回值:
  • Boolean
    如果事件被监听则为true，否则为false
Observable
hide () : Ext.Component
隐藏当前组件。 监听 beforehide' 事件并且返回false 可以取消隐藏组件的操作。 在隐藏组件之后触发...
隐藏当前组件。 监听 beforehide' 事件并且返回false 可以取消隐藏组件的操作。 在隐藏组件之后触发 ' hide' 事件。 如果组件被配置成 hidden 那么此方法在内部被调用。
参数:
  • 无。
返回值:
  • Ext.Component
    this
Component
isVisible () : Boolean
如果当前组件可见，返回true。
如果当前组件可见，返回true。
参数:
  • 无。
返回值:
  • Boolean
    如果当前组件可见，返回true，其它返回false。
Component
isXType ( String xtype , [ Boolean shallow ] ) : Boolean
Tests whether or not this Component is of a specific xtype. This can test whether this Component is descended from th...

测试此组件是否是指定的xtype。此方法既可以测试是否是指定的xtype的某个子类， 或者它是否直接是指定的xtype类(shallow=true)。

如果使用你自己的子类，必须知道组件必须注册它的xtype值。

所有可用的xtype列表，参见 Ext.Component 类头部。

示例用法:

var t = new Ext.form.TextField();
var isText = t.isXType('textfield');        // true
var isBoxSubclass = t.isXType('box');       // true, descended from BoxComponent
var isBoxInstance = t.isXType('box', true); // false, not a direct BoxComponent instance
参数:
  • xtype : String
    需要为当前组件进行检测的xtype
  • shallow : Boolean
    (可选) 如果为false，检测组件是否是xtype继承树中的某个子类（默认是这种情况）， 如果为true，只检测组件是否是指定的xtype类型。
返回值:
  • Boolean
    如果当前组件是指定xtype的子类，返回true，其它返回flase。
Component
mon ( Observable|Element item , Object|String ename , Function fn , Object scope , Object opt ) : void
向任何Observable对象(或者元素)上添加监听器，监听器将会在组件...

向任何Observable对象(或者元素)上添加监听器，监听器将会在组件销毁时被自动删除。
用法：

myGridPanel.mon(myGridPanel.getSelectionModel(), 'selectionchange', handleSelectionChange, null, {buffer: 50});

or:

myGridPanel.mon(myGridPanel.getSelectionModel(), {
    selectionchange: handleSelectionChange,
    buffer: 50
});
参数:
  • item : Observable|Element
    需要添加listener/listeners的项目。
  • ename : Object|String
    事件名，或者一个包含事件名属性的对象。
  • fn : Function
    (可选) 如果 ename 参数是一个事件名，此参数为处理函数。
  • scope : Object
    (可选)如果 ename 参数是一个事件名称，此参数是作用域 ( this 引用)，监听函数将会在此作用域中被执行。
  • opt : Object
    (可选)如果 ename 参数是一个事件名称， 此参数是 addListener 配置项。
返回值:
  • void
Component
mun ( Observable|Element item , Object|String ename , Function fn , Object scope ) : void
删除通过mon 方法添加的监听器。
删除通过mon 方法添加的监听器。
参数:
  • item : Observable|Element
    需要删除listener/listeners的项目。
  • ename : Object|String
    事件名称，或者一个包含事件名称属性的对象。
  • fn : Function
    (可选)如果 ename 参数是一个事件名称，此参数是一个处理函数。
  • scope : Object
    (可选)如果 ename 参数是一个事件名称，此参数是作用域 ( this 引用)，监听函数将会在此作用域中被执行。
返回值:
  • void
Component
nextSibling () : Ext.Component
返回所属容器中的下一个组件
返回所属容器中的下一个组件
参数:
  • 无。
返回值:
  • Ext.Component
Component
on( String eventName, Function handler, [Object scope], [Object options] ) : void
给对象添加事件处理器 (addListener的简写形式)
给对象添加事件处理器 (addListener的简写形式。)
参数:
  • eventName : String
    监听的事件类型
  • handler : Function
    事件调用的方法
  • scope : Object
    （可选）处理方法执行时的作用域 (this 的引用)。 如果被忽略。默认为触发事件的对象。
  • options : Object
    可选 包含处理器配置的对象。
返回值:
  • void
Observable
previousSibling () : Ext.Component
返回所属容器中的前一个组件
返回所属容器中的前一个组件
参数:
  • 无。
返回值:
  • Ext.Component
Component
purgeListeners() : void
移除对象上所有的监听器
移除对象上所有的监听器
参数:
  • 无。
返回值:
  • void
Observable
relayEvents( Object o, Array events ) : void
从指定的Observable上传递选择的事件就好像被当前对象触发一样。
从指定的Observable上传递选择的事件就好像被当前对象触发一样。
参数:
  • o : Object
    该Observable上的事件被当前对象传递。
  • events : Array
    传递的数组名。
返回值:
  • void
Observable
removeClass ( string cls ) : Ext.Component
从组件底层的元素上删除一个CSS类。
从组件底层的元素上删除一个CSS类。
参数:
  • cls : string
    需要移除的CSS类名
返回值:
  • Ext.Component
    this
Component
removeListener( String eventName, Function handler, [Object scope] ) : void
删除一个事件处理器。
删除一个事件处理器。
参数:
  • eventName : String
    处理器关联的事件类型。
  • handler : Function
    移除的处理器。 这应该是传递到addListener里的方法的引用。
  • scope : Object
    （可选）处理器指定的初始作用域。
返回值:
  • void
Observable
render ( [ Element/HTMLElement/String container ], [ String/Number position ] ) : void
在传递进来的HTML元素中渲染当前组件。...

在传递进来的HTML元素中渲染当前组件。

如果你正在使用一个Container 对象放置当前组件，那么请不要使用render方法。

当容器第一次被渲染时，它的子组件将会被容器的 layout 管理器渲染。

某些布局管理器允许动态添加子组件。它们包括 Ext.layout.CardLayout, Ext.layout.AnchorLayout, Ext.layout.FormLayout, Ext.layout.TableLayout。

当一个新的子组件被添加时，如果容器已经被渲染了， 你可能需要调用容器的 doLayout 方法来刷新视图，它将导致所有没有被渲染的子组件进行渲染操作。 此操作是必须的，这样你可以添加多个子组件而只刷新一次layout。

当创建复杂的UI时，非常重要的一点是，请记住调整子项目的尺寸和位置是容器的 layout 管理器的职责。 如果你希望子项目的尺寸对用户交互作出反应， 你必须为容器配置一个布局管理器，它将创建和管理你心里想要的那种布局。

忽略容器的layout 配置意味着将会使用一个基本的布局管理器，它除了按次序把子组件 渲染到容器中之外什么事情都不做。 这种情况下，任何尺寸和位置的调整操作都不会发生。

参数:
  • container : Element/HTMLElement/String
    (可选) 需要在其中渲染当前组件的元素。 如果它是从一个已存在的标签中创建的，此参数应该被忽略。
  • position : String/Number
    (可选) 容器中的一个元素ID或者一个DOM节点索引， 当前组件将会被插入到它前面 (默认append到容器的尾部)
返回值:
  • void
Component
resumeEvents() : void
重新开始触发事件。(参见suspendEvents) 如果事件以queueSuspended参数被挂起，则在事件被挂起时 ...
重新开始触发事件。(参见 suspendEvents) 如果事件以queueSuspended 参数被挂起，则在事件被挂起时触发的事件会被传递到所有的监听器上
参数:
  • 无。
返回值:
  • void
Observable
setAutoScroll ( Boolean scroll ) : Ext.BoxComponent
设置该组件内容溢出时是否自动显示滚动条。
设置该组件内容溢出时是否自动显示滚动条。
参数:
  • scroll : Boolean
    值为true的话组件自动显示滚动条。
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setDisabled ( Boolean disabled ) : Ext.Component
工具函数，使用布尔值设置有效/无效(disabled/enabled )。
工具函数，使用布尔值设置有效/无效(disabled/enabled )。
参数:
  • disabled : Boolean
返回值:
  • Ext.Component
    this
Component
setHeight ( Mixed height ) : Ext.BoxComponent
设置此组件的高度。该方法将触发resize事件。
设置此组件的高度。该方法将触发resize事件。
参数:
  • height : Mixed
    The new height to set.
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setPagePosition ( Number x , Number y ) : Ext.BoxComponent
设置组件在页面中的XY位置。 如果需要设置left和top值 ，请使用...
设置组件在页面中的XY位置。 如果需要设置left和top值 ，请使用setPosition方法。 该方法触发move事件。
参数:
  • x : Number
    The new x position
  • y : Number
    The new y position
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setPosition ( Number left , Number top ) : Ext.BoxComponent
设置组件的left和top值。设置组件的页面XY值，请使用setPagePosition方法。该方法触发...
设置组件的left和top值。设置组件的页面XY值，请使用setPagePosition方法。该方法触发move事件。
参数:
  • left : Number
    The new left
  • top : Number
    The new top
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setSize ( Mixed width , Mixed height ) : Ext.BoxComponent
设置BoxComponent的宽度和高度。 此方法触发resize事件...
设置BoxComponent的宽度和高度。 此方法触发resize事件。此方法可以接收单独的width或者height值作为参数， 或者你可以传递像这样的一个size对象： {width:10, height:20} 。
参数:
  • width : Mixed
    设置的新的width值。这可以是：
    • 一个Number类型指定Element新的宽度 Ext.Element.defaultUnit(默认为像素 :'px')。
    • 一个String类型用于设置width的CSS样式。
    • 一个size对象格式为 {width: widthValue, height: heightValue} 。
    • 值为 undefined 时，保留原来的width不变。
  • height : Mixed
    设置的新的height值(如果第一个参数传递了一个size对象，此参数没有必要传递)。这可以是：
    • 一个Number类型指定Element新的高度 Ext.Element.defaultUnit(默认为像素 :'px')。
    • 一个String类型用于设置height的CSS样式。也有可能不会被使用到。
    • 值为 undefined 时，保留原来的height不变。
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setVisible ( Boolean visible ) : Ext.Component
工具方法，通过使用布尔值隐藏或者显示当前组件。
工具方法，通过使用布尔值隐藏或者显示当前组件。
参数:
  • visible : Boolean
    true时显示，false时隐藏
返回值:
  • Ext.Component
    this
Component
setWidth ( Mixed width ) : Ext.BoxComponent
设置组件的宽度。 此方法触发resize事件。
设置组件的宽度。 此方法触发resize事件。
参数:
  • width : Mixed
    The new width to set.
返回值:
  • Ext.BoxComponent
    this
BoxComponent
show () : Ext.Component
显示当前组件。监听' beforeshow' 事件，返回 false 取消显示组件...
显示当前组件。监听' beforeshow' 事件，返回 false 取消显示组件。在显示组件之后触发' show' 事件。
参数:
  • 无。
返回值:
  • Ext.Component
    this
Component
suspendEvents( Boolean queueSuspended ) : void
暂停触发所有的事件。 (参看resumeEvents)
暂停触发所有的事件。（参看 resumeEvents)
参数:
  • queueSuspended : Boolean
    如果传递为true则排列好暂停的事件使得在调用 resumeEvents 后再触发它们，而不是抛弃所有暂停的事件。
返回值:
  • void
Observable
syncSize () : Ext.BoxComponent
强制组件的大小按照此组件底层元素当前的高度和宽度计算。
强制组件的大小按照此组件底层元素当前的高度和宽度计算。
参数:
  • 无。
返回值:
  • Ext.BoxComponent
    this
BoxComponent
un( String eventName, Function handler, [Object scope] ) : void
删除一个事件处理器(removeListener方法的简写形式)
删除一个事件处理器(removeListener方法的简写形式。)
参数:
  • eventName : String
    处理器关联的事件类型
  • handler : Function
    被删除的处理器 这应该是传入 addListener 中的方法的引用。
  • scope : Object
    （可选）为处理器指定的初始作用域。
返回值:
  • void
Observable
update ( Mixed htmlOrData , [ Boolean loadScripts ], [ Function callback ] ) : void
刷新组件的内部区域。
刷新组件的内部区域。
参数:
  • htmlOrData : Mixed
    如果已经通过tpl为当前组件配置了一个模板，那么 将会使用此参数来装配模板。 如果没有为当前组件配置模板，组件的内容区域将会通过Ext.Element 进行刷新。
  • loadScripts : Boolean
    (可选)只用在使用html配置时此参数才合法。默认为false。
  • callback : Function
    (可选)只用在使用html配置时此参数才合法。 当脚本加载完成时回调函数才被执行。
返回值:
  • void
Component
updateBox ( Object box ) : Ext.BoxComponent
设置此组件底层元素的盒子模型尺寸。(译者注：盒子模型是CSS术语，详细资料请自行搜索。)
设置此组件底层元素的盒子模型尺寸。(译者注：盒子模型是CSS术语，详细资料请自行搜索。)
参数:
  • box : Object
    一个格式为{x, y, width, height}的对象
返回值:
  • Ext.BoxComponent
    this
BoxComponent

公共事件

Event Defined By
added : ( Ext.Component this , Ext.Container ownerCt , number index )
当一个组件被添加到一个Ext.Container时触发
当一个组件被添加到一个Ext.Container时触发
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • ownerCt : Ext.Container
    用于组件的容器
  • index : number
    添加组件的位置
Component
afterrender : ( Ext.Component this )
在组件渲染完成之后触发...

在组件渲染完成之后触发。

afterrender事件在当前组件被rendered 结束之后、在为组件定义的所有afterRender方法执行之后 触发，并且，如果有stateful， 也在状态被保存之后才触发。

监听器将会以如下参数格式被调用:
  • this : Ext.Component
Component
beforedestroy : ( Ext.Component this )
在组件 destroyed 之前触发。 在事件监听器中返回false以停止 destroy 操作。
在组件 destroyed 之前触发。 在事件监听器中返回false以停止 destroy 操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforehide : ( Ext.Component this )
在调用hide方法隐藏组件之前触发。 在事件监听器中返回false可以停止隐藏操作。
在调用hide方法隐藏组件之前触发。 在事件监听器中返回false可以停止隐藏操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforerender : ( Ext.Component this )
在组件被rendered 之前触发。 在事件监听器中返回false可以停止render 操作。
在组件被rendered 之前触发。 在事件监听器中返回false可以停止render 操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforeshow : ( Ext.Component this )
在调用show()方法现实组件之前触发。 事件处理函数返回false可以停止show。
在调用show 方法现实组件之前触发。 事件处理函数返回false可以停止show。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforestaterestore : ( Ext.Component this , Object state )
在组件状态恢复之前触发。返回false停止恢复状态操作。
在组件状态恢复之前触发。返回false停止恢复状态操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    StateProvider返回的状态哈希值。 如果没有禁止此事件，那么状态对象会被传递给applyState。 默认情况下，这样简单地把属性值拷贝到当前组件中。 可以覆盖此方法以提供自定的状态恢复操作。
Component
beforestatesave : ( Ext.Component this , Object state )
在组件状态被保存到配置的状态提供者之前触发。 返回false可以停止保存。
在组件状态被保存到配置的状态提供者之前触发。 返回false可以停止保存。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    状态值哈希。 这由在组件上调用getState() 方法决定。 此方法必须由开发者提供，返回是否需要对状态进行描述，默认情况下， Ext.Component有一个空实现。
Component
destroy : ( Ext.Component this )
在组件被销毁之后触发。
在组件被destroyed之后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
disable : ( Ext.Component this )
在组件被设置为无效状态后触发。
在组件被设置为无效状态后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
enable : ( Ext.Component this )
当组件被设置为有效(enabled)之后触发。
当组件被设置为有效(enabled)之后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
hide : ( Ext.Component this )
在组件被隐藏之后触发。 当调用hide 方法隐藏组件之后触发。
在组件被隐藏之后触发。 当调用hide 方法隐藏组件之后触发。
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
move : ( Ext.Component this , Number x , Number y )
在组件移动之后触发。
在组件移动之后触发。
监听器将会用如下的参数格式来调用:
  • this : Ext.Component
  • x : Number
    The new x position
  • y : Number
    The new y position
BoxComponent
removed : ( Ext.Component this , Ext.Container ownerCt )
当一个组件被从Ext.Container容器中删除时触发
当一个组件被从Ext.Container容器中删除时触发
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • ownerCt : Ext.Container
    持有组件的容器
Component
render : ( Ext.Component this )
在组件被渲染之后触发。
在组件被 rendered(渲染) 之后触发。
监听器将以如下的参数格式被调用:
  • this : Ext.Component
Component
resize : ( Ext.Component this , Number adjWidth , Number adjHeight , Number rawWidth , Number rawHeight )
在组件被调整大小之后触发。
在组件被调整大小之后触发。
监听器将以如下的参数格式被调用:
  • this : Ext.Component
  • adjWidth : Number
    这是width调整后的值
  • adjHeight : Number
    这是height调整后的值
  • rawWidth : Number
    这是width原来的值
  • rawHeight : Number
    这是height原来的值
BoxComponent
show : ( Ext.Component this )
在调用show 方法显示组件之后触发。
在调用show 方法显示组件之后触发。
监听器将会用如下的参数格式被调用:
  • this : Ext.Component
Component
staterestore : ( Ext.Component this , Object state )
组件状态被存储之后触发。
组件状态被存储之后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    StateProvider返回的状态哈希值。 如果没有禁止此事件，那么状态对象会被传递给applyState。 默认情况下，这样简单地把属性值拷贝到当前组件中。 可以覆盖此方法以提供自定的状态恢复操作。
Component
statesave : ( Ext.Component this , Object state )
在组件状态被保存到所配置的状态提供者之后触发。
在组件状态被保存到所配置的状态提供者之后触发。
监听器将会用如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    状态值hash。 这是由在足见上调用getState() 方法决定的。 开发者必须提供此方法以返回是否需要恢复状态，默认情况下， Ext.Component有一个空实现。
Component


Observable
    Component
      BoxComponent
        Toolbar.Item
          Toolbar.TextItem

Class Ext.Toolbar.TextItem

包: | Ext
定义类的文件: | Toolbar.js
类: | Toolbar.TextItem
继承自: | Toolbar.Item
一个简单的类，用来向一个工具条中直接渲染一个文本 (使用css类名 : 'xtb-text')。 使用方法:
new Ext.Panel({
    tbar : [
        {xtype: 'tbtext', text: 'Item 1'} // or simply 'Item 1'

    ]
});

配置项

Config Options Defined By
allowDomMove : Boolean
在渲染时组件是否可以移动Dom节点(默认为true)。
Component
anchor : String
注: 这个配置只用于该组件被包含在一个已使用AnchorLayout...

注: 这个配置只用于该组件被包含在一个已使用 AnchorLayout (或者其子类)配置的Container时。 基于布局管理器，例如：

  • Ext.form.FormPanel
  • 指定 layout: 'anchor' // or 'form', or 'absolute'

参见 Ext.layout.AnchorLayout. anchor 。

BoxComponent
applyTo : Mixed
指定一个元素的id、一个DOM元素或者一个已经存在并被渲染到DIV中的元素，此DIV已经被...

指定一个元素的id、一个DOM元素或者一个已经存在并被渲染到DIV中的元素，此DIV已经被 渲染到document中，并且为当前组件指定了一些结构化的标签。

  • 描述 :
      当使用了 applyTo， 在主元素中也可以用id或者CSS类名来指定组件的托管部分， 并且，如果可以的话，创建的组件可能也会试图在那个标签中创建它的子组件。
  • 注意 :
      当使用此配置项时，无需调用render()方法。
      如果指定了applyTo属性，任何传递给 renderTo 的值都会被忽略，并且目标元素的父节点将会自动被用作组件的容器。
Component
autoEl : Mixed
一个表签名或者一个 DomHelper 描述，用来创建 Element ，它将封装当前组件...

一个表签名或者一个 DomHelper 描述，用来创建 Element ，它将封装当前组件。

一般情况下你不必指定此值。对于基类 Ext.Component, Ext.BoxComponent, 和 Ext.Container, 此值默认为 'div'。 越复杂的Ext类使用越复杂的DOM结构，这些是由它们自己的onRender方法创建的。

这被设计用来允许开发者创建针对特定应用的 工具组件，这些组件由不同的DOM元素封装而成。 示例用法:

{
    xtype: 'box',
    autoEl: {
        tag: 'img',
        src: 'http://www.example.com/example.jpg'

    }
}, {
    xtype: 'box',
    autoEl: {
        tag: 'blockquote',
        html: 'autoEl is cool!'
    }
}, {
    xtype: 'container',
    autoEl: 'ul',
    cls: 'ux-unordered-list',
    items: {
        xtype: 'box',
        autoEl: 'li',
        html: 'First list item'
    }
}
Component
autoHeight : Boolean
如果值为true，height配置项为'auto'，否则值为false的话使用固定的高度...

如果值为true，height配置项为'auto'，否则值为false的话使用固定的高度， 或者可以由其父类容器 layout manager来控制。(默认值为 false)。

注: 虽然很多组件继承了这个配置选项，但不是所有这些组件的自适应高度配置都会像期望的那样起作用。 设置autoHeight：值为true时，浏览器将根据元素的内容自动设置高度，这将意味着Ext不会去管理高度。

如果是由浏览器来管理高度，需要注意的是，通过浏览器进行调整的结构组件内不能被发现， 因此宽度的变化可能导致需要进行同步处理元素的高度。 例如：

var w = new Ext.Window({
    title: 'Window',
    width: 600,
    autoHeight: true,
    items: {
        title: 'Collapse Me',
        height: 400,
        collapsible: true,
        border: false,
        listeners: {
            beforecollapse: function() {
                w.el.shadow.hide();
            },
            beforeexpand: function() {
                w.el.shadow.hide();
            },
            collapse: function() {
                w.syncShadow();
            },
            expand: function() {
                w.syncShadow();
            }
        }
    }
}).show();
BoxComponent
autoScroll : Boolean
如果值为true，将会在该元素上使用overflow:'auto'配置，并且在必要的时候...
如果值为true，将会在该元素上使用overflow:'auto'配置，并且在必要的时候自动显示滚动条，否则，溢出部分的组件都会被切除(默认值为 false)。
BoxComponent
autoShow : Boolean
如果组件需要检测隐藏CSS属性(如 'x-hidden' 或者 'x-hide-display')并且在渲染时删除...
如果组件需要检测隐藏CSS属性(如 'x-hidden' 或者 'x-hide-display')并且在渲染时删除它们 (默认为false)，设置此值为true。
Component
autoWidth : Boolean
如果为true，使用width:'auto'配置，否则使用固定的宽度...

如果为true，使用width:'auto'配置，否则使用固定的宽度，或者可以由其父类容器的layout manager来控制。(默认值为 false)。

注: 虽然很多组件继承了这个配置选项，但不是所有这些组件的自适应宽度配置都会像期望的那样起作用。 设置autoWidth：值为true时，浏览器将根据元素的内容自动设置宽度，这将意味着Ext不会去管理宽度。

如果是由浏览器来管理宽度，需要注意的是，通过浏览器进行调整的结构组件内不能被发现，因此宽度的变化可能导致需要进行同步处理元素的宽度。 例如，在这个元素的目标是：

<div id='grid-container' style='margin-left:25%;width:50%'></div>
当浏览器窗口改变时，渲染后的Panel必须监听浏览器窗口大小的变化，以便通知子项，浏览器改变了其宽度：

var myPanel = new Ext.Panel({
    renderTo: 'grid-container',
    monitorResize: true, // relay on browser resize
    title: 'Panel',
    height: 400,
    autoWidth: true,
    layout: 'hbox',
    layoutConfig: {
        align: 'stretch'
    },
    defaults: {
        flex: 1
    },
    items: [{
        title: 'Box 1',
    }, {
        title: 'Box 2'
    }, {
        title: 'Box 3'
    }],
});
BoxComponent
boxMaxHeight : Number
设置组件的最大高度值...

设置组件的最大高度值。

警告:布局管理器应用的任何管理大小的配置将会被此属性覆盖。

BoxComponent
boxMaxWidth : Number
设置组件的最大宽度值...

设置组件的最大宽度值。

警告:布局管理器应用的任何管理大小的配置将会被此属性覆盖。

BoxComponent
boxMinHeight : Number
设置组件的最小高度值...

设置组件的最小高度值。

警告:布局管理器应用的任何管理大小的配置将会被此属性覆盖。

BoxComponent
boxMinWidth : Number
设置组件的最小宽度值...

设置组件的最小宽度值。

警告: 布局管理器应用的任何管理大小的配置将会被此属性覆盖。

BoxComponent
bubbleEvents : Array
一个事件数组，当这些事件被触发时，将会被冒泡到所有父容器中。参见....

一个事件数组，当这些事件被触发时，将会被冒泡到所有父容器中。参见 Ext.util.Observable.enableBubble。 默认为 []。

Component
clearCls : String
应用到特殊的clearing div的CSS类， 这个clearing div直接渲染到每个form field的包装器后面...

应用到特殊的clearing div的CSS类， 这个clearing div直接渲染到每个form field的包装器后面，以提供 清除field的功能(默认为 'x-form-clear-left')。

注意: 只有在当前组件被渲染到一个使用FormLayout 布局(例如 Ext.form.FormPanel 或者指定 layout:'form')的 容器中、或者是指定了一个fieldLabel 、或者指定isFormField=true 时此配置才有效。

另请参见 Ext.layout.FormLayout. fieldTpl。

Component
cls : String
一个可选的额外CSS类，它将被添加到当前组件的元素上(默认为'')...
一个可选的额外CSS类，它将被添加到当前组件的元素上(默认为'')。 此属性对于在组件上，或者它的任何使用标准CSS规则的孩子节点上， 添加定制的样式非常有用。
Component
contentEl : String
(可选)指定一个已存在的HTML元素，或者一个已存在HTML元素的...

(可选)指定一个已存在的HTML元素，或者一个已存在HTML元素的 id ，它们将被用作当前组件的内容。

  • 描述 :
    此配置选项被用来将一个已存在的HTML元素 插入到一个新组件(在组件渲染之后它简单地移动DOM元素) 的layout元素中，使它成为该组件的内容。
  • 注意 :
    指定的HTML元素将被append到组件的layout元素中， 在所有配置的 HTML 被插入之后， 并且，这样的话，在render事件 被触发时，document中将不再包含此元素。
    指定的HTML元素将不会参与组件所有可能使用的 layout 过程(译者注：指这些HTML元素 不会参与布局操作)。 它仅是HTML而已。布局操作实在孩子 items 上进行的。
    添加 x-hidden 或者 x-hide-display CSS类，以防在内容渲染到panel时发生闪烁。
Component
ctCls : String
一个可选的外部CSS样式，添加到这个组件的容器(默认值为 '')。 这个方法对于使用标准的CSS规则...

一个可选的外部CSS样式，添加到这个组件的容器(默认值为 '')。 这个方法对于使用标准的CSS规则，为组件或它的任何一个子组件添加特定的样式非常有用。 参见 Ext.layout.ContainerLayout和 extraCls 。

注意: ctCls 默认为 ''期望如下的类，它们将指定一个默认值:

  • Box Layout : 'x-box-layout-ct'
使用一个额外的CSS类配置以上的Class，它是append到默认对象上的。例如， 对于BoxLayout (Hbox and Vbox):
                                ctCls: 'x-box-layout-ct custom-class'

Component
data : Mixed
初始化数据集，它将被应用到 tpl 上以刷新组件的内容区域。
Component
disabled : Boolean
当前组件处于无效状态时为true。 Read-only.
Component
disabledClass : String
当组件处于无效状态时添加到组件上的CSS类(默认为 'x-item-disabled')。
Component
fieldLabel : String
紧靠此field显示的标签文本(默认值为 '')。注意...

紧靠此field显示的标签文本(默认值为 '')。

注意:只有在当前组件被渲染到一个使用FormLayout 的容器中时，此配置才有效。 (例如 Ext.form.FormPanel 或 指定 layout:'form')。

另请参见 hideLabel 、 Ext.layout.FormLayout和 fieldTpl。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Name'
    }]
});
Component
flex : Number
注: 这个配置只用于该组件被包含在一个已使用BoxLayout配置的Container中时...

注: 这个配置只用于该组件被包含在一个已使用BoxLayout配置的Container中时。通过计算每一个子组件的flex值所占全部flex值之和的比例，来决定子组件的宽(HBoxLayout)高(VBoxlayout)。 任何子项的 flex = 0 或 flex = undefined 将不被设置(初始值大小将不被改变)。

BoxComponent
height : Number
组件的高度(默认值为 auto)。注:如果想使用百分比的方式...
组件的高度(默认值为 auto)。注:如果想使用百分比的方式来设置值，请查看 Ext.Component.anchor。
BoxComponent
hidden : Boolean
如果当前组件处于隐藏状态，此值为true。Read-only。
Component
hideLabel : Boolean
true时完全隐藏label元素 ( label 和 separator)。 默认为 false。 默认情况下，即使你不指定...

true时完全隐藏label元素 ( label 和 separator)。 默认为 false。 默认情况下，即使你不指定 fieldLabel 它的空间仍然会被保留，这样这块区域会与其它确实拥有label的区域位于同一排。 讲此值设置为 true 将导致此区域不再保留此空间。

注意: 参见 clearCls 的注释。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield'
        hideLabel: true
    }]
});
Component
hideMode : String
组件如何隐藏，支持的值有： 'visibility' (css visibility), 'offsets' (位置偏移量为负值) 和...

组件如何隐藏，支持的值有： 'visibility' (css visibility), 'offsets' (位置偏移量为负值) 和 'display' (css display).

注意:一般首选默认值 'display'，因为当组件第一次显示的时候它们会自动进行布局 (隐藏的时候不会调整尺寸)。

Component
hideParent : Boolean
此值为true时，当调用hide/show方法时，将会hide和show组件的容器...
此值为true时，当调用hide/show方法时，将会hide和show组件的容器；false时将会 hide和show组件自身(默认为false)。例如，这可以用作window上隐藏按钮的一种 快捷操作，通过设置此按钮的hideParent:true，然后把它添加到window上。
Component
html : String/Object
一个HTML片段，或者一个 DomHelper 描述，用作layout元素的内容(默认为'')。...
一个HTML片段，或者一个 DomHelper 描述，用作layout元素的内容(默认为'')。 这个HTML内容在组件渲染之后才被添加，所以在 render 出发的时候，document中尚未包含此HTML。 但是这个内容将会在所有配置的 contentEl 之前被插入到body标签中。
Component
id : String
当前组件唯一的id(默认为auto-assigned id)...

当前组件唯一的id(默认为auto-assigned id)。 如果你需要在以后访问组件，而又没有一个有效的组件对象引用，那么你需要指定一个 id( 也就是，使用Ext. getCmp方法 )。

注意，此id也将被用作组件底层HTML标签的id，这些标签被渲染到页面中。 这将允许你编写基于id的CSS规则，以独立地描述指定的实例；并且，也可以通过 组件父标签的id选中子元素。

注意:为了避免与唯一的id 产生重复， 请参见 itemId 和 ref 。

注意: 如需访问一个元素的容器，参见 ownerCt 。

Component
itemCls : String
注意: 只有在当前组件被渲染到一个使用FormLayout 布局的 容器中时此配置才有效...

注意: 只有在当前组件被渲染到一个使用FormLayout 布局的 容器中时此配置才有效。 (例如Ext.form.FormPanel 或者指定 layout:'form')。

一个附加的CSS类，应用到div上，包装当前field的表单元素。 如果提供了此参数， field级上的itemCls将会覆盖 container级上提供的 默认itemCls。 为itemCls指定的值将会被添加默认的 类('x-form-item')。

既然它被应用到项目的包装器上(参见 Ext.layout.FormLayout。 fieldTpl)， 它将允许你编写能应用到此field、label(如果有指定)、或者field内部任何其它元素的标准CSS规则。

注意: 参考 fieldLabel的注释。 .

示例用法:

// Apply a style to the field's label:
<style>
    .required .x-form-item-label {font-weight:bold;color:red;}
</style>

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Name',
        itemCls: 'required' //this label will be styled
    },{
        xtype: 'textfield',
        fieldLabel: 'Favorite Color'
    }]
});
Component
itemId : String
当没有可利用的对象引用时，itemId可以作为第二选择，用来获得一个组件的引用， 代替 ...

当没有可利用的对象引用时，itemId可以作为第二选择，用来获得一个组件的引用， 代替 id 与 Ext. getCmp的组合， 使用 itemId 与 Ext.Container. getComponent 方法配合将会获得 itemId 's（的所有者） 或者 id 's（的所有者）。 既然 itemId 's（的所有者）是一个到容器内部MixedCollection的索引， itemId 的作用域就被限定在容器之内---避免与 Ext.ComponentMgr 产生潜在的冲突，它（指Ext.ComponentMgr）需要一个 唯一的 id 。

var c = new Ext.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'); // 与 Ext.getCmp()不同

p2 = p1.ownerCt.getComponent('p2'); // 通过兄弟对象获得引用

另请参见 id 和 ref 。

注意:需要访问一个item的容器请参见 ownerCt 。

Component
labelSeparator : String
每个fieldLabel 文本后面现实的分隔符。 此属性可以在多个层次上进行配置...

每个fieldLabel 文本后面现实的分隔符。 此属性可以在多个层次上进行配置。优先顺序为：

  • field / component level
  • container level
  • layout level (默认为冒号 ':')
如不需要为当前field的label显示分隔符，指定一个空字符串''即可。

注意:参见 clearCls 的注释。

另请参见 hideLabel 和 Ext.layout.FormLayout。 fieldTpl。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    layoutConfig: {
        labelSeparator: '~'   // layout config has lowest priority (defaults to ':')
    },
    labelSeparator: '>>',     // config at container level
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Field 1',
        labelSeparator: '...' // field/component level config supersedes others
    },{
        xtype: 'textfield',
        fieldLabel: 'Field 2' // labelSeparator will be '='

    }]
});
Component
labelStyle : String
一个CSS样式描述字符串，它将直接应用到当前field的label上...

一个CSS样式描述字符串，它将直接应用到当前field的label上。 如果有设置，默认为容器的labelStyle值(例如 Ext.layout.FormLayout.labelStyle , 或者 '')。

注意:参见 clearCls 的注释。

另请参见 hideLabel 和 Ext.layout.FormLayout. fieldTpl。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Name',
        labelStyle: 'font-weight:bold;'
    }]
});
Component
listeners : Object
一个包含一个或多个事件处理器的配置对象，会在初始化的时候被添加到目标对象上...

一个包含一个或多个事件处理器的配置对象，会在初始化的时候被添加到目标对象上。 该配置对象应该是一个有效的监听器配置对象就像 addListener例子中指定的一样可一次附加多个处理器。

ExtJs Components上的DOM事件

一些 ExtJs Component 类导出时会选择一些DOM事件(例如 "click", "mouseover" 等等), 这通常只是在有额外的值可以被添加时发生。例如DataView类的 click事件会传递被点击的节点。也可以直接在Component的HTMLElementevent上访问DOM事件，但必需在Component被渲染后监听器才能添加到Element 上。可以按照以下步骤添加插件:

// 插件会用一个监听器配置对象进行配置。
//该组件会被添加到所有处理方法的参数列表上。
Ext.DomObserver = Ext.extend(Object, {
    constructor: function(config) {
        this.listeners = config.listeners ? config.listeners : config;
    },

    // 组件将自己传递进了插件的初始化方法里
    init: function(c) {
        var p, l = this.listeners;
        for (p in l) {
            if (Ext.isFunction(l[p])) {
                l[p] = this.createHandler(l[p], c);
            } else {
                l[p].fn = this.createHandler(l[p].fn, c);
            }
        }

        // 渲染后立即添加监听器到元素上
        c.render = c.render.createSequence(function() {
            var e = c.getEl();
            if (e) {
                e.on(l);
            }
        });
    },

    createHandler: function(fn, c) {
        return function(e) {
            fn.call(this, e, c);
        };
    }
});

var combo = new Ext.form.ComboBox({

    // 元素被点击后折叠
    plugins: [ new Ext.DomObserver({
        click: function(evt, comp) {
            comp.collapse();
        }
    })],
    store: myStore,
    typeAhead: true,
    mode: 'local',
    triggerAction: 'all'
});

Observable
margins : Object
注:此配置只用于该组件展现在一个使用BorderLayout...

注:此配置只用于该组件展现在一个使用BorderLayout 或 BoxLayout的两个子类之一作为布局的容器。

这个margins对象在该组件中的格式为：

{top: (top margin),right: (right margin),bottom: (bottom margin),left: (left margin)}

也可以是一个字符串，中间用空格分隔，margin值为数字。 把matches中每一个值的次序跟CSS中margin值的排列方式相对应：

  • 如果只有一个值，它适用于所有方面。
  • 如果有两个值，top和bottom的边框设置为第一个值，left和right设置为第二个值。
  • 如果有三个值，top设置为第一个值，left和right设置为第二个值，bottom设置为第三个值。
  • 如果有四个值，分别设置为top, right, bottom, left。

默认值:

{top:0, right:0, bottom:0, left:0}
BoxComponent
overCls : String
一个可选的额外的CSS类，它将在鼠标移过元素时被添加到组件上...
一个可选的额外的CSS类，它将在鼠标移过元素时被添加到组件上，鼠标移出时 删除。(默认为'')。此属性对于在组件上，或者它的任何使用标准CSS规则的孩子节点上， 添加定制的'active' 或者 'hover'样式非常有用。
Component
overflowText : String
当该项目发生溢出时，用于菜单的文本。
Toolbar.Item
pageX : Number
如果该组件被包含在一个指定位置的容器中，这个值表示页面级的x坐标值（译者注：在有滚动条的情况下这个值很有用）。
BoxComponent
pageY : Number
如果该组件被包含在一个指定位置的容器中，这个值表示页面级的y坐标值（译者注：在有滚动条的情况下这个值很有用）。
BoxComponent
plugins : Object/Array
一个对象或者一个对象数组，为组件提供特殊的功能 ...
一个对象或者一个对象数组，为组件提供特殊的功能。 对一个合法的插件唯一的要求是它含有一个init()方法， 能接收一个Ext.Component型的参数。 当组件被创建时，如果有可用的插件，组件将会调用每个插件的init方法， 并将自身的引用作为方法参数传递给它。然后，每个插件就可以调用方法或者响应组件上的事件， 就像需要的那样提供自己的功能。
Component
ptype : String
需要创建配置的ptype。 当传递一个配置对象给构造函数时...
需要创建配置的ptype。 当传递一个配置对象给构造函数时，此配置选项不会被使用。 只有在使用懒初始化的时候此配置项才会被使用， 此时Plugin不是 通过一个完整的实例组件，而是通过一个Component配置指定的。 在渲染时，将会查找ptype以决定创建何种类型的Plugin。

如果你创建自己的Plugin，你可以通过 Ext.ComponentMgr.registerPlugin 对它们进行注册，以便能利用懒初始化和渲染机制。
Component
ref : String
一个路径描述，与组件的 ownerCt 相关，它描述了把当前组件的命名引用放置到哪个父容器中去。...

一个路径描述，与组件的 ownerCt 相关，它描述了把当前组件的命名引用放置到哪个父容器中去。

祖先的坐标路径可以通过'/'字符进行分隔。 例如，将一个Toolbar Button的引用放入 拥有此Toolbar的Panel中:

var myGrid = new Ext.grid.EditorGridPanel({
    title: 'My EditorGridPanel',
    store: myStore,
    colModel: myColModel,
    tbar: [{
        text: 'Save',
        handler: saveChanges,
        disabled: true,
        ref: '../saveButton'
    }],
    listeners: {
        afteredit: function() {
//          The button reference is in the GridPanel
            myGrid.saveButton.enable();
        }
    }
});

在上面的代码中，如果 ref 是 'saveButton' ，那么引用将会被放置到Toolbar中。 ref 中的每个'/' 都会从组件的 ownerCt 向上移动一级。

另请参见 added 和 removed 事件。

Component
region : String
注: 此配置只用于该组件展现在一个布局为BorderLayout的容器中...

注: 此配置只用于该组件展现在一个布局为BorderLayout的容器中(例如指定layout:'border')。

详见Ext.layout.BorderLayout。

BoxComponent
renderTo : Mixed
该值可以是一个节点的id、一个DOM节点或者一个已存在的元素...

该值可以是一个节点的id、一个DOM节点或者一个已存在的元素， 组件将会被渲染到其中。

  • 注意 :
      如果组件不是一个Container 的子项目时， 不要使用此选项。 渲染和管理它的子项目是一个Container 的layout manager的责任。
      当使用此配置项时，无需调用render()方法。

另请参见 render 。

Component
stateEvents : Array
一个事件数组，当它们被触发时，组件需要保存自己的状态(默认值为 none)...

一个事件数组，当它们被触发时，组件需要保存自己的状态(默认值为 none)。 它们可以是任何该组件支持的事件类型，包括浏览器事件和 自定义事件(例如['click', 'customerchange'])。

对于保存和恢复组件状态的详细解释，参见 stateful

Component
stateId : String
为该组件指定的唯一的id值，它被用作管理组件状态的目的...
为该组件指定的唯一的id值，它被用作管理组件状态的目的。 (如果设定了id，默认值为组件自己的id，否则，如果组件使用自动生成的id，此值为null)。

对于保存和反解析组件状态的解释，参见 stateful 。

Component
stateful : Boolean
一个标志参数，它将引起组件在启动时尝试从一个保存的状态中恢复内部状态参数...

一个标志参数，它将引起组件在启动时尝试从一个保存的状态中恢复内部状态参数。 组件必须要么拥有一个 stateId 或者 id ，它们被分配给需要被管理的状态属性。 在跨页面加载时，不保证自动生成的id属性的稳定性， 并且，不能依赖此id来保存和恢复一个组件的相同状态。

为了保存状态的操作能够工作，状态管理器的提供者必须 被设置成一个Ext.state.Provider 的实现类，它覆盖了set 和get 方法，以便保存和恢复name/value对。 有一个内置的Ext.state.CookieProvider 可用。

为当前页面设置状态提供者:

Ext.state.Manager.setProvider(new Ext.state.CookieProvider({
    expires: new Date(new Date().getTime()+(1000*60*60*24*7)), //7 days from now
}));

当 stateEvents 配置项中其中之一的事件被触发时， 一个状态可保存的组件将试图保存其状态。

保存状态时，一个可保存状态的组件首先需要通过调用 getState 方法来序列化它的状态。 默认情况下，此函数什么事都不做。 开发者必须提供一个实现，返回一个hash对象，它描述了组件可恢复的状态。

getState方法产生的值将会传递给 Ext.state.Manager.set 方法，它使用配置的 Ext.state.Provider 来保存对象，以组件的 stateId 为key，或者，如果此值（指stateId）没有指定时， 使用它的 id 作为key。

在进行构造时，一个可保存状态的组件试图通过调用 Ext.state.Manager.get方法来 恢复它的状态，传递 stateId 或者，如果此值（指stateId）没有指定时， 使用它的 id 作为参数。

结果对象被传递给 applyState 。 applyState 的默认实现只是简单地把属性拷贝到对象中， 但是开发者可以覆盖此方法以支持更多行为。

通过向 beforestaterestore, staterestore, beforestatesave 和 statesave 事件上绑定监听器，你可以在保存和恢复状态时进行额外的处理。

Component
style : String
被添加到组件元素的特定样式。 必须是按照...
被添加到组件元素的特定样式。 必须是按照 Ext.Element.applyStyles 类指定格式的合法参数值。

new Ext.Panel({
    title: 'Some Title',
    renderTo: Ext.getBody(),
    width: 400, height: 300,
    layout: 'form',
    items: [{
        xtype: 'textarea',
        style: {
            width: '95%',
            marginBottom: '10px'
        }
    },
        new Ext.Button({
            text: 'Send',
            minWidth: '100',
            style: {
                marginBottom: '10px'
            }
        })
    ]
});
Component
tabTip : String
注: 这个配置只用于当该组件作为TabPanel的一个子项目时使用...

注: 这个配置只用于当该组件作为TabPanel的一个子项目时使用。

一个String类型的innerHTML(支持html标签)，当鼠标放在该选项上的时，显示一个tooltip。为了tips能够被渲染，Ext.QuickTips.init()必须被提前调用。
BoxComponent
text : String
该文本被用作innerHTML(接受html标签)。
Toolbar.TextItem
tpl : Mixed
一个 Ext.Template , Ext.XTemplate 或者一个用来形成一个Ext.XTemplate的字符串数组...
一个 Ext.Template , Ext.XTemplate 或者一个用来形成一个Ext.XTemplate的字符串数组。 与 data 和 tplWriteMode 配置项协同使用。
Component
tplWriteMode : String
刷新组件的内容区域时使用的Ext.(X)Template方式。 默认为'overwrite' (参见 Ext.XTemplate.overwrite )。
刷新组件的内容区域时使用的Ext.(X)Template方式。 默认为'overwrite' (参见 Ext.XTemplate.overwrite )。
Component
width : Number
组件的宽度(默认值为 auto)。注:如果想使用百分比的方式...
组件的宽度(默认值为 auto)。注:如果想使用百分比的方式来设置值，请查看 Ext.Component.anchor。
BoxComponent
x : Number
如果被包含在一个指定位置的容器中，这个值表示x(left)坐标值。
BoxComponent
xtype : String
需要创建配置的xtype。 当传递一个配置对象给构造函数时...
需要创建配置的xtype。 当传递一个配置对象给构造函数时，此配置选项不会被使用。 只有在使用懒初始化的时候此配置项才会被使用，此时容器的子项目不是 通过一个完整的实例组件，而是通过一个Component配置指定的。 在渲染时，将会查找xtype以决定创建何种类型的子组件。

预定义的xtype列表如下： here。

如果你继承Component创建你自己的组件，你需要使用Ext.ComponentMgr.registerType 对它们进行注册，以便利用懒初始化和渲染机制。
Component
y : Number
如果被包含在一个指定位置的容器中，这个值表示y(top)坐标值。
BoxComponent

公共属性

Property Defined By
disabled : Boolean
当前组件处于无效状态时为true。 Read-only.
Component
el : Ext.Element
封装了当前组件的Ext.Element。 Read-only。通常情况下，这将是一个<DIV>元素，它由此类的...

封装了当前组件的Ext.Element。 Read-only。

通常情况下，这将是一个<DIV>元素，它由此类的 onRender方法创建，但是它可以通过使用 autoEl 配置项进行覆盖。

注意: 直到组件渲染完成此元素都将处于无效状态。

如需向当前组件的 DOM事件(而不是当前组件自己的Observable事件)添加监听器， 更多建议，参见 listeners 配置项，或者直接使用一个render监听器:

new Ext.Panel({
    title: 'The Clickable Panel',
    listeners: {
        render: function(p) {
            // Append the Panel to the click handler's argument list.
            p.getEl().on('click', handlePanelClick.createDelegate(null, [p], true));
        },
        single: true  // Remove the listener after first invocation
    }
});

另请参见 getEl

Component
hidden : Boolean
如果当前组件处于隐藏状态，此值为true。Read-only。
Component
initialConfig : Object
当前组件的初始化配置描述。 Read-only。
Component
ownerCt : Ext.Container
组件所属的Container (默认为undefined，当前组件被添加到一个容器中时此值被自动设置)...
组件所属的Container (默认为undefined，当前组件被添加到一个容器中时此值被自动设置)。 Read-only。

注意: 如需访问容器中的子组件，参见 itemId 。

Component
refOwner : Ext.Container
如果当前组件是一个容器的孩子，并且是通过一个 ref 配置项被注册的，则此值为 ref 引用被插入到的祖先容器。
如果当前组件是一个容器的孩子，并且是通过一个 ref 配置项被注册的，则此值为 ref 引用被插入到的祖先容器。
Component
rendered : Boolean
如果当前组件已经被渲染了，此值为true。Read-only.
Component

公共方法

Method Defined By
Toolbar.TextItem ( String/Object text )
新建一个TextItem
新建一个TextItem
参数:
  • text : String/Object
    一个字符串文本, 或者是一个包含 文本属性的可配置对象 。
返回值:
  • void
Toolbar.TextItem
addClass ( string cls ) : Ext.Component
为组件底层的元素添加CSS样式。
为组件底层的元素添加CSS样式。
参数:
  • cls : string
    需要添加的CSS样式的class名称
返回值:
  • Ext.Component
    this
Component
addEvents( Object|String o, string Optional. ) : void
添加指定的事件到事件列表上，事件会被该Observable触发。
添加指定的事件到事件列表上，事件会被该Observable触发。
参数:
  • o : Object|String
    以事件名作为属性true作为值的对象 或者当多个事件名被分开的传递时则为第一个事件名。
  • Optional. : string
    事件名被分开的传递时则为事件名。 用法:
    this.addEvents('storeloaded', 'storecleared');
返回值:
  • void
Observable
addListener( String eventName, Function handler, [Object scope], [Object options] ) : void
给对象添加事件处理器。
给对象添加事件处理器。
参数:
  • eventName : String
    监听的事件名。
  • handler : Function
    事件调用的方法
  • scope : Object
    （可选）处理方法执行的作用域 (this的引用 reference)。 如果被忽略。默认为触发事件的对象。
  • options : Object
    （可选）包含处理器配置和属性的对象。 可能包含以下的属性:
    • scope : Object
      处理方法执行的作用域(this的引用) 。 如果被忽略。默认为触发事件的对象。
    • delay : Number
      在触发事件后延迟调用处理器的毫秒数。
    • single : Boolean
      如果为True则添加一个处理器来处理下一次的事件触发（仅一次），然后移除自己。
    • buffer : Number
      使得处理器延迟指定毫秒数后预定的运行在 一个Ext.util.DelayedTask中 。 如果事件在时间内再一次被触发，原始的处理器不会被调用，但是新的处理器会预定的在他的位置上。
    • target : Observable
      如果事件在目标的Observable上触发则仅仅调用处理器， 否则 事件会从子类的Observable上冒泡

    组合选项
    使用这些选项参数,可能会组合出不同类型的监听器：

    一个延迟的，一次性的监听器。

    myDataView.on('click', this.onClick, this, {
single: true,
delay: 100
});

    一次调用附加多个处理器
    该方法同样支持传递一个包含指定的多个处理器的属性的配置对象参数。

    myGridPanel.on({
'click' : {
    fn: this.onClick,
    scope: this,
    delay: 100
},
'mouseover' : {
    fn: this.onMouseOver,
    scope: this
},
'mouseout' : {
    fn: this.onMouseOut,
    scope: this
}
});

    或者一个简写的语法：

    myGridPanel.on({
'click' : this.onClick,
'mouseover' : this.onMouseOver,
'mouseout' : this.onMouseOut,
 scope: this
});
返回值:
  • void
Observable
applyToMarkup ( String/HTMLElement el ) : void
将此组件添加到已存在的有效的HTML标签中。 使用该方法时，无需再调用render()方法。
将此组件添加到已存在的有效的HTML标签中。 使用该方法时，无需再调用render()方法。
参数:
  • el : String/HTMLElement
返回值:
  • void
Component
cloneConfig ( Object overrides ) : Ext.Component
默认使用原先传递给当前实例的配置值克隆当前组件。
默认使用原先传递给当前实例的配置值克隆当前组件。
参数:
  • overrides : Object
    一个新的配置项，包含需要覆盖到克隆版本的所有属性。 可以传递一个id参数给此对象，否则将自动生成一个新的id以避免发生重复。
返回值:
  • Ext.Component
    当前组件的克隆副本
Component
destroy () : void
通过如下方法销毁对象：删除所有的事件监听器、将组件的元素从DOM树中删除...
通过如下方法销毁对象：删除所有的事件监听器、将组件的元素从DOM树中删除（如果可以）、 将组件从它的 Ext.Container（如果可用）中删除、 并且将它从Ext.ComponentMgr中 注销。 销毁操作一般由框架自动完成，一般情况下不需要直接调用该方法。
参数:
  • 无。
返回值:
  • void
Component
disable () : Ext.Component
将组件置为无效状态，并出发'disable'事件。
将组件置为无效状态，并出发'disable'事件。
参数:
  • 无。
返回值:
  • Ext.Component
    this
Component
enable () : Ext.Component
将组件置为有效状态并触发'enable'事件。
将组件置为有效状态并触发'enable'事件。
参数:
  • 无。
返回值:
  • Ext.Component
    this
Component
enableBubble( String/Array events ) :void
是否现在使得事件会被该Observable触发并调用 this.getBubbleTarget()方法在拥有者的继承树...

是否现在使得事件会被该Observable触发并调用 this.getBubbleTarget()方法在拥有者的继承树中冒泡。Observable的基础类中没有该方法的实现。

该方法一般被Ext.Components用来冒泡事件到拥有者的容器。参看Ext.Component.getBubbleTarget默认的实现 在Ext.Component中返回组件的直接拥有者。但是如果需要的是一个已知的目标，该方法可以被重写来更快的访问需求的目标。

例子:

Ext.override(Ext.form.Field, {
    // 添加方法到Field的initComponent上改变事件为冒泡
    initComponent : Ext.form.Field.prototype.initComponent.createSequence(function() {
        this.enableBubble('change');
    }),

    // 我们知道我们想让Field的事件冒泡到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() {
            // 如果样式被修改标题会变红。
            myForm.header.setStyle('color', 'red');
        }
    }
});
参数:
  • events : String/Array
    冒泡的事件名，或事件名数组
返回值:
  • void
Observable
findParentBy ( Function fn ) : Ext.Container
通过自定义的函数查找当前组件上层任何层次上的容器...
通过自定义的函数查找当前组件上层任何层次上的容器。 如果传递的函数返回true，容器对象将被返回。
参数:
  • fn : Function
    自定义的函数，使用如下参数调用(container,this component)。
返回值:
  • Ext.Container
    自定义函数返回true的第一个容器
Component
findParentByType ( String/Class xtype ) : Ext.Container
通过xtype或者class查找当前组件上层任何层次上的容器
通过xtype或者class查找当前组件上层任何层次上的容器
参数:
  • xtype : String/Class
    组件的xtype字符串，或者直接是组件的class
返回值:
  • Ext.Container
    符合指定xtype或者class的第一个容器
Component
fireEvent( String eventName, Object... args ) : Boolean
用传入的参数触发指定的事件 (减去事件名)。 一个事件可以被设置为冒泡 Obse...

用传入的参数触发指定的事件 (减去事件名)。

一个事件可以被设置为冒泡到Observable父类继承树(参看 Ext.Component.getBubbleTarget) 调用enableBubble实现。

参数:
  • eventName : String
    触发的事件名。
  • args : Object...
    传递给处理器的可变长度参数。
返回值:
  • Boolean
    如果有任何的处理器返回false则返回false，否则返回true。
Observable
focus ( [ Boolean selectText ], [ Boolean/Number delay ] ) : Ext.Component
尝试将当前组件设为焦点。
尝试将当前组件设为焦点。
参数:
  • selectText : Boolean
    (可选) 如果可用，同时选中组件内部的文本
  • delay : Boolean/Number
    (可选)将当前组件设置为焦点的延迟时间(设置为true等于0毫秒)
返回值:
  • Ext.Component
    this
Component
getBox ( [ Boolean local ] ) : Object
获取组件底层元素当前盒子模型的尺寸。（译者注：盒子模型是CSS术语，详细解释请自行搜索。）
获取组件底层元素当前盒子模型的尺寸。（译者注：盒子模型是CSS术语，详细解释请自行搜索。）
参数:
  • local : Boolean
    (可选)值为true时，组件的left值和top值将代替页面的XY被返回。(默认值为false)
返回值:
  • Object
    返回值的格式{x, y, width, height}
BoxComponent
getBubbleTarget () : Ext.Container
为Observable的fireEvent方法提供链接，它沿着继承结构进行冒泡操作。
为Observable的fireEvent方法提供链接，它沿着继承结构进行冒泡操作。
参数:
  • 无。
返回值:
  • Ext.Container
    拥有当前组件的容器。
Component
getEl () : Ext.Element
返回 Ext.Element ，它包装了当前组件。...

返回 Ext.Element ，它包装了当前组件。

通常情况下，这将是一个<DIV>元素，它是由该类的onRender方法创建的， 但是可以使用autoEl配置项 覆盖它。

注意: 此元素将会一直处于无效状态直到当前组件渲染完成。

如需向当前组件的 DOM事件(而不是当前组件自己的Observable事件)添加监听器， 更多建议，参见 listeners 配置项，或者直接使用一个render监听器:

new Ext.Panel({
    title: 'The Clickable Panel',
    listeners: {
        render: function(p) {
            // Append the Panel to the click handler's argument list.
            p.getEl().on('click', handlePanelClick.createDelegate(null, [p], true));
        },
        single: true  // Remove the listener after first invocation
    }
});
参数:
  • 无。
返回值:
  • Ext.Element
    包装当前组件的元素。
Component
getHeight () : Number
获取该组件的当前高度值。
获取该组件的当前高度值。
参数:
  • 无。
返回值:
  • Number
BoxComponent
getId () : String
返回当前组件的id，如果没有定义id，则自动生成并返回一个id:'ext-comp-'...
返回当前组件的 id 如果没有定义 id 则自动生成并返回一个 id

'ext-comp-' + (++Ext.Component.AUTO_ID)
参数:
  • 无。
返回值:
  • String
    id
Component
getItemId () : String
返回当前组件的 itemId 。 如果没有通过配置参数指定 itemId 那么，将会使用...
返回当前组件的 itemId 。 如果没有通过配置参数指定 itemId 那么，将会使用 getId 返回 id 。
参数:
  • 无。
返回值:
  • String
Component
getOuterSize () : Object
获取当前组件所在元素的尺寸大小，包括边缘的空白处。
获取当前组件所在元素的尺寸大小，包括边缘的空白处。
参数:
  • 无。
返回值:
  • Object
    一个包含元素大小的对象 {width: (element width + left/right margins), height: (element height + top/bottom margins)}
BoxComponent
getPosition ( [ Boolean local ] ) : Array
获取组件底层元素当前的XY位置。
获取组件底层元素当前的XY位置。
参数:
  • local : Boolean
    (可选)如果为true，将返回元素的left和top值，而不是相对于页面内的 XY。(默认值为 false)
返回值:
  • Array
    元素的XY位置值(例如：[100, 200])
BoxComponent
getResizeEl () : Ext.Element
返回该组件的最外层用来定义这些组件整体大小的Element...

返回该组件的最外层用来定义这些组件整体大小的Element对象。

通常用 getEl 方法将会返回相同的Element对象，但在有些情况下，组件可能有一些更多的封装了它的主要动态Element对象的Element对象。

例如ComboBox。它是封装在一个包含<input>元素的包装元素里(这将返回其 getEl方法和触发按钮的元素)。返回的元素为resizeEl。

参数:
  • 无。
返回值:
  • Ext.Element
    The Element which is to be resized by size managing layouts.
BoxComponent
getSize () : Object
获取组件底层元素当前的大小。
获取组件底层元素当前的大小。
参数:
  • 无。
返回值:
  • Object
    一个包含元素大小的对象{width: (element width), height: (element height)}
BoxComponent
getWidth () : Number
获取该组件的当前宽度值。
获取该组件的当前宽度值。
参数:
  • 无。
返回值:
  • Number
BoxComponent
getXType () : String
获取当前组件的xtype，它是用 Ext.ComponentMgr 注册的。 所有可用的xtype列表，参见...
获取当前组件的xtype，它是用 Ext.ComponentMgr 注册的。 所有可用的xtype列表，参见 Ext.Component 类头部。示例用法:

var t = new Ext.form.TextField();
alert(t.getXType());  // alerts 'textfield'
参数:
  • 无。
返回值:
  • String
    The xtype
Component
getXTypes () : String
返回此组件的xtype继承树，用字符'-'分隔。 所有可用的xtype值...

返回此组件的xtype继承树，用字符'-'分隔。 所有可用的xtype值，请参见Ext.Component 类的头部。

如果使用你自己的子类，请注意，组件必须注册它自己的xtype值以便区别于继承的xtype。

示例用法:

var t = new Ext.form.TextField();
alert(t.getXTypes());  // alerts 'component/box/field/textfield'
参数:
  • 无。
返回值:
  • String
    xtype层次字符串
Component
hasListener( String eventName ) : Boolean
检测对象是否包含指定事件的任何监听器
检测对象是否包含指定事件的任何监听器
参数:
  • eventName : String
    检测的事件名
返回值:
  • Boolean
    如果事件被监听则为true，否则为false
Observable
hide () : Ext.Component
隐藏当前组件。 监听 beforehide' 事件并且返回false 可以取消隐藏组件的操作。 在隐藏组件之后触发...
隐藏当前组件。 监听 beforehide' 事件并且返回false 可以取消隐藏组件的操作。 在隐藏组件之后触发 ' hide' 事件。 如果组件被配置成 hidden 那么此方法在内部被调用。
参数:
  • 无。
返回值:
  • Ext.Component
    this
Component
isVisible () : Boolean
如果当前组件可见，返回true。
如果当前组件可见，返回true。
参数:
  • 无。
返回值:
  • Boolean
    如果当前组件可见，返回true，其它返回false。
Component
isXType ( String xtype , [ Boolean shallow ] ) : Boolean
Tests whether or not this Component is of a specific xtype. This can test whether this Component is descended from th...

测试此组件是否是指定的xtype。此方法既可以测试是否是指定的xtype的某个子类， 或者它是否直接是指定的xtype类(shallow=true)。

如果使用你自己的子类，必须知道组件必须注册它的xtype值。

所有可用的xtype列表，参见 Ext.Component 类头部。

示例用法:

var t = new Ext.form.TextField();
var isText = t.isXType('textfield');        // true
var isBoxSubclass = t.isXType('box');       // true, descended from BoxComponent
var isBoxInstance = t.isXType('box', true); // false, not a direct BoxComponent instance
参数:
  • xtype : String
    需要为当前组件进行检测的xtype
  • shallow : Boolean
    (可选) 如果为false，检测组件是否是xtype继承树中的某个子类（默认是这种情况）， 如果为true，只检测组件是否是指定的xtype类型。
返回值:
  • Boolean
    如果当前组件是指定xtype的子类，返回true，其它返回flase。
Component
mon ( Observable|Element item , Object|String ename , Function fn , Object scope , Object opt ) : void
向任何Observable对象(或者元素)上添加监听器，监听器将会在组件...

向任何Observable对象(或者元素)上添加监听器，监听器将会在组件销毁时被自动删除。
用法：

myGridPanel.mon(myGridPanel.getSelectionModel(), 'selectionchange', handleSelectionChange, null, {buffer: 50});

or:

myGridPanel.mon(myGridPanel.getSelectionModel(), {
    selectionchange: handleSelectionChange,
    buffer: 50
});
参数:
  • item : Observable|Element
    需要添加listener/listeners的项目。
  • ename : Object|String
    事件名，或者一个包含事件名属性的对象。
  • fn : Function
    (可选) 如果 ename 参数是一个事件名，此参数为处理函数。
  • scope : Object
    (可选)如果 ename 参数是一个事件名称，此参数是作用域 ( this 引用)，监听函数将会在此作用域中被执行。
  • opt : Object
    (可选)如果 ename 参数是一个事件名称， 此参数是 addListener 配置项。
返回值:
  • void
Component
mun ( Observable|Element item , Object|String ename , Function fn , Object scope ) : void
删除通过mon 方法添加的监听器。
删除通过mon 方法添加的监听器。
参数:
  • item : Observable|Element
    需要删除listener/listeners的项目。
  • ename : Object|String
    事件名称，或者一个包含事件名称属性的对象。
  • fn : Function
    (可选)如果 ename 参数是一个事件名称，此参数是一个处理函数。
  • scope : Object
    (可选)如果 ename 参数是一个事件名称，此参数是作用域 ( this 引用)，监听函数将会在此作用域中被执行。
返回值:
  • void
Component
nextSibling () : Ext.Component
返回所属容器中的下一个组件
返回所属容器中的下一个组件
参数:
  • 无。
返回值:
  • Ext.Component
Component
on( String eventName, Function handler, [Object scope], [Object options] ) : void
给对象添加事件处理器 (addListener的简写形式)
给对象添加事件处理器 (addListener的简写形式。)
参数:
  • eventName : String
    监听的事件类型
  • handler : Function
    事件调用的方法
  • scope : Object
    （可选）处理方法执行时的作用域 (this 的引用)。 如果被忽略。默认为触发事件的对象。
  • options : Object
    可选 包含处理器配置的对象。
返回值:
  • void
Observable
previousSibling () : Ext.Component
返回所属容器中的前一个组件
返回所属容器中的前一个组件
参数:
  • 无。
返回值:
  • Ext.Component
Component
purgeListeners() : void
移除对象上所有的监听器
移除对象上所有的监听器
参数:
  • 无。
返回值:
  • void
Observable
relayEvents( Object o, Array events ) : void
从指定的Observable上传递选择的事件就好像被当前对象触发一样。
从指定的Observable上传递选择的事件就好像被当前对象触发一样。
参数:
  • o : Object
    该Observable上的事件被当前对象传递。
  • events : Array
    传递的数组名。
返回值:
  • void
Observable
removeClass ( string cls ) : Ext.Component
从组件底层的元素上删除一个CSS类。
从组件底层的元素上删除一个CSS类。
参数:
  • cls : string
    需要移除的CSS类名
返回值:
  • Ext.Component
    this
Component
removeListener( String eventName, Function handler, [Object scope] ) : void
删除一个事件处理器。
删除一个事件处理器。
参数:
  • eventName : String
    处理器关联的事件类型。
  • handler : Function
    移除的处理器。 这应该是传递到addListener里的方法的引用。
  • scope : Object
    （可选）处理器指定的初始作用域。
返回值:
  • void
Observable
render ( [ Element/HTMLElement/String container ], [ String/Number position ] ) : void
在传递进来的HTML元素中渲染当前组件。...

在传递进来的HTML元素中渲染当前组件。

如果你正在使用一个Container 对象放置当前组件，那么请不要使用render方法。

当容器第一次被渲染时，它的子组件将会被容器的 layout 管理器渲染。

某些布局管理器允许动态添加子组件。它们包括 Ext.layout.CardLayout, Ext.layout.AnchorLayout, Ext.layout.FormLayout, Ext.layout.TableLayout。

当一个新的子组件被添加时，如果容器已经被渲染了， 你可能需要调用容器的 doLayout 方法来刷新视图，它将导致所有没有被渲染的子组件进行渲染操作。 此操作是必须的，这样你可以添加多个子组件而只刷新一次layout。

当创建复杂的UI时，非常重要的一点是，请记住调整子项目的尺寸和位置是容器的 layout 管理器的职责。 如果你希望子项目的尺寸对用户交互作出反应， 你必须为容器配置一个布局管理器，它将创建和管理你心里想要的那种布局。

忽略容器的layout 配置意味着将会使用一个基本的布局管理器，它除了按次序把子组件 渲染到容器中之外什么事情都不做。 这种情况下，任何尺寸和位置的调整操作都不会发生。

参数:
  • container : Element/HTMLElement/String
    (可选) 需要在其中渲染当前组件的元素。 如果它是从一个已存在的标签中创建的，此参数应该被忽略。
  • position : String/Number
    (可选) 容器中的一个元素ID或者一个DOM节点索引， 当前组件将会被插入到它前面 (默认append到容器的尾部)
返回值:
  • void
Component
resumeEvents() : void
重新开始触发事件。(参见suspendEvents) 如果事件以queueSuspended参数被挂起，则在事件被挂起时 ...
重新开始触发事件。(参见 suspendEvents) 如果事件以queueSuspended 参数被挂起，则在事件被挂起时触发的事件会被传递到所有的监听器上
参数:
  • 无。
返回值:
  • void
Observable
setAutoScroll ( Boolean scroll ) : Ext.BoxComponent
设置该组件内容溢出时是否自动显示滚动条。
设置该组件内容溢出时是否自动显示滚动条。
参数:
  • scroll : Boolean
    值为true的话组件自动显示滚动条。
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setDisabled ( Boolean disabled ) : Ext.Component
工具函数，使用布尔值设置有效/无效(disabled/enabled )。
工具函数，使用布尔值设置有效/无效(disabled/enabled )。
参数:
  • disabled : Boolean
返回值:
  • Ext.Component
    this
Component
setHeight ( Mixed height ) : Ext.BoxComponent
设置此组件的高度。该方法将触发resize事件。
设置此组件的高度。该方法将触发resize事件。
参数:
  • height : Mixed
    The new height to set.
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setPagePosition ( Number x , Number y ) : Ext.BoxComponent
设置组件在页面中的XY位置。 如果需要设置left和top值 ，请使用...
设置组件在页面中的XY位置。 如果需要设置left和top值 ，请使用setPosition方法。 该方法触发move事件。
参数:
  • x : Number
    The new x position
  • y : Number
    The new y position
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setPosition ( Number left , Number top ) : Ext.BoxComponent
设置组件的left和top值。设置组件的页面XY值，请使用setPagePosition方法。该方法触发...
设置组件的left和top值。设置组件的页面XY值，请使用setPagePosition方法。该方法触发move事件。
参数:
  • left : Number
    The new left
  • top : Number
    The new top
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setSize ( Mixed width , Mixed height ) : Ext.BoxComponent
设置BoxComponent的宽度和高度。 此方法触发resize事件...
设置BoxComponent的宽度和高度。 此方法触发resize事件。此方法可以接收单独的width或者height值作为参数， 或者你可以传递像这样的一个size对象： {width:10, height:20} 。
参数:
  • width : Mixed
    设置的新的width值。这可以是：
    • 一个Number类型指定Element新的宽度 Ext.Element.defaultUnit(默认为像素 :'px')。
    • 一个String类型用于设置width的CSS样式。
    • 一个size对象格式为 {width: widthValue, height: heightValue} 。
    • 值为 undefined 时，保留原来的width不变。
  • height : Mixed
    设置的新的height值(如果第一个参数传递了一个size对象，此参数没有必要传递)。这可以是：
    • 一个Number类型指定Element新的高度 Ext.Element.defaultUnit(默认为像素 :'px')。
    • 一个String类型用于设置height的CSS样式。也有可能不会被使用到。
    • 值为 undefined 时，保留原来的height不变。
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setText ( String t ) : void
更新该项的文本, 将该文本用作innerHTML。
更新该项的文本, 将该文本用作innerHTML。
参数:
  • t : String
    显示的文本(接受html标签)。
返回值:
  • void
Toolbar.TextItem
setVisible ( Boolean visible ) : Ext.Component
工具方法，通过使用布尔值隐藏或者显示当前组件。
工具方法，通过使用布尔值隐藏或者显示当前组件。
参数:
  • visible : Boolean
    true时显示，false时隐藏
返回值:
  • Ext.Component
    this
Component
setWidth ( Mixed width ) : Ext.BoxComponent
设置组件的宽度。 此方法触发resize事件。
设置组件的宽度。 此方法触发resize事件。
参数:
  • width : Mixed
    The new width to set.
返回值:
  • Ext.BoxComponent
    this
BoxComponent
show () : Ext.Component
显示当前组件。监听' beforeshow' 事件，返回 false 取消显示组件...
显示当前组件。监听' beforeshow' 事件，返回 false 取消显示组件。在显示组件之后触发' show' 事件。
参数:
  • 无。
返回值:
  • Ext.Component
    this
Component
suspendEvents( Boolean queueSuspended ) : void
暂停触发所有的事件。 (参看resumeEvents)
暂停触发所有的事件。（参看 resumeEvents)
参数:
  • queueSuspended : Boolean
    如果传递为true则排列好暂停的事件使得在调用 resumeEvents 后再触发它们，而不是抛弃所有暂停的事件。
返回值:
  • void
Observable
syncSize () : Ext.BoxComponent
强制组件的大小按照此组件底层元素当前的高度和宽度计算。
强制组件的大小按照此组件底层元素当前的高度和宽度计算。
参数:
  • 无。
返回值:
  • Ext.BoxComponent
    this
BoxComponent
un( String eventName, Function handler, [Object scope] ) : void
删除一个事件处理器(removeListener方法的简写形式)
删除一个事件处理器(removeListener方法的简写形式。)
参数:
  • eventName : String
    处理器关联的事件类型
  • handler : Function
    被删除的处理器 这应该是传入 addListener 中的方法的引用。
  • scope : Object
    （可选）为处理器指定的初始作用域。
返回值:
  • void
Observable
update ( Mixed htmlOrData , [ Boolean loadScripts ], [ Function callback ] ) : void
刷新组件的内部区域。
刷新组件的内部区域。
参数:
  • htmlOrData : Mixed
    如果已经通过tpl为当前组件配置了一个模板，那么 将会使用此参数来装配模板。 如果没有为当前组件配置模板，组件的内容区域将会通过Ext.Element 进行刷新。
  • loadScripts : Boolean
    (可选)只用在使用html配置时此参数才合法。默认为false。
  • callback : Function
    (可选)只用在使用html配置时此参数才合法。 当脚本加载完成时回调函数才被执行。
返回值:
  • void
Component
updateBox ( Object box ) : Ext.BoxComponent
设置此组件底层元素的盒子模型尺寸。(译者注：盒子模型是CSS术语，详细资料请自行搜索。)
设置此组件底层元素的盒子模型尺寸。(译者注：盒子模型是CSS术语，详细资料请自行搜索。)
参数:
  • box : Object
    一个格式为{x, y, width, height}的对象
返回值:
  • Ext.BoxComponent
    this
BoxComponent

公共事件

Event Defined By
added : ( Ext.Component this , Ext.Container ownerCt , number index )
当一个组件被添加到一个Ext.Container时触发
当一个组件被添加到一个Ext.Container时触发
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • ownerCt : Ext.Container
    用于组件的容器
  • index : number
    添加组件的位置
Component
afterrender : ( Ext.Component this )
在组件渲染完成之后触发...

在组件渲染完成之后触发。

afterrender事件在当前组件被rendered 结束之后、在为组件定义的所有afterRender方法执行之后 触发，并且，如果有stateful， 也在状态被保存之后才触发。

监听器将会以如下参数格式被调用:
  • this : Ext.Component
Component
beforedestroy : ( Ext.Component this )
在组件 destroyed 之前触发。 在事件监听器中返回false以停止 destroy 操作。
在组件 destroyed 之前触发。 在事件监听器中返回false以停止 destroy 操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforehide : ( Ext.Component this )
在调用hide方法隐藏组件之前触发。 在事件监听器中返回false可以停止隐藏操作。
在调用hide方法隐藏组件之前触发。 在事件监听器中返回false可以停止隐藏操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforerender : ( Ext.Component this )
在组件被rendered 之前触发。 在事件监听器中返回false可以停止render 操作。
在组件被rendered 之前触发。 在事件监听器中返回false可以停止render 操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforeshow : ( Ext.Component this )
在调用show()方法现实组件之前触发。 事件处理函数返回false可以停止show。
在调用show 方法现实组件之前触发。 事件处理函数返回false可以停止show。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforestaterestore : ( Ext.Component this , Object state )
在组件状态恢复之前触发。返回false停止恢复状态操作。
在组件状态恢复之前触发。返回false停止恢复状态操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    StateProvider返回的状态哈希值。 如果没有禁止此事件，那么状态对象会被传递给applyState。 默认情况下，这样简单地把属性值拷贝到当前组件中。 可以覆盖此方法以提供自定的状态恢复操作。
Component
beforestatesave : ( Ext.Component this , Object state )
在组件状态被保存到配置的状态提供者之前触发。 返回false可以停止保存。
在组件状态被保存到配置的状态提供者之前触发。 返回false可以停止保存。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    状态值哈希。 这由在组件上调用getState() 方法决定。 此方法必须由开发者提供，返回是否需要对状态进行描述，默认情况下， Ext.Component有一个空实现。
Component
destroy : ( Ext.Component this )
在组件被销毁之后触发。
在组件被destroyed之后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
disable : ( Ext.Component this )
在组件被设置为无效状态后触发。
在组件被设置为无效状态后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
enable : ( Ext.Component this )
当组件被设置为有效(enabled)之后触发。
当组件被设置为有效(enabled)之后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
hide : ( Ext.Component this )
在组件被隐藏之后触发。 当调用hide 方法隐藏组件之后触发。
在组件被隐藏之后触发。 当调用hide 方法隐藏组件之后触发。
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
move : ( Ext.Component this , Number x , Number y )
在组件移动之后触发。
在组件移动之后触发。
监听器将会用如下的参数格式来调用:
  • this : Ext.Component
  • x : Number
    The new x position
  • y : Number
    The new y position
BoxComponent
removed : ( Ext.Component this , Ext.Container ownerCt )
当一个组件被从Ext.Container容器中删除时触发
当一个组件被从Ext.Container容器中删除时触发
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • ownerCt : Ext.Container
    持有组件的容器
Component
render : ( Ext.Component this )
在组件被渲染之后触发。
在组件被 rendered(渲染) 之后触发。
监听器将以如下的参数格式被调用:
  • this : Ext.Component
Component
resize : ( Ext.Component this , Number adjWidth , Number adjHeight , Number rawWidth , Number rawHeight )
在组件被调整大小之后触发。
在组件被调整大小之后触发。
监听器将以如下的参数格式被调用:
  • this : Ext.Component
  • adjWidth : Number
    这是width调整后的值
  • adjHeight : Number
    这是height调整后的值
  • rawWidth : Number
    这是width原来的值
  • rawHeight : Number
    这是height原来的值
BoxComponent
show : ( Ext.Component this )
在调用show 方法显示组件之后触发。
在调用show 方法显示组件之后触发。
监听器将会用如下的参数格式被调用:
  • this : Ext.Component
Component
staterestore : ( Ext.Component this , Object state )
组件状态被存储之后触发。
组件状态被存储之后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    StateProvider返回的状态哈希值。 如果没有禁止此事件，那么状态对象会被传递给applyState。 默认情况下，这样简单地把属性值拷贝到当前组件中。 可以覆盖此方法以提供自定的状态恢复操作。
Component
statesave : ( Ext.Component this , Object state )
在组件状态被保存到所配置的状态提供者之后触发。
在组件状态被保存到所配置的状态提供者之后触发。
监听器将会用如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    状态值hash。 这是由在足见上调用getState() 方法决定的。 开发者必须提供此方法以返回是否需要恢复状态，默认情况下， Ext.Component有一个空实现。
Component


Observable
    Component
      BoxComponent
        Container
          Panel
            Tip
              ToolTip

Class Ext.ToolTip

包: | Ext
定义类的文件: | ToolTip.js
类: | ToolTip
子类: | QuickTip
继承自: | Tip
一个标准的tooltip实现，当鼠标移过目标元素时，提供附加的信息。

配置项

Config Options Defined By
activeItem : String/Number
一个string型的组件id，或者组件的数字索引， 它需要...
一个string型的组件id，或者组件的数字索引， 它需要在渲染时在容器内的布局管理器中被初始化并激活。 例如：activeItem: 'item-1' 或者 activeItem: 0 ( 索引 0 =容器子项目集合中的第一个元素)。 activeItem仅仅适用于一次显示一个组件的布局模式(比如 Ext.layout.AccordionLayout, Ext.layout.CardLayout 和 Ext.layout.FitLayout)。 与 Ext.layout.ContainerLayout.activeItem 相关。
Container
allowDomMove : Boolean
在渲染时组件是否可以移动Dom节点(默认为true)。
Component
anchor : String
注: 这个配置只用于该组件被包含在一个已使用AnchorLayout...

注: 这个配置只用于该组件被包含在一个已使用 AnchorLayout (或者其子类)配置的Container时。 基于布局管理器，例如：

  • Ext.form.FormPanel
  • 指定 layout: 'anchor' // or 'form', or 'absolute'

参见 Ext.layout.AnchorLayout. anchor 。

BoxComponent
anchorOffset : Number
一个像素数值被用作表示到锚点箭头的默认位置的偏移量...
一个像素数值被用作表示到锚点箭头的默认位置的偏移量（默认为0）。 当锚点位于tooltip的顶部或底部时， anchorOffset 将被当做横向的偏移量。相似的，当锚点位于左边或右边时， anchorOffset 将被当做竖直方向的偏移量。
ToolTip
anchorToTarget : Boolean
如果为True则表示关联tooltip到目标元素上，false则 表示关联tooltip到光标坐标处（默认为...
如果为True则表示关联tooltip到目标元素上，false则 表示关联tooltip到光标坐标处（默认为true）。 当 anchorToTarget 为true时, 用 defaultAlign 去控制目标元素的排列。 当anchorToTarget为false时，则用 anchorPosition 代替控制排列。
ToolTip
animCollapse : Boolean
true将会在panel被折叠时使用动画效果，false将会跳过动画效果....
true 将会在panel被折叠时使用动画效果， false 将会跳过动画效果( 如果Ext.Fx类 有效，默认为 true ，否则为 false )。
Panel
applyTo : Mixed
指定一个元素的id、一个DOM元素或者一个已经存在并被渲染到DIV中的元素，此DIV已经被...

指定一个元素的id、一个DOM元素或者一个已经存在并被渲染到DIV中的元素，此DIV已经被 渲染到document中，并且为当前组件指定了一些结构化的标签。

  • 描述 :
      当使用了 applyTo， 在主元素中也可以用id或者CSS类名来指定组件的托管部分， 并且，如果可以的话，创建的组件可能也会试图在那个标签中创建它的子组件。
  • 注意 :
      当使用此配置项时，无需调用render()方法。
      如果指定了applyTo属性，任何传递给 renderTo 的值都会被忽略，并且目标元素的父节点将会自动被用作组件的容器。
Panel
autoDestroy : Boolean
如果为true，容器将自动销毁任何从其中被删除的组件， 否则...
如果为true，容器将自动销毁任何从其中被删除的组件， 否则必须手动处理销毁操作(默认为true)。
Container
autoHeight : Boolean
如果值为true，height配置项为'auto'，否则值为false的话使用固定的高度...

如果值为true，height配置项为'auto'，否则值为false的话使用固定的高度， 或者可以由其父类容器 layout manager来控制。(默认值为 false)。

注: 虽然很多组件继承了这个配置选项，但不是所有这些组件的自适应高度配置都会像期望的那样起作用。 设置autoHeight：值为true时，浏览器将根据元素的内容自动设置高度，这将意味着Ext不会去管理高度。

如果是由浏览器来管理高度，需要注意的是，通过浏览器进行调整的结构组件内不能被发现， 因此宽度的变化可能导致需要进行同步处理元素的高度。 例如：

var w = new Ext.Window({
    title: 'Window',
    width: 600,
    autoHeight: true,
    items: {
        title: 'Collapse Me',
        height: 400,
        collapsible: true,
        border: false,
        listeners: {
            beforecollapse: function() {
                w.el.shadow.hide();
            },
            beforeexpand: function() {
                w.el.shadow.hide();
            },
            collapse: function() {
                w.syncShadow();
            },
            expand: function() {
                w.syncShadow();
            }
        }
    }
}).show();
Panel
autoHide : Boolean
如果为true，当鼠标移出目标元素， 或者到达dismissDelay 参数...
如果为true，当鼠标移出目标元素， 或者到达dismissDelay 参数指定的时间之后（如果有指定，默认为true）， 自动隐藏提示信息。 如果closable = true 一个关闭按钮将会被渲染到 tooltip的头部。
ToolTip
autoLoad : Object/String/Function
一个合法的url描述，依照Updater Ext.Updater.update 方法...
一个合法的url描述，依照Updater Ext.Updater.update 方法。如果autoLoad不为null，panel将会在渲染之后立即尝试加载它的内容。

URL将会成为当前panel的body元素的默认URL，这样它可以在任意时刻被 refresh.

Panel
autoScroll : Boolean
如果值为true，将会在该元素上使用overflow:'auto'配置，并且在必要的时候...
如果值为true，将会在该元素上使用overflow:'auto'配置，并且在必要的时候自动显示滚动条，否则，溢出部分的组件都会被切除(默认值为 false)。
BoxComponent
autoShow : Boolean
如果组件需要检测隐藏CSS属性(如 'x-hidden' 或者 'x-hide-display')并且在渲染时删除...
如果组件需要检测隐藏CSS属性(如 'x-hidden' 或者 'x-hide-display')并且在渲染时删除它们 (默认为false)，设置此值为true。
Component
autoWidth : Boolean
如果为true，使用width:'auto'配置，否则使用固定的宽度...

如果为true，使用width:'auto'配置，否则使用固定的宽度，或者可以由其父类容器的layout manager来控制。(默认值为 false)。

注: 虽然很多组件继承了这个配置选项，但不是所有这些组件的自适应宽度配置都会像期望的那样起作用。 设置autoWidth：值为true时，浏览器将根据元素的内容自动设置宽度，这将意味着Ext不会去管理宽度。

如果是由浏览器来管理宽度，需要注意的是，通过浏览器进行调整的结构组件内不能被发现，因此宽度的变化可能导致需要进行同步处理元素的宽度。 例如，在这个元素的目标是：

<div id='grid-container' style='margin-left:25%;width:50%'></div>
当浏览器窗口改变时，渲染后的Panel必须监听浏览器窗口大小的变化，以便通知子项，浏览器改变了其宽度：

var myPanel = new Ext.Panel({
    renderTo: 'grid-container',
    monitorResize: true, // relay on browser resize
    title: 'Panel',
    height: 400,
    autoWidth: true,
    layout: 'hbox',
    layoutConfig: {
        align: 'stretch'
    },
    defaults: {
        flex: 1
    },
    items: [{
        title: 'Box 1',
    }, {
        title: 'Box 2'
    }, {
        title: 'Box 3'
    }],
});
BoxComponent
baseCls : String
应用到当前panel元素上的基本CSS类(默认为 'x-panel' )...
应用到当前panel元素上的基本CSS类(默认为 'x-panel' )。

另一个可选的默认变量是指定 'x-plain' ，它将去掉所有样式，除了Ext布局功能所必须的属性 (例如overflow:hidden)。另请参见 unstyled 。

Panel
bbar : Object/Array
panel底部工具栏。 此参数可以是一个Ext.Toolbar 、一个工具栏配置项，或者一个buttons/button配置数组---用来被添加到工具栏中...

panel底部工具栏。 此参数可以是一个Ext.Toolbar 、一个工具栏配置项，或者一个buttons/button配置数组---用来被添加到工具栏中。 注意，此参数在渲染之后是无效的。如果在渲染之后需要访问底部工具栏 ，请使用 getBottomToolbar。

注意:尽管Toolbar可以包含Field组件，但它们不会 通过加载祖先FormPanel而被更新。Panel的工具栏不是标准Container->Component 层次的一部分，所以它们不会被扫面以收集表单项。但是，这些值还是会 被提交，因为提交表单的参数是从DOM树中收集的。

Panel
bbarCfg : Object
一个 ADomHelper 元素的配置对象，描述了当前Panelbbar元素的结构...

一个DomHelper 元素的配置对象，描述了当前Panel的bbar元素结构。 另请参见 bodyCfg 。

Panel
bodyBorder : Boolean
True将会在Panel的body元素内部显示一个边框，false将会隐藏它 (默认为true)。只有当border == true 时...
True将会在Panel的body元素内部显示一个边框，false将会隐藏它 (默认为true)。只有当border == true 时，此参数才会被应用。如果border == true 并且 bodyBorder == false， 将会给整个body元素一种凹陷式的外观。
Panel
bodyCfg : Object
一个DomHelper 元素描述对象，可以被指定给任何Panel Element...

一个DomHelper 元素描述对象，可以被指定给任何Panel Element.

默认情况下，以下表格中的Default元素将会被用作html标签，用来创建一个子元素 ，与Default类名相匹配( baseCls 将会被 baseCls 替换 ):

Panel      Default  Default             Custom      Additional       Additional
Element    element  class               element     class            style
========   ==========================   =========   ==============   ===========
header     div      baseCls+'-header'   headerCfg   headerCssClass   headerStyle
bwrap      div      baseCls+'-bwrap'     bwrapCfg    bwrapCssClass    bwrapStyle
+ tbar     div      baseCls+'-tbar'       tbarCfg     tbarCssClass     tbarStyle
+ body     div      baseCls+'-body'       bodyCfg     bodyCssClass     bodyStyle
+ bbar     div      baseCls+'-bbar'       bbarCfg     bbarCssClass     bbarStyle
+ footer   div      baseCls+'-footer'   footerCfg   footerCssClass   footerStyle

例如，配置一个自定义的元素，用来强制 body 元素使用不同形式的标签，而不是使用默认创建的。 这种情况的一个例子可能是 创建一个子 Panel，包含自定义的内容，例如header，或者通过使body拥有一个<center> 元素， 从而强制Panel中的所有内容居中:

new Ext.Panel({
    title: 'Message Title',
    renderTo: Ext.getBody(),
    width: 200, height: 130,
    bodyCfg: {
        tag: 'center',
        cls: 'x-panel-body',  // Default class not applied if Custom element specified
        html: 'Message'
    },
    footerCfg: {
        tag: 'h2',
        cls: 'x-panel-footer'        // same as the Default class
        html: 'footer html'
    },
    footerCssClass: 'custom-footer', // additional css class, see addClass

    footerStyle:    'background-color:red' // see bodyStyle

});

以上例子也显式创建了一个 footer ，拥有自定义的标签和样式。

Panel
bodyCssClass : String/Object/Function
可选的CSS类选择器，被应用到body 元素上，其格式为Ext.Element.addClass所 期望的值(默认为null)...
可选的CSS类选择器，被应用到body 元素上，其格式为Ext.Element.addClass所 期望的值(默认为null)。参见 bodyCfg.
Panel
bodyStyle : String/Object/Function
自定义的CSS样式，它将被应用到body 元素上，其格式为...
自定义的CSS样式，它将被应用到body 元素上，其格式为Ext.Element.applyStyles 所期望的值(默认为null)。参见bodyCfg。
Panel
border : Boolean
True将会显示panel body元素的边框，false将会隐藏它们 (默认为true)。默认情况下，边框是一个2px宽度的内嵌边框...
True将会显示panel body元素的边框，false将会隐藏它们 (默认为true)。默认情况下，边框是一个2px宽度的内嵌边框， 但是，以后可以通过设置bodyBorder 为false以改变它。
Panel
boxMaxHeight : Number
设置组件的最大高度值...

设置组件的最大高度值。

警告:布局管理器应用的任何管理大小的配置将会被此属性覆盖。

BoxComponent
boxMaxWidth : Number
设置组件的最大宽度值...

设置组件的最大宽度值。

警告:布局管理器应用的任何管理大小的配置将会被此属性覆盖。

BoxComponent
boxMinHeight : Number
设置组件的最小高度值...

设置组件的最小高度值。

警告:布局管理器应用的任何管理大小的配置将会被此属性覆盖。

BoxComponent
boxMinWidth : Number
设置组件的最小宽度值...

设置组件的最小宽度值。

警告: 布局管理器应用的任何管理大小的配置将会被此属性覆盖。

BoxComponent
bubbleEvents : Array
一个事件数组，当这些事件被触发时，将会被冒泡到所有父容器中。参见....

一个事件数组，当这些事件被触发时，将会被冒泡到所有父容器中。参见 Ext.util.Observable.enableBubble。 默认为 []。

Container
bufferResize : Boolean/Number
当设置为true时(50毫秒)或者是一个毫秒数值， 指定给当前容器的布...
当设置为true时(50毫秒)或者是一个毫秒数值， 指定给当前容器的布局管理器将会缓存它计算出的频率，然后 对组件进行一次重新布局操作。 对于重量级的容器，或者拥有大量子组件的容器来说，这非常有用， 因为频繁进行布局是非常昂贵的。 默认为 50 .
Container
buttonAlign : String
添加到当前panel的所有 buttons 的对齐方式。 合法的值有...
添加到当前panel的所有 buttons 的对齐方式。 合法的值有 'right' , 'left' 和 'center' (默认为 'right' )。
Panel
buttons : Array
Panel的按钮数组，它们从 buttons 配置属性创建。只读。
Panel
bwrapCfg : Object
一个DomHelper 元素描述对象，描述了当前Panel的 bwrap 的元素的结构...

一个DomHelper 元素描述对象，描述了当前Panel的 bwrap 的元素的结构。另请参见 bodyCfg 。

Panel
clearCls : String
应用到特殊的clearing div的CSS类， 这个clearing div直接渲染到每个form field的包装器后面...

应用到特殊的clearing div的CSS类， 这个clearing div直接渲染到每个form field的包装器后面，以提供 清除field的功能(默认为 'x-form-clear-left')。

注意: 只有在当前组件被渲染到一个使用FormLayout 布局(例如 Ext.form.FormPanel 或者指定 layout:'form')的 容器中、或者是指定了一个fieldLabel 、或者指定isFormField=true 时此配置才有效。

另请参见 Ext.layout.FormLayout. fieldTpl。

Component
closable : Boolean
Panel自身不支持关闭操作，但是Panel的一些子类 (例如Ext.Window) ，或者处于Ext.TabPanel中的 Panel支持...
Panel自身不支持关闭操作，但是Panel的一些子类 (例如Ext.Window) ，或者处于Ext.TabPanel中的 Panel支持。 指定此参数为 true 可以在这些情况下启用关闭。默认为 false 。
Tip
cls : String
一个可选的额外CSS类，它将被添加到当前组件的元素上(默认为'')...
一个可选的额外CSS类，它将被添加到当前组件的元素上(默认为'')。 此属性对于在组件上，或者它的任何使用标准CSS规则的孩子节点上， 添加定制的样式非常有用。
Component
collapseFirst : Boolean
将会确保折叠/展开(collapse/expand)按钮总是被渲染在第一个位置...
true 将会确保折叠/展开(collapse/expand)按钮总是被渲染在第一个位置， 在panel顶部的工具栏中位于任何其它工具左侧， false 将会把它渲染在最后(默认为 true )。
Panel
collapsed : Boolean
如果当前panel被折叠为true。只读。
Panel
collapsedCls : String
在被折叠后，一个被添加到panel元素上的CSS类 (默认为 'x-panel-collapsed' )。
Panel
collapsible : Boolean
True将会使panel折叠并且会自动把展开/折叠(expand/collapse)按钮渲染到顶部...
True将会使panel折叠并且会自动把展开/折叠 (expand/collapse)按钮渲染到顶部工具按钮区域，false将 保持panel尺寸固定，没有按钮(默认为false)。
Panel
contentEl : String
(可选)指定一个已存在的HTML元素，或者一个已存在HTML元素的...

(可选)指定一个已存在的HTML元素，或者一个已存在HTML元素的 id ，它们将被用作当前组件的内容。

  • 描述 :
    此配置选项被用来将一个已存在的HTML元素 插入到一个新组件(在组件渲染之后它简单地移动DOM元素) 的layout元素中，使它成为该组件的内容。
  • 注意 :
    指定的HTML元素将被append到组件的layout元素中， 在所有配置的 HTML 被插入之后， 并且，这样的话，在render事件 被触发时，document中将不再包含此元素。
    指定的HTML元素将不会参与组件所有可能使用的 layout 过程(译者注：指这些HTML元素 不会参与布局操作)。 它仅是HTML而已。布局操作实在孩子 items 上进行的。
    添加 x-hidden 或者 x-hide-display CSS类，以防在内容渲染到panel时发生闪烁。
Component
ctCls : String
一个可选的外部CSS样式，添加到这个组件的容器(默认值为 '')。 这个方法对于使用标准的CSS规则...

一个可选的外部CSS样式，添加到这个组件的容器(默认值为 '')。 这个方法对于使用标准的CSS规则，为组件或它的任何一个子组件添加特定的样式非常有用。 参见 Ext.layout.ContainerLayout和 extraCls 。

注意: ctCls 默认为 ''期望如下的类，它们将指定一个默认值:

  • Box Layout : 'x-box-layout-ct'
使用一个额外的CSS类配置以上的Class，它是append到默认对象上的。例如， 对于BoxLayout (Hbox and Vbox):
                                ctCls: 'x-box-layout-ct custom-class'

Component
data : Mixed
初始化数据集，它将被应用到 tpl 上以刷新组件的内容区域。
Component
defaultAlign : String
实验性参数。 当前tip默认的Ext.Element.alignTo 锚定位置值，与它的起源元素...
实验性参数。 当前tip默认的Ext.Element.alignTo 锚定位置值，与它的起源元素(译者注：指弹出tip那个元素)有关(默认为"tl-bl?")。
Tip
defaultType : String
当一个子项目通过一个原生的配置对象 而不是一个组件的实例指定时。...

当一个子项目通过一个原生的配置对象 而不是一个组件的实例指定时。 在当前容器中创建子组件时使用的默认 xtype 。

默认为 'panel' ， Ext.menu.Menu 默认为 'menuitem' ， Ext.Toolbar 和 Ext.ButtonGroup 默认为 'button' 。

Container
defaults : Object|Function
此选项是在所有添加的项目上应用默认设置的手段， 这些项目要么是通过...

此选项是在所有添加的项目上应用默认设置的手段， 这些项目要么是通过 items 配置项添加的， 或者是通过 add 或者是通过 insert 方法添加的。

如果添加的项目是一个配置对象， 并且不是一个组件的实例， 那么默认参数将会被无条件地被应用。 如果添加的项目是一个组件的实例， 那么默认参数将有条件地被应用，以免覆盖项目上的现有属性你。

如果默认选项被指定为一个函数， 那么将使用当前容器作为作用域来调用这个函数( this 引用)，并且传递被添加的项目作为第一个参数。 调用产生的所有结果都将被作为默认参数应用到项目上。

例如，如需自动在 Ext.Panel 所包含的每个项目上应用padding属性，你可以传递: defaults: {bodyStyle: 'padding:15px'} 。

用法:

defaults: {               // defaults are applied to items, not the container
    autoScroll:true
},
items: [
    {
        xtype: 'panel',   // defaults do not have precedence over
        id: 'panel1',     // options in config objects, so the defaults
        autoScroll: false // will not be applied here, panel1 will be autoScroll:false
    },
    new Ext.Panel({       // defaults do
                                     have precedence over options
        id: 'panel2',     // options in components, so the defaults
        autoScroll: false // will be applied here, panel2 will be autoScroll:true.
    })
]
Container
delegate : String
（可选）一个DomQuery 选择器 使得target元素中选中的私有元素...

（可选）一个DomQuery选择器 使得 target元素中选中的私有元素 在光标移至target元素上时可触发显示和隐藏Tooltip。

当此属性具体指定时，在Tooltip显示之前，触发了一个显示事件的target的子元素会被放进 triggerElement 属性里。

当一个组件有一些常规的，重复的元素，而它们中的每一个都包含特有的信息并且需要一个Tooltip时可能会用到该属性。 例如:

var myGrid = new Ext.grid.gridPanel(gridConfig);
myGrid.on('render', function(grid) {
    var store = grid.getStore();  // 获取 Store.
    var view = grid.getView();    // 获取 GridView.
    myGrid.tip = new Ext.ToolTip({
        target: view.mainBody,    // 全部的元素。
        delegate: '.x-grid3-row', // 每一行都会触发其单独的显示和隐藏。
        trackMouse: true,         // 在行内移动时不会隐藏tip。
        renderTo: document.body,  // 立即渲染，使得tip.body可以
                                  //  在第一次显示时预先被引用。
        listeners: {              // 对于不同的触发元素
                                  //  显示不同的值。
            beforeshow: function updateTipBody(tip) {
                var rowIndex = view.findRowIndex(tip.triggerElement);
                tip.body.dom.innerHTML = 'Over Record ID ' + store.getAt(rowIndex).id;
            }
        }
    });
});
ToolTip
disabled : Boolean
当前组件处于无效状态时为true。 Read-only.
Panel
disabledClass : String
当组件处于无效状态时添加到组件上的CSS类(默认为 'x-item-disabled')。
Component
dismissDelay : Number
在tooltip自动隐藏之前延迟的毫秒数(默认值为 5000)...
在tooltip自动隐藏之前延迟的毫秒数(默认值为 5000)。（译者注：也就是tooltip显示的毫秒数）。 如需要使自动隐藏无效，设置dismissDelay = 0。
ToolTip
draggable : Boolean/Object
true 可以让当前panel启用拖拽操作(默认为 false )...

true 可以让当前panel启用拖拽操作(默认为 false )。

如需自定义的drag/drop实现，也可以向此配置项传递一个 Ext.Panel.DD配置替代 true 。 Ext.Panel.DD是一个内部没有文档化的类，它在周围移动代理元素 代替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();
Panel
elements : String
panel元素列表，以逗号分隔，在panel被渲染时初始化。 通常情况下...
panel元素列表，以逗号分隔，在panel被渲染时初始化。 通常情况下，此列表在配置时根据添加到panel的项目被自动创建， 但有时，即使没有在配置时指定，对于确保一个结构化的元素被渲染也很有用 (例如，你可能希望在panel被渲染后动态地添加一个按钮或者工具栏)。 添加这些元素到此列表中将会在panel被渲染时分配必须的占位符。 合法的值有
  • header
  • tbar (top bar)
  • body
  • bbar (bottom bar)
  • footer
Defaults to ' body '.
Panel
fbar : Object/Array
一个Toolbar 对象、一个Toolbar配置项，或者一个Buttons/ Button 配置数组，...

一个Toolbar 对象、一个Toolbar配置项，或者一个Buttons/ Button 配置数组，它们描述了一个被添加到当前Panel底部元素的 Toolbar.

在渲染后， fbar 将会为一个Toolbar 实例。

如果指定了 buttons ，它们将替代 fbar 配置项。

Panel的 buttonAlign 配置项目将会影响这些项目的布局，例如:
var w = new Ext.Window({
    height: 250,
    width: 500,
    bbar: new Ext.Toolbar({
        items: [{
            text: 'bbar Left'
        },'->',{
            text: 'bbar Right'
        }]
    }),
    buttonAlign: 'left', // anything but 'center' or 'right' and you can use '-', and '->'

                                  // to control the alignment of fbar items
    fbar: [{
        text: 'fbar Left'
    },'->',{
        text: 'fbar Right'
    }]
}).show();

注意:尽管Toolbar可以包含Field组件，但它们不会 通过加载祖先FormPanel而被更新。Panel的工具栏不是标准Container->Component 层次的一部分，所以它们不会被扫面以收集表单项。但是，这些值还是会 被提交，因为提交表单的参数是从DOM树中收集的。

Panel
fieldLabel : String
紧靠此field显示的标签文本(默认值为 '')。注意...

紧靠此field显示的标签文本(默认值为 '')。

注意:只有在当前组件被渲染到一个使用FormLayout 的容器中时，此配置才有效。 (例如 Ext.form.FormPanel 或 指定 layout:'form')。

另请参见 hideLabel 、 Ext.layout.FormLayout和 fieldTpl。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Name'
    }]
});
Component
flex : Number
注: 这个配置只用于该组件被包含在一个已使用BoxLayout配置的Container中时...

注: 这个配置只用于该组件被包含在一个已使用BoxLayout配置的Container中时。通过计算每一个子组件的flex值所占全部flex值之和的比例，来决定子组件的宽(HBoxLayout)高(VBoxlayout)。 任何子项的 flex = 0 或 flex = undefined 将不被设置(初始值大小将不被改变)。

BoxComponent
floating : Mixed
此参数被用来配置底层的 Ext.Layer. 此配置参数可接受的值有...

此参数被用来配置底层的 Ext.Layer. 此配置参数可接受的值有:

  • false : 默认。
    在渲染的地方以内嵌的方式显示panel.
  • true :
    浮动panel (绝对定位，有自动衬垫和阴影)。
      设置floating为true将会为当前panel创建一个Ext.Layer 并且在负值偏移量处显示panel，这样它就是隐藏的。
      既然panel被绝对定位，位置必须在渲染之后被显式设置 (例如 myPanel.setPosition(100,100); )。
      注意: 如果浮动面板，你必须总是指定一个固定的宽度， 否则它将是自动宽度并且总是展开以便填充到视口右侧 边缘。
  • object :
    指定的对象将会被用作将会被创建的 Ext.Layer的 配置对象。
Panel
footer : Ext.Element
Panel底部Element 。只读。此元素被用来容纳Panel的...
Panel底部Element 。只读。

此元素被用来容纳Panel的 buttons 或者 fbar 。

注意: 另请参见 el 的注释。

Panel
footerCfg : Object
一个DomHelper 元素的配置对象，描述了当前Panel的footer元素结构。 另请参见...

一个DomHelper 元素的配置对象，描述了当前Panel的footer元素结构。 另请参见 bodyCfg 。

Panel
forceLayout : Boolean
如果此值为true，容器将将强制初始化一次布局操作...
如果此值为true，容器将将强制初始化一次布局操作， 即使容器处于隐藏或者折叠状态。 此配置项对于在一个折叠或者隐藏的容器中强制渲染非常有用 (默认为false)。
Container
frame : Boolean
默认情况下使用 false ，渲染简单的1px的正方形边框。 true 将会渲染9个元素，以自定义的圆角结束...
默认情况下使用 false ，渲染简单的1px的正方形边框。 true 将会渲染9个元素，以自定义的圆角结束 (另请参见 Ext.Element.boxWrap)。

每种情况下产生的模板描述如下:

// frame = false
<div id="developer-specified-id-goes-here" class="x-panel">

    <div class="x-panel-header"><span class="x-panel-header-text">Title: (frame:false)</span></div>

    <div class="x-panel-bwrap">
        <div class="x-panel-body"><p>html value goes here</p></div>
    </div>
</div>

// frame = true (create 9 elements)
<div id="developer-specified-id-goes-here" class="x-panel">
    <div class="x-panel-tl"><div class="x-panel-tr"><div class="x-panel-tc">
        <div class="x-panel-header"><span class="x-panel-header-text">Title: (frame:true)</span></div>
    </div></div></div>

    <div class="x-panel-bwrap">
        <div class="x-panel-ml"><div class="x-panel-mr"><div class="x-panel-mc">
            <div class="x-panel-body"><p>html value goes here</p></div>
        </div></div></div>

        <div class="x-panel-bl"><div class="x-panel-br"><div class="x-panel-bc"/>
        </div></div></div>
</div>
Panel
header : Ext.Element
Panel的headerElement. 只读。此元素被用来容纳 title和 tools...
Panel的headerElement. 只读。

此元素被用来容纳 title和 tools

注意: 另请参见 el 的注释。

Panel
headerAsText : Boolean
true 将会在 header 中显示panel title ， false 将会隐藏它(默认为 true )。
Panel
headerCfg : Object
一个DomHelper 元素的配置对象，描述了当前Panel的header元素结构...

一个DomHelper 元素的配置对象，描述了当前Panel的header元素结构。 另请参见 bodyCfg 。

Panel
height : Number
组件的高度(默认值为 auto)。注:如果想使用百分比的方式...
组件的高度(默认值为 auto)。注:如果想使用百分比的方式来设置值，请查看 Ext.Component.anchor。
BoxComponent
hidden : Boolean
如果当前组件处于隐藏状态，此值为true。Read-only。
Component
hideBorders : Boolean
设置为true可以隐藏所包含的每个组件的边框， false为遵照组件现有的边框设置...
设置为true可以隐藏所包含的每个组件的边框， false为遵照组件现有的边框设置(默认为 false)。
Container
hideCollapseTool : Boolean
true 将会在 collapsible == true 时隐藏展开/折叠按钮， false 将会显示它(默认为 false )。
Panel
hideDelay : Number
鼠标移出目标之后，tooltip隐藏之前的延迟时间毫秒数(默认值为 200)。 设置为...
鼠标移出目标之后，tooltip隐藏之前的延迟时间毫秒数(默认值为 200)。 设置为0，tooltip将立即隐藏。
ToolTip
hideLabel : Boolean
true时完全隐藏label元素 ( label 和 separator)。 默认为 false。 默认情况下，即使你不指定...

true时完全隐藏label元素 ( label 和 separator)。 默认为 false。 默认情况下，即使你不指定 fieldLabel 它的空间仍然会被保留，这样这块区域会与其它确实拥有label的区域位于同一排。 讲此值设置为 true 将导致此区域不再保留此空间。

注意: 参见 clearCls 的注释。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield'
        hideLabel: true
    }]
});
Component
hideMode : String
组件如何隐藏，支持的值有： 'visibility' (css visibility), 'offsets' (位置偏移量为负值) 和...

组件如何隐藏，支持的值有： 'visibility' (css visibility), 'offsets' (位置偏移量为负值) 和 'display' (css display).

注意:一般首选默认值 'display'，因为当组件第一次显示的时候它们会自动进行布局 (隐藏的时候不会调整尺寸)。

Component
hideParent : Boolean
此值为true时，当调用hide/show方法时，将会hide和show组件的容器...
此值为true时，当调用hide/show方法时，将会hide和show组件的容器；false时将会 hide和show组件自身(默认为false)。例如，这可以用作window上隐藏按钮的一种 快捷操作，通过设置此按钮的hideParent:true，然后把它添加到window上。
Component
html : String/Object
一个HTML片段，或者一个 DomHelper 描述，用作layout元素的内容(默认为'')。...
一个HTML片段，或者一个 DomHelper 描述，用作layout元素的内容(默认为'')。 这个HTML内容在组件渲染之后才被添加，所以在 render 出发的时候，document中尚未包含此HTML。 但是这个内容将会在所有配置的 contentEl 之前被插入到body标签中。
Component
iconCls : String
CSS类选择器，指定被用作头部图标的背景图片(默认为'')...
CSS类选择器，指定被用作头部图标的背景图片(默认为'')。

指定自定义图表类的示例就像:

// specify the property in the config for the class:
     ...
     iconCls: 'my-icon'

// css class that specifies background image to be used as the icon image:
.my-icon { background-image: url(../images/my-icon.gif) 0 6px no-repeat !important; }
Panel
id : String
当前组件唯一的id(默认为auto-assigned id)...

当前组件唯一的id(默认为auto-assigned id)。 如果你需要在以后访问组件，而又没有一个有效的组件对象引用，那么你需要指定一个 id( 也就是，使用Ext. getCmp方法 )。

注意，此id也将被用作组件底层HTML标签的id，这些标签被渲染到页面中。 这将允许你编写基于id的CSS规则，以独立地描述指定的实例；并且，也可以通过 组件父标签的id选中子元素。

注意:为了避免与唯一的id 产生重复， 请参见 itemId 和 ref 。

注意: 如需访问一个元素的容器，参见 ownerCt 。

Component
itemCls : String
注意: 只有在当前组件被渲染到一个使用FormLayout 布局的 容器中时此配置才有效...

注意: 只有在当前组件被渲染到一个使用FormLayout 布局的 容器中时此配置才有效。 (例如Ext.form.FormPanel 或者指定 layout:'form')。

一个附加的CSS类，应用到div上，包装当前field的表单元素。 如果提供了此参数， field级上的itemCls将会覆盖 container级上提供的 默认itemCls。 为itemCls指定的值将会被添加默认的 类('x-form-item')。

既然它被应用到项目的包装器上(参见 Ext.layout.FormLayout。 fieldTpl)， 它将允许你编写能应用到此field、label(如果有指定)、或者field内部任何其它元素的标准CSS规则。

注意: 参考 fieldLabel的注释。 .

示例用法:

// Apply a style to the field's label:
<style>
    .required .x-form-item-label {font-weight:bold;color:red;}
</style>

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Name',
        itemCls: 'required' //this label will be styled
    },{
        xtype: 'textfield',
        fieldLabel: 'Favorite Color'
    }]
});
Component
itemId : String
当没有可利用的对象引用时，itemId可以作为第二选择，用来获得一个组件的引用， 代替 ...

当没有可利用的对象引用时，itemId可以作为第二选择，用来获得一个组件的引用， 代替 id 与 Ext. getCmp的组合， 使用 itemId 与 Ext.Container. getComponent 方法配合将会获得 itemId 's（的所有者） 或者 id 's（的所有者）。 既然 itemId 's（的所有者）是一个到容器内部MixedCollection的索引， itemId 的作用域就被限定在容器之内---避免与 Ext.ComponentMgr 产生潜在的冲突，它（指Ext.ComponentMgr）需要一个 唯一的 id 。

var c = new Ext.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'); // 与 Ext.getCmp()不同

p2 = p1.ownerCt.getComponent('p2'); // 通过兄弟对象获得引用

另请参见 id 和 ref 。

注意:需要访问一个item的容器请参见 ownerCt 。

Component
items : MixedCollection
当前容器中的子组件集合 Ext.util.MixedCollection
Container
keys : Object/Array
一个Ext.KeyMap 配置对象 (其格式为Ext.KeyMap.addBinding 所期望的值...
一个Ext.KeyMap 配置对象 (其格式为Ext.KeyMap.addBinding 所期望的值，用来向当前panel上绑定自定义的按键处理(默认为 null )
Panel
labelSeparator : String
每个fieldLabel 文本后面现实的分隔符。 此属性可以在多个层次上进行配置...

每个fieldLabel 文本后面现实的分隔符。 此属性可以在多个层次上进行配置。优先顺序为：

  • field / component level
  • container level
  • layout level (默认为冒号 ':')
如不需要为当前field的label显示分隔符，指定一个空字符串''即可。

注意:参见 clearCls 的注释。

另请参见 hideLabel 和 Ext.layout.FormLayout。 fieldTpl。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    layoutConfig: {
        labelSeparator: '~'   // layout config has lowest priority (defaults to ':')
    },
    labelSeparator: '>>',     // config at container level
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Field 1',
        labelSeparator: '...' // field/component level config supersedes others
    },{
        xtype: 'textfield',
        fieldLabel: 'Field 2' // labelSeparator will be '='

    }]
});
Component
labelStyle : String
一个CSS样式描述字符串，它将直接应用到当前field的label上...

一个CSS样式描述字符串，它将直接应用到当前field的label上。 如果有设置，默认为容器的labelStyle值(例如 Ext.layout.FormLayout.labelStyle , 或者 '')。

注意:参见 clearCls 的注释。

另请参见 hideLabel 和 Ext.layout.FormLayout. fieldTpl。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Name',
        labelStyle: 'font-weight:bold;'
    }]
});
Component
layout : String/Object
*重要: 为了让子项目能被正确地调整尺寸和位置， 典型地，必须通过 layout 配置项指定一个布局管理器。...

*重要: 为了让子项目能被正确地调整尺寸和位置， 典型地，必须通过 layout 配置项指定一个布局管理器。

调整子items的尺寸和位置 是容器的布局管理器的职责，它负责创建和管理你想要的那种布局类型。 例如:

new Ext.Window({
    width:300, height: 300,
    layout: 'fit', // explicitly set layout manager: override the default (layout:'auto')
    items: [{
        title: 'Panel inside a Window'
    }]
}).show();

如果没有为一个通用的容器(例如Container或者Panel)特别指定 layout ，将会使用default layout manager ，它除了将子组件按顺序渲染到容器中之外什么事情都不做( 这种情况下不会发生调整尺寸和位置的操作)。 一些容器类内部指定了一个默认的布局 (例如FormPanel指定了 layout: 'form' )。 另一些有特殊用途的类内部指定/管理它们内置的布局( 例如GridPanel, TabPanel, TreePanel, Toolbar, Menu等等)。

layout 既可以通过一个对象或者一个字符串指定:

  • 用一个对象指定
    • 示例用法:
      • layout: {
    type: 'vbox',
    padding: '5',
    align: 'left'
}
    • type

      • 当前容器需要使用的布局类型。 如果不指定，将创建并使用一个默认的 Ext.layout.ContainerLayout 。

      可用的布局 type 值是:

      • absolute
      • accordion
      • anchor
      • auto Default
      • border
      • card
      • column
      • fit
      • form
      • hbox
      • menu
      • table
      • toolbar
      • vbox
    • 布局描述配置参数

      • 也可以指定附加的布局描述配置。 关于每个布局类型可用配置选项完整的细节，参见 type 参数指定的相关布局类。

  • 通过一个字符串指定
    • 示例用法:
      • layout: 'vbox',
layoutConfig: {
    padding: '5',
    align: 'left'
}
    • layout

      • 当前容器使用的布局 type ( 可用的布局类型值参见上述列表)。

    • layoutConfig

      • 附件的布局描述配置参数。 关于每个布局类型可用配置选项完整的细节，参见 layout 参数指定的相关布局类。

Container
layoutConfig : Object
这是一个配置对象，包含为 layout 指定的参数， 如果 layout 是作为一个 string 来指定的。

Container
listeners : Object
一个包含一个或多个事件处理器的配置对象，会在初始化的时候被添加到目标对象上...

一个包含一个或多个事件处理器的配置对象，会在初始化的时候被添加到目标对象上。 该配置对象应该是一个有效的监听器配置对象就像 addListener例子中指定的一样可一次附加多个处理器。

ExtJs Components上的DOM事件

一些 ExtJs Component 类导出时会选择一些DOM事件(例如 "click", "mouseover" 等等), 这通常只是在有额外的值可以被添加时发生。例如DataView类的 click事件会传递被点击的节点。也可以直接在Component的HTMLElementevent上访问DOM事件，但必需在Component被渲染后监听器才能添加到Element 上。可以按照以下步骤添加插件:

// 插件会用一个监听器配置对象进行配置。
//该组件会被添加到所有处理方法的参数列表上。
Ext.DomObserver = Ext.extend(Object, {
    constructor: function(config) {
        this.listeners = config.listeners ? config.listeners : config;
    },

    // 组件将自己传递进了插件的初始化方法里
    init: function(c) {
        var p, l = this.listeners;
        for (p in l) {
            if (Ext.isFunction(l[p])) {
                l[p] = this.createHandler(l[p], c);
            } else {
                l[p].fn = this.createHandler(l[p].fn, c);
            }
        }

        // 渲染后立即添加监听器到元素上
        c.render = c.render.createSequence(function() {
            var e = c.getEl();
            if (e) {
                e.on(l);
            }
        });
    },

    createHandler: function(fn, c) {
        return function(e) {
            fn.call(this, e, c);
        };
    }
});

var combo = new Ext.form.ComboBox({

    // 元素被点击后折叠
    plugins: [ new Ext.DomObserver({
        click: function(evt, comp) {
            comp.collapse();
        }
    })],
    store: myStore,
    typeAhead: true,
    mode: 'local',
    triggerAction: 'all'
});

Observable
margins : Object
注:此配置只用于该组件展现在一个使用BorderLayout...

注:此配置只用于该组件展现在一个使用BorderLayout 或 BoxLayout的两个子类之一作为布局的容器。

这个margins对象在该组件中的格式为：

{top: (top margin),right: (right margin),bottom: (bottom margin),left: (left margin)}

也可以是一个字符串，中间用空格分隔，margin值为数字。 把matches中每一个值的次序跟CSS中margin值的排列方式相对应：

  • 如果只有一个值，它适用于所有方面。
  • 如果有两个值，top和bottom的边框设置为第一个值，left和right设置为第二个值。
  • 如果有三个值，top设置为第一个值，left和right设置为第二个值，bottom设置为第三个值。
  • 如果有四个值，分别设置为top, right, bottom, left。

默认值:

{top:0, right:0, bottom:0, left:0}
BoxComponent
maskDisabled : Boolean
true 将会在panel被disabled时进行遮罩,false将不会遮罩它(默认为...
true 将会在panel被disabled时进行遮罩, false 将不会遮罩它(默认为 true )。使用任意一种方法，当被禁用时，panel都将告诉它包含的元素禁用它们自己， 但是遮罩panel可以提供一种额外的视觉效果，用以提示panel被禁用。
Panel
maxWidth : Number
tip最大宽度像素值(默认为300)。支持的最大值为500。
Tip
minButtonWidth : Number
当前panel中所有buttons 最小宽度，像素值(默认为 75 )
Panel
minWidth : Number
tip最小宽度像素值(默认为40)。
Tip
monitorResize : Boolean
设置为true自动监测window的resize事件，以便处理所有对当前窗口尺寸 敏感的事情。...
设置为true自动监测window的resize事件，以便处理所有对当前窗口尺寸 敏感的事情。 典型地，通过选择一个 layout 来管理这个值，并且不应该手动设置它。
Container
mouseOffset : Array
一个到鼠标位置的XY偏移量，tooltip将会被显示在此位置(默认值为 [15,18])。
ToolTip
overCls : String
一个可选的额外的CSS类，它将在鼠标移过元素时被添加到组件上...
一个可选的额外的CSS类，它将在鼠标移过元素时被添加到组件上，鼠标移出时 删除。(默认为'')。此属性对于在组件上，或者它的任何使用标准CSS规则的孩子节点上， 添加定制的'active' 或者 'hover'样式非常有用。
Component
padding : Number/String
设置body元素padding样式的快捷方式。 此值既可以是一个数值，被应用到所有侧边...
设置body元素padding样式的快捷方式。 此值既可以是一个数值，被应用到所有侧边，也可以是一个普通的描述padding的 CSS字符串。默认为undefined.
Panel
pageX : Number
如果该组件被包含在一个指定位置的容器中，这个值表示页面级的x坐标值（译者注：在有滚动条的情况下这个值很有用）。
BoxComponent
pageY : Number
如果该组件被包含在一个指定位置的容器中，这个值表示页面级的y坐标值（译者注：在有滚动条的情况下这个值很有用）。
BoxComponent
plugins : Object/Array
一个对象或者一个对象数组，为组件提供特殊的功能 ...
一个对象或者一个对象数组，为组件提供特殊的功能。 对一个合法的插件唯一的要求是它含有一个init()方法， 能接收一个Ext.Component型的参数。 当组件被创建时，如果有可用的插件，组件将会调用每个插件的init方法， 并将自身的引用作为方法参数传递给它。然后，每个插件就可以调用方法或者响应组件上的事件， 就像需要的那样提供自己的功能。
Component
preventBodyReset : Boolean
默认为 false 。当设置为 true 时， 一个额外的CSS类 'x-panel-normal' 将会被田间到panel的元素， 有效地将W3C(参见 http://www.w3.org/TR/CSS21/sample.html)...
默认为 false 。当设置为 true 时， 一个额外的CSS类 'x-panel-normal' 将会被田间到panel的元素， 有效地将W3C(参见 http://www.w3.org/TR/CSS21/sample.html) 建议的CSS样式应用到Panel的body元素上 (不是header, footer等等)。
Panel
ptype : String
需要创建配置的ptype。 当传递一个配置对象给构造函数时...
需要创建配置的ptype。 当传递一个配置对象给构造函数时，此配置选项不会被使用。 只有在使用懒初始化的时候此配置项才会被使用， 此时Plugin不是 通过一个完整的实例组件，而是通过一个Component配置指定的。 在渲染时，将会查找ptype以决定创建何种类型的Plugin。

如果你创建自己的Plugin，你可以通过 Ext.ComponentMgr.registerPlugin 对它们进行注册，以便能利用懒初始化和渲染机制。
Component
ref : String
一个路径描述，与组件的 ownerCt 相关，它描述了把当前组件的命名引用放置到哪个父容器中去。...

一个路径描述，与组件的 ownerCt 相关，它描述了把当前组件的命名引用放置到哪个父容器中去。

祖先的坐标路径可以通过'/'字符进行分隔。 例如，将一个Toolbar Button的引用放入 拥有此Toolbar的Panel中:

var myGrid = new Ext.grid.EditorGridPanel({
    title: 'My EditorGridPanel',
    store: myStore,
    colModel: myColModel,
    tbar: [{
        text: 'Save',
        handler: saveChanges,
        disabled: true,
        ref: '../saveButton'
    }],
    listeners: {
        afteredit: function() {
//          The button reference is in the GridPanel
            myGrid.saveButton.enable();
        }
    }
});

在上面的代码中，如果 ref 是 'saveButton' ，那么引用将会被放置到Toolbar中。 ref 中的每个'/' 都会从组件的 ownerCt 向上移动一级。

另请参见 added 和 removed 事件。

Component
region : String
注: 此配置只用于该组件展现在一个布局为BorderLayout的容器中...

注: 此配置只用于该组件展现在一个布局为BorderLayout的容器中(例如指定layout:'border')。

详见Ext.layout.BorderLayout。

BoxComponent
renderTo : Mixed
该值可以是一个节点的id、一个DOM节点或者一个已存在的元素...

该值可以是一个节点的id、一个DOM节点或者一个已存在的元素， 组件将会被渲染到其中。

  • 注意 :
      如果组件不是一个Container 的子项目时， 不要使用此选项。 渲染和管理它的子项目是一个Container 的layout manager的责任。
      当使用此配置项时，无需调用render()方法。

另请参见 render 。

Component
resizeEvent : String
在布局中进行尺寸调整需要监听的事件。 默认为 'resize' 。
Panel
shadow : Boolean/String
(或者一个有效的Ext.Shadow Ext.Shadow.mode 值)，用来在panel后面显示一个阴影...
true (或者一个有效的Ext.Shadow Ext.Shadow.mode 值)，用来在panel后面显示一个阴影， false 将不会显示阴影(默认为 'sides' )。注意，此选项只有当 floating = true 时才应用。
Tip
shadowOffset : Number
如果显示了阴影，此参数为数值偏移量(默认为 4 )。注意，只有当 floating = true 时此参数才会被应用。...
如果显示了阴影，此参数为数值偏移量(默认为 4 )。注意，只有当 floating = true 时此参数才会被应用。
Panel
shim : Boolean
false将会在需要的浏览器中禁用iframe衬垫(默认为...
false 将会在需要的浏览器中禁用iframe衬垫(默认为 true )。注意，此选项只有在 floating = true 时应用。
Panel
showDelay : Number
鼠标进入目标元素之后，tooltip显示之前的延迟时间毫秒数(默认值为 500)。
ToolTip
stateEvents : Array
一个事件数组，当它们被触发时，组件需要保存自己的状态(默认值为 none)...

一个事件数组，当它们被触发时，组件需要保存自己的状态(默认值为 none)。 它们可以是任何该组件支持的事件类型，包括浏览器事件和 自定义事件(例如['click', 'customerchange'])。

对于保存和恢复组件状态的详细解释，参见 stateful

Component
stateId : String
为该组件指定的唯一的id值，它被用作管理组件状态的目的...
为该组件指定的唯一的id值，它被用作管理组件状态的目的。 (如果设定了id，默认值为组件自己的id，否则，如果组件使用自动生成的id，此值为null)。

对于保存和反解析组件状态的解释，参见 stateful 。

Component
stateful : Boolean
一个标志参数，它将引起组件在启动时尝试从一个保存的状态中恢复内部状态参数...

一个标志参数，它将引起组件在启动时尝试从一个保存的状态中恢复内部状态参数。 组件必须要么拥有一个 stateId 或者 id ，它们被分配给需要被管理的状态属性。 在跨页面加载时，不保证自动生成的id属性的稳定性， 并且，不能依赖此id来保存和恢复一个组件的相同状态。

为了保存状态的操作能够工作，状态管理器的提供者必须 被设置成一个Ext.state.Provider 的实现类，它覆盖了set 和get 方法，以便保存和恢复name/value对。 有一个内置的Ext.state.CookieProvider 可用。

为当前页面设置状态提供者:

Ext.state.Manager.setProvider(new Ext.state.CookieProvider({
    expires: new Date(new Date().getTime()+(1000*60*60*24*7)), //7 days from now
}));

当 stateEvents 配置项中其中之一的事件被触发时， 一个状态可保存的组件将试图保存其状态。

保存状态时，一个可保存状态的组件首先需要通过调用 getState 方法来序列化它的状态。 默认情况下，此函数什么事都不做。 开发者必须提供一个实现，返回一个hash对象，它描述了组件可恢复的状态。

getState方法产生的值将会传递给 Ext.state.Manager.set 方法，它使用配置的 Ext.state.Provider 来保存对象，以组件的 stateId 为key，或者，如果此值（指stateId）没有指定时， 使用它的 id 作为key。

在进行构造时，一个可保存状态的组件试图通过调用 Ext.state.Manager.get方法来 恢复它的状态，传递 stateId 或者，如果此值（指stateId）没有指定时， 使用它的 id 作为参数。

结果对象被传递给 applyState 。 applyState 的默认实现只是简单地把属性拷贝到对象中， 但是开发者可以覆盖此方法以支持更多行为。

通过向 beforestaterestore, staterestore, beforestatesave 和 statesave 事件上绑定监听器，你可以在保存和恢复状态时进行额外的处理。

Component
style : String
被添加到组件元素的特定样式。 必须是按照...
被添加到组件元素的特定样式。 必须是按照 Ext.Element.applyStyles 类指定格式的合法参数值。

new Ext.Panel({
    title: 'Some Title',
    renderTo: Ext.getBody(),
    width: 400, height: 300,
    layout: 'form',
    items: [{
        xtype: 'textarea',
        style: {
            width: '95%',
            marginBottom: '10px'
        }
    },
        new Ext.Button({
            text: 'Send',
            minWidth: '100',
            style: {
                marginBottom: '10px'
            }
        })
    ]
});
Component
tabTip : String
注: 这个配置只用于当该组件作为TabPanel的一个子项目时使用...

注: 这个配置只用于当该组件作为TabPanel的一个子项目时使用。

一个String类型的innerHTML(支持html标签)，当鼠标放在该选项上的时，显示一个tooltip。为了tips能够被渲染，Ext.QuickTips.init()必须被提前调用。
BoxComponent
target : Mixed
监控mouseover事件从而触发显示此tooltip的目标元素：HTMLElement、Ext.Element或者一个id。
ToolTip
tbar : Object/Array
panel的顶部工具栏。 此参数可以是一个 The top toolbar of the panel. This can be a Ext.Toolbar 对象、一个工具栏配置、或者一个被添加到工具栏的...

panel的顶部工具栏。 此参数可以是一个 The top toolbar of the panel. This can be a Ext.Toolbar 对象、一个工具栏配置、或者一个被添加到工具栏的buttons/button配置数组。 注意，在渲染之后此参数无效。如需在渲染之后访问顶部工具栏，请使用 getTopToolbar。

注意:尽管Toolbar可以包含Field组件，但它们不会 通过加载祖先FormPanel而被更新。Panel的工具栏不是标准Container->Component 层次的一部分，所以它们不会被扫面以收集表单项。但是，这些值还是会 被提交，因为提交表单的参数是从DOM树中收集的。

Panel
tbarCfg : Object
一个DomHelper 元素的配置对象，描述了当前Panel的tbar元素结构。 另请参见...

一个DomHelper 元素的配置对象，描述了当前Panel的tbar元素结构。 另请参见 bodyCfg 。

Panel
title : String
被用作innerHTML的标题文本(接受html标签) ，用来显示在panel的...
被用作innerHTML的标题文本(接受html标签) ，用来显示在panel的 header 中(默认为'')。 当 title 被指定时， header 元素将会被自动创建并显示，除非 header 被显式地设置为 false 。 如果你不在配置时指定一个 title ， 但是你想以后设置，你必须要么 指定一个非空的 title (一个空格' ' 也可以)或者指定 header:true ，这样容器元素将会被创建。
Panel
titleCollapse : Boolean
将会允许通过在顶部工具条的任意地方点击展开和折叠panel(当...
true 将会允许通过在顶部工具条的任意地方点击展开和折叠panel(当 collapsible = true )， false ) 将会只允许通过点击工具按钮进行操作(默认为 false ))。如果当前panel是border布局中的一个子项目，另请参见 BorderLayout.Region floatable 配置项。
Panel
toolTemplate : Ext.Template/Ext.XTemplate
用来在header 元素中创建tools 的模板。默认为:...

用来在header 元素中创建tools 的模板。默认为:

                                    new Ext.Template('<div class="x-tool x-tool-{id}">&#160;</div>')

可以覆盖此参数，以便为基于更复杂XTemplate的tools提供自定义的DOM结构。 模板的数据为一个简单的tool配置对象(不是整个Array)， 它在 tools配置项指定。 在以下例子中，当鼠标滑过tool时，一个<a>标签被用来提供视觉效果:

var win = new Ext.Window({
    tools: [{
        id: 'download',
        href: '/MyPdfDoc.pdf'
    }],
    toolTemplate: new Ext.XTemplate(
        '<tpl if="id==\'download\'">',
            '<a class="x-tool x-tool-pdf" href="{href}"></a>',
        '</tpl>',
        '<tpl if="id!=\'download\'">',
            '<div class="x-tool x-tool-{id}">&#160;</div>',
        '</tpl>'
    ),
    width:500,
    height:300,
    closeAction:'hide'
});

注意，CSS类'x-tool-pdf'必须拥有一个关联的样式规则，它提供了一个适当的背景图片， 例如:

                                a.x-tool-pdf {background-image: url(../shared/extjs/images/pdf.gif)!important;}
Panel
tools : Array
一个工具按钮配置数组，用来添加到头部工具区域。 当渲染之后，每个工具都被存储为一个Element ，被一个叫做...
一个工具按钮配置数组，用来添加到头部工具区域。 当渲染之后，每个工具都被存储为一个Element ，被一个叫做 tools. <tool-type> 的公共参数引用。

每个工具配置都可以包含如下参数:

  • id : String
    必须。需要创建的工具类型。默认情况下，这被指定为一个 CSS类，格式为 x-tool- <tool-type> ，用来形成工具Element。 对于以下列出的工具类型，Ext提供了CSS规则，和一个包含图片的icon对象。 通过提供可选的CSS规则和背景图片，开发者可以实现自定义的工具:
      toggle (当collapsible 为 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
    • tc : Object
      工具配置对象
  • stopEvent : Boolean
    默认为true。指定为false可以允许点击事件进行冒泡。
  • scope : Object
    调用处理函数的作用域。
  • qtip : String/Object
    一个tip字符串，或者一个提供给 Ext.QuickTip.register 的配置参数
  • hidden : Boolean
    True将会在初始化时渲染成隐藏的。
  • on : Object
    一个监听器配置对象，以addListener所需的参数格式 指定事件监听器

注意，当panel被折叠时提供部分固定的工具，这些工具仅仅提供可视按钮。 所有必备的功能，都必须通过添加实现了必备行为的处理函数来实现。

示例用法:

tools:[{
    id:'refresh',
    qtip: 'Refresh form Data',
    // hidden:true,
    handler: function(event, toolEl, panel){
        // refresh logic
    }
},
{
    id:'help',
    qtip: 'Get Help',
    handler: function(event, toolEl, panel){
        // whatever
    }
}]

对于自定义 'help' 的id，定义了两个相应的css类，拥有一个到15x15图片的链接:

                                .x-tool-help {background-image: url(images/help.png);}
.x-tool-help-over {background-image: url(images/help_over.png);}
// if using an image sprite:
.x-tool-help {background-image: url(images/help.png) no-repeat 0 0;}
.x-tool-help-over {background-position:-15px 0;}
Panel
tpl : Mixed
一个 Ext.Template , Ext.XTemplate 或者一个用来形成一个Ext.XTemplate的字符串数组...
一个 Ext.Template , Ext.XTemplate 或者一个用来形成一个Ext.XTemplate的字符串数组。 与 data 和 tplWriteMode 配置项协同使用。
Component
tplWriteMode : String
刷新组件的内容区域时使用的Ext.(X)Template方式。 默认为'overwrite' (参见 Ext.XTemplate.overwrite )。
刷新组件的内容区域时使用的Ext.(X)Template方式。 默认为'overwrite' (参见 Ext.XTemplate.overwrite )。
Component
trackMouse : Boolean
如果为true，当鼠标移过目标元素时，则tooltip会跟随鼠标移动(默认值为 false)。
ToolTip
unstyled : Boolean
覆盖 baseCls 设置为 baseCls = 'x-plain' ， 除了必须的属性之外，它将panel渲染成无样式的...
覆盖 baseCls 设置为 baseCls = 'x-plain' ， 除了必须的属性之外，它将panel渲染成无样式的，以便Ext布局功能能起作用 (例如overflow:hidden)。
Panel
width : Number
组件的宽度(默认值为 auto)。注:如果想使用百分比的方式...
组件的宽度(默认值为 auto)。注:如果想使用百分比的方式来设置值，请查看 Ext.Component.anchor。
Tip
x : Number
如果被包含在一个指定位置的容器中，这个值表示x(left)坐标值。
BoxComponent
xtype : String
需要创建配置的xtype。 当传递一个配置对象给构造函数时...
需要创建配置的xtype。 当传递一个配置对象给构造函数时，此配置选项不会被使用。 只有在使用懒初始化的时候此配置项才会被使用，此时容器的子项目不是 通过一个完整的实例组件，而是通过一个Component配置指定的。 在渲染时，将会查找xtype以决定创建何种类型的子组件。

预定义的xtype列表如下： here。

如果你继承Component创建你自己的组件，你需要使用Ext.ComponentMgr.registerType 对它们进行注册，以便利用懒初始化和渲染机制。
Component
y : Number
如果被包含在一个指定位置的容器中，这个值表示y(top)坐标值。
BoxComponent

公共属性

Property Defined By
body : Ext.Element
Panel的body Element ，可以用来包含HTML内容。 内容可以在...
Panel的body Element ，可以用来包含HTML内容。 内容可以在html 配置项中指定，或者可以使用autoLoad 配置项被加载，或者通过Panel的Updater提供。 只读。

如果这被用来通过任意方式加载可视的HTML元素，那么Panel不可以被用作 一个Layout，用来容纳其它Panel。

如果当前Panel期望被用作一个Layout的宿主 (参见 layout) 那么body元素必须不能被加载或者改变---因为它处于Panel的Layout的控制 之下。

注意: 另请参见 el .

Panel
buttons : Array
Panel的按钮数组，它们从 buttons 配置属性创建。只读。
Panel
bwrap : Ext.Element
Panel的bwrapElement ，用来包含其它Panel元素(tbar, body, bbar, footer)。 参见 bodyCfg。 只读。
Panel
collapsed : Boolean
如果当前panel被折叠为true。只读。
Panel
dd : Ext.dd.DragSource.
如果当前Panel被配置为 draggable ，此参数将会包含一个 Ext.dd.DragSource 实例，它负责处理拖拽Panel...

如果当前Panel被配置为 draggable ，此参数将会包含一个 Ext.dd.DragSource 实例，它负责处理拖拽Panel。

开发者必须提供Ext.dd.DragSource的 抽象方法的实现，用来提供drag/drop过程中的每一步行为。 参见 draggable.
Panel
disabled : Boolean
当前组件处于无效状态时为true。 Read-only.
Component
el : Ext.Element
封装了当前组件的Ext.Element。 Read-only。通常情况下，这将是一个<DIV>元素，它由此类的...

封装了当前组件的Ext.Element。 Read-only。

通常情况下，这将是一个<DIV>元素，它由此类的 onRender方法创建，但是它可以通过使用 autoEl 配置项进行覆盖。

注意: 直到组件渲染完成此元素都将处于无效状态。

如需向当前组件的 DOM事件(而不是当前组件自己的Observable事件)添加监听器， 更多建议，参见 listeners 配置项，或者直接使用一个render监听器:

new Ext.Panel({
    title: 'The Clickable Panel',
    listeners: {
        render: function(p) {
            // Append the Panel to the click handler's argument list.
            p.getEl().on('click', handlePanelClick.createDelegate(null, [p], true));
        },
        single: true  // Remove the listener after first invocation
    }
});

另请参见 getEl

Component
footer : Ext.Element
Panel底部Element 。只读。此元素被用来容纳Panel的...
Panel底部Element 。只读。

此元素被用来容纳Panel的 buttons 或者 fbar 。

注意: 另请参见 el 的注释。

Panel
header : Ext.Element
Panel的headerElement. 只读。此元素被用来容纳 title和 tools...
Panel的headerElement. 只读。

此元素被用来容纳 title和 tools

注意: 另请参见 el 的注释。

Panel
hidden : Boolean
如果当前组件处于隐藏状态，此值为true。Read-only。
Component
initialConfig : Object
当前组件的初始化配置描述。 Read-only。
Component
items : MixedCollection
当前容器中的子组件集合 Ext.util.MixedCollection
Container
ownerCt : Ext.Container
组件所属的Container (默认为undefined，当前组件被添加到一个容器中时此值被自动设置)...
组件所属的Container (默认为undefined，当前组件被添加到一个容器中时此值被自动设置)。 Read-only。

注意: 如需访问容器中的子组件，参见 itemId 。

Component
private : Object
我们只能在一块可见的区域进行布局。 布局目标*或者它的任何父元素* 为...
我们只能在一块可见的区域进行布局。 布局目标*或者它的任何父元素* 为display:none， 将意味着它没有一块可见的区域。
Container
refOwner : Ext.Container
如果当前组件是一个容器的孩子，并且是通过一个 ref 配置项被注册的，则此值为 ref 引用被插入到的祖先容器。
如果当前组件是一个容器的孩子，并且是通过一个 ref 配置项被注册的，则此值为 ref 引用被插入到的祖先容器。
Component
rendered : Boolean
如果当前组件已经被渲染了，此值为true。Read-only.
Component
triggerElement : DOMElement
配置项被配置时 此target 元素的所有选中子元素将触发各自不同的...
当一个Tooltip的delegate 配置项被配置时 此target 元素的所有选中子元素将触发各自不同的显示事件，触发显示的DOM元素将设置此属性。
ToolTip

公共方法

Method Defined By
ToolTip( Object config )
创建一个新的Tooltip
创建一个新的Tooltip
参数:
  • config : Object
    配置参数
返回值:
  • void
ToolTip
add ( ...Object/Array component ) : Ext.Component/Array
向当前容器中添加 Component(s)。 描述 :在添加之前触发 beforeadd 事件...

向当前容器中添加 Component(s)。

描述 :

  • 在添加之前触发 beforeadd 事件
  • 将会相应地应用 容器的default config values (细节参见 defaults )。
  • 在组件添加之后触发 add 事件。

注意 :

  • 当调用 add 时如果容器已经被渲染， 你可能需要调用 doLayout 方法来刷新视图，它将导致所有尚未渲染的子组件进行渲染操作。 此操作是必须的，这样你可以 add 多个子组件而只刷新一次layout。 示例用法:

var tb = new Ext.Toolbar();
tb.render(document.body);  // toolbar is rendered
tb.add({text:'Button 1'}); // add multiple items (defaultType for Toolbar is 'button')
tb.add({text:'Button 2'});
tb.doLayout();             // refresh the layout
  • 警告: 使用BorderLayout布局的容器可能不能删除或者添加组件。 更多细节参见BorderLayout 的注释。
参数:
  • component : ...Object/Array

    需要添加的一个或多个组件，或者是一个组件数组。 更多信息参见 items 。

返回值:
  • Ext.Component/Array
    被添加的组件。
Container
addButton ( String/Object config , Function handler , Object scope ) : Ext.Button
向当前panel中添加一个按钮。注意，此方法必须在渲染之前调用。 首选的方式是通过...
向当前panel中添加一个按钮。注意，此方法必须在渲染之前调用。 首选的方式是通过buttons 配置项添加按钮。
参数:
  • config : String/Object
    一个合法的Ext.Button 配置。字符串将会变成默认按钮配置文本，对象将会被看做一个按钮配置对象。
  • handler : Function
    在按钮Ext.Button.click 时被调用的函数
  • scope : Object
    作用域( this 引用)，按钮处理函数将会在其中被执行。默认为Button.
返回值:
  • Ext.Button
    被添加的按钮
Panel
addClass ( string cls ) : Ext.Component
为组件底层的元素添加CSS样式。
为组件底层的元素添加CSS样式。
参数:
  • cls : string
    需要添加的CSS样式的class名称
返回值:
  • Ext.Component
    this
Component
addEvents( Object|String o, string Optional. ) : void
添加指定的事件到事件列表上，事件会被该Observable触发。
添加指定的事件到事件列表上，事件会被该Observable触发。
参数:
  • o : Object|String
    以事件名作为属性true作为值的对象 或者当多个事件名被分开的传递时则为第一个事件名。
  • Optional. : string
    事件名被分开的传递时则为事件名。 用法:
    this.addEvents('storeloaded', 'storecleared');
返回值:
  • void
Observable
addListener( String eventName, Function handler, [Object scope], [Object options] ) : void
给对象添加事件处理器。
给对象添加事件处理器。
参数:
  • eventName : String
    监听的事件名。
  • handler : Function
    事件调用的方法
  • scope : Object
    （可选）处理方法执行的作用域 (this的引用 reference)。 如果被忽略。默认为触发事件的对象。
  • options : Object
    （可选）包含处理器配置和属性的对象。 可能包含以下的属性:
    • scope : Object
      处理方法执行的作用域(this的引用) 。 如果被忽略。默认为触发事件的对象。
    • delay : Number
      在触发事件后延迟调用处理器的毫秒数。
    • single : Boolean
      如果为True则添加一个处理器来处理下一次的事件触发（仅一次），然后移除自己。
    • buffer : Number
      使得处理器延迟指定毫秒数后预定的运行在 一个Ext.util.DelayedTask中 。 如果事件在时间内再一次被触发，原始的处理器不会被调用，但是新的处理器会预定的在他的位置上。
    • target : Observable
      如果事件在目标的Observable上触发则仅仅调用处理器， 否则 事件会从子类的Observable上冒泡

    组合选项
    使用这些选项参数,可能会组合出不同类型的监听器：

    一个延迟的，一次性的监听器。

    myDataView.on('click', this.onClick, this, {
single: true,
delay: 100
});

    一次调用附加多个处理器
    该方法同样支持传递一个包含指定的多个处理器的属性的配置对象参数。

    myGridPanel.on({
'click' : {
    fn: this.onClick,
    scope: this,
    delay: 100
},
'mouseover' : {
    fn: this.onMouseOver,
    scope: this
},
'mouseout' : {
    fn: this.onMouseOut,
    scope: this
}
});

    或者一个简写的语法：

    myGridPanel.on({
'click' : this.onClick,
'mouseover' : this.onMouseOver,
'mouseout' : this.onMouseOut,
 scope: this
});
返回值:
  • void
Observable
applyToMarkup ( String/HTMLElement el ) : void
将此组件添加到已存在的有效的HTML标签中。 使用该方法时，无需再调用render()方法。
将此组件添加到已存在的有效的HTML标签中。 使用该方法时，无需再调用render()方法。
参数:
  • el : String/HTMLElement
返回值:
  • void
Component
bubble ( Function fn , [ Object scope ], [ Array args ] ) : Ext.Container
沿着component/container继承结构进行冒泡， 在每个组件上调用指定的函数。 所调用函数的作用域...
沿着component/container继承结构进行冒泡， 在每个组件上调用指定的函数。 所调用函数的作用域( this)将会是 指定的作用域或者是当前组件。 如果在函数任何一点上返回false，即停止冒泡过程
参数:
  • fn : Function
    需要调用的函数
  • scope : Object
    (可选) 函数的作用域(默认为当前节点)
  • args : Array
    (可选) 调用函数时需要传递的参数( 默认传递当前组件)
返回值:
  • Ext.Container
    this
Container
cascade ( Function fn , [ Object scope ], [ Array args ] ) : Ext.Container
从当前组件(第一个被调用的组件)开始，沿着component/container的继承树向下回溯...
从当前组件(第一个被调用的组件)开始，沿着component/container的继承树向下回溯， 在每个组件上调用指定的方法， 调用方法时的(this)作用域为指定的scope或者为当前组件。 传递给方法的参数为传递进来args或者当前组件。 在起泡的任意一个节点上，如果function返回false，即停止在那个分支上。
参数:
  • fn : Function
    需要调用的函数
  • scope : Object
    (可选)函数的作用域(默认为当前组件)
  • args : Array
    (可选) 调用函数时传递的参数 (默认传递当前组件)
返回值:
  • Ext.Container
    this
Container
cloneConfig ( Object overrides ) : Ext.Component
默认使用原先传递给当前实例的配置值克隆当前组件。
默认使用原先传递给当前实例的配置值克隆当前组件。
参数:
  • overrides : Object
    一个新的配置项，包含需要覆盖到克隆版本的所有属性。 可以传递一个id参数给此对象，否则将自动生成一个新的id以避免发生重复。
返回值:
  • Ext.Component
    当前组件的克隆副本
Component
collapse ( Boolean animate ) : Ext.Panel
折叠panel的body，这样它就变成隐藏的。 触发beforecollapse 事件...
折叠panel的body，这样它就变成隐藏的。 触发beforecollapse 事件，处理函数返回false可以取消折叠操作。
参数:
  • animate : Boolean
    True将会在变换时使用动画效果，其它为false( 默认为panel的animCollapse 配置项的值)
返回值:
  • Ext.Panel
    this
Panel
destroy () : void
通过如下方法销毁对象：删除所有的事件监听器、将组件的元素从DOM树中删除...
通过如下方法销毁对象：删除所有的事件监听器、将组件的元素从DOM树中删除（如果可以）、 将组件从它的 Ext.Container（如果可用）中删除、 并且将它从Ext.ComponentMgr中 注销。 销毁操作一般由框架自动完成，一般情况下不需要直接调用该方法。
参数:
  • 无。
返回值:
  • void
Component
disable () : Ext.Component
将组件置为无效状态，并出发'disable'事件。
将组件置为无效状态，并出发'disable'事件。
参数:
  • 无。
返回值:
  • Ext.Component
    this
Component
doLayout ( [ Boolean shallow ], [ Boolean force ] ) : Ext.Container
强制容器的布局进行重新计算。 在向一个已经渲染的容器中添加...
强制容器的布局进行重新计算。 在向一个已经渲染的容器中添加一个新的组件， 或者改变子组件的尺寸/位置参数之后，必须调用此函数。
参数:
  • shallow : Boolean
    (可选) 设置为true时将仅仅计算当前组件的布局， 并且让子组件在需要时自动计算布局 (默认为flase，它将递归地调用每个子容器的doLayout方法)
  • force : Boolean
    (可选) 设置为true将强制进行布局，即使项目是隐藏的也进行。
返回值:
  • Ext.Container
    this
Container
enable () : Ext.Component
将组件置为有效状态并触发'enable'事件。
将组件置为有效状态并触发'enable'事件。
参数:
  • 无。
返回值:
  • Ext.Component
    this
Component
enableBubble( String/Array events ) :void
是否现在使得事件会被该Observable触发并调用 this.getBubbleTarget()方法在拥有者的继承树...

是否现在使得事件会被该Observable触发并调用 this.getBubbleTarget()方法在拥有者的继承树中冒泡。Observable的基础类中没有该方法的实现。

该方法一般被Ext.Components用来冒泡事件到拥有者的容器。参看Ext.Component.getBubbleTarget默认的实现 在Ext.Component中返回组件的直接拥有者。但是如果需要的是一个已知的目标，该方法可以被重写来更快的访问需求的目标。

例子:

Ext.override(Ext.form.Field, {
    // 添加方法到Field的initComponent上改变事件为冒泡
    initComponent : Ext.form.Field.prototype.initComponent.createSequence(function() {
        this.enableBubble('change');
    }),

    // 我们知道我们想让Field的事件冒泡到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() {
            // 如果样式被修改标题会变红。
            myForm.header.setStyle('color', 'red');
        }
    }
});
参数:
  • events : String/Array
    冒泡的事件名，或事件名数组
返回值:
  • void
Observable
expand ( Boolean animate ) : Ext.Panel
展开panel的body以便让其变得可见。 触发beforeexpand 事件...
展开panel的body以便让其变得可见。 触发beforeexpand 事件，如果它返回false将会取消展开操作。
参数:
  • animate : Boolean
    True将会在变换过程中使用动画效果，否则为false (默认为panel的 animCollapse 配置项的值)
返回值:
  • Ext.Panel
    this
Panel
find ( String prop , String value ) : Array
根据属性查找当前容器中任何层次上的组件
根据属性查找当前容器中任何层次上的组件
参数:
  • prop : String
  • value : String
返回值:
  • Array
    Ext.Component数组
Container
findBy ( Function fn , [ Object scope ] ) : Array
根据一个自定义的函数，查找当前容器中任意层级上的一个组件。 如果传递的函数返回true...
根据一个自定义的函数，查找当前容器中任意层级上的一个组件。 如果传递的函数返回true，组件将会被包含在结果中。 函数将会被用如下参数(component, this container)进行调用。
参数:
  • fn : Function
    需要调用的函数
  • scope : Object
    可选
返回值:
  • Array
    Ext.Component数组
Container
findById ( String id ) : Ext.Component
通过id查找容器中位于任何层级上的组件
通过id查找容器中位于任何层级上的组件
参数:
  • id : String
返回值:
  • Ext.Component
Container
findByType ( String/Class xtype , [ Boolean shallow ] ) : Array
根据xtype或者类型，查找当前容器中任何层级上的组件
根据xtype或者类型，查找当前容器中任何层级上的组件
参数:
  • xtype : String/Class
    组件的xtype字符串，或者直接是组件的class类型
  • shallow : Boolean
    (可选) 此参数为flase时将检查当前组件是否是指定xtype的后裔 (这是默认情况)，或者设置为true， 将检查当前组件是否直接是指定xtype类型（译者注：即指不按照多态性进行检查）。
返回值:
  • Array
    Ext.Component数组
Container
findParentBy ( Function fn ) : Ext.Container
通过自定义的函数查找当前组件上层任何层次上的容器...
通过自定义的函数查找当前组件上层任何层次上的容器。 如果传递的函数返回true，容器对象将被返回。
参数:
  • fn : Function
    自定义的函数，使用如下参数调用(container,this component)。
返回值:
  • Ext.Container
    自定义函数返回true的第一个容器
Component
findParentByType ( String/Class xtype ) : Ext.Container
通过xtype或者class查找当前组件上层任何层次上的容器
通过xtype或者class查找当前组件上层任何层次上的容器
参数:
  • xtype : String/Class
    组件的xtype字符串，或者直接是组件的class
返回值:
  • Ext.Container
    符合指定xtype或者class的第一个容器
Component
fireEvent( String eventName, Object... args ) : Boolean
用传入的参数触发指定的事件 (减去事件名)。 一个事件可以被设置为冒泡 Obse...

用传入的参数触发指定的事件 (减去事件名)。

一个事件可以被设置为冒泡到Observable父类继承树(参看 Ext.Component.getBubbleTarget) 调用enableBubble实现。

参数:
  • eventName : String
    触发的事件名。
  • args : Object...
    传递给处理器的可变长度参数。
返回值:
  • Boolean
    如果有任何的处理器返回false则返回false，否则返回true。
Observable
focus ( [ Boolean selectText ], [ Boolean/Number delay ] ) : Ext.Component
尝试将当前组件设为焦点。
尝试将当前组件设为焦点。
参数:
  • selectText : Boolean
    (可选) 如果可用，同时选中组件内部的文本
  • delay : Boolean/Number
    (可选)将当前组件设置为焦点的延迟时间(设置为true等于0毫秒)
返回值:
  • Ext.Component
    this
Component
get ( String/Number key ) : Ext.Component
获取当前容器包含的一个组件( items.get(key)方法的别名)
获取当前容器包含的一个组件( items.get(key)方法的别名)
参数:
  • key : String/Number
    组件的索引
返回值:
  • Ext.Component
    Ext.Component
Container
getBottomToolbar () : Ext.Toolbar
返回panel底部区域toolbar ( bbar )。
返回panel底部区域toolbar ( bbar )。
参数:
  • 无。
返回值:
  • Ext.Toolbar
    toolbar
Panel
getBox ( [ Boolean local ] ) : Object
获取组件底层元素当前盒子模型的尺寸。（译者注：盒子模型是CSS术语，详细解释请自行搜索。）
获取组件底层元素当前盒子模型的尺寸。（译者注：盒子模型是CSS术语，详细解释请自行搜索。）
参数:
  • local : Boolean
    (可选)值为true时，组件的left值和top值将代替页面的XY被返回。(默认值为false)
返回值:
  • Object
    返回值的格式{x, y, width, height}
BoxComponent
getBubbleTarget () : Ext.Container
为Observable的fireEvent方法提供链接，它沿着继承结构进行冒泡操作。
为Observable的fireEvent方法提供链接，它沿着继承结构进行冒泡操作。
参数:
  • 无。
返回值:
  • Ext.Container
    拥有当前组件的容器。
Component
getComponent ( String/Number comp ) : Ext.Component
检查当前容器的 items property 并且获取当前容器的一个直接的子组件。
检查当前容器的 items property 并且获取当前容器的一个直接的子组件。
参数:
  • comp : String/Number
    参数可以是以下任何值：
    • 一个 String : 代表子组件的 itemId 或者 id
    • 一个 Number : 代表子组件在 items property 中的位置

    其它信息参见 Ext.util.MixedCollection.get。

返回值:
  • Ext.Component
    组件(如果有找到)。
Container
getEl () : Ext.Element
返回 Ext.Element ，它包装了当前组件。...

返回 Ext.Element ，它包装了当前组件。

通常情况下，这将是一个<DIV>元素，它是由该类的onRender方法创建的， 但是可以使用autoEl配置项 覆盖它。

注意: 此元素将会一直处于无效状态直到当前组件渲染完成。

如需向当前组件的 DOM事件(而不是当前组件自己的Observable事件)添加监听器， 更多建议，参见 listeners 配置项，或者直接使用一个render监听器:

new Ext.Panel({
    title: 'The Clickable Panel',
    listeners: {
        render: function(p) {
            // Append the Panel to the click handler's argument list.
            p.getEl().on('click', handlePanelClick.createDelegate(null, [p], true));
        },
        single: true  // Remove the listener after first invocation
    }
});
参数:
  • 无。
返回值:
  • Ext.Element
    包装当前组件的元素。
Component
getFooterToolbar () : Ext.Toolbar
返回panel底部( fbar )区域的toolbar
返回panel底部( fbar )区域的toolbar
参数:
  • 无。
返回值:
  • Ext.Toolbar
    toolbar
Panel
getFrameHeight () : Number
返回当前panel框架元素的高度像素值 (包括所有top和bottom工具栏以及header和footer元素...
返回当前panel框架元素的高度像素值 (包括所有top和bottom工具栏以及header和footer元素， 但是不包括body高度)。 如需获取body高度，参见 getInnerHeight.
参数:
  • 无。
返回值:
  • Number
    框架高度
Panel
getFrameWidth () : Number
返回当前panel框架元素的宽度像素值 (不包含body宽度)。如需获得body宽度，参见...
返回当前panel框架元素的宽度像素值 (不包含body宽度)。如需获得body宽度，参见 getInnerWidth。
参数:
  • 无。
返回值:
  • Number
    框架宽度
Panel
getHeight () : Number
获取该组件的当前高度值。
获取该组件的当前高度值。
参数:
  • 无。
返回值:
  • Number
BoxComponent
getId () : String
返回当前组件的id，如果没有定义id，则自动生成并返回一个id:'ext-comp-'...
返回当前组件的 id 如果没有定义 id 则自动生成并返回一个 id

'ext-comp-' + (++Ext.Component.AUTO_ID)
参数:
  • 无。
返回值:
  • String
    id
Component
getInnerHeight () : Number
返回body元素的高度像素值(不包括任何框架元素的高度)。 对于框架高度参见...
返回body元素的高度像素值(不包括任何框架元素的高度)。 对于框架高度参见 getFrameHeight。
参数:
  • 无。
返回值:
  • Number
    body高度
Panel
getInnerWidth () : Number
返回body元素宽度像素值(不包含任何框架元素的宽度)。 对于框架宽度，参见 getFrameWidth。
返回body元素宽度像素值(不包含任何框架元素的宽度)。 对于框架宽度，参见 getFrameWidth。
参数:
  • 无。
返回值:
  • Number
    body宽度
Panel
getItemId () : String
返回当前组件的 itemId 。 如果没有通过配置参数指定 itemId 那么，将会使用...
返回当前组件的 itemId 。 如果没有通过配置参数指定 itemId 那么，将会使用 getId 返回 id 。
参数:
  • 无。
返回值:
  • String
Component
getLayout () : ContainerLayout
返回容器当前使用的布局管理器。 如果容器当前没有设置布局管理器， 将会创建一个默认的...
返回容器当前使用的布局管理器。 如果容器当前没有设置布局管理器， 将会创建一个默认的 Ext.layout.ContainerLayout 并被设置为容器的布局管理器。
参数:
  • 无。
返回值:
  • ContainerLayout
    容器的布局管理器
Container
getLayoutTarget () : Ext.Element
返回当前容器中用来包含子组件的元素。提供了一个 可以返回容器的...

返回当前容器中用来包含子组件的元素。

提供了一个 可以返回容器的Element 的实现， 但是，如果容器有更复杂的结构， 可以覆盖此实现以返回 layout 在其中渲染子组件的元素。

参数:
  • 无。
返回值:
  • Ext.Element
    在其中渲染子组件的元素。
Container
getOuterSize () : Object
获取当前组件所在元素的尺寸大小，包括边缘的空白处。
获取当前组件所在元素的尺寸大小，包括边缘的空白处。
参数:
  • 无。
返回值:
  • Object
    一个包含元素大小的对象 {width: (element width + left/right margins), height: (element height + top/bottom margins)}
BoxComponent
getPosition ( [ Boolean local ] ) : Array
获取组件底层元素当前的XY位置。
获取组件底层元素当前的XY位置。
参数:
  • local : Boolean
    (可选)如果为true，将返回元素的left和top值，而不是相对于页面内的 XY。(默认值为 false)
返回值:
  • Array
    元素的XY位置值(例如：[100, 200])
BoxComponent
getResizeEl () : Ext.Element
返回该组件的最外层用来定义这些组件整体大小的Element...

返回该组件的最外层用来定义这些组件整体大小的Element对象。

通常用 getEl 方法将会返回相同的Element对象，但在有些情况下，组件可能有一些更多的封装了它的主要动态Element对象的Element对象。

例如ComboBox。它是封装在一个包含<input>元素的包装元素里(这将返回其 getEl方法和触发按钮的元素)。返回的元素为resizeEl。

参数:
  • 无。
返回值:
  • Ext.Element
    The Element which is to be resized by size managing layouts.
BoxComponent
getSize () : Object
获取组件底层元素当前的大小。
获取组件底层元素当前的大小。
参数:
  • 无。
返回值:
  • Object
    一个包含元素大小的对象{width: (element width), height: (element height)}
BoxComponent
getTool ( String id ) : Object
根据id获取一个tool.
根据id获取一个tool.
参数:
  • id : String
返回值:
  • Object
    tool
Panel
getTopToolbar () : Ext.Toolbar
返回panel顶部区域的 toolbar ( tbar ).
返回panel顶部区域的 toolbar ( tbar ).
参数:
  • 无。
返回值:
  • Ext.Toolbar
    toolbar
Panel
getUpdater () : Ext.Updater
获取当前panel的 Ext.Updater .让你可以为当前panel的body执行Ajax更新。
获取当前panel的 Ext.Updater .让你可以为当前panel的body执行Ajax更新。
参数:
  • 无。
返回值:
  • Ext.Updater
    Updater
Panel
getWidth () : Number
获取该组件的当前宽度值。
获取该组件的当前宽度值。
参数:
  • 无。
返回值:
  • Number
BoxComponent
getXType () : String
获取当前组件的xtype，它是用 Ext.ComponentMgr 注册的。 所有可用的xtype列表，参见...
获取当前组件的xtype，它是用 Ext.ComponentMgr 注册的。 所有可用的xtype列表，参见 Ext.Component 类头部。示例用法:

var t = new Ext.form.TextField();
alert(t.getXType());  // alerts 'textfield'
参数:
  • 无。
返回值:
  • String
    The xtype
Component
getXTypes () : String
返回此组件的xtype继承树，用字符'-'分隔。 所有可用的xtype值...

返回此组件的xtype继承树，用字符'-'分隔。 所有可用的xtype值，请参见Ext.Component 类的头部。

如果使用你自己的子类，请注意，组件必须注册它自己的xtype值以便区别于继承的xtype。

示例用法:

var t = new Ext.form.TextField();
alert(t.getXTypes());  // alerts 'component/box/field/textfield'
参数:
  • 无。
返回值:
  • String
    xtype层次字符串
Component
hasListener( String eventName ) : Boolean
检测对象是否包含指定事件的任何监听器
检测对象是否包含指定事件的任何监听器
参数:
  • eventName : String
    检测的事件名
返回值:
  • Boolean
    如果事件被监听则为true，否则为false
Observable
hide() : void
如果此tooltip可见，则隐藏它。
如果此tooltip可见，则隐藏它。
参数:
  • 无。
返回值:
  • void
ToolTip
initTarget( Mixed t ) : void
将此Tooltip绑定到指定的元素上。Tooltip会在鼠标移至该元素上时显示。
将此Tooltip绑定到指定的元素上。Tooltip会在鼠标移至该元素上时显示。
参数:
  • t : Mixed
    绑定到的 Element, HtmlElement,或元素的ID
返回值:
  • void
ToolTip
insert ( Number index , Ext.Component component ) : Ext.Component
在当前容器的指定索引处插入一个组件。 在插入之前触发...
在当前容器的指定索引处插入一个组件。 在插入之前触发 beforeadd 事件， 然后在组件被插入之后触发 add 事件。
参数:
  • index : Number
    组件会被插入到容器子项集合中时的索引位置
  • component : Ext.Component
    需要插入的子组件。

    Ext使用懒渲染，只有在必要的时候才会渲染插入的组件。

    如果使用懒渲染，可以传递一个组件配置对象以避免创建一个真实组件的开销， 这意味着，插入的组件不会立即被渲染。 为了利用这个“懒初始化”('lazy instantiation')， 必须把组件设置为它注册的 Ext.Component.xtype 值。

    所有可用的xtype列表，参见 Ext.Component。
返回值:
  • Ext.Component
    使用容器默认配置值插入的组件(或者配置对象)。
Container
isVisible () : Boolean
如果当前组件可见，返回true。
如果当前组件可见，返回true。
参数:
  • 无。
返回值:
  • Boolean
    如果当前组件可见，返回true，其它返回false。
Component
isXType ( String xtype , [ Boolean shallow ] ) : Boolean
Tests whether or not this Component is of a specific xtype. This can test whether this Component is descended from th...

测试此组件是否是指定的xtype。此方法既可以测试是否是指定的xtype的某个子类， 或者它是否直接是指定的xtype类(shallow=true)。

如果使用你自己的子类，必须知道组件必须注册它的xtype值。

所有可用的xtype列表，参见 Ext.Component 类头部。

示例用法:

var t = new Ext.form.TextField();
var isText = t.isXType('textfield');        // true
var isBoxSubclass = t.isXType('box');       // true, descended from BoxComponent
var isBoxInstance = t.isXType('box', true); // false, not a direct BoxComponent instance
参数:
  • xtype : String
    需要为当前组件进行检测的xtype
  • shallow : Boolean
    (可选) 如果为false，检测组件是否是xtype继承树中的某个子类（默认是这种情况）， 如果为true，只检测组件是否是指定的xtype类型。
返回值:
  • Boolean
    如果当前组件是指定xtype的子类，返回true，其它返回flase。
Component
load ( Object/String/Function config ) : Ext.Panel
立即使用XHR返回的内容装载当前panel的内容。
立即使用XHR返回的内容装载当前panel的内容。
参数:
  • config : Object/String/Function
    一个包含任何如下选项的配置对象:
    panel.load({
    url: 'your-url.php',
    params: {param1: 'foo', param2: 'bar'}, // or a URL encoded string
    callback: yourFunction,
    scope: yourObject, // optional scope for the callback
    discardUrl: false,
    nocache: false,
    text: 'Loading...',
    timeout: 30,
    scripts: false
});
    唯一的必须参数是url。 可选的nocache、text和script参数是 disableCaching、indicatorText和loadScripts的快捷方式， 它们被用来设置到当前panel的Updater实例所绑定的 属性上。
返回值:
  • Ext.Panel
    this
Panel
mon ( Observable|Element item , Object|String ename , Function fn , Object scope , Object opt ) : void
向任何Observable对象(或者元素)上添加监听器，监听器将会在组件...

向任何Observable对象(或者元素)上添加监听器，监听器将会在组件销毁时被自动删除。
用法：

myGridPanel.mon(myGridPanel.getSelectionModel(), 'selectionchange', handleSelectionChange, null, {buffer: 50});

or:

myGridPanel.mon(myGridPanel.getSelectionModel(), {
    selectionchange: handleSelectionChange,
    buffer: 50
});
参数:
  • item : Observable|Element
    需要添加listener/listeners的项目。
  • ename : Object|String
    事件名，或者一个包含事件名属性的对象。
  • fn : Function
    (可选) 如果 ename 参数是一个事件名，此参数为处理函数。
  • scope : Object
    (可选)如果 ename 参数是一个事件名称，此参数是作用域 ( this 引用)，监听函数将会在此作用域中被执行。
  • opt : Object
    (可选)如果 ename 参数是一个事件名称， 此参数是 addListener 配置项。
返回值:
  • void
Component
mun ( Observable|Element item , Object|String ename , Function fn , Object scope ) : void
删除通过mon 方法添加的监听器。
删除通过mon 方法添加的监听器。
参数:
  • item : Observable|Element
    需要删除listener/listeners的项目。
  • ename : Object|String
    事件名称，或者一个包含事件名称属性的对象。
  • fn : Function
    (可选)如果 ename 参数是一个事件名称，此参数是一个处理函数。
  • scope : Object
    (可选)如果 ename 参数是一个事件名称，此参数是作用域 ( this 引用)，监听函数将会在此作用域中被执行。
返回值:
  • void
Component
nextSibling () : Ext.Component
返回所属容器中的下一个组件
返回所属容器中的下一个组件
参数:
  • 无。
返回值:
  • Ext.Component
Component
on( String eventName, Function handler, [Object scope], [Object options] ) : void
给对象添加事件处理器 (addListener的简写形式)
给对象添加事件处理器 (addListener的简写形式。)
参数:
  • eventName : String
    监听的事件类型
  • handler : Function
    事件调用的方法
  • scope : Object
    （可选）处理方法执行时的作用域 (this 的引用)。 如果被忽略。默认为触发事件的对象。
  • options : Object
    可选 包含处理器配置的对象。
返回值:
  • void
Observable
previousSibling () : Ext.Component
返回所属容器中的前一个组件
返回所属容器中的前一个组件
参数:
  • 无。
返回值:
  • Ext.Component
Component
purgeListeners() : void
移除对象上所有的监听器
移除对象上所有的监听器
参数:
  • 无。
返回值:
  • void
Observable
relayEvents( Object o, Array events ) : void
从指定的Observable上传递选择的事件就好像被当前对象触发一样。
从指定的Observable上传递选择的事件就好像被当前对象触发一样。
参数:
  • o : Object
    该Observable上的事件被当前对象传递。
  • events : Array
    传递的数组名。
返回值:
  • void
Observable
remove ( Component/String component , [ Boolean autoDestroy ] ) : Ext.Component
从当前容器中移除一个组件。 在移除之前触发 beforeremove 事件， 然后在组件被移除之后触发...
从当前容器中移除一个组件。 在移除之前触发 beforeremove 事件， 然后在组件被移除之后触发 remove 事件。
参数:
  • component : Component/String
    需要移除的组件引用或者id
  • autoDestroy : Boolean
    (可选) 设置为true将自动调用被删组件的 Ext.Component.destroy 函数。 默认为容器的 autoDestroy 配置值。
返回值:
  • Ext.Component
    被移除的组件。
Container
removeAll ( [ Boolean autoDestroy ] ) : Array
从当前容器中删除所有组件。
从当前容器中删除所有组件。
参数:
  • autoDestroy : Boolean
    (可选) 此参数为true时将自动调用 被删组件的 Ext.Component.destroy 方法。 默认为当前容器的 autoDestroy 配置值。
返回值:
  • Array
    被销毁的组件数组
Container
removeClass ( string cls ) : Ext.Component
从组件底层的元素上删除一个CSS类。
从组件底层的元素上删除一个CSS类。
参数:
  • cls : string
    需要移除的CSS类名
返回值:
  • Ext.Component
    this
Component
removeListener( String eventName, Function handler, [Object scope] ) : void
删除一个事件处理器。
删除一个事件处理器。
参数:
  • eventName : String
    处理器关联的事件类型。
  • handler : Function
    移除的处理器。 这应该是传递到addListener里的方法的引用。
  • scope : Object
    （可选）处理器指定的初始作用域。
返回值:
  • void
Observable
render ( [ Element/HTMLElement/String container ], [ String/Number position ] ) : void
在传递进来的HTML元素中渲染当前组件。...

在传递进来的HTML元素中渲染当前组件。

如果你正在使用一个Container 对象放置当前组件，那么请不要使用render方法。

当容器第一次被渲染时，它的子组件将会被容器的 layout 管理器渲染。

某些布局管理器允许动态添加子组件。它们包括 Ext.layout.CardLayout, Ext.layout.AnchorLayout, Ext.layout.FormLayout, Ext.layout.TableLayout。

当一个新的子组件被添加时，如果容器已经被渲染了， 你可能需要调用容器的 doLayout 方法来刷新视图，它将导致所有没有被渲染的子组件进行渲染操作。 此操作是必须的，这样你可以添加多个子组件而只刷新一次layout。

当创建复杂的UI时，非常重要的一点是，请记住调整子项目的尺寸和位置是容器的 layout 管理器的职责。 如果你希望子项目的尺寸对用户交互作出反应， 你必须为容器配置一个布局管理器，它将创建和管理你心里想要的那种布局。

忽略容器的layout 配置意味着将会使用一个基本的布局管理器，它除了按次序把子组件 渲染到容器中之外什么事情都不做。 这种情况下，任何尺寸和位置的调整操作都不会发生。

参数:
  • container : Element/HTMLElement/String
    (可选) 需要在其中渲染当前组件的元素。 如果它是从一个已存在的标签中创建的，此参数应该被忽略。
  • position : String/Number
    (可选) 容器中的一个元素ID或者一个DOM节点索引， 当前组件将会被插入到它前面 (默认append到容器的尾部)
返回值:
  • void
Component
resumeEvents() : void
重新开始触发事件。(参见suspendEvents) 如果事件以queueSuspended参数被挂起，则在事件被挂起时 ...
重新开始触发事件。(参见 suspendEvents) 如果事件以queueSuspended 参数被挂起，则在事件被挂起时触发的事件会被传递到所有的监听器上
参数:
  • 无。
返回值:
  • void
Observable
setAutoScroll ( Boolean scroll ) : Ext.BoxComponent
设置该组件内容溢出时是否自动显示滚动条。
设置该组件内容溢出时是否自动显示滚动条。
参数:
  • scroll : Boolean
    值为true的话组件自动显示滚动条。
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setDisabled ( Boolean disabled ) : Ext.Component
工具函数，使用布尔值设置有效/无效(disabled/enabled )。
工具函数，使用布尔值设置有效/无效(disabled/enabled )。
参数:
  • disabled : Boolean
返回值:
  • Ext.Component
    this
Component
setHeight ( Mixed height ) : Ext.BoxComponent
设置此组件的高度。该方法将触发resize事件。
设置此组件的高度。该方法将触发resize事件。
参数:
  • height : Mixed
    The new height to set.
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setIconClass ( String cls ) : void
设置CSS类，为当前panel提供图标图片。 如果已经设置了...
设置CSS类，为当前panel提供图标图片。 如果已经设置了，此方法将会替换任何现有的图标类并在完成之后触发 iconchange 事件。
参数:
  • cls : String
    新的CSS类名
返回值:
  • void
Panel
setPagePosition ( Number x , Number y ) : Ext.BoxComponent
设置组件在页面中的XY位置。 如果需要设置left和top值 ，请使用...
设置组件在页面中的XY位置。 如果需要设置left和top值 ，请使用setPosition方法。 该方法触发move事件。
参数:
  • x : Number
    The new x position
  • y : Number
    The new y position
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setPosition ( Number left , Number top ) : Ext.BoxComponent
设置组件的left和top值。设置组件的页面XY值，请使用setPagePosition方法。该方法触发...
设置组件的left和top值。设置组件的页面XY值，请使用setPagePosition方法。该方法触发move事件。
参数:
  • left : Number
    The new left
  • top : Number
    The new top
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setSize ( Mixed width , Mixed height ) : Ext.BoxComponent
设置BoxComponent的宽度和高度。 此方法触发resize事件...
设置BoxComponent的宽度和高度。 此方法触发resize事件。此方法可以接收单独的width或者height值作为参数， 或者你可以传递像这样的一个size对象： {width:10, height:20} 。
参数:
  • width : Mixed
    设置的新的width值。这可以是：
    • 一个Number类型指定Element新的宽度 Ext.Element.defaultUnit(默认为像素 :'px')。
    • 一个String类型用于设置width的CSS样式。
    • 一个size对象格式为 {width: widthValue, height: heightValue} 。
    • 值为 undefined 时，保留原来的width不变。
  • height : Mixed
    设置的新的height值(如果第一个参数传递了一个size对象，此参数没有必要传递)。这可以是：
    • 一个Number类型指定Element新的高度 Ext.Element.defaultUnit(默认为像素 :'px')。
    • 一个String类型用于设置height的CSS样式。也有可能不会被使用到。
    • 值为 undefined 时，保留原来的height不变。
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setTitle ( String title , [ String iconCls ] ) : void
为panel设置标题文本，也可选择设置 icon class。...

为panel设置标题文本，也可选择设置 icon class。

为了能够设置标题，必须已经为Panel创建了一个header元素。 要么通过向Panel上注册一个非空的 title ，或者配置 header: true ，可触发此操作(译者注：指为Panel创建header元素)。

参数:
  • title : String
    需要设置的标题文本
  • iconCls : String
    (可选) iconCls 一个用户定义的CSS类，为当前panel提供图标图片。
返回值:
  • void
Panel
setVisible ( Boolean visible ) : Ext.Component
工具方法，通过使用布尔值隐藏或者显示当前组件。
工具方法，通过使用布尔值隐藏或者显示当前组件。
参数:
  • visible : Boolean
    true时显示，false时隐藏
返回值:
  • Ext.Component
    this
Component
setWidth ( Mixed width ) : Ext.BoxComponent
设置组件的宽度。 此方法触发resize事件。
设置组件的宽度。 此方法触发resize事件。
参数:
  • width : Mixed
    The new width to set.
返回值:
  • Ext.BoxComponent
    this
BoxComponent
show() : void
在当前事件发生的XY坐标处显示此tooltip。
在当前事件发生的XY坐标处显示此tooltip。
参数:
  • 无。
返回值:
  • void
ToolTip
showAt ( Array xy ) : void
在指定的XY位置显示当前tip。示例用法:
// 在x:50 和 y:100位置处显示tip
tip.showAt([50,100]);
在指定的XY位置显示当前tip。示例用法:
// 在x:50 和 y:100位置处显示tip
tip.showAt([50,100]);
参数:
  • xy : Array
    一个包含x和y坐标的数组
返回值:
  • void
Tip
showBy ( Mixed el , [ String position ] ) : void
实验性参数。 根据标准的Ext.Element.alignTo 位置值，在与其它元素相关的位置显示当前...
实验性参数。 根据标准的Ext.Element.alignTo 位置值，在与其它元素相关的位置显示当前tip。示例用法:
// 在默认位置显示tip('tl-br?')
tip.showBy('my-el');

// 将tip的左上角对齐显示到元素的右上角
tip.showBy('my-el', 'tl-tr');
参数:
  • el : Mixed
    需要对齐到的一个HTMLElement、Ext.Element或者目标元素的字符串id
  • position : String
    (可选) 一个有效的Ext.Element.alignTo 锚定位置(如果不指定，默认为'tl-br?'或者 defaultAlign )。
返回值:
  • void
Tip
suspendEvents( Boolean queueSuspended ) : void
暂停触发所有的事件。 (参看resumeEvents)
暂停触发所有的事件。（参看 resumeEvents)
参数:
  • queueSuspended : Boolean
    如果传递为true则排列好暂停的事件使得在调用 resumeEvents 后再触发它们，而不是抛弃所有暂停的事件。
返回值:
  • void
Observable
syncSize () : Ext.BoxComponent
强制组件的大小按照此组件底层元素当前的高度和宽度计算。
强制组件的大小按照此组件底层元素当前的高度和宽度计算。
参数:
  • 无。
返回值:
  • Ext.BoxComponent
    this
BoxComponent
toggleCollapse ( Boolean animate ) : Ext.Panel
根据panel的当前状态，执行expand或者 collapse操作 的快捷方式。
根据panel的当前状态，执行expand或者 collapse操作 的快捷方式。
参数:
  • animate : Boolean
    True将会在转换过程中使用动画效果，否则为false (默认为panel的animCollapse 配置项的值)
返回值:
  • Ext.Panel
    this
Panel
un( String eventName, Function handler, [Object scope] ) : void
删除一个事件处理器(removeListener方法的简写形式)
删除一个事件处理器(removeListener方法的简写形式。)
参数:
  • eventName : String
    处理器关联的事件类型
  • handler : Function
    被删除的处理器 这应该是传入 addListener 中的方法的引用。
  • scope : Object
    （可选）为处理器指定的初始作用域。
返回值:
  • void
Observable
update ( Mixed htmlOrData , [ Boolean loadScripts ], [ Function callback ] ) : void
刷新组件的内部区域。
刷新组件的内部区域。
参数:
  • htmlOrData : Mixed
    如果已经通过tpl为当前组件配置了一个模板，那么 将会使用此参数来装配模板。 如果没有为当前组件配置模板，组件的内容区域将会通过Ext.Element 进行刷新。
  • loadScripts : Boolean
    (可选)只用在使用html配置时此参数才合法。默认为false。
  • callback : Function
    (可选)只用在使用html配置时此参数才合法。 当脚本加载完成时回调函数才被执行。
返回值:
  • void
Component
updateBox ( Object box ) : Ext.BoxComponent
设置此组件底层元素的盒子模型尺寸。(译者注：盒子模型是CSS术语，详细资料请自行搜索。)
设置此组件底层元素的盒子模型尺寸。(译者注：盒子模型是CSS术语，详细资料请自行搜索。)
参数:
  • box : Object
    一个格式为{x, y, width, height}的对象
返回值:
  • Ext.BoxComponent
    this
BoxComponent

公共事件

Event Defined By
activate : ( Ext.Panel p )
当Panel被设置为视觉活动状态之后触发。 注意Panel不直接支持活动状体，但是Panel的一些子类...
当Panel被设置为视觉活动状态之后触发。 注意Panel不直接支持活动状体，但是Panel的一些子类 (例如 Ext.Window)支持。 作为TabPanel子组件的Panel，在TabPanel的控制之下触发activate和deactivate事件。
监听器将会以如下参数格式被调用:
  • p : Ext.Panel
    被激活的Panel.
Panel
add : ( Ext.Container this , Ext.Component component , Number index )
监听器将会被使用如下的参数被调用:
  • this : Ext.Container
  • component : Ext.Component
    被添加的组件
  • index : Number
    将组件添加到容器子组件集合时的位置索引
Container
added : ( Ext.Component this , Ext.Container ownerCt , number index )
当一个组件被添加到一个Ext.Container时触发
当一个组件被添加到一个Ext.Container时触发
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • ownerCt : Ext.Container
    用于组件的容器
  • index : number
    添加组件的位置
Component
afterlayout : ( Ext.Container this , ContainerLayout layout )
当容器中的组件被指定的布局管理器排列的时候触发。
当容器中的组件被指定的布局管理器排列的时候触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Container
  • layout : ContainerLayout
    为当前容器提供的ContainerLayout实现
Container
afterrender : ( Ext.Component this )
在组件渲染完成之后触发...

在组件渲染完成之后触发。

afterrender事件在当前组件被rendered 结束之后、在为组件定义的所有afterRender方法执行之后 触发，并且，如果有stateful， 也在状态被保存之后才触发。

监听器将会以如下参数格式被调用:
  • this : Ext.Component
Component
beforeadd : ( Ext.Container this , Ext.Component component , Number index )
在任何 Ext.Component 被添加或者插入到容器中之前触发。 事件处理器可以返回false取消添加操作。
在任何 Ext.Component 被添加或者插入到容器中之前触发。 事件处理器可以返回false取消添加操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Container
  • component : Ext.Component
    被添加的组件
  • index : Number
    组件被添加到容器子项目集合中时的索引位置
Container
beforeclose : ( Ext.Panel p )
在Panel被关闭之前触发。 注意，Panel不直接支持关闭操作，但是Panel的一些子类(例如...
在Panel被关闭之前触发。 注意，Panel不直接支持关闭操作，但是Panel的一些子类(例如 Ext.Window) ，或者一个位于Ext.TabPanel中的Panel支持。 此事件仅被应用到这些子类中。处理函数可以返回false以取消关闭操作。
监听器将会以如下参数格式被调用:
  • p : Ext.Panel
    正在被关闭的Panel.
Panel
beforecollapse : ( Ext.Panel p , Boolean animate )
在Panel被折叠之前触发。监听器可以返回false取消折叠。
在Panel被折叠之前触发。监听器可以返回false取消折叠。
监听器将会以如下参数格式被调用:
  • p : Ext.Panel
    被折叠的Panel
  • animate : Boolean
    如果折叠操作使用了动画效果，此参数为true，其它为false
Panel
beforedestroy : ( Ext.Component this )
在组件 destroyed 之前触发。 在事件监听器中返回false以停止 destroy 操作。
在组件 destroyed 之前触发。 在事件监听器中返回false以停止 destroy 操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforeexpand : ( Ext.Panel p , Boolean animate )
在Panel被展开之前触发。监听器可以返回false取消展开操作。
在Panel被展开之前触发。监听器可以返回false取消展开操作。
监听器将会以如下参数格式被调用:
  • p : Ext.Panel
    被展开的Panel
  • animate : Boolean
    如果展开操作使用动画效果，为true，其它为false
Panel
beforehide : ( Ext.Component this )
在调用hide方法隐藏组件之前触发。 在事件监听器中返回false可以停止隐藏操作。
在调用hide方法隐藏组件之前触发。 在事件监听器中返回false可以停止隐藏操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforeremove : ( Ext.Container this , Ext.Component component )
从容器中删除任何Ext.Component 之前触发。 处理器可以返回false取消remove操作。
从容器中删除任何Ext.Component 之前触发。 处理器可以返回false取消remove操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Container
  • component : Ext.Component
    被删除的组件
Container
beforerender : ( Ext.Component this )
在组件被rendered 之前触发。 在事件监听器中返回false可以停止render 操作。
在组件被rendered 之前触发。 在事件监听器中返回false可以停止render 操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforeshow : ( Ext.Component this )
在调用show()方法现实组件之前触发。 事件处理函数返回false可以停止show。
在调用show 方法现实组件之前触发。 事件处理函数返回false可以停止show。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforestaterestore : ( Ext.Component this , Object state )
在组件状态恢复之前触发。返回false停止恢复状态操作。
在组件状态恢复之前触发。返回false停止恢复状态操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    StateProvider返回的状态哈希值。 如果没有禁止此事件，那么状态对象会被传递给applyState。 默认情况下，这样简单地把属性值拷贝到当前组件中。 可以覆盖此方法以提供自定的状态恢复操作。
Component
beforestatesave : ( Ext.Component this , Object state )
在组件状态被保存到配置的状态提供者之前触发。 返回false可以停止保存。
在组件状态被保存到配置的状态提供者之前触发。 返回false可以停止保存。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    状态值哈希。 这由在组件上调用getState() 方法决定。 此方法必须由开发者提供，返回是否需要对状态进行描述，默认情况下， Ext.Component有一个空实现。
Component
bodyresize : ( Ext.Panel p , Number width , Number height )
在Panel被调整尺寸之后触发。
在Panel被调整尺寸之后触发。
监听器将会以如下参数格式被调用:
  • p : Ext.Panel
    被调整尺寸的Panel
  • width : Number
    Panel body的新宽度。
  • height : Number
    Panel body的新高度。
Panel
close : ( Ext.Panel p )
在Panel被关闭之后触发。注意，Panel不直接提供关闭操作， 但是Panel的一些子类(例如...
在Panel被关闭之后触发。注意，Panel不直接提供关闭操作， 但是Panel的一些子类(例如 Ext.Window) ，或者处于Ext.TabPanel中的Panel支持。
监听器将会以如下参数格式被调用:
  • p : Ext.Panel
    被关闭的Panel.
Panel
collapse : ( Ext.Panel p )
在Panel被折叠后触发。
在Panel被折叠后触发。
监听器将会以如下参数格式被调用:
  • p : Ext.Panel
    被折叠的Panel
Panel
deactivate : ( Ext.Panel p )
在Panel被视觉上失去活动状态之后触发。 注意，Panel不直接支持此操作，但是Panel的一些子类...
在Panel被视觉上失去活动状态之后触发。 注意，Panel不直接支持此操作，但是Panel的一些子类 (例如Ext.Window)支持。 作为TabPanel的子组件的Panel将会在TabPanel的控制之下触发activate 和deactivate事件。
监听器将会以如下参数格式被调用:
  • p : Ext.Panel
    失去活动状态的Panel
Panel
destroy : ( Ext.Component this )
在组件被销毁之后触发。
在组件被destroyed之后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
disable : ( Ext.Component this )
在组件被设置为无效状态后触发。
在组件被设置为无效状态后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
enable : ( Ext.Component this )
当组件被设置为有效(enabled)之后触发。
当组件被设置为有效(enabled)之后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
expand : ( Ext.Panel p )
当Panel已经展开之后触发。
当Panel已经展开之后触发。
监听器将会以如下参数格式被调用:
  • p : Ext.Panel
    已经被展开的Panel.
Panel
hide : ( Ext.Component this )
在组件被隐藏之后触发。 当调用hide 方法隐藏组件之后触发。
在组件被隐藏之后触发。 当调用hide 方法隐藏组件之后触发。
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
iconchange : ( Ext.Panel p , String The , String The )
当Panel的图标被set或者 changed 之后触发。
当Panel的图标被set或者 changed 之后触发。
监听器将会以如下参数格式被调用:
  • p : Ext.Panel
    icon class被变化的Panel
  • The : String
    新icon类
  • The : String
    旧icon类
Panel
move : ( Ext.Component this , Number x , Number y )
在组件移动之后触发。
在组件移动之后触发。
监听器将会用如下的参数格式来调用:
  • this : Ext.Component
  • x : Number
    The new x position
  • y : Number
    The new y position
BoxComponent
remove : ( Ext.Container this , Ext.Component component )
监听器将会以如下的参数格式被调用:
  • this : Ext.Container
  • component : Ext.Component
    被删除的组件
Container
removed : ( Ext.Component this , Ext.Container ownerCt )
当一个组件被从Ext.Container容器中删除时触发
当一个组件被从Ext.Container容器中删除时触发
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • ownerCt : Ext.Container
    持有组件的容器
Component
render : ( Ext.Component this )
在组件被渲染之后触发。
在组件被 rendered(渲染) 之后触发。
监听器将以如下的参数格式被调用:
  • this : Ext.Component
Component
resize : ( Ext.Component this , Number adjWidth , Number adjHeight , Number rawWidth , Number rawHeight )
在组件被调整大小之后触发。
在组件被调整大小之后触发。
监听器将以如下的参数格式被调用:
  • this : Ext.Component
  • adjWidth : Number
    这是width调整后的值
  • adjHeight : Number
    这是height调整后的值
  • rawWidth : Number
    这是width原来的值
  • rawHeight : Number
    这是height原来的值
BoxComponent
show : ( Ext.Component this )
在调用show 方法显示组件之后触发。
在调用show 方法显示组件之后触发。
监听器将会用如下的参数格式被调用:
  • this : Ext.Component
Component
staterestore : ( Ext.Component this , Object state )
组件状态被存储之后触发。
组件状态被存储之后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    StateProvider返回的状态哈希值。 如果没有禁止此事件，那么状态对象会被传递给applyState。 默认情况下，这样简单地把属性值拷贝到当前组件中。 可以覆盖此方法以提供自定的状态恢复操作。
Component
statesave : ( Ext.Component this , Object state )
在组件状态被保存到所配置的状态提供者之后触发。
在组件状态被保存到所配置的状态提供者之后触发。
监听器将会用如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    状态值hash。 这是由在足见上调用getState() 方法决定的。 开发者必须提供此方法以返回是否需要恢复状态，默认情况下， Ext.Component有一个空实现。
Component
titlechange : ( Ext.Panel p , String The )
在Panel的标题被set或者 changed 之后触发。
在Panel的标题被set或者 changed 之后触发。
监听器将会以如下参数格式被调用:
  • p : Ext.Panel
    标题被改变的Panel.
  • The : String
    新的标题。
Panel


Observable
    Node
      TreeNode
        AsyncTreeNode

Class Ext.tree.AsyncTreeNode

包: | Ext.tree
定义类的文件: | AsyncTreeNode.js
类: | AsyncTreeNode
继承自: | TreeNode

配置项

Config Options Defined By
allowChildren : Boolean
设置为false将不允许此节点有孩子节点 (默认值为 true)
TreeNode
allowDrag : Boolean
如果draggable = true (默认值为 true)，设置此项为false将使得此节点不可拖拽。
TreeNode
allowDrop : Boolean
如果不可以把孩子节点拖动到此节点上，设置为false (默认值为 true)
TreeNode
checked : Boolean
设置为true将为此节点渲染一个选中状态复选框， false将渲染一个未选中的复选框...
设置为true将为此节点渲染一个选中状态复选框， false将渲染一个未选中的复选框 (默认值为 undefined ，没有复选框)
TreeNode
cls : String
添加到节点的CSS类
TreeNode
disabled : Boolean
当节点的文本改变时触发
TreeNode
draggable : Boolean
设置为true使节点可以拖拽(默认值为 false)
TreeNode
editable : Boolean
可以编辑节点 Ext.tree.TreeEditor (默认是true)
TreeNode
expandable : Boolean
如果设置为true，此节点将一直显示一个+/-号，甚至为空的时候也显示。
TreeNode
expanded : Boolean
设置为true将开始展开节点
TreeNode
hidden : Boolean
该节点被隐藏是为true
TreeNode
href : String
此节点使用链接的URL(默认值为 #)
TreeNode
hrefTarget : String
链接的目标frame
TreeNode
icon : String
节点的图标路径。 添加图标的最佳方法是使用cls或者iconCls属性，通过CSS背景图片添加图标
节点的图标路径。 添加图标的最佳方法是使用cls或者iconCls属性，通过CSS背景图片添加图标。
TreeNode
iconCls : String
一个添加到节点图标元素的CSS类，以应用CSS背景图片
TreeNode
id : String
节点编号
Node
isTarget : Boolean
设置为false将不允许此节点成为拖拽的目标(默认值为 true)
TreeNode
leaf : Boolean
如果当前节点是一个叶子节点，并且没有孩子节点，则为true。
Node
listeners : Object
一个包含一个或多个事件处理器的配置对象，会在初始化的时候被添加到目标对象上...

一个包含一个或多个事件处理器的配置对象，会在初始化的时候被添加到目标对象上。 该配置对象应该是一个有效的监听器配置对象就像 addListener例子中指定的一样可一次附加多个处理器。

ExtJs Components上的DOM事件

一些 ExtJs Component 类导出时会选择一些DOM事件(例如 "click", "mouseover" 等等), 这通常只是在有额外的值可以被添加时发生。例如DataView类的 click事件会传递被点击的节点。也可以直接在Component的HTMLElementevent上访问DOM事件，但必需在Component被渲染后监听器才能添加到Element 上。可以按照以下步骤添加插件:

// 插件会用一个监听器配置对象进行配置。
//该组件会被添加到所有处理方法的参数列表上。
Ext.DomObserver = Ext.extend(Object, {
    constructor: function(config) {
        this.listeners = config.listeners ? config.listeners : config;
    },

    // 组件将自己传递进了插件的初始化方法里
    init: function(c) {
        var p, l = this.listeners;
        for (p in l) {
            if (Ext.isFunction(l[p])) {
                l[p] = this.createHandler(l[p], c);
            } else {
                l[p].fn = this.createHandler(l[p].fn, c);
            }
        }

        // 渲染后立即添加监听器到元素上
        c.render = c.render.createSequence(function() {
            var e = c.getEl();
            if (e) {
                e.on(l);
            }
        });
    },

    createHandler: function(fn, c) {
        return function(e) {
            fn.call(this, e, c);
        };
    }
});

var combo = new Ext.form.ComboBox({

    // 元素被点击后折叠
    plugins: [ new Ext.DomObserver({
        click: function(evt, comp) {
            comp.collapse();
        }
    })],
    store: myStore,
    typeAhead: true,
    mode: 'local',
    triggerAction: 'all'
});

Observable
loader : TreeLoader
此节点使用的树加载器(默认值使用为树定义的加载器)
AsyncTreeNode
qtip : String
节点使用的一个Ext QuickTip
TreeNode
qtipCfg : String
此节点的一个Ext QuickTip配置(用来代替qtip)
TreeNode
singleClickExpand : Boolean
设置为true在单击时展开节点。
TreeNode
text : String
只读属性。此节点的文本。使用setText()方法改变它。 setText .
TreeNode
uiProvider : Function
此节点使用的 UI class (默认值为 Ext.tree.TreeNodeUI)
TreeNode

公共属性

Property |  | Defined By
 | attributes : Object 提供给节点的参数。你可以使用这个属性来访问你提供的任何特定参数。 | Node
 | childNodes : Array 当前节点的所有孩子节点。 | Node
 | disabled : Boolean 当节点的文本改变时触发 | TreeNode
 | firstChild : Node 当前节点的第一个直接的孩子节点，如果当前节点没有孩子，则为null。 | Node
 | hidden : Boolean 该节点被隐藏是为true | TreeNode
 | id : String 节点编号 | Node
 | lastChild : Node 当前节点的最后一个直接的孩子节点，如果当前节点没有孩子节点，则为null。 | Node
 | loader : TreeLoader 此节点使用的树加载器(默认值使用为树定义的加载器) | AsyncTreeNode
 | nextSibling : Node 树中最靠近当前节点的下一个节点， 如果不存在兄弟节点，则此值为null。 | Node
 | parentNode : Node 当前节点的父节点 | Node
 | previousSibling : Node 树中最靠近当前节点的前一个节点， 如果不存在兄弟节点，则此值为null。 | Node
 | text : String 只读属性。此节点的文本。使用setText()方法改变它。 setText . | TreeNode
 | ui : TreeNodeUI 只读属性。 节点的UI。 | TreeNode

公共方法

Method Defined By
AsyncTreeNode ( Object/String attributes )
参数:
  • attributes : Object/String
    这个节点的属性或配置或仅是这个文本节点的字符串。
返回值:
  • void
AsyncTreeNode
addEvents( Object|String o, string Optional. ) : void
添加指定的事件到事件列表上，事件会被该Observable触发。
添加指定的事件到事件列表上，事件会被该Observable触发。
参数:
  • o : Object|String
    以事件名作为属性true作为值的对象 或者当多个事件名被分开的传递时则为第一个事件名。
  • Optional. : string
    事件名被分开的传递时则为事件名。 用法:
    this.addEvents('storeloaded', 'storecleared');
返回值:
  • void
Observable
addListener( String eventName, Function handler, [Object scope], [Object options] ) : void
给对象添加事件处理器。
给对象添加事件处理器。
参数:
  • eventName : String
    监听的事件名。
  • handler : Function
    事件调用的方法
  • scope : Object
    （可选）处理方法执行的作用域 (this的引用 reference)。 如果被忽略。默认为触发事件的对象。
  • options : Object
    （可选）包含处理器配置和属性的对象。 可能包含以下的属性:
    • scope : Object
      处理方法执行的作用域(this的引用) 。 如果被忽略。默认为触发事件的对象。
    • delay : Number
      在触发事件后延迟调用处理器的毫秒数。
    • single : Boolean
      如果为True则添加一个处理器来处理下一次的事件触发（仅一次），然后移除自己。
    • buffer : Number
      使得处理器延迟指定毫秒数后预定的运行在 一个Ext.util.DelayedTask中 。 如果事件在时间内再一次被触发，原始的处理器不会被调用，但是新的处理器会预定的在他的位置上。
    • target : Observable
      如果事件在目标的Observable上触发则仅仅调用处理器， 否则 事件会从子类的Observable上冒泡

    组合选项
    使用这些选项参数,可能会组合出不同类型的监听器：

    一个延迟的，一次性的监听器。

    myDataView.on('click', this.onClick, this, {
single: true,
delay: 100
});

    一次调用附加多个处理器
    该方法同样支持传递一个包含指定的多个处理器的属性的配置对象参数。

    myGridPanel.on({
'click' : {
    fn: this.onClick,
    scope: this,
    delay: 100
},
'mouseover' : {
    fn: this.onMouseOver,
    scope: this
},
'mouseout' : {
    fn: this.onMouseOut,
    scope: this
}
});

    或者一个简写的语法：

    myGridPanel.on({
'click' : this.onClick,
'mouseover' : this.onMouseOver,
'mouseout' : this.onMouseOut,
 scope: this
});
返回值:
  • void
Observable
appendChild ( Node/Array node ) : Node
添加新的节点(s)，作为当前节点的最后的孩子。
添加新的节点(s)，作为当前节点的最后的孩子。
参数:
  • node : Node/Array
    需要添加的节点数组
返回值:
  • Node
    如果添加的是单个节点，该值就是这个节点对象；如果插入的是一个数组，则该值为null
Node
bubble ( Function fn , [ Object scope ], [ Array args ] ) : void
从当前节点沿着树结构向上冒泡，对途经的每个节点调用指定的方法。 调用方法的作用域...
从当前节点沿着树结构向上冒泡，对途经的每个节点调用指定的方法。 调用方法的作用域 (this)为当前节点或者指定的作用域。 传递给方法的参数是所提供的参数或者当前节点。 如果方法在任意一个节点上返回false，则停止冒泡。
参数:
  • fn : Function
    需要调用的方法
  • scope : Object
    可选 方法的作用域(默认值为当前节点)
  • args : Array
    可选 调用方法所传递的参数(默认传递当前节点)
返回值:
  • void
Node
cascade ( Function fn , [ Object scope ], [ Array args ] ) : void
从当前节点沿树结构下落，对每个节点调用给定的方法。 调用方法的作用域 ...
从当前节点沿树结构下落，对每个节点调用给定的方法。 调用方法的作用域 (this)为当前节点或者指定的作用域。 传递给方法的参数是所提供的参数或者当前节点。 如果方法在任意一个节点上返回false，则下落操作停止在那个分支上。
参数:
  • fn : Function
    需要调用的方法
  • scope : Object
    可选 The scope ( this reference) 方法的作用域(默认值为 current node)
  • args : Array
    可选 调用方法所传递的参数(默认传递当前节点)
返回值:
  • void
Node
collapse ( [ Boolean deep ], [ Boolean anim ], [ Function callback ], [ Object scope ] ) : void
收起节点。
收起节点。
参数:
  • deep : Boolean
    可选 设置为true 将折叠起所有的孩子节点
  • anim : Boolean
    可选 false 将取消收拢
  • callback : Function
    可选 当扩展这个节点完成回调函数将会被调用(不等深扩展完成). 用该节点的一个参数
  • scope : Object
    可选 The scope ( this reference) in which the callback is executed. 默认是树节点
返回值:
  • void
TreeNode
collapseChildNodes ( [ Boolean deep ] ) : void
收起所有的孩子节点
收起所有的孩子节点
参数:
  • deep : Boolean
    可选 设置为true，将使得孩子节点也折叠起它们自己的孩子
返回值:
  • void
TreeNode
contains ( Node node ) : Boolean
如果当前节点是传递进来的节点的祖先（任何层次点），则返回true。
如果当前节点是传递进来的节点的祖先（任何层次点），则返回true。
参数:
  • node : Node
返回值:
  • Boolean
Node
destroy () : void
Destroys the node.
Destroys the node.
参数:
  • 无。
返回值:
  • void
Node
disable () : void
使当前节点无效
使当前节点无效
参数:
  • 无。
返回值:
  • void
TreeNode
eachChild ( Function fn , [ Object scope ], [ Array args ] ) : void
迭代当前节点的孩子节点，对每个节点调用指定的方法。 调用方法的作用域 ...
迭代当前节点的孩子节点，对每个节点调用指定的方法。 调用方法的作用域 (this)为当前节点或者指定的作用域。 传递给方法的参数是所提供的参数或者当前节点。 如果方法在任意一个节点上返回false，则停止迭代。
参数:
  • fn : Function
    需要调用的方法
  • scope : Object
    可选 The scope ( this reference) in which the function is executed. Defaults to the current Node in the iteration.
  • args : Array
    可选 方法的作用域(默认值为 current node)
返回值:
  • void
Node
enable () : void
启用此节点
启用此节点
参数:
  • 无。
返回值:
  • void
TreeNode
enableBubble( String/Array events ) :void
是否现在使得事件会被该Observable触发并调用 this.getBubbleTarget()方法在拥有者的继承树...

是否现在使得事件会被该Observable触发并调用 this.getBubbleTarget()方法在拥有者的继承树中冒泡。Observable的基础类中没有该方法的实现。

该方法一般被Ext.Components用来冒泡事件到拥有者的容器。参看Ext.Component.getBubbleTarget默认的实现 在Ext.Component中返回组件的直接拥有者。但是如果需要的是一个已知的目标，该方法可以被重写来更快的访问需求的目标。

例子:

Ext.override(Ext.form.Field, {
    // 添加方法到Field的initComponent上改变事件为冒泡
    initComponent : Ext.form.Field.prototype.initComponent.createSequence(function() {
        this.enableBubble('change');
    }),

    // 我们知道我们想让Field的事件冒泡到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() {
            // 如果样式被修改标题会变红。
            myForm.header.setStyle('color', 'red');
        }
    }
});
参数:
  • events : String/Array
    冒泡的事件名，或事件名数组
返回值:
  • void
Observable
ensureVisible ( [ Function callback ], [ Object scope ] ) : void
确保所有的父节点都处于展开状态，在必要时，将此节点滚动到可见区域。
确保所有的父节点都处于展开状态，在必要时，将此节点滚动到可见区域。
参数:
  • callback : Function
    可选 当节点可见是函数调用
  • scope : Object
    可选 The scope ( this reference) in which the callback is executed. 默认是这个树节点
返回值:
  • void
TreeNode
expand ( [ Boolean deep ], [ Boolean anim ], [ Function callback ], [ Object scope ] ) : void
展开当前节点。
展开当前节点。
参数:
  • deep : Boolean
    可选 设置为true，将同时展开所有的孩子节点
  • anim : Boolean
    可选 设置为false，取消默认的动画效果
  • callback : Function
    可选 当展开当前节点操作结束时回调的函数 (不等待更深的展开操作完成)。使用一个参数调用此方法：当前节点(this node)。
  • scope : Object
    可选 The scope ( this reference) in which the callback is executed. 默认是这个树节点
返回值:
  • void
TreeNode
expandChildNodes ( [ Boolean deep ] ) : void
展开所有的孩子节点
展开所有的孩子节点
参数:
  • deep : Boolean
    可选 如果孩子节点也需要展开它们自己的孩子，设置为true
返回值:
  • void
TreeNode
findChild ( String attribute , Mixed value , [ Boolean deep ] ) : Node
查找第一个孩子节点，它的某个属性具有给定的值。
查找第一个孩子节点，它的某个属性具有给定的值。
参数:
  • attribute : String
    属性名称
  • value : Mixed
    需要查找的值
  • deep : Boolean
    (Optional) True to search through nodes deeper than the immediate children
返回值:
  • Node
    查找到的孩子节点，如果没有找到则为null
Node
findChildBy ( Function fn , [ Object scope ], [ Boolean deep ] ) : Node
根据指定的方法寻找第一个孩子节点。如果传入的方法返回true，则该孩子节点为符合条件的节点。
根据指定的方法寻找第一个孩子节点。如果传入的方法返回true，则该孩子节点为符合条件的节点。
参数:
  • fn : Function
    函数必须返回 true 是否经过的节点是要求的节点
  • scope : Object
    可选 The scope ( this reference) in which the function is executed. 默认这个节点是被检测的
  • deep : Boolean
    (Optional) True to search through nodes deeper than the immediate children
返回值:
  • Node
    找到的孩子节点，如果没有找到则返回null
Node
fireEvent( String eventName, Object... args ) : Boolean
用传入的参数触发指定的事件 (减去事件名)。 一个事件可以被设置为冒泡 Obse...

用传入的参数触发指定的事件 (减去事件名)。

一个事件可以被设置为冒泡到Observable父类继承树(参看 Ext.Component.getBubbleTarget) 调用enableBubble实现。

参数:
  • eventName : String
    触发的事件名。
  • args : Object...
    传递给处理器的可变长度参数。
返回值:
  • Boolean
    如果有任何的处理器返回false则返回false，否则返回true。
Observable
getDepth () : Number
返回当前节点的深度(根节点的深度为0)
返回当前节点的深度(根节点的深度为0)
参数:
  • 无。
返回值:
  • Number
Node
getOwnerTree () : Tree
返回当前节点所在的树。
返回当前节点所在的树。
参数:
  • 无。
返回值:
  • Tree
Node
getPath ( [ String attr ] ) : String
返回当前节点的路径。该路径可以用来编程展开或者选中当前节点。
返回当前节点的路径。该路径可以用来编程展开或者选中当前节点。
参数:
  • attr : String
    可选 路径使用的参数(默认值为节点的id)
返回值:
  • String
    The path
Node
getUI () : TreeNodeUI
返回此节点的UI对象。
返回此节点的UI对象。
参数:
  • 无。
返回值:
  • TreeNodeUI
    为此节点提供用户接面的对象。 除非在{@link #uiProvider}中特别指定，否则这将是 {@link Ext.tree.TreeNodeUI}的一个实例
TreeNode
hasChildNodes () : Boolean
如果当前节点有一个或多个孩子节点，返回true，否则返回false。
如果当前节点有一个或多个孩子节点，返回true，否则返回false。
参数:
  • 无。
返回值:
  • Boolean
Node
hasListener( String eventName ) : Boolean
检测对象是否包含指定事件的任何监听器
检测对象是否包含指定事件的任何监听器
参数:
  • eventName : String
    检测的事件名
返回值:
  • Boolean
    如果事件被监听则为true，否则为false
Observable
indexOf ( Node node ) : Number
返回一个孩子节点的序号
返回一个孩子节点的序号
参数:
  • node : Node
返回值:
  • Number
    节点的序号，没有找到时返回-1
Node
insertBefore ( Node node , Node refNode ) : Node
将第一个节点的所有孩子节点插入到第二个节点之前
将第一个节点的所有孩子节点插入到第二个节点之前
参数:
  • node : Node
    The node to insert
  • refNode : Node
    The node to insert before (if null the node is appended)
返回值:
  • Node
    The inserted node
Node
isAncestor ( Node node ) : Boolean
如果传入的节点是当前节点的祖先（任何层次上），返回true。
如果传入的节点是当前节点的祖先（任何层次上），返回true。
参数:
  • node : Node
返回值:
  • Boolean
Node
isExpandable () : Boolean
如果当前节点有一个或多个子节点， 或者当节点的...
如果当前节点有一个或多个子节点， 或者当节点的 expandable(参见 attributes), 属性被明确地设置为true，返回true；否则 返回false。
参数:
  • 无。
返回值:
  • Boolean
Node
isExpanded () : Boolean
如果此节点处于展开状态，返回true
如果此节点处于展开状态，返回true
参数:
  • 无。
返回值:
  • Boolean
TreeNode
isFirst () : Boolean
如果当前节点是其父节点的第一个孩子，则返回true
如果当前节点是其父节点的第一个孩子，则返回true
参数:
  • 无。
返回值:
  • Boolean
Node
isLast () : Boolean
如果当前节点是其父节点的最后一个孩子，返回true
如果当前节点是其父节点的最后一个孩子，返回true
参数:
  • 无。
返回值:
  • Boolean
Node
isLeaf () : Boolean
如果当前节点是一个叶子节点，则返回true
如果当前节点是一个叶子节点，则返回true
参数:
  • 无。
返回值:
  • Boolean
Node
isLoaded () : Boolean
如果此节点已经加载完毕，返回true
如果此节点已经加载完毕，返回true
参数:
  • 无。
返回值:
  • Boolean
AsyncTreeNode
isLoading () : Boolean
如果此节点当前处于正在加载状态，返回true
如果此节点当前处于正在加载状态，返回true
参数:
  • 无。
返回值:
  • Boolean
AsyncTreeNode
isSelected () : Boolean
如果当前节点被选中，返回true
如果当前节点被选中，返回true
参数:
  • 无。
返回值:
  • Boolean
TreeNode
item ( Number index ) : Node
返回指定索引处的孩子节点。
返回指定索引处的孩子节点。
参数:
  • index : Number
返回值:
  • Node
Node
on( String eventName, Function handler, [Object scope], [Object options] ) : void
给对象添加事件处理器 (addListener的简写形式)
给对象添加事件处理器 (addListener的简写形式。)
参数:
  • eventName : String
    监听的事件类型
  • handler : Function
    事件调用的方法
  • scope : Object
    （可选）处理方法执行时的作用域 (this 的引用)。 如果被忽略。默认为触发事件的对象。
  • options : Object
    可选 包含处理器配置的对象。
返回值:
  • void
Observable
purgeListeners() : void
移除对象上所有的监听器
移除对象上所有的监听器
参数:
  • 无。
返回值:
  • void
Observable
relayEvents( Object o, Array events ) : void
从指定的Observable上传递选择的事件就好像被当前对象触发一样。
从指定的Observable上传递选择的事件就好像被当前对象触发一样。
参数:
  • o : Object
    该Observable上的事件被当前对象传递。
  • events : Array
    传递的数组名。
返回值:
  • void
Observable
reload ( Function callback , [ Object scope ] ) : void
触发此节点重新加载
触发此节点重新加载
参数:
  • callback : Function
  • scope : Object
    可选 The scope ( this reference) in which the callback is executed. 默认是这个节点
返回值:
  • void
AsyncTreeNode
remove ( Boolean destroy ) : Node
从父节点中移除当前节点
从父节点中移除当前节点
参数:
  • destroy : Boolean
    true to destroy the node upon removal. Defaults to false.
返回值:
  • Node
    this
Node
removeAll ( Boolean destroy ) : Node
Removes all child nodes from this node.
Removes all child nodes from this node.
参数:
  • destroy : Boolean
    true to destroy the node upon removal. Defaults to false.
返回值:
  • Node
    this
Node
removeChild ( Node node , Boolean destroy ) : Node
从当前节点中删除一个孩子节点。
从当前节点中删除一个孩子节点。
参数:
  • node : Node
    需要删除的节点
  • destroy : Boolean
    true to destroy the node upon removal. 默认是false
返回值:
  • Node
    删除掉的节点
Node
removeListener( String eventName, Function handler, [Object scope] ) : void
删除一个事件处理器。
删除一个事件处理器。
参数:
  • eventName : String
    处理器关联的事件类型。
  • handler : Function
    移除的处理器。 这应该是传递到addListener里的方法的引用。
  • scope : Object
    （可选）处理器指定的初始作用域。
返回值:
  • void
Observable
replaceChild ( Node newChild , Node oldChild ) : Node
使用一个节点替换当前节点中的一个孩子节点。
使用一个节点替换当前节点中的一个孩子节点。
参数:
  • newChild : Node
    用来替代的节点
  • oldChild : Node
    被替代的节点
返回值:
  • Node
    被替代的节点
Node
resumeEvents() : void
重新开始触发事件。(参见suspendEvents) 如果事件以queueSuspended参数被挂起，则在事件被挂起时 ...
重新开始触发事件。(参见 suspendEvents) 如果事件以queueSuspended 参数被挂起，则在事件被挂起时触发的事件会被传递到所有的监听器上
参数:
  • 无。
返回值:
  • void
Observable
select () : void
触发此节点的选中状态
触发此节点的选中状态
参数:
  • 无。
返回值:
  • void
TreeNode
setId ( String id ) : void
Changes the id of this node.
Changes the id of this node.
参数:
  • id : String
    The new id for the node.
返回值:
  • void
Node
setText ( String text ) : void
为此节点设置文本
为此节点设置文本
参数:
  • text : String
返回值:
  • void
TreeNode
sort ( Function fn , [ Object scope ] ) : void
使用提供的排序方法对当前节点的孩子节点进行排序
使用提供的排序方法对当前节点的孩子节点进行排序
参数:
  • fn : Function
    A function which, when passed two Nodes, returns -1, 0 or 1 depending upon required sort order.
  • scope : Object
    可选The scope ( this reference) in which the function is executed. Defaults to the browser window.
返回值:
  • void
Node
suspendEvents( Boolean queueSuspended ) : void
暂停触发所有的事件。 (参看resumeEvents)
暂停触发所有的事件。（参看 resumeEvents)
参数:
  • queueSuspended : Boolean
    如果传递为true则排列好暂停的事件使得在调用 resumeEvents 后再触发它们，而不是抛弃所有暂停的事件。
返回值:
  • void
Observable
toggle () : void
固定住节点的展开/折叠状态
固定住节点的展开/折叠状态
参数:
  • 无。
返回值:
  • void
TreeNode
un( String eventName, Function handler, [Object scope] ) : void
删除一个事件处理器(removeListener方法的简写形式)
删除一个事件处理器(removeListener方法的简写形式。)
参数:
  • eventName : String
    处理器关联的事件类型
  • handler : Function
    被删除的处理器 这应该是传入 addListener 中的方法的引用。
  • scope : Object
    （可选）为处理器指定的初始作用域。
返回值:
  • void
Observable
unselect ( [ Boolean silent ] ) : void
触发此节点的反选
触发此节点的反选
参数:
  • silent : Boolean
    可选 True to stop selection change events from firing.
返回值:
  • void
TreeNode

公共事件

Event Defined By
append : ( Tree tree , Node this , Node node , Number index )
当一个新的子节点被添加时触发
当一个新的子节点被添加时触发
监听器将会用如下的参数调用:
  • tree : Tree
    所属树
  • this : Node
    This node
  • node : Node
    新添加的节点
  • index : Number
    新添加的节点的序号
Node
beforeappend : ( Tree tree , Node this , Node node )
当一个新的孩子节点被添加之前触发，返回false终止添加操作
当一个新的孩子节点被添加之前触发，返回false终止添加操作
监听器将会用如下的参数调用:
  • tree : Tree
    所属树
  • this : Node
    This node
  • node : Node
    需要添加的孩子节点
Node
beforechildrenrendered : ( Node this )
在此节点的孩子节点渲染之前触发
在此节点的孩子节点渲染之前触发
监听器将会以如下的参数格式调用:
  • this : Node
    这个节点
TreeNode
beforeclick : ( Node this , Ext.EventObject e )
在处理点击操作之前触发。 返回false取消默认操作。
在处理点击操作之前触发。 返回false取消默认操作。
监听器将会以如下的参数格式调用:
  • this : Node
    这个节点
  • e : Ext.EventObject
    事件对象
TreeNode
beforecollapse : ( Node this , Boolean deep , Boolean anim )
在此节点被收起起之前触发，返回false取消操作
在此节点被收起起之前触发，返回false取消操作
监听器将会以如下的参数格式调用:
  • this : Node
    This node
  • deep : Boolean
  • anim : Boolean
TreeNode
beforedblclick : ( Node this , Ext.EventObject e )
在双击时触发。取消默认的行为返回false
在双击时触发。取消默认的行为返回false
监听器将会以如下的参数调用:
  • this : Node
    This node
  • e : Ext.EventObject
    The event object
TreeNode
beforeexpand : ( Node this , Boolean deep , Boolean anim )
当前节点展开时触发，返回false取消操作。
当前节点展开时触发，返回false取消操作。
监听器将会以如下的参数格式调用:
  • this : Node
    This node
  • deep : Boolean
  • anim : Boolean
TreeNode
beforeinsert : ( Tree tree , Node this , Node node , Node refNode )
在插入一个新的孩子节点之前触发，返回false终止插入。
在插入一个新的孩子节点之前触发，返回false终止插入。
监听器将会用如下的参数调用:
  • tree : Tree
    所属树
  • this : Node
    This node
  • node : Node
    需要插入的孩子节点
  • refNode : Node
    在其之前插入孩子节点的节点
Node
beforeload : ( Node this )
此节点加载完毕之前触发，返回false取消加载
此节点加载完毕之前触发，返回false取消加载
监听器将会以如下的参数调用:
  • this : Node
    This node
AsyncTreeNode
beforemove : ( Tree tree , Node this , Node oldParent , Node newParent , Number index )
当前节点被移动到树中一个新的位置之前触发。 返回false终止移动。
当前节点被移动到树中一个新的位置之前触发。 返回false终止移动。
监听器将会用如下的参数调用:
  • tree : Tree
    所属树
  • this : Node
    This node
  • oldParent : Node
    The parent of this node
  • newParent : Node
    The new parent this node is moving to
  • index : Number
    The index it is being moved to
Node
beforeremove : ( Tree tree , Node this , Node node )
当一个孩子节点被删除之前触发，返回false终止删除
当一个孩子节点被删除之前触发，返回false终止删除
监听器将会用如下的参数调用:
  • tree : Tree
    所属树
  • this : Node
    This node
  • node : Node
    需要删除的孩子节点
Node
checkchange : ( Node this , Boolean checked )
当一个带有复选框的节点选中状态发生改变时触发
当一个带有复选框的节点选中状态发生改变时触发
监听器将会以如下的参数格式调用:
  • this : Node
    这个节点
  • checked : Boolean
TreeNode
click : ( Node this , Ext.EventObject e )
点击时触发
点击时触发
监听器将会以如下的参数格式调用:
  • this : Node
    This node
  • e : Ext.EventObject
    The event object
TreeNode
collapse : ( Node this )
收起节点。
收起节点。
监听器将会以如下的参数格式调用:
  • this : Node
    这个节点
TreeNode
contextmenu : ( Node this , Ext.EventObject e )
节点被右击时触发
节点被右击时触发
监听器将会以如下的参数格式调用:
  • this : Node
    这个节点
  • e : Ext.EventObject
    The event object
TreeNode
dblclick : ( Node this , Ext.EventObject e )
当节点被双击时触发。
当节点被双击时触发。
监听器将会以如下的参数格式调用:
  • this : Node
    这个节点
  • e : Ext.EventObject
    事件对象
TreeNode
disabledchange : ( Node this , Boolean disabled )
当前节点的无效状态发生改变时触发
当前节点的无效状态发生改变时触发
监听器将会以如下的参数格式调用:
  • this : Node
    This node
  • disabled : Boolean
TreeNode
expand : ( Node this )
当前节点展开时触发。
当前节点展开时触发。
监听器将会以如下的参数格式调用:
  • this : Node
    这个节点
TreeNode
insert : ( Tree tree , Node this , Node node , Node refNode )
当插入一个新的节点时触发。
当插入一个新的节点时触发。
监听器将会用如下的参数调用:
  • tree : Tree
    所属树
  • this : Node
    This node
  • node : Node
    插入的孩子节点
  • refNode : Node
    在其之前插入孩子节点的节点
Node
load : ( Node this )
如果此节点当前处于正在加载状态，返回true
如果此节点当前处于正在加载状态，返回true
监听器将会调用如下的参数：
  • this : Node
    This node
AsyncTreeNode
move : ( Tree tree , Node this , Node oldParent , Node newParent , Number index )
当前节点被移动到树中一个新的位置时触发
当前节点被移动到树中一个新的位置时触发
监听器将会用如下的参数调用:
  • tree : Tree
    所属树
  • this : Node
    This node
  • oldParent : Node
    当前节点旧的父节点
  • newParent : Node
    当前节点新的父节点
  • index : Number
    移动到的序号
Node
remove : ( Tree tree , Node this , Node node )
当一个节点移除时触发
当一个节点移除时触发
监听器将会用如下的参数调用:
  • tree : Tree
    所属树
  • this : Node
    这个节点
  • node : Node
    已经移除的节点
Node
textchange : ( Node this , String text , String oldText )
当节点的文本改变时触发
当节点的文本改变时触发
>监听器将会以如下的参数格式调用:
  • this : Node
    这个节点
  • text : String
    新文本
  • oldText : String
    旧文本
TreeNode


Observable
    DefaultSelectionModel

Class Ext.tree.DefaultSelectionModel

包: | Ext.tree
定义类的文件: | TreeSelectionModel.js
类: | DefaultSelectionModel
继承自: | Observable
TreePanel默认的单选模型。

配置项

Config Options Defined By
listeners : Object
一个包含一个或多个事件处理器的配置对象，会在初始化的时候被添加到目标对象上...

一个包含一个或多个事件处理器的配置对象，会在初始化的时候被添加到目标对象上。 该配置对象应该是一个有效的监听器配置对象就像 addListener例子中指定的一样可一次附加多个处理器。

ExtJs Components上的DOM事件

一些 ExtJs Component 类导出时会选择一些DOM事件(例如 "click", "mouseover" 等等), 这通常只是在有额外的值可以被添加时发生。例如DataView类的 click事件会传递被点击的节点。也可以直接在Component的HTMLElementevent上访问DOM事件，但必需在Component被渲染后监听器才能添加到Element 上。可以按照以下步骤添加插件:

// 插件会用一个监听器配置对象进行配置。
//该组件会被添加到所有处理方法的参数列表上。
Ext.DomObserver = Ext.extend(Object, {
    constructor: function(config) {
        this.listeners = config.listeners ? config.listeners : config;
    },

    // 组件将自己传递进了插件的初始化方法里
    init: function(c) {
        var p, l = this.listeners;
        for (p in l) {
            if (Ext.isFunction(l[p])) {
                l[p] = this.createHandler(l[p], c);
            } else {
                l[p].fn = this.createHandler(l[p].fn, c);
            }
        }

        // 渲染后立即添加监听器到元素上
        c.render = c.render.createSequence(function() {
            var e = c.getEl();
            if (e) {
                e.on(l);
            }
        });
    },

    createHandler: function(fn, c) {
        return function(e) {
            fn.call(this, e, c);
        };
    }
});

var combo = new Ext.form.ComboBox({

    // 元素被点击后折叠
    plugins: [ new Ext.DomObserver({
        click: function(evt, comp) {
            comp.collapse();
        }
    })],
    store: myStore,
    typeAhead: true,
    mode: 'local',
    triggerAction: 'all'
});

Observable

公共属性

该类没有公共属性。

公共方法

Method Defined By
addEvents( Object|String o, string Optional. ) : void
添加指定的事件到事件列表上，事件会被该Observable触发。
添加指定的事件到事件列表上，事件会被该Observable触发。
参数:
  • o : Object|String
    以事件名作为属性true作为值的对象 或者当多个事件名被分开的传递时则为第一个事件名。
  • Optional. : string
    事件名被分开的传递时则为事件名。 用法:
    this.addEvents('storeloaded', 'storecleared');
返回值:
  • void
Observable
addListener( String eventName, Function handler, [Object scope], [Object options] ) : void
给对象添加事件处理器。
给对象添加事件处理器。
参数:
  • eventName : String
    监听的事件名。
  • handler : Function
    事件调用的方法
  • scope : Object
    （可选）处理方法执行的作用域 (this的引用 reference)。 如果被忽略。默认为触发事件的对象。
  • options : Object
    （可选）包含处理器配置和属性的对象。 可能包含以下的属性:
    • scope : Object
      处理方法执行的作用域(this的引用) 。 如果被忽略。默认为触发事件的对象。
    • delay : Number
      在触发事件后延迟调用处理器的毫秒数。
    • single : Boolean
      如果为True则添加一个处理器来处理下一次的事件触发（仅一次），然后移除自己。
    • buffer : Number
      使得处理器延迟指定毫秒数后预定的运行在 一个Ext.util.DelayedTask中 。 如果事件在时间内再一次被触发，原始的处理器不会被调用，但是新的处理器会预定的在他的位置上。
    • target : Observable
      如果事件在目标的Observable上触发则仅仅调用处理器， 否则 事件会从子类的Observable上冒泡

    组合选项
    使用这些选项参数,可能会组合出不同类型的监听器：

    一个延迟的，一次性的监听器。

    myDataView.on('click', this.onClick, this, {
single: true,
delay: 100
});

    一次调用附加多个处理器
    该方法同样支持传递一个包含指定的多个处理器的属性的配置对象参数。

    myGridPanel.on({
'click' : {
    fn: this.onClick,
    scope: this,
    delay: 100
},
'mouseover' : {
    fn: this.onMouseOver,
    scope: this
},
'mouseout' : {
    fn: this.onMouseOut,
    scope: this
}
});

    或者一个简写的语法：

    myGridPanel.on({
'click' : this.onClick,
'mouseover' : this.onMouseOver,
'mouseout' : this.onMouseOut,
 scope: this
});
返回值:
  • void
Observable
clearSelections ( Boolean silent ) : void
清除所有选中
清除所有选中
参数:
  • silent : Boolean
    True将会阻止触发selectionchange事件。
返回值:
  • void
DefaultSelectionModel
enableBubble( String/Array events ) :void
是否现在使得事件会被该Observable触发并调用 this.getBubbleTarget()方法在拥有者的继承树...

是否现在使得事件会被该Observable触发并调用 this.getBubbleTarget()方法在拥有者的继承树中冒泡。Observable的基础类中没有该方法的实现。

该方法一般被Ext.Components用来冒泡事件到拥有者的容器。参看Ext.Component.getBubbleTarget默认的实现 在Ext.Component中返回组件的直接拥有者。但是如果需要的是一个已知的目标，该方法可以被重写来更快的访问需求的目标。

例子:

Ext.override(Ext.form.Field, {
    // 添加方法到Field的initComponent上改变事件为冒泡
    initComponent : Ext.form.Field.prototype.initComponent.createSequence(function() {
        this.enableBubble('change');
    }),

    // 我们知道我们想让Field的事件冒泡到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() {
            // 如果样式被修改标题会变红。
            myForm.header.setStyle('color', 'red');
        }
    }
});
参数:
  • events : String/Array
    冒泡的事件名，或事件名数组
返回值:
  • void
Observable
fireEvent( String eventName, Object... args ) : Boolean
用传入的参数触发指定的事件 (减去事件名)。 一个事件可以被设置为冒泡 Obse...

用传入的参数触发指定的事件 (减去事件名)。

一个事件可以被设置为冒泡到Observable父类继承树(参看 Ext.Component.getBubbleTarget) 调用enableBubble实现。

参数:
  • eventName : String
    触发的事件名。
  • args : Object...
    传递给处理器的可变长度参数。
返回值:
  • Boolean
    如果有任何的处理器返回false则返回false，否则返回true。
Observable
getSelectedNode () : TreeNode
获取选中的节点
获取选中的节点
参数:
  • 无。
返回值:
  • TreeNode
    选中的节点
DefaultSelectionModel
hasListener( String eventName ) : Boolean
检测对象是否包含指定事件的任何监听器
检测对象是否包含指定事件的任何监听器
参数:
  • eventName : String
    检测的事件名
返回值:
  • Boolean
    如果事件被监听则为true，否则为false
Observable
isSelected ( TreeNode node ) : Boolean
如果节点被选中返回true
如果节点被选中返回true
参数:
  • node : TreeNode
    需要测试的节点
返回值:
  • Boolean
DefaultSelectionModel
on( String eventName, Function handler, [Object scope], [Object options] ) : void
给对象添加事件处理器 (addListener的简写形式)
给对象添加事件处理器 (addListener的简写形式。)
参数:
  • eventName : String
    监听的事件类型
  • handler : Function
    事件调用的方法
  • scope : Object
    （可选）处理方法执行时的作用域 (this 的引用)。 如果被忽略。默认为触发事件的对象。
  • options : Object
    可选 包含处理器配置的对象。
返回值:
  • void
Observable
purgeListeners() : void
移除对象上所有的监听器
移除对象上所有的监听器
参数:
  • 无。
返回值:
  • void
Observable
relayEvents( Object o, Array events ) : void
从指定的Observable上传递选择的事件就好像被当前对象触发一样。
从指定的Observable上传递选择的事件就好像被当前对象触发一样。
参数:
  • o : Object
    该Observable上的事件被当前对象传递。
  • events : Array
    传递的数组名。
返回值:
  • void
Observable
removeListener( String eventName, Function handler, [Object scope] ) : void
删除一个事件处理器。
删除一个事件处理器。
参数:
  • eventName : String
    处理器关联的事件类型。
  • handler : Function
    移除的处理器。 这应该是传递到addListener里的方法的引用。
  • scope : Object
    （可选）处理器指定的初始作用域。
返回值:
  • void
Observable
resumeEvents() : void
重新开始触发事件。(参见suspendEvents) 如果事件以queueSuspended参数被挂起，则在事件被挂起时 ...
重新开始触发事件。(参见 suspendEvents) 如果事件以queueSuspended 参数被挂起，则在事件被挂起时触发的事件会被传递到所有的监听器上
参数:
  • 无。
返回值:
  • void
Observable
select ( TreeNode node ) : TreeNode
选中一个节点。
选中一个节点。
参数:
  • node : TreeNode
    需要选中的节点
返回值:
  • TreeNode
    选中的节点
DefaultSelectionModel
selectNext () : TreeNode
选中树中位于选中节点之上的节点，智能遍历节点。
选中树中位于选中节点之上的节点，智能遍历节点。
参数:
  • 无。
返回值:
  • TreeNode
    新选中的节点
DefaultSelectionModel
selectPrevious () : TreeNode
选中树中位于选中节点之下的节点，智能遍历节点。
选中树中位于选中节点之下的节点，智能遍历节点。
参数:
  • 无。
返回值:
  • TreeNode
    新选中节点
DefaultSelectionModel
suspendEvents( Boolean queueSuspended ) : void
暂停触发所有的事件。 (参看resumeEvents)
暂停触发所有的事件。（参看 resumeEvents)
参数:
  • queueSuspended : Boolean
    如果传递为true则排列好暂停的事件使得在调用 resumeEvents 后再触发它们，而不是抛弃所有暂停的事件。
返回值:
  • void
Observable
un( String eventName, Function handler, [Object scope] ) : void
删除一个事件处理器(removeListener方法的简写形式)
删除一个事件处理器(removeListener方法的简写形式。)
参数:
  • eventName : String
    处理器关联的事件类型
  • handler : Function
    被删除的处理器 这应该是传入 addListener 中的方法的引用。
  • scope : Object
    （可选）为处理器指定的初始作用域。
返回值:
  • void
Observable
unselect ( TreeNode node , Boolean silent ) : void
反选一个节点。
反选一个节点。
参数:
  • node : TreeNode
    需要被反选的节点
  • silent : Boolean
    True将会停止触发selectionchange事件。
返回值:
  • void
DefaultSelectionModel

公共事件

Event Defined By
beforeselect : ( DefaultSelectionModel this , TreeNode node , TreeNode node )
在选中节点反生改变之前触发，返回false可以取消改变
在选中节点反生改变之前触发，返回false可以取消改变
监听器将会以如下参数格式被调用:
  • this : DefaultSelectionModel
  • node : TreeNode
    新选中的节点
  • node : TreeNode
    选中的旧节点
DefaultSelectionModel
selectionchange : ( DefaultSelectionModel this , TreeNode node )
当选中的节点发生变化时触发
当选中的节点发生变化时触发
监听器将会以如下参数格式被调用:
  • this : DefaultSelectionModel
  • node : TreeNode
    新选中的节点
DefaultSelectionModel


Observable
    MultiSelectionModel

Class Ext.tree.MultiSelectionModel

包: | Ext.tree
定义类的文件: | TreeSelectionModel.js
类: | MultiSelectionModel
继承自: | Observable
TreePanel的多选模型。

配置项

Config Options Defined By
listeners : Object
一个包含一个或多个事件处理器的配置对象，会在初始化的时候被添加到目标对象上...

一个包含一个或多个事件处理器的配置对象，会在初始化的时候被添加到目标对象上。 该配置对象应该是一个有效的监听器配置对象就像 addListener例子中指定的一样可一次附加多个处理器。

ExtJs Components上的DOM事件

一些 ExtJs Component 类导出时会选择一些DOM事件(例如 "click", "mouseover" 等等), 这通常只是在有额外的值可以被添加时发生。例如DataView类的 click事件会传递被点击的节点。也可以直接在Component的HTMLElementevent上访问DOM事件，但必需在Component被渲染后监听器才能添加到Element 上。可以按照以下步骤添加插件:

// 插件会用一个监听器配置对象进行配置。
//该组件会被添加到所有处理方法的参数列表上。
Ext.DomObserver = Ext.extend(Object, {
    constructor: function(config) {
        this.listeners = config.listeners ? config.listeners : config;
    },

    // 组件将自己传递进了插件的初始化方法里
    init: function(c) {
        var p, l = this.listeners;
        for (p in l) {
            if (Ext.isFunction(l[p])) {
                l[p] = this.createHandler(l[p], c);
            } else {
                l[p].fn = this.createHandler(l[p].fn, c);
            }
        }

        // 渲染后立即添加监听器到元素上
        c.render = c.render.createSequence(function() {
            var e = c.getEl();
            if (e) {
                e.on(l);
            }
        });
    },

    createHandler: function(fn, c) {
        return function(e) {
            fn.call(this, e, c);
        };
    }
});

var combo = new Ext.form.ComboBox({

    // 元素被点击后折叠
    plugins: [ new Ext.DomObserver({
        click: function(evt, comp) {
            comp.collapse();
        }
    })],
    store: myStore,
    typeAhead: true,
    mode: 'local',
    triggerAction: 'all'
});

Observable

公共属性

该类没有公共属性。

公共方法

Method Defined By
addEvents( Object|String o, string Optional. ) : void
添加指定的事件到事件列表上，事件会被该Observable触发。
添加指定的事件到事件列表上，事件会被该Observable触发。
参数:
  • o : Object|String
    以事件名作为属性true作为值的对象 或者当多个事件名被分开的传递时则为第一个事件名。
  • Optional. : string
    事件名被分开的传递时则为事件名。 用法:
    this.addEvents('storeloaded', 'storecleared');
返回值:
  • void
Observable
addListener( String eventName, Function handler, [Object scope], [Object options] ) : void
给对象添加事件处理器。
给对象添加事件处理器。
参数:
  • eventName : String
    监听的事件名。
  • handler : Function
    事件调用的方法
  • scope : Object
    （可选）处理方法执行的作用域 (this的引用 reference)。 如果被忽略。默认为触发事件的对象。
  • options : Object
    （可选）包含处理器配置和属性的对象。 可能包含以下的属性:
    • scope : Object
      处理方法执行的作用域(this的引用) 。 如果被忽略。默认为触发事件的对象。
    • delay : Number
      在触发事件后延迟调用处理器的毫秒数。
    • single : Boolean
      如果为True则添加一个处理器来处理下一次的事件触发（仅一次），然后移除自己。
    • buffer : Number
      使得处理器延迟指定毫秒数后预定的运行在 一个Ext.util.DelayedTask中 。 如果事件在时间内再一次被触发，原始的处理器不会被调用，但是新的处理器会预定的在他的位置上。
    • target : Observable
      如果事件在目标的Observable上触发则仅仅调用处理器， 否则 事件会从子类的Observable上冒泡

    组合选项
    使用这些选项参数,可能会组合出不同类型的监听器：

    一个延迟的，一次性的监听器。

    myDataView.on('click', this.onClick, this, {
single: true,
delay: 100
});

    一次调用附加多个处理器
    该方法同样支持传递一个包含指定的多个处理器的属性的配置对象参数。

    myGridPanel.on({
'click' : {
    fn: this.onClick,
    scope: this,
    delay: 100
},
'mouseover' : {
    fn: this.onMouseOver,
    scope: this
},
'mouseout' : {
    fn: this.onMouseOut,
    scope: this
}
});

    或者一个简写的语法：

    myGridPanel.on({
'click' : this.onClick,
'mouseover' : this.onMouseOver,
'mouseout' : this.onMouseOut,
 scope: this
});
返回值:
  • void
Observable
clearSelections () : void
清除所有选中的节点
清除所有选中的节点
参数:
  • 无。
返回值:
  • void
MultiSelectionModel
enableBubble( String/Array events ) :void
是否现在使得事件会被该Observable触发并调用 this.getBubbleTarget()方法在拥有者的继承树...

是否现在使得事件会被该Observable触发并调用 this.getBubbleTarget()方法在拥有者的继承树中冒泡。Observable的基础类中没有该方法的实现。

该方法一般被Ext.Components用来冒泡事件到拥有者的容器。参看Ext.Component.getBubbleTarget默认的实现 在Ext.Component中返回组件的直接拥有者。但是如果需要的是一个已知的目标，该方法可以被重写来更快的访问需求的目标。

例子:

Ext.override(Ext.form.Field, {
    // 添加方法到Field的initComponent上改变事件为冒泡
    initComponent : Ext.form.Field.prototype.initComponent.createSequence(function() {
        this.enableBubble('change');
    }),

    // 我们知道我们想让Field的事件冒泡到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() {
            // 如果样式被修改标题会变红。
            myForm.header.setStyle('color', 'red');
        }
    }
});
参数:
  • events : String/Array
    冒泡的事件名，或事件名数组
返回值:
  • void
Observable
fireEvent( String eventName, Object... args ) : Boolean
用传入的参数触发指定的事件 (减去事件名)。 一个事件可以被设置为冒泡 Obse...

用传入的参数触发指定的事件 (减去事件名)。

一个事件可以被设置为冒泡到Observable父类继承树(参看 Ext.Component.getBubbleTarget) 调用enableBubble实现。

参数:
  • eventName : String
    触发的事件名。
  • args : Object...
    传递给处理器的可变长度参数。
返回值:
  • Boolean
    如果有任何的处理器返回false则返回false，否则返回true。
Observable
getSelectedNodes () : Array
返回选中的节点数组
返回选中的节点数组
参数:
  • 无。
返回值:
  • Array
MultiSelectionModel
hasListener( String eventName ) : Boolean
检测对象是否包含指定事件的任何监听器
检测对象是否包含指定事件的任何监听器
参数:
  • eventName : String
    检测的事件名
返回值:
  • Boolean
    如果事件被监听则为true，否则为false
Observable
isSelected ( TreeNode node ) : Boolean
如果节点被选中，返回true
如果节点被选中，返回true
参数:
  • node : TreeNode
    要检测的节点
返回值:
  • Boolean
MultiSelectionModel
on( String eventName, Function handler, [Object scope], [Object options] ) : void
给对象添加事件处理器 (addListener的简写形式)
给对象添加事件处理器 (addListener的简写形式。)
参数:
  • eventName : String
    监听的事件类型
  • handler : Function
    事件调用的方法
  • scope : Object
    （可选）处理方法执行时的作用域 (this 的引用)。 如果被忽略。默认为触发事件的对象。
  • options : Object
    可选 包含处理器配置的对象。
返回值:
  • void
Observable
purgeListeners() : void
移除对象上所有的监听器
移除对象上所有的监听器
参数:
  • 无。
返回值:
  • void
Observable
relayEvents( Object o, Array events ) : void
从指定的Observable上传递选择的事件就好像被当前对象触发一样。
从指定的Observable上传递选择的事件就好像被当前对象触发一样。
参数:
  • o : Object
    该Observable上的事件被当前对象传递。
  • events : Array
    传递的数组名。
返回值:
  • void
Observable
removeListener( String eventName, Function handler, [Object scope] ) : void
删除一个事件处理器。
删除一个事件处理器。
参数:
  • eventName : String
    处理器关联的事件类型。
  • handler : Function
    移除的处理器。 这应该是传递到addListener里的方法的引用。
  • scope : Object
    （可选）处理器指定的初始作用域。
返回值:
  • void
Observable
resumeEvents() : void
重新开始触发事件。(参见suspendEvents) 如果事件以queueSuspended参数被挂起，则在事件被挂起时 ...
重新开始触发事件。(参见 suspendEvents) 如果事件以queueSuspended 参数被挂起，则在事件被挂起时触发的事件会被传递到所有的监听器上
参数:
  • 无。
返回值:
  • void
Observable
select ( TreeNode node , [ EventObject e ], Boolean keepExisting ) : TreeNode
选中一个节点。
选中一个节点。
参数:
  • node : TreeNode
    The node to select
  • e : EventObject
    可选 和选择有关的事件
  • keepExisting : Boolean
    对存在的选择是true
返回值:
  • TreeNode
    选择的节点
MultiSelectionModel
suspendEvents( Boolean queueSuspended ) : void
暂停触发所有的事件。 (参看resumeEvents)
暂停触发所有的事件。（参看 resumeEvents)
参数:
  • queueSuspended : Boolean
    如果传递为true则排列好暂停的事件使得在调用 resumeEvents 后再触发它们，而不是抛弃所有暂停的事件。
返回值:
  • void
Observable
un( String eventName, Function handler, [Object scope] ) : void
删除一个事件处理器(removeListener方法的简写形式)
删除一个事件处理器(removeListener方法的简写形式。)
参数:
  • eventName : String
    处理器关联的事件类型
  • handler : Function
    被删除的处理器 这应该是传入 addListener 中的方法的引用。
  • scope : Object
    （可选）为处理器指定的初始作用域。
返回值:
  • void
Observable
unselect ( TreeNode node ) : void
反选一个节点。
反选一个节点。
参数:
  • node : TreeNode
    未选择的节点
返回值:
  • void
MultiSelectionModel

公共事件

Event Defined By
selectionchange : ( MultiSelectionModel this , Array nodes )
当选中的节点发生变化时触发
当选中的节点发生变化时触发
监听器将会以如下的参数格式调用:
  • this : MultiSelectionModel
  • nodes : Array
    被选择节点的数组
MultiSelectionModel


Class Ext.tree.RootTreeNodeUI

包: | Ext.tree
定义类的文件: | TreeNodeUI.js
类: | RootTreeNodeUI
继承自: | Object
此类为root Ext TreeNodes提供默认UI实现。 RootTreeNode UI实现允许自定义树根节点的外观。

如果你正在自定义Tree的用户界面，你可能需要继承此类， 但是你永远不应该实例化该类。

公共属性

该类没有公共属性。

公共方法

该类没有公共方法。

公共事件

该类没有公共事件。


DragDrop
    DD
      DDProxy
        DragSource
          DragZone
            TreeDragZone

Class Ext.tree.TreeDragZone

包: | Ext.tree
定义类的文件: | TreeDragZone.js
类: | TreeDragZone
继承自: | DragZone

配置项

Config Options |  | Defined By
 | containerScroll : Boolean 如果为true，使用Scrollmanager注册此容器， 在拖拽过程中可以自动进行滚动。 | DragZone
 | ddGroup : String 此对象所属的指定拖拽放下分组。 如果指定了一个分组，那么此对象只会跟同一个组中的其它拖拽... 此对象所属的指定拖拽放下分组。 如果指定了一个分组，那么此对象只会跟同一个组中的其它拖拽对象发生交互 (默认值为 'TreeDD'). | TreeDragZone
 | dropAllowed : String 当允许执行放下操作时返回给拖拽源的CSS样式 (默认值为 "x-dd-drop-ok"). | DragSource
 | dropNotAllowed : String 当不允许放开时返回给拖拽源的CSS样式 (默认值为 "x-dd-drop-nodrop"). | DragSource
 | hlColor : String 在放下动作失败，对拖拽源进行高亮显示时使用的颜色 (默认值为... 在放下动作失败，对拖拽源进行高亮显示时使用的颜色 (默认值为 "c3daf9"---淡蓝) | DragZone

公共属性

Property Defined By
Ext.dd.DDProxy.dragElId : String
默认被拖动的框架div的id
DDProxy
available : boolean
当相关联的dom元素可以访问之前availabe属性值都是false。
DragDrop
centerFrame : boolean
默认情况下，框架会被精确地放置到拖拽元素的位置 ，所以我们必须使用Ext.dd.DD类提供的鼠标偏移量....
默认情况下，框架会被精确地放置到拖拽元素的位置 ，所以我们必须使用Ext.dd.DD类提供的鼠标偏移量。另外一点是让拖拽框架以鼠标为中心点，只有你没有为此对象设置约束时才有效。设置centerFrame为true可以使用这种效果（以鼠标为中心）。
DDProxy
config : object
传递给构造器的配置参数
DragDrop
defaultPadding : Object
为"constrainTo"元素提供默认的填充约束 (默认值为 {left: 0, right:0, top:0, bottom:0})。
DragDrop
dragData : Object
这个属性包含了展现拖拽对象的数据。通过getDragData方法创建。必须包含一个...
这个属性包含了展现拖拽对象的数据。通过 getDragData 方法创建。必须包含一个 ddel 属性，但是可以根据程序需求包含别的任何数据。
DragZone
groups : object An object in the format {'group1':true, 'group2':true
组定义了一个相关的DragDrop对象的逻辑集合。 只有在与同一组中的其它DragDrop对象发生交互时...
组定义了一个相关的DragDrop对象的逻辑集合。 只有在与同一组中的其它DragDrop对象发生交互时，实例才会收到事件。这允许我们在需要时，使用DragDrop的单个实例来定义多个组。
DragDrop
hasOuterHandles : boolean
默认情况下，只有在相关联元素的区域中发生mousedown事件时，才发起拖拽操作。 在某些浏览器中...
默认情况下，只有在相关联元素的区域中发生mousedown事件时，才发起拖拽操作。 在某些浏览器中，如果上一次mouseup事件在window外部发生的时候， 浏览器将不能报告此次的mousedown事件， 此时将会产生一个bug。 如果定义了外部的句柄，此属性值将被设置为true。
DragDrop
id : String
与当前对象相关联的元素的id。 这就是我们所谓的关联元素("linked element")，因为此元素的大小和位置...
与当前对象相关联的元素的id。 这就是我们所谓的关联元素("linked element")，因为此元素的大小和位置 将被用来决定何时与拖动和放开的对象进行交互。
DragDrop
ignoreSelf : Boolean
设置为false，拖拽时，将会使DragDrop对象在悬在自身元素上方时触发drag事件。默认为...
设置为false，拖拽时，将会使DragDrop对象在悬在自身元素上方时触发drag事件。默认为true——DragDrop对象默认不会对自身触发drag事件。
DragDrop
invalidHandleClasses : Array
CSS类名数组，应用到那些被认为是非法拖拽句柄的对象上。
DragDrop
invalidHandleIds : Object
一个对象，它的属性名标志了被认为是非法的拖动手柄元素的ID。 一个非空属性值标志着这些ID是有效的...
一个对象，它的属性名标志了被认为是非法的拖动手柄元素的ID。 一个非空属性值标志着这些ID是有效的。 例如，为了阻止从ID为"foo"的元素上发起拖动操作，使用 :
                                {
    foo: true
}
DragDrop
invalidHandleTypes : Object
一个对象，它的属性名标记了那些不能作为拖拽句柄的HTML标签。 一个非空属性值标志着此标签是无效的...
一个对象，它的属性名标记了那些不能作为拖拽句柄的HTML标签。 一个非空属性值标志着此标签是无效的。 默认为以下值，它将阻止从元素发起拖拽操作：
                                {
    A: "A"
}
DragDrop
isTarget : boolean
默认情况下，任何实例都可以是拖放的目标。 可以设置isTarget为false以禁用。
DragDrop
maintainOffset : boolean
当我们重置约束时保持偏移量。 当你需要在页面变化时，元素保持与其父元素的相对位置关系...
当我们重置约束时保持偏移量。 当你需要在页面变化时，元素保持与其父元素的相对位置关系，设置此项为true。
DragDrop
moveOnly : boolean
当设置为true时，当这个DD对象在同组的其他DD对象上方时，将...
当设置为true时，当这个DD对象在同组的其他DD对象上方时，将不会接收到notification事件。默认为false。
DragDrop
padding : int[] An array containing the 4 padding values: [top, right, bottom, left]
当前拖拽对象的padding配置项， 用来计算与当前对象相交叉的区域。
DragDrop
primaryButtonOnly : boolean
默认情况下，drag和drop实例只会响应鼠标第一个键的点击操作 (右手习惯下的左键)...
默认情况下，drag和drop实例只会响应鼠标第一个键的点击操作 (右手习惯下的左键)。 设置为true，将响应浏览器传来的任何一个键的点击
DragDrop
resizeFrame : boolean
默认情况下，我们把拖动的框架设置成与需要拖动的元素一样大小 (这是为了让框架有效...
默认情况下，我们把拖动的框架设置成与需要拖动的元素一样大小 (这是为了让框架有效)。 如果我们需要一个不同的行为，我们可以关闭它。
DDProxy
scroll : boolean
设置为true时，当一个对象被拖拽到浏览器视区边缘时，将自动尝试...
设置为true时，当一个对象被拖拽到浏览器视区边缘时，将自动尝试滚动浏览器的窗口。 默认为true。
DD
tree : Ext.tree.TreePanel
The TreePanel for this drag zone Tree的拖动区域
TreeDragZone
xTicks : int[]
在指定一个水平的刻度/间距时， 元素自动吸附位置的像素数组...
在指定一个水平的刻度/间距时， 元素自动吸附位置的像素数组。 当你定义一个间距记号时，这个数组是自动生成的。 （译者注：此配置可以用来实现在水平方向上拖动时的一种磁性吸附效果，这个数组就是 自动吸附的像素刻度或者间距）。
DragDrop
yTicks : int[]
在指定一个垂直的刻度/间距时， 元素自动吸附位置的像素数组...
在指定一个垂直的刻度/间距时， 元素自动吸附位置的像素数组。 当你定义一个间距记号时，这个数组是自动生成的。 （译者注：此配置可以用来实现在垂直方向上拖动时的一种磁性吸附效果，这个数组就是 自动吸附的像素刻度或者间距）。
DragDrop

公共方法

Method Defined By
TreeDragZone ( String/HTMLElement/Element tree , Object config )
参数:
  • tree : String/HTMLElement/Element
    The Ext.tree.TreePanel for which to enable dragging
  • config : Object
返回值:
  • void
TreeDragZone
addInvalidHandleClass ( string cssClass ) : void
允许你为那些不能发起拖拽操作的元素指定一个CSS类
允许你为那些不能发起拖拽操作的元素指定一个CSS类
参数:
  • cssClass : string
    你希望忽略的元素的样式class
返回值:
  • void
DragDrop
addInvalidHandleId ( string id ) : void
允许你指定一个拖拽句柄的孩子节点，使它不能发起拖拽操作
允许你指定一个拖拽句柄的孩子节点，使它不能发起拖拽操作
参数:
  • id : string
    你希望忽略的元素的id
返回值:
  • void
DragDrop
addInvalidHandleType ( string tagName ) : void
允许你指定一个在被点击时不能发起拖拽操作的标签名称。 这是被设计用来更方便地处理内嵌的link对象的...
允许你指定一个在被点击时不能发起拖拽操作的标签名称。 这是被设计用来更方便地处理内嵌的link对象的， 此对象被嵌在一个拖动句柄内部，当它被点击时需要做其他的事情，而不是开始拖拽操作。
参数:
  • tagName : string
    需要包含在内的元素类型
返回值:
  • void
DragDrop
addToGroup ( sGroup {string} ) : void
将当前实例添加到一个彼此相关的drag/drop对象组中。 每个实例至少属于一个组...
将当前实例添加到一个彼此相关的drag/drop对象组中。 每个实例至少属于一个组， 并且如果需要，可以同时属于任意多个组。
参数:
  • {string} : sGroup
    组名
返回值:
  • void
DragDrop
afterDragDrop ( Ext.dd.DragDrop target , Event e , String id ) : void
默认为一个空函数， 你可以定制一个特殊的操作，当一个合法的拖拽和放下动作发生之后执。。
默认为一个空函数， 你可以定制一个特殊的操作，当一个合法的拖拽和放下动作发生之后执行。
参数:
  • target : Ext.dd.DragDrop
    拖拽目标
  • e : Event
    事件对象
  • id : String
    被拖拽元素的id
返回值:
  • void
DragSource
afterDragEnter ( Ext.dd.DragDrop target , Event e , String id ) : void
默认为一个空函数， 你可以定制一个特殊的操作，在拖拽源已经进入到目标范围内时执行。。
默认为一个空函数， 你可以定制一个特殊的操作，在拖拽源已经进入到目标范围内时执行。
参数:
  • target : Ext.dd.DragDrop
    拖拽目标
  • e : Event
    拖拽元素
  • id : String
    拖拽元素的ID
返回值:
  • void
DragSource
afterDragOut ( Ext.dd.DragDrop target , Event e , String id ) : void
默认为一个空函数， 你可以定制一个特殊的操作，在拖拽源被拖出了目标的范围而没有被放下时执行..
默认为一个空函数， 你可以定制一个特殊的操作，在拖拽源被拖出了目标的范围而没有被放下时执行， 并且可以选择终止执行它。
参数:
  • target : Ext.dd.DragDrop
    拖拽目标
  • e : Event
    事件对象
  • id : String
    被拖拽元素的id
返回值:
  • void
DragSource
afterDragOver ( Ext.dd.DragDrop target , Event e , String id ) : void
默认为一个空函数， 你可以定制一个特殊的操作，当拖拽源被拖着滑过。。。
默认为一个空函数， 你可以定制一个特殊的操作，当拖拽源被拖着滑过目标的时候执行。
参数:
  • target : Ext.dd.DragDrop
    拖拽目标
  • e : Event
    事件对象
  • id : String
    被拖拽元素的id
返回值:
  • void
DragSource
afterInvalidDrop ( Event e , String id ) : void
默认为一个空函数， 你可以定制一个特殊的操作，当一个合法的放下动作。
默认为一个空函数， 你可以定制一个特殊的操作，当一个合法的放下动作发生之后执行 providing an implementation.
参数:
  • e : Event
    事件对象
  • id : String
    被拖拽元素的ID
返回值:
  • void
DragSource
afterRepair () : void
在一个非法放下操作进行repair动作之后调用。 默认会高亮显示this.dragData.ddel。
在一个非法放下操作进行repair动作之后调用。 默认会高亮显示this.dragData.ddel。
参数:
  • 无。
返回值:
  • void
DragZone
alignElWithMouse ( HTMLElement el , int iPageX , int iPageY ) : void
把元素位置设置到mousedown或者click事件发生的地方，保持鼠标在被点击元素之上的位置...
把元素位置设置到mousedown或者click事件发生的地方，保持鼠标在被点击元素之上的位置。 如果想把元素放置到不是鼠标点击的地方，请覆盖此方法。
参数:
  • el : HTMLElement
    需要移动的元素
  • iPageX : int
    mousedown或者drag事件的X坐标位置
  • iPageY : int
    mousedown或者drag事件的Y坐标位置
返回值:
  • void
DD
applyConfig () : void
应用那些传递给构造器的配置参数。此操作被期望在继承链的每一层上都能起作用...
应用那些传递给构造器的配置参数。此操作被期望在继承链的每一层上都能起作用。 这样一个DDProxy的实现类将会执行在DDProxy, DD和DragDrop上应用配置项的操作，此操作是为了使这些参数在每个对象上都可用。
参数:
  • 无。
返回值:
  • void
DD
autoOffset ( int iPageX , int iPageY ) : void
设置鼠标的偏移量为：相关联元素左上角到被点击元素位置之间的距离...
设置鼠标的偏移量为：相关联元素左上角到被点击元素位置之间的距离...
参数:
  • iPageX : int
    点击位置的X坐标值
  • iPageY : int
    点击位置的Y坐标值
返回值:
  • void
DD
b4Drag () : void
在onDrag事件之前触发的事件。重写了 Ext.dd.DragDrop中的对应属性。
在onDrag事件之前触发的事件。重写了 Ext.dd.DragDrop中的对应属性。
参数:
  • 无。
返回值:
  • void
DD
b4MouseDown () : void
在onMouseDown事件之前触发的事件。 覆盖了Ext.dd.DragDrop中的相同属性。
Event that fires prior to the onMouseDown event. Overrides Ext.dd.DragDrop.
参数:
  • 无。
返回值:
  • void
DD
beforeDragDrop ( Ext.dd.DragDrop target , Event e , String id ) : Boolean
默认为一个空函数， 你可以定制一个特殊的操作，在拖拽源被放置到拖拽目标上之前执行...
默认为一个空函数， 你可以定制一个特殊的操作，在拖拽源被放置到拖拽目标上之前执行， 并且可以选择终止执行onDragDrop方法。
参数:
  • target : Ext.dd.DragDrop
    拖拽目标
  • e : Event
    事件对象
  • id : String
    拖拽元素的ID
返回值:
  • Boolean
    isValid 当drag drop事件合法时为true；否则为false并终止操作
DragSource
beforeDragEnter ( Ext.dd.DragDrop target , Event e , String id ) : Boolean
默认为一个空函数， 你可以定制一个特殊的操作，在拖拽源开始进入目标的范围之前执行...
默认为一个空函数， 你可以定制一个特殊的操作，在拖拽源开始进入目标的范围之前执行， 并且可以选择终止执行onDragEnter方法。
参数:
  • target : Ext.dd.DragDrop
    拖拽目标
  • e : Event
    事件对象
  • id : String
    被拖拽元素的id
返回值:
  • Boolean
    isValid 如果drag事件合法，为true；否则为false并退出
DragSource
beforeDragOut ( Ext.dd.DragDrop target , Event e , String id ) : Boolean
默认为一个空函数， 你可以定制一个特殊的操作，在拖拽源滑过目标而没有被放下之前执行...
默认为一个空函数， 你可以定制一个特殊的操作，在拖拽源滑过目标而没有被放下之前执行， 并可以选择终止执行onDragOut方法。
参数:
  • target : Ext.dd.DragDrop
    拖拽目标
  • e : Event
    事件对象
  • id : String
    被拖拽元素的id
返回值:
  • Boolean
    isValid 如果drag事件合法，为true；否则为false并退出
DragSource
beforeDragOver ( Ext.dd.DragDrop target , Event e , String id ) : Boolean
默认为一个空函数， 你可以定制一个特殊的操作，当被拖拽的对象滑过拖拽目标的时候执行..
默认为一个空函数， 你可以定制一个特殊的操作，当被拖拽的对象滑过拖拽目标的时候执行， 并且可以选择终止执行onDragOver方法。
参数:
  • target : Ext.dd.DragDrop
    拖拽的目标
  • e : Event
    事件对象
  • id : String
    被拖拽元素的id
返回值:
  • Boolean
    isValid 如果drag事件合法，为true；否则为false并退出
DragSource
beforeInvalidDrop ( Ext.dd.DragDrop target , Event e , String id ) : Boolean
默认为一个空函数， 你可以定制一个特殊的操作，当一个合法的放下动作发生之前执。。
默认为一个空函数， 你可以定制一个特殊的操作，当一个合法的放下动作发生之前执行。
参数:
  • target : Ext.dd.DragDrop
    拖拽目标
  • e : Event
    事件对象
  • id : String
    被拖拽元素的id
返回值:
  • Boolean
    isValid 如果drag事件合法，为true；否则为false并退出
DragSource
cachePosition ( iPageX the , iPageY the ) : void
保存最后一次的位置，这样我们可以按需要重置约束和标记...
保存最后一次的位置，这样我们可以按需要重置约束和标记。 我们必须知道这一点，以使我们能够计算元素与其原来位置偏移的像素数。
参数:
  • the : iPageX
    当前水平位置（可选的，如果使用了它，只是为了方便之后不用查看该值）
  • the : iPageY
    当前垂直位置（可选的，如果使用了它，只是为了方便之后不用查看该值）
返回值:
  • void
DD
clearConstraints () : void
清除所有应用到此实例上的约束。 同时清除标记...
清除所有应用到此实例上的约束。 同时清除标记，因为此时它们不能脱离约束而独立存在。
参数:
  • 无。
返回值:
  • void
DragDrop
clearTicks () : void
清除此实例上定义的所有“吸附”间隔
清除此实例上定义的所有“吸附”间隔
参数:
  • 无。
返回值:
  • void
DragDrop
constrainTo ( Mixed constrainTo , [ Object/Number pad ], [ Boolean inContent ] ) : void
让元素的运动范围受限于另一个元素...
让元素的运动范围受限于另一个元素， 使用方法:

                                    var dd = new Ext.dd.DDProxy("dragDiv1", "proxytest",
                { dragElId: "existingProxyDiv" });
 dd.startDrag = function(){
     this.constrainTo("parent-id");
 };
或者你可以使用 Ext.Element 对象来初始化:
                                Ext.get("dragDiv1").initDDProxy("proxytest", {dragElId: "existingProxyDiv"}, {
     startDrag : function(){
         this.constrainTo("parent-id");
     }
 });
参数:
  • constrainTo : Mixed
    要绑定到的元素。
  • pad : Object/Number
    (可选) Pad提供了定义约束的"padding"参数的一个途径， 既可以是一个数字，以便进行均匀的填充 (4 等价于{left:4, right:4, top:4, bottom:4})， 或者一个包含填充尺寸数据的对象。例如： {right:10, bottom:10}
  • inContent : Boolean
    (可选) 将可拖动区域约束到元素的盒子模型内部(在填充和边框内部)
返回值:
  • void
DragDrop
createFrame () : void
创建代理元素，如果它还不存在
创建代理元素，如果它还不存在
参数:
  • 无。
返回值:
  • void
DDProxy
endDrag ( Event e ) : void
当结束对对象的拖动操作时触发
当结束对对象的拖动操作时触发
参数:
  • e : Event
    the mouseup event
返回值:
  • void
DragDrop
getDragData () : Object
返回关联到当前拖拽源的数据对象
返回关联到当前拖拽源的数据对象
参数:
  • 无。
返回值:
  • Object
    data 一个可以包含任意数据的对象
DragZone
getDragEl () : HTMLElement
返回实际需要拖动元素的引用。默认情况下，这与html元素相同，但也可以指定到另一个元素...
返回实际需要拖动元素的引用。默认情况下，这与html元素相同，但也可以指定到另一个元素。可以在Ext.dd.DDProxy中找到这种例子。
参数:
  • 无。
返回值:
  • HTMLElement
    the html element
DragDrop
getEl () : HTMLElement
返回相关联的元素的引用
返回相关联的元素的引用
参数:
  • 无。
返回值:
  • HTMLElement
    html元素
DragDrop
getProxy () : Ext.dd.StatusProxy
返回拖拽源底层的 Ext.dd.StatusProxy
Returns the drag source's underlying Ext.dd.StatusProxy
参数:
  • 无。
返回值:
  • Ext.dd.StatusProxy
    代理的StatusProxy
DragSource
getRepairXY ( EventObject e ) : Array
在一个非法放下操作进行repair动作之前调用，将XY以动画效果设置到目标位置。 默认...
在一个非法放下操作进行repair动作之前调用，将XY以动画效果设置到目标位置。 默认返回this.dragData.ddel的XY属性。
参数:
  • e : EventObject
    鼠标按键弹起事件
返回值:
  • Array
    xy位置(例如：[100, 200])
DragZone
hideProxy () : void
隐藏拖拽源的 Ext.dd.StatusProxy
隐藏拖拽源的 Ext.dd.StatusProxy
参数:
  • 无。
返回值:
  • void
DragSource
init ( id the , String sGroup , object config ) : void
设置DragDrop对象。 必须在任何Ext.dd.DragDrop的子类构造器中调用
设置DragDrop对象。 必须在任何Ext.dd.DragDrop的子类构造器中调用
参数:
  • the : id
    相关联的元素id
  • sGroup : String
    相关元素的编组
  • config : object
    配置属性
返回值:
  • void
DragDrop
initFrame () : void
初始化拖动框架元素。 此方法必须在子类的构造器中调用。
初始化拖动框架元素。 此方法必须在子类的构造器中调用。
参数:
  • 无。
返回值:
  • void
DDProxy
initTarget ( id the , String sGroup , object config ) : void
Initializes Targeting functionality only... the object does not get a mousedown handler. （译者注：原始文档不完整，无法翻译此句。）
Initializes Targeting functionality only... the object does not get a mousedown handler. （译者注：原始文档不完整，无法翻译此句。）
参数:
  • the : id
    相关联元素的id
  • sGroup : String
    关联项目的编组
  • config : object
    配置属性
返回值:
  • void
DragDrop
isLocked () : boolean
如果此实例被锁定，或者drag drop管理器被锁定， 返回true...
如果此实例被锁定，或者drag drop管理器被锁定， 返回true (意味着此页面的所有拖拽操作都无效。)
参数:
  • 无。
返回值:
  • boolean
    如果此实例或者所有的drag/drop被锁定，返回true；否则返回false
DragDrop
isValidHandleChild ( HTMLElement node ) : boolean
检查被排除在外的标签列表，以确定此次点击是否应该被忽略
检查被排除在外的标签列表，以确定此次点击是否应该被忽略
参数:
  • node : HTMLElement
    需要检查的HTMLElement
返回值:
  • boolean
    如果这是一个合法的标签类型，返回true；如果不是，返回false
DragDrop
lock () : void
锁定此实例
锁定此实例
参数:
  • 无。
返回值:
  • void
DragDrop
onAvailable () : void
覆盖onAvailable方法，以便在决定了位置间隔之后执行所需的操作。
覆盖onAvailable方法，以便在决定了位置间隔之后执行所需的操作。
参数:
  • 无。
返回值:
  • void
DragDrop
onBeforeDrag ( Object data , Event e ) : Boolean
默认为一个空函数， 你可以定制一个特殊的操作，在发起drag事件之前执行...
默认为一个空函数， 你可以定制一个特殊的操作，在发起drag事件之前执行， 并且可以选择终止执行它。
参数:
  • data : Object
    包含任意数据的对象，可以在拖拽目标之间共享
  • e : Event
    事件对象
返回值:
  • Boolean
    isValid 如果drag事件合法，为true；否则为false并退出
DragSource
onDrag ( Event e ) : void
抽象方法，当拖动一个对象产生onMouseMove事件时调用。
抽象方法，当拖动一个对象产生onMouseMove事件时调用。
参数:
  • e : Event
    mousemove事件
返回值:
  • void
DragDrop
onDragDrop ( Event e , String|DragDrop[] id ) : void
抽象方法，在当前元素被拖放到另一个DragDrop对象上时调用。
抽象方法，在当前元素被拖放到另一个DragDrop对象上时调用。
参数:
  • e : Event
    mouseup事件
  • id : String|DragDrop[]
    在POINT模式下，这是被拖放到其上的那个元素的id（译者注：指目标元素id）。 在INTERSECT模式下，这是一个dd元素数组，当前元素被拖放到其上。
返回值:
  • void
DragDrop
onDragEnter ( Event e , String|DragDrop[] id ) : void
抽象方法，当此元素第一次从另外一个DragDrop对象上滑过时，此方法被调用。
抽象方法，当此元素第一次从另外一个DragDrop对象上滑过时，此方法被调用。
参数:
  • e : Event
    the mousemove event
  • id : String|DragDrop[]
    在POINT模式下，此id是被滑过的元素的id。 在INTERSECT模式下，这是一个或多个被滑过元素的数组。
返回值:
  • void
DragDrop
onDragOut ( Event e , String|DragDrop[] id ) : void
抽象方法，当我们不再拖动一个元素在另一个元素上滑过时触发
抽象方法，当我们不再拖动一个元素在另一个元素上滑过时触发
参数:
  • e : Event
    mousemove事件
  • id : String|DragDrop[]
    在POINT模式下，此id是被滑过的元素的id。 在INTERSECT模式下，这是dd元素的数组，鼠标不再停留在这些元素之上。
返回值:
  • void
DragDrop
onDragOver ( Event e , String|DragDrop[] id ) : void
抽象方法，当此元素从另一个DragDrop对象上滑过时调用。
抽象方法，当此元素从另一个DragDrop对象上滑过时调用。
参数:
  • e : Event
    mousemove事件
  • id : String|DragDrop[]
    在POINT模式下，此id是被滑过的元素的id。 在INTERSECT模式下，这是被滑过的dd元素数组。
返回值:
  • void
DragDrop
onInitDrag ( Number x , Number y ) : Boolean
一旦拖拽动作开始，调用此方法来初始化代理元素。 默认情况下，此方法将克...
一旦拖拽动作开始，调用此方法来初始化代理元素。 默认情况下，此方法将克隆 this.dragData.ddel
参数:
  • x : Number
    在被拖拽对象上点击时的x位置
  • y : Number
    在被拖拽对象上点击时的y位置
返回值:
  • Boolean
    继续拖拽动作时返回true，终止拖拽时返回false
DragZone
onInvalidDrop ( Event e ) : void
抽象方法，如果当前元素被拖动到了一个没有落下目标的区域时，此方法被调用
抽象方法，如果当前元素被拖动到了一个没有落下目标的区域时，此方法被调用
参数:
  • e : Event
    mouseup事件
返回值:
  • void
DragDrop
onMouseDown ( Event e ) : void
当一个drag/drop对象获得mousedown事件时的处理函数
当一个drag/drop对象获得mousedown事件时的处理函数
参数:
  • e : Event
    mousedown事件
返回值:
  • void
DragDrop
onMouseUp ( Event e ) : void
当在拖拽的对象松开鼠标时触发的事件处理器
当在拖拽的对象松开鼠标时触发的事件处理器
参数:
  • e : Event
    mouseup事件
返回值:
  • void
DragDrop
onStartDrag ( Number x , Number y ) : void
默认为一个空函数， 你可以定制一个特殊的操作，在发起拖拽事件开始时执行一次...
默认为一个空函数， 你可以定制一个特殊的操作，在发起拖拽事件开始时执行一次。 不能从此方法中终止拖拽操作。
参数:
  • x : Number
    点击拖拽对象的X坐标
  • y : Number
    点击拖拽对象的Y坐标
返回值:
  • void
DragSource
removeFromGroup ( string sGroup ) : void
从所提供的交互组中删除此元素
从所提供的交互组中删除此元素
参数:
  • sGroup : string
    需要从中删除的组
返回值:
  • void
DragDrop
removeInvalidHandleClass ( string cssClass ) : void
卸载一个描述非法状态的CSS类
Unsets an invalid css class
参数:
  • cssClass : string
    你想要重新启用的元素的css类。
返回值:
  • void
DragDrop
removeInvalidHandleId ( string id ) : void
卸载一个无效的handle id
Unsets an invalid handle id
参数:
  • id : string
    需要重新启用的元素的id the id of the element to re-enable
返回值:
  • void
DragDrop
removeInvalidHandleType ( string tagName ) : void
卸载由addInvalidHandleType方法添加的排除标签集合
卸载由addInvalidHandleType方法添加的排除标签集合
参数:
  • tagName : string
    需要排除的元素类型
返回值:
  • void
DragDrop
resetConstraints ( boolean maintainOffset ) : void
当你手动重新设置一个dd元素的位置时，必须调用resetConstraints方法。
当你手动重新设置一个dd元素的位置时，必须调用resetConstraints方法。
参数:
  • maintainOffset : boolean
返回值:
  • void
DragDrop
setDelta ( int iDeltaX , int iDeltaY ) : void
设置鼠标的偏移量。 你可以直接调用此方法，以强制把鼠标设置到一个特定的位置 (例如...
设置鼠标的偏移量。 你可以直接调用此方法，以强制把鼠标设置到一个特定的位置 (例如：传递0,0可以将它设置到对象的中心点位置)
参数:
  • iDeltaX : int
    和左端的距离
  • iDeltaY : int
    和顶端的距离
返回值:
  • void
DD
setDragElId ( id {string} ) : void
允许你指定一个元素，不是相关联的元素本身，在拖动时跟随鼠标移动
允许你指定一个元素，不是相关联的元素本身，在拖动时跟随鼠标移动 （译者注：也就是一个”影子对象“，拖动的时候，原来的元素不动，让和它本身一样的 一个”克隆体“来负责跟随鼠标移动）
参数:
  • {string} : id
    发起拖动操作的元素id
返回值:
  • void
DragDrop
setDragElPos ( int iPageX , int iPageY ) : void
把拖拽的元素位置设置到mousedown或者click事件发生的地方，保持鼠标在被点击元素之上的位置...
把拖拽的元素位置设置到mousedown或者click事件发生的地方，保持鼠标在被点击元素之上的位置。 如果想把元素放置到不是鼠标所在的位置，请覆盖此方法。
参数:
  • iPageX : int
    鼠标按下或者拖拽时的横坐标
  • iPageY : int
    鼠标按下或者拖拽时的纵坐标
返回值:
  • void
DD
setHandleElId ( id {string} ) : void
允许你指定关联元素的一个孩子节点，以用来发起拖动操作。 这种情况的一个例子是，你有包含text和link内容的div...
允许你指定关联元素的一个孩子节点，以用来发起拖动操作。 这种情况的一个例子是，你有包含text和link内容的div。 点击内容区域的任何地方，都会正常地启动拖动操作。使用此方法可以指定从div内容中的任何一个元素发起拖拽操作。
参数:
  • {string} : id
    将被用来发起拖拽操作的元素id。
返回值:
  • void
DragDrop
setInitPosition ( int diffX , int diffY ) : void
存储相关元素初始化的位置。
存储相关元素初始化的位置。
参数:
  • diffX : int
    X方向偏移，默认为0
  • diffY : int
    Y方向偏移，默认为0
返回值:
  • void
DragDrop
setOuterHandleElId ( id the ) : void
允许你设置一个相关元素外部的元素，作为拖动的手柄
允许你设置一个相关元素外部的元素，作为拖动的手柄
参数:
  • the : id
    元素的id，此元素将被用作发起拖动操作
返回值:
  • void
DragDrop
setPadding ( int iTop , int iRight , int iBot , int iLeft ) : void
配置拖拽时目标区域的填充像素数。为计算目标区域有效地扩展（或者缩小）虚拟对象的大小...
配置拖拽时目标区域的填充像素数。为计算目标区域有效地扩展（或者缩小）虚拟对象的大小。支持css-style快捷方式，如果只传递了一个参数，所有的边界将会拥有相同的填充；如果传递了两个参数，top和bottom会使用第一个参数， left和right会使用第二个参数。（译者注：这里的规则与CSS设置padding参数的规则是一样的，完全可以用CSS的规则来配置此参数。）
参数:
  • iTop : int
    Top pad
  • iRight : int
    Right pad
  • iBot : int
    Bot pad
  • iLeft : int
    Left pad
返回值:
  • void
DragDrop
setXConstraint ( int iLeft , int iRight , int iTickSize ) : void
默认情况下，元素可以被拖拽并放置到屏幕上的任意位置。 使用此方法来限制元素在水平方向上的运动...
默认情况下，元素可以被拖拽并放置到屏幕上的任意位置。 使用此方法来限制元素在水平方向上的运动。 如果你想锁定在y轴上的拖动，传递参数0,0
参数:
  • iLeft : int
    元素可以向左移动的像素数
  • iRight : int
    元素可以向右移动的像素数
  • iTickSize : int
    可选参数，指定元素每次以iTickSize配置项指定的像素数运动。
返回值:
  • void
DragDrop
setYConstraint ( int iUp , int iDown , int iTickSize ) : void
默认情况下，元素可以被拖放到屏幕上的任意位置。 设置此项以限制元素在垂直方向上的运动...
默认情况下，元素可以被拖放到屏幕上的任意位置。 设置此项以限制元素在垂直方向上的运动。 如果我们需要锁定元素在x轴方向上的运动，传递参数0,0
参数:
  • iUp : int
    元素可以向上移动的像素数
  • iDown : int
    元素可以向下移动的像素数
  • iTickSize : int
    可选参数，指定元素每次以iTickSize配置项指定的像素数运动。
返回值:
  • void
DragDrop
startDrag ( int X , int Y ) : void
抽象方法，当点击一个drag/drop对象，并且遇到拖动或者mousedown事件的那一刻， 此方法被调用。
抽象方法，当点击一个drag/drop对象，并且遇到拖动或者mousedown事件的那一刻， 此方法被调用。
参数:
  • X : int
    点击的位置
  • Y : int
    点击的位置
返回值:
  • void
DragDrop
toString () : string
toString方法
toString method
参数:
  • 无。
返回值:
  • string
    dd对象的字符串表述
DragDrop
unlock () : void
Unlock this instace
为此实例解锁
参数:
  • 无。
返回值:
  • void
DragDrop
unreg () : void
删除当前元素上所有拖拽和落下钩子(hook)
删除当前元素上所有拖拽和落下钩子(hook)
参数:
  • 无。
返回值:
  • void
DragDrop

公共事件

该类没有公共事件。


DragDrop
    DDTarget
      DropTarget
        DropZone
          TreeDropZone

Class Ext.tree.TreeDropZone

包: | Ext.tree
定义类的文件: | TreeDropZone.js
类: | TreeDropZone
继承自: | DropZone

配置项

Config Options |  | Defined By
 | allowContainerDrop : String 设置为true将允许在树容器(在指定的树节点之外)上放下节点 (默认值为 false) | TreeDropZone
 | allowParentInsert : Boolean 允许在展开的父节点之间插入被拖拽的节点，当放下时，被拖拽节点(s)的第一个节点 将会成为父节点的一... 允许在展开的父节点之间插入被拖拽的节点，当放下时，被拖拽节点(s)的第一个节点 将会成为父节点的一个兄弟节点(默认值为 false) | TreeDropZone
 | appendOnly : String 设置为true，树只允许扩展性的放下操作 (排序好的树所使用，默认值为 false) | TreeDropZone
 | ddGroup : String 此对象所属的一个指定的拖拽分组。 如果指定了一个分组，那么此对象将只与同一个组中的其它拖拽对象发生交互... 此对象所属的一个指定的拖拽分组。 如果指定了一个分组，那么此对象将只与同一个组中的其它拖拽对象发生交互 (默认值为 'TreeDD')。 | TreeDropZone
 | dropAllowed : String 当允许放开被拖拽的对象时，返回给拖拽源（拖拽的对象）的CSS样式 (默认值为 "x-dd-drop-ok")。 | DropTarget
 | dropNotAllowed : String 当不允许放下时返回到拖拽源的CSS样式 (默认值为 "x-dd-drop-nodrop")。 | DropTarget
 | expandDelay : String 当拖动一个可以放下的节点滑过目标时展开目标节点所延迟的毫秒数 (默认值为 1000) 当拖动一个可以放下的节点滑过目标时展开目标节点所延迟的毫秒数 (默认值为 1000) | TreeDropZone
 | overClass : String 当拖拽源对象从目标元素上滑过时应用到目标元素的CSS样式 (默认值为 "")。 | DropTarget

公共属性

Property Defined By
available : boolean
当相关联的dom元素可以访问之前availabe属性值都是false。
DragDrop
config : object
传递给构造器的配置参数
DragDrop
defaultPadding : Object
为"constrainTo"元素提供默认的填充约束 (默认值为 {left: 0, right:0, top:0, bottom:0})。
DragDrop
dragOverData : Ext.tree.TreePanel
可以为此树绑定任意的数据，并且将被包含到事件对象中 ，且被传递给nodedragover事件处理器(默认值为 {})
可以为此树绑定任意的数据，并且将被包含到事件对象中 ，且被传递给nodedragover事件处理器(默认值为 {})
TreeDropZone
groups : object An object in the format {'group1':true, 'group2':true
组定义了一个相关的DragDrop对象的逻辑集合。 只有在与同一组中的其它DragDrop对象发生交互时...
组定义了一个相关的DragDrop对象的逻辑集合。 只有在与同一组中的其它DragDrop对象发生交互时，实例才会收到事件。这允许我们在需要时，使用DragDrop的单个实例来定义多个组。
DragDrop
hasOuterHandles : boolean
默认情况下，只有在相关联元素的区域中发生mousedown事件时，才发起拖拽操作。 在某些浏览器中...
默认情况下，只有在相关联元素的区域中发生mousedown事件时，才发起拖拽操作。 在某些浏览器中，如果上一次mouseup事件在window外部发生的时候， 浏览器将不能报告此次的mousedown事件， 此时将会产生一个bug。 如果定义了外部的句柄，此属性值将被设置为true。
DragDrop
id : String
与当前对象相关联的元素的id。 这就是我们所谓的关联元素("linked element")，因为此元素的大小和位置...
与当前对象相关联的元素的id。 这就是我们所谓的关联元素("linked element")，因为此元素的大小和位置 将被用来决定何时与拖动和放开的对象进行交互。
DragDrop
ignoreSelf : Boolean
设置为false，拖拽时，将会使DragDrop对象在悬在自身元素上方时触发drag事件。默认为...
设置为false，拖拽时，将会使DragDrop对象在悬在自身元素上方时触发drag事件。默认为true——DragDrop对象默认不会对自身触发drag事件。
DragDrop
invalidHandleClasses : Array
CSS类名数组，应用到那些被认为是非法拖拽句柄的对象上。
DragDrop
invalidHandleIds : Object
一个对象，它的属性名标志了被认为是非法的拖动手柄元素的ID。 一个非空属性值标志着这些ID是有效的...
一个对象，它的属性名标志了被认为是非法的拖动手柄元素的ID。 一个非空属性值标志着这些ID是有效的。 例如，为了阻止从ID为"foo"的元素上发起拖动操作，使用 :
                                {
    foo: true
}
DragDrop
invalidHandleTypes : Object
一个对象，它的属性名标记了那些不能作为拖拽句柄的HTML标签。 一个非空属性值标志着此标签是无效的...
一个对象，它的属性名标记了那些不能作为拖拽句柄的HTML标签。 一个非空属性值标志着此标签是无效的。 默认为以下值，它将阻止从元素发起拖拽操作：
                                {
    A: "A"
}
DragDrop
isTarget : boolean
默认情况下，任何实例都可以是拖放的目标。 可以设置isTarget为false以禁用。
DragDrop
maintainOffset : boolean
当我们重置约束时保持偏移量。 当你需要在页面变化时，元素保持与其父元素的相对位置关系...
当我们重置约束时保持偏移量。 当你需要在页面变化时，元素保持与其父元素的相对位置关系，设置此项为true。
DragDrop
moveOnly : boolean
当设置为true时，当这个DD对象在同组的其他DD对象上方时，将...
当设置为true时，当这个DD对象在同组的其他DD对象上方时，将不会接收到notification事件。默认为false。
DragDrop
padding : int[] An array containing the 4 padding values: [top, right, bottom, left]
当前拖拽对象的padding配置项， 用来计算与当前对象相交叉的区域。
DragDrop
primaryButtonOnly : boolean
默认情况下，drag和drop实例只会响应鼠标第一个键的点击操作 (右手习惯下的左键)...
默认情况下，drag和drop实例只会响应鼠标第一个键的点击操作 (右手习惯下的左键)。 设置为true，将响应浏览器传来的任何一个键的点击
DragDrop
tree : Ext.tree.TreePanel
此放下区域的TreePanel
TreeDropZone
xTicks : int[]
在指定一个水平的刻度/间距时， 元素自动吸附位置的像素数组...
在指定一个水平的刻度/间距时， 元素自动吸附位置的像素数组。 当你定义一个间距记号时，这个数组是自动生成的。 （译者注：此配置可以用来实现在水平方向上拖动时的一种磁性吸附效果，这个数组就是 自动吸附的像素刻度或者间距）。
DragDrop
yTicks : int[]
在指定一个垂直的刻度/间距时， 元素自动吸附位置的像素数组...
在指定一个垂直的刻度/间距时， 元素自动吸附位置的像素数组。 当你定义一个间距记号时，这个数组是自动生成的。 （译者注：此配置可以用来实现在垂直方向上拖动时的一种磁性吸附效果，这个数组就是 自动吸附的像素刻度或者间距）。
DragDrop

公共方法

Method Defined By
TreeDropZone ( String/HTMLElement/Element tree , Object config )
参数:
  • tree : String/HTMLElement/Element
    The Ext.tree.TreePanel for which to enable dropping
  • config : Object
返回值:
  • void
TreeDropZone
addToGroup ( sGroup {string} ) : void
将当前实例添加到一个彼此相关的drag/drop对象组中。 每个实例至少属于一个组...
将当前实例添加到一个彼此相关的drag/drop对象组中。 每个实例至少属于一个组， 并且如果需要，可以同时属于任意多个组。
参数:
  • {string} : sGroup
    组名
返回值:
  • void
DragDrop
applyConfig () : void
应用那些传递给构造器的配置参数。此操作被期望在继承链的每一层上都能起作用...
应用那些传递给构造器的配置参数。此操作被期望在继承链的每一层上都能起作用。 这样一个DDProxy的实现类将会执行在DDProxy, DD和DragDrop上应用配置项的操作，此操作是为了使这些参数在每个对象上都可用。
参数:
  • 无。
返回值:
  • void
DragDrop
constrainTo ( Mixed constrainTo , [ Object/Number pad ], [ Boolean inContent ] ) : void
让元素的运动范围受限于另一个元素...
让元素的运动范围受限于另一个元素， 使用方法:

                                    var dd = new Ext.dd.DDProxy("dragDiv1", "proxytest",
                { dragElId: "existingProxyDiv" });
 dd.startDrag = function(){
     this.constrainTo("parent-id");
 };
或者你可以使用 Ext.Element 对象来初始化:
                                Ext.get("dragDiv1").initDDProxy("proxytest", {dragElId: "existingProxyDiv"}, {
     startDrag : function(){
         this.constrainTo("parent-id");
     }
 });
参数:
  • constrainTo : Mixed
    要绑定到的元素。
  • pad : Object/Number
    (可选) Pad提供了定义约束的"padding"参数的一个途径， 既可以是一个数字，以便进行均匀的填充 (4 等价于{left:4, right:4, top:4, bottom:4})， 或者一个包含填充尺寸数据的对象。例如： {right:10, bottom:10}
  • inContent : Boolean
    (可选) 将可拖动区域约束到元素的盒子模型内部(在填充和边框内部)
返回值:
  • void
DragDrop
getEl () : HTMLElement
返回相关联的元素的引用
返回相关联的元素的引用
参数:
  • 无。
返回值:
  • HTMLElement
    html元素
DragDrop
getTargetFromEvent ( Event e ) : Object
返回关联到DOM节点的定制数据对象，此DOM节点是事件源。 默认情况下此方法在...
返回关联到DOM节点的定制数据对象，此DOM节点是事件源。 默认情况下此方法在Ext.dd.Registry中查找event target，你可以重写此方法以提供你自己特定的查找。
参数:
  • e : Event
    事件
返回值:
  • Object
    自定义数据
DropZone
init ( id the , String sGroup , object config ) : void
设置DragDrop对象。 必须在任何Ext.dd.DragDrop的子类构造器中调用
设置DragDrop对象。 必须在任何Ext.dd.DragDrop的子类构造器中调用
参数:
  • the : id
    相关联的元素id
  • sGroup : String
    相关元素的编组
  • config : object
    配置属性
返回值:
  • void
DragDrop
initTarget ( id the , String sGroup , object config ) : void
Initializes Targeting functionality only... the object does not get a mousedown handler. （译者注：原始文档不完整，无法翻译此句。）
Initializes Targeting functionality only... the object does not get a mousedown handler. （译者注：原始文档不完整，无法翻译此句。）
参数:
  • the : id
    相关联元素的id
  • sGroup : String
    关联项目的编组
  • config : object
    配置属性
返回值:
  • void
DragDrop
isLocked () : boolean
如果此实例被锁定，或者drag drop管理器被锁定， 返回true...
如果此实例被锁定，或者drag drop管理器被锁定， 返回true (意味着此页面的所有拖拽操作都无效。)
参数:
  • 无。
返回值:
  • boolean
    如果此实例或者所有的drag/drop被锁定，返回true；否则返回false
DragDrop
lock () : void
锁定此实例
锁定此实例
参数:
  • 无。
返回值:
  • void
DragDrop
notifyDrop ( Ext.dd.DragSource source , Event e , Object data ) : Boolean
当一个源对象（指被拖动的对象）被放置到目标对象上时，此函数由 Ext.dd.DragSource 调用一次，以通知目标对象...
当一个源对象（指被拖动的对象）被放置到目标对象上时，此函数由Ext.dd.DragSource调用一次，以通知目标对象。 此函数的没有默认实现，只是返回false， 所以你必须提供此方法的一个实现用来处理drop事件，方法返回true以便拖拽源不进行修正(repair)操作。
参数:
  • source : Ext.dd.DragSource
    悬置在drop目标上的drag源
  • e : Event
    事件
  • data : Object
    包含drag源提供的任意数据的对象
返回值:
  • Boolean
    drop有效时为true，否则false
DropZone
notifyEnter ( Ext.dd.DragSource source , Event e , Object data ) : String
当一个源对象（指被拖动的对象）被拖拽进入了目标对象的范围时，此函数由 Ext.dd.DragSource 调用一次，以通知目标对象...
当一个源对象（指被拖动的对象）被拖拽进入了目标对象的范围时，此函数由Ext.dd.DragSource调用一次，以通知目标对象。默认的实现只是简单地把overClass配置项(如果有指定)中指定的CSS样式应用到目标对象（被放置到的对象），并返回dropAllowed配置项的值。如果放下对象时需要进行校验，必须重写从方法。
参数:
  • source : Ext.dd.DragSource
    悬置在drop目标上的drag源
  • e : Event
    事件
  • data : Object
    包含drag源提供的任意数据的对象
返回值:
  • String
    从drop状态回到源状态的CSS的class，使{@link Ext.dd.StatusProxy}得以更新
DropZone
notifyOut ( Ext.dd.DragSource source , Event e , Object data ) : void
当一个源对象（指被拖动的对象）被拖出了目标对象而没有放下的时候，此函数由 Ext.dd.DragSource 调用一次，以通知目标对象...
当一个源对象（指被拖动的对象）被拖出了目标对象的范围而没有放下的时候，此函数由Ext.dd.DragSource调用一次，以通知目标对象。默认的实现只是简单地把overClass配置项(如果有指定)中指定的CSS样式从被放置到的对象（就是目标对象）上删除。
参数:
  • source : Ext.dd.DragSource
    悬置在drop目标上的drag源
  • e : Event
    事件
  • data : Object
    包含drag源提供的任意数据的对象
返回值:
  • void
DropZone
notifyOver ( Ext.dd.DragSource source , Event e , Object data ) : String
当一个源对象（指被拖动的对象）被拖拽到目标对象之上时，此函数由 Ext.dd.DragSource 不断调用。每次拖拽源对象被拖拽到目标之上...
当一个源对象（指被拖动的对象）被拖拽到目标对象之上时，此函数由Ext.dd.DragSource不断调用。每次拖拽源对象被拖拽到目标之上时此方法都会被调用。默认的实现只是简单地返回dropAllowed配置项的值。
参数:
  • source : Ext.dd.DragSource
    悬置在drop目标上的drag源
  • e : Event
    事件
  • data : Object
    包含drag源提供的任意数据的对象
返回值:
  • String
    从drop状态回到源状态的CSS的class，使{@link Ext.dd.StatusProxy}得以更新
DropZone
onAvailable () : void
覆盖onAvailable方法，以便在决定了位置间隔之后执行所需的操作。
覆盖onAvailable方法，以便在决定了位置间隔之后执行所需的操作。
参数:
  • 无。
返回值:
  • void
DragDrop
onContainerDrop ( Ext.dd.DragSource source , Event e , Object data ) : Boolean
当DropZone检测到一个Ext.dd.DragSource 被放置到其上，而不是放置到注册到其中的节点上时...
当DropZone检测到一个Ext.dd.DragSource被放置到其上，而不是放置到注册到其中的节点上时，此方法在内部被调用。 默认的实现会返回false， 所以，如果你需要放下区域本身可以接收放下操作时， 应该覆盖此方法以提供对drop事件的特定处理。 当放下操作合法时，此方法应该返回true以阻止拖拽源执行repair动作。
参数:
  • source : Ext.dd.DragSource
    悬置在drop区域的drag源
  • e : Event
    事件
  • data : Object
    包含drag源提供的任意数据的对象
返回值:
  • Boolean
    drop有效时为true，否则false
DropZone
onContainerOver ( Ext.dd.DragSource source , Event e , Object data ) : String
从其上滑过，而不是从注册到其中的节点上滑过时，此方法在内部被调用。 默认的实现会返回this.dropNotAllowed...
当DropZone检测到一个Ext.dd.DragSource从其上滑过，而不是从注册到其中的节点上滑过时，此方法在内部被调用。 默认的实现会返回this.dropNotAllowed， 所以，如果需要时，应该覆盖此方法以提供特定的响应。
参数:
  • source : Ext.dd.DragSource
    悬置在drop区域的drag源
  • e : Event
    事件
  • data : Object
    包含drag源提供的任意数据的对象
返回值:
  • String
    从drop状态回到源状态的CSS的class，使{@link Ext.dd.StatusProxy}得以更新
DropZone
onNodeDrop ( Object nodeData , Ext.dd.DragSource source , Event e , Object data ) : Boolean
当DropZone检测到Ext.dd.DragSource被放置到一个目标节点上时， 此方法在内部被调用。 默认的实现会返回false...
当DropZone检测到Ext.dd.DragSource被放置到一个目标节点上时， 此方法在内部被调用。 默认的实现会返回false，所以，应该覆盖此方法以提供对drop事件的特定处理， 并且方法应该返回true，以阻止拖拽源进行repair操作。
参数:
  • nodeData : Object
    drop节点的自定义数据（和该节点 getTargetFromEvent 返回的值一致）
  • source : Ext.dd.DragSource
    悬置在drop区域的drag源
  • e : Event
    事件
  • data : Object
    包含drag源提供的任意数据的对象
返回值:
  • Boolean
    drop有效时为true，否则false
DropZone
onNodeEnter ( Object nodeData , Ext.dd.DragSource source , Event e , Object data ) : void
当DropZone检测到一个Ext.dd.DragSource进入被配置实现的getTargetFromEvent侦测或者注册到的节点时...
当DropZone检测到一个Ext.dd.DragSource进入被配置实现的getTargetFromEvent侦测或者注册到的节点时，此方法被调用。 这个方法默认不实现，如果需要，应该被覆盖来提供特定的节点操作。
参数:
  • nodeData : Object
    drop节点的自定义数据（和该节点 getTargetFromEvent 返回的值一致）
  • source : Ext.dd.DragSource
    悬置在drop区域的drag源
  • e : Event
    事件
  • data : Object
    包含drag源提供的任意数据的对象
返回值:
  • void
DropZone
onNodeOut ( Object nodeData , Ext.dd.DragSource source , Event e , Object data ) : void
当DropZone检测到一个 Ext.dd.DragSource 被拖出了目标区域而没有被放下时...
当DropZone检测到一个Ext.dd.DragSource被拖出了目标区域而没有被放下时，此方法没有默认的实现，如果需要应该重写此方法以提供节点特定的处理。
参数:
  • nodeData : Object
    drop节点的自定义数据（和该节点 getTargetFromEvent 返回的值一致）
  • source : Ext.dd.DragSource
    悬置在drop区域的drag源
  • e : Event
    事件
  • data : Object
    包含drag源提供的任意数据的对象
返回值:
  • void
DropZone
onNodeOver ( Object nodeData , Ext.dd.DragSource source , Event e , Object data ) : String
当DropZone检测到一个Ext.dd.DragSource被配置实现的getTargetFromEvent...
当DropZone检测到一个Ext.dd.DragSource被配置实现的getTargetFromEvent侦测或者注册到的节点上滑过时，此方法被调用。 默认的实现会返回this.dropNotAllowed， 所以，如果需要时，应该覆盖此方法以提供特定的响应。
参数:
  • nodeData : Object
    drop节点的自定义数据（和该节点 getTargetFromEvent 返回的值一致）
  • source : Ext.dd.DragSource
    悬置在drop区域的drag源
  • e : Event
    事件
  • data : Object
    包含drag源提供的任意数据的对象
返回值:
  • String
    从drop状态回到源状态的CSS的class，使{@link Ext.dd.StatusProxy}得以更新
DropZone
removeFromGroup ( string sGroup ) : void
从所提供的交互组中删除此元素
从所提供的交互组中删除此元素
参数:
  • sGroup : string
    需要从中删除的组
返回值:
  • void
DragDrop
setPadding ( int iTop , int iRight , int iBot , int iLeft ) : void
配置拖拽时目标区域的填充像素数。为计算目标区域有效地扩展（或者缩小）虚拟对象的大小...
配置拖拽时目标区域的填充像素数。为计算目标区域有效地扩展（或者缩小）虚拟对象的大小。支持css-style快捷方式，如果只传递了一个参数，所有的边界将会拥有相同的填充；如果传递了两个参数，top和bottom会使用第一个参数， left和right会使用第二个参数。（译者注：这里的规则与CSS设置padding参数的规则是一样的，完全可以用CSS的规则来配置此参数。）
参数:
  • iTop : int
    Top pad
  • iRight : int
    Right pad
  • iBot : int
    Bot pad
  • iLeft : int
    Left pad
返回值:
  • void
DragDrop
toString () : string
toString方法
toString method
参数:
  • 无。
返回值:
  • string
    dd对象的字符串表述
DragDrop
unlock () : void
Unlock this instace
为此实例解锁
参数:
  • 无。
返回值:
  • void
DragDrop
unreg () : void
删除当前元素上所有拖拽和落下钩子(hook)
删除当前元素上所有拖拽和落下钩子(hook)
参数:
  • 无。
返回值:
  • void
DragDrop

公共事件

该类没有公共事件。


Observable
    Component
      Editor
        TreeEditor

Class Ext.tree.TreeEditor

包: | Ext.tree
定义类的文件: | TreeEditor.js
类: | TreeEditor
继承自: | Editor
为树中的节点提供一个内嵌的节点编辑功能。 任何合法的 Ext.form.Field 子类都可以用作编辑field。

配置项

Config Options Defined By
alignment : String
对齐的位置(详情参见 Ext.Element.alignTo 默认值为 "l-l").
TreeEditor
allowBlur : Boolean
设置值为true，当该字段失去焦点时，完成编辑过程。默认值为true。
Editor
allowDomMove : Boolean
在渲染时组件是否可以移动Dom节点(默认为true)。
Component
applyTo : Mixed
指定一个元素的id、一个DOM元素或者一个已经存在并被渲染到DIV中的元素，此DIV已经被...

指定一个元素的id、一个DOM元素或者一个已经存在并被渲染到DIV中的元素，此DIV已经被 渲染到document中，并且为当前组件指定了一些结构化的标签。

  • 描述 :
      当使用了 applyTo， 在主元素中也可以用id或者CSS类名来指定组件的托管部分， 并且，如果可以的话，创建的组件可能也会试图在那个标签中创建它的子组件。
  • 注意 :
      当使用此配置项时，无需调用render()方法。
      如果指定了applyTo属性，任何传递给 renderTo 的值都会被忽略，并且目标元素的父节点将会自动被用作组件的容器。
Component
autoEl : Mixed
一个表签名或者一个 DomHelper 描述，用来创建 Element ，它将封装当前组件...

一个表签名或者一个 DomHelper 描述，用来创建 Element ，它将封装当前组件。

一般情况下你不必指定此值。对于基类 Ext.Component, Ext.BoxComponent, 和 Ext.Container, 此值默认为 'div'。 越复杂的Ext类使用越复杂的DOM结构，这些是由它们自己的onRender方法创建的。

这被设计用来允许开发者创建针对特定应用的 工具组件，这些组件由不同的DOM元素封装而成。 示例用法:

{
    xtype: 'box',
    autoEl: {
        tag: 'img',
        src: 'http://www.example.com/example.jpg'

    }
}, {
    xtype: 'box',
    autoEl: {
        tag: 'blockquote',
        html: 'autoEl is cool!'
    }
}, {
    xtype: 'container',
    autoEl: 'ul',
    cls: 'ux-unordered-list',
    items: {
        xtype: 'box',
        autoEl: 'li',
        html: 'First list item'
    }
}
Component
autoShow : Boolean
如果组件需要检测隐藏CSS属性(如 'x-hidden' 或者 'x-hide-display')并且在渲染时删除...
如果组件需要检测隐藏CSS属性(如 'x-hidden' 或者 'x-hide-display')并且在渲染时删除它们 (默认为false)，设置此值为true。
Component
autoSize : Boolean/String
设置为true，编辑器自动采用底层字段的大小，"width"采用其宽度值，"height"采用...
设置为true，编辑器自动采用底层字段的大小，"width"采用其宽度值，"height"采用其高度值，"auto"使用字段的规格大小。(默认值为false)
Editor
bubbleEvents : Array
一个事件数组，当这些事件被触发时，将会被冒泡到所有父容器中。参见....

一个事件数组，当这些事件被触发时，将会被冒泡到所有父容器中。参见 Ext.util.Observable.enableBubble。 默认为 []。

Component
cancelOnEsc : Boolean
设置为true，按下Escape键取消编辑。默认值为true。
Editor
clearCls : String
应用到特殊的clearing div的CSS类， 这个clearing div直接渲染到每个form field的包装器后面...

应用到特殊的clearing div的CSS类， 这个clearing div直接渲染到每个form field的包装器后面，以提供 清除field的功能(默认为 'x-form-clear-left')。

注意: 只有在当前组件被渲染到一个使用FormLayout 布局(例如 Ext.form.FormPanel 或者指定 layout:'form')的 容器中、或者是指定了一个fieldLabel 、或者指定isFormField=true 时此配置才有效。

另请参见 Ext.layout.FormLayout. fieldTpl。

Component
cls : String
应用到编辑器的CSS类(默认值为 "x-small-editor x-tree-editor")
TreeEditor
completeOnEnter : Boolean
设置为true，完成时按下回车键结束编辑。默认值为true。
Editor
constrain : Boolean
设置为true，将编辑器约束到视图
Editor
contentEl : String
(可选)指定一个已存在的HTML元素，或者一个已存在HTML元素的...

(可选)指定一个已存在的HTML元素，或者一个已存在HTML元素的 id ，它们将被用作当前组件的内容。

  • 描述 :
    此配置选项被用来将一个已存在的HTML元素 插入到一个新组件(在组件渲染之后它简单地移动DOM元素) 的layout元素中，使它成为该组件的内容。
  • 注意 :
    指定的HTML元素将被append到组件的layout元素中， 在所有配置的 HTML 被插入之后， 并且，这样的话，在render事件 被触发时，document中将不再包含此元素。
    指定的HTML元素将不会参与组件所有可能使用的 layout 过程(译者注：指这些HTML元素 不会参与布局操作)。 它仅是HTML而已。布局操作实在孩子 items 上进行的。
    添加 x-hidden 或者 x-hide-display CSS类，以防在内容渲染到panel时发生闪烁。
Component
ctCls : String
一个可选的外部CSS样式，添加到这个组件的容器(默认值为 '')。 这个方法对于使用标准的CSS规则...

一个可选的外部CSS样式，添加到这个组件的容器(默认值为 '')。 这个方法对于使用标准的CSS规则，为组件或它的任何一个子组件添加特定的样式非常有用。 参见 Ext.layout.ContainerLayout和 extraCls 。

注意: ctCls 默认为 ''期望如下的类，它们将指定一个默认值:

  • Box Layout : 'x-box-layout-ct'
使用一个额外的CSS类配置以上的Class，它是append到默认对象上的。例如， 对于BoxLayout (Hbox and Vbox):
                                ctCls: 'x-box-layout-ct custom-class'

Component
data : Mixed
初始化数据集，它将被应用到 tpl 上以刷新组件的内容区域。
Component
disabled : Boolean
当前组件处于无效状态时为true。 Read-only.
Component
disabledClass : String
当组件处于无效状态时添加到组件上的CSS类(默认为 'x-item-disabled')。
Component
editDelay : Number
在多次点击之间所延迟的毫秒数，如果点击的间隔时间小于此值，将 注册成一个double-click...
在多次点击之间所延迟的毫秒数，如果点击的间隔时间小于此值，将 注册成一个double-click，并在此节点上触发编辑操作 (默认值为 350). 如果在一个节点上发生两次点击，间隔时间小于此时间间隔， 将显示节点的编辑器，否则将被当作普通的点击来处理。
TreeEditor
field : Ext.form.Field
Field对象(或他的子类)或field的配置对象
Editor
fieldLabel : String
紧靠此field显示的标签文本(默认值为 '')。注意...

紧靠此field显示的标签文本(默认值为 '')。

注意:只有在当前组件被渲染到一个使用FormLayout 的容器中时，此配置才有效。 (例如 Ext.form.FormPanel 或 指定 layout:'form')。

另请参见 hideLabel 、 Ext.layout.FormLayout和 fieldTpl。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Name'
    }]
});
Component
hidden : Boolean
如果当前组件处于隐藏状态，此值为true。Read-only。
Component
hideEl : Boolean
设置为true，当显示编辑器时隐藏边框元素(默认值为 false)
TreeEditor
hideLabel : Boolean
true时完全隐藏label元素 ( label 和 separator)。 默认为 false。 默认情况下，即使你不指定...

true时完全隐藏label元素 ( label 和 separator)。 默认为 false。 默认情况下，即使你不指定 fieldLabel 它的空间仍然会被保留，这样这块区域会与其它确实拥有label的区域位于同一排。 讲此值设置为 true 将导致此区域不再保留此空间。

注意: 参见 clearCls 的注释。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield'
        hideLabel: true
    }]
});
Component
hideMode : String
组件如何隐藏，支持的值有： 'visibility' (css visibility), 'offsets' (位置偏移量为负值) 和...

组件如何隐藏，支持的值有： 'visibility' (css visibility), 'offsets' (位置偏移量为负值) 和 'display' (css display).

注意:一般首选默认值 'display'，因为当组件第一次显示的时候它们会自动进行布局 (隐藏的时候不会调整尺寸)。

Component
hideParent : Boolean
此值为true时，当调用hide/show方法时，将会hide和show组件的容器...
此值为true时，当调用hide/show方法时，将会hide和show组件的容器；false时将会 hide和show组件自身(默认为false)。例如，这可以用作window上隐藏按钮的一种 快捷操作，通过设置此按钮的hideParent:true，然后把它添加到window上。
Component
html : String/Object
一个HTML片段，或者一个 DomHelper 描述，用作layout元素的内容(默认为'')。...
一个HTML片段，或者一个 DomHelper 描述，用作layout元素的内容(默认为'')。 这个HTML内容在组件渲染之后才被添加，所以在 render 出发的时候，document中尚未包含此HTML。 但是这个内容将会在所有配置的 contentEl 之前被插入到body标签中。
Component
id : String
当前组件唯一的id(默认为auto-assigned id)...

当前组件唯一的id(默认为auto-assigned id)。 如果你需要在以后访问组件，而又没有一个有效的组件对象引用，那么你需要指定一个 id( 也就是，使用Ext. getCmp方法 )。

注意，此id也将被用作组件底层HTML标签的id，这些标签被渲染到页面中。 这将允许你编写基于id的CSS规则，以独立地描述指定的实例；并且，也可以通过 组件父标签的id选中子元素。

注意:为了避免与唯一的id 产生重复， 请参见 itemId 和 ref 。

注意: 如需访问一个元素的容器，参见 ownerCt 。

Component
ignoreNoChange : Boolean
值为true，如果用户完成编辑且值没有发生变化则跳过编辑完成的过程...
值为true，如果用户完成编辑且值没有发生变化则跳过编辑完成的过程(不保存，不触发事件)(默认值为false)。只对字符串值有效 - 对于其他数据类型的编辑将被忽略。
Editor
itemCls : String
注意: 只有在当前组件被渲染到一个使用FormLayout 布局的 容器中时此配置才有效...

注意: 只有在当前组件被渲染到一个使用FormLayout 布局的 容器中时此配置才有效。 (例如Ext.form.FormPanel 或者指定 layout:'form')。

一个附加的CSS类，应用到div上，包装当前field的表单元素。 如果提供了此参数， field级上的itemCls将会覆盖 container级上提供的 默认itemCls。 为itemCls指定的值将会被添加默认的 类('x-form-item')。

既然它被应用到项目的包装器上(参见 Ext.layout.FormLayout。 fieldTpl)， 它将允许你编写能应用到此field、label(如果有指定)、或者field内部任何其它元素的标准CSS规则。

注意: 参考 fieldLabel的注释。 .

示例用法:

// Apply a style to the field's label:
<style>
    .required .x-form-item-label {font-weight:bold;color:red;}
</style>

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Name',
        itemCls: 'required' //this label will be styled
    },{
        xtype: 'textfield',
        fieldLabel: 'Favorite Color'
    }]
});
Component
itemId : String
当没有可利用的对象引用时，itemId可以作为第二选择，用来获得一个组件的引用， 代替 ...

当没有可利用的对象引用时，itemId可以作为第二选择，用来获得一个组件的引用， 代替 id 与 Ext. getCmp的组合， 使用 itemId 与 Ext.Container. getComponent 方法配合将会获得 itemId 's（的所有者） 或者 id 's（的所有者）。 既然 itemId 's（的所有者）是一个到容器内部MixedCollection的索引， itemId 的作用域就被限定在容器之内---避免与 Ext.ComponentMgr 产生潜在的冲突，它（指Ext.ComponentMgr）需要一个 唯一的 id 。

var c = new Ext.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'); // 与 Ext.getCmp()不同

p2 = p1.ownerCt.getComponent('p2'); // 通过兄弟对象获得引用

另请参见 id 和 ref 。

注意:需要访问一个item的容器请参见 ownerCt 。

Component
labelSeparator : String
每个fieldLabel 文本后面现实的分隔符。 此属性可以在多个层次上进行配置...

每个fieldLabel 文本后面现实的分隔符。 此属性可以在多个层次上进行配置。优先顺序为：

  • field / component level
  • container level
  • layout level (默认为冒号 ':')
如不需要为当前field的label显示分隔符，指定一个空字符串''即可。

注意:参见 clearCls 的注释。

另请参见 hideLabel 和 Ext.layout.FormLayout。 fieldTpl。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    layoutConfig: {
        labelSeparator: '~'   // layout config has lowest priority (defaults to ':')
    },
    labelSeparator: '>>',     // config at container level
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Field 1',
        labelSeparator: '...' // field/component level config supersedes others
    },{
        xtype: 'textfield',
        fieldLabel: 'Field 2' // labelSeparator will be '='

    }]
});
Component
labelStyle : String
一个CSS样式描述字符串，它将直接应用到当前field的label上...

一个CSS样式描述字符串，它将直接应用到当前field的label上。 如果有设置，默认为容器的labelStyle值(例如 Ext.layout.FormLayout.labelStyle , 或者 '')。

注意:参见 clearCls 的注释。

另请参见 hideLabel 和 Ext.layout.FormLayout. fieldTpl。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Name',
        labelStyle: 'font-weight:bold;'
    }]
});
Component
listeners : Object
一个包含一个或多个事件处理器的配置对象，会在初始化的时候被添加到目标对象上...

一个包含一个或多个事件处理器的配置对象，会在初始化的时候被添加到目标对象上。 该配置对象应该是一个有效的监听器配置对象就像 addListener例子中指定的一样可一次附加多个处理器。

ExtJs Components上的DOM事件

一些 ExtJs Component 类导出时会选择一些DOM事件(例如 "click", "mouseover" 等等), 这通常只是在有额外的值可以被添加时发生。例如DataView类的 click事件会传递被点击的节点。也可以直接在Component的HTMLElementevent上访问DOM事件，但必需在Component被渲染后监听器才能添加到Element 上。可以按照以下步骤添加插件:

// 插件会用一个监听器配置对象进行配置。
//该组件会被添加到所有处理方法的参数列表上。
Ext.DomObserver = Ext.extend(Object, {
    constructor: function(config) {
        this.listeners = config.listeners ? config.listeners : config;
    },

    // 组件将自己传递进了插件的初始化方法里
    init: function(c) {
        var p, l = this.listeners;
        for (p in l) {
            if (Ext.isFunction(l[p])) {
                l[p] = this.createHandler(l[p], c);
            } else {
                l[p].fn = this.createHandler(l[p].fn, c);
            }
        }

        // 渲染后立即添加监听器到元素上
        c.render = c.render.createSequence(function() {
            var e = c.getEl();
            if (e) {
                e.on(l);
            }
        });
    },

    createHandler: function(fn, c) {
        return function(e) {
            fn.call(this, e, c);
        };
    }
});

var combo = new Ext.form.ComboBox({

    // 元素被点击后折叠
    plugins: [ new Ext.DomObserver({
        click: function(evt, comp) {
            comp.collapse();
        }
    })],
    store: myStore,
    typeAhead: true,
    mode: 'local',
    triggerAction: 'all'
});

Observable
maxWidth : Number
编辑field的最大宽度像素值(默认值为 250)。 注意：如果maxWidth超过了树元素的尺寸，它将自动被限定为容器的宽度...
编辑field的最大宽度像素值(默认值为 250)。 注意：如果maxWidth超过了树元素的尺寸，它将自动被限定为容器的宽度， 每个编辑器都优先计算滚动条和客户区偏移量。
TreeEditor
offsets : Array
The offsets to use when aligning (see Ext.Element.alignTo for more details. Defaults to [0, 0].
Editor
overCls : String
一个可选的额外的CSS类，它将在鼠标移过元素时被添加到组件上...
一个可选的额外的CSS类，它将在鼠标移过元素时被添加到组件上，鼠标移出时 删除。(默认为'')。此属性对于在组件上，或者它的任何使用标准CSS规则的孩子节点上， 添加定制的'active' 或者 'hover'样式非常有用。
Component
plugins : Object/Array
一个对象或者一个对象数组，为组件提供特殊的功能 ...
一个对象或者一个对象数组，为组件提供特殊的功能。 对一个合法的插件唯一的要求是它含有一个init()方法， 能接收一个Ext.Component型的参数。 当组件被创建时，如果有可用的插件，组件将会调用每个插件的init方法， 并将自身的引用作为方法参数传递给它。然后，每个插件就可以调用方法或者响应组件上的事件， 就像需要的那样提供自己的功能。
Component
ptype : String
需要创建配置的ptype。 当传递一个配置对象给构造函数时...
需要创建配置的ptype。 当传递一个配置对象给构造函数时，此配置选项不会被使用。 只有在使用懒初始化的时候此配置项才会被使用， 此时Plugin不是 通过一个完整的实例组件，而是通过一个Component配置指定的。 在渲染时，将会查找ptype以决定创建何种类型的Plugin。

如果你创建自己的Plugin，你可以通过 Ext.ComponentMgr.registerPlugin 对它们进行注册，以便能利用懒初始化和渲染机制。
Component
ref : String
一个路径描述，与组件的 ownerCt 相关，它描述了把当前组件的命名引用放置到哪个父容器中去。...

一个路径描述，与组件的 ownerCt 相关，它描述了把当前组件的命名引用放置到哪个父容器中去。

祖先的坐标路径可以通过'/'字符进行分隔。 例如，将一个Toolbar Button的引用放入 拥有此Toolbar的Panel中:

var myGrid = new Ext.grid.EditorGridPanel({
    title: 'My EditorGridPanel',
    store: myStore,
    colModel: myColModel,
    tbar: [{
        text: 'Save',
        handler: saveChanges,
        disabled: true,
        ref: '../saveButton'
    }],
    listeners: {
        afteredit: function() {
//          The button reference is in the GridPanel
            myGrid.saveButton.enable();
        }
    }
});

在上面的代码中，如果 ref 是 'saveButton' ，那么引用将会被放置到Toolbar中。 ref 中的每个'/' 都会从组件的 ownerCt 向上移动一级。

另请参见 added 和 removed 事件。

Component
renderTo : Mixed
该值可以是一个节点的id、一个DOM节点或者一个已存在的元素...

该值可以是一个节点的id、一个DOM节点或者一个已存在的元素， 组件将会被渲染到其中。

  • 注意 :
      如果组件不是一个Container 的子项目时， 不要使用此选项。 渲染和管理它的子项目是一个Container 的layout manager的责任。
      当使用此配置项时，无需调用render()方法。

另请参见 render 。

Component
revertInvalid : Boolean
设置为true，当用户完成编辑后但字段效验失败时，自动恢复到原始值...
设置为true，当用户完成编辑后但字段效验失败时，自动恢复到原始值并取消编(默认值为true)
Editor
shadow : Boolean/String
"sides" 仅在两侧和底部， "frame" 四个方向的阴影，"drop" 底部和右侧阴影 (默认值为 "frame")
Editor
shim : Boolean
设置为true将垫衬此编辑器，如果需要在其下面显示下拉框/内帧(selects/iframes)(默认值为 false)
TreeEditor
stateEvents : Array
一个事件数组，当它们被触发时，组件需要保存自己的状态(默认值为 none)...

一个事件数组，当它们被触发时，组件需要保存自己的状态(默认值为 none)。 它们可以是任何该组件支持的事件类型，包括浏览器事件和 自定义事件(例如['click', 'customerchange'])。

对于保存和恢复组件状态的详细解释，参见 stateful

Component
stateId : String
为该组件指定的唯一的id值，它被用作管理组件状态的目的...
为该组件指定的唯一的id值，它被用作管理组件状态的目的。 (如果设定了id，默认值为组件自己的id，否则，如果组件使用自动生成的id，此值为null)。

对于保存和反解析组件状态的解释，参见 stateful 。

Component
stateful : Boolean
一个标志参数，它将引起组件在启动时尝试从一个保存的状态中恢复内部状态参数...

一个标志参数，它将引起组件在启动时尝试从一个保存的状态中恢复内部状态参数。 组件必须要么拥有一个 stateId 或者 id ，它们被分配给需要被管理的状态属性。 在跨页面加载时，不保证自动生成的id属性的稳定性， 并且，不能依赖此id来保存和恢复一个组件的相同状态。

为了保存状态的操作能够工作，状态管理器的提供者必须 被设置成一个Ext.state.Provider 的实现类，它覆盖了set 和get 方法，以便保存和恢复name/value对。 有一个内置的Ext.state.CookieProvider 可用。

为当前页面设置状态提供者:

Ext.state.Manager.setProvider(new Ext.state.CookieProvider({
    expires: new Date(new Date().getTime()+(1000*60*60*24*7)), //7 days from now
}));

当 stateEvents 配置项中其中之一的事件被触发时， 一个状态可保存的组件将试图保存其状态。

保存状态时，一个可保存状态的组件首先需要通过调用 getState 方法来序列化它的状态。 默认情况下，此函数什么事都不做。 开发者必须提供一个实现，返回一个hash对象，它描述了组件可恢复的状态。

getState方法产生的值将会传递给 Ext.state.Manager.set 方法，它使用配置的 Ext.state.Provider 来保存对象，以组件的 stateId 为key，或者，如果此值（指stateId）没有指定时， 使用它的 id 作为key。

在进行构造时，一个可保存状态的组件试图通过调用 Ext.state.Manager.get方法来 恢复它的状态，传递 stateId 或者，如果此值（指stateId）没有指定时， 使用它的 id 作为参数。

结果对象被传递给 applyState 。 applyState 的默认实现只是简单地把属性拷贝到对象中， 但是开发者可以覆盖此方法以支持更多行为。

通过向 beforestaterestore, staterestore, beforestatesave 和 statesave 事件上绑定监听器，你可以在保存和恢复状态时进行额外的处理。

Component
style : String
被添加到组件元素的特定样式。 必须是按照...
被添加到组件元素的特定样式。 必须是按照 Ext.Element.applyStyles 类指定格式的合法参数值。

new Ext.Panel({
    title: 'Some Title',
    renderTo: Ext.getBody(),
    width: 400, height: 300,
    layout: 'form',
    items: [{
        xtype: 'textarea',
        style: {
            width: '95%',
            marginBottom: '10px'
        }
    },
        new Ext.Button({
            text: 'Send',
            minWidth: '100',
            style: {
                marginBottom: '10px'
            }
        })
    ]
});
Component
swallowKeys : Boolean
处理keydown/keypress事件，使它们不会继续传播(默认值true)
Editor
tpl : Mixed
一个 Ext.Template , Ext.XTemplate 或者一个用来形成一个Ext.XTemplate的字符串数组...
一个 Ext.Template , Ext.XTemplate 或者一个用来形成一个Ext.XTemplate的字符串数组。 与 data 和 tplWriteMode 配置项协同使用。
Component
tplWriteMode : String
刷新组件的内容区域时使用的Ext.(X)Template方式。 默认为'overwrite' (参见 Ext.XTemplate.overwrite )。
刷新组件的内容区域时使用的Ext.(X)Template方式。 默认为'overwrite' (参见 Ext.XTemplate.overwrite )。
Component
updateEl : Boolean
设置为true，当更新完成时同时更新绑定的元素的innerHTML(默认值为false)
Editor
value : Mixed
底层字段的数据值(默认值为 "")
Editor
xtype : String
需要创建配置的xtype。 当传递一个配置对象给构造函数时...
需要创建配置的xtype。 当传递一个配置对象给构造函数时，此配置选项不会被使用。 只有在使用懒初始化的时候此配置项才会被使用，此时容器的子项目不是 通过一个完整的实例组件，而是通过一个Component配置指定的。 在渲染时，将会查找xtype以决定创建何种类型的子组件。

预定义的xtype列表如下： here。

如果你继承Component创建你自己的组件，你需要使用Ext.ComponentMgr.registerType 对它们进行注册，以便利用懒初始化和渲染机制。
Component

公共属性

Property Defined By
disabled : Boolean
当前组件处于无效状态时为true。 Read-only.
Component
editNode : Ext.tree.TreeNode
此编辑器绑定到的树节点。只读属性。
TreeEditor
el : Ext.Element
封装了当前组件的Ext.Element。 Read-only。通常情况下，这将是一个<DIV>元素，它由此类的...

封装了当前组件的Ext.Element。 Read-only。

通常情况下，这将是一个<DIV>元素，它由此类的 onRender方法创建，但是它可以通过使用 autoEl 配置项进行覆盖。

注意: 直到组件渲染完成此元素都将处于无效状态。

如需向当前组件的 DOM事件(而不是当前组件自己的Observable事件)添加监听器， 更多建议，参见 listeners 配置项，或者直接使用一个render监听器:

new Ext.Panel({
    title: 'The Clickable Panel',
    listeners: {
        render: function(p) {
            // Append the Panel to the click handler's argument list.
            p.getEl().on('click', handlePanelClick.createDelegate(null, [p], true));
        },
        single: true  // Remove the listener after first invocation
    }
});

另请参见 getEl

Component
hidden : Boolean
如果当前组件处于隐藏状态，此值为true。Read-only。
Component
initialConfig : Object
当前组件的初始化配置描述。 Read-only。
Component
ownerCt : Ext.Container
组件所属的Container (默认为undefined，当前组件被添加到一个容器中时此值被自动设置)...
组件所属的Container (默认为undefined，当前组件被添加到一个容器中时此值被自动设置)。 Read-only。

注意: 如需访问容器中的子组件，参见 itemId 。

Component
refOwner : Ext.Container
如果当前组件是一个容器的孩子，并且是通过一个 ref 配置项被注册的，则此值为 ref 引用被插入到的祖先容器。
如果当前组件是一个容器的孩子，并且是通过一个 ref 配置项被注册的，则此值为 ref 引用被插入到的祖先容器。
Component
rendered : Boolean
如果当前组件已经被渲染了，此值为true。Read-only.
Component

公共方法

Method Defined By
TreeEditor ( TreePanel tree , [ Object fieldConfig ], [ Object config ] )
参数:
  • tree : TreePanel
  • fieldConfig : Object
    可选 Either a prebuilt Ext.form.Field instance or a Field config object that will be applied to the default field instance (defaults to a Ext.form.TextField).
  • config : Object
    可选 树编辑器的配置目标
返回值:
  • void
TreeEditor
addClass ( string cls ) : Ext.Component
为组件底层的元素添加CSS样式。
为组件底层的元素添加CSS样式。
参数:
  • cls : string
    需要添加的CSS样式的class名称
返回值:
  • Ext.Component
    this
Component
addEvents( Object|String o, string Optional. ) : void
添加指定的事件到事件列表上，事件会被该Observable触发。
添加指定的事件到事件列表上，事件会被该Observable触发。
参数:
  • o : Object|String
    以事件名作为属性true作为值的对象 或者当多个事件名被分开的传递时则为第一个事件名。
  • Optional. : string
    事件名被分开的传递时则为事件名。 用法:
    this.addEvents('storeloaded', 'storecleared');
返回值:
  • void
Observable
addListener( String eventName, Function handler, [Object scope], [Object options] ) : void
给对象添加事件处理器。
给对象添加事件处理器。
参数:
  • eventName : String
    监听的事件名。
  • handler : Function
    事件调用的方法
  • scope : Object
    （可选）处理方法执行的作用域 (this的引用 reference)。 如果被忽略。默认为触发事件的对象。
  • options : Object
    （可选）包含处理器配置和属性的对象。 可能包含以下的属性:
    • scope : Object
      处理方法执行的作用域(this的引用) 。 如果被忽略。默认为触发事件的对象。
    • delay : Number
      在触发事件后延迟调用处理器的毫秒数。
    • single : Boolean
      如果为True则添加一个处理器来处理下一次的事件触发（仅一次），然后移除自己。
    • buffer : Number
      使得处理器延迟指定毫秒数后预定的运行在 一个Ext.util.DelayedTask中 。 如果事件在时间内再一次被触发，原始的处理器不会被调用，但是新的处理器会预定的在他的位置上。
    • target : Observable
      如果事件在目标的Observable上触发则仅仅调用处理器， 否则 事件会从子类的Observable上冒泡

    组合选项
    使用这些选项参数,可能会组合出不同类型的监听器：

    一个延迟的，一次性的监听器。

    myDataView.on('click', this.onClick, this, {
single: true,
delay: 100
});

    一次调用附加多个处理器
    该方法同样支持传递一个包含指定的多个处理器的属性的配置对象参数。

    myGridPanel.on({
'click' : {
    fn: this.onClick,
    scope: this,
    delay: 100
},
'mouseover' : {
    fn: this.onMouseOver,
    scope: this
},
'mouseout' : {
    fn: this.onMouseOut,
    scope: this
}
});

    或者一个简写的语法：

    myGridPanel.on({
'click' : this.onClick,
'mouseover' : this.onMouseOver,
'mouseout' : this.onMouseOut,
 scope: this
});
返回值:
  • void
Observable
applyToMarkup ( String/HTMLElement el ) : void
将此组件添加到已存在的有效的HTML标签中。 使用该方法时，无需再调用render()方法。
将此组件添加到已存在的有效的HTML标签中。 使用该方法时，无需再调用render()方法。
参数:
  • el : String/HTMLElement
返回值:
  • void
Component
cancelEdit ( Boolean remainVisible ) : void
取消编辑并隐藏编辑器，而不保存所改变的值。该字段值将恢复到原来的初始值。
取消编辑并隐藏编辑器，而不保存所改变的值。该字段值将恢复到原来的初始值。
参数:
  • remainVisible : Boolean
    替代默认行为，取消编辑并保留编辑器可见状态(默认值为false)
返回值:
  • void
Editor
cloneConfig ( Object overrides ) : Ext.Component
默认使用原先传递给当前实例的配置值克隆当前组件。
默认使用原先传递给当前实例的配置值克隆当前组件。
参数:
  • overrides : Object
    一个新的配置项，包含需要覆盖到克隆版本的所有属性。 可以传递一个id参数给此对象，否则将自动生成一个新的id以避免发生重复。
返回值:
  • Ext.Component
    当前组件的克隆副本
Component
completeEdit ( Boolean remainVisible ) : void
结束编辑过程，将改变的值保存到底层的输入栏，并隐藏编辑器。
结束编辑过程，将改变的值保存到底层的输入栏，并隐藏编辑器。
参数:
  • remainVisible : Boolean
    替代默认行为，并保持编辑器可编辑(默认为false)。
返回值:
  • void
Editor
destroy () : void
通过如下方法销毁对象：删除所有的事件监听器、将组件的元素从DOM树中删除...
通过如下方法销毁对象：删除所有的事件监听器、将组件的元素从DOM树中删除（如果可以）、 将组件从它的 Ext.Container（如果可用）中删除、 并且将它从Ext.ComponentMgr中 注销。 销毁操作一般由框架自动完成，一般情况下不需要直接调用该方法。
参数:
  • 无。
返回值:
  • void
Component
disable () : Ext.Component
将组件置为无效状态，并出发'disable'事件。
将组件置为无效状态，并出发'disable'事件。
参数:
  • 无。
返回值:
  • Ext.Component
    this
Component
enable () : Ext.Component
将组件置为有效状态并触发'enable'事件。
将组件置为有效状态并触发'enable'事件。
参数:
  • 无。
返回值:
  • Ext.Component
    this
Component
enableBubble( String/Array events ) :void
是否现在使得事件会被该Observable触发并调用 this.getBubbleTarget()方法在拥有者的继承树...

是否现在使得事件会被该Observable触发并调用 this.getBubbleTarget()方法在拥有者的继承树中冒泡。Observable的基础类中没有该方法的实现。

该方法一般被Ext.Components用来冒泡事件到拥有者的容器。参看Ext.Component.getBubbleTarget默认的实现 在Ext.Component中返回组件的直接拥有者。但是如果需要的是一个已知的目标，该方法可以被重写来更快的访问需求的目标。

例子:

Ext.override(Ext.form.Field, {
    // 添加方法到Field的initComponent上改变事件为冒泡
    initComponent : Ext.form.Field.prototype.initComponent.createSequence(function() {
        this.enableBubble('change');
    }),

    // 我们知道我们想让Field的事件冒泡到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() {
            // 如果样式被修改标题会变红。
            myForm.header.setStyle('color', 'red');
        }
    }
});
参数:
  • events : String/Array
    冒泡的事件名，或事件名数组
返回值:
  • void
Observable
findParentBy ( Function fn ) : Ext.Container
通过自定义的函数查找当前组件上层任何层次上的容器...
通过自定义的函数查找当前组件上层任何层次上的容器。 如果传递的函数返回true，容器对象将被返回。
参数:
  • fn : Function
    自定义的函数，使用如下参数调用(container,this component)。
返回值:
  • Ext.Container
    自定义函数返回true的第一个容器
Component
findParentByType ( String/Class xtype ) : Ext.Container
通过xtype或者class查找当前组件上层任何层次上的容器
通过xtype或者class查找当前组件上层任何层次上的容器
参数:
  • xtype : String/Class
    组件的xtype字符串，或者直接是组件的class
返回值:
  • Ext.Container
    符合指定xtype或者class的第一个容器
Component
fireEvent( String eventName, Object... args ) : Boolean
用传入的参数触发指定的事件 (减去事件名)。 一个事件可以被设置为冒泡 Obse...

用传入的参数触发指定的事件 (减去事件名)。

一个事件可以被设置为冒泡到Observable父类继承树(参看 Ext.Component.getBubbleTarget) 调用enableBubble实现。

参数:
  • eventName : String
    触发的事件名。
  • args : Object...
    传递给处理器的可变长度参数。
返回值:
  • Boolean
    如果有任何的处理器返回false则返回false，否则返回true。
Observable
focus ( [ Boolean selectText ], [ Boolean/Number delay ] ) : Ext.Component
尝试将当前组件设为焦点。
尝试将当前组件设为焦点。
参数:
  • selectText : Boolean
    (可选) 如果可用，同时选中组件内部的文本
  • delay : Boolean/Number
    (可选)将当前组件设置为焦点的延迟时间(设置为true等于0毫秒)
返回值:
  • Ext.Component
    this
Component
getBubbleTarget () : Ext.Container
为Observable的fireEvent方法提供链接，它沿着继承结构进行冒泡操作。
为Observable的fireEvent方法提供链接，它沿着继承结构进行冒泡操作。
参数:
  • 无。
返回值:
  • Ext.Container
    拥有当前组件的容器。
Component
getEl () : Ext.Element
返回 Ext.Element ，它包装了当前组件。...

返回 Ext.Element ，它包装了当前组件。

通常情况下，这将是一个<DIV>元素，它是由该类的onRender方法创建的， 但是可以使用autoEl配置项 覆盖它。

注意: 此元素将会一直处于无效状态直到当前组件渲染完成。

如需向当前组件的 DOM事件(而不是当前组件自己的Observable事件)添加监听器， 更多建议，参见 listeners 配置项，或者直接使用一个render监听器:

new Ext.Panel({
    title: 'The Clickable Panel',
    listeners: {
        render: function(p) {
            // Append the Panel to the click handler's argument list.
            p.getEl().on('click', handlePanelClick.createDelegate(null, [p], true));
        },
        single: true  // Remove the listener after first invocation
    }
});
参数:
  • 无。
返回值:
  • Ext.Element
    包装当前组件的元素。
Component
getId () : String
返回当前组件的id，如果没有定义id，则自动生成并返回一个id:'ext-comp-'...
返回当前组件的 id 如果没有定义 id 则自动生成并返回一个 id

'ext-comp-' + (++Ext.Component.AUTO_ID)
参数:
  • 无。
返回值:
  • String
    id
Component
getItemId () : String
返回当前组件的 itemId 。 如果没有通过配置参数指定 itemId 那么，将会使用...
返回当前组件的 itemId 。 如果没有通过配置参数指定 itemId 那么，将会使用 getId 返回 id 。
参数:
  • 无。
返回值:
  • String
Component
getValue () : Mixed
获取编辑器的数据值
获取编辑器的数据值
参数:
  • 无。
返回值:
  • Mixed
    The data value
Editor
getXType () : String
获取当前组件的xtype，它是用 Ext.ComponentMgr 注册的。 所有可用的xtype列表，参见...
获取当前组件的xtype，它是用 Ext.ComponentMgr 注册的。 所有可用的xtype列表，参见 Ext.Component 类头部。示例用法:

var t = new Ext.form.TextField();
alert(t.getXType());  // alerts 'textfield'
参数:
  • 无。
返回值:
  • String
    The xtype
Component
getXTypes () : String
返回此组件的xtype继承树，用字符'-'分隔。 所有可用的xtype值...

返回此组件的xtype继承树，用字符'-'分隔。 所有可用的xtype值，请参见Ext.Component 类的头部。

如果使用你自己的子类，请注意，组件必须注册它自己的xtype值以便区别于继承的xtype。

示例用法:

var t = new Ext.form.TextField();
alert(t.getXTypes());  // alerts 'component/box/field/textfield'
参数:
  • 无。
返回值:
  • String
    xtype层次字符串
Component
hasListener( String eventName ) : Boolean
检测对象是否包含指定事件的任何监听器
检测对象是否包含指定事件的任何监听器
参数:
  • eventName : String
    检测的事件名
返回值:
  • Boolean
    如果事件被监听则为true，否则为false
Observable
hide () : Ext.Component
隐藏当前组件。 监听 beforehide' 事件并且返回false 可以取消隐藏组件的操作。 在隐藏组件之后触发...
隐藏当前组件。 监听 beforehide' 事件并且返回false 可以取消隐藏组件的操作。 在隐藏组件之后触发 ' hide' 事件。 如果组件被配置成 hidden 那么此方法在内部被调用。
参数:
  • 无。
返回值:
  • Ext.Component
    this
Component
isVisible () : Boolean
如果当前组件可见，返回true。
如果当前组件可见，返回true。
参数:
  • 无。
返回值:
  • Boolean
    如果当前组件可见，返回true，其它返回false。
Component
isXType ( String xtype , [ Boolean shallow ] ) : Boolean
Tests whether or not this Component is of a specific xtype. This can test whether this Component is descended from th...

测试此组件是否是指定的xtype。此方法既可以测试是否是指定的xtype的某个子类， 或者它是否直接是指定的xtype类(shallow=true)。

如果使用你自己的子类，必须知道组件必须注册它的xtype值。

所有可用的xtype列表，参见 Ext.Component 类头部。

示例用法:

var t = new Ext.form.TextField();
var isText = t.isXType('textfield');        // true
var isBoxSubclass = t.isXType('box');       // true, descended from BoxComponent
var isBoxInstance = t.isXType('box', true); // false, not a direct BoxComponent instance
参数:
  • xtype : String
    需要为当前组件进行检测的xtype
  • shallow : Boolean
    (可选) 如果为false，检测组件是否是xtype继承树中的某个子类（默认是这种情况）， 如果为true，只检测组件是否是指定的xtype类型。
返回值:
  • Boolean
    如果当前组件是指定xtype的子类，返回true，其它返回flase。
Component
mon ( Observable|Element item , Object|String ename , Function fn , Object scope , Object opt ) : void
向任何Observable对象(或者元素)上添加监听器，监听器将会在组件...

向任何Observable对象(或者元素)上添加监听器，监听器将会在组件销毁时被自动删除。
用法：

myGridPanel.mon(myGridPanel.getSelectionModel(), 'selectionchange', handleSelectionChange, null, {buffer: 50});

or:

myGridPanel.mon(myGridPanel.getSelectionModel(), {
    selectionchange: handleSelectionChange,
    buffer: 50
});
参数:
  • item : Observable|Element
    需要添加listener/listeners的项目。
  • ename : Object|String
    事件名，或者一个包含事件名属性的对象。
  • fn : Function
    (可选) 如果 ename 参数是一个事件名，此参数为处理函数。
  • scope : Object
    (可选)如果 ename 参数是一个事件名称，此参数是作用域 ( this 引用)，监听函数将会在此作用域中被执行。
  • opt : Object
    (可选)如果 ename 参数是一个事件名称， 此参数是 addListener 配置项。
返回值:
  • void
Component
mun ( Observable|Element item , Object|String ename , Function fn , Object scope ) : void
删除通过mon 方法添加的监听器。
删除通过mon 方法添加的监听器。
参数:
  • item : Observable|Element
    需要删除listener/listeners的项目。
  • ename : Object|String
    事件名称，或者一个包含事件名称属性的对象。
  • fn : Function
    (可选)如果 ename 参数是一个事件名称，此参数是一个处理函数。
  • scope : Object
    (可选)如果 ename 参数是一个事件名称，此参数是作用域 ( this 引用)，监听函数将会在此作用域中被执行。
返回值:
  • void
Component
nextSibling () : Ext.Component
返回所属容器中的下一个组件
返回所属容器中的下一个组件
参数:
  • 无。
返回值:
  • Ext.Component
Component
on( String eventName, Function handler, [Object scope], [Object options] ) : void
给对象添加事件处理器 (addListener的简写形式)
给对象添加事件处理器 (addListener的简写形式。)
参数:
  • eventName : String
    监听的事件类型
  • handler : Function
    事件调用的方法
  • scope : Object
    （可选）处理方法执行时的作用域 (this 的引用)。 如果被忽略。默认为触发事件的对象。
  • options : Object
    可选 包含处理器配置的对象。
返回值:
  • void
Observable
previousSibling () : Ext.Component
返回所属容器中的前一个组件
返回所属容器中的前一个组件
参数:
  • 无。
返回值:
  • Ext.Component
Component
purgeListeners() : void
移除对象上所有的监听器
移除对象上所有的监听器
参数:
  • 无。
返回值:
  • void
Observable
realign ( [ Boolean autoSize ] ) : void
根据当前的配置值重新调整编辑器绑定的字段。
根据当前的配置值重新调整编辑器绑定的字段。
参数:
  • autoSize : Boolean
    (可选) 值为true字段的大小使用绑定元素的尺寸
返回值:
  • void
Editor
relayEvents( Object o, Array events ) : void
从指定的Observable上传递选择的事件就好像被当前对象触发一样。
从指定的Observable上传递选择的事件就好像被当前对象触发一样。
参数:
  • o : Object
    该Observable上的事件被当前对象传递。
  • events : Array
    传递的数组名。
返回值:
  • void
Observable
removeClass ( string cls ) : Ext.Component
从组件底层的元素上删除一个CSS类。
从组件底层的元素上删除一个CSS类。
参数:
  • cls : string
    需要移除的CSS类名
返回值:
  • Ext.Component
    this
Component
removeListener( String eventName, Function handler, [Object scope] ) : void
删除一个事件处理器。
删除一个事件处理器。
参数:
  • eventName : String
    处理器关联的事件类型。
  • handler : Function
    移除的处理器。 这应该是传递到addListener里的方法的引用。
  • scope : Object
    （可选）处理器指定的初始作用域。
返回值:
  • void
Observable
render ( [ Element/HTMLElement/String container ], [ String/Number position ] ) : void
在传递进来的HTML元素中渲染当前组件。...

在传递进来的HTML元素中渲染当前组件。

如果你正在使用一个Container 对象放置当前组件，那么请不要使用render方法。

当容器第一次被渲染时，它的子组件将会被容器的 layout 管理器渲染。

某些布局管理器允许动态添加子组件。它们包括 Ext.layout.CardLayout, Ext.layout.AnchorLayout, Ext.layout.FormLayout, Ext.layout.TableLayout。

当一个新的子组件被添加时，如果容器已经被渲染了， 你可能需要调用容器的 doLayout 方法来刷新视图，它将导致所有没有被渲染的子组件进行渲染操作。 此操作是必须的，这样你可以添加多个子组件而只刷新一次layout。

当创建复杂的UI时，非常重要的一点是，请记住调整子项目的尺寸和位置是容器的 layout 管理器的职责。 如果你希望子项目的尺寸对用户交互作出反应， 你必须为容器配置一个布局管理器，它将创建和管理你心里想要的那种布局。

忽略容器的layout 配置意味着将会使用一个基本的布局管理器，它除了按次序把子组件 渲染到容器中之外什么事情都不做。 这种情况下，任何尺寸和位置的调整操作都不会发生。

参数:
  • container : Element/HTMLElement/String
    (可选) 需要在其中渲染当前组件的元素。 如果它是从一个已存在的标签中创建的，此参数应该被忽略。
  • position : String/Number
    (可选) 容器中的一个元素ID或者一个DOM节点索引， 当前组件将会被插入到它前面 (默认append到容器的尾部)
返回值:
  • void
Component
resumeEvents() : void
重新开始触发事件。(参见suspendEvents) 如果事件以queueSuspended参数被挂起，则在事件被挂起时 ...
重新开始触发事件。(参见 suspendEvents) 如果事件以queueSuspended 参数被挂起，则在事件被挂起时触发的事件会被传递到所有的监听器上
参数:
  • 无。
返回值:
  • void
Observable
setDisabled ( Boolean disabled ) : Ext.Component
工具函数，使用布尔值设置有效/无效(disabled/enabled )。
工具函数，使用布尔值设置有效/无效(disabled/enabled )。
参数:
  • disabled : Boolean
返回值:
  • Ext.Component
    this
Component
setSize ( Number width , Number height ) : void
设置编辑器的高和宽。
设置编辑器的高和宽。
参数:
  • width : Number
    The new width
  • height : Number
    The new height
返回值:
  • void
Editor
setValue ( Mixed value ) : void
设置编辑器的数据值
设置编辑器的数据值
参数:
  • value : Mixed
    该字段支持的任意值
返回值:
  • void
Editor
setVisible ( Boolean visible ) : Ext.Component
工具方法，通过使用布尔值隐藏或者显示当前组件。
工具方法，通过使用布尔值隐藏或者显示当前组件。
参数:
  • visible : Boolean
    true时显示，false时隐藏
返回值:
  • Ext.Component
    this
Component
show () : Ext.Component
显示当前组件。监听' beforeshow' 事件，返回 false 取消显示组件...
显示当前组件。监听' beforeshow' 事件，返回 false 取消显示组件。在显示组件之后触发' show' 事件。
参数:
  • 无。
返回值:
  • Ext.Component
    this
Component
startEdit ( Mixed el , [ String value ] ) : void
开始编辑并显示编辑器。
开始编辑并显示编辑器。
参数:
  • el : Mixed
    The element to edit
  • value : String
    (可选) 编辑器初始化的值。如果不设置值，它默认为el的innerHTML。
返回值:
  • void
Editor
suspendEvents( Boolean queueSuspended ) : void
暂停触发所有的事件。 (参看resumeEvents)
暂停触发所有的事件。（参看 resumeEvents)
参数:
  • queueSuspended : Boolean
    如果传递为true则排列好暂停的事件使得在调用 resumeEvents 后再触发它们，而不是抛弃所有暂停的事件。
返回值:
  • void
Observable
triggerEdit ( node {Ext.tree.TreeNode} ) : void
编辑经过的树节点的文本
编辑经过的树节点的文本 TreeNode.
参数:
  • {Ext.tree.TreeNode} : node
    要编辑的树节点。它必须 editable.
返回值:
  • void
TreeEditor
un( String eventName, Function handler, [Object scope] ) : void
删除一个事件处理器(removeListener方法的简写形式)
删除一个事件处理器(removeListener方法的简写形式。)
参数:
  • eventName : String
    处理器关联的事件类型
  • handler : Function
    被删除的处理器 这应该是传入 addListener 中的方法的引用。
  • scope : Object
    （可选）为处理器指定的初始作用域。
返回值:
  • void
Observable
update ( Mixed htmlOrData , [ Boolean loadScripts ], [ Function callback ] ) : void
刷新组件的内部区域。
刷新组件的内部区域。
参数:
  • htmlOrData : Mixed
    如果已经通过tpl为当前组件配置了一个模板，那么 将会使用此参数来装配模板。 如果没有为当前组件配置模板，组件的内容区域将会通过Ext.Element 进行刷新。
  • loadScripts : Boolean
    (可选)只用在使用html配置时此参数才合法。默认为false。
  • callback : Function
    (可选)只用在使用html配置时此参数才合法。 当脚本加载完成时回调函数才被执行。
返回值:
  • void
Component

公共事件

Event Defined By
added : ( Ext.Component this , Ext.Container ownerCt , number index )
当一个组件被添加到一个Ext.Container时触发
当一个组件被添加到一个Ext.Container时触发
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • ownerCt : Ext.Container
    用于组件的容器
  • index : number
    添加组件的位置
Component
afterrender : ( Ext.Component this )
在组件渲染完成之后触发...

在组件渲染完成之后触发。

afterrender事件在当前组件被rendered 结束之后、在为组件定义的所有afterRender方法执行之后 触发，并且，如果有stateful， 也在状态被保存之后才触发。

监听器将会以如下参数格式被调用:
  • this : Ext.Component
Component
beforecomplete : ( Editor this , Mixed value , Mixed startValue )
当输入栏的值发生变化之后，但是在改变的值被反应到底层的输入栏之前触发...
当输入栏的值发生变化之后，但是在改变的值被反应到底层的输入栏之前触发。可以在此事件的监听器中返回一个false取消保存改变的值。 注意:如果该值并没有改变，ignoreNoChange = true时，仍然会结束编辑，但这个事件将不会触发，因为并没有真正的编辑。
监听器将会以如下的参数格式调用:
  • this : Editor
  • value : Mixed
    当前字段值
  • startValue : Mixed
    原来的字段值
Editor
beforedestroy : ( Ext.Component this )
在组件 destroyed 之前触发。 在事件监听器中返回false以停止 destroy 操作。
在组件 destroyed 之前触发。 在事件监听器中返回false以停止 destroy 操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforehide : ( Ext.Component this )
在调用hide方法隐藏组件之前触发。 在事件监听器中返回false可以停止隐藏操作。
在调用hide方法隐藏组件之前触发。 在事件监听器中返回false可以停止隐藏操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforerender : ( Ext.Component this )
在组件被rendered 之前触发。 在事件监听器中返回false可以停止render 操作。
在组件被rendered 之前触发。 在事件监听器中返回false可以停止render 操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforeshow : ( Ext.Component this )
在调用show()方法现实组件之前触发。 事件处理函数返回false可以停止show。
在调用show 方法现实组件之前触发。 事件处理函数返回false可以停止show。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforestartedit : ( Editor this , Ext.Element boundEl , Mixed value )
在开始编辑，并在值发生变化之前触发。可以在此事件的监听器中...
在开始编辑，并在值发生变化之前触发。可以在此事件的监听器中返回false来取消编辑。
监听器将会以如下的参数格式调用:
  • this : Editor
  • boundEl : Ext.Element
    该编辑器所绑定的基本元素
  • value : Mixed
    The field value being set
Editor
beforestaterestore : ( Ext.Component this , Object state )
在组件状态恢复之前触发。返回false停止恢复状态操作。
在组件状态恢复之前触发。返回false停止恢复状态操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    StateProvider返回的状态哈希值。 如果没有禁止此事件，那么状态对象会被传递给applyState。 默认情况下，这样简单地把属性值拷贝到当前组件中。 可以覆盖此方法以提供自定的状态恢复操作。
Component
beforestatesave : ( Ext.Component this , Object state )
在组件状态被保存到配置的状态提供者之前触发。 返回false可以停止保存。
在组件状态被保存到配置的状态提供者之前触发。 返回false可以停止保存。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    状态值哈希。 这由在组件上调用getState() 方法决定。 此方法必须由开发者提供，返回是否需要对状态进行描述，默认情况下， Ext.Component有一个空实现。
Component
canceledit : ( Editor this , Mixed value , Mixed startValue )
在退出编辑状态并且编辑的值被重置之后触发。
在退出编辑状态并且编辑的值被重置之后触发。
监听器将会以如下的参数格式调用:
  • this : Editor
  • value : Mixed
    用户输入的被放弃的字段值
  • startValue : Mixed
    取消编辑后被设置回来的原始字段值
Editor
complete : ( Editor this , Mixed value , Mixed startValue )
当编辑完成过后，且被改变过的值被设置到所属字段后触发。
当编辑完成过后，且被改变过的值被设置到所属字段后触发。
监听器将会以如下的参数格式调用:
  • this : Editor
  • value : Mixed
    当前字段值
  • startValue : Mixed
    原来的字段值
Editor
destroy : ( Ext.Component this )
在组件被销毁之后触发。
在组件被destroyed之后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
disable : ( Ext.Component this )
在组件被设置为无效状态后触发。
在组件被设置为无效状态后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
enable : ( Ext.Component this )
当组件被设置为有效(enabled)之后触发。
当组件被设置为有效(enabled)之后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
hide : ( Ext.Component this )
在组件被隐藏之后触发。 当调用hide 方法隐藏组件之后触发。
在组件被隐藏之后触发。 当调用hide 方法隐藏组件之后触发。
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
removed : ( Ext.Component this , Ext.Container ownerCt )
当一个组件被从Ext.Container容器中删除时触发
当一个组件被从Ext.Container容器中删除时触发
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • ownerCt : Ext.Container
    持有组件的容器
Component
render : ( Ext.Component this )
在组件被渲染之后触发。
在组件被 rendered(渲染) 之后触发。
监听器将以如下的参数格式被调用:
  • this : Ext.Component
Component
show : ( Ext.Component this )
在调用show 方法显示组件之后触发。
在调用show 方法显示组件之后触发。
监听器将会用如下的参数格式被调用:
  • this : Ext.Component
Component
specialkey : ( Ext.form.Field this , Ext.EventObject e )
任何相关的导航键（箭头，制表符，回车，ESC键，等）被按下时触发。你可以...
任何相关的导航键（箭头，制表符，回车，ESC键，等）被按下时触发。你可以使用Ext.EventObject.getKey来检测哪些键被按下。
监听器将会以如下的参数格式调用:
  • this : Ext.form.Field
  • e : Ext.EventObject
    The event object
Editor
startedit : ( Ext.Element boundEl , Mixed value )
当编辑器显示时触发
当编辑器显示时触发
监听器将会以如下的参数格式调用:
  • boundEl : Ext.Element
    该编辑器的基本元素
  • value : Mixed
    The starting field value
Editor
staterestore : ( Ext.Component this , Object state )
组件状态被存储之后触发。
组件状态被存储之后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    StateProvider返回的状态哈希值。 如果没有禁止此事件，那么状态对象会被传递给applyState。 默认情况下，这样简单地把属性值拷贝到当前组件中。 可以覆盖此方法以提供自定的状态恢复操作。
Component
statesave : ( Ext.Component this , Object state )
在组件状态被保存到所配置的状态提供者之后触发。
在组件状态被保存到所配置的状态提供者之后触发。
监听器将会用如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    状态值hash。 这是由在足见上调用getState() 方法决定的。 开发者必须提供此方法以返回是否需要恢复状态，默认情况下， Ext.Component有一个空实现。
Component


Class Ext.tree.TreeFilter

包: | Ext.tree
定义类的文件: | TreeFilter.js
类: | TreeFilter
继承自: | Object
注意：这是一个实验性质的类，不会update节点的缩进或者展开图标。

公共属性

该类没有公共属性。

公共方法

Method Defined By
clear () : void
清除当前的filter。注意：在"remove"配置项中可以设置一个filter不能被清除。
清除当前的filter。注意：在"remove"配置项中可以设置一个filter不能被清除。
参数:
  • 无。
返回值:
  • void
TreeFilter
filter ( String/RegExp value , [ String attr ], [ TreeNode startNode ] ) : void
使用指定的参数过滤数据。
使用指定的参数过滤数据。
参数:
  • value : String/RegExp
    要么是一个字符串，属性值必须以此字符串开始，要么是用来匹配属性的一个RegExp
  • attr : String
    可选 被传递到你的节点属性集合的属性。默认为"text"。
  • startNode : TreeNode
    可选 开始过滤的起始节点。
返回值:
  • void
TreeFilter
filterBy ( Function fn , [ Object scope ] ) : void
使用一个函数进行过拉。传递进来的方法将会使用树中的每一个节点调用（或者从startNode开始）。 如果传递进来的方法返回true，节点被保留，否则它被过滤掉...
使用一个函数进行过拉。传递进来的方法将会使用树中的每一个节点调用（或者从startNode开始）。 如果传递进来的方法返回true，节点被保留，否则它被过滤掉。 如果一个节点被过滤掉，那么它的孩子也被过滤掉。
参数:
  • fn : Function
    The filter function
  • scope : Object
    可选 方法的作用域(默认值为当前节点)
返回值:
  • void
TreeFilter

公共事件

该类没有公共事件。


Observable
    TreeLoader

Class Ext.tree.TreeLoader

包: | Ext.tree
定义类的文件: | TreeLoader.js
类: | TreeLoader
继承自: | Observable
TreeLoader提供从指定的URL，对 Ext.tree.TreeNode's 的孩子节点进行懒加载操作。 响应必须是一个JavaScript Array，它的元素必须是节点定义对象。例如：
            [{
        id: 1,
        text: 'A leaf Node',
        leaf: true
    },{
        id: 2,
        text: 'A folder Node',
        children: [{
            id: 3,
            text: 'A child Node',
            leaf: true
        }]
   }]

只有当一个节点展开时，才发出请求去加载孩子节点。 所加载节点的id将使用"node"做为参数名称被传递给服务器， 服务器将根据此参数产生孩子节点。

如果需要传递额外的参数，可以为"beforeload"事件添加一个事件处理器， 并将参数添加到TreeLoader的baseParams属性：
            myTreeLoader.on("beforeload", function(treeLoader, node) {
        this.baseParams.category = node.attributes.category;
    }, this);
这将传递一个名为"category"的HTTP参数给服务器，其中包含了节点的"category"属性。

配置项

Config Options Defined By
baseAttrs : Object
一个包含属性的对象，此对象将被添加到加载器所加载的所有节点中...
(可选)一个包含属性的对象，此对象将被添加到加载器所加载的所有节点中。 如果从服务器传回的值中包含了相同的属性，则它们优先使用。
TreeLoader
baseParams : Object
一个包含参数的对象，子节点发送的每个HTTP请求中都将包含此参数。
TreeLoader
clearOnLoad : Boolean
默认为true。 在加载之前删除之前存在的所有孩子节点。
TreeLoader
dataUrl : String
加载Json字符串的URL，此Json字符串描述了一个节点定义数组：所有需要加载的孩子节点。
加载Json字符串的URL，此Json字符串描述了一个节点定义数组：所有需要加载的孩子节点。
TreeLoader
directFn : Function
当执行请求时调用的函数
TreeLoader
listeners : Object
一个包含一个或多个事件处理器的配置对象，会在初始化的时候被添加到目标对象上...

一个包含一个或多个事件处理器的配置对象，会在初始化的时候被添加到目标对象上。 该配置对象应该是一个有效的监听器配置对象就像 addListener例子中指定的一样可一次附加多个处理器。

ExtJs Components上的DOM事件

一些 ExtJs Component 类导出时会选择一些DOM事件(例如 "click", "mouseover" 等等), 这通常只是在有额外的值可以被添加时发生。例如DataView类的 click事件会传递被点击的节点。也可以直接在Component的HTMLElementevent上访问DOM事件，但必需在Component被渲染后监听器才能添加到Element 上。可以按照以下步骤添加插件:

// 插件会用一个监听器配置对象进行配置。
//该组件会被添加到所有处理方法的参数列表上。
Ext.DomObserver = Ext.extend(Object, {
    constructor: function(config) {
        this.listeners = config.listeners ? config.listeners : config;
    },

    // 组件将自己传递进了插件的初始化方法里
    init: function(c) {
        var p, l = this.listeners;
        for (p in l) {
            if (Ext.isFunction(l[p])) {
                l[p] = this.createHandler(l[p], c);
            } else {
                l[p].fn = this.createHandler(l[p].fn, c);
            }
        }

        // 渲染后立即添加监听器到元素上
        c.render = c.render.createSequence(function() {
            var e = c.getEl();
            if (e) {
                e.on(l);
            }
        });
    },

    createHandler: function(fn, c) {
        return function(e) {
            fn.call(this, e, c);
        };
    }
});

var combo = new Ext.form.ComboBox({

    // 元素被点击后折叠
    plugins: [ new Ext.DomObserver({
        click: function(evt, comp) {
            comp.collapse();
        }
    })],
    store: myStore,
    typeAhead: true,
    mode: 'local',
    triggerAction: 'all'
});

Observable
nodeParameter : String
The name of the parameter sent to the server which contains the identifier of the node. 默认是 'node'.
TreeLoader
paramOrder : Array/String
默认是 undefined. Only used when using directFn. Specifies the params in the order in which they must be passed ...
默认是 undefined. Only used when using directFn. Specifies the params in the order in which they must be passed to the server-side Direct method as either (1) an Array of String values, or (2) a String of params delimited by either whitespace, comma, or pipe. For example, any of the following would be acceptable:
                                nodeParameter: 'node',
paramOrder: ['param1','param2','param3']
paramOrder: 'node param1 param2 param3'
paramOrder: 'param1,node,param2,param3'
paramOrder: 'param1|param2|param|node'
TreeLoader
paramsAsHash : Boolean
Only used when using directFn. Send parameters as a collection of named arguments (defaults to false). Providing a pa...
Only used when using directFn. Send parameters as a collection of named arguments (defaults to false). Providing a paramOrder nullifies this configuration.
TreeLoader
preloadChildren : Boolean
如果设置为true，加载器在加载完第一个节点之后将递归地调用孩子节点。
TreeLoader
requestMethod : String
加载数据是用的HTTP请求方式 (默认值为 the value of Ext.Ajax.method).
TreeLoader
uiProviders : Object
一个包含属性的对象， 指定了一个定制的实现...
An object containing properties which specify custom Ext.tree.TreeNodeUI 一个包含属性的对象， 指定了一个定制的 Ext.tree.TreeNodeUI 实现。 如果返回的孩子节点的可选uiProvider 属性是一个字符串， 而不是一个TreeNodeUI的引用， 那么这个字符串值将被用作uiProviders对象的名字。
TreeLoader
url : String
等价于 dataUrl.
TreeLoader

公共属性

该类没有公共属性。

公共方法

Method Defined By
TreeLoader ( Object config )
创建一个新的树加载器
创建一个新的树加载器
参数:
  • config : Object
    一个包含配置属性的配置对象
返回值:
  • void
TreeLoader
addEvents( Object|String o, string Optional. ) : void
添加指定的事件到事件列表上，事件会被该Observable触发。
添加指定的事件到事件列表上，事件会被该Observable触发。
参数:
  • o : Object|String
    以事件名作为属性true作为值的对象 或者当多个事件名被分开的传递时则为第一个事件名。
  • Optional. : string
    事件名被分开的传递时则为事件名。 用法:
    this.addEvents('storeloaded', 'storecleared');
返回值:
  • void
Observable
addListener( String eventName, Function handler, [Object scope], [Object options] ) : void
给对象添加事件处理器。
给对象添加事件处理器。
参数:
  • eventName : String
    监听的事件名。
  • handler : Function
    事件调用的方法
  • scope : Object
    （可选）处理方法执行的作用域 (this的引用 reference)。 如果被忽略。默认为触发事件的对象。
  • options : Object
    （可选）包含处理器配置和属性的对象。 可能包含以下的属性:
    • scope : Object
      处理方法执行的作用域(this的引用) 。 如果被忽略。默认为触发事件的对象。
    • delay : Number
      在触发事件后延迟调用处理器的毫秒数。
    • single : Boolean
      如果为True则添加一个处理器来处理下一次的事件触发（仅一次），然后移除自己。
    • buffer : Number
      使得处理器延迟指定毫秒数后预定的运行在 一个Ext.util.DelayedTask中 。 如果事件在时间内再一次被触发，原始的处理器不会被调用，但是新的处理器会预定的在他的位置上。
    • target : Observable
      如果事件在目标的Observable上触发则仅仅调用处理器， 否则 事件会从子类的Observable上冒泡

    组合选项
    使用这些选项参数,可能会组合出不同类型的监听器：

    一个延迟的，一次性的监听器。

    myDataView.on('click', this.onClick, this, {
single: true,
delay: 100
});

    一次调用附加多个处理器
    该方法同样支持传递一个包含指定的多个处理器的属性的配置对象参数。

    myGridPanel.on({
'click' : {
    fn: this.onClick,
    scope: this,
    delay: 100
},
'mouseover' : {
    fn: this.onMouseOver,
    scope: this
},
'mouseout' : {
    fn: this.onMouseOut,
    scope: this
}
});

    或者一个简写的语法：

    myGridPanel.on({
'click' : this.onClick,
'mouseover' : this.onMouseOver,
'mouseout' : this.onMouseOut,
 scope: this
});
返回值:
  • void
Observable
createNode ( attr {Object} ) : void
重写此方法以提供定制的TreeNode实现

重写此方法以提供定制的TreeNode实现

Example:

                                    new Ext.tree.TreePanel({
    ...
    loader: new Ext.tree.TreeLoader({
        url: 'dataUrl',
        createNode: function(attr) {
//          Allow consolidation consignments to have
//          consignments dropped into them.
            if (attr.isConsolidation) {
                attr.iconCls = 'x-consol',
                attr.allowDrop = true;
            }
            return Ext.tree.TreeLoader.prototype.createNode.call(this, attr);
        }
    }),
    ...
});
参数:
  • {Object} : attr
    创建新节点的属性
返回值:
  • void
TreeLoader
enableBubble( String/Array events ) :void
是否现在使得事件会被该Observable触发并调用 this.getBubbleTarget()方法在拥有者的继承树...

是否现在使得事件会被该Observable触发并调用 this.getBubbleTarget()方法在拥有者的继承树中冒泡。Observable的基础类中没有该方法的实现。

该方法一般被Ext.Components用来冒泡事件到拥有者的容器。参看Ext.Component.getBubbleTarget默认的实现 在Ext.Component中返回组件的直接拥有者。但是如果需要的是一个已知的目标，该方法可以被重写来更快的访问需求的目标。

例子:

Ext.override(Ext.form.Field, {
    // 添加方法到Field的initComponent上改变事件为冒泡
    initComponent : Ext.form.Field.prototype.initComponent.createSequence(function() {
        this.enableBubble('change');
    }),

    // 我们知道我们想让Field的事件冒泡到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() {
            // 如果样式被修改标题会变红。
            myForm.header.setStyle('color', 'red');
        }
    }
});
参数:
  • events : String/Array
    冒泡的事件名，或事件名数组
返回值:
  • void
Observable
fireEvent( String eventName, Object... args ) : Boolean
用传入的参数触发指定的事件 (减去事件名)。 一个事件可以被设置为冒泡 Obse...

用传入的参数触发指定的事件 (减去事件名)。

一个事件可以被设置为冒泡到Observable父类继承树(参看 Ext.Component.getBubbleTarget) 调用enableBubble实现。

参数:
  • eventName : String
    触发的事件名。
  • args : Object...
    传递给处理器的可变长度参数。
返回值:
  • Boolean
    如果有任何的处理器返回false则返回false，否则返回true。
Observable
hasListener( String eventName ) : Boolean
检测对象是否包含指定事件的任何监听器
检测对象是否包含指定事件的任何监听器
参数:
  • eventName : String
    检测的事件名
返回值:
  • Boolean
    如果事件被监听则为true，否则为false
Observable
load ( Ext.tree.TreeNode node , Function callback , Object scope ) : void
从构造器指定的URL中加载一个Ext.tree.TreeNode。当节点展开时，此方法将被自动调用， 但是也可以用来重新加载一个节点...
从构造器指定的URL中加载一个Ext.tree.TreeNode 。 当节点展开时，此方法将被自动调用， 但是也可以用来重新加载一个节点(如果clearOnLoad 选项为false，也可以用来添加新的孩子。)
参数:
  • node : Ext.tree.TreeNode
  • callback : Function
    在该节点被加载后回调的函数。 The function is passed the TreeNode which was requested to be loaded.
  • scope : Object
    The scope ( this reference) in which the callback is executed. 默认是加载的树节点
返回值:
  • void
TreeLoader
on( String eventName, Function handler, [Object scope], [Object options] ) : void
给对象添加事件处理器 (addListener的简写形式)
给对象添加事件处理器 (addListener的简写形式。)
参数:
  • eventName : String
    监听的事件类型
  • handler : Function
    事件调用的方法
  • scope : Object
    （可选）处理方法执行时的作用域 (this 的引用)。 如果被忽略。默认为触发事件的对象。
  • options : Object
    可选 包含处理器配置的对象。
返回值:
  • void
Observable
purgeListeners() : void
移除对象上所有的监听器
移除对象上所有的监听器
参数:
  • 无。
返回值:
  • void
Observable
relayEvents( Object o, Array events ) : void
从指定的Observable上传递选择的事件就好像被当前对象触发一样。
从指定的Observable上传递选择的事件就好像被当前对象触发一样。
参数:
  • o : Object
    该Observable上的事件被当前对象传递。
  • events : Array
    传递的数组名。
返回值:
  • void
Observable
removeListener( String eventName, Function handler, [Object scope] ) : void
删除一个事件处理器。
删除一个事件处理器。
参数:
  • eventName : String
    处理器关联的事件类型。
  • handler : Function
    移除的处理器。 这应该是传递到addListener里的方法的引用。
  • scope : Object
    （可选）处理器指定的初始作用域。
返回值:
  • void
Observable
resumeEvents() : void
重新开始触发事件。(参见suspendEvents) 如果事件以queueSuspended参数被挂起，则在事件被挂起时 ...
重新开始触发事件。(参见 suspendEvents) 如果事件以queueSuspended 参数被挂起，则在事件被挂起时触发的事件会被传递到所有的监听器上
参数:
  • 无。
返回值:
  • void
Observable
suspendEvents( Boolean queueSuspended ) : void
暂停触发所有的事件。 (参看resumeEvents)
暂停触发所有的事件。（参看 resumeEvents)
参数:
  • queueSuspended : Boolean
    如果传递为true则排列好暂停的事件使得在调用 resumeEvents 后再触发它们，而不是抛弃所有暂停的事件。
返回值:
  • void
Observable
un( String eventName, Function handler, [Object scope] ) : void
删除一个事件处理器(removeListener方法的简写形式)
删除一个事件处理器(removeListener方法的简写形式。)
参数:
  • eventName : String
    处理器关联的事件类型
  • handler : Function
    被删除的处理器 这应该是传入 addListener 中的方法的引用。
  • scope : Object
    （可选）为处理器指定的初始作用域。
返回值:
  • void
Observable

公共事件

Event Defined By
beforeload : ( Object This , Object node , Object callback )
在发出网络请求，加载一个Json文本之前触发，此Json文本秒数了一个节点的孩子节点。
在发出网络请求，加载一个Json文本之前触发，此Json文本秒数了一个节点的孩子节点。
监听器将会以如下的参数格式调用:
  • 这个 : Object
    树加载器的对象
  • node : Object
    这个 Ext.tree.TreeNode 将被加载的对象
  • callback : Object
    在调用中具体指定的回调函数 load
TreeLoader
load : ( Object This , Object node , Object response )
在节点被成功加载之后触发。
在节点被成功加载之后触发。
监听器将会以如下的参数格式调用:
  • 这个 : Object
    树加载器的对象
  • node : Object
    The Ext.tree.TreeNode object being loaded.
  • response : Object
    从服务器的包含数据的回应的对象
TreeLoader
loadexception : ( Object This , Object node , Object response )
在提交网络请求失败时触发
在提交网络请求失败时触发
监听器将会以如下的参数格式调用:
  • 这个 : Object
    树加载器的对象
  • node : Object
    这个 Ext.tree.TreeNode 被加载的对象
  • response : Object
    从服务器的包含数据的回应的对象
TreeLoader


Observable
    Node
      TreeNode

Class Ext.tree.TreeNode

包: | Ext.tree
定义类的文件: | TreeNode.js
类: | TreeNode
子类: | AsyncTreeNode
继承自: | Node

配置项

Config Options Defined By
allowChildren : Boolean
设置为false将不允许此节点有孩子节点 (默认值为 true)
TreeNode
allowDrag : Boolean
如果draggable = true (默认值为 true)，设置此项为false将使得此节点不可拖拽。
TreeNode
allowDrop : Boolean
如果不可以把孩子节点拖动到此节点上，设置为false (默认值为 true)
TreeNode
checked : Boolean
设置为true将为此节点渲染一个选中状态复选框， false将渲染一个未选中的复选框...
设置为true将为此节点渲染一个选中状态复选框， false将渲染一个未选中的复选框 (默认值为 undefined ，没有复选框)
TreeNode
cls : String
添加到节点的CSS类
TreeNode
disabled : Boolean
当节点的文本改变时触发
TreeNode
draggable : Boolean
设置为true使节点可以拖拽(默认值为 false)
TreeNode
editable : Boolean
可以编辑节点 Ext.tree.TreeEditor (默认是true)
TreeNode
expandable : Boolean
如果设置为true，此节点将一直显示一个+/-号，甚至为空的时候也显示。
TreeNode
expanded : Boolean
设置为true将开始展开节点
TreeNode
hidden : Boolean
该节点被隐藏是为true
TreeNode
href : String
此节点使用链接的URL(默认值为 #)
TreeNode
hrefTarget : String
链接的目标frame
TreeNode
icon : String
节点的图标路径。 添加图标的最佳方法是使用cls或者iconCls属性，通过CSS背景图片添加图标
节点的图标路径。 添加图标的最佳方法是使用cls或者iconCls属性，通过CSS背景图片添加图标。
TreeNode
iconCls : String
一个添加到节点图标元素的CSS类，以应用CSS背景图片
TreeNode
id : String
节点编号
Node
isTarget : Boolean
设置为false将不允许此节点成为拖拽的目标(默认值为 true)
TreeNode
leaf : Boolean
如果当前节点是一个叶子节点，并且没有孩子节点，则为true。
Node
listeners : Object
一个包含一个或多个事件处理器的配置对象，会在初始化的时候被添加到目标对象上...

一个包含一个或多个事件处理器的配置对象，会在初始化的时候被添加到目标对象上。 该配置对象应该是一个有效的监听器配置对象就像 addListener例子中指定的一样可一次附加多个处理器。

ExtJs Components上的DOM事件

一些 ExtJs Component 类导出时会选择一些DOM事件(例如 "click", "mouseover" 等等), 这通常只是在有额外的值可以被添加时发生。例如DataView类的 click事件会传递被点击的节点。也可以直接在Component的HTMLElementevent上访问DOM事件，但必需在Component被渲染后监听器才能添加到Element 上。可以按照以下步骤添加插件:

// 插件会用一个监听器配置对象进行配置。
//该组件会被添加到所有处理方法的参数列表上。
Ext.DomObserver = Ext.extend(Object, {
    constructor: function(config) {
        this.listeners = config.listeners ? config.listeners : config;
    },

    // 组件将自己传递进了插件的初始化方法里
    init: function(c) {
        var p, l = this.listeners;
        for (p in l) {
            if (Ext.isFunction(l[p])) {
                l[p] = this.createHandler(l[p], c);
            } else {
                l[p].fn = this.createHandler(l[p].fn, c);
            }
        }

        // 渲染后立即添加监听器到元素上
        c.render = c.render.createSequence(function() {
            var e = c.getEl();
            if (e) {
                e.on(l);
            }
        });
    },

    createHandler: function(fn, c) {
        return function(e) {
            fn.call(this, e, c);
        };
    }
});

var combo = new Ext.form.ComboBox({

    // 元素被点击后折叠
    plugins: [ new Ext.DomObserver({
        click: function(evt, comp) {
            comp.collapse();
        }
    })],
    store: myStore,
    typeAhead: true,
    mode: 'local',
    triggerAction: 'all'
});

Observable
qtip : String
节点使用的一个Ext QuickTip
TreeNode
qtipCfg : String
此节点的一个Ext QuickTip配置(用来代替qtip)
TreeNode
singleClickExpand : Boolean
设置为true在单击时展开节点。
TreeNode
text : String
只读属性。此节点的文本。使用setText()方法改变它。 setText .
TreeNode
uiProvider : Function
此节点使用的 UI class (默认值为 Ext.tree.TreeNodeUI)
TreeNode

公共属性

Property |  | Defined By
 | attributes : Object 提供给节点的参数。你可以使用这个属性来访问你提供的任何特定参数。 | Node
 | childNodes : Array 当前节点的所有孩子节点。 | Node
 | disabled : Boolean 当节点的文本改变时触发 | TreeNode
 | firstChild : Node 当前节点的第一个直接的孩子节点，如果当前节点没有孩子，则为null。 | Node
 | hidden : Boolean 该节点被隐藏是为true | TreeNode
 | id : String 节点编号 | Node
 | lastChild : Node 当前节点的最后一个直接的孩子节点，如果当前节点没有孩子节点，则为null。 | Node
 | nextSibling : Node 树中最靠近当前节点的下一个节点， 如果不存在兄弟节点，则此值为null。 | Node
 | parentNode : Node 当前节点的父节点 | Node
 | previousSibling : Node 树中最靠近当前节点的前一个节点， 如果不存在兄弟节点，则此值为null。 | Node
 | text : String 只读属性。此节点的文本。使用setText()方法改变它。 setText . | TreeNode
 | ui : TreeNodeUI 只读属性。 节点的UI。 | TreeNode

公共方法

Method Defined By
TreeNode ( Object/String attributes )
参数:
  • attributes : Object/String
    为这个节点的属性或配置或仅是文本字符串
返回值:
  • void
TreeNode
addEvents( Object|String o, string Optional. ) : void
添加指定的事件到事件列表上，事件会被该Observable触发。
添加指定的事件到事件列表上，事件会被该Observable触发。
参数:
  • o : Object|String
    以事件名作为属性true作为值的对象 或者当多个事件名被分开的传递时则为第一个事件名。
  • Optional. : string
    事件名被分开的传递时则为事件名。 用法:
    this.addEvents('storeloaded', 'storecleared');
返回值:
  • void
Observable
addListener( String eventName, Function handler, [Object scope], [Object options] ) : void
给对象添加事件处理器。
给对象添加事件处理器。
参数:
  • eventName : String
    监听的事件名。
  • handler : Function
    事件调用的方法
  • scope : Object
    （可选）处理方法执行的作用域 (this的引用 reference)。 如果被忽略。默认为触发事件的对象。
  • options : Object
    （可选）包含处理器配置和属性的对象。 可能包含以下的属性:
    • scope : Object
      处理方法执行的作用域(this的引用) 。 如果被忽略。默认为触发事件的对象。
    • delay : Number
      在触发事件后延迟调用处理器的毫秒数。
    • single : Boolean
      如果为True则添加一个处理器来处理下一次的事件触发（仅一次），然后移除自己。
    • buffer : Number
      使得处理器延迟指定毫秒数后预定的运行在 一个Ext.util.DelayedTask中 。 如果事件在时间内再一次被触发，原始的处理器不会被调用，但是新的处理器会预定的在他的位置上。
    • target : Observable
      如果事件在目标的Observable上触发则仅仅调用处理器， 否则 事件会从子类的Observable上冒泡

    组合选项
    使用这些选项参数,可能会组合出不同类型的监听器：

    一个延迟的，一次性的监听器。

    myDataView.on('click', this.onClick, this, {
single: true,
delay: 100
});

    一次调用附加多个处理器
    该方法同样支持传递一个包含指定的多个处理器的属性的配置对象参数。

    myGridPanel.on({
'click' : {
    fn: this.onClick,
    scope: this,
    delay: 100
},
'mouseover' : {
    fn: this.onMouseOver,
    scope: this
},
'mouseout' : {
    fn: this.onMouseOut,
    scope: this
}
});

    或者一个简写的语法：

    myGridPanel.on({
'click' : this.onClick,
'mouseover' : this.onMouseOver,
'mouseout' : this.onMouseOut,
 scope: this
});
返回值:
  • void
Observable
appendChild ( Node/Array node ) : Node
添加新的节点(s)，作为当前节点的最后的孩子。
添加新的节点(s)，作为当前节点的最后的孩子。
参数:
  • node : Node/Array
    需要添加的节点数组
返回值:
  • Node
    如果添加的是单个节点，该值就是这个节点对象；如果插入的是一个数组，则该值为null
Node
bubble ( Function fn , [ Object scope ], [ Array args ] ) : void
从当前节点沿着树结构向上冒泡，对途经的每个节点调用指定的方法。 调用方法的作用域...
从当前节点沿着树结构向上冒泡，对途经的每个节点调用指定的方法。 调用方法的作用域 (this)为当前节点或者指定的作用域。 传递给方法的参数是所提供的参数或者当前节点。 如果方法在任意一个节点上返回false，则停止冒泡。
参数:
  • fn : Function
    需要调用的方法
  • scope : Object
    可选 方法的作用域(默认值为当前节点)
  • args : Array
    可选 调用方法所传递的参数(默认传递当前节点)
返回值:
  • void
Node
cascade ( Function fn , [ Object scope ], [ Array args ] ) : void
从当前节点沿树结构下落，对每个节点调用给定的方法。 调用方法的作用域 ...
从当前节点沿树结构下落，对每个节点调用给定的方法。 调用方法的作用域 (this)为当前节点或者指定的作用域。 传递给方法的参数是所提供的参数或者当前节点。 如果方法在任意一个节点上返回false，则下落操作停止在那个分支上。
参数:
  • fn : Function
    需要调用的方法
  • scope : Object
    可选 The scope ( this reference) 方法的作用域(默认值为 current node)
  • args : Array
    可选 调用方法所传递的参数(默认传递当前节点)
返回值:
  • void
Node
collapse ( [ Boolean deep ], [ Boolean anim ], [ Function callback ], [ Object scope ] ) : void
收起节点。
收起节点。
参数:
  • deep : Boolean
    可选 设置为true 将折叠起所有的孩子节点
  • anim : Boolean
    可选 false 将取消收拢
  • callback : Function
    可选 当扩展这个节点完成回调函数将会被调用(不等深扩展完成). 用该节点的一个参数
  • scope : Object
    可选 The scope ( this reference) in which the callback is executed. 默认是树节点
返回值:
  • void
TreeNode
collapseChildNodes ( [ Boolean deep ] ) : void
收起所有的孩子节点
收起所有的孩子节点
参数:
  • deep : Boolean
    可选 设置为true，将使得孩子节点也折叠起它们自己的孩子
返回值:
  • void
TreeNode
contains ( Node node ) : Boolean
如果当前节点是传递进来的节点的祖先（任何层次点），则返回true。
如果当前节点是传递进来的节点的祖先（任何层次点），则返回true。
参数:
  • node : Node
返回值:
  • Boolean
Node
destroy () : void
Destroys the node.
Destroys the node.
参数:
  • 无。
返回值:
  • void
Node
disable () : void
使当前节点无效
使当前节点无效
参数:
  • 无。
返回值:
  • void
TreeNode
eachChild ( Function fn , [ Object scope ], [ Array args ] ) : void
迭代当前节点的孩子节点，对每个节点调用指定的方法。 调用方法的作用域 ...
迭代当前节点的孩子节点，对每个节点调用指定的方法。 调用方法的作用域 (this)为当前节点或者指定的作用域。 传递给方法的参数是所提供的参数或者当前节点。 如果方法在任意一个节点上返回false，则停止迭代。
参数:
  • fn : Function
    需要调用的方法
  • scope : Object
    可选 The scope ( this reference) in which the function is executed. Defaults to the current Node in the iteration.
  • args : Array
    可选 方法的作用域(默认值为 current node)
返回值:
  • void
Node
enable () : void
启用此节点
启用此节点
参数:
  • 无。
返回值:
  • void
TreeNode
enableBubble( String/Array events ) :void
是否现在使得事件会被该Observable触发并调用 this.getBubbleTarget()方法在拥有者的继承树...

是否现在使得事件会被该Observable触发并调用 this.getBubbleTarget()方法在拥有者的继承树中冒泡。Observable的基础类中没有该方法的实现。

该方法一般被Ext.Components用来冒泡事件到拥有者的容器。参看Ext.Component.getBubbleTarget默认的实现 在Ext.Component中返回组件的直接拥有者。但是如果需要的是一个已知的目标，该方法可以被重写来更快的访问需求的目标。

例子:

Ext.override(Ext.form.Field, {
    // 添加方法到Field的initComponent上改变事件为冒泡
    initComponent : Ext.form.Field.prototype.initComponent.createSequence(function() {
        this.enableBubble('change');
    }),

    // 我们知道我们想让Field的事件冒泡到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() {
            // 如果样式被修改标题会变红。
            myForm.header.setStyle('color', 'red');
        }
    }
});
参数:
  • events : String/Array
    冒泡的事件名，或事件名数组
返回值:
  • void
Observable
ensureVisible ( [ Function callback ], [ Object scope ] ) : void
确保所有的父节点都处于展开状态，在必要时，将此节点滚动到可见区域。
确保所有的父节点都处于展开状态，在必要时，将此节点滚动到可见区域。
参数:
  • callback : Function
    可选 当节点可见是函数调用
  • scope : Object
    可选 The scope ( this reference) in which the callback is executed. 默认是这个树节点
返回值:
  • void
TreeNode
expand ( [ Boolean deep ], [ Boolean anim ], [ Function callback ], [ Object scope ] ) : void
展开当前节点。
展开当前节点。
参数:
  • deep : Boolean
    可选 设置为true，将同时展开所有的孩子节点
  • anim : Boolean
    可选 设置为false，取消默认的动画效果
  • callback : Function
    可选 当展开当前节点操作结束时回调的函数 (不等待更深的展开操作完成)。使用一个参数调用此方法：当前节点(this node)。
  • scope : Object
    可选 The scope ( this reference) in which the callback is executed. 默认是这个树节点
返回值:
  • void
TreeNode
expandChildNodes ( [ Boolean deep ] ) : void
展开所有的孩子节点
展开所有的孩子节点
参数:
  • deep : Boolean
    可选 如果孩子节点也需要展开它们自己的孩子，设置为true
返回值:
  • void
TreeNode
findChild ( String attribute , Mixed value , [ Boolean deep ] ) : Node
查找第一个孩子节点，它的某个属性具有给定的值。
查找第一个孩子节点，它的某个属性具有给定的值。
参数:
  • attribute : String
    属性名称
  • value : Mixed
    需要查找的值
  • deep : Boolean
    (Optional) True to search through nodes deeper than the immediate children
返回值:
  • Node
    查找到的孩子节点，如果没有找到则为null
Node
findChildBy ( Function fn , [ Object scope ], [ Boolean deep ] ) : Node
根据指定的方法寻找第一个孩子节点。如果传入的方法返回true，则该孩子节点为符合条件的节点。
根据指定的方法寻找第一个孩子节点。如果传入的方法返回true，则该孩子节点为符合条件的节点。
参数:
  • fn : Function
    函数必须返回 true 是否经过的节点是要求的节点
  • scope : Object
    可选 The scope ( this reference) in which the function is executed. 默认这个节点是被检测的
  • deep : Boolean
    (Optional) True to search through nodes deeper than the immediate children
返回值:
  • Node
    找到的孩子节点，如果没有找到则返回null
Node
fireEvent( String eventName, Object... args ) : Boolean
用传入的参数触发指定的事件 (减去事件名)。 一个事件可以被设置为冒泡 Obse...

用传入的参数触发指定的事件 (减去事件名)。

一个事件可以被设置为冒泡到Observable父类继承树(参看 Ext.Component.getBubbleTarget) 调用enableBubble实现。

参数:
  • eventName : String
    触发的事件名。
  • args : Object...
    传递给处理器的可变长度参数。
返回值:
  • Boolean
    如果有任何的处理器返回false则返回false，否则返回true。
Observable
getDepth () : Number
返回当前节点的深度(根节点的深度为0)
返回当前节点的深度(根节点的深度为0)
参数:
  • 无。
返回值:
  • Number
Node
getOwnerTree () : Tree
返回当前节点所在的树。
返回当前节点所在的树。
参数:
  • 无。
返回值:
  • Tree
Node
getPath ( [ String attr ] ) : String
返回当前节点的路径。该路径可以用来编程展开或者选中当前节点。
返回当前节点的路径。该路径可以用来编程展开或者选中当前节点。
参数:
  • attr : String
    可选 路径使用的参数(默认值为节点的id)
返回值:
  • String
    The path
Node
getUI () : TreeNodeUI
返回此节点的UI对象。
返回此节点的UI对象。
参数:
  • 无。
返回值:
  • TreeNodeUI
    为此节点提供用户接面的对象。 除非在{@link #uiProvider}中特别指定，否则这将是 {@link Ext.tree.TreeNodeUI}的一个实例
TreeNode
hasChildNodes () : Boolean
如果当前节点有一个或多个孩子节点，返回true，否则返回false。
如果当前节点有一个或多个孩子节点，返回true，否则返回false。
参数:
  • 无。
返回值:
  • Boolean
Node
hasListener( String eventName ) : Boolean
检测对象是否包含指定事件的任何监听器
检测对象是否包含指定事件的任何监听器
参数:
  • eventName : String
    检测的事件名
返回值:
  • Boolean
    如果事件被监听则为true，否则为false
Observable
indexOf ( Node node ) : Number
返回一个孩子节点的序号
返回一个孩子节点的序号
参数:
  • node : Node
返回值:
  • Number
    节点的序号，没有找到时返回-1
Node
insertBefore ( Node node , Node refNode ) : Node
将第一个节点的所有孩子节点插入到第二个节点之前
将第一个节点的所有孩子节点插入到第二个节点之前
参数:
  • node : Node
    The node to insert
  • refNode : Node
    The node to insert before (if null the node is appended)
返回值:
  • Node
    The inserted node
Node
isAncestor ( Node node ) : Boolean
如果传入的节点是当前节点的祖先（任何层次上），返回true。
如果传入的节点是当前节点的祖先（任何层次上），返回true。
参数:
  • node : Node
返回值:
  • Boolean
Node
isExpandable () : Boolean
如果当前节点有一个或多个子节点， 或者当节点的...
如果当前节点有一个或多个子节点， 或者当节点的 expandable(参见 attributes), 属性被明确地设置为true，返回true；否则 返回false。
参数:
  • 无。
返回值:
  • Boolean
Node
isExpanded () : Boolean
如果此节点处于展开状态，返回true
如果此节点处于展开状态，返回true
参数:
  • 无。
返回值:
  • Boolean
TreeNode
isFirst () : Boolean
如果当前节点是其父节点的第一个孩子，则返回true
如果当前节点是其父节点的第一个孩子，则返回true
参数:
  • 无。
返回值:
  • Boolean
Node
isLast () : Boolean
如果当前节点是其父节点的最后一个孩子，返回true
如果当前节点是其父节点的最后一个孩子，返回true
参数:
  • 无。
返回值:
  • Boolean
Node
isLeaf () : Boolean
如果当前节点是一个叶子节点，则返回true
如果当前节点是一个叶子节点，则返回true
参数:
  • 无。
返回值:
  • Boolean
Node
isSelected () : Boolean
如果当前节点被选中，返回true
如果当前节点被选中，返回true
参数:
  • 无。
返回值:
  • Boolean
TreeNode
item ( Number index ) : Node
返回指定索引处的孩子节点。
返回指定索引处的孩子节点。
参数:
  • index : Number
返回值:
  • Node
Node
on( String eventName, Function handler, [Object scope], [Object options] ) : void
给对象添加事件处理器 (addListener的简写形式)
给对象添加事件处理器 (addListener的简写形式。)
参数:
  • eventName : String
    监听的事件类型
  • handler : Function
    事件调用的方法
  • scope : Object
    （可选）处理方法执行时的作用域 (this 的引用)。 如果被忽略。默认为触发事件的对象。
  • options : Object
    可选 包含处理器配置的对象。
返回值:
  • void
Observable
purgeListeners() : void
移除对象上所有的监听器
移除对象上所有的监听器
参数:
  • 无。
返回值:
  • void
Observable
relayEvents( Object o, Array events ) : void
从指定的Observable上传递选择的事件就好像被当前对象触发一样。
从指定的Observable上传递选择的事件就好像被当前对象触发一样。
参数:
  • o : Object
    该Observable上的事件被当前对象传递。
  • events : Array
    传递的数组名。
返回值:
  • void
Observable
remove ( Boolean destroy ) : Node
从父节点中移除当前节点
从父节点中移除当前节点
参数:
  • destroy : Boolean
    true to destroy the node upon removal. Defaults to false.
返回值:
  • Node
    this
Node
removeAll ( Boolean destroy ) : Node
Removes all child nodes from this node.
Removes all child nodes from this node.
参数:
  • destroy : Boolean
    true to destroy the node upon removal. Defaults to false.
返回值:
  • Node
    this
Node
removeChild ( Node node , Boolean destroy ) : Node
从当前节点中删除一个孩子节点。
从当前节点中删除一个孩子节点。
参数:
  • node : Node
    需要删除的节点
  • destroy : Boolean
    true to destroy the node upon removal. 默认是false
返回值:
  • Node
    删除掉的节点
Node
removeListener( String eventName, Function handler, [Object scope] ) : void
删除一个事件处理器。
删除一个事件处理器。
参数:
  • eventName : String
    处理器关联的事件类型。
  • handler : Function
    移除的处理器。 这应该是传递到addListener里的方法的引用。
  • scope : Object
    （可选）处理器指定的初始作用域。
返回值:
  • void
Observable
replaceChild ( Node newChild , Node oldChild ) : Node
使用一个节点替换当前节点中的一个孩子节点。
使用一个节点替换当前节点中的一个孩子节点。
参数:
  • newChild : Node
    用来替代的节点
  • oldChild : Node
    被替代的节点
返回值:
  • Node
    被替代的节点
Node
resumeEvents() : void
重新开始触发事件。(参见suspendEvents) 如果事件以queueSuspended参数被挂起，则在事件被挂起时 ...
重新开始触发事件。(参见 suspendEvents) 如果事件以queueSuspended 参数被挂起，则在事件被挂起时触发的事件会被传递到所有的监听器上
参数:
  • 无。
返回值:
  • void
Observable
select () : void
触发此节点的选中状态
触发此节点的选中状态
参数:
  • 无。
返回值:
  • void
TreeNode
setId ( String id ) : void
Changes the id of this node.
Changes the id of this node.
参数:
  • id : String
    The new id for the node.
返回值:
  • void
Node
setText ( String text ) : void
为此节点设置文本
为此节点设置文本
参数:
  • text : String
返回值:
  • void
TreeNode
sort ( Function fn , [ Object scope ] ) : void
使用提供的排序方法对当前节点的孩子节点进行排序
使用提供的排序方法对当前节点的孩子节点进行排序
参数:
  • fn : Function
    A function which, when passed two Nodes, returns -1, 0 or 1 depending upon required sort order.
  • scope : Object
    可选The scope ( this reference) in which the function is executed. Defaults to the browser window.
返回值:
  • void
Node
suspendEvents( Boolean queueSuspended ) : void
暂停触发所有的事件。 (参看resumeEvents)
暂停触发所有的事件。（参看 resumeEvents)
参数:
  • queueSuspended : Boolean
    如果传递为true则排列好暂停的事件使得在调用 resumeEvents 后再触发它们，而不是抛弃所有暂停的事件。
返回值:
  • void
Observable
toggle () : void
固定住节点的展开/折叠状态
固定住节点的展开/折叠状态
参数:
  • 无。
返回值:
  • void
TreeNode
un( String eventName, Function handler, [Object scope] ) : void
删除一个事件处理器(removeListener方法的简写形式)
删除一个事件处理器(removeListener方法的简写形式。)
参数:
  • eventName : String
    处理器关联的事件类型
  • handler : Function
    被删除的处理器 这应该是传入 addListener 中的方法的引用。
  • scope : Object
    （可选）为处理器指定的初始作用域。
返回值:
  • void
Observable
unselect ( [ Boolean silent ] ) : void
触发此节点的反选
触发此节点的反选
参数:
  • silent : Boolean
    可选 True to stop selection change events from firing.
返回值:
  • void
TreeNode

公共事件

Event Defined By
append : ( Tree tree , Node this , Node node , Number index )
当一个新的子节点被添加时触发
当一个新的子节点被添加时触发
监听器将会用如下的参数调用:
  • tree : Tree
    所属树
  • this : Node
    This node
  • node : Node
    新添加的节点
  • index : Number
    新添加的节点的序号
Node
beforeappend : ( Tree tree , Node this , Node node )
当一个新的孩子节点被添加之前触发，返回false终止添加操作
当一个新的孩子节点被添加之前触发，返回false终止添加操作
监听器将会用如下的参数调用:
  • tree : Tree
    所属树
  • this : Node
    This node
  • node : Node
    需要添加的孩子节点
Node
beforechildrenrendered : ( Node this )
在此节点的孩子节点渲染之前触发
在此节点的孩子节点渲染之前触发
监听器将会以如下的参数格式调用:
  • this : Node
    这个节点
TreeNode
beforeclick : ( Node this , Ext.EventObject e )
在处理点击操作之前触发。 返回false取消默认操作。
在处理点击操作之前触发。 返回false取消默认操作。
监听器将会以如下的参数格式调用:
  • this : Node
    这个节点
  • e : Ext.EventObject
    事件对象
TreeNode
beforecollapse : ( Node this , Boolean deep , Boolean anim )
在此节点被收起起之前触发，返回false取消操作
在此节点被收起起之前触发，返回false取消操作
监听器将会以如下的参数格式调用:
  • this : Node
    This node
  • deep : Boolean
  • anim : Boolean
TreeNode
beforedblclick : ( Node this , Ext.EventObject e )
在双击时触发。取消默认的行为返回false
在双击时触发。取消默认的行为返回false
监听器将会以如下的参数调用:
  • this : Node
    This node
  • e : Ext.EventObject
    The event object
TreeNode
beforeexpand : ( Node this , Boolean deep , Boolean anim )
当前节点展开时触发，返回false取消操作。
当前节点展开时触发，返回false取消操作。
监听器将会以如下的参数格式调用:
  • this : Node
    This node
  • deep : Boolean
  • anim : Boolean
TreeNode
beforeinsert : ( Tree tree , Node this , Node node , Node refNode )
在插入一个新的孩子节点之前触发，返回false终止插入。
在插入一个新的孩子节点之前触发，返回false终止插入。
监听器将会用如下的参数调用:
  • tree : Tree
    所属树
  • this : Node
    This node
  • node : Node
    需要插入的孩子节点
  • refNode : Node
    在其之前插入孩子节点的节点
Node
beforemove : ( Tree tree , Node this , Node oldParent , Node newParent , Number index )
当前节点被移动到树中一个新的位置之前触发。 返回false终止移动。
当前节点被移动到树中一个新的位置之前触发。 返回false终止移动。
监听器将会用如下的参数调用:
  • tree : Tree
    所属树
  • this : Node
    This node
  • oldParent : Node
    The parent of this node
  • newParent : Node
    The new parent this node is moving to
  • index : Number
    The index it is being moved to
Node
beforeremove : ( Tree tree , Node this , Node node )
当一个孩子节点被删除之前触发，返回false终止删除
当一个孩子节点被删除之前触发，返回false终止删除
监听器将会用如下的参数调用:
  • tree : Tree
    所属树
  • this : Node
    This node
  • node : Node
    需要删除的孩子节点
Node
checkchange : ( Node this , Boolean checked )
当一个带有复选框的节点选中状态发生改变时触发
当一个带有复选框的节点选中状态发生改变时触发
监听器将会以如下的参数格式调用:
  • this : Node
    这个节点
  • checked : Boolean
TreeNode
click : ( Node this , Ext.EventObject e )
点击时触发
点击时触发
监听器将会以如下的参数格式调用:
  • this : Node
    This node
  • e : Ext.EventObject
    The event object
TreeNode
collapse : ( Node this )
收起节点。
收起节点。
监听器将会以如下的参数格式调用:
  • this : Node
    这个节点
TreeNode
contextmenu : ( Node this , Ext.EventObject e )
节点被右击时触发
节点被右击时触发
监听器将会以如下的参数格式调用:
  • this : Node
    这个节点
  • e : Ext.EventObject
    The event object
TreeNode
dblclick : ( Node this , Ext.EventObject e )
当节点被双击时触发。
当节点被双击时触发。
监听器将会以如下的参数格式调用:
  • this : Node
    这个节点
  • e : Ext.EventObject
    事件对象
TreeNode
disabledchange : ( Node this , Boolean disabled )
当前节点的无效状态发生改变时触发
当前节点的无效状态发生改变时触发
监听器将会以如下的参数格式调用:
  • this : Node
    This node
  • disabled : Boolean
TreeNode
expand : ( Node this )
当前节点展开时触发。
当前节点展开时触发。
监听器将会以如下的参数格式调用:
  • this : Node
    这个节点
TreeNode
insert : ( Tree tree , Node this , Node node , Node refNode )
当插入一个新的节点时触发。
当插入一个新的节点时触发。
监听器将会用如下的参数调用:
  • tree : Tree
    所属树
  • this : Node
    This node
  • node : Node
    插入的孩子节点
  • refNode : Node
    在其之前插入孩子节点的节点
Node
move : ( Tree tree , Node this , Node oldParent , Node newParent , Number index )
当前节点被移动到树中一个新的位置时触发
当前节点被移动到树中一个新的位置时触发
监听器将会用如下的参数调用:
  • tree : Tree
    所属树
  • this : Node
    This node
  • oldParent : Node
    当前节点旧的父节点
  • newParent : Node
    当前节点新的父节点
  • index : Number
    移动到的序号
Node
remove : ( Tree tree , Node this , Node node )
当一个节点移除时触发
当一个节点移除时触发
监听器将会用如下的参数调用:
  • tree : Tree
    所属树
  • this : Node
    这个节点
  • node : Node
    已经移除的节点
Node
textchange : ( Node this , String text , String oldText )
当节点的文本改变时触发
当节点的文本改变时触发
>监听器将会以如下的参数格式调用:
  • this : Node
    这个节点
  • text : String
    新文本
  • oldText : String
    旧文本
TreeNode


Class Ext.tree.TreeNodeUI

包: | Ext.tree
定义类的文件: | TreeNodeUI.js
类: | TreeNodeUI
继承自: | Object
该类提供了Ext TreeNodes的默认UI实现。 TreeNode UI实现被从tree的实现中分离开来， 并允许定制树节点的展现形式。

如果你正在定制树的用户界面， 你可能需要继承此类， 但是你永远不应该实例化此类。

此类通过 Ext.tree.TreeNode.getUI ，提供访问Ext TreeNode用户界面组件的方式。

公共属性

该类没有公共属性。

公共方法

Method Defined By
addClass ( String/Array className ) : void
向节点的UI组件添加一个或多个CSS样式。 多个样式将被自动过滤掉。
向节点的UI组件添加一个或多个CSS样式。 多个样式将被自动过滤掉。
参数:
  • className : String/Array
    The CSS class to add, or an array of classes
返回值:
  • void
TreeNodeUI
getAnchor () : HtmlElement
返回为节点UI提供焦点的&lt;a>元素。
返回为节点UI提供焦点的&lt;a>元素。
参数:
  • 无。
返回值:
  • HtmlElement
    The DOM anchor element.
TreeNodeUI
getEl () : HtmlElement
Returns the element which encapsulates this node.
Returns the element which encapsulates this node.
参数:
  • 无。
返回值:
  • HtmlElement
    The DOM element. The default implementation uses a <code>&lt;li></code>.
TreeNodeUI
getIconEl () : HtmlElement
返回图标&lt;img>元素。
返回图标&lt;img>元素。
参数:
  • 无。
返回值:
  • HtmlElement
    The DOM image element.
TreeNodeUI
getTextEl () : HtmlNode
返回文本节点。
返回文本节点。
参数:
  • 无。
返回值:
  • HtmlNode
    The DOM text node.
TreeNodeUI
hide () : void
隐藏此节点
隐藏此节点
参数:
  • 无。
返回值:
  • void
TreeNodeUI
isChecked () : Boolean
返回节点的选中状态。 如果此节点没有渲染复选框，返回false。
返回节点的选中状态。 如果此节点没有渲染复选框，返回false。
参数:
  • 无。
返回值:
  • Boolean
    The checked flag.
TreeNodeUI
removeClass ( String/Array className ) : void
从该节点的UI组件删除一个或多个CSS样式。
从该节点的UI组件删除一个或多个CSS样式。
参数:
  • className : String/Array
    The CSS class to remove, or an array of classes
返回值:
  • void
TreeNodeUI
show () : void
显示此节点。
显示此节点。
参数:
  • 无。
返回值:
  • void
TreeNodeUI
toggleCheck ( [ Boolean value ] ) : void
将节点的选中状态设置为所给的值， 或者，如果没有传递值进来， 固定当前的选择状态....
将节点的选中状态设置为所给的值， 或者，如果没有传递值进来， 固定当前的选择状态。 如果节点没有渲染复选框，此方法没有作用。
参数:
  • value : Boolean
    可选 The new checked status.
返回值:
  • void
TreeNodeUI

公共事件

该类没有公共事件。


Observable
    Component
      BoxComponent
        Container
          Panel
            TreePanel

Class Ext.tree.TreePanel

包: | Ext.tree
定义类的文件: | TreePanel.js
类: | TreePanel
继承自: | Panel

TreePanel提供了树形结构数据的树形UI展示。

添加到TreePanel中的每个 TreeNode 都可以包含你的程序中需要使用的元数据(metadata)，这些数据被包含在它们的 attributes 属性中。

在渲染之前，TreePanel必须有一个 root 既可以通过 root 配置项指定，也可以通过 setRootNode 方法设置。

一个例子:

                var tree = new Ext.tree.TreePanel({
    renderTo: 'tree-div',
    useArrows: true,
    autoScroll: true,
    animate: true,
    enableDD: true,
    containerScroll: true,
    border: false,
    // auto create TreeLoader
    dataUrl: 'get-nodes.php',

    root: {
        nodeType: 'async',
        text: 'Ext JS',
        draggable: false,
        id: 'source'
    }
});

tree.getRootNode().expand();

和一个数据包一起的这个例子与下面这个相似:

            [{
    "text": "adapter",
    "id": "source\/adapter",
    "cls": "folder"
}, {
    "text": "dd",
    "id": "source\/dd",
    "cls": "folder"
}, {
    "text": "debug.js",
    "id": "source\/debug.js",
    "leaf": true,
    "cls": "file"
}]

在Viewport内的一个树的例子:

                new Ext.Viewport({
    layout: 'border',
    items: [{
        region: 'west',
        collapsible: true,
        title: 'Navigation',
        xtype: 'treepanel',
        width: 200,
        autoScroll: true,
        split: true,
        loader: new Ext.tree.TreeLoader(),
        root: new Ext.tree.AsyncTreeNode({
            expanded: true,
            children: [{
                text: 'Menu Option 1',
                leaf: true
            }, {
                text: 'Menu Option 2',
                leaf: true
            }, {
                text: 'Menu Option 3',
                leaf: true
            }]
        }),
        rootVisible: false,
        listeners: {
            click: function(n) {
                Ext.Msg.alert('Navigation Tree Click', 'You clicked: "' + n.attributes.text + '"');
            }
        }
    }, {
        region: 'center',
        xtype: 'tabpanel',
        // remaining code not shown ...
    }]
});

配置项

Config Options Defined By
anchor : String
注: 这个配置只用于该组件被包含在一个已使用AnchorLayout...

注: 这个配置只用于该组件被包含在一个已使用 AnchorLayout (或者其子类)配置的Container时。 基于布局管理器，例如：

  • Ext.form.FormPanel
  • 指定 layout: 'anchor' // or 'form', or 'absolute'

参见 Ext.layout.AnchorLayout. anchor 。

BoxComponent
animCollapse : Boolean
true将会在panel被折叠时使用动画效果，false将会跳过动画效果....
true 将会在panel被折叠时使用动画效果， false 将会跳过动画效果( 如果Ext.Fx类 有效，默认为 true ，否则为 false )。
Panel
animate : Boolean
设置为true以启用展开/折叠时的动画效果(默认值为 the value of Ext.enableFx)
TreePanel
autoHeight : Boolean
如果值为true，height配置项为'auto'，否则值为false的话使用固定的高度...

如果值为true，height配置项为'auto'，否则值为false的话使用固定的高度， 或者可以由其父类容器 layout manager来控制。(默认值为 false)。

注: 虽然很多组件继承了这个配置选项，但不是所有这些组件的自适应高度配置都会像期望的那样起作用。 设置autoHeight：值为true时，浏览器将根据元素的内容自动设置高度，这将意味着Ext不会去管理高度。

如果是由浏览器来管理高度，需要注意的是，通过浏览器进行调整的结构组件内不能被发现， 因此宽度的变化可能导致需要进行同步处理元素的高度。 例如：

var w = new Ext.Window({
    title: 'Window',
    width: 600,
    autoHeight: true,
    items: {
        title: 'Collapse Me',
        height: 400,
        collapsible: true,
        border: false,
        listeners: {
            beforecollapse: function() {
                w.el.shadow.hide();
            },
            beforeexpand: function() {
                w.el.shadow.hide();
            },
            collapse: function() {
                w.syncShadow();
            },
            expand: function() {
                w.syncShadow();
            }
        }
    }
}).show();
Panel
autoScroll : Boolean
如果值为true，将会在该元素上使用overflow:'auto'配置，并且在必要的时候...
如果值为true，将会在该元素上使用overflow:'auto'配置，并且在必要的时候自动显示滚动条，否则，溢出部分的组件都会被切除(默认值为 false)。
BoxComponent
autoShow : Boolean
如果组件需要检测隐藏CSS属性(如 'x-hidden' 或者 'x-hide-display')并且在渲染时删除...
如果组件需要检测隐藏CSS属性(如 'x-hidden' 或者 'x-hide-display')并且在渲染时删除它们 (默认为false)，设置此值为true。
Component
baseCls : String
应用到当前panel元素上的基本CSS类(默认为 'x-panel' )...
应用到当前panel元素上的基本CSS类(默认为 'x-panel' )。

另一个可选的默认变量是指定 'x-plain' ，它将去掉所有样式，除了Ext布局功能所必须的属性 (例如overflow:hidden)。另请参见 unstyled 。

Panel
bbar : Object/Array
panel底部工具栏。 此参数可以是一个Ext.Toolbar 、一个工具栏配置项，或者一个buttons/button配置数组---用来被添加到工具栏中...

panel底部工具栏。 此参数可以是一个Ext.Toolbar 、一个工具栏配置项，或者一个buttons/button配置数组---用来被添加到工具栏中。 注意，此参数在渲染之后是无效的。如果在渲染之后需要访问底部工具栏 ，请使用 getBottomToolbar。

注意:尽管Toolbar可以包含Field组件，但它们不会 通过加载祖先FormPanel而被更新。Panel的工具栏不是标准Container->Component 层次的一部分，所以它们不会被扫面以收集表单项。但是，这些值还是会 被提交，因为提交表单的参数是从DOM树中收集的。

Panel
bbarCfg : Object
一个 ADomHelper 元素的配置对象，描述了当前Panelbbar元素的结构...

一个DomHelper 元素的配置对象，描述了当前Panel的bbar元素结构。 另请参见 bodyCfg 。

Panel
bodyBorder : Boolean
True将会在Panel的body元素内部显示一个边框，false将会隐藏它 (默认为true)。只有当border == true 时...
True将会在Panel的body元素内部显示一个边框，false将会隐藏它 (默认为true)。只有当border == true 时，此参数才会被应用。如果border == true 并且 bodyBorder == false， 将会给整个body元素一种凹陷式的外观。
Panel
bodyCfg : Object
一个DomHelper 元素描述对象，可以被指定给任何Panel Element...

一个DomHelper 元素描述对象，可以被指定给任何Panel Element.

默认情况下，以下表格中的Default元素将会被用作html标签，用来创建一个子元素 ，与Default类名相匹配( baseCls 将会被 baseCls 替换 ):

Panel      Default  Default             Custom      Additional       Additional
Element    element  class               element     class            style
========   ==========================   =========   ==============   ===========
header     div      baseCls+'-header'   headerCfg   headerCssClass   headerStyle
bwrap      div      baseCls+'-bwrap'     bwrapCfg    bwrapCssClass    bwrapStyle
+ tbar     div      baseCls+'-tbar'       tbarCfg     tbarCssClass     tbarStyle
+ body     div      baseCls+'-body'       bodyCfg     bodyCssClass     bodyStyle
+ bbar     div      baseCls+'-bbar'       bbarCfg     bbarCssClass     bbarStyle
+ footer   div      baseCls+'-footer'   footerCfg   footerCssClass   footerStyle

例如，配置一个自定义的元素，用来强制 body 元素使用不同形式的标签，而不是使用默认创建的。 这种情况的一个例子可能是 创建一个子 Panel，包含自定义的内容，例如header，或者通过使body拥有一个<center> 元素， 从而强制Panel中的所有内容居中:

new Ext.Panel({
    title: 'Message Title',
    renderTo: Ext.getBody(),
    width: 200, height: 130,
    bodyCfg: {
        tag: 'center',
        cls: 'x-panel-body',  // Default class not applied if Custom element specified
        html: 'Message'
    },
    footerCfg: {
        tag: 'h2',
        cls: 'x-panel-footer'        // same as the Default class
        html: 'footer html'
    },
    footerCssClass: 'custom-footer', // additional css class, see addClass

    footerStyle:    'background-color:red' // see bodyStyle

});

以上例子也显式创建了一个 footer ，拥有自定义的标签和样式。

Panel
bodyCssClass : String/Object/Function
可选的CSS类选择器，被应用到body 元素上，其格式为Ext.Element.addClass所 期望的值(默认为null)...
可选的CSS类选择器，被应用到body 元素上，其格式为Ext.Element.addClass所 期望的值(默认为null)。参见 bodyCfg.
Panel
bodyStyle : String/Object/Function
自定义的CSS样式，它将被应用到body 元素上，其格式为...
自定义的CSS样式，它将被应用到body 元素上，其格式为Ext.Element.applyStyles 所期望的值(默认为null)。参见bodyCfg。
Panel
border : Boolean
True将会显示panel body元素的边框，false将会隐藏它们 (默认为true)。默认情况下，边框是一个2px宽度的内嵌边框...
True将会显示panel body元素的边框，false将会隐藏它们 (默认为true)。默认情况下，边框是一个2px宽度的内嵌边框， 但是，以后可以通过设置bodyBorder 为false以改变它。
Panel
boxMaxHeight : Number
设置组件的最大高度值...

设置组件的最大高度值。

警告:布局管理器应用的任何管理大小的配置将会被此属性覆盖。

BoxComponent
boxMaxWidth : Number
设置组件的最大宽度值...

设置组件的最大宽度值。

警告:布局管理器应用的任何管理大小的配置将会被此属性覆盖。

BoxComponent
boxMinHeight : Number
设置组件的最小高度值...

设置组件的最小高度值。

警告:布局管理器应用的任何管理大小的配置将会被此属性覆盖。

BoxComponent
boxMinWidth : Number
设置组件的最小宽度值...

设置组件的最小宽度值。

警告: 布局管理器应用的任何管理大小的配置将会被此属性覆盖。

BoxComponent
bubbleEvents : Array
当触发时事件数组应该被冒泡到父容器。见Ext.util.Observable.enableBubble....

当触发时事件数组应该被冒泡到父容器。见Ext.util.Observable.enableBubble. Ext.util.Observable.enableBubble. 默认是 [].

TreePanel
buttonAlign : String
添加到当前panel的所有 buttons 的对齐方式。 合法的值有...
添加到当前panel的所有 buttons 的对齐方式。 合法的值有 'right' , 'left' 和 'center' (默认为 'right' )。
Panel
buttons : Array
Panel的按钮数组，它们从 buttons 配置属性创建。只读。
Panel
bwrapCfg : Object
一个DomHelper 元素描述对象，描述了当前Panel的 bwrap 的元素的结构...

一个DomHelper 元素描述对象，描述了当前Panel的 bwrap 的元素的结构。另请参见 bodyCfg 。

Panel
clearCls : String
应用到特殊的clearing div的CSS类， 这个clearing div直接渲染到每个form field的包装器后面...

应用到特殊的clearing div的CSS类， 这个clearing div直接渲染到每个form field的包装器后面，以提供 清除field的功能(默认为 'x-form-clear-left')。

注意: 只有在当前组件被渲染到一个使用FormLayout 布局(例如 Ext.form.FormPanel 或者指定 layout:'form')的 容器中、或者是指定了一个fieldLabel 、或者指定isFormField=true 时此配置才有效。

另请参见 Ext.layout.FormLayout. fieldTpl。

Component
closable : Boolean
Panel自身不支持关闭操作，但是Panel的一些子类 (例如Ext.Window) ，或者处于Ext.TabPanel中的 Panel支持...
Panel自身不支持关闭操作，但是Panel的一些子类 (例如Ext.Window) ，或者处于Ext.TabPanel中的 Panel支持。 指定此参数为 true 可以在这些情况下启用关闭。默认为 false 。
Panel
cls : String
一个可选的额外CSS类，它将被添加到当前组件的元素上(默认为'')...
一个可选的额外CSS类，它将被添加到当前组件的元素上(默认为'')。 此属性对于在组件上，或者它的任何使用标准CSS规则的孩子节点上， 添加定制的样式非常有用。
Component
collapseFirst : Boolean
将会确保折叠/展开(collapse/expand)按钮总是被渲染在第一个位置...
true 将会确保折叠/展开(collapse/expand)按钮总是被渲染在第一个位置， 在panel顶部的工具栏中位于任何其它工具左侧， false 将会把它渲染在最后(默认为 true )。
Panel
collapsed : Boolean
如果当前panel被折叠为true。只读。
Panel
collapsedCls : String
在被折叠后，一个被添加到panel元素上的CSS类 (默认为 'x-panel-collapsed' )。
Panel
collapsible : Boolean
True将会使panel折叠并且会自动把展开/折叠(expand/collapse)按钮渲染到顶部...
True将会使panel折叠并且会自动把展开/折叠 (expand/collapse)按钮渲染到顶部工具按钮区域，false将 保持panel尺寸固定，没有按钮(默认为false)。
Panel
containerScroll : Boolean
设置为true向ScrollManager注册此容器
TreePanel
ctCls : String
一个可选的外部CSS样式，添加到这个组件的容器(默认值为 '')。 这个方法对于使用标准的CSS规则...

一个可选的外部CSS样式，添加到这个组件的容器(默认值为 '')。 这个方法对于使用标准的CSS规则，为组件或它的任何一个子组件添加特定的样式非常有用。 参见 Ext.layout.ContainerLayout和 extraCls 。

注意: ctCls 默认为 ''期望如下的类，它们将指定一个默认值:

  • Box Layout : 'x-box-layout-ct'
使用一个额外的CSS类配置以上的Class，它是append到默认对象上的。例如， 对于BoxLayout (Hbox and Vbox):
                                ctCls: 'x-box-layout-ct custom-class'

Component
ddAppendOnly : Boolean
设置为true，将允许使用拖拽的方式将节点添加到此树中 (排序树使用)
TreePanel
ddGroup : String
此TreePanel所属的DD组
TreePanel
ddScroll : Boolean
设置为true启用body滚动
TreePanel
disabled : Boolean
当前组件处于无效状态时为true。 Read-only.
Panel
dragConfig : Object
传递给 Ext.tree.TreeDragZone 实例的定制配置。
TreePanel
draggable : Boolean/Object
true 可以让当前panel启用拖拽操作(默认为 false )...

true 可以让当前panel启用拖拽操作(默认为 false )。

如需自定义的drag/drop实现，也可以向此配置项传递一个 Ext.Panel.DD配置替代 true 。 Ext.Panel.DD是一个内部没有文档化的类，它在周围移动代理元素 代替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();
Panel
dropConfig : Object
传递给 Ext.tree.TreeDropZone 实例的定制化配置项
TreePanel
enableDD : Boolean
设置为true以启用拖拽放下操作
TreePanel
enableDrag : Boolean
设置为true当拖拽时有效
TreePanel
enableDrop : Boolean
设置为true以启用（拖拽并）放下
TreePanel
fbar : Object/Array
一个Toolbar 对象、一个Toolbar配置项，或者一个Buttons/ Button 配置数组，...

一个Toolbar 对象、一个Toolbar配置项，或者一个Buttons/ Button 配置数组，它们描述了一个被添加到当前Panel底部元素的 Toolbar.

在渲染后， fbar 将会为一个Toolbar 实例。

如果指定了 buttons ，它们将替代 fbar 配置项。

Panel的 buttonAlign 配置项目将会影响这些项目的布局，例如:
var w = new Ext.Window({
    height: 250,
    width: 500,
    bbar: new Ext.Toolbar({
        items: [{
            text: 'bbar Left'
        },'->',{
            text: 'bbar Right'
        }]
    }),
    buttonAlign: 'left', // anything but 'center' or 'right' and you can use '-', and '->'

                                  // to control the alignment of fbar items
    fbar: [{
        text: 'fbar Left'
    },'->',{
        text: 'fbar Right'
    }]
}).show();

注意:尽管Toolbar可以包含Field组件，但它们不会 通过加载祖先FormPanel而被更新。Panel的工具栏不是标准Container->Component 层次的一部分，所以它们不会被扫面以收集表单项。但是，这些值还是会 被提交，因为提交表单的参数是从DOM树中收集的。

Panel
fieldLabel : String
紧靠此field显示的标签文本(默认值为 '')。注意...

紧靠此field显示的标签文本(默认值为 '')。

注意:只有在当前组件被渲染到一个使用FormLayout 的容器中时，此配置才有效。 (例如 Ext.form.FormPanel 或 指定 layout:'form')。

另请参见 hideLabel 、 Ext.layout.FormLayout和 fieldTpl。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Name'
    }]
});
Component
flex : Number
注: 这个配置只用于该组件被包含在一个已使用BoxLayout配置的Container中时...

注: 这个配置只用于该组件被包含在一个已使用BoxLayout配置的Container中时。通过计算每一个子组件的flex值所占全部flex值之和的比例，来决定子组件的宽(HBoxLayout)高(VBoxlayout)。 任何子项的 flex = 0 或 flex = undefined 将不被设置(初始值大小将不被改变)。

BoxComponent
floating : Mixed
此参数被用来配置底层的 Ext.Layer. 此配置参数可接受的值有...

此参数被用来配置底层的 Ext.Layer. 此配置参数可接受的值有:

  • false : 默认。
    在渲染的地方以内嵌的方式显示panel.
  • true :
    浮动panel (绝对定位，有自动衬垫和阴影)。
      设置floating为true将会为当前panel创建一个Ext.Layer 并且在负值偏移量处显示panel，这样它就是隐藏的。
      既然panel被绝对定位，位置必须在渲染之后被显式设置 (例如 myPanel.setPosition(100,100); )。
      注意: 如果浮动面板，你必须总是指定一个固定的宽度， 否则它将是自动宽度并且总是展开以便填充到视口右侧 边缘。
  • object :
    指定的对象将会被用作将会被创建的 Ext.Layer的 配置对象。
Panel
footer : Ext.Element
Panel底部Element 。只读。此元素被用来容纳Panel的...
Panel底部Element 。只读。

此元素被用来容纳Panel的 buttons 或者 fbar 。

注意: 另请参见 el 的注释。

Panel
footerCfg : Object
一个DomHelper 元素的配置对象，描述了当前Panel的footer元素结构。 另请参见...

一个DomHelper 元素的配置对象，描述了当前Panel的footer元素结构。 另请参见 bodyCfg 。

Panel
forceLayout : Boolean
如果此值为true，容器将将强制初始化一次布局操作...
如果此值为true，容器将将强制初始化一次布局操作， 即使容器处于隐藏或者折叠状态。 此配置项对于在一个折叠或者隐藏的容器中强制渲染非常有用 (默认为false)。
Container
frame : Boolean
默认情况下使用 false ，渲染简单的1px的正方形边框。 true 将会渲染9个元素，以自定义的圆角结束...
默认情况下使用 false ，渲染简单的1px的正方形边框。 true 将会渲染9个元素，以自定义的圆角结束 (另请参见 Ext.Element.boxWrap)。

每种情况下产生的模板描述如下:

// frame = false
<div id="developer-specified-id-goes-here" class="x-panel">

    <div class="x-panel-header"><span class="x-panel-header-text">Title: (frame:false)</span></div>

    <div class="x-panel-bwrap">
        <div class="x-panel-body"><p>html value goes here</p></div>
    </div>
</div>

// frame = true (create 9 elements)
<div id="developer-specified-id-goes-here" class="x-panel">
    <div class="x-panel-tl"><div class="x-panel-tr"><div class="x-panel-tc">
        <div class="x-panel-header"><span class="x-panel-header-text">Title: (frame:true)</span></div>
    </div></div></div>

    <div class="x-panel-bwrap">
        <div class="x-panel-ml"><div class="x-panel-mr"><div class="x-panel-mc">
            <div class="x-panel-body"><p>html value goes here</p></div>
        </div></div></div>

        <div class="x-panel-bl"><div class="x-panel-br"><div class="x-panel-bc"/>
        </div></div></div>
</div>
Panel
header : Ext.Element
Panel的headerElement. 只读。此元素被用来容纳 title和 tools...
Panel的headerElement. 只读。

此元素被用来容纳 title和 tools

注意: 另请参见 el 的注释。

Panel
headerAsText : Boolean
true 将会在 header 中显示panel title ， false 将会隐藏它(默认为 true )。
Panel
headerCfg : Object
一个DomHelper 元素的配置对象，描述了当前Panel的header元素结构...

一个DomHelper 元素的配置对象，描述了当前Panel的header元素结构。 另请参见 bodyCfg 。

Panel
height : Number
组件的高度(默认值为 auto)。注:如果想使用百分比的方式...
组件的高度(默认值为 auto)。注:如果想使用百分比的方式来设置值，请查看 Ext.Component.anchor。
BoxComponent
hidden : Boolean
如果当前组件处于隐藏状态，此值为true。Read-only。
Component
hideCollapseTool : Boolean
true 将会在 collapsible == true 时隐藏展开/折叠按钮， false 将会显示它(默认为 false )。
Panel
hideLabel : Boolean
true时完全隐藏label元素 ( label 和 separator)。 默认为 false。 默认情况下，即使你不指定...

true时完全隐藏label元素 ( label 和 separator)。 默认为 false。 默认情况下，即使你不指定 fieldLabel 它的空间仍然会被保留，这样这块区域会与其它确实拥有label的区域位于同一排。 讲此值设置为 true 将导致此区域不再保留此空间。

注意: 参见 clearCls 的注释。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield'
        hideLabel: true
    }]
});
Component
hideMode : String
组件如何隐藏，支持的值有： 'visibility' (css visibility), 'offsets' (位置偏移量为负值) 和...

组件如何隐藏，支持的值有： 'visibility' (css visibility), 'offsets' (位置偏移量为负值) 和 'display' (css display).

注意:一般首选默认值 'display'，因为当组件第一次显示的时候它们会自动进行布局 (隐藏的时候不会调整尺寸)。

Component
hideParent : Boolean
此值为true时，当调用hide/show方法时，将会hide和show组件的容器...
此值为true时，当调用hide/show方法时，将会hide和show组件的容器；false时将会 hide和show组件自身(默认为false)。例如，这可以用作window上隐藏按钮的一种 快捷操作，通过设置此按钮的hideParent:true，然后把它添加到window上。
Component
hlColor : String
高亮节点显示的颜色(默认值为 C3DAF9)
TreePanel
hlDrop : Boolean
设置为false，在拖拽完放开的时候禁用高亮显示节点 (默认为Ext.enableFx的值)
TreePanel
iconCls : String
CSS类选择器，指定被用作头部图标的背景图片(默认为'')...
CSS类选择器，指定被用作头部图标的背景图片(默认为'')。

指定自定义图表类的示例就像:

// specify the property in the config for the class:
     ...
     iconCls: 'my-icon'

// css class that specifies background image to be used as the icon image:
.my-icon { background-image: url(../images/my-icon.gif) 0 6px no-repeat !important; }
Panel
id : String
当前组件唯一的id(默认为auto-assigned id)...

当前组件唯一的id(默认为auto-assigned id)。 如果你需要在以后访问组件，而又没有一个有效的组件对象引用，那么你需要指定一个 id( 也就是，使用Ext. getCmp方法 )。

注意，此id也将被用作组件底层HTML标签的id，这些标签被渲染到页面中。 这将允许你编写基于id的CSS规则，以独立地描述指定的实例；并且，也可以通过 组件父标签的id选中子元素。

注意:为了避免与唯一的id 产生重复， 请参见 itemId 和 ref 。

注意: 如需访问一个元素的容器，参见 ownerCt 。

Component
itemCls : String
注意: 只有在当前组件被渲染到一个使用FormLayout 布局的 容器中时此配置才有效...

注意: 只有在当前组件被渲染到一个使用FormLayout 布局的 容器中时此配置才有效。 (例如Ext.form.FormPanel 或者指定 layout:'form')。

一个附加的CSS类，应用到div上，包装当前field的表单元素。 如果提供了此参数， field级上的itemCls将会覆盖 container级上提供的 默认itemCls。 为itemCls指定的值将会被添加默认的 类('x-form-item')。

既然它被应用到项目的包装器上(参见 Ext.layout.FormLayout。 fieldTpl)， 它将允许你编写能应用到此field、label(如果有指定)、或者field内部任何其它元素的标准CSS规则。

注意: 参考 fieldLabel的注释。 .

示例用法:

// Apply a style to the field's label:
<style>
    .required .x-form-item-label {font-weight:bold;color:red;}
</style>

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Name',
        itemCls: 'required' //this label will be styled
    },{
        xtype: 'textfield',
        fieldLabel: 'Favorite Color'
    }]
});
Component
itemId : String
当没有可利用的对象引用时，itemId可以作为第二选择，用来获得一个组件的引用， 代替 ...

当没有可利用的对象引用时，itemId可以作为第二选择，用来获得一个组件的引用， 代替 id 与 Ext. getCmp的组合， 使用 itemId 与 Ext.Container. getComponent 方法配合将会获得 itemId 's（的所有者） 或者 id 's（的所有者）。 既然 itemId 's（的所有者）是一个到容器内部MixedCollection的索引， itemId 的作用域就被限定在容器之内---避免与 Ext.ComponentMgr 产生潜在的冲突，它（指Ext.ComponentMgr）需要一个 唯一的 id 。

var c = new Ext.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'); // 与 Ext.getCmp()不同

p2 = p1.ownerCt.getComponent('p2'); // 通过兄弟对象获得引用

另请参见 id 和 ref 。

注意:需要访问一个item的容器请参见 ownerCt 。

Component
keys : Object/Array
一个Ext.KeyMap 配置对象 (其格式为Ext.KeyMap.addBinding 所期望的值...
一个Ext.KeyMap 配置对象 (其格式为Ext.KeyMap.addBinding 所期望的值，用来向当前panel上绑定自定义的按键处理(默认为 null )
Panel
labelSeparator : String
每个fieldLabel 文本后面现实的分隔符。 此属性可以在多个层次上进行配置...

每个fieldLabel 文本后面现实的分隔符。 此属性可以在多个层次上进行配置。优先顺序为：

  • field / component level
  • container level
  • layout level (默认为冒号 ':')
如不需要为当前field的label显示分隔符，指定一个空字符串''即可。

注意:参见 clearCls 的注释。

另请参见 hideLabel 和 Ext.layout.FormLayout。 fieldTpl。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    layoutConfig: {
        labelSeparator: '~'   // layout config has lowest priority (defaults to ':')
    },
    labelSeparator: '>>',     // config at container level
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Field 1',
        labelSeparator: '...' // field/component level config supersedes others
    },{
        xtype: 'textfield',
        fieldLabel: 'Field 2' // labelSeparator will be '='

    }]
});
Component
labelStyle : String
一个CSS样式描述字符串，它将直接应用到当前field的label上...

一个CSS样式描述字符串，它将直接应用到当前field的label上。 如果有设置，默认为容器的labelStyle值(例如 Ext.layout.FormLayout.labelStyle , 或者 '')。

注意:参见 clearCls 的注释。

另请参见 hideLabel 和 Ext.layout.FormLayout. fieldTpl。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Name',
        labelStyle: 'font-weight:bold;'
    }]
});
Component
lines : Boolean
false to disable tree lines (默认值为 true)
TreePanel
listeners : Object
一个包含一个或多个事件处理器的配置对象，会在初始化的时候被添加到目标对象上...

一个包含一个或多个事件处理器的配置对象，会在初始化的时候被添加到目标对象上。 该配置对象应该是一个有效的监听器配置对象就像 addListener例子中指定的一样可一次附加多个处理器。

ExtJs Components上的DOM事件

一些 ExtJs Component 类导出时会选择一些DOM事件(例如 "click", "mouseover" 等等), 这通常只是在有额外的值可以被添加时发生。例如DataView类的 click事件会传递被点击的节点。也可以直接在Component的HTMLElementevent上访问DOM事件，但必需在Component被渲染后监听器才能添加到Element 上。可以按照以下步骤添加插件:

// 插件会用一个监听器配置对象进行配置。
//该组件会被添加到所有处理方法的参数列表上。
Ext.DomObserver = Ext.extend(Object, {
    constructor: function(config) {
        this.listeners = config.listeners ? config.listeners : config;
    },

    // 组件将自己传递进了插件的初始化方法里
    init: function(c) {
        var p, l = this.listeners;
        for (p in l) {
            if (Ext.isFunction(l[p])) {
                l[p] = this.createHandler(l[p], c);
            } else {
                l[p].fn = this.createHandler(l[p].fn, c);
            }
        }

        // 渲染后立即添加监听器到元素上
        c.render = c.render.createSequence(function() {
            var e = c.getEl();
            if (e) {
                e.on(l);
            }
        });
    },

    createHandler: function(fn, c) {
        return function(e) {
            fn.call(this, e, c);
        };
    }
});

var combo = new Ext.form.ComboBox({

    // 元素被点击后折叠
    plugins: [ new Ext.DomObserver({
        click: function(evt, comp) {
            comp.collapse();
        }
    })],
    store: myStore,
    typeAhead: true,
    mode: 'local',
    triggerAction: 'all'
});

Observable
loader : Ext.tree.TreeLoader
此TreePanel使用的Ext.tree.TreeLoader
TreePanel
margins : Object
注:此配置只用于该组件展现在一个使用BorderLayout...

注:此配置只用于该组件展现在一个使用BorderLayout 或 BoxLayout的两个子类之一作为布局的容器。

这个margins对象在该组件中的格式为：

{top: (top margin),right: (right margin),bottom: (bottom margin),left: (left margin)}

也可以是一个字符串，中间用空格分隔，margin值为数字。 把matches中每一个值的次序跟CSS中margin值的排列方式相对应：

  • 如果只有一个值，它适用于所有方面。
  • 如果有两个值，top和bottom的边框设置为第一个值，left和right设置为第二个值。
  • 如果有三个值，top设置为第一个值，left和right设置为第二个值，bottom设置为第三个值。
  • 如果有四个值，分别设置为top, right, bottom, left。

默认值:

{top:0, right:0, bottom:0, left:0}
BoxComponent
maskDisabled : Boolean
true 将会在panel被disabled时进行遮罩,false将不会遮罩它(默认为...
true 将会在panel被disabled时进行遮罩, false 将不会遮罩它(默认为 true )。使用任意一种方法，当被禁用时，panel都将告诉它包含的元素禁用它们自己， 但是遮罩panel可以提供一种额外的视觉效果，用以提示panel被禁用。
Panel
minButtonWidth : Number
当前panel中所有buttons 最小宽度，像素值(默认为 75 )
Panel
overCls : String
一个可选的额外的CSS类，它将在鼠标移过元素时被添加到组件上...
一个可选的额外的CSS类，它将在鼠标移过元素时被添加到组件上，鼠标移出时 删除。(默认为'')。此属性对于在组件上，或者它的任何使用标准CSS规则的孩子节点上， 添加定制的'active' 或者 'hover'样式非常有用。
Component
padding : Number/String
设置body元素padding样式的快捷方式。 此值既可以是一个数值，被应用到所有侧边...
设置body元素padding样式的快捷方式。 此值既可以是一个数值，被应用到所有侧边，也可以是一个普通的描述padding的 CSS字符串。默认为undefined.
Panel
pageX : Number
如果该组件被包含在一个指定位置的容器中，这个值表示页面级的x坐标值（译者注：在有滚动条的情况下这个值很有用）。
BoxComponent
pageY : Number
如果该组件被包含在一个指定位置的容器中，这个值表示页面级的y坐标值（译者注：在有滚动条的情况下这个值很有用）。
BoxComponent
pathSeparator : String
用来分路径字符串中子路径的符号(默认值为 '/')
TreePanel
plugins : Object/Array
一个对象或者一个对象数组，为组件提供特殊的功能 ...
一个对象或者一个对象数组，为组件提供特殊的功能。 对一个合法的插件唯一的要求是它含有一个init()方法， 能接收一个Ext.Component型的参数。 当组件被创建时，如果有可用的插件，组件将会调用每个插件的init方法， 并将自身的引用作为方法参数传递给它。然后，每个插件就可以调用方法或者响应组件上的事件， 就像需要的那样提供自己的功能。
Component
ptype : String
需要创建配置的ptype。 当传递一个配置对象给构造函数时...
需要创建配置的ptype。 当传递一个配置对象给构造函数时，此配置选项不会被使用。 只有在使用懒初始化的时候此配置项才会被使用， 此时Plugin不是 通过一个完整的实例组件，而是通过一个Component配置指定的。 在渲染时，将会查找ptype以决定创建何种类型的Plugin。

如果你创建自己的Plugin，你可以通过 Ext.ComponentMgr.registerPlugin 对它们进行注册，以便能利用懒初始化和渲染机制。
Component
ref : String
一个路径描述，与组件的 ownerCt 相关，它描述了把当前组件的命名引用放置到哪个父容器中去。...

一个路径描述，与组件的 ownerCt 相关，它描述了把当前组件的命名引用放置到哪个父容器中去。

祖先的坐标路径可以通过'/'字符进行分隔。 例如，将一个Toolbar Button的引用放入 拥有此Toolbar的Panel中:

var myGrid = new Ext.grid.EditorGridPanel({
    title: 'My EditorGridPanel',
    store: myStore,
    colModel: myColModel,
    tbar: [{
        text: 'Save',
        handler: saveChanges,
        disabled: true,
        ref: '../saveButton'
    }],
    listeners: {
        afteredit: function() {
//          The button reference is in the GridPanel
            myGrid.saveButton.enable();
        }
    }
});

在上面的代码中，如果 ref 是 'saveButton' ，那么引用将会被放置到Toolbar中。 ref 中的每个'/' 都会从组件的 ownerCt 向上移动一级。

另请参见 added 和 removed 事件。

Component
region : String
注: 此配置只用于该组件展现在一个布局为BorderLayout的容器中...

注: 此配置只用于该组件展现在一个布局为BorderLayout的容器中(例如指定layout:'border')。

详见Ext.layout.BorderLayout。

BoxComponent
renderTo : Mixed
该值可以是一个节点的id、一个DOM节点或者一个已存在的元素...

该值可以是一个节点的id、一个DOM节点或者一个已存在的元素， 组件将会被渲染到其中。

  • 注意 :
      如果组件不是一个Container 的子项目时， 不要使用此选项。 渲染和管理它的子项目是一个Container 的layout manager的责任。
      当使用此配置项时，无需调用render()方法。

另请参见 render 。

Component
requestMethod : String
为加载数据的 HTTP请求方法 (默认值是 Ext.Ajax.method).
TreePanel
resizeEvent : String
在布局中进行尺寸调整需要监听的事件。 默认为 'resize' 。
Panel
root : Ext.tree.TreeNode
树的根节点。
TreePanel
rootVisible : Boolean
设置为false将隐藏root节点 (默认值为 true)
TreePanel
selModel : Object
此TreePanel所使用的树选择模型 (默认值为 a Ext.tree.DefaultSelectionModel)
TreePanel
shadow : Boolean/String
(或者一个有效的Ext.Shadow Ext.Shadow.mode 值)，用来在panel后面显示一个阴影...
true (或者一个有效的Ext.Shadow Ext.Shadow.mode 值)，用来在panel后面显示一个阴影， false 将不会显示阴影(默认为 'sides' )。注意，此选项只有当 floating = true 时才应用。
Panel
shadowOffset : Number
如果显示了阴影，此参数为数值偏移量(默认为 4 )。注意，只有当 floating = true 时此参数才会被应用。...
如果显示了阴影，此参数为数值偏移量(默认为 4 )。注意，只有当 floating = true 时此参数才会被应用。
Panel
shim : Boolean
false将会在需要的浏览器中禁用iframe衬垫(默认为...
false 将会在需要的浏览器中禁用iframe衬垫(默认为 true )。注意，此选项只有在 floating = true 时应用。
Panel
singleExpand : Boolean
设置为true，一个树枝上只允许展开1个节点
TreePanel
stateEvents : Array
一个事件数组，当它们被触发时，组件需要保存自己的状态(默认值为 none)...

一个事件数组，当它们被触发时，组件需要保存自己的状态(默认值为 none)。 它们可以是任何该组件支持的事件类型，包括浏览器事件和 自定义事件(例如['click', 'customerchange'])。

对于保存和恢复组件状态的详细解释，参见 stateful

Component
stateId : String
为该组件指定的唯一的id值，它被用作管理组件状态的目的...
为该组件指定的唯一的id值，它被用作管理组件状态的目的。 (如果设定了id，默认值为组件自己的id，否则，如果组件使用自动生成的id，此值为null)。

对于保存和反解析组件状态的解释，参见 stateful 。

Component
stateful : Boolean
一个标志参数，它将引起组件在启动时尝试从一个保存的状态中恢复内部状态参数...

一个标志参数，它将引起组件在启动时尝试从一个保存的状态中恢复内部状态参数。 组件必须要么拥有一个 stateId 或者 id ，它们被分配给需要被管理的状态属性。 在跨页面加载时，不保证自动生成的id属性的稳定性， 并且，不能依赖此id来保存和恢复一个组件的相同状态。

为了保存状态的操作能够工作，状态管理器的提供者必须 被设置成一个Ext.state.Provider 的实现类，它覆盖了set 和get 方法，以便保存和恢复name/value对。 有一个内置的Ext.state.CookieProvider 可用。

为当前页面设置状态提供者:

Ext.state.Manager.setProvider(new Ext.state.CookieProvider({
    expires: new Date(new Date().getTime()+(1000*60*60*24*7)), //7 days from now
}));

当 stateEvents 配置项中其中之一的事件被触发时， 一个状态可保存的组件将试图保存其状态。

保存状态时，一个可保存状态的组件首先需要通过调用 getState 方法来序列化它的状态。 默认情况下，此函数什么事都不做。 开发者必须提供一个实现，返回一个hash对象，它描述了组件可恢复的状态。

getState方法产生的值将会传递给 Ext.state.Manager.set 方法，它使用配置的 Ext.state.Provider 来保存对象，以组件的 stateId 为key，或者，如果此值（指stateId）没有指定时， 使用它的 id 作为key。

在进行构造时，一个可保存状态的组件试图通过调用 Ext.state.Manager.get方法来 恢复它的状态，传递 stateId 或者，如果此值（指stateId）没有指定时， 使用它的 id 作为参数。

结果对象被传递给 applyState 。 applyState 的默认实现只是简单地把属性拷贝到对象中， 但是开发者可以覆盖此方法以支持更多行为。

通过向 beforestaterestore, staterestore, beforestatesave 和 statesave 事件上绑定监听器，你可以在保存和恢复状态时进行额外的处理。

Component
style : String
被添加到组件元素的特定样式。 必须是按照...
被添加到组件元素的特定样式。 必须是按照 Ext.Element.applyStyles 类指定格式的合法参数值。

new Ext.Panel({
    title: 'Some Title',
    renderTo: Ext.getBody(),
    width: 400, height: 300,
    layout: 'form',
    items: [{
        xtype: 'textarea',
        style: {
            width: '95%',
            marginBottom: '10px'
        }
    },
        new Ext.Button({
            text: 'Send',
            minWidth: '100',
            style: {
                marginBottom: '10px'
            }
        })
    ]
});
Component
tabTip : String
注: 这个配置只用于当该组件作为TabPanel的一个子项目时使用...

注: 这个配置只用于当该组件作为TabPanel的一个子项目时使用。

一个String类型的innerHTML(支持html标签)，当鼠标放在该选项上的时，显示一个tooltip。为了tips能够被渲染，Ext.QuickTips.init()必须被提前调用。
BoxComponent
tbar : Object/Array
panel的顶部工具栏。 此参数可以是一个 The top toolbar of the panel. This can be a Ext.Toolbar 对象、一个工具栏配置、或者一个被添加到工具栏的...

panel的顶部工具栏。 此参数可以是一个 The top toolbar of the panel. This can be a Ext.Toolbar 对象、一个工具栏配置、或者一个被添加到工具栏的buttons/button配置数组。 注意，在渲染之后此参数无效。如需在渲染之后访问顶部工具栏，请使用 getTopToolbar。

注意:尽管Toolbar可以包含Field组件，但它们不会 通过加载祖先FormPanel而被更新。Panel的工具栏不是标准Container->Component 层次的一部分，所以它们不会被扫面以收集表单项。但是，这些值还是会 被提交，因为提交表单的参数是从DOM树中收集的。

Panel
tbarCfg : Object
一个DomHelper 元素的配置对象，描述了当前Panel的tbar元素结构。 另请参见...

一个DomHelper 元素的配置对象，描述了当前Panel的tbar元素结构。 另请参见 bodyCfg 。

Panel
title : String
被用作innerHTML的标题文本(接受html标签) ，用来显示在panel的...
被用作innerHTML的标题文本(接受html标签) ，用来显示在panel的 header 中(默认为'')。 当 title 被指定时， header 元素将会被自动创建并显示，除非 header 被显式地设置为 false 。 如果你不在配置时指定一个 title ， 但是你想以后设置，你必须要么 指定一个非空的 title (一个空格' ' 也可以)或者指定 header:true ，这样容器元素将会被创建。
Panel
titleCollapse : Boolean
将会允许通过在顶部工具条的任意地方点击展开和折叠panel(当...
true 将会允许通过在顶部工具条的任意地方点击展开和折叠panel(当 collapsible = true )， false ) 将会只允许通过点击工具按钮进行操作(默认为 false ))。如果当前panel是border布局中的一个子项目，另请参见 BorderLayout.Region floatable 配置项。
Panel
toolTemplate : Ext.Template/Ext.XTemplate
用来在header 元素中创建tools 的模板。默认为:...

用来在header 元素中创建tools 的模板。默认为:

                                    new Ext.Template('<div class="x-tool x-tool-{id}">&#160;</div>')

可以覆盖此参数，以便为基于更复杂XTemplate的tools提供自定义的DOM结构。 模板的数据为一个简单的tool配置对象(不是整个Array)， 它在 tools配置项指定。 在以下例子中，当鼠标滑过tool时，一个<a>标签被用来提供视觉效果:

var win = new Ext.Window({
    tools: [{
        id: 'download',
        href: '/MyPdfDoc.pdf'
    }],
    toolTemplate: new Ext.XTemplate(
        '<tpl if="id==\'download\'">',
            '<a class="x-tool x-tool-pdf" href="{href}"></a>',
        '</tpl>',
        '<tpl if="id!=\'download\'">',
            '<div class="x-tool x-tool-{id}">&#160;</div>',
        '</tpl>'
    ),
    width:500,
    height:300,
    closeAction:'hide'
});

注意，CSS类'x-tool-pdf'必须拥有一个关联的样式规则，它提供了一个适当的背景图片， 例如:

                                a.x-tool-pdf {background-image: url(../shared/extjs/images/pdf.gif)!important;}
Panel
tools : Array
一个工具按钮配置数组，用来添加到头部工具区域。 当渲染之后，每个工具都被存储为一个Element ，被一个叫做...
一个工具按钮配置数组，用来添加到头部工具区域。 当渲染之后，每个工具都被存储为一个Element ，被一个叫做 tools. <tool-type> 的公共参数引用。

每个工具配置都可以包含如下参数:

  • id : String
    必须。需要创建的工具类型。默认情况下，这被指定为一个 CSS类，格式为 x-tool- <tool-type> ，用来形成工具Element。 对于以下列出的工具类型，Ext提供了CSS规则，和一个包含图片的icon对象。 通过提供可选的CSS规则和背景图片，开发者可以实现自定义的工具:
      toggle (当collapsible 为 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
    • tc : Object
      工具配置对象
  • stopEvent : Boolean
    默认为true。指定为false可以允许点击事件进行冒泡。
  • scope : Object
    调用处理函数的作用域。
  • qtip : String/Object
    一个tip字符串，或者一个提供给 Ext.QuickTip.register 的配置参数
  • hidden : Boolean
    True将会在初始化时渲染成隐藏的。
  • on : Object
    一个监听器配置对象，以addListener所需的参数格式 指定事件监听器

注意，当panel被折叠时提供部分固定的工具，这些工具仅仅提供可视按钮。 所有必备的功能，都必须通过添加实现了必备行为的处理函数来实现。

示例用法:

tools:[{
    id:'refresh',
    qtip: 'Refresh form Data',
    // hidden:true,
    handler: function(event, toolEl, panel){
        // refresh logic
    }
},
{
    id:'help',
    qtip: 'Get Help',
    handler: function(event, toolEl, panel){
        // whatever
    }
}]

对于自定义 'help' 的id，定义了两个相应的css类，拥有一个到15x15图片的链接:

                                .x-tool-help {background-image: url(images/help.png);}
.x-tool-help-over {background-image: url(images/help_over.png);}
// if using an image sprite:
.x-tool-help {background-image: url(images/help.png) no-repeat 0 0;}
.x-tool-help-over {background-position:-15px 0;}
Panel
trackMouseOver : Boolean
设置为false将禁用鼠标滑过时高亮显示
TreePanel
unstyled : Boolean
覆盖 baseCls 设置为 baseCls = 'x-plain' ， 除了必须的属性之外，它将panel渲染成无样式的...
覆盖 baseCls 设置为 baseCls = 'x-plain' ， 除了必须的属性之外，它将panel渲染成无样式的，以便Ext布局功能能起作用 (例如overflow:hidden)。
Panel
useArrows : Boolean
设置为true将在树中使用Vista-style的箭头(默认值为 false)
TreePanel
width : Number
组件的宽度(默认值为 auto)。注:如果想使用百分比的方式...
组件的宽度(默认值为 auto)。注:如果想使用百分比的方式来设置值，请查看 Ext.Component.anchor。
BoxComponent
x : Number
如果被包含在一个指定位置的容器中，这个值表示x(left)坐标值。
BoxComponent
xtype : String
需要创建配置的xtype。 当传递一个配置对象给构造函数时...
需要创建配置的xtype。 当传递一个配置对象给构造函数时，此配置选项不会被使用。 只有在使用懒初始化的时候此配置项才会被使用，此时容器的子项目不是 通过一个完整的实例组件，而是通过一个Component配置指定的。 在渲染时，将会查找xtype以决定创建何种类型的子组件。

预定义的xtype列表如下： here。

如果你继承Component创建你自己的组件，你需要使用Ext.ComponentMgr.registerType 对它们进行注册，以便利用懒初始化和渲染机制。
Component
y : Number
如果被包含在一个指定位置的容器中，这个值表示y(top)坐标值。
BoxComponent

公共属性

Property Defined By
body : Ext.Element
Panel的body Element ，可以用来包含HTML内容。 内容可以在...
Panel的body Element ，可以用来包含HTML内容。 内容可以在html 配置项中指定，或者可以使用autoLoad 配置项被加载，或者通过Panel的Updater提供。 只读。

如果这被用来通过任意方式加载可视的HTML元素，那么Panel不可以被用作 一个Layout，用来容纳其它Panel。

如果当前Panel期望被用作一个Layout的宿主 (参见 layout) 那么body元素必须不能被加载或者改变---因为它处于Panel的Layout的控制 之下。

注意: 另请参见 el .

Panel
buttons : Array
Panel的按钮数组，它们从 buttons 配置属性创建。只读。
Panel
bwrap : Ext.Element
Panel的bwrapElement ，用来包含其它Panel元素(tbar, body, bbar, footer)。 参见 bodyCfg。 只读。
Panel
collapsed : Boolean
如果当前panel被折叠为true。只读。
Panel
dd : Ext.dd.DragSource.
如果当前Panel被配置为 draggable ，此参数将会包含一个 Ext.dd.DragSource 实例，它负责处理拖拽Panel...

如果当前Panel被配置为 draggable ，此参数将会包含一个 Ext.dd.DragSource 实例，它负责处理拖拽Panel。

开发者必须提供Ext.dd.DragSource的 抽象方法的实现，用来提供drag/drop过程中的每一步行为。 参见 draggable.
Panel
dragZone : Ext.tree.TreeDragZone
启用拖拽时此树使用的dragZone enableDD or enableDrag)
TreePanel
dropZone : Ext.tree.TreeDropZone
如果启用drop，此项为树所使用的dropZone enableDD or enableDrop)
TreePanel
el : Ext.Element
封装了当前组件的Ext.Element。 Read-only。通常情况下，这将是一个<DIV>元素，它由此类的...

封装了当前组件的Ext.Element。 Read-only。

通常情况下，这将是一个<DIV>元素，它由此类的 onRender方法创建，但是它可以通过使用 autoEl 配置项进行覆盖。

注意: 直到组件渲染完成此元素都将处于无效状态。

如需向当前组件的 DOM事件(而不是当前组件自己的Observable事件)添加监听器， 更多建议，参见 listeners 配置项，或者直接使用一个render监听器:

new Ext.Panel({
    title: 'The Clickable Panel',
    listeners: {
        render: function(p) {
            // Append the Panel to the click handler's argument list.
            p.getEl().on('click', handlePanelClick.createDelegate(null, [p], true));
        },
        single: true  // Remove the listener after first invocation
    }
});

另请参见 getEl

Component
footer : Ext.Element
Panel底部Element 。只读。此元素被用来容纳Panel的...
Panel底部Element 。只读。

此元素被用来容纳Panel的 buttons 或者 fbar 。

注意: 另请参见 el 的注释。

Panel
header : Ext.Element
Panel的headerElement. 只读。此元素被用来容纳 title和 tools...
Panel的headerElement. 只读。

此元素被用来容纳 title和 tools

注意: 另请参见 el 的注释。

Panel
hidden : Boolean
如果当前组件处于隐藏状态，此值为true。Read-only。
Component
initialConfig : Object
当前组件的初始化配置描述。 Read-only。
Component
ownerCt : Ext.Container
组件所属的Container (默认为undefined，当前组件被添加到一个容器中时此值被自动设置)...
组件所属的Container (默认为undefined，当前组件被添加到一个容器中时此值被自动设置)。 Read-only。

注意: 如需访问容器中的子组件，参见 itemId 。

Component
private : Object
我们只能在一块可见的区域进行布局。 布局目标*或者它的任何父元素* 为...
我们只能在一块可见的区域进行布局。 布局目标*或者它的任何父元素* 为display:none， 将意味着它没有一块可见的区域。
Container
refOwner : Ext.Container
如果当前组件是一个容器的孩子，并且是通过一个 ref 配置项被注册的，则此值为 ref 引用被插入到的祖先容器。
如果当前组件是一个容器的孩子，并且是通过一个 ref 配置项被注册的，则此值为 ref 引用被插入到的祖先容器。
Component
rendered : Boolean
如果当前组件已经被渲染了，此值为true。Read-only.
Component
root : Ext.tree.TreeNode
树的根节点。
TreePanel

公共方法

Method Defined By
TreePanel ( Object config )
参数:
  • config : Object
返回值:
  • void
TreePanel
add ( ...Object/Array component ) : Ext.Component/Array
向当前容器中添加 Component(s)。 描述 :在添加之前触发 beforeadd 事件...

向当前容器中添加 Component(s)。

描述 :

  • 在添加之前触发 beforeadd 事件
  • 将会相应地应用 容器的default config values (细节参见 defaults )。
  • 在组件添加之后触发 add 事件。

注意 :

  • 当调用 add 时如果容器已经被渲染， 你可能需要调用 doLayout 方法来刷新视图，它将导致所有尚未渲染的子组件进行渲染操作。 此操作是必须的，这样你可以 add 多个子组件而只刷新一次layout。 示例用法:

var tb = new Ext.Toolbar();
tb.render(document.body);  // toolbar is rendered
tb.add({text:'Button 1'}); // add multiple items (defaultType for Toolbar is 'button')
tb.add({text:'Button 2'});
tb.doLayout();             // refresh the layout
  • 警告: 使用BorderLayout布局的容器可能不能删除或者添加组件。 更多细节参见BorderLayout 的注释。
参数:
  • component : ...Object/Array

    需要添加的一个或多个组件，或者是一个组件数组。 更多信息参见 items 。

返回值:
  • Ext.Component/Array
    被添加的组件。
Container
addButton ( String/Object config , Function handler , Object scope ) : Ext.Button
向当前panel中添加一个按钮。注意，此方法必须在渲染之前调用。 首选的方式是通过...
向当前panel中添加一个按钮。注意，此方法必须在渲染之前调用。 首选的方式是通过buttons 配置项添加按钮。
参数:
  • config : String/Object
    一个合法的Ext.Button 配置。字符串将会变成默认按钮配置文本，对象将会被看做一个按钮配置对象。
  • handler : Function
    在按钮Ext.Button.click 时被调用的函数
  • scope : Object
    作用域( this 引用)，按钮处理函数将会在其中被执行。默认为Button.
返回值:
  • Ext.Button
    被添加的按钮
Panel
addClass ( string cls ) : Ext.Component
为组件底层的元素添加CSS样式。
为组件底层的元素添加CSS样式。
参数:
  • cls : string
    需要添加的CSS样式的class名称
返回值:
  • Ext.Component
    this
Component
addEvents( Object|String o, string Optional. ) : void
添加指定的事件到事件列表上，事件会被该Observable触发。
添加指定的事件到事件列表上，事件会被该Observable触发。
参数:
  • o : Object|String
    以事件名作为属性true作为值的对象 或者当多个事件名被分开的传递时则为第一个事件名。
  • Optional. : string
    事件名被分开的传递时则为事件名。 用法:
    this.addEvents('storeloaded', 'storecleared');
返回值:
  • void
Observable
addListener( String eventName, Function handler, [Object scope], [Object options] ) : void
给对象添加事件处理器。
给对象添加事件处理器。
参数:
  • eventName : String
    监听的事件名。
  • handler : Function
    事件调用的方法
  • scope : Object
    （可选）处理方法执行的作用域 (this的引用 reference)。 如果被忽略。默认为触发事件的对象。
  • options : Object
    （可选）包含处理器配置和属性的对象。 可能包含以下的属性:
    • scope : Object
      处理方法执行的作用域(this的引用) 。 如果被忽略。默认为触发事件的对象。
    • delay : Number
      在触发事件后延迟调用处理器的毫秒数。
    • single : Boolean
      如果为True则添加一个处理器来处理下一次的事件触发（仅一次），然后移除自己。
    • buffer : Number
      使得处理器延迟指定毫秒数后预定的运行在 一个Ext.util.DelayedTask中 。 如果事件在时间内再一次被触发，原始的处理器不会被调用，但是新的处理器会预定的在他的位置上。
    • target : Observable
      如果事件在目标的Observable上触发则仅仅调用处理器， 否则 事件会从子类的Observable上冒泡

    组合选项
    使用这些选项参数,可能会组合出不同类型的监听器：

    一个延迟的，一次性的监听器。

    myDataView.on('click', this.onClick, this, {
single: true,
delay: 100
});

    一次调用附加多个处理器
    该方法同样支持传递一个包含指定的多个处理器的属性的配置对象参数。

    myGridPanel.on({
'click' : {
    fn: this.onClick,
    scope: this,
    delay: 100
},
'mouseover' : {
    fn: this.onMouseOver,
    scope: this
},
'mouseout' : {
    fn: this.onMouseOut,
    scope: this
}
});

    或者一个简写的语法：

    myGridPanel.on({
'click' : this.onClick,
'mouseover' : this.onMouseOver,
'mouseout' : this.onMouseOut,
 scope: this
});
返回值:
  • void
Observable
bubble ( Function fn , [ Object scope ], [ Array args ] ) : Ext.Container
沿着component/container继承结构进行冒泡， 在每个组件上调用指定的函数。 所调用函数的作用域...
沿着component/container继承结构进行冒泡， 在每个组件上调用指定的函数。 所调用函数的作用域( this)将会是 指定的作用域或者是当前组件。 如果在函数任何一点上返回false，即停止冒泡过程
参数:
  • fn : Function
    需要调用的函数
  • scope : Object
    (可选) 函数的作用域(默认为当前节点)
  • args : Array
    (可选) 调用函数时需要传递的参数( 默认传递当前组件)
返回值:
  • Ext.Container
    this
Container
cloneConfig ( Object overrides ) : Ext.Component
默认使用原先传递给当前实例的配置值克隆当前组件。
默认使用原先传递给当前实例的配置值克隆当前组件。
参数:
  • overrides : Object
    一个新的配置项，包含需要覆盖到克隆版本的所有属性。 可以传递一个id参数给此对象，否则将自动生成一个新的id以避免发生重复。
返回值:
  • Ext.Component
    当前组件的克隆副本
Component
collapse ( Boolean animate ) : Ext.Panel
折叠panel的body，这样它就变成隐藏的。 触发beforecollapse 事件...
折叠panel的body，这样它就变成隐藏的。 触发beforecollapse 事件，处理函数返回false可以取消折叠操作。
参数:
  • animate : Boolean
    True将会在变换时使用动画效果，其它为false( 默认为panel的animCollapse 配置项的值)
返回值:
  • Ext.Panel
    this
Panel
collapseAll () : void
收起所有节点
收起所有节点
参数:
  • 无。
返回值:
  • void
TreePanel
destroy () : void
通过如下方法销毁对象：删除所有的事件监听器、将组件的元素从DOM树中删除...
通过如下方法销毁对象：删除所有的事件监听器、将组件的元素从DOM树中删除（如果可以）、 将组件从它的 Ext.Container（如果可用）中删除、 并且将它从Ext.ComponentMgr中 注销。 销毁操作一般由框架自动完成，一般情况下不需要直接调用该方法。
参数:
  • 无。
返回值:
  • void
Component
enableBubble( String/Array events ) :void
是否现在使得事件会被该Observable触发并调用 this.getBubbleTarget()方法在拥有者的继承树...

是否现在使得事件会被该Observable触发并调用 this.getBubbleTarget()方法在拥有者的继承树中冒泡。Observable的基础类中没有该方法的实现。

该方法一般被Ext.Components用来冒泡事件到拥有者的容器。参看Ext.Component.getBubbleTarget默认的实现 在Ext.Component中返回组件的直接拥有者。但是如果需要的是一个已知的目标，该方法可以被重写来更快的访问需求的目标。

例子:

Ext.override(Ext.form.Field, {
    // 添加方法到Field的initComponent上改变事件为冒泡
    initComponent : Ext.form.Field.prototype.initComponent.createSequence(function() {
        this.enableBubble('change');
    }),

    // 我们知道我们想让Field的事件冒泡到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() {
            // 如果样式被修改标题会变红。
            myForm.header.setStyle('color', 'red');
        }
    }
});
参数:
  • events : String/Array
    冒泡的事件名，或事件名数组
返回值:
  • void
Observable
expand ( Boolean animate ) : Ext.Panel
展开panel的body以便让其变得可见。 触发beforeexpand 事件...
展开panel的body以便让其变得可见。 触发beforeexpand 事件，如果它返回false将会取消展开操作。
参数:
  • animate : Boolean
    True将会在变换过程中使用动画效果，否则为false (默认为panel的 animCollapse 配置项的值)
返回值:
  • Ext.Panel
    this
Panel
expandAll () : void
展开所有节点。
展开所有节点。
参数:
  • 无。
返回值:
  • void
TreePanel
expandPath ( String path , [ String attr ], [ Function callback ] ) : void
展开当前TreePanel中的指定路径。 可以使用 Ext.data.Node.getPath 方法从一个节点中获取路径。
展开当前TreePanel中的指定路径。 可以使用 Ext.data.Node.getPath 方法从一个节点中获取路径。
参数:
  • path : String
  • attr : String
    可选 path中使用的参数(更多信息参见Ext.data.Node.getPath)
  • callback : Function
    可选 展开完成时的回调方法。回调方法将被传入以下参数： (bSuccess, oLastNode)。 bSuccess是展开是否成功标志，oLastNode为被展开的节点。
返回值:
  • void
TreePanel
findParentBy ( Function fn ) : Ext.Container
通过自定义的函数查找当前组件上层任何层次上的容器...
通过自定义的函数查找当前组件上层任何层次上的容器。 如果传递的函数返回true，容器对象将被返回。
参数:
  • fn : Function
    自定义的函数，使用如下参数调用(container,this component)。
返回值:
  • Ext.Container
    自定义函数返回true的第一个容器
Component
findParentByType ( String/Class xtype ) : Ext.Container
通过xtype或者class查找当前组件上层任何层次上的容器
通过xtype或者class查找当前组件上层任何层次上的容器
参数:
  • xtype : String/Class
    组件的xtype字符串，或者直接是组件的class
返回值:
  • Ext.Container
    符合指定xtype或者class的第一个容器
Component
fireEvent( String eventName, Object... args ) : Boolean
用传入的参数触发指定的事件 (减去事件名)。 一个事件可以被设置为冒泡 Obse...

用传入的参数触发指定的事件 (减去事件名)。

一个事件可以被设置为冒泡到Observable父类继承树(参看 Ext.Component.getBubbleTarget) 调用enableBubble实现。

参数:
  • eventName : String
    触发的事件名。
  • args : Object...
    传递给处理器的可变长度参数。
返回值:
  • Boolean
    如果有任何的处理器返回false则返回false，否则返回true。
Observable
focus ( [ Boolean selectText ], [ Boolean/Number delay ] ) : Ext.Component
尝试将当前组件设为焦点。
尝试将当前组件设为焦点。
参数:
  • selectText : Boolean
    (可选) 如果可用，同时选中组件内部的文本
  • delay : Boolean/Number
    (可选)将当前组件设置为焦点的延迟时间(设置为true等于0毫秒)
返回值:
  • Ext.Component
    this
Component
get ( String/Number key ) : Ext.Component
获取当前容器包含的一个组件( items.get(key)方法的别名)
获取当前容器包含的一个组件( items.get(key)方法的别名)
参数:
  • key : String/Number
    组件的索引
返回值:
  • Ext.Component
    Ext.Component
Container
getBottomToolbar () : Ext.Toolbar
返回panel底部区域toolbar ( bbar )。
返回panel底部区域toolbar ( bbar )。
参数:
  • 无。
返回值:
  • Ext.Toolbar
    toolbar
Panel
getBox ( [ Boolean local ] ) : Object
获取组件底层元素当前盒子模型的尺寸。（译者注：盒子模型是CSS术语，详细解释请自行搜索。）
获取组件底层元素当前盒子模型的尺寸。（译者注：盒子模型是CSS术语，详细解释请自行搜索。）
参数:
  • local : Boolean
    (可选)值为true时，组件的left值和top值将代替页面的XY被返回。(默认值为false)
返回值:
  • Object
    返回值的格式{x, y, width, height}
BoxComponent
getBubbleTarget () : Ext.Container
为Observable的fireEvent方法提供链接，它沿着继承结构进行冒泡操作。
为Observable的fireEvent方法提供链接，它沿着继承结构进行冒泡操作。
参数:
  • 无。
返回值:
  • Ext.Container
    拥有当前组件的容器。
Component
getChecked ( [ String attribute ], [ TreeNode startNode ] ) : Array
获得选中的节点列表，或者被选中节点的某个指定的属性数组(例如："id")
获得选中的节点列表，或者被选中节点的某个指定的属性数组(例如："id")
参数:
  • attribute : String
    可选 默认为空 (返回实际节点)
  • startNode : TreeNode
    可选 节点的起点，默认为根节点
返回值:
  • Array
TreePanel
getEl () : Ext.Element
返回 Ext.Element ，它包装了当前组件。...

返回 Ext.Element ，它包装了当前组件。

通常情况下，这将是一个<DIV>元素，它是由该类的onRender方法创建的， 但是可以使用autoEl配置项 覆盖它。

注意: 此元素将会一直处于无效状态直到当前组件渲染完成。

如需向当前组件的 DOM事件(而不是当前组件自己的Observable事件)添加监听器， 更多建议，参见 listeners 配置项，或者直接使用一个render监听器:

new Ext.Panel({
    title: 'The Clickable Panel',
    listeners: {
        render: function(p) {
            // Append the Panel to the click handler's argument list.
            p.getEl().on('click', handlePanelClick.createDelegate(null, [p], true));
        },
        single: true  // Remove the listener after first invocation
    }
});
参数:
  • 无。
返回值:
  • Ext.Element
    包装当前组件的元素。
Component
getFooterToolbar () : Ext.Toolbar
返回panel底部( fbar )区域的toolbar
返回panel底部( fbar )区域的toolbar
参数:
  • 无。
返回值:
  • Ext.Toolbar
    toolbar
Panel
getFrameHeight () : Number
返回当前panel框架元素的高度像素值 (包括所有top和bottom工具栏以及header和footer元素...
返回当前panel框架元素的高度像素值 (包括所有top和bottom工具栏以及header和footer元素， 但是不包括body高度)。 如需获取body高度，参见 getInnerHeight.
参数:
  • 无。
返回值:
  • Number
    框架高度
Panel
getFrameWidth () : Number
返回当前panel框架元素的宽度像素值 (不包含body宽度)。如需获得body宽度，参见...
返回当前panel框架元素的宽度像素值 (不包含body宽度)。如需获得body宽度，参见 getInnerWidth。
参数:
  • 无。
返回值:
  • Number
    框架宽度
Panel
getHeight () : Number
获取该组件的当前高度值。
获取该组件的当前高度值。
参数:
  • 无。
返回值:
  • Number
BoxComponent
getId () : String
返回当前组件的id，如果没有定义id，则自动生成并返回一个id:'ext-comp-'...
返回当前组件的 id 如果没有定义 id 则自动生成并返回一个 id

'ext-comp-' + (++Ext.Component.AUTO_ID)
参数:
  • 无。
返回值:
  • String
    id
Component
getInnerHeight () : Number
返回body元素的高度像素值(不包括任何框架元素的高度)。 对于框架高度参见...
返回body元素的高度像素值(不包括任何框架元素的高度)。 对于框架高度参见 getFrameHeight。
参数:
  • 无。
返回值:
  • Number
    body高度
Panel
getInnerWidth () : Number
返回body元素宽度像素值(不包含任何框架元素的宽度)。 对于框架宽度，参见 getFrameWidth。
返回body元素宽度像素值(不包含任何框架元素的宽度)。 对于框架宽度，参见 getFrameWidth。
参数:
  • 无。
返回值:
  • Number
    body宽度
Panel
getItemId () : String
返回当前组件的 itemId 。 如果没有通过配置参数指定 itemId 那么，将会使用...
返回当前组件的 itemId 。 如果没有通过配置参数指定 itemId 那么，将会使用 getId 返回 id 。
参数:
  • 无。
返回值:
  • String
Component
getLayoutTarget () : Ext.Element
返回当前容器中用来包含子组件的元素。提供了一个 可以返回容器的...

返回当前容器中用来包含子组件的元素。

提供了一个 可以返回容器的Element 的实现， 但是，如果容器有更复杂的结构， 可以覆盖此实现以返回 layout 在其中渲染子组件的元素。

参数:
  • 无。
返回值:
  • Ext.Element
    在其中渲染子组件的元素。
Container
getLoader () : Ext.tree.TreeLoader
返回当前TreePanel默认的Ext.tree.TreeLoader。
返回当前TreePanel默认的Ext.tree.TreeLoader。
参数:
  • 无。
返回值:
  • Ext.tree.TreeLoader
    当前TreePanel的TreeLoader。
TreePanel
getNodeById ( String id ) : Node
根据id从树中获取节点
根据id从树中获取节点
参数:
  • id : String
返回值:
  • Node
TreePanel
getOuterSize () : Object
获取当前组件所在元素的尺寸大小，包括边缘的空白处。
获取当前组件所在元素的尺寸大小，包括边缘的空白处。
参数:
  • 无。
返回值:
  • Object
    一个包含元素大小的对象 {width: (element width + left/right margins), height: (element height + top/bottom margins)}
BoxComponent
getPosition ( [ Boolean local ] ) : Array
获取组件底层元素当前的XY位置。
获取组件底层元素当前的XY位置。
参数:
  • local : Boolean
    (可选)如果为true，将返回元素的left和top值，而不是相对于页面内的 XY。(默认值为 false)
返回值:
  • Array
    元素的XY位置值(例如：[100, 200])
BoxComponent
getResizeEl () : Ext.Element
返回该组件的最外层用来定义这些组件整体大小的Element...

返回该组件的最外层用来定义这些组件整体大小的Element对象。

通常用 getEl 方法将会返回相同的Element对象，但在有些情况下，组件可能有一些更多的封装了它的主要动态Element对象的Element对象。

例如ComboBox。它是封装在一个包含<input>元素的包装元素里(这将返回其 getEl方法和触发按钮的元素)。返回的元素为resizeEl。

参数:
  • 无。
返回值:
  • Ext.Element
    The Element which is to be resized by size managing layouts.
BoxComponent
getRootNode () : Node
返回当前树的root节点
返回当前树的root节点
参数:
  • 无。
返回值:
  • Node
TreePanel
getSelectionModel () : TreeSelectionModel
返回此TreePanel使用的选择模型。
返回此TreePanel使用的选择模型。
参数:
  • 无。
返回值:
  • TreeSelectionModel
    被这个TreePanel 使用的选择模型
TreePanel
getSize () : Object
获取组件底层元素当前的大小。
获取组件底层元素当前的大小。
参数:
  • 无。
返回值:
  • Object
    一个包含元素大小的对象{width: (element width), height: (element height)}
BoxComponent
getTool ( String id ) : Object
根据id获取一个tool.
根据id获取一个tool.
参数:
  • id : String
返回值:
  • Object
    tool
Panel
getTopToolbar () : Ext.Toolbar
返回panel顶部区域的 toolbar ( tbar ).
返回panel顶部区域的 toolbar ( tbar ).
参数:
  • 无。
返回值:
  • Ext.Toolbar
    toolbar
Panel
getTreeEl () : Ext.Element
返回当前树底层的元素
返回当前树底层的元素
参数:
  • 无。
返回值:
  • Ext.Element
    The Element
TreePanel
getWidth () : Number
获取该组件的当前宽度值。
获取该组件的当前宽度值。
参数:
  • 无。
返回值:
  • Number
BoxComponent
getXType () : String
获取当前组件的xtype，它是用 Ext.ComponentMgr 注册的。 所有可用的xtype列表，参见...
获取当前组件的xtype，它是用 Ext.ComponentMgr 注册的。 所有可用的xtype列表，参见 Ext.Component 类头部。示例用法:

var t = new Ext.form.TextField();
alert(t.getXType());  // alerts 'textfield'
参数:
  • 无。
返回值:
  • String
    The xtype
Component
getXTypes () : String
返回此组件的xtype继承树，用字符'-'分隔。 所有可用的xtype值...

返回此组件的xtype继承树，用字符'-'分隔。 所有可用的xtype值，请参见Ext.Component 类的头部。

如果使用你自己的子类，请注意，组件必须注册它自己的xtype值以便区别于继承的xtype。

示例用法:

var t = new Ext.form.TextField();
alert(t.getXTypes());  // alerts 'component/box/field/textfield'
参数:
  • 无。
返回值:
  • String
    xtype层次字符串
Component
hasListener( String eventName ) : Boolean
检测对象是否包含指定事件的任何监听器
检测对象是否包含指定事件的任何监听器
参数:
  • eventName : String
    检测的事件名
返回值:
  • Boolean
    如果事件被监听则为true，否则为false
Observable
hide () : Ext.Component
隐藏当前组件。 监听 beforehide' 事件并且返回false 可以取消隐藏组件的操作。 在隐藏组件之后触发...
隐藏当前组件。 监听 beforehide' 事件并且返回false 可以取消隐藏组件的操作。 在隐藏组件之后触发 ' hide' 事件。 如果组件被配置成 hidden 那么此方法在内部被调用。
参数:
  • 无。
返回值:
  • Ext.Component
    this
Component
isVisible () : Boolean
如果当前组件可见，返回true。
如果当前组件可见，返回true。
参数:
  • 无。
返回值:
  • Boolean
    如果当前组件可见，返回true，其它返回false。
Component
isXType ( String xtype , [ Boolean shallow ] ) : Boolean
Tests whether or not this Component is of a specific xtype. This can test whether this Component is descended from th...

测试此组件是否是指定的xtype。此方法既可以测试是否是指定的xtype的某个子类， 或者它是否直接是指定的xtype类(shallow=true)。

如果使用你自己的子类，必须知道组件必须注册它的xtype值。

所有可用的xtype列表，参见 Ext.Component 类头部。

示例用法:

var t = new Ext.form.TextField();
var isText = t.isXType('textfield');        // true
var isBoxSubclass = t.isXType('box');       // true, descended from BoxComponent
var isBoxInstance = t.isXType('box', true); // false, not a direct BoxComponent instance
参数:
  • xtype : String
    需要为当前组件进行检测的xtype
  • shallow : Boolean
    (可选) 如果为false，检测组件是否是xtype继承树中的某个子类（默认是这种情况）， 如果为true，只检测组件是否是指定的xtype类型。
返回值:
  • Boolean
    如果当前组件是指定xtype的子类，返回true，其它返回flase。
Component
mon ( Observable|Element item , Object|String ename , Function fn , Object scope , Object opt ) : void
向任何Observable对象(或者元素)上添加监听器，监听器将会在组件...

向任何Observable对象(或者元素)上添加监听器，监听器将会在组件销毁时被自动删除。
用法：

myGridPanel.mon(myGridPanel.getSelectionModel(), 'selectionchange', handleSelectionChange, null, {buffer: 50});

or:

myGridPanel.mon(myGridPanel.getSelectionModel(), {
    selectionchange: handleSelectionChange,
    buffer: 50
});
参数:
  • item : Observable|Element
    需要添加listener/listeners的项目。
  • ename : Object|String
    事件名，或者一个包含事件名属性的对象。
  • fn : Function
    (可选) 如果 ename 参数是一个事件名，此参数为处理函数。
  • scope : Object
    (可选)如果 ename 参数是一个事件名称，此参数是作用域 ( this 引用)，监听函数将会在此作用域中被执行。
  • opt : Object
    (可选)如果 ename 参数是一个事件名称， 此参数是 addListener 配置项。
返回值:
  • void
Component
mun ( Observable|Element item , Object|String ename , Function fn , Object scope ) : void
删除通过mon 方法添加的监听器。
删除通过mon 方法添加的监听器。
参数:
  • item : Observable|Element
    需要删除listener/listeners的项目。
  • ename : Object|String
    事件名称，或者一个包含事件名称属性的对象。
  • fn : Function
    (可选)如果 ename 参数是一个事件名称，此参数是一个处理函数。
  • scope : Object
    (可选)如果 ename 参数是一个事件名称，此参数是作用域 ( this 引用)，监听函数将会在此作用域中被执行。
返回值:
  • void
Component
nextSibling () : Ext.Component
返回所属容器中的下一个组件
返回所属容器中的下一个组件
参数:
  • 无。
返回值:
  • Ext.Component
Component
on( String eventName, Function handler, [Object scope], [Object options] ) : void
给对象添加事件处理器 (addListener的简写形式)
给对象添加事件处理器 (addListener的简写形式。)
参数:
  • eventName : String
    监听的事件类型
  • handler : Function
    事件调用的方法
  • scope : Object
    （可选）处理方法执行时的作用域 (this 的引用)。 如果被忽略。默认为触发事件的对象。
  • options : Object
    可选 包含处理器配置的对象。
返回值:
  • void
Observable
previousSibling () : Ext.Component
返回所属容器中的前一个组件
返回所属容器中的前一个组件
参数:
  • 无。
返回值:
  • Ext.Component
Component
purgeListeners() : void
移除对象上所有的监听器
移除对象上所有的监听器
参数:
  • 无。
返回值:
  • void
Observable
relayEvents( Object o, Array events ) : void
从指定的Observable上传递选择的事件就好像被当前对象触发一样。
从指定的Observable上传递选择的事件就好像被当前对象触发一样。
参数:
  • o : Object
    该Observable上的事件被当前对象传递。
  • events : Array
    传递的数组名。
返回值:
  • void
Observable
removeClass ( string cls ) : Ext.Component
从组件底层的元素上删除一个CSS类。
从组件底层的元素上删除一个CSS类。
参数:
  • cls : string
    需要移除的CSS类名
返回值:
  • Ext.Component
    this
Component
removeListener( String eventName, Function handler, [Object scope] ) : void
删除一个事件处理器。
删除一个事件处理器。
参数:
  • eventName : String
    处理器关联的事件类型。
  • handler : Function
    移除的处理器。 这应该是传递到addListener里的方法的引用。
  • scope : Object
    （可选）处理器指定的初始作用域。
返回值:
  • void
Observable
render ( [ Element/HTMLElement/String container ], [ String/Number position ] ) : void
在传递进来的HTML元素中渲染当前组件。...

在传递进来的HTML元素中渲染当前组件。

如果你正在使用一个Container 对象放置当前组件，那么请不要使用render方法。

当容器第一次被渲染时，它的子组件将会被容器的 layout 管理器渲染。

某些布局管理器允许动态添加子组件。它们包括 Ext.layout.CardLayout, Ext.layout.AnchorLayout, Ext.layout.FormLayout, Ext.layout.TableLayout。

当一个新的子组件被添加时，如果容器已经被渲染了， 你可能需要调用容器的 doLayout 方法来刷新视图，它将导致所有没有被渲染的子组件进行渲染操作。 此操作是必须的，这样你可以添加多个子组件而只刷新一次layout。

当创建复杂的UI时，非常重要的一点是，请记住调整子项目的尺寸和位置是容器的 layout 管理器的职责。 如果你希望子项目的尺寸对用户交互作出反应， 你必须为容器配置一个布局管理器，它将创建和管理你心里想要的那种布局。

忽略容器的layout 配置意味着将会使用一个基本的布局管理器，它除了按次序把子组件 渲染到容器中之外什么事情都不做。 这种情况下，任何尺寸和位置的调整操作都不会发生。

参数:
  • container : Element/HTMLElement/String
    (可选) 需要在其中渲染当前组件的元素。 如果它是从一个已存在的标签中创建的，此参数应该被忽略。
  • position : String/Number
    (可选) 容器中的一个元素ID或者一个DOM节点索引， 当前组件将会被插入到它前面 (默认append到容器的尾部)
返回值:
  • void
Component
resumeEvents() : void
重新开始触发事件。(参见suspendEvents) 如果事件以queueSuspended参数被挂起，则在事件被挂起时 ...
重新开始触发事件。(参见 suspendEvents) 如果事件以queueSuspended 参数被挂起，则在事件被挂起时触发的事件会被传递到所有的监听器上
参数:
  • 无。
返回值:
  • void
Observable
selectPath ( String path , [ String attr ], [ Function callback ] ) : void
从树中选中所给路径的节点。 可以用 Ext.data.Node.getPath 获得一个节点的路径。
从树中选中所给路径的节点。 可以用 Ext.data.Node.getPath 获得一个节点的路径。
参数:
  • path : String
  • attr : String
    可选 path中使用的属性(更多信息参见Ext.data.Node.getPath)
  • callback : Function
    可选 当选中操作结束时的回调函数。回调函数将以 (bSuccess, oSelNode)参数调用。 其中bSuccess是选中是否成功的标志，oSelNode为选中的节点。
返回值:
  • void
TreePanel
setAutoScroll ( Boolean scroll ) : Ext.BoxComponent
设置该组件内容溢出时是否自动显示滚动条。
设置该组件内容溢出时是否自动显示滚动条。
参数:
  • scroll : Boolean
    值为true的话组件自动显示滚动条。
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setHeight ( Mixed height ) : Ext.BoxComponent
设置此组件的高度。该方法将触发resize事件。
设置此组件的高度。该方法将触发resize事件。
参数:
  • height : Mixed
    The new height to set.
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setIconClass ( String cls ) : void
设置CSS类，为当前panel提供图标图片。 如果已经设置了...
设置CSS类，为当前panel提供图标图片。 如果已经设置了，此方法将会替换任何现有的图标类并在完成之后触发 iconchange 事件。
参数:
  • cls : String
    新的CSS类名
返回值:
  • void
Panel
setPagePosition ( Number x , Number y ) : Ext.BoxComponent
设置组件在页面中的XY位置。 如果需要设置left和top值 ，请使用...
设置组件在页面中的XY位置。 如果需要设置left和top值 ，请使用setPosition方法。 该方法触发move事件。
参数:
  • x : Number
    The new x position
  • y : Number
    The new y position
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setPosition ( Number left , Number top ) : Ext.BoxComponent
设置组件的left和top值。设置组件的页面XY值，请使用setPagePosition方法。该方法触发...
设置组件的left和top值。设置组件的页面XY值，请使用setPagePosition方法。该方法触发move事件。
参数:
  • left : Number
    The new left
  • top : Number
    The new top
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setRootNode ( Node node ) : Node
在初始化的时候设置树的根节点。
在初始化的时候设置树的根节点。
参数:
  • node : Node
返回值:
  • Node
TreePanel
setSize ( Mixed width , Mixed height ) : Ext.BoxComponent
设置BoxComponent的宽度和高度。 此方法触发resize事件...
设置BoxComponent的宽度和高度。 此方法触发resize事件。此方法可以接收单独的width或者height值作为参数， 或者你可以传递像这样的一个size对象： {width:10, height:20} 。
参数:
  • width : Mixed
    设置的新的width值。这可以是：
    • 一个Number类型指定Element新的宽度 Ext.Element.defaultUnit(默认为像素 :'px')。
    • 一个String类型用于设置width的CSS样式。
    • 一个size对象格式为 {width: widthValue, height: heightValue} 。
    • 值为 undefined 时，保留原来的width不变。
  • height : Mixed
    设置的新的height值(如果第一个参数传递了一个size对象，此参数没有必要传递)。这可以是：
    • 一个Number类型指定Element新的高度 Ext.Element.defaultUnit(默认为像素 :'px')。
    • 一个String类型用于设置height的CSS样式。也有可能不会被使用到。
    • 值为 undefined 时，保留原来的height不变。
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setTitle ( String title , [ String iconCls ] ) : void
为panel设置标题文本，也可选择设置 icon class。...

为panel设置标题文本，也可选择设置 icon class。

为了能够设置标题，必须已经为Panel创建了一个header元素。 要么通过向Panel上注册一个非空的 title ，或者配置 header: true ，可触发此操作(译者注：指为Panel创建header元素)。

参数:
  • title : String
    需要设置的标题文本
  • iconCls : String
    (可选) iconCls 一个用户定义的CSS类，为当前panel提供图标图片。
返回值:
  • void
Panel
setVisible ( Boolean visible ) : Ext.Component
工具方法，通过使用布尔值隐藏或者显示当前组件。
工具方法，通过使用布尔值隐藏或者显示当前组件。
参数:
  • visible : Boolean
    true时显示，false时隐藏
返回值:
  • Ext.Component
    this
Component
setWidth ( Mixed width ) : Ext.BoxComponent
设置组件的宽度。 此方法触发resize事件。
设置组件的宽度。 此方法触发resize事件。
参数:
  • width : Mixed
    The new width to set.
返回值:
  • Ext.BoxComponent
    this
BoxComponent
show () : Ext.Component
显示当前组件。监听' beforeshow' 事件，返回 false 取消显示组件...
显示当前组件。监听' beforeshow' 事件，返回 false 取消显示组件。在显示组件之后触发' show' 事件。
参数:
  • 无。
返回值:
  • Ext.Component
    this
Component
suspendEvents( Boolean queueSuspended ) : void
暂停触发所有的事件。 (参看resumeEvents)
暂停触发所有的事件。（参看 resumeEvents)
参数:
  • queueSuspended : Boolean
    如果传递为true则排列好暂停的事件使得在调用 resumeEvents 后再触发它们，而不是抛弃所有暂停的事件。
返回值:
  • void
Observable
syncSize () : Ext.BoxComponent
强制组件的大小按照此组件底层元素当前的高度和宽度计算。
强制组件的大小按照此组件底层元素当前的高度和宽度计算。
参数:
  • 无。
返回值:
  • Ext.BoxComponent
    this
BoxComponent
toggleCollapse ( Boolean animate ) : Ext.Panel
根据panel的当前状态，执行expand或者 collapse操作 的快捷方式。
根据panel的当前状态，执行expand或者 collapse操作 的快捷方式。
参数:
  • animate : Boolean
    True将会在转换过程中使用动画效果，否则为false (默认为panel的animCollapse 配置项的值)
返回值:
  • Ext.Panel
    this
Panel
un( String eventName, Function handler, [Object scope] ) : void
删除一个事件处理器(removeListener方法的简写形式)
删除一个事件处理器(removeListener方法的简写形式。)
参数:
  • eventName : String
    处理器关联的事件类型
  • handler : Function
    被删除的处理器 这应该是传入 addListener 中的方法的引用。
  • scope : Object
    （可选）为处理器指定的初始作用域。
返回值:
  • void
Observable
update ( Mixed htmlOrData , [ Boolean loadScripts ], [ Function callback ] ) : void
刷新组件的内部区域。
刷新组件的内部区域。
参数:
  • htmlOrData : Mixed
    如果已经通过tpl为当前组件配置了一个模板，那么 将会使用此参数来装配模板。 如果没有为当前组件配置模板，组件的内容区域将会通过Ext.Element 进行刷新。
  • loadScripts : Boolean
    (可选)只用在使用html配置时此参数才合法。默认为false。
  • callback : Function
    (可选)只用在使用html配置时此参数才合法。 当脚本加载完成时回调函数才被执行。
返回值:
  • void
Component
updateBox ( Object box ) : Ext.BoxComponent
设置此组件底层元素的盒子模型尺寸。(译者注：盒子模型是CSS术语，详细资料请自行搜索。)
设置此组件底层元素的盒子模型尺寸。(译者注：盒子模型是CSS术语，详细资料请自行搜索。)
参数:
  • box : Object
    一个格式为{x, y, width, height}的对象
返回值:
  • Ext.BoxComponent
    this
BoxComponent

公共事件

Event Defined By
activate : ( Ext.Panel p )
当Panel被设置为视觉活动状态之后触发。 注意Panel不直接支持活动状体，但是Panel的一些子类...
当Panel被设置为视觉活动状态之后触发。 注意Panel不直接支持活动状体，但是Panel的一些子类 (例如 Ext.Window)支持。 作为TabPanel子组件的Panel，在TabPanel的控制之下触发activate和deactivate事件。
监听器将会以如下参数格式被调用:
  • p : Ext.Panel
    被激活的Panel.
Panel
added : ( Ext.Component this , Ext.Container ownerCt , number index )
当一个组件被添加到一个Ext.Container时触发
当一个组件被添加到一个Ext.Container时触发
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • ownerCt : Ext.Container
    用于组件的容器
  • index : number
    添加组件的位置
Component
afterlayout : ( Ext.Container this , ContainerLayout layout )
当容器中的组件被指定的布局管理器排列的时候触发。
当容器中的组件被指定的布局管理器排列的时候触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Container
  • layout : ContainerLayout
    为当前容器提供的ContainerLayout实现
Container
afterrender : ( Ext.Component this )
在组件渲染完成之后触发...

在组件渲染完成之后触发。

afterrender事件在当前组件被rendered 结束之后、在为组件定义的所有afterRender方法执行之后 触发，并且，如果有stateful， 也在状态被保存之后才触发。

监听器将会以如下参数格式被调用:
  • this : Ext.Component
Component
append : ( Tree tree , Node parent , Node node , Number index )
当一个节点被添加到树中的另一个节点后面时触发。
当一个节点被添加到树中的另一个节点后面时触发。
监听器将会以如下的参数格式调用:
  • tree : Tree
    所属树
  • parent : Node
    父节点
  • node : Node
    新连接的节点
  • index : Number
    新连接节点的索引
TreePanel
beforeappend : ( Tree tree , Node parent , Node node )
当一个新的节点被添加到树中之前触发， 返回false取消添加。
当一个新的节点被添加到树中之前触发， 返回false取消添加。
监听器将会以如下的参数格式调用:
  • tree : Tree
    所属树
  • parent : Node
    父节点
  • node : Node
    被连接的孩子节点
TreePanel
beforechildrenrendered : ( Node node )
在一个节点的子节点渲染之前触发
在一个节点的子节点渲染之前触发
监听器将会以如下的参数格式调用:
  • node : Node
    The node
TreePanel
beforeclick : ( Node node , Ext.EventObject e )
在处理节点的点击操作之前触发。返回false取消默认的操作。
在处理节点的点击操作之前触发。返回false取消默认的操作。
监听器将会以如下的参数格式调用:
  • node : Node
    The node
  • e : Ext.EventObject
    事件对象
TreePanel
beforeclose : ( Ext.Panel p )
在Panel被关闭之前触发。 注意，Panel不直接支持关闭操作，但是Panel的一些子类(例如...
在Panel被关闭之前触发。 注意，Panel不直接支持关闭操作，但是Panel的一些子类(例如 Ext.Window) ，或者一个位于Ext.TabPanel中的Panel支持。 此事件仅被应用到这些子类中。处理函数可以返回false以取消关闭操作。
监听器将会以如下参数格式被调用:
  • p : Ext.Panel
    正在被关闭的Panel.
Panel
beforecollapse : ( Ext.Panel p , Boolean animate )
在Panel被折叠之前触发。监听器可以返回false取消折叠。
在Panel被折叠之前触发。监听器可以返回false取消折叠。
监听器将会以如下参数格式被调用:
  • p : Ext.Panel
    被折叠的Panel
  • animate : Boolean
    如果折叠操作使用了动画效果，此参数为true，其它为false
Panel
beforecollapsenode : ( Node node , Boolean deep , Boolean anim )
当一个节点收起之前触发，返回false取消操作。
当一个节点收起之前触发，返回false取消操作。
监听器将会以如下的参数格式调用:
  • node : Node
    The node
  • deep : Boolean
  • anim : Boolean
TreePanel
beforedblclick : ( Node node , Ext.EventObject e )
在双击一个节点前触发。取消默认行为时返回false
在双击一个节点前触发。取消默认行为时返回false
监听器将会以如下的参数调用:
  • node : Node
    The node
  • e : Ext.EventObject
    事件对象
TreePanel
beforedestroy : ( Ext.Component this )
在组件 destroyed 之前触发。 在事件监听器中返回false以停止 destroy 操作。
在组件 destroyed 之前触发。 在事件监听器中返回false以停止 destroy 操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforeexpand : ( Ext.Panel p , Boolean animate )
在Panel被展开之前触发。监听器可以返回false取消展开操作。
在Panel被展开之前触发。监听器可以返回false取消展开操作。
监听器将会以如下参数格式被调用:
  • p : Ext.Panel
    被展开的Panel
  • animate : Boolean
    如果展开操作使用动画效果，为true，其它为false
Panel
beforeexpandnode : ( Node node , Boolean deep , Boolean anim )
当一个新的孩子节点被插入到树中之前触发， 返回false取消插入操作。
当一个新的孩子节点被插入到树中之前触发， 返回false取消插入操作。
监听器将会以如下的参数格式调用:
  • node : Node
    The node
  • deep : Boolean
  • anim : Boolean
TreePanel
beforehide : ( Ext.Component this )
在调用hide方法隐藏组件之前触发。 在事件监听器中返回false可以停止隐藏操作。
在调用hide方法隐藏组件之前触发。 在事件监听器中返回false可以停止隐藏操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforeinsert : ( Tree tree , Node parent , Node node , Node refNode )
当一个新的孩子节点被插入到树中之前触发， 返回false取消插入操作。
当一个新的孩子节点被插入到树中之前触发， 返回false取消插入操作。
监听器将会以如下的参数格式调用:
  • tree : Tree
    所属树
  • parent : Node
    父节点
  • node : Node
    需要插入的子节点
  • refNode : Node
    孩子节点将插入到其前面的节点
TreePanel
beforeload : ( Node node )
在节点加载之前触发，返回false取消操作。
在节点加载之前触发，返回false取消操作。
监听器将会以如下的参数格式调用:
  • node : Node
    将被加载的节点
TreePanel
beforemovenode : ( Tree tree , Node node , Node oldParent , Node newParent , Number index )
当一个节点被移动到树中的另一个位置之前触发。 返回false取消移动。
当一个节点被移动到树中的另一个位置之前触发。 返回false取消移动。
监听器将会以如下的参数格式调用:
  • tree : Tree
    所属树
  • node : Node
    被移动的节点
  • oldParent : Node
    父节点
  • newParent : Node
    该节点将移动到的新父节点
  • index : Number
    被移动到的索引
TreePanel
beforenodedrop : ( Object dropEvent )
当一个DD对象被拖放到树中的一个节点上时触发。 返回false取消放开操作。 dropEvent事件处理器将会被传入以下参数...
当一个DD对象被拖放到树中的一个节点上时触发。 返回false取消放开操作。 dropEvent事件处理器将会被传入以下参数
  • tree - The TreePanel
  • target - 拖放的目标节点
  • data - 拖拽源的拖拽数据
  • point - 放下的点- append, above 或者 below
  • source - 拖拽源
  • rawEvent -原始的鼠标事件
  • 源提供的放下节点(s)或者你可以把它们设置到当前对象中 以提供需要插入的节点。
  • cancel - 设置此项为true以取消放下操作。
  • dropStatus - 如果默认的放下操作被取消而此放下操作是合法的，设置此项为true将会 阻止出现"repair"动画效果。
监听器将会以如下的参数格式调用:
  • dropEvent : Object
TreePanel
beforeremove : ( Tree tree , Node parent , Node node )
当从树中的一个节点删除孩子节点之前触发， 返回false取消删除。
当从树中的一个节点删除孩子节点之前触发， 返回false取消删除。
监听器将会以如下的参数格式调用:
  • tree : Tree
    所属树
  • parent : Node
    父节点
  • node : Node
    要被移除的孩子节点
TreePanel
beforerender : ( Ext.Component this )
在组件被rendered 之前触发。 在事件监听器中返回false可以停止render 操作。
在组件被rendered 之前触发。 在事件监听器中返回false可以停止render 操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforeshow : ( Ext.Component this )
在调用show()方法现实组件之前触发。 事件处理函数返回false可以停止show。
在调用show 方法现实组件之前触发。 事件处理函数返回false可以停止show。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforestaterestore : ( Ext.Component this , Object state )
在组件状态恢复之前触发。返回false停止恢复状态操作。
在组件状态恢复之前触发。返回false停止恢复状态操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    StateProvider返回的状态哈希值。 如果没有禁止此事件，那么状态对象会被传递给applyState。 默认情况下，这样简单地把属性值拷贝到当前组件中。 可以覆盖此方法以提供自定的状态恢复操作。
Component
beforestatesave : ( Ext.Component this , Object state )
在组件状态被保存到配置的状态提供者之前触发。 返回false可以停止保存。
在组件状态被保存到配置的状态提供者之前触发。 返回false可以停止保存。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    状态值哈希。 这由在组件上调用getState() 方法决定。 此方法必须由开发者提供，返回是否需要对状态进行描述，默认情况下， Ext.Component有一个空实现。
Component
bodyresize : ( Ext.Panel p , Number width , Number height )
在Panel被调整尺寸之后触发。
在Panel被调整尺寸之后触发。
监听器将会以如下参数格式被调用:
  • p : Ext.Panel
    被调整尺寸的Panel
  • width : Number
    Panel body的新宽度。
  • height : Number
    Panel body的新高度。
Panel
checkchange : ( Node this , Boolean checked )
当一个带有复选框的节点的复选框选中状态发生变化时触发
当一个带有复选框的节点的复选框选中状态发生变化时触发
监听器将会以如下的参数格式调用:
  • this : Node
    This node
  • checked : Boolean
TreePanel
click : ( Node node , Ext.EventObject e )
当一个节点被点击时触发
当一个节点被点击时触发
监听器将会以如下的参数格式调用:
  • node : Node
    The node
  • e : Ext.EventObject
    事件对象
TreePanel
close : ( Ext.Panel p )
在Panel被关闭之后触发。注意，Panel不直接提供关闭操作， 但是Panel的一些子类(例如...
在Panel被关闭之后触发。注意，Panel不直接提供关闭操作， 但是Panel的一些子类(例如 Ext.Window) ，或者处于Ext.TabPanel中的Panel支持。
监听器将会以如下参数格式被调用:
  • p : Ext.Panel
    被关闭的Panel.
Panel
collapse : ( Ext.Panel p )
在Panel被折叠后触发。
在Panel被折叠后触发。
监听器将会以如下参数格式被调用:
  • p : Ext.Panel
    被折叠的Panel
Panel
collapsenode : ( Node node )
当一个节点收起时触发
当一个节点收起时触发
监听器将会以如下的参数格式调用:
  • node : Node
    The node
TreePanel
containerclick : ( Tree this , Ext.EventObject e )
当树容器被点击时触发
当树容器被点击时触发
监听器将会以如下的参数调用:
  • this : Tree
  • e : Ext.EventObject
    事件对象
TreePanel
containercontextmenu : ( Tree this , Ext.EventObject e )
当树容器被正确点击时触发
当树容器被正确点击时触发
监听器将会以如下的参数调用:
  • this : Tree
  • e : Ext.EventObject
    事件对象
TreePanel
containerdblclick : ( Tree this , Ext.EventObject e )
当树容器被双击时触发
当树容器被双击时触发
监听器将会以如下的参数格式调用:
  • this : Tree
  • e : Ext.EventObject
    事件对象
TreePanel
contextmenu : ( Node node , Ext.EventObject e )
当一个节点被右击时触发。 为了响应此事件并显示一个右键菜单， 首先创建一个Menu对象...
当一个节点被右击时触发。 为了响应此事件并显示一个右键菜单， 首先创建一个Menu对象 (详情参见Ext.menu.Menu)， 然后为此事件添加一个处理器:
new Ext.tree.TreePanel({
        text: 'The Root',
        children: [
            { text: 'Child node 1', leaf: true },
            { text: 'Child node 2', leaf: true }
        ]
    }),
    contextMenu: new Ext.menu.Menu({
        items: [{
            id: 'delete-node',
            text: 'Delete Node'
        }],
        listeners: {
            itemclick: function(item) {
                switch (item.id) {
                    case 'delete-node':
                        var n = item.parentMenu.contextNode;
                        if (n.parentNode) {
                            n.remove();
                        }
                        break;
                }
            }
        }
    }),
    listeners: {
        contextmenu: function(node, e) {
//          Register the context node with the menu so that a Menu Item's handler function can access

//          it via its parentMenu property.
            node.select();
            var c = node.getOwnerTree().contextMenu;
            c.contextNode = node;
            c.showAt(e.getXY());
        }
    }
});
监听器将会以如下的参数格式调用:
  • node : Node
    该节点
  • e : Ext.EventObject
    事件对象
TreePanel
dblclick : ( Node node , Ext.EventObject e )
当一个节点被双击时触发
当一个节点被双击时触发
监听器将会以如下的参数格式调用:
  • node : Node
    The node
  • e : Ext.EventObject
    事件对象
TreePanel
deactivate : ( Ext.Panel p )
在Panel被视觉上失去活动状态之后触发。 注意，Panel不直接支持此操作，但是Panel的一些子类...
在Panel被视觉上失去活动状态之后触发。 注意，Panel不直接支持此操作，但是Panel的一些子类 (例如Ext.Window)支持。 作为TabPanel的子组件的Panel将会在TabPanel的控制之下触发activate 和deactivate事件。
监听器将会以如下参数格式被调用:
  • p : Ext.Panel
    失去活动状态的Panel
Panel
destroy : ( Ext.Component this )
在组件被销毁之后触发。
在组件被destroyed之后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
disable : ( Ext.Component this )
在组件被设置为无效状态后触发。
在组件被设置为无效状态后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
disabledchange : ( Node node , Boolean disabled )
当节点的禁用状态发生变化时触发
当节点的禁用状态发生变化时触发
监听器将会以如下的参数格式调用:
  • node : Node
    The node
  • disabled : Boolean
TreePanel
dragdrop : ( Ext.tree.TreePanel this , Ext.tree.TreeNode node , DD dd , event e )
当一个拖拽的节点被放置到一个合法的DD目标上时触发
当一个拖拽的节点被放置到一个合法的DD目标上时触发
监听器将会以如下的参数格式调用:
  • this : Ext.tree.TreePanel
  • node : Ext.tree.TreeNode
  • dd : DD
    拖拽到的 dd
  • e : event
    原始浏览事件
TreePanel
enable : ( Ext.Component this )
当组件被设置为有效(enabled)之后触发。
当组件被设置为有效(enabled)之后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
enddrag : ( Ext.tree.TreePanel this , Ext.tree.TreeNode node , event e )
当一个拖拽操作完成时触发
当一个拖拽操作完成时触发
监听器将会以如下的参数格式调用:
  • this : Ext.tree.TreePanel
  • node : Ext.tree.TreeNode
  • e : event
    原始的浏览事件
TreePanel
expand : ( Ext.Panel p )
当Panel已经展开之后触发。
当Panel已经展开之后触发。
监听器将会以如下参数格式被调用:
  • p : Ext.Panel
    已经被展开的Panel.
Panel
expandnode : ( Node node )
当节点展开时触发
当节点展开时触发
监听器将会以如下的参数格式调用:
  • node : Node
    The node
TreePanel
hide : ( Ext.Component this )
在组件被隐藏之后触发。 当调用hide 方法隐藏组件之后触发。
在组件被隐藏之后触发。 当调用hide 方法隐藏组件之后触发。
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
iconchange : ( Ext.Panel p , String The , String The )
当Panel的图标被set或者 changed 之后触发。
当Panel的图标被set或者 changed 之后触发。
监听器将会以如下参数格式被调用:
  • p : Ext.Panel
    icon class被变化的Panel
  • The : String
    新icon类
  • The : String
    旧icon类
Panel
insert : ( Tree tree , Node parent , Node node , Node refNode )
当一个新的节点被插入到树中的一个节点时触发。
当一个新的节点被插入到树中的一个节点时触发。
监听器将会以如下的参数格式调用:
  • tree : Tree
    所属树
  • parent : Node
    父节点
  • node : Node
    插入的孩子节点
  • refNode : Node
    以前插入的孩子节点
TreePanel
load : ( Node node )
当一个节点被加载完之后触发
当一个节点被加载完之后触发
监听器将会以如下的参数格式调用:
  • node : Node
    被加载的节点
TreePanel
move : ( Ext.Component this , Number x , Number y )
在组件移动之后触发。
在组件移动之后触发。
监听器将会用如下的参数格式来调用:
  • this : Ext.Component
  • x : Number
    The new x position
  • y : Number
    The new y position
BoxComponent
movenode : ( Tree tree , Node node , Node oldParent , Node newParent , Number index )
当一个节点被移动到树中的一个新的位置时触发。
当一个节点被移动到树中的一个新的位置时触发。
监听器将会以如下的参数格式调用:
  • tree : Tree
    所属树
  • node : Node
    移动的节点
  • oldParent : Node
    这个节点的父节点
  • newParent : Node
    这个节点新的父节点
  • index : Number
    被移动到的序号
TreePanel
nodedragover : ( Object dragOverEvent )
当一个节点被锁定为一次拖拽和放下的目标时触发， 返回false以通知不允许放下。 传递给dragOverEvent事件处理器的参数如下：...
当一个节点被锁定为一次拖拽和放下的目标时触发， 返回false以通知不允许放下。 传递给dragOverEvent事件处理器的参数如下：
  • tree - The TreePanel
  • target - 被作为拖拽目标的节点
  • data - 拖拽源的拖拽数据
  • point - 放下的点： append, above 或者 below
  • source - 拖拽源
  • rawEvent -原始鼠标事件
  • dropNode - 放下的节点(s)
  • cancel -设置此项为true以通知不允许放下。
监听器将会以如下的参数格式调用:
  • dragOverEvent : Object
TreePanel
nodedrop : ( Object dropEvent )
当一个DD对象被放置到树中的一个节点上之后触发。 dropEvent事件处理器将会被传入以下参数...
当一个DD对象被放置到树中的一个节点上之后触发。 dropEvent事件处理器将会被传入以下参数
  • tree - The TreePanel
  • target - 被作为拖拽目标的节点
  • data - 拖拽源的拖拽数据
  • point - 放下的点：append, above 或者 below
  • source - 拖拽源
  • rawEvent - 原始的鼠标事件
  • dropNode - 放下的节点(s)。
监听器将会以如下的参数格式调用:
  • dropEvent : Object
TreePanel
remove : ( Tree tree , Node parent , Node node )
当从树中的一个节点中删除孩子节点时触发。
当从树中的一个节点中删除孩子节点时触发。
监听器将会以如下的参数格式调用:
  • tree : Tree
    所属树
  • parent : Node
    父节点
  • node : Node
    移走的孩子节点
TreePanel
removed : ( Ext.Component this , Ext.Container ownerCt )
当一个组件被从Ext.Container容器中删除时触发
当一个组件被从Ext.Container容器中删除时触发
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • ownerCt : Ext.Container
    持有组件的容器
Component
render : ( Ext.Component this )
在组件被渲染之后触发。
在组件被 rendered(渲染) 之后触发。
监听器将以如下的参数格式被调用:
  • this : Ext.Component
Component
resize : ( Ext.Component this , Number adjWidth , Number adjHeight , Number rawWidth , Number rawHeight )
在组件被调整大小之后触发。
在组件被调整大小之后触发。
监听器将以如下的参数格式被调用:
  • this : Ext.Component
  • adjWidth : Number
    这是width调整后的值
  • adjHeight : Number
    这是height调整后的值
  • rawWidth : Number
    这是width原来的值
  • rawHeight : Number
    这是height原来的值
BoxComponent
show : ( Ext.Component this )
在调用show 方法显示组件之后触发。
在调用show 方法显示组件之后触发。
监听器将会用如下的参数格式被调用:
  • this : Ext.Component
Component
startdrag : ( Ext.tree.TreePanel this , Ext.tree.TreeNode node , event e )
当一个节点开始被拖动时触发
当一个节点开始被拖动时触发
监听器将会以如下的参数格式调用:
  • this : Ext.tree.TreePanel
  • node : Ext.tree.TreeNode
  • e : event
    原始浏览事件
TreePanel
staterestore : ( Ext.Component this , Object state )
组件状态被存储之后触发。
组件状态被存储之后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    StateProvider返回的状态哈希值。 如果没有禁止此事件，那么状态对象会被传递给applyState。 默认情况下，这样简单地把属性值拷贝到当前组件中。 可以覆盖此方法以提供自定的状态恢复操作。
Component
statesave : ( Ext.Component this , Object state )
在组件状态被保存到所配置的状态提供者之后触发。
在组件状态被保存到所配置的状态提供者之后触发。
监听器将会用如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    状态值hash。 这是由在足见上调用getState() 方法决定的。 开发者必须提供此方法以返回是否需要恢复状态，默认情况下， Ext.Component有一个空实现。
Component
textchange : ( Node node , String text , String oldText )
当节点的文本发生改变时触发
当节点的文本发生改变时触发
监听器将会以如下的参数格式调用:
  • node : Node
    The node
  • text : String
    新文本
  • oldText : String
    旧文本
TreePanel
titlechange : ( Ext.Panel p , String The )
在Panel的标题被set或者 changed 之后触发。
在Panel的标题被set或者 changed 之后触发。
监听器将会以如下参数格式被调用:
  • p : Ext.Panel
    标题被改变的Panel.
  • The : String
    新的标题。
Panel


Class Ext.tree.TreeSorter

包: | Ext.tree
定义类的文件: | TreeSorter.js
类: | TreeSorter
继承自: | Object
提供节点排序。 TreeSorter自动监控所关联的TreePanel上可能会影响到树节点排序顺序的事件： (beforechildrenrendered, append, insert 和 textchange)。示例用法:

                new Ext.tree.TreeSorter(myTree, {
    folderSort: true,
    dir: "desc",
    sortType: function(node) {
        // sort by a custom, typed attribute:
        return parseInt(node.id, 10);
    }
});

配置项

Config Options |  | Defined By
 | caseSensitive : Boolean 设置为true将进行大小写敏感排序(默认值为 false) | TreeSorter
 | dir : String 排序方向 ("asc" 或 "desc," 大小写敏感，默认值为 "asc") | TreeSorter
 | folderSort : Boolean 设置为true将叶子节点排序到非叶子节点之下(默认值为 false) | TreeSorter
 | leafAttr : String 当 folderSort = true 时用来判断是否是叶子节点的属性 (默认值为 "leaf") | TreeSorter
 | property : String 节点排序所依据的指定属性(默认值为 "text")。 注意：只有在未指 函数的时候才使用此属性... 定 节点排序所依据的指定属性(默认值为 "text")。 注意：只有在未指定 函数的时候才使用此属性，否则忽略此属性。 sortType function is specified, otherwise it is ignored. | TreeSorter
 | sortType : Function 一个定制的 "casting"函数，用来在排序之前转化节点的值。 此方法将被以单个的参数调用... 一个定制的 "casting"函数，用来在排序之前转化节点的值。 此方法将被以单个的参数调用 (被检测的 Ext.tree.TreeNode 并被期望返回此节点排序值，此值为在排序时所需要的指定数据类型。 这将被用作，例如，当一个节点的文本(或者其它属性) 应该被以日期或者数值排序。 示例用法参见类描述。 注意：如果指定了一个sortType， 任何 property 配置都将被忽略。 | TreeSorter

公共属性

该类没有公共属性。

公共方法

该类没有公共方法。

公共事件

该类没有公共事件。


Class Ext.Updater.BasicRenderer

包: | Ext
定义类的文件: | UpdateManager.js
类: | Updater.BasicRenderer
继承自: | Object

这是一个基类，实现了一个简单的render方法，它负责使用Ajax请求的 结果来刷新元素。

BasicRenderer使用responseText刷新元素的innerHTML。 如果需要执行一个定制的渲染方式(例如 XML 或者JSON 处理)，使用一致render 创建一个对象并将它传递给Updater的setRenderer。

公共属性

该类没有公共属性。

公共方法

Method Defined By
render ( Ext.Element el , Object xhr , Updater updateManager , Function callback ) : void
在接受到一个Ajax响应并且一个元素需要刷新时调用的方法。
在接受到一个Ajax响应并且一个元素需要刷新时调用的方法。
参数:
  • el : Ext.Element
    被渲染的元素
  • xhr : Object
    XMLHttpRequest对象
  • updateManager : Updater
    调用的更新管理器
  • callback : Function
    如果Updater上的loadScripts配置项为true时，需要被调用的回调函数
返回值:
  • void
Updater.BasicRenderer

公共事件

该类没有公共事件。


Class Ext.Updater.defaults

包: | Ext
定义类的文件: | UpdateManager.js
类: | Updater.defaults
继承自: | Object
默认值集合，用来定制Updater的默认参数。

公共属性

Property |  | Defined By
 | disableCaching : Boolean 设置为true，将向GET请求添加一个唯一的参数以 禁用缓存(默认值为 false)。 | Updater.defaults
 | indicatorText : String 加载提示器使用的文本 (默认值为 ' Loading... ')。 | Updater.defaults
 | loadScripts : Boolean 设置为true，将默认处理脚本(默认值为 false)。 | Updater.defaults
 | showLoadIndicator : Boolean 在加载过程中，是否显示 indicatorText (默认值为 true)。 | Updater.defaults
 | sslBlankUrl : String SSL文件上传使用的空页面URL (如果设置，默认值为 Ext.SSL_SECURE_URL ， 否则为"javascript:false")。 | Updater.defaults
 | timeout : Number 请求或者表单提交超时秒数 (默认值为 30 seconds)。 | Updater.defaults

公共方法

该类没有公共方法。

公共事件

该类没有公共事件。


Observable
    Updater

Class Ext.Updater

包: | Ext
定义类的文件: | UpdateManager.js
类: | Updater
继承自: | Observable
为Element对象提供AJAX风格的更新能力。 Updater可以用来 update一个 Ext.Element 一次, 或者你 可以使用 startAutoRefresh 来设置一个在指定时间间隔内自动更新的 Element。

用法:

                var el = Ext.get("foo"); // Get Ext.Element object
var mgr = el.getUpdater();
mgr.update({
        url: "http://myserver.com/index.php"
                ,
        params: {
            param1: "foo",
            param2: "bar"
        }
});
...
mgr.formUpdate("myFormId", "http://myserver.com/index.php"
                );

// or directly (returns the same Updater instance)
var mgr = new Ext.Updater("myElementId");
mgr.startAutoRefresh(60, "http://myserver.com/index.php"
                );
mgr.on("update", myFcnNeedsToKnow);

// short handed call directly from the element object
Ext.get("foo").load({
        url: "bar.php",
        scripts: true,
        params: "param1=foo&param2=bar",
        text: "Loading Foo..."
});

配置项

Config Options Defined By
listeners : Object
一个包含一个或多个事件处理器的配置对象，会在初始化的时候被添加到目标对象上...

一个包含一个或多个事件处理器的配置对象，会在初始化的时候被添加到目标对象上。 该配置对象应该是一个有效的监听器配置对象就像 addListener例子中指定的一样可一次附加多个处理器。

ExtJs Components上的DOM事件

一些 ExtJs Component 类导出时会选择一些DOM事件(例如 "click", "mouseover" 等等), 这通常只是在有额外的值可以被添加时发生。例如DataView类的 click事件会传递被点击的节点。也可以直接在Component的HTMLElementevent上访问DOM事件，但必需在Component被渲染后监听器才能添加到Element 上。可以按照以下步骤添加插件:

// 插件会用一个监听器配置对象进行配置。
//该组件会被添加到所有处理方法的参数列表上。
Ext.DomObserver = Ext.extend(Object, {
    constructor: function(config) {
        this.listeners = config.listeners ? config.listeners : config;
    },

    // 组件将自己传递进了插件的初始化方法里
    init: function(c) {
        var p, l = this.listeners;
        for (p in l) {
            if (Ext.isFunction(l[p])) {
                l[p] = this.createHandler(l[p], c);
            } else {
                l[p].fn = this.createHandler(l[p].fn, c);
            }
        }

        // 渲染后立即添加监听器到元素上
        c.render = c.render.createSequence(function() {
            var e = c.getEl();
            if (e) {
                e.on(l);
            }
        });
    },

    createHandler: function(fn, c) {
        return function(e) {
            fn.call(this, e, c);
        };
    }
});

var combo = new Ext.form.ComboBox({

    // 元素被点击后折叠
    plugins: [ new Ext.DomObserver({
        click: function(evt, comp) {
            comp.collapse();
        }
    })],
    store: myStore,
    typeAhead: true,
    mode: 'local',
    triggerAction: 'all'
});

Observable

公共属性

Property |  | Defined By
 | defaultUrl : String 为刷新而缓存的url。 每次调用update()时被覆盖，除非"discardUrl" 配置项被设置为true。 | Updater
 | disableCaching : Boolean 是否在get请求上添加一个唯一的参数以禁用缓存 (默认值为 Ext.Updater.defaults.disableCaching)... 是否在get请求上添加一个唯一的参数以禁用缓存 (默认值为 Ext.Updater.defaults.disableCaching)。 | Updater
 | el : Ext.Element The Element object | Updater
 | formUpdateDelegate : Function formUpdate()所使用的代理，预先被绑定到"this"， 使用myUpdater.formUpdateDelegate... formUpdate()所使用的代理，预先被绑定到"this"， 使用myUpdater.formUpdateDelegate.createCallback(arg1, arg2) 绑定参数。 | Updater
 | indicatorText : String 加载指示器文本 (默认值为 Ext.Updater.defaults.indicatorText). | Updater
 | loadScripts : Boolean 设置为true，在输出时处理脚本 (默认值为 Ext.Updater.defaults.loadScripts). | Updater
 | refreshDelegate : Function 预先绑定到"this"的refresh()代理， 使用myUpdater.refreshDelegate.createCallback (arg1, arg2)来绑定参数 | Updater
 | renderer : Object 当前Updater的渲染器 (默认值为 Ext.Updater.BasicRenderer). | Updater
 | showLoadIndicator : String 在加载时是否显示indicatorText(默认值为 Ext.Updater.defaults.showLoadIndicator). | Updater
 | sslBlankUrl : String SSL文件上传所使用的空页面URL (默认值为 Ext.Updater.defaults.sslBlankUrl). | Updater
 | timeout : Number 请求或者表单提交超时秒数 (默认值为 Ext.Updater.defaults.timeout). | Updater
 | transaction : Object 当前执行事务的事务对象， 如果没有活动的事务则为null。 | Updater
 | updateDelegate : Function update()的代理，预先绑定到"this"， 使用myUpdater.updateDelegate.createCallback (arg1, arg2)绑定参数 。 | Updater

公共方法

Method Defined By
Updater ( Mixed el , [ Boolean forceNew ] )
直接创建一个Updater。
直接创建一个Updater。
参数:
  • el : Mixed
    要更新的元素
  • forceNew : Boolean
    (可选)默认构造函数检查传递来的元素是否已有一个Updater，如果有则返回该实例。该配置将跳过检查(在继承该类时有用处)
返回值:
  • void
Updater
Updater.updateElement ( Mixed el , String url , [ String/Object params ], [ Object options ] ) : void
<静态> 静态便捷方法。此方法已过期，使用 el.load({url:'foo.php', ...}) 代替 。用法:Ext.Updater.up...
<静态> ;静态便捷方法。 。此方法已过期，使用 el.load({url:'foo.php', ...})代替 。用法:
                                Ext.Updater.updateElement("my-div", "stuff.php");
参数:
  • el : Mixed
    要更新的元素
  • url : String
    The url
  • params : String/Object
    (可选)Url编码的字符参数或者键值对对象
  • options : Object
    (可选) 一个你可以设置任何Updater属性的配置对象-如：{disableCaching:true, indicatorText: "Loading data..."}
返回值:
  • void
Updater
abort () : void
如果存在，中断当前正在执行的事务 。
如果存在，中断当前正在执行的事务 。
参数:
  • 无。
返回值:
  • void
Updater
addEvents( Object|String o, string Optional. ) : void
添加指定的事件到事件列表上，事件会被该Observable触发。
添加指定的事件到事件列表上，事件会被该Observable触发。
参数:
  • o : Object|String
    以事件名作为属性true作为值的对象 或者当多个事件名被分开的传递时则为第一个事件名。
  • Optional. : string
    事件名被分开的传递时则为事件名。 用法:
    this.addEvents('storeloaded', 'storecleared');
返回值:
  • void
Observable
addListener( String eventName, Function handler, [Object scope], [Object options] ) : void
给对象添加事件处理器。
给对象添加事件处理器。
参数:
  • eventName : String
    监听的事件名。
  • handler : Function
    事件调用的方法
  • scope : Object
    （可选）处理方法执行的作用域 (this的引用 reference)。 如果被忽略。默认为触发事件的对象。
  • options : Object
    （可选）包含处理器配置和属性的对象。 可能包含以下的属性:
    • scope : Object
      处理方法执行的作用域(this的引用) 。 如果被忽略。默认为触发事件的对象。
    • delay : Number
      在触发事件后延迟调用处理器的毫秒数。
    • single : Boolean
      如果为True则添加一个处理器来处理下一次的事件触发（仅一次），然后移除自己。
    • buffer : Number
      使得处理器延迟指定毫秒数后预定的运行在 一个Ext.util.DelayedTask中 。 如果事件在时间内再一次被触发，原始的处理器不会被调用，但是新的处理器会预定的在他的位置上。
    • target : Observable
      如果事件在目标的Observable上触发则仅仅调用处理器， 否则 事件会从子类的Observable上冒泡

    组合选项
    使用这些选项参数,可能会组合出不同类型的监听器：

    一个延迟的，一次性的监听器。

    myDataView.on('click', this.onClick, this, {
single: true,
delay: 100
});

    一次调用附加多个处理器
    该方法同样支持传递一个包含指定的多个处理器的属性的配置对象参数。

    myGridPanel.on({
'click' : {
    fn: this.onClick,
    scope: this,
    delay: 100
},
'mouseover' : {
    fn: this.onMouseOver,
    scope: this
},
'mouseout' : {
    fn: this.onMouseOut,
    scope: this
}
});

    或者一个简写的语法：

    myGridPanel.on({
'click' : this.onClick,
'mouseover' : this.onMouseOver,
'mouseout' : this.onMouseOut,
 scope: this
});
返回值:
  • void
Observable
enableBubble( String/Array events ) :void
是否现在使得事件会被该Observable触发并调用 this.getBubbleTarget()方法在拥有者的继承树...

是否现在使得事件会被该Observable触发并调用 this.getBubbleTarget()方法在拥有者的继承树中冒泡。Observable的基础类中没有该方法的实现。

该方法一般被Ext.Components用来冒泡事件到拥有者的容器。参看Ext.Component.getBubbleTarget默认的实现 在Ext.Component中返回组件的直接拥有者。但是如果需要的是一个已知的目标，该方法可以被重写来更快的访问需求的目标。

例子:

Ext.override(Ext.form.Field, {
    // 添加方法到Field的initComponent上改变事件为冒泡
    initComponent : Ext.form.Field.prototype.initComponent.createSequence(function() {
        this.enableBubble('change');
    }),

    // 我们知道我们想让Field的事件冒泡到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() {
            // 如果样式被修改标题会变红。
            myForm.header.setStyle('color', 'red');
        }
    }
});
参数:
  • events : String/Array
    冒泡的事件名，或事件名数组
返回值:
  • void
Observable
fireEvent( String eventName, Object... args ) : Boolean
用传入的参数触发指定的事件 (减去事件名)。 一个事件可以被设置为冒泡 Obse...

用传入的参数触发指定的事件 (减去事件名)。

一个事件可以被设置为冒泡到Observable父类继承树(参看 Ext.Component.getBubbleTarget) 调用enableBubble实现。

参数:
  • eventName : String
    触发的事件名。
  • args : Object...
    传递给处理器的可变长度参数。
返回值:
  • Boolean
    如果有任何的处理器返回false则返回false，否则返回true。
Observable
formUpdate ( String/HTMLElement form , [ String url ], [ Boolean reset ], [ Function callback ] ) : void
执行一个异步的表单提交， 使用响应更新当前元素。 如果表单有个enctype=...

执行一个异步的表单提交， 使用响应更新当前元素。 如果表单有个enctyp=" multipart/form-data"的属性， 则认为是文件上传。 使用this.sslBlankUrl进行SSL文件上传以阻止IE的安全警告。

文件上传不使用普通的"Ajax"技术，也就是说他们 不 使用XMLHttpRequests。而是用DOM的标准方式提交表单。 <form> 元素临时修改它的 target 设置为指向一个动态生成的，隐藏的 set to refer to a dynamically generated, hidden <iframe> 。该iframe被插入到文档树中，被在收到返回值后被移除。

注意上传文件包，使用 multipart/form-data 方式发送，而有些服务器技术(notably JEE)可能需要某些特定的处理以接收包中的参数名和参数值。

参数:
  • form : String/HTMLElement
    表单的id或者表单元素
  • url : String
    (可选) 提交表单的url。如果忽略此配置，将会使用表单上的action属性。
  • reset : Boolean
    (可选) 在更新之后是否尝试重置表单
  • callback : Function
    (可选) 在事务结束之后调用的回调函数。 将传递以下参数：
    • el : Ext.Element

      被更新的元素。

    • success : Boolean

      成功是为true，失败是为false。

    • response : XMLHttpRequest

      执行更新的XMLHttpRequest。

返回值:
  • void
Updater
getDefaultRenderer () : void
这是一个可覆盖的方法，如果创建Ext.Updater时没有指定， 它返回一个默认渲染器类的引用...
这是一个可覆盖的方法，如果创建Ext.Updater时没有指定，它返回一个默认渲染器类的引用,默认为 Ext.Updater.BasicRenderer。
参数:
  • 无。
返回值:
  • void
Updater
getEl () : Ext.Element
获取当前Updater绑定到的Element
获取当前Updater绑定到的Element
参数:
  • 无。
返回值:
  • Ext.Element
    The element
Updater
getRenderer () : Object
返回当前Updter的内容渲染器。 更多细节，参见： Ext.Updater.BasicRenderer.render 。
返回当前Updter的内容渲染器。 更多细节，参见： Ext.Updater.BasicRenderer.render 。
参数:
  • 无。
返回值:
  • Object
Updater
hasListener( String eventName ) : Boolean
检测对象是否包含指定事件的任何监听器
检测对象是否包含指定事件的任何监听器
参数:
  • eventName : String
    检测的事件名
返回值:
  • Boolean
    如果事件被监听则为true，否则为false
Observable
isAutoRefreshing () : void
如果Updater当前被设置为自动刷新其内容，返回true (参见startAutoRefresh) ，否则返回false。
如果Updater当前被设置为自动刷新其内容，返回true (参见 startAutoRefresh), 否则返回false。
参数:
  • 无。
返回值:
  • void
Updater
isUpdating () : Boolean
如果一个更新正在处理过程中，返回true，否则返回false。
如果一个更新正在处理过程中，返回true，否则返回false。
参数:
  • 无。
返回值:
  • Boolean
Updater
on( String eventName, Function handler, [Object scope], [Object options] ) : void
给对象添加事件处理器 (addListener的简写形式)
给对象添加事件处理器 (addListener的简写形式。)
参数:
  • eventName : String
    监听的事件类型
  • handler : Function
    事件调用的方法
  • scope : Object
    （可选）处理方法执行时的作用域 (this 的引用)。 如果被忽略。默认为触发事件的对象。
  • options : Object
    可选 包含处理器配置的对象。
返回值:
  • void
Observable
purgeListeners() : void
移除对象上所有的监听器
移除对象上所有的监听器
参数:
  • 无。
返回值:
  • void
Observable
refresh ( [ Function callback ] ) : void
使用最后一次使用的url或者defaultUrl刷新元素。 如果没有url，立即返回。
使用最后一次使用的url或者defaultUrl刷新元素。 如果没有url，立即返回。
参数:
  • callback : Function
    (可选) 完成后的回调函数 - 调用格式(oElement, bSuccess)
返回值:
  • void
Updater
relayEvents( Object o, Array events ) : void
从指定的Observable上传递选择的事件就好像被当前对象触发一样。
从指定的Observable上传递选择的事件就好像被当前对象触发一样。
参数:
  • o : Object
    该Observable上的事件被当前对象传递。
  • events : Array
    传递的数组名。
返回值:
  • void
Observable
removeListener( String eventName, Function handler, [Object scope] ) : void
删除一个事件处理器。
删除一个事件处理器。
参数:
  • eventName : String
    处理器关联的事件类型。
  • handler : Function
    移除的处理器。 这应该是传递到addListener里的方法的引用。
  • scope : Object
    （可选）处理器指定的初始作用域。
返回值:
  • void
Observable
resumeEvents() : void
重新开始触发事件。(参见suspendEvents) 如果事件以queueSuspended参数被挂起，则在事件被挂起时 ...
重新开始触发事件。(参见 suspendEvents) 如果事件以queueSuspended 参数被挂起，则在事件被挂起时触发的事件会被传递到所有的监听器上
参数:
  • 无。
返回值:
  • void
Observable
setDefaultUrl ( String/Function defaultUrl ) : void
设置更新使用的默认URL。
设置更新使用的默认URL。
参数:
  • defaultUrl : String/Function
    url或函数(调用后获取url)
返回值:
  • void
Updater
setRenderer ( Object renderer ) : void
设置当前Updater使用的内容渲染器。 更多细节，参见Ext.Updater.BasicRenderer.render。
设置当前Updater使用的内容渲染器。 更多细节， 参见 Ext.Updater.BasicRenderer.render
参数:
  • renderer : Object
    继承实现render()方法的对象
返回值:
  • void
Updater
showLoading () : void
显示元素的"loading"状态。 默认情况下，元素被使用 indicatorText 更新。 可以...
显示元素的"loading"状态。 默认情况下，元素被使用 indicatorText更新。 可以覆盖此方法，在当前Updater正在更新其内容时 ，执行一个定制的操作。
参数:
  • 无。
返回值:
  • void
Updater
startAutoRefresh ( Number interval , [ String/Object/Function url ], [ String/Object params ], [ Function callback ], [ Boolean refreshNow ] ) : void
设置当前元素为自动刷新。 可以通过调用 stopAutoRefresh 取消操作...
设置当前元素为自动刷新。 可以通过调用 stopAutoRefresh 取消操作。
参数:
  • interval : Number
    更新的频率(以秒计)。
  • url : String/Object/Function
    (可选) 当前请求的url，一个配置对象，与 load 所支持的格式相同, 或者一个用来获取url的函数 (默认值为最后一次使用的url)。注意：调用load时使用的url可以在当前方法中被复用，而其它加载选项则不会，如果需要，必须作为配置对象的一部分被指定，此对象为当前方法的参数。
  • params : String/Object
    (可选) 需要传递的参数，既可以是一个url编码好的字符串"¶m1=1¶m2=2" 也可以是一个对象 {param1: 1, param2: 2}
  • callback : Function
    (可选)完成后的回调函数,调用格式(oElement, bSuccess)
  • refreshNow : Boolean
    (可选)立即执行刷新，或者等一段时间
返回值:
  • void
Updater
stopAutoRefresh () : void
停止自动刷新当前元素。
停止自动刷新当前元素。
参数:
  • 无。
返回值:
  • void
Updater
suspendEvents( Boolean queueSuspended ) : void
暂停触发所有的事件。 (参看resumeEvents)
暂停触发所有的事件。（参看 resumeEvents)
参数:
  • queueSuspended : Boolean
    如果传递为true则排列好暂停的事件使得在调用 resumeEvents 后再触发它们，而不是抛弃所有暂停的事件。
返回值:
  • void
Observable
un( String eventName, Function handler, [Object scope] ) : void
删除一个事件处理器(removeListener方法的简写形式)
删除一个事件处理器(removeListener方法的简写形式。)
参数:
  • eventName : String
    处理器关联的事件类型
  • handler : Function
    被删除的处理器 这应该是传入 addListener 中的方法的引用。
  • scope : Object
    （可选）为处理器指定的初始作用域。
返回值:
  • void
Observable
update ( Object options ) : void
执行一个异步请求，使用响应更新当前元素。 如果指定了参数，它使用POST方式提交请求，否则...
执行一个 asynchronous请求,使用响应更新当前元素。 如果指定了参数，它使用POST方式提交请求，否则使用GET方式。

注意:由于远程服务器请求的异步特性，当函数返回时，元素并没有完全更新完成。如需处理返回的数据，使用callback配置，或者一个 update 时间处理器。
参数:
  • options : Object
    一个包含以下任何选项的配置对象:
    • url : String/Function

      请求的URL，或者一个可以 返回URL的函数，如果不指定(默认为 Ext.Ajax.url的值)。

    • method : String

      使用的HTTP提交方式。如果存在 params 参数，默认使用POST方式，否则使用GET。

    • params : String/Object/Function

      传递给服务器的参数(默认值为 none)。可以将这些参数指定为一个进行url编码好的（url-encoded）字符串；或者一个包含参数的对象，它描述了参数；或者一个函数，它能返回如上这样一个对象。

    • scripts : Boolean

      If true 如果为 true，响应文本中嵌入的任何 <script>标签将会被提取出来并执行 (默认值为 Ext.Updater.defaults.loadScripts)。 如果指定了此配置项，回调函数将在脚本执行 之后 才会被调用。

    • callback : Function

      当服务器响应到达时调用的函数。将会被传递以下参数：

      • el : Ext.Element

        被更新的元素。

      • success : Boolean

        成功时为true，失败时为false。

      • response : XMLHttpRequest

        处理更新的XMLHttpRequest。

      • options : Object

        调用update时传递的配置对象。

    • scope : Object

      执行回调函数的作用域 (回调函数的 this 引用.) 如果 params 参数是一个函数，作用域也被用作这个函数的作用域。

    • discardUrl : Boolean

      默认情况下，当前请求的URL将会成为当前Updater对象的默认URL，并且将会在后面用在对 refresh 的调用中。如需绕过此行为,传递 discardUrl:true (默认值为 false)。

    • timeout : Number

      在超时之前等待响应的秒数 (默认值为 Ext.Updater.defaults.timeout).

    • text : String

      被用作 Ext.Updater.defaults.indicatorText 层的innerHTML文本 (默认值为 'Loading...')。如需替换整个div，而不仅仅是文本，直接覆 Ext.Updater.defaults.indicatorText。

    • nocache : Boolean

      只有GET方式需要，此配置将导致一个额外的、自动产生的参数，它被添加到请求参数之后以去除缓存 (默认为 Ext.Updater.defaults.disableCaching).

    例如:

                                                    um.update({
        url: "your-url.php",
        params: {param1: "foo", param2: "bar"}, // or a URL encoded string
        callback: yourFunction,
        scope: yourObject, //(optional scope)
        discardUrl: true,
        nocache: true,
        text: "Loading...",
        timeout: 60,
        scripts: false // Save time by avoiding RegExp execution.
    });
返回值:
  • void
Updater

公共事件

Event Defined By
beforeupdate : ( Ext.Element el , String/Object/Function url , String/Object params )
在进行一次更新之前触发， 从你的处理程序中返回false可以取消更新...
在进行一次更新之前触发， 从你的处理程序中返回false可以取消更新。
监听器将会以如下参数格式使用:
  • el : Ext.Element
  • url : String/Object/Function
  • params : String/Object
Updater
failure : ( Ext.Element el , Object oResponseObject )
在更新失败时触发。
在更新失败时触发。
监听器将会以如下参数格式使用:
  • el : Ext.Element
  • oResponseObject : Object
    The response Object
Updater
update : ( Ext.Element el , Object oResponseObject )
在成功进行更新之后触发。
在成功进行更新之后触发。
监听器将会以如下参数格式使用:
  • el : Ext.Element
  • oResponseObject : Object
    The response Object
Updater


Observable
    ClickRepeater

Class Ext.util.ClickRepeater

包: | Ext.util
定义类的文件: | ClickRepeater.js
类: | ClickRepeater
继承自: | Observable
一个包装类，可以应用到任何元素上。当鼠标被按下时触发一个"click"事件。 每次触发之间的间隔可以在配置项中指定，默认为20毫秒。可选地，在元素被按下时 可以为它应用一个CSS类。

配置项

Config Options Defined By
accelerate : Boolean
如果自动重复需要缓慢启动然后加速，设置此项为true。 "interval" 和 "delay"被忽略。
ClickRepeater
delay : Number
在重复事件触发之前延迟的时间。 类似于一个自动重复的按键延时。
ClickRepeater
el : Mixed
用来作为一个按钮的元素。
ClickRepeater
interval : Number
触发"click"事件的时间间隔。默认为20ms
ClickRepeater
listeners : Object
一个包含一个或多个事件处理器的配置对象，会在初始化的时候被添加到目标对象上...

一个包含一个或多个事件处理器的配置对象，会在初始化的时候被添加到目标对象上。 该配置对象应该是一个有效的监听器配置对象就像 addListener例子中指定的一样可一次附加多个处理器。

ExtJs Components上的DOM事件

一些 ExtJs Component 类导出时会选择一些DOM事件(例如 "click", "mouseover" 等等), 这通常只是在有额外的值可以被添加时发生。例如DataView类的 click事件会传递被点击的节点。也可以直接在Component的HTMLElementevent上访问DOM事件，但必需在Component被渲染后监听器才能添加到Element 上。可以按照以下步骤添加插件:

// 插件会用一个监听器配置对象进行配置。
//该组件会被添加到所有处理方法的参数列表上。
Ext.DomObserver = Ext.extend(Object, {
    constructor: function(config) {
        this.listeners = config.listeners ? config.listeners : config;
    },

    // 组件将自己传递进了插件的初始化方法里
    init: function(c) {
        var p, l = this.listeners;
        for (p in l) {
            if (Ext.isFunction(l[p])) {
                l[p] = this.createHandler(l[p], c);
            } else {
                l[p].fn = this.createHandler(l[p].fn, c);
            }
        }

        // 渲染后立即添加监听器到元素上
        c.render = c.render.createSequence(function() {
            var e = c.getEl();
            if (e) {
                e.on(l);
            }
        });
    },

    createHandler: function(fn, c) {
        return function(e) {
            fn.call(this, e, c);
        };
    }
});

var combo = new Ext.form.ComboBox({

    // 元素被点击后折叠
    plugins: [ new Ext.DomObserver({
        click: function(evt, comp) {
            comp.collapse();
        }
    })],
    store: myStore,
    typeAhead: true,
    mode: 'local',
    triggerAction: 'all'
});

Observable
pressClass : String
当元素被按下时应用的CSS类名。
ClickRepeater
preventDefault : Boolean
True将会阻止默认的点击事件
ClickRepeater
stopDefault : Boolean
True将会停止默认的点击事件
ClickRepeater

公共属性

该类没有公共属性。

公共方法

Method Defined By
ClickRepeater ( Mixed el , Object config )
参数:
  • el : Mixed
    需要被监听的元素
  • config : Object
返回值:
  • void
ClickRepeater
addEvents( Object|String o, string Optional. ) : void
添加指定的事件到事件列表上，事件会被该Observable触发。
添加指定的事件到事件列表上，事件会被该Observable触发。
参数:
  • o : Object|String
    以事件名作为属性true作为值的对象 或者当多个事件名被分开的传递时则为第一个事件名。
  • Optional. : string
    事件名被分开的传递时则为事件名。 用法:
    this.addEvents('storeloaded', 'storecleared');
返回值:
  • void
Observable
addListener( String eventName, Function handler, [Object scope], [Object options] ) : void
给对象添加事件处理器。
给对象添加事件处理器。
参数:
  • eventName : String
    监听的事件名。
  • handler : Function
    事件调用的方法
  • scope : Object
    （可选）处理方法执行的作用域 (this的引用 reference)。 如果被忽略。默认为触发事件的对象。
  • options : Object
    （可选）包含处理器配置和属性的对象。 可能包含以下的属性:
    • scope : Object
      处理方法执行的作用域(this的引用) 。 如果被忽略。默认为触发事件的对象。
    • delay : Number
      在触发事件后延迟调用处理器的毫秒数。
    • single : Boolean
      如果为True则添加一个处理器来处理下一次的事件触发（仅一次），然后移除自己。
    • buffer : Number
      使得处理器延迟指定毫秒数后预定的运行在 一个Ext.util.DelayedTask中 。 如果事件在时间内再一次被触发，原始的处理器不会被调用，但是新的处理器会预定的在他的位置上。
    • target : Observable
      如果事件在目标的Observable上触发则仅仅调用处理器， 否则 事件会从子类的Observable上冒泡

    组合选项
    使用这些选项参数,可能会组合出不同类型的监听器：

    一个延迟的，一次性的监听器。

    myDataView.on('click', this.onClick, this, {
single: true,
delay: 100
});

    一次调用附加多个处理器
    该方法同样支持传递一个包含指定的多个处理器的属性的配置对象参数。

    myGridPanel.on({
'click' : {
    fn: this.onClick,
    scope: this,
    delay: 100
},
'mouseover' : {
    fn: this.onMouseOver,
    scope: this
},
'mouseout' : {
    fn: this.onMouseOut,
    scope: this
}
});

    或者一个简写的语法：

    myGridPanel.on({
'click' : this.onClick,
'mouseover' : this.onMouseOver,
'mouseout' : this.onMouseOut,
 scope: this
});
返回值:
  • void
Observable
disable () : void
禁用repeater并停止触发事件。
禁用repeater并停止触发事件。
参数:
  • 无。
返回值:
  • void
ClickRepeater
enable () : void
启用repeater并允许触发事件。
启用repeater并允许触发事件。
参数:
  • 无。
返回值:
  • void
ClickRepeater
enableBubble( String/Array events ) :void
是否现在使得事件会被该Observable触发并调用 this.getBubbleTarget()方法在拥有者的继承树...

是否现在使得事件会被该Observable触发并调用 this.getBubbleTarget()方法在拥有者的继承树中冒泡。Observable的基础类中没有该方法的实现。

该方法一般被Ext.Components用来冒泡事件到拥有者的容器。参看Ext.Component.getBubbleTarget默认的实现 在Ext.Component中返回组件的直接拥有者。但是如果需要的是一个已知的目标，该方法可以被重写来更快的访问需求的目标。

例子:

Ext.override(Ext.form.Field, {
    // 添加方法到Field的initComponent上改变事件为冒泡
    initComponent : Ext.form.Field.prototype.initComponent.createSequence(function() {
        this.enableBubble('change');
    }),

    // 我们知道我们想让Field的事件冒泡到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() {
            // 如果样式被修改标题会变红。
            myForm.header.setStyle('color', 'red');
        }
    }
});
参数:
  • events : String/Array
    冒泡的事件名，或事件名数组
返回值:
  • void
Observable
fireEvent( String eventName, Object... args ) : Boolean
用传入的参数触发指定的事件 (减去事件名)。 一个事件可以被设置为冒泡 Obse...

用传入的参数触发指定的事件 (减去事件名)。

一个事件可以被设置为冒泡到Observable父类继承树(参看 Ext.Component.getBubbleTarget) 调用enableBubble实现。

参数:
  • eventName : String
    触发的事件名。
  • args : Object...
    传递给处理器的可变长度参数。
返回值:
  • Boolean
    如果有任何的处理器返回false则返回false，否则返回true。
Observable
hasListener( String eventName ) : Boolean
检测对象是否包含指定事件的任何监听器
检测对象是否包含指定事件的任何监听器
参数:
  • eventName : String
    检测的事件名
返回值:
  • Boolean
    如果事件被监听则为true，否则为false
Observable
on( String eventName, Function handler, [Object scope], [Object options] ) : void
给对象添加事件处理器 (addListener的简写形式)
给对象添加事件处理器 (addListener的简写形式。)
参数:
  • eventName : String
    监听的事件类型
  • handler : Function
    事件调用的方法
  • scope : Object
    （可选）处理方法执行时的作用域 (this 的引用)。 如果被忽略。默认为触发事件的对象。
  • options : Object
    可选 包含处理器配置的对象。
返回值:
  • void
Observable
purgeListeners() : void
移除对象上所有的监听器
移除对象上所有的监听器
参数:
  • 无。
返回值:
  • void
Observable
relayEvents( Object o, Array events ) : void
从指定的Observable上传递选择的事件就好像被当前对象触发一样。
从指定的Observable上传递选择的事件就好像被当前对象触发一样。
参数:
  • o : Object
    该Observable上的事件被当前对象传递。
  • events : Array
    传递的数组名。
返回值:
  • void
Observable
removeListener( String eventName, Function handler, [Object scope] ) : void
删除一个事件处理器。
删除一个事件处理器。
参数:
  • eventName : String
    处理器关联的事件类型。
  • handler : Function
    移除的处理器。 这应该是传递到addListener里的方法的引用。
  • scope : Object
    （可选）处理器指定的初始作用域。
返回值:
  • void
Observable
resumeEvents() : void
重新开始触发事件。(参见suspendEvents) 如果事件以queueSuspended参数被挂起，则在事件被挂起时 ...
重新开始触发事件。(参见 suspendEvents) 如果事件以queueSuspended 参数被挂起，则在事件被挂起时触发的事件会被传递到所有的监听器上
参数:
  • 无。
返回值:
  • void
Observable
setDisabled ( Boolean disabled ) : void
便捷方法，用来根据布尔值设置启用/禁用。
便捷方法，用来根据布尔值设置启用/禁用。
参数:
  • disabled : Boolean
返回值:
  • void
ClickRepeater
suspendEvents( Boolean queueSuspended ) : void
暂停触发所有的事件。 (参看resumeEvents)
暂停触发所有的事件。（参看 resumeEvents)
参数:
  • queueSuspended : Boolean
    如果传递为true则排列好暂停的事件使得在调用 resumeEvents 后再触发它们，而不是抛弃所有暂停的事件。
返回值:
  • void
Observable
un( String eventName, Function handler, [Object scope] ) : void
删除一个事件处理器(removeListener方法的简写形式)
删除一个事件处理器(removeListener方法的简写形式。)
参数:
  • eventName : String
    处理器关联的事件类型
  • handler : Function
    被删除的处理器 这应该是传入 addListener 中的方法的引用。
  • scope : Object
    （可选）为处理器指定的初始作用域。
返回值:
  • void
Observable

公共事件

Event Defined By
click : ( Ext.util.ClickRepeater this )
在元素被按下时按照指定的时间间隔触发。
在元素被按下时按照指定的时间间隔触发。
监听器将会以如下参数格式被调用:
  • this : Ext.util.ClickRepeater
ClickRepeater
mousedown : ( Ext.util.ClickRepeater this )
当鼠标按钮被按下时触发。
当鼠标按钮被按下时触发。
监听器将会以如下参数格式被调用:
  • this : Ext.util.ClickRepeater
ClickRepeater
mouseup : ( Ext.util.ClickRepeater this )
当鼠标按键被释放时触发。
当鼠标按键被释放时触发。
监听器将会以如下参数格式被调用:
  • this : Ext.util.ClickRepeater
ClickRepeater


Class Ext.util.Cookies

包: | Ext.util
定义类的文件: | Cookies.js
类: | Cookies
继承自: | Object
用来管理cookie和与cookie进行交互的工具类。

该类是一个单例并且不能被直接创建。

公共属性

该类没有公共属性。

公共方法

Method Defined By
clear ( String name ) : void
如果可以找到，从浏览器中删除拥有指定名称的cookie，通过把它的失效时间...
如果可以找到，从浏览器中删除拥有指定名称的cookie，通过把它的失效时间 设置为一个过去的时间点。
参数:
  • name : String
    需要删除的cookie的名称
返回值:
  • void
Cookies
get ( String name ) : Mixed
获取可以被当前页面访问的cookies。 如果cookie不存在， get() 返回null...
获取可以被当前页面访问的cookies。 如果cookie不存在， get() 返回null。 以下例子获得一个名叫"valid"的cookie并且在validStatus参数中存储字符串值。
var validStatus = Ext.util.Cookies.get("valid");
参数:
  • name : String
    需要获取的cookie的名称(name)
返回值:
  • Mixed
    返回指定名称的cookie值； 如果指定的cookie名不存在返回null
Cookies
set ( String name , Mixed value , [ Object expires ], [ String path ], [ String domain ], [ Boolean secure ] ) : void
创建一个拥有指定名称和值的cookie。 cookie的其它设置也可以指定(例如:...
创建一个拥有指定名称和值的cookie。 cookie的其它设置也可以指定(例如: expiration, access restriction, SSL)。
参数:
  • name : String
    需要设置的cookie名称。
  • value : Mixed
    需要设置给cookie的值。
  • expires : Object
    (可选)指定一个过期的日期，cookie将会持续到此日期。 注意，指定的日期对象将会被转换成格林威治时间(GMT)。
  • path : String
    (可选)在cookie上设置一个路径，限定符合路径的页面才可以访问。 默认为所有页面( '/')。
  • domain : String
    (可选) 设置一个域，限定指定的域才能访问页面 (典型地被用来允许跨子域访问cookie)。 例如，"extjs.com"将会创建一个cookie，可以被extjs.com的 所有子域访问，包括www.extjs.com、support.extjs.com等等。
  • secure : Boolean
    (可选)指定为true将会指定cookie只能被 通过SSL被一个使用HTTPS协议的页面访问。 默认为false。这仅仅在使用HTTPS协议的页面调用此代码时 才起作用，否则cookie将会被使用默认选项创建。
返回值:
  • void
Cookies

公共事件

该类没有公共事件。


Class Ext.util.CSS

包: | Ext.util
定义类的文件: | CSS.js
类: | CSS
继承自: | Object
用来操纵CSS规则的工具类

该类是一个单例，并且不能直接被创建。

公共属性

该类没有公共属性。

公共方法

Method Defined By
createStyleSheet ( String cssText , String id ) : StyleSheet
从一个规则文本块创建样式表。 这些规则将被包装到一个STYLE标签中...
从一个规则文本块创建样式表。 这些规则将被包装到一个STYLE标签中，然后追加到document的HEAD中。
参数:
  • cssText : String
    包含CSS规则的文本
  • id : String
    添加到样式表的id，为以后删除提供方便
返回值:
  • StyleSheet
CSS
getRule ( String/Array selector , Boolean refreshCache ) : CSSRule
根据选择子(selector(s))获取单个CSS
根据选择子(selector(s))获取单个CSS
参数:
  • selector : String/Array
    需要尝试的CSS选择子或者一个选择子数组。 第一个被找到的选择子将被返回。
  • refreshCache : Boolean
    如果你最近动态更新了规则或者添加了样式，此参数为true将会刷新内部缓存
返回值:
  • CSSRule
    CSS规则，如果没有找到为null
CSS
getRules ( Boolean refreshCache ) : Object
获取document的所有CSS规则
获取document的所有CSS规则
参数:
  • refreshCache : Boolean
    true将会刷新内部缓存
返回值:
  • Object
    一个规则对象(hash)，以选择子为索引
CSS
refreshCache () : Object
如果你动态增加了样式表，刷新规则缓存
如果你动态增加了样式表，刷新规则缓存
参数:
  • 无。
返回值:
  • Object
    一个规则对象(hash)，以选择子为索引
CSS
removeStyleSheet ( String id ) : void
根据id删除一个样式或者link标签
根据id删除一个样式或者link标签
参数:
  • id : String
    标签的id
返回值:
  • void
CSS
swapStyleSheet ( String id , String url ) : void
动态将一个现存的样式表索引替换为一个新的样式表
动态将一个现存的样式表索引替换为一个新的样式表
参数:
  • id : String
    需要删除的现有link标签的id
  • url : String
    需要包含的新的样式表的href
返回值:
  • void
CSS
updateRule ( String/Array selector , String property , String value ) : Boolean
更新一个规则属性
更新一个规则属性
参数:
  • selector : String/Array
    如果是一个数组，将会尝试其中的每个选择子直到找到一个。 如果找到了一个立即停止查找。
  • property : String
    css属性
  • value : String
    属性新的值
返回值:
  • Boolean
    如果发现并更新了一条规则，此参数为true
CSS

公共事件

该类没有公共事件。


Class Ext.util.DelayedTask

包: | Ext.util
定义类的文件: | DelayedTask.js
类: | DelayedTask
继承自: | Object

该DelayedTask类提供了一个便利方式来缓冲方法的执行，当一个新的timeout取消了老的timeout时执行setTimeout。当调用时，该任务在执行前将等待指定的时间。当执行时，如果该任务被再次调用， 原先的调用会被取消，因此方法在一个循环中指被调用一次。

该方法在某些地方很有用，比如检测用户是否完成一个文本域的输入。例如在执行keypress校验时，可以使用该类为keypress事件缓冲一定的毫秒数，直到用户停止输入的时间达到该数目后执行校验方法。用法如下:

                var task = new Ext.util.DelayedTask(function(){
    alert(Ext.getDom('myInputField').value.length);
});
// Wait 500ms before calling our function. If the user presses another key
// during that 500ms, it will be cancelled and we'll wait another 500ms.

Ext.get('myInputField').on('keypress', function(){
    task.delay(500);
});

Note that we are using a DelayedTask here to illustrate a point. The configuration option buffer for addListener/on will also setup a delayed task for you to buffer events.

公共属性

该类没有公共属性。

公共方法

Method Defined By
DelayedTask ( [ Function fn ], Object scope , [ Array args ] )
传递给此构造方法的参数将作为默认值使用，它们不是必须的。
传递给此构造方法的参数将作为默认值使用，它们不是必须的。
参数:
  • fn : Function
    (可选)默认调用的函数。
  • scope : Object
    函数调用时默认的作用域( this 引用)。如果没有指定, this 将指浏览器窗口。
  • args : Array
    (可选)默认的参数数组。
返回值:
  • void
DelayedTask
cancel () : void
取消队列中的最后一个延时
取消队列中的最后一个延时
参数:
  • 无。
返回值:
  • void
DelayedTask
delay ( Number delay , [ Function newFn ], [ Object newScope ], [ Array newArgs ] ) : void
取消任何正在等待的延时，向队列中添加一个新的
取消任何正在等待的延时，向队列中添加一个新的
参数:
  • delay : Number
    需要延时的毫秒数
  • newFn : Function
    (可选) 传递给构造方法的重写函数
  • newScope : Object
    (可选) 传递给构造方法的重写作用域，记住，如果没有指定作用域时 它 指向浏览器窗口。
  • newArgs : Array
    (可选) 传递给构造方法的重写参数
返回值:
  • void
DelayedTask

公共事件

该类没有公共事件。


Class Ext.util.Format

包: | Ext.util
定义类的文件: | Format.js
类: | Format
继承自: | Object
可复用的数据格式化函数

该类是一个单例，不能直接创建该类的实例。

公共属性

该类没有公共属性。

公共方法

Method Defined By
capitalize ( String value ) : String
将字符串的首字母转换成大写
将字符串的首字母转换成大写
参数:
  • value : String
    需要转换的文本
返回值:
  • String
    转换后的文本
Format
date ( String/Date value , [ String format ] ) : String
使用指定的格式将一个值解析成一个格式化后的日期。
使用指定的格式将一个值解析成一个格式化后的日期。
参数:
  • value : String/Date
    需要格式化的值(字符串必须符合javascript Date对象的 parse()方法 期望的格式)
  • format : String
    (可选)任何合法的日期格式字符串(默认为'm/d/Y')
返回值:
  • String
    格式化后的日期字符串
Format
dateRenderer ( String format ) : Function
返回一个日期渲染函数，它可以高效地，多次反复应用到日期格式上
返回一个日期渲染函数，它可以高效地，多次反复应用到日期格式上
参数:
  • format : String
    任何有效的日期格式字符串
返回值:
  • Function
    日期格式函数
Format
defaultValue ( Mixed value , String defaultValue ) : String
检查一个引用，如果它为空则转换成一个默认值
检查一个引用，如果它为空则转换成一个默认值
参数:
  • value : Mixed
    需要检测的引用
  • defaultValue : String
    如果为undefined时插入的值(默认为"")
返回值:
  • String
Format
ellipsis ( String value , Number length , Boolean word ) : String
如果超过了指定的长度，截断字符串并在其末尾添加一个省略号('...')
如果超过了指定的长度，截断字符串并在其末尾添加一个省略号('...')
参数:
  • value : String
    需要截断的字符串
  • length : Number
    在截断之前允许的最大长度
  • word : Boolean
    True将会尝试寻找一个通用的work break
返回值:
  • String
    格式化后的文本
Format
fileSize ( Number/String size ) : String
简单格式化一个文件大小(xxx bytes, xxx KB, xxx MB)
简单格式化一个文件大小(xxx bytes, xxx KB, xxx MB)
参数:
  • size : Number/String
    需要格式化的数值
返回值:
  • String
    格式化后的文件大小
Format
htmlDecode ( String value ) : String
将等价的HTML字符转换成某些字符(&, <, >, 和 ')。
将等价的HTML字符转换成某些字符(&, <, >, 和 ')。
参数:
  • value : String
    需要解码的字符串
返回值:
  • String
    解码后的文本
Format
htmlEncode ( String value ) : String
将某些字符(&, <, >,和')转换成它们等价的HTML字符， 以便在web页面中显示这些字符的字面值。
将某些字符(&, <, >,和')转换成它们等价的HTML字符， 以便在web页面中显示这些字符的字面值。
参数:
  • value : String
    需要编码的字符串
返回值:
  • String
    编码后的文本
Format
lowercase ( String value ) : String
将一个字符串转换成全小写的字符
将一个字符串转换成全小写的字符
参数:
  • value : String
    需要转换的文本
返回值:
  • String
    转换后的文本
Format
math () : Function
进行简单的匹配，以便用在一个模板中，例如:...
进行简单的匹配，以便用在一个模板中，例如:
var tpl = new Ext.Template('{value} * 10 = {value:math("* 10")}');
参数:
  • 无。
返回值:
  • Function
    在传递的值上进行操作的函数。
Format
nl2br ( String The ) : String
将换行字符串格式化成HTML标签<br/>
将换行字符串格式化成HTML标签<br/>
参数:
  • The : String
    需要格式化的字符串值。
返回值:
  • String
    包含内嵌&lt;br/>标签的字符串，用来替代换行
Format
number ( Number v , String format ) : String
根据格式字符串格式化数字。...
根据格式字符串格式化数字。
例如(123456.789):
0 - (123456)只显示整数，没有小数
0.00 - (123456.78)精确到两位小数
0.0000 - (123456.7890)精确到四位小数
0,000 - (123,456)显示逗号和整数，没有小数
0,000.00 - (123,456.78)显示逗号和两位小数
0,0.00 - (123,456.78)快捷方法，显示逗号和两位小数
对于国际化的数字， 如需反转(,)和(.)，在尾部添加/i。 例如: 0.000,00/i
参数:
  • v : Number
    需要格式化的数字。
  • format : String
    你需要格式化文本的方式。
返回值:
  • String
    格式化后的数字。
Format
numberRenderer ( String format ) : Function
返回一个数值渲染函数，它可以高效地，多次反复应用到数值格式上
返回一个数值渲染函数，它可以高效地，多次反复应用到数值格式上
参数:
  • format : String
    对number 任何有效的数值格式字符串
返回值:
  • Function
    数值格式化函数
Format
plural ( Number value , String singular , [ String plural ] ) : void
根据一个数值，可对单词选用一个复数形式。 例如，在模板中，{commentCount:plural("Comment")}...
根据一个数值，可对单词选用一个复数形式。 例如，在模板中，{commentCount:plural("Comment")} 如果commentCount为1，那么结果就是"1 Comment"，否则，如果 值为0或者大于1就是"x Comments"。
参数:
  • value : Number
    需要用来对比的值
  • singular : String
    单词的单数格式
  • plural : String
    (可选)单词的复数形式(默认为单数格式加一个"s")
返回值:
  • void
Format
round ( Number/String value , Number precision ) : Number
将所传递的数字四舍五入到所需的精度。
将所传递的数字四舍五入到所需的精度。
参数:
  • value : Number/String
    需要四舍五入的数值。
  • precision : Number
    用来四舍五入第一个参数值的小数位数值。
返回值:
  • Number
    四舍五入后的值。
Format
stripScripts ( Mixed value ) : String
去掉所有script标签
去掉所有script标签
参数:
  • value : Mixed
    需要去除script标签的文本
返回值:
  • String
    去掉script标签后的文本
Format
stripTags ( Mixed value ) : String
去除所有HTML标签
去除所有HTML标签
参数:
  • value : Mixed
    需要从其中去掉标签的文本
返回值:
  • String
    去除标签后的文本
Format
substr ( String value , Number start , Number length ) : String
返回原字符串中的一个子串
返回原字符串中的一个子串
参数:
  • value : String
    原先的文本
  • start : Number
    子串的起始索引位置
  • length : Number
    子串的长度
返回值:
  • String
    子串
Format
trim ( String value ) : String
将字符串两端的空格去掉
将字符串两端的空格去掉
参数:
  • value : String
    需要修剪的文本
返回值:
  • String
    修剪后的文本
Format
undef ( Mixed value ) : Mixed
检测一个引用，如果它是undefined则将它转换成空字符串
检测一个引用，如果它是undefined则将它转换成空字符串
参数:
  • value : Mixed
    需要检测的引用
返回值:
  • Mixed
    如果转换过，则为空字符串；否则为原先的值
Format
uppercase ( String value ) : String
将一个字符串中的所有字符转换成大写
将一个字符串中的所有字符转换成大写
参数:
  • value : String
    需要进行转换的文本
返回值:
  • String
    转换后的文本
Format
usMoney ( Number/String value ) : String
将一个数值格式化成美元形式
将一个数值格式化成美元形式
参数:
  • value : Number/String
    需要进行格式化的数值
返回值:
  • String
    格式化后的美元字符串
Format

公共事件

该类没有公共事件。


Class Ext.util.JSON

包: | Ext.util
定义类的文件: | JSON.js
类: | JSON
继承自: | Object
Douglas Crockford的json.js修改版，不混乱Object的prototype http://www.json.org/js.html

该类是一个单例，并且不能直接创建。

公共属性

该类没有公共属性。

公共方法

Method Defined By
decode ( String json ) : Object
将一个JSON字符串解码(解析)成一个对象。 如果JSON无效，除非设置了safe选项...
将一个JSON字符串解码(解析)成一个对象。 如果JSON无效，除非设置了safe选项，此函数将会抛出一个SyntaxError
参数:
  • json : String
    JSON字符串
返回值:
  • Object
    结果对象 The resulting object
JSON
encode ( Mixed o ) : String
对一个对象、数组或者其它值进行编码
对一个对象、数组或者其它值进行编码
参数:
  • o : Mixed
    需要编码的变量
返回值:
  • String
    JSON字符串
JSON
encodeDate ( Date d ) : String
对一个Date进行编码。 此方法返回实际的字符串，将当作字面表达式被插入到JSON字符串中...

对一个Date进行编码。 此方法返回实际的字符串，将当作字面表达式被插入到JSON字符串中。 返回值包含封闭的双引号。

默认返回的格式为"yyyy-mm-ddThh:mm:ss"。

覆盖此方法:

Ext.util.JSON.encodeDate = function(d) {
    return d.format('"Y-m-d"');
};
参数:
  • d : Date
    需要编码的Date
返回值:
  • String
    需要在JSON字符串中使用的字符串字面值。
JSON

公共事件

该类没有公共事件。


Observable
    MixedCollection

Class Ext.util.MixedCollection

包: | Ext.util
定义类的文件: | MixedCollection.js
类: | MixedCollection
子类: | StoreMgr
继承自: | Observable
一个Collection类，既包含了数字索引也包含了key，并暴露了相关事件。

配置项

Config Options Defined By
allowFunctions : Boolean
如果addAll 方法可以把函数引用添加到集合中，指定此参数为true。 默认为false。
MixedCollection
listeners : Object
一个包含一个或多个事件处理器的配置对象，会在初始化的时候被添加到目标对象上...

一个包含一个或多个事件处理器的配置对象，会在初始化的时候被添加到目标对象上。 该配置对象应该是一个有效的监听器配置对象就像 addListener例子中指定的一样可一次附加多个处理器。

ExtJs Components上的DOM事件

一些 ExtJs Component 类导出时会选择一些DOM事件(例如 "click", "mouseover" 等等), 这通常只是在有额外的值可以被添加时发生。例如DataView类的 click事件会传递被点击的节点。也可以直接在Component的HTMLElementevent上访问DOM事件，但必需在Component被渲染后监听器才能添加到Element 上。可以按照以下步骤添加插件:

// 插件会用一个监听器配置对象进行配置。
//该组件会被添加到所有处理方法的参数列表上。
Ext.DomObserver = Ext.extend(Object, {
    constructor: function(config) {
        this.listeners = config.listeners ? config.listeners : config;
    },

    // 组件将自己传递进了插件的初始化方法里
    init: function(c) {
        var p, l = this.listeners;
        for (p in l) {
            if (Ext.isFunction(l[p])) {
                l[p] = this.createHandler(l[p], c);
            } else {
                l[p].fn = this.createHandler(l[p].fn, c);
            }
        }

        // 渲染后立即添加监听器到元素上
        c.render = c.render.createSequence(function() {
            var e = c.getEl();
            if (e) {
                e.on(l);
            }
        });
    },

    createHandler: function(fn, c) {
        return function(e) {
            fn.call(this, e, c);
        };
    }
});

var combo = new Ext.form.ComboBox({

    // 元素被点击后折叠
    plugins: [ new Ext.DomObserver({
        click: function(evt, comp) {
            comp.collapse();
        }
    })],
    store: myStore,
    typeAhead: true,
    mode: 'local',
    triggerAction: 'all'
});

Observable

公共属性

该类没有公共属性。

公共方法

Method Defined By
MixedCollection ( Boolean allowFunctions , Function keyFn )
参数:
  • allowFunctions : Boolean
    如果addAll 函数需要将函数引用添加到集合中，指定此参数为true。 默认为false。
  • keyFn : Function
    一个函数，可以接受一个在当前MixedCollection的type(s)中存储的项目， 然后返回此项目的key值。这被用来查找集合中没有直接通过key参数指定的项目。 传递此参数与提供一个getKey 方法的实现等价。
返回值:
  • void
MixedCollection
add ( String key , Object o ) : Object
向集合中添加一个项目。在完成时触发 add 事件。
向集合中添加一个项目。在完成时触发 add 事件。
参数:
  • key : String

    用来绑定项目的key，或者新项目。

    如果你为当前MixedCollection指定了一个 getKey 的实现，或者被存储项目的key不是一个叫做 id 的属性，MixedCollection能够为新项目获得key。 在这种情况下，只要在此参数中传递新项目。

  • o : Object
    需要添加的项目。
返回值:
  • Object
    被添加的项目。
MixedCollection
addAll ( Object/Array objs ) : void
把一个Array或者Object中所有元素添加到集合中。
把一个Array或者Object中所有元素添加到集合中。
参数:
  • objs : Object/Array
    一个包含属性的对象，将会被添加到集合中，或者是一个值数组，其中每个 元素都会被添加到集合中。如果 allowFunctions 被设置为true，函数引用也将被添加到集合中。
返回值:
  • void
MixedCollection
addEvents( Object|String o, string Optional. ) : void
添加指定的事件到事件列表上，事件会被该Observable触发。
添加指定的事件到事件列表上，事件会被该Observable触发。
参数:
  • o : Object|String
    以事件名作为属性true作为值的对象 或者当多个事件名被分开的传递时则为第一个事件名。
  • Optional. : string
    事件名被分开的传递时则为事件名。 用法:
    this.addEvents('storeloaded', 'storecleared');
返回值:
  • void
Observable
addListener( String eventName, Function handler, [Object scope], [Object options] ) : void
给对象添加事件处理器。
给对象添加事件处理器。
参数:
  • eventName : String
    监听的事件名。
  • handler : Function
    事件调用的方法
  • scope : Object
    （可选）处理方法执行的作用域 (this的引用 reference)。 如果被忽略。默认为触发事件的对象。
  • options : Object
    （可选）包含处理器配置和属性的对象。 可能包含以下的属性:
    • scope : Object
      处理方法执行的作用域(this的引用) 。 如果被忽略。默认为触发事件的对象。
    • delay : Number
      在触发事件后延迟调用处理器的毫秒数。
    • single : Boolean
      如果为True则添加一个处理器来处理下一次的事件触发（仅一次），然后移除自己。
    • buffer : Number
      使得处理器延迟指定毫秒数后预定的运行在 一个Ext.util.DelayedTask中 。 如果事件在时间内再一次被触发，原始的处理器不会被调用，但是新的处理器会预定的在他的位置上。
    • target : Observable
      如果事件在目标的Observable上触发则仅仅调用处理器， 否则 事件会从子类的Observable上冒泡

    组合选项
    使用这些选项参数,可能会组合出不同类型的监听器：

    一个延迟的，一次性的监听器。

    myDataView.on('click', this.onClick, this, {
single: true,
delay: 100
});

    一次调用附加多个处理器
    该方法同样支持传递一个包含指定的多个处理器的属性的配置对象参数。

    myGridPanel.on({
'click' : {
    fn: this.onClick,
    scope: this,
    delay: 100
},
'mouseover' : {
    fn: this.onMouseOver,
    scope: this
},
'mouseout' : {
    fn: this.onMouseOut,
    scope: this
}
});

    或者一个简写的语法：

    myGridPanel.on({
'click' : this.onClick,
'mouseover' : this.onMouseOver,
'mouseout' : this.onMouseOut,
 scope: this
});
返回值:
  • void
Observable
clear () : void
从集合中删除所有项目。在完成时触发 clear 事件。
从集合中删除所有项目。在完成时触发 clear 事件。
参数:
  • 无。
返回值:
  • void
MixedCollection
clone () : MixedCollection
创建当前集合的一个浅拷贝
创建当前集合的一个浅拷贝
参数:
  • 无。
返回值:
  • MixedCollection
MixedCollection
contains ( Object o ) : Boolean
如果集合的项目中包含所传递的对象，返回true。
如果集合的项目中包含所传递的对象，返回true。
参数:
  • o : Object
    需要在集合中进行查找的对象。
返回值:
  • Boolean
    如果集合的项目中包含指定对象，返回true
MixedCollection
containsKey ( String key ) : Boolean
如果集合包含所传递的对象作为一个key，返回true。
如果集合包含所传递的对象作为一个key，返回true。
参数:
  • key : String
    需要在集合中查找的key。
返回值:
  • Boolean
    如果集合的key包含此对象，返回true
MixedCollection
each ( Function fn , [ Object scope ] ) : void
在集合中的每个项目上调用一次指定的函数，传递如下参数...
在集合中的每个项目上调用一次指定的函数，传递如下参数：
  • item : Mixed

    集合中的项目

  • index : Number

    项目的索引

  • length : Number

    集合中所有项目的总数

函数应该返回一个布尔值。函数返回false将会停止迭代。
参数:
  • fn : Function
    需要在每个项目上执行的函数。
  • scope : Object
    (可选)作用域( this 引用)，函数将会其中被执行。默认为迭代过程中的当前项目。
返回值:
  • void
MixedCollection
eachKey ( Function fn , [ Object scope ] ) : void
在集合中的每个key上执行一次指定的函数，传递每个key和它绑定的项目作为...
在集合中的每个key上执行一次指定的函数，传递每个key和它绑定的项目作为 前2个参数。
参数:
  • fn : Function
    需要在每个项目上执行的函数。
  • scope : Object
    (可选)作用域( this 引用)，函数将会在其中被执行。默认为浏览器window
返回值:
  • void
MixedCollection
enableBubble( String/Array events ) :void
是否现在使得事件会被该Observable触发并调用 this.getBubbleTarget()方法在拥有者的继承树...

是否现在使得事件会被该Observable触发并调用 this.getBubbleTarget()方法在拥有者的继承树中冒泡。Observable的基础类中没有该方法的实现。

该方法一般被Ext.Components用来冒泡事件到拥有者的容器。参看Ext.Component.getBubbleTarget默认的实现 在Ext.Component中返回组件的直接拥有者。但是如果需要的是一个已知的目标，该方法可以被重写来更快的访问需求的目标。

例子:

Ext.override(Ext.form.Field, {
    // 添加方法到Field的initComponent上改变事件为冒泡
    initComponent : Ext.form.Field.prototype.initComponent.createSequence(function() {
        this.enableBubble('change');
    }),

    // 我们知道我们想让Field的事件冒泡到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() {
            // 如果样式被修改标题会变红。
            myForm.header.setStyle('color', 'red');
        }
    }
});
参数:
  • events : String/Array
    冒泡的事件名，或事件名数组
返回值:
  • void
Observable
filter ( String property , String/RegExp value , [ Boolean anyMatch ], [ Boolean caseSensitive ] ) : MixedCollection
根据指定的属性过滤集合中的objects。 返回过滤出的一个新集合。
根据指定的属性过滤集合中的objects。 返回过滤出的一个新集合。
参数:
  • property : String
    你的对象中的一个属性
  • value : String/RegExp
    要么是一个字符串，属性值以此字符串起始；或者是一个RegExp，用来测试 属性
  • anyMatch : Boolean
    (可选)True将会匹配字符串中的任意部分，而不仅仅是开始
  • caseSensitive : Boolean
    (可选)True将会在比较时对大小写敏感(默认为False)。
返回值:
  • MixedCollection
    新过滤出的集合
MixedCollection
filterBy ( Function fn , [ Object scope ] ) : MixedCollection
根据一个函数进行过滤。 返回一个过滤后的新集合。 所传递的函数将会在集合中的每个项目上进行调用...
根据一个函数进行过滤。 返回一个过滤后的新集合。 所传递的函数将会在集合中的每个项目上进行调用。 如果函数返回true，项目被包含在结果中，否则被过滤掉。
参数:
  • fn : Function
    需要被调用的函数，它将接受参数o (the object), k (the key)
  • scope : Object
    (可选)作用域( this 引用)，函数将会在其中被调用。默认为当前MixedCollection。
返回值:
  • MixedCollection
    过滤出的新集合
MixedCollection
find ( Function fn , [ Object scope ] ) : Object
返回集合中第一个元素，在此元素上调用所传递的选择函数时返回true。
返回集合中第一个元素，在此元素上调用所传递的选择函数时返回true。
参数:
  • fn : Function
    在每个项目上执行的选择函数。
  • scope : Object
    (可选)作用域( this 引用)，函数将会在其中被执行。默认为浏览器的window。
返回值:
  • Object
    集合中在调用选择函数时返回true的第一个元素。
MixedCollection
findIndex ( String property , String/RegExp value , [ Number start ], [ Boolean anyMatch ], [ Boolean caseSensitive ] ) : Number
根据指定的属性/值，在集合中查找第一个符合条件对象的索引。
根据指定的属性/值，在集合中查找第一个符合条件对象的索引。
参数:
  • property : String
    你的对象的一个属性名。
  • value : String/RegExp
    一个字符串，属性值需要以此开头；或者是一个用来对属性进行测试的RegExp。
  • start : Number
    (可选)开始搜索的起始索引(默认为0)。
  • anyMatch : Boolean
    (可选)True将会匹配字符串中的任意部分，而不仅仅是开始。
  • caseSensitive : Boolean
    (可选)True将会在比较时对大小写敏感(默认为False)。
返回值:
  • Number
    匹配到的索引，或者-1
MixedCollection
findIndexBy ( Function fn , [ Object scope ], [ Number start ] ) : Number
根据一个函数，在集合中查找第一个符合条件的对象的索引。 如果函数返回true...
根据一个函数，在集合中查找第一个符合条件的对象的索引。 如果函数返回true，项目将会被当作符合条件。
参数:
  • fn : Function
    需要调用的函数，它将接受参数o (the object), k (the key)。
  • scope : Object
    (可选)作用域( this 引用)，函数将会在其中被执行。 默认为当前MixedCollection。
  • start : Number
    (可选)查找起始索引位置(默认为0)。
返回值:
  • Number
    匹配的索引或者-1
MixedCollection
fireEvent( String eventName, Object... args ) : Boolean
用传入的参数触发指定的事件 (减去事件名)。 一个事件可以被设置为冒泡 Obse...

用传入的参数触发指定的事件 (减去事件名)。

一个事件可以被设置为冒泡到Observable父类继承树(参看 Ext.Component.getBubbleTarget) 调用enableBubble实现。

参数:
  • eventName : String
    触发的事件名。
  • args : Object...
    传递给处理器的可变长度参数。
返回值:
  • Boolean
    如果有任何的处理器返回false则返回false，否则返回true。
Observable
first () : Object
返回集合中的第一个项目。
返回集合中的第一个项目。
参数:
  • 无。
返回值:
  • Object
    集合中的第一个项目。
MixedCollection
get ( String/Number key ) : Object
此方法调用 item()。 返回绑定到所传递的key或者索引位置的项目。...
此方法调用 item()。 返回绑定到所传递的key或者索引位置的项目。 key的优先级比索引高。 这个调用key 等价，如果没有符合的项目再调用itemAt。
参数:
  • key : String/Number
    项目的key或者索引。
返回值:
  • Object
    如果找到了项目，返回此项目。如果没有找到项目， 返回<tt>undefined</tt>。 如果找到了一个项目，但是它是一个Class，返回<tt>null</tt>。
MixedCollection
getCount () : Number
返回集合中项目个数。
返回集合中项目个数。
参数:
  • 无。
返回值:
  • Number
    集合中项目的个数。
MixedCollection
getKey ( Object item ) : Object
如果你实现getKey，MixedCollection拥有一个一般的方法获取key。 默认实现简单地返回...
如果你实现getKey，MixedCollection拥有一个一般的方法获取key。 默认实现简单地返回 item.id ，但是你可以提供你自己的实现返回一个不同的值，就像如下的例子：
// 一般方法
var mc = new Ext.util.MixedCollection();
mc.add(someEl.dom.id, someEl);
mc.add(otherEl.dom.id, otherEl);
//等等

// 使用getKey
var mc = new Ext.util.MixedCollection();
mc.getKey = function(el){
   return el.dom.id;
};
mc.add(someEl);
mc.add(otherEl);

// 或者通过构造器
var mc = new Ext.util.MixedCollection(false, function(el){
   return el.dom.id;
});
mc.add(someEl);
mc.add(otherEl);
参数:
  • item : Object
    需要查找key的项目。
返回值:
  • Object
    所传递项目的key。
MixedCollection
getRange ( [ Number startIndex ], [ Number endIndex ] ) : Array
返回当前集合中一个范围中的项目
返回当前集合中一个范围中的项目
参数:
  • startIndex : Number
    (可选)其实索引。默认为0。
  • endIndex : Number
    (可选)结束索引。默认为最后一个项目。
返回值:
  • Array
    一个项目数组
MixedCollection
hasListener( String eventName ) : Boolean
检测对象是否包含指定事件的任何监听器
检测对象是否包含指定事件的任何监听器
参数:
  • eventName : String
    检测的事件名
返回值:
  • Boolean
    如果事件被监听则为true，否则为false
Observable
indexOf ( Object o ) : Number
返回所传递对象在集合中的索引位置。
返回所传递对象在集合中的索引位置。
参数:
  • o : Object
    需要查找索引的项目。
返回值:
  • Number
    项目的索引。如果没有找到返回-1。
MixedCollection
indexOfKey ( String key ) : Number
返回所传递的key在集合中的索引位置。
返回所传递的key在集合中的索引位置。
参数:
  • key : String
    需要查找索引的key。
返回值:
  • Number
    key的索引。
MixedCollection
insert ( Number index , String key , [ Object o ] ) : Object
在集合的指定索引位置插入一个项目。 在完成时触发add 事件。
在集合的指定索引位置插入一个项目。 在完成时触发add 事件。
参数:
  • index : Number
    需要插入项目的索引位置。
  • key : String
    需要绑定新项目的key，或者是项目自身。
  • o : Object
    (可选)如果第二个参数是一个key，此参数为新项目。
返回值:
  • Object
    插入的新项目。
MixedCollection
item ( String/Number key ) : Object
返回绑定到所传递的key或者index的项目。 key的优先级比index高。这与首先调用...
返回绑定到所传递的key或者index的项目。 key的优先级比index高。这与首先调用key 等价，然后如果没有项目匹配时调用 itemAt。
参数:
  • key : String/Number
    项目的key或者index
返回值:
  • Object
    如果找到了项目，返回此项目。如果没有找到项目，返回<tt>undefined</tt>。 如果找到了一个项目，但是它是一个Class，返回<tt>null</tt>。
MixedCollection
itemAt ( Number index ) : Object
返回指定索引位置处的项目。
返回指定索引位置处的项目。
参数:
  • index : Number
    项目的索引。
返回值:
  • Object
    指定索引处的项目。
MixedCollection
key ( String/Number key ) : Object
返回绑定到所传递key的项目。
返回绑定到所传递key的项目。
参数:
  • key : String/Number
    项目的key。
返回值:
  • Object
    绑定到所传递key的项目。
MixedCollection
keySort ( [ String direction ], [ Function fn ] ) : void
根据keys对当前集合进行排序。
根据keys对当前集合进行排序。
参数:
  • direction : String
    (可选)'ASC' 或者 'DESC'。默认为'ASC'。
  • fn : Function
    (可选)比较函数，定义了排序规则。默认根据大小写不敏感的字符串排序。
返回值:
  • void
MixedCollection
last () : Object
返回集合中的最后一个项目。
返回集合中的最后一个项目。
参数:
  • 无。
返回值:
  • Object
    集合中的最后一个项目。
MixedCollection
on( String eventName, Function handler, [Object scope], [Object options] ) : void
给对象添加事件处理器 (addListener的简写形式)
给对象添加事件处理器 (addListener的简写形式。)
参数:
  • eventName : String
    监听的事件类型
  • handler : Function
    事件调用的方法
  • scope : Object
    （可选）处理方法执行时的作用域 (this 的引用)。 如果被忽略。默认为触发事件的对象。
  • options : Object
    可选 包含处理器配置的对象。
返回值:
  • void
Observable
purgeListeners() : void
移除对象上所有的监听器
移除对象上所有的监听器
参数:
  • 无。
返回值:
  • void
Observable
relayEvents( Object o, Array events ) : void
从指定的Observable上传递选择的事件就好像被当前对象触发一样。
从指定的Observable上传递选择的事件就好像被当前对象触发一样。
参数:
  • o : Object
    该Observable上的事件被当前对象传递。
  • events : Array
    传递的数组名。
返回值:
  • void
Observable
remove ( Object o ) : Object
从集合中删除一个项目。
从集合中删除一个项目。
参数:
  • o : Object
    需要删除的项目。
返回值:
  • Object
    被删除的项目，没有项目可删除时返回false。
MixedCollection
removeAt ( Number index ) : Object
删除集合中指定索引位置的项目。在完成时触发 remove 事件。
删除集合中指定索引位置的项目。在完成时触发 remove 事件。
参数:
  • index : Number
    需要删除的项目在集合中的索引位置。
返回值:
  • Object
    被删除的项目，或者没有项目被删除时为false。
MixedCollection
removeKey ( String key ) : Object
从集合中删除一个绑定到所传递key的项目。
从集合中删除一个绑定到所传递key的项目。
参数:
  • key : String
    需要删除项目的key
返回值:
  • Object
    被删除的项目，如果没有项目被删除时为false
MixedCollection
removeListener( String eventName, Function handler, [Object scope] ) : void
删除一个事件处理器。
删除一个事件处理器。
参数:
  • eventName : String
    处理器关联的事件类型。
  • handler : Function
    移除的处理器。 这应该是传递到addListener里的方法的引用。
  • scope : Object
    （可选）处理器指定的初始作用域。
返回值:
  • void
Observable
reorder ( Object mapping ) : void
根据从旧索引到新索引的映射关系，对每个项目进行重新排序。 在内部，这仅仅被当作一次排序...
根据从旧索引到新索引的映射关系，对每个项目进行重新排序。 在内部，这仅仅被当作一次排序。无论重新排序是否发生都会触发 'sort'事件。
参数:
  • mapping : Object
    从旧项目索引到新项目索引的映射关系
返回值:
  • void
MixedCollection
replace ( String key , o {Object} ) : Object
替换集合中的一个项目。 在完成时触发 replace 事件。
替换集合中的一个项目。 在完成时触发 replace 事件。
参数:
  • key : String

    需要替换的项目所绑定的key，或者为替换项目。

    如果你为当前MixedCollection指定了一个 getKey 的实现，或者被存储项目的key不是一个叫做 id 的属性，MixedCollection能够为进行替换的项目获得key。 如果你想要替换一个拥有相同key值的项目，那么只要在此参数中传递 进行替换的项目。

  • {Object} : o
    o (可选) 如果传递的第一个参数是一个key，项目将会绑定到此key。
返回值:
  • Object
    新项目。
MixedCollection
resumeEvents() : void
重新开始触发事件。(参见suspendEvents) 如果事件以queueSuspended参数被挂起，则在事件被挂起时 ...
重新开始触发事件。(参见 suspendEvents) 如果事件以queueSuspended 参数被挂起，则在事件被挂起时触发的事件会被传递到所有的监听器上
参数:
  • 无。
返回值:
  • void
Observable
sort ( [ String direction ], [ Function fn ] ) : void
使用传递的比较函数对集合的item值进行排序。
使用传递的比较函数对集合的item值进行排序。
参数:
  • direction : String
    (可选)'ASC'或者'DESC'。默认为'ASC'。
  • fn : Function
    (可选)比较函数，定义了排序规则。默认根据数字值进行排序。
返回值:
  • void
MixedCollection
suspendEvents( Boolean queueSuspended ) : void
暂停触发所有的事件。 (参看resumeEvents)
暂停触发所有的事件。（参看 resumeEvents)
参数:
  • queueSuspended : Boolean
    如果传递为true则排列好暂停的事件使得在调用 resumeEvents 后再触发它们，而不是抛弃所有暂停的事件。
返回值:
  • void
Observable
un( String eventName, Function handler, [Object scope] ) : void
删除一个事件处理器(removeListener方法的简写形式)
删除一个事件处理器(removeListener方法的简写形式。)
参数:
  • eventName : String
    处理器关联的事件类型
  • handler : Function
    被删除的处理器 这应该是传入 addListener 中的方法的引用。
  • scope : Object
    （可选）为处理器指定的初始作用域。
返回值:
  • void
Observable

公共事件

Event Defined By
add : ( Number index , Object o , String key )
当一个项目被添加到集合中时触发。
当一个项目被添加到集合中时触发。
监听器将会以如下参数格式被调用:
  • index : Number
    项目被添加的索引位置。
  • o : Object
    被添加的项目。
  • key : String
    被添加项目绑定的key
MixedCollection
clear : ()
当集合被清空时触发。
当集合被清空时触发。
监听器将会以如下参数格式被调用:
  • None.
MixedCollection
remove : ( Object o , [ String key ] )
当一个项目被从集合中删除时触发。
当一个项目被从集合中删除时触发。
监听器将会以如下参数被调用:
  • o : Object
    被删除的项目。
  • key : String
    (可选)被删除项目绑定的key
MixedCollection
replace : ( String key , Object old , Object new )
当集合中一个项目被替换时触发。
当集合中一个项目被替换时触发。
监听器将会以如下参数格式被调用:
  • key : String
    新增项目绑定的key
  • old : Object
    被替换的项目。
  • new : Object
    新项目。
MixedCollection


Class Ext.util.Observable

包: | Ext.util
定义类的文件: | Observable.js
类: | Observable
子类: | Component, Direct, History, Resizable, SplitBar, Updater, Connection, DataProxy, Node, Store, Tree, DragTracker, Provider, BasicForm, AbstractSelectionModel, ColumnModel, GridView, PropertyStore, ColumnResizer, Sorter, DefaultSelectionModel, MultiSelectionModel, TreeLoader, ClickRepeater, MixedCollection
继承自: | Object
一个基础的类，为事件的发布提供了一个通用的接口。子类应该有一个 "events"属性里面包含了所有事件的定义，和，可选的，"listeners"属性 包含了配置的监听器的定义。
For example:
Employee = Ext.extend(Ext.util.Observable, {
    constructor: function(config){
        this.name = config.name;
        this.addEvents({
            "fired" : true,
            "quit" : true
        });

        //拷贝配置的监听器到*this*对象里，使得基础类的
        // 构造器将会被添加。
        this.listeners = config.listeners;

        //调用我们父类的构造器来完成构造过程。
        Employee.superclass.constructor.call(this, config)
    }
});
可能会这样被用到:
var newEmployee = new Employee({
    name: employeeName,
    listeners: {
        quit: function() {
            // 使用 default, 则"this"将会是触发事件的对象。
            alert(this.name + " has quit!");
        }
    }
});

配置项

Config Options Defined By
listeners : Object
一个包含一个或多个事件处理器的配置对象，会在初始化的时候被添加到目标对象上...

一个包含一个或多个事件处理器的配置对象，会在初始化的时候被添加到目标对象上。 该配置对象应该是一个有效的监听器配置对象就像 addListener例子中指定的一样可一次附加多个处理器。

ExtJs Components上的DOM事件

一些 ExtJs Component 类导出时会选择一些DOM事件(例如 "click", "mouseover" 等等), 这通常只是在有额外的值可以被添加时发生。例如DataView类的 click事件会传递被点击的节点。也可以直接在Component的HTMLElementevent上访问DOM事件，但必需在Component被渲染后监听器才能添加到Element 上。可以按照以下步骤添加插件:

// 插件会用一个监听器配置对象进行配置。
//该组件会被添加到所有处理方法的参数列表上。
Ext.DomObserver = Ext.extend(Object, {
    constructor: function(config) {
        this.listeners = config.listeners ? config.listeners : config;
    },

    // 组件将自己传递进了插件的初始化方法里
    init: function(c) {
        var p, l = this.listeners;
        for (p in l) {
            if (Ext.isFunction(l[p])) {
                l[p] = this.createHandler(l[p], c);
            } else {
                l[p].fn = this.createHandler(l[p].fn, c);
            }
        }

        // 渲染后立即添加监听器到元素上
        c.render = c.render.createSequence(function() {
            var e = c.getEl();
            if (e) {
                e.on(l);
            }
        });
    },

    createHandler: function(fn, c) {
        return function(e) {
            fn.call(this, e, c);
        };
    }
});

var combo = new Ext.form.ComboBox({

    // 元素被点击后折叠
    plugins: [ new Ext.DomObserver({
        click: function(evt, comp) {
            comp.collapse();
        }
    })],
    store: myStore,
    typeAhead: true,
    mode: 'local',
    triggerAction: 'all'
});

Observable

公共属性

该类没有公共属性。

公共方法

Method Defined By
Observable.capture( Observable o, Function fn, [Object scope] ) : void
<静态> 开始在指定的Observable上捕获事件。 所有的事件触发之前都会被传递给提供的方法，使用 事件名称+标准签名 的格式...
开始在指定的Observable上捕获事件。 所有的事件触发之前都会被传递给提供的方法，使用 事件名称+标准签名 的格式。 如果提供的方法返回false，事件将不会被触发。
参数:
  • o : Observable
    在该Observable上捕获事件。
  • fn : Function
    事件被触发时方法会被调用。
  • scope : Object
    （可选）方法执行的作用域 (this的引用) 。默认为触发事件的Observable
返回值:
  • void
Observable
Observable.observeClass( Function c, Object listeners ) : void
<静态> 用传入的类的构造器设置可观察性。 Sets observability on the passed class constructor. This makes any event fired on any instance of the passed class al...
<static> Sets observability on the passed class constructor.

这使得传入的类的任何实例上的任何事件可以被触发同时也允许通过传入的类触发一个单独的事件来集中的一次性处理很多实例上的事件。

用法:

Ext.util.Observable.observeClass(Ext.data.Connection);
Ext.data.Connection.on('beforerequest', function(con, options) {
    console.log('Ajax request made to ' + options.url);
});
参数:
  • c : Function
    创建observable的类的构造器。
  • listeners : Object
    添加的包含一系列监听器的对象。参看addListener.
返回值:
  • void
Observable
Observable.releaseCapture( Observable o ) : void
<静态> 从Observable中释放所有捕获的事件。
<静态> 从Observable中释放所有捕获的事件。
参数:
  • o : Observable
    释放的Observable
返回值:
  • void
Observable
addEvents( Object|String o, string Optional. ) : void
添加指定的事件到事件列表上，事件会被该Observable触发。
添加指定的事件到事件列表上，事件会被该Observable触发。
参数:
  • o : Object|String
    以事件名作为属性true作为值的对象 或者当多个事件名被分开的传递时则为第一个事件名。
  • Optional. : string
    事件名被分开的传递时则为事件名。 用法:
    this.addEvents('storeloaded', 'storecleared');
返回值:
  • void
Observable
addListener( String eventName, Function handler, [Object scope], [Object options] ) : void
给对象添加事件处理器。
给对象添加事件处理器。
参数:
  • eventName : String
    监听的事件名。
  • handler : Function
    事件调用的方法
  • scope : Object
    （可选）处理方法执行的作用域 (this的引用 reference)。 如果被忽略。默认为触发事件的对象。
  • options : Object
    （可选）包含处理器配置和属性的对象。 可能包含以下的属性:
    • scope : Object
      处理方法执行的作用域(this的引用) 。 如果被忽略。默认为触发事件的对象。
    • delay : Number
      在触发事件后延迟调用处理器的毫秒数。
    • single : Boolean
      如果为True则添加一个处理器来处理下一次的事件触发（仅一次），然后移除自己。
    • buffer : Number
      使得处理器延迟指定毫秒数后预定的运行在 一个Ext.util.DelayedTask中 。 如果事件在时间内再一次被触发，原始的处理器不会被调用，但是新的处理器会预定的在他的位置上。
    • target : Observable
      如果事件在目标的Observable上触发则仅仅调用处理器， 否则 事件会从子类的Observable上冒泡

    组合选项
    使用这些选项参数,可能会组合出不同类型的监听器：

    一个延迟的，一次性的监听器。

    myDataView.on('click', this.onClick, this, {
single: true,
delay: 100
});

    一次调用附加多个处理器
    该方法同样支持传递一个包含指定的多个处理器的属性的配置对象参数。

    myGridPanel.on({
'click' : {
    fn: this.onClick,
    scope: this,
    delay: 100
},
'mouseover' : {
    fn: this.onMouseOver,
    scope: this
},
'mouseout' : {
    fn: this.onMouseOut,
    scope: this
}
});

    或者一个简写的语法：

    myGridPanel.on({
'click' : this.onClick,
'mouseover' : this.onMouseOver,
'mouseout' : this.onMouseOut,
 scope: this
});
返回值:
  • void
Observable
enableBubble( String/Array events ) :void
是否现在使得事件会被该Observable触发并调用 this.getBubbleTarget()方法在拥有者的继承树...

是否现在使得事件会被该Observable触发并调用 this.getBubbleTarget()方法在拥有者的继承树中冒泡。Observable的基础类中没有该方法的实现。

该方法一般被Ext.Components用来冒泡事件到拥有者的容器。参看Ext.Component.getBubbleTarget默认的实现 在Ext.Component中返回组件的直接拥有者。但是如果需要的是一个已知的目标，该方法可以被重写来更快的访问需求的目标。

例子:

Ext.override(Ext.form.Field, {
    // 添加方法到Field的initComponent上改变事件为冒泡
    initComponent : Ext.form.Field.prototype.initComponent.createSequence(function() {
        this.enableBubble('change');
    }),

    // 我们知道我们想让Field的事件冒泡到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() {
            // 如果样式被修改标题会变红。
            myForm.header.setStyle('color', 'red');
        }
    }
});
参数:
  • events : String/Array
    冒泡的事件名，或事件名数组
返回值:
  • void
Observable
fireEvent( String eventName, Object... args ) : Boolean
用传入的参数触发指定的事件 (减去事件名)。 一个事件可以被设置为冒泡 Obse...

用传入的参数触发指定的事件 (减去事件名)。

一个事件可以被设置为冒泡到Observable父类继承树(参看 Ext.Component.getBubbleTarget) 调用enableBubble实现。

参数:
  • eventName : String
    触发的事件名。
  • args : Object...
    传递给处理器的可变长度参数。
返回值:
  • Boolean
    如果有任何的处理器返回false则返回false，否则返回true。
Observable
hasListener( String eventName ) : Boolean
检测对象是否包含指定事件的任何监听器
检测对象是否包含指定事件的任何监听器
参数:
  • eventName : String
    检测的事件名
返回值:
  • Boolean
    如果事件被监听则为true，否则为false
Observable
on( String eventName, Function handler, [Object scope], [Object options] ) : void
给对象添加事件处理器 (addListener的简写形式)
给对象添加事件处理器 (addListener的简写形式。)
参数:
  • eventName : String
    监听的事件类型
  • handler : Function
    事件调用的方法
  • scope : Object
    （可选）处理方法执行时的作用域 (this 的引用)。 如果被忽略。默认为触发事件的对象。
  • options : Object
    可选 包含处理器配置的对象。
返回值:
  • void
Observable
purgeListeners() : void
移除对象上所有的监听器
移除对象上所有的监听器
参数:
  • 无。
返回值:
  • void
Observable
relayEvents( Object o, Array events ) : void
从指定的Observable上传递选择的事件就好像被当前对象触发一样。
从指定的Observable上传递选择的事件就好像被当前对象触发一样。
参数:
  • o : Object
    该Observable上的事件被当前对象传递。
  • events : Array
    传递的数组名。
返回值:
  • void
Observable
removeListener( String eventName, Function handler, [Object scope] ) : void
删除一个事件处理器。
删除一个事件处理器。
参数:
  • eventName : String
    处理器关联的事件类型。
  • handler : Function
    移除的处理器。 这应该是传递到addListener里的方法的引用。
  • scope : Object
    （可选）处理器指定的初始作用域。
返回值:
  • void
Observable
resumeEvents() : void
重新开始触发事件。(参见suspendEvents) 如果事件以queueSuspended参数被挂起，则在事件被挂起时 ...
重新开始触发事件。(参见 suspendEvents) 如果事件以queueSuspended 参数被挂起，则在事件被挂起时触发的事件会被传递到所有的监听器上
参数:
  • 无。
返回值:
  • void
Observable
suspendEvents( Boolean queueSuspended ) : void
暂停触发所有的事件。 (参看resumeEvents)
暂停触发所有的事件。（参看 resumeEvents)
参数:
  • queueSuspended : Boolean
    如果传递为true则排列好暂停的事件使得在调用 resumeEvents 后再触发它们，而不是抛弃所有暂停的事件。
返回值:
  • void
Observable
un( String eventName, Function handler, [Object scope] ) : void
删除一个事件处理器(removeListener方法的简写形式)
删除一个事件处理器(removeListener方法的简写形式。)
参数:
  • eventName : String
    处理器关联的事件类型
  • handler : Function
    被删除的处理器 这应该是传入 addListener 中的方法的引用。
  • scope : Object
    （可选）为处理器指定的初始作用域。
返回值:
  • void
Observable

公共事件

该类没有公共事件。


Class Ext.util.TaskRunner

包: | Ext.util
定义类的文件: | TaskMgr.js
类: | TaskRunner
子类: | TaskMgr
继承自: | Object
提供对并行执行一个或多个任务的接口。一般你可以使用单例的 Provides the ability to execute one or more arbitrary tasks in a multithreaded manner. Generally, you can use the singleton Ext.TaskMgr , 不过如果有需要,你可以创建多个不同的TaskRunner实例。任意数量的任务将可以在任意时间启动,并独立的运行。示例用法:

                // Start a simple clock task that updates a div once per second
var updateClock = function(){
    Ext.fly('clock').update(new Date().format('g:i:s A'));
}
var task = {
    run: updateClock,
    interval: 1000 //1 second
}
var runner = new Ext.util.TaskRunner();
runner.start(task);

// equivalent using TaskMgr
Ext.TaskMgr.start({
    run: updateClock,
    interval: 1000
});

See the start method for details about how to configure a task object.

Also see Ext.util.DelayedTask.

公共属性

该类没有公共属性。

公共方法

Method Defined By
TaskRunner ( [ Number interval ] )
参数:
  • interval : Number
    (可选) TaskRunner实例支持的最小的时间刻度,单位毫秒 (默认值为 10)
返回值:
  • void
TaskRunner
start ( Object task ) : Object
启动一个新的任务。
启动一个新的任务。
参数:
  • task : Object

    一个拥有以下属性的配置对象:

    • run : Function

      在这个任务中需要定时执行的函数。它会在每个任务间隔时间执行,并传递定义的 args 参数和执行计数。

      如果需要特定( this 引用)的作用域,则需要配置 scope 参数。

      函数返回 false 可终止该任务。

    • interval : Number
      任务执行的频率,单位毫秒。
    • args : Array
      (可选) 传递由 run 指定的函数的参数数组。如果没有指定，则传递当前执行计数。
    • scope : Object
      (可选) 执行 run 函数(this 引用)的作用域，默认为任务配置对象。
    • duration : Number
      (可选) 自动停止任务的时间长度,即任务最长运行时间,单位:毫秒(默认值为 indefinite)。
    • repeat : Number
      (可选) 自动停止任务前任务执行的最大重复次数 (默认值为 indefinite)。

    在每次执行前，Ext将 taskRunCount 属性注入每个任务对象中以使重复计数的运算可以被执行。

返回值:
  • Object
    该任务
TaskRunner
stop ( Object task ) : Object
停止一个运行中的任务。
停止一个运行中的任务。
参数:
  • task : Object
    要停止的任务。
返回值:
  • Object
    该任务
TaskRunner
stopAll () : void
立即停止当前运行的所有任务。
立即停止当前运行的所有任务。
参数:
  • 无。
返回值:
  • void
TaskRunner

公共事件

该类没有公共事件。


Class Ext.util.TextMetrics

包: | Ext.util
定义类的文件: | TextMetrics.js
类: | TextMetrics
继承自: | Object
提供文本精确的像素长度，这样你可以精确地获知一个给定的文本块有多高和多宽。

这是一个单例的类，不能直接实例化。

公共属性

该类没有公共属性。

公共方法

Method Defined By
bind ( String/HTMLElement el ) : void
只能使用CreateInstance（）创建实例

只能使用createInstance, 创建实例not 关于 singleton.

将TextMetrics实例绑定到一个元素，从其中可以拷贝存在的CSS样式， 它们可能会影响到已经渲染的文本的尺寸。
参数:
  • el : String/HTMLElement
    元素的DOM节点或者ID
返回值:
  • void
TextMetrics
createInstance ( String/HTMLElement el , [ Number fixedWidth ] ) : Ext.util.TextMetrics.Instance
返回一个唯一的TextMetrics实例，它可以被直接绑定到一个元素上，并可以被复用...
返回一个唯一的TextMetrics实例，它可以被直接绑定到一个元素上，并可以被复用。 减少了上层多次调用去为每个measurement初始化样式属性。
参数:
  • el : String/HTMLElement
    该实例被绑定到的DOM节点 DOM ID 或者元素
  • fixedWidth : Number
    可选 如果是多行文本，你必须设置一个 以固定宽度的文本高度精确测量
返回值:
  • Ext.util.TextMetrics.Instance
    新的实例
TextMetrics
getHeight ( String text ) : Number
只能使用CreateInstance（）创建实例, 并不是单例. 设置内部的量测元素的高度。。。。

只能使用 createInstance, 创建实例not单例

返回指定文本的测量高度。对于多行文本呢，如果需要，必须调用 setFixedWidth
参数:
  • text : String
    给文本的尺寸
返回值:
  • Number
    高度的像素单位
TextMetrics
getSize ( String text ) : Object
根据内部元素的样式和宽度属性，返回指定文本的尺寸。

只能使用 createInstance, 创建实例not单例

根据内部元素的样式和宽度属性，返回指定文本的尺寸。 element's style and width properties
参数:
  • text : String
    The text to measure
返回值:
  • Object
    一个包含 {width: (width), height: (height)}属性的对象
TextMetrics
getWidth ( String text ) : Number
只能使用CreateInstance（）创建实例, 并不是单例. 返回指定文本的测量宽度

只能使用 createInstance, 创建实例not单例

返回指定文本的测量宽度
参数:
  • text : String
    text的尺寸
返回值:
  • Number
    宽度以像素为单位
TextMetrics
measure ( String/HTMLElement el , String text , [ Number fixedWidth ] ) : Object
测量指定文本的尺寸
测量指定文本的尺寸
参数:
  • el : String/HTMLElement
    现有的具有CSS样式的dom节点 元素，dom id中复制会引起文字大小的改变
  • text : String
    文本的尺寸
  • fixedWidth : Number
    可选 如果是多行文本，你必须设置一个 以固定宽度的文本高度精确测量
返回值:
  • Object
    一个包含 {width: (width), height: (height)}属性的对象
TextMetrics
setFixedWidth ( Number width ) : void
只能使用CreateInstance（）创建实例, 并不是关于单例. 设置内部的量测元素的宽度。。。。

只能使用 createInstance, 创建实例not单例

设置内部的量测元素的宽度。 如果需要文本分行， 你必须设置一个固定的宽度，以便自动测量文本高度
参数:
  • width : Number
    要设置元素的宽度width
返回值:
  • void
TextMetrics

公共事件

该类没有公共事件。


Observable
    Component
      BoxComponent
        Container
          Viewport

Class Ext.Viewport

包: | Ext
定义类的文件: | Viewport.js
类: | Viewport
继承自: | Container

一个特殊的容器，用来描述应用的可见区域 (浏览器的视口)。

Viewport把自己渲染到documet.body，并自动将自己调整到浏览器视口的大小，在 窗口大小发生改变时自动管理。 在一个页面中只能创建一个Viewport。 内部的布局依赖添加到Viewport的Panel 的实际情况，或者它的items， 通过add 添加进来的子面板自己可以有一种布局。

Viewport不提供滚动条，所以如果需要，Viewport中的子面板必须 通过autoScroll 配置项自己提供滚动条。

以下例子演示浏览一个典型应用的border布局 :
new Ext.Viewport({
    layout: 'border',
    items: [{
        region: 'north',
        html: '<h1 class="x-panel-header">Page Title</h1>',
        autoHeight: true,
        border: false,
        margins: '0 0 5 0'
    }, {
        region: 'west',
        collapsible: true,
        title: 'Navigation',
        width: 200
        // the west region might typically utilize a TreePanel or a Panel with Accordion layout

    }, {
        region: 'south',
        title: 'Title for Panel',
        collapsible: true,
        html: 'Information goes here',
        split: true,
        height: 100,
        minHeight: 100
    }, {
        region: 'east',
        title: 'Title for the Grid Panel',
        collapsible: true,
        split: true,
        width: 200,
        xtype: 'grid',
        // remaining grid configuration not shown ...
        // notice that the GridPanel is added directly as the region
        // it is not "overnested" inside another Panel
    }, {
        region: 'center',
        xtype: 'tabpanel', // TabPanel itself has no title
        items: {
            title: 'Default Tab',
            html: 'The first tab\'s content. Others may be added dynamically'
        }
    }]
});

配置项

Config Options Defined By
activeItem : String/Number
一个string型的组件id，或者组件的数字索引， 它需要...
一个string型的组件id，或者组件的数字索引， 它需要在渲染时在容器内的布局管理器中被初始化并激活。 例如：activeItem: 'item-1' 或者 activeItem: 0 ( 索引 0 =容器子项目集合中的第一个元素)。 activeItem仅仅适用于一次显示一个组件的布局模式(比如 Ext.layout.AccordionLayout, Ext.layout.CardLayout 和 Ext.layout.FitLayout)。 与 Ext.layout.ContainerLayout.activeItem 相关。
Container
anchor : String
注: 这个配置只用于该组件被包含在一个已使用AnchorLayout...

注: 这个配置只用于该组件被包含在一个已使用 AnchorLayout (或者其子类)配置的Container时。 基于布局管理器，例如：

  • Ext.form.FormPanel
  • 指定 layout: 'anchor' // or 'form', or 'absolute'

参见 Ext.layout.AnchorLayout. anchor 。

BoxComponent
autoDestroy : Boolean
如果为true，容器将自动销毁任何从其中被删除的组件， 否则...
如果为true，容器将自动销毁任何从其中被删除的组件， 否则必须手动处理销毁操作(默认为true)。
Container
autoEl : Mixed
一个表签名或者一个 DomHelper 描述，用来创建 Element ，它将封装当前组件...

一个表签名或者一个 DomHelper 描述，用来创建 Element ，它将封装当前组件。

一般情况下你不必指定此值。对于基类 Ext.Component, Ext.BoxComponent, 和 Ext.Container, 此值默认为 'div'。 越复杂的Ext类使用越复杂的DOM结构，这些是由它们自己的onRender方法创建的。

这被设计用来允许开发者创建针对特定应用的 工具组件，这些组件由不同的DOM元素封装而成。 示例用法:

{
    xtype: 'box',
    autoEl: {
        tag: 'img',
        src: 'http://www.example.com/example.jpg'

    }
}, {
    xtype: 'box',
    autoEl: {
        tag: 'blockquote',
        html: 'autoEl is cool!'
    }
}, {
    xtype: 'container',
    autoEl: 'ul',
    cls: 'ux-unordered-list',
    items: {
        xtype: 'box',
        autoEl: 'li',
        html: 'First list item'
    }
}
Component
autoScroll : Boolean
如果值为true，将会在该元素上使用overflow:'auto'配置，并且在必要的时候...
如果值为true，将会在该元素上使用overflow:'auto'配置，并且在必要的时候自动显示滚动条，否则，溢出部分的组件都会被切除(默认值为 false)。
BoxComponent
autoShow : Boolean
如果组件需要检测隐藏CSS属性(如 'x-hidden' 或者 'x-hide-display')并且在渲染时删除...
如果组件需要检测隐藏CSS属性(如 'x-hidden' 或者 'x-hide-display')并且在渲染时删除它们 (默认为false)，设置此值为true。
Component
boxMaxHeight : Number
设置组件的最大高度值...

设置组件的最大高度值。

警告:布局管理器应用的任何管理大小的配置将会被此属性覆盖。

BoxComponent
boxMaxWidth : Number
设置组件的最大宽度值...

设置组件的最大宽度值。

警告:布局管理器应用的任何管理大小的配置将会被此属性覆盖。

BoxComponent
boxMinHeight : Number
设置组件的最小高度值...

设置组件的最小高度值。

警告:布局管理器应用的任何管理大小的配置将会被此属性覆盖。

BoxComponent
boxMinWidth : Number
设置组件的最小宽度值...

设置组件的最小宽度值。

警告: 布局管理器应用的任何管理大小的配置将会被此属性覆盖。

BoxComponent
bubbleEvents : Array
一个事件数组，当这些事件被触发时，将会被冒泡到所有父容器中。参见....

一个事件数组，当这些事件被触发时，将会被冒泡到所有父容器中。参见 Ext.util.Observable.enableBubble。 默认为 []。

Container
bufferResize : Boolean/Number
当设置为true时(50毫秒)或者是一个毫秒数值， 指定给当前容器的布...
当设置为true时(50毫秒)或者是一个毫秒数值， 指定给当前容器的布局管理器将会缓存它计算出的频率，然后 对组件进行一次重新布局操作。 对于重量级的容器，或者拥有大量子组件的容器来说，这非常有用， 因为频繁进行布局是非常昂贵的。 默认为 50 .
Container
clearCls : String
应用到特殊的clearing div的CSS类， 这个clearing div直接渲染到每个form field的包装器后面...

应用到特殊的clearing div的CSS类， 这个clearing div直接渲染到每个form field的包装器后面，以提供 清除field的功能(默认为 'x-form-clear-left')。

注意: 只有在当前组件被渲染到一个使用FormLayout 布局(例如 Ext.form.FormPanel 或者指定 layout:'form')的 容器中、或者是指定了一个fieldLabel 、或者指定isFormField=true 时此配置才有效。

另请参见 Ext.layout.FormLayout. fieldTpl。

Component
cls : String
一个可选的额外CSS类，它将被添加到当前组件的元素上(默认为'')...
一个可选的额外CSS类，它将被添加到当前组件的元素上(默认为'')。 此属性对于在组件上，或者它的任何使用标准CSS规则的孩子节点上， 添加定制的样式非常有用。
Component
contentEl : String
(可选)指定一个已存在的HTML元素，或者一个已存在HTML元素的...

(可选)指定一个已存在的HTML元素，或者一个已存在HTML元素的 id ，它们将被用作当前组件的内容。

  • 描述 :
    此配置选项被用来将一个已存在的HTML元素 插入到一个新组件(在组件渲染之后它简单地移动DOM元素) 的layout元素中，使它成为该组件的内容。
  • 注意 :
    指定的HTML元素将被append到组件的layout元素中， 在所有配置的 HTML 被插入之后， 并且，这样的话，在render事件 被触发时，document中将不再包含此元素。
    指定的HTML元素将不会参与组件所有可能使用的 layout 过程(译者注：指这些HTML元素 不会参与布局操作)。 它仅是HTML而已。布局操作实在孩子 items 上进行的。
    添加 x-hidden 或者 x-hide-display CSS类，以防在内容渲染到panel时发生闪烁。
Component
ctCls : String
一个可选的外部CSS样式，添加到这个组件的容器(默认值为 '')。 这个方法对于使用标准的CSS规则...

一个可选的外部CSS样式，添加到这个组件的容器(默认值为 '')。 这个方法对于使用标准的CSS规则，为组件或它的任何一个子组件添加特定的样式非常有用。 参见 Ext.layout.ContainerLayout和 extraCls 。

注意: ctCls 默认为 ''期望如下的类，它们将指定一个默认值:

  • Box Layout : 'x-box-layout-ct'
使用一个额外的CSS类配置以上的Class，它是append到默认对象上的。例如， 对于BoxLayout (Hbox and Vbox):
                                ctCls: 'x-box-layout-ct custom-class'

Component
data : Mixed
初始化数据集，它将被应用到 tpl 上以刷新组件的内容区域。
Component
defaultType : String
当一个子项目通过一个原生的配置对象 而不是一个组件的实例指定时。...

当一个子项目通过一个原生的配置对象 而不是一个组件的实例指定时。 在当前容器中创建子组件时使用的默认 xtype 。

默认为 'panel' ， Ext.menu.Menu 默认为 'menuitem' ， Ext.Toolbar 和 Ext.ButtonGroup 默认为 'button' 。

Container
defaults : Object|Function
此选项是在所有添加的项目上应用默认设置的手段， 这些项目要么是通过...

此选项是在所有添加的项目上应用默认设置的手段， 这些项目要么是通过 items 配置项添加的， 或者是通过 add 或者是通过 insert 方法添加的。

如果添加的项目是一个配置对象， 并且不是一个组件的实例， 那么默认参数将会被无条件地被应用。 如果添加的项目是一个组件的实例， 那么默认参数将有条件地被应用，以免覆盖项目上的现有属性你。

如果默认选项被指定为一个函数， 那么将使用当前容器作为作用域来调用这个函数( this 引用)，并且传递被添加的项目作为第一个参数。 调用产生的所有结果都将被作为默认参数应用到项目上。

例如，如需自动在 Ext.Panel 所包含的每个项目上应用padding属性，你可以传递: defaults: {bodyStyle: 'padding:15px'} 。

用法:

defaults: {               // defaults are applied to items, not the container
    autoScroll:true
},
items: [
    {
        xtype: 'panel',   // defaults do not have precedence over
        id: 'panel1',     // options in config objects, so the defaults
        autoScroll: false // will not be applied here, panel1 will be autoScroll:false
    },
    new Ext.Panel({       // defaults do
                                     have precedence over options
        id: 'panel2',     // options in components, so the defaults
        autoScroll: false // will be applied here, panel2 will be autoScroll:true.
    })
]
Container
disabled : Boolean
当前组件处于无效状态时为true。 Read-only.
Component
disabledClass : String
当组件处于无效状态时添加到组件上的CSS类(默认为 'x-item-disabled')。
Component
fieldLabel : String
紧靠此field显示的标签文本(默认值为 '')。注意...

紧靠此field显示的标签文本(默认值为 '')。

注意:只有在当前组件被渲染到一个使用FormLayout 的容器中时，此配置才有效。 (例如 Ext.form.FormPanel 或 指定 layout:'form')。

另请参见 hideLabel 、 Ext.layout.FormLayout和 fieldTpl。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Name'
    }]
});
Component
flex : Number
注: 这个配置只用于该组件被包含在一个已使用BoxLayout配置的Container中时...

注: 这个配置只用于该组件被包含在一个已使用BoxLayout配置的Container中时。通过计算每一个子组件的flex值所占全部flex值之和的比例，来决定子组件的宽(HBoxLayout)高(VBoxlayout)。 任何子项的 flex = 0 或 flex = undefined 将不被设置(初始值大小将不被改变)。

BoxComponent
forceLayout : Boolean
如果此值为true，容器将将强制初始化一次布局操作...
如果此值为true，容器将将强制初始化一次布局操作， 即使容器处于隐藏或者折叠状态。 此配置项对于在一个折叠或者隐藏的容器中强制渲染非常有用 (默认为false)。
Container
hidden : Boolean
如果当前组件处于隐藏状态，此值为true。Read-only。
Component
hideBorders : Boolean
设置为true可以隐藏所包含的每个组件的边框， false为遵照组件现有的边框设置...
设置为true可以隐藏所包含的每个组件的边框， false为遵照组件现有的边框设置(默认为 false)。
Container
hideLabel : Boolean
true时完全隐藏label元素 ( label 和 separator)。 默认为 false。 默认情况下，即使你不指定...

true时完全隐藏label元素 ( label 和 separator)。 默认为 false。 默认情况下，即使你不指定 fieldLabel 它的空间仍然会被保留，这样这块区域会与其它确实拥有label的区域位于同一排。 讲此值设置为 true 将导致此区域不再保留此空间。

注意: 参见 clearCls 的注释。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield'
        hideLabel: true
    }]
});
Component
hideMode : String
组件如何隐藏，支持的值有： 'visibility' (css visibility), 'offsets' (位置偏移量为负值) 和...

组件如何隐藏，支持的值有： 'visibility' (css visibility), 'offsets' (位置偏移量为负值) 和 'display' (css display).

注意:一般首选默认值 'display'，因为当组件第一次显示的时候它们会自动进行布局 (隐藏的时候不会调整尺寸)。

Component
html : String/Object
一个HTML片段，或者一个 DomHelper 描述，用作layout元素的内容(默认为'')。...
一个HTML片段，或者一个 DomHelper 描述，用作layout元素的内容(默认为'')。 这个HTML内容在组件渲染之后才被添加，所以在 render 出发的时候，document中尚未包含此HTML。 但是这个内容将会在所有配置的 contentEl 之前被插入到body标签中。
Component
id : String
当前组件唯一的id(默认为auto-assigned id)...

当前组件唯一的id(默认为auto-assigned id)。 如果你需要在以后访问组件，而又没有一个有效的组件对象引用，那么你需要指定一个 id( 也就是，使用Ext. getCmp方法 )。

注意，此id也将被用作组件底层HTML标签的id，这些标签被渲染到页面中。 这将允许你编写基于id的CSS规则，以独立地描述指定的实例；并且，也可以通过 组件父标签的id选中子元素。

注意:为了避免与唯一的id 产生重复， 请参见 itemId 和 ref 。

注意: 如需访问一个元素的容器，参见 ownerCt 。

Component
itemCls : String
注意: 只有在当前组件被渲染到一个使用FormLayout 布局的 容器中时此配置才有效...

注意: 只有在当前组件被渲染到一个使用FormLayout 布局的 容器中时此配置才有效。 (例如Ext.form.FormPanel 或者指定 layout:'form')。

一个附加的CSS类，应用到div上，包装当前field的表单元素。 如果提供了此参数， field级上的itemCls将会覆盖 container级上提供的 默认itemCls。 为itemCls指定的值将会被添加默认的 类('x-form-item')。

既然它被应用到项目的包装器上(参见 Ext.layout.FormLayout。 fieldTpl)， 它将允许你编写能应用到此field、label(如果有指定)、或者field内部任何其它元素的标准CSS规则。

注意: 参考 fieldLabel的注释。 .

示例用法:

// Apply a style to the field's label:
<style>
    .required .x-form-item-label {font-weight:bold;color:red;}
</style>

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Name',
        itemCls: 'required' //this label will be styled
    },{
        xtype: 'textfield',
        fieldLabel: 'Favorite Color'
    }]
});
Component
itemId : String
当没有可利用的对象引用时，itemId可以作为第二选择，用来获得一个组件的引用， 代替 ...

当没有可利用的对象引用时，itemId可以作为第二选择，用来获得一个组件的引用， 代替 id 与 Ext. getCmp的组合， 使用 itemId 与 Ext.Container. getComponent 方法配合将会获得 itemId 's（的所有者） 或者 id 's（的所有者）。 既然 itemId 's（的所有者）是一个到容器内部MixedCollection的索引， itemId 的作用域就被限定在容器之内---避免与 Ext.ComponentMgr 产生潜在的冲突，它（指Ext.ComponentMgr）需要一个 唯一的 id 。

var c = new Ext.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'); // 与 Ext.getCmp()不同

p2 = p1.ownerCt.getComponent('p2'); // 通过兄弟对象获得引用

另请参见 id 和 ref 。

注意:需要访问一个item的容器请参见 ownerCt 。

Component
items : MixedCollection
当前容器中的子组件集合 Ext.util.MixedCollection
Container
labelSeparator : String
每个fieldLabel 文本后面现实的分隔符。 此属性可以在多个层次上进行配置...

每个fieldLabel 文本后面现实的分隔符。 此属性可以在多个层次上进行配置。优先顺序为：

  • field / component level
  • container level
  • layout level (默认为冒号 ':')
如不需要为当前field的label显示分隔符，指定一个空字符串''即可。

注意:参见 clearCls 的注释。

另请参见 hideLabel 和 Ext.layout.FormLayout。 fieldTpl。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    layoutConfig: {
        labelSeparator: '~'   // layout config has lowest priority (defaults to ':')
    },
    labelSeparator: '>>',     // config at container level
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Field 1',
        labelSeparator: '...' // field/component level config supersedes others
    },{
        xtype: 'textfield',
        fieldLabel: 'Field 2' // labelSeparator will be '='

    }]
});
Component
labelStyle : String
一个CSS样式描述字符串，它将直接应用到当前field的label上...

一个CSS样式描述字符串，它将直接应用到当前field的label上。 如果有设置，默认为容器的labelStyle值(例如 Ext.layout.FormLayout.labelStyle , 或者 '')。

注意:参见 clearCls 的注释。

另请参见 hideLabel 和 Ext.layout.FormLayout. fieldTpl。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Name',
        labelStyle: 'font-weight:bold;'
    }]
});
Component
layout : String/Object
*重要: 为了让子项目能被正确地调整尺寸和位置， 典型地，必须通过 layout 配置项指定一个布局管理器。...

*重要: 为了让子项目能被正确地调整尺寸和位置， 典型地，必须通过 layout 配置项指定一个布局管理器。

调整子items的尺寸和位置 是容器的布局管理器的职责，它负责创建和管理你想要的那种布局类型。 例如:

new Ext.Window({
    width:300, height: 300,
    layout: 'fit', // explicitly set layout manager: override the default (layout:'auto')
    items: [{
        title: 'Panel inside a Window'
    }]
}).show();

如果没有为一个通用的容器(例如Container或者Panel)特别指定 layout ，将会使用default layout manager ，它除了将子组件按顺序渲染到容器中之外什么事情都不做( 这种情况下不会发生调整尺寸和位置的操作)。 一些容器类内部指定了一个默认的布局 (例如FormPanel指定了 layout: 'form' )。 另一些有特殊用途的类内部指定/管理它们内置的布局( 例如GridPanel, TabPanel, TreePanel, Toolbar, Menu等等)。

layout 既可以通过一个对象或者一个字符串指定:

  • 用一个对象指定
    • 示例用法:
      • layout: {
    type: 'vbox',
    padding: '5',
    align: 'left'
}
    • type

      • 当前容器需要使用的布局类型。 如果不指定，将创建并使用一个默认的 Ext.layout.ContainerLayout 。

      可用的布局 type 值是:

      • absolute
      • accordion
      • anchor
      • auto Default
      • border
      • card
      • column
      • fit
      • form
      • hbox
      • menu
      • table
      • toolbar
      • vbox
    • 布局描述配置参数

      • 也可以指定附加的布局描述配置。 关于每个布局类型可用配置选项完整的细节，参见 type 参数指定的相关布局类。

  • 通过一个字符串指定
    • 示例用法:
      • layout: 'vbox',
layoutConfig: {
    padding: '5',
    align: 'left'
}
    • layout

      • 当前容器使用的布局 type ( 可用的布局类型值参见上述列表)。

    • layoutConfig

      • 附件的布局描述配置参数。 关于每个布局类型可用配置选项完整的细节，参见 layout 参数指定的相关布局类。

Container
layoutConfig : Object
这是一个配置对象，包含为 layout 指定的参数， 如果 layout 是作为一个 string 来指定的。

Container
listeners : Object
一个包含一个或多个事件处理器的配置对象，会在初始化的时候被添加到目标对象上...

一个包含一个或多个事件处理器的配置对象，会在初始化的时候被添加到目标对象上。 该配置对象应该是一个有效的监听器配置对象就像 addListener例子中指定的一样可一次附加多个处理器。

ExtJs Components上的DOM事件

一些 ExtJs Component 类导出时会选择一些DOM事件(例如 "click", "mouseover" 等等), 这通常只是在有额外的值可以被添加时发生。例如DataView类的 click事件会传递被点击的节点。也可以直接在Component的HTMLElementevent上访问DOM事件，但必需在Component被渲染后监听器才能添加到Element 上。可以按照以下步骤添加插件:

// 插件会用一个监听器配置对象进行配置。
//该组件会被添加到所有处理方法的参数列表上。
Ext.DomObserver = Ext.extend(Object, {
    constructor: function(config) {
        this.listeners = config.listeners ? config.listeners : config;
    },

    // 组件将自己传递进了插件的初始化方法里
    init: function(c) {
        var p, l = this.listeners;
        for (p in l) {
            if (Ext.isFunction(l[p])) {
                l[p] = this.createHandler(l[p], c);
            } else {
                l[p].fn = this.createHandler(l[p].fn, c);
            }
        }

        // 渲染后立即添加监听器到元素上
        c.render = c.render.createSequence(function() {
            var e = c.getEl();
            if (e) {
                e.on(l);
            }
        });
    },

    createHandler: function(fn, c) {
        return function(e) {
            fn.call(this, e, c);
        };
    }
});

var combo = new Ext.form.ComboBox({

    // 元素被点击后折叠
    plugins: [ new Ext.DomObserver({
        click: function(evt, comp) {
            comp.collapse();
        }
    })],
    store: myStore,
    typeAhead: true,
    mode: 'local',
    triggerAction: 'all'
});

Observable
margins : Object
注:此配置只用于该组件展现在一个使用BorderLayout...

注:此配置只用于该组件展现在一个使用BorderLayout 或 BoxLayout的两个子类之一作为布局的容器。

这个margins对象在该组件中的格式为：

{top: (top margin),right: (right margin),bottom: (bottom margin),left: (left margin)}

也可以是一个字符串，中间用空格分隔，margin值为数字。 把matches中每一个值的次序跟CSS中margin值的排列方式相对应：

  • 如果只有一个值，它适用于所有方面。
  • 如果有两个值，top和bottom的边框设置为第一个值，left和right设置为第二个值。
  • 如果有三个值，top设置为第一个值，left和right设置为第二个值，bottom设置为第三个值。
  • 如果有四个值，分别设置为top, right, bottom, left。

默认值:

{top:0, right:0, bottom:0, left:0}
BoxComponent
overCls : String
一个可选的额外的CSS类，它将在鼠标移过元素时被添加到组件上...
一个可选的额外的CSS类，它将在鼠标移过元素时被添加到组件上，鼠标移出时 删除。(默认为'')。此属性对于在组件上，或者它的任何使用标准CSS规则的孩子节点上， 添加定制的'active' 或者 'hover'样式非常有用。
Component
pageX : Number
如果该组件被包含在一个指定位置的容器中，这个值表示页面级的x坐标值（译者注：在有滚动条的情况下这个值很有用）。
BoxComponent
pageY : Number
如果该组件被包含在一个指定位置的容器中，这个值表示页面级的y坐标值（译者注：在有滚动条的情况下这个值很有用）。
BoxComponent
plugins : Object/Array
一个对象或者一个对象数组，为组件提供特殊的功能 ...
一个对象或者一个对象数组，为组件提供特殊的功能。 对一个合法的插件唯一的要求是它含有一个init()方法， 能接收一个Ext.Component型的参数。 当组件被创建时，如果有可用的插件，组件将会调用每个插件的init方法， 并将自身的引用作为方法参数传递给它。然后，每个插件就可以调用方法或者响应组件上的事件， 就像需要的那样提供自己的功能。
Component
ptype : String
需要创建配置的ptype。 当传递一个配置对象给构造函数时...
需要创建配置的ptype。 当传递一个配置对象给构造函数时，此配置选项不会被使用。 只有在使用懒初始化的时候此配置项才会被使用， 此时Plugin不是 通过一个完整的实例组件，而是通过一个Component配置指定的。 在渲染时，将会查找ptype以决定创建何种类型的Plugin。

如果你创建自己的Plugin，你可以通过 Ext.ComponentMgr.registerPlugin 对它们进行注册，以便能利用懒初始化和渲染机制。
Component
ref : String
一个路径描述，与组件的 ownerCt 相关，它描述了把当前组件的命名引用放置到哪个父容器中去。...

一个路径描述，与组件的 ownerCt 相关，它描述了把当前组件的命名引用放置到哪个父容器中去。

祖先的坐标路径可以通过'/'字符进行分隔。 例如，将一个Toolbar Button的引用放入 拥有此Toolbar的Panel中:

var myGrid = new Ext.grid.EditorGridPanel({
    title: 'My EditorGridPanel',
    store: myStore,
    colModel: myColModel,
    tbar: [{
        text: 'Save',
        handler: saveChanges,
        disabled: true,
        ref: '../saveButton'
    }],
    listeners: {
        afteredit: function() {
//          The button reference is in the GridPanel
            myGrid.saveButton.enable();
        }
    }
});

在上面的代码中，如果 ref 是 'saveButton' ，那么引用将会被放置到Toolbar中。 ref 中的每个'/' 都会从组件的 ownerCt 向上移动一级。

另请参见 added 和 removed 事件。

Component
region : String
注: 此配置只用于该组件展现在一个布局为BorderLayout的容器中...

注: 此配置只用于该组件展现在一个布局为BorderLayout的容器中(例如指定layout:'border')。

详见Ext.layout.BorderLayout。

BoxComponent
resizeEvent : String
在布局中进行尺寸调整需要监听的事件。 默认为 'resize' 。
Container
stateEvents : Array
一个事件数组，当它们被触发时，组件需要保存自己的状态(默认值为 none)...

一个事件数组，当它们被触发时，组件需要保存自己的状态(默认值为 none)。 它们可以是任何该组件支持的事件类型，包括浏览器事件和 自定义事件(例如['click', 'customerchange'])。

对于保存和恢复组件状态的详细解释，参见 stateful

Component
stateId : String
为该组件指定的唯一的id值，它被用作管理组件状态的目的...
为该组件指定的唯一的id值，它被用作管理组件状态的目的。 (如果设定了id，默认值为组件自己的id，否则，如果组件使用自动生成的id，此值为null)。

对于保存和反解析组件状态的解释，参见 stateful 。

Component
stateful : Boolean
一个标志参数，它将引起组件在启动时尝试从一个保存的状态中恢复内部状态参数...

一个标志参数，它将引起组件在启动时尝试从一个保存的状态中恢复内部状态参数。 组件必须要么拥有一个 stateId 或者 id ，它们被分配给需要被管理的状态属性。 在跨页面加载时，不保证自动生成的id属性的稳定性， 并且，不能依赖此id来保存和恢复一个组件的相同状态。

为了保存状态的操作能够工作，状态管理器的提供者必须 被设置成一个Ext.state.Provider 的实现类，它覆盖了set 和get 方法，以便保存和恢复name/value对。 有一个内置的Ext.state.CookieProvider 可用。

为当前页面设置状态提供者:

Ext.state.Manager.setProvider(new Ext.state.CookieProvider({
    expires: new Date(new Date().getTime()+(1000*60*60*24*7)), //7 days from now
}));

当 stateEvents 配置项中其中之一的事件被触发时， 一个状态可保存的组件将试图保存其状态。

保存状态时，一个可保存状态的组件首先需要通过调用 getState 方法来序列化它的状态。 默认情况下，此函数什么事都不做。 开发者必须提供一个实现，返回一个hash对象，它描述了组件可恢复的状态。

getState方法产生的值将会传递给 Ext.state.Manager.set 方法，它使用配置的 Ext.state.Provider 来保存对象，以组件的 stateId 为key，或者，如果此值（指stateId）没有指定时， 使用它的 id 作为key。

在进行构造时，一个可保存状态的组件试图通过调用 Ext.state.Manager.get方法来 恢复它的状态，传递 stateId 或者，如果此值（指stateId）没有指定时， 使用它的 id 作为参数。

结果对象被传递给 applyState 。 applyState 的默认实现只是简单地把属性拷贝到对象中， 但是开发者可以覆盖此方法以支持更多行为。

通过向 beforestaterestore, staterestore, beforestatesave 和 statesave 事件上绑定监听器，你可以在保存和恢复状态时进行额外的处理。

Component
style : String
被添加到组件元素的特定样式。 必须是按照...
被添加到组件元素的特定样式。 必须是按照 Ext.Element.applyStyles 类指定格式的合法参数值。

new Ext.Panel({
    title: 'Some Title',
    renderTo: Ext.getBody(),
    width: 400, height: 300,
    layout: 'form',
    items: [{
        xtype: 'textarea',
        style: {
            width: '95%',
            marginBottom: '10px'
        }
    },
        new Ext.Button({
            text: 'Send',
            minWidth: '100',
            style: {
                marginBottom: '10px'
            }
        })
    ]
});
Component
tabTip : String
注: 这个配置只用于当该组件作为TabPanel的一个子项目时使用...

注: 这个配置只用于当该组件作为TabPanel的一个子项目时使用。

一个String类型的innerHTML(支持html标签)，当鼠标放在该选项上的时，显示一个tooltip。为了tips能够被渲染，Ext.QuickTips.init()必须被提前调用。
BoxComponent
tpl : Mixed
一个 Ext.Template , Ext.XTemplate 或者一个用来形成一个Ext.XTemplate的字符串数组...
一个 Ext.Template , Ext.XTemplate 或者一个用来形成一个Ext.XTemplate的字符串数组。 与 data 和 tplWriteMode 配置项协同使用。
Component
tplWriteMode : String
刷新组件的内容区域时使用的Ext.(X)Template方式。 默认为'overwrite' (参见 Ext.XTemplate.overwrite )。
刷新组件的内容区域时使用的Ext.(X)Template方式。 默认为'overwrite' (参见 Ext.XTemplate.overwrite )。
Component
x : Number
如果被包含在一个指定位置的容器中，这个值表示x(left)坐标值。
BoxComponent
xtype : String
需要创建配置的xtype。 当传递一个配置对象给构造函数时...
需要创建配置的xtype。 当传递一个配置对象给构造函数时，此配置选项不会被使用。 只有在使用懒初始化的时候此配置项才会被使用，此时容器的子项目不是 通过一个完整的实例组件，而是通过一个Component配置指定的。 在渲染时，将会查找xtype以决定创建何种类型的子组件。

预定义的xtype列表如下： here。

如果你继承Component创建你自己的组件，你需要使用Ext.ComponentMgr.registerType 对它们进行注册，以便利用懒初始化和渲染机制。
Component
y : Number
如果被包含在一个指定位置的容器中，这个值表示y(top)坐标值。
BoxComponent

公共属性

Property Defined By
disabled : Boolean
当前组件处于无效状态时为true。 Read-only.
Component
el : Ext.Element
封装了当前组件的Ext.Element。 Read-only。通常情况下，这将是一个<DIV>元素，它由此类的...

封装了当前组件的Ext.Element。 Read-only。

通常情况下，这将是一个<DIV>元素，它由此类的 onRender方法创建，但是它可以通过使用 autoEl 配置项进行覆盖。

注意: 直到组件渲染完成此元素都将处于无效状态。

如需向当前组件的 DOM事件(而不是当前组件自己的Observable事件)添加监听器， 更多建议，参见 listeners 配置项，或者直接使用一个render监听器:

new Ext.Panel({
    title: 'The Clickable Panel',
    listeners: {
        render: function(p) {
            // Append the Panel to the click handler's argument list.
            p.getEl().on('click', handlePanelClick.createDelegate(null, [p], true));
        },
        single: true  // Remove the listener after first invocation
    }
});

另请参见 getEl

Component
hidden : Boolean
如果当前组件处于隐藏状态，此值为true。Read-only。
Component
initialConfig : Object
当前组件的初始化配置描述。 Read-only。
Component
items : MixedCollection
当前容器中的子组件集合 Ext.util.MixedCollection
Container
ownerCt : Ext.Container
组件所属的Container (默认为undefined，当前组件被添加到一个容器中时此值被自动设置)...
组件所属的Container (默认为undefined，当前组件被添加到一个容器中时此值被自动设置)。 Read-only。

注意: 如需访问容器中的子组件，参见 itemId 。

Component
private : Object
我们只能在一块可见的区域进行布局。 布局目标*或者它的任何父元素* 为...
我们只能在一块可见的区域进行布局。 布局目标*或者它的任何父元素* 为display:none， 将意味着它没有一块可见的区域。
Container
refOwner : Ext.Container
如果当前组件是一个容器的孩子，并且是通过一个 ref 配置项被注册的，则此值为 ref 引用被插入到的祖先容器。
如果当前组件是一个容器的孩子，并且是通过一个 ref 配置项被注册的，则此值为 ref 引用被插入到的祖先容器。
Component
rendered : Boolean
如果当前组件已经被渲染了，此值为true。Read-only.
Component

公共方法

Method Defined By
Viewport ( Object config )
创建一个新的Viewport
创建一个新的Viewport
参数:
  • config : Object
    The config object
返回值:
  • void
Viewport
add ( ...Object/Array component ) : Ext.Component/Array
向当前容器中添加 Component(s)。 描述 :在添加之前触发 beforeadd 事件...

向当前容器中添加 Component(s)。

描述 :

  • 在添加之前触发 beforeadd 事件
  • 将会相应地应用 容器的default config values (细节参见 defaults )。
  • 在组件添加之后触发 add 事件。

注意 :

  • 当调用 add 时如果容器已经被渲染， 你可能需要调用 doLayout 方法来刷新视图，它将导致所有尚未渲染的子组件进行渲染操作。 此操作是必须的，这样你可以 add 多个子组件而只刷新一次layout。 示例用法:

var tb = new Ext.Toolbar();
tb.render(document.body);  // toolbar is rendered
tb.add({text:'Button 1'}); // add multiple items (defaultType for Toolbar is 'button')
tb.add({text:'Button 2'});
tb.doLayout();             // refresh the layout
  • 警告: 使用BorderLayout布局的容器可能不能删除或者添加组件。 更多细节参见BorderLayout 的注释。
参数:
  • component : ...Object/Array

    需要添加的一个或多个组件，或者是一个组件数组。 更多信息参见 items 。

返回值:
  • Ext.Component/Array
    被添加的组件。
Container
addClass ( string cls ) : Ext.Component
为组件底层的元素添加CSS样式。
为组件底层的元素添加CSS样式。
参数:
  • cls : string
    需要添加的CSS样式的class名称
返回值:
  • Ext.Component
    this
Component
addEvents( Object|String o, string Optional. ) : void
添加指定的事件到事件列表上，事件会被该Observable触发。
添加指定的事件到事件列表上，事件会被该Observable触发。
参数:
  • o : Object|String
    以事件名作为属性true作为值的对象 或者当多个事件名被分开的传递时则为第一个事件名。
  • Optional. : string
    事件名被分开的传递时则为事件名。 用法:
    this.addEvents('storeloaded', 'storecleared');
返回值:
  • void
Observable
addListener( String eventName, Function handler, [Object scope], [Object options] ) : void
给对象添加事件处理器。
给对象添加事件处理器。
参数:
  • eventName : String
    监听的事件名。
  • handler : Function
    事件调用的方法
  • scope : Object
    （可选）处理方法执行的作用域 (this的引用 reference)。 如果被忽略。默认为触发事件的对象。
  • options : Object
    （可选）包含处理器配置和属性的对象。 可能包含以下的属性:
    • scope : Object
      处理方法执行的作用域(this的引用) 。 如果被忽略。默认为触发事件的对象。
    • delay : Number
      在触发事件后延迟调用处理器的毫秒数。
    • single : Boolean
      如果为True则添加一个处理器来处理下一次的事件触发（仅一次），然后移除自己。
    • buffer : Number
      使得处理器延迟指定毫秒数后预定的运行在 一个Ext.util.DelayedTask中 。 如果事件在时间内再一次被触发，原始的处理器不会被调用，但是新的处理器会预定的在他的位置上。
    • target : Observable
      如果事件在目标的Observable上触发则仅仅调用处理器， 否则 事件会从子类的Observable上冒泡

    组合选项
    使用这些选项参数,可能会组合出不同类型的监听器：

    一个延迟的，一次性的监听器。

    myDataView.on('click', this.onClick, this, {
single: true,
delay: 100
});

    一次调用附加多个处理器
    该方法同样支持传递一个包含指定的多个处理器的属性的配置对象参数。

    myGridPanel.on({
'click' : {
    fn: this.onClick,
    scope: this,
    delay: 100
},
'mouseover' : {
    fn: this.onMouseOver,
    scope: this
},
'mouseout' : {
    fn: this.onMouseOut,
    scope: this
}
});

    或者一个简写的语法：

    myGridPanel.on({
'click' : this.onClick,
'mouseover' : this.onMouseOver,
'mouseout' : this.onMouseOut,
 scope: this
});
返回值:
  • void
Observable
applyToMarkup ( String/HTMLElement el ) : void
将此组件添加到已存在的有效的HTML标签中。 使用该方法时，无需再调用render()方法。
将此组件添加到已存在的有效的HTML标签中。 使用该方法时，无需再调用render()方法。
参数:
  • el : String/HTMLElement
返回值:
  • void
Component
bubble ( Function fn , [ Object scope ], [ Array args ] ) : Ext.Container
沿着component/container继承结构进行冒泡， 在每个组件上调用指定的函数。 所调用函数的作用域...
沿着component/container继承结构进行冒泡， 在每个组件上调用指定的函数。 所调用函数的作用域( this)将会是 指定的作用域或者是当前组件。 如果在函数任何一点上返回false，即停止冒泡过程
参数:
  • fn : Function
    需要调用的函数
  • scope : Object
    (可选) 函数的作用域(默认为当前节点)
  • args : Array
    (可选) 调用函数时需要传递的参数( 默认传递当前组件)
返回值:
  • Ext.Container
    this
Container
cascade ( Function fn , [ Object scope ], [ Array args ] ) : Ext.Container
从当前组件(第一个被调用的组件)开始，沿着component/container的继承树向下回溯...
从当前组件(第一个被调用的组件)开始，沿着component/container的继承树向下回溯， 在每个组件上调用指定的方法， 调用方法时的(this)作用域为指定的scope或者为当前组件。 传递给方法的参数为传递进来args或者当前组件。 在起泡的任意一个节点上，如果function返回false，即停止在那个分支上。
参数:
  • fn : Function
    需要调用的函数
  • scope : Object
    (可选)函数的作用域(默认为当前组件)
  • args : Array
    (可选) 调用函数时传递的参数 (默认传递当前组件)
返回值:
  • Ext.Container
    this
Container
cloneConfig ( Object overrides ) : Ext.Component
默认使用原先传递给当前实例的配置值克隆当前组件。
默认使用原先传递给当前实例的配置值克隆当前组件。
参数:
  • overrides : Object
    一个新的配置项，包含需要覆盖到克隆版本的所有属性。 可以传递一个id参数给此对象，否则将自动生成一个新的id以避免发生重复。
返回值:
  • Ext.Component
    当前组件的克隆副本
Component
destroy () : void
通过如下方法销毁对象：删除所有的事件监听器、将组件的元素从DOM树中删除...
通过如下方法销毁对象：删除所有的事件监听器、将组件的元素从DOM树中删除（如果可以）、 将组件从它的 Ext.Container（如果可用）中删除、 并且将它从Ext.ComponentMgr中 注销。 销毁操作一般由框架自动完成，一般情况下不需要直接调用该方法。
参数:
  • 无。
返回值:
  • void
Component
disable () : Ext.Component
将组件置为无效状态，并出发'disable'事件。
将组件置为无效状态，并出发'disable'事件。
参数:
  • 无。
返回值:
  • Ext.Component
    this
Component
doLayout ( [ Boolean shallow ], [ Boolean force ] ) : Ext.Container
强制容器的布局进行重新计算。 在向一个已经渲染的容器中添加...
强制容器的布局进行重新计算。 在向一个已经渲染的容器中添加一个新的组件， 或者改变子组件的尺寸/位置参数之后，必须调用此函数。
参数:
  • shallow : Boolean
    (可选) 设置为true时将仅仅计算当前组件的布局， 并且让子组件在需要时自动计算布局 (默认为flase，它将递归地调用每个子容器的doLayout方法)
  • force : Boolean
    (可选) 设置为true将强制进行布局，即使项目是隐藏的也进行。
返回值:
  • Ext.Container
    this
Container
enable () : Ext.Component
将组件置为有效状态并触发'enable'事件。
将组件置为有效状态并触发'enable'事件。
参数:
  • 无。
返回值:
  • Ext.Component
    this
Component
enableBubble( String/Array events ) :void
是否现在使得事件会被该Observable触发并调用 this.getBubbleTarget()方法在拥有者的继承树...

是否现在使得事件会被该Observable触发并调用 this.getBubbleTarget()方法在拥有者的继承树中冒泡。Observable的基础类中没有该方法的实现。

该方法一般被Ext.Components用来冒泡事件到拥有者的容器。参看Ext.Component.getBubbleTarget默认的实现 在Ext.Component中返回组件的直接拥有者。但是如果需要的是一个已知的目标，该方法可以被重写来更快的访问需求的目标。

例子:

Ext.override(Ext.form.Field, {
    // 添加方法到Field的initComponent上改变事件为冒泡
    initComponent : Ext.form.Field.prototype.initComponent.createSequence(function() {
        this.enableBubble('change');
    }),

    // 我们知道我们想让Field的事件冒泡到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() {
            // 如果样式被修改标题会变红。
            myForm.header.setStyle('color', 'red');
        }
    }
});
参数:
  • events : String/Array
    冒泡的事件名，或事件名数组
返回值:
  • void
Observable
find ( String prop , String value ) : Array
根据属性查找当前容器中任何层次上的组件
根据属性查找当前容器中任何层次上的组件
参数:
  • prop : String
  • value : String
返回值:
  • Array
    Ext.Component数组
Container
findBy ( Function fn , [ Object scope ] ) : Array
根据一个自定义的函数，查找当前容器中任意层级上的一个组件。 如果传递的函数返回true...
根据一个自定义的函数，查找当前容器中任意层级上的一个组件。 如果传递的函数返回true，组件将会被包含在结果中。 函数将会被用如下参数(component, this container)进行调用。
参数:
  • fn : Function
    需要调用的函数
  • scope : Object
    可选
返回值:
  • Array
    Ext.Component数组
Container
findById ( String id ) : Ext.Component
通过id查找容器中位于任何层级上的组件
通过id查找容器中位于任何层级上的组件
参数:
  • id : String
返回值:
  • Ext.Component
Container
findByType ( String/Class xtype , [ Boolean shallow ] ) : Array
根据xtype或者类型，查找当前容器中任何层级上的组件
根据xtype或者类型，查找当前容器中任何层级上的组件
参数:
  • xtype : String/Class
    组件的xtype字符串，或者直接是组件的class类型
  • shallow : Boolean
    (可选) 此参数为flase时将检查当前组件是否是指定xtype的后裔 (这是默认情况)，或者设置为true， 将检查当前组件是否直接是指定xtype类型（译者注：即指不按照多态性进行检查）。
返回值:
  • Array
    Ext.Component数组
Container
findParentBy ( Function fn ) : Ext.Container
通过自定义的函数查找当前组件上层任何层次上的容器...
通过自定义的函数查找当前组件上层任何层次上的容器。 如果传递的函数返回true，容器对象将被返回。
参数:
  • fn : Function
    自定义的函数，使用如下参数调用(container,this component)。
返回值:
  • Ext.Container
    自定义函数返回true的第一个容器
Component
findParentByType ( String/Class xtype ) : Ext.Container
通过xtype或者class查找当前组件上层任何层次上的容器
通过xtype或者class查找当前组件上层任何层次上的容器
参数:
  • xtype : String/Class
    组件的xtype字符串，或者直接是组件的class
返回值:
  • Ext.Container
    符合指定xtype或者class的第一个容器
Component
fireEvent( String eventName, Object... args ) : Boolean
用传入的参数触发指定的事件 (减去事件名)。 一个事件可以被设置为冒泡 Obse...

用传入的参数触发指定的事件 (减去事件名)。

一个事件可以被设置为冒泡到Observable父类继承树(参看 Ext.Component.getBubbleTarget) 调用enableBubble实现。

参数:
  • eventName : String
    触发的事件名。
  • args : Object...
    传递给处理器的可变长度参数。
返回值:
  • Boolean
    如果有任何的处理器返回false则返回false，否则返回true。
Observable
focus ( [ Boolean selectText ], [ Boolean/Number delay ] ) : Ext.Component
尝试将当前组件设为焦点。
尝试将当前组件设为焦点。
参数:
  • selectText : Boolean
    (可选) 如果可用，同时选中组件内部的文本
  • delay : Boolean/Number
    (可选)将当前组件设置为焦点的延迟时间(设置为true等于0毫秒)
返回值:
  • Ext.Component
    this
Component
get ( String/Number key ) : Ext.Component
获取当前容器包含的一个组件( items.get(key)方法的别名)
获取当前容器包含的一个组件( items.get(key)方法的别名)
参数:
  • key : String/Number
    组件的索引
返回值:
  • Ext.Component
    Ext.Component
Container
getBox ( [ Boolean local ] ) : Object
获取组件底层元素当前盒子模型的尺寸。（译者注：盒子模型是CSS术语，详细解释请自行搜索。）
获取组件底层元素当前盒子模型的尺寸。（译者注：盒子模型是CSS术语，详细解释请自行搜索。）
参数:
  • local : Boolean
    (可选)值为true时，组件的left值和top值将代替页面的XY被返回。(默认值为false)
返回值:
  • Object
    返回值的格式{x, y, width, height}
BoxComponent
getBubbleTarget () : Ext.Container
为Observable的fireEvent方法提供链接，它沿着继承结构进行冒泡操作。
为Observable的fireEvent方法提供链接，它沿着继承结构进行冒泡操作。
参数:
  • 无。
返回值:
  • Ext.Container
    拥有当前组件的容器。
Component
getComponent ( String/Number comp ) : Ext.Component
检查当前容器的 items property 并且获取当前容器的一个直接的子组件。
检查当前容器的 items property 并且获取当前容器的一个直接的子组件。
参数:
  • comp : String/Number
    参数可以是以下任何值：
    • 一个 String : 代表子组件的 itemId 或者 id
    • 一个 Number : 代表子组件在 items property 中的位置

    其它信息参见 Ext.util.MixedCollection.get。

返回值:
  • Ext.Component
    组件(如果有找到)。
Container
getEl () : Ext.Element
返回 Ext.Element ，它包装了当前组件。...

返回 Ext.Element ，它包装了当前组件。

通常情况下，这将是一个<DIV>元素，它是由该类的onRender方法创建的， 但是可以使用autoEl配置项 覆盖它。

注意: 此元素将会一直处于无效状态直到当前组件渲染完成。

如需向当前组件的 DOM事件(而不是当前组件自己的Observable事件)添加监听器， 更多建议，参见 listeners 配置项，或者直接使用一个render监听器:

new Ext.Panel({
    title: 'The Clickable Panel',
    listeners: {
        render: function(p) {
            // Append the Panel to the click handler's argument list.
            p.getEl().on('click', handlePanelClick.createDelegate(null, [p], true));
        },
        single: true  // Remove the listener after first invocation
    }
});
参数:
  • 无。
返回值:
  • Ext.Element
    包装当前组件的元素。
Component
getHeight () : Number
获取该组件的当前高度值。
获取该组件的当前高度值。
参数:
  • 无。
返回值:
  • Number
BoxComponent
getId () : String
返回当前组件的id，如果没有定义id，则自动生成并返回一个id:'ext-comp-'...
返回当前组件的 id 如果没有定义 id 则自动生成并返回一个 id

'ext-comp-' + (++Ext.Component.AUTO_ID)
参数:
  • 无。
返回值:
  • String
    id
Component
getItemId () : String
返回当前组件的 itemId 。 如果没有通过配置参数指定 itemId 那么，将会使用...
返回当前组件的 itemId 。 如果没有通过配置参数指定 itemId 那么，将会使用 getId 返回 id 。
参数:
  • 无。
返回值:
  • String
Component
getLayout () : ContainerLayout
返回容器当前使用的布局管理器。 如果容器当前没有设置布局管理器， 将会创建一个默认的...
返回容器当前使用的布局管理器。 如果容器当前没有设置布局管理器， 将会创建一个默认的 Ext.layout.ContainerLayout 并被设置为容器的布局管理器。
参数:
  • 无。
返回值:
  • ContainerLayout
    容器的布局管理器
Container
getLayoutTarget () : Ext.Element
返回当前容器中用来包含子组件的元素。提供了一个 可以返回容器的...

返回当前容器中用来包含子组件的元素。

提供了一个 可以返回容器的Element 的实现， 但是，如果容器有更复杂的结构， 可以覆盖此实现以返回 layout 在其中渲染子组件的元素。

参数:
  • 无。
返回值:
  • Ext.Element
    在其中渲染子组件的元素。
Container
getOuterSize () : Object
获取当前组件所在元素的尺寸大小，包括边缘的空白处。
获取当前组件所在元素的尺寸大小，包括边缘的空白处。
参数:
  • 无。
返回值:
  • Object
    一个包含元素大小的对象 {width: (element width + left/right margins), height: (element height + top/bottom margins)}
BoxComponent
getPosition ( [ Boolean local ] ) : Array
获取组件底层元素当前的XY位置。
获取组件底层元素当前的XY位置。
参数:
  • local : Boolean
    (可选)如果为true，将返回元素的left和top值，而不是相对于页面内的 XY。(默认值为 false)
返回值:
  • Array
    元素的XY位置值(例如：[100, 200])
BoxComponent
getResizeEl () : Ext.Element
返回该组件的最外层用来定义这些组件整体大小的Element...

返回该组件的最外层用来定义这些组件整体大小的Element对象。

通常用 getEl 方法将会返回相同的Element对象，但在有些情况下，组件可能有一些更多的封装了它的主要动态Element对象的Element对象。

例如ComboBox。它是封装在一个包含<input>元素的包装元素里(这将返回其 getEl方法和触发按钮的元素)。返回的元素为resizeEl。

参数:
  • 无。
返回值:
  • Ext.Element
    The Element which is to be resized by size managing layouts.
BoxComponent
getSize () : Object
获取组件底层元素当前的大小。
获取组件底层元素当前的大小。
参数:
  • 无。
返回值:
  • Object
    一个包含元素大小的对象{width: (element width), height: (element height)}
BoxComponent
getWidth () : Number
获取该组件的当前宽度值。
获取该组件的当前宽度值。
参数:
  • 无。
返回值:
  • Number
BoxComponent
getXType () : String
获取当前组件的xtype，它是用 Ext.ComponentMgr 注册的。 所有可用的xtype列表，参见...
获取当前组件的xtype，它是用 Ext.ComponentMgr 注册的。 所有可用的xtype列表，参见 Ext.Component 类头部。示例用法:

var t = new Ext.form.TextField();
alert(t.getXType());  // alerts 'textfield'
参数:
  • 无。
返回值:
  • String
    The xtype
Component
getXTypes () : String
返回此组件的xtype继承树，用字符'-'分隔。 所有可用的xtype值...

返回此组件的xtype继承树，用字符'-'分隔。 所有可用的xtype值，请参见Ext.Component 类的头部。

如果使用你自己的子类，请注意，组件必须注册它自己的xtype值以便区别于继承的xtype。

示例用法:

var t = new Ext.form.TextField();
alert(t.getXTypes());  // alerts 'component/box/field/textfield'
参数:
  • 无。
返回值:
  • String
    xtype层次字符串
Component
hasListener( String eventName ) : Boolean
检测对象是否包含指定事件的任何监听器
检测对象是否包含指定事件的任何监听器
参数:
  • eventName : String
    检测的事件名
返回值:
  • Boolean
    如果事件被监听则为true，否则为false
Observable
hide () : Ext.Component
隐藏当前组件。 监听 beforehide' 事件并且返回false 可以取消隐藏组件的操作。 在隐藏组件之后触发...
隐藏当前组件。 监听 beforehide' 事件并且返回false 可以取消隐藏组件的操作。 在隐藏组件之后触发 ' hide' 事件。 如果组件被配置成 hidden 那么此方法在内部被调用。
参数:
  • 无。
返回值:
  • Ext.Component
    this
Component
insert ( Number index , Ext.Component component ) : Ext.Component
在当前容器的指定索引处插入一个组件。 在插入之前触发...
在当前容器的指定索引处插入一个组件。 在插入之前触发 beforeadd 事件， 然后在组件被插入之后触发 add 事件。
参数:
  • index : Number
    组件会被插入到容器子项集合中时的索引位置
  • component : Ext.Component
    需要插入的子组件。

    Ext使用懒渲染，只有在必要的时候才会渲染插入的组件。

    如果使用懒渲染，可以传递一个组件配置对象以避免创建一个真实组件的开销， 这意味着，插入的组件不会立即被渲染。 为了利用这个“懒初始化”('lazy instantiation')， 必须把组件设置为它注册的 Ext.Component.xtype 值。

    所有可用的xtype列表，参见 Ext.Component。
返回值:
  • Ext.Component
    使用容器默认配置值插入的组件(或者配置对象)。
Container
isVisible () : Boolean
如果当前组件可见，返回true。
如果当前组件可见，返回true。
参数:
  • 无。
返回值:
  • Boolean
    如果当前组件可见，返回true，其它返回false。
Component
isXType ( String xtype , [ Boolean shallow ] ) : Boolean
Tests whether or not this Component is of a specific xtype. This can test whether this Component is descended from th...

测试此组件是否是指定的xtype。此方法既可以测试是否是指定的xtype的某个子类， 或者它是否直接是指定的xtype类(shallow=true)。

如果使用你自己的子类，必须知道组件必须注册它的xtype值。

所有可用的xtype列表，参见 Ext.Component 类头部。

示例用法:

var t = new Ext.form.TextField();
var isText = t.isXType('textfield');        // true
var isBoxSubclass = t.isXType('box');       // true, descended from BoxComponent
var isBoxInstance = t.isXType('box', true); // false, not a direct BoxComponent instance
参数:
  • xtype : String
    需要为当前组件进行检测的xtype
  • shallow : Boolean
    (可选) 如果为false，检测组件是否是xtype继承树中的某个子类（默认是这种情况）， 如果为true，只检测组件是否是指定的xtype类型。
返回值:
  • Boolean
    如果当前组件是指定xtype的子类，返回true，其它返回flase。
Component
mon ( Observable|Element item , Object|String ename , Function fn , Object scope , Object opt ) : void
向任何Observable对象(或者元素)上添加监听器，监听器将会在组件...

向任何Observable对象(或者元素)上添加监听器，监听器将会在组件销毁时被自动删除。
用法：

myGridPanel.mon(myGridPanel.getSelectionModel(), 'selectionchange', handleSelectionChange, null, {buffer: 50});

or:

myGridPanel.mon(myGridPanel.getSelectionModel(), {
    selectionchange: handleSelectionChange,
    buffer: 50
});
参数:
  • item : Observable|Element
    需要添加listener/listeners的项目。
  • ename : Object|String
    事件名，或者一个包含事件名属性的对象。
  • fn : Function
    (可选) 如果 ename 参数是一个事件名，此参数为处理函数。
  • scope : Object
    (可选)如果 ename 参数是一个事件名称，此参数是作用域 ( this 引用)，监听函数将会在此作用域中被执行。
  • opt : Object
    (可选)如果 ename 参数是一个事件名称， 此参数是 addListener 配置项。
返回值:
  • void
Component
mun ( Observable|Element item , Object|String ename , Function fn , Object scope ) : void
删除通过mon 方法添加的监听器。
删除通过mon 方法添加的监听器。
参数:
  • item : Observable|Element
    需要删除listener/listeners的项目。
  • ename : Object|String
    事件名称，或者一个包含事件名称属性的对象。
  • fn : Function
    (可选)如果 ename 参数是一个事件名称，此参数是一个处理函数。
  • scope : Object
    (可选)如果 ename 参数是一个事件名称，此参数是作用域 ( this 引用)，监听函数将会在此作用域中被执行。
返回值:
  • void
Component
nextSibling () : Ext.Component
返回所属容器中的下一个组件
返回所属容器中的下一个组件
参数:
  • 无。
返回值:
  • Ext.Component
Component
on( String eventName, Function handler, [Object scope], [Object options] ) : void
给对象添加事件处理器 (addListener的简写形式)
给对象添加事件处理器 (addListener的简写形式。)
参数:
  • eventName : String
    监听的事件类型
  • handler : Function
    事件调用的方法
  • scope : Object
    （可选）处理方法执行时的作用域 (this 的引用)。 如果被忽略。默认为触发事件的对象。
  • options : Object
    可选 包含处理器配置的对象。
返回值:
  • void
Observable
previousSibling () : Ext.Component
返回所属容器中的前一个组件
返回所属容器中的前一个组件
参数:
  • 无。
返回值:
  • Ext.Component
Component
purgeListeners() : void
移除对象上所有的监听器
移除对象上所有的监听器
参数:
  • 无。
返回值:
  • void
Observable
relayEvents( Object o, Array events ) : void
从指定的Observable上传递选择的事件就好像被当前对象触发一样。
从指定的Observable上传递选择的事件就好像被当前对象触发一样。
参数:
  • o : Object
    该Observable上的事件被当前对象传递。
  • events : Array
    传递的数组名。
返回值:
  • void
Observable
remove ( Component/String component , [ Boolean autoDestroy ] ) : Ext.Component
从当前容器中移除一个组件。 在移除之前触发 beforeremove 事件， 然后在组件被移除之后触发...
从当前容器中移除一个组件。 在移除之前触发 beforeremove 事件， 然后在组件被移除之后触发 remove 事件。
参数:
  • component : Component/String
    需要移除的组件引用或者id
  • autoDestroy : Boolean
    (可选) 设置为true将自动调用被删组件的 Ext.Component.destroy 函数。 默认为容器的 autoDestroy 配置值。
返回值:
  • Ext.Component
    被移除的组件。
Container
removeAll ( [ Boolean autoDestroy ] ) : Array
从当前容器中删除所有组件。
从当前容器中删除所有组件。
参数:
  • autoDestroy : Boolean
    (可选) 此参数为true时将自动调用 被删组件的 Ext.Component.destroy 方法。 默认为当前容器的 autoDestroy 配置值。
返回值:
  • Array
    被销毁的组件数组
Container
removeClass ( string cls ) : Ext.Component
从组件底层的元素上删除一个CSS类。
从组件底层的元素上删除一个CSS类。
参数:
  • cls : string
    需要移除的CSS类名
返回值:
  • Ext.Component
    this
Component
removeListener( String eventName, Function handler, [Object scope] ) : void
删除一个事件处理器。
删除一个事件处理器。
参数:
  • eventName : String
    处理器关联的事件类型。
  • handler : Function
    移除的处理器。 这应该是传递到addListener里的方法的引用。
  • scope : Object
    （可选）处理器指定的初始作用域。
返回值:
  • void
Observable
render ( [ Element/HTMLElement/String container ], [ String/Number position ] ) : void
在传递进来的HTML元素中渲染当前组件。...

在传递进来的HTML元素中渲染当前组件。

如果你正在使用一个Container 对象放置当前组件，那么请不要使用render方法。

当容器第一次被渲染时，它的子组件将会被容器的 layout 管理器渲染。

某些布局管理器允许动态添加子组件。它们包括 Ext.layout.CardLayout, Ext.layout.AnchorLayout, Ext.layout.FormLayout, Ext.layout.TableLayout。

当一个新的子组件被添加时，如果容器已经被渲染了， 你可能需要调用容器的 doLayout 方法来刷新视图，它将导致所有没有被渲染的子组件进行渲染操作。 此操作是必须的，这样你可以添加多个子组件而只刷新一次layout。

当创建复杂的UI时，非常重要的一点是，请记住调整子项目的尺寸和位置是容器的 layout 管理器的职责。 如果你希望子项目的尺寸对用户交互作出反应， 你必须为容器配置一个布局管理器，它将创建和管理你心里想要的那种布局。

忽略容器的layout 配置意味着将会使用一个基本的布局管理器，它除了按次序把子组件 渲染到容器中之外什么事情都不做。 这种情况下，任何尺寸和位置的调整操作都不会发生。

参数:
  • container : Element/HTMLElement/String
    (可选) 需要在其中渲染当前组件的元素。 如果它是从一个已存在的标签中创建的，此参数应该被忽略。
  • position : String/Number
    (可选) 容器中的一个元素ID或者一个DOM节点索引， 当前组件将会被插入到它前面 (默认append到容器的尾部)
返回值:
  • void
Component
resumeEvents() : void
重新开始触发事件。(参见suspendEvents) 如果事件以queueSuspended参数被挂起，则在事件被挂起时 ...
重新开始触发事件。(参见 suspendEvents) 如果事件以queueSuspended 参数被挂起，则在事件被挂起时触发的事件会被传递到所有的监听器上
参数:
  • 无。
返回值:
  • void
Observable
setAutoScroll ( Boolean scroll ) : Ext.BoxComponent
设置该组件内容溢出时是否自动显示滚动条。
设置该组件内容溢出时是否自动显示滚动条。
参数:
  • scroll : Boolean
    值为true的话组件自动显示滚动条。
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setDisabled ( Boolean disabled ) : Ext.Component
工具函数，使用布尔值设置有效/无效(disabled/enabled )。
工具函数，使用布尔值设置有效/无效(disabled/enabled )。
参数:
  • disabled : Boolean
返回值:
  • Ext.Component
    this
Component
setHeight ( Mixed height ) : Ext.BoxComponent
设置此组件的高度。该方法将触发resize事件。
设置此组件的高度。该方法将触发resize事件。
参数:
  • height : Mixed
    The new height to set.
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setPagePosition ( Number x , Number y ) : Ext.BoxComponent
设置组件在页面中的XY位置。 如果需要设置left和top值 ，请使用...
设置组件在页面中的XY位置。 如果需要设置left和top值 ，请使用setPosition方法。 该方法触发move事件。
参数:
  • x : Number
    The new x position
  • y : Number
    The new y position
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setPosition ( Number left , Number top ) : Ext.BoxComponent
设置组件的left和top值。设置组件的页面XY值，请使用setPagePosition方法。该方法触发...
设置组件的left和top值。设置组件的页面XY值，请使用setPagePosition方法。该方法触发move事件。
参数:
  • left : Number
    The new left
  • top : Number
    The new top
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setSize ( Mixed width , Mixed height ) : Ext.BoxComponent
设置BoxComponent的宽度和高度。 此方法触发resize事件...
设置BoxComponent的宽度和高度。 此方法触发resize事件。此方法可以接收单独的width或者height值作为参数， 或者你可以传递像这样的一个size对象： {width:10, height:20} 。
参数:
  • width : Mixed
    设置的新的width值。这可以是：
    • 一个Number类型指定Element新的宽度 Ext.Element.defaultUnit(默认为像素 :'px')。
    • 一个String类型用于设置width的CSS样式。
    • 一个size对象格式为 {width: widthValue, height: heightValue} 。
    • 值为 undefined 时，保留原来的width不变。
  • height : Mixed
    设置的新的height值(如果第一个参数传递了一个size对象，此参数没有必要传递)。这可以是：
    • 一个Number类型指定Element新的高度 Ext.Element.defaultUnit(默认为像素 :'px')。
    • 一个String类型用于设置height的CSS样式。也有可能不会被使用到。
    • 值为 undefined 时，保留原来的height不变。
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setVisible ( Boolean visible ) : Ext.Component
工具方法，通过使用布尔值隐藏或者显示当前组件。
工具方法，通过使用布尔值隐藏或者显示当前组件。
参数:
  • visible : Boolean
    true时显示，false时隐藏
返回值:
  • Ext.Component
    this
Component
setWidth ( Mixed width ) : Ext.BoxComponent
设置组件的宽度。 此方法触发resize事件。
设置组件的宽度。 此方法触发resize事件。
参数:
  • width : Mixed
    The new width to set.
返回值:
  • Ext.BoxComponent
    this
BoxComponent
show () : Ext.Component
显示当前组件。监听' beforeshow' 事件，返回 false 取消显示组件...
显示当前组件。监听' beforeshow' 事件，返回 false 取消显示组件。在显示组件之后触发' show' 事件。
参数:
  • 无。
返回值:
  • Ext.Component
    this
Component
suspendEvents( Boolean queueSuspended ) : void
暂停触发所有的事件。 (参看resumeEvents)
暂停触发所有的事件。（参看 resumeEvents)
参数:
  • queueSuspended : Boolean
    如果传递为true则排列好暂停的事件使得在调用 resumeEvents 后再触发它们，而不是抛弃所有暂停的事件。
返回值:
  • void
Observable
syncSize () : Ext.BoxComponent
强制组件的大小按照此组件底层元素当前的高度和宽度计算。
强制组件的大小按照此组件底层元素当前的高度和宽度计算。
参数:
  • 无。
返回值:
  • Ext.BoxComponent
    this
BoxComponent
un( String eventName, Function handler, [Object scope] ) : void
删除一个事件处理器(removeListener方法的简写形式)
删除一个事件处理器(removeListener方法的简写形式。)
参数:
  • eventName : String
    处理器关联的事件类型
  • handler : Function
    被删除的处理器 这应该是传入 addListener 中的方法的引用。
  • scope : Object
    （可选）为处理器指定的初始作用域。
返回值:
  • void
Observable
update ( Mixed htmlOrData , [ Boolean loadScripts ], [ Function callback ] ) : void
刷新组件的内部区域。
刷新组件的内部区域。
参数:
  • htmlOrData : Mixed
    如果已经通过tpl为当前组件配置了一个模板，那么 将会使用此参数来装配模板。 如果没有为当前组件配置模板，组件的内容区域将会通过Ext.Element 进行刷新。
  • loadScripts : Boolean
    (可选)只用在使用html配置时此参数才合法。默认为false。
  • callback : Function
    (可选)只用在使用html配置时此参数才合法。 当脚本加载完成时回调函数才被执行。
返回值:
  • void
Component
updateBox ( Object box ) : Ext.BoxComponent
设置此组件底层元素的盒子模型尺寸。(译者注：盒子模型是CSS术语，详细资料请自行搜索。)
设置此组件底层元素的盒子模型尺寸。(译者注：盒子模型是CSS术语，详细资料请自行搜索。)
参数:
  • box : Object
    一个格式为{x, y, width, height}的对象
返回值:
  • Ext.BoxComponent
    this
BoxComponent

公共事件

Event Defined By
add : ( Ext.Container this , Ext.Component component , Number index )
监听器将会被使用如下的参数被调用:
  • this : Ext.Container
  • component : Ext.Component
    被添加的组件
  • index : Number
    将组件添加到容器子组件集合时的位置索引
Container
added : ( Ext.Component this , Ext.Container ownerCt , number index )
当一个组件被添加到一个Ext.Container时触发
当一个组件被添加到一个Ext.Container时触发
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • ownerCt : Ext.Container
    用于组件的容器
  • index : number
    添加组件的位置
Component
afterlayout : ( Ext.Container this , ContainerLayout layout )
当容器中的组件被指定的布局管理器排列的时候触发。
当容器中的组件被指定的布局管理器排列的时候触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Container
  • layout : ContainerLayout
    为当前容器提供的ContainerLayout实现
Container
afterrender : ( Ext.Component this )
在组件渲染完成之后触发...

在组件渲染完成之后触发。

afterrender事件在当前组件被rendered 结束之后、在为组件定义的所有afterRender方法执行之后 触发，并且，如果有stateful， 也在状态被保存之后才触发。

监听器将会以如下参数格式被调用:
  • this : Ext.Component
Component
beforeadd : ( Ext.Container this , Ext.Component component , Number index )
在任何 Ext.Component 被添加或者插入到容器中之前触发。 事件处理器可以返回false取消添加操作。
在任何 Ext.Component 被添加或者插入到容器中之前触发。 事件处理器可以返回false取消添加操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Container
  • component : Ext.Component
    被添加的组件
  • index : Number
    组件被添加到容器子项目集合中时的索引位置
Container
beforedestroy : ( Ext.Component this )
在组件 destroyed 之前触发。 在事件监听器中返回false以停止 destroy 操作。
在组件 destroyed 之前触发。 在事件监听器中返回false以停止 destroy 操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforehide : ( Ext.Component this )
在调用hide方法隐藏组件之前触发。 在事件监听器中返回false可以停止隐藏操作。
在调用hide方法隐藏组件之前触发。 在事件监听器中返回false可以停止隐藏操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforeremove : ( Ext.Container this , Ext.Component component )
从容器中删除任何Ext.Component 之前触发。 处理器可以返回false取消remove操作。
从容器中删除任何Ext.Component 之前触发。 处理器可以返回false取消remove操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Container
  • component : Ext.Component
    被删除的组件
Container
beforerender : ( Ext.Component this )
在组件被rendered 之前触发。 在事件监听器中返回false可以停止render 操作。
在组件被rendered 之前触发。 在事件监听器中返回false可以停止render 操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforeshow : ( Ext.Component this )
在调用show()方法现实组件之前触发。 事件处理函数返回false可以停止show。
在调用show 方法现实组件之前触发。 事件处理函数返回false可以停止show。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforestaterestore : ( Ext.Component this , Object state )
在组件状态恢复之前触发。返回false停止恢复状态操作。
在组件状态恢复之前触发。返回false停止恢复状态操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    StateProvider返回的状态哈希值。 如果没有禁止此事件，那么状态对象会被传递给applyState。 默认情况下，这样简单地把属性值拷贝到当前组件中。 可以覆盖此方法以提供自定的状态恢复操作。
Component
beforestatesave : ( Ext.Component this , Object state )
在组件状态被保存到配置的状态提供者之前触发。 返回false可以停止保存。
在组件状态被保存到配置的状态提供者之前触发。 返回false可以停止保存。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    状态值哈希。 这由在组件上调用getState() 方法决定。 此方法必须由开发者提供，返回是否需要对状态进行描述，默认情况下， Ext.Component有一个空实现。
Component
destroy : ( Ext.Component this )
在组件被销毁之后触发。
在组件被destroyed之后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
disable : ( Ext.Component this )
在组件被设置为无效状态后触发。
在组件被设置为无效状态后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
enable : ( Ext.Component this )
当组件被设置为有效(enabled)之后触发。
当组件被设置为有效(enabled)之后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
hide : ( Ext.Component this )
在组件被隐藏之后触发。 当调用hide 方法隐藏组件之后触发。
在组件被隐藏之后触发。 当调用hide 方法隐藏组件之后触发。
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
move : ( Ext.Component this , Number x , Number y )
在组件移动之后触发。
在组件移动之后触发。
监听器将会用如下的参数格式来调用:
  • this : Ext.Component
  • x : Number
    The new x position
  • y : Number
    The new y position
BoxComponent
remove : ( Ext.Container this , Ext.Component component )
监听器将会以如下的参数格式被调用:
  • this : Ext.Container
  • component : Ext.Component
    被删除的组件
Container
removed : ( Ext.Component this , Ext.Container ownerCt )
当一个组件被从Ext.Container容器中删除时触发
当一个组件被从Ext.Container容器中删除时触发
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • ownerCt : Ext.Container
    持有组件的容器
Component
render : ( Ext.Component this )
在组件被渲染之后触发。
在组件被 rendered(渲染) 之后触发。
监听器将以如下的参数格式被调用:
  • this : Ext.Component
Component
resize : ( Ext.Component this , Number adjWidth , Number adjHeight , Number rawWidth , Number rawHeight )
在组件被调整大小之后触发。
在组件被调整大小之后触发。
监听器将以如下的参数格式被调用:
  • this : Ext.Component
  • adjWidth : Number
    这是width调整后的值
  • adjHeight : Number
    这是height调整后的值
  • rawWidth : Number
    这是width原来的值
  • rawHeight : Number
    这是height原来的值
BoxComponent
show : ( Ext.Component this )
在调用show 方法显示组件之后触发。
在调用show 方法显示组件之后触发。
监听器将会用如下的参数格式被调用:
  • this : Ext.Component
Component
staterestore : ( Ext.Component this , Object state )
组件状态被存储之后触发。
组件状态被存储之后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    StateProvider返回的状态哈希值。 如果没有禁止此事件，那么状态对象会被传递给applyState。 默认情况下，这样简单地把属性值拷贝到当前组件中。 可以覆盖此方法以提供自定的状态恢复操作。
Component
statesave : ( Ext.Component this , Object state )
在组件状态被保存到所配置的状态提供者之后触发。
在组件状态被保存到所配置的状态提供者之后触发。
监听器将会用如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    状态值hash。 这是由在足见上调用getState() 方法决定的。 开发者必须提供此方法以返回是否需要恢复状态，默认情况下， Ext.Component有一个空实现。
Component


Observable
    Component
      BoxComponent
        Container
          Panel
            Window

Class Ext.Window

包: | Ext
定义类的文件: | Window.js
类: | Window
继承自: | Panel

一个被设计用作程序窗口的特殊panel。 默认情况下，window是浮动， 可改变大小, 并且 可以拖拽，提供特殊的功能，如 最大化、恢复到原来大小，并能 最小化 （产生minimizing事件，因为最小化行为是和特定应用相关的）。

window也可以挂靠到 Ext.WindowGroup 或者被 Ext.WindowMgr 来管理起来，以提供分组、激活、在最前/最后以及其它特定应用行为。

默认窗口渲染到document.body。可以用 renderTo将窗口约束到另一个确定元素

注: 默认情况下， 关闭 按钮 销毁 窗口并销毁所以子控件。这使得Window对象和它的子控件不可 复用. 如果想复用Window, 设置 closeAction: 'hide' .

配置项

Config Options Defined By
activeItem : String/Number
一个string型的组件id，或者组件的数字索引， 它需要...
一个string型的组件id，或者组件的数字索引， 它需要在渲染时在容器内的布局管理器中被初始化并激活。 例如：activeItem: 'item-1' 或者 activeItem: 0 ( 索引 0 =容器子项目集合中的第一个元素)。 activeItem仅仅适用于一次显示一个组件的布局模式(比如 Ext.layout.AccordionLayout, Ext.layout.CardLayout 和 Ext.layout.FitLayout)。 与 Ext.layout.ContainerLayout.activeItem 相关。
Container
allowDomMove : Boolean
在渲染时组件是否可以移动Dom节点(默认为true)。
Component
anchor : String
注: 这个配置只用于该组件被包含在一个已使用AnchorLayout...

注: 这个配置只用于该组件被包含在一个已使用 AnchorLayout (或者其子类)配置的Container时。 基于布局管理器，例如：

  • Ext.form.FormPanel
  • 指定 layout: 'anchor' // or 'form', or 'absolute'

参见 Ext.layout.AnchorLayout. anchor 。

BoxComponent
animCollapse : Boolean
true将会在panel被折叠时使用动画效果，false将会跳过动画效果....
true 将会在panel被折叠时使用动画效果， false 将会跳过动画效果( 如果Ext.Fx类 有效，默认为 true ，否则为 false )。
Panel
animateTarget : String/Element
作为窗口被打开时动画效果的起始点的id或者一个元素， (默认值为 null，没有动画效果).
Window
applyTo : Mixed
指定一个元素的id、一个DOM元素或者一个已经存在并被渲染到DIV中的元素，此DIV已经被...

指定一个元素的id、一个DOM元素或者一个已经存在并被渲染到DIV中的元素，此DIV已经被 渲染到document中，并且为当前组件指定了一些结构化的标签。

  • 描述 :
      当使用了 applyTo， 在主元素中也可以用id或者CSS类名来指定组件的托管部分， 并且，如果可以的话，创建的组件可能也会试图在那个标签中创建它的子组件。
  • 注意 :
      当使用此配置项时，无需调用render()方法。
      如果指定了applyTo属性，任何传递给 renderTo 的值都会被忽略，并且目标元素的父节点将会自动被用作组件的容器。
Panel
autoDestroy : Boolean
如果为true，容器将自动销毁任何从其中被删除的组件， 否则...
如果为true，容器将自动销毁任何从其中被删除的组件， 否则必须手动处理销毁操作(默认为true)。
Container
autoHeight : Boolean
如果值为true，height配置项为'auto'，否则值为false的话使用固定的高度...

如果值为true，height配置项为'auto'，否则值为false的话使用固定的高度， 或者可以由其父类容器 layout manager来控制。(默认值为 false)。

注: 虽然很多组件继承了这个配置选项，但不是所有这些组件的自适应高度配置都会像期望的那样起作用。 设置autoHeight：值为true时，浏览器将根据元素的内容自动设置高度，这将意味着Ext不会去管理高度。

如果是由浏览器来管理高度，需要注意的是，通过浏览器进行调整的结构组件内不能被发现， 因此宽度的变化可能导致需要进行同步处理元素的高度。 例如：

var w = new Ext.Window({
    title: 'Window',
    width: 600,
    autoHeight: true,
    items: {
        title: 'Collapse Me',
        height: 400,
        collapsible: true,
        border: false,
        listeners: {
            beforecollapse: function() {
                w.el.shadow.hide();
            },
            beforeexpand: function() {
                w.el.shadow.hide();
            },
            collapse: function() {
                w.syncShadow();
            },
            expand: function() {
                w.syncShadow();
            }
        }
    }
}).show();
Panel
autoLoad : Object/String/Function
一个合法的url描述，依照Updater Ext.Updater.update 方法...
一个合法的url描述，依照Updater Ext.Updater.update 方法。如果autoLoad不为null，panel将会在渲染之后立即尝试加载它的内容。

URL将会成为当前panel的body元素的默认URL，这样它可以在任意时刻被 refresh.

Panel
autoScroll : Boolean
如果值为true，将会在该元素上使用overflow:'auto'配置，并且在必要的时候...
如果值为true，将会在该元素上使用overflow:'auto'配置，并且在必要的时候自动显示滚动条，否则，溢出部分的组件都会被切除(默认值为 false)。
BoxComponent
autoShow : Boolean
如果组件需要检测隐藏CSS属性(如 'x-hidden' 或者 'x-hide-display')并且在渲染时删除...
如果组件需要检测隐藏CSS属性(如 'x-hidden' 或者 'x-hide-display')并且在渲染时删除它们 (默认为false)，设置此值为true。
Component
baseCls : String
应用到此面板中元素的基本CSS类(默认值为 'x-window')。
Window
bbar : Object/Array
panel底部工具栏。 此参数可以是一个Ext.Toolbar 、一个工具栏配置项，或者一个buttons/button配置数组---用来被添加到工具栏中...

panel底部工具栏。 此参数可以是一个Ext.Toolbar 、一个工具栏配置项，或者一个buttons/button配置数组---用来被添加到工具栏中。 注意，此参数在渲染之后是无效的。如果在渲染之后需要访问底部工具栏 ，请使用 getBottomToolbar。

注意:尽管Toolbar可以包含Field组件，但它们不会 通过加载祖先FormPanel而被更新。Panel的工具栏不是标准Container->Component 层次的一部分，所以它们不会被扫面以收集表单项。但是，这些值还是会 被提交，因为提交表单的参数是从DOM树中收集的。

Panel
bbarCfg : Object
一个 ADomHelper 元素的配置对象，描述了当前Panelbbar元素的结构...

一个DomHelper 元素的配置对象，描述了当前Panel的bbar元素结构。 另请参见 bodyCfg 。

Panel
bodyBorder : Boolean
True将会在Panel的body元素内部显示一个边框，false将会隐藏它 (默认为true)。只有当border == true 时...
True将会在Panel的body元素内部显示一个边框，false将会隐藏它 (默认为true)。只有当border == true 时，此参数才会被应用。如果border == true 并且 bodyBorder == false， 将会给整个body元素一种凹陷式的外观。
Panel
bodyCfg : Object
一个DomHelper 元素描述对象，可以被指定给任何Panel Element...

一个DomHelper 元素描述对象，可以被指定给任何Panel Element.

默认情况下，以下表格中的Default元素将会被用作html标签，用来创建一个子元素 ，与Default类名相匹配( baseCls 将会被 baseCls 替换 ):

Panel      Default  Default             Custom      Additional       Additional
Element    element  class               element     class            style
========   ==========================   =========   ==============   ===========
header     div      baseCls+'-header'   headerCfg   headerCssClass   headerStyle
bwrap      div      baseCls+'-bwrap'     bwrapCfg    bwrapCssClass    bwrapStyle
+ tbar     div      baseCls+'-tbar'       tbarCfg     tbarCssClass     tbarStyle
+ body     div      baseCls+'-body'       bodyCfg     bodyCssClass     bodyStyle
+ bbar     div      baseCls+'-bbar'       bbarCfg     bbarCssClass     bbarStyle
+ footer   div      baseCls+'-footer'   footerCfg   footerCssClass   footerStyle

例如，配置一个自定义的元素，用来强制 body 元素使用不同形式的标签，而不是使用默认创建的。 这种情况的一个例子可能是 创建一个子 Panel，包含自定义的内容，例如header，或者通过使body拥有一个<center> 元素， 从而强制Panel中的所有内容居中:

new Ext.Panel({
    title: 'Message Title',
    renderTo: Ext.getBody(),
    width: 200, height: 130,
    bodyCfg: {
        tag: 'center',
        cls: 'x-panel-body',  // Default class not applied if Custom element specified
        html: 'Message'
    },
    footerCfg: {
        tag: 'h2',
        cls: 'x-panel-footer'        // same as the Default class
        html: 'footer html'
    },
    footerCssClass: 'custom-footer', // additional css class, see addClass

    footerStyle:    'background-color:red' // see bodyStyle

});

以上例子也显式创建了一个 footer ，拥有自定义的标签和样式。

Panel
bodyCssClass : String/Object/Function
可选的CSS类选择器，被应用到body 元素上，其格式为Ext.Element.addClass所 期望的值(默认为null)...
可选的CSS类选择器，被应用到body 元素上，其格式为Ext.Element.addClass所 期望的值(默认为null)。参见 bodyCfg.
Panel
bodyStyle : String/Object/Function
自定义的CSS样式，它将被应用到body 元素上，其格式为...
自定义的CSS样式，它将被应用到body 元素上，其格式为Ext.Element.applyStyles 所期望的值(默认为null)。参见bodyCfg。
Panel
border : Boolean
True将会显示panel body元素的边框，false将会隐藏它们 (默认为true)。默认情况下，边框是一个2px宽度的内嵌边框...
True将会显示panel body元素的边框，false将会隐藏它们 (默认为true)。默认情况下，边框是一个2px宽度的内嵌边框， 但是，以后可以通过设置bodyBorder 为false以改变它。
Panel
boxMaxHeight : Number
设置组件的最大高度值...

设置组件的最大高度值。

警告:布局管理器应用的任何管理大小的配置将会被此属性覆盖。

BoxComponent
boxMaxWidth : Number
设置组件的最大宽度值...

设置组件的最大宽度值。

警告:布局管理器应用的任何管理大小的配置将会被此属性覆盖。

BoxComponent
boxMinHeight : Number
设置组件的最小高度值...

设置组件的最小高度值。

警告:布局管理器应用的任何管理大小的配置将会被此属性覆盖。

BoxComponent
boxMinWidth : Number
设置组件的最小宽度值...

设置组件的最小宽度值。

警告: 布局管理器应用的任何管理大小的配置将会被此属性覆盖。

BoxComponent
bubbleEvents : Array
一个事件数组，当这些事件被触发时，将会被冒泡到所有父容器中。参见....

一个事件数组，当这些事件被触发时，将会被冒泡到所有父容器中。参见 Ext.util.Observable.enableBubble。 默认为 []。

Container
bufferResize : Boolean/Number
当设置为true时(50毫秒)或者是一个毫秒数值， 指定给当前容器的布...
当设置为true时(50毫秒)或者是一个毫秒数值， 指定给当前容器的布局管理器将会缓存它计算出的频率，然后 对组件进行一次重新布局操作。 对于重量级的容器，或者拥有大量子组件的容器来说，这非常有用， 因为频繁进行布局是非常昂贵的。 默认为 50 .
Container
buttonAlign : String
添加到当前panel的所有 buttons 的对齐方式。 合法的值有...
添加到当前panel的所有 buttons 的对齐方式。 合法的值有 'right' , 'left' 和 'center' (默认为 'right' )。
Panel
buttons : Array
Panel的按钮数组，它们从 buttons 配置属性创建。只读。
Panel
bwrapCfg : Object
一个DomHelper 元素描述对象，描述了当前Panel的 bwrap 的元素的结构...

一个DomHelper 元素描述对象，描述了当前Panel的 bwrap 的元素的结构。另请参见 bodyCfg 。

Panel
clearCls : String
应用到特殊的clearing div的CSS类， 这个clearing div直接渲染到每个form field的包装器后面...

应用到特殊的clearing div的CSS类， 这个clearing div直接渲染到每个form field的包装器后面，以提供 清除field的功能(默认为 'x-form-clear-left')。

注意: 只有在当前组件被渲染到一个使用FormLayout 布局(例如 Ext.form.FormPanel 或者指定 layout:'form')的 容器中、或者是指定了一个fieldLabel 、或者指定isFormField=true 时此配置才有效。

另请参见 Ext.layout.FormLayout. fieldTpl。

Component
closable : Boolean
设置为true将显示'close'工具按钮，并允许用户关闭窗体， false将隐藏此按钮，并且不允许关闭窗口(默认为true)。

设置为true将显示'close'工具按钮，并允许用户关闭窗体， false将隐藏此按钮，并且不允许关闭窗口(默认为true)。

默认情况下，可以通过点击窗口上的关闭按钮，或者当窗口获得焦点时按ESC键来请求关闭窗体， 然后 close method will 方法将被调用。此方法将 销毁 窗体，包括其中的内容，这意味着此窗体是不可再复用的(需要重新new).

如果要在关闭一个窗口时使之能复用可以 隐藏窗口,设置 closeAction 为 'hide'即可.

Window
closeAction : String
当关闭按钮被点击时执行的操作。

当关闭按钮被点击时执行的操作:

  • 'close' : 默认操作是
    remove从dom中 销毁窗口已经子控件。 通过 show 方法window不会再显示.
  • 'hide' :
    hide 这将简单地隐藏窗口，通过 设置它的visibility为hidden，并且设置一个负数偏移量，通过 show方法可以让窗口重新显示。 .

注: 此设置不会影响 close方法， close的操作是 销毁 window. 如果要用程序 隐藏 一个window, 可以调用 hide方法.

Window
cls : String
一个可选的额外CSS类，它将被添加到当前组件的元素上(默认为'')...
一个可选的额外CSS类，它将被添加到当前组件的元素上(默认为'')。 此属性对于在组件上，或者它的任何使用标准CSS规则的孩子节点上， 添加定制的样式非常有用。
Component
collapseFirst : Boolean
将会确保折叠/展开(collapse/expand)按钮总是被渲染在第一个位置...
true 将会确保折叠/展开(collapse/expand)按钮总是被渲染在第一个位置， 在panel顶部的工具栏中位于任何其它工具左侧， false 将会把它渲染在最后(默认为 true )。
Panel
collapsed : Boolean
如果为true，将panel渲染成折叠的(默认值为 false)。...
如果为true，将panel渲染成折叠的，否则渲染成展开的(默认值为 false)。注意如果 expandOnShow 设置为true (默认)它将会覆盖 collapsed属性并且当窗口关闭时总是被展开的。
Window
collapsedCls : String
在被折叠后，一个被添加到panel元素上的CSS类 (默认为 'x-panel-collapsed' )。
Panel
collapsible : Boolean
True将会使panel折叠并且会自动把展开/折叠(expand/collapse)按钮渲染到顶部...
True将会使panel折叠并且会自动把展开/折叠 (expand/collapse)按钮渲染到顶部工具按钮区域，false将 保持panel尺寸固定，没有按钮(默认为false)。
Panel
constrain : Boolean
设置为true，将窗口约束到视图区，false将 允许其落到视图区之外(默认值为 false)...
设置为true，将窗口约束到视图区，false将 允许其落到视图区之外。默认窗口将渲染到document.body。如果将窗口约束到另一个明确元素可以使用 renderTo. (defaults to false).可选地，如果仅仅需要约束窗体头部，使用 constrainHeader配置项.
Window
constrainHeader : Boolean
设置为true将把窗体的头部约束到视图区， 允许窗口的body部分落到视图区之外...
设置为true将把窗体的头部约束到视图区， 允许窗口的body部分落到视图区之外， false将允许窗口头部落到视图区之外 (默认值为 false)。 可以选择约束这个窗体，使用 constrain.
Window
contentEl : String
(可选)指定一个已存在的HTML元素，或者一个已存在HTML元素的...

(可选)指定一个已存在的HTML元素，或者一个已存在HTML元素的 id ，它们将被用作当前组件的内容。

  • 描述 :
    此配置选项被用来将一个已存在的HTML元素 插入到一个新组件(在组件渲染之后它简单地移动DOM元素) 的layout元素中，使它成为该组件的内容。
  • 注意 :
    指定的HTML元素将被append到组件的layout元素中， 在所有配置的 HTML 被插入之后， 并且，这样的话，在render事件 被触发时，document中将不再包含此元素。
    指定的HTML元素将不会参与组件所有可能使用的 layout 过程(译者注：指这些HTML元素 不会参与布局操作)。 它仅是HTML而已。布局操作实在孩子 items 上进行的。
    添加 x-hidden 或者 x-hide-display CSS类，以防在内容渲染到panel时发生闪烁。
Component
ctCls : String
一个可选的外部CSS样式，添加到这个组件的容器(默认值为 '')。 这个方法对于使用标准的CSS规则...

一个可选的外部CSS样式，添加到这个组件的容器(默认值为 '')。 这个方法对于使用标准的CSS规则，为组件或它的任何一个子组件添加特定的样式非常有用。 参见 Ext.layout.ContainerLayout和 extraCls 。

注意: ctCls 默认为 ''期望如下的类，它们将指定一个默认值:

  • Box Layout : 'x-box-layout-ct'
使用一个额外的CSS类配置以上的Class，它是append到默认对象上的。例如， 对于BoxLayout (Hbox and Vbox):
                                ctCls: 'x-box-layout-ct custom-class'

Component
data : Mixed
初始化数据集，它将被应用到 tpl 上以刷新组件的内容区域。
Component
defaultButton : String/Number/Component
在当前窗口获得焦点时一个控件聚焦到此对象

在当前窗口获得焦点时一个控件聚焦到此对象

可选的值:

  • 底部按钮的index.
  • 一个控件的id
  • 一个控件.
Window
defaultType : String
当一个子项目通过一个原生的配置对象 而不是一个组件的实例指定时。...

当一个子项目通过一个原生的配置对象 而不是一个组件的实例指定时。 在当前容器中创建子组件时使用的默认 xtype 。

默认为 'panel' ， Ext.menu.Menu 默认为 'menuitem' ， Ext.Toolbar 和 Ext.ButtonGroup 默认为 'button' 。

Container
defaults : Object|Function
此选项是在所有添加的项目上应用默认设置的手段， 这些项目要么是通过...

此选项是在所有添加的项目上应用默认设置的手段， 这些项目要么是通过 items 配置项添加的， 或者是通过 add 或者是通过 insert 方法添加的。

如果添加的项目是一个配置对象， 并且不是一个组件的实例， 那么默认参数将会被无条件地被应用。 如果添加的项目是一个组件的实例， 那么默认参数将有条件地被应用，以免覆盖项目上的现有属性你。

如果默认选项被指定为一个函数， 那么将使用当前容器作为作用域来调用这个函数( this 引用)，并且传递被添加的项目作为第一个参数。 调用产生的所有结果都将被作为默认参数应用到项目上。

例如，如需自动在 Ext.Panel 所包含的每个项目上应用padding属性，你可以传递: defaults: {bodyStyle: 'padding:15px'} 。

用法:

defaults: {               // defaults are applied to items, not the container
    autoScroll:true
},
items: [
    {
        xtype: 'panel',   // defaults do not have precedence over
        id: 'panel1',     // options in config objects, so the defaults
        autoScroll: false // will not be applied here, panel1 will be autoScroll:false
    },
    new Ext.Panel({       // defaults do
                                     have precedence over options
        id: 'panel2',     // options in components, so the defaults
        autoScroll: false // will be applied here, panel2 will be autoScroll:true.
    })
]
Container
disabled : Boolean
当前组件处于无效状态时为true。 Read-only.
Panel
disabledClass : String
当组件处于无效状态时添加到组件上的CSS类(默认为 'x-item-disabled')。
Component
draggable : Boolean
设置为true，将允许按住顶部工具条拖动窗口， false将禁用拖拽(默认值为 true)。
设置为true，将允许按住顶部工具条拖动窗口， false将禁用拖拽(默认值为 true)。 注意：默认情况下，窗口是被放置在视图区正中间的， 所以，如果禁用拖拽，在窗体渲染之后就需要通过程序来 设置窗口位置(例如： myWindow.setPosition(100, 100);).
Window
expandOnShow : Boolean
设置为true，在窗口显示时总是以展开的状态出现， false将在显示时保持其当前的状态（可能是折叠的）...
设置为true，在窗口显示时总是以展开的状态出现， false将在显示时保持其当前的状态（可能是 折叠) (默认为true).
Window
fbar : Object/Array
一个Toolbar 对象、一个Toolbar配置项，或者一个Buttons/ Button 配置数组，...

一个Toolbar 对象、一个Toolbar配置项，或者一个Buttons/ Button 配置数组，它们描述了一个被添加到当前Panel底部元素的 Toolbar.

在渲染后， fbar 将会为一个Toolbar 实例。

如果指定了 buttons ，它们将替代 fbar 配置项。

Panel的 buttonAlign 配置项目将会影响这些项目的布局，例如:
var w = new Ext.Window({
    height: 250,
    width: 500,
    bbar: new Ext.Toolbar({
        items: [{
            text: 'bbar Left'
        },'->',{
            text: 'bbar Right'
        }]
    }),
    buttonAlign: 'left', // anything but 'center' or 'right' and you can use '-', and '->'

                                  // to control the alignment of fbar items
    fbar: [{
        text: 'fbar Left'
    },'->',{
        text: 'fbar Right'
    }]
}).show();

注意:尽管Toolbar可以包含Field组件，但它们不会 通过加载祖先FormPanel而被更新。Panel的工具栏不是标准Container->Component 层次的一部分，所以它们不会被扫面以收集表单项。但是，这些值还是会 被提交，因为提交表单的参数是从DOM树中收集的。

Panel
fieldLabel : String
紧靠此field显示的标签文本(默认值为 '')。注意...

紧靠此field显示的标签文本(默认值为 '')。

注意:只有在当前组件被渲染到一个使用FormLayout 的容器中时，此配置才有效。 (例如 Ext.form.FormPanel 或 指定 layout:'form')。

另请参见 hideLabel 、 Ext.layout.FormLayout和 fieldTpl。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Name'
    }]
});
Component
flex : Number
注: 这个配置只用于该组件被包含在一个已使用BoxLayout配置的Container中时...

注: 这个配置只用于该组件被包含在一个已使用BoxLayout配置的Container中时。通过计算每一个子组件的flex值所占全部flex值之和的比例，来决定子组件的宽(HBoxLayout)高(VBoxlayout)。 任何子项的 flex = 0 或 flex = undefined 将不被设置(初始值大小将不被改变)。

BoxComponent
footer : Ext.Element
Panel底部Element 。只读。此元素被用来容纳Panel的...
Panel底部Element 。只读。

此元素被用来容纳Panel的 buttons 或者 fbar 。

注意: 另请参见 el 的注释。

Panel
footerCfg : Object
一个DomHelper 元素的配置对象，描述了当前Panel的footer元素结构。 另请参见...

一个DomHelper 元素的配置对象，描述了当前Panel的footer元素结构。 另请参见 bodyCfg 。

Panel
forceLayout : Boolean
如果此值为true，容器将将强制初始化一次布局操作...
如果此值为true，容器将将强制初始化一次布局操作， 即使容器处于隐藏或者折叠状态。 此配置项对于在一个折叠或者隐藏的容器中强制渲染非常有用 (默认为false)。
Container
header : Ext.Element
Panel的headerElement. 只读。此元素被用来容纳 title和 tools...
Panel的headerElement. 只读。

此元素被用来容纳 title和 tools

注意: 另请参见 el 的注释。

Panel
headerAsText : Boolean
true 将会在 header 中显示panel title ， false 将会隐藏它(默认为 true )。
Panel
headerCfg : Object
一个DomHelper 元素的配置对象，描述了当前Panel的header元素结构...

一个DomHelper 元素的配置对象，描述了当前Panel的header元素结构。 另请参见 bodyCfg 。

Panel
height : Number
组件的高度(默认值为 auto)。注:如果想使用百分比的方式...
组件的高度(默认值为 auto)。注:如果想使用百分比的方式来设置值，请查看 Ext.Component.anchor。
BoxComponent
hidden : Boolean
隐藏控件 (默认为 true). 如果设置为 true, hide 方法会被内部调用.
Window
hideBorders : Boolean
设置为true可以隐藏所包含的每个组件的边框， false为遵照组件现有的边框设置...
设置为true可以隐藏所包含的每个组件的边框， false为遵照组件现有的边框设置(默认为 false)。
Container
hideCollapseTool : Boolean
true 将会在 collapsible == true 时隐藏展开/折叠按钮， false 将会显示它(默认为 false )。
Panel
hideLabel : Boolean
true时完全隐藏label元素 ( label 和 separator)。 默认为 false。 默认情况下，即使你不指定...

true时完全隐藏label元素 ( label 和 separator)。 默认为 false。 默认情况下，即使你不指定 fieldLabel 它的空间仍然会被保留，这样这块区域会与其它确实拥有label的区域位于同一排。 讲此值设置为 true 将导致此区域不再保留此空间。

注意: 参见 clearCls 的注释。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield'
        hideLabel: true
    }]
});
Component
hideMode : String
组件如何隐藏，支持的值有： 'visibility' (css visibility), 'offsets' (位置偏移量为负值) 和...

组件如何隐藏，支持的值有： 'visibility' (css visibility), 'offsets' (位置偏移量为负值) 和 'display' (css display).

注意:一般首选默认值 'display'，因为当组件第一次显示的时候它们会自动进行布局 (隐藏的时候不会调整尺寸)。

Component
hideParent : Boolean
此值为true时，当调用hide/show方法时，将会hide和show组件的容器...
此值为true时，当调用hide/show方法时，将会hide和show组件的容器；false时将会 hide和show组件自身(默认为false)。例如，这可以用作window上隐藏按钮的一种 快捷操作，通过设置此按钮的hideParent:true，然后把它添加到window上。
Component
html : String/Object
一个HTML片段，或者一个 DomHelper 描述，用作layout元素的内容(默认为'')。...
一个HTML片段，或者一个 DomHelper 描述，用作layout元素的内容(默认为'')。 这个HTML内容在组件渲染之后才被添加，所以在 render 出发的时候，document中尚未包含此HTML。 但是这个内容将会在所有配置的 contentEl 之前被插入到body标签中。
Component
iconCls : String
CSS类选择器，指定被用作头部图标的背景图片(默认为'')...
CSS类选择器，指定被用作头部图标的背景图片(默认为'')。

指定自定义图表类的示例就像:

// specify the property in the config for the class:
     ...
     iconCls: 'my-icon'

// css class that specifies background image to be used as the icon image:
.my-icon { background-image: url(../images/my-icon.gif) 0 6px no-repeat !important; }
Panel
id : String
当前组件唯一的id(默认为auto-assigned id)...

当前组件唯一的id(默认为auto-assigned id)。 如果你需要在以后访问组件，而又没有一个有效的组件对象引用，那么你需要指定一个 id( 也就是，使用Ext. getCmp方法 )。

注意，此id也将被用作组件底层HTML标签的id，这些标签被渲染到页面中。 这将允许你编写基于id的CSS规则，以独立地描述指定的实例；并且，也可以通过 组件父标签的id选中子元素。

注意:为了避免与唯一的id 产生重复， 请参见 itemId 和 ref 。

注意: 如需访问一个元素的容器，参见 ownerCt 。

Component
initHidden : Boolean
当show方法显式地调用,如果该值设置为true将隐藏窗口(默认为true)。
Window
itemCls : String
注意: 只有在当前组件被渲染到一个使用FormLayout 布局的 容器中时此配置才有效...

注意: 只有在当前组件被渲染到一个使用FormLayout 布局的 容器中时此配置才有效。 (例如Ext.form.FormPanel 或者指定 layout:'form')。

一个附加的CSS类，应用到div上，包装当前field的表单元素。 如果提供了此参数， field级上的itemCls将会覆盖 container级上提供的 默认itemCls。 为itemCls指定的值将会被添加默认的 类('x-form-item')。

既然它被应用到项目的包装器上(参见 Ext.layout.FormLayout。 fieldTpl)， 它将允许你编写能应用到此field、label(如果有指定)、或者field内部任何其它元素的标准CSS规则。

注意: 参考 fieldLabel的注释。 .

示例用法:

// Apply a style to the field's label:
<style>
    .required .x-form-item-label {font-weight:bold;color:red;}
</style>

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Name',
        itemCls: 'required' //this label will be styled
    },{
        xtype: 'textfield',
        fieldLabel: 'Favorite Color'
    }]
});
Component
itemId : String
当没有可利用的对象引用时，itemId可以作为第二选择，用来获得一个组件的引用， 代替 ...

当没有可利用的对象引用时，itemId可以作为第二选择，用来获得一个组件的引用， 代替 id 与 Ext. getCmp的组合， 使用 itemId 与 Ext.Container. getComponent 方法配合将会获得 itemId 's（的所有者） 或者 id 's（的所有者）。 既然 itemId 's（的所有者）是一个到容器内部MixedCollection的索引， itemId 的作用域就被限定在容器之内---避免与 Ext.ComponentMgr 产生潜在的冲突，它（指Ext.ComponentMgr）需要一个 唯一的 id 。

var c = new Ext.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'); // 与 Ext.getCmp()不同

p2 = p1.ownerCt.getComponent('p2'); // 通过兄弟对象获得引用

另请参见 id 和 ref 。

注意:需要访问一个item的容器请参见 ownerCt 。

Component
items : MixedCollection
当前容器中的子组件集合 Ext.util.MixedCollection
Container
keys : Object/Array
一个Ext.KeyMap 配置对象 (其格式为Ext.KeyMap.addBinding 所期望的值...
一个Ext.KeyMap 配置对象 (其格式为Ext.KeyMap.addBinding 所期望的值，用来向当前panel上绑定自定义的按键处理(默认为 null )
Panel
labelSeparator : String
每个fieldLabel 文本后面现实的分隔符。 此属性可以在多个层次上进行配置...

每个fieldLabel 文本后面现实的分隔符。 此属性可以在多个层次上进行配置。优先顺序为：

  • field / component level
  • container level
  • layout level (默认为冒号 ':')
如不需要为当前field的label显示分隔符，指定一个空字符串''即可。

注意:参见 clearCls 的注释。

另请参见 hideLabel 和 Ext.layout.FormLayout。 fieldTpl。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    layoutConfig: {
        labelSeparator: '~'   // layout config has lowest priority (defaults to ':')
    },
    labelSeparator: '>>',     // config at container level
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Field 1',
        labelSeparator: '...' // field/component level config supersedes others
    },{
        xtype: 'textfield',
        fieldLabel: 'Field 2' // labelSeparator will be '='

    }]
});
Component
labelStyle : String
一个CSS样式描述字符串，它将直接应用到当前field的label上...

一个CSS样式描述字符串，它将直接应用到当前field的label上。 如果有设置，默认为容器的labelStyle值(例如 Ext.layout.FormLayout.labelStyle , 或者 '')。

注意:参见 clearCls 的注释。

另请参见 hideLabel 和 Ext.layout.FormLayout. fieldTpl。

示例用法:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Name',
        labelStyle: 'font-weight:bold;'
    }]
});
Component
layout : String/Object
*重要: 为了让子项目能被正确地调整尺寸和位置， 典型地，必须通过 layout 配置项指定一个布局管理器。...

*重要: 为了让子项目能被正确地调整尺寸和位置， 典型地，必须通过 layout 配置项指定一个布局管理器。

调整子items的尺寸和位置 是容器的布局管理器的职责，它负责创建和管理你想要的那种布局类型。 例如:

new Ext.Window({
    width:300, height: 300,
    layout: 'fit', // explicitly set layout manager: override the default (layout:'auto')
    items: [{
        title: 'Panel inside a Window'
    }]
}).show();

如果没有为一个通用的容器(例如Container或者Panel)特别指定 layout ，将会使用default layout manager ，它除了将子组件按顺序渲染到容器中之外什么事情都不做( 这种情况下不会发生调整尺寸和位置的操作)。 一些容器类内部指定了一个默认的布局 (例如FormPanel指定了 layout: 'form' )。 另一些有特殊用途的类内部指定/管理它们内置的布局( 例如GridPanel, TabPanel, TreePanel, Toolbar, Menu等等)。

layout 既可以通过一个对象或者一个字符串指定:

  • 用一个对象指定
    • 示例用法:
      • layout: {
    type: 'vbox',
    padding: '5',
    align: 'left'
}
    • type

      • 当前容器需要使用的布局类型。 如果不指定，将创建并使用一个默认的 Ext.layout.ContainerLayout 。

      可用的布局 type 值是:

      • absolute
      • accordion
      • anchor
      • auto Default
      • border
      • card
      • column
      • fit
      • form
      • hbox
      • menu
      • table
      • toolbar
      • vbox
    • 布局描述配置参数

      • 也可以指定附加的布局描述配置。 关于每个布局类型可用配置选项完整的细节，参见 type 参数指定的相关布局类。

  • 通过一个字符串指定
    • 示例用法:
      • layout: 'vbox',
layoutConfig: {
    padding: '5',
    align: 'left'
}
    • layout

      • 当前容器使用的布局 type ( 可用的布局类型值参见上述列表)。

    • layoutConfig

      • 附件的布局描述配置参数。 关于每个布局类型可用配置选项完整的细节，参见 layout 参数指定的相关布局类。

Container
layoutConfig : Object
这是一个配置对象，包含为 layout 指定的参数， 如果 layout 是作为一个 string 来指定的。

Container
listeners : Object
一个包含一个或多个事件处理器的配置对象，会在初始化的时候被添加到目标对象上...

一个包含一个或多个事件处理器的配置对象，会在初始化的时候被添加到目标对象上。 该配置对象应该是一个有效的监听器配置对象就像 addListener例子中指定的一样可一次附加多个处理器。

ExtJs Components上的DOM事件

一些 ExtJs Component 类导出时会选择一些DOM事件(例如 "click", "mouseover" 等等), 这通常只是在有额外的值可以被添加时发生。例如DataView类的 click事件会传递被点击的节点。也可以直接在Component的HTMLElementevent上访问DOM事件，但必需在Component被渲染后监听器才能添加到Element 上。可以按照以下步骤添加插件:

// 插件会用一个监听器配置对象进行配置。
//该组件会被添加到所有处理方法的参数列表上。
Ext.DomObserver = Ext.extend(Object, {
    constructor: function(config) {
        this.listeners = config.listeners ? config.listeners : config;
    },

    // 组件将自己传递进了插件的初始化方法里
    init: function(c) {
        var p, l = this.listeners;
        for (p in l) {
            if (Ext.isFunction(l[p])) {
                l[p] = this.createHandler(l[p], c);
            } else {
                l[p].fn = this.createHandler(l[p].fn, c);
            }
        }

        // 渲染后立即添加监听器到元素上
        c.render = c.render.createSequence(function() {
            var e = c.getEl();
            if (e) {
                e.on(l);
            }
        });
    },

    createHandler: function(fn, c) {
        return function(e) {
            fn.call(this, e, c);
        };
    }
});

var combo = new Ext.form.ComboBox({

    // 元素被点击后折叠
    plugins: [ new Ext.DomObserver({
        click: function(evt, comp) {
            comp.collapse();
        }
    })],
    store: myStore,
    typeAhead: true,
    mode: 'local',
    triggerAction: 'all'
});

Observable
manager : Ext.WindowGroup
一个到 WindowGroup的引用 ，它负责管理此窗口 (默认值为 Ext.WindowMgr).
Window
margins : Object
注:此配置只用于该组件展现在一个使用BorderLayout...

注:此配置只用于该组件展现在一个使用BorderLayout 或 BoxLayout的两个子类之一作为布局的容器。

这个margins对象在该组件中的格式为：

{top: (top margin),right: (right margin),bottom: (bottom margin),left: (left margin)}

也可以是一个字符串，中间用空格分隔，margin值为数字。 把matches中每一个值的次序跟CSS中margin值的排列方式相对应：

  • 如果只有一个值，它适用于所有方面。
  • 如果有两个值，top和bottom的边框设置为第一个值，left和right设置为第二个值。
  • 如果有三个值，top设置为第一个值，left和right设置为第二个值，bottom设置为第三个值。
  • 如果有四个值，分别设置为top, right, bottom, left。

默认值:

{top:0, right:0, bottom:0, left:0}
BoxComponent
maskDisabled : Boolean
true 将会在panel被disabled时进行遮罩,false将不会遮罩它(默认为...
true 将会在panel被disabled时进行遮罩, false 将不会遮罩它(默认为 true )。使用任意一种方法，当被禁用时，panel都将告诉它包含的元素禁用它们自己， 但是遮罩panel可以提供一种额外的视觉效果，用以提示panel被禁用。
Panel
maximizable : Boolean
设置为true将显示'最大化'工具按钮，并允许用户 最大化窗口，false将隐藏按钮并不允许用户...
设置为true将显示'最大化'工具按钮，并允许用户 最大化窗口，false将隐藏按钮并不允许用户 最大化窗口(默认值为 false)。 注意：当窗口被最大化之后，工具按钮将自动变成 一个'恢复'按钮，并且有内置的适当行为支持，此按钮 可以将窗口恢复到其原来的大小。
Window
maximized : Boolean
如果设置为true则初始显示窗口为一个最大化的状态(默认为false)
Window
minButtonWidth : Number
当前panel中所有buttons 最小宽度，像素值(默认为 75 )
Panel
minHeight : Number
当前窗口所允许的最小高度像素数 (默认值为 100)。 只有在resizable = true时有效。
Window
minWidth : Number
当前窗口所允许的最小宽度像素值(默认值为 200)。 只有resizable = true时有效。
Window
minimizable : Boolean
设置为true将显示一个'最小化'工具按钮，并允许 用户最小化窗口；false将隐藏此按钮并禁止最小化窗口...
设置为true将显示一个'最小化'工具按钮，并允许 用户最小化窗口；false将隐藏此按钮并禁止最小化窗口 (默认值为 false)。 注意：此按钮没有提供实现 --- 最小化一个窗口的行为是与具体实现相关的， 所以必须处理最小化事件，并且一个定制的最小化 行为实现是对于此配置项是可用的。
Window
modal : Boolean
设置为true将使窗口成为模态的，并在显示时将其后面的 所有东西罩在一个遮罩中...
设置为true将使窗口成为模态的，并在显示时将其后面的 所有东西罩在一个遮罩中，false将在显示窗口时不限制对 其它UI元素的访问(默认值为 false)。
Window
monitorResize : Boolean
设置为true自动监测window的resize事件，以便处理所有对当前窗口尺寸 敏感的事情。...
设置为true自动监测window的resize事件，以便处理所有对当前窗口尺寸 敏感的事情。 典型地，通过选择一个 layout 来管理这个值，并且不应该手动设置它。
Container
onEsc : Function
允许覆盖对escape键的内置处理。 默认的操作是关闭窗口...
允许覆盖对escape键的内置处理。 默认的操作是关闭窗口 ( 执行何种操作是在 closeAction. 中指定的。 如果需要在按下escape键时阻止关闭窗口，将 此项指定为一个Ext.emptyFn (参见 Ext.emptyFn).
Window
overCls : String
一个可选的额外的CSS类，它将在鼠标移过元素时被添加到组件上...
一个可选的额外的CSS类，它将在鼠标移过元素时被添加到组件上，鼠标移出时 删除。(默认为'')。此属性对于在组件上，或者它的任何使用标准CSS规则的孩子节点上， 添加定制的'active' 或者 'hover'样式非常有用。
Component
padding : Number/String
设置body元素padding样式的快捷方式。 此值既可以是一个数值，被应用到所有侧边...
设置body元素padding样式的快捷方式。 此值既可以是一个数值，被应用到所有侧边，也可以是一个普通的描述padding的 CSS字符串。默认为undefined.
Panel
pageX : Number
如果该组件被包含在一个指定位置的容器中，这个值表示页面级的x坐标值（译者注：在有滚动条的情况下这个值很有用）。
BoxComponent
pageY : Number
如果该组件被包含在一个指定位置的容器中，这个值表示页面级的y坐标值（译者注：在有滚动条的情况下这个值很有用）。
BoxComponent
plain : Boolean
设置为true讲把窗体的body区域用一个透明背景来渲染， 这样它将被融合进框架元素...
设置为true将把窗体的body区域用一个透明背景来渲染， 这样它将被融合进框架元素； false 将添加一个更亮的背景色， 在视觉上高亮显示body元素，并且将它从周围的 框架中明显地区别开来 (默认值为 false)。
Window
plugins : Object/Array
一个对象或者一个对象数组，为组件提供特殊的功能 ...
一个对象或者一个对象数组，为组件提供特殊的功能。 对一个合法的插件唯一的要求是它含有一个init()方法， 能接收一个Ext.Component型的参数。 当组件被创建时，如果有可用的插件，组件将会调用每个插件的init方法， 并将自身的引用作为方法参数传递给它。然后，每个插件就可以调用方法或者响应组件上的事件， 就像需要的那样提供自己的功能。
Component
preventBodyReset : Boolean
默认为 false 。当设置为 true 时， 一个额外的CSS类 'x-panel-normal' 将会被田间到panel的元素， 有效地将W3C(参见 http://www.w3.org/TR/CSS21/sample.html)...
默认为 false 。当设置为 true 时， 一个额外的CSS类 'x-panel-normal' 将会被田间到panel的元素， 有效地将W3C(参见 http://www.w3.org/TR/CSS21/sample.html) 建议的CSS样式应用到Panel的body元素上 (不是header, footer等等)。
Panel
ptype : String
需要创建配置的ptype。 当传递一个配置对象给构造函数时...
需要创建配置的ptype。 当传递一个配置对象给构造函数时，此配置选项不会被使用。 只有在使用懒初始化的时候此配置项才会被使用， 此时Plugin不是 通过一个完整的实例组件，而是通过一个Component配置指定的。 在渲染时，将会查找ptype以决定创建何种类型的Plugin。

如果你创建自己的Plugin，你可以通过 Ext.ComponentMgr.registerPlugin 对它们进行注册，以便能利用懒初始化和渲染机制。
Component
ref : String
一个路径描述，与组件的 ownerCt 相关，它描述了把当前组件的命名引用放置到哪个父容器中去。...

一个路径描述，与组件的 ownerCt 相关，它描述了把当前组件的命名引用放置到哪个父容器中去。

祖先的坐标路径可以通过'/'字符进行分隔。 例如，将一个Toolbar Button的引用放入 拥有此Toolbar的Panel中:

var myGrid = new Ext.grid.EditorGridPanel({
    title: 'My EditorGridPanel',
    store: myStore,
    colModel: myColModel,
    tbar: [{
        text: 'Save',
        handler: saveChanges,
        disabled: true,
        ref: '../saveButton'
    }],
    listeners: {
        afteredit: function() {
//          The button reference is in the GridPanel
            myGrid.saveButton.enable();
        }
    }
});

在上面的代码中，如果 ref 是 'saveButton' ，那么引用将会被放置到Toolbar中。 ref 中的每个'/' 都会从组件的 ownerCt 向上移动一级。

另请参见 added 和 removed 事件。

Component
region : String
注: 此配置只用于该组件展现在一个布局为BorderLayout的容器中...

注: 此配置只用于该组件展现在一个布局为BorderLayout的容器中(例如指定layout:'border')。

详见Ext.layout.BorderLayout。

BoxComponent
renderTo : Mixed
该值可以是一个节点的id、一个DOM节点或者一个已存在的元素...

该值可以是一个节点的id、一个DOM节点或者一个已存在的元素， 组件将会被渲染到其中。

  • 注意 :
      如果组件不是一个Container 的子项目时， 不要使用此选项。 渲染和管理它的子项目是一个Container 的layout manager的责任。
      当使用此配置项时，无需调用render()方法。

另请参见 render 。

Component
resizable : Boolean
设置为true将允许用户拖动每个边缘和角落来 重新设置窗口的大小， false将禁止调整大小 (默认值为 true)。
Window
resizeEvent : String
在布局中进行尺寸调整需要监听的事件。 默认为 'resize' 。
Panel
resizeHandles : String
一个有效的 Ext.Resizable 处理配置字符串(默认值为 'all')。只有在resizable = true时有效。
Window
shadow : Boolean/String
(或者一个有效的Ext.Shadow Ext.Shadow.mode 值)，用来在panel后面显示一个阴影...
true (或者一个有效的Ext.Shadow Ext.Shadow.mode 值)，用来在panel后面显示一个阴影， false 将不会显示阴影(默认为 'sides' )。注意，此选项只有当 floating = true 时才应用。
Panel
shadowOffset : Number
如果显示了阴影，此参数为数值偏移量(默认为 4 )。注意，只有当 floating = true 时此参数才会被应用。...
如果显示了阴影，此参数为数值偏移量(默认为 4 )。注意，只有当 floating = true 时此参数才会被应用。
Panel
shim : Boolean
false将会在需要的浏览器中禁用iframe衬垫(默认为...
false 将会在需要的浏览器中禁用iframe衬垫(默认为 true )。注意，此选项只有在 floating = true 时应用。
Panel
stateEvents : Array
一个事件数组，当它们被触发时，组件需要保存自己的状态(默认值为 none)...

一个事件数组，当它们被触发时，组件需要保存自己的状态(默认值为 none)。 它们可以是任何该组件支持的事件类型，包括浏览器事件和 自定义事件(例如['click', 'customerchange'])。

对于保存和恢复组件状态的详细解释，参见 stateful

Component
stateId : String
为该组件指定的唯一的id值，它被用作管理组件状态的目的...
为该组件指定的唯一的id值，它被用作管理组件状态的目的。 (如果设定了id，默认值为组件自己的id，否则，如果组件使用自动生成的id，此值为null)。

对于保存和反解析组件状态的解释，参见 stateful 。

Component
stateful : Boolean
一个标志参数，它将引起组件在启动时尝试从一个保存的状态中恢复内部状态参数...

一个标志参数，它将引起组件在启动时尝试从一个保存的状态中恢复内部状态参数。 组件必须要么拥有一个 stateId 或者 id ，它们被分配给需要被管理的状态属性。 在跨页面加载时，不保证自动生成的id属性的稳定性， 并且，不能依赖此id来保存和恢复一个组件的相同状态。

为了保存状态的操作能够工作，状态管理器的提供者必须 被设置成一个Ext.state.Provider 的实现类，它覆盖了set 和get 方法，以便保存和恢复name/value对。 有一个内置的Ext.state.CookieProvider 可用。

为当前页面设置状态提供者:

Ext.state.Manager.setProvider(new Ext.state.CookieProvider({
    expires: new Date(new Date().getTime()+(1000*60*60*24*7)), //7 days from now
}));

当 stateEvents 配置项中其中之一的事件被触发时， 一个状态可保存的组件将试图保存其状态。

保存状态时，一个可保存状态的组件首先需要通过调用 getState 方法来序列化它的状态。 默认情况下，此函数什么事都不做。 开发者必须提供一个实现，返回一个hash对象，它描述了组件可恢复的状态。

getState方法产生的值将会传递给 Ext.state.Manager.set 方法，它使用配置的 Ext.state.Provider 来保存对象，以组件的 stateId 为key，或者，如果此值（指stateId）没有指定时， 使用它的 id 作为key。

在进行构造时，一个可保存状态的组件试图通过调用 Ext.state.Manager.get方法来 恢复它的状态，传递 stateId 或者，如果此值（指stateId）没有指定时， 使用它的 id 作为参数。

结果对象被传递给 applyState 。 applyState 的默认实现只是简单地把属性拷贝到对象中， 但是开发者可以覆盖此方法以支持更多行为。

通过向 beforestaterestore, staterestore, beforestatesave 和 statesave 事件上绑定监听器，你可以在保存和恢复状态时进行额外的处理。

Component
style : String
被添加到组件元素的特定样式。 必须是按照...
被添加到组件元素的特定样式。 必须是按照 Ext.Element.applyStyles 类指定格式的合法参数值。

new Ext.Panel({
    title: 'Some Title',
    renderTo: Ext.getBody(),
    width: 400, height: 300,
    layout: 'form',
    items: [{
        xtype: 'textarea',
        style: {
            width: '95%',
            marginBottom: '10px'
        }
    },
        new Ext.Button({
            text: 'Send',
            minWidth: '100',
            style: {
                marginBottom: '10px'
            }
        })
    ]
});
Component
tabTip : String
注: 这个配置只用于当该组件作为TabPanel的一个子项目时使用...

注: 这个配置只用于当该组件作为TabPanel的一个子项目时使用。

一个String类型的innerHTML(支持html标签)，当鼠标放在该选项上的时，显示一个tooltip。为了tips能够被渲染，Ext.QuickTips.init()必须被提前调用。
BoxComponent
tbar : Object/Array
panel的顶部工具栏。 此参数可以是一个 The top toolbar of the panel. This can be a Ext.Toolbar 对象、一个工具栏配置、或者一个被添加到工具栏的...

panel的顶部工具栏。 此参数可以是一个 The top toolbar of the panel. This can be a Ext.Toolbar 对象、一个工具栏配置、或者一个被添加到工具栏的buttons/button配置数组。 注意，在渲染之后此参数无效。如需在渲染之后访问顶部工具栏，请使用 getTopToolbar。

注意:尽管Toolbar可以包含Field组件，但它们不会 通过加载祖先FormPanel而被更新。Panel的工具栏不是标准Container->Component 层次的一部分，所以它们不会被扫面以收集表单项。但是，这些值还是会 被提交，因为提交表单的参数是从DOM树中收集的。

Panel
tbarCfg : Object
一个DomHelper 元素的配置对象，描述了当前Panel的tbar元素结构。 另请参见...

一个DomHelper 元素的配置对象，描述了当前Panel的tbar元素结构。 另请参见 bodyCfg 。

Panel
title : String
被用作innerHTML的标题文本(接受html标签) ，用来显示在panel的...
被用作innerHTML的标题文本(接受html标签) ，用来显示在panel的 header 中(默认为'')。 当 title 被指定时， header 元素将会被自动创建并显示，除非 header 被显式地设置为 false 。 如果你不在配置时指定一个 title ， 但是你想以后设置，你必须要么 指定一个非空的 title (一个空格' ' 也可以)或者指定 header:true ，这样容器元素将会被创建。
Panel
titleCollapse : Boolean
将会允许通过在顶部工具条的任意地方点击展开和折叠panel(当...
true 将会允许通过在顶部工具条的任意地方点击展开和折叠panel(当 collapsible = true )， false ) 将会只允许通过点击工具按钮进行操作(默认为 false ))。如果当前panel是border布局中的一个子项目，另请参见 BorderLayout.Region floatable 配置项。
Panel
toolTemplate : Ext.Template/Ext.XTemplate
用来在header 元素中创建tools 的模板。默认为:...

用来在header 元素中创建tools 的模板。默认为:

                                    new Ext.Template('<div class="x-tool x-tool-{id}">&#160;</div>')

可以覆盖此参数，以便为基于更复杂XTemplate的tools提供自定义的DOM结构。 模板的数据为一个简单的tool配置对象(不是整个Array)， 它在 tools配置项指定。 在以下例子中，当鼠标滑过tool时，一个<a>标签被用来提供视觉效果:

var win = new Ext.Window({
    tools: [{
        id: 'download',
        href: '/MyPdfDoc.pdf'
    }],
    toolTemplate: new Ext.XTemplate(
        '<tpl if="id==\'download\'">',
            '<a class="x-tool x-tool-pdf" href="{href}"></a>',
        '</tpl>',
        '<tpl if="id!=\'download\'">',
            '<div class="x-tool x-tool-{id}">&#160;</div>',
        '</tpl>'
    ),
    width:500,
    height:300,
    closeAction:'hide'
});

注意，CSS类'x-tool-pdf'必须拥有一个关联的样式规则，它提供了一个适当的背景图片， 例如:

                                a.x-tool-pdf {background-image: url(../shared/extjs/images/pdf.gif)!important;}
Panel
tools : Array
一个工具按钮配置数组，用来添加到头部工具区域。 当渲染之后，每个工具都被存储为一个Element ，被一个叫做...
一个工具按钮配置数组，用来添加到头部工具区域。 当渲染之后，每个工具都被存储为一个Element ，被一个叫做 tools. <tool-type> 的公共参数引用。

每个工具配置都可以包含如下参数:

  • id : String
    必须。需要创建的工具类型。默认情况下，这被指定为一个 CSS类，格式为 x-tool- <tool-type> ，用来形成工具Element。 对于以下列出的工具类型，Ext提供了CSS规则，和一个包含图片的icon对象。 通过提供可选的CSS规则和背景图片，开发者可以实现自定义的工具:
      toggle (当collapsible 为 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
    • tc : Object
      工具配置对象
  • stopEvent : Boolean
    默认为true。指定为false可以允许点击事件进行冒泡。
  • scope : Object
    调用处理函数的作用域。
  • qtip : String/Object
    一个tip字符串，或者一个提供给 Ext.QuickTip.register 的配置参数
  • hidden : Boolean
    True将会在初始化时渲染成隐藏的。
  • on : Object
    一个监听器配置对象，以addListener所需的参数格式 指定事件监听器

注意，当panel被折叠时提供部分固定的工具，这些工具仅仅提供可视按钮。 所有必备的功能，都必须通过添加实现了必备行为的处理函数来实现。

示例用法:

tools:[{
    id:'refresh',
    qtip: 'Refresh form Data',
    // hidden:true,
    handler: function(event, toolEl, panel){
        // refresh logic
    }
},
{
    id:'help',
    qtip: 'Get Help',
    handler: function(event, toolEl, panel){
        // whatever
    }
}]

对于自定义 'help' 的id，定义了两个相应的css类，拥有一个到15x15图片的链接:

                                .x-tool-help {background-image: url(images/help.png);}
.x-tool-help-over {background-image: url(images/help_over.png);}
// if using an image sprite:
.x-tool-help {background-image: url(images/help.png) no-repeat 0 0;}
.x-tool-help-over {background-position:-15px 0;}
Panel
tpl : Mixed
一个 Ext.Template , Ext.XTemplate 或者一个用来形成一个Ext.XTemplate的字符串数组...
一个 Ext.Template , Ext.XTemplate 或者一个用来形成一个Ext.XTemplate的字符串数组。 与 data 和 tplWriteMode 配置项协同使用。
Component
tplWriteMode : String
刷新组件的内容区域时使用的Ext.(X)Template方式。 默认为'overwrite' (参见 Ext.XTemplate.overwrite )。
刷新组件的内容区域时使用的Ext.(X)Template方式。 默认为'overwrite' (参见 Ext.XTemplate.overwrite )。
Component
unstyled : Boolean
覆盖 baseCls 设置为 baseCls = 'x-plain' ， 除了必须的属性之外，它将panel渲染成无样式的...
覆盖 baseCls 设置为 baseCls = 'x-plain' ， 除了必须的属性之外，它将panel渲染成无样式的，以便Ext布局功能能起作用 (例如overflow:hidden)。
Panel
width : Number
组件的宽度(默认值为 auto)。注:如果想使用百分比的方式...
组件的宽度(默认值为 auto)。注:如果想使用百分比的方式来设置值，请查看 Ext.Component.anchor。
BoxComponent
x : Number
在初始化显示时窗口顶部边缘的X位置。 默认将窗口显示在其容器高度的正中间。
在初始化显示时窗口顶部边缘的Y位置。 默认将窗口显示在其容器 {@link Ext.Element Element)(窗口所渲染到的元素) 高度的正中间。
Window
xtype : String
需要创建配置的xtype。 当传递一个配置对象给构造函数时...
需要创建配置的xtype。 当传递一个配置对象给构造函数时，此配置选项不会被使用。 只有在使用懒初始化的时候此配置项才会被使用，此时容器的子项目不是 通过一个完整的实例组件，而是通过一个Component配置指定的。 在渲染时，将会查找xtype以决定创建何种类型的子组件。

预定义的xtype列表如下： here。

如果你继承Component创建你自己的组件，你需要使用Ext.ComponentMgr.registerType 对它们进行注册，以便利用懒初始化和渲染机制。
Component
y : Number
在初始化显示时窗口顶部边缘的Y位置。 默认将窗口显示在其容器高度的正中间
在初始化显示时窗口顶部边缘的Y位置。 默认将窗口显示在其容器 {@link Ext.Element Element)(窗口所渲染到的元素) 高度的正中间。
Window

公共属性

Property Defined By
body : Ext.Element
Panel的body Element ，可以用来包含HTML内容。 内容可以在...
Panel的body Element ，可以用来包含HTML内容。 内容可以在html 配置项中指定，或者可以使用autoLoad 配置项被加载，或者通过Panel的Updater提供。 只读。

如果这被用来通过任意方式加载可视的HTML元素，那么Panel不可以被用作 一个Layout，用来容纳其它Panel。

如果当前Panel期望被用作一个Layout的宿主 (参见 layout) 那么body元素必须不能被加载或者改变---因为它处于Panel的Layout的控制 之下。

注意: 另请参见 el .

Panel
buttons : Array
Panel的按钮数组，它们从 buttons 配置属性创建。只读。
Panel
bwrap : Ext.Element
Panel的bwrapElement ，用来包含其它Panel元素(tbar, body, bbar, footer)。 参见 bodyCfg。 只读。
Panel
collapsed : Boolean
如果当前panel被折叠为true。只读。
Panel
dd : Ext.dd.DD
如果当前窗口被配置成draggable, 此属性将会包含一个..

如果当前窗口被配置成 draggable, ，此属性将会包含一个 Ext.dd.DD 实例，它负责处理拖动窗口的DOM元素。

startDrag , onDrag and endDrag 是它的继承属性，能操作拖拽动作。如果需要其他的操作则可以用 createInterceptor 或者 createSequence 以扩展已存在继承属性.

Window
disabled : Boolean
当前组件处于无效状态时为true。 Read-only.
Component
el : Ext.Element
封装了当前组件的Ext.Element。 Read-only。通常情况下，这将是一个<DIV>元素，它由此类的...

封装了当前组件的Ext.Element。 Read-only。

通常情况下，这将是一个<DIV>元素，它由此类的 onRender方法创建，但是它可以通过使用 autoEl 配置项进行覆盖。

注意: 直到组件渲染完成此元素都将处于无效状态。

如需向当前组件的 DOM事件(而不是当前组件自己的Observable事件)添加监听器， 更多建议，参见 listeners 配置项，或者直接使用一个render监听器:

new Ext.Panel({
    title: 'The Clickable Panel',
    listeners: {
        render: function(p) {
            // Append the Panel to the click handler's argument list.
            p.getEl().on('click', handlePanelClick.createDelegate(null, [p], true));
        },
        single: true  // Remove the listener after first invocation
    }
});

另请参见 getEl

Component
footer : Ext.Element
Panel底部Element 。只读。此元素被用来容纳Panel的...
Panel底部Element 。只读。

此元素被用来容纳Panel的 buttons 或者 fbar 。

注意: 另请参见 el 的注释。

Panel
header : Ext.Element
Panel的headerElement. 只读。此元素被用来容纳 title和 tools...
Panel的headerElement. 只读。

此元素被用来容纳 title和 tools

注意: 另请参见 el 的注释。

Panel
hidden : Boolean
如果当前组件处于隐藏状态，此值为true。Read-only。
Component
initialConfig : Object
当前组件的初始化配置描述。 Read-only。
Component
items : MixedCollection
当前容器中的子组件集合 Ext.util.MixedCollection
Container
onHide : Object
当 hide 事件触发前此事件被调用，默认为 Ext.emptyFn .
Window
onShow : Object
在 show 事件触发之前此方法被调用，默认为 Ext.emptyFn .
Window
ownerCt : Ext.Container
组件所属的Container (默认为undefined，当前组件被添加到一个容器中时此值被自动设置)...
组件所属的Container (默认为undefined，当前组件被添加到一个容器中时此值被自动设置)。 Read-only。

注意: 如需访问容器中的子组件，参见 itemId 。

Component
private : Object
我们只能在一块可见的区域进行布局。 布局目标*或者它的任何父元素* 为...
我们只能在一块可见的区域进行布局。 布局目标*或者它的任何父元素* 为display:none， 将意味着它没有一块可见的区域。
Container
refOwner : Ext.Container
如果当前组件是一个容器的孩子，并且是通过一个 ref 配置项被注册的，则此值为 ref 引用被插入到的祖先容器。
如果当前组件是一个容器的孩子，并且是通过一个 ref 配置项被注册的，则此值为 ref 引用被插入到的祖先容器。
Component
rendered : Boolean
如果当前组件已经被渲染了，此值为true。Read-only.
Component

公共方法

Method Defined By
Window ( Object config )
参数:
  • config : Object
    配置对象
返回值:
  • void
Window
add ( ...Object/Array component ) : Ext.Component/Array
向当前容器中添加 Component(s)。 描述 :在添加之前触发 beforeadd 事件...

向当前容器中添加 Component(s)。

描述 :

  • 在添加之前触发 beforeadd 事件
  • 将会相应地应用 容器的default config values (细节参见 defaults )。
  • 在组件添加之后触发 add 事件。

注意 :

  • 当调用 add 时如果容器已经被渲染， 你可能需要调用 doLayout 方法来刷新视图，它将导致所有尚未渲染的子组件进行渲染操作。 此操作是必须的，这样你可以 add 多个子组件而只刷新一次layout。 示例用法:

var tb = new Ext.Toolbar();
tb.render(document.body);  // toolbar is rendered
tb.add({text:'Button 1'}); // add multiple items (defaultType for Toolbar is 'button')
tb.add({text:'Button 2'});
tb.doLayout();             // refresh the layout
  • 警告: 使用BorderLayout布局的容器可能不能删除或者添加组件。 更多细节参见BorderLayout 的注释。
参数:
  • component : ...Object/Array

    需要添加的一个或多个组件，或者是一个组件数组。 更多信息参见 items 。

返回值:
  • Ext.Component/Array
    被添加的组件。
Container
addButton ( String/Object config , Function handler , Object scope ) : Ext.Button
向当前panel中添加一个按钮。注意，此方法必须在渲染之前调用。 首选的方式是通过...
向当前panel中添加一个按钮。注意，此方法必须在渲染之前调用。 首选的方式是通过buttons 配置项添加按钮。
参数:
  • config : String/Object
    一个合法的Ext.Button 配置。字符串将会变成默认按钮配置文本，对象将会被看做一个按钮配置对象。
  • handler : Function
    在按钮Ext.Button.click 时被调用的函数
  • scope : Object
    作用域( this 引用)，按钮处理函数将会在其中被执行。默认为Button.
返回值:
  • Ext.Button
    被添加的按钮
Panel
addClass ( string cls ) : Ext.Component
为组件底层的元素添加CSS样式。
为组件底层的元素添加CSS样式。
参数:
  • cls : string
    需要添加的CSS样式的class名称
返回值:
  • Ext.Component
    this
Component
addEvents( Object|String o, string Optional. ) : void
添加指定的事件到事件列表上，事件会被该Observable触发。
添加指定的事件到事件列表上，事件会被该Observable触发。
参数:
  • o : Object|String
    以事件名作为属性true作为值的对象 或者当多个事件名被分开的传递时则为第一个事件名。
  • Optional. : string
    事件名被分开的传递时则为事件名。 用法:
    this.addEvents('storeloaded', 'storecleared');
返回值:
  • void
Observable
addListener( String eventName, Function handler, [Object scope], [Object options] ) : void
给对象添加事件处理器。
给对象添加事件处理器。
参数:
  • eventName : String
    监听的事件名。
  • handler : Function
    事件调用的方法
  • scope : Object
    （可选）处理方法执行的作用域 (this的引用 reference)。 如果被忽略。默认为触发事件的对象。
  • options : Object
    （可选）包含处理器配置和属性的对象。 可能包含以下的属性:
    • scope : Object
      处理方法执行的作用域(this的引用) 。 如果被忽略。默认为触发事件的对象。
    • delay : Number
      在触发事件后延迟调用处理器的毫秒数。
    • single : Boolean
      如果为True则添加一个处理器来处理下一次的事件触发（仅一次），然后移除自己。
    • buffer : Number
      使得处理器延迟指定毫秒数后预定的运行在 一个Ext.util.DelayedTask中 。 如果事件在时间内再一次被触发，原始的处理器不会被调用，但是新的处理器会预定的在他的位置上。
    • target : Observable
      如果事件在目标的Observable上触发则仅仅调用处理器， 否则 事件会从子类的Observable上冒泡

    组合选项
    使用这些选项参数,可能会组合出不同类型的监听器：

    一个延迟的，一次性的监听器。

    myDataView.on('click', this.onClick, this, {
single: true,
delay: 100
});

    一次调用附加多个处理器
    该方法同样支持传递一个包含指定的多个处理器的属性的配置对象参数。

    myGridPanel.on({
'click' : {
    fn: this.onClick,
    scope: this,
    delay: 100
},
'mouseover' : {
    fn: this.onMouseOver,
    scope: this
},
'mouseout' : {
    fn: this.onMouseOut,
    scope: this
}
});

    或者一个简写的语法：

    myGridPanel.on({
'click' : this.onClick,
'mouseover' : this.onMouseOver,
'mouseout' : this.onMouseOut,
 scope: this
});
返回值:
  • void
Observable
alignTo ( Mixed element , String position , [ Array offsets ] ) : Ext.Window
将窗口对齐到指定的元素
将窗口对齐到指定的元素
参数:
  • element : Mixed
    需要对齐到的元素。
  • position : String
    (可选，默认为"tl-bl?")需要对齐到的位置 (更多细节参见 Ext.Element.alignTo )。
  • offsets : Array
    (可选)根据[x, y]偏移位置
返回值:
  • Ext.Window
    this
Window
anchorTo ( Mixed element , String position , [ Array offsets ], [ Boolean/Number monitorScroll ] ) : Ext.Window
将当前窗口锚定到另一个元素，当窗口被调整大小或者滚动时重新对齐。
将当前窗口锚定到另一个元素，当窗口被调整大小或者滚动时重新对齐。
参数:
  • element : Mixed
    需要对齐到的元素。
  • position : String
    需要对齐到的位置(更多细节参见 Ext.Element.alignTo )
  • offsets : Array
    (可选)根据[x, y]便宜位置
  • monitorScroll : Boolean/Number
    (可选)True将会监控body的滚动并重新定位。 如果此参数是一个数字，它将会被用作缓冲延迟 (默认为50ms)。
返回值:
  • Ext.Window
    this
Window
applyToMarkup ( String/HTMLElement el ) : void
将此组件添加到已存在的有效的HTML标签中。 使用该方法时，无需再调用render()方法。
将此组件添加到已存在的有效的HTML标签中。 使用该方法时，无需再调用render()方法。
参数:
  • el : String/HTMLElement
返回值:
  • void
Component
bubble ( Function fn , [ Object scope ], [ Array args ] ) : Ext.Container
沿着component/container继承结构进行冒泡， 在每个组件上调用指定的函数。 所调用函数的作用域...
沿着component/container继承结构进行冒泡， 在每个组件上调用指定的函数。 所调用函数的作用域( this)将会是 指定的作用域或者是当前组件。 如果在函数任何一点上返回false，即停止冒泡过程
参数:
  • fn : Function
    需要调用的函数
  • scope : Object
    (可选) 函数的作用域(默认为当前节点)
  • args : Array
    (可选) 调用函数时需要传递的参数( 默认传递当前组件)
返回值:
  • Ext.Container
    this
Container
cascade ( Function fn , [ Object scope ], [ Array args ] ) : Ext.Container
从当前组件(第一个被调用的组件)开始，沿着component/container的继承树向下回溯...
从当前组件(第一个被调用的组件)开始，沿着component/container的继承树向下回溯， 在每个组件上调用指定的方法， 调用方法时的(this)作用域为指定的scope或者为当前组件。 传递给方法的参数为传递进来args或者当前组件。 在起泡的任意一个节点上，如果function返回false，即停止在那个分支上。
参数:
  • fn : Function
    需要调用的函数
  • scope : Object
    (可选)函数的作用域(默认为当前组件)
  • args : Array
    (可选) 调用函数时传递的参数 (默认传递当前组件)
返回值:
  • Ext.Container
    this
Container
center () : Ext.Window
将窗口设置到视图区的正中间
将窗口设置到视图区的正中间
参数:
  • 无。
返回值:
  • Ext.Window
    this
Window
clearAnchor () : Ext.Window
从当前的window清除所有已存在的anchor。参照anchorTo
从当前的window清除所有已存在的anchor。参照 anchorTo.
参数:
  • 无。
返回值:
  • Ext.Window
    this
Window
cloneConfig ( Object overrides ) : Ext.Component
默认使用原先传递给当前实例的配置值克隆当前组件。
默认使用原先传递给当前实例的配置值克隆当前组件。
参数:
  • overrides : Object
    一个新的配置项，包含需要覆盖到克隆版本的所有属性。 可以传递一个id参数给此对象，否则将自动生成一个新的id以避免发生重复。
返回值:
  • Ext.Component
    当前组件的克隆副本
Component
close () : void
关闭窗口，从DOM中删除它，并销毁窗口对象。 在关闭之前触发beforeclose事件，如果事件处理器返回...

在关闭之前触发beforeclose事件，如果事件处理器返回false则取消关闭操作 Closes the Window, removes it from the DOM, 销毁window对象 和所有子控件. 在关闭之前触发 beforeclose事件 如果事件处理器返回false则取消关闭操作

注: 此方法不会被 closeAction 设置影响，仅当点击 'close'顶部按钮有影响. 如果要隐藏window并不销毁,调用 hide方法.

参数:
  • 无。
返回值:
  • void
Window
collapse ( Boolean animate ) : Ext.Panel
折叠panel的body，这样它就变成隐藏的。 触发beforecollapse 事件...
折叠panel的body，这样它就变成隐藏的。 触发beforecollapse 事件，处理函数返回false可以取消折叠操作。
参数:
  • animate : Boolean
    True将会在变换时使用动画效果，其它为false( 默认为panel的animCollapse 配置项的值)
返回值:
  • Ext.Panel
    this
Panel
destroy () : void
通过如下方法销毁对象：删除所有的事件监听器、将组件的元素从DOM树中删除...
通过如下方法销毁对象：删除所有的事件监听器、将组件的元素从DOM树中删除（如果可以）、 将组件从它的 Ext.Container（如果可用）中删除、 并且将它从Ext.ComponentMgr中 注销。 销毁操作一般由框架自动完成，一般情况下不需要直接调用该方法。
参数:
  • 无。
返回值:
  • void
Component
disable () : Ext.Component
将组件置为无效状态，并出发'disable'事件。
将组件置为无效状态，并出发'disable'事件。
参数:
  • 无。
返回值:
  • Ext.Component
    this
Component
doLayout ( [ Boolean shallow ], [ Boolean force ] ) : Ext.Container
强制容器的布局进行重新计算。 在向一个已经渲染的容器中添加...
强制容器的布局进行重新计算。 在向一个已经渲染的容器中添加一个新的组件， 或者改变子组件的尺寸/位置参数之后，必须调用此函数。
参数:
  • shallow : Boolean
    (可选) 设置为true时将仅仅计算当前组件的布局， 并且让子组件在需要时自动计算布局 (默认为flase，它将递归地调用每个子容器的doLayout方法)
  • force : Boolean
    (可选) 设置为true将强制进行布局，即使项目是隐藏的也进行。
返回值:
  • Ext.Container
    this
Container
enable () : Ext.Component
将组件置为有效状态并触发'enable'事件。
将组件置为有效状态并触发'enable'事件。
参数:
  • 无。
返回值:
  • Ext.Component
    this
Component
enableBubble( String/Array events ) :void
是否现在使得事件会被该Observable触发并调用 this.getBubbleTarget()方法在拥有者的继承树...

是否现在使得事件会被该Observable触发并调用 this.getBubbleTarget()方法在拥有者的继承树中冒泡。Observable的基础类中没有该方法的实现。

该方法一般被Ext.Components用来冒泡事件到拥有者的容器。参看Ext.Component.getBubbleTarget默认的实现 在Ext.Component中返回组件的直接拥有者。但是如果需要的是一个已知的目标，该方法可以被重写来更快的访问需求的目标。

例子:

Ext.override(Ext.form.Field, {
    // 添加方法到Field的initComponent上改变事件为冒泡
    initComponent : Ext.form.Field.prototype.initComponent.createSequence(function() {
        this.enableBubble('change');
    }),

    // 我们知道我们想让Field的事件冒泡到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() {
            // 如果样式被修改标题会变红。
            myForm.header.setStyle('color', 'red');
        }
    }
});
参数:
  • events : String/Array
    冒泡的事件名，或事件名数组
返回值:
  • void
Observable
expand ( Boolean animate ) : Ext.Panel
展开panel的body以便让其变得可见。 触发beforeexpand 事件...
展开panel的body以便让其变得可见。 触发beforeexpand 事件，如果它返回false将会取消展开操作。
参数:
  • animate : Boolean
    True将会在变换过程中使用动画效果，否则为false (默认为panel的 animCollapse 配置项的值)
返回值:
  • Ext.Panel
    this
Panel
find ( String prop , String value ) : Array
根据属性查找当前容器中任何层次上的组件
根据属性查找当前容器中任何层次上的组件
参数:
  • prop : String
  • value : String
返回值:
  • Array
    Ext.Component数组
Container
findBy ( Function fn , [ Object scope ] ) : Array
根据一个自定义的函数，查找当前容器中任意层级上的一个组件。 如果传递的函数返回true...
根据一个自定义的函数，查找当前容器中任意层级上的一个组件。 如果传递的函数返回true，组件将会被包含在结果中。 函数将会被用如下参数(component, this container)进行调用。
参数:
  • fn : Function
    需要调用的函数
  • scope : Object
    可选
返回值:
  • Array
    Ext.Component数组
Container
findById ( String id ) : Ext.Component
通过id查找容器中位于任何层级上的组件
通过id查找容器中位于任何层级上的组件
参数:
  • id : String
返回值:
  • Ext.Component
Container
findByType ( String/Class xtype , [ Boolean shallow ] ) : Array
根据xtype或者类型，查找当前容器中任何层级上的组件
根据xtype或者类型，查找当前容器中任何层级上的组件
参数:
  • xtype : String/Class
    组件的xtype字符串，或者直接是组件的class类型
  • shallow : Boolean
    (可选) 此参数为flase时将检查当前组件是否是指定xtype的后裔 (这是默认情况)，或者设置为true， 将检查当前组件是否直接是指定xtype类型（译者注：即指不按照多态性进行检查）。
返回值:
  • Array
    Ext.Component数组
Container
findParentBy ( Function fn ) : Ext.Container
通过自定义的函数查找当前组件上层任何层次上的容器...
通过自定义的函数查找当前组件上层任何层次上的容器。 如果传递的函数返回true，容器对象将被返回。
参数:
  • fn : Function
    自定义的函数，使用如下参数调用(container,this component)。
返回值:
  • Ext.Container
    自定义函数返回true的第一个容器
Component
findParentByType ( String/Class xtype ) : Ext.Container
通过xtype或者class查找当前组件上层任何层次上的容器
通过xtype或者class查找当前组件上层任何层次上的容器
参数:
  • xtype : String/Class
    组件的xtype字符串，或者直接是组件的class
返回值:
  • Ext.Container
    符合指定xtype或者class的第一个容器
Component
fireEvent( String eventName, Object... args ) : Boolean
用传入的参数触发指定的事件 (减去事件名)。 一个事件可以被设置为冒泡 Obse...

用传入的参数触发指定的事件 (减去事件名)。

一个事件可以被设置为冒泡到Observable父类继承树(参看 Ext.Component.getBubbleTarget) 调用enableBubble实现。

参数:
  • eventName : String
    触发的事件名。
  • args : Object...
    传递给处理器的可变长度参数。
返回值:
  • Boolean
    如果有任何的处理器返回false则返回false，否则返回true。
Observable
focus () : void
聚焦到窗口。 如果设置了一个defaultButton， 它将会接收焦点，否则窗口本身将接收焦点。
聚焦到窗口。 如果设置了一个defaultButton， 它将会接收焦点，否则窗口本身将接收焦点。
参数:
  • 无。
返回值:
  • void
Window
get ( String/Number key ) : Ext.Component
获取当前容器包含的一个组件( items.get(key)方法的别名)
获取当前容器包含的一个组件( items.get(key)方法的别名)
参数:
  • key : String/Number
    组件的索引
返回值:
  • Ext.Component
    Ext.Component
Container
getBottomToolbar () : Ext.Toolbar
返回panel底部区域toolbar ( bbar )。
返回panel底部区域toolbar ( bbar )。
参数:
  • 无。
返回值:
  • Ext.Toolbar
    toolbar
Panel
getBox ( [ Boolean local ] ) : Object
获取组件底层元素当前盒子模型的尺寸。（译者注：盒子模型是CSS术语，详细解释请自行搜索。）
获取组件底层元素当前盒子模型的尺寸。（译者注：盒子模型是CSS术语，详细解释请自行搜索。）
参数:
  • local : Boolean
    (可选)值为true时，组件的left值和top值将代替页面的XY被返回。(默认值为false)
返回值:
  • Object
    返回值的格式{x, y, width, height}
BoxComponent
getBubbleTarget () : Ext.Container
为Observable的fireEvent方法提供链接，它沿着继承结构进行冒泡操作。
为Observable的fireEvent方法提供链接，它沿着继承结构进行冒泡操作。
参数:
  • 无。
返回值:
  • Ext.Container
    拥有当前组件的容器。
Component
getComponent ( String/Number comp ) : Ext.Component
检查当前容器的 items property 并且获取当前容器的一个直接的子组件。
检查当前容器的 items property 并且获取当前容器的一个直接的子组件。
参数:
  • comp : String/Number
    参数可以是以下任何值：
    • 一个 String : 代表子组件的 itemId 或者 id
    • 一个 Number : 代表子组件在 items property 中的位置

    其它信息参见 Ext.util.MixedCollection.get。

返回值:
  • Ext.Component
    组件(如果有找到)。
Container
getEl () : Ext.Element
返回 Ext.Element ，它包装了当前组件。...

返回 Ext.Element ，它包装了当前组件。

通常情况下，这将是一个<DIV>元素，它是由该类的onRender方法创建的， 但是可以使用autoEl配置项 覆盖它。

注意: 此元素将会一直处于无效状态直到当前组件渲染完成。

如需向当前组件的 DOM事件(而不是当前组件自己的Observable事件)添加监听器， 更多建议，参见 listeners 配置项，或者直接使用一个render监听器:

new Ext.Panel({
    title: 'The Clickable Panel',
    listeners: {
        render: function(p) {
            // Append the Panel to the click handler's argument list.
            p.getEl().on('click', handlePanelClick.createDelegate(null, [p], true));
        },
        single: true  // Remove the listener after first invocation
    }
});
参数:
  • 无。
返回值:
  • Ext.Element
    包装当前组件的元素。
Component
getFooterToolbar () : Ext.Toolbar
返回panel底部( fbar )区域的toolbar
返回panel底部( fbar )区域的toolbar
参数:
  • 无。
返回值:
  • Ext.Toolbar
    toolbar
Panel
getFrameHeight () : Number
返回当前panel框架元素的高度像素值 (包括所有top和bottom工具栏以及header和footer元素...
返回当前panel框架元素的高度像素值 (包括所有top和bottom工具栏以及header和footer元素， 但是不包括body高度)。 如需获取body高度，参见 getInnerHeight.
参数:
  • 无。
返回值:
  • Number
    框架高度
Panel
getFrameWidth () : Number
返回当前panel框架元素的宽度像素值 (不包含body宽度)。如需获得body宽度，参见...
返回当前panel框架元素的宽度像素值 (不包含body宽度)。如需获得body宽度，参见 getInnerWidth。
参数:
  • 无。
返回值:
  • Number
    框架宽度
Panel
getHeight () : Number
获取该组件的当前高度值。
获取该组件的当前高度值。
参数:
  • 无。
返回值:
  • Number
BoxComponent
getId () : String
返回当前组件的id，如果没有定义id，则自动生成并返回一个id:'ext-comp-'...
返回当前组件的 id 如果没有定义 id 则自动生成并返回一个 id

'ext-comp-' + (++Ext.Component.AUTO_ID)
参数:
  • 无。
返回值:
  • String
    id
Component
getInnerHeight () : Number
返回body元素的高度像素值(不包括任何框架元素的高度)。 对于框架高度参见...
返回body元素的高度像素值(不包括任何框架元素的高度)。 对于框架高度参见 getFrameHeight。
参数:
  • 无。
返回值:
  • Number
    body高度
Panel
getInnerWidth () : Number
返回body元素宽度像素值(不包含任何框架元素的宽度)。 对于框架宽度，参见 getFrameWidth。
返回body元素宽度像素值(不包含任何框架元素的宽度)。 对于框架宽度，参见 getFrameWidth。
参数:
  • 无。
返回值:
  • Number
    body宽度
Panel
getItemId () : String
返回当前组件的 itemId 。 如果没有通过配置参数指定 itemId 那么，将会使用...
返回当前组件的 itemId 。 如果没有通过配置参数指定 itemId 那么，将会使用 getId 返回 id 。
参数:
  • 无。
返回值:
  • String
Component
getLayout () : ContainerLayout
返回容器当前使用的布局管理器。 如果容器当前没有设置布局管理器， 将会创建一个默认的...
返回容器当前使用的布局管理器。 如果容器当前没有设置布局管理器， 将会创建一个默认的 Ext.layout.ContainerLayout 并被设置为容器的布局管理器。
参数:
  • 无。
返回值:
  • ContainerLayout
    容器的布局管理器
Container
getLayoutTarget () : Ext.Element
返回当前容器中用来包含子组件的元素。提供了一个 可以返回容器的...

返回当前容器中用来包含子组件的元素。

提供了一个 可以返回容器的Element 的实现， 但是，如果容器有更复杂的结构， 可以覆盖此实现以返回 layout 在其中渲染子组件的元素。

参数:
  • 无。
返回值:
  • Ext.Element
    在其中渲染子组件的元素。
Container
getOuterSize () : Object
获取当前组件所在元素的尺寸大小，包括边缘的空白处。
获取当前组件所在元素的尺寸大小，包括边缘的空白处。
参数:
  • 无。
返回值:
  • Object
    一个包含元素大小的对象 {width: (element width + left/right margins), height: (element height + top/bottom margins)}
BoxComponent
getPosition ( [ Boolean local ] ) : Array
获取组件底层元素当前的XY位置。
获取组件底层元素当前的XY位置。
参数:
  • local : Boolean
    (可选)如果为true，将返回元素的left和top值，而不是相对于页面内的 XY。(默认值为 false)
返回值:
  • Array
    元素的XY位置值(例如：[100, 200])
BoxComponent
getResizeEl () : Ext.Element
返回该组件的最外层用来定义这些组件整体大小的Element...

返回该组件的最外层用来定义这些组件整体大小的Element对象。

通常用 getEl 方法将会返回相同的Element对象，但在有些情况下，组件可能有一些更多的封装了它的主要动态Element对象的Element对象。

例如ComboBox。它是封装在一个包含<input>元素的包装元素里(这将返回其 getEl方法和触发按钮的元素)。返回的元素为resizeEl。

参数:
  • 无。
返回值:
  • Ext.Element
    The Element which is to be resized by size managing layouts.
BoxComponent
getSize () : Object
获取组件底层元素当前的大小。
获取组件底层元素当前的大小。
参数:
  • 无。
返回值:
  • Object
    一个包含元素大小的对象{width: (element width), height: (element height)}
BoxComponent
getTool ( String id ) : Object
根据id获取一个tool.
根据id获取一个tool.
参数:
  • id : String
返回值:
  • Object
    tool
Panel
getTopToolbar () : Ext.Toolbar
返回panel顶部区域的 toolbar ( tbar ).
返回panel顶部区域的 toolbar ( tbar ).
参数:
  • 无。
返回值:
  • Ext.Toolbar
    toolbar
Panel
getUpdater () : Ext.Updater
获取当前panel的 Ext.Updater .让你可以为当前panel的body执行Ajax更新。
获取当前panel的 Ext.Updater .让你可以为当前panel的body执行Ajax更新。
参数:
  • 无。
返回值:
  • Ext.Updater
    Updater
Panel
getWidth () : Number
获取该组件的当前宽度值。
获取该组件的当前宽度值。
参数:
  • 无。
返回值:
  • Number
BoxComponent
getXType () : String
获取当前组件的xtype，它是用 Ext.ComponentMgr 注册的。 所有可用的xtype列表，参见...
获取当前组件的xtype，它是用 Ext.ComponentMgr 注册的。 所有可用的xtype列表，参见 Ext.Component 类头部。示例用法:

var t = new Ext.form.TextField();
alert(t.getXType());  // alerts 'textfield'
参数:
  • 无。
返回值:
  • String
    The xtype
Component
getXTypes () : String
返回此组件的xtype继承树，用字符'-'分隔。 所有可用的xtype值...

返回此组件的xtype继承树，用字符'-'分隔。 所有可用的xtype值，请参见Ext.Component 类的头部。

如果使用你自己的子类，请注意，组件必须注册它自己的xtype值以便区别于继承的xtype。

示例用法:

var t = new Ext.form.TextField();
alert(t.getXTypes());  // alerts 'component/box/field/textfield'
参数:
  • 无。
返回值:
  • String
    xtype层次字符串
Component
hasListener( String eventName ) : Boolean
检测对象是否包含指定事件的任何监听器
检测对象是否包含指定事件的任何监听器
参数:
  • eventName : String
    检测的事件名
返回值:
  • Boolean
    如果事件被监听则为true，否则为false
Observable
hide ( [ String/Element animateTarget ], [ Function callback ], [ Object scope ] ) : Ext.Window
隐藏窗口，将其设置为不可见，并设置一个负数偏移量。
隐藏窗口，将其设置为不可见，并设置一个负数偏移量。
参数:
  • animateTarget : String/Element
    (可选)目标元素或者id，在window隐藏时动画效果的起始处 (默认为null，没有动画效果)
  • callback : Function
    (可选)在window被隐藏后需要调用的回调函数
  • scope : Object
    (可选)作用域( this 引用)回调函数将在其中被执行。默认为当前window.
返回值:
  • Ext.Window
    this
Window
insert ( Number index , Ext.Component component ) : Ext.Component
在当前容器的指定索引处插入一个组件。 在插入之前触发...
在当前容器的指定索引处插入一个组件。 在插入之前触发 beforeadd 事件， 然后在组件被插入之后触发 add 事件。
参数:
  • index : Number
    组件会被插入到容器子项集合中时的索引位置
  • component : Ext.Component
    需要插入的子组件。

    Ext使用懒渲染，只有在必要的时候才会渲染插入的组件。

    如果使用懒渲染，可以传递一个组件配置对象以避免创建一个真实组件的开销， 这意味着，插入的组件不会立即被渲染。 为了利用这个“懒初始化”('lazy instantiation')， 必须把组件设置为它注册的 Ext.Component.xtype 值。

    所有可用的xtype列表，参见 Ext.Component。
返回值:
  • Ext.Component
    使用容器默认配置值插入的组件(或者配置对象)。
Container
isVisible () : Boolean
如果当前组件可见，返回true。
如果当前组件可见，返回true。
参数:
  • 无。
返回值:
  • Boolean
    如果当前组件可见，返回true，其它返回false。
Component
isXType ( String xtype , [ Boolean shallow ] ) : Boolean
Tests whether or not this Component is of a specific xtype. This can test whether this Component is descended from th...

测试此组件是否是指定的xtype。此方法既可以测试是否是指定的xtype的某个子类， 或者它是否直接是指定的xtype类(shallow=true)。

如果使用你自己的子类，必须知道组件必须注册它的xtype值。

所有可用的xtype列表，参见 Ext.Component 类头部。

示例用法:

var t = new Ext.form.TextField();
var isText = t.isXType('textfield');        // true
var isBoxSubclass = t.isXType('box');       // true, descended from BoxComponent
var isBoxInstance = t.isXType('box', true); // false, not a direct BoxComponent instance
参数:
  • xtype : String
    需要为当前组件进行检测的xtype
  • shallow : Boolean
    (可选) 如果为false，检测组件是否是xtype继承树中的某个子类（默认是这种情况）， 如果为true，只检测组件是否是指定的xtype类型。
返回值:
  • Boolean
    如果当前组件是指定xtype的子类，返回true，其它返回flase。
Component
load ( Object/String/Function config ) : Ext.Panel
立即使用XHR返回的内容装载当前panel的内容。
立即使用XHR返回的内容装载当前panel的内容。
参数:
  • config : Object/String/Function
    一个包含任何如下选项的配置对象:
    panel.load({
    url: 'your-url.php',
    params: {param1: 'foo', param2: 'bar'}, // or a URL encoded string
    callback: yourFunction,
    scope: yourObject, // optional scope for the callback
    discardUrl: false,
    nocache: false,
    text: 'Loading...',
    timeout: 30,
    scripts: false
});
    唯一的必须参数是url。 可选的nocache、text和script参数是 disableCaching、indicatorText和loadScripts的快捷方式， 它们被用来设置到当前panel的Updater实例所绑定的 属性上。
返回值:
  • Ext.Panel
    this
Panel
maximize () : Ext.Window
将窗口的大小自适应成它目前容器的大小，并且 自动将...
将窗口的大小自适应成它目前容器的大小，并且 自动将 '最大化' 工具按钮 替换成'恢复'工具按钮. 参见 toggleMaximize.
参数:
  • 无。
返回值:
  • Ext.Window
    this
Window
minimize () : Ext.Window
用来最小化窗体的方法站位符。 默认情况下，此方法只是简单地触发
用来最小化窗体的方法站位符。 默认情况下，此方法只是简单地触发 minimize 事件 ，以为最小化一个窗体的行为是与特定应用相关的。 特定的最小化行为可以通过监听和处理最小化事件或者覆盖此方法来实现。
参数:
  • 无。
返回值:
  • Ext.Window
    this
Window
mon ( Observable|Element item , Object|String ename , Function fn , Object scope , Object opt ) : void
向任何Observable对象(或者元素)上添加监听器，监听器将会在组件...

向任何Observable对象(或者元素)上添加监听器，监听器将会在组件销毁时被自动删除。
用法：

myGridPanel.mon(myGridPanel.getSelectionModel(), 'selectionchange', handleSelectionChange, null, {buffer: 50});

or:

myGridPanel.mon(myGridPanel.getSelectionModel(), {
    selectionchange: handleSelectionChange,
    buffer: 50
});
参数:
  • item : Observable|Element
    需要添加listener/listeners的项目。
  • ename : Object|String
    事件名，或者一个包含事件名属性的对象。
  • fn : Function
    (可选) 如果 ename 参数是一个事件名，此参数为处理函数。
  • scope : Object
    (可选)如果 ename 参数是一个事件名称，此参数是作用域 ( this 引用)，监听函数将会在此作用域中被执行。
  • opt : Object
    (可选)如果 ename 参数是一个事件名称， 此参数是 addListener 配置项。
返回值:
  • void
Component
mun ( Observable|Element item , Object|String ename , Function fn , Object scope ) : void
删除通过mon 方法添加的监听器。
删除通过mon 方法添加的监听器。
参数:
  • item : Observable|Element
    需要删除listener/listeners的项目。
  • ename : Object|String
    事件名称，或者一个包含事件名称属性的对象。
  • fn : Function
    (可选)如果 ename 参数是一个事件名称，此参数是一个处理函数。
  • scope : Object
    (可选)如果 ename 参数是一个事件名称，此参数是作用域 ( this 引用)，监听函数将会在此作用域中被执行。
返回值:
  • void
Component
nextSibling () : Ext.Component
返回所属容器中的下一个组件
返回所属容器中的下一个组件
参数:
  • 无。
返回值:
  • Ext.Component
Component
on( String eventName, Function handler, [Object scope], [Object options] ) : void
给对象添加事件处理器 (addListener的简写形式)
给对象添加事件处理器 (addListener的简写形式。)
参数:
  • eventName : String
    监听的事件类型
  • handler : Function
    事件调用的方法
  • scope : Object
    （可选）处理方法执行时的作用域 (this 的引用)。 如果被忽略。默认为触发事件的对象。
  • options : Object
    可选 包含处理器配置的对象。
返回值:
  • void
Observable
previousSibling () : Ext.Component
返回所属容器中的前一个组件
返回所属容器中的前一个组件
参数:
  • 无。
返回值:
  • Ext.Component
Component
purgeListeners() : void
移除对象上所有的监听器
移除对象上所有的监听器
参数:
  • 无。
返回值:
  • void
Observable
relayEvents( Object o, Array events ) : void
从指定的Observable上传递选择的事件就好像被当前对象触发一样。
从指定的Observable上传递选择的事件就好像被当前对象触发一样。
参数:
  • o : Object
    该Observable上的事件被当前对象传递。
  • events : Array
    传递的数组名。
返回值:
  • void
Observable
remove ( Component/String component , [ Boolean autoDestroy ] ) : Ext.Component
从当前容器中移除一个组件。 在移除之前触发 beforeremove 事件， 然后在组件被移除之后触发...
从当前容器中移除一个组件。 在移除之前触发 beforeremove 事件， 然后在组件被移除之后触发 remove 事件。
参数:
  • component : Component/String
    需要移除的组件引用或者id
  • autoDestroy : Boolean
    (可选) 设置为true将自动调用被删组件的 Ext.Component.destroy 函数。 默认为容器的 autoDestroy 配置值。
返回值:
  • Ext.Component
    被移除的组件。
Container
removeAll ( [ Boolean autoDestroy ] ) : Array
从当前容器中删除所有组件。
从当前容器中删除所有组件。
参数:
  • autoDestroy : Boolean
    (可选) 此参数为true时将自动调用 被删组件的 Ext.Component.destroy 方法。 默认为当前容器的 autoDestroy 配置值。
返回值:
  • Array
    被销毁的组件数组
Container
removeClass ( string cls ) : Ext.Component
从组件底层的元素上删除一个CSS类。
从组件底层的元素上删除一个CSS类。
参数:
  • cls : string
    需要移除的CSS类名
返回值:
  • Ext.Component
    this
Component
removeListener( String eventName, Function handler, [Object scope] ) : void
删除一个事件处理器。
删除一个事件处理器。
参数:
  • eventName : String
    处理器关联的事件类型。
  • handler : Function
    移除的处理器。 这应该是传递到addListener里的方法的引用。
  • scope : Object
    （可选）处理器指定的初始作用域。
返回值:
  • void
Observable
render ( [ Element/HTMLElement/String container ], [ String/Number position ] ) : void
在传递进来的HTML元素中渲染当前组件。...

在传递进来的HTML元素中渲染当前组件。

如果你正在使用一个Container 对象放置当前组件，那么请不要使用render方法。

当容器第一次被渲染时，它的子组件将会被容器的 layout 管理器渲染。

某些布局管理器允许动态添加子组件。它们包括 Ext.layout.CardLayout, Ext.layout.AnchorLayout, Ext.layout.FormLayout, Ext.layout.TableLayout。

当一个新的子组件被添加时，如果容器已经被渲染了， 你可能需要调用容器的 doLayout 方法来刷新视图，它将导致所有没有被渲染的子组件进行渲染操作。 此操作是必须的，这样你可以添加多个子组件而只刷新一次layout。

当创建复杂的UI时，非常重要的一点是，请记住调整子项目的尺寸和位置是容器的 layout 管理器的职责。 如果你希望子项目的尺寸对用户交互作出反应， 你必须为容器配置一个布局管理器，它将创建和管理你心里想要的那种布局。

忽略容器的layout 配置意味着将会使用一个基本的布局管理器，它除了按次序把子组件 渲染到容器中之外什么事情都不做。 这种情况下，任何尺寸和位置的调整操作都不会发生。

参数:
  • container : Element/HTMLElement/String
    (可选) 需要在其中渲染当前组件的元素。 如果它是从一个已存在的标签中创建的，此参数应该被忽略。
  • position : String/Number
    (可选) 容器中的一个元素ID或者一个DOM节点索引， 当前组件将会被插入到它前面 (默认append到容器的尾部)
返回值:
  • void
Component
restore () : Ext.Window
将一个最大化的窗口恢复到它原来的大小，并且将其放置到被 最大化时的位置，然后用'maximize'...
将一个maximized的窗口恢复到它原来的大小，并且将其放置到被 最大化时的位置，然后用'maximize'工具按钮替代'restore'工具按钮。参照： toggleMaximize.
参数:
  • 无。
返回值:
  • Ext.Window
    this
Window
resumeEvents() : void
重新开始触发事件。(参见suspendEvents) 如果事件以queueSuspended参数被挂起，则在事件被挂起时 ...
重新开始触发事件。(参见 suspendEvents) 如果事件以queueSuspended 参数被挂起，则在事件被挂起时触发的事件会被传递到所有的监听器上
参数:
  • 无。
返回值:
  • void
Observable
setActive ( Boolean active ) : void
通过显示其阴影，让当前窗口成为当前活动项，或者通过隐藏其阴影让它 成为非当前活动项...
通过显示其阴影，让当前窗口成为当前活动项，或者通过隐藏其阴影让它 成为非当前活动项。 此方法同时触发 activate或者 deactivate 事件，触发何种事件取决于发生了何种操作。此方法会被 Ext.WindowMgr内部调用。
参数:
  • active : Boolean
    True将会激活window，false将其设置为非活动状态(默认为false)
返回值:
  • void
Window
setAnimateTarget ( String/Element el ) : void
设置一个目标元素，当窗口打开时作为动画效果的起始点。
设置一个目标元素，当窗口打开时作为动画效果的起始点。
参数:
  • el : String/Element
    目标元素或者id
返回值:
  • void
Window
setAutoScroll ( Boolean scroll ) : Ext.BoxComponent
设置该组件内容溢出时是否自动显示滚动条。
设置该组件内容溢出时是否自动显示滚动条。
参数:
  • scroll : Boolean
    值为true的话组件自动显示滚动条。
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setDisabled ( Boolean disabled ) : Ext.Component
工具函数，使用布尔值设置有效/无效(disabled/enabled )。
工具函数，使用布尔值设置有效/无效(disabled/enabled )。
参数:
  • disabled : Boolean
返回值:
  • Ext.Component
    this
Component
setHeight ( Mixed height ) : Ext.BoxComponent
设置此组件的高度。该方法将触发resize事件。
设置此组件的高度。该方法将触发resize事件。
参数:
  • height : Mixed
    The new height to set.
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setIconClass ( String cls ) : void
设置CSS类，为当前panel提供图标图片。 如果已经设置了...
设置CSS类，为当前panel提供图标图片。 如果已经设置了，此方法将会替换任何现有的图标类并在完成之后触发 iconchange 事件。
参数:
  • cls : String
    新的CSS类名
返回值:
  • void
Panel
setPagePosition ( Number x , Number y ) : Ext.BoxComponent
设置组件在页面中的XY位置。 如果需要设置left和top值 ，请使用...
设置组件在页面中的XY位置。 如果需要设置left和top值 ，请使用setPosition方法。 该方法触发move事件。
参数:
  • x : Number
    The new x position
  • y : Number
    The new y position
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setPosition ( Number left , Number top ) : Ext.BoxComponent
设置组件的left和top值。设置组件的页面XY值，请使用setPagePosition方法。该方法触发...
设置组件的left和top值。设置组件的页面XY值，请使用setPagePosition方法。该方法触发move事件。
参数:
  • left : Number
    The new left
  • top : Number
    The new top
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setSize ( Mixed width , Mixed height ) : Ext.BoxComponent
设置BoxComponent的宽度和高度。 此方法触发resize事件...
设置BoxComponent的宽度和高度。 此方法触发resize事件。此方法可以接收单独的width或者height值作为参数， 或者你可以传递像这样的一个size对象： {width:10, height:20} 。
参数:
  • width : Mixed
    设置的新的width值。这可以是：
    • 一个Number类型指定Element新的宽度 Ext.Element.defaultUnit(默认为像素 :'px')。
    • 一个String类型用于设置width的CSS样式。
    • 一个size对象格式为 {width: widthValue, height: heightValue} 。
    • 值为 undefined 时，保留原来的width不变。
  • height : Mixed
    设置的新的height值(如果第一个参数传递了一个size对象，此参数没有必要传递)。这可以是：
    • 一个Number类型指定Element新的高度 Ext.Element.defaultUnit(默认为像素 :'px')。
    • 一个String类型用于设置height的CSS样式。也有可能不会被使用到。
    • 值为 undefined 时，保留原来的height不变。
返回值:
  • Ext.BoxComponent
    this
BoxComponent
setTitle ( String title , [ String iconCls ] ) : void
为panel设置标题文本，也可选择设置 icon class。...

为panel设置标题文本，也可选择设置 icon class。

为了能够设置标题，必须已经为Panel创建了一个header元素。 要么通过向Panel上注册一个非空的 title ，或者配置 header: true ，可触发此操作(译者注：指为Panel创建header元素)。

参数:
  • title : String
    需要设置的标题文本
  • iconCls : String
    (可选) iconCls 一个用户定义的CSS类，为当前panel提供图标图片。
返回值:
  • void
Panel
setVisible ( Boolean visible ) : Ext.Component
工具方法，通过使用布尔值隐藏或者显示当前组件。
工具方法，通过使用布尔值隐藏或者显示当前组件。
参数:
  • visible : Boolean
    true时显示，false时隐藏
返回值:
  • Ext.Component
    this
Component
setWidth ( Mixed width ) : Ext.BoxComponent
设置组件的宽度。 此方法触发resize事件。
设置组件的宽度。 此方法触发resize事件。
参数:
  • width : Mixed
    The new width to set.
返回值:
  • Ext.BoxComponent
    this
BoxComponent
show ( [ String/Element animateTarget ], [ Function callback ], [ Object scope ] ) : Ext.Window
显示此窗口，如果需要时先渲染它， 或者将其设为当前活动项，并且如果它是隐藏的 把它显示出来。
显示此窗口，如果需要时先渲染它， 或者将其设为当前活动项，并且如果它是隐藏的 把它显示出来。
参数:
  • animateTarget : String/Element
    (可选)目标元素或者id，在window打开时动画效果的起始处 (默认为null，没有动画效果)
  • callback : Function
    (可选)在window显示之后需要调用的回调函数
  • scope : Object
    (可选)作用域( this 引用)回调函数在其中被执行。默认为当前window.
返回值:
  • Ext.Window
    this
Window
suspendEvents( Boolean queueSuspended ) : void
暂停触发所有的事件。 (参看resumeEvents)
暂停触发所有的事件。（参看 resumeEvents)
参数:
  • queueSuspended : Boolean
    如果传递为true则排列好暂停的事件使得在调用 resumeEvents 后再触发它们，而不是抛弃所有暂停的事件。
返回值:
  • void
Observable
syncSize () : Ext.BoxComponent
强制组件的大小按照此组件底层元素当前的高度和宽度计算。
强制组件的大小按照此组件底层元素当前的高度和宽度计算。
参数:
  • 无。
返回值:
  • Ext.BoxComponent
    this
BoxComponent
toBack () : Ext.Window
将当前窗口设置到任何可见窗口之后(更小的z-index)。
将当前窗口设置到任何可见窗口之后(更小的z-index)。
参数:
  • 无。
返回值:
  • Ext.Window
    this
Window
toFront ( [ Boolean e ] ) : Ext.Window
将当前窗口放置到其它任何可见的窗口之前。
将当前窗口放置到其它任何可见的窗口之前。
参数:
  • e : Boolean
    (可选)指定为false将会阻止window获得焦点。
返回值:
  • Ext.Window
    this
Window
toggleCollapse ( Boolean animate ) : Ext.Panel
根据panel的当前状态，执行expand或者 collapse操作 的快捷方式。
根据panel的当前状态，执行expand或者 collapse操作 的快捷方式。
参数:
  • animate : Boolean
    True将会在转换过程中使用动画效果，否则为false (默认为panel的animCollapse 配置项的值)
返回值:
  • Ext.Panel
    this
Panel
toggleMaximize () : Ext.Window
一个快捷方法，用来在最大化和恢复之间固定一个状态，基于窗体当前的最大化状态
一个快捷方法，用来在 最大化 and 恢复 之间固定一个状态，基于窗体当前的最大化状态
参数:
  • 无。
返回值:
  • Ext.Window
    this
Window
un( String eventName, Function handler, [Object scope] ) : void
删除一个事件处理器(removeListener方法的简写形式)
删除一个事件处理器(removeListener方法的简写形式。)
参数:
  • eventName : String
    处理器关联的事件类型
  • handler : Function
    被删除的处理器 这应该是传入 addListener 中的方法的引用。
  • scope : Object
    （可选）为处理器指定的初始作用域。
返回值:
  • void
Observable
update ( Mixed htmlOrData , [ Boolean loadScripts ], [ Function callback ] ) : void
刷新组件的内部区域。
刷新组件的内部区域。
参数:
  • htmlOrData : Mixed
    如果已经通过tpl为当前组件配置了一个模板，那么 将会使用此参数来装配模板。 如果没有为当前组件配置模板，组件的内容区域将会通过Ext.Element 进行刷新。
  • loadScripts : Boolean
    (可选)只用在使用html配置时此参数才合法。默认为false。
  • callback : Function
    (可选)只用在使用html配置时此参数才合法。 当脚本加载完成时回调函数才被执行。
返回值:
  • void
Component
updateBox ( Object box ) : Ext.BoxComponent
设置此组件底层元素的盒子模型尺寸。(译者注：盒子模型是CSS术语，详细资料请自行搜索。)
设置此组件底层元素的盒子模型尺寸。(译者注：盒子模型是CSS术语，详细资料请自行搜索。)
参数:
  • box : Object
    一个格式为{x, y, width, height}的对象
返回值:
  • Ext.BoxComponent
    this
BoxComponent

公共事件

Event Defined By
activate : ( Ext.Window this )
当窗口在视觉上通过setActive方法被激活时触发
当窗口在视觉上通过 setActive方法被激活时触发.
监听器将会以如下的参数格式调用:
  • this : Ext.Window
Window
add : ( Ext.Container this , Ext.Component component , Number index )
监听器将会被使用如下的参数被调用:
  • this : Ext.Container
  • component : Ext.Component
    被添加的组件
  • index : Number
    将组件添加到容器子组件集合时的位置索引
Container
added : ( Ext.Component this , Ext.Container ownerCt , number index )
当一个组件被添加到一个Ext.Container时触发
当一个组件被添加到一个Ext.Container时触发
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • ownerCt : Ext.Container
    用于组件的容器
  • index : number
    添加组件的位置
Component
afterlayout : ( Ext.Container this , ContainerLayout layout )
当容器中的组件被指定的布局管理器排列的时候触发。
当容器中的组件被指定的布局管理器排列的时候触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Container
  • layout : ContainerLayout
    为当前容器提供的ContainerLayout实现
Container
afterrender : ( Ext.Component this )
在组件渲染完成之后触发...

在组件渲染完成之后触发。

afterrender事件在当前组件被rendered 结束之后、在为组件定义的所有afterRender方法执行之后 触发，并且，如果有stateful， 也在状态被保存之后才触发。

监听器将会以如下参数格式被调用:
  • this : Ext.Component
Component
beforeadd : ( Ext.Container this , Ext.Component component , Number index )
在任何 Ext.Component 被添加或者插入到容器中之前触发。 事件处理器可以返回false取消添加操作。
在任何 Ext.Component 被添加或者插入到容器中之前触发。 事件处理器可以返回false取消添加操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Container
  • component : Ext.Component
    被添加的组件
  • index : Number
    组件被添加到容器子项目集合中时的索引位置
Container
beforeclose : ( Ext.Panel p )
在Panel被关闭之前触发。 注意，Panel不直接支持关闭操作，但是Panel的一些子类(例如...
在Panel被关闭之前触发。 注意，Panel不直接支持关闭操作，但是Panel的一些子类(例如 Ext.Window) ，或者一个位于Ext.TabPanel中的Panel支持。 此事件仅被应用到这些子类中。处理函数可以返回false以取消关闭操作。
监听器将会以如下参数格式被调用:
  • p : Ext.Panel
    正在被关闭的Panel.
Panel
beforecollapse : ( Ext.Panel p , Boolean animate )
在Panel被折叠之前触发。监听器可以返回false取消折叠。
在Panel被折叠之前触发。监听器可以返回false取消折叠。
监听器将会以如下参数格式被调用:
  • p : Ext.Panel
    被折叠的Panel
  • animate : Boolean
    如果折叠操作使用了动画效果，此参数为true，其它为false
Panel
beforedestroy : ( Ext.Component this )
在组件 destroyed 之前触发。 在事件监听器中返回false以停止 destroy 操作。
在组件 destroyed 之前触发。 在事件监听器中返回false以停止 destroy 操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforeexpand : ( Ext.Panel p , Boolean animate )
在Panel被展开之前触发。监听器可以返回false取消展开操作。
在Panel被展开之前触发。监听器可以返回false取消展开操作。
监听器将会以如下参数格式被调用:
  • p : Ext.Panel
    被展开的Panel
  • animate : Boolean
    如果展开操作使用动画效果，为true，其它为false
Panel
beforehide : ( Ext.Component this )
在调用hide方法隐藏组件之前触发。 在事件监听器中返回false可以停止隐藏操作。
在调用hide方法隐藏组件之前触发。 在事件监听器中返回false可以停止隐藏操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforeremove : ( Ext.Container this , Ext.Component component )
从容器中删除任何Ext.Component 之前触发。 处理器可以返回false取消remove操作。
从容器中删除任何Ext.Component 之前触发。 处理器可以返回false取消remove操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Container
  • component : Ext.Component
    被删除的组件
Container
beforerender : ( Ext.Component this )
在组件被rendered 之前触发。 在事件监听器中返回false可以停止render 操作。
在组件被rendered 之前触发。 在事件监听器中返回false可以停止render 操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforeshow : ( Ext.Component this )
在调用show()方法现实组件之前触发。 事件处理函数返回false可以停止show。
在调用show 方法现实组件之前触发。 事件处理函数返回false可以停止show。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
beforestaterestore : ( Ext.Component this , Object state )
在组件状态恢复之前触发。返回false停止恢复状态操作。
在组件状态恢复之前触发。返回false停止恢复状态操作。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    StateProvider返回的状态哈希值。 如果没有禁止此事件，那么状态对象会被传递给applyState。 默认情况下，这样简单地把属性值拷贝到当前组件中。 可以覆盖此方法以提供自定的状态恢复操作。
Component
beforestatesave : ( Ext.Component this , Object state )
在组件状态被保存到配置的状态提供者之前触发。 返回false可以停止保存。
在组件状态被保存到配置的状态提供者之前触发。 返回false可以停止保存。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    状态值哈希。 这由在组件上调用getState() 方法决定。 此方法必须由开发者提供，返回是否需要对状态进行描述，默认情况下， Ext.Component有一个空实现。
Component
bodyresize : ( Ext.Panel p , Number width , Number height )
在Panel被调整尺寸之后触发。
在Panel被调整尺寸之后触发。
监听器将会以如下参数格式被调用:
  • p : Ext.Panel
    被调整尺寸的Panel
  • width : Number
    Panel body的新宽度。
  • height : Number
    Panel body的新高度。
Panel
close : ( Ext.Panel p )
在Panel被关闭之后触发。注意，Panel不直接提供关闭操作， 但是Panel的一些子类(例如...
在Panel被关闭之后触发。注意，Panel不直接提供关闭操作， 但是Panel的一些子类(例如 Ext.Window) ，或者处于Ext.TabPanel中的Panel支持。
监听器将会以如下参数格式被调用:
  • p : Ext.Panel
    被关闭的Panel.
Panel
collapse : ( Ext.Panel p )
在Panel被折叠后触发。
在Panel被折叠后触发。
监听器将会以如下参数格式被调用:
  • p : Ext.Panel
    被折叠的Panel
Panel
deactivate : ( Ext.Window this )
在窗口被通过setActive方法设置为视觉上的非当前活动项之后触发
在窗口被通过 setActive 方法设置为视觉上的非当前活动项之后触发。.
监听器将会以如下的参数格式调用:
  • this : Ext.Window
Window
destroy : ( Ext.Component this )
在组件被销毁之后触发。
在组件被destroyed之后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
disable : ( Ext.Component this )
在组件被设置为无效状态后触发。
在组件被设置为无效状态后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
enable : ( Ext.Component this )
当组件被设置为有效(enabled)之后触发。
当组件被设置为有效(enabled)之后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
Component
expand : ( Ext.Panel p )
当Panel已经展开之后触发。
当Panel已经展开之后触发。
监听器将会以如下参数格式被调用:
  • p : Ext.Panel
    已经被展开的Panel.
Panel
hide : ( Ext.Component this )
在组件被隐藏之后触发。 当调用hide 方法隐藏组件之后触发。
在组件被隐藏之后触发。 当调用hide 方法隐藏组件之后触发。
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
iconchange : ( Ext.Panel p , String The , String The )
当Panel的图标被set或者 changed 之后触发。
当Panel的图标被set或者 changed 之后触发。
监听器将会以如下参数格式被调用:
  • p : Ext.Panel
    icon class被变化的Panel
  • The : String
    新icon类
  • The : String
    旧icon类
Panel
maximize : ( Ext.Window this )
当窗口被最大化之后触发。
当窗口被最大化之后触发。
监听器将会以如下的参数格式调用:
  • this : Ext.Window
Window
minimize : ( Ext.Window this )
当窗体被最小化之后触发。
当窗体被最小化之后触发。
监听器将会以如下的参数格式调用:
  • this : Ext.Window
Window
move : ( Ext.Component this , Number x , Number y )
在组件移动之后触发。
在组件移动之后触发。
监听器将会用如下的参数格式来调用:
  • this : Ext.Component
  • x : Number
    The new x position
  • y : Number
    The new y position
BoxComponent
remove : ( Ext.Container this , Ext.Component component )
监听器将会以如下的参数格式被调用:
  • this : Ext.Container
  • component : Ext.Component
    被删除的组件
Container
removed : ( Ext.Component this , Ext.Container ownerCt )
当一个组件被从Ext.Container容器中删除时触发
当一个组件被从Ext.Container容器中删除时触发
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • ownerCt : Ext.Container
    持有组件的容器
Component
render : ( Ext.Component this )
在组件被渲染之后触发。
在组件被 rendered(渲染) 之后触发。
监听器将以如下的参数格式被调用:
  • this : Ext.Component
Component
resize : ( Ext.Window this , Number width , Number height )
当窗体的大小发生变化时触发。
当窗体的大小发生变化时触发。
监听器将会以如下的参数格式调用:
  • this : Ext.Window
  • width : Number
    window的新宽度
  • height : Number
    window的新高度
Window
restore : ( Ext.Window this )
当窗口在最大化后被恢复到原来的大小时触发
当窗口在最大化后被恢复到原来的大小时触发
监听器将会以如下的参数格式调用:
  • this : Ext.Window
Window
show : ( Ext.Component this )
在调用show 方法显示组件之后触发。
在调用show 方法显示组件之后触发。
监听器将会用如下的参数格式被调用:
  • this : Ext.Component
Component
staterestore : ( Ext.Component this , Object state )
组件状态被存储之后触发。
组件状态被存储之后触发。
监听器将会以如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    StateProvider返回的状态哈希值。 如果没有禁止此事件，那么状态对象会被传递给applyState。 默认情况下，这样简单地把属性值拷贝到当前组件中。 可以覆盖此方法以提供自定的状态恢复操作。
Component
statesave : ( Ext.Component this , Object state )
在组件状态被保存到所配置的状态提供者之后触发。
在组件状态被保存到所配置的状态提供者之后触发。
监听器将会用如下的参数格式被调用:
  • this : Ext.Component
  • state : Object
    状态值hash。 这是由在足见上调用getState() 方法决定的。 开发者必须提供此方法以返回是否需要恢复状态，默认情况下， Ext.Component有一个空实现。
Component
titlechange : ( Ext.Panel p , String The )
在Panel的标题被set或者 changed 之后触发。
在Panel的标题被set或者 changed 之后触发。
监听器将会以如下参数格式被调用:
  • p : Ext.Panel
    标题被改变的Panel.
  • The : String
    新的标题。
Panel


Class Ext.WindowGroup

包: | Ext
定义类的文件: | WindowManager.js
类: | WindowGroup
子类: | WindowMgr
继承自: | Object
一个管理一组Ext.Window 实例的对象，并提供z-order管理和窗口激活功能。

公共属性

Property |  | Defined By
 | zseed : Number The z-index value 当前WindowGroup中window的起始z-index(默认为9000) | WindowGroup

公共方法

Method Defined By
WindowGroup ()
参数:
  • 无。
返回值:
  • void
WindowGroup
bringToFront ( String/Object win ) : Boolean
将指定的window移动到当前WindowGroup中任何处于激活状态的window前面。
将指定的window移动到当前WindowGroup中任何处于激活状态的window前面。
参数:
  • win : String/Object
    Ext.Window 实例的id
返回值:
  • Boolean
    如果window被移动到最前，此参数为true；如果它已经位于最前面，为false
WindowGroup
each ( Function fn , [ Object scope ] ) : void
在WindowGroup中的每个window上调用一次指定的函数，传递每个window作为....
在WindowGroup中的每个window上调用一次指定的函数，传递每个window作为 唯一的参数。函数返回false将会停止迭代过程。
参数:
  • fn : Function
    需要在每个项目上执行的函数
  • scope : Object
    (可选) 作用域( this 引用)函数将会在其中被执行。 默认为迭代过程中的当前Window。
返回值:
  • void
WindowGroup
get ( String/Object id ) : Ext.Window
根据id获取已注册的window
根据id获取已注册的window
参数:
  • id : String/Object
    window的id或者一个 Ext.Window 实例
返回值:
  • Ext.Window
WindowGroup
getActive () : Ext.Window
获得当前WindowGroup中当前活动的window
获得当前WindowGroup中当前活动的window
参数:
  • 无。
返回值:
  • Ext.Window
    活动的window
WindowGroup
getBy ( Function fn , [ Object scope ] ) : Array
使用传递到此方法的特定搜索函数，返回分组中的0个或多个窗口。 函数应该接收单个的Ext.Window 引用作为其唯一的参数...
使用传递到此方法的特定搜索函数，返回分组中的0个或多个窗口。 函数应该接收单个的Ext.Window 引用作为其唯一的参数，并且， 当窗口符合搜索标准时此方法应该返回一个true， 否则应该返回一个false。
参数:
  • fn : Function
    搜索函数
  • scope : Object
    (可选)作用域( this 引用)函数将会在其中被执行。 (如果没有指定此参数，默认为被测试的Window)。
返回值:
  • Array
    一个包含0个或多个符合条件Window的数组
WindowGroup
hideAll () : void
隐藏当前WindowGroup中的所有window
隐藏当前WindowGroup中的所有window
参数:
  • 无。
返回值:
  • void
WindowGroup
register ( Window win ) : void
在当前WindowManager中注册一个Window 。在一般情况下，此方法没必要被调用。Window在创建时，会自动被注册一个...

在当前WindowManager中注册一个Window 。在一般情况下，此方法没必要被调用。Window在创建时，会自动被注册一个 manager。

此方法有用的地方是，将Window在两个WindowManager之间移动。 例如，将Ext.MessageBox对话框移动到同一个manager之下， 就像desktop示例程序中的Desktop's WindowManager:

var msgWin = Ext.MessageBox.getDialog();
MyDesktop.getDesktop().getManager().register(msgWin);
参数:
  • win : Window
    需要注册的Window
返回值:
  • void
WindowGroup
sendToBack ( String/Object win ) : Ext.Window
将指定的window移动到当前WindowGroup中所有处于活动状态的window之后。
将指定的window移动到当前WindowGroup中所有处于活动状态的window之后。
参数:
  • win : String/Object
    window的id或者一个 Ext.Window 实例
返回值:
  • Ext.Window
    window
WindowGroup
unregister ( Window win ) : void
从当前WindowManager中注销一个 Window。 不应该调用此方法。 在销毁时...

从当前WindowManager中注销一个 Window。 不应该调用此方法。 在销毁时，Window会自动被注销。 参见 register

参数:
  • win : Window
    需要注销的Window
返回值:
  • void
WindowGroup

公共事件

该类没有公共事件。


WindowGroup
    WindowMgr

Class Ext.WindowMgr

包: | Ext
定义类的文件: | WindowManager.js
类: | WindowMgr
继承自: | WindowGroup
默认的全局窗口组，自动创建，如果需要不止一个独立的z轴堆栈的窗口分组， 根据需要创建额外的 Ext.WindowGroup 对象。

这是一个单例的类，不能直接实例化。

公共属性

Property |  | Defined By
 | zseed : Number The z-index value 当前WindowGroup中window的起始z-index(默认为9000) | WindowGroup

公共方法

Method Defined By
bringToFront ( String/Object win ) : Boolean
将指定的window移动到当前WindowGroup中任何处于激活状态的window前面。
将指定的window移动到当前WindowGroup中任何处于激活状态的window前面。
参数:
  • win : String/Object
    Ext.Window 实例的id
返回值:
  • Boolean
    如果window被移动到最前，此参数为true；如果它已经位于最前面，为false
WindowGroup
each ( Function fn , [ Object scope ] ) : void
在WindowGroup中的每个window上调用一次指定的函数，传递每个window作为....
在WindowGroup中的每个window上调用一次指定的函数，传递每个window作为 唯一的参数。函数返回false将会停止迭代过程。
参数:
  • fn : Function
    需要在每个项目上执行的函数
  • scope : Object
    (可选) 作用域( this 引用)函数将会在其中被执行。 默认为迭代过程中的当前Window。
返回值:
  • void
WindowGroup
get ( String/Object id ) : Ext.Window
根据id获取已注册的window
根据id获取已注册的window
参数:
  • id : String/Object
    window的id或者一个 Ext.Window 实例
返回值:
  • Ext.Window
WindowGroup
getActive () : Ext.Window
获得当前WindowGroup中当前活动的window
获得当前WindowGroup中当前活动的window
参数:
  • 无。
返回值:
  • Ext.Window
    活动的window
WindowGroup
getBy ( Function fn , [ Object scope ] ) : Array
使用传递到此方法的特定搜索函数，返回分组中的0个或多个窗口。 函数应该接收单个的Ext.Window 引用作为其唯一的参数...
使用传递到此方法的特定搜索函数，返回分组中的0个或多个窗口。 函数应该接收单个的Ext.Window 引用作为其唯一的参数，并且， 当窗口符合搜索标准时此方法应该返回一个true， 否则应该返回一个false。
参数:
  • fn : Function
    搜索函数
  • scope : Object
    (可选)作用域( this 引用)函数将会在其中被执行。 (如果没有指定此参数，默认为被测试的Window)。
返回值:
  • Array
    一个包含0个或多个符合条件Window的数组
WindowGroup
hideAll () : void
隐藏当前WindowGroup中的所有window
隐藏当前WindowGroup中的所有window
参数:
  • 无。
返回值:
  • void
WindowGroup
register ( Window win ) : void
在当前WindowManager中注册一个Window 。在一般情况下，此方法没必要被调用。Window在创建时，会自动被注册一个...

在当前WindowManager中注册一个Window 。在一般情况下，此方法没必要被调用。Window在创建时，会自动被注册一个 manager。

此方法有用的地方是，将Window在两个WindowManager之间移动。 例如，将Ext.MessageBox对话框移动到同一个manager之下， 就像desktop示例程序中的Desktop's WindowManager:

var msgWin = Ext.MessageBox.getDialog();
MyDesktop.getDesktop().getManager().register(msgWin);
参数:
  • win : Window
    需要注册的Window
返回值:
  • void
WindowGroup
sendToBack ( String/Object win ) : Ext.Window
将指定的window移动到当前WindowGroup中所有处于活动状态的window之后。
将指定的window移动到当前WindowGroup中所有处于活动状态的window之后。
参数:
  • win : String/Object
    window的id或者一个 Ext.Window 实例
返回值:
  • Ext.Window
    window
WindowGroup
unregister ( Window win ) : void
从当前WindowManager中注销一个 Window。 不应该调用此方法。 在销毁时...

从当前WindowManager中注销一个 Window。 不应该调用此方法。 在销毁时，Window会自动被注销。 参见 register

参数:
  • win : Window
    需要注销的Window
返回值:
  • void
WindowGroup

公共事件

该类没有公共事件。


Template
    XTemplate

Class Ext.XTemplate

包: | Ext
定义类的文件: | XTemplate.js
类: | XTemplate
继承自: | Template

模板类支持高级功能，例如:

  • 使用模板和自模板自动填充数组
  • 使用基本比较操作符进行条件判断
  • 支持基本匹配操作
  • 使用特殊的内置模板变量执行任意内嵌代码
  • 自定义成员函数
  • 许多特殊的标签和内建的操作符没有作为API的一部分定义， 但是可以在创建的模板中支持

XTemplate提供构建:

  • Ext.DataView
  • Ext.ListView
  • Ext.form.ComboBox
  • Ext.grid.TemplateColumn
  • Ext.grid.GroupingView
  • Ext.menu.Item
  • Ext.layout.MenuLayout
  • Ext.ColorPalette
的模板机制。

示例用法 参见构造函数。

配置项

Config Options |  | Defined By
 | compiled : Boolean 指定为true可以理解编译模板(参见 compile )。默认为 false. | Template
 | disableFormats : Boolean 参见 disableFormats . | Template
 | re : RegExp 参见 re . | Template

公共属性

该类没有公共属性。

公共方法

Method Defined By
XTemplate ( Mixed config )
Ext.Template 构造函数描述了可以传递给构造函数的参数...
Ext.Template 构造函数描述了可以传递给构造函数的参数。 以下例子示范了所有支持的特性。

  • 示例数据

    这是数据对象，在每段示例代码中都引用:

    var data = {
    name: 'Jack Slocum',
    title: 'Lead Developer',
    company: 'Ext JS, LLC',
    email: 'jack@extjs.com',
    address: '4 Red Bulls Drive',
    city: 'Cleveland',
    state: 'Ohio',
    zip: '44102',
    drinks: ['Red Bull', 'Coffee', 'Water'],
    kids: [{
        name: 'Sara Grace',
        age:3
    },{
        name: 'Zachary',
        age:2
    },{
        name: 'John James',
        age:0
    }]
};
  • 自动填充数组

    tpl 标签和for 运算符被用来处理提供的数据对象:

    • 如果在for中指定的 值是一个数组，其中的每个项目将会被自动重复填充到 tpl标签中的模板块。
    • 如果指定for="."，提供的数据对象将会被检测。
    • 当处理数组时，特殊的变量{#}将会提供 当前数组的index + 1(从1开始，而不是0).

    <tpl for
                                                    =".">...</tpl>       // loop through array at root node
<tpl for
                                                    ="foo">...</tpl>     // loop through array at foo node
<tpl for
                                                    ="foo.bar">...</tpl> // loop through array at foo.bar node
    使用以上的示例数据:

                                                    var tpl = new Ext.XTemplate(
    '<p>Kids: ',
    '<tpl for
                                                    =".">',       // process the data.kids node
        '<p>{#}. {name}</p>',  // use current array index to autonumber
    '</tpl></p>'
);
tpl.overwrite(panel.body, data.kids); // pass the kids property of the data object

    一个示例，如何利用 for 参数访问所提供的数据对象的指定成员，以便组装模板:

    var tpl = new Ext.XTemplate(
    '<p>Name: {name}</p>',
    '<p>Title: {title}</p>',
    '<p>Company: {company}</p>',
    '<p>Kids: ',
    '<tpl for="kids"
                                                    >',     // interrogate the kids property within the data
        '<p>{name}</p>',
    '</tpl></p>'
);
tpl.overwrite(panel.body, data);  // pass the root node of the data object

    普通的，包含值(不是对象)的数组 ，可以使用特殊的{.} 变量在一个循环中自动被渲染。 此变量将会表示数组中当前索引处的值:

    var tpl = new Ext.XTemplate(
    '<p>{name}\'s favorite beverages:</p>',
    '<tpl for="drinks">',
       '<div> - {.}</div>',
    '</tpl>'
);
tpl.overwrite(panel.body, data);

    当处理子模板时，例如迭代一个子数组，你可以 通过parent 对象访问父对象的成员:

    var tpl = new Ext.XTemplate(
    '<p>Name: {name}</p>',
    '<p>Kids: ',
    '<tpl for="kids">',
        '<tpl if="age > 1">',
            '<p>{name}</p>',
            '<p>Dad: {parent.name}</p>',
        '</tpl>',
    '</tpl></p>'
);
tpl.overwrite(panel.body, data);
  • 使用基本的比较运算符进行条件判断

    tpl 标签和 if 操作符被用来提供条件检测， 以便决定是否渲染模板中的指定部分。注意:

    • 如果在条件运算中使用，双引号必须进行转义
    • 没有 else 运算符 — 如果需要，应该使用两个相反的if条件。
    <tpl if="age > 1 && age < 10">Child</tpl>
<tpl if="age >= 10 && age < 18">Teenager</tpl>
<tpl if
                                                    ="this.isGirl(name)">...</tpl>
<tpl if
                                                    ="id==\'download\'">...</tpl>
<tpl if
                                                    ="needsIcon"><img src="{icon}" class="{iconCls}"/></tpl>
// no good:
<tpl if="name == "Jack"">Hello</tpl>
// encode " if it is part of the condition, e.g.
<tpl if="name == &quot;Jack&quot;">Hello</tpl>
    使用以上示例数据:
    var tpl = new Ext.XTemplate(
    '<p>Name: {name}</p>',
    '<p>Kids: ',
    '<tpl for="kids">',
        '<tpl if="age > 1">',
            '<p>{name}</p>',
        '</tpl>',
    '</tpl></p>'
);
tpl.overwrite(panel.body, data);
  • 支持基本匹配操作

    一下基本数学运算符可以直接应用到数值数据上:

    + - * /
    例如:
    var tpl = new Ext.XTemplate(
    '<p>Name: {name}</p>',
    '<p>Kids: ',
    '<tpl for="kids">',
        '<tpl if="age &gt; 1">',  // <-- Note that the > is encoded
            '<p>{#}: {name}</p>',  // <-- Auto-number each item
            '<p>In 5 Years: {age+5}</p>',  // <-- Basic math
            '<p>Dad: {parent.name}</p>',
        '</tpl>',
    '</tpl></p>'
);
tpl.overwrite(panel.body, data);
  • 使用特殊的内建模板变量执行任意内嵌代码

    位于”{[…]}”号之间的任何东西都被当作是需要在模板作用域内被执行的代码。 在此代码中有一些特殊的变量:

    • values : 当前作用域中的值。 如果你正在使用作用域改变子模板，你可以改变values.
    • parent : 祖先模板的作用域(values)
    • xindex : 如果你使用一个循环模板，此参数为你当前循环中的索引(从1开始)。
    • xcount : 如果你使用一个循环模板，此参数为你当前迭代的数组的总长度。
    • fm : Ext.util.Format的别名。
    以下例子示范了基本用法，不使用内嵌代码块和xindex变量:

    var tpl = new Ext.XTemplate(
    '<p>Name: {name}</p>',
    '<p>Company: {[values.company.toUpperCase() + ", " + values.title]}</p>',
    '<p>Kids: ',
    '<tpl for="kids">',
       '<div class="{[xindex % 2 === 0 ? "even" : "odd"]}">',
        '{name}',
        '</div>',
    '</tpl></p>'
);
tpl.overwrite(panel.body, data);
  • 模板成员函数

    可以在配置对象中定义一个或多个成员函数传递给XTemplate的构造函数， 以便进行更复杂的处理：

    var tpl = new Ext.XTemplate(
    '<p>Name: {name}</p>',
    '<p>Kids: ',
    '<tpl for="kids">',
        '<tpl if="this.isGirl(name)">',
            '<p>Girl: {name} - {age}</p>',
        '</tpl>',
        // use opposite if statement to simulate 'else' processing:
        '<tpl if="this.isGirl(name) == false">',
            '<p>Boy: {name} - {age}</p>',
        '</tpl>',
        '<tpl if="this.isBaby(age)">',
            '<p>{name} is a baby!</p>',
        '</tpl>',
    '</tpl></p>',
    {
        // XTemplate configuration:
        compiled: true,
        disableFormats: true,
        // member functions:
        isGirl: function(name){
            return name == 'Sara Grace';
        },
        isBaby: function(age){
            return age < 1;
        }
    }
);
tpl.overwrite(panel.body, data);
参数:
  • config : Mixed
返回值:
  • void
XTemplate
XTemplate.from ( String/HTMLElement el ) : Ext.Template
<静态> 从所传递元素的值创建一个模板( display:none textarea, preferred)或者 innerHTML.
<静态> 从所传递元素的值创建一个模板( display:none textarea, preferred)或者 innerHTML.
参数:
  • el : String/HTMLElement
    一个DOM元素或者它的id
返回值:
  • Ext.Template
    创建的模板
XTemplate
append ( Mixed el , Object/Array values , [ Boolean returnElement ] ) : HTMLElement/Ext.Element
将提供的 values 应用到模板，并将新节点(s)添加到指定的 el ...
将提供的 values 应用到模板，并将新节点(s)添加到指定的 el .

示例用法参见 see the constructor.

参数:
  • el : Mixed
    内容元素
  • values : Object/Array
    模板值。 如果你的参数是数值(例如 {0} )可以是一个数组， 或者是一个对象(例如 {foo: 'bar'} )
  • returnElement : Boolean
    (可选)true将会返回一个Ext.Element (默认为undefined)
返回值:
  • HTMLElement/Ext.Element
    新节点或者Element
Template
apply ( Object/Array values ) : String
applyTemplate的 别名。返回当前模板的HTML片段，模板应用了指定的值。
applyTemplate的 别名。返回当前模板的HTML片段，模板应用了指定的值。
参数:
  • values : Object/Array
    模板值。 如果你的参数是数值(例如{0})可以是一个数组，或者是一个对象(例如{foo: 'bar'})
返回值:
  • String
    HTML片段
XTemplate
applyTemplate ( Object values ) : String
返回当前模板的HTML片段，模板应用了指定的值。
返回当前模板的HTML片段，模板应用了指定的值。
参数:
  • values : Object
    模板值。 如果你的参数是数值(例如{0})可以是一个数组，或者是一个对象(例如{foo: 'bar'})
返回值:
  • String
    HTML片段
XTemplate
compile () : Function
将模板编译成一个函数以提升性能。 如果模板将会被频繁使用，强烈推荐此方法。
将模板编译成一个函数以提升性能。 如果模板将会被频繁使用，强烈推荐此方法。
参数:
  • 无。
返回值:
  • Function
    编译后的函数
XTemplate
insertAfter ( Mixed el , Object/Array values , [ Boolean returnElement ] ) : HTMLElement/Ext.Element
将提供的值应用到模板并将新节点(s)插入到el之后。
将提供的值应用到模板并将新节点(s)插入到el之后。
参数:
  • el : Mixed
    内容元素
  • values : Object/Array
    模板值。 如果你的参数是数值(例如{0})可以是一个数组， 或者是一个对象(例如{foo:'bar'})
  • returnElement : Boolean
    (可选)true将会返回一个Ext.Element (默认为undefined)
返回值:
  • HTMLElement/Ext.Element
    新节点或者Element
Template
insertBefore ( Mixed el , Object/Array values , [ Boolean returnElement ] ) : HTMLElement/Ext.Element
将提供的新值应用到模板上并将新节点(s)插入到el之前。
将提供的新值应用到模板上并将新节点(s)插入到el之前。
参数:
  • el : Mixed
    内容元素
  • values : Object/Array
    模板值。 如果你的参数是数值(例如{0})可以是一个数组，或者是一个对象(例如{foo: 'bar'})
  • returnElement : Boolean
    (可选)true将会返回一个Ext.Element (默认为 undefined)
返回值:
  • HTMLElement/Ext.Element
    新节点或者Element
Template
insertFirst ( Mixed el , Object/Array values , [ Boolean returnElement ] ) : HTMLElement/Ext.Element
将提供的值应用到模板上并将新节点(s)插入为el的第一个孩子。
将提供的值应用到模板上并将新节点(s)插入为el的第一个孩子。
参数:
  • el : Mixed
    内容元素
  • values : Object/Array
    模板值。 如果你的参数是数值(例如{0})可以是一个数组， 或者是一个对象(例如{foo:'bar'})
  • returnElement : Boolean
    (可选) true将返回一个Ext.Element (默认为 undefined)
返回值:
  • HTMLElement/Ext.Element
    新节点或者Element
Template
overwrite ( Mixed el , Object/Array values , [ Boolean returnElement ] ) : HTMLElement/Ext.Element
将提供的新值应用到模板上，并用新节点(s)覆盖el的内容。
将提供的新值应用到模板上，并用新节点(s)覆盖el的内容。
参数:
  • el : Mixed
    内容元素
  • values : Object/Array
    模板值。 如果你的参数是数值(例如{0})可以是一个数组，或者是一个对象(例如{foo: 'bar'})
  • returnElement : Boolean
    (可选)true将会返回一个Ext.Element (默认为undefined)
返回值:
  • HTMLElement/Ext.Element
    新节点或者Element
Template

公共事件

该类没有公共事件。


Class Function

包: | Global(全局)
定义类的文件: | Ext.js
类: | Function
继承自: | Object
这些方法对于每个Function对象都有效（任何JavaScript函数）。

公共属性

该类没有公共属性。

公共方法

Method Defined By
createCallback () : Function
创建一个回调函数，传递arguments[0], arguments[1], arguments[2], ...此方法可以在任何函数上调用。例如...
创建一个回调函数，传递arguments[0], arguments[1], arguments[2], ...此方法可以在任何函数上调用。例如： myFunction.createCallback(arg1, arg2) 就创建了一个绑定了那两个参数的方法。
如果回调函数需要特定的作用域，请用 createDelegate 方法代替。 createCallback()方法返回的函数总是在window作用域（顶级作用域）中执行。

如果你想给一个回调方法传递参数，则需要使用该方法。 如果不需要参数，你可以直接简单地传递一个函数的引用给需要回调的地方就可以了 (例如callback: myFn)。 （译者注：这句话的意思就是说，如果你不需要向回调函数传递参数， 就没有必要使用createCallback()这个方法， 直接按照常规的方式写就可以了）。
然而，（译者注：按照常规的写法的话） ，如果你尝试向回调函数传递参数，(例如callback: myFn(arg1, arg2))。 那么这个函数在js代码被浏览器解析的时候就会被简单地执行(而不是你期望的在发生某件事情之后再来调用)。
（译者注： 请注意这里关于的“回调”的概念和实例，朋友跟我说， 他们公司的一些新手就是搞不懂回调的概念，希望看到这里的朋友自己思量一下。）
示例用法:

var sayHi = function(name){
    alert('Hi, ' + name);
}

//点击按钮，弹出"Hi, Fred"

new Ext.Button({
    text: 'Say Hi',
    renderTo: Ext.getBody(),
    handler: sayHi.createCallback('Fred')
});
参数:
  • 无。
返回值:
  • Function
    新的函数
Function
createDelegate ( [ Object scope ], [ Array args ], [ Boolean/Number appendArgs ] ) : Function
创建一个代理（回调）函数，把作用域设置到参数obj上。 该函数可以直接再任何函数上调用。例如...
创建一个代理（回调）函数，把作用域设置到参数obj上。 该函数可以直接再任何函数上调用。例如: this.myFunction.createDelegate(this, [arg1, arg2]) 将会创建一函数并自动把作用域设置到obj上，这样，回调函数内部的 this参数就指向了obj。
示例用法:

var sayHi = function(name){
   // 注意 这里 这个"this.text"的用法。当前这个方法 期望
    // 在一个含有text属性的作用域中被执行。  在这个
    // 例子中，"this"变量指向了下面被
    // 传递进来的btn对象。
    alert('Hi, ' + name + '. You clicked the "' + this.text + '" button.');
}

var btn = new Ext.Button({
    text: 'Say Hi',
    renderTo: Ext.getBody()
});

// 这个回调函数将会 在 button实例的作用域中执行。
// 点击这个按钮会弹出
// "Hi, Fred. You clicked the "Say Hi" button."
btn.on('click', sayHi.createDelegate(btn, ['Fred']));
参数:
  • scope : Object
    (可选)作用域( this 引用)，函数在作用域中被执行。 如果省略，默认为浏览器的window对象。
  • args : Array
    (可选) 覆盖默认的调用参数。(默认为调用者传递进来的参数。)
  • appendArgs : Boolean/Number
    (可选) 如果为true，（第二个参数）args被添加到调用参数中而不是覆盖。 如果为数字，（第二个参数）args将被插入到指定的位置。
返回值:
  • Function
    新的函数
Function
createInterceptor ( Function fcn , [ Object scope ] ) : Function
创建一个拦截函数。传入的函数在原始的函数之前执行。如果...
创建一个拦截函数。传入的函数在原始的函数之前执行。如果传入的函数返回false， 就不执行原始的函数。最终函数返回原始函数的执行结果。传递进来的函数使用原始函数的参数来调用。
示例用法:

var sayHi = function(name){
    alert('Hi, ' + name);
}

sayHi('Fred'); // alerts "Hi, Fred"

// create a new function that validates input without
// directly modifying the original function:
var sayHiToFriend = sayHi.createInterceptor(function(name){
    return name == 'Brian';
});

sayHiToFriend('Fred');  // no alert
sayHiToFriend('Brian'); // alerts "Hi, Brian"
参数:
  • fcn : Function
    需要在原始函数调用之前被调用的函数
  • scope : Object
    (可选)作用域( this 引用)传递进来的函数将会在此作用域内执行。 如果省略此参数，默认在原始函数被调用的那个作用域，或者在浏览器的window作用域中执行。
返回值:
  • Function
    新的函数
Function
createSequence ( Function fcn , [ Object scope ] ) : Function
使用原始的函数和传递进来的函数来创建一个组合的函数调用顺序...
使用原始的函数和传递进来的函数来创建一个组合的函数调用顺序（译者注：这是一 种类似管道式的调用效果，使用第一个函数的参数来调用第二个函数）。 最终执行的函数返回原始函数的结果。 使用原始函数的参数来调用传递进来的函数。
示例用法:

var sayHi = function(name){
    alert('Hi, ' + name);
}

sayHi('Fred'); // alerts "Hi, Fred"

var sayGoodbye = sayHi.createSequence(function(name){
    alert('Bye, ' + name);
});

sayGoodbye('Fred'); // both alerts show
参数:
  • fcn : Function
    需要顺序执行的函数
  • scope : Object
    (可选) 作用域( this 引用)函数在此作用域中被执行。 如果省略此参数，默认在原始函数被调用的那个作用域， 或者在浏览器的window作用域中执行。
返回值:
  • Function
    新的函数
Function
defer ( Number millis , [ Object scope ], [ Array args ], [ Boolean/Number appendArgs ] ) : Number
在指定的毫秒数之后调用函数，同时可以指定特定的作用域。...
在指定的毫秒数之后调用函数，同时可以指定特定的作用域。
示例用法:

var sayHi = function(name){
    alert('Hi, ' + name);
}

// executes immediately:
sayHi('Fred');

// executes after 2 seconds:
sayHi.defer(2000, this, ['Fred']);

// this syntax is sometimes useful for deferring
// execution of an anonymous function:
(function(){
    alert('Anonymous');
}).defer(100);
参数:
  • millis : Number
    设置调用setTimeout的毫秒数（如果为0函数立即被调用）。
  • scope : Object
    (可选)作用域( this 引用)函数在此作用域中被执行。 如果省略，默认为浏览器的window作用域。
  • args : Array
    (可选)覆盖默认的调用参数。(默认为调用者传递进来的参数。)
  • appendArgs : Boolean/Number
    (可选)如果为true，（第二个参数）args被添加到调用参数中而不是覆盖。如果为数字，（第二个参数）args将被插入到指定的位置。
返回值:
  • Number
    定时器id，可以用clearTimeout()来清除此定时器
Function

公共事件

该类没有公共事件。


Class Number

包: | Global(全局)
定义类的文件: | Ext-more.js
类: | Number
继承自: | Object

公共属性

该类没有公共属性。

公共方法

Method Defined By
constrain ( Number min , Number max ) : Number
检查当前数值是否处于指定的区间之内，如果当前值处于区间内，直接返回该值；否则 ...
检查当前数值是否处于指定的区间之内，如果当前值处于区间内，直接返回该值；否则返回min或max，取决于当前值超出了哪一个边界。
注意：该方法返回约束值，但 不改变当前值。
参数:
  • min : Number
    区间内的最小值
  • max : Number
    区间内的最大值
返回值:
  • Number
    如果数值处于区间内，返回该值；如果数值小于min，返回min；如果数值大于max，返回max。
Number

公共事件

该类没有公共事件。


Class String

包: | Global(全局)
定义类的文件: | Ext.js
类: | String
继承自: | Object
这些函数对所有的String对象都有效。

公共属性

该类没有公共属性。

公共方法

Method Defined By
escape ( String string ) : String
<静态> 将传进来的String中的’和\过滤掉。
<静态> 将传进来的String中的’和\过滤掉。
参数:
  • string : String
    需要进行过滤的字符串
返回值:
  • String
    过滤后的字符串
String
format ( String string , String value1 , String value2 ) : String
<静态> 允许你自定义含有占位符的字符串，并且传递任意数量的参数去替代这些占位符。每一个占位符必须是...
<静态> 允许你自定义含有占位符的字符串，并且传递任意数量的参数去替代这些占位符。每一个占位符必须是唯一的，并且以{0}、{1}…这种格式递增。 示例用法:

var cls = 'my-class', text = 'Some text';
var s = String.format('<div class="{0}">{1}</div>', cls, text);
// s now contains the string: '<div class="my-class">Some text</div>'
参数:
  • string : String
    含有占位符，需要格式化的字符串
  • value1 : String
    替代占位符 {0}的字符串
  • value2 : String
    等等（译者注：以此类推）...
返回值:
  • String
    格式化后的字符串
String
leftPad ( String string , Number size , [ String char ] ) : String
<静态> 用指定的字符填充一个字符串的左侧。对于格式化数字或者日期字符串，这是...
<静态> 用指定的字符填充一个字符串的左侧。对于格式化数字或者日期字符串，这是一个非常有用的方法。 示例用法:

var s = String.leftPad('123', 5, '0');
// s now contains the string: '00123'
参数:
  • string : String
    原来的字符串
  • size : Number
    输出字符串的总长度
  • char : String
    (可选 )填充的字符串(默认用空字符" "填充)
返回值:
  • String
    填充好的字符串
String
toggle ( String value , String other ) : String
工具方法，帮助你轻松地在两个字符串之间轮换取值...
工具方法，帮助你轻松地在两个字符串之间轮换取值。传入的第一个参数值会与当前字符串进行比较，如果它们相等，则把当前字符串赋值 为传入的第二个参数。否则，保持当前值不变。 注意，该方法会返回一个新的字符串，而不是去改变当前字符串。

// alternate sort directions
sort = sort.toggle('ASC', 'DESC');

// instead of conditional logic:
sort = (sort == 'ASC' ? 'DESC' : 'ASC');
参数:
  • value : String
    需要与当前值进行比较的字符串
  • other : String
    如当前字符串与第一个传入的参数相等，赋值给当前字符串的新值
返回值:
  • String
    新的字符串
String
trim () : String
去掉字符串两端的空格,保持中间的空格不变...
去掉字符串两端的空格,保持中间的空格不变。 示例用法:

var s = '  foo bar  ';
alert('-' + s + '-');         //alerts "- foo bar -"

alert('-' + s.trim() + '-');  //alerts "-foo bar-"
参数:
  • 无。
返回值:
  • String
    去掉两端空格后的字符串
String

公共事件

该类没有公共事件。


The source code

/*!
 * Ext JS Library 3.2.0
 * Copyright(c) 2006-2010 Ext JS, Inc.
 * licensing@extjs.com
 * http://www.extjs.com/license
 */

/**
 * @class Ext.layout.AbsoluteLayout
 * @extends Ext.layout.AnchorLayout
 *
This is a layout that inherits the anchoring of {@link Ext.layout.AnchorLayout} and adds the
 * ability for x/y positioning using the standard x and y component config options.

 *
This class is intended to be extended or created via the {@link Ext.Container#layout layout}
 * configuration property.  See {@link Ext.Container#layout} for additional details.

 *
Example usage:

 *

var form = new Ext.form.FormPanel({
    title: 'Absolute Layout',
    layout:'absolute',
    layoutConfig: {
        // layout-specific configs go here
        extraCls: 'x-abs-layout-item',
    },
    baseCls: 'x-plain',
    url:'save-form.php',
    defaultType: 'textfield',
    items: [{
        x: 0,
        y: 5,
        xtype:'label',
        text: 'Send To:'
    },{
        x: 60,
        y: 0,
        name: 'to',
        anchor:'100%'  // anchor width by percentage
    },{
        x: 0,
        y: 35,
        xtype:'label',
        text: 'Subject:'
    },{
        x: 60,
        y: 30,
        name: 'subject',
        anchor: '100%'  // anchor width by percentage
    },{
        x:0,
        y: 60,
        xtype: 'textarea',
        name: 'msg',
        anchor: '100% 100%'  // anchor width and height
    }]
});

 */
Ext.layout.AbsoluteLayout = Ext.extend(Ext.layout.AnchorLayout, {

    extraCls: 'x-abs-layout-item',

    type: 'absolute',

    onLayout : function(ct, target){
        target.position();
        this.paddingLeft = target.getPadding('l');
        this.paddingTop = target.getPadding('t');
        Ext.layout.AbsoluteLayout.superclass.onLayout.call(this, ct, target);
    },

    // private
    adjustWidthAnchor : function(value, comp){
        return value ? value - comp.getPosition(true)[0] + this.paddingLeft : value;
    },

    // private
    adjustHeightAnchor : function(value, comp){
        return  value ? value - comp.getPosition(true)[1] + this.paddingTop : value;
    }

/**
     * @property activeItem
     * @hide
     */
});
Ext.Container.LAYOUTS['absolute'] = Ext.layout.AbsoluteLayout;


The source code

/*!
 * licensing@extjs.com
 * http://www.extjs.com/license
 */

/**
 * @class Ext.grid.AbstractSelectionModel
 * @extends Ext.util.Observable
 * Abstract base class for grid SelectionModels.  It provides the interface that should be
 * implemented by descendant classes.  This class should not be directly instantiated.
 * @constructor
 */
Ext.grid.AbstractSelectionModel = Ext.extend(Ext.util.Observable,  {

/**
     * The GridPanel for which this SelectionModel is handling selection. Read-only.
     * @type Object
     * @property grid
     */

    constructor : function(){
        this.locked = false;
        Ext.grid.AbstractSelectionModel.superclass.constructor.call(this);
    },

    /** @ignore Called by the grid automatically. Do not call directly. */
    init : function(grid){
        this.grid = grid;
        if(this.lockOnInit){
            delete this.lockOnInit;
            this.locked = false;
            this.lock();
        }
        this.initEvents();
    },

/**
     * Locks the selections.
     */
    lock : function(){
        if(!this.locked){
            this.locked = true;
            // If the grid has been set, then the view is already initialized.
            var g = this.grid;
            if(g){
                g.getView().on({
                    scope: this,
                    beforerefresh: this.sortUnLock,
                    refresh: this.sortLock
                });
            }else{
                this.lockOnInit = true;
            }
        }
    },

    // set the lock states before and after a view refresh
    sortLock : function() {
        this.locked = true;
    },

    // set the lock states before and after a view refresh
    sortUnLock : function() {
        this.locked = false;
    },

/**
     * Unlocks the selections.
     */
    unlock : function(){
        if(this.locked){
            this.locked = false;
            var g = this.grid,
                gv;

            // If the grid has been set, then the view is already initialized.
            if(g){
                gv = g.getView();
                gv.un('beforerefresh', this.sortUnLock, this);
                gv.un('refresh', this.sortLock, this);
            }else{
                delete this.lockOnInit;
            }
        }
    },

/**
     * Returns true if the selections are locked.
     * @return {Boolean}
     */
    isLocked : function(){
        return this.locked;
    },

    destroy: function(){
        this.unlock();
        this.purgeListeners();
    }
});


The source code

/*!
 * licensing@extjs.com
 * http://www.extjs.com/license
 */

/**
 * @class Ext.layout.AccordionLayout
 * @extends Ext.layout.FitLayout
 *
This is a layout that manages multiple Panels in an expandable accordion style such that only
 * one Panel can be expanded at any given time. Each Panel has built-in support for expanding and collapsing.

 *
Note: Only Ext.Panels and all subclasses of Ext.Panel may be used in an accordion layout Container.

 *
This class is intended to be extended or created via the {@link Ext.Container#layout layout}
 * configuration property.  See {@link Ext.Container#layout} for additional details.

 *
Example usage:

 *

var accordion = new Ext.Panel({
    title: 'Accordion Layout',
    layout:'accordion',
    defaults: {
        // applied to each contained panel
        bodyStyle: 'padding:15px'
    },
    layoutConfig: {
        // layout-specific configs go here
        titleCollapse: false,
        animate: true,
        activeOnTop: true
    },
    items: [{
        title: 'Panel 1',
        html: '<p>Panel content!</p>'
    },{
        title: 'Panel 2',
        html: '<p>Panel content!</p>'
    },{
        title: 'Panel 3',
        html: '<p>Panel content!</p>'
    }]
});

 */
Ext.layout.AccordionLayout = Ext.extend(Ext.layout.FitLayout, {

/**
     * @cfg {Boolean} fill
     * True to adjust the active item's height to fill the available space in the container, false to use the
     * item's current height, or auto height if not explicitly set (defaults to true).
     */
    fill : true,

/**
     * @cfg {Boolean} autoWidth
     * True to set each contained item's width to 'auto', false to use the item's current width (defaults to true).
     * Note that some components, in particular the {@link Ext.grid.GridPanel grid}, will not function properly within
     * layouts if they have auto width, so in such cases this config should be set to false.
     */
    autoWidth : true,

/**
     * @cfg {Boolean} titleCollapse
     * True to allow expand/collapse of each contained panel by clicking anywhere on the title bar, false to allow
     * expand/collapse only when the toggle tool button is clicked (defaults to true).  When set to false,
     * {@link #hideCollapseTool} should be false also.
     */
    titleCollapse : true,

/**
     * @cfg {Boolean} hideCollapseTool
     * True to hide the contained panels' collapse/expand toggle buttons, false to display them (defaults to false).
     * When set to true, {@link #titleCollapse} should be true also.
     */
    hideCollapseTool : false,

/**
     * @cfg {Boolean} collapseFirst
     * True to make sure the collapse/expand toggle button always renders first (to the left of) any other tools
     * in the contained panels' title bars, false to render it last (defaults to false).
     */
    collapseFirst : false,

/**
     * @cfg {Boolean} animate
     * True to slide the contained panels open and closed during expand/collapse using animation, false to open and
     * close directly with no animation (defaults to false).  Note: to defer to the specific config setting of each
     * contained panel for this property, set this to undefined at the layout level.
     */
    animate : false,

/**
     * @cfg {Boolean} sequence
     * Experimental. If animate is set to true, this will result in each animation running in sequence.
     */
    sequence : false,

/**
     * @cfg {Boolean} activeOnTop
     * True to swap the position of each panel as it is expanded so that it becomes the first item in the container,
     * false to keep the panels in the rendered order. This is NOT compatible with "animate:true" (defaults to false).
     */
    activeOnTop : false,

    type: 'accordion',

    renderItem : function(c){
        if(this.animate === false){
            c.animCollapse = false;
        }
        c.collapsible = true;
        if(this.autoWidth){
            c.autoWidth = true;
        }
        if(this.titleCollapse){
            c.titleCollapse = true;
        }
        if(this.hideCollapseTool){
            c.hideCollapseTool = true;
        }
        if(this.collapseFirst !== undefined){
            c.collapseFirst = this.collapseFirst;
        }
        if(!this.activeItem && !c.collapsed){
            this.setActiveItem(c, true);
        }else if(this.activeItem && this.activeItem != c){
            c.collapsed = true;
        }
        Ext.layout.AccordionLayout.superclass.renderItem.apply(this, arguments);
        c.header.addClass('x-accordion-hd');
        c.on('beforeexpand', this.beforeExpand, this);
    },

    onRemove: function(c){
        Ext.layout.AccordionLayout.superclass.onRemove.call(this, c);
        if(c.rendered){
            c.header.removeClass('x-accordion-hd');
        }
        c.un('beforeexpand', this.beforeExpand, this);
    },

    // private
    beforeExpand : function(p, anim){
        var ai = this.activeItem;
        if(ai){
            if(this.sequence){
                delete this.activeItem;
                if (!ai.collapsed){
                    ai.collapse({callback:function(){
                        p.expand(anim || true);
                    }, scope: this});
                    return false;
                }
            }else{
                ai.collapse(this.animate);
            }
        }
        this.setActive(p);
        if(this.activeOnTop){
            p.el.dom.parentNode.insertBefore(p.el.dom, p.el.dom.parentNode.firstChild);
        }
        // Items have been hidden an possibly rearranged, we need to get the container size again.
        this.layout();
    },

    // private
    setItemSize : function(item, size){
        if(this.fill && item){
            var hh = 0, i, ct = this.getRenderedItems(this.container), len = ct.length, p;
            // Add up all the header heights
            for (i = 0; i < len; i++) {
                if((p = ct[i]) != item){
                    hh += p.header.getHeight();
                }
            };
            // Subtract the header heights from the container size
            size.height -= hh;
            // Call setSize on the container to set the correct height.  For Panels, deferedHeight
            // will simply store this size for when the expansion is done.
            item.setSize(size);
        }
    },

/**
     * Sets the active (expanded) item in the layout.
     * @param {String/Number} item The string component id or numeric index of the item to activate
     */
    setActiveItem : function(item){
        this.setActive(item, true);
    },

    // private
    setActive : function(item, expand){
        var ai = this.activeItem;
        item = this.container.getComponent(item);
        if(ai != item){
            if(item.rendered && item.collapsed && expand){
                item.expand();
            }else{
                if(ai){
                   ai.fireEvent('deactivate', ai);
                }
                this.activeItem = item;
                item.fireEvent('activate', item);
            }
        }
    }
});
Ext.Container.LAYOUTS.accordion = Ext.layout.AccordionLayout;

//backwards compat
Ext.layout.Accordion = Ext.layout.AccordionLayout;


The source code

/*!
 * licensing@extjs.com
 * http://www.extjs.com/license
 */

/**
 * @class Ext.form.Action
 *
The subclasses of this class provide actions to perform upon {@link Ext.form.BasicForm Form}s.

 *
Instances of this class are only created by a {@link Ext.form.BasicForm Form} when
 * the Form needs to perform an action such as submit or load. The Configuration options
 * listed for this class are set through the Form's action methods: {@link Ext.form.BasicForm#submit submit},
 * {@link Ext.form.BasicForm#load load} and {@link Ext.form.BasicForm#doAction doAction}

 *
The instance of Action which performed the action is passed to the success
 * and failure callbacks of the Form's action methods ({@link Ext.form.BasicForm#submit submit},
 * {@link Ext.form.BasicForm#load load} and {@link Ext.form.BasicForm#doAction doAction}),
 * and to the {@link Ext.form.BasicForm#actioncomplete actioncomplete} and
 * {@link Ext.form.BasicForm#actionfailed actionfailed} event handlers.

 */
Ext.form.Action = function(form, options){
    this.form = form;
    this.options = options || {};
};

/**
 * Failure type returned when client side validation of the Form fails
 * thus aborting a submit action. Client side validation is performed unless
 * {@link #clientValidation} is explicitly set to false.
 * @type {String}
 * @static
 */
Ext.form.Action.CLIENT_INVALID = 'client';

/**
 *
Failure type returned when server side processing fails and the {@link #result}'s
 * success property is set to false.

 *
In the case of a form submission, field-specific error messages may be returned in the
 * {@link #result}'s errors property.

 * @type {String}
 * @static
 */
Ext.form.Action.SERVER_INVALID = 'server';

/**
 * Failure type returned when a communication error happens when attempting
 * to send a request to the remote server. The {@link #response} may be examined to
 * provide further information.
 * @type {String}
 * @static
 */
Ext.form.Action.CONNECT_FAILURE = 'connect';

/**
 * Failure type returned when the response's success
 * property is set to false, or no field values are returned in the response's
 * data property.
 * @type {String}
 * @static
 */
Ext.form.Action.LOAD_FAILURE = 'load';

Ext.form.Action.prototype = {

/**
 * @cfg {String} url The URL that the Action is to invoke.
 */

/**
 * @cfg {Boolean} reset When set to true, causes the Form to be
 * {@link Ext.form.BasicForm.reset reset} on Action success. If specified, this happens
 * before the {@link #success} callback is called and before the Form's
 * {@link Ext.form.BasicForm.actioncomplete actioncomplete} event fires.
 */

/**
 * @cfg {String} method The HTTP method to use to access the requested URL. Defaults to the
 * {@link Ext.form.BasicForm}'s method, or if that is not specified, the underlying DOM form's method.
 */

/**
 * @cfg {Mixed} params
Extra parameter values to pass. These are added to the Form's
 * {@link Ext.form.BasicForm#baseParams} and passed to the specified URL along with the Form's
 * input fields.

 *
Parameters are encoded as standard HTTP parameters using {@link Ext#urlEncode}.

 */

/**
 * @cfg {Number} timeout The number of seconds to wait for a server response before
 * failing with the {@link #failureType} as {@link #Action.CONNECT_FAILURE}. If not specified,
 * defaults to the configured {@link Ext.form.BasicForm#timeout timeout} of the
 * {@link Ext.form.BasicForm form}.
 */

/**
 * @cfg {Function} success The function to call when a valid success return packet is recieved.
 * The function is passed the following parameters:

 *
  • form : Ext.form.BasicForm
    The form that requested the action
    •
 *
  • action : Ext.form.Action
    The Action class. The {@link #result}
 * property of this object may be examined to perform custom postprocessing.
    •
 *

 */

/**
 * @cfg {Function} failure The function to call when a failure packet was recieved, or when an
 * error ocurred in the Ajax communication.
 * The function is passed the following parameters:

 *
  • form : Ext.form.BasicForm
    The form that requested the action
    •
 *
  • action : Ext.form.Action
    The Action class. If an Ajax
 * error ocurred, the failure type will be in {@link #failureType}. The {@link #result}
 * property of this object may be examined to perform custom postprocessing.
    •
 *

 */

/**
 * @cfg {Object} scope The scope in which to call the callback functions (The this reference
 * for the callback functions).
 */

/**
 * @cfg {String} waitMsg The message to be displayed by a call to {@link Ext.MessageBox#wait}
 * during the time the action is being processed.
 */

/**
 * @cfg {String} waitTitle The title to be displayed by a call to {@link Ext.MessageBox#wait}
 * during the time the action is being processed.
 */

/**
 * @cfg {Boolean} submitEmptyText If set to true, the emptyText value will be sent with the form
 * when it is submitted.  Defaults to true.
 */

/**
 * The type of action this Action instance performs.
 * Currently only "submit" and "load" are supported.
 * @type {String}
 */
    type : 'default',

/**
 * The type of failure detected will be one of these: {@link #CLIENT_INVALID},
 * {@link #SERVER_INVALID}, {@link #CONNECT_FAILURE}, or {@link #LOAD_FAILURE}.  Usage:
 *

var fp = new Ext.form.FormPanel({
...
buttons: [{
    text: 'Save',
    formBind: true,
    handler: function(){
        if(fp.getForm().isValid()){
            fp.getForm().submit({
                url: 'form-submit.php',
                waitMsg: 'Submitting your data...',
                success: function(form, action){
                    // server responded with success = true
                    var result = action.{@link #result};
                },
                failure: function(form, action){
                    if (action.{@link #failureType} === Ext.form.Action.{@link #CONNECT_FAILURE}) {
                        Ext.Msg.alert('Error',
                            'Status:'+action.{@link #response}.status+': '+
                            action.{@link #response}.statusText);
                    }
                    if (action.failureType === Ext.form.Action.{@link #SERVER_INVALID}){
                        // server responded with success = false
                        Ext.Msg.alert('Invalid', action.{@link #result}.errormsg);
                    }
                }
            });
        }
    }
},{
    text: 'Reset',
    handler: function(){
        fp.getForm().reset();
    }
}]
 *

 * @property failureType
 * @type {String}
 */

/**
 * The XMLHttpRequest object used to perform the action.
 * @property response
 * @type {Object}
 */

/**
 * The decoded response object containing a boolean success property and
 * other, action-specific properties.
 * @property result
 * @type {Object}
 */

    // interface method
    run : function(options){

    },

    // interface method
    success : function(response){

    },

    // interface method
    handleResponse : function(response){

    },

    // default connection failure
    failure : function(response){
        this.response = response;
        this.failureType = Ext.form.Action.CONNECT_FAILURE;
        this.form.afterAction(this, false);
    },

    // private
    // shared code among all Actions to validate that there was a response
    // with either responseText or responseXml
    processResponse : function(response){
        this.response = response;
        if(!response.responseText && !response.responseXML){
            return true;
        }
        this.result = this.handleResponse(response);
        return this.result;
    },

    // utility functions used internally
    getUrl : function(appendParams){
        var url = this.options.url || this.form.url || this.form.el.dom.action;
        if(appendParams){
            var p = this.getParams();
            if(p){
                url = Ext.urlAppend(url, p);
            }
        }
        return url;
    },

    // private
    getMethod : function(){
        return (this.options.method || this.form.method || this.form.el.dom.method || 'POST').toUpperCase();
    },

    // private
    getParams : function(){
        var bp = this.form.baseParams;
        var p = this.options.params;
        if(p){
            if(typeof p == "object"){
                p = Ext.urlEncode(Ext.applyIf(p, bp));
            }else if(typeof p == 'string' && bp){
                p += '&' + Ext.urlEncode(bp);
            }
        }else if(bp){
            p = Ext.urlEncode(bp);
        }
        return p;
    },

    // private
    createCallback : function(opts){
        var opts = opts || {};
        return {
            success: this.success,
            failure: this.failure,
            scope: this,
            timeout: (opts.timeout*1000) || (this.form.timeout*1000),
            upload: this.form.fileUpload ? this.success : undefined
        };
    }
};

/**
 * @class Ext.form.Action.Submit
 * @extends Ext.form.Action
 *
A class which handles submission of data from {@link Ext.form.BasicForm Form}s
 * and processes the returned response.

 *
Instances of this class are only created by a {@link Ext.form.BasicForm Form} when
 * {@link Ext.form.BasicForm#submit submit}ting.

 *
Response Packet Criteria

 *
A response packet may contain:
 *

 *
  • success property : Boolean
 *
    The success property is required.
    •
 *
  • errors property : Object
 *
    The errors property,
 * which is optional, contains error messages for invalid fields.
    •
 *

 *
JSON Packets

 *
By default, response packets are assumed to be JSON, so a typical response
 * packet may look like this:

{
    success: false,
    errors: {
        clientCode: "Client not found",
        portOfLoading: "This field must not be null"
    }
}

 *
Other data may be placed into the response for processing by the {@link Ext.form.BasicForm}'s callback
 * or event handler methods. The object decoded from this JSON is available in the
 * {@link Ext.form.Action#result result} property.

 *
Alternatively, if an {@link #errorReader} is specified as an {@link Ext.data.XmlReader XmlReader}:

    errorReader: new Ext.data.XmlReader({
            record : 'field',
            success: '@success'
        }, [
            'id', 'msg'
        ]
    )

 *
then the results may be sent back in XML format:

<?xml version="1.0" encoding="UTF-8"?>
<message success="false">
<errors>
    <field>
        <id>clientCode</id>
        <msg><![CDATA[Code not found. <br /><i>This is a test validation message from the server </i>]]></msg>
    </field>
    <field>
        <id>portOfLoading</id>
        <msg><![CDATA[Port not found. <br /><i>This is a test validation message from the server </i>]]></msg>
    </field>
</errors>
</message>

 *
Other elements may be placed into the response XML for processing by the {@link Ext.form.BasicForm}'s callback
 * or event handler methods. The XML document is available in the {@link #errorReader}'s {@link Ext.data.XmlReader#xmlData xmlData} property.

 */
Ext.form.Action.Submit = function(form, options){
    Ext.form.Action.Submit.superclass.constructor.call(this, form, options);
};

Ext.extend(Ext.form.Action.Submit, Ext.form.Action, {

/**
     * @cfg {Ext.data.DataReader} errorReader
Optional. JSON is interpreted with
     * no need for an errorReader.

     *
A Reader which reads a single record from the returned data. The DataReader's
     * success property specifies how submission success is determined. The Record's
     * data provides the error messages to apply to any invalid form Fields.

     */

/**
     * @cfg {boolean} clientValidation Determines whether a Form's fields are validated
     * in a final call to {@link Ext.form.BasicForm#isValid isValid} prior to submission.
     * Pass false in the Form's submit options to prevent this. If not defined, pre-submission field validation
     * is performed.
     */
    type : 'submit',

    // private
    run : function(){
        var o = this.options,
            method = this.getMethod(),
            isGet = method == 'GET';
        if(o.clientValidation === false || this.form.isValid()){
            if (o.submitEmptyText === false) {
                var fields = this.form.items,
                    emptyFields = [];
                fields.each(function(f) {
                    if (f.el.getValue() == f.emptyText) {
                        emptyFields.push(f);
                        f.el.dom.value = "";
                    }
                });
            }
            Ext.Ajax.request(Ext.apply(this.createCallback(o), {
                form:this.form.el.dom,
                url:this.getUrl(isGet),
                method: method,
                headers: o.headers,
                params:!isGet ? this.getParams() : null,
                isUpload: this.form.fileUpload
            }));
            if (o.submitEmptyText === false) {
                Ext.each(emptyFields, function(f) {
                    if (f.applyEmptyText) {
                        f.applyEmptyText();
                    }
                });
            }
        }else if (o.clientValidation !== false){ // client validation failed
            this.failureType = Ext.form.Action.CLIENT_INVALID;
            this.form.afterAction(this, false);
        }
    },

    // private
    success : function(response){
        var result = this.processResponse(response);
        if(result === true || result.success){
            this.form.afterAction(this, true);
            return;
        }
        if(result.errors){
            this.form.markInvalid(result.errors);
        }
        this.failureType = Ext.form.Action.SERVER_INVALID;
        this.form.afterAction(this, false);
    },

    // private
    handleResponse : function(response){
        if(this.form.errorReader){
            var rs = this.form.errorReader.read(response);
            var errors = [];
            if(rs.records){
                for(var i = 0, len = rs.records.length; i < len; i++) {
                    var r = rs.records[i];
                    errors[i] = r.data;
                }
            }
            if(errors.length < 1){
                errors = null;
            }
            return {
                success : rs.success,
                errors : errors
            };
        }
        return Ext.decode(response.responseText);
    }
});

/**
 * @class Ext.form.Action.Load
 * @extends Ext.form.Action
 *
A class which handles loading of data from a server into the Fields of an {@link Ext.form.BasicForm}.

 *
Instances of this class are only created by a {@link Ext.form.BasicForm Form} when
 * {@link Ext.form.BasicForm#load load}ing.

 *
Response Packet Criteria

 *
A response packet must contain:
 *

 *
  • success property : Boolean
    •
 *
  • data property : Object
    •
 *
    The data property contains the values of Fields to load.
 * The individual value object for each Field is passed to the Field's
 * {@link Ext.form.Field#setValue setValue} method.

 *

 *
JSON Packets

 *
By default, response packets are assumed to be JSON, so for the following form load call:

var myFormPanel = new Ext.form.FormPanel({
    title: 'Client and routing info',
    items: [{
        fieldLabel: 'Client',
        name: 'clientName'
    }, {
        fieldLabel: 'Port of loading',
        name: 'portOfLoading'
    }, {
        fieldLabel: 'Port of discharge',
        name: 'portOfDischarge'
    }]
});
myFormPanel.{@link Ext.form.FormPanel#getForm getForm}().{@link Ext.form.BasicForm#load load}({
    url: '/getRoutingInfo.php',
    params: {
        consignmentRef: myConsignmentRef
    },
    failure: function(form, action) {
        Ext.Msg.alert("Load failed", action.result.errorMessage);
    }
});

 * a success response packet may look like this:

{
    success: true,
    data: {
        clientName: "Fred. Olsen Lines",
        portOfLoading: "FXT",
        portOfDischarge: "OSL"
    }
}

 * while a failure response packet may look like this:

{
    success: false,
    errorMessage: "Consignment reference not found"
}

 *
Other data may be placed into the response for processing the {@link Ext.form.BasicForm Form}'s
 * callback or event handler methods. The object decoded from this JSON is available in the
 * {@link Ext.form.Action#result result} property.

 */
Ext.form.Action.Load = function(form, options){
    Ext.form.Action.Load.superclass.constructor.call(this, form, options);
    this.reader = this.form.reader;
};

Ext.extend(Ext.form.Action.Load, Ext.form.Action, {
    // private
    type : 'load',

    // private
    run : function(){
        Ext.Ajax.request(Ext.apply(
                this.createCallback(this.options), {
                    method:this.getMethod(),
                    url:this.getUrl(false),
                    headers: this.options.headers,
                    params:this.getParams()
        }));
    },

    // private
    success : function(response){
        var result = this.processResponse(response);
        if(result === true || !result.success || !result.data){
            this.failureType = Ext.form.Action.LOAD_FAILURE;
            this.form.afterAction(this, false);
            return;
        }
        this.form.clearInvalid();
        this.form.setValues(result.data);
        this.form.afterAction(this, true);
    },

    // private
    handleResponse : function(response){
        if(this.form.reader){
            var rs = this.form.reader.read(response);
            var data = rs.records && rs.records[0] ? rs.records[0].data : null;
            return {
                success : rs.success,
                data : data
            };
        }
        return Ext.decode(response.responseText);
    }
});

/**
 * @class Ext.form.Action.DirectLoad
 * @extends Ext.form.Action.Load
 *
Provides Ext.direct support for loading form data.

 *
This example illustrates usage of Ext.Direct to load a form through Ext.Direct.

 *

var myFormPanel = new Ext.form.FormPanel({
    // configs for FormPanel
    title: 'Basic Information',
    renderTo: document.body,
    width: 300, height: 160,
    padding: 10,

    // configs apply to child items
    defaults: {anchor: '100%'},
    defaultType: 'textfield',
    items: [{
        fieldLabel: 'Name',
        name: 'name'
    },{
        fieldLabel: 'Email',
        name: 'email'
    },{
        fieldLabel: 'Company',
        name: 'company'
    }],

    // configs for BasicForm
    api: {
        // The server-side method to call for load() requests
        load: Profile.getBasicInfo,
        // The server-side must mark the submit handler as a 'formHandler'
        submit: Profile.updateBasicInfo
    },
    // specify the order for the passed params
    paramOrder: ['uid', 'foo']
});

// load the form
myFormPanel.getForm().load({
    // pass 2 arguments to server side getBasicInfo method (len=2)
    params: {
        foo: 'bar',
        uid: 34
    }
});
 *

 * The data packet sent to the server will resemble something like:
 *

[
    {
        "action":"Profile","method":"getBasicInfo","type":"rpc","tid":2,
        "data":[34,"bar"] // note the order of the params
    }
]
 *

 * The form will process a data packet returned by the server that is similar
 * to the following format:
 *

[
    {
        "action":"Profile","method":"getBasicInfo","type":"rpc","tid":2,
        "result":{
            "success":true,
            "data":{
                "name":"Fred Flintstone",
                "company":"Slate Rock and Gravel",
                "email":"fred.flintstone@slaterg.com"
            }
        }
    }
]
 *

 */
Ext.form.Action.DirectLoad = Ext.extend(Ext.form.Action.Load, {
    constructor: function(form, opts) {
        Ext.form.Action.DirectLoad.superclass.constructor.call(this, form, opts);
    },
    type : 'directload',

    run : function(){
        var args = this.getParams();
        args.push(this.success, this);
        this.form.api.load.apply(window, args);
    },

    getParams : function() {
        var buf = [], o = {};
        var bp = this.form.baseParams;
        var p = this.options.params;
        Ext.apply(o, p, bp);
        var paramOrder = this.form.paramOrder;
        if(paramOrder){
            for(var i = 0, len = paramOrder.length; i < len; i++){
                buf.push(o[paramOrder[i]]);
            }
        }else if(this.form.paramsAsHash){
            buf.push(o);
        }
        return buf;
    },
    // Direct actions have already been processed and therefore
    // we can directly set the result; Direct Actions do not have
    // a this.response property.
    processResponse : function(result) {
        this.result = result;
        return result;
    },

    success : function(response, trans){
        if(trans.type == Ext.Direct.exceptions.SERVER){
            response = {};
        }
        Ext.form.Action.DirectLoad.superclass.success.call(this, response);
    }
});

/**
 * @class Ext.form.Action.DirectSubmit
 * @extends Ext.form.Action.Submit
 *
Provides Ext.direct support for submitting form data.

 *
This example illustrates usage of Ext.Direct to submit a form through Ext.Direct.

 *

var myFormPanel = new Ext.form.FormPanel({
    // configs for FormPanel
    title: 'Basic Information',
    renderTo: document.body,
    width: 300, height: 160,
    padding: 10,
    buttons:[{
        text: 'Submit',
        handler: function(){
            myFormPanel.getForm().submit({
                params: {
                    foo: 'bar',
                    uid: 34
                }
            });
        }
    }],

    // configs apply to child items
    defaults: {anchor: '100%'},
    defaultType: 'textfield',
    items: [{
        fieldLabel: 'Name',
        name: 'name'
    },{
        fieldLabel: 'Email',
        name: 'email'
    },{
        fieldLabel: 'Company',
        name: 'company'
    }],

    // configs for BasicForm
    api: {
        // The server-side method to call for load() requests
        load: Profile.getBasicInfo,
        // The server-side must mark the submit handler as a 'formHandler'
        submit: Profile.updateBasicInfo
    },
    // specify the order for the passed params
    paramOrder: ['uid', 'foo']
});
 *

 * The data packet sent to the server will resemble something like:
 *

{
    "action":"Profile","method":"updateBasicInfo","type":"rpc","tid":"6",
    "result":{
        "success":true,
        "id":{
            "extAction":"Profile","extMethod":"updateBasicInfo",
            "extType":"rpc","extTID":"6","extUpload":"false",
            "name":"Aaron Conran","email":"aaron@extjs.com","company":"Ext JS, LLC"
        }
    }
}
 *

 * The form will process a data packet returned by the server that is similar
 * to the following:
 *

// sample success packet (batched requests)
[
    {
        "action":"Profile","method":"updateBasicInfo","type":"rpc","tid":3,
        "result":{
            "success":true
        }
    }
]

// sample failure packet (one request)
{
        "action":"Profile","method":"updateBasicInfo","type":"rpc","tid":"6",
        "result":{
            "errors":{
                "email":"already taken"
            },
            "success":false,
            "foo":"bar"
        }
}
 *

 * Also see the discussion in {@link Ext.form.Action.DirectLoad}.
 */
Ext.form.Action.DirectSubmit = Ext.extend(Ext.form.Action.Submit, {
    constructor : function(form, opts) {
        Ext.form.Action.DirectSubmit.superclass.constructor.call(this, form, opts);
    },
    type : 'directsubmit',
    // override of Submit
    run : function(){
        var o = this.options;
        if(o.clientValidation === false || this.form.isValid()){
            // tag on any additional params to be posted in the
            // form scope
            this.success.params = this.getParams();
            this.form.api.submit(this.form.el.dom, this.success, this);
        }else if (o.clientValidation !== false){ // client validation failed
            this.failureType = Ext.form.Action.CLIENT_INVALID;
            this.form.afterAction(this, false);
        }
    },

    getParams : function() {
        var o = {};
        var bp = this.form.baseParams;
        var p = this.options.params;
        Ext.apply(o, p, bp);
        return o;
    },
    // Direct actions have already been processed and therefore
    // we can directly set the result; Direct Actions do not have
    // a this.response property.
    processResponse : function(result) {
        this.result = result;
        return result;
    },

    success : function(response, trans){
        if(trans.type == Ext.Direct.exceptions.SERVER){
            response = {};
        }
        Ext.form.Action.DirectSubmit.superclass.success.call(this, response);
    }
});

Ext.form.Action.ACTION_TYPES = {
    'load' : Ext.form.Action.Load,
    'submit' : Ext.form.Action.Submit,
    'directload' : Ext.form.Action.DirectLoad,
    'directsubmit' : Ext.form.Action.DirectSubmit
};


The source code

/*!
 * licensing@extjs.com
 * http://www.extjs.com/license
 */

/**
 * @class Ext.Action
 *
An Action is a piece of reusable functionality that can be abstracted out of any particular component so that it
 * can be usefully shared among multiple components.  Actions let you share handlers, configuration options and UI
 * updates across any components that support the Action interface (primarily {@link Ext.Toolbar}, {@link Ext.Button}
 * and {@link Ext.menu.Menu} components).

 *
Aside from supporting the config object interface, any component that needs to use Actions must also support
 * the following method list, as these will be called as needed by the Action class: setText(string), setIconCls(string),
 * setDisabled(boolean), setVisible(boolean) and setHandler(function).

 * Example usage:

 *

// Define the shared action.  Each component below will have the same
// display text and icon, and will display the same message on click.
var action = new Ext.Action({
    {@link #text}: 'Do something',
    {@link #handler}: function(){
        Ext.Msg.alert('Click', 'You did something.');
    },
    {@link #iconCls}: 'do-something',
    {@link #itemId}: 'myAction'
});

var panel = new Ext.Panel({
    title: 'Actions',
    width: 500,
    height: 300,
    tbar: [
        // Add the action directly to a toolbar as a menu button
        action,
        {
            text: 'Action Menu',
            // Add the action to a menu as a text item
            menu: [action]
        }
    ],
    items: [
        // Add the action to the panel body as a standard button
        new Ext.Button(action)
    ],
    renderTo: Ext.getBody()
});

// Change the text for all components using the action
action.setText('Something else');

// Reference an action through a container using the itemId
var btn = panel.getComponent('myAction');
var aRef = btn.baseAction;
aRef.setText('New text');

 * @constructor
 * @param {Object} config The configuration options
 */
Ext.Action = Ext.extend(Object, {

/**
     * @cfg {String} text The text to set for all components using this action (defaults to '').
     */

/**
     * @cfg {String} iconCls
     * The CSS class selector that specifies a background image to be used as the header icon for
     * all components using this action (defaults to '').
     *
An example of specifying a custom icon class would be something like:
     *

// specify the property in the config for the class:
     ...
     iconCls: 'do-something'

// css class that specifies background image to be used as the icon image:
.do-something { background-image: url(../images/my-icon.gif) 0 6px no-repeat !important; }

     */

/**
     * @cfg {Boolean} disabled True to disable all components using this action, false to enable them (defaults to false).
     */

/**
     * @cfg {Boolean} hidden True to hide all components using this action, false to show them (defaults to false).
     */

/**
     * @cfg {Function} handler The function that will be invoked by each component tied to this action
     * when the component's primary event is triggered (defaults to undefined).
     */

/**
     * @cfg {String} itemId
     * See {@link Ext.Component}.{@link Ext.Component#itemId itemId}.
     */

/**
     * @cfg {Object} scope The scope (this reference) in which the
     * {@link #handler} is executed. Defaults to this Button.
     */

    constructor : function(config){
        this.initialConfig = config;
        this.itemId = config.itemId = (config.itemId || config.id || Ext.id());
        this.items = [];
    },

    // private
    isAction : true,

/**
     * Sets the text to be displayed by all components using this action.
     * @param {String} text The text to display
     */
    setText : function(text){
        this.initialConfig.text = text;
        this.callEach('setText', [text]);
    },

/**
     * Gets the text currently displayed by all components using this action.
     */
    getText : function(){
        return this.initialConfig.text;
    },

/**
     * Sets the icon CSS class for all components using this action.  The class should supply
     * a background image that will be used as the icon image.
     * @param {String} cls The CSS class supplying the icon image
     */
    setIconClass : function(cls){
        this.initialConfig.iconCls = cls;
        this.callEach('setIconClass', [cls]);
    },

/**
     * Gets the icon CSS class currently used by all components using this action.
     */
    getIconClass : function(){
        return this.initialConfig.iconCls;
    },

/**
     * Sets the disabled state of all components using this action.  Shortcut method
     * for {@link #enable} and {@link #disable}.
     * @param {Boolean} disabled True to disable the component, false to enable it
     */
    setDisabled : function(v){
        this.initialConfig.disabled = v;
        this.callEach('setDisabled', [v]);
    },

/**
     * Enables all components using this action.
     */
    enable : function(){
        this.setDisabled(false);
    },

/**
     * Disables all components using this action.
     */
    disable : function(){
        this.setDisabled(true);
    },

/**
     * Returns true if the components using this action are currently disabled, else returns false.
     */
    isDisabled : function(){
        return this.initialConfig.disabled;
    },

/**
     * Sets the hidden state of all components using this action.  Shortcut method
     * for {@link #hide} and {@link #show}.
     * @param {Boolean} hidden True to hide the component, false to show it
     */
    setHidden : function(v){
        this.initialConfig.hidden = v;
        this.callEach('setVisible', [!v]);
    },

/**
     * Shows all components using this action.
     */
    show : function(){
        this.setHidden(false);
    },

/**
     * Hides all components using this action.
     */
    hide : function(){
        this.setHidden(true);
    },

/**
     * Returns true if the components using this action are currently hidden, else returns false.
     */
    isHidden : function(){
        return this.initialConfig.hidden;
    },

/**
     * Sets the function that will be called by each Component using this action when its primary event is triggered.
     * @param {Function} fn The function that will be invoked by the action's components.  The function
     * will be called with no arguments.
     * @param {Object} scope The scope (this reference) in which the function is executed. Defaults to the Component firing the event.
     */
    setHandler : function(fn, scope){
        this.initialConfig.handler = fn;
        this.initialConfig.scope = scope;
        this.callEach('setHandler', [fn, scope]);
    },

/**
     * Executes the specified function once for each Component currently tied to this action.  The function passed
     * in should accept a single argument that will be an object that supports the basic Action config/method interface.
     * @param {Function} fn The function to execute for each component
     * @param {Object} scope The scope (this reference) in which the function is executed.  Defaults to the Component.
     */
    each : function(fn, scope){
        Ext.each(this.items, fn, scope);
    },

    // private
    callEach : function(fnName, args){
        var cs = this.items;
        for(var i = 0, len = cs.length; i < len; i++){
            cs[i][fnName].apply(cs[i], args);
        }
    },

    // private
    addComponent : function(comp){
        this.items.push(comp);
        comp.on('destroy', this.removeComponent, this);
    },

    // private
    removeComponent : function(comp){
        this.items.remove(comp);
    },

/**
     * Executes this action manually using the handler function specified in the original config object
     * or the handler function set with {@link #setHandler}.  Any arguments passed to this
     * function will be passed on to the handler function.
     * @param {Mixed} arg1 (optional) Variable number of arguments passed to the handler function
     * @param {Mixed} arg2 (optional)
     * @param {Mixed} etc... (optional)
     */
    execute : function(){
        this.initialConfig.handler.apply(this.initialConfig.scope || window, arguments);
    }
});


The source code

/*!
 * licensing@extjs.com
 * http://www.extjs.com/license
 */

/**
 * @class Ext.layout.AnchorLayout
 * @extends Ext.layout.ContainerLayout
 *
This is a layout that enables anchoring of contained elements relative to the container's dimensions.
 * If the container is resized, all anchored items are automatically rerendered according to their
 * {@link #anchor} rules.

 *
This class is intended to be extended or created via the layout:'anchor' {@link Ext.Container#layout}
 * config, and should generally not need to be created directly via the new keyword.

 *
AnchorLayout does not have any direct config options (other than inherited ones). By default,
 * AnchorLayout will calculate anchor measurements based on the size of the container itself. However, the
 * container using the AnchorLayout can supply an anchoring-specific config property of anchorSize.
 * If anchorSize is specifed, the layout will use it as a virtual container for the purposes of calculating
 * anchor measurements based on it instead, allowing the container to be sized independently of the anchoring
 * logic if necessary.  For example:

 *

var viewport = new Ext.Viewport({
    layout:'anchor',
    anchorSize: {width:800, height:600},
    items:[{
        title:'Item 1',
        html:'Content 1',
        width:800,
        anchor:'right 20%'
    },{
        title:'Item 2',
        html:'Content 2',
        width:300,
        anchor:'50% 30%'
    },{
        title:'Item 3',
        html:'Content 3',
        width:600,
        anchor:'-100 50%'
    }]
});
 *

 */
Ext.layout.AnchorLayout = Ext.extend(Ext.layout.ContainerLayout, {

/**
     * @cfg {String} anchor
     *
This configuation option is to be applied to child items of a container managed by
     * this layout (ie. configured with layout:'anchor').

     *
     *
This value is what tells the layout how an item should be anchored to the container. items
     * added to an AnchorLayout accept an anchoring-specific config property of anchor which is a string
     * containing two values: the horizontal anchor value and the vertical anchor value (for example, '100% 50%').
     * The following types of anchor values are supported:

     *
     *
  • Percentage : Any value between 1 and 100, expressed as a percentage.

     * The first anchor is the percentage width that the item should take up within the container, and the
     * second is the percentage height.  For example:

// two values specified
anchor: '100% 50%' // render item complete width of the container and
                   // 1/2 height of the container
// one value specified
anchor: '100%'     // the width value; the height will default to auto
     *
    •
     *
     *
  • Offsets : Any positive or negative integer value.

     * This is a raw adjustment where the first anchor is the offset from the right edge of the container,
     * and the second is the offset from the bottom edge. For example:

// two values specified
anchor: '-50 -100' // render item the complete width of the container
                   // minus 50 pixels and
                   // the complete height minus 100 pixels.
// one value specified
anchor: '-50'      // anchor value is assumed to be the right offset value
                   // bottom offset will default to 0
     *
    •
     *
     *
  • Sides : Valid values are 'right' (or 'r') and 'bottom'
     * (or 'b').

     * Either the container must have a fixed size or an anchorSize config value defined at render time in
     * order for these to have any effect.
    •
     *
     *
  • Mixed :

     * Anchor values can also be mixed as needed.  For example, to render the width offset from the container
     * right edge by 50 pixels and 75% of the container's height use:
     *

anchor: '-50 75%'
     *
    •
     *
     *
     *

     */

    // private
    monitorResize : true,

    type : 'anchor',

/**
     * @cfg {String} defaultAnchor
     *
     * default anchor for all child container items applied if no anchor or specific width is set on the child item.  Defaults to '100%'.
     *
     */
    defaultAnchor : '100%',

    parseAnchorRE : /^(r|right|b|bottom)$/i,

    getLayoutTargetSize : function() {
        var target = this.container.getLayoutTarget();
        if (!target) {
            return {};
        }
        // Style Sized (scrollbars not included)
        return target.getStyleSize();
    },

    // private
    onLayout : function(ct, target){
        Ext.layout.AnchorLayout.superclass.onLayout.call(this, ct, target);
        var size = this.getLayoutTargetSize();

        var w = size.width, h = size.height;

        if(w < 20 && h < 20){
            return;
        }

        // find the container anchoring size
        var aw, ah;
        if(ct.anchorSize){
            if(typeof ct.anchorSize == 'number'){
                aw = ct.anchorSize;
            }else{
                aw = ct.anchorSize.width;
                ah = ct.anchorSize.height;
            }
        }else{
            aw = ct.initialConfig.width;
            ah = ct.initialConfig.height;
        }

        var cs = this.getRenderedItems(ct), len = cs.length, i, c, a, cw, ch, el, vs, boxes = [];
        for(i = 0; i < len; i++){
            c = cs[i];
            el = c.getPositionEl();

            // If a child container item has no anchor and no specific width, set the child to the default anchor size
            if (!c.anchor && c.items && !Ext.isNumber(c.width) && !(Ext.isIE6 && Ext.isStrict)){
                c.anchor = this.defaultAnchor;
            }

            if(c.anchor){
                a = c.anchorSpec;
                if(!a){ // cache all anchor values
                    vs = c.anchor.split(' ');
                    c.anchorSpec = a = {
                        right: this.parseAnchor(vs[0], c.initialConfig.width, aw),
                        bottom: this.parseAnchor(vs[1], c.initialConfig.height, ah)
                    };
                }
                cw = a.right ? this.adjustWidthAnchor(a.right(w) - el.getMargins('lr'), c) : undefined;
                ch = a.bottom ? this.adjustHeightAnchor(a.bottom(h) - el.getMargins('tb'), c) : undefined;

                if(cw || ch){
                    boxes.push({
                        comp: c,
                        width: cw || undefined,
                        height: ch || undefined
                    });
                }
            }
        }
        for (i = 0, len = boxes.length; i < len; i++) {
            c = boxes[i];
            c.comp.setSize(c.width, c.height);
        }
    },

    // private
    parseAnchor : function(a, start, cstart){
        if(a && a != 'none'){
            var last;
            // standard anchor
            if(this.parseAnchorRE.test(a)){
                var diff = cstart - start;
                return function(v){
                    if(v !== last){
                        last = v;
                        return v - diff;
                    }
                }
            // percentage
            }else if(a.indexOf('%') != -1){
                var ratio = parseFloat(a.replace('%', ''))*.01;
                return function(v){
                    if(v !== last){
                        last = v;
                        return Math.floor(v*ratio);
                    }
                }
            // simple offset adjustment
            }else{
                a = parseInt(a, 10);
                if(!isNaN(a)){
                    return function(v){
                        if(v !== last){
                            last = v;
                            return v + a;
                        }
                    }
                }
            }
        }
        return false;
    },

    // private
    adjustWidthAnchor : function(value, comp){
        return value;
    },

    // private
    adjustHeightAnchor : function(value, comp){
        return value;
    }

/**
     * @property activeItem
     * @hide
     */
});
Ext.Container.LAYOUTS['anchor'] = Ext.layout.AnchorLayout;


The source code

/*!
 * licensing@extjs.com
 * http://www.extjs.com/license
 */

/**
 * @class Ext.data.Api
 * @extends Object
 * Ext.data.Api is a singleton designed to manage the data API including methods
 * for validating a developer's DataProxy API.  Defines variables for CRUD actions
 * create, read, update and destroy in addition to a mapping of RESTful HTTP methods
 * GET, POST, PUT and DELETE to CRUD actions.
 * @singleton
 */
Ext.data.Api = (function() {

    // private validActions.  validActions is essentially an inverted hash of Ext.data.Api.actions, where value becomes the key.
    // Some methods in this singleton (e.g.: getActions, getVerb) will loop through actions with the code for (var verb in this.actions)
    // For efficiency, some methods will first check this hash for a match.  Those methods which do acces validActions will cache their result here.
    // We cannot pre-define this hash since the developer may over-ride the actions at runtime.
    var validActions = {};

    return {

/**
         * Defined actions corresponding to remote actions:
         *

actions: {
    create  : 'create',  // Text representing the remote-action to create records on server.
    read    : 'read',    // Text representing the remote-action to read/load data from server.
    update  : 'update',  // Text representing the remote-action to update records on server.
    destroy : 'destroy'  // Text representing the remote-action to destroy records on server.
}
         *

         * @property actions
         * @type Object
         */
        actions : {
            create  : 'create',
            read    : 'read',
            update  : 'update',
            destroy : 'destroy'
        },

/**
         * Defined {CRUD action}:{HTTP method} pairs to associate HTTP methods with the
         * corresponding actions for {@link Ext.data.DataProxy#restful RESTful proxies}.
         * Defaults to:
         *

restActions : {
    create  : 'POST',
    read    : 'GET',
    update  : 'PUT',
    destroy : 'DELETE'
},
         *

         */
        restActions : {
            create  : 'POST',
            read    : 'GET',
            update  : 'PUT',
            destroy : 'DELETE'
        },

/**
         * Returns true if supplied action-name is a valid API action defined in {@link #actions} constants
         * @param {String} action Action to test for availability.
         * @return {Boolean}
         */
        isAction : function(action) {
            return (Ext.data.Api.actions[action]) ? true : false;
        },

/**
         * Returns the actual CRUD action KEY "create", "read", "update" or "destroy" from the supplied action-name.  This method is used internally and shouldn't generally
         * need to be used directly.  The key/value pair of Ext.data.Api.actions will often be identical but this is not necessarily true.  A developer can override this naming
         * convention if desired.  However, the framework internally calls methods based upon the KEY so a way of retreiving the the words "create", "read", "update" and "destroy" is
         * required.  This method will cache discovered KEYS into the private validActions hash.
         * @param {String} name The runtime name of the action.
         * @return {String||null} returns the action-key, or verb of the user-action or null if invalid.
         * @nodoc
         */
        getVerb : function(name) {
            if (validActions[name]) {
                return validActions[name];  // <-- found in cache.  return immediately.
            }
            for (var verb in this.actions) {
                if (this.actions[verb] === name) {
                    validActions[name] = verb;
                    break;
                }
            }
            return (validActions[name] !== undefined) ? validActions[name] : null;
        },

/**
         * Returns true if the supplied API is valid; that is, check that all keys match defined actions
         * otherwise returns an array of mistakes.
         * @return {String[]|true}
         */
        isValid : function(api){
            var invalid = [];
            var crud = this.actions; // <-- cache a copy of the actions.
            for (var action in api) {
                if (!(action in crud)) {
                    invalid.push(action);
                }
            }
            return (!invalid.length) ? true : invalid;
        },

/**
         * Returns true if the supplied verb upon the supplied proxy points to a unique url in that none of the other api-actions
         * point to the same url.  The question is important for deciding whether to insert the "xaction" HTTP parameter within an
         * Ajax request.  This method is used internally and shouldn't generally need to be called directly.
         * @param {Ext.data.DataProxy} proxy
         * @param {String} verb
         * @return {Boolean}
         */
        hasUniqueUrl : function(proxy, verb) {
            var url = (proxy.api[verb]) ? proxy.api[verb].url : null;
            var unique = true;
            for (var action in proxy.api) {
                if ((unique = (action === verb) ? true : (proxy.api[action].url != url) ? true : false) === false) {
                    break;
                }
            }
            return unique;
        },

/**
         * This method is used internally by {@link Ext.data.DataProxy DataProxy} and should not generally need to be used directly.
         * Each action of a DataProxy api can be initially defined as either a String or an Object.  When specified as an object,
         * one can explicitly define the HTTP method (GET|POST) to use for each CRUD action.  This method will prepare the supplied API, setting
         * each action to the Object form.  If your API-actions do not explicitly define the HTTP method, the "method" configuration-parameter will
         * be used.  If the method configuration parameter is not specified, POST will be used.

new Ext.data.HttpProxy({
    method: "POST",     // <-- default HTTP method when not specified.
    api: {
        create: 'create.php',
        load: 'read.php',
        save: 'save.php',
        destroy: 'destroy.php'
    }
});

// Alternatively, one can use the object-form to specify the API
new Ext.data.HttpProxy({
    api: {
        load: {url: 'read.php', method: 'GET'},
        create: 'create.php',
        destroy: 'destroy.php',
        save: 'update.php'
    }
});

         *
         * @param {Ext.data.DataProxy} proxy
         */
        prepare : function(proxy) {
            if (!proxy.api) {
                proxy.api = {}; // <-- No api?  create a blank one.
            }
            for (var verb in this.actions) {
                var action = this.actions[verb];
                proxy.api[action] = proxy.api[action] || proxy.url || proxy.directFn;
                if (typeof(proxy.api[action]) == 'string') {
                    proxy.api[action] = {
                        url: proxy.api[action],
                        method: (proxy.restful === true) ? Ext.data.Api.restActions[action] : undefined
                    };
                }
            }
        },

/**
         * Prepares a supplied Proxy to be RESTful.  Sets the HTTP method for each api-action to be one of
         * GET, POST, PUT, DELETE according to the defined {@link #restActions}.
         * @param {Ext.data.DataProxy} proxy
         */
        restify : function(proxy) {
            proxy.restful = true;
            for (var verb in this.restActions) {
                proxy.api[this.actions[verb]].method ||
                    (proxy.api[this.actions[verb]].method = this.restActions[verb]);
            }
            // TODO: perhaps move this interceptor elsewhere?  like into DataProxy, perhaps?  Placed here
            // to satisfy initial 3.0 final release of REST features.
            proxy.onWrite = proxy.onWrite.createInterceptor(function(action, o, response, rs) {
                var reader = o.reader;
                var res = new Ext.data.Response({
                    action: action,
                    raw: response
                });

                switch (response.status) {
                    case 200:   // standard 200 response, send control back to HttpProxy#onWrite by returning true from this intercepted #onWrite
                        return true;
                        break;
                    case 201:   // entity created but no response returned
                        if (Ext.isEmpty(res.raw.responseText)) {
                          res.success = true;
                        } else {
                          //if the response contains data, treat it like a 200
                          return true;
                        }
                        break;
                    case 204:  // no-content.  Create a fake response.
                        res.success = true;
                        res.data = null;
                        break;
                    default:
                        return true;
                        break;
                }
                if (res.success === true) {
                    this.fireEvent("write", this, action, res.data, res, rs, o.request.arg);
                } else {
                    this.fireEvent('exception', this, 'remote', action, o, res, rs);
                }
                o.request.callback.call(o.request.scope, res.data, res, res.success);

                return false;   // <-- false to prevent intercepted function from running.
            }, proxy);
        }
    };
})();

/**
 * Ext.data.Response
 * Experimental.  Do not use directly.
 */
Ext.data.Response = function(params, response) {
    Ext.apply(this, params, {
        raw: response
    });
};
Ext.data.Response.prototype = {
    message : null,
    success : false,
    status : null,
    root : null,
    raw : null,

    getMessage : function() {
        return this.message;
    },
    getSuccess : function() {
        return this.success;
    },
    getStatus : function() {
        return this.status;
    },
    getRoot : function() {
        return this.root;
    },
    getRawResponse : function() {
        return this.raw;
    }
};

/**
 * @class Ext.data.Api.Error
 * @extends Ext.Error
 * Error class for Ext.data.Api errors
 */
Ext.data.Api.Error = Ext.extend(Ext.Error, {
    constructor : function(message, arg) {
        this.arg = arg;
        Ext.Error.call(this, message);
    },
    name: 'Ext.data.Api'
});
Ext.apply(Ext.data.Api.Error.prototype, {
    lang: {
        'action-url-undefined': 'No fallback url defined for this action.  When defining a DataProxy api, please be sure to define an url for each CRUD action in Ext.data.Api.actions or define a default url in addition to your api-configuration.',
        'invalid': 'received an invalid API-configuration.  Please ensure your proxy API-configuration contains only the actions defined in Ext.data.Api.actions',
        'invalid-url': 'Invalid url.  Please review your proxy configuration.',
        'execute': 'Attempted to execute an unknown action.  Valid API actions are defined in Ext.data.Api.actions"'
    }
});


The source code

/*!
 * licensing@extjs.com
 * http://www.extjs.com/license
 */

/**
 * @class Ext.data.ArrayReader
 * @extends Ext.data.JsonReader
 *
Data reader class to create an Array of {@link Ext.data.Record} objects from an Array.
 * Each element of that Array represents a row of data fields. The
 * fields are pulled into a Record object using as a subscript, the mapping property
 * of the field definition if it exists, or the field's ordinal position in the definition.

 *
Example code:

 *

var Employee = Ext.data.Record.create([
    {name: 'name', mapping: 1},         // "mapping" only needed if an "id" field is present which
    {name: 'occupation', mapping: 2}    // precludes using the ordinal position as the index.
]);
var myReader = new Ext.data.ArrayReader({
    {@link #idIndex}: 0
}, Employee);

 *
This would consume an Array like this:

 *

[ [1, 'Bill', 'Gardener'], [2, 'Ben', 'Horticulturalist'] ]
 *

 * @constructor
 * Create a new ArrayReader
 * @param {Object} meta Metadata configuration options.
 * @param {Array/Object} recordType
 *
Either an Array of {@link Ext.data.Field Field} definition objects (which
 * will be passed to {@link Ext.data.Record#create}, or a {@link Ext.data.Record Record}
 * constructor created from {@link Ext.data.Record#create}.

 */
Ext.data.ArrayReader = Ext.extend(Ext.data.JsonReader, {

/**
     * @cfg {String} successProperty
     * @hide
     */

/**
     * @cfg {Number} id (optional) The subscript within row Array that provides an ID for the Record.
     * Deprecated. Use {@link #idIndex} instead.
     */

/**
     * @cfg {Number} idIndex (optional) The subscript within row Array that provides an ID for the Record.
     */

/**
     * Create a data block containing Ext.data.Records from an Array.
     * @param {Object} o An Array of row objects which represents the dataset.
     * @return {Object} data A data block which is used by an Ext.data.Store object as
     * a cache of Ext.data.Records.
     */
    readRecords : function(o){
        this.arrayData = o;
        var s = this.meta,
            sid = s ? Ext.num(s.idIndex, s.id) : null,
            recordType = this.recordType,
            fields = recordType.prototype.fields,
            records = [],
            success = true,
            v;

        var root = this.getRoot(o);

        for(var i = 0, len = root.length; i < len; i++) {
            var n = root[i],
                values = {},
                id = ((sid || sid === 0) && n[sid] !== undefined && n[sid] !== "" ? n[sid] : null);
            for(var j = 0, jlen = fields.length; j < jlen; j++) {
                var f = fields.items[j],
                    k = f.mapping !== undefined && f.mapping !== null ? f.mapping : j;
                v = n[k] !== undefined ? n[k] : f.defaultValue;
                v = f.convert(v, n);
                values[f.name] = v;
            }
            var record = new recordType(values, id);
            record.json = n;
            records[records.length] = record;
        }

        var totalRecords = records.length;

        if(s.totalProperty) {
            v = parseInt(this.getTotal(o), 10);
            if(!isNaN(v)) {
                totalRecords = v;
            }
        }
        if(s.successProperty){
            v = this.getSuccess(o);
            if(v === false || v === 'false'){
                success = false;
            }
        }

        return {
            success : success,
            records : records,
            totalRecords : totalRecords
        };
    }
});


The source code

/*!
 * licensing@extjs.com
 * http://www.extjs.com/license
 */

/**
 * @class Ext.data.ArrayStore
 * @extends Ext.data.Store
 *
Formerly known as "SimpleStore".

 *
Small helper class to make creating {@link Ext.data.Store}s from Array data easier.
 * An ArrayStore will be automatically configured with a {@link Ext.data.ArrayReader}.

 *
A store configuration would be something like:

var store = new Ext.data.ArrayStore({
    // store configs
    autoDestroy: true,
    storeId: 'myStore',
    // reader configs
    idIndex: 0,
    fields: [
       'company',
       {name: 'price', type: 'float'},
       {name: 'change', type: 'float'},
       {name: 'pctChange', type: 'float'},
       {name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
    ]
});
 *

 *
This store is configured to consume a returned object of the form:

var myData = [
    ['3m Co',71.72,0.02,0.03,'9/1 12:00am'],
    ['Alcoa Inc',29.01,0.42,1.47,'9/1 12:00am'],
    ['Boeing Co.',75.43,0.53,0.71,'9/1 12:00am'],
    ['Hewlett-Packard Co.',36.53,-0.03,-0.08,'9/1 12:00am'],
    ['Wal-Mart Stores, Inc.',45.45,0.73,1.63,'9/1 12:00am']
];
 *

 * An object literal of this form could also be used as the {@link #data} config option.

 *
*Note: Although not listed here, this class accepts all of the configuration options of
 * {@link Ext.data.ArrayReader ArrayReader}.

 * @constructor
 * @param {Object} config
 * @xtype arraystore
 */
Ext.data.ArrayStore = Ext.extend(Ext.data.Store, {

/**
     * @cfg {Ext.data.DataReader} reader @hide
     */
    constructor: function(config){
        Ext.data.ArrayStore.superclass.constructor.call(this, Ext.apply(config, {
            reader: new Ext.data.ArrayReader(config)
        }));
    },

    loadData : function(data, append){
        if(this.expandData === true){
            var r = [];
            for(var i = 0, len = data.length; i < len; i++){
                r[r.length] = [data[i]];
            }
            data = r;
        }
        Ext.data.ArrayStore.superclass.loadData.call(this, data, append);
    }
});
Ext.reg('arraystore', Ext.data.ArrayStore);

// backwards compat
Ext.data.SimpleStore = Ext.data.ArrayStore;
Ext.reg('simplestore', Ext.data.SimpleStore);


The source code

/*!
 * licensing@extjs.com
 * http://www.extjs.com/license
 */

/**
 * @class Ext.tree.AsyncTreeNode
 * @extends Ext.tree.TreeNode
 * @cfg {TreeLoader} loader A TreeLoader to be used by this node (defaults to the loader defined on the tree)
 * @constructor
 * @param {Object/String} attributes The attributes/config for the node or just a string with the text for the node
 */
 Ext.tree.AsyncTreeNode = function(config){
    this.loaded = config && config.loaded === true;
    this.loading = false;
    Ext.tree.AsyncTreeNode.superclass.constructor.apply(this, arguments);
    /**
    * @event beforeload
    * Fires before this node is loaded, return false to cancel
    * @param {Node} this This node
    */
    this.addEvents('beforeload', 'load');
    /**
    * @event load
    * Fires when this node is loaded
    * @param {Node} this This node
    */
    /**
     * The loader used by this node (defaults to using the tree's defined loader)
     * @type TreeLoader
     * @property loader
     */
};
Ext.extend(Ext.tree.AsyncTreeNode, Ext.tree.TreeNode, {
    expand : function(deep, anim, callback, scope){
        if(this.loading){ // if an async load is already running, waiting til it's done
            var timer;
            var f = function(){
                if(!this.loading){ // done loading
                    clearInterval(timer);
                    this.expand(deep, anim, callback, scope);
                }
            }.createDelegate(this);
            timer = setInterval(f, 200);
            return;
        }
        if(!this.loaded){
            if(this.fireEvent("beforeload", this) === false){
                return;
            }
            this.loading = true;
            this.ui.beforeLoad(this);
            var loader = this.loader || this.attributes.loader || this.getOwnerTree().getLoader();
            if(loader){
                loader.load(this, this.loadComplete.createDelegate(this, [deep, anim, callback, scope]), this);
                return;
            }
        }
        Ext.tree.AsyncTreeNode.superclass.expand.call(this, deep, anim, callback, scope);
    },

    /**
     * Returns true if this node is currently loading
     * @return {Boolean}
     */
    isLoading : function(){
        return this.loading;
    },

    loadComplete : function(deep, anim, callback, scope){
        this.loading = false;
        this.loaded = true;
        this.ui.afterLoad(this);
        this.fireEvent("load", this);
        this.expand(deep, anim, callback, scope);
    },

    /**
     * Returns true if this node has been loaded
     * @return {Boolean}
     */
    isLoaded : function(){
        return this.loaded;
    },

    hasChildNodes : function(){
        if(!this.isLeaf() && !this.loaded){
            return true;
        }else{
            return Ext.tree.AsyncTreeNode.superclass.hasChildNodes.call(this);
        }
    },

    /**
     * Trigger a reload for this node
     * @param {Function} callback
     * @param {Object} scope (optional) The scope (this reference) in which the callback is executed. Defaults to this Node.
     */
    reload : function(callback, scope){
        this.collapse(false, false);
        while(this.firstChild){
            this.removeChild(this.firstChild).destroy();
        }
        this.childrenRendered = false;
        this.loaded = false;
        if(this.isHiddenRoot()){
            this.expanded = false;
        }
        this.expand(false, false, callback, scope);
    }
});

Ext.tree.TreePanel.nodeTypes.async = Ext.tree.AsyncTreeNode;


The source code

/*!
 * licensing@extjs.com
 * http://www.extjs.com/license
 */

/**
 * @class Ext.layout.AutoLayout
 *
The AutoLayout is the default layout manager delegated by {@link Ext.Container} to
 * render any child Components when no {@link Ext.Container#layout layout} is configured into
 * a {@link Ext.Container Container}..  AutoLayout provides only a passthrough of any layout calls
 * to any child containers.

 */
Ext.layout.AutoLayout = Ext.extend(Ext.layout.ContainerLayout, {
    type: 'auto',

    monitorResize: true,

    onLayout : function(ct, target){
        Ext.layout.AutoLayout.superclass.onLayout.call(this, ct, target);
        var cs = this.getRenderedItems(ct), len = cs.length, i, c;
        for(i = 0; i < len; i++){
            c = cs[i];
            if (c.doLayout){
                // Shallow layout children
                c.doLayout(true);
            }
        }
    }
});

Ext.Container.LAYOUTS['auto'] = Ext.layout.AutoLayout;


The source code

/*!
 * licensing@extjs.com
 * http://www.extjs.com/license
 */

/**
 * @class Ext.menu.BaseItem
 * @extends Ext.Component
 * The base class for all items that render into menus.  BaseItem provides default rendering, activated state
 * management and base configuration options shared by all menu components.
 * @constructor
 * Creates a new BaseItem
 * @param {Object} config Configuration options
 * @xtype menubaseitem
 */
Ext.menu.BaseItem = Ext.extend(Ext.Component, {

/**
     * @property parentMenu
     * @type Ext.menu.Menu
     * The parent Menu of this Item.
     */

/**
     * @cfg {Function} handler
     * A function that will handle the click event of this menu item (optional).
     * The handler is passed the following parameters:

     *
  • b : Item
    This menu Item.
    •
     *
  • e : EventObject
    The click event.
    •
     *

     */

/**
     * @cfg {Object} scope
     * The scope (this reference) in which the handler function will be called.
     */

/**
     * @cfg {Boolean} canActivate True if this item can be visually activated (defaults to false)
     */
    canActivate : false,

/**
     * @cfg {String} activeClass The CSS class to use when the item becomes activated (defaults to "x-menu-item-active")
     */
    activeClass : "x-menu-item-active",

/**
     * @cfg {Boolean} hideOnClick True to hide the containing menu after this item is clicked (defaults to true)
     */
    hideOnClick : true,

/**
     * @cfg {Number} clickHideDelay Length of time in milliseconds to wait before hiding after a click (defaults to 1)
     */
    clickHideDelay : 1,

    // private
    ctype : "Ext.menu.BaseItem",

    // private
    actionMode : "container",

    initComponent : function(){
        Ext.menu.BaseItem.superclass.initComponent.call(this);
        this.addEvents(

/**
             * @event click
             * Fires when this item is clicked
             * @param {Ext.menu.BaseItem} this
             * @param {Ext.EventObject} e
             */
            'click',

/**
             * @event activate
             * Fires when this item is activated
             * @param {Ext.menu.BaseItem} this
             */
            'activate',

/**
             * @event deactivate
             * Fires when this item is deactivated
             * @param {Ext.menu.BaseItem} this
             */
            'deactivate'
        );
        if(this.handler){
            this.on("click", this.handler, this.scope);
        }
    },

    // private
    onRender : function(container, position){
        Ext.menu.BaseItem.superclass.onRender.apply(this, arguments);
        if(this.ownerCt && this.ownerCt instanceof Ext.menu.Menu){
            this.parentMenu = this.ownerCt;
        }else{
            this.container.addClass('x-menu-list-item');
            this.mon(this.el, {
                scope: this,
                click: this.onClick,
                mouseenter: this.activate,
                mouseleave: this.deactivate
            });
        }
    },

/**
     * Sets the function that will handle click events for this item (equivalent to passing in the {@link #handler}
     * config property).  If an existing handler is already registered, it will be unregistered for you.
     * @param {Function} handler The function that should be called on click
     * @param {Object} scope The scope (this reference) in which the handler function is executed. Defaults to this menu item.
     */
    setHandler : function(handler, scope){
        if(this.handler){
            this.un("click", this.handler, this.scope);
        }
        this.on("click", this.handler = handler, this.scope = scope);
    },

    // private
    onClick : function(e){
        if(!this.disabled && this.fireEvent("click", this, e) !== false
                && (this.parentMenu && this.parentMenu.fireEvent("itemclick", this, e) !== false)){
            this.handleClick(e);
        }else{
            e.stopEvent();
        }
    },

    // private
    activate : function(){
        if(this.disabled){
            return false;
        }
        var li = this.container;
        li.addClass(this.activeClass);
        this.region = li.getRegion().adjust(2, 2, -2, -2);
        this.fireEvent("activate", this);
        return true;
    },

    // private
    deactivate : function(){
        this.container.removeClass(this.activeClass);
        this.fireEvent("deactivate", this);
    },

    // private
    shouldDeactivate : function(e){
        return !this.region || !this.region.contains(e.getPoint());
    },

    // private
    handleClick : function(e){
        var pm = this.parentMenu;
        if(this.hideOnClick){
            if(pm.floating){
                pm.hide.defer(this.clickHideDelay, pm, [true]);
            }else{
                pm.deactivateActive();
            }
        }
    },

    // private. Do nothing
    expandMenu : Ext.emptyFn,

    // private. Do nothing
    hideMenu : Ext.emptyFn
});
Ext.reg('menubaseitem', Ext.menu.BaseItem);


The source code

/*!
 * licensing@extjs.com
 * http://www.extjs.com/license
 */

/**
 * @class Ext.form.BasicForm
 * @extends Ext.util.Observable
 *
Encapsulates the DOM <form> element at the heart of the {@link Ext.form.FormPanel FormPanel} class, and provides
 * input field management, validation, submission, and form loading services.

 *
By default, Ext Forms are submitted through Ajax, using an instance of {@link Ext.form.Action.Submit}.
 * To enable normal browser submission of an Ext Form, use the {@link #standardSubmit} config option.

 *
File Uploads

 *
{@link #fileUpload File uploads} are not performed using Ajax submission, that
 * is they are not performed using XMLHttpRequests. Instead the form is submitted in the standard
 * manner with the DOM <form> element temporarily modified to have its
 * target set to refer
 * to a dynamically generated, hidden <iframe> which is inserted into the document
 * but removed after the return data has been gathered.

 *
The server response is parsed by the browser to create the document for the IFRAME. If the
 * server is using JSON to send the return object, then the
 * Content-Type header
 * must be set to "text/html" in order to tell the browser to insert the text unchanged into the document body.

 *
Characters which are significant to an HTML parser must be sent as HTML entities, so encode
 * "<" as "&lt;", "&" as "&amp;" etc.

 *
The response text is retrieved from the document, and a fake XMLHttpRequest object
 * is created containing a responseText property in order to conform to the
 * requirements of event handlers and callbacks.

 *
Be aware that file upload packets are sent with the content type multipart/form
 * and some server technologies (notably JEE) may require some custom processing in order to
 * retrieve parameter names and parameter values from the packet content.

 * @constructor
 * @param {Mixed} el The form element or its id
 * @param {Object} config Configuration options
 */
Ext.form.BasicForm = Ext.extend(Ext.util.Observable, {

    constructor: function(el, config){
        Ext.apply(this, config);
        if(Ext.isString(this.paramOrder)){
            this.paramOrder = this.paramOrder.split(/[\s,|]/);
        }

/**
         * A {@link Ext.util.MixedCollection MixedCollection} containing all the Ext.form.Fields in this form.
         * @type MixedCollection
         * @property items
         */
        this.items = new Ext.util.MixedCollection(false, function(o){
            return o.getItemId();
        });
        this.addEvents(

/**
             * @event beforeaction
             * Fires before any action is performed. Return false to cancel the action.
             * @param {Form} this
             * @param {Action} action The {@link Ext.form.Action} to be performed
             */
            'beforeaction',

/**
             * @event actionfailed
             * Fires when an action fails.
             * @param {Form} this
             * @param {Action} action The {@link Ext.form.Action} that failed
             */
            'actionfailed',

/**
             * @event actioncomplete
             * Fires when an action is completed.
             * @param {Form} this
             * @param {Action} action The {@link Ext.form.Action} that completed
             */
            'actioncomplete'
        );

        if(el){
            this.initEl(el);
        }
        Ext.form.BasicForm.superclass.constructor.call(this);
    },

/**
     * @cfg {String} method
     * The request method to use (GET or POST) for form actions if one isn't supplied in the action options.
     */

/**
     * @cfg {DataReader} reader
     * An Ext.data.DataReader (e.g. {@link Ext.data.XmlReader}) to be used to read
     * data when executing 'load' actions. This is optional as there is built-in
     * support for processing JSON.  For additional information on using an XMLReader
     * see the example provided in examples/form/xml-form.html.
     */

/**
     * @cfg {DataReader} errorReader
     *
An Ext.data.DataReader (e.g. {@link Ext.data.XmlReader}) to be used to
     * read field error messages returned from 'submit' actions. This is optional
     * as there is built-in support for processing JSON.

     *
The Records which provide messages for the invalid Fields must use the
     * Field name (or id) as the Record ID, and must contain a field called 'msg'
     * which contains the error message.

     *
The errorReader does not have to be a full-blown implementation of a
     * DataReader. It simply needs to implement a read(xhr) function
     * which returns an Array of Records in an object with the following
     * structure:

{
    records: recordArray
}

     */

/**
     * @cfg {String} url
     * The URL to use for form actions if one isn't supplied in the
     * {@link #doAction doAction} options.
     */

/**
     * @cfg {Boolean} fileUpload
     * Set to true if this form is a file upload.
     *
File uploads are not performed using normal 'Ajax' techniques, that is they are not
     * performed using XMLHttpRequests. Instead the form is submitted in the standard manner with the
     * DOM <form> element temporarily modified to have its
     * target set to refer
     * to a dynamically generated, hidden <iframe> which is inserted into the document
     * but removed after the return data has been gathered.

     *
The server response is parsed by the browser to create the document for the IFRAME. If the
     * server is using JSON to send the return object, then the
     * Content-Type header
     * must be set to "text/html" in order to tell the browser to insert the text unchanged into the document body.

     *
Characters which are significant to an HTML parser must be sent as HTML entities, so encode
     * "<" as "&lt;", "&" as "&amp;" etc.

     *
The response text is retrieved from the document, and a fake XMLHttpRequest object
     * is created containing a responseText property in order to conform to the
     * requirements of event handlers and callbacks.

     *
Be aware that file upload packets are sent with the content type multipart/form
     * and some server technologies (notably JEE) may require some custom processing in order to
     * retrieve parameter names and parameter values from the packet content.

     */

/**
     * @cfg {Object} baseParams
     *
Parameters to pass with all requests. e.g. baseParams: {id: '123', foo: 'bar'}.

     *
Parameters are encoded as standard HTTP parameters using {@link Ext#urlEncode}.

     */

/**
     * @cfg {Number} timeout Timeout for form actions in seconds (default is 30 seconds).
     */
    timeout: 30,

/**
     * @cfg {Object} api (Optional) If specified load and submit actions will be handled
     * with {@link Ext.form.Action.DirectLoad} and {@link Ext.form.Action.DirectSubmit}.
     * Methods which have been imported by Ext.Direct can be specified here to load and submit
     * forms.
     * Such as the following:

api: {
    load: App.ss.MyProfile.load,
    submit: App.ss.MyProfile.submit
}

     *
Load actions can use {@link #paramOrder} or {@link #paramsAsHash}
     * to customize how the load method is invoked.
     * Submit actions will always use a standard form submit. The formHandler configuration must
     * be set on the associated server-side method which has been imported by Ext.Direct

     */

/**
     * @cfg {Array/String} paramOrder
A list of params to be executed server side.
     * Defaults to undefined. Only used for the {@link #api}
     * load configuration.

     *
Specify the params in the order in which they must be executed on the
     * server-side as either (1) an Array of String values, or (2) a String of params
     * delimited by either whitespace, comma, or pipe. For example,
     * any of the following would be acceptable:

paramOrder: ['param1','param2','param3']
paramOrder: 'param1 param2 param3'
paramOrder: 'param1,param2,param3'
paramOrder: 'param1|param2|param'

     */
    paramOrder: undefined,

/**
     * @cfg {Boolean} paramsAsHash Only used for the {@link #api}
     * load configuration. Send parameters as a collection of named
     * arguments (defaults to false). Providing a
     * {@link #paramOrder} nullifies this configuration.
     */
    paramsAsHash: false,

/**
     * @cfg {String} waitTitle
     * The default title to show for the waiting message box (defaults to 'Please Wait...')
     */
    waitTitle: 'Please Wait...',

    // private
    activeAction : null,

/**
     * @cfg {Boolean} trackResetOnLoad If set to true, {@link #reset}() resets to the last loaded
     * or {@link #setValues}() data instead of when the form was first created.  Defaults to false.
     */
    trackResetOnLoad : false,

/**
     * @cfg {Boolean} standardSubmit
     *
If set to true, standard HTML form submits are used instead
     * of XHR (Ajax) style form submissions. Defaults to false.

     *
Note: When using standardSubmit, the
     * options to {@link #submit} are ignored because
     * Ext's Ajax infrastracture is bypassed. To pass extra parameters (e.g.
     * baseParams and params), utilize hidden fields
     * to submit extra data, for example:

     *

new Ext.FormPanel({
    standardSubmit: true,
    baseParams: {
        foo: 'bar'
    },
    {@link url}: 'myProcess.php',
    items: [{
        xtype: 'textfield',
        name: 'userName'
    }],
    buttons: [{
        text: 'Save',
        handler: function(){
            var fp = this.ownerCt.ownerCt,
                form = fp.getForm();
            if (form.isValid()) {
                // check if there are baseParams and if
                // hiddent items have been added already
                if (fp.baseParams && !fp.paramsAdded) {
                    // add hidden items for all baseParams
                    for (i in fp.baseParams) {
                        fp.add({
                            xtype: 'hidden',
                            name: i,
                            value: fp.baseParams[i]
                        });
                    }
                    fp.doLayout();
                    // set a custom flag to prevent re-adding
                    fp.paramsAdded = true;
                }
                form.{@link #submit}();
            }
        }
    }]
});
     *

     */

/**
     * By default wait messages are displayed with Ext.MessageBox.wait. You can target a specific
     * element by passing it or its id or mask the form itself by passing in true.
     * @type Mixed
     * @property waitMsgTarget
     */

    // private
    initEl : function(el){
        this.el = Ext.get(el);
        this.id = this.el.id || Ext.id();
        if(!this.standardSubmit){
            this.el.on('submit', this.onSubmit, this);
        }
        this.el.addClass('x-form');
    },

/**
     * Get the HTML form Element
     * @return Ext.Element
     */
    getEl: function(){
        return this.el;
    },

    // private
    onSubmit : function(e){
        e.stopEvent();
    },

    /**
     * Destroys this object.
     * @private
     * @param {Boolean} bound true if the object is bound to a form panel. If this is the case
     * the FormPanel will take care of destroying certain things, so we're just doubling up.
     */
    destroy: function(bound){
        if(bound !== true){
            this.items.each(function(f){
                Ext.destroy(f);
            });
            Ext.destroy(this.el);
        }
        this.items.clear();
        this.purgeListeners();
    },

/**
     * Returns true if client-side validation on the form is successful.
     * @return Boolean
     */
    isValid : function(){
        var valid = true;
        this.items.each(function(f){
           if(!f.validate()){
               valid = false;
           }
        });
        return valid;
    },

/**
     *
Returns true if any fields in this form have changed from their original values.

     *
Note that if this BasicForm was configured with {@link #trackResetOnLoad} then the
     * Fields' original values are updated when the values are loaded by {@link #setValues}
     * or {@link #loadRecord}.

     * @return Boolean
     */
    isDirty : function(){
        var dirty = false;
        this.items.each(function(f){
           if(f.isDirty()){
               dirty = true;
               return false;
           }
        });
        return dirty;
    },

/**
     * Performs a predefined action ({@link Ext.form.Action.Submit} or
     * {@link Ext.form.Action.Load}) or a custom extension of {@link Ext.form.Action}
     * to perform application-specific processing.
     * @param {String/Object} actionName The name of the predefined action type,
     * or instance of {@link Ext.form.Action} to perform.
     * @param {Object} options (optional) The options to pass to the {@link Ext.form.Action}.
     * All of the config options listed below are supported by both the
     * {@link Ext.form.Action.Submit submit} and {@link Ext.form.Action.Load load}
     * actions unless otherwise noted (custom actions could also accept
     * other config options):

     *
     *
  • url : String
    The url for the action (defaults
     * to the form's {@link #url}.)
    •
     *
     *
  • method : String
    The form method to use (defaults
     * to the form's method, or POST if not defined)
    •
     *
     *
  • params : String/Object
    The params to pass
     * (defaults to the form's baseParams, or none if not defined)

     *
    Parameters are encoded as standard HTTP parameters using {@link Ext#urlEncode}.
    •
     *
     *
  • headers : Object
    Request headers to set for the action
     * (defaults to the form's default headers)
    •
     *
     *
  • success : Function
    The callback that will
     * be invoked after a successful response (see top of
     * {@link Ext.form.Action.Submit submit} and {@link Ext.form.Action.Load load}
     * for a description of what constitutes a successful response).
     * The function is passed the following parameters:

     *
    • form : Ext.form.BasicForm
      The form that requested the action
      •
     *
    • action : The {@link Ext.form.Action Action} object which performed the operation.
     *
      The action object contains these properties of interest:

     *
      • {@link Ext.form.Action#response response}
        •
     *
      • {@link Ext.form.Action#result result} : interrogate for custom postprocessing
        •
     *
      • {@link Ext.form.Action#type type}
        •
     *
    •
     *
     *
  • failure : Function
    The callback that will be invoked after a
     * failed transaction attempt. The function is passed the following parameters:

     *
    • form : The {@link Ext.form.BasicForm} that requested the action.
      •
     *
    • action : The {@link Ext.form.Action Action} object which performed the operation.
     *
      The action object contains these properties of interest:

     *
      • {@link Ext.form.Action#failureType failureType}
        •
     *
      • {@link Ext.form.Action#response response}
        •
     *
      • {@link Ext.form.Action#result result} : interrogate for custom postprocessing
        •
     *
      • {@link Ext.form.Action#type type}
        •
     *
    •
     *
     *
  • scope : Object
    The scope in which to call the
     * callback functions (The this reference for the callback functions).
    •
     *
     *
  • clientValidation : Boolean
    Submit Action only.
     * Determines whether a Form's fields are validated in a final call to
     * {@link Ext.form.BasicForm#isValid isValid} prior to submission. Set to false
     * to prevent this. If undefined, pre-submission field validation is performed.

     *
     * @return {BasicForm} this
     */
    doAction : function(action, options){
        if(Ext.isString(action)){
            action = new Ext.form.Action.ACTION_TYPES[action](this, options);
        }
        if(this.fireEvent('beforeaction', this, action) !== false){
            this.beforeAction(action);
            action.run.defer(100, action);
        }
        return this;
    },

/**
     * Shortcut to {@link #doAction do} a {@link Ext.form.Action.Submit submit action}.
     * @param {Object} options The options to pass to the action (see {@link #doAction} for details).

     *
Note: this is ignored when using the {@link #standardSubmit} option.

     *
The following code:

myFormPanel.getForm().submit({
    clientValidation: true,
    url: 'updateConsignment.php',
    params: {
        newStatus: 'delivered'
    },
    success: function(form, action) {
       Ext.Msg.alert('Success', action.result.msg);
    },
    failure: function(form, action) {
        switch (action.failureType) {
            case Ext.form.Action.CLIENT_INVALID:
                Ext.Msg.alert('Failure', 'Form fields may not be submitted with invalid values');
                break;
            case Ext.form.Action.CONNECT_FAILURE:
                Ext.Msg.alert('Failure', 'Ajax communication failed');
                break;
            case Ext.form.Action.SERVER_INVALID:
               Ext.Msg.alert('Failure', action.result.msg);
       }
    }
});

     * would process the following server response for a successful submission:

{
    "success":true, // note this is Boolean, not string
    "msg":"Consignment updated"
}

     * and the following server response for a failed submission:

{
    "success":false, // note this is Boolean, not string
    "msg":"You do not have permission to perform this operation"
}

     * @return {BasicForm} this
     */
    submit : function(options){
        options = options || {};
        if(this.standardSubmit){
            var v = options.clientValidation === false || this.isValid();
            if(v){
                var el = this.el.dom;
                if(this.url && Ext.isEmpty(el.action)){
                    el.action = this.url;
                }
                el.submit();
            }
            return v;
        }
        var submitAction = String.format('{0}submit', this.api ? 'direct' : '');
        this.doAction(submitAction, options);
        return this;
    },

/**
     * Shortcut to {@link #doAction do} a {@link Ext.form.Action.Load load action}.
     * @param {Object} options The options to pass to the action (see {@link #doAction} for details)
     * @return {BasicForm} this
     */
    load : function(options){
        var loadAction = String.format('{0}load', this.api ? 'direct' : '');
        this.doAction(loadAction, options);
        return this;
    },

/**
     * Persists the values in this form into the passed {@link Ext.data.Record} object in a beginEdit/endEdit block.
     * @param {Record} record The record to edit
     * @return {BasicForm} this
     */
    updateRecord : function(record){
        record.beginEdit();
        var fs = record.fields;
        fs.each(function(f){
            var field = this.findField(f.name);
            if(field){
                record.set(f.name, field.getValue());
            }
        }, this);
        record.endEdit();
        return this;
    },

/**
     * Loads an {@link Ext.data.Record} into this form by calling {@link #setValues} with the
     * {@link Ext.data.Record#data record data}.
     * See also {@link #trackResetOnLoad}.
     * @param {Record} record The record to load
     * @return {BasicForm} this
     */
    loadRecord : function(record){
        this.setValues(record.data);
        return this;
    },

    // private
    beforeAction : function(action){
        // Call HtmlEditor's syncValue before actions
        this.items.each(function(f){
            if(f.isFormField && f.syncValue){
                f.syncValue();
            }
        });
        var o = action.options;
        if(o.waitMsg){
            if(this.waitMsgTarget === true){
                this.el.mask(o.waitMsg, 'x-mask-loading');
            }else if(this.waitMsgTarget){
                this.waitMsgTarget = Ext.get(this.waitMsgTarget);
                this.waitMsgTarget.mask(o.waitMsg, 'x-mask-loading');
            }else{
                Ext.MessageBox.wait(o.waitMsg, o.waitTitle || this.waitTitle);
            }
        }
    },

    // private
    afterAction : function(action, success){
        this.activeAction = null;
        var o = action.options;
        if(o.waitMsg){
            if(this.waitMsgTarget === true){
                this.el.unmask();
            }else if(this.waitMsgTarget){
                this.waitMsgTarget.unmask();
            }else{
                Ext.MessageBox.updateProgress(1);
                Ext.MessageBox.hide();
            }
        }
        if(success){
            if(o.reset){
                this.reset();
            }
            Ext.callback(o.success, o.scope, [this, action]);
            this.fireEvent('actioncomplete', this, action);
        }else{
            Ext.callback(o.failure, o.scope, [this, action]);
            this.fireEvent('actionfailed', this, action);
        }
    },

/**
     * Find a {@link Ext.form.Field} in this form.
     * @param {String} id The value to search for (specify either a {@link Ext.Component#id id},
     * {@link Ext.grid.Column#dataIndex dataIndex}, {@link Ext.form.Field#getName name or hiddenName}).
     * @return Field
     */
    findField : function(id) {
        var field = this.items.get(id);

        if (!Ext.isObject(field)) {
            //searches for the field corresponding to the given id. Used recursively for composite fields
            var findMatchingField = function(f) {
                if (f.isFormField) {
                    if (f.dataIndex == id || f.id == id || f.getName() == id) {
                        field = f;
                        return false;
                    } else if (f.isComposite) {
                        return f.items.each(findMatchingField);
                    }
                }
            };

            this.items.each(findMatchingField);
        }
        return field || null;
    },

/**
     * Mark fields in this form invalid in bulk.
     * @param {Array/Object} errors Either an array in the form [{id:'fieldId', msg:'The message'},...] or an object hash of {id: msg, id2: msg2}
     * @return {BasicForm} this
     */
    markInvalid : function(errors){
        if (Ext.isArray(errors)) {
            for(var i = 0, len = errors.length; i < len; i++){
                var fieldError = errors[i];
                var f = this.findField(fieldError.id);
                if(f){
                    f.markInvalid(fieldError.msg);
                }
            }
        } else {
            var field, id;
            for(id in errors){
                if(!Ext.isFunction(errors[id]) && (field = this.findField(id))){
                    field.markInvalid(errors[id]);
                }
            }
        }

        return this;
    },

/**
     * Set values for fields in this form in bulk.
     * @param {Array/Object} values Either an array in the form:

[{id:'clientName', value:'Fred. Olsen Lines'},
 {id:'portOfLoading', value:'FXT'},
 {id:'portOfDischarge', value:'OSL'} ]

     * or an object hash of the form:

{
    clientName: 'Fred. Olsen Lines',
    portOfLoading: 'FXT',
    portOfDischarge: 'OSL'
}

     * @return {BasicForm} this
     */
    setValues : function(values){
        if(Ext.isArray(values)){ // array of objects
            for(var i = 0, len = values.length; i < len; i++){
                var v = values[i];
                var f = this.findField(v.id);
                if(f){
                    f.setValue(v.value);
                    if(this.trackResetOnLoad){
                        f.originalValue = f.getValue();
                    }
                }
            }
        }else{ // object hash
            var field, id;
            for(id in values){
                if(!Ext.isFunction(values[id]) && (field = this.findField(id))){
                    field.setValue(values[id]);
                    if(this.trackResetOnLoad){
                        field.originalValue = field.getValue();
                    }
                }
            }
        }
        return this;
    },

/**
     *
Returns the fields in this form as an object with key/value pairs as they would be submitted using a standard form submit.
     * If multiple fields exist with the same name they are returned as an array.

     *
Note: The values are collected from all enabled HTML input elements within the form, not from
     * the Ext Field objects. This means that all returned values are Strings (or Arrays of Strings) and that the
     * value can potentially be the emptyText of a field.

     * @param {Boolean} asString (optional) Pass true to return the values as a string. (defaults to false, returning an Object)
     * @return {String/Object}
     */
    getValues : function(asString){
        var fs = Ext.lib.Ajax.serializeForm(this.el.dom);
        if(asString === true){
            return fs;
        }
        return Ext.urlDecode(fs);
    },

/**
     * Retrieves the fields in the form as a set of key/value pairs, using the {@link Ext.form.Field#getValue getValue()} method.
     * If multiple fields exist with the same name they are returned as an array.
     * @param {Boolean} dirtyOnly (optional) True to return only fields that are dirty.
     * @return {Object} The values in the form
     */
    getFieldValues : function(dirtyOnly){
        var o = {},
            n,
            key,
            val;
        this.items.each(function(f) {
            if (dirtyOnly !== true || f.isDirty()) {
                n = f.getName();
                key = o[n];
                val = f.getValue();

                if(Ext.isDefined(key)){
                    if(Ext.isArray(key)){
                        o[n].push(val);
                    }else{
                        o[n] = [key, val];
                    }
                }else{
                    o[n] = val;
                }
            }
        });
        return o;
    },

/**
     * Clears all invalid messages in this form.
     * @return {BasicForm} this
     */
    clearInvalid : function(){
        this.items.each(function(f){
           f.clearInvalid();
        });
        return this;
    },

/**
     * Resets this form.
     * @return {BasicForm} this
     */
    reset : function(){
        this.items.each(function(f){
            f.reset();
        });
        return this;
    },

/**
     * Add Ext.form Components to this form's Collection. This does not result in rendering of
     * the passed Component, it just enables the form to validate Fields, and distribute values to
     * Fields.
     *
You will not usually call this function. In order to be rendered, a Field must be added
     * to a {@link Ext.Container Container}, usually an {@link Ext.form.FormPanel FormPanel}.
     * The FormPanel to which the field is added takes care of adding the Field to the BasicForm's
     * collection.

     * @param {Field} field1
     * @param {Field} field2 (optional)
     * @param {Field} etc (optional)
     * @return {BasicForm} this
     */
    add : function(){
        this.items.addAll(Array.prototype.slice.call(arguments, 0));
        return this;
    },

/**
     * Removes a field from the items collection (does NOT remove its markup).
     * @param {Field} field
     * @return {BasicForm} this
     */
    remove : function(field){
        this.items.remove(field);
        return this;
    },

/**
     * Iterates through the {@link Ext.form.Field Field}s which have been {@link #add add}ed to this BasicForm,
     * checks them for an id attribute, and calls {@link Ext.form.Field#applyToMarkup} on the existing dom element with that id.
     * @return {BasicForm} this
     */
    render : function(){
        this.items.each(function(f){
            if(f.isFormField && !f.rendered && document.getElementById(f.id)){ // if the element exists
                f.applyToMarkup(f.id);
            }
        });
        return this;
    },

/**
     * Calls {@link Ext#apply} for all fields in this form with the passed object.
     * @param {Object} values
     * @return {BasicForm} this
     */
    applyToFields : function(o){
        this.items.each(function(f){
           Ext.apply(f, o);
        });
        return this;
    },

/**
     * Calls {@link Ext#applyIf} for all field in this form with the passed object.
     * @param {Object} values
     * @return {BasicForm} this
     */
    applyIfToFields : function(o){
        this.items.each(function(f){
           Ext.applyIf(f, o);
        });
        return this;
    },

    callFieldMethod : function(fnName, args){
        args = args || [];
        this.items.each(function(f){
            if(Ext.isFunction(f[fnName])){
                f[fnName].apply(f, args);
            }
        });
        return this;
    }
});

// back compat
Ext.BasicForm = Ext.form.BasicForm;


The source code

/*!
 * licensing@extjs.com
 * http://www.extjs.com/license
 */

/**
 * @class Ext.layout.BorderLayout
 * @extends Ext.layout.ContainerLayout
 *
This is a multi-pane, application-oriented UI layout style that supports multiple
 * nested panels, automatic {@link Ext.layout.BorderLayout.Region#split split} bars between
 * {@link Ext.layout.BorderLayout.Region#BorderLayout.Region regions} and built-in
 * {@link Ext.layout.BorderLayout.Region#collapsible expanding and collapsing} of regions.

 *
This class is intended to be extended or created via the layout:'border'
 * {@link Ext.Container#layout} config, and should generally not need to be created directly
 * via the new keyword.

 *
BorderLayout does not have any direct config options (other than inherited ones).
 * All configuration options available for customizing the BorderLayout are at the
 * {@link Ext.layout.BorderLayout.Region} and {@link Ext.layout.BorderLayout.SplitRegion}
 * levels.

 *
Example usage:

 *

var myBorderPanel = new Ext.Panel({
    {@link Ext.Component#renderTo renderTo}: document.body,
    {@link Ext.BoxComponent#width width}: 700,
    {@link Ext.BoxComponent#height height}: 500,
    {@link Ext.Panel#title title}: 'Border Layout',
    {@link Ext.Container#layout layout}: 'border',
    {@link Ext.Container#items items}: [{
        {@link Ext.Panel#title title}: 'South Region is resizable',
        {@link Ext.layout.BorderLayout.Region#BorderLayout.Region region}: 'south',     // position for region
        {@link Ext.BoxComponent#height height}: 100,
        {@link Ext.layout.BorderLayout.Region#split split}: true,         // enable resizing
        {@link Ext.SplitBar#minSize minSize}: 75,         // defaults to {@link Ext.layout.BorderLayout.Region#minHeight 50}
        {@link Ext.SplitBar#maxSize maxSize}: 150,
        {@link Ext.layout.BorderLayout.Region#margins margins}: '0 5 5 5'
    },{
        // xtype: 'panel' implied by default
        {@link Ext.Panel#title title}: 'West Region is collapsible',
        {@link Ext.layout.BorderLayout.Region#BorderLayout.Region region}:'west',
        {@link Ext.layout.BorderLayout.Region#margins margins}: '5 0 0 5',
        {@link Ext.BoxComponent#width width}: 200,
        {@link Ext.layout.BorderLayout.Region#collapsible collapsible}: true,   // make collapsible
        {@link Ext.layout.BorderLayout.Region#cmargins cmargins}: '5 5 0 5', // adjust top margin when collapsed
        {@link Ext.Component#id id}: 'west-region-container',
        {@link Ext.Container#layout layout}: 'fit',
        {@link Ext.Panel#unstyled unstyled}: true
    },{
        {@link Ext.Panel#title title}: 'Center Region',
        {@link Ext.layout.BorderLayout.Region#BorderLayout.Region region}: 'center',     // center region is required, no width/height specified
        {@link Ext.Component#xtype xtype}: 'container',
        {@link Ext.Container#layout layout}: 'fit',
        {@link Ext.layout.BorderLayout.Region#margins margins}: '5 5 0 0'
    }]
});

 *
Notes:

 *
  • Any container using the BorderLayout must have a child item with region:'center'.
 * The child item in the center region will always be resized to fill the remaining space not used by
 * the other regions in the layout.
    •
 *
  • Any child items with a region of west or east must have width defined
 * (an integer representing the number of pixels that the region should take up).
    •
 *
  • Any child items with a region of north or south must have height defined.
    •
 *
  • The regions of a BorderLayout are fixed at render time and thereafter, its child Components may not be removed or added.  To add/remove
 * Components within a BorderLayout, have them wrapped by an additional Container which is directly
 * managed by the BorderLayout.  If the region is to be collapsible, the Container used directly
 * by the BorderLayout manager should be a Panel.  In the following example a Container (an Ext.Panel)
 * is added to the west region:
 *

wrc = {@link Ext#getCmp Ext.getCmp}('west-region-container');
wrc.{@link Ext.Panel#removeAll removeAll}();
wrc.{@link Ext.Container#add add}({
    title: 'Added Panel',
    html: 'Some content'
});
wrc.{@link Ext.Container#doLayout doLayout}();
 *

 *
    •
 *
  •  To reference a {@link Ext.layout.BorderLayout.Region Region}:
 *

wr = myBorderPanel.layout.west;
 *

 *
    •
 *

 */
Ext.layout.BorderLayout = Ext.extend(Ext.layout.ContainerLayout, {
    // private
    monitorResize:true,
    // private
    rendered : false,

    type: 'border',

    targetCls: 'x-border-layout-ct',

    getLayoutTargetSize : function() {
        var target = this.container.getLayoutTarget();
        return target ? target.getViewSize() : {};
    },

    // private
    onLayout : function(ct, target){
        var collapsed, i, c, pos, items = ct.items.items, len = items.length;
        if(!this.rendered){
            collapsed = [];
            for(i = 0; i < len; i++) {
                c = items[i];
                pos = c.region;
                if(c.collapsed){
                    collapsed.push(c);
                }
                c.collapsed = false;
                if(!c.rendered){
                    c.render(target, i);
                    c.getPositionEl().addClass('x-border-panel');
                }
                this[pos] = pos != 'center' && c.split ?
                    new Ext.layout.BorderLayout.SplitRegion(this, c.initialConfig, pos) :
                    new Ext.layout.BorderLayout.Region(this, c.initialConfig, pos);
                this[pos].render(target, c);
            }
            this.rendered = true;
        }

        var size = this.getLayoutTargetSize();
        if(size.width < 20 || size.height < 20){ // display none?
            if(collapsed){
                this.restoreCollapsed = collapsed;
            }
            return;
        }else if(this.restoreCollapsed){
            collapsed = this.restoreCollapsed;
            delete this.restoreCollapsed;
        }

        var w = size.width, h = size.height,
            centerW = w, centerH = h, centerY = 0, centerX = 0,
            n = this.north, s = this.south, west = this.west, e = this.east, c = this.center,
            b, m, totalWidth, totalHeight;
        if(!c && Ext.layout.BorderLayout.WARN !== false){
            throw 'No center region defined in BorderLayout ' + ct.id;
        }

        if(n && n.isVisible()){
            b = n.getSize();
            m = n.getMargins();
            b.width = w - (m.left+m.right);
            b.x = m.left;
            b.y = m.top;
            centerY = b.height + b.y + m.bottom;
            centerH -= centerY;
            n.applyLayout(b);
        }
        if(s && s.isVisible()){
            b = s.getSize();
            m = s.getMargins();
            b.width = w - (m.left+m.right);
            b.x = m.left;
            totalHeight = (b.height + m.top + m.bottom);
            b.y = h - totalHeight + m.top;
            centerH -= totalHeight;
            s.applyLayout(b);
        }
        if(west && west.isVisible()){
            b = west.getSize();
            m = west.getMargins();
            b.height = centerH - (m.top+m.bottom);
            b.x = m.left;
            b.y = centerY + m.top;
            totalWidth = (b.width + m.left + m.right);
            centerX += totalWidth;
            centerW -= totalWidth;
            west.applyLayout(b);
        }
        if(e && e.isVisible()){
            b = e.getSize();
            m = e.getMargins();
            b.height = centerH - (m.top+m.bottom);
            totalWidth = (b.width + m.left + m.right);
            b.x = w - totalWidth + m.left;
            b.y = centerY + m.top;
            centerW -= totalWidth;
            e.applyLayout(b);
        }
        if(c){
            m = c.getMargins();
            var centerBox = {
                x: centerX + m.left,
                y: centerY + m.top,
                width: centerW - (m.left+m.right),
                height: centerH - (m.top+m.bottom)
            };
            c.applyLayout(centerBox);
        }
        if(collapsed){
            for(i = 0, len = collapsed.length; i < len; i++){
                collapsed[i].collapse(false);
            }
        }
        if(Ext.isIE && Ext.isStrict){ // workaround IE strict repainting issue
            target.repaint();
        }
        // Putting a border layout into an overflowed container is NOT correct and will make a second layout pass necessary.
        if (i = target.getStyle('overflow') && i != 'hidden' && !this.adjustmentPass) {
            var ts = this.getLayoutTargetSize();
            if (ts.width != size.width || ts.height != size.height){
                this.adjustmentPass = true;
                this.onLayout(ct, target);
            }
        }
        delete this.adjustmentPass;
    },

    destroy: function() {
        var r = ['north', 'south', 'east', 'west'], i, region;
        for (i = 0; i < r.length; i++) {
            region = this[r[i]];
            if(region){
                if(region.destroy){
                    region.destroy();
                }else if (region.split){
                    region.split.destroy(true);
                }
            }
        }
        Ext.layout.BorderLayout.superclass.destroy.call(this);
    }

/**
     * @property activeItem
     * @hide
     */
});

/**
 * @class Ext.layout.BorderLayout.Region
 *
This is a region of a {@link Ext.layout.BorderLayout BorderLayout} that acts as a subcontainer
 * within the layout.  Each region has its own {@link Ext.layout.ContainerLayout layout} that is
 * independent of other regions and the containing BorderLayout, and can be any of the
 * {@link Ext.layout.ContainerLayout valid Ext layout types}.

 *
Region size is managed automatically and cannot be changed by the user -- for
 * {@link #split resizable regions}, see {@link Ext.layout.BorderLayout.SplitRegion}.

 * @constructor
 * Create a new Region.
 * @param {Layout} layout The {@link Ext.layout.BorderLayout BorderLayout} instance that is managing this Region.
 * @param {Object} config The configuration options
 * @param {String} position The region position.  Valid values are: north, south,
 * east, west and center.  Every {@link Ext.layout.BorderLayout BorderLayout}
 * must have a center region for the primary content -- all other regions are optional.
 */
Ext.layout.BorderLayout.Region = function(layout, config, pos){
    Ext.apply(this, config);
    this.layout = layout;
    this.position = pos;
    this.state = {};
    if(typeof this.margins == 'string'){
        this.margins = this.layout.parseMargins(this.margins);
    }
    this.margins = Ext.applyIf(this.margins || {}, this.defaultMargins);
    if(this.collapsible){
        if(typeof this.cmargins == 'string'){
            this.cmargins = this.layout.parseMargins(this.cmargins);
        }
        if(this.collapseMode == 'mini' && !this.cmargins){
            this.cmargins = {left:0,top:0,right:0,bottom:0};
        }else{
            this.cmargins = Ext.applyIf(this.cmargins || {},
                pos == 'north' || pos == 'south' ? this.defaultNSCMargins : this.defaultEWCMargins);
        }
    }
};

Ext.layout.BorderLayout.Region.prototype = {

/**
     * @cfg {Boolean} animFloat
     * When a collapsed region's bar is clicked, the region's panel will be displayed as a floated
     * panel that will close again once the user mouses out of that panel (or clicks out if
     * {@link #autoHide} = false).  Setting {@link #animFloat} = false will
     * prevent the open and close of these floated panels from being animated (defaults to true).
     */

/**
     * @cfg {Boolean} autoHide
     * When a collapsed region's bar is clicked, the region's panel will be displayed as a floated
     * panel.  If autoHide = true, the panel will automatically hide after the user mouses
     * out of the panel.  If autoHide = false, the panel will continue to display until the
     * user clicks outside of the panel (defaults to true).
     */

/**
     * @cfg {String} collapseMode
     * collapseMode supports two configuration values:

     *
  • undefined (default)
    By default, {@link #collapsible}
     * regions are collapsed by clicking the expand/collapse tool button that renders into the region's
     * title bar.
    •
     *
  • 'mini'
    Optionally, when collapseMode is set to
     * 'mini' the region's split bar will also display a small collapse button in the center of
     * the bar. In 'mini' mode the region will collapse to a thinner bar than in normal mode.
     *
    •
     *

     *
Note: if a collapsible region does not have a title bar, then set collapseMode =
     * 'mini' and {@link #split} = true in order for the region to be {@link #collapsible}
     * by the user as the expand/collapse tool button (that would go in the title bar) will not be rendered.

     *
See also {@link #cmargins}.

     */

/**
     * @cfg {Object} margins
     * An object containing margins to apply to the region when in the expanded state in the
     * format:

{
    top: (top margin),
    right: (right margin),
    bottom: (bottom margin),
    left: (left margin)
}

     *
May also be a string containing space-separated, numeric margin values. The order of the
     * sides associated with each value matches the way CSS processes margin values:

     *

     *
  • If there is only one value, it applies to all sides.
    •
     *
  • If there are two values, the top and bottom borders are set to the first value and the
     * right and left are set to the second.
    •
     *
  • If there are three values, the top is set to the first value, the left and right are set
     * to the second, and the bottom is set to the third.
    •
     *
  • If there are four values, they apply to the top, right, bottom, and left, respectively.
    •
     *

     *
Defaults to:

     * {top:0, right:0, bottom:0, left:0}
     *

     */

/**
     * @cfg {Object} cmargins
     * An object containing margins to apply to the region when in the collapsed state in the
     * format:

{
    top: (top margin),
    right: (right margin),
    bottom: (bottom margin),
    left: (left margin)
}

     *
May also be a string containing space-separated, numeric margin values. The order of the
     * sides associated with each value matches the way CSS processes margin values.

     *

     *
  • If there is only one value, it applies to all sides.
    •
     *
  • If there are two values, the top and bottom borders are set to the first value and the
     * right and left are set to the second.
    •
     *
  • If there are three values, the top is set to the first value, the left and right are set
     * to the second, and the bottom is set to the third.
    •
     *
  • If there are four values, they apply to the top, right, bottom, and left, respectively.
    •
     *

     */

/**
     * @cfg {Boolean} collapsible
     *
true to allow the user to collapse this region (defaults to false).  If
     * true, an expand/collapse tool button will automatically be rendered into the title
     * bar of the region, otherwise the button will not be shown.

     *
Note: that a title bar is required to display the collapse/expand toggle button -- if
     * no title is specified for the region's panel, the region will only be collapsible if
     * {@link #collapseMode} = 'mini' and {@link #split} = true.
     */
    collapsible : false,

/**
     * @cfg {Boolean} split
     *
true to create a {@link Ext.layout.BorderLayout.SplitRegion SplitRegion} and
     * display a 5px wide {@link Ext.SplitBar} between this region and its neighbor, allowing the user to
     * resize the regions dynamically.  Defaults to false creating a
     * {@link Ext.layout.BorderLayout.Region Region}.

     *
Notes:

     *
  • this configuration option is ignored if region='center'
    •
     *
  • when split == true, it is common to specify a
     * {@link Ext.SplitBar#minSize minSize} and {@link Ext.SplitBar#maxSize maxSize}
     * for the {@link Ext.BoxComponent BoxComponent} representing the region. These are not native
     * configs of {@link Ext.BoxComponent BoxComponent}, and are used only by this class.
    •
     *
  • if {@link #collapseMode} = 'mini' requires split = true to reserve space
     * for the collapse tool
    •
     *

     */
    split:false,

/**
     * @cfg {Boolean} floatable
     * true to allow clicking a collapsed region's bar to display the region's panel floated
     * above the layout, false to force the user to fully expand a collapsed region by
     * clicking the expand button to see it again (defaults to true).
     */
    floatable: true,

/**
     * @cfg {Number} minWidth
     *
The minimum allowable width in pixels for this region (defaults to 50).
     * maxWidth may also be specified.

     *
Note: setting the {@link Ext.SplitBar#minSize minSize} /
     * {@link Ext.SplitBar#maxSize maxSize} supersedes any specified
     * minWidth / maxWidth.

     */
    minWidth:50,

/**
     * @cfg {Number} minHeight
     * The minimum allowable height in pixels for this region (defaults to 50)
     * maxHeight may also be specified.

     *
Note: setting the {@link Ext.SplitBar#minSize minSize} /
     * {@link Ext.SplitBar#maxSize maxSize} supersedes any specified
     * minHeight / maxHeight.

     */
    minHeight:50,

    // private
    defaultMargins : {left:0,top:0,right:0,bottom:0},
    // private
    defaultNSCMargins : {left:5,top:5,right:5,bottom:5},
    // private
    defaultEWCMargins : {left:5,top:0,right:5,bottom:0},
    floatingZIndex: 100,

/**
     * True if this region is collapsed. Read-only.
     * @type Boolean
     * @property
     */
    isCollapsed : false,

/**
     * This region's panel.  Read-only.
     * @type Ext.Panel
     * @property panel
     */

/**
     * This region's layout.  Read-only.
     * @type Layout
     * @property layout
     */

/**
     * This region's layout position (north, south, east, west or center).  Read-only.
     * @type String
     * @property position
     */

    // private
    render : function(ct, p){
        this.panel = p;
        p.el.enableDisplayMode();
        this.targetEl = ct;
        this.el = p.el;

        var gs = p.getState, ps = this.position;
        p.getState = function(){
            return Ext.apply(gs.call(p) || {}, this.state);
        }.createDelegate(this);

        if(ps != 'center'){
            p.allowQueuedExpand = false;
            p.on({
                beforecollapse: this.beforeCollapse,
                collapse: this.onCollapse,
                beforeexpand: this.beforeExpand,
                expand: this.onExpand,
                hide: this.onHide,
                show: this.onShow,
                scope: this
            });
            if(this.collapsible || this.floatable){
                p.collapseEl = 'el';
                p.slideAnchor = this.getSlideAnchor();
            }
            if(p.tools && p.tools.toggle){
                p.tools.toggle.addClass('x-tool-collapse-'+ps);
                p.tools.toggle.addClassOnOver('x-tool-collapse-'+ps+'-over');
            }
        }
    },

    // private
    getCollapsedEl : function(){
        if(!this.collapsedEl){
            if(!this.toolTemplate){
                var tt = new Ext.Template(
                     '

'
                );
                tt.disableFormats = true;
                tt.compile();
                Ext.layout.BorderLayout.Region.prototype.toolTemplate = tt;
            }
            this.collapsedEl = this.targetEl.createChild({
                cls: "x-layout-collapsed x-layout-collapsed-"+this.position,
                id: this.panel.id + '-xcollapsed'
            });
            this.collapsedEl.enableDisplayMode('block');

            if(this.collapseMode == 'mini'){
                this.collapsedEl.addClass('x-layout-cmini-'+this.position);
                this.miniCollapsedEl = this.collapsedEl.createChild({
                    cls: "x-layout-mini x-layout-mini-"+this.position, html: " "
                });
                this.miniCollapsedEl.addClassOnOver('x-layout-mini-over');
                this.collapsedEl.addClassOnOver("x-layout-collapsed-over");
                this.collapsedEl.on('click', this.onExpandClick, this, {stopEvent:true});
            }else {
                if(this.collapsible !== false && !this.hideCollapseTool) {
                    var t = this.toolTemplate.append(
                            this.collapsedEl.dom,
                            {id:'expand-'+this.position}, true);
                    t.addClassOnOver('x-tool-expand-'+this.position+'-over');
                    t.on('click', this.onExpandClick, this, {stopEvent:true});
                }
                if(this.floatable !== false || this.titleCollapse){
                   this.collapsedEl.addClassOnOver("x-layout-collapsed-over");
                   this.collapsedEl.on("click", this[this.floatable ? 'collapseClick' : 'onExpandClick'], this);
                }
            }
        }
        return this.collapsedEl;
    },

    // private
    onExpandClick : function(e){
        if(this.isSlid){
            this.panel.expand(false);
        }else{
            this.panel.expand();
        }
    },

    // private
    onCollapseClick : function(e){
        this.panel.collapse();
    },

    // private
    beforeCollapse : function(p, animate){
        this.lastAnim = animate;
        if(this.splitEl){
            this.splitEl.hide();
        }
        this.getCollapsedEl().show();
        var el = this.panel.getEl();
        this.originalZIndex = el.getStyle('z-index');
        el.setStyle('z-index', 100);
        this.isCollapsed = true;
        this.layout.layout();
    },

    // private
    onCollapse : function(animate){
        this.panel.el.setStyle('z-index', 1);
        if(this.lastAnim === false || this.panel.animCollapse === false){
            this.getCollapsedEl().dom.style.visibility = 'visible';
        }else{
            this.getCollapsedEl().slideIn(this.panel.slideAnchor, {duration:.2});
        }
        this.state.collapsed = true;
        this.panel.saveState();
    },

    // private
    beforeExpand : function(animate){
        if(this.isSlid){
            this.afterSlideIn();
        }
        var c = this.getCollapsedEl();
        this.el.show();
        if(this.position == 'east' || this.position == 'west'){
            this.panel.setSize(undefined, c.getHeight());
        }else{
            this.panel.setSize(c.getWidth(), undefined);
        }
        c.hide();
        c.dom.style.visibility = 'hidden';
        this.panel.el.setStyle('z-index', this.floatingZIndex);
    },

    // private
    onExpand : function(){
        this.isCollapsed = false;
        if(this.splitEl){
            this.splitEl.show();
        }
        this.layout.layout();
        this.panel.el.setStyle('z-index', this.originalZIndex);
        this.state.collapsed = false;
        this.panel.saveState();
    },

    // private
    collapseClick : function(e){
        if(this.isSlid){
           e.stopPropagation();
           this.slideIn();
        }else{
           e.stopPropagation();
           this.slideOut();
        }
    },

    // private
    onHide : function(){
        if(this.isCollapsed){
            this.getCollapsedEl().hide();
        }else if(this.splitEl){
            this.splitEl.hide();
        }
    },

    // private
    onShow : function(){
        if(this.isCollapsed){
            this.getCollapsedEl().show();
        }else if(this.splitEl){
            this.splitEl.show();
        }
    },

/**
     * True if this region is currently visible, else false.
     * @return {Boolean}
     */
    isVisible : function(){
        return !this.panel.hidden;
    },

/**
     * Returns the current margins for this region.  If the region is collapsed, the
     * {@link #cmargins} (collapsed margins) value will be returned, otherwise the
     * {@link #margins} value will be returned.
     * @return {Object} An object containing the element's margins: {left: (left
     * margin), top: (top margin), right: (right margin), bottom: (bottom margin)}
     */
    getMargins : function(){
        return this.isCollapsed && this.cmargins ? this.cmargins : this.margins;
    },

/**
     * Returns the current size of this region.  If the region is collapsed, the size of the
     * collapsedEl will be returned, otherwise the size of the region's panel will be returned.
     * @return {Object} An object containing the element's size: {width: (element width),
     * height: (element height)}
     */
    getSize : function(){
        return this.isCollapsed ? this.getCollapsedEl().getSize() : this.panel.getSize();
    },

/**
     * Sets the specified panel as the container element for this region.
     * @param {Ext.Panel} panel The new panel
     */
    setPanel : function(panel){
        this.panel = panel;
    },

/**
     * Returns the minimum allowable width for this region.
     * @return {Number} The minimum width
     */
    getMinWidth: function(){
        return this.minWidth;
    },

/**
     * Returns the minimum allowable height for this region.
     * @return {Number} The minimum height
     */
    getMinHeight: function(){
        return this.minHeight;
    },

    // private
    applyLayoutCollapsed : function(box){
        var ce = this.getCollapsedEl();
        ce.setLeftTop(box.x, box.y);
        ce.setSize(box.width, box.height);
    },

    // private
    applyLayout : function(box){
        if(this.isCollapsed){
            this.applyLayoutCollapsed(box);
        }else{
            this.panel.setPosition(box.x, box.y);
            this.panel.setSize(box.width, box.height);
        }
    },

    // private
    beforeSlide: function(){
        this.panel.beforeEffect();
    },

    // private
    afterSlide : function(){
        this.panel.afterEffect();
    },

    // private
    initAutoHide : function(){
        if(this.autoHide !== false){
            if(!this.autoHideHd){
                this.autoHideSlideTask = new Ext.util.DelayedTask(this.slideIn, this);
                this.autoHideHd = {
                    "mouseout": function(e){
                        if(!e.within(this.el, true)){
                            this.autoHideSlideTask.delay(500);
                        }
                    },
                    "mouseover" : function(e){
                        this.autoHideSlideTask.cancel();
                    },
                    scope : this
                };
            }
            this.el.on(this.autoHideHd);
            this.collapsedEl.on(this.autoHideHd);
        }
    },

    // private
    clearAutoHide : function(){
        if(this.autoHide !== false){
            this.el.un("mouseout", this.autoHideHd.mouseout);
            this.el.un("mouseover", this.autoHideHd.mouseover);
            this.collapsedEl.un("mouseout", this.autoHideHd.mouseout);
            this.collapsedEl.un("mouseover", this.autoHideHd.mouseover);
        }
    },

    // private
    clearMonitor : function(){
        Ext.getDoc().un("click", this.slideInIf, this);
    },

/**
     * If this Region is {@link #floatable}, this method slides this Region into full visibility over the top
     * of the center Region where it floats until either {@link #slideIn} is called, or other regions of the layout
     * are clicked, or the mouse exits the Region.
     */
    slideOut : function(){
        if(this.isSlid || this.el.hasActiveFx()){
            return;
        }
        this.isSlid = true;
        var ts = this.panel.tools, dh, pc;
        if(ts && ts.toggle){
            ts.toggle.hide();
        }
        this.el.show();

        // Temporarily clear the collapsed flag so we can onResize the panel on the slide
        pc = this.panel.collapsed;
        this.panel.collapsed = false;

        if(this.position == 'east' || this.position == 'west'){
            // Temporarily clear the deferHeight flag so we can size the height on the slide
            dh = this.panel.deferHeight;
            this.panel.deferHeight = false;

            this.panel.setSize(undefined, this.collapsedEl.getHeight());

            // Put the deferHeight flag back after setSize
            this.panel.deferHeight = dh;
        }else{
            this.panel.setSize(this.collapsedEl.getWidth(), undefined);
        }

        // Put the collapsed flag back after onResize
        this.panel.collapsed = pc;

        this.restoreLT = [this.el.dom.style.left, this.el.dom.style.top];
        this.el.alignTo(this.collapsedEl, this.getCollapseAnchor());
        this.el.setStyle("z-index", this.floatingZIndex+2);
        this.panel.el.replaceClass('x-panel-collapsed', 'x-panel-floating');
        if(this.animFloat !== false){
            this.beforeSlide();
            this.el.slideIn(this.getSlideAnchor(), {
                callback: function(){
                    this.afterSlide();
                    this.initAutoHide();
                    Ext.getDoc().on("click", this.slideInIf, this);
                },
                scope: this,
                block: true
            });
        }else{
            this.initAutoHide();
             Ext.getDoc().on("click", this.slideInIf, this);
        }
    },

    // private
    afterSlideIn : function(){
        this.clearAutoHide();
        this.isSlid = false;
        this.clearMonitor();
        this.el.setStyle("z-index", "");
        this.panel.el.replaceClass('x-panel-floating', 'x-panel-collapsed');
        this.el.dom.style.left = this.restoreLT[0];
        this.el.dom.style.top = this.restoreLT[1];

        var ts = this.panel.tools;
        if(ts && ts.toggle){
            ts.toggle.show();
        }
    },

/**
     * If this Region is {@link #floatable}, and this Region has been slid into floating visibility, then this method slides
     * this region back into its collapsed state.
     */
    slideIn : function(cb){
        if(!this.isSlid || this.el.hasActiveFx()){
            Ext.callback(cb);
            return;
        }
        this.isSlid = false;
        if(this.animFloat !== false){
            this.beforeSlide();
            this.el.slideOut(this.getSlideAnchor(), {
                callback: function(){
                    this.el.hide();
                    this.afterSlide();
                    this.afterSlideIn();
                    Ext.callback(cb);
                },
                scope: this,
                block: true
            });
        }else{
            this.el.hide();
            this.afterSlideIn();
        }
    },

    // private
    slideInIf : function(e){
        if(!e.within(this.el)){
            this.slideIn();
        }
    },

    // private
    anchors : {
        "west" : "left",
        "east" : "right",
        "north" : "top",
        "south" : "bottom"
    },

    // private
    sanchors : {
        "west" : "l",
        "east" : "r",
        "north" : "t",
        "south" : "b"
    },

    // private
    canchors : {
        "west" : "tl-tr",
        "east" : "tr-tl",
        "north" : "tl-bl",
        "south" : "bl-tl"
    },

    // private
    getAnchor : function(){
        return this.anchors[this.position];
    },

    // private
    getCollapseAnchor : function(){
        return this.canchors[this.position];
    },

    // private
    getSlideAnchor : function(){
        return this.sanchors[this.position];
    },

    // private
    getAlignAdj : function(){
        var cm = this.cmargins;
        switch(this.position){
            case "west":
                return [0, 0];
            break;
            case "east":
                return [0, 0];
            break;
            case "north":
                return [0, 0];
            break;
            case "south":
                return [0, 0];
            break;
        }
    },

    // private
    getExpandAdj : function(){
        var c = this.collapsedEl, cm = this.cmargins;
        switch(this.position){
            case "west":
                return [-(cm.right+c.getWidth()+cm.left), 0];
            break;
            case "east":
                return [cm.right+c.getWidth()+cm.left, 0];
            break;
            case "north":
                return [0, -(cm.top+cm.bottom+c.getHeight())];
            break;
            case "south":
                return [0, cm.top+cm.bottom+c.getHeight()];
            break;
        }
    },

    destroy : function(){
        if (this.autoHideSlideTask && this.autoHideSlideTask.cancel){
            this.autoHideSlideTask.cancel();
        }
        Ext.destroy(this.miniCollapsedEl, this.collapsedEl);
    }
};

/**
 * @class Ext.layout.BorderLayout.SplitRegion
 * @extends Ext.layout.BorderLayout.Region
 *
This is a specialized type of {@link Ext.layout.BorderLayout.Region BorderLayout region} that
 * has a built-in {@link Ext.SplitBar} for user resizing of regions.  The movement of the split bar
 * is configurable to move either {@link #tickSize smooth or incrementally}.

 * @constructor
 * Create a new SplitRegion.
 * @param {Layout} layout The {@link Ext.layout.BorderLayout BorderLayout} instance that is managing this Region.
 * @param {Object} config The configuration options
 * @param {String} position The region position.  Valid values are: north, south, east, west and center.  Every
 * BorderLayout must have a center region for the primary content -- all other regions are optional.
 */
Ext.layout.BorderLayout.SplitRegion = function(layout, config, pos){
    Ext.layout.BorderLayout.SplitRegion.superclass.constructor.call(this, layout, config, pos);
    // prevent switch
    this.applyLayout = this.applyFns[pos];
};

Ext.extend(Ext.layout.BorderLayout.SplitRegion, Ext.layout.BorderLayout.Region, {

/**
     * @cfg {Number} tickSize
     * The increment, in pixels by which to move this Region's {@link Ext.SplitBar SplitBar}.
     * By default, the {@link Ext.SplitBar SplitBar} moves smoothly.
     */

/**
     * @cfg {String} splitTip
     * The tooltip to display when the user hovers over a
     * {@link Ext.layout.BorderLayout.Region#collapsible non-collapsible} region's split bar
     * (defaults to "Drag to resize.").  Only applies if
     * {@link #useSplitTips} = true.
     */
    splitTip : "Drag to resize.",

/**
     * @cfg {String} collapsibleSplitTip
     * The tooltip to display when the user hovers over a
     * {@link Ext.layout.BorderLayout.Region#collapsible collapsible} region's split bar
     * (defaults to "Drag to resize. Double click to hide."). Only applies if
     * {@link #useSplitTips} = true.
     */
    collapsibleSplitTip : "Drag to resize. Double click to hide.",

/**
     * @cfg {Boolean} useSplitTips
     * true to display a tooltip when the user hovers over a region's split bar
     * (defaults to false).  The tooltip text will be the value of either
     * {@link #splitTip} or {@link #collapsibleSplitTip} as appropriate.
     */
    useSplitTips : false,

    // private
    splitSettings : {
        north : {
            orientation: Ext.SplitBar.VERTICAL,
            placement: Ext.SplitBar.TOP,
            maxFn : 'getVMaxSize',
            minProp: 'minHeight',
            maxProp: 'maxHeight'
        },
        south : {
            orientation: Ext.SplitBar.VERTICAL,
            placement: Ext.SplitBar.BOTTOM,
            maxFn : 'getVMaxSize',
            minProp: 'minHeight',
            maxProp: 'maxHeight'
        },
        east : {
            orientation: Ext.SplitBar.HORIZONTAL,
            placement: Ext.SplitBar.RIGHT,
            maxFn : 'getHMaxSize',
            minProp: 'minWidth',
            maxProp: 'maxWidth'
        },
        west : {
            orientation: Ext.SplitBar.HORIZONTAL,
            placement: Ext.SplitBar.LEFT,
            maxFn : 'getHMaxSize',
            minProp: 'minWidth',
            maxProp: 'maxWidth'
        }
    },

    // private
    applyFns : {
        west : function(box){
            if(this.isCollapsed){
                return this.applyLayoutCollapsed(box);
            }
            var sd = this.splitEl.dom, s = sd.style;
            this.panel.setPosition(box.x, box.y);
            var sw = sd.offsetWidth;
            s.left = (box.x+box.width-sw)+'px';
            s.top = (box.y)+'px';
            s.height = Math.max(0, box.height)+'px';
            this.panel.setSize(box.width-sw, box.height);
        },
        east : function(box){
            if(this.isCollapsed){
                return this.applyLayoutCollapsed(box);
            }
            var sd = this.splitEl.dom, s = sd.style;
            var sw = sd.offsetWidth;
            this.panel.setPosition(box.x+sw, box.y);
            s.left = (box.x)+'px';
            s.top = (box.y)+'px';
            s.height = Math.max(0, box.height)+'px';
            this.panel.setSize(box.width-sw, box.height);
        },
        north : function(box){
            if(this.isCollapsed){
                return this.applyLayoutCollapsed(box);
            }
            var sd = this.splitEl.dom, s = sd.style;
            var sh = sd.offsetHeight;
            this.panel.setPosition(box.x, box.y);
            s.left = (box.x)+'px';
            s.top = (box.y+box.height-sh)+'px';
            s.width = Math.max(0, box.width)+'px';
            this.panel.setSize(box.width, box.height-sh);
        },
        south : function(box){
            if(this.isCollapsed){
                return this.applyLayoutCollapsed(box);
            }
            var sd = this.splitEl.dom, s = sd.style;
            var sh = sd.offsetHeight;
            this.panel.setPosition(box.x, box.y+sh);
            s.left = (box.x)+'px';
            s.top = (box.y)+'px';
            s.width = Math.max(0, box.width)+'px';
            this.panel.setSize(box.width, box.height-sh);
        }
    },

    // private
    render : function(ct, p){
        Ext.layout.BorderLayout.SplitRegion.superclass.render.call(this, ct, p);

        var ps = this.position;

        this.splitEl = ct.createChild({
            cls: "x-layout-split x-layout-split-"+ps, html: " ",
            id: this.panel.id + '-xsplit'
        });

        if(this.collapseMode == 'mini'){
            this.miniSplitEl = this.splitEl.createChild({
                cls: "x-layout-mini x-layout-mini-"+ps, html: " "
            });
            this.miniSplitEl.addClassOnOver('x-layout-mini-over');
            this.miniSplitEl.on('click', this.onCollapseClick, this, {stopEvent:true});
        }

        var s = this.splitSettings[ps];

        this.split = new Ext.SplitBar(this.splitEl.dom, p.el, s.orientation);
        this.split.tickSize = this.tickSize;
        this.split.placement = s.placement;
        this.split.getMaximumSize = this[s.maxFn].createDelegate(this);
        this.split.minSize = this.minSize || this[s.minProp];
        this.split.on("beforeapply", this.onSplitMove, this);
        this.split.useShim = this.useShim === true;
        this.maxSize = this.maxSize || this[s.maxProp];

        if(p.hidden){
            this.splitEl.hide();
        }

        if(this.useSplitTips){
            this.splitEl.dom.title = this.collapsible ? this.collapsibleSplitTip : this.splitTip;
        }
        if(this.collapsible){
            this.splitEl.on("dblclick", this.onCollapseClick,  this);
        }
    },

    //docs inherit from superclass
    getSize : function(){
        if(this.isCollapsed){
            return this.collapsedEl.getSize();
        }
        var s = this.panel.getSize();
        if(this.position == 'north' || this.position == 'south'){
            s.height += this.splitEl.dom.offsetHeight;
        }else{
            s.width += this.splitEl.dom.offsetWidth;
        }
        return s;
    },

    // private
    getHMaxSize : function(){
         var cmax = this.maxSize || 10000;
         var center = this.layout.center;
         return Math.min(cmax, (this.el.getWidth()+center.el.getWidth())-center.getMinWidth());
    },

    // private
    getVMaxSize : function(){
        var cmax = this.maxSize || 10000;
        var center = this.layout.center;
        return Math.min(cmax, (this.el.getHeight()+center.el.getHeight())-center.getMinHeight());
    },

    // private
    onSplitMove : function(split, newSize){
        var s = this.panel.getSize();
        this.lastSplitSize = newSize;
        if(this.position == 'north' || this.position == 'south'){
            this.panel.setSize(s.width, newSize);
            this.state.height = newSize;
        }else{
            this.panel.setSize(newSize, s.height);
            this.state.width = newSize;
        }
        this.layout.layout();
        this.panel.saveState();
        return false;
    },

/**
     * Returns a reference to the split bar in use by this region.
     * @return {Ext.SplitBar} The split bar
     */
    getSplitBar : function(){
        return this.split;
    },

    // inherit docs
    destroy : function() {
        Ext.destroy(this.miniSplitEl, this.split, this.splitEl);
        Ext.layout.BorderLayout.SplitRegion.superclass.destroy.call(this);
    }
});

Ext.Container.LAYOUTS['border'] = Ext.layout.BorderLayout;


The source code

/*!
 * licensing@extjs.com
 * http://www.extjs.com/license
 */

/**
 * @class Ext.BoxComponent
 * @extends Ext.Component
 *
Base class for any {@link Ext.Component Component} that is to be sized as a box, using width and height.

 *
BoxComponent provides automatic box model adjustments for sizing and positioning and will work correctly
 * within the Component rendering model.

 *
A BoxComponent may be created as a custom Component which encapsulates any HTML element, either a pre-existing
 * element, or one that is created to your specifications at render time. Usually, to participate in layouts,
 * a Component will need to be a BoxComponent in order to have its width and height managed.

 *
To use a pre-existing element as a BoxComponent, configure it so that you preset the el property to the
 * element to reference:

var pageHeader = new Ext.BoxComponent({
    el: 'my-header-div'
});

 * This may then be {@link Ext.Container#add added} to a {@link Ext.Container Container} as a child item.

 *
To create a BoxComponent based around a HTML element to be created at render time, use the
 * {@link Ext.Component#autoEl autoEl} config option which takes the form of a
 * {@link Ext.DomHelper DomHelper} specification:

var myImage = new Ext.BoxComponent({
    autoEl: {
        tag: 'img',
        src: '/images/my-image.jpg'
    }
});

 * @constructor
 * @param {Ext.Element/String/Object} config The configuration options.
 * @xtype box
 */
Ext.BoxComponent = Ext.extend(Ext.Component, {

    // Configs below are used for all Components when rendered by BoxLayout.

/**
     * @cfg {Number} flex
     *
Note: this config is only used when this Component is rendered
     * by a Container which has been configured to use a {@link Ext.layout.BoxLayout BoxLayout}.
     * Each child Component with a flex property will be flexed either vertically (by a VBoxLayout)
     * or horizontally (by an HBoxLayout) according to the item's relative flex value
     * compared to the sum of all Components with flex value specified. Any child items that have
     * either a flex = 0 or flex = undefined will not be 'flexed' (the initial size will not be changed).
     */
    // Configs below are used for all Components when rendered by AnchorLayout.

/**
     * @cfg {String} anchor
Note: this config is only used when this Component is rendered
     * by a Container which has been configured to use an {@link Ext.layout.AnchorLayout AnchorLayout} (or subclass thereof).
     * based layout manager, for example:

     *
  • {@link Ext.form.FormPanel}
    •
     *
  • specifying layout: 'anchor' // or 'form', or 'absolute'
    •
     *

     *
See {@link Ext.layout.AnchorLayout}.{@link Ext.layout.AnchorLayout#anchor anchor} also.

     */
    // tabTip config is used when a BoxComponent is a child of a TabPanel

/**
     * @cfg {String} tabTip
     *
Note: this config is only used when this BoxComponent is a child item of a TabPanel.

     * A string to be used as innerHTML (html tags are accepted) to show in a tooltip when mousing over
     * the associated tab selector element. {@link Ext.QuickTips}.init()
     * must be called in order for the tips to render.
     */
    // Configs below are used for all Components when rendered by BorderLayout.

/**
     * @cfg {String} region
Note: this config is only used when this BoxComponent is rendered
     * by a Container which has been configured to use the {@link Ext.layout.BorderLayout BorderLayout}
     * layout manager (e.g. specifying layout:'border').

     *
See {@link Ext.layout.BorderLayout} also.

     */
    // margins config is used when a BoxComponent is rendered by BorderLayout or BoxLayout.

/**
     * @cfg {Object} margins
Note: this config is only used when this BoxComponent is rendered
     * by a Container which has been configured to use the {@link Ext.layout.BorderLayout BorderLayout}
     * or one of the two {@link Ext.layout.BoxLayout BoxLayout} subclasses.

     *
An object containing margins to apply to this BoxComponent in the
     * format:

{
    top: (top margin),
    right: (right margin),
    bottom: (bottom margin),
    left: (left margin)
}

     *
May also be a string containing space-separated, numeric margin values. The order of the
     * sides associated with each value matches the way CSS processes margin values:

     *

     *
  • If there is only one value, it applies to all sides.
    •
     *
  • If there are two values, the top and bottom borders are set to the first value and the
     * right and left are set to the second.
    •
     *
  • If there are three values, the top is set to the first value, the left and right are set
     * to the second, and the bottom is set to the third.
    •
     *
  • If there are four values, they apply to the top, right, bottom, and left, respectively.
    •
     *

     *
Defaults to:

     * {top:0, right:0, bottom:0, left:0}
     *

     */

/**
     * @cfg {Number} x
     * The local x (left) coordinate for this component if contained within a positioning container.
     */

/**
     * @cfg {Number} y
     * The local y (top) coordinate for this component if contained within a positioning container.
     */

/**
     * @cfg {Number} pageX
     * The page level x coordinate for this component if contained within a positioning container.
     */

/**
     * @cfg {Number} pageY
     * The page level y coordinate for this component if contained within a positioning container.
     */

/**
     * @cfg {Number} height
     * The height of this component in pixels (defaults to auto).
     * Note to express this dimension as a percentage or offset see {@link Ext.Component#anchor}.
     */

/**
     * @cfg {Number} width
     * The width of this component in pixels (defaults to auto).
     * Note to express this dimension as a percentage or offset see {@link Ext.Component#anchor}.
     */

/**
     * @cfg {Number} boxMinHeight
     *
The minimum value in pixels which this BoxComponent will set its height to.

     *
Warning: This will override any size management applied by layout managers.

     */

/**
     * @cfg {Number} boxMinWidth
     *
The minimum value in pixels which this BoxComponent will set its width to.

     *
Warning: This will override any size management applied by layout managers.

     */

/**
     * @cfg {Number} boxMaxHeight
     *
The maximum value in pixels which this BoxComponent will set its height to.

     *
Warning: This will override any size management applied by layout managers.

     */

/**
     * @cfg {Number} boxMaxWidth
     *
The maximum value in pixels which this BoxComponent will set its width to.

     *
Warning: This will override any size management applied by layout managers.

     */

/**
     * @cfg {Boolean} autoHeight
     *
True to use height:'auto', false to use fixed height (or allow it to be managed by its parent
     * Container's {@link Ext.Container#layout layout manager}. Defaults to false.

     *
Note: Although many components inherit this config option, not all will
     * function as expected with a height of 'auto'. Setting autoHeight:true means that the
     * browser will manage height based on the element's contents, and that Ext will not manage it at all.

     *
If the browser is managing the height, be aware that resizes performed by the browser in response
     * to changes within the structure of the Component cannot be detected. Therefore changes to the height might
     * result in elements needing to be synchronized with the new height. Example:

var w = new Ext.Window({
    title: 'Window',
    width: 600,
    autoHeight: true,
    items: {
        title: 'Collapse Me',
        height: 400,
        collapsible: true,
        border: false,
        listeners: {
            beforecollapse: function() {
                w.el.shadow.hide();
            },
            beforeexpand: function() {
                w.el.shadow.hide();
            },
            collapse: function() {
                w.syncShadow();
            },
            expand: function() {
                w.syncShadow();
            }
        }
    }
}).show();

     */

/**
     * @cfg {Boolean} autoWidth
     *
True to use width:'auto', false to use fixed width (or allow it to be managed by its parent
     * Container's {@link Ext.Container#layout layout manager}. Defaults to false.

     *
Note: Although many components  inherit this config option, not all will
     * function as expected with a width of 'auto'. Setting autoWidth:true means that the
     * browser will manage width based on the element's contents, and that Ext will not manage it at all.

     *
If the browser is managing the width, be aware that resizes performed by the browser in response
     * to changes within the structure of the Component cannot be detected. Therefore changes to the width might
     * result in elements needing to be synchronized with the new width. For example, where the target element is:

<div id='grid-container' style='margin-left:25%;width:50%'></div>

     * A Panel rendered into that target element must listen for browser window resize in order to relay its
      * child items when the browser changes its width:

var myPanel = new Ext.Panel({
    renderTo: 'grid-container',
    monitorResize: true, // relay on browser resize
    title: 'Panel',
    height: 400,
    autoWidth: true,
    layout: 'hbox',
    layoutConfig: {
        align: 'stretch'
    },
    defaults: {
        flex: 1
    },
    items: [{
        title: 'Box 1',
    }, {
        title: 'Box 2'
    }, {
        title: 'Box 3'
    }],
});

     */

/**
     * @cfg {Boolean} autoScroll
     * true to use overflow:'auto' on the components layout element and show scroll bars automatically when
     * necessary, false to clip any overflowing content (defaults to false).
     */

    /* // private internal config
     * {Boolean} deferHeight
     * True to defer height calculations to an external component, false to allow this component to set its own
     * height (defaults to false).
     */

    // private
    initComponent : function(){
        Ext.BoxComponent.superclass.initComponent.call(this);
        this.addEvents(

/**
             * @event resize
             * Fires after the component is resized.
             * @param {Ext.Component} this
             * @param {Number} adjWidth The box-adjusted width that was set
             * @param {Number} adjHeight The box-adjusted height that was set
             * @param {Number} rawWidth The width that was originally specified
             * @param {Number} rawHeight The height that was originally specified
             */
            'resize',

/**
             * @event move
             * Fires after the component is moved.
             * @param {Ext.Component} this
             * @param {Number} x The new x position
             * @param {Number} y The new y position
             */
            'move'
        );
    },

    // private, set in afterRender to signify that the component has been rendered
    boxReady : false,
    // private, used to defer height settings to subclasses
    deferHeight: false,

/**
     * Sets the width and height of this BoxComponent. This method fires the {@link #resize} event. This method can accept
     * either width and height as separate arguments, or you can pass a size object like {width:10, height:20}.
     * @param {Mixed} width The new width to set. This may be one of:

     *
  • A Number specifying the new width in the {@link #getEl Element}'s {@link Ext.Element#defaultUnit}s (by default, pixels).
    •
     *
  • A String used to set the CSS width style.
    •
     *
  • A size object in the format {width: widthValue, height: heightValue}.
    •
     *
  • undefined to leave the width unchanged.
    •
     *

     * @param {Mixed} height The new height to set (not required if a size object is passed as the first arg).
     * This may be one of:

     *
  • A Number specifying the new height in the {@link #getEl Element}'s {@link Ext.Element#defaultUnit}s (by default, pixels).
    •
     *
  • A String used to set the CSS height style. Animation may not be used.
    •
     *
  • undefined to leave the height unchanged.
    •
     *

     * @return {Ext.BoxComponent} this
     */
    setSize : function(w, h){

        // support for standard size objects
        if(typeof w == 'object'){
            h = w.height;
            w = w.width;
        }
        if (Ext.isDefined(w) && Ext.isDefined(this.boxMinWidth) && (w < this.boxMinWidth)) {
            w = this.boxMinWidth;
        }
        if (Ext.isDefined(h) && Ext.isDefined(this.boxMinHeight) && (h < this.boxMinHeight)) {
            h = this.boxMinHeight;
        }
        if (Ext.isDefined(w) && Ext.isDefined(this.boxMaxWidth) && (w > this.boxMaxWidth)) {
            w = this.boxMaxWidth;
        }
        if (Ext.isDefined(h) && Ext.isDefined(this.boxMaxHeight) && (h > this.boxMaxHeight)) {
            h = this.boxMaxHeight;
        }
        // not rendered
        if(!this.boxReady){
            this.width  = w;
            this.height = h;
            return this;
        }

        // prevent recalcs when not needed
        if(this.cacheSizes !== false && this.lastSize && this.lastSize.width == w && this.lastSize.height == h){
            return this;
        }
        this.lastSize = {width: w, height: h};
        var adj = this.adjustSize(w, h),
            aw = adj.width,
            ah = adj.height,
            rz;
        if(aw !== undefined || ah !== undefined){ // this code is nasty but performs better with floaters
            rz = this.getResizeEl();
            if(!this.deferHeight && aw !== undefined && ah !== undefined){
                rz.setSize(aw, ah);
            }else if(!this.deferHeight && ah !== undefined){
                rz.setHeight(ah);
            }else if(aw !== undefined){
                rz.setWidth(aw);
            }
            this.onResize(aw, ah, w, h);
            this.fireEvent('resize', this, aw, ah, w, h);
        }
        return this;
    },

/**
     * Sets the width of the component.  This method fires the {@link #resize} event.
     * @param {Mixed} width The new width to set. This may be one of:

     *
  • A Number specifying the new width in the {@link #getEl Element}'s {@link Ext.Element#defaultUnit defaultUnit}s (by default, pixels).
    •
     *
  • A String used to set the CSS width style.
    •
     *

     * @return {Ext.BoxComponent} this
     */
    setWidth : function(width){
        return this.setSize(width);
    },

/**
     * Sets the height of the component.  This method fires the {@link #resize} event.
     * @param {Mixed} height The new height to set. This may be one of:

     *
  • A Number specifying the new height in the {@link #getEl Element}'s {@link Ext.Element#defaultUnit defaultUnit}s (by default, pixels).
    •
     *
  • A String used to set the CSS height style.
    •
     *
  • undefined to leave the height unchanged.
    •
     *

     * @return {Ext.BoxComponent} this
     */
    setHeight : function(height){
        return this.setSize(undefined, height);
    },

/**
     * Gets the current size of the component's underlying element.
     * @return {Object} An object containing the element's size {width: (element width), height: (element height)}
     */
    getSize : function(){
        return this.getResizeEl().getSize();
    },

/**
     * Gets the current width of the component's underlying element.
     * @return {Number}
     */
    getWidth : function(){
        return this.getResizeEl().getWidth();
    },

/**
     * Gets the current height of the component's underlying element.
     * @return {Number}
     */
    getHeight : function(){
        return this.getResizeEl().getHeight();
    },

/**
     * Gets the current size of the component's underlying element, including space taken by its margins.
     * @return {Object} An object containing the element's size {width: (element width + left/right margins), height: (element height + top/bottom margins)}
     */
    getOuterSize : function(){
        var el = this.getResizeEl();
        return {width: el.getWidth() + el.getMargins('lr'),
                height: el.getHeight() + el.getMargins('tb')};
    },

/**
     * Gets the current XY position of the component's underlying element.
     * @param {Boolean} local (optional) If true the element's left and top are returned instead of page XY (defaults to false)
     * @return {Array} The XY position of the element (e.g., [100, 200])
     */
    getPosition : function(local){
        var el = this.getPositionEl();
        if(local === true){
            return [el.getLeft(true), el.getTop(true)];
        }
        return this.xy || el.getXY();
    },

/**
     * Gets the current box measurements of the component's underlying element.
     * @param {Boolean} local (optional) If true the element's left and top are returned instead of page XY (defaults to false)
     * @return {Object} box An object in the format {x, y, width, height}
     */
    getBox : function(local){
        var pos = this.getPosition(local);
        var s = this.getSize();
        s.x = pos[0];
        s.y = pos[1];
        return s;
    },

/**
     * Sets the current box measurements of the component's underlying element.
     * @param {Object} box An object in the format {x, y, width, height}
     * @return {Ext.BoxComponent} this
     */
    updateBox : function(box){
        this.setSize(box.width, box.height);
        this.setPagePosition(box.x, box.y);
        return this;
    },

/**
     *
Returns the outermost Element of this Component which defines the Components overall size.

     *
Usually this will return the same Element as {@link #getEl},
     * but in some cases, a Component may have some more wrapping Elements around its main
     * active Element.

     *
An example is a ComboBox. It is encased in a wrapping Element which
     * contains both the <input> Element (which is what would be returned
     * by its {@link #getEl} method, and the trigger button Element.
     * This Element is returned as the resizeEl.
     * @return {Ext.Element} The Element which is to be resized by size managing layouts.
     */
    getResizeEl : function(){
        return this.resizeEl || this.el;
    },

/**
     * Sets the overflow on the content element of the component.
     * @param {Boolean} scroll True to allow the Component to auto scroll.
     * @return {Ext.BoxComponent} this
     */
    setAutoScroll : function(scroll){
        if(this.rendered){
            this.getContentTarget().setOverflow(scroll ? 'auto' : '');
        }
        this.autoScroll = scroll;
        return this;
    },

/**
     * Sets the left and top of the component.  To set the page XY position instead, use {@link #setPagePosition}.
     * This method fires the {@link #move} event.
     * @param {Number} left The new left
     * @param {Number} top The new top
     * @return {Ext.BoxComponent} this
     */
    setPosition : function(x, y){
        if(x && typeof x[1] == 'number'){
            y = x[1];
            x = x[0];
        }
        this.x = x;
        this.y = y;
        if(!this.boxReady){
            return this;
        }
        var adj = this.adjustPosition(x, y);
        var ax = adj.x, ay = adj.y;

        var el = this.getPositionEl();
        if(ax !== undefined || ay !== undefined){
            if(ax !== undefined && ay !== undefined){
                el.setLeftTop(ax, ay);
            }else if(ax !== undefined){
                el.setLeft(ax);
            }else if(ay !== undefined){
                el.setTop(ay);
            }
            this.onPosition(ax, ay);
            this.fireEvent('move', this, ax, ay);
        }
        return this;
    },

/**
     * Sets the page XY position of the component.  To set the left and top instead, use {@link #setPosition}.
     * This method fires the {@link #move} event.
     * @param {Number} x The new x position
     * @param {Number} y The new y position
     * @return {Ext.BoxComponent} this
     */
    setPagePosition : function(x, y){
        if(x && typeof x[1] == 'number'){
            y = x[1];
            x = x[0];
        }
        this.pageX = x;
        this.pageY = y;
        if(!this.boxReady){
            return;
        }
        if(x === undefined || y === undefined){ // cannot translate undefined points
            return;
        }
        var p = this.getPositionEl().translatePoints(x, y);
        this.setPosition(p.left, p.top);
        return this;
    },

    // private
    afterRender : function(){
        Ext.BoxComponent.superclass.afterRender.call(this);
        if(this.resizeEl){
            this.resizeEl = Ext.get(this.resizeEl);
        }
        if(this.positionEl){
            this.positionEl = Ext.get(this.positionEl);
        }
        this.boxReady = true;
        Ext.isDefined(this.autoScroll) && this.setAutoScroll(this.autoScroll);
        this.setSize(this.width, this.height);
        if(this.x || this.y){
            this.setPosition(this.x, this.y);
        }else if(this.pageX || this.pageY){
            this.setPagePosition(this.pageX, this.pageY);
        }
    },

/**
     * Force the component's size to recalculate based on the underlying element's current height and width.
     * @return {Ext.BoxComponent} this
     */
    syncSize : function(){
        delete this.lastSize;
        this.setSize(this.autoWidth ? undefined : this.getResizeEl().getWidth(), this.autoHeight ? undefined : this.getResizeEl().getHeight());
        return this;
    },

    /* // protected
     * Called after the component is resized, this method is empty by default but can be implemented by any
     * subclass that needs to perform custom logic after a resize occurs.
     * @param {Number} adjWidth The box-adjusted width that was set
     * @param {Number} adjHeight The box-adjusted height that was set
     * @param {Number} rawWidth The width that was originally specified
     * @param {Number} rawHeight The height that was originally specified
     */
    onResize : function(adjWidth, adjHeight, rawWidth, rawHeight){
    },

    /* // protected
     * 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.
     * @param {Number} x The new x position
     * @param {Number} y The new y position
     */
    onPosition : function(x, y){

    },

    // private
    adjustSize : function(w, h){
        if(this.autoWidth){
            w = 'auto';
        }
        if(this.autoHeight){
            h = 'auto';
        }
        return {width : w, height: h};
    },

    // private
    adjustPosition : function(x, y){
        return {x : x, y: y};
    }
});
Ext.reg('box', Ext.BoxComponent);

/**
 * @class Ext.Spacer
 * @extends Ext.BoxComponent
 *
Used to provide a sizable space in a layout.

 * @constructor
 * @param {Object} config
 */
Ext.Spacer = Ext.extend(Ext.BoxComponent, {
    autoEl:'div'
});
Ext.reg('spacer', Ext.Spacer);


The source code

/*!
 * licensing@extjs.com
 * http://www.extjs.com/license
 */

/**
 * @class Ext.layout.BoxLayout
 * @extends Ext.layout.ContainerLayout
 *
Base Class for HBoxLayout and VBoxLayout Classes. Generally it should not need to be used directly.

 */
Ext.layout.BoxLayout = Ext.extend(Ext.layout.ContainerLayout, {

/**
     * @cfg {Object} defaultMargins
     *
If the individual contained items do not have a margins
     * property specified, the default margins from this property will be
     * applied to each item.

     *
This property may be specified as an object containing margins
     * to apply in the format:

{
    top: (top margin),
    right: (right margin),
    bottom: (bottom margin),
    left: (left margin)
}

     *
This property may also be specified as a string containing
     * space-separated, numeric margin values. The order of the sides associated
     * with each value matches the way CSS processes margin values:

     *

     *
  • If there is only one value, it applies to all sides.
    •
     *
  • If there are two values, the top and bottom borders are set to the
     * first value and the right and left are set to the second.
    •
     *
  • If there are three values, the top is set to the first value, the left
     * and right are set to the second, and the bottom is set to the third.
    •
     *
  • If there are four values, they apply to the top, right, bottom, and
     * left, respectively.
    •
     *

     *
Defaults to:

     * {top:0, right:0, bottom:0, left:0}
     *

     */
    defaultMargins : {left:0,top:0,right:0,bottom:0},

/**
     * @cfg {String} padding
     *
Sets the padding to be applied to all child items managed by this layout.

     *
This property must be specified as a string containing
     * space-separated, numeric padding values. The order of the sides associated
     * with each value matches the way CSS processes padding values:

     *

     *
  • If there is only one value, it applies to all sides.
    •
     *
  • If there are two values, the top and bottom borders are set to the
     * first value and the right and left are set to the second.
    •
     *
  • If there are three values, the top is set to the first value, the left
     * and right are set to the second, and the bottom is set to the third.
    •
     *
  • If there are four values, they apply to the top, right, bottom, and
     * left, respectively.
    •
     *

     *
Defaults to: "0"

     */
    padding : '0',
    // documented in subclasses
    pack : 'start',

    // private
    monitorResize : true,
    type: 'box',
    scrollOffset : 0,
    extraCls : 'x-box-item',
    targetCls : 'x-box-layout-ct',
    innerCls : 'x-box-inner',

    constructor : function(config){
        Ext.layout.BoxLayout.superclass.constructor.call(this, config);

        if (Ext.isString(this.defaultMargins)) {
            this.defaultMargins = this.parseMargins(this.defaultMargins);
        }
    },

    /**
     * @private
     * Runs the child box calculations and caches them in childBoxCache. Subclasses can used these cached values
     * when laying out
     */
    onLayout: function(container, target) {
        Ext.layout.BoxLayout.superclass.onLayout.call(this, container, target);

        var items = this.getVisibleItems(container),
            tSize = this.getLayoutTargetSize();

        /**
         * @private
         * @property layoutTargetLastSize
         * @type Object
         * Private cache of the last measured size of the layout target. This should never be used except by
         * BoxLayout subclasses during their onLayout run.
         */
        this.layoutTargetLastSize = tSize;

        /**
         * @private
         * @property childBoxCache
         * @type Array
         * Array of the last calculated height, width, top and left positions of each visible rendered component
         * within the Box layout.
         */
        this.childBoxCache = this.calculateChildBoxes(items, tSize);

        this.updateInnerCtSize(tSize, this.childBoxCache);
        this.updateChildBoxes(this.childBoxCache.boxes);

        // Putting a box layout into an overflowed container is NOT correct and will make a second layout pass necessary.
        this.handleTargetOverflow(tSize, container, target);
    },

/**
     * Resizes and repositions each child component
     * @param {Array} boxes The box measurements
     */
    updateChildBoxes: function(boxes) {
        for (var i = 0, length = boxes.length; i < length; i++) {
            var box  = boxes[i],
                comp = box.component;

            if (box.dirtySize) {
                comp.setSize(box.width, box.height);
            }
            // Don't set positions to NaN
            if (isNaN(box.left) || isNaN(box.top)) {
                continue;
            }
            comp.setPosition(box.left, box.top);
        }
    },

    /**
     * @private
     * Called by onRender just before the child components are sized and positioned. This resizes the innerCt
     * to make sure all child items fit within it. We call this before sizing the children because if our child
     * items are larger than the previous innerCt size the browser will insert scrollbars and then remove them
     * again immediately afterwards, giving a performance hit.
     * Subclasses should provide an implementation.
     * @param {Object} currentSize The current height and width of the innerCt
     * @param {Array} calculations The new box calculations of all items to be laid out
     */
    updateInnerCtSize: Ext.emptyFn,

    /**
     * @private
     * This should be called after onLayout of any BoxLayout subclass. If the target's overflow is not set to 'hidden',
     * we need to lay out a second time because the scrollbars may have modified the height and width of the layout
     * target. Having a Box layout inside such a target is therefore not recommended.
     * @param {Object} previousTargetSize The size and height of the layout target before we just laid out
     * @param {Ext.Container} container The container
     * @param {Ext.Element} target The target element
     */
    handleTargetOverflow: function(previousTargetSize, container, target) {
        var overflow = target.getStyle('overflow');

        if (overflow && overflow != 'hidden' &&!this.adjustmentPass) {
            var newTargetSize = this.getLayoutTargetSize();
            if (newTargetSize.width != previousTargetSize.width || newTargetSize.height != previousTargetSize.height){
                this.adjustmentPass = true;
                this.onLayout(container, target);
            }
        }

        delete this.adjustmentPass;
    },

    // private
    isValidParent : function(c, target){
        return this.innerCt && c.getPositionEl().dom.parentNode == this.innerCt.dom;
    },

    /**
     * @private
     * Returns all items that are both rendered and visible
     * @return {Array} All matching items
     */
    getVisibleItems: function(ct) {
        var ct  = ct || this.container,
            t   = ct.getLayoutTarget(),
            cti = ct.items.items,
            len = cti.length,

            i, c, items = [];

        for (i = 0; i < len; i++) {
            if((c = cti[i]).rendered && this.isValidParent(c, t) && c.hidden !== true  && c.collapsed !== true){
                items.push(c);
            }
        }

        return items;
    },

    // private
    renderAll : function(ct, target){
        if(!this.innerCt){
            // the innerCt prevents wrapping and shuffling while
            // the container is resizing
            this.innerCt = target.createChild({cls:this.innerCls});
            this.padding = this.parseMargins(this.padding);
        }
        Ext.layout.BoxLayout.superclass.renderAll.call(this, ct, this.innerCt);
    },

    getLayoutTargetSize : function(){
        var target = this.container.getLayoutTarget(), ret;
        if (target) {
            ret = target.getViewSize();

            // IE in strict mode will return a width of 0 on the 1st pass of getViewSize.
            // Use getStyleSize to verify the 0 width, the adjustment pass will then work properly
            // with getViewSize
            if (Ext.isIE && Ext.isStrict && ret.width == 0){
                ret =  target.getStyleSize();
            }

            ret.width -= target.getPadding('lr');
            ret.height -= target.getPadding('tb');
        }
        return ret;
    },

    // private
    renderItem : function(c){
        if(Ext.isString(c.margins)){
            c.margins = this.parseMargins(c.margins);
        }else if(!c.margins){
            c.margins = this.defaultMargins;
        }
        Ext.layout.BoxLayout.superclass.renderItem.apply(this, arguments);
    }
});

/**
 * @class Ext.layout.VBoxLayout
 * @extends Ext.layout.BoxLayout
 *
A layout that arranges items vertically down a Container. This layout optionally divides available vertical
 * space between child items containing a numeric flex configuration.

 * This layout may also be used to set the widths of child items by configuring it with the {@link #align} option.
 */
Ext.layout.VBoxLayout = Ext.extend(Ext.layout.BoxLayout, {

/**
     * @cfg {String} align
     * Controls how the child items of the container are aligned. Acceptable configuration values for this
     * property are:
     *

     *
  • left : Default
    child items are aligned horizontally
     * at the left side of the container
    •
     *
  • center :
    child items are aligned horizontally at the
     * mid-width of the container
    •
     *
  • stretch :
    child items are stretched horizontally to fill
     * the width of the container
    •
     *
  • stretchmax :
    child items are stretched horizontally to
     * the size of the largest item.
    •
     *

     */
    align : 'left', // left, center, stretch, strechmax
    type: 'vbox',

/**
     * @cfg {String} pack
     * Controls how the child items of the container are packed together. Acceptable configuration values
     * for this property are:
     *

     *
  • start : Default
    child items are packed together at
     * top side of container
    •
     *
  • center :
    child items are packed together at
     * mid-height of container
    •
     *
  • end :
    child items are packed together at bottom
     * side of container
    •
     *

     */

/**
     * @cfg {Number} flex
     * This configuation option is to be applied to child items of the container managed
     * by this layout. Each child item with a flex property will be flexed vertically
     * according to each item's relative flex value compared to the sum of all items with
     * a flex value specified.  Any child items that have either a flex = 0 or
     * flex = undefined will not be 'flexed' (the initial size will not be changed).
     */

    /**
     * @private
     * See parent documentation
     */
    updateInnerCtSize: function(tSize, calcs) {
        var innerCtHeight = tSize.height,
            innerCtWidth  = calcs.meta.maxWidth + this.padding.left + this.padding.right;

        if (this.align == 'stretch') {
            innerCtWidth = tSize.width;
        } else if (this.align == 'center') {
            innerCtWidth = Math.max(tSize.width, innerCtWidth);
        }

        //we set the innerCt size first because if our child items are larger than the previous innerCt size
        //the browser will insert scrollbars and then remove them again immediately afterwards
        this.innerCt.setSize(innerCtWidth || undefined, innerCtHeight || undefined);
    },

    /**
     * @private
     * Calculates the size and positioning of each item in the VBox. This iterates over all of the rendered,
     * visible items and returns a height, width, top and left for each, as well as a reference to each. Also
     * returns meta data such as maxHeight which are useful when resizing layout wrappers such as this.innerCt.
     * @param {Array} visibleItems The array of all rendered, visible items to be calculated for
     * @param {Object} targetSize Object containing target size and height
     * @return {Object} Object containing box measurements for each child, plus meta data
     */
    calculateChildBoxes: function(visibleItems, targetSize) {
        var visibleCount = visibleItems.length,

            padding      = this.padding,
            topOffset    = padding.top,
            leftOffset   = padding.left,
            paddingVert  = topOffset  + padding.bottom,
            paddingHoriz = leftOffset + padding.right,

            width        = targetSize.width - this.scrollOffset,
            height       = targetSize.height,
            availWidth   = Math.max(0, width - paddingHoriz),

            isStart      = this.pack == 'start',
            isCenter     = this.pack == 'center',
            isEnd        = this.pack == 'end',

            nonFlexHeight= 0,
            maxWidth     = 0,
            totalFlex    = 0,

            //used to cache the calculated size and position values for each child item
            boxes        = [],

            //used in the for loops below, just declared here for brevity
            child, childWidth, childHeight, childSize, childMargins, canLayout, i, calcs, flexedHeight, horizMargins, stretchWidth;

            //gather the total flex of all flexed items and the width taken up by fixed width items
            for (i = 0; i < visibleCount; i++) {
                child = visibleItems[i];
                childHeight = child.height;
                childWidth  = child.width;
                canLayout   = !child.hasLayout && Ext.isFunction(child.doLayout);

                // Static height (numeric) requires no calcs
                if (!Ext.isNumber(childHeight)) {

                    // flex and not 'auto' height
                    if (child.flex && !childHeight) {
                        totalFlex += child.flex;

                    // Not flexed or 'auto' height or undefined height
                    } else {
                        //Render and layout sub-containers without a flex or width defined, as otherwise we
                        //don't know how wide the sub-container should be and cannot calculate flexed widths
                        if (!childHeight && canLayout) {
                            child.doLayout();
                        }

                        childSize = child.getSize();
                        childWidth = childSize.width;
                        childHeight = childSize.height;
                    }
                }

                childMargins = child.margins;

                nonFlexHeight += (childHeight || 0) + childMargins.top + childMargins.bottom;

                // Max width for align - force layout of non-layed out subcontainers without a numeric width
                if (!Ext.isNumber(childWidth)) {
                    if (canLayout) {
                        child.doLayout();
                    }
                    childWidth = child.getWidth();
                }

                maxWidth = Math.max(maxWidth, childWidth + childMargins.left + childMargins.right);

                //cache the size of each child component
                boxes.push({
                    component: child,
                    height   : childHeight || undefined,
                    width    : childWidth || undefined
                });
            }

            //the height available to the flexed items
            var availableHeight = Math.max(0, (height - nonFlexHeight - paddingVert));

            if (isCenter) {
                topOffset += availableHeight / 2;
            } else if (isEnd) {
                topOffset += availableHeight;
            }

            //temporary variables used in the flex height calculations below
            var remainingHeight = availableHeight,
                remainingFlex   = totalFlex;

            //calculate the height of each flexed item, and the left + top positions of every item
            for (i = 0; i < visibleCount; i++) {
                child = visibleItems[i];
                calcs = boxes[i];

                childMargins = child.margins;
                horizMargins = childMargins.left + childMargins.right;

                topOffset   += childMargins.top;

                if (isStart && child.flex && !child.height) {
                    flexedHeight     = Math.ceil((child.flex / remainingFlex) * remainingHeight);
                    remainingHeight -= flexedHeight;
                    remainingFlex   -= child.flex;

                    calcs.height = flexedHeight;
                    calcs.dirtySize = true;
                }

                calcs.left = leftOffset + childMargins.left;
                calcs.top  = topOffset;

                switch (this.align) {
                    case 'stretch':
                        stretchWidth = availWidth - horizMargins;
                        calcs.width  = stretchWidth.constrain(child.minHeight || 0, child.maxWidth || 1000000);
                        calcs.dirtySize = true;
                        break;
                    case 'stretchmax':
                        stretchWidth = maxWidth - horizMargins;
                        calcs.width  = stretchWidth.constrain(child.minHeight || 0, child.maxWidth || 1000000);
                        calcs.dirtySize = true;
                        break;
                    case 'center':
                        var diff = availWidth - calcs.width - horizMargins;
                        if (diff > 0) {
                            calcs.left = leftOffset + horizMargins + (diff / 2);
                        }
                }

                topOffset += calcs.height + childMargins.bottom;
            }

        return {
            boxes: boxes,
            meta : {
                maxWidth: maxWidth
            }
        };
    }
});

Ext.Container.LAYOUTS.vbox = Ext.layout.VBoxLayout;

/**
 * @class Ext.layout.HBoxLayout
 * @extends Ext.layout.BoxLayout
 *
A layout that arranges items horizontally across a Container. This layout optionally divides available horizontal
 * space between child items containing a numeric flex configuration.

 * This layout may also be used to set the heights of child items by configuring it with the {@link #align} option.
 */
Ext.layout.HBoxLayout = Ext.extend(Ext.layout.BoxLayout, {

/**
     * @cfg {String} align
     * Controls how the child items of the container are aligned. Acceptable configuration values for this
     * property are:
     *

     *
  • top : Default
    child items are aligned vertically
     * at the top of the container
    •
     *
  • middle :
    child items are aligned vertically in the
     * middle of the container
    •
     *
  • stretch :
    child items are stretched vertically to fill
     * the height of the container
    •
     *
  • stretchmax :
    child items are stretched vertically to
     * the height of the largest item.
    •
     */
    align: 'top', // top, middle, stretch, strechmax

    type : 'hbox',

    /**
     * @private
     * See parent documentation
     */
    updateInnerCtSize: function(tSize, calcs) {
        var innerCtWidth  = tSize.width,
            innerCtHeight = calcs.meta.maxHeight + this.padding.top + this.padding.bottom;

        if (this.align == 'stretch') {
            innerCtHeight = tSize.height;
        } else if (this.align == 'middle') {
            innerCtHeight = Math.max(tSize.height, innerCtHeight);
        }

        this.innerCt.setSize(innerCtWidth || undefined, innerCtHeight || undefined);
    },

    /**
     * @cfg {String} pack
     * Controls how the child items of the container are packed together. Acceptable configuration values
     * for this property are:
     *

     *
    • start : Default
      child items are packed together at
     * left side of container
      •
     *
    • center :
      child items are packed together at
     * mid-width of container
      •
     *
    • end :
      child items are packed together at right
     * side of container
      •
     *

     */

    /**
     * @cfg {Number} flex
     * This configuation option is to be applied to child items of the container managed
     * by this layout. Each child item with a flex property will be flexed horizontally
     * according to each item's relative flex value compared to the sum of all items with
     * a flex value specified.  Any child items that have either a flex = 0 or
     * flex = undefined will not be 'flexed' (the initial size will not be changed).
     */

    /**
     * @private
     * Calculates the size and positioning of each item in the HBox. This iterates over all of the rendered,
     * visible items and returns a height, width, top and left for each, as well as a reference to each. Also
     * returns meta data such as maxHeight which are useful when resizing layout wrappers such as this.innerCt.
     * @param {Array} visibleItems The array of all rendered, visible items to be calculated for
     * @param {Object} targetSize Object containing target size and height
     * @return {Object} Object containing box measurements for each child, plus meta data
     */
    calculateChildBoxes: function(visibleItems, targetSize) {
        var visibleCount = visibleItems.length,

            padding      = this.padding,
            topOffset    = padding.top,
            leftOffset   = padding.left,
            paddingVert  = topOffset  + padding.bottom,
            paddingHoriz = leftOffset + padding.right,

            width        = targetSize.width - this.scrollOffset,
            height       = targetSize.height,
            availHeight  = Math.max(0, height - paddingVert),

            isStart      = this.pack == 'start',
            isCenter     = this.pack == 'center',
            isEnd        = this.pack == 'end',
            // isRestore    = ['stretch', 'stretchmax'].indexOf(this.align) == -1,

            nonFlexWidth = 0,
            maxHeight    = 0,
            totalFlex    = 0,

            //used to cache the calculated size and position values for each child item
            boxes        = [],

            //used in the for loops below, just declared here for brevity
            child, childWidth, childHeight, childSize, childMargins, canLayout, i, calcs, flexedWidth, vertMargins, stretchHeight;

            //gather the total flex of all flexed items and the width taken up by fixed width items
            for (i = 0; i < visibleCount; i++) {
                child       = visibleItems[i];
                childHeight = child.height;
                childWidth  = child.width;
                canLayout   = !child.hasLayout && Ext.isFunction(child.doLayout);

                // Static width (numeric) requires no calcs
                if (!Ext.isNumber(childWidth)) {

                    // flex and not 'auto' width
                    if (child.flex && !childWidth) {
                        totalFlex += child.flex;

                    // Not flexed or 'auto' width or undefined width
                    } else {
                        //Render and layout sub-containers without a flex or width defined, as otherwise we
                        //don't know how wide the sub-container should be and cannot calculate flexed widths
                        if (!childWidth && canLayout) {
                            child.doLayout();
                        }

                        childSize   = child.getSize();
                        childWidth  = childSize.width;
                        childHeight = childSize.height;
                    }
                }

                childMargins = child.margins;

                nonFlexWidth += (childWidth || 0) + childMargins.left + childMargins.right;

                // Max height for align - force layout of non-layed out subcontainers without a numeric height
                if (!Ext.isNumber(childHeight)) {
                    if (canLayout) {
                        child.doLayout();
                    }
                    childHeight = child.getHeight();
                }

                maxHeight = Math.max(maxHeight, childHeight + childMargins.top + childMargins.bottom);

                //cache the size of each child component
                boxes.push({
                    component: child,
                    height   : childHeight || undefined,
                    width    : childWidth || undefined
                });
            }

            //the width available to the flexed items
            var availableWidth = Math.max(0, (width - nonFlexWidth - paddingHoriz));

            if (isCenter) {
                leftOffset += availableWidth / 2;
            } else if (isEnd) {
                leftOffset += availableWidth;
            }

            //temporary variables used in the flex width calculations below
            var remainingWidth = availableWidth,
                remainingFlex  = totalFlex;

            //calculate the widths of each flexed item, and the left + top positions of every item
            for (i = 0; i < visibleCount; i++) {
                child = visibleItems[i];
                calcs = boxes[i];

                childMargins = child.margins;
                vertMargins  = childMargins.top + childMargins.bottom;

                leftOffset  += childMargins.left;

                if (isStart && child.flex && !child.width) {
                    flexedWidth     = Math.ceil((child.flex / remainingFlex) * remainingWidth);
                    remainingWidth -= flexedWidth;
                    remainingFlex  -= child.flex;

                    calcs.width = flexedWidth;
                    calcs.dirtySize = true;
                }

                calcs.left = leftOffset;
                calcs.top  = topOffset + childMargins.top;

                switch (this.align) {
                    case 'stretch':
                        stretchHeight = availHeight - vertMargins;
                        calcs.height  = stretchHeight.constrain(child.minHeight || 0, child.maxHeight || 1000000);
                        calcs.dirtySize = true;
                        break;
                    case 'stretchmax':
                        stretchHeight = maxHeight - vertMargins;
                        calcs.height  = stretchHeight.constrain(child.minHeight || 0, child.maxHeight || 1000000);
                        calcs.dirtySize = true;
                        break;
                    case 'middle':
                        var diff = availHeight - calcs.height - vertMargins;
                        if (diff > 0) {
                            calcs.top = topOffset + vertMargins + (diff / 2);
                        }
                }
                leftOffset += calcs.width + childMargins.right;
            }

        return {
            boxes: boxes,
            meta : {
                maxHeight: maxHeight
            }
        };
    }
});

Ext.Container.LAYOUTS.hbox = Ext.layout.HBoxLayout;


The source code

/*!
 * licensing@extjs.com
 * http://www.extjs.com/license
 */

/**
 * @class Ext.Button
 * @extends Ext.BoxComponent
 * Simple Button class
 * @cfg {String} text The button text to be used as innerHTML (html tags are accepted)
 * @cfg {String} icon The path to an image to display in the button (the image will be set as the background-image
 * CSS property of the button by default, so if you want a mixed icon/text button, set cls:'x-btn-text-icon')
 * @cfg {Function} handler A function called when the button is clicked (can be used instead of click event).
 * The handler is passed the following parameters:

 *
  • b : Button
    This Button.
    •
 *
  • e : EventObject
    The click event.
    •
 *

 * @cfg {Number} minWidth The minimum width for this button (used to give a set of buttons a common width).
 * See also {@link Ext.Panel}.{@link Ext.Panel#minButtonWidth minButtonWidth}.
 * @cfg {String/Object} tooltip The tooltip for the button - can be a string to be used as innerHTML (html tags are accepted) or QuickTips config object
 * @cfg {Boolean} hidden True to start hidden (defaults to false)
 * @cfg {Boolean} disabled True to start disabled (defaults to false)
 * @cfg {Boolean} pressed True to start pressed (only if enableToggle = true)
 * @cfg {String} toggleGroup The group this toggle button is a member of (only 1 per group can be pressed)
 * @cfg {Boolean/Object} repeat True to repeat fire the click event while the mouse is down. This can also be
 * a {@link Ext.util.ClickRepeater ClickRepeater} config object (defaults to false).
 * @constructor
 * Create a new button
 * @param {Object} config The config object
 * @xtype button
 */
Ext.Button = Ext.extend(Ext.BoxComponent, {
    /**
     * Read-only. True if this button is hidden
     * @type Boolean
     */
    hidden : false,
    /**
     * Read-only. True if this button is disabled
     * @type Boolean
     */
    disabled : false,
    /**
     * Read-only. True if this button is pressed (only if enableToggle = true)
     * @type Boolean
     */
    pressed : false,

    /**
     * @cfg {Number} tabIndex Set a DOM tabIndex for this button (defaults to undefined)
     */

    /**
     * @cfg {Boolean} allowDepress
     * False to not allow a pressed Button to be depressed (defaults to undefined). Only valid when {@link #enableToggle} is true.
     */

    /**
     * @cfg {Boolean} enableToggle
     * True to enable pressed/not pressed toggling (defaults to false)
     */
    enableToggle : false,
    /**
     * @cfg {Function} toggleHandler
     * Function called when a Button with {@link #enableToggle} set to true is clicked. Two arguments are passed:

     *
  • button : Ext.Button
    this Button object
    •
     *
  • state : Boolean
    The next state of the Button, true means pressed.
    •
     *

     */
    /**
     * @cfg {Mixed} menu
     * Standard menu attribute consisting of a reference to a menu object, a menu id or a menu config blob (defaults to undefined).
     */
    /**
     * @cfg {String} menuAlign
     * The position to align the menu to (see {@link Ext.Element#alignTo} for more details, defaults to 'tl-bl?').
     */
    menuAlign : 'tl-bl?',

    /**
     * @cfg {String} overflowText If used in a {@link Ext.Toolbar Toolbar}, the
     * text to be used if this item is shown in the overflow menu. See also
     * {@link Ext.Toolbar.Item}.{@link Ext.Toolbar.Item#overflowText overflowText}.
     */
    /**
     * @cfg {String} iconCls
     * A css class which sets a background image to be used as the icon for this button
     */
    /**
     * @cfg {String} type
     * submit, reset or button - defaults to 'button'
     */
    type : 'button',

    // private
    menuClassTarget : 'tr:nth(2)',

    /**
     * @cfg {String} clickEvent
     * The DOM event that will fire the handler of the button. This can be any valid event name (dblclick, contextmenu).
     * Defaults to 'click'.
     */
    clickEvent : 'click',

    /**
     * @cfg {Boolean} handleMouseEvents
     * False to disable visual cues on mouseover, mouseout and mousedown (defaults to true)
     */
    handleMouseEvents : true,

    /**
     * @cfg {String} tooltipType
     * The type of tooltip to use. Either 'qtip' (default) for QuickTips or 'title' for title attribute.
     */
    tooltipType : 'qtip',

    /**
     * @cfg {String} buttonSelector
     *
(Optional) A {@link Ext.DomQuery DomQuery} selector which is used to extract the active, clickable element from the
     * DOM structure created.

     *
When a custom {@link #template} is used, you  must ensure that this selector results in the selection of
     * a focussable element.

     *
Defaults to 'button:first-child'.

     */
    buttonSelector : 'button:first-child',

    /**
     * @cfg {String} scale
     *
(Optional) The size of the Button. Three values are allowed:

     *

     *
  • 'small'
    Results in the button element being 16px high.
    •
     *
  • 'medium'
    Results in the button element being 24px high.
    •
     *
  • 'large'
    Results in the button element being 32px high.
    •
     *

     *
Defaults to 'small'.

     */
    scale : 'small',

    /**
     * @cfg {Object} scope The scope (this reference) in which the
     * {@link #handler} and {@link #toggleHandler} is
     * executed. Defaults to this Button.
     */

    /**
     * @cfg {String} iconAlign
     *
(Optional) The side of the Button box to render the icon. Four values are allowed:

     *

     *
  • 'top'
    •
     *
  • 'right'
    •
     *
  • 'bottom'
    •
     *
  • 'left'
    •
     *

     *
Defaults to 'left'.

     */
    iconAlign : 'left',

    /**
     * @cfg {String} arrowAlign
     *
(Optional) The side of the Button box to render the arrow if the button has an associated {@link #menu}.
     * Two values are allowed:

     *

     *
  • 'right'
    •
     *
  • 'bottom'
    •
     *

     *
Defaults to 'right'.

     */
    arrowAlign : 'right',

    /**
     * @cfg {Ext.Template} template (Optional)
     *
A {@link Ext.Template Template} used to create the Button's DOM structure.

     * Instances, or subclasses which need a different DOM structure may provide a different
     * template layout in conjunction with an implementation of {@link #getTemplateArgs}.
     * @type Ext.Template
     * @property template
     */
    /**
     * @cfg {String} cls
     * A CSS class string to apply to the button's main element.
     */
    /**
     * @property menu
     * @type Menu
     * The {@link Ext.menu.Menu Menu} object associated with this Button when configured with the {@link #menu} config option.
     */

    initComponent : function(){
        Ext.Button.superclass.initComponent.call(this);

        this.addEvents(
            /**
             * @event click
             * Fires when this button is clicked
             * @param {Button} this
             * @param {EventObject} e The click event
             */
            'click',
            /**
             * @event toggle
             * Fires when the 'pressed' state of this button changes (only if enableToggle = true)
             * @param {Button} this
             * @param {Boolean} pressed
             */
            'toggle',
            /**
             * @event mouseover
             * Fires when the mouse hovers over the button
             * @param {Button} this
             * @param {Event} e The event object
             */
            'mouseover',
            /**
             * @event mouseout
             * Fires when the mouse exits the button
             * @param {Button} this
             * @param {Event} e The event object
             */
            'mouseout',
            /**
             * @event menushow
             * If this button has a menu, this event fires when it is shown
             * @param {Button} this
             * @param {Menu} menu
             */
            'menushow',
            /**
             * @event menuhide
             * If this button has a menu, this event fires when it is hidden
             * @param {Button} this
             * @param {Menu} menu
             */
            'menuhide',
            /**
             * @event menutriggerover
             * If this button has a menu, this event fires when the mouse enters the menu triggering element
             * @param {Button} this
             * @param {Menu} menu
             * @param {EventObject} e
             */
            'menutriggerover',
            /**
             * @event menutriggerout
             * If this button has a menu, this event fires when the mouse leaves the menu triggering element
             * @param {Button} this
             * @param {Menu} menu
             * @param {EventObject} e
             */
            'menutriggerout'
        );
        if(this.menu){
            this.menu = Ext.menu.MenuMgr.get(this.menu);
        }
        if(Ext.isString(this.toggleGroup)){
            this.enableToggle = true;
        }
    },

/**
  *
This method returns an Array which provides substitution parameters for the {@link #template Template} used
  * to create this Button's DOM structure.

  *
Instances or subclasses which use a different Template to create a different DOM structure may need to provide their
  * own implementation of this method.

  *
The default implementation which provides data for the default {@link #template} returns an Array containing the
  * following items:

  *
  • The <button>'s {@link #type}
    •
  *
  • A CSS class name applied to the Button's main <tbody> element which determines the button's scale and icon alignment.
    •
  *
  • A CSS class to determine the presence and position of an arrow icon. ('x-btn-arrow' or 'x-btn-arrow-bottom' or '')
    •
  *
  • The {@link #cls} CSS class name applied to the button's wrapping <table> element.
    •
  *
  • The Component id which is applied to the button's wrapping <table> element.
    •
  *

  * @return {Array} Substitution data for a Template.
 */
    getTemplateArgs : function(){
        return [this.type, 'x-btn-' + this.scale + ' x-btn-icon-' + this.scale + '-' + this.iconAlign, this.getMenuClass(), this.cls, this.id];
    },

    // private
    setButtonClass : function(){
        if(this.useSetClass){
            if(!Ext.isEmpty(this.oldCls)){
                this.el.removeClass([this.oldCls, 'x-btn-pressed']);
            }
            this.oldCls = (this.iconCls || this.icon) ? (this.text ? ' x-btn-text-icon' : ' x-btn-icon') : ' x-btn-noicon';
            this.el.addClass([this.oldCls, this.pressed ? 'x-btn-pressed' : null]);
        }
    },

    // protected
    getMenuClass : function(){
        return this.menu ? (this.arrowAlign != 'bottom' ? 'x-btn-arrow' : 'x-btn-arrow-bottom') : '';
    },

    // private
    onRender : function(ct, position){
        if(!this.template){
            if(!Ext.Button.buttonTemplate){
                // hideous table template
                Ext.Button.buttonTemplate = new Ext.Template(
                    '',
                    '',
                    '',
                    '',
                    '

');
                Ext.Button.buttonTemplate.compile();
            }
            this.template = Ext.Button.buttonTemplate;
        }

        var btn, targs = this.getTemplateArgs();

        if(position){
            btn = this.template.insertBefore(position, targs, true);
        }else{
            btn = this.template.append(ct, targs, true);
        }
        /**
         * An {@link Ext.Element Element} encapsulating the Button's clickable element. By default,
         * this references a <button> element. Read only.
         * @type Ext.Element
         * @property btnEl
         */
        this.btnEl = btn.child(this.buttonSelector);
        this.mon(this.btnEl, {
            scope: this,
            focus: this.onFocus,
            blur: this.onBlur
        });

        this.initButtonEl(btn, this.btnEl);

        Ext.ButtonToggleMgr.register(this);
    },

    // private
    initButtonEl : function(btn, btnEl){
        this.el = btn;
        this.setIcon(this.icon);
        this.setText(this.text);
        this.setIconClass(this.iconCls);
        if(Ext.isDefined(this.tabIndex)){
            btnEl.dom.tabIndex = this.tabIndex;
        }
        if(this.tooltip){
            this.setTooltip(this.tooltip, true);
        }

        if(this.handleMouseEvents){
            this.mon(btn, {
                scope: this,
                mouseover: this.onMouseOver,
                mousedown: this.onMouseDown
            });

            // new functionality for monitoring on the document level
            //this.mon(btn, 'mouseout', this.onMouseOut, this);
        }

        if(this.menu){
            this.mon(this.menu, {
                scope: this,
                show: this.onMenuShow,
                hide: this.onMenuHide
            });
        }

        if(this.repeat){
            var repeater = new Ext.util.ClickRepeater(btn, Ext.isObject(this.repeat) ? this.repeat : {});
            this.mon(repeater, 'click', this.onClick, this);
        }
        this.mon(btn, this.clickEvent, this.onClick, this);
    },

    // private
    afterRender : function(){
        Ext.Button.superclass.afterRender.call(this);
        this.useSetClass = true;
        this.setButtonClass();
        this.doc = Ext.getDoc();
        this.doAutoWidth();
    },

    /**
     * Sets the CSS class that provides a background image to use as the button's icon.  This method also changes
     * the value of the {@link iconCls} config internally.
     * @param {String} cls The CSS class providing the icon image
     * @return {Ext.Button} this
     */
    setIconClass : function(cls){
        this.iconCls = cls;
        if(this.el){
            this.btnEl.dom.className = '';
            this.btnEl.addClass(['x-btn-text', cls || '']);
            this.setButtonClass();
        }
        return this;
    },

    /**
     * Sets the tooltip for this Button.
     * @param {String/Object} tooltip. This may be:

     *
  • String : A string to be used as innerHTML (html tags are accepted) to show in a tooltip
    •
     *
  • Object : A configuration object for {@link Ext.QuickTips#register}.
    •
     *

     * @return {Ext.Button} this
     */
    setTooltip : function(tooltip, /* private */ initial){
        if(this.rendered){
            if(!initial){
                this.clearTip();
            }
            if(Ext.isObject(tooltip)){
                Ext.QuickTips.register(Ext.apply({
                      target: this.btnEl.id
                }, tooltip));
                this.tooltip = tooltip;
            }else{
                this.btnEl.dom[this.tooltipType] = tooltip;
            }
        }else{
            this.tooltip = tooltip;
        }
        return this;
    },

    // private
    clearTip : function(){
        if(Ext.isObject(this.tooltip)){
            Ext.QuickTips.unregister(this.btnEl);
        }
    },

    // private
    beforeDestroy : function(){
        if(this.rendered){
            this.clearTip();
        }
        if(this.menu && this.destroyMenu !== false) {
            Ext.destroy(this.menu);
        }
        Ext.destroy(this.repeater);
    },

    // private
    onDestroy : function(){
        if(this.rendered){
            this.doc.un('mouseover', this.monitorMouseOver, this);
            this.doc.un('mouseup', this.onMouseUp, this);
            delete this.doc;
            delete this.btnEl;
            Ext.ButtonToggleMgr.unregister(this);
        }
        Ext.Button.superclass.onDestroy.call(this);
    },

    // private
    doAutoWidth : function(){
        if(this.el && this.text && this.width === undefined){
            this.el.setWidth('auto');
            if(Ext.isIE7 && Ext.isStrict){
                var ib = this.btnEl;
                if(ib && ib.getWidth() > 20){
                    ib.clip();
                    ib.setWidth(Ext.util.TextMetrics.measure(ib, this.text).width+ib.getFrameWidth('lr'));
                }
            }
            if(this.minWidth){
                if(this.el.getWidth() < this.minWidth){
                    this.el.setWidth(this.minWidth);
                }
            }
        }
    },

    /**
     * Assigns this Button's click handler
     * @param {Function} handler The function to call when the button is clicked
     * @param {Object} scope (optional) The scope (this reference) in which the handler function is executed.
     * Defaults to this Button.
     * @return {Ext.Button} this
     */
    setHandler : function(handler, scope){
        this.handler = handler;
        this.scope = scope;
        return this;
    },

    /**
     * Sets this Button's text
     * @param {String} text The button text
     * @return {Ext.Button} this
     */
    setText : function(text){
        this.text = text;
        if(this.el){
            this.btnEl.update(text || ' ');
            this.setButtonClass();
        }
        this.doAutoWidth();
        return this;
    },

    /**
     * Sets the background image (inline style) of the button.  This method also changes
     * the value of the {@link icon} config internally.
     * @param {String} icon The path to an image to display in the button
     * @return {Ext.Button} this
     */
    setIcon : function(icon){
        this.icon = icon;
        if(this.el){
            this.btnEl.setStyle('background-image', icon ? 'url(' + icon + ')' : '');
            this.setButtonClass();
        }
        return this;
    },

    /**
     * Gets the text for this Button
     * @return {String} The button text
     */
    getText : function(){
        return this.text;
    },

    /**
     * If a state it passed, it becomes the pressed state otherwise the current state is toggled.
     * @param {Boolean} state (optional) Force a particular state
     * @param {Boolean} supressEvent (optional) True to stop events being fired when calling this method.
     * @return {Ext.Button} this
     */
    toggle : function(state, suppressEvent){
        state = state === undefined ? !this.pressed : !!state;
        if(state != this.pressed){
            if(this.rendered){
                this.el[state ? 'addClass' : 'removeClass']('x-btn-pressed');
            }
            this.pressed = state;
            if(!suppressEvent){
                this.fireEvent('toggle', this, state);
                if(this.toggleHandler){
                    this.toggleHandler.call(this.scope || this, this, state);
                }
            }
        }
        return this;
    },

    // private
    onDisable : function(){
        this.onDisableChange(true);
    },

    // private
    onEnable : function(){
        this.onDisableChange(false);
    },

    onDisableChange : function(disabled){
        if(this.el){
            if(!Ext.isIE6 || !this.text){
                this.el[disabled ? 'addClass' : 'removeClass'](this.disabledClass);
            }
            this.el.dom.disabled = disabled;
        }
        this.disabled = disabled;
    },

    /**
     * Show this button's menu (if it has one)
     */
    showMenu : function(){
        if(this.rendered && this.menu){
            if(this.tooltip){
                Ext.QuickTips.getQuickTip().cancelShow(this.btnEl);
            }
            if(this.menu.isVisible()){
                this.menu.hide();
            }
            this.menu.ownerCt = this;
            this.menu.show(this.el, this.menuAlign);
        }
        return this;
    },

    /**
     * Hide this button's menu (if it has one)
     */
    hideMenu : function(){
        if(this.hasVisibleMenu()){
            this.menu.hide();
        }
        return this;
    },

    /**
     * Returns true if the button has a menu and it is visible
     * @return {Boolean}
     */
    hasVisibleMenu : function(){
        return this.menu && this.menu.ownerCt == this && this.menu.isVisible();
    },

    // private
    onClick : function(e){
        if(e){
            e.preventDefault();
        }
        if(e.button !== 0){
            return;
        }
        if(!this.disabled){
            if(this.enableToggle && (this.allowDepress !== false || !this.pressed)){
                this.toggle();
            }
            if(this.menu && !this.hasVisibleMenu() && !this.ignoreNextClick){
                this.showMenu();
            }
            this.fireEvent('click', this, e);
            if(this.handler){
                //this.el.removeClass('x-btn-over');
                this.handler.call(this.scope || this, this, e);
            }
        }
    },

    // private
    isMenuTriggerOver : function(e, internal){
        return this.menu && !internal;
    },

    // private
    isMenuTriggerOut : function(e, internal){
        return this.menu && !internal;
    },

    // private
    onMouseOver : function(e){
        if(!this.disabled){
            var internal = e.within(this.el,  true);
            if(!internal){
                this.el.addClass('x-btn-over');
                if(!this.monitoringMouseOver){
                    this.doc.on('mouseover', this.monitorMouseOver, this);
                    this.monitoringMouseOver = true;
                }
                this.fireEvent('mouseover', this, e);
            }
            if(this.isMenuTriggerOver(e, internal)){
                this.fireEvent('menutriggerover', this, this.menu, e);
            }
        }
    },

    // private
    monitorMouseOver : function(e){
        if(e.target != this.el.dom && !e.within(this.el)){
            if(this.monitoringMouseOver){
                this.doc.un('mouseover', this.monitorMouseOver, this);
                this.monitoringMouseOver = false;
            }
            this.onMouseOut(e);
        }
    },

    // private
    onMouseOut : function(e){
        var internal = e.within(this.el) && e.target != this.el.dom;
        this.el.removeClass('x-btn-over');
        this.fireEvent('mouseout', this, e);
        if(this.isMenuTriggerOut(e, internal)){
            this.fireEvent('menutriggerout', this, this.menu, e);
        }
    },

    focus : function() {
        this.btnEl.focus();
    },

    blur : function() {
        this.btnEl.blur();
    },

    // private
    onFocus : function(e){
        if(!this.disabled){
            this.el.addClass('x-btn-focus');
        }
    },
    // private
    onBlur : function(e){
        this.el.removeClass('x-btn-focus');
    },

    // private
    getClickEl : function(e, isUp){
       return this.el;
    },

    // private
    onMouseDown : function(e){
        if(!this.disabled && e.button === 0){
            this.getClickEl(e).addClass('x-btn-click');
            this.doc.on('mouseup', this.onMouseUp, this);
        }
    },
    // private
    onMouseUp : function(e){
        if(e.button === 0){
            this.getClickEl(e, true).removeClass('x-btn-click');
            this.doc.un('mouseup', this.onMouseUp, this);
        }
    },
    // private
    onMenuShow : function(e){
        if(this.menu.ownerCt == this){
            this.menu.ownerCt = this;
            this.ignoreNextClick = 0;
            this.el.addClass('x-btn-menu-active');
            this.fireEvent('menushow', this, this.menu);
        }
    },
    // private
    onMenuHide : function(e){
        if(this.menu.ownerCt == this){
            this.el.removeClass('x-btn-menu-active');
            this.ignoreNextClick = this.restoreClick.defer(250, this);
            this.fireEvent('menuhide', this, this.menu);
            delete this.menu.ownerCt;
        }
    },

    // private
    restoreClick : function(){
        this.ignoreNextClick = 0;
    }

    /**
     * @cfg {String} autoEl @hide
     */
    /**
     * @cfg {String/Object} html @hide
     */
    /**
     * @cfg {String} contentEl  @hide
     */
    /**
     * @cfg {Mixed} data  @hide
     */
    /**
     * @cfg {Mixed} tpl  @hide
     */
    /**
     * @cfg {String} tplWriteMode  @hide
     */
});
Ext.reg('button', Ext.Button);

// Private utility class used by Button
Ext.ButtonToggleMgr = function(){
   var groups = {};

   function toggleGroup(btn, state){
       if(state){
           var g = groups[btn.toggleGroup];
           for(var i = 0, l = g.length; i < l; i++){
               if(g[i] != btn){
                   g[i].toggle(false);
               }
           }
       }
   }

   return {
       register : function(btn){
           if(!btn.toggleGroup){
               return;
           }
           var g = groups[btn.toggleGroup];
           if(!g){
               g = groups[btn.toggleGroup] = [];
           }
           g.push(btn);
           btn.on('toggle', toggleGroup);
       },

       unregister : function(btn){
           if(!btn.toggleGroup){
               return;
           }
           var g = groups[btn.toggleGroup];
           if(g){
               g.remove(btn);
               btn.un('toggle', toggleGroup);
           }
       },

       /**
        * Gets the pressed button in the passed group or null
        * @param {String} group
        * @return Button
        */
       getPressed : function(group){
           var g = groups[group];
           if(g){
               for(var i = 0, len = g.length; i < len; i++){
                   if(g[i].pressed === true){
                       return g[i];
                   }
               }
           }
           return null;
       }
   };
}();


The source code

/*!
 * licensing@extjs.com
 * http://www.extjs.com/license
 */

/**
 * @class Ext.ButtonGroup
 * @extends Ext.Panel
 * Container for a group of buttons. Example usage:
 *

var p = new Ext.Panel({
    title: 'Panel with Button Group',
    width: 300,
    height:200,
    renderTo: document.body,
    html: 'whatever',
    tbar: [{
        xtype: 'buttongroup',
        {@link #columns}: 3,
        title: 'Clipboard',
        items: [{
            text: 'Paste',
            scale: 'large',
            rowspan: 3, iconCls: 'add',
            iconAlign: 'top',
            cls: 'x-btn-as-arrow'
        },{
            xtype:'splitbutton',
            text: 'Menu Button',
            scale: 'large',
            rowspan: 3,
            iconCls: 'add',
            iconAlign: 'top',
            arrowAlign:'bottom',
            menu: [{text: 'Menu Item 1'}]
        },{
            xtype:'splitbutton', text: 'Cut', iconCls: 'add16', menu: [{text: 'Cut Menu Item'}]
        },{
            text: 'Copy', iconCls: 'add16'
        },{
            text: 'Format', iconCls: 'add16'
        }]
    }]
});
 *

 * @constructor
 * Create a new ButtonGroup.
 * @param {Object} config The config object
 * @xtype buttongroup
 */
Ext.ButtonGroup = Ext.extend(Ext.Panel, {

/**
     * @cfg {Number} columns The columns configuration property passed to the
     * {@link #layout configured layout manager}. See {@link Ext.layout.TableLayout#columns}.
     */

/**
     * @cfg {String} baseCls  Defaults to 'x-btn-group'.  See {@link Ext.Panel#baseCls}.
     */
    baseCls: 'x-btn-group',

/**
     * @cfg {String} layout  Defaults to 'table'.  See {@link Ext.Container#layout}.
     */
    layout:'table',
    defaultType: 'button',

/**
     * @cfg {Boolean} frame  Defaults to true.  See {@link Ext.Panel#frame}.
     */
    frame: true,
    internalDefaults: {removeMode: 'container', hideParent: true},

    initComponent : function(){
        this.layoutConfig = this.layoutConfig || {};
        Ext.applyIf(this.layoutConfig, {
            columns : this.columns
        });
        if(!this.title){
            this.addClass('x-btn-group-notitle');
        }
        this.on('afterlayout', this.onAfterLayout, this);
        Ext.ButtonGroup.superclass.initComponent.call(this);
    },

    applyDefaults : function(c){
        c = Ext.ButtonGroup.superclass.applyDefaults.call(this, c);
        var d = this.internalDefaults;
        if(c.events){
            Ext.applyIf(c.initialConfig, d);
            Ext.apply(c, d);
        }else{
            Ext.applyIf(c, d);
        }
        return c;
    },

    onAfterLayout : function(){
        var bodyWidth = this.body.getFrameWidth('lr') + this.body.dom.firstChild.offsetWidth;
        this.body.setWidth(bodyWidth);
        this.el.setWidth(bodyWidth + this.getFrameWidth());
    }

/**
     * @cfg {Array} tools  @hide
     */
});

Ext.reg('buttongroup', Ext.ButtonGroup);


The source code

/*!
 * licensing@extjs.com
 * http://www.extjs.com/license
 */

/**
 * @class Ext.layout.CardLayout
 * @extends Ext.layout.FitLayout
 *
This layout manages multiple child Components, each fitted to the Container, where only a single child Component can be
 * visible at any given time.  This layout style is most commonly used for wizards, tab implementations, etc.
 * This class is intended to be extended or created via the layout:'card' {@link Ext.Container#layout} config,
 * and should generally not need to be created directly via the new keyword.

 *
The CardLayout's focal method is {@link #setActiveItem}.  Since only one panel is displayed at a time,
 * the only way to move from one Component to the next is by calling setActiveItem, passing the id or index of
 * the next panel to display.  The layout itself does not provide a user interface for handling this navigation,
 * so that functionality must be provided by the developer.

 *
In the following example, a simplistic wizard setup is demonstrated.  A button bar is added
 * to the footer of the containing panel to provide navigation buttons.  The buttons will be handled by a
 * common navigation routine -- for this example, the implementation of that routine has been ommitted since
 * it can be any type of custom logic.  Note that other uses of a CardLayout (like a tab control) would require a
 * completely different implementation.  For serious implementations, a better approach would be to extend
 * CardLayout to provide the custom functionality needed.  Example usage:

 *

var navHandler = function(direction){
    // This routine could contain business logic required to manage the navigation steps.
    // It would call setActiveItem as needed, manage navigation button state, handle any
    // branching logic that might be required, handle alternate actions like cancellation
    // or finalization, etc.  A complete wizard implementation could get pretty
    // sophisticated depending on the complexity required, and should probably be
    // done as a subclass of CardLayout in a real-world implementation.
};

var card = new Ext.Panel({
    title: 'Example Wizard',
    layout:'card',
    activeItem: 0, // make sure the active item is set on the container config!
    bodyStyle: 'padding:15px',
    defaults: {
        // applied to each contained panel
        border:false
    },
    // just an example of one possible navigation scheme, using buttons
    bbar: [
        {
            id: 'move-prev',
            text: 'Back',
            handler: navHandler.createDelegate(this, [-1]),
            disabled: true
        },
        '->', // greedy spacer so that the buttons are aligned to each side
        {
            id: 'move-next',
            text: 'Next',
            handler: navHandler.createDelegate(this, [1])
        }
    ],
    // the panels (or "cards") within the layout
    items: [{
        id: 'card-0',
        html: '<h1>Welcome to the Wizard!</h1><p>Step 1 of 3</p>'
    },{
        id: 'card-1',
        html: '<p>Step 2 of 3</p>'
    },{
        id: 'card-2',
        html: '<h1>Congratulations!</h1><p>Step 3 of 3 - Complete</p>'
    }]
});

 */
Ext.layout.CardLayout = Ext.extend(Ext.layout.FitLayout, {

/**
     * @cfg {Boolean} deferredRender
     * True to render each contained item at the time it becomes active, false to render all contained items
     * as soon as the layout is rendered (defaults to false).  If there is a significant amount of content or
     * a lot of heavy controls being rendered into panels that are not displayed by default, setting this to
     * true might improve performance.
     */
    deferredRender : false,

/**
     * @cfg {Boolean} layoutOnCardChange
     * True to force a layout of the active item when the active card is changed. Defaults to false.
     */
    layoutOnCardChange : false,

/**
     * @cfg {Boolean} renderHidden @hide
     */
    // private
    renderHidden : true,

    type: 'card',

/**
     * Sets the active (visible) item in the layout.
     * @param {String/Number} item The string component id or numeric index of the item to activate
     */
    setActiveItem : function(item){
        var ai = this.activeItem,
            ct = this.container;
        item = ct.getComponent(item);

        // Is this a valid, different card?
        if(item && ai != item){

            // Changing cards, hide the current one
            if(ai){
                ai.hide();
                if (ai.hidden !== true) {
                    return false;
                }
                ai.fireEvent('deactivate', ai);
            }

            var layout = item.doLayout && (this.layoutOnCardChange || !item.rendered);

            // Change activeItem reference
            this.activeItem = item;

            // The container is about to get a recursive layout, remove any deferLayout reference
            // because it will trigger a redundant layout.
            delete item.deferLayout;

            // Show the new component
            item.show();

            this.layout();

            if(layout){
                item.doLayout();
            }
            item.fireEvent('activate', item);
        }
    },

    // private
    renderAll : function(ct, target){
        if(this.deferredRender){
            this.renderItem(this.activeItem, undefined, target);
        }else{
            Ext.layout.CardLayout.superclass.renderAll.call(this, ct, target);
        }
    }
});
Ext.Container.LAYOUTS['card'] = Ext.layout.CardLayout;


The source code

/*!
 * licensing@extjs.com
 * http://www.extjs.com/license
 */
Ext.ns('Ext.ux');

Ext.ux.Carousel = Ext.extend(Ext.util.Observable, {
    interval: 3,
    transitionDuration: 1,
    transitionType: 'carousel',
    transitionEasing: 'easeOut',
    itemSelector: 'img',
    activeSlide: 0,
    autoPlay: false,
    showPlayButton: false,
    pauseOnNavigate: false,
    wrap: false,
    freezeOnHover: false,
    navigationOnHover: false,
    hideNavigation: false,
    width: null,
    height: null,

    constructor: function(elId, config) {
        config = config || {};
        Ext.apply(this, config);

        Ext.ux.Carousel.superclass.constructor.call(this, config);

        this.addEvents(
            'beforeprev',
            'prev',
            'beforenext',
            'next',
            'change',
            'play',
            'pause',
            'freeze',
            'unfreeze'
        );

        this.el = Ext.get(elId);
        this.slides = this.els = [];

        if(this.autoPlay || this.showPlayButton) {
            this.wrap = true;
        };

        if(this.autoPlay && typeof config.showPlayButton === 'undefined') {
            this.showPlayButton = true;
        }

        this.initMarkup();
        this.initEvents();

        if(this.carouselSize > 0) {
            this.refresh();
        }
    },

    initMarkup: function() {
        var dh = Ext.DomHelper;

        this.carouselSize = 0;
        var items = this.el.select(this.itemSelector);
        this.els.container = dh.append(this.el, {cls: 'ux-carousel-container'}, true);
        this.els.slidesWrap = dh.append(this.els.container, {cls: 'ux-carousel-slides-wrap'}, true);

        this.els.navigation = dh.append(this.els.container, {cls: 'ux-carousel-nav'}, true).hide();
        this.els.caption = dh.append(this.els.navigation, {tag: 'h2', cls: 'ux-carousel-caption'}, true);
        this.els.navNext = dh.append(this.els.navigation, {tag: 'a', href: '#', cls: 'ux-carousel-nav-next'}, true);
        if(this.showPlayButton) {
            this.els.navPlay = dh.append(this.els.navigation, {tag: 'a', href: '#', cls: 'ux-carousel-nav-play'}, true)
        }
        this.els.navPrev = dh.append(this.els.navigation, {tag: 'a', href: '#', cls: 'ux-carousel-nav-prev'}, true);

        // set the dimensions of the container
        this.slideWidth = this.width || this.el.getWidth(true);
        this.slideHeight = this.height || this.el.getHeight(true);
        this.els.container.setStyle({
            width: this.slideWidth + 'px',
            height: this.slideHeight + 'px'
        });

        this.els.caption.setWidth((this.slideWidth - (this.els.navNext.getWidth()*2) - (this.showPlayButton ? this.els.navPlay.getWidth() : 0) - 20) + 'px')

        items.appendTo(this.els.slidesWrap).each(function(item) {
            item = item.wrap({cls: 'ux-carousel-slide'});
            this.slides.push(item);
            item.setWidth(this.slideWidth + 'px').setHeight(this.slideHeight + 'px');
        }, this);
        this.carouselSize = this.slides.length;
        if(this.navigationOnHover) {
            this.els.navigation.setStyle('top', (-1*this.els.navigation.getHeight()) + 'px');
        }
        this.el.clip();
    },

    initEvents: function() {
        this.els.navPrev.on('click', function(ev) {
            ev.preventDefault();
            var target = ev.getTarget();
            target.blur();
            if(Ext.fly(target).hasClass('ux-carousel-nav-disabled')) return;
            this.prev();
        }, this);

        this.els.navNext.on('click', function(ev) {
            ev.preventDefault();
            var target = ev.getTarget();
            target.blur();
            if(Ext.fly(target).hasClass('ux-carousel-nav-disabled')) return;
            this.next();
        }, this);

        if(this.showPlayButton) {
            this.els.navPlay.on('click', function(ev){
                ev.preventDefault();
                ev.getTarget().blur();
                if(this.playing) {
                    this.pause();
                }
                else {
                    this.play();
                }
            }, this);
        };

        if(this.freezeOnHover) {
            this.els.container.on('mouseenter', function(){
                if(this.playing) {
                    this.fireEvent('freeze', this.slides[this.activeSlide]);
                    Ext.TaskMgr.stop(this.playTask);
                }
            }, this);
            this.els.container.on('mouseleave', function(){
                if(this.playing) {
                    this.fireEvent('unfreeze', this.slides[this.activeSlide]);
                    Ext.TaskMgr.start(this.playTask);
                }
            }, this, {buffer: (this.interval/2)*1000});
        };

        if(this.navigationOnHover) {
            this.els.container.on('mouseenter', function(){
                if(!this.navigationShown) {
                    this.navigationShown = true;
                    this.els.navigation.stopFx(false).shift({
                        y: this.els.container.getY(),
                        duration: this.transitionDuration
                    })
                }
            }, this);

            this.els.container.on('mouseleave', function(){
                if(this.navigationShown) {
                    this.navigationShown = false;
                    this.els.navigation.stopFx(false).shift({
                        y: this.els.navigation.getHeight() - this.els.container.getY(),
                        duration: this.transitionDuration
                    })
                }
            }, this);
        }

        if(this.interval && this.autoPlay) {
            this.play();
        };
    },

    prev: function() {
        if (this.fireEvent('beforeprev') === false) {
            return;
        }
        if(this.pauseOnNavigate) {
            this.pause();
        }
        this.setSlide(this.activeSlide - 1);

        this.fireEvent('prev', this.activeSlide);
        return this;
    },

    next: function() {
        if(this.fireEvent('beforenext') === false) {
            return;
        }
        if(this.pauseOnNavigate) {
            this.pause();
        }
        this.setSlide(this.activeSlide + 1);

        this.fireEvent('next', this.activeSlide);
        return this;
    },

    play: function() {
        if(!this.playing) {
            this.playTask = this.playTask || {
                run: function() {
                    this.playing = true;
                    this.setSlide(this.activeSlide+1);
                },
                interval: this.interval*1000,
                scope: this
            };

            this.playTaskBuffer = this.playTaskBuffer || new Ext.util.DelayedTask(function() {
                Ext.TaskMgr.start(this.playTask);
            }, this);

            this.playTaskBuffer.delay(this.interval*1000);
            this.playing = true;
            if(this.showPlayButton) {
                this.els.navPlay.addClass('ux-carousel-playing');
            }
            this.fireEvent('play');
        }
        return this;
    },

    pause: function() {
        if(this.playing) {
            Ext.TaskMgr.stop(this.playTask);
            this.playTaskBuffer.cancel();
            this.playing = false;
            if(this.showPlayButton) {
                this.els.navPlay.removeClass('ux-carousel-playing');
            }
            this.fireEvent('pause');
        }
        return this;
    },

    clear: function() {
        this.els.slidesWrap.update('');
        this.slides = [];
        this.carouselSize = 0;
        this.pause();
        return this;
    },

    add: function(el, refresh) {
        var item = Ext.fly(el).appendTo(this.els.slidesWrap).wrap({cls: 'ux-carousel-slide'});
        item.setWidth(this.slideWidth + 'px').setHeight(this.slideHeight + 'px');
        this.slides.push(item);
        if(refresh) {
            this.refresh();
        }
        return this;
    },

    refresh: function() {
        this.carouselSize = this.slides.length;
        this.els.slidesWrap.setWidth((this.slideWidth * this.carouselSize) + 'px');
        if(this.carouselSize > 0) {
            if(!this.hideNavigation) this.els.navigation.show();
            this.activeSlide = 0;
            this.setSlide(0, true);
        }
        return this;
    },

    setSlide: function(index, initial) {
        if(!this.wrap && !this.slides[index]) {
            return;
        }
        else if(this.wrap) {
            if(index < 0) {
                index = this.carouselSize-1;
            }
            else if(index > this.carouselSize-1) {
                index = 0;
            }
        }
        if(!this.slides[index]) {
            return;
        }

        this.els.caption.update(this.slides[index].child(':first-child', true).title || '');
        var offset = index * this.slideWidth;
        if (!initial) {
            switch (this.transitionType) {
                case 'fade':
                    this.slides[index].setOpacity(0);
                    this.slides[this.activeSlide].stopFx(false).fadeOut({
                        duration: this.transitionDuration / 2,
                        callback: function(){
                            this.els.slidesWrap.setStyle('left', (-1 * offset) + 'px');
                            this.slides[this.activeSlide].setOpacity(1);
                            this.slides[index].fadeIn({
                                duration: this.transitionDuration / 2
                            });
                        },
                        scope: this
                    })
                    break;

                default:
                    var xNew = (-1 * offset) + this.els.container.getX();
                    this.els.slidesWrap.stopFx(false);
                    this.els.slidesWrap.shift({
                        duration: this.transitionDuration,
                        x: xNew,
                        easing: this.transitionEasing
                    });
                    break;
            }
        }
        else {
            this.els.slidesWrap.setStyle('left', '0');
        }

        this.activeSlide = index;
        this.updateNav();
        this.fireEvent('change', this.slides[index], index);
    },

    updateNav: function() {
        this.els.navPrev.removeClass('ux-carousel-nav-disabled');
        this.els.navNext.removeClass('ux-carousel-nav-disabled');
        if(!this.wrap) {
            if(this.activeSlide === 0) {
                this.els.navPrev.addClass('ux-carousel-nav-disabled');
            }
            if(this.activeSlide === this.carouselSize-1) {
                this.els.navNext.addClass('ux-carousel-nav-disabled');
            }
        }
    }
});


The source code

/*!
 * licensing@extjs.com
 * http://www.extjs.com/license
 */

/**
 * @class Ext.grid.CellSelectionModel
 * @extends Ext.grid.AbstractSelectionModel
 * This class provides the basic implementation for single cell selection in a grid.
 * The object stored as the selection contains the following properties:
 *

 *
  • cell : see {@link #getSelectedCell}
 *
  • record : Ext.data.record The {@link Ext.data.Record Record}
 * which provides the data for the row containing the selection
    •
 *

 * @constructor
 * @param {Object} config The object containing the configuration of this model.
 */
Ext.grid.CellSelectionModel = Ext.extend(Ext.grid.AbstractSelectionModel,  {

    constructor : function(config){
        Ext.apply(this, config);

        this.selection = null;

        this.addEvents(

/**
             * @event beforecellselect
             * Fires before a cell is selected, return false to cancel the selection.
             * @param {SelectionModel} this
             * @param {Number} rowIndex The selected row index
             * @param {Number} colIndex The selected cell index
             */
            "beforecellselect",

/**
             * @event cellselect
             * Fires when a cell is selected.
             * @param {SelectionModel} this
             * @param {Number} rowIndex The selected row index
             * @param {Number} colIndex The selected cell index
             */
            "cellselect",

/**
             * @event selectionchange
             * Fires when the active selection changes.
             * @param {SelectionModel} this
             * @param {Object} selection null for no selection or an object with two properties
             *

             *
  • cell : see {@link #getSelectedCell}
             *
  • record : Ext.data.record
    The {@link Ext.data.Record Record}
             * which provides the data for the row containing the selection
    •
             *

             */
            "selectionchange"
        );

        Ext.grid.CellSelectionModel.superclass.constructor.call(this);
    },

    /** @ignore */
    initEvents : function(){
        this.grid.on('cellmousedown', this.handleMouseDown, this);
        this.grid.on(Ext.EventManager.useKeydown ? 'keydown' : 'keypress', this.handleKeyDown, this);
        this.grid.getView().on({
            scope: this,
            refresh: this.onViewChange,
            rowupdated: this.onRowUpdated,
            beforerowremoved: this.clearSelections,
            beforerowsinserted: this.clearSelections
        });
        if(this.grid.isEditor){
            this.grid.on('beforeedit', this.beforeEdit,  this);
        }
    },

    //private
    beforeEdit : function(e){
        this.select(e.row, e.column, false, true, e.record);
    },

    //private
    onRowUpdated : function(v, index, r){
        if(this.selection && this.selection.record == r){
            v.onCellSelect(index, this.selection.cell[1]);
        }
    },

    //private
    onViewChange : function(){
        this.clearSelections(true);
    },

/**
     * Returns an array containing the row and column indexes of the currently selected cell
     * (e.g., [0, 0]), or null if none selected. The array has elements:
     *

     *
  • rowIndex : Number
    The index of the selected row
    •
     *
  • cellIndex : Number
    The index of the selected cell.
     * Due to possible column reordering, the cellIndex should not be used as an
     * index into the Record's data. Instead, use the cellIndex to determine the name
     * of the selected cell and use the field name to retrieve the data value from the record:

// get name
var fieldName = grid.getColumnModel().getDataIndex(cellIndex);
// get data value based on name
var data = record.get(fieldName);
     *
    •
     *

     * @return {Array} An array containing the row and column indexes of the selected cell, or null if none selected.
     */
    getSelectedCell : function(){
        return this.selection ? this.selection.cell : null;
    },

/**
     * If anything is selected, clears all selections and fires the selectionchange event.
     * @param {Boolean} preventNotify true to prevent the gridview from
     * being notified about the change.
     */
    clearSelections : function(preventNotify){
        var s = this.selection;
        if(s){
            if(preventNotify !== true){
                this.grid.view.onCellDeselect(s.cell[0], s.cell[1]);
            }
            this.selection = null;
            this.fireEvent("selectionchange", this, null);
        }
    },

/**
     * Returns true if there is a selection.
     * @return {Boolean}
     */
    hasSelection : function(){
        return this.selection ? true : false;
    },

    /** @ignore */
    handleMouseDown : function(g, row, cell, e){
        if(e.button !== 0 || this.isLocked()){
            return;
        }
        this.select(row, cell);
    },

/**
     * Selects a cell.  Before selecting a cell, fires the
     * {@link #beforecellselect} event.  If this check is satisfied the cell
     * will be selected and followed up by  firing the {@link #cellselect} and
     * {@link #selectionchange} events.
     * @param {Number} rowIndex The index of the row to select
     * @param {Number} colIndex The index of the column to select
     * @param {Boolean} preventViewNotify (optional) Specify true to
     * prevent notifying the view (disables updating the selected appearance)
     * @param {Boolean} preventFocus (optional) Whether to prevent the cell at
     * the specified rowIndex / colIndex from being focused.
     * @param {Ext.data.Record} r (optional) The record to select
     */
    select : function(rowIndex, colIndex, preventViewNotify, preventFocus, /*internal*/ r){
        if(this.fireEvent("beforecellselect", this, rowIndex, colIndex) !== false){
            this.clearSelections();
            r = r || this.grid.store.getAt(rowIndex);
            this.selection = {
                record : r,
                cell : [rowIndex, colIndex]
            };
            if(!preventViewNotify){
                var v = this.grid.getView();
                v.onCellSelect(rowIndex, colIndex);
                if(preventFocus !== true){
                    v.focusCell(rowIndex, colIndex);
                }
            }
            this.fireEvent("cellselect", this, rowIndex, colIndex);
            this.fireEvent("selectionchange", this, this.selection);
        }
    },

    //private
    isSelectable : function(rowIndex, colIndex, cm){
        return !cm.isHidden(colIndex);
    },

    // private
    onEditorKey: function(field, e){
        if(e.getKey() == e.TAB){
            this.handleKeyDown(e);
        }
    },

    /** @ignore */
    handleKeyDown : function(e){
        if(!e.isNavKeyPress()){
            return;
        }

        var k = e.getKey(),
            g = this.grid,
            s = this.selection,
            sm = this,
            walk = function(row, col, step){
                return g.walkCells(
                    row,
                    col,
                    step,
                    g.isEditor && g.editing ? sm.acceptsNav : sm.isSelectable, // *** handle tabbing while editorgrid is in edit mode
                    sm
                );
            },
            cell, newCell, r, c, ae;

        switch(k){
            case e.ESC:
            case e.PAGE_UP:
            case e.PAGE_DOWN:
                // do nothing
                break;
            default:
                // *** call e.stopEvent() only for non ESC, PAGE UP/DOWN KEYS
                e.stopEvent();
                break;
        }

        if(!s){
            cell = walk(0, 0, 1); // *** use private walk() function defined above
            if(cell){
                this.select(cell[0], cell[1]);
            }
            return;
        }

        cell = s.cell;  // currently selected cell
        r = cell[0];    // current row
        c = cell[1];    // current column

        switch(k){
            case e.TAB:
                if(e.shiftKey){
                    newCell = walk(r, c - 1, -1);
                }else{
                    newCell = walk(r, c + 1, 1);
                }
                break;
            case e.DOWN:
                newCell = walk(r + 1, c, 1);
                break;
            case e.UP:
                newCell = walk(r - 1, c, -1);
                break;
            case e.RIGHT:
                newCell = walk(r, c + 1, 1);
                break;
            case e.LEFT:
                newCell = walk(r, c - 1, -1);
                break;
            case e.ENTER:
                if (g.isEditor && !g.editing) {
                    g.startEditing(r, c);
                    return;
                }
                break;
        }

        if(newCell){
            // *** reassign r & c variables to newly-selected cell's row and column
            r = newCell[0];
            c = newCell[1];

            this.select(r, c); // *** highlight newly-selected cell and update selection

            if(g.isEditor && g.editing){ // *** handle tabbing while editorgrid is in edit mode
                ae = g.activeEditor;
                if(ae && ae.field.triggerBlur){
                    // *** if activeEditor is a TriggerField, explicitly call its triggerBlur() method
                    ae.field.triggerBlur();
                }
                g.startEditing(r, c);
            }
        }
    },

    acceptsNav : function(row, col, cm){
        return !cm.isHidden(col) && cm.isCellEditable(col, row);
    }
});


The source code

/*!
 * licensing@extjs.com
 * http://www.extjs.com/license
 */

/**
 * @class Ext.chart.Chart
 * @extends Ext.FlashComponent
 * The Ext.chart package provides the capability to visualize data with flash based charting.
 * Each chart binds directly to an Ext.data.Store enabling automatic updates of the chart.
 * To change the look and feel of a chart, see the {@link #chartStyle} and {@link #extraStyle} config options.
 * @constructor
 * @xtype chart
 */

 Ext.chart.Chart = Ext.extend(Ext.FlashComponent, {
    refreshBuffer: 100,

/**
     * @cfg {String} backgroundColor
     * @hide
     */

/**
     * @cfg {Object} chartStyle
     * Sets styles for this chart. This contains default styling, so modifying this property will override
     * the built in styles of the chart. Use {@link #extraStyle} to add customizations to the default styling.
     */
    chartStyle: {
        padding: 10,
        animationEnabled: true,
        font: {
            name: 'Tahoma',
            color: 0x444444,
            size: 11
        },
        dataTip: {
            padding: 5,
            border: {
                color: 0x99bbe8,
                size:1
            },
            background: {
                color: 0xDAE7F6,
                alpha: .9
            },
            font: {
                name: 'Tahoma',
                color: 0x15428B,
                size: 10,
                bold: true
            }
        }
    },

/**
     * @cfg {String} url
     * The url to load the chart from. This defaults to Ext.chart.Chart.CHART_URL, which should
     * be modified to point to the local charts resource.
     */

/**
     * @cfg {Object} extraStyle
     * Contains extra styles that will be added or overwritten to the default chartStyle. Defaults to null.
     * For a detailed list of the options available, visit the YUI Charts site
     * at http://developer.yahoo.com/yui/charts/#basicstyles

     * Some of the options availabe:

     *

     *
  • padding - The space around the edge of the chart's contents. Padding does not increase the size of the chart.
    •
     *
  • animationEnabled - A Boolean value that specifies whether marker animations are enabled or not. Enabled by default.
    •
     *
  • font - An Object defining the font style to be used in the chart. Defaults to { name: 'Tahoma', color: 0x444444, size: 11 }

     *

     *
    • name - font name
      •
     *
    • color - font color (hex code, ie: "#ff0000", "ff0000" or 0xff0000)
      •
     *
    • size - font size in points (numeric portion only, ie: 11)
      •
     *
    • bold - boolean
      •
     *
    • italic - boolean
      •
     *
    • underline - boolean
      •
     *

     *
    •
     *
  • border - An object defining the border style around the chart. The chart itself will decrease in dimensions to accomodate the border.

     *

     *
    • color - border color (hex code, ie: "#ff0000", "ff0000" or 0xff0000)
      •
     *
    • size - border size in pixels (numeric portion only, ie: 1)
      •
     *

     *
    •
     *
  • background - An object defining the background style of the chart.

     *

     *
    • color - border color (hex code, ie: "#ff0000", "ff0000" or 0xff0000)
      •
     *
    • image - an image URL. May be relative to the current document or absolute.
      •
     *

     *
    •
     *
  • legend - An object defining the legend style

     *

     *
    • display - location of the legend. Possible values are "none", "left", "right", "top", and "bottom".
      •
     *
    • spacing - an image URL. May be relative to the current document or absolute.
      •
     *
    • padding, border, background, font - same options as described above.
      •
     *
    •
     *
  • dataTip - An object defining the style of the data tip (tooltip).

     *

     *
    • padding, border, background, font - same options as described above.
      •
     *
    •
     *
  • xAxis and yAxis - An object defining the style of the style of either axis.

     *

     *
    • color - same option as described above.
      •
     *
    • size - same option as described above.
      •
     *
    • showLabels - boolean
      •
     *
    • labelRotation - a value in degrees from -90 through 90. Default is zero.
      •
     *
    •
     *
  • majorGridLines and minorGridLines - An object defining the style of the style of the grid lines.

     *

     *
    • color, size - same options as described above.
      •
     *
    •
     *
  • zeroGridLine - An object defining the style of the style of the zero grid line.

     *

     *
    • color, size - same options as described above.
      •
     *
    •
     *
  • majorTicks and minorTicks - An object defining the style of the style of ticks in the chart.

     *

     *
    • color, size - same options as described above.
      •
     *
    • length - the length of each tick in pixels extending from the axis.
      •
     *
    • display - how the ticks are drawn. Possible values are "none", "inside", "outside", and "cross".
      •
     *
    •
     *

     */
    extraStyle: null,

/**
     * @cfg {Object} seriesStyles
     * Contains styles to apply to the series after a refresh. Defaults to null.
     */
    seriesStyles: null,

/**
     * @cfg {Boolean} disableCaching
     * True to add a "cache buster" to the end of the chart url. Defaults to true for Opera and IE.
     */
    disableCaching: Ext.isIE || Ext.isOpera,
    disableCacheParam: '_dc',

    initComponent : function(){
        Ext.chart.Chart.superclass.initComponent.call(this);
        if(!this.url){
            this.url = Ext.chart.Chart.CHART_URL;
        }
        if(this.disableCaching){
            this.url = Ext.urlAppend(this.url, String.format('{0}={1}', this.disableCacheParam, new Date().getTime()));
        }
        this.addEvents(
            'itemmouseover',
            'itemmouseout',
            'itemclick',
            'itemdoubleclick',
            'itemdragstart',
            'itemdrag',
            'itemdragend',

/**
             * @event beforerefresh
             * Fires before a refresh to the chart data is called.  If the beforerefresh handler returns
             * false the {@link #refresh} action will be cancelled.
             * @param {Chart} this
             */
            'beforerefresh',

/**
             * @event refresh
             * Fires after the chart data has been refreshed.
             * @param {Chart} this
             */
            'refresh'
        );
        this.store = Ext.StoreMgr.lookup(this.store);
    },

/**
     * Sets a single style value on the Chart instance.
     *
     * @param name {String} Name of the Chart style value to change.
     * @param value {Object} New value to pass to the Chart style.
     */
     setStyle: function(name, value){
         this.swf.setStyle(name, Ext.encode(value));
     },

/**
     * Resets all styles on the Chart instance.
     *
     * @param styles {Object} Initializer for all Chart styles.
     */
    setStyles: function(styles){
        this.swf.setStyles(Ext.encode(styles));
    },

/**
     * Sets the styles on all series in the Chart.
     *
     * @param styles {Array} Initializer for all Chart series styles.
     */
    setSeriesStyles: function(styles){
        this.seriesStyles = styles;
        var s = [];
        Ext.each(styles, function(style){
            s.push(Ext.encode(style));
        });
        this.swf.setSeriesStyles(s);
    },

    setCategoryNames : function(names){
        this.swf.setCategoryNames(names);
    },

    setLegendRenderer : function(fn, scope){
        var chart = this;
        scope = scope || chart;
        chart.removeFnProxy(chart.legendFnName);
        chart.legendFnName = chart.createFnProxy(function(name){
            return fn.call(scope, name);
        });
        chart.swf.setLegendLabelFunction(chart.legendFnName);
    },

    setTipRenderer : function(fn, scope){
        var chart = this;
        scope = scope || chart;
        chart.removeFnProxy(chart.tipFnName);
        chart.tipFnName = chart.createFnProxy(function(item, index, series){
            var record = chart.store.getAt(index);
            return fn.call(scope, chart, record, index, series);
        });
        chart.swf.setDataTipFunction(chart.tipFnName);
    },

    setSeries : function(series){
        this.series = series;
        this.refresh();
    },

/**
     * Changes the data store bound to this chart and refreshes it.
     * @param {Store} store The store to bind to this chart
     */
    bindStore : function(store, initial){
        if(!initial && this.store){
            if(store !== this.store && this.store.autoDestroy){
                this.store.destroy();
            }else{
                this.store.un("datachanged", this.refresh, this);
                this.store.un("add", this.delayRefresh, this);
                this.store.un("remove", this.delayRefresh, this);
                this.store.un("update", this.delayRefresh, this);
                this.store.un("clear", this.refresh, this);
            }
        }
        if(store){
            store = Ext.StoreMgr.lookup(store);
            store.on({
                scope: this,
                datachanged: this.refresh,
                add: this.delayRefresh,
                remove: this.delayRefresh,
                update: this.delayRefresh,
                clear: this.refresh
            });
        }
        this.store = store;
        if(store && !initial){
            this.refresh();
        }
    },

    onSwfReady : function(isReset){
        Ext.chart.Chart.superclass.onSwfReady.call(this, isReset);
        var ref;
        this.swf.setType(this.type);

        if(this.chartStyle){
            this.setStyles(Ext.apply({}, this.extraStyle, this.chartStyle));
        }

        if(this.categoryNames){
            this.setCategoryNames(this.categoryNames);
        }

        if(this.tipRenderer){
            ref = this.getFunctionRef(this.tipRenderer);
            this.setTipRenderer(ref.fn, ref.scope);
        }
        if(this.legendRenderer){
            ref = this.getFunctionRef(this.legendRenderer);
            this.setLegendRenderer(ref.fn, ref.scope);
        }
        if(!isReset){
            this.bindStore(this.store, true);
        }
        this.refresh.defer(10, this);
    },

    delayRefresh : function(){
        if(!this.refreshTask){
            this.refreshTask = new Ext.util.DelayedTask(this.refresh, this);
        }
        this.refreshTask.delay(this.refreshBuffer);
    },

    refresh : function(){
        if(this.fireEvent('beforerefresh', this) !== false){
            var styleChanged = false;
            // convert the store data into something YUI charts can understand
            var data = [], rs = this.store.data.items;
            for(var j = 0, len = rs.length; j < len; j++){
                data[j] = rs[j].data;
            }
            //make a copy of the series definitions so that we aren't
            //editing them directly.
            var dataProvider = [];
            var seriesCount = 0;
            var currentSeries = null;
            var i = 0;
            if(this.series){
                seriesCount = this.series.length;
                for(i = 0; i < seriesCount; i++){
                    currentSeries = this.series[i];
                    var clonedSeries = {};
                    for(var prop in currentSeries){
                        if(prop == "style" && currentSeries.style !== null){
                            clonedSeries.style = Ext.encode(currentSeries.style);
                            styleChanged = true;
                            //we don't want to modify the styles again next time
                            //so null out the style property.
                            // this causes issues
                            // currentSeries.style = null;
                        } else{
                            clonedSeries[prop] = currentSeries[prop];
                        }
                    }
                    dataProvider.push(clonedSeries);
                }
            }

            if(seriesCount > 0){
                for(i = 0; i < seriesCount; i++){
                    currentSeries = dataProvider[i];
                    if(!currentSeries.type){
                        currentSeries.type = this.type;
                    }
                    currentSeries.dataProvider = data;
                }
            } else{
                dataProvider.push({type: this.type, dataProvider: data});
            }
            this.swf.setDataProvider(dataProvider);
            if(this.seriesStyles){
                this.setSeriesStyles(this.seriesStyles);
            }
            this.fireEvent('refresh', this);
        }
    },

    // private
    createFnProxy : function(fn){
        var fnName = 'extFnProxy' + (++Ext.chart.Chart.PROXY_FN_ID);
        Ext.chart.Chart.proxyFunction[fnName] = fn;
        return 'Ext.chart.Chart.proxyFunction.' + fnName;
    },

    // private
    removeFnProxy : function(fn){
        if(!Ext.isEmpty(fn)){
            fn = fn.replace('Ext.chart.Chart.proxyFunction.', '');
            delete Ext.chart.Chart.proxyFunction[fn];
        }
    },

    // private
    getFunctionRef : function(val){
        if(Ext.isFunction(val)){
            return {
                fn: val,
                scope: this
            };
        }else{
            return {
                fn: val.fn,
                scope: val.scope || this
            }
        }
    },

    // private
    onDestroy: function(){
        if (this.refreshTask && this.refreshTask.cancel){
            this.refreshTask.cancel();
        }
        Ext.chart.Chart.superclass.onDestroy.call(this);
        this.bindStore(null);
        this.removeFnProxy(this.tipFnName);
        this.removeFnProxy(this.legendFnName);
    }
});
Ext.reg('chart', Ext.chart.Chart);
Ext.chart.Chart.PROXY_FN_ID = 0;
Ext.chart.Chart.proxyFunction = {};

/**
 * Sets the url to load the chart from. This should be set to a local resource.
 * @static
 * @type String
 */
Ext.chart.Chart.CHART_URL = 'http:/' + '/yui.yahooapis.com/2.8.0/build/charts/assets/charts.swf';

/**
 * @class Ext.chart.PieChart
 * @extends Ext.chart.Chart
 * @constructor
 * @xtype piechart
 */
Ext.chart.PieChart = Ext.extend(Ext.chart.Chart, {
    type: 'pie',

    onSwfReady : function(isReset){
        Ext.chart.PieChart.superclass.onSwfReady.call(this, isReset);

        this.setDataField(this.dataField);
        this.setCategoryField(this.categoryField);
    },

    setDataField : function(field){
        this.dataField = field;
        this.swf.setDataField(field);
    },

    setCategoryField : function(field){
        this.categoryField = field;
        this.swf.setCategoryField(field);
    }
});
Ext.reg('piechart', Ext.chart.PieChart);

/**
 * @class Ext.chart.CartesianChart
 * @extends Ext.chart.Chart
 * @constructor
 * @xtype cartesianchart
 */
Ext.chart.CartesianChart = Ext.extend(Ext.chart.Chart, {
    onSwfReady : function(isReset){
        Ext.chart.CartesianChart.superclass.onSwfReady.call(this, isReset);
        this.labelFn = [];
        if(this.xField){
            this.setXField(this.xField);
        }
        if(this.yField){
            this.setYField(this.yField);
        }
        if(this.xAxis){
            this.setXAxis(this.xAxis);
        }
        if(this.xAxes){
            this.setXAxes(this.xAxes);
        }
        if(this.yAxis){
            this.setYAxis(this.yAxis);
        }
        if(this.yAxes){
            this.setYAxes(this.yAxes);
        }
        if(Ext.isDefined(this.constrainViewport)){
            this.swf.setConstrainViewport(this.constrainViewport);
        }
    },

    setXField : function(value){
        this.xField = value;
        this.swf.setHorizontalField(value);
    },

    setYField : function(value){
        this.yField = value;
        this.swf.setVerticalField(value);
    },

    setXAxis : function(value){
        this.xAxis = this.createAxis('xAxis', value);
        this.swf.setHorizontalAxis(this.xAxis);
    },

    setXAxes : function(value){
        var axis;
        for(var i = 0; i < value.length; i++) {
            axis = this.createAxis('xAxis' + i, value[i]);
            this.swf.setHorizontalAxis(axis);
        }
    },

    setYAxis : function(value){
        this.yAxis = this.createAxis('yAxis', value);
        this.swf.setVerticalAxis(this.yAxis);
    },

    setYAxes : function(value){
        var axis;
        for(var i = 0; i < value.length; i++) {
            axis = this.createAxis('yAxis' + i, value[i]);
            this.swf.setVerticalAxis(axis);
        }
    },

    createAxis : function(axis, value){
        var o = Ext.apply({}, value),
            ref,
            old;

        if(this[axis]){
            old = this[axis].labelFunction;
            this.removeFnProxy(old);
            this.labelFn.remove(old);
        }
        if(o.labelRenderer){
            ref = this.getFunctionRef(o.labelRenderer);
            o.labelFunction = this.createFnProxy(function(v){
                return ref.fn.call(ref.scope, v);
            });
            delete o.labelRenderer;
            this.labelFn.push(o.labelFunction);
        }
        if(axis.indexOf('xAxis') > -1 && o.position == 'left'){
            o.position = 'bottom';
        }
        return o;
    },

    onDestroy : function(){
        Ext.chart.CartesianChart.superclass.onDestroy.call(this);
        Ext.each(this.labelFn, function(fn){
            this.removeFnProxy(fn);
        }, this);
    }
});
Ext.reg('cartesianchart', Ext.chart.CartesianChart);

/**
 * @class Ext.chart.LineChart
 * @extends Ext.chart.CartesianChart
 * @constructor
 * @xtype linechart
 */
Ext.chart.LineChart = Ext.extend(Ext.chart.CartesianChart, {
    type: 'line'
});
Ext.reg('linechart', Ext.chart.LineChart);

/**
 * @class Ext.chart.ColumnChart
 * @extends Ext.chart.CartesianChart
 * @constructor
 * @xtype columnchart
 */
Ext.chart.ColumnChart = Ext.extend(Ext.chart.CartesianChart, {
    type: 'column'
});
Ext.reg('columnchart', Ext.chart.ColumnChart);

/**
 * @class Ext.chart.StackedColumnChart
 * @extends Ext.chart.CartesianChart
 * @constructor
 * @xtype stackedcolumnchart
 */
Ext.chart.StackedColumnChart = Ext.extend(Ext.chart.CartesianChart, {
    type: 'stackcolumn'
});
Ext.reg('stackedcolumnchart', Ext.chart.StackedColumnChart);

/**
 * @class Ext.chart.BarChart
 * @extends Ext.chart.CartesianChart
 * @constructor
 * @xtype barchart
 */
Ext.chart.BarChart = Ext.extend(Ext.chart.CartesianChart, {
    type: 'bar'
});
Ext.reg('barchart', Ext.chart.BarChart);

/**
 * @class Ext.chart.StackedBarChart
 * @extends Ext.chart.CartesianChart
 * @constructor
 * @xtype stackedbarchart
 */
Ext.chart.StackedBarChart = Ext.extend(Ext.chart.CartesianChart, {
    type: 'stackbar'
});
Ext.reg('stackedbarchart', Ext.chart.StackedBarChart);

/**
 * @class Ext.chart.Axis
 * Defines a CartesianChart's vertical or horizontal axis.
 * @constructor
 */
Ext.chart.Axis = function(config){
    Ext.apply(this, config);
};

Ext.chart.Axis.prototype =
{

/**
     * The type of axis.
     *
     * @property type
     * @type String
     */
    type: null,

/**
     * The direction in which the axis is drawn. May be "horizontal" or "vertical".
     *
     * @property orientation
     * @type String
     */
    orientation: "horizontal",

/**
     * If true, the items on the axis will be drawn in opposite direction.
     *
     * @property reverse
     * @type Boolean
     */
    reverse: false,

/**
     * A string reference to the globally-accessible function that may be called to
     * determine each of the label values for this axis.
     *
     * @property labelFunction
     * @type String
     */
    labelFunction: null,

/**
     * If true, labels that overlap previously drawn labels on the axis will be hidden.
     *
     * @property hideOverlappingLabels
     * @type Boolean
     */
    hideOverlappingLabels: true,

/**
     * The space, in pixels, between labels on an axis.
     *
     * @property labelSpacing
     * @type Number
     */
    labelSpacing: 2
};

/**
 * @class Ext.chart.NumericAxis
 * @extends Ext.chart.Axis
 * A type of axis whose units are measured in numeric values.
 * @constructor
 */
Ext.chart.NumericAxis = Ext.extend(Ext.chart.Axis, {
    type: "numeric",

/**
     * The minimum value drawn by the axis. If not set explicitly, the axis
     * minimum will be calculated automatically.
     *
     * @property minimum
     * @type Number
     */
    minimum: NaN,

/**
     * The maximum value drawn by the axis. If not set explicitly, the axis
     * maximum will be calculated automatically.
     *
     * @property maximum
     * @type Number
     */
    maximum: NaN,

/**
     * The spacing between major intervals on this axis.
     *
     * @property majorUnit
     * @type Number
     */
    majorUnit: NaN,

/**
     * The spacing between minor intervals on this axis.
     *
     * @property minorUnit
     * @type Number
     */
    minorUnit: NaN,

/**
     * If true, the labels, ticks, gridlines, and other objects will snap to the
     * nearest major or minor unit. If false, their position will be based on
     * the minimum value.
     *
     * @property snapToUnits
     * @type Boolean
     */
    snapToUnits: true,

/**
     * If true, and the bounds are calculated automatically, either the minimum
     * or maximum will be set to zero.
     *
     * @property alwaysShowZero
     * @type Boolean
     */
    alwaysShowZero: true,

/**
     * The scaling algorithm to use on this axis. May be "linear" or
     * "logarithmic".
     *
     * @property scale
     * @type String
     */
    scale: "linear",

/**
     * Indicates whether to round the major unit.
     *
     * @property roundMajorUnit
     * @type Boolean
     */
    roundMajorUnit: true,

/**
     * Indicates whether to factor in the size of the labels when calculating a
     * major unit.
     *
     * @property calculateByLabelSize
     * @type Boolean
     */
    calculateByLabelSize: true,

/**
     * Indicates the position of the axis relative to the chart
     *
     * @property position
     * @type String
     */
    position: 'left',

/**
     * Indicates whether to extend maximum beyond data's maximum to the nearest
     * majorUnit.
     *
     * @property adjustMaximumByMajorUnit
     * @type Boolean
     */
    adjustMaximumByMajorUnit: true,

/**
     * Indicates whether to extend the minimum beyond data's minimum to the
     * nearest majorUnit.
     *
     * @property adjustMinimumByMajorUnit
     * @type Boolean
     */
    adjustMinimumByMajorUnit: true

});

/**
 * @class Ext.chart.TimeAxis
 * @extends Ext.chart.Axis
 * A type of axis whose units are measured in time-based values.
 * @constructor
 */
Ext.chart.TimeAxis = Ext.extend(Ext.chart.Axis, {
    type: "time",

/**
     * The minimum value drawn by the axis. If not set explicitly, the axis
     * minimum will be calculated automatically.
     *
     * @property minimum
     * @type Date
     */
    minimum: null,

/**
     * The maximum value drawn by the axis. If not set explicitly, the axis
     * maximum will be calculated automatically.
     *
     * @property maximum
     * @type Number
     */
    maximum: null,

/**
     * The spacing between major intervals on this axis.
     *
     * @property majorUnit
     * @type Number
     */
    majorUnit: NaN,

/**
     * The time unit used by the majorUnit.
     *
     * @property majorTimeUnit
     * @type String
     */
    majorTimeUnit: null,

/**
     * The spacing between minor intervals on this axis.
     *
     * @property majorUnit
     * @type Number
     */
    minorUnit: NaN,

/**
     * The time unit used by the minorUnit.
     *
     * @property majorTimeUnit
     * @type String
     */
    minorTimeUnit: null,

/**
     * If true, the labels, ticks, gridlines, and other objects will snap to the
     * nearest major or minor unit. If false, their position will be based on
     * the minimum value.
     *
     * @property snapToUnits
     * @type Boolean
     */
    snapToUnits: true,

/**
     * Series that are stackable will only stack when this value is set to true.
     *
     * @property stackingEnabled
     * @type Boolean
     */
    stackingEnabled: false,

/**
     * Indicates whether to factor in the size of the labels when calculating a
     * major unit.
     *
     * @property calculateByLabelSize
     * @type Boolean
     */
    calculateByLabelSize: true

});

/**
 * @class Ext.chart.CategoryAxis
 * @extends Ext.chart.Axis
 * A type of axis that displays items in categories.
 * @constructor
 */
Ext.chart.CategoryAxis = Ext.extend(Ext.chart.Axis, {
    type: "category",

/**
     * A list of category names to display along this axis.
     *
     * @property categoryNames
     * @type Array
     */
    categoryNames: null,

/**
     * Indicates whether or not to calculate the number of categories (ticks and
     * labels) when there is not enough room to display all labels on the axis.
     * If set to true, the axis will determine the number of categories to plot.
     * If not, all categories will be plotted.
     *
     * @property calculateCategoryCount
     * @type Boolean
     */
    calculateCategoryCount: false

});

/**
 * @class Ext.chart.Series
 * Series class for the charts widget.
 * @constructor
 */
Ext.chart.Series = function(config) { Ext.apply(this, config); };

Ext.chart.Series.prototype =
{

/**
     * The type of series.
     *
     * @property type
     * @type String
     */
    type: null,

/**
     * The human-readable name of the series.
     *
     * @property displayName
     * @type String
     */
    displayName: null
};

/**
 * @class Ext.chart.CartesianSeries
 * @extends Ext.chart.Series
 * CartesianSeries class for the charts widget.
 * @constructor
 */
Ext.chart.CartesianSeries = Ext.extend(Ext.chart.Series, {

/**
     * The field used to access the x-axis value from the items from the data
     * source.
     *
     * @property xField
     * @type String
     */
    xField: null,

/**
     * The field used to access the y-axis value from the items from the data
     * source.
     *
     * @property yField
     * @type String
     */
    yField: null,

/**
     * False to not show this series in the legend. Defaults to true.
     *
     * @property showInLegend
     * @type Boolean
     */
    showInLegend: true,

/**
     * Indicates which axis the series will bind to
     *
     * @property axis
     * @type String
     */
    axis: 'primary'
});

/**
 * @class Ext.chart.ColumnSeries
 * @extends Ext.chart.CartesianSeries
 * ColumnSeries class for the charts widget.
 * @constructor
 */
Ext.chart.ColumnSeries = Ext.extend(Ext.chart.CartesianSeries, {
    type: "column"
});

/**
 * @class Ext.chart.LineSeries
 * @extends Ext.chart.CartesianSeries
 * LineSeries class for the charts widget.
 * @constructor
 */
Ext.chart.LineSeries = Ext.extend(Ext.chart.CartesianSeries, {
    type: "line"
});

/**
 * @class Ext.chart.BarSeries
 * @extends Ext.chart.CartesianSeries
 * BarSeries class for the charts widget.
 * @constructor
 */
Ext.chart.BarSeries = Ext.extend(Ext.chart.CartesianSeries, {
    type: "bar"
});

/**
 * @class Ext.chart.PieSeries
 * @extends Ext.chart.Series
 * PieSeries class for the charts widget.
 * @constructor
 */
Ext.chart.PieSeries = Ext.extend(Ext.chart.Series, {
    type: "pie",
    dataField: null,
    categoryField: null
});


The source code

/*!
 * licensing@extjs.com
 * http://www.extjs.com/license
 */

/**
 * @class Ext.form.Checkbox
 * @extends Ext.form.Field
 * Single checkbox field.  Can be used as a direct replacement for traditional checkbox fields.
 * @constructor
 * Creates a new Checkbox
 * @param {Object} config Configuration options
 * @xtype checkbox
 */
Ext.form.Checkbox = Ext.extend(Ext.form.Field,  {

/**
     * @cfg {String} focusClass The CSS class to use when the checkbox receives focus (defaults to undefined)
     */
    focusClass : undefined,

/**
     * @cfg {String} fieldClass The default CSS class for the checkbox (defaults to 'x-form-field')
     */
    fieldClass : 'x-form-field',

/**
     * @cfg {Boolean} checked true if the checkbox should render initially checked (defaults to false)
     */
    checked : false,

/**
     * @cfg {String} boxLabel The text that appears beside the checkbox
     */
    boxLabel: ' ',

/**
     * @cfg {String/Object} autoCreate A DomHelper element spec, or true for a default element spec (defaults to
     * {tag: 'input', type: 'checkbox', autocomplete: 'off'})
     */
    defaultAutoCreate : { tag: 'input', type: 'checkbox', autocomplete: 'off'},

/**
     * @cfg {String} boxLabel The text that appears beside the checkbox
     */

/**
     * @cfg {String} inputValue The value that should go into the generated input element's value attribute
     */

/**
     * @cfg {Function} handler A function called when the {@link #checked} value changes (can be used instead of
     * handling the check event). The handler is passed the following parameters:
     *

     *
  • checkbox : Ext.form.Checkbox
    The Checkbox being toggled.
    •
     *
  • checked : Boolean
    The new checked state of the checkbox.
    •
     *

     */

/**
     * @cfg {Object} scope An object to use as the scope ('this' reference) of the {@link #handler} function
     * (defaults to this Checkbox).
     */

    // private
    actionMode : 'wrap',

    // private
    initComponent : function(){
        Ext.form.Checkbox.superclass.initComponent.call(this);
        this.addEvents(

/**
             * @event check
             * Fires when the checkbox is checked or unchecked.
             * @param {Ext.form.Checkbox} this This checkbox
             * @param {Boolean} checked The new checked value
             */
            'check'
        );
    },

    // private
    onResize : function(){
        Ext.form.Checkbox.superclass.onResize.apply(this, arguments);
        if(!this.boxLabel && !this.fieldLabel){
            this.el.alignTo(this.wrap, 'c-c');
        }
    },

    // private
    initEvents : function(){
        Ext.form.Checkbox.superclass.initEvents.call(this);
        this.mon(this.el, {
            scope: this,
            click: this.onClick,
            change: this.onClick
        });
    },

/**
     * @hide
     * Overridden and disabled. The editor element does not support standard valid/invalid marking.
     * @method
     */
    markInvalid : Ext.emptyFn,

/**
     * @hide
     * Overridden and disabled. The editor element does not support standard valid/invalid marking.
     * @method
     */
    clearInvalid : Ext.emptyFn,

    // private
    onRender : function(ct, position){
        Ext.form.Checkbox.superclass.onRender.call(this, ct, position);
        if(this.inputValue !== undefined){
            this.el.dom.value = this.inputValue;
        }
        this.wrap = this.el.wrap({cls: 'x-form-check-wrap'});
        if(this.boxLabel){
            this.wrap.createChild({tag: 'label', htmlFor: this.el.id, cls: 'x-form-cb-label', html: this.boxLabel});
        }
        if(this.checked){
            this.setValue(true);
        }else{
            this.checked = this.el.dom.checked;
        }
        // Need to repaint for IE, otherwise positioning is broken
        if(Ext.isIE){
            this.wrap.repaint();
        }
        this.resizeEl = this.positionEl = this.wrap;
    },

    // private
    onDestroy : function(){
        Ext.destroy(this.wrap);
        Ext.form.Checkbox.superclass.onDestroy.call(this);
    },

    // private
    initValue : function() {
        this.originalValue = this.getValue();
    },

/**
     * Returns the checked state of the checkbox.
     * @return {Boolean} True if checked, else false
     */
    getValue : function(){
        if(this.rendered){
            return this.el.dom.checked;
        }
        return this.checked;
    },

    // private
    onClick : function(){
        if(this.el.dom.checked != this.checked){
            this.setValue(this.el.dom.checked);
        }
    },

/**
     * Sets the checked state of the checkbox, fires the 'check' event, and calls a
     * {@link #handler} (if configured).
     * @param {Boolean/String} checked The following values will check the checkbox:
     * true, 'true', '1', or 'on'. Any other value will uncheck the checkbox.
     * @return {Ext.form.Field} this
     */
    setValue : function(v){
        var checked = this.checked ;
        this.checked = (v === true || v === 'true' || v == '1' || String(v).toLowerCase() == 'on');
        if(this.rendered){
            this.el.dom.checked = this.checked;
            this.el.dom.defaultChecked = this.checked;
        }
        if(checked != this.checked){
            this.fireEvent('check', this, this.checked);
            if(this.handler){
                this.handler.call(this.scope || this, this, this.checked);
            }
        }
        return this;
    }
});
Ext.reg('checkbox', Ext.form.Checkbox);


The source code

/*!
 * licensing@extjs.com
 * http://www.extjs.com/license
 */

/**
 * @class Ext.form.CheckboxGroup
 * @extends Ext.form.Field
 *
A grouping container for {@link Ext.form.Checkbox} controls.

 *
Sample usage:

 *

var myCheckboxGroup = new Ext.form.CheckboxGroup({
    id:'myGroup',
    xtype: 'checkboxgroup',
    fieldLabel: 'Single Column',
    itemCls: 'x-check-group-alt',
    // Put all controls in a single column with width 100%
    columns: 1,
    items: [
        {boxLabel: 'Item 1', name: 'cb-col-1'},
        {boxLabel: 'Item 2', name: 'cb-col-2', checked: true},
        {boxLabel: 'Item 3', name: 'cb-col-3'}
    ]
});
 *

 * @constructor
 * Creates a new CheckboxGroup
 * @param {Object} config Configuration options
 * @xtype checkboxgroup
 */
Ext.form.CheckboxGroup = Ext.extend(Ext.form.Field, {

/**
     * @cfg {Array} items An Array of {@link Ext.form.Checkbox Checkbox}es or Checkbox config objects
     * to arrange in the group.
     */

/**
     * @cfg {String/Number/Array} columns Specifies the number of columns to use when displaying grouped
     * checkbox/radio controls using automatic layout.  This config can take several types of values:
     *
  • 'auto' :
    The controls will be rendered one per column on one row and the width
     * of each column will be evenly distributed based on the width of the overall field container. This is the default.
    •
     *
  • Number :
    If you specific a number (e.g., 3) that number of columns will be
     * created and the contained controls will be automatically distributed based on the value of {@link #vertical}.
    •
     *
  • Array : Object
    You can also specify an array of column widths, mixing integer
     * (fixed width) and float (percentage width) values as needed (e.g., [100, .25, .75]). Any integer values will
     * be rendered first, then any float values will be calculated as a percentage of the remaining space. Float
     * values do not have to add up to 1 (100%) although if you want the controls to take up the entire field
     * container you should do so.

     */
    columns : 'auto',

/**
     * @cfg {Boolean} vertical True to distribute contained controls across columns, completely filling each column
     * top to bottom before starting on the next column.  The number of controls in each column will be automatically
     * calculated to keep columns as even as possible.  The default value is false, so that controls will be added
     * to columns one at a time, completely filling each row left to right before starting on the next row.
     */
    vertical : false,

/**
     * @cfg {Boolean} allowBlank False to validate that at least one item in the group is checked (defaults to true).
     * If no items are selected at validation time, {@link @blankText} will be used as the error text.
     */
    allowBlank : true,

/**
     * @cfg {String} blankText Error text to display if the {@link #allowBlank} validation fails (defaults to "You must
     * select at least one item in this group")
     */
    blankText : "You must select at least one item in this group",

    // private
    defaultType : 'checkbox',

    // private
    groupCls : 'x-form-check-group',

    // private
    initComponent: function(){
        this.addEvents(

/**
             * @event change
             * Fires when the state of a child checkbox changes.
             * @param {Ext.form.CheckboxGroup} this
             * @param {Array} checked An array containing the checked boxes.
             */
            'change'
        );
        this.on('change', this.validate, this);
        Ext.form.CheckboxGroup.superclass.initComponent.call(this);
    },

    // private
    onRender : function(ct, position){
        if(!this.el){
            var panelCfg = {
                autoEl: {
                    id: this.id
                },
                cls: this.groupCls,
                layout: 'column',
                renderTo: ct,
                bufferResize: false // Default this to false, since it doesn't really have a proper ownerCt.
            };
            var colCfg = {
                xtype: 'container',
                defaultType: this.defaultType,
                layout: 'form',
                defaults: {
                    hideLabel: true,
                    anchor: '100%'
                }
            };

            if(this.items[0].items){

                // The container has standard ColumnLayout configs, so pass them in directly

                Ext.apply(panelCfg, {
                    layoutConfig: {columns: this.items.length},
                    defaults: this.defaults,
                    items: this.items
                });
                for(var i=0, len=this.items.length; i0 && i%rows==0){
                            ri++;
                        }
                        if(this.items[i].fieldLabel){
                            this.items[i].hideLabel = false;
                        }
                        cols[ri].items.push(this.items[i]);
                    };
                }else{
                    for(var i=0, len=this.items.length; i/**
     * Runs CheckboxGroup's validations and returns an array of any errors. The only error by default
     * is if allowBlank is set to true and no items are checked.
     * @return {Array} Array of all validation errors
     */
    getErrors: function() {
        var errors = Ext.form.CheckboxGroup.superclass.getErrors.apply(this, arguments);

        if (!this.allowBlank) {
            var blank = true;

            this.eachItem(function(f){
                if (f.checked) {
                    return (blank = false);
                }
            });

            if (blank) errors.push(this.blankText);
        }

        return errors;
    },

    // private
    isDirty: function(){
        //override the behaviour to check sub items.
        if (this.disabled || !this.rendered) {
            return false;
        }

        var dirty = false;

        this.eachItem(function(item){
            if(item.isDirty()){
                dirty = true;
                return false;
            }
        });

        return dirty;
    },

    // private
    setReadOnly : function(readOnly){
        if(this.rendered){
            this.eachItem(function(item){
                item.setReadOnly(readOnly);
            });
        }
        this.readOnly = readOnly;
    },

    // private
    onDisable : function(){
        this.eachItem(function(item){
            item.disable();
        });
    },

    // private
    onEnable : function(){
        this.eachItem(function(item){
            item.enable();
        });
    },

    // private
    onResize : function(w, h){
        this.panel.setSize(w, h);
        this.panel.doLayout();
    },

    // inherit docs from Field
    reset : function(){
        if (this.originalValue) {
            // Clear all items
            this.eachItem(function(c){
                if(c.setValue){
                    c.setValue(false);
                    c.originalValue = c.getValue();
                }
            });
            // Set items stored in originalValue, ugly - set a flag to reset the originalValue
            // during the horrible onSetValue.  This will allow trackResetOnLoad to function.
            this.resetOriginal = true;
            this.setValue(this.originalValue);
            delete this.resetOriginal;
        } else {
            this.eachItem(function(c){
                if(c.reset){
                    c.reset();
                }
            });
        }
        // Defer the clearInvalid so if BaseForm's collection is being iterated it will be called AFTER it is complete.
        // Important because reset is being called on both the group and the individual items.
        (function() {
            this.clearInvalid();
        }).defer(50, this);
    },

/**
     * {@link Ext.form.Checkbox#setValue Set the value(s)} of an item or items
     * in the group. Examples illustrating how this method may be called:
     *

// call with name and value
myCheckboxGroup.setValue('cb-col-1', true);
// call with an array of boolean values
myCheckboxGroup.setValue([true, false, false]);
// call with an object literal specifying item:value pairs
myCheckboxGroup.setValue({
    'cb-col-2': false,
    'cb-col-3': true
});
// use comma separated string to set items with name to true (checked)
myCheckboxGroup.setValue('cb-col-1,cb-col-3');
     *

     * See {@link Ext.form.Checkbox#setValue} for additional information.
     * @param {Mixed} id The checkbox to check, or as described by example shown.
     * @param {Boolean} value (optional) The value to set the item.
     * @return {Ext.form.CheckboxGroup} this
     */
    setValue: function(){
        if(this.rendered){
            this.onSetValue.apply(this, arguments);
        }else{
            this.buffered = true;
            this.value = arguments;
        }
        return this;
    },

    /**
     * @private
     * Sets the values of one or more of the items within the CheckboxGroup
     * @param {String|Array|Object} id Can take multiple forms. Can be optionally:
     *

     *
  • An ID string to be used with a second argument
    •
     *
  • An array of the form ['some', 'list', 'of', 'ids', 'to', 'mark', 'checked']
    •
     *
  • An array in the form [true, true, false, true, false] etc, where each item relates to the check status of
     *       the checkbox at the same index
    •
     *
  • An object containing ids of the checkboxes as keys and check values as properties
    •
     *

     * @param {String} value The value to set the field to if the first argument was a string
     */
    onSetValue: function(id, value){
        if(arguments.length == 1){
            if(Ext.isArray(id)){
                Ext.each(id, function(val, idx){
                    if (Ext.isObject(val) && val.setValue){ // array of checkbox components to be checked
                        val.setValue(true);
                        if (this.resetOriginal === true) {
                            val.originalValue = val.getValue();
                        }
                    } else { // an array of boolean values
                        var item = this.items.itemAt(idx);
                        if(item){
                            item.setValue(val);
                        }
                    }
                }, this);
            }else if(Ext.isObject(id)){
                // set of name/value pairs
                for(var i in id){
                    var f = this.getBox(i);
                    if(f){
                        f.setValue(id[i]);
                    }
                }
            }else{
                this.setValueForItem(id);
            }
        }else{
            var f = this.getBox(id);
            if(f){
                f.setValue(value);
            }
        }
    },

    // private
    beforeDestroy: function(){
        Ext.destroy(this.panel);
        Ext.form.CheckboxGroup.superclass.beforeDestroy.call(this);

    },

    setValueForItem : function(val){
        val = String(val).split(',');
        this.eachItem(function(item){
            if(val.indexOf(item.inputValue)> -1){
                item.setValue(true);
            }
        });
    },

    // private
    getBox : function(id){
        var box = null;
        this.eachItem(function(f){
            if(id == f || f.dataIndex == id || f.id == id || f.getName() == id){
                box = f;
                return false;
            }
        });
        return box;
    },

/**
     * Gets an array of the selected {@link Ext.form.Checkbox} in the group.
     * @return {Array} An array of the selected checkboxes.
     */
    getValue : function(){
        var out = [];
        this.eachItem(function(item){
            if(item.checked){
                out.push(item);
            }
        });
        return out;
    },

    /**
     * @private
     * Convenience function which passes the given function to every item in the composite
     * @param {Function} fn The function to call
     * @param {Object} scope Optional scope object
     */
    eachItem: function(fn, scope) {
        if(this.items && this.items.each){
            this.items.each(fn, scope || this);
        }
    },

/**
     * @cfg {String} name
     * @hide
     */

/**
     * @method getRawValue
     * @hide
     */
    getRawValue : Ext.emptyFn,

/**
     * @method setRawValue
     * @hide
     */
    setRawValue : Ext.emptyFn

});

Ext.reg('checkboxgroup', Ext.form.CheckboxGroup);


The source code

/*!
 * licensing@extjs.com
 * http://www.extjs.com/license
 */

/**
 * @class Ext.grid.CheckboxSelectionModel
 * @extends Ext.grid.RowSelectionModel
 * A custom selection model that renders a column of checkboxes that can be toggled to select or deselect rows.
 * @constructor
 * @param {Object} config The configuration options
 */
Ext.grid.CheckboxSelectionModel = Ext.extend(Ext.grid.RowSelectionModel, {

/**
     * @cfg {Boolean} checkOnly true if rows can only be selected by clicking on the
     * checkbox column (defaults to false).
     */

/**
     * @cfg {String} header Any valid text or HTML fragment to display in the header cell for the
     * checkbox column.  Defaults to:

     * '<div class="x-grid3-hd-checker">&#160;</div>'
     *

     * The default CSS class of 'x-grid3-hd-checker' displays a checkbox in the header
     * and provides support for automatic check all/none behavior on header click. This string
     * can be replaced by any valid HTML fragment, including a simple text string (e.g.,
     * 'Select Rows'), but the automatic check all/none behavior will only work if the
     * 'x-grid3-hd-checker' class is supplied.
     */
    header : '

',

/**
     * @cfg {Number} width The default width in pixels of the checkbox column (defaults to 20).
     */
    width : 20,

/**
     * @cfg {Boolean} sortable true if the checkbox column is sortable (defaults to
     * false).
     */
    sortable : false,

    // private
    menuDisabled : true,
    fixed : true,
    hideable: false,
    dataIndex : '',
    id : 'checker',

    constructor : function(){
        Ext.grid.CheckboxSelectionModel.superclass.constructor.apply(this, arguments);

        if(this.checkOnly){
            this.handleMouseDown = Ext.emptyFn;
        }
    },

    // private
    initEvents : function(){
        Ext.grid.CheckboxSelectionModel.superclass.initEvents.call(this);
        this.grid.on('render', function(){
            var view = this.grid.getView();
            view.mainBody.on('mousedown', this.onMouseDown, this);
            Ext.fly(view.innerHd).on('mousedown', this.onHdMouseDown, this);

        }, this);
    },

    // If handleMouseDown was called from another event (enableDragDrop), set a flag so
    // onMouseDown does not process it a second time
    handleMouseDown : function() {
        Ext.grid.CheckboxSelectionModel.superclass.handleMouseDown.apply(this, arguments);
        this.mouseHandled = true;
    },

    // private
    onMouseDown : function(e, t){
        if(e.button === 0 && t.className == 'x-grid3-row-checker'){ // Only fire if left-click
            e.stopEvent();
            var row = e.getTarget('.x-grid3-row');

            // mouseHandled flag check for a duplicate selection (handleMouseDown) call
            if(!this.mouseHandled && row){
                var index = row.rowIndex;
                if(this.isSelected(index)){
                    this.deselectRow(index);
                }else{
                    this.selectRow(index, true);
                }
            }
        }
        this.mouseHandled = false;
    },

    // private
    onHdMouseDown : function(e, t){
        if(t.className == 'x-grid3-hd-checker'){
            e.stopEvent();
            var hd = Ext.fly(t.parentNode);
            var isChecked = hd.hasClass('x-grid3-hd-checker-on');
            if(isChecked){
                hd.removeClass('x-grid3-hd-checker-on');
                this.clearSelections();
            }else{
                hd.addClass('x-grid3-hd-checker-on');
                this.selectAll();
            }
        }
    },

    // private
    renderer : function(v, p, record){
        return '

';
    }
});


The source code

/*!
 * licensing@extjs.com
 * http://www.extjs.com/license
 */

/**
 * @class Ext.menu.CheckItem
 * @extends Ext.menu.Item
 * Adds a menu item that contains a checkbox by default, but can also be part of a radio group.
 * @constructor
 * Creates a new CheckItem
 * @param {Object} config Configuration options
 * @xtype menucheckitem
 */
Ext.menu.CheckItem = Ext.extend(Ext.menu.Item, {

/**
     * @cfg {String} group
     * All check items with the same group name will automatically be grouped into a single-select
     * radio button group (defaults to '')
     */

/**
     * @cfg {String} itemCls The default CSS class to use for check items (defaults to "x-menu-item x-menu-check-item")
     */
    itemCls : "x-menu-item x-menu-check-item",

/**
     * @cfg {String} groupClass The default CSS class to use for radio group check items (defaults to "x-menu-group-item")
     */
    groupClass : "x-menu-group-item",

/**
     * @cfg {Boolean} checked True to initialize this checkbox as checked (defaults to false).  Note that
     * if this checkbox is part of a radio group (group = true) only the last item in the group that is
     * initialized with checked = true will be rendered as checked.
     */
    checked: false,

    // private
    ctype: "Ext.menu.CheckItem",

    initComponent : function(){
        Ext.menu.CheckItem.superclass.initComponent.call(this);
        this.addEvents(

/**
             * @event beforecheckchange
             * Fires before the checked value is set, providing an opportunity to cancel if needed
             * @param {Ext.menu.CheckItem} this
             * @param {Boolean} checked The new checked value that will be set
             */
            "beforecheckchange" ,

/**
             * @event checkchange
             * Fires after the checked value has been set
             * @param {Ext.menu.CheckItem} this
             * @param {Boolean} checked The checked value that was set
             */
            "checkchange"
        );

/**
         * A function that handles the checkchange event.  The function is undefined by default, but if an implementation
         * is provided, it will be called automatically when the checkchange event fires.
         * @param {Ext.menu.CheckItem} this
         * @param {Boolean} checked The checked value that was set
         * @method checkHandler
         */
        if(this.checkHandler){
            this.on('checkchange', this.checkHandler, this.scope);
        }
        Ext.menu.MenuMgr.registerCheckable(this);
    },

    // private
    onRender : function(c){
        Ext.menu.CheckItem.superclass.onRender.apply(this, arguments);
        if(this.group){
            this.el.addClass(this.groupClass);
        }
        if(this.checked){
            this.checked = false;
            this.setChecked(true, true);
        }
    },

    // private
    destroy : function(){
        Ext.menu.MenuMgr.unregisterCheckable(this);
        Ext.menu.CheckItem.superclass.destroy.apply(this, arguments);
    },

/**
     * Set the checked state of this item
     * @param {Boolean} checked The new checked value
     * @param {Boolean} suppressEvent (optional) True to prevent the checkchange event from firing (defaults to false)
     */
    setChecked : function(state, suppressEvent){
        var suppress = suppressEvent === true;
        if(this.checked != state && (suppress || this.fireEvent("beforecheckchange", this, state) !== false)){
            if(this.container){
                this.container[state ? "addClass" : "removeClass"]("x-menu-item-checked");
            }
            this.checked = state;
            if(!suppress){
                this.fireEvent("checkchange", this, state);
            }
        }
    },

    // private
    handleClick : function(e){
       if(!this.disabled && !(this.checked && this.group)){// disable unselect on radio item
           this.setChecked(!this.checked);
       }
       Ext.menu.CheckItem.superclass.handleClick.apply(this, arguments);
    }
});
Ext.reg('menucheckitem', Ext.menu.CheckItem);


The source code

/*!
 * licensing@extjs.com
 * http://www.extjs.com/license
 */

/**
 @class Ext.util.ClickRepeater
 @extends Ext.util.Observable

 A wrapper class which can be applied to any element. Fires a "click" event while the
 mouse is pressed. The interval between firings may be specified in the config but
 defaults to 20 milliseconds.

 Optionally, a CSS class may be applied to the element during the time it is pressed.

 @cfg {Mixed} el The element to act as a button.
 @cfg {Number} delay The initial delay before the repeating event begins firing.
 Similar to an autorepeat key delay.
 @cfg {Number} interval The interval between firings of the "click" event. Default 20 ms.
 @cfg {String} pressClass A CSS class name to be applied to the element while pressed.
 @cfg {Boolean} accelerate True if autorepeating should start slowly and accelerate.
           "interval" and "delay" are ignored.
 @cfg {Boolean} preventDefault True to prevent the default click event
 @cfg {Boolean} stopDefault True to stop the default click event

 @history
    2007-02-02 jvs Original code contributed by Nige "Animal" White
    2007-02-02 jvs Renamed to ClickRepeater
    2007-02-03 jvs Modifications for FF Mac and Safari

 @constructor
 @param {Mixed} el The element to listen on
 @param {Object} config
 */
Ext.util.ClickRepeater = function(el, config)
{
    this.el = Ext.get(el);
    this.el.unselectable();

    Ext.apply(this, config);

    this.addEvents(
    /**
     * @event mousedown
     * Fires when the mouse button is depressed.
     * @param {Ext.util.ClickRepeater} this
     */
        "mousedown",
    /**
     * @event click
     * Fires on a specified interval during the time the element is pressed.
     * @param {Ext.util.ClickRepeater} this
     */
        "click",
    /**
     * @event mouseup
     * Fires when the mouse key is released.
     * @param {Ext.util.ClickRepeater} this
     */
        "mouseup"
    );

    if(!this.disabled){
        this.disabled = true;
        this.enable();
    }

    // allow inline handler
    if(this.handler){
        this.on("click", this.handler,  this.scope || this);
    }

    Ext.util.ClickRepeater.superclass.constructor.call(this);
};

Ext.extend(Ext.util.ClickRepeater, Ext.util.Observable, {
    interval : 20,
    delay: 250,
    preventDefault : true,
    stopDefault : false,
    timer : 0,

    /**
     * Enables the repeater and allows events to fire.
     */
    enable: function(){
        if(this.disabled){
            this.el.on('mousedown', this.handleMouseDown, this);
            if (Ext.isIE){
                this.el.on('dblclick', this.handleDblClick, this);
            }
            if(this.preventDefault || this.stopDefault){
                this.el.on('click', this.eventOptions, this);
            }
        }
        this.disabled = false;
    },

    /**
     * Disables the repeater and stops events from firing.
     */
    disable: function(/* private */ force){
        if(force || !this.disabled){
            clearTimeout(this.timer);
            if(this.pressClass){
                this.el.removeClass(this.pressClass);
            }
            Ext.getDoc().un('mouseup', this.handleMouseUp, this);
            this.el.removeAllListeners();
        }
        this.disabled = true;
    },

    /**
     * Convenience function for setting disabled/enabled by boolean.
     * @param {Boolean} disabled
     */
    setDisabled: function(disabled){
        this[disabled ? 'disable' : 'enable']();
    },

    eventOptions: function(e){
        if(this.preventDefault){
            e.preventDefault();
        }
        if(this.stopDefault){
            e.stopEvent();
        }
    },

    // private
    destroy : function() {
        this.disable(true);
        Ext.destroy(this.el);
        this.purgeListeners();
    },

    handleDblClick : function(){
        clearTimeout(this.timer);
        this.el.blur();

        this.fireEvent("mousedown", this);
        this.fireEvent("click", this);
    },

    // private
    handleMouseDown : function(){
        clearTimeout(this.timer);
        this.el.blur();
        if(this.pressClass){
            this.el.addClass(this.pressClass);
        }
        this.mousedownTime = new Date();

        Ext.getDoc().on("mouseup", this.handleMouseUp, this);
        this.el.on("mouseout", this.handleMouseOut, this);

        this.fireEvent("mousedown", this);
        this.fireEvent("click", this);

        // Do not honor delay or interval if acceleration wanted.
        if (this.accelerate) {
            this.delay = 400;
        }
        this.timer = this.click.defer(this.delay || this.interval, this);
    },

    // private
    click : function(){
        this.fireEvent("click", this);
        this.timer = this.click.defer(this.accelerate ?
            this.easeOutExpo(this.mousedownTime.getElapsed(),
                400,
                -390,
                12000) :
            this.interval, this);
    },

    easeOutExpo : function (t, b, c, d) {
        return (t==d) ? b+c : c * (-Math.pow(2, -10 * t/d) + 1) + b;
    },

    // private
    handleMouseOut : function(){
        clearTimeout(this.timer);
        if(this.pressClass){
            this.el.removeClass(this.pressClass);
        }
        this.el.on("mouseover", this.handleMouseReturn, this);
    },

    // private
    handleMouseReturn : function(){
        this.el.un("mouseover", this.handleMouseReturn, this);
        if(this.pressClass){
            this.el.addClass(this.pressClass);
        }
        this.click();
    },

    // private
    handleMouseUp : function(){
        clearTimeout(this.timer);
        this.el.un("mouseover", this.handleMouseReturn, this);
        this.el.un("mouseout", this.handleMouseOut, this);
        Ext.getDoc().un("mouseup", this.handleMouseUp, this);
        this.el.removeClass(this.pressClass);
        this.fireEvent("mouseup", this);
    }
});


The source code

/*!
 * licensing@extjs.com
 * http://www.extjs.com/license
 */

/**
 * @class Ext.menu.ColorMenu
 * @extends Ext.menu.Menu
 *
A menu containing a {@link Ext.ColorPalette} Component.

 *
Notes:

 *
  • Although not listed here, the constructor for this class
 * accepts all of the configuration options of {@link Ext.ColorPalette}.
    •
 *
  • If subclassing ColorMenu, any configuration options for the ColorPalette must be
 * applied to the initialConfig property of the ColorMenu.
 * Applying {@link Ext.ColorPalette ColorPalette} configuration settings to
 * this will not affect the ColorPalette's configuration.
    •
 *
 *
 * @xtype colormenu
 */
 Ext.menu.ColorMenu = Ext.extend(Ext.menu.Menu, {

/**
     * @cfg {Boolean} enableScrolling
     * @hide
     */
    enableScrolling : false,

/**
     * @cfg {Function} handler
     * Optional. A function that will handle the select event of this menu.
     * The handler is passed the following parameters:

     *
  • palette : ColorPalette
    The {@link #palette Ext.ColorPalette}.
    •
     *
  • color : String
    The 6-digit color hex code (without the # symbol).
    •
     *

     */

/**
     * @cfg {Object} scope
     * The scope (this reference) in which the {@link #handler}
     * function will be called.  Defaults to this ColorMenu instance.
     */

/**
     * @cfg {Boolean} hideOnClick
     * False to continue showing the menu after a color is selected, defaults to true.
     */
    hideOnClick : true,

    cls : 'x-color-menu',

/**
     * @cfg {String} paletteId
     * An id to assign to the underlying color palette. Defaults to null.
     */
    paletteId : null,

/**
     * @cfg {Number} maxHeight
     * @hide
     */

/**
     * @cfg {Number} scrollIncrement
     * @hide
     */

/**
     * @property palette
     * @type ColorPalette
     * The {@link Ext.ColorPalette} instance for this ColorMenu
     */

/**
     * @event click
     * @hide
     */

/**
     * @event itemclick
     * @hide
     */

    initComponent : function(){
        Ext.apply(this, {
            plain: true,
            showSeparator: false,
            items: this.palette = new Ext.ColorPalette(Ext.applyIf({
                id: this.paletteId
            }, this.initialConfig))
        });
        this.palette.purgeListeners();
        Ext.menu.ColorMenu.superclass.initComponent.call(this);

/**
         * @event select
         * Fires when a color is selected from the {@link #palette Ext.ColorPalette}
         * @param {Ext.ColorPalette} palette The {@link #palette Ext.ColorPalette}
         * @param {String} color The 6-digit color hex code (without the # symbol)
         */
        this.relayEvents(this.palette, ['select']);
        this.on('select', this.menuHide, this);
        if(this.handler){
            this.on('select', this.handler, this.scope || this);
        }
    },

    menuHide : function(){
        if(this.hideOnClick){
            this.hide(true);
        }
    }
});
Ext.reg('colormenu', Ext.menu.ColorMenu);


The source code

/*!
 * licensing@extjs.com
 * http://www.extjs.com/license
 */

/**
 * @class Ext.ColorPalette
 * @extends Ext.Component
 * Simple color palette class for choosing colors.  The palette can be rendered to any container.

 * Here's an example of typical usage:
 *

var cp = new Ext.ColorPalette({value:'993300'});  // initial selected color
cp.render('my-div');

cp.on('select', function(palette, selColor){
    // do something with selColor
});

 * @constructor
 * Create a new ColorPalette
 * @param {Object} config The config object
 * @xtype colorpalette
 */
Ext.ColorPalette = Ext.extend(Ext.Component, {

/**
     * @cfg {String} tpl An existing XTemplate instance to be used in place of the default template for rendering the component.
     */

/**
     * @cfg {String} itemCls
     * The CSS class to apply to the containing element (defaults to 'x-color-palette')
     */
    itemCls : 'x-color-palette',

/**
     * @cfg {String} value
     * The initial color to highlight (should be a valid 6-digit color hex code without the # symbol).  Note that
     * the hex codes are case-sensitive.
     */
    value : null,

/**
     * @cfg {String} clickEvent
     * The DOM event that will cause a color to be selected. This can be any valid event name (dblclick, contextmenu).
     * Defaults to 'click'.
     */
    clickEvent :'click',
    // private
    ctype : 'Ext.ColorPalette',

/**
     * @cfg {Boolean} allowReselect If set to true then reselecting a color that is already selected fires the {@link #select} event
     */
    allowReselect : false,

/**
     *
An array of 6-digit color hex code strings (without the # symbol).  This array can contain any number
     * of colors, and each hex code should be unique.  The width of the palette is controlled via CSS by adjusting
     * the width property of the 'x-color-palette' class (or assigning a custom class), so you can balance the number
     * of colors with the width setting until the box is symmetrical.

     *
You can override individual colors if needed:

     *

var cp = new Ext.ColorPalette();
cp.colors[0] = 'FF0000';  // change the first box to red

Or you can provide a custom array of your own for complete control:

var cp = new Ext.ColorPalette();
cp.colors = ['000000', '993300', '333300'];

     * @type Array
     */
    colors : [
        '000000', '993300', '333300', '003300', '003366', '000080', '333399', '333333',
        '800000', 'FF6600', '808000', '008000', '008080', '0000FF', '666699', '808080',
        'FF0000', 'FF9900', '99CC00', '339966', '33CCCC', '3366FF', '800080', '969696',
        'FF00FF', 'FFCC00', 'FFFF00', '00FF00', '00FFFF', '00CCFF', '993366', 'C0C0C0',
        'FF99CC', 'FFCC99', 'FFFF99', 'CCFFCC', 'CCFFFF', '99CCFF', 'CC99FF', 'FFFFFF'
    ],

/**
     * @cfg {Function} handler
     * Optional. A function that will handle the select event of this palette.
     * The handler is passed the following parameters:

     *
  • palette : ColorPalette
    The {@link #palette Ext.ColorPalette}.
    •
     *
  • color : String
    The 6-digit color hex code (without the # symbol).
    •
     *

     */

/**
     * @cfg {Object} scope
     * The scope (this reference) in which the {@link #handler}
     * function will be called.  Defaults to this ColorPalette instance.
     */

    // private
    initComponent : function(){
        Ext.ColorPalette.superclass.initComponent.call(this);
        this.addEvents(

/**
             * @event select
             * Fires when a color is selected
             * @param {ColorPalette} this
             * @param {String} color The 6-digit color hex code (without the # symbol)
             */
            'select'
        );

        if(this.handler){
            this.on('select', this.handler, this.scope, true);
        }
    },

    // private
    onRender : function(container, position){
        this.autoEl = {
            tag: 'div',
            cls: this.itemCls
        };
        Ext.ColorPalette.superclass.onRender.call(this, container, position);
        var t = this.tpl || new Ext.XTemplate(
            ' '
        );
        t.overwrite(this.el, this.colors);
        this.mon(this.el, this.clickEvent, this.handleClick, this, {delegate: 'a'});
        if(this.clickEvent != 'click'){
            this.mon(this.el, 'click', Ext.emptyFn, this, {delegate: 'a', preventDefault: true});
        }
    },

    // private
    afterRender : function(){
        Ext.ColorPalette.superclass.afterRender.call(this);
        if(this.value){
            var s = this.value;
            this.value = null;
            this.select(s);
        }
    },

    // private
    handleClick : function(e, t){
        e.preventDefault();
        if(!this.disabled){
            var c = t.className.match(/(?:^|\s)color-(.{6})(?:\s|$)/)[1];
            this.select(c.toUpperCase());
        }
    },

/**
     * Selects the specified color in the palette (fires the {@link #select} event)
     * @param {String} color A valid 6-digit color hex code (# will be stripped if included)
     */
    select : function(color){
        color = color.replace('#', '');
        if(color != this.value || this.allowReselect){
            var el = this.el;
            if(this.value){
                el.child('a.color-'+this.value).removeClass('x-color-palette-sel');
            }
            el.child('a.color-'+color).addClass('x-color-palette-sel');
            this.value = color;
            this.fireEvent('select', this, color);
        }
    }

/**
     * @cfg {String} autoEl @hide
     */
});
Ext.reg('colorpalette', Ext.ColorPalette);


The source code

/*!
 * licensing@extjs.com
 * http://www.extjs.com/license
 */

/**
 * @class Ext.grid.Column
 *
This class encapsulates column configuration data to be used in the initialization of a
 * {@link Ext.grid.ColumnModel ColumnModel}.

 *
While subclasses are provided to render data in different ways, this class renders a passed
 * data field unchanged and is usually used for textual columns.

 */
Ext.grid.Column = Ext.extend(Object, {

/**
     * @cfg {Boolean} editable Optional. Defaults to true, enabling the configured
     * {@link #editor}.  Set to false to initially disable editing on this column.
     * The initial configuration may be dynamically altered using
     * {@link Ext.grid.ColumnModel}.{@link Ext.grid.ColumnModel#setEditable setEditable()}.
     */

/**
     * @cfg {String} id Optional. A name which identifies this column (defaults to the column's initial
     * ordinal position.) The id is used to create a CSS class name which is applied to all
     * table cells (including headers) in that column (in this context the id does not need to be
     * unique). The class name takes the form of
x-grid3-td-id

     * Header cells will also receive this class name, but will also have the class
x-grid3-hd

     * So, to target header cells, use CSS selectors such as:
.x-grid3-hd-row .x-grid3-td-id

     * The {@link Ext.grid.GridPanel#autoExpandColumn} grid config option references the column via this
     * unique identifier.
     */

/**
     * @cfg {String} header Optional. The header text to be used as innerHTML
     * (html tags are accepted) to display in the Grid view.  Note: to
     * have a clickable header with no text displayed use ' '.
     */

/**
     * @cfg {Boolean} groupable Optional. If the grid is being rendered by an {@link Ext.grid.GroupingView}, this option
     * may be used to disable the header menu item to group by the column selected. Defaults to true,
     * which enables the header menu group option.  Set to false to disable (but still show) the
     * group option in the header menu for the column. See also {@link #groupName}.
     */

/**
     * @cfg {String} groupName Optional. If the grid is being rendered by an {@link Ext.grid.GroupingView}, this option
     * may be used to specify the text with which to prefix the group field value in the group header line.
     * See also {@link #groupRenderer} and
     * {@link Ext.grid.GroupingView}.{@link Ext.grid.GroupingView#showGroupName showGroupName}.
     */

/**
     * @cfg {Function} groupRenderer
Optional. If the grid is being rendered by an {@link Ext.grid.GroupingView}, this option
     * may be used to specify the function used to format the grouping field value for display in the group
     * {@link #groupName header}.  If a groupRenderer is not specified, the configured
     * {@link #renderer} will be called; if a {@link #renderer} is also not specified
     * the new value of the group field will be used.

     *
The called function (either the groupRenderer or {@link #renderer}) will be
     * passed the following parameters:
     *

     *
  • v : Object
    The new value of the group field.
    •
     *
  • unused : undefined
    Unused parameter.
    •
     *
  • r : Ext.data.Record
    The Record providing the data
     * for the row which caused group change.
    •
     *
  • rowIndex : Number
    The row index of the Record which caused group change.
    •
     *
  • colIndex : Number
    The column index of the group field.
    •
     *
  • ds : Ext.data.Store
    The Store which is providing the data Model.
    •
     *

     *
The function should return a string value.

     */

/**
     * @cfg {String} emptyGroupText Optional. If the grid is being rendered by an {@link Ext.grid.GroupingView}, this option
     * may be used to specify the text to display when there is an empty group value. Defaults to the
     * {@link Ext.grid.GroupingView}.{@link Ext.grid.GroupingView#emptyGroupText emptyGroupText}.
     */

/**
     * @cfg {String} dataIndex
Required. The name of the field in the
     * grid's {@link Ext.data.Store}'s {@link Ext.data.Record} definition from
     * which to draw the column's value.

     */

/**
     * @cfg {Number} width
     * Optional. The initial width in pixels of the column.
     * The width of each column can also be affected if any of the following are configured:
     *

     *
  • {@link Ext.grid.GridPanel}.{@link Ext.grid.GridPanel#autoExpandColumn autoExpandColumn}
    •
     *
  • {@link Ext.grid.GridView}.{@link Ext.grid.GridView#forceFit forceFit}
     *

     *
    By specifying forceFit:true, {@link #fixed non-fixed width} columns will be
     * re-proportioned (based on the relative initial widths) to fill the width of the grid so
     * that no horizontal scrollbar is shown.

     *
    •
     *
  • {@link Ext.grid.GridView}.{@link Ext.grid.GridView#autoFill autoFill}
    •
     *
  • {@link Ext.grid.GridPanel}.{@link Ext.grid.GridPanel#minColumnWidth minColumnWidth}
    •
     *
    Note: when the width of each column is determined, a space on the right side
     * is reserved for the vertical scrollbar.  The
     * {@link Ext.grid.GridView}.{@link Ext.grid.GridView#scrollOffset scrollOffset}
     * can be modified to reduce or eliminate the reserved offset.

     */

    /**
     * @cfg {Boolean} sortable Optional. true if sorting is to be allowed on this column.
     * Defaults to the value of the {@link Ext.grid.ColumnModel#defaultSortable} property.
     * Whether local/remote sorting is used is specified in {@link Ext.data.Store#remoteSort}.
     */

    /**
     * @cfg {Boolean} fixed Optional. true if the column width cannot be changed.  Defaults to false.
     */

    /**
     * @cfg {Boolean} resizable Optional. false to disable column resizing. Defaults to true.
     */

    /**
     * @cfg {Boolean} menuDisabled Optional. true to disable the column menu. Defaults to false.
     */

    /**
     * @cfg {Boolean} hidden
     * Optional. true to initially hide this column. Defaults to false.
     * A hidden column {@link Ext.grid.GridPanel#enableColumnHide may be shown via the header row menu}.
     * If a column is never to be shown, simply do not include this column in the Column Model at all.
     */

    /**
     * @cfg {String} tooltip Optional. A text string to use as the column header's tooltip.  If Quicktips
     * are enabled, this value will be used as the text of the quick tip, otherwise it will be set as the
     * header's HTML title attribute. Defaults to ''.
     */

    /**
     * @cfg {Mixed} renderer
     *
    For an alternative to specifying a renderer see {@link #xtype}

     *
    Optional. A renderer is an 'interceptor' method which can be used transform data (value,
     * appearance, etc.) before it is rendered). This may be specified in either of three ways:
     *

     *
    • A renderer function used to return HTML markup for a cell given the cell's data value.
      •
     *
    • A string which references a property name of the {@link Ext.util.Format} class which
     * provides a renderer function.
      •
     *
    • An object specifying both the renderer function, and its execution scope (this
     * reference) e.g.:

{
    fn: this.gridRenderer,
    scope: this
}

     * If not specified, the default renderer uses the raw data value.

     *
    For information about the renderer function (passed parameters, etc.), see
     * {@link Ext.grid.ColumnModel#setRenderer}. An example of specifying renderer function inline:

var companyColumn = {
   header: 'Company Name',
   dataIndex: 'company',
   renderer: function(value, metaData, record, rowIndex, colIndex, store) {
      // provide the logic depending on business rules
      // name of your own choosing to manipulate the cell depending upon
      // the data in the underlying Record object.
      if (value == 'whatever') {
          //metaData.css : String : A CSS class name to add to the TD element of the cell.
          //metaData.attr : String : An html attribute definition string to apply to
          //                         the data container element within the table
          //                         cell (e.g. 'style="color:red;"').
          metaData.css = 'name-of-css-class-you-will-define';
      }
      return value;
   }
}
     *

     * See also {@link #scope}.
     */

    /**
     * @cfg {String} xtype Optional. A String which references a predefined {@link Ext.grid.Column} subclass
     * type which is preconfigured with an appropriate {@link #renderer} to be easily
     * configured into a ColumnModel. The predefined {@link Ext.grid.Column} subclass types are:
     *

     *
    • gridcolumn : {@link Ext.grid.Column} (Default)
      •
     *
    • booleancolumn : {@link Ext.grid.BooleanColumn}
      •
     *
    • numbercolumn : {@link Ext.grid.NumberColumn}
      •
     *
    • datecolumn : {@link Ext.grid.DateColumn}
      •
     *
    • templatecolumn : {@link Ext.grid.TemplateColumn}
      •
     *

     *
    Configuration properties for the specified xtype may be specified with
     * the Column configuration properties, for example:

     *

var grid = new Ext.grid.GridPanel({
    ...
    columns: [{
        header: 'Last Updated',
        dataIndex: 'lastChange',
        width: 85,
        sortable: true,
        //renderer: Ext.util.Format.dateRenderer('m/d/Y'),
        xtype: 'datecolumn', // use xtype instead of renderer
        format: 'M/d/Y' // configuration property for {@link Ext.grid.DateColumn}
    }, {
        ...
    }]
});
     *

     */

    /**
     * @cfg {Object} scope Optional. The scope (this reference) in which to execute the
     * renderer.  Defaults to the Column configuration object.
     */

    /**
     * @cfg {String} align Optional. Set the CSS text-align property of the column.  Defaults to undefined.
     */

    /**
     * @cfg {String} css Optional. An inline style definition string which is applied to all table cells in the column
     * (excluding headers). Defaults to undefined.
     */

    /**
     * @cfg {Boolean} hideable Optional. Specify as false to prevent the user from hiding this column
     * (defaults to true).  To disallow column hiding globally for all columns in the grid, use
     * {@link Ext.grid.GridPanel#enableColumnHide} instead.
     */

    /**
     * @cfg {Ext.form.Field} editor Optional. The {@link Ext.form.Field} to use when editing values in this column
     * if editing is supported by the grid. See {@link #editable} also.
     */

    /**
     * @private
     * @cfg {Boolean} isColumn
     * Used by ColumnModel setConfig method to avoid reprocessing a Column
     * if isColumn is not set ColumnModel will recreate a new Ext.grid.Column
     * Defaults to true.
     */
    isColumn : true,

    constructor : function(config){
        Ext.apply(this, config);

        if(Ext.isString(this.renderer)){
            this.renderer = Ext.util.Format[this.renderer];
        }else if(Ext.isObject(this.renderer)){
            this.scope = this.renderer.scope;
            this.renderer = this.renderer.fn;
        }
        if(!this.scope){
            this.scope = this;
        }

        var ed = this.editor;
        delete this.editor;
        this.setEditor(ed);
    },

    /**
     * Optional. A function which returns displayable data when passed the following parameters:
     *

     *
    • value : Object
      The data value for the cell.
      •
     *
    • metadata : Object
      An object in which you may set the following attributes:

     *
      • css : String
        A CSS class name to add to the cell's TD element.
        •
     *
      • attr : String
        An HTML attribute definition string to apply to the data container
     * element within the table cell (e.g. 'style="color:red;"').
      •
     *
    • record : Ext.data.record
      The {@link Ext.data.Record} from which the data was
     * extracted.
      •
     *
    • rowIndex : Number
      Row index
      •
     *
    • colIndex : Number
      Column index
      •
     *
    • store : Ext.data.Store
      The {@link Ext.data.Store} object from which the Record
     * was extracted.
      •
     *

     * @property renderer
     * @type Function
     */
    renderer : function(value){
        if(Ext.isString(value) && value.length < 1){
            return ' ';
        }
        return value;
    },

    // private
    getEditor: function(rowIndex){
        return this.editable !== false ? this.editor : null;
    },

    /**
     * Sets a new editor for this column.
     * @param {Ext.Editor/Ext.form.Field} editor The editor to set
     */
    setEditor : function(editor){
        var ed = this.editor;
        if(ed){
            if(ed.gridEditor){
                ed.gridEditor.destroy();
                delete ed.gridEditor;
            }else{
                ed.destroy();
            }
        }
        this.editor = null;
        if(editor){
            //not an instance, create it
            if(!editor.isXType){
                editor = Ext.create(editor, 'textfield');
            }
            this.editor = editor;
        }
    },

    /**
     * Returns the {@link Ext.Editor editor} defined for this column that was created to wrap the {@link Ext.form.Field Field}
     * used to edit the cell.
     * @param {Number} rowIndex The row index
     * @return {Ext.Editor}
     */
    getCellEditor: function(rowIndex){
        var ed = this.getEditor(rowIndex);
        if(ed){
            if(!ed.startEdit){
                if(!ed.gridEditor){
                    ed.gridEditor = new Ext.grid.GridEditor(ed);
                }
                ed = ed.gridEditor;
            }
        }
        return ed;
    }
});

    /**
 * @class Ext.grid.BooleanColumn
 * @extends Ext.grid.Column
 *
    A Column definition class which renders boolean data fields.  See the {@link Ext.grid.Column#xtype xtype}
 * config option of {@link Ext.grid.Column} for more details.

 */
Ext.grid.BooleanColumn = Ext.extend(Ext.grid.Column, {

    /**
     * @cfg {String} trueText
     * The string returned by the renderer when the column value is not falsey (defaults to 'true').
     */
    trueText: 'true',

    /**
     * @cfg {String} falseText
     * The string returned by the renderer when the column value is falsey (but not undefined) (defaults to
     * 'false').
     */
    falseText: 'false',

    /**
     * @cfg {String} undefinedText
     * The string returned by the renderer when the column value is undefined (defaults to ' ').
     */
    undefinedText: ' ',

    constructor: function(cfg){
        Ext.grid.BooleanColumn.superclass.constructor.call(this, cfg);
        var t = this.trueText, f = this.falseText, u = this.undefinedText;
        this.renderer = function(v){
            if(v === undefined){
                return u;
            }
            if(!v || v === 'false'){
                return f;
            }
            return t;
        };
    }
});

    /**
 * @class Ext.grid.NumberColumn
 * @extends Ext.grid.Column
 *
    A Column definition class which renders a numeric data field according to a {@link #format} string.  See the
 * {@link Ext.grid.Column#xtype xtype} config option of {@link Ext.grid.Column} for more details.

 */
Ext.grid.NumberColumn = Ext.extend(Ext.grid.Column, {

    /**
     * @cfg {String} format
     * A formatting string as used by {@link Ext.util.Format#number} to format a numeric value for this Column
     * (defaults to '0,000.00').
     */
    format : '0,000.00',
    constructor: function(cfg){
        Ext.grid.NumberColumn.superclass.constructor.call(this, cfg);
        this.renderer = Ext.util.Format.numberRenderer(this.format);
    }
});

    /**
 * @class Ext.grid.DateColumn
 * @extends Ext.grid.Column
 *
    A Column definition class which renders a passed date according to the default locale, or a configured
 * {@link #format}. See the {@link Ext.grid.Column#xtype xtype} config option of {@link Ext.grid.Column}
 * for more details.

 */
Ext.grid.DateColumn = Ext.extend(Ext.grid.Column, {

    /**
     * @cfg {String} format
     * A formatting string as used by {@link Date#format} to format a Date for this Column
     * (defaults to 'm/d/Y').
     */
    format : 'm/d/Y',
    constructor: function(cfg){
        Ext.grid.DateColumn.superclass.constructor.call(this, cfg);
        this.renderer = Ext.util.Format.dateRenderer(this.format);
    }
});

    /**
 * @class Ext.grid.TemplateColumn
 * @extends Ext.grid.Column
 *
    A Column definition class which renders a value by processing a {@link Ext.data.Record Record}'s
 * {@link Ext.data.Record#data data} using a {@link #tpl configured} {@link Ext.XTemplate XTemplate}.
 * See the {@link Ext.grid.Column#xtype xtype} config option of {@link Ext.grid.Column} for more
 * details.

 */
Ext.grid.TemplateColumn = Ext.extend(Ext.grid.Column, {

    /**
     * @cfg {String/XTemplate} tpl
     * An {@link Ext.XTemplate XTemplate}, or an XTemplate definition string to use to process a
     * {@link Ext.data.Record Record}'s {@link Ext.data.Record#data data} to produce a column's rendered value.
     */
    constructor: function(cfg){
        Ext.grid.TemplateColumn.superclass.constructor.call(this, cfg);
        var tpl = (!Ext.isPrimitive(this.tpl) && this.tpl.compile) ? this.tpl : new Ext.XTemplate(this.tpl);
        this.renderer = function(value, p, r){
            return tpl.apply(r.data);
        };
        this.tpl = tpl;
    }
});

/*
 * @property types
 * @type Object
 * @member Ext.grid.Column
 * @static
 *
    An object containing predefined Column classes keyed by a mnemonic code which may be referenced
 * by the {@link Ext.grid.ColumnModel#xtype xtype} config option of ColumnModel.

 *
    This contains the following properties

 *
    • gridcolumn : {@link Ext.grid.Column Column constructor}
      •
 *
    • booleancolumn : {@link Ext.grid.BooleanColumn BooleanColumn constructor}
      •
 *
    • numbercolumn : {@link Ext.grid.NumberColumn NumberColumn constructor}
      •
 *
    • datecolumn : {@link Ext.grid.DateColumn DateColumn constructor}
      •
 *
    • templatecolumn : {@link Ext.grid.TemplateColumn TemplateColumn constructor}
      •
 *

 */
Ext.grid.Column.types = {
    gridcolumn : Ext.grid.Column,
    booleancolumn: Ext.grid.BooleanColumn,
    numbercolumn: Ext.grid.NumberColumn,
    datecolumn: Ext.grid.DateColumn,
    templatecolumn: Ext.grid.TemplateColumn
};


The source code

/*!
 * licensing@extjs.com
 * http://www.extjs.com/license
 */

/**
 * @class Ext.list.Column
 *
This class encapsulates column configuration data to be used in the initialization of a
 * {@link Ext.list.ListView ListView}.

 *
While subclasses are provided to render data in different ways, this class renders a passed
 * data field unchanged and is usually used for textual columns.

 */
Ext.list.Column = Ext.extend(Object, {
    /**
     * @private
     * @cfg {Boolean} isColumn
     * Used by ListView constructor method to avoid reprocessing a Column
     * if isColumn is not set ListView will recreate a new Ext.list.Column
     * Defaults to true.
     */
    isColumn: true,

/**
     * @cfg {String} align
     * Set the CSS text-align property of the column. Defaults to 'left'.
     */
    align: 'left',

/**
     * @cfg {String} header Optional. The header text to be used as innerHTML
     * (html tags are accepted) to display in the ListView.  Note: to
     * have a clickable header with no text displayed use ' '.
     */
    header: '',

/**
     * @cfg {Number} width Optional. Percentage of the container width
     * this column should be allocated.  Columns that have no width specified will be
     * allocated with an equal percentage to fill 100% of the container width.  To easily take
     * advantage of the full container width, leave the width of at least one column undefined.
     * Note that if you do not want to take up the full width of the container, the width of
     * every column needs to be explicitly defined.
     */
    width: null,

/**
     * @cfg {String} cls Optional. This option can be used to add a CSS class to the cell of each
     * row for this column.
     */
    cls: '',

/**
     * @cfg {String} tpl Optional. Specify a string to pass as the
     * configuration string for {@link Ext.XTemplate}.  By default an {@link Ext.XTemplate}
     * will be implicitly created using the dataIndex.
     */

/**
     * @cfg {String} dataIndex
Required. The name of the field in the
     * ListViews's {@link Ext.data.Store}'s {@link Ext.data.Record} definition from
     * which to draw the column's value.

     */

    constructor : function(c){
        if(!c.tpl){
            c.tpl = new Ext.XTemplate('{' + c.dataIndex + '}');
        }
        else if(Ext.isString(c.tpl)){
            c.tpl = new Ext.XTemplate(c.tpl);
        }

        Ext.apply(this, c);
    }
});

Ext.reg('lvcolumn', Ext.list.Column);

/**
 * @class Ext.list.NumberColumn
 * @extends Ext.list.Column
 *
A Column definition class which renders a numeric data field according to a {@link #format} string.  See the
 * {@link Ext.list.Column#xtype xtype} config option of {@link Ext.list.Column} for more details.

 */
Ext.list.NumberColumn = Ext.extend(Ext.list.Column, {

/**
     * @cfg {String} format
     * A formatting string as used by {@link Ext.util.Format#number} to format a numeric value for this Column
     * (defaults to '0,000.00').
     */
    format: '0,000.00',

    constructor : function(c) {
        c.tpl = c.tpl || new Ext.XTemplate('{' + c.dataIndex + ':number("' + (c.format || this.format) + '")}');
        Ext.list.NumberColumn.superclass.constructor.call(this, c);
    }
});

Ext.reg('lvnumbercolumn', Ext.list.NumberColumn);

/**
 * @class Ext.list.DateColumn
 * @extends Ext.list.Column
 *
A Column definition class which renders a passed date according to the default locale, or a configured
 * {@link #format}. See the {@link Ext.list.Column#xtype xtype} config option of {@link Ext.list.Column}
 * for more details.

 */
Ext.list.DateColumn = Ext.extend(Ext.list.Column, {
    format: 'm/d/Y',
    constructor : function(c) {
        c.tpl = c.tpl || new Ext.XTemplate('{' + c.dataIndex + ':date("' + (c.format || this.format) + '")}');
        Ext.list.DateColumn.superclass.constructor.call(this, c);
    }
});
Ext.reg('lvdatecolumn', Ext.list.DateColumn);

/**
 * @class Ext.list.BooleanColumn
 * @extends Ext.list.Column
 *
A Column definition class which renders boolean data fields.  See the {@link Ext.list.Column#xtype xtype}
 * config option of {@link Ext.list.Column} for more details.

 */
Ext.list.BooleanColumn = Ext.extend(Ext.list.Column, {

/**
     * @cfg {String} trueText
     * The string returned by the renderer when the column value is not falsey (defaults to 'true').
     */
    trueText: 'true',

/**
     * @cfg {String} falseText
     * The string returned by the renderer when the column value is falsey (but not undefined) (defaults to
     * 'false').
     */
    falseText: 'false',

/**
     * @cfg {String} undefinedText
     * The string returned by the renderer when the column value is undefined (defaults to ' ').
     */
    undefinedText: ' ',

    constructor : function(c) {
        c.tpl = c.tpl || new Ext.XTemplate('{' + c.dataIndex + ':this.format}');

        var t = this.trueText, f = this.falseText, u = this.undefinedText;
        c.tpl.format = function(v){
            if(v === undefined){
                return u;
            }
            if(!v || v === 'false'){
                return f;
            }
            return t;
        };

        Ext.list.DateColumn.superclass.constructor.call(this, c);
    }
});

Ext.reg('lvbooleancolumn', Ext.list.BooleanColumn);


The source code

/*!
 * licensing@extjs.com
 * http://www.extjs.com/license
 */
// private
// This is a support class used internally by the Grid components
Ext.grid.HeaderDragZone = Ext.extend(Ext.dd.DragZone, {
    maxDragWidth: 120,

    constructor : function(grid, hd, hd2){
        this.grid = grid;
        this.view = grid.getView();
        this.ddGroup = "gridHeader" + this.grid.getGridEl().id;
        Ext.grid.HeaderDragZone.superclass.constructor.call(this, hd);
        if(hd2){
            this.setHandleElId(Ext.id(hd));
            this.setOuterHandleElId(Ext.id(hd2));
        }
        this.scroll = false;
    },

    getDragData : function(e){
        var t = Ext.lib.Event.getTarget(e),
            h = this.view.findHeaderCell(t);
        if(h){
            return {ddel: h.firstChild, header:h};
        }
        return false;
    },

    onInitDrag : function(e){
        // keep the value here so we can restore it;
        this.dragHeadersDisabled = this.view.headersDisabled;
        this.view.headersDisabled = true;
        var clone = this.dragData.ddel.cloneNode(true);
        clone.id = Ext.id();
        clone.style.width = Math.min(this.dragData.header.offsetWidth,this.maxDragWidth) + "px";
        this.proxy.update(clone);
        return true;
    },

    afterValidDrop : function(){
        this.completeDrop();
    },

    afterInvalidDrop : function(){
        this.completeDrop();
    },

    completeDrop: function(){
        var v = this.view,
            disabled = this.dragHeadersDisabled;
        setTimeout(function(){
            v.headersDisabled = disabled;
        }, 50);
    }
});

// private
// This is a support class used internally by the Grid components
Ext.grid.HeaderDropZone = Ext.extend(Ext.dd.DropZone, {
    proxyOffsets : [-4, -9],
    fly: Ext.Element.fly,

    constructor : function(grid, hd, hd2){
        this.grid = grid;
        this.view = grid.getView();
        // split the proxies so they don't interfere with mouse events
        this.proxyTop = Ext.DomHelper.append(document.body, {
            cls:"col-move-top", html:" "
        }, true);
        this.proxyBottom = Ext.DomHelper.append(document.body, {
            cls:"col-move-bottom", html:" "
        }, true);
        this.proxyTop.hide = this.proxyBottom.hide = function(){
            this.setLeftTop(-100,-100);
            this.setStyle("visibility", "hidden");
        };
        this.ddGroup = "gridHeader" + this.grid.getGridEl().id;
        // temporarily disabled
        //Ext.dd.ScrollManager.register(this.view.scroller.dom);
        Ext.grid.HeaderDropZone.superclass.constructor.call(this, grid.getGridEl().dom);
    },

    getTargetFromEvent : function(e){
        var t = Ext.lib.Event.getTarget(e),
            cindex = this.view.findCellIndex(t);
        if(cindex !== false){
            return this.view.getHeaderCell(cindex);
        }
    },

    nextVisible : function(h){
        var v = this.view, cm = this.grid.colModel;
        h = h.nextSibling;
        while(h){
            if(!cm.isHidden(v.getCellIndex(h))){
                return h;
            }
            h = h.nextSibling;
        }
        return null;
    },

    prevVisible : function(h){
        var v = this.view, cm = this.grid.colModel;
        h = h.prevSibling;
        while(h){
            if(!cm.isHidden(v.getCellIndex(h))){
                return h;
            }
            h = h.prevSibling;
        }
        return null;
    },

    positionIndicator : function(h, n, e){
        var x = Ext.lib.Event.getPageX(e),
            r = Ext.lib.Dom.getRegion(n.firstChild),
            px,
            pt,
            py = r.top + this.proxyOffsets[1];
        if((r.right - x) <= (r.right-r.left)/2){
            px = r.right+this.view.borderWidth;
            pt = "after";
        }else{
            px = r.left;
            pt = "before";
        }

        if(this.grid.colModel.isFixed(this.view.getCellIndex(n))){
            return false;
        }

        px +=  this.proxyOffsets[0];
        this.proxyTop.setLeftTop(px, py);
        this.proxyTop.show();
        if(!this.bottomOffset){
            this.bottomOffset = this.view.mainHd.getHeight();
        }
        this.proxyBottom.setLeftTop(px, py+this.proxyTop.dom.offsetHeight+this.bottomOffset);
        this.proxyBottom.show();
        return pt;
    },

    onNodeEnter : function(n, dd, e, data){
        if(data.header != n){
            this.positionIndicator(data.header, n, e);
        }
    },

    onNodeOver : function(n, dd, e, data){
        var result = false;
        if(data.header != n){
            result = this.positionIndicator(data.header, n, e);
        }
        if(!result){
            this.proxyTop.hide();
            this.proxyBottom.hide();
        }
        return result ? this.dropAllowed : this.dropNotAllowed;
    },

    onNodeOut : function(n, dd, e, data){
        this.proxyTop.hide();
        this.proxyBottom.hide();
    },

    onNodeDrop : function(n, dd, e, data){
        var h = data.header;
        if(h != n){
            var cm = this.grid.colModel,
                x = Ext.lib.Event.getPageX(e),
                r = Ext.lib.Dom.getRegion(n.firstChild),
                pt = (r.right - x) <= ((r.right-r.left)/2) ? "after" : "before",
                oldIndex = this.view.getCellIndex(h),
                newIndex = this.view.getCellIndex(n);
            if(pt == "after"){
                newIndex++;
            }
            if(oldIndex < newIndex){
                newIndex--;
            }
            cm.moveColumn(oldIndex, newIndex);
            return true;
        }
        return false;
    }
});

Ext.grid.GridView.ColumnDragZone = Ext.extend(Ext.grid.HeaderDragZone, {

    constructor : function(grid, hd){
        Ext.grid.GridView.ColumnDragZone.superclass.constructor.call(this, grid, hd, null);
        this.proxy.el.addClass('x-grid3-col-dd');
    },

    handleMouseDown : function(e){
    },

    callHandleMouseDown : function(e){
        Ext.grid.GridView.ColumnDragZone.superclass.handleMouseDown.call(this, e);
    }
});


The source code

/*!
 * licensing@extjs.com
 * http://www.extjs.com/license
 */

/**
 * @class Ext.layout.ColumnLayout
 * @extends Ext.layout.ContainerLayout
 *
This is the layout style of choice for creating structural layouts in a multi-column format where the width of
 * each column can be specified as a percentage or fixed width, but the height is allowed to vary based on the content.
 * This class is intended to be extended or created via the layout:'column' {@link Ext.Container#layout} config,
 * and should generally not need to be created directly via the new keyword.

 *
ColumnLayout does not have any direct config options (other than inherited ones), but it does support a
 * specific config property of columnWidth that can be included in the config of any panel added to it.  The
 * layout will use the columnWidth (if present) or width of each panel during layout to determine how to size each panel.
 * If width or columnWidth is not specified for a given panel, its width will default to the panel's width (or auto).

 *
The width property is always evaluated as pixels, and must be a number greater than or equal to 1.
 * The columnWidth property is always evaluated as a percentage, and must be a decimal value greater than 0 and
 * less than 1 (e.g., .25).

 *
The basic rules for specifying column widths are pretty simple.  The logic makes two passes through the
 * set of contained panels.  During the first layout pass, all panels that either have a fixed width or none
 * specified (auto) are skipped, but their widths are subtracted from the overall container width.  During the second
 * pass, all panels with columnWidths are assigned pixel widths in proportion to their percentages based on
 * the total remaining container width.  In other words, percentage width panels are designed to fill the space
 * left over by all the fixed-width and/or auto-width panels.  Because of this, while you can specify any number of columns
 * with different percentages, the columnWidths must always add up to 1 (or 100%) when added together, otherwise your
 * layout may not render as expected.  Example usage:

 *

// All columns are percentages -- they must add up to 1
var p = new Ext.Panel({
    title: 'Column Layout - Percentage Only',
    layout:'column',
    items: [{
        title: 'Column 1',
        columnWidth: .25
    },{
        title: 'Column 2',
        columnWidth: .6
    },{
        title: 'Column 3',
        columnWidth: .15
    }]
});

// Mix of width and columnWidth -- all columnWidth values must add up
// to 1. The first column will take up exactly 120px, and the last two
// columns will fill the remaining container width.
var p = new Ext.Panel({
    title: 'Column Layout - Mixed',
    layout:'column',
    items: [{
        title: 'Column 1',
        width: 120
    },{
        title: 'Column 2',
        columnWidth: .8
    },{
        title: 'Column 3',
        columnWidth: .2
    }]
});

 */
Ext.layout.ColumnLayout = Ext.extend(Ext.layout.ContainerLayout, {
    // private
    monitorResize:true,

    type: 'column',

    extraCls: 'x-column',

    scrollOffset : 0,

    // private

    targetCls: 'x-column-layout-ct',

    isValidParent : function(c, target){
        return this.innerCt && c.getPositionEl().dom.parentNode == this.innerCt.dom;
    },

    getLayoutTargetSize : function() {
        var target = this.container.getLayoutTarget(), ret;
        if (target) {
            ret = target.getViewSize();

            // IE in strict mode will return a width of 0 on the 1st pass of getViewSize.
            // Use getStyleSize to verify the 0 width, the adjustment pass will then work properly
            // with getViewSize
            if (Ext.isIE && Ext.isStrict && ret.width == 0){
                ret =  target.getStyleSize();
            }

            ret.width -= target.getPadding('lr');
            ret.height -= target.getPadding('tb');
        }
        return ret;
    },

    renderAll : function(ct, target) {
        if(!this.innerCt){
            // the innerCt prevents wrapping and shuffling while
            // the container is resizing
            this.innerCt = target.createChild({cls:'x-column-inner'});
            this.innerCt.createChild({cls:'x-clear'});
        }
        Ext.layout.ColumnLayout.superclass.renderAll.call(this, ct, this.innerCt);
    },

    // private
    onLayout : function(ct, target){
        var cs = ct.items.items,
            len = cs.length,
            c,
            i,
            m,
            margins = [];

        this.renderAll(ct, target);

        var size = this.getLayoutTargetSize();

        if(size.width < 1 && size.height < 1){ // display none?
            return;
        }

        var w = size.width - this.scrollOffset,
            h = size.height,
            pw = w;

        this.innerCt.setWidth(w);

        // some columns can be percentages while others are fixed
        // so we need to make 2 passes

        for(i = 0; i < len; i++){
            c = cs[i];
            m = c.getPositionEl().getMargins('lr');
            margins[i] = m;
            if(!c.columnWidth){
                pw -= (c.getWidth() + m);
            }
        }

        pw = pw < 0 ? 0 : pw;

        for(i = 0; i < len; i++){
            c = cs[i];
            m = margins[i];
            if(c.columnWidth){
                c.setSize(Math.floor(c.columnWidth * pw) - m);
            }
        }

        // Browsers differ as to when they account for scrollbars.  We need to re-measure to see if the scrollbar
        // spaces were accounted for properly.  If not, re-layout.
        if (Ext.isIE) {
            if (i = target.getStyle('overflow') && i != 'hidden' && !this.adjustmentPass) {
                var ts = this.getLayoutTargetSize();
                if (ts.width != size.width){
                    this.adjustmentPass = true;
                    this.onLayout(ct, target);
                }
            }
        }
        delete this.adjustmentPass;
    }

/**
     * @property activeItem
     * @hide
     */
});

Ext.Container.LAYOUTS['column'] = Ext.layout.ColumnLayout;


The source code

/*!
 * licensing@extjs.com
 * http://www.extjs.com/license
 */

/**
 * @class Ext.grid.ColumnModel
 * @extends Ext.util.Observable
 *
After the data has been read into the client side cache ({@link Ext.data.Store Store}),
 * the ColumnModel is used to configure how and what parts of that data will be displayed in the
 * vertical slices (columns) of the grid. The Ext.grid.ColumnModel Class is the default implementation
 * of a ColumnModel used by implentations of {@link Ext.grid.GridPanel GridPanel}.

 *
Data is mapped into the store's records and then indexed into the ColumnModel using the
 * {@link Ext.grid.Column#dataIndex dataIndex}:

 *

{data source} == mapping ==> {data store} == {@link Ext.grid.Column#dataIndex dataIndex} ==> {ColumnModel}
 *

 *
Each {@link Ext.grid.Column Column} in the grid's ColumnModel is configured with a
 * {@link Ext.grid.Column#dataIndex dataIndex} to specify how the data within
 * each record in the store is indexed into the ColumnModel.

 *
There are two ways to initialize the ColumnModel class:

 *
Initialization Method 1: an Array

 var colModel = new Ext.grid.ColumnModel([
    { header: "Ticker", width: 60, sortable: true},
    { header: "Company Name", width: 150, sortable: true, id: 'company'},
    { header: "Market Cap.", width: 100, sortable: true},
    { header: "$ Sales", width: 100, sortable: true, renderer: money},
    { header: "Employees", width: 100, sortable: true, resizable: false}
 ]);

 *
The ColumnModel may be initialized with an Array of {@link Ext.grid.Column} column configuration
 * objects to define the initial layout / display of the columns in the Grid. The order of each
 * {@link Ext.grid.Column} column configuration object within the specified Array defines the initial
 * order of the column display.  A Column's display may be initially hidden using the
 * {@link Ext.grid.Column#hidden hidden} config property (and then shown using the column
 * header menu).  Fields that are not included in the ColumnModel will not be displayable at all.

 *
How each column in the grid correlates (maps) to the {@link Ext.data.Record} field in the
 * {@link Ext.data.Store Store} the column draws its data from is configured through the
 * {@link Ext.grid.Column#dataIndex dataIndex}.  If the
 * {@link Ext.grid.Column#dataIndex dataIndex} is not explicitly defined (as shown in the
 * example above) it will use the column configuration's index in the Array as the index.

 *
See {@link Ext.grid.Column} for additional configuration options for each column.

 *
Initialization Method 2: an Object

 *
In order to use configuration options from Ext.grid.ColumnModel, an Object may be used to
 * initialize the ColumnModel.  The column configuration Array will be specified in the {@link #columns}
 * config property. The {@link #defaults} config property can be used to apply defaults
 * for all columns, e.g.:

 var colModel = new Ext.grid.ColumnModel({
    columns: [
        { header: "Ticker", width: 60, menuDisabled: false},
        { header: "Company Name", width: 150, id: 'company'},
        { header: "Market Cap."},
        { header: "$ Sales", renderer: money},
        { header: "Employees", resizable: false}
    ],
    defaults: {
        sortable: true,
        menuDisabled: true,
        width: 100
    },
    listeners: {
        {@link #hiddenchange}: function(cm, colIndex, hidden) {
            saveConfig(colIndex, hidden);
        }
    }
});

 *
In both examples above, the ability to apply a CSS class to all cells in a column (including the
 * header) is demonstrated through the use of the {@link Ext.grid.Column#id id} config
 * option. This column could be styled by including the following css:

 //add this css *after* the core css is loaded
.x-grid3-td-company {
    color: red; // entire column will have red font
}
// modify the header row only, adding an icon to the column header
.x-grid3-hd-company {
    background: transparent
        url(../../resources/images/icons/silk/building.png)
        no-repeat 3px 3px ! important;
        padding-left:20px;
}

 * Note that the "Company Name" column could be specified as the
 * {@link Ext.grid.GridPanel}.{@link Ext.grid.GridPanel#autoExpandColumn autoExpandColumn}.
 * @constructor
 * @param {Mixed} config Specify either an Array of {@link Ext.grid.Column} configuration objects or specify
 * a configuration Object (see introductory section discussion utilizing Initialization Method 2 above).
 */
Ext.grid.ColumnModel = Ext.extend(Ext.util.Observable, {

/**
     * @cfg {Number} defaultWidth (optional) The width of columns which have no {@link #width}
     * specified (defaults to 100).  This property shall preferably be configured through the
     * {@link #defaults} config property.
     */
    defaultWidth: 100,

/**
     * @cfg {Boolean} defaultSortable (optional) Default sortable of columns which have no
     * sortable specified (defaults to false).  This property shall preferably be configured
     * through the {@link #defaults} config property.
     */
    defaultSortable: false,

/**
     * @cfg {Array} columns An Array of object literals.  The config options defined by
     * {@link Ext.grid.Column} are the options which may appear in the object literal for each
     * individual column definition.
     */

/**
     * @cfg {Object} defaults Object literal which will be used to apply {@link Ext.grid.Column}
     * configuration options to all {@link #columns}.  Configuration options specified with
     * individual {@link Ext.grid.Column column} configs will supersede these {@link #defaults}.
     */

    constructor : function(config){

/**
         * An Array of {@link Ext.grid.Column Column definition} objects representing the configuration
         * of this ColumnModel.  See {@link Ext.grid.Column} for the configuration properties that may
         * be specified.
         * @property config
         * @type Array
         */
        if(config.columns){
            Ext.apply(this, config);
            this.setConfig(config.columns, true);
        }else{
            this.setConfig(config, true);
        }
        this.addEvents(

/**
             * @event widthchange
             * Fires when the width of a column is programmaticially changed using
             * {@link #setColumnWidth}.
             * Note internal resizing suppresses the event from firing. See also
             * {@link Ext.grid.GridPanel}.{@link #columnresize}.
             * @param {ColumnModel} this
             * @param {Number} columnIndex The column index
             * @param {Number} newWidth The new width
             */
            "widthchange",

/**
             * @event headerchange
             * Fires when the text of a header changes.
             * @param {ColumnModel} this
             * @param {Number} columnIndex The column index
             * @param {String} newText The new header text
             */
            "headerchange",

/**
             * @event hiddenchange
             * Fires when a column is hidden or "unhidden".
             * @param {ColumnModel} this
             * @param {Number} columnIndex The column index
             * @param {Boolean} hidden true if hidden, false otherwise
             */
            "hiddenchange",

/**
             * @event columnmoved
             * Fires when a column is moved.
             * @param {ColumnModel} this
             * @param {Number} oldIndex
             * @param {Number} newIndex
             */
            "columnmoved",

/**
             * @event configchange
             * Fires when the configuration is changed
             * @param {ColumnModel} this
             */
            "configchange"
        );
        Ext.grid.ColumnModel.superclass.constructor.call(this);
    },

/**
     * Returns the id of the column at the specified index.
     * @param {Number} index The column index
     * @return {String} the id
     */
    getColumnId : function(index){
        return this.config[index].id;
    },

    getColumnAt : function(index){
        return this.config[index];
    },

/**
     *
Reconfigures this column model according to the passed Array of column definition objects.
     * For a description of the individual properties of a column definition object, see the
     * Config Options.

     *
Causes the {@link #configchange} event to be fired. A {@link Ext.grid.GridPanel GridPanel}
     * using this ColumnModel will listen for this event and refresh its UI automatically.

     * @param {Array} config Array of Column definition objects.
     * @param {Boolean} initial Specify true to bypass cleanup which deletes the totalWidth
     * and destroys existing editors.
     */
    setConfig : function(config, initial){
        var i, c, len;
        if(!initial){ // cleanup
            delete this.totalWidth;
            for(i = 0, len = this.config.length; i < len; i++){
                c = this.config[i];
                if(c.setEditor){
                    //check here, in case we have a special column like a CheckboxSelectionModel
                    c.setEditor(null);
                }
            }
        }

        // backward compatibility
        this.defaults = Ext.apply({
            width: this.defaultWidth,
            sortable: this.defaultSortable
        }, this.defaults);

        this.config = config;
        this.lookup = {};

        for(i = 0, len = config.length; i < len; i++){
            c = Ext.applyIf(config[i], this.defaults);
            // if no id, create one using column's ordinal position
            if(Ext.isEmpty(c.id)){
                c.id = i;
            }
            if(!c.isColumn){
                var Cls = Ext.grid.Column.types[c.xtype || 'gridcolumn'];
                c = new Cls(c);
                config[i] = c;
            }
            this.lookup[c.id] = c;
        }
        if(!initial){
            this.fireEvent('configchange', this);
        }
    },

/**
     * Returns the column for a specified id.
     * @param {String} id The column id
     * @return {Object} the column
     */
    getColumnById : function(id){
        return this.lookup[id];
    },

/**
     * Returns the index for a specified column id.
     * @param {String} id The column id
     * @return {Number} the index, or -1 if not found
     */
    getIndexById : function(id){
        for(var i = 0, len = this.config.length; i < len; i++){
            if(this.config[i].id == id){
                return i;
            }
        }
        return -1;
    },

/**
     * Moves a column from one position to another.
     * @param {Number} oldIndex The index of the column to move.
     * @param {Number} newIndex The position at which to reinsert the coolumn.
     */
    moveColumn : function(oldIndex, newIndex){
        var c = this.config[oldIndex];
        this.config.splice(oldIndex, 1);
        this.config.splice(newIndex, 0, c);
        this.dataMap = null;
        this.fireEvent("columnmoved", this, oldIndex, newIndex);
    },

/**
     * Returns the number of columns.
     * @param {Boolean} visibleOnly Optional. Pass as true to only include visible columns.
     * @return {Number}
     */
    getColumnCount : function(visibleOnly){
        if(visibleOnly === true){
            var c = 0;
            for(var i = 0, len = this.config.length; i < len; i++){
                if(!this.isHidden(i)){
                    c++;
                }
            }
            return c;
        }
        return this.config.length;
    },

/**
     * Returns the column configs that return true by the passed function that is called
     * with (columnConfig, index)

// returns an array of column config objects for all hidden columns
var columns = grid.getColumnModel().getColumnsBy(function(c){
  return c.hidden;
});

     * @param {Function} fn A function which, when passed a {@link Ext.grid.Column Column} object, must
     * return true if the column is to be included in the returned Array.
     * @param {Object} scope (optional) The scope (this reference) in which the function
     * is executed. Defaults to this ColumnModel.
     * @return {Array} result
     */
    getColumnsBy : function(fn, scope){
        var r = [];
        for(var i = 0, len = this.config.length; i < len; i++){
            var c = this.config[i];
            if(fn.call(scope||this, c, i) === true){
                r[r.length] = c;
            }
        }
        return r;
    },

/**
     * Returns true if the specified column is sortable.
     * @param {Number} col The column index
     * @return {Boolean}
     */
    isSortable : function(col){
        return !!this.config[col].sortable;
    },

/**
     * Returns true if the specified column menu is disabled.
     * @param {Number} col The column index
     * @return {Boolean}
     */
    isMenuDisabled : function(col){
        return !!this.config[col].menuDisabled;
    },

/**
     * Returns the rendering (formatting) function defined for the column.
     * @param {Number} col The column index.
     * @return {Function} The function used to render the cell. See {@link #setRenderer}.
     */
    getRenderer : function(col){
        if(!this.config[col].renderer){
            return Ext.grid.ColumnModel.defaultRenderer;
        }
        return this.config[col].renderer;
    },

    getRendererScope : function(col){
        return this.config[col].scope;
    },

/**
     * Sets the rendering (formatting) function for a column.  See {@link Ext.util.Format} for some
     * default formatting functions.
     * @param {Number} col The column index
     * @param {Function} fn The function to use to process the cell's raw data
     * to return HTML markup for the grid view. The render function is called with
     * the following parameters:

     *
  • value : Object
    The data value for the cell.
    •
     *
  • metadata : Object
    An object in which you may set the following attributes:

     *
    • css : String
      A CSS class name to add to the cell's TD element.
      •
     *
    • attr : String
      An HTML attribute definition string to apply to the data container element within the table cell
     * (e.g. 'style="color:red;"').
    •
     *
  • record : Ext.data.record
    The {@link Ext.data.Record} from which the data was extracted.
    •
     *
  • rowIndex : Number
    Row index
    •
     *
  • colIndex : Number
    Column index
    •
     *
  • store : Ext.data.Store
    The {@link Ext.data.Store} object from which the Record was extracted.

     */
    setRenderer : function(col, fn){
        this.config[col].renderer = fn;
    },

/**
     * Returns the width for the specified column.
     * @param {Number} col The column index
     * @return {Number}
     */
    getColumnWidth : function(col){
        return this.config[col].width;
    },

/**
     * Sets the width for a column.
     * @param {Number} col The column index
     * @param {Number} width The new width
     * @param {Boolean} suppressEvent True to suppress firing the {@link #widthchange}
     * event. Defaults to false.
     */
    setColumnWidth : function(col, width, suppressEvent){
        this.config[col].width = width;
        this.totalWidth = null;
        if(!suppressEvent){
             this.fireEvent("widthchange", this, col, width);
        }
    },

/**
     * Returns the total width of all columns.
     * @param {Boolean} includeHidden True to include hidden column widths
     * @return {Number}
     */
    getTotalWidth : function(includeHidden){
        if(!this.totalWidth){
            this.totalWidth = 0;
            for(var i = 0, len = this.config.length; i < len; i++){
                if(includeHidden || !this.isHidden(i)){
                    this.totalWidth += this.getColumnWidth(i);
                }
            }
        }
        return this.totalWidth;
    },

/**
     * Returns the header for the specified column.
     * @param {Number} col The column index
     * @return {String}
     */
    getColumnHeader : function(col){
        return this.config[col].header;
    },

/**
     * Sets the header for a column.
     * @param {Number} col The column index
     * @param {String} header The new header
     */
    setColumnHeader : function(col, header){
        this.config[col].header = header;
        this.fireEvent("headerchange", this, col, header);
    },

/**
     * Returns the tooltip for the specified column.
     * @param {Number} col The column index
     * @return {String}
     */
    getColumnTooltip : function(col){
            return this.config[col].tooltip;
    },

/**
     * Sets the tooltip for a column.
     * @param {Number} col The column index
     * @param {String} tooltip The new tooltip
     */
    setColumnTooltip : function(col, tooltip){
            this.config[col].tooltip = tooltip;
    },

/**
     * Returns the dataIndex for the specified column.

// Get field name for the column
var fieldName = grid.getColumnModel().getDataIndex(columnIndex);

     * @param {Number} col The column index
     * @return {String} The column's dataIndex
     */
    getDataIndex : function(col){
        return this.config[col].dataIndex;
    },

/**
     * Sets the dataIndex for a column.
     * @param {Number} col The column index
     * @param {String} dataIndex The new dataIndex
     */
    setDataIndex : function(col, dataIndex){
        this.config[col].dataIndex = dataIndex;
    },

/**
     * Finds the index of the first matching column for the given dataIndex.
     * @param {String} col The dataIndex to find
     * @return {Number} The column index, or -1 if no match was found
     */
    findColumnIndex : function(dataIndex){
        var c = this.config;
        for(var i = 0, len = c.length; i < len; i++){
            if(c[i].dataIndex == dataIndex){
                return i;
            }
        }
        return -1;
    },

/**
     * Returns true if the cell is editable.

var store = new Ext.data.Store({...});
var colModel = new Ext.grid.ColumnModel({
  columns: [...],
  isCellEditable: function(col, row) {
    var record = store.getAt(row);
    if (record.get('readonly')) { // replace with your condition
      return false;
    }
    return Ext.grid.ColumnModel.prototype.isCellEditable.call(this, col, row);
  }
});
var grid = new Ext.grid.GridPanel({
  store: store,
  colModel: colModel,
  ...
});

     * @param {Number} colIndex The column index
     * @param {Number} rowIndex The row index
     * @return {Boolean}
     */
    isCellEditable : function(colIndex, rowIndex){
        var c = this.config[colIndex],
            ed = c.editable;

        //force boolean
        return !!(ed || (!Ext.isDefined(ed) && c.editor));
    },

/**
     * Returns the editor defined for the cell/column.
     * @param {Number} colIndex The column index
     * @param {Number} rowIndex The row index
     * @return {Ext.Editor} The {@link Ext.Editor Editor} that was created to wrap
     * the {@link Ext.form.Field Field} used to edit the cell.
     */
    getCellEditor : function(colIndex, rowIndex){
        return this.config[colIndex].getCellEditor(rowIndex);
    },

/**
     * Sets if a column is editable.
     * @param {Number} col The column index
     * @param {Boolean} editable True if the column is editable
     */
    setEditable : function(col, editable){
        this.config[col].editable = editable;
    },

/**
     * Returns true if the column is {@link Ext.grid.Column#hidden hidden},
     * false otherwise.
     * @param {Number} colIndex The column index
     * @return {Boolean}
     */
    isHidden : function(colIndex){
        return !!this.config[colIndex].hidden; // ensure returns boolean
    },

/**
     * Returns true if the column is {@link Ext.grid.Column#fixed fixed},
     * false otherwise.
     * @param {Number} colIndex The column index
     * @return {Boolean}
     */
    isFixed : function(colIndex){
        return !!this.config[colIndex].fixed;
    },

/**
     * Returns true if the column can be resized
     * @return {Boolean}
     */
    isResizable : function(colIndex){
        return colIndex >= 0 && this.config[colIndex].resizable !== false && this.config[colIndex].fixed !== true;
    },

/**
     * Sets if a column is hidden.

myGrid.getColumnModel().setHidden(0, true); // hide column 0 (0 = the first column).

     * @param {Number} colIndex The column index
     * @param {Boolean} hidden True if the column is hidden
     */
    setHidden : function(colIndex, hidden){
        var c = this.config[colIndex];
        if(c.hidden !== hidden){
            c.hidden = hidden;
            this.totalWidth = null;
            this.fireEvent("hiddenchange", this, colIndex, hidden);
        }
    },

/**
     * Sets the editor for a column and destroys the prior editor.
     * @param {Number} col The column index
     * @param {Object} editor The editor object
     */
    setEditor : function(col, editor){
        this.config[col].setEditor(editor);
    },

/**
     * Destroys this column model by purging any event listeners, and removing any editors.
     */
    destroy : function(){
        var c;
        for(var i = 0, len = this.config.length; i < len; i++){
            c = this.config[i];
            if(c.setEditor){
                c.setEditor(null);
            }
        }
        this.purgeListeners();
    }
});

// private
Ext.grid.ColumnModel.defaultRenderer = function(value){
    if(typeof value == "string" && value.length < 1){
        return " ";
    }
    return value;
};


The source code

/*!
 * licensing@extjs.com
 * http://www.extjs.com/license
 */

/**
 * @class Ext.list.ColumnResizer
 * @extends Ext.util.Observable
 *
Supporting Class for Ext.list.ListView

 * @constructor
 * @param {Object} config
 */
Ext.list.ColumnResizer = Ext.extend(Ext.util.Observable, {

/**
     * @cfg {Number} minPct The minimum percentage to allot for any column (defaults to .05)
     */
    minPct: .05,

    constructor: function(config){
        Ext.apply(this, config);
        Ext.list.ColumnResizer.superclass.constructor.call(this);
    },
    init : function(listView){
        this.view = listView;
        listView.on('render', this.initEvents, this);
    },

    initEvents : function(view){
        view.mon(view.innerHd, 'mousemove', this.handleHdMove, this);
        this.tracker = new Ext.dd.DragTracker({
            onBeforeStart: this.onBeforeStart.createDelegate(this),
            onStart: this.onStart.createDelegate(this),
            onDrag: this.onDrag.createDelegate(this),
            onEnd: this.onEnd.createDelegate(this),
            tolerance: 3,
            autoStart: 300
        });
        this.tracker.initEl(view.innerHd);
        view.on('beforedestroy', this.tracker.destroy, this.tracker);
    },

    handleHdMove : function(e, t){
        var hw = 5,
            x = e.getPageX(),
            hd = e.getTarget('em', 3, true);
        if(hd){
            var r = hd.getRegion(),
                ss = hd.dom.style,
                pn = hd.dom.parentNode;

            if(x - r.left <= hw && pn != pn.parentNode.firstChild){
                this.activeHd = Ext.get(pn.previousSibling.firstChild);
                ss.cursor = Ext.isWebKit ? 'e-resize' : 'col-resize';
            } else if(r.right - x <= hw && pn != pn.parentNode.lastChild.previousSibling){
                this.activeHd = hd;
                ss.cursor = Ext.isWebKit ? 'w-resize' : 'col-resize';
            } else{
                delete this.activeHd;
                ss.cursor = '';
            }
        }
    },

    onBeforeStart : function(e){
        this.dragHd = this.activeHd;
        return !!this.dragHd;
    },

    onStart: function(e){
        this.view.disableHeaders = true;
        this.proxy = this.view.el.createChild({cls:'x-list-resizer'});
        this.proxy.setHeight(this.view.el.getHeight());

        var x = this.tracker.getXY()[0],
            w = this.view.innerHd.getWidth();

        this.hdX = this.dragHd.getX();
        this.hdIndex = this.view.findHeaderIndex(this.dragHd);

        this.proxy.setX(this.hdX);
        this.proxy.setWidth(x-this.hdX);

        this.minWidth = w*this.minPct;
        this.maxWidth = w - (this.minWidth*(this.view.columns.length-1-this.hdIndex));
    },

    onDrag: function(e){
        var cursorX = this.tracker.getXY()[0];
        this.proxy.setWidth((cursorX-this.hdX).constrain(this.minWidth, this.maxWidth));
    },

    onEnd: function(e){
        /* calculate desired width by measuring proxy and then remove it */
        var nw = this.proxy.getWidth();
        this.proxy.remove();

        var index = this.hdIndex,
            vw = this.view,
            cs = vw.columns,
            len = cs.length,
            w = this.view.innerHd.getWidth(),
            minPct = this.minPct * 100,
            pct = Math.ceil((nw * vw.maxWidth) / w),
            diff = (cs[index].width * 100) - pct,
            eachItem = Math.floor(diff / (len-1-index)),
            mod = diff - (eachItem * (len-1-index));

        for(var i = index+1; i < len; i++){
            var cw = (cs[i].width * 100) + eachItem,
                ncw = Math.max(minPct, cw);
            if(cw != ncw){
                mod += cw - ncw;
            }
            cs[i].width = ncw / 100;
        }
        cs[index].width = pct / 100;
        cs[index+1].width += (mod / 100);
        delete this.dragHd;
        vw.setHdWidths();
        vw.refresh();
        setTimeout(function(){
            vw.disableHeaders = false;
        }, 100);
    }
});

// Backwards compatibility alias
Ext.ListView.ColumnResizer = Ext.list.ColumnResizer;


The source code

/*!
 * licensing@extjs.com
 * http://www.extjs.com/license
 */
// private
// This is a support class used internally by the Grid components
Ext.grid.SplitDragZone = Ext.extend(Ext.dd.DDProxy, {
    fly: Ext.Element.fly,

    constructor : function(grid, hd, hd2){
        this.grid = grid;
        this.view = grid.getView();
        this.proxy = this.view.resizeProxy;
        Ext.grid.SplitDragZone.superclass.constructor.call(this, hd,
            "gridSplitters" + this.grid.getGridEl().id, {
            dragElId : Ext.id(this.proxy.dom), resizeFrame:false
        });
        this.setHandleElId(Ext.id(hd));
        this.setOuterHandleElId(Ext.id(hd2));
        this.scroll = false;
    },

    b4StartDrag : function(x, y){
        this.view.headersDisabled = true;
        this.proxy.setHeight(this.view.mainWrap.getHeight());
        var w = this.cm.getColumnWidth(this.cellIndex);
        var minw = Math.max(w-this.grid.minColumnWidth, 0);
        this.resetConstraints();
        this.setXConstraint(minw, 1000);
        this.setYConstraint(0, 0);
        this.minX = x - minw;
        this.maxX = x + 1000;
        this.startPos = x;
        Ext.dd.DDProxy.prototype.b4StartDrag.call(this, x, y);
    },

    handleMouseDown : function(e){
        var ev = Ext.EventObject.setEvent(e);
        var t = this.fly(ev.getTarget());
        if(t.hasClass("x-grid-split")){
            this.cellIndex = this.view.getCellIndex(t.dom);
            this.split = t.dom;
            this.cm = this.grid.colModel;
            if(this.cm.isResizable(this.cellIndex) && !this.cm.isFixed(this.cellIndex)){
                Ext.grid.SplitDragZone.superclass.handleMouseDown.apply(this, arguments);
            }
        }
    },

    endDrag : function(e){
        this.view.headersDisabled = false;
        var endX = Math.max(this.minX, Ext.lib.Event.getPageX(e));
        var diff = endX - this.startPos;
        this.view.onColumnSplitterMoved(this.cellIndex, this.cm.getColumnWidth(this.cellIndex)+diff);
    },

    autoOffset : function(){
        this.setDelta(0,0);
    }
});


The source code

/*!
 * licensing@extjs.com
 * http://www.extjs.com/license
 */

/**
 * @class Ext.form.ComboBox
 * @extends Ext.form.TriggerField
 *
A combobox control with support for autocomplete, remote-loading, paging and many other features.

 *
A ComboBox works in a similar manner to a traditional HTML <select> field. The difference is
 * that to submit the {@link #valueField}, you must specify a {@link #hiddenName} to create a hidden input
 * field to hold the value of the valueField. The {@link #displayField} is shown in the text field
 * which is named according to the {@link #name}.

 *
Events

 *
To do something when something in ComboBox is selected, configure the select event:

var cb = new Ext.form.ComboBox({
    // all of your config options
    listeners:{
         scope: yourScope,
         'select': yourFunction
    }
});

// Alternatively, you can assign events after the object is created:
var cb = new Ext.form.ComboBox(yourOptions);
cb.on('select', yourFunction, yourScope);
 *

 *
 *
ComboBox in Grid

 *
If using a ComboBox in an {@link Ext.grid.EditorGridPanel Editor Grid} a {@link Ext.grid.Column#renderer renderer}
 * will be needed to show the displayField when the editor is not active.  Set up the renderer manually, or implement
 * a reusable render, for example:

// create reusable renderer
Ext.util.Format.comboRenderer = function(combo){
    return function(value){
        var record = combo.findRecord(combo.{@link #valueField}, value);
        return record ? record.get(combo.{@link #displayField}) : combo.{@link #valueNotFoundText};
    }
}

// create the combo instance
var combo = new Ext.form.ComboBox({
    {@link #typeAhead}: true,
    {@link #triggerAction}: 'all',
    {@link #lazyRender}:true,
    {@link #mode}: 'local',
    {@link #store}: new Ext.data.ArrayStore({
        id: 0,
        fields: [
            'myId',
            'displayText'
        ],
        data: [[1, 'item1'], [2, 'item2']]
    }),
    {@link #valueField}: 'myId',
    {@link #displayField}: 'displayText'
});

// snippet of column model used within grid
var cm = new Ext.grid.ColumnModel([{
       ...
    },{
       header: "Some Header",
       dataIndex: 'whatever',
       width: 130,
       editor: combo, // specify reference to combo instance
       renderer: Ext.util.Format.comboRenderer(combo) // pass combo instance to reusable renderer
    },
    ...
]);
 *

 *
 *
Filtering

 *
A ComboBox {@link #doQuery uses filtering itself}, for information about filtering the ComboBox
 * store manually see {@link #lastQuery}.

 * @constructor
 * Create a new ComboBox.
 * @param {Object} config Configuration options
 * @xtype combo
 */
Ext.form.ComboBox = Ext.extend(Ext.form.TriggerField, {

/**
     * @cfg {Mixed} transform The id, DOM node or element of an existing HTML SELECT to convert to a ComboBox.
     * Note that if you specify this and the combo is going to be in an {@link Ext.form.BasicForm} or
     * {@link Ext.form.FormPanel}, you must also set {@link #lazyRender} = true.
     */

/**
     * @cfg {Boolean} lazyRender true to prevent the ComboBox from rendering until requested
     * (should always be used when rendering into an {@link Ext.Editor} (e.g. {@link Ext.grid.EditorGridPanel Grids}),
     * defaults to false).
     */

/**
     * @cfg {String/Object} autoCreate
A {@link Ext.DomHelper DomHelper} element spec, or true for a default
     * element spec. Used to create the {@link Ext.Component#getEl Element} which will encapsulate this Component.
     * See {@link Ext.Component#autoEl autoEl} for details.  Defaults to:

     *
{tag: "input", type: "text", size: "24", autocomplete: "off"}

     */

/**
     * @cfg {Ext.data.Store/Array} store The data source to which this combo is bound (defaults to undefined).
     * Acceptable values for this property are:
     *

     *
  • any {@link Ext.data.Store Store} subclass
    •
     *
  • an Array : Arrays will be converted to a {@link Ext.data.ArrayStore} internally,
     * automatically generating {@link Ext.data.Field#name field names} to work with all data components.
     *

     *
    • 1-dimensional array : (e.g., ['Foo','Bar'])

     * A 1-dimensional array will automatically be expanded (each array item will be used for both the combo
     * {@link #valueField} and {@link #displayField})
      •
     *
    • 2-dimensional array : (e.g., [['f','Foo'],['b','Bar']])

     * For a multi-dimensional array, the value in index 0 of each item will be assumed to be the combo
     * {@link #valueField}, while the value at index 1 is assumed to be the combo {@link #displayField}.
     *

     *
See also {@link #mode}.

     */

/**
     * @cfg {String} title If supplied, a header element is created containing this text and added into the top of
     * the dropdown list (defaults to undefined, with no header element)
     */

    // private
    defaultAutoCreate : {tag: "input", type: "text", size: "24", autocomplete: "off"},

/**
     * @cfg {Number} listWidth The width (used as a parameter to {@link Ext.Element#setWidth}) of the dropdown
     * list (defaults to the width of the ComboBox field).  See also {@link #minListWidth}
     */

/**
     * @cfg {String} displayField The underlying {@link Ext.data.Field#name data field name} to bind to this
     * ComboBox (defaults to undefined if {@link #mode} = 'remote' or 'field1' if
     * {@link #transform transforming a select} or if the {@link #store field name is autogenerated based on
     * the store configuration}).
     *
See also {@link #valueField}.

     *
Note: if using a ComboBox in an {@link Ext.grid.EditorGridPanel Editor Grid} a
     * {@link Ext.grid.Column#renderer renderer} will be needed to show the displayField when the editor is not
     * active.

     */

/**
     * @cfg {String} valueField The underlying {@link Ext.data.Field#name data value name} to bind to this
     * ComboBox (defaults to undefined if {@link #mode} = 'remote' or 'field2' if
     * {@link #transform transforming a select} or if the {@link #store field name is autogenerated based on
     * the store configuration}).
     *
Note: use of a valueField requires the user to make a selection in order for a value to be
     * mapped.  See also {@link #hiddenName}, {@link #hiddenValue}, and {@link #displayField}.

     */

/**
     * @cfg {String} hiddenName If specified, a hidden form field with this name is dynamically generated to store the
     * field's data value (defaults to the underlying DOM element's name). Required for the combo's value to automatically
     * post during a form submission.  See also {@link #valueField}.
     *
Note: the hidden field's id will also default to this name if {@link #hiddenId} is not specified.
     * The ComboBox {@link Ext.Component#id id} and the {@link #hiddenId} should be different, since
     * no two DOM nodes should share the same id.  So, if the ComboBox {@link Ext.form.Field#name name} and
     * hiddenName are the same, you should specify a unique {@link #hiddenId}.

     */

/**
     * @cfg {String} hiddenId If {@link #hiddenName} is specified, hiddenId can also be provided
     * to give the hidden field a unique id (defaults to the {@link #hiddenName}).  The hiddenId
     * and combo {@link Ext.Component#id id} should be different, since no two DOM
     * nodes should share the same id.
     */

/**
     * @cfg {String} hiddenValue Sets the initial value of the hidden field if {@link #hiddenName} is
     * specified to contain the selected {@link #valueField}, from the Store. Defaults to the configured
     * {@link Ext.form.Field#value value}.
     */

/**
     * @cfg {String} listClass The CSS class to add to the predefined 'x-combo-list' class
     * applied the dropdown list element (defaults to '').
     */
    listClass : '',

/**
     * @cfg {String} selectedClass CSS class to apply to the selected item in the dropdown list
     * (defaults to 'x-combo-selected')
     */
    selectedClass : 'x-combo-selected',

/**
     * @cfg {String} listEmptyText The empty text to display in the data view if no items are found.
     * (defaults to '')
     */
    listEmptyText: '',

/**
     * @cfg {String} triggerClass An additional CSS class used to style the trigger button.  The trigger will always
     * get the class 'x-form-trigger' and triggerClass will be appended if specified
     * (defaults to 'x-form-arrow-trigger' which displays a downward arrow icon).
     */
    triggerClass : 'x-form-arrow-trigger',

/**
     * @cfg {Boolean/String} shadow true or "sides" for the default effect, "frame" for
     * 4-way shadow, and "drop" for bottom-right
     */
    shadow : 'sides',

/**
     * @cfg {String/Array} listAlign A valid anchor position value. See {@link Ext.Element#alignTo} for details
     * on supported anchor positions and offsets. To specify x/y offsets as well, this value
     * may be specified as an Array of {@link Ext.Element#alignTo} method arguments.

     *
[ 'tl-bl?', [6,0] ]
(defaults to 'tl-bl?')
     */
    listAlign : 'tl-bl?',

/**
     * @cfg {Number} maxHeight The maximum height in pixels of the dropdown list before scrollbars are shown
     * (defaults to 300)
     */
    maxHeight : 300,

/**
     * @cfg {Number} minHeight The minimum height in pixels of the dropdown list when the list is constrained by its
     * distance to the viewport edges (defaults to 90)
     */
    minHeight : 90,

/**
     * @cfg {String} triggerAction The action to execute when the trigger is clicked.
     *

     *
  • 'query' : Default
     *
    {@link #doQuery run the query} using the {@link Ext.form.Field#getRawValue raw value}.
    •
     *
  • 'all' :
     *
    {@link #doQuery run the query} specified by the {@link #allQuery} config option
    •
     *

     *
See also {@link #queryParam}.

     */
    triggerAction : 'query',

/**
     * @cfg {Number} minChars The minimum number of characters the user must type before autocomplete and
     * {@link #typeAhead} activate (defaults to 4 if {@link #mode} = 'remote' or 0 if
     * {@link #mode} = 'local', does not apply if
     * {@link Ext.form.TriggerField#editable editable} = false).
     */
    minChars : 4,

/**
     * @cfg {Boolean} autoSelect true to select the first result gathered by the data store (defaults
     * to true).  A false value would require a manual selection from the dropdown list to set the components value
     * unless the value of ({@link #typeAheadDelay}) were true.
     */
    autoSelect : true,

/**
     * @cfg {Boolean} typeAhead true to populate and autoselect the remainder of the text being
     * typed after a configurable delay ({@link #typeAheadDelay}) if it matches a known value (defaults
     * to false)
     */
    typeAhead : false,

/**
     * @cfg {Number} queryDelay The length of time in milliseconds to delay between the start of typing and
     * sending the query to filter the dropdown list (defaults to 500 if {@link #mode} = 'remote'
     * or 10 if {@link #mode} = 'local')
     */
    queryDelay : 500,

/**
     * @cfg {Number} pageSize If greater than 0, a {@link Ext.PagingToolbar} is displayed in the
     * footer of the dropdown list and the {@link #doQuery filter queries} will execute with page start and
     * {@link Ext.PagingToolbar#pageSize limit} parameters. Only applies when {@link #mode} = 'remote'
     * (defaults to 0).
     */
    pageSize : 0,

/**
     * @cfg {Boolean} selectOnFocus true to select any existing text in the field immediately on focus.
     * Only applies when {@link Ext.form.TriggerField#editable editable} = true (defaults to
     * false).
     */
    selectOnFocus : false,

/**
     * @cfg {String} queryParam Name of the query ({@link Ext.data.Store#baseParam baseParam} name for the store)
     * as it will be passed on the querystring (defaults to 'query')
     */
    queryParam : 'query',

/**
     * @cfg {String} loadingText The text to display in the dropdown list while data is loading.  Only applies
     * when {@link #mode} = 'remote' (defaults to 'Loading...')
     */
    loadingText : 'Loading...',

/**
     * @cfg {Boolean} resizable true to add a resize handle to the bottom of the dropdown list
     * (creates an {@link Ext.Resizable} with 'se' {@link Ext.Resizable#pinned pinned} handles).
     * Defaults to false.
     */
    resizable : false,

/**
     * @cfg {Number} handleHeight The height in pixels of the dropdown list resize handle if
     * {@link #resizable} = true (defaults to 8)
     */
    handleHeight : 8,

/**
     * @cfg {String} allQuery The text query to send to the server to return all records for the list
     * with no filtering (defaults to '')
     */
    allQuery: '',

/**
     * @cfg {String} mode Acceptable values are:
     *

     *
  • 'remote' : Default
     *
    Automatically loads the {@link #store} the first time the trigger
     * is clicked. If you do not want the store to be automatically loaded the first time the trigger is
     * clicked, set to 'local' and manually load the store.  To force a requery of the store
     * every time the trigger is clicked see {@link #lastQuery}.
    •
     *
  • 'local' :
     *
    ComboBox loads local data

     *

var combo = new Ext.form.ComboBox({
    renderTo: document.body,
    mode: 'local',
    store: new Ext.data.ArrayStore({
        id: 0,
        fields: [
            'myId',  // numeric value is the key
            'displayText'
        ],
        data: [[1, 'item1'], [2, 'item2']]  // data is local
    }),
    valueField: 'myId',
    displayField: 'displayText',
    triggerAction: 'all'
});
     *
    •
     *

     */
    mode: 'remote',

/**
     * @cfg {Number} minListWidth The minimum width of the dropdown list in pixels (defaults to 70, will
     * be ignored if {@link #listWidth} has a higher value)
     */
    minListWidth : 70,

/**
     * @cfg {Boolean} forceSelection true to restrict the selected value to one of the values in the list,
     * false to allow the user to set arbitrary text into the field (defaults to false)
     */
    forceSelection : false,

/**
     * @cfg {Number} typeAheadDelay The length of time in milliseconds to wait until the typeahead text is displayed
     * if {@link #typeAhead} = true (defaults to 250)
     */
    typeAheadDelay : 250,

/**
     * @cfg {String} valueNotFoundText When using a name/value combo, if the value passed to setValue is not found in
     * the store, valueNotFoundText will be displayed as the field text if defined (defaults to undefined). If this
     * default text is used, it means there is no value set and no validation will occur on this field.
     */

/**
     * @cfg {Boolean} lazyInit true to not initialize the list for this combo until the field is focused
     * (defaults to true)
     */
    lazyInit : true,

/**
     * @cfg {Boolean} clearFilterOnReset true to clear any filters on the store (when in local mode) when reset is called
     * (defaults to true)
     */
    clearFilterOnReset : true,

/**
     * @cfg {Boolean} submitValue False to clear the name attribute on the field so that it is not submitted during a form post.
     * If a hiddenName is specified, setting this to true will cause both the hidden field and the element to be submitted.
     * Defaults to undefined.
     */
    submitValue: undefined,

/**
     * The value of the match string used to filter the store. Delete this property to force a requery.
     * Example use:
     *

var combo = new Ext.form.ComboBox({
    ...
    mode: 'remote',
    ...
    listeners: {
        // delete the previous query in the beforequery event or set
        // combo.lastQuery = null (this will reload the store the next time it expands)
        beforequery: function(qe){
            delete qe.combo.lastQuery;
        }
    }
});
     *

     * To make sure the filter in the store is not cleared the first time the ComboBox trigger is used
     * configure the combo with lastQuery=''. Example use:
     *

var combo = new Ext.form.ComboBox({
    ...
    mode: 'local',
    triggerAction: 'all',
    lastQuery: ''
});
     *

     * @property lastQuery
     * @type String
     */

    // private
    initComponent : function(){
        Ext.form.ComboBox.superclass.initComponent.call(this);
        this.addEvents(

/**
             * @event expand
             * Fires when the dropdown list is expanded
             * @param {Ext.form.ComboBox} combo This combo box
             */
            'expand',

/**
             * @event collapse
             * Fires when the dropdown list is collapsed
             * @param {Ext.form.ComboBox} combo This combo box
             */
            'collapse',

/**
             * @event beforeselect
             * Fires before a list item is selected. Return false to cancel the selection.
             * @param {Ext.form.ComboBox} combo This combo box
             * @param {Ext.data.Record} record The data record returned from the underlying store
             * @param {Number} index The index of the selected item in the dropdown list
             */
            'beforeselect',

/**
             * @event select
             * Fires when a list item is selected
             * @param {Ext.form.ComboBox} combo This combo box
             * @param {Ext.data.Record} record The data record returned from the underlying store
             * @param {Number} index The index of the selected item in the dropdown list
             */
            'select',

/**
             * @event beforequery
             * Fires before all queries are processed. Return false to cancel the query or set the queryEvent's
             * cancel property to true.
             * @param {Object} queryEvent An object that has these properties:

             *
  • combo : Ext.form.ComboBox
    This combo box
    •
             *
  • query : String
    The query
    •
             *
  • forceAll : Boolean
    True to force "all" query
    •
             *
  • cancel : Boolean
    Set to true to cancel the query
    •
             *

             */
            'beforequery'
        );
        if(this.transform){
            var s = Ext.getDom(this.transform);
            if(!this.hiddenName){
                this.hiddenName = s.name;
            }
            if(!this.store){
                this.mode = 'local';
                var d = [], opts = s.options;
                for(var i = 0, len = opts.length;i < len; i++){
                    var o = opts[i],
                        value = (o.hasAttribute ? o.hasAttribute('value') : o.getAttributeNode('value').specified) ? o.value : o.text;
                    if(o.selected && Ext.isEmpty(this.value, true)) {
                        this.value = value;
                    }
                    d.push([value, o.text]);
                }
                this.store = new Ext.data.ArrayStore({
                    'id': 0,
                    fields: ['value', 'text'],
                    data : d,
                    autoDestroy: true
                });
                this.valueField = 'value';
                this.displayField = 'text';
            }
            s.name = Ext.id(); // wipe out the name in case somewhere else they have a reference
            if(!this.lazyRender){
                this.target = true;
                this.el = Ext.DomHelper.insertBefore(s, this.autoCreate || this.defaultAutoCreate);
                this.render(this.el.parentNode, s);
            }
            Ext.removeNode(s);
        }
        //auto-configure store from local array data
        else if(this.store){
            this.store = Ext.StoreMgr.lookup(this.store);
            if(this.store.autoCreated){
                this.displayField = this.valueField = 'field1';
                if(!this.store.expandData){
                    this.displayField = 'field2';
                }
                this.mode = 'local';
            }
        }

        this.selectedIndex = -1;
        if(this.mode == 'local'){
            if(!Ext.isDefined(this.initialConfig.queryDelay)){
                this.queryDelay = 10;
            }
            if(!Ext.isDefined(this.initialConfig.minChars)){
                this.minChars = 0;
            }
        }
    },

    // private
    onRender : function(ct, position){
        if(this.hiddenName && !Ext.isDefined(this.submitValue)){
            this.submitValue = false;
        }
        Ext.form.ComboBox.superclass.onRender.call(this, ct, position);
        if(this.hiddenName){
            this.hiddenField = this.el.insertSibling({tag:'input', type:'hidden', name: this.hiddenName,
                    id: (this.hiddenId||this.hiddenName)}, 'before', true);

        }
        if(Ext.isGecko){
            this.el.dom.setAttribute('autocomplete', 'off');
        }

        if(!this.lazyInit){
            this.initList();
        }else{
            this.on('focus', this.initList, this, {single: true});
        }
    },

    // private
    initValue : function(){
        Ext.form.ComboBox.superclass.initValue.call(this);
        if(this.hiddenField){
            this.hiddenField.value =
                Ext.value(Ext.isDefined(this.hiddenValue) ? this.hiddenValue : this.value, '');
        }
    },

    getParentZIndex : function(){
        var zindex;
        if (this.ownerCt){
            this.findParentBy(function(ct){
                zindex = parseInt(ct.getPositionEl().getStyle('z-index'), 10);
                return !!zindex;
            });
        }
        return zindex;
    },

    // private
    initList : function(){
        if(!this.list){
            var cls = 'x-combo-list',
                listParent = Ext.getDom(this.getListParent() || Ext.getBody()),
                zindex = parseInt(Ext.fly(listParent).getStyle('z-index'), 10);

            if (!zindex) {
                zindex = this.getParentZIndex();
            }

            this.list = new Ext.Layer({
                parentEl: listParent,
                shadow: this.shadow,
                cls: [cls, this.listClass].join(' '),
                constrain:false,
                zindex: (zindex || 12000) + 5
            });

            var lw = this.listWidth || Math.max(this.wrap.getWidth(), this.minListWidth);
            this.list.setSize(lw, 0);
            this.list.swallowEvent('mousewheel');
            this.assetHeight = 0;
            if(this.syncFont !== false){
                this.list.setStyle('font-size', this.el.getStyle('font-size'));
            }
            if(this.title){
                this.header = this.list.createChild({cls:cls+'-hd', html: this.title});
                this.assetHeight += this.header.getHeight();
            }

            this.innerList = this.list.createChild({cls:cls+'-inner'});
            this.mon(this.innerList, 'mouseover', this.onViewOver, this);
            this.mon(this.innerList, 'mousemove', this.onViewMove, this);
            this.innerList.setWidth(lw - this.list.getFrameWidth('lr'));

            if(this.pageSize){
                this.footer = this.list.createChild({cls:cls+'-ft'});
                this.pageTb = new Ext.PagingToolbar({
                    store: this.store,
                    pageSize: this.pageSize,
                    renderTo:this.footer
                });
                this.assetHeight += this.footer.getHeight();
            }

            if(!this.tpl){

/**
                * @cfg {String/Ext.XTemplate} tpl
The template string, or {@link Ext.XTemplate} instance to
                * use to display each item in the dropdown list. The dropdown list is displayed in a
                * DataView. See {@link #view}.

                *
The default template string is:

                  '<tpl for="."><div class="x-combo-list-item">{' + this.displayField + '}</div></tpl>'
                *

                *
Override the default value to create custom UI layouts for items in the list.
                * For example:

                  '<tpl for="."><div ext:qtip="{state}. {nick}" class="x-combo-list-item">{state}</div></tpl>'
                *

                *
The template must contain one or more substitution parameters using field
                * names from the Combo's {@link #store Store}. In the example above an
                *
ext:qtip
 attribute is added to display other fields from the Store.

                *
To preserve the default visual look of list items, add the CSS class name
                *
x-combo-list-item
 to the template's container element.

                *
Also see {@link #itemSelector} for additional details.

                */
                this.tpl = '
{' + this.displayField + '}
';

/**
                 * @cfg {String} itemSelector
                 *
A simple CSS selector (e.g. div.some-class or span:first-child) that will be
                 * used to determine what nodes the {@link #view Ext.DataView} which handles the dropdown
                 * display will be working with.

                 *
Note: this setting is required if a custom XTemplate has been
                 * specified in {@link #tpl} which assigns a class other than
'x-combo-list-item'

                 * to dropdown list items
                 */
            }

/**
            * The {@link Ext.DataView DataView} used to display the ComboBox's options.
            * @type Ext.DataView
            */
            this.view = new Ext.DataView({
                applyTo: this.innerList,
                tpl: this.tpl,
                singleSelect: true,
                selectedClass: this.selectedClass,
                itemSelector: this.itemSelector || '.' + cls + '-item',
                emptyText: this.listEmptyText,
                deferEmptyText: false
            });

            this.mon(this.view, {
                containerclick : this.onViewClick,
                click : this.onViewClick,
                scope :this
            });

            this.bindStore(this.store, true);

            if(this.resizable){
                this.resizer = new Ext.Resizable(this.list,  {
                   pinned:true, handles:'se'
                });
                this.mon(this.resizer, 'resize', function(r, w, h){
                    this.maxHeight = h-this.handleHeight-this.list.getFrameWidth('tb')-this.assetHeight;
                    this.listWidth = w;
                    this.innerList.setWidth(w - this.list.getFrameWidth('lr'));
                    this.restrictHeight();
                }, this);

                this[this.pageSize?'footer':'innerList'].setStyle('margin-bottom', this.handleHeight+'px');
            }
        }
    },

/**
     *
Returns the element used to house this ComboBox's pop-up list. Defaults to the document body.

     * A custom implementation may be provided as a configuration option if the floating list needs to be rendered
     * to a different Element. An example might be rendering the list inside a Menu so that clicking
     * the list does not hide the Menu:

var store = new Ext.data.ArrayStore({
    autoDestroy: true,
    fields: ['initials', 'fullname'],
    data : [
        ['FF', 'Fred Flintstone'],
        ['BR', 'Barney Rubble']
    ]
});

var combo = new Ext.form.ComboBox({
    store: store,
    displayField: 'fullname',
    emptyText: 'Select a name...',
    forceSelection: true,
    getListParent: function() {
        return this.el.up('.x-menu');
    },
    iconCls: 'no-icon', //use iconCls if placing within menu to shift to right side of menu
    mode: 'local',
    selectOnFocus: true,
    triggerAction: 'all',
    typeAhead: true,
    width: 135
});

var menu = new Ext.menu.Menu({
    id: 'mainMenu',
    items: [
        combo // A Field in a Menu
    ]
});

     */
    getListParent : function() {
        return document.body;
    },

/**
     * Returns the store associated with this combo.
     * @return {Ext.data.Store} The store
     */
    getStore : function(){
        return this.store;
    },

    // private
    bindStore : function(store, initial){
        if(this.store && !initial){
            if(this.store !== store && this.store.autoDestroy){
                this.store.destroy();
            }else{
                this.store.un('beforeload', this.onBeforeLoad, this);
                this.store.un('load', this.onLoad, this);
                this.store.un('exception', this.collapse, this);
            }
            if(!store){
                this.store = null;
                if(this.view){
                    this.view.bindStore(null);
                }
                if(this.pageTb){
                    this.pageTb.bindStore(null);
                }
            }
        }
        if(store){
            if(!initial) {
                this.lastQuery = null;
                if(this.pageTb) {
                    this.pageTb.bindStore(store);
                }
            }

            this.store = Ext.StoreMgr.lookup(store);
            this.store.on({
                scope: this,
                beforeload: this.onBeforeLoad,
                load: this.onLoad,
                exception: this.collapse
            });

            if(this.view){
                this.view.bindStore(store);
            }
        }
    },

    reset : function(){
        Ext.form.ComboBox.superclass.reset.call(this);
        if(this.clearFilterOnReset && this.mode == 'local'){
            this.store.clearFilter();
        }
    },

    // private
    initEvents : function(){
        Ext.form.ComboBox.superclass.initEvents.call(this);

        this.keyNav = new Ext.KeyNav(this.el, {
            "up" : function(e){
                this.inKeyMode = true;
                this.selectPrev();
            },

            "down" : function(e){
                if(!this.isExpanded()){
                    this.onTriggerClick();
                }else{
                    this.inKeyMode = true;
                    this.selectNext();
                }
            },

            "enter" : function(e){
                this.onViewClick();
            },

            "esc" : function(e){
                this.collapse();
            },

            "tab" : function(e){
                if (this.forceSelection === true) {
                    this.collapse();
                } else {
                    this.onViewClick(false);
                }
                return true;
            },

            scope : this,

            doRelay : function(e, h, hname){
                if(hname == 'down' || this.scope.isExpanded()){
                    // this MUST be called before ComboBox#fireKey()
                    var relay = Ext.KeyNav.prototype.doRelay.apply(this, arguments);
                    if(!Ext.isIE && Ext.EventManager.useKeydown){
                        // call Combo#fireKey() for browsers which use keydown event (except IE)
                        this.scope.fireKey(e);
                    }
                    return relay;
                }
                return true;
            },

            forceKeyDown : true,
            defaultEventAction: 'stopEvent'
        });
        this.queryDelay = Math.max(this.queryDelay || 10,
                this.mode == 'local' ? 10 : 250);
        this.dqTask = new Ext.util.DelayedTask(this.initQuery, this);
        if(this.typeAhead){
            this.taTask = new Ext.util.DelayedTask(this.onTypeAhead, this);
        }
        if(!this.enableKeyEvents){
            this.mon(this.el, 'keyup', this.onKeyUp, this);
        }
    },

    // private
    onDestroy : function(){
        if (this.dqTask){
            this.dqTask.cancel();
            this.dqTask = null;
        }
        this.bindStore(null);
        Ext.destroy(
            this.resizer,
            this.view,
            this.pageTb,
            this.list
        );
        Ext.destroyMembers(this, 'hiddenField');
        Ext.form.ComboBox.superclass.onDestroy.call(this);
    },

    // private
    fireKey : function(e){
        if (!this.isExpanded()) {
            Ext.form.ComboBox.superclass.fireKey.call(this, e);
        }
    },

    // private
    onResize : function(w, h){
        Ext.form.ComboBox.superclass.onResize.apply(this, arguments);
        if(!isNaN(w) && this.isVisible() && this.list){
            this.doResize(w);
        }else{
            this.bufferSize = w;
        }
    },

    doResize: function(w){
        if(!Ext.isDefined(this.listWidth)){
            var lw = Math.max(w, this.minListWidth);
            this.list.setWidth(lw);
            this.innerList.setWidth(lw - this.list.getFrameWidth('lr'));
        }
    },

    // private
    onEnable : function(){
        Ext.form.ComboBox.superclass.onEnable.apply(this, arguments);
        if(this.hiddenField){
            this.hiddenField.disabled = false;
        }
    },

    // private
    onDisable : function(){
        Ext.form.ComboBox.superclass.onDisable.apply(this, arguments);
        if(this.hiddenField){
            this.hiddenField.disabled = true;
        }
    },

    // private
    onBeforeLoad : function(){
        if(!this.hasFocus){
            return;
        }
        this.innerList.update(this.loadingText ?
               '
'+this.loadingText+'
' : '');
        this.restrictHeight();
        this.selectedIndex = -1;
    },

    // private
    onLoad : function(){
        if(!this.hasFocus){
            return;
        }
        if(this.store.getCount() > 0 || this.listEmptyText){
            this.expand();
            this.restrictHeight();
            if(this.lastQuery == this.allQuery){
                if(this.editable){
                    this.el.dom.select();
                }

                if(this.autoSelect !== false && !this.selectByValue(this.value, true)){
                    this.select(0, true);
                }
            }else{
                if(this.autoSelect !== false){
                    this.selectNext();
                }
                if(this.typeAhead && this.lastKey != Ext.EventObject.BACKSPACE && this.lastKey != Ext.EventObject.DELETE){
                    this.taTask.delay(this.typeAheadDelay);
                }
            }
        }else{
            this.collapse();
        }

    },

    // private
    onTypeAhead : function(){
        if(this.store.getCount() > 0){
            var r = this.store.getAt(0);
            var newValue = r.data[this.displayField];
            var len = newValue.length;
            var selStart = this.getRawValue().length;
            if(selStart != len){
                this.setRawValue(newValue);
                this.selectText(selStart, newValue.length);
            }
        }
    },

    // private
    assertValue  : function(){
        var val = this.getRawValue(),
            rec = this.findRecord(this.displayField, val);

        if(!rec && this.forceSelection){
            if(val.length > 0 && val != this.emptyText){
                this.el.dom.value = Ext.value(this.lastSelectionText, '');
                this.applyEmptyText();
            }else{
                this.clearValue();
            }
        }else{
            if(rec){
                // onSelect may have already set the value and by doing so
                // set the display field properly.  Let's not wipe out the
                // valueField here by just sending the displayField.
                if (val == rec.get(this.displayField) && this.value == rec.get(this.valueField)){
                    return;
                }
                val = rec.get(this.valueField || this.displayField);
            }
            this.setValue(val);
        }
    },

    // private
    onSelect : function(record, index){
        if(this.fireEvent('beforeselect', this, record, index) !== false){
            this.setValue(record.data[this.valueField || this.displayField]);
            this.collapse();
            this.fireEvent('select', this, record, index);
        }
    },

    // inherit docs
    getName: function(){
        var hf = this.hiddenField;
        return hf && hf.name ? hf.name : this.hiddenName || Ext.form.ComboBox.superclass.getName.call(this);
    },

/**
     * Returns the currently selected field value or empty string if no value is set.
     * @return {String} value The selected value
     */
    getValue : function(){
        if(this.valueField){
            return Ext.isDefined(this.value) ? this.value : '';
        }else{
            return Ext.form.ComboBox.superclass.getValue.call(this);
        }
    },

/**
     * Clears any text/value currently set in the field
     */
    clearValue : function(){
        if(this.hiddenField){
            this.hiddenField.value = '';
        }
        this.setRawValue('');
        this.lastSelectionText = '';
        this.applyEmptyText();
        this.value = '';
    },

/**
     * Sets the specified value into the field.  If the value finds a match, the corresponding record text
     * will be displayed in the field.  If the value does not match the data value of an existing item,
     * and the valueNotFoundText config option is defined, it will be displayed as the default field text.
     * Otherwise the field will be blank (although the value will still be set).
     * @param {String} value The value to match
     * @return {Ext.form.Field} this
     */
    setValue : function(v){
        var text = v;
        if(this.valueField){
            var r = this.findRecord(this.valueField, v);
            if(r){
                text = r.data[this.displayField];
            }else if(Ext.isDefined(this.valueNotFoundText)){
                text = this.valueNotFoundText;
            }
        }
        this.lastSelectionText = text;
        if(this.hiddenField){
            this.hiddenField.value = Ext.value(v, '');
        }
        Ext.form.ComboBox.superclass.setValue.call(this, text);
        this.value = v;
        return this;
    },

    // private
    findRecord : function(prop, value){
        var record;
        if(this.store.getCount() > 0){
            this.store.each(function(r){
                if(r.data[prop] == value){
                    record = r;
                    return false;
                }
            });
        }
        return record;
    },

    // private
    onViewMove : function(e, t){
        this.inKeyMode = false;
    },

    // private
    onViewOver : function(e, t){
        if(this.inKeyMode){ // prevent key nav and mouse over conflicts
            return;
        }
        var item = this.view.findItemFromChild(t);
        if(item){
            var index = this.view.indexOf(item);
            this.select(index, false);
        }
    },

    // private
    onViewClick : function(doFocus){
        var index = this.view.getSelectedIndexes()[0],
            s = this.store,
            r = s.getAt(index);
        if(r){
            this.onSelect(r, index);
        }else {
            this.collapse();
        }
        if(doFocus !== false){
            this.el.focus();
        }
    },

    // private
    restrictHeight : function(){
        this.innerList.dom.style.height = '';
        var inner = this.innerList.dom,
            pad = this.list.getFrameWidth('tb') + (this.resizable ? this.handleHeight : 0) + this.assetHeight,
            h = Math.max(inner.clientHeight, inner.offsetHeight, inner.scrollHeight),
            ha = this.getPosition()[1]-Ext.getBody().getScroll().top,
            hb = Ext.lib.Dom.getViewHeight()-ha-this.getSize().height,
            space = Math.max(ha, hb, this.minHeight || 0)-this.list.shadowOffset-pad-5;

        h = Math.min(h, space, this.maxHeight);

        this.innerList.setHeight(h);
        this.list.beginUpdate();
        this.list.setHeight(h+pad);
        this.list.alignTo.apply(this.list, [this.el].concat(this.listAlign));
        this.list.endUpdate();
    },

/**
     * Returns true if the dropdown list is expanded, else false.
     */
    isExpanded : function(){
        return this.list && this.list.isVisible();
    },

/**
     * Select an item in the dropdown list by its data value. This function does NOT cause the select event to fire.
     * The store must be loaded and the list expanded for this function to work, otherwise use setValue.
     * @param {String} value The data value of the item to select
     * @param {Boolean} scrollIntoView False to prevent the dropdown list from autoscrolling to display the
     * selected item if it is not currently in view (defaults to true)
     * @return {Boolean} True if the value matched an item in the list, else false
     */
    selectByValue : function(v, scrollIntoView){
        if(!Ext.isEmpty(v, true)){
            var r = this.findRecord(this.valueField || this.displayField, v);
            if(r){
                this.select(this.store.indexOf(r), scrollIntoView);
                return true;
            }
        }
        return false;
    },

/**
     * Select an item in the dropdown list by its numeric index in the list. This function does NOT cause the select event to fire.
     * The store must be loaded and the list expanded for this function to work, otherwise use setValue.
     * @param {Number} index The zero-based index of the list item to select
     * @param {Boolean} scrollIntoView False to prevent the dropdown list from autoscrolling to display the
     * selected item if it is not currently in view (defaults to true)
     */
    select : function(index, scrollIntoView){
        this.selectedIndex = index;
        this.view.select(index);
        if(scrollIntoView !== false){
            var el = this.view.getNode(index);
            if(el){
                this.innerList.scrollChildIntoView(el, false);
            }
        }

    },

    // private
    selectNext : function(){
        var ct = this.store.getCount();
        if(ct > 0){
            if(this.selectedIndex == -1){
                this.select(0);
            }else if(this.selectedIndex < ct-1){
                this.select(this.selectedIndex+1);
            }
        }
    },

    // private
    selectPrev : function(){
        var ct = this.store.getCount();
        if(ct > 0){
            if(this.selectedIndex == -1){
                this.select(0);
            }else if(this.selectedIndex !== 0){
                this.select(this.selectedIndex-1);
            }
        }
    },

    // private
    onKeyUp : function(e){
        var k = e.getKey();
        if(this.editable !== false && this.readOnly !== true && (k == e.BACKSPACE || !e.isSpecialKey())){

            this.lastKey = k;
            this.dqTask.delay(this.queryDelay);
        }
        Ext.form.ComboBox.superclass.onKeyUp.call(this, e);
    },

    // private
    validateBlur : function(){
        return !this.list || !this.list.isVisible();
    },

    // private
    initQuery : function(){
        this.doQuery(this.getRawValue());
    },

    // private
    beforeBlur : function(){
        this.assertValue();
    },

    // private
    postBlur  : function(){
        Ext.form.ComboBox.superclass.postBlur.call(this);
        this.collapse();
        this.inKeyMode = false;
    },

/**
     * Execute a query to filter the dropdown list.  Fires the {@link #beforequery} event prior to performing the
     * query allowing the query action to be canceled if needed.
     * @param {String} query The SQL query to execute
     * @param {Boolean} forceAll true to force the query to execute even if there are currently fewer
     * characters in the field than the minimum specified by the {@link #minChars} config option.  It
     * also clears any filter previously saved in the current store (defaults to false)
     */
    doQuery : function(q, forceAll){
        q = Ext.isEmpty(q) ? '' : q;
        var qe = {
            query: q,
            forceAll: forceAll,
            combo: this,
            cancel:false
        };
        if(this.fireEvent('beforequery', qe)===false || qe.cancel){
            return false;
        }
        q = qe.query;
        forceAll = qe.forceAll;
        if(forceAll === true || (q.length >= this.minChars)){
            if(this.lastQuery !== q){
                this.lastQuery = q;
                if(this.mode == 'local'){
                    this.selectedIndex = -1;
                    if(forceAll){
                        this.store.clearFilter();
                    }else{
                        this.store.filter(this.displayField, q);
                    }
                    this.onLoad();
                }else{
                    this.store.baseParams[this.queryParam] = q;
                    this.store.load({
                        params: this.getParams(q)
                    });
                    this.expand();
                }
            }else{
                this.selectedIndex = -1;
                this.onLoad();
            }
        }
    },

    // private
    getParams : function(q){
        var p = {};
        //p[this.queryParam] = q;
        if(this.pageSize){
            p.start = 0;
            p.limit = this.pageSize;
        }
        return p;
    },

/**
     * Hides the dropdown list if it is currently expanded. Fires the {@link #collapse} event on completion.
     */
    collapse : function(){
        if(!this.isExpanded()){
            return;
        }
        this.list.hide();
        Ext.getDoc().un('mousewheel', this.collapseIf, this);
        Ext.getDoc().un('mousedown', this.collapseIf, this);
        this.fireEvent('collapse', this);
    },

    // private
    collapseIf : function(e){
        if(!this.isDestroyed && !e.within(this.wrap) && !e.within(this.list)){
            this.collapse();
        }
    },

/**
     * Expands the dropdown list if it is currently hidden. Fires the {@link #expand} event on completion.
     */
    expand : function(){
        if(this.isExpanded() || !this.hasFocus){
            return;
        }

        if(this.title || this.pageSize){
            this.assetHeight = 0;
            if(this.title){
                this.assetHeight += this.header.getHeight();
            }
            if(this.pageSize){
                this.assetHeight += this.footer.getHeight();
            }
        }

        if(this.bufferSize){
            this.doResize(this.bufferSize);
            delete this.bufferSize;
        }
        this.list.alignTo.apply(this.list, [this.el].concat(this.listAlign));

        // zindex can change, re-check it and set it if necessary
        var listParent = Ext.getDom(this.getListParent() || Ext.getBody()),
            zindex = parseInt(Ext.fly(listParent).getStyle('z-index') ,10);
        if (!zindex){
            zindex = this.getParentZIndex();
        }
        if (zindex) {
            this.list.setZIndex(zindex + 5);
        }
        this.list.show();
        if(Ext.isGecko2){
            this.innerList.setOverflow('auto'); // necessary for FF 2.0/Mac
        }
        this.mon(Ext.getDoc(), {
            scope: this,
            mousewheel: this.collapseIf,
            mousedown: this.collapseIf
        });
        this.fireEvent('expand', this);
    },

/**
     * @method onTriggerClick
     * @hide
     */
    // private
    // Implements the default empty TriggerField.onTriggerClick function
    onTriggerClick : function(){
        if(this.readOnly || this.disabled){
            return;
        }
        if(this.isExpanded()){
            this.collapse();
            this.el.focus();
        }else {
            this.onFocus({});
            if(this.triggerAction == 'all') {
                this.doQuery(this.allQuery, true);
            } else {
                this.doQuery(this.getRawValue());
            }
            this.el.focus();
        }
    }

/**
     * @hide
     * @method autoSize
     */

/**
     * @cfg {Boolean} grow @hide
     */

/**
     * @cfg {Number} growMin @hide
     */

/**
     * @cfg {Number} growMax @hide
     */

});
Ext.reg('combo', Ext.form.ComboBox);


The source code

/*!
 * licensing@extjs.com
 * http://www.extjs.com/license
 */

/**
 * @class Ext.Component
 * @extends Ext.util.Observable
 *
Base class for all Ext components.  All subclasses of Component may participate in the automated
 * Ext component lifecycle of creation, rendering and destruction which is provided by the {@link Ext.Container Container} class.
 * Components may be added to a Container through the {@link Ext.Container#items items} config option at the time the Container is created,
 * or they may be added dynamically via the {@link Ext.Container#add add} method.

 *
The Component base class has built-in support for basic hide/show and enable/disable behavior.

 *
All Components are registered with the {@link Ext.ComponentMgr} on construction so that they can be referenced at any time via
 * {@link Ext#getCmp}, passing the {@link #id}.

 *
All user-developed visual widgets that are required to participate in automated lifecycle and size management should subclass Component (or
 * {@link Ext.BoxComponent} if managed box model handling is required, ie height and width management).

 *
See the Creating new UI controls tutorial for details on how
 * and to either extend or augment ExtJs base classes to create custom Components.

 *
Every component has a specific xtype, which is its Ext-specific type name, along with methods for checking the
 * xtype like {@link #getXType} and {@link #isXType}. This is the list of all valid xtypes:

 *
xtype            Class
-------------    ------------------
box              {@link Ext.BoxComponent}
button           {@link Ext.Button}
buttongroup      {@link Ext.ButtonGroup}
colorpalette     {@link Ext.ColorPalette}
component        {@link Ext.Component}
container        {@link Ext.Container}
cycle            {@link Ext.CycleButton}
dataview         {@link Ext.DataView}
datepicker       {@link Ext.DatePicker}
editor           {@link Ext.Editor}
editorgrid       {@link Ext.grid.EditorGridPanel}
flash            {@link Ext.FlashComponent}
grid             {@link Ext.grid.GridPanel}
listview         {@link Ext.ListView}
panel            {@link Ext.Panel}
progress         {@link Ext.ProgressBar}
propertygrid     {@link Ext.grid.PropertyGrid}
slider           {@link Ext.Slider}
spacer           {@link Ext.Spacer}
splitbutton      {@link Ext.SplitButton}
tabpanel         {@link Ext.TabPanel}
treepanel        {@link Ext.tree.TreePanel}
viewport         {@link Ext.ViewPort}
window           {@link Ext.Window}

Toolbar components
---------------------------------------
paging           {@link Ext.PagingToolbar}
toolbar          {@link Ext.Toolbar}
tbbutton         {@link Ext.Toolbar.Button}        (deprecated; use button)
tbfill           {@link Ext.Toolbar.Fill}
tbitem           {@link Ext.Toolbar.Item}
tbseparator      {@link Ext.Toolbar.Separator}
tbspacer         {@link Ext.Toolbar.Spacer}
tbsplit          {@link Ext.Toolbar.SplitButton}   (deprecated; use splitbutton)
tbtext           {@link Ext.Toolbar.TextItem}

Menu components
---------------------------------------
menu             {@link Ext.menu.Menu}
colormenu        {@link Ext.menu.ColorMenu}
datemenu         {@link Ext.menu.DateMenu}
menubaseitem     {@link Ext.menu.BaseItem}
menucheckitem    {@link Ext.menu.CheckItem}
menuitem         {@link Ext.menu.Item}
menuseparator    {@link Ext.menu.Separator}
menutextitem     {@link Ext.menu.TextItem}

Form components
---------------------------------------
form             {@link Ext.form.FormPanel}
checkbox         {@link Ext.form.Checkbox}
checkboxgroup    {@link Ext.form.CheckboxGroup}
combo            {@link Ext.form.ComboBox}
datefield        {@link Ext.form.DateField}
displayfield     {@link Ext.form.DisplayField}
field            {@link Ext.form.Field}
fieldset         {@link Ext.form.FieldSet}
hidden           {@link Ext.form.Hidden}
htmleditor       {@link Ext.form.HtmlEditor}
label            {@link Ext.form.Label}
numberfield      {@link Ext.form.NumberField}
radio            {@link Ext.form.Radio}
radiogroup       {@link Ext.form.RadioGroup}
textarea         {@link Ext.form.TextArea}
textfield        {@link Ext.form.TextField}
timefield        {@link Ext.form.TimeField}
trigger          {@link Ext.form.TriggerField}

Chart components
---------------------------------------
chart            {@link Ext.chart.Chart}
barchart         {@link Ext.chart.BarChart}
cartesianchart   {@link Ext.chart.CartesianChart}
columnchart      {@link Ext.chart.ColumnChart}
linechart        {@link Ext.chart.LineChart}
piechart         {@link Ext.chart.PieChart}

Store xtypes
---------------------------------------
arraystore       {@link Ext.data.ArrayStore}
directstore      {@link Ext.data.DirectStore}
groupingstore    {@link Ext.data.GroupingStore}
jsonstore        {@link Ext.data.JsonStore}
simplestore      {@link Ext.data.SimpleStore}      (deprecated; use arraystore)
store            {@link Ext.data.Store}
xmlstore         {@link Ext.data.XmlStore}

 * @constructor
 * @param {Ext.Element/String/Object} config The configuration options may be specified as either:
 *

 *
  • an element :
 *
    it is set as the internal element and its id used as the component id
    •
 *
  • a string :
 *
    it is assumed to be the id of an existing element and is used as the component id
    •
 *
  • anything else :
 *
    it is assumed to be a standard config object and is applied to the component
    •
 *

 */
Ext.Component = function(config){
    config = config || {};
    if(config.initialConfig){
        if(config.isAction){           // actions
            this.baseAction = config;
        }
        config = config.initialConfig; // component cloning / action set up
    }else if(config.tagName || config.dom || Ext.isString(config)){ // element object
        config = {applyTo: config, id: config.id || config};
    }

/**
     * This Component's initial configuration specification. Read-only.
     * @type Object
     * @property initialConfig
     */
    this.initialConfig = config;

    Ext.apply(this, config);
    this.addEvents(

/**
         * @event added
         * Fires when a component is added to an Ext.Container
         * @param {Ext.Component} this
         * @param {Ext.Container} ownerCt Container which holds the component
         * @param {number} index Position at which the component was added
         */
        'added',

/**
         * @event disable
         * Fires after the component is disabled.
         * @param {Ext.Component} this
         */
        'disable',

/**
         * @event enable
         * Fires after the component is enabled.
         * @param {Ext.Component} this
         */
        'enable',

/**
         * @event beforeshow
         * Fires before the component is shown by calling the {@link #show} method.
         * Return false from an event handler to stop the show.
         * @param {Ext.Component} this
         */
        'beforeshow',

/**
         * @event show
         * Fires after the component is shown when calling the {@link #show} method.
         * @param {Ext.Component} this
         */
        'show',

/**
         * @event beforehide
         * Fires before the component is hidden by calling the {@link #hide} method.
         * Return false from an event handler to stop the hide.
         * @param {Ext.Component} this
         */
        'beforehide',

/**
         * @event hide
         * Fires after the component is hidden.
         * Fires after the component is hidden when calling the {@link #hide} method.
         * @param {Ext.Component} this
         */
        'hide',

/**
         * @event removed
         * Fires when a component is removed from an Ext.Container
         * @param {Ext.Component} this
         * @param {Ext.Container} ownerCt Container which holds the component
         */
        'removed',

/**
         * @event beforerender
         * Fires before the component is {@link #rendered}. Return false from an
         * event handler to stop the {@link #render}.
         * @param {Ext.Component} this
         */
        'beforerender',

/**
         * @event render
         * Fires after the component markup is {@link #rendered}.
         * @param {Ext.Component} this
         */
        'render',

/**
         * @event afterrender
         *
Fires after the component rendering is finished.

         *
The afterrender event is fired after this Component has been {@link #rendered}, been postprocesed
         * by any afterRender method defined for the Component, and, if {@link #stateful}, after state
         * has been restored.

         * @param {Ext.Component} this
         */
        'afterrender',

/**
         * @event beforedestroy
         * Fires before the component is {@link #destroy}ed. Return false from an event handler to stop the {@link #destroy}.
         * @param {Ext.Component} this
         */
        'beforedestroy',

/**
         * @event destroy
         * Fires after the component is {@link #destroy}ed.
         * @param {Ext.Component} this
         */
        'destroy',

/**
         * @event beforestaterestore
         * Fires before the state of the component is restored. Return false from an event handler to stop the restore.
         * @param {Ext.Component} this
         * @param {Object} state The hash of state values returned from the StateProvider. If this
         * event is not vetoed, then the state object is passed to applyState. By default,
         * that simply copies property values into this Component. The method maybe overriden to
         * provide custom state restoration.
         */
        'beforestaterestore',

/**
         * @event staterestore
         * Fires after the state of the component is restored.
         * @param {Ext.Component} this
         * @param {Object} state The hash of state values returned from the StateProvider. This is passed
         * to applyState. By default, that simply copies property values into this
         * Component. The method maybe overriden to provide custom state restoration.
         */
        'staterestore',

/**
         * @event beforestatesave
         * Fires before the state of the component is saved to the configured state provider. Return false to stop the save.
         * @param {Ext.Component} this
         * @param {Object} state The hash of state values. This is determined by calling
         * getState() on the Component. This method must be provided by the
         * developer to return whetever representation of state is required, by default, Ext.Component
         * has a null implementation.
         */
        'beforestatesave',

/**
         * @event statesave
         * Fires after the state of the component is saved to the configured state provider.
         * @param {Ext.Component} this
         * @param {Object} state The hash of state values. This is determined by calling
         * getState() on the Component. This method must be provided by the
         * developer to return whetever representation of state is required, by default, Ext.Component
         * has a null implementation.
         */
        'statesave'
    );
    this.getId();
    Ext.ComponentMgr.register(this);
    Ext.Component.superclass.constructor.call(this);

    if(this.baseAction){
        this.baseAction.addComponent(this);
    }

    this.initComponent();

    if(this.plugins){
        if(Ext.isArray(this.plugins)){
            for(var i = 0, len = this.plugins.length; i < len; i++){
                this.plugins[i] = this.initPlugin(this.plugins[i]);
            }
        }else{
            this.plugins = this.initPlugin(this.plugins);
        }
    }

    if(this.stateful !== false){
        this.initState();
    }

    if(this.applyTo){
        this.applyToMarkup(this.applyTo);
        delete this.applyTo;
    }else if(this.renderTo){
        this.render(this.renderTo);
        delete this.renderTo;
    }
};

// private
Ext.Component.AUTO_ID = 1000;

Ext.extend(Ext.Component, Ext.util.Observable, {
    // Configs below are used for all Components when rendered by FormLayout.

/**
     * @cfg {String} fieldLabel
The label text to display next to this Component (defaults to '').

     *
Note: this config is only used when this Component is rendered by a Container which
     * has been configured to use the {@link Ext.layout.FormLayout FormLayout} layout manager (e.g.
     * {@link Ext.form.FormPanel} or specifying layout:'form').

     *
Also see {@link #hideLabel} and
     * {@link Ext.layout.FormLayout}.{@link Ext.layout.FormLayout#fieldTpl fieldTpl}.

     * Example use:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Name'
    }]
});

     */

/**
     * @cfg {String} labelStyle
A CSS style specification string to apply directly to this field's
     * label.  Defaults to the container's labelStyle value if set (e.g.,
     * {@link Ext.layout.FormLayout#labelStyle} , or '').

     *
Note: see the note for {@link #clearCls}.

     *
Also see {@link #hideLabel} and
     * {@link Ext.layout.FormLayout}.{@link Ext.layout.FormLayout#fieldTpl fieldTpl}.

     * Example use:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Name',
        labelStyle: 'font-weight:bold;'
    }]
});

     */

/**
     * @cfg {String} labelSeparator
The separator to display after the text of each
     * {@link #fieldLabel}.  This property may be configured at various levels.
     * The order of precedence is:
     *

     *
  • field / component level
    •
     *
  • container level
    •
     *
  • {@link Ext.layout.FormLayout#labelSeparator layout level} (defaults to colon ':')
    •
     *

     * To display no separator for this field's label specify empty string ''.

     *
Note: see the note for {@link #clearCls}.

     *
Also see {@link #hideLabel} and
     * {@link Ext.layout.FormLayout}.{@link Ext.layout.FormLayout#fieldTpl fieldTpl}.

     * Example use:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    layoutConfig: {
        labelSeparator: '~'   // layout config has lowest priority (defaults to ':')
    },
    {@link Ext.layout.FormLayout#labelSeparator labelSeparator}: '>>',     // config at container level
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Field 1',
        labelSeparator: '...' // field/component level config supersedes others
    },{
        xtype: 'textfield',
        fieldLabel: 'Field 2' // labelSeparator will be '='
    }]
});

     */

/**
     * @cfg {Boolean} hideLabel
true to completely hide the label element
     * ({@link #fieldLabel label} and {@link #labelSeparator separator}). Defaults to false.
     * By default, even if you do not specify a {@link #fieldLabel} the space will still be
     * reserved so that the field will line up with other fields that do have labels.
     * Setting this to true will cause the field to not reserve that space.

     *
Note: see the note for {@link #clearCls}.

     * Example use:

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield'
        hideLabel: true
    }]
});

     */

/**
     * @cfg {String} clearCls
The CSS class used to to apply to the special clearing div rendered
     * directly after each form field wrapper to provide field clearing (defaults to
     * 'x-form-clear-left').

     *
Note: this config is only used when this Component is rendered by a Container
     * which has been configured to use the {@link Ext.layout.FormLayout FormLayout} layout
     * manager (e.g. {@link Ext.form.FormPanel} or specifying layout:'form') and either a
     * {@link #fieldLabel} is specified or isFormField=true is specified.

     *
See {@link Ext.layout.FormLayout}.{@link Ext.layout.FormLayout#fieldTpl fieldTpl} also.

     */

/**
     * @cfg {String} itemCls
     *
Note: this config is only used when this Component is rendered by a Container which
     * has been configured to use the {@link Ext.layout.FormLayout FormLayout} layout manager (e.g.
     * {@link Ext.form.FormPanel} or specifying layout:'form').

     *
An additional CSS class to apply to the div wrapping the form item
     * element of this field.  If supplied, itemCls at the field level will override
     * the default itemCls supplied at the container level. The value specified for
     * itemCls will be added to the default class ('x-form-item').

     *
Since it is applied to the item wrapper (see
     * {@link Ext.layout.FormLayout}.{@link Ext.layout.FormLayout#fieldTpl fieldTpl}), it allows
     * you to write standard CSS rules that can apply to the field, the label (if specified), or
     * any other element within the markup for the field.

     *
Note: see the note for {@link #fieldLabel}.

     * Example use:

// Apply a style to the field's label:
<style>
    .required .x-form-item-label {font-weight:bold;color:red;}
</style>

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Name',
        itemCls: 'required' //this label will be styled
    },{
        xtype: 'textfield',
        fieldLabel: 'Favorite Color'
    }]
});

     */

/**
     * @cfg {String} id
     *
The unique id of this component (defaults to an {@link #getId auto-assigned id}).
     * You should assign an id if you need to be able to access the component later and you do
     * not have an object reference available (e.g., using {@link Ext}.{@link Ext#getCmp getCmp}).

     *
Note that this id will also be used as the element id for the containing HTML element
     * that is rendered to the page for this component. This allows you to write id-based CSS
     * rules to style the specific instance of this component uniquely, and also to select
     * sub-elements using this component's id as the parent.

     *
Note: to avoid complications imposed by a unique id also see
     * {@link #itemId} and {@link #ref}.

     *
Note: to access the container of an item see {@link #ownerCt}.

     */

/**
     * @cfg {String} itemId
     *
An itemId can be used as an alternative way to get a reference to a component
     * when no object reference is available.  Instead of using an {@link #id} with
     * {@link Ext}.{@link Ext#getCmp getCmp}, use itemId with
     * {@link Ext.Container}.{@link Ext.Container#getComponent getComponent} which will retrieve
     * itemId's or {@link #id}'s. Since itemId's are an index to the
     * container's internal MixedCollection, the itemId is scoped locally to the container --
     * avoiding potential conflicts with {@link Ext.ComponentMgr} which requires a unique
     * {@link #id}.

     *

var c = new Ext.Panel({ //
    {@link Ext.BoxComponent#height height}: 300,
    {@link #renderTo}: document.body,
    {@link Ext.Container#layout layout}: 'auto',
    {@link Ext.Container#items items}: [
        {
            itemId: 'p1',
            {@link Ext.Panel#title title}: 'Panel 1',
            {@link Ext.BoxComponent#height height}: 150
        },
        {
            itemId: 'p2',
            {@link Ext.Panel#title title}: 'Panel 2',
            {@link Ext.BoxComponent#height height}: 150
        }
    ]
})
p1 = c.{@link Ext.Container#getComponent getComponent}('p1'); // not the same as {@link Ext#getCmp Ext.getCmp()}
p2 = p1.{@link #ownerCt}.{@link Ext.Container#getComponent getComponent}('p2'); // reference via a sibling
     *

     *
Also see {@link #id} and {@link #ref}.

     *
Note: to access the container of an item see {@link #ownerCt}.

     */

/**
     * @cfg {String} xtype
     * The registered xtype to create. This config option is not used when passing
     * a config object into a constructor. This config option is used only when
     * lazy instantiation is being used, and a child item of a Container is being
     * specified not as a fully instantiated Component, but as a Component config
     * object. The xtype will be looked up at render time up to determine what
     * type of child Component to create.

     * The predefined xtypes are listed {@link Ext.Component here}.
     *

     * If you subclass Components to create your own Components, you may register
     * them using {@link Ext.ComponentMgr#registerType} in order to be able to
     * take advantage of lazy instantiation and rendering.
     */

/**
     * @cfg {String} ptype
     * The registered ptype to create. This config option is not used when passing
     * a config object into a constructor. This config option is used only when
     * lazy instantiation is being used, and a Plugin is being
     * specified not as a fully instantiated Component, but as a Component config
     * object. The ptype will be looked up at render time up to determine what
     * type of Plugin to create.

     * If you create your own Plugins, you may register them using
     * {@link Ext.ComponentMgr#registerPlugin} in order to be able to
     * take advantage of lazy instantiation and rendering.
     */

/**
     * @cfg {String} cls
     * An optional extra CSS class that will be added to this component's Element (defaults to '').  This can be
     * useful for adding customized styles to the component or any of its children using standard CSS rules.
     */

/**
     * @cfg {String} overCls
     * An optional extra CSS class that will be added to this component's Element when the mouse moves
     * over the Element, and removed when the mouse moves out. (defaults to '').  This can be
     * useful for adding customized 'active' or 'hover' styles to the component or any of its children using standard CSS rules.
     */

/**
     * @cfg {String} style
     * A custom style specification to be applied to this component's Element.  Should be a valid argument to
     * {@link Ext.Element#applyStyles}.
     *

new Ext.Panel({
    title: 'Some Title',
    renderTo: Ext.getBody(),
    width: 400, height: 300,
    layout: 'form',
    items: [{
        xtype: 'textarea',
        style: {
            width: '95%',
            marginBottom: '10px'
        }
    },
        new Ext.Button({
            text: 'Send',
            minWidth: '100',
            style: {
                marginBottom: '10px'
            }
        })
    ]
});
     *

     */

/**
     * @cfg {String} ctCls
     *
An optional extra CSS class that will be added to this component's container. This can be useful for
     * adding customized styles to the container or any of its children using standard CSS rules.  See
     * {@link Ext.layout.ContainerLayout}.{@link Ext.layout.ContainerLayout#extraCls extraCls} also.

     *
Note: ctCls defaults to '' except for the following class
     * which assigns a value by default:
     *

     *
  • {@link Ext.layout.Box Box Layout} : 'x-box-layout-ct'
    •
     *

     * To configure the above Class with an extra CSS class append to the default.  For example,
     * for BoxLayout (Hbox and Vbox):

     * ctCls: 'x-box-layout-ct custom-class'
     *

     *

     */

/**
     * @cfg {Boolean} disabled
     * Render this component disabled (default is false).
     */
    disabled : false,

/**
     * @cfg {Boolean} hidden
     * Render this component hidden (default is false). If true, the
     * {@link #hide} method will be called internally.
     */
    hidden : false,

/**
     * @cfg {Object/Array} plugins
     * An object or array of objects that will provide custom functionality for this component.  The only
     * requirement for a valid plugin is that it contain an init method that accepts a reference of type Ext.Component.
     * When a component is created, if any plugins are available, the component will call the init method on each
     * plugin, passing a reference to itself.  Each plugin can then call methods or respond to events on the
     * component as needed to provide its functionality.
     */

/**
     * @cfg {Mixed} applyTo
     *
Specify the id of the element, a DOM element or an existing Element corresponding to a DIV
     * that is already present in the document that specifies some structural markup for this
     * component.

     *
  • Description :

     *
      When applyTo is used, constituent parts of the component can also be specified
     * by id or CSS class name within the main element, and the component being created may attempt
     * to create its subcomponents from that markup if applicable.

     *
    •
     *
  • Notes :

     *
      When using this config, a call to render() is not required.

     *
      If applyTo is specified, any value passed for {@link #renderTo} will be ignored and the target
     * element's parent node will automatically be used as the component's container.

     *
    •
     *

     */

/**
     * @cfg {Mixed} renderTo
     *
Specify the id of the element, a DOM element or an existing Element that this component
     * will be rendered into.

     *
  • Notes :

     *
      Do not use this option if the Component is to be a child item of
     * a {@link Ext.Container Container}. It is the responsibility of the
     * {@link Ext.Container Container}'s {@link Ext.Container#layout layout manager}
     * to render and manage its child items.

     *
      When using this config, a call to render() is not required.

     *
    •
     *

     *
See {@link #render} also.

     */

/**
     * @cfg {Boolean} stateful
     *
A flag which causes the Component to attempt to restore the state of
     * internal properties from a saved state on startup. The component must have
     * either a {@link #stateId} or {@link #id} assigned
     * for state to be managed. Auto-generated ids are not guaranteed to be stable
     * across page loads and cannot be relied upon to save and restore the same
     * state for a component.

     *
For state saving to work, the state manager's provider must have been
     * set to an implementation of {@link Ext.state.Provider} which overrides the
     * {@link Ext.state.Provider#set set} and {@link Ext.state.Provider#get get}
     * methods to save and recall name/value pairs. A built-in implementation,
     * {@link Ext.state.CookieProvider} is available.

     *
To set the state provider for the current page:

     *

Ext.state.Manager.setProvider(new Ext.state.CookieProvider({
    expires: new Date(new Date().getTime()+(1000*60*60*24*7)), //7 days from now
}));
     *

     *
A stateful Component attempts to save state when one of the events
     * listed in the {@link #stateEvents} configuration fires.

     *
To save state, a stateful Component first serializes its state by
     * calling getState. By default, this function does
     * nothing. The developer must provide an implementation which returns an
     * object hash which represents the Component's restorable state.

     *
The value yielded by getState is passed to {@link Ext.state.Manager#set}
     * which uses the configured {@link Ext.state.Provider} to save the object
     * keyed by the Component's {@link stateId}, or, if that is not
     * specified, its {@link #id}.

     *
During construction, a stateful Component attempts to restore
     * its state by calling {@link Ext.state.Manager#get} passing the
     * {@link #stateId}, or, if that is not specified, the
     * {@link #id}.

     *
The resulting object is passed to applyState.
     * The default implementation of applyState simply copies
     * properties into the object, but a developer may override this to support
     * more behaviour.

     *
You can perform extra processing on state save and restore by attaching
     * handlers to the {@link #beforestaterestore}, {@link #staterestore},
     * {@link #beforestatesave} and {@link #statesave} events.

     */

/**
     * @cfg {String} stateId
     * The unique id for this component to use for state management purposes
     * (defaults to the component id if one was set, otherwise null if the
     * component is using a generated id).
     *
See {@link #stateful} for an explanation of saving and
     * restoring Component state.

     */

/**
     * @cfg {Array} stateEvents
     *
An array of events that, when fired, should trigger this component to
     * save its state (defaults to none). stateEvents may be any type
     * of event supported by this component, including browser or custom events
     * (e.g., ['click', 'customerchange']).

     *
See {@link #stateful} for an explanation of saving and
     * restoring Component state.

     */

/**
     * @cfg {Mixed} autoEl
     *
A tag name or {@link Ext.DomHelper DomHelper} spec used to create the {@link #getEl Element} which will
     * encapsulate this Component.

     *
You do not normally need to specify this. For the base classes {@link Ext.Component}, {@link Ext.BoxComponent},
     * and {@link Ext.Container}, this defaults to 'div'. The more complex Ext classes use a more complex
     * DOM structure created by their own onRender methods.

     *
This is intended to allow the developer to create application-specific utility Components encapsulated by
     * different DOM elements. Example usage:

{
    xtype: 'box',
    autoEl: {
        tag: 'img',
        src: 'http://www.example.com/example.jpg'
    }
}, {
    xtype: 'box',
    autoEl: {
        tag: 'blockquote',
        html: 'autoEl is cool!'
    }
}, {
    xtype: 'container',
    autoEl: 'ul',
    cls: 'ux-unordered-list',
    items: {
        xtype: 'box',
        autoEl: 'li',
        html: 'First list item'
    }
}

     */
    autoEl : 'div',

/**
     * @cfg {String} disabledClass
     * CSS class added to the component when it is disabled (defaults to 'x-item-disabled').
     */
    disabledClass : 'x-item-disabled',

/**
     * @cfg {Boolean} allowDomMove
     * Whether the component can move the Dom node when rendering (defaults to true).
     */
    allowDomMove : true,

/**
     * @cfg {Boolean} autoShow
     * True if the component should check for hidden classes (e.g. 'x-hidden' or 'x-hide-display') and remove
     * them on render (defaults to false).
     */
    autoShow : false,

/**
     * @cfg {String} hideMode
     *
How this component should be hidden. Supported values are 'visibility'
     * (css visibility), 'offsets' (negative offset position) and 'display'
     * (css display).

     *
Note: the default of 'display' is generally preferred
     * since items are automatically laid out when they are first shown (no sizing
     * is done while hidden).

     */
    hideMode : 'display',

/**
     * @cfg {Boolean} hideParent
     * True to hide and show the component's container when hide/show is called on the component, false to hide
     * and show the component itself (defaults to false).  For example, this can be used as a shortcut for a hide
     * button on a window by setting hide:true on the button when adding it to its parent container.
     */
    hideParent : false,

/**
     *
The {@link Ext.Element} which encapsulates this Component. Read-only.

     *
This will usually be a <DIV> element created by the class's onRender method, but
     * that may be overridden using the {@link #autoEl} config.

     *
Note: this element will not be available until this Component has been rendered.

     *
To add listeners for DOM events to this Component (as opposed to listeners
     * for this Component's own Observable events), see the {@link Ext.util.Observable#listeners listeners}
     * config for a suggestion, or use a render listener directly:

new Ext.Panel({
    title: 'The Clickable Panel',
    listeners: {
        render: function(p) {
            // Append the Panel to the click handler's argument list.
            p.getEl().on('click', handlePanelClick.createDelegate(null, [p], true));
        },
        single: true  // Remove the listener after first invocation
    }
});

     *
See also {@link #getEl getEl}

     * @type Ext.Element
     * @property el
     */

/**
     * This Component's owner {@link Ext.Container Container} (defaults to undefined, and is set automatically when
     * this Component is added to a Container).  Read-only.
     *
Note: to access items within the Container see {@link #itemId}.

     * @type Ext.Container
     * @property ownerCt
     */

/**
     * True if this component is hidden. Read-only.
     * @type Boolean
     * @property hidden
     */

/**
     * True if this component is disabled. Read-only.
     * @type Boolean
     * @property disabled
     */

/**
     * True if this component has been rendered. Read-only.
     * @type Boolean
     * @property rendered
     */
    rendered : false,

/**
     * @cfg {String} contentEl
     *
Optional. Specify an existing HTML element, or the id of an existing HTML element to use as the content
     * for this component.

     *

     *
  • Description :
     *
    This config option is used to take an existing HTML element and place it in the layout element
     * of a new component (it simply moves the specified DOM element after the Component is rendered to use as the content.
    •
     *
  • Notes :
     *
    The specified HTML element is appended to the layout element of the component after any configured
     * {@link #html HTML} has been inserted, and so the document will not contain this element at the time the {@link #render} event is fired.

     *
    The specified HTML element used will not participate in any {@link Ext.Container#layout layout}
     * scheme that the Component may use. It is just HTML. Layouts operate on child {@link Ext.Container#items items}.

     *
    Add either the x-hidden or the x-hide-display CSS class to
     * prevent a brief flicker of the content before it is rendered to the panel.
    •
     *

     */

/**
     * @cfg {String/Object} html
     * An HTML fragment, or a {@link Ext.DomHelper DomHelper} specification to use as the layout element
     * content (defaults to ''). The HTML content is added after the component is rendered,
     * so the document will not contain this HTML at the time the {@link #render} event is fired.
     * This content is inserted into the body before any configured {@link #contentEl} is appended.
     */

/**
     * @cfg {Mixed} tpl
     * An {@link Ext.Template}, {@link Ext.XTemplate}
     * or an array of strings to form an Ext.XTemplate.
     * Used in conjunction with the {@link #data} and
     * {@link #tplWriteMode} configurations.
     */

/**
     * @cfg {String} tplWriteMode The Ext.(X)Template method to use when
     * updating the content area of the Component. Defaults to 'overwrite'
     * (see {@link Ext.XTemplate#overwrite}).
     */
    tplWriteMode : 'overwrite',

/**
     * @cfg {Mixed} data
     * The initial set of data to apply to the {@link #tpl} to
     * update the content area of the Component.
     */

/**
     * @cfg {Array} bubbleEvents
     *
An array of events that, when fired, should be bubbled to any parent container.
     * See {@link Ext.util.Observable#enableBubble}.
     * Defaults to [].
     */
    bubbleEvents: [],

    // private
    ctype : 'Ext.Component',

    // private
    actionMode : 'el',

    // private
    getActionEl : function(){
        return this[this.actionMode];
    },

    initPlugin : function(p){
        if(p.ptype && !Ext.isFunction(p.init)){
            p = Ext.ComponentMgr.createPlugin(p);
        }else if(Ext.isString(p)){
            p = Ext.ComponentMgr.createPlugin({
                ptype: p
            });
        }
        p.init(this);
        return p;
    },

    /* // protected
     * Function to be implemented by Component subclasses to be part of standard component initialization flow (it is empty by default).
     *

// Traditional constructor:
Ext.Foo = function(config){
    // call superclass constructor:
    Ext.Foo.superclass.constructor.call(this, config);

    this.addEvents({
        // add events
    });
};
Ext.extend(Ext.Foo, Ext.Bar, {
   // class body
}

// initComponent replaces the constructor:
Ext.Foo = Ext.extend(Ext.Bar, {
    initComponent : function(){
        // call superclass initComponent
        Ext.Container.superclass.initComponent.call(this);

        this.addEvents({
            // add events
        });
    }
}

     */
    initComponent : function(){
        /*
         * this is double processing, however it allows people to be able to do
         * Ext.apply(this, {
         *     listeners: {
         *         //here
         *     }
         * });
         * MyClass.superclass.initComponent.call(this);
         */
        if(this.listeners){
            this.on(this.listeners);
            delete this.listeners;
        }
        this.enableBubble(this.bubbleEvents);
    },

/**
     *
Render this Component into the passed HTML element.

     *
If you are using a {@link Ext.Container Container} object to house this Component, then
     * do not use the render method.

     *
A Container's child Components are rendered by that Container's
     * {@link Ext.Container#layout layout} manager when the Container is first rendered.

     *
Certain layout managers allow dynamic addition of child components. Those that do
     * include {@link Ext.layout.CardLayout}, {@link Ext.layout.AnchorLayout},
     * {@link Ext.layout.FormLayout}, {@link Ext.layout.TableLayout}.

     *
If the Container is already rendered when a new child Component is added, you may need to call
     * the Container's {@link Ext.Container#doLayout doLayout} to refresh the view which causes any
     * unrendered child Components to be rendered. This is required so that you can add multiple
     * child components if needed while only refreshing the layout once.

     *
When creating complex UIs, it is important to remember that sizing and positioning
     * of child items is the responsibility of the Container's {@link Ext.Container#layout layout} manager.
     * If you expect child items to be sized in response to user interactions, you must
     * configure the Container with a layout manager which creates and manages the type of layout you
     * have in mind.

     *
Omitting the Container's {@link Ext.Container#layout layout} config means that a basic
     * layout manager is used which does nothing but render child components sequentially into the
     * Container. No sizing or positioning will be performed in this situation.

     * @param {Element/HTMLElement/String} container (optional) The element this Component should be
     * rendered into. If it is being created from existing markup, this should be omitted.
     * @param {String/Number} position (optional) The element ID or DOM node index within the container before
     * which this component will be inserted (defaults to appending to the end of the container)
     */
    render : function(container, position){
        if(!this.rendered && this.fireEvent('beforerender', this) !== false){
            if(!container && this.el){
                this.el = Ext.get(this.el);
                container = this.el.dom.parentNode;
                this.allowDomMove = false;
            }
            this.container = Ext.get(container);
            if(this.ctCls){
                this.container.addClass(this.ctCls);
            }
            this.rendered = true;
            if(position !== undefined){
                if(Ext.isNumber(position)){
                    position = this.container.dom.childNodes[position];
                }else{
                    position = Ext.getDom(position);
                }
            }
            this.onRender(this.container, position || null);
            if(this.autoShow){
                this.el.removeClass(['x-hidden','x-hide-' + this.hideMode]);
            }
            if(this.cls){
                this.el.addClass(this.cls);
                delete this.cls;
            }
            if(this.style){
                this.el.applyStyles(this.style);
                delete this.style;
            }
            if(this.overCls){
                this.el.addClassOnOver(this.overCls);
            }
            this.fireEvent('render', this);

            // Populate content of the component with html, contentEl or
            // a tpl.
            var contentTarget = this.getContentTarget();
            if (this.html){
                contentTarget.update(Ext.DomHelper.markup(this.html));
                delete this.html;
            }
            if (this.contentEl){
                var ce = Ext.getDom(this.contentEl);
                Ext.fly(ce).removeClass(['x-hidden', 'x-hide-display']);
                contentTarget.appendChild(ce);
            }
            if (this.tpl) {
                if (!this.tpl.compile) {
                    this.tpl = new Ext.XTemplate(this.tpl);
                }
                if (this.data) {
                    this.tpl[this.tplWriteMode](contentTarget, this.data);
                    delete this.data;
                }
            }
            this.afterRender(this.container);

            if(this.hidden){
                // call this so we don't fire initial hide events.
                this.doHide();
            }
            if(this.disabled){
                // pass silent so the event doesn't fire the first time.
                this.disable(true);
            }

            if(this.stateful !== false){
                this.initStateEvents();
            }
            this.fireEvent('afterrender', this);
        }
        return this;
    },

/**
     * Update the content area of a component.
     * @param {Mixed} htmlOrData
     * If this component has been configured with a template via the tpl config
     * then it will use this argument as data to populate the template.
     * If this component was not configured with a template, the components
     * content area will be updated via Ext.Element update
     * @param {Boolean} loadScripts
     * (optional) Only legitimate when using the html configuration. Defaults to false
     * @param {Function} callback
     * (optional) Only legitimate when using the html configuration. Callback to execute when scripts have finished loading
     */
    update: function(htmlOrData, loadScripts, cb) {
        var contentTarget = this.getContentTarget();
        if (this.tpl && typeof htmlOrData !== "string") {
            this.tpl[this.tplWriteMode](contentTarget, htmlOrData || {});
        } else {
            var html = Ext.isObject(htmlOrData) ? Ext.DomHelper.markup(htmlOrData) : htmlOrData;
            contentTarget.update(html, loadScripts, cb);
        }
    },

    /**
     * @private
     * 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.
     * @param {Ext.Container} container Container which holds the component
     * @param {number} pos Position at which the component was added
     */
    onAdded : function(container, pos) {
        this.ownerCt = container;
        this.initRef();
        this.fireEvent('added', this, container, pos);
    },

    /**
     * @private
     * Method to manage awareness of when components are removed from their
     * respective Container, firing an removed event. References are properly
     * cleaned up after removing a component from its owning container.
     */
    onRemoved : function() {
        this.removeRef();
        this.fireEvent('removed', this, this.ownerCt);
        delete this.ownerCt;
    },

    /**
     * @private
     * Method to establish a reference to a component.
     */
    initRef : function() {

/**
         * @cfg {String} ref
         *
A path specification, relative to the Component's {@link #ownerCt}
         * specifying into which ancestor Container to place a named reference to this Component.

         *
The ancestor axis can be traversed by using '/' characters in the path.
         * For example, to put a reference to a Toolbar Button into the Panel which owns the Toolbar:

var myGrid = new Ext.grid.EditorGridPanel({
    title: 'My EditorGridPanel',
    store: myStore,
    colModel: myColModel,
    tbar: [{
        text: 'Save',
        handler: saveChanges,
        disabled: true,
        ref: '../saveButton'
    }],
    listeners: {
        afteredit: function() {
//          The button reference is in the GridPanel
            myGrid.saveButton.enable();
        }
    }
});

         *
In the code above, if the ref had been 'saveButton'
         * the reference would have been placed into the Toolbar. Each '/' in the ref
         * moves up one level from the Component's {@link #ownerCt}.

         *
Also see the {@link #added} and {@link #removed} events.

         */
        if(this.ref && !this.refOwner){
            var levels = this.ref.split('/'),
                last = levels.length,
                i = 0,
                t = this;

            while(t && i < last){
                t = t.ownerCt;
                ++i;
            }
            if(t){
                t[this.refName = levels[--i]] = this;

/**
                 * @type Ext.Container
                 * @property refOwner
                 * The ancestor Container into which the {@link #ref} reference was inserted if this Component
                 * is a child of a Container, and has been configured with a ref.
                 */
                this.refOwner = t;
            }
        }
    },

    removeRef : function() {
        if (this.refOwner && this.refName) {
            delete this.refOwner[this.refName];
            delete this.refOwner;
        }
    },

    // private
    initState : function(){
        if(Ext.state.Manager){
            var id = this.getStateId();
            if(id){
                var state = Ext.state.Manager.get(id);
                if(state){
                    if(this.fireEvent('beforestaterestore', this, state) !== false){
                        this.applyState(Ext.apply({}, state));
                        this.fireEvent('staterestore', this, state);
                    }
                }
            }
        }
    },

    // private
    getStateId : function(){
        return this.stateId || ((/^(ext-comp-|ext-gen)/).test(String(this.id)) ? null : this.id);
    },

    // private
    initStateEvents : function(){
        if(this.stateEvents){
            for(var i = 0, e; e = this.stateEvents[i]; i++){
                this.on(e, this.saveState, this, {delay:100});
            }
        }
    },

    // private
    applyState : function(state){
        if(state){
            Ext.apply(this, state);
        }
    },

    // private
    getState : function(){
        return null;
    },

    // private
    saveState : function(){
        if(Ext.state.Manager && this.stateful !== false){
            var id = this.getStateId();
            if(id){
                var state = this.getState();
                if(this.fireEvent('beforestatesave', this, state) !== false){
                    Ext.state.Manager.set(id, state);
                    this.fireEvent('statesave', this, state);
                }
            }
        }
    },

/**
     * Apply this component to existing markup that is valid. With this function, no call to render() is required.
     * @param {String/HTMLElement} el
     */
    applyToMarkup : function(el){
        this.allowDomMove = false;
        this.el = Ext.get(el);
        this.render(this.el.dom.parentNode);
    },

/**
     * Adds a CSS class to the component's underlying element.
     * @param {string} cls The CSS class name to add
     * @return {Ext.Component} this
     */
    addClass : function(cls){
        if(this.el){
            this.el.addClass(cls);
        }else{
            this.cls = this.cls ? this.cls + ' ' + cls : cls;
        }
        return this;
    },

/**
     * Removes a CSS class from the component's underlying element.
     * @param {string} cls The CSS class name to remove
     * @return {Ext.Component} this
     */
    removeClass : function(cls){
        if(this.el){
            this.el.removeClass(cls);
        }else if(this.cls){
            this.cls = this.cls.split(' ').remove(cls).join(' ');
        }
        return this;
    },

    // private
    // default function is not really useful
    onRender : function(ct, position){
        if(!this.el && this.autoEl){
            if(Ext.isString(this.autoEl)){
                this.el = document.createElement(this.autoEl);
            }else{
                var div = document.createElement('div');
                Ext.DomHelper.overwrite(div, this.autoEl);
                this.el = div.firstChild;
            }
            if (!this.el.id) {
                this.el.id = this.getId();
            }
        }
        if(this.el){
            this.el = Ext.get(this.el);
            if(this.allowDomMove !== false){
                ct.dom.insertBefore(this.el.dom, position);
                if (div) {
                    Ext.removeNode(div);
                    div = null;
                }
            }
        }
    },

    // private
    getAutoCreate : function(){
        var cfg = Ext.isObject(this.autoCreate) ?
                      this.autoCreate : Ext.apply({}, this.defaultAutoCreate);
        if(this.id && !cfg.id){
            cfg.id = this.id;
        }
        return cfg;
    },

    // private
    afterRender : Ext.emptyFn,

/**
     * Destroys this component by purging any event listeners, removing the component's element from the DOM,
     * removing the component from its {@link Ext.Container} (if applicable) and unregistering it from
     * {@link Ext.ComponentMgr}.  Destruction is generally handled automatically by the framework and this method
     * should usually not need to be called directly.
     *
     */
    destroy : function(){
        if(!this.isDestroyed){
            if(this.fireEvent('beforedestroy', this) !== false){
                this.destroying = true;
                this.beforeDestroy();
                if(this.ownerCt && this.ownerCt.remove){
                    this.ownerCt.remove(this, false);
                }
                if(this.rendered){
                    this.el.remove();
                    if(this.actionMode == 'container' || this.removeMode == 'container'){
                        this.container.remove();
                    }
                }
                // Stop any buffered tasks
                if(this.focusTask && this.focusTask.cancel){
                    this.focusTask.cancel();
                }
                this.onDestroy();
                Ext.ComponentMgr.unregister(this);
                this.fireEvent('destroy', this);
                this.purgeListeners();
                this.destroying = false;
                this.isDestroyed = true;
            }
        }
    },

    deleteMembers : function(){
        var args = arguments;
        for(var i = 0, len = args.length; i < len; ++i){
            delete this[args[i]];
        }
    },

    // private
    beforeDestroy : Ext.emptyFn,

    // private
    onDestroy  : Ext.emptyFn,

/**
     *
Returns the {@link Ext.Element} which encapsulates this Component.

     *
This will usually be a <DIV> element created by the class's onRender method, but
     * that may be overridden using the {@link #autoEl} config.

     *
Note: this element will not be available until this Component has been rendered.

     *
To add listeners for DOM events to this Component (as opposed to listeners
     * for this Component's own Observable events), see the {@link #listeners} config for a suggestion,
     * or use a render listener directly:

new Ext.Panel({
    title: 'The Clickable Panel',
    listeners: {
        render: function(p) {
            // Append the Panel to the click handler's argument list.
            p.getEl().on('click', handlePanelClick.createDelegate(null, [p], true));
        },
        single: true  // Remove the listener after first invocation
    }
});

     * @return {Ext.Element} The Element which encapsulates this Component.
     */
    getEl : function(){
        return this.el;
    },

    // private
    getContentTarget : function(){
        return this.el;
    },

/**
     * Returns the id of this component or automatically generates and
     * returns an id if an id is not defined yet:

     * 'ext-comp-' + (++Ext.Component.AUTO_ID)
     *

     * @return {String} id
     */
    getId : function(){
        return this.id || (this.id = 'ext-comp-' + (++Ext.Component.AUTO_ID));
    },

/**
     * Returns the {@link #itemId} of this component.  If an
     * {@link #itemId} was not assigned through configuration the
     * id is returned using {@link #getId}.
     * @return {String}
     */
    getItemId : function(){
        return this.itemId || this.getId();
    },

/**
     * Try to focus this component.
     * @param {Boolean} selectText (optional) If applicable, true to also select the text in this component
     * @param {Boolean/Number} delay (optional) Delay the focus this number of milliseconds (true for 10 milliseconds)
     * @return {Ext.Component} this
     */
    focus : function(selectText, delay){
        if(delay){
            this.focusTask = new Ext.util.DelayedTask(this.focus, this, [selectText, false]);
            this.focusTask.delay(Ext.isNumber(delay) ? delay : 10);
            return;
        }
        if(this.rendered && !this.isDestroyed){
            this.el.focus();
            if(selectText === true){
                this.el.dom.select();
            }
        }
        return this;
    },

    // private
    blur : function(){
        if(this.rendered){
            this.el.blur();
        }
        return this;
    },

/**
     * Disable this component and fire the 'disable' event.
     * @return {Ext.Component} this
     */
    disable : function(/* private */ silent){
        if(this.rendered){
            this.onDisable();
        }
        this.disabled = true;
        if(silent !== true){
            this.fireEvent('disable', this);
        }
        return this;
    },

    // private
    onDisable : function(){
        this.getActionEl().addClass(this.disabledClass);
        this.el.dom.disabled = true;
    },

/**
     * Enable this component and fire the 'enable' event.
     * @return {Ext.Component} this
     */
    enable : function(){
        if(this.rendered){
            this.onEnable();
        }
        this.disabled = false;
        this.fireEvent('enable', this);
        return this;
    },

    // private
    onEnable : function(){
        this.getActionEl().removeClass(this.disabledClass);
        this.el.dom.disabled = false;
    },

/**
     * Convenience function for setting disabled/enabled by boolean.
     * @param {Boolean} disabled
     * @return {Ext.Component} this
     */
    setDisabled : function(disabled){
        return this[disabled ? 'disable' : 'enable']();
    },

/**
     * Show this component.  Listen to the '{@link #beforeshow}' event and return
     * false to cancel showing the component.  Fires the '{@link #show}'
     * event after showing the component.
     * @return {Ext.Component} this
     */
    show : function(){
        if(this.fireEvent('beforeshow', this) !== false){
            this.hidden = false;
            if(this.autoRender){
                this.render(Ext.isBoolean(this.autoRender) ? Ext.getBody() : this.autoRender);
            }
            if(this.rendered){
                this.onShow();
            }
            this.fireEvent('show', this);
        }
        return this;
    },

    // private
    onShow : function(){
        this.getVisibilityEl().removeClass('x-hide-' + this.hideMode);
    },

/**
     * Hide this component.  Listen to the '{@link #beforehide}' event and return
     * false to cancel hiding the component.  Fires the '{@link #hide}'
     * event after hiding the component. Note this method is called internally if
     * the component is configured to be {@link #hidden}.
     * @return {Ext.Component} this
     */
    hide : function(){
        if(this.fireEvent('beforehide', this) !== false){
            this.doHide();
            this.fireEvent('hide', this);
        }
        return this;
    },

    // private
    doHide: function(){
        this.hidden = true;
        if(this.rendered){
            this.onHide();
        }
    },

    // private
    onHide : function(){
        this.getVisibilityEl().addClass('x-hide-' + this.hideMode);
    },

    // private
    getVisibilityEl : function(){
        return this.hideParent ? this.container : this.getActionEl();
    },

/**
     * Convenience function to hide or show this component by boolean.
     * @param {Boolean} visible True to show, false to hide
     * @return {Ext.Component} this
     */
    setVisible : function(visible){
        return this[visible ? 'show' : 'hide']();
    },

/**
     * Returns true if this component is visible.
     * @return {Boolean} True if this component is visible, false otherwise.
     */
    isVisible : function(){
        return this.rendered && this.getVisibilityEl().isVisible();
    },

/**
     * Clone the current component using the original config values passed into this instance by default.
     * @param {Object} overrides A new config containing any properties to override in the cloned version.
     * An id property can be passed on this object, otherwise one will be generated to avoid duplicates.
     * @return {Ext.Component} clone The cloned copy of this component
     */
    cloneConfig : function(overrides){
        overrides = overrides || {};
        var id = overrides.id || Ext.id();
        var cfg = Ext.applyIf(overrides, this.initialConfig);
        cfg.id = id; // prevent dup id
        return new this.constructor(cfg);
    },

/**
     * Gets the xtype for this component as registered with {@link Ext.ComponentMgr}. For a list of all
     * available xtypes, see the {@link Ext.Component} header. Example usage:
     *

var t = new Ext.form.TextField();
alert(t.getXType());  // alerts 'textfield'

     * @return {String} The xtype
     */
    getXType : function(){
        return this.constructor.xtype;
    },

/**
     *
Tests whether or not this Component is of a specific xtype. This can test whether this Component is descended
     * from the xtype (default) or whether it is directly of the xtype specified (shallow = true).

     *
If using your own subclasses, be aware that a Component must register its own xtype
     * to participate in determination of inherited xtypes.

     *
For a list of all available xtypes, see the {@link Ext.Component} header.

     *
Example usage:

     *

var t = new Ext.form.TextField();
var isText = t.isXType('textfield');        // true
var isBoxSubclass = t.isXType('box');       // true, descended from BoxComponent
var isBoxInstance = t.isXType('box', true); // false, not a direct BoxComponent instance

     * @param {String} xtype The xtype to check for this Component
     * @param {Boolean} shallow (optional) False to check whether this Component is descended from the xtype (this is
     * the default), or true to check whether this Component is directly of the specified xtype.
     * @return {Boolean} True if this component descends from the specified xtype, false otherwise.
     */
    isXType : function(xtype, shallow){
        //assume a string by default
        if (Ext.isFunction(xtype)){
            xtype = xtype.xtype; //handle being passed the class, e.g. Ext.Component
        }else if (Ext.isObject(xtype)){
            xtype = xtype.constructor.xtype; //handle being passed an instance
        }

        return !shallow ? ('/' + this.getXTypes() + '/').indexOf('/' + xtype + '/') != -1 : this.constructor.xtype == xtype;
    },

/**
     *
Returns this Component's xtype hierarchy as a slash-delimited string. For a list of all
     * available xtypes, see the {@link Ext.Component} header.

     *
If using your own subclasses, be aware that a Component must register its own xtype
     * to participate in determination of inherited xtypes.

     *
Example usage:

     *

var t = new Ext.form.TextField();
alert(t.getXTypes());  // alerts 'component/box/field/textfield'

     * @return {String} The xtype hierarchy string
     */
    getXTypes : function(){
        var tc = this.constructor;
        if(!tc.xtypes){
            var c = [], sc = this;
            while(sc && sc.constructor.xtype){
                c.unshift(sc.constructor.xtype);
                sc = sc.constructor.superclass;
            }
            tc.xtypeChain = c;
            tc.xtypes = c.join('/');
        }
        return tc.xtypes;
    },

/**
     * Find a container above this component at any level by a custom function. If the passed function returns
     * true, the container will be returned.
     * @param {Function} fn The custom function to call with the arguments (container, this component).
     * @return {Ext.Container} The first Container for which the custom function returns true
     */
    findParentBy : function(fn) {
        for (var p = this.ownerCt; (p != null) && !fn(p, this); p = p.ownerCt);
        return p || null;
    },

/**
     * Find a container above this component at any level by xtype or class
     * @param {String/Class} xtype The xtype string for a component, or the class of the component directly
     * @return {Ext.Container} The first Container which matches the given xtype or class
     */
    findParentByType : function(xtype) {
        return Ext.isFunction(xtype) ?
            this.findParentBy(function(p){
                return p.constructor === xtype;
            }) :
            this.findParentBy(function(p){
                return p.constructor.xtype === xtype;
            });
    },

    // protected
    getPositionEl : function(){
        return this.positionEl || this.el;
    },

    // private
    purgeListeners : function(){
        Ext.Component.superclass.purgeListeners.call(this);
        if(this.mons){
            this.on('beforedestroy', this.clearMons, this, {single: true});
        }
    },

    // private
    clearMons : function(){
        Ext.each(this.mons, function(m){
            m.item.un(m.ename, m.fn, m.scope);
        }, this);
        this.mons = [];
    },

    // private
    createMons: function(){
        if(!this.mons){
            this.mons = [];
            this.on('beforedestroy', this.clearMons, this, {single: true});
        }
    },

/**
     *
Adds listeners to any Observable object (or Elements) which are automatically removed when this Component
     * is destroyed. Usage:
myGridPanel.mon(myGridPanel.getSelectionModel(), 'selectionchange', handleSelectionChange, null, {buffer: 50});

     *
or:
myGridPanel.mon(myGridPanel.getSelectionModel(), {
    selectionchange: handleSelectionChange,
    buffer: 50
});

     * @param {Observable|Element} item The item to which to add a listener/listeners.
     * @param {Object|String} ename The event name, or an object containing event name properties.
     * @param {Function} fn Optional. If the ename parameter was an event name, this
     * is the handler function.
     * @param {Object} scope Optional. If the ename parameter was an event name, this
     * is the scope (this reference) in which the handler function is executed.
     * @param {Object} opt Optional. If the ename parameter was an event name, this
     * is the {@link Ext.util.Observable#addListener addListener} options.
     */
    mon : function(item, ename, fn, scope, opt){
        this.createMons();
        if(Ext.isObject(ename)){
            var propRe = /^(?:scope|delay|buffer|single|stopEvent|preventDefault|stopPropagation|normalized|args|delegate)$/;

            var o = ename;
            for(var e in o){
                if(propRe.test(e)){
                    continue;
                }
                if(Ext.isFunction(o[e])){
                    // shared options
                    this.mons.push({
                        item: item, ename: e, fn: o[e], scope: o.scope
                    });
                    item.on(e, o[e], o.scope, o);
                }else{
                    // individual options
                    this.mons.push({
                        item: item, ename: e, fn: o[e], scope: o.scope
                    });
                    item.on(e, o[e]);
                }
            }
            return;
        }

        this.mons.push({
            item: item, ename: ename, fn: fn, scope: scope
        });
        item.on(ename, fn, scope, opt);
    },

/**
     * Removes listeners that were added by the {@link #mon} method.
     * @param {Observable|Element} item The item from which to remove a listener/listeners.
     * @param {Object|String} ename The event name, or an object containing event name properties.
     * @param {Function} fn Optional. If the ename parameter was an event name, this
     * is the handler function.
     * @param {Object} scope Optional. If the ename parameter was an event name, this
     * is the scope (this reference) in which the handler function is executed.
     */
    mun : function(item, ename, fn, scope){
        var found, mon;
        this.createMons();
        for(var i = 0, len = this.mons.length; i < len; ++i){
            mon = this.mons[i];
            if(item === mon.item && ename == mon.ename && fn === mon.fn && scope === mon.scope){
                this.mons.splice(i, 1);
                item.un(ename, fn, scope);
                found = true;
                break;
            }
        }
        return found;
    },

/**
     * Returns the next component in the owning container
     * @return Ext.Component
     */
    nextSibling : function(){
        if(this.ownerCt){
            var index = this.ownerCt.items.indexOf(this);
            if(index != -1 && index+1 < this.ownerCt.items.getCount()){
                return this.ownerCt.items.itemAt(index+1);
            }
        }
        return null;
    },

/**
     * Returns the previous component in the owning container
     * @return Ext.Component
     */
    previousSibling : function(){
        if(this.ownerCt){
            var index = this.ownerCt.items.indexOf(this);
            if(index > 0){
                return this.ownerCt.items.itemAt(index-1);
            }
        }
        return null;
    },

/**
     * Provides the link for Observable's fireEvent method to bubble up the ownership hierarchy.
     * @return {Ext.Container} the Container which owns this Component.
     */
    getBubbleTarget : function(){
        return this.ownerCt;
    }
});

Ext.reg('component', Ext.Component);


The source code

/*!
 * licensing@extjs.com
 * http://www.extjs.com/license
 */

/**
 * @class Ext.ComponentMgr
 *
Provides a registry of all Components (instances of {@link Ext.Component} or any subclass
 * thereof) on a page so that they can be easily accessed by {@link Ext.Component component}
 * {@link Ext.Component#id id} (see {@link #get}, or the convenience method {@link Ext#getCmp Ext.getCmp}).

 *
This object also provides a registry of available Component classes
 * indexed by a mnemonic code known as the Component's {@link Ext.Component#xtype xtype}.
 * The {@link Ext.Component#xtype xtype} provides a way to avoid instantiating child Components
 * when creating a full, nested config object for a complete Ext page.

 *
A child Component may be specified simply as a config object
 * as long as the correct {@link Ext.Component#xtype xtype} is specified so that if and when the Component
 * needs rendering, the correct type can be looked up for lazy instantiation.

 *
For a list of all available {@link Ext.Component#xtype xtypes}, see {@link Ext.Component}.

 * @singleton
 */
Ext.ComponentMgr = function(){
    var all = new Ext.util.MixedCollection();
    var types = {};
    var ptypes = {};

    return {

/**
         * Registers a component.
         * @param {Ext.Component} c The component
         */
        register : function(c){
            all.add(c);
        },

/**
         * Unregisters a component.
         * @param {Ext.Component} c The component
         */
        unregister : function(c){
            all.remove(c);
        },

/**
         * Returns a component by {@link Ext.Component#id id}.
         * For additional details see {@link Ext.util.MixedCollection#get}.
         * @param {String} id The component {@link Ext.Component#id id}
         * @return Ext.Component The Component, undefined if not found, or null if a
         * Class was found.
         */
        get : function(id){
            return all.get(id);
        },

/**
         * Registers a function that will be called when a Component with the specified id is added to ComponentMgr. This will happen on instantiation.
         * @param {String} id The component {@link Ext.Component#id id}
         * @param {Function} fn The callback function
         * @param {Object} scope The scope (this reference) in which the callback is executed. Defaults to the Component.
         */
        onAvailable : function(id, fn, scope){
            all.on("add", function(index, o){
                if(o.id == id){
                    fn.call(scope || o, o);
                    all.un("add", fn, scope);
                }
            });
        },

/**
         * The MixedCollection used internally for the component cache. An example usage may be subscribing to
         * events on the MixedCollection to monitor addition or removal.  Read-only.
         * @type {MixedCollection}
         */
        all : all,

/**
         * The xtypes that have been registered with the component manager.
         * @type {Object}
         */
        types : types,

/**
         * The ptypes that have been registered with the component manager.
         * @type {Object}
         */
        ptypes: ptypes,

/**
         * Checks if a Component type is registered.
         * @param {Ext.Component} xtype The mnemonic string by which the Component class may be looked up
         * @return {Boolean} Whether the type is registered.
         */
        isRegistered : function(xtype){
            return types[xtype] !== undefined;
        },

/**
         * Checks if a Plugin type is registered.
         * @param {Ext.Component} ptype The mnemonic string by which the Plugin class may be looked up
         * @return {Boolean} Whether the type is registered.
         */
        isPluginRegistered : function(ptype){
            return ptypes[ptype] !== undefined;
        },

/**
         *
Registers a new Component constructor, keyed by a new
         * {@link Ext.Component#xtype}.

         *
Use this method (or its alias {@link Ext#reg Ext.reg}) to register new
         * subclasses of {@link Ext.Component} so that lazy instantiation may be used when specifying
         * child Components.
         * see {@link Ext.Container#items}

         * @param {String} xtype The mnemonic string by which the Component class may be looked up.
         * @param {Constructor} cls The new Component class.
         */
        registerType : function(xtype, cls){
            types[xtype] = cls;
            cls.xtype = xtype;
        },

/**
         * Creates a new Component from the specified config object using the
         * config object's {@link Ext.component#xtype xtype} to determine the class to instantiate.
         * @param {Object} config A configuration object for the Component you wish to create.
         * @param {Constructor} defaultType The constructor to provide the default Component type if
         * the config object does not contain a xtype. (Optional if the config contains a xtype).
         * @return {Ext.Component} The newly instantiated Component.
         */
        create : function(config, defaultType){
            return config.render ? config : new types[config.xtype || defaultType](config);
        },

/**
         *
Registers a new Plugin constructor, keyed by a new
         * {@link Ext.Component#ptype}.

         *
Use this method (or its alias {@link Ext#preg Ext.preg}) to register new
         * plugins for {@link Ext.Component}s so that lazy instantiation may be used when specifying
         * Plugins.

         * @param {String} ptype The mnemonic string by which the Plugin class may be looked up.
         * @param {Constructor} cls The new Plugin class.
         */
        registerPlugin : function(ptype, cls){
            ptypes[ptype] = cls;
            cls.ptype = ptype;
        },

/**
         * Creates a new Plugin from the specified config object using the
         * config object's {@link Ext.component#ptype ptype} to determine the class to instantiate.
         * @param {Object} config A configuration object for the Plugin you wish to create.
         * @param {Constructor} defaultType The constructor to provide the default Plugin type if
         * the config object does not contain a ptype. (Optional if the config contains a ptype).
         * @return {Ext.Component} The newly instantiated Plugin.
         */
        createPlugin : function(config, defaultType){
            var PluginCls = ptypes[config.ptype || defaultType];
            if (PluginCls.init) {
                return PluginCls;
            } else {
                return new PluginCls(config);
            }
        }
    };
}();

/**
 * Shorthand for {@link Ext.ComponentMgr#registerType}
 * @param {String} xtype The {@link Ext.component#xtype mnemonic string} by which the Component class
 * may be looked up.
 * @param {Constructor} cls The new Component class.
 * @member Ext
 * @method reg
 */
Ext.reg = Ext.ComponentMgr.registerType; // this will be called a lot internally, shorthand to keep the bytes down

/**
 * Shorthand for {@link Ext.ComponentMgr#registerPlugin}
 * @param {String} ptype The {@link Ext.component#ptype mnemonic string} by which the Plugin class
 * may be looked up.
 * @param {Constructor} cls The new Plugin class.
 * @member Ext
 * @method preg
 */
Ext.preg = Ext.ComponentMgr.registerPlugin;

/**
 * Shorthand for {@link Ext.ComponentMgr#create}
 * Creates a new Component from the specified config object using the
 * config object's {@link Ext.component#xtype xtype} to determine the class to instantiate.
 * @param {Object} config A configuration object for the Component you wish to create.
 * @param {Constructor} defaultType The constructor to provide the default Component type if
 * the config object does not contain a xtype. (Optional if the config contains a xtype).
 * @return {Ext.Component} The newly instantiated Component.
 * @member Ext
 * @method create
 */
Ext.create = Ext.ComponentMgr.create;


The source code

/*!
 * licensing@extjs.com
 * http://www.extjs.com/license
 */

/**
 * @class Ext.CompositeElement
 * @extends Ext.CompositeElementLite
 *
This class encapsulates a collection of DOM elements, providing methods to filter
 * members, or to perform collective actions upon the whole set.

 *
Although they are not listed, this class supports all of the methods of {@link Ext.Element} and
 * {@link Ext.Fx}. The methods from these classes will be performed on all the elements in this collection.

 *
All methods return this and can be chained.

 * Usage:

var els = Ext.select("#some-el div.some-class", true);
// or select directly from an existing element
var el = Ext.get('some-el');
el.select('div.some-class', true);

els.setWidth(100); // all elements become 100 width
els.hide(true); // all elements fade out and hide
// or
els.setWidth(100).hide(true);

 */
Ext.CompositeElement = function(els, root){
    this.elements = [];
    this.add(els, root);
};

Ext.extend(Ext.CompositeElement, Ext.CompositeElementLite, {

    // private
    getElement : function(el){
        // In this case just return it, since we already have a reference to it
        return el;
    },

    // private
    transformElement : function(el){
        return Ext.get(el);
    }

    /**
    * Adds elements to this composite.
    * @param {String/Array} els A string CSS selector, an array of elements or an element
    * @return {CompositeElement} this
    */

    /**
     * Returns the Element object at the specified index
     * @param {Number} index
     * @return {Ext.Element}
     */

/**
     * Iterates each element in this composite
     * calling the supplied function using {@link Ext#each}.
     * @param {Function} fn The function to be called with each
     * element. If the supplied function returns false,
     * iteration stops. This function is called with the following arguments:
     *

     *
  • element : Ext.Element
    The element at the current index
     * in the composite
    •
     *
  • composite : Object
    This composite.
    •
     *
  • index : Number
    The current index within the composite
    •
     *

     * @param {Object} scope (optional) The scope ( reference) in which the specified function is executed.
     * Defaults to the element at the current index
     * within the composite.
     * @return {CompositeElement} this
     */
});

/**
 * Selects elements based on the passed CSS selector to enable {@link Ext.Element Element} methods
 * to be applied to many related elements in one statement through the returned {@link Ext.CompositeElement CompositeElement} or
 * {@link Ext.CompositeElementLite CompositeElementLite} object.
 * @param {String/Array} selector The CSS selector or an array of elements
 * @param {Boolean} unique (optional) true to create a unique Ext.Element for each element (defaults to a shared flyweight object)
 * @param {HTMLElement/String} root (optional) The root element of the query or id of the root
 * @return {CompositeElementLite/CompositeElement}
 * @member Ext.Element
 * @method select
 */
Ext.Element.select = function(selector, unique, root){
    var els;
    if(typeof selector == "string"){
        els = Ext.Element.selectorFunction(selector, root);
    }else if(selector.length !== undefined){
        els = selector;
    }else{
        throw "Invalid selector";
    }

    return (unique === true) ? new Ext.CompositeElement(els) : new Ext.CompositeElementLite(els);
};

/**
 * Selects elements based on the passed CSS selector to enable {@link Ext.Element Element} methods
 * to be applied to many related elements in one statement through the returned {@link Ext.CompositeElement CompositeElement} or
 * {@link Ext.CompositeElementLite CompositeElementLite} object.
 * @param {String/Array} selector The CSS selector or an array of elements
 * @param {Boolean} unique (optional) true to create a unique Ext.Element for each element (defaults to a shared flyweight object)
 * @param {HTMLElement/String} root (optional) The root element of the query or id of the root
 * @return {CompositeElementLite/CompositeElement}
 * @member Ext.Element
 * @method select
 */
Ext.select = Ext.Element.select;


The source code

/*!
 * licensing@extjs.com
 * http://www.extjs.com/license
 */
/**
 * @class Ext.CompositeElementLite
 */
Ext.apply(Ext.CompositeElementLite.prototype, {
    addElements : function(els, root){
        if(!els){
            return this;
        }
        if(typeof els == "string"){
            els = Ext.Element.selectorFunction(els, root);
        }
        var yels = this.elements;
        Ext.each(els, function(e) {
            yels.push(Ext.get(e));
        });
        return this;
    },

/**
     * Returns the first Element
     * @return {Ext.Element}
     */
    first : function(){
        return this.item(0);
    },

/**
     * Returns the last Element
     * @return {Ext.Element}
     */
    last : function(){
        return this.item(this.getCount()-1);
    },

/**
     * Returns true if this composite contains the passed element
     * @param el {Mixed} The id of an element, or an Ext.Element, or an HtmlElement to find within the composite collection.
     * @return Boolean
     */
    contains : function(el){
        return this.indexOf(el) != -1;
    },

/**
    * Removes the specified element(s).
    * @param {Mixed} el The id of an element, the Element itself, the index of the element in this composite
    * or an array of any of those.
    * @param {Boolean} removeDom (optional) True to also remove the element from the document
    * @return {CompositeElement} this
    */
    removeElement : function(keys, removeDom){
        var me = this,
            els = this.elements,
            el;
        Ext.each(keys, function(val){
            if ((el = (els[val] || els[val = me.indexOf(val)]))) {
                if(removeDom){
                    if(el.dom){
                        el.remove();
                    }else{
                        Ext.removeNode(el);
                    }
                }
                els.splice(val, 1);
            }
        });
        return this;
    }
});


The source code

/*!
 * licensing@extjs.com
 * http://www.extjs.com/license
 */

/**
 * @class Ext.CompositeElementLite
 *
This class encapsulates a collection of DOM elements, providing methods to filter
 * members, or to perform collective actions upon the whole set.

 *
Although they are not listed, this class supports all of the methods of {@link Ext.Element} and
 * {@link Ext.Fx}. The methods from these classes will be performed on all the elements in this collection.

 * Example:

var els = Ext.select("#some-el div.some-class");
// or select directly from an existing element
var el = Ext.get('some-el');
el.select('div.some-class');

els.setWidth(100); // all elements become 100 width
els.hide(true); // all elements fade out and hide
// or
els.setWidth(100).hide(true);

 */
Ext.CompositeElementLite = function(els, root){

/**
     *
The Array of DOM elements which this CompositeElement encapsulates. Read-only.

     *
This will not usually be accessed in developers' code, but developers wishing
     * to augment the capabilities of the CompositeElementLite class may use it when adding
     * methods to the class.

     *
For example to add the nextAll method to the class to add all
     * following siblings of selected elements, the code would be
Ext.override(Ext.CompositeElementLite, {
    nextAll: function() {
        var els = this.elements, i, l = els.length, n, r = [], ri = -1;

//      Loop through all elements in this Composite, accumulating
//      an Array of all siblings.
        for (i = 0; i < l; i++) {
            for (n = els[i].nextSibling; n; n = n.nextSibling) {
                r[++ri] = n;
            }
        }

//      Add all found siblings to this Composite
        return this.add(r);
    }
});

     * @type Array
     * @property elements
     */
    this.elements = [];
    this.add(els, root);
    this.el = new Ext.Element.Flyweight();
};

Ext.CompositeElementLite.prototype = {
    isComposite: true,

    // private
    getElement : function(el){
        // Set the shared flyweight dom property to the current element
        var e = this.el;
        e.dom = el;
        e.id = el.id;
        return e;
    },

    // private
    transformElement : function(el){
        return Ext.getDom(el);
    },

/**
     * Returns the number of elements in this Composite.
     * @return Number
     */
    getCount : function(){
        return this.elements.length;
    },

/**
     * Adds elements to this Composite object.
     * @param {Mixed} els Either an Array of DOM elements to add, or another Composite object who's elements should be added.
     * @return {CompositeElement} This Composite object.
     */
    add : function(els, root){
        var me = this,
            elements = me.elements;
        if(!els){
            return this;
        }
        if(Ext.isString(els)){
            els = Ext.Element.selectorFunction(els, root);
        }else if(els.isComposite){
            els = els.elements;
        }else if(!Ext.isIterable(els)){
            els = [els];
        }

        for(var i = 0, len = els.length; i < len; ++i){
            elements.push(me.transformElement(els[i]));
        }
        return me;
    },

    invoke : function(fn, args){
        var me = this,
            els = me.elements,
            len = els.length,
            e,
            i;

        for(i = 0; i < len; i++) {
            e = els[i];
            if(e){
                Ext.Element.prototype[fn].apply(me.getElement(e), args);
            }
        }
        return me;
    },

/**
     * Returns a flyweight Element of the dom element object at the specified index
     * @param {Number} index
     * @return {Ext.Element}
     */
    item : function(index){
        var me = this,
            el = me.elements[index],
            out = null;

        if(el){
            out = me.getElement(el);
        }
        return out;
    },

    // fixes scope with flyweight
    addListener : function(eventName, handler, scope, opt){
        var els = this.elements,
            len = els.length,
            i, e;

        for(i = 0; i/**
     *
Calls the passed function for each element in this composite.

     * @param {Function} fn The function to call. The function is passed the following parameters:

     *
  • el : Element
    The current Element in the iteration.
     * This is the flyweight (shared) Ext.Element instance, so if you require a
     * a reference to the dom node, use el.dom.
    •
     *
  • c : Composite
    This Composite object.
    •
     *
  • idx : Number
    The zero-based index in the iteration.
    •
     *

     * @param {Object} scope (optional) The scope (this reference) in which the function is executed. (defaults to the Element)
     * @return {CompositeElement} this
     */
    each : function(fn, scope){
        var me = this,
            els = me.elements,
            len = els.length,
            i, e;

        for(i = 0; i/**
    * Clears this Composite and adds the elements passed.
    * @param {Mixed} els Either an array of DOM elements, or another Composite from which to fill this Composite.
    * @return {CompositeElement} this
    */
    fill : function(els){
        var me = this;
        me.elements = [];
        me.add(els);
        return me;
    },

/**
     * Filters this composite to only elements that match the passed selector.
     * @param {String/Function} selector A string CSS selector or a comparison function.
     * The comparison function will be called with the following arguments:

     *
  • el : Ext.Element
    The current DOM element.
    •
     *
  • index : Number
    The current index within the collection.
    •
     *

     * @return {CompositeElement} this
     */
    filter : function(selector){
        var els = [],
            me = this,
            elements = me.elements,
            fn = Ext.isFunction(selector) ? selector
                : function(el){
                    return el.is(selector);
                };

        me.each(function(el, self, i){
            if(fn(el, i) !== false){
                els[els.length] = me.transformElement(el);
            }
        });
        me.elements = els;
        return me;
    },

/**
     * Find the index of the passed element within the composite collection.
     * @param el {Mixed} The id of an element, or an Ext.Element, or an HtmlElement to find within the composite collection.
     * @return Number The index of the passed Ext.Element in the composite collection, or -1 if not found.
     */
    indexOf : function(el){
        return this.elements.indexOf(this.transformElement(el));
    },

/**
    * Replaces the specified element with the passed element.
    * @param {Mixed} el The id of an element, the Element itself, the index of the element in this composite
    * to replace.
    * @param {Mixed} replacement The id of an element or the Element itself.
    * @param {Boolean} domReplace (Optional) True to remove and replace the element in the document too.
    * @return {CompositeElement} this
    */
    replaceElement : function(el, replacement, domReplace){
        var index = !isNaN(el) ? el : this.indexOf(el),
            d;
        if(index > -1){
            replacement = Ext.getDom(replacement);
            if(domReplace){
                d = this.elements[index];
                d.parentNode.insertBefore(replacement, d);
                Ext.removeNode(d);
            }
            this.elements.splice(index, 1, replacement);
        }
        return this;
    },

/**
     * Removes all elements.
     */
    clear : function(){
        this.elements = [];
    }
};

Ext.CompositeElementLite.prototype.on = Ext.CompositeElementLite.prototype.addListener;

(function(){
var fnName,
    ElProto = Ext.Element.prototype,
    CelProto = Ext.CompositeElementLite.prototype;

for(fnName in ElProto){
    if(Ext.isFunction(ElProto[fnName])){
        (function(fnName){
            CelProto[fnName] = CelProto[fnName] || function(){
                return this.invoke(fnName, arguments);
            };
        }).call(CelProto, fnName);

    }
}
})();

if(Ext.DomQuery){
    Ext.Element.selectorFunction = Ext.DomQuery.select;
}

/**
 * Selects elements based on the passed CSS selector to enable {@link Ext.Element Element} methods
 * to be applied to many related elements in one statement through the returned {@link Ext.CompositeElement CompositeElement} or
 * {@link Ext.CompositeElementLite CompositeElementLite} object.
 * @param {String/Array} selector The CSS selector or an array of elements
 * @param {HTMLElement/String} root (optional) The root element of the query or id of the root
 * @return {CompositeElementLite/CompositeElement}
 * @member Ext.Element
 * @method select
 */
Ext.Element.select = function(selector, root){
    var els;
    if(typeof selector == "string"){
        els = Ext.Element.selectorFunction(selector, root);
    }else if(selector.length !== undefined){
        els = selector;
    }else{
        throw "Invalid selector";
    }
    return new Ext.CompositeElementLite(els);
};

/**
 * Selects elements based on the passed CSS selector to enable {@link Ext.Element Element} methods
 * to be applied to many related elements in one statement through the returned {@link Ext.CompositeElement CompositeElement} or
 * {@link Ext.CompositeElementLite CompositeElementLite} object.
 * @param {String/Array} selector The CSS selector or an array of elements
 * @param {HTMLElement/String} root (optional) The root element of the query or id of the root
 * @return {CompositeElementLite/CompositeElement}
 * @member Ext
 * @method select
 */
Ext.select = Ext.Element.select;


The source code

/*!
 * licensing@extjs.com
 * http://www.extjs.com/license
 */

/**
 * @class Ext.form.CompositeField
 * @extends Ext.form.Field
 * Composite field allowing a number of form Fields to be rendered on the same row. The fields are rendered
 * using an hbox layout internally, so all of the normal HBox layout config items are available. Example usage:
 *
{
    xtype: 'compositefield',
    labelWidth: 120
    items: [
        {
            xtype     : 'textfield',
            fieldLabel: 'Title',
            width     : 20
        },
        {
            xtype     : 'textfield',
            fieldLabel: 'First',
            flex      : 1
        },
        {
            xtype     : 'textfield',
            fieldLabel: 'Last',
            flex      : 1
        }
    ]
}
 *

 * In the example above the composite's fieldLabel will be set to 'Title, First, Last' as it groups the fieldLabels
 * of each of its children. This can be overridden by setting a fieldLabel on the compositefield itself:
 *
{
    xtype: 'compositefield',
    fieldLabel: 'Custom label',
    items: [...]
}
 *

 * Any Ext.form.* component can be placed inside a composite field.
 */
Ext.form.CompositeField = Ext.extend(Ext.form.Field, {

/**
     * @property defaultMargins
     * @type String
     * The margins to apply by default to each field in the composite
     */
    defaultMargins: '0 5 0 0',

/**
     * @property skipLastItemMargin
     * @type Boolean
     * If true, the defaultMargins are not applied to the last item in the composite field set (defaults to true)
     */
    skipLastItemMargin: true,

/**
     * @property isComposite
     * @type Boolean
     * Signifies that this is a Composite field
     */
    isComposite: true,

/**
     * @property combineErrors
     * @type Boolean
     * True to combine errors from the individual fields into a single error message at the CompositeField level (defaults to true)
     */
    combineErrors: true,

    //inherit docs
    //Builds the composite field label
    initComponent: function() {
        var labels = [],
            items  = this.items,
            item;

        for (var i=0, j = items.length; i < j; i++) {
            item = items[i];

            labels.push(item.fieldLabel);

            //apply any defaults
            Ext.apply(item, this.defaults);

            //apply default margins to each item except the last
            if (!(i == j - 1 && this.skipLastItemMargin)) {
                Ext.applyIf(item, {margins: this.defaultMargins});
            }
        }

        this.fieldLabel = this.fieldLabel || this.buildLabel(labels);

/**
         * @property fieldErrors
         * @type Ext.util.MixedCollection
         * MixedCollection of current errors on the Composite's subfields. This is used internally to track when
         * to show and hide error messages at the Composite level. Listeners are attached to the MixedCollection's
         * add, remove and replace events to update the error icon in the UI as errors are added or removed.
         */
        this.fieldErrors = new Ext.util.MixedCollection(true, function(item) {
            return item.field;
        });

        this.fieldErrors.on({
            scope  : this,
            add    : this.updateInvalidMark,
            remove : this.updateInvalidMark,
            replace: this.updateInvalidMark
        });

        Ext.form.CompositeField.superclass.initComponent.apply(this, arguments);
    },

    /**
     * @private
     * Creates an internal container using hbox and renders the fields to it
     */
    onRender: function(ct, position) {
        if (!this.el) {

/**
             * @property innerCt
             * @type Ext.Container
             * A container configured with hbox layout which is responsible for laying out the subfields
             */
            var innerCt = this.innerCt = new Ext.Container({
                layout  : 'hbox',
                renderTo: ct,
                items   : this.items,
                cls     : 'x-form-composite',
                defaultMargins: '0 3 0 0'
            });

            this.el = innerCt.getEl();

            var fields = innerCt.findBy(function(c) {
                return c.isFormField;
            }, this);

/**
             * @property items
             * @type Ext.util.MixedCollection
             * Internal collection of all of the subfields in this Composite
             */
            this.items = new Ext.util.MixedCollection();
            this.items.addAll(fields);

            //if we're combining subfield errors into a single message, override the markInvalid and clearInvalid
            //methods of each subfield and show them at the Composite level instead
            if (this.combineErrors) {
                this.eachItem(function(field) {
                    Ext.apply(field, {
                        markInvalid : this.onFieldMarkInvalid.createDelegate(this, [field], 0),
                        clearInvalid: this.onFieldClearInvalid.createDelegate(this, [field], 0)
                    });
                });
            }

            //set the label 'for' to the first item
            var l = this.el.parent().parent().child('label', true);
            if (l) {
                l.setAttribute('for', this.items.items[0].id);
            }
        }

        Ext.form.CompositeField.superclass.onRender.apply(this, arguments);
    },

/**
     * Called if combineErrors is true and a subfield's markInvalid method is called.
     * By default this just adds the subfield's error to the internal fieldErrors MixedCollection
     * @param {Ext.form.Field} field The field that was marked invalid
     * @param {String} message The error message
     */
    onFieldMarkInvalid: function(field, message) {
        var name  = field.getName(),
            error = {field: name, error: message};

        this.fieldErrors.replace(name, error);

        field.el.addClass(field.invalidClass);
    },

/**
     * Called if combineErrors is true and a subfield's clearInvalid method is called.
     * By default this just updates the internal fieldErrors MixedCollection.
     * @param {Ext.form.Field} field The field that was marked invalid
     */
    onFieldClearInvalid: function(field) {
        this.fieldErrors.removeKey(field.getName());

        field.el.removeClass(field.invalidClass);
    },

    /**
     * @private
     * Called after a subfield is marked valid or invalid, this checks to see if any of the subfields are
     * currently invalid. If any subfields are invalid it builds a combined error message marks the composite
     * invalid, otherwise clearInvalid is called
     */
    updateInvalidMark: function() {
        var ieStrict = Ext.isIE6 && Ext.isStrict;

        if (this.fieldErrors.length == 0) {
            this.clearInvalid();

            //IE6 in strict mode has a layout bug when using 'under' as the error message target. This fixes it
            if (ieStrict) {
                this.clearInvalid.defer(50, this);
            }
        } else {
            var message = this.buildCombinedErrorMessage(this.fieldErrors.items);

            this.sortErrors();
            this.markInvalid(message);

            //IE6 in strict mode has a layout bug when using 'under' as the error message target. This fixes it
            if (ieStrict) {
                this.markInvalid(message);
            }
        }
    },

/**
     * Performs validation checks on each subfield and returns false if any of them fail validation.
     * @return {Boolean} False if any subfield failed validation
     */
    validateValue: function() {
        var valid = true;

        this.eachItem(function(field) {
            if (!field.isValid()) valid = false;
        });

        return valid;
    },

/**
     * Takes an object containing error messages for contained fields, returning a combined error
     * string (defaults to just placing each item on a new line). This can be overridden to provide
     * custom combined error message handling.
     * @param {Array} errors Array of errors in format: [{field: 'title', error: 'some error'}]
     * @return {String} The combined error message
     */
    buildCombinedErrorMessage: function(errors) {
        var combined = [],
            error;

        for (var i = 0, j = errors.length; i < j; i++) {
            error = errors[i];

            combined.push(String.format("{0}: {1}", error.field, error.error));
        }

        return combined.join("
");
    },

/**
     * Sorts the internal fieldErrors MixedCollection by the order in which the fields are defined.
     * This is called before displaying errors to ensure that the errors are presented in the expected order.
     * This function can be overridden to provide a custom sorting order if needed.
     */
    sortErrors: function() {
        var fields = this.items;

        this.fieldErrors.sort("ASC", function(a, b) {
            var findByName = function(key) {
                return function(field) {
                    return field.getName() == key;
                };
            };

            var aIndex = fields.findIndexBy(findByName(a.field)),
                bIndex = fields.findIndexBy(findByName(b.field));

            return aIndex < bIndex ? -1 : 1;
        });
    },

/**
     * Resets each field in the composite to their previous value
     */
    reset: function() {
        this.eachItem(function(item) {
            item.reset();
        });

        // Defer the clearInvalid so if BaseForm's collection is being iterated it will be called AFTER it is complete.
        // Important because reset is being called on both the group and the individual items.
        (function() {
            this.clearInvalid();
        }).defer(50, this);
    },

/**
     * Calls clearInvalid on all child fields. This is a convenience function and should not often need to be called
     * as fields usually take care of clearing themselves
     */
    clearInvalidChildren: function() {
        this.eachItem(function(item) {
            item.clearInvalid();
        });
    },

/**
     * Builds a label string from an array of subfield labels.
     * By default this just joins the labels together with a comma
     * @param {Array} segments Array of each of the labels in the composite field's subfields
     * @return {String} The built label
     */
    buildLabel: function(segments) {
        return segments.join(", ");
    },

/**
     * Checks each field in the composite and returns true if any is dirty
     * @return {Boolean} True if any field is dirty
     */
    isDirty: function(){
        //override the behaviour to check sub items.
        if (this.disabled || !this.rendered) {
            return false;
        }

        var dirty = false;
        this.eachItem(function(item){
            if(item.isDirty()){
                dirty = true;
                return false;
            }
        });
        return dirty;
    },

    /**
     * @private
     * Convenience function which passes the given function to every item in the composite
     * @param {Function} fn The function to call
     * @param {Object} scope Optional scope object
     */
    eachItem: function(fn, scope) {
        if(this.items && this.items.each){
            this.items.each(fn, scope || this);
        }
    },

    /**
     * @private
     * Passes the resize call through to the inner panel
     */
    onResize: function(adjWidth, adjHeight, rawWidth, rawHeight) {
        var innerCt = this.innerCt;

        if (this.rendered && innerCt.rendered) {
            innerCt.setSize(adjWidth, adjHeight);
        }

        Ext.form.CompositeField.superclass.onResize.apply(this, arguments);
    },

    /**
     * @private
     * Forces the internal container to be laid out again
     */
    doLayout: function(shallow, force) {
        if (this.rendered) {
            var innerCt = this.innerCt;

            innerCt.forceLayout = this.ownerCt.forceLayout;
            innerCt.doLayout(shallow, force);
        }
    },

    /**
     * @private
     */
    beforeDestroy: function(){
        Ext.destroy(this.innerCt);

        Ext.form.CompositeField.superclass.beforeDestroy.call(this);
    },

    //override the behaviour to check sub items.
    setReadOnly : function(readOnly) {
        readOnly = readOnly || true;

        if(this.rendered){
            this.eachItem(function(item){
                item.setReadOnly(readOnly);
            });
        }
        this.readOnly = readOnly;
    },

    onShow : function() {
        Ext.form.CompositeField.superclass.onShow.call(this);
        this.doLayout();
    },

    //override the behaviour to check sub items.
    onDisable : function(){
        this.eachItem(function(item){
            item.disable();
        });
    },

    //override the behaviour to check sub items.
    onEnable : function(){
        this.eachItem(function(item){
            item.enable();
        });
    }
});

Ext.reg('compositefield', Ext.form.CompositeField);


The source code

/*!
 * licensing@extjs.com
 * http://www.extjs.com/license
 */
(function(){
    var BEFOREREQUEST = "beforerequest",
        REQUESTCOMPLETE = "requestcomplete",
        REQUESTEXCEPTION = "requestexception",
        UNDEFINED = undefined,
        LOAD = 'load',
        POST = 'POST',
        GET = 'GET',
        WINDOW = window;

/**
     * @class Ext.data.Connection
     * @extends Ext.util.Observable
     *
The class encapsulates a connection to the page's originating domain, allowing requests to be made
     * either to a configured URL, or to a URL specified at request time.

     *
Requests made by this class are asynchronous, and will return immediately. No data from
     * the server will be available to the statement immediately following the {@link #request} call.
     * To process returned data, use a
     * success callback
     * in the request options object,
     * or an {@link #requestcomplete event listener}.

     *
File Uploads
File uploads are not performed using normal "Ajax" techniques, that
     * is they are not performed using XMLHttpRequests. Instead the form is submitted in the standard
     * manner with the DOM <form> element temporarily modified to have its
     * target set to refer
     * to a dynamically generated, hidden <iframe> which is inserted into the document
     * but removed after the return data has been gathered.

     *
The server response is parsed by the browser to create the document for the IFRAME. If the
     * server is using JSON to send the return object, then the
     * Content-Type header
     * must be set to "text/html" in order to tell the browser to insert the text unchanged into the document body.

     *
Characters which are significant to an HTML parser must be sent as HTML entities, so encode
     * "<" as "&lt;", "&" as "&amp;" etc.

     *
The response text is retrieved from the document, and a fake XMLHttpRequest object
     * is created containing a responseText property in order to conform to the
     * requirements of event handlers and callbacks.

     *
Be aware that file upload packets are sent with the content type multipart/form
     * and some server technologies (notably JEE) may require some custom processing in order to
     * retrieve parameter names and parameter values from the packet content.

     * @constructor
     * @param {Object} config a configuration object.
     */
    Ext.data.Connection = function(config){
        Ext.apply(this, config);
        this.addEvents(

/**
             * @event beforerequest
             * Fires before a network request is made to retrieve a data object.
             * @param {Connection} conn This Connection object.
             * @param {Object} options The options config object passed to the {@link #request} method.
             */
            BEFOREREQUEST,

/**
             * @event requestcomplete
             * Fires if the request was successfully completed.
             * @param {Connection} conn This Connection object.
             * @param {Object} response The XHR object containing the response data.
             * See The XMLHttpRequest Object
             * for details.
             * @param {Object} options The options config object passed to the {@link #request} method.
             */
            REQUESTCOMPLETE,

/**
             * @event requestexception
             * Fires if an error HTTP status was returned from the server.
             * See HTTP Status Code Definitions
             * for details of HTTP status codes.
             * @param {Connection} conn This Connection object.
             * @param {Object} response The XHR object containing the response data.
             * See The XMLHttpRequest Object
             * for details.
             * @param {Object} options The options config object passed to the {@link #request} method.
             */
            REQUESTEXCEPTION
        );
        Ext.data.Connection.superclass.constructor.call(this);
    };

    Ext.extend(Ext.data.Connection, Ext.util.Observable, {

/**
         * @cfg {String} url (Optional)
The default URL to be used for requests to the server. Defaults to undefined.

         *
The url config may be a function which returns the URL to use for the Ajax request. The scope
         * (this reference) of the function is the scope option passed to the {@link #request} method.

         */

/**
         * @cfg {Object} extraParams (Optional) An object containing properties which are used as
         * extra parameters to each request made by this object. (defaults to undefined)
         */

/**
         * @cfg {Object} defaultHeaders (Optional) An object containing request headers which are added
         *  to each request made by this object. (defaults to undefined)
         */

/**
         * @cfg {String} method (Optional) The default HTTP method to be used for requests.
         * (defaults to undefined; if not set, but {@link #request} params are present, POST will be used;
         * otherwise, GET will be used.)
         */

/**
         * @cfg {Number} timeout (Optional) The timeout in milliseconds to be used for requests. (defaults to 30000)
         */
        timeout : 30000,

/**
         * @cfg {Boolean} autoAbort (Optional) Whether this request should abort any pending requests. (defaults to false)
         * @type Boolean
         */
        autoAbort:false,

/**
         * @cfg {Boolean} disableCaching (Optional) True to add a unique cache-buster param to GET requests. (defaults to true)
         * @type Boolean
         */
        disableCaching: true,

/**
         * @cfg {String} disableCachingParam (Optional) Change the parameter which is sent went disabling caching
         * through a cache buster. Defaults to '_dc'
         * @type String
         */
        disableCachingParam: '_dc',

/**
         *
Sends an HTTP request to a remote server.

         *
Important: Ajax server requests are asynchronous, and this call will
         * return before the response has been received. Process any returned data
         * in a callback function.

         *

Ext.Ajax.request({
   url: 'ajax_demo/sample.json',
   success: function(response, opts) {
      var obj = Ext.decode(response.responseText);
      console.dir(obj);
   },
   failure: function(response, opts) {
      console.log('server-side failure with status code ' + response.status);
   }
});
         *

         *
To execute a callback function in the correct scope, use the scope option.

         * @param {Object} options An object which may contain the following properties:

         *
  • url : String/Function (Optional)
    The URL to
         * which to send the request, or a function to call which returns a URL string. The scope of the
         * function is specified by the scope option. Defaults to the configured
         * {@link #url}.
    •
         *
  • params : Object/String/Function (Optional)

         * An object containing properties which are used as parameters to the
         * request, a url encoded string or a function to call to get either. The scope of the function
         * is specified by the scope option.
    •
         *
  • method : String (Optional)
    The HTTP method to use
         * for the request. Defaults to the configured method, or if no method was configured,
         * "GET" if no parameters are being sent, and "POST" if parameters are being sent.  Note that
         * the method name is case-sensitive and should be all caps.
    •
         *
  • callback : Function (Optional)
    The
         * function to be called upon receipt of the HTTP response. The callback is
         * called regardless of success or failure and is passed the following
         * parameters:

         *
    • options : Object
      The parameter to the request call.
      •
         *
    • success : Boolean
      True if the request succeeded.
      •
         *
    • response : Object
      The XMLHttpRequest object containing the response data.
         * See http://www.w3.org/TR/XMLHttpRequest/ for details about
         * accessing elements of the response.
      •
         *
    •
         *
  • success : Function (Optional)
    The function
         * to be called upon success of the request. The callback is passed the following
         * parameters:

         *
    • response : Object
      The XMLHttpRequest object containing the response data.
      •
         *
    • options : Object
      The parameter to the request call.
      •
         *
    •
         *
  • failure : Function (Optional)
    The function
         * to be called upon failure of the request. The callback is passed the
         * following parameters:

         *
    • response : Object
      The XMLHttpRequest object containing the response data.
      •
         *
    • options : Object
      The parameter to the request call.
      •
         *
    •
         *
  • scope : Object (Optional)
    The scope in
         * which to execute the callbacks: The "this" object for the callback function. If the url, or params options were
         * specified as functions from which to draw values, then this also serves as the scope for those function calls.
         * Defaults to the browser window.
    •
         *
  • timeout : Number (Optional)
    The timeout in milliseconds to be used for this request. Defaults to 30 seconds.
    •
         *
  • form : Element/HTMLElement/String (Optional)
    The <form>
         * Element or the id of the <form> to pull parameters from.
    •
         *
  • isUpload : Boolean (Optional)
    Only meaningful when used
         * with the form option.
         *
    True if the form object is a file upload (will be set automatically if the form was
         * configured with enctype "multipart/form-data").

         *
    File uploads are not performed using normal "Ajax" techniques, that is they are not
         * performed using XMLHttpRequests. Instead the form is submitted in the standard manner with the
         * DOM <form> element temporarily modified to have its
         * target set to refer
         * to a dynamically generated, hidden <iframe> which is inserted into the document
         * but removed after the return data has been gathered.

         *
    The server response is parsed by the browser to create the document for the IFRAME. If the
         * server is using JSON to send the return object, then the
         * Content-Type header
         * must be set to "text/html" in order to tell the browser to insert the text unchanged into the document body.

         *
    The response text is retrieved from the document, and a fake XMLHttpRequest object
         * is created containing a responseText property in order to conform to the
         * requirements of event handlers and callbacks.

         *
    Be aware that file upload packets are sent with the content type multipart/form
         * and some server technologies (notably JEE) may require some custom processing in order to
         * retrieve parameter names and parameter values from the packet content.

         *
    •
         *
  • headers : Object (Optional)
    Request
         * headers to set for the request.
    •
         *
  • xmlData : Object (Optional)
    XML document
         * to use for the post. Note: This will be used instead of params for the post
         * data. Any params will be appended to the URL.
    •
         *
  • jsonData : Object/String (Optional)
    JSON
         * data to use as the post. Note: This will be used instead of params for the post
         * data. Any params will be appended to the URL.
    •
         *
  • disableCaching : Boolean (Optional)
    True
         * to add a unique cache-buster param to GET requests.
    •
         *

         *
The options object may also contain any other property which might be needed to perform
         * postprocessing in a callback because it is passed to callback functions.

         * @return {Number} transactionId The id of the server transaction. This may be used
         * to cancel the request.
         */
        request : function(o){
            var me = this;
            if(me.fireEvent(BEFOREREQUEST, me, o)){
                if (o.el) {
                    if(!Ext.isEmpty(o.indicatorText)){
                        me.indicatorText = '
'+o.indicatorText+"
";
                    }
                    if(me.indicatorText) {
                        Ext.getDom(o.el).innerHTML = me.indicatorText;
                    }
                    o.success = (Ext.isFunction(o.success) ? o.success : function(){}).createInterceptor(function(response) {
                        Ext.getDom(o.el).innerHTML = response.responseText;
                    });
                }

                var p = o.params,
                    url = o.url || me.url,
                    method,
                    cb = {success: me.handleResponse,
                          failure: me.handleFailure,
                          scope: me,
                          argument: {options: o},
                          timeout : o.timeout || me.timeout
                    },
                    form,
                    serForm;

                if (Ext.isFunction(p)) {
                    p = p.call(o.scope||WINDOW, o);
                }

                p = Ext.urlEncode(me.extraParams, Ext.isObject(p) ? Ext.urlEncode(p) : p);

                if (Ext.isFunction(url)) {
                    url = url.call(o.scope || WINDOW, o);
                }

                if((form = Ext.getDom(o.form))){
                    url = url || form.action;
                     if(o.isUpload || /multipart\/form-data/i.test(form.getAttribute("enctype"))) {
                         return me.doFormUpload.call(me, o, p, url);
                     }
                    serForm = Ext.lib.Ajax.serializeForm(form);
                    p = p ? (p + '&' + serForm) : serForm;
                }

                method = o.method || me.method || ((p || o.xmlData || o.jsonData) ? POST : GET);

                if(method === GET && (me.disableCaching && o.disableCaching !== false) || o.disableCaching === true){
                    var dcp = o.disableCachingParam || me.disableCachingParam;
                    url = Ext.urlAppend(url, dcp + '=' + (new Date().getTime()));
                }

                o.headers = Ext.apply(o.headers || {}, me.defaultHeaders || {});

                if(o.autoAbort === true || me.autoAbort) {
                    me.abort();
                }

                if((method == GET || o.xmlData || o.jsonData) && p){
                    url = Ext.urlAppend(url, p);
                    p = '';
                }
                return (me.transId = Ext.lib.Ajax.request(method, url, cb, p, o));
            }else{
                return o.callback ? o.callback.apply(o.scope, [o,UNDEFINED,UNDEFINED]) : null;
            }
        },

/**
         * Determine whether this object has a request outstanding.
         * @param {Number} transactionId (Optional) defaults to the last transaction
         * @return {Boolean} True if there is an outstanding request.
         */
        isLoading : function(transId){
            return transId ? Ext.lib.Ajax.isCallInProgress(transId) : !! this.transId;
        },

/**
         * Aborts any outstanding request.
         * @param {Number} transactionId (Optional) defaults to the last transaction
         */
        abort : function(transId){
            if(transId || this.isLoading()){
                Ext.lib.Ajax.abort(transId || this.transId);
            }
        },

        // private
        handleResponse : function(response){
            this.transId = false;
            var options = response.argument.options;
            response.argument = options ? options.argument : null;
            this.fireEvent(REQUESTCOMPLETE, this, response, options);
            if(options.success){
                options.success.call(options.scope, response, options);
            }
            if(options.callback){
                options.callback.call(options.scope, options, true, response);
            }
        },

        // private
        handleFailure : function(response, e){
            this.transId = false;
            var options = response.argument.options;
            response.argument = options ? options.argument : null;
            this.fireEvent(REQUESTEXCEPTION, this, response, options, e);
            if(options.failure){
                options.failure.call(options.scope, response, options);
            }
            if(options.callback){
                options.callback.call(options.scope, options, false, response);
            }
        },

        // private
        doFormUpload : function(o, ps, url){
            var id = Ext.id(),
                doc = document,
                frame = doc.createElement('iframe'),
                form = Ext.getDom(o.form),
                hiddens = [],
                hd,
                encoding = 'multipart/form-data',
                buf = {
                    target: form.target,
                    method: form.method,
                    encoding: form.encoding,
                    enctype: form.enctype,
                    action: form.action
                };

            Ext.fly(frame).set({
                id: id,
                name: id,
                cls: 'x-hidden'

            });

            doc.body.appendChild(frame);

            //Reset the Frame to neutral domain
            Ext.fly(frame).set({
               src : Ext.SSL_SECURE_URL
            });

            // This is required so that IE doesn't pop the response up in a new window.
            if(Ext.isIE){
               document.frames[id].name = id;
            }

            Ext.fly(form).set({
                target: id,
                method: POST,
                enctype: encoding,
                encoding: encoding,
                action: url || buf.action
            });

            // add dynamic params
            Ext.iterate(Ext.urlDecode(ps, false), function(k, v){
                hd = doc.createElement('input');
                Ext.fly(hd).set({
                    type: 'hidden',
                    value: v,
                    name: k
                });
                form.appendChild(hd);
                hiddens.push(hd);
            });

            function cb(){
                var me = this,
                    // bogus response object
                    r = {responseText : '',
                         responseXML : null,
                         argument : o.argument},
                    doc,
                    firstChild;

                try{
                    doc = frame.contentWindow.document || frame.contentDocument || WINDOW.frames[id].document;
                    if(doc){
                        if(doc.body){
                            if(/textarea/i.test((firstChild = doc.body.firstChild || {}).tagName)){ // json response wrapped in textarea
                                r.responseText = firstChild.value;
                            }else{
                                r.responseText = doc.body.innerHTML;
                            }
                        }
                        //in IE the document may still have a body even if returns XML.
                        r.responseXML = doc.XMLDocument || doc;
                    }
                }
                catch(e) {}

                Ext.EventManager.removeListener(frame, LOAD, cb, me);

                me.fireEvent(REQUESTCOMPLETE, me, r, o);

                function runCallback(fn, scope, args){
                    if(Ext.isFunction(fn)){
                        fn.apply(scope, args);
                    }
                }

                runCallback(o.success, o.scope, [r, o]);
                runCallback(o.callback, o.scope, [o, true, r]);

                if(!me.debugUploads){
                    setTimeout(function(){Ext.removeNode(frame);}, 100);
                }
            }

            Ext.EventManager.on(frame, LOAD, cb, this);
            form.submit();

            Ext.fly(form).set(buf);
            Ext.each(hiddens, function(h) {
                Ext.removeNode(h);
            });
        }
    });
})();

/**
 * @class Ext.Ajax
 * @extends Ext.data.Connection
 *
The global Ajax request class that provides a simple way to make Ajax requests
 * with maximum flexibility.

 *
Since Ext.Ajax is a singleton, you can set common properties/events for it once
 * and override them at the request function level only if necessary.

 *
Common Properties you may want to set are:

 *
  • {@link #method}
    •
 *
  • {@link #extraParams}
    •
 *
  • {@link #url}
    •
 *

 *

// Default headers to pass in every request
Ext.Ajax.defaultHeaders = {
    'Powered-By': 'Ext'
};
 *

 *

 *
Common Events you may want to set are:

 *
  • {@link Ext.data.Connection#beforerequest beforerequest}
    •
 *
  • {@link Ext.data.Connection#requestcomplete requestcomplete}
    •
 *
  • {@link Ext.data.Connection#requestexception requestexception}
    •
 *

 *

// Example: show a spinner during all Ajax requests
Ext.Ajax.on('beforerequest', this.showSpinner, this);
Ext.Ajax.on('requestcomplete', this.hideSpinner, this);
Ext.Ajax.on('requestexception', this.hideSpinner, this);
 *

 *

 *
An example request:

 *

// Basic request
Ext.Ajax.{@link Ext.data.Connection#request request}({
   url: 'foo.php',
   success: someFn,
   failure: otherFn,
   headers: {
       'my-header': 'foo'
   },
   params: { foo: 'bar' }
});

// Simple ajax form submission
Ext.Ajax.{@link Ext.data.Connection#request request}({
    form: 'some-form',
    params: 'foo=bar'
});
 *

 *

 * @singleton
 */
Ext.Ajax = new Ext.data.Connection({

/**
     * @cfg {String} url @hide
     */

/**
     * @cfg {Object} extraParams @hide
     */

/**
     * @cfg {Object} defaultHeaders @hide
     */

/**
     * @cfg {String} method (Optional) @hide
     */

/**
     * @cfg {Number} timeout (Optional) @hide
     */

/**
     * @cfg {Boolean} autoAbort (Optional) @hide
     */

/**
     * @cfg {Boolean} disableCaching (Optional) @hide
     */

/**
     * @property  disableCaching
     * True to add a unique cache-buster param to GET requests. (defaults to true)
     * @type Boolean
     */

/**
     * @property  url
     * The default URL to be used for requests to the server. (defaults to undefined)
     * If the server receives all requests through one URL, setting this once is easier than
     * entering it on every request.
     * @type String
     */

/**
     * @property  extraParams
     * An object containing properties which are used as extra parameters to each request made
     * by this object (defaults to undefined). Session information and other data that you need
     * to pass with each request are commonly put here.
     * @type Object
     */

/**
     * @property  defaultHeaders
     * An object containing request headers which are added to each request made by this object
     * (defaults to undefined).
     * @type Object
     */

/**
     * @property  method
     * The default HTTP method to be used for requests. Note that this is case-sensitive and
     * should be all caps (defaults to undefined; if not set but params are present will use
     * "POST", otherwise will use "GET".)
     * @type String
     */

/**
     * @property  timeout
     * The timeout in milliseconds to be used for requests. (defaults to 30000)
     * @type Number
     */

/**
     * @property  autoAbort
     * Whether a new request should abort any pending requests. (defaults to false)
     * @type Boolean
     */
    autoAbort : false,

/**
     * Serialize the passed form into a url encoded string
     * @param {String/HTMLElement} form
     * @return {String}
     */
    serializeForm : function(form){
        return Ext.lib.Ajax.serializeForm(form);
    }
});


The source code

/*!
 * licensing@extjs.com
 * http://www.extjs.com/license
 */

/**
 * @class Ext.Container
 * @extends Ext.BoxComponent
 *
Base class for any {@link Ext.BoxComponent} that may contain other Components. Containers handle the
 * basic behavior of containing items, namely adding, inserting and removing items.

 *
 *
The most commonly used Container classes are {@link Ext.Panel}, {@link Ext.Window} and {@link Ext.TabPanel}.
 * If you do not need the capabilities offered by the aforementioned classes you can create a lightweight
 * Container to be encapsulated by an HTML element to your specifications by using the
 * {@link Ext.Component#autoEl autoEl} config option. This is a useful technique when creating
 * embedded {@link Ext.layout.ColumnLayout column} layouts inside {@link Ext.form.FormPanel FormPanels}
 * for example.

 *
 *
The code below illustrates both how to explicitly create a Container, and how to implicitly
 * create one using the 'container' xtype:

// explicitly create a Container
var embeddedColumns = new Ext.Container({
    autoEl: 'div',  // This is the default
    layout: 'column',
    defaults: {
        // implicitly create Container by specifying xtype
        xtype: 'container',
        autoEl: 'div', // This is the default.
        layout: 'form',
        columnWidth: 0.5,
        style: {
            padding: '10px'
        }
    },
//  The two items below will be Ext.Containers, each encapsulated by a <DIV> element.
    items: [{
        items: {
            xtype: 'datefield',
            name: 'startDate',
            fieldLabel: 'Start date'
        }
    }, {
        items: {
            xtype: 'datefield',
            name: 'endDate',
            fieldLabel: 'End date'
        }
    }]
});

 *
 *
Layout

 *
Container classes delegate the rendering of child Components to a layout
 * manager class which must be configured into the Container using the
 * {@link #layout} configuration property.

 *
When either specifying child {@link #items} of a Container,
 * or dynamically {@link #add adding} Components to a Container, remember to
 * consider how you wish the Container to arrange those child elements, and
 * whether those child elements need to be sized using one of Ext's built-in
 * {@link #layout} schemes. By default, Containers use the
 * {@link Ext.layout.ContainerLayout ContainerLayout} scheme which only
 * renders child components, appending them one after the other inside the
 * Container, and does not apply any sizing at all.

 *
A common mistake is when a developer neglects to specify a
 * {@link #layout} (e.g. widgets like GridPanels or
 * TreePanels are added to Containers for which no {@link #layout}
 * has been specified). If a Container is left to use the default
 * {@link Ext.layout.ContainerLayout ContainerLayout} scheme, none of its
 * child components will be resized, or changed in any way when the Container
 * is resized.

 *
Certain layout managers allow dynamic addition of child components.
 * Those that do include {@link Ext.layout.CardLayout},
 * {@link Ext.layout.AnchorLayout}, {@link Ext.layout.FormLayout}, and
 * {@link Ext.layout.TableLayout}. For example:

//  Create the GridPanel.
var myNewGrid = new Ext.grid.GridPanel({
    store: myStore,
    columns: myColumnModel,
    title: 'Results', // the title becomes the title of the tab
});

myTabPanel.add(myNewGrid); // {@link Ext.TabPanel} implicitly uses {@link Ext.layout.CardLayout CardLayout}
myTabPanel.{@link Ext.TabPanel#setActiveTab setActiveTab}(myNewGrid);
 *

 *
The example above adds a newly created GridPanel to a TabPanel. Note that
 * a TabPanel uses {@link Ext.layout.CardLayout} as its layout manager which
 * means all its child items are sized to {@link Ext.layout.FitLayout fit}
 * exactly into its client area.
 *
Overnesting is a common problem.
 * An example of overnesting occurs when a GridPanel is added to a TabPanel
 * by wrapping the GridPanel inside a wrapping Panel (that has no
 * {@link #layout} specified) and then add that wrapping Panel
 * to the TabPanel. The point to realize is that a GridPanel is a
 * Component which can be added directly to a Container. If the wrapping Panel
 * has no {@link #layout} configuration, then the overnested
 * GridPanel will not be sized as expected.

 *
 *
Adding via remote configuration

 *
 *
A server side script can be used to add Components which are generated dynamically on the server.
 * An example of adding a GridPanel to a TabPanel where the GridPanel is generated by the server
 * based on certain parameters:
 *

// execute an Ajax request to invoke server side script:
Ext.Ajax.request({
    url: 'gen-invoice-grid.php',
    // send additional parameters to instruct server script
    params: {
        startDate: Ext.getCmp('start-date').getValue(),
        endDate: Ext.getCmp('end-date').getValue()
    },
    // process the response object to add it to the TabPanel:
    success: function(xhr) {
        var newComponent = eval(xhr.responseText); // see discussion below
        myTabPanel.add(newComponent); // add the component to the TabPanel
        myTabPanel.setActiveTab(newComponent);
    },
    failure: function() {
        Ext.Msg.alert("Grid create failed", "Server communication failure");
    }
});

 *
The server script needs to return an executable Javascript statement which, when processed
 * using eval(), will return either a config object with an {@link Ext.Component#xtype xtype},
 * or an instantiated Component. The server might return this for example:

(function() {
    function formatDate(value){
        return value ? value.dateFormat('M d, Y') : '';
    };

    var store = new Ext.data.Store({
        url: 'get-invoice-data.php',
        baseParams: {
            startDate: '01/01/2008',
            endDate: '01/31/2008'
        },
        reader: new Ext.data.JsonReader({
            record: 'transaction',
            idProperty: 'id',
            totalRecords: 'total'
        }, [
           'customer',
           'invNo',
           {name: 'date', type: 'date', dateFormat: 'm/d/Y'},
           {name: 'value', type: 'float'}
        ])
    });

    var grid = new Ext.grid.GridPanel({
        title: 'Invoice Report',
        bbar: new Ext.PagingToolbar(store),
        store: store,
        columns: [
            {header: "Customer", width: 250, dataIndex: 'customer', sortable: true},
            {header: "Invoice Number", width: 120, dataIndex: 'invNo', sortable: true},
            {header: "Invoice Date", width: 100, dataIndex: 'date', renderer: formatDate, sortable: true},
            {header: "Value", width: 120, dataIndex: 'value', renderer: 'usMoney', sortable: true}
        ],
    });
    store.load();
    return grid;  // return instantiated component
})();

 *
When the above code fragment is passed through the eval function in the success handler
 * of the Ajax request, the code is executed by the Javascript processor, and the anonymous function
 * runs, and returns the instantiated grid component.

 *
Note: since the code above is generated by a server script, the baseParams for
 * the Store, the metadata to allow generation of the Record layout, and the ColumnModel
 * can all be generated into the code since these are all known on the server.

 *
 * @xtype container
 */
Ext.Container = Ext.extend(Ext.BoxComponent, {

/**
     * @cfg {Boolean} monitorResize
     * True to automatically monitor window resize events to handle anything that is sensitive to the current size
     * of the viewport.  This value is typically managed by the chosen {@link #layout} and should not need
     * to be set manually.
     */

/**
     * @cfg {String/Object} layout
     *
*Important: In order for child items to be correctly sized and
     * positioned, typically a layout manager must be specified through
     * the layout configuration option.

     *
The sizing and positioning of child {@link items} is the responsibility of
     * the Container's layout manager which creates and manages the type of layout
     * you have in mind.  For example:

new Ext.Window({
    width:300, height: 300,
    layout: 'fit', // explicitly set layout manager: override the default (layout:'auto')
    items: [{
        title: 'Panel inside a Window'
    }]
}).show();
     *

     *
If the {@link #layout} configuration is not explicitly specified for
     * a general purpose container (e.g. Container or Panel) the
     * {@link Ext.layout.ContainerLayout default layout manager} will be used
     * which does nothing but render child components sequentially into the
     * Container (no sizing or positioning will be performed in this situation).
     * Some container classes implicitly specify a default layout
     * (e.g. FormPanel specifies layout:'form'). Other specific
     * purpose classes internally specify/manage their internal layout (e.g.
     * GridPanel, TabPanel, TreePanel, Toolbar, Menu, etc.).

     *
layout may be specified as either as an Object or
     * as a String:

     *
     *
  • Specify as an Object
    •
     *

     *
    • Example usage:
      •

layout: {
    type: 'vbox',
    padding: '5',
    align: 'left'
}

     *
     *
    • type
      •
     *
      The layout type to be used for this container.  If not specified,
     * a default {@link Ext.layout.ContainerLayout} will be created and used.

     *
      Valid layout type values are:

     *

     *
      • {@link Ext.layout.AbsoluteLayout absolute}
        •
     *
      • {@link Ext.layout.AccordionLayout accordion}
        •
     *
      • {@link Ext.layout.AnchorLayout anchor}
        •
     *
      • {@link Ext.layout.ContainerLayout auto}     Default
        •
     *
      • {@link Ext.layout.BorderLayout border}
        •
     *
      • {@link Ext.layout.CardLayout card}
        •
     *
      • {@link Ext.layout.ColumnLayout column}
        •
     *
      • {@link Ext.layout.FitLayout fit}
        •
     *
      • {@link Ext.layout.FormLayout form}
        •
     *
      • {@link Ext.layout.HBoxLayout hbox}
        •
     *
      • {@link Ext.layout.MenuLayout menu}
        •
     *
      • {@link Ext.layout.TableLayout table}
        •
     *
      • {@link Ext.layout.ToolbarLayout toolbar}
        •
     *
      • {@link Ext.layout.VBoxLayout vbox}
        •
     *

     *
     *
    • Layout specific configuration properties
      •
     *
      Additional layout specific configuration properties may also be
     * specified. For complete details regarding the valid config options for
     * each layout type, see the layout class corresponding to the type
     * specified.

     *
     *

     *
     *
  • Specify as a String
    •
     *

     *
    • Example usage:
      •

layout: 'vbox',
layoutConfig: {
    padding: '5',
    align: 'left'
}

     *
    • layout
      •
     *
      The layout type to be used for this container (see list
     * of valid layout type values above).

     *
    • {@link #layoutConfig}
      •
     *
      Additional layout specific configuration properties. For complete
     * details regarding the valid config options for each layout type, see the
     * layout class corresponding to the layout specified.

     *

     */

/**
     * @cfg {Object} layoutConfig
     * This is a config object containing properties specific to the chosen
     * {@link #layout} if {@link #layout}
     * has been specified as a string.

     */

/**
     * @cfg {Boolean/Number} bufferResize
     * When set to true (50 milliseconds) or a number of milliseconds, the layout assigned for this container will buffer
     * the frequency it calculates and does a re-layout of components. This is useful for heavy containers or containers
     * with a large quantity of sub-components for which frequent layout calls would be expensive. Defaults to 50.
     */
    bufferResize: 50,

/**
     * @cfg {String/Number} activeItem
     * A string component id or the numeric index of the component that should be initially activated within the
     * container's layout on render.  For example, activeItem: 'item-1' or activeItem: 0 (index 0 = the first
     * item in the container's collection).  activeItem only applies to layout styles that can display
     * items one at a time (like {@link Ext.layout.AccordionLayout}, {@link Ext.layout.CardLayout} and
     * {@link Ext.layout.FitLayout}).  Related to {@link Ext.layout.ContainerLayout#activeItem}.
     */

/**
     * @cfg {Object/Array} items
     *
** IMPORTANT: be sure to {@link #layout specify a layout} if needed ! **

     *
A single item, or an array of child Components to be added to this container,
     * for example:

     *

// specifying a single item
items: {...},
layout: 'fit',    // specify a layout!

// specifying multiple items
items: [{...}, {...}],
layout: 'anchor', // specify a layout!
     *

     *
Each item may be:

     *

     *
  • any type of object based on {@link Ext.Component}
    •
     *
  • a fully instanciated object or
    •
     *
  • an object literal that:
    •
     *

     *
    • has a specified {@link Ext.Component#xtype xtype}
      •
     *
    • the {@link Ext.Component#xtype} specified is associated with the Component
     * desired and should be chosen from one of the available xtypes as listed
     * in {@link Ext.Component}.
      •
     *
    • If an {@link Ext.Component#xtype xtype} is not explicitly
     * specified, the {@link #defaultType} for that Container is used.
      •
     *
    • will be "lazily instanciated", avoiding the overhead of constructing a fully
     * instanciated Component object
      •
     *

     *
Notes:

     *

     *
  • Ext uses lazy rendering. Child Components will only be rendered
     * should it become necessary. Items are automatically laid out when they are first
     * shown (no sizing is done while hidden), or in response to a {@link #doLayout} call.
    •
     *
  • Do not specify {@link Ext.Panel#contentEl contentEl}/
     * {@link Ext.Panel#html html} with items.
    •
     *

     */

/**
     * @cfg {Object|Function} defaults
     *
This option is a means of applying default settings to all added items whether added through the {@link #items}
     * config or via the {@link #add} or {@link #insert} methods.

     *
If an added item is a config object, and not an instantiated Component, then the default properties are
     * unconditionally applied. If the added item is an instantiated Component, then the default properties are
     * applied conditionally so as not to override existing properties in the item.

     *
If the defaults option is specified as a function, then the function will be called using this Container as the
     * scope (this reference) and passing the added item as the first parameter. Any resulting object
     * from that call is then applied to the item as default properties.

     *
For example, to automatically apply padding to the body of each of a set of
     * contained {@link Ext.Panel} items, you could pass: defaults: {bodyStyle:'padding:15px'}.

     *
Usage:

defaults: {               // defaults are applied to items, not the container
    autoScroll:true
},
items: [
    {
        xtype: 'panel',   // defaults do not have precedence over
        id: 'panel1',     // options in config objects, so the defaults
        autoScroll: false // will not be applied here, panel1 will be autoScroll:false
    },
    new Ext.Panel({       // defaults do have precedence over options
        id: 'panel2',     // options in components, so the defaults
        autoScroll: false // will be applied here, panel2 will be autoScroll:true.
    })
]
     *

     */

/** @cfg {Boolean} autoDestroy
     * If true the container will automatically destroy any contained component that is removed from it, else
     * destruction must be handled manually (defaults to true).
     */
    autoDestroy : true,

/** @cfg {Boolean} forceLayout
     * If true the container will force a layout initially even if hidden or collapsed. This option
     * is useful for forcing forms to render in collapsed or hidden containers. (defaults to false).
     */
    forceLayout: false,

/** @cfg {Boolean} hideBorders
     * True to hide the borders of each contained component, false to defer to the component's existing
     * border settings (defaults to false).
     */

/** @cfg {String} defaultType
     *
The default {@link Ext.Component xtype} of child Components to create in this Container when
     * a child item is specified as a raw configuration object, rather than as an instantiated Component.

     *
Defaults to 'panel', except {@link Ext.menu.Menu} which defaults to 'menuitem',
     * and {@link Ext.Toolbar} and {@link Ext.ButtonGroup} which default to 'button'.

     */
    defaultType : 'panel',

/** @cfg {String} resizeEvent
     * The event to listen to for resizing in layouts. Defaults to 'resize'.
     */
    resizeEvent: 'resize',

/**
     * @cfg {Array} bubbleEvents
     *
An array of events that, when fired, should be bubbled to any parent container.
     * See {@link Ext.util.Observable#enableBubble}.
     * Defaults to ['add', 'remove'].
     */
    bubbleEvents: ['add', 'remove'],

    // private
    initComponent : function(){
        Ext.Container.superclass.initComponent.call(this);

        this.addEvents(

/**
             * @event afterlayout
             * Fires when the components in this container are arranged by the associated layout manager.
             * @param {Ext.Container} this
             * @param {ContainerLayout} layout The ContainerLayout implementation for this container
             */
            'afterlayout',

/**
             * @event beforeadd
             * Fires before any {@link Ext.Component} is added or inserted into the container.
             * A handler can return false to cancel the add.
             * @param {Ext.Container} this
             * @param {Ext.Component} component The component being added
             * @param {Number} index The index at which the component will be added to the container's items collection
             */
            'beforeadd',

/**
             * @event beforeremove
             * Fires before any {@link Ext.Component} is removed from the container.  A handler can return
             * false to cancel the remove.
             * @param {Ext.Container} this
             * @param {Ext.Component} component The component being removed
             */
            'beforeremove',

/**
             * @event add
             * @bubbles
             * Fires after any {@link Ext.Component} is added or inserted into the container.
             * @param {Ext.Container} this
             * @param {Ext.Component} component The component that was added
             * @param {Number} index The index at which the component was added to the container's items collection
             */
            'add',

/**
             * @event remove
             * @bubbles
             * Fires after any {@link Ext.Component} is removed from the container.
             * @param {Ext.Container} this
             * @param {Ext.Component} component The component that was removed
             */
            'remove'
        );

/**
         * The collection of components in this container as a {@link Ext.util.MixedCollection}
         * @type MixedCollection
         * @property items
         */
        var items = this.items;
        if(items){
            delete this.items;
            this.add(items);
        }
    },

    // private
    initItems : function(){
        if(!this.items){
            this.items = new Ext.util.MixedCollection(false, this.getComponentId);
            this.getLayout(); // initialize the layout
        }
    },

    // private
    setLayout : function(layout){
        if(this.layout && this.layout != layout){
            this.layout.setContainer(null);
        }
        this.initItems();
        this.layout = layout;
        layout.setContainer(this);
    },

    afterRender: function(){
        // Render this Container, this should be done before setLayout is called which
        // will hook onResize
        Ext.Container.superclass.afterRender.call(this);
        if(!this.layout){
            this.layout = 'auto';
        }
        if(Ext.isObject(this.layout) && !this.layout.layout){
            this.layoutConfig = this.layout;
            this.layout = this.layoutConfig.type;
        }
        if(Ext.isString(this.layout)){
            this.layout = new Ext.Container.LAYOUTS[this.layout.toLowerCase()](this.layoutConfig);
        }
        this.setLayout(this.layout);

        // If a CardLayout, the active item set
        if(this.activeItem !== undefined){
            var item = this.activeItem;
            delete this.activeItem;
            this.layout.setActiveItem(item);
        }

        // If we have no ownerCt, render and size all children
        if(!this.ownerCt){
            this.doLayout(false, true);
        }

        // This is a manually configured flag set by users in conjunction with renderTo.
        // Not to be confused with the flag by the same name used in Layouts.
        if(this.monitorResize === true){
            Ext.EventManager.onWindowResize(this.doLayout, this, [false]);
        }
    },

/**
     *
Returns the Element to be used to contain the child Components of this Container.

     *
An implementation is provided which returns the Container's {@link #getEl Element}, but
     * if there is a more complex structure to a Container, this may be overridden to return
     * the element into which the {@link #layout layout} renders child Components.

     * @return {Ext.Element} The Element to render child Components into.
     */
    getLayoutTarget : function(){
        return this.el;
    },

    // private - used as the key lookup function for the items collection
    getComponentId : function(comp){
        return comp.getItemId();
    },

/**
     *
Adds {@link Ext.Component Component}(s) to this Container.

     *
Description :
     *

     *
  • Fires the {@link #beforeadd} event before adding
    •
     *
  • The Container's {@link #defaults default config values} will be applied
     * accordingly (see {@link #defaults} for details).
    •
     *
  • Fires the {@link #add} event after the component has been added.
    •
     *

     *
Notes :
     *

     *
  • If the Container is already rendered when add
     * is called, you may need to call {@link #doLayout} to refresh the view which causes
     * any unrendered child Components to be rendered. This is required so that you can
     * add multiple child components if needed while only refreshing the layout
     * once. For example:

var tb = new {@link Ext.Toolbar}();
tb.render(document.body);  // toolbar is rendered
tb.add({text:'Button 1'}); // add multiple items ({@link #defaultType} for {@link Ext.Toolbar Toolbar} is 'button')
tb.add({text:'Button 2'});
tb.{@link #doLayout}();             // refresh the layout
     *
    •
     *
  • Warning: Containers directly managed by the BorderLayout layout manager
     * may not be removed or added.  See the Notes for {@link Ext.layout.BorderLayout BorderLayout}
     * for more details.
    •
     *

     * @param {...Object/Array} component
     *
Either one or more Components to add or an Array of Components to add.  See
     * {@link #items} for additional information.

     * @return {Ext.Component/Array} The Components that were added.
     */
    add : function(comp){
        this.initItems();
        var args = arguments.length > 1;
        if(args || Ext.isArray(comp)){
            var result = [];
            Ext.each(args ? arguments : comp, function(c){
                result.push(this.add(c));
            }, this);
            return result;
        }
        var c = this.lookupComponent(this.applyDefaults(comp));
        var index = this.items.length;
        if(this.fireEvent('beforeadd', this, c, index) !== false && this.onBeforeAdd(c) !== false){
            this.items.add(c);
            // *onAdded
            c.onAdded(this, index);
            this.onAdd(c);
            this.fireEvent('add', this, c, index);
        }
        return c;
    },

    onAdd : function(c){
        // Empty template method
    },

    // private
    onAdded : function(container, pos) {
        //overridden here so we can cascade down, not worth creating a template method.
        this.ownerCt = container;
        this.initRef();
        //initialize references for child items
        this.cascade(function(c){
            c.initRef();
        });
        this.fireEvent('added', this, container, pos);
    },

/**
     * Inserts a Component into this Container at a specified index. Fires the
     * {@link #beforeadd} event before inserting, then fires the {@link #add} event after the
     * Component has been inserted.
     * @param {Number} index The index at which the Component will be inserted
     * into the Container's items collection
     * @param {Ext.Component} component The child Component to insert.

     * Ext uses lazy rendering, and will only render the inserted Component should
     * it become necessary.

     * A Component config object may be passed in order to avoid the overhead of
     * constructing a real Component object if lazy rendering might mean that the
     * inserted Component will not be rendered immediately. To take advantage of
     * this 'lazy instantiation', set the {@link Ext.Component#xtype} config
     * property to the registered type of the Component wanted.

     * For a list of all available xtypes, see {@link Ext.Component}.
     * @return {Ext.Component} component The Component (or config object) that was
     * inserted with the Container's default config values applied.
     */
    insert : function(index, comp){
        this.initItems();
        var a = arguments, len = a.length;
        if(len > 2){
            var result = [];
            for(var i = len-1; i >= 1; --i) {
                result.push(this.insert(index, a[i]));
            }
            return result;
        }
        var c = this.lookupComponent(this.applyDefaults(comp));
        index = Math.min(index, this.items.length);
        if(this.fireEvent('beforeadd', this, c, index) !== false && this.onBeforeAdd(c) !== false){
            if(c.ownerCt == this){
                this.items.remove(c);
            }
            this.items.insert(index, c);
            c.onAdded(this, index);
            this.onAdd(c);
            this.fireEvent('add', this, c, index);
        }
        return c;
    },

    // private
    applyDefaults : function(c){
        var d = this.defaults;
        if(d){
            if(Ext.isFunction(d)){
                d = d.call(this, c);
            }
            if(Ext.isString(c)){
                c = Ext.ComponentMgr.get(c);
                Ext.apply(c, d);
            }else if(!c.events){
                Ext.applyIf(c, d);
            }else{
                Ext.apply(c, d);
            }
        }
        return c;
    },

    // private
    onBeforeAdd : function(item){
        if(item.ownerCt){
            item.ownerCt.remove(item, false);
        }
        if(this.hideBorders === true){
            item.border = (item.border === true);
        }
    },

/**
     * Removes a component from this container.  Fires the {@link #beforeremove} event before removing, then fires
     * the {@link #remove} event after the component has been removed.
     * @param {Component/String} component The component reference or id to remove.
     * @param {Boolean} autoDestroy (optional) True to automatically invoke the removed Component's {@link Ext.Component#destroy} function.
     * Defaults to the value of this Container's {@link #autoDestroy} config.
     * @return {Ext.Component} component The Component that was removed.
     */
    remove : function(comp, autoDestroy){
        this.initItems();
        var c = this.getComponent(comp);
        if(c && this.fireEvent('beforeremove', this, c) !== false){
            this.doRemove(c, autoDestroy);
            this.fireEvent('remove', this, c);
        }
        return c;
    },

    onRemove: function(c){
        // Empty template method
    },

    // private
    doRemove: function(c, autoDestroy){
        var l = this.layout,
            hasLayout = l && this.rendered;

        if(hasLayout){
            l.onRemove(c);
        }
        this.items.remove(c);
        c.onRemoved();
        this.onRemove(c);
        if(autoDestroy === true || (autoDestroy !== false && this.autoDestroy)){
            c.destroy();
        }
        if(hasLayout){
            l.afterRemove(c);
        }
    },

/**
     * Removes all components from this container.
     * @param {Boolean} autoDestroy (optional) True to automatically invoke the removed Component's {@link Ext.Component#destroy} function.
     * Defaults to the value of this Container's {@link #autoDestroy} config.
     * @return {Array} Array of the destroyed components
     */
    removeAll: function(autoDestroy){
        this.initItems();
        var item, rem = [], items = [];
        this.items.each(function(i){
            rem.push(i);
        });
        for (var i = 0, len = rem.length; i < len; ++i){
            item = rem[i];
            this.remove(item, autoDestroy);
            if(item.ownerCt !== this){
                items.push(item);
            }
        }
        return items;
    },

/**
     * Examines this container's {@link #items} property
     * and gets a direct child component of this container.
     * @param {String/Number} comp This parameter may be any of the following:
     *

     *
  • a String : representing the {@link Ext.Component#itemId itemId}
     * or {@link Ext.Component#id id} of the child component
    •
     *
  • a Number : representing the position of the child component
     * within the {@link #items} property
    •
     *

     *
For additional information see {@link Ext.util.MixedCollection#get}.
     * @return Ext.Component The component (if found).
     */
    getComponent : function(comp){
        if(Ext.isObject(comp)){
            comp = comp.getItemId();
        }
        return this.items.get(comp);
    },

    // private
    lookupComponent : function(comp){
        if(Ext.isString(comp)){
            return Ext.ComponentMgr.get(comp);
        }else if(!comp.events){
            return this.createComponent(comp);
        }
        return comp;
    },

    // private
    createComponent : function(config, defaultType){
        if (config.render) {
            return config;
        }
        // add in ownerCt at creation time but then immediately
        // remove so that onBeforeAdd can handle it
        var c = Ext.create(Ext.apply({
            ownerCt: this
        }, config), defaultType || this.defaultType);
        delete c.initialConfig.ownerCt;
        delete c.ownerCt;
        return c;
    },

/**
    * We can only lay out if there is a view area in which to layout.
    * display:none on the layout target, *or any of its parent elements* will mean it has no view area.
    */

    // private
    canLayout : function() {
        var el = this.getVisibilityEl();
        return el && el.dom && !el.isStyle("display", "none");
    },

/**
     * Force this container's layout to be recalculated. A call to this function is required after adding a new component
     * to an already rendered container, or possibly after changing sizing/position properties of child components.
     * @param {Boolean} shallow (optional) True to only calc the layout of this component, and let child components auto
     * calc layouts as required (defaults to false, which calls doLayout recursively for each subcontainer)
     * @param {Boolean} force (optional) True to force a layout to occur, even if the item is hidden.
     * @return {Ext.Container} this
     */

    doLayout : function(shallow, force){
        var rendered = this.rendered,
            forceLayout = force || this.forceLayout;

        if(this.collapsed || !this.canLayout()){
            this.deferLayout = this.deferLayout || !shallow;
            if(!forceLayout){
                return;
            }
            shallow = shallow && !this.deferLayout;
        } else {
            delete this.deferLayout;
        }
        if(rendered && this.layout){
            this.layout.layout();
        }
        if(shallow !== true && this.items){
            var cs = this.items.items;
            for(var i = 0, len = cs.length; i < len; i++){
                var c = cs[i];
                if(c.doLayout){
                    c.doLayout(false, forceLayout);
                }
            }
        }
        if(rendered){
            this.onLayout(shallow, forceLayout);
        }
        // Initial layout completed
        this.hasLayout = true;
        delete this.forceLayout;
    },

    onLayout : Ext.emptyFn,

    // private
    shouldBufferLayout: function(){
        /*
         * Returns true if the container should buffer a layout.
         * This is true only if the container has previously been laid out
         * and has a parent container that is pending a layout.
         */
        var hl = this.hasLayout;
        if(this.ownerCt){
            // Only ever buffer if we've laid out the first time and we have one pending.
            return hl ? !this.hasLayoutPending() : false;
        }
        // Never buffer initial layout
        return hl;
    },

    // private
    hasLayoutPending: function(){
        // Traverse hierarchy to see if any parent container has a pending layout.
        var pending = false;
        this.ownerCt.bubble(function(c){
            if(c.layoutPending){
                pending = true;
                return false;
            }
        });
        return pending;
    },

    onShow : function(){
        // removes css classes that were added to hide
        Ext.Container.superclass.onShow.call(this);
        // If we were sized during the time we were hidden, layout.
        if(Ext.isDefined(this.deferLayout)){
            delete this.deferLayout;
            this.doLayout(true);
        }
    },

/**
     * Returns the layout currently in use by the container.  If the container does not currently have a layout
     * set, a default {@link Ext.layout.ContainerLayout} will be created and set as the container's layout.
     * @return {ContainerLayout} layout The container's layout
     */
    getLayout : function(){
        if(!this.layout){
            var layout = new Ext.layout.AutoLayout(this.layoutConfig);
            this.setLayout(layout);
        }
        return this.layout;
    },

    // private
    beforeDestroy : function(){
        var c;
        if(this.items){
            while(c = this.items.first()){
                this.doRemove(c, true);
            }
        }
        if(this.monitorResize){
            Ext.EventManager.removeResizeListener(this.doLayout, this);
        }
        Ext.destroy(this.layout);
        Ext.Container.superclass.beforeDestroy.call(this);
    },

/**
     * Bubbles up the component/container heirarchy, calling the specified function with each component. The scope (this) of
     * function call will be the scope provided or the current component. The arguments to the function
     * will be the args provided or the current component. If the function returns false at any point,
     * the bubble is stopped.
     * @param {Function} fn The function to call
     * @param {Object} scope (optional) The scope of the function (defaults to current node)
     * @param {Array} args (optional) The args to call the function with (default to passing the current component)
     * @return {Ext.Container} this
     */
    bubble : function(fn, scope, args){
        var p = this;
        while(p){
            if(fn.apply(scope || p, args || [p]) === false){
                break;
            }
            p = p.ownerCt;
        }
        return this;
    },

/**
     * Cascades down the component/container heirarchy from this component (called first), calling the specified function with
     * each component. The scope (this) of
     * function call will be the scope provided or the current component. The arguments to the function
     * will be the args provided or the current component. If the function returns false at any point,
     * the cascade is stopped on that branch.
     * @param {Function} fn The function to call
     * @param {Object} scope (optional) The scope of the function (defaults to current component)
     * @param {Array} args (optional) The args to call the function with (defaults to passing the current component)
     * @return {Ext.Container} this
     */
    cascade : function(fn, scope, args){
        if(fn.apply(scope || this, args || [this]) !== false){
            if(this.items){
                var cs = this.items.items;
                for(var i = 0, len = cs.length; i < len; i++){
                    if(cs[i].cascade){
                        cs[i].cascade(fn, scope, args);
                    }else{
                        fn.apply(scope || cs[i], args || [cs[i]]);
                    }
                }
            }
        }
        return this;
    },

/**
     * Find a component under this container at any level by id
     * @param {String} id
     * @return Ext.Component
     */
    findById : function(id){
        var m, ct = this;
        this.cascade(function(c){
            if(ct != c && c.id === id){
                m = c;
                return false;
            }
        });
        return m || null;
    },

/**
     * Find a component under this container at any level by xtype or class
     * @param {String/Class} xtype The xtype string for a component, or the class of the component directly
     * @param {Boolean} shallow (optional) False to check whether this Component is descended from the xtype (this is
     * the default), or true to check whether this Component is directly of the specified xtype.
     * @return {Array} Array of Ext.Components
     */
    findByType : function(xtype, shallow){
        return this.findBy(function(c){
            return c.isXType(xtype, shallow);
        });
    },

/**
     * Find a component under this container at any level by property
     * @param {String} prop
     * @param {String} value
     * @return {Array} Array of Ext.Components
     */
    find : function(prop, value){
        return this.findBy(function(c){
            return c[prop] === value;
        });
    },

/**
     * Find a component under this container at any level by a custom function. If the passed function returns
     * true, the component will be included in the results. The passed function is called with the arguments (component, this container).
     * @param {Function} fn The function to call
     * @param {Object} scope (optional)
     * @return {Array} Array of Ext.Components
     */
    findBy : function(fn, scope){
        var m = [], ct = this;
        this.cascade(function(c){
            if(ct != c && fn.call(scope || c, c, ct) === true){
                m.push(c);
            }
        });
        return m;
    },

/**
     * Get a component contained by this container (alias for items.get(key))
     * @param {String/Number} key The index or id of the component
     * @return {Ext.Component} Ext.Component
     */
    get : function(key){
        return this.items.get(key);
    }
});

Ext.Container.LAYOUTS = {};
Ext.reg('container', Ext.Container);


The source code

/*!
 * licensing@extjs.com
 * http://www.extjs.com/license
 */

/**
 * @class Ext.layout.ContainerLayout
 *
This class is intended to be extended or created via the {@link Ext.Container#layout layout}
 * configuration property.  See {@link Ext.Container#layout} for additional details.

 */
Ext.layout.ContainerLayout = Ext.extend(Object, {

/**
     * @cfg {String} extraCls
     *
An optional extra CSS class that will be added to the container. This can be useful for adding
     * customized styles to the container or any of its children using standard CSS rules. See
     * {@link Ext.Component}.{@link Ext.Component#ctCls ctCls} also.

     *
Note: extraCls defaults to '' except for the following classes
     * which assign a value by default:
     *

     *
  • {@link Ext.layout.AbsoluteLayout Absolute Layout} : 'x-abs-layout-item'
    •
     *
  • {@link Ext.layout.Box Box Layout} : 'x-box-item'
    •
     *
  • {@link Ext.layout.ColumnLayout Column Layout} : 'x-column'
    •
     *

     * To configure the above Classes with an extra CSS class append to the default.  For example,
     * for ColumnLayout:

     * extraCls: 'x-column custom-class'
     *

     *

     */

/**
     * @cfg {Boolean} renderHidden
     * True to hide each contained item on render (defaults to false).
     */

/**
     * A reference to the {@link Ext.Component} that is active.  For example,

     * if(myPanel.layout.activeItem.id == 'item-1') { ... }
     *

     * activeItem only applies to layout styles that can display items one at a time
     * (like {@link Ext.layout.AccordionLayout}, {@link Ext.layout.CardLayout}
     * and {@link Ext.layout.FitLayout}).  Read-only.  Related to {@link Ext.Container#activeItem}.
     * @type {Ext.Component}
     * @property activeItem
     */

    // private
    monitorResize:false,
    // private
    activeItem : null,

    constructor : function(config){
        this.id = Ext.id(null, 'ext-layout-');
        Ext.apply(this, config);
    },

    type: 'container',

    /* Workaround for how IE measures autoWidth elements.  It prefers bottom-up measurements
      whereas other browser prefer top-down.  We will hide all target child elements before we measure and
      put them back to get an accurate measurement.
    */
    IEMeasureHack : function(target, viewFlag) {
        var tChildren = target.dom.childNodes, tLen = tChildren.length, c, d = [], e, i, ret;
        for (i = 0 ; i < tLen ; i++) {
            c = tChildren[i];
            e = Ext.get(c);
            if (e) {
                d[i] = e.getStyle('display');
                e.setStyle({display: 'none'});
            }
        }
        ret = target ? target.getViewSize(viewFlag) : {};
        for (i = 0 ; i < tLen ; i++) {
            c = tChildren[i];
            e = Ext.get(c);
            if (e) {
                e.setStyle({display: d[i]});
            }
        }
        return ret;
    },

    // Placeholder for the derived layouts
    getLayoutTargetSize : Ext.EmptyFn,

    // private
    layout : function(){
        var ct = this.container, target = ct.getLayoutTarget();
        if(!(this.hasLayout || Ext.isEmpty(this.targetCls))){
            target.addClass(this.targetCls);
        }
        this.onLayout(ct, target);
        ct.fireEvent('afterlayout', ct, this);
    },

    // private
    onLayout : function(ct, target){
        this.renderAll(ct, target);
    },

    // private
    isValidParent : function(c, target){
        return target && c.getPositionEl().dom.parentNode == (target.dom || target);
    },

    // private
    renderAll : function(ct, target){
        var items = ct.items.items, i, c, len = items.length;
        for(i = 0; i < len; i++) {
            c = items[i];
            if(c && (!c.rendered || !this.isValidParent(c, target))){
                this.renderItem(c, i, target);
            }
        }
    },

    /**
     * @private
     * Renders the given Component into the target Element. If the Component is already rendered,
     * it is moved to the provided target instead.
     * @param {Ext.Component} c The Component to render
     * @param {Number} position The position within the target to render the item to
     * @param {Ext.Element} target The target Element
     */
    renderItem : function(c, position, target){
        if (c) {
            if (!c.rendered) {
                c.render(target, position);
                this.configureItem(c, position);
            } else if (!this.isValidParent(c, target)) {
                if (Ext.isNumber(position)) {
                    position = target.dom.childNodes[position];
                }

                target.dom.insertBefore(c.getPositionEl().dom, position || null);
                c.container = target;
                this.configureItem(c, position);
            }
        }
    },

    // private.
    // Get all rendered items to lay out.
    getRenderedItems: function(ct){
        var t = ct.getLayoutTarget(), cti = ct.items.items, len = cti.length, i, c, items = [];
        for (i = 0; i < len; i++) {
            if((c = cti[i]).rendered && this.isValidParent(c, t)){
                items.push(c);
            }
        };
        return items;
    },

    /**
     * @private
     * Applies extraCls and hides the item if renderHidden is true
     */
    configureItem: function(c, position){
        if (this.extraCls) {
            var t = c.getPositionEl ? c.getPositionEl() : c;
            t.addClass(this.extraCls);
        }

        // If we are forcing a layout, do so *before* we hide so elements have height/width
        if (c.doLayout && this.forceLayout) {
            c.doLayout();
        }
        if (this.renderHidden && c != this.activeItem) {
            c.hide();
        }
    },

    onRemove: function(c){
        if(this.activeItem == c){
            delete this.activeItem;
        }
        if(c.rendered && this.extraCls){
            var t = c.getPositionEl ? c.getPositionEl() : c;
            t.removeClass(this.extraCls);
        }
    },

    afterRemove: function(c){
        if(c.removeRestore){
            c.removeMode = 'container';
            delete c.removeRestore;
        }
    },

    // private
    onResize: function(){
        var ct = this.container,
            b;
        if(ct.collapsed){
            return;
        }
        if(b = ct.bufferResize && ct.shouldBufferLayout()){
            if(!this.resizeTask){
                this.resizeTask = new Ext.util.DelayedTask(this.runLayout, this);
                this.resizeBuffer = Ext.isNumber(b) ? b : 50;
            }
            ct.layoutPending = true;
            this.resizeTask.delay(this.resizeBuffer);
        }else{
            this.runLayout();
        }
    },

    runLayout: function(){
        var ct = this.container;
        this.layout();
        ct.onLayout();
        delete ct.layoutPending;
    },

    // private
    setContainer : function(ct){

/**
         * This monitorResize flag will be renamed soon as to avoid confusion
         * with the Container version which hooks onWindowResize to doLayout
         *
         * monitorResize flag in this context attaches the resize event between
         * a container and it's layout
         */
        if(this.monitorResize && ct != this.container){
            var old = this.container;
            if(old){
                old.un(old.resizeEvent, this.onResize, this);
            }
            if(ct){
                ct.on(ct.resizeEvent, this.onResize, this);
            }
        }
        this.container = ct;
    },

/**
     * Parses a number or string representing margin sizes into an object. Supports CSS-style margin declarations
     * (e.g. 10, "10", "10 10", "10 10 10" and "10 10 10 10" are all valid options and would return the same result)
     * @param {Number|String} v The encoded margins
     * @return {Object} An object with margin sizes for top, right, bottom and left
     */
    parseMargins : function(v){
        if (Ext.isNumber(v)) {
            v = v.toString();
        }
        var ms  = v.split(' '),
            len = ms.length;

        if (len == 1) {
            ms[1] = ms[2] = ms[3] = ms[0];
        } else if(len == 2) {
            ms[2] = ms[0];
            ms[3] = ms[1];
        } else if(len == 3) {
            ms[3] = ms[1];
        }

        return {
            top   :parseInt(ms[0], 10) || 0,
            right :parseInt(ms[1], 10) || 0,
            bottom:parseInt(ms[2], 10) || 0,
            left  :parseInt(ms[3], 10) || 0
        };
    },

/**
     * The {@link Ext.Template Ext.Template} used by Field rendering layout classes (such as
     * {@link Ext.layout.FormLayout}) to create the DOM structure of a fully wrapped,
     * labeled and styled form Field. A default Template is supplied, but this may be
     * overriden to create custom field structures. The template processes values returned from
     * {@link Ext.layout.FormLayout#getTemplateArgs}.
     * @property fieldTpl
     * @type Ext.Template
     */
    fieldTpl: (function() {
        var t = new Ext.Template(
            '
',
                '',
                '
',
                '
',
            '
'
        );
        t.disableFormats = true;
        return t.compile();
    })(),

    /*
     * Destroys this layout. This is a template method that is empty by default, but should be implemented
     * by subclasses that require explicit destruction to purge event handlers or remove DOM nodes.
     * @protected
     */
    destroy : function(){
        // Stop any buffered layout tasks
        if(this.resizeTask && this.resizeTask.cancel){
            this.resizeTask.cancel();
        }
        if(!Ext.isEmpty(this.targetCls)){
            var target = this.container.getLayoutTarget();
            if(target){
                target.removeClass(this.targetCls);
            }
        }
    }
});


The source code

/*!
 * licensing@extjs.com
 * http://www.extjs.com/license
 */

/**
 * @class Ext.state.CookieProvider
 * @extends Ext.state.Provider
 * The default Provider implementation which saves state via cookies.
 *
Usage:

   var cp = new Ext.state.CookieProvider({
       path: "/cgi-bin/",
       expires: new Date(new Date().getTime()+(1000*60*60*24*30)), //30 days
       domain: "extjs.com"
   });
   Ext.state.Manager.setProvider(cp);

 * @cfg {String} path The path for which the cookie is active (defaults to root '/' which makes it active for all pages in the site)
 * @cfg {Date} expires The cookie expiration date (defaults to 7 days from now)
 * @cfg {String} domain The domain to save the cookie for.  Note that you cannot specify a different domain than
 * your page is on, but you can specify a sub-domain, or simply the domain itself like 'extjs.com' to include
 * all sub-domains if you need to access cookies across different sub-domains (defaults to null which uses the same
 * domain the page is running on including the 'www' like 'www.extjs.com')
 * @cfg {Boolean} secure True if the site is using SSL (defaults to false)
 * @constructor
 * Create a new CookieProvider
 * @param {Object} config The configuration object
 */
Ext.state.CookieProvider = function(config){
    Ext.state.CookieProvider.superclass.constructor.call(this);
    this.path = "/";
    this.expires = new Date(new Date().getTime()+(1000*60*60*24*7)); //7 days
    this.domain = null;
    this.secure = false;
    Ext.apply(this, config);
    this.state = this.readCookies();
};

Ext.extend(Ext.state.CookieProvider, Ext.state.Provider, {
    // private
    set : function(name, value){
        if(typeof value == "undefined" || value === null){
            this.clear(name);
            return;
        }
        this.setCookie(name, value);
        Ext.state.CookieProvider.superclass.set.call(this, name, value);
    },

    // private
    clear : function(name){
        this.clearCookie(name);
        Ext.state.CookieProvider.superclass.clear.call(this, name);
    },

    // private
    readCookies : function(){
        var cookies = {};
        var c = document.cookie + ";";
        var re = /\s?(.*?)=(.*?);/g;
        var matches;
        while((matches = re.exec(c)) != null){
            var name = matches[1];
            var value = matches[2];
            if(name && name.substring(0,3) == "ys-"){
                cookies[name.substr(3)] = this.decodeValue(value);
            }
        }
        return cookies;
    },

    // private
    setCookie : function(name, value){
        document.cookie = "ys-"+ name + "=" + this.encodeValue(value) +
           ((this.expires == null) ? "" : ("; expires=" + this.expires.toGMTString())) +
           ((this.path == null) ? "" : ("; path=" + this.path)) +
           ((this.domain == null) ? "" : ("; domain=" + this.domain)) +
           ((this.secure == true) ? "; secure" : "");
    },

    // private
    clearCookie : function(name){
        document.cookie = "ys-" + name + "=null; expires=Thu, 01-Jan-70 00:00:01 GMT" +
           ((this.path == null) ? "" : ("; path=" + this.path)) +
           ((this.domain == null) ? "" : ("; domain=" + this.domain)) +
           ((this.secure == true) ? "; secure" : "");
    }
});


The source code

/*!
 * licensing@extjs.com
 * http://www.extjs.com/license
 */

/**
 * @class Ext.util.Cookies
 * Utility class for managing and interacting with cookies.
 * @singleton
 */
Ext.util.Cookies = {

/**
     * Create a cookie with the specified name and value. Additional settings
     * for the cookie may be optionally specified (for example: expiration,
     * access restriction, SSL).
     * @param {String} name The name of the cookie to set.
     * @param {Mixed} value The value to set for the cookie.
     * @param {Object} expires (Optional) Specify an expiration date the
     * cookie is to persist until.  Note that the specified Date object will
     * be converted to Greenwich Mean Time (GMT).
     * @param {String} path (Optional) Setting a path on the cookie restricts
     * access to pages that match that path. Defaults to all pages ('/').
     * @param {String} domain (Optional) Setting a domain restricts access to
     * pages on a given domain (typically used to allow cookie access across
     * subdomains). For example, "extjs.com" will create a cookie that can be
     * accessed from any subdomain of extjs.com, including www.extjs.com,
     * support.extjs.com, etc.
     * @param {Boolean} secure (Optional) Specify true to indicate that the cookie
     * should only be accessible via SSL on a page using the HTTPS protocol.
     * Defaults to false. Note that this will only work if the page
     * calling this code uses the HTTPS protocol, otherwise the cookie will be
     * created with default options.
     */
    set : function(name, value){
        var argv = arguments;
        var argc = arguments.length;
        var expires = (argc > 2) ? argv[2] : null;
        var path = (argc > 3) ? argv[3] : '/';
        var domain = (argc > 4) ? argv[4] : null;
        var secure = (argc > 5) ? argv[5] : false;
        document.cookie = name + "=" + escape(value) + ((expires === null) ? "" : ("; expires=" + expires.toGMTString())) + ((path === null) ? "" : ("; path=" + path)) + ((domain === null) ? "" : ("; domain=" + domain)) + ((secure === true) ? "; secure" : "");
    },

/**
     * Retrieves cookies that are accessible by the current page. If a cookie
     * does not exist, get() returns null.  The following
     * example retrieves the cookie called "valid" and stores the String value
     * in the variable validStatus.
     *

     * var validStatus = Ext.util.Cookies.get("valid");
     *

     * @param {String} name The name of the cookie to get
     * @return {Mixed} Returns the cookie value for the specified name;
     * null if the cookie name does not exist.
     */
    get : function(name){
        var arg = name + "=";
        var alen = arg.length;
        var clen = document.cookie.length;
        var i = 0;
        var j = 0;
        while(i < clen){
            j = i + alen;
            if(document.cookie.substring(i, j) == arg){
                return Ext.util.Cookies.getCookieVal(j);
            }
            i = document.cookie.indexOf(" ", i) + 1;
            if(i === 0){
                break;
            }
        }
        return null;
    },

/**
     * Removes a cookie with the provided name from the browser
     * if found by setting its expiration date to sometime in the past.
     * @param {String} name The name of the cookie to remove
     */
    clear : function(name){
        if(Ext.util.Cookies.get(name)){
            document.cookie = name + "=" + "; expires=Thu, 01-Jan-70 00:00:01 GMT";
        }
    },
    /**
     * @private
     */
    getCookieVal : function(offset){
        var endstr = document.cookie.indexOf(";", offset);
        if(endstr == -1){
            endstr = document.cookie.length;
        }
        return unescape(document.cookie.substring(offset, endstr));
    }
};


The source code

/*!
 * licensing@extjs.com
 * http://www.extjs.com/license
 */

/**
 * @class Ext.util.CSS
 * Utility class for manipulating CSS rules
 * @singleton
 */
Ext.util.CSS = function(){
    var rules = null;
       var doc = document;

    var camelRe = /(-[a-z])/gi;
    var camelFn = function(m, a){ return a.charAt(1).toUpperCase(); };

   return {

/**
    * Creates a stylesheet from a text blob of rules.
    * These rules will be wrapped in a STYLE tag and appended to the HEAD of the document.
    * @param {String} cssText The text containing the css rules
    * @param {String} id An id to add to the stylesheet for later removal
    * @return {StyleSheet}
    */
   createStyleSheet : function(cssText, id){
       var ss;
       var head = doc.getElementsByTagName("head")[0];
       var rules = doc.createElement("style");
       rules.setAttribute("type", "text/css");
       if(id){
           rules.setAttribute("id", id);
       }
       if(Ext.isIE){
           head.appendChild(rules);
           ss = rules.styleSheet;
           ss.cssText = cssText;
       }else{
           try{
                rules.appendChild(doc.createTextNode(cssText));
           }catch(e){
               rules.cssText = cssText;
           }
           head.appendChild(rules);
           ss = rules.styleSheet ? rules.styleSheet : (rules.sheet || doc.styleSheets[doc.styleSheets.length-1]);
       }
       this.cacheStyleSheet(ss);
       return ss;
   },

/**
    * Removes a style or link tag by id
    * @param {String} id The id of the tag
    */
   removeStyleSheet : function(id){
       var existing = doc.getElementById(id);
       if(existing){
           existing.parentNode.removeChild(existing);
       }
   },

/**
    * Dynamically swaps an existing stylesheet reference for a new one
    * @param {String} id The id of an existing link tag to remove
    * @param {String} url The href of the new stylesheet to include
    */
   swapStyleSheet : function(id, url){
       this.removeStyleSheet(id);
       var ss = doc.createElement("link");
       ss.setAttribute("rel", "stylesheet");
       ss.setAttribute("type", "text/css");
       ss.setAttribute("id", id);
       ss.setAttribute("href", url);
       doc.getElementsByTagName("head")[0].appendChild(ss);
   },

/**
    * Refresh the rule cache if you have dynamically added stylesheets
    * @return {Object} An object (hash) of rules indexed by selector
    */
   refreshCache : function(){
       return this.getRules(true);
   },

   // private
   cacheStyleSheet : function(ss){
       if(!rules){
           rules = {};
       }
       try{// try catch for cross domain access issue
           var ssRules = ss.cssRules || ss.rules;
           for(var j = ssRules.length-1; j >= 0; --j){
               rules[ssRules[j].selectorText.toLowerCase()] = ssRules[j];
           }
       }catch(e){}
   },

/**
    * Gets all css rules for the document
    * @param {Boolean} refreshCache true to refresh the internal cache
    * @return {Object} An object (hash) of rules indexed by selector
    */
   getRules : function(refreshCache){
           if(rules === null || refreshCache){
               rules = {};
               var ds = doc.styleSheets;
               for(var i =0, len = ds.length; i < len; i++){
                   try{
                    this.cacheStyleSheet(ds[i]);
                }catch(e){}
            }
           }
           return rules;
       },

/**
    * Gets an an individual CSS rule by selector(s)
    * @param {String/Array} selector The CSS selector or an array of selectors to try. The first selector that is found is returned.
    * @param {Boolean} refreshCache true to refresh the internal cache if you have recently updated any rules or added styles dynamically
    * @return {CSSRule} The CSS rule or null if one is not found
    */
   getRule : function(selector, refreshCache){
           var rs = this.getRules(refreshCache);
           if(!Ext.isArray(selector)){
               return rs[selector.toLowerCase()];
           }
           for(var i = 0; i < selector.length; i++){
            if(rs[selector[i]]){
                return rs[selector[i].toLowerCase()];
            }
        }
        return null;
       },

/**
    * Updates a rule property
    * @param {String/Array} selector If it's an array it tries each selector until it finds one. Stops immediately once one is found.
    * @param {String} property The css property
    * @param {String} value The new value for the property
    * @return {Boolean} true If a rule was found and updated
    */
   updateRule : function(selector, property, value){
           if(!Ext.isArray(selector)){
               var rule = this.getRule(selector);
               if(rule){
                   rule.style[property.replace(camelRe, camelFn)] = value;
                   return true;
               }
           }else{
               for(var i = 0; i < selector.length; i++){
                   if(this.updateRule(selector[i], property, value)){
                       return true;
                   }
               }
           }
           return false;
       }
   };
}();


The source code

/*!
 * licensing@extjs.com
 * http://www.extjs.com/license
 */

/**
 * @class Ext.CycleButton
 * @extends Ext.SplitButton
 * A specialized SplitButton that contains a menu of {@link Ext.menu.CheckItem} elements.  The button automatically
 * cycles through each menu item on click, raising the button's {@link #change} event (or calling the button's
 * {@link #changeHandler} function, if supplied) for the active menu item. Clicking on the arrow section of the
 * button displays the dropdown menu just like a normal SplitButton.  Example usage:
 *

var btn = new Ext.CycleButton({
    showText: true,
    prependText: 'View as ',
    items: [{
        text:'text only',
        iconCls:'view-text',
        checked:true
    },{
        text:'HTML',
        iconCls:'view-html'
    }],
    changeHandler:function(btn, item){
        Ext.Msg.alert('Change View', item.text);
    }
});

 * @constructor
 * Create a new split button
 * @param {Object} config The config object
 * @xtype cycle
 */
Ext.CycleButton = Ext.extend(Ext.SplitButton, {

/**
     * @cfg {Array} items An array of {@link Ext.menu.CheckItem} config objects to be used when creating the
     * button's menu items (e.g., {text:'Foo', iconCls:'foo-icon'})
     */

/**
     * @cfg {Boolean} showText True to display the active item's text as the button text (defaults to false)
     */

/**
     * @cfg {String} prependText A static string to prepend before the active item's text when displayed as the
     * button's text (only applies when showText = true, defaults to '')
     */

/**
     * @cfg {Function} changeHandler A callback function that will be invoked each time the active menu
     * item in the button's menu has changed.  If this callback is not supplied, the SplitButton will instead
     * fire the {@link #change} event on active item change.  The changeHandler function will be called with the
     * following argument list: (SplitButton this, Ext.menu.CheckItem item)
     */

/**
     * @cfg {String} forceIcon A css class which sets an image to be used as the static icon for this button.  This
     * icon will always be displayed regardless of which item is selected in the dropdown list.  This overrides the
     * default behavior of changing the button's icon to match the selected item's icon on change.
     */

/**
     * @property menu
     * @type Menu
     * The {@link Ext.menu.Menu Menu} object used to display the {@link Ext.menu.CheckItem CheckItems} representing the available choices.
     */

    // private
    getItemText : function(item){
        if(item && this.showText === true){
            var text = '';
            if(this.prependText){
                text += this.prependText;
            }
            text += item.text;
            return text;
        }
        return undefined;
    },

/**
     * Sets the button's active menu item.
     * @param {Ext.menu.CheckItem} item The item to activate
     * @param {Boolean} suppressEvent True to prevent the button's change event from firing (defaults to false)
     */
    setActiveItem : function(item, suppressEvent){
        if(!Ext.isObject(item)){
            item = this.menu.getComponent(item);
        }
        if(item){
            if(!this.rendered){
                this.text = this.getItemText(item);
                this.iconCls = item.iconCls;
            }else{
                var t = this.getItemText(item);
                if(t){
                    this.setText(t);
                }
                this.setIconClass(item.iconCls);
            }
            this.activeItem = item;
            if(!item.checked){
                item.setChecked(true, false);
            }
            if(this.forceIcon){
                this.setIconClass(this.forceIcon);
            }
            if(!suppressEvent){
                this.fireEvent('change', this, item);
            }
        }
    },

/**
     * Gets the currently active menu item.
     * @return {Ext.menu.CheckItem} The active item
     */
    getActiveItem : function(){
        return this.activeItem;
    },

    // private
    initComponent : function(){
        this.addEvents(

/**
             * @event change
             * Fires after the button's active menu item has changed.  Note that if a {@link #changeHandler} function
             * is set on this CycleButton, it will be called instead on active item change and this change event will
             * not be fired.
             * @param {Ext.CycleButton} this
             * @param {Ext.menu.CheckItem} item The menu item that was selected
             */
            "change"
        );

        if(this.changeHandler){
            this.on('change', this.changeHandler, this.scope||this);
            delete this.changeHandler;
        }

        this.itemCount = this.items.length;

        this.menu = {cls:'x-cycle-menu', items:[]};
        var checked = 0;
        Ext.each(this.items, function(item, i){
            Ext.apply(item, {
                group: item.group || this.id,
                itemIndex: i,
                checkHandler: this.checkHandler,
                scope: this,
                checked: item.checked || false
            });
            this.menu.items.push(item);
            if(item.checked){
                checked = i;
            }
        }, this);
        Ext.CycleButton.superclass.initComponent.call(this);
        this.on('click', this.toggleSelected, this);
        this.setActiveItem(checked, true);
    },

    // private
    checkHandler : function(item, pressed){
        if(pressed){
            this.setActiveItem(item);
        }
    },

/**
     * This is normally called internally on button click, but can be called externally to advance the button's
     * active item programmatically to the next one in the menu.  If the current item is the last one in the menu
     * the active item will be set to the first item in the menu.
     */
    toggleSelected : function(){
        var m = this.menu;
        m.render();
        // layout if we haven't before so the items are active
        if(!m.hasLayout){
            m.doLayout();
        }

        var nextIdx, checkItem;
        for (var i = 1; i < this.itemCount; i++) {
            nextIdx = (this.activeItem.itemIndex + i) % this.itemCount;
            // check the potential item
            checkItem = m.items.itemAt(nextIdx);
            // if its not disabled then check it.
            if (!checkItem.disabled) {
                checkItem.setChecked(true);
                break;
            }
        }
    }
});
Ext.reg('cycle', Ext.CycleButton);


The source code

/*!
 * licensing@extjs.com
 * http://www.extjs.com/license
 */

/**
 * @class Ext.data.Field
 *
This class encapsulates the field definition information specified in the field definition objects
 * passed to {@link Ext.data.Record#create}.

 *
Developers do not need to instantiate this class. Instances are created by {@link Ext.data.Record.create}
 * and cached in the {@link Ext.data.Record#fields fields} property of the created Record constructor's prototype.

 */
Ext.data.Field = Ext.extend(Object, {

    constructor : function(config){
        if(Ext.isString(config)){
            config = {name: config};
        }
        Ext.apply(this, config);

        var types = Ext.data.Types,
            st = this.sortType,
            t;

        if(this.type){
            if(Ext.isString(this.type)){
                this.type = Ext.data.Types[this.type.toUpperCase()] || types.AUTO;
            }
        }else{
            this.type = types.AUTO;
        }

        // named sortTypes are supported, here we look them up
        if(Ext.isString(st)){
            this.sortType = Ext.data.SortTypes[st];
        }else if(Ext.isEmpty(st)){
            this.sortType = this.type.sortType;
        }

        if(!this.convert){
            this.convert = this.type.convert;
        }
    },

/**
     * @cfg {String} name
     * The name by which the field is referenced within the Record. This is referenced by, for example,
     * the dataIndex property in column definition objects passed to {@link Ext.grid.ColumnModel}.
     *
Note: In the simplest case, if no properties other than name are required, a field
     * definition may consist of just a String for the field name.

     */

/**
     * @cfg {Mixed} type
     * (Optional) The data type for automatic conversion from received data to the stored value if {@link Ext.data.Field#convert convert}
     * has not been specified. This may be specified as a string value. Possible values are
     *

     *
  • auto (Default, implies no conversion)
    •
     *
  • string
    •
     *
  • int
    •
     *
  • float
    •
     *
  • boolean
    •
     *
  • date

     *
This may also be specified by referencing a member of the {@link Ext.data.Types} class.

     *
Developers may create their own application-specific data types by defining new members of the
     * {@link Ext.data.Types} class.

     */

/**
     * @cfg {Function} convert
     * (Optional) A function which converts the value provided by the Reader into an object that will be stored
     * in the Record. It is passed the following parameters:

     *
  • v : Mixed
    The data value as read by the Reader, if undefined will use
     * the configured {@link Ext.data.Field#defaultValue defaultValue}.
    •
     *
  • rec : Mixed
    The data object containing the row as read by the Reader.
     * Depending on the Reader type, this could be an Array ({@link Ext.data.ArrayReader ArrayReader}), an object
     *  ({@link Ext.data.JsonReader JsonReader}), or an XML element ({@link Ext.data.XMLReader XMLReader}).
    •
     *

     *

// example of convert function
function fullName(v, record){
    return record.name.last + ', ' + record.name.first;
}

function location(v, record){
    return !record.city ? '' : (record.city + ', ' + record.state);
}

var Dude = Ext.data.Record.create([
    {name: 'fullname',  convert: fullName},
    {name: 'firstname', mapping: 'name.first'},
    {name: 'lastname',  mapping: 'name.last'},
    {name: 'city', defaultValue: 'homeless'},
    'state',
    {name: 'location',  convert: location}
]);

// create the data store
var store = new Ext.data.Store({
    reader: new Ext.data.JsonReader(
        {
            idProperty: 'key',
            root: 'daRoot',
            totalProperty: 'total'
        },
        Dude  // recordType
    )
});

var myData = [
    { key: 1,
      name: { first: 'Fat',    last:  'Albert' }
      // notice no city, state provided in data object
    },
    { key: 2,
      name: { first: 'Barney', last:  'Rubble' },
      city: 'Bedrock', state: 'Stoneridge'
    },
    { key: 3,
      name: { first: 'Cliff',  last:  'Claven' },
      city: 'Boston',  state: 'MA'
    }
];
     *

     */

/**
     * @cfg {String} dateFormat
     *
(Optional) Used when converting received data into a Date when the {@link #type} is specified as "date".

     *
A format string for the {@link Date#parseDate Date.parseDate} function, or "timestamp" if the
     * value provided by the Reader is a UNIX timestamp, or "time" if the value provided by the Reader is a
     * javascript millisecond timestamp. See {@link Date}

     */
    dateFormat: null,

/**
     * @cfg {Mixed} defaultValue
     * (Optional) The default value used when a Record is being created by a {@link Ext.data.Reader Reader}
     * when the item referenced by the {@link Ext.data.Field#mapping mapping} does not exist in the data
     * object (i.e. undefined). (defaults to "")
     */
    defaultValue: "",

/**
     * @cfg {String/Number} mapping
     *
(Optional) A path expression for use by the {@link Ext.data.DataReader} implementation
     * that is creating the {@link Ext.data.Record Record} to extract the Field value from the data object.
     * If the path expression is the same as the field name, the mapping may be omitted.

     *
The form of the mapping expression depends on the Reader being used.

     *

     *
  • {@link Ext.data.JsonReader}
    The mapping is a string containing the javascript
     * expression to reference the data from an element of the data item's {@link Ext.data.JsonReader#root root} Array. Defaults to the field name.
    •
     *
  • {@link Ext.data.XmlReader}
    The mapping is an {@link Ext.DomQuery} path to the data
     * item relative to the DOM element that represents the {@link Ext.data.XmlReader#record record}. Defaults to the field name.
    •
     *
  • {@link Ext.data.ArrayReader}
    The mapping is a number indicating the Array index
     * of the field's value. Defaults to the field specification's Array position.
    •
     *

     *
If a more complex value extraction strategy is required, then configure the Field with a {@link #convert}
     * function. This is passed the whole row object, and may interrogate it in whatever way is necessary in order to
     * return the desired data.

     */
    mapping: null,

/**
     * @cfg {Function} sortType
     * (Optional) A function which converts a Field's value to a comparable value in order to ensure
     * correct sort ordering. Predefined functions are provided in {@link Ext.data.SortTypes}. A custom
     * sort example:

// current sort     after sort we want
// +-+------+          +-+------+
// |1|First |          |1|First |
// |2|Last  |          |3|Second|
// |3|Second|          |2|Last  |
// +-+------+          +-+------+

sortType: function(value) {
   switch (value.toLowerCase()) // native toLowerCase():
   {
      case 'first': return 1;
      case 'second': return 2;
      default: return 3;
   }
}
     *

     */
    sortType : null,

/**
     * @cfg {String} sortDir
     * (Optional) Initial direction to sort ("ASC" or  "DESC").  Defaults to
     * "ASC".
     */
    sortDir : "ASC",

/**
     * @cfg {Boolean} allowBlank
     * (Optional) Used for validating a {@link Ext.data.Record record}, defaults to true.
     * An empty value here will cause {@link Ext.data.Record}.{@link Ext.data.Record#isValid isValid}
     * to evaluate to false.
     */
    allowBlank : true
});


The source code

/*!
 * licensing@extjs.com
 * http://www.extjs.com/license
 */

/**
 * @class Ext.data.DataProxy
 * @extends Ext.util.Observable
 *
Abstract base class for implementations which provide retrieval of unformatted data objects.
 * This class is intended to be extended and should not be created directly. For existing implementations,
 * see {@link Ext.data.DirectProxy}, {@link Ext.data.HttpProxy}, {@link Ext.data.ScriptTagProxy} and
 * {@link Ext.data.MemoryProxy}.

 *
DataProxy implementations are usually used in conjunction with an implementation of {@link Ext.data.DataReader}
 * (of the appropriate type which knows how to parse the data object) to provide a block of
 * {@link Ext.data.Records} to an {@link Ext.data.Store}.

 *
The parameter to a DataProxy constructor may be an {@link Ext.data.Connection} or can also be the
 * config object to an {@link Ext.data.Connection}.

 *
Custom implementations must implement either the doRequest method (preferred) or the
 * load method (deprecated). See
 * {@link Ext.data.HttpProxy}.{@link Ext.data.HttpProxy#doRequest doRequest} or
 * {@link Ext.data.HttpProxy}.{@link Ext.data.HttpProxy#load load} for additional details.

 *
Example 1

 *

proxy: new Ext.data.ScriptTagProxy({
    {@link Ext.data.Connection#url url}: 'http://extjs.com/forum/topics-remote.php'
}),
 *

 *
Example 2

 *

proxy : new Ext.data.HttpProxy({
    {@link Ext.data.Connection#method method}: 'GET',
    {@link Ext.data.HttpProxy#prettyUrls prettyUrls}: false,
    {@link Ext.data.Connection#url url}: 'local/default.php', // see options parameter for {@link Ext.Ajax#request}
    {@link #api}: {
        // all actions except the following will use above url
        create  : 'local/new.php',
        update  : 'local/update.php'
    }
}),
 *

 *
And new in Ext version 3, attach centralized event-listeners upon the DataProxy class itself!  This is a great place
 * to implement a messaging system to centralize your application's user-feedback and error-handling.

 *

// Listen to all "beforewrite" event fired by all proxies.
Ext.data.DataProxy.on('beforewrite', function(proxy, action) {
    console.log('beforewrite: ', action);
});

// Listen to "write" event fired by all proxies
Ext.data.DataProxy.on('write', function(proxy, action, data, res, rs) {
    console.info('write: ', action);
});

// Listen to "exception" event fired by all proxies
Ext.data.DataProxy.on('exception', function(proxy, type, action) {
    console.error(type + action + ' exception);
});
 *

 * Note: These three events are all fired with the signature of the corresponding DataProxy instance event {@link #beforewrite beforewrite}, {@link #write write} and {@link #exception exception}.
 */
Ext.data.DataProxy = function(conn){
    // make sure we have a config object here to support ux proxies.
    // All proxies should now send config into superclass constructor.
    conn = conn || {};

    // This line caused a bug when people use custom Connection object having its own request method.
    // http://extjs.com/forum/showthread.php?t=67194.  Have to set DataProxy config
    //Ext.applyIf(this, conn);

    this.api     = conn.api;
    this.url     = conn.url;
    this.restful = conn.restful;
    this.listeners = conn.listeners;

    // deprecated
    this.prettyUrls = conn.prettyUrls;

/**
     * @cfg {Object} api
     * Specific urls to call on CRUD action methods "read", "create", "update" and "destroy".
     * Defaults to:

api: {
    read    : undefined,
    create  : undefined,
    update  : undefined,
    destroy : undefined
}
     *

     *
The url is built based upon the action being executed [load|create|save|destroy]
     * using the commensurate {@link #api} property, or if undefined default to the
     * configured {@link Ext.data.Store}.{@link Ext.data.Store#url url}.

     *
For example:

     *

api: {
    load :    '/controller/load',
    create :  '/controller/new',  // Server MUST return idProperty of new record
    save :    '/controller/update',
    destroy : '/controller/destroy_action'
}

// Alternatively, one can use the object-form to specify each API-action
api: {
    load: {url: 'read.php', method: 'GET'},
    create: 'create.php',
    destroy: 'destroy.php',
    save: 'update.php'
}
     *

     *
If the specific URL for a given CRUD action is undefined, the CRUD action request
     * will be directed to the configured {@link Ext.data.Connection#url url}.

     *
Note: To modify the URL for an action dynamically the appropriate API
     * property should be modified before the action is requested using the corresponding before
     * action event.  For example to modify the URL associated with the load action:
     *

// modify the url for the action
myStore.on({
    beforeload: {
        fn: function (store, options) {
            // use {@link Ext.data.HttpProxy#setUrl setUrl} to change the URL for *just* this request.
            store.proxy.setUrl('changed1.php');

            // set optional second parameter to true to make this URL change
            // permanent, applying this URL for all subsequent requests.
            store.proxy.setUrl('changed1.php', true);

            // Altering the proxy API should be done using the public
            // method {@link Ext.data.DataProxy#setApi setApi}.
            store.proxy.setApi('read', 'changed2.php');

            // Or set the entire API with a config-object.
            // When using the config-object option, you must redefine the entire
            // API -- not just a specific action of it.
            store.proxy.setApi({
                read    : 'changed_read.php',
                create  : 'changed_create.php',
                update  : 'changed_update.php',
                destroy : 'changed_destroy.php'
            });
        }
    }
});
     *

     *

     */

    this.addEvents(

/**
         * @event exception
         *
Fires if an exception occurs in the Proxy during a remote request. This event is relayed
         * through a corresponding {@link Ext.data.Store}.{@link Ext.data.Store#exception exception},
         * so any Store instance may observe this event.

         *
In addition to being fired through the DataProxy instance that raised the event, this event is also fired
         * through the Ext.data.DataProxy class to allow for centralized processing of exception events from all
         * DataProxies by attaching a listener to the Ext.data.Proxy class itself.

         *
This event can be fired for one of two reasons:

         *

         *
  • remote-request failed :

         * The server did not return status === 200.
         *
    •
         *
  • remote-request succeeded :

         * The remote-request succeeded but the reader could not read the response.
         * This means the server returned data, but the configured Reader threw an
         * error while reading the response.  In this case, this event will be
         * raised and the caught error will be passed along into this event.
         *
    •
         *

         *
This event fires with two different contexts based upon the 2nd
         * parameter type [remote|response].  The first four parameters
         * are identical between the two contexts -- only the final two parameters
         * differ.

         * @param {DataProxy} this The proxy that sent the request
         * @param {String} type
         *
The value of this parameter will be either 'response' or 'remote'.

         *

         *
  • 'response' :

         *
    An invalid response from the server was returned: either 404,
         * 500 or the response meta-data does not match that defined in the DataReader
         * (e.g.: root, idProperty, successProperty).

         *
    •
         *
  • 'remote' :

         *
    A valid response was returned from the server having
         * successProperty === false.  This response might contain an error-message
         * sent from the server.  For example, the user may have failed
         * authentication/authorization or a database validation error occurred.

         *
    •
         *

         * @param {String} action Name of the action (see {@link Ext.data.Api#actions}.
         * @param {Object} options The options for the action that were specified in the {@link #request}.
         * @param {Object} response
         *
The value of this parameter depends on the value of the type parameter:

         *

         *
  • 'response' :

         *
    The raw browser response object (e.g.: XMLHttpRequest)

         *
    •
         *
  • 'remote' :

         *
    The decoded response object sent from the server.

         *
    •
         *

         * @param {Mixed} arg
         *
The type and value of this parameter depends on the value of the type parameter:

         *

         *
  • 'response' : Error

         *
    The JavaScript Error object caught if the configured Reader could not read the data.
         * If the remote request returns success===false, this parameter will be null.

         *
    •
         *
  • 'remote' : Record/Record[]

         *
    This parameter will only exist if the action was a write action
         * (Ext.data.Api.actions.create|update|destroy).

         *
    •
         *

         */
        'exception',

/**
         * @event beforeload
         * Fires before a request to retrieve a data object.
         * @param {DataProxy} this The proxy for the request
         * @param {Object} params The params object passed to the {@link #request} function
         */
        'beforeload',

/**
         * @event load
         * Fires before the load method's callback is called.
         * @param {DataProxy} this The proxy for the request
         * @param {Object} o The request transaction object
         * @param {Object} options The callback's options property as passed to the {@link #request} function
         */
        'load',

/**
         * @event loadexception
         *
This event is deprecated.  The signature of the loadexception event
         * varies depending on the proxy, use the catch-all {@link #exception} event instead.
         * This event will fire in addition to the {@link #exception} event.

         * @param {misc} misc See {@link #exception}.
         * @deprecated
         */
        'loadexception',

/**
         * @event beforewrite
         *
Fires before a request is generated for one of the actions Ext.data.Api.actions.create|update|destroy

         *
In addition to being fired through the DataProxy instance that raised the event, this event is also fired
         * through the Ext.data.DataProxy class to allow for centralized processing of beforewrite events from all
         * DataProxies by attaching a listener to the Ext.data.Proxy class itself.

         * @param {DataProxy} this The proxy for the request
         * @param {String} action [Ext.data.Api.actions.create|update|destroy]
         * @param {Record/Record[]} rs The Record(s) to create|update|destroy.
         * @param {Object} params The request params object.  Edit params to add parameters to the request.
         */
        'beforewrite',

/**
         * @event write
         *
Fires before the request-callback is called

         *
In addition to being fired through the DataProxy instance that raised the event, this event is also fired
         * through the Ext.data.DataProxy class to allow for centralized processing of write events from all
         * DataProxies by attaching a listener to the Ext.data.Proxy class itself.

         * @param {DataProxy} this The proxy that sent the request
         * @param {String} action [Ext.data.Api.actions.create|upate|destroy]
         * @param {Object} data The data object extracted from the server-response
         * @param {Object} response The decoded response from server
         * @param {Record/Record[]} rs The Record(s) from Store
         * @param {Object} options The callback's options property as passed to the {@link #request} function
         */
        'write'
    );
    Ext.data.DataProxy.superclass.constructor.call(this);

    // Prepare the proxy api.  Ensures all API-actions are defined with the Object-form.
    try {
        Ext.data.Api.prepare(this);
    } catch (e) {
        if (e instanceof Ext.data.Api.Error) {
            e.toConsole();
        }
    }
    // relay each proxy's events onto Ext.data.DataProxy class for centralized Proxy-listening
    Ext.data.DataProxy.relayEvents(this, ['beforewrite', 'write', 'exception']);
};

Ext.extend(Ext.data.DataProxy, Ext.util.Observable, {

/**
     * @cfg {Boolean} restful
     *
Defaults to false.  Set to true to operate in a RESTful manner.

     *
 Note: this parameter will automatically be set to true if the
     * {@link Ext.data.Store} it is plugged into is set to restful: true. If the
     * Store is RESTful, there is no need to set this option on the proxy.

     *
RESTful implementations enable the serverside framework to automatically route
     * actions sent to one url based upon the HTTP method, for example:
     *

store: new Ext.data.Store({
    restful: true,
    proxy: new Ext.data.HttpProxy({url:'/users'}); // all requests sent to /users
    ...
)}
     *

     * If there is no {@link #api} specified in the configuration of the proxy,
     * all requests will be marshalled to a single RESTful url (/users) so the serverside
     * framework can inspect the HTTP Method and act accordingly:
     *
Method   url        action
POST     /users     create
GET      /users     read
PUT      /users/23  update
DESTROY  /users/23  delete
     *

     *
If set to true, a {@link Ext.data.Record#phantom non-phantom} record's
     * {@link Ext.data.Record#id id} will be appended to the url. Some MVC (e.g., Ruby on Rails,
     * Merb and Django) support segment based urls where the segments in the URL follow the
     * Model-View-Controller approach:

     * someSite.com/controller/action/id
     *

     * Where the segments in the url are typically:

     *
  • The first segment : represents the controller class that should be invoked.
    •
     *
  • The second segment : represents the class function, or method, that should be called.
    •
     *
  • The third segment : represents the ID (a variable typically passed to the method).
    •
     *

     *
Refer to {@link Ext.data.DataProxy#api} for additional information.

     */
    restful: false,

/**
     *
Redefines the Proxy's API or a single action of an API. Can be called with two method signatures.

     *
If called with an object as the only parameter, the object should redefine the entire API, e.g.:

proxy.setApi({
    read    : '/users/read',
    create  : '/users/create',
    update  : '/users/update',
    destroy : '/users/destroy'
});

     *
If called with two parameters, the first parameter should be a string specifying the API action to
     * redefine and the second parameter should be the URL (or function if using DirectProxy) to call for that action, e.g.:

proxy.setApi(Ext.data.Api.actions.read, '/users/new_load_url');

     * @param {String/Object} api An API specification object, or the name of an action.
     * @param {String/Function} url The URL (or function if using DirectProxy) to call for the action.
     */
    setApi : function() {
        if (arguments.length == 1) {
            var valid = Ext.data.Api.isValid(arguments[0]);
            if (valid === true) {
                this.api = arguments[0];
            }
            else {
                throw new Ext.data.Api.Error('invalid', valid);
            }
        }
        else if (arguments.length == 2) {
            if (!Ext.data.Api.isAction(arguments[0])) {
                throw new Ext.data.Api.Error('invalid', arguments[0]);
            }
            this.api[arguments[0]] = arguments[1];
        }
        Ext.data.Api.prepare(this);
    },

/**
     * Returns true if the specified action is defined as a unique action in the api-config.
     * request.  If all API-actions are routed to unique urls, the xaction parameter is unecessary.  However, if no api is defined
     * and all Proxy actions are routed to DataProxy#url, the server-side will require the xaction parameter to perform a switch to
     * the corresponding code for CRUD action.
     * @param {String [Ext.data.Api.CREATE|READ|UPDATE|DESTROY]} action
     * @return {Boolean}
     */
    isApiAction : function(action) {
        return (this.api[action]) ? true : false;
    },

/**
     * All proxy actions are executed through this method.  Automatically fires the "before" + action event
     * @param {String} action Name of the action
     * @param {Ext.data.Record/Ext.data.Record[]/null} rs Will be null when action is 'load'
     * @param {Object} params
     * @param {Ext.data.DataReader} reader
     * @param {Function} callback
     * @param {Object} scope The scope (this reference) in which the callback function is executed. Defaults to the Proxy object.
     * @param {Object} options Any options specified for the action (e.g. see {@link Ext.data.Store#load}.
     */
    request : function(action, rs, params, reader, callback, scope, options) {
        if (!this.api[action] && !this.load) {
            throw new Ext.data.DataProxy.Error('action-undefined', action);
        }
        params = params || {};
        if ((action === Ext.data.Api.actions.read) ? this.fireEvent("beforeload", this, params) : this.fireEvent("beforewrite", this, action, rs, params) !== false) {
            this.doRequest.apply(this, arguments);
        }
        else {
            callback.call(scope || this, null, options, false);
        }
    },

/**
     * Deprecated load method using old method signature. See {@doRequest} for preferred method.
     * @deprecated
     * @param {Object} params
     * @param {Object} reader
     * @param {Object} callback
     * @param {Object} scope
     * @param {Object} arg
     */
    load : null,

/**
     * @cfg {Function} doRequest Abstract method that should be implemented in all subclasses.  Note: Should only be used by custom-proxy developers.
     * (e.g.: {@link Ext.data.HttpProxy#doRequest HttpProxy.doRequest},
     * {@link Ext.data.DirectProxy#doRequest DirectProxy.doRequest}).
     */
    doRequest : function(action, rs, params, reader, callback, scope, options) {
        // default implementation of doRequest for backwards compatibility with 2.0 proxies.
        // If we're executing here, the action is probably "load".
        // Call with the pre-3.0 method signature.
        this.load(params, reader, callback, scope, options);
    },

/**
     * @cfg {Function} onRead Abstract method that should be implemented in all subclasses.  Note: Should only be used by custom-proxy developers.  Callback for read {@link Ext.data.Api#actions action}.
     * @param {String} action Action name as per {@link Ext.data.Api.actions#read}.
     * @param {Object} o The request transaction object
     * @param {Object} res The server response
     * @fires loadexception (deprecated)
     * @fires exception
     * @fires load
     * @protected
     */
    onRead : Ext.emptyFn,

/**
     * @cfg {Function} onWrite Abstract method that should be implemented in all subclasses.  Note: Should only be used by custom-proxy developers.  Callback for create, update and destroy {@link Ext.data.Api#actions actions}.
     * @param {String} action [Ext.data.Api.actions.create|read|update|destroy]
     * @param {Object} trans The request transaction object
     * @param {Object} res The server response
     * @fires exception
     * @fires write
     * @protected
     */
    onWrite : Ext.emptyFn,
    /**
     * buildUrl
     * Sets the appropriate url based upon the action being executed.  If restful is true, and only a single record is being acted upon,
     * url will be built Rails-style, as in "/controller/action/32".  restful will aply iff the supplied record is an
     * instance of Ext.data.Record rather than an Array of them.
     * @param {String} action The api action being executed [read|create|update|destroy]
     * @param {Ext.data.Record/Ext.data.Record[]} record The record or Array of Records being acted upon.
     * @return {String} url
     * @private
     */
    buildUrl : function(action, record) {
        record = record || null;

        // conn.url gets nullified after each request.  If it's NOT null here, that means the user must have intervened with a call
        // to DataProxy#setUrl or DataProxy#setApi and changed it before the request was executed.  If that's the case, use conn.url,
        // otherwise, build the url from the api or this.url.
        var url = (this.conn && this.conn.url) ? this.conn.url : (this.api[action]) ? this.api[action].url : this.url;
        if (!url) {
            throw new Ext.data.Api.Error('invalid-url', action);
        }

        // look for urls having "provides" suffix used in some MVC frameworks like Rails/Merb and others.  The provides suffice informs
        // the server what data-format the client is dealing with and returns data in the same format (eg: application/json, application/xml, etc)
        // e.g.: /users.json, /users.xml, etc.
        // with restful routes, we need urls like:
        // PUT /users/1.json
        // DELETE /users/1.json
        var provides = null;
        var m = url.match(/(.*)(\.json|\.xml|\.html)$/);
        if (m) {
            provides = m[2];    // eg ".json"
            url      = m[1];    // eg: "/users"
        }
        // prettyUrls is deprectated in favor of restful-config
        if ((this.restful === true || this.prettyUrls === true) && record instanceof Ext.data.Record && !record.phantom) {
            url += '/' + record.id;
        }
        return (provides === null) ? url : url + provides;
    },

/**
     * Destroys the proxy by purging any event listeners and cancelling any active requests.
     */
    destroy: function(){
        this.purgeListeners();
    }
});

// Apply the Observable prototype to the DataProxy class so that proxy instances can relay their
// events to the class.  Allows for centralized listening of all proxy instances upon the DataProxy class.
Ext.apply(Ext.data.DataProxy, Ext.util.Observable.prototype);
Ext.util.Observable.call(Ext.data.DataProxy);

/**
 * @class Ext.data.DataProxy.Error
 * @extends Ext.Error
 * DataProxy Error extension.
 * constructor
 * @param {String} message Message describing the error.
 * @param {Record/Record[]} arg
 */
Ext.data.DataProxy.Error = Ext.extend(Ext.Error, {
    constructor : function(message, arg) {
        this.arg = arg;
        Ext.Error.call(this, message);
    },
    name: 'Ext.data.DataProxy'
});
Ext.apply(Ext.data.DataProxy.Error.prototype, {
    lang: {
        'action-undefined': "DataProxy attempted to execute an API-action but found an undefined url / function.  Please review your Proxy url/api-configuration.",
        'api-invalid': 'Recieved an invalid API-configuration.  Please ensure your proxy API-configuration contains only the actions from Ext.data.Api.actions.'
    }
});


The source code

/*!
 * licensing@extjs.com
 * http://www.extjs.com/license
 */

/**
 * @class Ext.data.DataReader
 * Abstract base class for reading structured data from a data source and converting
 * it into an object containing {@link Ext.data.Record} objects and metadata for use
 * by an {@link Ext.data.Store}.  This class is intended to be extended and should not
 * be created directly. For existing implementations, see {@link Ext.data.ArrayReader},
 * {@link Ext.data.JsonReader} and {@link Ext.data.XmlReader}.
 * @constructor Create a new DataReader
 * @param {Object} meta Metadata configuration options (implementation-specific).
 * @param {Array/Object} recordType
 *
Either an Array of {@link Ext.data.Field Field} definition objects (which
 * will be passed to {@link Ext.data.Record#create}, or a {@link Ext.data.Record Record}
 * constructor created using {@link Ext.data.Record#create}.

 */
Ext.data.DataReader = function(meta, recordType){

/**
     * This DataReader's configured metadata as passed to the constructor.
     * @type Mixed
     * @property meta
     */
    this.meta = meta;

/**
     * @cfg {Array/Object} fields
     *
Either an Array of {@link Ext.data.Field Field} definition objects (which
     * will be passed to {@link Ext.data.Record#create}, or a {@link Ext.data.Record Record}
     * constructor created from {@link Ext.data.Record#create}.

     */
    this.recordType = Ext.isArray(recordType) ?
        Ext.data.Record.create(recordType) : recordType;

    // if recordType defined make sure extraction functions are defined
    if (this.recordType){
        this.buildExtractors();
    }
};

Ext.data.DataReader.prototype = {

/**
     * @cfg {String} messageProperty [undefined] Optional name of a property within a server-response that represents a user-feedback message.
     */

/**
     * Abstract method created in extension's buildExtractors impl.
     */
    getTotal: Ext.emptyFn,

/**
     * Abstract method created in extension's buildExtractors impl.
     */
    getRoot: Ext.emptyFn,

/**
     * Abstract method created in extension's buildExtractors impl.
     */
    getMessage: Ext.emptyFn,

/**
     * Abstract method created in extension's buildExtractors impl.
     */
    getSuccess: Ext.emptyFn,

/**
     * Abstract method created in extension's buildExtractors impl.
     */
    getId: Ext.emptyFn,

/**
     * Abstract method, overridden in DataReader extensions such as {@link Ext.data.JsonReader} and {@link Ext.data.XmlReader}
     */
    buildExtractors : Ext.emptyFn,

/**
     * Abstract method overridden in DataReader extensions such as {@link Ext.data.JsonReader} and {@link Ext.data.XmlReader}
     */
    extractValues : Ext.emptyFn,

/**
     * Used for un-phantoming a record after a successful database insert.  Sets the records pk along with new data from server.
     * You must return at least the database pk using the idProperty defined in your DataReader configuration.  The incoming
     * data from server will be merged with the data in the local record.
     * In addition, you must return record-data from the server in the same order received.
     * Will perform a commit as well, un-marking dirty-fields.  Store's "update" event will be suppressed.
     * @param {Record/Record[]} record The phantom record to be realized.
     * @param {Object/Object[]} data The new record data to apply.  Must include the primary-key from database defined in idProperty field.
     */
    realize: function(rs, data){
        if (Ext.isArray(rs)) {
            for (var i = rs.length - 1; i >= 0; i--) {
                // recurse
                if (Ext.isArray(data)) {
                    this.realize(rs.splice(i,1).shift(), data.splice(i,1).shift());
                }
                else {
                    // weird...rs is an array but data isn't??  recurse but just send in the whole invalid data object.
                    // the else clause below will detect !this.isData and throw exception.
                    this.realize(rs.splice(i,1).shift(), data);
                }
            }
        }
        else {
            // If rs is NOT an array but data IS, see if data contains just 1 record.  If so extract it and carry on.
            if (Ext.isArray(data) && data.length == 1) {
                data = data.shift();
            }
            if (!this.isData(data)) {
                // TODO: Let exception-handler choose to commit or not rather than blindly rs.commit() here.
                //rs.commit();
                throw new Ext.data.DataReader.Error('realize', rs);
            }
            rs.phantom = false; // <-- That's what it's all about
            rs._phid = rs.id;  // <-- copy phantom-id -> _phid, so we can remap in Store#onCreateRecords
            rs.id = this.getId(data);
            rs.data = data;

            rs.commit();
        }
    },

/**
     * Used for updating a non-phantom or "real" record's data with fresh data from server after remote-save.
     * If returning data from multiple-records after a batch-update, you must return record-data from the server in
     * the same order received.  Will perform a commit as well, un-marking dirty-fields.  Store's "update" event will be
     * suppressed as the record receives fresh new data-hash
     * @param {Record/Record[]} rs
     * @param {Object/Object[]} data
     */
    update : function(rs, data) {
        if (Ext.isArray(rs)) {
            for (var i=rs.length-1; i >= 0; i--) {
                if (Ext.isArray(data)) {
                    this.update(rs.splice(i,1).shift(), data.splice(i,1).shift());
                }
                else {
                    // weird...rs is an array but data isn't??  recurse but just send in the whole data object.
                    // the else clause below will detect !this.isData and throw exception.
                    this.update(rs.splice(i,1).shift(), data);
                }
            }
        }
        else {
            // If rs is NOT an array but data IS, see if data contains just 1 record.  If so extract it and carry on.
            if (Ext.isArray(data) && data.length == 1) {
                data = data.shift();
            }
            if (this.isData(data)) {
                rs.data = Ext.apply(rs.data, data);
            }
            rs.commit();
        }
    },

    /**
     * returns extracted, type-cast rows of data.  Iterates to call #extractValues for each row
     * @param {Object[]/Object} data-root from server response
     * @param {Boolean} returnRecords [false] Set true to return instances of Ext.data.Record
     * @private
     */
    extractData : function(root, returnRecords) {
        // A bit ugly this, too bad the Record's raw data couldn't be saved in a common property named "raw" or something.
        var rawName = (this instanceof Ext.data.JsonReader) ? 'json' : 'node';

        var rs = [];

        // Had to add Check for XmlReader, #isData returns true if root is an Xml-object.  Want to check in order to re-factor
        // #extractData into DataReader base, since the implementations are almost identical for JsonReader, XmlReader
        if (this.isData(root) && !(this instanceof Ext.data.XmlReader)) {
            root = [root];
        }
        var f       = this.recordType.prototype.fields,
            fi      = f.items,
            fl      = f.length,
            rs      = [];
        if (returnRecords === true) {
            var Record = this.recordType;
            for (var i = 0; i < root.length; i++) {
                var n = root[i];
                var record = new Record(this.extractValues(n, fi, fl), this.getId(n));
                record[rawName] = n;    // <-- There's implementation of ugly bit, setting the raw record-data.
                rs.push(record);
            }
        }
        else {
            for (var i = 0; i < root.length; i++) {
                var data = this.extractValues(root[i], fi, fl);
                data[this.meta.idProperty] = this.getId(root[i]);
                rs.push(data);
            }
        }
        return rs;
    },

/**
     * Returns true if the supplied data-hash looks and quacks like data.  Checks to see if it has a key
     * corresponding to idProperty defined in your DataReader config containing non-empty pk.
     * @param {Object} data
     * @return {Boolean}
     */
    isData : function(data) {
        return (data && Ext.isObject(data) && !Ext.isEmpty(this.getId(data))) ? true : false;
    },

    // private function a store will createSequence upon
    onMetaChange : function(meta){
        delete this.ef;
        this.meta = meta;
        this.recordType = Ext.data.Record.create(meta.fields);
        this.buildExtractors();
    }
};

/**
 * @class Ext.data.DataReader.Error
 * @extends Ext.Error
 * General error class for Ext.data.DataReader
 */
Ext.data.DataReader.Error = Ext.extend(Ext.Error, {
    constructor : function(message, arg) {
        this.arg = arg;
        Ext.Error.call(this, message);
    },
    name: 'Ext.data.DataReader'
});
Ext.apply(Ext.data.DataReader.Error.prototype, {
    lang : {
        'update': "#update received invalid data from server.  Please see docs for DataReader#update and review your DataReader configuration.",
        'realize': "#realize was called with invalid remote-data.  Please see the docs for DataReader#realize and review your DataReader configuration.",
        'invalid-response': "#readResponse received an invalid response from the server."
    }
});


The source code

/*!
 * licensing@extjs.com
 * http://www.extjs.com/license
 */

/**
 * @class Ext.DataView
 * @extends Ext.BoxComponent
 * A mechanism for displaying data using custom layout templates and formatting. DataView uses an {@link Ext.XTemplate}
 * as its internal templating mechanism, and is bound to an {@link Ext.data.Store}
 * so that as the data in the store changes the view is automatically updated to reflect the changes.  The view also
 * provides built-in behavior for many common events that can occur for its contained items including click, doubleclick,
 * mouseover, mouseout, etc. as well as a built-in selection model. In order to use these features, an {@link #itemSelector}
 * config must be provided for the DataView to determine what nodes it will be working with.
 *
 *
The example below binds a DataView to a {@link Ext.data.Store} and renders it into an {@link Ext.Panel}.

 *

var store = new Ext.data.JsonStore({
    url: 'get-images.php',
    root: 'images',
    fields: [
        'name', 'url',
        {name:'size', type: 'float'},
        {name:'lastmod', type:'date', dateFormat:'timestamp'}
    ]
});
store.load();

var tpl = new Ext.XTemplate(
    '<tpl for=".">',
        '<div class="thumb-wrap" id="{name}">',
        '<div class="thumb"><img src="{url}" title="{name}"></div>',
        '<span class="x-editable">{shortName}</span></div>',
    '</tpl>',
    '<div class="x-clear"></div>'
);

var panel = new Ext.Panel({
    id:'images-view',
    frame:true,
    width:535,
    autoHeight:true,
    collapsible:true,
    layout:'fit',
    title:'Simple DataView',

    items: new Ext.DataView({
        store: store,
        tpl: tpl,
        autoHeight:true,
        multiSelect: true,
        overClass:'x-view-over',
        itemSelector:'div.thumb-wrap',
        emptyText: 'No images to display'
    })
});
panel.render(document.body);

 * @constructor
 * Create a new DataView
 * @param {Object} config The config object
 * @xtype dataview
 */
Ext.DataView = Ext.extend(Ext.BoxComponent, {

/**
     * @cfg {String/Array} tpl
     * The HTML fragment or an array of fragments that will make up the template used by this DataView.  This should
     * be specified in the same format expected by the constructor of {@link Ext.XTemplate}.
     */

/**
     * @cfg {Ext.data.Store} store
     * The {@link Ext.data.Store} to bind this DataView to.
     */

/**
     * @cfg {String} itemSelector
     * This is a required setting. A simple CSS selector (e.g. div.some-class or
     * span:first-child) that will be used to determine what nodes this DataView will be
     * working with.
     */

/**
     * @cfg {Boolean} multiSelect
     * True to allow selection of more than one item at a time, false to allow selection of only a single item
     * at a time or no selection at all, depending on the value of {@link #singleSelect} (defaults to false).
     */

/**
     * @cfg {Boolean} singleSelect
     * True to allow selection of exactly one item at a time, false to allow no selection at all (defaults to false).
     * Note that if {@link #multiSelect} = true, this value will be ignored.
     */

/**
     * @cfg {Boolean} simpleSelect
     * True to enable multiselection by clicking on multiple items without requiring the user to hold Shift or Ctrl,
     * false to force the user to hold Ctrl or Shift to select more than on item (defaults to false).
     */

/**
     * @cfg {String} overClass
     * A CSS class to apply to each item in the view on mouseover (defaults to undefined).
     */

/**
     * @cfg {String} loadingText
     * A string to display during data load operations (defaults to undefined).  If specified, this text will be
     * displayed in a loading div and the view's contents will be cleared while loading, otherwise the view's
     * contents will continue to display normally until the new data is loaded and the contents are replaced.
     */

/**
     * @cfg {String} selectedClass
     * A CSS class to apply to each selected item in the view (defaults to 'x-view-selected').
     */
    selectedClass : "x-view-selected",

/**
     * @cfg {String} emptyText
     * The text to display in the view when there is no data to display (defaults to '').
     */
    emptyText : "",

/**
     * @cfg {Boolean} deferEmptyText True to defer emptyText being applied until the store's first load
     */
    deferEmptyText: true,

/**
     * @cfg {Boolean} trackOver True to enable mouseenter and mouseleave events
     */
    trackOver: false,

/**
     * @cfg {Boolean} blockRefresh Set this to true to ignore datachanged events on the bound store. This is useful if
     * you wish to provide custom transition animations via a plugin (defaults to false)
     */
    blockRefresh: false,

    //private
    last: false,

    // private
    initComponent : function(){
        Ext.DataView.superclass.initComponent.call(this);
        if(Ext.isString(this.tpl) || Ext.isArray(this.tpl)){
            this.tpl = new Ext.XTemplate(this.tpl);
        }

        this.addEvents(

/**
             * @event beforeclick
             * Fires before a click is processed. Returns false to cancel the default action.
             * @param {Ext.DataView} this
             * @param {Number} index The index of the target node
             * @param {HTMLElement} node The target node
             * @param {Ext.EventObject} e The raw event object
             */
            "beforeclick",

/**
             * @event click
             * Fires when a template node is clicked.
             * @param {Ext.DataView} this
             * @param {Number} index The index of the target node
             * @param {HTMLElement} node The target node
             * @param {Ext.EventObject} e The raw event object
             */
            "click",

/**
             * @event mouseenter
             * Fires when the mouse enters a template node. trackOver:true or an overClass must be set to enable this event.
             * @param {Ext.DataView} this
             * @param {Number} index The index of the target node
             * @param {HTMLElement} node The target node
             * @param {Ext.EventObject} e The raw event object
             */
            "mouseenter",

/**
             * @event mouseleave
             * Fires when the mouse leaves a template node. trackOver:true or an overClass must be set to enable this event.
             * @param {Ext.DataView} this
             * @param {Number} index The index of the target node
             * @param {HTMLElement} node The target node
             * @param {Ext.EventObject} e The raw event object
             */
            "mouseleave",

/**
             * @event containerclick
             * Fires when a click occurs and it is not on a template node.
             * @param {Ext.DataView} this
             * @param {Ext.EventObject} e The raw event object
             */
            "containerclick",

/**
             * @event dblclick
             * Fires when a template node is double clicked.
             * @param {Ext.DataView} this
             * @param {Number} index The index of the target node
             * @param {HTMLElement} node The target node
             * @param {Ext.EventObject} e The raw event object
             */
            "dblclick",

/**
             * @event contextmenu
             * Fires when a template node is right clicked.
             * @param {Ext.DataView} this
             * @param {Number} index The index of the target node
             * @param {HTMLElement} node The target node
             * @param {Ext.EventObject} e The raw event object
             */
            "contextmenu",

/**
             * @event containercontextmenu
             * Fires when a right click occurs that is not on a template node.
             * @param {Ext.DataView} this
             * @param {Ext.EventObject} e The raw event object
             */
            "containercontextmenu",

/**
             * @event selectionchange
             * Fires when the selected nodes change.
             * @param {Ext.DataView} this
             * @param {Array} selections Array of the selected nodes
             */
            "selectionchange",

/**
             * @event beforeselect
             * Fires before a selection is made. If any handlers return false, the selection is cancelled.
             * @param {Ext.DataView} this
             * @param {HTMLElement} node The node to be selected
             * @param {Array} selections Array of currently selected nodes
             */
            "beforeselect"
        );

        this.store = Ext.StoreMgr.lookup(this.store);
        this.all = new Ext.CompositeElementLite();
        this.selected = new Ext.CompositeElementLite();
    },

    // private
    afterRender : function(){
        Ext.DataView.superclass.afterRender.call(this);

        this.mon(this.getTemplateTarget(), {
            "click": this.onClick,
            "dblclick": this.onDblClick,
            "contextmenu": this.onContextMenu,
            scope:this
        });

        if(this.overClass || this.trackOver){
            this.mon(this.getTemplateTarget(), {
                "mouseover": this.onMouseOver,
                "mouseout": this.onMouseOut,
                scope:this
            });
        }

        if(this.store){
            this.bindStore(this.store, true);
        }
    },

/**
     * Refreshes the view by reloading the data from the store and re-rendering the template.
     */
    refresh : function() {
        this.clearSelections(false, true);
        var el = this.getTemplateTarget();
        el.update("");
        var records = this.store.getRange();
        if(records.length < 1){
            if(!this.deferEmptyText || this.hasSkippedEmptyText){
                el.update(this.emptyText);
            }
            this.all.clear();
        }else{
            this.tpl.overwrite(el, this.collectData(records, 0));
            this.all.fill(Ext.query(this.itemSelector, el.dom));
            this.updateIndexes(0);
        }
        this.hasSkippedEmptyText = true;
    },

    getTemplateTarget: function(){
        return this.el;
    },

/**
     * Function which can be overridden to provide custom formatting for each Record that is used by this
     * DataView's {@link #tpl template} to render each node.
     * @param {Array/Object} data The raw data object that was used to create the Record.
     * @param {Number} recordIndex the index number of the Record being prepared for rendering.
     * @param {Record} record The Record being prepared for rendering.
     * @return {Array/Object} The formatted data in a format expected by the internal {@link #tpl template}'s overwrite() method.
     * (either an array if your params are numeric (i.e. {0}) or an object (i.e. {foo: 'bar'}))
     */
    prepareData : function(data){
        return data;
    },

/**
     *
Function which can be overridden which returns the data object passed to this
     * DataView's {@link #tpl template} to render the whole DataView.

     *
This is usually an Array of data objects, each element of which is processed by an
     * {@link Ext.XTemplate XTemplate} which uses '<tpl for=".">' to iterate over its supplied
     * data object as an Array. However, named properties may be placed into the data object to
     * provide non-repeating data such as headings, totals etc.

     * @param {Array} records An Array of {@link Ext.data.Record}s to be rendered into the DataView.
     * @param {Number} startIndex the index number of the Record being prepared for rendering.
     * @return {Array} An Array of data objects to be processed by a repeating XTemplate. May also
     * contain named properties.
     */
    collectData : function(records, startIndex){
        var r = [];
        for(var i = 0, len = records.length; i < len; i++){
            r[r.length] = this.prepareData(records[i].data, startIndex+i, records[i]);
        }
        return r;
    },

    // private
    bufferRender : function(records){
        var div = document.createElement('div');
        this.tpl.overwrite(div, this.collectData(records));
        return Ext.query(this.itemSelector, div);
    },

    // private
    onUpdate : function(ds, record){
        var index = this.store.indexOf(record);
        if(index > -1){
            var sel = this.isSelected(index);
            var original = this.all.elements[index];
            var node = this.bufferRender([record], index)[0];

            this.all.replaceElement(index, node, true);
            if(sel){
                this.selected.replaceElement(original, node);
                this.all.item(index).addClass(this.selectedClass);
            }
            this.updateIndexes(index, index);
        }
    },

    // private
    onAdd : function(ds, records, index){
        if(this.all.getCount() === 0){
            this.refresh();
            return;
        }
        var nodes = this.bufferRender(records, index), n, a = this.all.elements;
        if(index < this.all.getCount()){
            n = this.all.item(index).insertSibling(nodes, 'before', true);
            a.splice.apply(a, [index, 0].concat(nodes));
        }else{
            n = this.all.last().insertSibling(nodes, 'after', true);
            a.push.apply(a, nodes);
        }
        this.updateIndexes(index);
    },

    // private
    onRemove : function(ds, record, index){
        this.deselect(index);
        this.all.removeElement(index, true);
        this.updateIndexes(index);
        if (this.store.getCount() === 0){
            this.refresh();
        }
    },

/**
     * Refreshes an individual node's data from the store.
     * @param {Number} index The item's data index in the store
     */
    refreshNode : function(index){
        this.onUpdate(this.store, this.store.getAt(index));
    },

    // private
    updateIndexes : function(startIndex, endIndex){
        var ns = this.all.elements;
        startIndex = startIndex || 0;
        endIndex = endIndex || ((endIndex === 0) ? 0 : (ns.length - 1));
        for(var i = startIndex; i <= endIndex; i++){
            ns[i].viewIndex = i;
        }
    },

/**
     * Returns the store associated with this DataView.
     * @return {Ext.data.Store} The store
     */
    getStore : function(){
        return this.store;
    },

/**
     * Changes the data store bound to this view and refreshes it.
     * @param {Store} store The store to bind to this view
     */
    bindStore : function(store, initial){
        if(!initial && this.store){
            if(store !== this.store && this.store.autoDestroy){
                this.store.destroy();
            }else{
                this.store.un("beforeload", this.onBeforeLoad, this);
                this.store.un("datachanged", this.onDataChanged, this);
                this.store.un("add", this.onAdd, this);
                this.store.un("remove", this.onRemove, this);
                this.store.un("update", this.onUpdate, this);
                this.store.un("clear", this.refresh, this);
            }
            if(!store){
                this.store = null;
            }
        }
        if(store){
            store = Ext.StoreMgr.lookup(store);
            store.on({
                scope: this,
                beforeload: this.onBeforeLoad,
                datachanged: this.onDataChanged,
                add: this.onAdd,
                remove: this.onRemove,
                update: this.onUpdate,
                clear: this.refresh
            });
        }
        this.store = store;
        if(store){
            this.refresh();
        }
    },

    /**
     * @private
     * Calls this.refresh if this.blockRefresh is not true
     */
    onDataChanged: function() {
        if (this.blockRefresh !== true) {
            this.refresh.apply(this, arguments);
        }
    },

/**
     * Returns the template node the passed child belongs to, or null if it doesn't belong to one.
     * @param {HTMLElement} node
     * @return {HTMLElement} The template node
     */
    findItemFromChild : function(node){
        return Ext.fly(node).findParent(this.itemSelector, this.getTemplateTarget());
    },

    // private
    onClick : function(e){
        var item = e.getTarget(this.itemSelector, this.getTemplateTarget());
        if(item){
            var index = this.indexOf(item);
            if(this.onItemClick(item, index, e) !== false){
                this.fireEvent("click", this, index, item, e);
            }
        }else{
            if(this.fireEvent("containerclick", this, e) !== false){
                this.onContainerClick(e);
            }
        }
    },

    onContainerClick : function(e){
        this.clearSelections();
    },

    // private
    onContextMenu : function(e){
        var item = e.getTarget(this.itemSelector, this.getTemplateTarget());
        if(item){
            this.fireEvent("contextmenu", this, this.indexOf(item), item, e);
        }else{
            this.fireEvent("containercontextmenu", this, e);
        }
    },

    // private
    onDblClick : function(e){
        var item = e.getTarget(this.itemSelector, this.getTemplateTarget());
        if(item){
            this.fireEvent("dblclick", this, this.indexOf(item), item, e);
        }
    },

    // private
    onMouseOver : function(e){
        var item = e.getTarget(this.itemSelector, this.getTemplateTarget());
        if(item && item !== this.lastItem){
            this.lastItem = item;
            Ext.fly(item).addClass(this.overClass);
            this.fireEvent("mouseenter", this, this.indexOf(item), item, e);
        }
    },

    // private
    onMouseOut : function(e){
        if(this.lastItem){
            if(!e.within(this.lastItem, true, true)){
                Ext.fly(this.lastItem).removeClass(this.overClass);
                this.fireEvent("mouseleave", this, this.indexOf(this.lastItem), this.lastItem, e);
                delete this.lastItem;
            }
        }
    },

    // private
    onItemClick : function(item, index, e){
        if(this.fireEvent("beforeclick", this, index, item, e) === false){
            return false;
        }
        if(this.multiSelect){
            this.doMultiSelection(item, index, e);
            e.preventDefault();
        }else if(this.singleSelect){
            this.doSingleSelection(item, index, e);
            e.preventDefault();
        }
        return true;
    },

    // private
    doSingleSelection : function(item, index, e){
        if(e.ctrlKey && this.isSelected(index)){
            this.deselect(index);
        }else{
            this.select(index, false);
        }
    },

    // private
    doMultiSelection : function(item, index, e){
        if(e.shiftKey && this.last !== false){
            var last = this.last;
            this.selectRange(last, index, e.ctrlKey);
            this.last = last; // reset the last
        }else{
            if((e.ctrlKey||this.simpleSelect) && this.isSelected(index)){
                this.deselect(index);
            }else{
                this.select(index, e.ctrlKey || e.shiftKey || this.simpleSelect);
            }
        }
    },

/**
     * Gets the number of selected nodes.
     * @return {Number} The node count
     */
    getSelectionCount : function(){
        return this.selected.getCount();
    },

/**
     * Gets the currently selected nodes.
     * @return {Array} An array of HTMLElements
     */
    getSelectedNodes : function(){
        return this.selected.elements;
    },

/**
     * Gets the indexes of the selected nodes.
     * @return {Array} An array of numeric indexes
     */
    getSelectedIndexes : function(){
        var indexes = [], s = this.selected.elements;
        for(var i = 0, len = s.length; i < len; i++){
            indexes.push(s[i].viewIndex);
        }
        return indexes;
    },

/**
     * Gets an array of the selected records
     * @return {Array} An array of {@link Ext.data.Record} objects
     */
    getSelectedRecords : function(){
        var r = [], s = this.selected.elements;
        for(var i = 0, len = s.length; i < len; i++){
            r[r.length] = this.store.getAt(s[i].viewIndex);
        }
        return r;
    },

/**
     * Gets an array of the records from an array of nodes
     * @param {Array} nodes The nodes to evaluate
     * @return {Array} records The {@link Ext.data.Record} objects
     */
    getRecords : function(nodes){
        var r = [], s = nodes;
        for(var i = 0, len = s.length; i < len; i++){
            r[r.length] = this.store.getAt(s[i].viewIndex);
        }
        return r;
    },

/**
     * Gets a record from a node
     * @param {HTMLElement} node The node to evaluate
     * @return {Record} record The {@link Ext.data.Record} object
     */
    getRecord : function(node){
        return this.store.getAt(node.viewIndex);
    },

/**
     * Clears all selections.
     * @param {Boolean} suppressEvent (optional) True to skip firing of the selectionchange event
     */
    clearSelections : function(suppressEvent, skipUpdate){
        if((this.multiSelect || this.singleSelect) && this.selected.getCount() > 0){
            if(!skipUpdate){
                this.selected.removeClass(this.selectedClass);
            }
            this.selected.clear();
            this.last = false;
            if(!suppressEvent){
                this.fireEvent("selectionchange", this, this.selected.elements);
            }
        }
    },

/**
     * Returns true if the passed node is selected, else false.
     * @param {HTMLElement/Number/Ext.data.Record} node The node, node index or record to check
     * @return {Boolean} True if selected, else false
     */
    isSelected : function(node){
        return this.selected.contains(this.getNode(node));
    },

/**
     * Deselects a node.
     * @param {HTMLElement/Number/Record} node The node, node index or record to deselect
     */
    deselect : function(node){
        if(this.isSelected(node)){
            node = this.getNode(node);
            this.selected.removeElement(node);
            if(this.last == node.viewIndex){
                this.last = false;
            }
            Ext.fly(node).removeClass(this.selectedClass);
            this.fireEvent("selectionchange", this, this.selected.elements);
        }
    },

/**
     * Selects a set of nodes.
     * @param {Array/HTMLElement/String/Number/Ext.data.Record} nodeInfo An HTMLElement template node, index of a template node,
     * id of a template node, record associated with a node or an array of any of those to select
     * @param {Boolean} keepExisting (optional) true to keep existing selections
     * @param {Boolean} suppressEvent (optional) true to skip firing of the selectionchange vent
     */
    select : function(nodeInfo, keepExisting, suppressEvent){
        if(Ext.isArray(nodeInfo)){
            if(!keepExisting){
                this.clearSelections(true);
            }
            for(var i = 0, len = nodeInfo.length; i < len; i++){
                this.select(nodeInfo[i], true, true);
            }
            if(!suppressEvent){
                this.fireEvent("selectionchange", this, this.selected.elements);
            }
        } else{
            var node = this.getNode(nodeInfo);
            if(!keepExisting){
                this.clearSelections(true);
            }
            if(node && !this.isSelected(node)){
                if(this.fireEvent("beforeselect", this, node, this.selected.elements) !== false){
                    Ext.fly(node).addClass(this.selectedClass);
                    this.selected.add(node);
                    this.last = node.viewIndex;
                    if(!suppressEvent){
                        this.fireEvent("selectionchange", this, this.selected.elements);
                    }
                }
            }
        }
    },

/**
     * Selects a range of nodes. All nodes between start and end are selected.
     * @param {Number} start The index of the first node in the range
     * @param {Number} end The index of the last node in the range
     * @param {Boolean} keepExisting (optional) True to retain existing selections
     */
    selectRange : function(start, end, keepExisting){
        if(!keepExisting){
            this.clearSelections(true);
        }
        this.select(this.getNodes(start, end), true);
    },

/**
     * Gets a template node.
     * @param {HTMLElement/String/Number/Ext.data.Record} nodeInfo An HTMLElement template node, index of a template node,
     * the id of a template node or the record associated with the node.
     * @return {HTMLElement} The node or null if it wasn't found
     */
    getNode : function(nodeInfo){
        if(Ext.isString(nodeInfo)){
            return document.getElementById(nodeInfo);
        }else if(Ext.isNumber(nodeInfo)){
            return this.all.elements[nodeInfo];
        }else if(nodeInfo instanceof Ext.data.Record){
            var idx = this.store.indexOf(nodeInfo);
            return this.all.elements[idx];
        }
        return nodeInfo;
    },

/**
     * Gets a range nodes.
     * @param {Number} start (optional) The index of the first node in the range
     * @param {Number} end (optional) The index of the last node in the range
     * @return {Array} An array of nodes
     */
    getNodes : function(start, end){
        var ns = this.all.elements;
        start = start || 0;
        end = !Ext.isDefined(end) ? Math.max(ns.length - 1, 0) : end;
        var nodes = [], i;
        if(start <= end){
            for(i = start; i <= end && ns[i]; i++){
                nodes.push(ns[i]);
            }
        } else{
            for(i = start; i >= end && ns[i]; i--){
                nodes.push(ns[i]);
            }
        }
        return nodes;
    },

/**
     * Finds the index of the passed node.
     * @param {HTMLElement/String/Number/Record} nodeInfo An HTMLElement template node, index of a template node, the id of a template node
     * or a record associated with a node.
     * @return {Number} The index of the node or -1
     */
    indexOf : function(node){
        node = this.getNode(node);
        if(Ext.isNumber(node.viewIndex)){
            return node.viewIndex;
        }
        return this.all.indexOf(node);
    },

    // private
    onBeforeLoad : function(){
        if(this.loadingText){
            this.clearSelections(false, true);
            this.getTemplateTarget().update('
'+this.loadingText+'
');
            this.all.clear();
        }
    },

    onDestroy : function(){
        this.all.clear();
        this.selected.clear();
        Ext.DataView.superclass.onDestroy.call(this);
        this.bindStore(null);
    }
});

/**
 * Changes the data store bound to this view and refreshes it. (deprecated in favor of bindStore)
 * @param {Store} store The store to bind to this view
 */
Ext.DataView.prototype.setStore = Ext.DataView.prototype.bindStore;

Ext.reg('dataview', Ext.DataView);


The source code

/*!
 * licensing@extjs.com
 * http://www.extjs.com/license
 */

/**
 * @class Ext.data.DataWriter
 *
Ext.data.DataWriter facilitates create, update, and destroy actions between
 * an Ext.data.Store and a server-side framework. A Writer enabled Store will
 * automatically manage the Ajax requests to perform CRUD actions on a Store.

 *
Ext.data.DataWriter is an abstract base class which is intended to be extended
 * and should not be created directly. For existing implementations, see
 * {@link Ext.data.JsonWriter}.

 *
Creating a writer is simple:

 *

var writer = new Ext.data.JsonWriter({
    encode: false   // <--- false causes data to be printed to jsonData config-property of Ext.Ajax#reqeust
});
 *

 * *
Same old JsonReader as Ext-2.x:

 *

var reader = new Ext.data.JsonReader({idProperty: 'id'}, [{name: 'first'}, {name: 'last'}, {name: 'email'}]);
 *

 *
 *
The proxy for a writer enabled store can be configured with a simple url:

 *

// Create a standard HttpProxy instance.
var proxy = new Ext.data.HttpProxy({
    url: 'app.php/users'    // <--- Supports "provides"-type urls, such as '/users.json', '/products.xml' (Hello Rails/Merb)
});
 *

 *
For finer grained control, the proxy may also be configured with an API:

 *

// Maximum flexibility with the API-configuration
var proxy = new Ext.data.HttpProxy({
    api: {
        read    : 'app.php/users/read',
        create  : 'app.php/users/create',
        update  : 'app.php/users/update',
        destroy : {  // <--- Supports object-syntax as well
            url: 'app.php/users/destroy',
            method: "DELETE"
        }
    }
});
 *

 *
Pulling it all together into a Writer-enabled Store:

 *

var store = new Ext.data.Store({
    proxy: proxy,
    reader: reader,
    writer: writer,
    autoLoad: true,
    autoSave: true  // -- Cell-level updates.
});
 *

 *
Initiating write-actions automatically, using the existing Ext2.0 Store/Record API:

 *

var rec = store.getAt(0);
rec.set('email', 'foo@bar.com');  // <--- Immediately initiates an UPDATE action through configured proxy.

store.remove(rec);  // <---- Immediately initiates a DESTROY action through configured proxy.
 *

 *
For record/batch updates, use the Store-configuration {@link Ext.data.Store#autoSave autoSave:false}

 *

var store = new Ext.data.Store({
    proxy: proxy,
    reader: reader,
    writer: writer,
    autoLoad: true,
    autoSave: false  // -- disable cell-updates
});

var urec = store.getAt(0);
urec.set('email', 'foo@bar.com');

var drec = store.getAt(1);
store.remove(drec);

// Push the button!
store.save();
 *

 * @constructor Create a new DataWriter
 * @param {Object} meta Metadata configuration options (implementation-specific)
 * @param {Object} recordType Either an Array of field definition objects as specified
 * in {@link Ext.data.Record#create}, or an {@link Ext.data.Record} object created
 * using {@link Ext.data.Record#create}.
 */
Ext.data.DataWriter = function(config){
    Ext.apply(this, config);
};
Ext.data.DataWriter.prototype = {

/**
     * @cfg {Boolean} writeAllFields
     * false by default.  Set true to have DataWriter return ALL fields of a modified
     * record -- not just those that changed.
     * false to have DataWriter only request modified fields from a record.
     */
    writeAllFields : false,

/**
     * @cfg {Boolean} listful
     * false by default.  Set true to have the DataWriter always write HTTP params as a list,
     * even when acting upon a single record.
     */
    listful : false,    // <-- listful is actually not used internally here in DataWriter.  @see Ext.data.Store#execute.

/**
     * Compiles a Store recordset into a data-format defined by an extension such as {@link Ext.data.JsonWriter} or {@link Ext.data.XmlWriter} in preparation for a {@link Ext.data.Api#actions server-write action}.  The first two params are similar similar in nature to {@link Ext#apply},
     * Where the first parameter is the receiver of paramaters and the second, baseParams, the source.
     * @param {Object} params The request-params receiver.
     * @param {Object} baseParams as defined by {@link Ext.data.Store#baseParams}.  The baseParms must be encoded by the extending class, eg: {@link Ext.data.JsonWriter}, {@link Ext.data.XmlWriter}.
     * @param {String} action [{@link Ext.data.Api#actions create|update|destroy}]
     * @param {Record/Record[]} rs The recordset to write, the subject(s) of the write action.
     */
    apply : function(params, baseParams, action, rs) {
        var data    = [],
        renderer    = action + 'Record';
        // TODO implement @cfg listful here
        if (Ext.isArray(rs)) {
            Ext.each(rs, function(rec){
                data.push(this[renderer](rec));
            }, this);
        }
        else if (rs instanceof Ext.data.Record) {
            data = this[renderer](rs);
        }
        this.render(params, baseParams, data);
    },

/**
     * abstract method meant to be overridden by all DataWriter extensions.  It's the extension's job to apply the "data" to the "params".
     * The data-object provided to render is populated with data according to the meta-info defined in the user's DataReader config,
     * @param {String} action [Ext.data.Api.actions.create|read|update|destroy]
     * @param {Record[]} rs Store recordset
     * @param {Object} params Http params to be sent to server.
     * @param {Object} data object populated according to DataReader meta-data.
     */
    render : Ext.emptyFn,

/**
     * @cfg {Function} updateRecord Abstract method that should be implemented in all subclasses
     * (e.g.: {@link Ext.data.JsonWriter#updateRecord JsonWriter.updateRecord}
     */
    updateRecord : Ext.emptyFn,

/**
     * @cfg {Function} createRecord Abstract method that should be implemented in all subclasses
     * (e.g.: {@link Ext.data.JsonWriter#createRecord JsonWriter.createRecord})
     */
    createRecord : Ext.emptyFn,

/**
     * @cfg {Function} destroyRecord Abstract method that should be implemented in all subclasses
     * (e.g.: {@link Ext.data.JsonWriter#destroyRecord JsonWriter.destroyRecord})
     */
    destroyRecord : Ext.emptyFn,

/**
     * Converts a Record to a hash, taking into account the state of the Ext.data.Record along with configuration properties
     * related to its rendering, such as {@link #writeAllFields}, {@link Ext.data.Record#phantom phantom}, {@link Ext.data.Record#getChanges getChanges} and
     * {@link Ext.data.DataReader#idProperty idProperty}
     * @param {Ext.data.Record} rec The Record from which to create a hash.
     * @param {Object} config NOT YET IMPLEMENTED.  Will implement an exlude/only configuration for fine-control over which fields do/don't get rendered.
     * @return {Object}
     * @protected
     * TODO Implement excludes/only configuration with 2nd param?
     */
    toHash : function(rec, config) {
        var map = rec.fields.map,
            data = {},
            raw = (this.writeAllFields === false && rec.phantom === false) ? rec.getChanges() : rec.data,
            m;
        Ext.iterate(raw, function(prop, value){
            if((m = map[prop])){
                data[m.mapping ? m.mapping : m.name] = value;
            }
        });
        // we don't want to write Ext auto-generated id to hash.  Careful not to remove it on Models not having auto-increment pk though.
        // We can tell its not auto-increment if the user defined a DataReader field for it *and* that field's value is non-empty.
        // we could also do a RegExp here for the Ext.data.Record AUTO_ID prefix.
        if (rec.phantom) {
            if (rec.fields.containsKey(this.meta.idProperty) && Ext.isEmpty(rec.data[this.meta.idProperty])) {
                delete data[this.meta.idProperty];
            }
        } else {
            data[this.meta.idProperty] = rec.id
        }
        return data;
    },

/**
     * Converts a {@link Ext.data.DataWriter#toHash Hashed} {@link Ext.data.Record} to fields-array array suitable
     * for encoding to xml via XTemplate, eg:

<tpl for="."><{name}>{value}</{name}</tpl>

     * eg, non-phantom:

{id: 1, first: 'foo', last: 'bar'} --> [{name: 'id', value: 1}, {name: 'first', value: 'foo'}, {name: 'last', value: 'bar'}]

     * {@link Ext.data.Record#phantom Phantom} records will have had their idProperty omitted in {@link #toHash} if determined to be auto-generated.
     * Non AUTOINCREMENT pks should have been protected.
     * @param {Hash} data Hashed by Ext.data.DataWriter#toHash
     * @return {[Object]} Array of attribute-objects.
     * @protected
     */
    toArray : function(data) {
        var fields = [];
        Ext.iterate(data, function(k, v) {fields.push({name: k, value: v});},this);
        return fields;
    }
};


The source code

/*!
 * licensing@extjs.com
 * http://www.extjs.com/license
 */

/**
 * @class Date
 *
 * The date parsing and formatting syntax contains a subset of
 * PHP's date() function, and the formats that are
 * supported will provide results equivalent to their PHP versions.
 *
 * The following is a list of all currently supported formats:
 *
Format  Description                                                               Example returned values
------  -----------------------------------------------------------------------   -----------------------
  d     Day of the month, 2 digits with leading zeros                             01 to 31
  D     A short textual representation of the day of the week                     Mon to Sun
  j     Day of the month without leading zeros                                    1 to 31
  l     A full textual representation of the day of the week                      Sunday to Saturday
  N     ISO-8601 numeric representation of the day of the week                    1 (for Monday) through 7 (for Sunday)
  S     English ordinal suffix for the day of the month, 2 characters             st, nd, rd or th. Works well with j
  w     Numeric representation of the day of the week                             0 (for Sunday) to 6 (for Saturday)
  z     The day of the year (starting from 0)                                     0 to 364 (365 in leap years)
  W     ISO-8601 week number of year, weeks starting on Monday                    01 to 53
  F     A full textual representation of a month, such as January or March        January to December
  m     Numeric representation of a month, with leading zeros                     01 to 12
  M     A short textual representation of a month                                 Jan to Dec
  n     Numeric representation of a month, without leading zeros                  1 to 12
  t     Number of days in the given month                                         28 to 31
  L     Whether it's a leap year                                                  1 if it is a leap year, 0 otherwise.
  o     ISO-8601 year number (identical to (Y), but if the ISO week number (W)    Examples: 1998 or 2004
        belongs to the previous or next year, that year is used instead)
  Y     A full numeric representation of a year, 4 digits                         Examples: 1999 or 2003
  y     A two digit representation of a year                                      Examples: 99 or 03
  a     Lowercase Ante meridiem and Post meridiem                                 am or pm
  A     Uppercase Ante meridiem and Post meridiem                                 AM or PM
  g     12-hour format of an hour without leading zeros                           1 to 12
  G     24-hour format of an hour without leading zeros                           0 to 23
  h     12-hour format of an hour with leading zeros                              01 to 12
  H     24-hour format of an hour with leading zeros                              00 to 23
  i     Minutes, with leading zeros                                               00 to 59
  s     Seconds, with leading zeros                                               00 to 59
  u     Decimal fraction of a second                                              Examples:
        (minimum 1 digit, arbitrary number of digits allowed)                     001 (i.e. 0.001s) or
                                                                                100 (i.e. 0.100s) or
                                                                                999 (i.e. 0.999s) or
                                                                                999876543210 (i.e. 0.999876543210s)
  O     Difference to Greenwich time (GMT) in hours and minutes                   Example: +1030
  P     Difference to Greenwich time (GMT) with colon between hours and minutes   Example: -08:00
  T     Timezone abbreviation of the machine running the code                     Examples: EST, MDT, PDT ...
  Z     Timezone offset in seconds (negative if west of UTC, positive if east)    -43200 to 50400
  c     ISO 8601 date
        Notes:                                                                    Examples:
        1) If unspecified, the month / day defaults to the current month / day,   1991 or
           the time defaults to midnight, while the timezone defaults to the      1992-10 or
           browser's timezone. If a time is specified, it must include both hours 1993-09-20 or
           and minutes. The "T" delimiter, seconds, milliseconds and timezone     1994-08-19T16:20+01:00 or
           are optional.                                                          1995-07-18T17:21:28-02:00 or
        2) The decimal fraction of a second, if specified, must contain at        1996-06-17T18:22:29.98765+03:00 or
           least 1 digit (there is no limit to the maximum number                 1997-05-16T19:23:30,12345-0400 or
           of digits allowed), and may be delimited by either a '.' or a ','      1998-04-15T20:24:31.2468Z or
        Refer to the examples on the right for the various levels of              1999-03-14T20:24:32Z or
        date-time granularity which are supported, or see                         2000-02-13T21:25:33
        http://www.w3.org/TR/NOTE-datetime for more info.                         2001-01-12 22:26:34
  U     Seconds since the Unix Epoch (January 1 1970 00:00:00 GMT)                1193432466 or -2138434463
  M$    Microsoft AJAX serialized dates                                           \/Date(1238606590509)\/ (i.e. UTC milliseconds since epoch) or
                                                                                \/Date(1238606590509+0800)\/

 *
 * Example usage (note that you must escape format specifiers with '\\' to render them as character literals):
 *

// Sample date:
// 'Wed Jan 10 2007 15:05:01 GMT-0600 (Central Standard Time)'

var dt = new Date('1/10/2007 03:05:01 PM GMT-0600');
document.write(dt.format('Y-m-d'));                           // 2007-01-10
document.write(dt.format('F j, Y, g:i a'));                   // January 10, 2007, 3:05 pm
document.write(dt.format('l, \\t\\he jS \\of F Y h:i:s A'));  // Wednesday, the 10th of January 2007 03:05:01 PM

 *
 * Here are some standard date/time patterns that you might find helpful.  They
 * are not part of the source of Date.js, but to use them you can simply copy this
 * block of code into any script that is included after Date.js and they will also become
 * globally available on the Date object.  Feel free to add or remove patterns as needed in your code.
 *

Date.patterns = {
    ISO8601Long:"Y-m-d H:i:s",
    ISO8601Short:"Y-m-d",
    ShortDate: "n/j/Y",
    LongDate: "l, F d, Y",
    FullDateTime: "l, F d, Y g:i:s A",
    MonthDay: "F d",
    ShortTime: "g:i A",
    LongTime: "g:i:s A",
    SortableDateTime: "Y-m-d\\TH:i:s",
    UniversalSortableDateTime: "Y-m-d H:i:sO",
    YearMonth: "F, Y"
};

 *
 * Example usage:
 *

var dt = new Date();
document.write(dt.format(Date.patterns.ShortDate));

 *
Developer-written, custom formats may be used by supplying both a formatting and a parsing function
 * which perform to specialized requirements. The functions are stored in {@link #parseFunctions} and {@link #formatFunctions}.

 */

/*
 * Most of the date-formatting functions below are the excellent work of Baron Schwartz.
 * (see http://www.xaprb.com/blog/2005/12/12/javascript-closures-for-runtime-efficiency/)
 * They generate precompiled functions from format patterns instead of parsing and
 * processing each pattern every time a date is formatted. These functions are available
 * on every Date object.
 */

(function() {

/**
 * Global flag which determines if strict date parsing should be used.
 * Strict date parsing will not roll-over invalid dates, which is the
 * default behaviour of javascript Date objects.
 * (see {@link #parseDate} for more information)
 * Defaults to false.
 * @static
 * @type Boolean
*/
Date.useStrict = false;

// create private copy of Ext's String.format() method
// - to remove unnecessary dependency
// - to resolve namespace conflict with M$-Ajax's implementation
function xf(format) {
    var args = Array.prototype.slice.call(arguments, 1);
    return format.replace(/\{(\d+)\}/g, function(m, i) {
        return args[i];
    });
}

// private
Date.formatCodeToRegex = function(character, currentGroup) {
    // Note: currentGroup - position in regex result array (see notes for Date.parseCodes below)
    var p = Date.parseCodes[character];

    if (p) {
      p = typeof p == 'function'? p() : p;
      Date.parseCodes[character] = p; // reassign function result to prevent repeated execution
    }

    return p ? Ext.applyIf({
      c: p.c ? xf(p.c, currentGroup || "{0}") : p.c
    }, p) : {
        g:0,
        c:null,
        s:Ext.escapeRe(character) // treat unrecognised characters as literals
    }
};

// private shorthand for Date.formatCodeToRegex since we'll be using it fairly often
var $f = Date.formatCodeToRegex;

Ext.apply(Date, {

/**
     *
An object hash in which each property is a date parsing function. The property name is the
     * format string which that function parses.

     *
This object is automatically populated with date parsing functions as
     * date formats are requested for Ext standard formatting strings.

     *
Custom parsing functions may be inserted into this object, keyed by a name which from then on
     * may be used as a format string to {@link #parseDate}.

     *
Example:

Date.parseFunctions['x-date-format'] = myDateParser;

     *
A parsing function should return a Date object, and is passed the following parameters:

     *
  • date : String
    The date string to parse.
    •
     *
  • strict : Boolean
    True to validate date strings while parsing
     * (i.e. prevent javascript Date "rollover") (The default must be false).
     * Invalid date strings should return null when parsed.
    •
     *

     *
To enable Dates to also be formatted according to that format, a corresponding
     * formatting function must be placed into the {@link #formatFunctions} property.
     * @property parseFunctions
     * @static
     * @type Object
     */
    parseFunctions: {
        "M$": function(input, strict) {
            // note: the timezone offset is ignored since the M$ Ajax server sends
            // a UTC milliseconds-since-Unix-epoch value (negative values are allowed)
            var re = new RegExp('\\/Date\\(([-+])?(\\d+)(?:[+-]\\d{4})?\\)\\/');
            var r = (input || '').match(re);
            return r? new Date(((r[1] || '') + r[2]) * 1) : null;
        }
    },
    parseRegexes: [],

/**
     *
An object hash in which each property is a date formatting function. The property name is the
     * format string which corresponds to the produced formatted date string.

     *
This object is automatically populated with date formatting functions as
     * date formats are requested for Ext standard formatting strings.

     *
Custom formatting functions may be inserted into this object, keyed by a name which from then on
     * may be used as a format string to {@link #format}. Example:

Date.formatFunctions['x-date-format'] = myDateFormatter;

     *
A formatting function should return a string representation of the passed Date object, and is passed the following parameters:

     *
  • date : Date
    The Date to format.
    •
     *

     *
To enable date strings to also be parsed according to that format, a corresponding
     * parsing function must be placed into the {@link #parseFunctions} property.
     * @property formatFunctions
     * @static
     * @type Object
     */
    formatFunctions: {
        "M$": function() {
            // UTC milliseconds since Unix epoch (M$-AJAX serialized date format (MRSF))
            return '\\/Date(' + this.getTime() + ')\\/';
        }
    },

    y2kYear : 50,

/**
     * Date interval constant
     * @static
     * @type String
     */
    MILLI : "ms",

/**
     * Date interval constant
     * @static
     * @type String
     */
    SECOND : "s",

/**
     * Date interval constant
     * @static
     * @type String
     */
    MINUTE : "mi",

/** Date interval constant
     * @static
     * @type String
     */
    HOUR : "h",

/**
     * Date interval constant
     * @static
     * @type String
     */
    DAY : "d",

/**
     * Date interval constant
     * @static
     * @type String
     */
    MONTH : "mo",

/**
     * Date interval constant
     * @static
     * @type String
     */
    YEAR : "y",

/**
     *
An object hash containing default date values used during date parsing.

     *
The following properties are available:

     *
  • y : Number
    The default year value. (defaults to undefined)
    •
     *
  • m : Number
    The default 1-based month value. (defaults to undefined)
    •
     *
  • d : Number
    The default day value. (defaults to undefined)
    •
     *
  • h : Number
    The default hour value. (defaults to undefined)
    •
     *
  • i : Number
    The default minute value. (defaults to undefined)
    •
     *
  • s : Number
    The default second value. (defaults to undefined)
    •
     *
  • ms : Number
    The default millisecond value. (defaults to undefined)
    •
     *

     *
Override these properties to customize the default date values used by the {@link #parseDate} method.

     *
Note: In countries which experience Daylight Saving Time (i.e. DST), the h, i, s
     * and ms properties may coincide with the exact time in which DST takes effect.
     * It is the responsiblity of the developer to account for this.

     * Example Usage:
     *

// set default day value to the first day of the month
Date.defaults.d = 1;

// parse a February date string containing only year and month values.
// setting the default day value to 1 prevents weird date rollover issues
// when attempting to parse the following date string on, for example, March 31st 2009.
Date.parseDate('2009-02', 'Y-m'); // returns a Date object representing February 1st 2009

     * @property defaults
     * @static
     * @type Object
     */
    defaults: {},

/**
     * An array of textual day names.
     * Override these values for international dates.
     * Example:
     *

Date.dayNames = [
    'SundayInYourLang',
    'MondayInYourLang',
    ...
];

     * @type Array
     * @static
     */
    dayNames : [
        "Sunday",
        "Monday",
        "Tuesday",
        "Wednesday",
        "Thursday",
        "Friday",
        "Saturday"
    ],

/**
     * An array of textual month names.
     * Override these values for international dates.
     * Example:
     *

Date.monthNames = [
    'JanInYourLang',
    'FebInYourLang',
    ...
];

     * @type Array
     * @static
     */
    monthNames : [
        "January",
        "February",
        "March",
        "April",
        "May",
        "June",
        "July",
        "August",
        "September",
        "October",
        "November",
        "December"
    ],

/**
     * An object hash of zero-based javascript month numbers (with short month names as keys. note: keys are case-sensitive).
     * Override these values for international dates.
     * Example:
     *

Date.monthNumbers = {
    'ShortJanNameInYourLang':0,
    'ShortFebNameInYourLang':1,
    ...
};

     * @type Object
     * @static
     */
    monthNumbers : {
        Jan:0,
        Feb:1,
        Mar:2,
        Apr:3,
        May:4,
        Jun:5,
        Jul:6,
        Aug:7,
        Sep:8,
        Oct:9,
        Nov:10,
        Dec:11
    },

/**
     * Get the short month name for the given month number.
     * Override this function for international dates.
     * @param {Number} month A zero-based javascript month number.
     * @return {String} The short month name.
     * @static
     */
    getShortMonthName : function(month) {
        return Date.monthNames[month].substring(0, 3);
    },

/**
     * Get the short day name for the given day number.
     * Override this function for international dates.
     * @param {Number} day A zero-based javascript day number.
     * @return {String} The short day name.
     * @static
     */
    getShortDayName : function(day) {
        return Date.dayNames[day].substring(0, 3);
    },

/**
     * Get the zero-based javascript month number for the given short/full month name.
     * Override this function for international dates.
     * @param {String} name The short/full month name.
     * @return {Number} The zero-based javascript month number.
     * @static
     */
    getMonthNumber : function(name) {
        // handle camel casing for english month names (since the keys for the Date.monthNumbers hash are case sensitive)
        return Date.monthNumbers[name.substring(0, 1).toUpperCase() + name.substring(1, 3).toLowerCase()];
    },

/**
     * The base format-code to formatting-function hashmap used by the {@link #format} method.
     * Formatting functions are strings (or functions which return strings) which
     * will return the appropriate value when evaluated in the context of the Date object
     * from which the {@link #format} method is called.
     * Add to / override these mappings for custom date formatting.
     * Note: Date.format() treats characters as literals if an appropriate mapping cannot be found.
     * Example:
     *

Date.formatCodes.x = "String.leftPad(this.getDate(), 2, '0')";
(new Date()).format("X"); // returns the current day of the month

     * @type Object
     * @static
     */
    formatCodes : {
        d: "String.leftPad(this.getDate(), 2, '0')",
        D: "Date.getShortDayName(this.getDay())", // get localised short day name
        j: "this.getDate()",
        l: "Date.dayNames[this.getDay()]",
        N: "(this.getDay() ? this.getDay() : 7)",
        S: "this.getSuffix()",
        w: "this.getDay()",
        z: "this.getDayOfYear()",
        W: "String.leftPad(this.getWeekOfYear(), 2, '0')",
        F: "Date.monthNames[this.getMonth()]",
        m: "String.leftPad(this.getMonth() + 1, 2, '0')",
        M: "Date.getShortMonthName(this.getMonth())", // get localised short month name
        n: "(this.getMonth() + 1)",
        t: "this.getDaysInMonth()",
        L: "(this.isLeapYear() ? 1 : 0)",
        o: "(this.getFullYear() + (this.getWeekOfYear() == 1 && this.getMonth() > 0 ? +1 : (this.getWeekOfYear() >= 52 && this.getMonth() < 11 ? -1 : 0)))",
        Y: "this.getFullYear()",
        y: "('' + this.getFullYear()).substring(2, 4)",
        a: "(this.getHours() < 12 ? 'am' : 'pm')",
        A: "(this.getHours() < 12 ? 'AM' : 'PM')",
        g: "((this.getHours() % 12) ? this.getHours() % 12 : 12)",
        G: "this.getHours()",
        h: "String.leftPad((this.getHours() % 12) ? this.getHours() % 12 : 12, 2, '0')",
        H: "String.leftPad(this.getHours(), 2, '0')",
        i: "String.leftPad(this.getMinutes(), 2, '0')",
        s: "String.leftPad(this.getSeconds(), 2, '0')",
        u: "String.leftPad(this.getMilliseconds(), 3, '0')",
        O: "this.getGMTOffset()",
        P: "this.getGMTOffset(true)",
        T: "this.getTimezone()",
        Z: "(this.getTimezoneOffset() * -60)",

        c: function() { // ISO-8601 -- GMT format
            for (var c = "Y-m-dTH:i:sP", code = [], i = 0, l = c.length; i < l; ++i) {
                var e = c.charAt(i);
                code.push(e == "T" ? "'T'" : Date.getFormatCode(e)); // treat T as a character literal
            }
            return code.join(" + ");
        },
        /*
        c: function() { // ISO-8601 -- UTC format
            return [
              "this.getUTCFullYear()", "'-'",
              "String.leftPad(this.getUTCMonth() + 1, 2, '0')", "'-'",
              "String.leftPad(this.getUTCDate(), 2, '0')",
              "'T'",
              "String.leftPad(this.getUTCHours(), 2, '0')", "':'",
              "String.leftPad(this.getUTCMinutes(), 2, '0')", "':'",
              "String.leftPad(this.getUTCSeconds(), 2, '0')",
              "'Z'"
            ].join(" + ");
        },
        */

        U: "Math.round(this.getTime() / 1000)"
    },

/**
     * Checks if the passed Date parameters will cause a javascript Date "rollover".
     * @param {Number} year 4-digit year
     * @param {Number} month 1-based month-of-year
     * @param {Number} day Day of month
     * @param {Number} hour (optional) Hour
     * @param {Number} minute (optional) Minute
     * @param {Number} second (optional) Second
     * @param {Number} millisecond (optional) Millisecond
     * @return {Boolean} true if the passed parameters do not cause a Date "rollover", false otherwise.
     * @static
     */
    isValid : function(y, m, d, h, i, s, ms) {
        // setup defaults
        h = h || 0;
        i = i || 0;
        s = s || 0;
        ms = ms || 0;

        var dt = new Date(y, m - 1, d, h, i, s, ms);

        return y == dt.getFullYear() &&
            m == dt.getMonth() + 1 &&
            d == dt.getDate() &&
            h == dt.getHours() &&
            i == dt.getMinutes() &&
            s == dt.getSeconds() &&
            ms == dt.getMilliseconds();
    },

/**
     * Parses the passed string using the specified date format.
     * Note that this function expects normal calendar dates, meaning that months are 1-based (i.e. 1 = January).
     * The {@link #defaults} hash will be used for any date value (i.e. year, month, day, hour, minute, second or millisecond)
     * which cannot be found in the passed string. If a corresponding default date value has not been specified in the {@link #defaults} hash,
     * the current date's year, month, day or DST-adjusted zero-hour time value will be used instead.
     * Keep in mind that the input date string must precisely match the specified format string
     * in order for the parse operation to be successful (failed parse operations return a null value).
     *
Example:

//dt = Fri May 25 2007 (current date)
var dt = new Date();

//dt = Thu May 25 2006 (today's month/day in 2006)
dt = Date.parseDate("2006", "Y");

//dt = Sun Jan 15 2006 (all date parts specified)
dt = Date.parseDate("2006-01-15", "Y-m-d");

//dt = Sun Jan 15 2006 15:20:01
dt = Date.parseDate("2006-01-15 3:20:01 PM", "Y-m-d g:i:s A");

// attempt to parse Sun Feb 29 2006 03:20:01 in strict mode
dt = Date.parseDate("2006-02-29 03:20:01", "Y-m-d H:i:s", true); // returns null

     * @param {String} input The raw date string.
     * @param {String} format The expected date string format.
     * @param {Boolean} strict (optional) True to validate date strings while parsing (i.e. prevents javascript Date "rollover")
                        (defaults to false). Invalid date strings will return null when parsed.
     * @return {Date} The parsed Date.
     * @static
     */
    parseDate : function(input, format, strict) {
        var p = Date.parseFunctions;
        if (p[format] == null) {
            Date.createParser(format);
        }
        return p[format](input, Ext.isDefined(strict) ? strict : Date.useStrict);
    },

    // private
    getFormatCode : function(character) {
        var f = Date.formatCodes[character];

        if (f) {
          f = typeof f == 'function'? f() : f;
          Date.formatCodes[character] = f; // reassign function result to prevent repeated execution
        }

        // note: unknown characters are treated as literals
        return f || ("'" + String.escape(character) + "'");
    },

    // private
    createFormat : function(format) {
        var code = [],
            special = false,
            ch = '';

        for (var i = 0; i < format.length; ++i) {
            ch = format.charAt(i);
            if (!special && ch == "\\") {
                special = true;
            } else if (special) {
                special = false;
                code.push("'" + String.escape(ch) + "'");
            } else {
                code.push(Date.getFormatCode(ch))
            }
        }
        Date.formatFunctions[format] = new Function("return " + code.join('+'));
    },

    // private
    createParser : function() {
        var code = [
            "var dt, y, m, d, h, i, s, ms, o, z, zz, u, v,",
                "def = Date.defaults,",
                "results = String(input).match(Date.parseRegexes[{0}]);", // either null, or an array of matched strings

            "if(results){",
                "{1}",

                "if(u != null){", // i.e. unix time is defined
                    "v = new Date(u * 1000);", // give top priority to UNIX time
                "}else{",
                    // create Date object representing midnight of the current day;
                    // this will provide us with our date defaults
                    // (note: clearTime() handles Daylight Saving Time automatically)
                    "dt = (new Date()).clearTime();",

                    // date calculations (note: these calculations create a dependency on Ext.num())
                    "y = Ext.num(y, Ext.num(def.y, dt.getFullYear()));",
                    "m = Ext.num(m, Ext.num(def.m - 1, dt.getMonth()));",
                    "d = Ext.num(d, Ext.num(def.d, dt.getDate()));",

                    // time calculations (note: these calculations create a dependency on Ext.num())
                    "h  = Ext.num(h, Ext.num(def.h, dt.getHours()));",
                    "i  = Ext.num(i, Ext.num(def.i, dt.getMinutes()));",
                    "s  = Ext.num(s, Ext.num(def.s, dt.getSeconds()));",
                    "ms = Ext.num(ms, Ext.num(def.ms, dt.getMilliseconds()));",

                    "if(z >= 0 && y >= 0){",
                        // both the year and zero-based day of year are defined and >= 0.
                        // these 2 values alone provide sufficient info to create a full date object

                        // create Date object representing January 1st for the given year
                        "v = new Date(y, 0, 1, h, i, s, ms);",

                        // then add day of year, checking for Date "rollover" if necessary
                        "v = !strict? v : (strict === true && (z <= 364 || (v.isLeapYear() && z <= 365))? v.add(Date.DAY, z) : null);",
                    "}else if(strict === true && !Date.isValid(y, m + 1, d, h, i, s, ms)){", // check for Date "rollover"
                        "v = null;", // invalid date, so return null
                    "}else{",
                        // plain old Date object
                        "v = new Date(y, m, d, h, i, s, ms);",
                    "}",
                "}",
            "}",

            "if(v){",
                // favour UTC offset over GMT offset
                "if(zz != null){",
                    // reset to UTC, then add offset
                    "v = v.add(Date.SECOND, -v.getTimezoneOffset() * 60 - zz);",
                "}else if(o){",
                    // reset to GMT, then add offset
                    "v = v.add(Date.MINUTE, -v.getTimezoneOffset() + (sn == '+'? -1 : 1) * (hr * 60 + mn));",
                "}",
            "}",

            "return v;"
        ].join('\n');

        return function(format) {
            var regexNum = Date.parseRegexes.length,
                currentGroup = 1,
                calc = [],
                regex = [],
                special = false,
                ch = "";

            for (var i = 0; i < format.length; ++i) {
                ch = format.charAt(i);
                if (!special && ch == "\\") {
                    special = true;
                } else if (special) {
                    special = false;
                    regex.push(String.escape(ch));
                } else {
                    var obj = $f(ch, currentGroup);
                    currentGroup += obj.g;
                    regex.push(obj.s);
                    if (obj.g && obj.c) {
                        calc.push(obj.c);
                    }
                }
            }

            Date.parseRegexes[regexNum] = new RegExp("^" + regex.join('') + "$");
            Date.parseFunctions[format] = new Function("input", "strict", xf(code, regexNum, calc.join('')));
        }
    }(),

    // private
    parseCodes : {
        /*
         * Notes:
         * g = {Number} calculation group (0 or 1. only group 1 contributes to date calculations.)
         * c = {String} calculation method (required for group 1. null for group 0. {0} = currentGroup - position in regex result array)
         * s = {String} regex pattern. all matches are stored in results[], and are accessible by the calculation mapped to 'c'
         */
        d: {
            g:1,
            c:"d = parseInt(results[{0}], 10);\n",
            s:"(\\d{2})" // day of month with leading zeroes (01 - 31)
        },
        j: {
            g:1,
            c:"d = parseInt(results[{0}], 10);\n",
            s:"(\\d{1,2})" // day of month without leading zeroes (1 - 31)
        },
        D: function() {
            for (var a = [], i = 0; i < 7; a.push(Date.getShortDayName(i)), ++i); // get localised short day names
            return {
                g:0,
                c:null,
                s:"(?:" + a.join("|") +")"
            }
        },
        l: function() {
            return {
                g:0,
                c:null,
                s:"(?:" + Date.dayNames.join("|") + ")"
            }
        },
        N: {
            g:0,
            c:null,
            s:"[1-7]" // ISO-8601 day number (1 (monday) - 7 (sunday))
        },
        S: {
            g:0,
            c:null,
            s:"(?:st|nd|rd|th)"
        },
        w: {
            g:0,
            c:null,
            s:"[0-6]" // javascript day number (0 (sunday) - 6 (saturday))
        },
        z: {
            g:1,
            c:"z = parseInt(results[{0}], 10);\n",
            s:"(\\d{1,3})" // day of the year (0 - 364 (365 in leap years))
        },
        W: {
            g:0,
            c:null,
            s:"(?:\\d{2})" // ISO-8601 week number (with leading zero)
        },
        F: function() {
            return {
                g:1,
                c:"m = parseInt(Date.getMonthNumber(results[{0}]), 10);\n", // get localised month number
                s:"(" + Date.monthNames.join("|") + ")"
            }
        },
        M: function() {
            for (var a = [], i = 0; i < 12; a.push(Date.getShortMonthName(i)), ++i); // get localised short month names
            return Ext.applyIf({
                s:"(" + a.join("|") + ")"
            }, $f("F"));
        },
        m: {
            g:1,
            c:"m = parseInt(results[{0}], 10) - 1;\n",
            s:"(\\d{2})" // month number with leading zeros (01 - 12)
        },
        n: {
            g:1,
            c:"m = parseInt(results[{0}], 10) - 1;\n",
            s:"(\\d{1,2})" // month number without leading zeros (1 - 12)
        },
        t: {
            g:0,
            c:null,
            s:"(?:\\d{2})" // no. of days in the month (28 - 31)
        },
        L: {
            g:0,
            c:null,
            s:"(?:1|0)"
        },
        o: function() {
            return $f("Y");
        },
        Y: {
            g:1,
            c:"y = parseInt(results[{0}], 10);\n",
            s:"(\\d{4})" // 4-digit year
        },
        y: {
            g:1,
            c:"var ty = parseInt(results[{0}], 10);\n"
                + "y = ty > Date.y2kYear ? 1900 + ty : 2000 + ty;\n", // 2-digit year
            s:"(\\d{1,2})"
        },
        a: {
            g:1,
            c:"if (results[{0}] == 'am') {\n"
                + "if (!h || h == 12) { h = 0; }\n"
                + "} else { if (!h || h < 12) { h = (h || 0) + 12; }}",
            s:"(am|pm)"
        },
        A: {
            g:1,
            c:"if (results[{0}] == 'AM') {\n"
                + "if (!h || h == 12) { h = 0; }\n"
                + "} else { if (!h || h < 12) { h = (h || 0) + 12; }}",
            s:"(AM|PM)"
        },
        g: function() {
            return $f("G");
        },
        G: {
            g:1,
            c:"h = parseInt(results[{0}], 10);\n",
            s:"(\\d{1,2})" // 24-hr format of an hour without leading zeroes (0 - 23)
        },
        h: function() {
            return $f("H");
        },
        H: {
            g:1,
            c:"h = parseInt(results[{0}], 10);\n",
            s:"(\\d{2})" //  24-hr format of an hour with leading zeroes (00 - 23)
        },
        i: {
            g:1,
            c:"i = parseInt(results[{0}], 10);\n",
            s:"(\\d{2})" // minutes with leading zeros (00 - 59)
        },
        s: {
            g:1,
            c:"s = parseInt(results[{0}], 10);\n",
            s:"(\\d{2})" // seconds with leading zeros (00 - 59)
        },
        u: {
            g:1,
            c:"ms = results[{0}]; ms = parseInt(ms, 10)/Math.pow(10, ms.length - 3);\n",
            s:"(\\d+)" // decimal fraction of a second (minimum = 1 digit, maximum = unlimited)
        },
        O: {
            g:1,
            c:[
                "o = results[{0}];",
                "var sn = o.substring(0,1),", // get + / - sign
                    "hr = o.substring(1,3)*1 + Math.floor(o.substring(3,5) / 60),", // get hours (performs minutes-to-hour conversion also, just in case)
                    "mn = o.substring(3,5) % 60;", // get minutes
                "o = ((-12 <= (hr*60 + mn)/60) && ((hr*60 + mn)/60 <= 14))? (sn + String.leftPad(hr, 2, '0') + String.leftPad(mn, 2, '0')) : null;\n" // -12hrs <= GMT offset <= 14hrs
            ].join("\n"),
            s: "([+\-]\\d{4})" // GMT offset in hrs and mins
        },
        P: {
            g:1,
            c:[
                "o = results[{0}];",
                "var sn = o.substring(0,1),", // get + / - sign
                    "hr = o.substring(1,3)*1 + Math.floor(o.substring(4,6) / 60),", // get hours (performs minutes-to-hour conversion also, just in case)
                    "mn = o.substring(4,6) % 60;", // get minutes
                "o = ((-12 <= (hr*60 + mn)/60) && ((hr*60 + mn)/60 <= 14))? (sn + String.leftPad(hr, 2, '0') + String.leftPad(mn, 2, '0')) : null;\n" // -12hrs <= GMT offset <= 14hrs
            ].join("\n"),
            s: "([+\-]\\d{2}:\\d{2})" // GMT offset in hrs and mins (with colon separator)
        },
        T: {
            g:0,
            c:null,
            s:"[A-Z]{1,4}" // timezone abbrev. may be between 1 - 4 chars
        },
        Z: {
            g:1,
            c:"zz = results[{0}] * 1;\n" // -43200 <= UTC offset <= 50400
                  + "zz = (-43200 <= zz && zz <= 50400)? zz : null;\n",
            s:"([+\-]?\\d{1,5})" // leading '+' sign is optional for UTC offset
        },
        c: function() {
            var calc = [],
                arr = [
                    $f("Y", 1), // year
                    $f("m", 2), // month
                    $f("d", 3), // day
                    $f("h", 4), // hour
                    $f("i", 5), // minute
                    $f("s", 6), // second
                    {c:"ms = results[7] || '0'; ms = parseInt(ms, 10)/Math.pow(10, ms.length - 3);\n"}, // decimal fraction of a second (minimum = 1 digit, maximum = unlimited)
                    {c:[ // allow either "Z" (i.e. UTC) or "-0530" or "+08:00" (i.e. UTC offset) timezone delimiters. assumes local timezone if no timezone is specified
                        "if(results[8]) {", // timezone specified
                            "if(results[8] == 'Z'){",
                                "zz = 0;", // UTC
                            "}else if (results[8].indexOf(':') > -1){",
                                $f("P", 8).c, // timezone offset with colon separator
                            "}else{",
                                $f("O", 8).c, // timezone offset without colon separator
                            "}",
                        "}"
                    ].join('\n')}
                ];

            for (var i = 0, l = arr.length; i < l; ++i) {
                calc.push(arr[i].c);
            }

            return {
                g:1,
                c:calc.join(""),
                s:[
                    arr[0].s, // year (required)
                    "(?:", "-", arr[1].s, // month (optional)
                        "(?:", "-", arr[2].s, // day (optional)
                            "(?:",
                                "(?:T| )?", // time delimiter -- either a "T" or a single blank space
                                arr[3].s, ":", arr[4].s,  // hour AND minute, delimited by a single colon (optional). MUST be preceded by either a "T" or a single blank space
                                "(?::", arr[5].s, ")?", // seconds (optional)
                                "(?:(?:\\.|,)(\\d+))?", // decimal fraction of a second (e.g. ",12345" or ".98765") (optional)
                                "(Z|(?:[-+]\\d{2}(?::)?\\d{2}))?", // "Z" (UTC) or "-0530" (UTC offset without colon delimiter) or "+08:00" (UTC offset with colon delimiter) (optional)
                            ")?",
                        ")?",
                    ")?"
                ].join("")
            }
        },
        U: {
            g:1,
            c:"u = parseInt(results[{0}], 10);\n",
            s:"(-?\\d+)" // leading minus sign indicates seconds before UNIX epoch
        }
    }
});

}());

Ext.apply(Date.prototype, {
    // private
    dateFormat : function(format) {
        if (Date.formatFunctions[format] == null) {
            Date.createFormat(format);
        }
        return Date.formatFunctions[format].call(this);
    },

/**
     * Get the timezone abbreviation of the current date (equivalent to the format specifier 'T').
     *
     * Note: The date string returned by the javascript Date object's toString() method varies
     * between browsers (e.g. FF vs IE) and system region settings (e.g. IE in Asia vs IE in America).
     * For a given date string e.g. "Thu Oct 25 2007 22:55:35 GMT+0800 (Malay Peninsula Standard Time)",
     * getTimezone() first tries to get the timezone abbreviation from between a pair of parentheses
     * (which may or may not be present), failing which it proceeds to get the timezone abbreviation
     * from the GMT offset portion of the date string.
     * @return {String} The abbreviated timezone name (e.g. 'CST', 'PDT', 'EDT', 'MPST' ...).
     */
    getTimezone : function() {
        // the following list shows the differences between date strings from different browsers on a WinXP SP2 machine from an Asian locale:
        //
        // Opera  : "Thu, 25 Oct 2007 22:53:45 GMT+0800" -- shortest (weirdest) date string of the lot
        // Safari : "Thu Oct 25 2007 22:55:35 GMT+0800 (Malay Peninsula Standard Time)" -- value in parentheses always gives the correct timezone (same as FF)
        // FF     : "Thu Oct 25 2007 22:55:35 GMT+0800 (Malay Peninsula Standard Time)" -- value in parentheses always gives the correct timezone
        // IE     : "Thu Oct 25 22:54:35 UTC+0800 2007" -- (Asian system setting) look for 3-4 letter timezone abbrev
        // IE     : "Thu Oct 25 17:06:37 PDT 2007" -- (American system setting) look for 3-4 letter timezone abbrev
        //
        // this crazy regex attempts to guess the correct timezone abbreviation despite these differences.
        // step 1: (?:\((.*)\) -- find timezone in parentheses
        // step 2: ([A-Z]{1,4})(?:[\-+][0-9]{4})?(?: -?\d+)?) -- if nothing was found in step 1, find timezone from timezone offset portion of date string
        // step 3: remove all non uppercase characters found in step 1 and 2
        return this.toString().replace(/^.* (?:\((.*)\)|([A-Z]{1,4})(?:[\-+][0-9]{4})?(?: -?\d+)?)$/, "$1$2").replace(/[^A-Z]/g, "");
    },

/**
     * Get the offset from GMT of the current date (equivalent to the format specifier 'O').
     * @param {Boolean} colon (optional) true to separate the hours and minutes with a colon (defaults to false).
     * @return {String} The 4-character offset string prefixed with + or - (e.g. '-0600').
     */
    getGMTOffset : function(colon) {
        return (this.getTimezoneOffset() > 0 ? "-" : "+")
            + String.leftPad(Math.floor(Math.abs(this.getTimezoneOffset()) / 60), 2, "0")
            + (colon ? ":" : "")
            + String.leftPad(Math.abs(this.getTimezoneOffset() % 60), 2, "0");
    },

/**
     * Get the numeric day number of the year, adjusted for leap year.
     * @return {Number} 0 to 364 (365 in leap years).
     */
    getDayOfYear: function() {
        var num = 0,
            d = this.clone(),
            m = this.getMonth(),
            i;

        for (i = 0, d.setDate(1), d.setMonth(0); i < m; d.setMonth(++i)) {
            num += d.getDaysInMonth();
        }
        return num + this.getDate() - 1;
    },

/**
     * Get the numeric ISO-8601 week number of the year.
     * (equivalent to the format specifier 'W', but without a leading zero).
     * @return {Number} 1 to 53
     */
    getWeekOfYear : function() {
        // adapted from http://www.merlyn.demon.co.uk/weekcalc.htm
        var ms1d = 864e5, // milliseconds in a day
            ms7d = 7 * ms1d; // milliseconds in a week

        return function() { // return a closure so constants get calculated only once
            var DC3 = Date.UTC(this.getFullYear(), this.getMonth(), this.getDate() + 3) / ms1d, // an Absolute Day Number
                AWN = Math.floor(DC3 / 7), // an Absolute Week Number
                Wyr = new Date(AWN * ms7d).getUTCFullYear();

            return AWN - Math.floor(Date.UTC(Wyr, 0, 7) / ms7d) + 1;
        }
    }(),

/**
     * Checks if the current date falls within a leap year.
     * @return {Boolean} True if the current date falls within a leap year, false otherwise.
     */
    isLeapYear : function() {
        var year = this.getFullYear();
        return !!((year & 3) == 0 && (year % 100 || (year % 400 == 0 && year)));
    },

/**
     * Get the first day of the current month, adjusted for leap year.  The returned value
     * is the numeric day index within the week (0-6) which can be used in conjunction with
     * the {@link #monthNames} array to retrieve the textual day name.
     * Example:
     *

var dt = new Date('1/10/2007');
document.write(Date.dayNames[dt.getFirstDayOfMonth()]); //output: 'Monday'

     * @return {Number} The day number (0-6).
     */
    getFirstDayOfMonth : function() {
        var day = (this.getDay() - (this.getDate() - 1)) % 7;
        return (day < 0) ? (day + 7) : day;
    },

/**
     * Get the last day of the current month, adjusted for leap year.  The returned value
     * is the numeric day index within the week (0-6) which can be used in conjunction with
     * the {@link #monthNames} array to retrieve the textual day name.
     * Example:
     *

var dt = new Date('1/10/2007');
document.write(Date.dayNames[dt.getLastDayOfMonth()]); //output: 'Wednesday'

     * @return {Number} The day number (0-6).
     */
    getLastDayOfMonth : function() {
        return this.getLastDateOfMonth().getDay();
    },

/**
     * Get the date of the first day of the month in which this date resides.
     * @return {Date}
     */
    getFirstDateOfMonth : function() {
        return new Date(this.getFullYear(), this.getMonth(), 1);
    },

/**
     * Get the date of the last day of the month in which this date resides.
     * @return {Date}
     */
    getLastDateOfMonth : function() {
        return new Date(this.getFullYear(), this.getMonth(), this.getDaysInMonth());
    },

/**
     * Get the number of days in the current month, adjusted for leap year.
     * @return {Number} The number of days in the month.
     */
    getDaysInMonth: function() {
        var daysInMonth = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];

        return function() { // return a closure for efficiency
            var m = this.getMonth();

            return m == 1 && this.isLeapYear() ? 29 : daysInMonth[m];
        }
    }(),

/**
     * Get the English ordinal suffix of the current day (equivalent to the format specifier 'S').
     * @return {String} 'st, 'nd', 'rd' or 'th'.
     */
    getSuffix : function() {
        switch (this.getDate()) {
            case 1:
            case 21:
            case 31:
                return "st";
            case 2:
            case 22:
                return "nd";
            case 3:
            case 23:
                return "rd";
            default:
                return "th";
        }
    },

/**
     * Creates and returns a new Date instance with the exact same date value as the called instance.
     * Dates are copied and passed by reference, so if a copied date variable is modified later, the original
     * variable will also be changed.  When the intention is to create a new variable that will not
     * modify the original instance, you should create a clone.
     *
     * Example of correctly cloning a date:
     *

//wrong way:
var orig = new Date('10/1/2006');
var copy = orig;
copy.setDate(5);
document.write(orig);  //returns 'Thu Oct 05 2006'!

//correct way:
var orig = new Date('10/1/2006');
var copy = orig.clone();
copy.setDate(5);
document.write(orig);  //returns 'Thu Oct 01 2006'

     * @return {Date} The new Date instance.
     */
    clone : function() {
        return new Date(this.getTime());
    },

/**
     * Checks if the current date is affected by Daylight Saving Time (DST).
     * @return {Boolean} True if the current date is affected by DST.
     */
    isDST : function() {
        // adapted from http://extjs.com/forum/showthread.php?p=247172#post247172
        // courtesy of @geoffrey.mcgill
        return new Date(this.getFullYear(), 0, 1).getTimezoneOffset() != this.getTimezoneOffset();
    },

/**
     * Attempts to clear all time information from this Date by setting the time to midnight of the same day,
     * automatically adjusting for Daylight Saving Time (DST) where applicable.
     * (note: DST timezone information for the browser's host operating system is assumed to be up-to-date)
     * @param {Boolean} clone true to create a clone of this date, clear the time and return it (defaults to false).
     * @return {Date} this or the clone.
     */
    clearTime : function(clone) {
        if (clone) {
            return this.clone().clearTime();
        }

        // get current date before clearing time
        var d = this.getDate();

        // clear time
        this.setHours(0);
        this.setMinutes(0);
        this.setSeconds(0);
        this.setMilliseconds(0);

        if (this.getDate() != d) { // account for DST (i.e. day of month changed when setting hour = 0)
            // note: DST adjustments are assumed to occur in multiples of 1 hour (this is almost always the case)
            // refer to http://www.timeanddate.com/time/aboutdst.html for the (rare) exceptions to this rule

            // increment hour until cloned date == current date
            for (var hr = 1, c = this.add(Date.HOUR, hr); c.getDate() != d; hr++, c = this.add(Date.HOUR, hr));

            this.setDate(d);
            this.setHours(c.getHours());
        }

        return this;
    },

/**
     * Provides a convenient method for performing basic date arithmetic. This method
     * does not modify the Date instance being called - it creates and returns
     * a new Date instance containing the resulting date value.
     *
     * Examples:
     *

// Basic usage:
var dt = new Date('10/29/2006').add(Date.DAY, 5);
document.write(dt); //returns 'Fri Nov 03 2006 00:00:00'

// Negative values will be subtracted:
var dt2 = new Date('10/1/2006').add(Date.DAY, -5);
document.write(dt2); //returns 'Tue Sep 26 2006 00:00:00'

// You can even chain several calls together in one line:
var dt3 = new Date('10/1/2006').add(Date.DAY, 5).add(Date.HOUR, 8).add(Date.MINUTE, -30);
document.write(dt3); //returns 'Fri Oct 06 2006 07:30:00'

     *
     * @param {String} interval A valid date interval enum value.
     * @param {Number} value The amount to add to the current date.
     * @return {Date} The new Date instance.
     */
    add : function(interval, value) {
        var d = this.clone();
        if (!interval || value === 0) return d;

        switch(interval.toLowerCase()) {
            case Date.MILLI:
                d.setMilliseconds(this.getMilliseconds() + value);
                break;
            case Date.SECOND:
                d.setSeconds(this.getSeconds() + value);
                break;
            case Date.MINUTE:
                d.setMinutes(this.getMinutes() + value);
                break;
            case Date.HOUR:
                d.setHours(this.getHours() + value);
                break;
            case Date.DAY:
                d.setDate(this.getDate() + value);
                break;
            case Date.MONTH:
                var day = this.getDate();
                if (day > 28) {
                    day = Math.min(day, this.getFirstDateOfMonth().add('mo', value).getLastDateOfMonth().getDate());
                }
                d.setDate(day);
                d.setMonth(this.getMonth() + value);
                break;
            case Date.YEAR:
                d.setFullYear(this.getFullYear() + value);
                break;
        }
        return d;
    },

/**
     * Checks if this date falls on or between the given start and end dates.
     * @param {Date} start Start date
     * @param {Date} end End date
     * @return {Boolean} true if this date falls on or between the given start and end dates.
     */
    between : function(start, end) {
        var t = this.getTime();
        return start.getTime() <= t && t <= end.getTime();
    }
});

/**
 * Formats a date given the supplied format string.
 * @param {String} format The format string.
 * @return {String} The formatted date.
 * @method format
 */
Date.prototype.format = Date.prototype.dateFormat;

// private
if (Ext.isSafari && (navigator.userAgent.match(/WebKit\/(\d+)/)[1] || NaN) < 420) {
    Ext.apply(Date.prototype, {
        _xMonth : Date.prototype.setMonth,
        _xDate  : Date.prototype.setDate,

        // Bug in Safari 1.3, 2.0 (WebKit build < 420)
        // Date.setMonth does not work consistently if iMonth is not 0-11
        setMonth : function(num) {
            if (num <= -1) {
                var n = Math.ceil(-num),
                    back_year = Math.ceil(n / 12),
                    month = (n % 12) ? 12 - n % 12 : 0;

                this.setFullYear(this.getFullYear() - back_year);

                return this._xMonth(month);
            } else {
                return this._xMonth(num);
            }
        },

        // Bug in setDate() method (resolved in WebKit build 419.3, so to be safe we target Webkit builds < 420)
        // The parameter for Date.setDate() is converted to a signed byte integer in Safari
        // http://brianary.blogspot.com/2006/03/safari-date-bug.html
        setDate : function(d) {
            // use setTime() to workaround setDate() bug
            // subtract current day of month in milliseconds, then add desired day of month in milliseconds
            return this.setTime(this.getTime() - (this.getDate() - d) * 864e5);
        }
    });
}

/* Some basic Date tests... (requires Firebug)

Date.parseDate('', 'c'); // call Date.parseDate() once to force computation of regex string so we can console.log() it
console.log('Insane Regex for "c" format: %o', Date.parseCodes.c.s); // view the insane regex for the "c" format specifier

// standard tests
console.group('Standard Date.parseDate() Tests');
    console.log('Date.parseDate("2009-01-05T11:38:56", "c")               = %o', Date.parseDate("2009-01-05T11:38:56", "c")); // assumes browser's timezone setting
    console.log('Date.parseDate("2009-02-04T12:37:55.001000", "c")        = %o', Date.parseDate("2009-02-04T12:37:55.001000", "c")); // assumes browser's timezone setting
    console.log('Date.parseDate("2009-03-03T13:36:54,101000Z", "c")       = %o', Date.parseDate("2009-03-03T13:36:54,101000Z", "c")); // UTC
    console.log('Date.parseDate("2009-04-02T14:35:53.901000-0530", "c")   = %o', Date.parseDate("2009-04-02T14:35:53.901000-0530", "c")); // GMT-0530
    console.log('Date.parseDate("2009-05-01T15:34:52,9876000+08:00", "c") = %o', Date.parseDate("2009-05-01T15:34:52,987600+08:00", "c")); // GMT+08:00
console.groupEnd();

// ISO-8601 format as specified in http://www.w3.org/TR/NOTE-datetime
// -- accepts ALL 6 levels of date-time granularity
console.group('ISO-8601 Granularity Test (see http://www.w3.org/TR/NOTE-datetime)');
    console.log('Date.parseDate("1997", "c")                              = %o', Date.parseDate("1997", "c")); // YYYY (e.g. 1997)
    console.log('Date.parseDate("1997-07", "c")                           = %o', Date.parseDate("1997-07", "c")); // YYYY-MM (e.g. 1997-07)
    console.log('Date.parseDate("1997-07-16", "c")                        = %o', Date.parseDate("1997-07-16", "c")); // YYYY-MM-DD (e.g. 1997-07-16)
    console.log('Date.parseDate("1997-07-16T19:20+01:00", "c")            = %o', Date.parseDate("1997-07-16T19:20+01:00", "c")); // YYYY-MM-DDThh:mmTZD (e.g. 1997-07-16T19:20+01:00)
    console.log('Date.parseDate("1997-07-16T19:20:30+01:00", "c")         = %o', Date.parseDate("1997-07-16T19:20:30+01:00", "c")); // YYYY-MM-DDThh:mm:ssTZD (e.g. 1997-07-16T19:20:30+01:00)
    console.log('Date.parseDate("1997-07-16T19:20:30.45+01:00", "c")      = %o', Date.parseDate("1997-07-16T19:20:30.45+01:00", "c")); // YYYY-MM-DDThh:mm:ss.sTZD (e.g. 1997-07-16T19:20:30.45+01:00)
    console.log('Date.parseDate("1997-07-16 19:20:30.45+01:00", "c")      = %o', Date.parseDate("1997-07-16 19:20:30.45+01:00", "c")); // YYYY-MM-DD hh:mm:ss.sTZD (e.g. 1997-07-16T19:20:30.45+01:00)
    console.log('Date.parseDate("1997-13-16T19:20:30.45+01:00", "c", true)= %o', Date.parseDate("1997-13-16T19:20:30.45+01:00", "c", true)); // strict date parsing with invalid month value
console.groupEnd();

//*/


The source code

/*!
 * licensing@extjs.com
 * http://www.extjs.com/license
 */

/**
 * @class Ext.form.DateField
 * @extends Ext.form.TriggerField
 * Provides a date input field with a {@link Ext.DatePicker} dropdown and automatic date validation.
 * @constructor
 * Create a new DateField
 * @param {Object} config
 * @xtype datefield
 */
Ext.form.DateField = Ext.extend(Ext.form.TriggerField,  {

/**
     * @cfg {String} format
     * The default date format string which can be overriden for localization support.  The format must be
     * valid according to {@link Date#parseDate} (defaults to 'm/d/Y').
     */
    format : "m/d/Y",

/**
     * @cfg {String} altFormats
     * Multiple date formats separated by "|" to try when parsing a user input value and it
     * does not match the defined format (defaults to
     * 'm/d/Y|n/j/Y|n/j/y|m/j/y|n/d/y|m/j/Y|n/d/Y|m-d-y|m-d-Y|m/d|m-d|md|mdy|mdY|d|Y-m-d').
     */
    altFormats : "m/d/Y|n/j/Y|n/j/y|m/j/y|n/d/y|m/j/Y|n/d/Y|m-d-y|m-d-Y|m/d|m-d|md|mdy|mdY|d|Y-m-d",

/**
     * @cfg {String} disabledDaysText
     * The tooltip to display when the date falls on a disabled day (defaults to 'Disabled')
     */
    disabledDaysText : "Disabled",

/**
     * @cfg {String} disabledDatesText
     * The tooltip text to display when the date falls on a disabled date (defaults to 'Disabled')
     */
    disabledDatesText : "Disabled",

/**
     * @cfg {String} minText
     * The error text to display when the date in the cell is before {@link #minValue} (defaults to
     * 'The date in this field must be after {minValue}').
     */
    minText : "The date in this field must be equal to or after {0}",

/**
     * @cfg {String} maxText
     * The error text to display when the date in the cell is after {@link #maxValue} (defaults to
     * 'The date in this field must be before {maxValue}').
     */
    maxText : "The date in this field must be equal to or before {0}",

/**
     * @cfg {String} invalidText
     * The error text to display when the date in the field is invalid (defaults to
     * '{value} is not a valid date - it must be in the format {format}').
     */
    invalidText : "{0} is not a valid date - it must be in the format {1}",

/**
     * @cfg {String} triggerClass
     * An additional CSS class used to style the trigger button.  The trigger will always get the
     * class 'x-form-trigger' and triggerClass will be appended if specified
     * (defaults to 'x-form-date-trigger' which displays a calendar icon).
     */
    triggerClass : 'x-form-date-trigger',

/**
     * @cfg {Boolean} showToday
     * false to hide the footer area of the DatePicker containing the Today button and disable
     * the keyboard handler for spacebar that selects the current date (defaults to true).
     */
    showToday : true,

/**
     * @cfg {Date/String} minValue
     * The minimum allowed date. Can be either a Javascript date object or a string date in a
     * valid format (defaults to null).
     */

/**
     * @cfg {Date/String} maxValue
     * The maximum allowed date. Can be either a Javascript date object or a string date in a
     * valid format (defaults to null).
     */

/**
     * @cfg {Array} disabledDays
     * An array of days to disable, 0 based (defaults to null). Some examples:

// disable Sunday and Saturday:
disabledDays:  [0, 6]
// disable weekdays:
disabledDays: [1,2,3,4,5]
     *

     */

/**
     * @cfg {Array} disabledDates
     * An array of "dates" to disable, as strings. These strings will be used to build a dynamic regular
     * expression so they are very powerful. Some examples:

// disable these exact dates:
disabledDates: ["03/08/2003", "09/16/2003"]
// disable these days for every year:
disabledDates: ["03/08", "09/16"]
// only match the beginning (useful if you are using short years):
disabledDates: ["^03/08"]
// disable every day in March 2006:
disabledDates: ["03/../2006"]
// disable every day in every March:
disabledDates: ["^03"]
     *

     * Note that the format of the dates included in the array should exactly match the {@link #format} config.
     * In order to support regular expressions, if you are using a {@link #format date format} that has "." in
     * it, you will have to escape the dot when restricting dates. For example: ["03\\.08\\.03"].
     */

/**
     * @cfg {String/Object} autoCreate
     * A {@link Ext.DomHelper DomHelper element specification object}, or true for the default element
     * specification object:

     * autoCreate: {tag: "input", type: "text", size: "10", autocomplete: "off"}
     *

     */

    // private
    defaultAutoCreate : {tag: "input", type: "text", size: "10", autocomplete: "off"},

    // in the absence of a time value, a default value of 12 noon will be used
    // (note: 12 noon was chosen because it steers well clear of all DST timezone changes)
    initTime: '12', // 24 hour format

    initTimeFormat: 'H',

    // PUBLIC -- to be documented
    safeParse : function(value, format) {
        if (/[gGhH]/.test(format.replace(/(\\.)/g, ''))) {
            // if parse format contains hour information, no DST adjustment is necessary
            return Date.parseDate(value, format);
        } else {
            // set time to 12 noon, then clear the time
            var parsedDate = Date.parseDate(value + ' ' + this.initTime, format + ' ' + this.initTimeFormat);

            if (parsedDate) return parsedDate.clearTime();
        }
    },

    initComponent : function(){
        Ext.form.DateField.superclass.initComponent.call(this);

        this.addEvents(

/**
             * @event select
             * Fires when a date is selected via the date picker.
             * @param {Ext.form.DateField} this
             * @param {Date} date The date that was selected
             */
            'select'
        );

        if(Ext.isString(this.minValue)){
            this.minValue = this.parseDate(this.minValue);
        }
        if(Ext.isString(this.maxValue)){
            this.maxValue = this.parseDate(this.maxValue);
        }
        this.disabledDatesRE = null;
        this.initDisabledDays();
    },

    initEvents: function() {
        Ext.form.DateField.superclass.initEvents.call(this);
        this.keyNav = new Ext.KeyNav(this.el, {
            "down": function(e) {
                this.onTriggerClick();
            },
            scope: this,
            forceKeyDown: true
        });
    },

    // private
    initDisabledDays : function(){
        if(this.disabledDates){
            var dd = this.disabledDates,
                len = dd.length - 1,
                re = "(?:";

            Ext.each(dd, function(d, i){
                re += Ext.isDate(d) ? '^' + Ext.escapeRe(d.dateFormat(this.format)) + '$' : dd[i];
                if(i != len){
                    re += '|';
                }
            }, this);
            this.disabledDatesRE = new RegExp(re + ')');
        }
    },

/**
     * Replaces any existing disabled dates with new values and refreshes the DatePicker.
     * @param {Array} disabledDates An array of date strings (see the {@link #disabledDates} config
     * for details on supported values) used to disable a pattern of dates.
     */
    setDisabledDates : function(dd){
        this.disabledDates = dd;
        this.initDisabledDays();
        if(this.menu){
            this.menu.picker.setDisabledDates(this.disabledDatesRE);
        }
    },

/**
     * Replaces any existing disabled days (by index, 0-6) with new values and refreshes the DatePicker.
     * @param {Array} disabledDays An array of disabled day indexes. See the {@link #disabledDays}
     * config for details on supported values.
     */
    setDisabledDays : function(dd){
        this.disabledDays = dd;
        if(this.menu){
            this.menu.picker.setDisabledDays(dd);
        }
    },

/**
     * Replaces any existing {@link #minValue} with the new value and refreshes the DatePicker.
     * @param {Date} value The minimum date that can be selected
     */
    setMinValue : function(dt){
        this.minValue = (Ext.isString(dt) ? this.parseDate(dt) : dt);
        if(this.menu){
            this.menu.picker.setMinDate(this.minValue);
        }
    },

/**
     * Replaces any existing {@link #maxValue} with the new value and refreshes the DatePicker.
     * @param {Date} value The maximum date that can be selected
     */
    setMaxValue : function(dt){
        this.maxValue = (Ext.isString(dt) ? this.parseDate(dt) : dt);
        if(this.menu){
            this.menu.picker.setMaxDate(this.maxValue);
        }
    },

/**
     * Runs all of NumberFields validations and returns an array of any errors. Note that this first
     * runs TextField's validations, so the returned array is an amalgamation of all field errors.
     * The additional validation checks are testing that the date format is valid, that the chosen
     * date is within the min and max date constraints set, that the date chosen is not in the disabledDates
     * regex and that the day chosed is not one of the disabledDays.
     * @param {Mixed} value The value to get errors for (defaults to the current field value)
     * @return {Array} All validation errors for this field
     */
    getErrors: function(value) {
        var errors = Ext.form.DateField.superclass.getErrors.apply(this, arguments);

        value = this.formatDate(value || this.processValue(this.getRawValue()));

        if (value.length < 1) { // if it's blank and textfield didn't flag it then it's valid
             return errors;
        }

        var svalue = value;
        value = this.parseDate(value);
        if (!value) {
            errors.push(String.format(this.invalidText, svalue, this.format));
            return errors;
        }

        var time = value.getTime();
        if (this.minValue && time < this.minValue.getTime()) {
            errors.push(String.format(this.minText, this.formatDate(this.minValue)));
        }

        if (this.maxValue && time > this.maxValue.getTime()) {
            errors.push(String.format(this.maxText, this.formatDate(this.maxValue)));
        }

        if (this.disabledDays) {
            var day = value.getDay();

            for(var i = 0; i < this.disabledDays.length; i++) {
                if (day === this.disabledDays[i]) {
                    errors.push(this.disabledDaysText);
                    break;
                }
            }
        }

        var fvalue = this.formatDate(value);
        if (this.disabledDatesRE && this.disabledDatesRE.test(fvalue)) {
            errors.push(String.format(this.disabledDatesText, fvalue));
        }

        return errors;
    },

    // private
    // Provides logic to override the default TriggerField.validateBlur which just returns true
    validateBlur : function(){
        return !this.menu || !this.menu.isVisible();
    },

/**
     * Returns the current date value of the date field.
     * @return {Date} The date value
     */
    getValue : function(){
        return this.parseDate(Ext.form.DateField.superclass.getValue.call(this)) || "";
    },

/**
     * Sets the value of the date field.  You can pass a date object or any string that can be
     * parsed into a valid date, using {@link #format} as the date format, according
     * to the same rules as {@link Date#parseDate} (the default format used is "m/d/Y").
     *
Usage:
     *

//All of these calls set the same date value (May 4, 2006)

//Pass a date object:
var dt = new Date('5/4/2006');
dateField.setValue(dt);

//Pass a date string (default format):
dateField.setValue('05/04/2006');

//Pass a date string (custom format):
dateField.format = 'Y-m-d';
dateField.setValue('2006-05-04');

     * @param {String/Date} date The date or valid date string
     * @return {Ext.form.Field} this
     */
    setValue : function(date){
        return Ext.form.DateField.superclass.setValue.call(this, this.formatDate(this.parseDate(date)));
    },

    // private
    parseDate : function(value) {
        if(!value || Ext.isDate(value)){
            return value;
        }

        var v = this.safeParse(value, this.format),
            af = this.altFormats,
            afa = this.altFormatsArray;

        if (!v && af) {
            afa = afa || af.split("|");

            for (var i = 0, len = afa.length; i < len && !v; i++) {
                v = this.safeParse(value, afa[i]);
            }
        }
        return v;
    },

    // private
    onDestroy : function(){
        Ext.destroy(this.menu, this.keyNav);
        Ext.form.DateField.superclass.onDestroy.call(this);
    },

    // private
    formatDate : function(date){
        return Ext.isDate(date) ? date.dateFormat(this.format) : date;
    },

/**
     * @method onTriggerClick
     * @hide
     */
    // private
    // Implements the default empty TriggerField.onTriggerClick function to display the DatePicker
    onTriggerClick : function(){
        if(this.disabled){
            return;
        }
        if(this.menu == null){
            this.menu = new Ext.menu.DateMenu({
                hideOnClick: false,
                focusOnSelect: false
            });
        }
        this.onFocus();
        Ext.apply(this.menu.picker,  {
            minDate : this.minValue,
            maxDate : this.maxValue,
            disabledDatesRE : this.disabledDatesRE,
            disabledDatesText : this.disabledDatesText,
            disabledDays : this.disabledDays,
            disabledDaysText : this.disabledDaysText,
            format : this.format,
            showToday : this.showToday,
            minText : String.format(this.minText, this.formatDate(this.minValue)),
            maxText : String.format(this.maxText, this.formatDate(this.maxValue))
        });
        this.menu.picker.setValue(this.getValue() || new Date());
        this.menu.show(this.el, "tl-bl?");
        this.menuEvents('on');
    },

    //private
    menuEvents: function(method){
        this.menu[method]('select', this.onSelect, this);
        this.menu[method]('hide', this.onMenuHide, this);
        this.menu[method]('show', this.onFocus, this);
    },

    onSelect: function(m, d){
        this.setValue(d);
        this.fireEvent('select', this, d);
        this.menu.hide();
    },

    onMenuHide: function(){
        this.focus(false, 60);
        this.menuEvents('un');
    },

    // private
    beforeBlur : function(){
        var v = this.parseDate(this.getRawValue());
        if(v){
            this.setValue(v);
        }
    }

/**
     * @cfg {Boolean} grow @hide
     */

/**
     * @cfg {Number} growMin @hide
     */

/**
     * @cfg {Number} growMax @hide
     */

/**
     * @hide
     * @method autoSize
     */
});
Ext.reg('datefield', Ext.form.DateField);


The source code

/*!
 * licensing@extjs.com
 * http://www.extjs.com/license
 */

/**
 * @class Ext.menu.DateMenu
 * @extends Ext.menu.Menu
 *
A menu containing an {@link Ext.DatePicker} Component.

 *
Notes:

 *
  • Although not listed here, the constructor for this class
 * accepts all of the configuration options of {@link Ext.DatePicker}.
    •
 *
  • If subclassing DateMenu, any configuration options for the DatePicker must be
 * applied to the initialConfig property of the DateMenu.
 * Applying {@link Ext.DatePicker DatePicker} configuration settings to
 * this will not affect the DatePicker's configuration.
    •
 *

 * @xtype datemenu
 */
 Ext.menu.DateMenu = Ext.extend(Ext.menu.Menu, {

/**
     * @cfg {Boolean} enableScrolling
     * @hide
     */
    enableScrolling : false,

/**
     * @cfg {Function} handler
     * Optional. A function that will handle the select event of this menu.
     * The handler is passed the following parameters:

     *
  • picker : DatePicker
    The Ext.DatePicker.
    •
     *
  • date : Date
    The selected date.
    •
     *

     */

/**
     * @cfg {Object} scope
     * The scope (this reference) in which the {@link #handler}
     * function will be called.  Defaults to this DateMenu instance.
     */

/**
     * @cfg {Boolean} hideOnClick
     * False to continue showing the menu after a date is selected, defaults to true.
     */
    hideOnClick : true,

/**
     * @cfg {String} pickerId
     * An id to assign to the underlying date picker. Defaults to null.
     */
    pickerId : null,

/**
     * @cfg {Number} maxHeight
     * @hide
     */

/**
     * @cfg {Number} scrollIncrement
     * @hide
     */

/**
     * The {@link Ext.DatePicker} instance for this DateMenu
     * @property picker
     * @type DatePicker
     */
    cls : 'x-date-menu',

/**
     * @event click
     * @hide
     */

/**
     * @event itemclick
     * @hide
     */

    initComponent : function(){
        this.on('beforeshow', this.onBeforeShow, this);
        if(this.strict = (Ext.isIE7 && Ext.isStrict)){
            this.on('show', this.onShow, this, {single: true, delay: 20});
        }
        Ext.apply(this, {
            plain: true,
            showSeparator: false,
            items: this.picker = new Ext.DatePicker(Ext.applyIf({
                internalRender: this.strict || !Ext.isIE,
                ctCls: 'x-menu-date-item',
                id: this.pickerId
            }, this.initialConfig))
        });
        this.picker.purgeListeners();
        Ext.menu.DateMenu.superclass.initComponent.call(this);

/**
         * @event select
         * Fires when a date is selected from the {@link #picker Ext.DatePicker}
         * @param {DatePicker} picker The {@link #picker Ext.DatePicker}
         * @param {Date} date The selected date
         */
        this.relayEvents(this.picker, ['select']);
        this.on('show', this.picker.focus, this.picker);
        this.on('select', this.menuHide, this);
        if(this.handler){
            this.on('select', this.handler, this.scope || this);
        }
    },

    menuHide : function() {
        if(this.hideOnClick){
            this.hide(true);
        }
    },

    onBeforeShow : function(){
        if(this.picker){
            this.picker.hideMonthPicker(true);
        }
    },

    onShow : function(){
        var el = this.picker.getEl();
        el.setWidth(el.getWidth()); //nasty hack for IE7 strict mode
    }
 });
 Ext.reg('datemenu', Ext.menu.DateMenu);


The source code

/*!
 * licensing@extjs.com
 * http://www.extjs.com/license
 */

/**
 * @class Ext.DatePicker
 * @extends Ext.Component
 *
A popup date picker. This class is used by the {@link Ext.form.DateField DateField} class
 * to allow browsing and selection of valid dates.

 *
All the string values documented below may be overridden by including an Ext locale file in
 * your page.

 * @constructor
 * Create a new DatePicker
 * @param {Object} config The config object
 * @xtype datepicker
 */
Ext.DatePicker = Ext.extend(Ext.BoxComponent, {

/**
     * @cfg {String} todayText
     * The text to display on the button that selects the current date (defaults to 'Today')
     */
    todayText : 'Today',

/**
     * @cfg {String} okText
     * The text to display on the ok button (defaults to ' OK ' to give the user extra clicking room)
     */
    okText : ' OK ',

/**
     * @cfg {String} cancelText
     * The text to display on the cancel button (defaults to 'Cancel')
     */
    cancelText : 'Cancel',

/**
     * @cfg {Function} handler
     * Optional. A function that will handle the select event of this picker.
     * The handler is passed the following parameters:

     *
  • picker : DatePicker
    This DatePicker.
    •
     *
  • date : Date
    The selected date.
    •
     *

     */

/**
     * @cfg {Object} scope
     * The scope (this reference) in which the {@link #handler}
     * function will be called.  Defaults to this DatePicker instance.
     */

/**
     * @cfg {String} todayTip
     * A string used to format the message for displaying in a tooltip over the button that
     * selects the current date. Defaults to '{0} (Spacebar)' where
     * the {0} token is replaced by today's date.
     */
    todayTip : '{0} (Spacebar)',

/**
     * @cfg {String} minText
     * The error text to display if the minDate validation fails (defaults to 'This date is before the minimum date')
     */
    minText : 'This date is before the minimum date',

/**
     * @cfg {String} maxText
     * The error text to display if the maxDate validation fails (defaults to 'This date is after the maximum date')
     */
    maxText : 'This date is after the maximum date',

/**
     * @cfg {String} format
     * The default date format string which can be overriden for localization support.  The format must be
     * valid according to {@link Date#parseDate} (defaults to 'm/d/y').
     */
    format : 'm/d/y',

/**
     * @cfg {String} disabledDaysText
     * The tooltip to display when the date falls on a disabled day (defaults to 'Disabled')
     */
    disabledDaysText : 'Disabled',

/**
     * @cfg {String} disabledDatesText
     * The tooltip text to display when the date falls on a disabled date (defaults to 'Disabled')
     */
    disabledDatesText : 'Disabled',

/**
     * @cfg {Array} monthNames
     * An array of textual month names which can be overriden for localization support (defaults to Date.monthNames)
     */
    monthNames : Date.monthNames,

/**
     * @cfg {Array} dayNames
     * An array of textual day names which can be overriden for localization support (defaults to Date.dayNames)
     */
    dayNames : Date.dayNames,

/**
     * @cfg {String} nextText
     * The next month navigation button tooltip (defaults to 'Next Month (Control+Right)')
     */
    nextText : 'Next Month (Control+Right)',

/**
     * @cfg {String} prevText
     * The previous month navigation button tooltip (defaults to 'Previous Month (Control+Left)')
     */
    prevText : 'Previous Month (Control+Left)',

/**
     * @cfg {String} monthYearText
     * The header month selector tooltip (defaults to 'Choose a month (Control+Up/Down to move years)')
     */
    monthYearText : 'Choose a month (Control+Up/Down to move years)',

/**
     * @cfg {Number} startDay
     * Day index at which the week should begin, 0-based (defaults to 0, which is Sunday)
     */
    startDay : 0,

/**
     * @cfg {Boolean} showToday
     * False to hide the footer area containing the Today button and disable the keyboard handler for spacebar
     * that selects the current date (defaults to true).
     */
    showToday : true,

/**
     * @cfg {Date} minDate
     * Minimum allowable date (JavaScript date object, defaults to null)
     */

/**
     * @cfg {Date} maxDate
     * Maximum allowable date (JavaScript date object, defaults to null)
     */

/**
     * @cfg {Array} disabledDays
     * An array of days to disable, 0-based. For example, [0, 6] disables Sunday and Saturday (defaults to null).
     */

/**
     * @cfg {RegExp} disabledDatesRE
     * JavaScript regular expression used to disable a pattern of dates (defaults to null).  The {@link #disabledDates}
     * config will generate this regex internally, but if you specify disabledDatesRE it will take precedence over the
     * disabledDates value.
     */

/**
     * @cfg {Array} disabledDates
     * An array of 'dates' to disable, as strings. These strings will be used to build a dynamic regular
     * expression so they are very powerful. Some examples:
     *

     *
  • ['03/08/2003', '09/16/2003'] would disable those exact dates
    •
     *
  • ['03/08', '09/16'] would disable those days for every year
    •
     *
  • ['^03/08'] would only match the beginning (useful if you are using short years)
    •
     *
  • ['03/../2006'] would disable every day in March 2006
    •
     *
  • ['^03'] would disable every day in every March
    •
     *

     * Note that the format of the dates included in the array should exactly match the {@link #format} config.
     * In order to support regular expressions, if you are using a date format that has '.' in it, you will have to
     * escape the dot when restricting dates. For example: ['03\\.08\\.03'].
     */

    // private
    // Set by other components to stop the picker focus being updated when the value changes.
    focusOnSelect: true,

    // default value used to initialise each date in the DatePicker
    // (note: 12 noon was chosen because it steers well clear of all DST timezone changes)
    initHour: 12, // 24-hour format

    // private
    initComponent : function(){
        Ext.DatePicker.superclass.initComponent.call(this);

        this.value = this.value ?
                 this.value.clearTime(true) : new Date().clearTime();

        this.addEvents(

/**
             * @event select
             * Fires when a date is selected
             * @param {DatePicker} this DatePicker
             * @param {Date} date The selected date
             */
            'select'
        );

        if(this.handler){
            this.on('select', this.handler,  this.scope || this);
        }

        this.initDisabledDays();
    },

    // private
    initDisabledDays : function(){
        if(!this.disabledDatesRE && this.disabledDates){
            var dd = this.disabledDates,
                len = dd.length - 1,
                re = '(?:';

            Ext.each(dd, function(d, i){
                re += Ext.isDate(d) ? '^' + Ext.escapeRe(d.dateFormat(this.format)) + '$' : dd[i];
                if(i != len){
                    re += '|';
                }
            }, this);
            this.disabledDatesRE = new RegExp(re + ')');
        }
    },

/**
     * Replaces any existing disabled dates with new values and refreshes the DatePicker.
     * @param {Array/RegExp} disabledDates An array of date strings (see the {@link #disabledDates} config
     * for details on supported values), or a JavaScript regular expression used to disable a pattern of dates.
     */
    setDisabledDates : function(dd){
        if(Ext.isArray(dd)){
            this.disabledDates = dd;
            this.disabledDatesRE = null;
        }else{
            this.disabledDatesRE = dd;
        }
        this.initDisabledDays();
        this.update(this.value, true);
    },

/**
     * Replaces any existing disabled days (by index, 0-6) with new values and refreshes the DatePicker.
     * @param {Array} disabledDays An array of disabled day indexes. See the {@link #disabledDays} config
     * for details on supported values.
     */
    setDisabledDays : function(dd){
        this.disabledDays = dd;
        this.update(this.value, true);
    },

/**
     * Replaces any existing {@link #minDate} with the new value and refreshes the DatePicker.
     * @param {Date} value The minimum date that can be selected
     */
    setMinDate : function(dt){
        this.minDate = dt;
        this.update(this.value, true);
    },

/**
     * Replaces any existing {@link #maxDate} with the new value and refreshes the DatePicker.
     * @param {Date} value The maximum date that can be selected
     */
    setMaxDate : function(dt){
        this.maxDate = dt;
        this.update(this.value, true);
    },

/**
     * Sets the value of the date field
     * @param {Date} value The date to set
     */
    setValue : function(value){
        this.value = value.clearTime(true);
        this.update(this.value);
    },

/**
     * Gets the current selected value of the date field
     * @return {Date} The selected date
     */
    getValue : function(){
        return this.value;
    },

    // private
    focus : function(){
        this.update(this.activeDate);
    },

    // private
    onEnable: function(initial){
        Ext.DatePicker.superclass.onEnable.call(this);
        this.doDisabled(false);
        this.update(initial ? this.value : this.activeDate);
        if(Ext.isIE){
            this.el.repaint();
        }

    },

    // private
    onDisable : function(){
        Ext.DatePicker.superclass.onDisable.call(this);
        this.doDisabled(true);
        if(Ext.isIE && !Ext.isIE8){
            /* Really strange problem in IE6/7, when disabled, have to explicitly
             * repaint each of the nodes to get them to display correctly, simply
             * calling repaint on the main element doesn't appear to be enough.
             */
             Ext.each([].concat(this.textNodes, this.el.query('th span')), function(el){
                 Ext.fly(el).repaint();
             });
        }
    },

    // private
    doDisabled : function(disabled){
        this.keyNav.setDisabled(disabled);
        this.prevRepeater.setDisabled(disabled);
        this.nextRepeater.setDisabled(disabled);
        if(this.showToday){
            this.todayKeyListener.setDisabled(disabled);
            this.todayBtn.setDisabled(disabled);
        }
    },

    // private
    onRender : function(container, position){
        var m = [
             '',
                '',
                '',
                this.showToday ? '' : '',
                '

'],
                dn = this.dayNames,
                i;
        for(i = 0; i < 7; i++){
            var d = this.startDay+i;
            if(d > 6){
                d = d-7;
            }
            m.push('');
        }
        m[m.length] = '';
        for(i = 0; i < 42; i++) {
            if(i % 7 === 0 && i !== 0){
                m[m.length] = '';
            }
            m[m.length] = '';
        }
        m.push('
', dn[d].substr(0,1), '

');

        var el = document.createElement('div');
        el.className = 'x-date-picker';
        el.innerHTML = m.join('');

        container.dom.insertBefore(el, position);

        this.el = Ext.get(el);
        this.eventEl = Ext.get(el.firstChild);

        this.prevRepeater = new Ext.util.ClickRepeater(this.el.child('td.x-date-left a'), {
            handler: this.showPrevMonth,
            scope: this,
            preventDefault:true,
            stopDefault:true
        });

        this.nextRepeater = new Ext.util.ClickRepeater(this.el.child('td.x-date-right a'), {
            handler: this.showNextMonth,
            scope: this,
            preventDefault:true,
            stopDefault:true
        });

        this.monthPicker = this.el.down('div.x-date-mp');
        this.monthPicker.enableDisplayMode('block');

        this.keyNav = new Ext.KeyNav(this.eventEl, {
            'left' : function(e){
                if(e.ctrlKey){
                    this.showPrevMonth();
                }else{
                    this.update(this.activeDate.add('d', -1));
                }
            },

            'right' : function(e){
                if(e.ctrlKey){
                    this.showNextMonth();
                }else{
                    this.update(this.activeDate.add('d', 1));
                }
            },

            'up' : function(e){
                if(e.ctrlKey){
                    this.showNextYear();
                }else{
                    this.update(this.activeDate.add('d', -7));
                }
            },

            'down' : function(e){
                if(e.ctrlKey){
                    this.showPrevYear();
                }else{
                    this.update(this.activeDate.add('d', 7));
                }
            },

            'pageUp' : function(e){
                this.showNextMonth();
            },

            'pageDown' : function(e){
                this.showPrevMonth();
            },

            'enter' : function(e){
                e.stopPropagation();
                return true;
            },

            scope : this
        });

        this.el.unselectable();

        this.cells = this.el.select('table.x-date-inner tbody td');
        this.textNodes = this.el.query('table.x-date-inner tbody span');

        this.mbtn = new Ext.Button({
            text: ' ',
            tooltip: this.monthYearText,
            renderTo: this.el.child('td.x-date-middle', true)
        });
        this.mbtn.el.child('em').addClass('x-btn-arrow');

        if(this.showToday){
            this.todayKeyListener = this.eventEl.addKeyListener(Ext.EventObject.SPACE, this.selectToday,  this);
            var today = (new Date()).dateFormat(this.format);
            this.todayBtn = new Ext.Button({
                renderTo: this.el.child('td.x-date-bottom', true),
                text: String.format(this.todayText, today),
                tooltip: String.format(this.todayTip, today),
                handler: this.selectToday,
                scope: this
            });
        }
        this.mon(this.eventEl, 'mousewheel', this.handleMouseWheel, this);
        this.mon(this.eventEl, 'click', this.handleDateClick,  this, {delegate: 'a.x-date-date'});
        this.mon(this.mbtn, 'click', this.showMonthPicker, this);
        this.onEnable(true);
    },

    // private
    createMonthPicker : function(){
        if(!this.monthPicker.dom.firstChild){
            var buf = [''];
            for(var i = 0; i < 6; i++){
                buf.push(
                    '',
                    '',
                    i === 0 ?
                    '' :
                    ''
                );
            }
            buf.push(
                '',
                '
', Date.getShortMonthName(i), ' ', Date.getShortMonthName(i + 6), '

'
            );
            this.monthPicker.update(buf.join(''));

            this.mon(this.monthPicker, 'click', this.onMonthClick, this);
            this.mon(this.monthPicker, 'dblclick', this.onMonthDblClick, this);

            this.mpMonths = this.monthPicker.select('td.x-date-mp-month');
            this.mpYears = this.monthPicker.select('td.x-date-mp-year');

            this.mpMonths.each(function(m, a, i){
                i += 1;
                if((i%2) === 0){
                    m.dom.xmonth = 5 + Math.round(i * 0.5);
                }else{
                    m.dom.xmonth = Math.round((i-1) * 0.5);
                }
            });
        }
    },

    // private
    showMonthPicker : function(){
        if(!this.disabled){
            this.createMonthPicker();
            var size = this.el.getSize();
            this.monthPicker.setSize(size);
            this.monthPicker.child('table').setSize(size);

            this.mpSelMonth = (this.activeDate || this.value).getMonth();
            this.updateMPMonth(this.mpSelMonth);
            this.mpSelYear = (this.activeDate || this.value).getFullYear();
            this.updateMPYear(this.mpSelYear);

            this.monthPicker.slideIn('t', {duration:0.2});
        }
    },

    // private
    updateMPYear : function(y){
        this.mpyear = y;
        var ys = this.mpYears.elements;
        for(var i = 1; i <= 10; i++){
            var td = ys[i-1], y2;
            if((i%2) === 0){
                y2 = y + Math.round(i * 0.5);
                td.firstChild.innerHTML = y2;
                td.xyear = y2;
            }else{
                y2 = y - (5-Math.round(i * 0.5));
                td.firstChild.innerHTML = y2;
                td.xyear = y2;
            }
            this.mpYears.item(i-1)[y2 == this.mpSelYear ? 'addClass' : 'removeClass']('x-date-mp-sel');
        }
    },

    // private
    updateMPMonth : function(sm){
        this.mpMonths.each(function(m, a, i){
            m[m.dom.xmonth == sm ? 'addClass' : 'removeClass']('x-date-mp-sel');
        });
    },

    // private
    selectMPMonth : function(m){

    },

    // private
    onMonthClick : function(e, t){
        e.stopEvent();
        var el = new Ext.Element(t), pn;
        if(el.is('button.x-date-mp-cancel')){
            this.hideMonthPicker();
        }
        else if(el.is('button.x-date-mp-ok')){
            var d = new Date(this.mpSelYear, this.mpSelMonth, (this.activeDate || this.value).getDate());
            if(d.getMonth() != this.mpSelMonth){
                // 'fix' the JS rolling date conversion if needed
                d = new Date(this.mpSelYear, this.mpSelMonth, 1).getLastDateOfMonth();
            }
            this.update(d);
            this.hideMonthPicker();
        }
        else if((pn = el.up('td.x-date-mp-month', 2))){
            this.mpMonths.removeClass('x-date-mp-sel');
            pn.addClass('x-date-mp-sel');
            this.mpSelMonth = pn.dom.xmonth;
        }
        else if((pn = el.up('td.x-date-mp-year', 2))){
            this.mpYears.removeClass('x-date-mp-sel');
            pn.addClass('x-date-mp-sel');
            this.mpSelYear = pn.dom.xyear;
        }
        else if(el.is('a.x-date-mp-prev')){
            this.updateMPYear(this.mpyear-10);
        }
        else if(el.is('a.x-date-mp-next')){
            this.updateMPYear(this.mpyear+10);
        }
    },

    // private
    onMonthDblClick : function(e, t){
        e.stopEvent();
        var el = new Ext.Element(t), pn;
        if((pn = el.up('td.x-date-mp-month', 2))){
            this.update(new Date(this.mpSelYear, pn.dom.xmonth, (this.activeDate || this.value).getDate()));
            this.hideMonthPicker();
        }
        else if((pn = el.up('td.x-date-mp-year', 2))){
            this.update(new Date(pn.dom.xyear, this.mpSelMonth, (this.activeDate || this.value).getDate()));
            this.hideMonthPicker();
        }
    },

    // private
    hideMonthPicker : function(disableAnim){
        if(this.monthPicker){
            if(disableAnim === true){
                this.monthPicker.hide();
            }else{
                this.monthPicker.slideOut('t', {duration:0.2});
            }
        }
    },

    // private
    showPrevMonth : function(e){
        this.update(this.activeDate.add('mo', -1));
    },

    // private
    showNextMonth : function(e){
        this.update(this.activeDate.add('mo', 1));
    },

    // private
    showPrevYear : function(){
        this.update(this.activeDate.add('y', -1));
    },

    // private
    showNextYear : function(){
        this.update(this.activeDate.add('y', 1));
    },

    // private
    handleMouseWheel : function(e){
        e.stopEvent();
        if(!this.disabled){
            var delta = e.getWheelDelta();
            if(delta > 0){
                this.showPrevMonth();
            } else if(delta < 0){
                this.showNextMonth();
            }
        }
    },

    // private
    handleDateClick : function(e, t){
        e.stopEvent();
        if(!this.disabled && t.dateValue && !Ext.fly(t.parentNode).hasClass('x-date-disabled')){
            this.cancelFocus = this.focusOnSelect === false;
            this.setValue(new Date(t.dateValue));
            delete this.cancelFocus;
            this.fireEvent('select', this, this.value);
        }
    },

    // private
    selectToday : function(){
        if(this.todayBtn && !this.todayBtn.disabled){
            this.setValue(new Date().clearTime());
            this.fireEvent('select', this, this.value);
        }
    },

    // private
    update : function(date, forceRefresh){
        if(this.rendered){
            var vd = this.activeDate, vis = this.isVisible();
            this.activeDate = date;
            if(!forceRefresh && vd && this.el){
                var t = date.getTime();
                if(vd.getMonth() == date.getMonth() && vd.getFullYear() == date.getFullYear()){
                    this.cells.removeClass('x-date-selected');
                    this.cells.each(function(c){
                       if(c.dom.firstChild.dateValue == t){
                           c.addClass('x-date-selected');
                           if(vis && !this.cancelFocus){
                               Ext.fly(c.dom.firstChild).focus(50);
                           }
                           return false;
                       }
                    }, this);
                    return;
                }
            }
            var days = date.getDaysInMonth(),
                firstOfMonth = date.getFirstDateOfMonth(),
                startingPos = firstOfMonth.getDay()-this.startDay;

            if(startingPos < 0){
                startingPos += 7;
            }
            days += startingPos;

            var pm = date.add('mo', -1),
                prevStart = pm.getDaysInMonth()-startingPos,
                cells = this.cells.elements,
                textEls = this.textNodes,
                // convert everything to numbers so it's fast
                d = (new Date(pm.getFullYear(), pm.getMonth(), prevStart, this.initHour)),
                today = new Date().clearTime().getTime(),
                sel = date.clearTime(true).getTime(),
                min = this.minDate ? this.minDate.clearTime(true) : Number.NEGATIVE_INFINITY,
                max = this.maxDate ? this.maxDate.clearTime(true) : Number.POSITIVE_INFINITY,
                ddMatch = this.disabledDatesRE,
                ddText = this.disabledDatesText,
                ddays = this.disabledDays ? this.disabledDays.join('') : false,
                ddaysText = this.disabledDaysText,
                format = this.format;

            if(this.showToday){
                var td = new Date().clearTime(),
                    disable = (td < min || td > max ||
                    (ddMatch && format && ddMatch.test(td.dateFormat(format))) ||
                    (ddays && ddays.indexOf(td.getDay()) != -1));

                if(!this.disabled){
                    this.todayBtn.setDisabled(disable);
                    this.todayKeyListener[disable ? 'disable' : 'enable']();
                }
            }

            var setCellClass = function(cal, cell){
                cell.title = '';
                var t = d.clearTime(true).getTime();
                cell.firstChild.dateValue = t;
                if(t == today){
                    cell.className += ' x-date-today';
                    cell.title = cal.todayText;
                }
                if(t == sel){
                    cell.className += ' x-date-selected';
                    if(vis){
                        Ext.fly(cell.firstChild).focus(50);
                    }
                }
                // disabling
                if(t < min) {
                    cell.className = ' x-date-disabled';
                    cell.title = cal.minText;
                    return;
                }
                if(t > max) {
                    cell.className = ' x-date-disabled';
                    cell.title = cal.maxText;
                    return;
                }
                if(ddays){
                    if(ddays.indexOf(d.getDay()) != -1){
                        cell.title = ddaysText;
                        cell.className = ' x-date-disabled';
                    }
                }
                if(ddMatch && format){
                    var fvalue = d.dateFormat(format);
                    if(ddMatch.test(fvalue)){
                        cell.title = ddText.replace('%0', fvalue);
                        cell.className = ' x-date-disabled';
                    }
                }
            };

            var i = 0;
            for(; i < startingPos; i++) {
                textEls[i].innerHTML = (++prevStart);
                d.setDate(d.getDate()+1);
                cells[i].className = 'x-date-prevday';
                setCellClass(this, cells[i]);
            }
            for(; i < days; i++){
                var intDay = i - startingPos + 1;
                textEls[i].innerHTML = (intDay);
                d.setDate(d.getDate()+1);
                cells[i].className = 'x-date-active';
                setCellClass(this, cells[i]);
            }
            var extraDays = 0;
            for(; i < 42; i++) {
                 textEls[i].innerHTML = (++extraDays);
                 d.setDate(d.getDate()+1);
                 cells[i].className = 'x-date-nextday';
                 setCellClass(this, cells[i]);
            }

            this.mbtn.setText(this.monthNames[date.getMonth()] + ' ' + date.getFullYear());

            if(!this.internalRender){
                var main = this.el.dom.firstChild,
                    w = main.offsetWidth;
                this.el.setWidth(w + this.el.getBorderWidth('lr'));
                Ext.fly(main).setWidth(w);
                this.internalRender = true;
                // opera does not respect the auto grow header center column
                // then, after it gets a width opera refuses to recalculate
                // without a second pass
                if(Ext.isOpera && !this.secondPass){
                    main.rows[0].cells[1].style.width = (w - (main.rows[0].cells[0].offsetWidth+main.rows[0].cells[2].offsetWidth)) + 'px';
                    this.secondPass = true;
                    this.update.defer(10, this, [date]);
                }
            }
        }
    },

    // private
    beforeDestroy : function() {
        if(this.rendered){
            Ext.destroy(
                this.keyNav,
                this.monthPicker,
                this.eventEl,
                this.mbtn,
                this.nextRepeater,
                this.prevRepeater,
                this.cells.el,
                this.todayBtn
            );
            delete this.textNodes;
            delete this.cells.elements;
        }
    }

/**
     * @cfg {String} autoEl @hide
     */
});

Ext.reg('datepicker', Ext.DatePicker);


The source code

/*!
 * licensing@extjs.com
 * http://www.extjs.com/license
 */
/*
 * These classes are derivatives of the similarly named classes in the YUI Library.
 * The original license:
 * Copyright (c) 2006, Yahoo! Inc. All rights reserved.
 * Code licensed under the BSD License:
 * http://developer.yahoo.net/yui/license.txt
 */

(function() {

var Event=Ext.EventManager;
var Dom=Ext.lib.Dom;

/**
 * @class Ext.dd.DragDrop
 * Defines the interface and base operation of items that that can be
 * dragged or can be drop targets.  It was designed to be extended, overriding
 * the event handlers for startDrag, onDrag, onDragOver and onDragOut.
 * Up to three html elements can be associated with a DragDrop instance:
 *

 *
  • linked element: the element that is passed into the constructor.
 * This is the element which defines the boundaries for interaction with
 * other DragDrop objects.
    •
 *
  • handle element(s): The drag operation only occurs if the element that
 * was clicked matches a handle element.  By default this is the linked
 * element, but there are times that you will want only a portion of the
 * linked element to initiate the drag operation, and the setHandleElId()
 * method provides a way to define this.
    •
 *
  • drag element: this represents the element that would be moved along
 * with the cursor during a drag operation.  By default, this is the linked
 * element itself as in {@link Ext.dd.DD}.  setDragElId() lets you define
 * a separate element that would be moved, as in {@link Ext.dd.DDProxy}.
 *
    •
 *

 * This class should not be instantiated until the onload event to ensure that
 * the associated elements are available.
 * The following would define a DragDrop obj that would interact with any
 * other DragDrop obj in the "group1" group:
 *
 *  dd = new Ext.dd.DragDrop("div1", "group1");
 *

 * Since none of the event handlers have been implemented, nothing would
 * actually happen if you were to run the code above.  Normally you would
 * override this class or one of the default implementations, but you can
 * also override the methods you want on an instance of the class...
 *
 *  dd.onDragDrop = function(e, id) {
 *    alert("dd was dropped on " + id);
 *  }
 *

 * @constructor
 * @param {String} id of the element that is linked to this instance
 * @param {String} sGroup the group of related DragDrop objects
 * @param {object} config an object containing configurable attributes
 *                Valid properties for DragDrop:
 *                    padding, isTarget, maintainOffset, primaryButtonOnly
 */
Ext.dd.DragDrop = function(id, sGroup, config) {
    if(id) {
        this.init(id, sGroup, config);
    }
};

Ext.dd.DragDrop.prototype = {

/**
     * Set to false to enable a DragDrop object to fire drag events while dragging
     * over its own Element. Defaults to true - DragDrop objects do not by default
     * fire drag events to themselves.
     * @property ignoreSelf
     * @type Boolean
     */

/**
     * The id of the element associated with this object.  This is what we
     * refer to as the "linked element" because the size and position of
     * this element is used to determine when the drag and drop objects have
     * interacted.
     * @property id
     * @type String
     */
    id: null,

/**
     * Configuration attributes passed into the constructor
     * @property config
     * @type object
     */
    config: null,

    /**
     * The id of the element that will be dragged.  By default this is same
     * as the linked element, but could be changed to another element. Ex:
     * Ext.dd.DDProxy
     * @property dragElId
     * @type String
     * @private
     */
    dragElId: null,

    /**
     * The ID of the element that initiates the drag operation.  By default
     * this is the linked element, but could be changed to be a child of this
     * element.  This lets us do things like only starting the drag when the
     * header element within the linked html element is clicked.
     * @property handleElId
     * @type String
     * @private
     */
    handleElId: null,

/**
     * An object who's property names identify HTML tags to be considered invalid as drag handles.
     * A non-null property value identifies the tag as invalid. Defaults to the
     * following value which prevents drag operations from being initiated by <a> elements:

{
    A: "A"
}

     * @property invalidHandleTypes
     * @type Object
     */
    invalidHandleTypes: null,

/**
     * An object who's property names identify the IDs of elements to be considered invalid as drag handles.
     * A non-null property value identifies the ID as invalid. For example, to prevent
     * dragging from being initiated on element ID "foo", use:

{
    foo: true
}

     * @property invalidHandleIds
     * @type Object
     */
    invalidHandleIds: null,

/**
     * An Array of CSS class names for elements to be considered in valid as drag handles.
     * @property invalidHandleClasses
     * @type Array
     */
    invalidHandleClasses: null,

    /**
     * The linked element's absolute X position at the time the drag was
     * started
     * @property startPageX
     * @type int
     * @private
     */
    startPageX: 0,

    /**
     * The linked element's absolute X position at the time the drag was
     * started
     * @property startPageY
     * @type int
     * @private
     */
    startPageY: 0,

/**
     * The group defines a logical collection of DragDrop objects that are
     * related.  Instances only get events when interacting with other
     * DragDrop object in the same group.  This lets us define multiple
     * groups using a single DragDrop subclass if we want.
     * @property groups
     * @type object An object in the format {'group1':true, 'group2':true}
     */
    groups: null,

    /**
     * Individual drag/drop instances can be locked.  This will prevent
     * onmousedown start drag.
     * @property locked
     * @type boolean
     * @private
     */
    locked: false,

/**
     * Lock this instance
     * @method lock
     */
    lock: function() {
        this.locked = true;
    },

/**
     * When set to true, other DD objects in cooperating DDGroups do not receive
     * notification events when this DD object is dragged over them. Defaults to false.
     * @property moveOnly
     * @type boolean
     */
    moveOnly: false,

/**
     * Unlock this instace
     * @method unlock
     */
    unlock: function() {
        this.locked = false;
    },

/**
     * By default, all instances can be a drop target.  This can be disabled by
     * setting isTarget to false.
     * @property isTarget
     * @type boolean
     */
    isTarget: true,

/**
     * The padding configured for this drag and drop object for calculating
     * the drop zone intersection with this object.
     * @property padding
     * @type int[] An array containing the 4 padding values: [top, right, bottom, left]
     */
    padding: null,

    /**
     * Cached reference to the linked element
     * @property _domRef
     * @private
     */
    _domRef: null,

    /**
     * Internal typeof flag
     * @property __ygDragDrop
     * @private
     */
    __ygDragDrop: true,

    /**
     * Set to true when horizontal contraints are applied
     * @property constrainX
     * @type boolean
     * @private
     */
    constrainX: false,

    /**
     * Set to true when vertical contraints are applied
     * @property constrainY
     * @type boolean
     * @private
     */
    constrainY: false,

    /**
     * The left constraint
     * @property minX
     * @type int
     * @private
     */
    minX: 0,

    /**
     * The right constraint
     * @property maxX
     * @type int
     * @private
     */
    maxX: 0,

    /**
     * The up constraint
     * @property minY
     * @type int
     * @private
     */
    minY: 0,

    /**
     * The down constraint
     * @property maxY
     * @type int
     * @private
     */
    maxY: 0,

/**
     * Maintain offsets when we resetconstraints.  Set to true when you want
     * the position of the element relative to its parent to stay the same
     * when the page changes
     *
     * @property maintainOffset
     * @type boolean
     */
    maintainOffset: false,

/**
     * Array of pixel locations the element will snap to if we specified a
     * horizontal graduation/interval.  This array is generated automatically
     * when you define a tick interval.
     * @property xTicks
     * @type int[]
     */
    xTicks: null,

/**
     * Array of pixel locations the element will snap to if we specified a
     * vertical graduation/interval.  This array is generated automatically
     * when you define a tick interval.
     * @property yTicks
     * @type int[]
     */
    yTicks: null,

/**
     * By default the drag and drop instance will only respond to the primary
     * button click (left button for a right-handed mouse).  Set to true to
     * allow drag and drop to start with any mouse click that is propogated
     * by the browser
     * @property primaryButtonOnly
     * @type boolean
     */
    primaryButtonOnly: true,

/**
     * The available property is false until the linked dom element is accessible.
     * @property available
     * @type boolean
     */
    available: false,

/**
     * By default, drags can only be initiated if the mousedown occurs in the
     * region the linked element is.  This is done in part to work around a
     * bug in some browsers that mis-report the mousedown if the previous
     * mouseup happened outside of the window.  This property is set to true
     * if outer handles are defined.
     *
     * @property hasOuterHandles
     * @type boolean
     * @default false
     */
    hasOuterHandles: false,

    /**
     * Code that executes immediately before the startDrag event
     * @method b4StartDrag
     * @private
     */
    b4StartDrag: function(x, y) { },

/**
     * Abstract method called after a drag/drop object is clicked
     * and the drag or mousedown time thresholds have beeen met.
     * @method startDrag
     * @param {int} X click location
     * @param {int} Y click location
     */
    startDrag: function(x, y) { /* override this */ },

    /**
     * Code that executes immediately before the onDrag event
     * @method b4Drag
     * @private
     */
    b4Drag: function(e) { },

/**
     * Abstract method called during the onMouseMove event while dragging an
     * object.
     * @method onDrag
     * @param {Event} e the mousemove event
     */
    onDrag: function(e) { /* override this */ },

/**
     * Abstract method called when this element fist begins hovering over
     * another DragDrop obj
     * @method onDragEnter
     * @param {Event} e the mousemove event
     * @param {String|DragDrop[]} id In POINT mode, the element
     * id this is hovering over.  In INTERSECT mode, an array of one or more
     * dragdrop items being hovered over.
     */
    onDragEnter: function(e, id) { /* override this */ },

    /**
     * Code that executes immediately before the onDragOver event
     * @method b4DragOver
     * @private
     */
    b4DragOver: function(e) { },

/**
     * Abstract method called when this element is hovering over another
     * DragDrop obj
     * @method onDragOver
     * @param {Event} e the mousemove event
     * @param {String|DragDrop[]} id In POINT mode, the element
     * id this is hovering over.  In INTERSECT mode, an array of dd items
     * being hovered over.
     */
    onDragOver: function(e, id) { /* override this */ },

    /**
     * Code that executes immediately before the onDragOut event
     * @method b4DragOut
     * @private
     */
    b4DragOut: function(e) { },

/**
     * Abstract method called when we are no longer hovering over an element
     * @method onDragOut
     * @param {Event} e the mousemove event
     * @param {String|DragDrop[]} id In POINT mode, the element
     * id this was hovering over.  In INTERSECT mode, an array of dd items
     * that the mouse is no longer over.
     */
    onDragOut: function(e, id) { /* override this */ },

    /**
     * Code that executes immediately before the onDragDrop event
     * @method b4DragDrop
     * @private
     */
    b4DragDrop: function(e) { },

/**
     * Abstract method called when this item is dropped on another DragDrop
     * obj
     * @method onDragDrop
     * @param {Event} e the mouseup event
     * @param {String|DragDrop[]} id In POINT mode, the element
     * id this was dropped on.  In INTERSECT mode, an array of dd items this
     * was dropped on.
     */
    onDragDrop: function(e, id) { /* override this */ },

/**
     * Abstract method called when this item is dropped on an area with no
     * drop target
     * @method onInvalidDrop
     * @param {Event} e the mouseup event
     */
    onInvalidDrop: function(e) { /* override this */ },

    /**
     * Code that executes immediately before the endDrag event
     * @method b4EndDrag
     * @private
     */
    b4EndDrag: function(e) { },

/**
     * Fired when we are done dragging the object
     * @method endDrag
     * @param {Event} e the mouseup event
     */
    endDrag: function(e) { /* override this */ },

    /**
     * Code executed immediately before the onMouseDown event
     * @method b4MouseDown
     * @param {Event} e the mousedown event
     * @private
     */
    b4MouseDown: function(e) {  },

/**
     * Event handler that fires when a drag/drop obj gets a mousedown
     * @method onMouseDown
     * @param {Event} e the mousedown event
     */
    onMouseDown: function(e) { /* override this */ },

/**
     * Event handler that fires when a drag/drop obj gets a mouseup
     * @method onMouseUp
     * @param {Event} e the mouseup event
     */
    onMouseUp: function(e) { /* override this */ },

/**
     * Override the onAvailable method to do what is needed after the initial
     * position was determined.
     * @method onAvailable
     */
    onAvailable: function () {
    },

/**
     * Provides default constraint padding to "constrainTo" elements (defaults to {left: 0, right:0, top:0, bottom:0}).
     * @type Object
     */
    defaultPadding : {left:0, right:0, top:0, bottom:0},

/**
     * Initializes the drag drop object's constraints to restrict movement to a certain element.
 *
 * Usage:

 var dd = new Ext.dd.DDProxy("dragDiv1", "proxytest",
                { dragElId: "existingProxyDiv" });
 dd.startDrag = function(){
     this.constrainTo("parent-id");
 };

 * Or you can initalize it using the {@link Ext.Element} object:

 Ext.get("dragDiv1").initDDProxy("proxytest", {dragElId: "existingProxyDiv"}, {
     startDrag : function(){
         this.constrainTo("parent-id");
     }
 });

     * @param {Mixed} constrainTo The element to constrain to.
     * @param {Object/Number} pad (optional) Pad provides a way to specify "padding" of the constraints,
     * and can be either a number for symmetrical padding (4 would be equal to {left:4, right:4, top:4, bottom:4}) or
     * an object containing the sides to pad. For example: {right:10, bottom:10}
     * @param {Boolean} inContent (optional) Constrain the draggable in the content box of the element (inside padding and borders)
     */
    constrainTo : function(constrainTo, pad, inContent){
        if(Ext.isNumber(pad)){
            pad = {left: pad, right:pad, top:pad, bottom:pad};
        }
        pad = pad || this.defaultPadding;
        var b = Ext.get(this.getEl()).getBox(),
            ce = Ext.get(constrainTo),
            s = ce.getScroll(),
            c,
            cd = ce.dom;
        if(cd == document.body){
            c = { x: s.left, y: s.top, width: Ext.lib.Dom.getViewWidth(), height: Ext.lib.Dom.getViewHeight()};
        }else{
            var xy = ce.getXY();
            c = {x : xy[0], y: xy[1], width: cd.clientWidth, height: cd.clientHeight};
        }

        var topSpace = b.y - c.y,
            leftSpace = b.x - c.x;

        this.resetConstraints();
        this.setXConstraint(leftSpace - (pad.left||0), // left
                c.width - leftSpace - b.width - (pad.right||0), //right
                this.xTickSize
        );
        this.setYConstraint(topSpace - (pad.top||0), //top
                c.height - topSpace - b.height - (pad.bottom||0), //bottom
                this.yTickSize
        );
    },

/**
     * Returns a reference to the linked element
     * @method getEl
     * @return {HTMLElement} the html element
     */
    getEl: function() {
        if (!this._domRef) {
            this._domRef = Ext.getDom(this.id);
        }

        return this._domRef;
    },

/**
     * Returns a reference to the actual element to drag.  By default this is
     * the same as the html element, but it can be assigned to another
     * element. An example of this can be found in Ext.dd.DDProxy
     * @method getDragEl
     * @return {HTMLElement} the html element
     */
    getDragEl: function() {
        return Ext.getDom(this.dragElId);
    },

/**
     * Sets up the DragDrop object.  Must be called in the constructor of any
     * Ext.dd.DragDrop subclass
     * @method init
     * @param id the id of the linked element
     * @param {String} sGroup the group of related items
     * @param {object} config configuration attributes
     */
    init: function(id, sGroup, config) {
        this.initTarget(id, sGroup, config);
        Event.on(this.id, "mousedown", this.handleMouseDown, this);
        // Event.on(this.id, "selectstart", Event.preventDefault);
    },

/**
     * Initializes Targeting functionality only... the object does not
     * get a mousedown handler.
     * @method initTarget
     * @param id the id of the linked element
     * @param {String} sGroup the group of related items
     * @param {object} config configuration attributes
     */
    initTarget: function(id, sGroup, config) {

        // configuration attributes
        this.config = config || {};

        // create a local reference to the drag and drop manager
        this.DDM = Ext.dd.DDM;
        // initialize the groups array
        this.groups = {};

        // assume that we have an element reference instead of an id if the
        // parameter is not a string
        if (typeof id !== "string") {
            id = Ext.id(id);
        }

        // set the id
        this.id = id;

        // add to an interaction group
        this.addToGroup((sGroup) ? sGroup : "default");

        // We don't want to register this as the handle with the manager
        // so we just set the id rather than calling the setter.
        this.handleElId = id;

        // the linked element is the element that gets dragged by default
        this.setDragElId(id);

        // by default, clicked anchors will not start drag operations.
        this.invalidHandleTypes = { A: "A" };
        this.invalidHandleIds = {};
        this.invalidHandleClasses = [];

        this.applyConfig();

        this.handleOnAvailable();
    },

/**
     * Applies the configuration parameters that were passed into the constructor.
     * This is supposed to happen at each level through the inheritance chain.  So
     * a DDProxy implentation will execute apply config on DDProxy, DD, and
     * DragDrop in order to get all of the parameters that are available in
     * each object.
     * @method applyConfig
     */
    applyConfig: function() {

        // configurable properties:
        //    padding, isTarget, maintainOffset, primaryButtonOnly
        this.padding           = this.config.padding || [0, 0, 0, 0];
        this.isTarget          = (this.config.isTarget !== false);
        this.maintainOffset    = (this.config.maintainOffset);
        this.primaryButtonOnly = (this.config.primaryButtonOnly !== false);

    },

    /**
     * Executed when the linked element is available
     * @method handleOnAvailable
     * @private
     */
    handleOnAvailable: function() {
        this.available = true;
        this.resetConstraints();
        this.onAvailable();
    },

/**
     * Configures the padding for the target zone in px.  Effectively expands
     * (or reduces) the virtual object size for targeting calculations.
     * Supports css-style shorthand; if only one parameter is passed, all sides
     * will have that padding, and if only two are passed, the top and bottom
     * will have the first param, the left and right the second.
     * @method setPadding
     * @param {int} iTop    Top pad
     * @param {int} iRight  Right pad
     * @param {int} iBot    Bot pad
     * @param {int} iLeft   Left pad
     */
    setPadding: function(iTop, iRight, iBot, iLeft) {
        // this.padding = [iLeft, iRight, iTop, iBot];
        if (!iRight && 0 !== iRight) {
            this.padding = [iTop, iTop, iTop, iTop];
        } else if (!iBot && 0 !== iBot) {
            this.padding = [iTop, iRight, iTop, iRight];
        } else {
            this.padding = [iTop, iRight, iBot, iLeft];
        }
    },

/**
     * Stores the initial placement of the linked element.
     * @method setInitPosition
     * @param {int} diffX   the X offset, default 0
     * @param {int} diffY   the Y offset, default 0
     */
    setInitPosition: function(diffX, diffY) {
        var el = this.getEl();

        if (!this.DDM.verifyEl(el)) {
            return;
        }

        var dx = diffX || 0;
        var dy = diffY || 0;

        var p = Dom.getXY( el );

        this.initPageX = p[0] - dx;
        this.initPageY = p[1] - dy;

        this.lastPageX = p[0];
        this.lastPageY = p[1];

        this.setStartPosition(p);
    },

    /**
     * Sets the start position of the element.  This is set when the obj
     * is initialized, the reset when a drag is started.
     * @method setStartPosition
     * @param pos current position (from previous lookup)
     * @private
     */
    setStartPosition: function(pos) {
        var p = pos || Dom.getXY( this.getEl() );
        this.deltaSetXY = null;

        this.startPageX = p[0];
        this.startPageY = p[1];
    },

/**
     * Add this instance to a group of related drag/drop objects.  All
     * instances belong to at least one group, and can belong to as many
     * groups as needed.
     * @method addToGroup
     * @param sGroup {string} the name of the group
     */
    addToGroup: function(sGroup) {
        this.groups[sGroup] = true;
        this.DDM.regDragDrop(this, sGroup);
    },

/**
     * Remove's this instance from the supplied interaction group
     * @method removeFromGroup
     * @param {string}  sGroup  The group to drop
     */
    removeFromGroup: function(sGroup) {
        if (this.groups[sGroup]) {
            delete this.groups[sGroup];
        }

        this.DDM.removeDDFromGroup(this, sGroup);
    },

/**
     * Allows you to specify that an element other than the linked element
     * will be moved with the cursor during a drag
     * @method setDragElId
     * @param id {string} the id of the element that will be used to initiate the drag
     */
    setDragElId: function(id) {
        this.dragElId = id;
    },

/**
     * Allows you to specify a child of the linked element that should be
     * used to initiate the drag operation.  An example of this would be if
     * you have a content div with text and links.  Clicking anywhere in the
     * content area would normally start the drag operation.  Use this method
     * to specify that an element inside of the content div is the element
     * that starts the drag operation.
     * @method setHandleElId
     * @param id {string} the id of the element that will be used to
     * initiate the drag.
     */
    setHandleElId: function(id) {
        if (typeof id !== "string") {
            id = Ext.id(id);
        }
        this.handleElId = id;
        this.DDM.regHandle(this.id, id);
    },

/**
     * Allows you to set an element outside of the linked element as a drag
     * handle
     * @method setOuterHandleElId
     * @param id the id of the element that will be used to initiate the drag
     */
    setOuterHandleElId: function(id) {
        if (typeof id !== "string") {
            id = Ext.id(id);
        }
        Event.on(id, "mousedown",
                this.handleMouseDown, this);
        this.setHandleElId(id);

        this.hasOuterHandles = true;
    },

/**
     * Remove all drag and drop hooks for this element
     * @method unreg
     */
    unreg: function() {
        Event.un(this.id, "mousedown",
                this.handleMouseDown);
        this._domRef = null;
        this.DDM._remove(this);
    },

    destroy : function(){
        this.unreg();
    },

/**
     * Returns true if this instance is locked, or the drag drop mgr is locked
     * (meaning that all drag/drop is disabled on the page.)
     * @method isLocked
     * @return {boolean} true if this obj or all drag/drop is locked, else
     * false
     */
    isLocked: function() {
        return (this.DDM.isLocked() || this.locked);
    },

    /**
     * Fired when this object is clicked
     * @method handleMouseDown
     * @param {Event} e
     * @param {Ext.dd.DragDrop} oDD the clicked dd object (this dd obj)
     * @private
     */
    handleMouseDown: function(e, oDD){
        if (this.primaryButtonOnly && e.button != 0) {
            return;
        }

        if (this.isLocked()) {
            return;
        }

        this.DDM.refreshCache(this.groups);

        var pt = new Ext.lib.Point(Ext.lib.Event.getPageX(e), Ext.lib.Event.getPageY(e));
        if (!this.hasOuterHandles && !this.DDM.isOverTarget(pt, this) )  {
        } else {
            if (this.clickValidator(e)) {

                // set the initial element position
                this.setStartPosition();

                this.b4MouseDown(e);
                this.onMouseDown(e);

                this.DDM.handleMouseDown(e, this);

                this.DDM.stopEvent(e);
            } else {

            }
        }
    },

    clickValidator: function(e) {
        var target = e.getTarget();
        return ( this.isValidHandleChild(target) &&
                    (this.id == this.handleElId ||
                        this.DDM.handleWasClicked(target, this.id)) );
    },

/**
     * Allows you to specify a tag name that should not start a drag operation
     * when clicked.  This is designed to facilitate embedding links within a
     * drag handle that do something other than start the drag.
     * @method addInvalidHandleType
     * @param {string} tagName the type of element to exclude
     */
    addInvalidHandleType: function(tagName) {
        var type = tagName.toUpperCase();
        this.invalidHandleTypes[type] = type;
    },

/**
     * Lets you to specify an element id for a child of a drag handle
     * that should not initiate a drag
     * @method addInvalidHandleId
     * @param {string} id the element id of the element you wish to ignore
     */
    addInvalidHandleId: function(id) {
        if (typeof id !== "string") {
            id = Ext.id(id);
        }
        this.invalidHandleIds[id] = id;
    },

/**
     * Lets you specify a css class of elements that will not initiate a drag
     * @method addInvalidHandleClass
     * @param {string} cssClass the class of the elements you wish to ignore
     */
    addInvalidHandleClass: function(cssClass) {
        this.invalidHandleClasses.push(cssClass);
    },

/**
     * Unsets an excluded tag name set by addInvalidHandleType
     * @method removeInvalidHandleType
     * @param {string} tagName the type of element to unexclude
     */
    removeInvalidHandleType: function(tagName) {
        var type = tagName.toUpperCase();
        // this.invalidHandleTypes[type] = null;
        delete this.invalidHandleTypes[type];
    },

/**
     * Unsets an invalid handle id
     * @method removeInvalidHandleId
     * @param {string} id the id of the element to re-enable
     */
    removeInvalidHandleId: function(id) {
        if (typeof id !== "string") {
            id = Ext.id(id);
        }
        delete this.invalidHandleIds[id];
    },

/**
     * Unsets an invalid css class
     * @method removeInvalidHandleClass
     * @param {string} cssClass the class of the element(s) you wish to
     * re-enable
     */
    removeInvalidHandleClass: function(cssClass) {
        for (var i=0, len=this.invalidHandleClasses.length; i/**
     * Checks the tag exclusion list to see if this click should be ignored
     * @method isValidHandleChild
     * @param {HTMLElement} node the HTMLElement to evaluate
     * @return {boolean} true if this is a valid tag type, false if not
     */
    isValidHandleChild: function(node) {

        var valid = true;
        // var n = (node.nodeName == "#text") ? node.parentNode : node;
        var nodeName;
        try {
            nodeName = node.nodeName.toUpperCase();
        } catch(e) {
            nodeName = node.nodeName;
        }
        valid = valid && !this.invalidHandleTypes[nodeName];
        valid = valid && !this.invalidHandleIds[node.id];

        for (var i=0, len=this.invalidHandleClasses.length; valid && i= this.minX; i = i - iTickSize) {
            if (!tickMap[i]) {
                this.xTicks[this.xTicks.length] = i;
                tickMap[i] = true;
            }
        }

        for (i = this.initPageX; i <= this.maxX; i = i + iTickSize) {
            if (!tickMap[i]) {
                this.xTicks[this.xTicks.length] = i;
                tickMap[i] = true;
            }
        }

        this.xTicks.sort(this.DDM.numericSort) ;
    },

    /**
     * Create the array of vertical tick marks if an interval was specified in
     * setYConstraint().
     * @method setYTicks
     * @private
     */
    setYTicks: function(iStartY, iTickSize) {
        this.yTicks = [];
        this.yTickSize = iTickSize;

        var tickMap = {};

        for (var i = this.initPageY; i >= this.minY; i = i - iTickSize) {
            if (!tickMap[i]) {
                this.yTicks[this.yTicks.length] = i;
                tickMap[i] = true;
            }
        }

        for (i = this.initPageY; i <= this.maxY; i = i + iTickSize) {
            if (!tickMap[i]) {
                this.yTicks[this.yTicks.length] = i;
                tickMap[i] = true;
            }
        }

        this.yTicks.sort(this.DDM.numericSort) ;
    },

/**
     * By default, the element can be dragged any place on the screen.  Use
     * this method to limit the horizontal travel of the element.  Pass in
     * 0,0 for the parameters if you want to lock the drag to the y axis.
     * @method setXConstraint
     * @param {int} iLeft the number of pixels the element can move to the left
     * @param {int} iRight the number of pixels the element can move to the
     * right
     * @param {int} iTickSize optional parameter for specifying that the
     * element
     * should move iTickSize pixels at a time.
     */
    setXConstraint: function(iLeft, iRight, iTickSize) {
        this.leftConstraint = iLeft;
        this.rightConstraint = iRight;

        this.minX = this.initPageX - iLeft;
        this.maxX = this.initPageX + iRight;
        if (iTickSize) { this.setXTicks(this.initPageX, iTickSize); }

        this.constrainX = true;
    },

/**
     * Clears any constraints applied to this instance.  Also clears ticks
     * since they can't exist independent of a constraint at this time.
     * @method clearConstraints
     */
    clearConstraints: function() {
        this.constrainX = false;
        this.constrainY = false;
        this.clearTicks();
    },

/**
     * Clears any tick interval defined for this instance
     * @method clearTicks
     */
    clearTicks: function() {
        this.xTicks = null;
        this.yTicks = null;
        this.xTickSize = 0;
        this.yTickSize = 0;
    },

/**
     * By default, the element can be dragged any place on the screen.  Set
     * this to limit the vertical travel of the element.  Pass in 0,0 for the
     * parameters if you want to lock the drag to the x axis.
     * @method setYConstraint
     * @param {int} iUp the number of pixels the element can move up
     * @param {int} iDown the number of pixels the element can move down
     * @param {int} iTickSize optional parameter for specifying that the
     * element should move iTickSize pixels at a time.
     */
    setYConstraint: function(iUp, iDown, iTickSize) {
        this.topConstraint = iUp;
        this.bottomConstraint = iDown;

        this.minY = this.initPageY - iUp;
        this.maxY = this.initPageY + iDown;
        if (iTickSize) { this.setYTicks(this.initPageY, iTickSize); }

        this.constrainY = true;

    },

/**
     * resetConstraints must be called if you manually reposition a dd element.
     * @method resetConstraints
     * @param {boolean} maintainOffset
     */
    resetConstraints: function() {
        // Maintain offsets if necessary
        if (this.initPageX || this.initPageX === 0) {
            // figure out how much this thing has moved
            var dx = (this.maintainOffset) ? this.lastPageX - this.initPageX : 0;
            var dy = (this.maintainOffset) ? this.lastPageY - this.initPageY : 0;

            this.setInitPosition(dx, dy);

        // This is the first time we have detected the element's position
        } else {
            this.setInitPosition();
        }

        if (this.constrainX) {
            this.setXConstraint( this.leftConstraint,
                                 this.rightConstraint,
                                 this.xTickSize        );
        }

        if (this.constrainY) {
            this.setYConstraint( this.topConstraint,
                                 this.bottomConstraint,
                                 this.yTickSize         );
        }
    },

    /**
     * Normally the drag element is moved pixel by pixel, but we can specify
     * that it move a number of pixels at a time.  This method resolves the
     * location when we have it set up like this.
     * @method getTick
     * @param {int} val where we want to place the object
     * @param {int[]} tickArray sorted array of valid points
     * @return {int} the closest tick
     * @private
     */
    getTick: function(val, tickArray) {
        if (!tickArray) {
            // If tick interval is not defined, it is effectively 1 pixel,
            // so we return the value passed to us.
            return val;
        } else if (tickArray[0] >= val) {
            // The value is lower than the first tick, so we return the first
            // tick.
            return tickArray[0];
        } else {
            for (var i=0, len=tickArray.length; i= val) {
                    var diff1 = val - tickArray[i];
                    var diff2 = tickArray[next] - val;
                    return (diff2 > diff1) ? tickArray[i] : tickArray[next];
                }
            }

            // The value is larger than the last tick, so we return the last
            // tick.
            return tickArray[tickArray.length - 1];
        }
    },

/**
     * toString method
     * @method toString
     * @return {string} string representation of the dd obj
     */
    toString: function() {
        return ("DragDrop " + this.id);
    }

};

})();
/*!
 * The drag and drop utility provides a framework for building drag and drop
 * applications.  In addition to enabling drag and drop for specific elements,
 * the drag and drop elements are tracked by the manager class, and the
 * interactions between the various elements are tracked during the drag and
 * the implementing code is notified about these important moments.
 */

// Only load the library once.  Rewriting the manager class would orphan
// existing drag and drop instances.
if (!Ext.dd.DragDropMgr) {

/**
 * @class Ext.dd.DragDropMgr
 * DragDropMgr is a singleton that tracks the element interaction for
 * all DragDrop items in the window.  Generally, you will not call
 * this class directly, but it does have helper methods that could
 * be useful in your DragDrop implementations.
 * @singleton
 */
Ext.dd.DragDropMgr = function() {

    var Event = Ext.EventManager;

    return {

        /**
         * Two dimensional Array of registered DragDrop objects.  The first
         * dimension is the DragDrop item group, the second the DragDrop
         * object.
         * @property ids
         * @type String[]
         * @private
         * @static
         */
        ids: {},

        /**
         * Array of element ids defined as drag handles.  Used to determine
         * if the element that generated the mousedown event is actually the
         * handle and not the html element itself.
         * @property handleIds
         * @type String[]
         * @private
         * @static
         */
        handleIds: {},

        /**
         * the DragDrop object that is currently being dragged
         * @property dragCurrent
         * @type DragDrop
         * @private
         * @static
         **/
        dragCurrent: null,

        /**
         * the DragDrop object(s) that are being hovered over
         * @property dragOvers
         * @type Array
         * @private
         * @static
         */
        dragOvers: {},

        /**
         * the X distance between the cursor and the object being dragged
         * @property deltaX
         * @type int
         * @private
         * @static
         */
        deltaX: 0,

        /**
         * the Y distance between the cursor and the object being dragged
         * @property deltaY
         * @type int
         * @private
         * @static
         */
        deltaY: 0,

/**
         * Flag to determine if we should prevent the default behavior of the
         * events we define. By default this is true, but this can be set to
         * false if you need the default behavior (not recommended)
         * @property preventDefault
         * @type boolean
         * @static
         */
        preventDefault: true,

/**
         * Flag to determine if we should stop the propagation of the events
         * we generate. This is true by default but you may want to set it to
         * false if the html element contains other features that require the
         * mouse click.
         * @property stopPropagation
         * @type boolean
         * @static
         */
        stopPropagation: true,

        /**
         * Internal flag that is set to true when drag and drop has been
         * intialized
         * @property initialized
         * @private
         * @static
         */
        initialized: false,

        /**
         * All drag and drop can be disabled.
         * @property locked
         * @private
         * @static
         */
        locked: false,

        /**
         * Called the first time an element is registered.
         * @method init
         * @private
         * @static
         */
        init: function() {
            this.initialized = true;
        },

/**
         * In point mode, drag and drop interaction is defined by the
         * location of the cursor during the drag/drop
         * @property POINT
         * @type int
         * @static
         */
        POINT: 0,

/**
         * In intersect mode, drag and drop interaction is defined by the
         * overlap of two or more drag and drop objects.
         * @property INTERSECT
         * @type int
         * @static
         */
        INTERSECT: 1,

/**
         * The current drag and drop mode.  Default: POINT
         * @property mode
         * @type int
         * @static
         */
        mode: 0,

        /**
         * Runs method on all drag and drop objects
         * @method _execOnAll
         * @private
         * @static
         */
        _execOnAll: function(sMethod, args) {
            for (var i in this.ids) {
                for (var j in this.ids[i]) {
                    var oDD = this.ids[i][j];
                    if (! this.isTypeOfDD(oDD)) {
                        continue;
                    }
                    oDD[sMethod].apply(oDD, args);
                }
            }
        },

        /**
         * Drag and drop initialization.  Sets up the global event handlers
         * @method _onLoad
         * @private
         * @static
         */
        _onLoad: function() {

            this.init();

            Event.on(document, "mouseup",   this.handleMouseUp, this, true);
            Event.on(document, "mousemove", this.handleMouseMove, this, true);
            Event.on(window,   "unload",    this._onUnload, this, true);
            Event.on(window,   "resize",    this._onResize, this, true);
            // Event.on(window,   "mouseout",    this._test);

        },

        /**
         * Reset constraints on all drag and drop objs
         * @method _onResize
         * @private
         * @static
         */
        _onResize: function(e) {
            this._execOnAll("resetConstraints", []);
        },

/**
         * Lock all drag and drop functionality
         * @method lock
         * @static
         */
        lock: function() { this.locked = true; },

/**
         * Unlock all drag and drop functionality
         * @method unlock
         * @static
         */
        unlock: function() { this.locked = false; },

/**
         * Is drag and drop locked?
         * @method isLocked
         * @return {boolean} True if drag and drop is locked, false otherwise.
         * @static
         */
        isLocked: function() { return this.locked; },

        /**
         * Location cache that is set for all drag drop objects when a drag is
         * initiated, cleared when the drag is finished.
         * @property locationCache
         * @private
         * @static
         */
        locationCache: {},

/**
         * Set useCache to false if you want to force object the lookup of each
         * drag and drop linked element constantly during a drag.
         * @property useCache
         * @type boolean
         * @static
         */
        useCache: true,

/**
         * The number of pixels that the mouse needs to move after the
         * mousedown before the drag is initiated.  Default=3;
         * @property clickPixelThresh
         * @type int
         * @static
         */
        clickPixelThresh: 3,

/**
         * The number of milliseconds after the mousedown event to initiate the
         * drag if we don't get a mouseup event. Default=350
         * @property clickTimeThresh
         * @type int
         * @static
         */
        clickTimeThresh: 350,

        /**
         * Flag that indicates that either the drag pixel threshold or the
         * mousdown time threshold has been met
         * @property dragThreshMet
         * @type boolean
         * @private
         * @static
         */
        dragThreshMet: false,

        /**
         * Timeout used for the click time threshold
         * @property clickTimeout
         * @type Object
         * @private
         * @static
         */
        clickTimeout: null,

        /**
         * The X position of the mousedown event stored for later use when a
         * drag threshold is met.
         * @property startX
         * @type int
         * @private
         * @static
         */
        startX: 0,

        /**
         * The Y position of the mousedown event stored for later use when a
         * drag threshold is met.
         * @property startY
         * @type int
         * @private
         * @static
         */
        startY: 0,

/**
         * Each DragDrop instance must be registered with the DragDropMgr.
         * This is executed in DragDrop.init()
         * @method regDragDrop
         * @param {DragDrop} oDD the DragDrop object to register
         * @param {String} sGroup the name of the group this element belongs to
         * @static
         */
        regDragDrop: function(oDD, sGroup) {
            if (!this.initialized) { this.init(); }

            if (!this.ids[sGroup]) {
                this.ids[sGroup] = {};
            }
            this.ids[sGroup][oDD.id] = oDD;
        },

        /**
         * Removes the supplied dd instance from the supplied group. Executed
         * by DragDrop.removeFromGroup, so don't call this function directly.
         * @method removeDDFromGroup
         * @private
         * @static
         */
        removeDDFromGroup: function(oDD, sGroup) {
            if (!this.ids[sGroup]) {
                this.ids[sGroup] = {};
            }

            var obj = this.ids[sGroup];
            if (obj && obj[oDD.id]) {
                delete obj[oDD.id];
            }
        },

        /**
         * Unregisters a drag and drop item.  This is executed in
         * DragDrop.unreg, use that method instead of calling this directly.
         * @method _remove
         * @private
         * @static
         */
        _remove: function(oDD) {
            for (var g in oDD.groups) {
                if (g && this.ids[g] && this.ids[g][oDD.id]) {
                    delete this.ids[g][oDD.id];
                }
            }
            delete this.handleIds[oDD.id];
        },

/**
         * Each DragDrop handle element must be registered.  This is done
         * automatically when executing DragDrop.setHandleElId()
         * @method regHandle
         * @param {String} sDDId the DragDrop id this element is a handle for
         * @param {String} sHandleId the id of the element that is the drag
         * handle
         * @static
         */
        regHandle: function(sDDId, sHandleId) {
            if (!this.handleIds[sDDId]) {
                this.handleIds[sDDId] = {};
            }
            this.handleIds[sDDId][sHandleId] = sHandleId;
        },

/**
         * Utility function to determine if a given element has been
         * registered as a drag drop item.
         * @method isDragDrop
         * @param {String} id the element id to check
         * @return {boolean} true if this element is a DragDrop item,
         * false otherwise
         * @static
         */
        isDragDrop: function(id) {
            return ( this.getDDById(id) ) ? true : false;
        },

/**
         * Returns the drag and drop instances that are in all groups the
         * passed in instance belongs to.
         * @method getRelated
         * @param {DragDrop} p_oDD the obj to get related data for
         * @param {boolean} bTargetsOnly if true, only return targetable objs
         * @return {DragDrop[]} the related instances
         * @static
         */
        getRelated: function(p_oDD, bTargetsOnly) {
            var oDDs = [];
            for (var i in p_oDD.groups) {
                for (var j in this.ids[i]) {
                    var dd = this.ids[i][j];
                    if (! this.isTypeOfDD(dd)) {
                        continue;
                    }
                    if (!bTargetsOnly || dd.isTarget) {
                        oDDs[oDDs.length] = dd;
                    }
                }
            }

            return oDDs;
        },

/**
         * Returns true if the specified dd target is a legal target for
         * the specifice drag obj
         * @method isLegalTarget
         * @param {DragDrop} oDD the drag obj
         * @param {DragDrop} oTargetDD the target
         * @return {boolean} true if the target is a legal target for the
         * dd obj
         * @static
         */
        isLegalTarget: function (oDD, oTargetDD) {
            var targets = this.getRelated(oDD, true);
            for (var i=0, len=targets.length;i/**
         * My goal is to be able to transparently determine if an object is
         * typeof DragDrop, and the exact subclass of DragDrop.  typeof
         * returns "object", oDD.constructor.toString() always returns
         * "DragDrop" and not the name of the subclass.  So for now it just
         * evaluates a well-known variable in DragDrop.
         * @method isTypeOfDD
         * @param {Object} the object to evaluate
         * @return {boolean} true if typeof oDD = DragDrop
         * @static
         */
        isTypeOfDD: function (oDD) {
            return (oDD && oDD.__ygDragDrop);
        },

/**
         * Utility function to determine if a given element has been
         * registered as a drag drop handle for the given Drag Drop object.
         * @method isHandle
         * @param {String} id the element id to check
         * @return {boolean} true if this element is a DragDrop handle, false
         * otherwise
         * @static
         */
        isHandle: function(sDDId, sHandleId) {
            return ( this.handleIds[sDDId] &&
                            this.handleIds[sDDId][sHandleId] );
        },

/**
         * Returns the DragDrop instance for a given id
         * @method getDDById
         * @param {String} id the id of the DragDrop object
         * @return {DragDrop} the drag drop object, null if it is not found
         * @static
         */
        getDDById: function(id) {
            for (var i in this.ids) {
                if (this.ids[i][id]) {
                    return this.ids[i][id];
                }
            }
            return null;
        },

        /**
         * Fired after a registered DragDrop object gets the mousedown event.
         * Sets up the events required to track the object being dragged
         * @method handleMouseDown
         * @param {Event} e the event
         * @param oDD the DragDrop object being dragged
         * @private
         * @static
         */
        handleMouseDown: function(e, oDD) {
            if(Ext.QuickTips){
                Ext.QuickTips.disable();
            }
            if(this.dragCurrent){
                // the original browser mouseup wasn't handled (e.g. outside FF browser window)
                // so clean up first to avoid breaking the next drag
                this.handleMouseUp(e);
            }

            this.currentTarget = e.getTarget();
            this.dragCurrent = oDD;

            var el = oDD.getEl();

            // track start position
            this.startX = e.getPageX();
            this.startY = e.getPageY();

            this.deltaX = this.startX - el.offsetLeft;
            this.deltaY = this.startY - el.offsetTop;

            this.dragThreshMet = false;

            this.clickTimeout = setTimeout(
                    function() {
                        var DDM = Ext.dd.DDM;
                        DDM.startDrag(DDM.startX, DDM.startY);
                    },
                    this.clickTimeThresh );
        },

/**
         * Fired when either the drag pixel threshol or the mousedown hold
         * time threshold has been met.
         * @method startDrag
         * @param x {int} the X position of the original mousedown
         * @param y {int} the Y position of the original mousedown
         * @static
         */
        startDrag: function(x, y) {
            clearTimeout(this.clickTimeout);
            if (this.dragCurrent) {
                this.dragCurrent.b4StartDrag(x, y);
                this.dragCurrent.startDrag(x, y);
            }
            this.dragThreshMet = true;
        },

        /**
         * Internal function to handle the mouseup event.  Will be invoked
         * from the context of the document.
         * @method handleMouseUp
         * @param {Event} e the event
         * @private
         * @static
         */
        handleMouseUp: function(e) {

            if(Ext.QuickTips){
                Ext.QuickTips.enable();
            }
            if (! this.dragCurrent) {
                return;
            }

            clearTimeout(this.clickTimeout);

            if (this.dragThreshMet) {
                this.fireEvents(e, true);
            } else {
            }

            this.stopDrag(e);

            this.stopEvent(e);
        },

/**
         * Utility to stop event propagation and event default, if these
         * features are turned on.
         * @method stopEvent
         * @param {Event} e the event as returned by this.getEvent()
         * @static
         */
        stopEvent: function(e){
            if(this.stopPropagation) {
                e.stopPropagation();
            }

            if (this.preventDefault) {
                e.preventDefault();
            }
        },

        /**
         * Internal function to clean up event handlers after the drag
         * operation is complete
         * @method stopDrag
         * @param {Event} e the event
         * @private
         * @static
         */
        stopDrag: function(e) {
            // Fire the drag end event for the item that was dragged
            if (this.dragCurrent) {
                if (this.dragThreshMet) {
                    this.dragCurrent.b4EndDrag(e);
                    this.dragCurrent.endDrag(e);
                }

                this.dragCurrent.onMouseUp(e);
            }

            this.dragCurrent = null;
            this.dragOvers = {};
        },

        /**
         * Internal function to handle the mousemove event.  Will be invoked
         * from the context of the html element.
         *
         * @TODO figure out what we can do about mouse events lost when the
         * user drags objects beyond the window boundary.  Currently we can
         * detect this in internet explorer by verifying that the mouse is
         * down during the mousemove event.  Firefox doesn't give us the
         * button state on the mousemove event.
         * @method handleMouseMove
         * @param {Event} e the event
         * @private
         * @static
         */
        handleMouseMove: function(e) {
            if (! this.dragCurrent) {
                return true;
            }
            // var button = e.which || e.button;

            // check for IE mouseup outside of page boundary
            if (Ext.isIE && (e.button !== 0 && e.button !== 1 && e.button !== 2)) {
                this.stopEvent(e);
                return this.handleMouseUp(e);
            }

            if (!this.dragThreshMet) {
                var diffX = Math.abs(this.startX - e.getPageX());
                var diffY = Math.abs(this.startY - e.getPageY());
                if (diffX > this.clickPixelThresh ||
                            diffY > this.clickPixelThresh) {
                    this.startDrag(this.startX, this.startY);
                }
            }

            if (this.dragThreshMet) {
                this.dragCurrent.b4Drag(e);
                this.dragCurrent.onDrag(e);
                if(!this.dragCurrent.moveOnly){
                    this.fireEvents(e, false);
                }
            }

            this.stopEvent(e);

            return true;
        },

        /**
         * Iterates over all of the DragDrop elements to find ones we are
         * hovering over or dropping on
         * @method fireEvents
         * @param {Event} e the event
         * @param {boolean} isDrop is this a drop op or a mouseover op?
         * @private
         * @static
         */
        fireEvents: function(e, isDrop) {
            var dc = this.dragCurrent;

            // If the user did the mouse up outside of the window, we could
            // get here even though we have ended the drag.
            if (!dc || dc.isLocked()) {
                return;
            }

            var pt = e.getPoint();

            // cache the previous dragOver array
            var oldOvers = [];

            var outEvts   = [];
            var overEvts  = [];
            var dropEvts  = [];
            var enterEvts = [];

            // Check to see if the object(s) we were hovering over is no longer
            // being hovered over so we can fire the onDragOut event
            for (var i in this.dragOvers) {

                var ddo = this.dragOvers[i];

                if (! this.isTypeOfDD(ddo)) {
                    continue;
                }

                if (! this.isOverTarget(pt, ddo, this.mode)) {
                    outEvts.push( ddo );
                }

                oldOvers[i] = true;
                delete this.dragOvers[i];
            }

            for (var sGroup in dc.groups) {

                if ("string" != typeof sGroup) {
                    continue;
                }

                for (i in this.ids[sGroup]) {
                    var oDD = this.ids[sGroup][i];
                    if (! this.isTypeOfDD(oDD)) {
                        continue;
                    }

                    if (oDD.isTarget && !oDD.isLocked() && ((oDD != dc) || (dc.ignoreSelf === false))) {
                        if (this.isOverTarget(pt, oDD, this.mode)) {
                            // look for drop interactions
                            if (isDrop) {
                                dropEvts.push( oDD );
                            // look for drag enter and drag over interactions
                            } else {

                                // initial drag over: dragEnter fires
                                if (!oldOvers[oDD.id]) {
                                    enterEvts.push( oDD );
                                // subsequent drag overs: dragOver fires
                                } else {
                                    overEvts.push( oDD );
                                }

                                this.dragOvers[oDD.id] = oDD;
                            }
                        }
                    }
                }
            }

            if (this.mode) {
                if (outEvts.length) {
                    dc.b4DragOut(e, outEvts);
                    dc.onDragOut(e, outEvts);
                }

                if (enterEvts.length) {
                    dc.onDragEnter(e, enterEvts);
                }

                if (overEvts.length) {
                    dc.b4DragOver(e, overEvts);
                    dc.onDragOver(e, overEvts);
                }

                if (dropEvts.length) {
                    dc.b4DragDrop(e, dropEvts);
                    dc.onDragDrop(e, dropEvts);
                }

            } else {
                // fire dragout events
                var len = 0;
                for (i=0, len=outEvts.length; i/**
         * Helper function for getting the best match from the list of drag
         * and drop objects returned by the drag and drop events when we are
         * in INTERSECT mode.  It returns either the first object that the
         * cursor is over, or the object that has the greatest overlap with
         * the dragged element.
         * @method getBestMatch
         * @param  {DragDrop[]} dds The array of drag and drop objects
         * targeted
         * @return {DragDrop}       The best single match
         * @static
         */
        getBestMatch: function(dds) {
            var winner = null;
            // Return null if the input is not what we expect
            //if (!dds || !dds.length || dds.length == 0) {
               // winner = null;
            // If there is only one item, it wins
            //} else if (dds.length == 1) {

            var len = dds.length;

            if (len == 1) {
                winner = dds[0];
            } else {
                // Loop through the targeted items
                for (var i=0; i/**
         * Refreshes the cache of the top-left and bottom-right points of the
         * drag and drop objects in the specified group(s).  This is in the
         * format that is stored in the drag and drop instance, so typical
         * usage is:
         *
         * Ext.dd.DragDropMgr.refreshCache(ddinstance.groups);
         *
         * Alternatively:
         *
         * Ext.dd.DragDropMgr.refreshCache({group1:true, group2:true});
         *
         * @TODO this really should be an indexed array.  Alternatively this
         * method could accept both.
         * @method refreshCache
         * @param {Object} groups an associative array of groups to refresh
         * @static
         */
        refreshCache: function(groups) {
            for (var sGroup in groups) {
                if ("string" != typeof sGroup) {
                    continue;
                }
                for (var i in this.ids[sGroup]) {
                    var oDD = this.ids[sGroup][i];

                    if (this.isTypeOfDD(oDD)) {
                    // if (this.isTypeOfDD(oDD) && oDD.isTarget) {
                        var loc = this.getLocation(oDD);
                        if (loc) {
                            this.locationCache[oDD.id] = loc;
                        } else {
                            delete this.locationCache[oDD.id];
                            // this will unregister the drag and drop object if
                            // the element is not in a usable state
                            // oDD.unreg();
                        }
                    }
                }
            }
        },

/**
         * This checks to make sure an element exists and is in the DOM.  The
         * main purpose is to handle cases where innerHTML is used to remove
         * drag and drop objects from the DOM.  IE provides an 'unspecified
         * error' when trying to access the offsetParent of such an element
         * @method verifyEl
         * @param {HTMLElement} el the element to check
         * @return {boolean} true if the element looks usable
         * @static
         */
        verifyEl: function(el) {
            if (el) {
                var parent;
                if(Ext.isIE){
                    try{
                        parent = el.offsetParent;
                    }catch(e){}
                }else{
                    parent = el.offsetParent;
                }
                if (parent) {
                    return true;
                }
            }

            return false;
        },

/**
         * Returns a Region object containing the drag and drop element's position
         * and size, including the padding configured for it
         * @method getLocation
         * @param {DragDrop} oDD the drag and drop object to get the
         *                       location for
         * @return {Ext.lib.Region} a Region object representing the total area
         *                             the element occupies, including any padding
         *                             the instance is configured for.
         * @static
         */
        getLocation: function(oDD) {
            if (! this.isTypeOfDD(oDD)) {
                return null;
            }

            var el = oDD.getEl(), pos, x1, x2, y1, y2, t, r, b, l;

            try {
                pos= Ext.lib.Dom.getXY(el);
            } catch (e) { }

            if (!pos) {
                return null;
            }

            x1 = pos[0];
            x2 = x1 + el.offsetWidth;
            y1 = pos[1];
            y2 = y1 + el.offsetHeight;

            t = y1 - oDD.padding[0];
            r = x2 + oDD.padding[1];
            b = y2 + oDD.padding[2];
            l = x1 - oDD.padding[3];

            return new Ext.lib.Region( t, r, b, l );
        },

        /**
         * Checks the cursor location to see if it over the target
         * @method isOverTarget
         * @param {Ext.lib.Point} pt The point to evaluate
         * @param {DragDrop} oTarget the DragDrop object we are inspecting
         * @return {boolean} true if the mouse is over the target
         * @private
         * @static
         */
        isOverTarget: function(pt, oTarget, intersect) {
            // use cache if available
            var loc = this.locationCache[oTarget.id];
            if (!loc || !this.useCache) {
                loc = this.getLocation(oTarget);
                this.locationCache[oTarget.id] = loc;

            }

            if (!loc) {
                return false;
            }

            oTarget.cursorIsOver = loc.contains( pt );

            // DragDrop is using this as a sanity check for the initial mousedown
            // in this case we are done.  In POINT mode, if the drag obj has no
            // contraints, we are also done. Otherwise we need to evaluate the
            // location of the target as related to the actual location of the
            // dragged element.
            var dc = this.dragCurrent;
            if (!dc || !dc.getTargetCoord ||
                    (!intersect && !dc.constrainX && !dc.constrainY)) {
                return oTarget.cursorIsOver;
            }

            oTarget.overlap = null;

            // Get the current location of the drag element, this is the
            // location of the mouse event less the delta that represents
            // where the original mousedown happened on the element.  We
            // need to consider constraints and ticks as well.
            var pos = dc.getTargetCoord(pt.x, pt.y);

            var el = dc.getDragEl();
            var curRegion = new Ext.lib.Region( pos.y,
                                                   pos.x + el.offsetWidth,
                                                   pos.y + el.offsetHeight,
                                                   pos.x );

            var overlap = curRegion.intersect(loc);

            if (overlap) {
                oTarget.overlap = overlap;
                return (intersect) ? true : oTarget.cursorIsOver;
            } else {
                return false;
            }
        },

        /**
         * unload event handler
         * @method _onUnload
         * @private
         * @static
         */
        _onUnload: function(e, me) {
            Ext.dd.DragDropMgr.unregAll();
        },

        /**
         * Cleans up the drag and drop events and objects.
         * @method unregAll
         * @private
         * @static
         */
        unregAll: function() {

            if (this.dragCurrent) {
                this.stopDrag();
                this.dragCurrent = null;
            }

            this._execOnAll("unreg", []);

            for (var i in this.elementCache) {
                delete this.elementCache[i];
            }

            this.elementCache = {};
            this.ids = {};
        },

        /**
         * A cache of DOM elements
         * @property elementCache
         * @private
         * @static
         */
        elementCache: {},

        /**
         * Get the wrapper for the DOM element specified
         * @method getElWrapper
         * @param {String} id the id of the element to get
         * @return {Ext.dd.DDM.ElementWrapper} the wrapped element
         * @private
         * @deprecated This wrapper isn't that useful
         * @static
         */
        getElWrapper: function(id) {
            var oWrapper = this.elementCache[id];
            if (!oWrapper || !oWrapper.el) {
                oWrapper = this.elementCache[id] =
                    new this.ElementWrapper(Ext.getDom(id));
            }
            return oWrapper;
        },

/**
         * Returns the actual DOM element
         * @method getElement
         * @param {String} id the id of the elment to get
         * @return {Object} The element
         * @deprecated use Ext.lib.Ext.getDom instead
         * @static
         */
        getElement: function(id) {
            return Ext.getDom(id);
        },

/**
         * Returns the style property for the DOM element (i.e.,
         * document.getElById(id).style)
         * @method getCss
         * @param {String} id the id of the elment to get
         * @return {Object} The style property of the element
         * @deprecated use Ext.lib.Dom instead
         * @static
         */
        getCss: function(id) {
            var el = Ext.getDom(id);
            return (el) ? el.style : null;
        },

/**
         * Inner class for cached elements
         * @class Ext.dd.DragDropMgr.ElementWrapper
         * @for DragDropMgr
         * @private
         * @deprecated
         */
        ElementWrapper: function(el) {

/**
                 * The element
                 * @property el
                 */
                this.el = el || null;

/**
                 * The element id
                 * @property id
                 */
                this.id = this.el && el.id;

/**
                 * A reference to the style property
                 * @property css
                 */
                this.css = this.el && el.style;
            },

/**
         * Returns the X position of an html element
         * @method getPosX
         * @param el the element for which to get the position
         * @return {int} the X coordinate
         * @for DragDropMgr
         * @deprecated use Ext.lib.Dom.getX instead
         * @static
         */
        getPosX: function(el) {
            return Ext.lib.Dom.getX(el);
        },

/**
         * Returns the Y position of an html element
         * @method getPosY
         * @param el the element for which to get the position
         * @return {int} the Y coordinate
         * @deprecated use Ext.lib.Dom.getY instead
         * @static
         */
        getPosY: function(el) {
            return Ext.lib.Dom.getY(el);
        },

/**
         * Swap two nodes.  In IE, we use the native method, for others we
         * emulate the IE behavior
         * @method swapNode
         * @param n1 the first node to swap
         * @param n2 the other node to swap
         * @static
         */
        swapNode: function(n1, n2) {
            if (n1.swapNode) {
                n1.swapNode(n2);
            } else {
                var p = n2.parentNode;
                var s = n2.nextSibling;

                if (s == n1) {
                    p.insertBefore(n1, n2);
                } else if (n2 == n1.nextSibling) {
                    p.insertBefore(n2, n1);
                } else {
                    n1.parentNode.replaceChild(n2, n1);
                    p.insertBefore(n1, s);
                }
            }
        },

        /**
         * Returns the current scroll position
         * @method getScroll
         * @private
         * @static
         */
        getScroll: function () {
            var t, l, dde=document.documentElement, db=document.body;
            if (dde && (dde.scrollTop || dde.scrollLeft)) {
                t = dde.scrollTop;
                l = dde.scrollLeft;
            } else if (db) {
                t = db.scrollTop;
                l = db.scrollLeft;
            } else {

            }
            return { top: t, left: l };
        },

/**
         * Returns the specified element style property
         * @method getStyle
         * @param {HTMLElement} el          the element
         * @param {string}      styleProp   the style property
         * @return {string} The value of the style property
         * @deprecated use Ext.lib.Dom.getStyle
         * @static
         */
        getStyle: function(el, styleProp) {
            return Ext.fly(el).getStyle(styleProp);
        },

/**
         * Gets the scrollTop
         * @method getScrollTop
         * @return {int} the document's scrollTop
         * @static
         */
        getScrollTop: function () {
            return this.getScroll().top;
        },

/**
         * Gets the scrollLeft
         * @method getScrollLeft
         * @return {int} the document's scrollTop
         * @static
         */
        getScrollLeft: function () {
            return this.getScroll().left;
        },

/**
         * Sets the x/y position of an element to the location of the
         * target element.
         * @method moveToEl
         * @param {HTMLElement} moveEl      The element to move
         * @param {HTMLElement} targetEl    The position reference element
         * @static
         */
        moveToEl: function (moveEl, targetEl) {
            var aCoord = Ext.lib.Dom.getXY(targetEl);
            Ext.lib.Dom.setXY(moveEl, aCoord);
        },

/**
         * Numeric array sort function
         * @method numericSort
         * @static
         */
        numericSort: function(a, b) {
            return (a - b);
        },

        /**
         * Internal counter
         * @property _timeoutCount
         * @private
         * @static
         */
        _timeoutCount: 0,

        /**
         * Trying to make the load order less important.  Without this we get
         * an error if this file is loaded before the Event Utility.
         * @method _addListeners
         * @private
         * @static
         */
        _addListeners: function() {
            var DDM = Ext.dd.DDM;
            if ( Ext.lib.Event && document ) {
                DDM._onLoad();
            } else {
                if (DDM._timeoutCount > 2000) {
                } else {
                    setTimeout(DDM._addListeners, 10);
                    if (document && document.body) {
                        DDM._timeoutCount += 1;
                    }
                }
            }
        },

/**
         * Recursively searches the immediate parent and all child nodes for
         * the handle element in order to determine wheter or not it was
         * clicked.
         * @method handleWasClicked
         * @param node the html element to inspect
         * @static
         */
        handleWasClicked: function(node, id) {
            if (this.isHandle(id, node.id)) {
                return true;
            } else {
                // check to see if this is a text node child of the one we want
                var p = node.parentNode;

                while (p) {
                    if (this.isHandle(id, p.id)) {
                        return true;
                    } else {
                        p = p.parentNode;
                    }
                }
            }

            return false;
        }

    };

}();

// shorter alias, save a few bytes
Ext.dd.DDM = Ext.dd.DragDropMgr;
Ext.dd.DDM._addListeners();

}

/**
 * @class Ext.dd.DD
 * A DragDrop implementation where the linked element follows the
 * mouse cursor during a drag.
 * @extends Ext.dd.DragDrop
 * @constructor
 * @param {String} id the id of the linked element
 * @param {String} sGroup the group of related DragDrop items
 * @param {object} config an object containing configurable attributes
 *                Valid properties for DD:
 *                    scroll
 */
Ext.dd.DD = function(id, sGroup, config) {
    if (id) {
        this.init(id, sGroup, config);
    }
};

Ext.extend(Ext.dd.DD, Ext.dd.DragDrop, {

/**
     * When set to true, the utility automatically tries to scroll the browser
     * window when a drag and drop element is dragged near the viewport boundary.
     * Defaults to true.
     * @property scroll
     * @type boolean
     */
    scroll: true,

/**
     * Sets the pointer offset to the distance between the linked element's top
     * left corner and the location the element was clicked
     * @method autoOffset
     * @param {int} iPageX the X coordinate of the click
     * @param {int} iPageY the Y coordinate of the click
     */
    autoOffset: function(iPageX, iPageY) {
        var x = iPageX - this.startPageX;
        var y = iPageY - this.startPageY;
        this.setDelta(x, y);
    },

/**
     * Sets the pointer offset.  You can call this directly to force the
     * offset to be in a particular location (e.g., pass in 0,0 to set it
     * to the center of the object)
     * @method setDelta
     * @param {int} iDeltaX the distance from the left
     * @param {int} iDeltaY the distance from the top
     */
    setDelta: function(iDeltaX, iDeltaY) {
        this.deltaX = iDeltaX;
        this.deltaY = iDeltaY;
    },

/**
     * Sets the drag element to the location of the mousedown or click event,
     * maintaining the cursor location relative to the location on the element
     * that was clicked.  Override this if you want to place the element in a
     * location other than where the cursor is.
     * @method setDragElPos
     * @param {int} iPageX the X coordinate of the mousedown or drag event
     * @param {int} iPageY the Y coordinate of the mousedown or drag event
     */
    setDragElPos: function(iPageX, iPageY) {
        // the first time we do this, we are going to check to make sure
        // the element has css positioning

        var el = this.getDragEl();
        this.alignElWithMouse(el, iPageX, iPageY);
    },

/**
     * Sets the element to the location of the mousedown or click event,
     * maintaining the cursor location relative to the location on the element
     * that was clicked.  Override this if you want to place the element in a
     * location other than where the cursor is.
     * @method alignElWithMouse
     * @param {HTMLElement} el the element to move
     * @param {int} iPageX the X coordinate of the mousedown or drag event
     * @param {int} iPageY the Y coordinate of the mousedown or drag event
     */
    alignElWithMouse: function(el, iPageX, iPageY) {
        var oCoord = this.getTargetCoord(iPageX, iPageY);
        var fly = el.dom ? el : Ext.fly(el, '_dd');
        if (!this.deltaSetXY) {
            var aCoord = [oCoord.x, oCoord.y];
            fly.setXY(aCoord);
            var newLeft = fly.getLeft(true);
            var newTop  = fly.getTop(true);
            this.deltaSetXY = [ newLeft - oCoord.x, newTop - oCoord.y ];
        } else {
            fly.setLeftTop(oCoord.x + this.deltaSetXY[0], oCoord.y + this.deltaSetXY[1]);
        }

        this.cachePosition(oCoord.x, oCoord.y);
        this.autoScroll(oCoord.x, oCoord.y, el.offsetHeight, el.offsetWidth);
        return oCoord;
    },

/**
     * Saves the most recent position so that we can reset the constraints and
     * tick marks on-demand.  We need to know this so that we can calculate the
     * number of pixels the element is offset from its original position.
     * @method cachePosition
     * @param iPageX the current x position (optional, this just makes it so we
     * don't have to look it up again)
     * @param iPageY the current y position (optional, this just makes it so we
     * don't have to look it up again)
     */
    cachePosition: function(iPageX, iPageY) {
        if (iPageX) {
            this.lastPageX = iPageX;
            this.lastPageY = iPageY;
        } else {
            var aCoord = Ext.lib.Dom.getXY(this.getEl());
            this.lastPageX = aCoord[0];
            this.lastPageY = aCoord[1];
        }
    },

    /**
     * Auto-scroll the window if the dragged object has been moved beyond the
     * visible window boundary.
     * @method autoScroll
     * @param {int} x the drag element's x position
     * @param {int} y the drag element's y position
     * @param {int} h the height of the drag element
     * @param {int} w the width of the drag element
     * @private
     */
    autoScroll: function(x, y, h, w) {

        if (this.scroll) {
            // The client height
            var clientH = Ext.lib.Dom.getViewHeight();

            // The client width
            var clientW = Ext.lib.Dom.getViewWidth();

            // The amt scrolled down
            var st = this.DDM.getScrollTop();

            // The amt scrolled right
            var sl = this.DDM.getScrollLeft();

            // Location of the bottom of the element
            var bot = h + y;

            // Location of the right of the element
            var right = w + x;

            // The distance from the cursor to the bottom of the visible area,
            // adjusted so that we don't scroll if the cursor is beyond the
            // element drag constraints
            var toBot = (clientH + st - y - this.deltaY);

            // The distance from the cursor to the right of the visible area
            var toRight = (clientW + sl - x - this.deltaX);

            // How close to the edge the cursor must be before we scroll
            // var thresh = (document.all) ? 100 : 40;
            var thresh = 40;

            // How many pixels to scroll per autoscroll op.  This helps to reduce
            // clunky scrolling. IE is more sensitive about this ... it needs this
            // value to be higher.
            var scrAmt = (document.all) ? 80 : 30;

            // Scroll down if we are near the bottom of the visible page and the
            // obj extends below the crease
            if ( bot > clientH && toBot < thresh ) {
                window.scrollTo(sl, st + scrAmt);
            }

            // Scroll up if the window is scrolled down and the top of the object
            // goes above the top border
            if ( y < st && st > 0 && y - st < thresh ) {
                window.scrollTo(sl, st - scrAmt);
            }

            // Scroll right if the obj is beyond the right border and the cursor is
            // near the border.
            if ( right > clientW && toRight < thresh ) {
                window.scrollTo(sl + scrAmt, st);
            }

            // Scroll left if the window has been scrolled to the right and the obj
            // extends past the left border
            if ( x < sl && sl > 0 && x - sl < thresh ) {
                window.scrollTo(sl - scrAmt, st);
            }
        }
    },

    /**
     * Finds the location the element should be placed if we want to move
     * it to where the mouse location less the click offset would place us.
     * @method getTargetCoord
     * @param {int} iPageX the X coordinate of the click
     * @param {int} iPageY the Y coordinate of the click
     * @return an object that contains the coordinates (Object.x and Object.y)
     * @private
     */
    getTargetCoord: function(iPageX, iPageY) {
        var x = iPageX - this.deltaX;
        var y = iPageY - this.deltaY;

        if (this.constrainX) {
            if (x < this.minX) { x = this.minX; }
            if (x > this.maxX) { x = this.maxX; }
        }

        if (this.constrainY) {
            if (y < this.minY) { y = this.minY; }
            if (y > this.maxY) { y = this.maxY; }
        }

        x = this.getTick(x, this.xTicks);
        y = this.getTick(y, this.yTicks);

        return {x:x, y:y};
    },

/**
     * Sets up config options specific to this class. Overrides
     * Ext.dd.DragDrop, but all versions of this method through the
     * inheritance chain are called
     */
    applyConfig: function() {
        Ext.dd.DD.superclass.applyConfig.call(this);
        this.scroll = (this.config.scroll !== false);
    },

/**
     * Event that fires prior to the onMouseDown event.  Overrides
     * Ext.dd.DragDrop.
     */
    b4MouseDown: function(e) {
        // this.resetConstraints();
        this.autoOffset(e.getPageX(),
                            e.getPageY());
    },

/**
     * Event that fires prior to the onDrag event.  Overrides
     * Ext.dd.DragDrop.
     */
    b4Drag: function(e) {
        this.setDragElPos(e.getPageX(),
                            e.getPageY());
    },

    toString: function() {
        return ("DD " + this.id);
    }

    //////////////////////////////////////////////////////////////////////////
    // Debugging ygDragDrop events that can be overridden
    //////////////////////////////////////////////////////////////////////////
    /*
    startDrag: function(x, y) {
    },

    onDrag: function(e) {
    },

    onDragEnter: function(e, id) {
    },

    onDragOver: function(e, id) {
    },

    onDragOut: function(e, id) {
    },

    onDragDrop: function(e, id) {
    },

    endDrag: function(e) {
    }

    */

});

/**
 * @class Ext.dd.DDProxy
 * A DragDrop implementation that inserts an empty, bordered div into
 * the document that follows the cursor during drag operations.  At the time of
 * the click, the frame div is resized to the dimensions of the linked html
 * element, and moved to the exact location of the linked element.
 *
 * References to the "frame" element refer to the single proxy element that
 * was created to be dragged in place of all DDProxy elements on the
 * page.
 *
 * @extends Ext.dd.DD
 * @constructor
 * @param {String} id the id of the linked html element
 * @param {String} sGroup the group of related DragDrop objects
 * @param {object} config an object containing configurable attributes
 *                Valid properties for DDProxy in addition to those in DragDrop:
 *                   resizeFrame, centerFrame, dragElId
 */
Ext.dd.DDProxy = function(id, sGroup, config) {
    if (id) {
        this.init(id, sGroup, config);
        this.initFrame();
    }
};

/**
 * The default drag frame div id
 * @property Ext.dd.DDProxy.dragElId
 * @type String
 * @static
 */
Ext.dd.DDProxy.dragElId = "ygddfdiv";

Ext.extend(Ext.dd.DDProxy, Ext.dd.DD, {

/**
     * By default we resize the drag frame to be the same size as the element
     * we want to drag (this is to get the frame effect).  We can turn it off
     * if we want a different behavior.
     * @property resizeFrame
     * @type boolean
     */
    resizeFrame: true,

/**
     * By default the frame is positioned exactly where the drag element is, so
     * we use the cursor offset provided by Ext.dd.DD.  Another option that works only if
     * you do not have constraints on the obj is to have the drag frame centered
     * around the cursor.  Set centerFrame to true for this effect.
     * @property centerFrame
     * @type boolean
     */
    centerFrame: false,

/**
     * Creates the proxy element if it does not yet exist
     * @method createFrame
     */
    createFrame: function() {
        var self = this;
        var body = document.body;

        if (!body || !body.firstChild) {
            setTimeout( function() { self.createFrame(); }, 50 );
            return;
        }

        var div = this.getDragEl();

        if (!div) {
            div    = document.createElement("div");
            div.id = this.dragElId;
            var s  = div.style;

            s.position   = "absolute";
            s.visibility = "hidden";
            s.cursor     = "move";
            s.border     = "2px solid #aaa";
            s.zIndex     = 999;

            // appendChild can blow up IE if invoked prior to the window load event
            // while rendering a table.  It is possible there are other scenarios
            // that would cause this to happen as well.
            body.insertBefore(div, body.firstChild);
        }
    },

/**
     * Initialization for the drag frame element.  Must be called in the
     * constructor of all subclasses
     * @method initFrame
     */
    initFrame: function() {
        this.createFrame();
    },

    applyConfig: function() {
        Ext.dd.DDProxy.superclass.applyConfig.call(this);

        this.resizeFrame = (this.config.resizeFrame !== false);
        this.centerFrame = (this.config.centerFrame);
        this.setDragElId(this.config.dragElId || Ext.dd.DDProxy.dragElId);
    },

    /**
     * Resizes the drag frame to the dimensions of the clicked object, positions
     * it over the object, and finally displays it
     * @method showFrame
     * @param {int} iPageX X click position
     * @param {int} iPageY Y click position
     * @private
     */
    showFrame: function(iPageX, iPageY) {
        var el = this.getEl();
        var dragEl = this.getDragEl();
        var s = dragEl.style;

        this._resizeProxy();

        if (this.centerFrame) {
            this.setDelta( Math.round(parseInt(s.width,  10)/2),
                           Math.round(parseInt(s.height, 10)/2) );
        }

        this.setDragElPos(iPageX, iPageY);

        Ext.fly(dragEl).show();
    },

    /**
     * The proxy is automatically resized to the dimensions of the linked
     * element when a drag is initiated, unless resizeFrame is set to false
     * @method _resizeProxy
     * @private
     */
    _resizeProxy: function() {
        if (this.resizeFrame) {
            var el = this.getEl();
            Ext.fly(this.getDragEl()).setSize(el.offsetWidth, el.offsetHeight);
        }
    },

    // overrides Ext.dd.DragDrop
    b4MouseDown: function(e) {
        var x = e.getPageX();
        var y = e.getPageY();
        this.autoOffset(x, y);
        this.setDragElPos(x, y);
    },

    // overrides Ext.dd.DragDrop
    b4StartDrag: function(x, y) {
        // show the drag frame
        this.showFrame(x, y);
    },

    // overrides Ext.dd.DragDrop
    b4EndDrag: function(e) {
        Ext.fly(this.getDragEl()).hide();
    },

    // overrides Ext.dd.DragDrop
    // By default we try to move the element to the last location of the frame.
    // This is so that the default behavior mirrors that of Ext.dd.DD.
    endDrag: function(e) {

        var lel = this.getEl();
        var del = this.getDragEl();

        // Show the drag frame briefly so we can get its position
        del.style.visibility = "";

        this.beforeMove();
        // Hide the linked element before the move to get around a Safari
        // rendering bug.
        lel.style.visibility = "hidden";
        Ext.dd.DDM.moveToEl(lel, del);
        del.style.visibility = "hidden";
        lel.style.visibility = "";

        this.afterDrag();
    },

    beforeMove : function(){

    },

    afterDrag : function(){

    },

    toString: function() {
        return ("DDProxy " + this.id);
    }

});

/**
 * @class Ext.dd.DDTarget
 * A DragDrop implementation that does not move, but can be a drop
 * target.  You would get the same result by simply omitting implementation
 * for the event callbacks, but this way we reduce the processing cost of the
 * event listener and the callbacks.
 * @extends Ext.dd.DragDrop
 * @constructor
 * @param {String} id the id of the element that is a drop target
 * @param {String} sGroup the group of related DragDrop objects
 * @param {object} config an object containing configurable attributes
 *                 Valid properties for DDTarget in addition to those in
 *                 DragDrop:
 *                    none
 */
Ext.dd.DDTarget = function(id, sGroup, config) {
    if (id) {
        this.initTarget(id, sGroup, config);
    }
};

// Ext.dd.DDTarget.prototype = new Ext.dd.DragDrop();
Ext.extend(Ext.dd.DDTarget, Ext.dd.DragDrop, {

/**
     * @hide
     * Overridden and disabled. A DDTarget does not support being dragged.
     * @method
     */
    getDragEl: Ext.emptyFn,

/**
     * @hide
     * Overridden and disabled. A DDTarget does not support being dragged.
     * @method
     */
    isValidHandleChild: Ext.emptyFn,

/**
     * @hide
     * Overridden and disabled. A DDTarget does not support being dragged.
     * @method
     */
    startDrag: Ext.emptyFn,

/**
     * @hide
     * Overridden and disabled. A DDTarget does not support being dragged.
     * @method
     */
    endDrag: Ext.emptyFn,

/**
     * @hide
     * Overridden and disabled. A DDTarget does not support being dragged.
     * @method
     */
    onDrag: Ext.emptyFn,

/**
     * @hide
     * Overridden and disabled. A DDTarget does not support being dragged.
     * @method
     */
    onDragDrop: Ext.emptyFn,

/**
     * @hide
     * Overridden and disabled. A DDTarget does not support being dragged.
     * @method
     */
    onDragEnter: Ext.emptyFn,

/**
     * @hide
     * Overridden and disabled. A DDTarget does not support being dragged.
     * @method
     */
    onDragOut: Ext.emptyFn,

/**
     * @hide
     * Overridden and disabled. A DDTarget does not support being dragged.
     * @method
     */
    onDragOver: Ext.emptyFn,

/**
     * @hide
     * Overridden and disabled. A DDTarget does not support being dragged.
     * @method
     */
    onInvalidDrop: Ext.emptyFn,

/**
     * @hide
     * Overridden and disabled. A DDTarget does not support being dragged.
     * @method
     */
    onMouseDown: Ext.emptyFn,

/**
     * @hide
     * Overridden and disabled. A DDTarget does not support being dragged.
     * @method
     */
    onMouseUp: Ext.emptyFn,

/**
     * @hide
     * Overridden and disabled. A DDTarget does not support being dragged.
     * @method
     */
    setXConstraint: Ext.emptyFn,

/**
     * @hide
     * Overridden and disabled. A DDTarget does not support being dragged.
     * @method
     */
    setYConstraint: Ext.emptyFn,

/**
     * @hide
     * Overridden and disabled. A DDTarget does not support being dragged.
     * @method
     */
    resetConstraints: Ext.emptyFn,

/**
     * @hide
     * Overridden and disabled. A DDTarget does not support being dragged.
     * @method
     */
    clearConstraints: Ext.emptyFn,

/**
     * @hide
     * Overridden and disabled. A DDTarget does not support being dragged.
     * @method
     */
    clearTicks: Ext.emptyFn,

/**
     * @hide
     * Overridden and disabled. A DDTarget does not support being dragged.
     * @method
     */
    setInitPosition: Ext.emptyFn,

/**
     * @hide
     * Overridden and disabled. A DDTarget does not support being dragged.
     * @method
     */
    setDragElId: Ext.emptyFn,

/**
     * @hide
     * Overridden and disabled. A DDTarget does not support being dragged.
     * @method
     */
    setHandleElId: Ext.emptyFn,

/**
     * @hide
     * Overridden and disabled. A DDTarget does not support being dragged.
     * @method
     */
    setOuterHandleElId: Ext.emptyFn,

/**
     * @hide
     * Overridden and disabled. A DDTarget does not support being dragged.
     * @method
     */
    addInvalidHandleClass: Ext.emptyFn,

/**
     * @hide
     * Overridden and disabled. A DDTarget does not support being dragged.
     * @method
     */
    addInvalidHandleId: Ext.emptyFn,

/**
     * @hide
     * Overridden and disabled. A DDTarget does not support being dragged.
     * @method
     */
    addInvalidHandleType: Ext.emptyFn,

/**
     * @hide
     * Overridden and disabled. A DDTarget does not support being dragged.
     * @method
     */
    removeInvalidHandleClass: Ext.emptyFn,

/**
     * @hide
     * Overridden and disabled. A DDTarget does not support being dragged.
     * @method
     */
    removeInvalidHandleId: Ext.emptyFn,

/**
     * @hide
     * Overridden and disabled. A DDTarget does not support being dragged.
     * @method
     */
    removeInvalidHandleType: Ext.emptyFn,

    toString: function() {
        return ("DDTarget " + this.id);
    }
});


The source code

/*!
 * licensing@extjs.com
 * http://www.extjs.com/license
 */
Ext.debug = {};

(function(){

var cp;

function createConsole(){

    var scriptPanel = new Ext.debug.ScriptsPanel();
    var logView = new Ext.debug.LogPanel();
    var tree = new Ext.debug.DomTree();
    var compInspector = new Ext.debug.ComponentInspector();
    var compInfoPanel = new Ext.debug.ComponentInfoPanel();
    var storeInspector = new Ext.debug.StoreInspector();
    var objInspector = new Ext.debug.ObjectInspector();

    var tabs = new Ext.TabPanel({
        activeTab: 0,
        border: false,
        tabPosition: 'bottom',
        items: [{
            title: 'Debug Console',
            layout:'border',
            items: [logView, scriptPanel]
        },{
            title: 'HTML Inspector',
            layout:'border',
            items: [tree]
        },{
            title: 'Component Inspector',
            layout: 'border',
            items: [compInspector,compInfoPanel]
        },{
            title: 'Object Inspector',
            layout: 'border',
            items: [objInspector]
        },{
            title: 'Data Stores',
            layout: 'border',
            items: [storeInspector]
        }]
    });

    cp = new Ext.Panel({
        id: 'x-debug-browser',
        title: 'Console',
        collapsible: true,
        animCollapse: false,
        style: 'position:absolute;left:0;bottom:0;z-index:101',
        height:200,
        logView: logView,
        layout: 'fit',

        tools:[{
            id: 'close',
            handler: function(){
                cp.destroy();
                cp = null;
                Ext.EventManager.removeResizeListener(handleResize);
            }
        }],

        items: tabs
    });

    cp.render(Ext.getBody());

    cp.resizer = new Ext.Resizable(cp.el, {
        minHeight:50,
        handles: "n",
        pinned: true,
        transparent:true,
        resizeElement : function(){
            var box = this.proxy.getBox();
            this.proxy.hide();
            cp.setHeight(box.height);
            return box;
        }
    });

//     function handleResize(){
//         cp.setWidth(Ext.getBody().getViewSize().width);
//     }
//     Ext.EventManager.onWindowResize(handleResize);
//
//     handleResize();

    function handleResize(){
        var b = Ext.getBody();
        var size = b.getViewSize();
        if(size.height < b.dom.scrollHeight) {
            size.width -= 18;
        }
        cp.setWidth(size.width);
    }
    Ext.EventManager.onWindowResize(handleResize);
    handleResize();
}

Ext.apply(Ext, {
    log : function(){
        if(!cp){
            createConsole();
        }
        cp.logView.log.apply(cp.logView, arguments);
    },

    logf : function(format, arg1, arg2, etc){
        Ext.log(String.format.apply(String, arguments));
    },

    dump : function(o){
        if(typeof o == 'string' || typeof o == 'number' || typeof o == 'undefined' || Ext.isDate(o)){
            Ext.log(o);
        }else if(!o){
            Ext.log("null");
        }else if(typeof o != "object"){
            Ext.log('Unknown return type');
        }else if(Ext.isArray(o)){
            Ext.log('['+o.join(',')+']');
        }else{
            var b = ["{\n"];
            for(var key in o){
                var to = typeof o[key];
                if(to != "function" && to != "object"){
                    b.push(String.format("  {0}: {1},\n", key, o[key]));
                }
            }
            var s = b.join("");
            if(s.length > 3){
                s = s.substr(0, s.length-2);
            }
            Ext.log(s + "\n}");
        }
    },

    _timers : {},

    time : function(name){
        name = name || "def";
        Ext._timers[name] = new Date().getTime();
    },

    timeEnd : function(name, printResults){
        var t = new Date().getTime();
        name = name || "def";
        var v = String.format("{0} ms", t-Ext._timers[name]);
        Ext._timers[name] = new Date().getTime();
        if(printResults !== false){
            Ext.log('Timer ' + (name == "def" ? v : name + ": " + v));
        }
        return v;
    }
});

})();

Ext.debug.ScriptsPanel = Ext.extend(Ext.Panel, {
    id:'x-debug-scripts',
    region: 'east',
    minWidth: 200,
    split: true,
    width: 350,
    border: false,
    layout:'anchor',
    style:'border-width:0 0 0 1px;',

    initComponent : function(){

        this.scriptField = new Ext.form.TextArea({
            anchor: '100% -26',
            style:'border-width:0;'
        });

        this.trapBox = new Ext.form.Checkbox({
            id: 'console-trap',
            boxLabel: 'Trap Errors',
            checked: true
        });

        this.toolbar = new Ext.Toolbar([{
                text: 'Run',
                scope: this,
                handler: this.evalScript
            },{
                text: 'Clear',
                scope: this,
                handler: this.clear
            },
            '->',
            this.trapBox,
            ' ', ' '
        ]);

        this.items = [this.toolbar, this.scriptField];

        Ext.debug.ScriptsPanel.superclass.initComponent.call(this);
    },

    evalScript : function(){
        var s = this.scriptField.getValue();
        if(this.trapBox.getValue()){
            try{
                var rt = eval(s);
                Ext.dump(rt === undefined? '(no return)' : rt);
            }catch(e){
                Ext.log(e.message || e.descript);
            }
        }else{
            var rt = eval(s);
            Ext.dump(rt === undefined? '(no return)' : rt);
        }
    },

    clear : function(){
        this.scriptField.setValue('');
        this.scriptField.focus();
    }

});

Ext.debug.LogPanel = Ext.extend(Ext.Panel, {
    autoScroll: true,
    region: 'center',
    border: false,
    style:'border-width:0 1px 0 0',

    log : function(){
        var markup = [  '
',
                    Ext.util.Format.htmlEncode(Array.prototype.join.call(arguments, ', ')).replace(/\n/g, '
').replace(/\s/g, ' '),
                    '
'].join(''),
            bd = this.body.dom;

        this.body.insertHtml('beforeend', markup);
        bd.scrollTop = bd.scrollHeight;
    },

    clear : function(){
        this.body.update('');
        this.body.dom.scrollTop = 0;
    }
});

Ext.debug.DomTree = Ext.extend(Ext.tree.TreePanel, {
    enableDD:false ,
    lines:false,
    rootVisible:false,
    animate:false,
    hlColor:'ffff9c',
    autoScroll: true,
    region:'center',
    border:false,

    initComponent : function(){

        Ext.debug.DomTree.superclass.initComponent.call(this);

        // tree related stuff
        var styles = false, hnode;
        var nonSpace = /^\s*$/;
        var html = Ext.util.Format.htmlEncode;
        var ellipsis = Ext.util.Format.ellipsis;
        var styleRe = /\s?([a-z\-]*)\:([^;]*)(?:[;\s\n\r]*)/gi;

        function findNode(n){
            if(!n || n.nodeType != 1 || n == document.body || n == document){
                return false;
            }
            var pn = [n], p = n;
            while((p = p.parentNode) && p.nodeType == 1 && p.tagName.toUpperCase() != 'HTML'){
                pn.unshift(p);
            }
            var cn = hnode;
            for(var i = 0, len = pn.length; i < len; i++){
                cn.expand();
                cn = cn.findChild('htmlNode', pn[i]);
                if(!cn){ // in this dialog?
                    return false;
                }
            }
            cn.select();
            var a = cn.ui.anchor;
            this.getTreeEl().dom.scrollTop = Math.max(0 ,a.offsetTop-10);
            //treeEl.dom.scrollLeft = Math.max(0 ,a.offsetLeft-10); no likey
            cn.highlight();
            return true;
        }

        function nodeTitle(n){
            var s = n.tagName;
            if(n.id){
                s += '#'+n.id;
            }else if(n.className){
                s += '.'+n.className;
            }
            return s;
        }

        /*
        function onNodeSelect(t, n, last){
            return;
            if(last && last.unframe){
                last.unframe();
            }
            var props = {};
            if(n && n.htmlNode){
                if(frameEl.pressed){
                    n.frame();
                }
                if(inspecting){
                    return;
                }
                addStyle.enable();
                reload.setDisabled(n.leaf);
                var dom = n.htmlNode;
                stylePanel.setTitle(nodeTitle(dom));
                if(styles && !showAll.pressed){
                    var s = dom.style ? dom.style.cssText : '';
                    if(s){
                        var m;
                        while ((m = styleRe.exec(s)) != null){
                            props[m[1].toLowerCase()] = m[2];
                        }
                    }
                }else if(styles){
                    var cl = Ext.debug.cssList;
                    var s = dom.style, fly = Ext.fly(dom);
                    if(s){
                        for(var i = 0, len = cl.length; i' + ellipsis(html(String(c.nodeValue)), 35) + '',
                        cls: 'x-tree-noicon'
                    }));
                }
            }
            cb();
        };

        //tree.getSelectionModel().on('selectionchange', onNodeSelect, null, {buffer:250});

        this.root = this.setRootNode(new Ext.tree.TreeNode('Ext'));

        hnode = this.root.appendChild(new Ext.debug.HtmlNode(
                document.getElementsByTagName('html')[0]
        ));

    }
});

Ext.debug.ComponentNodeUI = Ext.extend(Ext.tree.TreeNodeUI,{
    onOver : function(e){
        Ext.debug.ComponentNodeUI.superclass.onOver.call(this);
        var cmp = this.node.attributes.component;
        if (cmp.el && cmp.el.mask && cmp.id !='x-debug-browser') {
            try { // Oddly bombs on some elements in IE, gets any we care about though
                cmp.el.mask();
            } catch(e) {}
        }
    },

    onOut : function(e){
        Ext.debug.ComponentNodeUI.superclass.onOut.call(this);
        var cmp = this.node.attributes.component;
        if (cmp.el && cmp.el.unmask && cmp.id !='x-debug-browser') {
            try {
                cmp.el.unmask();
            } catch(e) {}
        }
    }
});

Ext.debug.ComponentInspector = Ext.extend(Ext.tree.TreePanel, {
    enableDD:false ,
    lines:false,
    rootVisible:false,
    animate:false,
    hlColor:'ffff9c',
    autoScroll: true,
    region:'center',
    border:false,

    initComponent : function(){
        this.loader = new Ext.tree.TreeLoader();
        this.bbar = new Ext.Toolbar([{
            text: 'Refresh',
            handler: this.refresh,
            scope: this
        }]);
        Ext.debug.ComponentInspector.superclass.initComponent.call(this);

        this.root = this.setRootNode(new Ext.tree.TreeNode({
            text: 'Ext Components',
            component: Ext.ComponentMgr.all,
            leaf: false
        }));
        this.parseRootNode();

        this.on('click', this.onClick, this);
    },

    createNode: function(n,c) {
        var leaf = (c.items && c.items.length > 0);
        return n.appendChild(new Ext.tree.TreeNode({
            text: c.id + (c.getXType() ? ' [ ' + c.getXType() + ' ]': '' ),
            component: c,
            uiProvider:Ext.debug.ComponentNodeUI,
            leaf: !leaf
        }));
    },

    parseChildItems: function(n) {
        var cn = n.attributes.component.items;
        if (cn) {
            for (var i = 0;i < cn.length; i++) {
                var c = cn.get(i);
                if (c.id != this.id && c.id != this.bottomToolbar.id) {
                    var newNode = this.createNode(n,c);
                    if (!newNode.leaf) {
                        this.parseChildItems(newNode)
                    }
                }
            }
        }
    },

    parseRootNode: function() {
        var n = this.root;
        var cn = n.attributes.component.items;
        for (var i = 0,c;c = cn[i];i++) {
            if (c.id != this.id && c.id != this.bottomToolbar.id) {
                if (!c.ownerCt) {
                    var newNode = this.createNode(n,c);
                    if (!newNode.leaf) {
                        this.parseChildItems(newNode);
                    }
                }
            }
        }
    },

    onClick: function(node, e) {
        var oi = Ext.getCmp('x-debug-objinspector');
        oi.refreshNodes(node.attributes.component);
        oi.ownerCt.show();
    },

    refresh: function() {
        while (this.root.firstChild) {
            this.root.removeChild(this.root.firstChild);
        }
        this.parseRootNode();
        var ci = Ext.getCmp('x-debug-compinfo');
        if (ci) {
            ci.message('refreshed component tree - '+Ext.ComponentMgr.all.length)
        }
    }
});

Ext.debug.ComponentInfoPanel = Ext.extend(Ext.Panel,{
    id:'x-debug-compinfo',
    region: 'east',
    minWidth: 200,
    split: true,
    width: 350,
    border: false,
    autoScroll: true,
    layout:'anchor',
    style:'border-width:0 0 0 1px;',

    initComponent: function() {
        this.watchBox = new Ext.form.Checkbox({
            id: 'x-debug-watchcomp',
            boxLabel: 'Watch ComponentMgr',
            listeners: {
                check: function(cb, val) {
                    if (val) {
                        Ext.ComponentMgr.all.on('add', this.onAdd, this);
                        Ext.ComponentMgr.all.on('remove', this.onRemove, this);
                    } else {
                        Ext.ComponentMgr.all.un('add', this.onAdd, this);
                        Ext.ComponentMgr.all.un('remove', this.onRemove, this);
                    }
                },
                scope: this
            }
        });

        this.tbar = new Ext.Toolbar([{
            text: 'Clear',
            handler: this.clear,
            scope: this
        },'->',this.watchBox
        ]);
        Ext.debug.ComponentInfoPanel.superclass.initComponent.call(this);
    },

    onAdd: function(i, o, key) {
        var markup = ['
',
                    'Added: '+o.id,
                    '
'].join('');
        this.insertMarkup(markup);
    },

    onRemove: function(o, key) {
        var markup = ['
',
                    'Removed: '+o.id,
                    '
'].join('');
        this.insertMarkup(markup);
    },

    message: function(msg) {
        var markup = ['
',
                    msg,
                    '
'].join('');
        this.insertMarkup(markup);
    },
    insertMarkup: function(markup) {
        this.body.insertHtml('beforeend', markup);
        this.body.scrollTo('top', 100000);
    },
    clear : function(){
        this.body.update('');
        this.body.dom.scrollTop = 0;
    }
});

Ext.debug.ColumnNodeUI = Ext.extend(Ext.tree.TreeNodeUI, {
    focus: Ext.emptyFn, // prevent odd scrolling behavior

    renderElements : function(n, a, targetNode, bulkRender){
        this.indentMarkup = n.parentNode ? n.parentNode.ui.getChildIndent() : '';

        var t = n.getOwnerTree();
        var cols = t.columns;
        var bw = t.borderWidth;
        var c = cols[0];

        var buf = [
             '
  • ',
                '
    ',
                    '',this.indentMarkup,"",
                    '  ',
                    '  ',
                    '',
                    '', n.text || (c.renderer ? c.renderer(a[c.dataIndex], n, a) : a[c.dataIndex]),"",
                "
    "];
         for(var i = 1, len = cols.length; i < len; i++){
             c = cols[i];

             buf.push('
    ',
                        '
    ',(c.renderer ? c.renderer(a[c.dataIndex], n, a) : a[c.dataIndex]),"
    ",
                      "
    ");
         }
         buf.push(
            '
    ',
            '
      ',
            "
      • ");

        if(bulkRender !== true && n.nextSibling && n.nextSibling.ui.getEl()){
            this.wrap = Ext.DomHelper.insertHtml("beforeBegin",
                                n.nextSibling.ui.getEl(), buf.join(""));
        }else{
            this.wrap = Ext.DomHelper.insertHtml("beforeEnd", targetNode, buf.join(""));
        }

        this.elNode = this.wrap.childNodes[0];
        this.ctNode = this.wrap.childNodes[1];
        var cs = this.elNode.firstChild.childNodes;
        this.indentNode = cs[0];
        this.ecNode = cs[1];
        this.iconNode = cs[2];
        this.anchor = cs[3];
        this.textNode = cs[3].firstChild;
    }
});

Ext.debug.ObjectInspector = Ext.extend(Ext.tree.TreePanel, {
    id: 'x-debug-objinspector',
    enableDD:false ,
    lines:false,
    rootVisible:false,
    animate:false,
    hlColor:'ffff9c',
    autoScroll: true,
    region:'center',
    border:false,
    lines:false,
    borderWidth: Ext.isBorderBox ? 0 : 2, // the combined left/right border for each cell
    cls:'x-column-tree',

    initComponent : function(){
        this.showFunc = false;
        this.toggleFunc = function() {
            this.showFunc = !this.showFunc;
            this.refreshNodes(this.currentObject);
        };
        this.bbar = new Ext.Toolbar([{
            text: 'Show Functions',
            enableToggle: true,
            pressed: false,
            handler: this.toggleFunc,
            scope: this
        }]);

        Ext.apply(this,{
            title: ' ',
            loader: new Ext.tree.TreeLoader(),
            columns:[{
                header:'Property',
                width: 300,
                dataIndex:'name'
            },{
                header:'Value',
                width: 900,
                dataIndex:'value'
            }]
        });

        Ext.debug.ObjectInspector.superclass.initComponent.call(this);

        this.root = this.setRootNode(new Ext.tree.TreeNode({
            text: 'Dummy Node',
            leaf: false
        }));

        if (this.currentObject) {
            this.parseNodes();
        }
    },

    refreshNodes: function(newObj) {
        this.currentObject = newObj;
        var node = this.root;
        while(node.firstChild){
            node.removeChild(node.firstChild);
        }
        this.parseNodes();
    },

    parseNodes: function() {
        for (var o in this.currentObject) {
            if (!this.showFunc) {
                if (Ext.isFunction(this.currentObject[o])) {
                    continue;
                }
            }
            this.createNode(o);
        }
    },

    createNode: function(o) {
        return this.root.appendChild(new Ext.tree.TreeNode({
            name: o,
            value: this.currentObject[o],
            uiProvider:Ext.debug.ColumnNodeUI,
            iconCls: 'x-debug-node',
            leaf: true
        }));
    },

    onRender : function(){
        Ext.debug.ObjectInspector.superclass.onRender.apply(this, arguments);
        this.headers = this.header.createChild({cls:'x-tree-headers'});

        var cols = this.columns, c;
        var totalWidth = 0;

        for(var i = 0, len = cols.length; i < len; i++){
             c = cols[i];
             totalWidth += c.width;
             this.headers.createChild({
                 cls:'x-tree-hd ' + (c.cls?c.cls+'-hd':''),
                 cn: {
                     cls:'x-tree-hd-text',
                     html: c.header
                 },
                 style:'width:'+(c.width-this.borderWidth)+'px;'
             });
        }
        this.headers.createChild({cls:'x-clear'});
        // prevent floats from wrapping when clipped
        this.headers.setWidth(totalWidth);
        this.innerCt.setWidth(totalWidth);
    }
});

Ext.debug.StoreInspector = Ext.extend(Ext.tree.TreePanel, {
    enableDD:false ,
    lines:false,
    rootVisible:false,
    animate:false,
    hlColor:'ffff9c',
    autoScroll: true,
    region:'center',
    border:false,

    initComponent: function() {
        this.bbar = new Ext.Toolbar([{
            text: 'Refresh',
            handler: this.refresh,
            scope: this
        }]);
        Ext.debug.StoreInspector.superclass.initComponent.call(this);

        this.root = this.setRootNode(new Ext.tree.TreeNode({
            text: 'Data Stores',
            leaf: false
        }));
        this.on('click', this.onClick, this);

        this.parseStores();
    },

    parseStores: function() {
        var cn = Ext.StoreMgr.items;
        for (var i = 0,c;c = cn[i];i++) {
            this.root.appendChild({
                text: c.storeId + ' - ' + c.totalLength + ' records',
                component: c,
                leaf: true
            });
        }
    },

    onClick: function(node, e) {
        var oi = Ext.getCmp('x-debug-objinspector');
        oi.refreshNodes(node.attributes.component);
        oi.ownerCt.show();
    },

    refresh: function() {
        while (this.root.firstChild) {
            this.root.removeChild(this.root.firstChild);
        }
        this.parseStores();
    }
});

// highly unusual class declaration
Ext.debug.HtmlNode = function(){
    var html = Ext.util.Format.htmlEncode;
    var ellipsis = Ext.util.Format.ellipsis;
    var nonSpace = /^\s*$/;

    var attrs = [
        {n: 'id', v: 'id'},
        {n: 'className', v: 'class'},
        {n: 'name', v: 'name'},
        {n: 'type', v: 'type'},
        {n: 'src', v: 'src'},
        {n: 'href', v: 'href'}
    ];

    function hasChild(n){
        for(var i = 0, c; c = n.childNodes[i]; i++){
            if(c.nodeType == 1){
                return true;
            }
        }
        return false;
    }

    function renderNode(n, leaf){
        var tag = n.tagName.toLowerCase();
        var s = '<' + tag;
        for(var i = 0, len = attrs.length; i < len; i++){
            var a = attrs[i];
            var v = n[a.n];
            if(v && !nonSpace.test(v)){
                s += ' ' + a.v + '="' + html(v) +'"';
            }
        }
        var style = n.style ? n.style.cssText : '';
        if(style){
            s += ' style="' + html(style.toLowerCase()) +'"';
        }
        if(leaf && n.childNodes.length > 0){
            s+='>' + ellipsis(html(String(n.innerHTML)), 35) + '</'+tag+'>';
        }else if(leaf){
            s += ' />';
        }else{
            s += '>';
        }
        return s;
    }

    var HtmlNode = function(n){
        var leaf = !hasChild(n);
        this.htmlNode = n;
        this.tagName = n.tagName.toLowerCase();
        var attr = {
            text : renderNode(n, leaf),
            leaf : leaf,
            cls: 'x-tree-noicon'
        };
        HtmlNode.superclass.constructor.call(this, attr);
        this.attributes.htmlNode = n; // for searching
        if(!leaf){
            this.on('expand', this.onExpand,  this);
            this.on('collapse', this.onCollapse,  this);
        }
    };

    Ext.extend(HtmlNode, Ext.tree.AsyncTreeNode, {
        cls: 'x-tree-noicon',
        preventHScroll: true,
        refresh : function(highlight){
            var leaf = !hasChild(this.htmlNode);
            this.setText(renderNode(this.htmlNode, leaf));
            if(highlight){
                Ext.fly(this.ui.textNode).highlight();
            }
        },

        onExpand : function(){
            if(!this.closeNode && this.parentNode){
                this.closeNode = this.parentNode.insertBefore(new Ext.tree.TreeNode({
                    text:'</' + this.tagName + '>',
                    cls: 'x-tree-noicon'
                }), this.nextSibling);
            }else if(this.closeNode){
                this.closeNode.ui.show();
            }
        },

        onCollapse : function(){
            if(this.closeNode){
                this.closeNode.ui.hide();
            }
        },

        render : function(bulkRender){
            HtmlNode.superclass.render.call(this, bulkRender);
        },

        highlightNode : function(){
            //Ext.fly(this.htmlNode).highlight();
        },

        highlight : function(){
            //Ext.fly(this.ui.textNode).highlight();
        },

        frame : function(){
            this.htmlNode.style.border = '1px solid #0000ff';
            //this.highlightNode();
        },

        unframe : function(){
            //Ext.fly(this.htmlNode).removeClass('x-debug-frame');
            this.htmlNode.style.border = '';
        }
    });

    return HtmlNode;
}();


The source code

/*!
 * licensing@extjs.com
 * http://www.extjs.com/license
 */

/**
 * @class Ext.util.DelayedTask
 *
 The DelayedTask class provides a convenient way to "buffer" the execution of a method,
 * performing setTimeout where a new timeout cancels the old timeout. When called, the
 * task will wait the specified time period before executing. If durng that time period,
 * the task is called again, the original call will be cancelled. This continues so that
 * the function is only called a single time for each iteration.

 *
This method is especially useful for things like detecting whether a user has finished
 * typing in a text field. An example would be performing validation on a keypress. You can
 * use this class to buffer the keypress events for a certain number of milliseconds, and
 * perform only if they stop for that amount of time.  Usage:

var task = new Ext.util.DelayedTask(function(){
    alert(Ext.getDom('myInputField').value.length);
});
// Wait 500ms before calling our function. If the user presses another key
// during that 500ms, it will be cancelled and we'll wait another 500ms.
Ext.get('myInputField').on('keypress', function(){
    task.{@link #delay}(500);
});
 *

 *
Note that we are using a DelayedTask here to illustrate a point. The configuration
 * option buffer for {@link Ext.util.Observable#addListener addListener/on} will
 * also setup a delayed task for you to buffer events.

 * @constructor The parameters to this constructor serve as defaults and are not required.
 * @param {Function} fn (optional) The default function to call.
 * @param {Object} scope The default scope (The this reference) in which the
 * function is called. If not specified, this will refer to the browser window.
 * @param {Array} args (optional) The default Array of arguments.
 */
Ext.util.DelayedTask = function(fn, scope, args){
    var me = this,
        id,
        call = function(){
            clearInterval(id);
            id = null;
            fn.apply(scope, args || []);
        };

/**
     * Cancels any pending timeout and queues a new one
     * @param {Number} delay The milliseconds to delay
     * @param {Function} newFn (optional) Overrides function passed to constructor
     * @param {Object} newScope (optional) Overrides scope passed to constructor. Remember that if no scope
     * is specified, this will refer to the browser window.
     * @param {Array} newArgs (optional) Overrides args passed to constructor
     */
    me.delay = function(delay, newFn, newScope, newArgs){
        me.cancel();
        fn = newFn || fn;
        scope = newScope || scope;
        args = newArgs || args;
        id = setInterval(call, delay);
    };

/**
     * Cancel the last queued timeout
     */
    me.cancel = function(){
        if(id){
            clearInterval(id);
            id = null;
        }
    };
};


The source code

/*!
 * licensing@extjs.com
 * http://www.extjs.com/license
 */

/**
 * @class Ext.Direct
 * @extends Ext.util.Observable
 *
Overview

 *
 *
Ext.Direct aims to streamline communication between the client and server
 * by providing a single interface that reduces the amount of common code
 * typically required to validate data and handle returned data packets
 * (reading data, error conditions, etc).

 *
 *
The Ext.direct namespace includes several classes for a closer integration
 * with the server-side. The Ext.data namespace also includes classes for working
 * with Ext.data.Stores which are backed by data from an Ext.Direct method.

 *
 *
Specification

 *
 *
For additional information consult the
 * Ext.Direct Specification.

 *
 *
Providers

 *
 *
Ext.Direct uses a provider architecture, where one or more providers are
 * used to transport data to and from the server. There are several providers
 * that exist in the core at the moment:

 *
 *
  • {@link Ext.direct.JsonProvider JsonProvider} for simple JSON operations
    •
 *
  • {@link Ext.direct.PollingProvider PollingProvider} for repeated requests
    •
 *
  • {@link Ext.direct.RemotingProvider RemotingProvider} exposes server side
 * on the client.
    •
 *

 *
 *
A provider does not need to be invoked directly, providers are added via
 * {@link Ext.Direct}.{@link Ext.Direct#add add}.

 *
 *
Router

 *
 *
Ext.Direct utilizes a "router" on the server to direct requests from the client
 * to the appropriate server-side method. Because the Ext.Direct API is completely
 * platform-agnostic, you could completely swap out a Java based server solution
 * and replace it with one that uses C# without changing the client side JavaScript
 * at all.

 *
 *
Server side events

 *
 *
Custom events from the server may be handled by the client by adding
 * listeners, for example:

 *

{"type":"event","name":"message","data":"Successfully polled at: 11:19:30 am"}

// add a handler for a 'message' event sent by the server
Ext.Direct.on('message', function(e){
    out.append(String.format('<p><i>{0}</i></p>', e.data));
            out.el.scrollTo('t', 100000, true);
});
 *

 * @singleton
 */
Ext.Direct = Ext.extend(Ext.util.Observable, {

/**
     * Each event type implements a getData() method. The default event types are:
     *

     *
  • event : Ext.Direct.Event
    •
     *
  • exception : Ext.Direct.ExceptionEvent
    •
     *
  • rpc : Ext.Direct.RemotingEvent
    •
     *

     * @property eventTypes
     * @type Object
     */

/**
     * Four types of possible exceptions which can occur:
     *

     *
  • Ext.Direct.exceptions.TRANSPORT : 'xhr'
    •
     *
  • Ext.Direct.exceptions.PARSE : 'parse'
    •
     *
  • Ext.Direct.exceptions.LOGIN : 'login'
    •
     *
  • Ext.Direct.exceptions.SERVER : 'exception'
    •
     *

     * @property exceptions
     * @type Object
     */
    exceptions: {
        TRANSPORT: 'xhr',
        PARSE: 'parse',
        LOGIN: 'login',
        SERVER: 'exception'
    },

    // private
    constructor: function(){
        this.addEvents(

/**
             * @event event
             * Fires after an event.
             * @param {event} e The {@link Ext.Direct#eventTypes Ext.Direct.Event type} that occurred.
             * @param {Ext.direct.Provider} provider The {@link Ext.direct.Provider Provider}.
             */
            'event',

/**
             * @event exception
             * Fires after an event exception.
             * @param {event} e The {@link Ext.Direct#eventTypes Ext.Direct.Event type} that occurred.
             */
            'exception'
        );
        this.transactions = {};
        this.providers = {};
    },

/**
     * Adds an Ext.Direct Provider and creates the proxy or stub methods to execute server-side methods.
     * If the provider is not already connected, it will auto-connect.
     *

var pollProv = new Ext.direct.PollingProvider({
    url: 'php/poll2.php'
});

Ext.Direct.addProvider(
    {
        "type":"remoting",       // create a {@link Ext.direct.RemotingProvider}
        "url":"php\/router.php", // url to connect to the Ext.Direct server-side router.
        "actions":{              // each property within the actions object represents a Class
            "TestAction":[       // array of methods within each server side Class
            {
                "name":"doEcho", // name of method
                "len":1
            },{
                "name":"multiply",
                "len":1
            },{
                "name":"doForm",
                "formHandler":true, // handle form on server with Ext.Direct.Transaction
                "len":1
            }]
        },
        "namespace":"myApplication",// namespace to create the Remoting Provider in
    },{
        type: 'polling', // create a {@link Ext.direct.PollingProvider}
        url:  'php/poll.php'
    },
    pollProv // reference to previously created instance
);
     *

     * @param {Object/Array} provider Accepts either an Array of Provider descriptions (an instance
     * or config object for a Provider) or any number of Provider descriptions as arguments.  Each
     * Provider description instructs Ext.Direct how to create client-side stub methods.
     */
    addProvider : function(provider){
        var a = arguments;
        if(a.length > 1){
            for(var i = 0, len = a.length; i < len; i++){
                this.addProvider(a[i]);
            }
            return;
        }

        // if provider has not already been instantiated
        if(!provider.events){
            provider = new Ext.Direct.PROVIDERS[provider.type](provider);
        }
        provider.id = provider.id || Ext.id();
        this.providers[provider.id] = provider;

        provider.on('data', this.onProviderData, this);
        provider.on('exception', this.onProviderException, this);

        if(!provider.isConnected()){
            provider.connect();
        }

        return provider;
    },

/**
     * Retrieve a {@link Ext.direct.Provider provider} by the
     * {@link Ext.direct.Provider#id id} specified when the provider is
     * {@link #addProvider added}.
     * @param {String} id Unique identifier assigned to the provider when calling {@link #addProvider}
     */
    getProvider : function(id){
        return this.providers[id];
    },

    removeProvider : function(id){
        var provider = id.id ? id : this.providers[id];
        provider.un('data', this.onProviderData, this);
        provider.un('exception', this.onProviderException, this);
        delete this.providers[provider.id];
        return provider;
    },

    addTransaction: function(t){
        this.transactions[t.tid] = t;
        return t;
    },

    removeTransaction: function(t){
        delete this.transactions[t.tid || t];
        return t;
    },

    getTransaction: function(tid){
        return this.transactions[tid.tid || tid];
    },

    onProviderData : function(provider, e){
        if(Ext.isArray(e)){
            for(var i = 0, len = e.length; i < len; i++){
                this.onProviderData(provider, e[i]);
            }
            return;
        }
        if(e.name && e.name != 'event' && e.name != 'exception'){
            this.fireEvent(e.name, e);
        }else if(e.type == 'exception'){
            this.fireEvent('exception', e);
        }
        this.fireEvent('event', e, provider);
    },

    createEvent : function(response, extraProps){
        return new Ext.Direct.eventTypes[response.type](Ext.apply(response, extraProps));
    }
});
// overwrite impl. with static instance
Ext.Direct = new Ext.Direct();

Ext.Direct.TID = 1;
Ext.Direct.PROVIDERS = {};


The source code

/*!
 * licensing@extjs.com
 * http://www.extjs.com/license
 */

/**
 * @class Ext.data.DirectProxy
 * @extends Ext.data.DataProxy
 */
Ext.data.DirectProxy = function(config){
    Ext.apply(this, config);
    if(typeof this.paramOrder == 'string'){
        this.paramOrder = this.paramOrder.split(/[\s,|]/);
    }
    Ext.data.DirectProxy.superclass.constructor.call(this, config);
};

Ext.extend(Ext.data.DirectProxy, Ext.data.DataProxy, {

/**
     * @cfg {Array/String} paramOrder Defaults to undefined. A list of params to be executed
     * server side.  Specify the params in the order in which they must be executed on the server-side
     * as either (1) an Array of String values, or (2) a String of params delimited by either whitespace,
     * comma, or pipe. For example,
     * any of the following would be acceptable:

paramOrder: ['param1','param2','param3']
paramOrder: 'param1 param2 param3'
paramOrder: 'param1,param2,param3'
paramOrder: 'param1|param2|param'

     */
    paramOrder: undefined,

/**
     * @cfg {Boolean} paramsAsHash
     * Send parameters as a collection of named arguments (defaults to true). Providing a
     * {@link #paramOrder} nullifies this configuration.
     */
    paramsAsHash: true,

/**
     * @cfg {Function} directFn
     * Function to call when executing a request.  directFn is a simple alternative to defining the api configuration-parameter
     * for Store's which will not implement a full CRUD api.
     */
    directFn : undefined,

/**
     * DirectProxy implementation of {@link Ext.data.DataProxy#doRequest}
     * @param {String} action The crud action type (create, read, update, destroy)
     * @param {Ext.data.Record/Ext.data.Record[]} rs If action is load, rs will be null
     * @param {Object} params An object containing properties which are to be used as HTTP parameters
     * for the request to the remote server.
     * @param {Ext.data.DataReader} reader The Reader object which converts the data
     * object into a block of Ext.data.Records.
     * @param {Function} callback
     *
A function to be called after the request.
     * The callback is passed the following arguments:

     *
  • r : Ext.data.Record[] The block of Ext.data.Records.
    •
     *
  • options: Options object from the action request
    •
     *
  • success: Boolean success indicator

     * @param {Object} scope The scope (this reference) in which the callback function is executed. Defaults to the browser window.
     * @param {Object} arg An optional argument which is passed to the callback as its second parameter.
     * @protected
     */
    doRequest : function(action, rs, params, reader, callback, scope, options) {
        var args = [],
            directFn = this.api[action] || this.directFn;

        switch (action) {
            case Ext.data.Api.actions.create:
                args.push(params.jsonData);		// <-- create(Hash)
                break;
            case Ext.data.Api.actions.read:
                // If the method has no parameters, ignore the paramOrder/paramsAsHash.
                if(directFn.directCfg.method.len > 0){
                    if(this.paramOrder){
                        for(var i = 0, len = this.paramOrder.length; i < len; i++){
                            args.push(params[this.paramOrder[i]]);
                        }
                    }else if(this.paramsAsHash){
                        args.push(params);
                    }
                }
                break;
            case Ext.data.Api.actions.update:
                args.push(params.jsonData);        // <-- update(Hash/Hash[])
                break;
            case Ext.data.Api.actions.destroy:
                args.push(params.jsonData);        // <-- destroy(Int/Int[])
                break;
        }

        var trans = {
            params : params || {},
            request: {
                callback : callback,
                scope : scope,
                arg : options
            },
            reader: reader
        };

        args.push(this.createCallback(action, rs, trans), this);
        directFn.apply(window, args);
    },

    // private
    createCallback : function(action, rs, trans) {
        var me = this;
        return function(result, res) {
            if (!res.status) {
                // @deprecated fire loadexception
                if (action === Ext.data.Api.actions.read) {
                    me.fireEvent("loadexception", me, trans, res, null);
                }
                me.fireEvent('exception', me, 'remote', action, trans, res, null);
                trans.request.callback.call(trans.request.scope, null, trans.request.arg, false);
                return;
            }
            if (action === Ext.data.Api.actions.read) {
                me.onRead(action, trans, result, res);
            } else {
                me.onWrite(action, trans, result, res, rs);
            }
        };
    },

/**
     * Callback for read actions
     * @param {String} action [Ext.data.Api.actions.create|read|update|destroy]
     * @param {Object} trans The request transaction object
     * @param {Object} result Data object picked out of the server-response.
     * @param {Object} res The server response
     * @protected
     */
    onRead : function(action, trans, result, res) {
        var records;
        try {
            records = trans.reader.readRecords(result);
        }
        catch (ex) {
            // @deprecated: Fire old loadexception for backwards-compat.
            this.fireEvent("loadexception", this, trans, res, ex);

            this.fireEvent('exception', this, 'response', action, trans, res, ex);
            trans.request.callback.call(trans.request.scope, null, trans.request.arg, false);
            return;
        }
        this.fireEvent("load", this, res, trans.request.arg);
        trans.request.callback.call(trans.request.scope, records, trans.request.arg, true);
    },

/**
     * Callback for write actions
     * @param {String} action [{@link Ext.data.Api#actions create|read|update|destroy}]
     * @param {Object} trans The request transaction object
     * @param {Object} result Data object picked out of the server-response.
     * @param {Object} res The server response
     * @param {Ext.data.Record/[Ext.data.Record]} rs The Store resultset associated with the action.
     * @protected
     */
    onWrite : function(action, trans, result, res, rs) {
        var data = trans.reader.extractData(trans.reader.getRoot(result), false);
        var success = trans.reader.getSuccess(result);
        success = (success !== false);
        if (success){
            this.fireEvent("write", this, action, data, res, rs, trans.request.arg);
        }else{
            this.fireEvent('exception', this, 'remote', action, trans, result, rs);
        }
        trans.request.callback.call(trans.request.scope, data, res, success);
    }
});


The source code

/*!
 * licensing@extjs.com
 * http://www.extjs.com/license
 */

/**
 * @class Ext.data.DirectStore
 * @extends Ext.data.Store
 *
Small helper class to create an {@link Ext.data.Store} configured with an
 * {@link Ext.data.DirectProxy} and {@link Ext.data.JsonReader} to make interacting
 * with an {@link Ext.Direct} Server-side {@link Ext.direct.Provider Provider} easier.
 * To create a different proxy/reader combination create a basic {@link Ext.data.Store}
 * configured as needed.

 *
 *
*Note: Although they are not listed, this class inherits all of the config options of:

 *

 *
  • {@link Ext.data.Store Store}
    •
 *

 *
 *

 *
  • {@link Ext.data.JsonReader JsonReader}
    •
 *

 *
    • {@link Ext.data.JsonReader#root root}
      •
 *
    • {@link Ext.data.JsonReader#idProperty idProperty}
      •
 *
    • {@link Ext.data.JsonReader#totalProperty totalProperty}
      •
 *

 *
 *
  • {@link Ext.data.DirectProxy DirectProxy}
    •
 *

 *
    • {@link Ext.data.DirectProxy#directFn directFn}
      •
 *
    • {@link Ext.data.DirectProxy#paramOrder paramOrder}
      •
 *
    • {@link Ext.data.DirectProxy#paramsAsHash paramsAsHash}
      •
 *

 *

 *
 * @xtype directstore
 *
 * @constructor
 * @param {Object} config
 */
Ext.data.DirectStore = Ext.extend(Ext.data.Store, {
    constructor : function(config){
        // each transaction upon a singe record will generate a distinct Direct transaction since Direct queues them into one Ajax request.
        var c = Ext.apply({}, {
            batchTransactions: false
        }, config);
        Ext.data.DirectStore.superclass.constructor.call(this, Ext.apply(c, {
            proxy: Ext.isDefined(c.proxy) ? c.proxy : new Ext.data.DirectProxy(Ext.copyTo({}, c, 'paramOrder,paramsAsHash,directFn,api')),
            reader: (!Ext.isDefined(c.reader) && c.fields) ? new Ext.data.JsonReader(Ext.copyTo({}, c, 'totalProperty,root,idProperty'), c.fields) : c.reader
        }));
    }
});
Ext.reg('directstore', Ext.data.DirectStore);


The source code

/*!
 * licensing@extjs.com
 * http://www.extjs.com/license
 */

/**
 * @class Ext.form.DisplayField
 * @extends Ext.form.Field
 * A display-only text field which is not validated and not submitted.
 * @constructor
 * Creates a new DisplayField.
 * @param {Object} config Configuration options
 * @xtype displayfield
 */
Ext.form.DisplayField = Ext.extend(Ext.form.Field,  {
    validationEvent : false,
    validateOnBlur : false,
    defaultAutoCreate : {tag: "div"},

/**
     * @cfg {String} fieldClass The default CSS class for the field (defaults to "x-form-display-field")
     */
    fieldClass : "x-form-display-field",

/**
     * @cfg {Boolean} htmlEncode false to skip HTML-encoding the text when rendering it (defaults to
     * false). This might be useful if you want to include tags in the field's innerHTML rather than
     * rendering them as string literals per the default logic.
     */
    htmlEncode: false,

    // private
    initEvents : Ext.emptyFn,

    isValid : function(){
        return true;
    },

    validate : function(){
        return true;
    },

    getRawValue : function(){
        var v = this.rendered ? this.el.dom.innerHTML : Ext.value(this.value, '');
        if(v === this.emptyText){
            v = '';
        }
        if(this.htmlEncode){
            v = Ext.util.Format.htmlDecode(v);
        }
        return v;
    },

    getValue : function(){
        return this.getRawValue();
    },

    getName: function() {
        return this.name;
    },

    setRawValue : function(v){
        if(this.htmlEncode){
            v = Ext.util.Format.htmlEncode(v);
        }
        return this.rendered ? (this.el.dom.innerHTML = (Ext.isEmpty(v) ? '' : v)) : (this.value = v);
    },

    setValue : function(v){
        this.setRawValue(v);
        return this;
    }

/**
     * @cfg {String} inputType
     * @hide
     */

/**
     * @cfg {Boolean} disabled
     * @hide
     */

/**
     * @cfg {Boolean} readOnly
     * @hide
     */

/**
     * @cfg {Boolean} validateOnBlur
     * @hide
     */

/**
     * @cfg {Number} validationDelay
     * @hide
     */

/**
     * @cfg {String/Boolean} validationEvent
     * @hide
     */
});

Ext.reg('displayfield', Ext.form.DisplayField);


The source code

/*!
 * licensing@extjs.com
 * http://www.extjs.com/license
 */
/**
 * @class Ext.DomHelper
 */
Ext.apply(Ext.DomHelper,
function(){
    var pub,
        afterbegin = 'afterbegin',
        afterend = 'afterend',
        beforebegin = 'beforebegin',
        beforeend = 'beforeend';

    // private
    function doInsert(el, o, returnElement, pos, sibling, append){
        el = Ext.getDom(el);
        var newNode;
        if (pub.useDom) {
            newNode = createDom(o, null);
            if (append) {
                el.appendChild(newNode);
            } else {
                (sibling == 'firstChild' ? el : el.parentNode).insertBefore(newNode, el[sibling] || el);
            }
        } else {
            newNode = Ext.DomHelper.insertHtml(pos, el, Ext.DomHelper.createHtml(o));
        }
        return returnElement ? Ext.get(newNode, true) : newNode;
    }

    // build as dom
    /** @ignore */
    function createDom(o, parentNode){
        var el,
            doc = document,
            useSet,
            attr,
            val,
            cn;

        if (Ext.isArray(o)) {                       // Allow Arrays of siblings to be inserted
            el = doc.createDocumentFragment(); // in one shot using a DocumentFragment
            Ext.each(o, function(v) {
                createDom(v, el);
            });
        } else if (Ext.isString(o)) {         // Allow a string as a child spec.
            el = doc.createTextNode(o);
        } else {
            el = doc.createElement( o.tag || 'div' );
            useSet = !!el.setAttribute; // In IE some elements don't have setAttribute
            Ext.iterate(o, function(attr, val){
                if(!/tag|children|cn|html|style/.test(attr)){
                    if(attr == 'cls'){
                        el.className = val;
                    }else{
                        if(useSet){
                            el.setAttribute(attr, val);
                        }else{
                            el[attr] = val;
                        }
                    }
                }
            });
            Ext.DomHelper.applyStyles(el, o.style);

            if ((cn = o.children || o.cn)) {
                createDom(cn, el);
            } else if (o.html) {
                el.innerHTML = o.html;
            }
        }
        if(parentNode){
           parentNode.appendChild(el);
        }
        return el;
    }

    pub = {

/**
         * Creates a new Ext.Template from the DOM object spec.
         * @param {Object} o The DOM object spec (and children)
         * @return {Ext.Template} The new template
         */
        createTemplate : function(o){
            var html = Ext.DomHelper.createHtml(o);
            return new Ext.Template(html);
        },

/** True to force the use of DOM instead of html fragments @type Boolean */
        useDom : false,

/**
         * Creates new DOM element(s) and inserts them before el.
         * @param {Mixed} el The context element
         * @param {Object/String} o The DOM object spec (and children) or raw HTML blob
         * @param {Boolean} returnElement (optional) true to return a Ext.Element
         * @return {HTMLElement/Ext.Element} The new node
         * @hide (repeat)
         */
        insertBefore : function(el, o, returnElement){
            return doInsert(el, o, returnElement, beforebegin);
        },

/**
         * Creates new DOM element(s) and inserts them after el.
         * @param {Mixed} el The context element
         * @param {Object} o The DOM object spec (and children)
         * @param {Boolean} returnElement (optional) true to return a Ext.Element
         * @return {HTMLElement/Ext.Element} The new node
         * @hide (repeat)
         */
        insertAfter : function(el, o, returnElement){
            return doInsert(el, o, returnElement, afterend, 'nextSibling');
        },

/**
         * Creates new DOM element(s) and inserts them as the first child of el.
         * @param {Mixed} el The context element
         * @param {Object/String} o The DOM object spec (and children) or raw HTML blob
         * @param {Boolean} returnElement (optional) true to return a Ext.Element
         * @return {HTMLElement/Ext.Element} The new node
         * @hide (repeat)
         */
        insertFirst : function(el, o, returnElement){
            return doInsert(el, o, returnElement, afterbegin, 'firstChild');
        },

/**
         * Creates new DOM element(s) and appends them to el.
         * @param {Mixed} el The context element
         * @param {Object/String} o The DOM object spec (and children) or raw HTML blob
         * @param {Boolean} returnElement (optional) true to return a Ext.Element
         * @return {HTMLElement/Ext.Element} The new node
         * @hide (repeat)
         */
        append: function(el, o, returnElement){
            return doInsert(el, o, returnElement, beforeend, '', true);
        },

/**
         * Creates new DOM element(s) without inserting them to the document.
         * @param {Object/String} o The DOM object spec (and children) or raw HTML blob
         * @return {HTMLElement} The new uninserted node
         */
        createDom: createDom
    };
    return pub;
}());


The source code

/*!
 * licensing@extjs.com
 * http://www.extjs.com/license
 */

/**
 * @class Ext.DomHelper
 *
The DomHelper class provides a layer of abstraction from DOM and transparently supports creating
 * elements via DOM or using HTML fragments. It also has the ability to create HTML fragment templates
 * from your DOM building code.

 *
 *
DomHelper element specification object

 *
A specification object is used when creating elements. Attributes of this object
 * are assumed to be element attributes, except for 4 special attributes:
 *

 *
  • tag :
    The tag name of the element
    •
 *
  • children : or cn
    An array of the
 * same kind of element definition objects to be created and appended. These can be nested
 * as deep as you want.
    •
 *
  • cls :
    The class attribute of the element.
 * This will end up being either the "class" attribute on a HTML fragment or className
 * for a DOM node, depending on whether DomHelper is using fragments or DOM.
    •
 *
  • html :
    The innerHTML for the element
    •
 *

 *
 *
Insertion methods

 *
Commonly used insertion methods:
 *

 *
  • {@link #append} :
    •
 *
  • {@link #insertBefore} :
    •
 *
  • {@link #insertAfter} :
    •
 *
  • {@link #overwrite} :
    •
 *
  • {@link #createTemplate} :
    •
 *
  • {@link #insertHtml} :
    •
 *

 *
 *
Example

 *
This is an example, where an unordered list with 3 children items is appended to an existing
 * element with id 'my-div':

var dh = Ext.DomHelper; // create shorthand alias
// specification object
var spec = {
    id: 'my-ul',
    tag: 'ul',
    cls: 'my-list',
    // append children after creating
    children: [     // may also specify 'cn' instead of 'children'
        {tag: 'li', id: 'item0', html: 'List Item 0'},
        {tag: 'li', id: 'item1', html: 'List Item 1'},
        {tag: 'li', id: 'item2', html: 'List Item 2'}
    ]
};
var list = dh.append(
    'my-div', // the context element 'my-div' can either be the id or the actual node
    spec      // the specification object
);

 *
Element creation specification parameters in this class may also be passed as an Array of
 * specification objects. This can be used to insert multiple sibling nodes into an existing
 * container very efficiently. For example, to add more list items to the example above:

dh.append('my-ul', [
    {tag: 'li', id: 'item3', html: 'List Item 3'},
    {tag: 'li', id: 'item4', html: 'List Item 4'}
]);
 *

 *
 *
Templating

 *
The real power is in the built-in templating. Instead of creating or appending any elements,
 * {@link #createTemplate} returns a Template object which can be used over and over to
 * insert new elements. Revisiting the example above, we could utilize templating this time:
 *

// create the node
var list = dh.append('my-div', {tag: 'ul', cls: 'my-list'});
// get template
var tpl = dh.createTemplate({tag: 'li', id: 'item{0}', html: 'List Item {0}'});

for(var i = 0; i < 5, i++){
    tpl.append(list, [i]); // use template to append to the actual node
}
 *

 *
An example using a template:

var html = '{2}';

var tpl = new Ext.DomHelper.createTemplate(html);
tpl.append('blog-roll', ['link1', 'http://www.jackslocum.com/', "Jack's Site"]);
tpl.append('blog-roll', ['link2', 'http://www.dustindiaz.com/', "Dustin's Site"]);
 *

 *
 *
The same example using named parameters:

var html = '{text}';

var tpl = new Ext.DomHelper.createTemplate(html);
tpl.append('blog-roll', {
    id: 'link1',
    url: 'http://www.jackslocum.com/',
    text: "Jack's Site"
});
tpl.append('blog-roll', {
    id: 'link2',
    url: 'http://www.dustindiaz.com/',
    text: "Dustin's Site"
});
 *

 *
 *
Compiling Templates

 *
Templates are applied using regular expressions. The performance is great, but if
 * you are adding a bunch of DOM elements using the same template, you can increase
 * performance even further by {@link Ext.Template#compile "compiling"} the template.
 * The way "{@link Ext.Template#compile compile()}" works is the template is parsed and
 * broken up at the different variable points and a dynamic function is created and eval'ed.
 * The generated function performs string concatenation of these parts and the passed
 * variables instead of using regular expressions.
 *

var html = '{text}';

var tpl = new Ext.DomHelper.createTemplate(html);
tpl.compile();

//... use template like normal
 *

 *
 *
Performance Boost

 *
DomHelper will transparently create HTML fragments when it can. Using HTML fragments instead
 * of DOM can significantly boost performance.

 *
Element creation specification parameters may also be strings. If {@link #useDom} is false,
 * then the string is used as innerHTML. If {@link #useDom} is true, a string specification
 * results in the creation of a text node. Usage:

 *

Ext.DomHelper.useDom = true; // force it to use DOM; reduces performance
 *

 * @singleton
 */
Ext.DomHelper = function(){
    var tempTableEl = null,
        emptyTags = /^(?:br|frame|hr|img|input|link|meta|range|spacer|wbr|area|param|col)$/i,
        tableRe = /^table|tbody|tr|td$/i,
        pub,
        // kill repeat to save bytes
        afterbegin = 'afterbegin',
        afterend = 'afterend',
        beforebegin = 'beforebegin',
        beforeend = 'beforeend',
        ts = '',
        te = '
',
        tbs = ts+'',
        tbe = ''+te,
        trs = tbs + '',
        tre = ''+tbe;

    // private
    function doInsert(el, o, returnElement, pos, sibling, append){
        var newNode = pub.insertHtml(pos, Ext.getDom(el), createHtml(o));
        return returnElement ? Ext.get(newNode, true) : newNode;
    }

    // build as innerHTML where available
    function createHtml(o){
        var b = '',
            attr,
            val,
            key,
            keyVal,
            cn;

        if(Ext.isString(o)){
            b = o;
        } else if (Ext.isArray(o)) {
            for (var i=0; i < o.length; i++) {
                if(o[i]) {
                    b += createHtml(o[i]);
                }
            };
        } else {
            b += '<' + (o.tag = o.tag || 'div');
            Ext.iterate(o, function(attr, val){
                if(!/tag|children|cn|html$/i.test(attr)){
                    if (Ext.isObject(val)) {
                        b += ' ' + attr + '="';
                        Ext.iterate(val, function(key, keyVal){
                            b += key + ':' + keyVal + ';';
                        });
                        b += '"';
                    }else{
                        b += ' ' + ({cls : 'class', htmlFor : 'for'}[attr] || attr) + '="' + val + '"';
                    }
                }
            });
            // Now either just close the tag or try to add children and close the tag.
            if (emptyTags.test(o.tag)) {
                b += '/>';
            } else {
                b += '>';
                if ((cn = o.children || o.cn)) {
                    b += createHtml(cn);
                } else if(o.html){
                    b += o.html;
                }
                b += '';
            }
        }
        return b;
    }

    function ieTable(depth, s, h, e){
        tempTableEl.innerHTML = [s, h, e].join('');
        var i = -1,
            el = tempTableEl,
            ns;
        while(++i < depth){
            el = el.firstChild;
        }
//      If the result is multiple siblings, then encapsulate them into one fragment.
        if(ns = el.nextSibling){
            var df = document.createDocumentFragment();
            while(el){
                ns = el.nextSibling;
                df.appendChild(el);
                el = ns;
            }
            el = df;
        }
        return el;
    }

    /**
     * @ignore
     * Nasty code for IE's broken table implementation
     */
    function insertIntoTable(tag, where, el, html) {
        var node,
            before;

        tempTableEl = tempTableEl || document.createElement('div');

        if(tag == 'td' && (where == afterbegin || where == beforeend) ||
           !/td|tr|tbody/i.test(tag) && (where == beforebegin || where == afterend)) {
            return;
        }
        before = where == beforebegin ? el :
                 where == afterend ? el.nextSibling :
                 where == afterbegin ? el.firstChild : null;

        if (where == beforebegin || where == afterend) {
            el = el.parentNode;
        }

        if (tag == 'td' || (tag == 'tr' && (where == beforeend || where == afterbegin))) {
            node = ieTable(4, trs, html, tre);
        } else if ((tag == 'tbody' && (where == beforeend || where == afterbegin)) ||
                   (tag == 'tr' && (where == beforebegin || where == afterend))) {
            node = ieTable(3, tbs, html, tbe);
        } else {
            node = ieTable(2, ts, html, te);
        }
        el.insertBefore(node, before);
        return node;
    }

    pub = {

/**
         * Returns the markup for the passed Element(s) config.
         * @param {Object} o The DOM object spec (and children)
         * @return {String}
         */
        markup : function(o){
            return createHtml(o);
        },

/**
         * Applies a style specification to an element.
         * @param {String/HTMLElement} el The element to apply styles to
         * @param {String/Object/Function} styles A style specification string e.g. 'width:100px', or object in the form {width:'100px'}, or
         * a function which returns such a specification.
         */
        applyStyles : function(el, styles){
            if(styles){
                var i = 0,
                    len,
                    style;

                el = Ext.fly(el);
                if(Ext.isFunction(styles)){
                    styles = styles.call();
                }
                if(Ext.isString(styles)){
                    styles = styles.trim().split(/\s*(?::|;)\s*/);
                    for(len = styles.length; i < len;){
                        el.setStyle(styles[i++], styles[i++]);
                    }
                }else if (Ext.isObject(styles)){
                    el.setStyle(styles);
                }
            }
        },

/**
         * Inserts an HTML fragment into the DOM.
         * @param {String} where Where to insert the html in relation to el - beforeBegin, afterBegin, beforeEnd, afterEnd.
         * @param {HTMLElement} el The context element
         * @param {String} html The HTML fragment
         * @return {HTMLElement} The new node
         */
        insertHtml : function(where, el, html){
            var hash = {},
                hashVal,
                setStart,
                range,
                frag,
                rangeEl,
                rs;

            where = where.toLowerCase();
            // add these here because they are used in both branches of the condition.
            hash[beforebegin] = ['BeforeBegin', 'previousSibling'];
            hash[afterend] = ['AfterEnd', 'nextSibling'];

            if (el.insertAdjacentHTML) {
                if(tableRe.test(el.tagName) && (rs = insertIntoTable(el.tagName.toLowerCase(), where, el, html))){
                    return rs;
                }
                // add these two to the hash.
                hash[afterbegin] = ['AfterBegin', 'firstChild'];
                hash[beforeend] = ['BeforeEnd', 'lastChild'];
                if ((hashVal = hash[where])) {
                    el.insertAdjacentHTML(hashVal[0], html);
                    return el[hashVal[1]];
                }
            } else {
                range = el.ownerDocument.createRange();
                setStart = 'setStart' + (/end/i.test(where) ? 'After' : 'Before');
                if (hash[where]) {
                    range[setStart](el);
                    frag = range.createContextualFragment(html);
                    el.parentNode.insertBefore(frag, where == beforebegin ? el : el.nextSibling);
                    return el[(where == beforebegin ? 'previous' : 'next') + 'Sibling'];
                } else {
                    rangeEl = (where == afterbegin ? 'first' : 'last') + 'Child';
                    if (el.firstChild) {
                        range[setStart](el[rangeEl]);
                        frag = range.createContextualFragment(html);
                        if(where == afterbegin){
                            el.insertBefore(frag, el.firstChild);
                        }else{
                            el.appendChild(frag);
                        }
                    } else {
                        el.innerHTML = html;
                    }
                    return el[rangeEl];
                }
            }
            throw 'Illegal insertion point -> "' + where + '"';
        },

/**
         * Creates new DOM element(s) and inserts them before el.
         * @param {Mixed} el The context element
         * @param {Object/String} o The DOM object spec (and children) or raw HTML blob
         * @param {Boolean} returnElement (optional) true to return a Ext.Element
         * @return {HTMLElement/Ext.Element} The new node
         */
        insertBefore : function(el, o, returnElement){
            return doInsert(el, o, returnElement, beforebegin);
        },

/**
         * Creates new DOM element(s) and inserts them after el.
         * @param {Mixed} el The context element
         * @param {Object} o The DOM object spec (and children)
         * @param {Boolean} returnElement (optional) true to return a Ext.Element
         * @return {HTMLElement/Ext.Element} The new node
         */
        insertAfter : function(el, o, returnElement){
            return doInsert(el, o, returnElement, afterend, 'nextSibling');
        },

/**
         * Creates new DOM element(s) and inserts them as the first child of el.
         * @param {Mixed} el The context element
         * @param {Object/String} o The DOM object spec (and children) or raw HTML blob
         * @param {Boolean} returnElement (optional) true to return a Ext.Element
         * @return {HTMLElement/Ext.Element} The new node
         */
        insertFirst : function(el, o, returnElement){
            return doInsert(el, o, returnElement, afterbegin, 'firstChild');
        },

/**
         * Creates new DOM element(s) and appends them to el.
         * @param {Mixed} el The context element
         * @param {Object/String} o The DOM object spec (and children) or raw HTML blob
         * @param {Boolean} returnElement (optional) true to return a Ext.Element
         * @return {HTMLElement/Ext.Element} The new node
         */
        append : function(el, o, returnElement){
            return doInsert(el, o, returnElement, beforeend, '', true);
        },

/**
         * Creates new DOM element(s) and overwrites the contents of el with them.
         * @param {Mixed} el The context element
         * @param {Object/String} o The DOM object spec (and children) or raw HTML blob
         * @param {Boolean} returnElement (optional) true to return a Ext.Element
         * @return {HTMLElement/Ext.Element} The new node
         */
        overwrite : function(el, o, returnElement){
            el = Ext.getDom(el);
            el.innerHTML = createHtml(o);
            return returnElement ? Ext.get(el.firstChild) : el.firstChild;
        },

        createHtml : createHtml
    };
    return pub;
}();


The source code

/*!
 * licensing@extjs.com
 * http://www.extjs.com/license
 */
/*
 * This is code is also distributed under MIT license for use
 * with jQuery and prototype JavaScript libraries.
 */

/**
 * @class Ext.DomQuery
Provides high performance selector/xpath processing by compiling queries into reusable functions. New pseudo classes and matchers can be plugged. It works on HTML and XML documents (if a content node is passed in).

DomQuery supports most of the CSS3 selectors spec, along with some custom selectors and basic XPath.

All selectors, attribute filters and pseudos below can be combined infinitely in any order. For example "div.foo:nth-child(odd)[@foo=bar].bar:first" would be a perfectly valid selector. Node filters are processed in the order in which they appear, which allows you to optimize your queries for your document structure.

Element Selectors:

  •  * any element
    •

  •  E an element with the tag E
    •

  •  E F All descendent elements of E that have the tag F
    •

  •  E > F or E/F all direct children elements of E that have the tag F
    •

  •  E + F all elements with the tag F that are immediately preceded by an element with the tag E
    •

  •  E ~ F all elements with the tag F that are preceded by a sibling element with the tag E
    •

Attribute Selectors:

The use of @ and quotes are optional. For example, div[@foo='bar'] is also a valid attribute selector.

  •  E[foo] has an attribute "foo"
    •

  •  E[foo=bar] has an attribute "foo" that equals "bar"
    •

  •  E[foo^=bar] has an attribute "foo" that starts with "bar"
    •

  •  E[foo$=bar] has an attribute "foo" that ends with "bar"
    •

  •  E[foo*=bar] has an attribute "foo" that contains the substring "bar"
    •

  •  E[foo%=2] has an attribute "foo" that is evenly divisible by 2
    •

  •  E[foo!=bar] has an attribute "foo" that does not equal "bar"
    •

Pseudo Classes:

  •  E:first-child E is the first child of its parent
    •

  •  E:last-child E is the last child of its parent
    •

  •  E:nth-child(n) E is the nth child of its parent (1 based as per the spec)
    •

  •  E:nth-child(odd) E is an odd child of its parent
    •

  •  E:nth-child(even) E is an even child of its parent
    •

  •  E:only-child E is the only child of its parent
    •

  •  E:checked E is an element that is has a checked attribute that is true (e.g. a radio or checkbox)
    •

  •  E:first the first E in the resultset
    •

  •  E:last the last E in the resultset
    •

  •  E:nth(n) the nth E in the resultset (1 based)
    •

  •  E:odd shortcut for :nth-child(odd)
    •

  •  E:even shortcut for :nth-child(even)
    •

  •  E:contains(foo) E's innerHTML contains the substring "foo"
    •

  •  E:nodeValue(foo) E contains a textNode with a nodeValue that equals "foo"
    •

  •  E:not(S) an E element that does not match simple selector S
    •

  •  E:has(S) an E element that has a descendent that matches simple selector S
    •

  •  E:next(S) an E element whose next sibling matches simple selector S
    •

  •  E:prev(S) an E element whose previous sibling matches simple selector S
    •

  •  E:any(S1|S2|S2) an E element which matches any of the simple selectors S1, S2 or S3//\\
    •

CSS Value Selectors:

  •  E{display=none} css value "display" that equals "none"
    •

  •  E{display^=none} css value "display" that starts with "none"
    •

  •  E{display$=none} css value "display" that ends with "none"
    •

  •  E{display*=none} css value "display" that contains the substring "none"
    •

  •  E{display%=2} css value "display" that is evenly divisible by 2
    •

  •  E{display!=none} css value "display" that does not equal "none"
    •

 * @singleton
 */
Ext.DomQuery = function(){
    var cache = {},
        simpleCache = {},
        valueCache = {},
        nonSpace = /\S/,
        trimRe = /^\s+|\s+$/g,
        tplRe = /\{(\d+)\}/g,
        modeRe = /^(\s?[\/>+~]\s?|\s|$)/,
        tagTokenRe = /^(#)?([\w-\*]+)/,
        nthRe = /(\d*)n\+?(\d*)/,
        nthRe2 = /\D/,
        // This is for IE MSXML which does not support expandos.
    // IE runs the same speed using setAttribute, however FF slows way down
    // and Safari completely fails so they need to continue to use expandos.
    isIE = window.ActiveXObject ? true : false,
    key = 30803;

    // this eval is stop the compressor from
    // renaming the variable to something shorter
    eval("var batch = 30803;");

    // Retrieve the child node from a particular
    // parent at the specified index.
    function child(parent, index){
        var i = 0,
            n = parent.firstChild;
        while(n){
            if(n.nodeType == 1){
               if(++i == index){
                   return n;
               }
            }
            n = n.nextSibling;
        }
        return null;
    }

    // retrieve the next element node
    function next(n){
        while((n = n.nextSibling) && n.nodeType != 1);
        return n;
    }

    // retrieve the previous element node
    function prev(n){
        while((n = n.previousSibling) && n.nodeType != 1);
        return n;
    }

    // Mark each child node with a nodeIndex skipping and
    // removing empty text nodes.
    function children(parent){
        var n = parent.firstChild,
        nodeIndex = -1,
        nextNode;
    while(n){
        nextNode = n.nextSibling;
        // clean worthless empty nodes.
        if(n.nodeType == 3 && !nonSpace.test(n.nodeValue)){
        parent.removeChild(n);
        }else{
        // add an expando nodeIndex
        n.nodeIndex = ++nodeIndex;
        }
        n = nextNode;
    }
    return this;
    }

    // nodeSet - array of nodes
    // cls - CSS Class
    function byClassName(nodeSet, cls){
        if(!cls){
            return nodeSet;
        }
        var result = [], ri = -1;
        for(var i = 0, ci; ci = nodeSet[i]; i++){
            if((' '+ci.className+' ').indexOf(cls) != -1){
                result[++ri] = ci;
            }
        }
        return result;
    };

    function attrValue(n, attr){
    // if its an array, use the first node.
        if(!n.tagName && typeof n.length != "undefined"){
            n = n[0];
        }
        if(!n){
            return null;
        }

        if(attr == "for"){
            return n.htmlFor;
        }
        if(attr == "class" || attr == "className"){
            return n.className;
        }
        return n.getAttribute(attr) || n[attr];

    };

    // ns - nodes
    // mode - false, /, >, +, ~
    // tagName - defaults to "*"
    function getNodes(ns, mode, tagName){
        var result = [], ri = -1, cs;
        if(!ns){
            return result;
        }
        tagName = tagName || "*";
    // convert to array
        if(typeof ns.getElementsByTagName != "undefined"){
            ns = [ns];
        }

    // no mode specified, grab all elements by tagName
    // at any depth
        if(!mode){
            for(var i = 0, ni; ni = ns[i]; i++){
                cs = ni.getElementsByTagName(tagName);
                for(var j = 0, ci; ci = cs[j]; j++){
                    result[++ri] = ci;
                }
            }
    // Direct Child mode (/ or >)
    // E > F or E/F all direct children elements of E that have the tag
        } else if(mode == "/" || mode == ">"){
            var utag = tagName.toUpperCase();
            for(var i = 0, ni, cn; ni = ns[i]; i++){
                cn = ni.childNodes;
                for(var j = 0, cj; cj = cn[j]; j++){
                    if(cj.nodeName == utag || cj.nodeName == tagName  || tagName == '*'){
                        result[++ri] = cj;
                    }
                }
            }
    // Immediately Preceding mode (+)
    // E + F all elements with the tag F that are immediately preceded by an element with the tag E
        }else if(mode == "+"){
            var utag = tagName.toUpperCase();
            for(var i = 0, n; n = ns[i]; i++){
                while((n = n.nextSibling) && n.nodeType != 1);
                if(n && (n.nodeName == utag || n.nodeName == tagName || tagName == '*')){
                    result[++ri] = n;
                }
            }
    // Sibling mode (~)
    // E ~ F all elements with the tag F that are preceded by a sibling element with the tag E
        }else if(mode == "~"){
            var utag = tagName.toUpperCase();
            for(var i = 0, n; n = ns[i]; i++){
                while((n = n.nextSibling)){
                    if (n.nodeName == utag || n.nodeName == tagName || tagName == '*'){
                        result[++ri] = n;
                    }
                }
            }
        }
        return result;
    }

    function concat(a, b){
        if(b.slice){
            return a.concat(b);
        }
        for(var i = 0, l = b.length; i < l; i++){
            a[a.length] = b[i];
        }
        return a;
    }

    function byTag(cs, tagName){
        if(cs.tagName || cs == document){
            cs = [cs];
        }
        if(!tagName){
            return cs;
        }
        var result = [], ri = -1;
        tagName = tagName.toLowerCase();
        for(var i = 0, ci; ci = cs[i]; i++){
            if(ci.nodeType == 1 && ci.tagName.toLowerCase() == tagName){
                result[++ri] = ci;
            }
        }
        return result;
    }

    function byId(cs, id){
        if(cs.tagName || cs == document){
            cs = [cs];
        }
        if(!id){
            return cs;
        }
        var result = [], ri = -1;
        for(var i = 0, ci; ci = cs[i]; i++){
            if(ci && ci.id == id){
                result[++ri] = ci;
                return result;
            }
        }
        return result;
    }

    // operators are =, !=, ^=, $=, *=, %=, |= and ~=
    // custom can be "{"
    function byAttribute(cs, attr, value, op, custom){
        var result = [],
            ri = -1,
            useGetStyle = custom == "{",
            fn = Ext.DomQuery.operators[op],
            a,
            innerHTML;
        for(var i = 0, ci; ci = cs[i]; i++){
        // skip non-element nodes.
            if(ci.nodeType != 1){
                continue;
            }

            innerHTML = ci.innerHTML;
            // we only need to change the property names if we're dealing with html nodes, not XML
            if(innerHTML !== null && innerHTML !== undefined){
                if(useGetStyle){
                    a = Ext.DomQuery.getStyle(ci, attr);
                } else if (attr == "class" || attr == "className"){
                    a = ci.className;
                } else if (attr == "for"){
                    a = ci.htmlFor;
                } else if (attr == "href"){
            // getAttribute href bug
            // http://www.glennjones.net/Post/809/getAttributehrefbug.htm
                    a = ci.getAttribute("href", 2);
                } else{
                    a = ci.getAttribute(attr);
                }
            }else{
                a = ci.getAttribute(attr);
            }
            if((fn && fn(a, value)) || (!fn && a)){
                result[++ri] = ci;
            }
        }
        return result;
    }

    function byPseudo(cs, name, value){
        return Ext.DomQuery.pseudos[name](cs, value);
    }

    function nodupIEXml(cs){
        var d = ++key,
            r;
        cs[0].setAttribute("_nodup", d);
        r = [cs[0]];
        for(var i = 1, len = cs.length; i < len; i++){
            var c = cs[i];
            if(!c.getAttribute("_nodup") != d){
                c.setAttribute("_nodup", d);
                r[r.length] = c;
            }
        }
        for(var i = 0, len = cs.length; i < len; i++){
            cs[i].removeAttribute("_nodup");
        }
        return r;
    }

    function nodup(cs){
        if(!cs){
            return [];
        }
        var len = cs.length, c, i, r = cs, cj, ri = -1;
        if(!len || typeof cs.nodeType != "undefined" || len == 1){
            return cs;
        }
        if(isIE && typeof cs[0].selectSingleNode != "undefined"){
            return nodupIEXml(cs);
        }
        var d = ++key;
        cs[0]._nodup = d;
        for(i = 1; c = cs[i]; i++){
            if(c._nodup != d){
                c._nodup = d;
            }else{
                r = [];
                for(var j = 0; j < i; j++){
                    r[++ri] = cs[j];
                }
                for(j = i+1; cj = cs[j]; j++){
                    if(cj._nodup != d){
                        cj._nodup = d;
                        r[++ri] = cj;
                    }
                }
                return r;
            }
        }
        return r;
    }

    function quickDiffIEXml(c1, c2){
        var d = ++key,
            r = [];
        for(var i = 0, len = c1.length; i < len; i++){
            c1[i].setAttribute("_qdiff", d);
        }
        for(var i = 0, len = c2.length; i < len; i++){
            if(c2[i].getAttribute("_qdiff") != d){
                r[r.length] = c2[i];
            }
        }
        for(var i = 0, len = c1.length; i < len; i++){
           c1[i].removeAttribute("_qdiff");
        }
        return r;
    }

    function quickDiff(c1, c2){
        var len1 = c1.length,
            d = ++key,
            r = [];
        if(!len1){
            return c2;
        }
        if(isIE && typeof c1[0].selectSingleNode != "undefined"){
            return quickDiffIEXml(c1, c2);
        }
        for(var i = 0; i < len1; i++){
            c1[i]._qdiff = d;
        }
        for(var i = 0, len = c2.length; i < len; i++){
            if(c2[i]._qdiff != d){
                r[r.length] = c2[i];
            }
        }
        return r;
    }

    function quickId(ns, mode, root, id){
        if(ns == root){
           var d = root.ownerDocument || root;
           return d.getElementById(id);
        }
        ns = getNodes(ns, mode, "*");
        return byId(ns, id);
    }

    return {
        getStyle : function(el, name){
            return Ext.fly(el).getStyle(name);
        },

/**
         * Compiles a selector/xpath query into a reusable function. The returned function
         * takes one parameter "root" (optional), which is the context node from where the query should start.
         * @param {String} selector The selector/xpath query
         * @param {String} type (optional) Either "select" (the default) or "simple" for a simple selector match
         * @return {Function}
         */
        compile : function(path, type){
            type = type || "select";

        // setup fn preamble
            var fn = ["var f = function(root){\n var mode; ++batch; var n = root || document;\n"],
        mode,
        lastPath,
                matchers = Ext.DomQuery.matchers,
                matchersLn = matchers.length,
                modeMatch,
                // accept leading mode switch
                lmode = path.match(modeRe);

            if(lmode && lmode[1]){
                fn[fn.length] = 'mode="'+lmode[1].replace(trimRe, "")+'";';
                path = path.replace(lmode[1], "");
            }

            // strip leading slashes
            while(path.substr(0, 1)=="/"){
                path = path.substr(1);
            }

            while(path && lastPath != path){
                lastPath = path;
                var tokenMatch = path.match(tagTokenRe);
                if(type == "select"){
                    if(tokenMatch){
            // ID Selector
                        if(tokenMatch[1] == "#"){
                            fn[fn.length] = 'n = quickId(n, mode, root, "'+tokenMatch[2]+'");';
                        }else{
                            fn[fn.length] = 'n = getNodes(n, mode, "'+tokenMatch[2]+'");';
                        }
                        path = path.replace(tokenMatch[0], "");
                    }else if(path.substr(0, 1) != '@'){
                        fn[fn.length] = 'n = getNodes(n, mode, "*");';
                    }
        // type of "simple"
                }else{
                    if(tokenMatch){
                        if(tokenMatch[1] == "#"){
                            fn[fn.length] = 'n = byId(n, "'+tokenMatch[2]+'");';
                        }else{
                            fn[fn.length] = 'n = byTag(n, "'+tokenMatch[2]+'");';
                        }
                        path = path.replace(tokenMatch[0], "");
                    }
                }
                while(!(modeMatch = path.match(modeRe))){
                    var matched = false;
                    for(var j = 0; j < matchersLn; j++){
                        var t = matchers[j];
                        var m = path.match(t.re);
                        if(m){
                            fn[fn.length] = t.select.replace(tplRe, function(x, i){
                return m[i];
                });
                            path = path.replace(m[0], "");
                            matched = true;
                            break;
                        }
                    }
                    // prevent infinite loop on bad selector
                    if(!matched){
                        throw 'Error parsing selector, parsing failed at "' + path + '"';
                    }
                }
                if(modeMatch[1]){
                    fn[fn.length] = 'mode="'+modeMatch[1].replace(trimRe, "")+'";';
                    path = path.replace(modeMatch[1], "");
                }
            }
        // close fn out
            fn[fn.length] = "return nodup(n);\n}";

        // eval fn and return it
            eval(fn.join(""));
            return f;
        },

/**
         * Selects a group of elements.
         * @param {String} selector The selector/xpath query (can be a comma separated list of selectors)
         * @param {Node/String} root (optional) The start of the query (defaults to document).
         * @return {Array} An Array of DOM elements which match the selector. If there are
         * no matches, and empty Array is returned.
         */
    jsSelect: function(path, root, type){
        // set root to doc if not specified.
        root = root || document;

            if(typeof root == "string"){
                root = document.getElementById(root);
            }
            var paths = path.split(","),
                results = [];

        // loop over each selector
            for(var i = 0, len = paths.length; i < len; i++){
                var subPath = paths[i].replace(trimRe, "");
        // compile and place in cache
                if(!cache[subPath]){
                    cache[subPath] = Ext.DomQuery.compile(subPath);
                    if(!cache[subPath]){
                        throw subPath + " is not a valid selector";
                    }
                }
                var result = cache[subPath](root);
                if(result && result != document){
                    results = results.concat(result);
                }
            }

        // if there were multiple selectors, make sure dups
        // are eliminated
            if(paths.length > 1){
                return nodup(results);
            }
            return results;
        },
    isXml: function(el) {
        var docEl = (el ? el.ownerDocument || el : 0).documentElement;
        return docEl ? docEl.nodeName !== "HTML" : false;
    },
        select : document.querySelectorAll ? function(path, root, type) {
        root = root || document;
        if (!Ext.DomQuery.isXml(root)) {
        try {
            var cs = root.querySelectorAll(path);
            return Ext.toArray(cs);
        }
        catch (ex) {}
        }
        return Ext.DomQuery.jsSelect.call(this, path, root, type);
    } : function(path, root, type) {
        return Ext.DomQuery.jsSelect.call(this, path, root, type);
    },

/**
         * Selects a single element.
         * @param {String} selector The selector/xpath query
         * @param {Node} root (optional) The start of the query (defaults to document).
         * @return {Element} The DOM element which matched the selector.
         */
        selectNode : function(path, root){
            return Ext.DomQuery.select(path, root)[0];
        },

/**
         * Selects the value of a node, optionally replacing null with the defaultValue.
         * @param {String} selector The selector/xpath query
         * @param {Node} root (optional) The start of the query (defaults to document).
         * @param {String} defaultValue
         * @return {String}
         */
        selectValue : function(path, root, defaultValue){
            path = path.replace(trimRe, "");
            if(!valueCache[path]){
                valueCache[path] = Ext.DomQuery.compile(path, "select");
            }
            var n = valueCache[path](root), v;
            n = n[0] ? n[0] : n;

        // overcome a limitation of maximum textnode size
        // Rumored to potentially crash IE6 but has not been confirmed.
        // http://reference.sitepoint.com/javascript/Node/normalize
        // https://developer.mozilla.org/En/DOM/Node.normalize
            if (typeof n.normalize == 'function') n.normalize();

            v = (n && n.firstChild ? n.firstChild.nodeValue : null);
            return ((v === null||v === undefined||v==='') ? defaultValue : v);
        },

/**
         * Selects the value of a node, parsing integers and floats. Returns the defaultValue, or 0 if none is specified.
         * @param {String} selector The selector/xpath query
         * @param {Node} root (optional) The start of the query (defaults to document).
         * @param {Number} defaultValue
         * @return {Number}
         */
        selectNumber : function(path, root, defaultValue){
            var v = Ext.DomQuery.selectValue(path, root, defaultValue || 0);
            return parseFloat(v);
        },

/**
         * Returns true if the passed element(s) match the passed simple selector (e.g. div.some-class or span:first-child)
         * @param {String/HTMLElement/Array} el An element id, element or array of elements
         * @param {String} selector The simple selector to test
         * @return {Boolean}
         */
        is : function(el, ss){
            if(typeof el == "string"){
                el = document.getElementById(el);
            }
            var isArray = Ext.isArray(el),
                result = Ext.DomQuery.filter(isArray ? el : [el], ss);
            return isArray ? (result.length == el.length) : (result.length > 0);
        },

/**
         * Filters an array of elements to only include matches of a simple selector (e.g. div.some-class or span:first-child)
         * @param {Array} el An array of elements to filter
         * @param {String} selector The simple selector to test
         * @param {Boolean} nonMatches If true, it returns the elements that DON'T match
         * the selector instead of the ones that match
         * @return {Array} An Array of DOM elements which match the selector. If there are
         * no matches, and empty Array is returned.
         */
        filter : function(els, ss, nonMatches){
            ss = ss.replace(trimRe, "");
            if(!simpleCache[ss]){
                simpleCache[ss] = Ext.DomQuery.compile(ss, "simple");
            }
            var result = simpleCache[ss](els);
            return nonMatches ? quickDiff(result, els) : result;
        },

/**
         * Collection of matching regular expressions and code snippets.
         * Each capture group within () will be replace the {} in the select
         * statement as specified by their index.
         */
        matchers : [{
                re: /^\.([\w-]+)/,
                select: 'n = byClassName(n, " {1} ");'
            }, {
                re: /^\:([\w-]+)(?:\(((?:[^\s>\/]*|.*?))\))?/,
                select: 'n = byPseudo(n, "{1}", "{2}");'
            },{
                re: /^(?:([\[\{])(?:@)?([\w-]+)\s?(?:(=|.=)\s?['"]?(.*?)["']?)?[\]\}])/,
                select: 'n = byAttribute(n, "{2}", "{4}", "{3}", "{1}");'
            }, {
                re: /^#([\w-]+)/,
                select: 'n = byId(n, "{1}");'
            },{
                re: /^@([\w-]+)/,
                select: 'return {firstChild:{nodeValue:attrValue(n, "{1}")}};'
            }
        ],

/**
         * Collection of operator comparison functions. The default operators are =, !=, ^=, $=, *=, %=, |= and ~=.
         * New operators can be added as long as the match the format c= where c is any character other than space, > <.
         */
        operators : {
            "=" : function(a, v){
                return a == v;
            },
            "!=" : function(a, v){
                return a != v;
            },
            "^=" : function(a, v){
                return a && a.substr(0, v.length) == v;
            },
            "$=" : function(a, v){
                return a && a.substr(a.length-v.length) == v;
            },
            "*=" : function(a, v){
                return a && a.indexOf(v) !== -1;
            },
            "%=" : function(a, v){
                return (a % v) == 0;
            },
            "|=" : function(a, v){
                return a && (a == v || a.substr(0, v.length+1) == v+'-');
            },
            "~=" : function(a, v){
                return a && (' '+a+' ').indexOf(' '+v+' ') != -1;
            }
        },

/**
         *
Object hash of "pseudo class" filter functions which are used when filtering selections. Each function is passed
         * two parameters:

         *
  • c : Array
    An Array of DOM elements to filter.
    •
         *
  • v : String
    The argument (if any) supplied in the selector.
    •
         *

         *
A filter function returns an Array of DOM elements which conform to the pseudo class.

         *
In addition to the provided pseudo classes listed above such as first-child and nth-child,
         * developers may add additional, custom psuedo class filters to select elements according to application-specific requirements.

         *
For example, to filter <a> elements to only return links to external resources:

         *
Ext.DomQuery.pseudos.external = function(c, v){
    var r = [], ri = -1;
    for(var i = 0, ci; ci = c[i]; i++){
//      Include in result set only if it's a link to an external resource
        if(ci.hostname != location.hostname){
            r[++ri] = ci;
        }
    }
    return r;
};

         * Then external links could be gathered with the following statement:
var externalLinks = Ext.select("a:external");

         */
        pseudos : {
            "first-child" : function(c){
                var r = [], ri = -1, n;
                for(var i = 0, ci; ci = n = c[i]; i++){
                    while((n = n.previousSibling) && n.nodeType != 1);
                    if(!n){
                        r[++ri] = ci;
                    }
                }
                return r;
            },

            "last-child" : function(c){
                var r = [], ri = -1, n;
                for(var i = 0, ci; ci = n = c[i]; i++){
                    while((n = n.nextSibling) && n.nodeType != 1);
                    if(!n){
                        r[++ri] = ci;
                    }
                }
                return r;
            },

            "nth-child" : function(c, a) {
                var r = [], ri = -1,
                    m = nthRe.exec(a == "even" && "2n" || a == "odd" && "2n+1" || !nthRe2.test(a) && "n+" + a || a),
                    f = (m[1] || 1) - 0, l = m[2] - 0;
                for(var i = 0, n; n = c[i]; i++){
                    var pn = n.parentNode;
                    if (batch != pn._batch) {
                        var j = 0;
                        for(var cn = pn.firstChild; cn; cn = cn.nextSibling){
                            if(cn.nodeType == 1){
                               cn.nodeIndex = ++j;
                            }
                        }
                        pn._batch = batch;
                    }
                    if (f == 1) {
                        if (l == 0 || n.nodeIndex == l){
                            r[++ri] = n;
                        }
                    } else if ((n.nodeIndex + l) % f == 0){
                        r[++ri] = n;
                    }
                }

                return r;
            },

            "only-child" : function(c){
                var r = [], ri = -1;;
                for(var i = 0, ci; ci = c[i]; i++){
                    if(!prev(ci) && !next(ci)){
                        r[++ri] = ci;
                    }
                }
                return r;
            },

            "empty" : function(c){
                var r = [], ri = -1;
                for(var i = 0, ci; ci = c[i]; i++){
                    var cns = ci.childNodes, j = 0, cn, empty = true;
                    while(cn = cns[j]){
                        ++j;
                        if(cn.nodeType == 1 || cn.nodeType == 3){
                            empty = false;
                            break;
                        }
                    }
                    if(empty){
                        r[++ri] = ci;
                    }
                }
                return r;
            },

            "contains" : function(c, v){
                var r = [], ri = -1;
                for(var i = 0, ci; ci = c[i]; i++){
                    if((ci.textContent||ci.innerText||'').indexOf(v) != -1){
                        r[++ri] = ci;
                    }
                }
                return r;
            },

            "nodeValue" : function(c, v){
                var r = [], ri = -1;
                for(var i = 0, ci; ci = c[i]; i++){
                    if(ci.firstChild && ci.firstChild.nodeValue == v){
                        r[++ri] = ci;
                    }
                }
                return r;
            },

            "checked" : function(c){
                var r = [], ri = -1;
                for(var i = 0, ci; ci = c[i]; i++){
                    if(ci.checked == true){
                        r[++ri] = ci;
                    }
                }
                return r;
            },

            "not" : function(c, ss){
                return Ext.DomQuery.filter(c, ss, true);
            },

            "any" : function(c, selectors){
                var ss = selectors.split('|'),
                    r = [], ri = -1, s;
                for(var i = 0, ci; ci = c[i]; i++){
                    for(var j = 0; s = ss[j]; j++){
                        if(Ext.DomQuery.is(ci, s)){
                            r[++ri] = ci;
                            break;
                        }
                    }
                }
                return r;
            },

            "odd" : function(c){
                return this["nth-child"](c, "odd");
            },

            "even" : function(c){
                return this["nth-child"](c, "even");
            },

            "nth" : function(c, a){
                return c[a-1] || [];
            },

            "first" : function(c){
                return c[0] || [];
            },

            "last" : function(c){
                return c[c.length-1] || [];
            },

            "has" : function(c, ss){
                var s = Ext.DomQuery.select,
                    r = [], ri = -1;
                for(var i = 0, ci; ci = c[i]; i++){
                    if(s(ss, ci).length > 0){
                        r[++ri] = ci;
                    }
                }
                return r;
            },

            "next" : function(c, ss){
                var is = Ext.DomQuery.is,
                    r = [], ri = -1;
                for(var i = 0, ci; ci = c[i]; i++){
                    var n = next(ci);
                    if(n && is(n, ss)){
                        r[++ri] = ci;
                    }
                }
                return r;
            },

            "prev" : function(c, ss){
                var is = Ext.DomQuery.is,
                    r = [], ri = -1;
                for(var i = 0, ci; ci = c[i]; i++){
                    var n = prev(ci);
                    if(n && is(n, ss)){
                        r[++ri] = ci;
                    }
                }
                return r;
            }
        }
    };
}();

/**
 * Selects an array of DOM nodes by CSS/XPath selector. Shorthand of {@link Ext.DomQuery#select}
 * @param {String} path The selector/xpath query
 * @param {Node} root (optional) The start of the query (defaults to document).
 * @return {Array}
 * @member Ext
 * @method query
 */
Ext.query = Ext.DomQuery.select;


The source code

/*!
 * licensing@extjs.com
 * http://www.extjs.com/license
 */

/**
 * @class Ext.dd.DragSource
 * @extends Ext.dd.DDProxy
 * A simple class that provides the basic implementation needed to make any element draggable.
 * @constructor
 * @param {Mixed} el The container element
 * @param {Object} config
 */
Ext.dd.DragSource = function(el, config){
    this.el = Ext.get(el);
    if(!this.dragData){
        this.dragData = {};
    }

    Ext.apply(this, config);

    if(!this.proxy){
        this.proxy = new Ext.dd.StatusProxy();
    }
    Ext.dd.DragSource.superclass.constructor.call(this, this.el.dom, this.ddGroup || this.group,
          {dragElId : this.proxy.id, resizeFrame: false, isTarget: false, scroll: this.scroll === true});

    this.dragging = false;
};

Ext.extend(Ext.dd.DragSource, Ext.dd.DDProxy, {

/**
     * @cfg {String} ddGroup
     * A named drag drop group to which this object belongs.  If a group is specified, then this object will only
     * interact with other drag drop objects in the same group (defaults to undefined).
     */

/**
     * @cfg {String} dropAllowed
     * The CSS class returned to the drag source when drop is allowed (defaults to "x-dd-drop-ok").
     */
    dropAllowed : "x-dd-drop-ok",

/**
     * @cfg {String} dropNotAllowed
     * The CSS class returned to the drag source when drop is not allowed (defaults to "x-dd-drop-nodrop").
     */
    dropNotAllowed : "x-dd-drop-nodrop",

/**
     * Returns the data object associated with this drag source
     * @return {Object} data An object containing arbitrary data
     */
    getDragData : function(e){
        return this.dragData;
    },

    // private
    onDragEnter : function(e, id){
        var target = Ext.dd.DragDropMgr.getDDById(id);
        this.cachedTarget = target;
        if(this.beforeDragEnter(target, e, id) !== false){
            if(target.isNotifyTarget){
                var status = target.notifyEnter(this, e, this.dragData);
                this.proxy.setStatus(status);
            }else{
                this.proxy.setStatus(this.dropAllowed);
            }

            if(this.afterDragEnter){

/**
                 * An empty function by default, but provided so that you can perform a custom action
                 * when the dragged item enters the drop target by providing an implementation.
                 * @param {Ext.dd.DragDrop} target The drop target
                 * @param {Event} e The event object
                 * @param {String} id The id of the dragged element
                 * @method afterDragEnter
                 */
                this.afterDragEnter(target, e, id);
            }
        }
    },

/**
     * An empty function by default, but provided so that you can perform a custom action
     * before the dragged item enters the drop target and optionally cancel the onDragEnter.
     * @param {Ext.dd.DragDrop} target The drop target
     * @param {Event} e The event object
     * @param {String} id The id of the dragged element
     * @return {Boolean} isValid True if the drag event is valid, else false to cancel
     */
    beforeDragEnter : function(target, e, id){
        return true;
    },

    // private
    alignElWithMouse: function() {
        Ext.dd.DragSource.superclass.alignElWithMouse.apply(this, arguments);
        this.proxy.sync();
    },

    // private
    onDragOver : function(e, id){
        var target = this.cachedTarget || Ext.dd.DragDropMgr.getDDById(id);
        if(this.beforeDragOver(target, e, id) !== false){
            if(target.isNotifyTarget){
                var status = target.notifyOver(this, e, this.dragData);
                this.proxy.setStatus(status);
            }

            if(this.afterDragOver){

/**
                 * An empty function by default, but provided so that you can perform a custom action
                 * while the dragged item is over the drop target by providing an implementation.
                 * @param {Ext.dd.DragDrop} target The drop target
                 * @param {Event} e The event object
                 * @param {String} id The id of the dragged element
                 * @method afterDragOver
                 */
                this.afterDragOver(target, e, id);
            }
        }
    },

/**
     * An empty function by default, but provided so that you can perform a custom action
     * while the dragged item is over the drop target and optionally cancel the onDragOver.
     * @param {Ext.dd.DragDrop} target The drop target
     * @param {Event} e The event object
     * @param {String} id The id of the dragged element
     * @return {Boolean} isValid True if the drag event is valid, else false to cancel
     */
    beforeDragOver : function(target, e, id){
        return true;
    },

    // private
    onDragOut : function(e, id){
        var target = this.cachedTarget || Ext.dd.DragDropMgr.getDDById(id);
        if(this.beforeDragOut(target, e, id) !== false){
            if(target.isNotifyTarget){
                target.notifyOut(this, e, this.dragData);
            }
            this.proxy.reset();
            if(this.afterDragOut){

/**
                 * An empty function by default, but provided so that you can perform a custom action
                 * after the dragged item is dragged out of the target without dropping.
                 * @param {Ext.dd.DragDrop} target The drop target
                 * @param {Event} e The event object
                 * @param {String} id The id of the dragged element
                 * @method afterDragOut
                 */
                this.afterDragOut(target, e, id);
            }
        }
        this.cachedTarget = null;
    },

/**
     * An empty function by default, but provided so that you can perform a custom action before the dragged
     * item is dragged out of the target without dropping, and optionally cancel the onDragOut.
     * @param {Ext.dd.DragDrop} target The drop target
     * @param {Event} e The event object
     * @param {String} id The id of the dragged element
     * @return {Boolean} isValid True if the drag event is valid, else false to cancel
     */
    beforeDragOut : function(target, e, id){
        return true;
    },

    // private
    onDragDrop : function(e, id){
        var target = this.cachedTarget || Ext.dd.DragDropMgr.getDDById(id);
        if(this.beforeDragDrop(target, e, id) !== false){
            if(target.isNotifyTarget){
                if(target.notifyDrop(this, e, this.dragData)){ // valid drop?
                    this.onValidDrop(target, e, id);
                }else{
                    this.onInvalidDrop(target, e, id);
                }
            }else{
                this.onValidDrop(target, e, id);
            }

            if(this.afterDragDrop){

/**
                 * An empty function by default, but provided so that you can perform a custom action
                 * after a valid drag drop has occurred by providing an implementation.
                 * @param {Ext.dd.DragDrop} target The drop target
                 * @param {Event} e The event object
                 * @param {String} id The id of the dropped element
                 * @method afterDragDrop
                 */
                this.afterDragDrop(target, e, id);
            }
        }
        delete this.cachedTarget;
    },

/**
     * An empty function by default, but provided so that you can perform a custom action before the dragged
     * item is dropped onto the target and optionally cancel the onDragDrop.
     * @param {Ext.dd.DragDrop} target The drop target
     * @param {Event} e The event object
     * @param {String} id The id of the dragged element
     * @return {Boolean} isValid True if the drag drop event is valid, else false to cancel
     */
    beforeDragDrop : function(target, e, id){
        return true;
    },

    // private
    onValidDrop : function(target, e, id){
        this.hideProxy();
        if(this.afterValidDrop){
            /**
             * An empty function by default, but provided so that you can perform a custom action
             * after a valid drop has occurred by providing an implementation.
             * @param {Object} target The target DD
             * @param {Event} e The event object
             * @param {String} id The id of the dropped element
             * @method afterInvalidDrop
             */
            this.afterValidDrop(target, e, id);
        }
    },

    // private
    getRepairXY : function(e, data){
        return this.el.getXY();
    },

    // private
    onInvalidDrop : function(target, e, id){
        this.beforeInvalidDrop(target, e, id);
        if(this.cachedTarget){
            if(this.cachedTarget.isNotifyTarget){
                this.cachedTarget.notifyOut(this, e, this.dragData);
            }
            this.cacheTarget = null;
        }
        this.proxy.repair(this.getRepairXY(e, this.dragData), this.afterRepair, this);

        if(this.afterInvalidDrop){

/**
             * An empty function by default, but provided so that you can perform a custom action
             * after an invalid drop has occurred by providing an implementation.
             * @param {Event} e The event object
             * @param {String} id The id of the dropped element
             * @method afterInvalidDrop
             */
            this.afterInvalidDrop(e, id);
        }
    },

    // private
    afterRepair : function(){
        if(Ext.enableFx){
            this.el.highlight(this.hlColor || "c3daf9");
        }
        this.dragging = false;
    },

/**
     * An empty function by default, but provided so that you can perform a custom action after an invalid
     * drop has occurred.
     * @param {Ext.dd.DragDrop} target The drop target
     * @param {Event} e The event object
     * @param {String} id The id of the dragged element
     * @return {Boolean} isValid True if the invalid drop should proceed, else false to cancel
     */
    beforeInvalidDrop : function(target, e, id){
        return true;
    },

    // private
    handleMouseDown : function(e){
        if(this.dragging) {
            return;
        }
        var data = this.getDragData(e);
        if(data && this.onBeforeDrag(data, e) !== false){
            this.dragData = data;
            this.proxy.stop();
            Ext.dd.DragSource.superclass.handleMouseDown.apply(this, arguments);
        }
    },

/**
     * An empty function by default, but provided so that you can perform a custom action before the initial
     * drag event begins and optionally cancel it.
     * @param {Object} data An object containing arbitrary data to be shared with drop targets
     * @param {Event} e The event object
     * @return {Boolean} isValid True if the drag event is valid, else false to cancel
     */
    onBeforeDrag : function(data, e){
        return true;
    },

/**
     * An empty function by default, but provided so that you can perform a custom action once the initial
     * drag event has begun.  The drag cannot be canceled from this function.
     * @param {Number} x The x position of the click on the dragged object
     * @param {Number} y The y position of the click on the dragged object
     */
    onStartDrag : Ext.emptyFn,

    // private override
    startDrag : function(x, y){
        this.proxy.reset();
        this.dragging = true;
        this.proxy.update("");
        this.onInitDrag(x, y);
        this.proxy.show();
    },

    // private
    onInitDrag : function(x, y){
        var clone = this.el.dom.cloneNode(true);
        clone.id = Ext.id(); // prevent duplicate ids
        this.proxy.update(clone);
        this.onStartDrag(x, y);
        return true;
    },

/**
     * Returns the drag source's underlying {@link Ext.dd.StatusProxy}
     * @return {Ext.dd.StatusProxy} proxy The StatusProxy
     */
    getProxy : function(){
        return this.proxy;
    },

/**
     * Hides the drag source's {@link Ext.dd.StatusProxy}
     */
    hideProxy : function(){
        this.proxy.hide();
        this.proxy.reset(true);
        this.dragging = false;
    },

    // private
    triggerCacheRefresh : function(){
        Ext.dd.DDM.refreshCache(this.groups);
    },

    // private - override to prevent hiding
    b4EndDrag: function(e) {
    },

    // private - override to prevent moving
    endDrag : function(e){
        this.onEndDrag(this.dragData, e);
    },

    // private
    onEndDrag : function(data, e){
    },

    // private - pin to cursor
    autoOffset : function(x, y) {
        this.setDelta(-12, -20);
    },

    destroy: function(){
        Ext.dd.DragSource.superclass.destroy.call(this);
        Ext.destroy(this.proxy);
    }
});


The source code

/*!
 * licensing@extjs.com
 * http://www.extjs.com/license
 */

/**
 * @class Ext.dd.DragTracker
 * @extends Ext.util.Observable
 * A DragTracker listens for drag events on an Element and fires events at the start and end of the drag,
 * as well as during the drag. This is useful for components such as {@link Ext.Slider}, where there is
 * an element that can be dragged around to change the Slider's value.
 * DragTracker provides a series of template methods that should be overridden to provide functionality
 * in response to detected drag operations. These are onBeforeStart, onStart, onDrag and onEnd.
 * See {@link Ext.Slider}'s initEvents function for an example implementation.
 */
Ext.dd.DragTracker = Ext.extend(Ext.util.Observable,  {

/**
     * @cfg {Boolean} active
     * Defaults to false.
     */
    active: false,

/**
     * @cfg {Number} tolerance
     * Number of pixels the drag target must be moved before dragging is considered to have started. Defaults to 5.
     */
    tolerance: 5,

/**
     * @cfg {Boolean/Number} autoStart
     * Defaults to false. Specify true to defer trigger start by 1000 ms.
     * Specify a Number for the number of milliseconds to defer trigger start.
     */
    autoStart: false,

    constructor : function(config){
        Ext.apply(this, config);
        this.addEvents(

/**
             * @event mousedown
             * @param {Object} this
             * @param {Object} e event object
             */
            'mousedown',

/**
             * @event mouseup
             * @param {Object} this
             * @param {Object} e event object
             */
            'mouseup',

/**
             * @event mousemove
             * @param {Object} this
             * @param {Object} e event object
             */
            'mousemove',

/**
             * @event dragstart
             * @param {Object} this
             * @param {Object} startXY the page coordinates of the event
             */
            'dragstart',

/**
             * @event dragend
             * @param {Object} this
             * @param {Object} e event object
             */
            'dragend',

/**
             * @event drag
             * @param {Object} this
             * @param {Object} e event object
             */
            'drag'
        );

        this.dragRegion = new Ext.lib.Region(0,0,0,0);

        if(this.el){
            this.initEl(this.el);
        }
        Ext.dd.DragTracker.superclass.constructor.call(this, config);
    },

    initEl: function(el){
        this.el = Ext.get(el);
        el.on('mousedown', this.onMouseDown, this,
                this.delegate ? {delegate: this.delegate} : undefined);
    },

    destroy : function(){
        this.el.un('mousedown', this.onMouseDown, this);
    },

    onMouseDown: function(e, target){
        if(this.fireEvent('mousedown', this, e) !== false && this.onBeforeStart(e) !== false){
            this.startXY = this.lastXY = e.getXY();
            this.dragTarget = this.delegate ? target : this.el.dom;
            if(this.preventDefault !== false){
                e.preventDefault();
            }
            var doc = Ext.getDoc();
            doc.on('mouseup', this.onMouseUp, this);
            doc.on('mousemove', this.onMouseMove, this);
            doc.on('selectstart', this.stopSelect, this);
            if(this.autoStart){
                this.timer = this.triggerStart.defer(this.autoStart === true ? 1000 : this.autoStart, this);
            }
        }
    },

    onMouseMove: function(e, target){
        // HACK: IE hack to see if button was released outside of window. */
        if(this.active && Ext.isIE && !e.browserEvent.button){
            e.preventDefault();
            this.onMouseUp(e);
            return;
        }

        e.preventDefault();
        var xy = e.getXY(), s = this.startXY;
        this.lastXY = xy;
        if(!this.active){
            if(Math.abs(s[0]-xy[0]) > this.tolerance || Math.abs(s[1]-xy[1]) > this.tolerance){
                this.triggerStart();
            }else{
                return;
            }
        }
        this.fireEvent('mousemove', this, e);
        this.onDrag(e);
        this.fireEvent('drag', this, e);
    },

    onMouseUp: function(e) {
        var doc = Ext.getDoc();
        doc.un('mousemove', this.onMouseMove, this);
        doc.un('mouseup', this.onMouseUp, this);
        doc.un('selectstart', this.stopSelect, this);
        e.preventDefault();
        this.clearStart();
        var wasActive = this.active;
        this.active = false;
        delete this.elRegion;
        this.fireEvent('mouseup', this, e);
        if(wasActive){
            this.onEnd(e);
            this.fireEvent('dragend', this, e);
        }
    },

    triggerStart: function(isTimer) {
        this.clearStart();
        this.active = true;
        this.onStart(this.startXY);
        this.fireEvent('dragstart', this, this.startXY);
    },

    clearStart : function() {
        if(this.timer){
            clearTimeout(this.timer);
            delete this.timer;
        }
    },

    stopSelect : function(e) {
        e.stopEvent();
        return false;
    },

/**
     * Template method which should be overridden by each DragTracker instance. Called when the user first clicks and
     * holds the mouse button down. Return false to disallow the drag
     * @param {Ext.EventObject} e The event object
     */
    onBeforeStart : function(e) {

    },

/**
     * Template method which should be overridden by each DragTracker instance. Called when a drag operation starts
     * (e.g. the user has moved the tracked element beyond the specified tolerance)
     * @param {Array} xy x and y co-ordinates of the original location of the tracked element
     */
    onStart : function(xy) {

    },

/**
     * Template method which should be overridden by each DragTracker instance. Called whenever a drag has been detected.
     * @param {Ext.EventObject} e The event object
     */
    onDrag : function(e) {

    },

/**
     * Template method which should be overridden by each DragTracker instance. Called when a drag operation has been completed
     * (e.g. the user clicked and held the mouse down, dragged the element and then released the mouse button)
     * @param {Ext.EventObject} e The event object
     */
    onEnd : function(e) {

    },

/**
     * Returns the drag target
     * @return {Ext.Element} The element currently being tracked
     */
    getDragTarget : function(){
        return this.dragTarget;
    },

    getDragCt : function(){
        return this.el;
    },

    getXY : function(constrain){
        return constrain ?
               this.constrainModes[constrain].call(this, this.lastXY) : this.lastXY;
    },

    getOffset : function(constrain){
        var xy = this.getXY(constrain);
        var s = this.startXY;
        return [s[0]-xy[0], s[1]-xy[1]];
    },

    constrainModes: {
        'point' : function(xy){

            if(!this.elRegion){
                this.elRegion = this.getDragCt().getRegion();
            }

            var dr = this.dragRegion;

            dr.left = xy[0];
            dr.top = xy[1];
            dr.right = xy[0];
            dr.bottom = xy[1];

            dr.constrainTo(this.elRegion);

            return [dr.left, dr.top];
        }
    }
});


The source code

/*!
 * licensing@extjs.com
 * http://www.extjs.com/license
 */

/**
 * @class Ext.dd.DragZone
 * @extends Ext.dd.DragSource
 *
This class provides a container DD instance that allows dragging of multiple child source nodes.

 *
This class does not move the drag target nodes, but a proxy element which may contain
 * any DOM structure you wish. The DOM element to show in the proxy is provided by either a
 * provided implementation of {@link #getDragData}, or by registered draggables registered with {@link Ext.dd.Registry}

 *
If you wish to provide draggability for an arbitrary number of DOM nodes, each of which represent some
 * application object (For example nodes in a {@link Ext.DataView DataView}) then use of this class
 * is the most efficient way to "activate" those nodes.

 *
By default, this class requires that draggable child nodes are registered with {@link Ext.dd.Registry}.
 * However a simpler way to allow a DragZone to manage any number of draggable elements is to configure
 * the DragZone with  an implementation of the {@link #getDragData} method which interrogates the passed
 * mouse event to see if it has taken place within an element, or class of elements. This is easily done
 * by using the event's {@link Ext.EventObject#getTarget getTarget} method to identify a node based on a
 * {@link Ext.DomQuery} selector. For example, to make the nodes of a DataView draggable, use the following
 * technique. Knowledge of the use of the DataView is required:

myDataView.on('render', function(v) {
    myDataView.dragZone = new Ext.dd.DragZone(v.getEl(), {

//      On receipt of a mousedown event, see if it is within a DataView node.
//      Return a drag data object if so.
        getDragData: function(e) {

//          Use the DataView's own itemSelector (a mandatory property) to
//          test if the mousedown is within one of the DataView's nodes.
            var sourceEl = e.getTarget(v.itemSelector, 10);

//          If the mousedown is within a DataView node, clone the node to produce
//          a ddel element for use by the drag proxy. Also add application data
//          to the returned data object.
            if (sourceEl) {
                d = sourceEl.cloneNode(true);
                d.id = Ext.id();
                return {
                    ddel: d,
                    sourceEl: sourceEl,
                    repairXY: Ext.fly(sourceEl).getXY(),
                    sourceStore: v.store,
                    draggedRecord: v.{@link Ext.DataView#getRecord getRecord}(sourceEl)
                }
            }
        },

//      Provide coordinates for the proxy to slide back to on failed drag.
//      This is the original XY coordinates of the draggable element captured
//      in the getDragData method.
        getRepairXY: function() {
            return this.dragData.repairXY;
        }
    });
});

 * See the {@link Ext.dd.DropZone DropZone} documentation for details about building a DropZone which
 * cooperates with this DragZone.
 * @constructor
 * @param {Mixed} el The container element
 * @param {Object} config
 */
Ext.dd.DragZone = function(el, config){
    Ext.dd.DragZone.superclass.constructor.call(this, el, config);
    if(this.containerScroll){
        Ext.dd.ScrollManager.register(this.el);
    }
};

Ext.extend(Ext.dd.DragZone, Ext.dd.DragSource, {

/**
     * This property contains the data representing the dragged object. This data is set up by the implementation
     * of the {@link #getDragData} method. It must contain a ddel property, but can contain
     * any other data according to the application's needs.
     * @type Object
     * @property dragData
     */

/**
     * @cfg {Boolean} containerScroll True to register this container with the Scrollmanager
     * for auto scrolling during drag operations.
     */

/**
     * @cfg {String} hlColor The color to use when visually highlighting the drag source in the afterRepair
     * method after a failed drop (defaults to "c3daf9" - light blue)
     */

/**
     * Called when a mousedown occurs in this container. Looks in {@link Ext.dd.Registry}
     * for a valid target to drag based on the mouse down. Override this method
     * to provide your own lookup logic (e.g. finding a child by class name). Make sure your returned
     * object has a "ddel" attribute (with an HTML Element) for other functions to work.
     * @param {EventObject} e The mouse down event
     * @return {Object} The dragData
     */
    getDragData : function(e){
        return Ext.dd.Registry.getHandleFromEvent(e);
    },

/**
     * Called once drag threshold has been reached to initialize the proxy element. By default, it clones the
     * this.dragData.ddel
     * @param {Number} x The x position of the click on the dragged object
     * @param {Number} y The y position of the click on the dragged object
     * @return {Boolean} true to continue the drag, false to cancel
     */
    onInitDrag : function(x, y){
        this.proxy.update(this.dragData.ddel.cloneNode(true));
        this.onStartDrag(x, y);
        return true;
    },

/**
     * Called after a repair of an invalid drop. By default, highlights this.dragData.ddel
     */
    afterRepair : function(){
        if(Ext.enableFx){
            Ext.Element.fly(this.dragData.ddel).highlight(this.hlColor || "c3daf9");
        }
        this.dragging = false;
    },

/**
     * Called before a repair of an invalid drop to get the XY to animate to. By default returns
     * the XY of this.dragData.ddel
     * @param {EventObject} e The mouse up event
     * @return {Array} The xy location (e.g. [100, 200])
     */
    getRepairXY : function(e){
        return Ext.Element.fly(this.dragData.ddel).getXY();
    }
});


The source code

/*!
 * licensing@extjs.com
 * http://www.extjs.com/license
 */

/**
 * @class Ext.dd.DropTarget
 * @extends Ext.dd.DDTarget
 * A simple class that provides the basic implementation needed to make any element a drop target that can have
 * draggable items dropped onto it.  The drop has no effect until an implementation of notifyDrop is provided.
 * @constructor
 * @param {Mixed} el The container element
 * @param {Object} config
 */
Ext.dd.DropTarget = function(el, config){
    this.el = Ext.get(el);

    Ext.apply(this, config);

    if(this.containerScroll){
        Ext.dd.ScrollManager.register(this.el);
    }

    Ext.dd.DropTarget.superclass.constructor.call(this, this.el.dom, this.ddGroup || this.group,
          {isTarget: true});

};

Ext.extend(Ext.dd.DropTarget, Ext.dd.DDTarget, {

/**
     * @cfg {String} ddGroup
     * A named drag drop group to which this object belongs.  If a group is specified, then this object will only
     * interact with other drag drop objects in the same group (defaults to undefined).
     */

/**
     * @cfg {String} overClass
     * The CSS class applied to the drop target element while the drag source is over it (defaults to "").
     */

/**
     * @cfg {String} dropAllowed
     * The CSS class returned to the drag source when drop is allowed (defaults to "x-dd-drop-ok").
     */
    dropAllowed : "x-dd-drop-ok",

/**
     * @cfg {String} dropNotAllowed
     * The CSS class returned to the drag source when drop is not allowed (defaults to "x-dd-drop-nodrop").
     */
    dropNotAllowed : "x-dd-drop-nodrop",

    // private
    isTarget : true,

    // private
    isNotifyTarget : true,

/**
     * The function a {@link Ext.dd.DragSource} calls once to notify this drop target that the source is now over the
     * target.  This default implementation adds the CSS class specified by overClass (if any) to the drop element
     * and returns the dropAllowed config value.  This method should be overridden if drop validation is required.
     * @param {Ext.dd.DragSource} source The drag source that was dragged over this drop target
     * @param {Event} e The event
     * @param {Object} data An object containing arbitrary data supplied by the drag source
     * @return {String} status The CSS class that communicates the drop status back to the source so that the
     * underlying {@link Ext.dd.StatusProxy} can be updated
     */
    notifyEnter : function(dd, e, data){
        if(this.overClass){
            this.el.addClass(this.overClass);
        }
        return this.dropAllowed;
    },

/**
     * The function a {@link Ext.dd.DragSource} calls continuously while it is being dragged over the target.
     * This method will be called on every mouse movement while the drag source is over the drop target.
     * This default implementation simply returns the dropAllowed config value.
     * @param {Ext.dd.DragSource} source The drag source that was dragged over this drop target
     * @param {Event} e The event
     * @param {Object} data An object containing arbitrary data supplied by the drag source
     * @return {String} status The CSS class that communicates the drop status back to the source so that the
     * underlying {@link Ext.dd.StatusProxy} can be updated
     */
    notifyOver : function(dd, e, data){
        return this.dropAllowed;
    },

/**
     * The function a {@link Ext.dd.DragSource} calls once to notify this drop target that the source has been dragged
     * out of the target without dropping.  This default implementation simply removes the CSS class specified by
     * overClass (if any) from the drop element.
     * @param {Ext.dd.DragSource} source The drag source that was dragged over this drop target
     * @param {Event} e The event
     * @param {Object} data An object containing arbitrary data supplied by the drag source
     */
    notifyOut : function(dd, e, data){
        if(this.overClass){
            this.el.removeClass(this.overClass);
        }
    },

/**
     * The function a {@link Ext.dd.DragSource} calls once to notify this drop target that the dragged item has
     * been dropped on it.  This method has no default implementation and returns false, so you must provide an
     * implementation that does something to process the drop event and returns true so that the drag source's
     * repair action does not run.
     * @param {Ext.dd.DragSource} source The drag source that was dragged over this drop target
     * @param {Event} e The event
     * @param {Object} data An object containing arbitrary data supplied by the drag source
     * @return {Boolean} True if the drop was valid, else false
     */
    notifyDrop : function(dd, e, data){
        return false;
    }
});


The source code

/*!
 * licensing@extjs.com
 * http://www.extjs.com/license
 */

/**
 * @class Ext.dd.DropZone
 * @extends Ext.dd.DropTarget
 *
This class provides a container DD instance that allows dropping on multiple child target nodes.

 *
By default, this class requires that child nodes accepting drop are registered with {@link Ext.dd.Registry}.
 * However a simpler way to allow a DropZone to manage any number of target elements is to configure the
 * DropZone with an implementation of {@link #getTargetFromEvent} which interrogates the passed
 * mouse event to see if it has taken place within an element, or class of elements. This is easily done
 * by using the event's {@link Ext.EventObject#getTarget getTarget} method to identify a node based on a
 * {@link Ext.DomQuery} selector.

 *
Once the DropZone has detected through calling getTargetFromEvent, that the mouse is over
 * a drop target, that target is passed as the first parameter to {@link #onNodeEnter}, {@link #onNodeOver},
 * {@link #onNodeOut}, {@link #onNodeDrop}. You may configure the instance of DropZone with implementations
 * of these methods to provide application-specific behaviour for these events to update both
 * application state, and UI state.

 *
For example to make a GridPanel a cooperating target with the example illustrated in
 * {@link Ext.dd.DragZone DragZone}, the following technique might be used:

myGridPanel.on('render', function() {
    myGridPanel.dropZone = new Ext.dd.DropZone(myGridPanel.getView().scroller, {

//      If the mouse is over a grid row, return that node. This is
//      provided as the "target" parameter in all "onNodeXXXX" node event handling functions
        getTargetFromEvent: function(e) {
            return e.getTarget(myGridPanel.getView().rowSelector);
        },

//      On entry into a target node, highlight that node.
        onNodeEnter : function(target, dd, e, data){
            Ext.fly(target).addClass('my-row-highlight-class');
        },

//      On exit from a target node, unhighlight that node.
        onNodeOut : function(target, dd, e, data){
            Ext.fly(target).removeClass('my-row-highlight-class');
        },

//      While over a target node, return the default drop allowed class which
//      places a "tick" icon into the drag proxy.
        onNodeOver : function(target, dd, e, data){
            return Ext.dd.DropZone.prototype.dropAllowed;
        },

//      On node drop we can interrogate the target to find the underlying
//      application object that is the real target of the dragged data.
//      In this case, it is a Record in the GridPanel's Store.
//      We can use the data set up by the DragZone's getDragData method to read
//      any data we decided to attach in the DragZone's getDragData method.
        onNodeDrop : function(target, dd, e, data){
            var rowIndex = myGridPanel.getView().findRowIndex(target);
            var r = myGridPanel.getStore().getAt(rowIndex);
            Ext.Msg.alert('Drop gesture', 'Dropped Record id ' + data.draggedRecord.id +
                ' on Record id ' + r.id);
            return true;
        }
    });
}

 * See the {@link Ext.dd.DragZone DragZone} documentation for details about building a DragZone which
 * cooperates with this DropZone.
 * @constructor
 * @param {Mixed} el The container element
 * @param {Object} config
 */
Ext.dd.DropZone = function(el, config){
    Ext.dd.DropZone.superclass.constructor.call(this, el, config);
};

Ext.extend(Ext.dd.DropZone, Ext.dd.DropTarget, {

/**
     * Returns a custom data object associated with the DOM node that is the target of the event.  By default
     * this looks up the event target in the {@link Ext.dd.Registry}, although you can override this method to
     * provide your own custom lookup.
     * @param {Event} e The event
     * @return {Object} data The custom data
     */
    getTargetFromEvent : function(e){
        return Ext.dd.Registry.getTargetFromEvent(e);
    },

/**
     * Called when the DropZone determines that a {@link Ext.dd.DragSource} has entered a drop node
     * that has either been registered or detected by a configured implementation of {@link #getTargetFromEvent}.
     * This method has no default implementation and should be overridden to provide
     * node-specific processing if necessary.
     * @param {Object} nodeData The custom data associated with the drop node (this is the same value returned from
     * {@link #getTargetFromEvent} for this node)
     * @param {Ext.dd.DragSource} source The drag source that was dragged over this drop zone
     * @param {Event} e The event
     * @param {Object} data An object containing arbitrary data supplied by the drag source
     */
    onNodeEnter : function(n, dd, e, data){

    },

/**
     * Called while the DropZone determines that a {@link Ext.dd.DragSource} is over a drop node
     * that has either been registered or detected by a configured implementation of {@link #getTargetFromEvent}.
     * The default implementation returns this.dropNotAllowed, so it should be
     * overridden to provide the proper feedback.
     * @param {Object} nodeData The custom data associated with the drop node (this is the same value returned from
     * {@link #getTargetFromEvent} for this node)
     * @param {Ext.dd.DragSource} source The drag source that was dragged over this drop zone
     * @param {Event} e The event
     * @param {Object} data An object containing arbitrary data supplied by the drag source
     * @return {String} status The CSS class that communicates the drop status back to the source so that the
     * underlying {@link Ext.dd.StatusProxy} can be updated
     */
    onNodeOver : function(n, dd, e, data){
        return this.dropAllowed;
    },

/**
     * Called when the DropZone determines that a {@link Ext.dd.DragSource} has been dragged out of
     * the drop node without dropping.  This method has no default implementation and should be overridden to provide
     * node-specific processing if necessary.
     * @param {Object} nodeData The custom data associated with the drop node (this is the same value returned from
     * {@link #getTargetFromEvent} for this node)
     * @param {Ext.dd.DragSource} source The drag source that was dragged over this drop zone
     * @param {Event} e The event
     * @param {Object} data An object containing arbitrary data supplied by the drag source
     */
    onNodeOut : function(n, dd, e, data){

    },

/**
     * Called when the DropZone determines that a {@link Ext.dd.DragSource} has been dropped onto
     * the drop node.  The default implementation returns false, so it should be overridden to provide the
     * appropriate processing of the drop event and return true so that the drag source's repair action does not run.
     * @param {Object} nodeData The custom data associated with the drop node (this is the same value returned from
     * {@link #getTargetFromEvent} for this node)
     * @param {Ext.dd.DragSource} source The drag source that was dragged over this drop zone
     * @param {Event} e The event
     * @param {Object} data An object containing arbitrary data supplied by the drag source
     * @return {Boolean} True if the drop was valid, else false
     */
    onNodeDrop : function(n, dd, e, data){
        return false;
    },

/**
     * Called while the DropZone determines that a {@link Ext.dd.DragSource} is being dragged over it,
     * but not over any of its registered drop nodes.  The default implementation returns this.dropNotAllowed, so
     * it should be overridden to provide the proper feedback if necessary.
     * @param {Ext.dd.DragSource} source The drag source that was dragged over this drop zone
     * @param {Event} e The event
     * @param {Object} data An object containing arbitrary data supplied by the drag source
     * @return {String} status The CSS class that communicates the drop status back to the source so that the
     * underlying {@link Ext.dd.StatusProxy} can be updated
     */
    onContainerOver : function(dd, e, data){
        return this.dropNotAllowed;
    },

/**
     * Called when the DropZone determines that a {@link Ext.dd.DragSource} has been dropped on it,
     * but not on any of its registered drop nodes.  The default implementation returns false, so it should be
     * overridden to provide the appropriate processing of the drop event if you need the drop zone itself to
     * be able to accept drops.  It should return true when valid so that the drag source's repair action does not run.
     * @param {Ext.dd.DragSource} source The drag source that was dragged over this drop zone
     * @param {Event} e The event
     * @param {Object} data An object containing arbitrary data supplied by the drag source
     * @return {Boolean} True if the drop was valid, else false
     */
    onContainerDrop : function(dd, e, data){
        return false;
    },

/**
     * The function a {@link Ext.dd.DragSource} calls once to notify this drop zone that the source is now over
     * the zone.  The default implementation returns this.dropNotAllowed and expects that only registered drop
     * nodes can process drag drop operations, so if you need the drop zone itself to be able to process drops
     * you should override this method and provide a custom implementation.
     * @param {Ext.dd.DragSource} source The drag source that was dragged over this drop zone
     * @param {Event} e The event
     * @param {Object} data An object containing arbitrary data supplied by the drag source
     * @return {String} status The CSS class that communicates the drop status back to the source so that the
     * underlying {@link Ext.dd.StatusProxy} can be updated
     */
    notifyEnter : function(dd, e, data){
        return this.dropNotAllowed;
    },

/**
     * The function a {@link Ext.dd.DragSource} calls continuously while it is being dragged over the drop zone.
     * This method will be called on every mouse movement while the drag source is over the drop zone.
     * It will call {@link #onNodeOver} while the drag source is over a registered node, and will also automatically
     * delegate to the appropriate node-specific methods as necessary when the drag source enters and exits
     * registered nodes ({@link #onNodeEnter}, {@link #onNodeOut}). If the drag source is not currently over a
     * registered node, it will call {@link #onContainerOver}.
     * @param {Ext.dd.DragSource} source The drag source that was dragged over this drop zone
     * @param {Event} e The event
     * @param {Object} data An object containing arbitrary data supplied by the drag source
     * @return {String} status The CSS class that communicates the drop status back to the source so that the
     * underlying {@link Ext.dd.StatusProxy} can be updated
     */
    notifyOver : function(dd, e, data){
        var n = this.getTargetFromEvent(e);
        if(!n){ // not over valid drop target
            if(this.lastOverNode){
                this.onNodeOut(this.lastOverNode, dd, e, data);
                this.lastOverNode = null;
            }
            return this.onContainerOver(dd, e, data);
        }
        if(this.lastOverNode != n){
            if(this.lastOverNode){
                this.onNodeOut(this.lastOverNode, dd, e, data);
            }
            this.onNodeEnter(n, dd, e, data);
            this.lastOverNode = n;
        }
        return this.onNodeOver(n, dd, e, data);
    },

/**
     * The function a {@link Ext.dd.DragSource} calls once to notify this drop zone that the source has been dragged
     * out of the zone without dropping.  If the drag source is currently over a registered node, the notification
     * will be delegated to {@link #onNodeOut} for node-specific handling, otherwise it will be ignored.
     * @param {Ext.dd.DragSource} source The drag source that was dragged over this drop target
     * @param {Event} e The event
     * @param {Object} data An object containing arbitrary data supplied by the drag zone
     */
    notifyOut : function(dd, e, data){
        if(this.lastOverNode){
            this.onNodeOut(this.lastOverNode, dd, e, data);
            this.lastOverNode = null;
        }
    },

/**
     * The function a {@link Ext.dd.DragSource} calls once to notify this drop zone that the dragged item has
     * been dropped on it.  The drag zone will look up the target node based on the event passed in, and if there
     * is a node registered for that event, it will delegate to {@link #onNodeDrop} for node-specific handling,
     * otherwise it will call {@link #onContainerDrop}.
     * @param {Ext.dd.DragSource} source The drag source that was dragged over this drop zone
     * @param {Event} e The event
     * @param {Object} data An object containing arbitrary data supplied by the drag source
     * @return {Boolean} True if the drop was valid, else false
     */
    notifyDrop : function(dd, e, data){
        if(this.lastOverNode){
            this.onNodeOut(this.lastOverNode, dd, e, data);
            this.lastOverNode = null;
        }
        var n = this.getTargetFromEvent(e);
        return n ?
            this.onNodeDrop(n, dd, e, data) :
            this.onContainerDrop(dd, e, data);
    },

    // private
    triggerCacheRefresh : function(){
        Ext.dd.DDM.refreshCache(this.groups);
    }
});


The source code

/*!
 * licensing@extjs.com
 * http://www.extjs.com/license
 */

/**
 * @class Ext.Editor
 * @extends Ext.Component
 * A base editor field that handles displaying/hiding on demand and has some built-in sizing and event handling logic.
 * @constructor
 * Create a new Editor
 * @param {Object} config The config object
 * @xtype editor
 */
Ext.Editor = function(field, config){
    if(field.field){
        this.field = Ext.create(field.field, 'textfield');
        config = Ext.apply({}, field); // copy so we don't disturb original config
        delete config.field;
    }else{
        this.field = field;
    }
    Ext.Editor.superclass.constructor.call(this, config);
};

Ext.extend(Ext.Editor, Ext.Component, {

/**
    * @cfg {Ext.form.Field} field
    * The Field object (or descendant) or config object for field
    */

/**
     * @cfg {Boolean} allowBlur
     * True to {@link #completeEdit complete the editing process} if in edit mode when the
     * field is blurred. Defaults to true.
     */
    allowBlur: true,

/**
     * @cfg {Boolean/String} autoSize
     * True for the editor to automatically adopt the size of the underlying field, "width" to adopt the width only,
     * or "height" to adopt the height only, "none" to always use the field dimensions. (defaults to false)
     */

/**
     * @cfg {Boolean} revertInvalid
     * True to automatically revert the field value and cancel the edit when the user completes an edit and the field
     * validation fails (defaults to true)
     */

/**
     * @cfg {Boolean} ignoreNoChange
     * True to skip the edit completion process (no save, no events fired) if the user completes an edit and
     * the value has not changed (defaults to false).  Applies only to string values - edits for other data types
     * will never be ignored.
     */

/**
     * @cfg {Boolean} hideEl
     * False to keep the bound element visible while the editor is displayed (defaults to true)
     */

/**
     * @cfg {Mixed} value
     * The data value of the underlying field (defaults to "")
     */
    value : "",

/**
     * @cfg {String} alignment
     * The position to align to (see {@link Ext.Element#alignTo} for more details, defaults to "c-c?").
     */
    alignment: "c-c?",

/**
     * @cfg {Array} offsets
     * The offsets to use when aligning (see {@link Ext.Element#alignTo} for more details. Defaults to [0, 0].
     */
    offsets: [0, 0],

/**
     * @cfg {Boolean/String} shadow "sides" for sides/bottom only, "frame" for 4-way shadow, and "drop"
     * for bottom-right shadow (defaults to "frame")
     */
    shadow : "frame",

/**
     * @cfg {Boolean} constrain True to constrain the editor to the viewport
     */
    constrain : false,

/**
     * @cfg {Boolean} swallowKeys Handle the keydown/keypress events so they don't propagate (defaults to true)
     */
    swallowKeys : true,

/**
     * @cfg {Boolean} completeOnEnter True to complete the edit when the enter key is pressed. Defaults to true.
     */
    completeOnEnter : true,

/**
     * @cfg {Boolean} cancelOnEsc True to cancel the edit when the escape key is pressed. Defaults to true.
     */
    cancelOnEsc : true,

/**
     * @cfg {Boolean} updateEl True to update the innerHTML of the bound element when the update completes (defaults to false)
     */
    updateEl : false,

    initComponent : function(){
        Ext.Editor.superclass.initComponent.call(this);
        this.addEvents(

/**
             * @event beforestartedit
             * Fires when editing is initiated, but before the value changes.  Editing can be canceled by returning
             * false from the handler of this event.
             * @param {Editor} this
             * @param {Ext.Element} boundEl The underlying element bound to this editor
             * @param {Mixed} value The field value being set
             */
            "beforestartedit",

/**
             * @event startedit
             * Fires when this editor is displayed
             * @param {Ext.Element} boundEl The underlying element bound to this editor
             * @param {Mixed} value The starting field value
             */
            "startedit",

/**
             * @event beforecomplete
             * Fires after a change has been made to the field, but before the change is reflected in the underlying
             * field.  Saving the change to the field can be canceled by returning false from the handler of this event.
             * Note that if the value has not changed and ignoreNoChange = true, the editing will still end but this
             * event will not fire since no edit actually occurred.
             * @param {Editor} this
             * @param {Mixed} value The current field value
             * @param {Mixed} startValue The original field value
             */
            "beforecomplete",

/**
             * @event complete
             * Fires after editing is complete and any changed value has been written to the underlying field.
             * @param {Editor} this
             * @param {Mixed} value The current field value
             * @param {Mixed} startValue The original field value
             */
            "complete",

/**
             * @event canceledit
             * Fires after editing has been canceled and the editor's value has been reset.
             * @param {Editor} this
             * @param {Mixed} value The user-entered field value that was discarded
             * @param {Mixed} startValue The original field value that was set back into the editor after cancel
             */
            "canceledit",

/**
             * @event specialkey
             * Fires when any key related to navigation (arrows, tab, enter, esc, etc.) is pressed.  You can check
             * {@link Ext.EventObject#getKey} to determine which key was pressed.
             * @param {Ext.form.Field} this
             * @param {Ext.EventObject} e The event object
             */
            "specialkey"
        );
    },

    // private
    onRender : function(ct, position){
        this.el = new Ext.Layer({
            shadow: this.shadow,
            cls: "x-editor",
            parentEl : ct,
            shim : this.shim,
            shadowOffset: this.shadowOffset || 4,
            id: this.id,
            constrain: this.constrain
        });
        if(this.zIndex){
            this.el.setZIndex(this.zIndex);
        }
        this.el.setStyle("overflow", Ext.isGecko ? "auto" : "hidden");
        if(this.field.msgTarget != 'title'){
            this.field.msgTarget = 'qtip';
        }
        this.field.inEditor = true;
        this.mon(this.field, {
            scope: this,
            blur: this.onBlur,
            specialkey: this.onSpecialKey
        });
        if(this.field.grow){
            this.mon(this.field, "autosize", this.el.sync,  this.el, {delay:1});
        }
        this.field.render(this.el).show();
        this.field.getEl().dom.name = '';
        if(this.swallowKeys){
            this.field.el.swallowEvent([
                'keypress', // *** Opera
                'keydown'   // *** all other browsers
            ]);
        }
    },

    // private
    onSpecialKey : function(field, e){
        var key = e.getKey(),
            complete = this.completeOnEnter && key == e.ENTER,
            cancel = this.cancelOnEsc && key == e.ESC;
        if(complete || cancel){
            e.stopEvent();
            if(complete){
                this.completeEdit();
            }else{
                this.cancelEdit();
            }
            if(field.triggerBlur){
                field.triggerBlur();
            }
        }
        this.fireEvent('specialkey', field, e);
    },

/**
     * Starts the editing process and shows the editor.
     * @param {Mixed} el The element to edit
     * @param {String} value (optional) A value to initialize the editor with. If a value is not provided, it defaults
      * to the innerHTML of el.
     */
    startEdit : function(el, value){
        if(this.editing){
            this.completeEdit();
        }
        this.boundEl = Ext.get(el);
        var v = value !== undefined ? value : this.boundEl.dom.innerHTML;
        if(!this.rendered){
            this.render(this.parentEl || document.body);
        }
        if(this.fireEvent("beforestartedit", this, this.boundEl, v) !== false){
            this.startValue = v;
            this.field.reset();
            this.field.setValue(v);
            this.realign(true);
            this.editing = true;
            this.show();
        }
    },

    // private
    doAutoSize : function(){
        if(this.autoSize){
            var sz = this.boundEl.getSize(),
                fs = this.field.getSize();

            switch(this.autoSize){
                case "width":
                    this.setSize(sz.width, fs.height);
                    break;
                case "height":
                    this.setSize(fs.width, sz.height);
                    break;
                case "none":
                    this.setSize(fs.width, fs.height);
                    break;
                default:
                    this.setSize(sz.width, sz.height);
            }
        }
    },

/**
     * Sets the height and width of this editor.
     * @param {Number} width The new width
     * @param {Number} height The new height
     */
    setSize : function(w, h){
        delete this.field.lastSize;
        this.field.setSize(w, h);
        if(this.el){
            if(Ext.isGecko2 || Ext.isOpera){
                // prevent layer scrollbars
                this.el.setSize(w, h);
            }
            this.el.sync();
        }
    },

/**
     * Realigns the editor to the bound field based on the current alignment config value.
     * @param {Boolean} autoSize (optional) True to size the field to the dimensions of the bound element.
     */
    realign : function(autoSize){
        if(autoSize === true){
            this.doAutoSize();
        }
        this.el.alignTo(this.boundEl, this.alignment, this.offsets);
    },

/**
     * Ends the editing process, persists the changed value to the underlying field, and hides the editor.
     * @param {Boolean} remainVisible Override the default behavior and keep the editor visible after edit (defaults to false)
     */
    completeEdit : function(remainVisible){
        if(!this.editing){
            return;
        }
        // Assert combo values first
        if (this.field.assertValue) {
            this.field.assertValue();
        }
        var v = this.getValue();
        if(!this.field.isValid()){
            if(this.revertInvalid !== false){
                this.cancelEdit(remainVisible);
            }
            return;
        }
        if(String(v) === String(this.startValue) && this.ignoreNoChange){
            this.hideEdit(remainVisible);
            return;
        }
        if(this.fireEvent("beforecomplete", this, v, this.startValue) !== false){
            v = this.getValue();
            if(this.updateEl && this.boundEl){
                this.boundEl.update(v);
            }
            this.hideEdit(remainVisible);
            this.fireEvent("complete", this, v, this.startValue);
        }
    },

    // private
    onShow : function(){
        this.el.show();
        if(this.hideEl !== false){
            this.boundEl.hide();
        }
        this.field.show().focus(false, true);
        this.fireEvent("startedit", this.boundEl, this.startValue);
    },

/**
     * Cancels the editing process and hides the editor without persisting any changes.  The field value will be
     * reverted to the original starting value.
     * @param {Boolean} remainVisible Override the default behavior and keep the editor visible after
     * cancel (defaults to false)
     */
    cancelEdit : function(remainVisible){
        if(this.editing){
            var v = this.getValue();
            this.setValue(this.startValue);
            this.hideEdit(remainVisible);
            this.fireEvent("canceledit", this, v, this.startValue);
        }
    },

    // private
    hideEdit: function(remainVisible){
        if(remainVisible !== true){
            this.editing = false;
            this.hide();
        }
    },

    // private
    onBlur : function(){
        // selectSameEditor flag allows the same editor to be started without onBlur firing on itself
        if(this.allowBlur === true && this.editing && this.selectSameEditor !== true){
            this.completeEdit();
        }
    },

    // private
    onHide : function(){
        if(this.editing){
            this.completeEdit();
            return;
        }
        this.field.blur();
        if(this.field.collapse){
            this.field.collapse();
        }
        this.el.hide();
        if(this.hideEl !== false){
            this.boundEl.show();
        }
    },

/**
     * Sets the data value of the editor
     * @param {Mixed} value Any valid value supported by the underlying field
     */
    setValue : function(v){
        this.field.setValue(v);
    },

/**
     * Gets the data value of the editor
     * @return {Mixed} The data value
     */
    getValue : function(){
        return this.field.getValue();
    },

    beforeDestroy : function(){
        Ext.destroyMembers(this, 'field');

        delete this.parentEl;
        delete this.boundEl;
    }
});
Ext.reg('editor', Ext.Editor);


The source code

/*!
 * licensing@extjs.com
 * http://www.extjs.com/license
 */

/**
 * @class Ext.grid.EditorGridPanel
 * @extends Ext.grid.GridPanel
 *
This class extends the {@link Ext.grid.GridPanel GridPanel Class} to provide cell editing
 * on selected {@link Ext.grid.Column columns}. The editable columns are specified by providing
 * an {@link Ext.grid.ColumnModel#editor editor} in the {@link Ext.grid.Column column configuration}.

 *
Editability of columns may be controlled programatically by inserting an implementation
 * of {@link Ext.grid.ColumnModel#isCellEditable isCellEditable} into the
 * {@link Ext.grid.ColumnModel ColumnModel}.

 *
Editing is performed on the value of the field specified by the column's
 * {@link Ext.grid.ColumnModel#dataIndex dataIndex} in the backing {@link Ext.data.Store Store}
 * (so if you are using a {@link Ext.grid.ColumnModel#setRenderer renderer} in order to display
 * transformed data, this must be accounted for).

 *
If a value-to-description mapping is used to render a column, then a {@link Ext.form.Field#ComboBox ComboBox}
 * which uses the same {@link Ext.form.Field#valueField value}-to-{@link Ext.form.Field#displayFieldField description}
 * mapping would be an appropriate editor.

 * If there is a more complex mismatch between the visible data in the grid, and the editable data in
 * the {@link Edt.data.Store Store}, then code to transform the data both before and after editing can be
 * injected using the {@link #beforeedit} and {@link #afteredit} events.
 * @constructor
 * @param {Object} config The config object
 * @xtype editorgrid
 */
Ext.grid.EditorGridPanel = Ext.extend(Ext.grid.GridPanel, {

/**
     * @cfg {Number} clicksToEdit
     *
The number of clicks on a cell required to display the cell's editor (defaults to 2).

     *
Setting this option to 'auto' means that mousedown on the selected cell starts
     * editing that cell.

     */
    clicksToEdit: 2,

/**
    * @cfg {Boolean} forceValidation
    * True to force validation even if the value is unmodified (defaults to false)
    */
    forceValidation: false,

    // private
    isEditor : true,
    // private
    detectEdit: false,

/**
     * @cfg {Boolean} autoEncode
     * True to automatically HTML encode and decode values pre and post edit (defaults to false)
     */
    autoEncode : false,

/**
     * @cfg {Boolean} trackMouseOver @hide
     */
    // private
    trackMouseOver: false, // causes very odd FF errors

    // private
    initComponent : function(){
        Ext.grid.EditorGridPanel.superclass.initComponent.call(this);

        if(!this.selModel){

/**
             * @cfg {Object} selModel Any subclass of AbstractSelectionModel that will provide the selection model for
             * the grid (defaults to {@link Ext.grid.CellSelectionModel} if not specified).
             */
            this.selModel = new Ext.grid.CellSelectionModel();
        }

        this.activeEditor = null;

        this.addEvents(

/**
             * @event beforeedit
             * Fires before cell editing is triggered. The edit event object has the following properties

             *

             *
  • grid - This grid
    •
             *
  • record - The record being edited
    •
             *
  • field - The field name being edited
    •
             *
  • value - The value for the field being edited.
    •
             *
  • row - The grid row index
    •
             *
  • column - The grid column index
    •
             *
  • cancel - Set this to true to cancel the edit or return false from your handler.
    •
             *

             * @param {Object} e An edit event (see above for description)
             */
            "beforeedit",

/**
             * @event afteredit
             * Fires after a cell is edited. The edit event object has the following properties

             *

             *
  • grid - This grid
    •
             *
  • record - The record being edited
    •
             *
  • field - The field name being edited
    •
             *
  • value - The value being set
    •
             *
  • originalValue - The original value for the field, before the edit.
    •
             *
  • row - The grid row index
    •
             *
  • column - The grid column index
    •
             *

             *
             *

grid.on('afteredit', afterEdit, this );

function afterEdit(e) {
    // execute an XHR to send/commit data to the server, in callback do (if successful):
    e.record.commit();
};
             *

             * @param {Object} e An edit event (see above for description)
             */
            "afteredit",

/**
             * @event validateedit
             * Fires after a cell is edited, but before the value is set in the record. Return false
             * to cancel the change. The edit event object has the following properties

             *

             *
  • grid - This grid
    •
             *
  • record - The record being edited
    •
             *
  • field - The field name being edited
    •
             *
  • value - The value being set
    •
             *
  • originalValue - The original value for the field, before the edit.
    •
             *
  • row - The grid row index
    •
             *
  • column - The grid column index
    •
             *
  • cancel - Set this to true to cancel the edit or return false from your handler.
    •
             *

             * Usage example showing how to remove the red triangle (dirty record indicator) from some
             * records (not all).  By observing the grid's validateedit event, it can be cancelled if
             * the edit occurs on a targeted row (for example) and then setting the field's new value
             * in the Record directly:
             *

grid.on('validateedit', function(e) {
  var myTargetRow = 6;

  if (e.row == myTargetRow) {
    e.cancel = true;
    e.record.data[e.field] = e.value;
  }
});
             *

             * @param {Object} e An edit event (see above for description)
             */
            "validateedit"
        );
    },

    // private
    initEvents : function(){
        Ext.grid.EditorGridPanel.superclass.initEvents.call(this);

        this.getGridEl().on('mousewheel', this.stopEditing.createDelegate(this, [true]), this);
        this.on('columnresize', this.stopEditing, this, [true]);

        if(this.clicksToEdit == 1){
            this.on("cellclick", this.onCellDblClick, this);
        }else {
            var view = this.getView();
            if(this.clicksToEdit == 'auto' && view.mainBody){
                view.mainBody.on('mousedown', this.onAutoEditClick, this);
            }
            this.on('celldblclick', this.onCellDblClick, this);
        }
    },

    onResize : function(){
        Ext.grid.EditorGridPanel.superclass.onResize.apply(this, arguments);
        var ae = this.activeEditor;
        if(this.editing && ae){
            ae.realign(true);
        }
    },

    // private
    onCellDblClick : function(g, row, col){
        this.startEditing(row, col);
    },

    // private
    onAutoEditClick : function(e, t){
        if(e.button !== 0){
            return;
        }
        var row = this.view.findRowIndex(t),
            col = this.view.findCellIndex(t);
        if(row !== false && col !== false){
            this.stopEditing();
            if(this.selModel.getSelectedCell){ // cell sm
                var sc = this.selModel.getSelectedCell();
                if(sc && sc[0] === row && sc[1] === col){
                    this.startEditing(row, col);
                }
            }else{
                if(this.selModel.isSelected(row)){
                    this.startEditing(row, col);
                }
            }
        }
    },

    // private
    onEditComplete : function(ed, value, startValue){
        this.editing = false;
        this.lastActiveEditor = this.activeEditor;
        this.activeEditor = null;

        var r = ed.record,
            field = this.colModel.getDataIndex(ed.col);
        value = this.postEditValue(value, startValue, r, field);
        if(this.forceValidation === true || String(value) !== String(startValue)){
            var e = {
                grid: this,
                record: r,
                field: field,
                originalValue: startValue,
                value: value,
                row: ed.row,
                column: ed.col,
                cancel:false
            };
            if(this.fireEvent("validateedit", e) !== false && !e.cancel && String(value) !== String(startValue)){
                r.set(field, e.value);
                delete e.cancel;
                this.fireEvent("afteredit", e);
            }
        }
        this.view.focusCell(ed.row, ed.col);
    },

/**
     * Starts editing the specified for the specified row/column
     * @param {Number} rowIndex
     * @param {Number} colIndex
     */
    startEditing : function(row, col){
        this.stopEditing();
        if(this.colModel.isCellEditable(col, row)){
            this.view.ensureVisible(row, col, true);
            var r = this.store.getAt(row),
                field = this.colModel.getDataIndex(col),
                e = {
                    grid: this,
                    record: r,
                    field: field,
                    value: r.data[field],
                    row: row,
                    column: col,
                    cancel:false
                };
            if(this.fireEvent("beforeedit", e) !== false && !e.cancel){
                this.editing = true;
                var ed = this.colModel.getCellEditor(col, row);
                if(!ed){
                    return;
                }
                if(!ed.rendered){
                    ed.parentEl = this.view.getEditorParent(ed);
                    ed.on({
                        scope: this,
                        render: {
                            fn: function(c){
                                c.field.focus(false, true);
                            },
                            single: true,
                            scope: this
                        },
                        specialkey: function(field, e){
                            this.getSelectionModel().onEditorKey(field, e);
                        },
                        complete: this.onEditComplete,
                        canceledit: this.stopEditing.createDelegate(this, [true])
                    });
                }
                Ext.apply(ed, {
                    row     : row,
                    col     : col,
                    record  : r
                });
                this.lastEdit = {
                    row: row,
                    col: col
                };
                this.activeEditor = ed;
                // Set the selectSameEditor flag if we are reusing the same editor again and
                // need to prevent the editor from firing onBlur on itself.
                ed.selectSameEditor = (this.activeEditor == this.lastActiveEditor);
                var v = this.preEditValue(r, field);
                ed.startEdit(this.view.getCell(row, col).firstChild, Ext.isDefined(v) ? v : '');

                // Clear the selectSameEditor flag
                (function(){
                    delete ed.selectSameEditor;
                }).defer(50);
            }
        }
    },

    // private
    preEditValue : function(r, field){
        var value = r.data[field];
        return this.autoEncode && Ext.isString(value) ? Ext.util.Format.htmlDecode(value) : value;
    },

    // private
    postEditValue : function(value, originalValue, r, field){
        return this.autoEncode && Ext.isString(value) ? Ext.util.Format.htmlEncode(value) : value;
    },

/**
     * Stops any active editing
     * @param {Boolean} cancel (optional) True to cancel any changes
     */
    stopEditing : function(cancel){
        if(this.editing){
            // Store the lastActiveEditor to check if it is changing
            var ae = this.lastActiveEditor = this.activeEditor;
            if(ae){
                ae[cancel === true ? 'cancelEdit' : 'completeEdit']();
                this.view.focusCell(ae.row, ae.col);
            }
            this.activeEditor = null;
        }
        this.editing = false;
    }
});
Ext.reg('editorgrid', Ext.grid.EditorGridPanel);


The source code

/*!
 * licensing@extjs.com
 * http://www.extjs.com/license
 */
/**
 * @class Ext.Element
 */
Ext.Element.addMethods({

/**
     * Stops the specified event(s) from bubbling and optionally prevents the default action
     * @param {String/Array} eventName an event / array of events to stop from bubbling
     * @param {Boolean} preventDefault (optional) true to prevent the default action too
     * @return {Ext.Element} this
     */
    swallowEvent : function(eventName, preventDefault){
        var me = this;
        function fn(e){
            e.stopPropagation();
            if(preventDefault){
                e.preventDefault();
            }
        }
        if(Ext.isArray(eventName)){
            Ext.each(eventName, function(e) {
                 me.on(e, fn);
            });
            return me;
        }
        me.on(eventName, fn);
        return me;
    },

/**
     * Create an event handler on this element such that when the event fires and is handled by this element,
     * it will be relayed to another object (i.e., fired again as if it originated from that object instead).
     * @param {String} eventName The type of event to relay
     * @param {Object} object Any object that extends {@link Ext.util.Observable} that will provide the context
     * for firing the relayed event
     */
    relayEvent : function(eventName, observable){
        this.on(eventName, function(e){
            observable.fireEvent(eventName, e);
        });
    },

/**
     * Removes worthless text nodes
     * @param {Boolean} forceReclean (optional) By default the element
     * keeps track if it has been cleaned already so
     * you can call this over and over. However, if you update the element and
     * need to force a reclean, you can pass true.
     */
    clean : function(forceReclean){
        var me = this,
            dom = me.dom,
            n = dom.firstChild,
            ni = -1;

        if(Ext.Element.data(dom, 'isCleaned') && forceReclean !== true){
            return me;
        }

        while(n){
            var nx = n.nextSibling;
            if(n.nodeType == 3 && !/\S/.test(n.nodeValue)){
                dom.removeChild(n);
            }else{
                n.nodeIndex = ++ni;
            }
            n = nx;
        }
        Ext.Element.data(dom, 'isCleaned', true);
        return me;
    },

/**
     * Direct access to the Updater {@link Ext.Updater#update} method. The method takes the same object
     * parameter as {@link Ext.Updater#update}
     * @return {Ext.Element} this
     */
    load : function(){
        var um = this.getUpdater();
        um.update.apply(um, arguments);
        return this;
    },

/**
    * Gets this element's {@link Ext.Updater Updater}
    * @return {Ext.Updater} The Updater
    */
    getUpdater : function(){
        return this.updateManager || (this.updateManager = new Ext.Updater(this));
    },

/**
    * Update the innerHTML of this element, optionally searching for and processing scripts
    * @param {String} html The new HTML
    * @param {Boolean} loadScripts (optional) True to look for and process scripts (defaults to false)
    * @param {Function} callback (optional) For async script loading you can be notified when the update completes
    * @return {Ext.Element} this
     */
    update : function(html, loadScripts, callback){
        if (!this.dom) {
            return this;
        }
        html = html || "";

        if(loadScripts !== true){
            this.dom.innerHTML = html;
            if(Ext.isFunction(callback)){
                callback();
            }
            return this;
        }

        var id = Ext.id(),
            dom = this.dom;

        html += '';

        Ext.lib.Event.onAvailable(id, function(){
            var DOC = document,
                hd = DOC.getElementsByTagName("head")[0],
                re = /(?:]*)?>)((\n|\r|.)*?)(?:<\/script>)/ig,
                srcRe = /\ssrc=([\'\"])(.*?)\1/i,
                typeRe = /\stype=([\'\"])(.*?)\1/i,
                match,
                attrs,
                srcMatch,
                typeMatch,
                el,
                s;

            while((match = re.exec(html))){
                attrs = match[1];
                srcMatch = attrs ? attrs.match(srcRe) : false;
                if(srcMatch && srcMatch[2]){
                   s = DOC.createElement("script");
                   s.src = srcMatch[2];
                   typeMatch = attrs.match(typeRe);
                   if(typeMatch && typeMatch[2]){
                       s.type = typeMatch[2];
                   }
                   hd.appendChild(s);
                }else if(match[2] && match[2].length > 0){
                    if(window.execScript) {
                       window.execScript(match[2]);
                    } else {
                       window.eval(match[2]);
                    }
                }
            }
            el = DOC.getElementById(id);
            if(el){Ext.removeNode(el);}
            if(Ext.isFunction(callback)){
                callback();
            }
        });
        dom.innerHTML = html.replace(/(?:)((\n|\r|.)*?)(?:<\/script>)/ig, "");
        return this;
    },

    // inherit docs, overridden so we can add removeAnchor
    removeAllListeners : function(){
        this.removeAnchor();
        Ext.EventManager.removeAll(this.dom);
        return this;
    },

/**
     * Creates a proxy element of this element
     * @param {String/Object} config The class name of the proxy element or a DomHelper config object
     * @param {String/HTMLElement} renderTo (optional) The element or element id to render the proxy to (defaults to document.body)
     * @param {Boolean} matchBox (optional) True to align and size the proxy to this element now (defaults to false)
     * @return {Ext.Element} The new proxy element
     */
    createProxy : function(config, renderTo, matchBox){
        config = Ext.isObject(config) ? config : {tag : "div", cls: config};

        var me = this,
            proxy = renderTo ? Ext.DomHelper.append(renderTo, config, true) :
                               Ext.DomHelper.insertBefore(me.dom, config, true);

        if(matchBox && me.setBox && me.getBox){ // check to make sure Element.position.js is loaded
           proxy.setBox(me.getBox());
        }
        return proxy;
    }
});

Ext.Element.prototype.getUpdateManager = Ext.Element.prototype.getUpdater;


The source code

/*!
 * licensing@extjs.com
 * http://www.extjs.com/license
 */
/**
 * @class Ext.Element
 */
Ext.Element.addMethods({

/**
     * Gets the x,y coordinates specified by the anchor position on the element.
     * @param {String} anchor (optional) The specified anchor position (defaults to "c").  See {@link #alignTo}
     * for details on supported anchor positions.
     * @param {Boolean} local (optional) True to get the local (element top/left-relative) anchor position instead
     * of page coordinates
     * @param {Object} size (optional) An object containing the size to use for calculating anchor position
     * {width: (target width), height: (target height)} (defaults to the element's current size)
     * @return {Array} [x, y] An array containing the element's x and y coordinates
     */
    getAnchorXY : function(anchor, local, s){
        //Passing a different size is useful for pre-calculating anchors,
        //especially for anchored animations that change the el size.
        anchor = (anchor || "tl").toLowerCase();
        s = s || {};

        var me = this,
            vp = me.dom == document.body || me.dom == document,
            w = s.width || vp ? Ext.lib.Dom.getViewWidth() : me.getWidth(),
            h = s.height || vp ? Ext.lib.Dom.getViewHeight() : me.getHeight(),
            xy,
            r = Math.round,
            o = me.getXY(),
            scroll = me.getScroll(),
            extraX = vp ? scroll.left : !local ? o[0] : 0,
            extraY = vp ? scroll.top : !local ? o[1] : 0,
            hash = {
                c  : [r(w * 0.5), r(h * 0.5)],
                t  : [r(w * 0.5), 0],
                l  : [0, r(h * 0.5)],
                r  : [w, r(h * 0.5)],
                b  : [r(w * 0.5), h],
                tl : [0, 0],
                bl : [0, h],
                br : [w, h],
                tr : [w, 0]
            };

        xy = hash[anchor];
        return [xy[0] + extraX, xy[1] + extraY];
    },

/**
     * Anchors an element to another element and realigns it when the window is resized.
     * @param {Mixed} element The element to align to.
     * @param {String} position The position to align to.
     * @param {Array} offsets (optional) Offset the positioning by [x, y]
     * @param {Boolean/Object} animate (optional) True for the default animation or a standard Element animation config object
     * @param {Boolean/Number} monitorScroll (optional) True to monitor body scroll and reposition. If this parameter
     * is a number, it is used as the buffer delay (defaults to 50ms).
     * @param {Function} callback The function to call after the animation finishes
     * @return {Ext.Element} this
     */
    anchorTo : function(el, alignment, offsets, animate, monitorScroll, callback){
        var me = this,
            dom = me.dom,
            scroll = !Ext.isEmpty(monitorScroll),
            action = function(){
                Ext.fly(dom).alignTo(el, alignment, offsets, animate);
                Ext.callback(callback, Ext.fly(dom));
            },
            anchor = this.getAnchor();

        // previous listener anchor, remove it
        this.removeAnchor();
        Ext.apply(anchor, {
            fn: action,
            scroll: scroll
        });

        Ext.EventManager.onWindowResize(action, null);

        if(scroll){
            Ext.EventManager.on(window, 'scroll', action, null,
                {buffer: !isNaN(monitorScroll) ? monitorScroll : 50});
        }
        action.call(me); // align immediately
        return me;
    },

/**
     * Remove any anchor to this element. See {@link #anchorTo}.
     * @return {Ext.Element} this
     */
    removeAnchor : function(){
        var me = this,
            anchor = this.getAnchor();

        if(anchor && anchor.fn){
            Ext.EventManager.removeResizeListener(anchor.fn);
            if(anchor.scroll){
                Ext.EventManager.un(window, 'scroll', anchor.fn);
            }
            delete anchor.fn;
        }
        return me;
    },

    // private
    getAnchor : function(){
        var data = Ext.Element.data,
            dom = this.dom;
            if (!dom) {
                return;
            }
            var anchor = data(dom, '_anchor');

        if(!anchor){
            anchor = data(dom, '_anchor', {});
        }
        return anchor;
    },

/**
     * Gets the x,y coordinates to align this element with another element. See {@link #alignTo} for more info on the
     * supported position values.
     * @param {Mixed} element The element to align to.
     * @param {String} position (optional, defaults to "tl-bl?") The position to align to.
     * @param {Array} offsets (optional) Offset the positioning by [x, y]
     * @return {Array} [x, y]
     */
    getAlignToXY : function(el, p, o){
        el = Ext.get(el);

        if(!el || !el.dom){
            throw "Element.alignToXY with an element that doesn't exist";
        }

        o = o || [0,0];
        p = (!p || p == "?" ? "tl-bl?" : (!/-/.test(p) && p !== "" ? "tl-" + p : p || "tl-bl")).toLowerCase();

        var me = this,
            d = me.dom,
            a1,
            a2,
            x,
            y,
            //constrain the aligned el to viewport if necessary
            w,
            h,
            r,
            dw = Ext.lib.Dom.getViewWidth() -10, // 10px of margin for ie
            dh = Ext.lib.Dom.getViewHeight()-10, // 10px of margin for ie
            p1y,
            p1x,
            p2y,
            p2x,
            swapY,
            swapX,
            doc = document,
            docElement = doc.documentElement,
            docBody = doc.body,
            scrollX = (docElement.scrollLeft || docBody.scrollLeft || 0)+5,
            scrollY = (docElement.scrollTop || docBody.scrollTop || 0)+5,
            c = false, //constrain to viewport
            p1 = "",
            p2 = "",
            m = p.match(/^([a-z]+)-([a-z]+)(\?)?$/);

        if(!m){
           throw "Element.alignTo with an invalid alignment " + p;
        }

        p1 = m[1];
        p2 = m[2];
        c = !!m[3];

        //Subtract the aligned el's internal xy from the target's offset xy
        //plus custom offset to get the aligned el's new offset xy
        a1 = me.getAnchorXY(p1, true);
        a2 = el.getAnchorXY(p2, false);

        x = a2[0] - a1[0] + o[0];
        y = a2[1] - a1[1] + o[1];

        if(c){
           w = me.getWidth();
           h = me.getHeight();
           r = el.getRegion();
           //If we are at a viewport boundary and the aligned el is anchored on a target border that is
           //perpendicular to the vp border, allow the aligned el to slide on that border,
           //otherwise swap the aligned el to the opposite border of the target.
           p1y = p1.charAt(0);
           p1x = p1.charAt(p1.length-1);
           p2y = p2.charAt(0);
           p2x = p2.charAt(p2.length-1);
           swapY = ((p1y=="t" && p2y=="b") || (p1y=="b" && p2y=="t"));
           swapX = ((p1x=="r" && p2x=="l") || (p1x=="l" && p2x=="r"));

           if (x + w > dw + scrollX) {
                x = swapX ? r.left-w : dw+scrollX-w;
           }
           if (x < scrollX) {
               x = swapX ? r.right : scrollX;
           }
           if (y + h > dh + scrollY) {
                y = swapY ? r.top-h : dh+scrollY-h;
            }
           if (y < scrollY){
               y = swapY ? r.bottom : scrollY;
           }
        }
        return [x,y];
    },

/**
     * Aligns this element with another element relative to the specified anchor points. If the other element is the
     * document it aligns it to the viewport.
     * The position parameter is optional, and can be specified in any one of the following formats:
     *

     *
  • Blank: Defaults to aligning the element's top-left corner to the target's bottom-left corner ("tl-bl").
    •
     *
  • One anchor (deprecated): The passed anchor position is used as the target element's anchor point.
     *       The element being aligned will position its top-left corner (tl) to that point.  This method has been
     *       deprecated in favor of the newer two anchor syntax below.
    •
     *
  • Two anchors: If two values from the table below are passed separated by a dash, the first value is used as the
     *       element's anchor point, and the second value is used as the target's anchor point.
    •
     *

     * In addition to the anchor points, the position parameter also supports the "?" character.  If "?" is passed at the end of
     * the position string, the element will attempt to align as specified, but the position will be adjusted to constrain to
     * the viewport if necessary.  Note that the element being aligned might be swapped to align to a different position than
     * that specified in order to enforce the viewport constraints.
     * Following are all of the supported anchor positions:

Value  Description
-----  -----------------------------
tl     The top left corner (default)
t      The center of the top edge
tr     The top right corner
l      The center of the left edge
c      In the center of the element
r      The center of the right edge
bl     The bottom left corner
b      The center of the bottom edge
br     The bottom right corner

Example Usage:

// align el to other-el using the default positioning ("tl-bl", non-constrained)
el.alignTo("other-el");

// align the top left corner of el with the top right corner of other-el (constrained to viewport)
el.alignTo("other-el", "tr?");

// align the bottom right corner of el with the center left edge of other-el
el.alignTo("other-el", "br-l?");

// align the center of el with the bottom left corner of other-el and
// adjust the x position by -6 pixels (and the y position by 0)
el.alignTo("other-el", "c-bl", [-6, 0]);

     * @param {Mixed} element The element to align to.
     * @param {String} position (optional, defaults to "tl-bl?") The position to align to.
     * @param {Array} offsets (optional) Offset the positioning by [x, y]
     * @param {Boolean/Object} animate (optional) true for the default animation or a standard Element animation config object
     * @return {Ext.Element} this
     */
    alignTo : function(element, position, offsets, animate){
        var me = this;
        return me.setXY(me.getAlignToXY(element, position, offsets),
                          me.preanim && !!animate ? me.preanim(arguments, 3) : false);
    },

    // private ==>  used outside of core
    adjustForConstraints : function(xy, parent, offsets){
        return this.getConstrainToXY(parent || document, false, offsets, xy) ||  xy;
    },

    // private ==>  used outside of core
    getConstrainToXY : function(el, local, offsets, proposedXY){
        var os = {top:0, left:0, bottom:0, right: 0};

        return function(el, local, offsets, proposedXY){
            el = Ext.get(el);
            offsets = offsets ? Ext.applyIf(offsets, os) : os;

            var vw, vh, vx = 0, vy = 0;
            if(el.dom == document.body || el.dom == document){
                vw =Ext.lib.Dom.getViewWidth();
                vh = Ext.lib.Dom.getViewHeight();
            }else{
                vw = el.dom.clientWidth;
                vh = el.dom.clientHeight;
                if(!local){
                    var vxy = el.getXY();
                    vx = vxy[0];
                    vy = vxy[1];
                }
            }

            var s = el.getScroll();

            vx += offsets.left + s.left;
            vy += offsets.top + s.top;

            vw -= offsets.right;
            vh -= offsets.bottom;

            var vr = vx+vw;
            var vb = vy+vh;

            var xy = proposedXY || (!local ? this.getXY() : [this.getLeft(true), this.getTop(true)]);
            var x = xy[0], y = xy[1];
            var w = this.dom.offsetWidth, h = this.dom.offsetHeight;

            // only move it if it needs it
            var moved = false;

            // first validate right/bottom
            if((x + w) > vr){
                x = vr - w;
                moved = true;
            }
            if((y + h) > vb){
                y = vb - h;
                moved = true;
            }
            // then make sure top/left isn't negative
            if(x < vx){
                x = vx;
                moved = true;
            }
            if(y < vy){
                y = vy;
                moved = true;
            }
            return moved ? [x, y] : false;
        };
    }(),

//         el = Ext.get(el);
//         offsets = Ext.applyIf(offsets || {}, {top : 0, left : 0, bottom : 0, right : 0});

//         var	me = this,
//         	doc = document,
//         	s = el.getScroll(),
//         	vxy = el.getXY(),
//         	vx = offsets.left + s.left,
//         	vy = offsets.top + s.top,
//         	vw = -offsets.right,
//         	vh = -offsets.bottom,
//         	vr,
//         	vb,
//         	xy = proposedXY || (!local ? me.getXY() : [me.getLeft(true), me.getTop(true)]),
//         	x = xy[0],
//         	y = xy[1],
//         	w = me.dom.offsetWidth, h = me.dom.offsetHeight,
//         	moved = false; // only move it if it needs it
//
//
//         if(el.dom == doc.body || el.dom == doc){
//             vw += Ext.lib.Dom.getViewWidth();
//             vh += Ext.lib.Dom.getViewHeight();
//         }else{
//             vw += el.dom.clientWidth;
//             vh += el.dom.clientHeight;
//             if(!local){
//                 vx += vxy[0];
//                 vy += vxy[1];
//             }
//         }

//         // first validate right/bottom
//         if(x + w > vx + vw){
//             x = vx + vw - w;
//             moved = true;
//         }
//         if(y + h > vy + vh){
//             y = vy + vh - h;
//             moved = true;
//         }
//         // then make sure top/left isn't negative
//         if(x < vx){
//             x = vx;
//             moved = true;
//         }
//         if(y < vy){
//             y = vy;
//             moved = true;
//         }
//         return moved ? [x, y] : false;
//    },

/**
    * Calculates the x, y to center this element on the screen
    * @return {Array} The x, y values [x, y]
    */
    getCenterXY : function(){
        return this.getAlignToXY(document, 'c-c');
    },

/**
    * Centers the Element in either the viewport, or another Element.
    * @param {Mixed} centerIn (optional) The element in which to center the element.
    */
    center : function(centerIn){
        return this.alignTo(centerIn || document, 'c-c');
    }
});


The source code

/*!
 * licensing@extjs.com
 * http://www.extjs.com/license
 */
/**
 * @class Ext.Element
 */
Ext.Element.addMethods({

/**
     * Initializes a {@link Ext.dd.DD} drag drop object for this element.
     * @param {String} group The group the DD object is member of
     * @param {Object} config The DD config object
     * @param {Object} overrides An object containing methods to override/implement on the DD object
     * @return {Ext.dd.DD} The DD object
     */
    initDD : function(group, config, overrides){
        var dd = new Ext.dd.DD(Ext.id(this.dom), group, config);
        return Ext.apply(dd, overrides);
    },

/**
     * Initializes a {@link Ext.dd.DDProxy} object for this element.
     * @param {String} group The group the DDProxy object is member of
     * @param {Object} config The DDProxy config object
     * @param {Object} overrides An object containing methods to override/implement on the DDProxy object
     * @return {Ext.dd.DDProxy} The DDProxy object
     */
    initDDProxy : function(group, config, overrides){
        var dd = new Ext.dd.DDProxy(Ext.id(this.dom), group, config);
        return Ext.apply(dd, overrides);
    },

/**
     * Initializes a {@link Ext.dd.DDTarget} object for this element.
     * @param {String} group The group the DDTarget object is member of
     * @param {Object} config The DDTarget config object
     * @param {Object} overrides An object containing methods to override/implement on the DDTarget object
     * @return {Ext.dd.DDTarget} The DDTarget object
     */
    initDDTarget : function(group, config, overrides){
        var dd = new Ext.dd.DDTarget(Ext.id(this.dom), group, config);
        return Ext.apply(dd, overrides);
    }
});


The source code

/*!
 * licensing@extjs.com
 * http://www.extjs.com/license
 */
/**
 * @class Ext.Element
 */
Ext.Element.addMethods(
function(){
    var VISIBILITY = "visibility",
        DISPLAY = "display",
        HIDDEN = "hidden",
        NONE = "none",
        XMASKED = "x-masked",
        XMASKEDRELATIVE = "x-masked-relative",
        data = Ext.Element.data;

    return {

/**
         * Checks whether the element is currently visible using both visibility and display properties.
         * @param {Boolean} deep (optional) True to walk the dom and see if parent elements are hidden (defaults to false)
         * @return {Boolean} True if the element is currently visible, else false
         */
        isVisible : function(deep) {
            var vis = !this.isStyle(VISIBILITY,HIDDEN) && !this.isStyle(DISPLAY,NONE),
                p = this.dom.parentNode;
            if(deep !== true || !vis){
                return vis;
            }
            while(p && !/^body/i.test(p.tagName)){
                if(!Ext.fly(p, '_isVisible').isVisible()){
                    return false;
                }
                p = p.parentNode;
            }
            return true;
        },

/**
         * Returns true if display is not "none"
         * @return {Boolean}
         */
        isDisplayed : function() {
            return !this.isStyle(DISPLAY, NONE);
        },

/**
         * Convenience method for setVisibilityMode(Element.DISPLAY)
         * @param {String} display (optional) What to set display to when visible
         * @return {Ext.Element} this
         */
        enableDisplayMode : function(display){
            this.setVisibilityMode(Ext.Element.DISPLAY);
            if(!Ext.isEmpty(display)){
                data(this.dom, 'originalDisplay', display);
            }
            return this;
        },

/**
         * Puts a mask over this element to disable user interaction. Requires core.css.
         * This method can only be applied to elements which accept child nodes.
         * @param {String} msg (optional) A message to display in the mask
         * @param {String} msgCls (optional) A css class to apply to the msg element
         * @return {Element} The mask element
         */
        mask : function(msg, msgCls){
            var me = this,
                dom = me.dom,
                dh = Ext.DomHelper,
                EXTELMASKMSG = "ext-el-mask-msg",
                el,
                mask;

            if(!/^body/i.test(dom.tagName) && me.getStyle('position') == 'static'){
                me.addClass(XMASKEDRELATIVE);
            }
            if((el = data(dom, 'maskMsg'))){
                el.remove();
            }
            if((el = data(dom, 'mask'))){
                el.remove();
            }

            mask = dh.append(dom, {cls : "ext-el-mask"}, true);
            data(dom, 'mask', mask);

            me.addClass(XMASKED);
            mask.setDisplayed(true);
            if(typeof msg == 'string'){
                var mm = dh.append(dom, {cls : EXTELMASKMSG, cn:{tag:'div'}}, true);
                data(dom, 'maskMsg', mm);
                mm.dom.className = msgCls ? EXTELMASKMSG + " " + msgCls : EXTELMASKMSG;
                mm.dom.firstChild.innerHTML = msg;
                mm.setDisplayed(true);
                mm.center(me);
            }
            if(Ext.isIE && !(Ext.isIE7 && Ext.isStrict) && me.getStyle('height') == 'auto'){ // ie will not expand full height automatically
                mask.setSize(undefined, me.getHeight());
            }
            return mask;
        },

/**
         * Removes a previously applied mask.
         */
        unmask : function(){
            var me = this,
                dom = me.dom,
                mask = data(dom, 'mask'),
                maskMsg = data(dom, 'maskMsg');
            if(mask){
                if(maskMsg){
                    maskMsg.remove();
                    data(dom, 'maskMsg', undefined);
                }
                mask.remove();
                data(dom, 'mask', undefined);
            }
            me.removeClass([XMASKED, XMASKEDRELATIVE]);
        },

/**
         * Returns true if this element is masked
         * @return {Boolean}
         */
        isMasked : function(){
            var m = data(this.dom, 'mask');
            return m && m.isVisible();
        },

/**
         * Creates an iframe shim for this element to keep selects and other windowed objects from
         * showing through.
         * @return {Ext.Element} The new shim element
         */
        createShim : function(){
            var el = document.createElement('iframe'),
                shim;
            el.frameBorder = '0';
            el.className = 'ext-shim';
            el.src = Ext.SSL_SECURE_URL;
            shim = Ext.get(this.dom.parentNode.insertBefore(el, this.dom));
            shim.autoBoxAdjust = false;
            return shim;
        }
    };
}());


The source code

/*!
 * licensing@extjs.com
 * http://www.extjs.com/license
 */
/**
 * @class Ext.Element
 */

/**
 * Visibility mode constant for use with {@link #setVisibilityMode}. Use visibility to hide element
 * @static
 * @type Number
 */
Ext.Element.VISIBILITY = 1;

/**
 * Visibility mode constant for use with {@link #setVisibilityMode}. Use display to hide element
 * @static
 * @type Number
 */
Ext.Element.DISPLAY = 2;

Ext.Element.addMethods(function(){
    var VISIBILITY = "visibility",
        DISPLAY = "display",
        HIDDEN = "hidden",
        OFFSETS = "offsets",
        NONE = "none",
        ORIGINALDISPLAY = 'originalDisplay',
        VISMODE = 'visibilityMode',
        ELDISPLAY = Ext.Element.DISPLAY,
        data = Ext.Element.data,
        getDisplay = function(dom){
            var d = data(dom, ORIGINALDISPLAY);
            if(d === undefined){
                data(dom, ORIGINALDISPLAY, d = '');
            }
            return d;
        },
        getVisMode = function(dom){
            var m = data(dom, VISMODE);
            if(m === undefined){
                data(dom, VISMODE, m = 1);
            }
            return m;
        };

    return {

/**
         * The element's default display mode  (defaults to "")
         * @type String
         */
        originalDisplay : "",
        visibilityMode : 1,

/**
         * Sets the element's visibility mode. When setVisible() is called it
         * will use this to determine whether to set the visibility or the display property.
         * @param {Number} visMode Ext.Element.VISIBILITY or Ext.Element.DISPLAY
         * @return {Ext.Element} this
         */
        setVisibilityMode : function(visMode){
            data(this.dom, VISMODE, visMode);
            return this;
        },

/**
         * Perform custom animation on this element.
         *

         *
  • Animation Properties
    •
         *
         *
    The Animation Control Object enables gradual transitions for any member of an
         * element's style object that takes a numeric value including but not limited to
         * these properties:

         *
    • bottom, top, left, right
      •
         *
    • height, width
      •
         *
    • margin, padding
      •
         *
    • borderWidth
      •
         *
    • opacity
      •
         *
    • fontSize
      •
         *
    • lineHeight
      •
         *

         *
         *
         *
  • Animation Property Attributes
    •
         *
         *
    Each Animation Property is a config object with optional properties:

         *

         *
    • by*  : relative change - start at current value, change by this value
      •
         *
    • from : ignore current value, start from this value
      •
         *
    • to*  : start at current value, go to this value
      •
         *
    • unit : any allowable unit specification
      •
         *
      * do not specify both to and by for an animation property

         *

         *
         *
  • Animation Types
    •
         *
         *
    The supported animation types:

         *
    • 'run' : Default
         *

var el = Ext.get('complexEl');
el.animate(
    // animation control object
    {
        borderWidth: {to: 3, from: 0},
        opacity: {to: .3, from: 1},
        height: {to: 50, from: el.getHeight()},
        width: {to: 300, from: el.getWidth()},
        top  : {by: - 100, unit: 'px'},
    },
    0.35,      // animation duration
    null,      // callback
    'easeOut', // easing method
    'run'      // animation type ('run','color','motion','scroll')
);
         *

         *
      •
         *
    • 'color'
         *
      Animates transition of background, text, or border colors.

         *

el.animate(
    // animation control object
    {
        color: { to: '#06e' },
        backgroundColor: { to: '#e06' }
    },
    0.35,      // animation duration
    null,      // callback
    'easeOut', // easing method
    'color'    // animation type ('run','color','motion','scroll')
);
         *

         *
      •
         *
         *
    • 'motion'
         *
      Animates the motion of an element to/from specific points using optional bezier
         * way points during transit.

         *

el.animate(
    // animation control object
    {
        borderWidth: {to: 3, from: 0},
        opacity: {to: .3, from: 1},
        height: {to: 50, from: el.getHeight()},
        width: {to: 300, from: el.getWidth()},
        top  : {by: - 100, unit: 'px'},
        points: {
            to: [50, 100],  // go to this point
            control: [      // optional bezier way points
                [ 600, 800],
                [-100, 200]
            ]
        }
    },
    3000,      // animation duration (milliseconds!)
    null,      // callback
    'easeOut', // easing method
    'motion'   // animation type ('run','color','motion','scroll')
);
         *

         *
      •
         *
    • 'scroll'
         *
      Animate horizontal or vertical scrolling of an overflowing page element.

         *

el.animate(
    // animation control object
    {
        scroll: {to: [400, 300]}
    },
    0.35,      // animation duration
    null,      // callback
    'easeOut', // easing method
    'scroll'   // animation type ('run','color','motion','scroll')
);
         *

         *
      •
         *

         *
         *

         *
         * @param {Object} args The animation control args
         * @param {Float} duration (optional) How long the animation lasts in seconds (defaults to .35)
         * @param {Function} onComplete (optional) Function to call when animation completes
         * @param {String} easing (optional) {@link Ext.Fx#easing} method to use (defaults to 'easeOut')
         * @param {String} animType (optional) 'run' is the default. Can also be 'color',
         * 'motion', or 'scroll'
         * @return {Ext.Element} this
         */
        animate : function(args, duration, onComplete, easing, animType){
            this.anim(args, {duration: duration, callback: onComplete, easing: easing}, animType);
            return this;
        },

        /*
         * @private Internal animation call
         */
        anim : function(args, opt, animType, defaultDur, defaultEase, cb){
            animType = animType || 'run';
            opt = opt || {};
            var me = this,
                anim = Ext.lib.Anim[animType](
                    me.dom,
                    args,
                    (opt.duration || defaultDur) || .35,
                    (opt.easing || defaultEase) || 'easeOut',
                    function(){
                        if(cb) cb.call(me);
                        if(opt.callback) opt.callback.call(opt.scope || me, me, opt);
                    },
                    me
                );
            opt.anim = anim;
            return anim;
        },

        // private legacy anim prep
        preanim : function(a, i){
            return !a[i] ? false : (Ext.isObject(a[i]) ? a[i]: {duration: a[i+1], callback: a[i+2], easing: a[i+3]});
        },

/**
         * Checks whether the element is currently visible using both visibility and display properties.
         * @return {Boolean} True if the element is currently visible, else false
         */
        isVisible : function() {
            return !this.isStyle(VISIBILITY, HIDDEN) && !this.isStyle(DISPLAY, NONE);
        },

/**
         * Sets the visibility of the element (see details). If the visibilityMode is set to Element.DISPLAY, it will use
         * the display property to hide the element, otherwise it uses visibility. The default is to hide and show using the visibility property.
         * @param {Boolean} visible Whether the element is visible
         * @param {Boolean/Object} animate (optional) True for the default animation, or a standard Element animation config object
         * @return {Ext.Element} this
         */
         setVisible : function(visible, animate){
            var me = this, isDisplay, isVisible, isOffsets,
                dom = me.dom;

            // hideMode string override
            if (Ext.isString(animate)){
                isDisplay = animate == DISPLAY;
                isVisible = animate == VISIBILITY;
                isOffsets = animate == OFFSETS;
                animate = false;
            } else {
                isDisplay = getVisMode(this.dom) == ELDISPLAY;
                isVisible = !isDisplay;
            }

            if (!animate || !me.anim) {
                if (isDisplay){
                    me.setDisplayed(visible);
                } else if (isOffsets){
                    if (!visible){
                        me.hideModeStyles = {
                            position: me.getStyle('position'),
                            top: me.getStyle('top'),
                            left: me.getStyle('left')
                        };

                        me.applyStyles({position: 'absolute', top: '-10000px', left: '-10000px'});
                    } else {
                        me.applyStyles(me.hideModeStyles || {position: '', top: '', left: ''});
                    }
                }else{
                    me.fixDisplay();
                    dom.style.visibility = visible ? "visible" : HIDDEN;
                }
            }else{
                // closure for composites
                if (visible){
                    me.setOpacity(.01);
                    me.setVisible(true);
                }
                me.anim({opacity: { to: (visible?1:0) }},
                        me.preanim(arguments, 1),
                        null,
                        .35,
                        'easeIn',
                        function(){
                             if(!visible){
                                 dom.style[isDisplay ? DISPLAY : VISIBILITY] = (isDisplay) ? NONE : HIDDEN;
                                 Ext.fly(dom).setOpacity(1);
                             }
                        });
            }
            return me;
        },

/**
         * Toggles the element's visibility or display, depending on visibility mode.
         * @param {Boolean/Object} animate (optional) True for the default animation, or a standard Element animation config object
         * @return {Ext.Element} this
         */
        toggle : function(animate){
            var me = this;
            me.setVisible(!me.isVisible(), me.preanim(arguments, 0));
            return me;
        },

/**
         * Sets the CSS display property. Uses originalDisplay if the specified value is a boolean true.
         * @param {Mixed} value Boolean value to display the element using its default display, or a string to set the display directly.
         * @return {Ext.Element} this
         */
        setDisplayed : function(value) {
            if(typeof value == "boolean"){
               value = value ? getDisplay(this.dom) : NONE;
            }
            this.setStyle(DISPLAY, value);
            return this;
        },

        // private
        fixDisplay : function(){
            var me = this;
            if(me.isStyle(DISPLAY, NONE)){
                me.setStyle(VISIBILITY, HIDDEN);
                me.setStyle(DISPLAY, getDisplay(this.dom)); // first try reverting to default
                if(me.isStyle(DISPLAY, NONE)){ // if that fails, default to block
                    me.setStyle(DISPLAY, "block");
                }
            }
        },

/**
         * Hide this element - Uses display mode to determine whether to use "display" or "visibility". See {@link #setVisible}.
         * @param {Boolean/Object} animate (optional) true for the default animation or a standard Element animation config object
         * @return {Ext.Element} this
         */
        hide : function(animate){
            // hideMode override
            if (Ext.isString(animate)){
                this.setVisible(false, animate);
                return this;
            }
            this.setVisible(false, this.preanim(arguments, 0));
            return this;
        },

/**
        * Show this element - Uses display mode to determine whether to use "display" or "visibility". See {@link #setVisible}.
        * @param {Boolean/Object} animate (optional) true for the default animation or a standard Element animation config object
         * @return {Ext.Element} this
         */
        show : function(animate){
            // hideMode override
            if (Ext.isString(animate)){
                this.setVisible(true, animate);
                return this;
            }
            this.setVisible(true, this.preanim(arguments, 0));
            return this;
        }
    };
}());


The source code

/*!
 * licensing@extjs.com
 * http://www.extjs.com/license
 */
/**
 * @class Ext.Element
 *
Encapsulates a DOM element, adding simple DOM manipulation facilities, normalizing for browser differences.

 *
All instances of this class inherit the methods of {@link Ext.Fx} making visual effects easily available to all DOM elements.

 *
Note that the events documented in this class are not Ext events, they encapsulate browser events. To
 * access the underlying browser event, see {@link Ext.EventObject#browserEvent}. Some older
 * browsers may not support the full range of events. Which events are supported is beyond the control of ExtJs.

 * Usage:

// by id
var el = Ext.get("my-div");

// by DOM element reference
var el = Ext.get(myDivElement);

 * Animations

 *
When an element is manipulated, by default there is no animation.

 *

var el = Ext.get("my-div");

// no animation
el.setWidth(100);
 *

 *
Many of the functions for manipulating an element have an optional "animate" parameter.  This
 * parameter can be specified as boolean (true) for default animation effects.

 *

// default animation
el.setWidth(100, true);
 *

 *
 *
To configure the effects, an object literal with animation options to use as the Element animation
 * configuration object can also be specified. Note that the supported Element animation configuration
 * options are a subset of the {@link Ext.Fx} animation options specific to Fx effects.  The supported
 * Element animation configuration options are:

Option    Default   Description
--------- --------  ---------------------------------------------
{@link Ext.Fx#duration duration}  .35       The duration of the animation in seconds
{@link Ext.Fx#easing easing}    easeOut   The easing method
{@link Ext.Fx#callback callback}  none      A function to execute when the anim completes
{@link Ext.Fx#scope scope}     this      The scope (this) of the callback function

 *
 *

// Element animation options object
var opt = {
    {@link Ext.Fx#duration duration}: 1,
    {@link Ext.Fx#easing easing}: 'elasticIn',
    {@link Ext.Fx#callback callback}: this.foo,
    {@link Ext.Fx#scope scope}: this
};
// animation with some options set
el.setWidth(100, opt);
 *

 *
The Element animation object being used for the animation will be set on the options
 * object as "anim", which allows you to stop or manipulate the animation. Here is an example:

 *

// using the "anim" property to get the Anim object
if(opt.anim.isAnimated()){
    opt.anim.stop();
}
 *

 *
Also see the {@link #animate} method for another animation technique.

 *
 Composite (Collections of) Elements

 *
For working with collections of Elements, see {@link Ext.CompositeElement}

 * @constructor Create a new Element directly.
 * @param {String/HTMLElement} element
 * @param {Boolean} forceNew (optional) By default the constructor checks to see if there is already an instance of this element in the cache and if there is it returns the same instance. This will skip that check (useful for extending this class).
 */
(function(){
var DOC = document;

Ext.Element = function(element, forceNew){
    var dom = typeof element == "string" ?
              DOC.getElementById(element) : element,
        id;

    if(!dom) return null;

    id = dom.id;

    if(!forceNew && id && Ext.elCache[id]){ // element object already exists
        return Ext.elCache[id].el;
    }

/**
     * The DOM element
     * @type HTMLElement
     */
    this.dom = dom;

/**
     * The DOM element ID
     * @type String
     */
    this.id = id || Ext.id(dom);
};

var D = Ext.lib.Dom,
    DH = Ext.DomHelper,
    E = Ext.lib.Event,
    A = Ext.lib.Anim,
    El = Ext.Element,
    EC = Ext.elCache;

El.prototype = {

/**
     * Sets the passed attributes as attributes of this element (a style attribute can be a string, object or function)
     * @param {Object} o The object with the attributes
     * @param {Boolean} useSet (optional) false to override the default setAttribute to use expandos.
     * @return {Ext.Element} this
     */
    set : function(o, useSet){
        var el = this.dom,
            attr,
            val,
            useSet = (useSet !== false) && !!el.setAttribute;

        for(attr in o){
            if (o.hasOwnProperty(attr)) {
                val = o[attr];
                if (attr == 'style') {
                    DH.applyStyles(el, val);
                } else if (attr == 'cls') {
                    el.className = val;
                } else if (useSet) {
                    el.setAttribute(attr, val);
                } else {
                    el[attr] = val;
                }
            }
        }
        return this;
    },

//  Mouse events

/**
     * @event click
     * Fires when a mouse click is detected within the element.
     * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
     * @param {HtmlElement} t The target of the event.
     * @param {Object} o The options configuration passed to the {@link #addListener} call.
     */

/**
     * @event contextmenu
     * Fires when a right click is detected within the element.
     * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
     * @param {HtmlElement} t The target of the event.
     * @param {Object} o The options configuration passed to the {@link #addListener} call.
     */

/**
     * @event dblclick
     * Fires when a mouse double click is detected within the element.
     * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
     * @param {HtmlElement} t The target of the event.
     * @param {Object} o The options configuration passed to the {@link #addListener} call.
     */

/**
     * @event mousedown
     * Fires when a mousedown is detected within the element.
     * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
     * @param {HtmlElement} t The target of the event.
     * @param {Object} o The options configuration passed to the {@link #addListener} call.
     */

/**
     * @event mouseup
     * Fires when a mouseup is detected within the element.
     * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
     * @param {HtmlElement} t The target of the event.
     * @param {Object} o The options configuration passed to the {@link #addListener} call.
     */

/**
     * @event mouseover
     * Fires when a mouseover is detected within the element.
     * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
     * @param {HtmlElement} t The target of the event.
     * @param {Object} o The options configuration passed to the {@link #addListener} call.
     */

/**
     * @event mousemove
     * Fires when a mousemove is detected with the element.
     * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
     * @param {HtmlElement} t The target of the event.
     * @param {Object} o The options configuration passed to the {@link #addListener} call.
     */

/**
     * @event mouseout
     * Fires when a mouseout is detected with the element.
     * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
     * @param {HtmlElement} t The target of the event.
     * @param {Object} o The options configuration passed to the {@link #addListener} call.
     */

/**
     * @event mouseenter
     * Fires when the mouse enters the element.
     * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
     * @param {HtmlElement} t The target of the event.
     * @param {Object} o The options configuration passed to the {@link #addListener} call.
     */

/**
     * @event mouseleave
     * Fires when the mouse leaves the element.
     * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
     * @param {HtmlElement} t The target of the event.
     * @param {Object} o The options configuration passed to the {@link #addListener} call.
     */

//  Keyboard events

/**
     * @event keypress
     * Fires when a keypress is detected within the element.
     * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
     * @param {HtmlElement} t The target of the event.
     * @param {Object} o The options configuration passed to the {@link #addListener} call.
     */

/**
     * @event keydown
     * Fires when a keydown is detected within the element.
     * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
     * @param {HtmlElement} t The target of the event.
     * @param {Object} o The options configuration passed to the {@link #addListener} call.
     */

/**
     * @event keyup
     * Fires when a keyup is detected within the element.
     * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
     * @param {HtmlElement} t The target of the event.
     * @param {Object} o The options configuration passed to the {@link #addListener} call.
     */

//  HTML frame/object events

/**
     * @event load
     * Fires when the user agent finishes loading all content within the element. Only supported by window, frames, objects and images.
     * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
     * @param {HtmlElement} t The target of the event.
     * @param {Object} o The options configuration passed to the {@link #addListener} call.
     */

/**
     * @event unload
     * Fires when the user agent removes all content from a window or frame. For elements, it fires when the target element or any of its content has been removed.
     * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
     * @param {HtmlElement} t The target of the event.
     * @param {Object} o The options configuration passed to the {@link #addListener} call.
     */

/**
     * @event abort
     * Fires when an object/image is stopped from loading before completely loaded.
     * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
     * @param {HtmlElement} t The target of the event.
     * @param {Object} o The options configuration passed to the {@link #addListener} call.
     */

/**
     * @event error
     * Fires when an object/image/frame cannot be loaded properly.
     * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
     * @param {HtmlElement} t The target of the event.
     * @param {Object} o The options configuration passed to the {@link #addListener} call.
     */

/**
     * @event resize
     * Fires when a document view is resized.
     * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
     * @param {HtmlElement} t The target of the event.
     * @param {Object} o The options configuration passed to the {@link #addListener} call.
     */

/**
     * @event scroll
     * Fires when a document view is scrolled.
     * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
     * @param {HtmlElement} t The target of the event.
     * @param {Object} o The options configuration passed to the {@link #addListener} call.
     */

//  Form events

/**
     * @event select
     * Fires when a user selects some text in a text field, including input and textarea.
     * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
     * @param {HtmlElement} t The target of the event.
     * @param {Object} o The options configuration passed to the {@link #addListener} call.
     */

/**
     * @event change
     * Fires when a control loses the input focus and its value has been modified since gaining focus.
     * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
     * @param {HtmlElement} t The target of the event.
     * @param {Object} o The options configuration passed to the {@link #addListener} call.
     */

/**
     * @event submit
     * Fires when a form is submitted.
     * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
     * @param {HtmlElement} t The target of the event.
     * @param {Object} o The options configuration passed to the {@link #addListener} call.
     */

/**
     * @event reset
     * Fires when a form is reset.
     * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
     * @param {HtmlElement} t The target of the event.
     * @param {Object} o The options configuration passed to the {@link #addListener} call.
     */

/**
     * @event focus
     * Fires when an element receives focus either via the pointing device or by tab navigation.
     * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
     * @param {HtmlElement} t The target of the event.
     * @param {Object} o The options configuration passed to the {@link #addListener} call.
     */

/**
     * @event blur
     * Fires when an element loses focus either via the pointing device or by tabbing navigation.
     * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
     * @param {HtmlElement} t The target of the event.
     * @param {Object} o The options configuration passed to the {@link #addListener} call.
     */

//  User Interface events

/**
     * @event DOMFocusIn
     * Where supported. Similar to HTML focus event, but can be applied to any focusable element.
     * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
     * @param {HtmlElement} t The target of the event.
     * @param {Object} o The options configuration passed to the {@link #addListener} call.
     */

/**
     * @event DOMFocusOut
     * Where supported. Similar to HTML blur event, but can be applied to any focusable element.
     * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
     * @param {HtmlElement} t The target of the event.
     * @param {Object} o The options configuration passed to the {@link #addListener} call.
     */

/**
     * @event DOMActivate
     * Where supported. Fires when an element is activated, for instance, through a mouse click or a keypress.
     * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
     * @param {HtmlElement} t The target of the event.
     * @param {Object} o The options configuration passed to the {@link #addListener} call.
     */

//  DOM Mutation events

/**
     * @event DOMSubtreeModified
     * Where supported. Fires when the subtree is modified.
     * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
     * @param {HtmlElement} t The target of the event.
     * @param {Object} o The options configuration passed to the {@link #addListener} call.
     */

/**
     * @event DOMNodeInserted
     * Where supported. Fires when a node has been added as a child of another node.
     * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
     * @param {HtmlElement} t The target of the event.
     * @param {Object} o The options configuration passed to the {@link #addListener} call.
     */

/**
     * @event DOMNodeRemoved
     * Where supported. Fires when a descendant node of the element is removed.
     * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
     * @param {HtmlElement} t The target of the event.
     * @param {Object} o The options configuration passed to the {@link #addListener} call.
     */

/**
     * @event DOMNodeRemovedFromDocument
     * Where supported. Fires when a node is being removed from a document.
     * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
     * @param {HtmlElement} t The target of the event.
     * @param {Object} o The options configuration passed to the {@link #addListener} call.
     */

/**
     * @event DOMNodeInsertedIntoDocument
     * Where supported. Fires when a node is being inserted into a document.
     * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
     * @param {HtmlElement} t The target of the event.
     * @param {Object} o The options configuration passed to the {@link #addListener} call.
     */

/**
     * @event DOMAttrModified
     * Where supported. Fires when an attribute has been modified.
     * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
     * @param {HtmlElement} t The target of the event.
     * @param {Object} o The options configuration passed to the {@link #addListener} call.
     */

/**
     * @event DOMCharacterDataModified
     * Where supported. Fires when the character data has been modified.
     * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
     * @param {HtmlElement} t The target of the event.
     * @param {Object} o The options configuration passed to the {@link #addListener} call.
     */

/**
     * The default unit to append to CSS values where a unit isn't provided (defaults to px).
     * @type String
     */
    defaultUnit : "px",

/**
     * Returns true if this element matches the passed simple selector (e.g. div.some-class or span:first-child)
     * @param {String} selector The simple selector to test
     * @return {Boolean} True if this element matches the selector, else false
     */
    is : function(simpleSelector){
        return Ext.DomQuery.is(this.dom, simpleSelector);
    },

/**
     * Tries to focus the element. Any exceptions are caught and ignored.
     * @param {Number} defer (optional) Milliseconds to defer the focus
     * @return {Ext.Element} this
     */
    focus : function(defer, /* private */ dom) {
        var me = this,
            dom = dom || me.dom;
        try{
            if(Number(defer)){
                me.focus.defer(defer, null, [null, dom]);
            }else{
                dom.focus();
            }
        }catch(e){}
        return me;
    },

/**
     * Tries to blur the element. Any exceptions are caught and ignored.
     * @return {Ext.Element} this
     */
    blur : function() {
        try{
            this.dom.blur();
        }catch(e){}
        return this;
    },

/**
     * Returns the value of the "value" attribute
     * @param {Boolean} asNumber true to parse the value as a number
     * @return {String/Number}
     */
    getValue : function(asNumber){
        var val = this.dom.value;
        return asNumber ? parseInt(val, 10) : val;
    },

/**
     * Appends an event handler to this element.  The shorthand version {@link #on} is equivalent.
     * @param {String} eventName The name of event to handle.
     * @param {Function} fn The handler function the event invokes. This function is passed
     * the following parameters:

     *
  • evt : EventObject
    The {@link Ext.EventObject EventObject} describing the event.
    •
     *
  • el : HtmlElement
    The DOM element which was the target of the event.
     * Note that this may be filtered by using the delegate option.
    •
     *
  • o : Object
    The options object from the addListener call.
    •
     *

     * @param {Object} scope (optional) The scope (this reference) in which the handler function is executed.
     * If omitted, defaults to this Element..
     * @param {Object} options (optional) An object containing handler configuration properties.
     * This may contain any of the following properties:

     *
  • scope Object :
    The scope (this reference) in which the handler function is executed.
     * If omitted, defaults to this Element.
    •
     *
  • delegate String:
    A simple selector to filter the target or look for a descendant of the target. See below for additional details.
    •
     *
  • stopEvent Boolean:
    True to stop the event. That is stop propagation, and prevent the default action.
    •
     *
  • preventDefault Boolean:
    True to prevent the default action
    •
     *
  • stopPropagation Boolean:
    True to prevent event propagation
    •
     *
  • normalized Boolean:
    False to pass a browser event to the handler function instead of an Ext.EventObject
    •
     *
  • target Ext.Element:
    Only call the handler if the event was fired on the target Element, not if the event was bubbled up from a child node.
    •
     *
  • delay Number:
    The number of milliseconds to delay the invocation of the handler after the event fires.
    •
     *
  • single Boolean:
    True to add a handler to handle just the next firing of the event, and then remove itself.
    •
     *
  • buffer Number:
    Causes the handler to be scheduled to run in an {@link Ext.util.DelayedTask} delayed
     * by the specified number of milliseconds. If the event fires again within that time, the original
     * handler is not invoked, but the new handler is scheduled in its place.
    •
     *

     *

     * Combining Options

     * In the following examples, the shorthand form {@link #on} is used rather than the more verbose
     * addListener.  The two are equivalent.  Using the options argument, it is possible to combine different
     * types of listeners:

     *

     * A delayed, one-time listener that auto stops the event and adds a custom argument (forumId) to the
     * options object. The options object is available as the third parameter in the handler function.

     * Code:

el.on('click', this.onClick, this, {
    single: true,
    delay: 100,
    stopEvent : true,
    forumId: 4
});

     *

     * Attaching multiple handlers in 1 call

     * The method also allows for a single argument to be passed which is a config object containing properties
     * which specify multiple handlers.

     *

     * Code:

el.on({
    'click' : {
        fn: this.onClick,
        scope: this,
        delay: 100
    },
    'mouseover' : {
        fn: this.onMouseOver,
        scope: this
    },
    'mouseout' : {
        fn: this.onMouseOut,
        scope: this
    }
});

     *

     * Or a shorthand syntax:

     * Code:

el.on({
    'click' : this.onClick,
    'mouseover' : this.onMouseOver,
    'mouseout' : this.onMouseOut,
    scope: this
});
     *

     *
delegate

     *
This is a configuration option that you can pass along when registering a handler for
     * an event to assist with event delegation. Event delegation is a technique that is used to
     * reduce memory consumption and prevent exposure to memory-leaks. By registering an event
     * for a container element as opposed to each element within a container. By setting this
     * configuration option to a simple selector, the target element will be filtered to look for
     * a descendant of the target.
     * For example:

// using this markup:
<div id='elId'>
    <p id='p1'>paragraph one</p>
    <p id='p2' class='clickable'>paragraph two</p>
    <p id='p3'>paragraph three</p>
</div>
// utilize event delegation to registering just one handler on the container element:
el = Ext.get('elId');
el.on(
    'click',
    function(e,t) {
        // handle click
        console.info(t.id); // 'p2'
    },
    this,
    {
        // filter the target element to be a descendant with the class 'clickable'
        delegate: '.clickable'
    }
);
     *

     * @return {Ext.Element} this
     */
    addListener : function(eventName, fn, scope, options){
        Ext.EventManager.on(this.dom,  eventName, fn, scope || this, options);
        return this;
    },

/**
     * Removes an event handler from this element.  The shorthand version {@link #un} is equivalent.
     * Note: if a scope was explicitly specified when {@link #addListener adding} the
     * listener, the same scope must be specified here.
     * Example:
     *

el.removeListener('click', this.handlerFn);
// or
el.un('click', this.handlerFn);

     * @param {String} eventName The name of the event from which to remove the handler.
     * @param {Function} fn The handler function to remove. This must be a reference to the function passed into the {@link #addListener} call.
     * @param {Object} scope If a scope (this reference) was specified when the listener was added,
     * then this must refer to the same object.
     * @return {Ext.Element} this
     */
    removeListener : function(eventName, fn, scope){
        Ext.EventManager.removeListener(this.dom,  eventName, fn, scope || this);
        return this;
    },

/**
     * Removes all previous added listeners from this element
     * @return {Ext.Element} this
     */
    removeAllListeners : function(){
        Ext.EventManager.removeAll(this.dom);
        return this;
    },

/**
     * Recursively removes all previous added listeners from this element and its children
     * @return {Ext.Element} this
     */
    purgeAllListeners : function() {
        Ext.EventManager.purgeElement(this, true);
        return this;
    },
    /**
     * @private Test if size has a unit, otherwise appends the default
     */
    addUnits : function(size){
        if(size === "" || size == "auto" || size === undefined){
            size = size || '';
        } else if(!isNaN(size) || !unitPattern.test(size)){
            size = size + (this.defaultUnit || 'px');
        }
        return size;
    },

/**
     *
Updates the innerHTML of this Element
     * from a specified URL. Note that this is subject to the Same Origin Policy

     *
Updating innerHTML of an element will not execute embedded <script> elements. This is a browser restriction.

     * @param {Mixed} options. Either a sring containing the URL from which to load the HTML, or an {@link Ext.Ajax#request} options object specifying
     * exactly how to request the HTML.
     * @return {Ext.Element} this
     */
    load : function(url, params, cb){
        Ext.Ajax.request(Ext.apply({
            params: params,
            url: url.url || url,
            callback: cb,
            el: this.dom,
            indicatorText: url.indicatorText || ''
        }, Ext.isObject(url) ? url : {}));
        return this;
    },

/**
     * Tests various css rules/browsers to determine if this element uses a border box
     * @return {Boolean}
     */
    isBorderBox : function(){
        return noBoxAdjust[(this.dom.tagName || "").toLowerCase()] || Ext.isBorderBox;
    },

/**
     *
Removes this element's dom reference.  Note that event and cache removal is handled at {@link Ext#removeNode}

     */
    remove : function(){
        var me = this,
            dom = me.dom;

        if (dom) {
            delete me.dom;
            Ext.removeNode(dom);
        }
    },

/**
     * Sets up event handlers to call the passed functions when the mouse is moved into and out of the Element.
     * @param {Function} overFn The function to call when the mouse enters the Element.
     * @param {Function} outFn The function to call when the mouse leaves the Element.
     * @param {Object} scope (optional) The scope (this reference) in which the functions are executed. Defaults to the Element's DOM element.
     * @param {Object} options (optional) Options for the listener. See {@link Ext.util.Observable#addListener the options parameter}.
     * @return {Ext.Element} this
     */
    hover : function(overFn, outFn, scope, options){
        var me = this;
        me.on('mouseenter', overFn, scope || me.dom, options);
        me.on('mouseleave', outFn, scope || me.dom, options);
        return me;
    },

/**
     * Returns true if this element is an ancestor of the passed element
     * @param {HTMLElement/String} el The element to check
     * @return {Boolean} True if this element is an ancestor of el, else false
     */
    contains : function(el){
        return !el ? false : Ext.lib.Dom.isAncestor(this.dom, el.dom ? el.dom : el);
    },

/**
     * Returns the value of a namespaced attribute from the element's underlying DOM node.
     * @param {String} namespace The namespace in which to look for the attribute
     * @param {String} name The attribute name
     * @return {String} The attribute value
     * @deprecated
     */
    getAttributeNS : function(ns, name){
        return this.getAttribute(name, ns);
    },

/**
     * Returns the value of an attribute from the element's underlying DOM node.
     * @param {String} name The attribute name
     * @param {String} namespace (optional) The namespace in which to look for the attribute
     * @return {String} The attribute value
     */
    getAttribute : Ext.isIE ? function(name, ns){
        var d = this.dom,
            type = typeof d[ns + ":" + name];

        if(['undefined', 'unknown'].indexOf(type) == -1){
            return d[ns + ":" + name];
        }
        return d[name];
    } : function(name, ns){
        var d = this.dom;
        return d.getAttributeNS(ns, name) || d.getAttribute(ns + ":" + name) || d.getAttribute(name) || d[name];
    },

/**
    * Update the innerHTML of this element
    * @param {String} html The new HTML
    * @return {Ext.Element} this
     */
    update : function(html) {
        if (this.dom) {
            this.dom.innerHTML = html;
        }
        return this;
    }
};

var ep = El.prototype;

El.addMethods = function(o){
   Ext.apply(ep, o);
};

/**
 * Appends an event handler (shorthand for {@link #addListener}).
 * @param {String} eventName The name of event to handle.
 * @param {Function} fn The handler function the event invokes.
 * @param {Object} scope (optional) The scope (this reference) in which the handler function is executed.
 * @param {Object} options (optional) An object containing standard {@link #addListener} options
 * @member Ext.Element
 * @method on
 */
ep.on = ep.addListener;

/**
 * Removes an event handler from this element (see {@link #removeListener} for additional notes).
 * @param {String} eventName The name of the event from which to remove the handler.
 * @param {Function} fn The handler function to remove. This must be a reference to the function passed into the {@link #addListener} call.
 * @param {Object} scope If a scope (this reference) was specified when the listener was added,
 * then this must refer to the same object.
 * @return {Ext.Element} this
 * @member Ext.Element
 * @method un
 */
ep.un = ep.removeListener;

/**
 * true to automatically adjust width and height settings for box-model issues (default to true)
 */
ep.autoBoxAdjust = true;

// private
var unitPattern = /\d+(px|em|%|en|ex|pt|in|cm|mm|pc)$/i,
    docEl;

/**
 * @private
 */

/**
 * Retrieves Ext.Element objects.
 *
This method does not retrieve {@link Ext.Component Component}s. This method
 * retrieves Ext.Element objects which encapsulate DOM elements. To retrieve a Component by
 * its ID, use {@link Ext.ComponentMgr#get}.

 *
Uses simple caching to consistently return the same object. Automatically fixes if an
 * object was recreated with the same id via AJAX or DOM.

 * @param {Mixed} el The id of the node, a DOM Node or an existing Element.
 * @return {Element} The Element object (or null if no matching element was found)
 * @static
 * @member Ext.Element
 * @method get
 */
El.get = function(el){
    var ex,
        elm,
        id;
    if(!el){ return null; }
    if (typeof el == "string") { // element id
        if (!(elm = DOC.getElementById(el))) {
            return null;
        }
        if (EC[el] && EC[el].el) {
            ex = EC[el].el;
            ex.dom = elm;
        } else {
            ex = El.addToCache(new El(elm));
        }
        return ex;
    } else if (el.tagName) { // dom element
        if(!(id = el.id)){
            id = Ext.id(el);
        }
        if (EC[id] && EC[id].el) {
            ex = EC[id].el;
            ex.dom = el;
        } else {
            ex = El.addToCache(new El(el));
        }
        return ex;
    } else if (el instanceof El) {
        if(el != docEl){
            // refresh dom element in case no longer valid,
            // catch case where it hasn't been appended

            // If an el instance is passed, don't pass to getElementById without some kind of id
            if (Ext.isIE && (el.id == undefined || el.id == '')) {
                el.dom = el.dom;
            } else {
                el.dom = DOC.getElementById(el.id) || el.dom;
            }
        }
        return el;
    } else if(el.isComposite) {
        return el;
    } else if(Ext.isArray(el)) {
        return El.select(el);
    } else if(el == DOC) {
        // create a bogus element object representing the document object
        if(!docEl){
            var f = function(){};
            f.prototype = El.prototype;
            docEl = new f();
            docEl.dom = DOC;
        }
        return docEl;
    }
    return null;
};

El.addToCache = function(el, id){
    id = id || el.id;
    EC[id] = {
        el:  el,
        data: {},
        events: {}
    };
    return el;
};

// private method for getting and setting element data
El.data = function(el, key, value){
    el = El.get(el);
    if (!el) {
        return null;
    }
    var c = EC[el.id].data;
    if(arguments.length == 2){
        return c[key];
    }else{
        return (c[key] = value);
    }
};

// private
// Garbage collection - uncache elements/purge listeners on orphaned elements
// so we don't hold a reference and cause the browser to retain them
function garbageCollect(){
    if(!Ext.enableGarbageCollector){
        clearInterval(El.collectorThreadId);
    } else {
        var eid,
            el,
            d,
            o;

        for(eid in EC){
            o = EC[eid];
            if(o.skipGC){
                continue;
            }
            el = o.el;
            d = el.dom;
            // -------------------------------------------------------
            // Determining what is garbage:
            // -------------------------------------------------------
            // !d
            // dom node is null, definitely garbage
            // -------------------------------------------------------
            // !d.parentNode
            // no parentNode == direct orphan, definitely garbage
            // -------------------------------------------------------
            // !d.offsetParent && !document.getElementById(eid)
            // display none elements have no offsetParent so we will
            // also try to look it up by it's id. However, check
            // offsetParent first so we don't do unneeded lookups.
            // This enables collection of elements that are not orphans
            // directly, but somewhere up the line they have an orphan
            // parent.
            // -------------------------------------------------------
            if(!d || !d.parentNode || (!d.offsetParent && !DOC.getElementById(eid))){
                if(Ext.enableListenerCollection){
                    Ext.EventManager.removeAll(d);
                }
                delete EC[eid];
            }
        }
        // Cleanup IE Object leaks
        if (Ext.isIE) {
            var t = {};
            for (eid in EC) {
                t[eid] = EC[eid];
            }
            EC = Ext.elCache = t;
        }
    }
}
El.collectorThreadId = setInterval(garbageCollect, 30000);

var flyFn = function(){};
flyFn.prototype = El.prototype;

// dom is optional
El.Flyweight = function(dom){
    this.dom = dom;
};

El.Flyweight.prototype = new flyFn();
El.Flyweight.prototype.isFlyweight = true;
El._flyweights = {};

/**
 *
Gets the globally shared flyweight Element, with the passed node as the active element. Do not store a reference to this element -
 * the dom node can be overwritten by other code. Shorthand of {@link Ext.Element#fly}

 *
Use this to make one-time references to DOM elements which are not going to be accessed again either by
 * application code, or by Ext's classes. If accessing an element which will be processed regularly, then {@link Ext#get}
 * will be more appropriate to take advantage of the caching provided by the Ext.Element class.

 * @param {String/HTMLElement} el The dom node or id
 * @param {String} named (optional) Allows for creation of named reusable flyweights to prevent conflicts
 * (e.g. internally Ext uses "_global")
 * @return {Element} The shared Element object (or null if no matching element was found)
 * @member Ext.Element
 * @method fly
 */
El.fly = function(el, named){
    var ret = null;
    named = named || '_global';

    if (el = Ext.getDom(el)) {
        (El._flyweights[named] = El._flyweights[named] || new El.Flyweight()).dom = el;
        ret = El._flyweights[named];
    }
    return ret;
};

/**
 * Retrieves Ext.Element objects.
 *
This method does not retrieve {@link Ext.Component Component}s. This method
 * retrieves Ext.Element objects which encapsulate DOM elements. To retrieve a Component by
 * its ID, use {@link Ext.ComponentMgr#get}.

 *
Uses simple caching to consistently return the same object. Automatically fixes if an
 * object was recreated with the same id via AJAX or DOM.

 * Shorthand of {@link Ext.Element#get}
 * @param {Mixed} el The id of the node, a DOM Node or an existing Element.
 * @return {Element} The Element object (or null if no matching element was found)
 * @member Ext
 * @method get
 */
Ext.get = El.get;

/**
 *
Gets the globally shared flyweight Element, with the passed node as the active element. Do not store a reference to this element -
 * the dom node can be overwritten by other code. Shorthand of {@link Ext.Element#fly}

 *
Use this to make one-time references to DOM elements which are not going to be accessed again either by
 * application code, or by Ext's classes. If accessing an element which will be processed regularly, then {@link Ext#get}
 * will be more appropriate to take advantage of the caching provided by the Ext.Element class.

 * @param {String/HTMLElement} el The dom node or id
 * @param {String} named (optional) Allows for creation of named reusable flyweights to prevent conflicts
 * (e.g. internally Ext uses "_global")
 * @return {Element} The shared Element object (or null if no matching element was found)
 * @member Ext
 * @method fly
 */
Ext.fly = El.fly;

// speedy lookup for elements never to box adjust
var noBoxAdjust = Ext.isStrict ? {
    select:1
} : {
    input:1, select:1, textarea:1
};
if(Ext.isIE || Ext.isGecko){
    noBoxAdjust['button'] = 1;
}

})();


The source code

/*!
 * licensing@extjs.com
 * http://www.extjs.com/license
 */
/**
 * @class Ext.Element
 */
Ext.apply(Ext.Element.prototype, function() {
    var GETDOM = Ext.getDom,
        GET = Ext.get,
        DH = Ext.DomHelper;

    return {

/**
         * Inserts (or creates) the passed element (or DomHelper config) as a sibling of this element
         * @param {Mixed/Object/Array} el The id, element to insert or a DomHelper config to create and insert *or* an array of any of those.
         * @param {String} where (optional) 'before' or 'after' defaults to before
         * @param {Boolean} returnDom (optional) True to return the raw DOM element instead of Ext.Element
         * @return {Ext.Element} The inserted Element. If an array is passed, the last inserted element is returned.
         */
        insertSibling: function(el, where, returnDom){
            var me = this,
                rt,
                isAfter = (where || 'before').toLowerCase() == 'after',
                insertEl;

            if(Ext.isArray(el)){
                insertEl = me;
                Ext.each(el, function(e) {
                    rt = Ext.fly(insertEl, '_internal').insertSibling(e, where, returnDom);
                    if(isAfter){
                        insertEl = rt;
                    }
                });
                return rt;
            }

            el = el || {};

            if(el.nodeType || el.dom){
                rt = me.dom.parentNode.insertBefore(GETDOM(el), isAfter ? me.dom.nextSibling : me.dom);
                if (!returnDom) {
                    rt = GET(rt);
                }
            }else{
                if (isAfter && !me.dom.nextSibling) {
                    rt = DH.append(me.dom.parentNode, el, !returnDom);
                } else {
                    rt = DH[isAfter ? 'insertAfter' : 'insertBefore'](me.dom, el, !returnDom);
                }
            }
            return rt;
        }
    };
}());


The source code

/*!
 * licensing@extjs.com
 * http://www.extjs.com/license
 */
/**
 * @class Ext.Element
 */
Ext.Element.addMethods(
function() {
    var GETDOM = Ext.getDom,
        GET = Ext.get,
        DH = Ext.DomHelper;

    return {

/**
         * Appends the passed element(s) to this element
         * @param {String/HTMLElement/Array/Element/CompositeElement} el
         * @return {Ext.Element} this
         */
        appendChild: function(el){
            return GET(el).appendTo(this);
        },

/**
         * Appends this element to the passed element
         * @param {Mixed} el The new parent element
         * @return {Ext.Element} this
         */
        appendTo: function(el){
            GETDOM(el).appendChild(this.dom);
            return this;
        },

/**
         * Inserts this element before the passed element in the DOM
         * @param {Mixed} el The element before which this element will be inserted
         * @return {Ext.Element} this
         */
        insertBefore: function(el){
            (el = GETDOM(el)).parentNode.insertBefore(this.dom, el);
            return this;
        },

/**
         * Inserts this element after the passed element in the DOM
         * @param {Mixed} el The element to insert after
         * @return {Ext.Element} this
         */
        insertAfter: function(el){
            (el = GETDOM(el)).parentNode.insertBefore(this.dom, el.nextSibling);
            return this;
        },

/**
         * Inserts (or creates) an element (or DomHelper config) as the first child of this element
         * @param {Mixed/Object} el The id or element to insert or a DomHelper config to create and insert
         * @return {Ext.Element} The new child
         */
        insertFirst: function(el, returnDom){
            el = el || {};
            if(el.nodeType || el.dom || typeof el == 'string'){ // element
                el = GETDOM(el);
                this.dom.insertBefore(el, this.dom.firstChild);
                return !returnDom ? GET(el) : el;
            }else{ // dh config
                return this.createChild(el, this.dom.firstChild, returnDom);
            }
        },

/**
         * Replaces the passed element with this element
         * @param {Mixed} el The element to replace
         * @return {Ext.Element} this
         */
        replace: function(el){
            el = GET(el);
            this.insertBefore(el);
            el.remove();
            return this;
        },

/**
         * Replaces this element with the passed element
         * @param {Mixed/Object} el The new element or a DomHelper config of an element to create
         * @return {Ext.Element} this
         */
        replaceWith: function(el){
            var me = this;

            if(el.nodeType || el.dom || typeof el == 'string'){
                el = GETDOM(el);
                me.dom.parentNode.insertBefore(el, me.dom);
            }else{
                el = DH.insertBefore(me.dom, el);
            }

            delete Ext.elCache[me.id];
            Ext.removeNode(me.dom);
            me.id = Ext.id(me.dom = el);
            Ext.Element.addToCache(me.isFlyweight ? new Ext.Element(me.dom) : me);
            return me;
        },

/**
         * Creates the passed DomHelper config and appends it to this element or optionally inserts it before the passed child element.
         * @param {Object} config DomHelper element config object.  If no tag is specified (e.g., {tag:'input'}) then a div will be
         * automatically generated with the specified attributes.
         * @param {HTMLElement} insertBefore (optional) a child element of this element
         * @param {Boolean} returnDom (optional) true to return the dom node instead of creating an Element
         * @return {Ext.Element} The new child element
         */
        createChild: function(config, insertBefore, returnDom){
            config = config || {tag:'div'};
            return insertBefore ?
                   DH.insertBefore(insertBefore, config, returnDom !== true) :
                   DH[!this.dom.firstChild ? 'overwrite' : 'append'](this.dom, config,  returnDom !== true);
        },

/**
         * Creates and wraps this element with another element
         * @param {Object} config (optional) DomHelper element config object for the wrapper element or null for an empty div
         * @param {Boolean} returnDom (optional) True to return the raw DOM element instead of Ext.Element
         * @return {HTMLElement/Element} The newly created wrapper element
         */
        wrap: function(config, returnDom){
            var newEl = DH.insertBefore(this.dom, config || {tag: "div"}, !returnDom);
            newEl.dom ? newEl.dom.appendChild(this.dom) : newEl.appendChild(this.dom);
            return newEl;
        },

/**
         * Inserts an html fragment into this element
         * @param {String} where Where to insert the html in relation to this element - beforeBegin, afterBegin, beforeEnd, afterEnd.
         * @param {String} html The HTML fragment
         * @param {Boolean} returnEl (optional) True to return an Ext.Element (defaults to false)
         * @return {HTMLElement/Ext.Element} The inserted node (or nearest related if more than 1 inserted)
         */
        insertHtml : function(where, html, returnEl){
            var el = DH.insertHtml(where, this.dom, html);
            return returnEl ? Ext.get(el) : el;
        }
    }
}());


The source code

/*!
 * licensing@extjs.com
 * http://www.extjs.com/license
 */
/**
 * @class Ext.Element
 */
Ext.Element.addMethods({

/**
     * Convenience method for constructing a KeyMap
     * @param {Number/Array/Object/String} key Either a string with the keys to listen for, the numeric key code, array of key codes or an object with the following options:
     * {key: (number or array), shift: (true/false), ctrl: (true/false), alt: (true/false)}
     * @param {Function} fn The function to call
     * @param {Object} scope (optional) The scope (this reference) in which the specified function is executed. Defaults to this Element.
     * @return {Ext.KeyMap} The KeyMap created
     */
    addKeyListener : function(key, fn, scope){
        var config;
        if(!Ext.isObject(key) || Ext.isArray(key)){
            config = {
                key: key,
                fn: fn,
                scope: scope
            };
        }else{
            config = {
                key : key.key,
                shift : key.shift,
                ctrl : key.ctrl,
                alt : key.alt,
                fn: fn,
                scope: scope
            };
        }
        return new Ext.KeyMap(this, config);
    },

/**
     * Creates a KeyMap for this element
     * @param {Object} config The KeyMap config. See {@link Ext.KeyMap} for more details
     * @return {Ext.KeyMap} The KeyMap created
     */
    addKeyMap : function(config){
        return new Ext.KeyMap(this, config);
    }
});


The source code

/*!
 * licensing@extjs.com
 * http://www.extjs.com/license
 */
/**
 * @class Ext.Element
 */
Ext.Element.addMethods({

/**
     * Measures the element's content height and updates height to match. Note: this function uses setTimeout so
     * the new height may not be available immediately.
     * @param {Boolean} animate (optional) Animate the transition (defaults to false)
     * @param {Float} duration (optional) Length of the animation in seconds (defaults to .35)
     * @param {Function} onComplete (optional) Function to call when animation completes
     * @param {String} easing (optional) Easing method to use (defaults to easeOut)
     * @return {Ext.Element} this
     */
    autoHeight : function(animate, duration, onComplete, easing){
        var oldHeight = this.getHeight();
        this.clip();
        this.setHeight(1); // force clipping
        setTimeout(function(){
            var height = parseInt(this.dom.scrollHeight, 10); // parseInt for Safari
            if(!animate){
                this.setHeight(height);
                this.unclip();
                if(typeof onComplete == "function"){
                    onComplete();
                }
            }else{
                this.setHeight(oldHeight); // restore original height
                this.setHeight(height, animate, duration, function(){
                    this.unclip();
                    if(typeof onComplete == "function") onComplete();
                }.createDelegate(this), easing);
            }
        }.createDelegate(this), 0);
        return this;
    }
});


The source code

/*!
 * licensing@extjs.com
 * http://www.extjs.com/license
 */
/**
 * @class Ext.Element
 */
Ext.Element.addMethods({

/**
     * Sets the element's box. Use getBox() on another element to get a box obj. If animate is true then width, height, x and y will be animated concurrently.
     * @param {Object} box The box to fill {x, y, width, height}
     * @param {Boolean} adjust (optional) Whether to adjust for box-model issues automatically
     * @param {Boolean/Object} animate (optional) true for the default animation or a standard Element animation config object
     * @return {Ext.Element} this
     */
    setBox : function(box, adjust, animate){
        var me = this,
            w = box.width,
            h = box.height;
        if((adjust && !me.autoBoxAdjust) && !me.isBorderBox()){
           w -= (me.getBorderWidth("lr") + me.getPadding("lr"));
           h -= (me.getBorderWidth("tb") + me.getPadding("tb"));
        }
        me.setBounds(box.x, box.y, w, h, me.animTest.call(me, arguments, animate, 2));
        return me;
    },

/**
     * Return an object defining the area of this Element which can be passed to {@link #setBox} to
     * set another Element's size/location to match this element.
     * @param {Boolean} contentBox (optional) If true a box for the content of the element is returned.
     * @param {Boolean} local (optional) If true the element's left and top are returned instead of page x/y.
     * @return {Object} box An object in the format

{
    x: <Element's X position>,
    y: <Element's Y position>,
    width: <Element's width>,
    height: <Element's height>,
    bottom: <Element's lower bound>,
    right: <Element's rightmost bound>
}

     * The returned object may also be addressed as an Array where index 0 contains the X position
     * and index 1 contains the Y position. So the result may also be used for {@link #setXY}
     */
    getBox : function(contentBox, local) {
        var me = this,
            xy,
            left,
            top,
            getBorderWidth = me.getBorderWidth,
            getPadding = me.getPadding,
            l,
            r,
            t,
            b;
        if(!local){
            xy = me.getXY();
        }else{
            left = parseInt(me.getStyle("left"), 10) || 0;
            top = parseInt(me.getStyle("top"), 10) || 0;
            xy = [left, top];
        }
        var el = me.dom, w = el.offsetWidth, h = el.offsetHeight, bx;
        if(!contentBox){
            bx = {x: xy[0], y: xy[1], 0: xy[0], 1: xy[1], width: w, height: h};
        }else{
            l = getBorderWidth.call(me, "l") + getPadding.call(me, "l");
            r = getBorderWidth.call(me, "r") + getPadding.call(me, "r");
            t = getBorderWidth.call(me, "t") + getPadding.call(me, "t");
            b = getBorderWidth.call(me, "b") + getPadding.call(me, "b");
            bx = {x: xy[0]+l, y: xy[1]+t, 0: xy[0]+l, 1: xy[1]+t, width: w-(l+r), height: h-(t+b)};
        }
        bx.right = bx.x + bx.width;
        bx.bottom = bx.y + bx.height;
        return bx;
    },

/**
     * Move this element relative to its current position.
     * @param {String} direction Possible values are: "l" (or "left"), "r" (or "right"), "t" (or "top", or "up"), "b" (or "bottom", or "down").
     * @param {Number} distance How far to move the element in pixels
     * @param {Boolean/Object} animate (optional) true for the default animation or a standard Element animation config object
     * @return {Ext.Element} this
     */
     move : function(direction, distance, animate){
        var me = this,
            xy = me.getXY(),
            x = xy[0],
            y = xy[1],
            left = [x - distance, y],
            right = [x + distance, y],
            top = [x, y - distance],
            bottom = [x, y + distance],
               hash = {
                l :	left,
                left : left,
                r : right,
                right : right,
                t : top,
                top : top,
                up : top,
                b : bottom,
                bottom : bottom,
                down : bottom
            };

         direction = direction.toLowerCase();
         me.moveTo(hash[direction][0], hash[direction][1], me.animTest.call(me, arguments, animate, 2));
    },

/**
     * Quick set left and top adding default units
     * @param {String} left The left CSS property value
     * @param {String} top The top CSS property value
     * @return {Ext.Element} this
     */
     setLeftTop : function(left, top){
        var me = this,
            style = me.dom.style;
        style.left = me.addUnits(left);
        style.top = me.addUnits(top);
        return me;
    },

/**
     * Returns the region of the given element.
     * The element must be part of the DOM tree to have a region (display:none or elements not appended return false).
     * @return {Region} A Ext.lib.Region containing "top, left, bottom, right" member data.
     */
    getRegion : function(){
        return Ext.lib.Dom.getRegion(this.dom);
    },

/**
     * Sets the element's position and size in one shot. If animation is true then width, height, x and y will be animated concurrently.
     * @param {Number} x X value for new position (coordinates are page-based)
     * @param {Number} y Y value for new position (coordinates are page-based)
     * @param {Mixed} width The new width. This may be one of:

     *
  • A Number specifying the new width in this Element's {@link #defaultUnit}s (by default, pixels)
    •
     *
  • A String used to set the CSS width style. Animation may not be used.
     *

     * @param {Mixed} height The new height. This may be one of:

     *
  • A Number specifying the new height in this Element's {@link #defaultUnit}s (by default, pixels)
    •
     *
  • A String used to set the CSS height style. Animation may not be used.
    •
     *

     * @param {Boolean/Object} animate (optional) true for the default animation or a standard Element animation config object
     * @return {Ext.Element} this
     */
    setBounds : function(x, y, width, height, animate){
        var me = this;
        if (!animate || !me.anim) {
            me.setSize(width, height);
            me.setLocation(x, y);
        } else {
            me.anim({points: {to: [x, y]},
                     width: {to: me.adjustWidth(width)},
                     height: {to: me.adjustHeight(height)}},
                     me.preanim(arguments, 4),
                     'motion');
        }
        return me;
    },

/**
     * Sets the element's position and size the specified region. If animation is true then width, height, x and y will be animated concurrently.
     * @param {Ext.lib.Region} region The region to fill
     * @param {Boolean/Object} animate (optional) true for the default animation or a standard Element animation config object
     * @return {Ext.Element} this
     */
    setRegion : function(region, animate) {
        return this.setBounds(region.left, region.top, region.right-region.left, region.bottom-region.top, this.animTest.call(this, arguments, animate, 1));
    }
});


The source code

/*!
 * licensing@extjs.com
 * http://www.extjs.com/license
 */
/**
 * @class Ext.Element
 */
(function(){
var D = Ext.lib.Dom,
        LEFT = "left",
        RIGHT = "right",
        TOP = "top",
        BOTTOM = "bottom",
        POSITION = "position",
        STATIC = "static",
        RELATIVE = "relative",
        AUTO = "auto",
        ZINDEX = "z-index";

Ext.Element.addMethods({

/**
      * Gets the current X position of the element based on page coordinates.  Element must be part of the DOM tree to have page coordinates (display:none or elements not appended return false).
      * @return {Number} The X position of the element
      */
    getX : function(){
        return D.getX(this.dom);
    },

/**
      * Gets the current Y position of the element based on page coordinates.  Element must be part of the DOM tree to have page coordinates (display:none or elements not appended return false).
      * @return {Number} The Y position of the element
      */
    getY : function(){
        return D.getY(this.dom);
    },

/**
      * Gets the current position of the element based on page coordinates.  Element must be part of the DOM tree to have page coordinates (display:none or elements not appended return false).
      * @return {Array} The XY position of the element
      */
    getXY : function(){
        return D.getXY(this.dom);
    },

/**
      * Returns the offsets of this element from the passed element. Both element must be part of the DOM tree and not have display:none to have page coordinates.
      * @param {Mixed} element The element to get the offsets from.
      * @return {Array} The XY page offsets (e.g. [100, -200])
      */
    getOffsetsTo : function(el){
        var o = this.getXY(),
            e = Ext.fly(el, '_internal').getXY();
        return [o[0]-e[0],o[1]-e[1]];
    },

/**
     * Sets the X position of the element based on page coordinates.  Element must be part of the DOM tree to have page coordinates (display:none or elements not appended return false).
     * @param {Number} The X position of the element
     * @param {Boolean/Object} animate (optional) True for the default animation, or a standard Element animation config object
     * @return {Ext.Element} this
     */
    setX : function(x, animate){
        return this.setXY([x, this.getY()], this.animTest(arguments, animate, 1));
    },

/**
     * Sets the Y position of the element based on page coordinates.  Element must be part of the DOM tree to have page coordinates (display:none or elements not appended return false).
     * @param {Number} The Y position of the element
     * @param {Boolean/Object} animate (optional) True for the default animation, or a standard Element animation config object
     * @return {Ext.Element} this
     */
    setY : function(y, animate){
        return this.setXY([this.getX(), y], this.animTest(arguments, animate, 1));
    },

/**
     * Sets the element's left position directly using CSS style (instead of {@link #setX}).
     * @param {String} left The left CSS property value
     * @return {Ext.Element} this
     */
    setLeft : function(left){
        this.setStyle(LEFT, this.addUnits(left));
        return this;
    },

/**
     * Sets the element's top position directly using CSS style (instead of {@link #setY}).
     * @param {String} top The top CSS property value
     * @return {Ext.Element} this
     */
    setTop : function(top){
        this.setStyle(TOP, this.addUnits(top));
        return this;
    },

/**
     * Sets the element's CSS right style.
     * @param {String} right The right CSS property value
     * @return {Ext.Element} this
     */
    setRight : function(right){
        this.setStyle(RIGHT, this.addUnits(right));
        return this;
    },

/**
     * Sets the element's CSS bottom style.
     * @param {String} bottom The bottom CSS property value
     * @return {Ext.Element} this
     */
    setBottom : function(bottom){
        this.setStyle(BOTTOM, this.addUnits(bottom));
        return this;
    },

/**
     * Sets the position of the element in page coordinates, regardless of how the element is positioned.
     * The element must be part of the DOM tree to have page coordinates (display:none or elements not appended return false).
     * @param {Array} pos Contains X & Y [x, y] values for new position (coordinates are page-based)
     * @param {Boolean/Object} animate (optional) True for the default animation, or a standard Element animation config object
     * @return {Ext.Element} this
     */
    setXY : function(pos, animate){
        var me = this;
        if(!animate || !me.anim){
            D.setXY(me.dom, pos);
        }else{
            me.anim({points: {to: pos}}, me.preanim(arguments, 1), 'motion');
        }
        return me;
    },

/**
     * Sets the position of the element in page coordinates, regardless of how the element is positioned.
     * The element must be part of the DOM tree to have page coordinates (display:none or elements not appended return false).
     * @param {Number} x X value for new position (coordinates are page-based)
     * @param {Number} y Y value for new position (coordinates are page-based)
     * @param {Boolean/Object} animate (optional) True for the default animation, or a standard Element animation config object
     * @return {Ext.Element} this
     */
    setLocation : function(x, y, animate){
        return this.setXY([x, y], this.animTest(arguments, animate, 2));
    },

/**
     * Sets the position of the element in page coordinates, regardless of how the element is positioned.
     * The element must be part of the DOM tree to have page coordinates (display:none or elements not appended return false).
     * @param {Number} x X value for new position (coordinates are page-based)
     * @param {Number} y Y value for new position (coordinates are page-based)
     * @param {Boolean/Object} animate (optional) True for the default animation, or a standard Element animation config object
     * @return {Ext.Element} this
     */
    moveTo : function(x, y, animate){
        return this.setXY([x, y], this.animTest(arguments, animate, 2));
    },

/**
     * Gets the left X coordinate
     * @param {Boolean} local True to get the local css position instead of page coordinate
     * @return {Number}
     */
    getLeft : function(local){
        return !local ? this.getX() : parseInt(this.getStyle(LEFT), 10) || 0;
    },

/**
     * Gets the right X coordinate of the element (element X position + element width)
     * @param {Boolean} local True to get the local css position instead of page coordinate
     * @return {Number}
     */
    getRight : function(local){
        var me = this;
        return !local ? me.getX() + me.getWidth() : (me.getLeft(true) + me.getWidth()) || 0;
    },

/**
     * Gets the top Y coordinate
     * @param {Boolean} local True to get the local css position instead of page coordinate
     * @return {Number}
     */
    getTop : function(local) {
        return !local ? this.getY() : parseInt(this.getStyle(TOP), 10) || 0;
    },

/**
     * Gets the bottom Y coordinate of the element (element Y position + element height)
     * @param {Boolean} local True to get the local css position instead of page coordinate
     * @return {Number}
     */
    getBottom : function(local){
        var me = this;
        return !local ? me.getY() + me.getHeight() : (me.getTop(true) + me.getHeight()) || 0;
    },

/**
    * Initializes positioning on this element. If a desired position is not passed, it will make the
    * the element positioned relative IF it is not already positioned.
    * @param {String} pos (optional) Positioning to use "relative", "absolute" or "fixed"
    * @param {Number} zIndex (optional) The zIndex to apply
    * @param {Number} x (optional) Set the page X position
    * @param {Number} y (optional) Set the page Y position
    */
    position : function(pos, zIndex, x, y){
        var me = this;

        if(!pos && me.isStyle(POSITION, STATIC)){
            me.setStyle(POSITION, RELATIVE);
        } else if(pos) {
            me.setStyle(POSITION, pos);
        }
        if(zIndex){
            me.setStyle(ZINDEX, zIndex);
        }
        if(x || y) me.setXY([x || false, y || false]);
    },

/**
    * Clear positioning back to the default when the document was loaded
    * @param {String} value (optional) The value to use for the left,right,top,bottom, defaults to '' (empty string). You could use 'auto'.
    * @return {Ext.Element} this
     */
    clearPositioning : function(value){
        value = value || '';
        this.setStyle({
            left : value,
            right : value,
            top : value,
            bottom : value,
            "z-index" : "",
            position : STATIC
        });
        return this;
    },

/**
    * Gets an object with all CSS positioning properties. Useful along with setPostioning to get
    * snapshot before performing an update and then restoring the element.
    * @return {Object}
    */
    getPositioning : function(){
        var l = this.getStyle(LEFT);
        var t = this.getStyle(TOP);
        return {
            "position" : this.getStyle(POSITION),
            "left" : l,
            "right" : l ? "" : this.getStyle(RIGHT),
            "top" : t,
            "bottom" : t ? "" : this.getStyle(BOTTOM),
            "z-index" : this.getStyle(ZINDEX)
        };
    },

/**
    * Set positioning with an object returned by getPositioning().
    * @param {Object} posCfg
    * @return {Ext.Element} this
     */
    setPositioning : function(pc){
        var me = this,
            style = me.dom.style;

        me.setStyle(pc);

        if(pc.right == AUTO){
            style.right = "";
        }
        if(pc.bottom == AUTO){
            style.bottom = "";
        }

        return me;
    },

/**
     * Translates the passed page coordinates into left/top css values for this element
     * @param {Number/Array} x The page x or an array containing [x, y]
     * @param {Number} y (optional) The page y, required if x is not an array
     * @return {Object} An object with left and top properties. e.g. {left: (value), top: (value)}
     */
    translatePoints : function(x, y){
        y = isNaN(x[1]) ? y : x[1];
        x = isNaN(x[0]) ? x : x[0];
        var me = this,
            relative = me.isStyle(POSITION, RELATIVE),
            o = me.getXY(),
            l = parseInt(me.getStyle(LEFT), 10),
            t = parseInt(me.getStyle(TOP), 10);

        l = !isNaN(l) ? l : (relative ? 0 : me.dom.offsetLeft);
        t = !isNaN(t) ? t : (relative ? 0 : me.dom.offsetTop);

        return {left: (x - o[0] + l), top: (y - o[1] + t)};
    },

    animTest : function(args, animate, i) {
        return !!animate && this.preanim ? this.preanim(args, i) : false;
    }
});
})();


The source code

/*!
 * licensing@extjs.com
 * http://www.extjs.com/license
 */
/**
 * @class Ext.Element
 */
Ext.Element.addMethods({

/**
     * Scrolls this element the specified scroll point. It does NOT do bounds checking so if you scroll to a weird value it will try to do it. For auto bounds checking, use scroll().
     * @param {String} side Either "left" for scrollLeft values or "top" for scrollTop values.
     * @param {Number} value The new scroll value
     * @param {Boolean/Object} animate (optional) true for the default animation or a standard Element animation config object
     * @return {Element} this
     */
    scrollTo : function(side, value, animate){
        var top = /top/i.test(side), //check if we're scrolling top or left
            me = this,
            dom = me.dom,
            prop;
        if (!animate || !me.anim) {
            prop = 'scroll' + (top ? 'Top' : 'Left'), // just setting the value, so grab the direction
            dom[prop] = value;
        }else{
            prop = 'scroll' + (top ? 'Left' : 'Top'), // if scrolling top, we need to grab scrollLeft, if left, scrollTop
            me.anim({scroll: {to: top ? [dom[prop], value] : [value, dom[prop]]}},
                     me.preanim(arguments, 2), 'scroll');
        }
        return me;
    },

/**
     * Scrolls this element into view within the passed container.
     * @param {Mixed} container (optional) The container element to scroll (defaults to document.body).  Should be a
     * string (id), dom node, or Ext.Element.
     * @param {Boolean} hscroll (optional) False to disable horizontal scroll (defaults to true)
     * @return {Ext.Element} this
     */
    scrollIntoView : function(container, hscroll){
        var c = Ext.getDom(container) || Ext.getBody().dom,
            el = this.dom,
            o = this.getOffsetsTo(c),
            l = o[0] + c.scrollLeft,
            t = o[1] + c.scrollTop,
            b = t + el.offsetHeight,
            r = l + el.offsetWidth,
            ch = c.clientHeight,
            ct = parseInt(c.scrollTop, 10),
            cl = parseInt(c.scrollLeft, 10),
            cb = ct + ch,
            cr = cl + c.clientWidth;

        if (el.offsetHeight > ch || t < ct) {
            c.scrollTop = t;
        } else if (b > cb){
            c.scrollTop = b-ch;
        }
        c.scrollTop = c.scrollTop; // corrects IE, other browsers will ignore

        if(hscroll !== false){
            if(el.offsetWidth > c.clientWidth || l < cl){
                c.scrollLeft = l;
            }else if(r > cr){
                c.scrollLeft = r - c.clientWidth;
            }
            c.scrollLeft = c.scrollLeft;
        }
        return this;
    },

    // private
    scrollChildIntoView : function(child, hscroll){
        Ext.fly(child, '_scrollChildIntoView').scrollIntoView(this, hscroll);
    },

/**
     * Scrolls this element the specified direction. Does bounds checking to make sure the scroll is
     * within this element's scrollable range.
     * @param {String} direction Possible values are: "l" (or "left"), "r" (or "right"), "t" (or "top", or "up"), "b" (or "bottom", or "down").
     * @param {Number} distance How far to scroll the element in pixels
     * @param {Boolean/Object} animate (optional) true for the default animation or a standard Element animation config object
     * @return {Boolean} Returns true if a scroll was triggered or false if the element
     * was scrolled as far as it could go.
     */
     scroll : function(direction, distance, animate){
         if(!this.isScrollable()){
             return;
         }
         var el = this.dom,
            l = el.scrollLeft, t = el.scrollTop,
            w = el.scrollWidth, h = el.scrollHeight,
            cw = el.clientWidth, ch = el.clientHeight,
            scrolled = false, v,
            hash = {
                l: Math.min(l + distance, w-cw),
                r: v = Math.max(l - distance, 0),
                t: Math.max(t - distance, 0),
                b: Math.min(t + distance, h-ch)
            };
            hash.d = hash.b;
            hash.u = hash.t;

         direction = direction.substr(0, 1);
         if((v = hash[direction]) > -1){
            scrolled = true;
            this.scrollTo(direction == 'l' || direction == 'r' ? 'left' : 'top', v, this.preanim(arguments, 2));
         }
         return scrolled;
    }
});


The source code

/*!
 * licensing@extjs.com
 * http://www.extjs.com/license
 */
/**
 * @class Ext.Element
 */
Ext.Element.addMethods({

/**
     * Returns true if this element is scrollable.
     * @return {Boolean}
     */
    isScrollable : function(){
        var dom = this.dom;
        return dom.scrollHeight > dom.clientHeight || dom.scrollWidth > dom.clientWidth;
    },

/**
     * Scrolls this element the specified scroll point. It does NOT do bounds checking so if you scroll to a weird value it will try to do it. For auto bounds checking, use scroll().
     * @param {String} side Either "left" for scrollLeft values or "top" for scrollTop values.
     * @param {Number} value The new scroll value.
     * @return {Element} this
     */
    scrollTo : function(side, value){
        this.dom["scroll" + (/top/i.test(side) ? "Top" : "Left")] = value;
        return this;
    },

/**
     * Returns the current scroll position of the element.
     * @return {Object} An object containing the scroll position in the format {left: (scrollLeft), top: (scrollTop)}
     */
    getScroll : function(){
        var d = this.dom,
            doc = document,
            body = doc.body,
            docElement = doc.documentElement,
            l,
            t,
            ret;

        if(d == doc || d == body){
            if(Ext.isIE && Ext.isStrict){
                l = docElement.scrollLeft;
                t = docElement.scrollTop;
            }else{
                l = window.pageXOffset;
                t = window.pageYOffset;
            }
            ret = {left: l || (body ? body.scrollLeft : 0), top: t || (body ? body.scrollTop : 0)};
        }else{
            ret = {left: d.scrollLeft, top: d.scrollTop};
        }
        return ret;
    }
});


The source code

/*!
 * licensing@extjs.com
 * http://www.extjs.com/license
 */
/**
 * @class Ext.Element
 */

// special markup used throughout Ext when box wrapping elements
Ext.Element.boxMarkup = '
';

Ext.Element.addMethods(function(){
    var INTERNAL = "_internal",
        pxMatch = /(\d+\.?\d+)px/;
    return {

/**
         * More flexible version of {@link #setStyle} for setting style properties.
         * @param {String/Object/Function} styles A style specification string, e.g. "width:100px", or object in the form {width:"100px"}, or
         * a function which returns such a specification.
         * @return {Ext.Element} this
         */
        applyStyles : function(style){
            Ext.DomHelper.applyStyles(this.dom, style);
            return this;
        },

/**
         * Returns an object with properties matching the styles requested.
         * For example, el.getStyles('color', 'font-size', 'width') might return
         * {'color': '#FFFFFF', 'font-size': '13px', 'width': '100px'}.
         * @param {String} style1 A style name
         * @param {String} style2 A style name
         * @param {String} etc.
         * @return {Object} The style object
         */
        getStyles : function(){
            var ret = {};
            Ext.each(arguments, function(v) {
               ret[v] = this.getStyle(v);
            },
            this);
            return ret;
        },

        // private  ==> used by ext full
        setOverflow : function(v){
            var dom = this.dom;
            if(v=='auto' && Ext.isMac && Ext.isGecko2){ // work around stupid FF 2.0/Mac scroll bar bug
                dom.style.overflow = 'hidden';
                (function(){dom.style.overflow = 'auto';}).defer(1);
            }else{
                dom.style.overflow = v;
            }
        },

/**
        *
Wraps the specified element with a special 9 element markup/CSS block that renders by default as
        * a gray container with a gradient background, rounded corners and a 4-way shadow.

        *
This special markup is used throughout Ext when box wrapping elements ({@link Ext.Button},
        * {@link Ext.Panel} when {@link Ext.Panel#frame frame=true}, {@link Ext.Window}).  The markup
        * is of this form:

        *

    Ext.Element.boxMarkup =
    '<div class="{0}-tl"><div class="{0}-tr"><div class="{0}-tc"></div></div></div>
     <div class="{0}-ml"><div class="{0}-mr"><div class="{0}-mc"></div></div></div>
     <div class="{0}-bl"><div class="{0}-br"><div class="{0}-bc"></div></div></div>';
        *

        *
Example usage:

        *

    // Basic box wrap
    Ext.get("foo").boxWrap();

    // You can also add a custom class and use CSS inheritance rules to customize the box look.
    // 'x-box-blue' is a built-in alternative -- look at the related CSS definitions as an example
    // for how to create a custom box wrap style.
    Ext.get("foo").boxWrap().addClass("x-box-blue");
        *

        * @param {String} class (optional) A base CSS class to apply to the containing wrapper element
        * (defaults to 'x-box'). Note that there are a number of CSS rules that are dependent on
        * this name to make the overall effect work, so if you supply an alternate base class, make sure you
        * also supply all of the necessary rules.
        * @return {Ext.Element} The outermost wrapping element of the created box structure.
        */
        boxWrap : function(cls){
            cls = cls || 'x-box';
            var el = Ext.get(this.insertHtml("beforeBegin", "
" + String.format(Ext.Element.boxMarkup, cls) + "
"));        //String.format('
'+Ext.Element.boxMarkup+'
', cls)));
            Ext.DomQuery.selectNode('.' + cls + '-mc', el.dom).appendChild(this.dom);
            return el;
        },

/**
         * Set the size of this Element. If animation is true, both width and height will be animated concurrently.
         * @param {Mixed} width The new width. This may be one of:

         *
  • A Number specifying the new width in this Element's {@link #defaultUnit}s (by default, pixels).
    •
         *
  • A String used to set the CSS width style. Animation may not be used.
         *
  • A size object in the format {width: widthValue, height: heightValue}.
    •
         *

         * @param {Mixed} height The new height. This may be one of:

         *
  • A Number specifying the new height in this Element's {@link #defaultUnit}s (by default, pixels).
    •
         *
  • A String used to set the CSS height style. Animation may not be used.
    •
         *

         * @param {Boolean/Object} animate (optional) true for the default animation or a standard Element animation config object
         * @return {Ext.Element} this
         */
        setSize : function(width, height, animate){
            var me = this;
            if(Ext.isObject(width)){ // in case of object from getSize()
                height = width.height;
                width = width.width;
            }
            width = me.adjustWidth(width);
            height = me.adjustHeight(height);
            if(!animate || !me.anim){
                me.dom.style.width = me.addUnits(width);
                me.dom.style.height = me.addUnits(height);
            }else{
                me.anim({width: {to: width}, height: {to: height}}, me.preanim(arguments, 2));
            }
            return me;
        },

/**
         * Returns either the offsetHeight or the height of this element based on CSS height adjusted by padding or borders
         * when needed to simulate offsetHeight when offsets aren't available. This may not work on display:none elements
         * if a height has not been set using CSS.
         * @return {Number}
         */
        getComputedHeight : function(){
            var me = this,
                h = Math.max(me.dom.offsetHeight, me.dom.clientHeight);
            if(!h){
                h = parseFloat(me.getStyle('height')) || 0;
                if(!me.isBorderBox()){
                    h += me.getFrameWidth('tb');
                }
            }
            return h;
        },

/**
         * Returns either the offsetWidth or the width of this element based on CSS width adjusted by padding or borders
         * when needed to simulate offsetWidth when offsets aren't available. This may not work on display:none elements
         * if a width has not been set using CSS.
         * @return {Number}
         */
        getComputedWidth : function(){
            var w = Math.max(this.dom.offsetWidth, this.dom.clientWidth);
            if(!w){
                w = parseFloat(this.getStyle('width')) || 0;
                if(!this.isBorderBox()){
                    w += this.getFrameWidth('lr');
                }
            }
            return w;
        },

/**
         * Returns the sum width of the padding and borders for the passed "sides". See getBorderWidth()
         for more information about the sides.
         * @param {String} sides
         * @return {Number}
         */
        getFrameWidth : function(sides, onlyContentBox){
            return onlyContentBox && this.isBorderBox() ? 0 : (this.getPadding(sides) + this.getBorderWidth(sides));
        },

/**
         * Sets up event handlers to add and remove a css class when the mouse is over this element
         * @param {String} className
         * @return {Ext.Element} this
         */
        addClassOnOver : function(className){
            this.hover(
                function(){
                    Ext.fly(this, INTERNAL).addClass(className);
                },
                function(){
                    Ext.fly(this, INTERNAL).removeClass(className);
                }
            );
            return this;
        },

/**
         * Sets up event handlers to add and remove a css class when this element has the focus
         * @param {String} className
         * @return {Ext.Element} this
         */
        addClassOnFocus : function(className){
            this.on("focus", function(){
                Ext.fly(this, INTERNAL).addClass(className);
            }, this.dom);
            this.on("blur", function(){
                Ext.fly(this, INTERNAL).removeClass(className);
            }, this.dom);
            return this;
        },

/**
         * Sets up event handlers to add and remove a css class when the mouse is down and then up on this element (a click effect)
         * @param {String} className
         * @return {Ext.Element} this
         */
        addClassOnClick : function(className){
            var dom = this.dom;
            this.on("mousedown", function(){
                Ext.fly(dom, INTERNAL).addClass(className);
                var d = Ext.getDoc(),
                    fn = function(){
                        Ext.fly(dom, INTERNAL).removeClass(className);
                        d.removeListener("mouseup", fn);
                    };
                d.on("mouseup", fn);
            });
            return this;
        },

/**
         *
Returns the dimensions of the element available to lay content out in.

         *
If the element (or any ancestor element) has CSS style display : none, the dimensions will be zero.

         * example:

        var vpSize = Ext.getBody().getViewSize();

        // all Windows created afterwards will have a default value of 90% height and 95% width
        Ext.Window.override({
            width: vpSize.width * 0.9,
            height: vpSize.height * 0.95
        });
        // To handle window resizing you would have to hook onto onWindowResize.
        *

        *
        * getViewSize utilizes clientHeight/clientWidth which excludes sizing of scrollbars.
        * To obtain the size including scrollbars, use getStyleSize
        *
        * Sizing of the document body is handled at the adapter level which handles special cases for IE and strict modes, etc.
        */

        getViewSize : function(){
            var doc = document,
                d = this.dom,
                isDoc = (d == doc || d == doc.body);

            // If the body, use Ext.lib.Dom
            if (isDoc) {
                var extdom = Ext.lib.Dom;
                return {
                    width : extdom.getViewWidth(),
                    height : extdom.getViewHeight()
                };

            // Else use clientHeight/clientWidth
            } else {
                return {
                    width : d.clientWidth,
                    height : d.clientHeight
                }
            }
        },

/**
        *
Returns the dimensions of the element available to lay content out in.

        *
        * getStyleSize utilizes prefers style sizing if present, otherwise it chooses the larger of offsetHeight/clientHeight and offsetWidth/clientWidth.
        * To obtain the size excluding scrollbars, use getViewSize
        *
        * Sizing of the document body is handled at the adapter level which handles special cases for IE and strict modes, etc.
        */

        getStyleSize : function(){
            var me = this,
                w, h,
                doc = document,
                d = this.dom,
                isDoc = (d == doc || d == doc.body),
                s = d.style;

            // If the body, use Ext.lib.Dom
            if (isDoc) {
                var extdom = Ext.lib.Dom;
                return {
                    width : extdom.getViewWidth(),
                    height : extdom.getViewHeight()
                }
            }
            // Use Styles if they are set
            if(s.width && s.width != 'auto'){
                w = parseFloat(s.width);
                if(me.isBorderBox()){
                   w -= me.getFrameWidth('lr');
                }
            }
            // Use Styles if they are set
            if(s.height && s.height != 'auto'){
                h = parseFloat(s.height);
                if(me.isBorderBox()){
                   h -= me.getFrameWidth('tb');
                }
            }
            // Use getWidth/getHeight if style not set.
            return {width: w || me.getWidth(true), height: h || me.getHeight(true)};
        },

/**
         * Returns the size of the element.
         * @param {Boolean} contentSize (optional) true to get the width/size minus borders and padding
         * @return {Object} An object containing the element's size {width: (element width), height: (element height)}
         */
        getSize : function(contentSize){
            return {width: this.getWidth(contentSize), height: this.getHeight(contentSize)};
        },

/**
         * Forces the browser to repaint this element
         * @return {Ext.Element} this
         */
        repaint : function(){
            var dom = this.dom;
            this.addClass("x-repaint");
            setTimeout(function(){
                Ext.fly(dom).removeClass("x-repaint");
            }, 1);
            return this;
        },

/**
         * Disables text selection for this element (normalized across browsers)
         * @return {Ext.Element} this
         */
        unselectable : function(){
            this.dom.unselectable = "on";
            return this.swallowEvent("selectstart", true).
                        applyStyles("-moz-user-select:none;-khtml-user-select:none;").
                        addClass("x-unselectable");
        },

/**
         * Returns an object with properties top, left, right and bottom representing the margins of this element unless sides is passed,
         * then it returns the calculated width of the sides (see getPadding)
         * @param {String} sides (optional) Any combination of l, r, t, b to get the sum of those sides
         * @return {Object/Number}
         */
        getMargins : function(side){
            var me = this,
                key,
                hash = {t:"top", l:"left", r:"right", b: "bottom"},
                o = {};

            if (!side) {
                for (key in me.margins){
                    o[hash[key]] = parseFloat(me.getStyle(me.margins[key])) || 0;
                }
                return o;
            } else {
                return me.addStyles.call(me, side, me.margins);
            }
        }
    };
}());


The source code

/*!
 * licensing@extjs.com
 * http://www.extjs.com/license
 */

/**
 * @class Ext.Element
 */
Ext.Element.addMethods(function(){
    // local style camelizing for speed
    var propCache = {},
        camelRe = /(-[a-z])/gi,
        classReCache = {},
        view = document.defaultView,
        propFloat = Ext.isIE ? 'styleFloat' : 'cssFloat',
        opacityRe = /alpha\(opacity=(.*)\)/i,
        trimRe = /^\s+|\s+$/g,
        EL = Ext.Element,
        PADDING = "padding",
        MARGIN = "margin",
        BORDER = "border",
        LEFT = "-left",
        RIGHT = "-right",
        TOP = "-top",
        BOTTOM = "-bottom",
        WIDTH = "-width",
        MATH = Math,
        HIDDEN = 'hidden',
        ISCLIPPED = 'isClipped',
        OVERFLOW = 'overflow',
        OVERFLOWX = 'overflow-x',
        OVERFLOWY = 'overflow-y',
        ORIGINALCLIP = 'originalClip',
        // special markup used throughout Ext when box wrapping elements
        borders = {l: BORDER + LEFT + WIDTH, r: BORDER + RIGHT + WIDTH, t: BORDER + TOP + WIDTH, b: BORDER + BOTTOM + WIDTH},
        paddings = {l: PADDING + LEFT, r: PADDING + RIGHT, t: PADDING + TOP, b: PADDING + BOTTOM},
        margins = {l: MARGIN + LEFT, r: MARGIN + RIGHT, t: MARGIN + TOP, b: MARGIN + BOTTOM},
        data = Ext.Element.data;

    // private
    function camelFn(m, a) {
        return a.charAt(1).toUpperCase();
    }

    function chkCache(prop) {
        return propCache[prop] || (propCache[prop] = prop == 'float' ? propFloat : prop.replace(camelRe, camelFn));
    }

    return {
        // private  ==> used by Fx
        adjustWidth : function(width) {
            var me = this;
            var isNum = Ext.isNumber(width);
            if(isNum && me.autoBoxAdjust && !me.isBorderBox()){
               width -= (me.getBorderWidth("lr") + me.getPadding("lr"));
            }
            return (isNum && width < 0) ? 0 : width;
        },

        // private   ==> used by Fx
        adjustHeight : function(height) {
            var me = this;
            var isNum = Ext.isNumber(height);
            if(isNum && me.autoBoxAdjust && !me.isBorderBox()){
               height -= (me.getBorderWidth("tb") + me.getPadding("tb"));
            }
            return (isNum && height < 0) ? 0 : height;
        },

/**
         * Adds one or more CSS classes to the element. Duplicate classes are automatically filtered out.
         * @param {String/Array} className The CSS class to add, or an array of classes
         * @return {Ext.Element} this
         */
        addClass : function(className){
            var me = this, i, len, v;
            className = Ext.isArray(className) ? className : [className];
            for (i=0, len = className.length; i < len; i++) {
                v = className[i];
                if (v) {
                    me.dom.className += (!me.hasClass(v) && v ? " " + v : "");
                };
            };
            return me;
        },

/**
         * Adds one or more CSS classes to this element and removes the same class(es) from all siblings.
         * @param {String/Array} className The CSS class to add, or an array of classes
         * @return {Ext.Element} this
         */
        radioClass : function(className){
            var cn = this.dom.parentNode.childNodes, v;
            className = Ext.isArray(className) ? className : [className];
            for (var i=0, len = cn.length; i < len; i++) {
                v = cn[i];
                if(v && v.nodeType == 1) {
                    Ext.fly(v, '_internal').removeClass(className);
                }
            };
            return this.addClass(className);
        },

/**
         * Removes one or more CSS classes from the element.
         * @param {String/Array} className The CSS class to remove, or an array of classes
         * @return {Ext.Element} this
         */
        removeClass : function(className){
            var me = this, v;
            className = Ext.isArray(className) ? className : [className];
            if (me.dom && me.dom.className) {
                for (var i=0, len=className.length; i < len; i++) {
                    v = className[i];
                    if(v) {
                        me.dom.className = me.dom.className.replace(
                            classReCache[v] = classReCache[v] || new RegExp('(?:^|\\s+)' + v + '(?:\\s+|$)', "g"), " "
                        );
                    }
                };
            }
            return me;
        },

/**
         * Toggles the specified CSS class on this element (removes it if it already exists, otherwise adds it).
         * @param {String} className The CSS class to toggle
         * @return {Ext.Element} this
         */
        toggleClass : function(className){
            return this.hasClass(className) ? this.removeClass(className) : this.addClass(className);
        },

/**
         * Checks if the specified CSS class exists on this element's DOM node.
         * @param {String} className The CSS class to check for
         * @return {Boolean} True if the class exists, else false
         */
        hasClass : function(className){
            return className && (' '+this.dom.className+' ').indexOf(' '+className+' ') != -1;
        },

/**
         * Replaces a CSS class on the element with another.  If the old name does not exist, the new name will simply be added.
         * @param {String} oldClassName The CSS class to replace
         * @param {String} newClassName The replacement CSS class
         * @return {Ext.Element} this
         */
        replaceClass : function(oldClassName, newClassName){
            return this.removeClass(oldClassName).addClass(newClassName);
        },

        isStyle : function(style, val) {
            return this.getStyle(style) == val;
        },

/**
         * Normalizes currentStyle and computedStyle.
         * @param {String} property The style property whose value is returned.
         * @return {String} The current value of the style property for this element.
         */
        getStyle : function(){
            return view && view.getComputedStyle ?
                function(prop){
                    var el = this.dom,
                        v,
                        cs,
                        out,
                        display,
                        wk = Ext.isWebKit,
                        display;

                    if(el == document){
                        return null;
                    }
                    prop = chkCache(prop);
                    // Fix bug caused by this: https://bugs.webkit.org/show_bug.cgi?id=13343
                    if(wk && /marginRight/.test(prop)){
                        display = this.getStyle('display');
                        el.style.display = 'inline-block';
                    }
                    out = (v = el.style[prop]) ? v :
                           (cs = view.getComputedStyle(el, "")) ? cs[prop] : null;

                    // Webkit returns rgb values for transparent.
                    if(wk){
                        if(out == 'rgba(0, 0, 0, 0)'){
                            out = 'transparent';
                        }else if(display){
                            el.style.display = display;
                        }
                    }
                    return out;
                } :
                function(prop){
                    var el = this.dom,
                        m,
                        cs;

                    if(el == document) return null;
                    if (prop == 'opacity') {
                        if (el.style.filter.match) {
                            if(m = el.style.filter.match(opacityRe)){
                                var fv = parseFloat(m[1]);
                                if(!isNaN(fv)){
                                    return fv ? fv / 100 : 0;
                                }
                            }
                        }
                        return 1;
                    }
                    prop = chkCache(prop);
                    return el.style[prop] || ((cs = el.currentStyle) ? cs[prop] : null);
                };
        }(),

/**
         * Return the CSS color for the specified CSS attribute. rgb, 3 digit (like #fff) and valid values
         * are convert to standard 6 digit hex color.
         * @param {String} attr The css attribute
         * @param {String} defaultValue The default value to use when a valid color isn't found
         * @param {String} prefix (optional) defaults to #. Use an empty string when working with
         * color anims.
         */
        getColor : function(attr, defaultValue, prefix){
            var v = this.getStyle(attr),
                color = Ext.isDefined(prefix) ? prefix : '#',
                h;

            if(!v || /transparent|inherit/.test(v)){
                return defaultValue;
            }
            if(/^r/.test(v)){
                Ext.each(v.slice(4, v.length -1).split(','), function(s){
                    h = parseInt(s, 10);
                    color += (h < 16 ? '0' : '') + h.toString(16);
                });
            }else{
                v = v.replace('#', '');
                color += v.length == 3 ? v.replace(/^(\w)(\w)(\w)$/, '$1$1$2$2$3$3') : v;
            }
            return(color.length > 5 ? color.toLowerCase() : defaultValue);
        },

/**
         * Wrapper for setting style properties, also takes single object parameter of multiple styles.
         * @param {String/Object} property The style property to be set, or an object of multiple styles.
         * @param {String} value (optional) The value to apply to the given property, or null if an object was passed.
         * @return {Ext.Element} this
         */
        setStyle : function(prop, value){
            var tmp,
                style,
                camel;
            if (!Ext.isObject(prop)) {
                tmp = {};
                tmp[prop] = value;
                prop = tmp;
            }
            for (style in prop) {
                value = prop[style];
                style == 'opacity' ?
                    this.setOpacity(value) :
                    this.dom.style[chkCache(style)] = value;
            }
            return this;
        },

/**
         * Set the opacity of the element
         * @param {Float} opacity The new opacity. 0 = transparent, .5 = 50% visibile, 1 = fully visible, etc
         * @param {Boolean/Object} animate (optional) a standard Element animation config object or true for
         * the default animation ({duration: .35, easing: 'easeIn'})
         * @return {Ext.Element} this
         */
         setOpacity : function(opacity, animate){
            var me = this,
                s = me.dom.style;

            if(!animate || !me.anim){
                if(Ext.isIE){
                    var opac = opacity < 1 ? 'alpha(opacity=' + opacity * 100 + ')' : '',
                    val = s.filter.replace(opacityRe, '').replace(trimRe, '');

                    s.zoom = 1;
                    s.filter = val + (val.length > 0 ? ' ' : '') + opac;
                }else{
                    s.opacity = opacity;
                }
            }else{
                me.anim({opacity: {to: opacity}}, me.preanim(arguments, 1), null, .35, 'easeIn');
            }
            return me;
        },

/**
         * Clears any opacity settings from this element. Required in some cases for IE.
         * @return {Ext.Element} this
         */
        clearOpacity : function(){
            var style = this.dom.style;
            if(Ext.isIE){
                if(!Ext.isEmpty(style.filter)){
                    style.filter = style.filter.replace(opacityRe, '').replace(trimRe, '');
                }
            }else{
                style.opacity = style['-moz-opacity'] = style['-khtml-opacity'] = '';
            }
            return this;
        },

/**
         * Returns the offset height of the element
         * @param {Boolean} contentHeight (optional) true to get the height minus borders and padding
         * @return {Number} The element's height
         */
        getHeight : function(contentHeight){
            var me = this,
                dom = me.dom,
                hidden = Ext.isIE && me.isStyle('display', 'none'),
                h = MATH.max(dom.offsetHeight, hidden ? 0 : dom.clientHeight) || 0;

            h = !contentHeight ? h : h - me.getBorderWidth("tb") - me.getPadding("tb");
            return h < 0 ? 0 : h;
        },

/**
         * Returns the offset width of the element
         * @param {Boolean} contentWidth (optional) true to get the width minus borders and padding
         * @return {Number} The element's width
         */
        getWidth : function(contentWidth){
            var me = this,
                dom = me.dom,
                hidden = Ext.isIE && me.isStyle('display', 'none'),
                w = MATH.max(dom.offsetWidth, hidden ? 0 : dom.clientWidth) || 0;
            w = !contentWidth ? w : w - me.getBorderWidth("lr") - me.getPadding("lr");
            return w < 0 ? 0 : w;
        },

/**
         * Set the width of this Element.
         * @param {Mixed} width The new width. This may be one of:

         *
  • A Number specifying the new width in this Element's {@link #defaultUnit}s (by default, pixels).
    •
         *
  • A String used to set the CSS width style. Animation may not be used.
         *

         * @param {Boolean/Object} animate (optional) true for the default animation or a standard Element animation config object
         * @return {Ext.Element} this
         */
        setWidth : function(width, animate){
            var me = this;
            width = me.adjustWidth(width);
            !animate || !me.anim ?
                me.dom.style.width = me.addUnits(width) :
                me.anim({width : {to : width}}, me.preanim(arguments, 1));
            return me;
        },

/**
         * Set the height of this Element.
         *

// change the height to 200px and animate with default configuration
Ext.fly('elementId').setHeight(200, true);

// change the height to 150px and animate with a custom configuration
Ext.fly('elId').setHeight(150, {
    duration : .5, // animation will have a duration of .5 seconds
    // will change the content to "finished"
    callback: function(){ this.{@link #update}("finished"); }
});
         *

         * @param {Mixed} height The new height. This may be one of:

         *
  • A Number specifying the new height in this Element's {@link #defaultUnit}s (by default, pixels.)
    •
         *
  • A String used to set the CSS height style. Animation may not be used.
    •
         *

         * @param {Boolean/Object} animate (optional) true for the default animation or a standard Element animation config object
         * @return {Ext.Element} this
         */
         setHeight : function(height, animate){
            var me = this;
            height = me.adjustHeight(height);
            !animate || !me.anim ?
                me.dom.style.height = me.addUnits(height) :
                me.anim({height : {to : height}}, me.preanim(arguments, 1));
            return me;
        },

/**
         * Gets the width of the border(s) for the specified side(s)
         * @param {String} side Can be t, l, r, b or any combination of those to add multiple values. For example,
         * passing 'lr' would get the border left width + the border right width.
         * @return {Number} The width of the sides passed added together
         */
        getBorderWidth : function(side){
            return this.addStyles(side, borders);
        },

/**
         * Gets the width of the padding(s) for the specified side(s)
         * @param {String} side Can be t, l, r, b or any combination of those to add multiple values. For example,
         * passing 'lr' would get the padding left + the padding right.
         * @return {Number} The padding of the sides passed added together
         */
        getPadding : function(side){
            return this.addStyles(side, paddings);
        },

/**
         *  Store the current overflow setting and clip overflow on the element - use {@link #unclip} to remove
         * @return {Ext.Element} this
         */
        clip : function(){
            var me = this,
                dom = me.dom;

            if(!data(dom, ISCLIPPED)){
                data(dom, ISCLIPPED, true);
                data(dom, ORIGINALCLIP, {
                    o: me.getStyle(OVERFLOW),
                    x: me.getStyle(OVERFLOWX),
                    y: me.getStyle(OVERFLOWY)
                });
                me.setStyle(OVERFLOW, HIDDEN);
                me.setStyle(OVERFLOWX, HIDDEN);
                me.setStyle(OVERFLOWY, HIDDEN);
            }
            return me;
        },

/**
         *  Return clipping (overflow) to original clipping before {@link #clip} was called
         * @return {Ext.Element} this
         */
        unclip : function(){
            var me = this,
                dom = me.dom;

            if(data(dom, ISCLIPPED)){
                data(dom, ISCLIPPED, false);
                var o = data(dom, ORIGINALCLIP);
                if(o.o){
                    me.setStyle(OVERFLOW, o.o);
                }
                if(o.x){
                    me.setStyle(OVERFLOWX, o.x);
                }
                if(o.y){
                    me.setStyle(OVERFLOWY, o.y);
                }
            }
            return me;
        },

        // private
        addStyles : function(sides, styles){
            var val = 0,
                m = sides.match(/\w/g),
                s;
            for (var i=0, len=m.length; i


The source code

/*!
 * licensing@extjs.com
 * http://www.extjs.com/license
 */
/**
 * @class Ext.Element
 */
Ext.Element.addMethods({

/**
     * Creates a {@link Ext.CompositeElement} for child nodes based on the passed CSS selector (the selector should not contain an id).
     * @param {String} selector The CSS selector
     * @param {Boolean} unique (optional) True to create a unique Ext.Element for each child (defaults to false, which creates a single shared flyweight object)
     * @return {CompositeElement/CompositeElementLite} The composite element
     */
    select : function(selector, unique){
        return Ext.Element.select(selector, unique, this.dom);
    }
});


The source code

/*!
 * licensing@extjs.com
 * http://www.extjs.com/license
 */
/**
 * @class Ext.Element
 */
Ext.Element.addMethods(function(){
    var PARENTNODE = 'parentNode',
        NEXTSIBLING = 'nextSibling',
        PREVIOUSSIBLING = 'previousSibling',
        DQ = Ext.DomQuery,
        GET = Ext.get;

    return {

/**
         * Looks at this node and then at parent nodes for a match of the passed simple selector (e.g. div.some-class or span:first-child)
         * @param {String} selector The simple selector to test
         * @param {Number/Mixed} maxDepth (optional) The max depth to search as a number or element (defaults to 50 || document.body)
         * @param {Boolean} returnEl (optional) True to return a Ext.Element object instead of DOM node
         * @return {HTMLElement} The matching DOM node (or null if no match was found)
         */
        findParent : function(simpleSelector, maxDepth, returnEl){
            var p = this.dom,
                b = document.body,
                depth = 0,
                stopEl;
            if(Ext.isGecko && Object.prototype.toString.call(p) == '[object XULElement]') {
                return null;
            }
            maxDepth = maxDepth || 50;
            if (isNaN(maxDepth)) {
                stopEl = Ext.getDom(maxDepth);
                maxDepth = Number.MAX_VALUE;
            }
            while(p && p.nodeType == 1 && depth < maxDepth && p != b && p != stopEl){
                if(DQ.is(p, simpleSelector)){
                    return returnEl ? GET(p) : p;
                }
                depth++;
                p = p.parentNode;
            }
            return null;
        },

/**
         * Looks at parent nodes for a match of the passed simple selector (e.g. div.some-class or span:first-child)
         * @param {String} selector The simple selector to test
         * @param {Number/Mixed} maxDepth (optional) The max depth to
                search as a number or element (defaults to 10 || document.body)
         * @param {Boolean} returnEl (optional) True to return a Ext.Element object instead of DOM node
         * @return {HTMLElement} The matching DOM node (or null if no match was found)
         */
        findParentNode : function(simpleSelector, maxDepth, returnEl){
            var p = Ext.fly(this.dom.parentNode, '_internal');
            return p ? p.findParent(simpleSelector, maxDepth, returnEl) : null;
        },

/**
         * Walks up the dom looking for a parent node that matches the passed simple selector (e.g. div.some-class or span:first-child).
         * This is a shortcut for findParentNode() that always returns an Ext.Element.
         * @param {String} selector The simple selector to test
         * @param {Number/Mixed} maxDepth (optional) The max depth to
                search as a number or element (defaults to 10 || document.body)
         * @return {Ext.Element} The matching DOM node (or null if no match was found)
         */
        up : function(simpleSelector, maxDepth){
            return this.findParentNode(simpleSelector, maxDepth, true);
        },

/**
         * Creates a {@link Ext.CompositeElement} for child nodes based on the passed CSS selector (the selector should not contain an id).
         * @param {String} selector The CSS selector
         * @return {CompositeElement/CompositeElementLite} The composite element
         */
        select : function(selector){
            return Ext.Element.select(selector, this.dom);
        },

/**
         * Selects child nodes based on the passed CSS selector (the selector should not contain an id).
         * @param {String} selector The CSS selector
         * @return {Array} An array of the matched nodes
         */
        query : function(selector){
            return DQ.select(selector, this.dom);
        },

/**
         * Selects a single child at any depth below this element based on the passed CSS selector (the selector should not contain an id).
         * @param {String} selector The CSS selector
         * @param {Boolean} returnDom (optional) True to return the DOM node instead of Ext.Element (defaults to false)
         * @return {HTMLElement/Ext.Element} The child Ext.Element (or DOM node if returnDom = true)
         */
        child : function(selector, returnDom){
            var n = DQ.selectNode(selector, this.dom);
            return returnDom ? n : GET(n);
        },

/**
         * Selects a single *direct* child based on the passed CSS selector (the selector should not contain an id).
         * @param {String} selector The CSS selector
         * @param {Boolean} returnDom (optional) True to return the DOM node instead of Ext.Element (defaults to false)
         * @return {HTMLElement/Ext.Element} The child Ext.Element (or DOM node if returnDom = true)
         */
        down : function(selector, returnDom){
            var n = DQ.selectNode(" > " + selector, this.dom);
            return returnDom ? n : GET(n);
        },

/**
         * Gets the parent node for this element, optionally chaining up trying to match a selector
         * @param {String} selector (optional) Find a parent node that matches the passed simple selector
         * @param {Boolean} returnDom (optional) True to return a raw dom node instead of an Ext.Element
         * @return {Ext.Element/HTMLElement} The parent node or null
         */
        parent : function(selector, returnDom){
            return this.matchNode(PARENTNODE, PARENTNODE, selector, returnDom);
        },

/**
         * Gets the next sibling, skipping text nodes
         * @param {String} selector (optional) Find the next sibling that matches the passed simple selector
         * @param {Boolean} returnDom (optional) True to return a raw dom node instead of an Ext.Element
         * @return {Ext.Element/HTMLElement} The next sibling or null
         */
        next : function(selector, returnDom){
            return this.matchNode(NEXTSIBLING, NEXTSIBLING, selector, returnDom);
        },

/**
         * Gets the previous sibling, skipping text nodes
         * @param {String} selector (optional) Find the previous sibling that matches the passed simple selector
         * @param {Boolean} returnDom (optional) True to return a raw dom node instead of an Ext.Element
         * @return {Ext.Element/HTMLElement} The previous sibling or null
         */
        prev : function(selector, returnDom){
            return this.matchNode(PREVIOUSSIBLING, PREVIOUSSIBLING, selector, returnDom);
        },

/**
         * Gets the first child, skipping text nodes
         * @param {String} selector (optional) Find the next sibling that matches the passed simple selector
         * @param {Boolean} returnDom (optional) True to return a raw dom node instead of an Ext.Element
         * @return {Ext.Element/HTMLElement} The first child or null
         */
        first : function(selector, returnDom){
            return this.matchNode(NEXTSIBLING, 'firstChild', selector, returnDom);
        },

/**
         * Gets the last child, skipping text nodes
         * @param {String} selector (optional) Find the previous sibling that matches the passed simple selector
         * @param {Boolean} returnDom (optional) True to return a raw dom node instead of an Ext.Element
         * @return {Ext.Element/HTMLElement} The last child or null
         */
        last : function(selector, returnDom){
            return this.matchNode(PREVIOUSSIBLING, 'lastChild', selector, returnDom);
        },

        matchNode : function(dir, start, selector, returnDom){
            var n = this.dom[start];
            while(n){
                if(n.nodeType == 1 && (!selector || DQ.is(n, selector))){
                    return !returnDom ? GET(n) : n;
                }
                n = n[dir];
            }
            return null;
        }
    }
}());


The source code

/*!
 * licensing@extjs.com
 * http://www.extjs.com/license
 */

/**
 * Framework-wide error-handler.  Developers can override this method to provide
 * custom exception-handling.  Framework errors will often extend from the base
 * Ext.Error class.
 * @param {Object/Error} e The thrown exception object.
 */
Ext.handleError = function(e) {
    throw e;
};

/**
 * @class Ext.Error
 * @extends Error
 *
A base error class. Future implementations are intended to provide more
 * robust error handling throughout the framework (in the debug build only)
 * to check for common errors and problems. The messages issued by this class
 * will aid error checking. Error checks will be automatically removed in the
 * production build so that performance is not negatively impacted.

 *
Some sample messages currently implemented:
"DataProxy attempted to execute an API-action but found an undefined
url / function. Please review your Proxy url/api-configuration."
 *
"Could not locate your "root" property in your server response.
Please review your JsonReader config to ensure the config-property
"root" matches the property your server-response.  See the JsonReader
docs for additional assistance."
 *

 *
An example of the code used for generating error messages:

try {
    generateError({
        foo: 'bar'
    });
}
catch (e) {
    console.error(e);
}
function generateError(data) {
    throw new Ext.Error('foo-error', data);
}
 *

 * @param {String} message
 */
Ext.Error = function(message) {
    // Try to read the message from Ext.Error.lang
    this.message = (this.lang[message]) ? this.lang[message] : message;
};

Ext.Error.prototype = new Error();
Ext.apply(Ext.Error.prototype, {
    // protected.  Extensions place their error-strings here.
    lang: {},

    name: 'Ext.Error',

/**
     * getName
     * @return {String}
     */
    getName : function() {
        return this.name;
    },

/**
     * getMessage
     * @return {String}
     */
    getMessage : function() {
        return this.message;
    },

/**
     * toJson
     * @return {String}
     */
    toJson : function() {
        return Ext.encode(this);
    }
});


The source code

/*!
 * licensing@extjs.com
 * http://www.extjs.com/license
 */
Ext.Direct.Event = function(config){
    Ext.apply(this, config);
};

Ext.Direct.Event.prototype = {
    status: true,
    getData: function(){
        return this.data;
    }
};

Ext.Direct.RemotingEvent = Ext.extend(Ext.Direct.Event, {
    type: 'rpc',
    getTransaction: function(){
        return this.transaction || Ext.Direct.getTransaction(this.tid);
    }
});

Ext.Direct.ExceptionEvent = Ext.extend(Ext.Direct.RemotingEvent, {
    status: false,
    type: 'exception'
});

Ext.Direct.eventTypes = {
    'rpc':  Ext.Direct.RemotingEvent,
    'event':  Ext.Direct.Event,
    'exception':  Ext.Direct.ExceptionEvent
};


The source code

/*!
 * licensing@extjs.com
 * http://www.extjs.com/license
 */
/**
* @class Ext.EventManager
*/
Ext.apply(Ext.EventManager, function(){
   var resizeEvent,
       resizeTask,
       textEvent,
       textSize,
       D = Ext.lib.Dom,
       propRe = /^(?:scope|delay|buffer|single|stopEvent|preventDefault|stopPropagation|normalized|args|delegate)$/,
       curWidth = 0,
       curHeight = 0,
       // note 1: IE fires ONLY the keydown event on specialkey autorepeat
       // note 2: Safari < 3.1, Gecko (Mac/Linux) & Opera fire only the keypress event on specialkey autorepeat
       // (research done by @Jan Wolter at http://unixpapa.com/js/key.html)
       useKeydown = Ext.isWebKit ?
                   Ext.num(navigator.userAgent.match(/AppleWebKit\/(\d+)/)[1]) >= 525 :
                   !((Ext.isGecko && !Ext.isWindows) || Ext.isOpera);

   return {
       // private
       doResizeEvent: function(){
           var h = D.getViewHeight(),
               w = D.getViewWidth();

            //whacky problem in IE where the resize event will fire even though the w/h are the same.
            if(curHeight != h || curWidth != w){
               resizeEvent.fire(curWidth = w, curHeight = h);
            }
       },

/**
        * Adds a listener to be notified when the browser window is resized and provides resize event buffering (100 milliseconds),
        * passes new viewport width and height to handlers.
        * @param {Function} fn      The handler function the window resize event invokes.
        * @param {Object}   scope   The scope (this reference) in which the handler function executes. Defaults to the browser window.
        * @param {boolean}  options Options object as passed to {@link Ext.Element#addListener}
        */
       onWindowResize : function(fn, scope, options){
           if(!resizeEvent){
               resizeEvent = new Ext.util.Event();
               resizeTask = new Ext.util.DelayedTask(this.doResizeEvent);
               Ext.EventManager.on(window, "resize", this.fireWindowResize, this);
           }
           resizeEvent.addListener(fn, scope, options);
       },

       // exposed only to allow manual firing
       fireWindowResize : function(){
           if(resizeEvent){
               resizeTask.delay(100);
           }
       },

/**
        * Adds a listener to be notified when the user changes the active text size. Handler gets called with 2 params, the old size and the new size.
        * @param {Function} fn      The function the event invokes.
        * @param {Object}   scope   The scope (this reference) in which the handler function executes. Defaults to the browser window.
        * @param {boolean}  options Options object as passed to {@link Ext.Element#addListener}
        */
       onTextResize : function(fn, scope, options){
           if(!textEvent){
               textEvent = new Ext.util.Event();
               var textEl = new Ext.Element(document.createElement('div'));
               textEl.dom.className = 'x-text-resize';
               textEl.dom.innerHTML = 'X';
               textEl.appendTo(document.body);
               textSize = textEl.dom.offsetHeight;
               setInterval(function(){
                   if(textEl.dom.offsetHeight != textSize){
                       textEvent.fire(textSize, textSize = textEl.dom.offsetHeight);
                   }
               }, this.textResizeInterval);
           }
           textEvent.addListener(fn, scope, options);
       },

/**
        * Removes the passed window resize listener.
        * @param {Function} fn        The method the event invokes
        * @param {Object}   scope    The scope of handler
        */
       removeResizeListener : function(fn, scope){
           if(resizeEvent){
               resizeEvent.removeListener(fn, scope);
           }
       },

       // private
       fireResize : function(){
           if(resizeEvent){
               resizeEvent.fire(D.getViewWidth(), D.getViewHeight());
           }
       },

/**
        * The frequency, in milliseconds, to check for text resize events (defaults to 50)
        */
       textResizeInterval : 50,

/**
        * Url used for onDocumentReady with using SSL (defaults to Ext.SSL_SECURE_URL)
        */
       ieDeferSrc : false,

       // protected for use inside the framework
       // detects whether we should use keydown or keypress based on the browser.
       useKeydown: useKeydown
   };
}());

Ext.EventManager.on = Ext.EventManager.addListener;

Ext.apply(Ext.EventObjectImpl.prototype, {

/** Key constant @type Number */
   BACKSPACE: 8,

/** Key constant @type Number */
   TAB: 9,

/** Key constant @type Number */
   NUM_CENTER: 12,

/** Key constant @type Number */
   ENTER: 13,

/** Key constant @type Number */
   RETURN: 13,

/** Key constant @type Number */
   SHIFT: 16,

/** Key constant @type Number */
   CTRL: 17,
   CONTROL : 17, // legacy

/** Key constant @type Number */
   ALT: 18,

/** Key constant @type Number */
   PAUSE: 19,

/** Key constant @type Number */
   CAPS_LOCK: 20,

/** Key constant @type Number */
   ESC: 27,

/** Key constant @type Number */
   SPACE: 32,

/** Key constant @type Number */
   PAGE_UP: 33,
   PAGEUP : 33, // legacy

/** Key constant @type Number */
   PAGE_DOWN: 34,
   PAGEDOWN : 34, // legacy

/** Key constant @type Number */
   END: 35,

/** Key constant @type Number */
   HOME: 36,

/** Key constant @type Number */
   LEFT: 37,

/** Key constant @type Number */
   UP: 38,

/** Key constant @type Number */
   RIGHT: 39,

/** Key constant @type Number */
   DOWN: 40,

/** Key constant @type Number */
   PRINT_SCREEN: 44,

/** Key constant @type Number */
   INSERT: 45,

/** Key constant @type Number */
   DELETE: 46,

/** Key constant @type Number */
   ZERO: 48,

/** Key constant @type Number */
   ONE: 49,

/** Key constant @type Number */
   TWO: 50,

/** Key constant @type Number */
   THREE: 51,

/** Key constant @type Number */
   FOUR: 52,

/** Key constant @type Number */
   FIVE: 53,

/** Key constant @type Number */
   SIX: 54,

/** Key constant @type Number */
   SEVEN: 55,

/** Key constant @type Number */
   EIGHT: 56,

/** Key constant @type Number */
   NINE: 57,

/** Key constant @type Number */
   A: 65,

/** Key constant @type Number */
   B: 66,

/** Key constant @type Number */
   C: 67,

/** Key constant @type Number */
   D: 68,

/** Key constant @type Number */
   E: 69,

/** Key constant @type Number */
   F: 70,

/** Key constant @type Number */
   G: 71,

/** Key constant @type Number */
   H: 72,

/** Key constant @type Number */
   I: 73,

/** Key constant @type Number */
   J: 74,

/** Key constant @type Number */
   K: 75,

/** Key constant @type Number */
   L: 76,

/** Key constant @type Number */
   M: 77,

/** Key constant @type Number */
   N: 78,

/** Key constant @type Number */
   O: 79,

/** Key constant @type Number */
   P: 80,

/** Key constant @type Number */
   Q: 81,

/** Key constant @type Number */
   R: 82,

/** Key constant @type Number */
   S: 83,

/** Key constant @type Number */
   T: 84,

/** Key constant @type Number */
   U: 85,

/** Key constant @type Number */
   V: 86,

/** Key constant @type Number */
   W: 87,

/** Key constant @type Number */
   X: 88,

/** Key constant @type Number */
   Y: 89,

/** Key constant @type Number */
   Z: 90,

/** Key constant @type Number */
   CONTEXT_MENU: 93,

/** Key constant @type Number */
   NUM_ZERO: 96,

/** Key constant @type Number */
   NUM_ONE: 97,

/** Key constant @type Number */
   NUM_TWO: 98,

/** Key constant @type Number */
   NUM_THREE: 99,

/** Key constant @type Number */
   NUM_FOUR: 100,

/** Key constant @type Number */
   NUM_FIVE: 101,

/** Key constant @type Number */
   NUM_SIX: 102,

/** Key constant @type Number */
   NUM_SEVEN: 103,

/** Key constant @type Number */
   NUM_EIGHT: 104,

/** Key constant @type Number */
   NUM_NINE: 105,

/** Key constant @type Number */
   NUM_MULTIPLY: 106,

/** Key constant @type Number */
   NUM_PLUS: 107,

/** Key constant @type Number */
   NUM_MINUS: 109,

/** Key constant @type Number */
   NUM_PERIOD: 110,

/** Key constant @type Number */
   NUM_DIVISION: 111,

/** Key constant @type Number */
   F1: 112,

/** Key constant @type Number */
   F2: 113,

/** Key constant @type Number */
   F3: 114,

/** Key constant @type Number */
   F4: 115,

/** Key constant @type Number */
   F5: 116,

/** Key constant @type Number */
   F6: 117,

/** Key constant @type Number */
   F7: 118,

/** Key constant @type Number */
   F8: 119,

/** Key constant @type Number */
   F9: 120,

/** Key constant @type Number */
   F10: 121,

/** Key constant @type Number */
   F11: 122,

/** Key constant @type Number */
   F12: 123,

   /** @private */
   isNavKeyPress : function(){
       var me = this,
           k = this.normalizeKey(me.keyCode);
       return (k >= 33 && k <= 40) ||  // Page Up/Down, End, Home, Left, Up, Right, Down
       k == me.RETURN ||
       k == me.TAB ||
       k == me.ESC;
   },

   isSpecialKey : function(){
       var k = this.normalizeKey(this.keyCode);
       return (this.type == 'keypress' && this.ctrlKey) ||
       this.isNavKeyPress() ||
       (k == this.BACKSPACE) || // Backspace
       (k >= 16 && k <= 20) || // Shift, Ctrl, Alt, Pause, Caps Lock
       (k >= 44 && k <= 46);   // Print Screen, Insert, Delete
   },

   getPoint : function(){
       return new Ext.lib.Point(this.xy[0], this.xy[1]);
   },

/**
    * Returns true if the control, meta, shift or alt key was pressed during this event.
    * @return {Boolean}
    */
   hasModifier : function(){
       return ((this.ctrlKey || this.altKey) || this.shiftKey);
   }
});


The source code

/*!
 * licensing@extjs.com
 * http://www.extjs.com/license
 */

/**
 * @class Ext.EventManager
 * Registers event handlers that want to receive a normalized EventObject instead of the standard browser event and provides
 * several useful events directly.
 * See {@link Ext.EventObject} for more details on normalized event objects.
 * @singleton
 */

Ext.EventManager = function(){
    var docReadyEvent,
        docReadyProcId,
        docReadyState = false,
        DETECT_NATIVE = Ext.isGecko || Ext.isWebKit || Ext.isSafari,
        E = Ext.lib.Event,
        D = Ext.lib.Dom,
        DOC = document,
        WINDOW = window,
        DOMCONTENTLOADED = "DOMContentLoaded",
        COMPLETE = 'complete',
        propRe = /^(?:scope|delay|buffer|single|stopEvent|preventDefault|stopPropagation|normalized|args|delegate)$/,
        /*
         * This cache is used to hold special js objects, the document and window, that don't have an id. We need to keep
         * a reference to them so we can look them up at a later point.
         */
        specialElCache = [];

     function getId(el){
        var id = false,
            i = 0,
            len = specialElCache.length,
            id = false,
            skip = false,
            o;
        if(el){
            if(el.getElementById || el.navigator){
                // look up the id
                for(; i < len; ++i){
                    o = specialElCache[i];
                    if(o.el === el){
                        id = o.id;
                        break;
                    }
                }
                if(!id){
                    // for browsers that support it, ensure that give the el the same id
                    id = Ext.id(el);
                    specialElCache.push({
                        id: id,
                        el: el
                    });
                    skip = true;
                }
            }else{
                id = Ext.id(el);
            }
            if(!Ext.elCache[id]){
                Ext.Element.addToCache(new Ext.Element(el), id);
                if(skip){
                    Ext.elCache[id].skipGC = true;
                }
            }
        }
        return id;
     };

    /// There is some jquery work around stuff here that isn't needed in Ext Core.
    function addListener(el, ename, fn, task, wrap, scope){
        el = Ext.getDom(el);
        var id = getId(el),
            es = Ext.elCache[id].events,
            wfn;

        wfn = E.on(el, ename, wrap);
        es[ename] = es[ename] || [];

        /* 0 = Original Function,
           1 = Event Manager Wrapped Function,
           2 = Scope,
           3 = Adapter Wrapped Function,
           4 = Buffered Task
        */
        es[ename].push([fn, wrap, scope, wfn, task]);

        // this is a workaround for jQuery and should somehow be removed from Ext Core in the future
        // without breaking ExtJS.

        // workaround for jQuery
        if(el.addEventListener && ename == "mousewheel"){
            var args = ["DOMMouseScroll", wrap, false];
            el.addEventListener.apply(el, args);
            Ext.EventManager.addListener(WINDOW, 'unload', function(){
                el.removeEventListener.apply(el, args);
            });
        }

        // fix stopped mousedowns on the document
        if(el == DOC && ename == "mousedown"){
            Ext.EventManager.stoppedMouseDownEvent.addListener(wrap);
        }
    };

    function doScrollChk(){
        /* Notes:
             'doScroll' will NOT work in a IFRAME/FRAMESET.
             The method succeeds but, a DOM query done immediately after -- FAILS.
          */
        if(window != top){
            return false;
        }

        try{
            DOC.documentElement.doScroll('left');
        }catch(e){
             return false;
        }

        fireDocReady();
        return true;
    }

/**
     * @return {Boolean} True if the document is in a 'complete' state (or was determined to
     * be true by other means). If false, the state is evaluated again until canceled.
     */
    function checkReadyState(e){

        if(Ext.isIE && doScrollChk()){
            return true;
        }
        if(DOC.readyState == COMPLETE){
            fireDocReady();
            return true;
        }
        docReadyState || (docReadyProcId = setTimeout(arguments.callee, 2));
        return false;
    }

    var styles;
    function checkStyleSheets(e){
        styles || (styles = Ext.query('style, link[rel=stylesheet]'));
        if(styles.length == DOC.styleSheets.length){
            fireDocReady();
            return true;
        }
        docReadyState || (docReadyProcId = setTimeout(arguments.callee, 2));
        return false;
    }

    function OperaDOMContentLoaded(e){
        DOC.removeEventListener(DOMCONTENTLOADED, arguments.callee, false);
        checkStyleSheets();
    }

    function fireDocReady(e){
        if(!docReadyState){
            docReadyState = true; //only attempt listener removal once

            if(docReadyProcId){
                clearTimeout(docReadyProcId);
            }
            if(DETECT_NATIVE) {
                DOC.removeEventListener(DOMCONTENTLOADED, fireDocReady, false);
            }
            if(Ext.isIE && checkReadyState.bindIE){  //was this was actually set ??
                DOC.detachEvent('onreadystatechange', checkReadyState);
            }
            E.un(WINDOW, "load", arguments.callee);
        }
        if(docReadyEvent && !Ext.isReady){
            Ext.isReady = true;
            docReadyEvent.fire();
            docReadyEvent.listeners = [];
        }

    };

    function initDocReady(){
        docReadyEvent || (docReadyEvent = new Ext.util.Event());
        if (DETECT_NATIVE) {
            DOC.addEventListener(DOMCONTENTLOADED, fireDocReady, false);
        }
        /*
         * Handle additional (exceptional) detection strategies here
         */
        if (Ext.isIE){
            //Use readystatechange as a backup AND primary detection mechanism for a FRAME/IFRAME
            //See if page is already loaded
            if(!checkReadyState()){
                checkReadyState.bindIE = true;
                DOC.attachEvent('onreadystatechange', checkReadyState);
            }

        }else if(Ext.isOpera ){
            /* Notes:
               Opera needs special treatment needed here because CSS rules are NOT QUITE
               available after DOMContentLoaded is raised.
            */

            //See if page is already loaded and all styleSheets are in place
            (DOC.readyState == COMPLETE && checkStyleSheets()) ||
                DOC.addEventListener(DOMCONTENTLOADED, OperaDOMContentLoaded, false);

        }else if (Ext.isWebKit){
            //Fallback for older Webkits without DOMCONTENTLOADED support
            checkReadyState();
        }
        // no matter what, make sure it fires on load
        E.on(WINDOW, "load", fireDocReady);
    };

    function createTargeted(h, o){
        return function(){
            var args = Ext.toArray(arguments);
            if(o.target == Ext.EventObject.setEvent(args[0]).target){
                h.apply(this, args);
            }
        };
    };

    function createBuffered(h, o, task){
        return function(e){
            // create new event object impl so new events don't wipe out properties
            task.delay(o.buffer, h, null, [new Ext.EventObjectImpl(e)]);
        };
    };

    function createSingle(h, el, ename, fn, scope){
        return function(e){
            Ext.EventManager.removeListener(el, ename, fn, scope);
            h(e);
        };
    };

    function createDelayed(h, o, fn){
        return function(e){
            var task = new Ext.util.DelayedTask(h);
            if(!fn.tasks) {
                fn.tasks = [];
            }
            fn.tasks.push(task);
            task.delay(o.delay || 10, h, null, [new Ext.EventObjectImpl(e)]);
        };
    };

    function listen(element, ename, opt, fn, scope){
        var o = !Ext.isObject(opt) ? {} : opt,
            el = Ext.getDom(element), task;

        fn = fn || o.fn;
        scope = scope || o.scope;

        if(!el){
            throw "Error listening for \"" + ename + '\". Element "' + element + '" doesn\'t exist.';
        }
        function h(e){
            // prevent errors while unload occurring
            if(!Ext){// !window[xname]){  ==> can't we do this?
                return;
            }
            e = Ext.EventObject.setEvent(e);
            var t;
            if (o.delegate) {
                if(!(t = e.getTarget(o.delegate, el))){
                    return;
                }
            } else {
                t = e.target;
            }
            if (o.stopEvent) {
                e.stopEvent();
            }
            if (o.preventDefault) {
               e.preventDefault();
            }
            if (o.stopPropagation) {
                e.stopPropagation();
            }
            if (o.normalized) {
                e = e.browserEvent;
            }

            fn.call(scope || el, e, t, o);
        };
        if(o.target){
            h = createTargeted(h, o);
        }
        if(o.delay){
            h = createDelayed(h, o, fn);
        }
        if(o.single){
            h = createSingle(h, el, ename, fn, scope);
        }
        if(o.buffer){
            task = new Ext.util.DelayedTask(h);
            h = createBuffered(h, o, task);
        }

        addListener(el, ename, fn, task, h, scope);
        return h;
    };

    var pub = {

/**
         * Appends an event handler to an element.  The shorthand version {@link #on} is equivalent.  Typically you will
         * use {@link Ext.Element#addListener} directly on an Element in favor of calling this version.
         * @param {String/HTMLElement} el The html element or id to assign the event handler to.
         * @param {String} eventName The name of the event to listen for.
         * @param {Function} handler The handler function the event invokes. This function is passed
         * the following parameters:

         *
  • evt : EventObject
    The {@link Ext.EventObject EventObject} describing the event.
    •
         *
  • t : Element
    The {@link Ext.Element Element} which was the target of the event.
         * Note that this may be filtered by using the delegate option.
    •
         *
  • o : Object
    The options object from the addListener call.
    •
         *

         * @param {Object} scope (optional) The scope (this reference) in which the handler function is executed. Defaults to the Element.
         * @param {Object} options (optional) An object containing handler configuration properties.
         * This may contain any of the following properties:

         *
  • scope : Object
    The scope (this reference) in which the handler function is executed. Defaults to the Element.
    •
         *
  • delegate : String
    A simple selector to filter the target or look for a descendant of the target
    •
         *
  • stopEvent : Boolean
    True to stop the event. That is stop propagation, and prevent the default action.
    •
         *
  • preventDefault : Boolean
    True to prevent the default action
    •
         *
  • stopPropagation : Boolean
    True to prevent event propagation
    •
         *
  • normalized : Boolean
    False to pass a browser event to the handler function instead of an Ext.EventObject
    •
         *
  • delay : Number
    The number of milliseconds to delay the invocation of the handler after te event fires.
    •
         *
  • single : Boolean
    True to add a handler to handle just the next firing of the event, and then remove itself.
    •
         *
  • buffer : Number
    Causes the handler to be scheduled to run in an {@link Ext.util.DelayedTask} delayed
         * by the specified number of milliseconds. If the event fires again within that time, the original
         * handler is not invoked, but the new handler is scheduled in its place.
    •
         *
  • target : Element
    Only call the handler if the event was fired on the target Element, not if the event was bubbled up from a child node.
    •
         *

         *
See {@link Ext.Element#addListener} for examples of how to use these options.

         */
        addListener : function(element, eventName, fn, scope, options){
            if(Ext.isObject(eventName)){
                var o = eventName, e, val;
                for(e in o){
                    val = o[e];
                    if(!propRe.test(e)){
                        if(Ext.isFunction(val)){
                            // shared options
                            listen(element, e, o, val, o.scope);
                        }else{
                            // individual options
                            listen(element, e, val);
                        }
                    }
                }
            } else {
                listen(element, eventName, options, fn, scope);
            }
        },

/**
         * Removes an event handler from an element.  The shorthand version {@link #un} is equivalent.  Typically
         * you will use {@link Ext.Element#removeListener} directly on an Element in favor of calling this version.
         * @param {String/HTMLElement} el The id or html element from which to remove the listener.
         * @param {String} eventName The name of the event.
         * @param {Function} fn The handler function to remove. This must be a reference to the function passed into the {@link #addListener} call.
         * @param {Object} scope If a scope (this reference) was specified when the listener was added,
         * then this must refer to the same object.
         */
        removeListener : function(el, eventName, fn, scope){
            el = Ext.getDom(el);
            var id = getId(el),
                f = el && (Ext.elCache[id].events)[eventName] || [],
                wrap, i, l, k, len, fnc;

            for (i = 0, len = f.length; i < len; i++) {

                /* 0 = Original Function,
                   1 = Event Manager Wrapped Function,
                   2 = Scope,
                   3 = Adapter Wrapped Function,
                   4 = Buffered Task
                */
                if (Ext.isArray(fnc = f[i]) && fnc[0] == fn && (!scope || fnc[2] == scope)) {
                    if(fnc[4]) {
                        fnc[4].cancel();
                    }
                    k = fn.tasks && fn.tasks.length;
                    if(k) {
                        while(k--) {
                            fn.tasks[k].cancel();
                        }
                        delete fn.tasks;
                    }
                    wrap = fnc[1];
                    E.un(el, eventName, E.extAdapter ? fnc[3] : wrap);

                    // jQuery workaround that should be removed from Ext Core
                    if(wrap && el.addEventListener && eventName == "mousewheel"){
                        el.removeEventListener("DOMMouseScroll", wrap, false);
                    }

                    // fix stopped mousedowns on the document
                    if(wrap && el == DOC && eventName == "mousedown"){
                        Ext.EventManager.stoppedMouseDownEvent.removeListener(wrap);
                    }

                    f.splice(i, 1);
                    if (f.length === 0) {
                        delete Ext.elCache[id].events[eventName];
                    }
                    for (k in Ext.elCache[id].events) {
                        return false;
                    }
                    Ext.elCache[id].events = {};
                    return false;
                }
            }
        },

/**
         * Removes all event handers from an element.  Typically you will use {@link Ext.Element#removeAllListeners}
         * directly on an Element in favor of calling this version.
         * @param {String/HTMLElement} el The id or html element from which to remove all event handlers.
         */
        removeAll : function(el){
            el = Ext.getDom(el);
            var id = getId(el),
                ec = Ext.elCache[id] || {},
                es = ec.events || {},
                f, i, len, ename, fn, k, wrap;

            for(ename in es){
                if(es.hasOwnProperty(ename)){
                    f = es[ename];
                    /* 0 = Original Function,
                       1 = Event Manager Wrapped Function,
                       2 = Scope,
                       3 = Adapter Wrapped Function,
                       4 = Buffered Task
                    */
                    for (i = 0, len = f.length; i < len; i++) {
                        fn = f[i];
                        if(fn[4]) {
                            fn[4].cancel();
                        }
                        if(fn[0].tasks && (k = fn[0].tasks.length)) {
                            while(k--) {
                                fn[0].tasks[k].cancel();
                            }
                            delete fn.tasks;
                        }
                        wrap =  fn[1];
                        E.un(el, ename, E.extAdapter ? fn[3] : wrap);

                        // jQuery workaround that should be removed from Ext Core
                        if(el.addEventListener && wrap && ename == "mousewheel"){
                            el.removeEventListener("DOMMouseScroll", wrap, false);
                        }

                        // fix stopped mousedowns on the document
                        if(wrap && el == DOC &&  ename == "mousedown"){
                            Ext.EventManager.stoppedMouseDownEvent.removeListener(wrap);
                        }
                    }
                }
            }
            if (Ext.elCache[id]) {
                Ext.elCache[id].events = {};
            }
        },

        getListeners : function(el, eventName) {
            el = Ext.getDom(el);
            var id = getId(el),
                ec = Ext.elCache[id] || {},
                es = ec.events || {},
                results = [];
            if (es && es[eventName]) {
                return es[eventName];
            } else {
                return null;
            }
        },

        purgeElement : function(el, recurse, eventName) {
            el = Ext.getDom(el);
            var id = getId(el),
                ec = Ext.elCache[id] || {},
                es = ec.events || {},
                i, f, len;
            if (eventName) {
                if (es && es.hasOwnProperty(eventName)) {
                    f = es[eventName];
                    for (i = 0, len = f.length; i < len; i++) {
                        Ext.EventManager.removeListener(el, eventName, f[i][0]);
                    }
                }
            } else {
                Ext.EventManager.removeAll(el);
            }
            if (recurse && el && el.childNodes) {
                for (i = 0, len = el.childNodes.length; i < len; i++) {
                    Ext.EventManager.purgeElement(el.childNodes[i], recurse, eventName);
                }
            }
        },

        _unload : function() {
            var el;
            for (el in Ext.elCache) {
                Ext.EventManager.removeAll(el);
            }
            delete Ext.elCache;
            delete Ext.Element._flyweights;

            // Abort any outstanding Ajax requests
            var c,
                conn,
                tid,
                ajax = Ext.lib.Ajax;
            (Ext.isObject(ajax.conn)) ? conn = ajax.conn : conn = {};
            for (tid in conn) {
                c = conn[tid];
                if (c) {
                    ajax.abort({conn: c, tId: tid});
                }
            }
        },

/**
         * Adds a listener to be notified when the document is ready (before onload and before images are loaded). Can be
         * accessed shorthanded as Ext.onReady().
         * @param {Function} fn The method the event invokes.
         * @param {Object} scope (optional) The scope (this reference) in which the handler function executes. Defaults to the browser window.
         * @param {boolean} options (optional) Options object as passed to {@link Ext.Element#addListener}. It is recommended that the options
         * {single: true} be used so that the handler is removed on first invocation.
         */
        onDocumentReady : function(fn, scope, options){
            if(Ext.isReady){ // if it already fired or document.body is present
                docReadyEvent || (docReadyEvent = new Ext.util.Event());
                docReadyEvent.addListener(fn, scope, options);
                docReadyEvent.fire();
                docReadyEvent.listeners = [];
            }else{
                if(!docReadyEvent){
                    initDocReady();
                }
                options = options || {};
                options.delay = options.delay || 1;
                docReadyEvent.addListener(fn, scope, options);
            }
        },

/**
         * Forces a document ready state transition for the framework.  Used when Ext is loaded
         * into a DOM structure AFTER initial page load (Google API or other dynamic load scenario.
         * Any pending 'onDocumentReady' handlers will be fired (if not already handled).
         */
        fireDocReady  : fireDocReady
    };

/**
     * Appends an event handler to an element.  Shorthand for {@link #addListener}.
     * @param {String/HTMLElement} el The html element or id to assign the event handler to
     * @param {String} eventName The name of the event to listen for.
     * @param {Function} handler The handler function the event invokes.
     * @param {Object} scope (optional) (this reference) in which the handler function executes. Defaults to the Element.
     * @param {Object} options (optional) An object containing standard {@link #addListener} options
     * @member Ext.EventManager
     * @method on
     */
    pub.on = pub.addListener;

/**
     * Removes an event handler from an element.  Shorthand for {@link #removeListener}.
     * @param {String/HTMLElement} el The id or html element from which to remove the listener.
     * @param {String} eventName The name of the event.
     * @param {Function} fn The handler function to remove. This must be a reference to the function passed into the {@link #on} call.
     * @param {Object} scope If a scope (this reference) was specified when the listener was added,
     * then this must refer to the same object.
     * @member Ext.EventManager
     * @method un
     */
    pub.un = pub.removeListener;

    pub.stoppedMouseDownEvent = new Ext.util.Event();
    return pub;
}();

/**
  * Adds a listener to be notified when the document is ready (before onload and before images are loaded). Shorthand of {@link Ext.EventManager#onDocumentReady}.
  * @param {Function} fn The method the event invokes.
  * @param {Object} scope (optional) The scope (this reference) in which the handler function executes. Defaults to the browser window.
  * @param {boolean} options (optional) Options object as passed to {@link Ext.Element#addListener}. It is recommended that the options
  * {single: true} be used so that the handler is removed on first invocation.
  * @member Ext
  * @method onReady
 */
Ext.onReady = Ext.EventManager.onDocumentReady;

//Initialize doc classes
(function(){

    var initExtCss = function(){
        // find the body element
        var bd = document.body || document.getElementsByTagName('body')[0];
        if(!bd){ return false; }
        var cls = [' ',
                Ext.isIE ? "ext-ie " + (Ext.isIE6 ? 'ext-ie6' : (Ext.isIE7 ? 'ext-ie7' : 'ext-ie8'))
                : Ext.isGecko ? "ext-gecko " + (Ext.isGecko2 ? 'ext-gecko2' : 'ext-gecko3')
                : Ext.isOpera ? "ext-opera"
                : Ext.isWebKit ? "ext-webkit" : ""];

        if(Ext.isSafari){
            cls.push("ext-safari " + (Ext.isSafari2 ? 'ext-safari2' : (Ext.isSafari3 ? 'ext-safari3' : 'ext-safari4')));
        }else if(Ext.isChrome){
            cls.push("ext-chrome");
        }

        if(Ext.isMac){
            cls.push("ext-mac");
        }
        if(Ext.isLinux){
            cls.push("ext-linux");
        }

        if(Ext.isStrict || Ext.isBorderBox){ // add to the parent to allow for selectors like ".ext-strict .ext-ie"
            var p = bd.parentNode;
            if(p){
                p.className += Ext.isStrict ? ' ext-strict' : ' ext-border-box';
            }
        }
        bd.className += cls.join(' ');
        return true;
    }

    if(!initExtCss()){
        Ext.onReady(initExtCss);
    }
})();

/**
 * @class Ext.EventObject
 * Just as {@link Ext.Element} wraps around a native DOM node, Ext.EventObject
 * wraps the browser's native event-object normalizing cross-browser differences,
 * such as which mouse button is clicked, keys pressed, mechanisms to stop
 * event-propagation along with a method to prevent default actions from taking place.
 *
For example:

 *

function handleClick(e, t){ // e is not a standard event object, it is a Ext.EventObject
    e.preventDefault();
    var target = e.getTarget(); // same as t (the target HTMLElement)
    ...
}
var myDiv = {@link Ext#get Ext.get}("myDiv");  // get reference to an {@link Ext.Element}
myDiv.on(         // 'on' is shorthand for addListener
    "click",      // perform an action on click of myDiv
    handleClick   // reference to the action handler
);
// other methods to do the same:
Ext.EventManager.on("myDiv", 'click', handleClick);
Ext.EventManager.addListener("myDiv", 'click', handleClick);

 * @singleton
 */
Ext.EventObject = function(){
    var E = Ext.lib.Event,
        // safari keypress events for special keys return bad keycodes
        safariKeys = {
            3 : 13, // enter
            63234 : 37, // left
            63235 : 39, // right
            63232 : 38, // up
            63233 : 40, // down
            63276 : 33, // page up
            63277 : 34, // page down
            63272 : 46, // delete
            63273 : 36, // home
            63275 : 35  // end
        },
        // normalize button clicks
        btnMap = Ext.isIE ? {1:0,4:1,2:2} :
                (Ext.isWebKit ? {1:0,2:1,3:2} : {0:0,1:1,2:2});

    Ext.EventObjectImpl = function(e){
        if(e){
            this.setEvent(e.browserEvent || e);
        }
    };

    Ext.EventObjectImpl.prototype = {
           /** @private */
        setEvent : function(e){
            var me = this;
            if(e == me || (e && e.browserEvent)){ // already wrapped
                return e;
            }
            me.browserEvent = e;
            if(e){
                // normalize buttons
                me.button = e.button ? btnMap[e.button] : (e.which ? e.which - 1 : -1);
                if(e.type == 'click' && me.button == -1){
                    me.button = 0;
                }
                me.type = e.type;
                me.shiftKey = e.shiftKey;
                // mac metaKey behaves like ctrlKey
                me.ctrlKey = e.ctrlKey || e.metaKey || false;
                me.altKey = e.altKey;
                // in getKey these will be normalized for the mac
                me.keyCode = e.keyCode;
                me.charCode = e.charCode;
                // cache the target for the delayed and or buffered events
                me.target = E.getTarget(e);
                // same for XY
                me.xy = E.getXY(e);
            }else{
                me.button = -1;
                me.shiftKey = false;
                me.ctrlKey = false;
                me.altKey = false;
                me.keyCode = 0;
                me.charCode = 0;
                me.target = null;
                me.xy = [0, 0];
            }
            return me;
        },

/**
         * Stop the event (preventDefault and stopPropagation)
         */
        stopEvent : function(){
            var me = this;
            if(me.browserEvent){
                if(me.browserEvent.type == 'mousedown'){
                    Ext.EventManager.stoppedMouseDownEvent.fire(me);
                }
                E.stopEvent(me.browserEvent);
            }
        },

/**
         * Prevents the browsers default handling of the event.
         */
        preventDefault : function(){
            if(this.browserEvent){
                E.preventDefault(this.browserEvent);
            }
        },

/**
         * Cancels bubbling of the event.
         */
        stopPropagation : function(){
            var me = this;
            if(me.browserEvent){
                if(me.browserEvent.type == 'mousedown'){
                    Ext.EventManager.stoppedMouseDownEvent.fire(me);
                }
                E.stopPropagation(me.browserEvent);
            }
        },

/**
         * Gets the character code for the event.
         * @return {Number}
         */
        getCharCode : function(){
            return this.charCode || this.keyCode;
        },

/**
         * Returns a normalized keyCode for the event.
         * @return {Number} The key code
         */
        getKey : function(){
            return this.normalizeKey(this.keyCode || this.charCode)
        },

        // private
        normalizeKey: function(k){
            return Ext.isSafari ? (safariKeys[k] || k) : k;
        },

/**
         * Gets the x coordinate of the event.
         * @return {Number}
         */
        getPageX : function(){
            return this.xy[0];
        },

/**
         * Gets the y coordinate of the event.
         * @return {Number}
         */
        getPageY : function(){
            return this.xy[1];
        },

/**
         * Gets the page coordinates of the event.
         * @return {Array} The xy values like [x, y]
         */
        getXY : function(){
            return this.xy;
        },

/**
         * Gets the target for the event.
         * @param {String} selector (optional) A simple selector to filter the target or look for an ancestor of the target
         * @param {Number/Mixed} maxDepth (optional) The max depth to
                search as a number or element (defaults to 10 || document.body)
         * @param {Boolean} returnEl (optional) True to return a Ext.Element object instead of DOM node
         * @return {HTMLelement}
         */
        getTarget : function(selector, maxDepth, returnEl){
            return selector ? Ext.fly(this.target).findParent(selector, maxDepth, returnEl) : (returnEl ? Ext.get(this.target) : this.target);
        },

/**
         * Gets the related target.
         * @return {HTMLElement}
         */
        getRelatedTarget : function(){
            return this.browserEvent ? E.getRelatedTarget(this.browserEvent) : null;
        },

/**
         * Normalizes mouse wheel delta across browsers
         * @return {Number} The delta
         */
        getWheelDelta : function(){
            var e = this.browserEvent;
            var delta = 0;
            if(e.wheelDelta){ /* IE/Opera. */
                delta = e.wheelDelta/120;
            }else if(e.detail){ /* Mozilla case. */
                delta = -e.detail/3;
            }
            return delta;
        },

/**
        * Returns true if the target of this event is a child of el.  Unless the allowEl parameter is set, it will return false if if the target is el.
        * Example usage:

        // Handle click on any child of an element
        Ext.getBody().on('click', function(e){
            if(e.within('some-el')){
                alert('Clicked on a child of some-el!');
            }
        });

        // Handle click directly on an element, ignoring clicks on child nodes
        Ext.getBody().on('click', function(e,t){
            if((t.id == 'some-el') && !e.within(t, true)){
                alert('Clicked directly on some-el!');
            }
        });

         * @param {Mixed} el The id, DOM element or Ext.Element to check
         * @param {Boolean} related (optional) true to test if the related target is within el instead of the target
         * @param {Boolean} allowEl {optional} true to also check if the passed element is the target or related target
         * @return {Boolean}
         */
        within : function(el, related, allowEl){
            if(el){
                var t = this[related ? "getRelatedTarget" : "getTarget"]();
                return t && ((allowEl ? (t == Ext.getDom(el)) : false) || Ext.fly(el).contains(t));
            }
            return false;
        }
     };

    return new Ext.EventObjectImpl();
}();


The source code

/*!
 * licensing@extjs.com
 * http://www.extjs.com/license
 */

/**
 * @class Ext.FlashProxy
 * @singleton
 */
Ext.FlashEventProxy = {
    onEvent : function(id, e){
        var fp = Ext.getCmp(id);
        if(fp){
            fp.onFlashEvent(e);
        }else{
            arguments.callee.defer(10, this, [id, e]);
        }
    }
};


The source code

/*!
 * licensing@extjs.com
 * http://www.extjs.com/license
 */
/*
* Portions of this file are based on pieces of Yahoo User Interface Library
* Copyright (c) 2007, Yahoo! Inc. All rights reserved.
* YUI licensed under the BSD License:
* http://developer.yahoo.net/yui/license.txt
*/
Ext.lib.Ajax = function() {
    var activeX = ['MSXML2.XMLHTTP.3.0',
                   'MSXML2.XMLHTTP',
                   'Microsoft.XMLHTTP'],
        CONTENTTYPE = 'Content-Type';

    // private
    function setHeader(o) {
        var conn = o.conn,
            prop;

        function setTheHeaders(conn, headers){
            for (prop in headers) {
                if (headers.hasOwnProperty(prop)) {
                    conn.setRequestHeader(prop, headers[prop]);
                }
            }
        }

        if (pub.defaultHeaders) {
            setTheHeaders(conn, pub.defaultHeaders);
        }

        if (pub.headers) {
            setTheHeaders(conn, pub.headers);
            delete pub.headers;
        }
    }

    // private
    function createExceptionObject(tId, callbackArg, isAbort, isTimeout) {
        return {
            tId : tId,
            status : isAbort ? -1 : 0,
            statusText : isAbort ? 'transaction aborted' : 'communication failure',
            isAbort: isAbort,
            isTimeout: isTimeout,
            argument : callbackArg
        };
    }

    // private
    function initHeader(label, value) {
        (pub.headers = pub.headers || {})[label] = value;
    }

    // private
    function createResponseObject(o, callbackArg) {
        var headerObj = {},
            headerStr,
            conn = o.conn,
            t,
            s,
            // see: https://prototype.lighthouseapp.com/projects/8886/tickets/129-ie-mangles-http-response-status-code-204-to-1223
            isBrokenStatus = conn.status == 1223;

        try {
            headerStr = o.conn.getAllResponseHeaders();
            Ext.each(headerStr.replace(/\r\n/g, '\n').split('\n'), function(v){
                t = v.indexOf(':');
                if(t >= 0){
                    s = v.substr(0, t).toLowerCase();
                    if(v.charAt(t + 1) == ' '){
                        ++t;
                    }
                    headerObj[s] = v.substr(t + 1);
                }
            });
        } catch(e) {}

        return {
            tId : o.tId,
            // Normalize the status and statusText when IE returns 1223, see the above link.
            status : isBrokenStatus ? 204 : conn.status,
            statusText : isBrokenStatus ? 'No Content' : conn.statusText,
            getResponseHeader : function(header){return headerObj[header.toLowerCase()];},
            getAllResponseHeaders : function(){return headerStr},
            responseText : conn.responseText,
            responseXML : conn.responseXML,
            argument : callbackArg
        };
    }

    // private
    function releaseObject(o) {
        if (o.tId) {
            pub.conn[o.tId] = null;
        }
        o.conn = null;
        o = null;
    }

    // private
    function handleTransactionResponse(o, callback, isAbort, isTimeout) {
        if (!callback) {
            releaseObject(o);
            return;
        }

        var httpStatus, responseObject;

        try {
            if (o.conn.status !== undefined && o.conn.status != 0) {
                httpStatus = o.conn.status;
            }
            else {
                httpStatus = 13030;
            }
        }
        catch(e) {
            httpStatus = 13030;
        }

        if ((httpStatus >= 200 && httpStatus < 300) || (Ext.isIE && httpStatus == 1223)) {
            responseObject = createResponseObject(o, callback.argument);
            if (callback.success) {
                if (!callback.scope) {
                    callback.success(responseObject);
                }
                else {
                    callback.success.apply(callback.scope, [responseObject]);
                }
            }
        }
        else {
            switch (httpStatus) {
                case 12002:
                case 12029:
                case 12030:
                case 12031:
                case 12152:
                case 13030:
                    responseObject = createExceptionObject(o.tId, callback.argument, (isAbort ? isAbort : false), isTimeout);
                    if (callback.failure) {
                        if (!callback.scope) {
                            callback.failure(responseObject);
                        }
                        else {
                            callback.failure.apply(callback.scope, [responseObject]);
                        }
                    }
                    break;
                default:
                    responseObject = createResponseObject(o, callback.argument);
                    if (callback.failure) {
                        if (!callback.scope) {
                            callback.failure(responseObject);
                        }
                        else {
                            callback.failure.apply(callback.scope, [responseObject]);
                        }
                    }
            }
        }

        releaseObject(o);
        responseObject = null;
    }

    // private
    function handleReadyState(o, callback){
    callback = callback || {};
        var conn = o.conn,
            tId = o.tId,
            poll = pub.poll,
            cbTimeout = callback.timeout || null;

        if (cbTimeout) {
            pub.conn[tId] = conn;
            pub.timeout[tId] = setTimeout(function() {
                pub.abort(o, callback, true);
            }, cbTimeout);
        }

        poll[tId] = setInterval(
            function() {
                if (conn && conn.readyState == 4) {
                    clearInterval(poll[tId]);
                    poll[tId] = null;

                    if (cbTimeout) {
                        clearTimeout(pub.timeout[tId]);
                        pub.timeout[tId] = null;
                    }

                    handleTransactionResponse(o, callback);
                }
            },
            pub.pollInterval);
    }

    // private
    function asyncRequest(method, uri, callback, postData) {
        var o = getConnectionObject() || null;

        if (o) {
            o.conn.open(method, uri, true);

            if (pub.useDefaultXhrHeader) {
                initHeader('X-Requested-With', pub.defaultXhrHeader);
            }

            if(postData && pub.useDefaultHeader && (!pub.headers || !pub.headers[CONTENTTYPE])){
                initHeader(CONTENTTYPE, pub.defaultPostHeader);
            }

            if (pub.defaultHeaders || pub.headers) {
                setHeader(o);
            }

            handleReadyState(o, callback);
            o.conn.send(postData || null);
        }
        return o;
    }

    // private
    function getConnectionObject() {
        var o;

        try {
            if (o = createXhrObject(pub.transactionId)) {
                pub.transactionId++;
            }
        } catch(e) {
        } finally {
            return o;
        }
    }

    // private
    function createXhrObject(transactionId) {
        var http;

        try {
            http = new XMLHttpRequest();
        } catch(e) {
            for (var i = 0; i < activeX.length; ++i) {
                try {
                    http = new ActiveXObject(activeX[i]);
                    break;
                } catch(e) {}
            }
        } finally {
            return {conn : http, tId : transactionId};
        }
    }

    var pub = {
        request : function(method, uri, cb, data, options) {
            if(options){
                var me = this,
                    xmlData = options.xmlData,
                    jsonData = options.jsonData,
                    hs;

                Ext.applyIf(me, options);

                if(xmlData || jsonData){
                    hs = me.headers;
                    if(!hs || !hs[CONTENTTYPE]){
                        initHeader(CONTENTTYPE, xmlData ? 'text/xml' : 'application/json');
                    }
                    data = xmlData || (!Ext.isPrimitive(jsonData) ? Ext.encode(jsonData) : jsonData);
                }
            }
            return asyncRequest(method || options.method || "POST", uri, cb, data);
        },

        serializeForm : function(form) {
            var fElements = form.elements || (document.forms[form] || Ext.getDom(form)).elements,
                hasSubmit = false,
                encoder = encodeURIComponent,
                element,
                options,
                name,
                val,
                data = '',
                type;

            Ext.each(fElements, function(element) {
                name = element.name;
                type = element.type;

                if (!element.disabled && name){
                    if(/select-(one|multiple)/i.test(type)) {
                        Ext.each(element.options, function(opt) {
                            if (opt.selected) {
                                data += String.format("{0}={1}&", encoder(name), encoder((opt.hasAttribute ? opt.hasAttribute('value') : opt.getAttribute('value') !== null) ? opt.value : opt.text));
                            }
                        });
                    } else if(!/file|undefined|reset|button/i.test(type)) {
                            if(!(/radio|checkbox/i.test(type) && !element.checked) && !(type == 'submit' && hasSubmit)){

                                data += encoder(name) + '=' + encoder(element.value) + '&';
                                hasSubmit = /submit/i.test(type);
                            }
                    }
                }
            });
            return data.substr(0, data.length - 1);
        },

        useDefaultHeader : true,
        defaultPostHeader : 'application/x-www-form-urlencoded; charset=UTF-8',
        useDefaultXhrHeader : true,
        defaultXhrHeader : 'XMLHttpRequest',
        poll : {},
        timeout : {},
        conn: {},
        pollInterval : 50,
        transactionId : 0,

//  This is never called - Is it worth exposing this?
//          setProgId : function(id) {
//              activeX.unshift(id);
//          },

//  This is never called - Is it worth exposing this?
//          setDefaultPostHeader : function(b) {
//              this.useDefaultHeader = b;
//          },

//  This is never called - Is it worth exposing this?
//          setDefaultXhrHeader : function(b) {
//              this.useDefaultXhrHeader = b;
//          },

//  This is never called - Is it worth exposing this?
//          setPollingInterval : function(i) {
//              if (typeof i == 'number' && isFinite(i)) {
//                  this.pollInterval = i;
//              }
//          },

//  This is never called - Is it worth exposing this?
//          resetDefaultHeaders : function() {
//              this.defaultHeaders = null;
//          },

        abort : function(o, callback, isTimeout) {
            var me = this,
                tId = o.tId,
                isAbort = false;

            if (me.isCallInProgress(o)) {
                o.conn.abort();
                clearInterval(me.poll[tId]);
                me.poll[tId] = null;
                clearTimeout(pub.timeout[tId]);
                me.timeout[tId] = null;

                handleTransactionResponse(o, callback, (isAbort = true), isTimeout);
            }
            return isAbort;
        },

        isCallInProgress : function(o) {
            // if there is a connection and readyState is not 0 or 4
            return o.conn && !{0:true,4:true}[o.conn.readyState];
        }
    };
    return pub;
}();


The source code

/*!
 * licensing@extjs.com
 * http://www.extjs.com/license
 */
// Easing functions
(function(){
    // shortcuts to aid compression
    var abs = Math.abs,
        pi = Math.PI,
        asin = Math.asin,
        pow = Math.pow,
        sin = Math.sin,
        EXTLIB = Ext.lib;

    Ext.apply(EXTLIB.Easing, {

        easeBoth: function (t, b, c, d) {
            return ((t /= d / 2) < 1)  ?  c / 2 * t * t + b  :  -c / 2 * ((--t) * (t - 2) - 1) + b;
        },

        easeInStrong: function (t, b, c, d) {
            return c * (t /= d) * t * t * t + b;
        },

        easeOutStrong: function (t, b, c, d) {
            return -c * ((t = t / d - 1) * t * t * t - 1) + b;
        },

        easeBothStrong: function (t, b, c, d) {
            return ((t /= d / 2) < 1)  ?  c / 2 * t * t * t * t + b  :  -c / 2 * ((t -= 2) * t * t * t - 2) + b;
        },

        elasticIn: function (t, b, c, d, a, p) {
            if (t == 0 || (t /= d) == 1) {
                return t == 0 ? b : b + c;
            }
            p = p || (d * .3);

            var s;
            if (a >= abs(c)) {
                s = p / (2 * pi) * asin(c / a);
            } else {
                a = c;
                s = p / 4;
            }

            return -(a * pow(2, 10 * (t -= 1)) * sin((t * d - s) * (2 * pi) / p)) + b;

        },

        elasticOut: function (t, b, c, d, a, p) {
            if (t == 0 || (t /= d) == 1) {
                return t == 0 ? b : b + c;
            }
            p = p || (d * .3);

            var s;
            if (a >= abs(c)) {
                s = p / (2 * pi) * asin(c / a);
            } else {
                a = c;
                s = p / 4;
            }

            return a * pow(2, -10 * t) * sin((t * d - s) * (2 * pi) / p) + c + b;
        },

        elasticBoth: function (t, b, c, d, a, p) {
            if (t == 0 || (t /= d / 2) == 2) {
                return t == 0 ? b : b + c;
            }

            p = p || (d * (.3 * 1.5));

            var s;
            if (a >= abs(c)) {
                s = p / (2 * pi) * asin(c / a);
            } else {
                a = c;
                s = p / 4;
            }

            return t < 1 ?
                    -.5 * (a * pow(2, 10 * (t -= 1)) * sin((t * d - s) * (2 * pi) / p)) + b :
                    a * pow(2, -10 * (t -= 1)) * sin((t * d - s) * (2 * pi) / p) * .5 + c + b;
        },

        backIn: function (t, b, c, d, s) {
            s = s ||  1.70158;
            return c * (t /= d) * t * ((s + 1) * t - s) + b;
        },

        backOut: function (t, b, c, d, s) {
            if (!s) {
                s = 1.70158;
            }
            return c * ((t = t / d - 1) * t * ((s + 1) * t + s) + 1) + b;
        },

        backBoth: function (t, b, c, d, s) {
            s = s || 1.70158;

            return ((t /= d / 2 ) < 1) ?
                    c / 2 * (t * t * (((s *= (1.525)) + 1) * t - s)) + b :
                    c / 2 * ((t -= 2) * t * (((s *= (1.525)) + 1) * t + s) + 2) + b;
        },

        bounceIn: function (t, b, c, d) {
            return c - EXTLIB.Easing.bounceOut(d - t, 0, c, d) + b;
        },

        bounceOut: function (t, b, c, d) {
        if ((t /= d) < (1 / 2.75)) {
                return c * (7.5625 * t * t) + b;
            } else if (t < (2 / 2.75)) {
                return c * (7.5625 * (t -= (1.5 / 2.75)) * t + .75) + b;
            } else if (t < (2.5 / 2.75)) {
                return c * (7.5625 * (t -= (2.25 / 2.75)) * t + .9375) + b;
            }
            return c * (7.5625 * (t -= (2.625 / 2.75)) * t + .984375) + b;
        },

        bounceBoth: function (t, b, c, d) {
            return (t < d / 2) ?
                    EXTLIB.Easing.bounceIn(t * 2, 0, c, d) * .5 + b :
                    EXTLIB.Easing.bounceOut(t * 2 - d, 0, c, d) * .5 + c * .5 + b;
        }
    });
})();

(function() {
    var EXTLIB = Ext.lib;
    // Color Animation
    EXTLIB.Anim.color = function(el, args, duration, easing, cb, scope) {
        return EXTLIB.Anim.run(el, args, duration, easing, cb, scope, EXTLIB.ColorAnim);
    }

    EXTLIB.ColorAnim = function(el, attributes, duration, method) {
        EXTLIB.ColorAnim.superclass.constructor.call(this, el, attributes, duration, method);
    };

    Ext.extend(EXTLIB.ColorAnim, EXTLIB.AnimBase);

    var superclass = EXTLIB.ColorAnim.superclass,
        colorRE = /color$/i,
        transparentRE = /^transparent|rgba\(0, 0, 0, 0\)$/,
        rgbRE = /^rgb\(([0-9]+)\s*,\s*([0-9]+)\s*,\s*([0-9]+)\)$/i,
        hexRE= /^#?([0-9A-F]{2})([0-9A-F]{2})([0-9A-F]{2})$/i,
        hex3RE = /^#?([0-9A-F]{1})([0-9A-F]{1})([0-9A-F]{1})$/i,
        isset = function(v){
            return typeof v !== 'undefined';
        };

    // private
    function parseColor(s) {
        var pi = parseInt,
            base,
            out = null,
            c;

        if (s.length == 3) {
            return s;
        }

        Ext.each([hexRE, rgbRE, hex3RE], function(re, idx){
            base = (idx % 2 == 0) ? 16 : 10;
            c = re.exec(s);
            if(c && c.length == 4){
                out = [pi(c[1], base), pi(c[2], base), pi(c[3], base)];
                return false;
            }
        });
        return out;
    }

    Ext.apply(EXTLIB.ColorAnim.prototype, {
        getAttr : function(attr) {
            var me = this,
                el = me.el,
                val;
            if(colorRE.test(attr)){
                while(el && transparentRE.test(val = Ext.fly(el).getStyle(attr))){
                    el = el.parentNode;
                    val = "fff";
                }
            }else{
                val = superclass.getAttr.call(me, attr);
            }
            return val;
        },

        doMethod : function(attr, start, end) {
            var me = this,
                val,
                floor = Math.floor,
                i,
                len,
                v;

            if(colorRE.test(attr)){
                val = [];
                end = end || [];

                for(i = 0, len = start.length; i < len; i++) {
                    v = start[i];
                    val[i] = superclass.doMethod.call(me, attr, v, end[i]);
                }
                val = 'rgb(' + floor(val[0]) + ',' + floor(val[1]) + ',' + floor(val[2]) + ')';
            }else{
                val = superclass.doMethod.call(me, attr, start, end);
            }
            return val;
        },

        setRunAttr : function(attr) {
            var me = this,
                a = me.attributes[attr],
                to = a.to,
                by = a.by,
                ra;

            superclass.setRunAttr.call(me, attr);
            ra = me.runAttrs[attr];
            if(colorRE.test(attr)){
                var start = parseColor(ra.start),
                    end = parseColor(ra.end);

                if(!isset(to) && isset(by)){
                    end = parseColor(by);
                    for(var i=0,len=start.length; i


The source code

/*!
 * licensing@extjs.com
 * http://www.extjs.com/license
 */
(function(){
    var EXTLIB = Ext.lib,
        noNegatives = /width|height|opacity|padding/i,
        offsetAttribute = /^((width|height)|(top|left))$/,
        defaultUnit = /width|height|top$|bottom$|left$|right$/i,
        offsetUnit =  /\d+(em|%|en|ex|pt|in|cm|mm|pc)$/i,
        isset = function(v){
            return typeof v !== 'undefined';
        },
        now = function(){
            return new Date();
        };

    EXTLIB.Anim = {
        motion : function(el, args, duration, easing, cb, scope) {
            return this.run(el, args, duration, easing, cb, scope, Ext.lib.Motion);
        },

        run : function(el, args, duration, easing, cb, scope, type) {
            type = type || Ext.lib.AnimBase;
            if (typeof easing == "string") {
                easing = Ext.lib.Easing[easing];
            }
            var anim = new type(el, args, duration, easing);
            anim.animateX(function() {
                if(Ext.isFunction(cb)){
                    cb.call(scope);
                }
            });
            return anim;
        }
    };

    EXTLIB.AnimBase = function(el, attributes, duration, method) {
        if (el) {
            this.init(el, attributes, duration, method);
        }
    };

    EXTLIB.AnimBase.prototype = {
        doMethod: function(attr, start, end) {
            var me = this;
            return me.method(me.curFrame, start, end - start, me.totalFrames);
        },

        setAttr: function(attr, val, unit) {
            if (noNegatives.test(attr) && val < 0) {
                val = 0;
            }
            Ext.fly(this.el, '_anim').setStyle(attr, val + unit);
        },

        getAttr: function(attr) {
            var el = Ext.fly(this.el),
                val = el.getStyle(attr),
                a = offsetAttribute.exec(attr) || [];

            if (val !== 'auto' && !offsetUnit.test(val)) {
                return parseFloat(val);
            }

            return (!!(a[2]) || (el.getStyle('position') == 'absolute' && !!(a[3]))) ? el.dom['offset' + a[0].charAt(0).toUpperCase() + a[0].substr(1)] : 0;
        },

        getDefaultUnit: function(attr) {
            return defaultUnit.test(attr) ? 'px' : '';
        },

        animateX : function(callback, scope) {
            var me = this,
                f = function() {
                me.onComplete.removeListener(f);
                if (Ext.isFunction(callback)) {
                    callback.call(scope || me, me);
                }
            };
            me.onComplete.addListener(f, me);
            me.animate();
        },

        setRunAttr: function(attr) {
            var me = this,
                a = this.attributes[attr],
                to = a.to,
                by = a.by,
                from = a.from,
                unit = a.unit,
                ra = (this.runAttrs[attr] = {}),
                end;

            if (!isset(to) && !isset(by)){
                return false;
            }

            var start = isset(from) ? from : me.getAttr(attr);
            if (isset(to)) {
                end = to;
            }else if(isset(by)) {
                if (Ext.isArray(start)){
                    end = [];
                    for(var i=0,len=start.length; i 0 && isFinite(tweak)){
                if(tween.curFrame + tweak >= frames){
                    tweak = frames - (frame + 1);
                }
                tween.curFrame += tweak;
            }
        };
    };

    EXTLIB.Bezier = new function() {

        this.getPosition = function(points, t) {
            var n = points.length,
                tmp = [],
                c = 1 - t,
                i,
                j;

            for (i = 0; i < n; ++i) {
                tmp[i] = [points[i][0], points[i][1]];
            }

            for (j = 1; j < n; ++j) {
                for (i = 0; i < n - j; ++i) {
                    tmp[i][0] = c * tmp[i][0] + t * tmp[parseInt(i + 1, 10)][0];
                    tmp[i][1] = c * tmp[i][1] + t * tmp[parseInt(i + 1, 10)][1];
                }
            }

            return [ tmp[0][0], tmp[0][1] ];

        };
    };

    EXTLIB.Easing = {
        easeNone: function (t, b, c, d) {
            return c * t / d + b;
        },

        easeIn: function (t, b, c, d) {
            return c * (t /= d) * t + b;
        },

        easeOut: function (t, b, c, d) {
            return -c * (t /= d) * (t - 2) + b;
        }
    };

    (function() {
        EXTLIB.Motion = function(el, attributes, duration, method) {
            if (el) {
                EXTLIB.Motion.superclass.constructor.call(this, el, attributes, duration, method);
            }
        };

        Ext.extend(EXTLIB.Motion, Ext.lib.AnimBase);

        var superclass = EXTLIB.Motion.superclass,
            proto = EXTLIB.Motion.prototype,
            pointsRe = /^points$/i;

        Ext.apply(EXTLIB.Motion.prototype, {
            setAttr: function(attr, val, unit){
                var me = this,
                    setAttr = superclass.setAttr;

                if (pointsRe.test(attr)) {
                    unit = unit || 'px';
                    setAttr.call(me, 'left', val[0], unit);
                    setAttr.call(me, 'top', val[1], unit);
                } else {
                    setAttr.call(me, attr, val, unit);
                }
            },

            getAttr: function(attr){
                var me = this,
                    getAttr = superclass.getAttr;

                return pointsRe.test(attr) ? [getAttr.call(me, 'left'), getAttr.call(me, 'top')] : getAttr.call(me, attr);
            },

            doMethod: function(attr, start, end){
                var me = this;

                return pointsRe.test(attr)
                        ? EXTLIB.Bezier.getPosition(me.runAttrs[attr], me.method(me.curFrame, 0, 100, me.totalFrames) / 100)
                        : superclass.doMethod.call(me, attr, start, end);
            },

            setRunAttr: function(attr){
                if(pointsRe.test(attr)){

                    var me = this,
                        el = this.el,
                        points = this.attributes.points,
                        control = points.control || [],
                        from = points.from,
                        to = points.to,
                        by = points.by,
                        DOM = EXTLIB.Dom,
                        start,
                        i,
                        end,
                        len,
                        ra;

                    if(control.length > 0 && !Ext.isArray(control[0])){
                        control = [control];
                    }else{
                        /*
                        var tmp = [];
                        for (i = 0,len = control.length; i < len; ++i) {
                            tmp[i] = control[i];
                        }
                        control = tmp;
                        */
                    }

                    Ext.fly(el, '_anim').position();
                    DOM.setXY(el, isset(from) ? from : DOM.getXY(el));
                    start = me.getAttr('points');

                    if(isset(to)){
                        end = translateValues.call(me, to, start);
                        for (i = 0,len = control.length; i < len; ++i) {
                            control[i] = translateValues.call(me, control[i], start);
                        }
                    } else if (isset(by)) {
                        end = [start[0] + by[0], start[1] + by[1]];

                        for (i = 0,len = control.length; i < len; ++i) {
                            control[i] = [ start[0] + control[i][0], start[1] + control[i][1] ];
                        }
                    }

                    ra = this.runAttrs[attr] = [start];
                    if (control.length > 0) {
                        ra = ra.concat(control);
                    }

                    ra[ra.length] = end;
                }else{
                    superclass.setRunAttr.call(this, attr);
                }
            }
        });

        var translateValues = function(val, start) {
            var pageXY = EXTLIB.Dom.getXY(this.el);
            return [val[0] - pageXY[0] + start[0], val[1] - pageXY[1] + start[1]];
        };
    })();
})();


The source code

/*!
 * licensing@extjs.com
 * http://www.extjs.com/license
 */
(function(){
    var libFlyweight;

    function fly(el) {
        if (!libFlyweight) {
            libFlyweight = new Ext.Element.Flyweight();
        }
        libFlyweight.dom = el;
        return libFlyweight;
    }


The source code

/*!
 * licensing@extjs.com
 * http://www.extjs.com/license
 */
Ext.lib.Dom.getRegion = function(el) {
    return Ext.lib.Region.getRegion(el);
};


The source code

/*!
 * licensing@extjs.com
 * http://www.extjs.com/license
 */
(function(){
    var doc = document,
        isCSS1 = doc.compatMode == "CSS1Compat",
        MAX = Math.max,
        ROUND = Math.round,
        PARSEINT = parseInt;

    Ext.lib.Dom = {
        isAncestor : function(p, c) {
            var ret = false;

            p = Ext.getDom(p);
            c = Ext.getDom(c);
            if (p && c) {
                if (p.contains) {
                    return p.contains(c);
                } else if (p.compareDocumentPosition) {
                    return !!(p.compareDocumentPosition(c) & 16);
                } else {
                    while (c = c.parentNode) {
                        ret = c == p || ret;
                    }
                }
            }
            return ret;
        },

        getViewWidth : function(full) {
            return full ? this.getDocumentWidth() : this.getViewportWidth();
        },

        getViewHeight : function(full) {
            return full ? this.getDocumentHeight() : this.getViewportHeight();
        },

        getDocumentHeight: function() {
            return MAX(!isCSS1 ? doc.body.scrollHeight : doc.documentElement.scrollHeight, this.getViewportHeight());
        },

        getDocumentWidth: function() {
            return MAX(!isCSS1 ? doc.body.scrollWidth : doc.documentElement.scrollWidth, this.getViewportWidth());
        },

        getViewportHeight: function(){
            return Ext.isIE ?
                   (Ext.isStrict ? doc.documentElement.clientHeight : doc.body.clientHeight) :
                   self.innerHeight;
        },

        getViewportWidth : function() {
            return !Ext.isStrict && !Ext.isOpera ? doc.body.clientWidth :
                   Ext.isIE ? doc.documentElement.clientWidth : self.innerWidth;
        },

        getY : function(el) {
            return this.getXY(el)[1];
        },

        getX : function(el) {
            return this.getXY(el)[0];
        },

        getXY : function(el) {
            var p,
                pe,
                b,
                bt,
                bl,
                dbd,
                x = 0,
                y = 0,
                scroll,
                hasAbsolute,
                bd = (doc.body || doc.documentElement),
                ret = [0,0];

            el = Ext.getDom(el);

            if(el != bd){
                if (el.getBoundingClientRect) {
                    b = el.getBoundingClientRect();
                    scroll = fly(document).getScroll();
                    ret = [ROUND(b.left + scroll.left), ROUND(b.top + scroll.top)];
                } else {
                    p = el;
                    hasAbsolute = fly(el).isStyle("position", "absolute");

                    while (p) {
                        pe = fly(p);
                        x += p.offsetLeft;
                        y += p.offsetTop;

                        hasAbsolute = hasAbsolute || pe.isStyle("position", "absolute");

                        if (Ext.isGecko) {
                            y += bt = PARSEINT(pe.getStyle("borderTopWidth"), 10) || 0;
                            x += bl = PARSEINT(pe.getStyle("borderLeftWidth"), 10) || 0;

                            if (p != el && !pe.isStyle('overflow','visible')) {
                                x += bl;
                                y += bt;
                            }
                        }
                        p = p.offsetParent;
                    }

                    if (Ext.isSafari && hasAbsolute) {
                        x -= bd.offsetLeft;
                        y -= bd.offsetTop;
                    }

                    if (Ext.isGecko && !hasAbsolute) {
                        dbd = fly(bd);
                        x += PARSEINT(dbd.getStyle("borderLeftWidth"), 10) || 0;
                        y += PARSEINT(dbd.getStyle("borderTopWidth"), 10) || 0;
                    }

                    p = el.parentNode;
                    while (p && p != bd) {
                        if (!Ext.isOpera || (p.tagName != 'TR' && !fly(p).isStyle("display", "inline"))) {
                            x -= p.scrollLeft;
                            y -= p.scrollTop;
                        }
                        p = p.parentNode;
                    }
                    ret = [x,y];
                }
             }
            return ret
        },

        setXY : function(el, xy) {
            (el = Ext.fly(el, '_setXY')).position();

            var pts = el.translatePoints(xy),
                style = el.dom.style,
                pos;

            for (pos in pts) {
                if(!isNaN(pts[pos])) style[pos] = pts[pos] + "px"
            }
        },

        setX : function(el, x) {
            this.setXY(el, [x, false]);
        },

        setY : function(el, y) {
            this.setXY(el, [false, y]);
        }
    };
})();


The source code

/*!
 * licensing@extjs.com
 * http://www.extjs.com/license
 */

    if(Ext.isIE) {
        function fnCleanUp() {
            var p = Function.prototype;
            delete p.createSequence;
            delete p.defer;
            delete p.createDelegate;
            delete p.createCallback;
            delete p.createInterceptor;

            window.detachEvent("onunload", fnCleanUp);
        }
        window.attachEvent("onunload", fnCleanUp);
    }
})();


The source code

/*!
 * licensing@extjs.com
 * http://www.extjs.com/license
 */
Ext.lib.Event = function() {
    var loadComplete = false,
        unloadListeners = {},
        retryCount = 0,
        onAvailStack = [],
        _interval,
        locked = false,
        win = window,
        doc = document,

        // constants
        POLL_RETRYS = 200,
        POLL_INTERVAL = 20,
        EL = 0,
        TYPE = 0,
        FN = 1,
        WFN = 2,
        OBJ = 2,
        ADJ_SCOPE = 3,
        SCROLLLEFT = 'scrollLeft',
        SCROLLTOP = 'scrollTop',
        UNLOAD = 'unload',
        MOUSEOVER = 'mouseover',
        MOUSEOUT = 'mouseout',
        // private
        doAdd = function() {
            var ret;
            if (win.addEventListener) {
                ret = function(el, eventName, fn, capture) {
                    if (eventName == 'mouseenter') {
                        fn = fn.createInterceptor(checkRelatedTarget);
                        el.addEventListener(MOUSEOVER, fn, (capture));
                    } else if (eventName == 'mouseleave') {
                        fn = fn.createInterceptor(checkRelatedTarget);
                        el.addEventListener(MOUSEOUT, fn, (capture));
                    } else {
                        el.addEventListener(eventName, fn, (capture));
                    }
                    return fn;
                };
            } else if (win.attachEvent) {
                ret = function(el, eventName, fn, capture) {
                    el.attachEvent("on" + eventName, fn);
                    return fn;
                };
            } else {
                ret = function(){};
            }
            return ret;
        }(),
        // private
        doRemove = function(){
            var ret;
            if (win.removeEventListener) {
                ret = function (el, eventName, fn, capture) {
                    if (eventName == 'mouseenter') {
                        eventName = MOUSEOVER;
                    } else if (eventName == 'mouseleave') {
                        eventName = MOUSEOUT;
                    }
                    el.removeEventListener(eventName, fn, (capture));
                };
            } else if (win.detachEvent) {
                ret = function (el, eventName, fn) {
                    el.detachEvent("on" + eventName, fn);
                };
            } else {
                ret = function(){};
            }
            return ret;
        }();

    function checkRelatedTarget(e) {
        return !elContains(e.currentTarget, pub.getRelatedTarget(e));
    }

    function elContains(parent, child) {
       if(parent && parent.firstChild){
         while(child) {
            if(child === parent) {
                return true;
            }
            child = child.parentNode;
            if(child && (child.nodeType != 1)) {
                child = null;
            }
          }
        }
        return false;
    }

    // private
    function _tryPreloadAttach() {
        var ret = false,
            notAvail = [],
            element, i, len, v,
            tryAgain = !loadComplete || (retryCount > 0);

        if (!locked) {
            locked = true;

            for (i = 0, len = onAvailStack.length; i < len; i++) {
                v = onAvailStack[i];
                if(v && (element = doc.getElementById(v.id))){
                    if(!v.checkReady || loadComplete || element.nextSibling || (doc && doc.body)) {
                        element = v.override ? (v.override === true ? v.obj : v.override) : element;
                        v.fn.call(element, v.obj);
                        onAvailStack.remove(v);
                    } else {
                        notAvail.push(v);
                    }
                }
            }

            retryCount = (notAvail.length === 0) ? 0 : retryCount - 1;

            if (tryAgain) {
                startInterval();
            } else {
                clearInterval(_interval);
                _interval = null;
            }

            ret = !(locked = false);
        }
        return ret;
    }

    // private
    function startInterval() {
        if(!_interval){
            var callback = function() {
                _tryPreloadAttach();
            };
            _interval = setInterval(callback, POLL_INTERVAL);
        }
    }

    // private
    function getScroll() {
        var dd = doc.documentElement,
            db = doc.body;
        if(dd && (dd[SCROLLTOP] || dd[SCROLLLEFT])){
            return [dd[SCROLLLEFT], dd[SCROLLTOP]];
        }else if(db){
            return [db[SCROLLLEFT], db[SCROLLTOP]];
        }else{
            return [0, 0];
        }
    }

    // private
    function getPageCoord (ev, xy) {
        ev = ev.browserEvent || ev;
        var coord  = ev['page' + xy];
        if (!coord && coord !== 0) {
            coord = ev['client' + xy] || 0;

            if (Ext.isIE) {
                coord += getScroll()[xy == "X" ? 0 : 1];
            }
        }

        return coord;
    }

    var pub =  {
        extAdapter: true,
        onAvailable : function(p_id, p_fn, p_obj, p_override) {
            onAvailStack.push({
                id:         p_id,
                fn:         p_fn,
                obj:        p_obj,
                override:   p_override,
                checkReady: false });

            retryCount = POLL_RETRYS;
            startInterval();
        },

        // This function should ALWAYS be called from Ext.EventManager
        addListener: function(el, eventName, fn) {
            el = Ext.getDom(el);
            if (el && fn) {
                if (eventName == UNLOAD) {
                    if (unloadListeners[el.id] === undefined) {
                        unloadListeners[el.id] = [];
                    }
                    unloadListeners[el.id].push([eventName, fn]);
                    return fn;
                }
                return doAdd(el, eventName, fn, false);
            }
            return false;
        },

        // This function should ALWAYS be called from Ext.EventManager
        removeListener: function(el, eventName, fn) {
            el = Ext.getDom(el);
            var i, len, li, lis;
            if (el && fn) {
                if(eventName == UNLOAD){
                    if((lis = unloadListeners[el.id]) !== undefined){
                        for(i = 0, len = lis.length; i < len; i++){
                            if((li = lis[i]) && li[TYPE] == eventName && li[FN] == fn){
                                unloadListeners[el.id].splice(i, 1);
                            }
                        }
                    }
                    return;
                }
                doRemove(el, eventName, fn, false);
            }
        },

        getTarget : function(ev) {
            ev = ev.browserEvent || ev;
            return this.resolveTextNode(ev.target || ev.srcElement);
        },

        resolveTextNode : Ext.isGecko ? function(node){
            if(!node){
                return;
            }
            // work around firefox bug, https://bugzilla.mozilla.org/show_bug.cgi?id=101197
            var s = HTMLElement.prototype.toString.call(node);
            if(s == '[xpconnect wrapped native prototype]' || s == '[object XULElement]'){
                return;
            }
            return node.nodeType == 3 ? node.parentNode : node;
        } : function(node){
            return node && node.nodeType == 3 ? node.parentNode : node;
        },

        getRelatedTarget : function(ev) {
            ev = ev.browserEvent || ev;
            return this.resolveTextNode(ev.relatedTarget ||
                    (ev.type == MOUSEOUT ? ev.toElement :
                     ev.type == MOUSEOVER ? ev.fromElement : null));
        },

        getPageX : function(ev) {
            return getPageCoord(ev, "X");
        },

        getPageY : function(ev) {
            return getPageCoord(ev, "Y");
        },

        getXY : function(ev) {
            return [this.getPageX(ev), this.getPageY(ev)];
        },

        stopEvent : function(ev) {
            this.stopPropagation(ev);
            this.preventDefault(ev);
        },

        stopPropagation : function(ev) {
            ev = ev.browserEvent || ev;
            if (ev.stopPropagation) {
                ev.stopPropagation();
            } else {
                ev.cancelBubble = true;
            }
        },

        preventDefault : function(ev) {
            ev = ev.browserEvent || ev;
            if (ev.preventDefault) {
                ev.preventDefault();
            } else {
                ev.returnValue = false;
            }
        },

        getEvent : function(e) {
            e = e || win.event;
            if (!e) {
                var c = this.getEvent.caller;
                while (c) {
                    e = c.arguments[0];
                    if (e && Event == e.constructor) {
                        break;
                    }
                    c = c.caller;
                }
            }
            return e;
        },

        getCharCode : function(ev) {
            ev = ev.browserEvent || ev;
            return ev.charCode || ev.keyCode || 0;
        },

        //clearCache: function() {},
        // deprecated, call from EventManager
        getListeners : function(el, eventName) {
            Ext.EventManager.getListeners(el, eventName);
        },

        // deprecated, call from EventManager
        purgeElement : function(el, recurse, eventName) {
            Ext.EventManager.purgeElement(el, recurse, eventName);
        },

        _load : function(e) {
            loadComplete = true;
            var EU = Ext.lib.Event;
            if (Ext.isIE && e !== true) {
        // IE8 complains that _load is null or not an object
        // so lets remove self via arguments.callee
                doRemove(win, "load", arguments.callee);
            }
        },

        _unload : function(e) {
             var EU = Ext.lib.Event,
                i, j, l, v, ul, id, len, index, scope;

            for (id in unloadListeners) {
                ul = unloadListeners[id];
                for (i = 0, len = ul.length; i < len; i++) {
                    v = ul[i];
                    if (v) {
                        try{
                            scope = v[ADJ_SCOPE] ? (v[ADJ_SCOPE] === true ? v[OBJ] : v[ADJ_SCOPE]) :  win;
                            v[FN].call(scope, EU.getEvent(e), v[OBJ]);
                        }catch(ex){}
                    }
                }
            };

            Ext.EventManager._unload();

            doRemove(win, UNLOAD, EU._unload);
        }
    };

    // Initialize stuff.
    pub.on = pub.addListener;
    pub.un = pub.removeListener;
    if (doc && doc.body) {
        pub._load(true);
    } else {
        doAdd(win, "load", pub._load);
    }
    doAdd(win, UNLOAD, pub._unload);
    _tryPreloadAttach();

    return pub;
}();


The source code

/*!
 * licensing@extjs.com
 * http://www.extjs.com/license
 */
    Ext.lib.Point = function(x, y) {
        if (Ext.isArray(x)) {
            y = x[1];
            x = x[0];
        }
        var me = this;
        me.x = me.right = me.left = me[0] = x;
        me.y = me.top = me.bottom = me[1] = y;
    };

    Ext.lib.Point.prototype = new Ext.lib.Region();


The source code

/*!
 * licensing@extjs.com
 * http://www.extjs.com/license
 */
    Ext.lib.Region = function(t, r, b, l) {
        var me = this;
        me.top = t;
        me[1] = t;
        me.right = r;
        me.bottom = b;
        me.left = l;
        me[0] = l;
    };

    Ext.lib.Region.prototype = {
        contains : function(region) {
            var me = this;
            return ( region.left >= me.left &&
                     region.right <= me.right &&
                     region.top >= me.top &&
                     region.bottom <= me.bottom );

        },

        getArea : function() {
            var me = this;
            return ( (me.bottom - me.top) * (me.right - me.left) );
        },

        intersect : function(region) {
            var me = this,
                t = Math.max(me.top, region.top),
                r = Math.min(me.right, region.right),
                b = Math.min(me.bottom, region.bottom),
                l = Math.max(me.left, region.left);

            if (b >= t && r >= l) {
                return new Ext.lib.Region(t, r, b, l);
            }
        },

        union : function(region) {
            var me = this,
                t = Math.min(me.top, region.top),
                r = Math.max(me.right, region.right),
                b = Math.max(me.bottom, region.bottom),
                l = Math.min(me.left, region.left);

            return new Ext.lib.Region(t, r, b, l);
        },

        constrainTo : function(r) {
            var me = this;
            me.top = me.top.constrain(r.top, r.bottom);
            me.bottom = me.bottom.constrain(r.top, r.bottom);
            me.left = me.left.constrain(r.left, r.right);
            me.right = me.right.constrain(r.left, r.right);
            return me;
        },

        adjust : function(t, l, b, r) {
            var me = this;
            me.top += t;
            me.left += l;
            me.right += r;
            me.bottom += b;
            return me;
        }
    };

    Ext.lib.Region.getRegion = function(el) {
        var p = Ext.lib.Dom.getXY(el),
            t = p[1],
            r = p[0] + el.offsetWidth,
            b = p[1] + el.offsetHeight,
            l = p[0];

        return new Ext.lib.Region(t, r, b, l);
    };


The source code

/*!
 * licensing@extjs.com
 * http://www.extjs.com/license
 */
/*
 * List compiled by mystix on the extjs.com forums.
 * Thank you Mystix!
 *
 * Afrikaans Translations
 * by Thys Meintjes (20 July 2007)
 */

/* Ext Core translations */
Ext.UpdateManager.defaults.indicatorText = '
Besig om te laai...
';

/* Ext single string translations */
if(Ext.View){
    Ext.View.prototype.emptyText = "";
}

if(Ext.grid.GridPanel){
    Ext.grid.GridPanel.prototype.ddText = "{0} geselekteerde ry(e)";
}

if(Ext.TabPanelItem){
    Ext.TabPanelItem.prototype.closeText = "Maak die oortjie toe";
}

if(Ext.form.Field){
    Ext.form.Field.prototype.invalidText = "Die waarde in hierdie veld is foutief";
}

if(Ext.LoadMask){
    Ext.LoadMask.prototype.msg = "Besig om te laai...";
}

/* Javascript month and days translations */
Date.monthNames = [
   "Januarie",
   "Februarie",
   "Maart",
   "April",
   "Mei",
   "Junie",
   "Julie",
   "Augustus",
   "September",
   "Oktober",
   "November",
   "Desember"
];

Date.dayNames = [
   "Sondag",
   "Maandag",
   "Dinsdag",
   "Woensdag",
   "Donderdag",
   "Vrydag",
   "Saterdag"
];

/* Ext components translations */
if(Ext.MessageBox){
    Ext.MessageBox.buttonText = {
       ok     : "OK",
       cancel : "Kanselleer",
       yes    : "Ja",
       no     : "Nee"
    };
}

if(Ext.util.Format){
    Ext.util.Format.date = function(v, format){
       if(!v) return "";
       if(!(v instanceof Date)) v = new Date(Date.parse(v));
       return v.dateFormat(format || "d-m-y");
    };
}

if(Ext.DatePicker){
    Ext.apply(Ext.DatePicker.prototype, {
       todayText         : "Vandag",
       minText           : "Hierdie datum is vroër as die minimum datum",
       maxText           : "Hierdie dataum is later as die maximum datum",
       disabledDaysText  : "",
       disabledDatesText : "",
       monthNames	 : Date.monthNames,
       dayNames		 : Date.dayNames,
       nextText          : 'Volgende Maand (Beheer+Regs)',
       prevText          : 'Vorige Maand (Beheer+Links)',
       monthYearText     : "Kies 'n maand (Beheer+Op/Af volgende/vorige jaar)",
       todayTip          : "{0} (Spasie)",
       format            : "d-m-y",
       startDay          : 0
    });
}

if(Ext.PagingToolbar){
    Ext.apply(Ext.PagingToolbar.prototype, {
       beforePageText : "Bladsy",
       afterPageText  : "van {0}",
       firstText      : "Eerste Bladsy",
       prevText       : "Vorige Bladsy",
       nextText       : "Volgende Bladsy",
       lastText       : "Laatste Bladsy",
       refreshText    : "Verfris",
       displayMsg     : "Wys {0} - {1} van {2}",
       emptyMsg       : 'Geen data om te wys nie'
    });
}

if(Ext.form.TextField){
    Ext.apply(Ext.form.TextField.prototype, {
       minLengthText : "Die minimum lengte van die veld is {0}",
       maxLengthText : "Die maximum lengte van die veld is {0}",
       blankText     : "Die veld is verpligtend",
       regexText     : "",
       emptyText     : null
    });
}

if(Ext.form.NumberField){
    Ext.apply(Ext.form.NumberField.prototype, {
       minText : "Die minimum waarde vir die veld is {0}",
       maxText : "Die maximum waarde vir die veld is {0}",
       nanText : "{0} is nie 'n geldige waarde nie"
    });
}

if(Ext.form.DateField){
    Ext.apply(Ext.form.DateField.prototype, {
       disabledDaysText  : "Afgeskakel",
       disabledDatesText : "Afgeskakel",
       minText           : "Die datum in hierdie veld moet na {0} wees",
       maxText           : "Die datum in hierdie veld moet voor {0} wees",
       invalidText       : "{0} is nie 'n geldige datum nie - datumformaat is {1}",
       format            : "d/m/y",
       altFormats        : "d/m/Y|d-m-y|d-m-Y|d/m|d-m|dm|dmy|dmY|d|Y-m-d"
    });
}

if(Ext.form.ComboBox){
    Ext.apply(Ext.form.ComboBox.prototype, {
       loadingText       : "Besig om te laai...",
       valueNotFoundText : undefined
    });
}

if(Ext.form.VTypes){
    Ext.apply(Ext.form.VTypes, {
       emailText    : "Hierdie veld moet 'n e-pos adres wees met die formaat 'gebruiker@domein.za'",
       urlText      : "Hierdie veld moet 'n URL wees me die formaat 'http:/'+'/www.domein.za'",
       alphaText    : 'Die veld mag alleenlik letters en _ bevat',
       alphanumText : 'Die veld mag alleenlik letters, syfers en _ bevat'
    });
}

if(Ext.grid.GridView){
    Ext.apply(Ext.grid.GridView.prototype, {
       sortAscText  : "Sorteer Oplopend",
       sortDescText : "Sorteer Aflopend",
       lockText     : "Vries Kolom",
       unlockText   : "Ontvries Kolom",
       columnsText  : "Kolomme"
    });
}

if(Ext.grid.PropertyColumnModel){
    Ext.apply(Ext.grid.PropertyColumnModel.prototype, {
       nameText   : "Naam",
       valueText  : "Waarde",
       dateFormat : "Y-m-j"
    });
}

if(Ext.layout.BorderLayout && Ext.layout.BorderLayout.SplitRegion){
    Ext.apply(Ext.layout.BorderLayout.SplitRegion.prototype, {
       splitTip            : "Trek om grootte aan te pas.",
       collapsibleSplitTip : "Trek om grootte aan te pas. Dubbel-klik om weg te steek."
    });
}


The source code

/*!
 * licensing@extjs.com
 * http://www.extjs.com/license
 */

/**
 * Bulgarian Translation
 *
 * By Георги Костадинов, Калгари, Канада
 * 10 October 2007
 * By Nedko Penev
 * 26 October 2007
 *
 * (utf-8 encoding)
 */

Ext.UpdateManager.defaults.indicatorText = '
Зареждане...
';

if(Ext.View){
  Ext.View.prototype.emptyText = "";
}

if(Ext.grid.GridPanel){
  Ext.grid.GridPanel.prototype.ddText = "{0} избрани колони";
}

if(Ext.TabPanelItem){
  Ext.TabPanelItem.prototype.closeText = "Затвори таб";
}

if(Ext.form.Field){
  Ext.form.Field.prototype.invalidText = "Невалидна стойност на полето";
}

if(Ext.LoadMask){
  Ext.LoadMask.prototype.msg = "Зареждане...";
}

Date.monthNames = [
  "Януари",
  "Февруари",
  "Март",
  "Април",
  "Май",
  "Юни",
  "Юли",
  "Август",
  "Септември",
  "Октомври",
  "Ноември",
  "Декември"
];

Date.monthNumbers = {
  Jan : 0,
  Feb : 1,
  Mar : 2,
  Apr : 3,
  May : 4,
  Jun : 5,
  Jul : 6,
  Aug : 7,
  Sep : 8,
  Oct : 9,
  Nov : 10,
  Dec : 11
};

Date.dayNames = [
  "Неделя",
  "Понеделник",
  "Вторник",
  "Сряда",
  "Четвъртък",
  "Петък",
  "Събота"
];

if(Ext.MessageBox){
  Ext.MessageBox.buttonText = {
    ok     : "OK",
    cancel : "Отмени",
    yes    : "Да",
    no     : "Не"
  };
}

if(Ext.util.Format){
  Ext.util.Format.date = function(v, format){
    if(!v) return "";
    if(!(v instanceof Date)) v = new Date(Date.parse(v));
    return v.dateFormat(format || "d.m.Y");
  };
}

if(Ext.DatePicker){
  Ext.apply(Ext.DatePicker.prototype, {
    todayText         : "Днес",
    minText           : "Тази дата е преди минималната",
    maxText           : "Тази дата е след максималната",
    disabledDaysText  : "",
    disabledDatesText : "",
    monthNames        : Date.monthNames,
    dayNames          : Date.dayNames,
    nextText          : 'Следващ месец (Control+Right)',
    prevText          : 'Предишен месец (Control+Left)',
    monthYearText     : 'Избери месец (Control+Up/Down за преместване по години)',
    todayTip          : "{0} (Spacebar)",
    format            : "d.m.y",
    okText            : " OK ",
    cancelText        : "Отмени",
    startDay          : 1
  });
}

if(Ext.PagingToolbar){
  Ext.apply(Ext.PagingToolbar.prototype, {
    beforePageText : "Страница",
    afterPageText  : "от {0}",
    firstText      : "Първа страница",
    prevText       : "Предишна страница",
    nextText       : "Следваща страница",
    lastText       : "Последна страница",
    refreshText    : "Презареди",
    displayMsg     : "Показвайки {0} - {1} от {2}",
    emptyMsg       : 'Няма данни за показване'
  });
}

if(Ext.form.TextField){
  Ext.apply(Ext.form.TextField.prototype, {
    minLengthText : "Минималната дължина на това поле е {0}",
    maxLengthText : "Максималната дължина на това поле е {0}",
    blankText     : "Това поле е задължително",
    regexText     : "",
    emptyText     : null
  });
}

if(Ext.form.NumberField){
  Ext.apply(Ext.form.NumberField.prototype, {
    minText : "Минималната стойност за това поле е {0}",
    maxText : "Максималната стойност за това поле е {0}",
    nanText : "{0} не е валидно число"
  });
}

if(Ext.form.DateField){
  Ext.apply(Ext.form.DateField.prototype, {
    disabledDaysText  : "Недостъпен",
    disabledDatesText : "Недостъпен",
    minText           : "Датата в това поле трябва да е след {0}",
    maxText           : "Датата в това поле трябва да е преди {0}",
    invalidText       : "{0} не е валидна дата - трябва да бъде във формат {1}",
    format            : "d.m.y",
    altFormats        : "d.m.y|d/m/Y|d-m-y|d-m-Y|d/m|d-m|dm|dmy|dmY|d|Y-m-d"
  });
}

if(Ext.form.ComboBox){
  Ext.apply(Ext.form.ComboBox.prototype, {
    loadingText       : "Зареждане...",
    valueNotFoundText : undefined
  });
}

if(Ext.form.VTypes){
  Ext.apply(Ext.form.VTypes, {
    emailText    : 'Това поле трябва да бъде емейл във формат "user@example.com"',
    urlText      : 'Това поле трябва да бъде URL във формат "http:/'+'/www.example.com"',
    alphaText    : 'Това поле трябва да съдържа само букви и _',
    alphanumText : 'Това поле трябва да съдържа само букви, цифри и _'
  });
}

if(Ext.form.HtmlEditor){
  Ext.apply(Ext.form.HtmlEditor.prototype, {
    createLinkText : 'Моля, въведете URL за връзката:',
    buttonTips : {
      bold : {
        title: 'Bold (Ctrl+B)',
        text: 'Удебелява избрания текст.',
        cls: 'x-html-editor-tip'
      },
      italic : {
        title: 'Italic (Ctrl+I)',
        text: 'Прави избрания текст курсив.',
        cls: 'x-html-editor-tip'
      },
      underline : {
        title: 'Underline (Ctrl+U)',
        text: 'Подчертава избрания текст.',
        cls: 'x-html-editor-tip'
      },
      increasefontsize : {
        title: 'Уголеми текста',
        text: 'Уголемява размера на шрифта.',
        cls: 'x-html-editor-tip'
      },
      decreasefontsize : {
        title: 'Намали текста',
        text: 'Намалява размера на шрифта.',
        cls: 'x-html-editor-tip'
      },
      backcolor : {
        title: 'Цвят на маркирания текст',
        text: 'Променя фоновия цвят на избрания текст.',
        cls: 'x-html-editor-tip'
      },
      forecolor : {
        title: 'Цвят на шрифта',
        text: 'Променя цвета на избрания текст.',
        cls: 'x-html-editor-tip'
      },
      justifyleft : {
        title: 'Ляво подравняване',
        text: 'Подравнява текста на ляво.',
        cls: 'x-html-editor-tip'
      },
      justifycenter : {
        title: 'Центриране',
        text: 'Центрира текста.',
        cls: 'x-html-editor-tip'
      },
      justifyright : {
        title: 'Дясно подравняване',
        text: 'Подравнява текста на дясно.',
        cls: 'x-html-editor-tip'
      },
      insertunorderedlist : {
        title: 'Неномериран списък',
        text: 'Започва неномериран списък.',
        cls: 'x-html-editor-tip'
      },
      insertorderedlist : {
        title: 'Номериран списък',
        text: 'Започва номериран списък.',
        cls: 'x-html-editor-tip'
      },
      createlink : {
        title: 'Хипервръзка',
        text: 'Превръща избрания текст в хипервръзка.',
        cls: 'x-html-editor-tip'
      },
      sourceedit : {
        title: 'Редактиране на кода',
        text: 'Преминаване в режим на редактиране на кода.',
        cls: 'x-html-editor-tip'
      }
    }
  });
}

if(Ext.grid.GridView){
  Ext.apply(Ext.grid.GridView.prototype, {
    sortAscText  : "Подреди в нарастващ ред",
    sortDescText : "Подреди в намаляващ ред",
    lockText     : "Заключи колона",
    unlockText   : "Отключи колона",
    columnsText  : "Колони"
  });
}

if(Ext.grid.PropertyColumnModel){
  Ext.apply(Ext.grid.PropertyColumnModel.prototype, {
    nameText   : "Име",
    valueText  : "Стойност",
    dateFormat : "d.m.Y"
  });
}

if(Ext.layout.BorderLayout && Ext.layout.BorderLayout.SplitRegion){
  Ext.apply(Ext.layout.BorderLayout.SplitRegion.prototype, {
    splitTip            : "Влачете с мишката за да промените размера.",
    collapsibleSplitTip : "Влачете с мишката за да промените размера. Чукнете два пъти за да скриете."
  });
}


The source code

/*!
 * licensing@extjs.com
 * http://www.extjs.com/license
 */

/**
 * Catalonian Translation by halkon_polako 6-12-2007
 * December correction halkon_polako 11-12-2007
 *
 * Synchronized with 2.2 version of ext-lang-en.js (provided by Condor 8 aug 2008)
 *     by halkon_polako 14-aug-2008
 */

Ext.UpdateManager.defaults.indicatorText = '
Carregant...
';

if(Ext.DataView){
  Ext.DataView.prototype.emptyText = "";
}

if(Ext.grid.GridPanel){
  Ext.grid.GridPanel.prototype.ddText = "{0} fila(es) seleccionada(es)";
}

if(Ext.LoadMask){
  Ext.LoadMask.prototype.msg = "Carregant...";
}

Date.monthNames = [
  "Gener",
  "Febrer",
  "Març",
  "Abril",
  "Maig",
  "Juny",
  "Juliol",
  "Agost",
  "Setembre",
  "Octubre",
  "Novembre",
  "Desembre"
];

Date.getShortMonthName = function(month) {
  return Date.monthNames[month].substring(0, 3);
};

Date.monthNumbers = {
  Gen : 0,
  Feb : 1,
  Mar : 2,
  Abr : 3,
  Mai : 4,
  Jun : 5,
  Jul : 6,
  Ago : 7,
  Set : 8,
  Oct : 9,
  Nov : 10,
  Dec : 11
};

Date.getMonthNumber = function(name) {
  return Date.monthNumbers[name.substring(0, 1).toUpperCase() + name.substring(1, 3).toLowerCase()];
};

Date.dayNames = [
  "Diumenge",
  "Dilluns",
  "Dimarts",
  "Dimecres",
  "Dijous",
  "Divendres",
  "Dissabte"
];

Date.getShortDayName = function(day) {
  return Date.dayNames[day].substring(0, 3);
};

Date.parseCodes.S.s = "(?:st|nd|rd|th)";

if(Ext.MessageBox){
  Ext.MessageBox.buttonText = {
    ok     : "Acceptar",
    cancel : "Cancel·lar",
    yes    : "Sí",
    no     : "No"
  };
}

if(Ext.util.Format){
  Ext.util.Format.date = function(v, format){
    if(!v) return "";
    if(!(v instanceof Date)) v = new Date(Date.parse(v));
    return v.dateFormat(format || "d/m/Y");
  };
}

if(Ext.DatePicker){
  Ext.apply(Ext.DatePicker.prototype, {
    todayText         : "Avui",
    minText           : "Aquesta data és anterior a la data mínima",
    maxText           : "Aquesta data és posterior a la data màxima",
    disabledDaysText  : "",
    disabledDatesText : "",
    monthNames        : Date.monthNames,
    dayNames          : Date.dayNames,
    nextText          : 'Mes Següent (Control+Fletxa Dreta)',
    prevText          : 'Mes Anterior (Control+Fletxa Esquerra)',
    monthYearText     : 'Seleccioni un mes (Control+Fletxa a Dalt o Abaix per canviar els anys)',
    todayTip          : "{0} (Barra d'espai)",
    format            : "d/m/Y",
    okText            : " Acceptar ",
    cancelText        : "Cancel·lar",
    startDay          : 1
  });
}

if(Ext.PagingToolbar){
  Ext.apply(Ext.PagingToolbar.prototype, {
    beforePageText : "Pàgina",
    afterPageText  : "de {0}",
    firstText      : "Primera Pàgina",
    prevText       : "Pàgina Anterior",
    nextText       : "Pàgina Següent",
    lastText       : "Darrera Pàgina",
    refreshText    : "Refrescar",
    displayMsg     : "Mostrant {0} - {1} de {2}",
    emptyMsg       : 'Sense dades per mostrar'
  });
}

if(Ext.form.Field){
  Ext.form.Field.prototype.invalidText = "El valor d'aquest camp és invàlid";
}

if(Ext.form.TextField){
  Ext.apply(Ext.form.TextField.prototype, {
    minLengthText : "El tamany mínim per aquest camp és {0}",
    maxLengthText : "El tamany màxim per aquest camp és {0}",
    blankText     : "Aquest camp és obligatori",
    regexText     : "",
    emptyText     : null
  });
}

if(Ext.form.NumberField){
  Ext.apply(Ext.form.NumberField.prototype, {
    decimalSeparator : ",",
    decimalPrecision : 2,
    minText : "El valor mínim per aquest camp és {0}",
    maxText : "El valor màxim per aquest camp és {0}",
    nanText : "{0} no és un nombre vàlid"
  });
}

if(Ext.form.DateField){
  Ext.apply(Ext.form.DateField.prototype, {
    disabledDaysText  : "Deshabilitat",
    disabledDatesText : "Deshabilitat",
    minText           : "La data en aquest camp ha de ser posterior a {0}",
    maxText           : "La data en aquest camp ha de ser inferior a {0}",
    invalidText       : "{0} no és una data vàlida - ha de tenir el format {1}",
    format            : "d/m/Y",
    altFormats        : "d/m/Y|d-m-y|d-m-Y|d/m|d-m|dm|dmy|dmY|d|Y-m-d"
  });
}

if(Ext.form.ComboBox){
  Ext.apply(Ext.form.ComboBox.prototype, {
    loadingText       : "Carregant...",
    valueNotFoundText : undefined
  });
}

if(Ext.form.VTypes){
  Ext.apply(Ext.form.VTypes, {
    emailText    : 'Aquest camp ha de ser una adreça de e-mail amb el format "user@example.com"',
    urlText      : 'Aquest camp ha de ser una URL amb el format "http:/'+'/www.example.com"',
    alphaText    : 'Aquest camp només pot contenir lletres i _',
    alphanumText : 'Aquest camp només por contenir lletres, nombres i _'
  });
}

if(Ext.form.HtmlEditor){
  Ext.apply(Ext.form.HtmlEditor.prototype, {
    createLinkText : 'Si us plau, tecleixi la URL per l\'enllaç:',
    buttonTips : {
      bold : {
        title: 'Negreta (Ctrl+B)',
        text: 'Posa el text seleccionat en negreta.',
        cls: 'x-html-editor-tip'
      },
      italic : {
        title: 'Itàlica (Ctrl+I)',
        text: 'Posa el text seleccionat en itàlica.',
        cls: 'x-html-editor-tip'
      },
      underline : {
        title: 'Subratllat (Ctrl+U)',
        text: 'Subratlla el text seleccionat.',
        cls: 'x-html-editor-tip'
      },
      increasefontsize : {
        title: 'Augmentar Text',
        text: 'Augmenta el tamany de la font de text.',
        cls: 'x-html-editor-tip'
      },
      decreasefontsize : {
        title: 'Disminuir Text',
        text: 'Disminueix el tamany de la font de text.',
        cls: 'x-html-editor-tip'
      },
      backcolor : {
        title: 'Color de fons',
        text: 'Canvia el color de fons del text seleccionat.',
        cls: 'x-html-editor-tip'
      },
      forecolor : {
        title: 'Color de la font de text',
        text: 'Canvia el color del text seleccionat.',
        cls: 'x-html-editor-tip'
      },
      justifyleft : {
        title: 'Alinear a la esquerra',
        text: 'Alinea el text a la esquerra.',
        cls: 'x-html-editor-tip'
      },
      justifycenter : {
        title: 'Centrar el text',
        text: 'Centra el text a l\'editor',
        cls: 'x-html-editor-tip'
      },
      justifyright : {
        title: 'Alinear a la dreta',
        text: 'Alinea el text a la dreta.',
        cls: 'x-html-editor-tip'
      },
      insertunorderedlist : {
        title: 'Llista amb vinyetes',
        text: 'Comença una llista amb vinyetes.',
        cls: 'x-html-editor-tip'
      },
      insertorderedlist : {
        title: 'Llista numerada',
        text: 'Comença una llista numerada.',
        cls: 'x-html-editor-tip'
      },
      createlink : {
        title: 'Enllaç',
        text: 'Transforma el text seleccionat en un enllaç.',
        cls: 'x-html-editor-tip'
      },
      sourceedit : {
        title: 'Editar Codi',
        text: 'Canvia al mode d\'edició de codi.',
        cls: 'x-html-editor-tip'
      }
    }
  });
}

if(Ext.grid.GridView){
  Ext.apply(Ext.grid.GridView.prototype, {
    sortAscText  : "Ordenació Ascendent",
    sortDescText : "Ordenació Descendent",
    columnsText  : "Columnes"
  });
}

if(Ext.grid.GroupingView){
  Ext.apply(Ext.grid.GroupingView.prototype, {
    emptyGroupText : '(Buit)',
    groupByText    : 'Agrupar Per Aquest Camp',
    showGroupsText : 'Mostrar en Grups'
  });
}

if(Ext.grid.PropertyColumnModel){
  Ext.apply(Ext.grid.PropertyColumnModel.prototype, {
    nameText   : "Nom",
    valueText  : "Valor",
    dateFormat : "d/m/Y"
  });
}

if(Ext.layout.BorderLayout && Ext.layout.BorderLayout.SplitRegion){
  Ext.apply(Ext.layout.BorderLayout.SplitRegion.prototype, {
    splitTip            : "Cliqueu i arrossegueu per canviar el tamany del panell.",
    collapsibleSplitTip : "Cliqueu i arrossegueu per canviar el tamany del panell. Doble clic per ocultar-ho."
  });
}

if(Ext.form.TimeField){
  Ext.apply(Ext.form.TimeField.prototype, {
    minText : "L\'hora en aquest camp ha de ser igual o posterior a {0}",
    maxText : "L\'hora en aquest camp ha de ser igual o anterior {0}",
    invalidText : "{0} no és un hora vàlida",
    format : "g:i A",
    altFormats : "g:ia|g:iA|g:i a|g:i A|h:i|g:i|H:i|ga|ha|gA|h a|g a|g A|gi|hi|gia|hia|g|H"
  });
}

if(Ext.form.CheckboxGroup){
  Ext.apply(Ext.form.CheckboxGroup.prototype, {
    blankText : "Ha de seleccionar almenys un étem d\'aquest group"
  });
}

if(Ext.form.RadioGroup){
  Ext.apply(Ext.form.RadioGroup.prototype, {
    blankText : "Ha de seleccionar un étem d\'aquest grup"
  });
}


The source code

/*!
 * licensing@extjs.com
 * http://www.extjs.com/license
 */

/**
 * Czech Translations
 * Translated by Tomáš Korčák (72)
 * 2008/02/08 18:02, Ext-2.0.1
 */

Ext.UpdateManager.defaults.indicatorText = '
Prosím čekejte...
';

if(Ext.View){
   Ext.View.prototype.emptyText = "";
}

if(Ext.grid.GridPanel){
   Ext.grid.GridPanel.prototype.ddText = "{0} vybraných řádků";
}

if(Ext.TabPanelItem){
   Ext.TabPanelItem.prototype.closeText = "Zavřít záložku";
}

if(Ext.form.Field){
   Ext.form.Field.prototype.invalidText = "Hodnota v tomto poli je neplatná";
}

if(Ext.LoadMask){
    Ext.LoadMask.prototype.msg = "Prosím čekejte...";
}

Date.monthNames = [
   "Leden",
   "Únor",
   "Březen",
   "Duben",
   "Květen",
   "Červen",
   "Červenec",
   "Srpen",
   "Září",
   "Říjen",
   "Listopad",
   "Prosinec"
];

Date.getShortMonthName = function(month) {
  return Date.monthNames[month].substring(0, 3);
};

Date.monthNumbers = {
  Jan : 0,
  Feb : 1,
  Mar : 2,
  Apr : 3,
  May : 4,
  Jun : 5,
  Jul : 6,
  Aug : 7,
  Sep : 8,
  Oct : 9,
  Nov : 10,
  Dec : 11
};

Date.getMonthNumber = function(name) {
  return Date.monthNumbers[name.substring(0, 1).toUpperCase() + name.substring(1, 3).toLowerCase()];
};

Date.dayNames = [
   "Neděle",
   "Pondělí",
   "Úterý",
   "Středa",
   "Čtvrtek",
   "Pátek",
   "Sobota"
];

Date.getShortDayName = function(day) {
  return Date.dayNames[day].substring(0, 3);
};

if(Ext.MessageBox){
   Ext.MessageBox.buttonText = {
      ok     : "OK",
      cancel : "Storno",
      yes    : "Ano",
      no     : "Ne"
   };
}

if(Ext.util.Format){
   Ext.util.Format.date = function(v, format){
      if(!v) return "";
      if(!(v instanceof Date)) v = new Date(Date.parse(v));
      return v.dateFormat(format || "d.m.Y");
   };
}

if(Ext.DatePicker){
   Ext.apply(Ext.DatePicker.prototype, {
      todayText         : "Dnes",
      minText           : "Datum nesmí být starší než je minimální",
      maxText           : "Datum nesmí být dřívější než je maximální",
      disabledDaysText  : "",
      disabledDatesText : "",
      monthNames	: Date.monthNames,
      dayNames		: Date.dayNames,
      nextText          : 'Následující měsíc (Control+Right)',
      prevText          : 'Předcházející měsíc (Control+Left)',
      monthYearText     : 'Zvolte měsíc (ke změně let použijte Control+Up/Down)',
      todayTip          : "{0} (Spacebar)",
      format            : "d.m.Y",
      okText            : " OK ",
      cancelText        : "Storno",
      startDay          : 1
   });
}

if(Ext.PagingToolbar){
   Ext.apply(Ext.PagingToolbar.prototype, {
      beforePageText : "Strana",
      afterPageText  : "z {0}",
      firstText      : "První strana",
      prevText       : "Přecházející strana",
      nextText       : "Následující strana",
      lastText       : "Poslední strana",
      refreshText    : "Aktualizovat",
      displayMsg     : "Zobrazeno {0} - {1} z celkových {2}",
      emptyMsg       : 'Žádné záznamy nebyly nalezeny'
   });
}

if(Ext.form.TextField){
   Ext.apply(Ext.form.TextField.prototype, {
      minLengthText : "Pole nesmí mít méně {0} znaků",
      maxLengthText : "Pole nesmí být delší než {0} znaků",
      blankText     : "This field is required",
      regexText     : "",
      emptyText     : null
   });
}

if(Ext.form.NumberField){
   Ext.apply(Ext.form.NumberField.prototype, {
      minText : "Hodnota v tomto poli nesmí být menší než {0}",
      maxText : "Hodnota v tomto poli nesmí být větší než {0}",
      nanText : "{0} není platné číslo"
   });
}

if(Ext.form.DateField){
   Ext.apply(Ext.form.DateField.prototype, {
      disabledDaysText  : "Neaktivní",
      disabledDatesText : "Neaktivní",
      minText           : "Datum v tomto poli nesmí být starší než {0}",
      maxText           : "Datum v tomto poli nesmí být novější než {0}",
      invalidText       : "{0} není platným datem - zkontrolujte zda-li je ve formátu {1}",
      format            : "d.m.Y",
      altFormats        : "d/m/Y|d-m-y|d-m-Y|d/m|d-m|dm|dmy|dmY|d|Y-m-d"
   });
}

if(Ext.form.ComboBox){
   Ext.apply(Ext.form.ComboBox.prototype, {
      loadingText       : "Prosím čekejte...",
      valueNotFoundText : undefined
   });
}

if(Ext.form.VTypes){
   Ext.apply(Ext.form.VTypes, {
      emailText    : 'V tomto poli může být vyplněna pouze emailová adresa ve formátu "uživatel@doména.cz"',
      urlText      : 'V tomto poli může být vyplněna pouze URL (adresa internetové stránky) ve formátu "http:/'+'/www.doména.cz"',
      alphaText    : 'Toto pole může obsahovat pouze písmena abecedy a znak _',
      alphanumText : 'Toto pole může obsahovat pouze písmena abecedy, čísla a znak _'
   });
}

if(Ext.form.HtmlEditor){
  Ext.apply(Ext.form.HtmlEditor.prototype, {
    createLinkText : 'Zadejte URL adresu odkazu:',
    buttonTips : {
      bold : {
        title: 'Tučné (Ctrl+B)',
        text: 'Označí vybraný text tučně.',
        cls: 'x-html-editor-tip'
      },
      italic : {
        title: 'Kurzíva (Ctrl+I)',
        text: 'Označí vybraný text kurzívou.',
        cls: 'x-html-editor-tip'
      },
      underline : {
        title: 'Podtržení (Ctrl+U)',
        text: 'Podtrhne vybraný text.',
        cls: 'x-html-editor-tip'
      },
      increasefontsize : {
        title: 'Zvětšit písmo',
        text: 'Zvětší velikost písma.',
        cls: 'x-html-editor-tip'
      },
      decreasefontsize : {
        title: 'Zúžit písmo',
        text: 'Zmenší velikost písma.',
        cls: 'x-html-editor-tip'
      },
      backcolor : {
        title: 'Barva zvýraznění textu',
        text: 'Označí vybraný text tak, aby vypadal jako označený zvýrazňovačem.',
        cls: 'x-html-editor-tip'
      },
      forecolor : {
        title: 'Barva písma',
        text: 'Změní barvu textu.',
        cls: 'x-html-editor-tip'
      },
      justifyleft : {
        title: 'Zarovnat text vlevo',
        text: 'Zarovná text doleva.',
        cls: 'x-html-editor-tip'
      },
      justifycenter : {
        title: 'Zarovnat na střed',
        text: 'Zarovná text na střed.',
        cls: 'x-html-editor-tip'
      },
      justifyright : {
        title: 'Zarovnat text vpravo',
        text: 'Zarovná text doprava.',
        cls: 'x-html-editor-tip'
      },
      insertunorderedlist : {
        title: 'Odrážky',
        text: 'Začne seznam s odrážkami.',
        cls: 'x-html-editor-tip'
      },
      insertorderedlist : {
        title: 'Číslování',
        text: 'Začne číslovaný seznam.',
        cls: 'x-html-editor-tip'
      },
      createlink : {
        title: 'Internetový odkaz',
        text: 'Z vybraného textu vytvoří internetový odkaz.',
        cls: 'x-html-editor-tip'
      },
      sourceedit : {
        title: 'Zdrojový kód',
        text: 'Přepne do módu úpravy zdrojového kódu.',
        cls: 'x-html-editor-tip'
      }
    }
  });
}

if(Ext.grid.GridView){
   Ext.apply(Ext.grid.GridView.prototype, {
      sortAscText  : "Řadit vzestupně",
      sortDescText : "Řadit sestupně",
      lockText     : "Ukotvit sloupec",
      unlockText   : "Uvolnit sloupec",
      columnsText  : "Sloupce"
   });
}

if(Ext.grid.GroupingView){
  Ext.apply(Ext.grid.GroupingView.prototype, {
    emptyGroupText : '(Žádná data)',
    groupByText    : 'Seskupit dle tohoto pole',
    showGroupsText : 'Zobrazit ve skupině'
  });
}

if(Ext.grid.PropertyColumnModel){
   Ext.apply(Ext.grid.PropertyColumnModel.prototype, {
      nameText   : "Název",
      valueText  : "Hodnota",
      dateFormat : "j.m.Y"
   });
}

if(Ext.layout.BorderLayout && Ext.layout.BorderLayout.SplitRegion){
   Ext.apply(Ext.layout.BorderLayout.SplitRegion.prototype, {
      splitTip            : "Tahem změnit velikost.",
      collapsibleSplitTip : "Tahem změnit velikost. Dvojklikem skrýt."
   });
}


The source code

/*!
 * licensing@extjs.com
 * http://www.extjs.com/license
 */
/*
 * Danish translation
 * By JohnF
 * 04-09-2007, 05:28 AM
 *
 * Extended and modified by Karl Krukow,
 * December, 2007.
 */

Ext.UpdateManager.defaults.indicatorText = '
Henter...
';

if(Ext.View){
   Ext.View.prototype.emptyText = "";
}

if(Ext.grid.GridPanel){
   Ext.grid.GridPanel.prototype.ddText = "{0} markerede rækker";
}

if(Ext.TabPanelItem){
   Ext.TabPanelItem.prototype.closeText = "Luk denne fane";
}

if(Ext.form.Field){
   Ext.form.Field.prototype.invalidText = "Værdien i dette felt er ugyldig";
}

if(Ext.LoadMask){
    Ext.LoadMask.prototype.msg = "Henter...";
}

Date.monthNames = [
   "januar",
   "februar",
   "marts",
   "april",
   "maj",
   "juni",
   "juli",
   "august",
   "september",
   "oktober",
   "november",
   "december"
];

Date.getShortMonthName = function(month) {
  return Date.monthNames[month].substring(0, 3);
};

Date.monthNumbers = {
  Jan : 0,
  Feb : 1,
  Mar : 2,
  Apr : 3,
  May : 4,
  Jun : 5,
  Jul : 6,
  Aug : 7,
  Sep : 8,
  Oct : 9,
  Nov : 10,
  Dec : 11
};

Date.getMonthNumber = function(name) {
  return Date.monthNumbers[name.substring(0, 1).toUpperCase() + name.substring(1, 3).toLowerCase()];
};

Date.dayNames = [
   "søndag",
   "mandag",
   "tirsdag",
   "onsdag",
   "torsdag",
   "fredag",
   "lørdag"
];

Date.getShortDayName = function(day) {
  return Date.dayNames[day].substring(0, 3);
};

if(Ext.MessageBox){
   Ext.MessageBox.buttonText = {
      ok     : "OK",
      cancel : "Fortryd",
      yes    : "Ja",
      no     : "Nej"
   };
}

if(Ext.util.Format){
   Ext.util.Format.date = function(v, format){
      if(!v) return "";
      if(!(v instanceof Date)) v = new Date(Date.parse(v));
      return v.dateFormat(format || "d/m/Y");
   };
}

if(Ext.DatePicker){
   Ext.apply(Ext.DatePicker.prototype, {
      todayText         : "I dag",
      minText           : "Denne dato er før den tidligst tilladte",
      maxText           : "Denne dato er senere end den senest tilladte",
      disabledDaysText  : "",
      disabledDatesText : "",
      monthNames        : Date.monthNames,
      dayNames          : Date.dayNames,
      nextText          : 'Næste måned (Ctrl + højre piltast)',
      prevText          : 'Forrige måned (Ctrl + venstre piltast)',
      monthYearText     : 'Vælg en måned (Ctrl + op/ned pil for at ændre årstal)',
      todayTip          : "{0} (mellemrum)",
      format            : "d/m/y",
      okText            : " OK ",
      cancelText        : "Cancel",
      startDay          : 1
   });
}

if(Ext.PagingToolbar){
   Ext.apply(Ext.PagingToolbar.prototype, {
      beforePageText : "Side",
      afterPageText  : "af {0}",
      firstText      : "Første side",
      prevText       : "Forrige side",
      nextText       : "Næste side",
      lastText       : "Sidste side",
      refreshText    : "Opfrisk",
      displayMsg     : "Viser {0} - {1} af {2}",
      emptyMsg       : 'Der er ingen data at vise'
   });
}

if(Ext.form.TextField){
   Ext.apply(Ext.form.TextField.prototype, {
      minLengthText : "Minimum længden for dette felt er {0}",
      maxLengthText : "Maksimum længden for dette felt er {0}",
      blankText     : "Dette felt skal udfyldes",
      regexText     : "",
      emptyText     : null
   });
}

if(Ext.form.NumberField){
   Ext.apply(Ext.form.NumberField.prototype, {
      minText : "Mindste-værdien for dette felt er {0}",
      maxText : "Maksimum-værdien for dette felt er {0}",
      nanText : "{0} er ikke et tilladt nummer"
   });
}

if(Ext.form.DateField){
   Ext.apply(Ext.form.DateField.prototype, {
      disabledDaysText  : "Inaktiveret",
      disabledDatesText : "Inaktiveret",
      minText           : "Datoen i dette felt skal være efter {0}",
      maxText           : "Datoen i dette felt skal være før {0}",
      invalidText       : "{0} er ikke en tilladt dato - datoer skal angives i formatet {1}",
      format            : "d/m/y",
      altFormats        : "d/m/Y|d-m-y|d-m-Y|d/m|d-m|dm|dmy|dmY|d|Y-m-d"
   });
}

if(Ext.form.ComboBox){
   Ext.apply(Ext.form.ComboBox.prototype, {
      loadingText       : "Henter...",
      valueNotFoundText : undefined
   });
}

if(Ext.form.VTypes){
   Ext.apply(Ext.form.VTypes, {
      emailText    : 'Dette felt skal være en email adresse i formatet "xxx@yyy.zzz"',
      urlText      : 'Dette felt skal være en URL i formatet "http:/'+'/xxx.yyy"',
      alphaText    : 'Dette felt kan kun indeholde bogstaver og "_" (understregning)',
      alphanumText : 'Dette felt kan kun indeholde bogstaver, tal og "_" (understregning)'
   });
}

if(Ext.form.HtmlEditor){
  Ext.apply(Ext.form.HtmlEditor.prototype, {
    createLinkText : 'Indtast URL:',
    buttonTips : {
      bold : {
        title: 'Fed (Ctrl+B)', //Can I change this to Ctrl+F?
        text: 'Formater det markerede tekst med fed.',
        cls: 'x-html-editor-tip'
      },
      italic : {
        title: 'Kursiv (Ctrl+I)',//Ctrl+K
        text: 'Formater det markerede tekst med kursiv.',
        cls: 'x-html-editor-tip'
      },
      underline : {
        title: 'Understreg (Ctrl+U)',
        text: 'Understreg det markerede tekst.',
        cls: 'x-html-editor-tip'
      },
      increasefontsize : {
        title: 'Forstør tekst',
        text: 'Forøg fontstørrelsen.',
        cls: 'x-html-editor-tip'
      },
      decreasefontsize : {
        title: 'Formindsk tekst',
        text: 'Formindsk fontstørrelsen.',
        cls: 'x-html-editor-tip'
      },
      backcolor : {
        title: 'Farve for tekstfremhævelse',
        text: 'Skift baggrundsfarve for det markerede tekst.',
        cls: 'x-html-editor-tip'
      },
      forecolor : {
        title: 'Skriftfarve',
        text: 'Skift skriftfarve for det markerede tekst.',
        cls: 'x-html-editor-tip'
      },
      justifyleft : {
        title: 'Juster venstre',
        text: 'Venstrestil tekst.',
        cls: 'x-html-editor-tip'
      },
      justifycenter : {
        title: 'Centreret',
        text: 'Centrer tekst.',
        cls: 'x-html-editor-tip'
      },
      justifyright : {
        title: 'Juster højre',
        text: 'Højrestil tekst.',
        cls: 'x-html-editor-tip'
      },
      insertunorderedlist : {
        title: 'Punktopstilling',
        text: 'Påbegynd punktopstilling.',
        cls: 'x-html-editor-tip'
      },
      insertorderedlist : {
        title: 'Nummereret opstilling',
        text: 'Påbegynd nummereret opstilling.',
        cls: 'x-html-editor-tip'
      },
      createlink : {
        title: 'Hyperlink',
        text: 'Lav det markerede test til et hyperlink.',
        cls: 'x-html-editor-tip'
      },
      sourceedit : {
        title: 'Kildetekstredigering',
        text: 'Skift til redigering af kildetekst.',
        cls: 'x-html-editor-tip'
      }
    }
  });
}

if(Ext.grid.GridView){
   Ext.apply(Ext.grid.GridView.prototype, {
      sortAscText  : "Sortér stigende",
      sortDescText : "Sortér faldende",
      lockText     : "Lås kolonne",
      unlockText   : "Fjern lås fra kolonne",
      columnsText  : "Kolonner"
   });
}

if(Ext.grid.GroupingView){
  Ext.apply(Ext.grid.GroupingView.prototype, {
    emptyGroupText : '(Ingen)',
    groupByText    : 'Gruppér efter dette felt',
    showGroupsText : 'Vis i grupper' //should this be sort in groups?
  });
}

if(Ext.grid.PropertyColumnModel){
   Ext.apply(Ext.grid.PropertyColumnModel.prototype, {
      nameText   : "Navn",
      valueText  : "Værdi",
      dateFormat : "j/m/Y"
   });
}

if(Ext.layout.BorderLayout && Ext.layout.BorderLayout.SplitRegion){
   Ext.apply(Ext.layout.BorderLayout.SplitRegion.prototype, {
      splitTip            : "Træk for at ændre størrelsen.",
      collapsibleSplitTip : "Træk for at ændre størrelsen. Dobbelt-klik for at skjule."
   });
}


The source code

/*!
 * licensing@extjs.com
 * http://www.extjs.com/license
 */
/*
 * German translation
 * 2007-Apr-07 update by schmidetzki and humpdi
 * 2007-Oct-31 update by wm003
 * 2009-Jul-10 update by Patrick Matsumura and Rupert Quaderer
 * 2010-Mar-10 update by Volker Grabsch
 */

Ext.UpdateManager.defaults.indicatorText = '
Übertrage Daten ...
';

if(Ext.View){
   Ext.View.prototype.emptyText = "";
}

if(Ext.grid.GridPanel){
   Ext.grid.GridPanel.prototype.ddText = "{0} Zeile(n) ausgewählt";
}

if(Ext.TabPanelItem){
   Ext.TabPanelItem.prototype.closeText = "Diesen Tab schließen";
}

if(Ext.form.BasicForm){
   Ext.form.BasicForm.prototype.waitTitle = "Bitte warten...";
}

if(Ext.form.Field){
   Ext.form.Field.prototype.invalidText = "Der Wert des Feldes ist nicht korrekt";
}

if(Ext.LoadMask){
  Ext.LoadMask.prototype.msg = "Übertrage Daten...";
}

Date.monthNames = [
   "Januar",
   "Februar",
   "März",
   "April",
   "Mai",
   "Juni",
   "Juli",
   "August",
   "September",
   "Oktober",
   "November",
   "Dezember"
];

Date.getShortMonthName = function(month) {
  return Date.monthNames[month].substring(0, 3);
};

Date.monthNumbers = {
  Jan : 0,
  Feb : 1,
  "M\u00e4r" : 2,
  Apr : 3,
  Mai : 4,
  Jun : 5,
  Jul : 6,
  Aug : 7,
  Sep : 8,
  Okt : 9,
  Nov : 10,
  Dez : 11
};

Date.getMonthNumber = function(name) {
  return Date.monthNumbers[name.substring(0, 1).toUpperCase() + name.substring(1, 3).toLowerCase()];
};

Date.dayNames = [
   "Sonntag",
   "Montag",
   "Dienstag",
   "Mittwoch",
   "Donnerstag",
   "Freitag",
   "Samstag"
];

Date.getShortDayName = function(day) {
  return Date.dayNames[day].substring(0, 3);
};

if(Ext.MessageBox){
   Ext.MessageBox.buttonText = {
      ok     : "OK",
      cancel : "Abbrechen",
      yes    : "Ja",
      no     : "Nein"
   };
}

if(Ext.util.Format){
    Ext.util.Format.__number = Ext.util.Format.number;
    Ext.util.Format.number = function(v, format) {
        return Ext.util.Format.__number(v, format || "0.000,00/i");
    };

   Ext.util.Format.date = function(v, format) {
      if(!v) return "";
      if(!(v instanceof Date)) v = new Date(Date.parse(v));
      return v.dateFormat(format || "d.m.Y");
   };
}

if(Ext.DatePicker){
   Ext.apply(Ext.DatePicker.prototype, {
      todayText         : "Heute",
      minText           : "Dieses Datum liegt von dem erstmöglichen Datum",
      maxText           : "Dieses Datum liegt nach dem letztmöglichen Datum",
      disabledDaysText  : "",
      disabledDatesText : "",
      monthNames        : Date.monthNames,
      dayNames          : Date.dayNames,
      nextText          : "Nächster Monat (Strg/Control + Rechts)",
      prevText          : "Vorheriger Monat (Strg/Control + Links)",
      monthYearText     : "Monat auswählen (Strg/Control + Hoch/Runter, um ein Jahr auszuwählen)",
      todayTip          : "Heute ({0}) (Leertaste)",
      format            : "d.m.Y",
      okText            : " OK ",
      cancelText        : "Abbrechen",
      startDay          : 1
   });
}

if(Ext.PagingToolbar){
   Ext.apply(Ext.PagingToolbar.prototype, {
      beforePageText : "Seite",
      afterPageText  : "von {0}",
      firstText      : "Erste Seite",
      prevText       : "vorherige Seite",
      nextText       : "nächste Seite",
      lastText       : "letzte Seite",
      refreshText    : "Aktualisieren",
      displayMsg     : "Anzeige Eintrag {0} - {1} von {2}",
      emptyMsg       : "Keine Daten vorhanden"
   });
}

if(Ext.form.TextField){
   Ext.apply(Ext.form.TextField.prototype, {
      minLengthText : "Bitte geben Sie mindestens {0} Zeichen ein",
      maxLengthText : "Bitte geben Sie maximal {0} Zeichen ein",
      blankText     : "Dieses Feld darf nicht leer sein",
      regexText     : "",
      emptyText     : null
   });
}

if(Ext.form.NumberField){
   Ext.apply(Ext.form.NumberField.prototype, {
      minText : "Der Mindestwert für dieses Feld ist {0}",
      maxText : "Der Maximalwert für dieses Feld ist {0}",
      nanText : "{0} ist keine Zahl",
      decimalSeparator : ","
   });
}

if(Ext.form.DateField){
   Ext.apply(Ext.form.DateField.prototype, {
      disabledDaysText  : "nicht erlaubt",
      disabledDatesText : "nicht erlaubt",
      minText           : "Das Datum in diesem Feld muss nach dem {0} liegen",
      maxText           : "Das Datum in diesem Feld muss vor dem {0} liegen",
      invalidText       : "{0} ist kein gültiges Datum - es muss im Format {1} eingegeben werden",
      format            : "d.m.Y",
      altFormats        : "j.n.Y|j.n.y|j.n.|j.|j/n/Y|j/n/y|j-n-y|j-n-Y|j/n|j-n|dm|dmy|dmY|j|Y-n-j"
   });
}

if(Ext.form.ComboBox){
   Ext.apply(Ext.form.ComboBox.prototype, {
      loadingText       : "Lade Daten ...",
      valueNotFoundText : undefined
   });
}

if(Ext.form.VTypes){
   Ext.apply(Ext.form.VTypes, {
      emailText    : 'Dieses Feld sollte eine E-Mail-Adresse enthalten. Format: "user@example.com"',
      urlText      : 'Dieses Feld sollte eine URL enthalten. Format: "http:/'+'/www.example.com"',
      alphaText    : 'Dieses Feld darf nur Buchstaben enthalten und _',
      alphanumText : 'Dieses Feld darf nur Buchstaben und Zahlen enthalten und _'
   });
}

if(Ext.form.HtmlEditor){
  Ext.apply(Ext.form.HtmlEditor.prototype, {
    createLinkText : 'Bitte geben Sie die URL für den Link ein:',
    buttonTips : {
      bold : {
        title: 'Fett (Ctrl+B)',
        text: 'Erstellt den ausgewählten Text in Fettschrift.',
        cls: 'x-html-editor-tip'
      },
      italic : {
        title: 'Kursiv (Ctrl+I)',
        text: 'Erstellt den ausgewählten Text in Schrägschrift.',
        cls: 'x-html-editor-tip'
      },
      underline : {
        title: 'Unterstrichen (Ctrl+U)',
        text: 'Unterstreicht den ausgewählten Text.',
        cls: 'x-html-editor-tip'
      },
      increasefontsize : {
        title: 'Text vergößern',
        text: 'Erhöht die Schriftgröße.',
        cls: 'x-html-editor-tip'
      },
      decreasefontsize : {
        title: 'Text verkleinern',
        text: 'Verringert die Schriftgröße.',
        cls: 'x-html-editor-tip'
      },
      backcolor : {
        title: 'Text farblich hervorheben',
        text: 'Hintergrundfarbe des ausgewählten Textes ändern.',
        cls: 'x-html-editor-tip'
      },
      forecolor : {
        title: 'Schriftfarbe',
        text: 'Farbe des ausgewählten Textes ändern.',
        cls: 'x-html-editor-tip'
      },
      justifyleft : {
        title: 'Linksbündig',
        text: 'Setzt den Text linksbündig.',
        cls: 'x-html-editor-tip'
      },
      justifycenter : {
        title: 'Zentrieren',
        text: 'Zentriert den Text in Editor.',
        cls: 'x-html-editor-tip'
      },
      justifyright : {
        title: 'Rechtsbündig',
        text: 'Setzt den Text rechtsbündig.',
        cls: 'x-html-editor-tip'
      },
      insertunorderedlist : {
        title: 'Aufzählungsliste',
        text: 'Beginnt eine Aufzählungsliste mit Spiegelstrichen.',
        cls: 'x-html-editor-tip'
      },
      insertorderedlist : {
        title: 'Numerierte Liste',
        text: 'Beginnt eine numerierte Liste.',
        cls: 'x-html-editor-tip'
      },
      createlink : {
        title: 'Hyperlink',
        text: 'Erstellt einen Hyperlink aus dem ausgewählten text.',
        cls: 'x-html-editor-tip'
      },
      sourceedit : {
        title: 'Source bearbeiten',
        text: 'Zur Bearbeitung des Quelltextes wechseln.',
        cls: 'x-html-editor-tip'
      }
    }
  });
}

if(Ext.grid.GridView){
   Ext.apply(Ext.grid.GridView.prototype, {
      sortAscText  : "Aufsteigend sortieren",
      sortDescText : "Absteigend sortieren",
      lockText     : "Spalte sperren",
      unlockText   : "Spalte freigeben (entsperren)",
      columnsText  : "Spalten"
   });
}

if(Ext.grid.GroupingView){
  Ext.apply(Ext.grid.GroupingView.prototype, {
    emptyGroupText : '(Keine)',
    groupByText    : 'Dieses Feld gruppieren',
    showGroupsText : 'In Gruppen anzeigen'
  });
}

if(Ext.grid.PropertyColumnModel){
  Ext.apply(Ext.grid.PropertyColumnModel.prototype, {
      nameText   : "Name",
      valueText  : "Wert",
      dateFormat : "d.m.Y"
  });
}

if(Ext.grid.BooleanColumn){
   Ext.apply(Ext.grid.BooleanColumn.prototype, {
      trueText  : "wahr",
      falseText : "falsch"
   });
}

if(Ext.grid.NumberColumn){
    Ext.apply(Ext.grid.NumberColumn.prototype, {
        format : '0.000,00/i'
    });
}

if(Ext.grid.DateColumn){
    Ext.apply(Ext.grid.DateColumn.prototype, {
        format : 'd.m.Y'
    });
}

if(Ext.layout.BorderLayout && Ext.layout.BorderLayout.SplitRegion){
  Ext.apply(Ext.layout.BorderLayout.SplitRegion.prototype, {
    splitTip            : "Ziehen, um Größe zu ändern.",
    collapsibleSplitTip : "Ziehen, um Größe zu ändern. Doppelklick um Panel auszublenden."
  });
}

if(Ext.form.TimeField){
   Ext.apply(Ext.form.TimeField.prototype, {
    minText : "Die Zeit muss gleich oder nach {0} liegen",
    maxText : "Die Zeit muss gleich oder vor {0} liegen",
    invalidText : "{0} ist keine gültige Zeit",
    format : "H:i"
   });
}


The source code

/*!
 * licensing@extjs.com
 * http://www.extjs.com/license
 */

/**
 * Greek translation
 * By thesilentman (utf8 encoding)
 * 27 Apr 2008
 *
 * Changes since previous (second) Version:
 * + added Date.shortMonthNames
 * + added Date.getShortMonthName
 * + added Date.monthNumbers
 * + added Ext.grid.GroupingView
 */

Ext.UpdateManager.defaults.indicatorText = '
Μεταφόρτωση δεδομένων...
';

if(Ext.View){
   Ext.View.prototype.emptyText = "";
}

if(Ext.grid.GridPanel){
   Ext.grid.GridPanel.prototype.ddText = "{0} Επιλεγμένες σειρές";
}

if(Ext.TabPanelItem){
   Ext.TabPanelItem.prototype.closeText = "Κλείστε το tab";
}

if(Ext.form.Field){
   Ext.form.Field.prototype.invalidText = "Το περιεχόμενο του πεδίου δεν είναι αποδεκτό";
}

if(Ext.LoadMask){
    Ext.LoadMask.prototype.msg = "Μεταφόρτωση δεδομένων...";
}

Date.monthNames = [
   "Ιανουάριος",
   "Φεβρουάριος",
   "Μάρτιος",
   "Απρίλιος",
   "Μάιος",
   "Ιούνιος",
   "Ιούλιος",
   "Αύγουστος",
   "Σεπτέμβριος",
   "Οκτώβριος",
   "Νοέμβριος",
   "Δεκέμβριος"
];

Date.shortMonthNames = [
   "Ιαν",
   "Φεβ",
   "Μάρ",
   "Απρ",
   "Μάι",
   "Ιού",
   "Ιού",
   "Αύγ",
   "Σεπ",
   "Οκτ",
   "Νοέ",
   "Δεκ"
];

Date.getShortMonthName = function(month) {
  return Date.monthNames[month].substring(0, 3);
};

Date.monthNumbers = {
  Jan : 0,
  Feb : 1,
  Mar : 2,
  Apr : 3,
  May : 4,
  Jun : 5,
  Jul : 6,
  Aug : 7,
  Sep : 8,
  Oct : 9,
  Nov : 10,
  Dec : 11
};

Date.getMonthNumber = function(name) {
  return Date.monthNumbers[name.substring(0, 1).toUpperCase() + name.substring(1, 3).toLowerCase()];
};

Date.dayNames = [
   "Κυριακή",
   "Δευτέρα",
   "Τρίτη",
   "Τετάρτη",
   "Πέμπτη",
   "Παρασκευή",
   "Σάββατο"
];

if(Ext.MessageBox){
   Ext.MessageBox.buttonText = {
      ok     : "OK",
      cancel : "Άκυρο",
      yes    : "Ναι",
      no     : "Όχι"
   };
}

if(Ext.util.Format){
   Ext.util.Format.date = function(v, format){
      if(!v) return "";
      if(!(v instanceof Date)) v = new Date(Date.parse(v));
      return v.dateFormat(format || "d/m/Y");
   };
}

if(Ext.DatePicker){
   Ext.apply(Ext.DatePicker.prototype, {
      todayText         : "Σήμερα",
      minText           : "Η Ημερομηνία είναι προγενέστερη από την παλαιότερη αποδεκτή",
      maxText           : "Η Ημερομηνία είναι μεταγενέστερη από την νεότερη αποδεκτή",
      disabledDaysText  : "",
      disabledDatesText : "",
      monthNames  : Date.monthNames,
      dayNames    : Date.dayNames,
      nextText          : 'Επόμενος Μήνας (Control+Δεξί Βέλος)',
      prevText          : 'Προηγούμενος Μήνας (Control + Αριστερό Βέλος)',
      monthYearText     : 'Επιλογή Μηνός (Control + Επάνω/Κάτω Βέλος για μεταβολή ετών)',
      todayTip          : "{0} (ΠΛήκτρο Διαστήματος)",
      format            : "d/m/y"
   });
}

if(Ext.PagingToolbar){
   Ext.apply(Ext.PagingToolbar.prototype, {
      beforePageText : "Σελίδα",
      afterPageText  : "από {0}",
      firstText      : "Πρώτη Σελίδα",
      prevText       : "Προηγούμενη Σελίδα",
      nextText       : "Επόμενη Σελίδα",
      lastText       : "Τελευταία Σελίδα",
      refreshText    : "Ανανέωση",
      displayMsg     : "Εμφάνιση {0} - {1} από {2}",
      emptyMsg       : 'Δεν υπάρχουν δεδομένα'
   });
}

if(Ext.form.TextField){
   Ext.apply(Ext.form.TextField.prototype, {
      minLengthText : "Το μικρότερο αποδεκτό μήκος για το πεδίο είναι {0}",
      maxLengthText : "Το μεγαλύτερο αποδεκτό μήκος για το πεδίο είναι {0}",
      blankText     : "Το πεδίο είναι υποχρεωτικό",
      regexText     : "",
      emptyText     : null
   });
}

if(Ext.form.NumberField){
   Ext.apply(Ext.form.NumberField.prototype, {
      minText : "Η μικρότερη τιμή του πεδίου είναι {0}",
      maxText : "Η μεγαλύτερη τιμή του πεδίου είναι {0}",
      nanText : "{0} δεν είναι αποδεκτός αριθμός"
   });
}

if(Ext.form.DateField){
   Ext.apply(Ext.form.DateField.prototype, {
      disabledDaysText  : "Ανενεργό",
      disabledDatesText : "Ανενεργό",
      minText           : "Η ημερομηνία αυτού του πεδίου πρέπει να είναι μετά την {0}",
      maxText           : "Η ημερομηνία αυτού του πεδίου πρέπει να είναι πριν την {0}",
      invalidText       : "{0} δεν είναι έγκυρη ημερομηνία - πρέπει να είναι στη μορφή {1}",
      format            : "d/m/y"
   });
}

if(Ext.form.ComboBox){
   Ext.apply(Ext.form.ComboBox.prototype, {
      loadingText       : "Μεταφόρτωση δεδομένων...",
      valueNotFoundText : undefined
   });
}

if(Ext.form.VTypes){
   Ext.apply(Ext.form.VTypes, {
      emailText    : 'Το πεδίο δέχεται μόνο διευθύνσεις Email σε μορφή "user@example.com"',
      urlText      : 'Το πεδίο δέχεται μόνο URL σε μορφή "http:/'+'/www.example.com"',
      alphaText    : 'Το πεδίο δέχεται μόνο χαρακτήρες και _',
      alphanumText : 'Το πεδίο δέχεται μόνο χαρακτήρες, αριθμούς και _'
   });
}

if(Ext.form.HtmlEditor){
   Ext.apply(Ext.form.HtmlEditor.prototype, {
        createLinkText : 'Δώστε τη διεύθυνση (URL) για το σύνδεσμο (link):',
        buttonTips : {
            bold : {
               title: 'Έντονα (Ctrl+B)',
               text: 'Κάνετε το προεπιλεγμένο κείμενο έντονο.',
               cls: 'x-html-editor-tip'
            },
            italic : {
               title: 'Πλάγια (Ctrl+I)',
               text: 'Κάνετε το προεπιλεγμένο κείμενο πλάγιο.',
               cls: 'x-html-editor-tip'
            },
            underline : {
               title: 'Υπογράμμιση (Ctrl+U)',
               text: 'Υπογραμμίζετε το προεπιλεγμένο κείμενο.',
               cls: 'x-html-editor-tip'
           },
           increasefontsize : {
               title: 'Μεγέθυνση κειμένου',
               text: 'Μεγαλώνετε τη γραμματοσειρά.',
               cls: 'x-html-editor-tip'
           },
           decreasefontsize : {
               title: 'Σμίκρυνση κειμένου',
               text: 'Μικραίνετε τη γραμματοσειρά.',
               cls: 'x-html-editor-tip'
           },
           backcolor : {
               title: 'Χρώμα Φόντου Κειμένου',
               text: 'Αλλάζετε το χρώμα στο φόντο του προεπιλεγμένου κειμένου.',
               cls: 'x-html-editor-tip'
           },
           forecolor : {
               title: 'Χρώμα Γραμματοσειράς',
               text: 'Αλλάζετε το χρώμα στη γραμματοσειρά του προεπιλεγμένου κειμένου.',
               cls: 'x-html-editor-tip'
           },
           justifyleft : {
               title: 'Αριστερή Στοίχιση Κειμένου',
               text: 'Στοιχίζετε το κείμενο στα αριστερά.',
               cls: 'x-html-editor-tip'
           },
           justifycenter : {
               title: 'Κεντράρισμα Κειμένου',
               text: 'Στοιχίζετε το κείμενο στο κέντρο.',
               cls: 'x-html-editor-tip'
           },
           justifyright : {
               title: 'Δεξιά Στοίχιση Κειμένου',
               text: 'Στοιχίζετε το κείμενο στα δεξιά.',
               cls: 'x-html-editor-tip'
           },
           insertunorderedlist : {
               title: 'Εισαγωγή Λίστας Κουκίδων',
               text: 'Ξεκινήστε μια λίστα με κουκίδες.',
               cls: 'x-html-editor-tip'
           },
           insertorderedlist : {
               title: 'Εισαγωγή Λίστας Αρίθμησης',
               text: 'Ξεκινήστε μια λίστα με αρίθμηση.',
               cls: 'x-html-editor-tip'
           },
           createlink : {
               title: 'Hyperlink',
               text: 'Μετατρέπετε το προεπιλεγμένο κείμενο σε Link.',
               cls: 'x-html-editor-tip'
           },
           sourceedit : {
               title: 'Επεξεργασία Κώδικα',
               text: 'Μεταβαίνετε στη λειτουργία επεξεργασίας κώδικα.',
               cls: 'x-html-editor-tip'
           }
        }
   });
}

if(Ext.grid.GridView){
   Ext.apply(Ext.grid.GridView.prototype, {
      sortAscText  : "Αύξουσα ταξινόμηση",
      sortDescText : "Φθίνουσα ταξινόμηση",
      lockText     : "Κλείδωμα στήλης",
      unlockText   : "Ξεκλείδωμα στήλης",
      columnsText  : "Στήλες"
   });
}

if(Ext.grid.GroupingView){
  Ext.apply(Ext.grid.GroupingView.prototype, {
  emptyGroupText : '(Καμμία)',
  groupByText    : 'Ομαδοποίηση βάσει αυτού του πεδίου',
  showGroupsText : 'Να εμφανίζεται στις ομάδες'
  });
}

if(Ext.grid.PropertyColumnModel){
   Ext.apply(Ext.grid.PropertyColumnModel.prototype, {
      nameText   : "Όνομα",
      valueText  : "Περιεχόμενο",
      dateFormat : "m/d/Y"
   });
}

if(Ext.layout.BorderLayout && Ext.layout.BorderLayout.SplitRegion){
   Ext.apply(Ext.layout.BorderLayout.SplitRegion.prototype, {
      splitTip            : "Σύρετε για αλλαγή μεγέθους.",
      collapsibleSplitTip : "Σύρετε για αλλαγή μεγέθους. Διπλό κλικ για απόκρυψη."
   });
}


The source code

/*!
 * licensing@extjs.com
 * http://www.extjs.com/license
 */

/**
 * List compiled by mystix on the extjs.com forums.
 * Thank you Mystix!
 *
 * English Translations
 * updated to 2.2 by Condor (8 Aug 2008)
 */

Ext.UpdateManager.defaults.indicatorText = '
Loading...
';

if(Ext.data.Types){
    Ext.data.Types.stripRe = /[\$,%]/g;
}

if(Ext.DataView){
  Ext.DataView.prototype.emptyText = "";
}

if(Ext.grid.GridPanel){
  Ext.grid.GridPanel.prototype.ddText = "{0} selected row{1}";
}

if(Ext.LoadMask){
  Ext.LoadMask.prototype.msg = "Loading...";
}

Date.monthNames = [
  "January",
  "February",
  "March",
  "April",
  "May",
  "June",
  "July",
  "August",
  "September",
  "October",
  "November",
  "December"
];

Date.getShortMonthName = function(month) {
  return Date.monthNames[month].substring(0, 3);
};

Date.monthNumbers = {
  Jan : 0,
  Feb : 1,
  Mar : 2,
  Apr : 3,
  May : 4,
  Jun : 5,
  Jul : 6,
  Aug : 7,
  Sep : 8,
  Oct : 9,
  Nov : 10,
  Dec : 11
};

Date.getMonthNumber = function(name) {
  return Date.monthNumbers[name.substring(0, 1).toUpperCase() + name.substring(1, 3).toLowerCase()];
};

Date.dayNames = [
  "Sunday",
  "Monday",
  "Tuesday",
  "Wednesday",
  "Thursday",
  "Friday",
  "Saturday"
];

Date.getShortDayName = function(day) {
  return Date.dayNames[day].substring(0, 3);
};

Date.parseCodes.S.s = "(?:st|nd|rd|th)";

if(Ext.MessageBox){
  Ext.MessageBox.buttonText = {
    ok     : "OK",
    cancel : "Cancel",
    yes    : "Yes",
    no     : "No"
  };
}

if(Ext.util.Format){
  Ext.util.Format.date = function(v, format){
    if(!v) return "";
    if(!(v instanceof Date)) v = new Date(Date.parse(v));
    return v.dateFormat(format || "m/d/Y");
  };
}

if(Ext.DatePicker){
  Ext.apply(Ext.DatePicker.prototype, {
    todayText         : "Today",
    minText           : "This date is before the minimum date",
    maxText           : "This date is after the maximum date",
    disabledDaysText  : "",
    disabledDatesText : "",
    monthNames        : Date.monthNames,
    dayNames          : Date.dayNames,
    nextText          : 'Next Month (Control+Right)',
    prevText          : 'Previous Month (Control+Left)',
    monthYearText     : 'Choose a month (Control+Up/Down to move years)',
    todayTip          : "{0} (Spacebar)",
    format            : "m/d/y",
    okText            : " OK ",
    cancelText        : "Cancel",
    startDay          : 0
  });
}

if(Ext.PagingToolbar){
  Ext.apply(Ext.PagingToolbar.prototype, {
    beforePageText : "Page",
    afterPageText  : "of {0}",
    firstText      : "First Page",
    prevText       : "Previous Page",
    nextText       : "Next Page",
    lastText       : "Last Page",
    refreshText    : "Refresh",
    displayMsg     : "Displaying {0} - {1} of {2}",
    emptyMsg       : 'No data to display'
  });
}

if(Ext.form.BasicForm){
    Ext.form.BasicForm.prototype.waitTitle = "Please Wait..."
}

if(Ext.form.Field){
  Ext.form.Field.prototype.invalidText = "The value in this field is invalid";
}

if(Ext.form.TextField){
  Ext.apply(Ext.form.TextField.prototype, {
    minLengthText : "The minimum length for this field is {0}",
    maxLengthText : "The maximum length for this field is {0}",
    blankText     : "This field is required",
    regexText     : "",
    emptyText     : null
  });
}

if(Ext.form.NumberField){
  Ext.apply(Ext.form.NumberField.prototype, {
    decimalSeparator : ".",
    decimalPrecision : 2,
    minText : "The minimum value for this field is {0}",
    maxText : "The maximum value for this field is {0}",
    nanText : "{0} is not a valid number"
  });
}

if(Ext.form.DateField){
  Ext.apply(Ext.form.DateField.prototype, {
    disabledDaysText  : "Disabled",
    disabledDatesText : "Disabled",
    minText           : "The date in this field must be after {0}",
    maxText           : "The date in this field must be before {0}",
    invalidText       : "{0} is not a valid date - it must be in the format {1}",
    format            : "m/d/y",
    altFormats        : "m/d/Y|m-d-y|m-d-Y|m/d|m-d|md|mdy|mdY|d|Y-m-d"
  });
}

if(Ext.form.ComboBox){
  Ext.apply(Ext.form.ComboBox.prototype, {
    loadingText       : "Loading...",
    valueNotFoundText : undefined
  });
}

if(Ext.form.VTypes){
  Ext.apply(Ext.form.VTypes, {
    emailText    : 'This field should be an e-mail address in the format "user@example.com"',
    urlText      : 'This field should be a URL in the format "http:/'+'/www.example.com"',
    alphaText    : 'This field should only contain letters and _',
    alphanumText : 'This field should only contain letters, numbers and _'
  });
}

if(Ext.form.HtmlEditor){
  Ext.apply(Ext.form.HtmlEditor.prototype, {
    createLinkText : 'Please enter the URL for the link:',
    buttonTips : {
      bold : {
        title: 'Bold (Ctrl+B)',
        text: 'Make the selected text bold.',
        cls: 'x-html-editor-tip'
      },
      italic : {
        title: 'Italic (Ctrl+I)',
        text: 'Make the selected text italic.',
        cls: 'x-html-editor-tip'
      },
      underline : {
        title: 'Underline (Ctrl+U)',
        text: 'Underline the selected text.',
        cls: 'x-html-editor-tip'
      },
      increasefontsize : {
        title: 'Grow Text',
        text: 'Increase the font size.',
        cls: 'x-html-editor-tip'
      },
      decreasefontsize : {
        title: 'Shrink Text',
        text: 'Decrease the font size.',
        cls: 'x-html-editor-tip'
      },
      backcolor : {
        title: 'Text Highlight Color',
        text: 'Change the background color of the selected text.',
        cls: 'x-html-editor-tip'
      },
      forecolor : {
        title: 'Font Color',
        text: 'Change the color of the selected text.',
        cls: 'x-html-editor-tip'
      },
      justifyleft : {
        title: 'Align Text Left',
        text: 'Align text to the left.',
        cls: 'x-html-editor-tip'
      },
      justifycenter : {
        title: 'Center Text',
        text: 'Center text in the editor.',
        cls: 'x-html-editor-tip'
      },
      justifyright : {
        title: 'Align Text Right',
        text: 'Align text to the right.',
        cls: 'x-html-editor-tip'
      },
      insertunorderedlist : {
        title: 'Bullet List',
        text: 'Start a bulleted list.',
        cls: 'x-html-editor-tip'
      },
      insertorderedlist : {
        title: 'Numbered List',
        text: 'Start a numbered list.',
        cls: 'x-html-editor-tip'
      },
      createlink : {
        title: 'Hyperlink',
        text: 'Make the selected text a hyperlink.',
        cls: 'x-html-editor-tip'
      },
      sourceedit : {
        title: 'Source Edit',
        text: 'Switch to source editing mode.',
        cls: 'x-html-editor-tip'
      }
    }
  });
}

if(Ext.grid.GridView){
  Ext.apply(Ext.grid.GridView.prototype, {
    sortAscText  : "Sort Ascending",
    sortDescText : "Sort Descending",
    columnsText  : "Columns"
  });
}

if(Ext.grid.GroupingView){
  Ext.apply(Ext.grid.GroupingView.prototype, {
    emptyGroupText : '(None)',
    groupByText    : 'Group By This Field',
    showGroupsText : 'Show in Groups'
  });
}

if(Ext.grid.PropertyColumnModel){
  Ext.apply(Ext.grid.PropertyColumnModel.prototype, {
    nameText   : "Name",
    valueText  : "Value",
    dateFormat : "m/j/Y",
    trueText: "true",
    falseText: "false"
  });
}

if(Ext.grid.BooleanColumn){
   Ext.apply(Ext.grid.BooleanColumn.prototype, {
      trueText  : "true",
      falseText : "false",
      undefinedText: ' '
   });
}

if(Ext.grid.NumberColumn){
    Ext.apply(Ext.grid.NumberColumn.prototype, {
        format : '0,000.00'
    });
}

if(Ext.grid.DateColumn){
    Ext.apply(Ext.grid.DateColumn.prototype, {
        format : 'm/d/Y'
    });
}

if(Ext.layout.BorderLayout && Ext.layout.BorderLayout.SplitRegion){
  Ext.apply(Ext.layout.BorderLayout.SplitRegion.prototype, {
    splitTip            : "Drag to resize.",
    collapsibleSplitTip : "Drag to resize. Double click to hide."
  });
}

if(Ext.form.TimeField){
  Ext.apply(Ext.form.TimeField.prototype, {
    minText : "The time in this field must be equal to or after {0}",
    maxText : "The time in this field must be equal to or before {0}",
    invalidText : "{0} is not a valid time",
    format : "g:i A",
    altFormats : "g:ia|g:iA|g:i a|g:i A|h:i|g:i|H:i|ga|ha|gA|h a|g a|g A|gi|hi|gia|hia|g|H"
  });
}

if(Ext.form.CheckboxGroup){
  Ext.apply(Ext.form.CheckboxGroup.prototype, {
    blankText : "You must select at least one item in this group"
  });
}

if(Ext.form.RadioGroup){
  Ext.apply(Ext.form.RadioGroup.prototype, {
    blankText : "You must select one item in this group"
  });
}


The source code

/*!
 * licensing@extjs.com
 * http://www.extjs.com/license
 */

/**
 * List compiled by mystix on the extjs.com forums.
 * Thank you Mystix!
 *
 * English (UK) Translations
 * updated to 2.2 by Condor (8 Aug 2008)
 */

Ext.UpdateManager.defaults.indicatorText = '
Loading...
';

if(Ext.DataView){
  Ext.DataView.prototype.emptyText = "";
}

if(Ext.grid.GridPanel){
  Ext.grid.GridPanel.prototype.ddText = "{0} selected row{1}";
}

if(Ext.LoadMask){
  Ext.LoadMask.prototype.msg = "Loading...";
}

Date.monthNames = [
  "January",
  "February",
  "March",
  "April",
  "May",
  "June",
  "July",
  "August",
  "September",
  "October",
  "November",
  "December"
];

Date.getShortMonthName = function(month) {
  return Date.monthNames[month].substring(0, 3);
};

Date.monthNumbers = {
  Jan : 0,
  Feb : 1,
  Mar : 2,
  Apr : 3,
  May : 4,
  Jun : 5,
  Jul : 6,
  Aug : 7,
  Sep : 8,
  Oct : 9,
  Nov : 10,
  Dec : 11
};

Date.getMonthNumber = function(name) {
  return Date.monthNumbers[name.substring(0, 1).toUpperCase() + name.substring(1, 3).toLowerCase()];
};

Date.dayNames = [
  "Sunday",
  "Monday",
  "Tuesday",
  "Wednesday",
  "Thursday",
  "Friday",
  "Saturday"
];

Date.getShortDayName = function(day) {
  return Date.dayNames[day].substring(0, 3);
};

Date.parseCodes.S.s = "(?:st|nd|rd|th)";

if(Ext.MessageBox){
  Ext.MessageBox.buttonText = {
    ok     : "OK",
    cancel : "Cancel",
    yes    : "Yes",
    no     : "No"
  };
}

if(Ext.util.Format){
  Ext.util.Format.date = function(v, format){
    if(!v) return "";
    if(!(v instanceof Date)) v = new Date(Date.parse(v));
    return v.dateFormat(format || "d/m/Y");
  };
}

if(Ext.DatePicker){
  Ext.apply(Ext.DatePicker.prototype, {
    todayText         : "Today",
    minText           : "This date is before the minimum date",
    maxText           : "This date is after the maximum date",
    disabledDaysText  : "",
    disabledDatesText : "",
    monthNames        : Date.monthNames,
    dayNames          : Date.dayNames,
    nextText          : 'Next Month (Control+Right)',
    prevText          : 'Previous Month (Control+Left)',
    monthYearText     : 'Choose a month (Control+Up/Down to move years)',
    todayTip          : "{0} (Spacebar)",
    format            : "d/m/Y",
    okText            : " OK ",
    cancelText        : "Cancel",
    startDay          : 0
  });
}

if(Ext.PagingToolbar){
  Ext.apply(Ext.PagingToolbar.prototype, {
    beforePageText : "Page",
    afterPageText  : "of {0}",
    firstText      : "First Page",
    prevText       : "Previous Page",
    nextText       : "Next Page",
    lastText       : "Last Page",
    refreshText    : "Refresh",
    displayMsg     : "Displaying {0} - {1} of {2}",
    emptyMsg       : 'No data to display'
  });
}

if(Ext.form.BasicForm){
    Ext.form.BasicForm.prototype.waitTitle = "Please Wait..."
}

if(Ext.form.Field){
  Ext.form.Field.prototype.invalidText = "The value in this field is invalid";
}

if(Ext.form.TextField){
  Ext.apply(Ext.form.TextField.prototype, {
    minLengthText : "The minimum length for this field is {0}",
    maxLengthText : "The maximum length for this field is {0}",
    blankText     : "This field is required",
    regexText     : "",
    emptyText     : null
  });
}

if(Ext.form.NumberField){
  Ext.apply(Ext.form.NumberField.prototype, {
    decimalSeparator : ".",
    decimalPrecision : 2,
    minText : "The minimum value for this field is {0}",
    maxText : "The maximum value for this field is {0}",
    nanText : "{0} is not a valid number"
  });
}

if(Ext.form.DateField){
  Ext.apply(Ext.form.DateField.prototype, {
    disabledDaysText  : "Disabled",
    disabledDatesText : "Disabled",
    minText           : "The date in this field must be after {0}",
    maxText           : "The date in this field must be before {0}",
    invalidText       : "{0} is not a valid date - it must be in the format {1}",
    format            : "d/m/y",
    altFormats        : "d/m/Y|d/m/y|d-m-y|d-m-Y|d/m|d-m|dm|dmy|dmY|d|Y-m-d"
  });
}

if(Ext.form.ComboBox){
  Ext.apply(Ext.form.ComboBox.prototype, {
    loadingText       : "Loading...",
    valueNotFoundText : undefined
  });
}

if(Ext.form.VTypes){
  Ext.apply(Ext.form.VTypes, {
    emailText    : 'This field should be an e-mail address in the format "user@example.com"',
    urlText      : 'This field should be a URL in the format "http:/'+'/www.example.com"',
    alphaText    : 'This field should only contain letters and _',
    alphanumText : 'This field should only contain letters, numbers and _'
  });
}

if(Ext.form.HtmlEditor){
  Ext.apply(Ext.form.HtmlEditor.prototype, {
    createLinkText : 'Please enter the URL for the link:',
    buttonTips : {
      bold : {
        title: 'Bold (Ctrl+B)',
        text: 'Make the selected text bold.',
        cls: 'x-html-editor-tip'
      },
      italic : {
        title: 'Italic (Ctrl+I)',
        text: 'Make the selected text italic.',
        cls: 'x-html-editor-tip'
      },
      underline : {
        title: 'Underline (Ctrl+U)',
        text: 'Underline the selected text.',
        cls: 'x-html-editor-tip'
      },
      increasefontsize : {
        title: 'Grow Text',
        text: 'Increase the font size.',
        cls: 'x-html-editor-tip'
      },
      decreasefontsize : {
        title: 'Shrink Text',
        text: 'Decrease the font size.',
        cls: 'x-html-editor-tip'
      },
      backcolor : {
        title: 'Text Highlight Color',
        text: 'Change the background color of the selected text.',
        cls: 'x-html-editor-tip'
      },
      forecolor : {
        title: 'Font Color',
        text: 'Change the color of the selected text.',
        cls: 'x-html-editor-tip'
      },
      justifyleft : {
        title: 'Align Text Left',
        text: 'Align text to the left.',
        cls: 'x-html-editor-tip'
      },
      justifycenter : {
        title: 'Center Text',
        text: 'Center text in the editor.',
        cls: 'x-html-editor-tip'
      },
      justifyright : {
        title: 'Align Text Right',
        text: 'Align text to the right.',
        cls: 'x-html-editor-tip'
      },
      insertunorderedlist : {
        title: 'Bullet List',
        text: 'Start a bulleted list.',
        cls: 'x-html-editor-tip'
      },
      insertorderedlist : {
        title: 'Numbered List',
        text: 'Start a numbered list.',
        cls: 'x-html-editor-tip'
      },
      createlink : {
        title: 'Hyperlink',
        text: 'Make the selected text a hyperlink.',
        cls: 'x-html-editor-tip'
      },
      sourceedit : {
        title: 'Source Edit',
        text: 'Switch to source editing mode.',
        cls: 'x-html-editor-tip'
      }
    }
  });
}

if(Ext.grid.GridView){
  Ext.apply(Ext.grid.GridView.prototype, {
    sortAscText  : "Sort Ascending",
    sortDescText : "Sort Descending",
    columnsText  : "Columns"
  });
}

if(Ext.grid.GroupingView){
  Ext.apply(Ext.grid.GroupingView.prototype, {
    emptyGroupText : '(None)',
    groupByText    : 'Group By This Field',
    showGroupsText : 'Show in Groups'
  });
}

if(Ext.grid.PropertyColumnModel){
  Ext.apply(Ext.grid.PropertyColumnModel.prototype, {
    nameText   : "Name",
    valueText  : "Value",
    dateFormat : "j/m/Y",
    trueText: "true",
    falseText: "false"
  });
}

if(Ext.layout.BorderLayout && Ext.layout.BorderLayout.SplitRegion){
  Ext.apply(Ext.layout.BorderLayout.SplitRegion.prototype, {
    splitTip            : "Drag to resize.",
    collapsibleSplitTip : "Drag to resize. Double click to hide."
  });
}

if(Ext.form.TimeField){
  Ext.apply(Ext.form.TimeField.prototype, {
    minText : "The time in this field must be equal to or after {0}",
    maxText : "The time in this field must be equal to or before {0}",
    invalidText : "{0} is not a valid time",
    format : "g:i A",
    altFormats : "g:ia|g:iA|g:i a|g:i A|h:i|g:i|H:i|ga|ha|gA|h a|g a|g A|gi|hi|gia|hia|g|H"
  });
}

if(Ext.form.CheckboxGroup){
  Ext.apply(Ext.form.CheckboxGroup.prototype, {
    blankText : "You must select at least one item in this group"
  });
}

if(Ext.form.RadioGroup){
  Ext.apply(Ext.form.RadioGroup.prototype, {
    blankText : "You must select one item in this group"
  });
}


The source code

/*!
 * licensing@extjs.com
 * http://www.extjs.com/license
 */
/*
 * Spanish/Latin American Translation by genius551v 04-08-2007
 * Revised by efege, 2007-04-15.
 * Revised by Rafaga2k 10-01-2007 (mm/dd/yyyy)
 * Revised by FeDe 12-13-2007 (mm/dd/yyyy)
 * Synchronized with 2.2 version of ext-lang-en.js (provided by Condor 8 aug 2008)
 *     by halkon_polako 14-aug-2008
 */

Ext.UpdateManager.defaults.indicatorText = '
Cargando...
';

if(Ext.DataView){
  Ext.DataView.prototype.emptyText = "";
}

if(Ext.grid.GridPanel){
  Ext.grid.GridPanel.prototype.ddText = "{0} fila(s) seleccionada(s)";
}

if(Ext.LoadMask){
  Ext.LoadMask.prototype.msg = "Cargando...";
}

Date.monthNames = [
  "Enero",
  "Febrero",
  "Marzo",
  "Abril",
  "Mayo",
  "Junio",
  "Julio",
  "Agosto",
  "Septiembre",
  "Octubre",
  "Noviembre",
  "Diciembre"
];

Date.getShortMonthName = function(month) {
  return Date.monthNames[month].substring(0, 3);
};

Date.monthNumbers = {
  Ene : 0,
  Feb : 1,
  Mar : 2,
  Abr : 3,
  May : 4,
  Jun : 5,
  Jul : 6,
  Ago : 7,
  Sep : 8,
  Oct : 9,
  Nov : 10,
  Dic : 11
};

Date.getMonthNumber = function(name) {
  return Date.monthNumbers[name.substring(0, 1).toUpperCase() + name.substring(1, 3).toLowerCase()];
};

Date.dayNames = [
  "Domingo",
  "Lunes",
  "Martes",
  "Miércoles",
  "Jueves",
  "Viernes",
  "Sábado"
];

Date.getShortDayName = function(day) {
  if (day==3) return "Mié";
  if (day==6) return "Sáb";
  return Date.dayNames[day].substring(0, 3);
};

Date.parseCodes.S.s = "(?:st|nd|rd|th)";

if(Ext.MessageBox){
  Ext.MessageBox.buttonText = {
    ok     : "Aceptar",
    cancel : "Cancelar",
    yes    : "Sí",
    no     : "No"
  };
}

if(Ext.util.Format){
  Ext.util.Format.date = function(v, format){
    if(!v) return "";
    if(!(v instanceof Date)) v = new Date(Date.parse(v));
    return v.dateFormat(format || "d/m/Y");
  };
}

if(Ext.DatePicker){
  Ext.apply(Ext.DatePicker.prototype, {
    todayText         : "Hoy",
    minText           : "Esta fecha es anterior a la fecha mínima",
    maxText           : "Esta fecha es posterior a la fecha máxima",
    disabledDaysText  : "",
    disabledDatesText : "",
    monthNames	      : Date.monthNames,
    dayNames		  : Date.dayNames,
    nextText          : 'Mes Siguiente (Control+Right)',
    prevText          : 'Mes Anterior (Control+Left)',
    monthYearText     : 'Seleccione un mes (Control+Up/Down para desplazar el año)',
    todayTip          : "{0} (Barra espaciadora)",
    format            : "d/m/Y",
    okText            : " Ok ",
    cancelText        : "Cancelar",
    startDay          : 1
  });
}

if(Ext.PagingToolbar){
  Ext.apply(Ext.PagingToolbar.prototype, {
    beforePageText : "Página",
    afterPageText  : "de {0}",
    firstText      : "Primera página",
    prevText       : "Página anterior",
    nextText       : "Página siguiente",
    lastText       : "Última página",
    refreshText    : "Actualizar",
    displayMsg     : "Mostrando {0} - {1} de {2}",
    emptyMsg       : 'Sin datos para mostrar'
  });
}

if(Ext.form.Field){
  Ext.form.Field.prototype.invalidText = "El valor en este campo es inválido";
}

if(Ext.form.TextField){
  Ext.apply(Ext.form.TextField.prototype, {
    minLengthText : "El tamaño mínimo para este campo es de {0}",
    maxLengthText : "El tamaño máximo para este campo es de {0}",
    blankText     : "Este campo es obligatorio",
    regexText     : "",
    emptyText     : null
  });
}

if(Ext.form.NumberField){
  Ext.apply(Ext.form.NumberField.prototype, {
    decimalSeparator : ".",
    decimalPrecision : 2,
    minText : "El valor mínimo para este campo es de {0}",
    maxText : "El valor máximo para este campo es de {0}",
    nanText : "{0} no es un número válido"
  });
}

if(Ext.form.DateField){
  Ext.apply(Ext.form.DateField.prototype, {
    disabledDaysText  : "Deshabilitado",
    disabledDatesText : "Deshabilitado",
    minText           : "La fecha para este campo debe ser posterior a {0}",
    maxText           : "La fecha para este campo debe ser anterior a {0}",
    invalidText       : "{0} no es una fecha válida - debe tener el formato {1}",
    format            : "d/m/Y",
    altFormats        : "d/m/Y|d-m-y|d-m-Y|d/m|d-m|dm|dmy|dmY|d|Y-m-d"
  });
}

if(Ext.form.ComboBox){
  Ext.apply(Ext.form.ComboBox.prototype, {
    loadingText       : "Cargando...",
    valueNotFoundText : undefined
  });
}

if(Ext.form.VTypes){
  Ext.apply(Ext.form.VTypes, {
    emailText    : 'Este campo debe ser una dirección de correo electrónico con el formato "usuario@dominio.com"',
    urlText      : 'Este campo debe ser una URL con el formato "http:/'+'/www.dominio.com"',
    alphaText    : 'Este campo sólo debe contener letras y _',
    alphanumText : 'Este campo sólo debe contener letras, números y _'
  });
}

if(Ext.form.HtmlEditor){
  Ext.apply(Ext.form.HtmlEditor.prototype, {
    createLinkText : "Por favor proporcione la URL para el enlace:",
    buttonTips : {
      bold : {
        title: 'Negritas (Ctrl+B)',
        text: 'Transforma el texto seleccionado en Negritas.',
        cls: 'x-html-editor-tip'
      },
      italic : {
        title: 'Itálica (Ctrl+I)',
        text: 'Transforma el texto seleccionado en Itálicas.',
        cls: 'x-html-editor-tip'
      },
      underline : {
        title: 'Subrayado (Ctrl+U)',
        text: 'Subraya el texto seleccionado.',
        cls: 'x-html-editor-tip'
      },
      increasefontsize : {
        title: 'Aumentar la fuente',
        text: 'Aumenta el tamaño de la fuente',
        cls: 'x-html-editor-tip'
      },
      decreasefontsize : {
        title: 'Reducir la fuente',
        text: 'Reduce el tamaño de la fuente.',
        cls: 'x-html-editor-tip'
      },
      backcolor : {
        title: 'Color de fondo',
        text: 'Modifica el color de fondo del texto seleccionado.',
        cls: 'x-html-editor-tip'
      },
      forecolor : {
        title: 'Color de la fuente',
        text: 'Modifica el color del texto seleccionado.',
        cls: 'x-html-editor-tip'
      },
      justifyleft : {
        title: 'Alinear a la izquierda',
        text: 'Alinea el texto a la izquierda.',
        cls: 'x-html-editor-tip'
      },
      justifycenter : {
        title: 'Centrar',
        text: 'Centrar el texto.',
        cls: 'x-html-editor-tip'
      },
      justifyright : {
        title: 'Alinear a la derecha',
        text: 'Alinea el texto a la derecha.',
        cls: 'x-html-editor-tip'
      },
      insertunorderedlist : {
        title: 'Lista de viñetas',
        text: 'Inicia una lista con viñetas.',
        cls: 'x-html-editor-tip'
      },
      insertorderedlist : {
        title: 'Lista numerada',
        text: 'Inicia una lista numerada.',
        cls: 'x-html-editor-tip'
      },
      createlink : {
        title: 'Enlace',
        text: 'Inserta un enlace de hipertexto.',
        cls: 'x-html-editor-tip'
      },
      sourceedit : {
        title: 'Código Fuente',
        text: 'Pasar al modo de edición de código fuente.',
        cls: 'x-html-editor-tip'
      }
    }
  });
}

if(Ext.grid.GridView){
  Ext.apply(Ext.grid.GridView.prototype, {
    sortAscText  : "Ordenar en forma ascendente",
    sortDescText : "Ordenar en forma descendente",
    columnsText  : "Columnas"
  });
}

if(Ext.grid.GroupingView){
  Ext.apply(Ext.grid.GroupingView.prototype, {
    emptyGroupText : '(Ninguno)',
    groupByText    : 'Agrupar por este campo',
    showGroupsText : 'Mostrar en grupos'
  });
}

if(Ext.grid.PropertyColumnModel){
  Ext.apply(Ext.grid.PropertyColumnModel.prototype, {
    nameText   : "Nombre",
    valueText  : "Valor",
    dateFormat : "j/m/Y"
  });
}

if(Ext.layout.BorderLayout && Ext.layout.BorderLayout.SplitRegion){
  Ext.apply(Ext.layout.BorderLayout.SplitRegion.prototype, {
    splitTip            : "Arrastre para redimensionar.",
    collapsibleSplitTip : "Arrastre para redimensionar. Doble clic para ocultar."
  });
}

if(Ext.form.TimeField){
  Ext.apply(Ext.form.TimeField.prototype, {
    minText : "La hora en este campo debe ser igual o posterior a {0}",
    maxText : "La hora en este campo debe ser igual o anterior a {0}",
    invalidText : "{0} no es una hora válida",
    format : "g:i A",
    altFormats : "g:ia|g:iA|g:i a|g:i A|h:i|g:i|H:i|ga|ha|gA|h a|g a|g A|gi|hi|gia|hia|g|H"
  });
}

if(Ext.form.CheckboxGroup){
  Ext.apply(Ext.form.CheckboxGroup.prototype, {
    blankText : "Debe seleccionar al menos un étem de este grupo"
  });
}

if(Ext.form.RadioGroup){
  Ext.apply(Ext.form.RadioGroup.prototype, {
    blankText : "Debe seleccionar un étem de este grupo"
  });
}


The source code

/*!
 * licensing@extjs.com
 * http://www.extjs.com/license
 */
/*
 * Farsi (Persian) translation
 * By Mohaqa
 * 03-10-2007, 06:23 PM
 */

Ext.UpdateManager.defaults.indicatorText = '
در حال بارگذاری ...
';

if(Ext.View){
   Ext.View.prototype.emptyText = "";
}

if(Ext.grid.GridPanel){
   Ext.grid.GridPanel.prototype.ddText = "{0} رکورد انتخاب شده";
}

if(Ext.TabPanelItem){
   Ext.TabPanelItem.prototype.closeText = "بستن";
}

if(Ext.form.Field){
   Ext.form.Field.prototype.invalidText = "مقدار فیلد صحیح نیست";
}

if(Ext.LoadMask){
    Ext.LoadMask.prototype.msg = "در حال بارگذاری ...";
}

Date.monthNames = [
   "ژانویه",
   "فوریه",
   "مارس",
   "آپریل",
   "می",
   "ژوئن",
   "جولای",
   "آگوست",
   "سپتامبر",
   "اکتبر",
   "نوامبر",
   "دسامبر"
];

Date.monthNumbers = {
  Jan : 0,
  Feb : 1,
  Mar : 2,
  Apr : 3,
  May : 4,
  Jun : 5,
  Jul : 6,
  Aug : 7,
  Sep : 8,
  Oct : 9,
  Nov : 10,
  Dec : 11
};

Date.dayNames = [
   "یکشنبه",
   "دوشنبه",
   "سه شنبه",
   "چهارشنبه",
   "پنجشنبه",
   "جمعه",
   "شنبه"
];

if(Ext.MessageBox){
   Ext.MessageBox.buttonText = {
      ok     : "تایید",
      cancel : "بازگشت",
      yes    : "بله",
      no     : "خیر"
   };
}

if(Ext.util.Format){
   Ext.util.Format.date = function(v, format){
      if(!v) return "";
      if(!(v instanceof Date)) v = new Date(Date.parse(v));
      return v.dateFormat(format || "Y/m/d");
   };
}

if(Ext.DatePicker){
  Ext.apply(Ext.DatePicker.prototype, {
    todayText         : "امروز",
    minText           : "این تاریخ قبل از محدوده مجاز است",
    maxText           : "این تاریخ پس از محدوده مجاز است",
    disabledDaysText  : "",
    disabledDatesText : "",
    monthNames        : Date.monthNames,
    dayNames          : Date.dayNames,
    nextText          : 'ماه بعد (Control + Right)',
    prevText          : 'ماه قبل (Control+Left)',
    monthYearText     : 'یک ماه را انتخاب کنید (Control+Up/Down برای انتقال در سال)',
    todayTip          : "{0} (Spacebar)",
    format            : "y/m/d",
    okText            : " OK ",
    cancelText        : "Cancel",
    startDay          : 0
   });
}

if(Ext.PagingToolbar){
   Ext.apply(Ext.PagingToolbar.prototype, {
      beforePageText : "صفحه",
      afterPageText  : "از {0}",
      firstText      : "صفحه اول",
      prevText       : "صفحه قبل",
      nextText       : "صفحه بعد",
      lastText       : "صفحه آخر",
      refreshText    : "بازخوانی",
      displayMsg     : "نمایش {0} - {1} of {2}",
      emptyMsg       : 'داده ای برای نمایش وجود ندارد'
   });
}

if(Ext.form.TextField){
   Ext.apply(Ext.form.TextField.prototype, {
      minLengthText : "حداقل طول این فیلد برابر است با {0}",
      maxLengthText : "حداکثر طول این فیلد برابر است با {0}",
      blankText     : "این فیلد باید مقداری داشته باشد",
      regexText     : "",
      emptyText     : null
   });
}

if(Ext.form.NumberField){
   Ext.apply(Ext.form.NumberField.prototype, {
      minText : "حداقل مقدار این فیلد برابر است با {0}",
      maxText : "حداکثر مقدار این فیلد برابر است با {0}",
      nanText : "{0} یک عدد نیست"
   });
}

if(Ext.form.DateField){
   Ext.apply(Ext.form.DateField.prototype, {
      disabledDaysText  : "غیرفعال",
      disabledDatesText : "غیرفعال",
      minText           : "تاریخ باید پس از {0} باشد",
      maxText           : "تاریخ باید پس از {0} باشد",
      invalidText       : "{0} تاریخ صحیحی نیست - فرمت صحیح {1}",
      format            : "y/m/d"
   });
}

if(Ext.form.ComboBox){
   Ext.apply(Ext.form.ComboBox.prototype, {
      loadingText       : "در حال بارگذاری ...",
      valueNotFoundText : undefined
   });
}

if(Ext.form.VTypes){
   Ext.apply(Ext.form.VTypes, {
      emailText    : 'مقدار این فیلد باید یک ایمیل با این فرمت باشد "user@example.com"',
      urlText      : 'مقدار این آدرس باید یک آدرس سایت با این فرمت باشد "http:/'+'/www.example.com"',
      alphaText    : 'مقدار این فیلد باید فقط از حروف الفبا و _ تشکیل شده باشد ',
      alphanumText : 'مقدار این فیلد باید فقط از حروف الفبا، اعداد و _ تشکیل شده باشد'
   });
}

if(Ext.form.HtmlEditor){
  Ext.apply(Ext.form.HtmlEditor.prototype, {
    createLinkText : 'لطفا آدرس لینک را وارد کنید:',
    buttonTips : {
      bold : {
        title: 'تیره (Ctrl+B)',
        text: 'متن انتخاب شده را تیره می کند.',
        cls: 'x-html-editor-tip'
      },
      italic : {
        title: 'ایتالیک (Ctrl+I)',
        text: 'متن انتخاب شده را ایتالیک می کند.',
        cls: 'x-html-editor-tip'
      },
      underline : {
        title: 'زیرخط (Ctrl+U)',
        text: 'زیر هر نوشته یک خط نمایش می دهد.',
        cls: 'x-html-editor-tip'
      },
      increasefontsize : {
        title: 'افزایش اندازه',
        text: 'اندازه فونت را افزایش می دهد.',
        cls: 'x-html-editor-tip'
      },
      decreasefontsize : {
        title: 'کاهش اندازه',
        text: 'اندازه متن را کاهش می دهد.',
        cls: 'x-html-editor-tip'
      },
      backcolor : {
        title: 'رنگ زمینه متن',
        text: 'برای تغییر رنگ زمینه متن استفاده می شود.',
        cls: 'x-html-editor-tip'
      },
      forecolor : {
        title: 'رنگ قلم',
        text: 'رنگ  قلم متن را تغییر می دهد.',
        cls: 'x-html-editor-tip'
      },
      justifyleft : {
        title: 'چیدن متن از سمت چپ',
        text: 'متن از سمت چپ چیده شده می شود.',
        cls: 'x-html-editor-tip'
      },
      justifycenter : {
        title: 'متن در وسط ',
        text: 'نمایش متن در قسمت وسط صفحه و رعابت سمت چپ و راست.',
        cls: 'x-html-editor-tip'
      },
      justifyright : {
        title: 'چیدن متن از سمت راست',
        text: 'متن از سمت راست پیده خواهد شد.',
        cls: 'x-html-editor-tip'
      },
      insertunorderedlist : {
        title: 'لیست همراه با علامت',
        text: 'یک لیست جدید ایجاد می کند.',
        cls: 'x-html-editor-tip'
      },
      insertorderedlist : {
        title: 'لیست عددی',
        text: 'یک لیست عددی ایجاد می کند. ',
        cls: 'x-html-editor-tip'
      },
      createlink : {
        title: 'لینک',
        text: 'متن انتخاب شده را به لینک تبدیل کنید.',
        cls: 'x-html-editor-tip'
      },
      sourceedit : {
        title: 'ویرایش سورس',
        text: 'رفتن به حالت ویرایش سورس.',
        cls: 'x-html-editor-tip'
      }
    }
  });
}

if(Ext.grid.GridView){
   Ext.apply(Ext.grid.GridView.prototype, {
      sortAscText  : "مرتب سازی افزایشی",
      sortDescText : "مرتب سازی کاهشی",
      lockText     : "قفل ستون ها",
      unlockText   : "بازکردن ستون ها",
      columnsText  : "ستون ها"
   });
}

if(Ext.grid.PropertyColumnModel){
   Ext.apply(Ext.grid.PropertyColumnModel.prototype, {
      nameText   : "نام",
      valueText  : "مقدار",
      dateFormat : "Y/m/d"
   });
}

if(Ext.layout.BorderLayout && Ext.layout.BorderLayout.SplitRegion){
   Ext.apply(Ext.layout.BorderLayout.SplitRegion.prototype, {
      splitTip            : "درگ برای تغییر اندازه.",
      collapsibleSplitTip : "برای تغییر اندازه درگ کنید."
   });
}


The source code

/*!
 * licensing@extjs.com
 * http://www.extjs.com/license
 */

/**
 * Finnish Translations
 *
 * 'ä' should read as lowercase 'a' with two dots on top (ä)
 */

Ext.UpdateManager.defaults.indicatorText = '
Ladataan...
';

if(Ext.View){
  Ext.View.prototype.emptyText = "";
}

if(Ext.grid.GridPanel){
  Ext.grid.GridPanel.prototype.ddText = "{0} rivi(ä) valittu";
}

if(Ext.TabPanelItem){
  Ext.TabPanelItem.prototype.closeText = "Sulje tämä välilehti";
}

if(Ext.LoadMask){
  Ext.LoadMask.prototype.msg = "Ladataan...";
}

Date.monthNames = [
  "tammikuu",
  "helmikuu",
  "maaliskuu",
  "huhtikuu",
  "toukokuu",
  "kesäkuu",
  "heinäkuu",
  "elokuu",
  "syyskuu",
  "lokakuu",
  "marraskuu",
  "joulukuu"
];

Date.getShortMonthName = function(month) {
  //return Date.monthNames[month].substring(0, 3);
  return (month+1) + ".";
};

Date.monthNumbers = {
  Jan : 0,
  Feb : 1,
  Mar : 2,
  Apr : 3,
  May : 4,
  Jun : 5,
  Jul : 6,
  Aug : 7,
  Sep : 8,
  Oct : 9,
  Nov : 10,
  Dec : 11
};

Date.getMonthNumber = function(name) {
  if(name.match(/^(1?\d)\./)) {
    return -1+RegExp.$1;
  } else {
    return Date.monthNumbers[name.substring(0, 1).toUpperCase() + name.substring(1, 3).toLowerCase()];
  }
};

Date.dayNames = [
  "sunnuntai",
  "maanantai",
  "tiistai",
  "keskiviikko",
  "torstai",
  "perjantai",
  "lauantai"
];

Date.getShortDayName = function(day) {
  return Date.dayNames[day].substring(0, 2);
};

if(Ext.MessageBox){
  Ext.MessageBox.buttonText = {
    ok     : "OK",
    cancel : "Peruuta",
    yes    : "Kyllä",
    no     : "Ei"
  };
}

if(Ext.util.Format){
  Ext.util.Format.date = function(v, format){
    if(!v) return "";
    if(!(v instanceof Date)) v = new Date(Date.parse(v));
    return v.dateFormat(format || "j.n.Y");
  };
}

if(Ext.DatePicker){
  Ext.apply(Ext.DatePicker.prototype, {
    todayText         : "Tänään",
    minText           : "Tämä päivämäärä on aikaisempi kuin ensimmäinen sallittu",
    maxText           : "Tämä päivämäärä on myöhäisempi kuin viimeinen sallittu",
    disabledDaysText  : "",
    disabledDatesText : "",
    monthNames        : Date.monthNames,
    dayNames          : Date.dayNames,
    nextText          : 'Seuraava kuukausi (Control+oikealle)',
    prevText          : 'Edellinen kuukausi (Control+vasemmalle)',
    monthYearText     : 'Valitse kuukausi (vaihda vuotta painamalla Control+ylös/alas)',
    todayTip          : "{0} (välilyönti)",
    format            : "j.n.Y",
    okText            : " OK ",
    cancelText        : "Peruuta",
    startDay          : 1 // viikko alkaa maanantaista
  });
}

if(Ext.PagingToolbar){
  Ext.apply(Ext.PagingToolbar.prototype, {
    beforePageText : "Sivu",
    afterPageText  : "/ {0}",
    firstText      : "Ensimmäinen sivu",
    prevText       : "Edellinen sivu",
    nextText       : "Seuraava sivu",
    lastText       : "Viimeinen sivu",
    refreshText    : "Päivitä",
    displayMsg     : "Näytetään {0} - {1} / {2}",
    emptyMsg       : 'Ei tietoja'
  });
}

if(Ext.form.Field){
  Ext.form.Field.prototype.invalidText = "Tämän kentän arvo ei kelpaa";
}

if(Ext.form.TextField){
  Ext.apply(Ext.form.TextField.prototype, {
    minLengthText : "Tämän kentän minimipituus on {0}",
    maxLengthText : "Tämän kentän maksimipituus on {0}",
    blankText     : "Tämä kenttä on pakollinen",
    regexText     : "",
    emptyText     : null
  });
}

if(Ext.form.NumberField){
  Ext.apply(Ext.form.NumberField.prototype, {
    minText : "Tämän kentän pienin sallittu arvo on {0}",
    maxText : "Tämän kentän suurin sallittu arvo on {0}",
    nanText : "{0} ei ole numero"
  });
}

if(Ext.form.DateField){
  Ext.apply(Ext.form.DateField.prototype, {
    disabledDaysText  : "Ei käytössä",
    disabledDatesText : "Ei käytössä",
    minText           : "Tämän kentän päivämäärän tulee olla {0} jälkeen",
    maxText           : "Tämän kentän päivämäärän tulee olla ennen {0}",
    invalidText       : "Päivämäärä {0} ei ole oikeassa muodossa - kirjoita päivämäärä muodossa {1}",
    format            : "j.n.Y",
    altFormats        : "j.n.|d.m.|mdy|mdY|d|Y-m-d|Y/m/d"
  });
}

if(Ext.form.ComboBox){
  Ext.apply(Ext.form.ComboBox.prototype, {
    loadingText       : "Ladataan...",
    valueNotFoundText : undefined
  });
}

if(Ext.form.VTypes){
  Ext.apply(Ext.form.VTypes, {
    emailText    : 'Syötä tähän kenttään sähköpostiosoite, esim. "etunimi.sukunimi@osoite.fi"',
    urlText      : 'Syötä tähän kenttään URL-osoite, esim. "http:/'+'/www.osoite.fi"',
    alphaText    : 'Syötä tähän kenttään vain kirjaimia (a-z, A-Z) ja alaviivoja (_)',
    alphanumText : 'Syötä tähän kenttään vain kirjaimia (a-z, A-Z), numeroita (0-9) ja alaviivoja (_)'
  });
}

if(Ext.form.HtmlEditor){
  Ext.apply(Ext.form.HtmlEditor.prototype, {
    createLinkText : 'Anna linkin URL-osoite:',
    buttonTips : {
      bold : {
        title: 'Lihavoi (Ctrl+B)',
        text: 'Lihavoi valittu teksti.',
        cls: 'x-html-editor-tip'
      },
      italic : {
        title: 'Kursivoi (Ctrl+I)',
        text: 'Kursivoi valittu teksti.',
        cls: 'x-html-editor-tip'
      },
      underline : {
        title: 'Alleviivaa (Ctrl+U)',
        text: 'Alleviivaa valittu teksti.',
        cls: 'x-html-editor-tip'
      },
      increasefontsize : {
        title: 'Suurenna tekstiä',
        text: 'Kasvata tekstin kirjasinkokoa.',
        cls: 'x-html-editor-tip'
      },
      decreasefontsize : {
        title: 'Pienennä tekstiä',
        text: 'Pienennä tekstin kirjasinkokoa.',
        cls: 'x-html-editor-tip'
      },
      backcolor : {
        title: 'Tekstin korostusväri',
        text: 'Vaihda valitun tekstin taustaväriä.',
        cls: 'x-html-editor-tip'
      },
      forecolor : {
        title: 'Tekstin väri',
        text: 'Vaihda valitun tekstin väriä.',
        cls: 'x-html-editor-tip'
      },
      justifyleft : {
        title: 'Tasaa vasemmalle',
        text: 'Tasaa teksti vasempaan reunaan.',
        cls: 'x-html-editor-tip'
      },
      justifycenter : {
        title: 'Keskitä',
        text: 'Keskitä teksti.',
        cls: 'x-html-editor-tip'
      },
      justifyright : {
        title: 'Tasaa oikealle',
        text: 'Tasaa teksti oikeaan reunaan.',
        cls: 'x-html-editor-tip'
      },
      insertunorderedlist : {
        title: 'Luettelo',
        text: 'Luo luettelo.',
        cls: 'x-html-editor-tip'
      },
      insertorderedlist : {
        title: 'Numeroitu luettelo',
        text: 'Luo numeroitu luettelo.',
        cls: 'x-html-editor-tip'
      },
      createlink : {
        title: 'Linkki',
        text: 'Tee valitusta tekstistä hyperlinkki.',
        cls: 'x-html-editor-tip'
      },
      sourceedit : {
        title: 'Lähdekoodin muokkaus',
        text: 'Vaihda lähdekoodin muokkausnäkymään.',
        cls: 'x-html-editor-tip'
      }
    }
  });
}

if(Ext.form.BasicForm){
  Ext.form.BasicForm.prototype.waitTitle = "Odota...";
}

if(Ext.grid.GridView){
  Ext.apply(Ext.grid.GridView.prototype, {
    sortAscText  : "Järjestä A-Ö",
    sortDescText : "Järjestä Ö-A",
    lockText     : "Lukitse sarake",
    unlockText   : "Vapauta sarakkeen lukitus",
    columnsText  : "Sarakkeet"
  });
}

if(Ext.grid.GroupingView){
  Ext.apply(Ext.grid.GroupingView.prototype, {
    emptyGroupText : '(ei mitään)',
    groupByText    : 'Ryhmittele tämän kentän mukaan',
    showGroupsText : 'Näytä ryhmissä'
  });
}

if(Ext.grid.PropertyColumnModel){
  Ext.apply(Ext.grid.PropertyColumnModel.prototype, {
    nameText   : "Nimi",
    valueText  : "Arvo",
    dateFormat : "j.m.Y"
  });
}

if(Ext.layout.BorderLayout && Ext.layout.BorderLayout.SplitRegion){
  Ext.apply(Ext.layout.BorderLayout.SplitRegion.prototype, {
    splitTip            : "Muuta kokoa vetämällä.",
    collapsibleSplitTip : "Muuta kokoa vetämällä. Piilota kaksoisklikkauksella."
  });
}


The source code

/*!
 * licensing@extjs.com
 * http://www.extjs.com/license
 */
﻿/*
 * France (France) translation
 * By Thylia
 * 09-11-2007, 02:22 PM
 * updated to 2.2 by disizben (22 Sep 2008)
 */

Ext.UpdateManager.defaults.indicatorText = '
En cours de chargement...
';

if(Ext.DataView){
   Ext.DataView.prototype.emptyText = "";
}

if(Ext.grid.GridPanel){
   Ext.grid.GridPanel.prototype.ddText = "{0} ligne{1} sélectionnée{1}";
}

if(Ext.LoadMask){
    Ext.LoadMask.prototype.msg = "En cours de chargement...";
}

Date.shortMonthNames = [
   "Janv",
   "Févr",
   "Mars",
   "Avr",
   "Mai",
   "Juin",
   "Juil",
   "Août",
   "Sept",
   "Oct",
   "Nov",
   "Déc"
];

Date.getShortMonthName = function(month) {
  return Date.shortMonthNames[month];
};

Date.monthNames = [
   "Janvier",
   "Février",
   "Mars",
   "Avril",
   "Mai",
   "Juin",
   "Juillet",
   "Août",
   "Septembre",
   "Octobre",
   "Novembre",
   "Décembre"
];

Date.monthNumbers = {
  "Janvier" : 0,
  "Février" : 1,
  "Mars" : 2,
  "Avril" : 3,
  "Mai" : 4,
  "Juin" : 5,
  "Juillet" : 6,
  "Août" : 7,
  "Septembre" : 8,
  "Octobre" : 9,
  "Novembre" : 10,
  "Décembre" : 11
};

Date.getMonthNumber = function(name) {
  return Date.monthNumbers[Ext.util.Format.capitalize(name)];
};

Date.dayNames = [
   "Dimanche",
   "Lundi",
   "Mardi",
   "Mercredi",
   "Jeudi",
   "Vendredi",
   "Samedi"
];

Date.getShortDayName = function(day) {
  return Date.dayNames[day].substring(0, 3);
};

Date.parseCodes.S.s = "(?:er)";

Ext.override(Date, {
    getSuffix : function() {
        return (this.getDate() == 1) ? "er" : "";
    }
});

if(Ext.MessageBox){
   Ext.MessageBox.buttonText = {
      ok     : "OK",
      cancel : "Annuler",
      yes    : "Oui",
      no     : "Non"
   };
}

if(Ext.util.Format){
   Ext.util.Format.date = function(v, format){
      if(!v) return "";
      if(!(v instanceof Date)) v = new Date(Date.parse(v));
      return v.dateFormat(format || "d/m/Y");
   };
}

if(Ext.DatePicker){
   Ext.apply(Ext.DatePicker.prototype, {
      todayText         : "Aujourd'hui",
      minText           : "Cette date est antérieure à la date minimum",
      maxText           : "Cette date est postérieure à la date maximum",
      disabledDaysText  : "",
      disabledDatesText : "",
      monthNames		: Date.monthNames,
      dayNames			: Date.dayNames,
      nextText          : 'Mois suivant (CTRL+Flèche droite)',
      prevText          : "Mois précédent (CTRL+Flèche gauche)",
      monthYearText     : "Choisissez un mois (CTRL+Flèche haut ou bas pour changer d'année.)",
      todayTip          : "{0} (Barre d'espace)",
      okText            : " OK ",
      cancelText        : "Annuler",
      format            : "d/m/y",
      startDay          : 1
   });
}

if(Ext.PagingToolbar){
   Ext.apply(Ext.PagingToolbar.prototype, {
      beforePageText : "Page",
      afterPageText  : "sur {0}",
      firstText      : "Première page",
      prevText       : "Page précédente",
      nextText       : "Page suivante",
      lastText       : "Dernière page",
      refreshText    : "Actualiser la page",
      displayMsg     : "Page courante {0} - {1} sur {2}",
      emptyMsg       : 'Aucune donnée à afficher'
   });
}

if(Ext.form.Field){
   Ext.form.Field.prototype.invalidText = "La valeur de ce champ est invalide";
}

if(Ext.form.TextField){
   Ext.apply(Ext.form.TextField.prototype, {
      minLengthText : "La longueur minimum de ce champ est de {0} caractères",
      maxLengthText : "La longueur maximum de ce champ est de {0} caractères",
      blankText     : "Ce champ est obligatoire",
      regexText     : "",
      emptyText     : null
   });
}

if(Ext.form.NumberField){
   Ext.apply(Ext.form.NumberField.prototype, {
      decimalSeparator : ",",
      decimalPrecision : 2,
      minText : "La valeur minimum de ce champ doit être de {0}",
      maxText : "La valeur maximum de ce champ doit être de {0}",
      nanText : "{0} n'est pas un nombre valide"
   });
}

if(Ext.form.DateField){
   Ext.apply(Ext.form.DateField.prototype, {
      disabledDaysText  : "Désactivé",
      disabledDatesText : "Désactivé",
      minText           : "La date de ce champ ne peut être antérieure au {0}",
      maxText           : "La date de ce champ ne peut être postérieure au {0}",
      invalidText       : "{0} n'est pas une date valide - elle doit être au format suivant: {1}",
      format            : "d/m/y",
      altFormats        : "d/m/Y|d-m-y|d-m-Y|d/m|d-m|dm|dmy|dmY|d|Y-m-d"
   });
}

if(Ext.form.ComboBox){
   Ext.apply(Ext.form.ComboBox.prototype, {
      loadingText       : "En cours de chargement...",
      valueNotFoundText : undefined
   });
}

if(Ext.form.VTypes){
   Ext.apply(Ext.form.VTypes, {
      emailText    : 'Ce champ doit contenir une adresse email au format: "usager@example.com"',
      urlText      : 'Ce champ doit contenir une URL au format suivant: "http:/'+'/www.example.com"',
      alphaText    : 'Ce champ ne peut contenir que des lettres et le caractère souligné (_)',
      alphanumText : 'Ce champ ne peut contenir que des caractères alphanumériques ainsi que le caractère souligné (_)'
   });
}

if(Ext.form.HtmlEditor){
   Ext.apply(Ext.form.HtmlEditor.prototype, {
      createLinkText : "Veuillez entrer l'URL pour ce lien:",
          buttonTips : {
              bold : {
                  title: 'Gras (Ctrl+B)',
                  text: 'Met le texte sélectionné en gras.',
                  cls: 'x-html-editor-tip'
              },
              italic : {
                  title: 'Italique (Ctrl+I)',
                  text: 'Met le texte sélectionné en italique.',
                  cls: 'x-html-editor-tip'
              },
              underline : {
                  title: 'Souligné (Ctrl+U)',
                  text: 'Souligne le texte sélectionné.',
                  cls: 'x-html-editor-tip'
              },
              increasefontsize : {
                  title: 'Agrandir la police',
                  text: 'Augmente la taille de la police.',
                  cls: 'x-html-editor-tip'
              },
              decreasefontsize : {
                  title: 'Réduire la police',
                  text: 'Réduit la taille de la police.',
                  cls: 'x-html-editor-tip'
              },
              backcolor : {
                  title: 'Couleur de surbrillance',
                  text: 'Modifie la couleur de fond du texte sélectionné.',
                  cls: 'x-html-editor-tip'
              },
              forecolor : {
                  title: 'Couleur de police',
                  text: 'Modifie la couleur du texte sélectionné.',
                  cls: 'x-html-editor-tip'
              },
              justifyleft : {
                  title: 'Aligner à gauche',
                  text: 'Aligne le texte à gauche.',
                  cls: 'x-html-editor-tip'
              },
              justifycenter : {
                  title: 'Centrer',
                  text: 'Centre le texte.',
                  cls: 'x-html-editor-tip'
              },
              justifyright : {
                  title: 'Aligner à droite',
                  text: 'Aligner le texte à droite.',
                  cls: 'x-html-editor-tip'
              },
              insertunorderedlist : {
                  title: 'Liste à puce',
                  text: 'Démarre une liste à puce.',
                  cls: 'x-html-editor-tip'
              },
              insertorderedlist : {
                  title: 'Liste numérotée',
                  text: 'Démarre une liste numérotée.',
                  cls: 'x-html-editor-tip'
              },
              createlink : {
                  title: 'Lien hypertexte',
                  text: 'Transforme en lien hypertexte.',
                  cls: 'x-html-editor-tip'
              },
              sourceedit : {
                  title: 'Code source',
                  text: 'Basculer en mode édition du code source.',
                  cls: 'x-html-editor-tip'
              }
        }
   });
}

if(Ext.grid.GridView){
   Ext.apply(Ext.grid.GridView.prototype, {
      sortAscText  : "Tri croissant",
      sortDescText : "Tri décroissant",
      columnsText  : "Colonnes"
   });
}

if(Ext.grid.GroupingView){
   Ext.apply(Ext.grid.GroupingView.prototype, {
      emptyGroupText : '(Aucun)',
      groupByText    : 'Grouper par ce champ',
      showGroupsText : 'Afficher par groupes'
   });
}

if(Ext.grid.PropertyColumnModel){
   Ext.apply(Ext.grid.PropertyColumnModel.prototype, {
      nameText   : "Propriété",
      valueText  : "Valeur",
      dateFormat : "d/m/Y"
   });
}

if(Ext.layout.BorderLayout && Ext.layout.BorderLayout.SplitRegion){
   Ext.apply(Ext.layout.BorderLayout.SplitRegion.prototype, {
      splitTip            : "Cliquer et glisser pour redimensionner le panneau.",
      collapsibleSplitTip : "Cliquer et glisser pour redimensionner le panneau. Double-cliquer pour le cacher."
   });
}

if(Ext.form.TimeField){
   Ext.apply(Ext.form.TimeField.prototype, {
      minText     : "L'heure de ce champ ne peut être antérieure à {0}",
      maxText     : "L'heure de ce champ ne peut être postérieure à {0}",
      invalidText : "{0} n'est pas une heure valide",
      format      : "H:i",
      altFormats  : "g:ia|g:iA|g:i a|g:i A|h:i|g:i|H:i|ga|h a|g a|g A|gi|hi|Hi|gia|hia|g|H"
   });
}

if(Ext.form.CheckboxGroup){
  Ext.apply(Ext.form.CheckboxGroup.prototype, {
    blankText : "Vous devez sélectionner au moins un élément dans ce groupe"
  });
}

if(Ext.form.RadioGroup){
  Ext.apply(Ext.form.RadioGroup.prototype, {
    blankText : "Vous devez sélectionner au moins un élément dans ce groupe"
  });
}


The source code

/*!
 * licensing@extjs.com
 * http://www.extjs.com/license
 */
﻿/*
 * France (Canadian) translation
 * By BernardChhun
 * 04-08-2007, 03:07 AM
 */

Ext.UpdateManager.defaults.indicatorText = '
En cours de chargement...
';

if(Ext.View){
   Ext.View.prototype.emptyText = "";
}

if(Ext.grid.GridPanel){
   Ext.grid.GridPanel.prototype.ddText = "{0} ligne(s) sélectionné(s)";
}

if(Ext.TabPanelItem){
   Ext.TabPanelItem.prototype.closeText = "Fermer cette onglet";
}

if(Ext.form.Field){
   Ext.form.Field.prototype.invalidText = "La valeur de ce champ est invalide";
}

if(Ext.LoadMask){
    Ext.LoadMask.prototype.msg = "En cours de chargement...";
}

Date.shortMonthNames = [
   "Janv",
   "Févr",
   "Mars",
   "Avr",
   "Mai",
   "Juin",
   "Juil",
   "Août",
   "Sept",
   "Oct",
   "Nov",
   "Déc"
];

Date.getShortMonthName = function(month) {
  return Date.shortMonthNames[month];
};

Date.monthNames = [
   "Janvier",
   "Février",
   "Mars",
   "Avril",
   "Mai",
   "Juin",
   "Juillet",
   "Août",
   "Septembre",
   "Octobre",
   "Novembre",
   "Décembre"
];

Date.monthNumbers = {
  "Janvier" : 0,
  "Février" : 1,
  "Mars" : 2,
  "Avril" : 3,
  "Mai" : 4,
  "Juin" : 5,
  "Juillet" : 6,
  "Août" : 7,
  "Septembre" : 8,
  "Octobre" : 9,
  "Novembre" : 10,
  "Décembre" : 11
};

Date.getMonthNumber = function(name) {
  return Date.monthNumbers[Ext.util.Format.capitalize(name)];
};

Date.dayNames = [
   "Dimanche",
   "Lundi",
   "Mardi",
   "Mercredi",
   "Jeudi",
   "Vendredi",
   "Samedi"
];

Date.getShortDayName = function(day) {
  return Date.dayNames[day].substring(0, 3);
};

if(Ext.MessageBox){
   Ext.MessageBox.buttonText = {
      ok     : "OK",
      cancel : "Annuler",
      yes    : "Oui",
      no     : "Non"
   };
}

if(Ext.util.Format){
   Ext.util.Format.date = function(v, format){
      if(!v) return "";
      if(!(v instanceof Date)) v = new Date(Date.parse(v));
      return v.dateFormat(format || "d/m/Y");
   };
}

if(Ext.DatePicker){
   Ext.apply(Ext.DatePicker.prototype, {
      todayText         : "Aujourd'hui",
      minText           : "Cette date est plus petite que la date minimum",
      maxText           : "Cette date est plus grande que la date maximum",
      disabledDaysText  : "",
      disabledDatesText : "",
      monthNames	: Date.monthNames,
      dayNames		: Date.dayNames,
      nextText          : 'Prochain mois (CTRL+Fléche droite)',
      prevText          : 'Mois précédent (CTRL+Fléche gauche)',
      monthYearText     : 'Choissisez un mois (CTRL+Fléche haut ou bas pour changer d\'année.)',
      todayTip          : "{0} (Barre d'espace)",
      format            : "d/m/y"
   });
}

if(Ext.PagingToolbar){
   Ext.apply(Ext.PagingToolbar.prototype, {
      beforePageText : "Page",
      afterPageText  : "de {0}",
      firstText      : "Première page",
      prevText       : "Page précédente",
      nextText       : "Prochaine page",
      lastText       : "Dernière page",
      refreshText    : "Recharger la page",
      displayMsg     : "Page courante {0} - {1} de {2}",
      emptyMsg       : 'Aucune donnée à afficher'
   });
}

if(Ext.form.TextField){
   Ext.apply(Ext.form.TextField.prototype, {
      minLengthText : "La longueur minimum de ce champ est de {0} caractères",
      maxLengthText : "La longueur maximum de ce champ est de {0} caractères",
      blankText     : "Ce champ est obligatoire",
      regexText     : "",
      emptyText     : null
   });
}

if(Ext.form.NumberField){
   Ext.apply(Ext.form.NumberField.prototype, {
      minText : "La valeur minimum de ce champ doit être de {0}",
      maxText : "La valeur maximum de ce champ doit être de {0}",
      nanText : "{0} n'est pas un nombre valide"
   });
}

if(Ext.form.DateField){
   Ext.apply(Ext.form.DateField.prototype, {
      disabledDaysText  : "Désactivé",
      disabledDatesText : "Désactivé",
      minText           : "La date de ce champ doit être avant le {0}",
      maxText           : "La date de ce champ doit être après le {0}",
      invalidText       : "{0} n'est pas une date valide - il doit être au format suivant: {1}",
      format            : "d/m/y"
   });
}

if(Ext.form.ComboBox){
   Ext.apply(Ext.form.ComboBox.prototype, {
      loadingText       : "En cours de chargement...",
      valueNotFoundText : undefined
   });
}

if(Ext.form.VTypes){
   Ext.apply(Ext.form.VTypes, {
      emailText    : 'Ce champ doit contenir un courriel et doit être sous ce format: "usager@example.com"',
      urlText      : 'Ce champ doit contenir une URL sous le format suivant: "http:/'+'/www.example.com"',
      alphaText    : 'Ce champ ne peut contenir que des lettres et le caractère souligné (_)',
      alphanumText : 'Ce champ ne peut contenir que des caractères alphanumériques ainsi que le caractère souligné (_)'
   });
}

if(Ext.grid.GridView){
   Ext.apply(Ext.grid.GridView.prototype, {
      sortAscText  : "Tri ascendant",
      sortDescText : "Tri descendant",
      lockText     : "Verrouillé la colonne",
      unlockText   : "Déverrouillé la colonne",
      columnsText  : "Colonnes"
   });
}

if(Ext.grid.PropertyColumnModel){
   Ext.apply(Ext.grid.PropertyColumnModel.prototype, {
      nameText   : "Propriété",
      valueText  : "Valeur",
      dateFormat : "d/m/Y"
   });
}

if(Ext.layout.BorderLayout && Ext.layout.BorderLayout.SplitRegion){
   Ext.apply(Ext.layout.BorderLayout.SplitRegion.prototype, {
      splitTip            : "Cliquer et glisser pour redimensionner le panneau.",
      collapsibleSplitTip : "Cliquer et glisser pour redimensionner le panneau. Double-cliquer pour cacher le panneau."
   });
}


The source code

/*!
 * licensing@extjs.com
 * http://www.extjs.com/license
 */

/**
 * Greek (Old Version) Translations by Vagelis
 * 03-June-2007
 */

Ext.UpdateManager.defaults.indicatorText = '
Öüñôùóç...
';

if(Ext.View){
   Ext.View.prototype.emptyText = "";
}

if(Ext.grid.GridPanel){
   Ext.grid.GridPanel.prototype.ddText = "{0} åðéëåãìÝíç(åò) ãñáììÞ(Ýò)";
}

if(Ext.TabPanelItem){
   Ext.TabPanelItem.prototype.closeText = "Êëåßóôå áõôÞ ôçí êáñôÝëá";
}

if(Ext.form.Field){
   Ext.form.Field.prototype.invalidText = "Ç ôéìÞ óôï ðåäßï äåí åßíáé Ýãêõñç";
}

if(Ext.LoadMask){
    Ext.LoadMask.prototype.msg = "Öüñôùóç...";
}

Date.monthNames = [
   "ÉáíïõÜñéïò",
   "ÖåâñïõÜñéïò",
   "ÌÜñôéïò",
   "Áðñßëéïò",
   "ÌÜéïò",
   "Éïýíéïò",
   "Éïýëéïò",
   "Áýãïõóôïò",
   "ÓåðôÝìâñéïò",
   "Ïêôþâñéïò",
   "ÍïÝìâñéïò",
   "ÄåêÝìâñéïò"
];

Date.dayNames = [
   "ÊõñéáêÞ",
   "ÄåõôÝñá",
   "Ôñßôç",
   "ÔåôÜñôç",
   "ÐÝìðôç",
   "ÐáñáóêåõÞ",
   "ÓÜââáôï"
];

if(Ext.MessageBox){
   Ext.MessageBox.buttonText = {
      ok     : "ÅíôÜîåé",
      cancel : "Áêýñùóç",
      yes    : "Íáé",
      no     : "¼÷é"
   };
}

if(Ext.util.Format){
   Ext.util.Format.date = function(v, format){
      if(!v) return "";
      if(!(v instanceof Date)) v = new Date(Date.parse(v));
      return v.dateFormat(format || "ì/ç/Å");
   };
}

if(Ext.DatePicker){
   Ext.apply(Ext.DatePicker.prototype, {
      todayText         : "ÓÞìåñá",
      minText           : "Ç çìåñïìçíßá áõôÞ åßíáé ðñéí ôçí ìéêñüôåñç çìåñïìçíßá",
      maxText           : "Ç çìåñïìçíßá áõôÞ åßíáé ìåôÜ ôçí ìåãáëýôåñç çìåñïìçíßá",
      disabledDaysText  : "",
      disabledDatesText : "",
      monthNames	: Date.monthNames,
      dayNames		: Date.dayNames,
      nextText          : 'Åðüìåíïò ÌÞíáò (Control+Right)',
      prevText          : 'Ðñïçãïýìåíïò ÌÞíáò (Control+Left)',
      monthYearText     : 'ÅðéëÝîôå ÌÞíá (Control+Up/Down ãéá ìåôáêßíçóç óôá Ýôç)',
      todayTip          : "{0} (Spacebar)",
      format            : "ì/ç/Å"
   });
}

if(Ext.PagingToolbar){
   Ext.apply(Ext.PagingToolbar.prototype, {
      beforePageText : "Óåëßäá",
      afterPageText  : "áðü {0}",
      firstText      : "Ðñþôç óåëßäá",
      prevText       : "Ðñïçãïýìåíç óåëßäá",
      nextText       : "Åðüìåíç óåëßäá",
      lastText       : "Ôåëåõôáßá óåëßäá",
      refreshText    : "ÁíáíÝùóç",
      displayMsg     : "ÅìöÜíéóç {0} - {1} áðü {2}",
      emptyMsg       : 'Äåí âñÝèçêáí åããñáöÝò ãéá åìöÜíéóç'
   });
}

if(Ext.form.TextField){
   Ext.apply(Ext.form.TextField.prototype, {
      minLengthText : "Ôï åëÜ÷éóôï ìÝãåèïò ãéá áõôü ôï ðåäßï åßíáé {0}",
      maxLengthText : "Ôï ìÝãéóôï ìÝãåèïò ãéá áõôü ôï ðåäßï åßíáé {0}",
      blankText     : "Ôï ðåäßï áõôü åßíáé õðï÷ñåùôïêü",
      regexText     : "",
      emptyText     : null
   });
}

if(Ext.form.NumberField){
   Ext.apply(Ext.form.NumberField.prototype, {
      minText : "Ç åëÜ÷éóôç ôéìÞ ãéá áõôü ôï ðåäßï åßíáé {0}",
      maxText : "Ç ìÝãéóôç ôéìÞ ãéá áõôü ôï ðåäßï åßíáé {0}",
      nanText : "{0} äåí åßíáé Ýãêõñïò áñéèìüò"
   });
}

if(Ext.form.DateField){
   Ext.apply(Ext.form.DateField.prototype, {
      disabledDaysText  : "ÁðåíåñãïðïéçìÝíï",
      disabledDatesText : "ÁðåíåñãïðïéçìÝíï",
      minText           : "Ç çìåñïìçíßá ó' áõôü ôï ðåäßï ðñÝðåé íá åßíáé ìåôÜ áðü {0}",
      maxText           : "Ç çìåñïìçíßá ó' áõôü ôï ðåäßï ðñÝðåé íá åßíáé ðñéí áðü {0}",
      invalidText       : "{0} äåí åßíáé Ýãêõñç çìåñïìçíßá - ðñÝðåé íá åßíáé ôçò ìïñöÞò {1}",
      format            : "ì/ç/Å"
   });
}

if(Ext.form.ComboBox){
   Ext.apply(Ext.form.ComboBox.prototype, {
      loadingText       : "Öüñôùóç...",
      valueNotFoundText : undefined
   });
}

if(Ext.form.VTypes){
   Ext.apply(Ext.form.VTypes, {
      emailText    : 'Áõôü ôï ðåäßï ðñÝðåé íá åßíáé e-mail address ôçò ìïñöÞò "user@example.com"',
      urlText      : 'Áõôü ôï ðåäßï ðñÝðåé íá åßíáé ìéá äéåýèõíóç URL ôçò ìïñöÞò "http:/'+'/www.example.com"',
      alphaText    : 'Áõôü ôï ðåäßï ðñÝðåé íá ðåñéÝ÷åé ãñÜììáôá êáé _',
      alphanumText : 'Áõôü ôï ðåäßï ðñÝðåé íá ðåñéÝ÷åé ãñÜììáôá, áñéèìïýò êáé _'
   });
}

if(Ext.grid.GridView){
   Ext.apply(Ext.grid.GridView.prototype, {
      sortAscText  : "Áýîïõóá Ôáîéíüìçóç",
      sortDescText : "Öèßíïõóá Ôáîéíüìçóç",
      lockText     : "Êëåßäùìá óôÞëçò",
      unlockText   : "Îåêëåßäùìá óôÞëçò",
      columnsText  : "ÓôÞëåò"
   });
}

if(Ext.grid.PropertyColumnModel){
   Ext.apply(Ext.grid.PropertyColumnModel.prototype, {
      nameText   : "¼íïìá",
      valueText  : "ÔéìÞ",
      dateFormat : "ì/ç/Å"
   });
}

if(Ext.layout.BorderLayout && Ext.layout.BorderLayout.SplitRegion){
   Ext.apply(Ext.layout.BorderLayout.SplitRegion.prototype, {
      splitTip            : "Óýñåôå ãéá áëëáãÞ ìåãÝèïõò.",
      collapsibleSplitTip : "Óýñåôå ãéá áëëáãÞ ìåãÝèïõò. Double click ãéá áðüêñõøç."
   });
}


The source code

/*!
 * licensing@extjs.com
 * http://www.extjs.com/license
 */
/*
 * Croatian translation
 * By Ylodi (utf8 encoding)
 * 8 May 2007
 *
 * By Stjepan at gmail dot com (utf8 encoding)
 * 17 May 2008
 */

Ext.UpdateManager.defaults.indicatorText = '
Učitavanje...
';

if(Ext.View){
   Ext.View.prototype.emptyText = "";
}

if(Ext.grid.GridPanel){
   Ext.grid.GridPanel.prototype.ddText = "{0} odabranih redova";
}

if(Ext.TabPanelItem){
   Ext.TabPanelItem.prototype.closeText = "Zatvori ovaj tab";
}

if(Ext.form.Field){
   Ext.form.Field.prototype.invalidText = "Unesena vrijednost u ovom polju je neispravna";
}

if(Ext.LoadMask){
    Ext.LoadMask.prototype.msg = "Učitavanje...";
}

Date.monthNames = [
   "Siječanj",
   "Veljača",
   "Ožujak",
   "Travanj",
   "Svibanj",
   "Lipanj",
   "Srpanj",
   "Kolovoz",
   "Rujan",
   "Listopad",
   "Studeni",
   "Prosinac"
];

Date.getShortMonthName = function(month) {
  return Date.monthNames[month].substring(0, 3);
};

Date.monthNumbers = {
  Jan : 0,
  Feb : 1,
  Mar : 2,
  Apr : 3,
  May : 4,
  Jun : 5,
  Jul : 6,
  Aug : 7,
  Sep : 8,
  Oct : 9,
  Nov : 10,
  Dec : 11
};

Date.getMonthNumber = function(name) {
  return Date.monthNumbers[name.substring(0, 1).toUpperCase() + name.substring(1, 3).toLowerCase()];
};

Date.dayNames = [
   "Nedjelja",
   "Ponedjeljak",
   "Utorak",
   "Srijeda",
   "Četvrtak",
   "Petak",
   "Subota"
];

Date.getShortDayName = function(day) {
  return Date.dayNames[day].substring(0, 3);
};

if(Ext.MessageBox){
   Ext.MessageBox.buttonText = {
      ok     : "U redu",
      cancel : "Odustani",
      yes    : "Da",
      no     : "Ne"
   };
}

if(Ext.util.Format){
   Ext.util.Format.date = function(v, format){
      if(!v) return "";
      if(!(v instanceof Date)) v = new Date(Date.parse(v));
      return v.dateFormat(format || "d.m.Y");
   };
}

if(Ext.DatePicker){
   Ext.apply(Ext.DatePicker.prototype, {
      todayText         : "Danas",
      minText           : "Taj datum je prije najmanjeg datuma",
      maxText           : "Taj datum je poslije najvećeg datuma",
      disabledDaysText  : "",
      disabledDatesText : "",
      monthNames	: Date.monthNames,
      dayNames		: Date.dayNames,
      nextText          : 'Slijedeći mjesec (Control+Desno)',
      prevText          : 'Prethodni mjesec (Control+Lijevo)',
      monthYearText     : 'Odaberite mjesec (Control+Gore/Dolje za promjenu godine)',
      todayTip          : "{0} (Razmaknica)",
      format            : "d.m.y",
      okText            : " U redu ",
      cancelText        : "Odustani",
      startDay 		 : 1
   });
}

if(Ext.PagingToolbar){
   Ext.apply(Ext.PagingToolbar.prototype, {
      beforePageText : "Stranica",
      afterPageText  : "od {0}",
      firstText      : "Prva stranica",
      prevText       : "Prethodna stranica",
      nextText       : "Slijedeća stranica",
      lastText       : "Posljednja stranica",
      refreshText    : "Obnovi",
      displayMsg     : "Prikazujem {0} - {1} od {2}",
      emptyMsg       : 'Nema podataka za prikaz'
   });
}

if(Ext.form.TextField){
   Ext.apply(Ext.form.TextField.prototype, {
      minLengthText : "Minimalna dužina za ovo polje je {0}",
      maxLengthText : "Maksimalna dužina za ovo polje je {0}",
      blankText     : "Ovo polje je obavezno",
      regexText     : "",
      emptyText     : null
   });
}

if(Ext.form.NumberField){
   Ext.apply(Ext.form.NumberField.prototype, {
      minText : "Minimalna vrijednost za ovo polje je {0}",
      maxText : "Maksimalna vrijednost za ovo polje je {0}",
      nanText : "{0} nije ispravan broj"
   });
}

if(Ext.form.DateField){
   Ext.apply(Ext.form.DateField.prototype, {
      disabledDaysText  : "Neaktivno",
      disabledDatesText : "Neaktivno",
      minText           : "Datum u ovom polje mora biti poslije {0}",
      maxText           : "Datum u ovom polju mora biti prije {0}",
      invalidText       : "{0} nije ispravan datum - mora biti u obliku {1}",
      format            : "d.m.y"
   });
}

if(Ext.form.ComboBox){
   Ext.apply(Ext.form.ComboBox.prototype, {
      loadingText       : "Učitavanje...",
      valueNotFoundText : undefined
   });
}

if(Ext.form.VTypes){
   Ext.apply(Ext.form.VTypes, {
      emailText    : 'Ovdje možete unijeti samo e-mail adresu u obliku "korisnik@domena.com"',
      urlText      : 'Ovdje možete unijeti samo URL u obliku "http:/'+'/www.domena.com"',
      alphaText    : 'Ovo polje može sadržavati samo slova i znak _',
      alphanumText : 'Ovo polje može sadržavati samo slova, brojeve i znak _'
   });
}

if(Ext.form.HtmlEditor){
  Ext.apply(Ext.form.HtmlEditor.prototype, {
    createLinkText : 'Unesite URL za link:',
    buttonTips : {
      bold : {
        title: 'Podebljano (Ctrl+B)',
        text: 'Podebljavanje označenog teksta.',
        cls: 'x-html-editor-tip'
      },
      italic : {
        title: 'Kurziv (Ctrl+I)',
        text: 'Pretvaranje označenog tekst u kurziv',
        cls: 'x-html-editor-tip'
      },
      underline : {
        title: 'Podcrtano (Ctrl+U)',
        text: 'Potcrtavanje označenog teksta',
        cls: 'x-html-editor-tip'
      },
      increasefontsize : {
        title: 'Povećanje teksta',
        text: 'Povećavanje veličine fonta.',
        cls: 'x-html-editor-tip'
      },
      decreasefontsize : {
        title: 'Smanjivanje teksta',
        text: 'Smanjivanje veličine fonta.',
        cls: 'x-html-editor-tip'
      },
      backcolor : {
        title: 'Boja označenog teksta',
        text: 'Promjena boje pozadine označenog teksta.',
        cls: 'x-html-editor-tip'
      },
      forecolor : {
        title: 'Boja fonta',
        text: 'Promjena boje označenog teksta.',
        cls: 'x-html-editor-tip'
      },
      justifyleft : {
        title: 'Lijevo poravnanje teksta',
        text: 'Poravnanje teksta na lijevu stranu.',
        cls: 'x-html-editor-tip'
      },
      justifycenter : {
        title: 'Centriranje teksta',
        text: 'Centriranje teksta u uređivaču teksta.',
        cls: 'x-html-editor-tip'
      },
      justifyright : {
        title: 'Desno poravnanje teksta',
        text: 'Poravnanje teksta na desnu stranu.',
        cls: 'x-html-editor-tip'
      },
      insertunorderedlist : {
        title: 'Označena lista',
        text: 'Započinjanje označene liste.',
        cls: 'x-html-editor-tip'
      },
      insertorderedlist : {
        title: 'Numerirana lista',
        text: 'Započinjanje numerirane liste.',
        cls: 'x-html-editor-tip'
      },
      createlink : {
        title: 'Hiperveza',
        text: 'Stvaranje hiperveze od označenog teksta.',
        cls: 'x-html-editor-tip'
      },
      sourceedit : {
        title: 'Uređivanje izvornog koda',
        text: 'Prebacivanje u način rada za uređivanje izvornog koda.',
        cls: 'x-html-editor-tip'
      }
    }
  });
}

if(Ext.grid.GridView){
   Ext.apply(Ext.grid.GridView.prototype, {
      sortAscText  : "Sortiraj rastućim redoslijedom",
      sortDescText : "Sortiraj padajućim redoslijedom",
      lockText     : "Zaključaj stupac",
      unlockText   : "Otključaj stupac",
      columnsText  : "Stupci"
   });
}

if(Ext.grid.GroupingView){
  Ext.apply(Ext.grid.GroupingView.prototype, {
    emptyGroupText : '(Ništa)',
    groupByText    : 'Grupiranje po ovom polju',
    showGroupsText : 'Prikaz u grupama'
  });
}

if(Ext.grid.PropertyColumnModel){
   Ext.apply(Ext.grid.PropertyColumnModel.prototype, {
      nameText   : "Naziv",
      valueText  : "Vrijednost",
      dateFormat : "d.m.Y"
   });
}

if(Ext.layout.BorderLayout.SplitRegion){
   Ext.apply(Ext.layout.BorderLayout.SplitRegion.prototype, {
      splitTip            : "Povuci za promjenu veličine.",
      collapsibleSplitTip : "Povuci za promjenu veličine. Dvostruki klik za skrivanje."
   });
}


The source code

/*!
 * licensing@extjs.com
 * http://www.extjs.com/license
 */
﻿
/**
 * List compiled by mystix on the extjs.com forums.
 * Thank you Mystix!
 *
 * Hungarian Translations (utf-8 encoded)
 * by Amon  (27 Apr 2008)
 * encoding fixed by Vili (17 Feb 2009)
 */

Ext.UpdateManager.defaults.indicatorText = '
Betöltés...
';

if(Ext.View){
  Ext.View.prototype.emptyText = "";
}

if(Ext.grid.GridPanel){
  Ext.grid.GridPanel.prototype.ddText = "{0} kiválasztott sor";
}

if(Ext.TabPanelItem){
  Ext.TabPanelItem.prototype.closeText = "Fül bezárása";
}

if(Ext.form.Field){
  Ext.form.Field.prototype.invalidText = "Hibás érték!";
}

if(Ext.LoadMask){
  Ext.LoadMask.prototype.msg = "Betöltés...";
}

Date.monthNames = [
  "Január",
  "Február",
  "Március",
  "Április",
  "Május",
  "Június",
  "Július",
  "Augusztus",
  "Szeptember",
  "Október",
  "November",
  "December"
];

Date.getShortMonthName = function(month) {
  return Date.monthNames[month].substring(0, 3);
};

Date.monthNumbers = {
  'Jan' : 0,
  'Feb' : 1,
  'Már' : 2,
  'Ápr' : 3,
  'Máj' : 4,
  'Jún' : 5,
  'Júl' : 6,
  'Aug' : 7,
  'Sze' : 8,
  'Okt' : 9,
  'Nov' : 10,
  'Dec' : 11
};

Date.getMonthNumber = function(name) {
  return Date.monthNumbers[name.substring(0, 1).toUpperCase() + name.substring(1, 3).toLowerCase()];
};

Date.dayNames = [
  "Vasárnap",
  "Hétfő",
  "Kedd",
  "Szerda",
  "Csütörtök",
  "Péntek",
  "Szombat"
];

Date.getShortDayName = function(day) {
  return Date.dayNames[day].substring(0, 3);
};

if(Ext.MessageBox){
  Ext.MessageBox.buttonText = {
    ok     : "OK",
    cancel : "Mégsem",
    yes    : "Igen",
    no     : "Nem"
  };
}

if(Ext.util.Format){
  Ext.util.Format.date = function(v, format){
    if(!v) return "";
    if(!(v instanceof Date)) v = new Date(Date.parse(v));
    return v.dateFormat(format || "Y m d");
  };
}

if(Ext.DatePicker){
  Ext.apply(Ext.DatePicker.prototype, {
    todayText         : "Mai nap",
    minText           : "A dátum korábbi a megengedettnél",
    maxText           : "A dátum későbbi a megengedettnél",
    disabledDaysText  : "",
    disabledDatesText : "",
    monthNames        : Date.monthNames,
    dayNames          : Date.dayNames,
    nextText          : 'Köv. hónap (CTRL+Jobbra)',
    prevText          : 'Előző hónap (CTRL+Balra)',
    monthYearText     : 'Válassz hónapot (Évválasztás: CTRL+Fel/Le)',
    todayTip          : "{0} (Szóköz)",
    format            : "y-m-d",
    okText            : " OK ",
    cancelText        : "Mégsem",
    startDay          : 0
  });
}

if(Ext.PagingToolbar){
  Ext.apply(Ext.PagingToolbar.prototype, {
    beforePageText : "Oldal",
    afterPageText  : "a {0}-ból/ből",
    firstText      : "Első oldal",
    prevText       : "Előző oldal",
    nextText       : "Következő oldal",
    lastText       : "Utolsó oldal",
    refreshText    : "Frissítés",
    displayMsg     : "{0} - {1} sorok láthatók a {2}-ból/ből",
    emptyMsg       : 'Nincs megjeleníthető adat'
  });
}

if(Ext.form.TextField){
  Ext.apply(Ext.form.TextField.prototype, {
    minLengthText : "A mező tartalma legalább {0} hosszú kell legyen",
    maxLengthText : "A mező tartalma legfeljebb {0} hosszú lehet",
    blankText     : "Kötelezően kitöltendő mező",
    regexText     : "",
    emptyText     : null
  });
}

if(Ext.form.NumberField){
  Ext.apply(Ext.form.NumberField.prototype, {
    minText : "A mező tartalma nem lehet kissebb, mint {0}",
    maxText : "A mező tartalma nem lehet nagyobb, mint {0}",
    nanText : "{0} nem szám"
  });
}

if(Ext.form.DateField){
  Ext.apply(Ext.form.DateField.prototype, {
    disabledDaysText  : "Nem választható",
    disabledDatesText : "Nem választható",
    minText           : "A dátum nem lehet korábbi, mint {0}",
    maxText           : "A dátum nem lehet későbbi, mint {0}",
    invalidText       : "{0} nem megfelelő dátum - a helyes formátum: {1}",
    format            : "Y m d",
    altFormats        : "Y-m-d|y-m-d|y/m/d|m/d|m-d|md|ymd|Ymd|d"
  });
}

if(Ext.form.ComboBox){
  Ext.apply(Ext.form.ComboBox.prototype, {
    loadingText       : "Betöltés...",
    valueNotFoundText : undefined
  });
}

if(Ext.form.VTypes){
  Ext.apply(Ext.form.VTypes, {
    emailText    : 'A mező email címet tartalmazhat, melynek formátuma "felhasználó@szolgáltató.hu"',
    urlText      : 'A mező webcímet tartalmazhat, melynek formátuma "http:/'+'/www.weboldal.hu"',
    alphaText    : 'A mező csak betűket és aláhúzást (_) tartalmazhat',
    alphanumText : 'A mező csak betűket, számokat és aláhúzást (_) tartalmazhat'
  });
}

if(Ext.form.HtmlEditor){
  Ext.apply(Ext.form.HtmlEditor.prototype, {
    createLinkText : 'Add meg a webcímet:',
    buttonTips : {
      bold : {
        title: 'Félkövér (Ctrl+B)',
        text: 'Félkövérré teszi a kijelölt szöveget.',
        cls: 'x-html-editor-tip'
      },
      italic : {
        title: 'Dőlt (Ctrl+I)',
        text: 'Dőlté teszi a kijelölt szöveget.',
        cls: 'x-html-editor-tip'
      },
      underline : {
        title: 'Aláhúzás (Ctrl+U)',
        text: 'Aláhúzza a kijelölt szöveget.',
        cls: 'x-html-editor-tip'
      },
      increasefontsize : {
        title: 'Szöveg nagyítás',
        text: 'Növeli a szövegméretet.',
        cls: 'x-html-editor-tip'
      },
      decreasefontsize : {
        title: 'Szöveg kicsinyítés',
        text: 'Csökkenti a szövegméretet.',
        cls: 'x-html-editor-tip'
      },
      backcolor : {
        title: 'Háttérszín',
        text: 'A kijelölt szöveg háttérszínét módosítja.',
        cls: 'x-html-editor-tip'
      },
      forecolor : {
        title: 'Szövegszín',
        text: 'A kijelölt szöveg színét módosítja.',
        cls: 'x-html-editor-tip'
      },
      justifyleft : {
        title: 'Balra zárt',
        text: 'Balra zárja a szöveget.',
        cls: 'x-html-editor-tip'
      },
      justifycenter : {
        title: 'Középre zárt',
        text: 'Középre zárja a szöveget.',
        cls: 'x-html-editor-tip'
      },
      justifyright : {
        title: 'Jobbra zárt',
        text: 'Jobbra zárja a szöveget.',
        cls: 'x-html-editor-tip'
      },
      insertunorderedlist : {
        title: 'Felsorolás',
        text: 'Felsorolást kezd.',
        cls: 'x-html-editor-tip'
      },
      insertorderedlist : {
        title: 'Számozás',
        text: 'Számozott listát kezd.',
        cls: 'x-html-editor-tip'
      },
      createlink : {
        title: 'Hiperlink',
        text: 'A kijelölt szöveget linkké teszi.',
        cls: 'x-html-editor-tip'
      },
      sourceedit : {
        title: 'Forrás nézet',
        text: 'Forrás nézetbe kapcsol.',
        cls: 'x-html-editor-tip'
      }
    }
  });
}

if(Ext.grid.GridView){
  Ext.apply(Ext.grid.GridView.prototype, {
    sortAscText  : "Növekvő rendezés",
    sortDescText : "Csökkenő rendezés",
    lockText     : "Oszlop zárolás",
    unlockText   : "Oszlop feloldás",
    columnsText  : "Oszlopok"
  });
}

if(Ext.grid.GroupingView){
  Ext.apply(Ext.grid.GroupingView.prototype, {
    emptyGroupText : '(Nincs)',
    groupByText    : 'Oszlop szerint csoportosítás',
    showGroupsText : 'Csoportos nézet'
  });
}

if(Ext.grid.PropertyColumnModel){
  Ext.apply(Ext.grid.PropertyColumnModel.prototype, {
    nameText   : "Név",
    valueText  : "Érték",
    dateFormat : "Y m j"
  });
}

if(Ext.layout.BorderLayout && Ext.layout.BorderLayout.SplitRegion){
  Ext.apply(Ext.layout.BorderLayout.SplitRegion.prototype, {
    splitTip            : "Átméretezés húzásra.",
    collapsibleSplitTip : "Átméretezés húzásra. Eltüntetés duplaklikk."
  });
}


The source code

/*!
 * licensing@extjs.com
 * http://www.extjs.com/license
 */

/**
 * Pedoman translasi:
 * http://id.wikisource.org/wiki/Panduan_Pembakuan_Istilah,_Pelaksanaan_Instruksi_Presiden_Nomor_2_Tahun_2001_Tentang_Penggunaan_Komputer_Dengan_Aplikasi_Komputer_Berbahasa_Indonesia
 * Original source: http://vlsm.org/etc/baku-0.txt
 * by Farid GS
 * farid [at] pulen.net
 * 10:13 04 Desember 2007
 * Indonesian Translations
 */

Ext.UpdateManager.defaults.indicatorText = '
Pemuatan...
';

if(Ext.View){
  Ext.View.prototype.emptyText = "";
}

if(Ext.grid.GridPanel){
  Ext.grid.GridPanel.prototype.ddText = "{0} selected row(s)";
  Ext.grid.GridPanel.prototype.ddText = "{0} baris terpilih";
}

if(Ext.TabPanelItem){
  Ext.TabPanelItem.prototype.closeText = "Close this tab";
  Ext.TabPanelItem.prototype.closeText = "Tutup tab ini";
}

if(Ext.form.Field){
  Ext.form.Field.prototype.invalidText = "The value in this field is invalid";
  Ext.form.Field.prototype.invalidText = "Isian belum benar";
}

if(Ext.LoadMask){
  Ext.LoadMask.prototype.msg = "Loading...";
  Ext.LoadMask.prototype.msg = "Pemuatan...";
}

Date.monthNames = [
  "Januari",
  "Februari",
  "Maret",
  "April",
  "Mei",
  "Juni",
  "Juli",
  "Agustus",
  "September",
  "Oktober",
  "November",
  "Desember"
];

Date.getShortMonthName = function(month) {
  return Date.monthNames[month].substring(0, 3);
};

Date.monthNumbers = {
  Jan : 0,
  Feb : 1,
  Mar : 2,
  Apr : 3,
  Mei : 4,
  Jun : 5,
  Jul : 6,
  Agu : 7,
  Sep : 8,
  Okt : 9,
  Nov : 10,
  Des : 11
};

Date.getMonthNumber = function(name) {
  return Date.monthNumbers[name.substring(0, 1).toUpperCase() + name.substring(1, 3).toLowerCase()];
};

Date.dayNames = [
  "Minggu",
  "Senin",
  "Selasa",
  "Rabu",
  "Kamis",
  "Jumat",
  "Sabtu"
];

Date.getShortDayName = function(day) {
  return Date.dayNames[day].substring(0, 3);
};

if(Ext.MessageBox){
  Ext.MessageBox.buttonText = {
    ok     : "OK",
    cancel : "Batal",
    yes    : "Ya",
    no     : "Tidak"
  };
}

if(Ext.util.Format){
  Ext.util.Format.date = function(v, format){
    if(!v) return "";
    if(!(v instanceof Date)) v = new Date(Date.parse(v));
    return v.dateFormat(format || "d/m/Y");
  };
}

if(Ext.DatePicker){
  Ext.apply(Ext.DatePicker.prototype, {
    todayText         : "Hari ini",
    minText           : "Tanggal ini sebelum batas tanggal minimal",
    maxText           : "Tanggal ini setelah batas tanggal maksimal",
    disabledDaysText  : "",
    disabledDatesText : "",
    monthNames        : Date.monthNames,
    dayNames          : Date.dayNames,
    nextText          : 'Bulan Berikut (Kontrol+Kanan)',
    prevText          : 'Bulan Sebelum (Kontrol+Kiri)',
    monthYearText     : 'Pilih bulan (Kontrol+Atas/Bawah untuk pindah tahun)',
    todayTip          : "{0} (Spacebar)",
    format            : "d/m/y",
    okText            : " OK ",
    cancelText        : "Batal",
    startDay          : 1
  });
}

if(Ext.PagingToolbar){
  Ext.apply(Ext.PagingToolbar.prototype, {
    beforePageText : "Hal",
    afterPageText  : "dari {0}",
    firstText      : "Hal. Pertama",
    prevText       : "Hal. Sebelum",
    nextText       : "Hal. Berikut",
    lastText       : "Hal. Akhir",
    refreshText    : "Segarkan",
    displayMsg     : "Menampilkan {0} - {1} dari {2}",
    emptyMsg       : 'Data tidak ditemukan'
  });
}

if(Ext.form.TextField){
  Ext.apply(Ext.form.TextField.prototype, {
    minLengthText : "Panjang minimal untuk field ini adalah {0}",
    maxLengthText : "Panjang maksimal untuk field ini adalah {0}",
    blankText     : "Field ini wajib diisi",
    regexText     : "",
    emptyText     : null
  });
}

if(Ext.form.NumberField){
  Ext.apply(Ext.form.NumberField.prototype, {
    minText : "Nilai minimal untuk field ini adalah {0}",
    maxText : "Nilai maksimal untuk field ini adalah {0}",
    nanText : "{0} bukan angka"
  });
}

if(Ext.form.DateField){
  Ext.apply(Ext.form.DateField.prototype, {
    disabledDaysText  : "Disfungsi",
    disabledDatesText : "Disfungsi",
    minText           : "Tanggal dalam field ini harus setelah {0}",
    maxText           : "Tanggal dalam field ini harus sebelum {0}",
    invalidText       : "{0} tanggal salah - Harus dalam format {1}",
    format            : "d/m/y",
    //altFormats        : "m/d/Y|m-d-y|m-d-Y|m/d|m-d|md|mdy|mdY|d|Y-m-d"
    altFormats        : "d/m/Y|d-m-y|d-m-Y|m/d|m-d|md|mdy|mdY|d|Y-m-d"
  });
}

if(Ext.form.ComboBox){
  Ext.apply(Ext.form.ComboBox.prototype, {
    loadingText       : "Pemuatan...",
    valueNotFoundText : undefined
  });
}

if(Ext.form.VTypes){
  Ext.apply(Ext.form.VTypes, {
    emailText    : 'Field ini harus dalam format email seperti "user@example.com"',
    urlText      : 'Field ini harus dalam format URL seperti "http:/'+'/www.example.com"',
    alphaText    : 'Field ini harus terdiri dari huruf dan _',
    alphanumText : 'Field ini haris terdiri dari huruf, angka dan _'
  });
}

if(Ext.form.HtmlEditor){
  Ext.apply(Ext.form.HtmlEditor.prototype, {
    createLinkText : 'Silakan masukkan URL untuk tautan:',
    buttonTips : {
      bold : {
        title: 'Tebal (Ctrl+B)',
        text: 'Buat tebal teks terpilih',
        cls: 'x-html-editor-tip'
      },
      italic : {
        title: 'Miring (CTRL+I)',
        text: 'Buat miring teks terpilih',
        cls: 'x-html-editor-tip'
      },
      underline : {
        title: 'Garisbawah (CTRl+U)',
        text: 'Garisbawahi teks terpilih',
        cls: 'x-html-editor-tip'
      },
      increasefontsize : {
        title: 'Perbesar teks',
        text: 'Perbesar ukuran fonta',
        cls: 'x-html-editor-tip'
      },
      decreasefontsize : {
        title: 'Perkecil teks',
        text: 'Perkecil ukuran fonta',
        cls: 'x-html-editor-tip'
      },
      backcolor : {
        title: 'Sorot Warna Teks',
        text: 'Ubah warna latar teks terpilih',
        cls: 'x-html-editor-tip'
      },
      forecolor : {
        title: 'Warna Fonta',
        text: 'Ubah warna teks terpilih',
        cls: 'x-html-editor-tip'
      },
      justifyleft : {
        title: 'Rata Kiri',
        text: 'Ratakan teks ke kiri',
        cls: 'x-html-editor-tip'
      },
      justifycenter : {
        title: 'Rata Tengah',
        text: 'Ratakan teks ke tengah editor',
        cls: 'x-html-editor-tip'
      },
      justifyright : {
        title: 'Rata Kanan',
        text: 'Ratakan teks ke kanan',
        cls: 'x-html-editor-tip'
      },
      insertunorderedlist : {
        title: 'Daftar Bulet',
        text: 'Membuat daftar berbasis bulet',
        cls: 'x-html-editor-tip'
      },
      insertorderedlist : {
        title: 'Daftar Angka',
        text: 'Membuat daftar berbasis angka',
        cls: 'x-html-editor-tip'
      },
      createlink : {
        title: 'Hipertaut',
        text: 'Buat teks terpilih sebagai Hipertaut',
        cls: 'x-html-editor-tip'
      },
      sourceedit : {
        title: 'Edit Kode Sumber',
        text: 'Pindah dalam mode kode sumber',
        cls: 'x-html-editor-tip'
      }
    }
  });
}

if(Ext.grid.GridView){
  Ext.apply(Ext.grid.GridView.prototype, {
    sortAscText  : "Urut Naik",
    sortDescText : "Urut Turun",
    lockText     : "Kancing Kolom",
    unlockText   : "Lepas Kunci Kolom",
    columnsText  : "Kolom"
  });
}

if(Ext.grid.GroupingView){
  Ext.apply(Ext.grid.GroupingView.prototype, {
    emptyGroupText : '(Kosong)',
    groupByText    : 'Kelompokkan Berdasar Field Ini',
    showGroupsText : 'Tampil Dalam Kelompok'
  });
}

if(Ext.grid.PropertyColumnModel){
  Ext.apply(Ext.grid.PropertyColumnModel.prototype, {
    nameText   : "Nama",
    valueText  : "Nilai",
    dateFormat : "d/m/Y"
  });
}

if(Ext.layout.BorderLayout && Ext.layout.BorderLayout.SplitRegion){
  Ext.apply(Ext.layout.BorderLayout.SplitRegion.prototype, {
    splitTip            : "Seret untuk ubah ukuran.",
    collapsibleSplitTip : "Seret untuk ubah ukuran, Dobel klik untuk sembunyikan."
  });
}


The source code

/*!
 * licensing@extjs.com
 * http://www.extjs.com/license
 */
/*
 * Italian translation
 * By eric_void
 * 04-10-2007, 11:25 AM
 * Updated by Federico Grilli 21/12/2007
 */

Ext.UpdateManager.defaults.indicatorText = '
Caricamento in corso...
';

if(Ext.View){
   Ext.View.prototype.emptyText = "";
}

if(Ext.grid.GridPanel){
   Ext.grid.GridPanel.prototype.ddText = "{0} righe selezionate";
}

if(Ext.TabPanelItem){
   Ext.TabPanelItem.prototype.closeText = "Chiudi pannello";
}

if(Ext.form.Field){
   Ext.form.Field.prototype.invalidText = "Valore non valido";
}

if(Ext.LoadMask){
    Ext.LoadMask.prototype.msg = "Caricamento in corso...";
}

Date.monthNames = [
   "Gennaio",
   "Febbraio",
   "Marzo",
   "Aprile",
   "Maggio",
   "Giugno",
   "Luglio",
   "Agosto",
   "Settembre",
   "Ottobre",
   "Novembre",
   "Dicembre"
];

Date.getShortMonthName = function(month) {
  return Date.monthNames[month].substring(0, 3);
};

Date.monthNumbers = {
  Gen : 0,
  Feb : 1,
  Mar : 2,
  Apr : 3,
  Mag : 4,
  Giu : 5,
  Lug : 6,
  Ago : 7,
  Set : 8,
  Ott : 9,
  Nov : 10,
  Dic : 11
};

Date.getMonthNumber = function(name) {
  return Date.monthNumbers[name.substring(0, 1).toUpperCase() + name.substring(1, 3).toLowerCase()];
};

Date.dayNames = [
   "Domenica",
   "Luned\u00EC",
   "Marted\u00EC",
   "Mercoled\u00EC",
   "Gioved\u00EC",
   "Venerd\u00EC",
   "Sabato"
];

Date.getShortDayName = function(day) {
  return Date.dayNames[day].substring(0, 3);
};

if(Ext.MessageBox){
   Ext.MessageBox.buttonText = {
      ok     : "OK",
      cancel : "Annulla",
      yes    : "S\u00EC",
      no     : "No"
   };
}

if(Ext.util.Format){
   Ext.util.Format.date = function(v, format){
      if(!v) return "";
      if(!(v instanceof Date)) v = new Date(Date.parse(v));
      return v.dateFormat(format || "d/m/Y");
   };
}

if(Ext.DatePicker){
   Ext.apply(Ext.DatePicker.prototype, {
      todayText         : "Oggi",
      minText           : "Data precedente alla data minima",
      maxText           : "Data successiva alla data massima",
      disabledDaysText  : "",
      disabledDatesText : "",
      monthNames		: Date.monthNames,
      dayNames			: Date.dayNames,
      nextText          : 'Mese successivo (Ctrl+Destra)',
      prevText          : 'Mese precedente (Ctrl+Sinistra)',
      monthYearText     : 'Scegli un mese (Ctrl+Su/Giu per cambiare anno)',
      todayTip          : "{0} (Barra spaziatrice)",
      format            : "d/m/y",
      cancelText		: "Annulla",
      okText            : " OK ",
      startDay          : 1
   });
}

if(Ext.PagingToolbar){
   Ext.apply(Ext.PagingToolbar.prototype, {
      beforePageText : "Pagina",
      afterPageText  : "di {0}",
      firstText      : "Prima pagina",
      prevText       : "Pagina precedente",
      nextText       : "Pagina successiva",
      lastText       : "Ultima pagina",
      refreshText    : "Aggiorna",
      displayMsg     : "Record {0} - {1} di {2}",
      emptyMsg       : 'Nessun dato da mostrare'
   });
}

if(Ext.form.TextField){
   Ext.apply(Ext.form.TextField.prototype, {
      minLengthText : "La lunghezza minima \u00E8 {0}",
      maxLengthText : "La lunghezza massima \u00E8 {0}",
      blankText     : "Campo obbligatorio",
      regexText     : "",
      emptyText     : null
   });
}

if(Ext.form.NumberField){
   Ext.apply(Ext.form.NumberField.prototype, {
      minText : "Il valore minimo \u00E8 {0}",
      maxText : "Il valore massimo \u00E8 {0}",
      nanText : "{0} non \u00E8 un valore numerico corretto"
   });
}

if(Ext.form.DateField){
   Ext.apply(Ext.form.DateField.prototype, {
      disabledDaysText  : "Disabilitato",
      disabledDatesText : "Disabilitato",
      minText           : "La data deve essere successiva al {0}",
      maxText           : "La data deve essere precedente al {0}",
      invalidText       : "{0} non \u00E8 una data valida. Deve essere nel formato {1}",
      format            : "d/m/y",
      altFormats        : "d/m/Y|d-m-y|d-m-Y|d/m|d-m|dm|dmy|dmY|d|Y-m-d"
   });
}

if(Ext.form.ComboBox){
   Ext.apply(Ext.form.ComboBox.prototype, {
      loadingText       : "Caricamento in corso...",
      valueNotFoundText : undefined
   });
}

if(Ext.form.VTypes){
   Ext.apply(Ext.form.VTypes, {
      emailText    : 'Il campo deve essere un indirizzo e-mail nel formato "user@example.com"',
      urlText      : 'Il campo deve essere un indirizzo web nel formato "http:/'+'/www.example.com"',
      alphaText    : 'Il campo deve contenere solo lettere e _',
      alphanumText : 'Il campo deve contenere solo lettere, numeri e _'
   });
}

if(Ext.form.HtmlEditor){
  Ext.apply(Ext.form.HtmlEditor.prototype, {
    createLinkText : 'Inserire un URL per il link:',
    buttonTips : {
      bold : {
        title: 'Grassetto (Ctrl+B)',
        text: 'Rende il testo selezionato in grassetto.',
        cls: 'x-html-editor-tip'
      },
      italic : {
        title: 'Corsivo (Ctrl+I)',
        text: 'Rende il testo selezionato in corsivo.',
        cls: 'x-html-editor-tip'
      },
      underline : {
        title: 'Sottolinea (Ctrl+U)',
        text: 'Sottolinea il testo selezionato.',
        cls: 'x-html-editor-tip'
      },
      increasefontsize : {
        title: 'Ingrandisci testo',
        text: 'Aumenta la dimensione del carattere.',
        cls: 'x-html-editor-tip'
      },
      decreasefontsize : {
        title: 'Rimpicciolisci testo',
        text: 'Diminuisce la dimensione del carattere.',
        cls: 'x-html-editor-tip'
      },
      backcolor : {
        title: 'Colore evidenziatore testo',
        text: 'Modifica il colore di sfondo del testo selezionato.',
        cls: 'x-html-editor-tip'
      },
      forecolor : {
        title: 'Colore carattere',
        text: 'Modifica il colore del testo selezionato.',
        cls: 'x-html-editor-tip'
      },
      justifyleft : {
        title: 'Allinea a sinistra',
        text: 'Allinea il testo a sinistra.',
        cls: 'x-html-editor-tip'
      },
      justifycenter : {
        title: 'Centra',
        text: 'Centra il testo.',
        cls: 'x-html-editor-tip'
      },
      justifyright : {
        title: 'Allinea a destra',
        text: 'Allinea il testo a destra.',
        cls: 'x-html-editor-tip'
      },
      insertunorderedlist : {
        title: 'Elenco puntato',
        text: 'Elenco puntato.',
        cls: 'x-html-editor-tip'
      },
      insertorderedlist : {
        title: 'Elenco numerato',
        text: 'Elenco numerato.',
        cls: 'x-html-editor-tip'
      },
      createlink : {
        title: 'Collegamento',
        text: 'Trasforma il testo selezionato in un collegamanto.',
        cls: 'x-html-editor-tip'
      },
      sourceedit : {
        title: 'Sorgente',
        text: 'Passa alla modalit\u00E0 editing del sorgente.',
        cls: 'x-html-editor-tip'
      }
    }
  });
}

if(Ext.grid.GridView){
   Ext.apply(Ext.grid.GridView.prototype, {
      sortAscText  : "Ordinamento crescente",
      sortDescText : "Ordinamento decrescente",
      lockText     : "Blocca colonna",
      unlockText   : "Sblocca colonna",
      columnsText  : "Colonne"
   });
}

if(Ext.grid.GroupingView){
  Ext.apply(Ext.grid.GroupingView.prototype, {
    emptyGroupText : '(Nessun dato)',
    groupByText    : 'Raggruppa per questo campo',
    showGroupsText : 'Mostra nei gruppi'
  });
}

if(Ext.grid.PropertyColumnModel){
   Ext.apply(Ext.grid.PropertyColumnModel.prototype, {
      nameText   : "Nome",
      valueText  : "Valore",
      dateFormat : "j/m/Y"
   });
}

if(Ext.layout.BorderLayout && Ext.layout.BorderLayout.SplitRegion){
   Ext.apply(Ext.layout.BorderLayout.SplitRegion.prototype, {
      splitTip            : "Trascina per cambiare dimensioni.",
      collapsibleSplitTip : "Trascina per cambiare dimensioni. Doppio click per nascondere."
   });
}


The source code

/*!
 * licensing@extjs.com
 * http://www.extjs.com/license
 */
/*
 * Japanese translation
 * By tyama
 * 04-08-2007, 05:49 AM
 *
 * update based on English Translations by Condor (8 Aug 2008)
 * By sakuro (30 Aug 2008)
 */

Ext.UpdateManager.defaults.indicatorText = '
読み込み中...
';

if(Ext.DataView){
  Ext.DataView.prototype.emptyText = "";
}

if(Ext.grid.GridPanel){
  Ext.grid.GridPanel.prototype.ddText = "{0} 行選択";
}

if(Ext.LoadMask){
  Ext.LoadMask.prototype.msg = "読み込み中...";
}

Date.monthNames = [
  '1月',
  '2月',
  '3月',
  '4月',
  '5月',
  '6月',
  '7月',
  '8月',
  '9月',
  '10月',
  '11月',
  '12月'
];

Date.getShortMonthName = function(month) {
  return "" + (month + 1);
};

Date.monthNumbers = {
  "1" : 0,
  "2" : 1,
  "3" : 2,
  "4" : 3,
  "5" : 4,
  "6" : 5,
  "7" : 6,
  "8" : 7,
  "9" : 8,
  "10" : 9,
  "11" : 10,
  "12" : 11
};

Date.getMonthNumber = function(name) {
  return Date.monthNumbers[name.substring(0, name.length - 1)];
  // or simply parseInt(name.substring(0, name.length - 1)) - 1
};

Date.dayNames = [
  "日曜日",
  "月曜日",
  "火曜日",
  "水曜日",
  "木曜日",
  "金曜日",
  "土曜日"
];

Date.getShortDayName = function(day) {
  return Date.dayNames[day].substring(0, 1); // just remove "曜日" suffix
};

Date.formatCodes.a = "(this.getHours() < 12 ? '午前' : '午後')";
Date.formatCodes.A = "(this.getHours() < 12 ? '午前' : '午後')"; // no case difference

if(Ext.MessageBox){
  Ext.MessageBox.buttonText = {
    ok     : "OK",
    cancel : "キャンセル",
    yes    : "はい",
    no     : "いいえ"
  };
}

if(Ext.util.Format){
  Ext.util.Format.date = function(v, format){
    if(!v) return "";
    if(!(v instanceof Date)) v = new Date(Date.parse(v));
    return v.dateFormat(format || "Y/m/d");
  };
}

if(Ext.DatePicker){
  Ext.apply(Ext.DatePicker.prototype, {
    todayText         : "今日",
    minText           : "選択した日付は最小値以下です。",
    maxText           : "選択した日付は最大値以上です。",
    disabledDaysText  : "",
    disabledDatesText : "",
    monthNames        : Date.monthNames,
    dayNames          : Date.dayNames,
    nextText          : '次月へ (コントロール+右)',
    prevText          : '前月へ (コントロール+左)',
    monthYearText     : '月選択 (コントロール+上/下で年移動)',
    todayTip          : "{0} (スペースキー)",
    format            : "Y/m/d",
    okText            : "OK",
    cancelText        : "キャンセル",
    startDay          : 0
  });
}

if(Ext.PagingToolbar){
  Ext.apply(Ext.PagingToolbar.prototype, {
    beforePageText : "ページ",
    afterPageText  : "/ {0}",
    firstText      : "最初のページ",
    prevText       : "前のページ",
    nextText       : "次のページ",
    lastText       : "最後のページ",
    refreshText    : "更新",
    displayMsg     : "{2} 件中 {0} - {1} を表示",
    emptyMsg       : '表示するデータがありません。'
  });
}

if(Ext.form.Field){
  Ext.form.Field.prototype.invalidText = "フィールドの値が不正です。";
}

if(Ext.form.TextField){
  Ext.apply(Ext.form.TextField.prototype, {
    minLengthText : "このフィールドの最小値は {0} です。",
    maxLengthText : "このフィールドの最大値は {0} です。",
    blankText     : "必須項目です。",
    regexText     : "",
    emptyText     : null
  });
}

if(Ext.form.NumberField){
  Ext.apply(Ext.form.NumberField.prototype, {
    decimalSeparator : ".",
    decimalPrecision : 2,
    minText : "このフィールドの最小値は {0} です。",
    maxText : "このフィールドの最大値は {0} です。",
    nanText : "{0} は数値ではありません。"
  });
}

if(Ext.form.DateField){
  Ext.apply(Ext.form.DateField.prototype, {
    disabledDaysText  : "無効",
    disabledDatesText : "無効",
    minText           : "このフィールドの日付は、 {0} 以降の日付に設定してください。",
    maxText           : "このフィールドの日付は、 {0} 以前の日付に設定してください。",
    invalidText       : "{0} は間違った日付入力です。 - 入力形式は「{1}」です。",
    format            : "Y/m/d",
    altFormats        : "y/m/d|m/d/y|m/d/Y|m-d-y|m-d-Y|m/d|m-d|md|mdy|mdY|d|Y-m-d"
  });
}

if(Ext.form.ComboBox){
  Ext.apply(Ext.form.ComboBox.prototype, {
    loadingText       : "読み込み中...",
    valueNotFoundText : undefined
  });
}

if(Ext.form.VTypes){
  Ext.apply(Ext.form.VTypes, {
    emailText    : 'メールアドレスを"user@example.com"の形式で入力してください。',
    urlText      : 'URLを"http:/'+'/www.example.com"の形式で入力してください。',
    alphaText    : '半角英字と"_"のみです。',
    alphanumText : '半角英数と"_"のみです。'
  });
}

if(Ext.form.HtmlEditor){
  Ext.apply(Ext.form.HtmlEditor.prototype, {
    createLinkText : 'リンクのURLを入力してください:',
    buttonTips : {
      bold : {
        title: '太字 (コントロール+B)',
        text: '選択テキストを太字にします。',
        cls: 'x-html-editor-tip'
      },
      italic : {
        title: '斜体 (コントロール+I)',
        text: '選択テキストを斜体にします。',
        cls: 'x-html-editor-tip'
      },
      underline : {
        title: '下線 (コントロール+U)',
        text: '選択テキストに下線を引きます。',
        cls: 'x-html-editor-tip'
      },
      increasefontsize : {
        title: '文字を大きく',
        text: 'フォントサイズを大きくします。',
        cls: 'x-html-editor-tip'
      },
      decreasefontsize : {
        title: '文字を小さく',
        text: 'フォントサイズを小さくします。',
        cls: 'x-html-editor-tip'
      },
      backcolor : {
        title: '文字のハイライト',
        text: '選択テキストの背景色を変更します。',
        cls: 'x-html-editor-tip'
      },
      forecolor : {
        title: '文字の色',
        text: '選択テキストの色を変更します。',
        cls: 'x-html-editor-tip'
      },
      justifyleft : {
        title: '左揃え',
        text: 'テキストを左揃えにします。',
        cls: 'x-html-editor-tip'
      },
      justifycenter : {
        title: '中央揃え',
        text: 'テキストを中央揃えにします。',
        cls: 'x-html-editor-tip'
      },
      justifyright : {
        title: '右揃え',
        text: 'テキストを右揃えにします。',
        cls: 'x-html-editor-tip'
      },
      insertunorderedlist : {
        title: '番号なし箇条書き',
        text: '番号なし箇条書きを開始します。',
        cls: 'x-html-editor-tip'
      },
      insertorderedlist : {
        title: '番号付き箇条書き',
        text: '番号付き箇条書きを開始します。',
        cls: 'x-html-editor-tip'
      },
      createlink : {
        title: 'ハイパーリンク',
        text: '選択テキストをハイパーリンクにします。',
        cls: 'x-html-editor-tip'
      },
      sourceedit : {
        title: 'ソース編集',
        text: 'ソース編集モードに切り替えます。',
        cls: 'x-html-editor-tip'
      }
    }
  });
}

if(Ext.grid.GridView){
  Ext.apply(Ext.grid.GridView.prototype, {
    sortAscText  : "昇順",
    sortDescText : "降順",
    columnsText  : "カラム"
  });
}

if(Ext.grid.GroupingView){
  Ext.apply(Ext.grid.GroupingView.prototype, {
    emptyGroupText : '(なし)',
    groupByText    : 'このカラムでグルーピング',
    showGroupsText : 'グルーピング'
  });
}

if(Ext.grid.PropertyColumnModel){
  Ext.apply(Ext.grid.PropertyColumnModel.prototype, {
    nameText   : "名称",
    valueText  : "値",
    dateFormat : "Y/m/d"
  });
}

if(Ext.layout.BorderLayout && Ext.layout.BorderLayout.SplitRegion){
  Ext.apply(Ext.layout.BorderLayout.SplitRegion.prototype, {
    splitTip            : "ドラッグするとリサイズできます。",
    collapsibleSplitTip : "ドラッグでリサイズ。 ダブルクリックで隠す。"
  });
}

if(Ext.form.TimeField){
  Ext.apply(Ext.form.TimeField.prototype, {
    minText : "このフィールドの時刻は、 {0} 以降の時刻に設定してください。",
    maxText : "このフィールドの時刻は、 {0} 以前の時刻に設定してください。",
    invalidText : "{0} は間違った時刻入力です。",
    format : "g:i A",
    altFormats : "g:ia|g:iA|g:i a|g:i A|h:i|g:i|H:i|ga|ha|gA|h a|g a|g A|gi|hi|gia|hia|g|H"
  });
}

if(Ext.form.CheckboxGroup){
  Ext.apply(Ext.form.CheckboxGroup.prototype, {
    blankText : "このグループから最低１つのアイテムを選択しなければなりません。"
  });
}

if(Ext.form.RadioGroup){
  Ext.apply(Ext.form.RadioGroup.prototype, {
    blankText : "このグループから１つのアイテムを選択しなければなりません。"
  });
}


The source code

/*!
 * licensing@extjs.com
 * http://www.extjs.com/license
 */

/**
 * Korean Translations By nicetip
 * 05 September 2007
 * Modify by techbug / 25 February 2008
 */

Ext.UpdateManager.defaults.indicatorText = '
로딩중...
';

if(Ext.View){
   Ext.View.prototype.emptyText = "";
}

if(Ext.grid.GridPanel){
   Ext.grid.GridPanel.prototype.ddText = "{0} 개가 선택되었습니다.";
}

if(Ext.TabPanelItem){
   Ext.TabPanelItem.prototype.closeText = "닫기";
}

if(Ext.form.Field){
   Ext.form.Field.prototype.invalidText = "올바른 값이 아닙니다.";
}

if(Ext.LoadMask){
    Ext.LoadMask.prototype.msg = "로딩중...";
}

Date.monthNames = [
   "1월",
   "2월",
   "3월",
   "4월",
   "5월",
   "6월",
   "7월",
   "8월",
   "9월",
   "10월",
   "11월",
   "12월"
];

Date.dayNames = [
   "일",
   "월",
   "화",
   "수",
   "목",
   "금",
   "토"
];

if(Ext.MessageBox){
   Ext.MessageBox.buttonText = {
      ok     : "확인",
      cancel : "취소",
      yes    : "예",
      no     : "아니오"
   };
}

if(Ext.util.Format){
   Ext.util.Format.date = function(v, format){
      if(!v) return "";
      if(!(v instanceof Date)) v = new Date(Date.parse(v));
      return v.dateFormat(format || "m/d/Y");
   };
}

if(Ext.DatePicker){
   Ext.apply(Ext.DatePicker.prototype, {
      todayText         : "오늘",
      minText           : "최소 날짜범위를 넘었습니다.",
      maxText           : "최대 날짜범위를 넘었습니다.",
      disabledDaysText  : "",
      disabledDatesText : "",
      monthNames        : Date.monthNames,
      dayNames          : Date.dayNames,
      nextText          : '다음달(컨트롤키+오른쪽 화살표)',
      prevText          : '이전달 (컨트롤키+왼족 화살표)',
      monthYearText     : '월을 선택해주세요. (컨트롤키+위/아래 화살표)',
      todayTip          : "{0} (스페이스바)",
      format            : "m/d/y",
      okText            : "확인",
      cancelText        : "취소",
      startDay          : 0
   });
}

if(Ext.PagingToolbar){
   Ext.apply(Ext.PagingToolbar.prototype, {
      beforePageText : "페이지",
      afterPageText  : "/ {0}",
      firstText      : "첫 페이지",
      prevText       : "이전 페이지",
      nextText       : "다음 페이지",
      lastText       : "마지막 페이지",
      refreshText    : "새로고침",
      displayMsg     : "전체 {2} 중 {0} - {1}",
      emptyMsg       : '표시할 데이터가 없습니다.'
   });
}

if(Ext.form.TextField){
   Ext.apply(Ext.form.TextField.prototype, {
      minLengthText : "최소길이는 {0}입니다.",
      maxLengthText : "최대길이는 {0}입니다.",
      blankText     : "값을 입력해주세요.",
      regexText     : "",
      emptyText     : null
   });
}

if(Ext.form.NumberField){
   Ext.apply(Ext.form.NumberField.prototype, {
      minText : "최소값은 {0}입니다.",
      maxText : "최대값은 {0}입니다.",
      nanText : "{0}는 올바른 숫자가 아닙니다."
   });
}

if(Ext.form.DateField){
   Ext.apply(Ext.form.DateField.prototype, {
      disabledDaysText  : "비활성",
      disabledDatesText : "비활성",
      minText           : "{0}일 이후여야 합니다.",
      maxText           : "{0}일 이전이어야 합니다.",
      invalidText       : "{0}는 올바른 날짜형식이 아닙니다. - 다음과 같은 형식이어야 합니다. {1}",
      format            : "m/d/y"
   });
}

if(Ext.form.ComboBox){
   Ext.apply(Ext.form.ComboBox.prototype, {
      loadingText       : "로딩중...",
      valueNotFoundText : undefined
   });
}

if(Ext.form.VTypes){
   Ext.apply(Ext.form.VTypes, {
      emailText    : '이메일 주소 형식에 맞게 입력해야합니다. (예: "user@example.com")',
      urlText      : 'URL 형식에 맞게 입력해야합니다. (예: "http:/'+'/www.example.com")',
      alphaText    : '영문, 밑줄(_)만 입력할 수 있습니다.',
      alphanumText : '영문, 숫자, 밑줄(_)만 입력할 수 있습니다.'
   });
}

if(Ext.form.HtmlEditor){
   Ext.apply(Ext.form.HtmlEditor.prototype, {
   createLinkText : 'URL을 입력해주세요:',
   buttonTips : {
            bold : {
               title: '굵게 (Ctrl+B)',
               text: '선택한 텍스트를 굵게 표시합니다.',
               cls: 'x-html-editor-tip'
            },
            italic : {
               title: '기울임꼴 (Ctrl+I)',
               text: '선택한 텍스트를 기울임꼴로 표시합니다.',
               cls: 'x-html-editor-tip'
            },
            underline : {
               title: '밑줄 (Ctrl+U)',
               text: '선택한 텍스트에 밑줄을 표시합니다.',
               cls: 'x-html-editor-tip'
           },
           increasefontsize : {
               title: '글꼴크기 늘림',
               text: '글꼴 크기를 크게 합니다.',
               cls: 'x-html-editor-tip'
           },
           decreasefontsize : {
               title: '글꼴크기 줄임',
               text: '글꼴 크기를 작게 합니다.',
               cls: 'x-html-editor-tip'
           },
           backcolor : {
               title: '텍스트 강조 색',
               text: '선택한 텍스트의 배경색을 변경합니다.',
               cls: 'x-html-editor-tip'
           },
           forecolor : {
               title: '글꼴색',
               text: '선택한 텍스트의 색을 변경합니다.',
               cls: 'x-html-editor-tip'
           },
           justifyleft : {
               title: '텍스트 왼쪽 맞춤',
               text: '왼쪽에 텍스트를 맞춥니다.',
               cls: 'x-html-editor-tip'
           },
           justifycenter : {
               title: '가운데 맞춤',
               text: '가운데에 텍스트를 맞춥니다.',
               cls: 'x-html-editor-tip'
           },
           justifyright : {
               title: '텍스트 오른쪽 맞춤',
               text: '오른쪽에 텍스트를 맞춥니다.',
               cls: 'x-html-editor-tip'
           },
           insertunorderedlist : {
               title: '글머리 기호',
               text: '글머리 기호 목록을 시작합니다.',
               cls: 'x-html-editor-tip'
           },
           insertorderedlist : {
               title: '번호 매기기',
               text: '번호 매기기 목록을 시작합니다.',
               cls: 'x-html-editor-tip'
           },
           createlink : {
               title: '하이퍼링크',
               text: '선택한 텍스트에 하이퍼링크를 만듭니다.',
               cls: 'x-html-editor-tip'
           },
           sourceedit : {
               title: '소스편집',
               text: '소스편집 모드로 변환합니다.',
               cls: 'x-html-editor-tip'
           }
        }
   });
}

if(Ext.grid.GridView){
   Ext.apply(Ext.grid.GridView.prototype, {
      sortAscText  : "오름차순 정렬",
      sortDescText : "내림차순 정렬",
      lockText     : "칼럼 잠금",
      unlockText   : "칼럼 잠금해제",
      columnsText  : "칼럼 목록"
   });
}

if(Ext.grid.GroupingView){
  Ext.apply(Ext.grid.GroupingView.prototype, {
    emptyGroupText : '(None)',
    groupByText    : '현재 필드로 그룹핑합니다.',
    showGroupsText : '그룹으로 보여주기'

  });
}

if(Ext.grid.PropertyColumnModel){
   Ext.apply(Ext.grid.PropertyColumnModel.prototype, {
      nameText   : "항목",
      valueText  : "값",
      dateFormat : "m/j/Y"
   });
}

if(Ext.layout.BorderLayout && Ext.layout.BorderLayout.SplitRegion){
   Ext.apply(Ext.layout.BorderLayout.SplitRegion.prototype, {
      splitTip            : "크기변경을 위해 드래그하세요.",
      collapsibleSplitTip : "크기변경을 위해 드래그, 숨기기 위해 더블클릭 하세요."
   });
}


The source code

/*!
 * licensing@extjs.com
 * http://www.extjs.com/license
 */

/**
 * Lithuanian Translations (UTF-8)
 * Vladas Saulis (vladas at prodata dot lt),  03-29-2009
 * Vladas Saulis (vladas at prodata dot lt),  10-18-2007
 */

Ext.UpdateManager.defaults.indicatorText = '
Kraunasi...
';

if(Ext.View){
  Ext.View.prototype.emptyText = "";
}

if(Ext.DataView){
  Ext.DataView.prototype.emptyText = "";
}
if(Ext.grid.GridPanel){
  Ext.grid.GridPanel.prototype.ddText = "{0} pažymėtų eilučių";
}

if(Ext.TabPanelItem){
  Ext.TabPanelItem.prototype.closeText = "Uždaryti šią užsklandą";
}

if(Ext.form.Field){
  Ext.form.Field.prototype.invalidText = "Šio lauko reikšmė neteisinga";
}

if(Ext.LoadMask){
  Ext.LoadMask.prototype.msg = "Kraunasi...";
}

Date.monthNames = [
  "Sausis",
  "Vasaris",
  "Kovas",
  "Balandis",
  "Gegužė",
  "Birželis",
  "Liepa",
  "Rugpjūtis",
  "Rugsėjis",
  "Spalis",
  "Lapkritis",
  "Gruodis"
];

Date.getShortMonthName = function(month) {
    // Uncommons
    if (month == 7) return "Rgp";
    if (month == 8) return "Rgs";
    if (month == 11) return "Grd";
  return Date.monthNames[month].substring(0, 3);
};

Date.monthNumbers = {
  Sau : 0,
  Vas : 1,
  Kov : 2,
  Bal : 3,
  Geg : 4,
  Bir : 5,
  Lie : 6,
  Rgp : 7,
  Rgs : 8,
  Spa : 9,
  Lap : 10,
  Grd : 11
};

Date.getMonthNumber = function(name) {

    // Some uncommons
    if (name == "Rugpjūtis") return 7;
    if (name == "Rugsėjis") return 8;
    if (name == "Gruodis") return 11;
  return Date.monthNumbers[name.substring(0, 1).toUpperCase() + name.substring(1, 3).toLowerCase()];
};

Date.dayNames = [
  "Sekmadienis",
  "Pirmadienis",
  "Antradienis",
  "Trečiadienis",
  "Ketvirtadienis",
  "Penktadienis",
  "Šeštadienis"
];

Date.parseCodes.S.s = "(?:as|as|as|as)";

Date.getShortDayName = function(day) {
  return Date.dayNames[day].substring(0, 3);
};

if(Ext.MessageBox){
  Ext.MessageBox.buttonText = {
    ok     : "Gerai",
    cancel : "Atsisakyti",
    yes    : "Taip",
    no     : "Ne"
  };
}

if(Ext.util.Format){
  Ext.util.Format.date = function(v, format){
    if(!v) return "";
    if(!(v instanceof Date)) v = new Date(Date.parse(v));
    return v.dateFormat(format || "Y-m-d");
  };
}

if(Ext.DatePicker){
  Ext.apply(Ext.DatePicker.prototype, {
    todayText         : "Šiandien",
    minText           : "Ši data yra mažesnė už leistiną",
    maxText           : "Ši data yra didesnė už leistiną",
    disabledDaysText  : "",
    disabledDatesText : "",
    monthNames        : Date.monthNames,
    dayNames          : Date.dayNames,
    nextText          : 'Kitas mėnuo (Control+Right)',
    prevText          : 'Ankstesnis mėnuo (Control+Left)',
    monthYearText     : 'Pasirinkti mėnesį (Control+Up/Down perėjimui tarp metų)',
    todayTip          : "{0} (Tarpas)",
    format            : "y-m-d",
    okText            : " Gerai ",
    cancelText        : "Atsisaktyi",
    startDay          : 1
  });
}

if(Ext.PagingToolbar){
  Ext.apply(Ext.PagingToolbar.prototype, {
    beforePageText : "Puslapis",
    afterPageText  : "iš {0}",
    firstText      : "Pirmas puslapis",
    prevText       : "Ankstesnis pusl.",
    nextText       : "Kitas puslapis",
    lastText       : "Pakutinis pusl.",
    refreshText    : "Atnaujinti",
    displayMsg     : "Rodomi įrašai {0} - {1} iš {2}",
    emptyMsg       : 'Nėra duomenų'
  });
}

if(Ext.form.TextField){
  Ext.apply(Ext.form.TextField.prototype, {
    minLengthText : "Minimalus šio lauko ilgis yra {0}",
    maxLengthText : "Maksimalus šio lauko ilgis yra {0}",
    blankText     : "Šis laukas yra privalomas",
    regexText     : "",
    emptyText     : null
  });
}

if(Ext.form.NumberField){
  Ext.apply(Ext.form.NumberField.prototype, {
    minText : "Minimalus šio lauko ilgis yra {0}",
    maxText : "Maksimalus šio lauko ilgis yra {0}",
    nanText : "{0} yra neleistina reikšmė"
  });
}

if(Ext.form.DateField){
  Ext.apply(Ext.form.DateField.prototype, {
    disabledDaysText  : "Neprieinama",
    disabledDatesText : "Neprieinama",
    minText           : "Šiame lauke data turi būti didesnė už {0}",
    maxText           : "Šiame lauke data turi būti mažesnėė už {0}",
    invalidText       : "{0} yra neteisinga data - ji turi būti įvesta formatu {1}",
    format            : "y-m-d",
    altFormats        : "y-m-d|y/m/d|Y-m-d|m/d|m-d|md|ymd|Ymd|d|Y-m-d"
  });
}

if(Ext.form.ComboBox){
  Ext.apply(Ext.form.ComboBox.prototype, {
    loadingText       : "Kraunasi...",
    valueNotFoundText : undefined
  });
}

if(Ext.form.VTypes){
  Ext.apply(Ext.form.VTypes, {
    emailText    : 'Šiame lauke turi būti el.pašto adresas formatu "user@example.com"',
    urlText      : 'Šiame lauke turi būti nuoroda (URL) formatu "http:/'+'/www.example.com"',
    alphaText    : 'Šiame lauke gali būti tik raidės ir ženklas "_"',
    alphanumText : 'Šiame lauke gali būti tik raidės, skaičiai ir ženklas "_"'
  });
}

if(Ext.form.HtmlEditor){
  Ext.apply(Ext.form.HtmlEditor.prototype, {
    createLinkText : 'Įveskite URL šiai nuorodai:',
    buttonTips : {
      bold : {
        title: 'Bold (Ctrl+B)',
        text: 'Teksto paryškinimas.',
        cls: 'x-html-editor-tip'
      },
      italic : {
        title: 'Italic (Ctrl+I)',
        text: 'Kursyvinis tekstas.',
        cls: 'x-html-editor-tip'
      },
      underline : {
        title: 'Underline (Ctrl+U)',
        text: 'Teksto pabraukimas.',
        cls: 'x-html-editor-tip'
      },
      increasefontsize : {
        title: 'Padidinti šriftą',
        text: 'Padidinti šrifto dydį.',
        cls: 'x-html-editor-tip'
      },
      decreasefontsize : {
        title: 'Sumažinti šriftą',
        text: 'Sumažinti šrifto dydį.',
        cls: 'x-html-editor-tip'
      },
      backcolor : {
        title: 'Nuspalvinti teksto foną',
        text: 'Pakeisti teksto fono spalvą.',
        cls: 'x-html-editor-tip'
      },
      forecolor : {
        title: 'Teksto spalva',
        text: 'Pakeisti pažymėto teksto spalvą.',
        cls: 'x-html-editor-tip'
      },
      justifyleft : {
        title: 'Išlyginti kairen',
        text: 'Išlyginti tekstą į kairę.',
        cls: 'x-html-editor-tip'
      },
      justifycenter : {
        title: 'Centruoti tekstą',
        text: 'Centruoti tektą redaktoriaus lange.',
        cls: 'x-html-editor-tip'
      },
      justifyright : {
        title: 'Išlyginti dešinėn',
        text: 'Išlyginti tekstą į dešinę.',
        cls: 'x-html-editor-tip'
      },
      insertunorderedlist : {
        title: 'Paprastas sąrašas',
        text: 'Pradėti neorganizuotą sąrašą.',
        cls: 'x-html-editor-tip'
      },
      insertorderedlist : {
        title: 'Numeruotas sąrašas',
        text: 'Pradėti numeruotą sąrašą.',
        cls: 'x-html-editor-tip'
      },
      createlink : {
        title: 'Nuoroda',
        text: 'Padaryti pažymėta tekstą nuoroda.',
        cls: 'x-html-editor-tip'
      },
      sourceedit : {
        title: 'Išeities tekstas',
        text: 'Persijungti į išeities teksto koregavimo režimą.',
        cls: 'x-html-editor-tip'
      }
    }
  });
}

if(Ext.form.BasicForm){
  Ext.form.BasicForm.prototype.waitTitle = "Palaukite...";
}

if(Ext.grid.GridView){
  Ext.apply(Ext.grid.GridView.prototype, {
    sortAscText  : "Rūšiuoti didėjančia tvarka",
    sortDescText : "Rūšiuoti mažėjančia tvarka",
    lockText     : "Užfiksuoti stulpelį",
    unlockText   : "Atlaisvinti stulpelį",
    columnsText  : "Stulpeliai"
  });
}

if(Ext.grid.GroupingView){
  Ext.apply(Ext.grid.GroupingView.prototype, {
    emptyGroupText : '(Nėra)',
    groupByText    : 'Grupuoti pagal šį lauką',
    showGroupsText : 'Rodyti grupėse'
  });
}

if(Ext.grid.PropertyColumnModel){
  Ext.apply(Ext.grid.PropertyColumnModel.prototype, {
    nameText   : "Pavadinimas",
    valueText  : "Reikšmė",
    dateFormat : "Y-m-d"
  });
}

if(Ext.layout.BorderLayout && Ext.layout.BorderLayout.SplitRegion){
  Ext.apply(Ext.layout.BorderLayout.SplitRegion.prototype, {
    splitTip            : "Patraukite juostelę.",
    collapsibleSplitTip : "Patraukite juostelę arba Paspauskite dvigubai kad paslėpti."
  });
}

if(Ext.form.TimeField){
  Ext.apply(Ext.form.TimeField.prototype, {
    minText : "Laikas turi buti lygus arba vėlesnis už {0}",
    maxText : "Laikas turi būti lygus arba ankstesnis už {0}",
    invalidText : "{0} yra neteisingas laikas",
    format : "H:i",
    altFormats : "g:ia|g:iA|g:i a|g:i A|h:i|g:i|H:i|ga|ha|gA|h a|g a|g A|gi|hi|gia|hia|g|H"
  });
}

if(Ext.form.CheckboxGroup){
  Ext.apply(Ext.form.CheckboxGroup.prototype, {
    blankText : "Jūs turite padaryti bent vieną pasirinkimą šioje grupėje"
  });
}

if(Ext.form.RadioGroup){
  Ext.apply(Ext.form.RadioGroup.prototype, {
      blankText : "Jūs turite padaryti bent vieną pasirinkimą šioje grupėje"
  });
}


The source code

/*!
 * licensing@extjs.com
 * http://www.extjs.com/license
 */

/**
 * Latvian Translations
 * By salix 17 April 2007
 */

Ext.UpdateManager.defaults.indicatorText = '
Notiek ielāde...
';

if(Ext.View){
   Ext.View.prototype.emptyText = "";
}

if(Ext.grid.GridPanel){
   Ext.grid.GridPanel.prototype.ddText = "{0} iezīmētu rindu";
}

if(Ext.TabPanelItem){
   Ext.TabPanelItem.prototype.closeText = "Aizver šo zīmni";
}

if(Ext.form.Field){
   Ext.form.Field.prototype.invalidText = "Vērtība šajā laukā nav pareiza";
}

if(Ext.LoadMask){
    Ext.LoadMask.prototype.msg = "Ielādē...";
}

Date.monthNames = [
   "Janvāris",
   "Februāris",
   "Marts",
   "Aprīlis",
   "Maijs",
   "Jūnijs",
   "Jūlijs",
   "Augusts",
   "Septembris",
   "Oktobris",
   "Novembris",
   "Decembris"
];

Date.dayNames = [
   "Svētdiena",
   "Pirmdiena",
   "Otrdiena",
   "Trešdiena",
   "Ceturtdiena",
   "Piektdiena",
   "Sestdiena"
];

if(Ext.MessageBox){
   Ext.MessageBox.buttonText = {
      ok     : "Labi",
      cancel : "Atcelt",
      yes    : "Jā",
      no     : "Nē"
   };
}

if(Ext.util.Format){
   Ext.util.Format.date = function(v, format){
      if(!v) return "";
      if(!(v instanceof Date)) v = new Date(Date.parse(v));
      return v.dateFormat(format || "d.m.Y");
   };
}

if(Ext.DatePicker){
   Ext.apply(Ext.DatePicker.prototype, {
      todayText         : "Šodiena",
      minText           : "Norādītais datums ir mazāks par minimālo datumu",
      maxText           : "Norādītais datums ir lielāks par maksimālo datumu",
      disabledDaysText  : "",
      disabledDatesText : "",
      monthNames	: Date.monthNames,
      dayNames		: Date.dayNames,
      nextText          : 'Nākamais mēnesis (Control+pa labi)',
      prevText          : 'Iepriekšējais mēnesis (Control+pa kreisi)',
      monthYearText     : 'Mēneša izvēle (Control+uz augšu/uz leju lai pārslēgtu gadus)',
      todayTip          : "{0} (Tukšumzīme)",
      format            : "d.m.Y",
      startDay          : 1
   });
}

if(Ext.PagingToolbar){
   Ext.apply(Ext.PagingToolbar.prototype, {
      beforePageText : "Lapa",
      afterPageText  : "no {0}",
      firstText      : "Pirmā lapa",
      prevText       : "iepriekšējā lapa",
      nextText       : "Nākamā lapa",
      lastText       : "Pēdējā lapa",
      refreshText    : "Atsvaidzināt",
      displayMsg     : "Rāda no {0} līdz {1} ierakstiem, kopā {2}",
      emptyMsg       : 'Nav datu, ko parādīt'
   });
}

if(Ext.form.TextField){
   Ext.apply(Ext.form.TextField.prototype, {
      minLengthText : "Minimālais garums šim laukam ir {0}",
      maxLengthText : "Maksimālais garums šim laukam ir {0}",
      blankText     : "Šis ir obligāts lauks",
      regexText     : "",
      emptyText     : null
   });
}

if(Ext.form.NumberField){
   Ext.apply(Ext.form.NumberField.prototype, {
      minText : "Minimālais garums šim laukam ir  {0}",
      maxText : "Maksimālais garums šim laukam ir  {0}",
      nanText : "{0} nav pareizs skaitlis"
   });
}

if(Ext.form.DateField){
   Ext.apply(Ext.form.DateField.prototype, {
      disabledDaysText  : "Atspējots",
      disabledDatesText : "Atspējots",
      minText           : "Datumam šajā laukā jābūt lielākam kā {0}",
      maxText           : "Datumam šajā laukā jābūt mazākam kā {0}",
      invalidText       : "{0} nav pareizs datums - tam jābūt šādā formātā: {1}",
      format            : "d.m.Y"
   });
}

if(Ext.form.ComboBox){
   Ext.apply(Ext.form.ComboBox.prototype, {
      loadingText       : "Ielādē...",
      valueNotFoundText : undefined
   });
}

if(Ext.form.VTypes){
   Ext.apply(Ext.form.VTypes, {
      emailText    : 'Šajā laukā jāieraksta e-pasta adrese formātā "lietotās@domēns.lv"',
      urlText      : 'Šajā laukā jāieraksta URL formātā "http:/'+'/www.domēns.lv"',
      alphaText    : 'Šis lauks drīkst saturēt tikai burtus un _ zīmi',
      alphanumText : 'Šis lauks drīkst saturēt tikai burtus, ciparus un _ zīmi'
   });
}

if(Ext.grid.GridView){
   Ext.apply(Ext.grid.GridView.prototype, {
      sortAscText  : "Kārtot pieaugošā secībā",
      sortDescText : "Kārtot dilstošā secībā",
      lockText     : "Noslēgt kolonnu",
      unlockText   : "Atslēgt kolonnu",
      columnsText  : "Kolonnas"
   });
}

if(Ext.grid.PropertyColumnModel){
   Ext.apply(Ext.grid.PropertyColumnModel.prototype, {
      nameText   : "Nosaukums",
      valueText  : "Vērtība",
      dateFormat : "j.m.Y"
   });
}

if(Ext.layout.BorderLayout && Ext.layout.BorderLayout.SplitRegion){
   Ext.apply(Ext.layout.BorderLayout.SplitRegion.prototype, {
      splitTip            : "Velc, lai mainītu izmēru.",
      collapsibleSplitTip : "Velc, lai mainītu izmēru. Dubultklikšķis noslēpj apgabalu."
   });
}


The source code

/*!
 * licensing@extjs.com
 * http://www.extjs.com/license
 */
/*
 * Macedonia translation
 * By PetarD petar.dimitrijevic@vorteksed.com.mk (utf8 encoding)
 * 23 April 2007
 */

Ext.UpdateManager.defaults.indicatorText = '
Вчитувам...
';

if(Ext.View){
   Ext.View.prototype.emptyText = "";
}

if(Ext.grid.GridPanel){
   Ext.grid.GridPanel.prototype.ddText = "{0} избрани редици";
}

if(Ext.TabPanelItem){
   Ext.TabPanelItem.prototype.closeText = "Затвори tab";
}

if(Ext.form.Field){
   Ext.form.Field.prototype.invalidText = "Вредноста во ова поле е невалидна";
}

if(Ext.LoadMask){
    Ext.LoadMask.prototype.msg = "Вчитувам...";
}

Date.monthNames = [
   "Јануари",
   "Февруари",
   "Март",
   "Април",
   "Мај",
   "Јуни",
   "Јули",
   "Август",
   "Септември",
   "Октомври",
   "Ноември",
   "Декември"
];

Date.dayNames = [
   "Недела",
   "Понеделник",
   "Вторник",
   "Среда",
   "Четврток",
   "Петок",
   "Сабота"
];

if(Ext.MessageBox){
   Ext.MessageBox.buttonText = {
      ok     : "Потврди",
      cancel : "Поништи",
      yes    : "Да",
      no     : "Не"
   };
}

if(Ext.util.Format){
   Ext.util.Format.date = function(v, format){
      if(!v) return "";
      if(!(v instanceof Date)) v = new Date(Date.parse(v));
      return v.dateFormat(format || "d.m.y");
   };
}

if(Ext.DatePicker){
   Ext.apply(Ext.DatePicker.prototype, {
      todayText         : "Денеска",
      minText           : "Овој датум е пред најмалиот датум",
      maxText           : "Овој датум е пред најголемиот датум",
      disabledDaysText  : "",
      disabledDatesText : "",
      monthNames	: Date.monthNames,
      dayNames		: Date.dayNames,
      nextText          : 'Следен месец (Control+Стрелка десно)',
      prevText          : 'Претходен месец (Control+Стрелка лево)',
      monthYearText     : 'Изберете месец (Control+Стрелка горе/Стрелка десно за менување година)',
      todayTip          : "{0} (Spacebar)",
      format            : "d.m.y"
   });
}

if(Ext.PagingToolbar){
   Ext.apply(Ext.PagingToolbar.prototype, {
      beforePageText : "Страница",
      afterPageText  : "од {0}",
      firstText      : "Прва Страница",
      prevText       : "Претходна Страница",
      nextText       : "Следна Страница",
      lastText       : "Последна Страница",
      refreshText    : "Освежи",
      displayMsg     : "Прикажувам {0} - {1} од {2}",
      emptyMsg       : 'Нема податоци за приказ'
   });
}

if(Ext.form.TextField){
   Ext.apply(Ext.form.TextField.prototype, {
      minLengthText : "Минималната должина за ова поле е {0}",
      maxLengthText : "Максималната должина за ова поле е {0}",
      blankText     : "Податоците во ова поле се потребни",
      regexText     : "",
      emptyText     : null
   });
}

if(Ext.form.NumberField){
   Ext.apply(Ext.form.NumberField.prototype, {
      minText : "Минималната вредност за ова поле е {0}",
      maxText : "Максималната вредност за ова поле е {0}",
      nanText : "{0} не е валиден број"
   });
}

if(Ext.form.DateField){
   Ext.apply(Ext.form.DateField.prototype, {
      disabledDaysText  : "Неактивно",
      disabledDatesText : "Неактивно",
      minText           : "Датумот во ова поле мора да биде пред {0}",
      maxText           : "Датумот во ова поле мора да биде по {0}",
      invalidText       : "{0} не е валиден датум - мора да биде во формат {1}",
      format            : "d.m.y"
   });
}

if(Ext.form.ComboBox){
   Ext.apply(Ext.form.ComboBox.prototype, {
      loadingText       : "Вчитувам...",
      valueNotFoundText : undefined
   });
}

if(Ext.form.VTypes){
   Ext.apply(Ext.form.VTypes, {
      emailText    : 'Ова поле треба да биде e-mail адреса во формат "user@example.com"',
      urlText      : 'Ова поле треба да биде URL во формат "http:/'+'/www.example.com"',
      alphaText    : 'Ова поле треба да содржи само букви и _',
      alphanumText : 'Ова поле треба да содржи само букви, бројки и _'
   });
}

if(Ext.grid.GridView){
   Ext.apply(Ext.grid.GridView.prototype, {
      sortAscText  : "Сортирај Растечки",
      sortDescText : "Сортирај Опаѓачки",
      lockText     : "Заклучи Колона",
      unlockText   : "Отклучи колона",
      columnsText  : "Колони"
   });
}

if(Ext.grid.PropertyColumnModel){
   Ext.apply(Ext.grid.PropertyColumnModel.prototype, {
      nameText   : "Име",
      valueText  : "Вредност",
      dateFormat : "m.d.Y"
   });
}

if(Ext.layout.BorderLayout && Ext.layout.BorderLayout.SplitRegion){
   Ext.apply(Ext.layout.BorderLayout.SplitRegion.prototype, {
      splitTip            : "Повлечете за менување на големината.",
      collapsibleSplitTip : "Повлечете за менување на големината. Дупли клик за криење."
   });
}


The source code

/*!
 * licensing@extjs.com
 * http://www.extjs.com/license
 */

/**
 * List compiled by mystix on the extjs.com forums.
 * Thank you Mystix!
 *
 * Dutch Translations
 * by Ido Sebastiaan Bas van Oostveen (12 Oct 2007)
 * updated to 2.2 by Condor (8 Aug 2008)
 */

Ext.UpdateManager.defaults.indicatorText = '
Bezig met laden...
';

if(Ext.DataView){
  Ext.DataView.prototype.emptyText = '';
}

if(Ext.grid.GridPanel){
  Ext.grid.GridPanel.prototype.ddText = '{0} geselecteerde rij(en)';
}

if(Ext.LoadMask){
  Ext.LoadMask.prototype.msg = 'Bezig met laden...';
}

Date.monthNames = [
  'januari',
  'februari',
  'maart',
  'april',
  'mei',
  'juni',
  'juli',
  'augustus',
  'september',
  'oktober',
  'november',
  'december'
];

Date.getShortMonthName = function(month) {
  if (month == 2) {
    return 'mrt';
  }
  return Date.monthNames[month].substring(0, 3);
};

Date.monthNumbers = {
  jan: 0,
  feb: 1,
  mrt: 2,
  apr: 3,
  mei: 4,
  jun: 5,
  jul: 6,
  aug: 7,
  sep: 8,
  okt: 9,
  nov: 10,
  dec: 11
};

Date.getMonthNumber = function(name) {
  var sname = name.substring(0, 3).toLowerCase();
  if (sname == 'maa') {
    return 2;
  }
  return Date.monthNumbers[sname];
};

Date.dayNames = [
  'zondag',
  'maandag',
  'dinsdag',
  'woensdag',
  'donderdag',
  'vrijdag',
  'zaterdag'
];

Date.getShortDayName = function(day) {
  return Date.dayNames[day].substring(0, 3);
};

Date.parseCodes.S.s = "(?:ste|e)";

if(Ext.MessageBox){
  Ext.MessageBox.buttonText = {
    ok: 'OK',
    cancel: 'Annuleren',
    yes: 'Ja',
    no: 'Nee'
  };
}

if(Ext.util.Format){
  Ext.util.Format.date = function(v, format){
    if (!v) return '';
    if (!(v instanceof Date)) v = new Date(Date.parse(v));
    return v.dateFormat(format || 'j-m-y');
  };
}

if(Ext.DatePicker){
  Ext.apply(Ext.DatePicker.prototype, {
    todayText: 'Vandaag',
    minText: 'Deze datum is eerder dan de minimale datum',
    maxText: 'Deze datum is later dan de maximale datum',
    disabledDaysText: '',
    disabledDatesText: '',
    monthNames: Date.monthNames,
    dayNames: Date.dayNames,
    nextText: 'Volgende maand (Ctrl+rechts)',
    prevText: 'Vorige maand (Ctrl+links)',
    monthYearText: 'Kies een maand (Ctrl+omhoog/omlaag volgend/vorig jaar)',
    todayTip: '{0} (spatie)',
    format: 'j-m-y',
    okText: ' OK ',
    cancelText: 'Annuleren',
    startDay: 1
  });
}

if(Ext.PagingToolbar){
  Ext.apply(Ext.PagingToolbar.prototype, {
    beforePageText: 'Pagina',
    afterPageText: 'van {0}',
    firstText: 'Eerste pagina',
    prevText: 'Vorige pagina',
    nextText: 'Volgende pagina',
    lastText: 'Laatste pagina',
    refreshText: 'Ververs',
    displayMsg: 'Getoond {0} - {1} van {2}',
    emptyMsg: 'Geen gegevens om weer te geven'
  });
}

if(Ext.form.Field){
  Ext.form.Field.prototype.invalidText = 'De waarde van dit veld is ongeldig';
}

if(Ext.form.TextField){
  Ext.apply(Ext.form.TextField.prototype, {
    minLengthText: 'De minimale lengte van dit veld is {0}',
    maxLengthText: 'De maximale lengte van dit veld is {0}',
    blankText: 'Dit veld is verplicht',
    regexText: '',
    emptyText: null
  });
}

if(Ext.form.NumberField){
  Ext.apply(Ext.form.NumberField.prototype, {
    decimalSeparator : ",",
    decimalPrecision : 2,
    minText: 'De minimale waarde van dit veld is {0}',
    maxText: 'De maximale waarde van dit veld is {0}',
    nanText: '{0} is geen geldig getal'
  });
}

if(Ext.form.DateField){
  Ext.apply(Ext.form.DateField.prototype, {
    disabledDaysText: 'Uitgeschakeld',
    disabledDatesText: 'Uitgeschakeld',
    minText: 'De datum in dit veld moet na {0} liggen',
    maxText: 'De datum in dit veld moet voor {0} liggen',
    invalidText: '{0} is geen geldige datum - formaat voor datum is {1}',
    format: 'j-m-y',
    altFormats: 'd/m/Y|d-m-y|d-m-Y|d/m|d-m|dm|dmy|dmY|d|Y-m-d'
  });
}

if(Ext.form.ComboBox){
  Ext.apply(Ext.form.ComboBox.prototype, {
    loadingText: 'Bezig met laden...',
    valueNotFoundText: undefined
  });
}

if(Ext.form.VTypes){
  Ext.apply(Ext.form.VTypes, {
    emailText: 'Dit veld moet een e-mail adres bevatten in het formaat "gebruiker@domein.nl"',
    urlText: 'Dit veld moet een URL bevatten in het formaat "http:/'+'/www.domein.nl"',
    alphaText: 'Dit veld mag alleen letters en _ bevatten',
    alphanumText: 'Dit veld mag alleen letters, cijfers en _ bevatten'
  });
}

if(Ext.form.HtmlEditor){
  Ext.apply(Ext.form.HtmlEditor.prototype, {
    createLinkText: 'Vul hier de URL voor de hyperlink in:',
    buttonTips: {
      bold: {
        title: 'Vet (Ctrl+B)',
        text: 'Maak de geselecteerde tekst vet.',
        cls: 'x-html-editor-tip'
      },
      italic: {
        title: 'Cursief (Ctrl+I)',
        text: 'Maak de geselecteerde tekst cursief.',
        cls: 'x-html-editor-tip'
      },
      underline: {
        title: 'Onderstrepen (Ctrl+U)',
        text: 'Onderstreep de geselecteerde tekst.',
        cls: 'x-html-editor-tip'
      },
      increasefontsize: {
        title: 'Tekst vergroten',
        text: 'Vergroot het lettertype.',
        cls: 'x-html-editor-tip'
      },
      decreasefontsize: {
        title: 'Tekst verkleinen',
        text: 'Verklein het lettertype.',
        cls: 'x-html-editor-tip'
      },
      backcolor: {
        title: 'Tekst achtergrondkleur',
        text: 'Verander de achtergrondkleur van de geselecteerde tekst.',
        cls: 'x-html-editor-tip'
      },
      forecolor: {
        title: 'Tekst kleur',
        text: 'Verander de kleur van de geselecteerde tekst.',
        cls: 'x-html-editor-tip'
      },
      justifyleft: {
        title: 'Tekst links uitlijnen',
        text: 'Lijn de tekst links uit.',
        cls: 'x-html-editor-tip'
      },
      justifycenter: {
        title: 'Tekst centreren',
        text: 'Centreer de tekst.',
        cls: 'x-html-editor-tip'
      },
      justifyright: {
        title: 'Tekst rechts uitlijnen',
        text: 'Lijn de tekst rechts uit.',
        cls: 'x-html-editor-tip'
      },
      insertunorderedlist: {
        title: 'Opsommingstekens',
        text: 'Begin een ongenummerde lijst.',
        cls: 'x-html-editor-tip'
      },
      insertorderedlist: {
        title: 'Genummerde lijst',
        text: 'Begin een genummerde lijst.',
        cls: 'x-html-editor-tip'
      },
      createlink: {
        title: 'Hyperlink',
        text: 'Maak van de geselecteerde tekst een hyperlink.',
        cls: 'x-html-editor-tip'
      },
      sourceedit: {
        title: 'Bron aanpassen',
        text: 'Schakel modus over naar bron aanpassen.',
        cls: 'x-html-editor-tip'
      }
    }
  });
}

if(Ext.grid.GridView){
  Ext.apply(Ext.grid.GridView.prototype, {
    sortAscText: 'Sorteer oplopend',
    sortDescText: 'Sorteer aflopend',
    columnsText: 'Kolommen'
  });
}

if(Ext.grid.GroupingView){
  Ext.apply(Ext.grid.GroupingView.prototype, {
  emptyGroupText: '(Geen)',
  groupByText: 'Dit veld groeperen',
  showGroupsText: 'Toon in groepen'
  });
}

if(Ext.grid.PropertyColumnModel){
  Ext.apply(Ext.grid.PropertyColumnModel.prototype, {
    nameText: 'Naam',
    valueText: 'Waarde',
    dateFormat: 'j-m-Y'
  });
}

if(Ext.layout.BorderLayout && Ext.layout.BorderLayout.SplitRegion){
  Ext.apply(Ext.layout.BorderLayout.SplitRegion.prototype, {
    splitTip: 'Sleep om grootte aan te passen.',
    collapsibleSplitTip: 'Sleep om grootte aan te passen. Dubbel klikken om te verbergen.'
  });
}

if(Ext.form.TimeField){
  Ext.apply(Ext.form.TimeField.prototype, {
    minText: 'De tijd in dit veld moet op of na {0} liggen',
    maxText: 'De tijd in dit veld moet op of voor {0} liggen',
    invalidText: '{0} is geen geldig tijdstip',
    format: 'G:i',
    altFormats: 'g:ia|g:iA|g:i a|g:i A|h:i|g:i|H:i|ga|ha|gA|h a|g a|g A|gi|hi|gia|hia|g|H'
  });
}

if(Ext.form.CheckboxGroup){
  Ext.apply(Ext.form.CheckboxGroup.prototype, {
    blankText : 'Selecteer minimaal een element in deze groep'
  });
}

if(Ext.form.RadioGroup){
  Ext.apply(Ext.form.RadioGroup.prototype, {
    blankText : 'Selecteer een element in deze groep'
  });
}


The source code

/*!
 * licensing@extjs.com
 * http://www.extjs.com/license
 */

/**
 *
 * Norwegian translation (Bokmål: no-NB)
 * By Tore Kjørsvik 21-January-2008
 *
 */

Ext.UpdateManager.defaults.indicatorText = '
Laster...
';

if(Ext.View){
  Ext.View.prototype.emptyText = "";
}

if(Ext.grid.GridPanel){
  Ext.grid.GridPanel.prototype.ddText = "{0} markert(e) rad(er)";
}

if(Ext.TabPanelItem){
  Ext.TabPanelItem.prototype.closeText = "Lukk denne fanen";
}

if(Ext.form.Field){
  Ext.form.Field.prototype.invalidText = "Verdien i dette feltet er ugyldig";
}

if(Ext.LoadMask){
  Ext.LoadMask.prototype.msg = "Laster...";
}

Date.monthNames = [
  "Januar",
  "Februar",
  "Mars",
  "April",
  "Mai",
  "Juni",
  "Juli",
  "August",
  "September",
  "Oktober",
  "November",
  "Desember"
];

Date.getShortMonthName = function(month) {
  return Date.monthNames[month].substring(0, 3);
};

Date.monthNumbers = {
  Jan : 0,
  Feb : 1,
  Mar : 2,
  Apr : 3,
  Mai : 4,
  Jun : 5,
  Jul : 6,
  Aug : 7,
  Sep : 8,
  Okt : 9,
  Nov : 10,
  Des : 11
};

Date.getMonthNumber = function(name) {
  return Date.monthNumbers[name.substring(0, 1).toUpperCase() + name.substring(1, 3).toLowerCase()];
};

Date.dayNames = [
  "Søndag",
  "Mandag",
  "Tirsdag",
  "Onsdag",
  "Torsdag",
  "Fredag",
  "Lørdag"
];

Date.getShortDayName = function(day) {
  return Date.dayNames[day].substring(0, 3);
};

if(Ext.MessageBox){
  Ext.MessageBox.buttonText = {
    ok     : "OK",
    cancel : "Avbryt",
    yes    : "Ja",
    no     : "Nei"
  };
}

if(Ext.util.Format){
  Ext.util.Format.date = function(v, format){
    if(!v) return "";
    if(!(v instanceof Date)) v = new Date(Date.parse(v));
    return v.dateFormat(format || "d.m.Y");
  };
}

if(Ext.DatePicker){
  Ext.apply(Ext.DatePicker.prototype, {
    todayText         : "I dag",
    minText           : "Denne datoen er før tidligste tillatte dato",
    maxText           : "Denne datoen er etter seneste tillatte dato",
    disabledDaysText  : "",
    disabledDatesText : "",
    monthNames	      : Date.monthNames,
    dayNames		      : Date.dayNames,
    nextText          : 'Neste måned (Control+Pil Høyre)',
    prevText          : 'Forrige måned (Control+Pil Venstre)',
    monthYearText     : 'Velg en måned (Control+Pil Opp/Ned for å skifte år)',
    todayTip          : "{0} (Mellomrom)",
    format            : "d.m.y",
    okText            : " OK ",
    cancelText        : "Avbryt",
    startDay          : 1
  });
}

if(Ext.PagingToolbar){
  Ext.apply(Ext.PagingToolbar.prototype, {
    beforePageText : "Side",
    afterPageText  : "av {0}",
    firstText      : "Første side",
    prevText       : "Forrige side",
    nextText       : "Neste side",
    lastText       : "Siste side",
    refreshText    : "Oppdater",
    displayMsg     : "Viser {0} - {1} av {2}",
    emptyMsg       : 'Ingen data å vise'
  });
}

if(Ext.form.TextField){
  Ext.apply(Ext.form.TextField.prototype, {
    minLengthText : "Den minste lengden for dette feltet er {0}",
    maxLengthText : "Den største lengden for dette feltet er {0}",
    blankText     : "Dette feltet er påkrevd",
    regexText     : "",
    emptyText     : null
  });
}

if(Ext.form.NumberField){
  Ext.apply(Ext.form.NumberField.prototype, {
    minText : "Den minste verdien for dette feltet er {0}",
    maxText : "Den største verdien for dette feltet er {0}",
    nanText : "{0} er ikke et gyldig nummer"
  });
}

if(Ext.form.DateField){
  Ext.apply(Ext.form.DateField.prototype, {
    disabledDaysText  : "Deaktivert",
    disabledDatesText : "Deaktivert",
    minText           : "Datoen i dette feltet må være etter {0}",
    maxText           : "Datoen i dette feltet må være før {0}",
    invalidText       : "{0} er ikke en gyldig dato - den må være på formatet {1}",
    format            : "d.m.y",
    altFormats        : "d.m.Y|d/m/y|d/m/Y|d-m-y|d-m-Y|d.m|d/m|d-m|dm|dmy|dmY|Y-m-d|d"
  });
}

if(Ext.form.ComboBox){
  Ext.apply(Ext.form.ComboBox.prototype, {
    loadingText       : "Laster...",
    valueNotFoundText : undefined
  });
}

if(Ext.form.VTypes){
   Ext.apply(Ext.form.VTypes, {
      emailText    : 'Dette feltet skal være en epost adresse på formatet "bruker@domene.no"',
      urlText      : 'Dette feltet skal være en link (URL) på formatet "http:/'+'/www.domene.no"',
      alphaText    : 'Dette feltet skal kun inneholde bokstaver og _',
      alphanumText : 'Dette feltet skal kun inneholde bokstaver, tall og _'
   });
}

if(Ext.form.HtmlEditor){
  Ext.apply(Ext.form.HtmlEditor.prototype, {
    createLinkText : 'Vennligst skriv inn URL for lenken:',
    buttonTips : {
      bold : {
        title: 'Fet (Ctrl+B)',
        text: 'Gjør den valgte teksten fet.',
        cls: 'x-html-editor-tip'
      },
      italic : {
        title: 'Kursiv (Ctrl+I)',
        text: 'Gjør den valgte teksten kursiv.',
        cls: 'x-html-editor-tip'
      },
      underline : {
        title: 'Understrek (Ctrl+U)',
        text: 'Understrek den valgte teksten.',
        cls: 'x-html-editor-tip'
      },
      increasefontsize : {
        title: 'Forstørr tekst',
        text: 'Gjør fontstørrelse større.',
        cls: 'x-html-editor-tip'
      },
      decreasefontsize : {
        title: 'Forminsk tekst',
        text: 'Gjør fontstørrelse mindre.',
        cls: 'x-html-editor-tip'
      },
      backcolor : {
        title: 'Tekst markeringsfarge',
        text: 'Endre bakgrunnsfarge til den valgte teksten.',
        cls: 'x-html-editor-tip'
      },
      forecolor : {
        title: 'Font farge',
        text: 'Endre farge på den valgte teksten.',
        cls: 'x-html-editor-tip'
      },
      justifyleft : {
        title: 'Venstrejuster tekst',
        text: 'Venstrejuster teksten.',
        cls: 'x-html-editor-tip'
      },
      justifycenter : {
        title: 'Sentrer tekst',
        text: 'Sentrer teksten.',
        cls: 'x-html-editor-tip'
      },
      justifyright : {
        title: 'Høyrejuster tekst',
        text: 'Høyrejuster teksten.',
        cls: 'x-html-editor-tip'
      },
      insertunorderedlist : {
        title: 'Punktliste',
        text: 'Start en punktliste.',
        cls: 'x-html-editor-tip'
      },
      insertorderedlist : {
        title: 'Nummerert liste',
        text: 'Start en nummerert liste.',
        cls: 'x-html-editor-tip'
      },
      createlink : {
        title: 'Lenke',
        text: 'Gjør den valgte teksten til en lenke.',
        cls: 'x-html-editor-tip'
      },
      sourceedit : {
        title: 'Rediger kilde',
        text: 'Bytt til kilderedigeringsvisning.',
        cls: 'x-html-editor-tip'
      }
    }
  });
}

if(Ext.grid.GridView){
  Ext.apply(Ext.grid.GridView.prototype, {
    sortAscText  : "Sorter stigende",
    sortDescText : "Sorter synkende",
    lockText     : "Lås kolonne",
    unlockText   : "Lås opp kolonne",
    columnsText  : "Kolonner"
  });
}

if(Ext.grid.GroupingView){
  Ext.apply(Ext.grid.GroupingView.prototype, {
    emptyGroupText : '(Ingen)',
    groupByText    : 'Grupper etter dette feltet',
    showGroupsText : 'Vis i grupper'
  });
}

if(Ext.grid.PropertyColumnModel){
  Ext.apply(Ext.grid.PropertyColumnModel.prototype, {
    nameText   : "Navn",
    valueText  : "Verdi",
    dateFormat : "d.m.Y"
  });
}

if(Ext.layout.BorderLayout && Ext.layout.BorderLayout.SplitRegion){
  Ext.apply(Ext.layout.BorderLayout.SplitRegion.prototype, {
    splitTip            : "Dra for å endre størrelse.",
    collapsibleSplitTip : "Dra for å endre størrelse. Dobbelklikk for å skjule."
  });
}


The source code

/*!
 * licensing@extjs.com
 * http://www.extjs.com/license
 */

/**
 *
 * Norwegian translation (Nynorsk: no-NN)
 * By Tore Kjørsvik 21-January-2008
 *
 */

Ext.UpdateManager.defaults.indicatorText = '
Lastar...
';

if(Ext.View){
  Ext.View.prototype.emptyText = "";
}

if(Ext.grid.GridPanel){
  Ext.grid.GridPanel.prototype.ddText = "{0} markert(e) rad(er)";
}

if(Ext.TabPanelItem){
  Ext.TabPanelItem.prototype.closeText = "Lukk denne fana";
}

if(Ext.form.Field){
  Ext.form.Field.prototype.invalidText = "Verdien i dette feltet er ugyldig";
}

if(Ext.LoadMask){
  Ext.LoadMask.prototype.msg = "Lastar...";
}

Date.monthNames = [
  "Januar",
  "Februar",
  "Mars",
  "April",
  "Mai",
  "Juni",
  "Juli",
  "August",
  "September",
  "Oktober",
  "November",
  "Desember"
];

Date.getShortMonthName = function(month) {
  return Date.monthNames[month].substring(0, 3);
};

Date.monthNumbers = {
  Jan : 0,
  Feb : 1,
  Mar : 2,
  Apr : 3,
  Mai : 4,
  Jun : 5,
  Jul : 6,
  Aug : 7,
  Sep : 8,
  Okt : 9,
  Nov : 10,
  Des : 11
};

Date.getMonthNumber = function(name) {
  return Date.monthNumbers[name.substring(0, 1).toUpperCase() + name.substring(1, 3).toLowerCase()];
};

Date.dayNames = [
  "Søndag",
  "Måndag",
  "Tysdag",
  "Onsdag",
  "Torsdag",
  "Fredag",
  "Laurdag"
];

Date.getShortDayName = function(day) {
  return Date.dayNames[day].substring(0, 3);
};

if(Ext.MessageBox){
  Ext.MessageBox.buttonText = {
    ok     : "OK",
    cancel : "Avbryt",
    yes    : "Ja",
    no     : "Nei"
  };
}

if(Ext.util.Format){
  Ext.util.Format.date = function(v, format){
    if(!v) return "";
    if(!(v instanceof Date)) v = new Date(Date.parse(v));
    return v.dateFormat(format || "d.m.Y");
  };
}

if(Ext.DatePicker){
  Ext.apply(Ext.DatePicker.prototype, {
    todayText         : "I dag",
    minText           : "Denne datoen er før tidlegaste tillatne dato",
    maxText           : "Denne datoen er etter seinaste tillatne dato",
    disabledDaysText  : "",
    disabledDatesText : "",
    monthNames	      : Date.monthNames,
    dayNames		      : Date.dayNames,
    nextText          : 'Neste månad (Control+Pil Høgre)',
    prevText          : 'Førre månad (Control+Pil Venstre)',
    monthYearText     : 'Velj ein månad (Control+Pil Opp/Ned for å skifte år)',
    todayTip          : "{0} (Mellomrom)",
    format            : "d.m.y",
    okText            : " OK ",
    cancelText        : "Avbryt",
    startDay          : 1
  });
}

if(Ext.PagingToolbar){
  Ext.apply(Ext.PagingToolbar.prototype, {
    beforePageText : "Side",
    afterPageText  : "av {0}",
    firstText      : "Første sida",
    prevText       : "Førre sida",
    nextText       : "Neste sida",
    lastText       : "Siste sida",
    refreshText    : "Oppdater",
    displayMsg     : "Viser {0} - {1} av {2}",
    emptyMsg       : 'Ingen data å vise'
  });
}

if(Ext.form.TextField){
  Ext.apply(Ext.form.TextField.prototype, {
    minLengthText : "Den minste lengda for dette feltet er {0}",
    maxLengthText : "Den største lengda for dette feltet er {0}",
    blankText     : "Dette feltet er påkravd",
    regexText     : "",
    emptyText     : null
  });
}

if(Ext.form.NumberField){
  Ext.apply(Ext.form.NumberField.prototype, {
    minText : "Den minste verdien for dette feltet er {0}",
    maxText : "Den største verdien for dette feltet er {0}",
    nanText : "{0} er ikkje eit gyldig nummer"
  });
}

if(Ext.form.DateField){
  Ext.apply(Ext.form.DateField.prototype, {
    disabledDaysText  : "Deaktivert",
    disabledDatesText : "Deaktivert",
    minText           : "Datoen i dette feltet må vere etter {0}",
    maxText           : "Datoen i dette feltet må vere før {0}",
    invalidText       : "{0} er ikkje ein gyldig dato - han må vere på formatet {1}",
    format            : "d.m.y",
    altFormats        : "d.m.Y|d/m/y|d/m/Y|d-m-y|d-m-Y|d.m|d/m|d-m|dm|dmy|dmY|Y-m-d|d"
  });
}

if(Ext.form.ComboBox){
  Ext.apply(Ext.form.ComboBox.prototype, {
    loadingText       : "Lastar...",
    valueNotFoundText : undefined
  });
}

if(Ext.form.VTypes){
   Ext.apply(Ext.form.VTypes, {
      emailText    : 'Dette feltet skal vere ei epost adresse på formatet "bruker@domene.no"',
      urlText      : 'Dette feltet skal vere ein link (URL) på formatet "http:/'+'/www.domene.no"',
      alphaText    : 'Dette feltet skal berre innehalde bokstavar og _',
      alphanumText : 'Dette feltet skal berre innehalde bokstavar, tal og _'
   });
}

if(Ext.form.HtmlEditor){
  Ext.apply(Ext.form.HtmlEditor.prototype, {
    createLinkText : 'Ver venleg og skriv inn URL for lenken:',
    buttonTips : {
      bold : {
        title: 'Feit (Ctrl+B)',
        text: 'Gjer den valde teksten feit.',
        cls: 'x-html-editor-tip'
      },
      italic : {
        title: 'Kursiv (Ctrl+I)',
        text: 'Gjer den valde teksten kursiv.',
        cls: 'x-html-editor-tip'
      },
      underline : {
        title: 'Understrek (Ctrl+U)',
        text: 'Understrek den valde teksten.',
        cls: 'x-html-editor-tip'
      },
      increasefontsize : {
        title: 'Forstørr tekst',
        text: 'Gjer fontstorleik større.',
        cls: 'x-html-editor-tip'
      },
      decreasefontsize : {
        title: 'Forminsk tekst',
        text: 'Gjer fontstorleik mindre.',
        cls: 'x-html-editor-tip'
      },
      backcolor : {
        title: 'Tekst markeringsfarge',
        text: 'Endre bakgrunnsfarge til den valde teksten.',
        cls: 'x-html-editor-tip'
      },
      forecolor : {
        title: 'Font farge',
        text: 'Endre farge på den valde teksten.',
        cls: 'x-html-editor-tip'
      },
      justifyleft : {
        title: 'Venstrejuster tekst',
        text: 'Venstrejuster teksten.',
        cls: 'x-html-editor-tip'
      },
      justifycenter : {
        title: 'Sentrer tekst',
        text: 'Sentrer teksten.',
        cls: 'x-html-editor-tip'
      },
      justifyright : {
        title: 'Høgrejuster tekst',
        text: 'Høgrejuster teksten.',
        cls: 'x-html-editor-tip'
      },
      insertunorderedlist : {
        title: 'Punktliste',
        text: 'Start ei punktliste.',
        cls: 'x-html-editor-tip'
      },
      insertorderedlist : {
        title: 'Nummerert liste',
        text: 'Start ei nummerert liste.',
        cls: 'x-html-editor-tip'
      },
      createlink : {
        title: 'Lenke',
        text: 'Gjer den valde teksten til ei lenke.',
        cls: 'x-html-editor-tip'
      },
      sourceedit : {
        title: 'Rediger kjelde',
        text: 'Bytt til kjelderedigeringsvising.',
        cls: 'x-html-editor-tip'
      }
    }
  });
}

if(Ext.grid.GridView){
  Ext.apply(Ext.grid.GridView.prototype, {
    sortAscText  : "Sorter stigande",
    sortDescText : "Sorter fallande",
    lockText     : "Lås kolonne",
    unlockText   : "Lås opp kolonne",
    columnsText  : "Kolonner"
  });
}

if(Ext.grid.GroupingView){
  Ext.apply(Ext.grid.GroupingView.prototype, {
    emptyGroupText : '(Ingen)',
    groupByText    : 'Grupper etter dette feltet',
    showGroupsText : 'Vis i grupper'
  });
}

if(Ext.grid.PropertyColumnModel){
  Ext.apply(Ext.grid.PropertyColumnModel.prototype, {
    nameText   : "Namn",
    valueText  : "Verdi",
    dateFormat : "d.m.Y"
  });
}

if(Ext.layout.BorderLayout && Ext.layout.BorderLayout.SplitRegion){
  Ext.apply(Ext.layout.BorderLayout.SplitRegion.prototype, {
    splitTip            : "Dra for å endre storleik.",
    collapsibleSplitTip : "Dra for å endre storleik. Dobbelklikk for å skjule."
  });
}


The source code

/*!
 * licensing@extjs.com
 * http://www.extjs.com/license
 */

/**
 * Polish Translations
 * By vbert 17-April-2007
 * Updated by mmar 16-November-2007
 * Encoding: utf-8
 */

Ext.UpdateManager.defaults.indicatorText = '
Wczytywanie danych...
';

if(Ext.View){
   Ext.View.prototype.emptyText = "";
}

if(Ext.grid.GridPanel){
   Ext.grid.GridPanel.prototype.ddText = "{0} wybrano wiersze(y)";
}

if(Ext.TabPanelItem){
   Ext.TabPanelItem.prototype.closeText = "Zamknij zakładkę";
}

if(Ext.form.Field){
   Ext.form.Field.prototype.invalidText = "Wartość tego pola jest niewłaściwa";
}

if(Ext.LoadMask){
    Ext.LoadMask.prototype.msg = "Wczytywanie danych...";
}

Date.monthNames = [
    "Styczeń",
    "Luty",
    "Marzec",
    "Kwiecień",
    "Maj",
    "Czerwiec",
    "Lipiec",
    "Sierpień",
    "Wrzesień",
    "Październik",
    "Listopad",
    "Grudzień"
];

Date.getShortMonthName = function(month) {
  return Date.monthNames[month].substring(0, 3);
};

Date.monthNumbers = {
  Sty : 0,
  Lut : 1,
  Mar : 2,
  Kwi : 3,
  Maj : 4,
  Cze : 5,
  Lip : 6,
  Sie : 7,
  Wrz : 8,
  Paź : 9,
  Lis : 10,
  Gru : 11
};

Date.getMonthNumber = function(name) {
  return Date.monthNumbers[name.substring(0, 1).toUpperCase() + name.substring(1, 3).toLowerCase()];
};

Date.dayNames = [
    "Niedziela",
    "Poniedziałek",
    "Wtorek",
    "Środa",
    "Czwartek",
    "Piątek",
    "Sobota"
];

Date.getShortDayName = function(day) {
    switch(day) {
        case 0: return 'ndz';
        case 1: return 'pon';
        case 2: return 'wt';
        case 3: return 'śr';
        case 4: return 'czw';
        case 5: return 'pt';
        case 6: return 'sob';
                default: return '';
    }
};

if(Ext.MessageBox){
   Ext.MessageBox.buttonText = {
      ok     : "OK",
      cancel : "Anuluj",
      yes    : "Tak",
      no     : "Nie"
   };
}

if(Ext.util.Format){
   Ext.util.Format.date = function(v, format){
      if(!v) return "";
      if(!(v instanceof Date)) v = new Date(Date.parse(v));
      return v.dateFormat(format || "Y-m-d");
   };
}

if(Ext.DatePicker){
    Ext.apply(Ext.DatePicker.prototype, {
        startDay			: 1,
        todayText			: "Dzisiaj",
        minText				: "Data jest wcześniejsza od daty minimalnej",
        maxText				: "Data jest późniejsza od daty maksymalnej",
        disabledDaysText	: "",
        disabledDatesText	: "",
        monthNames			: Date.monthNames,
        dayNames			: Date.dayNames,
        nextText			: "Następny miesiąc (Control+StrzałkaWPrawo)",
        prevText			: "Poprzedni miesiąc (Control+StrzałkaWLewo)",
        monthYearText		: "Wybierz miesiąc (Control+Up/Down aby zmienić rok)",
        todayTip			: "{0} (Spacja)",
        format				: "Y-m-d",
        okText            	: " OK ",
        cancelText        	: "Anuluj",
        startDay          	: 1
    });
}

if(Ext.PagingToolbar){
    Ext.apply(Ext.PagingToolbar.prototype, {
        beforePageText	: "Strona",
        afterPageText	: "z {0}",
        firstText		: "Pierwsza strona",
        prevText		: "Poprzednia strona",
        nextText		: "Następna strona",
        lastText		: "Ostatnia strona",
        refreshText		: "Odśwież",
        displayMsg		: "Wyświetlono {0} - {1} z {2}",
        emptyMsg		: "Brak danych do wyświetlenia"
    });
}

if(Ext.form.TextField){
    Ext.apply(Ext.form.TextField.prototype, {
        minLengthText	: "Minimalna ilość znaków dla tego pola to {0}",
        maxLengthText	: "Maksymalna ilość znaków dla tego pola to {0}",
        blankText		: "To pole jest wymagane",
        regexText		: "",
        emptyText		: null
    });
}

if(Ext.form.NumberField){
    Ext.apply(Ext.form.NumberField.prototype, {
        minText	: "Minimalna wartość dla tego pola to {0}",
        maxText	: "Maksymalna wartość dla tego pola to {0}",
        nanText	: "{0} to nie jest właściwa wartość"
    });
}

if(Ext.form.DateField){
    Ext.apply(Ext.form.DateField.prototype, {
        disabledDaysText	: "Wyłączony",
        disabledDatesText	: "Wyłączony",
        minText				: "Data w tym polu musi być późniejsza od {0}",
        maxText				: "Data w tym polu musi być wcześniejsza od {0}",
        invalidText			: "{0} to nie jest prawidłowa data - prawidłowy format daty {1}",
        format				: "Y-m-d",
        altFormats    	    : "m/d/Y|m-d-y|m-d-Y|m/d|m-d|md|mdy|mdY|d|Y-m-d"
    });
}

if(Ext.form.ComboBox){
    Ext.apply(Ext.form.ComboBox.prototype, {
        loadingText       : "Wczytuję...",
        valueNotFoundText : undefined
    });
}

if(Ext.form.VTypes){
    Ext.apply(Ext.form.VTypes, {
        emailText		: 'To pole wymaga podania adresu e-mail w formacie: "nazwa@domena.pl"',
        urlText			: 'To pole wymaga podania adresu strony www w formacie: "http:/'+'/www.domena.pl"',
        alphaText		: 'To pole wymaga podania tylko liter i _',
        alphanumText	: 'To pole wymaga podania tylko liter, cyfr i _'
    });
}

if(Ext.form.HtmlEditor){
  Ext.apply(Ext.form.HtmlEditor.prototype, {
    createLinkText : 'Wprowadź adres URL strony:',
    buttonTips : {
      bold : {
        title: 'Pogrubienie (Ctrl+B)',
        text: 'Ustaw styl zaznaczonego tekstu na pogrubiony.',
        cls: 'x-html-editor-tip'
      },
      italic : {
        title: 'Kursywa (Ctrl+I)',
        text: 'Ustaw styl zaznaczonego tekstu na kursywę.',
        cls: 'x-html-editor-tip'
      },
      underline : {
        title: 'Podkreślenie (Ctrl+U)',
        text: 'Podkreśl zaznaczony tekst.',
        cls: 'x-html-editor-tip'
      },
      increasefontsize : {
        title: 'Zwiększ czcionkę',
        text: 'Zwiększ rozmiar czcionki.',
        cls: 'x-html-editor-tip'
      },
      decreasefontsize : {
        title: 'Zmniejsz czcionkę',
        text: 'Zmniejsz rozmiar czcionki.',
        cls: 'x-html-editor-tip'
      },
      backcolor : {
        title: 'Wyróżnienie',
        text: 'Zmień kolor wyróżnienia zaznaczonego tekstu.',
        cls: 'x-html-editor-tip'
      },
      forecolor : {
        title: 'Kolor czcionki',
        text: 'Zmień kolor zaznaczonego tekstu.',
        cls: 'x-html-editor-tip'
      },
      justifyleft : {
        title: 'Do lewej',
        text: 'Wyrównaj tekst do lewej.',
        cls: 'x-html-editor-tip'
      },
      justifycenter : {
        title: 'Wyśrodkuj',
        text: 'Wyrównaj tekst do środka.',
        cls: 'x-html-editor-tip'
      },
      justifyright : {
        title: 'Do prawej',
        text: 'Wyrównaj tekst do prawej.',
        cls: 'x-html-editor-tip'
      },
      insertunorderedlist : {
        title: 'Lista wypunktowana',
        text: 'Rozpocznij listę wypunktowaną.',
        cls: 'x-html-editor-tip'
      },
      insertorderedlist : {
        title: 'Lista numerowana',
        text: 'Rozpocznij listę numerowaną.',
        cls: 'x-html-editor-tip'
      },
      createlink : {
        title: 'Hiperłącze',
        text: 'Przekształć zaznaczony tekst w hiperłącze.',
        cls: 'x-html-editor-tip'
      },
      sourceedit : {
        title: 'Edycja źródła',
        text: 'Przełącz w tryb edycji źródła.',
        cls: 'x-html-editor-tip'
      }
    }
  });
}

if(Ext.grid.GridView){
    Ext.apply(Ext.grid.GridView.prototype, {
        sortAscText		: "Sortuj rosnąco",
        sortDescText	: "Sortuj malejąco",
        lockText		: "Zablokuj kolumnę",
        unlockText		: "Odblokuj kolumnę",
        columnsText		: "Kolumny"
    });
}

if(Ext.grid.GroupingView){
  Ext.apply(Ext.grid.GroupingView.prototype, {
    emptyGroupText : '(None)',
    groupByText    : 'Grupuj po tym polu',
    showGroupsText : 'Pokaż w grupach'
  });
}

if(Ext.grid.PropertyColumnModel){
    Ext.apply(Ext.grid.PropertyColumnModel.prototype, {
        nameText	: "Nazwa",
        valueText	: "Wartość",
        dateFormat	: "Y-m-d"
    });
}

if(Ext.layout.BorderLayout && Ext.layout.BorderLayout.SplitRegion){
    Ext.apply(Ext.layout.BorderLayout.SplitRegion.prototype, {
        splitTip			: "Przeciągnij aby zmienić rozmiar.",
        collapsibleSplitTip	: "Przeciągnij aby zmienić rozmiar. Kliknij dwukrotnie aby ukryć."
    });
}


The source code

/*!
 * licensing@extjs.com
 * http://www.extjs.com/license
 */
/*
 * Portuguese/Brazil Translation by Weber Souza
 * 08 April 2007
 * Updated by Allan Brazute Alves (EthraZa)
 * 06 September 2007
 * Adapted to European Portuguese by Helder Batista (hbatista)
 * 31 January 2008
 */

Ext.UpdateManager.defaults.indicatorText = '
Carregando...
';

if(Ext.View){
   Ext.View.prototype.emptyText = "";
}

if(Ext.grid.GridPanel){
   Ext.grid.GridPanel.prototype.ddText = "{0} linha(s) seleccionada(s)";
}

if(Ext.TabPanelItem){
   Ext.TabPanelItem.prototype.closeText = "Fechar";
}

if(Ext.form.Field){
   Ext.form.Field.prototype.invalidText = "O valor para este campo é inválido";
}

if(Ext.LoadMask){
    Ext.LoadMask.prototype.msg = "Carregando...";
}

Date.monthNames = [
   "Janeiro",
   "Fevereiro",
   "Março",
   "Abril",
   "Maio",
   "Junho",
   "Julho",
   "Agosto",
   "Setembro",
   "Outubro",
   "Novembro",
   "Dezembro"
];

Date.dayNames = [
   "Domingo",
   "Segunda",
   "Terça",
   "Quarta",
   "Quinta",
   "Sexta",
   "Sábado"
];

if(Ext.MessageBox){
   Ext.MessageBox.buttonText = {
      ok     : "OK",
      cancel : "Cancelar",
      yes    : "Sim",
      no     : "Não"
   };
}

if(Ext.util.Format){
   Ext.util.Format.date = function(v, format){
      if(!v) return "";
      if(!(v instanceof Date)) v = new Date(Date.parse(v));
      return v.dateFormat(format || "d/m/Y");
   };
}

if(Ext.DatePicker){
   Ext.apply(Ext.DatePicker.prototype, {
      todayText         : "Hoje",
      minText           : "Esta data é anterior à menor data",
      maxText           : "Esta data é posterior à maior data",
      disabledDaysText  : "",
      disabledDatesText : "",
      monthNames        : Date.monthNames,
      dayNames          : Date.dayNames,
      nextText          : 'Próximo Mês (Control+Direita)',
      prevText          : 'Mês Anterior (Control+Esquerda)',
      monthYearText     : 'Escolha um Mês (Control+Cima/Baixo para mover entre os anos)',
      todayTip          : "{0} (Espaço)",
      format            : "d/m/Y",
      okText            : " OK ",
      cancelText        : "Cancelar",
      startDay          : 0
   });
}

if(Ext.PagingToolbar){
   Ext.apply(Ext.PagingToolbar.prototype, {
      beforePageText : "Página",
      afterPageText  : "de {0}",
      firstText      : "Primeira Página",
      prevText       : "Página Anterior",
      nextText       : "Próxima Página",
      lastText       : "Última Página",
      refreshText    : "Atualizar",
      displayMsg     : "{0} à {1} de {2} registo(s)",
      emptyMsg       : 'Sem registos para exibir'
   });
}

if(Ext.form.TextField){
   Ext.apply(Ext.form.TextField.prototype, {
      minLengthText : "O tamanho mínimo para este campo é {0}",
      maxLengthText : "O tamanho máximo para este campo é {0}",
      blankText     : "Este campo é obrigatório.",
      regexText     : "",
      emptyText     : null
   });
}

if(Ext.form.NumberField){
   Ext.apply(Ext.form.NumberField.prototype, {
      minText : "O valor mínimo para este campo é {0}",
      maxText : "O valor máximo para este campo é {0}",
      nanText : "{0} não é um número válido"
   });
}

if(Ext.form.DateField){
   Ext.apply(Ext.form.DateField.prototype, {
      disabledDaysText  : "Desabilitado",
      disabledDatesText : "Desabilitado",
      minText           : "A data deste campo deve ser posterior a {0}",
      maxText           : "A data deste campo deve ser anterior a {0}",
      invalidText       : "{0} não é uma data válida - deve ser usado o formato {1}",
      format            : "d/m/Y"
   });
}

if(Ext.form.ComboBox){
   Ext.apply(Ext.form.ComboBox.prototype, {
      loadingText       : "Carregando...",
      valueNotFoundText : undefined
   });
}

if(Ext.form.VTypes){
   Ext.apply(Ext.form.VTypes, {
      emailText    : 'Este campo deve ser um endereço de e-mail válido, no formato "utilizador@dominio.com"',
      urlText      : 'Este campo deve ser um URL no formato "http:/'+'/www.dominio.com"',
      alphaText    : 'Este campo deve conter apenas letras e _',
      alphanumText : 'Este campo deve conter apenas letras, números e _'
   });
}

if(Ext.form.HtmlEditor){
   Ext.apply(Ext.form.HtmlEditor.prototype, {
     createLinkText : 'Por favor, entre com o URL do link:',
     buttonTips : {
            bold : {
               title: 'Negrito (Ctrl+B)',
               text: 'Deixa o texto seleccionado em negrito.',
               cls: 'x-html-editor-tip'
            },
            italic : {
               title: 'Italico (Ctrl+I)',
               text: 'Deixa o texto seleccionado em italico.',
               cls: 'x-html-editor-tip'
            },
            underline : {
               title: 'Sublinhado (Ctrl+U)',
               text: 'Sublinha o texto seleccionado.',
               cls: 'x-html-editor-tip'
           },
           increasefontsize : {
               title: 'Aumentar Texto',
               text: 'Aumenta o tamanho da fonte.',
               cls: 'x-html-editor-tip'
           },
           decreasefontsize : {
               title: 'Diminuir Texto',
               text: 'Diminui o tamanho da fonte.',
               cls: 'x-html-editor-tip'
           },
           backcolor : {
               title: 'Cor de Fundo',
               text: 'Muda a cor do fundo do texto seleccionado.',
               cls: 'x-html-editor-tip'
           },
           forecolor : {
               title: 'Cor da Fonte',
               text: 'Muda a cor do texto seleccionado.',
               cls: 'x-html-editor-tip'
           },
           justifyleft : {
               title: 'Alinhar à Esquerda',
               text: 'Alinha o texto à esquerda.',
               cls: 'x-html-editor-tip'
           },
           justifycenter : {
               title: 'Centrar Texto',
               text: 'Centra o texto no editor.',
               cls: 'x-html-editor-tip'
           },
           justifyright : {
               title: 'Alinhar à Direita',
               text: 'Alinha o texto à direita.',
               cls: 'x-html-editor-tip'
           },
           insertunorderedlist : {
               title: 'Lista com Marcadores',
               text: 'Inicia uma lista com marcadores.',
               cls: 'x-html-editor-tip'
           },
           insertorderedlist : {
               title: 'Lista Numerada',
               text: 'Inicia uma lista numerada.',
               cls: 'x-html-editor-tip'
           },
           createlink : {
               title: 'Hyperligação',
               text: 'Transforma o texto selecionado num hyperlink.',
               cls: 'x-html-editor-tip'
           },
           sourceedit : {
               title: 'Editar Fonte',
               text: 'Troca para o modo de edição de código fonte.',
               cls: 'x-html-editor-tip'
           }
        }
   });
}

if(Ext.grid.GridView){
   Ext.apply(Ext.grid.GridView.prototype, {
      sortAscText  : "Ordem Ascendente",
      sortDescText : "Ordem Descendente",
      lockText     : "Bloquear Coluna",
      unlockText   : "Desbloquear Coluna",
      columnsText  : "Colunas"
   });
}

if(Ext.grid.PropertyColumnModel){
   Ext.apply(Ext.grid.PropertyColumnModel.prototype, {
      nameText   : "Nome",
      valueText  : "Valor",
      dateFormat : "d/m/Y"
   });
}

if(Ext.layout.BorderLayout && Ext.layout.BorderLayout.SplitRegion){
   Ext.apply(Ext.layout.BorderLayout.SplitRegion.prototype, {
      splitTip            : "Arraste para redimensionar.",
      collapsibleSplitTip : "Arraste para redimensionar. Duplo clique para esconder."
   });
}


The source code

/*!
 * licensing@extjs.com
 * http://www.extjs.com/license
 */

/**
 * Portuguese/Brazil Translation by Weber Souza
 * 08 April 2007
 * Updated by Allan Brazute Alves (EthraZa)
 * 06 September 2007
 * Updated by Leonardo Lima
 * 05 March 2008
 * Updated by Juliano Tarini (jtarini)
 * 22 April 2008
 */

Ext.UpdateManager.defaults.indicatorText = '
Carregando...
';

if(Ext.View){
   Ext.View.prototype.emptyText = "";
}

if(Ext.grid.GridPanel){
   Ext.grid.GridPanel.prototype.ddText = "{0} linha(s) selecionada(s)";
}

if(Ext.TabPanelItem){
   Ext.TabPanelItem.prototype.closeText = "Fechar";
}

if(Ext.form.Field){
   Ext.form.Field.prototype.invalidText = "O valor para este campo é inválido";
}

if(Ext.LoadMask){
    Ext.LoadMask.prototype.msg = "Carregando...";
}

Date.monthNames = [
   "Janeiro",
   "Fevereiro",
   "Março",
   "Abril",
   "Maio",
   "Junho",
   "Julho",
   "Agosto",
   "Setembro",
   "Outubro",
   "Novembro",
   "Dezembro"
];

Date.getShortMonthName = function(month) {
  return Date.monthNames[month].substring(0, 3);
};

Date.monthNumbers = {
  Jan : 0,
  Fev : 1,
  Mar : 2,
  Abr : 3,
  Mai : 4,
  Jun : 5,
  Jul : 6,
  Ago : 7,
  Set : 8,
  Out : 9,
  Nov : 10,
  Dez : 11
};

Date.getMonthNumber = function(name) {
  return Date.monthNumbers[name.substring(0, 1).toUpperCase() + name.substring(1, 3).toLowerCase()];
};

Date.dayNames = [
   "Domingo",
   "Segunda",
   "Terça",
   "Quarta",
   "Quinta",
   "Sexta",
   "Sábado"
];

if(Ext.MessageBox){
   Ext.MessageBox.buttonText = {
      ok     : "OK",
      cancel : "Cancelar",
      yes    : "Sim",
      no     : "Não"
   };
}

if (Ext.util.Format) {
  Ext.util.Format.date = function(v, format){
    if (!v) return "";
    if (!(v instanceof Date)) v = new Date(Date.parse(v));
    return v.dateFormat(format || "d/m/Y");
  };
  Ext.util.Format.brMoney = function(v){
    v = (Math.round((v - 0) * 100)) / 100;
    v = (v == Math.floor(v)) ? v + ".00" : ((v * 10 == Math.floor(v * 10)) ? v + "0" : v);
    v = String(v);
    var ps = v.split('.');
    var whole = ps[0];
    var sub = ps[1] ? '.' + ps[1] : '.00';
    var r = /(\d+)(\d{3})/;
    while (r.test(whole)) {
      whole = whole.replace(r, '$1' + '.' + '$2');
    }
    v = whole + sub;
    if (v.charAt(0) == '-') {
      return '- R$ ' + v.substr(1);
    }
    return "R$ " + v;
  }
}

if(Ext.DatePicker){
   Ext.apply(Ext.DatePicker.prototype, {
      todayText         : "Hoje",
      minText           : "Esta data é anterior a menor data",
      maxText           : "Esta data é posterior a maior data",
      disabledDaysText  : "",
      disabledDatesText : "",
      monthNames        : Date.monthNames,
      dayNames          : Date.dayNames,
      nextText          : 'Próximo Mês (Control+Direita)',
      prevText          : 'Mês Anterior (Control+Esquerda)',
      monthYearText     : 'Escolha um Mês (Control+Cima/Baixo para mover entre os anos)',
      todayTip          : "{0} (Espaço)",
      format            : "d/m/Y",
      okText            : " OK ",
      cancelText        : "Cancelar",
      startDay          : 0
   });
}

if(Ext.PagingToolbar){
   Ext.apply(Ext.PagingToolbar.prototype, {
      beforePageText : "Página",
      afterPageText  : "de {0}",
      firstText      : "Primeira Página",
      prevText       : "Página Anterior",
      nextText       : "Próxima Página",
      lastText       : "Última Página",
      refreshText    : "Atualizar",
      displayMsg     : "{0} à {1} de {2} registro(s)",
      emptyMsg       : 'Sem registros para exibir'
   });
}

if(Ext.form.TextField){
   Ext.apply(Ext.form.TextField.prototype, {
      minLengthText : "O tamanho mínimo para este campo é {0}",
      maxLengthText : "O tamanho máximo para este campo é {0}",
      blankText     : "Este campo é obrigatório.",
      regexText     : "",
      emptyText     : null
   });
}

if(Ext.form.NumberField){
   Ext.apply(Ext.form.NumberField.prototype, {
      minText : "O valor mínimo para este campo é {0}",
      maxText : "O valor máximo para este campo é {0}",
      nanText : "{0} não é um número válido"
   });
}

if(Ext.form.DateField){
   Ext.apply(Ext.form.DateField.prototype, {
      disabledDaysText  : "Desabilitado",
      disabledDatesText : "Desabilitado",
      minText           : "A data deste campo deve ser posterior a {0}",
      maxText           : "A data deste campo deve ser anterior a {0}",
      invalidText       : "{0} não é uma data válida - deve ser informado no formato {1}",
      format            : "d/m/Y"
   });
}

if(Ext.form.ComboBox){
   Ext.apply(Ext.form.ComboBox.prototype, {
      loadingText       : "Carregando...",
      valueNotFoundText : undefined
   });
}

if(Ext.form.VTypes){
   Ext.apply(Ext.form.VTypes, {
      emailText    : 'Este campo deve ser um endereço de e-mail válido, no formato "usuario@dominio.com.br"',
      urlText      : 'Este campo deve ser uma URL no formato "http:/'+'/www.dominio.com.br"',
      alphaText    : 'Este campo deve conter apenas letras e _',
      alphanumText : 'Este campo deve conter apenas letras, números e _'
   });
}

if(Ext.form.HtmlEditor){
   Ext.apply(Ext.form.HtmlEditor.prototype, {
        createLinkText : 'Porfavor, entre com a URL do link:',
        buttonTips : {
            bold : {
               title: 'Negrito (Ctrl+B)',
               text: 'Deixa o texto selecionado em negrito.',
               cls: 'x-html-editor-tip'
            },
            italic : {
               title: 'Italico (Ctrl+I)',
               text: 'Deixa o texto selecionado em italico.',
               cls: 'x-html-editor-tip'
            },
            underline : {
               title: 'Sublinhado (Ctrl+U)',
               text: 'Sublinha o texto selecionado.',
               cls: 'x-html-editor-tip'
           },
           increasefontsize : {
               title: 'Aumentar Texto',
               text: 'Aumenta o tamanho da fonte.',
               cls: 'x-html-editor-tip'
           },
           decreasefontsize : {
               title: 'Diminuir Texto',
               text: 'Diminui o tamanho da fonte.',
               cls: 'x-html-editor-tip'
           },
           backcolor : {
               title: 'Cor de Fundo',
               text: 'Muda a cor do fundo do texto selecionado.',
               cls: 'x-html-editor-tip'
           },
           forecolor : {
               title: 'Cor da Fonte',
               text: 'Muda a cor do texto selecionado.',
               cls: 'x-html-editor-tip'
           },
           justifyleft : {
               title: 'Alinhar à Esquerda',
               text: 'Alinha o texto à esquerda.',
               cls: 'x-html-editor-tip'
           },
           justifycenter : {
               title: 'Centralizar Texto',
               text: 'Centraliza o texto no editor.',
               cls: 'x-html-editor-tip'
           },
           justifyright : {
               title: 'Alinhar à Direita',
               text: 'Alinha o texto à direita.',
               cls: 'x-html-editor-tip'
           },
           insertunorderedlist : {
               title: 'Lista com Marcadores',
               text: 'Inicia uma lista com marcadores.',
               cls: 'x-html-editor-tip'
           },
           insertorderedlist : {
               title: 'Lista Numerada',
               text: 'Inicia uma lista numerada.',
               cls: 'x-html-editor-tip'
           },
           createlink : {
               title: 'Hyperligação',
               text: 'Transforma o texto selecionado em um hyperlink.',
               cls: 'x-html-editor-tip'
           },
           sourceedit : {
               title: 'Editar Fonte',
               text: 'Troca para o modo de edição de código fonte.',
               cls: 'x-html-editor-tip'
           }
        }
   });
}

if(Ext.grid.GridView){
   Ext.apply(Ext.grid.GridView.prototype, {
      sortAscText  : "Ordem Ascendente",
      sortDescText : "Ordem Descendente",
      lockText     : "Bloquear Coluna",
      unlockText   : "Desbloquear Coluna",
      columnsText  : "Colunas"
   });
}

if(Ext.grid.PropertyColumnModel){
   Ext.apply(Ext.grid.PropertyColumnModel.prototype, {
      nameText   : "Nome",
      valueText  : "Valor",
      dateFormat : "d/m/Y"
   });
}

if(Ext.layout.BorderLayout && Ext.layout.BorderLayout.SplitRegion){
   Ext.apply(Ext.layout.BorderLayout.SplitRegion.prototype, {
      splitTip            : "Arraste para redimensionar.",
      collapsibleSplitTip : "Arraste para redimensionar. Duplo clique para esconder."
   });
}


The source code

/*!
 * licensing@extjs.com
 * http://www.extjs.com/license
 */
﻿
/**
 * Portuguese/Portugal (pt_PT) Translation
 * by Nuno Franco da Costa - francodacosta.com
 * translated from ext-lang-en.js
 */

Ext.UpdateManager.defaults.indicatorText = '
A carregar...
';

if(Ext.View){
  Ext.View.prototype.emptyText = "";
}

if(Ext.grid.GridPanel){
  Ext.grid.GridPanel.prototype.ddText = "{0} linha(s) seleccionada(s)";
}

if(Ext.TabPanelItem){
  Ext.TabPanelItem.prototype.closeText = "Fechar aba";
}

if(Ext.LoadMask){
  Ext.LoadMask.prototype.msg = "A carregar...";
}

Date.monthNames = [
  "Janeiro",
  "Fevereiro",
  "Março",
  "Abril",
  "Maio",
  "Junho",
  "Julho",
  "Agosto",
  "Setembro",
  "Outubro",
  "Novembro",
  "Dezembro"
];

Date.getShortMonthName = function(month) {
  return Date.monthNames[month].substring(0, 3);
};

Date.monthNumbers = {
  Jan : 0,
  Feb : 1,
  Mar : 2,
  Apr : 3,
  May : 4,
  Jun : 5,
  Jul : 6,
  Aug : 7,
  Sep : 8,
  Oct : 9,
  Nov : 10,
  Dec : 11
};

Date.getMonthNumber = function(name) {
  return Date.monthNumbers[name.substring(0, 1).toUpperCase() + name.substring(1, 3).toLowerCase()];
};

Date.dayNames = [
  "Domingo",
  "Segunda",
  "Terça",
  "Quarta",
  "Quinta",
  "Sexta",
  "Sabado"
];

Date.getShortDayName = function(day) {
  return Date.dayNames[day].substring(0, 3);
};

if(Ext.MessageBox){
  Ext.MessageBox.buttonText = {
    ok     : "OK",
    cancel : "Cancelar",
    yes    : "Sim",
    no     : "Não"
  };
}

if(Ext.util.Format){
  Ext.util.Format.date = function(v, format){
    if(!v) return "";
    if(!(v instanceof Date)) v = new Date(Date.parse(v));
    return v.dateFormat(format || "Y/m/d");
  };
}

if(Ext.DatePicker){
  Ext.apply(Ext.DatePicker.prototype, {
    todayText         : "Hoje",
    minText           : "A data é anterior ao mínimo definido",
    maxText           : "A data é posterior ao m�ximo definido",
    disabledDaysText  : "",
    disabledDatesText : "",
    monthNames        : Date.monthNames,
    dayNames          : Date.dayNames,
    nextText          : 'Mês Seguinte (Control+Right)',
    prevText          : 'Mês Anterior (Control+Left)',
    monthYearText     : 'Escolha um mês (Control+Up/Down avaçar/recuar anos)',
    todayTip          : "{0} (barra de espa�o)",
    format            : "y/m/d",
    okText            : "*OK*",
    cancelText        : "Cancelar",
    startDay          : 0
  });
}

if(Ext.PagingToolbar){
  Ext.apply(Ext.PagingToolbar.prototype, {
    beforePageText : "Página",
    afterPageText  : "de {0}",
    firstText      : "Primeira Página",
    prevText       : "Página Anterior",
    nextText       : "Pr%oacute;xima Página",
    lastText       : "Última Página",
    refreshText    : "Recaregar",
    displayMsg     : "A mostrar {0} - {1} de {2}",
    emptyMsg       : 'Sem dados para mostrar'
  });
}

if(Ext.form.Field){
  Ext.form.Field.prototype.invalidText = "O valor deste campo é inválido";
}

if(Ext.form.TextField){
  Ext.apply(Ext.form.TextField.prototype, {
    minLengthText : "O comprimento mínimo deste campo &eaute; {0}",
    maxLengthText : "O comprimento máximo deste campo &eaute; {0}",
    blankText     : "Este campo é de preenchimento obrigatório",
    regexText     : "",
    emptyText     : null
  });
}

if(Ext.form.NumberField){
  Ext.apply(Ext.form.NumberField.prototype, {
    minText : "O valor mínimo deste campo &eaute; {0}",
    maxText : "O valor máximo deste campo &eaute; {0}",
    nanText : "{0} não é um numero"
  });
}

if(Ext.form.DateField){
  Ext.apply(Ext.form.DateField.prototype, {
    disabledDaysText  : "Desabilitado",
    disabledDatesText : "Desabilitado",
    minText           : "A data deste campo deve ser posterior a {0}",
    maxText           : "A data deste campo deve ser anterior a {0}",
    invalidText       : "{0} não é uma data válida - deve estar no seguinte formato{1}",
    format            : "y/m/d",
    altFormats        : "m/d/Y|m-d-y|m-d-Y|m/d|m-d|md|mdy|mdY|d|Y-m-d"
  });
}

if(Ext.form.ComboBox){
  Ext.apply(Ext.form.ComboBox.prototype, {
    loadingText       : "A Carregar...",
    valueNotFoundText : undefined
  });
}

if(Ext.form.VTypes){
  Ext.apply(Ext.form.VTypes, {
    emailText    : 'Este campo deve ser um endereço de email no formato "utilizador@dominio.com"',
    urlText      : 'Este campo deve ser um URL no formato "http:/'+'/www.dominio.com"',
    alphaText    : 'Este campo deve conter apenas letras e _',
    alphanumText : 'Este campo deve conter apenas letras, n@uacute;meros e _'
  });
}

if(Ext.form.HtmlEditor){
  Ext.apply(Ext.form.HtmlEditor.prototype, {
    createLinkText : 'Indique o endereço do link:',
    buttonTips : {
      bold : {
        title: 'Negrito (Ctrl+B)',
        text: 'Transforma o texto em Negrito.',
        cls: 'x-html-editor-tip'
      },
      italic : {
        title: 'Italico (Ctrl+I)',
        text: 'Transforma o texto em italico.',
        cls: 'x-html-editor-tip'
      },
      underline : {
        title: 'SUblinhar (Ctrl+U)',
        text: 'Sublinha o texto.',
        cls: 'x-html-editor-tip'
      },
      increasefontsize : {
        title: 'Aumentar texto',
        text: 'Aumenta o tamanho da fonte.',
        cls: 'x-html-editor-tip'
      },
      decreasefontsize : {
        title: 'Encolher texto',
        text: 'Diminui o tamanho da fonte.',
        cls: 'x-html-editor-tip'
      },
      backcolor : {
        title: 'Côr de fundo do texto',
        text: 'Altera a côr de fundo do texto.',
        cls: 'x-html-editor-tip'
      },
      forecolor : {
        title: 'Côr do texo',
        text: 'Altera a aôr do texo.',
        cls: 'x-html-editor-tip'
      },
      justifyleft : {
        title: 'ALinhar à esquerda',
        text: 'ALinha o texto à esquerda.',
        cls: 'x-html-editor-tip'
      },
      justifycenter : {
        title: 'Centrar',
        text: 'Centra o texto.',
        cls: 'x-html-editor-tip'
      },
      justifyright : {
        title: 'ALinhar à direita',
        text: 'ALinha o texto &agravce; direita.',
        cls: 'x-html-editor-tip'
      },
      insertunorderedlist : {
        title: 'Lista',
        text: 'Inicia uma lista.',
        cls: 'x-html-editor-tip'
      },
      insertorderedlist : {
        title: 'Lista Numerada',
        text: 'Inicia uma lista numerada.',
        cls: 'x-html-editor-tip'
      },
      createlink : {
        title: 'Hyperlink',
        text: 'Transforma o texto num hyperlink.',
        cls: 'x-html-editor-tip'
      },
      sourceedit : {
        title: 'Editar código',
        text: 'Alterar para o modo de edição de código.',
        cls: 'x-html-editor-tip'
      }
    }
  });
}

if(Ext.form.BasicForm){
  Ext.form.BasicForm.prototype.waitTitle = "Por favor espere...";
}

if(Ext.grid.GridView){
  Ext.apply(Ext.grid.GridView.prototype, {
    sortAscText  : "Ordenação Crescente",
    sortDescText : "Ordenação Decrescente",
    lockText     : "Fixar Coluna",
    unlockText   : "Libertar Coluna",
    columnsText  : "Colunas"
  });
}

if(Ext.grid.GroupingView){
  Ext.apply(Ext.grid.GroupingView.prototype, {
    emptyGroupText : '(Nenhum)',
    groupByText    : 'Agrupar por este campo',
    showGroupsText : 'Mostrar nos Grupos'
  });
}

if(Ext.grid.PropertyColumnModel){
  Ext.apply(Ext.grid.PropertyColumnModel.prototype, {
    nameText   : "Nome",
    valueText  : "Valor",
    dateFormat : "Y/j/m"
  });
}

if(Ext.layout.BorderLayout && Ext.layout.BorderLayout.SplitRegion){
  Ext.apply(Ext.layout.BorderLayout.SplitRegion.prototype, {
    splitTip            : "Arastar para redimensionar.",
    collapsibleSplitTip : "Arastar para redimensionar. DUplo clique para esconder"
  });
}


The source code

/*!
 * licensing@extjs.com
 * http://www.extjs.com/license
 */

/**
 * Romanian translations for ExtJS 2.1
 * First released by Lucian Lature on 2007-04-24
 * Changed locale for Romania (date formats) as suggested by keypoint
 * on ExtJS forums: http://www.extjs.com/forum/showthread.php?p=129524#post129524
 * Removed some useless parts
 * Changed by: Emil Cazamir, 2008-04-24
 * Fixed some errors left behind
 * Changed by: Emil Cazamir, 2008-09-01
 */

Ext.UpdateManager.defaults.indicatorText = '
Încărcare...
';

if(Ext.grid.GridPanel){
   Ext.grid.GridPanel.prototype.ddText = "{0} rând(uri) selectate";
}

if(Ext.TabPanelItem){
   Ext.TabPanelItem.prototype.closeText = "Închide acest tab";
}

if(Ext.form.Field){
   Ext.form.Field.prototype.invalidText = "Valoarea acestui câmp este invalidă";
}

if(Ext.LoadMask){
    Ext.LoadMask.prototype.msg = "Încărcare...";
}

Date.monthNames = [
   "Ianuarie",
   "Februarie",
   "Martie",
   "Aprilie",
   "Mai",
   "Iunie",
   "Iulie",
   "August",
   "Septembrie",
   "Octombrie",
   "Noiembrie",
   "Decembrie"
];

Date.getShortMonthName = function(month) {
  return Date.monthNames[month].substring(0, 3);
};

Date.monthNumbers = {
  Ian : 0,
  Feb : 1,
  Mar : 2,
  Apr : 3,
  Mai : 4,
  Iun : 5,
  Iul : 6,
  Aug : 7,
  Sep : 8,
  Oct : 9,
  Noi : 10,
  Dec : 11
};

Date.getMonthNumber = function(name) {
  return Date.monthNumbers[name.substring(0, 1).toUpperCase() + name.substring(1, 3).toLowerCase()];
};

Date.dayNames = [
   "Duminică",
   "Luni",
   "Marţi",
   "Miercuri",
   "Joi",
   "Vineri",
   "Sâmbătă"
];

Date.getShortDayName = function(day) {
  return Date.dayNames[day].substring(0, 3);
};

if(Ext.MessageBox){
   Ext.MessageBox.buttonText = {
      ok     : "OK",
      cancel : "Renunţă",
      yes    : "Da",
      no     : "Nu"
   };
}

if(Ext.util.Format){
   Ext.util.Format.date = function(v, format){
      if(!v) return "";
      if(!(v instanceof Date)) v = new Date(Date.parse(v));
      return v.dateFormat(format || "d.m.Y");
   };
}

if(Ext.DatePicker){
  Ext.apply(Ext.DatePicker.prototype, {
    todayText         : "Astăzi",
    minText           : "Această dată este anterioară datei minime",
    maxText           : "Această dată este ulterioară datei maxime",
    disabledDaysText  : "",
    disabledDatesText : "",
    monthNames        : Date.monthNames,
    dayNames          : Date.dayNames,
    nextText          : 'Luna următoare (Control+Dreapta)',
    prevText          : 'Luna precedentă (Control+Stânga)',
    monthYearText     : 'Alege o lună (Control+Sus/Jos pentru a parcurge anii)',
    todayTip          : "{0} (Bara spațiu)",
    format            : "d.m.Y",
    okText            : " OK ",
    cancelText        : "Renunță",
    startDay          : 0
  });
}

if(Ext.PagingToolbar){
  Ext.apply(Ext.PagingToolbar.prototype, {
    beforePageText : "Pagina",
    afterPageText  : "din {0}",
    firstText      : "Prima pagină",
    prevText       : "Pagina anterioară",
    nextText       : "Pagina următoare",
    lastText       : "Ultima pagină",
    refreshText    : "Împrospătează",
    displayMsg     : "Afișare înregistrările {0} - {1} din {2}",
    emptyMsg       : 'Nu sunt date de afișat'
  });
}

if(Ext.form.TextField){
   Ext.apply(Ext.form.TextField.prototype, {
      minLengthText : "Lungimea minimă pentru acest câmp este de {0}",
      maxLengthText : "Lungimea maximă pentru acest câmp este {0}",
      blankText     : "Acest câmp este obligatoriu",
      regexText     : "",
      emptyText     : null
   });
}

if(Ext.form.NumberField){
   Ext.apply(Ext.form.NumberField.prototype, {
      minText : "Valoarea minimă permisă a acestui câmp este {0}",
      maxText : "Valaorea maximă permisă a acestui câmp este {0}",
      nanText : "{0} nu este un număr valid"
   });
}

if(Ext.form.DateField){
  Ext.apply(Ext.form.DateField.prototype, {
    disabledDaysText  : "Indisponibil",
    disabledDatesText : "Indisponibil",
    minText           : "Data din această casetă trebuie să fie după {0}",
    maxText           : "Data din această casetă trebuie să fie inainte de {0}",
    invalidText       : "{0} nu este o dată validă, trebuie să fie în formatul {1}",
    format            : "d.m.Y",
    altFormats        : "d-m-Y|d.m.y|d-m-y|d.m|d-m|dm|d|Y-m-d"
  });
}

if(Ext.form.ComboBox){
  Ext.apply(Ext.form.ComboBox.prototype, {
    loadingText       : "Încărcare...",
    valueNotFoundText : undefined
  });
}

if(Ext.form.VTypes){
   Ext.apply(Ext.form.VTypes, {
      emailText    : 'Acest câmp trebuie să conţină o adresă de e-mail în formatul "user@domeniu.com"',
      urlText      : 'Acest câmp trebuie să conţină o adresă URL în formatul "http:/'+'/www.domeniu.com"',
      alphaText    : 'Acest câmp trebuie să conţină doar litere şi _',
      alphanumText : 'Acest câmp trebuie să conţină doar litere, cifre şi _'
   });
}

if(Ext.form.HtmlEditor){
  Ext.apply(Ext.form.HtmlEditor.prototype, {
    createLinkText : 'Vă rugăm introduceti un URL pentru această legătură web:',
    buttonTips : {
      bold : {
        title: 'Îngroşat (Ctrl+B)',
        text: 'Îngroşati caracterele textului selectat.',
        cls: 'x-html-editor-tip'
      },
      italic : {
        title: 'Înclinat (Ctrl+I)',
        text: 'Înclinaţi caracterele textului selectat.',
        cls: 'x-html-editor-tip'
      },
      underline : {
        title: 'Subliniat (Ctrl+U)',
        text: 'Subliniaţi caracterele textului selectat.',
        cls: 'x-html-editor-tip'
      },
      increasefontsize : {
        title: 'Mărit',
        text: 'Măreşte dimensiunea fontului.',
        cls: 'x-html-editor-tip'
      },
      decreasefontsize : {
        title: 'Micşorat',
        text: 'Micşorează dimensiunea textului.',
        cls: 'x-html-editor-tip'
      },
      backcolor : {
        title: 'Culoarea fundalului',
        text: 'Schimbă culoarea fundalului pentru textul selectat.',
        cls: 'x-html-editor-tip'
      },
      forecolor : {
        title: 'Culoarea textului',
        text: 'Schimbă culoarea textului selectat.',
        cls: 'x-html-editor-tip'
      },
      justifyleft : {
        title: 'Aliniat la stânga',
        text: 'Aliniază textul la stânga.',
        cls: 'x-html-editor-tip'
      },
      justifycenter : {
        title: 'Centrat',
        text: 'Centrează textul în editor.',
        cls: 'x-html-editor-tip'
      },
      justifyright : {
        title: 'Aliniat la dreapta',
        text: 'Aliniază textul la dreapta.',
        cls: 'x-html-editor-tip'
      },
      insertunorderedlist : {
        title: 'Listă cu puncte',
        text: 'Inserează listă cu puncte.',
        cls: 'x-html-editor-tip'
      },
      insertorderedlist : {
        title: 'Listă numerotată',
        text: 'Inserează o listă numerotată.',
        cls: 'x-html-editor-tip'
      },
      createlink : {
        title: 'Legătură web',
        text: 'Transformă textul selectat în legătură web.',
        cls: 'x-html-editor-tip'
      },
      sourceedit : {
        title: 'Editare sursă',
        text: 'Schimbă pe modul de editare al codului HTML.',
        cls: 'x-html-editor-tip'
      }
    }
  });
}

if(Ext.grid.GridView){
   Ext.apply(Ext.grid.GridView.prototype, {
      sortAscText  : "Sortare ascendentă",
      sortDescText : "Sortare descendentă",
      lockText     : "Blochează coloana",
      unlockText   : "Deblochează coloana",
      columnsText  : "Coloane"
   });
}

if(Ext.grid.GroupingView){
  Ext.apply(Ext.grid.GroupingView.prototype, {
    emptyGroupText : '(Fără)',
    groupByText    : 'Grupează după această coloană',
    showGroupsText : 'Afișează grupat'
  });
}

if(Ext.grid.PropertyColumnModel){
  Ext.apply(Ext.grid.PropertyColumnModel.prototype, {
    nameText   : "Nume",
    valueText  : "Valoare",
    dateFormat : "d.m.Y"
  });
}

if(Ext.layout.BorderLayout && Ext.layout.BorderLayout.SplitRegion){
   Ext.apply(Ext.layout.BorderLayout.SplitRegion.prototype, {
      splitTip            : "Trage pentru redimensionare.",
      collapsibleSplitTip : "Trage pentru redimensionare. Dublu-click pentru ascundere."
   });
}


The source code

/*!
 * licensing@extjs.com
 * http://www.extjs.com/license
 */
﻿/*
 * Russian translation
 * By ZooKeeper (utf-8 encoding)
 * 6 November 2007
 */

Ext.UpdateManager.defaults.indicatorText = '
Идет загрузка...
';

if(Ext.View){
  Ext.View.prototype.emptyText = "";
}

if(Ext.grid.GridPanel){
  Ext.grid.GridPanel.prototype.ddText = "{0} выбранных строк";
}

if(Ext.TabPanelItem){
  Ext.TabPanelItem.prototype.closeText = "Закрыть эту вкладку";
}

if(Ext.form.Field){
  Ext.form.Field.prototype.invalidText = "Значение в этом поле неверное";
}

if(Ext.LoadMask){
  Ext.LoadMask.prototype.msg = "Загрузка...";
}

Date.monthNames = [
    "Январь",
    "Февраль",
    "Март",
    "Апрель",
    "Май",
    "Июнь",
    "Июль",
    "Август",
    "Сентябрь",
    "Октябрь",
    "Ноябрь",
    "Декабрь"
];

Date.shortMonthNames = [
  "Янв",
  "Февр",
  "Март",
  "Апр",
  "Май",
  "Июнь",
  "Июль",
  "Авг",
  "Сент",
  "Окт",
  "Нояб",
  "Дек"
];

Date.getShortMonthName = function(month) {
  return Date.shortMonthNames[month];
};

Date.monthNumbers = {
  'Янв': 0,
  'Фев': 1,
  'Мар': 2,
  'Апр': 3,
  'Май': 4,
  'Июн': 5,
  'Июл': 6,
  'Авг': 7,
  'Сен': 8,
  'Окт': 9,
  'Ноя': 10,
  'Дек': 11
};

Date.getMonthNumber = function(name) {
  return Date.monthNumbers[name.substring(0, 1).toUpperCase() + name.substring(1, 3).toLowerCase()];
};

Date.dayNames = [
  "Воскресенье",
  "Понедельник",
  "Вторник",
  "Среда",
  "Четверг",
  "Пятница",
  "Суббота"
];

Date.getShortDayName = function(day) {
  return Date.dayNames[day].substring(0, 3);
};

if(Ext.MessageBox){
  Ext.MessageBox.buttonText = {
    ok     : "OK",
    cancel : "Отмена",
    yes    : "Да",
    no     : "Нет"
  };
}

if(Ext.util.Format){
  Ext.util.Format.date = function(v, format){
    if(!v) return "";
    if(!(v instanceof Date)) v = new Date(Date.parse(v));
    return v.dateFormat(format || "d.m.Y");
  };
}

if(Ext.DatePicker){
  Ext.apply(Ext.DatePicker.prototype, {
    todayText          : "Сегодня",
    minText            : "Эта дата раньше минимальной даты",
    maxText            : "Эта дата позже максимальной даты",
    disabledDaysText   : "",
    disabledDatesText  : "",
    monthNames         : Date.monthNames,
    dayNames           : Date.dayNames,
    nextText           : 'Следующий месяц (Control+Вправо)',
    prevText           : 'Предыдущий месяц (Control+Влево)',
    monthYearText      : 'Выбор месяца (Control+Вверх/Вниз для выбора года)',
    todayTip           : "{0} (Пробел)",
    format             : "d.m.y",
    okText             : " OK ",
    cancelText         : "Отмена",
    startDay           : 1
  });
}

if(Ext.PagingToolbar){
  Ext.apply(Ext.PagingToolbar.prototype, {
    beforePageText : "Страница",
    afterPageText  : "из {0}",
    firstText      : "Первая страница",
    prevText       : "Предыдущая страница",
    nextText       : "Следующая страница",
    lastText       : "Последняя страница",
    refreshText    : "Обновить",
    displayMsg     : "Отображаются записи с {0} по {1}, всего {2}",
    emptyMsg       : 'Нет данных для отображения'
  });
}

if(Ext.form.TextField){
  Ext.apply(Ext.form.TextField.prototype, {
    minLengthText : "Минимальная длина этого поля {0}",
    maxLengthText : "Максимальная длина этого поля {0}",
    blankText     : "Это поле обязательно для заполнения",
    regexText     : "",
    emptyText     : null
  });
}

if(Ext.form.NumberField){
  Ext.apply(Ext.form.NumberField.prototype, {
    minText : "Значение этого поля не может быть меньше {0}",
    maxText : "Значение этого поля не может быть больше {0}",
    nanText : "{0} не является числом"
  });
}

if(Ext.form.DateField){
  Ext.apply(Ext.form.DateField.prototype, {
    disabledDaysText  : "Не доступно",
    disabledDatesText : "Не доступно",
    minText           : "Дата в этом поле должна быть позде {0}",
    maxText           : "Дата в этом поле должна быть раньше {0}",
    invalidText       : "{0} не является правильной датой - дата должна быть указана в формате {1}",
    format            : "d.m.y",
    altFormats        : "d.m.y|d/m/Y|d-m-y|d-m-Y|d/m|d-m|dm|dmy|dmY|d|Y-m-d"
  });
}

if(Ext.form.ComboBox){
  Ext.apply(Ext.form.ComboBox.prototype, {
    loadingText       : "Загрузка...",
    valueNotFoundText : undefined
  });
}

if(Ext.form.VTypes){
  Ext.apply(Ext.form.VTypes, {
    emailText     : 'Это поле должно содержать адрес электронной почты в формате "user@example.com"',
    urlText       : 'Это поле должно содержать URL в формате "http:/'+'/www.example.com"',
    alphaText     : 'Это поле должно содержать только латинские буквы и символ подчеркивания "_"',
    alphanumText  : 'Это поле должно содержать только латинские буквы, цифры и символ подчеркивания "_"'
  });
}

if(Ext.form.HtmlEditor){
  Ext.apply(Ext.form.HtmlEditor.prototype, {
    createLinkText : 'Пожалуйста введите адрес:',
    buttonTips : {
      bold : {
        title: 'Полужирный (Ctrl+B)',
        text: 'Применение полужирного начертания к выделенному тексту.',
        cls: 'x-html-editor-tip'
      },
      italic : {
        title: 'Курсив (Ctrl+I)',
        text: 'Применение курсивного начертания к выделенному тексту.',
        cls: 'x-html-editor-tip'
      },
      underline : {
        title: 'Подчёркнутый (Ctrl+U)',
        text: 'Подчёркивание выделенного текста.',
        cls: 'x-html-editor-tip'
      },
      increasefontsize : {
        title: 'Увеличить размер',
        text: 'Увеличение размера шрифта.',
        cls: 'x-html-editor-tip'
      },
      decreasefontsize : {
        title: 'Уменьшить размер',
        text: 'Уменьшение размера шрифта.',
        cls: 'x-html-editor-tip'
      },
      backcolor : {
        title: 'Заливка',
        text: 'Изменение цвета фона для выделенного текста или абзаца.',
        cls: 'x-html-editor-tip'
      },
      forecolor : {
        title: 'Цвет текста',
        text: 'Измение цвета текста.',
        cls: 'x-html-editor-tip'
      },
      justifyleft : {
        title: 'Выровнять текст по левому краю',
        text: 'Выровнивание текста по левому краю.',
        cls: 'x-html-editor-tip'
      },
      justifycenter : {
        title: 'По центру',
        text: 'Выровнивание текста по центру.',
        cls: 'x-html-editor-tip'
      },
      justifyright : {
        title: 'Выровнять текст по правому краю',
        text: 'Выровнивание текста по правому краю.',
        cls: 'x-html-editor-tip'
      },
      insertunorderedlist : {
        title: 'Маркеры',
        text: 'Начать маркированный список.',
        cls: 'x-html-editor-tip'
      },
      insertorderedlist : {
        title: 'Нумерация',
        text: 'Начать нумернованный список.',
        cls: 'x-html-editor-tip'
      },
      createlink : {
        title: 'Вставить гиперссылку',
        text: 'Создание ссылки из выделенного текста.',
        cls: 'x-html-editor-tip'
      },
      sourceedit : {
        title: 'Исходный код',
        text: 'Переключиться на исходный код.',
        cls: 'x-html-editor-tip'
      }
    }
  });
}

if(Ext.form.BasicForm){
  Ext.form.BasicForm.prototype.waitTitle = "Пожалуйста подождите...";
}

if(Ext.grid.GridView){
  Ext.apply(Ext.grid.GridView.prototype, {
    sortAscText  : "Сортировать по возрастанию",
    sortDescText : "Сортировать по убыванию",
    lockText     : "Закрепить столбец",
    unlockText   : "Снять закрепление столбца",
    columnsText  : "Столбцы"
  });
}

if(Ext.grid.GroupingView){
  Ext.apply(Ext.grid.GroupingView.prototype, {
    emptyGroupText : '(Пусто)',
    groupByText    : 'Группировать по этому полю',
    showGroupsText : 'Отображать по группам'
  });
}

if(Ext.grid.PropertyColumnModel){
  Ext.apply(Ext.grid.PropertyColumnModel.prototype, {
    nameText   : "Название",
    valueText  : "Значение",
    dateFormat : "d.m.Y"
  });
}

if(Ext.SplitLayoutRegion){
  Ext.apply(Ext.SplitLayoutRegion.prototype, {
    splitTip            : "Тяните для изменения размера.",
    collapsibleSplitTip : "Тяните для изменения размера. Двойной щелчок спрячет панель."
  });
}

if(Ext.layout.BorderLayout && Ext.layout.BorderLayout.SplitRegion){
  Ext.apply(Ext.layout.BorderLayout.SplitRegion.prototype, {
    splitTip            : "Тяните для изменения размера.",
    collapsibleSplitTip : "Тяните для изменения размера. Двойной щелчок спрячет панель."
  });
}


The source code

/*!
 * licensing@extjs.com
 * http://www.extjs.com/license
 */

/**
 * List compiled by mystix on the extjs.com forums.
 * Thank you Mystix!
 */

 /*  Slovak Translation by Michal Thomka
  *  14 April 2007
  */

Ext.UpdateManager.defaults.indicatorText = '
Nahrávam...
';

if(Ext.View){
   Ext.View.prototype.emptyText = "";
}

if(Ext.grid.GridPanel){
   Ext.grid.GridPanel.prototype.ddText = "{0} označených riadkov";
}

if(Ext.TabPanelItem){
   Ext.TabPanelItem.prototype.closeText = "Zavrieť túto záložku";
}

if(Ext.form.Field){
   Ext.form.Field.prototype.invalidText = "Hodnota v tomto poli je nesprávna";
}

if(Ext.LoadMask){
    Ext.LoadMask.prototype.msg = "Nahrávam...";
}

Date.monthNames = [
   "Január",
   "Február",
   "Marec",
   "Apríl",
   "Máj",
   "Jún",
   "Júl",
   "August",
   "September",
   "Október",
   "November",
   "December"
];

Date.dayNames = [
   "Nedeľa",
   "Pondelok",
   "Utorok",
   "Streda",
   "Štvrtok",
   "Piatok",
   "Sobota"
];

if(Ext.MessageBox){
   Ext.MessageBox.buttonText = {
      ok     : "OK",
      cancel : "Zrušiť",
      yes    : "Áno",
      no     : "Nie"
   };
}

if(Ext.util.Format){
   Ext.util.Format.date = function(v, format){
      if(!v) return "";
      if(!(v instanceof Date)) v = new Date(Date.parse(v));
      return v.dateFormat(format || "d.m.Y");
   };
}

if(Ext.DatePicker){
   Ext.apply(Ext.DatePicker.prototype, {
      todayText         : "Dnes",
      minText           : "Tento dátum je menší ako minimálny možný dátum",
      maxText           : "Tento dátum je väčší ako maximálny možný dátum",
      disabledDaysText  : "",
      disabledDatesText : "",
      monthNames        : Date.monthNames,
      dayNames          : Date.dayNames,
      nextText          : 'Ďalší Mesiac (Control+Doprava)',
      prevText          : 'Predch. Mesiac (Control+Doľava)',
      monthYearText     : 'Vyberte Mesiac (Control+Hore/Dole pre posun rokov)',
      todayTip          : "{0} (Medzerník)",
      format            : "d.m.Y"
   });
}

if(Ext.PagingToolbar){
   Ext.apply(Ext.PagingToolbar.prototype, {
      beforePageText : "Strana",
      afterPageText  : "z {0}",
      firstText      : "Prvá Strana",
      prevText       : "Predch. Strana",
      nextText       : "Ďalšia Strana",
      lastText       : "Posledná strana",
      refreshText    : "Obnoviť",
      displayMsg     : "Zobrazujem {0} - {1} z {2}",
      emptyMsg       : 'iadne dáta'
   });
}

if(Ext.form.TextField){
   Ext.apply(Ext.form.TextField.prototype, {
      minLengthText : "Minimálna dĺžka pre toto pole je {0}",
      maxLengthText : "Maximálna dĺžka pre toto pole je {0}",
      blankText     : "Toto pole je povinné",
      regexText     : "",
      emptyText     : null
   });
}

if(Ext.form.NumberField){
   Ext.apply(Ext.form.NumberField.prototype, {
      minText : "Minimálna hodnota pre toto pole je {0}",
      maxText : "Maximálna hodnota pre toto pole je {0}",
      nanText : "{0} je nesprávne číslo"
   });
}

if(Ext.form.DateField){
   Ext.apply(Ext.form.DateField.prototype, {
      disabledDaysText  : "Zablokované",
      disabledDatesText : "Zablokované",
      minText           : "Dátum v tomto poli musí byť až po {0}",
      maxText           : "Dátum v tomto poli musí byť pred {0}",
      invalidText       : "{0} nie je správny dátum - musí byť vo formáte {1}",
      format            : "d.m.Y"
   });
}

if(Ext.form.ComboBox){
   Ext.apply(Ext.form.ComboBox.prototype, {
      loadingText       : "Nahrávam...",
      valueNotFoundText : undefined
   });
}

if(Ext.form.VTypes){
   Ext.apply(Ext.form.VTypes, {
      emailText    : 'Toto pole musí byť e-mailová adresa vo formáte "user@example.com"',
      urlText      : 'Toto pole musí byť URL vo formáte "http:/'+'/www.example.com"',
      alphaText    : 'Toto pole može obsahovať iba písmená a znak _',
      alphanumText : 'Toto pole može obsahovať iba písmená, čísla a znak _'
   });
}

if(Ext.grid.GridView){
   Ext.apply(Ext.grid.GridView.prototype, {
      sortAscText  : "Zoradiť vzostupne",
      sortDescText : "Zoradiť zostupne",
      lockText     : "Zamknúť stľpec",
      unlockText   : "Odomknúť stľpec",
      columnsText  : "Stľpce"
   });
}

if(Ext.grid.PropertyColumnModel){
   Ext.apply(Ext.grid.PropertyColumnModel.prototype, {
      nameText   : "Názov",
      valueText  : "Hodnota",
      dateFormat : "d.m.Y"
   });
}

if(Ext.layout.BorderLayout && Ext.layout.BorderLayout.SplitRegion){
   Ext.apply(Ext.layout.BorderLayout.SplitRegion.prototype, {
      splitTip            : "Potiahnite pre zmenu rozmeru",
      collapsibleSplitTip : "Potiahnite pre zmenu rozmeru. Dvojklikom schováte."
   });
}


The source code

/*!
 * licensing@extjs.com
 * http://www.extjs.com/license
 */

/**
 * Slovenian translation by Matjaž (UTF-8 encoding)
 * 25 April 2007
 */

Ext.UpdateManager.defaults.indicatorText = '
Nalagam...
';

if(Ext.View){
   Ext.View.prototype.emptyText = "";
}

if(Ext.grid.GridPanel){
   Ext.grid.GridPanel.prototype.ddText = "{0} izbranih vrstic";
}

if(Ext.TabPanelItem){
   Ext.TabPanelItem.prototype.closeText = "Zapri zavihek";
}

if(Ext.form.Field){
   Ext.form.Field.prototype.invalidText = "Neveljavna vrednost";
}

if(Ext.LoadMask){
    Ext.LoadMask.prototype.msg = "Nalagam...";
}

Date.monthNames = [
   "Januar",
   "Februar",
   "Marec",
   "April",
   "Maj",
   "Junij",
   "Julij",
   "Avgust",
   "September",
   "Oktober",
   "November",
   "December"
];

Date.dayNames = [
   "Nedelja",
   "Ponedeljek",
   "Torek",
   "Sreda",
   "Četrtek",
   "Petek",
   "Sobota"
];

if(Ext.MessageBox){
   Ext.MessageBox.buttonText = {
      ok     : "V redu",
      cancel : "Prekliči",
      yes    : "Da",
      no     : "Ne"
   };
}

if(Ext.util.Format){
   Ext.util.Format.date = function(v, format){
      if(!v) return "";
      if(!(v instanceof Date)) v = new Date(Date.parse(v));
      return v.dateFormat(format || "d.m.Y");
   };
}

if(Ext.DatePicker){
   Ext.apply(Ext.DatePicker.prototype, {
      todayText         : "Danes",
      minText           : "Navedeni datum je pred spodnjim datumom",
      maxText           : "Navedeni datum je za zgornjim datumom",
      disabledDaysText  : "",
      disabledDatesText : "",
      monthNames	: Date.monthNames,
      dayNames		: Date.dayNames,
      nextText          : 'Naslednji mesec (Control+Desno)',
      prevText          : 'Prejšnji mesec (Control+Levo)',
      monthYearText     : 'Izberite mesec (Control+Gor/Dol za premik let)',
      todayTip          : "{0} (Preslednica)",
      format            : "d.m.y",
      startDay          : 1
   });
}

if(Ext.PagingToolbar){
   Ext.apply(Ext.PagingToolbar.prototype, {
      beforePageText : "Stran",
      afterPageText  : "od {0}",
      firstText      : "Prva stran",
      prevText       : "Prejšnja stran",
      nextText       : "Naslednja stran",
      lastText       : "Zadnja stran",
      refreshText    : "Osveži",
      displayMsg     : "Prikazujem {0} - {1} od {2}",
      emptyMsg       : 'Ni podatkov za prikaz'
   });
}

if(Ext.form.TextField){
   Ext.apply(Ext.form.TextField.prototype, {
      minLengthText : "Minimalna dolžina tega polja je {0}",
      maxLengthText : "Maksimalna dolžina tega polja je {0}",
      blankText     : "To polje je obvezno",
      regexText     : "",
      emptyText     : null
   });
}

if(Ext.form.NumberField){
   Ext.apply(Ext.form.NumberField.prototype, {
      minText : "Minimalna vrednost tega polja je {0}",
      maxText : "Maksimalna vrednost tega polja je {0}",
      nanText : "{0} ni veljavna številka"
   });
}

if(Ext.form.DateField){
   Ext.apply(Ext.form.DateField.prototype, {
      disabledDaysText  : "Onemogočen",
      disabledDatesText : "Onemogočen",
      minText           : "Datum mora biti po {0}",
      maxText           : "Datum mora biti pred {0}",
      invalidText       : "{0} ni veljaven datum - mora biti v tem formatu {1}",
      format            : "d.m.y"
   });
}

if(Ext.form.ComboBox){
   Ext.apply(Ext.form.ComboBox.prototype, {
      loadingText       : "Nalagam...",
      valueNotFoundText : undefined
   });
}

if(Ext.form.VTypes){
   Ext.apply(Ext.form.VTypes, {
      emailText    : 'To polje je e-mail naslov formata "ime@domena.si"',
      urlText      : 'To polje je URL naslov formata "http:/'+'/www.domena.si"',
      alphaText    : 'To polje lahko vsebuje samo črke in _',
      alphanumText : 'To polje lahko vsebuje samo črke, številke in _'
   });
}

if(Ext.grid.GridView){
   Ext.apply(Ext.grid.GridView.prototype, {
      sortAscText  : "Sortiraj naraščajoče",
      sortDescText : "Sortiraj padajoče",
      lockText     : "Zakleni stolpec",
      unlockText   : "Odkleni stolpec",
      columnsText  : "Stolpci"
   });
}

if(Ext.grid.PropertyColumnModel){
   Ext.apply(Ext.grid.PropertyColumnModel.prototype, {
      nameText   : "Ime",
      valueText  : "Vrednost",
      dateFormat : "j.m.Y"
   });
}

if(Ext.layout.BorderLayout && Ext.layout.BorderLayout.SplitRegion){
   Ext.apply(Ext.layout.BorderLayout.SplitRegion.prototype, {
      splitTip            : "Potegni za razširitev.",
      collapsibleSplitTip : "Potegni za razširitev. Dvojni klik, če želite skriti."
   });
}


The source code

/*!
 * licensing@extjs.com
 * http://www.extjs.com/license
 */
/*
 * Serbian Latin Translation
 * by Atila Hajnal (latin, utf8 encoding)
 * sr
 * 14 Sep 2007
 */

Ext.UpdateManager.defaults.indicatorText = '
Učitavam...
';

if(Ext.View){
   Ext.View.prototype.emptyText = "Ne postoji ni jedan slog";
}

if(Ext.grid.GridPanel){
   Ext.grid.GridPanel.prototype.ddText = "{0} izabranih redova";
}

if(Ext.TabPanelItem){
   Ext.TabPanelItem.prototype.closeText = "Zatvori оvu »karticu«";
}

if(Ext.form.Field){
   Ext.form.Field.prototype.invalidText = "Unešena vrednost nije pravilna";
}

if(Ext.LoadMask){
    Ext.LoadMask.prototype.msg = "Učitavam...";
}

Date.monthNames = [
   "Januar",
   "Februar",
   "Mart",
   "April",
   "Мај",
   "Jun",
   "Јul",
   "Avgust",
   "Septembar",
   "Oktobar",
   "Novembar",
   "Decembar"
];

Date.dayNames = [
   "Nedelja",
   "Ponedeljak",
   "Utorak",
   "Sreda",
   "Četvrtak",
   "Petak",
   "Subota"
];

if(Ext.MessageBox){
   Ext.MessageBox.buttonText = {
      ok     : "U redu",
      cancel : "Odustani",
      yes    : "Da",
      no     : "Ne"
   };
}

if(Ext.util.Format){
   Ext.util.Format.date = function(v, format){
      if(!v) return "";
      if(!(v instanceof Date)) v = new Date(Date.parse(v));
      return v.dateFormat(format || "d.m.Y");
   };
}

if(Ext.DatePicker){
   Ext.apply(Ext.DatePicker.prototype, {
      todayText         : "Danas",
      minText           : "Datum је ispred najmanjeg dozvoljenog datuma",
      maxText           : "Datum је nakon najvećeg dozvoljenog datuma",
      disabledDaysText  : "",
      disabledDatesText : "",
      monthNames	: Date.monthNames,
      dayNames		: Date.dayNames,
      nextText          : 'Sledeći mesec (Control+Desno)',
      prevText          : 'Prethodni mesec (Control+Levo)',
      monthYearText     : 'Izaberite mesec (Control+Gore/Dole za izbor godine)',
      todayTip          : "{0} (Razmaknica)",
      format            : "d.m.y",
      startDay 		 : 1
   });
}

if(Ext.PagingToolbar){
   Ext.apply(Ext.PagingToolbar.prototype, {
      beforePageText : "Strana",
      afterPageText  : "od {0}",
      firstText      : "Prva strana",
      prevText       : "Prethodna strana",
      nextText       : "Sledeća strana",
      lastText       : "Poslednja strana",
      refreshText    : "Osveži",
      displayMsg     : "Prikazana {0} - {1} od {2}",
      emptyMsg       : 'Nemam šta prikazati'
   });
}

if(Ext.form.TextField){
   Ext.apply(Ext.form.TextField.prototype, {
      minLengthText : "Minimalna dužina ovog polja је {0}",
      maxLengthText : "Maksimalna dužina ovog polja је {0}",
      blankText     : "Polje је obavezno",
      regexText     : "",
      emptyText     : null
   });
}

if(Ext.form.NumberField){
   Ext.apply(Ext.form.NumberField.prototype, {
      minText : "Minimalna vrednost u polju је {0}",
      maxText : "Maksimalna vrednost u polju је {0}",
      nanText : "{0} nije pravilan broj"
   });
}

if(Ext.form.DateField){
   Ext.apply(Ext.form.DateField.prototype, {
      disabledDaysText  : "Pasivno",
      disabledDatesText : "Pasivno",
      minText           : "Datum u ovom polju mora biti nakon {0}",
      maxText           : "Datum u ovom polju mora biti pre {0}",
      invalidText       : "{0} nije pravilan datum - zahtevani oblik je {1}",
      format            : "d.m.y",
      altFormats        : "d.m.y|d/m/Y|d-m-y|d-m-Y|d/m|d-m|dm|dmy|dmY|d|Y-m-d"
   });
}

if(Ext.form.ComboBox){
   Ext.apply(Ext.form.ComboBox.prototype, {
      loadingText       : "Učitavam...",
      valueNotFoundText : undefined
   });
}

if(Ext.form.VTypes){
   Ext.apply(Ext.form.VTypes, {
      emailText    : 'Ovo polje prihavata e-mail adresu isključivo u obliku "korisnik@domen.com"',
      urlText      : 'Ovo polje prihavata URL adresu isključivo u obliku "http:/'+'/www.domen.com"',
      alphaText    : 'Ovo polje može sadržati isključivo slova i znak _',
      alphanumText : 'Ovo polje može sadržati само slova, brojeve i znak _'
   });
}

if(Ext.grid.GridView){
   Ext.apply(Ext.grid.GridView.prototype, {
      sortAscText  : "Rastući redosled",
      sortDescText : "Opadajući redosled",
      lockText     : "Zaključaj kolonu",
      unlockText   : "Otključaj kolonu",
      columnsText  : "Kolone"
   });
}

if(Ext.grid.PropertyColumnModel){
   Ext.apply(Ext.grid.PropertyColumnModel.prototype, {
      nameText   : "Naziv",
      valueText  : "Vrednost",
      dateFormat : "d.m.Y"
   });
}

if(Ext.layout.BorderLayout && Ext.layout.BorderLayout.SplitRegion){
   Ext.apply(Ext.layout.BorderLayout.SplitRegion.prototype, {
      splitTip            : "Povući za izmenu veličine.",
      collapsibleSplitTip : "Povući za izmenu veličine. Dvostruku klik za sakrivanje."
   });
}


The source code

/*!
 * licensing@extjs.com
 * http://www.extjs.com/license
 */
﻿/*
 * Serbian Cyrillic Translation
 * by Čolovic Vladan (cyrillic, utf8 encoding)
 * sr_RS (ex: sr_CS, sr_YU)
 * 12 May 2007
 */

Ext.UpdateManager.defaults.indicatorText = '
Учитавам...
';

if(Ext.View){
   Ext.View.prototype.emptyText = "";
}

if(Ext.grid.GridPanel){
   Ext.grid.GridPanel.prototype.ddText = "{0} изабраних редова";
}

if(Ext.TabPanelItem){
   Ext.TabPanelItem.prototype.closeText = "Затвори ову »картицу«";
}

if(Ext.form.Field){
   Ext.form.Field.prototype.invalidText = "Унешена вредност није правилна";
}

if(Ext.LoadMask){
    Ext.LoadMask.prototype.msg = "Учитавам...";
}

Date.monthNames = [
   "Јануар",
   "Фебруар",
   "Март",
   "Април",
   "Мај",
   "Јун",
   "Јул",
   "Август",
   "Септембар",
   "Октобар",
   "Новембар",
   "Децембар"
];

Date.dayNames = [
   "Недеља",
   "Понедељак",
   "Уторак",
   "Среда",
   "Четвртак",
   "Петак",
   "Субота"
];

if(Ext.MessageBox){
   Ext.MessageBox.buttonText = {
      ok     : "У реду",
      cancel : "Одустани",
      yes    : "Да",
      no     : "Не"
   };
}

if(Ext.util.Format){
   Ext.util.Format.date = function(v, format){
      if(!v) return "";
      if(!(v instanceof Date)) v = new Date(Date.parse(v));
      return v.dateFormat(format || "d.m.Y");
   };
}

if(Ext.DatePicker){
   Ext.apply(Ext.DatePicker.prototype, {
      todayText         : "Данас",
      minText           : "Датум је испред најмањег дозвољеног датума",
      maxText           : "Датум је након највећег дозвољеног датума",
      disabledDaysText  : "",
      disabledDatesText : "",
      monthNames	: Date.monthNames,
      dayNames		: Date.dayNames,
      nextText          : 'Следећи месец (Control+Десно)',
      prevText          : 'Претходни месец (Control+Лево)',
      monthYearText     : 'Изаберите месец (Control+Горе/Доле за избор године)',
      todayTip          : "{0} (Размакница)",
      format            : "d.m.y",
      startDay 		 : 1
   });
}

if(Ext.PagingToolbar){
   Ext.apply(Ext.PagingToolbar.prototype, {
      beforePageText : "Страна",
      afterPageText  : "од {0}",
      firstText      : "Прва страна",
      prevText       : "Претходна страна",
      nextText       : "Следећа страна",
      lastText       : "Последња страна",
      refreshText    : "Освежи",
      displayMsg     : "Приказана {0} - {1} од {2}",
      emptyMsg       : 'Немам шта приказати'
   });
}

if(Ext.form.TextField){
   Ext.apply(Ext.form.TextField.prototype, {
      minLengthText : "Минимална дужина овог поља је {0}",
      maxLengthText : "Максимална дужина овог поља је {0}",
      blankText     : "Поље је обавезно",
      regexText     : "",
      emptyText     : null
   });
}

if(Ext.form.NumberField){
   Ext.apply(Ext.form.NumberField.prototype, {
      minText : "Минимална вредност у пољу је {0}",
      maxText : "Максимална вредност у пољу је {0}",
      nanText : "{0} није правилан број"
   });
}

if(Ext.form.DateField){
   Ext.apply(Ext.form.DateField.prototype, {
      disabledDaysText  : "Пасивно",
      disabledDatesText : "Пасивно",
      minText           : "Датум у овом пољу мора бити након {0}",
      maxText           : "Датум у овом пољу мора бити пре {0}",
      invalidText       : "{0} није правилан датум - захтевани облик је {1}",
      format            : "d.m.y"
   });
}

if(Ext.form.ComboBox){
   Ext.apply(Ext.form.ComboBox.prototype, {
      loadingText       : "Учитавам...",
      valueNotFoundText : undefined
   });
}

if(Ext.form.VTypes){
   Ext.apply(Ext.form.VTypes, {
      emailText    : 'Ово поље прихвата e-mail адресу искључиво у облику "korisnik@domen.com"',
      urlText      : 'Ово поље прихвата URL адресу искључиво у облику "http:/'+'/www.domen.com"',
      alphaText    : 'Ово поље може садржати искључиво слова и знак _',
      alphanumText : 'Ово поље може садржати само слова, бројеве и знак _'
   });
}

if(Ext.grid.GridView){
   Ext.apply(Ext.grid.GridView.prototype, {
      sortAscText  : "Растући редослед",
      sortDescText : "Опадајући редослед",
      lockText     : "Закључај колону",
      unlockText   : "Откључај колону",
      columnsText  : "Колоне"
   });
}

if(Ext.grid.PropertyColumnModel){
   Ext.apply(Ext.grid.PropertyColumnModel.prototype, {
      nameText   : "Назив",
      valueText  : "Вредност",
      dateFormat : "d.m.Y"
   });
}

if(Ext.layout.BorderLayout && Ext.layout.BorderLayout.SplitRegion){
   Ext.apply(Ext.layout.BorderLayout.SplitRegion.prototype, {
      splitTip            : "Повући за измену величине.",
      collapsibleSplitTip : "Повући за измену величине. Двоструки клик за сакривање."
   });
}


The source code

/*!
 * licensing@extjs.com
 * http://www.extjs.com/license
 */

/**
 * Swedish translation (utf8-encoding)
 * By Erik Andersson, Monator Technologies
 * 24 April 2007
 * Changed by Cariad, 29 July 2007
 */

Ext.UpdateManager.defaults.indicatorText = '
Laddar...
';

if(Ext.View){
   Ext.View.prototype.emptyText = "";
}

if(Ext.grid.GridPanel){
   Ext.grid.GridPanel.prototype.ddText = "{0} markerade rad(er)";
}

if(Ext.TabPanelItem){
   Ext.TabPanelItem.prototype.closeText = "Stäng denna flik";
}

if(Ext.form.Field){
   Ext.form.Field.prototype.invalidText = "Värdet i detta fält är inte tillåtet";
}

if(Ext.LoadMask){
   Ext.LoadMask.prototype.msg = "Laddar...";
}

Date.monthNames = [
   "januari",
   "februari",
   "mars",
   "april",
   "maj",
   "juni",
   "juli",
   "augusti",
   "september",
   "oktober",
   "november",
   "december"
];

Date.dayNames = [
   "söndag",
   "måndag",
   "tisdag",
   "onsdag",
   "torsdag",
   "fredag",
   "lördag"
];

if(Ext.MessageBox){
   Ext.MessageBox.buttonText = {
      ok     : "OK",
      cancel : "Avbryt",
      yes    : "Ja",
      no     : "Nej"
   };
}

if(Ext.util.Format){
   Ext.util.Format.date = function(v, format){
      if(!v) return "";
      if(!(v instanceof Date)) v = new Date(Date.parse(v));
      return v.dateFormat(format || "Y-m-d");
   };
}

if(Ext.DatePicker){
   Ext.apply(Ext.DatePicker.prototype, {
      todayText         : "Idag",
      minText           : "Detta datum inträffar före det tidigast tillåtna",
      maxText           : "Detta datum inträffar efter det senast tillåtna",
      disabledDaysText  : "",
      disabledDatesText : "",
      monthNames	: Date.monthNames,
      dayNames		: Date.dayNames,
      nextText          : 'Nästa månad (Ctrl + högerpil)',
      prevText          : 'Föregående månad (Ctrl + vänsterpil)',
      monthYearText     : 'Välj en månad (Ctrl + uppåtpil/neråtpil för att ändra årtal)',
      todayTip          : "{0} (mellanslag)",
      format            : "Y-m-d",
      startDay          : 1
   });
}

if(Ext.PagingToolbar){
   Ext.apply(Ext.PagingToolbar.prototype, {
      beforePageText : "Sida",
      afterPageText  : "av {0}",
      firstText      : "Första sidan",
      prevText       : "Föregående sida",
      nextText       : "Nästa sida",
      lastText       : "Sista sidan",
      refreshText    : "Uppdatera",
      displayMsg     : "Visar {0} - {1} av {2}",
      emptyMsg       : 'Det finns ingen data att visa'
   });
}

if(Ext.form.TextField){
   Ext.apply(Ext.form.TextField.prototype, {
      minLengthText : "Minsta tillåtna längd för detta fält är {0}",
      maxLengthText : "Största tillåtna längd för detta fält är {0}",
      blankText     : "Detta fält är obligatoriskt",
      regexText     : "",
      emptyText     : null
   });
}

if(Ext.form.NumberField){
   Ext.apply(Ext.form.NumberField.prototype, {
      minText : "Minsta tillåtna värde för detta fält är {0}",
      maxText : "Största tillåtna värde för detta fält är {0}",
      nanText : "{0} är inte ett tillåtet nummer"
   });
}

if(Ext.form.DateField){
   Ext.apply(Ext.form.DateField.prototype, {
      disabledDaysText  : "Inaktiverad",
      disabledDatesText : "Inaktiverad",
      minText           : "Datumet i detta fält måste inträffa efter {0}",
      maxText           : "Datumet i detta fält måste inträffa före {0}",
      invalidText       : "{0} är inte ett tillåtet datum - datum ska anges i formatet {1}",
      format            : "Y-m-d"
   });
}

if(Ext.form.ComboBox){
   Ext.apply(Ext.form.ComboBox.prototype, {
      loadingText       : "Laddar...",
      valueNotFoundText : undefined
   });
}

if(Ext.form.VTypes){
   Ext.apply(Ext.form.VTypes, {
      emailText    : 'Detta fält ska innehålla en e-post adress i formatet "användare@domän.se"',
      urlText      : 'Detta fält ska innehålla en länk (URL) i formatet "http:/'+'/www.domän.se"',
      alphaText    : 'Detta fält får bara innehålla bokstäver och "_"',
      alphanumText : 'Detta fält får bara innehålla bokstäver, nummer och "_"'
   });
}

if(Ext.grid.GridView){
   Ext.apply(Ext.grid.GridView.prototype, {
      sortAscText  : "Sortera stigande",
      sortDescText : "Sortera fallande",
      lockText     : "Lås kolumn",
      unlockText   : "Lås upp kolumn",
      columnsText  : "Kolumner"
   });
}

if(Ext.grid.PropertyColumnModel){
   Ext.apply(Ext.grid.PropertyColumnModel.prototype, {
      nameText   : "Namn",
      valueText  : "Värde",
      dateFormat : "Y-m-d"
   });
}

if(Ext.layout.BorderLayout && Ext.layout.BorderLayout.SplitRegion){
   Ext.apply(Ext.layout.BorderLayout.SplitRegion.prototype, {
      splitTip            : "Dra för att ändra storleken.",
      collapsibleSplitTip : "Dra för att ändra storleken. Dubbelklicka för att gömma."
   });
}


The source code

/*!
 * licensing@extjs.com
 * http://www.extjs.com/license
 */

/**
 * List compiled by KillerNay on the extjs.com forums.
 * Thank you KillerNay!
 *
 * Thailand Translations
 */

Ext.UpdateManager.defaults.indicatorText = '
¡ÓÅÑ§âËÅŽ...
';

if(Ext.View){
  Ext.View.prototype.emptyText = "";
}

if(Ext.grid.GridPanel){
  Ext.grid.GridPanel.prototype.ddText = "{0} àÅ×Í¡áÅéÇ·Ñé§ËÁŽá¶Ç";
}

if(Ext.TabPanelItem){
  Ext.TabPanelItem.prototype.closeText = "»ÔŽá·çº¹Õé";
}

if(Ext.form.Field){
  Ext.form.Field.prototype.invalidText = "€èÒ¢Í§ªèÍ§¹ÕéäÁè¶Ù¡µéÍ§";
}

if(Ext.LoadMask){
  Ext.LoadMask.prototype.msg = "¡ÓÅÑ§âËÅŽ...";
}

Date.monthNames = [
  "Á¡ÃÒ€Á",
  "¡ØÁŸÒÓŸÑ¹žì",
  "ÁÕ¹Ò€Á",
  "àÁÉÒÂ¹",
  "ŸÄÉÀÒ€Á",
  "ÁÔ¶Ø¹ÒÂ¹",
  "¡Ä¡¯Ò€Á",
  "ÊÔ§ËÒ€Á",
  "¡Ñ¹ÂÒÂ¹",
  "µØÅÒ€Á",
  "ŸÄÈšÔ¡ÒÂ¹",
  "žÑ¹ÇÒ€Á"
];

Date.getShortMonthName = function(month) {
  return Date.monthNames[month].substring(0, 3);
};

Date.monthNumbers = {
  "Á€" : 0,
  "¡Ÿ" : 1,
  "ÁÕ€" : 2,
  "àÁÂ" : 3,
  "Ÿ€" : 4,
  "ÁÔÂ" : 5,
  "¡€" : 6,
  "Ê€" : 7,
  "¡Â" : 8,
  "µ€" : 9,
  "ŸÂ" : 10,
  "ž€" : 11
};

Date.getMonthNumber = function(name) {
  return Date.monthNumbers[name.substring(0, 1).toUpperCase() + name.substring(1, 3).toLowerCase()];
};

Date.dayNames = [
  "ÍÒ·ÔµÂì",
  "šÑ¹·Ãì",
  "ÍÑ§€ÒÃ",
  "ŸØ×ž",
  "ŸÄËÑÊºŽÕ",
  "ÈØ¡Ãì",
  "àÊÒÃì"
];

Date.getShortDayName = function(day) {
  return Date.dayNames[day].substring(0, 3);
};

if(Ext.MessageBox){
  Ext.MessageBox.buttonText = {
    ok     : "µ¡Å§",
    cancel : "Â¡àÅÔ¡",
    yes    : "ãªè",
    no     : "äÁèãªè"
  };
}

if(Ext.util.Format){
  Ext.util.Format.date = function(v, format){
    if(!v) return "";
    if(!(v instanceof Date)) v = new Date(Date.parse(v));
    return v.dateFormat(format || "m/d/Y");
  };
}

if(Ext.DatePicker){
  Ext.apply(Ext.DatePicker.prototype, {
    todayText         : "ÇÑ¹¹Õé",
    minText           : "This date is before the minimum date",
    maxText           : "This date is after the maximum date",
    disabledDaysText  : "",
    disabledDatesText : "",
    monthNames        : Date.monthNames,
    dayNames          : Date.dayNames,
    nextText          : 'àŽ×Í¹¶ÑŽä» (Control+Right)',
    prevText          : 'àŽ×Í¹¡èÍ¹Ë¹éÒ (Control+Left)',
    monthYearText     : 'àÅ×Í¡àŽ×Í¹ (Control+Up/Down to move years)',
    todayTip          : "{0} (Spacebar)",
    format            : "m/d/y",
    okText            : " µ¡Å§ ",
    cancelText        : "Â¡àÅÔ¡",
    startDay          : 0
  });
}

if(Ext.PagingToolbar){
  Ext.apply(Ext.PagingToolbar.prototype, {
    beforePageText : "Ë¹éÒ",
    afterPageText  : "of {0}",
    firstText      : "Ë¹éÒáÃ¡",
    prevText       : "¡èÍ¹Ë¹éÒ",
    nextText       : "¶ÑŽä»",
    lastText       : "Ë¹éÒÊØŽ·éÒÂ",
    refreshText    : "ÃÕà¿Ãª",
    displayMsg     : "¡ÓÅÑ§áÊŽ§ {0} - {1} šÒ¡ {2}",
    emptyMsg       : 'äÁèÁÕ¢éÍÁÙÅáÊŽ§'
  });
}

if(Ext.form.TextField){
  Ext.apply(Ext.form.TextField.prototype, {
    minLengthText : "The minimum length for this field is {0}",
    maxLengthText : "The maximum length for this field is {0}",
    blankText     : "This field is required",
    regexText     : "",
    emptyText     : null
  });
}

if(Ext.form.NumberField){
  Ext.apply(Ext.form.NumberField.prototype, {
    minText : "The minimum value for this field is {0}",
    maxText : "The maximum value for this field is {0}",
    nanText : "{0} is not a valid number"
  });
}

if(Ext.form.DateField){
  Ext.apply(Ext.form.DateField.prototype, {
    disabledDaysText  : "»ÔŽ",
    disabledDatesText : "»ÔŽ",
    minText           : "The date in this field must be after {0}",
    maxText           : "The date in this field must be before {0}",
    invalidText       : "{0} is not a valid date - it must be in the format {1}",
    format            : "m/d/y",
    altFormats        : "m/d/Y|m-d-y|m-d-Y|m/d|m-d|md|mdy|mdY|d|Y-m-d"
  });
}

if(Ext.form.ComboBox){
  Ext.apply(Ext.form.ComboBox.prototype, {
    loadingText       : "¡ÓÅÑ§âËÅŽ...",
    valueNotFoundText : undefined
  });
}

if(Ext.form.VTypes){
  Ext.apply(Ext.form.VTypes, {
    emailText    : 'This field should be an e-mail address in the format "user@example.com"',
    urlText      : 'This field should be a URL in the format "http:/'+'/www.example.com"',
    alphaText    : 'This field should only contain letters and _',
    alphanumText : 'This field should only contain letters, numbers and _'
  });
}

if(Ext.form.HtmlEditor){
  Ext.apply(Ext.form.HtmlEditor.prototype, {
    createLinkText : 'Please enter the URL for the link:',
    buttonTips : {
      bold : {
        title: 'Bold (Ctrl+B)',
        text: 'Make the selected text bold.',
        cls: 'x-html-editor-tip'
      },
      italic : {
        title: 'Italic (Ctrl+I)',
        text: 'Make the selected text italic.',
        cls: 'x-html-editor-tip'
      },
      underline : {
        title: 'Underline (Ctrl+U)',
        text: 'Underline the selected text.',
        cls: 'x-html-editor-tip'
      },
      increasefontsize : {
        title: 'Grow Text',
        text: 'Increase the font size.',
        cls: 'x-html-editor-tip'
      },
      decreasefontsize : {
        title: 'Shrink Text',
        text: 'Decrease the font size.',
        cls: 'x-html-editor-tip'
      },
      backcolor : {
        title: 'Text Highlight Color',
        text: 'Change the background color of the selected text.',
        cls: 'x-html-editor-tip'
      },
      forecolor : {
        title: 'Font Color',
        text: 'Change the color of the selected text.',
        cls: 'x-html-editor-tip'
      },
      justifyleft : {
        title: 'Align Text Left',
        text: 'Align text to the left.',
        cls: 'x-html-editor-tip'
      },
      justifycenter : {
        title: 'Center Text',
        text: 'Center text in the editor.',
        cls: 'x-html-editor-tip'
      },
      justifyright : {
        title: 'Align Text Right',
        text: 'Align text to the right.',
        cls: 'x-html-editor-tip'
      },
      insertunorderedlist : {
        title: 'Bullet List',
        text: 'Start a bulleted list.',
        cls: 'x-html-editor-tip'
      },
      insertorderedlist : {
        title: 'Numbered List',
        text: 'Start a numbered list.',
        cls: 'x-html-editor-tip'
      },
      createlink : {
        title: 'Hyperlink',
        text: 'Make the selected text a hyperlink.',
        cls: 'x-html-editor-tip'
      },
      sourceedit : {
        title: 'Source Edit',
        text: 'Switch to source editing mode.',
        cls: 'x-html-editor-tip'
      }
    }
  });
}

if(Ext.grid.GridView){
  Ext.apply(Ext.grid.GridView.prototype, {
    sortAscText  : "Sort Ascending",
    sortDescText : "Sort Descending",
    lockText     : "Lock Column",
    unlockText   : "Unlock Column",
    columnsText  : "Columns"
  });
}

if(Ext.grid.GroupingView){
  Ext.apply(Ext.grid.GroupingView.prototype, {
    emptyGroupText : '(None)',
    groupByText    : 'Group By This Field',
    showGroupsText : 'Show in Groups'
  });
}

if(Ext.grid.PropertyColumnModel){
  Ext.apply(Ext.grid.PropertyColumnModel.prototype, {
    nameText   : "Name",
    valueText  : "Value",
    dateFormat : "m/j/Y"
  });
}

if(Ext.layout.BorderLayout && Ext.layout.BorderLayout.SplitRegion){
  Ext.apply(Ext.layout.BorderLayout.SplitRegion.prototype, {
    splitTip            : "Drag to resize.",
    collapsibleSplitTip : "Drag to resize. Double click to hide."
  });
}


The source code

/*!
 * licensing@extjs.com
 * http://www.extjs.com/license
 */

/**
 * List compiled by mystix on the extjs.com forums.
 * Thank you Mystix!
 *
 * Turkish translation by Alper YAZGAN
 * 2008-01-24, 10:29 AM
 *
 * Updated to 2.2 by YargicX
 * 2008-10-05, 06:22 PM
 */

Ext.UpdateManager.defaults.indicatorText = '
Yükleniyor ...
';

if(Ext.View){
  Ext.View.prototype.emptyText = "";
}

if(Ext.grid.Grid){
  Ext.grid.Grid.prototype.ddText = "Seçili satýr sayýsý : {0}";
}

if(Ext.TabPanelItem){
  Ext.TabPanelItem.prototype.closeText = "Sekmeyi kapat";
}

if(Ext.form.Field){
  Ext.form.Field.prototype.invalidText = "Bu alandaki deðer geçersiz";
}

if(Ext.LoadMask){
  Ext.LoadMask.prototype.msg = "Yükleniyor ...";
}

Date.monthNames = [
  "Ocak",
  "Þžubat",
  "Mart",
  "Nisan",
  "Mayýs",
  "Haziran",
  "Temmuz",
  "Aðustos",
  "Eylül",
  "Ekim",
  "Kasým",
  "Aralýk"
];

Date.getShortMonthName = function(month) {
  return Date.monthNames[month].substring(0, 3);
};

Date.monthNumbers = {
  Jan : 0,
  Feb : 1,
  Mar : 2,
  Apr : 3,
  May : 4,
  Jun : 5,
  Jul : 6,
  Aug : 7,
  Sep : 8,
  Oct : 9,
  Nov : 10,
  Dec : 11
};

Date.getMonthNumber = function(name) {
  return Date.monthNumbers[name.substring(0, 1).toUpperCase() + name.substring(1, 3).toLowerCase()];
};

Date.dayNames = [
  "Pazar",
  "Pazartesi",
  "Salý",
  "Ç‡arþŸamba",
  "PerþŸembe",
  "Cuma",
  "Cumartesi"
];

Date.shortDayNames = [
  "Paz",
  "Pzt",
  "Sal",
  "ÇrþŸ",
  "Prþ",
  "Cum",
  "Cmt"
];

Date.getShortDayName = function(day) {
  return Date.shortDayNames[day];
};

if(Ext.MessageBox){
  Ext.MessageBox.buttonText = {
    ok     : "Tamam",
    cancel : "Ä°ptal",
    yes    : "Evet",
    no     : "Hayýr"
  };
}

if(Ext.util.Format){
  Ext.util.Format.date = function(v, format){
    if(!v) return "";
    if(!(v instanceof Date)) v = new Date(Date.parse(v));
    return v.dateFormat(format || "d/m/Y");
  };
}

if(Ext.DatePicker){
  Ext.apply(Ext.DatePicker.prototype, {
    todayText         : "Bugün",
    minText           : "Bu tarih izin verilen en küçük tarihten daha önce",
    maxText           : "Bu tarih izin verilen en büyük tarihten daha sonra",
    disabledDaysText  : "",
    disabledDatesText : "",
    monthNames        : Date.monthNames,
    dayNames          : Date.dayNames,
    nextText          : 'Gelecek Ay (Control+Right)',
    prevText          : 'Ã–nceki Ay (Control+Left)',
    monthYearText     : 'Bir ay sŸeçiniz (Yýlý artýrmak/azaltmak için Control+Up/Down)',
    todayTip          : "{0} (BoþŸluk TuþŸu - Spacebar)",
    format            : "d/m/Y",
    okText            : " Tamam ",
    cancelText        : "Ä°ptal",
    startDay          : 1
  });
}

if(Ext.PagingToolbar){
  Ext.apply(Ext.PagingToolbar.prototype, {
    beforePageText : "Sayfa",
    afterPageText  : " / {0}",
    firstText      : "Ä°lk Sayfa",
    prevText       : "Ã–nceki Sayfa",
    nextText       : "Sonraki Sayfa",
    lastText       : "Son Sayfa",
    refreshText    : "Yenile",
    displayMsg     : "Gösterilen {0} - {1} / {2}",
    emptyMsg       : 'Gösterilebilecek veri yok'
  });
}

if(Ext.form.TextField){
  Ext.apply(Ext.form.TextField.prototype, {
    minLengthText : "Girilen verinin uzunluðu en az {0} olabilir",
    maxLengthText : "Girilen verinin uzunluðu en fazla {0} olabilir",
    blankText     : "Bu alan boþŸ býrakýlamaz",
    regexText     : "",
    emptyText     : null
  });
}

if(Ext.form.NumberField){
  Ext.apply(Ext.form.NumberField.prototype, {
    minText : "En az {0} girilebilir",
    maxText : "En çok {0} girilebilir",
    nanText : "{0} geçersiz bir sayýdýr"
  });
}

if(Ext.form.DateField){
  Ext.apply(Ext.form.DateField.prototype, {
    disabledDaysText  : "Disabled",
    disabledDatesText : "Disabled",
    minText           : "Bu tarih, {0} tarihinden daha sonra olmalýdýr",
    maxText           : "Bu tarih, {0} tarihinden daha önce olmalýdýr",
    invalidText       : "{0} geçersiz bir tarihdir - tarih formatý {1} þŸeklinde olmalýdýr",
    format            : "d/m/Y",
    altFormats        : "d.m.y|d.m.Y|d/m/y|d-m-Y|d-m-y|d.m|d/m|d-m|dm|dmY|dmy|d|Y.m.d|Y-m-d|Y/m/d"
  });
}

if(Ext.form.ComboBox){
  Ext.apply(Ext.form.ComboBox.prototype, {
    loadingText       : "Yükleniyor ...",
    valueNotFoundText : undefined
  });
}

if(Ext.form.VTypes){
    Ext.form.VTypes["emailText"]='Bu alan "user@example.com" þŸeklinde elektronik posta formatýnda olmalýdýr';
    Ext.form.VTypes["urlText"]='Bu alan "http://www.example.com" þŸeklinde URL adres formatýnda olmalýdýr';
    Ext.form.VTypes["alphaText"]='Bu alan sadece harf ve _ içermeli';
    Ext.form.VTypes["alphanumText"]='Bu alan sadece harf, sayý ve _ içermeli';
}

if(Ext.form.HtmlEditor){
  Ext.apply(Ext.form.HtmlEditor.prototype, {
    createLinkText : 'Lütfen bu baðlantý için gerekli URL adresini giriniz:',
    buttonTips : {
      bold : {
        title: 'Kalýn(Bold) (Ctrl+B)',
        text: 'Þžeçili yazýyý kalýn yapar.',
        cls: 'x-html-editor-tip'
      },
      italic : {
        title: 'Ä°talik(Italic) (Ctrl+I)',
        text: 'Þžeçili yazýyý italik yapar.',
        cls: 'x-html-editor-tip'
      },
      underline : {
        title: 'Alt Ã‡izgi(Underline) (Ctrl+U)',
        text: 'Þžeçili yazýnýn altýný çizer.',
        cls: 'x-html-editor-tip'
      },
      increasefontsize : {
        title: 'Fontu büyült',
        text: 'Yazý fontunu büyütür.',
        cls: 'x-html-editor-tip'
      },
      decreasefontsize : {
        title: 'Fontu küçült',
        text: 'Yazý fontunu küçültür.',
        cls: 'x-html-editor-tip'
      },
      backcolor : {
        title: 'Arka Plan Rengi',
        text: 'Seçili yazýnýn arka plan rengini deðiþŸtir.',
        cls: 'x-html-editor-tip'
      },
      forecolor : {
        title: 'Yazý Rengi',
        text: 'Seçili yazýnýn rengini deðiþŸtir.',
        cls: 'x-html-editor-tip'
      },
      justifyleft : {
        title: 'Sola Daya',
        text: 'Yazýyý sola daya.',
        cls: 'x-html-editor-tip'
      },
      justifycenter : {
        title: 'Ortala',
        text: 'Yazýyý editörde ortala.',
        cls: 'x-html-editor-tip'
      },
      justifyright : {
        title: 'Saða daya',
        text: 'Yazýyý saða daya.',
        cls: 'x-html-editor-tip'
      },
      insertunorderedlist : {
        title: 'Noktalý Liste',
        text: 'Noktalý listeye baþŸla.',
        cls: 'x-html-editor-tip'
      },
      insertorderedlist : {
        title: 'Numaralý Liste',
        text: 'Numaralý lisyeye baþŸla.',
        cls: 'x-html-editor-tip'
      },
      createlink : {
        title: 'Web Adresi(Hyperlink)',
        text: 'Seçili yazýyý web adresi(hyperlink) yap.',
        cls: 'x-html-editor-tip'
      },
      sourceedit : {
        title: 'Kaynak kodu Düzenleme',
        text: 'Kaynak kodu düzenleme moduna geç.',
        cls: 'x-html-editor-tip'
      }
    }
  });
}

if(Ext.grid.GridView){
  Ext.apply(Ext.grid.GridView.prototype, {
    sortAscText  : "Artan sýrada sýrala",
    sortDescText : "Azalan sýrada sýrala",
    lockText     : "Kolonu kilitle",
    unlockText   : "Kolon kilidini kaldýr",
    columnsText  : "Kolonlar"
  });
}

if(Ext.grid.GroupingView){
  Ext.apply(Ext.grid.GroupingView.prototype, {
    emptyGroupText : '(Yok)',
    groupByText    : 'Bu Alana Göre Grupla',
    showGroupsText : 'Gruplar Halinde Göster'
  });
}

if(Ext.grid.PropertyColumnModel){
  Ext.apply(Ext.grid.PropertyColumnModel.prototype, {
    nameText   : "Ad",
    valueText  : "Deðer",
    dateFormat : "d/m/Y"
  });
}

if(Ext.layout.BorderLayout.SplitRegion){
  Ext.apply(Ext.layout.BorderLayout.SplitRegion.prototype, {
    splitTip            : "Yeniden boyutlandýrmak için sürükle.",
    collapsibleSplitTip : "Yeniden boyutlandýrmak için sürükle. Saklamak için çift týkla."
  });
}


The source code

/*!
 * licensing@extjs.com
 * http://www.extjs.com/license
 */
/*
 * Ukrainian translations for ExtJS (UTF-8 encoding)
 *
 * Original translation by zlatko
 * 3 October 2007
 *
 * Updated by dev.ashevchuk@gmail.com
 * 01.09.2009
 */

Ext.UpdateManager.defaults.indicatorText = '
Завантаження...
';

if(Ext.View){
   Ext.View.prototype.emptyText = "<Порожньо>";
}

if(Ext.grid.GridPanel){
   Ext.grid.GridPanel.prototype.ddText = "{0} обраних рядків";
}

if(Ext.TabPanelItem){
   Ext.TabPanelItem.prototype.closeText = "Закрити цю вкладку";
}

if(Ext.form.Field){
   Ext.form.Field.prototype.invalidText = "Хибне значення";
}

if(Ext.LoadMask){
   Ext.LoadMask.prototype.msg = "Завантаження...";
}

Date.monthNames = [
   "Січень",
   "Лютий",
   "Березень",
   "Квітень",
   "Травень",
   "Червень",
   "Липень",
   "Серпень",
   "Вересень",
   "Жовтень",
   "Листопад",
   "Грудень"
];

Date.dayNames = [
   "Неділя",
   "Понеділок",
   "Вівторок",
   "Середа",
   "Четвер",
   "П’ятниця",
   "Субота"
];

if(Ext.MessageBox){
   Ext.MessageBox.buttonText = {
      ok     : "OK",
      cancel : "Відміна",
      yes    : "Так",
      no     : "Ні"
   };
}

if(Ext.util.Format){
   Ext.util.Format.date = function(v, format){
      if(!v) return "";
      if(!(v instanceof Date)) v = new Date(Date.parse(v));
      return v.dateFormat(format || "d.m.Y");
   };
}

if(Ext.DatePicker){
   Ext.apply(Ext.DatePicker.prototype, {
      todayText         : "Сьогодні",
      minText           : "Ця дата меньша за мінімальну допустиму дату",
      maxText           : "Ця дата більша за максимальну допустиму дату",
      disabledDaysText  : "",
      disabledDatesText : "",
      monthNames        : Date.monthNames,
      dayNames          : Date.dayNames,
      nextText          : 'Наступний місяць (Control+Вправо)',
      prevText          : 'Попередній місяць (Control+Вліво)',
      monthYearText     : 'Вибір місяця (Control+Вверх/Вниз для вибору року)',
      todayTip          : "{0} (Пробіл)",
      format            : "d.m.y",
      okText            : " OK ",
      cancelText        : "Відміна",
      startDay          : 1
   });
}

if(Ext.PagingToolbar){
   Ext.apply(Ext.PagingToolbar.prototype, {
      beforePageText : "Сторінка",
      afterPageText  : "з {0}",
      firstText      : "Перша сторінка",
      prevText       : "Попередня сторінка",
      nextText       : "Наступна сторінка",
      lastText       : "Остання сторінка",
      refreshText    : "Освіжити",
      displayMsg     : "Відображення записів з {0} по {1}, всього {2}",
      emptyMsg       : 'Дані для відображення відсутні'
   });
}

if(Ext.form.TextField){
   Ext.apply(Ext.form.TextField.prototype, {
      minLengthText : "Мінімальна довжина цього поля {0}",
      maxLengthText : "Максимальна довжина цього поля {0}",
      blankText     : "Це поле є обов’язковим для заповнення",
      regexText     : "",
      emptyText     : null
   });
}

if(Ext.form.NumberField){
   Ext.apply(Ext.form.NumberField.prototype, {
      minText : "Значення у цьому полі не може бути меньше {0}",
      maxText : "Значення у цьому полі не може бути більше {0}",
      nanText : "{0} не є числом"
   });
}

if(Ext.form.DateField){
   Ext.apply(Ext.form.DateField.prototype, {
      disabledDaysText  : "Не доступно",
      disabledDatesText : "Не доступно",
      minText           : "Дата у цьому полі повинна бути більша {0}",
      maxText           : "Дата у цьому полі повинна бути меньша {0}",
      invalidText       : "{0} хибна дата - дата повинна бути вказана у форматі {1}",
      format            : "d.m.y"
   });
}

if(Ext.form.ComboBox){
   Ext.apply(Ext.form.ComboBox.prototype, {
      loadingText       : "Завантаження...",
      valueNotFoundText : undefined
   });
}

if(Ext.form.VTypes){
   Ext.apply(Ext.form.VTypes, {
      emailText    : 'Це поле повинно містити адресу електронної пошти у форматі "user@example.com"',
      urlText      : 'Це поле повинно містити URL у форматі "http:/'+'/www.example.com"',
      alphaText    : 'Це поле повинно містити виключно латинські літери та символ підкреслення "_"',
      alphanumText : 'Це поле повинно містити виключно латинські літери, цифри та символ підкреслення "_"'
   });
}

if(Ext.form.HtmlEditor){
   Ext.apply(Ext.form.HtmlEditor.prototype, {
     createLinkText : 'Будь-ласка введіть адресу:',
     buttonTips : {
            bold : {
               title: 'Напівжирний (Ctrl+B)',
               text: 'Зробити напівжирним виділений текст.',
               cls: 'x-html-editor-tip'
            },
            italic : {
               title: 'Курсив (Ctrl+I)',
               text: 'Зробити курсивом виділений текст.',
               cls: 'x-html-editor-tip'
            },
            underline : {
               title: 'Підкреслений (Ctrl+U)',
               text: 'Зробити підкресленим виділений текст.',
               cls: 'x-html-editor-tip'
           },
           increasefontsize : {
               title: 'Збільшити розмір',
               text: 'Збільшити розмір шрифта.',
               cls: 'x-html-editor-tip'
           },
           decreasefontsize : {
               title: 'Зменьшити розмір',
               text: 'Зменьшити розмір шрифта.',
               cls: 'x-html-editor-tip'
           },
           backcolor : {
               title: 'Заливка',
               text: 'Змінити колір фону для виділеного тексту або абзацу.',
               cls: 'x-html-editor-tip'
           },
           forecolor : {
               title: 'Колір тексту',
               text: 'Змінити колір виділеного тексту або абзацу.',
               cls: 'x-html-editor-tip'
           },
           justifyleft : {
               title: 'Вирівняти текст по лівому полю',
               text: 'Вирівнювання тексту по лівому полю.',
               cls: 'x-html-editor-tip'
           },
           justifycenter : {
               title: 'Вирівняти текст по центру',
               text: 'Вирівнювання тексту по центру.',
               cls: 'x-html-editor-tip'
           },
           justifyright : {
               title: 'Вирівняти текст по правому полю',
               text: 'Вирівнювання тексту по правому полю.',
               cls: 'x-html-editor-tip'
           },
           insertunorderedlist : {
               title: 'Маркери',
               text: 'Почати маркований список.',
               cls: 'x-html-editor-tip'
           },
           insertorderedlist : {
               title: 'Нумерація',
               text: 'Почати нумернований список.',
               cls: 'x-html-editor-tip'
           },
           createlink : {
               title: 'Вставити гіперпосилання',
               text: 'Створення посилання із виділеного тексту.',
               cls: 'x-html-editor-tip'
           },
           sourceedit : {
               title: 'Джерельний код',
               text: 'Режим редагування джерельного коду.',
               cls: 'x-html-editor-tip'
           }
        }
   });
}

if(Ext.grid.GridView){
   Ext.apply(Ext.grid.GridView.prototype, {
      sortAscText  : "Сортувати по зростанню",
      sortDescText : "Сортувати по спаданню",
      lockText     : "Закріпити стовпець",
      unlockText   : "Відкріпити стовпець",
      columnsText  : "Стовпці"
   });
}

if(Ext.grid.PropertyColumnModel){
   Ext.apply(Ext.grid.PropertyColumnModel.prototype, {
      nameText   : "Назва",
      valueText  : "Значення",
      dateFormat : "j.m.Y"
   });
}

if(Ext.layout.BorderLayout && Ext.layout.BorderLayout.SplitRegion){
   Ext.apply(Ext.layout.BorderLayout.SplitRegion.prototype, {
      splitTip            : "Тягніть для зміни розміру.",
      collapsibleSplitTip : "Тягніть для зміни розміру. Подвійний клік сховає панель."
   });
}


The source code

/*!
 * licensing@extjs.com
 * http://www.extjs.com/license
 */
﻿
/**
 * List compiled by mystix on the extjs.com forums.
 * Thank you Mystix!
 */

/**
 * Vietnamese translation
 * By bpmtri
 * 12-April-2007 04:06PM
 */

Ext.UpdateManager.defaults.indicatorText = '
Đang tải...
';

if(Ext.View){
   Ext.View.prototype.emptyText = "";
}

if(Ext.grid.GridPanel){
   Ext.grid.GridPanel.prototype.ddText = "{0} dòng được chọn";
}

if(Ext.TabPanelItem){
   Ext.TabPanelItem.prototype.closeText = "Đóng thẻ này";
}

if(Ext.form.Field){
   Ext.form.Field.prototype.invalidText = "Giá trị của ô này không hợp lệ.";
}

if(Ext.LoadMask){
    Ext.LoadMask.prototype.msg = "Đang tải...";
}

Date.monthNames = [
   "Tháng 1",
   "Tháng 2",
   "Tháng 3",
   "Tháng 4",
   "Tháng 5",
   "Tháng 6",
   "Tháng 7",
   "Tháng 8",
   "Tháng 9",
   "Tháng 10",
   "Tháng 11",
   "Tháng 12"
];

Date.dayNames = [
   "Chủ nhật",
   "Thứ hai",
   "Thứ ba",
   "Thứ tư",
   "Thứ năm",
   "Thứ sáu",
   "Thứ bảy"
];

if(Ext.MessageBox){
   Ext.MessageBox.buttonText = {
      ok     : "Đồng ý",
      cancel : "Hủy bỏ",
      yes    : "Có",
      no     : "Không"
   };
}

if(Ext.util.Format){
   Ext.util.Format.date = function(v, format){
      if(!v) return "";
      if(!(v instanceof Date)) v = new Date(Date.parse(v));
      return v.dateFormat(format || "d/m/Y");
   };
}

if(Ext.DatePicker){
   Ext.apply(Ext.DatePicker.prototype, {
      todayText         : "Hôm nay",
      minText           : "Ngày này nhỏ hơn ngày nhỏ nhất",
      maxText           : "Ngày này lớn hơn ngày lớn nhất",
      disabledDaysText  : "",
      disabledDatesText : "",
      monthNames	: Date.monthNames,
      dayNames		: Date.dayNames,
      nextText          : 'Tháng sau (Control+Right)',
      prevText          : 'Tháng trước (Control+Left)',
      monthYearText     : 'Chọn một tháng (Control+Up/Down để thay đổi năm)',
      todayTip          : "{0} (Spacebar - Phím trắng)",
      format            : "d/m/y"
   });
}

if(Ext.PagingToolbar){
   Ext.apply(Ext.PagingToolbar.prototype, {
      beforePageText : "Trang",
      afterPageText  : "of {0}",
      firstText      : "Trang đầu",
      prevText       : "Trang trước",
      nextText       : "Trang sau",
      lastText       : "Trang cuối",
      refreshText    : "Tải lại",
      displayMsg     : "Hiển thị {0} - {1} của {2}",
      emptyMsg       : 'Không có dữ liệu để hiển thị'
   });
}

if(Ext.form.TextField){
   Ext.apply(Ext.form.TextField.prototype, {
      minLengthText : "Chiều dài tối thiểu của ô này là {0}",
      maxLengthText : "Chiều dài tối đa của ô này là {0}",
      blankText     : "Ô này cần phải nhập giá trị",
      regexText     : "",
      emptyText     : null
   });
}

if(Ext.form.NumberField){
   Ext.apply(Ext.form.NumberField.prototype, {
      minText : "Giá trị nhỏ nhất của ô này là {0}",
      maxText : "Giá trị lớn nhất của ô này là  {0}",
      nanText : "{0} hông phải là một số hợp lệ"
   });
}

if(Ext.form.DateField){
   Ext.apply(Ext.form.DateField.prototype, {
      disabledDaysText  : "Vô hiệu",
      disabledDatesText : "Vô hiệu",
      minText           : "Ngày nhập trong ô này phải sau ngày {0}",
      maxText           : "Ngày nhập trong ô này phải trước ngày {0}",
      invalidText       : "{0} không phải là một ngày hợp lệ - phải có dạng {1}",
      format            : "d/m/y"
   });
}

if(Ext.form.ComboBox){
   Ext.apply(Ext.form.ComboBox.prototype, {
      loadingText       : "Đang tải...",
      valueNotFoundText : undefined
   });
}

if(Ext.form.VTypes){
   Ext.apply(Ext.form.VTypes, {
      emailText    : 'Giá trị của ô này phải là một địa chỉ email có dạng như "ten@abc.com"',
      urlText      : 'Giá trị của ô này phải là một địa chỉ web(URL) hợp lệ, có dạng như "http:/'+'/www.example.com"',
      alphaText    : 'Ô này chỉ được nhập các kí tự và gạch dưới(_)',
      alphanumText : 'Ô này chỉ được nhập các kí tự, số và gạch dưới(_)'
   });
}

if(Ext.grid.GridView){
   Ext.apply(Ext.grid.GridView.prototype, {
      sortAscText  : "Tăng dần",
      sortDescText : "Giảm dần",
      lockText     : "Khóa cột",
      unlockText   : "Bỏ khóa cột",
      columnsText  : "Các cột"
   });
}

if(Ext.grid.PropertyColumnModel){
   Ext.apply(Ext.grid.PropertyColumnModel.prototype, {
      nameText   : "Tên",
      valueText  : "Giá trị",
      dateFormat : "j/m/Y"
   });
}

if(Ext.layout.BorderLayout && Ext.layout.BorderLayout.SplitRegion){
   Ext.apply(Ext.layout.BorderLayout.SplitRegion.prototype, {
      splitTip            : "Kéo giữ chuột để thay đổi kích thước.",
      collapsibleSplitTip : "Kéo giữ chuột để thay đổi kích thước. Nhấp đúp để ẩn đi."
   });
}


The source code

/*!
 * licensing@extjs.com
 * http://www.extjs.com/license
 */
/*
 * Simplified Chinese translation
 * By DavidHu
 * 09 April 2007
 *
 * update by andy_ghg
 * 2009-10-22 15:00:57
 */

Ext.UpdateManager.defaults.indicatorText = '
加载中...
';

if(Ext.DataView){
   Ext.DataView.prototype.emptyText = "";
}

if(Ext.grid.GridPanel){
   Ext.grid.GridPanel.prototype.ddText = "选择了 {0} 行";
}

if(Ext.TabPanelItem){
   Ext.TabPanelItem.prototype.closeText = "关闭此标签";
}

if(Ext.form.Field){
   Ext.form.Field.prototype.invalidText = "输入值非法";
}

if (Ext.LoadMask) {
    Ext.LoadMask.prototype.msg = "读取中...";
}

Date.monthNames = [
   "一月",
   "二月",
   "三月",
   "四月",
   "五月",
   "六月",
   "七月",
   "八月",
   "九月",
   "十月",
   "十一月",
   "十二月"
];

Date.dayNames = [
   "日",
   "一",
   "二",
   "三",
   "四",
   "五",
   "六"
];

Date.formatCodes.a = "(this.getHours() < 12 ? '上午' : '下午')";
Date.formatCodes.A = "(this.getHours() < 12 ? '上午' : '下午')";

if(Ext.MessageBox){
   Ext.MessageBox.buttonText = {
      ok     : "确定",
      cancel : "取消",
      yes    : "是",
      no     : "否"
   };
}

if(Ext.util.Format){
   Ext.util.Format.date = function(v, format){
      if(!v) return "";
      if(!(v instanceof Date)) v = new Date(Date.parse(v));
      return v.dateFormat(format || "y年m月d日");
   };
}

if(Ext.DatePicker){
   Ext.apply(Ext.DatePicker.prototype, {
      todayText         : "今天",
      minText           : "日期必须大于最小允许日期",//update
      maxText           : "日期必须小于最大允许日期",//update
      disabledDaysText  : "",
      disabledDatesText : "",
      monthNames        : Date.monthNames,
      dayNames          : Date.dayNames,
      nextText          : '下个月 (Ctrl+Right)',
      prevText          : '上个月 (Ctrl+Left)',
      monthYearText     : '选择一个月 (Control+Up/Down 来改变年份)',//update
      todayTip          : "{0} (空格键选择)",
      format            : "y年m月d日",
      okText            : "确定",
      cancelText        : "取消"
   });
}

if(Ext.PagingToolbar){
   Ext.apply(Ext.PagingToolbar.prototype, {
      beforePageText : "第",//update
      afterPageText  : "页,共 {0} 页",//update
      firstText      : "第一页",
      prevText       : "上一页",//update
      nextText       : "下一页",
      lastText       : "最后页",
      refreshText    : "刷新",
      displayMsg     : "显示 {0} - {1}条，共 {2} 条",//update
      emptyMsg       : '没有数据'
   });
}

if(Ext.form.TextField){
   Ext.apply(Ext.form.TextField.prototype, {
      minLengthText : "该输入项的最小长度是 {0} 个字符",
      maxLengthText : "该输入项的最大长度是 {0} 个字符",
      blankText     : "该输入项为必输项",
      regexText     : "",
      emptyText     : null
   });
}

if(Ext.form.NumberField){
   Ext.apply(Ext.form.NumberField.prototype, {
      minText : "该输入项的最小值是 {0}",
      maxText : "该输入项的最大值是 {0}",
      nanText : "{0} 不是有效数值"
   });
}

if(Ext.form.DateField){
   Ext.apply(Ext.form.DateField.prototype, {
      disabledDaysText  : "禁用",
      disabledDatesText : "禁用",
      minText           : "该输入项的日期必须在 {0} 之后",
      maxText           : "该输入项的日期必须在 {0} 之前",
      invalidText       : "{0} 是无效的日期 - 必须符合格式： {1}",
      format            : "y年m月d日"
   });
}

if(Ext.form.ComboBox){
   Ext.apply(Ext.form.ComboBox.prototype, {
      loadingText       : "加载中...",
      valueNotFoundText : undefined
   });
}

if(Ext.form.VTypes){
   Ext.apply(Ext.form.VTypes, {
      emailText    : '该输入项必须是电子邮件地址，格式如： "user@example.com"',
      urlText      : '该输入项必须是URL地址，格式如： "http:/'+'/www.example.com"',
      alphaText    : '该输入项只能包含半角字母和_',//update
      alphanumText : '该输入项只能包含半角字母,数字和_'//update
   });
}
//add HTMLEditor's tips by andy_ghg
if(Ext.form.HtmlEditor){
  Ext.apply(Ext.form.HtmlEditor.prototype, {
    createLinkText : '添加超级链接:',
    buttonTips : {
      bold : {
        title: '粗体 (Ctrl+B)',
        text: '将选中的文字设置为粗体',
        cls: 'x-html-editor-tip'
      },
      italic : {
        title: '斜体 (Ctrl+I)',
        text: '将选中的文字设置为斜体',
        cls: 'x-html-editor-tip'
      },
      underline : {
        title: '下划线 (Ctrl+U)',
        text: '给所选文字加下划线',
        cls: 'x-html-editor-tip'
      },
      increasefontsize : {
        title: '增大字体',
        text: '增大字号',
        cls: 'x-html-editor-tip'
      },
      decreasefontsize : {
        title: '缩小字体',
        text: '减小字号',
        cls: 'x-html-editor-tip'
      },
      backcolor : {
        title: '以不同颜色突出显示文本',
        text: '使文字看上去像是用荧光笔做了标记一样',
        cls: 'x-html-editor-tip'
      },
      forecolor : {
        title: '字体颜色',
        text: '更改字体颜色',
        cls: 'x-html-editor-tip'
      },
      justifyleft : {
        title: '左对齐',
        text: '将文字左对齐',
        cls: 'x-html-editor-tip'
      },
      justifycenter : {
        title: '居中',
        text: '将文字居中对齐',
        cls: 'x-html-editor-tip'
      },
      justifyright : {
        title: '右对齐',
        text: '将文字右对齐',
        cls: 'x-html-editor-tip'
      },
      insertunorderedlist : {
        title: '项目符号',
        text: '开始创建项目符号列表',
        cls: 'x-html-editor-tip'
      },
      insertorderedlist : {
        title: '编号',
        text: '开始创建编号列表',
        cls: 'x-html-editor-tip'
      },
      createlink : {
        title: '转成超级链接',
        text: '将所选文本转换成超级链接',
        cls: 'x-html-editor-tip'
      },
      sourceedit : {
        title: '代码视图',
        text: '以代码的形式展现文本',
        cls: 'x-html-editor-tip'
      }
    }
  });
}

if(Ext.grid.GridView){
   Ext.apply(Ext.grid.GridView.prototype, {
      sortAscText  : "正序",//update
      sortDescText : "倒序",//update
      lockText     : "锁定列",//update
      unlockText   : "解除锁定",//update
      columnsText  : "列"
   });
}

if(Ext.grid.PropertyColumnModel){
   Ext.apply(Ext.grid.PropertyColumnModel.prototype, {
      nameText   : "名称",
      valueText  : "值",
      dateFormat : "y年m月d日"
   });
}

if(Ext.layout.BorderLayout && Ext.layout.BorderLayout.SplitRegion){
   Ext.apply(Ext.layout.BorderLayout.SplitRegion.prototype, {
      splitTip            : "拖动来改变尺寸.",
      collapsibleSplitTip : "拖动来改变尺寸. 双击隐藏."
   });
}


The source code

/*!
 * licensing@extjs.com
 * http://www.extjs.com/license
 */
﻿/*
 * Traditional Chinese translation
 * By hata1234
 * 09 April 2007
 */

Ext.UpdateManager.defaults.indicatorText = '
讀取中...
';

if(Ext.View){
    Ext.View.prototype.emptyText = "";
}

if(Ext.grid.GridPanel){
    Ext.grid.GridPanel.prototype.ddText = "選擇了 {0} 行";
}

if(Ext.TabPanelItem){
    Ext.TabPanelItem.prototype.closeText = "關閉此標籤";
}

if(Ext.form.Field){
    Ext.form.Field.prototype.invalidText = "數值不符合欄位規定";
}

if(Ext.LoadMask){
    Ext.LoadMask.prototype.msg = "讀取中...";
}

Date.monthNames = [
    "一月",
    "二月",
    "三月",
    "四月",
    "五月",
    "六月",
    "七月",
    "八月",
    "九月",
    "十月",
    "十一月",
    "十二月"
];

Date.dayNames = [
    "日",
    "一",
    "二",
    "三",
    "四",
    "五",
    "六"
];

if(Ext.MessageBox){
    Ext.MessageBox.buttonText = {
        ok : "確定",
        cancel : "取消",
        yes : "是",
        no : "否"
    };
}

if(Ext.util.Format){
    Ext.util.Format.date = function(v, format){
       if(!v) return "";
       if(!(v instanceof Date)) v = new Date(Date.parse(v));
       return v.dateFormat(format || "Y/m/d");
    };
}

if(Ext.DatePicker){
    Ext.apply(Ext.DatePicker.prototype, {
       todayText         : "今天",
       minText           : "日期必須大於最小容許日期",
       maxText           : "日期必須小於最大容許日期",
       disabledDaysText  : "",
       disabledDatesText : "",
       monthNames        : Date.monthNames,
       dayNames          : Date.dayNames,
       nextText          : "下個月 (Ctrl+右方向鍵)",
       prevText          : "上個月 (Ctrl+左方向鍵)",
       monthYearText     : "選擇月份 (Ctrl+上/下方向鍵選擇年份)",
       todayTip          : "{0} (空白鍵)",
       format            : "y/m/d",
       okText            : "确定",
       cancelText        : "取消"
    });
}

if(Ext.PagingToolbar){
    Ext.apply(Ext.PagingToolbar.prototype, {
       beforePageText : "第",
       afterPageText  : "頁，共{0}頁",
       firstText      : "第一頁",
       prevText       : "上一頁",
       nextText       : "下一頁",
       lastText       : "最後頁",
       refreshText    : "重新整理",
       displayMsg     : "顯示{0} - {1}筆,共{2}筆",
       emptyMsg       : '沒有任何資料'
    });
}

if(Ext.form.TextField){
    Ext.apply(Ext.form.TextField.prototype, {
       minLengthText : "此欄位最少要輸入 {0} 個字",
       maxLengthText : "此欄位最多輸入 {0} 個字",
       blankText     : "此欄位為必填",
       regexText     : "",
       emptyText     : null
    });
}

if(Ext.form.NumberField){
    Ext.apply(Ext.form.NumberField.prototype, {
       minText : "此欄位之數值必須大於 {0}",
       maxText : "此欄位之數值必須小於 {0}",
       nanText : "{0} 不是合法的數字"
    });
}

if(Ext.form.DateField){
    Ext.apply(Ext.form.DateField.prototype, {
       disabledDaysText  : "無法使用",
       disabledDatesText : "無法使用",
       minText           : "此欄位之日期必須在 {0} 之後",
       maxText           : "此欄位之日期必須在 {0} 之前",
       invalidText       : "{0} 不是正確的日期格式 - 必須像是 「 {1} 」 這樣的格式",
       format            : "Y/m/d"
    });
}

if(Ext.form.ComboBox){
    Ext.apply(Ext.form.ComboBox.prototype, {
       loadingText       : "讀取中 ...",
       valueNotFoundText : undefined
    });
}

if(Ext.form.VTypes){
    Ext.apply(Ext.form.VTypes, {
       emailText    : '此欄位必須輸入像 "user@example.com" 之E-Mail格式',
       urlText      : '此欄位必須輸入像 "http:/'+'/www.example.com" 之網址格式',
       alphaText    : '此欄位僅能輸入半形英文字母及底線( _ )符號',
       alphanumText : '此欄位僅能輸入半形英文字母、數字及底線( _ )符號'
    });
}

if(Ext.grid.GridView){
    Ext.apply(Ext.grid.GridView.prototype, {
       sortAscText  : "正向排序",
       sortDescText : "反向排序",
       lockText     : "鎖定欄位",
       unlockText   : "解開欄位鎖定",
       columnsText  : "欄位"
    });
}

if(Ext.grid.PropertyColumnModel){
    Ext.apply(Ext.grid.PropertyColumnModel.prototype, {
       nameText   : "名稱",
       valueText  : "數值",
       dateFormat : "Y/m/d"
    });
}

if(Ext.layout.BorderLayout && Ext.layout.BorderLayout.SplitRegion){
    Ext.apply(Ext.layout.BorderLayout.SplitRegion.prototype, {
       splitTip            : "拖曳縮放大小.",
       collapsibleSplitTip : "拖曳縮放大小. 滑鼠雙擊隱藏."
    });
}


The source code

/*!
 * licensing@extjs.com
 * http://www.extjs.com/license
 */
/**
 * @class Ext
 */

Ext.ns("Ext.grid", "Ext.list", "Ext.dd", "Ext.tree", "Ext.form", "Ext.menu",
       "Ext.state", "Ext.layout", "Ext.app", "Ext.ux", "Ext.chart", "Ext.direct");

/**
     * Namespace alloted for extensions to the framework.
     * @property ux
     * @type Object
     */

Ext.apply(Ext, function(){
    var E = Ext,
        idSeed = 0,
        scrollWidth = null;

    return {

/**
        * A reusable empty function
        * @property
        * @type Function
        */
        emptyFn : function(){},

/**
         * URL to a 1x1 transparent gif image used by Ext to create inline icons with CSS background images.
         * In older versions of IE, this defaults to "http://extjs.com/s.gif" and you should change this to a URL on your server.
         * For other browsers it uses an inline data URL.
         * @type String
         */
        BLANK_IMAGE_URL : Ext.isIE6 || Ext.isIE7 || Ext.isAir ?
                            'http:/' + '/extjs.com/s.gif' :
                            'data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==',

        extendX : function(supr, fn){
            return Ext.extend(supr, fn(supr.prototype));
        },

/**
         * Returns the current HTML document object as an {@link Ext.Element}.
         * @return Ext.Element The document
         */
        getDoc : function(){
            return Ext.get(document);
        },

/**
         * Utility method for validating that a value is numeric, returning the specified default value if it is not.
         * @param {Mixed} value Should be a number, but any type will be handled appropriately
         * @param {Number} defaultValue The value to return if the original value is non-numeric
         * @return {Number} Value, if numeric, else defaultValue
         */
        num : function(v, defaultValue){
            v = Number(Ext.isEmpty(v) || Ext.isArray(v) || Ext.isBoolean(v) || (Ext.isString(v) && v.trim().length == 0) ? NaN : v);
            return isNaN(v) ? defaultValue : v;
        },

/**
         *
Utility method for returning a default value if the passed value is empty.

         *
The value is deemed to be empty if it is

         *
  • null
    •
         *
  • undefined
    •
         *
  • an empty array
    •
         *
  • a zero length string (Unless the allowBlank parameter is true)
    •
         *

         * @param {Mixed} value The value to test
         * @param {Mixed} defaultValue The value to return if the original value is empty
         * @param {Boolean} allowBlank (optional) true to allow zero length strings to qualify as non-empty (defaults to false)
         * @return {Mixed} value, if non-empty, else defaultValue
         */
        value : function(v, defaultValue, allowBlank){
            return Ext.isEmpty(v, allowBlank) ? defaultValue : v;
        },

/**
         * Escapes the passed string for use in a regular expression
         * @param {String} str
         * @return {String}
         */
        escapeRe : function(s) {
            return s.replace(/([-.*+?^${}()|[\]\/\\])/g, "\\$1");
        },

        sequence : function(o, name, fn, scope){
            o[name] = o[name].createSequence(fn, scope);
        },

/**
         * Applies event listeners to elements by selectors when the document is ready.
         * The event name is specified with an @ suffix.
         *

Ext.addBehaviors({
    // add a listener for click on all anchors in element with id foo
    '#foo a@click' : function(e, t){
        // do something
    },

    // add the same listener to multiple selectors (separated by comma BEFORE the @)
    '#foo a, #bar span.some-class@mouseover' : function(){
        // do something
    }
});
         *

         * @param {Object} obj The list of behaviors to apply
         */
        addBehaviors : function(o){
            if(!Ext.isReady){
                Ext.onReady(function(){
                    Ext.addBehaviors(o);
                });
            } else {
                var cache = {}, // simple cache for applying multiple behaviors to same selector does query multiple times
                    parts,
                    b,
                    s;
                for (b in o) {
                    if ((parts = b.split('@'))[1]) { // for Object prototype breakers
                        s = parts[0];
                        if(!cache[s]){
                            cache[s] = Ext.select(s);
                        }
                        cache[s].on(parts[1], o[b]);
                    }
                }
                cache = null;
            }
        },

/**
         * Utility method for getting the width of the browser scrollbar. This can differ depending on
         * operating system settings, such as the theme or font size.
         * @param {Boolean} force (optional) true to force a recalculation of the value.
         * @return {Number} The width of the scrollbar.
         */
        getScrollBarWidth: function(force){
            if(!Ext.isReady){
                return 0;
            }

            if(force === true || scrollWidth === null){
                    // Append our div, do our calculation and then remove it
                var div = Ext.getBody().createChild('
'),
                    child = div.child('div', true);
                var w1 = child.offsetWidth;
                div.setStyle('overflow', (Ext.isWebKit || Ext.isGecko) ? 'auto' : 'scroll');
                var w2 = child.offsetWidth;
                div.remove();
                // Need to add 2 to ensure we leave enough space
                scrollWidth = w1 - w2 + 2;
            }
            return scrollWidth;
        },

        // deprecated
        combine : function(){
            var as = arguments, l = as.length, r = [];
            for(var i = 0; i < l; i++){
                var a = as[i];
                if(Ext.isArray(a)){
                    r = r.concat(a);
                }else if(a.length !== undefined && !a.substr){
                    r = r.concat(Array.prototype.slice.call(a, 0));
                }else{
                    r.push(a);
                }
            }
            return r;
        },

/**
         * Copies a set of named properties fom the source object to the destination object.
         *
example:

ImageComponent = Ext.extend(Ext.BoxComponent, {
    initComponent: function() {
        this.autoEl = { tag: 'img' };
        MyComponent.superclass.initComponent.apply(this, arguments);
        this.initialBox = Ext.copyTo({}, this.initialConfig, 'x,y,width,height');
    }
});
         *

         * @param {Object} dest The destination object.
         * @param {Object} source The source object.
         * @param {Array/String} names Either an Array of property names, or a comma-delimited list
         * of property names to copy.
         * @return {Object} The modified object.
        */
        copyTo : function(dest, source, names){
            if(Ext.isString(names)){
                names = names.split(/[,;\s]/);
            }
            Ext.each(names, function(name){
                if(source.hasOwnProperty(name)){
                    dest[name] = source[name];
                }
            }, this);
            return dest;
        },

/**
         * Attempts to destroy any objects passed to it by removing all event listeners, removing them from the
         * DOM (if applicable) and calling their destroy functions (if available).  This method is primarily
         * intended for arguments of type {@link Ext.Element} and {@link Ext.Component}, but any subclass of
         * {@link Ext.util.Observable} can be passed in.  Any number of elements and/or components can be
         * passed into this function in a single call as separate arguments.
         * @param {Mixed} arg1 An {@link Ext.Element}, {@link Ext.Component}, or an Array of either of these to destroy
         * @param {Mixed} arg2 (optional)
         * @param {Mixed} etc... (optional)
         */
        destroy : function(){
            Ext.each(arguments, function(arg){
                if(arg){
                    if(Ext.isArray(arg)){
                        this.destroy.apply(this, arg);
                    }else if(Ext.isFunction(arg.destroy)){
                        arg.destroy();
                    }else if(arg.dom){
                        arg.remove();
                    }
                }
            }, this);
        },

/**
         * Attempts to destroy and then remove a set of named properties of the passed object.
         * @param {Object} o The object (most likely a Component) who's properties you wish to destroy.
         * @param {Mixed} arg1 The name of the property to destroy and remove from the object.
         * @param {Mixed} etc... More property names to destroy and remove.
         */
        destroyMembers : function(o, arg1, arg2, etc){
            for(var i = 1, a = arguments, len = a.length; i < len; i++) {
                Ext.destroy(o[a[i]]);
                delete o[a[i]];
            }
        },

/**
         * Creates a copy of the passed Array with falsy values removed.
         * @param {Array/NodeList} arr The Array from which to remove falsy values.
         * @return {Array} The new, compressed Array.
         */
        clean : function(arr){
            var ret = [];
            Ext.each(arr, function(v){
                if(!!v){
                    ret.push(v);
                }
            });
            return ret;
        },

/**
         * Creates a copy of the passed Array, filtered to contain only unique values.
         * @param {Array} arr The Array to filter
         * @return {Array} The new Array containing unique values.
         */
        unique : function(arr){
            var ret = [],
                collect = {};

            Ext.each(arr, function(v) {
                if(!collect[v]){
                    ret.push(v);
                }
                collect[v] = true;
            });
            return ret;
        },

/**
         * Recursively flattens into 1-d Array. Injects Arrays inline.
         * @param {Array} arr The array to flatten
         * @return {Array} The new, flattened array.
         */
        flatten : function(arr){
            var worker = [];
            function rFlatten(a) {
                Ext.each(a, function(v) {
                    if(Ext.isArray(v)){
                        rFlatten(v);
                    }else{
                        worker.push(v);
                    }
                });
                return worker;
            }
            return rFlatten(arr);
        },

/**
         * Returns the minimum value in the Array.
         * @param {Array|NodeList} arr The Array from which to select the minimum value.
         * @param {Function} comp (optional) a function to perform the comparision which determines minimization.
         *                   If omitted the "<" operator will be used. Note: gt = 1; eq = 0; lt = -1
         * @return {Object} The minimum value in the Array.
         */
        min : function(arr, comp){
            var ret = arr[0];
            comp = comp || function(a,b){ return a < b ? -1 : 1; };
            Ext.each(arr, function(v) {
                ret = comp(ret, v) == -1 ? ret : v;
            });
            return ret;
        },

/**
         * Returns the maximum value in the Array
         * @param {Array|NodeList} arr The Array from which to select the maximum value.
         * @param {Function} comp (optional) a function to perform the comparision which determines maximization.
         *                   If omitted the ">" operator will be used. Note: gt = 1; eq = 0; lt = -1
         * @return {Object} The maximum value in the Array.
         */
        max : function(arr, comp){
            var ret = arr[0];
            comp = comp || function(a,b){ return a > b ? 1 : -1; };
            Ext.each(arr, function(v) {
                ret = comp(ret, v) == 1 ? ret : v;
            });
            return ret;
        },

/**
         * Calculates the mean of the Array
         * @param {Array} arr The Array to calculate the mean value of.
         * @return {Number} The mean.
         */
        mean : function(arr){
           return arr.length > 0 ? Ext.sum(arr) / arr.length : undefined;
        },

/**
         * Calculates the sum of the Array
         * @param {Array} arr The Array to calculate the sum value of.
         * @return {Number} The sum.
         */
        sum : function(arr){
           var ret = 0;
           Ext.each(arr, function(v) {
               ret += v;
           });
           return ret;
        },

/**
         * Partitions the set into two sets: a true set and a false set.
         * Example:
         * Example2:
         *

// Example 1:
Ext.partition([true, false, true, true, false]); // [[true, true, true], [false, false]]

// Example 2:
Ext.partition(
    Ext.query("p"),
    function(val){
        return val.className == "class1"
    }
);
// true are those paragraph elements with a className of "class1",
// false set are those that do not have that className.
         *

         * @param {Array|NodeList} arr The array to partition
         * @param {Function} truth (optional) a function to determine truth.  If this is omitted the element
         *                   itself must be able to be evaluated for its truthfulness.
         * @return {Array} [true,false]
         */
        partition : function(arr, truth){
            var ret = [[],[]];
            Ext.each(arr, function(v, i, a) {
                ret[ (truth && truth(v, i, a)) || (!truth && v) ? 0 : 1].push(v);
            });
            return ret;
        },

/**
         * Invokes a method on each item in an Array.
         *

// Example:
Ext.invoke(Ext.query("p"), "getAttribute", "id");
// [el1.getAttribute("id"), el2.getAttribute("id"), ..., elN.getAttribute("id")]
         *

         * @param {Array|NodeList} arr The Array of items to invoke the method on.
         * @param {String} methodName The method name to invoke.
         * @param {...*} args Arguments to send into the method invocation.
         * @return {Array} The results of invoking the method on each item in the array.
         */
        invoke : function(arr, methodName){
            var ret = [],
                args = Array.prototype.slice.call(arguments, 2);
            Ext.each(arr, function(v,i) {
                if (v && Ext.isFunction(v[methodName])) {
                    ret.push(v[methodName].apply(v, args));
                } else {
                    ret.push(undefined);
                }
            });
            return ret;
        },

/**
         * Plucks the value of a property from each item in the Array
         *

// Example:
Ext.pluck(Ext.query("p"), "className"); // [el1.className, el2.className, ..., elN.className]
         *

         * @param {Array|NodeList} arr The Array of items to pluck the value from.
         * @param {String} prop The property name to pluck from each element.
         * @return {Array} The value from each item in the Array.
         */
        pluck : function(arr, prop){
            var ret = [];
            Ext.each(arr, function(v) {
                ret.push( v[prop] );
            });
            return ret;
        },

/**
         *
Zips N sets together.

         *

// Example 1:
Ext.zip([1,2,3],[4,5,6]); // [[1,4],[2,5],[3,6]]
// Example 2:
Ext.zip(
    [ "+", "-", "+"],
    [  12,  10,  22],
    [  43,  15,  96],
    function(a, b, c){
        return "$" + a + "" + b + "." + c
    }
); // ["$+12.43", "$-10.15", "$+22.96"]
         *

         * @param {Arrays|NodeLists} arr This argument may be repeated. Array(s) to contribute values.
         * @param {Function} zipper (optional) The last item in the argument list. This will drive how the items are zipped together.
         * @return {Array} The zipped set.
         */
        zip : function(){
            var parts = Ext.partition(arguments, function( val ){ return !Ext.isFunction(val); }),
                arrs = parts[0],
                fn = parts[1][0],
                len = Ext.max(Ext.pluck(arrs, "length")),
                ret = [];

            for (var i = 0; i < len; i++) {
                ret[i] = [];
                if(fn){
                    ret[i] = fn.apply(fn, Ext.pluck(arrs, i));
                }else{
                    for (var j = 0, aLen = arrs.length; j < aLen; j++){
                        ret[i].push( arrs[j][i] );
                    }
                }
            }
            return ret;
        },

/**
         * This is shorthand reference to {@link Ext.ComponentMgr#get}.
         * Looks up an existing {@link Ext.Component Component} by {@link Ext.Component#id id}
         * @param {String} id The component {@link Ext.Component#id id}
         * @return Ext.Component The Component, undefined if not found, or null if a
         * Class was found.
        */
        getCmp : function(id){
            return Ext.ComponentMgr.get(id);
        },

/**
         * By default, Ext intelligently decides whether floating elements should be shimmed. If you are using flash,
         * you may want to set this to true.
         * @type Boolean
         */
        useShims: E.isIE6 || (E.isMac && E.isGecko2),

        // inpired by a similar function in mootools library

/**
         * Returns the type of object that is passed in. If the object passed in is null or undefined it
         * return false otherwise it returns one of the following values:

         *
  • string: If the object passed is a string
    •
         *
  • number: If the object passed is a number
    •
         *
  • boolean: If the object passed is a boolean value
    •
         *
  • date: If the object passed is a Date object
    •
         *
  • function: If the object passed is a function reference
    •
         *
  • object: If the object passed is an object
    •
         *
  • array: If the object passed is an array
    •
         *
  • regexp: If the object passed is a regular expression
    •
         *
  • element: If the object passed is a DOM Element
    •
         *
  • nodelist: If the object passed is a DOM NodeList
    •
         *
  • textnode: If the object passed is a DOM text node and contains something other than whitespace
    •
         *
  • whitespace: If the object passed is a DOM text node and contains only whitespace
    •
         *

         * @param {Mixed} object
         * @return {String}
         */
        type : function(o){
            if(o === undefined || o === null){
                return false;
            }
            if(o.htmlElement){
                return 'element';
            }
            var t = typeof o;
            if(t == 'object' && o.nodeName) {
                switch(o.nodeType) {
                    case 1: return 'element';
                    case 3: return (/\S/).test(o.nodeValue) ? 'textnode' : 'whitespace';
                }
            }
            if(t == 'object' || t == 'function') {
                switch(o.constructor) {
                    case Array: return 'array';
                    case RegExp: return 'regexp';
                    case Date: return 'date';
                }
                if(Ext.isNumber(o.length) && Ext.isFunction(o.item)) {
                    return 'nodelist';
                }
            }
            return t;
        },

        intercept : function(o, name, fn, scope){
            o[name] = o[name].createInterceptor(fn, scope);
        },

        // internal
        callback : function(cb, scope, args, delay){
            if(Ext.isFunction(cb)){
                if(delay){
                    cb.defer(delay, scope, args || []);
                }else{
                    cb.apply(scope, args || []);
                }
            }
        }
    };
}());

/**
 * @class Function
 * These functions are available on every Function object (any JavaScript function).
 */
Ext.apply(Function.prototype, {

/**
     * Create a combined function call sequence of the original function + the passed function.
     * The resulting function returns the results of the original function.
     * The passed fcn is called with the parameters of the original function. Example usage:
     *

var sayHi = function(name){
    alert('Hi, ' + name);
}

sayHi('Fred'); // alerts "Hi, Fred"

var sayGoodbye = sayHi.createSequence(function(name){
    alert('Bye, ' + name);
});

sayGoodbye('Fred'); // both alerts show

     * @param {Function} fcn The function to sequence
     * @param {Object} scope (optional) The scope (this reference) in which the passed function is executed.
     * If omitted, defaults to the scope in which the original function is called or the browser window.
     * @return {Function} The new function
     */
    createSequence : function(fcn, scope){
        var method = this;
        return !Ext.isFunction(fcn) ?
                this :
                function(){
                    var retval = method.apply(this || window, arguments);
                    fcn.apply(scope || this || window, arguments);
                    return retval;
                };
    }
});

/**
 * @class String
 * These functions are available as static methods on the JavaScript String object.
 */
Ext.applyIf(String, {

/**
     * Escapes the passed string for ' and \
     * @param {String} string The string to escape
     * @return {String} The escaped string
     * @static
     */
    escape : function(string) {
        return string.replace(/('|\\)/g, "\\$1");
    },

/**
     * Pads the left side of a string with a specified character.  This is especially useful
     * for normalizing number and date strings.  Example usage:
     *

var s = String.leftPad('123', 5, '0');
// s now contains the string: '00123'
     *

     * @param {String} string The original string
     * @param {Number} size The total length of the output string
     * @param {String} char (optional) The character with which to pad the original string (defaults to empty string " ")
     * @return {String} The padded string
     * @static
     */
    leftPad : function (val, size, ch) {
        var result = String(val);
        if(!ch) {
            ch = " ";
        }
        while (result.length < size) {
            result = ch + result;
        }
        return result;
    }
});

/**
 * Utility function that allows you to easily switch a string between two alternating values.  The passed value
 * is compared to the current string, and if they are equal, the other value that was passed in is returned.  If
 * they are already different, the first value passed in is returned.  Note that this method returns the new value
 * but does not change the current string.
 *

// alternate sort directions
sort = sort.toggle('ASC', 'DESC');

// instead of conditional logic:
sort = (sort == 'ASC' ? 'DESC' : 'ASC');

 * @param {String} value The value to compare to the current string
 * @param {String} other The new value to use if the string already equals the first value passed in
 * @return {String} The new value
 */
String.prototype.toggle = function(value, other){
    return this == value ? other : value;
};

/**
 * Trims whitespace from either end of a string, leaving spaces within the string intact.  Example:
 *

var s = '  foo bar  ';
alert('-' + s + '-');         //alerts "- foo bar -"
alert('-' + s.trim() + '-');  //alerts "-foo bar-"

 * @return {String} The trimmed string
 */
String.prototype.trim = function(){
    var re = /^\s+|\s+$/g;
    return function(){ return this.replace(re, ""); };
}();

// here to prevent dependency on Date.js

/**
 Returns the number of milliseconds between this date and date
 @param {Date} date (optional) Defaults to now
 @return {Number} The diff in milliseconds
 @member Date getElapsed
 */
Date.prototype.getElapsed = function(date) {
    return Math.abs((date || new Date()).getTime()-this.getTime());
};

/**
 * @class Number
 */
Ext.applyIf(Number.prototype, {

/**
     * Checks whether or not the current number is within a desired range.  If the number is already within the
     * range it is returned, otherwise the min or max value is returned depending on which side of the range is
     * exceeded.  Note that this method returns the constrained value but does not change the current number.
     * @param {Number} min The minimum number in the range
     * @param {Number} max The maximum number in the range
     * @return {Number} The constrained value if outside the range, otherwise the current value
     */
    constrain : function(min, max){
        return Math.min(Math.max(this, min), max);
    }
});


The source code

/*!
 * licensing@extjs.com
 * http://www.extjs.com/license
 */

// for old browsers
window.undefined = window.undefined;

/**
 * @class Ext
 * Ext core utilities and functions.
 * @singleton
 */

Ext = {

/**
     * The version of the framework
     * @type String
     */
    version : '3.2.0'
};

/**
 * Copies all the properties of config to obj.
 * @param {Object} obj The receiver of the properties
 * @param {Object} config The source of the properties
 * @param {Object} defaults A different object that will also be applied for default values
 * @return {Object} returns obj
 * @member Ext apply
 */
Ext.apply = function(o, c, defaults){
    // no "this" reference for friendly out of scope calls
    if(defaults){
        Ext.apply(o, defaults);
    }
    if(o && c && typeof c == 'object'){
        for(var p in c){
            o[p] = c[p];
        }
    }
    return o;
};

(function(){
    var idSeed = 0,
        toString = Object.prototype.toString,
        ua = navigator.userAgent.toLowerCase(),
        check = function(r){
            return r.test(ua);
        },
        DOC = document,
        isStrict = DOC.compatMode == "CSS1Compat",
        isOpera = check(/opera/),
        isChrome = check(/\bchrome\b/),
        isWebKit = check(/webkit/),
        isSafari = !isChrome && check(/safari/),
        isSafari2 = isSafari && check(/applewebkit\/4/), // unique to Safari 2
        isSafari3 = isSafari && check(/version\/3/),
        isSafari4 = isSafari && check(/version\/4/),
        isIE = !isOpera && check(/msie/),
        isIE7 = isIE && check(/msie 7/),
        isIE8 = isIE && check(/msie 8/),
        isIE6 = isIE && !isIE7 && !isIE8,
        isGecko = !isWebKit && check(/gecko/),
        isGecko2 = isGecko && check(/rv:1\.8/),
        isGecko3 = isGecko && check(/rv:1\.9/),
        isBorderBox = isIE && !isStrict,
        isWindows = check(/windows|win32/),
        isMac = check(/macintosh|mac os x/),
        isAir = check(/adobeair/),
        isLinux = check(/linux/),
        isSecure = /^https/i.test(window.location.protocol);

    // remove css image flicker
    if(isIE6){
        try{
            DOC.execCommand("BackgroundImageCache", false, true);
        }catch(e){}
    }

    Ext.apply(Ext, {

/**
         * URL to a blank file used by Ext when in secure mode for iframe src and onReady src to prevent
         * the IE insecure content warning ('about:blank', except for IE in secure mode, which is 'javascript:""').
         * @type String
         */
        SSL_SECURE_URL : isSecure && isIE ? 'javascript:""' : 'about:blank',

/**
         * True if the browser is in strict (standards-compliant) mode, as opposed to quirks mode
         * @type Boolean
         */
        isStrict : isStrict,

/**
         * True if the page is running over SSL
         * @type Boolean
         */
        isSecure : isSecure,

/**
         * True when the document is fully initialized and ready for action
         * @type Boolean
         */
        isReady : false,

/**
         * True if the {@link Ext.Fx} Class is available
         * @type Boolean
         * @property enableFx
         */

/**
         * True to automatically uncache orphaned Ext.Elements periodically (defaults to true)
         * @type Boolean
         */
        enableGarbageCollector : true,

/**
         * True to automatically purge event listeners during garbageCollection (defaults to false).
         * @type Boolean
         */
        enableListenerCollection : false,

/**
         * EXPERIMENTAL - True to cascade listener removal to child elements when an element is removed.
         * Currently not optimized for performance.
         * @type Boolean
         */
        enableNestedListenerRemoval : false,

/**
         * Indicates whether to use native browser parsing for JSON methods.
         * This option is ignored if the browser does not support native JSON methods.
         * Note: Native JSON methods will not work with objects that have functions.
         * Also, property names must be quoted, otherwise the data will not parse. (Defaults to false)
         * @type Boolean
         */
        USE_NATIVE_JSON : false,

/**
         * Copies all the properties of config to obj if they don't already exist.
         * @param {Object} obj The receiver of the properties
         * @param {Object} config The source of the properties
         * @return {Object} returns obj
         */
        applyIf : function(o, c){
            if(o){
                for(var p in c){
                    if(!Ext.isDefined(o[p])){
                        o[p] = c[p];
                    }
                }
            }
            return o;
        },

/**
         * Generates unique ids. If the element already has an id, it is unchanged
         * @param {Mixed} el (optional) The element to generate an id for
         * @param {String} prefix (optional) Id prefix (defaults "ext-gen")
         * @return {String} The generated Id.
         */
        id : function(el, prefix){
            el = Ext.getDom(el, true) || {};
            if (!el.id) {
                el.id = (prefix || "ext-gen") + (++idSeed);
            }
            return el.id;
        },

/**
         *
Extends one class to create a subclass and optionally overrides members with the passed literal. This method
         * also adds the function "override()" to the subclass that can be used to override members of the class.

         * For example, to create a subclass of Ext GridPanel:
         *

MyGridPanel = Ext.extend(Ext.grid.GridPanel, {
    constructor: function(config) {

//      Create configuration for this Grid.
        var store = new Ext.data.Store({...});
        var colModel = new Ext.grid.ColumnModel({...});

//      Create a new config object containing our computed properties
//      *plus* whatever was in the config parameter.
        config = Ext.apply({
            store: store,
            colModel: colModel
        }, config);

        MyGridPanel.superclass.constructor.call(this, config);

//      Your postprocessing here
    },

    yourMethod: function() {
        // etc.
    }
});

         *
         *
This function also supports a 3-argument call in which the subclass's constructor is
         * passed as an argument. In this form, the parameters are as follows:

         *

         *
  • subclass : Function
    The subclass constructor.
    •
         *
  • superclass : Function
    The constructor of class being extended
    •
         *
  • overrides : Object
    A literal with members which are copied into the subclass's
         * prototype, and are therefore shared among all instances of the new class.
    •
         *

         *
         * @param {Function} superclass The constructor of class being extended.
         * @param {Object} overrides
A literal with members which are copied into the subclass's
         * prototype, and are therefore shared between all instances of the new class.

         *
This may contain a special member named constructor. This is used
         * to define the constructor of the new class, and is returned. If this property is
         * not specified, a constructor is generated and returned which just calls the
         * superclass's constructor passing on its parameters.

         *
It is essential that you call the superclass constructor in any provided constructor. See example code.

         * @return {Function} The subclass constructor from the overrides parameter, or a generated one if not provided.
         */
        extend : function(){
            // inline overrides
            var io = function(o){
                for(var m in o){
                    this[m] = o[m];
                }
            };
            var oc = Object.prototype.constructor;

            return function(sb, sp, overrides){
                if(Ext.isObject(sp)){
                    overrides = sp;
                    sp = sb;
                    sb = overrides.constructor != oc ? overrides.constructor : function(){sp.apply(this, arguments);};
                }
                var F = function(){},
                    sbp,
                    spp = sp.prototype;

                F.prototype = spp;
                sbp = sb.prototype = new F();
                sbp.constructor=sb;
                sb.superclass=spp;
                if(spp.constructor == oc){
                    spp.constructor=sp;
                }
                sb.override = function(o){
                    Ext.override(sb, o);
                };
                sbp.superclass = sbp.supr = (function(){
                    return spp;
                });
                sbp.override = io;
                Ext.override(sb, overrides);
                sb.extend = function(o){return Ext.extend(sb, o);};
                return sb;
            };
        }(),

/**
         * Adds a list of functions to the prototype of an existing class, overwriting any existing methods with the same name.
         * Usage:

Ext.override(MyClass, {
    newMethod1: function(){
        // etc.
    },
    newMethod2: function(foo){
        // etc.
    }
});

         * @param {Object} origclass The class to override
         * @param {Object} overrides The list of functions to add to origClass.  This should be specified as an object literal
         * containing one or more methods.
         * @method override
         */
        override : function(origclass, overrides){
            if(overrides){
                var p = origclass.prototype;
                Ext.apply(p, overrides);
                if(Ext.isIE && overrides.hasOwnProperty('toString')){
                    p.toString = overrides.toString;
                }
            }
        },

/**
         * Creates namespaces to be used for scoping variables and classes so that they are not global.
         * Specifying the last node of a namespace implicitly creates all other nodes. Usage:
         *

Ext.namespace('Company', 'Company.data');
Ext.namespace('Company.data'); // equivalent and preferable to above syntax
Company.Widget = function() { ... }
Company.data.CustomStore = function(config) { ... }

         * @param {String} namespace1
         * @param {String} namespace2
         * @param {String} etc
         * @return {Object} The namespace object. (If multiple arguments are passed, this will be the last namespace created)
         * @method namespace
         */
        namespace : function(){
            var o, d;
            Ext.each(arguments, function(v) {
                d = v.split(".");
                o = window[d[0]] = window[d[0]] || {};
                Ext.each(d.slice(1), function(v2){
                    o = o[v2] = o[v2] || {};
                });
            });
            return o;
        },

/**
         * Takes an object and converts it to an encoded URL. e.g. Ext.urlEncode({foo: 1, bar: 2}); would return "foo=1&bar=2".  Optionally, property values can be arrays, instead of keys and the resulting string that's returned will contain a name/value pair for each array value.
         * @param {Object} o
         * @param {String} pre (optional) A prefix to add to the url encoded string
         * @return {String}
         */
        urlEncode : function(o, pre){
            var empty,
                buf = [],
                e = encodeURIComponent;

            Ext.iterate(o, function(key, item){
                empty = Ext.isEmpty(item);
                Ext.each(empty ? key : item, function(val){
                    buf.push('&', e(key), '=', (!Ext.isEmpty(val) && (val != key || !empty)) ? (Ext.isDate(val) ? Ext.encode(val).replace(/"/g, '') : e(val)) : '');
                });
            });
            if(!pre){
                buf.shift();
                pre = '';
            }
            return pre + buf.join('');
        },

/**
         * Takes an encoded URL and and converts it to an object. Example:

Ext.urlDecode("foo=1&bar=2"); // returns {foo: "1", bar: "2"}
Ext.urlDecode("foo=1&bar=2&bar=3&bar=4", false); // returns {foo: "1", bar: ["2", "3", "4"]}

         * @param {String} string
         * @param {Boolean} overwrite (optional) Items of the same name will overwrite previous values instead of creating an an array (Defaults to false).
         * @return {Object} A literal with members
         */
        urlDecode : function(string, overwrite){
            if(Ext.isEmpty(string)){
                return {};
            }
            var obj = {},
                pairs = string.split('&'),
                d = decodeURIComponent,
                name,
                value;
            Ext.each(pairs, function(pair) {
                pair = pair.split('=');
                name = d(pair[0]);
                value = d(pair[1]);
                obj[name] = overwrite || !obj[name] ? value :
                            [].concat(obj[name]).concat(value);
            });
            return obj;
        },

/**
         * Appends content to the query string of a URL, handling logic for whether to place
         * a question mark or ampersand.
         * @param {String} url The URL to append to.
         * @param {String} s The content to append to the URL.
         * @return (String) The resulting URL
         */
        urlAppend : function(url, s){
            if(!Ext.isEmpty(s)){
                return url + (url.indexOf('?') === -1 ? '?' : '&') + s;
            }
            return url;
        },

/**
         * Converts any iterable (numeric indices and a length property) into a true array
         * Don't use this on strings. IE doesn't support "abc"[0] which this implementation depends on.
         * For strings, use this instead: "abc".match(/./g) => [a,b,c];
         * @param {Iterable} the iterable object to be turned into a true Array.
         * @return (Array) array
         */
         toArray : function(){
             return isIE ?
                 function(a, i, j, res){
                     res = [];
                     for(var x = 0, len = a.length; x < len; x++) {
                         res.push(a[x]);
                     }
                     return res.slice(i || 0, j || res.length);
                 } :
                 function(a, i, j){
                     return Array.prototype.slice.call(a, i || 0, j || a.length);
                 }
         }(),

        isIterable : function(v){
            //check for array or arguments
            if(Ext.isArray(v) || v.callee){
                return true;
            }
            //check for node list type
            if(/NodeList|HTMLCollection/.test(toString.call(v))){
                return true;
            }
            //NodeList has an item and length property
            //IXMLDOMNodeList has nextNode method, needs to be checked first.
            return ((typeof v.nextNode != 'undefined' || v.item) && Ext.isNumber(v.length));
        },

/**
         * Iterates an array calling the supplied function.
         * @param {Array/NodeList/Mixed} array The array to be iterated. If this
         * argument is not really an array, the supplied function is called once.
         * @param {Function} fn The function to be called with each item. If the
         * supplied function returns false, iteration stops and this method returns
         * the current index. This function is called with
         * the following arguments:
         *

         *
  • item : Mixed
         *
    The item at the current index
         * in the passed array
    •
         *
  • index : Number
         *
    The current index within the array
    •
         *
  • allItems : Array
         *
    The array passed as the first
         * argument to Ext.each.
    •
         *

         * @param {Object} scope The scope (this reference) in which the specified function is executed.
         * Defaults to the item at the current index
         * within the passed array.
         * @return See description for the fn parameter.
         */
        each : function(array, fn, scope){
            if(Ext.isEmpty(array, true)){
                return;
            }
            if(!Ext.isIterable(array) || Ext.isPrimitive(array)){
                array = [array];
            }
            for(var i = 0, len = array.length; i < len; i++){
                if(fn.call(scope || array[i], array[i], i, array) === false){
                    return i;
                };
            }
        },

/**
         * Iterates either the elements in an array, or each of the properties in an object.
         * Note: If you are only iterating arrays, it is better to call {@link #each}.
         * @param {Object/Array} object The object or array to be iterated
         * @param {Function} fn The function to be called for each iteration.
         * The iteration will stop if the supplied function returns false, or
         * all array elements / object properties have been covered. The signature
         * varies depending on the type of object being interated:
         *

         *
  • Arrays : (Object item, Number index, Array allItems)
         *

         * When iterating an array, the supplied function is called with each item.
    •
         *
  • Objects : (String key, Object value, Object)
         *

         * When iterating an object, the supplied function is called with each key-value pair in
         * the object, and the iterated object
    •
         *

         * @param {Object} scope The scope (this reference) in which the specified function is executed. Defaults to
         * the object being iterated.
         */
        iterate : function(obj, fn, scope){
            if(Ext.isEmpty(obj)){
                return;
            }
            if(Ext.isIterable(obj)){
                Ext.each(obj, fn, scope);
                return;
            }else if(Ext.isObject(obj)){
                for(var prop in obj){
                    if(obj.hasOwnProperty(prop)){
                        if(fn.call(scope || obj, prop, obj[prop], obj) === false){
                            return;
                        };
                    }
                }
            }
        },

/**
         * Return the dom node for the passed String (id), dom node, or Ext.Element.
         * Optional 'strict' flag is needed for IE since it can return 'name' and
         * 'id' elements by using getElementById.
         * Here are some examples:
         *

// gets dom node based on id
var elDom = Ext.getDom('elId');
// gets dom node based on the dom node
var elDom1 = Ext.getDom(elDom);

// If we don't know if we are working with an
// Ext.Element or a dom node use Ext.getDom
function(el){
    var dom = Ext.getDom(el);
    // do something with the dom node
}
         *

         * Note: the dom node to be found actually needs to exist (be rendered, etc)
         * when this method is called to be successful.
         * @param {Mixed} el
         * @return HTMLElement
         */
        getDom : function(el, strict){
            if(!el || !DOC){
                return null;
            }
            if (el.dom){
                return el.dom;
            } else {
                if (Ext.isString(el)) {
                    var e = DOC.getElementById(el);
                    // IE returns elements with the 'name' and 'id' attribute.
                    // we do a strict check to return the element with only the id attribute
                    if (e && isIE && strict) {
                        if (el == e.getAttribute('id')) {
                            return e;
                        } else {
                            return null;
                        }
                    }
                    return e;
                } else {
                    return el;
                }
            }
        },

/**
         * Returns the current document body as an {@link Ext.Element}.
         * @return Ext.Element The document body
         */
        getBody : function(){
            return Ext.get(DOC.body || DOC.documentElement);
        },

/**
         * Removes a DOM node from the document.
         */

/**
         *
Removes this element from the document, removes all DOM event listeners, and deletes the cache reference.
         * All DOM event listeners are removed from this element. If {@link Ext#enableNestedListenerRemoval} is
         * true, then DOM event listeners are also removed from all child nodes. The body node
         * will be ignored if passed in.

         * @param {HTMLElement} node The node to remove
         */
        removeNode : isIE && !isIE8 ? function(){
            var d;
            return function(n){
                if(n && n.tagName != 'BODY'){
                    (Ext.enableNestedListenerRemoval) ? Ext.EventManager.purgeElement(n, true) : Ext.EventManager.removeAll(n);
                    d = d || DOC.createElement('div');
                    d.appendChild(n);
                    d.innerHTML = '';
                    delete Ext.elCache[n.id];
                }
            }
        }() : function(n){
            if(n && n.parentNode && n.tagName != 'BODY'){
                (Ext.enableNestedListenerRemoval) ? Ext.EventManager.purgeElement(n, true) : Ext.EventManager.removeAll(n);
                n.parentNode.removeChild(n);
                delete Ext.elCache[n.id];
            }
        },

/**
         *
Returns true if the passed value is empty.

         *
The value is deemed to be empty if it is

         *
  • null
    •
         *
  • undefined
    •
         *
  • an empty array
    •
         *
  • a zero length string (Unless the allowBlank parameter is true)
    •
         *

         * @param {Mixed} value The value to test
         * @param {Boolean} allowBlank (optional) true to allow empty strings (defaults to false)
         * @return {Boolean}
         */
        isEmpty : function(v, allowBlank){
            return v === null || v === undefined || ((Ext.isArray(v) && !v.length)) || (!allowBlank ? v === '' : false);
        },

/**
         * Returns true if the passed value is a JavaScript array, otherwise false.
         * @param {Mixed} value The value to test
         * @return {Boolean}
         */
        isArray : function(v){
            return toString.apply(v) === '[object Array]';
        },

/**
         * Returns true if the passed object is a JavaScript date object, otherwise false.
         * @param {Object} object The object to test
         * @return {Boolean}
         */
        isDate : function(v){
            return toString.apply(v) === '[object Date]';
        },

/**
         * Returns true if the passed value is a JavaScript Object, otherwise false.
         * @param {Mixed} value The value to test
         * @return {Boolean}
         */
        isObject : function(v){
            return !!v && Object.prototype.toString.call(v) === '[object Object]';
        },

/**
         * Returns true if the passed value is a JavaScript 'primitive', a string, number or boolean.
         * @param {Mixed} value The value to test
         * @return {Boolean}
         */
        isPrimitive : function(v){
            return Ext.isString(v) || Ext.isNumber(v) || Ext.isBoolean(v);
        },

/**
         * Returns true if the passed value is a JavaScript Function, otherwise false.
         * @param {Mixed} value The value to test
         * @return {Boolean}
         */
        isFunction : function(v){
            return toString.apply(v) === '[object Function]';
        },

/**
         * Returns true if the passed value is a number. Returns false for non-finite numbers.
         * @param {Mixed} value The value to test
         * @return {Boolean}
         */
        isNumber : function(v){
            return typeof v === 'number' && isFinite(v);
        },

/**
         * Returns true if the passed value is a string.
         * @param {Mixed} value The value to test
         * @return {Boolean}
         */
        isString : function(v){
            return typeof v === 'string';
        },

/**
         * Returns true if the passed value is a boolean.
         * @param {Mixed} value The value to test
         * @return {Boolean}
         */
        isBoolean : function(v){
            return typeof v === 'boolean';
        },

/**
         * Returns true if the passed value is an HTMLElement
         * @param {Mixed} value The value to test
         * @return {Boolean}
         */
        isElement : function(v) {
            return v ? !!v.tagName : false;
        },

/**
         * Returns true if the passed value is not undefined.
         * @param {Mixed} value The value to test
         * @return {Boolean}
         */
        isDefined : function(v){
            return typeof v !== 'undefined';
        },

/**
         * True if the detected browser is Opera.
         * @type Boolean
         */
        isOpera : isOpera,

/**
         * True if the detected browser uses WebKit.
         * @type Boolean
         */
        isWebKit : isWebKit,

/**
         * True if the detected browser is Chrome.
         * @type Boolean
         */
        isChrome : isChrome,

/**
         * True if the detected browser is Safari.
         * @type Boolean
         */
        isSafari : isSafari,

/**
         * True if the detected browser is Safari 3.x.
         * @type Boolean
         */
        isSafari3 : isSafari3,

/**
         * True if the detected browser is Safari 4.x.
         * @type Boolean
         */
        isSafari4 : isSafari4,

/**
         * True if the detected browser is Safari 2.x.
         * @type Boolean
         */
        isSafari2 : isSafari2,

/**
         * True if the detected browser is Internet Explorer.
         * @type Boolean
         */
        isIE : isIE,

/**
         * True if the detected browser is Internet Explorer 6.x.
         * @type Boolean
         */
        isIE6 : isIE6,

/**
         * True if the detected browser is Internet Explorer 7.x.
         * @type Boolean
         */
        isIE7 : isIE7,

/**
         * True if the detected browser is Internet Explorer 8.x.
         * @type Boolean
         */
        isIE8 : isIE8,

/**
         * True if the detected browser uses the Gecko layout engine (e.g. Mozilla, Firefox).
         * @type Boolean
         */
        isGecko : isGecko,

/**
         * True if the detected browser uses a pre-Gecko 1.9 layout engine (e.g. Firefox 2.x).
         * @type Boolean
         */
        isGecko2 : isGecko2,

/**
         * True if the detected browser uses a Gecko 1.9+ layout engine (e.g. Firefox 3.x).
         * @type Boolean
         */
        isGecko3 : isGecko3,

/**
         * True if the detected browser is Internet Explorer running in non-strict mode.
         * @type Boolean
         */
        isBorderBox : isBorderBox,

/**
         * True if the detected platform is Linux.
         * @type Boolean
         */
        isLinux : isLinux,

/**
         * True if the detected platform is Windows.
         * @type Boolean
         */
        isWindows : isWindows,

/**
         * True if the detected platform is Mac OS.
         * @type Boolean
         */
        isMac : isMac,

/**
         * True if the detected platform is Adobe Air.
         * @type Boolean
         */
        isAir : isAir
    });

/**
     * Creates namespaces to be used for scoping variables and classes so that they are not global.
     * Specifying the last node of a namespace implicitly creates all other nodes. Usage:
     *

Ext.namespace('Company', 'Company.data');
Ext.namespace('Company.data'); // equivalent and preferable to above syntax
Company.Widget = function() { ... }
Company.data.CustomStore = function(config) { ... }

     * @param {String} namespace1
     * @param {String} namespace2
     * @param {String} etc
     * @return {Object} The namespace object. (If multiple arguments are passed, this will be the last namespace created)
     * @method ns
     */
    Ext.ns = Ext.namespace;
})();

Ext.ns("Ext.util", "Ext.lib", "Ext.data");

Ext.elCache = {};

/**
 * @class Function
 * These functions are available on every Function object (any JavaScript function).
 */
Ext.apply(Function.prototype, {

/**
     * Creates an interceptor function. The passed function is called before the original one. If it returns false,
     * the original one is not called. The resulting function returns the results of the original function.
     * The passed function is called with the parameters of the original function. Example usage:
     *

var sayHi = function(name){
    alert('Hi, ' + name);
}

sayHi('Fred'); // alerts "Hi, Fred"

// create a new function that validates input without
// directly modifying the original function:
var sayHiToFriend = sayHi.createInterceptor(function(name){
    return name == 'Brian';
});

sayHiToFriend('Fred');  // no alert
sayHiToFriend('Brian'); // alerts "Hi, Brian"

     * @param {Function} fcn The function to call before the original
     * @param {Object} scope (optional) The scope (this reference) in which the passed function is executed.
     * If omitted, defaults to the scope in which the original function is called or the browser window.
     * @return {Function} The new function
     */
    createInterceptor : function(fcn, scope){
        var method = this;
        return !Ext.isFunction(fcn) ?
                this :
                function() {
                    var me = this,
                        args = arguments;
                    fcn.target = me;
                    fcn.method = method;
                    return (fcn.apply(scope || me || window, args) !== false) ?
                            method.apply(me || window, args) :
                            null;
                };
    },

/**
     * Creates a callback that passes arguments[0], arguments[1], arguments[2], ...
     * Call directly on any function. Example: myFunction.createCallback(arg1, arg2)
     * Will create a function that is bound to those 2 args. If a specific scope is required in the
     * callback, use {@link #createDelegate} instead. The function returned by createCallback always
     * executes in the window scope.
     *
This method is required when you want to pass arguments to a callback function.  If no arguments
     * are needed, you can simply pass a reference to the function as a callback (e.g., callback: myFn).
     * However, if you tried to pass a function with arguments (e.g., callback: myFn(arg1, arg2)) the function
     * would simply execute immediately when the code is parsed. Example usage:
     *

var sayHi = function(name){
    alert('Hi, ' + name);
}

// clicking the button alerts "Hi, Fred"
new Ext.Button({
    text: 'Say Hi',
    renderTo: Ext.getBody(),
    handler: sayHi.createCallback('Fred')
});

     * @return {Function} The new function
    */
    createCallback : function(/*args...*/){
        // make args available, in function below
        var args = arguments,
            method = this;
        return function() {
            return method.apply(window, args);
        };
    },

/**
     * Creates a delegate (callback) that sets the scope to obj.
     * Call directly on any function. Example: this.myFunction.createDelegate(this, [arg1, arg2])
     * Will create a function that is automatically scoped to obj so that the this variable inside the
     * callback points to obj. Example usage:
     *

var sayHi = function(name){
    // Note this use of "this.text" here.  This function expects to
    // execute within a scope that contains a text property.  In this
    // example, the "this" variable is pointing to the btn object that
    // was passed in createDelegate below.
    alert('Hi, ' + name + '. You clicked the "' + this.text + '" button.');
}

var btn = new Ext.Button({
    text: 'Say Hi',
    renderTo: Ext.getBody()
});

// This callback will execute in the scope of the
// button instance. Clicking the button alerts
// "Hi, Fred. You clicked the "Say Hi" button."
btn.on('click', sayHi.createDelegate(btn, ['Fred']));

     * @param {Object} scope (optional) The scope (this reference) in which the function is executed.
     * If omitted, defaults to the browser window.
     * @param {Array} args (optional) Overrides arguments for the call. (Defaults to the arguments passed by the caller)
     * @param {Boolean/Number} appendArgs (optional) if True args are appended to call args instead of overriding,
     * if a number the args are inserted at the specified position
     * @return {Function} The new function
     */
    createDelegate : function(obj, args, appendArgs){
        var method = this;
        return function() {
            var callArgs = args || arguments;
            if (appendArgs === true){
                callArgs = Array.prototype.slice.call(arguments, 0);
                callArgs = callArgs.concat(args);
            }else if (Ext.isNumber(appendArgs)){
                callArgs = Array.prototype.slice.call(arguments, 0); // copy arguments first
                var applyArgs = [appendArgs, 0].concat(args); // create method call params
                Array.prototype.splice.apply(callArgs, applyArgs); // splice them in
            }
            return method.apply(obj || window, callArgs);
        };
    },

/**
     * Calls this function after the number of millseconds specified, optionally in a specific scope. Example usage:
     *

var sayHi = function(name){
    alert('Hi, ' + name);
}

// executes immediately:
sayHi('Fred');

// executes after 2 seconds:
sayHi.defer(2000, this, ['Fred']);

// this syntax is sometimes useful for deferring
// execution of an anonymous function:
(function(){
    alert('Anonymous');
}).defer(100);

     * @param {Number} millis The number of milliseconds for the setTimeout call (if less than or equal to 0 the function is executed immediately)
     * @param {Object} scope (optional) The scope (this reference) in which the function is executed.
     * If omitted, defaults to the browser window.
     * @param {Array} args (optional) Overrides arguments for the call. (Defaults to the arguments passed by the caller)
     * @param {Boolean/Number} appendArgs (optional) if True args are appended to call args instead of overriding,
     * if a number the args are inserted at the specified position
     * @return {Number} The timeout id that can be used with clearTimeout
     */
    defer : function(millis, obj, args, appendArgs){
        var fn = this.createDelegate(obj, args, appendArgs);
        if(millis > 0){
            return setTimeout(fn, millis);
        }
        fn();
        return 0;
    }
});

/**
 * @class String
 * These functions are available on every String object.
 */
Ext.applyIf(String, {

/**
     * Allows you to define a tokenized string and pass an arbitrary number of arguments to replace the tokens.  Each
     * token must be unique, and must increment in the format {0}, {1}, etc.  Example usage:
     *

var cls = 'my-class', text = 'Some text';
var s = String.format('<div class="{0}">{1}</div>', cls, text);
// s now contains the string: '<div class="my-class">Some text</div>'
     *

     * @param {String} string The tokenized string to be formatted
     * @param {String} value1 The value to replace token {0}
     * @param {String} value2 Etc...
     * @return {String} The formatted string
     * @static
     */
    format : function(format){
        var args = Ext.toArray(arguments, 1);
        return format.replace(/\{(\d+)\}/g, function(m, i){
            return args[i];
        });
    }
});

/**
 * @class Array
 */
Ext.applyIf(Array.prototype, {

/**
     * Checks whether or not the specified object exists in the array.
     * @param {Object} o The object to check for
     * @param {Number} from (Optional) The index at which to begin the search
     * @return {Number} The index of o in the array (or -1 if it is not found)
     */
    indexOf : function(o, from){
        var len = this.length;
        from = from || 0;
        from += (from < 0) ? len : 0;
        for (; from < len; ++from){
            if(this[from] === o){
                return from;
            }
        }
        return -1;
    },

/**
     * Removes the specified object from the array.  If the object is not found nothing happens.
     * @param {Object} o The object to remove
     * @return {Array} this array
     */
    remove : function(o){
        var index = this.indexOf(o);
        if(index != -1){
            this.splice(index, 1);
        }
        return this;
    }
});


The source code

/*!
 * licensing@extjs.com
 * http://www.extjs.com/license
 */

/**
 * @class Ext.form.Field
 * @extends Ext.BoxComponent
 * Base class for form fields that provides default event handling, sizing, value handling and other functionality.
 * @constructor
 * Creates a new Field
 * @param {Object} config Configuration options
 * @xtype field
 */
Ext.form.Field = Ext.extend(Ext.BoxComponent,  {

/**
     *
The label Element associated with this Field. Only available after this Field has been rendered by a
     * {@link form Ext.layout.FormLayout} layout manager.

     * @type Ext.Element
     * @property label
     */

/**
     * @cfg {String} inputType The type attribute for input fields -- e.g. radio, text, password, file (defaults
     * to 'text'). The types 'file' and 'password' must be used to render those field types currently -- there are
     * no separate Ext components for those. Note that if you use inputType:'file', {@link #emptyText}
     * is not supported and should be avoided.
     */

/**
     * @cfg {Number} tabIndex The tabIndex for this field. Note this only applies to fields that are rendered,
     * not those which are built via applyTo (defaults to undefined).
     */

/**
     * @cfg {Mixed} value A value to initialize this field with (defaults to undefined).
     */

/**
     * @cfg {String} name The field's HTML name attribute (defaults to '').
     * Note: this property must be set if this field is to be automatically included with
     * {@link Ext.form.BasicForm#submit form submit()}.
     */

/**
     * @cfg {String} cls A custom CSS class to apply to the field's underlying element (defaults to '').
     */

/**
     * @cfg {String} invalidClass The CSS class to use when marking a field invalid (defaults to 'x-form-invalid')
     */
    invalidClass : 'x-form-invalid',

/**
     * @cfg {String} invalidText The error text to use when marking a field invalid and no message is provided
     * (defaults to 'The value in this field is invalid')
     */
    invalidText : 'The value in this field is invalid',

/**
     * @cfg {String} focusClass The CSS class to use when the field receives focus (defaults to 'x-form-focus')
     */
    focusClass : 'x-form-focus',

/**
     * @cfg {Boolean} preventMark
     * true to disable {@link #markInvalid marking the field invalid}.
     * Defaults to false.
     */

/**
     * @cfg {String/Boolean} validationEvent The event that should initiate field validation. Set to false to disable
      automatic validation (defaults to 'keyup').
     */
    validationEvent : 'keyup',

/**
     * @cfg {Boolean} validateOnBlur Whether the field should validate when it loses focus (defaults to true).
     */
    validateOnBlur : true,

/**
     * @cfg {Number} validationDelay The length of time in milliseconds after user input begins until validation
     * is initiated (defaults to 250)
     */
    validationDelay : 250,

/**
     * @cfg {String/Object} autoCreate
A {@link Ext.DomHelper DomHelper} element spec, or true for a default
     * element spec. Used to create the {@link Ext.Component#getEl Element} which will encapsulate this Component.
     * See {@link Ext.Component#autoEl autoEl} for details.  Defaults to:

     *
{tag: 'input', type: 'text', size: '20', autocomplete: 'off'}

     */
    defaultAutoCreate : {tag: 'input', type: 'text', size: '20', autocomplete: 'off'},

/**
     * @cfg {String} fieldClass The default CSS class for the field (defaults to 'x-form-field')
     */
    fieldClass : 'x-form-field',

/**
     * @cfg {String} msgTarget
The location where the message text set through {@link #markInvalid} should display.
     * Must be one of the following values:

     *

     *
  • qtip Display a quick tip containing the message when the user hovers over the field. This is the default.
     *
    {@link Ext.QuickTips#init Ext.QuickTips.init} must have been called for this setting to work.
     *
  • title Display the message in a default browser title attribute popup.
    •
     *
  • under Add a block div beneath the field containing the error message.
    •
     *
  • side Add an error icon to the right of the field, displaying the message in a popup on hover.
    •
     *
  • [element id] Add the error message directly to the innerHTML of the specified element.
    •
     *

     */
    msgTarget : 'qtip',

/**
     * @cfg {String} msgFx Experimental The effect used when displaying a validation message under the field
     * (defaults to 'normal').
     */
    msgFx : 'normal',

/**
     * @cfg {Boolean} readOnly true to mark the field as readOnly in HTML
     * (defaults to false).
     *
Note: this only sets the element's readOnly DOM attribute.
     * Setting readOnly=true, for example, will not disable triggering a
     * ComboBox or DateField; it gives you the option of forcing the user to choose
     * via the trigger without typing in the text box. To hide the trigger use
     * {@link Ext.form.TriggerField#hideTrigger hideTrigger}.

     */
    readOnly : false,

/**
     * @cfg {Boolean} disabled True to disable the field (defaults to false).
     *
Be aware that conformant with the HTML specification,
     * disabled Fields will not be {@link Ext.form.BasicForm#submit submitted}.

     */
    disabled : false,

/**
     * @cfg {Boolean} submitValue False to clear the name attribute on the field so that it is not submitted during a form post.
     * Defaults to true.
     */
    submitValue: true,

    // private
    isFormField : true,

    // private
    msgDisplay: '',

    // private
    hasFocus : false,

    // private
    initComponent : function(){
        Ext.form.Field.superclass.initComponent.call(this);
        this.addEvents(

/**
             * @event focus
             * Fires when this field receives input focus.
             * @param {Ext.form.Field} this
             */
            'focus',

/**
             * @event blur
             * Fires when this field loses input focus.
             * @param {Ext.form.Field} this
             */
            'blur',

/**
             * @event specialkey
             * Fires when any key related to navigation (arrows, tab, enter, esc, etc.) is pressed.
             * To handle other keys see {@link Ext.Panel#keys} or {@link Ext.KeyMap}.
             * You can check {@link Ext.EventObject#getKey} to determine which key was pressed.
             * For example:

var form = new Ext.form.FormPanel({
    ...
    items: [{
            fieldLabel: 'Field 1',
            name: 'field1',
            allowBlank: false
        },{
            fieldLabel: 'Field 2',
            name: 'field2',
            listeners: {
                specialkey: function(field, e){
                    // e.HOME, e.END, e.PAGE_UP, e.PAGE_DOWN,
                    // e.TAB, e.ESC, arrow keys: e.LEFT, e.RIGHT, e.UP, e.DOWN
                    if (e.{@link Ext.EventObject#getKey getKey()} == e.ENTER) {
                        var form = field.ownerCt.getForm();
                        form.submit();
                    }
                }
            }
        }
    ],
    ...
});
             *

             * @param {Ext.form.Field} this
             * @param {Ext.EventObject} e The event object
             */
            'specialkey',

/**
             * @event change
             * Fires just before the field blurs if the field value has changed.
             * @param {Ext.form.Field} this
             * @param {Mixed} newValue The new value
             * @param {Mixed} oldValue The original value
             */
            'change',

/**
             * @event invalid
             * Fires after the field has been marked as invalid.
             * @param {Ext.form.Field} this
             * @param {String} msg The validation message
             */
            'invalid',

/**
             * @event valid
             * Fires after the field has been validated with no errors.
             * @param {Ext.form.Field} this
             */
            'valid'
        );
    },

/**
     * Returns the {@link Ext.form.Field#name name} or {@link Ext.form.ComboBox#hiddenName hiddenName}
     * attribute of the field if available.
     * @return {String} name The field {@link Ext.form.Field#name name} or {@link Ext.form.ComboBox#hiddenName hiddenName}
     */
    getName : function(){
        return this.rendered && this.el.dom.name ? this.el.dom.name : this.name || this.id || '';
    },

    // private
    onRender : function(ct, position){
        if(!this.el){
            var cfg = this.getAutoCreate();

            if(!cfg.name){
                cfg.name = this.name || this.id;
            }
            if(this.inputType){
                cfg.type = this.inputType;
            }
            this.autoEl = cfg;
        }
        Ext.form.Field.superclass.onRender.call(this, ct, position);
        if(this.submitValue === false){
            this.el.dom.removeAttribute('name');
        }
        var type = this.el.dom.type;
        if(type){
            if(type == 'password'){
                type = 'text';
            }
            this.el.addClass('x-form-'+type);
        }
        if(this.readOnly){
            this.setReadOnly(true);
        }
        if(this.tabIndex !== undefined){
            this.el.dom.setAttribute('tabIndex', this.tabIndex);
        }

        this.el.addClass([this.fieldClass, this.cls]);
    },

    // private
    getItemCt : function(){
        return this.itemCt;
    },

    // private
    initValue : function(){
        if(this.value !== undefined){
            this.setValue(this.value);
        }else if(!Ext.isEmpty(this.el.dom.value) && this.el.dom.value != this.emptyText){
            this.setValue(this.el.dom.value);
        }

/**
         * The original value of the field as configured in the {@link #value} configuration, or
         * as loaded by the last form load operation if the form's {@link Ext.form.BasicForm#trackResetOnLoad trackResetOnLoad}
         * setting is true.
         * @type mixed
         * @property originalValue
         */
        this.originalValue = this.getValue();
    },

/**
     *
Returns true if the value of this Field has been changed from its original value.
     * Will return false if the field is disabled or has not been rendered yet.

     *
Note that if the owning {@link Ext.form.BasicForm form} was configured with
     * {@link Ext.form.BasicForm}.{@link Ext.form.BasicForm#trackResetOnLoad trackResetOnLoad}
     * then the original value is updated when the values are loaded by
     * {@link Ext.form.BasicForm}.{@link Ext.form.BasicForm#setValues setValues}.

     * @return {Boolean} True if this field has been changed from its original value (and
     * is not disabled), false otherwise.
     */
    isDirty : function() {
        if(this.disabled || !this.rendered) {
            return false;
        }
        return String(this.getValue()) !== String(this.originalValue);
    },

/**
     * Sets the read only state of this field.
     * @param {Boolean} readOnly Whether the field should be read only.
     */
    setReadOnly : function(readOnly){
        if(this.rendered){
            this.el.dom.readOnly = readOnly;
        }
        this.readOnly = readOnly;
    },

    // private
    afterRender : function(){
        Ext.form.Field.superclass.afterRender.call(this);
        this.initEvents();
        this.initValue();
    },

    // private
    fireKey : function(e){
        if(e.isSpecialKey()){
            this.fireEvent('specialkey', this, e);
        }
    },

/**
     * Resets the current field value to the originally loaded value and clears any validation messages.
     * See {@link Ext.form.BasicForm}.{@link Ext.form.BasicForm#trackResetOnLoad trackResetOnLoad}
     */
    reset : function(){
        this.setValue(this.originalValue);
        this.clearInvalid();
    },

    // private
    initEvents : function(){
        this.mon(this.el, Ext.EventManager.useKeydown ? 'keydown' : 'keypress', this.fireKey,  this);
        this.mon(this.el, 'focus', this.onFocus, this);

        // standardise buffer across all browsers + OS-es for consistent event order.
        // (the 10ms buffer for Editors fixes a weird FF/Win editor issue when changing OS window focus)
        this.mon(this.el, 'blur', this.onBlur, this, this.inEditor ? {buffer:10} : null);
    },

    // private
    preFocus: Ext.emptyFn,

    // private
    onFocus : function(){
        this.preFocus();
        if(this.focusClass){
            this.el.addClass(this.focusClass);
        }
        if(!this.hasFocus){
            this.hasFocus = true;

/**
             *
The value that the Field had at the time it was last focused. This is the value that is passed
             * to the {@link #change} event which is fired if the value has been changed when the Field is blurred.

             *
This will be undefined until the Field has been visited. Compare {@link #originalValue}.

             * @type mixed
             * @property startValue
             */
            this.startValue = this.getValue();
            this.fireEvent('focus', this);
        }
    },

    // private
    beforeBlur : Ext.emptyFn,

    // private
    onBlur : function(){
        this.beforeBlur();
        if(this.focusClass){
            this.el.removeClass(this.focusClass);
        }
        this.hasFocus = false;
        if(this.validationEvent !== false && (this.validateOnBlur || this.validationEvent == 'blur')){
            this.validate();
        }
        var v = this.getValue();
        if(String(v) !== String(this.startValue)){
            this.fireEvent('change', this, v, this.startValue);
        }
        this.fireEvent('blur', this);
        this.postBlur();
    },

    // private
    postBlur : Ext.emptyFn,

/**
     * Returns whether or not the field value is currently valid by
     * {@link #validateValue validating} the {@link #processValue processed value}
     * of the field. Note: {@link #disabled} fields are ignored.
     * @param {Boolean} preventMark True to disable marking the field invalid
     * @return {Boolean} True if the value is valid, else false
     */
    isValid : function(preventMark){
        if(this.disabled){
            return true;
        }
        var restore = this.preventMark;
        this.preventMark = preventMark === true;
        var v = this.validateValue(this.processValue(this.getRawValue()));
        this.preventMark = restore;
        return v;
    },

/**
     * Validates the field value
     * @return {Boolean} True if the value is valid, else false
     */
    validate : function(){
        if(this.disabled || this.validateValue(this.processValue(this.getRawValue()))){
            this.clearInvalid();
            return true;
        }
        return false;
    },

/**
     * This method should only be overridden if necessary to prepare raw values
     * for validation (see {@link #validate} and {@link #isValid}).  This method
     * is expected to return the processed value for the field which will
     * be used for validation (see validateValue method).
     * @param {Mixed} value
     */
    processValue : function(value){
        return value;
    },

/**
     * Uses getErrors to build an array of validation errors. If any errors are found, markInvalid is called
     * with the first and false is returned, otherwise true is returned. Previously, subclasses were invited
     * to provide an implementation of this to process validations - from 3.2 onwards getErrors should be
     * overridden instead.
     * @param {Mixed} The current value of the field
     * @return {Boolean} True if all validations passed, false if one or more failed
     */
     validateValue : function(value) {
         //currently, we only show 1 error at a time for a field, so just use the first one
         var error = this.getErrors(value)[0];

         if (error == undefined) {
             return true;
         } else {
             this.markInvalid(error);
             return false;
         }
     },

/**
     * Runs this field's validators and returns an array of error messages for any validation failures.
     * This is called internally during validation and would not usually need to be used manually.
     * Each subclass should override or augment the return value to provide their own errors
     * @return {Array} All error messages for this field
     */
    getErrors: function() {
        return [];
    },

/**
     * Gets the active error message for this field.
     * @return {String} Returns the active error message on the field, if there is no error, an empty string is returned.
     */
    getActiveError : function(){
        return this.activeError || '';
    },

/**
     *
Display an error message associated with this field, using {@link #msgTarget} to determine how to
     * display the message and applying {@link #invalidClass} to the field's UI element.

     *
Note: this method does not cause the Field's {@link #validate} method to return false
     * if the value does pass validation. So simply marking a Field as invalid will not prevent
     * submission of forms submitted with the {@link Ext.form.Action.Submit#clientValidation} option set.

     * {@link #isValid invalid}.
     * @param {String} msg (optional) The validation message (defaults to {@link #invalidText})
     */
    markInvalid : function(msg){
        //don't set the error icon if we're not rendered or marking is prevented
        if (this.rendered && !this.preventMark) {
            msg = msg || this.invalidText;

            var mt = this.getMessageHandler();
            if(mt){
                mt.mark(this, msg);
            }else if(this.msgTarget){
                this.el.addClass(this.invalidClass);
                var t = Ext.getDom(this.msgTarget);
                if(t){
                    t.innerHTML = msg;
                    t.style.display = this.msgDisplay;
                }
            }
        }

        this.setActiveError(msg);
    },

/**
     * Clear any invalid styles/messages for this field
     */
    clearInvalid : function(){
        //don't remove the error icon if we're not rendered or marking is prevented
        if (this.rendered && !this.preventMark) {
            this.el.removeClass(this.invalidClass);
            var mt = this.getMessageHandler();
            if(mt){
                mt.clear(this);
            }else if(this.msgTarget){
                this.el.removeClass(this.invalidClass);
                var t = Ext.getDom(this.msgTarget);
                if(t){
                    t.innerHTML = '';
                    t.style.display = 'none';
                }
            }
        }

        this.unsetActiveError();
    },

/**
     * Sets the current activeError to the given string. Fires the 'invalid' event.
     * This does not set up the error icon, only sets the message and fires the event. To show the error icon,
     * use markInvalid instead, which calls this method internally
     * @param {String} msg The error message
     * @param {Boolean} suppressEvent True to suppress the 'invalid' event from being fired
     */
    setActiveError: function(msg, suppressEvent) {
        this.activeError = msg;
        if (suppressEvent !== true) this.fireEvent('invalid', this, msg);
    },

/**
     * Clears the activeError and fires the 'valid' event. This is called internally by clearInvalid and would not
     * usually need to be called manually
     * @param {Boolean} suppressEvent True to suppress the 'invalid' event from being fired
     */
    unsetActiveError: function(suppressEvent) {
        delete this.activeError;
        if (suppressEvent !== true) this.fireEvent('valid', this);
    },

    // private
    getMessageHandler : function(){
        return Ext.form.MessageTargets[this.msgTarget];
    },

    // private
    getErrorCt : function(){
        return this.el.findParent('.x-form-element', 5, true) || // use form element wrap if available
            this.el.findParent('.x-form-field-wrap', 5, true);   // else direct field wrap
    },

    // Alignment for 'under' target
    alignErrorEl : function(){
        this.errorEl.setWidth(this.getErrorCt().getWidth(true) - 20);
    },

    // Alignment for 'side' target
    alignErrorIcon : function(){
        this.errorIcon.alignTo(this.el, 'tl-tr', [2, 0]);
    },

/**
     * Returns the raw data value which may or may not be a valid, defined value.  To return a normalized value see {@link #getValue}.
     * @return {Mixed} value The field value
     */
    getRawValue : function(){
        var v = this.rendered ? this.el.getValue() : Ext.value(this.value, '');
        if(v === this.emptyText){
            v = '';
        }
        return v;
    },

/**
     * Returns the normalized data value (undefined or emptyText will be returned as '').  To return the raw value see {@link #getRawValue}.
     * @return {Mixed} value The field value
     */
    getValue : function(){
        if(!this.rendered) {
            return this.value;
        }
        var v = this.el.getValue();
        if(v === this.emptyText || v === undefined){
            v = '';
        }
        return v;
    },

/**
     * Sets the underlying DOM field's value directly, bypassing validation.  To set the value with validation see {@link #setValue}.
     * @param {Mixed} value The value to set
     * @return {Mixed} value The field value that is set
     */
    setRawValue : function(v){
        return this.rendered ? (this.el.dom.value = (Ext.isEmpty(v) ? '' : v)) : '';
    },

/**
     * Sets a data value into the field and validates it.  To set the value directly without validation see {@link #setRawValue}.
     * @param {Mixed} value The value to set
     * @return {Ext.form.Field} this
     */
    setValue : function(v){
        this.value = v;
        if(this.rendered){
            this.el.dom.value = (Ext.isEmpty(v) ? '' : v);
            this.validate();
        }
        return this;
    },

    // private, does not work for all fields
    append : function(v){
         this.setValue([this.getValue(), v].join(''));
    }

/**
     * @cfg {Boolean} autoWidth @hide
     */

/**
     * @cfg {Boolean} autoHeight @hide
     */

/**
     * @cfg {String} autoEl @hide
     */
});

Ext.form.MessageTargets = {
    'qtip' : {
        mark: function(field, msg){
            field.el.addClass(field.invalidClass);
            field.el.dom.qtip = msg;
            field.el.dom.qclass = 'x-form-invalid-tip';
            if(Ext.QuickTips){ // fix for floating editors interacting with DND
                Ext.QuickTips.enable();
            }
        },
        clear: function(field){
            field.el.removeClass(field.invalidClass);
            field.el.dom.qtip = '';
        }
    },
    'title' : {
        mark: function(field, msg){
            field.el.addClass(field.invalidClass);
            field.el.dom.title = msg;
        },
        clear: function(field){
            field.el.dom.title = '';
        }
    },
    'under' : {
        mark: function(field, msg){
            field.el.addClass(field.invalidClass);
            if(!field.errorEl){
                var elp = field.getErrorCt();
                if(!elp){ // field has no container el
                    field.el.dom.title = msg;
                    return;
                }
                field.errorEl = elp.createChild({cls:'x-form-invalid-msg'});
                field.on('resize', field.alignErrorEl, field);
                field.on('destroy', function(){
                    Ext.destroy(this.errorEl);
                }, field);
            }
            field.alignErrorEl();
            field.errorEl.update(msg);
            Ext.form.Field.msgFx[field.msgFx].show(field.errorEl, field);
        },
        clear: function(field){
            field.el.removeClass(field.invalidClass);
            if(field.errorEl){
                Ext.form.Field.msgFx[field.msgFx].hide(field.errorEl, field);
            }else{
                field.el.dom.title = '';
            }
        }
    },
    'side' : {
        mark: function(field, msg){
            field.el.addClass(field.invalidClass);
            if(!field.errorIcon){
                var elp = field.getErrorCt();
                // field has no container el
                if(!elp){
                    field.el.dom.title = msg;
                    return;
                }
                field.errorIcon = elp.createChild({cls:'x-form-invalid-icon'});
                if (field.ownerCt) {
                    field.ownerCt.on('afterlayout', field.alignErrorIcon, field);
                    field.ownerCt.on('expand', field.alignErrorIcon, field);
                }
                field.on('resize', field.alignErrorIcon, field);
                field.on('destroy', function(){
                    Ext.destroy(this.errorIcon);
                }, field);
            }
            field.alignErrorIcon();
            field.errorIcon.dom.qtip = msg;
            field.errorIcon.dom.qclass = 'x-form-invalid-tip';
            field.errorIcon.show();
        },
        clear: function(field){
            field.el.removeClass(field.invalidClass);
            if(field.errorIcon){
                field.errorIcon.dom.qtip = '';
                field.errorIcon.hide();
            }else{
                field.el.dom.title = '';
            }
        }
    }
};

// anything other than normal should be considered experimental
Ext.form.Field.msgFx = {
    normal : {
        show: function(msgEl, f){
            msgEl.setDisplayed('block');
        },

        hide : function(msgEl, f){
            msgEl.setDisplayed(false).update('');
        }
    },

    slide : {
        show: function(msgEl, f){
            msgEl.slideIn('t', {stopFx:true});
        },

        hide : function(msgEl, f){
            msgEl.slideOut('t', {stopFx:true,useDisplay:true});
        }
    },

    slideRight : {
        show: function(msgEl, f){
            msgEl.fixDisplay();
            msgEl.alignTo(f.el, 'tl-tr');
            msgEl.slideIn('l', {stopFx:true});
        },

        hide : function(msgEl, f){
            msgEl.slideOut('l', {stopFx:true,useDisplay:true});
        }
    }
};
Ext.reg('field', Ext.form.Field);


The source code

/*!
 * licensing@extjs.com
 * http://www.extjs.com/license
 */

/**
 * @class Ext.form.FieldSet
 * @extends Ext.Panel
 * Standard container used for grouping items within a {@link Ext.form.FormPanel form}.
 *

var form = new Ext.FormPanel({
    title: 'Simple Form with FieldSets',
    labelWidth: 75, // label settings here cascade unless overridden
    url: 'save-form.php',
    frame:true,
    bodyStyle:'padding:5px 5px 0',
    width: 700,
    renderTo: document.body,
    layout:'column', // arrange items in columns
    defaults: {      // defaults applied to items
        layout: 'form',
        border: false,
        bodyStyle: 'padding:4px'
    },
    items: [{
        // Fieldset in Column 1
        xtype:'fieldset',
        columnWidth: 0.5,
        title: 'Fieldset 1',
        collapsible: true,
        autoHeight:true,
        defaults: {
            anchor: '-20' // leave room for error icon
        },
        defaultType: 'textfield',
        items :[{
                fieldLabel: 'Field 1'
            }, {
                fieldLabel: 'Field 2'
            }, {
                fieldLabel: 'Field 3'
            }
        ]
    },{
        // Fieldset in Column 2 - Panel inside
        xtype:'fieldset',
        title: 'Show Panel', // title, header, or checkboxToggle creates fieldset header
        autoHeight:true,
        columnWidth: 0.5,
        checkboxToggle: true,
        collapsed: true, // fieldset initially collapsed
        layout:'anchor',
        items :[{
            xtype: 'panel',
            anchor: '100%',
            title: 'Panel inside a fieldset',
            frame: true,
            height: 100
        }]
    }]
});
 *

 * @constructor
 * @param {Object} config Configuration options
 * @xtype fieldset
 */
Ext.form.FieldSet = Ext.extend(Ext.Panel, {

/**
     * @cfg {Mixed} checkboxToggle true to render a checkbox into the fieldset frame just
     * in front of the legend to expand/collapse the fieldset when the checkbox is toggled. (defaults
     * to false).
     *
A {@link Ext.DomHelper DomHelper} element spec may also be specified to create the checkbox.
     * If true is specified, the default DomHelper config object used to create the element
     * is:

     * {tag: 'input', type: 'checkbox', name: this.checkboxName || this.id+'-checkbox'}
     *

     */

/**
     * @cfg {String} checkboxName The name to assign to the fieldset's checkbox if {@link #checkboxToggle} = true
     * (defaults to '[checkbox id]-checkbox').
     */

/**
     * @cfg {Boolean} collapsible
     * true to make the fieldset collapsible and have the expand/collapse toggle button automatically
     * rendered into the legend element, false to keep the fieldset statically sized with no collapse
     * button (defaults to false). Another option is to configure {@link #checkboxToggle}.
     */

/**
     * @cfg {Number} labelWidth The width of labels. This property cascades to child containers.
     */

/**
     * @cfg {String} itemCls A css class to apply to the x-form-item of fields (see
     * {@link Ext.layout.FormLayout}.{@link Ext.layout.FormLayout#fieldTpl fieldTpl} for details).
     * This property cascades to child containers.
     */

/**
     * @cfg {String} baseCls The base CSS class applied to the fieldset (defaults to 'x-fieldset').
     */
    baseCls : 'x-fieldset',

/**
     * @cfg {String} layout The {@link Ext.Container#layout} to use inside the fieldset (defaults to 'form').
     */
    layout : 'form',

/**
     * @cfg {Boolean} animCollapse
     * true to animate the transition when the panel is collapsed, false to skip the
     * animation (defaults to false).
     */
    animCollapse : false,

    // private
    onRender : function(ct, position){
        if(!this.el){
            this.el = document.createElement('fieldset');
            this.el.id = this.id;
            if (this.title || this.header || this.checkboxToggle) {
                this.el.appendChild(document.createElement('legend')).className = this.baseCls + '-header';
            }
        }

        Ext.form.FieldSet.superclass.onRender.call(this, ct, position);

        if(this.checkboxToggle){
            var o = typeof this.checkboxToggle == 'object' ?
                    this.checkboxToggle :
                    {tag: 'input', type: 'checkbox', name: this.checkboxName || this.id+'-checkbox'};
            this.checkbox = this.header.insertFirst(o);
            this.checkbox.dom.checked = !this.collapsed;
            this.mon(this.checkbox, 'click', this.onCheckClick, this);
        }
    },

    // private
    onCollapse : function(doAnim, animArg){
        if(this.checkbox){
            this.checkbox.dom.checked = false;
        }
        Ext.form.FieldSet.superclass.onCollapse.call(this, doAnim, animArg);

    },

    // private
    onExpand : function(doAnim, animArg){
        if(this.checkbox){
            this.checkbox.dom.checked = true;
        }
        Ext.form.FieldSet.superclass.onExpand.call(this, doAnim, animArg);
    },

/**
     * This function is called by the fieldset's checkbox when it is toggled (only applies when
     * checkboxToggle = true).  This method should never be called externally, but can be
     * overridden to provide custom behavior when the checkbox is toggled if needed.
     */
    onCheckClick : function(){
        this[this.checkbox.dom.checked ? 'expand' : 'collapse']();
    }

/**
     * @cfg {String/Number} activeItem
     * @hide
     */

/**
     * @cfg {Mixed} applyTo
     * @hide
     */

/**
     * @cfg {Boolean} bodyBorder
     * @hide
     */

/**
     * @cfg {Boolean} border
     * @hide
     */

/**
     * @cfg {Boolean/Number} bufferResize
     * @hide
     */

/**
     * @cfg {Boolean} collapseFirst
     * @hide
     */

/**
     * @cfg {String} defaultType
     * @hide
     */

/**
     * @cfg {String} disabledClass
     * @hide
     */

/**
     * @cfg {String} elements
     * @hide
     */

/**
     * @cfg {Boolean} floating
     * @hide
     */

/**
     * @cfg {Boolean} footer
     * @hide
     */

/**
     * @cfg {Boolean} frame
     * @hide
     */

/**
     * @cfg {Boolean} header
     * @hide
     */

/**
     * @cfg {Boolean} headerAsText
     * @hide
     */

/**
     * @cfg {Boolean} hideCollapseTool
     * @hide
     */

/**
     * @cfg {String} iconCls
     * @hide
     */

/**
     * @cfg {Boolean/String} shadow
     * @hide
     */

/**
     * @cfg {Number} shadowOffset
     * @hide
     */

/**
     * @cfg {Boolean} shim
     * @hide
     */

/**
     * @cfg {Object/Array} tbar
     * @hide
     */

/**
     * @cfg {Array} tools
     * @hide
     */

/**
     * @cfg {Ext.Template/Ext.XTemplate} toolTemplate
     * @hide
     */

/**
     * @cfg {String} xtype
     * @hide
     */

/**
     * @property header
     * @hide
     */

/**
     * @property footer
     * @hide
     */

/**
     * @method focus
     * @hide
     */

/**
     * @method getBottomToolbar
     * @hide
     */

/**
     * @method getTopToolbar
     * @hide
     */

/**
     * @method setIconClass
     * @hide
     */

/**
     * @event activate
     * @hide
     */

/**
     * @event beforeclose
     * @hide
     */

/**
     * @event bodyresize
     * @hide
     */

/**
     * @event close
     * @hide
     */

/**
     * @event deactivate
     * @hide
     */
});
Ext.reg('fieldset', Ext.form.FieldSet);


The source code

/*!
 * licensing@extjs.com
 * http://www.extjs.com/license
 */

/**
 * @class Ext.layout.FitLayout
 * @extends Ext.layout.ContainerLayout
 *
This is a base class for layouts that contain a single item that automatically expands to fill the layout's
 * container.  This class is intended to be extended or created via the layout:'fit' {@link Ext.Container#layout}
 * config, and should generally not need to be created directly via the new keyword.

 *
FitLayout does not have any direct config options (other than inherited ones).  To fit a panel to a container
 * using FitLayout, simply set layout:'fit' on the container and add a single panel to it.  If the container has
 * multiple panels, only the first one will be displayed.  Example usage:

 *

var p = new Ext.Panel({
    title: 'Fit Layout',
    layout:'fit',
    items: {
        title: 'Inner Panel',
        html: '<p>This is the inner panel content</p>',
        border: false
    }
});

 */
Ext.layout.FitLayout = Ext.extend(Ext.layout.ContainerLayout, {
    // private
    monitorResize:true,

    type: 'fit',

    getLayoutTargetSize : function() {
        var target = this.container.getLayoutTarget();
        if (!target) {
            return {};
        }
        // Style Sized (scrollbars not included)
        return target.getStyleSize();
    },

    // private
    onLayout : function(ct, target){
        Ext.layout.FitLayout.superclass.onLayout.call(this, ct, target);
        if(!ct.collapsed){
            this.setItemSize(this.activeItem || ct.items.itemAt(0), this.getLayoutTargetSize());
        }
    },

    // private
    setItemSize : function(item, size){
        if(item && size.height > 0){ // display none?
            item.setSize(size);
        }
    }
});
Ext.Container.LAYOUTS['fit'] = Ext.layout.FitLayout;


The source code

/*!
 * licensing@extjs.com
 * http://www.extjs.com/license
 */

/**
 * @class Ext.FlashComponent
 * @extends Ext.BoxComponent
 * @constructor
 * @xtype flash
 */
Ext.FlashComponent = Ext.extend(Ext.BoxComponent, {

/**
     * @cfg {String} flashVersion
     * Indicates the version the flash content was published for. Defaults to '9.0.115'.
     */
    flashVersion : '9.0.115',

/**
     * @cfg {String} backgroundColor
     * The background color of the chart. Defaults to '#ffffff'.
     */
    backgroundColor: '#ffffff',

/**
     * @cfg {String} wmode
     * The wmode of the flash object. This can be used to control layering. Defaults to 'opaque'.
     */
    wmode: 'opaque',

/**
     * @cfg {Object} flashVars
     * A set of key value pairs to be passed to the flash object as flash variables. Defaults to undefined.
     */
    flashVars: undefined,

/**
     * @cfg {Object} flashParams
     * A set of key value pairs to be passed to the flash object as parameters. Possible parameters can be found here:
     * http://kb2.adobe.com/cps/127/tn_12701.html Defaults to undefined.
     */
    flashParams: undefined,

/**
     * @cfg {String} url
     * The URL of the chart to include. Defaults to undefined.
     */
    url: undefined,
    swfId : undefined,
    swfWidth: '100%',
    swfHeight: '100%',

/**
     * @cfg {Boolean} expressInstall
     * True to prompt the user to install flash if not installed. Note that this uses
     * Ext.FlashComponent.EXPRESS_INSTALL_URL, which should be set to the local resource. Defaults to false.
     */
    expressInstall: false,

    initComponent : function(){
        Ext.FlashComponent.superclass.initComponent.call(this);

        this.addEvents(

/**
             * @event initialize
             *
             * @param {Chart} this
             */
            'initialize'
        );
    },

    onRender : function(){
        Ext.FlashComponent.superclass.onRender.apply(this, arguments);

        var params = Ext.apply({
            allowScriptAccess: 'always',
            bgcolor: this.backgroundColor,
            wmode: this.wmode
        }, this.flashParams), vars = Ext.apply({
            allowedDomain: document.location.hostname,
            YUISwfId: this.getId(),
            YUIBridgeCallback: 'Ext.FlashEventProxy.onEvent'
        }, this.flashVars);

        new swfobject.embedSWF(this.url, this.id, this.swfWidth, this.swfHeight, this.flashVersion,
            this.expressInstall ? Ext.FlashComponent.EXPRESS_INSTALL_URL : undefined, vars, params);

        this.swf = Ext.getDom(this.id);
        this.el = Ext.get(this.swf);
    },

    getSwfId : function(){
        return this.swfId || (this.swfId = "extswf" + (++Ext.Component.AUTO_ID));
    },

    getId : function(){
        return this.id || (this.id = "extflashcmp" + (++Ext.Component.AUTO_ID));
    },

    onFlashEvent : function(e){
        switch(e.type){
            case "swfReady":
                this.initSwf();
                return;
            case "log":
                return;
        }
        e.component = this;
        this.fireEvent(e.type.toLowerCase().replace(/event$/, ''), e);
    },

    initSwf : function(){
        this.onSwfReady(!!this.isInitialized);
        this.isInitialized = true;
        this.fireEvent('initialize', this);
    },

    beforeDestroy: function(){
        if(this.rendered){
            swfobject.removeSWF(this.swf.id);
        }
        Ext.FlashComponent.superclass.beforeDestroy.call(this);
    },

    onSwfReady : Ext.emptyFn
});

/**
 * Sets the url for installing flash if it doesn't exist. This should be set to a local resource.
 * @static
 * @type String
 */
Ext.FlashComponent.EXPRESS_INSTALL_URL = 'http:/' + '/swfobject.googlecode.com/svn/trunk/swfobject/expressInstall.swf';

Ext.reg('flash', Ext.FlashComponent);


The source code

/*!
 * licensing@extjs.com
 * http://www.extjs.com/license
 */

/**
 * @class Ext.form.FormPanel
 * @extends Ext.Panel
 *
Standard form container.

 *
 *
Layout

 *
By default, FormPanel is configured with layout:'form' to use an {@link Ext.layout.FormLayout}
 * layout manager, which styles and renders fields and labels correctly. When nesting additional Containers
 * within a FormPanel, you should ensure that any descendant Containers which host input Fields use the
 * {@link Ext.layout.FormLayout} layout manager.

 *
 *
BasicForm

 *
Although not listed as configuration options of FormPanel, the FormPanel class accepts all
 * of the config options required to configure its internal {@link Ext.form.BasicForm} for:
 *

 *
  • {@link Ext.form.BasicForm#fileUpload file uploads}
    •
 *
  • functionality for {@link Ext.form.BasicForm#doAction loading, validating and submitting} the form
    •
 *

 *
 *
Note: If subclassing FormPanel, any configuration options for the BasicForm must be applied to
 * the initialConfig property of the FormPanel. Applying {@link Ext.form.BasicForm BasicForm}
 * configuration settings to this will not affect the BasicForm's configuration.

 *
 *
Form Validation

 *
For information on form validation see the following:

 *

 *
  • {@link Ext.form.TextField}
    •
 *
  • {@link Ext.form.VTypes}
    •
 *
  • {@link Ext.form.BasicForm#doAction BasicForm.doAction clientValidation notes}
    •
 *
  • {@link Ext.form.FormPanel#monitorValid monitorValid}
    •
 *

 *
 *
Form Submission

 *
By default, Ext Forms are submitted through Ajax, using {@link Ext.form.Action}. To enable normal browser
 * submission of the {@link Ext.form.BasicForm BasicForm} contained in this FormPanel, see the
 * {@link Ext.form.BasicForm#standardSubmit standardSubmit} option.

 *
 * @constructor
 * @param {Object} config Configuration options
 * @xtype form
 */
Ext.FormPanel = Ext.extend(Ext.Panel, {

/**
     * @cfg {String} formId (optional) The id of the FORM tag (defaults to an auto-generated id).
     */

/**
     * @cfg {Boolean} hideLabels
     *
true to hide field labels by default (sets display:none). Defaults to
     * false.

     *
Also see {@link Ext.Component}.{@link Ext.Component#hideLabel hideLabel}.
     */

/**
     * @cfg {Number} labelPad
     * The default padding in pixels for field labels (defaults to 5). labelPad only
     * applies if {@link #labelWidth} is also specified, otherwise it will be ignored.
     */

/**
     * @cfg {String} labelSeparator
     * See {@link Ext.Component}.{@link Ext.Component#labelSeparator labelSeparator}
     */

/**
     * @cfg {Number} labelWidth The width of labels in pixels. This property cascades to child containers
     * and can be overridden on any child container (e.g., a fieldset can specify a different labelWidth
     * for its fields) (defaults to 100).
     */

/**
     * @cfg {String} itemCls A css class to apply to the x-form-item of fields. This property cascades to child containers.
     */

/**
     * @cfg {Array} buttons
     * An array of {@link Ext.Button}s or {@link Ext.Button} configs used to add buttons to the footer of this FormPanel.

     *
Buttons in the footer of a FormPanel may be configured with the option formBind: true. This causes
     * the form's {@link #monitorValid valid state monitor task} to enable/disable those Buttons depending on
     * the form's valid/invalid state.

     */

/**
     * @cfg {Number} minButtonWidth Minimum width of all buttons in pixels (defaults to 75).
     */
    minButtonWidth : 75,

/**
     * @cfg {String} labelAlign The label alignment value used for the text-align specification
     * for the container. Valid values are "left", "top" or "right"
     * (defaults to "left"). This property cascades to child containers and can be
     * overridden on any child container (e.g., a fieldset can specify a different labelAlign
     * for its fields).
     */
    labelAlign : 'left',

/**
     * @cfg {Boolean} monitorValid If true, the form monitors its valid state client-side and
     * regularly fires the {@link #clientvalidation} event passing that state.

     *
When monitoring valid state, the FormPanel enables/disables any of its configured
     * {@link #buttons} which have been configured with formBind: true depending
     * on whether the {@link Ext.form.BasicForm#isValid form is valid} or not. Defaults to false

     */
    monitorValid : false,

/**
     * @cfg {Number} monitorPoll The milliseconds to poll valid state, ignored if monitorValid is not true (defaults to 200)
     */
    monitorPoll : 200,

/**
     * @cfg {String} layout Defaults to 'form'.  Normally this configuration property should not be altered.
     * For additional details see {@link Ext.layout.FormLayout} and {@link Ext.Container#layout Ext.Container.layout}.
     */
    layout : 'form',

    // private
    initComponent : function(){
        this.form = this.createForm();
        Ext.FormPanel.superclass.initComponent.call(this);

        this.bodyCfg = {
            tag: 'form',
            cls: this.baseCls + '-body',
            method : this.method || 'POST',
            id : this.formId || Ext.id()
        };
        if(this.fileUpload) {
            this.bodyCfg.enctype = 'multipart/form-data';
        }
        this.initItems();

        this.addEvents(

/**
             * @event clientvalidation
             * If the monitorValid config option is true, this event fires repetitively to notify of valid state
             * @param {Ext.form.FormPanel} this
             * @param {Boolean} valid true if the form has passed client-side validation
             */
            'clientvalidation'
        );

        this.relayEvents(this.form, ['beforeaction', 'actionfailed', 'actioncomplete']);
    },

    // private
    createForm : function(){
        var config = Ext.applyIf({listeners: {}}, this.initialConfig);
        return new Ext.form.BasicForm(null, config);
    },

    // private
    initFields : function(){
        var f = this.form;
        var formPanel = this;
        var fn = function(c){
            if(formPanel.isField(c)){
                f.add(c);
            }else if(c.findBy && c != formPanel){
                formPanel.applySettings(c);
                //each check required for check/radio groups.
                if(c.items && c.items.each){
                    c.items.each(fn, this);
                }
            }
        };
        this.items.each(fn, this);
    },

    // private
    applySettings: function(c){
        var ct = c.ownerCt;
        Ext.applyIf(c, {
            labelAlign: ct.labelAlign,
            labelWidth: ct.labelWidth,
            itemCls: ct.itemCls
        });
    },

    // private
    getLayoutTarget : function(){
        return this.form.el;
    },

/**
     * Provides access to the {@link Ext.form.BasicForm Form} which this Panel contains.
     * @return {Ext.form.BasicForm} The {@link Ext.form.BasicForm Form} which this Panel contains.
     */
    getForm : function(){
        return this.form;
    },

    // private
    onRender : function(ct, position){
        this.initFields();
        Ext.FormPanel.superclass.onRender.call(this, ct, position);
        this.form.initEl(this.body);
    },

    // private
    beforeDestroy : function(){
        this.stopMonitoring();
        this.form.destroy(true);
        Ext.FormPanel.superclass.beforeDestroy.call(this);
    },

    // Determine if a Component is usable as a form Field.
    isField : function(c) {
        return !!c.setValue && !!c.getValue && !!c.markInvalid && !!c.clearInvalid;
    },

    // private
    initEvents : function(){
        Ext.FormPanel.superclass.initEvents.call(this);
        // Listeners are required here to catch bubbling events from children.
        this.on({
            scope: this,
            add: this.onAddEvent,
            remove: this.onRemoveEvent
        });
        if(this.monitorValid){ // initialize after render
            this.startMonitoring();
        }
    },

    // private
    onAdd: function(c){
        Ext.FormPanel.superclass.onAdd.call(this, c);
        this.processAdd(c);
    },

    // private
    onAddEvent: function(ct, c){
        if(ct !== this){
            this.processAdd(c);
        }
    },

    // private
    processAdd : function(c){
        // If a single form Field, add it
        if(this.isField(c)){
            this.form.add(c);
        // If a Container, add any Fields it might contain
        }else if(c.findBy){
            this.applySettings(c);
            this.form.add.apply(this.form, c.findBy(this.isField));
        }
    },

    // private
    onRemove: function(c){
        Ext.FormPanel.superclass.onRemove.call(this, c);
        this.processRemove(c);
    },

    onRemoveEvent: function(ct, c){
        if(ct !== this){
            this.processRemove(c);
        }
    },

    // private
    processRemove: function(c){
        if(!this.destroying){
            // If a single form Field, remove it
            if(this.isField(c)){
                this.form.remove(c);
            // If a Container, its already destroyed by the time it gets here.  Remove any references to destroyed fields.
            }else if (c.findBy){
                Ext.each(c.findBy(this.isField), this.form.remove, this.form);
            }
        }
    },

/**
     * Starts monitoring of the valid state of this form. Usually this is done by passing the config
     * option "monitorValid"
     */
    startMonitoring : function(){
        if(!this.validTask){
            this.validTask = new Ext.util.TaskRunner();
            this.validTask.start({
                run : this.bindHandler,
                interval : this.monitorPoll || 200,
                scope: this
            });
        }
    },

/**
     * Stops monitoring of the valid state of this form
     */
    stopMonitoring : function(){
        if(this.validTask){
            this.validTask.stopAll();
            this.validTask = null;
        }
    },

/**
     * This is a proxy for the underlying BasicForm's {@link Ext.form.BasicForm#load} call.
     * @param {Object} options The options to pass to the action (see {@link Ext.form.BasicForm#doAction} for details)
     */
    load : function(){
        this.form.load.apply(this.form, arguments);
    },

    // private
    onDisable : function(){
        Ext.FormPanel.superclass.onDisable.call(this);
        if(this.form){
            this.form.items.each(function(){
                 this.disable();
            });
        }
    },

    // private
    onEnable : function(){
        Ext.FormPanel.superclass.onEnable.call(this);
        if(this.form){
            this.form.items.each(function(){
                 this.enable();
            });
        }
    },

    // private
    bindHandler : function(){
        var valid = true;
        this.form.items.each(function(f){
            if(!f.isValid(true)){
                valid = false;
                return false;
            }
        });
        if(this.fbar){
            var fitems = this.fbar.items.items;
            for(var i = 0, len = fitems.length; i < len; i++){
                var btn = fitems[i];
                if(btn.formBind === true && btn.disabled === valid){
                    btn.setDisabled(!valid);
                }
            }
        }
        this.fireEvent('clientvalidation', this, valid);
    }
});
Ext.reg('form', Ext.FormPanel);

Ext.form.FormPanel = Ext.FormPanel;


The source code

/*!
 * licensing@extjs.com
 * http://www.extjs.com/license
 */

/**
 * @class Ext.util.Format
 * Reusable data formatting functions
 * @singleton
 */
Ext.util.Format = function(){
    var trimRe = /^\s+|\s+$/g,
        stripTagsRE = /<\/?[^>]+>/gi,
        stripScriptsRe = /(?:)((\n|\r|.)*?)(?:<\/script>)/ig,
        nl2brRe = /\r?\n/g;

    return {

/**
         * Truncate a string and add an ellipsis ('...') to the end if it exceeds the specified length
         * @param {String} value The string to truncate
         * @param {Number} length The maximum length to allow before truncating
         * @param {Boolean} word True to try to find a common work break
         * @return {String} The converted text
         */
        ellipsis : function(value, len, word){
            if(value && value.length > len){
                if(word){
                    var vs = value.substr(0, len - 2),
                        index = Math.max(vs.lastIndexOf(' '), vs.lastIndexOf('.'), vs.lastIndexOf('!'), vs.lastIndexOf('?'));
                    if(index == -1 || index < (len - 15)){
                        return value.substr(0, len - 3) + "...";
                    }else{
                        return vs.substr(0, index) + "...";
                    }
                } else{
                    return value.substr(0, len - 3) + "...";
                }
            }
            return value;
        },

/**
         * Checks a reference and converts it to empty string if it is undefined
         * @param {Mixed} value Reference to check
         * @return {Mixed} Empty string if converted, otherwise the original value
         */
        undef : function(value){
            return value !== undefined ? value : "";
        },

/**
         * Checks a reference and converts it to the default value if it's empty
         * @param {Mixed} value Reference to check
         * @param {String} defaultValue The value to insert of it's undefined (defaults to "")
         * @return {String}
         */
        defaultValue : function(value, defaultValue){
            return value !== undefined && value !== '' ? value : defaultValue;
        },

/**
         * Convert certain characters (&, <, >, and ') to their HTML character equivalents for literal display in web pages.
         * @param {String} value The string to encode
         * @return {String} The encoded text
         */
        htmlEncode : function(value){
            return !value ? value : String(value).replace(/&/g, "&").replace(/>/g, ">").replace(//**
         * Convert certain characters (&, <, >, and ') from their HTML character equivalents.
         * @param {String} value The string to decode
         * @return {String} The decoded text
         */
        htmlDecode : function(value){
            return !value ? value : String(value).replace(/>/g, ">").replace(/</g, "<").replace(/"/g, '"').replace(/&/g, "&");
        },

/**
         * Trims any whitespace from either side of a string
         * @param {String} value The text to trim
         * @return {String} The trimmed text
         */
        trim : function(value){
            return String(value).replace(trimRe, "");
        },

/**
         * Returns a substring from within an original string
         * @param {String} value The original text
         * @param {Number} start The start index of the substring
         * @param {Number} length The length of the substring
         * @return {String} The substring
         */
        substr : function(value, start, length){
            return String(value).substr(start, length);
        },

/**
         * Converts a string to all lower case letters
         * @param {String} value The text to convert
         * @return {String} The converted text
         */
        lowercase : function(value){
            return String(value).toLowerCase();
        },

/**
         * Converts a string to all upper case letters
         * @param {String} value The text to convert
         * @return {String} The converted text
         */
        uppercase : function(value){
            return String(value).toUpperCase();
        },

/**
         * Converts the first character only of a string to upper case
         * @param {String} value The text to convert
         * @return {String} The converted text
         */
        capitalize : function(value){
            return !value ? value : value.charAt(0).toUpperCase() + value.substr(1).toLowerCase();
        },

        // private
        call : function(value, fn){
            if(arguments.length > 2){
                var args = Array.prototype.slice.call(arguments, 2);
                args.unshift(value);
                return eval(fn).apply(window, args);
            }else{
                return eval(fn).call(window, value);
            }
        },

/**
         * Format a number as US currency
         * @param {Number/String} value The numeric value to format
         * @return {String} The formatted currency string
         */
        usMoney : function(v){
            v = (Math.round((v-0)*100))/100;
            v = (v == Math.floor(v)) ? v + ".00" : ((v*10 == Math.floor(v*10)) ? v + "0" : v);
            v = String(v);
            var ps = v.split('.'),
                whole = ps[0],
                sub = ps[1] ? '.'+ ps[1] : '.00',
                r = /(\d+)(\d{3})/;
            while (r.test(whole)) {
                whole = whole.replace(r, '$1' + ',' + '$2');
            }
            v = whole + sub;
            if(v.charAt(0) == '-'){
                return '-$' + v.substr(1);
            }
            return "$" +  v;
        },

/**
         * Parse a value into a formatted date using the specified format pattern.
         * @param {String/Date} value The value to format (Strings must conform to the format expected by the javascript Date object's parse() method)
         * @param {String} format (optional) Any valid date format string (defaults to 'm/d/Y')
         * @return {String} The formatted date string
         */
        date : function(v, format){
            if(!v){
                return "";
            }
            if(!Ext.isDate(v)){
                v = new Date(Date.parse(v));
            }
            return v.dateFormat(format || "m/d/Y");
        },

/**
         * Returns a date rendering function that can be reused to apply a date format multiple times efficiently
         * @param {String} format Any valid date format string
         * @return {Function} The date formatting function
         */
        dateRenderer : function(format){
            return function(v){
                return Ext.util.Format.date(v, format);
            };
        },

/**
         * Strips all HTML tags
         * @param {Mixed} value The text from which to strip tags
         * @return {String} The stripped text
         */
        stripTags : function(v){
            return !v ? v : String(v).replace(stripTagsRE, "");
        },

/**
         * Strips all script tags
         * @param {Mixed} value The text from which to strip script tags
         * @return {String} The stripped text
         */
        stripScripts : function(v){
            return !v ? v : String(v).replace(stripScriptsRe, "");
        },

/**
         * Simple format for a file size (xxx bytes, xxx KB, xxx MB)
         * @param {Number/String} size The numeric value to format
         * @return {String} The formatted file size
         */
        fileSize : function(size){
            if(size < 1024) {
                return size + " bytes";
            } else if(size < 1048576) {
                return (Math.round(((size*10) / 1024))/10) + " KB";
            } else {
                return (Math.round(((size*10) / 1048576))/10) + " MB";
            }
        },

/**
         * It does simple math for use in a template, for example:

         * var tpl = new Ext.Template('{value} * 10 = {value:math("* 10")}');
         *

         * @return {Function} A function that operates on the passed value.
         */
        math : function(){
            var fns = {};
            return function(v, a){
                if(!fns[a]){
                    fns[a] = new Function('v', 'return v ' + a + ';');
                }
                return fns[a](v);
            }
        }(),

/**
         * Rounds the passed number to the required decimal precision.
         * @param {Number/String} value The numeric value to round.
         * @param {Number} precision The number of decimal places to which to round the first parameter's value.
         * @return {Number} The rounded value.
         */
        round : function(value, precision) {
            var result = Number(value);
            if (typeof precision == 'number') {
                precision = Math.pow(10, precision);
                result = Math.round(value * precision) / precision;
            }
            return result;
        },

/**
         * Formats the number according to the format string.
         *
examples (123456.789):
         *

         * 0 - (123456) show only digits, no precision

         * 0.00 - (123456.78) show only digits, 2 precision

         * 0.0000 - (123456.7890) show only digits, 4 precision

         * 0,000 - (123,456) show comma and digits, no precision

         * 0,000.00 - (123,456.78) show comma and digits, 2 precision

         * 0,0.00 - (123,456.78) shortcut method, show comma and digits, 2 precision

         * To reverse the grouping (,) and decimal (.) for international numbers, add /i to the end.
         * For example: 0.000,00/i
         *

         * @param {Number} v The number to format.
         * @param {String} format The way you would like to format this text.
         * @return {String} The formatted number.
         */
        number: function(v, format) {
            if(!format){
                return v;
            }
            v = Ext.num(v, NaN);
            if (isNaN(v)){
                return '';
            }
            var comma = ',',
                dec = '.',
                i18n = false,
                neg = v < 0;

            v = Math.abs(v);
            if(format.substr(format.length - 2) == '/i'){
                format = format.substr(0, format.length - 2);
                i18n = true;
                comma = '.';
                dec = ',';
            }

            var hasComma = format.indexOf(comma) != -1,
                psplit = (i18n ? format.replace(/[^\d\,]/g, '') : format.replace(/[^\d\.]/g, '')).split(dec);

            if(1 < psplit.length){
                v = v.toFixed(psplit[1].length);
            }else if(2 < psplit.length){
                throw ('NumberFormatException: invalid format, formats should have no more than 1 period: ' + format);
            }else{
                v = v.toFixed(0);
            }

            var fnum = v.toString();

            psplit = fnum.split('.');

            if (hasComma) {
                var cnum = psplit[0], parr = [], j = cnum.length, m = Math.floor(j / 3), n = cnum.length % 3 || 3;

                for (var i = 0; i < j; i += n) {
                    if (i != 0) {
                        n = 3;
                    }
                    parr[parr.length] = cnum.substr(i, n);
                    m -= 1;
                }
                fnum = parr.join(comma);
                if (psplit[1]) {
                    fnum += dec + psplit[1];
                }
            } else {
                if (psplit[1]) {
                    fnum = psplit[0] + dec + psplit[1];
                }
            }

            return (neg ? '-' : '') + format.replace(/[\d,?\.?]+/, fnum);
        },

/**
         * Returns a number rendering function that can be reused to apply a number format multiple times efficiently
         * @param {String} format Any valid number format string for {@link #number}
         * @return {Function} The number formatting function
         */
        numberRenderer : function(format){
            return function(v){
                return Ext.util.Format.number(v, format);
            };
        },

/**
         * Selectively do a plural form of a word based on a numeric value. For example, in a template,
         * {commentCount:plural("Comment")}  would result in "1 Comment" if commentCount was 1 or would be "x Comments"
         * if the value is 0 or greater than 1.
         * @param {Number} value The value to compare against
         * @param {String} singular The singular form of the word
         * @param {String} plural (optional) The plural form of the word (defaults to the singular with an "s")
         */
        plural : function(v, s, p){
            return v +' ' + (v == 1 ? s : (p ? p : s+'s'));
        },

/**
         * Converts newline characters to the HTML tag <br/>
         * @param {String} The string value to format.
         * @return {String} The string with embedded <br/> tags in place of newlines.
         */
        nl2br : function(v){
            return Ext.isEmpty(v) ? '' : v.replace(nl2brRe, '
');
        }
    }
}();


The source code

/*!
 * licensing@extjs.com
 * http://www.extjs.com/license
 */

/**
 * @class Ext.layout.FormLayout
 * @extends Ext.layout.AnchorLayout
 *
This layout manager is specifically designed for rendering and managing child Components of
 * {@link Ext.form.FormPanel forms}. It is responsible for rendering the labels of
 * {@link Ext.form.Field Field}s.

 *
 *
This layout manager is used when a Container is configured with the layout:'form'
 * {@link Ext.Container#layout layout} config option, and should generally not need to be created directly
 * via the new keyword. See {@link Ext.Container#layout} for additional details.

 *
 *
In an application, it will usually be preferrable to use a {@link Ext.form.FormPanel FormPanel}
 * (which is configured with FormLayout as its layout class by default) since it also provides built-in
 * functionality for {@link Ext.form.BasicForm#doAction loading, validating and submitting} the form.

 *
 *
A {@link Ext.Container Container} using the FormLayout layout manager (e.g.
 * {@link Ext.form.FormPanel} or specifying layout:'form') can also accept the following
 * layout-specific config properties:

 *
  • {@link Ext.form.FormPanel#hideLabels hideLabels}
    •
 *
  • {@link Ext.form.FormPanel#labelAlign labelAlign}
    •
 *
  • {@link Ext.form.FormPanel#labelPad labelPad}
    •
 *
  • {@link Ext.form.FormPanel#labelSeparator labelSeparator}
    •
 *
  • {@link Ext.form.FormPanel#labelWidth labelWidth}
    •
 *

 *
 *
Any Component (including Fields) managed by FormLayout accepts the following as a config option:
 *

 *
  • {@link Ext.Component#anchor anchor}
    •
 *

 *
 *
Any Component managed by FormLayout may be rendered as a form field (with an associated label) by
 * configuring it with a non-null {@link Ext.Component#fieldLabel fieldLabel}. Components configured
 * in this way may be configured with the following options which affect the way the FormLayout renders them:
 *

 *
  • {@link Ext.Component#clearCls clearCls}
    •
 *
  • {@link Ext.Component#fieldLabel fieldLabel}
    •
 *
  • {@link Ext.Component#hideLabel hideLabel}
    •
 *
  • {@link Ext.Component#itemCls itemCls}
    •
 *
  • {@link Ext.Component#labelSeparator labelSeparator}
    •
 *
  • {@link Ext.Component#labelStyle labelStyle}
    •
 *

 *
 *
Example usage:

 *

// Required if showing validation messages
Ext.QuickTips.init();

// While you can create a basic Panel with layout:'form', practically
// you should usually use a FormPanel to also get its form functionality
// since it already creates a FormLayout internally.
var form = new Ext.form.FormPanel({
    title: 'Form Layout',
    bodyStyle: 'padding:15px',
    width: 350,
    defaultType: 'textfield',
    defaults: {
        // applied to each contained item
        width: 230,
        msgTarget: 'side'
    },
    items: [{
            fieldLabel: 'First Name',
            name: 'first',
            allowBlank: false,
            {@link Ext.Component#labelSeparator labelSeparator}: ':' // override labelSeparator layout config
        },{
            fieldLabel: 'Last Name',
            name: 'last'
        },{
            fieldLabel: 'Email',
            name: 'email',
            vtype:'email'
        }, {
            xtype: 'textarea',
            hideLabel: true,     // override hideLabels layout config
            name: 'msg',
            anchor: '100% -53'
        }
    ],
    buttons: [
        {text: 'Save'},
        {text: 'Cancel'}
    ],
    layoutConfig: {
        {@link #labelSeparator}: '~' // superseded by assignment below
    },
    // config options applicable to container when layout='form':
    hideLabels: false,
    labelAlign: 'left',   // or 'right' or 'top'
    {@link Ext.form.FormPanel#labelSeparator labelSeparator}: '>>', // takes precedence over layoutConfig value
    labelWidth: 65,       // defaults to 100
    labelPad: 8           // defaults to 5, must specify labelWidth to be honored
});

 */
Ext.layout.FormLayout = Ext.extend(Ext.layout.AnchorLayout, {

/**
     * @cfg {String} labelSeparator
     * See {@link Ext.form.FormPanel}.{@link Ext.form.FormPanel#labelSeparator labelSeparator}.  Configuration
     * of this property at the container level takes precedence.
     */
    labelSeparator : ':',

/**
     * Read only. The CSS style specification string added to field labels in this layout if not
     * otherwise {@link Ext.Component#labelStyle specified by each contained field}.
     * @type String
     * @property labelStyle
     */

/**
     * @cfg {Boolean} trackLabels
     * True to show/hide the field label when the field is hidden. Defaults to false.
     */
    trackLabels: false,

    type: 'form',

    onRemove: function(c){
        Ext.layout.FormLayout.superclass.onRemove.call(this, c);
        if(this.trackLabels){
            c.un('show', this.onFieldShow, this);
            c.un('hide', this.onFieldHide, this);
        }
        // check for itemCt, since we may be removing a fieldset or something similar
        var el = c.getPositionEl(),
            ct = c.getItemCt && c.getItemCt();
        if (c.rendered && ct) {
            if (el && el.dom) {
                el.insertAfter(ct);
            }
            Ext.destroy(ct);
            Ext.destroyMembers(c, 'label', 'itemCt');
            if (c.customItemCt) {
                Ext.destroyMembers(c, 'getItemCt', 'customItemCt');
            }
        }
    },

    // private
    setContainer : function(ct){
        Ext.layout.FormLayout.superclass.setContainer.call(this, ct);
        if(ct.labelAlign){
            ct.addClass('x-form-label-'+ct.labelAlign);
        }

        if(ct.hideLabels){
            Ext.apply(this, {
                labelStyle: 'display:none',
                elementStyle: 'padding-left:0;',
                labelAdjust: 0
            });
        }else{
            this.labelSeparator = ct.labelSeparator || this.labelSeparator;
            ct.labelWidth = ct.labelWidth || 100;
            if(Ext.isNumber(ct.labelWidth)){
                var pad = Ext.isNumber(ct.labelPad) ? ct.labelPad : 5;
                Ext.apply(this, {
                    labelAdjust: ct.labelWidth + pad,
                    labelStyle: 'width:' + ct.labelWidth + 'px;',
                    elementStyle: 'padding-left:' + (ct.labelWidth + pad) + 'px'
                });
            }
            if(ct.labelAlign == 'top'){
                Ext.apply(this, {
                    labelStyle: 'width:auto;',
                    labelAdjust: 0,
                    elementStyle: 'padding-left:0;'
                });
            }
        }
    },

    // private
    isHide: function(c){
        return c.hideLabel || this.container.hideLabels;
    },

    onFieldShow: function(c){
        c.getItemCt().removeClass('x-hide-' + c.hideMode);
    },

    onFieldHide: function(c){
        c.getItemCt().addClass('x-hide-' + c.hideMode);
    },

    //private
    getLabelStyle: function(s){
        var ls = '', items = [this.labelStyle, s];
        for (var i = 0, len = items.length; i < len; ++i){
            if (items[i]){
                ls += items[i];
                if (ls.substr(-1, 1) != ';'){
                    ls += ';';
                }
            }
        }
        return ls;
    },

/**
     * @cfg {Ext.Template} fieldTpl
     * A {@link Ext.Template#compile compile}d {@link Ext.Template} for rendering
     * the fully wrapped, labeled and styled form Field. Defaults to:

new Ext.Template(
    '<div class="x-form-item {itemCls}" tabIndex="-1">',
        '<label for="{id}" style="{labelStyle}" class="x-form-item-label">{label}{labelSeparator}</label>',
        '<div class="x-form-element" id="x-form-el-{id}" style="{elementStyle}">',
        '</div><div class="{clearCls}"></div>',
    '</div>'
);

     *
This may be specified to produce a different DOM structure when rendering form Fields.

     *
A description of the properties within the template follows:

     *
  • itemCls : String
    The CSS class applied to the outermost div wrapper
     * that contains this field label and field element (the default class is 'x-form-item' and itemCls
     * will be added to that). If supplied, itemCls at the field level will override the default itemCls
     * supplied at the container level.
    •
     *
  • id : String
    The id of the Field
    •
     *
  • {@link #labelStyle} : String

     * A CSS style specification string to add to the field label for this field (defaults to '' or the
     * {@link #labelStyle layout's value for labelStyle}).
    •
     *
  • label : String
    The text to display as the label for this
     * field (defaults to '')
    •
     *
  • {@link #labelSeparator} : String
    The separator to display after
     * the text of the label for this field (defaults to a colon ':' or the
     * {@link #labelSeparator layout's value for labelSeparator}). To hide the separator use empty string ''.
    •
     *
  • elementStyle : String
    The styles text for the input element's wrapper.
    •
     *
  • clearCls : String
    The CSS class to apply to the special clearing div
     * rendered directly after each form field wrapper (defaults to 'x-form-clear-left')
    •
     *

     *
Also see {@link #getTemplateArgs}

     */

    /**
     * @private
     *
     */
    renderItem : function(c, position, target){
        if(c && (c.isFormField || c.fieldLabel) && c.inputType != 'hidden'){
            var args = this.getTemplateArgs(c);
            if(Ext.isNumber(position)){
                position = target.dom.childNodes[position] || null;
            }
            if(position){
                c.itemCt = this.fieldTpl.insertBefore(position, args, true);
            }else{
                c.itemCt = this.fieldTpl.append(target, args, true);
            }
            if(!c.getItemCt){
                // Non form fields don't have getItemCt, apply it here
                // This will get cleaned up in onRemove
                Ext.apply(c, {
                    getItemCt: function(){
                        return c.itemCt;
                    },
                    customItemCt: true
                });
            }
            c.label = c.getItemCt().child('label.x-form-item-label');
            if(!c.rendered){
                c.render('x-form-el-' + c.id);
            }else if(!this.isValidParent(c, target)){
                Ext.fly('x-form-el-' + c.id).appendChild(c.getPositionEl());
            }
            if(this.trackLabels){
                if(c.hidden){
                    this.onFieldHide(c);
                }
                c.on({
                    scope: this,
                    show: this.onFieldShow,
                    hide: this.onFieldHide
                });
            }
            this.configureItem(c);
        }else {
            Ext.layout.FormLayout.superclass.renderItem.apply(this, arguments);
        }
    },

/**
     *
Provides template arguments for rendering the fully wrapped, labeled and styled form Field.

     *
This method returns an object hash containing properties used by the layout's {@link #fieldTpl}
     * to create a correctly wrapped, labeled and styled form Field. This may be overriden to
     * create custom layouts. The properties which must be returned are:

     *
  • itemCls : String
    The CSS class applied to the outermost div wrapper
     * that contains this field label and field element (the default class is 'x-form-item' and itemCls
     * will be added to that). If supplied, itemCls at the field level will override the default itemCls
     * supplied at the container level.
    •
     *
  • id : String
    The id of the Field
    •
     *
  • {@link #labelStyle} : String

     * A CSS style specification string to add to the field label for this field (defaults to '' or the
     * {@link #labelStyle layout's value for labelStyle}).
    •
     *
  • label : String
    The text to display as the label for this
     * field (defaults to the field's configured fieldLabel property)
    •
     *
  • {@link #labelSeparator} : String
    The separator to display after
     * the text of the label for this field (defaults to a colon ':' or the
     * {@link #labelSeparator layout's value for labelSeparator}). To hide the separator use empty string ''.
    •
     *
  • elementStyle : String
    The styles text for the input element's wrapper.
    •
     *
  • clearCls : String
    The CSS class to apply to the special clearing div
     * rendered directly after each form field wrapper (defaults to 'x-form-clear-left')
    •
     *

     * @param (Ext.form.Field} field The {@link Ext.form.Field Field} being rendered.
     * @return {Object} An object hash containing the properties required to render the Field.
     */
    getTemplateArgs: function(field) {
        var noLabelSep = !field.fieldLabel || field.hideLabel;

        return {
            id            : field.id,
            label         : field.fieldLabel,
            itemCls       : (field.itemCls || this.container.itemCls || '') + (field.hideLabel ? ' x-hide-label' : ''),
            clearCls      : field.clearCls || 'x-form-clear-left',
            labelStyle    : this.getLabelStyle(field.labelStyle),
            elementStyle  : this.elementStyle || '',
            labelSeparator: noLabelSep ? '' : (Ext.isDefined(field.labelSeparator) ? field.labelSeparator : this.labelSeparator)
        };
    },

    // private
    adjustWidthAnchor: function(value, c){
        if(c.label && !this.isHide(c) && (this.container.labelAlign != 'top')){
            var adjust = Ext.isIE6 || (Ext.isIE && !Ext.isStrict);
            return value - this.labelAdjust + (adjust ? -3 : 0);
        }
        return value;
    },

    adjustHeightAnchor : function(value, c){
        if(c.label && !this.isHide(c) && (this.container.labelAlign == 'top')){
            return value - c.label.getHeight();
        }
        return value;
    },

    // private
    isValidParent : function(c, target){
        return target && this.container.getEl().contains(c.getPositionEl());
    }

/**
     * @property activeItem
     * @hide
     */
});

Ext.Container.LAYOUTS['form'] = Ext.layout.FormLayout;


The source code

/*!
 * licensing@extjs.com
 * http://www.extjs.com/license
 */
(function(){
    // contants
    var NULL = null,
        UNDEFINED = undefined,
        TRUE = true,
        FALSE = false,
        SETX = "setX",
        SETY = "setY",
        SETXY = "setXY",
        LEFT = "left",
        BOTTOM = "bottom",
        TOP = "top",
        RIGHT = "right",
        HEIGHT = "height",
        WIDTH = "width",
        POINTS = "points",
        HIDDEN = "hidden",
        ABSOLUTE = "absolute",
        VISIBLE = "visible",
        MOTION = "motion",
        POSITION = "position",
        EASEOUT = "easeOut",
        /*
         * Use a light flyweight here since we are using so many callbacks and are always assured a DOM element
         */
        flyEl = new Ext.Element.Flyweight(),
        queues = {},
        getObject = function(o){
            return o || {};
        },
        fly = function(dom){
            flyEl.dom = dom;
            flyEl.id = Ext.id(dom);
            return flyEl;
        },
        /*
         * Queueing now stored outside of the element due to closure issues
         */
        getQueue = function(id){
            if(!queues[id]){
                queues[id] = [];
            }
            return queues[id];
        },
        setQueue = function(id, value){
            queues[id] = value;
        };

//Notifies Element that fx methods are available
Ext.enableFx = TRUE;

/**
 * @class Ext.Fx
 *
A class to provide basic animation and visual effects support.  Note: This class is automatically applied
 * to the {@link Ext.Element} interface when included, so all effects calls should be performed via {@link Ext.Element}.
 * Conversely, since the effects are not actually defined in {@link Ext.Element}, Ext.Fx must be
 * {@link Ext#enableFx included} in order for the Element effects to work.

 *
 *
Method Chaining

 *
It is important to note that although the Fx methods and many non-Fx Element methods support "method chaining" in that
 * they return the Element object itself as the method return value, it is not always possible to mix the two in a single
 * method chain.  The Fx methods use an internal effects queue so that each effect can be properly timed and sequenced.
 * Non-Fx methods, on the other hand, have no such internal queueing and will always execute immediately.  For this reason,
 * while it may be possible to mix certain Fx and non-Fx method calls in a single chain, it may not always provide the
 * expected results and should be done with care.  Also see {@link #callback}.

 *
 *
Anchor Options for Motion Effects

 *
Motion effects support 8-way anchoring, meaning that you can choose one of 8 different anchor points on the Element
 * that will serve as either the start or end point of the animation.  Following are all of the supported anchor positions:

Value  Description
-----  -----------------------------
tl     The top left corner
t      The center of the top edge
tr     The top right corner
l      The center of the left edge
r      The center of the right edge
bl     The bottom left corner
b      The center of the bottom edge
br     The bottom right corner

 * Note: some Fx methods accept specific custom config parameters.  The options shown in the Config Options
 * section below are common options that can be passed to any Fx method unless otherwise noted.
 *
 * @cfg {Function} callback A function called when the effect is finished.  Note that effects are queued internally by the
 * Fx class, so a callback is not required to specify another effect -- effects can simply be chained together
 * and called in sequence (see note for Method Chaining above), for example:

 * el.slideIn().highlight();
 *

 * The callback is intended for any additional code that should run once a particular effect has completed. The Element
 * being operated upon is passed as the first parameter.
 *
 * @cfg {Object} scope The scope (this reference) in which the {@link #callback} function is executed. Defaults to the browser window.
 *
 * @cfg {String} easing A valid Ext.lib.Easing value for the effect:

 *
  • backBoth
    •
 *
  • backIn
    •
 *
  • backOut
    •
 *
  • bounceBoth
    •
 *
  • bounceIn
    •
 *
  • bounceOut
    •
 *
  • easeBoth
    •
 *
  • easeBothStrong
    •
 *
  • easeIn
    •
 *
  • easeInStrong
    •
 *
  • easeNone
    •
 *
  • easeOut
    •
 *
  • easeOutStrong
    •
 *
  • elasticBoth
    •
 *
  • elasticIn
    •
 *
  • elasticOut
    •
 *

 *
 * @cfg {String} afterCls A css class to apply after the effect
 * @cfg {Number} duration The length of time (in seconds) that the effect should last
 *
 * @cfg {Number} endOpacity Only applicable for {@link #fadeIn} or {@link #fadeOut}, a number between
 * 0 and 1 inclusive to configure the ending opacity value.
 *
 * @cfg {Boolean} remove Whether the Element should be removed from the DOM and destroyed after the effect finishes
 * @cfg {Boolean} useDisplay Whether to use the display CSS property instead of visibility when hiding Elements (only applies to
 * effects that end with the element being visually hidden, ignored otherwise)
 * @cfg {String/Object/Function} afterStyle A style specification string, e.g. "width:100px", or an object
 * in the form {width:"100px"}, or a function which returns such a specification that will be applied to the
 * Element after the effect finishes.
 * @cfg {Boolean} block Whether the effect should block other effects from queueing while it runs
 * @cfg {Boolean} concurrent Whether to allow subsequently-queued effects to run at the same time as the current effect, or to ensure that they run in sequence
 * @cfg {Boolean} stopFx Whether preceding effects should be stopped and removed before running current effect (only applies to non blocking effects)
 */
Ext.Fx = {

    // private - calls the function taking arguments from the argHash based on the key.  Returns the return value of the function.
    //           this is useful for replacing switch statements (for example).
    switchStatements : function(key, fn, argHash){
        return fn.apply(this, argHash[key]);
    },

    /**
     * Slides the element into view.  An anchor point can be optionally passed to set the point of
     * origin for the slide effect.  This function automatically handles wrapping the element with
     * a fixed-size container if needed.  See the Fx class overview for valid anchor point options.
     * Usage:
     *

// default: slide the element in from the top
el.slideIn();

// custom: slide the element in from the right with a 2-second duration
el.slideIn('r', { duration: 2 });

// common config options shown with default values
el.slideIn('t', {
    easing: 'easeOut',
    duration: .5
});

     * @param {String} anchor (optional) One of the valid Fx anchor positions (defaults to top: 't')
     * @param {Object} options (optional) Object literal with any of the Fx config options
     * @return {Ext.Element} The Element
     */
    slideIn : function(anchor, o){
        o = getObject(o);
        var me = this,
            dom = me.dom,
            st = dom.style,
            xy,
            r,
            b,
            wrap,
            after,
            st,
            args,
            pt,
            bw,
            bh;

        anchor = anchor || "t";

        me.queueFx(o, function(){
            xy = fly(dom).getXY();
            // fix display to visibility
            fly(dom).fixDisplay();

            // restore values after effect
            r = fly(dom).getFxRestore();
            b = {x: xy[0], y: xy[1], 0: xy[0], 1: xy[1], width: dom.offsetWidth, height: dom.offsetHeight};
            b.right = b.x + b.width;
            b.bottom = b.y + b.height;

            // fixed size for slide
            fly(dom).setWidth(b.width).setHeight(b.height);

            // wrap if needed
            wrap = fly(dom).fxWrap(r.pos, o, HIDDEN);

            st.visibility = VISIBLE;
            st.position = ABSOLUTE;

            // clear out temp styles after slide and unwrap
            function after(){
                 fly(dom).fxUnwrap(wrap, r.pos, o);
                 st.width = r.width;
                 st.height = r.height;
                 fly(dom).afterFx(o);
            }

            // time to calculate the positions
            pt = {to: [b.x, b.y]};
            bw = {to: b.width};
            bh = {to: b.height};

            function argCalc(wrap, style, ww, wh, sXY, sXYval, s1, s2, w, h, p){
                var ret = {};
                fly(wrap).setWidth(ww).setHeight(wh);
                if(fly(wrap)[sXY]){
                    fly(wrap)[sXY](sXYval);
                }
                style[s1] = style[s2] = "0";
                if(w){
                    ret.width = w
                };
                if(h){
                    ret.height = h;
                }
                if(p){
                    ret.points = p;
                }
                return ret;
            };

            args = fly(dom).switchStatements(anchor.toLowerCase(), argCalc, {
                    t  : [wrap, st, b.width, 0, NULL, NULL, LEFT, BOTTOM, NULL, bh, NULL],
                    l  : [wrap, st, 0, b.height, NULL, NULL, RIGHT, TOP, bw, NULL, NULL],
                    r  : [wrap, st, b.width, b.height, SETX, b.right, LEFT, TOP, NULL, NULL, pt],
                    b  : [wrap, st, b.width, b.height, SETY, b.bottom, LEFT, TOP, NULL, bh, pt],
                    tl : [wrap, st, 0, 0, NULL, NULL, RIGHT, BOTTOM, bw, bh, pt],
                    bl : [wrap, st, 0, 0, SETY, b.y + b.height, RIGHT, TOP, bw, bh, pt],
                    br : [wrap, st, 0, 0, SETXY, [b.right, b.bottom], LEFT, TOP, bw, bh, pt],
                    tr : [wrap, st, 0, 0, SETX, b.x + b.width, LEFT, BOTTOM, bw, bh, pt]
                });

            st.visibility = VISIBLE;
            fly(wrap).show();

            arguments.callee.anim = fly(wrap).fxanim(args,
                o,
                MOTION,
                .5,
                EASEOUT,
                after);
        });
        return me;
    },

    /**
     * Slides the element out of view.  An anchor point can be optionally passed to set the end point
     * for the slide effect.  When the effect is completed, the element will be hidden (visibility =
     * 'hidden') but block elements will still take up space in the document.  The element must be removed
     * from the DOM using the 'remove' config option if desired.  This function automatically handles
     * wrapping the element with a fixed-size container if needed.  See the Fx class overview for valid anchor point options.
     * Usage:
     *

// default: slide the element out to the top
el.slideOut();

// custom: slide the element out to the right with a 2-second duration
el.slideOut('r', { duration: 2 });

// common config options shown with default values
el.slideOut('t', {
    easing: 'easeOut',
    duration: .5,
    remove: false,
    useDisplay: false
});

     * @param {String} anchor (optional) One of the valid Fx anchor positions (defaults to top: 't')
     * @param {Object} options (optional) Object literal with any of the Fx config options
     * @return {Ext.Element} The Element
     */
    slideOut : function(anchor, o){
        o = getObject(o);
        var me = this,
            dom = me.dom,
            st = dom.style,
            xy = me.getXY(),
            wrap,
            r,
            b,
            a,
            zero = {to: 0};

        anchor = anchor || "t";

        me.queueFx(o, function(){

            // restore values after effect
            r = fly(dom).getFxRestore();
            b = {x: xy[0], y: xy[1], 0: xy[0], 1: xy[1], width: dom.offsetWidth, height: dom.offsetHeight};
            b.right = b.x + b.width;
            b.bottom = b.y + b.height;

            // fixed size for slide
            fly(dom).setWidth(b.width).setHeight(b.height);

            // wrap if needed
            wrap = fly(dom).fxWrap(r.pos, o, VISIBLE);

            st.visibility = VISIBLE;
            st.position = ABSOLUTE;
            fly(wrap).setWidth(b.width).setHeight(b.height);

            function after(){
                o.useDisplay ? fly(dom).setDisplayed(FALSE) : fly(dom).hide();
                fly(dom).fxUnwrap(wrap, r.pos, o);
                st.width = r.width;
                st.height = r.height;
                fly(dom).afterFx(o);
            }

            function argCalc(style, s1, s2, p1, v1, p2, v2, p3, v3){
                var ret = {};

                style[s1] = style[s2] = "0";
                ret[p1] = v1;
                if(p2){
                    ret[p2] = v2;
                }
                if(p3){
                    ret[p3] = v3;
                }

                return ret;
            };

            a = fly(dom).switchStatements(anchor.toLowerCase(), argCalc, {
                t  : [st, LEFT, BOTTOM, HEIGHT, zero],
                l  : [st, RIGHT, TOP, WIDTH, zero],
                r  : [st, LEFT, TOP, WIDTH, zero, POINTS, {to : [b.right, b.y]}],
                b  : [st, LEFT, TOP, HEIGHT, zero, POINTS, {to : [b.x, b.bottom]}],
                tl : [st, RIGHT, BOTTOM, WIDTH, zero, HEIGHT, zero],
                bl : [st, RIGHT, TOP, WIDTH, zero, HEIGHT, zero, POINTS, {to : [b.x, b.bottom]}],
                br : [st, LEFT, TOP, WIDTH, zero, HEIGHT, zero, POINTS, {to : [b.x + b.width, b.bottom]}],
                tr : [st, LEFT, BOTTOM, WIDTH, zero, HEIGHT, zero, POINTS, {to : [b.right, b.y]}]
            });

            arguments.callee.anim = fly(wrap).fxanim(a,
                o,
                MOTION,
                .5,
                EASEOUT,
                after);
        });
        return me;
    },

    /**
     * Fades the element out while slowly expanding it in all directions.  When the effect is completed, the
     * element will be hidden (visibility = 'hidden') but block elements will still take up space in the document.
     * The element must be removed from the DOM using the 'remove' config option if desired.
     * Usage:
     *

// default
el.puff();

// common config options shown with default values
el.puff({
    easing: 'easeOut',
    duration: .5,
    remove: false,
    useDisplay: false
});

     * @param {Object} options (optional) Object literal with any of the Fx config options
     * @return {Ext.Element} The Element
     */
    puff : function(o){
        o = getObject(o);
        var me = this,
            dom = me.dom,
            st = dom.style,
            width,
            height,
            r;

        me.queueFx(o, function(){
            width = fly(dom).getWidth();
            height = fly(dom).getHeight();
            fly(dom).clearOpacity();
            fly(dom).show();

            // restore values after effect
            r = fly(dom).getFxRestore();

            function after(){
                o.useDisplay ? fly(dom).setDisplayed(FALSE) : fly(dom).hide();
                fly(dom).clearOpacity();
                fly(dom).setPositioning(r.pos);
                st.width = r.width;
                st.height = r.height;
                st.fontSize = '';
                fly(dom).afterFx(o);
            }

            arguments.callee.anim = fly(dom).fxanim({
                    width : {to : fly(dom).adjustWidth(width * 2)},
                    height : {to : fly(dom).adjustHeight(height * 2)},
                    points : {by : [-width * .5, -height * .5]},
                    opacity : {to : 0},
                    fontSize: {to : 200, unit: "%"}
                },
                o,
                MOTION,
                .5,
                EASEOUT,
                 after);
        });
        return me;
    },

    /**
     * Blinks the element as if it was clicked and then collapses on its center (similar to switching off a television).
     * When the effect is completed, the element will be hidden (visibility = 'hidden') but block elements will still
     * take up space in the document. The element must be removed from the DOM using the 'remove' config option if desired.
     * Usage:
     *

// default
el.switchOff();

// all config options shown with default values
el.switchOff({
    easing: 'easeIn',
    duration: .3,
    remove: false,
    useDisplay: false
});

     * @param {Object} options (optional) Object literal with any of the Fx config options
     * @return {Ext.Element} The Element
     */
    switchOff : function(o){
        o = getObject(o);
        var me = this,
            dom = me.dom,
            st = dom.style,
            r;

        me.queueFx(o, function(){
            fly(dom).clearOpacity();
            fly(dom).clip();

            // restore values after effect
            r = fly(dom).getFxRestore();

            function after(){
                o.useDisplay ? fly(dom).setDisplayed(FALSE) : fly(dom).hide();
                fly(dom).clearOpacity();
                fly(dom).setPositioning(r.pos);
                st.width = r.width;
                st.height = r.height;
                fly(dom).afterFx(o);
            };

            fly(dom).fxanim({opacity : {to : 0.3}},
                NULL,
                NULL,
                .1,
                NULL,
                function(){
                    fly(dom).clearOpacity();
                        (function(){
                            fly(dom).fxanim({
                                height : {to : 1},
                                points : {by : [0, fly(dom).getHeight() * .5]}
                            },
                            o,
                            MOTION,
                            0.3,
                            'easeIn',
                            after);
                        }).defer(100);
                });
        });
        return me;
    },

    /**
     * Highlights the Element by setting a color (applies to the background-color by default, but can be
     * changed using the "attr" config option) and then fading back to the original color. If no original
     * color is available, you should provide the "endColor" config option which will be cleared after the animation.
     * Usage:

// default: highlight background to yellow
el.highlight();

// custom: highlight foreground text to blue for 2 seconds
el.highlight("0000ff", { attr: 'color', duration: 2 });

// common config options shown with default values
el.highlight("ffff9c", {
    attr: "background-color", //can be any valid CSS property (attribute) that supports a color value
    endColor: (current color) or "ffffff",
    easing: 'easeIn',
    duration: 1
});

     * @param {String} color (optional) The highlight color. Should be a 6 char hex color without the leading # (defaults to yellow: 'ffff9c')
     * @param {Object} options (optional) Object literal with any of the Fx config options
     * @return {Ext.Element} The Element
     */
    highlight : function(color, o){
        o = getObject(o);
        var me = this,
            dom = me.dom,
            attr = o.attr || "backgroundColor",
            a = {},
            restore;

        me.queueFx(o, function(){
            fly(dom).clearOpacity();
            fly(dom).show();

            function after(){
                dom.style[attr] = restore;
                fly(dom).afterFx(o);
            }
            restore = dom.style[attr];
            a[attr] = {from: color || "ffff9c", to: o.endColor || fly(dom).getColor(attr) || "ffffff"};
            arguments.callee.anim = fly(dom).fxanim(a,
                o,
                'color',
                1,
                'easeIn',
                after);
        });
        return me;
    },

   /**
    * Shows a ripple of exploding, attenuating borders to draw attention to an Element.
    * Usage:

// default: a single light blue ripple
el.frame();

// custom: 3 red ripples lasting 3 seconds total
el.frame("ff0000", 3, { duration: 3 });

// common config options shown with default values
el.frame("C3DAF9", 1, {
    duration: 1 //duration of each individual ripple.
    // Note: Easing is not configurable and will be ignored if included
});

    * @param {String} color (optional) The color of the border.  Should be a 6 char hex color without the leading # (defaults to light blue: 'C3DAF9').
    * @param {Number} count (optional) The number of ripples to display (defaults to 1)
    * @param {Object} options (optional) Object literal with any of the Fx config options
    * @return {Ext.Element} The Element
    */
    frame : function(color, count, o){
        o = getObject(o);
        var me = this,
            dom = me.dom,
            proxy,
            active;

        me.queueFx(o, function(){
            color = color || '#C3DAF9';
            if(color.length == 6){
                color = '#' + color;
            }
            count = count || 1;
            fly(dom).show();

            var xy = fly(dom).getXY(),
                b = {x: xy[0], y: xy[1], 0: xy[0], 1: xy[1], width: dom.offsetWidth, height: dom.offsetHeight},
                queue = function(){
                    proxy = fly(document.body || document.documentElement).createChild({
                        style:{
                            position : ABSOLUTE,
                            'z-index': 35000, // yee haw
                            border : '0px solid ' + color
                        }
                    });
                    return proxy.queueFx({}, animFn);
                };

            arguments.callee.anim = {
                isAnimated: true,
                stop: function() {
                    count = 0;
                    proxy.stopFx();
                }
            };

            function animFn(){
                var scale = Ext.isBorderBox ? 2 : 1;
                active = proxy.anim({
                    top : {from : b.y, to : b.y - 20},
                    left : {from : b.x, to : b.x - 20},
                    borderWidth : {from : 0, to : 10},
                    opacity : {from : 1, to : 0},
                    height : {from : b.height, to : b.height + 20 * scale},
                    width : {from : b.width, to : b.width + 20 * scale}
                },{
                    duration: o.duration || 1,
                    callback: function() {
                        proxy.remove();
                        --count > 0 ? queue() : fly(dom).afterFx(o);
                    }
                });
                arguments.callee.anim = {
                    isAnimated: true,
                    stop: function(){
                        active.stop();
                    }
                };
            };
            queue();
        });
        return me;
    },

   /**
    * Creates a pause before any subsequent queued effects begin.  If there are
    * no effects queued after the pause it will have no effect.
    * Usage:

el.pause(1);

    * @param {Number} seconds The length of time to pause (in seconds)
    * @return {Ext.Element} The Element
    */
    pause : function(seconds){
        var dom = this.dom,
            t;

        this.queueFx({}, function(){
            t = setTimeout(function(){
                fly(dom).afterFx({});
            }, seconds * 1000);
            arguments.callee.anim = {
                isAnimated: true,
                stop: function(){
                    clearTimeout(t);
                    fly(dom).afterFx({});
                }
            };
        });
        return this;
    },

   /**
    * Fade an element in (from transparent to opaque).  The ending opacity can be specified
    * using the {@link #endOpacity} config option.
    * Usage:

// default: fade in from opacity 0 to 100%
el.fadeIn();

// custom: fade in from opacity 0 to 75% over 2 seconds
el.fadeIn({ endOpacity: .75, duration: 2});

// common config options shown with default values
el.fadeIn({
    endOpacity: 1, //can be any value between 0 and 1 (e.g. .5)
    easing: 'easeOut',
    duration: .5
});

    * @param {Object} options (optional) Object literal with any of the Fx config options
    * @return {Ext.Element} The Element
    */
    fadeIn : function(o){
        o = getObject(o);
        var me = this,
            dom = me.dom,
            to = o.endOpacity || 1;

        me.queueFx(o, function(){
            fly(dom).setOpacity(0);
            fly(dom).fixDisplay();
            dom.style.visibility = VISIBLE;
            arguments.callee.anim = fly(dom).fxanim({opacity:{to:to}},
                o, NULL, .5, EASEOUT, function(){
                if(to == 1){
                    fly(dom).clearOpacity();
                }
                fly(dom).afterFx(o);
            });
        });
        return me;
    },

   /**
    * Fade an element out (from opaque to transparent).  The ending opacity can be specified
    * using the {@link #endOpacity} config option.  Note that IE may require
    * {@link #useDisplay}:true in order to redisplay correctly.
    * Usage:

// default: fade out from the element's current opacity to 0
el.fadeOut();

// custom: fade out from the element's current opacity to 25% over 2 seconds
el.fadeOut({ endOpacity: .25, duration: 2});

// common config options shown with default values
el.fadeOut({
    endOpacity: 0, //can be any value between 0 and 1 (e.g. .5)
    easing: 'easeOut',
    duration: .5,
    remove: false,
    useDisplay: false
});

    * @param {Object} options (optional) Object literal with any of the Fx config options
    * @return {Ext.Element} The Element
    */
    fadeOut : function(o){
        o = getObject(o);
        var me = this,
            dom = me.dom,
            style = dom.style,
            to = o.endOpacity || 0;

        me.queueFx(o, function(){
            arguments.callee.anim = fly(dom).fxanim({
                opacity : {to : to}},
                o,
                NULL,
                .5,
                EASEOUT,
                function(){
                    if(to == 0){
                        Ext.Element.data(dom, 'visibilityMode') == Ext.Element.DISPLAY || o.useDisplay ?
                            style.display = "none" :
                            style.visibility = HIDDEN;

                        fly(dom).clearOpacity();
                    }
                    fly(dom).afterFx(o);
            });
        });
        return me;
    },

   /**
    * Animates the transition of an element's dimensions from a starting height/width
    * to an ending height/width.  This method is a convenience implementation of {@link shift}.
    * Usage:

// change height and width to 100x100 pixels
el.scale(100, 100);

// common config options shown with default values.  The height and width will default to
// the element's existing values if passed as null.
el.scale(
    [element's width],
    [element's height], {
        easing: 'easeOut',
        duration: .35
    }
);

    * @param {Number} width  The new width (pass undefined to keep the original width)
    * @param {Number} height  The new height (pass undefined to keep the original height)
    * @param {Object} options (optional) Object literal with any of the Fx config options
    * @return {Ext.Element} The Element
    */
    scale : function(w, h, o){
        this.shift(Ext.apply({}, o, {
            width: w,
            height: h
        }));
        return this;
    },

   /**
    * Animates the transition of any combination of an element's dimensions, xy position and/or opacity.
    * Any of these properties not specified in the config object will not be changed.  This effect
    * requires that at least one new dimension, position or opacity setting must be passed in on
    * the config object in order for the function to have any effect.
    * Usage:

// slide the element horizontally to x position 200 while changing the height and opacity
el.shift({ x: 200, height: 50, opacity: .8 });

// common config options shown with default values.
el.shift({
    width: [element's width],
    height: [element's height],
    x: [element's x position],
    y: [element's y position],
    opacity: [element's opacity],
    easing: 'easeOut',
    duration: .35
});

    * @param {Object} options  Object literal with any of the Fx config options
    * @return {Ext.Element} The Element
    */
    shift : function(o){
        o = getObject(o);
        var dom = this.dom,
            a = {};

        this.queueFx(o, function(){
            for (var prop in o) {
                if (o[prop] != UNDEFINED) {
                    a[prop] = {to : o[prop]};
                }
            }

            a.width ? a.width.to = fly(dom).adjustWidth(o.width) : a;
            a.height ? a.height.to = fly(dom).adjustWidth(o.height) : a;

            if (a.x || a.y || a.xy) {
                a.points = a.xy ||
                           {to : [ a.x ? a.x.to : fly(dom).getX(),
                                   a.y ? a.y.to : fly(dom).getY()]};
            }

            arguments.callee.anim = fly(dom).fxanim(a,
                o,
                MOTION,
                .35,
                EASEOUT,
                function(){
                    fly(dom).afterFx(o);
                });
        });
        return this;
    },

    /**
     * Slides the element while fading it out of view.  An anchor point can be optionally passed to set the
     * ending point of the effect.
     * Usage:
     *

// default: slide the element downward while fading out
el.ghost();

// custom: slide the element out to the right with a 2-second duration
el.ghost('r', { duration: 2 });

// common config options shown with default values
el.ghost('b', {
    easing: 'easeOut',
    duration: .5,
    remove: false,
    useDisplay: false
});

     * @param {String} anchor (optional) One of the valid Fx anchor positions (defaults to bottom: 'b')
     * @param {Object} options (optional) Object literal with any of the Fx config options
     * @return {Ext.Element} The Element
     */
    ghost : function(anchor, o){
        o = getObject(o);
        var me = this,
            dom = me.dom,
            st = dom.style,
            a = {opacity: {to: 0}, points: {}},
            pt = a.points,
            r,
            w,
            h;

        anchor = anchor || "b";

        me.queueFx(o, function(){
            // restore values after effect
            r = fly(dom).getFxRestore();
            w = fly(dom).getWidth();
            h = fly(dom).getHeight();

            function after(){
                o.useDisplay ? fly(dom).setDisplayed(FALSE) : fly(dom).hide();
                fly(dom).clearOpacity();
                fly(dom).setPositioning(r.pos);
                st.width = r.width;
                st.height = r.height;
                fly(dom).afterFx(o);
            }

            pt.by = fly(dom).switchStatements(anchor.toLowerCase(), function(v1,v2){ return [v1, v2];}, {
               t  : [0, -h],
               l  : [-w, 0],
               r  : [w, 0],
               b  : [0, h],
               tl : [-w, -h],
               bl : [-w, h],
               br : [w, h],
               tr : [w, -h]
            });

            arguments.callee.anim = fly(dom).fxanim(a,
                o,
                MOTION,
                .5,
                EASEOUT, after);
        });
        return me;
    },

    /**
     * Ensures that all effects queued after syncFx is called on the element are
     * run concurrently.  This is the opposite of {@link #sequenceFx}.
     * @return {Ext.Element} The Element
     */
    syncFx : function(){
        var me = this;
        me.fxDefaults = Ext.apply(me.fxDefaults || {}, {
            block : FALSE,
            concurrent : TRUE,
            stopFx : FALSE
        });
        return me;
    },

    /**
     * Ensures that all effects queued after sequenceFx is called on the element are
     * run in sequence.  This is the opposite of {@link #syncFx}.
     * @return {Ext.Element} The Element
     */
    sequenceFx : function(){
        var me = this;
        me.fxDefaults = Ext.apply(me.fxDefaults || {}, {
            block : FALSE,
            concurrent : FALSE,
            stopFx : FALSE
        });
        return me;
    },

    /* @private */
    nextFx : function(){
        var ef = getQueue(this.dom.id)[0];
        if(ef){
            ef.call(this);
        }
    },

    /**
     * Returns true if the element has any effects actively running or queued, else returns false.
     * @return {Boolean} True if element has active effects, else false
     */
    hasActiveFx : function(){
        return getQueue(this.dom.id)[0];
    },

    /**
     * Stops any running effects and clears the element's internal effects queue if it contains
     * any additional effects that haven't started yet.
     * @return {Ext.Element} The Element
     */
    stopFx : function(finish){
        var me = this,
            id = me.dom.id;
        if(me.hasActiveFx()){
            var cur = getQueue(id)[0];
            if(cur && cur.anim){
                if(cur.anim.isAnimated){
                    setQueue(id, [cur]); //clear
                    cur.anim.stop(finish !== undefined ? finish : TRUE);
                }else{
                    setQueue(id, []);
                }
            }
        }
        return me;
    },

    /* @private */
    beforeFx : function(o){
        if(this.hasActiveFx() && !o.concurrent){
           if(o.stopFx){
               this.stopFx();
               return TRUE;
           }
           return FALSE;
        }
        return TRUE;
    },

    /**
     * Returns true if the element is currently blocking so that no other effect can be queued
     * until this effect is finished, else returns false if blocking is not set.  This is commonly
     * used to ensure that an effect initiated by a user action runs to completion prior to the
     * same effect being restarted (e.g., firing only one effect even if the user clicks several times).
     * @return {Boolean} True if blocking, else false
     */
    hasFxBlock : function(){
        var q = getQueue(this.dom.id);
        return q && q[0] && q[0].block;
    },

    /* @private */
    queueFx : function(o, fn){
        var me = fly(this.dom);
        if(!me.hasFxBlock()){
            Ext.applyIf(o, me.fxDefaults);
            if(!o.concurrent){
                var run = me.beforeFx(o);
                fn.block = o.block;
                getQueue(me.dom.id).push(fn);
                if(run){
                    me.nextFx();
                }
            }else{
                fn.call(me);
            }
        }
        return me;
    },

    /* @private */
    fxWrap : function(pos, o, vis){
        var dom = this.dom,
            wrap,
            wrapXY;
        if(!o.wrap || !(wrap = Ext.getDom(o.wrap))){
            if(o.fixPosition){
                wrapXY = fly(dom).getXY();
            }
            var div = document.createElement("div");
            div.style.visibility = vis;
            wrap = dom.parentNode.insertBefore(div, dom);
            fly(wrap).setPositioning(pos);
            if(fly(wrap).isStyle(POSITION, "static")){
                fly(wrap).position("relative");
            }
            fly(dom).clearPositioning('auto');
            fly(wrap).clip();
            wrap.appendChild(dom);
            if(wrapXY){
                fly(wrap).setXY(wrapXY);
            }
        }
        return wrap;
    },

    /* @private */
    fxUnwrap : function(wrap, pos, o){
        var dom = this.dom;
        fly(dom).clearPositioning();
        fly(dom).setPositioning(pos);
        if(!o.wrap){
            var pn = fly(wrap).dom.parentNode;
            pn.insertBefore(dom, wrap);
            fly(wrap).remove();
        }
    },

    /* @private */
    getFxRestore : function(){
        var st = this.dom.style;
        return {pos: this.getPositioning(), width: st.width, height : st.height};
    },

    /* @private */
    afterFx : function(o){
        var dom = this.dom,
            id = dom.id;
        if(o.afterStyle){
            fly(dom).setStyle(o.afterStyle);
        }
        if(o.afterCls){
            fly(dom).addClass(o.afterCls);
        }
        if(o.remove == TRUE){
            fly(dom).remove();
        }
        if(o.callback){
            o.callback.call(o.scope, fly(dom));
        }
        if(!o.concurrent){
            getQueue(id).shift();
            fly(dom).nextFx();
        }
    },

    /* @private */
    fxanim : function(args, opt, animType, defaultDur, defaultEase, cb){
        animType = animType || 'run';
        opt = opt || {};
        var anim = Ext.lib.Anim[animType](
                this.dom,
                args,
                (opt.duration || defaultDur) || .35,
                (opt.easing || defaultEase) || EASEOUT,
                cb,
                this
            );
        opt.anim = anim;
        return anim;
    }
};

// backwards compat
Ext.Fx.resize = Ext.Fx.scale;

//When included, Ext.Fx is automatically applied to Element so that all basic
//effects are available directly via the Element API
Ext.Element.addMethods(Ext.Fx);
})();


The source code

/*!
 * licensing@extjs.com
 * http://www.extjs.com/license
 */

/**
 * @class Ext.grid.GridDragZone
 * @extends Ext.dd.DragZone
 *
A customized implementation of a {@link Ext.dd.DragZone DragZone} which provides default implementations of two of the
 * template methods of DragZone to enable dragging of the selected rows of a GridPanel.

 *
A cooperating {@link Ext.dd.DropZone DropZone} must be created who's template method implementations of
 * {@link Ext.dd.DropZone#onNodeEnter onNodeEnter}, {@link Ext.dd.DropZone#onNodeOver onNodeOver},
 * {@link Ext.dd.DropZone#onNodeOut onNodeOut} and {@link Ext.dd.DropZone#onNodeDrop onNodeDrop}
 are able
 * to process the {@link #getDragData data} which is provided.
 */
Ext.grid.GridDragZone = function(grid, config){
    this.view = grid.getView();
    Ext.grid.GridDragZone.superclass.constructor.call(this, this.view.mainBody.dom, config);
    this.scroll = false;
    this.grid = grid;
    this.ddel = document.createElement('div');
    this.ddel.className = 'x-grid-dd-wrap';
};

Ext.extend(Ext.grid.GridDragZone, Ext.dd.DragZone, {
    ddGroup : "GridDD",

/**
     *
The provided implementation of the getDragData method which collects the data to be dragged from the GridPanel on mousedown.

     *
This data is available for processing in the {@link Ext.dd.DropZone#onNodeEnter onNodeEnter}, {@link Ext.dd.DropZone#onNodeOver onNodeOver},
     * {@link Ext.dd.DropZone#onNodeOut onNodeOut} and {@link Ext.dd.DropZone#onNodeDrop onNodeDrop} methods of a cooperating {@link Ext.dd.DropZone DropZone}.

     *
The data object contains the following properties:

     *
  • grid : Ext.Grid.GridPanel
    The GridPanel from which the data is being dragged.
    •
     *
  • ddel : htmlElement
    An htmlElement which provides the "picture" of the data being dragged.
    •
     *
  • rowIndex : Number
    The index of the row which receieved the mousedown gesture which triggered the drag.
    •
     *
  • selections : Array
    An Array of the selected Records which are being dragged from the GridPanel.
    •
     *

     */
    getDragData : function(e){
        var t = Ext.lib.Event.getTarget(e);
        var rowIndex = this.view.findRowIndex(t);
        if(rowIndex !== false){
            var sm = this.grid.selModel;
            if(!sm.isSelected(rowIndex) || e.hasModifier()){
                sm.handleMouseDown(this.grid, rowIndex, e);
            }
            return {grid: this.grid, ddel: this.ddel, rowIndex: rowIndex, selections:sm.getSelections()};
        }
        return false;
    },

/**
     *
The provided implementation of the onInitDrag method. Sets the innerHTML of the drag proxy which provides the "picture"
     * of the data being dragged.

     *
The innerHTML data is found by calling the owning GridPanel's {@link Ext.grid.GridPanel#getDragDropText getDragDropText}.

     */
    onInitDrag : function(e){
        var data = this.dragData;
        this.ddel.innerHTML = this.grid.getDragDropText();
        this.proxy.update(this.ddel);
        // fire start drag?
    },

/**
     * An empty immplementation. Implement this to provide behaviour after a repair of an invalid drop. An implementation might highlight
     * the selected rows to show that they have not been dragged.
     */
    afterRepair : function(){
        this.dragging = false;
    },

/**
     *
An empty implementation. Implement this to provide coordinates for the drag proxy to slide back to after an invalid drop.

     *
Called before a repair of an invalid drop to get the XY to animate to.

     * @param {EventObject} e The mouse up event
     * @return {Array} The xy location (e.g. [100, 200])
     */
    getRepairXY : function(e, data){
        return false;
    },

    onEndDrag : function(data, e){
        // fire end drag?
    },

    onValidDrop : function(dd, e, id){
        // fire drag drop?
        this.hideProxy();
    },

    beforeInvalidDrop : function(e, id){

    }
});


The source code

/*!
 * licensing@extjs.com
 * http://www.extjs.com/license
 */
// private
// This is a support class used internally by the Grid components
Ext.grid.GridEditor = function(field, config){
    Ext.grid.GridEditor.superclass.constructor.call(this, field, config);
    field.monitorTab = false;
};

Ext.extend(Ext.grid.GridEditor, Ext.Editor, {
    alignment: "tl-tl",
    autoSize: "width",
    hideEl : false,
    cls: "x-small-editor x-grid-editor",
    shim:false,
    shadow:false
});


The source code

/*!
 * licensing@extjs.com
 * http://www.extjs.com/license
 */

/**
 * @class Ext.grid.GridPanel
 * @extends Ext.Panel
 *
This class represents the primary interface of a component based grid control to represent data
 * in a tabular format of rows and columns. The GridPanel is composed of the following:

 *

 *
  • {@link Ext.data.Store Store} : The Model holding the data records (rows)
 *
    •
 *
  • {@link Ext.grid.ColumnModel Column model} : Column makeup
 *
    •
 *
  • {@link Ext.grid.GridView View} : Encapsulates the user interface
 *
    •
 *
  • {@link Ext.grid.AbstractSelectionModel selection model} : Selection behavior
 *
    •
 *

 *
Example usage:

 *

var grid = new Ext.grid.GridPanel({
    {@link #store}: new {@link Ext.data.Store}({
        {@link Ext.data.Store#autoDestroy autoDestroy}: true,
        {@link Ext.data.Store#reader reader}: reader,
        {@link Ext.data.Store#data data}: xg.dummyData
    }),
    {@link #colModel}: new {@link Ext.grid.ColumnModel}({
        {@link Ext.grid.ColumnModel#defaults defaults}: {
            width: 120,
            sortable: true
        },
        {@link Ext.grid.ColumnModel#columns columns}: [
            {id: 'company', header: 'Company', width: 200, sortable: true, dataIndex: 'company'},
            {header: 'Price', renderer: Ext.util.Format.usMoney, dataIndex: 'price'},
            {header: 'Change', dataIndex: 'change'},
            {header: '% Change', dataIndex: 'pctChange'},
            // instead of specifying renderer: Ext.util.Format.dateRenderer('m/d/Y') use xtype
            {
                header: 'Last Updated', width: 135, dataIndex: 'lastChange',
                xtype: 'datecolumn', format: 'M d, Y'
            }
        ],
    }),
    {@link #viewConfig}: {
        {@link Ext.grid.GridView#forceFit forceFit}: true,

//      Return CSS class to apply to rows depending upon data values
        {@link Ext.grid.GridView#getRowClass getRowClass}: function(record, index) {
            var c = record.{@link Ext.data.Record#get get}('change');
            if (c < 0) {
                return 'price-fall';
            } else if (c > 0) {
                return 'price-rise';
            }
        }
    },
    {@link #sm}: new Ext.grid.RowSelectionModel({singleSelect:true}),
    width: 600,
    height: 300,
    frame: true,
    title: 'Framed with Row Selection and Horizontal Scrolling',
    iconCls: 'icon-grid'
});
 *

 *
Notes:

 *

 *
  • Although this class inherits many configuration options from base classes, some of them
 * (such as autoScroll, autoWidth, layout, items, etc) are not used by this class, and will
 * have no effect.
    •
 *
  • A grid requires a width in which to scroll its columns, and a height in which to
 * scroll its rows. These dimensions can either be set explicitly through the
 * {@link Ext.BoxComponent#height height} and {@link Ext.BoxComponent#width width}
 * configuration options or implicitly set by using the grid as a child item of a
 * {@link Ext.Container Container} which will have a {@link Ext.Container#layout layout manager}
 * provide the sizing of its child items (for example the Container of the Grid may specify
 * {@link Ext.Container#layout layout}:'fit').
    •
 *
  • To access the data in a Grid, it is necessary to use the data model encapsulated
 * by the {@link #store Store}. See the {@link #cellclick} event for more details.
    •
 *

 * @constructor
 * @param {Object} config The config object
 * @xtype grid
 */
Ext.grid.GridPanel = Ext.extend(Ext.Panel, {

/**
     * @cfg {String} autoExpandColumn
     *
The {@link Ext.grid.Column#id id} of a {@link Ext.grid.Column column} in
     * this grid that should expand to fill unused space. This value specified here can not
     * be 0.

     *
Note: If the Grid's {@link Ext.grid.GridView view} is configured with
     * {@link Ext.grid.GridView#forceFit forceFit}=true the autoExpandColumn
     * is ignored. See {@link Ext.grid.Column}.{@link Ext.grid.Column#width width}
     * for additional details.

     *
See {@link #autoExpandMax} and {@link #autoExpandMin} also.

     */
    autoExpandColumn : false,

/**
     * @cfg {Number} autoExpandMax The maximum width the {@link #autoExpandColumn}
     * can have (if enabled). Defaults to 1000.
     */
    autoExpandMax : 1000,

/**
     * @cfg {Number} autoExpandMin The minimum width the {@link #autoExpandColumn}
     * can have (if enabled). Defaults to 50.
     */
    autoExpandMin : 50,

/**
     * @cfg {Boolean} columnLines true to add css for column separation lines.
     * Default is false.
     */
    columnLines : false,

/**
     * @cfg {Object} cm Shorthand for {@link #colModel}.
     */

/**
     * @cfg {Object} colModel The {@link Ext.grid.ColumnModel} to use when rendering the grid (required).
     */

/**
     * @cfg {Array} columns An array of {@link Ext.grid.Column columns} to auto create a
     * {@link Ext.grid.ColumnModel}.  The ColumnModel may be explicitly created via the
     * {@link #colModel} configuration property.
     */

/**
     * @cfg {String} ddGroup The DD group this GridPanel belongs to. Defaults to 'GridDD' if not specified.
     */

/**
     * @cfg {String} ddText
     * Configures the text in the drag proxy.  Defaults to:
     *

     * ddText : '{0} selected row{1}'
     *

     * {0} is replaced with the number of selected rows.
     */
    ddText : '{0} selected row{1}',

/**
     * @cfg {Boolean} deferRowRender
Defaults to true to enable deferred row rendering.

     *
This allows the GridPanel to be initially rendered empty, with the expensive update of the row
     * structure deferred so that layouts with GridPanels appear more quickly.

     */
    deferRowRender : true,

/**
     * @cfg {Boolean} disableSelection
true to disable selections in the grid. Defaults to false.

     *
Ignored if a {@link #selModel SelectionModel} is specified.

     */

/**
     * @cfg {Boolean} enableColumnResize false to turn off column resizing for the whole grid. Defaults to true.
     */

/**
     * @cfg {Boolean} enableColumnHide
     * Defaults to true to enable {@link Ext.grid.Column#hidden hiding of columns}
     * with the {@link #enableHdMenu header menu}.
     */
    enableColumnHide : true,

/**
     * @cfg {Boolean} enableColumnMove Defaults to true to enable drag and drop reorder of columns. false
     * to turn off column reordering via drag drop.
     */
    enableColumnMove : true,

/**
     * @cfg {Boolean} enableDragDrop
Enables dragging of the selected rows of the GridPanel. Defaults to false.

     *
Setting this to true causes this GridPanel's {@link #getView GridView} to
     * create an instance of {@link Ext.grid.GridDragZone}. Note: this is available only after
     * the Grid has been rendered as the GridView's {@link Ext.grid.GridView#dragZone dragZone}
     * property.

     *
A cooperating {@link Ext.dd.DropZone DropZone} must be created who's implementations of
     * {@link Ext.dd.DropZone#onNodeEnter onNodeEnter}, {@link Ext.dd.DropZone#onNodeOver onNodeOver},
     * {@link Ext.dd.DropZone#onNodeOut onNodeOut} and {@link Ext.dd.DropZone#onNodeDrop onNodeDrop} are able
     * to process the {@link Ext.grid.GridDragZone#getDragData data} which is provided.

     */
    enableDragDrop : false,

/**
     * @cfg {Boolean} enableHdMenu Defaults to true to enable the drop down button for menu in the headers.
     */
    enableHdMenu : true,

/**
     * @cfg {Boolean} hideHeaders True to hide the grid's header. Defaults to false.
     */

/**
     * @cfg {Object} loadMask An {@link Ext.LoadMask} config or true to mask the grid while
     * loading. Defaults to false.
     */
    loadMask : false,

/**
     * @cfg {Number} maxHeight Sets the maximum height of the grid - ignored if autoHeight is not on.
     */

/**
     * @cfg {Number} minColumnWidth The minimum width a column can be resized to. Defaults to 25.
     */
    minColumnWidth : 25,

/**
     * @cfg {Object} sm Shorthand for {@link #selModel}.
     */

/**
     * @cfg {Object} selModel Any subclass of {@link Ext.grid.AbstractSelectionModel} that will provide
     * the selection model for the grid (defaults to {@link Ext.grid.RowSelectionModel} if not specified).
     */

/**
     * @cfg {Ext.data.Store} store The {@link Ext.data.Store} the grid should use as its data source (required).
     */

/**
     * @cfg {Boolean} stripeRows true to stripe the rows. Default is false.
     *
This causes the CSS class x-grid3-row-alt to be added to alternate rows of
     * the grid. A default CSS rule is provided which sets a background colour, but you can override this
     * with a rule which either overrides the background-color style using the '!important'
     * modifier, or which uses a CSS selector of higher specificity.

     */
    stripeRows : false,

/**
     * @cfg {Boolean} trackMouseOver True to highlight rows when the mouse is over. Default is true
     * for GridPanel, but false for EditorGridPanel.
     */
    trackMouseOver : true,

/**
     * @cfg {Array} stateEvents
     * An array of events that, when fired, should trigger this component to save its state.
     * Defaults to:

     * stateEvents: ['columnmove', 'columnresize', 'sortchange', 'groupchange']
     *

     *
These can be any types of events supported by this component, including browser or
     * custom events (e.g., ['click', 'customerchange']).

     *
See {@link Ext.Component#stateful} for an explanation of saving and restoring
     * Component state.

     */
    stateEvents : ['columnmove', 'columnresize', 'sortchange', 'groupchange'],

/**
     * @cfg {Object} view The {@link Ext.grid.GridView} used by the grid. This can be set
     * before a call to {@link Ext.Component#render render()}.
     */
    view : null,

/**
     * @cfg {Array} bubbleEvents
     *
An array of events that, when fired, should be bubbled to any parent container.
     * See {@link Ext.util.Observable#enableBubble}.
     * Defaults to [].
     */
    bubbleEvents: [],

/**
     * @cfg {Object} viewConfig A config object that will be applied to the grid's UI view.  Any of
     * the config options available for {@link Ext.grid.GridView} can be specified here. This option
     * is ignored if {@link #view} is specified.
     */

    // private
    rendered : false,
    // private
    viewReady : false,

    // private
    initComponent : function(){
        Ext.grid.GridPanel.superclass.initComponent.call(this);

        if(this.columnLines){
            this.cls = (this.cls || '') + ' x-grid-with-col-lines';
        }
        // override any provided value since it isn't valid
        // and is causing too many bug reports ;)
        this.autoScroll = false;
        this.autoWidth = false;

        if(Ext.isArray(this.columns)){
            this.colModel = new Ext.grid.ColumnModel(this.columns);
            delete this.columns;
        }

        // check and correct shorthanded configs
        if(this.ds){
            this.store = this.ds;
            delete this.ds;
        }
        if(this.cm){
            this.colModel = this.cm;
            delete this.cm;
        }
        if(this.sm){
            this.selModel = this.sm;
            delete this.sm;
        }
        this.store = Ext.StoreMgr.lookup(this.store);

        this.addEvents(
            // raw events

/**
             * @event click
             * The raw click event for the entire grid.
             * @param {Ext.EventObject} e
             */
            'click',

/**
             * @event dblclick
             * The raw dblclick event for the entire grid.
             * @param {Ext.EventObject} e
             */
            'dblclick',

/**
             * @event contextmenu
             * The raw contextmenu event for the entire grid.
             * @param {Ext.EventObject} e
             */
            'contextmenu',

/**
             * @event mousedown
             * The raw mousedown event for the entire grid.
             * @param {Ext.EventObject} e
             */
            'mousedown',

/**
             * @event mouseup
             * The raw mouseup event for the entire grid.
             * @param {Ext.EventObject} e
             */
            'mouseup',

/**
             * @event mouseover
             * The raw mouseover event for the entire grid.
             * @param {Ext.EventObject} e
             */
            'mouseover',

/**
             * @event mouseout
             * The raw mouseout event for the entire grid.
             * @param {Ext.EventObject} e
             */
            'mouseout',

/**
             * @event keypress
             * The raw keypress event for the entire grid.
             * @param {Ext.EventObject} e
             */
            'keypress',

/**
             * @event keydown
             * The raw keydown event for the entire grid.
             * @param {Ext.EventObject} e
             */
            'keydown',

            // custom events

/**
             * @event cellmousedown
             * Fires before a cell is clicked
             * @param {Grid} this
             * @param {Number} rowIndex
             * @param {Number} columnIndex
             * @param {Ext.EventObject} e
             */
            'cellmousedown',

/**
             * @event rowmousedown
             * Fires before a row is clicked
             * @param {Grid} this
             * @param {Number} rowIndex
             * @param {Ext.EventObject} e
             */
            'rowmousedown',

/**
             * @event headermousedown
             * Fires before a header is clicked
             * @param {Grid} this
             * @param {Number} columnIndex
             * @param {Ext.EventObject} e
             */
            'headermousedown',

/**
             * @event groupmousedown
             * Fires before a group header is clicked. Only applies for grids with a {@link Ext.grid.GroupingView GroupingView}.
             * @param {Grid} this
             * @param {String} groupField
             * @param {String} groupValue
             * @param {Ext.EventObject} e
             */
            'groupmousedown',

/**
             * @event rowbodymousedown
             * Fires before the row body is clicked. Only applies for grids with {@link Ext.grid.GridView#enableRowBody enableRowBody} configured.
             * @param {Grid} this
             * @param {Number} rowIndex
             * @param {Ext.EventObject} e
             */
            'rowbodymousedown',

/**
             * @event containermousedown
             * Fires before the container is clicked. The container consists of any part of the grid body that is not covered by a row.
             * @param {Grid} this
             * @param {Ext.EventObject} e
             */
            'containermousedown',

/**
             * @event cellclick
             * Fires when a cell is clicked.
             * The data for the cell is drawn from the {@link Ext.data.Record Record}
             * for this row. To access the data in the listener function use the
             * following technique:
             *

function(grid, rowIndex, columnIndex, e) {
    var record = grid.getStore().getAt(rowIndex);  // Get the Record
    var fieldName = grid.getColumnModel().getDataIndex(columnIndex); // Get field name
    var data = record.get(fieldName);
}

             * @param {Grid} this
             * @param {Number} rowIndex
             * @param {Number} columnIndex
             * @param {Ext.EventObject} e
             */
            'cellclick',

/**
             * @event celldblclick
             * Fires when a cell is double clicked
             * @param {Grid} this
             * @param {Number} rowIndex
             * @param {Number} columnIndex
             * @param {Ext.EventObject} e
             */
            'celldblclick',

/**
             * @event rowclick
             * Fires when a row is clicked
             * @param {Grid} this
             * @param {Number} rowIndex
             * @param {Ext.EventObject} e
             */
            'rowclick',

/**
             * @event rowdblclick
             * Fires when a row is double clicked
             * @param {Grid} this
             * @param {Number} rowIndex
             * @param {Ext.EventObject} e
             */
            'rowdblclick',

/**
             * @event headerclick
             * Fires when a header is clicked
             * @param {Grid} this
             * @param {Number} columnIndex
             * @param {Ext.EventObject} e
             */
            'headerclick',

/**
             * @event headerdblclick
             * Fires when a header cell is double clicked
             * @param {Grid} this
             * @param {Number} columnIndex
             * @param {Ext.EventObject} e
             */
            'headerdblclick',

/**
             * @event groupclick
             * Fires when group header is clicked. Only applies for grids with a {@link Ext.grid.GroupingView GroupingView}.
             * @param {Grid} this
             * @param {String} groupField
             * @param {String} groupValue
             * @param {Ext.EventObject} e
             */
            'groupclick',

/**
             * @event groupdblclick
             * Fires when group header is double clicked. Only applies for grids with a {@link Ext.grid.GroupingView GroupingView}.
             * @param {Grid} this
             * @param {String} groupField
             * @param {String} groupValue
             * @param {Ext.EventObject} e
             */
            'groupdblclick',

/**
             * @event containerclick
             * Fires when the container is clicked. The container consists of any part of the grid body that is not covered by a row.
             * @param {Grid} this
             * @param {Ext.EventObject} e
             */
            'containerclick',

/**
             * @event containerdblclick
             * Fires when the container is double clicked. The container consists of any part of the grid body that is not covered by a row.
             * @param {Grid} this
             * @param {Ext.EventObject} e
             */
            'containerdblclick',

/**
             * @event rowbodyclick
             * Fires when the row body is clicked. Only applies for grids with {@link Ext.grid.GridView#enableRowBody enableRowBody} configured.
             * @param {Grid} this
             * @param {Number} rowIndex
             * @param {Ext.EventObject} e
             */
            'rowbodyclick',

/**
             * @event rowbodydblclick
             * Fires when the row body is double clicked. Only applies for grids with {@link Ext.grid.GridView#enableRowBody enableRowBody} configured.
             * @param {Grid} this
             * @param {Number} rowIndex
             * @param {Ext.EventObject} e
             */
            'rowbodydblclick',

/**
             * @event rowcontextmenu
             * Fires when a row is right clicked
             * @param {Grid} this
             * @param {Number} rowIndex
             * @param {Ext.EventObject} e
             */
            'rowcontextmenu',

/**
             * @event cellcontextmenu
             * Fires when a cell is right clicked
             * @param {Grid} this
             * @param {Number} rowIndex
             * @param {Number} cellIndex
             * @param {Ext.EventObject} e
             */
            'cellcontextmenu',

/**
             * @event headercontextmenu
             * Fires when a header is right clicked
             * @param {Grid} this
             * @param {Number} columnIndex
             * @param {Ext.EventObject} e
             */
            'headercontextmenu',

/**
             * @event groupcontextmenu
             * Fires when group header is right clicked. Only applies for grids with a {@link Ext.grid.GroupingView GroupingView}.
             * @param {Grid} this
             * @param {String} groupField
             * @param {String} groupValue
             * @param {Ext.EventObject} e
             */
            'groupcontextmenu',

/**
             * @event containercontextmenu
             * Fires when the container is right clicked. The container consists of any part of the grid body that is not covered by a row.
             * @param {Grid} this
             * @param {Ext.EventObject} e
             */
            'containercontextmenu',

/**
             * @event rowbodycontextmenu
             * Fires when the row body is right clicked. Only applies for grids with {@link Ext.grid.GridView#enableRowBody enableRowBody} configured.
             * @param {Grid} this
             * @param {Number} rowIndex
             * @param {Ext.EventObject} e
             */
            'rowbodycontextmenu',

/**
             * @event bodyscroll
             * Fires when the body element is scrolled
             * @param {Number} scrollLeft
             * @param {Number} scrollTop
             */
            'bodyscroll',

/**
             * @event columnresize
             * Fires when the user resizes a column
             * @param {Number} columnIndex
             * @param {Number} newSize
             */
            'columnresize',

/**
             * @event columnmove
             * Fires when the user moves a column
             * @param {Number} oldIndex
             * @param {Number} newIndex
             */
            'columnmove',

/**
             * @event sortchange
             * Fires when the grid's store sort changes
             * @param {Grid} this
             * @param {Object} sortInfo An object with the keys field and direction
             */
            'sortchange',

/**
             * @event groupchange
             * Fires when the grid's grouping changes (only applies for grids with a {@link Ext.grid.GroupingView GroupingView})
             * @param {Grid} this
             * @param {String} groupField A string with the grouping field, null if the store is not grouped.
             */
            'groupchange',

/**
             * @event reconfigure
             * Fires when the grid is reconfigured with a new store and/or column model.
             * @param {Grid} this
             * @param {Ext.data.Store} store The new store
             * @param {Ext.grid.ColumnModel} colModel The new column model
             */
            'reconfigure',

/**
             * @event viewready
             * Fires when the grid view is available (use this for selecting a default row).
             * @param {Grid} this
             */
            'viewready'
        );
    },

    // private
    onRender : function(ct, position){
        Ext.grid.GridPanel.superclass.onRender.apply(this, arguments);

        var c = this.getGridEl();

        this.el.addClass('x-grid-panel');

        this.mon(c, {
            scope: this,
            mousedown: this.onMouseDown,
            click: this.onClick,
            dblclick: this.onDblClick,
            contextmenu: this.onContextMenu
        });

        this.relayEvents(c, ['mousedown','mouseup','mouseover','mouseout','keypress', 'keydown']);

        var view = this.getView();
        view.init(this);
        view.render();
        this.getSelectionModel().init(this);
    },

    // private
    initEvents : function(){
        Ext.grid.GridPanel.superclass.initEvents.call(this);

        if(this.loadMask){
            this.loadMask = new Ext.LoadMask(this.bwrap,
                    Ext.apply({store:this.store}, this.loadMask));
        }
    },

    initStateEvents : function(){
        Ext.grid.GridPanel.superclass.initStateEvents.call(this);
        this.mon(this.colModel, 'hiddenchange', this.saveState, this, {delay: 100});
    },

    applyState : function(state){
        var cm = this.colModel,
            cs = state.columns,
            store = this.store,
            s,
            c,
            oldIndex;

        if(cs){
            for(var i = 0, len = cs.length; i < len; i++){
                s = cs[i];
                c = cm.getColumnById(s.id);
                if(c){
                    c.hidden = s.hidden;
                    c.width = s.width;
                    oldIndex = cm.getIndexById(s.id);
                    if(oldIndex != i){
                        cm.moveColumn(oldIndex, i);
                    }
                }
            }
        }
        if(store){
            s = state.sort;
            if(s){
                store[store.remoteSort ? 'setDefaultSort' : 'sort'](s.field, s.direction);
            }
            s = state.group;
            if(store.groupBy){
                if(s){
                    store.groupBy(s);
                }else{
                    store.clearGrouping();
                }
            }

        }
        var o = Ext.apply({}, state);
        delete o.columns;
        delete o.sort;
        Ext.grid.GridPanel.superclass.applyState.call(this, o);
    },

    getState : function(){
        var o = {columns: []},
            store = this.store,
            ss,
            gs;

        for(var i = 0, c; (c = this.colModel.config[i]); i++){
            o.columns[i] = {
                id: c.id,
                width: c.width
            };
            if(c.hidden){
                o.columns[i].hidden = true;
            }
        }
        if(store){
            ss = store.getSortState();
            if(ss){
                o.sort = ss;
            }
            if(store.getGroupState){
                gs = store.getGroupState();
                if(gs){
                    o.group = gs;
                }
            }
        }
        return o;
    },

    // private
    afterRender : function(){
        Ext.grid.GridPanel.superclass.afterRender.call(this);
        var v = this.view;
        this.on('bodyresize', v.layout, v);
        v.layout();
        if(this.deferRowRender){
            if (!this.deferRowRenderTask){
                this.deferRowRenderTask = new Ext.util.DelayedTask(v.afterRender, this.view);
            }
            this.deferRowRenderTask.delay(10);
        }else{
            v.afterRender();
        }
        this.viewReady = true;
    },

/**
     *
Reconfigures the grid to use a different Store and Column Model
     * and fires the 'reconfigure' event. The View will be bound to the new
     * objects and refreshed.

     *
Be aware that upon reconfiguring a GridPanel, certain existing settings may become
     * invalidated. For example the configured {@link #autoExpandColumn} may no longer exist in the
     * new ColumnModel. Also, an existing {@link Ext.PagingToolbar PagingToolbar} will still be bound
     * to the old Store, and will need rebinding. Any {@link #plugins} might also need reconfiguring
     * with the new data.

     * @param {Ext.data.Store} store The new {@link Ext.data.Store} object
     * @param {Ext.grid.ColumnModel} colModel The new {@link Ext.grid.ColumnModel} object
     */
    reconfigure : function(store, colModel){
        var rendered = this.rendered;
        if(rendered){
            if(this.loadMask){
                this.loadMask.destroy();
                this.loadMask = new Ext.LoadMask(this.bwrap,
                        Ext.apply({}, {store:store}, this.initialConfig.loadMask));
            }
        }
        if(this.view){
            this.view.initData(store, colModel);
        }
        this.store = store;
        this.colModel = colModel;
        if(rendered){
            this.view.refresh(true);
        }
        this.fireEvent('reconfigure', this, store, colModel);
    },

    // private
    onDestroy : function(){
        if (this.deferRowRenderTask && this.deferRowRenderTask.cancel){
            this.deferRowRenderTask.cancel();
        }
        if(this.rendered){
            Ext.destroy(this.view, this.loadMask);
        }else if(this.store && this.store.autoDestroy){
            this.store.destroy();
        }
        Ext.destroy(this.colModel, this.selModel);
        this.store = this.selModel = this.colModel = this.view = this.loadMask = null;
        Ext.grid.GridPanel.superclass.onDestroy.call(this);
    },

    // private
    processEvent : function(name, e){
        this.view.processEvent(name, e);
    },

    // private
    onClick : function(e){
        this.processEvent('click', e);
    },

    // private
    onMouseDown : function(e){
        this.processEvent('mousedown', e);
    },

    // private
    onContextMenu : function(e, t){
        this.processEvent('contextmenu', e);
    },

    // private
    onDblClick : function(e){
        this.processEvent('dblclick', e);
    },

    // private
    walkCells : function(row, col, step, fn, scope){
        var cm    = this.colModel,
            clen  = cm.getColumnCount(),
            ds    = this.store,
            rlen  = ds.getCount(),
            first = true;

        if(step < 0){
            if(col < 0){
                row--;
                first = false;
            }
            while(row >= 0){
                if(!first){
                    col = clen-1;
                }
                first = false;
                while(col >= 0){
                    if(fn.call(scope || this, row, col, cm) === true){
                        return [row, col];
                    }
                    col--;
                }
                row--;
            }
        } else {
            if(col >= clen){
                row++;
                first = false;
            }
            while(row < rlen){
                if(!first){
                    col = 0;
                }
                first = false;
                while(col < clen){
                    if(fn.call(scope || this, row, col, cm) === true){
                        return [row, col];
                    }
                    col++;
                }
                row++;
            }
        }
        return null;
    },

/**
     * Returns the grid's underlying element.
     * @return {Element} The element
     */
    getGridEl : function(){
        return this.body;
    },

    // private for compatibility, overridden by editor grid
    stopEditing : Ext.emptyFn,

/**
     * Returns the grid's selection model configured by the {@link #selModel}
     * configuration option. If no selection model was configured, this will create
     * and return a {@link Ext.grid.RowSelectionModel RowSelectionModel}.
     * @return {SelectionModel}
     */
    getSelectionModel : function(){
        if(!this.selModel){
            this.selModel = new Ext.grid.RowSelectionModel(
                    this.disableSelection ? {selectRow: Ext.emptyFn} : null);
        }
        return this.selModel;
    },

/**
     * Returns the grid's data store.
     * @return {Ext.data.Store} The store
     */
    getStore : function(){
        return this.store;
    },

/**
     * Returns the grid's ColumnModel.
     * @return {Ext.grid.ColumnModel} The column model
     */
    getColumnModel : function(){
        return this.colModel;
    },

/**
     * Returns the grid's GridView object.
     * @return {Ext.grid.GridView} The grid view
     */
    getView : function(){
        if(!this.view){
            this.view = new Ext.grid.GridView(this.viewConfig);
        }
        return this.view;
    },

/**
     * Called to get grid's drag proxy text, by default returns this.ddText.
     * @return {String} The text
     */
    getDragDropText : function(){
        var count = this.selModel.getCount();
        return String.format(this.ddText, count, count == 1 ? '' : 's');
    }

/**
     * @cfg {String/Number} activeItem
     * @hide
     */

/**
     * @cfg {Boolean} autoDestroy
     * @hide
     */

/**
     * @cfg {Object/String/Function} autoLoad
     * @hide
     */

/**
     * @cfg {Boolean} autoWidth
     * @hide
     */

/**
     * @cfg {Boolean/Number} bufferResize
     * @hide
     */

/**
     * @cfg {String} defaultType
     * @hide
     */

/**
     * @cfg {Object} defaults
     * @hide
     */

/**
     * @cfg {Boolean} hideBorders
     * @hide
     */

/**
     * @cfg {Mixed} items
     * @hide
     */

/**
     * @cfg {String} layout
     * @hide
     */

/**
     * @cfg {Object} layoutConfig
     * @hide
     */

/**
     * @cfg {Boolean} monitorResize
     * @hide
     */

/**
     * @property items
     * @hide
     */

/**
     * @method add
     * @hide
     */

/**
     * @method cascade
     * @hide
     */

/**
     * @method doLayout
     * @hide
     */

/**
     * @method find
     * @hide
     */

/**
     * @method findBy
     * @hide
     */

/**
     * @method findById
     * @hide
     */

/**
     * @method findByType
     * @hide
     */

/**
     * @method getComponent
     * @hide
     */

/**
     * @method getLayout
     * @hide
     */

/**
     * @method getUpdater
     * @hide
     */

/**
     * @method insert
     * @hide
     */

/**
     * @method load
     * @hide
     */

/**
     * @method remove
     * @hide
     */

/**
     * @event add
     * @hide
     */

/**
     * @event afterlayout
     * @hide
     */

/**
     * @event beforeadd
     * @hide
     */

/**
     * @event beforeremove
     * @hide
     */

/**
     * @event remove
     * @hide
     */

/**
     * @cfg {String} allowDomMove  @hide
     */

/**
     * @cfg {String} autoEl @hide
     */

/**
     * @cfg {String} applyTo  @hide
     */

/**
     * @cfg {String} autoScroll  @hide
     */

/**
     * @cfg {String} bodyBorder  @hide
     */

/**
     * @cfg {String} bodyStyle  @hide
     */

/**
     * @cfg {String} contentEl  @hide
     */

/**
     * @cfg {String} disabledClass  @hide
     */

/**
     * @cfg {String} elements  @hide
     */

/**
     * @cfg {String} html  @hide
     */

/**
     * @cfg {Boolean} preventBodyReset
     * @hide
     */

/**
     * @property disabled
     * @hide
     */

/**
     * @method applyToMarkup
     * @hide
     */

/**
     * @method enable
     * @hide
     */

/**
     * @method disable
     * @hide
     */

/**
     * @method setDisabled
     * @hide
     */
});
Ext.reg('grid', Ext.grid.GridPanel);


The source code

/*!
 * licensing@extjs.com
 * http://www.extjs.com/license
 */

/**
 * @class Ext.grid.GridView
 * @extends Ext.util.Observable
 *
This class encapsulates the user interface of an {@link Ext.grid.GridPanel}.
 * Methods of this class may be used to access user interface elements to enable
 * special display effects. Do not change the DOM structure of the user interface.

 *
This class does not provide ways to manipulate the underlying data. The data
 * model of a Grid is held in an {@link Ext.data.Store}.

 * @constructor
 * @param {Object} config
 */
Ext.grid.GridView = Ext.extend(Ext.util.Observable, {

/**
     * Override this function to apply custom CSS classes to rows during rendering.  You can also supply custom
     * parameters to the row template for the current row to customize how it is rendered using the rowParams
     * parameter.  This function should return the CSS class name (or empty string '' for none) that will be added
     * to the row's wrapping div.  To apply multiple class names, simply return them space-delimited within the string
     * (e.g., 'my-class another-class'). Example usage:

viewConfig: {
    forceFit: true,
    showPreview: true, // custom property
    enableRowBody: true, // required to create a second, full-width row to show expanded Record data
    getRowClass: function(record, rowIndex, rp, ds){ // rp = rowParams
        if(this.showPreview){
            rp.body = '<p>'+record.data.excerpt+'</p>';
            return 'x-grid3-row-expanded';
        }
        return 'x-grid3-row-collapsed';
    }
},

     * @param {Record} record The {@link Ext.data.Record} corresponding to the current row.
     * @param {Number} index The row index.
     * @param {Object} rowParams A config object that is passed to the row template during rendering that allows
     * customization of various aspects of a grid row.
     *
If {@link #enableRowBody} is configured true, then the following properties may be set
     * by this function, and will be used to render a full-width expansion row below each grid row:

     *

     *
  • body : String
    An HTML fragment to be used as the expansion row's body content (defaults to '').
    •
     *
  • bodyStyle : String
    A CSS style specification that will be applied to the expansion row's <tr> element. (defaults to '').
    •
     *

     * The following property will be passed in, and may be appended to:
     *

     *
  • tstyle : String
    A CSS style specification that willl be applied to the <table> element which encapsulates
     * both the standard grid row, and any expansion row.
    •
     *

     * @param {Store} store The {@link Ext.data.Store} this grid is bound to
     * @method getRowClass
     * @return {String} a CSS class name to add to the row.
     */

/**
     * @cfg {Boolean} enableRowBody True to add a second TR element per row that can be used to provide a row body
     * that spans beneath the data row.  Use the {@link #getRowClass} method's rowParams config to customize the row body.
     */

/**
     * @cfg {String} emptyText Default text (html tags are accepted) to display in the grid body when no rows
     * are available (defaults to ''). This value will be used to update the {@link #mainBody}:

    this.mainBody.update('<div class="x-grid-empty">' + this.emptyText + '</div>');

     */

/**
     * @cfg {Boolean} headersDisabled True to disable the grid column headers (defaults to false).
     * Use the {@link Ext.grid.ColumnModel ColumnModel} {@link Ext.grid.ColumnModel#menuDisabled menuDisabled}
     * config to disable the menu for individual columns.  While this config is true the
     * following will be disabled:

     *
  • clicking on header to sort
    •
     *
  • the trigger to reveal the menu.
    •
     *

     */

/**
     *
A customized implementation of a {@link Ext.dd.DragZone DragZone} which provides default implementations
     * of the template methods of DragZone to enable dragging of the selected rows of a GridPanel.
     * See {@link Ext.grid.GridDragZone} for details.

     *
This will only be present:

     *
  • if the owning GridPanel was configured with {@link Ext.grid.GridPanel#enableDragDrop enableDragDrop}: true.
    •
     *
  • after the owning GridPanel has been rendered.
    •
     *

     * @property dragZone
     * @type {Ext.grid.GridDragZone}
     */

/**
     * @cfg {Boolean} deferEmptyText True to defer {@link #emptyText} being applied until the store's
     * first load (defaults to true).
     */
    deferEmptyText : true,

/**
     * @cfg {Number} scrollOffset The amount of space to reserve for the vertical scrollbar
     * (defaults to undefined). If an explicit value isn't specified, this will be automatically
     * calculated.
     */
    scrollOffset : undefined,

/**
     * @cfg {Boolean} autoFill
     * Defaults to false.  Specify true to have the column widths re-proportioned
     * when the grid is initially rendered.  The
     * {@link Ext.grid.Column#width initially configured width} of each column will be adjusted
     * to fit the grid width and prevent horizontal scrolling. If columns are later resized (manually
     * or programmatically), the other columns in the grid will not be resized to fit the grid width.
     * See {@link #forceFit} also.
     */
    autoFill : false,

/**
     * @cfg {Boolean} forceFit
     * Defaults to false.  Specify true to have the column widths re-proportioned
     * at all times.  The {@link Ext.grid.Column#width initially configured width} of each
     * column will be adjusted to fit the grid width and prevent horizontal scrolling. If columns are
     * later resized (manually or programmatically), the other columns in the grid will be resized
     * to fit the grid width. See {@link #autoFill} also.
     */
    forceFit : false,

/**
     * @cfg {Array} sortClasses The CSS classes applied to a header when it is sorted. (defaults to ['sort-asc', 'sort-desc'])
     */
    sortClasses : ['sort-asc', 'sort-desc'],

/**
     * @cfg {String} sortAscText The text displayed in the 'Sort Ascending' menu item (defaults to 'Sort Ascending')
     */
    sortAscText : 'Sort Ascending',

/**
     * @cfg {String} sortDescText The text displayed in the 'Sort Descending' menu item (defaults to 'Sort Descending')
     */
    sortDescText : 'Sort Descending',

/**
     * @cfg {String} columnsText The text displayed in the 'Columns' menu item (defaults to 'Columns')
     */
    columnsText : 'Columns',

/**
     * @cfg {String} selectedRowClass The CSS class applied to a selected row (defaults to 'x-grid3-row-selected'). An
     * example overriding the default styling:

    .x-grid3-row-selected {background-color: yellow;}

     * Note that this only controls the row, and will not do anything for the text inside it.  To style inner
     * facets (like text) use something like:

    .x-grid3-row-selected .x-grid3-cell-inner {
        color: #FFCC00;
    }

     * @type String
     */
    selectedRowClass : 'x-grid3-row-selected',

    // private
    borderWidth : 2,
    tdClass : 'x-grid3-cell',
    hdCls : 'x-grid3-hd',
    markDirty : true,

/**
     * @cfg {Number} cellSelectorDepth The number of levels to search for cells in event delegation (defaults to 4)
     */
    cellSelectorDepth : 4,

/**
     * @cfg {Number} rowSelectorDepth The number of levels to search for rows in event delegation (defaults to 10)
     */
    rowSelectorDepth : 10,

/**
     * @cfg {Number} rowBodySelectorDepth The number of levels to search for row bodies in event delegation (defaults to 10)
     */
    rowBodySelectorDepth : 10,

/**
     * @cfg {String} cellSelector The selector used to find cells internally (defaults to 'td.x-grid3-cell')
     */
    cellSelector : 'td.x-grid3-cell',

/**
     * @cfg {String} rowSelector The selector used to find rows internally (defaults to 'div.x-grid3-row')
     */
    rowSelector : 'div.x-grid3-row',

/**
     * @cfg {String} rowBodySelector The selector used to find row bodies internally (defaults to 'div.x-grid3-row')
     */
    rowBodySelector : 'div.x-grid3-row-body',

    // private
    firstRowCls: 'x-grid3-row-first',
    lastRowCls: 'x-grid3-row-last',
    rowClsRe: /(?:^|\s+)x-grid3-row-(first|last|alt)(?:\s+|$)/g,

    constructor : function(config){
        Ext.apply(this, config);
        // These events are only used internally by the grid components
        this.addEvents(

/**
             * @event beforerowremoved
             * Internal UI Event. Fired before a row is removed.
             * @param {Ext.grid.GridView} view
             * @param {Number} rowIndex The index of the row to be removed.
             * @param {Ext.data.Record} record The Record to be removed
             */
            'beforerowremoved',

/**
             * @event beforerowsinserted
             * Internal UI Event. Fired before rows are inserted.
             * @param {Ext.grid.GridView} view
             * @param {Number} firstRow The index of the first row to be inserted.
             * @param {Number} lastRow The index of the last row to be inserted.
             */
            'beforerowsinserted',

/**
             * @event beforerefresh
             * Internal UI Event. Fired before the view is refreshed.
             * @param {Ext.grid.GridView} view
             */
            'beforerefresh',

/**
             * @event rowremoved
             * Internal UI Event. Fired after a row is removed.
             * @param {Ext.grid.GridView} view
             * @param {Number} rowIndex The index of the row that was removed.
             * @param {Ext.data.Record} record The Record that was removed
             */
            'rowremoved',

/**
             * @event rowsinserted
             * Internal UI Event. Fired after rows are inserted.
             * @param {Ext.grid.GridView} view
             * @param {Number} firstRow The index of the first inserted.
             * @param {Number} lastRow The index of the last row inserted.
             */
            'rowsinserted',

/**
             * @event rowupdated
             * Internal UI Event. Fired after a row has been updated.
             * @param {Ext.grid.GridView} view
             * @param {Number} firstRow The index of the row updated.
             * @param {Ext.data.record} record The Record backing the row updated.
             */
            'rowupdated',

/**
             * @event refresh
             * Internal UI Event. Fired after the GridView's body has been refreshed.
             * @param {Ext.grid.GridView} view
             */
            'refresh'
        );
        Ext.grid.GridView.superclass.constructor.call(this);
    },

    /* -------------------------------- UI Specific ----------------------------- */

    // private
    initTemplates : function(){
        var ts = this.templates || {};
        if(!ts.master){
            ts.master = new Ext.Template(
                '
',
                    '
',
                        '
{header}
',
                        '
{body}
',
                    '
',
                    '

',
                    '

',
                '
'
            );
        }

        if(!ts.header){
            ts.header = new Ext.Template(
                '',
                '{cells}',
                '
'
            );
        }

        if(!ts.hcell){
            ts.hcell = new Ext.Template(
                '
', this.grid.enableHdMenu ? '' : '',
                '{value}  ',
                '
 '
            );
        }

        if(!ts.body){
            ts.body = new Ext.Template('{rows}');
        }

        if(!ts.row){
            ts.row = new Ext.Template(
                '
',
                '{cells}',
                (this.enableRowBody ? '' : ''),
                '
{body}

'
            );
        }

        if(!ts.cell){
            ts.cell = new Ext.Template(
                    '',
                    '
{value}
',
                    ' '
                    );
        }

        for(var k in ts){
            var t = ts[k];
            if(t && Ext.isFunction(t.compile) && !t.compiled){
                t.disableFormats = true;
                t.compile();
            }
        }

        this.templates = ts;
        this.colRe = new RegExp('x-grid3-td-([^\\s]+)', '');
    },

    // private
    fly : function(el){
        if(!this._flyweight){
            this._flyweight = new Ext.Element.Flyweight(document.body);
        }
        this._flyweight.dom = el;
        return this._flyweight;
    },

    // private
    getEditorParent : function(){
        return this.scroller.dom;
    },

    // private
    initElements : function(){
        var E = Ext.Element;

        var el = this.grid.getGridEl().dom.firstChild;
        var cs = el.childNodes;

        this.el = new E(el);

        this.mainWrap = new E(cs[0]);
        this.mainHd = new E(this.mainWrap.dom.firstChild);

        if(this.grid.hideHeaders){
            this.mainHd.setDisplayed(false);
        }

        this.innerHd = this.mainHd.dom.firstChild;
        this.scroller = new E(this.mainWrap.dom.childNodes[1]);
        if(this.forceFit){
            this.scroller.setStyle('overflow-x', 'hidden');
        }

/**
         * Read-only. The GridView's body Element which encapsulates all rows in the Grid.
         * This {@link Ext.Element Element} is only available after the GridPanel has been rendered.
         * @type Ext.Element
         * @property mainBody
         */
        this.mainBody = new E(this.scroller.dom.firstChild);

        this.focusEl = new E(this.scroller.dom.childNodes[1]);
        this.focusEl.swallowEvent('click', true);

        this.resizeMarker = new E(cs[1]);
        this.resizeProxy = new E(cs[2]);
    },

    // private
    getRows : function(){
        return this.hasRows() ? this.mainBody.dom.childNodes : [];
    },

    // finder methods, used with delegation

    // private
    findCell : function(el){
        if(!el){
            return false;
        }
        return this.fly(el).findParent(this.cellSelector, this.cellSelectorDepth);
    },

/**
     *
Return the index of the grid column which contains the passed HTMLElement.

     * See also {@link #findRowIndex}
     * @param {HTMLElement} el The target element
     * @return {Number} The column index, or false if the target element is not within a row of this GridView.
     */
    findCellIndex : function(el, requiredCls){
        var cell = this.findCell(el);
        if(cell && (!requiredCls || this.fly(cell).hasClass(requiredCls))){
            return this.getCellIndex(cell);
        }
        return false;
    },

    // private
    getCellIndex : function(el){
        if(el){
            var m = el.className.match(this.colRe);
            if(m && m[1]){
                return this.cm.getIndexById(m[1]);
            }
        }
        return false;
    },

    // private
    findHeaderCell : function(el){
        var cell = this.findCell(el);
        return cell && this.fly(cell).hasClass(this.hdCls) ? cell : null;
    },

    // private
    findHeaderIndex : function(el){
        return this.findCellIndex(el, this.hdCls);
    },

/**
     * Return the HtmlElement representing the grid row which contains the passed element.
     * @param {HTMLElement} el The target HTMLElement
     * @return {HTMLElement} The row element, or null if the target element is not within a row of this GridView.
     */
    findRow : function(el){
        if(!el){
            return false;
        }
        return this.fly(el).findParent(this.rowSelector, this.rowSelectorDepth);
    },

/**
     *
Return the index of the grid row which contains the passed HTMLElement.

     * See also {@link #findCellIndex}
     * @param {HTMLElement} el The target HTMLElement
     * @return {Number} The row index, or false if the target element is not within a row of this GridView.
     */
    findRowIndex : function(el){
        var r = this.findRow(el);
        return r ? r.rowIndex : false;
    },

/**
     * Return the HtmlElement representing the grid row body which contains the passed element.
     * @param {HTMLElement} el The target HTMLElement
     * @return {HTMLElement} The row body element, or null if the target element is not within a row body of this GridView.
     */
    findRowBody : function(el){
        if(!el){
            return false;
        }
        return this.fly(el).findParent(this.rowBodySelector, this.rowBodySelectorDepth);
    },

    // getter methods for fetching elements dynamically in the grid

/**
     * Return the <div> HtmlElement which represents a Grid row for the specified index.
     * @param {Number} index The row index
     * @return {HtmlElement} The div element.
     */
    getRow : function(row){
        return this.getRows()[row];
    },

/**
     * Returns the grid's <td> HtmlElement at the specified coordinates.
     * @param {Number} row The row index in which to find the cell.
     * @param {Number} col The column index of the cell.
     * @return {HtmlElement} The td at the specified coordinates.
     */
    getCell : function(row, col){
        return this.getRow(row).getElementsByTagName('td')[col];
    },

/**
     * Return the <td> HtmlElement which represents the Grid's header cell for the specified column index.
     * @param {Number} index The column index
     * @return {HtmlElement} The td element.
     */
    getHeaderCell : function(index){
        return this.mainHd.dom.getElementsByTagName('td')[index];
    },

    // manipulating elements

    // private - use getRowClass to apply custom row classes
    addRowClass : function(row, cls){
        var r = this.getRow(row);
        if(r){
            this.fly(r).addClass(cls);
        }
    },

    // private
    removeRowClass : function(row, cls){
        var r = this.getRow(row);
        if(r){
            this.fly(r).removeClass(cls);
        }
    },

    // private
    removeRow : function(row){
        Ext.removeNode(this.getRow(row));
        this.syncFocusEl(row);
    },

    // private
    removeRows : function(firstRow, lastRow){
        var bd = this.mainBody.dom;
        for(var rowIndex = firstRow; rowIndex <= lastRow; rowIndex++){
            Ext.removeNode(bd.childNodes[firstRow]);
        }
        this.syncFocusEl(firstRow);
    },

    // scrolling stuff

    // private
    getScrollState : function(){
        var sb = this.scroller.dom;
        return {left: sb.scrollLeft, top: sb.scrollTop};
    },

    // private
    restoreScroll : function(state){
        var sb = this.scroller.dom;
        sb.scrollLeft = state.left;
        sb.scrollTop = state.top;
    },

/**
     * Scrolls the grid to the top
     */
    scrollToTop : function(){
        this.scroller.dom.scrollTop = 0;
        this.scroller.dom.scrollLeft = 0;
    },

    // private
    syncScroll : function(){
        this.syncHeaderScroll();
        var mb = this.scroller.dom;
        this.grid.fireEvent('bodyscroll', mb.scrollLeft, mb.scrollTop);
    },

    // private
    syncHeaderScroll : function(){
        var mb = this.scroller.dom;
        this.innerHd.scrollLeft = mb.scrollLeft;
        this.innerHd.scrollLeft = mb.scrollLeft; // second time for IE (1/2 time first fails, other browsers ignore)
    },

    // private
    updateSortIcon : function(col, dir){
        var sc = this.sortClasses;
        var hds = this.mainHd.select('td').removeClass(sc);
        hds.item(col).addClass(sc[dir == 'DESC' ? 1 : 0]);
    },

    // private
    updateAllColumnWidths : function(){
        var tw   = this.getTotalWidth(),
            clen = this.cm.getColumnCount(),
            ws   = [],
            len,
            i;

        for(i = 0; i < clen; i++){
            ws[i] = this.getColumnWidth(i);
        }

        this.innerHd.firstChild.style.width = this.getOffsetWidth();
        this.innerHd.firstChild.firstChild.style.width = tw;
        this.mainBody.dom.style.width = tw;

        for(i = 0; i < clen; i++){
            var hd = this.getHeaderCell(i);
            hd.style.width = ws[i];
        }

        var ns = this.getRows(), row, trow;
        for(i = 0, len = ns.length; i < len; i++){
            row = ns[i];
            row.style.width = tw;
            if(row.firstChild){
                row.firstChild.style.width = tw;
                trow = row.firstChild.rows[0];
                for (var j = 0; j < clen; j++) {
                   trow.childNodes[j].style.width = ws[j];
                }
            }
        }

        this.onAllColumnWidthsUpdated(ws, tw);
    },

    // private
    updateColumnWidth : function(col, width){
        var w = this.getColumnWidth(col);
        var tw = this.getTotalWidth();
        this.innerHd.firstChild.style.width = this.getOffsetWidth();
        this.innerHd.firstChild.firstChild.style.width = tw;
        this.mainBody.dom.style.width = tw;
        var hd = this.getHeaderCell(col);
        hd.style.width = w;

        var ns = this.getRows(), row;
        for(var i = 0, len = ns.length; i < len; i++){
            row = ns[i];
            row.style.width = tw;
            if(row.firstChild){
                row.firstChild.style.width = tw;
                row.firstChild.rows[0].childNodes[col].style.width = w;
            }
        }

        this.onColumnWidthUpdated(col, w, tw);
    },

    // private
    updateColumnHidden : function(col, hidden){
        var tw = this.getTotalWidth();
        this.innerHd.firstChild.style.width = this.getOffsetWidth();
        this.innerHd.firstChild.firstChild.style.width = tw;
        this.mainBody.dom.style.width = tw;
        var display = hidden ? 'none' : '';

        var hd = this.getHeaderCell(col);
        hd.style.display = display;

        var ns = this.getRows(), row;
        for(var i = 0, len = ns.length; i < len; i++){
            row = ns[i];
            row.style.width = tw;
            if(row.firstChild){
                row.firstChild.style.width = tw;
                row.firstChild.rows[0].childNodes[col].style.display = display;
            }
        }

        this.onColumnHiddenUpdated(col, hidden, tw);
        delete this.lastViewWidth; // force recalc
        this.layout();
    },

    /**
     * @private
     * Renders all of the rows to a string buffer and returns the string. This is called internally
     * by renderRows and performs the actual string building for the rows - it does not inject HTML into the DOM.
     * @param {Array} columns The column data acquired from getColumnData.
     * @param {Array} records The array of records to render
     * @param {Ext.data.Store} store The store to render the rows from
     * @param {Number} startRow The index of the first row being rendered. Sometimes we only render a subset of
     * the rows so this is used to maintain logic for striping etc
     * @param {Number} colCount The total number of columns in the column model
     * @param {Boolean} stripe True to stripe the rows
     * @return {String} A string containing the HTML for the rendered rows
     */
    doRender : function(columns, records, store, startRow, colCount, stripe) {
        var templates    = this.templates,
            cellTemplate = templates.cell,
            rowTemplate  = templates.row,
            last         = colCount - 1;

        var tstyle = 'width:' + this.getTotalWidth() + ';';

        // buffers
        var rowBuffer = [],
            colBuffer = [],
            rowParams = {tstyle: tstyle},
            meta      = {},
            column,
            record;

        //build up each row's HTML
        for (var j = 0, len = records.length; j < len; j++) {
            record    = records[j];
            colBuffer = [];

            var rowIndex = j + startRow;

            //build up each column's HTML
            for (var i = 0; i < colCount; i++) {
                column = columns[i];

                meta.id    = column.id;
                meta.css   = i === 0 ? 'x-grid3-cell-first ' : (i == last ? 'x-grid3-cell-last ' : '');
                meta.attr  = meta.cellAttr = '';
                meta.style = column.style;
                meta.value = column.renderer.call(column.scope, record.data[column.name], meta, record, rowIndex, i, store);

                if (Ext.isEmpty(meta.value)) {
                    meta.value = ' ';
                }

                if (this.markDirty && record.dirty && Ext.isDefined(record.modified[column.name])) {
                    meta.css += ' x-grid3-dirty-cell';
                }

                colBuffer[colBuffer.length] = cellTemplate.apply(meta);
            }

            //set up row striping and row dirtiness CSS classes
            var alt = [];

            if (stripe && ((rowIndex + 1) % 2 === 0)) {
                alt[0] = 'x-grid3-row-alt';
            }

            if (record.dirty) {
                alt[1] = ' x-grid3-dirty-row';
            }

            rowParams.cols = colCount;

            if (this.getRowClass) {
                alt[2] = this.getRowClass(record, rowIndex, rowParams, store);
            }

            rowParams.alt   = alt.join(' ');
            rowParams.cells = colBuffer.join('');

            rowBuffer[rowBuffer.length] = rowTemplate.apply(rowParams);
        }

        return rowBuffer.join('');
    },

    // private
    processRows : function(startRow, skipStripe) {
        if (!this.ds || this.ds.getCount() < 1) {
            return;
        }

        var rows = this.getRows(),
            len  = rows.length,
            i, r;

        skipStripe = skipStripe || !this.grid.stripeRows;
        startRow   = startRow   || 0;

        for (i = 0; i/**
     * Focuses the specified row.
     * @param {Number} row The row index
     */
    focusRow : function(row){
        this.focusCell(row, 0, false);
    },

/**
     * Focuses the specified cell.
     * @param {Number} row The row index
     * @param {Number} col The column index
     */
    focusCell : function(row, col, hscroll){
        this.syncFocusEl(this.ensureVisible(row, col, hscroll));
        if(Ext.isGecko){
            this.focusEl.focus();
        }else{
            this.focusEl.focus.defer(1, this.focusEl);
        }
    },

    resolveCell : function(row, col, hscroll){
        if(!Ext.isNumber(row)){
            row = row.rowIndex;
        }
        if(!this.ds){
            return null;
        }
        if(row < 0 || row >= this.ds.getCount()){
            return null;
        }
        col = (col !== undefined ? col : 0);

        var rowEl = this.getRow(row),
            cm = this.cm,
            colCount = cm.getColumnCount(),
            cellEl;
        if(!(hscroll === false && col === 0)){
            while(col < colCount && cm.isHidden(col)){
                col++;
            }
            cellEl = this.getCell(row, col);
        }

        return {row: rowEl, cell: cellEl};
    },

    getResolvedXY : function(resolved){
        if(!resolved){
            return null;
        }
        var s = this.scroller.dom, c = resolved.cell, r = resolved.row;
        return c ? Ext.fly(c).getXY() : [this.el.getX(), Ext.fly(r).getY()];
    },

    syncFocusEl : function(row, col, hscroll){
        var xy = row;
        if(!Ext.isArray(xy)){
            row = Math.min(row, Math.max(0, this.getRows().length-1));
            if (isNaN(row)) {
                return;
            }
            xy = this.getResolvedXY(this.resolveCell(row, col, hscroll));
        }
        this.focusEl.setXY(xy||this.scroller.getXY());
    },

    ensureVisible : function(row, col, hscroll){
        var resolved = this.resolveCell(row, col, hscroll);
        if(!resolved || !resolved.row){
            return;
        }

        var rowEl = resolved.row,
            cellEl = resolved.cell,
            c = this.scroller.dom,
            ctop = 0,
            p = rowEl,
            stop = this.el.dom;

        while(p && p != stop){
            ctop += p.offsetTop;
            p = p.offsetParent;
        }

        ctop -= this.mainHd.dom.offsetHeight;
        stop = parseInt(c.scrollTop, 10);

        var cbot = ctop + rowEl.offsetHeight,
            ch = c.clientHeight,
            sbot = stop + ch;

        if(ctop < stop){
          c.scrollTop = ctop;
        }else if(cbot > sbot){
            c.scrollTop = cbot-ch;
        }

        if(hscroll !== false){
            var cleft = parseInt(cellEl.offsetLeft, 10);
            var cright = cleft + cellEl.offsetWidth;

            var sleft = parseInt(c.scrollLeft, 10);
            var sright = sleft + c.clientWidth;
            if(cleft < sleft){
                c.scrollLeft = cleft;
            }else if(cright > sright){
                c.scrollLeft = cright-c.clientWidth;
            }
        }
        return this.getResolvedXY(resolved);
    },

    // private
    insertRows : function(dm, firstRow, lastRow, isUpdate) {
        var last = dm.getCount() - 1;
        if( !isUpdate && firstRow === 0 && lastRow >= last) {
            this.fireEvent('beforerowsinserted', this, firstRow, lastRow);
                this.refresh();
            this.fireEvent('rowsinserted', this, firstRow, lastRow);
        } else {
            if (!isUpdate) {
                this.fireEvent('beforerowsinserted', this, firstRow, lastRow);
            }
            var html = this.renderRows(firstRow, lastRow),
                before = this.getRow(firstRow);
            if (before) {
                if(firstRow === 0){
                    Ext.fly(this.getRow(0)).removeClass(this.firstRowCls);
                }
                Ext.DomHelper.insertHtml('beforeBegin', before, html);
            } else {
                var r = this.getRow(last - 1);
                if(r){
                    Ext.fly(r).removeClass(this.lastRowCls);
                }
                Ext.DomHelper.insertHtml('beforeEnd', this.mainBody.dom, html);
            }
            if (!isUpdate) {
                this.fireEvent('rowsinserted', this, firstRow, lastRow);
                this.processRows(firstRow);
            } else if (firstRow === 0 || firstRow >= last) {
                //ensure first/last row is kept after an update.
                Ext.fly(this.getRow(firstRow)).addClass(firstRow === 0 ? this.firstRowCls : this.lastRowCls);
            }
        }
        this.syncFocusEl(firstRow);
    },

    // private
    deleteRows : function(dm, firstRow, lastRow){
        if(dm.getRowCount()<1){
            this.refresh();
        }else{
            this.fireEvent('beforerowsdeleted', this, firstRow, lastRow);

            this.removeRows(firstRow, lastRow);

            this.processRows(firstRow);
            this.fireEvent('rowsdeleted', this, firstRow, lastRow);
        }
    },

    // private
    getColumnStyle : function(col, isHeader){
        var style = !isHeader ? (this.cm.config[col].css || '') : '';
        style += 'width:'+this.getColumnWidth(col)+';';
        if(this.cm.isHidden(col)){
            style += 'display:none;';
        }
        var align = this.cm.config[col].align;
        if(align){
            style += 'text-align:'+align+';';
        }
        return style;
    },

    // private
    getColumnWidth : function(col){
        var w = this.cm.getColumnWidth(col);
        if(Ext.isNumber(w)){
            return (Ext.isBorderBox || (Ext.isWebKit && !Ext.isSafari2) ? w : (w - this.borderWidth > 0 ? w - this.borderWidth : 0)) + 'px';
        }
        return w;
    },

    // private
    getTotalWidth : function(){
        return this.cm.getTotalWidth()+'px';
    },

    // private
    fitColumns : function(preventRefresh, onlyExpand, omitColumn){
        var cm = this.cm, i;
        var tw = cm.getTotalWidth(false);
        var aw = this.grid.getGridEl().getWidth(true)-this.getScrollOffset();

        if(aw < 20){ // not initialized, so don't screw up the default widths
            return;
        }
        var extra = aw - tw;

        if(extra === 0){
            return false;
        }

        var vc = cm.getColumnCount(true);
        var ac = vc-(Ext.isNumber(omitColumn) ? 1 : 0);
        if(ac === 0){
            ac = 1;
            omitColumn = undefined;
        }
        var colCount = cm.getColumnCount();
        var cols = [];
        var extraCol = 0;
        var width = 0;
        var w;
        for (i = 0; i < colCount; i++){
            if(!cm.isHidden(i) && !cm.isFixed(i) && i !== omitColumn){
                w = cm.getColumnWidth(i);
                cols.push(i);
                extraCol = i;
                cols.push(w);
                width += w;
            }
        }
        var frac = (aw - cm.getTotalWidth())/width;
        while (cols.length){
            w = cols.pop();
            i = cols.pop();
            cm.setColumnWidth(i, Math.max(this.grid.minColumnWidth, Math.floor(w + w*frac)), true);
        }

        if((tw = cm.getTotalWidth(false)) > aw){
            var adjustCol = ac != vc ? omitColumn : extraCol;
             cm.setColumnWidth(adjustCol, Math.max(1,
                     cm.getColumnWidth(adjustCol)- (tw-aw)), true);
        }

        if(preventRefresh !== true){
            this.updateAllColumnWidths();
        }

        return true;
    },

    // private
    autoExpand : function(preventUpdate){
        var g = this.grid, cm = this.cm;
        if(!this.userResized && g.autoExpandColumn){
            var tw = cm.getTotalWidth(false);
            var aw = this.grid.getGridEl().getWidth(true)-this.getScrollOffset();
            if(tw != aw){
                var ci = cm.getIndexById(g.autoExpandColumn);
                var currentWidth = cm.getColumnWidth(ci);
                var cw = Math.min(Math.max(((aw-tw)+currentWidth), g.autoExpandMin), g.autoExpandMax);
                if(cw != currentWidth){
                    cm.setColumnWidth(ci, cw, true);
                    if(preventUpdate !== true){
                        this.updateColumnWidth(ci, cw);
                    }
                }
            }
        }
    },

    /**
     * @private
     * Returns an array of column configurations - one for each column
     * @return {Array} Array of column config objects. This includes the column name, renderer, id style and renderer
     */
    getColumnData : function(){
        // build a map for all the columns
        var cs       = [],
            cm       = this.cm,
            colCount = cm.getColumnCount();

        for (var i = 0; i < colCount; i++) {
            var name = cm.getDataIndex(i);

            cs[i] = {
                name    : (!Ext.isDefined(name) ? this.ds.fields.get(i).name : name),
                renderer: cm.getRenderer(i),
                scope   : cm.getRendererScope(i),
                id      : cm.getColumnId(i),
                style   : this.getColumnStyle(i)
            };
        }

        return cs;
    },

    // private
    renderRows : function(startRow, endRow){
        // pull in all the crap needed to render rows
        var g = this.grid, cm = g.colModel, ds = g.store, stripe = g.stripeRows;
        var colCount = cm.getColumnCount();

        if(ds.getCount() < 1){
            return '';
        }

        var cs = this.getColumnData();

        startRow = startRow || 0;
        endRow = !Ext.isDefined(endRow) ? ds.getCount()-1 : endRow;

        // records to render
        var rs = ds.getRange(startRow, endRow);

        return this.doRender(cs, rs, ds, startRow, colCount, stripe);
    },

    // private
    renderBody : function(){
        var markup = this.renderRows() || ' ';
        return this.templates.body.apply({rows: markup});
    },

    // private
    refreshRow : function(record){
        var ds = this.ds, index;
        if(Ext.isNumber(record)){
            index = record;
            record = ds.getAt(index);
            if(!record){
                return;
            }
        }else{
            index = ds.indexOf(record);
            if(index < 0){
                return;
            }
        }
        this.insertRows(ds, index, index, true);
        this.getRow(index).rowIndex = index;
        this.onRemove(ds, record, index+1, true);
        this.fireEvent('rowupdated', this, index, record);
    },

/**
     * Refreshs the grid UI
     * @param {Boolean} headersToo (optional) True to also refresh the headers
     */
    refresh : function(headersToo){
        this.fireEvent('beforerefresh', this);
        this.grid.stopEditing(true);

        var result = this.renderBody();
        this.mainBody.update(result).setWidth(this.getTotalWidth());
        if(headersToo === true){
            this.updateHeaders();
            this.updateHeaderSortState();
        }
        this.processRows(0, true);
        this.layout();
        this.applyEmptyText();
        this.fireEvent('refresh', this);
    },

    /**
     * @private
     * Displays the configured emptyText if there are currently no rows to display
     */
    applyEmptyText : function(){
        if(this.emptyText && !this.hasRows()){
            this.mainBody.update('
' + this.emptyText + '
');
        }
    },

    /**
     * @private
     * Adds sorting classes to the column headers based on the bound store's sortInfo. Fires the 'sortchange' event
     * if the sorting has changed since this function was last run.
     */
    updateHeaderSortState : function(){
        var state = this.ds.getSortState();
        if (!state) {
            return;
        }

        if (!this.sortState || (this.sortState.field != state.field || this.sortState.direction != state.direction)) {
            this.grid.fireEvent('sortchange', this.grid, state);
        }

        this.sortState = state;

        var sortColumn = this.cm.findColumnIndex(state.field);
        if (sortColumn != -1){
            var sortDir = state.direction;
            this.updateSortIcon(sortColumn, sortDir);
        }
    },

    /**
     * @private
     * Removes any sorting indicator classes from the column headers
     */
    clearHeaderSortState : function(){
        if (!this.sortState) {
            return;
        }
        this.grid.fireEvent('sortchange', this.grid, null);
        this.mainHd.select('td').removeClass(this.sortClasses);
        delete this.sortState;
    },

    // private
    destroy : function(){
        if (this.scrollToTopTask && this.scrollToTopTask.cancel){
            this.scrollToTopTask.cancel();
        }
        if(this.colMenu){
            Ext.menu.MenuMgr.unregister(this.colMenu);
            this.colMenu.destroy();
            delete this.colMenu;
        }
        if(this.hmenu){
            Ext.menu.MenuMgr.unregister(this.hmenu);
            this.hmenu.destroy();
            delete this.hmenu;
        }

        this.initData(null, null);
        this.purgeListeners();
        Ext.fly(this.innerHd).un("click", this.handleHdDown, this);

        if(this.grid.enableColumnMove){
            Ext.destroy(
                this.columnDrag.el,
                this.columnDrag.proxy.ghost,
                this.columnDrag.proxy.el,
                this.columnDrop.el,
                this.columnDrop.proxyTop,
                this.columnDrop.proxyBottom,
                this.columnDrag.dragData.ddel,
                this.columnDrag.dragData.header
            );
            if (this.columnDrag.proxy.anim) {
                Ext.destroy(this.columnDrag.proxy.anim);
            }
            delete this.columnDrag.proxy.ghost;
            delete this.columnDrag.dragData.ddel;
            delete this.columnDrag.dragData.header;
            this.columnDrag.destroy();
            delete Ext.dd.DDM.locationCache[this.columnDrag.id];
            delete this.columnDrag._domRef;

            delete this.columnDrop.proxyTop;
            delete this.columnDrop.proxyBottom;
            this.columnDrop.destroy();
            delete Ext.dd.DDM.locationCache["gridHeader" + this.grid.getGridEl().id];
            delete this.columnDrop._domRef;
            delete Ext.dd.DDM.ids[this.columnDrop.ddGroup];
        }

        if (this.splitZone){ // enableColumnResize
            this.splitZone.destroy();
            delete this.splitZone._domRef;
            delete Ext.dd.DDM.ids["gridSplitters" + this.grid.getGridEl().id];
        }

        Ext.fly(this.innerHd).removeAllListeners();
        Ext.removeNode(this.innerHd);
        delete this.innerHd;

        Ext.destroy(
            this.el,
            this.mainWrap,
            this.mainHd,
            this.scroller,
            this.mainBody,
            this.focusEl,
            this.resizeMarker,
            this.resizeProxy,
            this.activeHdBtn,
            this.dragZone,
            this.splitZone,
            this._flyweight
        );

        delete this.grid.container;

        if(this.dragZone){
            this.dragZone.destroy();
        }

        Ext.dd.DDM.currentTarget = null;
        delete Ext.dd.DDM.locationCache[this.grid.getGridEl().id];

        Ext.EventManager.removeResizeListener(this.onWindowResize, this);
    },

    // private
    onDenyColumnHide : function(){

    },

    // private
    render : function(){
        if(this.autoFill){
            var ct = this.grid.ownerCt;
            if (ct && ct.getLayout()){
                ct.on('afterlayout', function(){
                    this.fitColumns(true, true);
                    this.updateHeaders();
                }, this, {single: true});
            }else{
                this.fitColumns(true, true);
            }
        }else if(this.forceFit){
            this.fitColumns(true, false);
        }else if(this.grid.autoExpandColumn){
            this.autoExpand(true);
        }

        this.renderUI();
    },

    /* --------------------------------- Model Events and Handlers --------------------------------*/
    // private
    initData : function(ds, cm){
        if(this.ds){
            this.ds.un('load', this.onLoad, this);
            this.ds.un('datachanged', this.onDataChange, this);
            this.ds.un('add', this.onAdd, this);
            this.ds.un('remove', this.onRemove, this);
            this.ds.un('update', this.onUpdate, this);
            this.ds.un('clear', this.onClear, this);
            if(this.ds !== ds && this.ds.autoDestroy){
                this.ds.destroy();
            }
        }
        if(ds){
            ds.on({
                scope: this,
                load: this.onLoad,
                datachanged: this.onDataChange,
                add: this.onAdd,
                remove: this.onRemove,
                update: this.onUpdate,
                clear: this.onClear
            });
        }
        this.ds = ds;

        if(this.cm){
            this.cm.un('configchange', this.onColConfigChange, this);
            this.cm.un('widthchange', this.onColWidthChange, this);
            this.cm.un('headerchange', this.onHeaderChange, this);
            this.cm.un('hiddenchange', this.onHiddenChange, this);
            this.cm.un('columnmoved', this.onColumnMove, this);
        }
        if(cm){
            delete this.lastViewWidth;
            cm.on({
                scope: this,
                configchange: this.onColConfigChange,
                widthchange: this.onColWidthChange,
                headerchange: this.onHeaderChange,
                hiddenchange: this.onHiddenChange,
                columnmoved: this.onColumnMove
            });
        }
        this.cm = cm;
    },

    // private
    onDataChange : function(){
        this.refresh();
        this.updateHeaderSortState();
        this.syncFocusEl(0);
    },

    // private
    onClear : function(){
        this.refresh();
        this.syncFocusEl(0);
    },

    // private
    onUpdate : function(ds, record){
        this.refreshRow(record);
    },

    // private
    onAdd : function(ds, records, index){
        this.insertRows(ds, index, index + (records.length-1));
    },

    // private
    onRemove : function(ds, record, index, isUpdate){
        if(isUpdate !== true){
            this.fireEvent('beforerowremoved', this, index, record);
        }
        this.removeRow(index);
        if(isUpdate !== true){
            this.processRows(index);
            this.applyEmptyText();
            this.fireEvent('rowremoved', this, index, record);
        }
    },

    // private
    onLoad : function(){
        if (Ext.isGecko){
            if (!this.scrollToTopTask) {
                this.scrollToTopTask = new Ext.util.DelayedTask(this.scrollToTop, this);
            }
            this.scrollToTopTask.delay(1);
        }else{
            this.scrollToTop();
        }
    },

    // private
    onColWidthChange : function(cm, col, width){
        this.updateColumnWidth(col, width);
    },

    // private
    onHeaderChange : function(cm, col, text){
        this.updateHeaders();
    },

    // private
    onHiddenChange : function(cm, col, hidden){
        this.updateColumnHidden(col, hidden);
    },

    // private
    onColumnMove : function(cm, oldIndex, newIndex){
        this.indexMap = null;
        var s = this.getScrollState();
        this.refresh(true);
        this.restoreScroll(s);
        this.afterMove(newIndex);
        this.grid.fireEvent('columnmove', oldIndex, newIndex);
    },

    // private
    onColConfigChange : function(){
        delete this.lastViewWidth;
        this.indexMap = null;
        this.refresh(true);
    },

    /* -------------------- UI Events and Handlers ------------------------------ */
    // private
    initUI : function(grid){
        grid.on('headerclick', this.onHeaderClick, this);
    },

    // private
    initEvents : function(){
    },

    // private
    onHeaderClick : function(g, index){
        if(this.headersDisabled || !this.cm.isSortable(index)){
            return;
        }
        g.stopEditing(true);
        g.store.sort(this.cm.getDataIndex(index));
    },

    // private
    onRowOver : function(e, t){
        var row;
        if((row = this.findRowIndex(t)) !== false){
            this.addRowClass(row, 'x-grid3-row-over');
        }
    },

    // private
    onRowOut : function(e, t){
        var row;
        if((row = this.findRowIndex(t)) !== false && !e.within(this.getRow(row), true)){
            this.removeRowClass(row, 'x-grid3-row-over');
        }
    },

    // private
    handleWheel : function(e){
        e.stopPropagation();
    },

    // private
    onRowSelect : function(row){
        this.addRowClass(row, this.selectedRowClass);
    },

    // private
    onRowDeselect : function(row){
        this.removeRowClass(row, this.selectedRowClass);
    },

    // private
    onCellSelect : function(row, col){
        var cell = this.getCell(row, col);
        if(cell){
            this.fly(cell).addClass('x-grid3-cell-selected');
        }
    },

    // private
    onCellDeselect : function(row, col){
        var cell = this.getCell(row, col);
        if(cell){
            this.fly(cell).removeClass('x-grid3-cell-selected');
        }
    },

    // private
    onColumnSplitterMoved : function(i, w){
        this.userResized = true;
        var cm = this.grid.colModel;
        cm.setColumnWidth(i, w, true);

        if(this.forceFit){
            this.fitColumns(true, false, i);
            this.updateAllColumnWidths();
        }else{
            this.updateColumnWidth(i, w);
            this.syncHeaderScroll();
        }

        this.grid.fireEvent('columnresize', i, w);
    },

    // private
    handleHdMenuClick : function(item){
        var index = this.hdCtxIndex,
            cm = this.cm,
            ds = this.ds,
            id = item.getItemId();
        switch(id){
            case 'asc':
                ds.sort(cm.getDataIndex(index), 'ASC');
                break;
            case 'desc':
                ds.sort(cm.getDataIndex(index), 'DESC');
                break;
            default:
                index = cm.getIndexById(id.substr(4));
                if(index != -1){
                    if(item.checked && cm.getColumnsBy(this.isHideableColumn, this).length <= 1){
                        this.onDenyColumnHide();
                        return false;
                    }
                    cm.setHidden(index, item.checked);
                }
        }
        return true;
    },

    // private
    isHideableColumn : function(c){
        return !c.hidden;
    },

    // private
    beforeColMenuShow : function(){
        var cm = this.cm,  colCount = cm.getColumnCount();
        this.colMenu.removeAll();
        for(var i = 0; i < colCount; i++){
            if(cm.config[i].hideable !== false){
                this.colMenu.add(new Ext.menu.CheckItem({
                    itemId: 'col-'+cm.getColumnId(i),
                    text: cm.getColumnHeader(i),
                    checked: !cm.isHidden(i),
                    hideOnClick:false,
                    disabled: cm.config[i].hideable === false
                }));
            }
        }
    },

    // private
    handleHdDown : function(e, t){
        if(Ext.fly(t).hasClass('x-grid3-hd-btn')){
            e.stopEvent();
            var hd = this.findHeaderCell(t);
            Ext.fly(hd).addClass('x-grid3-hd-menu-open');
            var index = this.getCellIndex(hd);
            this.hdCtxIndex = index;
            var ms = this.hmenu.items, cm = this.cm;
            ms.get('asc').setDisabled(!cm.isSortable(index));
            ms.get('desc').setDisabled(!cm.isSortable(index));
            this.hmenu.on('hide', function(){
                Ext.fly(hd).removeClass('x-grid3-hd-menu-open');
            }, this, {single:true});
            this.hmenu.show(t, 'tl-bl?');
        }
    },

    // private
    handleHdOver : function(e, t){
        var hd = this.findHeaderCell(t);
        if(hd && !this.headersDisabled){
            this.activeHdRef = t;
            this.activeHdIndex = this.getCellIndex(hd);
            var fly = this.fly(hd);
            this.activeHdRegion = fly.getRegion();
            if(!this.cm.isMenuDisabled(this.activeHdIndex)){
                fly.addClass('x-grid3-hd-over');
                this.activeHdBtn = fly.child('.x-grid3-hd-btn');
                if(this.activeHdBtn){
                    this.activeHdBtn.dom.style.height = (hd.firstChild.offsetHeight-1)+'px';
                }
            }
        }
    },

    // private
    handleHdMove : function(e, t){
        var hd = this.findHeaderCell(this.activeHdRef);
        if(hd && !this.headersDisabled){
            var hw = this.splitHandleWidth || 5,
                r = this.activeHdRegion,
                x = e.getPageX(),
                ss = hd.style,
                cur = '';
            if(this.grid.enableColumnResize !== false){
                if(x - r.left <= hw && this.cm.isResizable(this.activeHdIndex-1)){
                    cur = Ext.isAir ? 'move' : Ext.isWebKit ? 'e-resize' : 'col-resize'; // col-resize not always supported
                }else if(r.right - x <= (!this.activeHdBtn ? hw : 2) && this.cm.isResizable(this.activeHdIndex)){
                    cur = Ext.isAir ? 'move' : Ext.isWebKit ? 'w-resize' : 'col-resize';
                }
            }
            ss.cursor = cur;
        }
    },

    // private
    handleHdOut : function(e, t){
        var hd = this.findHeaderCell(t);
        if(hd && (!Ext.isIE || !e.within(hd, true))){
            this.activeHdRef = null;
            this.fly(hd).removeClass('x-grid3-hd-over');
            hd.style.cursor = '';
        }
    },

    // private
    hasRows : function(){
        var fc = this.mainBody.dom.firstChild;
        return fc && fc.nodeType == 1 && fc.className != 'x-grid-empty';
    },

    // back compat
    bind : function(d, c){
        this.initData(d, c);
    }
});

// private
// This is a support class used internally by the Grid components
Ext.grid.GridView.SplitDragZone = Ext.extend(Ext.dd.DDProxy, {

    constructor: function(grid, hd){
        this.grid = grid;
        this.view = grid.getView();
        this.marker = this.view.resizeMarker;
        this.proxy = this.view.resizeProxy;
        Ext.grid.GridView.SplitDragZone.superclass.constructor.call(this, hd,
            'gridSplitters' + this.grid.getGridEl().id, {
            dragElId : Ext.id(this.proxy.dom), resizeFrame:false
        });
        this.scroll = false;
        this.hw = this.view.splitHandleWidth || 5;
    },

    b4StartDrag : function(x, y){
        this.dragHeadersDisabled = this.view.headersDisabled;
        this.view.headersDisabled = true;
        var h = this.view.mainWrap.getHeight();
        this.marker.setHeight(h);
        this.marker.show();
        this.marker.alignTo(this.view.getHeaderCell(this.cellIndex), 'tl-tl', [-2, 0]);
        this.proxy.setHeight(h);
        var w = this.cm.getColumnWidth(this.cellIndex),
            minw = Math.max(w-this.grid.minColumnWidth, 0);
        this.resetConstraints();
        this.setXConstraint(minw, 1000);
        this.setYConstraint(0, 0);
        this.minX = x - minw;
        this.maxX = x + 1000;
        this.startPos = x;
        Ext.dd.DDProxy.prototype.b4StartDrag.call(this, x, y);
    },

    allowHeaderDrag : function(e){
        return true;
    },

    handleMouseDown : function(e){
        var t = this.view.findHeaderCell(e.getTarget());
        if(t && this.allowHeaderDrag(e)){
            var xy = this.view.fly(t).getXY(),
                x = xy[0],
                y = xy[1];
                exy = e.getXY(), ex = exy[0],
                w = t.offsetWidth, adjust = false;

            if((ex - x) <= this.hw){
                adjust = -1;
            }else if((x+w) - ex <= this.hw){
                adjust = 0;
            }
            if(adjust !== false){
                this.cm = this.grid.colModel;
                var ci = this.view.getCellIndex(t);
                if(adjust == -1){
                  if (ci + adjust < 0) {
                    return;
                  }
                    while(this.cm.isHidden(ci+adjust)){
                        --adjust;
                        if(ci+adjust < 0){
                            return;
                        }
                    }
                }
                this.cellIndex = ci+adjust;
                this.split = t.dom;
                if(this.cm.isResizable(this.cellIndex) && !this.cm.isFixed(this.cellIndex)){
                    Ext.grid.GridView.SplitDragZone.superclass.handleMouseDown.apply(this, arguments);
                }
            }else if(this.view.columnDrag){
                this.view.columnDrag.callHandleMouseDown(e);
            }
        }
    },

    endDrag : function(e){
        this.marker.hide();
        var v = this.view,
            endX = Math.max(this.minX, e.getPageX()),
            diff = endX - this.startPos,
            disabled = this.dragHeadersDisabled;

        v.onColumnSplitterMoved(this.cellIndex, this.cm.getColumnWidth(this.cellIndex)+diff);
        setTimeout(function(){
            v.headersDisabled = disabled;
        }, 50);
    },

    autoOffset : function(){
        this.setDelta(0,0);
    }
});


The source code

/*!
 * licensing@extjs.com
 * http://www.extjs.com/license
 */

/**
 * @class Ext.data.GroupingStore
 * @extends Ext.data.Store
 * A specialized store implementation that provides for grouping records by one of the available fields. This
 * is usually used in conjunction with an {@link Ext.grid.GroupingView} to provide the data model for
 * a grouped GridPanel.
 *
 * Internally, GroupingStore is simply a normal Store with multi sorting enabled from the start. The grouping field
 * and direction are always injected as the first sorter pair. GroupingView picks up on the configured groupField and
 * builds grid rows appropriately.
 *
 * @constructor
 * Creates a new GroupingStore.
 * @param {Object} config A config object containing the objects needed for the Store to access data,
 * and read the data into Records.
 * @xtype groupingstore
 */
Ext.data.GroupingStore = Ext.extend(Ext.data.Store, {

    //inherit docs
    constructor: function(config) {
        config = config || {};

        //We do some preprocessing here to massage the grouping + sorting options into a single
        //multi sort array. If grouping and sorting options are both presented to the constructor,
        //the sorters array consists of the grouping sorter object followed by the sorting sorter object
        //see Ext.data.Store's sorting functions for details about how multi sorting works
        this.hasMultiSort  = true;
        this.multiSortInfo = this.multiSortInfo || {sorters: []};

        var sorters    = this.multiSortInfo.sorters,
            groupField = config.groupField || this.groupField,
            sortInfo   = config.sortInfo || this.sortInfo,
            groupDir   = config.groupDir || this.groupDir;

        //add the grouping sorter object first
        if(groupField){
            sorters.push({
                field    : groupField,
                direction: groupDir
            });
        }

        //add the sorting sorter object if it is present
        if (sortInfo) {
            sorters.push(sortInfo);
        }

        Ext.data.GroupingStore.superclass.constructor.call(this, config);

        this.addEvents(

/**
           * @event groupchange
           * Fired whenever a call to store.groupBy successfully changes the grouping on the store
           * @param {Ext.data.GroupingStore} store The grouping store
           * @param {String} groupField The field that the store is now grouped by
           */
          'groupchange'
        );

        this.applyGroupField();
    },

/**
     * @cfg {String} groupField
     * The field name by which to sort the store's data (defaults to '').
     */

/**
     * @cfg {Boolean} remoteGroup
     * True if the grouping should apply on the server side, false if it is local only (defaults to false).  If the
     * grouping is local, it can be applied immediately to the data.  If it is remote, then it will simply act as a
     * helper, automatically sending the grouping field name as the 'groupBy' param with each XHR call.
     */
    remoteGroup : false,

/**
     * @cfg {Boolean} groupOnSort
     * True to sort the data on the grouping field when a grouping operation occurs, false to sort based on the
     * existing sort info (defaults to false).
     */
    groupOnSort:false,

    groupDir : 'ASC',

/**
     * Clears any existing grouping and refreshes the data using the default sort.
     */
    clearGrouping : function(){
        this.groupField = false;

        if(this.remoteGroup){
            if(this.baseParams){
                delete this.baseParams.groupBy;
                delete this.baseParams.groupDir;
            }
            var lo = this.lastOptions;
            if(lo && lo.params){
                delete lo.params.groupBy;
                delete lo.params.groupDir;
            }

            this.reload();
        }else{
            this.sort();
            this.fireEvent('datachanged', this);
        }
    },

/**
     * Groups the data by the specified field.
     * @param {String} field The field name by which to sort the store's data
     * @param {Boolean} forceRegroup (optional) True to force the group to be refreshed even if the field passed
     * in is the same as the current grouping field, false to skip grouping on the same field (defaults to false)
     */
    groupBy : function(field, forceRegroup, direction) {
        direction = direction ? (String(direction).toUpperCase() == 'DESC' ? 'DESC' : 'ASC') : this.groupDir;

        if (this.groupField == field && this.groupDir == direction && !forceRegroup) {
            return; // already grouped by this field
        }

        //check the contents of the first sorter. If the field matches the CURRENT groupField (before it is set to the new one),
        //remove the sorter as it is actually the grouper. The new grouper is added back in by this.sort
        sorters = this.multiSortInfo.sorters;
        if (sorters.length > 0 && sorters[0].field == this.groupField) {
            sorters.shift();
        }

        this.groupField = field;
        this.groupDir = direction;
        this.applyGroupField();

        var fireGroupEvent = function() {
            this.fireEvent('groupchange', this, this.getGroupState());
        };

        if (this.groupOnSort) {
            this.sort(field, direction);
            fireGroupEvent.call(this);
            return;
        }

        if (this.remoteGroup) {
            this.on('load', fireGroupEvent, this, {single: true});
            this.reload();
        } else {
            this.sort(sorters);
            fireGroupEvent.call(this);
        }
    },

    //GroupingStore always uses multisorting so we intercept calls to sort here to make sure that our grouping sorter object
    //is always injected first.
    sort : function(fieldName, dir) {
        if (this.remoteSort) {
            return Ext.data.GroupingStore.superclass.sort.call(this, fieldName, dir);
        }

        var sorters = [];

        //cater for any existing valid arguments to this.sort, massage them into an array of sorter objects
        if (Ext.isArray(arguments[0])) {
            sorters = arguments[0];
        } else if (fieldName == undefined) {
            //we preserve the existing sortInfo here because this.sort is called after
            //clearGrouping and there may be existing sorting
            sorters = [this.sortInfo];
        } else {
            //TODO: this is lifted straight from Ext.data.Store's singleSort function. It should instead be
            //refactored into a common method if possible
            var field = this.fields.get(fieldName);
            if (!field) return false;

            var name       = field.name,
                sortInfo   = this.sortInfo || null,
                sortToggle = this.sortToggle ? this.sortToggle[name] : null;

            if (!dir) {
                if (sortInfo && sortInfo.field == name) { // toggle sort dir
                    dir = (this.sortToggle[name] || 'ASC').toggle('ASC', 'DESC');
                } else {
                    dir = field.sortDir;
                }
            }

            this.sortToggle[name] = dir;
            this.sortInfo = {field: name, direction: dir};

            sorters = [this.sortInfo];
        }

        //add the grouping sorter object as the first multisort sorter
        if (this.groupField) {
            sorters.unshift({direction: this.groupDir, field: this.groupField});
        }

        return this.multiSort.call(this, sorters, dir);
    },

    /**
     * @private
     * Saves the current grouping field and direction to this.baseParams and this.lastOptions.params
     * if we're using remote grouping. Does not actually perform any grouping - just stores values
     */
    applyGroupField: function(){
        if (this.remoteGroup) {
            if(!this.baseParams){
                this.baseParams = {};
            }

            Ext.apply(this.baseParams, {
                groupBy : this.groupField,
                groupDir: this.groupDir
            });

            var lo = this.lastOptions;
            if (lo && lo.params) {
                lo.params.groupDir = this.groupDir;

                //this is deleted because of a bug reported at http://www.extjs.com/forum/showthread.php?t=82907
                delete lo.params.groupBy;
            }
        }
    },

    /**
     * @private
     * TODO: This function is apparently never invoked anywhere in the framework. It has no documentation
     * and should be considered for deletion
     */
    applyGrouping : function(alwaysFireChange){
        if(this.groupField !== false){
            this.groupBy(this.groupField, true, this.groupDir);
            return true;
        }else{
            if(alwaysFireChange === true){
                this.fireEvent('datachanged', this);
            }
            return false;
        }
    },

    /**
     * @private
     * Returns the grouping field that should be used. If groupOnSort is used this will be sortInfo's field,
     * otherwise it will be this.groupField
     * @return {String} The group field
     */
    getGroupState : function(){
        return this.groupOnSort && this.groupField !== false ?
               (this.sortInfo ? this.sortInfo.field : undefined) : this.groupField;
    }
});
Ext.reg('groupingstore', Ext.data.GroupingStore);


The source code

/*!
 * licensing@extjs.com
 * http://www.extjs.com/license
 */

/**
 * @class Ext.grid.GroupingView
 * @extends Ext.grid.GridView
 * Adds the ability for single level grouping to the grid. A {@link Ext.data.GroupingStore GroupingStore}
 * must be used to enable grouping.  Some grouping characteristics may also be configured at the
 * {@link Ext.grid.Column Column level}

 *
  • {@link Ext.grid.Column#emptyGroupText emptyGroupText}
    •
 *
  • {@link Ext.grid.Column#groupable groupable}
    •
 *
  • {@link Ext.grid.Column#groupName groupName}
    •
 *
  • {@link Ext.grid.Column#groupRender groupRender}
    •
 *

 *
Sample usage:

 *

var grid = new Ext.grid.GridPanel({
    // A groupingStore is required for a GroupingView
    store: new {@link Ext.data.GroupingStore}({
        autoDestroy: true,
        reader: reader,
        data: xg.dummyData,
        sortInfo: {field: 'company', direction: 'ASC'},
        {@link Ext.data.GroupingStore#groupOnSort groupOnSort}: true,
        {@link Ext.data.GroupingStore#remoteGroup remoteGroup}: true,
        {@link Ext.data.GroupingStore#groupField groupField}: 'industry'
    }),
    colModel: new {@link Ext.grid.ColumnModel}({
        columns:[
            {id:'company',header: 'Company', width: 60, dataIndex: 'company'},
            // {@link Ext.grid.Column#groupable groupable}, {@link Ext.grid.Column#groupName groupName}, {@link Ext.grid.Column#groupRender groupRender} are also configurable at column level
            {header: 'Price', renderer: Ext.util.Format.usMoney, dataIndex: 'price', {@link Ext.grid.Column#groupable groupable}: false},
            {header: 'Change', dataIndex: 'change', renderer: Ext.util.Format.usMoney},
            {header: 'Industry', dataIndex: 'industry'},
            {header: 'Last Updated', renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}
        ],
        defaults: {
            sortable: true,
            menuDisabled: false,
            width: 20
        }
    }),

    view: new Ext.grid.GroupingView({
        {@link Ext.grid.GridView#forceFit forceFit}: true,
        // custom grouping text template to display the number of items per group
        {@link #groupTextTpl}: '{text} ({[values.rs.length]} {[values.rs.length > 1 ? "Items" : "Item"]})'
    }),

    frame:true,
    width: 700,
    height: 450,
    collapsible: true,
    animCollapse: false,
    title: 'Grouping Example',
    iconCls: 'icon-grid',
    renderTo: document.body
});
 *

 * @constructor
 * @param {Object} config
 */
Ext.grid.GroupingView = Ext.extend(Ext.grid.GridView, {

/**
     * @cfg {String} groupByText Text displayed in the grid header menu for grouping by a column
     * (defaults to 'Group By This Field').
     */
    groupByText : 'Group By This Field',

/**
     * @cfg {String} showGroupsText Text displayed in the grid header for enabling/disabling grouping
     * (defaults to 'Show in Groups').
     */
    showGroupsText : 'Show in Groups',

/**
     * @cfg {Boolean} hideGroupedColumn true to hide the column that is currently grouped (defaults to false)
     */
    hideGroupedColumn : false,

/**
     * @cfg {Boolean} showGroupName If true will display a prefix plus a ': ' before the group field value
     * in the group header line.  The prefix will consist of the {@link Ext.grid.Column#groupName groupName}
     * (or the configured {@link Ext.grid.Column#header header} if not provided) configured in the
     * {@link Ext.grid.Column} for each set of grouped rows (defaults to true).
     */
    showGroupName : true,

/**
     * @cfg {Boolean} startCollapsed true to start all groups collapsed (defaults to false)
     */
    startCollapsed : false,

/**
     * @cfg {Boolean} enableGrouping false to disable grouping functionality (defaults to true)
     */
    enableGrouping : true,

/**
     * @cfg {Boolean} enableGroupingMenu true to enable the grouping control in the column menu (defaults to true)
     */
    enableGroupingMenu : true,

/**
     * @cfg {Boolean} enableNoGroups true to allow the user to turn off grouping (defaults to true)
     */
    enableNoGroups : true,

/**
     * @cfg {String} emptyGroupText The text to display when there is an empty group value (defaults to '(None)').
     * May also be specified per column, see {@link Ext.grid.Column}.{@link Ext.grid.Column#emptyGroupText emptyGroupText}.
     */
    emptyGroupText : '(None)',

/**
     * @cfg {Boolean} ignoreAdd true to skip refreshing the view when new rows are added (defaults to false)
     */
    ignoreAdd : false,

/**
     * @cfg {String} groupTextTpl The template used to render the group header (defaults to '{text}').
     * This is used to format an object which contains the following properties:
     *

     *
  • group : String
    The rendered value of the group field.
     * By default this is the unchanged value of the group field. If a {@link Ext.grid.Column#groupRenderer groupRenderer}
     * is specified, it is the result of a call to that function.
    •
     *
  • gvalue : Object
    The raw value of the group field.
    •
     *
  • text : String
    The configured header (as described in {@link #showGroupName})
     * if {@link #showGroupName} is true) plus the rendered group field value.
    •
     *
  • groupId : String
    A unique, generated ID which is applied to the
     * View Element which contains the group.
    •
     *
  • startRow : Number
    The row index of the Record which caused group change.
    •
     *
  • rs : Array
    Contains a single element: The Record providing the data
     * for the row which caused group change.
    •
     *
  • cls : String
    The generated class name string to apply to the group header Element.
    •
     *
  • style : String
    The inline style rules to apply to the group header Element.
    •
     *

     * See {@link Ext.XTemplate} for information on how to format data using a template. Possible usage:

var grid = new Ext.grid.GridPanel({
    ...
    view: new Ext.grid.GroupingView({
        groupTextTpl: '{text} ({[values.rs.length]} {[values.rs.length > 1 ? "Items" : "Item"]})'
    }),
});
     *

     */
    groupTextTpl : '{text}',

/**
     * @cfg {String} groupMode Indicates how to construct the group identifier. 'value' constructs the id using
     * raw value, 'display' constructs the id using the rendered value. Defaults to 'value'.
     */
    groupMode: 'value',

/**
     * @cfg {Function} groupRenderer This property must be configured in the {@link Ext.grid.Column} for
     * each column.
     */

    // private
    initTemplates : function(){
        Ext.grid.GroupingView.superclass.initTemplates.call(this);
        this.state = {};

        var sm = this.grid.getSelectionModel();
        sm.on(sm.selectRow ? 'beforerowselect' : 'beforecellselect',
                this.onBeforeRowSelect, this);

        if(!this.startGroup){
            this.startGroup = new Ext.XTemplate(
                '
',
                    '
', this.groupTextTpl ,'
',
                    '
'
            );
        }
        this.startGroup.compile();

        if (!this.endGroup) {
            this.endGroup = '
';
        }
    },

    // private
    findGroup : function(el){
        return Ext.fly(el).up('.x-grid-group', this.mainBody.dom);
    },

    // private
    getGroups : function(){
        return this.hasRows() ? this.mainBody.dom.childNodes : [];
    },

    // private
    onAdd : function(ds, records, index) {
        if (this.canGroup() && !this.ignoreAdd) {
            var ss = this.getScrollState();
            this.fireEvent('beforerowsinserted', ds, index, index + (records.length-1));
            this.refresh();
            this.restoreScroll(ss);
            this.fireEvent('rowsinserted', ds, index, index + (records.length-1));
        } else if (!this.canGroup()) {
            Ext.grid.GroupingView.superclass.onAdd.apply(this, arguments);
        }
    },

    // private
    onRemove : function(ds, record, index, isUpdate){
        Ext.grid.GroupingView.superclass.onRemove.apply(this, arguments);
        var g = document.getElementById(record._groupId);
        if(g && g.childNodes[1].childNodes.length < 1){
            Ext.removeNode(g);
        }
        this.applyEmptyText();
    },

    // private
    refreshRow : function(record){
        if(this.ds.getCount()==1){
            this.refresh();
        }else{
            this.isUpdating = true;
            Ext.grid.GroupingView.superclass.refreshRow.apply(this, arguments);
            this.isUpdating = false;
        }
    },

    // private
    beforeMenuShow : function(){
        var item, items = this.hmenu.items, disabled = this.cm.config[this.hdCtxIndex].groupable === false;
        if((item = items.get('groupBy'))){
            item.setDisabled(disabled);
        }
        if((item = items.get('showGroups'))){
            item.setDisabled(disabled);
            item.setChecked(this.enableGrouping, true);
        }
    },

    // private
    renderUI : function(){
        Ext.grid.GroupingView.superclass.renderUI.call(this);
        this.mainBody.on('mousedown', this.interceptMouse, this);

        if(this.enableGroupingMenu && this.hmenu){
            this.hmenu.add('-',{
                itemId:'groupBy',
                text: this.groupByText,
                handler: this.onGroupByClick,
                scope: this,
                iconCls:'x-group-by-icon'
            });
            if(this.enableNoGroups){
                this.hmenu.add({
                    itemId:'showGroups',
                    text: this.showGroupsText,
                    checked: true,
                    checkHandler: this.onShowGroupsClick,
                    scope: this
                });
            }
            this.hmenu.on('beforeshow', this.beforeMenuShow, this);
        }
    },

    processEvent: function(name, e){
        Ext.grid.GroupingView.superclass.processEvent.call(this, name, e);
        var hd = e.getTarget('.x-grid-group-hd', this.mainBody);
        if(hd){
            // group value is at the end of the string
            var field = this.getGroupField(),
                prefix = this.getPrefix(field),
                groupValue = hd.id.substring(prefix.length);

            // remove trailing '-hd'
            groupValue = groupValue.substr(0, groupValue.length - 3);
            if(groupValue){
                this.grid.fireEvent('group' + name, this.grid, field, groupValue, e);
            }
        }

    },

    // private
    onGroupByClick : function(){
        this.enableGrouping = true;
        this.grid.store.groupBy(this.cm.getDataIndex(this.hdCtxIndex));
        this.grid.fireEvent('groupchange', this, this.grid.store.getGroupState());
        this.beforeMenuShow(); // Make sure the checkboxes get properly set when changing groups
        this.refresh();
    },

    // private
    onShowGroupsClick : function(mi, checked){
        this.enableGrouping = checked;
        if(checked){
            this.onGroupByClick();
        }else{
            this.grid.store.clearGrouping();
            this.grid.fireEvent('groupchange', this, null);
        }
    },

/**
     * Toggle the group that contains the specific row.
     * @param {Number} rowIndex The row inside the group
     * @param {Boolean} expanded (optional)
     */
    toggleRowIndex : function(rowIndex, expanded){
        if(!this.canGroup()){
            return;
        }
        var row = this.getRow(rowIndex);
        if(row){
            this.toggleGroup(this.findGroup(row), expanded);
        }
    },

/**
     * Toggles the specified group if no value is passed, otherwise sets the expanded state of the group to the value passed.
     * @param {String} groupId The groupId assigned to the group (see getGroupId)
     * @param {Boolean} expanded (optional)
     */
    toggleGroup : function(group, expanded){
        var gel = Ext.get(group);
        expanded = Ext.isDefined(expanded) ? expanded : gel.hasClass('x-grid-group-collapsed');
        if(this.state[gel.id] !== expanded){
            this.grid.stopEditing(true);
            this.state[gel.id] = expanded;
            gel[expanded ? 'removeClass' : 'addClass']('x-grid-group-collapsed');
        }
    },

/**
     * Toggles all groups if no value is passed, otherwise sets the expanded state of all groups to the value passed.
     * @param {Boolean} expanded (optional)
     */
    toggleAllGroups : function(expanded){
        var groups = this.getGroups();
        for(var i = 0, len = groups.length; i < len; i++){
            this.toggleGroup(groups[i], expanded);
        }
    },

/**
     * Expands all grouped rows.
     */
    expandAllGroups : function(){
        this.toggleAllGroups(true);
    },

/**
     * Collapses all grouped rows.
     */
    collapseAllGroups : function(){
        this.toggleAllGroups(false);
    },

    // private
    interceptMouse : function(e){
        var hd = e.getTarget('.x-grid-group-hd', this.mainBody);
        if(hd){
            e.stopEvent();
            this.toggleGroup(hd.parentNode);
        }
    },

    // private
    getGroup : function(v, r, groupRenderer, rowIndex, colIndex, ds){
        var g = groupRenderer ? groupRenderer(v, {}, r, rowIndex, colIndex, ds) : String(v);
        if(g === '' || g === ' '){
            g = this.cm.config[colIndex].emptyGroupText || this.emptyGroupText;
        }
        return g;
    },

    // private
    getGroupField : function(){
        return this.grid.store.getGroupState();
    },

    // private
    afterRender : function(){
        if(!this.ds || !this.cm){
            return;
        }
        Ext.grid.GroupingView.superclass.afterRender.call(this);
        if(this.grid.deferRowRender){
            this.updateGroupWidths();
        }
    },

    // private
    renderRows : function(){
        var groupField = this.getGroupField();
        var eg = !!groupField;
        // if they turned off grouping and the last grouped field is hidden
        if(this.hideGroupedColumn) {
            var colIndex = this.cm.findColumnIndex(groupField),
                hasLastGroupField = Ext.isDefined(this.lastGroupField);
            if(!eg && hasLastGroupField){
                this.mainBody.update('');
                this.cm.setHidden(this.cm.findColumnIndex(this.lastGroupField), false);
                delete this.lastGroupField;
            }else if (eg && !hasLastGroupField){
                this.lastGroupField = groupField;
                this.cm.setHidden(colIndex, true);
            }else if (eg && hasLastGroupField && groupField !== this.lastGroupField) {
                this.mainBody.update('');
                var oldIndex = this.cm.findColumnIndex(this.lastGroupField);
                this.cm.setHidden(oldIndex, false);
                this.lastGroupField = groupField;
                this.cm.setHidden(colIndex, true);
            }
        }
        return Ext.grid.GroupingView.superclass.renderRows.apply(
                    this, arguments);
    },

    // private
    doRender : function(cs, rs, ds, startRow, colCount, stripe){
        if(rs.length < 1){
            return '';
        }

        if(!this.canGroup() || this.isUpdating){
            return Ext.grid.GroupingView.superclass.doRender.apply(this, arguments);
        }

        var groupField = this.getGroupField(),
            colIndex = this.cm.findColumnIndex(groupField),
            g,
            gstyle = 'width:' + this.getTotalWidth() + ';',
            cfg = this.cm.config[colIndex],
            groupRenderer = cfg.groupRenderer || cfg.renderer,
            prefix = this.showGroupName ? (cfg.groupName || cfg.header)+': ' : '',
            groups = [],
            curGroup, i, len, gid;

        for(i = 0, len = rs.length; i < len; i++){
            var rowIndex = startRow + i,
                r = rs[i],
                gvalue = r.data[groupField];

                g = this.getGroup(gvalue, r, groupRenderer, rowIndex, colIndex, ds);
            if(!curGroup || curGroup.group != g){
                gid = this.constructId(gvalue, groupField, colIndex);
                // if state is defined use it, however state is in terms of expanded
                // so negate it, otherwise use the default.
                this.state[gid] = !(Ext.isDefined(this.state[gid]) ? !this.state[gid] : this.startCollapsed);
                curGroup = {
                    group: g,
                    gvalue: gvalue,
                    text: prefix + g,
                    groupId: gid,
                    startRow: rowIndex,
                    rs: [r],
                    cls: this.state[gid] ? '' : 'x-grid-group-collapsed',
                    style: gstyle
                };
                groups.push(curGroup);
            }else{
                curGroup.rs.push(r);
            }
            r._groupId = gid;
        }

        var buf = [];
        for(i = 0, len = groups.length; i < len; i++){
            g = groups[i];
            this.doGroupStart(buf, g, cs, ds, colCount);
            buf[buf.length] = Ext.grid.GroupingView.superclass.doRender.call(
                    this, cs, g.rs, ds, g.startRow, colCount, stripe);

            this.doGroupEnd(buf, g, cs, ds, colCount);
        }
        return buf.join('');
    },

/**
     * Dynamically tries to determine the groupId of a specific value
     * @param {String} value
     * @return {String} The group id
     */
    getGroupId : function(value){
        var field = this.getGroupField();
        return this.constructId(value, field, this.cm.findColumnIndex(field));
    },

    // private
    constructId : function(value, field, idx){
        var cfg = this.cm.config[idx],
            groupRenderer = cfg.groupRenderer || cfg.renderer,
            val = (this.groupMode == 'value') ? value : this.getGroup(value, {data:{}}, groupRenderer, 0, idx, this.ds);

        return this.getPrefix(field) + Ext.util.Format.htmlEncode(val);
    },

    // private
    canGroup  : function(){
        return this.enableGrouping && !!this.getGroupField();
    },

    // private
    getPrefix: function(field){
        return this.grid.getGridEl().id + '-gp-' + field + '-';
    },

    // private
    doGroupStart : function(buf, g, cs, ds, colCount){
        buf[buf.length] = this.startGroup.apply(g);
    },

    // private
    doGroupEnd : function(buf, g, cs, ds, colCount){
        buf[buf.length] = this.endGroup;
    },

    // private
    getRows : function(){
        if(!this.canGroup()){
            return Ext.grid.GroupingView.superclass.getRows.call(this);
        }
        var r = [],
            gs = this.getGroups(),
            g,
            i = 0,
            len = gs.length,
            j,
            jlen;
        for(; i < len; ++i){
            g = gs[i].childNodes[1];
            if(g){
                g = g.childNodes;
                for(j = 0, jlen = g.length; j < jlen; ++j){
                    r[r.length] = g[j];
                }
            }
        }
        return r;
    },

    // private
    updateGroupWidths : function(){
        if(!this.canGroup() || !this.hasRows()){
            return;
        }
        var tw = Math.max(this.cm.getTotalWidth(), this.el.dom.offsetWidth-this.getScrollOffset()) +'px';
        var gs = this.getGroups();
        for(var i = 0, len = gs.length; i < len; i++){
            gs[i].firstChild.style.width = tw;
        }
    },

    // private
    onColumnWidthUpdated : function(col, w, tw){
        Ext.grid.GroupingView.superclass.onColumnWidthUpdated.call(this, col, w, tw);
        this.updateGroupWidths();
    },

    // private
    onAllColumnWidthsUpdated : function(ws, tw){
        Ext.grid.GroupingView.superclass.onAllColumnWidthsUpdated.call(this, ws, tw);
        this.updateGroupWidths();
    },

    // private
    onColumnHiddenUpdated : function(col, hidden, tw){
        Ext.grid.GroupingView.superclass.onColumnHiddenUpdated.call(this, col, hidden, tw);
        this.updateGroupWidths();
    },

    // private
    onLayout : function(){
        this.updateGroupWidths();
    },

    // private
    onBeforeRowSelect : function(sm, rowIndex){
        this.toggleRowIndex(rowIndex, true);
    }
});
// private
Ext.grid.GroupingView.GROUP_ID = 1000;


The source code

/*!
 * licensing@extjs.com
 * http://www.extjs.com/license
 */

/**
 * @class Ext.form.Hidden
 * @extends Ext.form.Field
 * A basic hidden field for storing hidden values in forms that need to be passed in the form submit.
 * @constructor
 * Create a new Hidden field.
 * @param {Object} config Configuration options
 * @xtype hidden
 */
Ext.form.Hidden = Ext.extend(Ext.form.Field, {
    // private
    inputType : 'hidden',

    // private
    onRender : function(){
        Ext.form.Hidden.superclass.onRender.apply(this, arguments);
    },

    // private
    initEvents : function(){
        this.originalValue = this.getValue();
    },

    // These are all private overrides
    setSize : Ext.emptyFn,
    setWidth : Ext.emptyFn,
    setHeight : Ext.emptyFn,
    setPosition : Ext.emptyFn,
    setPagePosition : Ext.emptyFn,
    markInvalid : Ext.emptyFn,
    clearInvalid : Ext.emptyFn
});
Ext.reg('hidden', Ext.form.Hidden);


The source code

/*!
 * licensing@extjs.com
 * http://www.extjs.com/license
 */

/**
 * @class Ext.History
 * @extends Ext.util.Observable
 * History management component that allows you to register arbitrary tokens that signify application
 * history state on navigation actions.  You can then handle the history {@link #change} event in order
 * to reset your application UI to the appropriate state when the user navigates forward or backward through
 * the browser history stack.
 * @singleton
 */
Ext.History = (function () {
    var iframe, hiddenField;
    var ready = false;
    var currentToken;

    function getHash() {
        var href = top.location.href, i = href.indexOf("#");
        return i >= 0 ? href.substr(i + 1) : null;
    }

    function doSave() {
        hiddenField.value = currentToken;
    }

    function handleStateChange(token) {
        currentToken = token;
        Ext.History.fireEvent('change', token);
    }

    function updateIFrame (token) {
        var html = ['
',Ext.util.Format.htmlEncode(token),'
'].join('');
        try {
            var doc = iframe.contentWindow.document;
            doc.open();
            doc.write(html);
            doc.close();
            return true;
        } catch (e) {
            return false;
        }
    }

    function checkIFrame() {
        if (!iframe.contentWindow || !iframe.contentWindow.document) {
            setTimeout(checkIFrame, 10);
            return;
        }

        var doc = iframe.contentWindow.document;
        var elem = doc.getElementById("state");
        var token = elem ? elem.innerText : null;

        var hash = getHash();

        setInterval(function () {

            doc = iframe.contentWindow.document;
            elem = doc.getElementById("state");

            var newtoken = elem ? elem.innerText : null;

            var newHash = getHash();

            if (newtoken !== token) {
                token = newtoken;
                handleStateChange(token);
                top.location.hash = token;
                hash = token;
                doSave();
            } else if (newHash !== hash) {
                hash = newHash;
                updateIFrame(newHash);
            }

        }, 50);

        ready = true;

        Ext.History.fireEvent('ready', Ext.History);
    }

    function startUp() {
        currentToken = hiddenField.value ? hiddenField.value : getHash();

        if (Ext.isIE) {
            checkIFrame();
        } else {
            var hash = getHash();
            setInterval(function () {
                var newHash = getHash();
                if (newHash !== hash) {
                    hash = newHash;
                    handleStateChange(hash);
                    doSave();
                }
            }, 50);
            ready = true;
            Ext.History.fireEvent('ready', Ext.History);
        }
    }

    return {

/**
         * The id of the hidden field required for storing the current history token.
         * @type String
         * @property
         */
        fieldId: 'x-history-field',

/**
         * The id of the iframe required by IE to manage the history stack.
         * @type String
         * @property
         */
        iframeId: 'x-history-frame',

        events:{},

/**
         * Initialize the global History instance.
         * @param {Boolean} onReady (optional) A callback function that will be called once the history
         * component is fully initialized.
         * @param {Object} scope (optional) The scope (this reference) in which the callback is executed. Defaults to the browser window.
         */
        init: function (onReady, scope) {
            if(ready) {
                Ext.callback(onReady, scope, [this]);
                return;
            }
            if(!Ext.isReady){
                Ext.onReady(function(){
                    Ext.History.init(onReady, scope);
                });
                return;
            }
            hiddenField = Ext.getDom(Ext.History.fieldId);
            if (Ext.isIE) {
                iframe = Ext.getDom(Ext.History.iframeId);
            }
            this.addEvents(

/**
                 * @event ready
                 * Fires when the Ext.History singleton has been initialized and is ready for use.
                 * @param {Ext.History} The Ext.History singleton.
                 */
                'ready',

/**
                 * @event change
                 * Fires when navigation back or forwards within the local page's history occurs.
                 * @param {String} token An identifier associated with the page state at that point in its history.
                 */
                'change'
            );
            if(onReady){
                this.on('ready', onReady, scope, {single:true});
            }
            startUp();
        },

/**
         * Add a new token to the history stack. This can be any arbitrary value, although it would
         * commonly be the concatenation of a component id and another id marking the specifc history
         * state of that component.  Example usage:
         *

// Handle tab changes on a TabPanel
tabPanel.on('tabchange', function(tabPanel, tab){
    Ext.History.add(tabPanel.id + ':' + tab.id);
});

         * @param {String} token The value that defines a particular application-specific history state
         * @param {Boolean} preventDuplicates When true, if the passed token matches the current token
         * it will not save a new history step. Set to false if the same state can be saved more than once
         * at the same history stack location (defaults to true).
         */
        add: function (token, preventDup) {
            if(preventDup !== false){
                if(this.getToken() == token){
                    return true;
                }
            }
            if (Ext.isIE) {
                return updateIFrame(token);
            } else {
                top.location.hash = token;
                return true;
            }
        },

/**
         * Programmatically steps back one step in browser history (equivalent to the user pressing the Back button).
         */
        back: function(){
            history.go(-1);
        },

/**
         * Programmatically steps forward one step in browser history (equivalent to the user pressing the Forward button).
         */
        forward: function(){
            history.go(1);
        },

/**
         * Retrieves the currently-active history token.
         * @return {String} The token
         */
        getToken: function() {
            return ready ? currentToken : getHash();
        }
    };
})();
Ext.apply(Ext.History, new Ext.util.Observable());


The source code

/*!
 * licensing@extjs.com
 * http://www.extjs.com/license
 */

/**
 * @class Ext.form.HtmlEditor
 * @extends Ext.form.Field
 * Provides a lightweight HTML Editor component. Some toolbar features are not supported by Safari and will be
 * automatically hidden when needed.  These are noted in the config options where appropriate.
 *

The editor's toolbar buttons have tooltips defined in the {@link #buttonTips} property, but they are not
 * enabled by default unless the global {@link Ext.QuickTips} singleton is {@link Ext.QuickTips#init initialized}.
 *

Note: The focus/blur and validation marking functionality inherited from Ext.form.Field is NOT
 * supported by this editor.
 *

An Editor is a sensitive component that can't be used in all spots standard fields can be used. Putting an Editor within
 * any element that has display set to 'none' can cause problems in Safari and Firefox due to their default iframe reloading bugs.
 *

Example usage:
 *

// Simple example rendered with default options:
Ext.QuickTips.init();  // enable tooltips
new Ext.form.HtmlEditor({
    renderTo: Ext.getBody(),
    width: 800,
    height: 300
});

// Passed via xtype into a container and with custom options:
Ext.QuickTips.init();  // enable tooltips
new Ext.Panel({
    title: 'HTML Editor',
    renderTo: Ext.getBody(),
    width: 600,
    height: 300,
    frame: true,
    layout: 'fit',
    items: {
        xtype: 'htmleditor',
        enableColors: false,
        enableAlignments: false
    }
});

 * @constructor
 * Create a new HtmlEditor
 * @param {Object} config
 * @xtype htmleditor
 */

Ext.form.HtmlEditor = Ext.extend(Ext.form.Field, {

/**
     * @cfg {Boolean} enableFormat Enable the bold, italic and underline buttons (defaults to true)
     */
    enableFormat : true,

/**
     * @cfg {Boolean} enableFontSize Enable the increase/decrease font size buttons (defaults to true)
     */
    enableFontSize : true,

/**
     * @cfg {Boolean} enableColors Enable the fore/highlight color buttons (defaults to true)
     */
    enableColors : true,

/**
     * @cfg {Boolean} enableAlignments Enable the left, center, right alignment buttons (defaults to true)
     */
    enableAlignments : true,

/**
     * @cfg {Boolean} enableLists Enable the bullet and numbered list buttons. Not available in Safari. (defaults to true)
     */
    enableLists : true,

/**
     * @cfg {Boolean} enableSourceEdit Enable the switch to source edit button. Not available in Safari. (defaults to true)
     */
    enableSourceEdit : true,

/**
     * @cfg {Boolean} enableLinks Enable the create link button. Not available in Safari. (defaults to true)
     */
    enableLinks : true,

/**
     * @cfg {Boolean} enableFont Enable font selection. Not available in Safari. (defaults to true)
     */
    enableFont : true,

/**
     * @cfg {String} createLinkText The default text for the create link prompt
     */
    createLinkText : 'Please enter the URL for the link:',

/**
     * @cfg {String} defaultLinkValue The default value for the create link prompt (defaults to http:/ /)
     */
    defaultLinkValue : 'http:/'+'/',

/**
     * @cfg {Array} fontFamilies An array of available font families
     */
    fontFamilies : [
        'Arial',
        'Courier New',
        'Tahoma',
        'Times New Roman',
        'Verdana'
    ],
    defaultFont: 'tahoma',

/**
     * @cfg {String} defaultValue A default value to be put into the editor to resolve focus issues (defaults to   (Non-breaking space) in Opera and IE6, ​ (Zero-width space) in all other browsers).
     */
    defaultValue: (Ext.isOpera || Ext.isIE6) ? ' ' : '​',

    // private properties
    actionMode: 'wrap',
    validationEvent : false,
    deferHeight: true,
    initialized : false,
    activated : false,
    sourceEditMode : false,
    onFocus : Ext.emptyFn,
    iframePad:3,
    hideMode:'offsets',
    defaultAutoCreate : {
        tag: "textarea",
        style:"width:500px;height:300px;",
        autocomplete: "off"
    },

    // private
    initComponent : function(){
        this.addEvents(

/**
             * @event initialize
             * Fires when the editor is fully initialized (including the iframe)
             * @param {HtmlEditor} this
             */
            'initialize',

/**
             * @event activate
             * Fires when the editor is first receives the focus. Any insertion must wait
             * until after this event.
             * @param {HtmlEditor} this
             */
            'activate',

/**
             * @event beforesync
             * Fires before the textarea is updated with content from the editor iframe. Return false
             * to cancel the sync.
             * @param {HtmlEditor} this
             * @param {String} html
             */
            'beforesync',

/**
             * @event beforepush
             * Fires before the iframe editor is updated with content from the textarea. Return false
             * to cancel the push.
             * @param {HtmlEditor} this
             * @param {String} html
             */
            'beforepush',

/**
             * @event sync
             * Fires when the textarea is updated with content from the editor iframe.
             * @param {HtmlEditor} this
             * @param {String} html
             */
            'sync',

/**
             * @event push
             * Fires when the iframe editor is updated with content from the textarea.
             * @param {HtmlEditor} this
             * @param {String} html
             */
            'push',

/**
             * @event editmodechange
             * Fires when the editor switches edit modes
             * @param {HtmlEditor} this
             * @param {Boolean} sourceEdit True if source edit, false if standard editing.
             */
            'editmodechange'
        );
    },

    // private
    createFontOptions : function(){
        var buf = [], fs = this.fontFamilies, ff, lc;
        for(var i = 0, len = fs.length; i< len; i++){
            ff = fs[i];
            lc = ff.toLowerCase();
            buf.push(
                ''
            );
        }
        return buf.join('');
    },

    /*
     * Protected method that will not generally be called directly. It
     * is called when the editor creates its toolbar. Override this method if you need to
     * add custom toolbar buttons.
     * @param {HtmlEditor} editor
     */
    createToolbar : function(editor){
        var items = [];
        var tipsEnabled = Ext.QuickTips && Ext.QuickTips.isEnabled();

        function btn(id, toggle, handler){
            return {
                itemId : id,
                cls : 'x-btn-icon',
                iconCls: 'x-edit-'+id,
                enableToggle:toggle !== false,
                scope: editor,
                handler:handler||editor.relayBtnCmd,
                clickEvent:'mousedown',
                tooltip: tipsEnabled ? editor.buttonTips[id] || undefined : undefined,
                overflowText: editor.buttonTips[id].title || undefined,
                tabIndex:-1
            };
        }

        if(this.enableFont && !Ext.isSafari2){
            var fontSelectItem = new Ext.Toolbar.Item({
               autoEl: {
                    tag:'select',
                    cls:'x-font-select',
                    html: this.createFontOptions()
               }
            });

            items.push(
                fontSelectItem,
                '-'
            );
        }

        if(this.enableFormat){
            items.push(
                btn('bold'),
                btn('italic'),
                btn('underline')
            );
        }

        if(this.enableFontSize){
            items.push(
                '-',
                btn('increasefontsize', false, this.adjustFont),
                btn('decreasefontsize', false, this.adjustFont)
            );
        }

        if(this.enableColors){
            items.push(
                '-', {
                    itemId:'forecolor',
                    cls:'x-btn-icon',
                    iconCls: 'x-edit-forecolor',
                    clickEvent:'mousedown',
                    tooltip: tipsEnabled ? editor.buttonTips.forecolor || undefined : undefined,
                    tabIndex:-1,
                    menu : new Ext.menu.ColorMenu({
                        allowReselect: true,
                        focus: Ext.emptyFn,
                        value:'000000',
                        plain:true,
                        listeners: {
                            scope: this,
                            select: function(cp, color){
                                this.execCmd('forecolor', Ext.isWebKit || Ext.isIE ? '#'+color : color);
                                this.deferFocus();
                            }
                        },
                        clickEvent:'mousedown'
                    })
                }, {
                    itemId:'backcolor',
                    cls:'x-btn-icon',
                    iconCls: 'x-edit-backcolor',
                    clickEvent:'mousedown',
                    tooltip: tipsEnabled ? editor.buttonTips.backcolor || undefined : undefined,
                    tabIndex:-1,
                    menu : new Ext.menu.ColorMenu({
                        focus: Ext.emptyFn,
                        value:'FFFFFF',
                        plain:true,
                        allowReselect: true,
                        listeners: {
                            scope: this,
                            select: function(cp, color){
                                if(Ext.isGecko){
                                    this.execCmd('useCSS', false);
                                    this.execCmd('hilitecolor', color);
                                    this.execCmd('useCSS', true);
                                    this.deferFocus();
                                }else{
                                    this.execCmd(Ext.isOpera ? 'hilitecolor' : 'backcolor', Ext.isWebKit || Ext.isIE ? '#'+color : color);
                                    this.deferFocus();
                                }
                            }
                        },
                        clickEvent:'mousedown'
                    })
                }
            );
        }

        if(this.enableAlignments){
            items.push(
                '-',
                btn('justifyleft'),
                btn('justifycenter'),
                btn('justifyright')
            );
        }

        if(!Ext.isSafari2){
            if(this.enableLinks){
                items.push(
                    '-',
                    btn('createlink', false, this.createLink)
                );
            }

            if(this.enableLists){
                items.push(
                    '-',
                    btn('insertorderedlist'),
                    btn('insertunorderedlist')
                );
            }
            if(this.enableSourceEdit){
                items.push(
                    '-',
                    btn('sourceedit', true, function(btn){
                        this.toggleSourceEdit(!this.sourceEditMode);
                    })
                );
            }
        }

        // build the toolbar
        var tb = new Ext.Toolbar({
            renderTo: this.wrap.dom.firstChild,
            items: items
        });

        if (fontSelectItem) {
            this.fontSelect = fontSelectItem.el;

            this.mon(this.fontSelect, 'change', function(){
                var font = this.fontSelect.dom.value;
                this.relayCmd('fontname', font);
                this.deferFocus();
            }, this);
        }

        // stop form submits
        this.mon(tb.el, 'click', function(e){
            e.preventDefault();
        });

        this.tb = tb;
        this.tb.doLayout();
    },

    onDisable: function(){
        this.wrap.mask();
        Ext.form.HtmlEditor.superclass.onDisable.call(this);
    },

    onEnable: function(){
        this.wrap.unmask();
        Ext.form.HtmlEditor.superclass.onEnable.call(this);
    },

    setReadOnly: function(readOnly){

        Ext.form.HtmlEditor.superclass.setReadOnly.call(this, readOnly);
        if(this.initialized){
            this.setDesignMode(!readOnly);
            var bd = this.getEditorBody();
            if(bd){
                bd.style.cursor = this.readOnly ? 'default' : 'text';
            }
            this.disableItems(readOnly);
        }
    },

/**
     * Protected method that will not generally be called directly. It
     * is called when the editor initializes the iframe with HTML contents. Override this method if you
     * want to change the initialization markup of the iframe (e.g. to add stylesheets).
     *
     * Note: IE8-Standards has unwanted scroller behavior, so the default meta tag forces IE7 compatibility
     */
    getDocMarkup : function(){
        var h = Ext.fly(this.iframe).getHeight() - this.iframePad * 2;
        return String.format('', this.iframePad, h);
    },

    // private
    getEditorBody : function(){
        var doc = this.getDoc();
        return doc.body || doc.documentElement;
    },

    // private
    getDoc : function(){
        return Ext.isIE ? this.getWin().document : (this.iframe.contentDocument || this.getWin().document);
    },

    // private
    getWin : function(){
        return Ext.isIE ? this.iframe.contentWindow : window.frames[this.iframe.name];
    },

    // private
    onRender : function(ct, position){
        Ext.form.HtmlEditor.superclass.onRender.call(this, ct, position);
        this.el.dom.style.border = '0 none';
        this.el.dom.setAttribute('tabIndex', -1);
        this.el.addClass('x-hidden');
        if(Ext.isIE){ // fix IE 1px bogus margin
            this.el.applyStyles('margin-top:-1px;margin-bottom:-1px;');
        }
        this.wrap = this.el.wrap({
            cls:'x-html-editor-wrap', cn:{cls:'x-html-editor-tb'}
        });

        this.createToolbar(this);

        this.disableItems(true);

        this.tb.doLayout();

        this.createIFrame();

        if(!this.width){
            var sz = this.el.getSize();
            this.setSize(sz.width, this.height || sz.height);
        }
        this.resizeEl = this.positionEl = this.wrap;
    },

    createIFrame: function(){
        var iframe = document.createElement('iframe');
        iframe.name = Ext.id();
        iframe.frameBorder = '0';
        iframe.style.overflow = 'auto';

        this.wrap.dom.appendChild(iframe);
        this.iframe = iframe;

        this.monitorTask = Ext.TaskMgr.start({
            run: this.checkDesignMode,
            scope: this,
            interval:100
        });
    },

    initFrame : function(){
        Ext.TaskMgr.stop(this.monitorTask);
        var doc = this.getDoc();
        this.win = this.getWin();

        doc.open();
        doc.write(this.getDocMarkup());
        doc.close();

        var task = { // must defer to wait for browser to be ready
            run : function(){
                var doc = this.getDoc();
                if(doc.body || doc.readyState == 'complete'){
                    Ext.TaskMgr.stop(task);
                    this.setDesignMode(true);
                    this.initEditor.defer(10, this);
                }
            },
            interval : 10,
            duration:10000,
            scope: this
        };
        Ext.TaskMgr.start(task);
    },

    checkDesignMode : function(){
        if(this.wrap && this.wrap.dom.offsetWidth){
            var doc = this.getDoc();
            if(!doc){
                return;
            }
            if(!doc.editorInitialized || this.getDesignMode() != 'on'){
                this.initFrame();
            }
        }
    },

    /* private
     * set current design mode. To enable, mode can be true or 'on', off otherwise
     */
    setDesignMode : function(mode){
        var doc ;
        if(doc = this.getDoc()){
            if(this.readOnly){
                mode = false;
            }
            doc.designMode = (/on|true/i).test(String(mode).toLowerCase()) ?'on':'off';
        }

    },

    // private
    getDesignMode : function(){
        var doc = this.getDoc();
        if(!doc){ return ''; }
        return String(doc.designMode).toLowerCase();

    },

    disableItems: function(disabled){
        if(this.fontSelect){
            this.fontSelect.dom.disabled = disabled;
        }
        this.tb.items.each(function(item){
            if(item.getItemId() != 'sourceedit'){
                item.setDisabled(disabled);
            }
        });
    },

    // private
    onResize : function(w, h){
        Ext.form.HtmlEditor.superclass.onResize.apply(this, arguments);
        if(this.el && this.iframe){
            if(Ext.isNumber(w)){
                var aw = w - this.wrap.getFrameWidth('lr');
                this.el.setWidth(aw);
                this.tb.setWidth(aw);
                this.iframe.style.width = Math.max(aw, 0) + 'px';
            }
            if(Ext.isNumber(h)){
                var ah = h - this.wrap.getFrameWidth('tb') - this.tb.el.getHeight();
                this.el.setHeight(ah);
                this.iframe.style.height = Math.max(ah, 0) + 'px';
                var bd = this.getEditorBody();
                if(bd){
                    bd.style.height = Math.max((ah - (this.iframePad*2)), 0) + 'px';
                }
            }
        }
    },

/**
     * Toggles the editor between standard and source edit mode.
     * @param {Boolean} sourceEdit (optional) True for source edit, false for standard
     */
    toggleSourceEdit : function(sourceEditMode){
        var iframeHeight, elHeight;
        if(sourceEditMode === undefined){
            sourceEditMode = !this.sourceEditMode;
        }
        this.sourceEditMode = sourceEditMode === true;
        var btn = this.tb.getComponent('sourceedit');

        if(btn.pressed !== this.sourceEditMode){
            btn.toggle(this.sourceEditMode);
            if(!btn.xtbHidden){
                return;
            }
        }
        if(this.sourceEditMode){
            // grab the height of the containing panel before we hide the iframe
            ls = this.getSize();

            iframeHeight = Ext.get(this.iframe).getHeight();

            this.disableItems(true);
            this.syncValue();
            this.iframe.className = 'x-hidden';
            this.el.removeClass('x-hidden');
            this.el.dom.removeAttribute('tabIndex');
            this.el.focus();
            this.el.dom.style.height = iframeHeight + 'px';
        }else{
            elHeight = parseInt(this.el.dom.style.height, 10);
            if(this.initialized){
                this.disableItems(this.readOnly);
            }
            this.pushValue();
            this.iframe.className = '';
            this.el.addClass('x-hidden');
            this.el.dom.setAttribute('tabIndex', -1);
            this.deferFocus();

            this.setSize(ls);
            this.iframe.style.height = elHeight + 'px';
        }
        this.fireEvent('editmodechange', this, this.sourceEditMode);
    },

    // private used internally
    createLink : function(){
        var url = prompt(this.createLinkText, this.defaultLinkValue);
        if(url && url != 'http:/'+'/'){
            this.relayCmd('createlink', url);
        }
    },

    // private
    initEvents : function(){
        this.originalValue = this.getValue();
    },

/**
     * Overridden and disabled. The editor element does not support standard valid/invalid marking. @hide
     * @method
     */
    markInvalid : Ext.emptyFn,

/**
     * Overridden and disabled. The editor element does not support standard valid/invalid marking. @hide
     * @method
     */
    clearInvalid : Ext.emptyFn,

    // docs inherit from Field
    setValue : function(v){
        Ext.form.HtmlEditor.superclass.setValue.call(this, v);
        this.pushValue();
        return this;
    },

/**
     * Protected method that will not generally be called directly. If you need/want
     * custom HTML cleanup, this is the method you should override.
     * @param {String} html The HTML to be cleaned
     * @return {String} The cleaned HTML
     */
    cleanHtml: function(html) {
        html = String(html);
        if(Ext.isWebKit){ // strip safari nonsense
            html = html.replace(/\sclass="(?:Apple-style-span|khtml-block-placeholder)"/gi, '');
        }

        /*
         * Neat little hack. Strips out all the non-digit characters from the default
         * value and compares it to the character code of the first character in the string
         * because it can cause encoding issues when posted to the server.
         */
        if(html.charCodeAt(0) == this.defaultValue.replace(/\D/g, '')){
            html = html.substring(1);
        }
        return html;
    },

/**
     * Protected method that will not generally be called directly. Syncs the contents
     * of the editor iframe with the textarea.
     */
    syncValue : function(){
        if(this.initialized){
            var bd = this.getEditorBody();
            var html = bd.innerHTML;
            if(Ext.isWebKit){
                var bs = bd.getAttribute('style'); // Safari puts text-align styles on the body element!
                var m = bs.match(/text-align:(.*?);/i);
                if(m && m[1]){
                    html = '
' + html + '
';
                }
            }
            html = this.cleanHtml(html);
            if(this.fireEvent('beforesync', this, html) !== false){
                this.el.dom.value = html;
                this.fireEvent('sync', this, html);
            }
        }
    },

    //docs inherit from Field
    getValue : function() {
        this[this.sourceEditMode ? 'pushValue' : 'syncValue']();
        return Ext.form.HtmlEditor.superclass.getValue.call(this);
    },

/**
     * Protected method that will not generally be called directly. Pushes the value of the textarea
     * into the iframe editor.
     */
    pushValue : function(){
        if(this.initialized){
            var v = this.el.dom.value;
            if(!this.activated && v.length < 1){
                v = this.defaultValue;
            }
            if(this.fireEvent('beforepush', this, v) !== false){
                this.getEditorBody().innerHTML = v;
                if(Ext.isGecko){
                    // Gecko hack, see: https://bugzilla.mozilla.org/show_bug.cgi?id=232791#c8
                    this.setDesignMode(false);  //toggle off first

                }
                this.setDesignMode(true);
                this.fireEvent('push', this, v);
            }

        }
    },

    // private
    deferFocus : function(){
        this.focus.defer(10, this);
    },

    // docs inherit from Field
    focus : function(){
        if(this.win && !this.sourceEditMode){
            this.win.focus();
        }else{
            this.el.focus();
        }
    },

    // private
    initEditor : function(){
        //Destroying the component during/before initEditor can cause issues.
        try{
            var dbody = this.getEditorBody(),
                ss = this.el.getStyles('font-size', 'font-family', 'background-image', 'background-repeat', 'background-color', 'color'),
                doc,
                fn;

            ss['background-attachment'] = 'fixed'; // w3c
            dbody.bgProperties = 'fixed'; // ie

            Ext.DomHelper.applyStyles(dbody, ss);

            doc = this.getDoc();

            if(doc){
                try{
                    Ext.EventManager.removeAll(doc);
                }catch(e){}
            }

            /*
             * We need to use createDelegate here, because when using buffer, the delayed task is added
             * as a property to the function. When the listener is removed, the task is deleted from the function.
             * Since onEditorEvent is shared on the prototype, if we have multiple html editors, the first time one of the editors
             * is destroyed, it causes the fn to be deleted from the prototype, which causes errors. Essentially, we're just anonymizing the function.
             */
            fn = this.onEditorEvent.createDelegate(this);
            Ext.EventManager.on(doc, {
                mousedown: fn,
                dblclick: fn,
                click: fn,
                keyup: fn,
                buffer:100
            });

            if(Ext.isGecko){
                Ext.EventManager.on(doc, 'keypress', this.applyCommand, this);
            }
            if(Ext.isIE || Ext.isWebKit || Ext.isOpera){
                Ext.EventManager.on(doc, 'keydown', this.fixKeys, this);
            }
            doc.editorInitialized = true;
            this.initialized = true;
            this.pushValue();
            this.setReadOnly(this.readOnly);
            this.fireEvent('initialize', this);
        }catch(e){}
    },

    // private
    onDestroy : function(){
        if(this.monitorTask){
            Ext.TaskMgr.stop(this.monitorTask);
        }
        if(this.rendered){
            Ext.destroy(this.tb);
            var doc = this.getDoc();
            if(doc){
                try{
                    Ext.EventManager.removeAll(doc);
                    for (var prop in doc){
                        delete doc[prop];
                    }
                }catch(e){}
            }
            if(this.wrap){
                this.wrap.dom.innerHTML = '';
                this.wrap.remove();
            }
        }

        if(this.el){
            this.el.removeAllListeners();
            this.el.remove();
        }
        this.purgeListeners();
    },

    // private
    onFirstFocus : function(){
        this.activated = true;
        this.disableItems(this.readOnly);
        if(Ext.isGecko){ // prevent silly gecko errors
            this.win.focus();
            var s = this.win.getSelection();
            if(!s.focusNode || s.focusNode.nodeType != 3){
                var r = s.getRangeAt(0);
                r.selectNodeContents(this.getEditorBody());
                r.collapse(true);
                this.deferFocus();
            }
            try{
                this.execCmd('useCSS', true);
                this.execCmd('styleWithCSS', false);
            }catch(e){}
        }
        this.fireEvent('activate', this);
    },

    // private
    adjustFont: function(btn){
        var adjust = btn.getItemId() == 'increasefontsize' ? 1 : -1,
            doc = this.getDoc(),
            v = parseInt(doc.queryCommandValue('FontSize') || 2, 10);
        if((Ext.isSafari && !Ext.isSafari2) || Ext.isChrome || Ext.isAir){
            // Safari 3 values
            // 1 = 10px, 2 = 13px, 3 = 16px, 4 = 18px, 5 = 24px, 6 = 32px
            if(v <= 10){
                v = 1 + adjust;
            }else if(v <= 13){
                v = 2 + adjust;
            }else if(v <= 16){
                v = 3 + adjust;
            }else if(v <= 18){
                v = 4 + adjust;
            }else if(v <= 24){
                v = 5 + adjust;
            }else {
                v = 6 + adjust;
            }
            v = v.constrain(1, 6);
        }else{
            if(Ext.isSafari){ // safari
                adjust *= 2;
            }
            v = Math.max(1, v+adjust) + (Ext.isSafari ? 'px' : 0);
        }
        this.execCmd('FontSize', v);
    },

    // private
    onEditorEvent : function(e){
        this.updateToolbar();
    },

/**
     * Protected method that will not generally be called directly. It triggers
     * a toolbar update by reading the markup state of the current selection in the editor.
     */
    updateToolbar: function(){

        if(this.readOnly){
            return;
        }

        if(!this.activated){
            this.onFirstFocus();
            return;
        }

        var btns = this.tb.items.map,
            doc = this.getDoc();

        if(this.enableFont && !Ext.isSafari2){
            var name = (doc.queryCommandValue('FontName')||this.defaultFont).toLowerCase();
            if(name != this.fontSelect.dom.value){
                this.fontSelect.dom.value = name;
            }
        }
        if(this.enableFormat){
            btns.bold.toggle(doc.queryCommandState('bold'));
            btns.italic.toggle(doc.queryCommandState('italic'));
            btns.underline.toggle(doc.queryCommandState('underline'));
        }
        if(this.enableAlignments){
            btns.justifyleft.toggle(doc.queryCommandState('justifyleft'));
            btns.justifycenter.toggle(doc.queryCommandState('justifycenter'));
            btns.justifyright.toggle(doc.queryCommandState('justifyright'));
        }
        if(!Ext.isSafari2 && this.enableLists){
            btns.insertorderedlist.toggle(doc.queryCommandState('insertorderedlist'));
            btns.insertunorderedlist.toggle(doc.queryCommandState('insertunorderedlist'));
        }

        Ext.menu.MenuMgr.hideAll();

        this.syncValue();
    },

    // private
    relayBtnCmd : function(btn){
        this.relayCmd(btn.getItemId());
    },

/**
     * Executes a Midas editor command on the editor document and performs necessary focus and
     * toolbar updates. This should only be called after the editor is initialized.
     * @param {String} cmd The Midas command
     * @param {String/Boolean} value (optional) The value to pass to the command (defaults to null)
     */
    relayCmd : function(cmd, value){
        (function(){
            this.focus();
            this.execCmd(cmd, value);
            this.updateToolbar();
        }).defer(10, this);
    },

/**
     * Executes a Midas editor command directly on the editor document.
     * For visual commands, you should use {@link #relayCmd} instead.
     * This should only be called after the editor is initialized.
     * @param {String} cmd The Midas command
     * @param {String/Boolean} value (optional) The value to pass to the command (defaults to null)
     */
    execCmd : function(cmd, value){
        var doc = this.getDoc();
        doc.execCommand(cmd, false, value === undefined ? null : value);
        this.syncValue();
    },

    // private
    applyCommand : function(e){
        if(e.ctrlKey){
            var c = e.getCharCode(), cmd;
            if(c > 0){
                c = String.fromCharCode(c);
                switch(c){
                    case 'b':
                        cmd = 'bold';
                    break;
                    case 'i':
                        cmd = 'italic';
                    break;
                    case 'u':
                        cmd = 'underline';
                    break;
                }
                if(cmd){
                    this.win.focus();
                    this.execCmd(cmd);
                    this.deferFocus();
                    e.preventDefault();
                }
            }
        }
    },

/**
     * Inserts the passed text at the current cursor position. Note: the editor must be initialized and activated
     * to insert text.
     * @param {String} text
     */
    insertAtCursor : function(text){
        if(!this.activated){
            return;
        }
        if(Ext.isIE){
            this.win.focus();
            var doc = this.getDoc(),
                r = doc.selection.createRange();
            if(r){
                r.pasteHTML(text);
                this.syncValue();
                this.deferFocus();
            }
        }else{
            this.win.focus();
            this.execCmd('InsertHTML', text);
            this.deferFocus();
        }
    },

    // private
    fixKeys : function(){ // load time branching for fastest keydown performance
        if(Ext.isIE){
            return function(e){
                var k = e.getKey(),
                    doc = this.getDoc(),
                        r;
                if(k == e.TAB){
                    e.stopEvent();
                    r = doc.selection.createRange();
                    if(r){
                        r.collapse(true);
                        r.pasteHTML('    ');
                        this.deferFocus();
                    }
                }else if(k == e.ENTER){
                    r = doc.selection.createRange();
                    if(r){
                        var target = r.parentElement();
                        if(!target || target.tagName.toLowerCase() != 'li'){
                            e.stopEvent();
                            r.pasteHTML('
');
                            r.collapse(false);
                            r.select();
                        }
                    }
                }
            };
        }else if(Ext.isOpera){
            return function(e){
                var k = e.getKey();
                if(k == e.TAB){
                    e.stopEvent();
                    this.win.focus();
                    this.execCmd('InsertHTML','    ');
                    this.deferFocus();
                }
            };
        }else if(Ext.isWebKit){
            return function(e){
                var k = e.getKey();
                if(k == e.TAB){
                    e.stopEvent();
                    this.execCmd('InsertText','\t');
                    this.deferFocus();
                }else if(k == e.ENTER){
                    e.stopEvent();
                    this.execCmd('InsertHtml','

');
                    this.deferFocus();
                }
             };
        }
    }(),

/**
     * Returns the editor's toolbar. This is only available after the editor has been rendered.
     * @return {Ext.Toolbar}
     */
    getToolbar : function(){
        return this.tb;
    },

/**
     * Object collection of toolbar tooltips for the buttons in the editor. The key
     * is the command id associated with that button and the value is a valid QuickTips object.
     * For example:

{
    bold : {
        title: 'Bold (Ctrl+B)',
        text: 'Make the selected text bold.',
        cls: 'x-html-editor-tip'
    },
    italic : {
        title: 'Italic (Ctrl+I)',
        text: 'Make the selected text italic.',
        cls: 'x-html-editor-tip'
    },
    ...

    * @type Object
     */
    buttonTips : {
        bold : {
            title: 'Bold (Ctrl+B)',
            text: 'Make the selected text bold.',
            cls: 'x-html-editor-tip'
        },
        italic : {
            title: 'Italic (Ctrl+I)',
            text: 'Make the selected text italic.',
            cls: 'x-html-editor-tip'
        },
        underline : {
            title: 'Underline (Ctrl+U)',
            text: 'Underline the selected text.',
            cls: 'x-html-editor-tip'
        },
        increasefontsize : {
            title: 'Grow Text',
            text: 'Increase the font size.',
            cls: 'x-html-editor-tip'
        },
        decreasefontsize : {
            title: 'Shrink Text',
            text: 'Decrease the font size.',
            cls: 'x-html-editor-tip'
        },
        backcolor : {
            title: 'Text Highlight Color',
            text: 'Change the background color of the selected text.',
            cls: 'x-html-editor-tip'
        },
        forecolor : {
            title: 'Font Color',
            text: 'Change the color of the selected text.',
            cls: 'x-html-editor-tip'
        },
        justifyleft : {
            title: 'Align Text Left',
            text: 'Align text to the left.',
            cls: 'x-html-editor-tip'
        },
        justifycenter : {
            title: 'Center Text',
            text: 'Center text in the editor.',
            cls: 'x-html-editor-tip'
        },
        justifyright : {
            title: 'Align Text Right',
            text: 'Align text to the right.',
            cls: 'x-html-editor-tip'
        },
        insertunorderedlist : {
            title: 'Bullet List',
            text: 'Start a bulleted list.',
            cls: 'x-html-editor-tip'
        },
        insertorderedlist : {
            title: 'Numbered List',
            text: 'Start a numbered list.',
            cls: 'x-html-editor-tip'
        },
        createlink : {
            title: 'Hyperlink',
            text: 'Make the selected text a hyperlink.',
            cls: 'x-html-editor-tip'
        },
        sourceedit : {
            title: 'Source Edit',
            text: 'Switch to source editing mode.',
            cls: 'x-html-editor-tip'
        }
    }

    // hide stuff that is not compatible

/**
     * @event blur
     * @hide
     */

/**
     * @event change
     * @hide
     */

/**
     * @event focus
     * @hide
     */

/**
     * @event specialkey
     * @hide
     */

/**
     * @cfg {String} fieldClass @hide
     */

/**
     * @cfg {String} focusClass @hide
     */

/**
     * @cfg {String} autoCreate @hide
     */

/**
     * @cfg {String} inputType @hide
     */

/**
     * @cfg {String} invalidClass @hide
     */

/**
     * @cfg {String} invalidText @hide
     */

/**
     * @cfg {String} msgFx @hide
     */

/**
     * @cfg {String} validateOnBlur @hide
     */

/**
     * @cfg {Boolean} allowDomMove  @hide
     */

/**
     * @cfg {String} applyTo @hide
     */

/**
     * @cfg {String} autoHeight  @hide
     */

/**
     * @cfg {String} autoWidth  @hide
     */

/**
     * @cfg {String} cls  @hide
     */

/**
     * @cfg {String} disabled  @hide
     */

/**
     * @cfg {String} disabledClass  @hide
     */

/**
     * @cfg {String} msgTarget  @hide
     */

/**
     * @cfg {String} readOnly  @hide
     */

/**
     * @cfg {String} style  @hide
     */

/**
     * @cfg {String} validationDelay  @hide
     */

/**
     * @cfg {String} validationEvent  @hide
     */

/**
     * @cfg {String} tabIndex  @hide
     */

/**
     * @property disabled
     * @hide
     */

/**
     * @method applyToMarkup
     * @hide
     */

/**
     * @method disable
     * @hide
     */

/**
     * @method enable
     * @hide
     */

/**
     * @method validate
     * @hide
     */

/**
     * @event valid
     * @hide
     */

/**
     * @method setDisabled
     * @hide
     */

/**
     * @cfg keys
     * @hide
     */
});
Ext.reg('htmleditor', Ext.form.HtmlEditor);


The source code

/*!
 * licensing@extjs.com
 * http://www.extjs.com/license
 */

/**
 * @class Ext.data.HttpProxy
 * @extends Ext.data.DataProxy
 *
An implementation of {@link Ext.data.DataProxy} that processes data requests within the same
 * domain of the originating page.

 *
Note: this class cannot be used to retrieve data from a domain other
 * than the domain from which the running page was served. For cross-domain requests, use a
 * {@link Ext.data.ScriptTagProxy ScriptTagProxy}.

 *
Be aware that to enable the browser to parse an XML document, the server must set
 * the Content-Type header in the HTTP response to "text/xml".

 * @constructor
 * @param {Object} conn
 * An {@link Ext.data.Connection} object, or options parameter to {@link Ext.Ajax#request}.
 *
Note that if this HttpProxy is being used by a {@link Ext.data.Store Store}, then the
 * Store's call to {@link #load} will override any specified callback and params
 * options. In this case, use the Store's {@link Ext.data.Store#events events} to modify parameters,
 * or react to loading events. The Store's {@link Ext.data.Store#baseParams baseParams} may also be
 * used to pass parameters known at instantiation time.

 *
If an options parameter is passed, the singleton {@link Ext.Ajax} object will be used to make
 * the request.

 */
Ext.data.HttpProxy = function(conn){
    Ext.data.HttpProxy.superclass.constructor.call(this, conn);

/**
     * The Connection object (Or options parameter to {@link Ext.Ajax#request}) which this HttpProxy
     * uses to make requests to the server. Properties of this object may be changed dynamically to
     * change the way data is requested.
     * @property
     */
    this.conn = conn;

    // nullify the connection url.  The url param has been copied to 'this' above.  The connection
    // url will be set during each execution of doRequest when buildUrl is called.  This makes it easier for users to override the
    // connection url during beforeaction events (ie: beforeload, beforewrite, etc).
    // Url is always re-defined during doRequest.
    this.conn.url = null;

    this.useAjax = !conn || !conn.events;

    // A hash containing active requests, keyed on action [Ext.data.Api.actions.create|read|update|destroy]
    var actions = Ext.data.Api.actions;
    this.activeRequest = {};
    for (var verb in actions) {
        this.activeRequest[actions[verb]] = undefined;
    }
};

Ext.extend(Ext.data.HttpProxy, Ext.data.DataProxy, {

/**
     * Return the {@link Ext.data.Connection} object being used by this Proxy.
     * @return {Connection} The Connection object. This object may be used to subscribe to events on
     * a finer-grained basis than the DataProxy events.
     */
    getConnection : function() {
        return this.useAjax ? Ext.Ajax : this.conn;
    },

/**
     * Used for overriding the url used for a single request.  Designed to be called during a beforeaction event.  Calling setUrl
     * will override any urls set via the api configuration parameter.  Set the optional parameter makePermanent to set the url for
     * all subsequent requests.  If not set to makePermanent, the next request will use the same url or api configuration defined
     * in the initial proxy configuration.
     * @param {String} url
     * @param {Boolean} makePermanent (Optional) [false]
     *
     * (e.g.: beforeload, beforesave, etc).
     */
    setUrl : function(url, makePermanent) {
        this.conn.url = url;
        if (makePermanent === true) {
            this.url = url;
            this.api = null;
            Ext.data.Api.prepare(this);
        }
    },

/**
     * HttpProxy implementation of DataProxy#doRequest
     * @param {String} action The crud action type (create, read, update, destroy)
     * @param {Ext.data.Record/Ext.data.Record[]} rs If action is load, rs will be null
     * @param {Object} params An object containing properties which are to be used as HTTP parameters
     * for the request to the remote server.
     * @param {Ext.data.DataReader} reader The Reader object which converts the data
     * object into a block of Ext.data.Records.
     * @param {Function} callback
     *
A function to be called after the request.
     * The callback is passed the following arguments:

     *
  • r : Ext.data.Record[] The block of Ext.data.Records.
    •
     *
  • options: Options object from the action request
    •
     *
  • success: Boolean success indicator

     * @param {Object} scope The scope (this reference) in which the callback function is executed. Defaults to the browser window.
     * @param {Object} arg An optional argument which is passed to the callback as its second parameter.
     * @protected
     */
    doRequest : function(action, rs, params, reader, cb, scope, arg) {
        var  o = {
            method: (this.api[action]) ? this.api[action]['method'] : undefined,
            request: {
                callback : cb,
                scope : scope,
                arg : arg
            },
            reader: reader,
            callback : this.createCallback(action, rs),
            scope: this
        };

        // If possible, transmit data using jsonData || xmlData on Ext.Ajax.request (An installed DataWriter would have written it there.).
        // Use std HTTP params otherwise.
        if (params.jsonData) {
            o.jsonData = params.jsonData;
        } else if (params.xmlData) {
            o.xmlData = params.xmlData;
        } else {
            o.params = params || {};
        }
        // Set the connection url.  If this.conn.url is not null here,
        // the user must have overridden the url during a beforewrite/beforeload event-handler.
        // this.conn.url is nullified after each request.
        this.conn.url = this.buildUrl(action, rs);

        if(this.useAjax){

            Ext.applyIf(o, this.conn);

            // If a currently running request is found for this action, abort it.
            if (this.activeRequest[action]) {
                ////
                // Disabled aborting activeRequest while implementing REST.  activeRequest[action] will have to become an array
                // TODO ideas anyone?
                //
                //Ext.Ajax.abort(this.activeRequest[action]);
            }
            this.activeRequest[action] = Ext.Ajax.request(o);
        }else{
            this.conn.request(o);
        }
        // request is sent, nullify the connection url in preparation for the next request
        this.conn.url = null;
    },

    /**
     * Returns a callback function for a request.  Note a special case is made for the
     * read action vs all the others.
     * @param {String} action [create|update|delete|load]
     * @param {Ext.data.Record[]} rs The Store-recordset being acted upon
     * @private
     */
    createCallback : function(action, rs) {
        return function(o, success, response) {
            this.activeRequest[action] = undefined;
            if (!success) {
                if (action === Ext.data.Api.actions.read) {
                    // @deprecated: fire loadexception for backwards compat.
                    // TODO remove
                    this.fireEvent('loadexception', this, o, response);
                }
                this.fireEvent('exception', this, 'response', action, o, response);
                o.request.callback.call(o.request.scope, null, o.request.arg, false);
                return;
            }
            if (action === Ext.data.Api.actions.read) {
                this.onRead(action, o, response);
            } else {
                this.onWrite(action, o, response, rs);
            }
        };
    },

/**
     * Callback for read action
     * @param {String} action Action name as per {@link Ext.data.Api.actions#read}.
     * @param {Object} o The request transaction object
     * @param {Object} res The server response
     * @fires loadexception (deprecated)
     * @fires exception
     * @fires load
     * @protected
     */
    onRead : function(action, o, response) {
        var result;
        try {
            result = o.reader.read(response);
        }catch(e){
            // @deprecated: fire old loadexception for backwards-compat.
            // TODO remove
            this.fireEvent('loadexception', this, o, response, e);

            this.fireEvent('exception', this, 'response', action, o, response, e);
            o.request.callback.call(o.request.scope, null, o.request.arg, false);
            return;
        }
        if (result.success === false) {
            // @deprecated: fire old loadexception for backwards-compat.
            // TODO remove
            this.fireEvent('loadexception', this, o, response);

            // Get DataReader read-back a response-object to pass along to exception event
            var res = o.reader.readResponse(action, response);
            this.fireEvent('exception', this, 'remote', action, o, res, null);
        }
        else {
            this.fireEvent('load', this, o, o.request.arg);
        }
        // TODO refactor onRead, onWrite to be more generalized now that we're dealing with Ext.data.Response instance
        // the calls to request.callback(...) in each will have to be made identical.
        // NOTE reader.readResponse does not currently return Ext.data.Response
        o.request.callback.call(o.request.scope, result, o.request.arg, result.success);
    },

/**
     * Callback for write actions
     * @param {String} action [Ext.data.Api.actions.create|read|update|destroy]
     * @param {Object} trans The request transaction object
     * @param {Object} res The server response
     * @fires exception
     * @fires write
     * @protected
     */
    onWrite : function(action, o, response, rs) {
        var reader = o.reader;
        var res;
        try {
            res = reader.readResponse(action, response);
        } catch (e) {
            this.fireEvent('exception', this, 'response', action, o, response, e);
            o.request.callback.call(o.request.scope, null, o.request.arg, false);
            return;
        }
        if (res.success === true) {
            this.fireEvent('write', this, action, res.data, res, rs, o.request.arg);
        } else {
            this.fireEvent('exception', this, 'remote', action, o, res, rs);
        }
        // TODO refactor onRead, onWrite to be more generalized now that we're dealing with Ext.data.Response instance
        // the calls to request.callback(...) in each will have to be made similar.
        // NOTE reader.readResponse does not currently return Ext.data.Response
        o.request.callback.call(o.request.scope, res.data, res, res.success);
    },

    // inherit docs
    destroy: function(){
        if(!this.useAjax){
            this.conn.abort();
        }else if(this.activeRequest){
            var actions = Ext.data.Api.actions;
            for (var verb in actions) {
                if(this.activeRequest[actions[verb]]){
                    Ext.Ajax.abort(this.activeRequest[actions[verb]]);
                }
            }
        }
        Ext.data.HttpProxy.superclass.destroy.call(this);
    }
});


The source code

/*!
 * licensing@extjs.com
 * http://www.extjs.com/license
 */

/**
 * @class Ext.menu.Item
 * @extends Ext.menu.BaseItem
 * A base class for all menu items that require menu-related functionality (like sub-menus) and are not static
 * display items.  Item extends the base functionality of {@link Ext.menu.BaseItem} by adding menu-specific
 * activation and click handling.
 * @constructor
 * Creates a new Item
 * @param {Object} config Configuration options
 * @xtype menuitem
 */
Ext.menu.Item = Ext.extend(Ext.menu.BaseItem, {

/**
     * @property menu
     * @type Ext.menu.Menu
     * The submenu associated with this Item if one was configured.
     */

/**
     * @cfg {Mixed} menu (optional) Either an instance of {@link Ext.menu.Menu} or the config object for an
     * {@link Ext.menu.Menu} which acts as the submenu when this item is activated.
     */

/**
     * @cfg {String} icon The path to an icon to display in this item (defaults to Ext.BLANK_IMAGE_URL).  If
     * icon is specified {@link #iconCls} should not be.
     */

/**
     * @cfg {String} iconCls A CSS class that specifies a background image that will be used as the icon for
     * this item (defaults to '').  If iconCls is specified {@link #icon} should not be.
     */

/**
     * @cfg {String} text The text to display in this item (defaults to '').
     */

/**
     * @cfg {String} href The href attribute to use for the underlying anchor link (defaults to '#').
     */

/**
     * @cfg {String} hrefTarget The target attribute to use for the underlying anchor link (defaults to '').
     */

/**
     * @cfg {String} itemCls The default CSS class to use for menu items (defaults to 'x-menu-item')
     */
    itemCls : 'x-menu-item',

/**
     * @cfg {Boolean} canActivate True if this item can be visually activated (defaults to true)
     */
    canActivate : true,

/**
     * @cfg {Number} showDelay Length of time in milliseconds to wait before showing this item (defaults to 200)
     */
    showDelay: 200,
    // doc'd in BaseItem
    hideDelay: 200,

    // private
    ctype: 'Ext.menu.Item',

    initComponent : function(){
        Ext.menu.Item.superclass.initComponent.call(this);
        if(this.menu){
            this.menu = Ext.menu.MenuMgr.get(this.menu);
            this.menu.ownerCt = this;
        }
    },

    // private
    onRender : function(container, position){
        if (!this.itemTpl) {
            this.itemTpl = Ext.menu.Item.prototype.itemTpl = new Ext.XTemplate(
                '',
                        ' target="{hrefTarget}"',
                    '',
                 '>',
                     '  ',
                     '{text}',
                 ''
             );
        }
        var a = this.getTemplateArgs();
        this.el = position ? this.itemTpl.insertBefore(position, a, true) : this.itemTpl.append(container, a, true);
        this.iconEl = this.el.child('img.x-menu-item-icon');
        this.textEl = this.el.child('.x-menu-item-text');
        if(!this.href) { // if no link defined, prevent the default anchor event
            this.mon(this.el, 'click', Ext.emptyFn, null, { preventDefault: true });
        }
        Ext.menu.Item.superclass.onRender.call(this, container, position);
    },

    getTemplateArgs: function() {
        return {
            id: this.id,
            cls: this.itemCls + (this.menu ?  ' x-menu-item-arrow' : '') + (this.cls ?  ' ' + this.cls : ''),
            href: this.href || '#',
            hrefTarget: this.hrefTarget,
            icon: this.icon || Ext.BLANK_IMAGE_URL,
            iconCls: this.iconCls || '',
            text: this.itemText||this.text||' '
        };
    },

/**
     * Sets the text to display in this menu item
     * @param {String} text The text to display
     */
    setText : function(text){
        this.text = text||' ';
        if(this.rendered){
            this.textEl.update(this.text);
            this.parentMenu.layout.doAutoSize();
        }
    },

/**
     * Sets the CSS class to apply to the item's icon element
     * @param {String} cls The CSS class to apply
     */
    setIconClass : function(cls){
        var oldCls = this.iconCls;
        this.iconCls = cls;
        if(this.rendered){
            this.iconEl.replaceClass(oldCls, this.iconCls);
        }
    },

    //private
    beforeDestroy: function(){
        if (this.menu){
            delete this.menu.ownerCt;
            this.menu.destroy();
        }
        Ext.menu.Item.superclass.beforeDestroy.call(this);
    },

    // private
    handleClick : function(e){
        if(!this.href){ // if no link defined, stop the event automatically
            e.stopEvent();
        }
        Ext.menu.Item.superclass.handleClick.apply(this, arguments);
    },

    // private
    activate : function(autoExpand){
        if(Ext.menu.Item.superclass.activate.apply(this, arguments)){
            this.focus();
            if(autoExpand){
                this.expandMenu();
            }
        }
        return true;
    },

    // private
    shouldDeactivate : function(e){
        if(Ext.menu.Item.superclass.shouldDeactivate.call(this, e)){
            if(this.menu && this.menu.isVisible()){
                return !this.menu.getEl().getRegion().contains(e.getPoint());
            }
            return true;
        }
        return false;
    },

    // private
    deactivate : function(){
        Ext.menu.Item.superclass.deactivate.apply(this, arguments);
        this.hideMenu();
    },

    // private
    expandMenu : function(autoActivate){
        if(!this.disabled && this.menu){
            clearTimeout(this.hideTimer);
            delete this.hideTimer;
            if(!this.menu.isVisible() && !this.showTimer){
                this.showTimer = this.deferExpand.defer(this.showDelay, this, [autoActivate]);
            }else if (this.menu.isVisible() && autoActivate){
                this.menu.tryActivate(0, 1);
            }
        }
    },

    // private
    deferExpand : function(autoActivate){
        delete this.showTimer;
        this.menu.show(this.container, this.parentMenu.subMenuAlign || 'tl-tr?', this.parentMenu);
        if(autoActivate){
            this.menu.tryActivate(0, 1);
        }
    },

    // private
    hideMenu : function(){
        clearTimeout(this.showTimer);
        delete this.showTimer;
        if(!this.hideTimer && this.menu && this.menu.isVisible()){
            this.hideTimer = this.deferHide.defer(this.hideDelay, this);
        }
    },

    // private
    deferHide : function(){
        delete this.hideTimer;
        if(this.menu.over){
            this.parentMenu.setActiveItem(this, false);
        }else{
            this.menu.hide();
        }
    }
});
Ext.reg('menuitem', Ext.menu.Item);


The source code

/*!
 * licensing@extjs.com
 * http://www.extjs.com/license
 */
if(typeof jQuery == "undefined"){
    throw "Unable to load Ext, jQuery not found.";
}

(function(){
var libFlyweight;

Ext.lib.Dom = {
    getViewWidth : function(full){
        // jQuery doesn't report full window size on document query, so max both
        return full ? Math.max(jQuery(document).width(),jQuery(window).width()) : jQuery(window).width();
    },

    getViewHeight : function(full){
        // jQuery doesn't report full window size on document query, so max both
        return full ? Math.max(jQuery(document).height(),jQuery(window).height()) : jQuery(window).height();
    },

    isAncestor : function(p, c){
        var ret = false;

        p = Ext.getDom(p);
        c = Ext.getDom(c);
        if (p && c) {
            if (p.contains) {
                return p.contains(c);
            } else if (p.compareDocumentPosition) {
                return !!(p.compareDocumentPosition(c) & 16);
            } else {
                while (c = c.parentNode) {
                    ret = c == p || ret;
                }
            }
        }
        return ret;
    },

    getRegion : function(el){
        return Ext.lib.Region.getRegion(el);
    },

    //////////////////////////////////////////////////////////////////////////////////////
    // Use of jQuery.offset() removed to promote consistent behavior across libs.
    // JVS 05/23/07
    //////////////////////////////////////////////////////////////////////////////////////

    getY : function(el){
        return this.getXY(el)[1];
    },

    getX : function(el){
        return this.getXY(el)[0];
    },

    getXY : function(el) {
        var p, pe, b, scroll, bd = (document.body || document.documentElement);
        el = Ext.getDom(el);

        if(el == bd){
            return [0, 0];
        }

        if (el.getBoundingClientRect) {
            b = el.getBoundingClientRect();
            scroll = fly(document).getScroll();
            return [Math.round(b.left + scroll.left), Math.round(b.top + scroll.top)];
        }
        var x = 0, y = 0;

        p = el;

        var hasAbsolute = fly(el).getStyle("position") == "absolute";

        while (p) {

            x += p.offsetLeft;
            y += p.offsetTop;

            if (!hasAbsolute && fly(p).getStyle("position") == "absolute") {
                hasAbsolute = true;
            }

            if (Ext.isGecko) {
                pe = fly(p);

                var bt = parseInt(pe.getStyle("borderTopWidth"), 10) || 0;
                var bl = parseInt(pe.getStyle("borderLeftWidth"), 10) || 0;

                x += bl;
                y += bt;

                if (p != el && pe.getStyle('overflow') != 'visible') {
                    x += bl;
                    y += bt;
                }
            }
            p = p.offsetParent;
        }

        if (Ext.isSafari && hasAbsolute) {
            x -= bd.offsetLeft;
            y -= bd.offsetTop;
        }

        if (Ext.isGecko && !hasAbsolute) {
            var dbd = fly(bd);
            x += parseInt(dbd.getStyle("borderLeftWidth"), 10) || 0;
            y += parseInt(dbd.getStyle("borderTopWidth"), 10) || 0;
        }

        p = el.parentNode;
        while (p && p != bd) {
            if (!Ext.isOpera || (p.tagName != 'TR' && fly(p).getStyle("display") != "inline")) {
                x -= p.scrollLeft;
                y -= p.scrollTop;
            }
            p = p.parentNode;
        }
        return [x, y];
    },

    setXY : function(el, xy){
        el = Ext.fly(el, '_setXY');
        el.position();
        var pts = el.translatePoints(xy);
        if(xy[0] !== false){
            el.dom.style.left = pts.left + "px";
        }
        if(xy[1] !== false){
            el.dom.style.top = pts.top + "px";
        }
    },

    setX : function(el, x){
        this.setXY(el, [x, false]);
    },

    setY : function(el, y){
        this.setXY(el, [false, y]);
    }
};

// all lib flyweight calls use their own flyweight to prevent collisions with developer flyweights
function fly(el){
    if(!libFlyweight){
        libFlyweight = new Ext.Element.Flyweight();
    }
    libFlyweight.dom = el;
    return libFlyweight;
}
Ext.lib.Event = {
    getPageX : function(e){
        e = e.browserEvent || e;
        return e.pageX;
    },

    getPageY : function(e){
        e = e.browserEvent || e;
        return e.pageY;
    },

    getXY : function(e){
        e = e.browserEvent || e;
        return [e.pageX, e.pageY];
    },

    getTarget : function(e){
        return e.target;
    },

    // all Ext events will go through event manager which provides scoping
    on : function(el, eventName, fn, scope, override){
        jQuery(el).bind(eventName, fn);
    },

    un : function(el, eventName, fn){
        jQuery(el).unbind(eventName, fn);
    },

    purgeElement : function(el){
        jQuery(el).unbind();
    },

    preventDefault : function(e){
        e = e.browserEvent || e;
        if(e.preventDefault){
            e.preventDefault();
        }else{
            e.returnValue = false;
        }
    },

    stopPropagation : function(e){
        e = e.browserEvent || e;
        if(e.stopPropagation){
            e.stopPropagation();
        }else{
            e.cancelBubble = true;
        }
    },

    stopEvent : function(e){
        this.preventDefault(e);
        this.stopPropagation(e);
    },

    onAvailable : function(id, fn, scope){
        var start = new Date();
        var f = function(){
            if(start.getElapsed() > 10000){
                clearInterval(iid);
            }
            var el = document.getElementById(id);
            if(el){
                clearInterval(iid);
                fn.call(scope||window, el);
            }
        };
        var iid = setInterval(f, 50);
    },

    resolveTextNode: Ext.isGecko ? function(node){
        if(!node){
            return;
        }
        var s = HTMLElement.prototype.toString.call(node);
        if(s == '[xpconnect wrapped native prototype]' || s == '[object XULElement]'){
            return;
        }
        return node.nodeType == 3 ? node.parentNode : node;
    } : function(node){
        return node && node.nodeType == 3 ? node.parentNode : node;
    },

    getRelatedTarget: function(ev) {
        ev = ev.browserEvent || ev;
        var t = ev.relatedTarget;
        if (!t) {
            if (ev.type == "mouseout") {
                t = ev.toElement;
            } else if (ev.type == "mouseover") {
                t = ev.fromElement;
            }
        }

        return this.resolveTextNode(t);
    }
};

Ext.lib.Ajax = function(){
    var createComplete = function(cb){
         return function(xhr, status){
            if((status == 'error' || status == 'timeout') && cb.failure){
                cb.failure.call(cb.scope||window, createResponse(cb, xhr));
            }else if(cb.success){
                cb.success.call(cb.scope||window, createResponse(cb, xhr));
            }
         };
    };

    var createResponse = function(cb, xhr){
        var headerObj = {},
            headerStr,
            t,
            s;

        try {
            headerStr = xhr.getAllResponseHeaders();
            Ext.each(headerStr.replace(/\r\n/g, '\n').split('\n'), function(v){
                t = v.indexOf(':');
                if(t >= 0){
                    s = v.substr(0, t).toLowerCase();
                    if(v.charAt(t + 1) == ' '){
                        ++t;
                    }
                    headerObj[s] = v.substr(t + 1);
                }
            });
        } catch(e) {}

        return {
            responseText: xhr.responseText,
            responseXML : xhr.responseXML,
            argument: cb.argument,
            status: xhr.status,
            statusText: xhr.statusText,
            getResponseHeader : function(header){return headerObj[header.toLowerCase()];},
            getAllResponseHeaders : function(){return headerStr}
        };
    };
    return {
        request : function(method, uri, cb, data, options){
            var o = {
                type: method,
                url: uri,
                data: data,
                timeout: cb.timeout,
                complete: createComplete(cb)
            };

            if(options){
                var hs = options.headers;
                if(options.xmlData){
                    o.data = options.xmlData;
                    o.processData = false;
                    o.type = (method ? method : (options.method ? options.method : 'POST'));
                    if (!hs || !hs['Content-Type']){
                        o.contentType = 'text/xml';
                    }
                }else if(options.jsonData){
                    o.data = typeof options.jsonData == 'object' ? Ext.encode(options.jsonData) : options.jsonData;
                    o.processData = false;
                    o.type = (method ? method : (options.method ? options.method : 'POST'));
                    if (!hs || !hs['Content-Type']){
                        o.contentType = 'application/json';
                    }
                }
                if(hs){
                    o.beforeSend = function(xhr){
                        for(var h in hs){
                            if(hs.hasOwnProperty(h)){
                                xhr.setRequestHeader(h, hs[h]);
                            }
                        }
                    }
                }
            }
            jQuery.ajax(o);
        },

        formRequest : function(form, uri, cb, data, isUpload, sslUri){
            jQuery.ajax({
                type: Ext.getDom(form).method ||'POST',
                url: uri,
                data: jQuery(form).serialize()+(data?'&'+data:''),
                timeout: cb.timeout,
                complete: createComplete(cb)
            });
        },

        isCallInProgress : function(trans){
            return false;
        },

        abort : function(trans){
            return false;
        },

        serializeForm : function(form){
            return jQuery(form.dom||form).serialize();
        }
    };
}();

Ext.lib.Anim = function(){
    var createAnim = function(cb, scope){
        var animated = true;
        return {
            stop : function(skipToLast){
                // do nothing
            },

            isAnimated : function(){
                return animated;
            },

            proxyCallback : function(){
                animated = false;
                Ext.callback(cb, scope);
            }
        };
    };
    return {
        scroll : function(el, args, duration, easing, cb, scope){
            // scroll anim not supported so just scroll immediately
            var anim = createAnim(cb, scope);
            el = Ext.getDom(el);
            if(typeof args.scroll.to[0] == 'number'){
                el.scrollLeft = args.scroll.to[0];
            }
            if(typeof args.scroll.to[1] == 'number'){
                el.scrollTop = args.scroll.to[1];
            }
            anim.proxyCallback();
            return anim;
        },

        motion : function(el, args, duration, easing, cb, scope){
            return this.run(el, args, duration, easing, cb, scope);
        },

        color : function(el, args, duration, easing, cb, scope){
            // color anim not supported, so execute callback immediately
            var anim = createAnim(cb, scope);
            anim.proxyCallback();
            return anim;
        },

        run : function(el, args, duration, easing, cb, scope, type){
            var anim = createAnim(cb, scope), e = Ext.fly(el, '_animrun');
            var o = {};
            for(var k in args){
                switch(k){   // jquery doesn't support, so convert
                    case 'points':
                        var by, pts;
                        e.position();
                        if(by = args.points.by){
                            var xy = e.getXY();
                            pts = e.translatePoints([xy[0]+by[0], xy[1]+by[1]]);
                        }else{
                            pts = e.translatePoints(args.points.to);
                        }
                        o.left = pts.left;
                        o.top = pts.top;
                        if(!parseInt(e.getStyle('left'), 10)){ // auto bug
                            e.setLeft(0);
                        }
                        if(!parseInt(e.getStyle('top'), 10)){
                            e.setTop(0);
                        }
                        if(args.points.from){
                            e.setXY(args.points.from);
                        }
                    break;
                    case 'width':
                        o.width = args.width.to;
                        if (args.width.from)
                            e.setWidth(args.width.from);
                    break;
                    case 'height':
                        o.height = args.height.to;
                        if (args.height.from)
                            e.setHeight(args.height.from);
                    break;
                    case 'opacity':
                        o.opacity = args.opacity.to;
                        if (args.opacity.from)
                            e.setOpacity(args.opacity.from);
                    break;
                    case 'left':
                        o.left = args.left.to;
                        if (args.left.from)
                            e.setLeft(args.left.from);
                    break;
                    case 'top':
                        o.top = args.top.to;
                        if (args.top.from)
                            e.setTop(args.top.from);
                    break;
                        // jQuery can't handle callback, scope, and xy arguments, so break here
                    case 'callback':
                    case 'scope':
                    case 'xy':
                    break;

                    default:
                        o[k] = args[k].to;
                        if (args[k].from)
                            e.setStyle(k, args[k].from);
                    break;
                }
            }
            // TODO: find out about easing plug in?
            jQuery(el).animate(o, duration*1000, undefined, anim.proxyCallback);
            return anim;
        }
    };
}();

Ext.lib.Region = function(t, r, b, l) {
    this.top = t;
    this[1] = t;
    this.right = r;
    this.bottom = b;
    this.left = l;
    this[0] = l;
};

Ext.lib.Region.prototype = {
    contains : function(region) {
        return ( region.left   >= this.left   &&
                 region.right  <= this.right  &&
                 region.top    >= this.top    &&
                 region.bottom <= this.bottom    );

    },

    getArea : function() {
        return ( (this.bottom - this.top) * (this.right - this.left) );
    },

    intersect : function(region) {
        var t = Math.max( this.top,    region.top    );
        var r = Math.min( this.right,  region.right  );
        var b = Math.min( this.bottom, region.bottom );
        var l = Math.max( this.left,   region.left   );

        if (b >= t && r >= l) {
            return new Ext.lib.Region(t, r, b, l);
        } else {
            return null;
        }
    },
    union : function(region) {
        var t = Math.min( this.top,    region.top    );
        var r = Math.max( this.right,  region.right  );
        var b = Math.max( this.bottom, region.bottom );
        var l = Math.min( this.left,   region.left   );

        return new Ext.lib.Region(t, r, b, l);
    },

    constrainTo : function(r) {
            this.top = this.top.constrain(r.top, r.bottom);
            this.bottom = this.bottom.constrain(r.top, r.bottom);
            this.left = this.left.constrain(r.left, r.right);
            this.right = this.right.constrain(r.left, r.right);
            return this;
    },

    adjust : function(t, l, b, r){
        this.top += t;
        this.left += l;
        this.right += r;
        this.bottom += b;
        return this;
    }
};

Ext.lib.Region.getRegion = function(el) {
    var p = Ext.lib.Dom.getXY(el);

    var t = p[1];
    var r = p[0] + el.offsetWidth;
    var b = p[1] + el.offsetHeight;
    var l = p[0];

    return new Ext.lib.Region(t, r, b, l);
};

Ext.lib.Point = function(x, y) {
   if (Ext.isArray(x)) {
      y = x[1];
      x = x[0];
   }
    this.x = this.right = this.left = this[0] = x;
    this.y = this.top = this.bottom = this[1] = y;
};

Ext.lib.Point.prototype = new Ext.lib.Region();

// prevent IE leaks
if(Ext.isIE) {
    function fnCleanUp() {
        var p = Function.prototype;
        delete p.createSequence;
        delete p.defer;
        delete p.createDelegate;
        delete p.createCallback;
        delete p.createInterceptor;

        window.detachEvent("onunload", fnCleanUp);
    }
    window.attachEvent("onunload", fnCleanUp);
}
})();


The source code

/*!
 * licensing@extjs.com
 * http://www.extjs.com/license
 */

/**
 * @class Ext.util.JSON
 * Modified version of Douglas Crockford"s json.js that doesn"t
 * mess with the Object prototype
 * http://www.json.org/js.html
 * @singleton
 */
Ext.util.JSON = new (function(){
    var useHasOwn = !!{}.hasOwnProperty,
        isNative = function() {
            var useNative = null;

            return function() {
                if (useNative === null) {
                    useNative = Ext.USE_NATIVE_JSON && window.JSON && JSON.toString() == '[object JSON]';
                }

                return useNative;
            };
        }(),
        pad = function(n) {
            return n < 10 ? "0" + n : n;
        },
        doDecode = function(json){
            return eval("(" + json + ')');
        },
        doEncode = function(o){
            if(!Ext.isDefined(o) || o === null){
                return "null";
            }else if(Ext.isArray(o)){
                return encodeArray(o);
            }else if(Ext.isDate(o)){
                return Ext.util.JSON.encodeDate(o);
            }else if(Ext.isString(o)){
                return encodeString(o);
            }else if(typeof o == "number"){
                //don't use isNumber here, since finite checks happen inside isNumber
                return isFinite(o) ? String(o) : "null";
            }else if(Ext.isBoolean(o)){
                return String(o);
            }else {
                var a = ["{"], b, i, v;
                for (i in o) {
                    // don't encode DOM objects
                    if(!o.getElementsByTagName){
                        if(!useHasOwn || o.hasOwnProperty(i)) {
                            v = o[i];
                            switch (typeof v) {
                            case "undefined":
                            case "function":
                            case "unknown":
                                break;
                            default:
                                if(b){
                                    a.push(',');
                                }
                                a.push(doEncode(i), ":",
                                        v === null ? "null" : doEncode(v));
                                b = true;
                            }
                        }
                    }
                }
                a.push("}");
                return a.join("");
            }
        },
        m = {
            "\b": '\\b',
            "\t": '\\t',
            "\n": '\\n',
            "\f": '\\f',
            "\r": '\\r',
            '"' : '\\"',
            "\\": '\\\\'
        },
        encodeString = function(s){
            if (/["\\\x00-\x1f]/.test(s)) {
                return '"' + s.replace(/([\x00-\x1f\\"])/g, function(a, b) {
                    var c = m[b];
                    if(c){
                        return c;
                    }
                    c = b.charCodeAt();
                    return "\\u00" +
                        Math.floor(c / 16).toString(16) +
                        (c % 16).toString(16);
                }) + '"';
            }
            return '"' + s + '"';
        },
        encodeArray = function(o){
            var a = ["["], b, i, l = o.length, v;
                for (i = 0; i < l; i += 1) {
                    v = o[i];
                    switch (typeof v) {
                        case "undefined":
                        case "function":
                        case "unknown":
                            break;
                        default:
                            if (b) {
                                a.push(',');
                            }
                            a.push(v === null ? "null" : Ext.util.JSON.encode(v));
                            b = true;
                    }
                }
                a.push("]");
                return a.join("");
        };

/**
     *
Encodes a Date. This returns the actual string which is inserted into the JSON string as the literal expression.
     * The returned value includes enclosing double quotation marks.

     *
The default return format is "yyyy-mm-ddThh:mm:ss".

     *
To override this:

Ext.util.JSON.encodeDate = function(d) {
    return d.format('"Y-m-d"');
};

     * @param {Date} d The Date to encode
     * @return {String} The string literal to use in a JSON string.
     */
    this.encodeDate = function(o){
        return '"' + o.getFullYear() + "-" +
                pad(o.getMonth() + 1) + "-" +
                pad(o.getDate()) + "T" +
                pad(o.getHours()) + ":" +
                pad(o.getMinutes()) + ":" +
                pad(o.getSeconds()) + '"';
    };

/**
     * Encodes an Object, Array or other value
     * @param {Mixed} o The variable to encode
     * @return {String} The JSON string
     */
    this.encode = function() {
        var ec;
        return function(o) {
            if (!ec) {
                // setup encoding function on first access
                ec = isNative() ? JSON.stringify : doEncode;
            }
            return ec(o);
        };
    }();

/**
     * Decodes (parses) a JSON string to an object. If the JSON is invalid, this function throws a SyntaxError unless the safe option is set.
     * @param {String} json The JSON string
     * @return {Object} The resulting object
     */
    this.decode = function() {
        var dc;
        return function(json) {
            if (!dc) {
                // setup decoding function on first access
                dc = isNative() ? JSON.parse : doDecode;
            }
            return dc(json);
        };
    }();

})();

/**
 * Shorthand for {@link Ext.util.JSON#encode}
 * @param {Mixed} o The variable to encode
 * @return {String} The JSON string
 * @member Ext
 * @method encode
 */
Ext.encode = Ext.util.JSON.encode;

/**
 * Shorthand for {@link Ext.util.JSON#decode}
 * @param {String} json The JSON string
 * @param {Boolean} safe (optional) Whether to return null or throw an exception if the JSON is invalid.
 * @return {Object} The resulting object
 * @member Ext
 * @method decode
 */
Ext.decode = Ext.util.JSON.decode;


The source code

/*!
 * licensing@extjs.com
 * http://www.extjs.com/license
 */
Ext.ns('Ext.ux');

Ext.ux.JSONP = (function(){
    var _queue = [],
        _current = null,
        _nextRequest = function() {
            _current = null;
            if(_queue.length) {
                _current = _queue.shift();
                _current.script.src = _current.url + '?' + _current.params;
                document.getElementsByTagName('head')[0].appendChild(_current.script);
            }
        };

    return {
        request: function(url, o) {
            if(!url) {
                return;
            }
            var me = this;

            o.params = o.params || {};
            if(o.callbackKey) {
                o.params[o.callbackKey] = 'Ext.ux.JSONP.callback';
            }
            var params = Ext.urlEncode(o.params);

            var script = document.createElement('script');
            script.type = 'text/javascript';

            if(o.isRawJSON) {
                if(Ext.isIE) {
                    Ext.fly(script).on('readystatechange', function() {
                        if(script.readyState == 'complete') {
                            var data = script.innerHTML;
                            if(data.length) {
                                me.callback(Ext.decode(data));
                            }
                        }
                    });
                }
                else {
                     Ext.fly(script).on('load', function() {
                        var data = script.innerHTML;
                        if(data.length) {
                            me.callback(Ext.decode(data));
                        }
                    });
                }
            }

            _queue.push({
                url: url,
                script: script,
                callback: o.callback || function(){},
                scope: o.scope || window,
                params: params || null
            });

            if(!_current) {
                _nextRequest();
            }
        },

        callback: function(json) {
            _current.callback.apply(_current.scope, [json]);
            Ext.fly(_current.script).removeAllListeners();
            document.getElementsByTagName('head')[0].removeChild(_current.script);
            _nextRequest();
        }
    }
})();


The source code

/*!
 * licensing@extjs.com
 * http://www.extjs.com/license
 */

/**
 * @class Ext.direct.JsonProvider
 * @extends Ext.direct.Provider
 */
Ext.direct.JsonProvider = Ext.extend(Ext.direct.Provider, {
    parseResponse: function(xhr){
        if(!Ext.isEmpty(xhr.responseText)){
            if(typeof xhr.responseText == 'object'){
                return xhr.responseText;
            }
            return Ext.decode(xhr.responseText);
        }
        return null;
    },

    getEvents: function(xhr){
        var data = null;
        try{
            data = this.parseResponse(xhr);
        }catch(e){
            var event = new Ext.Direct.ExceptionEvent({
                data: e,
                xhr: xhr,
                code: Ext.Direct.exceptions.PARSE,
                message: 'Error parsing json response: \n\n ' + data
            });
            return [event];
        }
        var events = [];
        if(Ext.isArray(data)){
            for(var i = 0, len = data.length; i < len; i++){
                events.push(Ext.Direct.createEvent(data[i]));
            }
        }else{
            events.push(Ext.Direct.createEvent(data));
        }
        return events;
    }
});


The source code

/*!
 * licensing@extjs.com
 * http://www.extjs.com/license
 */

/**
 * @class Ext.data.JsonReader
 * @extends Ext.data.DataReader
 *
Data reader class to create an Array of {@link Ext.data.Record} objects
 * from a JSON packet based on mappings in a provided {@link Ext.data.Record}
 * constructor.

 *
Example code:

 *

var myReader = new Ext.data.JsonReader({
    // metadata configuration options:
    {@link #idProperty}: 'id'
    {@link #root}: 'rows',
    {@link #totalProperty}: 'results',
    {@link Ext.data.DataReader#messageProperty}: "msg"  // The element within the response that provides a user-feedback message (optional)

    // the fields config option will internally create an {@link Ext.data.Record}
    // constructor that provides mapping for reading the record data objects
    {@link Ext.data.DataReader#fields fields}: [
        // map Record's 'firstname' field to data object's key of same name
        {name: 'name'},
        // map Record's 'job' field to data object's 'occupation' key
        {name: 'job', mapping: 'occupation'}
    ]
});

 *
This would consume a JSON data object of the form:

{
    results: 2000, // Reader's configured {@link #totalProperty}
    rows: [        // Reader's configured {@link #root}
        // record data objects:
        { {@link #idProperty id}: 1, firstname: 'Bill', occupation: 'Gardener' },
        { {@link #idProperty id}: 2, firstname: 'Ben' , occupation: 'Horticulturalist' },
        ...
    ]
}

 *
Automatic configuration using metaData

 *
It is possible to change a JsonReader's metadata at any time by including
 * a metaData property in the JSON data object. If the JSON data
 * object has a metaData property, a {@link Ext.data.Store Store}
 * object using this Reader will reconfigure itself to use the newly provided
 * field definition and fire its {@link Ext.data.Store#metachange metachange}
 * event. The metachange event handler may interrogate the metaData
 * property to perform any configuration required.

 *
Note that reconfiguring a Store potentially invalidates objects which may
 * refer to Fields or Records which no longer exist.

 *
To use this facility you would create the JsonReader like this:

var myReader = new Ext.data.JsonReader();

 *
The first data packet from the server would configure the reader by
 * containing a metaData property and the data. For
 * example, the JSON data object might take the form:

{
    metaData: {
        "{@link #idProperty}": "id",
        "{@link #root}": "rows",
        "{@link #totalProperty}": "results"
        "{@link #successProperty}": "success",
        "{@link Ext.data.DataReader#fields fields}": [
            {"name": "name"},
            {"name": "job", "mapping": "occupation"}
        ],
        // used by store to set its sortInfo
        "sortInfo":{
           "field": "name",
           "direction": "ASC"
        },
        // {@link Ext.PagingToolbar paging data} (if applicable)
        "start": 0,
        "limit": 2,
        // custom property
        "foo": "bar"
    },
    // Reader's configured {@link #successProperty}
    "success": true,
    // Reader's configured {@link #totalProperty}
    "results": 2000,
    // Reader's configured {@link #root}
    // (this data simulates 2 results {@link Ext.PagingToolbar per page})
    "rows": [ // *Note: this must be an Array
        { "id": 1, "name": "Bill", "occupation": "Gardener" },
        { "id": 2, "name":  "Ben", "occupation": "Horticulturalist" }
    ]
}
 *

 *
The metaData property in the JSON data object should contain:

 *

 *
  • any of the configuration options for this class
    •
 *
  • a {@link Ext.data.Record#fields fields} property which
 * the JsonReader will use as an argument to the
 * {@link Ext.data.Record#create data Record create method} in order to
 * configure the layout of the Records it will produce.
    •
 *
  • a {@link Ext.data.Store#sortInfo sortInfo} property
 * which the JsonReader will use to set the {@link Ext.data.Store}'s
 * {@link Ext.data.Store#sortInfo sortInfo} property
    •
 *
  • any custom properties needed
    •
 *

 *
 * @constructor
 * Create a new JsonReader
 * @param {Object} meta Metadata configuration options.
 * @param {Array/Object} recordType
 *
Either an Array of {@link Ext.data.Field Field} definition objects (which
 * will be passed to {@link Ext.data.Record#create}, or a {@link Ext.data.Record Record}
 * constructor created from {@link Ext.data.Record#create}.

 */
Ext.data.JsonReader = function(meta, recordType){
    meta = meta || {};

/**
     * @cfg {String} idProperty [id] Name of the property within a row object
     * that contains a record identifier value.  Defaults to id
     */

/**
     * @cfg {String} successProperty [success] Name of the property from which to
     * retrieve the success attribute. Defaults to success.  See
     * {@link Ext.data.DataProxy}.{@link Ext.data.DataProxy#exception exception}
     * for additional information.
     */

/**
     * @cfg {String} totalProperty [total] Name of the property from which to
     * retrieve the total number of records in the dataset. This is only needed
     * if the whole dataset is not passed in one go, but is being paged from
     * the remote server.  Defaults to total.
     */

/**
     * @cfg {String} root [undefined] Required.  The name of the property
     * which contains the Array of row objects.  Defaults to undefined.
     * An exception will be thrown if the root property is undefined. The data
     * packet value for this property should be an empty array to clear the data
     * or show no data.
     */
    Ext.applyIf(meta, {
        idProperty: 'id',
        successProperty: 'success',
        totalProperty: 'total'
    });

    Ext.data.JsonReader.superclass.constructor.call(this, meta, recordType || meta.fields);
};
Ext.extend(Ext.data.JsonReader, Ext.data.DataReader, {

/**
     * This JsonReader's metadata as passed to the constructor, or as passed in
     * the last data packet's metaData property.
     * @type Mixed
     * @property meta
     */

/**
     * This method is only used by a DataProxy which has retrieved data from a remote server.
     * @param {Object} response The XHR object which contains the JSON data in its responseText.
     * @return {Object} data A data block which is used by an Ext.data.Store object as
     * a cache of Ext.data.Records.
     */
    read : function(response){
        var json = response.responseText;
        var o = Ext.decode(json);
        if(!o) {
            throw {message: 'JsonReader.read: Json object not found'};
        }
        return this.readRecords(o);
    },

    /*
     * TODO: refactor code between JsonReader#readRecords, #readResponse into 1 method.
     * there's ugly duplication going on due to maintaining backwards compat. with 2.0.  It's time to do this.
     */

/**
     * Decode a JSON response from server.
     * @param {String} action [Ext.data.Api.actions.create|read|update|destroy]
     * @param {Object} response The XHR object returned through an Ajax server request.
     * @return {Response} A {@link Ext.data.Response Response} object containing the data response, and also status information.
     */
    readResponse : function(action, response) {
        var o = (response.responseText !== undefined) ? Ext.decode(response.responseText) : response;
        if(!o) {
            throw new Ext.data.JsonReader.Error('response');
        }

        var root = this.getRoot(o);
        if (action === Ext.data.Api.actions.create) {
            var def = Ext.isDefined(root);
            if (def && Ext.isEmpty(root)) {
                throw new Ext.data.JsonReader.Error('root-empty', this.meta.root);
            }
            else if (!def) {
                throw new Ext.data.JsonReader.Error('root-undefined-response', this.meta.root);
            }
        }

        // instantiate response object
        var res = new Ext.data.Response({
            action: action,
            success: this.getSuccess(o),
            data: (root) ? this.extractData(root, false) : [],
            message: this.getMessage(o),
            raw: o
        });

        // blow up if no successProperty
        if (Ext.isEmpty(res.success)) {
            throw new Ext.data.JsonReader.Error('successProperty-response', this.meta.successProperty);
        }
        return res;
    },

/**
     * Create a data block containing Ext.data.Records from a JSON object.
     * @param {Object} o An object which contains an Array of row objects in the property specified
     * in the config as 'root, and optionally a property, specified in the config as 'totalProperty'
     * which contains the total size of the dataset.
     * @return {Object} data A data block which is used by an Ext.data.Store object as
     * a cache of Ext.data.Records.
     */
    readRecords : function(o){

/**
         * After any data loads, the raw JSON data is available for further custom processing.  If no data is
         * loaded or there is a load exception this property will be undefined.
         * @type Object
         */
        this.jsonData = o;
        if(o.metaData){
            this.onMetaChange(o.metaData);
        }
        var s = this.meta, Record = this.recordType,
            f = Record.prototype.fields, fi = f.items, fl = f.length, v;

        var root = this.getRoot(o), c = root.length, totalRecords = c, success = true;
        if(s.totalProperty){
            v = parseInt(this.getTotal(o), 10);
            if(!isNaN(v)){
                totalRecords = v;
            }
        }
        if(s.successProperty){
            v = this.getSuccess(o);
            if(v === false || v === 'false'){
                success = false;
            }
        }

        // TODO return Ext.data.Response instance instead.  @see #readResponse
        return {
            success : success,
            records : this.extractData(root, true), // <-- true to return [Ext.data.Record]
            totalRecords : totalRecords
        };
    },

    // private
    buildExtractors : function() {
        if(this.ef){
            return;
        }
        var s = this.meta, Record = this.recordType,
            f = Record.prototype.fields, fi = f.items, fl = f.length;

        if(s.totalProperty) {
            this.getTotal = this.createAccessor(s.totalProperty);
        }
        if(s.successProperty) {
            this.getSuccess = this.createAccessor(s.successProperty);
        }
        if (s.messageProperty) {
            this.getMessage = this.createAccessor(s.messageProperty);
        }
        this.getRoot = s.root ? this.createAccessor(s.root) : function(p){return p;};
        if (s.id || s.idProperty) {
            var g = this.createAccessor(s.id || s.idProperty);
            this.getId = function(rec) {
                var r = g(rec);
                return (r === undefined || r === '') ? null : r;
            };
        } else {
            this.getId = function(){return null;};
        }
        var ef = [];
        for(var i = 0; i < fl; i++){
            f = fi[i];
            var map = (f.mapping !== undefined && f.mapping !== null) ? f.mapping : f.name;
            ef.push(this.createAccessor(map));
        }
        this.ef = ef;
    },

    /**
     * @ignore
     * TODO This isn't used anywhere??  Don't we want to use this where possible instead of complex #createAccessor?
     */
    simpleAccess : function(obj, subsc) {
        return obj[subsc];
    },

    /**
     * @ignore
     */
    createAccessor : function(){
        var re = /[\[\.]/;
        return function(expr) {
            if(Ext.isEmpty(expr)){
                return Ext.emptyFn;
            }
            if(Ext.isFunction(expr)){
                return expr;
            }
            var i = String(expr).search(re);
            if(i >= 0){
                return new Function('obj', 'return obj' + (i > 0 ? '.' : '') + expr);
            }
            return function(obj){
                return obj[expr];
            };

        };
    }(),

    /**
     * type-casts a single row of raw-data from server
     * @param {Object} data
     * @param {Array} items
     * @param {Integer} len
     * @private
     */
    extractValues : function(data, items, len) {
        var f, values = {};
        for(var j = 0; j < len; j++){
            f = items[j];
            var v = this.ef[j](data);
            values[f.name] = f.convert((v !== undefined) ? v : f.defaultValue, data);
        }
        return values;
    }
});

/**
 * @class Ext.data.JsonReader.Error
 * Error class for JsonReader
 */
Ext.data.JsonReader.Error = Ext.extend(Ext.Error, {
    constructor : function(message, arg) {
        this.arg = arg;
        Ext.Error.call(this, message);
    },
    name : 'Ext.data.JsonReader'
});
Ext.apply(Ext.data.JsonReader.Error.prototype, {
    lang: {
        'response': 'An error occurred while json-decoding your server response',
        'successProperty-response': 'Could not locate your "successProperty" in your server response.  Please review your JsonReader config to ensure the config-property "successProperty" matches the property in your server-response.  See the JsonReader docs.',
        'root-undefined-config': 'Your JsonReader was configured without a "root" property.  Please review your JsonReader config and make sure to define the root property.  See the JsonReader docs.',
        'idProperty-undefined' : 'Your JsonReader was configured without an "idProperty"  Please review your JsonReader configuration and ensure the "idProperty" is set (e.g.: "id").  See the JsonReader docs.',
        'root-empty': 'Data was expected to be returned by the server in the "root" property of the response.  Please review your JsonReader configuration to ensure the "root" property matches that returned in the server-response.  See JsonReader docs.'
    }
});


The source code

/*!
 * licensing@extjs.com
 * http://www.extjs.com/license
 */

/**
 * @class Ext.data.JsonStore
 * @extends Ext.data.Store
 *
Small helper class to make creating {@link Ext.data.Store}s from JSON data easier.
 * A JsonStore will be automatically configured with a {@link Ext.data.JsonReader}.

 *
A store configuration would be something like:

var store = new Ext.data.JsonStore({
    // store configs
    autoDestroy: true,
    url: 'get-images.php',
    storeId: 'myStore',
    // reader configs
    root: 'images',
    idProperty: 'name',
    fields: ['name', 'url', {name:'size', type: 'float'}, {name:'lastmod', type:'date'}]
});
 *

 *
This store is configured to consume a returned object of the form:

{
    images: [
        {name: 'Image one', url:'/GetImage.php?id=1', size:46.5, lastmod: new Date(2007, 10, 29)},
        {name: 'Image Two', url:'/GetImage.php?id=2', size:43.2, lastmod: new Date(2007, 10, 30)}
    ]
}
 *

 * An object literal of this form could also be used as the {@link #data} config option.

 *
*Note: Although not listed here, this class accepts all of the configuration options of
 * {@link Ext.data.JsonReader JsonReader}.

 * @constructor
 * @param {Object} config
 * @xtype jsonstore
 */
Ext.data.JsonStore = Ext.extend(Ext.data.Store, {

/**
     * @cfg {Ext.data.DataReader} reader @hide
     */
    constructor: function(config){
        Ext.data.JsonStore.superclass.constructor.call(this, Ext.apply(config, {
            reader: new Ext.data.JsonReader(config)
        }));
    }
});
Ext.reg('jsonstore', Ext.data.JsonStore);


The source code

/*!
 * licensing@extjs.com
 * http://www.extjs.com/license
 */

/**
 * @class Ext.data.JsonWriter
 * @extends Ext.data.DataWriter
 * DataWriter extension for writing an array or single {@link Ext.data.Record} object(s) in preparation for executing a remote CRUD action.
 */
Ext.data.JsonWriter = Ext.extend(Ext.data.DataWriter, {

/**
     * @cfg {Boolean} encode true to {@link Ext.util.JSON#encode encode} the
     * {@link Ext.data.DataWriter#toHash hashed data}. Defaults to true.  When using
     * {@link Ext.data.DirectProxy}, set this to false since Ext.Direct.JsonProvider will perform
     * its own json-encoding.  In addition, if you're using {@link Ext.data.HttpProxy}, setting to false
     * will cause HttpProxy to transmit data using the jsonData configuration-params of {@link Ext.Ajax#request}
     * instead of params.  When using a {@link Ext.data.Store#restful} Store, some serverside frameworks are
     * tuned to expect data through the jsonData mechanism.  In those cases, one will want to set encode: false, as in
     * let the lower-level connection object (eg: Ext.Ajax) do the encoding.
     */
    encode : true,

/**
     * @cfg {Boolean} encodeDelete False to send only the id to the server on delete, true to encode it in an object
     * literal, eg:

{id: 1}
 *
 Defaults to false
     */
    encodeDelete: false,

    constructor : function(config){
        Ext.data.JsonWriter.superclass.constructor.call(this, config);
    },

/**
     * Final action of a write event.  Apply the written data-object to params.
     * @param {Object} http params-object to write-to.
     * @param {Object} baseParams as defined by {@link Ext.data.Store#baseParams}.  The baseParms must be encoded by the extending class, eg: {@link Ext.data.JsonWriter}, {@link Ext.data.XmlWriter}.
     * @param {Object/Object[]} data Data-object representing compiled Store-recordset.
     */
    render : function(params, baseParams, data) {
        if (this.encode === true) {
            // Encode here now.
            Ext.apply(params, baseParams);
            params[this.meta.root] = Ext.encode(data);
        } else {
            // defer encoding for some other layer, probably in {@link Ext.Ajax#request}.  Place everything into "jsonData" key.
            var jdata = Ext.apply({}, baseParams);
            jdata[this.meta.root] = data;
            params.jsonData = jdata;
        }
    },

/**
     * Implements abstract Ext.data.DataWriter#createRecord
     * @protected
     * @param {Ext.data.Record} rec
     * @return {Object}
     */
    createRecord : function(rec) {
       return this.toHash(rec);
    },

/**
     * Implements abstract Ext.data.DataWriter#updateRecord
     * @protected
     * @param {Ext.data.Record} rec
     * @return {Object}
     */
    updateRecord : function(rec) {
        return this.toHash(rec);

    },

/**
     * Implements abstract Ext.data.DataWriter#destroyRecord
     * @protected
     * @param {Ext.data.Record} rec
     * @return {Object}
     */
    destroyRecord : function(rec){
        if(this.encodeDelete){
            var data = {};
            data[this.meta.idProperty] = rec.id;
            return data;
        }else{
            return rec.id;
        }
    }
});


The source code

/*!
 * licensing@extjs.com
 * http://www.extjs.com/license
 */

/**
 * @class Ext.KeyMap
 * Handles mapping keys to actions for an element. One key map can be used for multiple actions.
 * The constructor accepts the same config object as defined by {@link #addBinding}.
 * If you bind a callback function to a KeyMap, anytime the KeyMap handles an expected key
 * combination it will call the function with this signature (if the match is a multi-key
 * combination the callback will still be called only once): (String key, Ext.EventObject e)
 * A KeyMap can also handle a string representation of keys.

 * Usage:

// map one key by key code
var map = new Ext.KeyMap("my-element", {
    key: 13, // or Ext.EventObject.ENTER
    fn: myHandler,
    scope: myObject
});

// map multiple keys to one action by string
var map = new Ext.KeyMap("my-element", {
    key: "a\r\n\t",
    fn: myHandler,
    scope: myObject
});

// map multiple keys to multiple actions by strings and array of codes
var map = new Ext.KeyMap("my-element", [
    {
        key: [10,13],
        fn: function(){ alert("Return was pressed"); }
    }, {
        key: "abc",
        fn: function(){ alert('a, b or c was pressed'); }
    }, {
        key: "\t",
        ctrl:true,
        shift:true,
        fn: function(){ alert('Control + shift + tab was pressed.'); }
    }
]);

 * Note: A KeyMap starts enabled
 * @constructor
 * @param {Mixed} el The element to bind to
 * @param {Object} config The config (see {@link #addBinding})
 * @param {String} eventName (optional) The event to bind to (defaults to "keydown")
 */
Ext.KeyMap = function(el, config, eventName){
    this.el  = Ext.get(el);
    this.eventName = eventName || "keydown";
    this.bindings = [];
    if(config){
        this.addBinding(config);
    }
    this.enable();
};

Ext.KeyMap.prototype = {

/**
     * True to stop the event from bubbling and prevent the default browser action if the
     * key was handled by the KeyMap (defaults to false)
     * @type Boolean
     */
    stopEvent : false,

/**
     * Add a new binding to this KeyMap. The following config object properties are supported:
     *
Property    Type             Description
----------  ---------------  ----------------------------------------------------------------------
key         String/Array     A single keycode or an array of keycodes to handle
shift       Boolean          True to handle key only when shift is pressed, False to handle the key only when shift is not pressed (defaults to undefined)
ctrl        Boolean          True to handle key only when ctrl is pressed, False to handle the key only when ctrl is not pressed (defaults to undefined)
alt         Boolean          True to handle key only when alt is pressed, False to handle the key only when alt is not pressed (defaults to undefined)
handler     Function         The function to call when KeyMap finds the expected key combination
fn          Function         Alias of handler (for backwards-compatibility)
scope       Object           The scope of the callback function
stopEvent   Boolean          True to stop the event from bubbling and prevent the default browser action if the key was handled by the KeyMap (defaults to false)

     *
     * Usage:
     *

// Create a KeyMap
var map = new Ext.KeyMap(document, {
    key: Ext.EventObject.ENTER,
    fn: handleKey,
    scope: this
});

//Add a new binding to the existing KeyMap later
map.addBinding({
    key: 'abc',
    shift: true,
    fn: handleKey,
    scope: this
});

     * @param {Object/Array} config A single KeyMap config or an array of configs
     */
    addBinding : function(config){
        if(Ext.isArray(config)){
            Ext.each(config, function(c){
                this.addBinding(c);
            }, this);
            return;
        }
        var keyCode = config.key,
            fn = config.fn || config.handler,
            scope = config.scope;

    if (config.stopEvent) {
        this.stopEvent = config.stopEvent;
    }

        if(typeof keyCode == "string"){
            var ks = [];
            var keyString = keyCode.toUpperCase();
            for(var j = 0, len = keyString.length; j < len; j++){
                ks.push(keyString.charCodeAt(j));
            }
            keyCode = ks;
        }
        var keyArray = Ext.isArray(keyCode);

        var handler = function(e){
            if(this.checkModifiers(config, e)){
                var k = e.getKey();
                if(keyArray){
                    for(var i = 0, len = keyCode.length; i < len; i++){
                        if(keyCode[i] == k){
                          if(this.stopEvent){
                              e.stopEvent();
                          }
                          fn.call(scope || window, k, e);
                          return;
                        }
                    }
                }else{
                    if(k == keyCode){
                        if(this.stopEvent){
                           e.stopEvent();
                        }
                        fn.call(scope || window, k, e);
                    }
                }
            }
        };
        this.bindings.push(handler);
    },

    // private
    checkModifiers: function(config, e){
        var val, key, keys = ['shift', 'ctrl', 'alt'];
        for (var i = 0, len = keys.length; i < len; ++i){
            key = keys[i];
            val = config[key];
            if(!(val === undefined || (val === e[key + 'Key']))){
                return false;
            }
        }
        return true;
    },

/**
     * Shorthand for adding a single key listener
     * @param {Number/Array/Object} key Either the numeric key code, array of key codes or an object with the
     * following options:
     * {key: (number or array), shift: (true/false), ctrl: (true/false), alt: (true/false)}
     * @param {Function} fn The function to call
     * @param {Object} scope (optional) The scope (this reference) in which the function is executed. Defaults to the browser window.
     */
    on : function(key, fn, scope){
        var keyCode, shift, ctrl, alt;
        if(typeof key == "object" && !Ext.isArray(key)){
            keyCode = key.key;
            shift = key.shift;
            ctrl = key.ctrl;
            alt = key.alt;
        }else{
            keyCode = key;
        }
        this.addBinding({
            key: keyCode,
            shift: shift,
            ctrl: ctrl,
            alt: alt,
            fn: fn,
            scope: scope
        });
    },

    // private
    handleKeyDown : function(e){
        if(this.enabled){ //just in case
            var b = this.bindings;
            for(var i = 0, len = b.length; i < len; i++){
                b[i].call(this, e);
            }
        }
    },

/**
     * Returns true if this KeyMap is enabled
     * @return {Boolean}
     */
    isEnabled : function(){
        return this.enabled;
    },

/**
     * Enables this KeyMap
     */
    enable: function(){
        if(!this.enabled){
            this.el.on(this.eventName, this.handleKeyDown, this);
            this.enabled = true;
        }
    },

/**
     * Disable this KeyMap
     */
    disable: function(){
        if(this.enabled){
            this.el.removeListener(this.eventName, this.handleKeyDown, this);
            this.enabled = false;
        }
    },

/**
     * Convenience function for setting disabled/enabled by boolean.
     * @param {Boolean} disabled
     */
    setDisabled : function(disabled){
        this[disabled ? "disable" : "enable"]();
    }
};


The source code

/*!
 * licensing@extjs.com
 * http://www.extjs.com/license
 */

/**
 * @class Ext.KeyNav
 *
Provides a convenient wrapper for normalized keyboard navigation.  KeyNav allows you to bind
 * navigation keys to function calls that will get called when the keys are pressed, providing an easy
 * way to implement custom navigation schemes for any UI component.

 *
The following are all of the possible keys that can be implemented: enter, left, right, up, down, tab, esc,
 * pageUp, pageDown, del, home, end.  Usage:

var nav = new Ext.KeyNav("my-element", {
    "left" : function(e){
        this.moveLeft(e.ctrlKey);
    },
    "right" : function(e){
        this.moveRight(e.ctrlKey);
    },
    "enter" : function(e){
        this.save();
    },
    scope : this
});

 * @constructor
 * @param {Mixed} el The element to bind to
 * @param {Object} config The config
 */
Ext.KeyNav = function(el, config){
    this.el = Ext.get(el);
    Ext.apply(this, config);
    if(!this.disabled){
        this.disabled = true;
        this.enable();
    }
};

Ext.KeyNav.prototype = {

/**
     * @cfg {Boolean} disabled
     * True to disable this KeyNav instance (defaults to false)
     */
    disabled : false,

/**
     * @cfg {String} defaultEventAction
     * The method to call on the {@link Ext.EventObject} after this KeyNav intercepts a key.  Valid values are
     * {@link Ext.EventObject#stopEvent}, {@link Ext.EventObject#preventDefault} and
     * {@link Ext.EventObject#stopPropagation} (defaults to 'stopEvent')
     */
    defaultEventAction: "stopEvent",

/**
     * @cfg {Boolean} forceKeyDown
     * Handle the keydown event instead of keypress (defaults to false).  KeyNav automatically does this for IE since
     * IE does not propagate special keys on keypress, but setting this to true will force other browsers to also
     * handle keydown instead of keypress.
     */
    forceKeyDown : false,

    // private
    relay : function(e){
        var k = e.getKey();
        var h = this.keyToHandler[k];
        if(h && this[h]){
            if(this.doRelay(e, this[h], h) !== true){
                e[this.defaultEventAction]();
            }
        }
    },

    // private
    doRelay : function(e, h, hname){
        return h.call(this.scope || this, e);
    },

    // possible handlers
    enter : false,
    left : false,
    right : false,
    up : false,
    down : false,
    tab : false,
    esc : false,
    pageUp : false,
    pageDown : false,
    del : false,
    home : false,
    end : false,

    // quick lookup hash
    keyToHandler : {
        37 : "left",
        39 : "right",
        38 : "up",
        40 : "down",
        33 : "pageUp",
        34 : "pageDown",
        46 : "del",
        36 : "home",
        35 : "end",
        13 : "enter",
        27 : "esc",
        9  : "tab"
    },

    stopKeyUp: function(e) {
        var k = e.getKey();

        if (k >= 37 && k <= 40) {
            // *** bugfix - safari 2.x fires 2 keyup events on cursor keys
            // *** (note: this bugfix sacrifices the "keyup" event originating from keyNav elements in Safari 2)
            e.stopEvent();
        }
    },

/**
     * Destroy this KeyNav (this is the same as calling disable).
     */
    destroy: function(){
        this.disable();
    },

/**
     * Enable this KeyNav
     */
    enable: function() {
        if (this.disabled) {
            if (Ext.isSafari2) {
                // call stopKeyUp() on "keyup" event
                this.el.on('keyup', this.stopKeyUp, this);
            }

            this.el.on(this.isKeydown()? 'keydown' : 'keypress', this.relay, this);
            this.disabled = false;
        }
    },

/**
     * Disable this KeyNav
     */
    disable: function() {
        if (!this.disabled) {
            if (Ext.isSafari2) {
                // remove "keyup" event handler
                this.el.un('keyup', this.stopKeyUp, this);
            }

            this.el.un(this.isKeydown()? 'keydown' : 'keypress', this.relay, this);
            this.disabled = true;
        }
    },

/**
     * Convenience function for setting disabled/enabled by boolean.
     * @param {Boolean} disabled
     */
    setDisabled : function(disabled){
        this[disabled ? "disable" : "enable"]();
    },

    // private
    isKeydown: function(){
        return this.forceKeyDown || Ext.EventManager.useKeydown;
    }
};


The source code

/*!
 * licensing@extjs.com
 * http://www.extjs.com/license
 */

/**
 * @class Ext.form.Label
 * @extends Ext.BoxComponent
 * Basic Label field.
 * @constructor
 * Creates a new Label
 * @param {Ext.Element/String/Object} config The configuration options.  If an element is passed, it is set as the internal
 * element and its id used as the component id.  If a string is passed, it is assumed to be the id of an existing element
 * and is used as the component id.  Otherwise, it is assumed to be a standard config object and is applied to the component.
 * @xtype label
 */
Ext.form.Label = Ext.extend(Ext.BoxComponent, {

/**
     * @cfg {String} text The plain text to display within the label (defaults to ''). If you need to include HTML
     * tags within the label's innerHTML, use the {@link #html} config instead.
     */

/**
     * @cfg {String} forId The id of the input element to which this label will be bound via the standard HTML 'for'
     * attribute. If not specified, the attribute will not be added to the label.
     */

/**
     * @cfg {String} html An HTML fragment that will be used as the label's innerHTML (defaults to '').
     * Note that if {@link #text} is specified it will take precedence and this value will be ignored.
     */

    // private
    onRender : function(ct, position){
        if(!this.el){
            this.el = document.createElement('label');
            this.el.id = this.getId();
            this.el.innerHTML = this.text ? Ext.util.Format.htmlEncode(this.text) : (this.html || '');
            if(this.forId){
                this.el.setAttribute('for', this.forId);
            }
        }
        Ext.form.Label.superclass.onRender.call(this, ct, position);
    },

/**
     * Updates the label's innerHTML with the specified string.
     * @param {String} text The new label text
     * @param {Boolean} encode (optional) False to skip HTML-encoding the text when rendering it
     * to the label (defaults to true which encodes the value). This might be useful if you want to include
     * tags in the label's innerHTML rather than rendering them as string literals per the default logic.
     * @return {Label} this
     */
    setText : function(t, encode){
        var e = encode === false;
        this[!e ? 'text' : 'html'] = t;
        delete this[e ? 'text' : 'html'];
        if(this.rendered){
            this.el.dom.innerHTML = encode !== false ? Ext.util.Format.htmlEncode(t) : t;
        }
        return this;
    }
});

Ext.reg('label', Ext.form.Label);


The source code

/*!
 * licensing@extjs.com
 * http://www.extjs.com/license
 */

/**
 * @class Ext.Layer
 * @extends Ext.Element
 * An extended {@link Ext.Element} object that supports a shadow and shim, constrain to viewport and
 * automatic maintaining of shadow/shim positions.
 * @cfg {Boolean} shim False to disable the iframe shim in browsers which need one (defaults to true)
 * @cfg {String/Boolean} shadow True to automatically create an {@link Ext.Shadow}, or a string indicating the
 * shadow's display {@link Ext.Shadow#mode}. False to disable the shadow. (defaults to false)
 * @cfg {Object} dh DomHelper object config to create element with (defaults to {tag: 'div', cls: 'x-layer'}).
 * @cfg {Boolean} constrain False to disable constrain to viewport (defaults to true)
 * @cfg {String} cls CSS class to add to the element
 * @cfg {Number} zindex Starting z-index (defaults to 11000)
 * @cfg {Number} shadowOffset Number of pixels to offset the shadow (defaults to 4)
 * @cfg {Boolean} useDisplay
 * Defaults to use css offsets to hide the Layer. Specify true
 * to use css style 'display:none;' to hide the Layer.
 * @constructor
 * @param {Object} config An object with config options.
 * @param {String/HTMLElement} existingEl (optional) Uses an existing DOM element. If the element is not found it creates it.
 */
(function(){
Ext.Layer = function(config, existingEl){
    config = config || {};
    var dh = Ext.DomHelper;
    var cp = config.parentEl, pel = cp ? Ext.getDom(cp) : document.body;
    if(existingEl){
        this.dom = Ext.getDom(existingEl);
    }
    if(!this.dom){
        var o = config.dh || {tag: 'div', cls: 'x-layer'};
        this.dom = dh.append(pel, o);
    }
    if(config.cls){
        this.addClass(config.cls);
    }
    this.constrain = config.constrain !== false;
    this.setVisibilityMode(Ext.Element.VISIBILITY);
    if(config.id){
        this.id = this.dom.id = config.id;
    }else{
        this.id = Ext.id(this.dom);
    }
    this.zindex = config.zindex || this.getZIndex();
    this.position('absolute', this.zindex);
    if(config.shadow){
        this.shadowOffset = config.shadowOffset || 4;
        this.shadow = new Ext.Shadow({
            offset : this.shadowOffset,
            mode : config.shadow
        });
    }else{
        this.shadowOffset = 0;
    }
    this.useShim = config.shim !== false && Ext.useShims;
    this.useDisplay = config.useDisplay;
    this.hide();
};

var supr = Ext.Element.prototype;

// shims are shared among layer to keep from having 100 iframes
var shims = [];

Ext.extend(Ext.Layer, Ext.Element, {

    getZIndex : function(){
        return this.zindex || parseInt((this.getShim() || this).getStyle('z-index'), 10) || 11000;
    },

    getShim : function(){
        if(!this.useShim){
            return null;
        }
        if(this.shim){
            return this.shim;
        }
        var shim = shims.shift();
        if(!shim){
            shim = this.createShim();
            shim.enableDisplayMode('block');
            shim.dom.style.display = 'none';
            shim.dom.style.visibility = 'visible';
        }
        var pn = this.dom.parentNode;
        if(shim.dom.parentNode != pn){
            pn.insertBefore(shim.dom, this.dom);
        }
        shim.setStyle('z-index', this.getZIndex()-2);
        this.shim = shim;
        return shim;
    },

    hideShim : function(){
        if(this.shim){
            this.shim.setDisplayed(false);
            shims.push(this.shim);
            delete this.shim;
        }
    },

    disableShadow : function(){
        if(this.shadow){
            this.shadowDisabled = true;
            this.shadow.hide();
            this.lastShadowOffset = this.shadowOffset;
            this.shadowOffset = 0;
        }
    },

    enableShadow : function(show){
        if(this.shadow){
            this.shadowDisabled = false;
            this.shadowOffset = this.lastShadowOffset;
            delete this.lastShadowOffset;
            if(show){
                this.sync(true);
            }
        }
    },

    // private
    // this code can execute repeatedly in milliseconds (i.e. during a drag) so
    // code size was sacrificed for effeciency (e.g. no getBox/setBox, no XY calls)
    sync : function(doShow){
        var shadow = this.shadow;
        if(!this.updating && this.isVisible() && (shadow || this.useShim)){
            var shim = this.getShim(),
                w = this.getWidth(),
                h = this.getHeight(),
                l = this.getLeft(true),
                t = this.getTop(true);

            if(shadow && !this.shadowDisabled){
                if(doShow && !shadow.isVisible()){
                    shadow.show(this);
                }else{
                    shadow.realign(l, t, w, h);
                }
                if(shim){
                    if(doShow){
                       shim.show();
                    }
                    // fit the shim behind the shadow, so it is shimmed too
                    var shadowAdj = shadow.el.getXY(), shimStyle = shim.dom.style,
                        shadowSize = shadow.el.getSize();
                    shimStyle.left = (shadowAdj[0])+'px';
                    shimStyle.top = (shadowAdj[1])+'px';
                    shimStyle.width = (shadowSize.width)+'px';
                    shimStyle.height = (shadowSize.height)+'px';
                }
            }else if(shim){
                if(doShow){
                   shim.show();
                }
                shim.setSize(w, h);
                shim.setLeftTop(l, t);
            }
        }
    },

    // private
    destroy : function(){
        this.hideShim();
        if(this.shadow){
            this.shadow.hide();
        }
        this.removeAllListeners();
        Ext.removeNode(this.dom);
        delete this.dom;
    },

    remove : function(){
        this.destroy();
    },

    // private
    beginUpdate : function(){
        this.updating = true;
    },

    // private
    endUpdate : function(){
        this.updating = false;
        this.sync(true);
    },

    // private
    hideUnders : function(negOffset){
        if(this.shadow){
            this.shadow.hide();
        }
        this.hideShim();
    },

    // private
    constrainXY : function(){
        if(this.constrain){
            var vw = Ext.lib.Dom.getViewWidth(),
                vh = Ext.lib.Dom.getViewHeight();
            var s = Ext.getDoc().getScroll();

            var xy = this.getXY();
            var x = xy[0], y = xy[1];
            var so = this.shadowOffset;
            var w = this.dom.offsetWidth+so, h = this.dom.offsetHeight+so;
            // only move it if it needs it
            var moved = false;
            // first validate right/bottom
            if((x + w) > vw+s.left){
                x = vw - w - so;
                moved = true;
            }
            if((y + h) > vh+s.top){
                y = vh - h - so;
                moved = true;
            }
            // then make sure top/left isn't negative
            if(x < s.left){
                x = s.left;
                moved = true;
            }
            if(y < s.top){
                y = s.top;
                moved = true;
            }
            if(moved){
                if(this.avoidY){
                    var ay = this.avoidY;
                    if(y <= ay && (y+h) >= ay){
                        y = ay-h-5;
                    }
                }
                xy = [x, y];
                this.storeXY(xy);
                supr.setXY.call(this, xy);
                this.sync();
            }
        }
        return this;
    },

    isVisible : function(){
        return this.visible;
    },

    // private
    showAction : function(){
        this.visible = true; // track visibility to prevent getStyle calls
        if(this.useDisplay === true){
            this.setDisplayed('');
        }else if(this.lastXY){
            supr.setXY.call(this, this.lastXY);
        }else if(this.lastLT){
            supr.setLeftTop.call(this, this.lastLT[0], this.lastLT[1]);
        }
    },

    // private
    hideAction : function(){
        this.visible = false;
        if(this.useDisplay === true){
            this.setDisplayed(false);
        }else{
            this.setLeftTop(-10000,-10000);
        }
    },

    // overridden Element method
    setVisible : function(v, a, d, c, e){
        if(v){
            this.showAction();
        }
        if(a && v){
            var cb = function(){
                this.sync(true);
                if(c){
                    c();
                }
            }.createDelegate(this);
            supr.setVisible.call(this, true, true, d, cb, e);
        }else{
            if(!v){
                this.hideUnders(true);
            }
            var cb = c;
            if(a){
                cb = function(){
                    this.hideAction();
                    if(c){
                        c();
                    }
                }.createDelegate(this);
            }
            supr.setVisible.call(this, v, a, d, cb, e);
            if(v){
                this.sync(true);
            }else if(!a){
                this.hideAction();
            }
        }
        return this;
    },

    storeXY : function(xy){
        delete this.lastLT;
        this.lastXY = xy;
    },

    storeLeftTop : function(left, top){
        delete this.lastXY;
        this.lastLT = [left, top];
    },

    // private
    beforeFx : function(){
        this.beforeAction();
        return Ext.Layer.superclass.beforeFx.apply(this, arguments);
    },

    // private
    afterFx : function(){
        Ext.Layer.superclass.afterFx.apply(this, arguments);
        this.sync(this.isVisible());
    },

    // private
    beforeAction : function(){
        if(!this.updating && this.shadow){
            this.shadow.hide();
        }
    },

    // overridden Element method
    setLeft : function(left){
        this.storeLeftTop(left, this.getTop(true));
        supr.setLeft.apply(this, arguments);
        this.sync();
        return this;
    },

    setTop : function(top){
        this.storeLeftTop(this.getLeft(true), top);
        supr.setTop.apply(this, arguments);
        this.sync();
        return this;
    },

    setLeftTop : function(left, top){
        this.storeLeftTop(left, top);
        supr.setLeftTop.apply(this, arguments);
        this.sync();
        return this;
    },

    setXY : function(xy, a, d, c, e){
        this.fixDisplay();
        this.beforeAction();
        this.storeXY(xy);
        var cb = this.createCB(c);
        supr.setXY.call(this, xy, a, d, cb, e);
        if(!a){
            cb();
        }
        return this;
    },

    // private
    createCB : function(c){
        var el = this;
        return function(){
            el.constrainXY();
            el.sync(true);
            if(c){
                c();
            }
        };
    },

    // overridden Element method
    setX : function(x, a, d, c, e){
        this.setXY([x, this.getY()], a, d, c, e);
        return this;
    },

    // overridden Element method
    setY : function(y, a, d, c, e){
        this.setXY([this.getX(), y], a, d, c, e);
        return this;
    },

    // overridden Element method
    setSize : function(w, h, a, d, c, e){
        this.beforeAction();
        var cb = this.createCB(c);
        supr.setSize.call(this, w, h, a, d, cb, e);
        if(!a){
            cb();
        }
        return this;
    },

    // overridden Element method
    setWidth : function(w, a, d, c, e){
        this.beforeAction();
        var cb = this.createCB(c);
        supr.setWidth.call(this, w, a, d, cb, e);
        if(!a){
            cb();
        }
        return this;
    },

    // overridden Element method
    setHeight : function(h, a, d, c, e){
        this.beforeAction();
        var cb = this.createCB(c);
        supr.setHeight.call(this, h, a, d, cb, e);
        if(!a){
            cb();
        }
        return this;
    },

    // overridden Element method
    setBounds : function(x, y, w, h, a, d, c, e){
        this.beforeAction();
        var cb = this.createCB(c);
        if(!a){
            this.storeXY([x, y]);
            supr.setXY.call(this, [x, y]);
            supr.setSize.call(this, w, h, a, d, cb, e);
            cb();
        }else{
            supr.setBounds.call(this, x, y, w, h, a, d, cb, e);
        }
        return this;
    },

    /**
     * Sets the z-index of this layer and adjusts any shadow and shim z-indexes. The layer z-index is automatically
     * incremented by two more than the value passed in so that it always shows above any shadow or shim (the shadow
     * element, if any, will be assigned z-index + 1, and the shim element, if any, will be assigned the unmodified z-index).
     * @param {Number} zindex The new z-index to set
     * @return {this} The Layer
     */
    setZIndex : function(zindex){
        this.zindex = zindex;
        this.setStyle('z-index', zindex + 2);
        if(this.shadow){
            this.shadow.setZIndex(zindex + 1);
        }
        if(this.shim){
            this.shim.setStyle('z-index', zindex);
        }
        return this;
    }
});
})();


The source code

/*!
 * licensing@extjs.com
 * http://www.extjs.com/license
 */
Ext.ns('Ext.ux');

Ext.ux.Lightbox = (function(){
    var els = {},
        images = [],
        activeImage,
        initialized = false,
        selectors = [];

    return {
        overlayOpacity: 0.85,
        animate: true,
        resizeSpeed: 8,
        borderSize: 10,
        labelImage: "Image",
        labelOf: "of",

        init: function() {
            this.resizeDuration = this.animate ? ((11 - this.resizeSpeed) * 0.15) : 0;
            this.overlayDuration = this.animate ? 0.2 : 0;

            if(!initialized) {
                Ext.apply(this, Ext.util.Observable.prototype);
                Ext.util.Observable.constructor.call(this);
                this.addEvents('open', 'close');
                this.initMarkup();
                this.initEvents();
                initialized = true;
            }
        },

        initMarkup: function() {
            els.shim = Ext.DomHelper.append(document.body, {
                tag: 'iframe',
                id: 'ux-lightbox-shim'
            }, true);
            els.overlay = Ext.DomHelper.append(document.body, {
                id: 'ux-lightbox-overlay'
            }, true);

            var lightboxTpl = new Ext.Template(this.getTemplate());
            els.lightbox = lightboxTpl.append(document.body, {}, true);

            var ids =
                ['outerImageContainer', 'imageContainer', 'image', 'hoverNav', 'navPrev', 'navNext', 'loading', 'loadingLink',
                'outerDataContainer', 'dataContainer', 'data', 'details', 'caption', 'imageNumber', 'bottomNav', 'navClose'];

            Ext.each(ids, function(id){
                els[id] = Ext.get('ux-lightbox-' + id);
            });

            Ext.each([els.overlay, els.lightbox, els.shim], function(el){
                el.setVisibilityMode(Ext.Element.DISPLAY)
                el.hide();
            });

            var size = (this.animate ? 250 : 1) + 'px';
            els.outerImageContainer.setStyle({
                width: size,
                height: size
            });
        },

        getTemplate : function() {
            return [
                '
',
                    '
',
                        '
',
                            '  ',
                            '
',
                                '',
                                '',
                            '
',
                            '
',
                                '',
                            '
',
                        '
',
                    '
',
                    '
',
                        '
',
                            '
',
                                '
',
                                    '',
                                    '',
                                '
',
                                '
',
                                    '',
                                '
',
                            '
',
                        '
',
                    '
',
                '
'
            ];
        },

        initEvents: function() {
            var close = function(ev) {
                ev.preventDefault();
                this.close();
            };

            els.overlay.on('click', close, this);
            els.loadingLink.on('click', close, this);
            els.navClose.on('click', close, this);

            els.lightbox.on('click', function(ev) {
                if(ev.getTarget().id == 'ux-lightbox') {
                    this.close();
                }
            }, this);

            els.navPrev.on('click', function(ev) {
                ev.preventDefault();
                this.setImage(activeImage - 1);
            }, this);

            els.navNext.on('click', function(ev) {
                ev.preventDefault();
                this.setImage(activeImage + 1);
            }, this);
        },

        register: function(sel, group) {
            if(selectors.indexOf(sel) === -1) {
                selectors.push(sel);

                Ext.fly(document).on('click', function(ev){
                    var target = ev.getTarget(sel);

                    if (target) {
                        ev.preventDefault();
                        this.open(target, sel, group);
                    }
                }, this);
            }
        },

        open: function(image, sel, group) {
            group = group || false;
            this.setViewSize();
            els.overlay.fadeIn({
                duration: this.overlayDuration,
                endOpacity: this.overlayOpacity,
                callback: function() {
                    images = [];

                    var index = 0;
                    if(!group) {
                        images.push([image.href, image.title]);
                    }
                    else {
                        var setItems = Ext.query(sel);
                        Ext.each(setItems, function(item) {
                            if(item.href) {
                                images.push([item.href, item.title]);
                            }
                        });

                        while (images[index][0] != image.href) {
                            index++;
                        }
                    }

                    // calculate top and left offset for the lightbox
                    var pageScroll = Ext.fly(document).getScroll();

                    var lightboxTop = pageScroll.top + (Ext.lib.Dom.getViewportHeight() / 10);
                    var lightboxLeft = pageScroll.left;
                    els.lightbox.setStyle({
                        top: lightboxTop + 'px',
                        left: lightboxLeft + 'px'
                    }).show();

                    this.setImage(index);

                    this.fireEvent('open', images[index]);
                },
                scope: this
            });
        },

        setViewSize: function(){
            var viewSize = this.getViewSize();
            els.overlay.setStyle({
                width: viewSize[0] + 'px',
                height: viewSize[1] + 'px'
            });
            els.shim.setStyle({
                width: viewSize[0] + 'px',
                height: viewSize[1] + 'px'
            }).show();
        },

        setImage: function(index){
            activeImage = index;

            this.disableKeyNav();
            if (this.animate) {
                els.loading.show();
            }

            els.image.hide();
            els.hoverNav.hide();
            els.navPrev.hide();
            els.navNext.hide();
            els.dataContainer.setOpacity(0.0001);
            els.imageNumber.hide();

            var preload = new Image();
            preload.onload = (function(){
                els.image.dom.src = images[activeImage][0];
                this.resizeImage(preload.width, preload.height);
            }).createDelegate(this);
            preload.src = images[activeImage][0];
        },

        resizeImage: function(w, h){
            var wCur = els.outerImageContainer.getWidth();
            var hCur = els.outerImageContainer.getHeight();

            var wNew = (w + this.borderSize * 2);
            var hNew = (h + this.borderSize * 2);

            var wDiff = wCur - wNew;
            var hDiff = hCur - hNew;

            var afterResize = function(){
                els.hoverNav.setWidth(els.imageContainer.getWidth() + 'px');

                els.navPrev.setHeight(h + 'px');
                els.navNext.setHeight(h + 'px');

                els.outerDataContainer.setWidth(wNew + 'px');

                this.showImage();
            };

            if (hDiff != 0 || wDiff != 0) {
                els.outerImageContainer.shift({
                    height: hNew,
                    width: wNew,
                    duration: this.resizeDuration,
                    scope: this,
                    callback: afterResize,
                    delay: 50
                });
            }
            else {
                afterResize.call(this);
            }
        },

        showImage: function(){
            els.loading.hide();
            els.image.fadeIn({
                duration: this.resizeDuration,
                scope: this,
                callback: function(){
                    this.updateDetails();
                }
            });
            this.preloadImages();
        },

        updateDetails: function(){
            var detailsWidth = els.data.getWidth(true) - els.navClose.getWidth() - 10;
            els.details.setWidth((detailsWidth > 0 ? detailsWidth : 0) + 'px');

            els.caption.update(images[activeImage][1]);

            els.caption.show();
            if (images.length > 1) {
                els.imageNumber.update(this.labelImage + ' ' + (activeImage + 1) + ' ' + this.labelOf + '  ' + images.length);
                els.imageNumber.show();
            }

            els.dataContainer.fadeIn({
                duration: this.resizeDuration/2,
                scope: this,
                callback: function() {
                    var viewSize = this.getViewSize();
                    els.overlay.setHeight(viewSize[1] + 'px');
                    this.updateNav();
                }
            });
        },

        updateNav: function(){
            this.enableKeyNav();

            els.hoverNav.show();

            // if not first image in set, display prev image button
            if (activeImage > 0)
                els.navPrev.show();

            // if not last image in set, display next image button
            if (activeImage < (images.length - 1))
                els.navNext.show();
        },

        enableKeyNav: function() {
            Ext.fly(document).on('keydown', this.keyNavAction, this);
        },

        disableKeyNav: function() {
            Ext.fly(document).un('keydown', this.keyNavAction, this);
        },

        keyNavAction: function(ev) {
            var keyCode = ev.getKey();

            if (
                keyCode == 88 || // x
                keyCode == 67 || // c
                keyCode == 27
            ) {
                this.close();
            }
            else if (keyCode == 80 || keyCode == 37){ // display previous image
                if (activeImage != 0){
                    this.setImage(activeImage - 1);
                }
            }
            else if (keyCode == 78 || keyCode == 39){ // display next image
                if (activeImage != (images.length - 1)){
                    this.setImage(activeImage + 1);
                }
            }
        },

        preloadImages: function(){
            var next, prev;
            if (images.length > activeImage + 1) {
                next = new Image();
                next.src = images[activeImage + 1][0];
            }
            if (activeImage > 0) {
                prev = new Image();
                prev.src = images[activeImage - 1][0];
            }
        },

        close: function(){
            this.disableKeyNav();
            els.lightbox.hide();
            els.overlay.fadeOut({
                duration: this.overlayDuration
            });
            els.shim.hide();
            this.fireEvent('close', activeImage);
        },

        getViewSize: function() {
            return [Ext.lib.Dom.getViewWidth(), Ext.lib.Dom.getViewHeight()];
        }
    }
})();

Ext.onReady(Ext.ux.Lightbox.init, Ext.ux.Lightbox);


The source code

/*!
 * licensing@extjs.com
 * http://www.extjs.com/license
 */

/**
 * @class Ext.list.ListView
 * @extends Ext.DataView
 *
Ext.list.ListView is a fast and light-weight implentation of a
 * {@link Ext.grid.GridPanel Grid} like view with the following characteristics:

 *

 *
  • resizable columns
    •
 *
  • selectable
    •
 *
  • column widths are initially proportioned by percentage based on the container
 * width and number of columns
    •
 *
  • uses templates to render the data in any required format
    •
 *
  • no horizontal scrolling
    •
 *
  • no editing
    •
 *

 *
Example usage:

 *

// consume JSON of this form:
{
   "images":[
      {
         "name":"dance_fever.jpg",
         "size":2067,
         "lastmod":1236974993000,
         "url":"images\/thumbs\/dance_fever.jpg"
      },
      {
         "name":"zack_sink.jpg",
         "size":2303,
         "lastmod":1236974993000,
         "url":"images\/thumbs\/zack_sink.jpg"
      }
   ]
}
var store = new Ext.data.JsonStore({
    url: 'get-images.php',
    root: 'images',
    fields: [
        'name', 'url',
        {name:'size', type: 'float'},
        {name:'lastmod', type:'date', dateFormat:'timestamp'}
    ]
});
store.load();

var listView = new Ext.list.ListView({
    store: store,
    multiSelect: true,
    emptyText: 'No images to display',
    reserveScrollOffset: true,
    columns: [{
        header: 'File',
        width: .5,
        dataIndex: 'name'
    },{
        header: 'Last Modified',
        width: .35,
        dataIndex: 'lastmod',
        tpl: '{lastmod:date("m-d h:i a")}'
    },{
        header: 'Size',
        dataIndex: 'size',
        tpl: '{size:fileSize}', // format using Ext.util.Format.fileSize()
        align: 'right'
    }]
});

// put it in a Panel so it looks pretty
var panel = new Ext.Panel({
    id:'images-view',
    width:425,
    height:250,
    collapsible:true,
    layout:'fit',
    title:'Simple ListView (0 items selected)',
    items: listView
});
panel.render(document.body);

// little bit of feedback
listView.on('selectionchange', function(view, nodes){
    var l = nodes.length;
    var s = l != 1 ? 's' : '';
    panel.setTitle('Simple ListView ('+l+' item'+s+' selected)');
});
 *

 * @constructor
 * @param {Object} config
 * @xtype listview
 */
Ext.list.ListView = Ext.extend(Ext.DataView, {

/**
     * Set this property to true to disable the header click handler disabling sort
     * (defaults to false).
     * @type Boolean
     * @property disableHeaders
     */

/**
     * @cfg {Boolean} hideHeaders
     * true to hide the {@link #internalTpl header row} (defaults to false so
     * the {@link #internalTpl header row} will be shown).
     */

/**
     * @cfg {String} itemSelector
     * Defaults to 'dl' to work with the preconfigured {@link Ext.DataView#tpl tpl}.
     * This setting specifies the CSS selector (e.g. div.some-class or span:first-child)
     * that will be used to determine what nodes the ListView will be working with.
     */
    itemSelector: 'dl',

/**
     * @cfg {String} selectedClass The CSS class applied to a selected row (defaults to
     * 'x-list-selected'). An example overriding the default styling:

    .x-list-selected {background-color: yellow;}

     * @type String
     */
    selectedClass:'x-list-selected',

/**
     * @cfg {String} overClass The CSS class applied when over a row (defaults to
     * 'x-list-over'). An example overriding the default styling:

    .x-list-over {background-color: orange;}

     * @type String
     */
    overClass:'x-list-over',

/**
     * @cfg {Boolean} reserveScrollOffset
     * By default will defer accounting for the configured {@link #scrollOffset}
     * for 10 milliseconds.  Specify true to account for the configured
     * {@link #scrollOffset} immediately.
     */

/**
     * @cfg {Number} scrollOffset The amount of space to reserve for the scrollbar (defaults to
     * undefined). If an explicit value isn't specified, this will be automatically
     * calculated.
     */
    scrollOffset : undefined,

/**
     * @cfg {Boolean/Object} columnResize
     * Specify true or specify a configuration object for {@link Ext.list.ListView.ColumnResizer}
     * to enable the columns to be resizable (defaults to true).
     */
    columnResize: true,

/**
     * @cfg {Array} columns An array of column configuration objects, for example:
     *

{
    align: 'right',
    dataIndex: 'size',
    header: 'Size',
    tpl: '{size:fileSize}',
    width: .35
}
     *

     * Acceptable properties for each column configuration object are:
     *

     *
  • align : String
    Set the CSS text-align property
     * of the column. Defaults to 'left'.
    •
     *
  • dataIndex : String
    See {@link Ext.grid.Column}.
     * {@link Ext.grid.Column#dataIndex dataIndex} for details.
    •
     *
  • header : String
    See {@link Ext.grid.Column}.
     * {@link Ext.grid.Column#header header} for details.
    •
     *
  • tpl : String
    Specify a string to pass as the
     * configuration string for {@link Ext.XTemplate}.  By default an {@link Ext.XTemplate}
     * will be implicitly created using the dataIndex.
    •
     *
  • width : Number
    Percentage of the container width
     * this column should be allocated.  Columns that have no width specified will be
     * allocated with an equal percentage to fill 100% of the container width.  To easily take
     * advantage of the full container width, leave the width of at least one column undefined.
     * Note that if you do not want to take up the full width of the container, the width of
     * every column needs to be explicitly defined.
    •
     *

     */

/**
     * @cfg {Boolean/Object} columnSort
     * Specify true or specify a configuration object for {@link Ext.list.ListView.Sorter}
     * to enable the columns to be sortable (defaults to true).
     */
    columnSort: true,

/**
     * @cfg {String/Array} internalTpl
     * The template to be used for the header row.  See {@link #tpl} for more details.
     */

    /*
     * IE has issues when setting percentage based widths to 100%. Default to 99.
     */
    maxWidth: Ext.isIE ? 99 : 100,

    initComponent : function(){
        if(this.columnResize){
            this.colResizer = new Ext.list.ColumnResizer(this.colResizer);
            this.colResizer.init(this);
        }
        if(this.columnSort){
            this.colSorter = new Ext.list.Sorter(this.columnSort);
            this.colSorter.init(this);
        }
        if(!this.internalTpl){
            this.internalTpl = new Ext.XTemplate(
                '
',
                    '',
                    '
',
                        '{header}',
                    '
',
                    '',
                    '
',
                '
',
                '
',
                '
'
            );
        }
        if(!this.tpl){
            this.tpl = new Ext.XTemplate(
                '',
                    '
',
                        '',
                        '
',
                        ' class="{cls}">',
                            '{[values.tpl.apply(parent)]}',
                        '
',
                        '',
                        '
',
                    '
',
                ''
            );
        };

        var cs = this.columns,
            allocatedWidth = 0,
            colsWithWidth = 0,
            len = cs.length,
            columns = [];

        for(var i = 0; i < len; i++){
            var c = cs[i];
            if(!c.isColumn) {
                c.xtype = c.xtype ? (/^lv/.test(c.xtype) ? c.xtype : 'lv' + c.xtype) : 'lvcolumn';
                c = Ext.create(c);
            }
            if(c.width) {
                allocatedWidth += c.width*100;
                colsWithWidth++;
            }
            columns.push(c);
        }

        cs = this.columns = columns;

        // auto calculate missing column widths
        if(colsWithWidth < len){
            var remaining = len - colsWithWidth;
            if(allocatedWidth < this.maxWidth){
                var perCol = ((this.maxWidth-allocatedWidth) / remaining)/100;
                for(var j = 0; j < len; j++){
                    var c = cs[j];
                    if(!c.width){
                        c.width = perCol;
                    }
                }
            }
        }
        Ext.list.ListView.superclass.initComponent.call(this);
    },

    onRender : function(){
        this.autoEl = {
            cls: 'x-list-wrap'
        };
        Ext.list.ListView.superclass.onRender.apply(this, arguments);

        this.internalTpl.overwrite(this.el, {columns: this.columns});

        this.innerBody = Ext.get(this.el.dom.childNodes[1].firstChild);
        this.innerHd = Ext.get(this.el.dom.firstChild.firstChild);

        if(this.hideHeaders){
            this.el.dom.firstChild.style.display = 'none';
        }
    },

    getTemplateTarget : function(){
        return this.innerBody;
    },

/**
     *
Function which can be overridden which returns the data object passed to this
     * view's {@link #tpl template} to render the whole ListView. The returned object
     * shall contain the following properties:

     *

     *
  • columns : String
    See {@link #columns}
    •
     *
  • rows : String
    See
     * {@link Ext.DataView}.{@link Ext.DataView#collectData collectData}
    •
     *

     * @param {Array} records An Array of {@link Ext.data.Record}s to be rendered into the DataView.
     * @param {Number} startIndex the index number of the Record being prepared for rendering.
     * @return {Object} A data object containing properties to be processed by a repeating
     * XTemplate as described above.
     */
    collectData : function(){
        var rs = Ext.list.ListView.superclass.collectData.apply(this, arguments);
        return {
            columns: this.columns,
            rows: rs
        }
    },

    verifyInternalSize : function(){
        if(this.lastSize){
            this.onResize(this.lastSize.width, this.lastSize.height);
        }
    },

    // private
    onResize : function(w, h){
        var bd = this.innerBody.dom;
        var hd = this.innerHd.dom;
        if(!bd){
            return;
        }
        var bdp = bd.parentNode;
        if(Ext.isNumber(w)){
            var sw = w - Ext.num(this.scrollOffset, Ext.getScrollBarWidth());
            if(this.reserveScrollOffset || ((bdp.offsetWidth - bdp.clientWidth) > 10)){
                bd.style.width = sw + 'px';
                hd.style.width = sw + 'px';
            }else{
                bd.style.width = w + 'px';
                hd.style.width = w + 'px';
                setTimeout(function(){
                    if((bdp.offsetWidth - bdp.clientWidth) > 10){
                        bd.style.width = sw + 'px';
                        hd.style.width = sw + 'px';
                    }
                }, 10);
            }
        }
        if(Ext.isNumber(h)){
            bdp.style.height = (h - hd.parentNode.offsetHeight) + 'px';
        }
    },

    updateIndexes : function(){
        Ext.list.ListView.superclass.updateIndexes.apply(this, arguments);
        this.verifyInternalSize();
    },

    findHeaderIndex : function(hd){
        hd = hd.dom || hd;
        var pn = hd.parentNode, cs = pn.parentNode.childNodes;
        for(var i = 0, c; c = cs[i]; i++){
            if(c == pn){
                return i;
            }
        }
        return -1;
    },

    setHdWidths : function(){
        var els = this.innerHd.dom.getElementsByTagName('div');
        for(var i = 0, cs = this.columns, len = cs.length; i < len; i++){
            els[i].style.width = (cs[i].width*100) + '%';
        }
    }
});

Ext.reg('listview', Ext.list.ListView);

// Backwards compatibility alias
Ext.ListView = Ext.list.ListView;


The source code

/*!
 * licensing@extjs.com
 * http://www.extjs.com/license
 */

/**
 * @class Ext.LoadMask
 * A simple utility class for generically masking elements while loading data.  If the {@link #store}
 * config option is specified, the masking will be automatically synchronized with the store's loading
 * process and the mask element will be cached for reuse.  For all other elements, this mask will replace the
 * element's Updater load indicator and will be destroyed after the initial load.
 *
Example usage:

 *

// Basic mask:
var myMask = new Ext.LoadMask(Ext.getBody(), {msg:"Please wait..."});
myMask.show();

 * @constructor
 * Create a new LoadMask
 * @param {Mixed} el The element or DOM node, or its id
 * @param {Object} config The config object
 */
Ext.LoadMask = function(el, config){
    this.el = Ext.get(el);
    Ext.apply(this, config);
    if(this.store){
        this.store.on({
            scope: this,
            beforeload: this.onBeforeLoad,
            load: this.onLoad,
            exception: this.onLoad
        });
        this.removeMask = Ext.value(this.removeMask, false);
    }else{
        var um = this.el.getUpdater();
        um.showLoadIndicator = false; // disable the default indicator
        um.on({
            scope: this,
            beforeupdate: this.onBeforeLoad,
            update: this.onLoad,
            failure: this.onLoad
        });
        this.removeMask = Ext.value(this.removeMask, true);
    }
};

Ext.LoadMask.prototype = {

/**
     * @cfg {Ext.data.Store} store
     * Optional Store to which the mask is bound. The mask is displayed when a load request is issued, and
     * hidden on either load sucess, or load fail.
     */

/**
     * @cfg {Boolean} removeMask
     * True to create a single-use mask that is automatically destroyed after loading (useful for page loads),
     * False to persist the mask element reference for multiple uses (e.g., for paged data widgets).  Defaults to false.
     */

/**
     * @cfg {String} msg
     * The text to display in a centered loading message box (defaults to 'Loading...')
     */
    msg : 'Loading...',

/**
     * @cfg {String} msgCls
     * The CSS class to apply to the loading message element (defaults to "x-mask-loading")
     */
    msgCls : 'x-mask-loading',

/**
     * Read-only. True if the mask is currently disabled so that it will not be displayed (defaults to false)
     * @type Boolean
     */
    disabled: false,

/**
     * Disables the mask to prevent it from being displayed
     */
    disable : function(){
       this.disabled = true;
    },

/**
     * Enables the mask so that it can be displayed
     */
    enable : function(){
        this.disabled = false;
    },

    // private
    onLoad : function(){
        this.el.unmask(this.removeMask);
    },

    // private
    onBeforeLoad : function(){
        if(!this.disabled){
            this.el.mask(this.msg, this.msgCls);
        }
    },

/**
     * Show this LoadMask over the configured Element.
     */
    show: function(){
        this.onBeforeLoad();
    },

/**
     * Hide this LoadMask.
     */
    hide: function(){
        this.onLoad();
    },

    // private
    destroy : function(){
        if(this.store){
            this.store.un('beforeload', this.onBeforeLoad, this);
            this.store.un('load', this.onLoad, this);
            this.store.un('exception', this.onLoad, this);
        }else{
            var um = this.el.getUpdater();
            um.un('beforeupdate', this.onBeforeLoad, this);
            um.un('update', this.onLoad, this);
            um.un('failure', this.onLoad, this);
        }
    }
};


The source code

/*!
 * licensing@extjs.com
 * http://www.extjs.com/license
 */
/*
Copyright (c) 2008, Yahoo! Inc. All rights reserved.
Code licensed under the BSD License:
http://developer.yahoo.net/yui/license.txt
version: 2.6.0
*/
YAHOO.widget.LogMsg=function(A){this.msg=this.time=this.category=this.source=this.sourceDetail=null;if(A&&(A.constructor==Object)){for(var B in A){if(A.hasOwnProperty(B)){this[B]=A[B];}}}};YAHOO.widget.LogWriter=function(A){if(!A){YAHOO.log("Could not instantiate LogWriter due to invalid source.","error","LogWriter");return ;}this._source=A;};YAHOO.widget.LogWriter.prototype.toString=function(){return"LogWriter "+this._sSource;};YAHOO.widget.LogWriter.prototype.log=function(A,B){YAHOO.widget.Logger.log(A,B,this._source);};YAHOO.widget.LogWriter.prototype.getSource=function(){return this._source;};YAHOO.widget.LogWriter.prototype.setSource=function(A){if(!A){YAHOO.log("Could not set source due to invalid source.","error",this.toString());return ;}else{this._source=A;}};YAHOO.widget.LogWriter.prototype._source=null;YAHOO.widget.LogReader=function(B,A){this._sName=YAHOO.widget.LogReader._index;YAHOO.widget.LogReader._index++;this._buffer=[];this._filterCheckboxes={};this._lastTime=YAHOO.widget.Logger.getStartTime();if(A&&(A.constructor==Object)){for(var C in A){if(A.hasOwnProperty(C)){this[C]=A[C];}}}this._initContainerEl(B);if(!this._elContainer){YAHOO.log("Could not instantiate LogReader due to an invalid container element "+B,"error",this.toString());return ;}this._initHeaderEl();this._initConsoleEl();this._initFooterEl();this._initDragDrop();this._initCategories();this._initSources();YAHOO.widget.Logger.newLogEvent.subscribe(this._onNewLog,this);YAHOO.widget.Logger.logResetEvent.subscribe(this._onReset,this);YAHOO.widget.Logger.categoryCreateEvent.subscribe(this._onCategoryCreate,this);YAHOO.widget.Logger.sourceCreateEvent.subscribe(this._onSourceCreate,this);this._filterLogs();YAHOO.log("LogReader initialized",null,this.toString());};YAHOO.lang.augmentObject(YAHOO.widget.LogReader,{_index:0,ENTRY_TEMPLATE:(function(){var A=document.createElement("pre");YAHOO.util.Dom.addClass(A,"yui-log-entry");return A;})(),VERBOSE_TEMPLATE:"
{label} {totalTime}ms (+{elapsedTime}) {localTime}:
{sourceAndDetail}
{message}
",BASIC_TEMPLATE:"
{label} {totalTime}ms (+{elapsedTime}) {localTime}: {sourceAndDetail}: {message}
"});YAHOO.widget.LogReader.prototype={logReaderEnabled:true,width:null,height:null,top:null,left:null,right:null,bottom:null,fontSize:null,footerEnabled:true,verboseOutput:true,entryFormat:null,newestOnTop:true,outputBuffer:100,thresholdMax:500,thresholdMin:100,isCollapsed:false,isPaused:false,draggable:true,toString:function(){return"LogReader instance"+this._sName;},pause:function(){this.isPaused=true;this._timeout=null;this.logReaderEnabled=false;if(this._btnPause){this._btnPause.value="Resume";}},resume:function(){this.isPaused=false;this.logReaderEnabled=true;this._printBuffer();if(this._btnPause){this._btnPause.value="Pause";}},hide:function(){this._elContainer.style.display="none";},show:function(){this._elContainer.style.display="block";},collapse:function(){this._elConsole.style.display="none";if(this._elFt){this._elFt.style.display="none";}this._btnCollapse.value="Expand";this.isCollapsed=true;},expand:function(){this._elConsole.style.display="block";if(this._elFt){this._elFt.style.display="block";}this._btnCollapse.value="Collapse";this.isCollapsed=false;},getCheckbox:function(A){return this._filterCheckboxes[A];},getCategories:function(){return this._categoryFilters;},showCategory:function(B){var D=this._categoryFilters;if(D.indexOf){if(D.indexOf(B)>-1){return ;}}else{for(var A=0;A-1){return ;}}else{for(var B=0;B/g,">");}return"";},_sName:null,_buffer:null,_consoleMsgCount:0,_lastTime:null,_timeout:null,_filterCheckboxes:null,_categoryFilters:null,_sourceFilters:null,_elContainer:null,_elHd:null,_elCollapse:null,_btnCollapse:null,_title:null,_elConsole:null,_elFt:null,_elBtns:null,_elCategoryFilters:null,_elSourceFilters:null,_btnPause:null,_btnClear:null,_initContainerEl:function(B){B=YAHOO.util.Dom.get(B);if(B&&B.tagName&&(B.tagName.toLowerCase()=="div")){this._elContainer=B;YAHOO.util.Dom.addClass(this._elContainer,"yui-log");}else{this._elContainer=document.body.appendChild(document.createElement("div"));YAHOO.util.Dom.addClass(this._elContainer,"yui-log");
YAHOO.util.Dom.addClass(this._elContainer,"yui-log-container");var A=this._elContainer.style;if(this.width){A.width=this.width;}if(this.right){A.right=this.right;}if(this.top){A.top=this.top;}if(this.left){A.left=this.left;A.right="auto";}if(this.bottom){A.bottom=this.bottom;A.top="auto";}if(this.fontSize){A.fontSize=this.fontSize;}if(navigator.userAgent.toLowerCase().indexOf("opera")!=-1){document.body.style+="";}}},_initHeaderEl:function(){var A=this;if(this._elHd){YAHOO.util.Event.purgeElement(this._elHd,true);this._elHd.innerHTML="";}this._elHd=this._elContainer.appendChild(document.createElement("div"));this._elHd.id="yui-log-hd"+this._sName;this._elHd.className="yui-log-hd";this._elCollapse=this._elHd.appendChild(document.createElement("div"));this._elCollapse.className="yui-log-btns";this._btnCollapse=document.createElement("input");this._btnCollapse.type="button";this._btnCollapse.className="yui-log-button";this._btnCollapse.value="Collapse";this._btnCollapse=this._elCollapse.appendChild(this._btnCollapse);YAHOO.util.Event.addListener(A._btnCollapse,"click",A._onClickCollapseBtn,A);this._title=this._elHd.appendChild(document.createElement("h4"));this._title.innerHTML="Logger Console";},_initConsoleEl:function(){if(this._elConsole){YAHOO.util.Event.purgeElement(this._elConsole,true);this._elConsole.innerHTML="";}this._elConsole=this._elContainer.appendChild(document.createElement("div"));this._elConsole.className="yui-log-bd";if(this.height){this._elConsole.style.height=this.height;}},_initFooterEl:function(){var A=this;if(this.footerEnabled){if(this._elFt){YAHOO.util.Event.purgeElement(this._elFt,true);this._elFt.innerHTML="";}this._elFt=this._elContainer.appendChild(document.createElement("div"));this._elFt.className="yui-log-ft";this._elBtns=this._elFt.appendChild(document.createElement("div"));this._elBtns.className="yui-log-btns";this._btnPause=document.createElement("input");this._btnPause.type="button";this._btnPause.className="yui-log-button";this._btnPause.value="Pause";this._btnPause=this._elBtns.appendChild(this._btnPause);YAHOO.util.Event.addListener(A._btnPause,"click",A._onClickPauseBtn,A);this._btnClear=document.createElement("input");this._btnClear.type="button";this._btnClear.className="yui-log-button";this._btnClear.value="Clear";this._btnClear=this._elBtns.appendChild(this._btnClear);YAHOO.util.Event.addListener(A._btnClear,"click",A._onClickClearBtn,A);this._elCategoryFilters=this._elFt.appendChild(document.createElement("div"));this._elCategoryFilters.className="yui-log-categoryfilters";this._elSourceFilters=this._elFt.appendChild(document.createElement("div"));this._elSourceFilters.className="yui-log-sourcefilters";}},_initDragDrop:function(){if(YAHOO.util.DD&&this.draggable&&this._elHd){var A=new YAHOO.util.DD(this._elContainer);A.setHandleElId(this._elHd.id);this._elHd.style.cursor="move";}},_initCategories:function(){this._categoryFilters=[];var C=YAHOO.widget.Logger.categories;for(var A=0;Athis.thresholdMax)){Q=0;}K=(B>Q)?(B-Q):0;for(H=K;H0){C=G.substring(0,D);A=G.substring(D,G.length);}else{C=G;}if(this._isNewSource(C)){this._createNewSource(C);}}var H=new Date();var J=new YAHOO.widget.LogMsg({msg:B,time:H,category:F,source:C,sourceDetail:A});var I=this._stack;var E=this.maxStackEntries;if(E&&!isNaN(E)&&(I.length>=E)){I.shift();}I.push(J);this.newLogEvent.fire(J);if(this._browserConsoleEnabled){this._printToBrowserConsole(J);}return true;}else{return false;}};YAHOO.widget.Logger.reset=function(){this._stack=[];this._startTime=new Date().getTime();this.loggerEnabled=true;this.log("Logger reset");this.logResetEvent.fire();};YAHOO.widget.Logger.getStack=function(){return this._stack;};YAHOO.widget.Logger.getStartTime=function(){return this._startTime;};YAHOO.widget.Logger.disableBrowserConsole=function(){YAHOO.log("Logger output to the function console.log() has been disabled.");this._browserConsoleEnabled=false;};YAHOO.widget.Logger.enableBrowserConsole=function(){this._browserConsoleEnabled=true;YAHOO.log("Logger output to the function console.log() has been enabled.");};YAHOO.widget.Logger.handleWindowErrors=function(){if(!YAHOO.widget.Logger._windowErrorsHandled){if(window.error){YAHOO.widget.Logger._origOnWindowError=window.onerror;}window.onerror=YAHOO.widget.Logger._onWindowError;YAHOO.widget.Logger._windowErrorsHandled=true;YAHOO.log("Logger handling of window.onerror has been enabled.");}else{YAHOO.log("Logger handling of window.onerror had already been enabled.");}};YAHOO.widget.Logger.unhandleWindowErrors=function(){if(YAHOO.widget.Logger._windowErrorsHandled){if(YAHOO.widget.Logger._origOnWindowError){window.onerror=YAHOO.widget.Logger._origOnWindowError;YAHOO.widget.Logger._origOnWindowError=null;}else{window.onerror=null;}YAHOO.widget.Logger._windowErrorsHandled=false;YAHOO.log("Logger handling of window.onerror has been disabled.");}else{YAHOO.log("Logger handling of window.onerror had already been disabled.");}};YAHOO.widget.Logger.categoryCreateEvent=new YAHOO.util.CustomEvent("categoryCreate",this,true);YAHOO.widget.Logger.sourceCreateEvent=new YAHOO.util.CustomEvent("sourceCreate",this,true);YAHOO.widget.Logger.newLogEvent=new YAHOO.util.CustomEvent("newLog",this,true);YAHOO.widget.Logger.logResetEvent=new YAHOO.util.CustomEvent("logReset",this,true);YAHOO.widget.Logger._createNewCategory=function(A){this.categories.push(A);this.categoryCreateEvent.fire(A);};YAHOO.widget.Logger._isNewCategory=function(B){for(var A=0;A


The source code

/*!
 * licensing@extjs.com
 * http://www.extjs.com/license
 */

/**
 * @class Ext.data.MemoryProxy
 * @extends Ext.data.DataProxy
 * An implementation of Ext.data.DataProxy that simply passes the data specified in its constructor
 * to the Reader when its load method is called.
 * @constructor
 * @param {Object} data The data object which the Reader uses to construct a block of Ext.data.Records.
 */
Ext.data.MemoryProxy = function(data){
    // Must define a dummy api with "read" action to satisfy DataProxy#doRequest and Ext.data.Api#prepare *before* calling super
    var api = {};
    api[Ext.data.Api.actions.read] = true;
    Ext.data.MemoryProxy.superclass.constructor.call(this, {
        api: api
    });
    this.data = data;
};

Ext.extend(Ext.data.MemoryProxy, Ext.data.DataProxy, {

/**
     * @event loadexception
     * Fires if an exception occurs in the Proxy during data loading. Note that this event is also relayed
     * through {@link Ext.data.Store}, so you can listen for it directly on any Store instance.
     * @param {Object} this
     * @param {Object} arg The callback's arg object passed to the {@link #load} function
     * @param {Object} null This parameter does not apply and will always be null for MemoryProxy
     * @param {Error} e The JavaScript Error object caught if the configured Reader could not read the data
     */

/**
     * MemoryProxy implementation of DataProxy#doRequest
     * @param {String} action
     * @param {Ext.data.Record/Ext.data.Record[]} rs If action is load, rs will be null
     * @param {Object} params An object containing properties which are to be used as HTTP parameters
     * for the request to the remote server.
     * @param {Ext.data.DataReader} reader The Reader object which converts the data
     * object into a block of Ext.data.Records.
     * @param {Function} callback The function into which to pass the block of Ext.data.Records.
     * The function must be passed

     *
  • The Record block object
    •
     *
  • The "arg" argument from the load function
    •
     *
  • A boolean success indicator
    •
     *

     * @param {Object} scope The scope (this reference) in which the callback function is executed. Defaults to the browser window.
     * @param {Object} arg An optional argument which is passed to the callback as its second parameter.
     */
    doRequest : function(action, rs, params, reader, callback, scope, arg) {
        // No implementation for CRUD in MemoryProxy.  Assumes all actions are 'load'
        params = params || {};
        var result;
        try {
            result = reader.readRecords(this.data);
        }catch(e){
            // @deprecated loadexception
            this.fireEvent("loadexception", this, null, arg, e);

            this.fireEvent('exception', this, 'response', action, arg, null, e);
            callback.call(scope, null, arg, false);
            return;
        }
        callback.call(scope, result, arg, true);
    }
});


The source code

/*!
 * licensing@extjs.com
 * http://www.extjs.com/license
 */
/*
 * Ext Core Library Examples 3.0 Beta
 * http://extjs.com/
 * Copyright(c) 2006-2009, Ext JS, LLC.
 *
 * The MIT License
 *
 * Permission is hereby granted, free of charge, to any person obtaining a copy
 * of this software and associated documentation files (the "Software"), to deal
 * in the Software without restriction, including without limitation the rights
 * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 * copies of the Software, and to permit persons to whom the Software is
 * furnished to do so, subject to the following conditions:
 *
 * The above copyright notice and this permission notice shall be included in
 * all copies or substantial portions of the Software.
 *
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 * THE SOFTWARE.
 *
 */

Ext.ns('Ext.ux');

Ext.ux.Menu = Ext.extend(Ext.util.Observable, {
    direction: 'horizontal',
    delay: 0.2,
    autoWidth: true,
    transitionType: 'fade',
    transitionDuration: 0.3,
    animate: true,
    currentClass: 'current',

    constructor: function(elId, config) {
        config = config || {};
        Ext.apply(this, config);

        Ext.ux.Menu.superclass.constructor.call(this, config);

        this.addEvents(
            'show',
            'hide',
            'click'
        );

        this.el = Ext.get(elId);

        this.initMarkup();
        this.initEvents();

        this.setCurrent();
    },

    initMarkup: function(){
        this.container = this.el.wrap({cls: 'ux-menu-container', style: 'z-index: ' + --Ext.ux.Menu.zSeed});
        this.items = this.el.select('li');

        this.el.addClass('ux-menu ux-menu-' + this.direction);
        this.el.select('>li').addClass('ux-menu-item-main');

        this.el.select('li:has(>ul)').addClass('ux-menu-item-parent').each(function(item) {
            item.down('a')
                .addClass('ux-menu-link-parent')
                .createChild({tag: 'span', cls: 'ux-menu-arrow'});
        });

        this.el.select('li:first-child>a').addClass('ux-menu-link-first');
        this.el.select('li:last-child>a').addClass('ux-menu-link-last');

        // create clear fixes for the floating stuff
        this.container.addClass('ux-menu-clearfix');

        // if autoWidth make every submenu as wide as its biggest child;
        if(this.autoWidth) {
            this.doAutoWidth();
        }

        var subs = this.el.select('ul');
        subs.addClass('ux-menu-sub');

        //ie6 and ie7/ie8 quirksmode need iframes behind the submenus
        if(Ext.isBorderBox || Ext.isIE7) {
            subs.each(function(item) {
                item.parent().createChild({tag: 'iframe', cls: 'ux-menu-ie-iframe'})
                    .setWidth(item.getWidth())
                    .setHeight(item.getHeight());
            });
        }

        subs.addClass('ux-menu-hidden');
    },

    initEvents: function() {
        this.showTask = new Ext.util.DelayedTask(this.showMenu, this);
        this.hideTask = new Ext.util.DelayedTask(function() {
            this.showTask.cancel();
            this.hideAll();
            this.fireEvent('hide');
        }, this);

        this.el.hover(function() {
            this.hideTask.cancel();
        }, function() {
            this.hideTask.delay(this.delay*1000);
        }, this);

        // for each item that has a submenu, create a mouseenter function that shows its submenu
        // delay 5 to make sure enter is fired after mouseover
        this.el.select('li.ux-menu-item-parent').on('mouseenter', this.onParentEnter, false, {me: this, delay: 5});

        // listen for mouseover events on items to hide other items submenus and remove hovers
        this.el.on('mouseover', function(ev, t) {
            this.manageSiblings(t);
            // if this item does not have a submenu, the showMenu task for a sibling could potentially still be fired, so cancel it
            if(!Ext.fly(t).hasClass('ux-menu-item-parent')) {
                this.showTask.cancel();
            }
        }, this, {delegate: 'li'});

        this.el.on('click', function(ev, t) {
            return this.fireEvent('click', ev, t, this);
        }, this, {delegate: 'a'})
    },

    onParentEnter: function(ev, link, o) {
        var item = Ext.get(this),
            me = o.me;

        // if this item is in a submenu and contains a submenu, check if the submenu is not still animating
        if(!item.hasClass('ux-menu-item-main') && item.parent('ul').hasActiveFx()) {
            item.parent('ul').stopFx(true);
        }

        // if submenu is already shown dont do anything
        if(!item.child('ul').hasClass('ux-menu-hidden')) {
            return;
        }

        me.showTask.delay(me.delay*1000, false, false, [item]);
    },

    showMenu : function(item) {
        var menu = item.child('ul'),
            x = y = 0;

        item.select('>a').addClass('ux-menu-link-hover');

        // some different configurations require different positioning
        if(this.direction == 'horizontal' && item.hasClass('ux-menu-item-main')) {
            y = item.getHeight()+1;
        }
        else {
            x = item.getWidth()+1;
        }

        // if its ie, force a repaint of the submenu
        if(Ext.isIE) {
            menu.select('ul').addClass('ux-menu-hidden');
            // ie bugs...
            if(Ext.isBorderBox || Ext.isIE7) {
                item.down('iframe').setStyle({left: x + 'px', top: y + 'px', display: 'block'});
            }
        }

        menu.setStyle({left: x + 'px', top: y + 'px'}).removeClass('ux-menu-hidden');

        if(this.animate) {
            switch(this.transitionType) {
                case 'slide':
                    if(this.direction == 'horizontal' && item.hasClass('ux-menu-item-main')) {
                        menu.slideIn('t', {
                            duration: this.transitionDuration
                        });
                    }
                    else {
                        menu.slideIn('l', {
                            duration: this.transitionDuration
                        });
                    }
                break;

                default:
                    menu.setOpacity(0.001).fadeIn({
                        duration: this.transitionDuration
                    });
                break
            }
        }

        this.fireEvent('show', item, menu, this);
    },

    manageSiblings: function(item) {
        var item = Ext.get(item);
        item.parent().select('li.ux-menu-item-parent').each(function(child) {
            if(child.dom.id !== item.dom.id) {
                child.select('>a').removeClass('ux-menu-link-hover');
                child.select('ul').stopFx(false).addClass('ux-menu-hidden');
                if (Ext.isBorderBox || Ext.isIE7) {
                    child.select('iframe').setStyle('display', 'none');
                }
            }
        });
    },

    hideAll: function() {
        this.manageSiblings(this.el);
    },

    setCurrent: function() {
        var els = this.el.query('.' + this.currentClass);
        if(!els.length) {
            return;
        }
        var item = Ext.get(els[els.length-1]).removeClass(this.currentClass).findParent('li', null, true);
        while(item && item.parent('.ux-menu')) {
            item.down('a').addClass(this.currentClass);
            item = item.parent('li');
        }
    },

    doAutoWidth: function() {
        var fixWidth = function(sub) {
            var widest = 0;
            var items = sub.select('>li');

            sub.setStyle({width: 3000 + 'px'});
            items.each(function(item) {
                widest = Math.max(widest, item.getWidth());
            });

            widest = Ext.isIE ? widest + 1 : widest;
            items.setWidth(widest + 'px');
            sub.setWidth(widest + 'px');
        }

        if(this.direction == 'vertical') {
            this.container.select('ul').each(fixWidth);
        }
        else {
            this.el.select('ul').each(fixWidth);
        }

    }
});

Ext.ux.Menu.zSeed = 10000;


The source code

/*!
 * licensing@extjs.com
 * http://www.extjs.com/license
 */

/**
 * @class Ext.layout.MenuLayout
 * @extends Ext.layout.ContainerLayout
 *
Layout manager used by {@link Ext.menu.Menu}. Generally this class should not need to be used directly.

 */
 Ext.layout.MenuLayout = Ext.extend(Ext.layout.ContainerLayout, {
    monitorResize : true,

    type: 'menu',

    setContainer : function(ct){
        this.monitorResize = !ct.floating;
        // This event is only fired by the menu in IE, used so we don't couple
        // the menu with the layout.
        ct.on('autosize', this.doAutoSize, this);
        Ext.layout.MenuLayout.superclass.setContainer.call(this, ct);
    },

    renderItem : function(c, position, target){
        if (!this.itemTpl) {
            this.itemTpl = Ext.layout.MenuLayout.prototype.itemTpl = new Ext.XTemplate(
                '
  • ',
                    '',
                        '  ',
                    '',
                '
    • '
            );
        }

        if(c && !c.rendered){
            if(Ext.isNumber(position)){
                position = target.dom.childNodes[position];
            }
            var a = this.getItemArgs(c);

//          The Component's positionEl is the
  •  it is rendered into
            c.render(c.positionEl = position ?
                this.itemTpl.insertBefore(position, a, true) :
                this.itemTpl.append(target, a, true));

//          Link the containing
  •  to the item.
            c.positionEl.menuItemId = c.getItemId();

//          If rendering a regular Component, and it needs an icon,
//          move the Component rightwards.
            if (!a.isMenuItem && a.needsIcon) {
                c.positionEl.addClass('x-menu-list-item-indent');
            }
            this.configureItem(c, position);
        }else if(c && !this.isValidParent(c, target)){
            if(Ext.isNumber(position)){
                position = target.dom.childNodes[position];
            }
            target.dom.insertBefore(c.getActionEl().dom, position || null);
        }
    },

    getItemArgs : function(c) {
        var isMenuItem = c instanceof Ext.menu.Item;
        return {
            isMenuItem: isMenuItem,
            needsIcon: !isMenuItem && (c.icon || c.iconCls),
            icon: c.icon || Ext.BLANK_IMAGE_URL,
            iconCls: 'x-menu-item-icon ' + (c.iconCls || ''),
            itemId: 'x-menu-el-' + c.id,
            itemCls: 'x-menu-list-item '
        };
    },

    //  Valid if the Component is in a
  •  which is part of our target

    isValidParent : function(c, target) {
        return c.el.up('li.x-menu-list-item', 5).dom.parentNode === (target.dom || target);
    },

    onLayout : function(ct, target){
        Ext.layout.MenuLayout.superclass.onLayout.call(this, ct, target);
        this.doAutoSize();
    },

    doAutoSize : function(){
        var ct = this.container, w = ct.width;
        if(ct.floating){
            if(w){
                ct.setWidth(w);
            }else if(Ext.isIE){
                ct.setWidth(Ext.isStrict && (Ext.isIE7 || Ext.isIE8) ? 'auto' : ct.minWidth);
                var el = ct.getEl(), t = el.dom.offsetWidth; // force recalc
                ct.setWidth(ct.getLayoutTarget().getWidth() + el.getFrameWidth('lr'));
            }
        }
    }
});
Ext.Container.LAYOUTS['menu'] = Ext.layout.MenuLayout;


The source code

/*!
 * licensing@extjs.com
 * http://www.extjs.com/license
 */

/**
 * @class Ext.menu.MenuMgr
 * Provides a common registry of all menu items on a page so that they can be easily accessed by id.
 * @singleton
 */
Ext.menu.MenuMgr = function(){
   var menus, active, groups = {}, attached = false, lastShow = new Date();

   // private - called when first menu is created
   function init(){
       menus = {};
       active = new Ext.util.MixedCollection();
       Ext.getDoc().addKeyListener(27, function(){
           if(active.length > 0){
               hideAll();
           }
       });
   }

   // private
   function hideAll(){
       if(active && active.length > 0){
           var c = active.clone();
           c.each(function(m){
               m.hide();
           });
           return true;
       }
       return false;
   }

   // private
   function onHide(m){
       active.remove(m);
       if(active.length < 1){
           Ext.getDoc().un("mousedown", onMouseDown);
           attached = false;
       }
   }

   // private
   function onShow(m){
       var last = active.last();
       lastShow = new Date();
       active.add(m);
       if(!attached){
           Ext.getDoc().on("mousedown", onMouseDown);
           attached = true;
       }
       if(m.parentMenu){
          m.getEl().setZIndex(parseInt(m.parentMenu.getEl().getStyle("z-index"), 10) + 3);
          m.parentMenu.activeChild = m;
       }else if(last && !last.isDestroyed && last.isVisible()){
          m.getEl().setZIndex(parseInt(last.getEl().getStyle("z-index"), 10) + 3);
       }
   }

   // private
   function onBeforeHide(m){
       if(m.activeChild){
           m.activeChild.hide();
       }
       if(m.autoHideTimer){
           clearTimeout(m.autoHideTimer);
           delete m.autoHideTimer;
       }
   }

   // private
   function onBeforeShow(m){
       var pm = m.parentMenu;
       if(!pm && !m.allowOtherMenus){
           hideAll();
       }else if(pm && pm.activeChild){
           pm.activeChild.hide();
       }
   }

   // private
   function onMouseDown(e){
       if(lastShow.getElapsed() > 50 && active.length > 0 && !e.getTarget(".x-menu")){
           hideAll();
       }
   }

   // private
   function onBeforeCheck(mi, state){
       if(state){
           var g = groups[mi.group];
           for(var i = 0, l = g.length; i < l; i++){
               if(g[i] != mi){
                   g[i].setChecked(false);
               }
           }
       }
   }

   return {

/**
        * Hides all menus that are currently visible
        * @return {Boolean} success True if any active menus were hidden.
        */
       hideAll : function(){
            return hideAll();
       },

       // private
       register : function(menu){
           if(!menus){
               init();
           }
           menus[menu.id] = menu;
           menu.on({
               beforehide: onBeforeHide,
               hide: onHide,
               beforeshow: onBeforeShow,
               show: onShow
           });
       },

/**
         * Returns a {@link Ext.menu.Menu} object
         * @param {String/Object} menu The string menu id, an existing menu object reference, or a Menu config that will
         * be used to generate and return a new Menu instance.
         * @return {Ext.menu.Menu} The specified menu, or null if none are found
         */
       get : function(menu){
           if(typeof menu == "string"){ // menu id
               if(!menus){  // not initialized, no menus to return
                   return null;
               }
               return menus[menu];
           }else if(menu.events){  // menu instance
               return menu;
           }else if(typeof menu.length == 'number'){ // array of menu items?
               return new Ext.menu.Menu({items:menu});
           }else{ // otherwise, must be a config
               return Ext.create(menu, 'menu');
           }
       },

       // private
       unregister : function(menu){
           delete menus[menu.id];
           menu.un("beforehide", onBeforeHide);
           menu.un("hide", onHide);
           menu.un("beforeshow", onBeforeShow);
           menu.un("show", onShow);
       },

       // private
       registerCheckable : function(menuItem){
           var g = menuItem.group;
           if(g){
               if(!groups[g]){
                   groups[g] = [];
               }
               groups[g].push(menuItem);
               menuItem.on("beforecheckchange", onBeforeCheck);
           }
       },

       // private
       unregisterCheckable : function(menuItem){
           var g = menuItem.group;
           if(g){
               groups[g].remove(menuItem);
               menuItem.un("beforecheckchange", onBeforeCheck);
           }
       },

       getCheckedItem : function(groupId){
           var g = groups[groupId];
           if(g){
               for(var i = 0, l = g.length; i < l; i++){
                   if(g[i].checked){
                       return g[i];
                   }
               }
           }
           return null;
       },

       setCheckedItem : function(groupId, itemId){
           var g = groups[groupId];
           if(g){
               for(var i = 0, l = g.length; i < l; i++){
                   if(g[i].id == itemId){
                       g[i].setChecked(true);
                   }
               }
           }
           return null;
       }
   };
}();


The source code

/*!
 * licensing@extjs.com
 * http://www.extjs.com/license
 */

/**
 * @class Ext.MessageBox
 *
Utility class for generating different styles of message boxes.  The alias Ext.Msg can also be used.

 *
Note that the MessageBox is asynchronous.  Unlike a regular JavaScript alert (which will halt
 * browser execution), showing a MessageBox will not cause the code to stop.  For this reason, if you have code
 * that should only run after some user feedback from the MessageBox, you must use a callback function
 * (see the function parameter for {@link #show} for more details).

 *
Example usage:

 *

// Basic alert:
Ext.Msg.alert('Status', 'Changes saved successfully.');

// Prompt for user data and process the result using a callback:
Ext.Msg.prompt('Name', 'Please enter your name:', function(btn, text){
    if (btn == 'ok'){
        // process text value and close...
    }
});

// Show a dialog using config options:
Ext.Msg.show({
   title:'Save Changes?',
   msg: 'You are closing a tab that has unsaved changes. Would you like to save your changes?',
   buttons: Ext.Msg.YESNOCANCEL,
   fn: processResult,
   animEl: 'elId',
   icon: Ext.MessageBox.QUESTION
});

 * @singleton
 */
Ext.MessageBox = function(){
    var dlg, opt, mask, waitTimer,
        bodyEl, msgEl, textboxEl, textareaEl, progressBar, pp, iconEl, spacerEl,
        buttons, activeTextEl, bwidth, bufferIcon = '', iconCls = '',
        buttonNames = ['ok', 'yes', 'no', 'cancel'];

    // private
    var handleButton = function(button){
        buttons[button].blur();
        if(dlg.isVisible()){
            dlg.hide();
            handleHide();
            Ext.callback(opt.fn, opt.scope||window, [button, activeTextEl.dom.value, opt], 1);
        }
    };

    // private
    var handleHide = function(){
        if(opt && opt.cls){
            dlg.el.removeClass(opt.cls);
        }
        progressBar.reset();
    };

    // private
    var handleEsc = function(d, k, e){
        if(opt && opt.closable !== false){
            dlg.hide();
            handleHide();
        }
        if(e){
            e.stopEvent();
        }
    };

    // private
    var updateButtons = function(b){
        var width = 0,
            cfg;
        if(!b){
            Ext.each(buttonNames, function(name){
                buttons[name].hide();
            });
            return width;
        }
        dlg.footer.dom.style.display = '';
        Ext.iterate(buttons, function(name, btn){
            cfg = b[name];
            if(cfg){
                btn.show();
                btn.setText(Ext.isString(cfg) ? cfg : Ext.MessageBox.buttonText[name]);
                width += btn.getEl().getWidth() + 15;
            }else{
                btn.hide();
            }
        });
        return width;
    };

    return {

/**
         * Returns a reference to the underlying {@link Ext.Window} element
         * @return {Ext.Window} The window
         */
        getDialog : function(titleText){
           if(!dlg){
                var btns = [];

                buttons = {};
                Ext.each(buttonNames, function(name){
                    btns.push(buttons[name] = new Ext.Button({
                        text: this.buttonText[name],
                        handler: handleButton.createCallback(name),
                        hideMode: 'offsets'
                    }));
                }, this);
                dlg = new Ext.Window({
                    autoCreate : true,
                    title:titleText,
                    resizable:false,
                    constrain:true,
                    constrainHeader:true,
                    minimizable : false,
                    maximizable : false,
                    stateful: false,
                    modal: true,
                    shim:true,
                    buttonAlign:"center",
                    width:400,
                    height:100,
                    minHeight: 80,
                    plain:true,
                    footer:true,
                    closable:true,
                    close : function(){
                        if(opt && opt.buttons && opt.buttons.no && !opt.buttons.cancel){
                            handleButton("no");
                        }else{
                            handleButton("cancel");
                        }
                    },
                    fbar: new Ext.Toolbar({
                        items: btns,
                        enableOverflow: false
                    })
                });
                dlg.render(document.body);
                dlg.getEl().addClass('x-window-dlg');
                mask = dlg.mask;
                bodyEl = dlg.body.createChild({
                    html:'

'
                });
                iconEl = Ext.get(bodyEl.dom.firstChild);
                var contentEl = bodyEl.dom.childNodes[1];
                msgEl = Ext.get(contentEl.firstChild);
                textboxEl = Ext.get(contentEl.childNodes[2].firstChild);
                textboxEl.enableDisplayMode();
                textboxEl.addKeyListener([10,13], function(){
                    if(dlg.isVisible() && opt && opt.buttons){
                        if(opt.buttons.ok){
                            handleButton("ok");
                        }else if(opt.buttons.yes){
                            handleButton("yes");
                        }
                    }
                });
                textareaEl = Ext.get(contentEl.childNodes[2].childNodes[1]);
                textareaEl.enableDisplayMode();
                progressBar = new Ext.ProgressBar({
                    renderTo:bodyEl
                });
               bodyEl.createChild({cls:'x-clear'});
            }
            return dlg;
        },

/**
         * Updates the message box body text
         * @param {String} text (optional) Replaces the message box element's innerHTML with the specified string (defaults to
         * the XHTML-compliant non-breaking space character '&#160;')
         * @return {Ext.MessageBox} this
         */
        updateText : function(text){
            if(!dlg.isVisible() && !opt.width){
                dlg.setSize(this.maxWidth, 100); // resize first so content is never clipped from previous shows
            }
            msgEl.update(text || ' ');

            var iw = iconCls != '' ? (iconEl.getWidth() + iconEl.getMargins('lr')) : 0,
                mw = msgEl.getWidth() + msgEl.getMargins('lr'),
                fw = dlg.getFrameWidth('lr'),
                bw = dlg.body.getFrameWidth('lr'),
                w;

            if (Ext.isIE && iw > 0){
                //3 pixels get subtracted in the icon CSS for an IE margin issue,
                //so we have to add it back here for the overall width to be consistent
                iw += 3;
            }
            w = Math.max(Math.min(opt.width || iw+mw+fw+bw, opt.maxWidth || this.maxWidth),
                    Math.max(opt.minWidth || this.minWidth, bwidth || 0));

            if(opt.prompt === true){
                activeTextEl.setWidth(w-iw-fw-bw);
            }
            if(opt.progress === true || opt.wait === true){
                progressBar.setSize(w-iw-fw-bw);
            }
            if(Ext.isIE && w == bwidth){
                w += 4; //Add offset when the content width is smaller than the buttons.
            }
            dlg.setSize(w, 'auto').center();
            return this;
        },

/**
         * Updates a progress-style message box's text and progress bar. Only relevant on message boxes
         * initiated via {@link Ext.MessageBox#progress} or {@link Ext.MessageBox#wait},
         * or by calling {@link Ext.MessageBox#show} with progress: true.
         * @param {Number} value Any number between 0 and 1 (e.g., .5, defaults to 0)
         * @param {String} progressText The progress text to display inside the progress bar (defaults to '')
         * @param {String} msg The message box's body text is replaced with the specified string (defaults to undefined
         * so that any existing body text will not get overwritten by default unless a new value is passed in)
         * @return {Ext.MessageBox} this
         */
        updateProgress : function(value, progressText, msg){
            progressBar.updateProgress(value, progressText);
            if(msg){
                this.updateText(msg);
            }
            return this;
        },

/**
         * Returns true if the message box is currently displayed
         * @return {Boolean} True if the message box is visible, else false
         */
        isVisible : function(){
            return dlg && dlg.isVisible();
        },

/**
         * Hides the message box if it is displayed
         * @return {Ext.MessageBox} this
         */
        hide : function(){
            var proxy = dlg ? dlg.activeGhost : null;
            if(this.isVisible() || proxy){
                dlg.hide();
                handleHide();
                if (proxy){
                    // unghost is a private function, but i saw no better solution
                    // to fix the locking problem when dragging while it closes
                    dlg.unghost(false, false);
                }
            }
            return this;
        },

/**
         * Displays a new message box, or reinitializes an existing message box, based on the config options
         * passed in. All display functions (e.g. prompt, alert, etc.) on MessageBox call this function internally,
         * although those calls are basic shortcuts and do not support all of the config options allowed here.
         * @param {Object} config The following config options are supported:

         *
  • animEl : String/Element
    An id or Element from which the message box should animate as it
         * opens and closes (defaults to undefined)
    •
         *
  • buttons : Object/Boolean
    A button config object (e.g., Ext.MessageBox.OKCANCEL or {ok:'Foo',
         * cancel:'Bar'}), or false to not show any buttons (defaults to false)
    •
         *
  • closable : Boolean
    False to hide the top-right close button (defaults to true). Note that
         * progress and wait dialogs will ignore this property and always hide the close button as they can only
         * be closed programmatically.
    •
         *
  • cls : String
    A custom CSS class to apply to the message box's container element
    •
         *
  • defaultTextHeight : Number
    The default height in pixels of the message box's multiline textarea
         * if displayed (defaults to 75)
    •
         *
  • fn : Function
    A callback function which is called when the dialog is dismissed either
         * by clicking on the configured buttons, or on the dialog close button, or by pressing
         * the return button to enter input.
         *
    Progress and wait dialogs will ignore this option since they do not respond to user
         * actions and can only be closed programmatically, so any required function should be called
         * by the same code after it closes the dialog. Parameters passed:

         *
    • buttonId : String
      The ID of the button pressed, one of:

         *
      • ok
        •
         *
      • yes
        •
         *
      • no
        •
         *
      • cancel
        •
         *
      •
         *
    • text : String
      Value of the input field if either prompt
         * or multiline is true
      •
         *
    • opt : Object
      The config object passed to show.
      •
         *
    •
         *
  • scope : Object
    The scope of the callback function
    •
         *
  • icon : String
    A CSS class that provides a background image to be used as the body icon for the
         * dialog (e.g. Ext.MessageBox.WARNING or 'custom-class') (defaults to '')
    •
         *
  • iconCls : String
    The standard {@link Ext.Window#iconCls} to
         * add an optional header icon (defaults to '')
    •
         *
  • maxWidth : Number
    The maximum width in pixels of the message box (defaults to 600)
    •
         *
  • minWidth : Number
    The minimum width in pixels of the message box (defaults to 100)
    •
         *
  • modal : Boolean
    False to allow user interaction with the page while the message box is
         * displayed (defaults to true)
    •
         *
  • msg : String
    A string that will replace the existing message box body text (defaults to the
         * XHTML-compliant non-breaking space character '&#160;')
    •
         *
  • multiline : Boolean

         * True to prompt the user to enter multi-line text (defaults to false)
    •
         *
  • progress : Boolean
    True to display a progress bar (defaults to false)
    •
         *
  • progressText : String
    The text to display inside the progress bar if progress = true (defaults to '')
    •
         *
  • prompt : Boolean
    True to prompt the user to enter single-line text (defaults to false)
    •
         *
  • proxyDrag : Boolean
    True to display a lightweight proxy while dragging (defaults to false)
    •
         *
  • title : String
    The title text
    •
         *
  • value : String
    The string value to set into the active textbox element if displayed
    •
         *
  • wait : Boolean
    True to display a progress bar (defaults to false)
    •
         *
  • waitConfig : Object
    A {@link Ext.ProgressBar#waitConfig} object (applies only if wait = true)
    •
         *
  • width : Number
    The width of the dialog in pixels
    •
         *

         * Example usage:
         *

Ext.Msg.show({
   title: 'Address',
   msg: 'Please enter your address:',
   width: 300,
   buttons: Ext.MessageBox.OKCANCEL,
   multiline: true,
   fn: saveAddress,
   animEl: 'addAddressBtn',
   icon: Ext.MessageBox.INFO
});

         * @return {Ext.MessageBox} this
         */
        show : function(options){
            if(this.isVisible()){
                this.hide();
            }
            opt = options;
            var d = this.getDialog(opt.title || " ");

            d.setTitle(opt.title || " ");
            var allowClose = (opt.closable !== false && opt.progress !== true && opt.wait !== true);
            d.tools.close.setDisplayed(allowClose);
            activeTextEl = textboxEl;
            opt.prompt = opt.prompt || (opt.multiline ? true : false);
            if(opt.prompt){
                if(opt.multiline){
                    textboxEl.hide();
                    textareaEl.show();
                    textareaEl.setHeight(Ext.isNumber(opt.multiline) ? opt.multiline : this.defaultTextHeight);
                    activeTextEl = textareaEl;
                }else{
                    textboxEl.show();
                    textareaEl.hide();
                }
            }else{
                textboxEl.hide();
                textareaEl.hide();
            }
            activeTextEl.dom.value = opt.value || "";
            if(opt.prompt){
                d.focusEl = activeTextEl;
            }else{
                var bs = opt.buttons;
                var db = null;
                if(bs && bs.ok){
                    db = buttons["ok"];
                }else if(bs && bs.yes){
                    db = buttons["yes"];
                }
                if (db){
                    d.focusEl = db;
                }
            }
            if(opt.iconCls){
              d.setIconClass(opt.iconCls);
            }
            this.setIcon(Ext.isDefined(opt.icon) ? opt.icon : bufferIcon);
            bwidth = updateButtons(opt.buttons);
            progressBar.setVisible(opt.progress === true || opt.wait === true);
            this.updateProgress(0, opt.progressText);
            this.updateText(opt.msg);
            if(opt.cls){
                d.el.addClass(opt.cls);
            }
            d.proxyDrag = opt.proxyDrag === true;
            d.modal = opt.modal !== false;
            d.mask = opt.modal !== false ? mask : false;
            if(!d.isVisible()){
                // force it to the end of the z-index stack so it gets a cursor in FF
                document.body.appendChild(dlg.el.dom);
                d.setAnimateTarget(opt.animEl);
                //workaround for window internally enabling keymap in afterShow
                d.on('show', function(){
                    if(allowClose === true){
                        d.keyMap.enable();
                    }else{
                        d.keyMap.disable();
                    }
                }, this, {single:true});
                d.show(opt.animEl);
            }
            if(opt.wait === true){
                progressBar.wait(opt.waitConfig);
            }
            return this;
        },

/**
         * Adds the specified icon to the dialog.  By default, the class 'ext-mb-icon' is applied for default
         * styling, and the class passed in is expected to supply the background image url. Pass in empty string ('')
         * to clear any existing icon. This method must be called before the MessageBox is shown.
         * The following built-in icon classes are supported, but you can also pass in a custom class name:
         *
Ext.MessageBox.INFO
Ext.MessageBox.WARNING
Ext.MessageBox.QUESTION
Ext.MessageBox.ERROR
         *

         * @param {String} icon A CSS classname specifying the icon's background image url, or empty string to clear the icon
         * @return {Ext.MessageBox} this
         */
        setIcon : function(icon){
            if(!dlg){
                bufferIcon = icon;
                return;
            }
            bufferIcon = undefined;
            if(icon && icon != ''){
                iconEl.removeClass('x-hidden');
                iconEl.replaceClass(iconCls, icon);
                bodyEl.addClass('x-dlg-icon');
                iconCls = icon;
            }else{
                iconEl.replaceClass(iconCls, 'x-hidden');
                bodyEl.removeClass('x-dlg-icon');
                iconCls = '';
            }
            return this;
        },

/**
         * Displays a message box with a progress bar.  This message box has no buttons and is not closeable by
         * the user.  You are responsible for updating the progress bar as needed via {@link Ext.MessageBox#updateProgress}
         * and closing the message box when the process is complete.
         * @param {String} title The title bar text
         * @param {String} msg The message box body text
         * @param {String} progressText (optional) The text to display inside the progress bar (defaults to '')
         * @return {Ext.MessageBox} this
         */
        progress : function(title, msg, progressText){
            this.show({
                title : title,
                msg : msg,
                buttons: false,
                progress:true,
                closable:false,
                minWidth: this.minProgressWidth,
                progressText: progressText
            });
            return this;
        },

/**
         * Displays a message box with an infinitely auto-updating progress bar.  This can be used to block user
         * interaction while waiting for a long-running process to complete that does not have defined intervals.
         * You are responsible for closing the message box when the process is complete.
         * @param {String} msg The message box body text
         * @param {String} title (optional) The title bar text
         * @param {Object} config (optional) A {@link Ext.ProgressBar#waitConfig} object
         * @return {Ext.MessageBox} this
         */
        wait : function(msg, title, config){
            this.show({
                title : title,
                msg : msg,
                buttons: false,
                closable:false,
                wait:true,
                modal:true,
                minWidth: this.minProgressWidth,
                waitConfig: config
            });
            return this;
        },

/**
         * Displays a standard read-only message box with an OK button (comparable to the basic JavaScript alert prompt).
         * If a callback function is passed it will be called after the user clicks the button, and the
         * id of the button that was clicked will be passed as the only parameter to the callback
         * (could also be the top-right close button).
         * @param {String} title The title bar text
         * @param {String} msg The message box body text
         * @param {Function} fn (optional) The callback function invoked after the message box is closed
         * @param {Object} scope (optional) The scope (this reference) in which the callback is executed. Defaults to the browser wnidow.
         * @return {Ext.MessageBox} this
         */
        alert : function(title, msg, fn, scope){
            this.show({
                title : title,
                msg : msg,
                buttons: this.OK,
                fn: fn,
                scope : scope,
                minWidth: this.minWidth
            });
            return this;
        },

/**
         * Displays a confirmation message box with Yes and No buttons (comparable to JavaScript's confirm).
         * If a callback function is passed it will be called after the user clicks either button,
         * and the id of the button that was clicked will be passed as the only parameter to the callback
         * (could also be the top-right close button).
         * @param {String} title The title bar text
         * @param {String} msg The message box body text
         * @param {Function} fn (optional) The callback function invoked after the message box is closed
         * @param {Object} scope (optional) The scope (this reference) in which the callback is executed. Defaults to the browser wnidow.
         * @return {Ext.MessageBox} this
         */
        confirm : function(title, msg, fn, scope){
            this.show({
                title : title,
                msg : msg,
                buttons: this.YESNO,
                fn: fn,
                scope : scope,
                icon: this.QUESTION,
                minWidth: this.minWidth
            });
            return this;
        },

/**
         * Displays a message box with OK and Cancel buttons prompting the user to enter some text (comparable to JavaScript's prompt).
         * The prompt can be a single-line or multi-line textbox.  If a callback function is passed it will be called after the user
         * clicks either button, and the id of the button that was clicked (could also be the top-right
         * close button) and the text that was entered will be passed as the two parameters to the callback.
         * @param {String} title The title bar text
         * @param {String} msg The message box body text
         * @param {Function} fn (optional) The callback function invoked after the message box is closed
         * @param {Object} scope (optional) The scope (this reference) in which the callback is executed. Defaults to the browser wnidow.
         * @param {Boolean/Number} multiline (optional) True to create a multiline textbox using the defaultTextHeight
         * property, or the height in pixels to create the textbox (defaults to false / single-line)
         * @param {String} value (optional) Default value of the text input element (defaults to '')
         * @return {Ext.MessageBox} this
         */
        prompt : function(title, msg, fn, scope, multiline, value){
            this.show({
                title : title,
                msg : msg,
                buttons: this.OKCANCEL,
                fn: fn,
                minWidth: this.minPromptWidth,
                scope : scope,
                prompt:true,
                multiline: multiline,
                value: value
            });
            return this;
        },

/**
         * Button config that displays a single OK button
         * @type Object
         */
        OK : {ok:true},

/**
         * Button config that displays a single Cancel button
         * @type Object
         */
        CANCEL : {cancel:true},

/**
         * Button config that displays OK and Cancel buttons
         * @type Object
         */
        OKCANCEL : {ok:true, cancel:true},

/**
         * Button config that displays Yes and No buttons
         * @type Object
         */
        YESNO : {yes:true, no:true},

/**
         * Button config that displays Yes, No and Cancel buttons
         * @type Object
         */
        YESNOCANCEL : {yes:true, no:true, cancel:true},

/**
         * The CSS class that provides the INFO icon image
         * @type String
         */
        INFO : 'ext-mb-info',

/**
         * The CSS class that provides the WARNING icon image
         * @type String
         */
        WARNING : 'ext-mb-warning',

/**
         * The CSS class that provides the QUESTION icon image
         * @type String
         */
        QUESTION : 'ext-mb-question',

/**
         * The CSS class that provides the ERROR icon image
         * @type String
         */
        ERROR : 'ext-mb-error',

/**
         * The default height in pixels of the message box's multiline textarea if displayed (defaults to 75)
         * @type Number
         */
        defaultTextHeight : 75,

/**
         * The maximum width in pixels of the message box (defaults to 600)
         * @type Number
         */
        maxWidth : 600,

/**
         * The minimum width in pixels of the message box (defaults to 100)
         * @type Number
         */
        minWidth : 100,

/**
         * The minimum width in pixels of the message box if it is a progress-style dialog.  This is useful
         * for setting a different minimum width than text-only dialogs may need (defaults to 250).
         * @type Number
         */
        minProgressWidth : 250,

/**
         * The minimum width in pixels of the message box if it is a prompt dialog.  This is useful
         * for setting a different minimum width than text-only dialogs may need (defaults to 250).
         * @type Number
         */
        minPromptWidth: 250,

/**
         * An object containing the default button text strings that can be overriden for localized language support.
         * Supported properties are: ok, cancel, yes and no.  Generally you should include a locale-specific
         * resource file for handling language support across the framework.
         * Customize the default text like so: Ext.MessageBox.buttonText.yes = "oui"; //french
         * @type Object
         */
        buttonText : {
            ok : "OK",
            cancel : "Cancel",
            yes : "Yes",
            no : "No"
        }
    };
}();

/**
 * Shorthand for {@link Ext.MessageBox}
 */
Ext.Msg = Ext.MessageBox;


The source code

/*!
 * licensing@extjs.com
 * http://www.extjs.com/license
 */

/**
 * @class Ext.util.MixedCollection
 * @extends Ext.util.Observable
 * A Collection class that maintains both numeric indexes and keys and exposes events.
 * @constructor
 * @param {Boolean} allowFunctions Specify true if the {@link #addAll}
 * function should add function references to the collection. Defaults to
 * false.
 * @param {Function} keyFn A function that can accept an item of the type(s) stored in this MixedCollection
 * and return the key value for that item.  This is used when available to look up the key on items that
 * were passed without an explicit key parameter to a MixedCollection method.  Passing this parameter is
 * equivalent to providing an implementation for the {@link #getKey} method.
 */
Ext.util.MixedCollection = function(allowFunctions, keyFn){
    this.items = [];
    this.map = {};
    this.keys = [];
    this.length = 0;
    this.addEvents(

/**
         * @event clear
         * Fires when the collection is cleared.
         */
        'clear',

/**
         * @event add
         * Fires when an item is added to the collection.
         * @param {Number} index The index at which the item was added.
         * @param {Object} o The item added.
         * @param {String} key The key associated with the added item.
         */
        'add',

/**
         * @event replace
         * Fires when an item is replaced in the collection.
         * @param {String} key he key associated with the new added.
         * @param {Object} old The item being replaced.
         * @param {Object} new The new item.
         */
        'replace',

/**
         * @event remove
         * Fires when an item is removed from the collection.
         * @param {Object} o The item being removed.
         * @param {String} key (optional) The key associated with the removed item.
         */
        'remove',
        'sort'
    );
    this.allowFunctions = allowFunctions === true;
    if(keyFn){
        this.getKey = keyFn;
    }
    Ext.util.MixedCollection.superclass.constructor.call(this);
};

Ext.extend(Ext.util.MixedCollection, Ext.util.Observable, {

/**
     * @cfg {Boolean} allowFunctions Specify true if the {@link #addAll}
     * function should add function references to the collection. Defaults to
     * false.
     */
    allowFunctions : false,

/**
     * Adds an item to the collection. Fires the {@link #add} event when complete.
     * @param {String} key
The key to associate with the item, or the new item.

     *
If a {@link #getKey} implementation was specified for this MixedCollection,
     * or if the key of the stored items is in a property called id,
     * the MixedCollection will be able to derive the key for the new item.
     * In this case just pass the new item in this parameter.

     * @param {Object} o The item to add.
     * @return {Object} The item added.
     */
    add : function(key, o){
        if(arguments.length == 1){
            o = arguments[0];
            key = this.getKey(o);
        }
        if(typeof key != 'undefined' && key !== null){
            var old = this.map[key];
            if(typeof old != 'undefined'){
                return this.replace(key, o);
            }
            this.map[key] = o;
        }
        this.length++;
        this.items.push(o);
        this.keys.push(key);
        this.fireEvent('add', this.length-1, o, key);
        return o;
    },

/**
      * MixedCollection has a generic way to fetch keys if you implement getKey.  The default implementation
      * simply returns item.id but you can provide your own implementation
      * to return a different value as in the following examples:

// normal way
var mc = new Ext.util.MixedCollection();
mc.add(someEl.dom.id, someEl);
mc.add(otherEl.dom.id, otherEl);
//and so on

// using getKey
var mc = new Ext.util.MixedCollection();
mc.getKey = function(el){
   return el.dom.id;
};
mc.add(someEl);
mc.add(otherEl);

// or via the constructor
var mc = new Ext.util.MixedCollection(false, function(el){
   return el.dom.id;
});
mc.add(someEl);
mc.add(otherEl);
     *

     * @param {Object} item The item for which to find the key.
     * @return {Object} The key for the passed item.
     */
    getKey : function(o){
         return o.id;
    },

/**
     * Replaces an item in the collection. Fires the {@link #replace} event when complete.
     * @param {String} key
The key associated with the item to replace, or the replacement item.

     *
If you supplied a {@link #getKey} implementation for this MixedCollection, or if the key
     * of your stored items is in a property called id, then the MixedCollection
     * will be able to derive the key of the replacement item. If you want to replace an item
     * with one having the same key value, then just pass the replacement item in this parameter.

     * @param o {Object} o (optional) If the first parameter passed was a key, the item to associate
     * with that key.
     * @return {Object}  The new item.
     */
    replace : function(key, o){
        if(arguments.length == 1){
            o = arguments[0];
            key = this.getKey(o);
        }
        var old = this.map[key];
        if(typeof key == 'undefined' || key === null || typeof old == 'undefined'){
             return this.add(key, o);
        }
        var index = this.indexOfKey(key);
        this.items[index] = o;
        this.map[key] = o;
        this.fireEvent('replace', key, old, o);
        return o;
    },

/**
     * Adds all elements of an Array or an Object to the collection.
     * @param {Object/Array} objs An Object containing properties which will be added
     * to the collection, or an Array of values, each of which are added to the collection.
     * Functions references will be added to the collection if {@link #allowFunctions}
     * has been set to true.
     */
    addAll : function(objs){
        if(arguments.length > 1 || Ext.isArray(objs)){
            var args = arguments.length > 1 ? arguments : objs;
            for(var i = 0, len = args.length; i < len; i++){
                this.add(args[i]);
            }
        }else{
            for(var key in objs){
                if(this.allowFunctions || typeof objs[key] != 'function'){
                    this.add(key, objs[key]);
                }
            }
        }
    },

/**
     * Executes the specified function once for every item in the collection, passing the following arguments:
     *

     *
  • item : Mixed
    The collection item
    •
     *
  • index : Number
    The item's index
    •
     *
  • length : Number
    The total number of items in the collection
    •
     *

     * The function should return a boolean value. Returning false from the function will stop the iteration.
     * @param {Function} fn The function to execute for each item.
     * @param {Object} scope (optional) The scope (this reference) in which the function is executed. Defaults to the current item in the iteration.
     */
    each : function(fn, scope){
        var items = [].concat(this.items); // each safe for removal
        for(var i = 0, len = items.length; i < len; i++){
            if(fn.call(scope || items[i], items[i], i, len) === false){
                break;
            }
        }
    },

/**
     * Executes the specified function once for every key in the collection, passing each
     * key, and its associated item as the first two parameters.
     * @param {Function} fn The function to execute for each item.
     * @param {Object} scope (optional) The scope (this reference) in which the function is executed. Defaults to the browser window.
     */
    eachKey : function(fn, scope){
        for(var i = 0, len = this.keys.length; i < len; i++){
            fn.call(scope || window, this.keys[i], this.items[i], i, len);
        }
    },

/**
     * Returns the first item in the collection which elicits a true return value from the
     * passed selection function.
     * @param {Function} fn The selection function to execute for each item.
     * @param {Object} scope (optional) The scope (this reference) in which the function is executed. Defaults to the browser window.
     * @return {Object} The first item in the collection which returned true from the selection function.
     */
    find : function(fn, scope){
        for(var i = 0, len = this.items.length; i < len; i++){
            if(fn.call(scope || window, this.items[i], this.keys[i])){
                return this.items[i];
            }
        }
        return null;
    },

/**
     * Inserts an item at the specified index in the collection. Fires the {@link #add} event when complete.
     * @param {Number} index The index to insert the item at.
     * @param {String} key The key to associate with the new item, or the item itself.
     * @param {Object} o (optional) If the second parameter was a key, the new item.
     * @return {Object} The item inserted.
     */
    insert : function(index, key, o){
        if(arguments.length == 2){
            o = arguments[1];
            key = this.getKey(o);
        }
        if(this.containsKey(key)){
            this.suspendEvents();
            this.removeKey(key);
            this.resumeEvents();
        }
        if(index >= this.length){
            return this.add(key, o);
        }
        this.length++;
        this.items.splice(index, 0, o);
        if(typeof key != 'undefined' && key !== null){
            this.map[key] = o;
        }
        this.keys.splice(index, 0, key);
        this.fireEvent('add', index, o, key);
        return o;
    },

/**
     * Remove an item from the collection.
     * @param {Object} o The item to remove.
     * @return {Object} The item removed or false if no item was removed.
     */
    remove : function(o){
        return this.removeAt(this.indexOf(o));
    },

/**
     * Remove an item from a specified index in the collection. Fires the {@link #remove} event when complete.
     * @param {Number} index The index within the collection of the item to remove.
     * @return {Object} The item removed or false if no item was removed.
     */
    removeAt : function(index){
        if(index < this.length && index >= 0){
            this.length--;
            var o = this.items[index];
            this.items.splice(index, 1);
            var key = this.keys[index];
            if(typeof key != 'undefined'){
                delete this.map[key];
            }
            this.keys.splice(index, 1);
            this.fireEvent('remove', o, key);
            return o;
        }
        return false;
    },

/**
     * Removed an item associated with the passed key fom the collection.
     * @param {String} key The key of the item to remove.
     * @return {Object} The item removed or false if no item was removed.
     */
    removeKey : function(key){
        return this.removeAt(this.indexOfKey(key));
    },

/**
     * Returns the number of items in the collection.
     * @return {Number} the number of items in the collection.
     */
    getCount : function(){
        return this.length;
    },

/**
     * Returns index within the collection of the passed Object.
     * @param {Object} o The item to find the index of.
     * @return {Number} index of the item. Returns -1 if not found.
     */
    indexOf : function(o){
        return this.items.indexOf(o);
    },

/**
     * Returns index within the collection of the passed key.
     * @param {String} key The key to find the index of.
     * @return {Number} index of the key.
     */
    indexOfKey : function(key){
        return this.keys.indexOf(key);
    },

/**
     * Returns the item associated with the passed key OR index.
     * Key has priority over index.  This is the equivalent
     * of calling {@link #key} first, then if nothing matched calling {@link #itemAt}.
     * @param {String/Number} key The key or index of the item.
     * @return {Object} If the item is found, returns the item.  If the item was not found, returns undefined.
     * If an item was found, but is a Class, returns null.
     */
    item : function(key){
        var mk = this.map[key],
            item = mk !== undefined ? mk : (typeof key == 'number') ? this.items[key] : undefined;
        return !Ext.isFunction(item) || this.allowFunctions ? item : null; // for prototype!
    },

/**
     * Returns the item at the specified index.
     * @param {Number} index The index of the item.
     * @return {Object} The item at the specified index.
     */
    itemAt : function(index){
        return this.items[index];
    },

/**
     * Returns the item associated with the passed key.
     * @param {String/Number} key The key of the item.
     * @return {Object} The item associated with the passed key.
     */
    key : function(key){
        return this.map[key];
    },

/**
     * Returns true if the collection contains the passed Object as an item.
     * @param {Object} o  The Object to look for in the collection.
     * @return {Boolean} True if the collection contains the Object as an item.
     */
    contains : function(o){
        return this.indexOf(o) != -1;
    },

/**
     * Returns true if the collection contains the passed Object as a key.
     * @param {String} key The key to look for in the collection.
     * @return {Boolean} True if the collection contains the Object as a key.
     */
    containsKey : function(key){
        return typeof this.map[key] != 'undefined';
    },

/**
     * Removes all items from the collection.  Fires the {@link #clear} event when complete.
     */
    clear : function(){
        this.length = 0;
        this.items = [];
        this.keys = [];
        this.map = {};
        this.fireEvent('clear');
    },

/**
     * Returns the first item in the collection.
     * @return {Object} the first item in the collection..
     */
    first : function(){
        return this.items[0];
    },

/**
     * Returns the last item in the collection.
     * @return {Object} the last item in the collection..
     */
    last : function(){
        return this.items[this.length-1];
    },

    /**
     * @private
     * Performs the actual sorting based on a direction and a sorting function. Internally,
     * this creates a temporary array of all items in the MixedCollection, sorts it and then writes
     * the sorted array data back into this.items and this.keys
     * @param {String} property Property to sort by ('key', 'value', or 'index')
     * @param {String} dir (optional) Direction to sort 'ASC' or 'DESC'. Defaults to 'ASC'.
     * @param {Function} fn (optional) Comparison function that defines the sort order.
     * Defaults to sorting by numeric value.
     */
    _sort : function(property, dir, fn){
        var i, len,
            dsc   = String(dir).toUpperCase() == 'DESC' ? -1 : 1,

            //this is a temporary array used to apply the sorting function
            c     = [],
            keys  = this.keys,
            items = this.items;

        //default to a simple sorter function if one is not provided
        fn = fn || function(a, b) {
            return a - b;
        };

        //copy all the items into a temporary array, which we will sort
        for(i = 0, len = items.length; i < len; i++){
            c[c.length] = {
                key  : keys[i],
                value: items[i],
                index: i
            };
        }

        //sort the temporary array
        c.sort(function(a, b){
            var v = fn(a[property], b[property]) * dsc;
            if(v === 0){
                v = (a.index < b.index ? -1 : 1);
            }
            return v;
        });

        //copy the temporary array back into the main this.items and this.keys objects
        for(i = 0, len = c.length; i < len; i++){
            items[i] = c[i].value;
            keys[i]  = c[i].key;
        }

        this.fireEvent('sort', this);
    },

/**
     * Sorts this collection by item value with the passed comparison function.
     * @param {String} direction (optional) 'ASC' or 'DESC'. Defaults to 'ASC'.
     * @param {Function} fn (optional) Comparison function that defines the sort order.
     * Defaults to sorting by numeric value.
     */
    sort : function(dir, fn){
        this._sort('value', dir, fn);
    },

/**
     * Reorders each of the items based on a mapping from old index to new index. Internally this
     * just translates into a sort. The 'sort' event is fired whenever reordering has occured.
     * @param {Object} mapping Mapping from old item index to new item index
     */
    reorder: function(mapping) {
        this.suspendEvents();

        var items     = this.items,
            index     = 0,
            length    = items.length,
            order     = [],
            remaining = [];

        //object of {oldPosition: newPosition} reversed to {newPosition: oldPosition}
        for (oldIndex in mapping) {
            order[mapping[oldIndex]] = items[oldIndex];
        }

        for (index = 0; index < length; index++) {
            if (mapping[index] == undefined) {
                remaining.push(items[index]);
            }
        }

        for (index = 0; index < length; index++) {
            if (order[index] == undefined) {
                order[index] = remaining.shift();
            }
        }

        this.clear();
        this.addAll(order);

        this.resumeEvents();
        this.fireEvent('sort', this);
    },

/**
     * Sorts this collection by keys.
     * @param {String} direction (optional) 'ASC' or 'DESC'. Defaults to 'ASC'.
     * @param {Function} fn (optional) Comparison function that defines the sort order.
     * Defaults to sorting by case insensitive string.
     */
    keySort : function(dir, fn){
        this._sort('key', dir, fn || function(a, b){
            var v1 = String(a).toUpperCase(), v2 = String(b).toUpperCase();
            return v1 > v2 ? 1 : (v1 < v2 ? -1 : 0);
        });
    },

/**
     * Returns a range of items in this collection
     * @param {Number} startIndex (optional) The starting index. Defaults to 0.
     * @param {Number} endIndex (optional) The ending index. Defaults to the last item.
     * @return {Array} An array of items
     */
    getRange : function(start, end){
        var items = this.items;
        if(items.length < 1){
            return [];
        }
        start = start || 0;
        end = Math.min(typeof end == 'undefined' ? this.length-1 : end, this.length-1);
        var i, r = [];
        if(start <= end){
            for(i = start; i <= end; i++) {
                r[r.length] = items[i];
            }
        }else{
            for(i = start; i >= end; i--) {
                r[r.length] = items[i];
            }
        }
        return r;
    },

/**
     * Filter the objects in this collection by a specific property.
     * Returns a new collection that has been filtered.
     * @param {String} property A property on your objects
     * @param {String/RegExp} value Either string that the property values
     * should start with or a RegExp to test against the property
     * @param {Boolean} anyMatch (optional) True to match any part of the string, not just the beginning
     * @param {Boolean} caseSensitive (optional) True for case sensitive comparison (defaults to False).
     * @return {MixedCollection} The new filtered collection
     */
    filter : function(property, value, anyMatch, caseSensitive){
        if(Ext.isEmpty(value, false)){
            return this.clone();
        }
        value = this.createValueMatcher(value, anyMatch, caseSensitive);
        return this.filterBy(function(o){
            return o && value.test(o[property]);
        });
    },

/**
     * Filter by a function. Returns a new collection that has been filtered.
     * The passed function will be called with each object in the collection.
     * If the function returns true, the value is included otherwise it is filtered.
     * @param {Function} fn The function to be called, it will receive the args o (the object), k (the key)
     * @param {Object} scope (optional) The scope (this reference) in which the function is executed. Defaults to this MixedCollection.
     * @return {MixedCollection} The new filtered collection
     */
    filterBy : function(fn, scope){
        var r = new Ext.util.MixedCollection();
        r.getKey = this.getKey;
        var k = this.keys, it = this.items;
        for(var i = 0, len = it.length; i < len; i++){
            if(fn.call(scope||this, it[i], k[i])){
                r.add(k[i], it[i]);
            }
        }
        return r;
    },

/**
     * Finds the index of the first matching object in this collection by a specific property/value.
     * @param {String} property The name of a property on your objects.
     * @param {String/RegExp} value A string that the property values
     * should start with or a RegExp to test against the property.
     * @param {Number} start (optional) The index to start searching at (defaults to 0).
     * @param {Boolean} anyMatch (optional) True to match any part of the string, not just the beginning.
     * @param {Boolean} caseSensitive (optional) True for case sensitive comparison.
     * @return {Number} The matched index or -1
     */
    findIndex : function(property, value, start, anyMatch, caseSensitive){
        if(Ext.isEmpty(value, false)){
            return -1;
        }
        value = this.createValueMatcher(value, anyMatch, caseSensitive);
        return this.findIndexBy(function(o){
            return o && value.test(o[property]);
        }, null, start);
    },

/**
     * Find the index of the first matching object in this collection by a function.
     * If the function returns true it is considered a match.
     * @param {Function} fn The function to be called, it will receive the args o (the object), k (the key).
     * @param {Object} scope (optional) The scope (this reference) in which the function is executed. Defaults to this MixedCollection.
     * @param {Number} start (optional) The index to start searching at (defaults to 0).
     * @return {Number} The matched index or -1
     */
    findIndexBy : function(fn, scope, start){
        var k = this.keys, it = this.items;
        for(var i = (start||0), len = it.length; i < len; i++){
            if(fn.call(scope||this, it[i], k[i])){
                return i;
            }
        }
        return -1;
    },

    /**
     * Returns a regular expression based on the given value and matching options. This is used internally for finding and filtering,
     * and by Ext.data.Store#filter
     * @private
     * @param {String} value The value to create the regex for. This is escaped using Ext.escapeRe
     * @param {Boolean} anyMatch True to allow any match - no regex start/end line anchors will be added. Defaults to false
     * @param {Boolean} caseSensitive True to make the regex case sensitive (adds 'i' switch to regex). Defaults to false.
     * @param {Boolean} exactMatch True to force exact match (^ and $ characters added to the regex). Defaults to false. Ignored if anyMatch is true.
     */
    createValueMatcher : function(value, anyMatch, caseSensitive, exactMatch) {
        if (!value.exec) { // not a regex
            var er = Ext.escapeRe;
            value = String(value);

            if (anyMatch === true) {
                value = er(value);
            } else {
                value = '^' + er(value);
                if (exactMatch === true) {
                    value += '$';
                }
            }
            value = new RegExp(value, caseSensitive ? '' : 'i');
         }
         return value;
    },

/**
     * Creates a shallow copy of this collection
     * @return {MixedCollection}
     */
    clone : function(){
        var r = new Ext.util.MixedCollection();
        var k = this.keys, it = this.items;
        for(var i = 0, len = it.length; i < len; i++){
            r.add(k[i], it[i]);
        }
        r.getKey = this.getKey;
        return r;
    }
});

/**
 * This method calls {@link #item item()}.
 * Returns the item associated with the passed key OR index. Key has priority
 * over index.  This is the equivalent of calling {@link #key} first, then if
 * nothing matched calling {@link #itemAt}.
 * @param {String/Number} key The key or index of the item.
 * @return {Object} If the item is found, returns the item.  If the item was
 * not found, returns undefined. If an item was found, but is a Class,
 * returns null.
 */
Ext.util.MixedCollection.prototype.get = Ext.util.MixedCollection.prototype.item;


The source code

/*!
 * licensing@extjs.com
 * http://www.extjs.com/license
 */

/**
 * @class Ext.form.NumberField
 * @extends Ext.form.TextField
 * Numeric text field that provides automatic keystroke filtering and numeric validation.
 * @constructor
 * Creates a new NumberField
 * @param {Object} config Configuration options
 * @xtype numberfield
 */
Ext.form.NumberField = Ext.extend(Ext.form.TextField,  {

/**
     * @cfg {RegExp} stripCharsRe @hide
     */

/**
     * @cfg {RegExp} maskRe @hide
     */

/**
     * @cfg {String} fieldClass The default CSS class for the field (defaults to "x-form-field x-form-num-field")
     */
    fieldClass: "x-form-field x-form-num-field",

/**
     * @cfg {Boolean} allowDecimals False to disallow decimal values (defaults to true)
     */
    allowDecimals : true,

/**
     * @cfg {String} decimalSeparator Character(s) to allow as the decimal separator (defaults to '.')
     */
    decimalSeparator : ".",

/**
     * @cfg {Number} decimalPrecision The maximum precision to display after the decimal separator (defaults to 2)
     */
    decimalPrecision : 2,

/**
     * @cfg {Boolean} allowNegative False to prevent entering a negative sign (defaults to true)
     */
    allowNegative : true,

/**
     * @cfg {Number} minValue The minimum allowed value (defaults to Number.NEGATIVE_INFINITY)
     */
    minValue : Number.NEGATIVE_INFINITY,

/**
     * @cfg {Number} maxValue The maximum allowed value (defaults to Number.MAX_VALUE)
     */
    maxValue : Number.MAX_VALUE,

/**
     * @cfg {String} minText Error text to display if the minimum value validation fails (defaults to "The minimum value for this field is {minValue}")
     */
    minText : "The minimum value for this field is {0}",

/**
     * @cfg {String} maxText Error text to display if the maximum value validation fails (defaults to "The maximum value for this field is {maxValue}")
     */
    maxText : "The maximum value for this field is {0}",

/**
     * @cfg {String} nanText Error text to display if the value is not a valid number.  For example, this can happen
     * if a valid character like '.' or '-' is left in the field with no number (defaults to "{value} is not a valid number")
     */
    nanText : "{0} is not a valid number",

/**
     * @cfg {String} baseChars The base set of characters to evaluate as valid numbers (defaults to '0123456789').
     */
    baseChars : "0123456789",

    // private
    initEvents : function(){
        var allowed = this.baseChars + '';
        if (this.allowDecimals) {
            allowed += this.decimalSeparator;
        }
        if (this.allowNegative) {
            allowed += '-';
        }
        this.maskRe = new RegExp('[' + Ext.escapeRe(allowed) + ']');
        Ext.form.NumberField.superclass.initEvents.call(this);
    },

/**
     * Runs all of NumberFields validations and returns an array of any errors. Note that this first
     * runs TextField's validations, so the returned array is an amalgamation of all field errors.
     * The additional validations run test that the value is a number, and that it is within the
     * configured min and max values.
     * @param {Mixed} value The value to get errors for (defaults to the current field value)
     * @return {Array} All validation errors for this field
     */
    getErrors: function(value) {
        var errors = Ext.form.NumberField.superclass.getErrors.apply(this, arguments);

        value = value || this.processValue(this.getRawValue());

        if (value.length < 1) { // if it's blank and textfield didn't flag it then it's valid
             return errors;
        }

        value = String(value).replace(this.decimalSeparator, ".");

        if(isNaN(value)){
            errors.push(String.format(this.nanText, value));
        }

        var num = this.parseValue(value);

        if(num < this.minValue){
            errors.push(String.format(this.minText, this.minValue));
        }

        if(num > this.maxValue){
            errors.push(String.format(this.maxText, this.maxValue));
        }

        return errors;
    },

    getValue : function(){
        return this.fixPrecision(this.parseValue(Ext.form.NumberField.superclass.getValue.call(this)));
    },

    setValue : function(v){
        v = Ext.isNumber(v) ? v : parseFloat(String(v).replace(this.decimalSeparator, "."));
        v = isNaN(v) ? '' : String(v).replace(".", this.decimalSeparator);
        return Ext.form.NumberField.superclass.setValue.call(this, v);
    },

/**
     * Replaces any existing {@link #minValue} with the new value.
     * @param {Number} value The minimum value
     */
    setMinValue : function(value){
        this.minValue = Ext.num(value, Number.NEGATIVE_INFINITY);
    },

/**
     * Replaces any existing {@link #maxValue} with the new value.
     * @param {Number} value The maximum value
     */
    setMaxValue : function(value){
        this.maxValue = Ext.num(value, Number.MAX_VALUE);
    },

    // private
    parseValue : function(value){
        value = parseFloat(String(value).replace(this.decimalSeparator, "."));
        return isNaN(value) ? '' : value;
    },

    // private
    fixPrecision : function(value){
        var nan = isNaN(value);
        if(!this.allowDecimals || this.decimalPrecision == -1 || nan || !value){
           return nan ? '' : value;
        }
        return parseFloat(parseFloat(value).toFixed(this.decimalPrecision));
    },

    beforeBlur : function(){
        var v = this.parseValue(this.getRawValue());
        if(!Ext.isEmpty(v)){
            this.setValue(this.fixPrecision(v));
        }
    }
});
Ext.reg('numberfield', Ext.form.NumberField);


The source code

/*!
 * licensing@extjs.com
 * http://www.extjs.com/license
 */
/**
 * @class Ext.util.Observable
 */
Ext.apply(Ext.util.Observable.prototype, function(){
    // this is considered experimental (along with beforeMethod, afterMethod, removeMethodListener?)
    // allows for easier interceptor and sequences, including cancelling and overwriting the return value of the call
    // private
    function getMethodEvent(method){
        var e = (this.methodEvents = this.methodEvents ||
        {})[method], returnValue, v, cancel, obj = this;

        if (!e) {
            this.methodEvents[method] = e = {};
            e.originalFn = this[method];
            e.methodName = method;
            e.before = [];
            e.after = [];

            var makeCall = function(fn, scope, args){
                if (!Ext.isEmpty(v = fn.apply(scope || obj, args))) {
                    if (Ext.isObject(v)) {
                        returnValue = !Ext.isEmpty(v.returnValue) ? v.returnValue : v;
                        cancel = !!v.cancel;
                    }
                    else
                        if (v === false) {
                            cancel = true;
                        }
                        else {
                            returnValue = v;
                        }
                }
            };

            this[method] = function(){
                var args = Ext.toArray(arguments);
                returnValue = v = undefined;
                cancel = false;

                Ext.each(e.before, function(b){
                    makeCall(b.fn, b.scope, args);
                    if (cancel) {
                        return returnValue;
                    }
                });

                if (!Ext.isEmpty(v = e.originalFn.apply(obj, args))) {
                    returnValue = v;
                }
                Ext.each(e.after, function(a){
                    makeCall(a.fn, a.scope, args);
                    if (cancel) {
                        return returnValue;
                    }
                });
                return returnValue;
            };
        }
        return e;
    }

    return {
        // these are considered experimental
        // allows for easier interceptor and sequences, including cancelling and overwriting the return value of the call
        // adds an 'interceptor' called before the original method
        beforeMethod : function(method, fn, scope){
            getMethodEvent.call(this, method).before.push({
                fn: fn,
                scope: scope
            });
        },

        // adds a 'sequence' called after the original method
        afterMethod : function(method, fn, scope){
            getMethodEvent.call(this, method).after.push({
                fn: fn,
                scope: scope
            });
        },

        removeMethodListener: function(method, fn, scope){
            var e = getMethodEvent.call(this, method), found = false;
            Ext.each(e.before, function(b, i, arr){
                if (b.fn == fn && b.scope == scope) {
                    arr.splice(i, 1);
                    found = true;
                    return false;
                }
            });
            if (!found) {
                Ext.each(e.after, function(a, i, arr){
                    if (a.fn == fn && a.scope == scope) {
                        arr.splice(i, 1);
                        return false;
                    }
                });
            }
        },

/**
         * Relays selected events from the specified Observable as if the events were fired by this.
         * @param {Object} o The Observable whose events this object is to relay.
         * @param {Array} events Array of event names to relay.
         */
        relayEvents : function(o, events){
            var me = this;
            function createHandler(ename){
                return function(){
                    return me.fireEvent.apply(me, [ename].concat(Ext.toArray(arguments)));
                };
            }
            Ext.each(events, function(ename){
                me.events[ename] = me.events[ename] || true;
                o.on(ename, createHandler(ename), me);
            });
        },

/**
         *
Enables events fired by this Observable to bubble up an owner hierarchy by calling
         * this.getBubbleTarget() if present. There is no implementation in the Observable base class.

         *
This is commonly used by Ext.Components to bubble events to owner Containers. See {@link Ext.Component.getBubbleTarget}. The default
         * implementation in Ext.Component returns the Component's immediate owner. But if a known target is required, this can be overridden to
         * access the required target more quickly.

         *
Example:

Ext.override(Ext.form.Field, {
    //  Add functionality to Field's initComponent to enable the change event to bubble
    initComponent : Ext.form.Field.prototype.initComponent.createSequence(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');
        }
    }
});

         * @param {String/Array} events The event name to bubble, or an Array of event names.
         */
        enableBubble : function(events){
            var me = this;
            if(!Ext.isEmpty(events)){
                events = Ext.isArray(events) ? events : Ext.toArray(arguments);
                Ext.each(events, function(ename){
                    ename = ename.toLowerCase();
                    var ce = me.events[ename] || true;
                    if (Ext.isBoolean(ce)) {
                        ce = new Ext.util.Event(me, ename);
                        me.events[ename] = ce;
                    }
                    ce.bubble = true;
                });
            }
        }
    };
}());

/**
 * Starts capture on the specified Observable. All events will be passed
 * to the supplied function with the event name + standard signature of the event
 * before the event is fired. If the supplied function returns false,
 * the event will not fire.
 * @param {Observable} o The Observable to capture events from.
 * @param {Function} fn The function to call when an event is fired.
 * @param {Object} scope (optional) The scope (this reference) in which the function is executed. Defaults to the Observable firing the event.
 * @static
 */
Ext.util.Observable.capture = function(o, fn, scope){
    o.fireEvent = o.fireEvent.createInterceptor(fn, scope);
};

/**
 * Sets observability on the passed class constructor.

 *
This makes any event fired on any instance of the passed class also fire a single event through
 * the class allowing for central handling of events on many instances at once.

 *
Usage:

Ext.util.Observable.observeClass(Ext.data.Connection);
Ext.data.Connection.on('beforerequest', function(con, options) {
    console.log('Ajax request made to ' + options.url);
});

 * @param {Function} c The class constructor to make observable.
 * @param {Object} listeners An object containing a series of listeners to add. See {@link #addListener}.
 * @static
 */
Ext.util.Observable.observeClass = function(c, listeners){
    if(c){
      if(!c.fireEvent){
          Ext.apply(c, new Ext.util.Observable());
          Ext.util.Observable.capture(c.prototype, c.fireEvent, c);
      }
      if(Ext.isObject(listeners)){
          c.on(listeners);
      }
      return c;
   }
};


The source code

/*!
 * licensing@extjs.com
 * http://www.extjs.com/license
 */
(function(){

var EXTUTIL = Ext.util,
    TOARRAY = Ext.toArray,
    EACH = Ext.each,
    ISOBJECT = Ext.isObject,
    TRUE = true,
    FALSE = false;

/**
 * @class Ext.util.Observable
 * Base class that provides a common interface for publishing events. Subclasses are expected to
 * to have a property "events" with all the events defined, and, optionally, a property "listeners"
 * with configured listeners defined.

 * For example:
 *

Employee = Ext.extend(Ext.util.Observable, {
    constructor: function(config){
        this.name = config.name;
        this.addEvents({
            "fired" : true,
            "quit" : true
        });

        // Copy configured listeners into *this* object so that the base class's
        // constructor will add them.
        this.listeners = config.listeners;

        // Call our superclass constructor to complete construction process.
        Employee.superclass.constructor.call(this, config)
    }
});

 * This could then be used like this:

var newEmployee = new Employee({
    name: employeeName,
    listeners: {
        quit: function() {
            // By default, "this" will be the object that fired the event.
            alert(this.name + " has quit!");
        }
    }
});

 */
EXTUTIL.Observable = function(){

/**
     * @cfg {Object} listeners (optional)
A config object containing one or more event handlers to be added to this
     * object during initialization.  This should be a valid listeners config object as specified in the
     * {@link #addListener} example for attaching multiple handlers at once.

     *
DOM events from ExtJs {@link Ext.Component Components}

     *
While some ExtJs Component classes export selected DOM events (e.g. "click", "mouseover" etc), this
     * is usually only done when extra value can be added. For example the {@link Ext.DataView DataView}'s
     * {@link Ext.DataView#click click} event passing the node clicked on. To access DOM
     * events directly from a Component's HTMLElement, listeners must be added to the {@link Ext.Component#getEl Element} after the Component
     * has been rendered. A plugin can simplify this step:

// Plugin is configured with a listeners config object.
// The Component is appended to the argument list of all handler functions.
Ext.DomObserver = Ext.extend(Object, {
    constructor: function(config) {
        this.listeners = config.listeners ? config.listeners : config;
    },

    // Component passes itself into plugin's init method
    init: function(c) {
        var p, l = this.listeners;
        for (p in l) {
            if (Ext.isFunction(l[p])) {
                l[p] = this.createHandler(l[p], c);
            } else {
                l[p].fn = this.createHandler(l[p].fn, c);
            }
        }

        // Add the listeners to the Element immediately following the render call
        c.render = c.render.{@link Function#createSequence createSequence}(function() {
            var e = c.getEl();
            if (e) {
                e.on(l);
            }
        });
    },

    createHandler: function(fn, c) {
        return function(e) {
            fn.call(this, e, c);
        };
    }
});

var combo = new Ext.form.ComboBox({

    // Collapse combo when its element is clicked on
    plugins: [ new Ext.DomObserver({
        click: function(evt, comp) {
            comp.collapse();
        }
    })],
    store: myStore,
    typeAhead: true,
    mode: 'local',
    triggerAction: 'all'
});
     *

     */
    var me = this, e = me.events;
    if(me.listeners){
        me.on(me.listeners);
        delete me.listeners;
    }
    me.events = e || {};
};

EXTUTIL.Observable.prototype = {
    // private
    filterOptRe : /^(?:scope|delay|buffer|single)$/,

/**
     *
Fires the specified event with the passed parameters (minus the event name).

     *
An event may be set to bubble up an Observable parent hierarchy (See {@link Ext.Component#getBubbleTarget})
     * by calling {@link #enableBubble}.

     * @param {String} eventName The name of the event to fire.
     * @param {Object...} args Variable number of parameters are passed to handlers.
     * @return {Boolean} returns false if any of the handlers return false otherwise it returns true.
     */
    fireEvent : function(){
        var a = TOARRAY(arguments),
            ename = a[0].toLowerCase(),
            me = this,
            ret = TRUE,
            ce = me.events[ename],
            q,
            c;
        if (me.eventsSuspended === TRUE) {
            if (q = me.eventQueue) {
                q.push(a);
            }
        }
        else if(ISOBJECT(ce) && ce.bubble){
            if(ce.fire.apply(ce, a.slice(1)) === FALSE) {
                return FALSE;
            }
            c = me.getBubbleTarget && me.getBubbleTarget();
            if(c && c.enableBubble) {
                if(!c.events[ename] || !Ext.isObject(c.events[ename]) || !c.events[ename].bubble) {
                    c.enableBubble(ename);
                }
                return c.fireEvent.apply(c, a);
            }
        }
        else {
            if (ISOBJECT(ce)) {
                a.shift();
                ret = ce.fire.apply(ce, a);
            }
        }
        return ret;
    },

/**
     * Appends an event handler to this object.
     * @param {String}   eventName The name of the event to listen for.
     * @param {Function} handler The method the event invokes.
     * @param {Object}   scope (optional) The scope (this reference) in which the handler function is executed.
     * If omitted, defaults to the object which fired the event.
     * @param {Object}   options (optional) An object containing handler configuration.
     * properties. This may contain any of the following properties:

     *
  • scope : Object
    The scope (this reference) in which the handler function is executed.
     * If omitted, defaults to the object which fired the event.
    •
     *
  • delay : Number
    The number of milliseconds to delay the invocation of the handler after the event fires.
    •
     *
  • single : Boolean
    True to add a handler to handle just the next firing of the event, and then remove itself.
    •
     *
  • buffer : Number
    Causes the handler to be scheduled to run in an {@link Ext.util.DelayedTask} delayed
     * by the specified number of milliseconds. If the event fires again within that time, the original
     * handler is not invoked, but the new handler is scheduled in its place.
    •
     *
  • target : Observable
    Only call the handler if the event was fired on the target Observable, not
     * if the event was bubbled up from a child Observable.
    •
     *

     *

     * Combining Options

     * Using the options argument, it is possible to combine different types of listeners:

     *

     * A delayed, one-time listener.
     *

myDataView.on('click', this.onClick, this, {
single: true,
delay: 100
});

     *

     * Attaching multiple handlers in 1 call

     * The method also allows for a single argument to be passed which is a config object containing properties
     * which specify multiple handlers.
     *

     *

myGridPanel.on({
'click' : {
    fn: this.onClick,
    scope: this,
    delay: 100
},
'mouseover' : {
    fn: this.onMouseOver,
    scope: this
},
'mouseout' : {
    fn: this.onMouseOut,
    scope: this
}
});

 *

 * Or a shorthand syntax:

 *

myGridPanel.on({
'click' : this.onClick,
'mouseover' : this.onMouseOver,
'mouseout' : this.onMouseOut,
 scope: this
});

     */
    addListener : function(eventName, fn, scope, o){
        var me = this,
            e,
            oe,
            isF,
        ce;
        if (ISOBJECT(eventName)) {
            o = eventName;
            for (e in o){
                oe = o[e];
                if (!me.filterOptRe.test(e)) {
                    me.addListener(e, oe.fn || oe, oe.scope || o.scope, oe.fn ? oe : o);
                }
            }
        } else {
            eventName = eventName.toLowerCase();
            ce = me.events[eventName] || TRUE;
            if (Ext.isBoolean(ce)) {
                me.events[eventName] = ce = new EXTUTIL.Event(me, eventName);
            }
            ce.addListener(fn, scope, ISOBJECT(o) ? o : {});
        }
    },

/**
     * Removes an event handler.
     * @param {String}   eventName The type of event the handler was associated with.
     * @param {Function} handler   The handler to remove. This must be a reference to the function passed into the {@link #addListener} call.
     * @param {Object}   scope     (optional) The scope originally specified for the handler.
     */
    removeListener : function(eventName, fn, scope){
        var ce = this.events[eventName.toLowerCase()];
        if (ISOBJECT(ce)) {
            ce.removeListener(fn, scope);
        }
    },

/**
     * Removes all listeners for this object
     */
    purgeListeners : function(){
        var events = this.events,
            evt,
            key;
        for(key in events){
            evt = events[key];
            if(ISOBJECT(evt)){
                evt.clearListeners();
            }
        }
    },

/**
     * Adds the specified events to the list of events which this Observable may fire.
     * @param {Object|String} o Either an object with event names as properties with a value of true
     * or the first event name string if multiple event names are being passed as separate parameters.
     * @param {string} Optional. Event name if multiple event names are being passed as separate parameters.
     * Usage:

this.addEvents('storeloaded', 'storecleared');

     */
    addEvents : function(o){
        var me = this;
        me.events = me.events || {};
        if (Ext.isString(o)) {
            var a = arguments,
                i = a.length;
            while(i--) {
                me.events[a[i]] = me.events[a[i]] || TRUE;
            }
        } else {
            Ext.applyIf(me.events, o);
        }
    },

/**
     * Checks to see if this object has any listeners for a specified event
     * @param {String} eventName The name of the event to check for
     * @return {Boolean} True if the event is being listened for, else false
     */
    hasListener : function(eventName){
        var e = this.events[eventName.toLowerCase()];
        return ISOBJECT(e) && e.listeners.length > 0;
    },

/**
     * Suspend the firing of all events. (see {@link #resumeEvents})
     * @param {Boolean} queueSuspended Pass as true to queue up suspended events to be fired
     * after the {@link #resumeEvents} call instead of discarding all suspended events;
     */
    suspendEvents : function(queueSuspended){
        this.eventsSuspended = TRUE;
        if(queueSuspended && !this.eventQueue){
            this.eventQueue = [];
        }
    },

/**
     * Resume firing events. (see {@link #suspendEvents})
     * If events were suspended using the queueSuspended parameter, then all
     * events fired during event suspension will be sent to any listeners now.
     */
    resumeEvents : function(){
        var me = this,
            queued = me.eventQueue || [];
        me.eventsSuspended = FALSE;
        delete me.eventQueue;
        EACH(queued, function(e) {
            me.fireEvent.apply(me, e);
        });
    }
};

var OBSERVABLE = EXTUTIL.Observable.prototype;

/**
 * Appends an event handler to this object (shorthand for {@link #addListener}.)
 * @param {String}   eventName     The type of event to listen for
 * @param {Function} handler       The method the event invokes
 * @param {Object}   scope         (optional) The scope (this reference) in which the handler function is executed.
 * If omitted, defaults to the object which fired the event.
 * @param {Object}   options       (optional) An object containing handler configuration.
 * @method
 */
OBSERVABLE.on = OBSERVABLE.addListener;

/**
 * Removes an event handler (shorthand for {@link #removeListener}.)
 * @param {String}   eventName     The type of event the handler was associated with.
 * @param {Function} handler       The handler to remove. This must be a reference to the function passed into the {@link #addListener} call.
 * @param {Object}   scope         (optional) The scope originally specified for the handler.
 * @method
 */
OBSERVABLE.un = OBSERVABLE.removeListener;

/**
 * Removes all added captures from the Observable.
 * @param {Observable} o The Observable to release
 * @static
 */
EXTUTIL.Observable.releaseCapture = function(o){
    o.fireEvent = OBSERVABLE.fireEvent;
};

function createTargeted(h, o, scope){
    return function(){
        if(o.target == arguments[0]){
            h.apply(scope, TOARRAY(arguments));
        }
    };
};

function createBuffered(h, o, l, scope){
    l.task = new EXTUTIL.DelayedTask();
    return function(){
        l.task.delay(o.buffer, h, scope, TOARRAY(arguments));
    };
};

function createSingle(h, e, fn, scope){
    return function(){
        e.removeListener(fn, scope);
        return h.apply(scope, arguments);
    };
};

function createDelayed(h, o, l, scope){
    return function(){
        var task = new EXTUTIL.DelayedTask();
        if(!l.tasks) {
            l.tasks = [];
        }
        l.tasks.push(task);
        task.delay(o.delay || 10, h, scope, TOARRAY(arguments));
    };
};

EXTUTIL.Event = function(obj, name){
    this.name = name;
    this.obj = obj;
    this.listeners = [];
};

EXTUTIL.Event.prototype = {
    addListener : function(fn, scope, options){
        var me = this,
            l;
        scope = scope || me.obj;
        if(!me.isListening(fn, scope)){
            l = me.createListener(fn, scope, options);
            if(me.firing){ // if we are currently firing this event, don't disturb the listener loop
                me.listeners = me.listeners.slice(0);
            }
            me.listeners.push(l);
        }
    },

    createListener: function(fn, scope, o){
        o = o || {}, scope = scope || this.obj;
        var l = {
            fn: fn,
            scope: scope,
            options: o
        }, h = fn;
        if(o.target){
            h = createTargeted(h, o, scope);
        }
        if(o.delay){
            h = createDelayed(h, o, l, scope);
        }
        if(o.single){
            h = createSingle(h, this, fn, scope);
        }
        if(o.buffer){
            h = createBuffered(h, o, l, scope);
        }
        l.fireFn = h;
        return l;
    },

    findListener : function(fn, scope){
        var list = this.listeners,
            i = list.length,
            l;

        scope = scope || this.obj;
        while(i--){
            l = list[i];
            if(l){
                if(l.fn == fn && l.scope == scope){
                    return i;
                }
            }
        }
        return -1;
    },

    isListening : function(fn, scope){
        return this.findListener(fn, scope) != -1;
    },

    removeListener : function(fn, scope){
        var index,
            l,
            k,
            me = this,
            ret = FALSE;
        if((index = me.findListener(fn, scope)) != -1){
            if (me.firing) {
                me.listeners = me.listeners.slice(0);
            }
            l = me.listeners[index];
            if(l.task) {
                l.task.cancel();
                delete l.task;
            }
            k = l.tasks && l.tasks.length;
            if(k) {
                while(k--) {
                    l.tasks[k].cancel();
                }
                delete l.tasks;
            }
            me.listeners.splice(index, 1);
            ret = TRUE;
        }
        return ret;
    },

    // Iterate to stop any buffered/delayed events
    clearListeners : function(){
        var me = this,
            l = me.listeners,
            i = l.length;
        while(i--) {
            me.removeListener(l[i].fn, l[i].scope);
        }
    },

    fire : function(){
        var me = this,
            args = TOARRAY(arguments),
            listeners = me.listeners,
            len = listeners.length,
            i = 0,
            l;

        if(len > 0){
            me.firing = TRUE;
            for (; i < len; i++) {
                l = listeners[i];
                if(l && l.fireFn.apply(l.scope || me.obj || window, args) === FALSE) {
                    return (me.firing = FALSE);
                }
            }
        }
        me.firing = FALSE;
        return TRUE;
    }
};
})();


The source code

/*!
 * licensing@extjs.com
 * http://www.extjs.com/license
 */

/**
 * @class Ext.PagingToolbar
 * @extends Ext.Toolbar
 *
As the amount of records increases, the time required for the browser to render
 * them increases. Paging is used to reduce the amount of data exchanged with the client.
 * Note: if there are more records/rows than can be viewed in the available screen area, vertical
 * scrollbars will be added.

 *
Paging is typically handled on the server side (see exception below). The client sends
 * parameters to the server side, which the server needs to interpret and then respond with the
 * approprate data.

 *
Ext.PagingToolbar is a specialized toolbar that is bound to a {@link Ext.data.Store}
 * and provides automatic paging control. This Component {@link Ext.data.Store#load load}s blocks
 * of data into the {@link #store} by passing {@link Ext.data.Store#paramNames paramNames} used for
 * paging criteria.

 *
PagingToolbar is typically used as one of the Grid's toolbars:

 *

Ext.QuickTips.init(); // to display button quicktips

var myStore = new Ext.data.Store({
    reader: new Ext.data.JsonReader({
        {@link Ext.data.JsonReader#totalProperty totalProperty}: 'results',
        ...
    }),
    ...
});

var myPageSize = 25;  // server script should only send back 25 items at a time

var grid = new Ext.grid.GridPanel({
    ...
    store: myStore,
    bbar: new Ext.PagingToolbar({
        {@link #store}: myStore,       // grid and PagingToolbar using same store
        {@link #displayInfo}: true,
        {@link #pageSize}: myPageSize,
        {@link #prependButtons}: true,
        items: [
            'text 1'
        ]
    })
});
 *

 *
 *
To use paging, pass the paging requirements to the server when the store is first loaded.

 *

store.load({
    params: {
        // specify params for the first page load if using paging
        start: 0,
        limit: myPageSize,
        // other params
        foo:   'bar'
    }
});
 *

 *
 *
If using {@link Ext.data.Store#autoLoad store's autoLoad} configuration:

 *

var myStore = new Ext.data.Store({
    {@link Ext.data.Store#autoLoad autoLoad}: {params:{start: 0, limit: 25}},
    ...
});
 *

 *
 *
The packet sent back from the server would have this form:

 *

{
    "success": true,
    "results": 2000,
    "rows": [ // *Note: this must be an Array
        { "id":  1, "name": "Bill", "occupation": "Gardener" },
        { "id":  2, "name":  "Ben", "occupation": "Horticulturalist" },
        ...
        { "id": 25, "name":  "Sue", "occupation": "Botanist" }
    ]
}
 *

 *
Paging with Local Data

 *
Paging can also be accomplished with local data using extensions:

 *

 *
  • Ext.ux.data.PagingStore
    •
 *
  • Paging Memory Proxy (examples/ux/PagingMemoryProxy.js)
    •
 *

 * @constructor Create a new PagingToolbar
 * @param {Object} config The config object
 * @xtype paging
 */
(function() {

var T = Ext.Toolbar;

Ext.PagingToolbar = Ext.extend(Ext.Toolbar, {

/**
     * @cfg {Ext.data.Store} store
     * The {@link Ext.data.Store} the paging toolbar should use as its data source (required).
     */

/**
     * @cfg {Boolean} displayInfo
     * true to display the displayMsg (defaults to false)
     */

/**
     * @cfg {Number} pageSize
     * The number of records to display per page (defaults to 20)
     */
    pageSize : 20,

/**
     * @cfg {Boolean} prependButtons
     * true to insert any configured items before the paging buttons.
     * Defaults to false.
     */

/**
     * @cfg {String} displayMsg
     * The paging status message to display (defaults to 'Displaying {0} - {1} of {2}').
     * Note that this string is formatted using the braced numbers {0}-{2} as tokens
     * that are replaced by the values for start, end and total respectively. These tokens should
     * be preserved when overriding this string if showing those values is desired.
     */
    displayMsg : 'Displaying {0} - {1} of {2}',

/**
     * @cfg {String} emptyMsg
     * The message to display when no records are found (defaults to 'No data to display')
     */
    emptyMsg : 'No data to display',

/**
     * @cfg {String} beforePageText
     * The text displayed before the input item (defaults to 'Page').
     */
    beforePageText : 'Page',

/**
     * @cfg {String} afterPageText
     * Customizable piece of the default paging text (defaults to 'of {0}'). Note that
     * this string is formatted using {0} as a token that is replaced by the number of
     * total pages. This token should be preserved when overriding this string if showing the
     * total page count is desired.
     */
    afterPageText : 'of {0}',

/**
     * @cfg {String} firstText
     * The quicktip text displayed for the first page button (defaults to 'First Page').
     * Note: quick tips must be initialized for the quicktip to show.
     */
    firstText : 'First Page',

/**
     * @cfg {String} prevText
     * The quicktip text displayed for the previous page button (defaults to 'Previous Page').
     * Note: quick tips must be initialized for the quicktip to show.
     */
    prevText : 'Previous Page',

/**
     * @cfg {String} nextText
     * The quicktip text displayed for the next page button (defaults to 'Next Page').
     * Note: quick tips must be initialized for the quicktip to show.
     */
    nextText : 'Next Page',

/**
     * @cfg {String} lastText
     * The quicktip text displayed for the last page button (defaults to 'Last Page').
     * Note: quick tips must be initialized for the quicktip to show.
     */
    lastText : 'Last Page',

/**
     * @cfg {String} refreshText
     * The quicktip text displayed for the Refresh button (defaults to 'Refresh').
     * Note: quick tips must be initialized for the quicktip to show.
     */
    refreshText : 'Refresh',

/**
     *
Deprecated. paramNames should be set in the data store
     * (see {@link Ext.data.Store#paramNames}).

     *
Object mapping of parameter names used for load calls, initially set to:

     *
{start: 'start', limit: 'limit'}

     * @type Object
     * @property paramNames
     * @deprecated
     */

/**
     * The number of records to display per page.  See also {@link #cursor}.
     * @type Number
     * @property pageSize
     */

/**
     * Indicator for the record position.  This property might be used to get the active page
     * number for example:

     * // t is reference to the paging toolbar instance
     * var activePage = Math.ceil((t.cursor + t.pageSize) / t.pageSize);
     *

     * @type Number
     * @property cursor
     */

    initComponent : function(){
        var pagingItems = [this.first = new T.Button({
            tooltip: this.firstText,
            overflowText: this.firstText,
            iconCls: 'x-tbar-page-first',
            disabled: true,
            handler: this.moveFirst,
            scope: this
        }), this.prev = new T.Button({
            tooltip: this.prevText,
            overflowText: this.prevText,
            iconCls: 'x-tbar-page-prev',
            disabled: true,
            handler: this.movePrevious,
            scope: this
        }), '-', this.beforePageText,
        this.inputItem = new Ext.form.NumberField({
            cls: 'x-tbar-page-number',
            allowDecimals: false,
            allowNegative: false,
            enableKeyEvents: true,
            selectOnFocus: true,
            submitValue: false,
            listeners: {
                scope: this,
                keydown: this.onPagingKeyDown,
                blur: this.onPagingBlur
            }
        }), this.afterTextItem = new T.TextItem({
            text: String.format(this.afterPageText, 1)
        }), '-', this.next = new T.Button({
            tooltip: this.nextText,
            overflowText: this.nextText,
            iconCls: 'x-tbar-page-next',
            disabled: true,
            handler: this.moveNext,
            scope: this
        }), this.last = new T.Button({
            tooltip: this.lastText,
            overflowText: this.lastText,
            iconCls: 'x-tbar-page-last',
            disabled: true,
            handler: this.moveLast,
            scope: this
        }), '-', this.refresh = new T.Button({
            tooltip: this.refreshText,
            overflowText: this.refreshText,
            iconCls: 'x-tbar-loading',
            handler: this.doRefresh,
            scope: this
        })];

        var userItems = this.items || this.buttons || [];
        if (this.prependButtons) {
            this.items = userItems.concat(pagingItems);
        }else{
            this.items = pagingItems.concat(userItems);
        }
        delete this.buttons;
        if(this.displayInfo){
            this.items.push('->');
            this.items.push(this.displayItem = new T.TextItem({}));
        }
        Ext.PagingToolbar.superclass.initComponent.call(this);
        this.addEvents(

/**
             * @event change
             * Fires after the active page has been changed.
             * @param {Ext.PagingToolbar} this
             * @param {Object} pageData An object that has these properties:

             *
  • total : Number
    The total number of records in the dataset as
             * returned by the server
    •
             *
  • activePage : Number
    The current page number
    •
             *
  • pages : Number
    The total number of pages (calculated from
             * the total number of records in the dataset as returned by the server and the current {@link #pageSize})
    •
             *

             */
            'change',

/**
             * @event beforechange
             * Fires just before the active page is changed.
             * Return false to prevent the active page from being changed.
             * @param {Ext.PagingToolbar} this
             * @param {Object} params An object hash of the parameters which the PagingToolbar will send when
             * loading the required page. This will contain:

             *
  • start : Number
    The starting row number for the next page of records to
             * be retrieved from the server
    •
             *
  • limit : Number
    The number of records to be retrieved from the server
    •
             *

             *
(note: the names of the start and limit properties are determined
             * by the store's {@link Ext.data.Store#paramNames paramNames} property.)

             *
Parameters may be added as required in the event handler.

             */
            'beforechange'
        );
        this.on('afterlayout', this.onFirstLayout, this, {single: true});
        this.cursor = 0;
        this.bindStore(this.store, true);
    },

    // private
    onFirstLayout : function(){
        if(this.dsLoaded){
            this.onLoad.apply(this, this.dsLoaded);
        }
    },

    // private
    updateInfo : function(){
        if(this.displayItem){
            var count = this.store.getCount();
            var msg = count == 0 ?
                this.emptyMsg :
                String.format(
                    this.displayMsg,
                    this.cursor+1, this.cursor+count, this.store.getTotalCount()
                );
            this.displayItem.setText(msg);
        }
    },

    // private
    onLoad : function(store, r, o){
        if(!this.rendered){
            this.dsLoaded = [store, r, o];
            return;
        }
        var p = this.getParams();
        this.cursor = (o.params && o.params[p.start]) ? o.params[p.start] : 0;
        var d = this.getPageData(), ap = d.activePage, ps = d.pages;

        this.afterTextItem.setText(String.format(this.afterPageText, d.pages));
        this.inputItem.setValue(ap);
        this.first.setDisabled(ap == 1);
        this.prev.setDisabled(ap == 1);
        this.next.setDisabled(ap == ps);
        this.last.setDisabled(ap == ps);
        this.refresh.enable();
        this.updateInfo();
        this.fireEvent('change', this, d);
    },

    // private
    getPageData : function(){
        var total = this.store.getTotalCount();
        return {
            total : total,
            activePage : Math.ceil((this.cursor+this.pageSize)/this.pageSize),
            pages :  total < this.pageSize ? 1 : Math.ceil(total/this.pageSize)
        };
    },

/**
     * Change the active page
     * @param {Integer} page The page to display
     */
    changePage : function(page){
        this.doLoad(((page-1) * this.pageSize).constrain(0, this.store.getTotalCount()));
    },

    // private
    onLoadError : function(){
        if(!this.rendered){
            return;
        }
        this.refresh.enable();
    },

    // private
    readPage : function(d){
        var v = this.inputItem.getValue(), pageNum;
        if (!v || isNaN(pageNum = parseInt(v, 10))) {
            this.inputItem.setValue(d.activePage);
            return false;
        }
        return pageNum;
    },

    onPagingFocus : function(){
        this.inputItem.select();
    },

    //private
    onPagingBlur : function(e){
        this.inputItem.setValue(this.getPageData().activePage);
    },

    // private
    onPagingKeyDown : function(field, e){
        var k = e.getKey(), d = this.getPageData(), pageNum;
        if (k == e.RETURN) {
            e.stopEvent();
            pageNum = this.readPage(d);
            if(pageNum !== false){
                pageNum = Math.min(Math.max(1, pageNum), d.pages) - 1;
                this.doLoad(pageNum * this.pageSize);
            }
        }else if (k == e.HOME || k == e.END){
            e.stopEvent();
            pageNum = k == e.HOME ? 1 : d.pages;
            field.setValue(pageNum);
        }else if (k == e.UP || k == e.PAGEUP || k == e.DOWN || k == e.PAGEDOWN){
            e.stopEvent();
            if((pageNum = this.readPage(d))){
                var increment = e.shiftKey ? 10 : 1;
                if(k == e.DOWN || k == e.PAGEDOWN){
                    increment *= -1;
                }
                pageNum += increment;
                if(pageNum >= 1 & pageNum <= d.pages){
                    field.setValue(pageNum);
                }
            }
        }
    },

    // private
    getParams : function(){
        //retain backwards compat, allow params on the toolbar itself, if they exist.
        return this.paramNames || this.store.paramNames;
    },

    // private
    beforeLoad : function(){
        if(this.rendered && this.refresh){
            this.refresh.disable();
        }
    },

    // private
    doLoad : function(start){
        var o = {}, pn = this.getParams();
        o[pn.start] = start;
        o[pn.limit] = this.pageSize;
        if(this.fireEvent('beforechange', this, o) !== false){
            this.store.load({params:o});
        }
    },

/**
     * Move to the first page, has the same effect as clicking the 'first' button.
     */
    moveFirst : function(){
        this.doLoad(0);
    },

/**
     * Move to the previous page, has the same effect as clicking the 'previous' button.
     */
    movePrevious : function(){
        this.doLoad(Math.max(0, this.cursor-this.pageSize));
    },

/**
     * Move to the next page, has the same effect as clicking the 'next' button.
     */
    moveNext : function(){
        this.doLoad(this.cursor+this.pageSize);
    },

/**
     * Move to the last page, has the same effect as clicking the 'last' button.
     */
    moveLast : function(){
        var total = this.store.getTotalCount(),
            extra = total % this.pageSize;

        this.doLoad(extra ? (total - extra) : total - this.pageSize);
    },

/**
     * Refresh the current page, has the same effect as clicking the 'refresh' button.
     */
    doRefresh : function(){
        this.doLoad(this.cursor);
    },

/**
     * Binds the paging toolbar to the specified {@link Ext.data.Store}
     * @param {Store} store The store to bind to this toolbar
     * @param {Boolean} initial (Optional) true to not remove listeners
     */
    bindStore : function(store, initial){
        var doLoad;
        if(!initial && this.store){
            if(store !== this.store && this.store.autoDestroy){
                this.store.destroy();
            }else{
                this.store.un('beforeload', this.beforeLoad, this);
                this.store.un('load', this.onLoad, this);
                this.store.un('exception', this.onLoadError, this);
            }
            if(!store){
                this.store = null;
            }
        }
        if(store){
            store = Ext.StoreMgr.lookup(store);
            store.on({
                scope: this,
                beforeload: this.beforeLoad,
                load: this.onLoad,
                exception: this.onLoadError
            });
            doLoad = true;
        }
        this.store = store;
        if(doLoad){
            this.onLoad(store, null, {});
        }
    },

/**
     * Unbinds the paging toolbar from the specified {@link Ext.data.Store} (deprecated)
     * @param {Ext.data.Store} store The data store to unbind
     */
    unbind : function(store){
        this.bindStore(null);
    },

/**
     * Binds the paging toolbar to the specified {@link Ext.data.Store} (deprecated)
     * @param {Ext.data.Store} store The data store to bind
     */
    bind : function(store){
        this.bindStore(store);
    },

    // private
    onDestroy : function(){
        this.bindStore(null);
        Ext.PagingToolbar.superclass.onDestroy.call(this);
    }
});

})();
Ext.reg('paging', Ext.PagingToolbar);


The source code

/*!
 * licensing@extjs.com
 * http://www.extjs.com/license
 */

/**
 * @class Ext.Panel
 * @extends Ext.Container
 *
Panel is a container that has specific functionality and structural components that make
 * it the perfect building block for application-oriented user interfaces.

 *
Panels are, by virtue of their inheritance from {@link Ext.Container}, capable
 * of being configured with a {@link Ext.Container#layout layout}, and containing child Components.

 *
When either specifying child {@link Ext.Component#items items} of a Panel, or dynamically {@link Ext.Container#add adding} Components
 * to a Panel, remember to consider how you wish the Panel to arrange those child elements, and whether
 * those child elements need to be sized using one of Ext's built-in {@link Ext.Container#layout layout} schemes. By
 * default, Panels use the {@link Ext.layout.ContainerLayout ContainerLayout} scheme. This simply renders
 * child components, appending them one after the other inside the Container, and does not apply any sizing
 * at all.

 *
A Panel may also contain {@link #bbar bottom} and {@link #tbar top} toolbars, along with separate
 * {@link #header}, {@link #footer} and {@link #body} sections (see {@link #frame} for additional
 * information).

 *
Panel also provides built-in {@link #collapsible expandable and collapsible behavior}, along with
 * a variety of {@link #tools prebuilt tool buttons} that can be wired up to provide other customized
 * behavior.  Panels can be easily dropped into any {@link Ext.Container Container} or layout, and the
 * layout and rendering pipeline is {@link Ext.Container#add completely managed by the framework}.

 * @constructor
 * @param {Object} config The config object
 * @xtype panel
 */
Ext.Panel = Ext.extend(Ext.Container, {

/**
     * The Panel's header {@link Ext.Element Element}. Read-only.
     *
This Element is used to house the {@link #title} and {@link #tools}

     *
Note: see the Note for {@link Ext.Component#el el} also.

     * @type Ext.Element
     * @property header
     */

/**
     * The Panel's body {@link Ext.Element Element} which may be used to contain HTML content.
     * The content may be specified in the {@link #html} config, or it may be loaded using the
     * {@link autoLoad} config, or through the Panel's {@link #getUpdater Updater}. Read-only.
     *
If this is used to load visible HTML elements in either way, then
     * the Panel may not be used as a Layout for hosting nested Panels.

     *
If this Panel is intended to be used as the host of a Layout (See {@link #layout}
     * then the body Element must not be loaded or changed - it is under the control
     * of the Panel's Layout.
     *
Note: see the Note for {@link Ext.Component#el el} also.

     * @type Ext.Element
     * @property body
     */

/**
     * The Panel's bwrap {@link Ext.Element Element} used to contain other Panel elements
     * (tbar, body, bbar, footer). See {@link #bodyCfg}. Read-only.
     * @type Ext.Element
     * @property bwrap
     */

/**
     * True if this panel is collapsed. Read-only.
     * @type Boolean
     * @property collapsed
     */

/**
     * @cfg {Object} bodyCfg
     *
A {@link Ext.DomHelper DomHelper} element specification object may be specified for any
     * Panel Element.

     *
By default, the Default element in the table below will be used for the html markup to
     * create a child element with the commensurate Default class name (baseCls will be
     * replaced by {@link #baseCls}):

     *
     * Panel      Default  Default             Custom      Additional       Additional
     * Element    element  class               element     class            style
     * ========   ==========================   =========   ==============   ===========
     * {@link #header}     div      {@link #baseCls}+'-header'   {@link #headerCfg}   headerCssClass   headerStyle
     * {@link #bwrap}      div      {@link #baseCls}+'-bwrap'     {@link #bwrapCfg}    bwrapCssClass    bwrapStyle
     * + tbar     div      {@link #baseCls}+'-tbar'       {@link #tbarCfg}     tbarCssClass     tbarStyle
     * + {@link #body}     div      {@link #baseCls}+'-body'       {@link #bodyCfg}     {@link #bodyCssClass}     {@link #bodyStyle}
     * + bbar     div      {@link #baseCls}+'-bbar'       {@link #bbarCfg}     bbarCssClass     bbarStyle
     * + {@link #footer}   div      {@link #baseCls}+'-footer'   {@link #footerCfg}   footerCssClass   footerStyle
     *

     *
Configuring a Custom element may be used, for example, to force the {@link #body} Element
     * to use a different form of markup than is created by default. An example of this might be
     * to {@link Ext.Element#createChild create a child} Panel containing a custom content, such as
     * a header, or forcing centering of all Panel content by having the body be a <center>
     * element:

     *

new Ext.Panel({
    title: 'Message Title',
    renderTo: Ext.getBody(),
    width: 200, height: 130,
    bodyCfg: {
        tag: 'center',
        cls: 'x-panel-body',  // Default class not applied if Custom element specified
        html: 'Message'
    },
    footerCfg: {
        tag: 'h2',
        cls: 'x-panel-footer'        // same as the Default class
        html: 'footer html'
    },
    footerCssClass: 'custom-footer', // additional css class, see {@link Ext.element#addClass addClass}
    footerStyle:    'background-color:red' // see {@link #bodyStyle}
});
     *

     *
The example above also explicitly creates a {@link #footer} with custom markup and
     * styling applied.

     */

/**
     * @cfg {Object} headerCfg
     *
A {@link Ext.DomHelper DomHelper} element specification object specifying the element structure
     * of this Panel's {@link #header} Element.  See {@link #bodyCfg} also.

     */

/**
     * @cfg {Object} bwrapCfg
     *
A {@link Ext.DomHelper DomHelper} element specification object specifying the element structure
     * of this Panel's {@link #bwrap} Element.  See {@link #bodyCfg} also.

     */

/**
     * @cfg {Object} tbarCfg
     *
A {@link Ext.DomHelper DomHelper} element specification object specifying the element structure
     * of this Panel's {@link #tbar} Element.  See {@link #bodyCfg} also.

     */

/**
     * @cfg {Object} bbarCfg
     *
A {@link Ext.DomHelper DomHelper} element specification object specifying the element structure
     * of this Panel's {@link #bbar} Element.  See {@link #bodyCfg} also.

     */

/**
     * @cfg {Object} footerCfg
     *
A {@link Ext.DomHelper DomHelper} element specification object specifying the element structure
     * of this Panel's {@link #footer} Element.  See {@link #bodyCfg} also.

     */

/**
     * @cfg {Boolean} closable
     * Panels themselves do not directly support being closed, but some Panel subclasses do (like
     * {@link Ext.Window}) or a Panel Class within an {@link Ext.TabPanel}.  Specify true
     * to enable closing in such situations. Defaults to false.
     */

/**
     * The Panel's footer {@link Ext.Element Element}. Read-only.
     *
This Element is used to house the Panel's {@link #buttons} or {@link #fbar}.

     *
Note: see the Note for {@link Ext.Component#el el} also.

     * @type Ext.Element
     * @property footer
     */

/**
     * @cfg {Mixed} applyTo
     *
The id of the node, a DOM node or an existing Element corresponding to a DIV that is already present in
     * the document that specifies some panel-specific structural markup.  When applyTo is used,
     * constituent parts of the panel can be specified by CSS class name within the main element, and the panel
     * will automatically create those components from that markup. Any required components not specified in the
     * markup will be autogenerated if necessary.

     *
The following class names are supported (baseCls will be replaced by {@link #baseCls}):

     *
  • baseCls + '-header'
    •
     *
  • baseCls + '-header-text'
    •
     *
  • baseCls + '-bwrap'
    •
     *
  • baseCls + '-tbar'
    •
     *
  • baseCls + '-body'
    •
     *
  • baseCls + '-bbar'
    •
     *
  • baseCls + '-footer'

     *
Using this config, a call to render() is not required.  If applyTo is specified, any value passed for
     * {@link #renderTo} will be ignored and the target element's parent node will automatically be used as the
     * panel's container.

     */

/**
     * @cfg {Object/Array} tbar
     *
The top toolbar of the panel. This can be a {@link Ext.Toolbar} object, a toolbar config, or an array of
     * buttons/button configs to be added to the toolbar.  Note that this is not available as a property after render.
     * To access the top toolbar after render, use {@link #getTopToolbar}.

     *
Note: Although a Toolbar may contain Field components, these will not be updated by a load
     * of an ancestor FormPanel. A Panel's toolbars are not part of the standard Container->Component hierarchy, and
     * so are not scanned to collect form items. However, the values will be submitted because form
     * submission parameters are collected from the DOM tree.

     */

/**
     * @cfg {Object/Array} bbar
     *
The bottom toolbar of the panel. This can be a {@link Ext.Toolbar} object, a toolbar config, or an array of
     * buttons/button configs to be added to the toolbar.  Note that this is not available as a property after render.
     * To access the bottom toolbar after render, use {@link #getBottomToolbar}.

     *
Note: Although a Toolbar may contain Field components, these will not be updated by a load
     * of an ancestor FormPanel. A Panel's toolbars are not part of the standard Container->Component hierarchy, and
     * so are not scanned to collect form items. However, the values will be submitted because form
     * submission parameters are collected from the DOM tree.

     */

/** @cfg {Object/Array} fbar
     *
A {@link Ext.Toolbar Toolbar} object, a Toolbar config, or an array of
     * {@link Ext.Button Button}s/{@link Ext.Button Button} configs, describing a {@link Ext.Toolbar Toolbar} to be rendered into this Panel's footer element.

     *
After render, the fbar property will be an {@link Ext.Toolbar Toolbar} instance.

     *
If {@link #buttons} are specified, they will supersede the fbar configuration property.

     * The Panel's {@link #buttonAlign} configuration affects the layout of these items, for example:
     *

var w = new Ext.Window({
    height: 250,
    width: 500,
    bbar: new Ext.Toolbar({
        items: [{
            text: 'bbar Left'
        },'->',{
            text: 'bbar Right'
        }]
    }),
    {@link #buttonAlign}: 'left', // anything but 'center' or 'right' and you can use '-', and '->'
                                  // to control the alignment of fbar items
    fbar: [{
        text: 'fbar Left'
    },'->',{
        text: 'fbar Right'
    }]
}).show();
     *

     *
Note: Although a Toolbar may contain Field components, these will not be updated by a load
     * of an ancestor FormPanel. A Panel's toolbars are not part of the standard Container->Component hierarchy, and
     * so are not scanned to collect form items. However, the values will be submitted because form
     * submission parameters are collected from the DOM tree.

     */

/**
     * @cfg {Boolean} header
     * true to create the Panel's header element explicitly, false to skip creating
     * it.  If a {@link #title} is set the header will be created automatically, otherwise it will not.
     * If a {@link #title} is set but header is explicitly set to false, the header
     * will not be rendered.
     */

/**
     * @cfg {Boolean} footer
     * true to create the footer element explicitly, false to skip creating it. The footer
     * will be created automatically if {@link #buttons} or a {@link #fbar} have
     * been configured.  See {@link #bodyCfg} for an example.
     */

/**
     * @cfg {String} title
     * The title text to be used as innerHTML (html tags are accepted) to display in the panel
     * {@link #header} (defaults to ''). When a title is specified the
     * {@link #header} element will automatically be created and displayed unless
     * {@link #header} is explicitly set to false.  If you do not want to specify a
     * title at config time, but you may want one later, you must either specify a non-empty
     * title (a blank space ' ' will do) or header:true so that the container
     * element will get created.
     */

/**
     * @cfg {Array} buttons
     * buttons will be used as {@link Ext.Container#items items} for the toolbar in
     * the footer ({@link #fbar}). Typically the value of this configuration property will be
     * an array of {@link Ext.Button}s or {@link Ext.Button} configuration objects.
     * If an item is configured with minWidth or the Panel is configured with minButtonWidth,
     * that width will be applied to the item.
     */

/**
     * @cfg {Object/String/Function} autoLoad
     * A valid url spec according to the Updater {@link Ext.Updater#update} method.
     * If autoLoad is not null, the panel will attempt to load its contents
     * immediately upon render.

     * The URL will become the default URL for this panel's {@link #body} element,
     * so it may be {@link Ext.Element#refresh refresh}ed at any time.

     */

/**
     * @cfg {Boolean} frame
     * false by default to render with plain 1px square borders. true to render with
     * 9 elements, complete with custom rounded corners (also see {@link Ext.Element#boxWrap}).
     *
The template generated for each condition is depicted below:

     *
// frame = false
<div id="developer-specified-id-goes-here" class="x-panel">

    <div class="x-panel-header"><span class="x-panel-header-text">Title: (frame:false)</span></div>

    <div class="x-panel-bwrap">
        <div class="x-panel-body"><p>html value goes here</p></div>
    </div>
</div>

// frame = true (create 9 elements)
<div id="developer-specified-id-goes-here" class="x-panel">
    <div class="x-panel-tl"><div class="x-panel-tr"><div class="x-panel-tc">
        <div class="x-panel-header"><span class="x-panel-header-text">Title: (frame:true)</span></div>
    </div></div></div>

    <div class="x-panel-bwrap">
        <div class="x-panel-ml"><div class="x-panel-mr"><div class="x-panel-mc">
            <div class="x-panel-body"><p>html value goes here</p></div>
        </div></div></div>

        <div class="x-panel-bl"><div class="x-panel-br"><div class="x-panel-bc"/>
        </div></div></div>
</div>
     *

     */

/**
     * @cfg {Boolean} border
     * True to display the borders of the panel's body element, false to hide them (defaults to true).  By default,
     * the border is a 2px wide inset border, but this can be further altered by setting {@link #bodyBorder} to false.
     */

/**
     * @cfg {Boolean} bodyBorder
     * True to display an interior border on the body element of the panel, false to hide it (defaults to true).
     * This only applies when {@link #border} == true.  If border == true and bodyBorder == false, the border will display
     * as a 1px wide inset border, giving the entire body element an inset appearance.
     */

/**
     * @cfg {String/Object/Function} bodyCssClass
     * Additional css class selector to be applied to the {@link #body} element in the format expected by
     * {@link Ext.Element#addClass} (defaults to null). See {@link #bodyCfg}.
     */

/**
     * @cfg {String/Object/Function} bodyStyle
     * Custom CSS styles to be applied to the {@link #body} element in the format expected by
     * {@link Ext.Element#applyStyles} (defaults to null). See {@link #bodyCfg}.
     */

/**
     * @cfg {String} iconCls
     * The CSS class selector that specifies a background image to be used as the header icon (defaults to '').
     *
An example of specifying a custom icon class would be something like:
     *

// specify the property in the config for the class:
     ...
     iconCls: 'my-icon'

// css class that specifies background image to be used as the icon image:
.my-icon { background-image: url(../images/my-icon.gif) 0 6px no-repeat !important; }

     */

/**
     * @cfg {Boolean} collapsible
     * True to make the panel collapsible and have the expand/collapse toggle button automatically rendered into
     * the header tool button area, false to keep the panel statically sized with no button (defaults to false).
     */

/**
     * @cfg {Array} tools
     * An array of tool button configs to be added to the header tool area. When rendered, each tool is
     * stored as an {@link Ext.Element Element} referenced by a public property called tools.<tool-type>
     *
Each tool config may contain the following properties:
     *

     *
  • id : String
    Required. The type
     * of tool to create. By default, this assigns a CSS class of the form x-tool-<tool-type> to the
     * resulting tool Element. Ext provides CSS rules, and an icon sprite containing images for the tool types listed below.
     * The developer may implement custom tools by supplying alternate CSS rules and background images:
     *

     *

       toggle (Created by default when {@link #collapsible} is true)

     *

       close

     *

       minimize

     *

       maximize

     *

       restore

     *

       gear

     *

       pin

     *

       unpin

     *

       right

     *

       left

     *

       up

     *

       down

     *

       refresh

     *

       minus

     *

       plus

     *

       help

     *

       search

     *

       save

     *

       print

     *
    •
     *
  • handler : Function
    Required. The function to
     * call when clicked. Arguments passed are:

     *
    • event : Ext.EventObject
      The click event.
      •
     *
    • toolEl : Ext.Element
      The tool Element.
      •
     *
    • panel : Ext.Panel
      The host Panel
      •
     *
    • tc : Object
      The tool configuration object
      •
     *
    •
     *
  • stopEvent : Boolean
    Defaults to true. Specify as false to allow click event to propagate.
    •
     *
  • scope : Object
    The scope in which to call the handler.
    •
     *
  • qtip : String/Object
    A tip string, or
     * a config argument to {@link Ext.QuickTip#register}
    •
     *
  • hidden : Boolean
    True to initially render hidden.
    •
     *
  • on : Object
    A listener config object specifiying
     * event listeners in the format of an argument to {@link #addListener}
    •
     *

     *
Note that, apart from the toggle tool which is provided when a panel is collapsible, these
     * tools only provide the visual button. Any required functionality must be provided by adding
     * handlers that implement the necessary behavior.

     *
Example usage:

     *

tools:[{
    id:'refresh',
    qtip: 'Refresh form Data',
    // hidden:true,
    handler: function(event, toolEl, panel){
        // refresh logic
    }
},
{
    id:'help',
    qtip: 'Get Help',
    handler: function(event, toolEl, panel){
        // whatever
    }
}]

     *
For the custom id of 'help' define two relevant css classes with a link to
     * a 15x15 image:

     *

.x-tool-help {background-image: url(images/help.png);}
.x-tool-help-over {background-image: url(images/help_over.png);}
// if using an image sprite:
.x-tool-help {background-image: url(images/help.png) no-repeat 0 0;}
.x-tool-help-over {background-position:-15px 0;}

     */

/**
     * @cfg {Ext.Template/Ext.XTemplate} toolTemplate
     *
A Template used to create {@link #tools} in the {@link #header} Element. Defaults to:

new Ext.Template('<div class="x-tool x-tool-{id}">&#160;</div>')

     *
This may may be overridden to provide a custom DOM structure for tools based upon a more
     * complex XTemplate. The template's data is a single tool configuration object (Not the entire Array)
     * as specified in {@link #tools}.  In the following example an <a> tag is used to provide a
     * visual indication when hovering over the tool:

var win = new Ext.Window({
    tools: [{
        id: 'download',
        href: '/MyPdfDoc.pdf'
    }],
    toolTemplate: new Ext.XTemplate(
        '<tpl if="id==\'download\'">',
            '<a class="x-tool x-tool-pdf" href="{href}"></a>',
        '</tpl>',
        '<tpl if="id!=\'download\'">',
            '<div class="x-tool x-tool-{id}">&#160;</div>',
        '</tpl>'
    ),
    width:500,
    height:300,
    closeAction:'hide'
});

     *
Note that the CSS class 'x-tool-pdf' should have an associated style rule which provides an
     * appropriate background image, something like:

    a.x-tool-pdf {background-image: url(../shared/extjs/images/pdf.gif)!important;}

     */

/**
     * @cfg {Boolean} hideCollapseTool
     * true to hide the expand/collapse toggle button when {@link #collapsible} == true,
     * false to display it (defaults to false).
     */

/**
     * @cfg {Boolean} titleCollapse
     * true to allow expanding and collapsing the panel (when {@link #collapsible} = true)
     * by clicking anywhere in the header bar, false) to allow it only by clicking to tool button
     * (defaults to false)). If this panel is a child item of a border layout also see the
     * {@link Ext.layout.BorderLayout.Region BorderLayout.Region}
     * {@link Ext.layout.BorderLayout.Region#floatable floatable} config option.
     */

/**
     * @cfg {Mixed} floating
     *
This property is used to configure the underlying {@link Ext.Layer}. Acceptable values for this
     * configuration property are:

     *
  • false : Default.
    Display the panel inline where it is
     * rendered.
    •
     *
  • true :
    Float the panel (absolute position it with automatic
     * shimming and shadow).

     *
      Setting floating to true will create an Ext.Layer for this panel and display the
     * panel at negative offsets so that it is hidden.

     *
      Since the panel will be absolute positioned, the position must be set explicitly
     * after render (e.g., myPanel.setPosition(100,100);).

     *
      Note: when floating a panel you should always assign a fixed width,
     * otherwise it will be auto width and will expand to fill to the right edge of the viewport.

     *
    •
     *
  • {@link Ext.Layer object} :
    The specified object will be used
     * as the configuration object for the {@link Ext.Layer} that will be created.
    •
     *

     */

/**
     * @cfg {Boolean/String} shadow
     * true (or a valid Ext.Shadow {@link Ext.Shadow#mode} value) to display a shadow behind the
     * panel, false to display no shadow (defaults to 'sides').  Note that this option
     * only applies when {@link #floating} = true.
     */

/**
     * @cfg {Number} shadowOffset
     * The number of pixels to offset the shadow if displayed (defaults to 4). Note that this
     * option only applies when {@link #floating} = true.
     */

/**
     * @cfg {Boolean} shim
     * false to disable the iframe shim in browsers which need one (defaults to true).
     * Note that this option only applies when {@link #floating} = true.
     */

/**
     * @cfg {Object/Array} keys
     * A {@link Ext.KeyMap} config object (in the format expected by {@link Ext.KeyMap#addBinding}
     * used to assign custom key handling to this panel (defaults to null).
     */

/**
     * @cfg {Boolean/Object} draggable
     *
true to enable dragging of this Panel (defaults to false).

     *
For custom drag/drop implementations, an Ext.Panel.DD config could also be passed
     * in this config instead of true. Ext.Panel.DD is an internal, undocumented class which
     * moves a proxy Element around in place of the Panel's element, but provides no other behaviour
     * during dragging or on drop. It is a subclass of {@link Ext.dd.DragSource}, so behaviour may be
     * added by implementing the interface methods of {@link Ext.dd.DragDrop} e.g.:
     *

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();

     */

/**
     * @cfg {Boolean} disabled
     * Render this panel disabled (default is false). An important note when using the disabled
     * config on panels is that IE will often fail to initialize the disabled mask element correectly if
     * the panel's layout has not yet completed by the time the Panel is disabled during the render process.
     * If you experience this issue, you may need to instead use the {@link #afterlayout} event to initialize
     * the disabled state:
     *

new Ext.Panel({
    ...
    listeners: {
        'afterlayout': {
            fn: function(p){
                p.disable();
            },
            single: true // important, as many layouts can occur
        }
    }
});

     */

/**
     * @cfg {Boolean} autoHeight
     * true to use height:'auto', false to use fixed height (defaults to false).
     * Note: Setting autoHeight: true means that the browser will manage the panel's height
     * based on its contents, and that Ext will not manage it at all. If the panel is within a layout that
     * manages dimensions (fit, border, etc.) then setting autoHeight: true
     * can cause issues with scrolling and will not generally work as expected since the panel will take
     * on the height of its contents rather than the height required by the Ext layout.
     */

/**
     * @cfg {String} baseCls
     * The base CSS class to apply to this panel's element (defaults to 'x-panel').
     *
Another option available by default is to specify 'x-plain' which strips all styling
     * except for required attributes for Ext layouts to function (e.g. overflow:hidden).
     * See {@link #unstyled} also.

     */
    baseCls : 'x-panel',

/**
     * @cfg {String} collapsedCls
     * A CSS class to add to the panel's element after it has been collapsed (defaults to
     * 'x-panel-collapsed').
     */
    collapsedCls : 'x-panel-collapsed',

/**
     * @cfg {Boolean} maskDisabled
     * true to mask the panel when it is {@link #disabled}, false to not mask it (defaults
     * to true).  Either way, the panel will always tell its contained elements to disable themselves
     * when it is disabled, but masking the panel can provide an additional visual cue that the panel is
     * disabled.
     */
    maskDisabled : true,

/**
     * @cfg {Boolean} animCollapse
     * true to animate the transition when the panel is collapsed, false to skip the
     * animation (defaults to true if the {@link Ext.Fx} class is available, otherwise false).
     */
    animCollapse : Ext.enableFx,

/**
     * @cfg {Boolean} headerAsText
     * true to display the panel {@link #title} in the {@link #header},
     * false to hide it (defaults to true).
     */
    headerAsText : true,

/**
     * @cfg {String} buttonAlign
     * The alignment of any {@link #buttons} added to this panel.  Valid values are 'right',
     * 'left' and 'center' (defaults to 'right').
     */
    buttonAlign : 'right',

/**
     * @cfg {Boolean} collapsed
     * true to render the panel collapsed, false to render it expanded (defaults to
     * false).
     */
    collapsed : false,

/**
     * @cfg {Boolean} collapseFirst
     * true to make sure the collapse/expand toggle button always renders first (to the left of)
     * any other tools in the panel's title bar, false to render it last (defaults to true).
     */
    collapseFirst : true,

/**
     * @cfg {Number} minButtonWidth
     * Minimum width in pixels of all {@link #buttons} in this panel (defaults to 75)
     */
    minButtonWidth : 75,

/**
     * @cfg {Boolean} unstyled
     * Overrides the {@link #baseCls} setting to {@link #baseCls} = 'x-plain' which renders
     * the panel unstyled except for required attributes for Ext layouts to function (e.g. overflow:hidden).
     */

/**
     * @cfg {String} elements
     * A comma-delimited list of panel elements to initialize when the panel is rendered.  Normally, this list will be
     * generated automatically based on the items added to the panel at config time, but sometimes it might be useful to
     * make sure a structural element is rendered even if not specified at config time (for example, you may want
     * to add a button or toolbar dynamically after the panel has been rendered).  Adding those elements to this
     * list will allocate the required placeholders in the panel when it is rendered.  Valid values are

     *
  • header
    •
     *
  • tbar (top bar)
    •
     *
  • body
    •
     *
  • bbar (bottom bar)
    •
     *
  • footer
    •
     *

     * Defaults to 'body'.
     */
    elements : 'body',

/**
     * @cfg {Boolean} preventBodyReset
     * Defaults to false.  When set to true, an extra css class 'x-panel-normal'
     * will be added to the panel's element, effectively applying css styles suggested by the W3C
     * (see http://www.w3.org/TR/CSS21/sample.html) to the Panel's body element (not the header,
     * footer, etc.).
     */
    preventBodyReset : false,

/**
     * @cfg {Number/String} padding
     * A shortcut for setting a padding style on the body element. The value can either be
     * a number to be applied to all sides, or a normal css string describing padding.
     * Defaults to undefined.
     *
     */
    padding: undefined,

/** @cfg {String} resizeEvent
     * The event to listen to for resizing in layouts. Defaults to 'bodyresize'.
     */
    resizeEvent: 'bodyresize',

    // protected - these could be used to customize the behavior of the window,
    // but changing them would not be useful without further mofifications and
    // could lead to unexpected or undesirable results.
    toolTarget : 'header',
    collapseEl : 'bwrap',
    slideAnchor : 't',
    disabledClass : '',

    // private, notify box this class will handle heights
    deferHeight : true,
    // private
    expandDefaults: {
        duration : 0.25
    },
    // private
    collapseDefaults : {
        duration : 0.25
    },

    // private
    initComponent : function(){
        Ext.Panel.superclass.initComponent.call(this);

        this.addEvents(

/**
             * @event bodyresize
             * Fires after the Panel has been resized.
             * @param {Ext.Panel} p the Panel which has been resized.
             * @param {Number} width The Panel body's new width.
             * @param {Number} height The Panel body's new height.
             */
            'bodyresize',

/**
             * @event titlechange
             * Fires after the Panel title has been {@link #title set} or {@link #setTitle changed}.
             * @param {Ext.Panel} p the Panel which has had its title changed.
             * @param {String} The new title.
             */
            'titlechange',

/**
             * @event iconchange
             * Fires after the Panel icon class has been {@link #iconCls set} or {@link #setIconClass changed}.
             * @param {Ext.Panel} p the Panel which has had its {@link #iconCls icon class} changed.
             * @param {String} The new icon class.
             * @param {String} The old icon class.
             */
            'iconchange',

/**
             * @event collapse
             * Fires after the Panel has been collapsed.
             * @param {Ext.Panel} p the Panel that has been collapsed.
             */
            'collapse',

/**
             * @event expand
             * Fires after the Panel has been expanded.
             * @param {Ext.Panel} p The Panel that has been expanded.
             */
            'expand',

/**
             * @event beforecollapse
             * Fires before the Panel is collapsed.  A handler can return false to cancel the collapse.
             * @param {Ext.Panel} p the Panel being collapsed.
             * @param {Boolean} animate True if the collapse is animated, else false.
             */
            'beforecollapse',

/**
             * @event beforeexpand
             * Fires before the Panel is expanded.  A handler can return false to cancel the expand.
             * @param {Ext.Panel} p The Panel being expanded.
             * @param {Boolean} animate True if the expand is animated, else false.
             */
            'beforeexpand',

/**
             * @event beforeclose
             * Fires before the Panel is closed.  Note that Panels do not directly support being closed, but some
             * Panel subclasses do (like {@link Ext.Window}) or a Panel within a Ext.TabPanel.  This event only
             * applies to such subclasses.
             * A handler can return false to cancel the close.
             * @param {Ext.Panel} p The Panel being closed.
             */
            'beforeclose',

/**
             * @event close
             * Fires after the Panel is closed.  Note that Panels do not directly support being closed, but some
             * Panel subclasses do (like {@link Ext.Window}) or a Panel within a Ext.TabPanel.
             * @param {Ext.Panel} p The Panel that has been closed.
             */
            'close',

/**
             * @event activate
             * Fires after the Panel has been visually activated.
             * Note that Panels do not directly support being activated, but some Panel subclasses
             * do (like {@link Ext.Window}). Panels which are child Components of a TabPanel fire the
             * activate and deactivate events under the control of the TabPanel.
             * @param {Ext.Panel} p The Panel that has been activated.
             */
            'activate',

/**
             * @event deactivate
             * Fires after the Panel has been visually deactivated.
             * Note that Panels do not directly support being deactivated, but some Panel subclasses
             * do (like {@link Ext.Window}). Panels which are child Components of a TabPanel fire the
             * activate and deactivate events under the control of the TabPanel.
             * @param {Ext.Panel} p The Panel that has been deactivated.
             */
            'deactivate'
        );

        if(this.unstyled){
            this.baseCls = 'x-plain';
        }

        this.toolbars = [];
        // shortcuts
        if(this.tbar){
            this.elements += ',tbar';
            this.topToolbar = this.createToolbar(this.tbar);
            this.tbar = null;

        }
        if(this.bbar){
            this.elements += ',bbar';
            this.bottomToolbar = this.createToolbar(this.bbar);
            this.bbar = null;
        }

        if(this.header === true){
            this.elements += ',header';
            this.header = null;
        }else if(this.headerCfg || (this.title && this.header !== false)){
            this.elements += ',header';
        }

        if(this.footerCfg || this.footer === true){
            this.elements += ',footer';
            this.footer = null;
        }

        if(this.buttons){
            this.fbar = this.buttons;
            this.buttons = null;
        }
        if(this.fbar){
            this.createFbar(this.fbar);
        }
        if(this.autoLoad){
            this.on('render', this.doAutoLoad, this, {delay:10});
        }
    },

    // private
    createFbar : function(fbar){
        var min = this.minButtonWidth;
        this.elements += ',footer';
        this.fbar = this.createToolbar(fbar, {
            buttonAlign: this.buttonAlign,
            toolbarCls: 'x-panel-fbar',
            enableOverflow: false,
            defaults: function(c){
                return {
                    minWidth: c.minWidth || min
                };
            }
        });
        // @compat addButton and buttons could possibly be removed
        // @target 4.0

/**
         * This Panel's Array of buttons as created from the {@link #buttons}
         * config property. Read only.
         * @type Array
         * @property buttons
         */
        this.fbar.items.each(function(c){
            c.minWidth = c.minWidth || this.minButtonWidth;
        }, this);
        this.buttons = this.fbar.items.items;
    },

    // private
    createToolbar: function(tb, options){
        var result;
        // Convert array to proper toolbar config
        if(Ext.isArray(tb)){
            tb = {
                items: tb
            };
        }
        result = tb.events ? Ext.apply(tb, options) : this.createComponent(Ext.apply({}, tb, options), 'toolbar');
        this.toolbars.push(result);
        return result;
    },

    // private
    createElement : function(name, pnode){
        if(this[name]){
            pnode.appendChild(this[name].dom);
            return;
        }

        if(name === 'bwrap' || this.elements.indexOf(name) != -1){
            if(this[name+'Cfg']){
                this[name] = Ext.fly(pnode).createChild(this[name+'Cfg']);
            }else{
                var el = document.createElement('div');
                el.className = this[name+'Cls'];
                this[name] = Ext.get(pnode.appendChild(el));
            }
            if(this[name+'CssClass']){
                this[name].addClass(this[name+'CssClass']);
            }
            if(this[name+'Style']){
                this[name].applyStyles(this[name+'Style']);
            }
        }
    },

    // private
    onRender : function(ct, position){
        Ext.Panel.superclass.onRender.call(this, ct, position);
        this.createClasses();

        var el = this.el,
            d = el.dom,
            bw,
            ts;

        if(this.collapsible && !this.hideCollapseTool){
            this.tools = this.tools ? this.tools.slice(0) : [];
            this.tools[this.collapseFirst?'unshift':'push']({
                id: 'toggle',
                handler : this.toggleCollapse,
                scope: this
            });
        }

        if(this.tools){
            ts = this.tools;
            this.elements += (this.header !== false) ? ',header' : '';
        }
        this.tools = {};

        el.addClass(this.baseCls);
        if(d.firstChild){ // existing markup
            this.header = el.down('.'+this.headerCls);
            this.bwrap = el.down('.'+this.bwrapCls);
            var cp = this.bwrap ? this.bwrap : el;
            this.tbar = cp.down('.'+this.tbarCls);
            this.body = cp.down('.'+this.bodyCls);
            this.bbar = cp.down('.'+this.bbarCls);
            this.footer = cp.down('.'+this.footerCls);
            this.fromMarkup = true;
        }
        if (this.preventBodyReset === true) {
            el.addClass('x-panel-reset');
        }
        if(this.cls){
            el.addClass(this.cls);
        }

        if(this.buttons){
            this.elements += ',footer';
        }

        // This block allows for maximum flexibility and performance when using existing markup

        // framing requires special markup
        if(this.frame){
            el.insertHtml('afterBegin', String.format(Ext.Element.boxMarkup, this.baseCls));

            this.createElement('header', d.firstChild.firstChild.firstChild);
            this.createElement('bwrap', d);

            // append the mid and bottom frame to the bwrap
            bw = this.bwrap.dom;
            var ml = d.childNodes[1], bl = d.childNodes[2];
            bw.appendChild(ml);
            bw.appendChild(bl);

            var mc = bw.firstChild.firstChild.firstChild;
            this.createElement('tbar', mc);
            this.createElement('body', mc);
            this.createElement('bbar', mc);
            this.createElement('footer', bw.lastChild.firstChild.firstChild);

            if(!this.footer){
                this.bwrap.dom.lastChild.className += ' x-panel-nofooter';
            }
            /*
             * Store a reference to this element so:
             * a) We aren't looking it up all the time
             * b) The last element is reported incorrectly when using a loadmask
             */
            this.ft = Ext.get(this.bwrap.dom.lastChild);
            this.mc = Ext.get(mc);
        }else{
            this.createElement('header', d);
            this.createElement('bwrap', d);

            // append the mid and bottom frame to the bwrap
            bw = this.bwrap.dom;
            this.createElement('tbar', bw);
            this.createElement('body', bw);
            this.createElement('bbar', bw);
            this.createElement('footer', bw);

            if(!this.header){
                this.body.addClass(this.bodyCls + '-noheader');
                if(this.tbar){
                    this.tbar.addClass(this.tbarCls + '-noheader');
                }
            }
        }

        if(Ext.isDefined(this.padding)){
            this.body.setStyle('padding', this.body.addUnits(this.padding));
        }

        if(this.border === false){
            this.el.addClass(this.baseCls + '-noborder');
            this.body.addClass(this.bodyCls + '-noborder');
            if(this.header){
                this.header.addClass(this.headerCls + '-noborder');
            }
            if(this.footer){
                this.footer.addClass(this.footerCls + '-noborder');
            }
            if(this.tbar){
                this.tbar.addClass(this.tbarCls + '-noborder');
            }
            if(this.bbar){
                this.bbar.addClass(this.bbarCls + '-noborder');
            }
        }

        if(this.bodyBorder === false){
           this.body.addClass(this.bodyCls + '-noborder');
        }

        this.bwrap.enableDisplayMode('block');

        if(this.header){
            this.header.unselectable();

            // for tools, we need to wrap any existing header markup
            if(this.headerAsText){
                this.header.dom.innerHTML =
                    ''+this.header.dom.innerHTML+'';

                if(this.iconCls){
                    this.setIconClass(this.iconCls);
                }
            }
        }

        if(this.floating){
            this.makeFloating(this.floating);
        }

        if(this.collapsible && this.titleCollapse && this.header){
            this.mon(this.header, 'click', this.toggleCollapse, this);
            this.header.setStyle('cursor', 'pointer');
        }
        if(ts){
            this.addTool.apply(this, ts);
        }

        // Render Toolbars.
        if(this.fbar){
            this.footer.addClass('x-panel-btns');
            this.fbar.ownerCt = this;
            this.fbar.render(this.footer);
            this.footer.createChild({cls:'x-clear'});
        }
        if(this.tbar && this.topToolbar){
            this.topToolbar.ownerCt = this;
            this.topToolbar.render(this.tbar);
        }
        if(this.bbar && this.bottomToolbar){
            this.bottomToolbar.ownerCt = this;
            this.bottomToolbar.render(this.bbar);
        }
    },

/**
     * Sets the CSS class that provides the icon image for this panel.  This method will replace any existing
     * icon class if one has already been set and fire the {@link #iconchange} event after completion.
     * @param {String} cls The new CSS class name
     */
    setIconClass : function(cls){
        var old = this.iconCls;
        this.iconCls = cls;
        if(this.rendered && this.header){
            if(this.frame){
                this.header.addClass('x-panel-icon');
                this.header.replaceClass(old, this.iconCls);
            }else{
                var hd = this.header,
                    img = hd.child('img.x-panel-inline-icon');
                if(img){
                    Ext.fly(img).replaceClass(old, this.iconCls);
                }else{
                    var hdspan = hd.child('span.' + this.headerTextCls);
                    if (hdspan) {
                        Ext.DomHelper.insertBefore(hdspan.dom, {
                            tag:'img', src: Ext.BLANK_IMAGE_URL, cls:'x-panel-inline-icon '+this.iconCls
                        });
                    }
                 }
            }
        }
        this.fireEvent('iconchange', this, cls, old);
    },

    // private
    makeFloating : function(cfg){
        this.floating = true;
        this.el = new Ext.Layer(Ext.apply({}, cfg, {
            shadow: Ext.isDefined(this.shadow) ? this.shadow : 'sides',
            shadowOffset: this.shadowOffset,
            constrain:false,
            shim: this.shim === false ? false : undefined
        }), this.el);
    },

/**
     * Returns the {@link Ext.Toolbar toolbar} from the top ({@link #tbar}) section of the panel.
     * @return {Ext.Toolbar} The toolbar
     */
    getTopToolbar : function(){
        return this.topToolbar;
    },

/**
     * Returns the {@link Ext.Toolbar toolbar} from the bottom ({@link #bbar}) section of the panel.
     * @return {Ext.Toolbar} The toolbar
     */
    getBottomToolbar : function(){
        return this.bottomToolbar;
    },

/**
     * Returns the {@link Ext.Toolbar toolbar} from the footer ({@link #fbar}) section of the panel.
     * @return {Ext.Toolbar} The toolbar
     */
    getFooterToolbar : function() {
        return this.fbar;
    },

/**
     * Adds a button to this panel.  Note that this method must be called prior to rendering.  The preferred
     * approach is to add buttons via the {@link #buttons} config.
     * @param {String/Object} config A valid {@link Ext.Button} config.  A string will become the text for a default
     * button config, an object will be treated as a button config object.
     * @param {Function} handler The function to be called on button {@link Ext.Button#click}
     * @param {Object} scope The scope (this reference) in which the button handler function is executed. Defaults to the Button.
     * @return {Ext.Button} The button that was added
     */
    addButton : function(config, handler, scope){
        if(!this.fbar){
            this.createFbar([]);
        }
        if(handler){
            if(Ext.isString(config)){
                config = {text: config};
            }
            config = Ext.apply({
                handler: handler,
                scope: scope
            }, config);
        }
        return this.fbar.add(config);
    },

    // private
    addTool : function(){
        if(!this.rendered){
            if(!this.tools){
                this.tools = [];
            }
            Ext.each(arguments, function(arg){
                this.tools.push(arg);
            }, this);
            return;
        }
         // nowhere to render tools!
        if(!this[this.toolTarget]){
            return;
        }
        if(!this.toolTemplate){
            // initialize the global tool template on first use
            var tt = new Ext.Template(
                 '

'
            );
            tt.disableFormats = true;
            tt.compile();
            Ext.Panel.prototype.toolTemplate = tt;
        }
        for(var i = 0, a = arguments, len = a.length; i < len; i++) {
            var tc = a[i];
            if(!this.tools[tc.id]){
                var overCls = 'x-tool-'+tc.id+'-over';
                var t = this.toolTemplate.insertFirst(this[this.toolTarget], tc, true);
                this.tools[tc.id] = t;
                t.enableDisplayMode('block');
                this.mon(t, 'click',  this.createToolHandler(t, tc, overCls, this));
                if(tc.on){
                    this.mon(t, tc.on);
                }
                if(tc.hidden){
                    t.hide();
                }
                if(tc.qtip){
                    if(Ext.isObject(tc.qtip)){
                        Ext.QuickTips.register(Ext.apply({
                              target: t.id
                        }, tc.qtip));
                    } else {
                        t.dom.qtip = tc.qtip;
                    }
                }
                t.addClassOnOver(overCls);
            }
        }
    },

    onLayout : function(shallow, force){
        Ext.Panel.superclass.onLayout.apply(this, arguments);
        if(this.hasLayout && this.toolbars.length > 0){
            Ext.each(this.toolbars, function(tb){
                tb.doLayout(undefined, force);
            });
            this.syncHeight();
        }
    },

    syncHeight : function(){
        var h = this.toolbarHeight,
                bd = this.body,
                lsh = this.lastSize.height,
                sz;

        if(this.autoHeight || !Ext.isDefined(lsh) || lsh == 'auto'){
            return;
        }

        if(h != this.getToolbarHeight()){
            h = Math.max(0, lsh - this.getFrameHeight());
            bd.setHeight(h);
            sz = bd.getSize();
            this.toolbarHeight = this.getToolbarHeight();
            this.onBodyResize(sz.width, sz.height);
        }
    },

    // private
    onShow : function(){
        if(this.floating){
            return this.el.show();
        }
        Ext.Panel.superclass.onShow.call(this);
    },

    // private
    onHide : function(){
        if(this.floating){
            return this.el.hide();
        }
        Ext.Panel.superclass.onHide.call(this);
    },

    // private
    createToolHandler : function(t, tc, overCls, panel){
        return function(e){
            t.removeClass(overCls);
            if(tc.stopEvent !== false){
                e.stopEvent();
            }
            if(tc.handler){
                tc.handler.call(tc.scope || t, e, t, panel, tc);
            }
        };
    },

    // private
    afterRender : function(){
        if(this.floating && !this.hidden){
            this.el.show();
        }
        if(this.title){
            this.setTitle(this.title);
        }
        Ext.Panel.superclass.afterRender.call(this); // do sizing calcs last
        if (this.collapsed) {
            this.collapsed = false;
            this.collapse(false);
        }
        this.initEvents();
    },

    // private
    getKeyMap : function(){
        if(!this.keyMap){
            this.keyMap = new Ext.KeyMap(this.el, this.keys);
        }
        return this.keyMap;
    },

    // private
    initEvents : function(){
        if(this.keys){
            this.getKeyMap();
        }
        if(this.draggable){
            this.initDraggable();
        }
        if(this.toolbars.length > 0){
            Ext.each(this.toolbars, function(tb){
                tb.doLayout();
                tb.on({
                    scope: this,
                    afterlayout: this.syncHeight,
                    remove: this.syncHeight
                });
            }, this);
            this.syncHeight();
        }

    },

    // private
    initDraggable : function(){

/**
         *
If this Panel is configured {@link #draggable}, this property will contain
         * an instance of {@link Ext.dd.DragSource} which handles dragging the Panel.

         * The developer must provide implementations of the abstract methods of {@link Ext.dd.DragSource}
         * in order to supply behaviour for each stage of the drag/drop process. See {@link #draggable}.
         * @type Ext.dd.DragSource.
         * @property dd
         */
        this.dd = new Ext.Panel.DD(this, Ext.isBoolean(this.draggable) ? null : this.draggable);
    },

    // private
    beforeEffect : function(anim){
        if(this.floating){
            this.el.beforeAction();
        }
        if(anim !== false){
            this.el.addClass('x-panel-animated');
        }
    },

    // private
    afterEffect : function(anim){
        this.syncShadow();
        this.el.removeClass('x-panel-animated');
    },

    // private - wraps up an animation param with internal callbacks
    createEffect : function(a, cb, scope){
        var o = {
            scope:scope,
            block:true
        };
        if(a === true){
            o.callback = cb;
            return o;
        }else if(!a.callback){
            o.callback = cb;
        }else { // wrap it up
            o.callback = function(){
                cb.call(scope);
                Ext.callback(a.callback, a.scope);
            };
        }
        return Ext.applyIf(o, a);
    },

/**
     * Collapses the panel body so that it becomes hidden.  Fires the {@link #beforecollapse} event which will
     * cancel the collapse action if it returns false.
     * @param {Boolean} animate True to animate the transition, else false (defaults to the value of the
     * {@link #animCollapse} panel config)
     * @return {Ext.Panel} this
     */
    collapse : function(animate){
        if(this.collapsed || this.el.hasFxBlock() || this.fireEvent('beforecollapse', this, animate) === false){
            return;
        }
        var doAnim = animate === true || (animate !== false && this.animCollapse);
        this.beforeEffect(doAnim);
        this.onCollapse(doAnim, animate);
        return this;
    },

    // private
    onCollapse : function(doAnim, animArg){
        if(doAnim){
            this[this.collapseEl].slideOut(this.slideAnchor,
                    Ext.apply(this.createEffect(animArg||true, this.afterCollapse, this),
                        this.collapseDefaults));
        }else{
            this[this.collapseEl].hide(this.hideMode);
            this.afterCollapse(false);
        }
    },

    // private
    afterCollapse : function(anim){
        this.collapsed = true;
        this.el.addClass(this.collapsedCls);
        if(anim !== false){
            this[this.collapseEl].hide(this.hideMode);
        }
        this.afterEffect(anim);

        // Reset lastSize of all sub-components so they KNOW they are in a collapsed container
        this.cascade(function(c) {
            if (c.lastSize) {
                c.lastSize = { width: 0, height: 0 };
            }
        });
        this.fireEvent('collapse', this);
    },

/**
     * Expands the panel body so that it becomes visible.  Fires the {@link #beforeexpand} event which will
     * cancel the expand action if it returns false.
     * @param {Boolean} animate True to animate the transition, else false (defaults to the value of the
     * {@link #animCollapse} panel config)
     * @return {Ext.Panel} this
     */
    expand : function(animate){
        if(!this.collapsed || this.el.hasFxBlock() || this.fireEvent('beforeexpand', this, animate) === false){
            return;
        }
        var doAnim = animate === true || (animate !== false && this.animCollapse);
        this.el.removeClass(this.collapsedCls);
        this.beforeEffect(doAnim);
        this.onExpand(doAnim, animate);
        return this;
    },

    // private
    onExpand : function(doAnim, animArg){
        if(doAnim){
            this[this.collapseEl].slideIn(this.slideAnchor,
                    Ext.apply(this.createEffect(animArg||true, this.afterExpand, this),
                        this.expandDefaults));
        }else{
            this[this.collapseEl].show(this.hideMode);
            this.afterExpand(false);
        }
    },

    // private
    afterExpand : function(anim){
        this.collapsed = false;
        if(anim !== false){
            this[this.collapseEl].show(this.hideMode);
        }
        this.afterEffect(anim);
        if (this.deferLayout) {
            delete this.deferLayout;
            this.doLayout(true);
        }
        this.fireEvent('expand', this);
    },

/**
     * Shortcut for performing an {@link #expand} or {@link #collapse} based on the current state of the panel.
     * @param {Boolean} animate True to animate the transition, else false (defaults to the value of the
     * {@link #animCollapse} panel config)
     * @return {Ext.Panel} this
     */
    toggleCollapse : function(animate){
        this[this.collapsed ? 'expand' : 'collapse'](animate);
        return this;
    },

    // private
    onDisable : function(){
        if(this.rendered && this.maskDisabled){
            this.el.mask();
        }
        Ext.Panel.superclass.onDisable.call(this);
    },

    // private
    onEnable : function(){
        if(this.rendered && this.maskDisabled){
            this.el.unmask();
        }
        Ext.Panel.superclass.onEnable.call(this);
    },

    // private
    onResize : function(adjWidth, adjHeight, rawWidth, rawHeight){
        var w = adjWidth,
            h = adjHeight;

        if(Ext.isDefined(w) || Ext.isDefined(h)){
            if(!this.collapsed){
                // First, set the the Panel's body width.
                // If we have auto-widthed it, get the resulting full offset width so we can size the Toolbars to match
                // The Toolbars must not buffer this resize operation because we need to know their heights.

                if(Ext.isNumber(w)){
                    this.body.setWidth(w = this.adjustBodyWidth(w - this.getFrameWidth()));
                } else if (w == 'auto') {
                    w = this.body.setWidth('auto').dom.offsetWidth;
                } else {
                    w = this.body.dom.offsetWidth;
                }

                if(this.tbar){
                    this.tbar.setWidth(w);
                    if(this.topToolbar){
                        this.topToolbar.setSize(w);
                    }
                }
                if(this.bbar){
                    this.bbar.setWidth(w);
                    if(this.bottomToolbar){
                        this.bottomToolbar.setSize(w);
                        // The bbar does not move on resize without this.
                        if (Ext.isIE) {
                            this.bbar.setStyle('position', 'static');
                            this.bbar.setStyle('position', '');
                        }
                    }
                }
                if(this.footer){
                    this.footer.setWidth(w);
                    if(this.fbar){
                        this.fbar.setSize(Ext.isIE ? (w - this.footer.getFrameWidth('lr')) : 'auto');
                    }
                }

                // At this point, the Toolbars must be layed out for getFrameHeight to find a result.
                if(Ext.isNumber(h)){
                    h = Math.max(0, h - this.getFrameHeight());
                    //h = Math.max(0, h - (this.getHeight() - this.body.getHeight()));
                    this.body.setHeight(h);
                }else if(h == 'auto'){
                    this.body.setHeight(h);
                }

                if(this.disabled && this.el._mask){
                    this.el._mask.setSize(this.el.dom.clientWidth, this.el.getHeight());
                }
            }else{
                // Adds an event to set the correct height afterExpand.  This accounts for the deferHeight flag in panel
                this.queuedBodySize = {width: w, height: h};
                if(!this.queuedExpand && this.allowQueuedExpand !== false){
                    this.queuedExpand = true;
                    this.on('expand', function(){
                        delete this.queuedExpand;
                        this.onResize(this.queuedBodySize.width, this.queuedBodySize.height);
                    }, this, {single:true});
                }
            }
            this.onBodyResize(w, h);
        }
        this.syncShadow();
        Ext.Panel.superclass.onResize.call(this, adjWidth, adjHeight, rawWidth, rawHeight);

    },

    // private
    onBodyResize: function(w, h){
        this.fireEvent('bodyresize', this, w, h);
    },

    // private
    getToolbarHeight: function(){
        var h = 0;
        if(this.rendered){
            Ext.each(this.toolbars, function(tb){
                h += tb.getHeight();
            }, this);
        }
        return h;
    },

    // deprecate
    adjustBodyHeight : function(h){
        return h;
    },

    // private
    adjustBodyWidth : function(w){
        return w;
    },

    // private
    onPosition : function(){
        this.syncShadow();
    },

/**
     * Returns the width in pixels of the framing elements of this panel (not including the body width).  To
     * retrieve the body width see {@link #getInnerWidth}.
     * @return {Number} The frame width
     */
    getFrameWidth : function(){
        var w = this.el.getFrameWidth('lr') + this.bwrap.getFrameWidth('lr');

        if(this.frame){
            var l = this.bwrap.dom.firstChild;
            w += (Ext.fly(l).getFrameWidth('l') + Ext.fly(l.firstChild).getFrameWidth('r'));
            w += this.mc.getFrameWidth('lr');
        }
        return w;
    },

/**
     * Returns the height in pixels of the framing elements of this panel (including any top and bottom bars and
     * header and footer elements, but not including the body height).  To retrieve the body height see {@link #getInnerHeight}.
     * @return {Number} The frame height
     */
    getFrameHeight : function() {
        var h = Math.max(0, this.getHeight() - this.body.getHeight());

        if (isNaN(h)) {
            h = 0;
        }
        return h;

        /* Deprecate
            var h  = this.el.getFrameWidth('tb') + this.bwrap.getFrameWidth('tb');
            h += (this.tbar ? this.tbar.getHeight() : 0) +
                 (this.bbar ? this.bbar.getHeight() : 0);

            if(this.frame){
                h += this.el.dom.firstChild.offsetHeight + this.ft.dom.offsetHeight + this.mc.getFrameWidth('tb');
            }else{
                h += (this.header ? this.header.getHeight() : 0) +
                    (this.footer ? this.footer.getHeight() : 0);
            }
            return h;
        */
    },

/**
     * Returns the width in pixels of the body element (not including the width of any framing elements).
     * For the frame width see {@link #getFrameWidth}.
     * @return {Number} The body width
     */
    getInnerWidth : function(){
        return this.getSize().width - this.getFrameWidth();
    },

/**
     * Returns the height in pixels of the body element (not including the height of any framing elements).
     * For the frame height see {@link #getFrameHeight}.
     * @return {Number} The body height
     */
    getInnerHeight : function(){
        return this.body.getHeight();
        /* Deprecate
            return this.getSize().height - this.getFrameHeight();
        */
    },

    // private
    syncShadow : function(){
        if(this.floating){
            this.el.sync(true);
        }
    },

    // private
    getLayoutTarget : function(){
        return this.body;
    },

    // private
    getContentTarget : function(){
        return this.body;
    },

/**
     *
Sets the title text for the panel and optionally the {@link #iconCls icon class}.

     *
In order to be able to set the title, a header element must have been created
     * for the Panel. This is triggered either by configuring the Panel with a non-blank {@link #title},
     * or configuring it with {@link #header}: true.

     * @param {String} title The title text to set
     * @param {String} iconCls (optional) {@link #iconCls iconCls} A user-defined CSS class that provides the icon image for this panel
     */
    setTitle : function(title, iconCls){
        this.title = title;
        if(this.header && this.headerAsText){
            this.header.child('span').update(title);
        }
        if(iconCls){
            this.setIconClass(iconCls);
        }
        this.fireEvent('titlechange', this, title);
        return this;
    },

/**
     * Get the {@link Ext.Updater} for this panel. Enables you to perform Ajax updates of this panel's body.
     * @return {Ext.Updater} The Updater
     */
    getUpdater : function(){
        return this.body.getUpdater();
    },

/**
     * Loads this content panel immediately with content returned from an XHR call.
     * @param {Object/String/Function} config A config object containing any of the following options:

panel.load({
    url: 'your-url.php',
    params: {param1: 'foo', param2: 'bar'}, // or a URL encoded string
    callback: yourFunction,
    scope: yourObject, // optional scope for the callback
    discardUrl: false,
    nocache: false,
    text: 'Loading...',
    timeout: 30,
    scripts: false
});

     * The only required property is url. The optional properties nocache, text and scripts
     * are shorthand for disableCaching, indicatorText and loadScripts and are used to set their
     * associated property on this panel Updater instance.
     * @return {Ext.Panel} this
     */
    load : function(){
        var um = this.body.getUpdater();
        um.update.apply(um, arguments);
        return this;
    },

    // private
    beforeDestroy : function(){
        Ext.Panel.superclass.beforeDestroy.call(this);
        if(this.header){
            this.header.removeAllListeners();
        }
        if(this.tools){
            for(var k in this.tools){
                Ext.destroy(this.tools[k]);
            }
        }
        if(this.toolbars.length > 0){
            Ext.each(this.toolbars, function(tb){
                tb.un('afterlayout', this.syncHeight, this);
                tb.un('remove', this.syncHeight, this);
            }, this);
        }
        if(Ext.isArray(this.buttons)){
            while(this.buttons.length) {
                Ext.destroy(this.buttons[0]);
            }
        }
        if(this.rendered){
            Ext.destroy(
                this.ft,
                this.header,
                this.footer,
                this.toolbars,
                this.tbar,
                this.bbar,
                this.body,
                this.mc,
                this.bwrap
            );
            if (this.fbar) {
                Ext.destroy(
                    this.fbar,
                    this.fbar.el
                );
            }
        }else{
            Ext.destroy(
                this.topToolbar,
                this.bottomToolbar
            );
        }
    },

    // private
    createClasses : function(){
        this.headerCls = this.baseCls + '-header';
        this.headerTextCls = this.baseCls + '-header-text';
        this.bwrapCls = this.baseCls + '-bwrap';
        this.tbarCls = this.baseCls + '-tbar';
        this.bodyCls = this.baseCls + '-body';
        this.bbarCls = this.baseCls + '-bbar';
        this.footerCls = this.baseCls + '-footer';
    },

    // private
    createGhost : function(cls, useShim, appendTo){
        var el = document.createElement('div');
        el.className = 'x-panel-ghost ' + (cls ? cls : '');
        if(this.header){
            el.appendChild(this.el.dom.firstChild.cloneNode(true));
        }
        Ext.fly(el.appendChild(document.createElement('ul'))).setHeight(this.bwrap.getHeight());
        el.style.width = this.el.dom.offsetWidth + 'px';;
        if(!appendTo){
            this.container.dom.appendChild(el);
        }else{
            Ext.getDom(appendTo).appendChild(el);
        }
        if(useShim !== false && this.el.useShim !== false){
            var layer = new Ext.Layer({shadow:false, useDisplay:true, constrain:false}, el);
            layer.show();
            return layer;
        }else{
            return new Ext.Element(el);
        }
    },

    // private
    doAutoLoad : function(){
        var u = this.body.getUpdater();
        if(this.renderer){
            u.setRenderer(this.renderer);
        }
        u.update(Ext.isObject(this.autoLoad) ? this.autoLoad : {url: this.autoLoad});
    },

/**
     * Retrieve a tool by id.
     * @param {String} id
     * @return {Object} tool
     */
    getTool : function(id) {
        return this.tools[id];
    }

/**
 * @cfg {String} autoEl @hide
 */
});
Ext.reg('panel', Ext.Panel);


The source code

/*!
 * licensing@extjs.com
 * http://www.extjs.com/license
 */

/**
 * @class Ext.dd.PanelProxy
 * A custom drag proxy implementation specific to {@link Ext.Panel}s. This class is primarily used internally
 * for the Panel's drag drop implementation, and should never need to be created directly.
 * @constructor
 * @param panel The {@link Ext.Panel} to proxy for
 * @param config Configuration options
 */
Ext.dd.PanelProxy = function(panel, config){
    this.panel = panel;
    this.id = this.panel.id +'-ddproxy';
    Ext.apply(this, config);
};

Ext.dd.PanelProxy.prototype = {

/**
     * @cfg {Boolean} insertProxy True to insert a placeholder proxy element while dragging the panel,
     * false to drag with no proxy (defaults to true).
     */
    insertProxy : true,

    // private overrides
    setStatus : Ext.emptyFn,
    reset : Ext.emptyFn,
    update : Ext.emptyFn,
    stop : Ext.emptyFn,
    sync: Ext.emptyFn,

/**
     * Gets the proxy's element
     * @return {Element} The proxy's element
     */
    getEl : function(){
        return this.ghost;
    },

/**
     * Gets the proxy's ghost element
     * @return {Element} The proxy's ghost element
     */
    getGhost : function(){
        return this.ghost;
    },

/**
     * Gets the proxy's element
     * @return {Element} The proxy's element
     */
    getProxy : function(){
        return this.proxy;
    },

/**
     * Hides the proxy
     */
    hide : function(){
        if(this.ghost){
            if(this.proxy){
                this.proxy.remove();
                delete this.proxy;
            }
            this.panel.el.dom.style.display = '';
            this.ghost.remove();
            delete this.ghost;
        }
    },

/**
     * Shows the proxy
     */
    show : function(){
        if(!this.ghost){
            this.ghost = this.panel.createGhost(undefined, undefined, Ext.getBody());
            this.ghost.setXY(this.panel.el.getXY());
            if(this.insertProxy){
                this.proxy = this.panel.el.insertSibling({cls:'x-panel-dd-spacer'});
                this.proxy.setSize(this.panel.getSize());
            }
            this.panel.el.dom.style.display = 'none';
        }
    },

    // private
    repair : function(xy, callback, scope){
        this.hide();
        if(typeof callback == "function"){
            callback.call(scope || this);
        }
    },

/**
     * Moves the proxy to a different position in the DOM.  This is typically called while dragging the Panel
     * to keep the proxy sync'd to the Panel's location.
     * @param {HTMLElement} parentNode The proxy's parent DOM node
     * @param {HTMLElement} before (optional) The sibling node before which the proxy should be inserted (defaults
     * to the parent's last child if not specified)
     */
    moveProxy : function(parentNode, before){
        if(this.proxy){
            parentNode.insertBefore(this.proxy.dom, before);
        }
    }
};

// private - DD implementation for Panels
Ext.Panel.DD = function(panel, cfg){
    this.panel = panel;
    this.dragData = {panel: panel};
    this.proxy = new Ext.dd.PanelProxy(panel, cfg);
    Ext.Panel.DD.superclass.constructor.call(this, panel.el, cfg);
    var h = panel.header;
    if(h){
        this.setHandleElId(h.id);
    }
    (h ? h : this.panel.body).setStyle('cursor', 'move');
    this.scroll = false;
};

Ext.extend(Ext.Panel.DD, Ext.dd.DragSource, {
    showFrame: Ext.emptyFn,
    startDrag: Ext.emptyFn,
    b4StartDrag: function(x, y) {
        this.proxy.show();
    },
    b4MouseDown: function(e) {
        var x = e.getPageX();
        var y = e.getPageY();
        this.autoOffset(x, y);
    },
    onInitDrag : function(x, y){
        this.onStartDrag(x, y);
        return true;
    },
    createFrame : Ext.emptyFn,
    getDragEl : function(e){
        return this.proxy.ghost.dom;
    },
    endDrag : function(e){
        this.proxy.hide();
        this.panel.saveState();
    },

    autoOffset : function(x, y) {
        x -= this.startPageX;
        y -= this.startPageY;
        this.setDelta(x, y);
    }
});


The source code

/*!
 * licensing@extjs.com
 * http://www.extjs.com/license
 */

/**
 * @class Ext.direct.PollingProvider
 * @extends Ext.direct.JsonProvider
 *
 *
Provides for repetitive polling of the server at distinct {@link #interval intervals}.
 * The initial request for data originates from the client, and then is responded to by the
 * server.

 *
 *
All configurations for the PollingProvider should be generated by the server-side
 * API portion of the Ext.Direct stack.

 *
 *
An instance of PollingProvider may be created directly via the new keyword or by simply
 * specifying type = 'polling'.  For example:

 *

var pollA = new Ext.direct.PollingProvider({
    type:'polling',
    url: 'php/pollA.php',
});
Ext.Direct.addProvider(pollA);
pollA.disconnect();

Ext.Direct.addProvider(
    {
        type:'polling',
        url: 'php/pollB.php',
        id: 'pollB-provider'
    }
);
var pollB = Ext.Direct.getProvider('pollB-provider');
 *

 */
Ext.direct.PollingProvider = Ext.extend(Ext.direct.JsonProvider, {

/**
     * @cfg {Number} priority
     * Priority of the request (defaults to 3). See {@link Ext.direct.Provider#priority}.
     */
    // override default priority
    priority: 3,

/**
     * @cfg {Number} interval
     * How often to poll the server-side in milliseconds (defaults to 3000 - every
     * 3 seconds).
     */
    interval: 3000,

/**
     * @cfg {Object} baseParams An object containing properties which are to be sent as parameters
     * on every polling request
     */

/**
     * @cfg {String/Function} url
     * The url which the PollingProvider should contact with each request. This can also be
     * an imported Ext.Direct method which will accept the baseParams as its only argument.
     */

    // private
    constructor : function(config){
        Ext.direct.PollingProvider.superclass.constructor.call(this, config);
        this.addEvents(

/**
             * @event beforepoll
             * Fired immediately before a poll takes place, an event handler can return false
             * in order to cancel the poll.
             * @param {Ext.direct.PollingProvider}
             */
            'beforepoll',

/**
             * @event poll
             * This event has not yet been implemented.
             * @param {Ext.direct.PollingProvider}
             */
            'poll'
        );
    },

    // inherited
    isConnected: function(){
        return !!this.pollTask;
    },

/**
     * Connect to the server-side and begin the polling process. To handle each
     * response subscribe to the data event.
     */
    connect: function(){
        if(this.url && !this.pollTask){
            this.pollTask = Ext.TaskMgr.start({
                run: function(){
                    if(this.fireEvent('beforepoll', this) !== false){
                        if(typeof this.url == 'function'){
                            this.url(this.baseParams);
                        }else{
                            Ext.Ajax.request({
                                url: this.url,
                                callback: this.onData,
                                scope: this,
                                params: this.baseParams
                            });
                        }
                    }
                },
                interval: this.interval,
                scope: this
            });
            this.fireEvent('connect', this);
        }else if(!this.url){
            throw 'Error initializing PollingProvider, no url configured.';
        }
    },

/**
     * Disconnect from the server-side and stop the polling process. The disconnect
     * event will be fired on a successful disconnect.
     */
    disconnect: function(){
        if(this.pollTask){
            Ext.TaskMgr.stop(this.pollTask);
            delete this.pollTask;
            this.fireEvent('disconnect', this);
        }
    },

    // private
    onData: function(opt, success, xhr){
        if(success){
            var events = this.getEvents(xhr);
            for(var i = 0, len = events.length; i < len; i++){
                var e = events[i];
                this.fireEvent('data', this, e);
            }
        }else{
            var e = new Ext.Direct.ExceptionEvent({
                data: e,
                code: Ext.Direct.exceptions.TRANSPORT,
                message: 'Unable to connect to the server.',
                xhr: xhr
            });
            this.fireEvent('data', this, e);
        }
    }
});

Ext.Direct.PROVIDERS['polling'] = Ext.direct.PollingProvider;


The source code

/*!
 * licensing@extjs.com
 * http://www.extjs.com/license
 */

/**
 * @class Ext.ProgressBar
 * @extends Ext.BoxComponent
 *
An updateable progress bar component.  The progress bar supports two different modes: manual and automatic.

 *
In manual mode, you are responsible for showing, updating (via {@link #updateProgress}) and clearing the
 * progress bar as needed from your own code.  This method is most appropriate when you want to show progress
 * throughout an operation that has predictable points of interest at which you can update the control.

 *
In automatic mode, you simply call {@link #wait} and let the progress bar run indefinitely, only clearing it
 * once the operation is complete.  You can optionally have the progress bar wait for a specific amount of time
 * and then clear itself.  Automatic mode is most appropriate for timed operations or asynchronous operations in
 * which you have no need for indicating intermediate progress.

 * @cfg {Float} value A floating point value between 0 and 1 (e.g., .5, defaults to 0)
 * @cfg {String} text The progress bar text (defaults to '')
 * @cfg {Mixed} textEl The element to render the progress text to (defaults to the progress
 * bar's internal text element)
 * @cfg {String} id The progress bar element's id (defaults to an auto-generated id)
 * @xtype progress
 */
Ext.ProgressBar = Ext.extend(Ext.BoxComponent, {
   /**
    * @cfg {String} baseCls
    * The base CSS class to apply to the progress bar's wrapper element (defaults to 'x-progress')
    */
    baseCls : 'x-progress',

    /**
    * @cfg {Boolean} animate
    * True to animate the progress bar during transitions (defaults to false)
    */
    animate : false,

    // private
    waitTimer : null,

    // private
    initComponent : function(){
        Ext.ProgressBar.superclass.initComponent.call(this);
        this.addEvents(
            /**
             * @event update
             * Fires after each update interval
             * @param {Ext.ProgressBar} this
             * @param {Number} The current progress value
             * @param {String} The current progress text
             */
            "update"
        );
    },

    // private
    onRender : function(ct, position){
        var tpl = new Ext.Template(
            '
',
                '
',
                    '
',
                        '
',
                            '

',
                        '
',
                    '
',
                    '
',
                        '

',
                    '
',
                '
',
            '
'
        );

        this.el = position ? tpl.insertBefore(position, {cls: this.baseCls}, true)
            : tpl.append(ct, {cls: this.baseCls}, true);

        if(this.id){
            this.el.dom.id = this.id;
        }
        var inner = this.el.dom.firstChild;
        this.progressBar = Ext.get(inner.firstChild);

        if(this.textEl){
            //use an external text el
            this.textEl = Ext.get(this.textEl);
            delete this.textTopEl;
        }else{
            //setup our internal layered text els
            this.textTopEl = Ext.get(this.progressBar.dom.firstChild);
            var textBackEl = Ext.get(inner.childNodes[1]);
            this.textTopEl.setStyle("z-index", 99).addClass('x-hidden');
            this.textEl = new Ext.CompositeElement([this.textTopEl.dom.firstChild, textBackEl.dom.firstChild]);
            this.textEl.setWidth(inner.offsetWidth);
        }
        this.progressBar.setHeight(inner.offsetHeight);
    },

    // private
    afterRender : function(){
        Ext.ProgressBar.superclass.afterRender.call(this);
        if(this.value){
            this.updateProgress(this.value, this.text);
        }else{
            this.updateText(this.text);
        }
    },

    /**
     * Updates the progress bar value, and optionally its text.  If the text argument is not specified,
     * any existing text value will be unchanged.  To blank out existing text, pass ''.  Note that even
     * if the progress bar value exceeds 1, it will never automatically reset -- you are responsible for
     * determining when the progress is complete and calling {@link #reset} to clear and/or hide the control.
     * @param {Float} value (optional) A floating point value between 0 and 1 (e.g., .5, defaults to 0)
     * @param {String} text (optional) The string to display in the progress text element (defaults to '')
     * @param {Boolean} animate (optional) Whether to animate the transition of the progress bar. If this value is
     * not specified, the default for the class is used (default to false)
     * @return {Ext.ProgressBar} this
     */
    updateProgress : function(value, text, animate){
        this.value = value || 0;
        if(text){
            this.updateText(text);
        }
        if(this.rendered && !this.isDestroyed){
            var w = Math.floor(value*this.el.dom.firstChild.offsetWidth);
            this.progressBar.setWidth(w, animate === true || (animate !== false && this.animate));
            if(this.textTopEl){
                //textTopEl should be the same width as the bar so overflow will clip as the bar moves
                this.textTopEl.removeClass('x-hidden').setWidth(w);
            }
        }
        this.fireEvent('update', this, value, text);
        return this;
    },

    /**
     * Initiates an auto-updating progress bar.  A duration can be specified, in which case the progress
     * bar will automatically reset after a fixed amount of time and optionally call a callback function
     * if specified.  If no duration is passed in, then the progress bar will run indefinitely and must
     * be manually cleared by calling {@link #reset}.  The wait method accepts a config object with
     * the following properties:
     *
Property   Type          Description
---------- ------------  ----------------------------------------------------------------------
duration   Number        The length of time in milliseconds that the progress bar should
                         run before resetting itself (defaults to undefined, in which case it
                         will run indefinitely until reset is called)
interval   Number        The length of time in milliseconds between each progress update
                         (defaults to 1000 ms)
animate    Boolean       Whether to animate the transition of the progress bar. If this value is
                         not specified, the default for the class is used.
increment  Number        The number of progress update segments to display within the progress
                         bar (defaults to 10).  If the bar reaches the end and is still
                         updating, it will automatically wrap back to the beginning.
text       String        Optional text to display in the progress bar element (defaults to '').
fn         Function      A callback function to execute after the progress bar finishes auto-
                         updating.  The function will be called with no arguments.  This function
                         will be ignored if duration is not specified since in that case the
                         progress bar can only be stopped programmatically, so any required function
                         should be called by the same code after it resets the progress bar.
scope      Object        The scope that is passed to the callback function (only applies when
                         duration and fn are both passed).

         *
         * Example usage:
         *

var p = new Ext.ProgressBar({
   renderTo: 'my-el'
});

//Wait for 5 seconds, then update the status el (progress bar will auto-reset)
p.wait({
   interval: 100, //bar will move fast!
   duration: 5000,
   increment: 15,
   text: 'Updating...',
   scope: this,
   fn: function(){
      Ext.fly('status').update('Done!');
   }
});

//Or update indefinitely until some async action completes, then reset manually
p.wait();
myAction.on('complete', function(){
    p.reset();
    Ext.fly('status').update('Done!');
});

     * @param {Object} config (optional) Configuration options
     * @return {Ext.ProgressBar} this
     */
    wait : function(o){
        if(!this.waitTimer){
            var scope = this;
            o = o || {};
            this.updateText(o.text);
            this.waitTimer = Ext.TaskMgr.start({
                run: function(i){
                    var inc = o.increment || 10;
                    i -= 1;
                    this.updateProgress(((((i+inc)%inc)+1)*(100/inc))*0.01, null, o.animate);
                },
                interval: o.interval || 1000,
                duration: o.duration,
                onStop: function(){
                    if(o.fn){
                        o.fn.apply(o.scope || this);
                    }
                    this.reset();
                },
                scope: scope
            });
        }
        return this;
    },

    /**
     * Returns true if the progress bar is currently in a {@link #wait} operation
     * @return {Boolean} True if waiting, else false
     */
    isWaiting : function(){
        return this.waitTimer !== null;
    },

    /**
     * Updates the progress bar text.  If specified, textEl will be updated, otherwise the progress
     * bar itself will display the updated text.
     * @param {String} text (optional) The string to display in the progress text element (defaults to '')
     * @return {Ext.ProgressBar} this
     */
    updateText : function(text){
        this.text = text || ' ';
        if(this.rendered){
            this.textEl.update(this.text);
        }
        return this;
    },

    /**
     * Synchronizes the inner bar width to the proper proportion of the total componet width based
     * on the current progress {@link #value}.  This will be called automatically when the ProgressBar
     * is resized by a layout, but if it is rendered auto width, this method can be called from
     * another resize handler to sync the ProgressBar if necessary.
     */
    syncProgressBar : function(){
        if(this.value){
            this.updateProgress(this.value, this.text);
        }
        return this;
    },

    /**
     * Sets the size of the progress bar.
     * @param {Number} width The new width in pixels
     * @param {Number} height The new height in pixels
     * @return {Ext.ProgressBar} this
     */
    setSize : function(w, h){
        Ext.ProgressBar.superclass.setSize.call(this, w, h);
        if(this.textTopEl){
            var inner = this.el.dom.firstChild;
            this.textEl.setSize(inner.offsetWidth, inner.offsetHeight);
        }
        this.syncProgressBar();
        return this;
    },

    /**
     * Resets the progress bar value to 0 and text to empty string.  If hide = true, the progress
     * bar will also be hidden (using the {@link #hideMode} property internally).
     * @param {Boolean} hide (optional) True to hide the progress bar (defaults to false)
     * @return {Ext.ProgressBar} this
     */
    reset : function(hide){
        this.updateProgress(0);
        if(this.textTopEl){
            this.textTopEl.addClass('x-hidden');
        }
        this.clearTimer();
        if(hide === true){
            this.hide();
        }
        return this;
    },

    // private
    clearTimer : function(){
        if(this.waitTimer){
            this.waitTimer.onStop = null; //prevent recursion
            Ext.TaskMgr.stop(this.waitTimer);
            this.waitTimer = null;
        }
    },

    onDestroy: function(){
        this.clearTimer();
        if(this.rendered){
            if(this.textEl.isComposite){
                this.textEl.clear();
            }
            Ext.destroyMembers(this, 'textEl', 'progressBar', 'textTopEl');
        }
        Ext.ProgressBar.superclass.onDestroy.call(this);
    }
});
Ext.reg('progress', Ext.ProgressBar);


The source code

/*!
 * licensing@extjs.com
 * http://www.extjs.com/license
 */

/**
 * @class Ext.grid.PropertyRecord
 * A specific {@link Ext.data.Record} type that represents a name/value pair and is made to work with the
 * {@link Ext.grid.PropertyGrid}.  Typically, PropertyRecords do not need to be created directly as they can be
 * created implicitly by simply using the appropriate data configs either via the {@link Ext.grid.PropertyGrid#source}
 * config property or by calling {@link Ext.grid.PropertyGrid#setSource}.  However, if the need arises, these records
 * can also be created explicitly as shwon below.  Example usage:
 *

var rec = new Ext.grid.PropertyRecord({
    name: 'Birthday',
    value: new Date(Date.parse('05/26/1972'))
});
// Add record to an already populated grid
grid.store.addSorted(rec);

 * @constructor
 * @param {Object} config A data object in the format: {name: [name], value: [value]}.  The specified value's type
 * will be read automatically by the grid to determine the type of editor to use when displaying it.
 */
Ext.grid.PropertyRecord = Ext.data.Record.create([
    {name:'name',type:'string'}, 'value'
]);

/**
 * @class Ext.grid.PropertyStore
 * @extends Ext.util.Observable
 * A custom wrapper for the {@link Ext.grid.PropertyGrid}'s {@link Ext.data.Store}. This class handles the mapping
 * between the custom data source objects supported by the grid and the {@link Ext.grid.PropertyRecord} format
 * required for compatibility with the underlying store. Generally this class should not need to be used directly --
 * the grid's data should be accessed from the underlying store via the {@link #store} property.
 * @constructor
 * @param {Ext.grid.Grid} grid The grid this store will be bound to
 * @param {Object} source The source data config object
 */
Ext.grid.PropertyStore = Ext.extend(Ext.util.Observable, {

    constructor : function(grid, source){
        this.grid = grid;
        this.store = new Ext.data.Store({
            recordType : Ext.grid.PropertyRecord
        });
        this.store.on('update', this.onUpdate,  this);
        if(source){
            this.setSource(source);
        }
        Ext.grid.PropertyStore.superclass.constructor.call(this);
    },

    // protected - should only be called by the grid.  Use grid.setSource instead.
    setSource : function(o){
        this.source = o;
        this.store.removeAll();
        var data = [];
        for(var k in o){
            if(this.isEditableValue(o[k])){
                data.push(new Ext.grid.PropertyRecord({name: k, value: o[k]}, k));
            }
        }
        this.store.loadRecords({records: data}, {}, true);
    },

    // private
    onUpdate : function(ds, record, type){
        if(type == Ext.data.Record.EDIT){
            var v = record.data.value;
            var oldValue = record.modified.value;
            if(this.grid.fireEvent('beforepropertychange', this.source, record.id, v, oldValue) !== false){
                this.source[record.id] = v;
                record.commit();
                this.grid.fireEvent('propertychange', this.source, record.id, v, oldValue);
            }else{
                record.reject();
            }
        }
    },

    // private
    getProperty : function(row){
       return this.store.getAt(row);
    },

    // private
    isEditableValue: function(val){
        return Ext.isPrimitive(val) || Ext.isDate(val);
    },

    // private
    setValue : function(prop, value, create){
        var r = this.getRec(prop);
        if(r){
            r.set('value', value);
            this.source[prop] = value;
        }else if(create){
            // only create if specified.
            this.source[prop] = value;
            r = new Ext.grid.PropertyRecord({name: prop, value: value}, prop);
            this.store.add(r);

        }
    },

    // private
    remove : function(prop){
        var r = this.getRec(prop);
        if(r){
            this.store.remove(r);
            delete this.source[prop];
        }
    },

    // private
    getRec : function(prop){
        return this.store.getById(prop);
    },

    // protected - should only be called by the grid.  Use grid.getSource instead.
    getSource : function(){
        return this.source;
    }
});

/**
 * @class Ext.grid.PropertyColumnModel
 * @extends Ext.grid.ColumnModel
 * A custom column model for the {@link Ext.grid.PropertyGrid}.  Generally it should not need to be used directly.
 * @constructor
 * @param {Ext.grid.Grid} grid The grid this store will be bound to
 * @param {Object} source The source data config object
 */
Ext.grid.PropertyColumnModel = Ext.extend(Ext.grid.ColumnModel, {
    // private - strings used for locale support
    nameText : 'Name',
    valueText : 'Value',
    dateFormat : 'm/j/Y',
    trueText: 'true',
    falseText: 'false',

    constructor : function(grid, store){
        var g = Ext.grid,
            f = Ext.form;

        this.grid = grid;
        g.PropertyColumnModel.superclass.constructor.call(this, [
            {header: this.nameText, width:50, sortable: true, dataIndex:'name', id: 'name', menuDisabled:true},
            {header: this.valueText, width:50, resizable:false, dataIndex: 'value', id: 'value', menuDisabled:true}
        ]);
        this.store = store;

        var bfield = new f.Field({
            autoCreate: {tag: 'select', children: [
                {tag: 'option', value: 'true', html: this.trueText},
                {tag: 'option', value: 'false', html: this.falseText}
            ]},
            getValue : function(){
                return this.el.dom.value == 'true';
            }
        });
        this.editors = {
            'date' : new g.GridEditor(new f.DateField({selectOnFocus:true})),
            'string' : new g.GridEditor(new f.TextField({selectOnFocus:true})),
            'number' : new g.GridEditor(new f.NumberField({selectOnFocus:true, style:'text-align:left;'})),
            'boolean' : new g.GridEditor(bfield, {
                autoSize: 'both'
            })
        };
        this.renderCellDelegate = this.renderCell.createDelegate(this);
        this.renderPropDelegate = this.renderProp.createDelegate(this);
    },

    // private
    renderDate : function(dateVal){
        return dateVal.dateFormat(this.dateFormat);
    },

    // private
    renderBool : function(bVal){
        return this[bVal ? 'trueText' : 'falseText'];
    },

    // private
    isCellEditable : function(colIndex, rowIndex){
        return colIndex == 1;
    },

    // private
    getRenderer : function(col){
        return col == 1 ?
            this.renderCellDelegate : this.renderPropDelegate;
    },

    // private
    renderProp : function(v){
        return this.getPropertyName(v);
    },

    // private
    renderCell : function(val, meta, rec){
        var renderer = this.grid.customRenderers[rec.get('name')];
        if(renderer){
            return renderer.apply(this, arguments);
        }
        var rv = val;
        if(Ext.isDate(val)){
            rv = this.renderDate(val);
        }else if(typeof val == 'boolean'){
            rv = this.renderBool(val);
        }
        return Ext.util.Format.htmlEncode(rv);
    },

    // private
    getPropertyName : function(name){
        var pn = this.grid.propertyNames;
        return pn && pn[name] ? pn[name] : name;
    },

    // private
    getCellEditor : function(colIndex, rowIndex){
        var p = this.store.getProperty(rowIndex),
            n = p.data.name,
            val = p.data.value;
        if(this.grid.customEditors[n]){
            return this.grid.customEditors[n];
        }
        if(Ext.isDate(val)){
            return this.editors.date;
        }else if(typeof val == 'number'){
            return this.editors.number;
        }else if(typeof val == 'boolean'){
            return this.editors['boolean'];
        }else{
            return this.editors.string;
        }
    },

    // inherit docs
    destroy : function(){
        Ext.grid.PropertyColumnModel.superclass.destroy.call(this);
        for(var ed in this.editors){
            Ext.destroy(this.editors[ed]);
        }
    }
});

/**
 * @class Ext.grid.PropertyGrid
 * @extends Ext.grid.EditorGridPanel
 * A specialized grid implementation intended to mimic the traditional property grid as typically seen in
 * development IDEs.  Each row in the grid represents a property of some object, and the data is stored
 * as a set of name/value pairs in {@link Ext.grid.PropertyRecord}s.  Example usage:
 *

var grid = new Ext.grid.PropertyGrid({
    title: 'Properties Grid',
    autoHeight: true,
    width: 300,
    renderTo: 'grid-ct',
    source: {
        "(name)": "My Object",
        "Created": new Date(Date.parse('10/15/2006')),
        "Available": false,
        "Version": .01,
        "Description": "A test object"
    }
});

 * @constructor
 * @param {Object} config The grid config object
 */
Ext.grid.PropertyGrid = Ext.extend(Ext.grid.EditorGridPanel, {

/**
    * @cfg {Object} propertyNames An object containing property name/display name pairs.
    * If specified, the display name will be shown in the name column instead of the property name.
    */

/**
    * @cfg {Object} source A data object to use as the data source of the grid (see {@link #setSource} for details).
    */

/**
    * @cfg {Object} customEditors An object containing name/value pairs of custom editor type definitions that allow
    * the grid to support additional types of editable fields.  By default, the grid supports strongly-typed editing
    * of strings, dates, numbers and booleans using built-in form editors, but any custom type can be supported and
    * associated with a custom input control by specifying a custom editor.  The name of the editor
    * type should correspond with the name of the property that will use the editor.  Example usage:
    *

var grid = new Ext.grid.PropertyGrid({
    ...
    customEditors: {
        'Start Time': new Ext.grid.GridEditor(new Ext.form.TimeField({selectOnFocus:true}))
    },
    source: {
        'Start Time': '10:00 AM'
    }
});

    */

/**
    * @cfg {Object} source A data object to use as the data source of the grid (see {@link #setSource} for details).
    */

/**
    * @cfg {Object} customRenderers An object containing name/value pairs of custom renderer type definitions that allow
    * the grid to support custom rendering of fields.  By default, the grid supports strongly-typed rendering
    * of strings, dates, numbers and booleans using built-in form editors, but any custom type can be supported and
    * associated with the type of the value.  The name of the renderer type should correspond with the name of the property
    * that it will render.  Example usage:
    *

var grid = new Ext.grid.PropertyGrid({
    ...
    customRenderers: {
        Available: function(v){
            if(v){
                return 'Yes';
            }else{
                return 'No';
            }
        }
    },
    source: {
        Available: true
    }
});

    */

    // private config overrides
    enableColumnMove:false,
    stripeRows:false,
    trackMouseOver: false,
    clicksToEdit:1,
    enableHdMenu : false,
    viewConfig : {
        forceFit:true
    },

    // private
    initComponent : function(){
        this.customRenderers = this.customRenderers || {};
        this.customEditors = this.customEditors || {};
        this.lastEditRow = null;
        var store = new Ext.grid.PropertyStore(this);
        this.propStore = store;
        var cm = new Ext.grid.PropertyColumnModel(this, store);
        store.store.sort('name', 'ASC');
        this.addEvents(

/**
             * @event beforepropertychange
             * Fires before a property value changes.  Handlers can return false to cancel the property change
             * (this will internally call {@link Ext.data.Record#reject} on the property's record).
             * @param {Object} source The source data object for the grid (corresponds to the same object passed in
             * as the {@link #source} config property).
             * @param {String} recordId The record's id in the data store
             * @param {Mixed} value The current edited property value
             * @param {Mixed} oldValue The original property value prior to editing
             */
            'beforepropertychange',

/**
             * @event propertychange
             * Fires after a property value has changed.
             * @param {Object} source The source data object for the grid (corresponds to the same object passed in
             * as the {@link #source} config property).
             * @param {String} recordId The record's id in the data store
             * @param {Mixed} value The current edited property value
             * @param {Mixed} oldValue The original property value prior to editing
             */
            'propertychange'
        );
        this.cm = cm;
        this.ds = store.store;
        Ext.grid.PropertyGrid.superclass.initComponent.call(this);

        this.mon(this.selModel, 'beforecellselect', function(sm, rowIndex, colIndex){
            if(colIndex === 0){
                this.startEditing.defer(200, this, [rowIndex, 1]);
                return false;
            }
        }, this);
    },

    // private
    onRender : function(){
        Ext.grid.PropertyGrid.superclass.onRender.apply(this, arguments);

        this.getGridEl().addClass('x-props-grid');
    },

    // private
    afterRender: function(){
        Ext.grid.PropertyGrid.superclass.afterRender.apply(this, arguments);
        if(this.source){
            this.setSource(this.source);
        }
    },

/**
     * Sets the source data object containing the property data.  The data object can contain one or more name/value
     * pairs representing all of the properties of an object to display in the grid, and this data will automatically
     * be loaded into the grid's {@link #store}.  The values should be supplied in the proper data type if needed,
     * otherwise string type will be assumed.  If the grid already contains data, this method will replace any
     * existing data.  See also the {@link #source} config value.  Example usage:
     *

grid.setSource({
    "(name)": "My Object",
    "Created": new Date(Date.parse('10/15/2006')),  // date type
    "Available": false,  // boolean type
    "Version": .01,      // decimal type
    "Description": "A test object"
});

     * @param {Object} source The data object
     */
    setSource : function(source){
        this.propStore.setSource(source);
    },

/**
     * Gets the source data object containing the property data.  See {@link #setSource} for details regarding the
     * format of the data object.
     * @return {Object} The data object
     */
    getSource : function(){
        return this.propStore.getSource();
    },

/**
     * Sets the value of a property.
     * @param {String} prop The name of the property to set
     * @param {Mixed} value The value to test
     * @param {Boolean} create (Optional) True to create the property if it doesn't already exist. Defaults to false.
     */
    setProperty : function(prop, value, create){
        this.propStore.setValue(prop, value, create);
    },

/**
     * Removes a property from the grid.
     * @param {String} prop The name of the property to remove
     */
    removeProperty : function(prop){
        this.propStore.remove(prop);
    }

/**
     * @cfg store
     * @hide
     */

/**
     * @cfg colModel
     * @hide
     */

/**
     * @cfg cm
     * @hide
     */

/**
     * @cfg columns
     * @hide
     */
});
Ext.reg("propertygrid", Ext.grid.PropertyGrid);


The source code

/*!
 * licensing@extjs.com
 * http://www.extjs.com/license
 */
(function(){

var libFlyweight,
    version = Prototype.Version.split('.'),
    mouseEnterSupported = (parseInt(version[0]) >= 2) || (parseInt(version[1]) >= 7) || (parseInt(version[2]) >= 1),
    mouseCache = {},
    elContains = function(parent, child) {
       if(parent && parent.firstChild){
         while(child) {
            if(child === parent) {
                return true;
            }
            child = child.parentNode;
            if(child && (child.nodeType != 1)) {
                child = null;
            }
          }
        }
        return false;
    },
    checkRelatedTarget = function(e) {
        return !elContains(e.currentTarget, Ext.lib.Event.getRelatedTarget(e));
    };

Ext.lib.Dom = {
    getViewWidth : function(full){
        return full ? this.getDocumentWidth() : this.getViewportWidth();
    },

    getViewHeight : function(full){
        return full ? this.getDocumentHeight() : this.getViewportHeight();
    },

    getDocumentHeight: function() { // missing from prototype?
        var scrollHeight = (document.compatMode != "CSS1Compat") ? document.body.scrollHeight : document.documentElement.scrollHeight;
        return Math.max(scrollHeight, this.getViewportHeight());
    },

    getDocumentWidth: function() { // missing from prototype?
        var scrollWidth = (document.compatMode != "CSS1Compat") ? document.body.scrollWidth : document.documentElement.scrollWidth;
        return Math.max(scrollWidth, this.getViewportWidth());
    },

    getViewportHeight: function() { // missing from prototype?
        var height = self.innerHeight;
        var mode = document.compatMode;

        if ( (mode || Ext.isIE) && !Ext.isOpera ) {
            height = (mode == "CSS1Compat") ?
                    document.documentElement.clientHeight : // Standards
                    document.body.clientHeight; // Quirks
        }

        return height;
    },

    getViewportWidth: function() { // missing from prototype?
        var width = self.innerWidth;  // Safari
        var mode = document.compatMode;

        if (mode || Ext.isIE) { // IE, Gecko, Opera
            width = (mode == "CSS1Compat") ?
                    document.documentElement.clientWidth : // Standards
                    document.body.clientWidth; // Quirks
        }
        return width;
    },

    isAncestor : function(p, c){ // missing from prototype?
        var ret = false;

        p = Ext.getDom(p);
        c = Ext.getDom(c);
        if (p && c) {
            if (p.contains) {
                return p.contains(c);
            } else if (p.compareDocumentPosition) {
                return !!(p.compareDocumentPosition(c) & 16);
            } else {
                while (c = c.parentNode) {
                    ret = c == p || ret;
                }
            }
        }
        return ret;
    },

    getRegion : function(el){
        return Ext.lib.Region.getRegion(el);
    },

    getY : function(el){
        return this.getXY(el)[1];
    },

    getX : function(el){
        return this.getXY(el)[0];
    },

    getXY : function(el){ // this initially used Position.cumulativeOffset but it is not accurate enough
        var p, pe, b, scroll, bd = (document.body || document.documentElement);
        el = Ext.getDom(el);

        if(el == bd){
            return [0, 0];
        }

        if (el.getBoundingClientRect) {
            b = el.getBoundingClientRect();
            scroll = fly(document).getScroll();
            return [Math.round(b.left + scroll.left), Math.round(b.top + scroll.top)];
        }
        var x = 0, y = 0;

        p = el;

        var hasAbsolute = fly(el).getStyle("position") == "absolute";

        while (p) {

            x += p.offsetLeft;
            y += p.offsetTop;

            if (!hasAbsolute && fly(p).getStyle("position") == "absolute") {
                hasAbsolute = true;
            }

            if (Ext.isGecko) {
                pe = fly(p);

                var bt = parseInt(pe.getStyle("borderTopWidth"), 10) || 0;
                var bl = parseInt(pe.getStyle("borderLeftWidth"), 10) || 0;

                x += bl;
                y += bt;

                if (p != el && pe.getStyle('overflow') != 'visible') {
                    x += bl;
                    y += bt;
                }
            }
            p = p.offsetParent;
        }

        if (Ext.isSafari && hasAbsolute) {
            x -= bd.offsetLeft;
            y -= bd.offsetTop;
        }

        if (Ext.isGecko && !hasAbsolute) {
            var dbd = fly(bd);
            x += parseInt(dbd.getStyle("borderLeftWidth"), 10) || 0;
            y += parseInt(dbd.getStyle("borderTopWidth"), 10) || 0;
        }

        p = el.parentNode;
        while (p && p != bd) {
            if (!Ext.isOpera || (p.tagName != 'TR' && fly(p).getStyle("display") != "inline")) {
                x -= p.scrollLeft;
                y -= p.scrollTop;
            }
            p = p.parentNode;
        }
        return [x, y];
    },

    setXY : function(el, xy){ // this initially used Position.cumulativeOffset but it is not accurate enough
        el = Ext.fly(el, '_setXY');
        el.position();
        var pts = el.translatePoints(xy);
        if(xy[0] !== false){
            el.dom.style.left = pts.left + "px";
        }
        if(xy[1] !== false){
            el.dom.style.top = pts.top + "px";
        }
    },

    setX : function(el, x){
        this.setXY(el, [x, false]);
    },

    setY : function(el, y){
        this.setXY(el, [false, y]);
    }
};

Ext.lib.Event = {
    getPageX : function(e){
        return Event.pointerX(e.browserEvent || e);
    },

    getPageY : function(e){
        return Event.pointerY(e.browserEvent || e);
    },

    getXY : function(e){
        e = e.browserEvent || e;
        return [Event.pointerX(e), Event.pointerY(e)];
    },

    getTarget : function(e){
        return Event.element(e.browserEvent || e);
    },

    resolveTextNode: Ext.isGecko ? function(node){
        if(!node){
            return;
        }
        var s = HTMLElement.prototype.toString.call(node);
        if(s == '[xpconnect wrapped native prototype]' || s == '[object XULElement]'){
            return;
        }
        return node.nodeType == 3 ? node.parentNode : node;
    } : function(node){
        return node && node.nodeType == 3 ? node.parentNode : node;
    },

    getRelatedTarget: function(ev) { // missing from prototype?
        ev = ev.browserEvent || ev;
        var t = ev.relatedTarget;
        if (!t) {
            if (ev.type == "mouseout") {
                t = ev.toElement;
            } else if (ev.type == "mouseover") {
                t = ev.fromElement;
            }
        }

        return this.resolveTextNode(t);
    },

    on : function(el, eventName, fn){
        if((eventName == 'mouseenter' || eventName == 'mouseleave') && !mouseEnterSupported){
            var item = mouseCache[el.id] || (mouseCache[el.id] = {});
            item[eventName] = fn;
            fn = fn.createInterceptor(checkRelatedTarget);
            eventName = (eventName == 'mouseenter') ? 'mouseover' : 'mouseout';
        }
        Event.observe(el, eventName, fn, false);
    },

    un : function(el, eventName, fn){
        if((eventName == 'mouseenter' || eventName == 'mouseleave') && !mouseEnterSupported){
            var item = mouseCache[el.id],
                ev = item && item[eventName];

            if(ev){
                fn = ev.fn;
                delete item[eventName];
                eventName = (eventName == 'mouseenter') ? 'mouseover' : 'mouseout';
            }
        }
        Event.stopObserving(el, eventName, fn, false);
    },

    purgeElement : function(el){
        // no equiv?
    },

    preventDefault : function(e){   // missing from prototype?
        e = e.browserEvent || e;
        if(e.preventDefault) {
            e.preventDefault();
        } else {
            e.returnValue = false;
        }
    },

    stopPropagation : function(e){   // missing from prototype?
        e = e.browserEvent || e;
        if(e.stopPropagation) {
            e.stopPropagation();
        } else {
            e.cancelBubble = true;
        }
    },

    stopEvent : function(e){
        Event.stop(e.browserEvent || e);
    },

    onAvailable : function(id, fn, scope){  // no equiv
        var start = new Date(), iid;
        var f = function(){
            if(start.getElapsed() > 10000){
                clearInterval(iid);
            }
            var el = document.getElementById(id);
            if(el){
                clearInterval(iid);
                fn.call(scope||window, el);
            }
        };
        iid = setInterval(f, 50);
    }
};

Ext.lib.Ajax = function(){
    var createSuccess = function(cb){
         return cb.success ? function(xhr){
            cb.success.call(cb.scope||window, createResponse(cb, xhr));
         } : Ext.emptyFn;
    };
    var createFailure = function(cb){
         return cb.failure ? function(xhr){
            cb.failure.call(cb.scope||window, createResponse(cb, xhr));
         } : Ext.emptyFn;
    };
    var createResponse = function(cb, xhr){
        var headerObj = {},
            headerStr,
            t,
            s;

        try {
            headerStr = xhr.getAllResponseHeaders();
            Ext.each(headerStr.replace(/\r\n/g, '\n').split('\n'), function(v){
                t = v.indexOf(':');
                if(t >= 0){
                    s = v.substr(0, t).toLowerCase();
                    if(v.charAt(t + 1) == ' '){
                        ++t;
                    }
                    headerObj[s] = v.substr(t + 1);
                }
            });
        } catch(e) {}

        return {
            responseText: xhr.responseText,
            responseXML : xhr.responseXML,
            argument: cb.argument,
            status: xhr.status,
            statusText: xhr.statusText,
            getResponseHeader : function(header){return headerObj[header.toLowerCase()];},
            getAllResponseHeaders : function(){return headerStr}
        };
    };
    return {
        request : function(method, uri, cb, data, options){
            var o = {
                method: method,
                parameters: data || '',
                timeout: cb.timeout,
                onSuccess: createSuccess(cb),
                onFailure: createFailure(cb)
            };
            if(options){
                var hs = options.headers;
                if(hs){
                    o.requestHeaders = hs;
                }
                if(options.xmlData){
                    method = (method ? method : (options.method ? options.method : 'POST'));
                    if (!hs || !hs['Content-Type']){
                        o.contentType = 'text/xml';
                    }
                    o.postBody = options.xmlData;
                    delete o.parameters;
                }
                if(options.jsonData){
                    method = (method ? method : (options.method ? options.method : 'POST'));
                    if (!hs || !hs['Content-Type']){
                        o.contentType = 'application/json';
                    }
                    o.postBody = typeof options.jsonData == 'object' ? Ext.encode(options.jsonData) : options.jsonData;
                    delete o.parameters;
                }
            }
            new Ajax.Request(uri, o);
        },

        formRequest : function(form, uri, cb, data, isUpload, sslUri){
            new Ajax.Request(uri, {
                method: Ext.getDom(form).method ||'POST',
                parameters: Form.serialize(form)+(data?'&'+data:''),
                timeout: cb.timeout,
                onSuccess: createSuccess(cb),
                onFailure: createFailure(cb)
            });
        },

        isCallInProgress : function(trans){
            return false;
        },

        abort : function(trans){
            return false;
        },

        serializeForm : function(form){
            return Form.serialize(form.dom||form);
        }
    };
}();

Ext.lib.Anim = function(){

    var easings = {
        easeOut: function(pos) {
            return 1-Math.pow(1-pos,2);
        },
        easeIn: function(pos) {
            return 1-Math.pow(1-pos,2);
        }
    };
    var createAnim = function(cb, scope){
        return {
            stop : function(skipToLast){
                this.effect.cancel();
            },

            isAnimated : function(){
                return this.effect.state == 'running';
            },

            proxyCallback : function(){
                Ext.callback(cb, scope);
            }
        };
    };
    return {
        scroll : function(el, args, duration, easing, cb, scope){
            // not supported so scroll immediately?
            var anim = createAnim(cb, scope);
            el = Ext.getDom(el);
            if(typeof args.scroll.to[0] == 'number'){
                el.scrollLeft = args.scroll.to[0];
            }
            if(typeof args.scroll.to[1] == 'number'){
                el.scrollTop = args.scroll.to[1];
            }
            anim.proxyCallback();
            return anim;
        },

        motion : function(el, args, duration, easing, cb, scope){
            return this.run(el, args, duration, easing, cb, scope);
        },

        color : function(el, args, duration, easing, cb, scope){
            return this.run(el, args, duration, easing, cb, scope);
        },

        run : function(el, args, duration, easing, cb, scope, type){
            var o = {};
            for(var k in args){
                switch(k){   // scriptaculous doesn't support, so convert these
                    case 'points':
                        var by, pts, e = Ext.fly(el, '_animrun');
                        e.position();
                        if(by = args.points.by){
                            var xy = e.getXY();
                            pts = e.translatePoints([xy[0]+by[0], xy[1]+by[1]]);
                        }else{
                            pts = e.translatePoints(args.points.to);
                        }
                        o.left = pts.left+'px';
                        o.top = pts.top+'px';
                    break;
                    case 'width':
                        o.width = args.width.to+'px';
                    break;
                    case 'height':
                        o.height = args.height.to+'px';
                    break;
                    case 'opacity':
                        o.opacity = String(args.opacity.to);
                    break;
                    default:
                        o[k] = String(args[k].to);
                    break;
                }
            }
            var anim = createAnim(cb, scope);
            anim.effect = new Effect.Morph(Ext.id(el), {
                duration: duration,
                afterFinish: anim.proxyCallback,
                transition: easings[easing] || Effect.Transitions.linear,
                style: o
            });
            return anim;
        }
    };
}();

// all lib flyweight calls use their own flyweight to prevent collisions with developer flyweights
function fly(el){
    if(!libFlyweight){
        libFlyweight = new Ext.Element.Flyweight();
    }
    libFlyweight.dom = el;
    return libFlyweight;
}

Ext.lib.Region = function(t, r, b, l) {
    this.top = t;
    this[1] = t;
    this.right = r;
    this.bottom = b;
    this.left = l;
    this[0] = l;
};

Ext.lib.Region.prototype = {
    contains : function(region) {
        return ( region.left   >= this.left   &&
                 region.right  <= this.right  &&
                 region.top    >= this.top    &&
                 region.bottom <= this.bottom    );

    },

    getArea : function() {
        return ( (this.bottom - this.top) * (this.right - this.left) );
    },

    intersect : function(region) {
        var t = Math.max( this.top,    region.top    );
        var r = Math.min( this.right,  region.right  );
        var b = Math.min( this.bottom, region.bottom );
        var l = Math.max( this.left,   region.left   );

        if (b >= t && r >= l) {
            return new Ext.lib.Region(t, r, b, l);
        } else {
            return null;
        }
    },
    union : function(region) {
        var t = Math.min( this.top,    region.top    );
        var r = Math.max( this.right,  region.right  );
        var b = Math.max( this.bottom, region.bottom );
        var l = Math.min( this.left,   region.left   );

        return new Ext.lib.Region(t, r, b, l);
    },

    constrainTo : function(r) {
            this.top = this.top.constrain(r.top, r.bottom);
            this.bottom = this.bottom.constrain(r.top, r.bottom);
            this.left = this.left.constrain(r.left, r.right);
            this.right = this.right.constrain(r.left, r.right);
            return this;
    },

    adjust : function(t, l, b, r){
        this.top += t;
        this.left += l;
        this.right += r;
        this.bottom += b;
        return this;
    }
};

Ext.lib.Region.getRegion = function(el) {
    var p = Ext.lib.Dom.getXY(el);

    var t = p[1];
    var r = p[0] + el.offsetWidth;
    var b = p[1] + el.offsetHeight;
    var l = p[0];

    return new Ext.lib.Region(t, r, b, l);
};

Ext.lib.Point = function(x, y) {
   if (Ext.isArray(x)) {
      y = x[1];
      x = x[0];
   }
    this.x = this.right = this.left = this[0] = x;
    this.y = this.top = this.bottom = this[1] = y;
};

Ext.lib.Point.prototype = new Ext.lib.Region();

// prevent IE leaks
if(Ext.isIE) {
    function fnCleanUp() {
        var p = Function.prototype;
        delete p.createSequence;
        delete p.defer;
        delete p.createDelegate;
        delete p.createCallback;
        delete p.createInterceptor;

        window.detachEvent("onunload", fnCleanUp);
    }
    window.attachEvent("onunload", fnCleanUp);
}
})();


The source code

/*!
 * licensing@extjs.com
 * http://www.extjs.com/license
 */

/**
 * @class Ext.direct.Provider
 * @extends Ext.util.Observable
 *
Ext.direct.Provider is an abstract class meant to be extended.

 *
 *
For example ExtJs implements the following subclasses:

 *

Provider
|
+---{@link Ext.direct.JsonProvider JsonProvider}
    |
    +---{@link Ext.direct.PollingProvider PollingProvider}
    |
    +---{@link Ext.direct.RemotingProvider RemotingProvider}
 *

 * @abstract
 */
Ext.direct.Provider = Ext.extend(Ext.util.Observable, {

/**
     * @cfg {String} id
     * The unique id of the provider (defaults to an {@link Ext#id auto-assigned id}).
     * You should assign an id if you need to be able to access the provider later and you do
     * not have an object reference available, for example:
     *

Ext.Direct.addProvider(
    {
        type: 'polling',
        url:  'php/poll.php',
        id:   'poll-provider'
    }
);

var p = {@link Ext.Direct Ext.Direct}.{@link Ext.Direct#getProvider getProvider}('poll-provider');
p.disconnect();
     *

     */

/**
     * @cfg {Number} priority
     * Priority of the request. Lower is higher priority, 0 means "duplex" (always on).
     * All Providers default to 1 except for PollingProvider which defaults to 3.
     */
    priority: 1,

/**
     * @cfg {String} type
     * Required, undefined by default.  The type of provider specified
     * to {@link Ext.Direct Ext.Direct}.{@link Ext.Direct#addProvider addProvider} to create a
     * new Provider. Acceptable values by default are:

     *
  • polling : {@link Ext.direct.PollingProvider PollingProvider}
    •
     *
  • remoting : {@link Ext.direct.RemotingProvider RemotingProvider}
    •
     *

     */

    // private
    constructor : function(config){
        Ext.apply(this, config);
        this.addEvents(

/**
             * @event connect
             * Fires when the Provider connects to the server-side
             * @param {Ext.direct.Provider} provider The {@link Ext.direct.Provider Provider}.
             */
            'connect',

/**
             * @event disconnect
             * Fires when the Provider disconnects from the server-side
             * @param {Ext.direct.Provider} provider The {@link Ext.direct.Provider Provider}.
             */
            'disconnect',

/**
             * @event data
             * Fires when the Provider receives data from the server-side
             * @param {Ext.direct.Provider} provider The {@link Ext.direct.Provider Provider}.
             * @param {event} e The {@link Ext.Direct#eventTypes Ext.Direct.Event type} that occurred.
             */
            'data',

/**
             * @event exception
             * Fires when the Provider receives an exception from the server-side
             */
            'exception'
        );
        Ext.direct.Provider.superclass.constructor.call(this, config);
    },

/**
     * Returns whether or not the server-side is currently connected.
     * Abstract method for subclasses to implement.
     */
    isConnected: function(){
        return false;
    },

/**
     * Abstract methods for subclasses to implement.
     */
    connect: Ext.emptyFn,

/**
     * Abstract methods for subclasses to implement.
     */
    disconnect: Ext.emptyFn
});


The source code

/*!
 * licensing@extjs.com
 * http://www.extjs.com/license
 */

/**
 * @class Ext.state.Provider
 * Abstract base class for state provider implementations. This class provides methods
 * for encoding and decoding typed variables including dates and defines the
 * Provider interface.
 */
Ext.state.Provider = function(){

/**
     * @event statechange
     * Fires when a state change occurs.
     * @param {Provider} this This state provider
     * @param {String} key The state key which was changed
     * @param {String} value The encoded value for the state
     */
    this.addEvents("statechange");
    this.state = {};
    Ext.state.Provider.superclass.constructor.call(this);
};
Ext.extend(Ext.state.Provider, Ext.util.Observable, {

/**
     * Returns the current value for a key
     * @param {String} name The key name
     * @param {Mixed} defaultValue A default value to return if the key's value is not found
     * @return {Mixed} The state data
     */
    get : function(name, defaultValue){
        return typeof this.state[name] == "undefined" ?
            defaultValue : this.state[name];
    },

/**
     * Clears a value from the state
     * @param {String} name The key name
     */
    clear : function(name){
        delete this.state[name];
        this.fireEvent("statechange", this, name, null);
    },

/**
     * Sets the value for a key
     * @param {String} name The key name
     * @param {Mixed} value The value to set
     */
    set : function(name, value){
        this.state[name] = value;
        this.fireEvent("statechange", this, name, value);
    },

/**
     * Decodes a string previously encoded with {@link #encodeValue}.
     * @param {String} value The value to decode
     * @return {Mixed} The decoded value
     */
    decodeValue : function(cookie){
        var re = /^(a|n|d|b|s|o)\:(.*)$/;
        var matches = re.exec(unescape(cookie));
        if(!matches || !matches[1]) return; // non state cookie
        var type = matches[1];
        var v = matches[2];
        switch(type){
            case "n":
                return parseFloat(v);
            case "d":
                return new Date(Date.parse(v));
            case "b":
                return (v == "1");
            case "a":
                var all = [];
                if(v != ''){
                    Ext.each(v.split('^'), function(val){
                        all.push(this.decodeValue(val));
                    }, this);
                }
                return all;
           case "o":
                var all = {};
                if(v != ''){
                    Ext.each(v.split('^'), function(val){
                        var kv = val.split('=');
                        all[kv[0]] = this.decodeValue(kv[1]);
                    }, this);
                }
                return all;
           default:
                return v;
        }
    },

/**
     * Encodes a value including type information.  Decode with {@link #decodeValue}.
     * @param {Mixed} value The value to encode
     * @return {String} The encoded value
     */
    encodeValue : function(v){
        var enc;
        if(typeof v == "number"){
            enc = "n:" + v;
        }else if(typeof v == "boolean"){
            enc = "b:" + (v ? "1" : "0");
        }else if(Ext.isDate(v)){
            enc = "d:" + v.toGMTString();
        }else if(Ext.isArray(v)){
            var flat = "";
            for(var i = 0, len = v.length; i < len; i++){
                flat += this.encodeValue(v[i]);
                if(i != len-1) flat += "^";
            }
            enc = "a:" + flat;
        }else if(typeof v == "object"){
            var flat = "";
            for(var key in v){
                if(typeof v[key] != "function" && v[key] !== undefined){
                    flat += key + "=" + this.encodeValue(v[key]) + "^";
                }
            }
            enc = "o:" + flat.substring(0, flat.length-1);
        }else{
            enc = "s:" + v;
        }
        return escape(enc);
    }
});


The source code

/*!
 * licensing@extjs.com
 * http://www.extjs.com/license
 */

/**
 * @class Ext.QuickTip
 * @extends Ext.ToolTip
 * @xtype quicktip
 * A specialized tooltip class for tooltips that can be specified in markup and automatically managed by the global
 * {@link Ext.QuickTips} instance.  See the QuickTips class header for additional usage details and examples.
 * @constructor
 * Create a new Tip
 * @param {Object} config The configuration options
 */
Ext.QuickTip = Ext.extend(Ext.ToolTip, {

/**
     * @cfg {Mixed} target The target HTMLElement, Ext.Element or id to associate with this quicktip (defaults to the document).
     */

/**
     * @cfg {Boolean} interceptTitles True to automatically use the element's DOM title value if available (defaults to false).
     */
    interceptTitles : false,

    // private
    tagConfig : {
        namespace : "ext",
        attribute : "qtip",
        width : "qwidth",
        target : "target",
        title : "qtitle",
        hide : "hide",
        cls : "qclass",
        align : "qalign",
        anchor : "anchor"
    },

    // private
    initComponent : function(){
        this.target = this.target || Ext.getDoc();
        this.targets = this.targets || {};
        Ext.QuickTip.superclass.initComponent.call(this);
    },

/**
     * Configures a new quick tip instance and assigns it to a target element.  The following config values are
     * supported (for example usage, see the {@link Ext.QuickTips} class header):
     *

     *
  • autoHide
    •
     *
  • cls
    •
     *
  • dismissDelay (overrides the singleton value)
    •
     *
  • target (required)
    •
     *
  • text (required)
    •
     *
  • title
    •
     *
  • width

     * @param {Object} config The config object
     */
    register : function(config){
        var cs = Ext.isArray(config) ? config : arguments;
        for(var i = 0, len = cs.length; i < len; i++){
            var c = cs[i];
            var target = c.target;
            if(target){
                if(Ext.isArray(target)){
                    for(var j = 0, jlen = target.length; j < jlen; j++){
                        this.targets[Ext.id(target[j])] = c;
                    }
                } else{
                    this.targets[Ext.id(target)] = c;
                }
            }
        }
    },

/**
     * Removes this quick tip from its element and destroys it.
     * @param {String/HTMLElement/Element} el The element from which the quick tip is to be removed.
     */
    unregister : function(el){
        delete this.targets[Ext.id(el)];
    },

/**
     * Hides a visible tip or cancels an impending show for a particular element.
     * @param {String/HTMLElement/Element} el The element that is the target of the tip.
     */
    cancelShow: function(el){
        var at = this.activeTarget;
        el = Ext.get(el).dom;
        if(this.isVisible()){
            if(at && at.el == el){
                this.hide();
            }
        }else if(at && at.el == el){
            this.clearTimer('show');
        }
    },

    getTipCfg: function(e) {
        var t = e.getTarget(),
            ttp,
            cfg;
        if(this.interceptTitles && t.title && Ext.isString(t.title)){
            ttp = t.title;
            t.qtip = ttp;
            t.removeAttribute("title");
            e.preventDefault();
        }else{
            cfg = this.tagConfig;
            ttp = t.qtip || Ext.fly(t).getAttribute(cfg.attribute, cfg.namespace);
        }
        return ttp;
    },

    // private
    onTargetOver : function(e){
        if(this.disabled){
            return;
        }
        this.targetXY = e.getXY();
        var t = e.getTarget();
        if(!t || t.nodeType !== 1 || t == document || t == document.body){
            return;
        }
        if(this.activeTarget && ((t == this.activeTarget.el) || Ext.fly(this.activeTarget.el).contains(t))){
            this.clearTimer('hide');
            this.show();
            return;
        }
        if(t && this.targets[t.id]){
            this.activeTarget = this.targets[t.id];
            this.activeTarget.el = t;
            this.anchor = this.activeTarget.anchor;
            if(this.anchor){
                this.anchorTarget = t;
            }
            this.delayShow();
            return;
        }
        var ttp, et = Ext.fly(t), cfg = this.tagConfig, ns = cfg.namespace;
        if(ttp = this.getTipCfg(e)){
            var autoHide = et.getAttribute(cfg.hide, ns);
            this.activeTarget = {
                el: t,
                text: ttp,
                width: et.getAttribute(cfg.width, ns),
                autoHide: autoHide != "user" && autoHide !== 'false',
                title: et.getAttribute(cfg.title, ns),
                cls: et.getAttribute(cfg.cls, ns),
                align: et.getAttribute(cfg.align, ns)

            };
            this.anchor = et.getAttribute(cfg.anchor, ns);
            if(this.anchor){
                this.anchorTarget = t;
            }
            this.delayShow();
        }
    },

    // private
    onTargetOut : function(e){

        // If moving within the current target, and it does not have a new tip, ignore the mouseout
        if (this.activeTarget && e.within(this.activeTarget.el) && !this.getTipCfg(e)) {
            return;
        }

        this.clearTimer('show');
        if(this.autoHide !== false){
            this.delayHide();
        }
    },

    // inherit docs
    showAt : function(xy){
        var t = this.activeTarget;
        if(t){
            if(!this.rendered){
                this.render(Ext.getBody());
                this.activeTarget = t;
            }
            if(t.width){
                this.setWidth(t.width);
                this.body.setWidth(this.adjustBodyWidth(t.width - this.getFrameWidth()));
                this.measureWidth = false;
            } else{
                this.measureWidth = true;
            }
            this.setTitle(t.title || '');
            this.body.update(t.text);
            this.autoHide = t.autoHide;
            this.dismissDelay = t.dismissDelay || this.dismissDelay;
            if(this.lastCls){
                this.el.removeClass(this.lastCls);
                delete this.lastCls;
            }
            if(t.cls){
                this.el.addClass(t.cls);
                this.lastCls = t.cls;
            }
            if(this.anchor){
                this.constrainPosition = false;
            }else if(t.align){ // TODO: this doesn't seem to work consistently
                xy = this.el.getAlignToXY(t.el, t.align);
                this.constrainPosition = false;
            }else{
                this.constrainPosition = true;
            }
        }
        Ext.QuickTip.superclass.showAt.call(this, xy);
    },

    // inherit docs
    hide: function(){
        delete this.activeTarget;
        Ext.QuickTip.superclass.hide.call(this);
    }
});
Ext.reg('quicktip', Ext.QuickTip);


The source code

/*!
 * licensing@extjs.com
 * http://www.extjs.com/license
 */

/**
 * @class Ext.QuickTips
 *
Provides attractive and customizable tooltips for any element. The QuickTips
 * singleton is used to configure and manage tooltips globally for multiple elements
 * in a generic manner.  To create individual tooltips with maximum customizability,
 * you should consider either {@link Ext.Tip} or {@link Ext.ToolTip}.

 *
Quicktips can be configured via tag attributes directly in markup, or by
 * registering quick tips programmatically via the {@link #register} method.

 *
The singleton's instance of {@link Ext.QuickTip} is available via
 * {@link #getQuickTip}, and supports all the methods, and all the all the
 * configuration properties of Ext.QuickTip. These settings will apply to all
 * tooltips shown by the singleton.

 *
Below is the summary of the configuration properties which can be used.
 * For detailed descriptions see {@link #getQuickTip}

 *
QuickTips singleton configs (all are optional)

 *
  • dismissDelay
    •
 *
  • hideDelay
    •
 *
  • maxWidth
    •
 *
  • minWidth
    •
 *
  • showDelay
    •
 *
  • trackMouse

 *
Target element configs (optional unless otherwise noted)

 *
  • autoHide
    •
 *
  • cls
    •
 *
  • dismissDelay (overrides singleton value)
    •
 *
  • target (required)
    •
 *
  • text (required)
    •
 *
  • title
    •
 *
  • width

 *
Here is an example showing how some of these config options could be used:

 *

// Init the singleton.  Any tag-based quick tips will start working.
Ext.QuickTips.init();

// Apply a set of config properties to the singleton
Ext.apply(Ext.QuickTips.getQuickTip(), {
    maxWidth: 200,
    minWidth: 100,
    showDelay: 50,
    trackMouse: true
});

// Manually register a quick tip for a specific element
Ext.QuickTips.register({
    target: 'my-div',
    title: 'My Tooltip',
    text: 'This tooltip was added in code',
    width: 100,
    dismissDelay: 20
});

 *
To register a quick tip in markup, you simply add one or more of the valid QuickTip attributes prefixed with
 * the ext: namespace.  The HTML element itself is automatically set as the quick tip target. Here is the summary
 * of supported attributes (optional unless otherwise noted):

 *
  • hide: Specifying "user" is equivalent to setting autoHide = false.  Any other value will be the
 * same as autoHide = true.
    •
 *
  • qclass: A CSS class to be applied to the quick tip (equivalent to the 'cls' target element config).
    •
 *
  • qtip (required): The quick tip text (equivalent to the 'text' target element config).
    •
 *
  • qtitle: The quick tip title (equivalent to the 'title' target element config).
    •
 *
  • qwidth: The quick tip width (equivalent to the 'width' target element config).

 *
Here is an example of configuring an HTML element to display a tooltip from markup:

 *

// Add a quick tip to an HTML button
<input type="button" value="OK" ext:qtitle="OK Button" ext:qwidth="100"
     ext:qtip="This is a quick tip from markup!"></input>

 * @singleton
 */
Ext.QuickTips = function(){
    var tip, locks = [];
    return {

/**
         * Initialize the global QuickTips instance and prepare any quick tips.
         * @param {Boolean} autoRender True to render the QuickTips container immediately to preload images. (Defaults to true)
         */
        init : function(autoRender){
            if(!tip){
                if(!Ext.isReady){
                    Ext.onReady(function(){
                        Ext.QuickTips.init(autoRender);
                    });
                    return;
                }
                tip = new Ext.QuickTip({elements:'header,body'});
                if(autoRender !== false){
                    tip.render(Ext.getBody());
                }
            }
        },

/**
         * Enable quick tips globally.
         */
        enable : function(){
            if(tip){
                locks.pop();
                if(locks.length < 1){
                    tip.enable();
                }
            }
        },

/**
         * Disable quick tips globally.
         */
        disable : function(){
            if(tip){
                tip.disable();
            }
            locks.push(1);
        },

/**
         * Returns true if quick tips are enabled, else false.
         * @return {Boolean}
         */
        isEnabled : function(){
            return tip !== undefined && !tip.disabled;
        },

/**
         * Gets the global QuickTips instance.
         */
        getQuickTip : function(){
            return tip;
        },

/**
         * Configures a new quick tip instance and assigns it to a target element.  See
         * {@link Ext.QuickTip#register} for details.
         * @param {Object} config The config object
         */
        register : function(){
            tip.register.apply(tip, arguments);
        },

/**
         * Removes any registered quick tip from the target element and destroys it.
         * @param {String/HTMLElement/Element} el The element from which the quick tip is to be removed.
         */
        unregister : function(){
            tip.unregister.apply(tip, arguments);
        },

/**
         * Alias of {@link #register}.
         * @param {Object} config The config object
         */
        tips :function(){
            tip.register.apply(tip, arguments);
        }
    }
}();


The source code

/*!
 * licensing@extjs.com
 * http://www.extjs.com/license
 */

/**
 * @class Ext.form.Radio
 * @extends Ext.form.Checkbox
 * Single radio field.  Same as Checkbox, but provided as a convenience for automatically setting the input type.
 * Radio grouping is handled automatically by the browser if you give each radio in a group the same name.
 * @constructor
 * Creates a new Radio
 * @param {Object} config Configuration options
 * @xtype radio
 */
Ext.form.Radio = Ext.extend(Ext.form.Checkbox, {
    inputType: 'radio',

/**
     * Overridden and disabled. The editor element does not support standard valid/invalid marking. @hide
     * @method
     */
    markInvalid : Ext.emptyFn,

/**
     * Overridden and disabled. The editor element does not support standard valid/invalid marking. @hide
     * @method
     */
    clearInvalid : Ext.emptyFn,

/**
     * If this radio is part of a group, it will return the selected value
     * @return {String}
     */
    getGroupValue : function(){
        var p = this.el.up('form') || Ext.getBody();
        var c = p.child('input[name='+this.el.dom.name+']:checked', true);
        return c ? c.value : null;
    },

    // private
    onClick : function(){
        if(this.el.dom.checked != this.checked){
            var els = this.getCheckEl().select('input[name=' + this.el.dom.name + ']');
            els.each(function(el){
                if(el.dom.id == this.id){
                    this.setValue(true);
                }else{
                    Ext.getCmp(el.dom.id).setValue(false);
                }
            }, this);
        }
    },

/**
     * Sets either the checked/unchecked status of this Radio, or, if a string value
     * is passed, checks a sibling Radio of the same name whose value is the value specified.
     * @param value {String/Boolean} Checked value, or the value of the sibling radio button to check.
     * @return {Ext.form.Field} this
     */
    setValue : function(v){
        if (typeof v == 'boolean') {
            Ext.form.Radio.superclass.setValue.call(this, v);
        } else if (this.rendered) {
            var r = this.getCheckEl().child('input[name=' + this.el.dom.name + '][value=' + v + ']', true);
            if(r){
                Ext.getCmp(r.id).setValue(true);
            }
        }
        return this;
    },

    // private
    getCheckEl: function(){
        if(this.inGroup){
            return this.el.up('.x-form-radio-group')
        }
        return this.el.up('form') || Ext.getBody();
    }
});
Ext.reg('radio', Ext.form.Radio);


The source code

/*!
 * licensing@extjs.com
 * http://www.extjs.com/license
 */

/**
 * @class Ext.form.RadioGroup
 * @extends Ext.form.CheckboxGroup
 * A grouping container for {@link Ext.form.Radio} controls.
 * @constructor
 * Creates a new RadioGroup
 * @param {Object} config Configuration options
 * @xtype radiogroup
 */
Ext.form.RadioGroup = Ext.extend(Ext.form.CheckboxGroup, {

/**
     * @cfg {Array} items An Array of {@link Ext.form.Radio Radio}s or Radio config objects
     * to arrange in the group.
     */

/**
     * @cfg {Boolean} allowBlank True to allow every item in the group to be blank (defaults to true).
     * If allowBlank = false and no items are selected at validation time, {@link @blankText} will
     * be used as the error text.
     */
    allowBlank : true,

/**
     * @cfg {String} blankText Error text to display if the {@link #allowBlank} validation fails
     * (defaults to 'You must select one item in this group')
     */
    blankText : 'You must select one item in this group',

    // private
    defaultType : 'radio',

    // private
    groupCls : 'x-form-radio-group',

/**
     * @event change
     * Fires when the state of a child radio changes.
     * @param {Ext.form.RadioGroup} this
     * @param {Ext.form.Radio} checked The checked radio
     */

/**
     * Gets the selected {@link Ext.form.Radio} in the group, if it exists.
     * @return {Ext.form.Radio} The selected radio.
     */
    getValue : function(){
        var out = null;
        this.eachItem(function(item){
            if(item.checked){
                out = item;
                return false;
            }
        });
        return out;
    },

/**
     * Sets the checked radio in the group.
     * @param {String/Ext.form.Radio} id The radio to check.
     * @param {Boolean} value The value to set the radio.
     * @return {Ext.form.RadioGroup} this
     */
    onSetValue : function(id, value){
        if(arguments.length > 1){
            var f = this.getBox(id);
            if(f){
                f.setValue(value);
                if(f.checked){
                    this.eachItem(function(item){
                        if (item !== f){
                            item.setValue(false);
                        }
                    });
                }
            }
        }else{
            this.setValueForItem(id);
        }
    },

    setValueForItem : function(val){
        val = String(val).split(',')[0];
        this.eachItem(function(item){
            item.setValue(val == item.inputValue);
        });
    },

    // private
    fireChecked : function(){
        if(!this.checkTask){
            this.checkTask = new Ext.util.DelayedTask(this.bufferChecked, this);
        }
        this.checkTask.delay(10);
    },

    // private
    bufferChecked : function(){
        var out = null;
        this.eachItem(function(item){
            if(item.checked){
                out = item;
                return false;
            }
        });
        this.fireEvent('change', this, out);
    },

    onDestroy : function(){
        if(this.checkTask){
            this.checkTask.cancel();
            this.checkTask = null;
        }
        Ext.form.RadioGroup.superclass.onDestroy.call(this);
    }

});

Ext.reg('radiogroup', Ext.form.RadioGroup);


The source code

/*!
 * licensing@extjs.com
 * http://www.extjs.com/license
 */
Ext.ns('Ext.ux');

Ext.ux.Rating = Ext.extend(Ext.util.Observable, {
    // Configuration options
    starWidth: 16,
    split: 1,
    resetValue: '',
    defaultSelected: -1,
    selected: -1,
    showTitles: true,

    // Our class constructor
    constructor : function(element, config) {
        Ext.apply(this, config);
        Ext.ux.Rating.superclass.constructor.call(this);

        this.addEvents(
            'change',
            'reset'
        );

        this.el = Ext.get(element);
        this.init();
    },

    init : function() {
        var me = this;

        // Some arrays we are going to store data in
        this.values = [];
        this.titles = [];
        this.stars = [];

        // We create a container to put all our stars into
        this.container = this.el.createChild({
            cls: 'ux-rating-container ux-rating-clearfix'
        });

        if(this.canReset) {
            this.resetEl = this.container.createChild({
                cls: 'ux-rating-reset',
                cn: [{
                    tag: 'a',
                    title: this.showTitles ? (this.resetTitle || 'Reset your vote') : '',
                    html: 'Reset'
                }]
            });
            this.resetEl.visibilityMode = Ext.Element.DISPLAY;

            this.resetEl.hover(function() {
                Ext.fly(this).addClass('ux-rating-reset-hover');
            }, function() {
                Ext.fly(this).removeClass('ux-rating-reset-hover');
            });

            this.resetEl.on('click', this.reset, this);
        }

        // We use DomQuery to select the radio buttons
        this.radioBoxes = this.el.select('input[type=radio]');
        // Then we can loop over the CompositeElement using each
        this.radioBoxes.each(this.initStar, this);

        // We use DomHelper to create our hidden input
        this.input = this.container.createChild({
            tag: 'input',
            type: 'hidden',
            name: this.name,
            value: this.values[this.defaultSelected] || this.resetValue
        });

        // Lets remove all the radio buttons from the DOM
        this.radioBoxes.remove();

        this.select(this.defaultSelected === undefined ? false : this.defaultSelected)

        if(this.disabled) {
            this.disable();
        } else {
            // Enable will set up our event listeners
            this.enable();
        }
    },

    initStar : function(item, all, i) {
        var sw = Math.floor(this.starWidth / this.split);

        // We use the name and disabled attributes of the first radio button
        if(i == 0) {
            this.name = item.dom.name;
            this.disabled = item.dom.disabled;
        }

        // Saving the value and title for this star
        this.values[i] = item.dom.value;
        this.titles[i] = item.dom.title;

        if(item.dom.checked) {
            this.defaultSelected = i;
        }

        // Now actually create the star!
        var star = this.container.createChild({
            cls: 'ux-rating-star'
        });

        var starLink = star.createChild({
            tag: 'a',
            html: this.values[i],
            title: this.showTitles ? this.titles[i] : ''
        });

        // Prepare division settings
        if(this.split) {
          var odd = (i % this.split);
          star.setWidth(sw);
          starLink.setStyle('margin-left', '-' + (odd * sw) + 'px');
        }

        // Save the reference to this star so we can easily access it later
        this.stars.push(star.dom);
    },

    onStarClick : function(ev, t) {
        if(!this.disabled) {
            this.select(this.stars.indexOf(t));
        }
    },

    onStarOver : function(ev, t) {
        if(!this.disabled) {
            this.fillTo(this.stars.indexOf(t), true);
        }
    },

    onStarOut : function(ev, t) {
        if(!this.disabled) {
            this.fillTo(this.selected, false);
        }
    },

    reset : function(ev, t) {
        this.select(-1);
    },

    select : function(index) {
        if(index === false || index === -1) {
            // remove current selection in el
            this.value = this.resetValue;
            this.title = "";
            this.input.dom.value = '';

            if(this.canReset) {
                this.resetEl.setOpacity(0.5);
            }

            this.fillNone();

            if(this.selected !== -1) {
                this.fireEvent('change', this, this.values[index], this.stars[index]);
            }
            this.selected = -1;
        }
        else if(index !== this.selected) {
            // Update some properties
            this.selected = index;
            this.value = this.values[index];
            this.title = this.titles[index];

            // Set the value of our hidden input so the rating can be submitted
            this.input.dom.value = this.value;

            if(this.canReset) {
                this.resetEl.setOpacity(0.99);
            }

            // the fillTo() method will fill the stars up until the selected one
            this.fillTo(index, false);

            // Lets also not forget to fire our custom event!
            this.fireEvent('change', this, this.values[index], this.stars[index]);
        }
    },

    fillTo : function(index, hover) {
        if (index != -1) {
            var addClass = hover ? 'ux-rating-star-hover' : 'ux-rating-star-on';
            var removeClass = hover ? 'ux-rating-star-on' : 'ux-rating-star-hover';

            // We add a css class to each star up until the selected one
            Ext.each(this.stars.slice(0, index+1), function() {
                Ext.fly(this).removeClass(removeClass).addClass(addClass);
            });

            // And then remove the same class from all the stars after this one
            Ext.each(this.stars.slice(index+1), function() {
                Ext.fly(this).removeClass([removeClass, addClass]);
            });
        }
        else {
            this.fillNone();
        }
    },

    fillNone : function() {
        this.container.select('.ux-rating-star').removeClass(['ux-rating-star-hover', 'ux-rating-star-on']);
    },

    enable : function() {
        if(this.canReset) {
            this.resetEl.show();
        }

        this.input.dom.disabled = null;
        this.disabled = false;

        this.container.removeClass('ux-rating-disabled');

        // We will be using the technique of event delegation by listening
        // for bubbled up events on the container
        this.container.on({
            click: this.onStarClick,
            mouseover: this.onStarOver,
            mouseout: this.onStarOut,
            scope: this,
            delegate: 'div.ux-rating-star'
        });
    },

    disable : function() {
        if(this.canReset) {
            this.resetEl.hide();
        }

        this.input.dom.disabled = true;
        this.disabled = true;

        this.container.addClass('ux-rating-disabled');

        this.container.un({
            click: this.onStarClick,
            mouseover: this.onStarOver,
            mouseout: this.onStarOut,
            scope: this,
            delegate: 'div.ux-rating-star'
        });
    },

    getValue : function() {
        return this.values[this.selected] || this.resetValue;
    },

    destroy : function() {
        this.disable();
        this.container.remove();
        this.radioBoxes.appendTo(this.el);
        if(this.selected !== -1) {
            this.radioBoxes.elements[this.selected].checked = true;
        }
    }
});


The source code

/*!
 * licensing@extjs.com
 * http://www.extjs.com/license
 */

/**
 * @class Ext.data.Record
 *
Instances of this class encapsulate both Record definition information, and Record
 * value information for use in {@link Ext.data.Store} objects, or any code which needs
 * to access Records cached in an {@link Ext.data.Store} object.

 *
Constructors for this class are generated by passing an Array of field definition objects to {@link #create}.
 * Instances are usually only created by {@link Ext.data.Reader} implementations when processing unformatted data
 * objects.

 *
Note that an instance of a Record class may only belong to one {@link Ext.data.Store Store} at a time.
 * In order to copy data from one Store to another, use the {@link #copy} method to create an exact
 * copy of the Record, and insert the new instance into the other Store.

 *
When serializing a Record for submission to the server, be aware that it contains many private
 * properties, and also a reference to its owning Store which in turn holds references to its Records.
 * This means that a whole Record may not be encoded using {@link Ext.util.JSON.encode}. Instead, use the
 * {@link #data} and {@link #id} properties.

 *
Record objects generated by this constructor inherit all the methods of Ext.data.Record listed below.

 * @constructor
 *
This constructor should not be used to create Record objects. Instead, use {@link #create} to
 * generate a subclass of Ext.data.Record configured with information about its constituent fields.

 *
The generated constructor has the same signature as this constructor.

 * @param {Object} data (Optional) An object, the properties of which provide values for the new Record's
 * fields. If not specified the {@link Ext.data.Field#defaultValue defaultValue}
 * for each field will be assigned.
 * @param {Object} id (Optional) The id of the Record. The id is used by the
 * {@link Ext.data.Store} object which owns the Record to index its collection
 * of Records (therefore this id should be unique within each store). If an
 * id is not specified a {@link #phantom}
 * Record will be created with an {@link #Record.id automatically generated id}.
 */
Ext.data.Record = function(data, id){
    // if no id, call the auto id method
    this.id = (id || id === 0) ? id : Ext.data.Record.id(this);
    this.data = data || {};
};

/**
 * Generate a constructor for a specific Record layout.
 * @param {Array} o An Array of {@link Ext.data.Field Field} definition objects.
 * The constructor generated by this method may be used to create new Record instances. The data
 * object must contain properties named after the {@link Ext.data.Field field}
 * {@link Ext.data.Field#name}s.  Example usage:

// create a Record constructor from a description of the fields
var TopicRecord = Ext.data.Record.create([ // creates a subclass of Ext.data.Record
    {{@link Ext.data.Field#name name}: 'title', {@link Ext.data.Field#mapping mapping}: 'topic_title'},
    {name: 'author', mapping: 'username', allowBlank: false},
    {name: 'totalPosts', mapping: 'topic_replies', type: 'int'},
    {name: 'lastPost', mapping: 'post_time', type: 'date'},
    {name: 'lastPoster', mapping: 'user2'},
    {name: 'excerpt', mapping: 'post_text', allowBlank: false},
    // In the simplest case, if no properties other than name are required,
    // a field definition may consist of just a String for the field name.
    'signature'
]);

// create Record instance
var myNewRecord = new TopicRecord(
    {
        title: 'Do my job please',
        author: 'noobie',
        totalPosts: 1,
        lastPost: new Date(),
        lastPoster: 'Animal',
        excerpt: 'No way dude!',
        signature: ''
    },
    id // optionally specify the id of the record otherwise {@link #Record.id one is auto-assigned}
);
myStore.{@link Ext.data.Store#add add}(myNewRecord);

 * @method create
 * @return {Function} A constructor which is used to create new Records according
 * to the definition. The constructor has the same signature as {@link #Record}.
 * @static
 */
Ext.data.Record.create = function(o){
    var f = Ext.extend(Ext.data.Record, {});
    var p = f.prototype;
    p.fields = new Ext.util.MixedCollection(false, function(field){
        return field.name;
    });
    for(var i = 0, len = o.length; i < len; i++){
        p.fields.add(new Ext.data.Field(o[i]));
    }
    f.getField = function(name){
        return p.fields.get(name);
    };
    return f;
};

Ext.data.Record.PREFIX = 'ext-record';
Ext.data.Record.AUTO_ID = 1;
Ext.data.Record.EDIT = 'edit';
Ext.data.Record.REJECT = 'reject';
Ext.data.Record.COMMIT = 'commit';

/**
 * Generates a sequential id. This method is typically called when a record is {@link #create}d
 * and {@link #Record no id has been specified}. The returned id takes the form:
 * {PREFIX}-{AUTO_ID}.

 *
  • PREFIX : String
    Ext.data.Record.PREFIX
 * (defaults to 'ext-record')
    •
 *
  • AUTO_ID : String
    Ext.data.Record.AUTO_ID
 * (defaults to 1 initially)
    •
 *

 * @param {Record} rec The record being created.  The record does not exist, it's a {@link #phantom}.
 * @return {String} auto-generated string id, "ext-record-i++';
 */
Ext.data.Record.id = function(rec) {
    rec.phantom = true;
    return [Ext.data.Record.PREFIX, '-', Ext.data.Record.AUTO_ID++].join('');
};

Ext.data.Record.prototype = {

/**
     *
This property is stored in the Record definition's prototype

     * A MixedCollection containing the defined {@link Ext.data.Field Field}s for this Record.  Read-only.
     * @property fields
     * @type Ext.util.MixedCollection
     */

/**
     * An object hash representing the data for this Record. Every field name in the Record definition
     * is represented by a property of that name in this object. Note that unless you specified a field
     * with {@link Ext.data.Field#name name} "id" in the Record definition, this will not contain
     * an id property.
     * @property data
     * @type {Object}
     */

/**
     * The unique ID of the Record {@link #Record as specified at construction time}.
     * @property id
     * @type {Object}
     */

/**
     *
Only present if this Record was created by an {@link Ext.data.XmlReader XmlReader}.

     *
The XML element which was the source of the data for this Record.

     * @property node
     * @type {XMLElement}
     */

/**
     *
Only present if this Record was created by an {@link Ext.data.ArrayReader ArrayReader} or a {@link Ext.data.JsonReader JsonReader}.

     *
The Array or object which was the source of the data for this Record.

     * @property json
     * @type {Array|Object}
     */

/**
     * Readonly flag - true if this Record has been modified.
     * @type Boolean
     */
    dirty : false,
    editing : false,
    error : null,

/**
     * This object contains a key and value storing the original values of all modified
     * fields or is null if no fields have been modified.
     * @property modified
     * @type {Object}
     */
    modified : null,

/**
     * true when the record does not yet exist in a server-side database (see
     * {@link #markDirty}).  Any record which has a real database pk set as its id property
     * is NOT a phantom -- it's real.
     * @property phantom
     * @type {Boolean}
     */
    phantom : false,

    // private
    join : function(store){

/**
         * The {@link Ext.data.Store} to which this Record belongs.
         * @property store
         * @type {Ext.data.Store}
         */
        this.store = store;
    },

/**
     * Set the {@link Ext.data.Field#name named field} to the specified value.  For example:
     *

// record has a field named 'firstname'
var Employee = Ext.data.Record.{@link #create}([
    {name: 'firstname'},
    ...
]);

// update the 2nd record in the store:
var rec = myStore.{@link Ext.data.Store#getAt getAt}(1);

// set the value (shows dirty flag):
rec.set('firstname', 'Betty');

// commit the change (removes dirty flag):
rec.{@link #commit}();

// update the record in the store, bypass setting dirty flag,
// and do not store the change in the {@link Ext.data.Store#getModifiedRecords modified records}
rec.{@link #data}['firstname'] = 'Wilma'; // updates record, but not the view
rec.{@link #commit}(); // updates the view
     *

     * Notes:

     *
  • If the store has a writer and autoSave=true, each set()
     * will execute an XHR to the server.
    •
     *
  • Use {@link #beginEdit} to prevent the store's update
     * event firing while using set().
    •
     *
  • Use {@link #endEdit} to have the store's update
     * event fire.
    •
     *

     * @param {String} name The {@link Ext.data.Field#name name of the field} to set.
     * @param {String/Object/Array} value The value to set the field to.
     */
    set : function(name, value){
        var encode = Ext.isPrimitive(value) ? String : Ext.encode;
        if(encode(this.data[name]) == encode(value)) {
            return;
        }
        this.dirty = true;
        if(!this.modified){
            this.modified = {};
        }
        if(this.modified[name] === undefined){
            this.modified[name] = this.data[name];
        }
        this.data[name] = value;
        if(!this.editing){
            this.afterEdit();
        }
    },

    // private
    afterEdit : function(){
        if (this.store != undefined && typeof this.store.afterEdit == "function") {
            this.store.afterEdit(this);
        }
    },

    // private
    afterReject : function(){
        if(this.store){
            this.store.afterReject(this);
        }
    },

    // private
    afterCommit : function(){
        if(this.store){
            this.store.afterCommit(this);
        }
    },

/**
     * Get the value of the {@link Ext.data.Field#name named field}.
     * @param {String} name The {@link Ext.data.Field#name name of the field} to get the value of.
     * @return {Object} The value of the field.
     */
    get : function(name){
        return this.data[name];
    },

/**
     * Begin an edit. While in edit mode, no events (e.g.. the update event)
     * are relayed to the containing store.
     * See also: {@link #endEdit} and {@link #cancelEdit}.
     */
    beginEdit : function(){
        this.editing = true;
        this.modified = this.modified || {};
    },

/**
     * Cancels all changes made in the current edit operation.
     */
    cancelEdit : function(){
        this.editing = false;
        delete this.modified;
    },

/**
     * End an edit. If any data was modified, the containing store is notified
     * (ie, the store's update event will fire).
     */
    endEdit : function(){
        this.editing = false;
        if(this.dirty){
            this.afterEdit();
        }
    },

/**
     * Usually called by the {@link Ext.data.Store} which owns the Record.
     * Rejects all changes made to the Record since either creation, or the last commit operation.
     * Modified fields are reverted to their original values.
     *
Developers should subscribe to the {@link Ext.data.Store#update} event
     * to have their code notified of reject operations.

     * @param {Boolean} silent (optional) True to skip notification of the owning
     * store of the change (defaults to false)
     */
    reject : function(silent){
        var m = this.modified;
        for(var n in m){
            if(typeof m[n] != "function"){
                this.data[n] = m[n];
            }
        }
        this.dirty = false;
        delete this.modified;
        this.editing = false;
        if(silent !== true){
            this.afterReject();
        }
    },

/**
     * Usually called by the {@link Ext.data.Store} which owns the Record.
     * Commits all changes made to the Record since either creation, or the last commit operation.
     *
Developers should subscribe to the {@link Ext.data.Store#update} event
     * to have their code notified of commit operations.

     * @param {Boolean} silent (optional) True to skip notification of the owning
     * store of the change (defaults to false)
     */
    commit : function(silent){
        this.dirty = false;
        delete this.modified;
        this.editing = false;
        if(silent !== true){
            this.afterCommit();
        }
    },

/**
     * Gets a hash of only the fields that have been modified since this Record was created or commited.
     * @return Object
     */
    getChanges : function(){
        var m = this.modified, cs = {};
        for(var n in m){
            if(m.hasOwnProperty(n)){
                cs[n] = this.data[n];
            }
        }
        return cs;
    },

    // private
    hasError : function(){
        return this.error !== null;
    },

    // private
    clearError : function(){
        this.error = null;
    },

/**
     * Creates a copy (clone) of this Record.
     * @param {String} id (optional) A new Record id, defaults to the id
     * of the record being copied. See {@link #id}.
     * To generate a phantom record with a new id use:

var rec = record.copy(); // clone the record
Ext.data.Record.id(rec); // automatically generate a unique sequential id
     *

     * @return {Record}
     */
    copy : function(newId) {
        return new this.constructor(Ext.apply({}, this.data), newId || this.id);
    },

/**
     * Returns true if the passed field name has been {@link #modified}
     * since the load or last commit.
     * @param {String} fieldName {@link Ext.data.Field.{@link Ext.data.Field#name}
     * @return {Boolean}
     */
    isModified : function(fieldName){
        return !!(this.modified && this.modified.hasOwnProperty(fieldName));
    },

/**
     * By default returns false if any {@link Ext.data.Field field} within the
     * record configured with {@link Ext.data.Field#allowBlank} = false returns
     * true from an {@link Ext}.{@link Ext#isEmpty isempty} test.
     * @return {Boolean}
     */
    isValid : function() {
        return this.fields.find(function(f) {
            return (f.allowBlank === false && Ext.isEmpty(this.data[f.name])) ? true : false;
        },this) ? false : true;
    },

/**
     *
Marks this Record as {@link #dirty}.  This method
     * is used interally when adding {@link #phantom} records to a
     * {@link Ext.data.Store#writer writer enabled store}.

     *
Marking a record {@link #dirty} causes the phantom to
     * be returned by {@link Ext.data.Store#getModifiedRecords} where it will
     * have a create action composed for it during {@link Ext.data.Store#save store save}
     * operations.

     */
    markDirty : function(){
        this.dirty = true;
        if(!this.modified){
            this.modified = {};
        }
        this.fields.each(function(f) {
            this.modified[f.name] = this.data[f.name];
        },this);
    }
};


The source code

/*!
 * licensing@extjs.com
 * http://www.extjs.com/license
 */

/**
 * @class Ext.dd.Registry
 * Provides easy access to all drag drop components that are registered on a page.  Items can be retrieved either
 * directly by DOM node id, or by passing in the drag drop event that occurred and looking up the event target.
 * @singleton
 */
Ext.dd.Registry = function(){
    var elements = {};
    var handles = {};
    var autoIdSeed = 0;

    var getId = function(el, autogen){
        if(typeof el == "string"){
            return el;
        }
        var id = el.id;
        if(!id && autogen !== false){
            id = "extdd-" + (++autoIdSeed);
            el.id = id;
        }
        return id;
    };

    return {

/**
     * Resgister a drag drop element
     * @param {String/HTMLElement} element The id or DOM node to register
     * @param {Object} data (optional) An custom data object that will be passed between the elements that are involved
     * in drag drop operations.  You can populate this object with any arbitrary properties that your own code
     * knows how to interpret, plus there are some specific properties known to the Registry that should be
     * populated in the data object (if applicable):
     *
Value      Description

---------  ------------------------------------------

handles    Array of DOM nodes that trigger dragging

           for the element being registered

isHandle   True if the element passed in triggers

           dragging itself, else false

     */
        register : function(el, data){
            data = data || {};
            if(typeof el == "string"){
                el = document.getElementById(el);
            }
            data.ddel = el;
            elements[getId(el)] = data;
            if(data.isHandle !== false){
                handles[data.ddel.id] = data;
            }
            if(data.handles){
                var hs = data.handles;
                for(var i = 0, len = hs.length; i < len; i++){
                    handles[getId(hs[i])] = data;
                }
            }
        },

/**
     * Unregister a drag drop element
     * @param {String/HTMLElement} element The id or DOM node to unregister
     */
        unregister : function(el){
            var id = getId(el, false);
            var data = elements[id];
            if(data){
                delete elements[id];
                if(data.handles){
                    var hs = data.handles;
                    for(var i = 0, len = hs.length; i < len; i++){
                        delete handles[getId(hs[i], false)];
                    }
                }
            }
        },

/**
     * Returns the handle registered for a DOM Node by id
     * @param {String/HTMLElement} id The DOM node or id to look up
     * @return {Object} handle The custom handle data
     */
        getHandle : function(id){
            if(typeof id != "string"){ // must be element?
                id = id.id;
            }
            return handles[id];
        },

/**
     * Returns the handle that is registered for the DOM node that is the target of the event
     * @param {Event} e The event
     * @return {Object} handle The custom handle data
     */
        getHandleFromEvent : function(e){
            var t = Ext.lib.Event.getTarget(e);
            return t ? handles[t.id] : null;
        },

/**
     * Returns a custom data object that is registered for a DOM node by id
     * @param {String/HTMLElement} id The DOM node or id to look up
     * @return {Object} data The custom data
     */
        getTarget : function(id){
            if(typeof id != "string"){ // must be element?
                id = id.id;
            }
            return elements[id];
        },

/**
     * Returns a custom data object that is registered for the DOM node that is the target of the event
     * @param {Event} e The event
     * @return {Object} data The custom data
     */
        getTargetFromEvent : function(e){
            var t = Ext.lib.Event.getTarget(e);
            return t ? elements[t.id] || handles[t.id] : null;
        }
    };
}();


The source code

/*!
 * licensing@extjs.com
 * http://www.extjs.com/license
 */

/**
 * @class Ext.direct.RemotingProvider
 * @extends Ext.direct.JsonProvider
 *
 *
The {@link Ext.direct.RemotingProvider RemotingProvider} exposes access to
 * server side methods on the client (a remote procedure call (RPC) type of
 * connection where the client can initiate a procedure on the server).

 *
 *
This allows for code to be organized in a fashion that is maintainable,
 * while providing a clear path between client and server, something that is
 * not always apparent when using URLs.

 *
 *
To accomplish this the server-side needs to describe what classes and methods
 * are available on the client-side. This configuration will typically be
 * outputted by the server-side Ext.Direct stack when the API description is built.

 */
Ext.direct.RemotingProvider = Ext.extend(Ext.direct.JsonProvider, {

/**
     * @cfg {Object} actions
     * Object literal defining the server side actions and methods. For example, if
     * the Provider is configured with:
     *

"actions":{ // each property within the 'actions' object represents a server side Class
    "TestAction":[ // array of methods within each server side Class to be
    {              // stubbed out on client
        "name":"doEcho",
        "len":1
    },{
        "name":"multiply",// name of method
        "len":2           // The number of parameters that will be used to create an
                          // array of data to send to the server side function.
                          // Ensure the server sends back a Number, not a String.
    },{
        "name":"doForm",
        "formHandler":true, // direct the client to use specialized form handling method
        "len":1
    }]
}
     *

     *
Note that a Store is not required, a server method can be called at any time.
     * In the following example a client side handler is used to call the
     * server side method "multiply" in the server-side "TestAction" Class:

     *

TestAction.multiply(
    2, 4, // pass two arguments to server, so specify len=2
    // callback function after the server is called
    // result: the result returned by the server
    //      e: Ext.Direct.RemotingEvent object
    function(result, e){
        var t = e.getTransaction();
        var action = t.action; // server side Class called
        var method = t.method; // server side method called
        if(e.status){
            var answer = Ext.encode(result); // 8

        }else{
            var msg = e.message; // failure message
        }
    }
);
     *

     * In the example above, the server side "multiply" function will be passed two
     * arguments (2 and 4).  The "multiply" method should return the value 8 which will be
     * available as the result in the example above.
     */

/**
     * @cfg {String/Object} namespace
     * Namespace for the Remoting Provider (defaults to the browser global scope of window).
     * Explicitly specify the namespace Object, or specify a String to have a
     * {@link Ext#namespace namespace created} implicitly.
     */

/**
     * @cfg {String} url
     * Required. The url to connect to the {@link Ext.Direct} server-side router.
     */

/**
     * @cfg {String} enableUrlEncode
     * Specify which param will hold the arguments for the method.
     * Defaults to 'data'.
     */

/**
     * @cfg {Number/Boolean} enableBuffer
     *
true or false to enable or disable combining of method
     * calls. If a number is specified this is the amount of time in milliseconds
     * to wait before sending a batched request (defaults to 10).

     *
Calls which are received within the specified timeframe will be
     * concatenated together and sent in a single request, optimizing the
     * application by reducing the amount of round trips that have to be made
     * to the server.

     */
    enableBuffer: 10,

/**
     * @cfg {Number} maxRetries
     * Number of times to re-attempt delivery on failure of a call. Defaults to 1.
     */
    maxRetries: 1,

/**
     * @cfg {Number} timeout
     * The timeout to use for each request. Defaults to undefined.
     */
    timeout: undefined,

    constructor : function(config){
        Ext.direct.RemotingProvider.superclass.constructor.call(this, config);
        this.addEvents(

/**
             * @event beforecall
             * Fires immediately before the client-side sends off the RPC call.
             * By returning false from an event handler you can prevent the call from
             * executing.
             * @param {Ext.direct.RemotingProvider} provider
             * @param {Ext.Direct.Transaction} transaction
             */
            'beforecall',

/**
             * @event call
             * Fires immediately after the request to the server-side is sent. This does
             * NOT fire after the response has come back from the call.
             * @param {Ext.direct.RemotingProvider} provider
             * @param {Ext.Direct.Transaction} transaction
             */
            'call'
        );
        this.namespace = (Ext.isString(this.namespace)) ? Ext.ns(this.namespace) : this.namespace || window;
        this.transactions = {};
        this.callBuffer = [];
    },

    // private
    initAPI : function(){
        var o = this.actions;
        for(var c in o){
            var cls = this.namespace[c] || (this.namespace[c] = {}),
                ms = o[c];
            for(var i = 0, len = ms.length; i < len; i++){
                var m = ms[i];
                cls[m.name] = this.createMethod(c, m);
            }
        }
    },

    // inherited
    isConnected: function(){
        return !!this.connected;
    },

    connect: function(){
        if(this.url){
            this.initAPI();
            this.connected = true;
            this.fireEvent('connect', this);
        }else if(!this.url){
            throw 'Error initializing RemotingProvider, no url configured.';
        }
    },

    disconnect: function(){
        if(this.connected){
            this.connected = false;
            this.fireEvent('disconnect', this);
        }
    },

    onData: function(opt, success, xhr){
        if(success){
            var events = this.getEvents(xhr);
            for(var i = 0, len = events.length; i < len; i++){
                var e = events[i],
                    t = this.getTransaction(e);
                this.fireEvent('data', this, e);
                if(t){
                    this.doCallback(t, e, true);
                    Ext.Direct.removeTransaction(t);
                }
            }
        }else{
            var ts = [].concat(opt.ts);
            for(var i = 0, len = ts.length; i < len; i++){
                var t = this.getTransaction(ts[i]);
                if(t && t.retryCount < this.maxRetries){
                    t.retry();
                }else{
                    var e = new Ext.Direct.ExceptionEvent({
                        data: e,
                        transaction: t,
                        code: Ext.Direct.exceptions.TRANSPORT,
                        message: 'Unable to connect to the server.',
                        xhr: xhr
                    });
                    this.fireEvent('data', this, e);
                    if(t){
                        this.doCallback(t, e, false);
                        Ext.Direct.removeTransaction(t);
                    }
                }
            }
        }
    },

    getCallData: function(t){
        return {
            action: t.action,
            method: t.method,
            data: t.data,
            type: 'rpc',
            tid: t.tid
        };
    },

    doSend : function(data){
        var o = {
            url: this.url,
            callback: this.onData,
            scope: this,
            ts: data,
            timeout: this.timeout
        }, callData;

        if(Ext.isArray(data)){
            callData = [];
            for(var i = 0, len = data.length; i < len; i++){
                callData.push(this.getCallData(data[i]));
            }
        }else{
            callData = this.getCallData(data);
        }

        if(this.enableUrlEncode){
            var params = {};
            params[Ext.isString(this.enableUrlEncode) ? this.enableUrlEncode : 'data'] = Ext.encode(callData);
            o.params = params;
        }else{
            o.jsonData = callData;
        }
        Ext.Ajax.request(o);
    },

    combineAndSend : function(){
        var len = this.callBuffer.length;
        if(len > 0){
            this.doSend(len == 1 ? this.callBuffer[0] : this.callBuffer);
            this.callBuffer = [];
        }
    },

    queueTransaction: function(t){
        if(t.form){
            this.processForm(t);
            return;
        }
        this.callBuffer.push(t);
        if(this.enableBuffer){
            if(!this.callTask){
                this.callTask = new Ext.util.DelayedTask(this.combineAndSend, this);
            }
            this.callTask.delay(Ext.isNumber(this.enableBuffer) ? this.enableBuffer : 10);
        }else{
            this.combineAndSend();
        }
    },

    doCall : function(c, m, args){
        var data = null, hs = args[m.len], scope = args[m.len+1];

        if(m.len !== 0){
            data = args.slice(0, m.len);
        }

        var t = new Ext.Direct.Transaction({
            provider: this,
            args: args,
            action: c,
            method: m.name,
            data: data,
            cb: scope && Ext.isFunction(hs) ? hs.createDelegate(scope) : hs
        });

        if(this.fireEvent('beforecall', this, t) !== false){
            Ext.Direct.addTransaction(t);
            this.queueTransaction(t);
            this.fireEvent('call', this, t);
        }
    },

    doForm : function(c, m, form, callback, scope){
        var t = new Ext.Direct.Transaction({
            provider: this,
            action: c,
            method: m.name,
            args:[form, callback, scope],
            cb: scope && Ext.isFunction(callback) ? callback.createDelegate(scope) : callback,
            isForm: true
        });

        if(this.fireEvent('beforecall', this, t) !== false){
            Ext.Direct.addTransaction(t);
            var isUpload = String(form.getAttribute("enctype")).toLowerCase() == 'multipart/form-data',
                params = {
                    extTID: t.tid,
                    extAction: c,
                    extMethod: m.name,
                    extType: 'rpc',
                    extUpload: String(isUpload)
                };

            // change made from typeof callback check to callback.params
            // to support addl param passing in DirectSubmit EAC 6/2
            Ext.apply(t, {
                form: Ext.getDom(form),
                isUpload: isUpload,
                params: callback && Ext.isObject(callback.params) ? Ext.apply(params, callback.params) : params
            });
            this.fireEvent('call', this, t);
            this.processForm(t);
        }
    },

    processForm: function(t){
        Ext.Ajax.request({
            url: this.url,
            params: t.params,
            callback: this.onData,
            scope: this,
            form: t.form,
            isUpload: t.isUpload,
            ts: t
        });
    },

    createMethod : function(c, m){
        var f;
        if(!m.formHandler){
            f = function(){
                this.doCall(c, m, Array.prototype.slice.call(arguments, 0));
            }.createDelegate(this);
        }else{
            f = function(form, callback, scope){
                this.doForm(c, m, form, callback, scope);
            }.createDelegate(this);
        }
        f.directCfg = {
            action: c,
            method: m
        };
        return f;
    },

    getTransaction: function(opt){
        return opt && opt.tid ? Ext.Direct.getTransaction(opt.tid) : null;
    },

    doCallback: function(t, e){
        var fn = e.status ? 'success' : 'failure';
        if(t && t.cb){
            var hs = t.cb,
                result = Ext.isDefined(e.result) ? e.result : e.data;
            if(Ext.isFunction(hs)){
                hs(result, e);
            } else{
                Ext.callback(hs[fn], hs.scope, [result, e]);
                Ext.callback(hs.callback, hs.scope, [result, e]);
            }
        }
    }
});
Ext.Direct.PROVIDERS['remoting'] = Ext.direct.RemotingProvider;


The source code

/*!
 * licensing@extjs.com
 * http://www.extjs.com/license
 */

/**
 * @class Ext.data.Request
 * A simple Request class used internally to the data package to provide more generalized remote-requests
 * to a DataProxy.
 * TODO Not yet implemented.  Implement in Ext.data.Store#execute
 */
Ext.data.Request = function(params) {
    Ext.apply(this, params);
};
Ext.data.Request.prototype = {

/**
     * @cfg {String} action
     */
    action : undefined,

/**
     * @cfg {Ext.data.Record[]/Ext.data.Record} rs The Store recordset associated with the request.
     */
    rs : undefined,

/**
     * @cfg {Object} params HTTP request params
     */
    params: undefined,

/**
     * @cfg {Function} callback The function to call when request is complete
     */
    callback : Ext.emptyFn,

/**
     * @cfg {Object} scope The scope of the callback funtion
     */
    scope : undefined,

/**
     * @cfg {Ext.data.DataReader} reader The DataReader instance which will parse the received response
     */
    reader : undefined
};


The source code

/*!
 * licensing@extjs.com
 * http://www.extjs.com/license
 */

/**
 * @class Ext.Resizable
 * @extends Ext.util.Observable
 *
Applies drag handles to an element to make it resizable. The drag handles are inserted into the element
 * and positioned absolute. Some elements, such as a textarea or image, don't support this. To overcome that, you can wrap
 * the textarea in a div and set 'resizeChild' to true (or to the id of the element), or set wrap:true in your config and
 * the element will be wrapped for you automatically.

 *
Here is the list of valid resize handles:

 *
Value   Description
------  -------------------
 'n'     north
 's'     south
 'e'     east
 'w'     west
 'nw'    northwest
 'sw'    southwest
 'se'    southeast
 'ne'    northeast
 'all'   all

 *
Here's an example showing the creation of a typical Resizable:

 *

var resizer = new Ext.Resizable('element-id', {
    handles: 'all',
    minWidth: 200,
    minHeight: 100,
    maxWidth: 500,
    maxHeight: 400,
    pinned: true
});
resizer.on('resize', myHandler);

 *
To hide a particular handle, set its display to none in CSS, or through script:

 * resizer.east.setDisplayed(false);

 * @constructor
 * Create a new resizable component
 * @param {Mixed} el The id or element to resize
 * @param {Object} config configuration options
  */
Ext.Resizable = Ext.extend(Ext.util.Observable, {

    constructor: function(el, config){
        this.el = Ext.get(el);
        if(config && config.wrap){
            config.resizeChild = this.el;
            this.el = this.el.wrap(typeof config.wrap == 'object' ? config.wrap : {cls:'xresizable-wrap'});
            this.el.id = this.el.dom.id = config.resizeChild.id + '-rzwrap';
            this.el.setStyle('overflow', 'hidden');
            this.el.setPositioning(config.resizeChild.getPositioning());
            config.resizeChild.clearPositioning();
            if(!config.width || !config.height){
                var csize = config.resizeChild.getSize();
                this.el.setSize(csize.width, csize.height);
            }
            if(config.pinned && !config.adjustments){
                config.adjustments = 'auto';
            }
        }

/**
         * The proxy Element that is resized in place of the real Element during the resize operation.
         * This may be queried using {@link Ext.Element#getBox} to provide the new area to resize to.
         * Read only.
         * @type Ext.Element.
         * @property proxy
         */
        this.proxy = this.el.createProxy({tag: 'div', cls: 'x-resizable-proxy', id: this.el.id + '-rzproxy'}, Ext.getBody());
        this.proxy.unselectable();
        this.proxy.enableDisplayMode('block');

        Ext.apply(this, config);

        if(this.pinned){
            this.disableTrackOver = true;
            this.el.addClass('x-resizable-pinned');
        }
        // if the element isn't positioned, make it relative
        var position = this.el.getStyle('position');
        if(position != 'absolute' && position != 'fixed'){
            this.el.setStyle('position', 'relative');
        }
        if(!this.handles){ // no handles passed, must be legacy style
            this.handles = 's,e,se';
            if(this.multiDirectional){
                this.handles += ',n,w';
            }
        }
        if(this.handles == 'all'){
            this.handles = 'n s e w ne nw se sw';
        }
        var hs = this.handles.split(/\s*?[,;]\s*?| /);
        var ps = Ext.Resizable.positions;
        for(var i = 0, len = hs.length; i < len; i++){
            if(hs[i] && ps[hs[i]]){
                var pos = ps[hs[i]];
                this[pos] = new Ext.Resizable.Handle(this, pos, this.disableTrackOver, this.transparent, this.handleCls);
            }
        }
        // legacy
        this.corner = this.southeast;

        if(this.handles.indexOf('n') != -1 || this.handles.indexOf('w') != -1){
            this.updateBox = true;
        }

        this.activeHandle = null;

        if(this.resizeChild){
            if(typeof this.resizeChild == 'boolean'){
                this.resizeChild = Ext.get(this.el.dom.firstChild, true);
            }else{
                this.resizeChild = Ext.get(this.resizeChild, true);
            }
        }

        if(this.adjustments == 'auto'){
            var rc = this.resizeChild;
            var hw = this.west, he = this.east, hn = this.north, hs = this.south;
            if(rc && (hw || hn)){
                rc.position('relative');
                rc.setLeft(hw ? hw.el.getWidth() : 0);
                rc.setTop(hn ? hn.el.getHeight() : 0);
            }
            this.adjustments = [
                (he ? -he.el.getWidth() : 0) + (hw ? -hw.el.getWidth() : 0),
                (hn ? -hn.el.getHeight() : 0) + (hs ? -hs.el.getHeight() : 0) -1
            ];
        }

        if(this.draggable){
            this.dd = this.dynamic ?
                this.el.initDD(null) : this.el.initDDProxy(null, {dragElId: this.proxy.id});
            this.dd.setHandleElId(this.resizeChild ? this.resizeChild.id : this.el.id);
            if(this.constrainTo){
                this.dd.constrainTo(this.constrainTo);
            }
        }

        this.addEvents(

/**
             * @event beforeresize
             * Fired before resize is allowed. Set {@link #enabled} to false to cancel resize.
             * @param {Ext.Resizable} this
             * @param {Ext.EventObject} e The mousedown event
             */
            'beforeresize',

/**
             * @event resize
             * Fired after a resize.
             * @param {Ext.Resizable} this
             * @param {Number} width The new width
             * @param {Number} height The new height
             * @param {Ext.EventObject} e The mouseup event
             */
            'resize'
        );

        if(this.width !== null && this.height !== null){
            this.resizeTo(this.width, this.height);
        }else{
            this.updateChildSize();
        }
        if(Ext.isIE){
            this.el.dom.style.zoom = 1;
        }
        Ext.Resizable.superclass.constructor.call(this);
    },

/**
     * @cfg {Array/String} adjustments String 'auto' or an array [width, height] with values to be added to the
     * resize operation's new size (defaults to [0, 0])
     */
    adjustments : [0, 0],

/**
     * @cfg {Boolean} animate True to animate the resize (not compatible with dynamic sizing, defaults to false)
     */
    animate : false,

/**
     * @cfg {Mixed} constrainTo Constrain the resize to a particular element
     */

/**
     * @cfg {Boolean} disableTrackOver True to disable mouse tracking. This is only applied at config time. (defaults to false)
     */
    disableTrackOver : false,

/**
     * @cfg {Boolean} draggable Convenience to initialize drag drop (defaults to false)
     */
    draggable: false,

/**
     * @cfg {Number} duration Animation duration if animate = true (defaults to 0.35)
     */
    duration : 0.35,

/**
     * @cfg {Boolean} dynamic True to resize the element while dragging instead of using a proxy (defaults to false)
     */
    dynamic : false,

/**
     * @cfg {String} easing Animation easing if animate = true (defaults to 'easingOutStrong')
     */
    easing : 'easeOutStrong',

/**
     * @cfg {Boolean} enabled False to disable resizing (defaults to true)
     */
    enabled : true,

/**
     * @property enabled Writable. False if resizing is disabled.
     * @type Boolean
     */

/**
     * @cfg {String} handles String consisting of the resize handles to display (defaults to undefined).
     * Specify either 'all' or any of 'n s e w ne nw se sw'.
     */
    handles : false,

/**
     * @cfg {Boolean} multiDirectional Deprecated.  Deprecated style of adding multi-direction resize handles.
     */
    multiDirectional : false,

/**
     * @cfg {Number} height The height of the element in pixels (defaults to null)
     */
    height : null,

/**
     * @cfg {Number} width The width of the element in pixels (defaults to null)
     */
    width : null,

/**
     * @cfg {Number} heightIncrement The increment to snap the height resize in pixels
     * (only applies if {@link #dynamic}==true). Defaults to 0.
     */
    heightIncrement : 0,

/**
     * @cfg {Number} widthIncrement The increment to snap the width resize in pixels
     * (only applies if {@link #dynamic}==true). Defaults to 0.
     */
    widthIncrement : 0,

/**
     * @cfg {Number} minHeight The minimum height for the element (defaults to 5)
     */
    minHeight : 5,

/**
     * @cfg {Number} minWidth The minimum width for the element (defaults to 5)
     */
    minWidth : 5,

/**
     * @cfg {Number} maxHeight The maximum height for the element (defaults to 10000)
     */
    maxHeight : 10000,

/**
     * @cfg {Number} maxWidth The maximum width for the element (defaults to 10000)
     */
    maxWidth : 10000,

/**
     * @cfg {Number} minX The minimum x for the element (defaults to 0)
     */
    minX: 0,

/**
     * @cfg {Number} minY The minimum x for the element (defaults to 0)
     */
    minY: 0,

/**
     * @cfg {Boolean} pinned True to ensure that the resize handles are always visible, false to display them only when the
     * user mouses over the resizable borders. This is only applied at config time. (defaults to false)
     */
    pinned : false,

/**
     * @cfg {Boolean} preserveRatio True to preserve the original ratio between height
     * and width during resize (defaults to false)
     */
    preserveRatio : false,

/**
     * @cfg {Boolean/String/Element} resizeChild True to resize the first child, or id/element to resize (defaults to false)
     */
    resizeChild : false,

/**
     * @cfg {Boolean} transparent True for transparent handles. This is only applied at config time. (defaults to false)
     */
    transparent: false,

/**
     * @cfg {Ext.lib.Region} resizeRegion Constrain the resize to a particular region
     */

/**
     * @cfg {Boolean} wrap True to wrap an element with a div if needed (required for textareas and images, defaults to false)
     * in favor of the handles config option (defaults to false)
     */

/**
     * @cfg {String} handleCls A css class to add to each handle. Defaults to ''.
     */

/**
     * Perform a manual resize and fires the 'resize' event.
     * @param {Number} width
     * @param {Number} height
     */
    resizeTo : function(width, height){
        this.el.setSize(width, height);
        this.updateChildSize();
        this.fireEvent('resize', this, width, height, null);
    },

    // private
    startSizing : function(e, handle){
        this.fireEvent('beforeresize', this, e);
        if(this.enabled){ // 2nd enabled check in case disabled before beforeresize handler

            if(!this.overlay){
                this.overlay = this.el.createProxy({tag: 'div', cls: 'x-resizable-overlay', html: ' '}, Ext.getBody());
                this.overlay.unselectable();
                this.overlay.enableDisplayMode('block');
                this.overlay.on({
                    scope: this,
                    mousemove: this.onMouseMove,
                    mouseup: this.onMouseUp
                });
            }
            this.overlay.setStyle('cursor', handle.el.getStyle('cursor'));

            this.resizing = true;
            this.startBox = this.el.getBox();
            this.startPoint = e.getXY();
            this.offsets = [(this.startBox.x + this.startBox.width) - this.startPoint[0],
                            (this.startBox.y + this.startBox.height) - this.startPoint[1]];

            this.overlay.setSize(Ext.lib.Dom.getViewWidth(true), Ext.lib.Dom.getViewHeight(true));
            this.overlay.show();

            if(this.constrainTo) {
                var ct = Ext.get(this.constrainTo);
                this.resizeRegion = ct.getRegion().adjust(
                    ct.getFrameWidth('t'),
                    ct.getFrameWidth('l'),
                    -ct.getFrameWidth('b'),
                    -ct.getFrameWidth('r')
                );
            }

            this.proxy.setStyle('visibility', 'hidden'); // workaround display none
            this.proxy.show();
            this.proxy.setBox(this.startBox);
            if(!this.dynamic){
                this.proxy.setStyle('visibility', 'visible');
            }
        }
    },

    // private
    onMouseDown : function(handle, e){
        if(this.enabled){
            e.stopEvent();
            this.activeHandle = handle;
            this.startSizing(e, handle);
        }
    },

    // private
    onMouseUp : function(e){
        this.activeHandle = null;
        var size = this.resizeElement();
        this.resizing = false;
        this.handleOut();
        this.overlay.hide();
        this.proxy.hide();
        this.fireEvent('resize', this, size.width, size.height, e);
    },

    // private
    updateChildSize : function(){
        if(this.resizeChild){
            var el = this.el;
            var child = this.resizeChild;
            var adj = this.adjustments;
            if(el.dom.offsetWidth){
                var b = el.getSize(true);
                child.setSize(b.width+adj[0], b.height+adj[1]);
            }
            // Second call here for IE
            // The first call enables instant resizing and
            // the second call corrects scroll bars if they
            // exist
            if(Ext.isIE){
                setTimeout(function(){
                    if(el.dom.offsetWidth){
                        var b = el.getSize(true);
                        child.setSize(b.width+adj[0], b.height+adj[1]);
                    }
                }, 10);
            }
        }
    },

    // private
    snap : function(value, inc, min){
        if(!inc || !value){
            return value;
        }
        var newValue = value;
        var m = value % inc;
        if(m > 0){
            if(m > (inc/2)){
                newValue = value + (inc-m);
            }else{
                newValue = value - m;
            }
        }
        return Math.max(min, newValue);
    },

/**
     *
Performs resizing of the associated Element. This method is called internally by this
     * class, and should not be called by user code.

     *
If a Resizable is being used to resize an Element which encapsulates a more complex UI
     * component such as a Panel, this method may be overridden by specifying an implementation
     * as a config option to provide appropriate behaviour at the end of the resize operation on
     * mouseup, for example resizing the Panel, and relaying the Panel's content.

     *
The new area to be resized to is available by examining the state of the {@link #proxy}
     * Element. Example:

new Ext.Panel({
    title: 'Resize me',
    x: 100,
    y: 100,
    renderTo: Ext.getBody(),
    floating: true,
    frame: true,
    width: 400,
    height: 200,
    listeners: {
        render: function(p) {
            new Ext.Resizable(p.getEl(), {
                handles: 'all',
                pinned: true,
                transparent: true,
                resizeElement: function() {
                    var box = this.proxy.getBox();
                    p.updateBox(box);
                    if (p.layout) {
                        p.doLayout();
                    }
                    return box;
                }
           });
       }
    }
}).show();

     */
    resizeElement : function(){
        var box = this.proxy.getBox();
        if(this.updateBox){
            this.el.setBox(box, false, this.animate, this.duration, null, this.easing);
        }else{
            this.el.setSize(box.width, box.height, this.animate, this.duration, null, this.easing);
        }
        this.updateChildSize();
        if(!this.dynamic){
            this.proxy.hide();
        }
        if(this.draggable && this.constrainTo){
            this.dd.resetConstraints();
            this.dd.constrainTo(this.constrainTo);
        }
        return box;
    },

    // private
    constrain : function(v, diff, m, mx){
        if(v - diff < m){
            diff = v - m;
        }else if(v - diff > mx){
            diff = v - mx;
        }
        return diff;
    },

    // private
    onMouseMove : function(e){
        if(this.enabled && this.activeHandle){
            try{// try catch so if something goes wrong the user doesn't get hung

            if(this.resizeRegion && !this.resizeRegion.contains(e.getPoint())) {
                return;
            }

            //var curXY = this.startPoint;
            var curSize = this.curSize || this.startBox,
                x = this.startBox.x, y = this.startBox.y,
                ox = x,
                oy = y,
                w = curSize.width,
                h = curSize.height,
                ow = w,
                oh = h,
                mw = this.minWidth,
                mh = this.minHeight,
                mxw = this.maxWidth,
                mxh = this.maxHeight,
                wi = this.widthIncrement,
                hi = this.heightIncrement,
                eventXY = e.getXY(),
                diffX = -(this.startPoint[0] - Math.max(this.minX, eventXY[0])),
                diffY = -(this.startPoint[1] - Math.max(this.minY, eventXY[1])),
                pos = this.activeHandle.position,
                tw,
                th;

            switch(pos){
                case 'east':
                    w += diffX;
                    w = Math.min(Math.max(mw, w), mxw);
                    break;
                case 'south':
                    h += diffY;
                    h = Math.min(Math.max(mh, h), mxh);
                    break;
                case 'southeast':
                    w += diffX;
                    h += diffY;
                    w = Math.min(Math.max(mw, w), mxw);
                    h = Math.min(Math.max(mh, h), mxh);
                    break;
                case 'north':
                    diffY = this.constrain(h, diffY, mh, mxh);
                    y += diffY;
                    h -= diffY;
                    break;
                case 'west':
                    diffX = this.constrain(w, diffX, mw, mxw);
                    x += diffX;
                    w -= diffX;
                    break;
                case 'northeast':
                    w += diffX;
                    w = Math.min(Math.max(mw, w), mxw);
                    diffY = this.constrain(h, diffY, mh, mxh);
                    y += diffY;
                    h -= diffY;
                    break;
                case 'northwest':
                    diffX = this.constrain(w, diffX, mw, mxw);
                    diffY = this.constrain(h, diffY, mh, mxh);
                    y += diffY;
                    h -= diffY;
                    x += diffX;
                    w -= diffX;
                    break;
               case 'southwest':
                    diffX = this.constrain(w, diffX, mw, mxw);
                    h += diffY;
                    h = Math.min(Math.max(mh, h), mxh);
                    x += diffX;
                    w -= diffX;
                    break;
            }

            var sw = this.snap(w, wi, mw);
            var sh = this.snap(h, hi, mh);
            if(sw != w || sh != h){
                switch(pos){
                    case 'northeast':
                        y -= sh - h;
                    break;
                    case 'north':
                        y -= sh - h;
                        break;
                    case 'southwest':
                        x -= sw - w;
                    break;
                    case 'west':
                        x -= sw - w;
                        break;
                    case 'northwest':
                        x -= sw - w;
                        y -= sh - h;
                    break;
                }
                w = sw;
                h = sh;
            }

            if(this.preserveRatio){
                switch(pos){
                    case 'southeast':
                    case 'east':
                        h = oh * (w/ow);
                        h = Math.min(Math.max(mh, h), mxh);
                        w = ow * (h/oh);
                       break;
                    case 'south':
                        w = ow * (h/oh);
                        w = Math.min(Math.max(mw, w), mxw);
                        h = oh * (w/ow);
                        break;
                    case 'northeast':
                        w = ow * (h/oh);
                        w = Math.min(Math.max(mw, w), mxw);
                        h = oh * (w/ow);
                    break;
                    case 'north':
                        tw = w;
                        w = ow * (h/oh);
                        w = Math.min(Math.max(mw, w), mxw);
                        h = oh * (w/ow);
                        x += (tw - w) / 2;
                        break;
                    case 'southwest':
                        h = oh * (w/ow);
                        h = Math.min(Math.max(mh, h), mxh);
                        tw = w;
                        w = ow * (h/oh);
                        x += tw - w;
                        break;
                    case 'west':
                        th = h;
                        h = oh * (w/ow);
                        h = Math.min(Math.max(mh, h), mxh);
                        y += (th - h) / 2;
                        tw = w;
                        w = ow * (h/oh);
                        x += tw - w;
                       break;
                    case 'northwest':
                        tw = w;
                        th = h;
                        h = oh * (w/ow);
                        h = Math.min(Math.max(mh, h), mxh);
                        w = ow * (h/oh);
                        y += th - h;
                        x += tw - w;
                        break;

                }
            }
            this.proxy.setBounds(x, y, w, h);
            if(this.dynamic){
                this.resizeElement();
            }
            }catch(ex){}
        }
    },

    // private
    handleOver : function(){
        if(this.enabled){
            this.el.addClass('x-resizable-over');
        }
    },

    // private
    handleOut : function(){
        if(!this.resizing){
            this.el.removeClass('x-resizable-over');
        }
    },

/**
     * Returns the element this component is bound to.
     * @return {Ext.Element}
     */
    getEl : function(){
        return this.el;
    },

/**
     * Returns the resizeChild element (or null).
     * @return {Ext.Element}
     */
    getResizeChild : function(){
        return this.resizeChild;
    },

/**
     * Destroys this resizable. If the element was wrapped and
     * removeEl is not true then the element remains.
     * @param {Boolean} removeEl (optional) true to remove the element from the DOM
     */
    destroy : function(removeEl){
        Ext.destroy(this.dd, this.overlay, this.proxy);
        this.overlay = null;
        this.proxy = null;

        var ps = Ext.Resizable.positions;
        for(var k in ps){
            if(typeof ps[k] != 'function' && this[ps[k]]){
                this[ps[k]].destroy();
            }
        }
        if(removeEl){
            this.el.update('');
            Ext.destroy(this.el);
            this.el = null;
        }
        this.purgeListeners();
    },

    syncHandleHeight : function(){
        var h = this.el.getHeight(true);
        if(this.west){
            this.west.el.setHeight(h);
        }
        if(this.east){
            this.east.el.setHeight(h);
        }
    }
});

// private
// hash to map config positions to true positions
Ext.Resizable.positions = {
    n: 'north', s: 'south', e: 'east', w: 'west', se: 'southeast', sw: 'southwest', nw: 'northwest', ne: 'northeast'
};

Ext.Resizable.Handle = Ext.extend(Object, {
    constructor : function(rz, pos, disableTrackOver, transparent, cls){
       if(!this.tpl){
            // only initialize the template if resizable is used
            var tpl = Ext.DomHelper.createTemplate(
                {tag: 'div', cls: 'x-resizable-handle x-resizable-handle-{0}'}
            );
            tpl.compile();
            Ext.Resizable.Handle.prototype.tpl = tpl;
        }
        this.position = pos;
        this.rz = rz;
        this.el = this.tpl.append(rz.el.dom, [this.position], true);
        this.el.unselectable();
        if(transparent){
            this.el.setOpacity(0);
        }
        if(!Ext.isEmpty(cls)){
            this.el.addClass(cls);
        }
        this.el.on('mousedown', this.onMouseDown, this);
        if(!disableTrackOver){
            this.el.on({
                scope: this,
                mouseover: this.onMouseOver,
                mouseout: this.onMouseOut
            });
        }
    },

    // private
    afterResize : function(rz){
        // do nothing
    },
    // private
    onMouseDown : function(e){
        this.rz.onMouseDown(this, e);
    },
    // private
    onMouseOver : function(e){
        this.rz.handleOver(this, e);
    },
    // private
    onMouseOut : function(e){
        this.rz.handleOut(this, e);
    },
    // private
    destroy : function(){
        Ext.destroy(this.el);
        this.el = null;
    }
});


The source code

/*!
 * licensing@extjs.com
 * http://www.extjs.com/license
 */

/**
 * @class Ext.data.Response
 * A generic response class to normalize response-handling internally to the framework.
 */
Ext.data.Response = function(params) {
    Ext.apply(this, params);
};
Ext.data.Response.prototype = {

/**
     * @cfg {String} action {@link Ext.data.Api#actions}
     */
    action: undefined,

/**
     * @cfg {Boolean} success
     */
    success : undefined,

/**
     * @cfg {String} message
     */
    message : undefined,

/**
     * @cfg {Array/Object} data
     */
    data: undefined,

/**
     * @cfg {Object} raw The raw response returned from server-code
     */
    raw: undefined,

/**
     * @cfg {Ext.data.Record/Ext.data.Record[]} records related to the Request action
     */
    records: undefined
};


The source code

/*!
 * licensing@extjs.com
 * http://www.extjs.com/license
 */

/**
 * @class Ext.grid.RowNumberer
 * This is a utility class that can be passed into a {@link Ext.grid.ColumnModel} as a column config that provides
 * an automatic row numbering column.
 *
Usage:

 // This is a typical column config with the first column providing row numbers
 var colModel = new Ext.grid.ColumnModel([
    new Ext.grid.RowNumberer(),
    {header: "Name", width: 80, sortable: true},
    {header: "Code", width: 50, sortable: true},
    {header: "Description", width: 200, sortable: true}
 ]);

 * @constructor
 * @param {Object} config The configuration options
 */
Ext.grid.RowNumberer = Ext.extend(Object, {

/**
     * @cfg {String} header Any valid text or HTML fragment to display in the header cell for the row
     * number column (defaults to '').
     */
    header: "",

/**
     * @cfg {Number} width The default width in pixels of the row number column (defaults to 23).
     */
    width: 23,

/**
     * @cfg {Boolean} sortable True if the row number column is sortable (defaults to false).
     * @hide
     */
    sortable: false,

    constructor : function(config){
        Ext.apply(this, config);
        if(this.rowspan){
            this.renderer = this.renderer.createDelegate(this);
        }
    },

    // private
    fixed:true,
    hideable: false,
    menuDisabled:true,
    dataIndex: '',
    id: 'numberer',
    rowspan: undefined,

    // private
    renderer : function(v, p, record, rowIndex){
        if(this.rowspan){
            p.cellAttr = 'rowspan="'+this.rowspan+'"';
        }
        return rowIndex+1;
    }
});


The source code

/*!
 * licensing@extjs.com
 * http://www.extjs.com/license
 */

/**
 * @class Ext.grid.RowSelectionModel
 * @extends Ext.grid.AbstractSelectionModel
 * The default SelectionModel used by {@link Ext.grid.GridPanel}.
 * It supports multiple selections and keyboard selection/navigation. The objects stored
 * as selections and returned by {@link #getSelected}, and {@link #getSelections} are
 * the {@link Ext.data.Record Record}s which provide the data for the selected rows.
 * @constructor
 * @param {Object} config
 */
Ext.grid.RowSelectionModel = Ext.extend(Ext.grid.AbstractSelectionModel,  {

/**
     * @cfg {Boolean} singleSelect
     * true to allow selection of only one row at a time (defaults to false
     * allowing multiple selections)
     */
    singleSelect : false,

    constructor : function(config){
        Ext.apply(this, config);
        this.selections = new Ext.util.MixedCollection(false, function(o){
            return o.id;
        });

        this.last = false;
        this.lastActive = false;

        this.addEvents(

/**
             * @event selectionchange
             * Fires when the selection changes
             * @param {SelectionModel} this
             */
            'selectionchange',

/**
             * @event beforerowselect
             * Fires before a row is selected, return false to cancel the selection.
             * @param {SelectionModel} this
             * @param {Number} rowIndex The index to be selected
             * @param {Boolean} keepExisting False if other selections will be cleared
             * @param {Record} record The record to be selected
             */
            'beforerowselect',

/**
             * @event rowselect
             * Fires when a row is selected.
             * @param {SelectionModel} this
             * @param {Number} rowIndex The selected index
             * @param {Ext.data.Record} r The selected record
             */
            'rowselect',

/**
             * @event rowdeselect
             * Fires when a row is deselected.  To prevent deselection
             * {@link Ext.grid.AbstractSelectionModel#lock lock the selections}.
             * @param {SelectionModel} this
             * @param {Number} rowIndex
             * @param {Record} record
             */
            'rowdeselect'
        );
        Ext.grid.RowSelectionModel.superclass.constructor.call(this);
    },

/**
     * @cfg {Boolean} moveEditorOnEnter
     * false to turn off moving the editor to the next row down when the enter key is pressed
     * or the next row up when shift + enter keys are pressed.
     */
    // private
    initEvents : function(){

        if(!this.grid.enableDragDrop && !this.grid.enableDrag){
            this.grid.on('rowmousedown', this.handleMouseDown, this);
        }

        this.rowNav = new Ext.KeyNav(this.grid.getGridEl(), {
            'up' : function(e){
                if(!e.shiftKey || this.singleSelect){
                    this.selectPrevious(false);
                }else if(this.last !== false && this.lastActive !== false){
                    var last = this.last;
                    this.selectRange(this.last,  this.lastActive-1);
                    this.grid.getView().focusRow(this.lastActive);
                    if(last !== false){
                        this.last = last;
                    }
                }else{
                    this.selectFirstRow();
                }
            },
            'down' : function(e){
                if(!e.shiftKey || this.singleSelect){
                    this.selectNext(false);
                }else if(this.last !== false && this.lastActive !== false){
                    var last = this.last;
                    this.selectRange(this.last,  this.lastActive+1);
                    this.grid.getView().focusRow(this.lastActive);
                    if(last !== false){
                        this.last = last;
                    }
                }else{
                    this.selectFirstRow();
                }
            },
            scope: this
        });

        this.grid.getView().on({
            scope: this,
            refresh: this.onRefresh,
            rowupdated: this.onRowUpdated,
            rowremoved: this.onRemove
        });
    },

    // private
    onRefresh : function(){
        var ds = this.grid.store, index;
        var s = this.getSelections();
        this.clearSelections(true);
        for(var i = 0, len = s.length; i < len; i++){
            var r = s[i];
            if((index = ds.indexOfId(r.id)) != -1){
                this.selectRow(index, true);
            }
        }
        if(s.length != this.selections.getCount()){
            this.fireEvent('selectionchange', this);
        }
    },

    // private
    onRemove : function(v, index, r){
        if(this.selections.remove(r) !== false){
            this.fireEvent('selectionchange', this);
        }
    },

    // private
    onRowUpdated : function(v, index, r){
        if(this.isSelected(r)){
            v.onRowSelect(index);
        }
    },

/**
     * Select records.
     * @param {Array} records The records to select
     * @param {Boolean} keepExisting (optional) true to keep existing selections
     */
    selectRecords : function(records, keepExisting){
        if(!keepExisting){
            this.clearSelections();
        }
        var ds = this.grid.store;
        for(var i = 0, len = records.length; i < len; i++){
            this.selectRow(ds.indexOf(records[i]), true);
        }
    },

/**
     * Gets the number of selected rows.
     * @return {Number}
     */
    getCount : function(){
        return this.selections.length;
    },

/**
     * Selects the first row in the grid.
     */
    selectFirstRow : function(){
        this.selectRow(0);
    },

/**
     * Select the last row.
     * @param {Boolean} keepExisting (optional) true to keep existing selections
     */
    selectLastRow : function(keepExisting){
        this.selectRow(this.grid.store.getCount() - 1, keepExisting);
    },

/**
     * Selects the row immediately following the last selected row.
     * @param {Boolean} keepExisting (optional) true to keep existing selections
     * @return {Boolean} true if there is a next row, else false
     */
    selectNext : function(keepExisting){
        if(this.hasNext()){
            this.selectRow(this.last+1, keepExisting);
            this.grid.getView().focusRow(this.last);
            return true;
        }
        return false;
    },

/**
     * Selects the row that precedes the last selected row.
     * @param {Boolean} keepExisting (optional) true to keep existing selections
     * @return {Boolean} true if there is a previous row, else false
     */
    selectPrevious : function(keepExisting){
        if(this.hasPrevious()){
            this.selectRow(this.last-1, keepExisting);
            this.grid.getView().focusRow(this.last);
            return true;
        }
        return false;
    },

/**
     * Returns true if there is a next record to select
     * @return {Boolean}
     */
    hasNext : function(){
        return this.last !== false && (this.last+1) < this.grid.store.getCount();
    },

/**
     * Returns true if there is a previous record to select
     * @return {Boolean}
     */
    hasPrevious : function(){
        return !!this.last;
    },

/**
     * Returns the selected records
     * @return {Array} Array of selected records
     */
    getSelections : function(){
        return [].concat(this.selections.items);
    },

/**
     * Returns the first selected record.
     * @return {Record}
     */
    getSelected : function(){
        return this.selections.itemAt(0);
    },

/**
     * Calls the passed function with each selection. If the function returns
     * false, iteration is stopped and this function returns
     * false. Otherwise it returns true.
     * @param {Function} fn The function to call upon each iteration. It is passed the selected {@link Ext.data.Record Record}.
     * @param {Object} scope (optional) The scope (this reference) in which the function is executed. Defaults to this RowSelectionModel.
     * @return {Boolean} true if all selections were iterated
     */
    each : function(fn, scope){
        var s = this.getSelections();
        for(var i = 0, len = s.length; i < len; i++){
            if(fn.call(scope || this, s[i], i) === false){
                return false;
            }
        }
        return true;
    },

/**
     * Clears all selections if the selection model
     * {@link Ext.grid.AbstractSelectionModel#isLocked is not locked}.
     * @param {Boolean} fast (optional) true to bypass the
     * conditional checks and events described in {@link #deselectRow}.
     */
    clearSelections : function(fast){
        if(this.isLocked()){
            return;
        }
        if(fast !== true){
            var ds = this.grid.store;
            var s = this.selections;
            s.each(function(r){
                this.deselectRow(ds.indexOfId(r.id));
            }, this);
            s.clear();
        }else{
            this.selections.clear();
        }
        this.last = false;
    },

/**
     * Selects all rows if the selection model
     * {@link Ext.grid.AbstractSelectionModel#isLocked is not locked}.
     */
    selectAll : function(){
        if(this.isLocked()){
            return;
        }
        this.selections.clear();
        for(var i = 0, len = this.grid.store.getCount(); i < len; i++){
            this.selectRow(i, true);
        }
    },

/**
     * Returns true if there is a selection.
     * @return {Boolean}
     */
    hasSelection : function(){
        return this.selections.length > 0;
    },

/**
     * Returns true if the specified row is selected.
     * @param {Number/Record} index The record or index of the record to check
     * @return {Boolean}
     */
    isSelected : function(index){
        var r = Ext.isNumber(index) ? this.grid.store.getAt(index) : index;
        return (r && this.selections.key(r.id) ? true : false);
    },

/**
     * Returns true if the specified record id is selected.
     * @param {String} id The id of record to check
     * @return {Boolean}
     */
    isIdSelected : function(id){
        return (this.selections.key(id) ? true : false);
    },

    // private
    handleMouseDown : function(g, rowIndex, e){
        if(e.button !== 0 || this.isLocked()){
            return;
        }
        var view = this.grid.getView();
        if(e.shiftKey && !this.singleSelect && this.last !== false){
            var last = this.last;
            this.selectRange(last, rowIndex, e.ctrlKey);
            this.last = last; // reset the last
            view.focusRow(rowIndex);
        }else{
            var isSelected = this.isSelected(rowIndex);
            if(e.ctrlKey && isSelected){
                this.deselectRow(rowIndex);
            }else if(!isSelected || this.getCount() > 1){
                this.selectRow(rowIndex, e.ctrlKey || e.shiftKey);
                view.focusRow(rowIndex);
            }
        }
    },

/**
     * Selects multiple rows.
     * @param {Array} rows Array of the indexes of the row to select
     * @param {Boolean} keepExisting (optional) true to keep
     * existing selections (defaults to false)
     */
    selectRows : function(rows, keepExisting){
        if(!keepExisting){
            this.clearSelections();
        }
        for(var i = 0, len = rows.length; i < len; i++){
            this.selectRow(rows[i], true);
        }
    },

/**
     * Selects a range of rows if the selection model
     * {@link Ext.grid.AbstractSelectionModel#isLocked is not locked}.
     * All rows in between startRow and endRow are also selected.
     * @param {Number} startRow The index of the first row in the range
     * @param {Number} endRow The index of the last row in the range
     * @param {Boolean} keepExisting (optional) True to retain existing selections
     */
    selectRange : function(startRow, endRow, keepExisting){
        var i;
        if(this.isLocked()){
            return;
        }
        if(!keepExisting){
            this.clearSelections();
        }
        if(startRow <= endRow){
            for(i = startRow; i <= endRow; i++){
                this.selectRow(i, true);
            }
        }else{
            for(i = startRow; i >= endRow; i--){
                this.selectRow(i, true);
            }
        }
    },

/**
     * Deselects a range of rows if the selection model
     * {@link Ext.grid.AbstractSelectionModel#isLocked is not locked}.
     * All rows in between startRow and endRow are also deselected.
     * @param {Number} startRow The index of the first row in the range
     * @param {Number} endRow The index of the last row in the range
     */
    deselectRange : function(startRow, endRow, preventViewNotify){
        if(this.isLocked()){
            return;
        }
        for(var i = startRow; i <= endRow; i++){
            this.deselectRow(i, preventViewNotify);
        }
    },

/**
     * Selects a row.  Before selecting a row, checks if the selection model
     * {@link Ext.grid.AbstractSelectionModel#isLocked is locked} and fires the
     * {@link #beforerowselect} event.  If these checks are satisfied the row
     * will be selected and followed up by  firing the {@link #rowselect} and
     * {@link #selectionchange} events.
     * @param {Number} row The index of the row to select
     * @param {Boolean} keepExisting (optional) true to keep existing selections
     * @param {Boolean} preventViewNotify (optional) Specify true to
     * prevent notifying the view (disables updating the selected appearance)
     */
    selectRow : function(index, keepExisting, preventViewNotify){
        if(this.isLocked() || (index < 0 || index >= this.grid.store.getCount()) || (keepExisting && this.isSelected(index))){
            return;
        }
        var r = this.grid.store.getAt(index);
        if(r && this.fireEvent('beforerowselect', this, index, keepExisting, r) !== false){
            if(!keepExisting || this.singleSelect){
                this.clearSelections();
            }
            this.selections.add(r);
            this.last = this.lastActive = index;
            if(!preventViewNotify){
                this.grid.getView().onRowSelect(index);
            }
            this.fireEvent('rowselect', this, index, r);
            this.fireEvent('selectionchange', this);
        }
    },

/**
     * Deselects a row.  Before deselecting a row, checks if the selection model
     * {@link Ext.grid.AbstractSelectionModel#isLocked is locked}.
     * If this check is satisfied the row will be deselected and followed up by
     * firing the {@link #rowdeselect} and {@link #selectionchange} events.
     * @param {Number} row The index of the row to deselect
     * @param {Boolean} preventViewNotify (optional) Specify true to
     * prevent notifying the view (disables updating the selected appearance)
     */
    deselectRow : function(index, preventViewNotify){
        if(this.isLocked()){
            return;
        }
        if(this.last == index){
            this.last = false;
        }
        if(this.lastActive == index){
            this.lastActive = false;
        }
        var r = this.grid.store.getAt(index);
        if(r){
            this.selections.remove(r);
            if(!preventViewNotify){
                this.grid.getView().onRowDeselect(index);
            }
            this.fireEvent('rowdeselect', this, index, r);
            this.fireEvent('selectionchange', this);
        }
    },

    // private
    restoreLast : function(){
        if(this._last){
            this.last = this._last;
        }
    },

    // private
    acceptsNav : function(row, col, cm){
        return !cm.isHidden(col) && cm.isCellEditable(col, row);
    },

    // private
    onEditorKey : function(field, e){
        var k = e.getKey(),
            newCell,
            g = this.grid,
            last = g.lastEdit,
            ed = g.activeEditor,
            ae, last, r, c;
        var shift = e.shiftKey;
        if(k == e.TAB){
            e.stopEvent();
            ed.completeEdit();
            if(shift){
                newCell = g.walkCells(ed.row, ed.col-1, -1, this.acceptsNav, this);
            }else{
                newCell = g.walkCells(ed.row, ed.col+1, 1, this.acceptsNav, this);
            }
        }else if(k == e.ENTER){
            if(this.moveEditorOnEnter !== false){
                if(shift){
                    newCell = g.walkCells(last.row - 1, last.col, -1, this.acceptsNav, this);
                }else{
                    newCell = g.walkCells(last.row + 1, last.col, 1, this.acceptsNav, this);
                }
            }
        }
        if(newCell){
            r = newCell[0];
            c = newCell[1];

            if(last.row != r){
                this.selectRow(r); // *** highlight newly-selected cell and update selection
            }

            if(g.isEditor && g.editing){ // *** handle tabbing while editorgrid is in edit mode
                ae = g.activeEditor;
                if(ae && ae.field.triggerBlur){
                    // *** if activeEditor is a TriggerField, explicitly call its triggerBlur() method
                    ae.field.triggerBlur();
                }
            }
            g.startEditing(r, c);
        }
    },

    destroy : function(){
        if(this.rowNav){
            this.rowNav.disable();
            this.rowNav = null;
        }
        Ext.grid.RowSelectionModel.superclass.destroy.call(this);
    }
});


The source code

/*!
 * licensing@extjs.com
 * http://www.extjs.com/license
 */

/**
 * @class Ext.data.ScriptTagProxy
 * @extends Ext.data.DataProxy
 * An implementation of Ext.data.DataProxy that reads a data object from a URL which may be in a domain
 * other than the originating domain of the running page.

 *

 * Note that if you are retrieving data from a page that is in a domain that is NOT the same as the originating domain
 * of the running page, you must use this class, rather than HttpProxy.

 *

 * The content passed back from a server resource requested by a ScriptTagProxy must be executable JavaScript
 * source code because it is used as the source inside a <script> tag.

 *

 * In order for the browser to process the returned data, the server must wrap the data object
 * with a call to a callback function, the name of which is passed as a parameter by the ScriptTagProxy.
 * Below is a Java example for a servlet which returns data for either a ScriptTagProxy, or an HttpProxy
 * depending on whether the callback name was passed:
 *

 *

boolean scriptTag = false;
String cb = request.getParameter("callback");
if (cb != null) {
    scriptTag = true;
    response.setContentType("text/javascript");
} else {
    response.setContentType("application/x-json");
}
Writer out = response.getWriter();
if (scriptTag) {
    out.write(cb + "(");
}
out.print(dataBlock.toJsonString());
if (scriptTag) {
    out.write(");");
}

 *
Below is a PHP example to do the same thing:

$callback = $_REQUEST['callback'];

// Create the output object.
$output = array('a' => 'Apple', 'b' => 'Banana');

//start output
if ($callback) {
    header('Content-Type: text/javascript');
    echo $callback . '(' . json_encode($output) . ');';
} else {
    header('Content-Type: application/x-json');
    echo json_encode($output);
}

 *
Below is the ASP.Net code to do the same thing:

String jsonString = "{success: true}";
String cb = Request.Params.Get("callback");
String responseString = "";
if (!String.IsNullOrEmpty(cb)) {
    responseString = cb + "(" + jsonString + ")";
} else {
    responseString = jsonString;
}
Response.Write(responseString);

 *
 * @constructor
 * @param {Object} config A configuration object.
 */
Ext.data.ScriptTagProxy = function(config){
    Ext.apply(this, config);

    Ext.data.ScriptTagProxy.superclass.constructor.call(this, config);

    this.head = document.getElementsByTagName("head")[0];

/**
     * @event loadexception
     * Deprecated in favor of 'exception' event.
     * Fires if an exception occurs in the Proxy during data loading.  This event can be fired for one of two reasons:
     *
  • The load call timed out.  This means the load callback did not execute within the time limit
     * specified by {@link #timeout}.  In this case, this event will be raised and the
     * fourth parameter (read error) will be null.
    •
     *
  • The load succeeded but the reader could not read the response.  This means the server returned
     * data, but the configured Reader threw an error while reading the data.  In this case, this event will be
     * raised and the caught error will be passed along as the fourth parameter of this event.

     * Note that this event is also relayed through {@link Ext.data.Store}, so you can listen for it directly
     * on any Store instance.
     * @param {Object} this
     * @param {Object} options The loading options that were specified (see {@link #load} for details).  If the load
     * call timed out, this parameter will be null.
     * @param {Object} arg The callback's arg object passed to the {@link #load} function
     * @param {Error} e The JavaScript Error object caught if the configured Reader could not read the data.
     * If the remote request returns success: false, this parameter will be null.
     */
};

Ext.data.ScriptTagProxy.TRANS_ID = 1000;

Ext.extend(Ext.data.ScriptTagProxy, Ext.data.DataProxy, {

/**
     * @cfg {String} url The URL from which to request the data object.
     */

/**
     * @cfg {Number} timeout (optional) The number of milliseconds to wait for a response. Defaults to 30 seconds.
     */
    timeout : 30000,

/**
     * @cfg {String} callbackParam (Optional) The name of the parameter to pass to the server which tells
     * the server the name of the callback function set up by the load call to process the returned data object.
     * Defaults to "callback".
The server-side processing must read this parameter value, and generate
     * javascript output which calls this named function passing the data object as its only parameter.
     */
    callbackParam : "callback",

/**
     *  @cfg {Boolean} nocache (optional) Defaults to true. Disable caching by adding a unique parameter
     * name to the request.
     */
    nocache : true,

/**
     * HttpProxy implementation of DataProxy#doRequest
     * @param {String} action
     * @param {Ext.data.Record/Ext.data.Record[]} rs If action is read, rs will be null
     * @param {Object} params An object containing properties which are to be used as HTTP parameters
     * for the request to the remote server.
     * @param {Ext.data.DataReader} reader The Reader object which converts the data
     * object into a block of Ext.data.Records.
     * @param {Function} callback The function into which to pass the block of Ext.data.Records.
     * The function must be passed

     *
  • The Record block object
    •
     *
  • The "arg" argument from the load function
    •
     *
  • A boolean success indicator
    •
     *

     * @param {Object} scope The scope (this reference) in which the callback function is executed. Defaults to the browser window.
     * @param {Object} arg An optional argument which is passed to the callback as its second parameter.
     */
    doRequest : function(action, rs, params, reader, callback, scope, arg) {
        var p = Ext.urlEncode(Ext.apply(params, this.extraParams));

        var url = this.buildUrl(action, rs);
        if (!url) {
            throw new Ext.data.Api.Error('invalid-url', url);
        }
        url = Ext.urlAppend(url, p);

        if(this.nocache){
            url = Ext.urlAppend(url, '_dc=' + (new Date().getTime()));
        }
        var transId = ++Ext.data.ScriptTagProxy.TRANS_ID;
        var trans = {
            id : transId,
            action: action,
            cb : "stcCallback"+transId,
            scriptId : "stcScript"+transId,
            params : params,
            arg : arg,
            url : url,
            callback : callback,
            scope : scope,
            reader : reader
        };
        window[trans.cb] = this.createCallback(action, rs, trans);
        url += String.format("&{0}={1}", this.callbackParam, trans.cb);
        if(this.autoAbort !== false){
            this.abort();
        }

        trans.timeoutId = this.handleFailure.defer(this.timeout, this, [trans]);

        var script = document.createElement("script");
        script.setAttribute("src", url);
        script.setAttribute("type", "text/javascript");
        script.setAttribute("id", trans.scriptId);
        this.head.appendChild(script);

        this.trans = trans;
    },

    // @private createCallback
    createCallback : function(action, rs, trans) {
        var self = this;
        return function(res) {
            self.trans = false;
            self.destroyTrans(trans, true);
            if (action === Ext.data.Api.actions.read) {
                self.onRead.call(self, action, trans, res);
            } else {
                self.onWrite.call(self, action, trans, res, rs);
            }
        };
    },

/**
     * Callback for read actions
     * @param {String} action [Ext.data.Api.actions.create|read|update|destroy]
     * @param {Object} trans The request transaction object
     * @param {Object} res The server response
     * @protected
     */
    onRead : function(action, trans, res) {
        var result;
        try {
            result = trans.reader.readRecords(res);
        }catch(e){
            // @deprecated: fire loadexception
            this.fireEvent("loadexception", this, trans, res, e);

            this.fireEvent('exception', this, 'response', action, trans, res, e);
            trans.callback.call(trans.scope||window, null, trans.arg, false);
            return;
        }
        if (result.success === false) {
            // @deprecated: fire old loadexception for backwards-compat.
            this.fireEvent('loadexception', this, trans, res);

            this.fireEvent('exception', this, 'remote', action, trans, res, null);
        } else {
            this.fireEvent("load", this, res, trans.arg);
        }
        trans.callback.call(trans.scope||window, result, trans.arg, result.success);
    },

/**
     * Callback for write actions
     * @param {String} action [Ext.data.Api.actions.create|read|update|destroy]
     * @param {Object} trans The request transaction object
     * @param {Object} res The server response
     * @protected
     */
    onWrite : function(action, trans, response, rs) {
        var reader = trans.reader;
        try {
            // though we already have a response object here in STP, run through readResponse to catch any meta-data exceptions.
            var res = reader.readResponse(action, response);
        } catch (e) {
            this.fireEvent('exception', this, 'response', action, trans, res, e);
            trans.callback.call(trans.scope||window, null, res, false);
            return;
        }
        if(!res.success === true){
            this.fireEvent('exception', this, 'remote', action, trans, res, rs);
            trans.callback.call(trans.scope||window, null, res, false);
            return;
        }
        this.fireEvent("write", this, action, res.data, res, rs, trans.arg );
        trans.callback.call(trans.scope||window, res.data, res, true);
    },

    // private
    isLoading : function(){
        return this.trans ? true : false;
    },

/**
     * Abort the current server request.
     */
    abort : function(){
        if(this.isLoading()){
            this.destroyTrans(this.trans);
        }
    },

    // private
    destroyTrans : function(trans, isLoaded){
        this.head.removeChild(document.getElementById(trans.scriptId));
        clearTimeout(trans.timeoutId);
        if(isLoaded){
            window[trans.cb] = undefined;
            try{
                delete window[trans.cb];
            }catch(e){}
        }else{
            // if hasn't been loaded, wait for load to remove it to prevent script error
            window[trans.cb] = function(){
                window[trans.cb] = undefined;
                try{
                    delete window[trans.cb];
                }catch(e){}
            };
        }
    },

    // private
    handleFailure : function(trans){
        this.trans = false;
        this.destroyTrans(trans, false);
        if (trans.action === Ext.data.Api.actions.read) {
            // @deprecated firing loadexception
            this.fireEvent("loadexception", this, null, trans.arg);
        }

        this.fireEvent('exception', this, 'response', trans.action, {
            response: null,
            options: trans.arg
        });
        trans.callback.call(trans.scope||window, null, trans.arg, false);
    },

    // inherit docs
    destroy: function(){
        this.abort();
        Ext.data.ScriptTagProxy.superclass.destroy.call(this);
    }
});


The source code

/*!
 * licensing@extjs.com
 * http://www.extjs.com/license
 */

/**
 * @class Ext.dd.ScrollManager
 *
Provides automatic scrolling of overflow regions in the page during drag operations.

 *
The ScrollManager configs will be used as the defaults for any scroll container registered with it,
 * but you can also override most of the configs per scroll container by adding a
 * ddScrollConfig object to the target element that contains these properties: {@link #hthresh},
 * {@link #vthresh}, {@link #increment} and {@link #frequency}.  Example usage:
 *

var el = Ext.get('scroll-ct');
el.ddScrollConfig = {
    vthresh: 50,
    hthresh: -1,
    frequency: 100,
    increment: 200
};
Ext.dd.ScrollManager.register(el);

 * Note: This class uses "Point Mode" and is untested in "Intersect Mode".
 * @singleton
 */
Ext.dd.ScrollManager = function(){
    var ddm = Ext.dd.DragDropMgr;
    var els = {};
    var dragEl = null;
    var proc = {};

    var onStop = function(e){
        dragEl = null;
        clearProc();
    };

    var triggerRefresh = function(){
        if(ddm.dragCurrent){
             ddm.refreshCache(ddm.dragCurrent.groups);
        }
    };

    var doScroll = function(){
        if(ddm.dragCurrent){
            var dds = Ext.dd.ScrollManager;
            var inc = proc.el.ddScrollConfig ?
                      proc.el.ddScrollConfig.increment : dds.increment;
            if(!dds.animate){
                if(proc.el.scroll(proc.dir, inc)){
                    triggerRefresh();
                }
            }else{
                proc.el.scroll(proc.dir, inc, true, dds.animDuration, triggerRefresh);
            }
        }
    };

    var clearProc = function(){
        if(proc.id){
            clearInterval(proc.id);
        }
        proc.id = 0;
        proc.el = null;
        proc.dir = "";
    };

    var startProc = function(el, dir){
        clearProc();
        proc.el = el;
        proc.dir = dir;
        var freq = (el.ddScrollConfig && el.ddScrollConfig.frequency) ?
                el.ddScrollConfig.frequency : Ext.dd.ScrollManager.frequency;
        proc.id = setInterval(doScroll, freq);
    };

    var onFire = function(e, isDrop){
        if(isDrop || !ddm.dragCurrent){ return; }
        var dds = Ext.dd.ScrollManager;
        if(!dragEl || dragEl != ddm.dragCurrent){
            dragEl = ddm.dragCurrent;
            // refresh regions on drag start
            dds.refreshCache();
        }

        var xy = Ext.lib.Event.getXY(e);
        var pt = new Ext.lib.Point(xy[0], xy[1]);
        for(var id in els){
            var el = els[id], r = el._region;
            var c = el.ddScrollConfig ? el.ddScrollConfig : dds;
            if(r && r.contains(pt) && el.isScrollable()){
                if(r.bottom - pt.y <= c.vthresh){
                    if(proc.el != el){
                        startProc(el, "down");
                    }
                    return;
                }else if(r.right - pt.x <= c.hthresh){
                    if(proc.el != el){
                        startProc(el, "left");
                    }
                    return;
                }else if(pt.y - r.top <= c.vthresh){
                    if(proc.el != el){
                        startProc(el, "up");
                    }
                    return;
                }else if(pt.x - r.left <= c.hthresh){
                    if(proc.el != el){
                        startProc(el, "right");
                    }
                    return;
                }
            }
        }
        clearProc();
    };

    ddm.fireEvents = ddm.fireEvents.createSequence(onFire, ddm);
    ddm.stopDrag = ddm.stopDrag.createSequence(onStop, ddm);

    return {

/**
         * Registers new overflow element(s) to auto scroll
         * @param {Mixed/Array} el The id of or the element to be scrolled or an array of either
         */
        register : function(el){
            if(Ext.isArray(el)){
                for(var i = 0, len = el.length; i < len; i++) {
                    this.register(el[i]);
                }
            }else{
                el = Ext.get(el);
                els[el.id] = el;
            }
        },

/**
         * Unregisters overflow element(s) so they are no longer scrolled
         * @param {Mixed/Array} el The id of or the element to be removed or an array of either
         */
        unregister : function(el){
            if(Ext.isArray(el)){
                for(var i = 0, len = el.length; i < len; i++) {
                    this.unregister(el[i]);
                }
            }else{
                el = Ext.get(el);
                delete els[el.id];
            }
        },

/**
         * The number of pixels from the top or bottom edge of a container the pointer needs to be to
         * trigger scrolling (defaults to 25)
         * @type Number
         */
        vthresh : 25,

/**
         * The number of pixels from the right or left edge of a container the pointer needs to be to
         * trigger scrolling (defaults to 25)
         * @type Number
         */
        hthresh : 25,

/**
         * The number of pixels to scroll in each scroll increment (defaults to 50)
         * @type Number
         */
        increment : 100,

/**
         * The frequency of scrolls in milliseconds (defaults to 500)
         * @type Number
         */
        frequency : 500,

/**
         * True to animate the scroll (defaults to true)
         * @type Boolean
         */
        animate: true,

/**
         * The animation duration in seconds -
         * MUST BE less than Ext.dd.ScrollManager.frequency! (defaults to .4)
         * @type Number
         */
        animDuration: .4,

/**
         * Manually trigger a cache refresh.
         */
        refreshCache : function(){
            for(var id in els){
                if(typeof els[id] == 'object'){ // for people extending the object prototype
                    els[id]._region = els[id].getRegion();
                }
            }
        }
    };
}();


The source code

/*!
 * licensing@extjs.com
 * http://www.extjs.com/license
 */

/**
 * @class Ext.menu.Separator
 * @extends Ext.menu.BaseItem
 * Adds a separator bar to a menu, used to divide logical groups of menu items. Generally you will
 * add one of these by using "-" in you call to add() or in your items config rather than creating one directly.
 * @constructor
 * @param {Object} config Configuration options
 * @xtype menuseparator
 */
Ext.menu.Separator = Ext.extend(Ext.menu.BaseItem, {

/**
     * @cfg {String} itemCls The default CSS class to use for separators (defaults to "x-menu-sep")
     */
    itemCls : "x-menu-sep",

/**
     * @cfg {Boolean} hideOnClick True to hide the containing menu after this item is clicked (defaults to false)
     */
    hideOnClick : false,

/**
     * @cfg {String} activeClass
     * @hide
     */
    activeClass: '',

    // private
    onRender : function(li){
        var s = document.createElement("span");
        s.className = this.itemCls;
        s.innerHTML = " ";
        this.el = s;
        li.addClass("x-menu-sep-li");
        Ext.menu.Separator.superclass.onRender.apply(this, arguments);
    }
});
Ext.reg('menuseparator', Ext.menu.Separator);


The source code

/*!
 * licensing@extjs.com
 * http://www.extjs.com/license
 */

/**
 * @class Ext.Shadow
 * Simple class that can provide a shadow effect for any element.  Note that the element MUST be absolutely positioned,
 * and the shadow does not provide any shimming.  This should be used only in simple cases -- for more advanced
 * functionality that can also provide the same shadow effect, see the {@link Ext.Layer} class.
 * @constructor
 * Create a new Shadow
 * @param {Object} config The config object
 */
Ext.Shadow = function(config){
    Ext.apply(this, config);
    if(typeof this.mode != "string"){
        this.mode = this.defaultMode;
    }
    var o = this.offset, a = {h: 0};
    var rad = Math.floor(this.offset/2);
    switch(this.mode.toLowerCase()){ // all this hideous nonsense calculates the various offsets for shadows
        case "drop":
            a.w = 0;
            a.l = a.t = o;
            a.t -= 1;
            if(Ext.isIE){
                a.l -= this.offset + rad;
                a.t -= this.offset + rad;
                a.w -= rad;
                a.h -= rad;
                a.t += 1;
            }
        break;
        case "sides":
            a.w = (o*2);
            a.l = -o;
            a.t = o-1;
            if(Ext.isIE){
                a.l -= (this.offset - rad);
                a.t -= this.offset + rad;
                a.l += 1;
                a.w -= (this.offset - rad)*2;
                a.w -= rad + 1;
                a.h -= 1;
            }
        break;
        case "frame":
            a.w = a.h = (o*2);
            a.l = a.t = -o;
            a.t += 1;
            a.h -= 2;
            if(Ext.isIE){
                a.l -= (this.offset - rad);
                a.t -= (this.offset - rad);
                a.l += 1;
                a.w -= (this.offset + rad + 1);
                a.h -= (this.offset + rad);
                a.h += 1;
            }
        break;
    };

    this.adjusts = a;
};

Ext.Shadow.prototype = {

/**
     * @cfg {String} mode
     * The shadow display mode.  Supports the following options:

     *
  • sides : Shadow displays on both sides and bottom only
    •
     *
  • frame : Shadow displays equally on all four sides
    •
     *
  • drop : Traditional bottom-right drop shadow
    •
     *

     */

/**
     * @cfg {String} offset
     * The number of pixels to offset the shadow from the element (defaults to 4)
     */
    offset: 4,

    // private
    defaultMode: "drop",

/**
     * Displays the shadow under the target element
     * @param {Mixed} targetEl The id or element under which the shadow should display
     */
    show : function(target){
        target = Ext.get(target);
        if(!this.el){
            this.el = Ext.Shadow.Pool.pull();
            if(this.el.dom.nextSibling != target.dom){
                this.el.insertBefore(target);
            }
        }
        this.el.setStyle("z-index", this.zIndex || parseInt(target.getStyle("z-index"), 10)-1);
        if(Ext.isIE){
            this.el.dom.style.filter="progid:DXImageTransform.Microsoft.alpha(opacity=50) progid:DXImageTransform.Microsoft.Blur(pixelradius="+(this.offset)+")";
        }
        this.realign(
            target.getLeft(true),
            target.getTop(true),
            target.getWidth(),
            target.getHeight()
        );
        this.el.dom.style.display = "block";
    },

/**
     * Returns true if the shadow is visible, else false
     */
    isVisible : function(){
        return this.el ? true : false;
    },

/**
     * Direct alignment when values are already available. Show must be called at least once before
     * calling this method to ensure it is initialized.
     * @param {Number} left The target element left position
     * @param {Number} top The target element top position
     * @param {Number} width The target element width
     * @param {Number} height The target element height
     */
    realign : function(l, t, w, h){
        if(!this.el){
            return;
        }
        var a = this.adjusts, d = this.el.dom, s = d.style;
        var iea = 0;
        s.left = (l+a.l)+"px";
        s.top = (t+a.t)+"px";
        var sw = (w+a.w), sh = (h+a.h), sws = sw +"px", shs = sh + "px";
        if(s.width != sws || s.height != shs){
            s.width = sws;
            s.height = shs;
            if(!Ext.isIE){
                var cn = d.childNodes;
                var sww = Math.max(0, (sw-12))+"px";
                cn[0].childNodes[1].style.width = sww;
                cn[1].childNodes[1].style.width = sww;
                cn[2].childNodes[1].style.width = sww;
                cn[1].style.height = Math.max(0, (sh-12))+"px";
            }
        }
    },

/**
     * Hides this shadow
     */
    hide : function(){
        if(this.el){
            this.el.dom.style.display = "none";
            Ext.Shadow.Pool.push(this.el);
            delete this.el;
        }
    },

/**
     * Adjust the z-index of this shadow
     * @param {Number} zindex The new z-index
     */
    setZIndex : function(z){
        this.zIndex = z;
        if(this.el){
            this.el.setStyle("z-index", z);
        }
    }
};

// Private utility class that manages the internal Shadow cache
Ext.Shadow.Pool = function(){
    var p = [];
    var markup = Ext.isIE ?
                 '
' :
                 '
';
    return {
        pull : function(){
            var sh = p.shift();
            if(!sh){
                sh = Ext.get(Ext.DomHelper.insertHtml("beforeBegin", document.body.firstChild, markup));
                sh.autoBoxAdjust = false;
            }
            return sh;
        },

        push : function(sh){
            p.push(sh);
        }
    };
}();


The source code

/*!
 * licensing@extjs.com
 * http://www.extjs.com/license
 */
Ext.ns('Ext.slider');

/**
 * @class Ext.slider.Thumb
 * @extends Object
 * Represents a single thumb element on a Slider. This would not usually be created manually and would instead
 * be created internally by an {@link Ext.slider.MultiSlider Ext.Slider}.
 */
Ext.slider.Thumb = Ext.extend(Object, {

/**
     * @constructor
     * @cfg {Ext.slider.MultiSlider} slider The Slider to render to (required)
     */
    constructor: function(config) {

/**
         * @property slider
         * @type Ext.slider.MultiSlider
         * The slider this thumb is contained within
         */
        Ext.apply(this, config || {}, {
            cls: 'x-slider-thumb',

/**
             * @cfg {Boolean} constrain True to constrain the thumb so that it cannot overlap its siblings
             */
            constrain: false
        });

        Ext.slider.Thumb.superclass.constructor.call(this, config);

        if (this.slider.vertical) {
            Ext.apply(this, Ext.slider.Thumb.Vertical);
        }
    },

/**
     * Renders the thumb into a slider
     */
    render: function() {
        this.el = this.slider.innerEl.insertFirst({cls: this.cls});

        this.initEvents();
    },

/**
     * Enables the thumb if it is currently disabled
     */
    enable: function() {
        this.disabled = false;
        this.el.removeClass(this.slider.disabledClass);
    },

/**
     * Disables the thumb if it is currently enabled
     */
    disable: function() {
        this.disabled = true;
        this.el.addClass(this.slider.disabledClass);
    },

/**
     * Sets up an Ext.dd.DragTracker for this thumb
     */
    initEvents: function() {
        var el = this.el;

        el.addClassOnOver('x-slider-thumb-over');

        this.tracker = new Ext.dd.DragTracker({
            onBeforeStart: this.onBeforeDragStart.createDelegate(this),
            onStart      : this.onDragStart.createDelegate(this),
            onDrag       : this.onDrag.createDelegate(this),
            onEnd        : this.onDragEnd.createDelegate(this),
            tolerance    : 3,
            autoStart    : 300
        });

        this.tracker.initEl(el);
    },

    /**
     * @private
     * This is tied into the internal Ext.dd.DragTracker. If the slider is currently disabled,
     * this returns false to disable the DragTracker too.
     * @return {Boolean} False if the slider is currently disabled
     */
    onBeforeDragStart : function(e) {
        if (this.disabled) {
            return false;
        } else {
            this.slider.promoteThumb(this);
            return true;
        }
    },

    /**
     * @private
     * This is tied into the internal Ext.dd.DragTracker's onStart template method. Adds the drag CSS class
     * to the thumb and fires the 'dragstart' event
     */
    onDragStart: function(e){
        this.el.addClass('x-slider-thumb-drag');
        this.dragging = true;
        this.dragStartValue = this.value;

        this.slider.fireEvent('dragstart', this.slider, e, this);
    },

    /**
     * @private
     * This is tied into the internal Ext.dd.DragTracker's onDrag template method. This is called every time
     * the DragTracker detects a drag movement. It updates the Slider's value using the position of the drag
     */
    onDrag: function(e) {
        var slider   = this.slider,
            index    = this.index,
            newValue = this.getNewValue();

        if (this.constrain) {
            var above = slider.thumbs[index + 1],
                below = slider.thumbs[index - 1];

            if (below != undefined && newValue <= below.value) newValue = below.value;
            if (above != undefined && newValue >= above.value) newValue = above.value;
        }

        slider.setValue(index, newValue, false);
        slider.fireEvent('drag', slider, e, this);
    },

    getNewValue: function() {
        var slider   = this.slider,
            pos      = slider.innerEl.translatePoints(this.tracker.getXY());

        return Ext.util.Format.round(slider.reverseValue(pos.left), slider.decimalPrecision);
    },

    /**
     * @private
     * This is tied to the internal Ext.dd.DragTracker's onEnd template method. Removes the drag CSS class and
     * fires the 'changecomplete' event with the new value
     */
    onDragEnd: function(e) {
        var slider = this.slider,
            value  = this.value;

        this.el.removeClass('x-slider-thumb-drag');

        this.dragging = false;
        slider.fireEvent('dragend', slider, e);

        if (this.dragStartValue != value) {
            slider.fireEvent('changecomplete', slider, value, this);
        }
    }
});

/**
 * @class Ext.slider.MultiSlider
 * @extends Ext.BoxComponent
 * Slider which supports vertical or horizontal orientation, keyboard adjustments, configurable snapping, axis clicking and animation. Can be added as an item to any container. Example usage:

new Ext.Slider({
    renderTo: Ext.getBody(),
    width: 200,
    value: 50,
    increment: 10,
    minValue: 0,
    maxValue: 100
});

 * Sliders can be created with more than one thumb handle by passing an array of values instead of a single one:

new Ext.Slider({
    renderTo: Ext.getBody(),
    width: 200,
    values: [25, 50, 75],
    minValue: 0,
    maxValue: 100,

    //this defaults to true, setting to false allows the thumbs to pass each other
    {@link #constrainThumbs}: false
});

 */
Ext.slider.MultiSlider = Ext.extend(Ext.BoxComponent, {

/**
     * @cfg {Number} value The value to initialize the slider with. Defaults to minValue.
     */

/**
     * @cfg {Boolean} vertical Orient the Slider vertically rather than horizontally, defaults to false.
     */
    vertical: false,

/**
     * @cfg {Number} minValue The minimum value for the Slider. Defaults to 0.
     */
    minValue: 0,

/**
     * @cfg {Number} maxValue The maximum value for the Slider. Defaults to 100.
     */
    maxValue: 100,

/**
     * @cfg {Number/Boolean} decimalPrecision.
     *
The number of decimal places to which to round the Slider's value. Defaults to 0.

     *
To disable rounding, configure as false.

     */
    decimalPrecision: 0,

/**
     * @cfg {Number} keyIncrement How many units to change the Slider when adjusting with keyboard navigation. Defaults to 1. If the increment config is larger, it will be used instead.
     */
    keyIncrement: 1,

/**
     * @cfg {Number} increment How many units to change the slider when adjusting by drag and drop. Use this option to enable 'snapping'.
     */
    increment: 0,

    /**
     * @private
     * @property clickRange
     * @type Array
     * Determines whether or not a click to the slider component is considered to be a user request to change the value. Specified as an array of [top, bottom],
     * the click event's 'top' property is compared to these numbers and the click only considered a change request if it falls within them. e.g. if the 'top'
     * value of the click event is 4 or 16, the click is not considered a change request as it falls outside of the [5, 15] range
     */
    clickRange: [5,15],

/**
     * @cfg {Boolean} clickToChange Determines whether or not clicking on the Slider axis will change the slider. Defaults to true
     */
    clickToChange : true,

/**
     * @cfg {Boolean} animate Turn on or off animation. Defaults to true
     */
    animate: true,

/**
     * True while the thumb is in a drag operation
     * @type Boolean
     */
    dragging: false,

/**
     * @cfg {Boolean} constrainThumbs True to disallow thumbs from overlapping one another. Defaults to true
     */
    constrainThumbs: true,

    /**
     * @private
     * @property topThumbZIndex
     * @type Number
     * The number used internally to set the z index of the top thumb (see promoteThumb for details)
     */
    topThumbZIndex: 10000,

    // private override
    initComponent : function(){
        if(!Ext.isDefined(this.value)){
            this.value = this.minValue;
        }

/**
         * @property thumbs
         * @type Array
         * Array containing references to each thumb
         */
        this.thumbs = [];

        Ext.slider.MultiSlider.superclass.initComponent.call(this);

        this.keyIncrement = Math.max(this.increment, this.keyIncrement);
        this.addEvents(

/**
             * @event beforechange
             * Fires before the slider value is changed. By returning false from an event handler,
             * you can cancel the event and prevent the slider from changing.
             * @param {Ext.Slider} slider The slider
             * @param {Number} newValue The new value which the slider is being changed to.
             * @param {Number} oldValue The old value which the slider was previously.
             */
            'beforechange',

/**
             * @event change
             * Fires when the slider value is changed.
             * @param {Ext.Slider} slider The slider
             * @param {Number} newValue The new value which the slider has been changed to.
             * @param {Ext.slider.Thumb} thumb The thumb that was changed
             */
            'change',

/**
             * @event changecomplete
             * Fires when the slider value is changed by the user and any drag operations have completed.
             * @param {Ext.Slider} slider The slider
             * @param {Number} newValue The new value which the slider has been changed to.
             * @param {Ext.slider.Thumb} thumb The thumb that was changed
             */
            'changecomplete',

/**
             * @event dragstart
             * Fires after a drag operation has started.
             * @param {Ext.Slider} slider The slider
             * @param {Ext.EventObject} e The event fired from Ext.dd.DragTracker
             */
            'dragstart',

/**
             * @event drag
             * Fires continuously during the drag operation while the mouse is moving.
             * @param {Ext.Slider} slider The slider
             * @param {Ext.EventObject} e The event fired from Ext.dd.DragTracker
             */
            'drag',

/**
             * @event dragend
             * Fires after the drag operation has completed.
             * @param {Ext.Slider} slider The slider
             * @param {Ext.EventObject} e The event fired from Ext.dd.DragTracker
             */
            'dragend'
        );

/**
         * @property values
         * @type Array
         * Array of values to initalize the thumbs with
         */
        if (this.values == undefined || Ext.isEmpty(this.values)) this.values = [0];

        var values = this.values;

        for (var i=0; i < values.length; i++) {
            this.addThumb(values[i]);
        }

        if(this.vertical){
            Ext.apply(this, Ext.slider.Vertical);
        }
    },

/**
     * Creates a new thumb and adds it to the slider
     * @param {Number} value The initial value to set on the thumb. Defaults to 0
     */
    addThumb: function(value) {
        var thumb = new Ext.slider.Thumb({
            value    : value,
            slider   : this,
            index    : this.thumbs.length,
            constrain: this.constrainThumbs
        });
        this.thumbs.push(thumb);

        //render the thumb now if needed
        if (this.rendered) thumb.render();
    },

    /**
     * @private
     * Moves the given thumb above all other by increasing its z-index. This is called when as drag
     * any thumb, so that the thumb that was just dragged is always at the highest z-index. This is
     * required when the thumbs are stacked on top of each other at one of the ends of the slider's
     * range, which can result in the user not being able to move any of them.
     * @param {Ext.slider.Thumb} topThumb The thumb to move to the top
     */
    promoteThumb: function(topThumb) {
        var thumbs = this.thumbs,
            zIndex, thumb;

        for (var i = 0, j = thumbs.length; i < j; i++) {
            thumb = thumbs[i];

            if (thumb == topThumb) {
                zIndex = this.topThumbZIndex;
            } else {
                zIndex = '';
            }

            thumb.el.setStyle('zIndex', zIndex);
        }
    },

    // private override
    onRender : function() {
        this.autoEl = {
            cls: 'x-slider ' + (this.vertical ? 'x-slider-vert' : 'x-slider-horz'),
            cn : {
                cls: 'x-slider-end',
                cn : {
                    cls:'x-slider-inner',
                    cn : [{tag:'a', cls:'x-slider-focus', href:"#", tabIndex: '-1', hidefocus:'on'}]
                }
            }
        };

        Ext.slider.MultiSlider.superclass.onRender.apply(this, arguments);

        this.endEl   = this.el.first();
        this.innerEl = this.endEl.first();
        this.focusEl = this.innerEl.child('.x-slider-focus');

        //render each thumb
        for (var i=0; i < this.thumbs.length; i++) {
            this.thumbs[i].render();
        }

        //calculate the size of half a thumb
        var thumb      = this.innerEl.child('.x-slider-thumb');
        this.halfThumb = (this.vertical ? thumb.getHeight() : thumb.getWidth()) / 2;

        this.initEvents();
    },

    /**
     * @private
     * Adds keyboard and mouse listeners on this.el. Ignores click events on the internal focus element.
     * Creates a new DragTracker which is used to control what happens when the user drags the thumb around.
     */
    initEvents : function(){
        this.mon(this.el, {
            scope    : this,
            mousedown: this.onMouseDown,
            keydown  : this.onKeyDown
        });

        this.focusEl.swallowEvent("click", true);
    },

    /**
     * @private
     * Mousedown handler for the slider. If the clickToChange is enabled and the click was not on the draggable 'thumb',
     * this calculates the new value of the slider and tells the implementation (Horizontal or Vertical) to move the thumb
     * @param {Ext.EventObject} e The click event
     */
    onMouseDown : function(e){
        if(this.disabled){
            return;
        }

        //see if the click was on any of the thumbs
        var thumbClicked = false;
        for (var i=0; i < this.thumbs.length; i++) {
            thumbClicked = thumbClicked || e.target == this.thumbs[i].el.dom;
        }

        if (this.clickToChange && !thumbClicked) {
            var local = this.innerEl.translatePoints(e.getXY());
            this.onClickChange(local);
        }
        this.focus();
    },

    /**
     * @private
     * Moves the thumb to the indicated position. Note that a Vertical implementation is provided in Ext.slider.Vertical.
     * Only changes the value if the click was within this.clickRange.
     * @param {Object} local Object containing top and left values for the click event.
     */
    onClickChange : function(local) {
        if (local.top > this.clickRange[0] && local.top < this.clickRange[1]) {
            //find the nearest thumb to the click event
            var thumb = this.getNearest(local, 'left'),
                index = thumb.index;

            this.setValue(index, Ext.util.Format.round(this.reverseValue(local.left), this.decimalPrecision), undefined, true);
        }
    },

    /**
     * @private
     * Returns the nearest thumb to a click event, along with its distance
     * @param {Object} local Object containing top and left values from a click event
     * @param {String} prop The property of local to compare on. Use 'left' for horizontal sliders, 'top' for vertical ones
     * @return {Object} The closest thumb object and its distance from the click event
     */
    getNearest: function(local, prop) {
        var localValue = prop == 'top' ? this.innerEl.getHeight() - local[prop] : local[prop],
            clickValue = this.reverseValue(localValue),
            nearestDistance = (this.maxValue - this.minValue) + 5, //add a small fudge for the end of the slider
            index = 0,
            nearest = null;

        for (var i=0; i < this.thumbs.length; i++) {
            var thumb = this.thumbs[i],
                value = thumb.value,
                dist  = Math.abs(value - clickValue);

            if (Math.abs(dist <= nearestDistance)) {
                nearest = thumb;
                index = i;
                nearestDistance = dist;
            }
        }
        return nearest;
    },

    /**
     * @private
     * Handler for any keypresses captured by the slider. If the key is UP or RIGHT, the thumb is moved along to the right
     * by this.keyIncrement. If DOWN or LEFT it is moved left. Pressing CTRL moves the slider to the end in either direction
     * @param {Ext.EventObject} e The Event object
     */
    onKeyDown : function(e){
        if(this.disabled){e.preventDefault();return;}
        var k = e.getKey();
        switch(k){
            case e.UP:
            case e.RIGHT:
                e.stopEvent();
                if(e.ctrlKey){
                    this.setValue(this.maxValue, undefined, true);
                }else{
                    this.setValue(this.value+this.keyIncrement, undefined, true);
                }
            break;
            case e.DOWN:
            case e.LEFT:
                e.stopEvent();
                if(e.ctrlKey){
                    this.setValue(this.minValue, undefined, true);
                }else{
                    this.setValue(this.value-this.keyIncrement, undefined, true);
                }
            break;
            default:
                e.preventDefault();
        }
    },

    /**
     * @private
     * If using snapping, this takes a desired new value and returns the closest snapped
     * value to it
     * @param {Number} value The unsnapped value
     * @return {Number} The value of the nearest snap target
     */
    doSnap : function(value){
        if (!(this.increment && value)) {
            return value;
        }
        var newValue = value,
            inc = this.increment,
            m = value % inc;
        if (m != 0) {
            newValue -= m;
            if (m * 2 >= inc) {
                newValue += inc;
            } else if (m * 2 < -inc) {
                newValue -= inc;
            }
        }
        return newValue.constrain(this.minValue,  this.maxValue);
    },

    // private
    afterRender : function(){
        Ext.slider.MultiSlider.superclass.afterRender.apply(this, arguments);

        for (var i=0; i < this.thumbs.length; i++) {
            var thumb = this.thumbs[i];

            if (thumb.value !== undefined) {
                var v = this.normalizeValue(thumb.value);

                if (v !== thumb.value) {
                    // delete this.value;
                    this.setValue(i, v, false);
                } else {
                    this.moveThumb(i, this.translateValue(v), false);
                }
            }
        };
    },

    /**
     * @private
     * Returns the ratio of pixels to mapped values. e.g. if the slider is 200px wide and maxValue - minValue is 100,
     * the ratio is 2
     * @return {Number} The ratio of pixels to mapped values
     */
    getRatio : function(){
        var w = this.innerEl.getWidth(),
            v = this.maxValue - this.minValue;
        return v == 0 ? w : (w/v);
    },

    /**
     * @private
     * Returns a snapped, constrained value when given a desired value
     * @param {Number} value Raw number value
     * @return {Number} The raw value rounded to the correct d.p. and constrained within the set max and min values
     */
    normalizeValue : function(v){
        v = this.doSnap(v);
        v = Ext.util.Format.round(v, this.decimalPrecision);
        v = v.constrain(this.minValue, this.maxValue);
        return v;
    },

/**
     * Sets the minimum value for the slider instance. If the current value is less than the
     * minimum value, the current value will be changed.
     * @param {Number} val The new minimum value
     */
    setMinValue : function(val){
        this.minValue = val;
        this.syncThumb();

        for (var i=0, j = this.thumbs.length; i < j; i++) {
            if (this.thumbs[i].value < val) this.thumbs[i].value = val;
        }
    },

/**
     * Sets the maximum value for the slider instance. If the current value is more than the
     * maximum value, the current value will be changed.
     * @param {Number} val The new maximum value
     */
    setMaxValue : function(val){
        this.maxValue = val;
        this.syncThumb();

        for (var i=0; i < this.thumbs.length; i++) {
            if (this.thumbs[i].value > val) this.thumbs[i].value = val;
        }
    },

/**
     * Programmatically sets the value of the Slider. Ensures that the value is constrained within
     * the minValue and maxValue.
     * @param {Number} index Index of the thumb to move
     * @param {Number} value The value to set the slider to. (This will be constrained within minValue and maxValue)
     * @param {Boolean} animate Turn on or off animation, defaults to true
     */
    setValue : function(index, v, animate, changeComplete) {
        var thumb = this.thumbs[index],
            el    = thumb.el;

        v = this.normalizeValue(v);

        if (v !== thumb.value && this.fireEvent('beforechange', this, v, thumb.value) !== false) {
            thumb.value = v;
            this.moveThumb(index, this.translateValue(v), animate !== false);
            this.fireEvent('change', this, v, thumb);
            if(changeComplete){
                this.fireEvent('changecomplete', this, v, thumb);
            }
        }
    },

    /**
     * @private
     */
    translateValue : function(v) {
        var ratio = this.getRatio();
        return (v * ratio) - (this.minValue * ratio) - this.halfThumb;
    },

    /**
     * @private
     * Given a pixel location along the slider, returns the mapped slider value for that pixel.
     * E.g. if we have a slider 200px wide with minValue = 100 and maxValue = 500, reverseValue(50)
     * returns 200
     * @param {Number} pos The position along the slider to return a mapped value for
     * @return {Number} The mapped value for the given position
     */
    reverseValue : function(pos){
        var ratio = this.getRatio();
        return (pos + (this.minValue * ratio)) / ratio;
    },

    /**
     * @private
     * @param {Number} index Index of the thumb to move
     */
    moveThumb: function(index, v, animate){
        var thumb = this.thumbs[index].el;

        if(!animate || this.animate === false){
            thumb.setLeft(v);
        }else{
            thumb.shift({left: v, stopFx: true, duration:.35});
        }
    },

    // private
    focus : function(){
        this.focusEl.focus(10);
    },

    // private
    onResize : function(w, h){
        var thumbs = this.thumbs,
            len = thumbs.length,
            i = 0;

        /*
         * If we happen to be animating during a resize, the position of the thumb will likely be off
         * when the animation stops. As such, just stop any animations before syncing the thumbs.
         */
        for(; i < len; ++i){
            thumbs[i].el.stopFx();
        }
        this.innerEl.setWidth(w - (this.el.getPadding('l') + this.endEl.getPadding('r')));
        this.syncThumb();
        Ext.slider.MultiSlider.superclass.onResize.apply(this, arguments);
    },

    //private
    onDisable: function(){
        Ext.slider.MultiSlider.superclass.onDisable.call(this);

        for (var i=0; i < this.thumbs.length; i++) {
            var thumb = this.thumbs[i],
                el    = thumb.el;

            thumb.disable();

            if(Ext.isIE){
                //IE breaks when using overflow visible and opacity other than 1.
                //Create a place holder for the thumb and display it.
                var xy = el.getXY();
                el.hide();

                this.innerEl.addClass(this.disabledClass).dom.disabled = true;

                if (!this.thumbHolder) {
                    this.thumbHolder = this.endEl.createChild({cls: 'x-slider-thumb ' + this.disabledClass});
                }

                this.thumbHolder.show().setXY(xy);
            }
        }
    },

    //private
    onEnable: function(){
        Ext.slider.MultiSlider.superclass.onEnable.call(this);

        for (var i=0; i < this.thumbs.length; i++) {
            var thumb = this.thumbs[i],
                el    = thumb.el;

            thumb.enable();

            if (Ext.isIE) {
                this.innerEl.removeClass(this.disabledClass).dom.disabled = false;

                if (this.thumbHolder) this.thumbHolder.hide();

                el.show();
                this.syncThumb();
            }
        }
    },

/**
     * Synchronizes the thumb position to the proper proportion of the total component width based
     * on the current slider {@link #value}.  This will be called automatically when the Slider
     * is resized by a layout, but if it is rendered auto width, this method can be called from
     * another resize handler to sync the Slider if necessary.
     */
    syncThumb : function() {
        if (this.rendered) {
            for (var i=0; i < this.thumbs.length; i++) {
                this.moveThumb(i, this.translateValue(this.thumbs[i].value));
            }
        }
    },

/**
     * Returns the current value of the slider
     * @param {Number} index The index of the thumb to return a value for
     * @return {Number} The current value of the slider
     */
    getValue : function(index) {
        return this.thumbs[index].value;
    },

/**
     * Returns an array of values - one for the location of each thumb
     * @return {Array} The set of thumb values
     */
    getValues: function() {
        var values = [];

        for (var i=0; i < this.thumbs.length; i++) {
            values.push(this.thumbs[i].value);
        }

        return values;
    },

    // private
    beforeDestroy : function(){
        Ext.destroyMembers(this, 'endEl', 'innerEl', 'thumb', 'halfThumb', 'focusEl', 'tracker', 'thumbHolder');
        Ext.slider.MultiSlider.superclass.beforeDestroy.call(this);
    }
});

Ext.reg('multislider', Ext.slider.MultiSlider);

/**
 * @class Ext.slider.SingleSlider
 * @extends Ext.slider.MultiSlider
 * Slider which supports vertical or horizontal orientation, keyboard adjustments,
 * configurable snapping, axis clicking and animation. Can be added as an item to
 * any container. Example usage:

new Ext.slider.SingleSlider({
    renderTo: Ext.getBody(),
    width: 200,
    value: 50,
    increment: 10,
    minValue: 0,
    maxValue: 100
});

 * The class Ext.slider.SingleSlider is aliased to Ext.Slider for backwards compatibility.
 */
Ext.slider.SingleSlider = Ext.extend(Ext.slider.MultiSlider, {
    constructor: function(config) {
      config = config || {};

      Ext.applyIf(config, {
          values: [config.value || 0]
      });

      Ext.slider.SingleSlider.superclass.constructor.call(this, config);
    },

/**
     * Returns the current value of the slider
     * @return {Number} The current value of the slider
     */
    getValue: function() {
        //just returns the value of the first thumb, which should be the only one in a single slider
        return Ext.slider.SingleSlider.superclass.getValue.call(this, 0);
    },

/**
     * Programmatically sets the value of the Slider. Ensures that the value is constrained within
     * the minValue and maxValue.
     * @param {Number} value The value to set the slider to. (This will be constrained within minValue and maxValue)
     * @param {Boolean} animate Turn on or off animation, defaults to true
     */
    setValue: function(value, animate) {
        var args = Ext.toArray(arguments),
            len  = args.length;

        //this is to maintain backwards compatiblity for sliders with only one thunb. Usually you must pass the thumb
        //index to setValue, but if we only have one thumb we inject the index here first if given the multi-slider
        //signature without the required index. The index will always be 0 for a single slider
        if (len == 1 || (len <= 3 && typeof arguments[1] != 'number')) {
            args.unshift(0);
        }

        return Ext.slider.SingleSlider.superclass.setValue.apply(this, args);
    },

/**
     * Synchronizes the thumb position to the proper proportion of the total component width based
     * on the current slider {@link #value}.  This will be called automatically when the Slider
     * is resized by a layout, but if it is rendered auto width, this method can be called from
     * another resize handler to sync the Slider if necessary.
     */
    syncThumb : function() {
        return Ext.slider.SingleSlider.superclass.syncThumb.apply(this, [0].concat(arguments));
    },

    // private
    getNearest : function(){
        // Since there's only 1 thumb, it's always the nearest
        return this.thumbs[0];
    }
});

//backwards compatibility
Ext.Slider = Ext.slider.SingleSlider;

Ext.reg('slider', Ext.slider.SingleSlider);

// private class to support vertical sliders
Ext.slider.Vertical = {
    onResize : function(w, h){
        this.innerEl.setHeight(h - (this.el.getPadding('t') + this.endEl.getPadding('b')));
        this.syncThumb();
    },

    getRatio : function(){
        var h = this.innerEl.getHeight(),
            v = this.maxValue - this.minValue;
        return h/v;
    },

    moveThumb: function(index, v, animate) {
        var thumb = this.thumbs[index],
            el    = thumb.el;

        if (!animate || this.animate === false) {
            el.setBottom(v);
        } else {
            el.shift({bottom: v, stopFx: true, duration:.35});
        }
    },

    onClickChange : function(local) {
        if (local.left > this.clickRange[0] && local.left < this.clickRange[1]) {
            var thumb = this.getNearest(local, 'top'),
                index = thumb.index,
                value = this.minValue + this.reverseValue(this.innerEl.getHeight() - local.top);

            this.setValue(index, Ext.util.Format.round(value, this.decimalPrecision), undefined, true);
        }
    }
};

//private class to support vertical dragging of thumbs within a slider
Ext.slider.Thumb.Vertical = {
    getNewValue: function() {
        var slider   = this.slider,
            innerEl  = slider.innerEl,
            pos      = innerEl.translatePoints(this.tracker.getXY()),
            bottom   = innerEl.getHeight() - pos.top;

        return slider.minValue + Ext.util.Format.round(bottom / slider.getRatio(), slider.decimalPrecision);
    }
};


The source code

/*!
 * licensing@extjs.com
 * http://www.extjs.com/license
 */

/**
 * @class Ext.form.SliderField
 * @extends Ext.form.Field
 * Wraps a {@link Ext.Slider Slider} so it can be used as a form field.
 * @constructor
 * Creates a new SliderField
 * @param {Object} config Configuration options. Note that you can pass in any slider configuration options, as well as
 * as any field configuration options.
 * @xtype sliderfield
 */
Ext.form.SliderField = Ext.extend(Ext.form.Field, {

/**
     * @cfg {Boolean} useTips
     * True to use an Ext.slider.Tip to display tips for the value. Defaults to true.
     */
    useTips : true,

/**
     * @cfg {Function} tipText
     * A function used to display custom text for the slider tip. Defaults to null, which will
     * use the default on the plugin.
     */
    tipText : null,

    // private override
    actionMode: 'wrap',

    /**
     * Initialize the component.
     * @private
     */
    initComponent : function() {
        var cfg = Ext.copyTo({
            id: this.id + '-slider'
        }, this.initialConfig, ['vertical', 'minValue', 'maxValue', 'decimalPrecision', 'keyIncrement', 'increment', 'clickToChange', 'animate']);

        // only can use it if it exists.
        if (this.useTips) {
            var plug = this.tipText ? {getText: this.tipText} : {};
            cfg.plugins = [new Ext.slider.Tip(plug)];
        }
        this.slider = new Ext.Slider(cfg);
        Ext.form.SliderField.superclass.initComponent.call(this);
    },

    /**
     * Set up the hidden field
     * @param {Object} ct The container to render to.
     * @param {Object} position The position in the container to render to.
     * @private
     */
    onRender : function(ct, position){
        this.autoCreate = {
            id: this.id,
            name: this.name,
            type: 'hidden',
            tag: 'input'
        };
        Ext.form.SliderField.superclass.onRender.call(this, ct, position);
        this.wrap = this.el.wrap({cls: 'x-form-field-wrap'});
        this.slider.render(this.wrap);
    },

    /**
     * Ensure that the slider size is set automatically when the field resizes.
     * @param {Object} w The width
     * @param {Object} h The height
     * @param {Object} aw The adjusted width
     * @param {Object} ah The adjusted height
     * @private
     */
    onResize : function(w, h, aw, ah){
        Ext.form.SliderField.superclass.onResize.call(this, w, h, aw, ah);
        this.slider.setSize(w, h);
    },

    /**
     * Initialize any events for this class.
     * @private
     */
    initEvents : function(){
        Ext.form.SliderField.superclass.initEvents.call(this);
        this.slider.on('change', this.onChange, this);
    },

    /**
     * Utility method to set the value of the field when the slider changes.
     * @param {Object} slider The slider object.
     * @param {Object} v The new value.
     * @private
     */
    onChange : function(slider, v){
        this.setValue(v, undefined, true);
    },

    /**
     * Enable the slider when the field is enabled.
     * @private
     */
    onEnable : function(){
        Ext.form.SliderField.superclass.onEnable.call(this);
        this.slider.enable();
    },

    /**
     * Disable the slider when the field is disabled.
     * @private
     */
    onDisable : function(){
        Ext.form.SliderField.superclass.onDisable.call(this);
        this.slider.disable();
    },

    /**
     * Ensure the slider is destroyed when the field is destroyed.
     * @private
     */
    beforeDestroy : function(){
        Ext.destroy(this.slider);
        Ext.form.SliderField.superclass.beforeDestroy.call(this);
    },

    /**
     * If a side icon is shown, do alignment to the slider
     * @private
     */
    alignErrorIcon : function(){
        this.errorIcon.alignTo(this.slider.el, 'tl-tr', [2, 0]);
    },

/**
     * Sets the minimum field value.
     * @param {Number} v The new minimum value.
     * @return {Ext.form.SliderField} this
     */
    setMinValue : function(v){
        this.slider.setMinValue(v);
        return this;
    },

/**
     * Sets the maximum field value.
     * @param {Number} v The new maximum value.
     * @return {Ext.form.SliderField} this
     */
    setMaxValue : function(v){
        this.slider.setMaxValue(v);
        return this;
    },

/**
     * Sets the value for this field.
     * @param {Number} v The new value.
     * @param {Boolean} animate (optional) Whether to animate the transition. If not specified, it will default to the animate config.
     * @return {Ext.form.SliderField} this
     */
    setValue : function(v, animate, /* private */ silent){
        // silent is used if the setValue method is invoked by the slider
        // which means we don't need to set the value on the slider.
        if(!silent){
            this.slider.setValue(v, animate);
        }
        return Ext.form.SliderField.superclass.setValue.call(this, this.slider.getValue());
    },

/**
     * Gets the current value for this field.
     * @return {Number} The current value.
     */
    getValue : function(){
        return this.slider.getValue();
    }
});

Ext.reg('sliderfield', Ext.form.SliderField);


The source code

/*!
 * licensing@extjs.com
 * http://www.extjs.com/license
 */

/**
 * @class Ext.slider.Tip
 * @extends Ext.Tip
 * Simple plugin for using an Ext.Tip with a slider to show the slider value. Example usage:

new Ext.Slider({
    width: 214,
    minValue: 0,
    maxValue: 100,
    plugins: new Ext.slider.Tip()
});

 * Optionally provide your own tip text by overriding getText:

 new Ext.Slider({
     width: 214,
     minValue: 0,
     maxValue: 100,
     plugins: new Ext.slider.Tip({
         getText: function(thumb){
             return String.format('{0}% complete', thumb.value);
         }
     })
 });

 */
Ext.slider.Tip = Ext.extend(Ext.Tip, {
    minWidth: 10,
    offsets : [0, -10],

    init: function(slider) {
        slider.on({
            scope    : this,
            dragstart: this.onSlide,
            drag     : this.onSlide,
            dragend  : this.hide,
            destroy  : this.destroy
        });
    },

    /**
     * @private
     * Called whenever a dragstart or drag event is received on the associated Thumb.
     * Aligns the Tip with the Thumb's new position.
     * @param {Ext.slider.MultiSlider} slider The slider
     * @param {Ext.EventObject} e The Event object
     * @param {Ext.slider.Thumb} thumb The thumb that the Tip is attached to
     */
    onSlide : function(slider, e, thumb) {
        this.show();
        this.body.update(this.getText(thumb));
        this.doAutoWidth();
        this.el.alignTo(thumb.el, 'b-t?', this.offsets);
    },

/**
     * Used to create the text that appears in the Tip's body. By default this just returns
     * the value of the Slider Thumb that the Tip is attached to. Override to customize.
     * @param {Ext.slider.Thumb} thumb The Thumb that the Tip is attached to
     * @return {String} The text to display in the tip
     */
    getText : function(thumb) {
        return String(thumb.value);
    }
});

//backwards compatibility - SliderTip used to be a ux before 3.2
Ext.ux.SliderTip = Ext.slider.Tip;


The source code

/*!
 * licensing@extjs.com
 * http://www.extjs.com/license
 */

/**
 * @class Ext.list.Sorter
 * @extends Ext.util.Observable
 *
Supporting Class for Ext.list.ListView

 * @constructor
 * @param {Object} config
 */
Ext.list.Sorter = Ext.extend(Ext.util.Observable, {

/**
     * @cfg {Array} sortClasses
     * The CSS classes applied to a header when it is sorted. (defaults to ["sort-asc", "sort-desc"])
     */
    sortClasses : ["sort-asc", "sort-desc"],

    constructor: function(config){
        Ext.apply(this, config);
        Ext.list.Sorter.superclass.constructor.call(this);
    },

    init : function(listView){
        this.view = listView;
        listView.on('render', this.initEvents, this);
    },

    initEvents : function(view){
        view.mon(view.innerHd, 'click', this.onHdClick, this);
        view.innerHd.setStyle('cursor', 'pointer');
        view.mon(view.store, 'datachanged', this.updateSortState, this);
        this.updateSortState.defer(10, this, [view.store]);
    },

    updateSortState : function(store){
        var state = store.getSortState();
        if(!state){
            return;
        }
        this.sortState = state;
        var cs = this.view.columns, sortColumn = -1;
        for(var i = 0, len = cs.length; i < len; i++){
            if(cs[i].dataIndex == state.field){
                sortColumn = i;
                break;
            }
        }
        if(sortColumn != -1){
            var sortDir = state.direction;
            this.updateSortIcon(sortColumn, sortDir);
        }
    },

    updateSortIcon : function(col, dir){
        var sc = this.sortClasses;
        var hds = this.view.innerHd.select('em').removeClass(sc);
        hds.item(col).addClass(sc[dir == "DESC" ? 1 : 0]);
    },

    onHdClick : function(e){
        var hd = e.getTarget('em', 3);
        if(hd && !this.view.disableHeaders){
            var index = this.view.findHeaderIndex(hd);
            this.view.store.sort(this.view.columns[index].dataIndex);
        }
    }
});

// Backwards compatibility alias
Ext.ListView.Sorter = Ext.list.Sorter;


The source code

/*!
 * licensing@extjs.com
 * http://www.extjs.com/license
 */

/**
 * @class Ext.data.SortTypes
 * @singleton
 * Defines the default sorting (casting?) comparison functions used when sorting data.
 */
Ext.data.SortTypes = {

/**
     * Default sort that does nothing
     * @param {Mixed} s The value being converted
     * @return {Mixed} The comparison value
     */
    none : function(s){
        return s;
    },

/**
     * The regular expression used to strip tags
     * @type {RegExp}
     * @property
     */
    stripTagsRE : /<\/?[^>]+>/gi,

/**
     * Strips all HTML tags to sort on text only
     * @param {Mixed} s The value being converted
     * @return {String} The comparison value
     */
    asText : function(s){
        return String(s).replace(this.stripTagsRE, "");
    },

/**
     * Strips all HTML tags to sort on text only - Case insensitive
     * @param {Mixed} s The value being converted
     * @return {String} The comparison value
     */
    asUCText : function(s){
        return String(s).toUpperCase().replace(this.stripTagsRE, "");
    },

/**
     * Case insensitive string
     * @param {Mixed} s The value being converted
     * @return {String} The comparison value
     */
    asUCString : function(s) {
        return String(s).toUpperCase();
    },

/**
     * Date sorting
     * @param {Mixed} s The value being converted
     * @return {Number} The comparison value
     */
    asDate : function(s) {
        if(!s){
            return 0;
        }
        if(Ext.isDate(s)){
            return s.getTime();
        }
        return Date.parse(String(s));
    },

/**
     * Float sorting
     * @param {Mixed} s The value being converted
     * @return {Float} The comparison value
     */
    asFloat : function(s) {
        var val = parseFloat(String(s).replace(/,/g, ""));
        return isNaN(val) ? 0 : val;
    },

/**
     * Integer sorting
     * @param {Mixed} s The value being converted
     * @return {Number} The comparison value
     */
    asInt : function(s) {
        var val = parseInt(String(s).replace(/,/g, ""), 10);
        return isNaN(val) ? 0 : val;
    }
};


The source code

/*!
 * licensing@extjs.com
 * http://www.extjs.com/license
 */

/**
 * @class Ext.SplitBar
 * @extends Ext.util.Observable
 * Creates draggable splitter bar functionality from two elements (element to be dragged and element to be resized).
 *

 * Usage:
 *

var split = new Ext.SplitBar("elementToDrag", "elementToSize",
                   Ext.SplitBar.HORIZONTAL, Ext.SplitBar.LEFT);
split.setAdapter(new Ext.SplitBar.AbsoluteLayoutAdapter("container"));
split.minSize = 100;
split.maxSize = 600;
split.animate = true;
split.on('moved', splitterMoved);

 * @constructor
 * Create a new SplitBar
 * @param {Mixed} dragElement The element to be dragged and act as the SplitBar.
 * @param {Mixed} resizingElement The element to be resized based on where the SplitBar element is dragged
 * @param {Number} orientation (optional) Either Ext.SplitBar.HORIZONTAL or Ext.SplitBar.VERTICAL. (Defaults to HORIZONTAL)
 * @param {Number} placement (optional) Either Ext.SplitBar.LEFT or Ext.SplitBar.RIGHT for horizontal or
                        Ext.SplitBar.TOP or Ext.SplitBar.BOTTOM for vertical. (By default, this is determined automatically by the initial
                        position of the SplitBar).
 */
Ext.SplitBar = function(dragElement, resizingElement, orientation, placement, existingProxy){

    /** @private */
    this.el = Ext.get(dragElement, true);
    this.el.dom.unselectable = "on";
    /** @private */
    this.resizingEl = Ext.get(resizingElement, true);

    /**
     * @private
     * The orientation of the split. Either Ext.SplitBar.HORIZONTAL or Ext.SplitBar.VERTICAL. (Defaults to HORIZONTAL)
     * Note: If this is changed after creating the SplitBar, the placement property must be manually updated
     * @type Number
     */
    this.orientation = orientation || Ext.SplitBar.HORIZONTAL;

/**
     * The increment, in pixels by which to move this SplitBar. When undefined, the SplitBar moves smoothly.
     * @type Number
     * @property tickSize
     */

/**
     * The minimum size of the resizing element. (Defaults to 0)
     * @type Number
     */
    this.minSize = 0;

/**
     * The maximum size of the resizing element. (Defaults to 2000)
     * @type Number
     */
    this.maxSize = 2000;

/**
     * Whether to animate the transition to the new size
     * @type Boolean
     */
    this.animate = false;

/**
     * Whether to create a transparent shim that overlays the page when dragging, enables dragging across iframes.
     * @type Boolean
     */
    this.useShim = false;

    /** @private */
    this.shim = null;

    if(!existingProxy){
        /** @private */
        this.proxy = Ext.SplitBar.createProxy(this.orientation);
    }else{
        this.proxy = Ext.get(existingProxy).dom;
    }
    /** @private */
    this.dd = new Ext.dd.DDProxy(this.el.dom.id, "XSplitBars", {dragElId : this.proxy.id});

    /** @private */
    this.dd.b4StartDrag = this.onStartProxyDrag.createDelegate(this);

    /** @private */
    this.dd.endDrag = this.onEndProxyDrag.createDelegate(this);

    /** @private */
    this.dragSpecs = {};

    /**
     * @private The adapter to use to positon and resize elements
     */
    this.adapter = new Ext.SplitBar.BasicLayoutAdapter();
    this.adapter.init(this);

    if(this.orientation == Ext.SplitBar.HORIZONTAL){
        /** @private */
        this.placement = placement || (this.el.getX() > this.resizingEl.getX() ? Ext.SplitBar.LEFT : Ext.SplitBar.RIGHT);
        this.el.addClass("x-splitbar-h");
    }else{
        /** @private */
        this.placement = placement || (this.el.getY() > this.resizingEl.getY() ? Ext.SplitBar.TOP : Ext.SplitBar.BOTTOM);
        this.el.addClass("x-splitbar-v");
    }

    this.addEvents(

/**
         * @event resize
         * Fires when the splitter is moved (alias for {@link #moved})
         * @param {Ext.SplitBar} this
         * @param {Number} newSize the new width or height
         */
        "resize",

/**
         * @event moved
         * Fires when the splitter is moved
         * @param {Ext.SplitBar} this
         * @param {Number} newSize the new width or height
         */
        "moved",

/**
         * @event beforeresize
         * Fires before the splitter is dragged
         * @param {Ext.SplitBar} this
         */
        "beforeresize",

        "beforeapply"
    );

    Ext.SplitBar.superclass.constructor.call(this);
};

Ext.extend(Ext.SplitBar, Ext.util.Observable, {
    onStartProxyDrag : function(x, y){
        this.fireEvent("beforeresize", this);
        this.overlay =  Ext.DomHelper.append(document.body,  {cls: "x-drag-overlay", html: " "}, true);
        this.overlay.unselectable();
        this.overlay.setSize(Ext.lib.Dom.getViewWidth(true), Ext.lib.Dom.getViewHeight(true));
        this.overlay.show();
        Ext.get(this.proxy).setDisplayed("block");
        var size = this.adapter.getElementSize(this);
        this.activeMinSize = this.getMinimumSize();
        this.activeMaxSize = this.getMaximumSize();
        var c1 = size - this.activeMinSize;
        var c2 = Math.max(this.activeMaxSize - size, 0);
        if(this.orientation == Ext.SplitBar.HORIZONTAL){
            this.dd.resetConstraints();
            this.dd.setXConstraint(
                this.placement == Ext.SplitBar.LEFT ? c1 : c2,
                this.placement == Ext.SplitBar.LEFT ? c2 : c1,
                this.tickSize
            );
            this.dd.setYConstraint(0, 0);
        }else{
            this.dd.resetConstraints();
            this.dd.setXConstraint(0, 0);
            this.dd.setYConstraint(
                this.placement == Ext.SplitBar.TOP ? c1 : c2,
                this.placement == Ext.SplitBar.TOP ? c2 : c1,
                this.tickSize
            );
         }
        this.dragSpecs.startSize = size;
        this.dragSpecs.startPoint = [x, y];
        Ext.dd.DDProxy.prototype.b4StartDrag.call(this.dd, x, y);
    },

    /**
     * @private Called after the drag operation by the DDProxy
     */
    onEndProxyDrag : function(e){
        Ext.get(this.proxy).setDisplayed(false);
        var endPoint = Ext.lib.Event.getXY(e);
        if(this.overlay){
            Ext.destroy(this.overlay);
            delete this.overlay;
        }
        var newSize;
        if(this.orientation == Ext.SplitBar.HORIZONTAL){
            newSize = this.dragSpecs.startSize +
                (this.placement == Ext.SplitBar.LEFT ?
                    endPoint[0] - this.dragSpecs.startPoint[0] :
                    this.dragSpecs.startPoint[0] - endPoint[0]
                );
        }else{
            newSize = this.dragSpecs.startSize +
                (this.placement == Ext.SplitBar.TOP ?
                    endPoint[1] - this.dragSpecs.startPoint[1] :
                    this.dragSpecs.startPoint[1] - endPoint[1]
                );
        }
        newSize = Math.min(Math.max(newSize, this.activeMinSize), this.activeMaxSize);
        if(newSize != this.dragSpecs.startSize){
            if(this.fireEvent('beforeapply', this, newSize) !== false){
                this.adapter.setElementSize(this, newSize);
                this.fireEvent("moved", this, newSize);
                this.fireEvent("resize", this, newSize);
            }
        }
    },

/**
     * Get the adapter this SplitBar uses
     * @return The adapter object
     */
    getAdapter : function(){
        return this.adapter;
    },

/**
     * Set the adapter this SplitBar uses
     * @param {Object} adapter A SplitBar adapter object
     */
    setAdapter : function(adapter){
        this.adapter = adapter;
        this.adapter.init(this);
    },

/**
     * Gets the minimum size for the resizing element
     * @return {Number} The minimum size
     */
    getMinimumSize : function(){
        return this.minSize;
    },

/**
     * Sets the minimum size for the resizing element
     * @param {Number} minSize The minimum size
     */
    setMinimumSize : function(minSize){
        this.minSize = minSize;
    },

/**
     * Gets the maximum size for the resizing element
     * @return {Number} The maximum size
     */
    getMaximumSize : function(){
        return this.maxSize;
    },

/**
     * Sets the maximum size for the resizing element
     * @param {Number} maxSize The maximum size
     */
    setMaximumSize : function(maxSize){
        this.maxSize = maxSize;
    },

/**
     * Sets the initialize size for the resizing element
     * @param {Number} size The initial size
     */
    setCurrentSize : function(size){
        var oldAnimate = this.animate;
        this.animate = false;
        this.adapter.setElementSize(this, size);
        this.animate = oldAnimate;
    },

/**
     * Destroy this splitbar.
     * @param {Boolean} removeEl True to remove the element
     */
    destroy : function(removeEl){
        Ext.destroy(this.shim, Ext.get(this.proxy));
        this.dd.unreg();
        if(removeEl){
            this.el.remove();
        }
        this.purgeListeners();
    }
});

/**
 * @private static Create our own proxy element element. So it will be the same same size on all browsers, we won't use borders. Instead we use a background color.
 */
Ext.SplitBar.createProxy = function(dir){
    var proxy = new Ext.Element(document.createElement("div"));
    document.body.appendChild(proxy.dom);
    proxy.unselectable();
    var cls = 'x-splitbar-proxy';
    proxy.addClass(cls + ' ' + (dir == Ext.SplitBar.HORIZONTAL ? cls +'-h' : cls + '-v'));
    return proxy.dom;
};

/**
 * @class Ext.SplitBar.BasicLayoutAdapter
 * Default Adapter. It assumes the splitter and resizing element are not positioned
 * elements and only gets/sets the width of the element. Generally used for table based layouts.
 */
Ext.SplitBar.BasicLayoutAdapter = function(){
};

Ext.SplitBar.BasicLayoutAdapter.prototype = {
    // do nothing for now
    init : function(s){

    },

/**
     * Called before drag operations to get the current size of the resizing element.
     * @param {Ext.SplitBar} s The SplitBar using this adapter
     */
     getElementSize : function(s){
        if(s.orientation == Ext.SplitBar.HORIZONTAL){
            return s.resizingEl.getWidth();
        }else{
            return s.resizingEl.getHeight();
        }
    },

/**
     * Called after drag operations to set the size of the resizing element.
     * @param {Ext.SplitBar} s The SplitBar using this adapter
     * @param {Number} newSize The new size to set
     * @param {Function} onComplete A function to be invoked when resizing is complete
     */
    setElementSize : function(s, newSize, onComplete){
        if(s.orientation == Ext.SplitBar.HORIZONTAL){
            if(!s.animate){
                s.resizingEl.setWidth(newSize);
                if(onComplete){
                    onComplete(s, newSize);
                }
            }else{
                s.resizingEl.setWidth(newSize, true, .1, onComplete, 'easeOut');
            }
        }else{

            if(!s.animate){
                s.resizingEl.setHeight(newSize);
                if(onComplete){
                    onComplete(s, newSize);
                }
            }else{
                s.resizingEl.setHeight(newSize, true, .1, onComplete, 'easeOut');
            }
        }
    }
};

/**
 *@class Ext.SplitBar.AbsoluteLayoutAdapter
 * @extends Ext.SplitBar.BasicLayoutAdapter
 * Adapter that  moves the splitter element to align with the resized sizing element.
 * Used with an absolute positioned SplitBar.
 * @param {Mixed} container The container that wraps around the absolute positioned content. If it's
 * document.body, make sure you assign an id to the body element.
 */
Ext.SplitBar.AbsoluteLayoutAdapter = function(container){
    this.basic = new Ext.SplitBar.BasicLayoutAdapter();
    this.container = Ext.get(container);
};

Ext.SplitBar.AbsoluteLayoutAdapter.prototype = {
    init : function(s){
        this.basic.init(s);
    },

    getElementSize : function(s){
        return this.basic.getElementSize(s);
    },

    setElementSize : function(s, newSize, onComplete){
        this.basic.setElementSize(s, newSize, this.moveSplitter.createDelegate(this, [s]));
    },

    moveSplitter : function(s){
        var yes = Ext.SplitBar;
        switch(s.placement){
            case yes.LEFT:
                s.el.setX(s.resizingEl.getRight());
                break;
            case yes.RIGHT:
                s.el.setStyle("right", (this.container.getWidth() - s.resizingEl.getLeft()) + "px");
                break;
            case yes.TOP:
                s.el.setY(s.resizingEl.getBottom());
                break;
            case yes.BOTTOM:
                s.el.setY(s.resizingEl.getTop() - s.el.getHeight());
                break;
        }
    }
};

/**
 * Orientation constant - Create a vertical SplitBar
 * @static
 * @type Number
 */
Ext.SplitBar.VERTICAL = 1;

/**
 * Orientation constant - Create a horizontal SplitBar
 * @static
 * @type Number
 */
Ext.SplitBar.HORIZONTAL = 2;

/**
 * Placement constant - The resizing element is to the left of the splitter element
 * @static
 * @type Number
 */
Ext.SplitBar.LEFT = 1;

/**
 * Placement constant - The resizing element is to the right of the splitter element
 * @static
 * @type Number
 */
Ext.SplitBar.RIGHT = 2;

/**
 * Placement constant - The resizing element is positioned above the splitter element
 * @static
 * @type Number
 */
Ext.SplitBar.TOP = 3;

/**
 * Placement constant - The resizing element is positioned under splitter element
 * @static
 * @type Number
 */
Ext.SplitBar.BOTTOM = 4;


The source code

/*!
 * licensing@extjs.com
 * http://www.extjs.com/license
 */

/**
 * @class Ext.SplitButton
 * @extends Ext.Button
 * A split button that provides a built-in dropdown arrow that can fire an event separately from the default
 * click event of the button.  Typically this would be used to display a dropdown menu that provides additional
 * options to the primary button action, but any custom handler can provide the arrowclick implementation.  Example usage:
 *

// display a dropdown menu:
new Ext.SplitButton({
    renderTo: 'button-ct', // the container id
       text: 'Options',
       handler: optionsHandler, // handle a click on the button itself
       menu: new Ext.menu.Menu({
        items: [
            // these items will render as dropdown menu items when the arrow is clicked:
            {text: 'Item 1', handler: item1Handler},
            {text: 'Item 2', handler: item2Handler}
        ]
       })
});

// Instead of showing a menu, you provide any type of custom
// functionality you want when the dropdown arrow is clicked:
new Ext.SplitButton({
    renderTo: 'button-ct',
       text: 'Options',
       handler: optionsHandler,
       arrowHandler: myCustomHandler
});

 * @cfg {Function} arrowHandler A function called when the arrow button is clicked (can be used instead of click event)
 * @cfg {String} arrowTooltip The title attribute of the arrow
 * @constructor
 * Create a new menu button
 * @param {Object} config The config object
 * @xtype splitbutton
 */
Ext.SplitButton = Ext.extend(Ext.Button, {
    // private
    arrowSelector : 'em',
    split: true,

    // private
    initComponent : function(){
        Ext.SplitButton.superclass.initComponent.call(this);
        /**
         * @event arrowclick
         * Fires when this button's arrow is clicked
         * @param {MenuButton} this
         * @param {EventObject} e The click event
         */
        this.addEvents("arrowclick");
    },

    // private
    onRender : function(){
        Ext.SplitButton.superclass.onRender.apply(this, arguments);
        if(this.arrowTooltip){
            this.el.child(this.arrowSelector).dom[this.tooltipType] = this.arrowTooltip;
        }
    },

    /**
     * Sets this button's arrow click handler.
     * @param {Function} handler The function to call when the arrow is clicked
     * @param {Object} scope (optional) Scope for the function passed above
     */
    setArrowHandler : function(handler, scope){
        this.arrowHandler = handler;
        this.scope = scope;
    },

    getMenuClass : function(){
        return 'x-btn-split' + (this.arrowAlign == 'bottom' ? '-bottom' : '');
    },

    isClickOnArrow : function(e){
    if (this.arrowAlign != 'bottom') {
        var visBtn = this.el.child('em.x-btn-split');
        var right = visBtn.getRegion().right - visBtn.getPadding('r');
        return e.getPageX() > right;
    } else {
        return e.getPageY() > this.btnEl.getRegion().bottom;
    }
    },

    // private
    onClick : function(e, t){
        e.preventDefault();
        if(!this.disabled){
            if(this.isClickOnArrow(e)){
                if(this.menu && !this.menu.isVisible() && !this.ignoreNextClick){
                    this.showMenu();
                }
                this.fireEvent("arrowclick", this, e);
                if(this.arrowHandler){
                    this.arrowHandler.call(this.scope || this, this, e);
                }
            }else{
                if(this.enableToggle){
                    this.toggle();
                }
                this.fireEvent("click", this, e);
                if(this.handler){
                    this.handler.call(this.scope || this, this, e);
                }
            }
        }
    },

    // private
    isMenuTriggerOver : function(e){
        return this.menu && e.target.tagName == this.arrowSelector;
    },

    // private
    isMenuTriggerOut : function(e, internal){
        return this.menu && e.target.tagName != this.arrowSelector;
    }
});

Ext.reg('splitbutton', Ext.SplitButton);


The source code

/*!
 * licensing@extjs.com
 * http://www.extjs.com/license
 */

/**
 * @class Ext.state.Manager
 * This is the global state manager. By default all components that are "state aware" check this class
 * for state information if you don't pass them a custom state provider. In order for this class
 * to be useful, it must be initialized with a provider when your application initializes. Example usage:

// in your initialization function
init : function(){
   Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
   var win = new Window(...);
   win.restoreState();
}

 * @singleton
 */
Ext.state.Manager = function(){
    var provider = new Ext.state.Provider();

    return {

/**
         * Configures the default state provider for your application
         * @param {Provider} stateProvider The state provider to set
         */
        setProvider : function(stateProvider){
            provider = stateProvider;
        },

/**
         * Returns the current value for a key
         * @param {String} name The key name
         * @param {Mixed} defaultValue The default value to return if the key lookup does not match
         * @return {Mixed} The state data
         */
        get : function(key, defaultValue){
            return provider.get(key, defaultValue);
        },

/**
         * Sets the value for a key
         * @param {String} name The key name
         * @param {Mixed} value The state data
         */
         set : function(key, value){
            provider.set(key, value);
        },

/**
         * Clears a value from the state
         * @param {String} name The key name
         */
        clear : function(key){
            provider.clear(key);
        },

/**
         * Gets the currently configured state provider
         * @return {Provider} The state provider
         */
        getProvider : function(){
            return provider;
        }
    };
}();


The source code

/*!
 * licensing@extjs.com
 * http://www.extjs.com/license
 */

/**
 * @class Ext.dd.StatusProxy
 * A specialized drag proxy that supports a drop status icon, {@link Ext.Layer} styles and auto-repair.  This is the
 * default drag proxy used by all Ext.dd components.
 * @constructor
 * @param {Object} config
 */
Ext.dd.StatusProxy = function(config){
    Ext.apply(this, config);
    this.id = this.id || Ext.id();
    this.el = new Ext.Layer({
        dh: {
            id: this.id, tag: "div", cls: "x-dd-drag-proxy "+this.dropNotAllowed, children: [
                {tag: "div", cls: "x-dd-drop-icon"},
                {tag: "div", cls: "x-dd-drag-ghost"}
            ]
        },
        shadow: !config || config.shadow !== false
    });
    this.ghost = Ext.get(this.el.dom.childNodes[1]);
    this.dropStatus = this.dropNotAllowed;
};

Ext.dd.StatusProxy.prototype = {

/**
     * @cfg {String} dropAllowed
     * The CSS class to apply to the status element when drop is allowed (defaults to "x-dd-drop-ok").
     */
    dropAllowed : "x-dd-drop-ok",

/**
     * @cfg {String} dropNotAllowed
     * The CSS class to apply to the status element when drop is not allowed (defaults to "x-dd-drop-nodrop").
     */
    dropNotAllowed : "x-dd-drop-nodrop",

/**
     * Updates the proxy's visual element to indicate the status of whether or not drop is allowed
     * over the current target element.
     * @param {String} cssClass The css class for the new drop status indicator image
     */
    setStatus : function(cssClass){
        cssClass = cssClass || this.dropNotAllowed;
        if(this.dropStatus != cssClass){
            this.el.replaceClass(this.dropStatus, cssClass);
            this.dropStatus = cssClass;
        }
    },

/**
     * Resets the status indicator to the default dropNotAllowed value
     * @param {Boolean} clearGhost True to also remove all content from the ghost, false to preserve it
     */
    reset : function(clearGhost){
        this.el.dom.className = "x-dd-drag-proxy " + this.dropNotAllowed;
        this.dropStatus = this.dropNotAllowed;
        if(clearGhost){
            this.ghost.update("");
        }
    },

/**
     * Updates the contents of the ghost element
     * @param {String/HTMLElement} html The html that will replace the current innerHTML of the ghost element, or a
     * DOM node to append as the child of the ghost element (in which case the innerHTML will be cleared first).
     */
    update : function(html){
        if(typeof html == "string"){
            this.ghost.update(html);
        }else{
            this.ghost.update("");
            html.style.margin = "0";
            this.ghost.dom.appendChild(html);
        }
        var el = this.ghost.dom.firstChild;
        if(el){
            Ext.fly(el).setStyle('float', 'none');
        }
    },

/**
     * Returns the underlying proxy {@link Ext.Layer}
     * @return {Ext.Layer} el
    */
    getEl : function(){
        return this.el;
    },

/**
     * Returns the ghost element
     * @return {Ext.Element} el
     */
    getGhost : function(){
        return this.ghost;
    },

/**
     * Hides the proxy
     * @param {Boolean} clear True to reset the status and clear the ghost contents, false to preserve them
     */
    hide : function(clear){
        this.el.hide();
        if(clear){
            this.reset(true);
        }
    },

/**
     * Stops the repair animation if it's currently running
     */
    stop : function(){
        if(this.anim && this.anim.isAnimated && this.anim.isAnimated()){
            this.anim.stop();
        }
    },

/**
     * Displays this proxy
     */
    show : function(){
        this.el.show();
    },

/**
     * Force the Layer to sync its shadow and shim positions to the element
     */
    sync : function(){
        this.el.sync();
    },

/**
     * Causes the proxy to return to its position of origin via an animation.  Should be called after an
     * invalid drop operation by the item being dragged.
     * @param {Array} xy The XY position of the element ([x, y])
     * @param {Function} callback The function to call after the repair is complete.
     * @param {Object} scope The scope (this reference) in which the callback function is executed. Defaults to the browser window.
     */
    repair : function(xy, callback, scope){
        this.callback = callback;
        this.scope = scope;
        if(xy && this.animRepair !== false){
            this.el.addClass("x-dd-drag-repair");
            this.el.hideUnders(true);
            this.anim = this.el.shift({
                duration: this.repairDuration || .5,
                easing: 'easeOut',
                xy: xy,
                stopFx: true,
                callback: this.afterRepair,
                scope: this
            });
        }else{
            this.afterRepair();
        }
    },

    // private
    afterRepair : function(){
        this.hide(true);
        if(typeof this.callback == "function"){
            this.callback.call(this.scope || this);
        }
        this.callback = null;
        this.scope = null;
    },

    destroy: function(){
        Ext.destroy(this.ghost, this.el);
    }
};


The source code

/*!
 * licensing@extjs.com
 * http://www.extjs.com/license
 */

/**
 * @class Ext.data.Store
 * @extends Ext.util.Observable
 *
The Store class encapsulates a client side cache of {@link Ext.data.Record Record}
 * objects which provide input data for Components such as the {@link Ext.grid.GridPanel GridPanel},
 * the {@link Ext.form.ComboBox ComboBox}, or the {@link Ext.DataView DataView}.

 *
Retrieving Data

 *
A Store object may access a data object using:

 *
  • {@link #proxy configured implementation} of {@link Ext.data.DataProxy DataProxy}
    •
 *
  • {@link #data} to automatically pass in data
    •
 *
  • {@link #loadData} to manually pass in data
    •
 *

 *
Reading Data

 *
A Store object has no inherent knowledge of the format of the data object (it could be
 * an Array, XML, or JSON). A Store object uses an appropriate {@link #reader configured implementation}
 * of a {@link Ext.data.DataReader DataReader} to create {@link Ext.data.Record Record} instances from the data
 * object.

 *
Store Types

 *
There are several implementations of Store available which are customized for use with
 * a specific DataReader implementation.  Here is an example using an ArrayStore which implicitly
 * creates a reader commensurate to an Array data object.

 *

var myStore = new Ext.data.ArrayStore({
    fields: ['fullname', 'first'],
    idIndex: 0 // id for each record will be the first element
});
 *

 *
For custom implementations create a basic {@link Ext.data.Store} configured as needed:

 *

// create a {@link Ext.data.Record Record} constructor:
var rt = Ext.data.Record.create([
    {name: 'fullname'},
    {name: 'first'}
]);
var myStore = new Ext.data.Store({
    // explicitly create reader
    reader: new Ext.data.ArrayReader(
        {
            idIndex: 0  // id for each record will be the first element
        },
        rt // recordType
    )
});
 *

 *
Load some data into store (note the data object is an array which corresponds to the reader):

 *

var myData = [
    [1, 'Fred Flintstone', 'Fred'],  // note that id for the record is the first element
    [2, 'Barney Rubble', 'Barney']
];
myStore.loadData(myData);
 *

 *
Records are cached and made available through accessor functions.  An example of adding
 * a record to the store:

 *

var defaultData = {
    fullname: 'Full Name',
    first: 'First Name'
};
var recId = 100; // provide unique id for the record
var r = new myStore.recordType(defaultData, ++recId); // create new record
myStore.{@link #insert}(0, r); // insert a new record into the store (also see {@link #add})
 *

 *
Writing Data

 *
And new in Ext version 3, use the new {@link Ext.data.DataWriter DataWriter} to create an automated, Writable Store
 * along with RESTful features.
 * @constructor
 * Creates a new Store.
 * @param {Object} config A config object containing the objects needed for the Store to access data,
 * and read the data into Records.
 * @xtype store
 */
Ext.data.Store = Ext.extend(Ext.util.Observable, {

/**
     * @cfg {String} storeId If passed, the id to use to register with the {@link Ext.StoreMgr StoreMgr}.
     *
Note: if a (deprecated) {@link #id} is specified it will supersede the storeId
     * assignment.

     */

/**
     * @cfg {String} url If a {@link #proxy} is not specified the url will be used to
     * implicitly configure a {@link Ext.data.HttpProxy HttpProxy} if an url is specified.
     * Typically this option, or the {@link #data} option will be specified.
     */

/**
     * @cfg {Boolean/Object} autoLoad If {@link #data} is not specified, and if autoLoad
     * is true or an Object, this store's {@link #load} method is automatically called
     * after creation. If the value of autoLoad is an Object, this Object will
     * be passed to the store's {@link #load} method.
     */

/**
     * @cfg {Ext.data.DataProxy} proxy The {@link Ext.data.DataProxy DataProxy} object which provides
     * access to a data object.  See {@link #url}.
     */

/**
     * @cfg {Array} data An inline data object readable by the {@link #reader}.
     * Typically this option, or the {@link #url} option will be specified.
     */

/**
     * @cfg {Ext.data.DataReader} reader The {@link Ext.data.DataReader Reader} object which processes the
     * data object and returns an Array of {@link Ext.data.Record} objects which are cached keyed by their
     * {@link Ext.data.Record#id id} property.
     */

/**
     * @cfg {Ext.data.DataWriter} writer
     *
The {@link Ext.data.DataWriter Writer} object which processes a record object for being written
     * to the server-side database.

     *
When a writer is installed into a Store the {@link #add}, {@link #remove}, and {@link #update}
     * events on the store are monitored in order to remotely {@link #createRecords create records},
     * {@link #destroyRecord destroy records}, or {@link #updateRecord update records}.

     *
The proxy for this store will relay any {@link #writexception} events to this store.

     *
Sample implementation:
     *

var writer = new {@link Ext.data.JsonWriter}({
    encode: true,
    writeAllFields: true // write all fields, not just those that changed
});

// Typical Store collecting the Proxy, Reader and Writer together.
var store = new Ext.data.Store({
    storeId: 'user',
    root: 'records',
    proxy: proxy,
    reader: reader,
    writer: writer,     // <-- plug a DataWriter into the store just as you would a Reader
    paramsAsHash: true,
    autoSave: false    // <-- false to delay executing create, update, destroy requests
                        //     until specifically told to do so.
});
     *

     */
    writer : undefined,

/**
     * @cfg {Object} baseParams
     *
An object containing properties which are to be sent as parameters
     * for every HTTP request.

     *
Parameters are encoded as standard HTTP parameters using {@link Ext#urlEncode}.

     *
Note: baseParams may be superseded by any params
     * specified in a {@link #load} request, see {@link #load}
     * for more details.

     * This property may be modified after creation using the {@link #setBaseParam}
     * method.
     * @property
     */

/**
     * @cfg {Object} sortInfo A config object to specify the sort order in the request of a Store's
     * {@link #load} operation.  Note that for local sorting, the direction property is
     * case-sensitive. See also {@link #remoteSort} and {@link #paramNames}.
     * For example:

sortInfo: {
    field: 'fieldName',
    direction: 'ASC' // or 'DESC' (case sensitive for local sorting)
}

     */

/**
     * @cfg {boolean} remoteSort true if sorting is to be handled by requesting the {@link #proxy Proxy}
     * to provide a refreshed version of the data object in sorted order, as opposed to sorting the Record cache
     * in place (defaults to false).
     *
If remoteSort is true, then clicking on a {@link Ext.grid.Column Grid Column}'s
     * {@link Ext.grid.Column#header header} causes the current page to be requested from the server appending
     * the following two parameters to the {@link #load params}:

     *
  • sort : String
    The name (as specified in the Record's
     * {@link Ext.data.Field Field definition}) of the field to sort on.
    •
     *
  • dir : String
    The direction of the sort, 'ASC' or 'DESC' (case-sensitive).
    •
     *

     */
    remoteSort : false,

/**
     * @cfg {Boolean} autoDestroy true to destroy the store when the component the store is bound
     * to is destroyed (defaults to false).
     *
Note: this should be set to true when using stores that are bound to only 1 component.

     */
    autoDestroy : false,

/**
     * @cfg {Boolean} pruneModifiedRecords true to clear all modified record information each time
     * the store is loaded or when a record is removed (defaults to false). See {@link #getModifiedRecords}
     * for the accessor method to retrieve the modified records.
     */
    pruneModifiedRecords : false,

/**
     * Contains the last options object used as the parameter to the {@link #load} method. See {@link #load}
     * for the details of what this may contain. This may be useful for accessing any params which were used
     * to load the current Record cache.
     * @property
     */
    lastOptions : null,

/**
     * @cfg {Boolean} autoSave
     *
Defaults to true causing the store to automatically {@link #save} records to
     * the server when a record is modified (ie: becomes 'dirty'). Specify false to manually call {@link #save}
     * to send all modifiedRecords to the server.

     *
Note: each CRUD action will be sent as a separate request.

     */
    autoSave : true,

/**
     * @cfg {Boolean} batch
     *
Defaults to true (unless {@link #restful}:true). Multiple
     * requests for each CRUD action (CREATE, READ, UPDATE and DESTROY) will be combined
     * and sent as one transaction. Only applies when {@link #autoSave} is set
     * to false.

     *
If Store is RESTful, the DataProxy is also RESTful, and a unique transaction is
     * generated for each record.

     */
    batch : true,

/**
     * @cfg {Boolean} restful
     * Defaults to false.  Set to true to have the Store and the set
     * Proxy operate in a RESTful manner. The store will automatically generate GET, POST,
     * PUT and DELETE requests to the server. The HTTP method used for any given CRUD
     * action is described in {@link Ext.data.Api#restActions}.  For additional information
     * see {@link Ext.data.DataProxy#restful}.
     *
Note: if {@link #restful}:true batch will
     * internally be set to false.

     */
    restful: false,

/**
     * @cfg {Object} paramNames
     *
An object containing properties which specify the names of the paging and
     * sorting parameters passed to remote servers when loading blocks of data. By default, this
     * object takes the following form:

{
    start : 'start',  // The parameter name which specifies the start row
    limit : 'limit',  // The parameter name which specifies number of rows to return
    sort : 'sort',    // The parameter name which specifies the column to sort on
    dir : 'dir'       // The parameter name which specifies the sort direction
}

     *
The server must produce the requested data block upon receipt of these parameter names.
     * If different parameter names are required, this property can be overriden using a configuration
     * property.

     *
A {@link Ext.PagingToolbar PagingToolbar} bound to this Store uses this property to determine
     * the parameter names to use in its {@link #load requests}.
     */
    paramNames : undefined,

/**
     * @cfg {Object} defaultParamNames
     * Provides the default values for the {@link #paramNames} property. To globally modify the parameters
     * for all stores, this object should be changed on the store prototype.
     */
    defaultParamNames : {
        start : 'start',
        limit : 'limit',
        sort : 'sort',
        dir : 'dir'
    },

/**
     * @property isDestroyed
     * @type Boolean
     * True if the store has been destroyed already. Read only
     */
    isDestroyed: false,

/**
     * @property hasMultiSort
     * @type Boolean
     * True if this store is currently sorted by more than one field/direction combination.
     */
    hasMultiSort: false,

    // private
    batchKey : '_ext_batch_',

    constructor : function(config){
        this.data = new Ext.util.MixedCollection(false);
        this.data.getKey = function(o){
            return o.id;
        };

        // temporary removed-records cache
        this.removed = [];

        if(config && config.data){
            this.inlineData = config.data;
            delete config.data;
        }

        Ext.apply(this, config);

/**
         * See the {@link #baseParams corresponding configuration option}
         * for a description of this property.
         * To modify this property see {@link #setBaseParam}.
         * @property
         */
        this.baseParams = Ext.isObject(this.baseParams) ? this.baseParams : {};

        this.paramNames = Ext.applyIf(this.paramNames || {}, this.defaultParamNames);

        if((this.url || this.api) && !this.proxy){
            this.proxy = new Ext.data.HttpProxy({url: this.url, api: this.api});
        }
        // If Store is RESTful, so too is the DataProxy
        if (this.restful === true && this.proxy) {
            // When operating RESTfully, a unique transaction is generated for each record.
            // TODO might want to allow implemention of faux REST where batch is possible using RESTful routes only.
            this.batch = false;
            Ext.data.Api.restify(this.proxy);
        }

        if(this.reader){ // reader passed
            if(!this.recordType){
                this.recordType = this.reader.recordType;
            }
            if(this.reader.onMetaChange){
                this.reader.onMetaChange = this.reader.onMetaChange.createSequence(this.onMetaChange, this);
            }
            if (this.writer) { // writer passed
                if (this.writer instanceof(Ext.data.DataWriter) === false) {    // <-- config-object instead of instance.
                    this.writer = this.buildWriter(this.writer);
                }
                this.writer.meta = this.reader.meta;
                this.pruneModifiedRecords = true;
            }
        }

/**
         * The {@link Ext.data.Record Record} constructor as supplied to (or created by) the
         * {@link Ext.data.DataReader Reader}. Read-only.
         *
If the Reader was constructed by passing in an Array of {@link Ext.data.Field} definition objects,
         * instead of a Record constructor, it will implicitly create a Record constructor from that Array (see
         * {@link Ext.data.Record}.{@link Ext.data.Record#create create} for additional details).

         *
This property may be used to create new Records of the type held in this Store, for example:

    // create the data store
    var store = new Ext.data.ArrayStore({
        autoDestroy: true,
        fields: [
           {name: 'company'},
           {name: 'price', type: 'float'},
           {name: 'change', type: 'float'},
           {name: 'pctChange', type: 'float'},
           {name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
        ]
    });
    store.loadData(myData);

    // create the Grid
    var grid = new Ext.grid.EditorGridPanel({
        store: store,
        colModel: new Ext.grid.ColumnModel({
            columns: [
                {id:'company', header: 'Company', width: 160, dataIndex: 'company'},
                {header: 'Price', renderer: 'usMoney', dataIndex: 'price'},
                {header: 'Change', renderer: change, dataIndex: 'change'},
                {header: '% Change', renderer: pctChange, dataIndex: 'pctChange'},
                {header: 'Last Updated', width: 85,
                    renderer: Ext.util.Format.dateRenderer('m/d/Y'),
                    dataIndex: 'lastChange'}
            ],
            defaults: {
                sortable: true,
                width: 75
            }
        }),
        autoExpandColumn: 'company', // match the id specified in the column model
        height:350,
        width:600,
        title:'Array Grid',
        tbar: [{
            text: 'Add Record',
            handler : function(){
                var defaultData = {
                    change: 0,
                    company: 'New Company',
                    lastChange: (new Date()).clearTime(),
                    pctChange: 0,
                    price: 10
                };
                var recId = 3; // provide unique id
                var p = new store.recordType(defaultData, recId); // create new record
                grid.stopEditing();
                store.{@link #insert}(0, p); // insert a new record into the store (also see {@link #add})
                grid.startEditing(0, 0);
            }
        }]
    });
         *

         * @property recordType
         * @type Function
         */

        if(this.recordType){

/**
             * A {@link Ext.util.MixedCollection MixedCollection} containing the defined {@link Ext.data.Field Field}s
             * for the {@link Ext.data.Record Records} stored in this Store. Read-only.
             * @property fields
             * @type Ext.util.MixedCollection
             */
            this.fields = this.recordType.prototype.fields;
        }
        this.modified = [];

        this.addEvents(

/**
             * @event datachanged
             * Fires when the data cache has changed in a bulk manner (e.g., it has been sorted, filtered, etc.) and a
             * widget that is using this Store as a Record cache should refresh its view.
             * @param {Store} this
             */
            'datachanged',

/**
             * @event metachange
             * Fires when this store's reader provides new metadata (fields). This is currently only supported for JsonReaders.
             * @param {Store} this
             * @param {Object} meta The JSON metadata
             */
            'metachange',

/**
             * @event add
             * Fires when Records have been {@link #add}ed to the Store
             * @param {Store} this
             * @param {Ext.data.Record[]} records The array of Records added
             * @param {Number} index The index at which the record(s) were added
             */
            'add',

/**
             * @event remove
             * Fires when a Record has been {@link #remove}d from the Store
             * @param {Store} this
             * @param {Ext.data.Record} record The Record that was removed
             * @param {Number} index The index at which the record was removed
             */
            'remove',

/**
             * @event update
             * Fires when a Record has been updated
             * @param {Store} this
             * @param {Ext.data.Record} record The Record that was updated
             * @param {String} operation The update operation being performed.  Value may be one of:
             *

     Ext.data.Record.EDIT
     Ext.data.Record.REJECT
     Ext.data.Record.COMMIT
             *

             */
            'update',

/**
             * @event clear
             * Fires when the data cache has been cleared.
             * @param {Store} this
             * @param {Record[]} The records that were cleared.
             */
            'clear',

/**
             * @event exception
             *
Fires if an exception occurs in the Proxy during a remote request.
             * This event is relayed through the corresponding {@link Ext.data.DataProxy}.
             * See {@link Ext.data.DataProxy}.{@link Ext.data.DataProxy#exception exception}
             * for additional details.
             * @param {misc} misc See {@link Ext.data.DataProxy}.{@link Ext.data.DataProxy#exception exception}
             * for description.
             */
            'exception',

/**
             * @event beforeload
             * Fires before a request is made for a new data object.  If the beforeload handler returns
             * false the {@link #load} action will be canceled.
             * @param {Store} this
             * @param {Object} options The loading options that were specified (see {@link #load} for details)
             */
            'beforeload',

/**
             * @event load
             * Fires after a new set of Records has been loaded.
             * @param {Store} this
             * @param {Ext.data.Record[]} records The Records that were loaded
             * @param {Object} options The loading options that were specified (see {@link #load} for details)
             */
            'load',

/**
             * @event loadexception
             *
This event is deprecated in favor of the catch-all {@link #exception}
             * event instead.

             *
This event is relayed through the corresponding {@link Ext.data.DataProxy}.
             * See {@link Ext.data.DataProxy}.{@link Ext.data.DataProxy#loadexception loadexception}
             * for additional details.
             * @param {misc} misc See {@link Ext.data.DataProxy}.{@link Ext.data.DataProxy#loadexception loadexception}
             * for description.
             */
            'loadexception',

/**
             * @event beforewrite
             * @param {Ext.data.Store} store
             * @param {String} action [Ext.data.Api.actions.create|update|destroy]
             * @param {Record/Record[]} rs The Record(s) being written.
             * @param {Object} options The loading options that were specified. Edit options.params to add Http parameters to the request.  (see {@link #save} for details)
             * @param {Object} arg The callback's arg object passed to the {@link #request} function
             */
            'beforewrite',

/**
             * @event write
             * Fires if the server returns 200 after an Ext.data.Api.actions CRUD action.
             * Success of the action is determined in the result['successProperty']property (NOTE for RESTful stores,
             * a simple 20x response is sufficient for the actions "destroy" and "update".  The "create" action should should return 200 along with a database pk).
             * @param {Ext.data.Store} store
             * @param {String} action [Ext.data.Api.actions.create|update|destroy]
             * @param {Object} result The 'data' picked-out out of the response for convenience.
             * @param {Ext.Direct.Transaction} res
             * @param {Record/Record[]} rs Store's records, the subject(s) of the write-action
             */
            'write',

/**
             * @event beforesave
             * Fires before a save action is called. A save encompasses destroying records, updating records and creating records.
             * @param {Ext.data.Store} store
             * @param {Object} data An object containing the data that is to be saved. The object will contain a key for each appropriate action,
             * with an array of records for each action.
             */
            'beforesave',

/**
             * @event save
             * Fires after a save is completed. A save encompasses destroying records, updating records and creating records.
             * @param {Ext.data.Store} store
             * @param {Number} batch The identifier for the batch that was saved.
             * @param {Object} data An object containing the data that is to be saved. The object will contain a key for each appropriate action,
             * with an array of records for each action.
             */
            'save'

        );

        if(this.proxy){
            // TODO remove deprecated loadexception with ext-3.0.1
            this.relayEvents(this.proxy,  ['loadexception', 'exception']);
        }
        // With a writer set for the Store, we want to listen to add/remove events to remotely create/destroy records.
        if (this.writer) {
            this.on({
                scope: this,
                add: this.createRecords,
                remove: this.destroyRecord,
                update: this.updateRecord,
                clear: this.onClear
            });
        }

        this.sortToggle = {};
        if(this.sortField){
            this.setDefaultSort(this.sortField, this.sortDir);
        }else if(this.sortInfo){
            this.setDefaultSort(this.sortInfo.field, this.sortInfo.direction);
        }

        Ext.data.Store.superclass.constructor.call(this);

        if(this.id){
            this.storeId = this.id;
            delete this.id;
        }
        if(this.storeId){
            Ext.StoreMgr.register(this);
        }
        if(this.inlineData){
            this.loadData(this.inlineData);
            delete this.inlineData;
        }else if(this.autoLoad){
            this.load.defer(10, this, [
                typeof this.autoLoad == 'object' ?
                    this.autoLoad : undefined]);
        }
        // used internally to uniquely identify a batch
        this.batchCounter = 0;
        this.batches = {};
    },

    /**
     * builds a DataWriter instance when Store constructor is provided with a writer config-object instead of an instace.
     * @param {Object} config Writer configuration
     * @return {Ext.data.DataWriter}
     * @private
     */
    buildWriter : function(config) {
        var klass = undefined,
            type = (config.format || 'json').toLowerCase();
        switch (type) {
            case 'json':
                klass = Ext.data.JsonWriter;
                break;
            case 'xml':
                klass = Ext.data.XmlWriter;
                break;
            default:
                klass = Ext.data.JsonWriter;
        }
        return new klass(config);
    },

/**
     * Destroys the store.
     */
    destroy : function(){
        if(!this.isDestroyed){
            if(this.storeId){
                Ext.StoreMgr.unregister(this);
            }
            this.clearData();
            this.data = null;
            Ext.destroy(this.proxy);
            this.reader = this.writer = null;
            this.purgeListeners();
            this.isDestroyed = true;
        }
    },

/**
     * Add Records to the Store and fires the {@link #add} event.  To add Records
     * to the store from a remote source use {@link #load}({add:true}).
     * See also {@link #recordType} and {@link #insert}.
     * @param {Ext.data.Record[]} records An Array of Ext.data.Record objects
     * to add to the cache. See {@link #recordType}.
     */
    add : function(records){
        records = [].concat(records);
        if(records.length < 1){
            return;
        }
        for(var i = 0, len = records.length; i < len; i++){
            records[i].join(this);
        }
        var index = this.data.length;
        this.data.addAll(records);
        if(this.snapshot){
            this.snapshot.addAll(records);
        }
        this.fireEvent('add', this, records, index);
    },

/**
     * (Local sort only) Inserts the passed Record into the Store at the index where it
     * should go based on the current sort information.
     * @param {Ext.data.Record} record
     */
    addSorted : function(record){
        var index = this.findInsertIndex(record);
        this.insert(index, record);
    },

/**
     * Remove Records from the Store and fires the {@link #remove} event.
     * @param {Ext.data.Record/Ext.data.Record[]} record The record object or array of records to remove from the cache.
     */
    remove : function(record){
        if(Ext.isArray(record)){
            Ext.each(record, function(r){
                this.remove(r);
            }, this);
        }
        var index = this.data.indexOf(record);
        if(index > -1){
            record.join(null);
            this.data.removeAt(index);
        }
        if(this.pruneModifiedRecords){
            this.modified.remove(record);
        }
        if(this.snapshot){
            this.snapshot.remove(record);
        }
        if(index > -1){
            this.fireEvent('remove', this, record, index);
        }
    },

/**
     * Remove a Record from the Store at the specified index. Fires the {@link #remove} event.
     * @param {Number} index The index of the record to remove.
     */
    removeAt : function(index){
        this.remove(this.getAt(index));
    },

/**
     * Remove all Records from the Store and fires the {@link #clear} event.
     * @param {Boolean} silent [false] Defaults to false.  Set true to not fire clear event.
     */
    removeAll : function(silent){
        var items = [];
        this.each(function(rec){
            items.push(rec);
        });
        this.clearData();
        if(this.snapshot){
            this.snapshot.clear();
        }
        if(this.pruneModifiedRecords){
            this.modified = [];
        }
        if (silent !== true) {  // <-- prevents write-actions when we just want to clear a store.
            this.fireEvent('clear', this, items);
        }
    },

    // private
    onClear: function(store, records){
        Ext.each(records, function(rec, index){
            this.destroyRecord(this, rec, index);
        }, this);
    },

/**
     * Inserts Records into the Store at the given index and fires the {@link #add} event.
     * See also {@link #add} and {@link #addSorted}.
     * @param {Number} index The start index at which to insert the passed Records.
     * @param {Ext.data.Record[]} records An Array of Ext.data.Record objects to add to the cache.
     */
    insert : function(index, records){
        records = [].concat(records);
        for(var i = 0, len = records.length; i < len; i++){
            this.data.insert(index, records[i]);
            records[i].join(this);
        }
        if(this.snapshot){
            this.snapshot.addAll(records);
        }
        this.fireEvent('add', this, records, index);
    },

/**
     * Get the index within the cache of the passed Record.
     * @param {Ext.data.Record} record The Ext.data.Record object to find.
     * @return {Number} The index of the passed Record. Returns -1 if not found.
     */
    indexOf : function(record){
        return this.data.indexOf(record);
    },

/**
     * Get the index within the cache of the Record with the passed id.
     * @param {String} id The id of the Record to find.
     * @return {Number} The index of the Record. Returns -1 if not found.
     */
    indexOfId : function(id){
        return this.data.indexOfKey(id);
    },

/**
     * Get the Record with the specified id.
     * @param {String} id The id of the Record to find.
     * @return {Ext.data.Record} The Record with the passed id. Returns undefined if not found.
     */
    getById : function(id){
        return (this.snapshot || this.data).key(id);
    },

/**
     * Get the Record at the specified index.
     * @param {Number} index The index of the Record to find.
     * @return {Ext.data.Record} The Record at the passed index. Returns undefined if not found.
     */
    getAt : function(index){
        return this.data.itemAt(index);
    },

/**
     * Returns a range of Records between specified indices.
     * @param {Number} startIndex (optional) The starting index (defaults to 0)
     * @param {Number} endIndex (optional) The ending index (defaults to the last Record in the Store)
     * @return {Ext.data.Record[]} An array of Records
     */
    getRange : function(start, end){
        return this.data.getRange(start, end);
    },

    // private
    storeOptions : function(o){
        o = Ext.apply({}, o);
        delete o.callback;
        delete o.scope;
        this.lastOptions = o;
    },

    // private
    clearData: function(){
        this.data.each(function(rec) {
            rec.join(null);
        });
        this.data.clear();
    },

/**
     *
Loads the Record cache from the configured {@link #proxy} using the configured {@link #reader}.

     *
Notes:

     *
  • Important: loading is asynchronous! This call will return before the new data has been
     * loaded. To perform any post-processing where information from the load call is required, specify
     * the callback function to be called, or use a {@link Ext.util.Observable#listeners a 'load' event handler}.
    •
     *
  • If using {@link Ext.PagingToolbar remote paging}, the first load call must specify the start and limit
     * properties in the options.params property to establish the initial position within the
     * dataset, and the number of Records to cache on each read from the Proxy.
    •
     *
  • If using {@link #remoteSort remote sorting}, the configured {@link #sortInfo}
     * will be automatically included with the posted parameters according to the specified
     * {@link #paramNames}.
    •
     *

     * @param {Object} options An object containing properties which control loading options:

     *
  • params :Object
    An object containing properties to pass as HTTP
     * parameters to a remote data source. Note: params will override any
     * {@link #baseParams} of the same name.

     *
    Parameters are encoded as standard HTTP parameters using {@link Ext#urlEncode}.
    •
     *
  • callback : Function
    A function to be called after the Records
     * have been loaded. The callback is called after the load event is fired, and is passed the following arguments:

     *
    • r : Ext.data.Record[] An Array of Records loaded.
      •
     *
    • options : Options object from the load call.
      •
     *
    • success : Boolean success indicator.
    •
     *
  • scope : Object
    Scope with which to call the callback (defaults
     * to the Store object)
    •
     *
  • add : Boolean
    Indicator to append loaded records rather than
     * replace the current cache.  Note: see note for {@link #loadData}
    •
     *

     * @return {Boolean} If the developer provided {@link #beforeload} event handler returns
     * false, the load call will abort and will return false; otherwise will return true.
     */
    load : function(options) {
        options = Ext.apply({}, options);
        this.storeOptions(options);
        if(this.sortInfo && this.remoteSort){
            var pn = this.paramNames;
            options.params = Ext.apply({}, options.params);
            options.params[pn.sort] = this.sortInfo.field;
            options.params[pn.dir] = this.sortInfo.direction;
        }
        try {
            return this.execute('read', null, options); // <-- null represents rs.  No rs for load actions.
        } catch(e) {
            this.handleException(e);
            return false;
        }
    },

    /**
     * updateRecord  Should not be used directly.  This method will be called automatically if a Writer is set.
     * Listens to 'update' event.
     * @param {Object} store
     * @param {Object} record
     * @param {Object} action
     * @private
     */
    updateRecord : function(store, record, action) {
        if (action == Ext.data.Record.EDIT && this.autoSave === true && (!record.phantom || (record.phantom && record.isValid()))) {
            this.save();
        }
    },

    /**
     * Should not be used directly.  Store#add will call this automatically if a Writer is set
     * @param {Object} store
     * @param {Object} rs
     * @param {Object} index
     * @private
     */
    createRecords : function(store, rs, index) {
        for (var i = 0, len = rs.length; i < len; i++) {
            if (rs[i].phantom && rs[i].isValid()) {
                rs[i].markDirty();  // <-- Mark new records dirty
                this.modified.push(rs[i]);  // <-- add to modified
            }
        }
        if (this.autoSave === true) {
            this.save();
        }
    },

    /**
     * Destroys a Record.  Should not be used directly.  It's called by Store#remove if a Writer is set.
     * @param {Store} store this
     * @param {Ext.data.Record} record
     * @param {Number} index
     * @private
     */
    destroyRecord : function(store, record, index) {
        if (this.modified.indexOf(record) != -1) {  // <-- handled already if @cfg pruneModifiedRecords == true
            this.modified.remove(record);
        }
        if (!record.phantom) {
            this.removed.push(record);

            // since the record has already been removed from the store but the server request has not yet been executed,
            // must keep track of the last known index this record existed.  If a server error occurs, the record can be
            // put back into the store.  @see Store#createCallback where the record is returned when response status === false
            record.lastIndex = index;

            if (this.autoSave === true) {
                this.save();
            }
        }
    },

    /**
     * This method should generally not be used directly.  This method is called internally
     * by {@link #load}, or if a Writer is set will be called automatically when {@link #add},
     * {@link #remove}, or {@link #update} events fire.
     * @param {String} action Action name ('read', 'create', 'update', or 'destroy')
     * @param {Record/Record[]} rs
     * @param {Object} options
     * @throws Error
     * @private
     */
    execute : function(action, rs, options, /* private */ batch) {
        // blow up if action not Ext.data.CREATE, READ, UPDATE, DESTROY
        if (!Ext.data.Api.isAction(action)) {
            throw new Ext.data.Api.Error('execute', action);
        }
        // make sure options has a fresh, new params hash
        options = Ext.applyIf(options||{}, {
            params: {}
        });
        if(batch !== undefined){
            this.addToBatch(batch);
        }
        // have to separate before-events since load has a different signature than create,destroy and save events since load does not
        // include the rs (record resultset) parameter.  Capture return values from the beforeaction into doRequest flag.
        var doRequest = true;

        if (action === 'read') {
            doRequest = this.fireEvent('beforeload', this, options);
            Ext.applyIf(options.params, this.baseParams);
        }
        else {
            // if Writer is configured as listful, force single-record rs to be [{}] instead of {}
            // TODO Move listful rendering into DataWriter where the @cfg is defined.  Should be easy now.
            if (this.writer.listful === true && this.restful !== true) {
                rs = (Ext.isArray(rs)) ? rs : [rs];
            }
            // if rs has just a single record, shift it off so that Writer writes data as '{}' rather than '[{}]'
            else if (Ext.isArray(rs) && rs.length == 1) {
                rs = rs.shift();
            }
            // Write the action to options.params
            if ((doRequest = this.fireEvent('beforewrite', this, action, rs, options)) !== false) {
                this.writer.apply(options.params, this.baseParams, action, rs);
            }
        }
        if (doRequest !== false) {
            // Send request to proxy.
            if (this.writer && this.proxy.url && !this.proxy.restful && !Ext.data.Api.hasUniqueUrl(this.proxy, action)) {
                options.params.xaction = action;    // <-- really old, probaby unecessary.
            }
            // Note:  Up until this point we've been dealing with 'action' as a key from Ext.data.Api.actions.
            // We'll flip it now and send the value into DataProxy#request, since it's the value which maps to
            // the user's configured DataProxy#api
            // TODO Refactor all Proxies to accept an instance of Ext.data.Request (not yet defined) instead of this looooooong list
            // of params.  This method is an artifact from Ext2.
            this.proxy.request(Ext.data.Api.actions[action], rs, options.params, this.reader, this.createCallback(action, rs, batch), this, options);
        }
        return doRequest;
    },

/**
     * Saves all pending changes to the store.  If the commensurate Ext.data.Api.actions action is not configured, then
     * the configured {@link #url} will be used.
     *
     * change            url
     * ---------------   --------------------
     * removed records   Ext.data.Api.actions.destroy
     * phantom records   Ext.data.Api.actions.create
     * {@link #getModifiedRecords modified records}  Ext.data.Api.actions.update
     *

     * @TODO:  Create extensions of Error class and send associated Record with thrown exceptions.
     * e.g.:  Ext.data.DataReader.Error or Ext.data.Error or Ext.data.DataProxy.Error, etc.
     * @return {Number} batch Returns a number to uniquely identify the "batch" of saves occurring. -1 will be returned
     * if there are no items to save or the save was cancelled.
     */
    save : function() {
        if (!this.writer) {
            throw new Ext.data.Store.Error('writer-undefined');
        }

        var queue = [],
            len,
            trans,
            batch,
            data = {};
        // DESTROY:  First check for removed records.  Records in this.removed are guaranteed non-phantoms.  @see Store#remove
        if(this.removed.length){
            queue.push(['destroy', this.removed]);
        }

        // Check for modified records. Use a copy so Store#rejectChanges will work if server returns error.
        var rs = [].concat(this.getModifiedRecords());
        if(rs.length){
            // CREATE:  Next check for phantoms within rs.  splice-off and execute create.
            var phantoms = [];
            for(var i = rs.length-1; i >= 0; i--){
                if(rs[i].phantom === true){
                    var rec = rs.splice(i, 1).shift();
                    if(rec.isValid()){
                        phantoms.push(rec);
                    }
                }else if(!rs[i].isValid()){ // <-- while we're here, splice-off any !isValid real records
                    rs.splice(i,1);
                }
            }
            // If we have valid phantoms, create them...
            if(phantoms.length){
                queue.push(['create', phantoms]);
            }

            // UPDATE:  And finally, if we're still here after splicing-off phantoms and !isValid real records, update the rest...
            if(rs.length){
                queue.push(['update', rs]);
            }
        }
        len = queue.length;
        if(len){
            batch = ++this.batchCounter;
            for(var i = 0; i < len; ++i){
                trans = queue[i];
                data[trans[0]] = trans[1];
            }
            if(this.fireEvent('beforesave', this, data) !== false){
                for(var i = 0; i < len; ++i){
                    trans = queue[i];
                    this.doTransaction(trans[0], trans[1], batch);
                }
                return batch;
            }
        }
        return -1;
    },

    // private.  Simply wraps call to Store#execute in try/catch.  Defers to Store#handleException on error.  Loops if batch: false
    doTransaction : function(action, rs, batch) {
        function transaction(records) {
            try{
                this.execute(action, records, undefined, batch);
            }catch (e){
                this.handleException(e);
            }
        }
        if(this.batch === false){
            for(var i = 0, len = rs.length; i < len; i++){
                transaction.call(this, rs[i]);
            }
        }else{
            transaction.call(this, rs);
        }
    },

    // private
    addToBatch : function(batch){
        var b = this.batches,
            key = this.batchKey + batch,
            o = b[key];

        if(!o){
            b[key] = o = {
                id: batch,
                count: 0,
                data: {}
            };
        }
        ++o.count;
    },

    removeFromBatch : function(batch, action, data){
        var b = this.batches,
            key = this.batchKey + batch,
            o = b[key],
            data,
            arr;

        if(o){
            arr = o.data[action] || [];
            o.data[action] = arr.concat(data);
            if(o.count === 1){
                data = o.data;
                delete b[key];
                this.fireEvent('save', this, batch, data);
            }else{
                --o.count;
            }
        }
    },

    // @private callback-handler for remote CRUD actions
    // Do not override -- override loadRecords, onCreateRecords, onDestroyRecords and onUpdateRecords instead.
    createCallback : function(action, rs, batch) {
        var actions = Ext.data.Api.actions;
        return (action == 'read') ? this.loadRecords : function(data, response, success) {
            // calls: onCreateRecords | onUpdateRecords | onDestroyRecords
            this['on' + Ext.util.Format.capitalize(action) + 'Records'](success, rs, [].concat(data));
            // If success === false here, exception will have been called in DataProxy
            if (success === true) {
                this.fireEvent('write', this, action, data, response, rs);
            }
            this.removeFromBatch(batch, action, data);
        };
    },

    // Clears records from modified array after an exception event.
    // NOTE:  records are left marked dirty.  Do we want to commit them even though they were not updated/realized?
    // TODO remove this method?
    clearModified : function(rs) {
        if (Ext.isArray(rs)) {
            for (var n=rs.length-1;n>=0;n--) {
                this.modified.splice(this.modified.indexOf(rs[n]), 1);
            }
        } else {
            this.modified.splice(this.modified.indexOf(rs), 1);
        }
    },

    // remap record ids in MixedCollection after records have been realized.  @see Store#onCreateRecords, @see DataReader#realize
    reMap : function(record) {
        if (Ext.isArray(record)) {
            for (var i = 0, len = record.length; i < len; i++) {
                this.reMap(record[i]);
            }
        } else {
            delete this.data.map[record._phid];
            this.data.map[record.id] = record;
            var index = this.data.keys.indexOf(record._phid);
            this.data.keys.splice(index, 1, record.id);
            delete record._phid;
        }
    },

    // @protected onCreateRecord proxy callback for create action
    onCreateRecords : function(success, rs, data) {
        if (success === true) {
            try {
                this.reader.realize(rs, data);
                this.reMap(rs);
            }
            catch (e) {
                this.handleException(e);
                if (Ext.isArray(rs)) {
                    // Recurse to run back into the try {}.  DataReader#realize splices-off the rs until empty.
                    this.onCreateRecords(success, rs, data);
                }
            }
        }
    },

    // @protected, onUpdateRecords proxy callback for update action
    onUpdateRecords : function(success, rs, data) {
        if (success === true) {
            try {
                this.reader.update(rs, data);
            } catch (e) {
                this.handleException(e);
                if (Ext.isArray(rs)) {
                    // Recurse to run back into the try {}.  DataReader#update splices-off the rs until empty.
                    this.onUpdateRecords(success, rs, data);
                }
            }
        }
    },

    // @protected onDestroyRecords proxy callback for destroy action
    onDestroyRecords : function(success, rs, data) {
        // splice each rec out of this.removed
        rs = (rs instanceof Ext.data.Record) ? [rs] : [].concat(rs);
        for (var i=0,len=rs.length;i=0;i--) {
                this.insert(rs[i].lastIndex, rs[i]);    // <-- lastIndex set in Store#destroyRecord
            }
        }
    },

    // protected handleException.  Possibly temporary until Ext framework has an exception-handler.
    handleException : function(e) {
        // @see core/Error.js
        Ext.handleError(e);
    },

/**
     *
Reloads the Record cache from the configured Proxy using the configured
     * {@link Ext.data.Reader Reader} and the options from the last load operation
     * performed.

     *
Note: see the Important note in {@link #load}.

     * @param {Object} options
(optional) An Object containing
     * {@link #load loading options} which may override the {@link #lastOptions options}
     * used in the last {@link #load} operation. See {@link #load} for details
     * (defaults to null, in which case the {@link #lastOptions} are
     * used).

     *
To add new params to the existing params:

lastOptions = myStore.lastOptions;
Ext.apply(lastOptions.params, {
    myNewParam: true
});
myStore.reload(lastOptions);
     *

     */
    reload : function(options){
        this.load(Ext.applyIf(options||{}, this.lastOptions));
    },

    // private
    // Called as a callback by the Reader during a load operation.
    loadRecords : function(o, options, success){
        if (this.isDestroyed === true) {
            return;
        }
        if(!o || success === false){
            if(success !== false){
                this.fireEvent('load', this, [], options);
            }
            if(options.callback){
                options.callback.call(options.scope || this, [], options, false, o);
            }
            return;
        }
        var r = o.records, t = o.totalRecords || r.length;
        if(!options || options.add !== true){
            if(this.pruneModifiedRecords){
                this.modified = [];
            }
            for(var i = 0, len = r.length; i < len; i++){
                r[i].join(this);
            }
            if(this.snapshot){
                this.data = this.snapshot;
                delete this.snapshot;
            }
            this.clearData();
            this.data.addAll(r);
            this.totalLength = t;
            this.applySort();
            this.fireEvent('datachanged', this);
        }else{
            this.totalLength = Math.max(t, this.data.length+r.length);
            this.add(r);
        }
        this.fireEvent('load', this, r, options);
        if(options.callback){
            options.callback.call(options.scope || this, r, options, true);
        }
    },

/**
     * Loads data from a passed data block and fires the {@link #load} event. A {@link Ext.data.Reader Reader}
     * which understands the format of the data must have been configured in the constructor.
     * @param {Object} data The data block from which to read the Records.  The format of the data expected
     * is dependent on the type of {@link Ext.data.Reader Reader} that is configured and should correspond to
     * that {@link Ext.data.Reader Reader}'s {@link Ext.data.Reader#readRecords} parameter.
     * @param {Boolean} append (Optional) true to append the new Records rather the default to replace
     * the existing cache.
     * Note: that Records in a Store are keyed by their {@link Ext.data.Record#id id}, so added Records
     * with ids which are already present in the Store will replace existing Records. Only Records with
     * new, unique ids will be added.
     */
    loadData : function(o, append){
        var r = this.reader.readRecords(o);
        this.loadRecords(r, {add: append}, true);
    },

/**
     * Gets the number of cached records.
     *
If using paging, this may not be the total size of the dataset. If the data object
     * used by the Reader contains the dataset size, then the {@link #getTotalCount} function returns
     * the dataset size.  Note: see the Important note in {@link #load}.

     * @return {Number} The number of Records in the Store's cache.
     */
    getCount : function(){
        return this.data.length || 0;
    },

/**
     * Gets the total number of records in the dataset as returned by the server.
     *
If using paging, for this to be accurate, the data object used by the {@link #reader Reader}
     * must contain the dataset size. For remote data sources, the value for this property
     * (totalProperty for {@link Ext.data.JsonReader JsonReader},
     * totalRecords for {@link Ext.data.XmlReader XmlReader}) shall be returned by a query on the server.
     * Note: see the Important note in {@link #load}.

     * @return {Number} The number of Records as specified in the data object passed to the Reader
     * by the Proxy.
     *
Note: this value is not updated when changing the contents of the Store locally.

     */
    getTotalCount : function(){
        return this.totalLength || 0;
    },

/**
     * Returns an object describing the current sort state of this Store.
     * @return {Object} The sort state of the Store. An object with two properties:

     *
  • field : String
    The name of the field by which the Records are sorted.
    •
     *
  • direction : String
    The sort order, 'ASC' or 'DESC' (case-sensitive).
    •
     *

     * See {@link #sortInfo} for additional details.
     */
    getSortState : function(){
        return this.sortInfo;
    },

    /**
     * @private
     * Invokes sortData if we have sortInfo to sort on and are not sorting remotely
     */
    applySort : function(){
        if ((this.sortInfo || this.multiSortInfo) && !this.remoteSort) {
            this.sortData();
        }
    },

    /**
     * @private
     * Performs the actual sorting of data. This checks to see if we currently have a multi sort or not. It applies
     * each sorter field/direction pair in turn by building an OR'ed master sorting function and running it against
     * the full dataset
     */
    sortData : function() {
        var sortInfo  = this.hasMultiSort ? this.multiSortInfo : this.sortInfo,
            direction = sortInfo.direction || "ASC",
            sorters   = sortInfo.sorters,
            sortFns   = [];

        //if we just have a single sorter, pretend it's the first in an array
        if (!this.hasMultiSort) {
            sorters = [{direction: direction, field: sortInfo.field}];
        }

        //create a sorter function for each sorter field/direction combo
        for (var i=0, j = sorters.length; i < j; i++) {
            sortFns.push(this.createSortFunction(sorters[i].field, sorters[i].direction));
        }

        if (sortFns.length == 0) {
            return;
        }

        //the direction modifier is multiplied with the result of the sorting functions to provide overall sort direction
        //(as opposed to direction per field)
        var directionModifier = direction.toUpperCase() == "DESC" ? -1 : 1;

        //create a function which ORs each sorter together to enable multi-sort
        var fn = function(r1, r2) {
          var result = sortFns[0].call(this, r1, r2);

          //if we have more than one sorter, OR any additional sorter functions together
          if (sortFns.length > 1) {
              for (var i=1, j = sortFns.length; i < j; i++) {
                  result = result || sortFns[i].call(this, r1, r2);
              }
          }

          return directionModifier * result;
        };

        //sort the data
        this.data.sort(direction, fn);
        if (this.snapshot && this.snapshot != this.data) {
            this.snapshot.sort(direction, fn);
        }
    },

/**
     * Creates and returns a function which sorts an array by the given field and direction
     * @param {String} field The field to create the sorter for
     * @param {String} direction The direction to sort by (defaults to "ASC")
     * @return {Function} A function which sorts by the field/direction combination provided
     */
    createSortFunction: function(field, direction) {
        direction = direction || "ASC";
        var directionModifier = direction.toUpperCase() == "DESC" ? -1 : 1;

        var sortType = this.fields.get(field).sortType;

        //create a comparison function. Takes 2 records, returns 1 if record 1 is greater,
        //-1 if record 2 is greater or 0 if they are equal
        return function(r1, r2) {
            var v1 = sortType(r1.data[field]),
                v2 = sortType(r2.data[field]);

            return directionModifier * (v1 > v2 ? 1 : (v1 < v2 ? -1 : 0));
        };
    },

/**
     * Sets the default sort column and order to be used by the next {@link #load} operation.
     * @param {String} fieldName The name of the field to sort by.
     * @param {String} dir (optional) The sort order, 'ASC' or 'DESC' (case-sensitive, defaults to 'ASC')
     */
    setDefaultSort : function(field, dir) {
        dir = dir ? dir.toUpperCase() : 'ASC';
        this.sortInfo = {field: field, direction: dir};
        this.sortToggle[field] = dir;
    },

/**
     * Sort the Records.
     * If remote sorting is used, the sort is performed on the server, and the cache is reloaded. If local
     * sorting is used, the cache is sorted internally. See also {@link #remoteSort} and {@link #paramNames}.
     * This function accepts two call signatures - pass in a field name as the first argument to sort on a single
     * field, or pass in an array of sort configuration objects to sort by multiple fields.
     * Single sort example:
     * store.sort('name', 'ASC');
     * Multi sort example:
     * store.sort([
     *   {
     *     field    : 'name',
     *     direction: 'ASC'
     *   },
     *   {
     *     field    : 'salary',
     *     direction: 'DESC'
     *   }
     * ], 'ASC');
     * In this second form, the sort configs are applied in order, with later sorters sorting within earlier sorters' results.
     * For example, if two records with the same name are present they will also be sorted by salary if given the sort configs
     * above. Any number of sort configs can be added.
     * @param {String/Array} fieldName The name of the field to sort by, or an array of ordered sort configs
     * @param {String} dir (optional) The sort order, 'ASC' or 'DESC' (case-sensitive, defaults to 'ASC')
     */
    sort : function(fieldName, dir) {
        if (Ext.isArray(arguments[0])) {
            return this.multiSort.call(this, fieldName, dir);
        } else {
            return this.singleSort(fieldName, dir);
        }
    },

/**
     * Sorts the store contents by a single field and direction. This is called internally by {@link sort} and would
     * not usually be called manually
     * @param {String} fieldName The name of the field to sort by.
     * @param {String} dir (optional) The sort order, 'ASC' or 'DESC' (case-sensitive, defaults to 'ASC')
     */
    singleSort: function(fieldName, dir) {
        var field = this.fields.get(fieldName);
        if (!field) return false;

        var name       = field.name,
            sortInfo   = this.sortInfo || null,
            sortToggle = this.sortToggle ? this.sortToggle[name] : null;

        if (!dir) {
            if (sortInfo && sortInfo.field == name) { // toggle sort dir
                dir = (this.sortToggle[name] || 'ASC').toggle('ASC', 'DESC');
            } else {
                dir = field.sortDir;
            }
        }

        this.sortToggle[name] = dir;
        this.sortInfo = {field: name, direction: dir};
        this.hasMultiSort = false;

        if (this.remoteSort) {
            if (!this.load(this.lastOptions)) {
                if (sortToggle) {
                    this.sortToggle[name] = sortToggle;
                }
                if (sortInfo) {
                    this.sortInfo = sortInfo;
                }
            }
        } else {
            this.applySort();
            this.fireEvent('datachanged', this);
        }
    },

/**
     * Sorts the contents of this store by multiple field/direction sorters. This is called internally by {@link sort}
     * and would not usually be called manually.
     * Multi sorting only currently applies to local datasets - multiple sort data is not currently sent to a proxy
     * if remoteSort is used.
     * @param {Array} sorters Array of sorter objects (field and direction)
     * @param {String} direction Overall direction to sort the ordered results by (defaults to "ASC")
     */
    multiSort: function(sorters, direction) {
        this.hasMultiSort = true;
        direction = direction || "ASC";

        //toggle sort direction
        if (this.multiSortInfo && direction == this.multiSortInfo.direction) {
            direction = direction.toggle("ASC", "DESC");
        }

/**
         * @property multiSortInfo
         * @type Object
         * Object containing overall sort direction and an ordered array of sorter configs used when sorting on multiple fields
         */
        this.multiSortInfo = {
            sorters  : sorters,
            direction: direction
        };

        if (this.remoteSort) {
            this.singleSort(sorters[0].field, sorters[0].direction);

        } else {
            this.applySort();
            this.fireEvent('datachanged', this);
        }
    },

/**
     * Calls the specified function for each of the {@link Ext.data.Record Records} in the cache.
     * @param {Function} fn The function to call. The {@link Ext.data.Record Record} is passed as the first parameter.
     * Returning false aborts and exits the iteration.
     * @param {Object} scope (optional) The scope (this reference) in which the function is executed.
     * Defaults to the current {@link Ext.data.Record Record} in the iteration.
     */
    each : function(fn, scope){
        this.data.each(fn, scope);
    },

/**
     * Gets all {@link Ext.data.Record records} modified since the last commit.  Modified records are
     * persisted across load operations (e.g., during paging). Note: deleted records are not
     * included.  See also {@link #pruneModifiedRecords} and
     * {@link Ext.data.Record}{@link Ext.data.Record#markDirty markDirty}..
     * @return {Ext.data.Record[]} An array of {@link Ext.data.Record Records} containing outstanding
     * modifications.  To obtain modified fields within a modified record see
     *{@link Ext.data.Record}{@link Ext.data.Record#modified modified}..
     */
    getModifiedRecords : function(){
        return this.modified;
    },

/**
     * Sums the value of property for each {@link Ext.data.Record record} between start
     * and end and returns the result.
     * @param {String} property A field in each record
     * @param {Number} start (optional) The record index to start at (defaults to 0)
     * @param {Number} end (optional) The last record index to include (defaults to length - 1)
     * @return {Number} The sum
     */
    sum : function(property, start, end){
        var rs = this.data.items, v = 0;
        start = start || 0;
        end = (end || end === 0) ? end : rs.length-1;

        for(var i = start; i <= end; i++){
            v += (rs[i].data[property] || 0);
        }
        return v;
    },

    /**
     * @private
     * Returns a filter function used to test a the given property's value. Defers most of the work to
     * Ext.util.MixedCollection's createValueMatcher function
     * @param {String} property The property to create the filter function for
     * @param {String/RegExp} value The string/regex to compare the property value to
     * @param {Boolean} anyMatch True if we don't care if the filter value is not the full value (defaults to false)
     * @param {Boolean} caseSensitive True to create a case-sensitive regex (defaults to false)
     * @param {Boolean} exactMatch True to force exact match (^ and $ characters added to the regex). Defaults to false. Ignored if anyMatch is true.
     */
    createFilterFn : function(property, value, anyMatch, caseSensitive, exactMatch){
        if(Ext.isEmpty(value, false)){
            return false;
        }
        value = this.data.createValueMatcher(value, anyMatch, caseSensitive, exactMatch);
        return function(r) {
            return value.test(r.data[property]);
        };
    },

/**
     * Given an array of filter functions (each with optional scope), constructs and returns a single function that returns
     * the result of all of the filters ANDed together
     * @param {Array} filters The array of filter objects (each object should contain an 'fn' and optional scope)
     * @return {Function} The multiple filter function
     */
    createMultipleFilterFn: function(filters) {
        return function(record) {
            var isMatch = true;

            for (var i=0, j = filters.length; i < j; i++) {
                var filter = filters[i],
                    fn     = filter.fn,
                    scope  = filter.scope;

                isMatch = isMatch && fn.call(scope, record);
            }

            return isMatch;
        };
    },

/**
     * Filter the {@link Ext.data.Record records} by a specified property. Alternatively, pass an array of filter
     * options to filter by more than one property.
     * Single filter example:
     * store.filter('name', 'Ed', true, true); //finds all records containing the substring 'Ed'
     * Multiple filter example:
     * store.filter([
     *   {
     *     property     : 'name',
     *     value        : 'Ed',
     *     anyMatch     : true, //optional, defaults to true
     *     caseSensitive: true  //optional, defaults to true
     *   },
     *
     *   //filter functions can also be passed
     *   {
     *     fn   : function(record) {
     *       return record.get('age') == 24
     *     },
     *     scope: this
     *   }
     * ]);
     * @param {String|Array} field A field on your records, or an array containing multiple filter options
     * @param {String/RegExp} value Either a string that the field should begin with, or a RegExp to test
     * against the field.
     * @param {Boolean} anyMatch (optional) true to match any part not just the beginning
     * @param {Boolean} caseSensitive (optional) true for case sensitive comparison
     * @param {Boolean} exactMatch True to force exact match (^ and $ characters added to the regex). Defaults to false. Ignored if anyMatch is true.
     */
    filter : function(property, value, anyMatch, caseSensitive, exactMatch){
        //we can accept an array of filter objects, or a single filter object - normalize them here
        if (Ext.isObject(property)) {
            property = [property];
        }

        if (Ext.isArray(property)) {
            var filters = [];

            //normalize the filters passed into an array of filter functions
            for (var i=0, j = property.length; i < j; i++) {
                var filter = property[i],
                    func   = filter.fn,
                    scope  = filter.scope || this;

                //if we weren't given a filter function, construct one now
                if (!Ext.isFunction(func)) {
                    func = this.createFilterFn(filter.property, filter.value, filter.anyMatch, filter.caseSensitive, filter.exactMatch);
                }

                filters.push({fn: func, scope: scope});
            }

            var fn = this.createMultipleFilterFn(filters);
        } else {
            //classic single property filter
            var fn = this.createFilterFn(property, value, anyMatch, caseSensitive, exactMatch);
        }

        return fn ? this.filterBy(fn) : this.clearFilter();
    },

/**
     * Filter by a function. The specified function will be called for each
     * Record in this Store. If the function returns true the Record is included,
     * otherwise it is filtered out.
     * @param {Function} fn The function to be called. It will be passed the following parameters:

     *
  • record : Ext.data.Record
    The {@link Ext.data.Record record}
     * to test for filtering. Access field values using {@link Ext.data.Record#get}.
    •
     *
  • id : Object
    The ID of the Record passed.
    •
     *

     * @param {Object} scope (optional) The scope (this reference) in which the function is executed. Defaults to this Store.
     */
    filterBy : function(fn, scope){
        this.snapshot = this.snapshot || this.data;
        this.data = this.queryBy(fn, scope||this);
        this.fireEvent('datachanged', this);
    },

/**
     * Revert to a view of the Record cache with no filtering applied.
     * @param {Boolean} suppressEvent If true the filter is cleared silently without firing the
     * {@link #datachanged} event.
     */
    clearFilter : function(suppressEvent){
        if(this.isFiltered()){
            this.data = this.snapshot;
            delete this.snapshot;
            if(suppressEvent !== true){
                this.fireEvent('datachanged', this);
            }
        }
    },

/**
     * Returns true if this store is currently filtered
     * @return {Boolean}
     */
    isFiltered : function(){
        return !!this.snapshot && this.snapshot != this.data;
    },

/**
     * Query the records by a specified property.
     * @param {String} field A field on your records
     * @param {String/RegExp} value Either a string that the field
     * should begin with, or a RegExp to test against the field.
     * @param {Boolean} anyMatch (optional) True to match any part not just the beginning
     * @param {Boolean} caseSensitive (optional) True for case sensitive comparison
     * @return {MixedCollection} Returns an Ext.util.MixedCollection of the matched records
     */
    query : function(property, value, anyMatch, caseSensitive){
        var fn = this.createFilterFn(property, value, anyMatch, caseSensitive);
        return fn ? this.queryBy(fn) : this.data.clone();
    },

/**
     * Query the cached records in this Store using a filtering function. The specified function
     * will be called with each record in this Store. If the function returns true the record is
     * included in the results.
     * @param {Function} fn The function to be called. It will be passed the following parameters:

     *
  • record : Ext.data.Record
    The {@link Ext.data.Record record}
     * to test for filtering. Access field values using {@link Ext.data.Record#get}.
    •
     *
  • id : Object
    The ID of the Record passed.
    •
     *

     * @param {Object} scope (optional) The scope (this reference) in which the function is executed. Defaults to this Store.
     * @return {MixedCollection} Returns an Ext.util.MixedCollection of the matched records
     **/
    queryBy : function(fn, scope){
        var data = this.snapshot || this.data;
        return data.filterBy(fn, scope||this);
    },

/**
     * Finds the index of the first matching Record in this store by a specific field value.
     * @param {String} fieldName The name of the Record field to test.
     * @param {String/RegExp} value Either a string that the field value
     * should begin with, or a RegExp to test against the field.
     * @param {Number} startIndex (optional) The index to start searching at
     * @param {Boolean} anyMatch (optional) True to match any part of the string, not just the beginning
     * @param {Boolean} caseSensitive (optional) True for case sensitive comparison
     * @return {Number} The matched index or -1
     */
    find : function(property, value, start, anyMatch, caseSensitive){
        var fn = this.createFilterFn(property, value, anyMatch, caseSensitive);
        return fn ? this.data.findIndexBy(fn, null, start) : -1;
    },

/**
     * Finds the index of the first matching Record in this store by a specific field value.
     * @param {String} fieldName The name of the Record field to test.
     * @param {Mixed} value The value to match the field against.
     * @param {Number} startIndex (optional) The index to start searching at
     * @return {Number} The matched index or -1
     */
    findExact: function(property, value, start){
        return this.data.findIndexBy(function(rec){
            return rec.get(property) === value;
        }, this, start);
    },

/**
     * Find the index of the first matching Record in this Store by a function.
     * If the function returns true it is considered a match.
     * @param {Function} fn The function to be called. It will be passed the following parameters:

     *
  • record : Ext.data.Record
    The {@link Ext.data.Record record}
     * to test for filtering. Access field values using {@link Ext.data.Record#get}.
    •
     *
  • id : Object
    The ID of the Record passed.
    •
     *

     * @param {Object} scope (optional) The scope (this reference) in which the function is executed. Defaults to this Store.
     * @param {Number} startIndex (optional) The index to start searching at
     * @return {Number} The matched index or -1
     */
    findBy : function(fn, scope, start){
        return this.data.findIndexBy(fn, scope, start);
    },

/**
     * Collects unique values for a particular dataIndex from this store.
     * @param {String} dataIndex The property to collect
     * @param {Boolean} allowNull (optional) Pass true to allow null, undefined or empty string values
     * @param {Boolean} bypassFilter (optional) Pass true to collect from all records, even ones which are filtered
     * @return {Array} An array of the unique values
     **/
    collect : function(dataIndex, allowNull, bypassFilter){
        var d = (bypassFilter === true && this.snapshot) ?
                this.snapshot.items : this.data.items;
        var v, sv, r = [], l = {};
        for(var i = 0, len = d.length; i < len; i++){
            v = d[i].data[dataIndex];
            sv = String(v);
            if((allowNull || !Ext.isEmpty(v)) && !l[sv]){
                l[sv] = true;
                r[r.length] = v;
            }
        }
        return r;
    },

    // private
    afterEdit : function(record){
        if(this.modified.indexOf(record) == -1){
            this.modified.push(record);
        }
        this.fireEvent('update', this, record, Ext.data.Record.EDIT);
    },

    // private
    afterReject : function(record){
        this.modified.remove(record);
        this.fireEvent('update', this, record, Ext.data.Record.REJECT);
    },

    // private
    afterCommit : function(record){
        this.modified.remove(record);
        this.fireEvent('update', this, record, Ext.data.Record.COMMIT);
    },

/**
     * Commit all Records with {@link #getModifiedRecords outstanding changes}. To handle updates for changes,
     * subscribe to the Store's {@link #update update event}, and perform updating when the third parameter is
     * Ext.data.Record.COMMIT.
     */
    commitChanges : function(){
        var m = this.modified.slice(0);
        this.modified = [];
        for(var i = 0, len = m.length; i < len; i++){
            m[i].commit();
        }
    },

/**
     * {@link Ext.data.Record#reject Reject} outstanding changes on all {@link #getModifiedRecords modified records}.
     */
    rejectChanges : function(){
        var m = this.modified.slice(0);
        this.modified = [];
        for(var i = 0, len = m.length; i < len; i++){
            m[i].reject();
        }
        var m = this.removed.slice(0).reverse();
        this.removed = [];
        for(var i = 0, len = m.length; i < len; i++){
            this.insert(m[i].lastIndex||0, m[i]);
            m[i].reject();
        }
    },

    // private
    onMetaChange : function(meta){
        this.recordType = this.reader.recordType;
        this.fields = this.recordType.prototype.fields;
        delete this.snapshot;
        if(this.reader.meta.sortInfo){
            this.sortInfo = this.reader.meta.sortInfo;
        }else if(this.sortInfo  && !this.fields.get(this.sortInfo.field)){
            delete this.sortInfo;
        }
        if(this.writer){
            this.writer.meta = this.reader.meta;
        }
        this.modified = [];
        this.fireEvent('metachange', this, this.reader.meta);
    },

    // private
    findInsertIndex : function(record){
        this.suspendEvents();
        var data = this.data.clone();
        this.data.add(record);
        this.applySort();
        var index = this.data.indexOf(record);
        this.data = data;
        this.resumeEvents();
        return index;
    },

/**
     * Set the value for a property name in this store's {@link #baseParams}.  Usage:

myStore.setBaseParam('foo', {bar:3});

     * @param {String} name Name of the property to assign
     * @param {Mixed} value Value to assign the named property
     **/
    setBaseParam : function (name, value){
        this.baseParams = this.baseParams || {};
        this.baseParams[name] = value;
    }
});

Ext.reg('store', Ext.data.Store);

/**
 * @class Ext.data.Store.Error
 * @extends Ext.Error
 * Store Error extension.
 * @param {String} name
 */
Ext.data.Store.Error = Ext.extend(Ext.Error, {
    name: 'Ext.data.Store'
});
Ext.apply(Ext.data.Store.Error.prototype, {
    lang: {
        'writer-undefined' : 'Attempted to execute a write-action without a DataWriter installed.'
    }
});


The source code

/*!
 * licensing@extjs.com
 * http://www.extjs.com/license
 */

/**
 * @class Ext.StoreMgr
 * @extends Ext.util.MixedCollection
 * The default global group of stores.
 * @singleton
 */
Ext.StoreMgr = Ext.apply(new Ext.util.MixedCollection(), {

/**
     * @cfg {Object} listeners @hide
     */

/**
     * Registers one or more Stores with the StoreMgr. You do not normally need to register stores
     * manually.  Any store initialized with a {@link Ext.data.Store#storeId} will be auto-registered.
     * @param {Ext.data.Store} store1 A Store instance
     * @param {Ext.data.Store} store2 (optional)
     * @param {Ext.data.Store} etc... (optional)
     */
    register : function(){
        for(var i = 0, s; (s = arguments[i]); i++){
            this.add(s);
        }
    },

/**
     * Unregisters one or more Stores with the StoreMgr
     * @param {String/Object} id1 The id of the Store, or a Store instance
     * @param {String/Object} id2 (optional)
     * @param {String/Object} etc... (optional)
     */
    unregister : function(){
        for(var i = 0, s; (s = arguments[i]); i++){
            this.remove(this.lookup(s));
        }
    },

/**
     * Gets a registered Store by id
     * @param {String/Object} id The id of the Store, or a Store instance
     * @return {Ext.data.Store}
     */
    lookup : function(id){
        if(Ext.isArray(id)){
            var fields = ['field1'], expand = !Ext.isArray(id[0]);
            if(!expand){
                for(var i = 2, len = id[0].length; i <= len; ++i){
                    fields.push('field' + i);
                }
            }
            return new Ext.data.ArrayStore({
                fields: fields,
                data: id,
                expandData: expand,
                autoDestroy: true,
                autoCreated: true

            });
        }
        return Ext.isObject(id) ? (id.events ? id : Ext.create(id, 'store')) : this.get(id);
    },

    // getKey implementation for MixedCollection
    getKey : function(o){
         return o.storeId;
    }
});


The source code

/*!
 * licensing@extjs.com
 * http://www.extjs.com/license
 */
/*! SWFObject v2.2
    is released under the MIT License
*/

var swfobject = function() {

    var UNDEF = "undefined",
        OBJECT = "object",
        SHOCKWAVE_FLASH = "Shockwave Flash",
        SHOCKWAVE_FLASH_AX = "ShockwaveFlash.ShockwaveFlash",
        FLASH_MIME_TYPE = "application/x-shockwave-flash",
        EXPRESS_INSTALL_ID = "SWFObjectExprInst",
        ON_READY_STATE_CHANGE = "onreadystatechange",

        win = window,
        doc = document,
        nav = navigator,

        plugin = false,
        domLoadFnArr = [main],
        regObjArr = [],
        objIdArr = [],
        listenersArr = [],
        storedAltContent,
        storedAltContentId,
        storedCallbackFn,
        storedCallbackObj,
        isDomLoaded = false,
        isExpressInstallActive = false,
        dynamicStylesheet,
        dynamicStylesheetMedia,
        autoHideShow = true,

    /* Centralized function for browser feature detection
        - User agent string detection is only used when no good alternative is possible
        - Is executed directly for optimal performance
    */
    ua = function() {
        var w3cdom = typeof doc.getElementById != UNDEF && typeof doc.getElementsByTagName != UNDEF && typeof doc.createElement != UNDEF,
            u = nav.userAgent.toLowerCase(),
            p = nav.platform.toLowerCase(),
            windows = p ? /win/.test(p) : /win/.test(u),
            mac = p ? /mac/.test(p) : /mac/.test(u),
            webkit = /webkit/.test(u) ? parseFloat(u.replace(/^.*webkit\/(\d+(\.\d+)?).*$/, "$1")) : false, // returns either the webkit version or false if not webkit
            ie = !+"\v1", // feature detection based on Andrea Giammarchi's solution: http://webreflection.blogspot.com/2009/01/32-bytes-to-know-if-your-browser-is-ie.html
            playerVersion = [0,0,0],
            d = null;
        if (typeof nav.plugins != UNDEF && typeof nav.plugins[SHOCKWAVE_FLASH] == OBJECT) {
            d = nav.plugins[SHOCKWAVE_FLASH].description;
            if (d && !(typeof nav.mimeTypes != UNDEF && nav.mimeTypes[FLASH_MIME_TYPE] && !nav.mimeTypes[FLASH_MIME_TYPE].enabledPlugin)) { // navigator.mimeTypes["application/x-shockwave-flash"].enabledPlugin indicates whether plug-ins are enabled or disabled in Safari 3+
                plugin = true;
                ie = false; // cascaded feature detection for Internet Explorer
                d = d.replace(/^.*\s+(\S+\s+\S+$)/, "$1");
                playerVersion[0] = parseInt(d.replace(/^(.*)\..*$/, "$1"), 10);
                playerVersion[1] = parseInt(d.replace(/^.*\.(.*)\s.*$/, "$1"), 10);
                playerVersion[2] = /[a-zA-Z]/.test(d) ? parseInt(d.replace(/^.*[a-zA-Z]+(.*)$/, "$1"), 10) : 0;
            }
        }
        else if (typeof win.ActiveXObject != UNDEF) {
            try {
                var a = new ActiveXObject(SHOCKWAVE_FLASH_AX);
                if (a) { // a will return null when ActiveX is disabled
                    d = a.GetVariable("$version");
                    if (d) {
                        ie = true; // cascaded feature detection for Internet Explorer
                        d = d.split(" ")[1].split(",");
                        playerVersion = [parseInt(d[0], 10), parseInt(d[1], 10), parseInt(d[2], 10)];
                    }
                }
            }
            catch(e) {}
        }
        return { w3:w3cdom, pv:playerVersion, wk:webkit, ie:ie, win:windows, mac:mac };
    }(),

    /* Cross-browser onDomLoad
        - Will fire an event as soon as the DOM of a web page is loaded
        - Internet Explorer workaround based on Diego Perini's solution: http://javascript.nwbox.com/IEContentLoaded/
        - Regular onload serves as fallback
    */
    onDomLoad = function() {
        if (!ua.w3) { return; }
        if ((typeof doc.readyState != UNDEF && doc.readyState == "complete") || (typeof doc.readyState == UNDEF && (doc.getElementsByTagName("body")[0] || doc.body))) { // function is fired after onload, e.g. when script is inserted dynamically
            callDomLoadFunctions();
        }
        if (!isDomLoaded) {
            if (typeof doc.addEventListener != UNDEF) {
                doc.addEventListener("DOMContentLoaded", callDomLoadFunctions, false);
            }
            if (ua.ie && ua.win) {
                doc.attachEvent(ON_READY_STATE_CHANGE, function() {
                    if (doc.readyState == "complete") {
                        doc.detachEvent(ON_READY_STATE_CHANGE, arguments.callee);
                        callDomLoadFunctions();
                    }
                });
                if (win == top) { // if not inside an iframe
                    (function(){
                        if (isDomLoaded) { return; }
                        try {
                            doc.documentElement.doScroll("left");
                        }
                        catch(e) {
                            setTimeout(arguments.callee, 0);
                            return;
                        }
                        callDomLoadFunctions();
                    })();
                }
            }
            if (ua.wk) {
                (function(){
                    if (isDomLoaded) { return; }
                    if (!/loaded|complete/.test(doc.readyState)) {
                        setTimeout(arguments.callee, 0);
                        return;
                    }
                    callDomLoadFunctions();
                })();
            }
            addLoadEvent(callDomLoadFunctions);
        }
    }();

    function callDomLoadFunctions() {
        if (isDomLoaded) { return; }
        try { // test if we can really add/remove elements to/from the DOM; we don't want to fire it too early
            var t = doc.getElementsByTagName("body")[0].appendChild(createElement("span"));
            t.parentNode.removeChild(t);
        }
        catch (e) { return; }
        isDomLoaded = true;
        var dl = domLoadFnArr.length;
        for (var i = 0; i < dl; i++) {
            domLoadFnArr[i]();
        }
    }

    function addDomLoadEvent(fn) {
        if (isDomLoaded) {
            fn();
        }
        else {
            domLoadFnArr[domLoadFnArr.length] = fn; // Array.push() is only available in IE5.5+
        }
    }

    /* Cross-browser onload
        - Based on James Edwards' solution: http://brothercake.com/site/resources/scripts/onload/
        - Will fire an event as soon as a web page including all of its assets are loaded
     */
    function addLoadEvent(fn) {
        if (typeof win.addEventListener != UNDEF) {
            win.addEventListener("load", fn, false);
        }
        else if (typeof doc.addEventListener != UNDEF) {
            doc.addEventListener("load", fn, false);
        }
        else if (typeof win.attachEvent != UNDEF) {
            addListener(win, "onload", fn);
        }
        else if (typeof win.onload == "function") {
            var fnOld = win.onload;
            win.onload = function() {
                fnOld();
                fn();
            };
        }
        else {
            win.onload = fn;
        }
    }

    /* Main function
        - Will preferably execute onDomLoad, otherwise onload (as a fallback)
    */
    function main() {
        if (plugin) {
            testPlayerVersion();
        }
        else {
            matchVersions();
        }
    }

    /* Detect the Flash Player version for non-Internet Explorer browsers
        - Detecting the plug-in version via the object element is more precise than using the plugins collection item's description:
          a. Both release and build numbers can be detected
          b. Avoid wrong descriptions by corrupt installers provided by Adobe
          c. Avoid wrong descriptions by multiple Flash Player entries in the plugin Array, caused by incorrect browser imports
        - Disadvantage of this method is that it depends on the availability of the DOM, while the plugins collection is immediately available
    */
    function testPlayerVersion() {
        var b = doc.getElementsByTagName("body")[0];
        var o = createElement(OBJECT);
        o.setAttribute("type", FLASH_MIME_TYPE);
        var t = b.appendChild(o);
        if (t) {
            var counter = 0;
            (function(){
                if (typeof t.GetVariable != UNDEF) {
                    var d = t.GetVariable("$version");
                    if (d) {
                        d = d.split(" ")[1].split(",");
                        ua.pv = [parseInt(d[0], 10), parseInt(d[1], 10), parseInt(d[2], 10)];
                    }
                }
                else if (counter < 10) {
                    counter++;
                    setTimeout(arguments.callee, 10);
                    return;
                }
                b.removeChild(o);
                t = null;
                matchVersions();
            })();
        }
        else {
            matchVersions();
        }
    }

    /* Perform Flash Player and SWF version matching; static publishing only
    */
    function matchVersions() {
        var rl = regObjArr.length;
        if (rl > 0) {
            for (var i = 0; i < rl; i++) { // for each registered object element
                var id = regObjArr[i].id;
                var cb = regObjArr[i].callbackFn;
                var cbObj = {success:false, id:id};
                if (ua.pv[0] > 0) {
                    var obj = getElementById(id);
                    if (obj) {
                        if (hasPlayerVersion(regObjArr[i].swfVersion) && !(ua.wk && ua.wk < 312)) { // Flash Player version >= published SWF version: Houston, we have a match!
                            setVisibility(id, true);
                            if (cb) {
                                cbObj.success = true;
                                cbObj.ref = getObjectById(id);
                                cb(cbObj);
                            }
                        }
                        else if (regObjArr[i].expressInstall && canExpressInstall()) { // show the Adobe Express Install dialog if set by the web page author and if supported
                            var att = {};
                            att.data = regObjArr[i].expressInstall;
                            att.width = obj.getAttribute("width") || "0";
                            att.height = obj.getAttribute("height") || "0";
                            if (obj.getAttribute("class")) { att.styleclass = obj.getAttribute("class"); }
                            if (obj.getAttribute("align")) { att.align = obj.getAttribute("align"); }
                            // parse HTML object param element's name-value pairs
                            var par = {};
                            var p = obj.getElementsByTagName("param");
                            var pl = p.length;
                            for (var j = 0; j < pl; j++) {
                                if (p[j].getAttribute("name").toLowerCase() != "movie") {
                                    par[p[j].getAttribute("name")] = p[j].getAttribute("value");
                                }
                            }
                            showExpressInstall(att, par, id, cb);
                        }
                        else { // Flash Player and SWF version mismatch or an older Webkit engine that ignores the HTML object element's nested param elements: display alternative content instead of SWF
                            displayAltContent(obj);
                            if (cb) { cb(cbObj); }
                        }
                    }
                }
                else {  // if no Flash Player is installed or the fp version cannot be detected we let the HTML object element do its job (either show a SWF or alternative content)
                    setVisibility(id, true);
                    if (cb) {
                        var o = getObjectById(id); // test whether there is an HTML object element or not
                        if (o && typeof o.SetVariable != UNDEF) {
                            cbObj.success = true;
                            cbObj.ref = o;
                        }
                        cb(cbObj);
                    }
                }
            }
        }
    }

    function getObjectById(objectIdStr) {
        var r = null;
        var o = getElementById(objectIdStr);
        if (o && o.nodeName == "OBJECT") {
            if (typeof o.SetVariable != UNDEF) {
                r = o;
            }
            else {
                var n = o.getElementsByTagName(OBJECT)[0];
                if (n) {
                    r = n;
                }
            }
        }
        return r;
    }

    /* Requirements for Adobe Express Install
        - only one instance can be active at a time
        - fp 6.0.65 or higher
        - Win/Mac OS only
        - no Webkit engines older than version 312
    */
    function canExpressInstall() {
        return !isExpressInstallActive && hasPlayerVersion("6.0.65") && (ua.win || ua.mac) && !(ua.wk && ua.wk < 312);
    }

    /* Show the Adobe Express Install dialog
        - Reference: http://www.adobe.com/cfusion/knowledgebase/index.cfm?id=6a253b75
    */
    function showExpressInstall(att, par, replaceElemIdStr, callbackFn) {
        isExpressInstallActive = true;
        storedCallbackFn = callbackFn || null;
        storedCallbackObj = {success:false, id:replaceElemIdStr};
        var obj = getElementById(replaceElemIdStr);
        if (obj) {
            if (obj.nodeName == "OBJECT") { // static publishing
                storedAltContent = abstractAltContent(obj);
                storedAltContentId = null;
            }
            else { // dynamic publishing
                storedAltContent = obj;
                storedAltContentId = replaceElemIdStr;
            }
            att.id = EXPRESS_INSTALL_ID;
            if (typeof att.width == UNDEF || (!/%$/.test(att.width) && parseInt(att.width, 10) < 310)) { att.width = "310"; }
            if (typeof att.height == UNDEF || (!/%$/.test(att.height) && parseInt(att.height, 10) < 137)) { att.height = "137"; }
            doc.title = doc.title.slice(0, 47) + " - Flash Player Installation";
            var pt = ua.ie && ua.win ? "ActiveX" : "PlugIn",
                fv = "MMredirectURL=" + win.location.toString().replace(/&/g,"%26") + "&MMplayerType=" + pt + "&MMdoctitle=" + doc.title;
            if (typeof par.flashvars != UNDEF) {
                par.flashvars += "&" + fv;
            }
            else {
                par.flashvars = fv;
            }
            // IE only: when a SWF is loading (AND: not available in cache) wait for the readyState of the object element to become 4 before removing it,
            // because you cannot properly cancel a loading SWF file without breaking browser load references, also obj.onreadystatechange doesn't work
            if (ua.ie && ua.win && obj.readyState != 4) {
                var newObj = createElement("div");
                replaceElemIdStr += "SWFObjectNew";
                newObj.setAttribute("id", replaceElemIdStr);
                obj.parentNode.insertBefore(newObj, obj); // insert placeholder div that will be replaced by the object element that loads expressinstall.swf
                obj.style.display = "none";
                (function(){
                    if (obj.readyState == 4) {
                        obj.parentNode.removeChild(obj);
                    }
                    else {
                        setTimeout(arguments.callee, 10);
                    }
                })();
            }
            createSWF(att, par, replaceElemIdStr);
        }
    }

    /* Functions to abstract and display alternative content
    */
    function displayAltContent(obj) {
        if (ua.ie && ua.win && obj.readyState != 4) {
            // IE only: when a SWF is loading (AND: not available in cache) wait for the readyState of the object element to become 4 before removing it,
            // because you cannot properly cancel a loading SWF file without breaking browser load references, also obj.onreadystatechange doesn't work
            var el = createElement("div");
            obj.parentNode.insertBefore(el, obj); // insert placeholder div that will be replaced by the alternative content
            el.parentNode.replaceChild(abstractAltContent(obj), el);
            obj.style.display = "none";
            (function(){
                if (obj.readyState == 4) {
                    obj.parentNode.removeChild(obj);
                }
                else {
                    setTimeout(arguments.callee, 10);
                }
            })();
        }
        else {
            obj.parentNode.replaceChild(abstractAltContent(obj), obj);
        }
    }

    function abstractAltContent(obj) {
        var ac = createElement("div");
        if (ua.win && ua.ie) {
            ac.innerHTML = obj.innerHTML;
        }
        else {
            var nestedObj = obj.getElementsByTagName(OBJECT)[0];
            if (nestedObj) {
                var c = nestedObj.childNodes;
                if (c) {
                    var cl = c.length;
                    for (var i = 0; i < cl; i++) {
                        if (!(c[i].nodeType == 1 && c[i].nodeName == "PARAM") && !(c[i].nodeType == 8)) {
                            ac.appendChild(c[i].cloneNode(true));
                        }
                    }
                }
            }
        }
        return ac;
    }

    /* Cross-browser dynamic SWF creation
    */
    function createSWF(attObj, parObj, id) {
        var r, el = getElementById(id);
        if (ua.wk && ua.wk < 312) { return r; }
        if (el) {
            if (typeof attObj.id == UNDEF) { // if no 'id' is defined for the object element, it will inherit the 'id' from the alternative content
                attObj.id = id;
            }
            if (ua.ie && ua.win) { // Internet Explorer + the HTML object element + W3C DOM methods do not combine: fall back to outerHTML
                var att = "";
                for (var i in attObj) {
                    if (attObj[i] != Object.prototype[i]) { // filter out prototype additions from other potential libraries
                        if (i.toLowerCase() == "data") {
                            parObj.movie = attObj[i];
                        }
                        else if (i.toLowerCase() == "styleclass") { // 'class' is an ECMA4 reserved keyword
                            att += ' class="' + attObj[i] + '"';
                        }
                        else if (i.toLowerCase() != "classid") {
                            att += ' ' + i + '="' + attObj[i] + '"';
                        }
                    }
                }
                var par = "";
                for (var j in parObj) {
                    if (parObj[j] != Object.prototype[j]) { // filter out prototype additions from other potential libraries
                        par += '';
                    }
                }
                el.outerHTML = ' ' + par + ' ';
                objIdArr[objIdArr.length] = attObj.id; // stored to fix object 'leaks' on unload (dynamic publishing only)
                r = getElementById(attObj.id);
            }
            else { // well-behaving browsers
                var o = createElement(OBJECT);
                o.setAttribute("type", FLASH_MIME_TYPE);
                for (var m in attObj) {
                    if (attObj[m] != Object.prototype[m]) { // filter out prototype additions from other potential libraries
                        if (m.toLowerCase() == "styleclass") { // 'class' is an ECMA4 reserved keyword
                            o.setAttribute("class", attObj[m]);
                        }
                        else if (m.toLowerCase() != "classid") { // filter out IE specific attribute
                            o.setAttribute(m, attObj[m]);
                        }
                    }
                }
                for (var n in parObj) {
                    if (parObj[n] != Object.prototype[n] && n.toLowerCase() != "movie") { // filter out prototype additions from other potential libraries and IE specific param element
                        createObjParam(o, n, parObj[n]);
                    }
                }
                el.parentNode.replaceChild(o, el);
                r = o;
            }
        }
        return r;
    }

    function createObjParam(el, pName, pValue) {
        var p = createElement("param");
        p.setAttribute("name", pName);
        p.setAttribute("value", pValue);
        el.appendChild(p);
    }

    /* Cross-browser SWF removal
        - Especially needed to safely and completely remove a SWF in Internet Explorer
    */
    function removeSWF(id) {
        var obj = getElementById(id);
        if (obj && obj.nodeName == "OBJECT") {
            if (ua.ie && ua.win) {
                obj.style.display = "none";
                (function(){
                    if (obj.readyState == 4) {
                        removeObjectInIE(id);
                    }
                    else {
                        setTimeout(arguments.callee, 10);
                    }
                })();
            }
            else {
                obj.parentNode.removeChild(obj);
            }
        }
    }

    function removeObjectInIE(id) {
        var obj = getElementById(id);
        if (obj) {
            for (var i in obj) {
                if (typeof obj[i] == "function") {
                    obj[i] = null;
                }
            }
            obj.parentNode.removeChild(obj);
        }
    }

    /* Functions to optimize JavaScript compression
    */
    function getElementById(id) {
        var el = null;
        try {
            el = doc.getElementById(id);
        }
        catch (e) {}
        return el;
    }

    function createElement(el) {
        return doc.createElement(el);
    }

    /* Updated attachEvent function for Internet Explorer
        - Stores attachEvent information in an Array, so on unload the detachEvent functions can be called to avoid memory leaks
    */
    function addListener(target, eventType, fn) {
        target.attachEvent(eventType, fn);
        listenersArr[listenersArr.length] = [target, eventType, fn];
    }

    /* Flash Player and SWF content version matching
    */
    function hasPlayerVersion(rv) {
        var pv = ua.pv, v = rv.split(".");
        v[0] = parseInt(v[0], 10);
        v[1] = parseInt(v[1], 10) || 0; // supports short notation, e.g. "9" instead of "9.0.0"
        v[2] = parseInt(v[2], 10) || 0;
        return (pv[0] > v[0] || (pv[0] == v[0] && pv[1] > v[1]) || (pv[0] == v[0] && pv[1] == v[1] && pv[2] >= v[2])) ? true : false;
    }

    /* Cross-browser dynamic CSS creation
        - Based on Bobby van der Sluis' solution: http://www.bobbyvandersluis.com/articles/dynamicCSS.php
    */
    function createCSS(sel, decl, media, newStyle) {
        if (ua.ie && ua.mac) { return; }
        var h = doc.getElementsByTagName("head")[0];
        if (!h) { return; } // to also support badly authored HTML pages that lack a head element
        var m = (media && typeof media == "string") ? media : "screen";
        if (newStyle) {
            dynamicStylesheet = null;
            dynamicStylesheetMedia = null;
        }
        if (!dynamicStylesheet || dynamicStylesheetMedia != m) {
            // create dynamic stylesheet + get a global reference to it
            var s = createElement("style");
            s.setAttribute("type", "text/css");
            s.setAttribute("media", m);
            dynamicStylesheet = h.appendChild(s);
            if (ua.ie && ua.win && typeof doc.styleSheets != UNDEF && doc.styleSheets.length > 0) {
                dynamicStylesheet = doc.styleSheets[doc.styleSheets.length - 1];
            }
            dynamicStylesheetMedia = m;
        }
        // add style rule
        if (ua.ie && ua.win) {
            if (dynamicStylesheet && typeof dynamicStylesheet.addRule == OBJECT) {
                dynamicStylesheet.addRule(sel, decl);
            }
        }
        else {
            if (dynamicStylesheet && typeof doc.createTextNode != UNDEF) {
                dynamicStylesheet.appendChild(doc.createTextNode(sel + " {" + decl + "}"));
            }
        }
    }

    function setVisibility(id, isVisible) {
        if (!autoHideShow) { return; }
        var v = isVisible ? "visible" : "hidden";
        if (isDomLoaded && getElementById(id)) {
            getElementById(id).style.visibility = v;
        }
        else {
            createCSS("#" + id, "visibility:" + v);
        }
    }

    /* Filter to avoid XSS attacks
    */
    function urlEncodeIfNecessary(s) {
        var regex = /[\\\"<>\.;]/;
        var hasBadChars = regex.exec(s) != null;
        return hasBadChars && typeof encodeURIComponent != UNDEF ? encodeURIComponent(s) : s;
    }

    /* Release memory to avoid memory leaks caused by closures, fix hanging audio/video threads and force open sockets/NetConnections to disconnect (Internet Explorer only)
    */
    var cleanup = function() {
        if (ua.ie && ua.win) {
            window.attachEvent("onunload", function() {
                // remove listeners to avoid memory leaks
                var ll = listenersArr.length;
                for (var i = 0; i < ll; i++) {
                    listenersArr[i][0].detachEvent(listenersArr[i][1], listenersArr[i][2]);
                }
                // cleanup dynamically embedded objects to fix audio/video threads and force open sockets and NetConnections to disconnect
                var il = objIdArr.length;
                for (var j = 0; j < il; j++) {
                    removeSWF(objIdArr[j]);
                }
                // cleanup library's main closures to avoid memory leaks
                for (var k in ua) {
                    ua[k] = null;
                }
                ua = null;
                for (var l in swfobject) {
                    swfobject[l] = null;
                }
                swfobject = null;
            });
        }
    }();

    return {
        /* Public API
            - Reference: http://code.google.com/p/swfobject/wiki/documentation
        */
        registerObject: function(objectIdStr, swfVersionStr, xiSwfUrlStr, callbackFn) {
            if (ua.w3 && objectIdStr && swfVersionStr) {
                var regObj = {};
                regObj.id = objectIdStr;
                regObj.swfVersion = swfVersionStr;
                regObj.expressInstall = xiSwfUrlStr;
                regObj.callbackFn = callbackFn;
                regObjArr[regObjArr.length] = regObj;
                setVisibility(objectIdStr, false);
            }
            else if (callbackFn) {
                callbackFn({success:false, id:objectIdStr});
            }
        },

        getObjectById: function(objectIdStr) {
            if (ua.w3) {
                return getObjectById(objectIdStr);
            }
        },

        embedSWF: function(swfUrlStr, replaceElemIdStr, widthStr, heightStr, swfVersionStr, xiSwfUrlStr, flashvarsObj, parObj, attObj, callbackFn) {
            var callbackObj = {success:false, id:replaceElemIdStr};
            if (ua.w3 && !(ua.wk && ua.wk < 312) && swfUrlStr && replaceElemIdStr && widthStr && heightStr && swfVersionStr) {
                setVisibility(replaceElemIdStr, false);
                addDomLoadEvent(function() {
                    widthStr += ""; // auto-convert to string
                    heightStr += "";
                    var att = {};
                    if (attObj && typeof attObj === OBJECT) {
                        for (var i in attObj) { // copy object to avoid the use of references, because web authors often reuse attObj for multiple SWFs
                            att[i] = attObj[i];
                        }
                    }
                    att.data = swfUrlStr;
                    att.width = widthStr;
                    att.height = heightStr;
                    var par = {};
                    if (parObj && typeof parObj === OBJECT) {
                        for (var j in parObj) { // copy object to avoid the use of references, because web authors often reuse parObj for multiple SWFs
                            par[j] = parObj[j];
                        }
                    }
                    if (flashvarsObj && typeof flashvarsObj === OBJECT) {
                        for (var k in flashvarsObj) { // copy object to avoid the use of references, because web authors often reuse flashvarsObj for multiple SWFs
                            if (typeof par.flashvars != UNDEF) {
                                par.flashvars += "&" + k + "=" + flashvarsObj[k];
                            }
                            else {
                                par.flashvars = k + "=" + flashvarsObj[k];
                            }
                        }
                    }
                    if (hasPlayerVersion(swfVersionStr)) { // create SWF
                        var obj = createSWF(att, par, replaceElemIdStr);
                        if (att.id == replaceElemIdStr) {
                            setVisibility(replaceElemIdStr, true);
                        }
                        callbackObj.success = true;
                        callbackObj.ref = obj;
                    }
                    else if (xiSwfUrlStr && canExpressInstall()) { // show Adobe Express Install
                        att.data = xiSwfUrlStr;
                        showExpressInstall(att, par, replaceElemIdStr, callbackFn);
                        return;
                    }
                    else { // show alternative content
                        setVisibility(replaceElemIdStr, true);
                    }
                    if (callbackFn) { callbackFn(callbackObj); }
                });
            }
            else if (callbackFn) { callbackFn(callbackObj); }
        },

        switchOffAutoHideShow: function() {
            autoHideShow = false;
        },

        ua: ua,

        getFlashPlayerVersion: function() {
            return { major:ua.pv[0], minor:ua.pv[1], release:ua.pv[2] };
        },

        hasFlashPlayerVersion: hasPlayerVersion,

        createSWF: function(attObj, parObj, replaceElemIdStr) {
            if (ua.w3) {
                return createSWF(attObj, parObj, replaceElemIdStr);
            }
            else {
                return undefined;
            }
        },

        showExpressInstall: function(att, par, replaceElemIdStr, callbackFn) {
            if (ua.w3 && canExpressInstall()) {
                showExpressInstall(att, par, replaceElemIdStr, callbackFn);
            }
        },

        removeSWF: function(objElemIdStr) {
            if (ua.w3) {
                removeSWF(objElemIdStr);
            }
        },

        createCSS: function(selStr, declStr, mediaStr, newStyleBoolean) {
            if (ua.w3) {
                createCSS(selStr, declStr, mediaStr, newStyleBoolean);
            }
        },

        addDomLoadEvent: addDomLoadEvent,

        addLoadEvent: addLoadEvent,

        getQueryParamValue: function(param) {
            var q = doc.location.search || doc.location.hash;
            if (q) {
                if (/\?/.test(q)) { q = q.split("?")[1]; } // strip question mark
                if (param == null) {
                    return urlEncodeIfNecessary(q);
                }
                var pairs = q.split("&");
                for (var i = 0; i < pairs.length; i++) {
                    if (pairs[i].substring(0, pairs[i].indexOf("=")) == param) {
                        return urlEncodeIfNecessary(pairs[i].substring((pairs[i].indexOf("=") + 1)));
                    }
                }
            }
            return "";
        },

        // For internal usage only
        expressInstallCallback: function() {
            if (isExpressInstallActive) {
                var obj = getElementById(EXPRESS_INSTALL_ID);
                if (obj && storedAltContent) {
                    obj.parentNode.replaceChild(storedAltContent, obj);
                    if (storedAltContentId) {
                        setVisibility(storedAltContentId, true);
                        if (ua.ie && ua.win) { storedAltContent.style.display = "block"; }
                    }
                    if (storedCallbackFn) { storedCallbackFn(storedCallbackObj); }
                }
                isExpressInstallActive = false;
            }
        }
    };
}();


The source code

/*!
 * licensing@extjs.com
 * http://www.extjs.com/license
 */

/**
 * @class Ext.layout.TableLayout
 * @extends Ext.layout.ContainerLayout
 *
This layout allows you to easily render content into an HTML table.  The total number of columns can be
 * specified, and rowspan and colspan can be used to create complex layouts within the table.
 * This class is intended to be extended or created via the layout:'table' {@link Ext.Container#layout} config,
 * and should generally not need to be created directly via the new keyword.

 *
Note that when creating a layout via config, the layout-specific config properties must be passed in via
 * the {@link Ext.Container#layoutConfig} object which will then be applied internally to the layout.  In the
 * case of TableLayout, the only valid layout config property is {@link #columns}.  However, the items added to a
 * TableLayout can supply the following table-specific config properties:

 *

 *
  • rowspan Applied to the table cell containing the item.
    •
 *
  • colspan Applied to the table cell containing the item.
    •
 *
  • cellId An id applied to the table cell containing the item.
    •
 *
  • cellCls A CSS class name added to the table cell containing the item.
    •
 *

 *
The basic concept of building up a TableLayout is conceptually very similar to building up a standard
 * HTML table.  You simply add each panel (or "cell") that you want to include along with any span attributes
 * specified as the special config properties of rowspan and colspan which work exactly like their HTML counterparts.
 * Rather than explicitly creating and nesting rows and columns as you would in HTML, you simply specify the
 * total column count in the layoutConfig and start adding panels in their natural order from left to right,
 * top to bottom.  The layout will automatically figure out, based on the column count, rowspans and colspans,
 * how to position each panel within the table.  Just like with HTML tables, your rowspans and colspans must add
 * up correctly in your overall layout or you'll end up with missing and/or extra cells!  Example usage:

 *

// This code will generate a layout table that is 3 columns by 2 rows
// with some spanning included.  The basic layout will be:
// +--------+-----------------+
// |   A    |   B             |
// |        |--------+--------|
// |        |   C    |   D    |
// +--------+--------+--------+
var table = new Ext.Panel({
    title: 'Table Layout',
    layout:'table',
    defaults: {
        // applied to each contained panel
        bodyStyle:'padding:20px'
    },
    layoutConfig: {
        // The total column count must be specified here
        columns: 3
    },
    items: [{
        html: '<p>Cell A content</p>',
        rowspan: 2
    },{
        html: '<p>Cell B content</p>',
        colspan: 2
    },{
        html: '<p>Cell C content</p>',
        cellCls: 'highlight'
    },{
        html: '<p>Cell D content</p>'
    }]
});

 */
Ext.layout.TableLayout = Ext.extend(Ext.layout.ContainerLayout, {

/**
     * @cfg {Number} columns
     * The total number of columns to create in the table for this layout.  If not specified, all Components added to
     * this layout will be rendered into a single row using one column per Component.
     */

    // private
    monitorResize:false,

    type: 'table',

    targetCls: 'x-table-layout-ct',

/**
     * @cfg {Object} tableAttrs
     *
An object containing properties which are added to the {@link Ext.DomHelper DomHelper} specification
     * used to create the layout's <table> element. Example:

{
    xtype: 'panel',
    layout: 'table',
    layoutConfig: {
        tableAttrs: {
            style: {
                width: '100%'
            }
        },
        columns: 3
    }
}

     */
    tableAttrs:null,

    // private
    setContainer : function(ct){
        Ext.layout.TableLayout.superclass.setContainer.call(this, ct);

        this.currentRow = 0;
        this.currentColumn = 0;
        this.cells = [];
    },

    // private
    onLayout : function(ct, target){
        var cs = ct.items.items, len = cs.length, c, i;

        if(!this.table){
            target.addClass('x-table-layout-ct');

            this.table = target.createChild(
                Ext.apply({tag:'table', cls:'x-table-layout', cellspacing: 0, cn: {tag: 'tbody'}}, this.tableAttrs), null, true);
        }
        this.renderAll(ct, target);
    },

    // private
    getRow : function(index){
        var row = this.table.tBodies[0].childNodes[index];
        if(!row){
            row = document.createElement('tr');
            this.table.tBodies[0].appendChild(row);
        }
        return row;
    },

    // private
    getNextCell : function(c){
        var cell = this.getNextNonSpan(this.currentColumn, this.currentRow);
        var curCol = this.currentColumn = cell[0], curRow = this.currentRow = cell[1];
        for(var rowIndex = curRow; rowIndex < curRow + (c.rowspan || 1); rowIndex++){
            if(!this.cells[rowIndex]){
                this.cells[rowIndex] = [];
            }
            for(var colIndex = curCol; colIndex < curCol + (c.colspan || 1); colIndex++){
                this.cells[rowIndex][colIndex] = true;
            }
        }
        var td = document.createElement('td');
        if(c.cellId){
            td.id = c.cellId;
        }
        var cls = 'x-table-layout-cell';
        if(c.cellCls){
            cls += ' ' + c.cellCls;
        }
        td.className = cls;
        if(c.colspan){
            td.colSpan = c.colspan;
        }
        if(c.rowspan){
            td.rowSpan = c.rowspan;
        }
        this.getRow(curRow).appendChild(td);
        return td;
    },

    // private
    getNextNonSpan: function(colIndex, rowIndex){
        var cols = this.columns;
        while((cols && colIndex >= cols) || (this.cells[rowIndex] && this.cells[rowIndex][colIndex])) {
            if(cols && colIndex >= cols){
                rowIndex++;
                colIndex = 0;
            }else{
                colIndex++;
            }
        }
        return [colIndex, rowIndex];
    },

    // private
    renderItem : function(c, position, target){
        // Ensure we have our inner table to get cells to render into.
        if(!this.table){
            this.table = target.createChild(
                Ext.apply({tag:'table', cls:'x-table-layout', cellspacing: 0, cn: {tag: 'tbody'}}, this.tableAttrs), null, true);
        }
        if(c && !c.rendered){
            c.render(this.getNextCell(c));
            this.configureItem(c, position);
        }else if(c && !this.isValidParent(c, target)){
            var container = this.getNextCell(c);
            container.insertBefore(c.getPositionEl().dom, null);
            c.container = Ext.get(container);
            this.configureItem(c, position);
        }
    },

    // private
    isValidParent : function(c, target){
        return c.getPositionEl().up('table', 5).dom.parentNode === (target.dom || target);
    }

/**
     * @property activeItem
     * @hide
     */
});

Ext.Container.LAYOUTS['table'] = Ext.layout.TableLayout;


The source code

/*!
 * licensing@extjs.com
 * http://www.extjs.com/license
 */

/**
 * @class Ext.TabPanel
 *
A basic tab container. TabPanels can be used exactly like a standard {@link Ext.Panel}
 * for layout purposes, but also have special support for containing child Components
 * ({@link Ext.Container#items items}) that are managed using a
 * {@link Ext.layout.CardLayout CardLayout layout manager}, and displayed as separate tabs.

 *
 * Note: By default, a tab's close tool destroys the child tab Component
 * and all its descendants. This makes the child tab Component, and all its descendants unusable. To enable
 * re-use of a tab, configure the TabPanel with {@link #autoDestroy autoDestroy: false}.
 *
 *
TabPanel header/footer elements

 *
TabPanels use their {@link Ext.Panel#header header} or {@link Ext.Panel#footer footer} element
 * (depending on the {@link #tabPosition} configuration) to accommodate the tab selector buttons.
 * This means that a TabPanel will not display any configured title, and will not display any
 * configured header {@link Ext.Panel#tools tools}.

 *
To display a header, embed the TabPanel in a {@link Ext.Panel Panel} which uses
 * {@link Ext.Container#layout layout:'fit'}.

 *
 *
Tab Events

 *
There is no actual tab class — each tab is simply a {@link Ext.BoxComponent Component}
 * such as a {@link Ext.Panel Panel}. However, when rendered in a TabPanel, each child Component
 * can fire additional events that only exist for tabs and are not available from other Components.
 * These events are:

 *

 *
  • {@link Ext.Panel#activate activate} : Fires when this Component becomes
 * the active tab.
    •
 *
  • {@link Ext.Panel#deactivate deactivate} : Fires when the Component that
 * was the active tab becomes deactivated.
    •
 *
  • {@link Ext.Panel#beforeclose beforeclose} : Fires when the user clicks on the close tool of a closeable tab.
 * May be vetoed by returning false from a handler.
    •
 *
  • {@link Ext.Panel#close close} : Fires a closeable tab has been closed by the user.
    •
 *

 *
Creating TabPanels from Code

 *
TabPanels can be created and rendered completely in code, as in this example:

 *

var tabs = new Ext.TabPanel({
    renderTo: Ext.getBody(),
    activeTab: 0,
    items: [{
        title: 'Tab 1',
        html: 'A simple tab'
    },{
        title: 'Tab 2',
        html: 'Another one'
    }]
});

 *
Creating TabPanels from Existing Markup

 *
TabPanels can also be rendered from pre-existing markup in a couple of ways.

 *

 *
 *
  • Pre-Structured Markup
    •
 *

 *
    A container div with one or more nested tab divs with class 'x-tab' can be rendered entirely
 * from existing markup (See the {@link #autoTabs} example).

 *

 *
 *
  • Un-Structured Markup
    •
 *

 *
    A TabPanel can also be rendered from markup that is not strictly structured by simply specifying by id
 * which elements should be the container and the tabs. Using this method tab content can be pulled from different
 * elements within the page by id regardless of page structure. For example:

 *

var tabs = new Ext.TabPanel({
    renderTo: 'my-tabs',
    activeTab: 0,
    items:[
        {contentEl:'tab1', title:'Tab 1'},
        {contentEl:'tab2', title:'Tab 2'}
    ]
});

// Note that the tabs do not have to be nested within the container (although they can be)
<div id="my-tabs"></div>
<div id="tab1" class="x-hide-display">A simple tab</div>
<div id="tab2" class="x-hide-display">Another one</div>

 * Note that the tab divs in this example contain the class 'x-hide-display' so that they can be rendered
 * deferred without displaying outside the tabs. You could alternately set {@link #deferredRender} = false
 * to render all content tabs on page load.
 *

 *
 *

 *
 * @extends Ext.Panel
 * @constructor
 * @param {Object} config The configuration options
 * @xtype tabpanel
 */
Ext.TabPanel = Ext.extend(Ext.Panel,  {

/**
     * @cfg {Boolean} layoutOnTabChange
     * Set to true to force a layout of the active tab when the tab is changed. Defaults to false.
     * See {@link Ext.layout.CardLayout}.{@link Ext.layout.CardLayout#layoutOnCardChange layoutOnCardChange}.
     */

/**
     * @cfg {String} tabCls This config option is used on child Components of ths TabPanel. A CSS
     * class name applied to the tab strip item representing the child Component, allowing special
     * styling to be applied.
     */

/**
     * @cfg {Boolean} deferredRender
     *
true by default to defer the rendering of child {@link Ext.Container#items items}
     * to the browsers DOM until a tab is activated. false will render all contained
     * {@link Ext.Container#items items} as soon as the {@link Ext.layout.CardLayout layout}
     * is rendered. If there is a significant amount of content or a lot of heavy controls being
     * rendered into panels that are not displayed by default, setting this to true might
     * improve performance.

     *
The deferredRender property is internally passed to the layout manager for
     * TabPanels ({@link Ext.layout.CardLayout}) as its {@link Ext.layout.CardLayout#deferredRender}
     * configuration value.

     *
Note: leaving deferredRender as true means that the content
     * within an unactivated tab will not be available. For example, this means that if the TabPanel
     * is within a {@link Ext.form.FormPanel form}, then until a tab is activated, any Fields within
     * unactivated tabs will not be rendered, and will therefore not be submitted and will not be
     * available to either {@link Ext.form.BasicForm#getValues getValues} or
     * {@link Ext.form.BasicForm#setValues setValues}.

     */
    deferredRender : true,

/**
     * @cfg {Number} tabWidth The initial width in pixels of each new tab (defaults to 120).
     */
    tabWidth : 120,

/**
     * @cfg {Number} minTabWidth The minimum width in pixels for each tab when {@link #resizeTabs} = true (defaults to 30).
     */
    minTabWidth : 30,

/**
     * @cfg {Boolean} resizeTabs True to automatically resize each tab so that the tabs will completely fill the
     * tab strip (defaults to false).  Setting this to true may cause specific widths that might be set per tab to
     * be overridden in order to fit them all into view (although {@link #minTabWidth} will always be honored).
     */
    resizeTabs : false,

/**
     * @cfg {Boolean} enableTabScroll True to enable scrolling to tabs that may be invisible due to overflowing the
     * overall TabPanel width. Only available with tabPosition:'top' (defaults to false).
     */
    enableTabScroll : false,

/**
     * @cfg {Number} scrollIncrement The number of pixels to scroll each time a tab scroll button is pressed
     * (defaults to 100, or if {@link #resizeTabs} = true, the calculated tab width).  Only
     * applies when {@link #enableTabScroll} = true.
     */
    scrollIncrement : 0,

/**
     * @cfg {Number} scrollRepeatInterval Number of milliseconds between each scroll while a tab scroll button is
     * continuously pressed (defaults to 400).
     */
    scrollRepeatInterval : 400,

/**
     * @cfg {Float} scrollDuration The number of milliseconds that each scroll animation should last (defaults
     * to .35). Only applies when {@link #animScroll} = true.
     */
    scrollDuration : 0.35,

/**
     * @cfg {Boolean} animScroll True to animate tab scrolling so that hidden tabs slide smoothly into view (defaults
     * to true).  Only applies when {@link #enableTabScroll} = true.
     */
    animScroll : true,

/**
     * @cfg {String} tabPosition The position where the tab strip should be rendered (defaults to 'top').
     * The only other supported value is 'bottom'.  Note: tab scrolling is only supported for
     * tabPosition: 'top'.
     */
    tabPosition : 'top',

/**
     * @cfg {String} baseCls The base CSS class applied to the panel (defaults to 'x-tab-panel').
     */
    baseCls : 'x-tab-panel',

/**
     * @cfg {Boolean} autoTabs
     *
true to query the DOM for any divs with a class of 'x-tab' to be automatically converted
     * to tabs and added to this panel (defaults to false).  Note that the query will be executed within
     * the scope of the container element only (so that multiple tab panels from markup can be supported via this
     * method).

     *
This method is only possible when the markup is structured correctly as a container with nested divs
     * containing the class 'x-tab'. To create TabPanels without these limitations, or to pull tab content
     * from other elements on the page, see the example at the top of the class for generating tabs from markup.

     *
There are a couple of things to note when using this method:

     *
  • When using the autoTabs config (as opposed to passing individual tab configs in the TabPanel's
     * {@link #items} collection), you must use {@link #applyTo} to correctly use the specified id
     * as the tab container. The autoTabs method replaces existing content with the TabPanel
     * components.
    •
     *
  • Make sure that you set {@link #deferredRender}: false so that the content elements for each
     * tab will be rendered into the TabPanel immediately upon page load, otherwise they will not be transformed
     * until each tab is activated and will be visible outside the TabPanel.
    •
     *
Example usage:

     *

var tabs = new Ext.TabPanel({
    applyTo: 'my-tabs',
    activeTab: 0,
    deferredRender: false,
    autoTabs: true
});

// This markup will be converted to a TabPanel from the code above
<div id="my-tabs">
    <div class="x-tab" title="Tab 1">A simple tab</div>
    <div class="x-tab" title="Tab 2">Another one</div>
</div>

     */
    autoTabs : false,

/**
     * @cfg {String} autoTabSelector The CSS selector used to search for tabs in existing markup when
     * {@link #autoTabs} = true (defaults to 'div.x-tab').  This can be any valid selector
     * supported by {@link Ext.DomQuery#select}. Note that the query will be executed within the scope of this
     * tab panel only (so that multiple tab panels from markup can be supported on a page).
     */
    autoTabSelector : 'div.x-tab',

/**
     * @cfg {String/Number} activeTab A string id or the numeric index of the tab that should be initially
     * activated on render (defaults to undefined).
     */
    activeTab : undefined,

/**
     * @cfg {Number} tabMargin The number of pixels of space to calculate into the sizing and scrolling of
     * tabs. If you change the margin in CSS, you will need to update this value so calculations are correct
     * with either {@link #resizeTabs} or scrolling tabs. (defaults to 2)
     */
    tabMargin : 2,

/**
     * @cfg {Boolean} plain true to render the tab strip without a background container image
     * (defaults to false).
     */
    plain : false,

/**
     * @cfg {Number} wheelIncrement For scrolling tabs, the number of pixels to increment on mouse wheel
     * scrolling (defaults to 20).
     */
    wheelIncrement : 20,

    /*
     * This is a protected property used when concatenating tab ids to the TabPanel id for internal uniqueness.
     * It does not generally need to be changed, but can be if external code also uses an id scheme that can
     * potentially clash with this one.
     */
    idDelimiter : '__',

    // private
    itemCls : 'x-tab-item',

    // private config overrides
    elements : 'body',
    headerAsText : false,
    frame : false,
    hideBorders :true,

    // private
    initComponent : function(){
        this.frame = false;
        Ext.TabPanel.superclass.initComponent.call(this);
        this.addEvents(

/**
             * @event beforetabchange
             * Fires before the active tab changes. Handlers can return false to cancel the tab change.
             * @param {TabPanel} this
             * @param {Panel} newTab The tab being activated
             * @param {Panel} currentTab The current active tab
             */
            'beforetabchange',

/**
             * @event tabchange
             * Fires after the active tab has changed.
             * @param {TabPanel} this
             * @param {Panel} tab The new active tab
             */
            'tabchange',

/**
             * @event contextmenu
             * Relays the contextmenu event from a tab selector element in the tab strip.
             * @param {TabPanel} this
             * @param {Panel} tab The target tab
             * @param {EventObject} e
             */
            'contextmenu'
        );

/**
         * @cfg {Object} layoutConfig
         * TabPanel implicitly uses {@link Ext.layout.CardLayout} as its layout manager.
         * layoutConfig may be used to configure this layout manager.
         * {@link #deferredRender} and {@link #layoutOnTabChange}
         * configured on the TabPanel will be applied as configs to the layout manager.
         */
        this.setLayout(new Ext.layout.CardLayout(Ext.apply({
            layoutOnCardChange: this.layoutOnTabChange,
            deferredRender: this.deferredRender
        }, this.layoutConfig)));

        if(this.tabPosition == 'top'){
            this.elements += ',header';
            this.stripTarget = 'header';
        }else {
            this.elements += ',footer';
            this.stripTarget = 'footer';
        }
        if(!this.stack){
            this.stack = Ext.TabPanel.AccessStack();
        }
        this.initItems();
    },

    // private
    onRender : function(ct, position){
        Ext.TabPanel.superclass.onRender.call(this, ct, position);

        if(this.plain){
            var pos = this.tabPosition == 'top' ? 'header' : 'footer';
            this[pos].addClass('x-tab-panel-'+pos+'-plain');
        }

        var st = this[this.stripTarget];

        this.stripWrap = st.createChild({cls:'x-tab-strip-wrap', cn:{
            tag:'ul', cls:'x-tab-strip x-tab-strip-'+this.tabPosition}});

        var beforeEl = (this.tabPosition=='bottom' ? this.stripWrap : null);
        st.createChild({cls:'x-tab-strip-spacer'}, beforeEl);
        this.strip = new Ext.Element(this.stripWrap.dom.firstChild);

        // create an empty span with class x-tab-strip-text to force the height of the header element when there's no tabs.
        this.edge = this.strip.createChild({tag:'li', cls:'x-tab-edge', cn: [{tag: 'span', cls: 'x-tab-strip-text', cn: ' '}]});
        this.strip.createChild({cls:'x-clear'});

        this.body.addClass('x-tab-panel-body-'+this.tabPosition);

/**
         * @cfg {Template/XTemplate} itemTpl
(Optional) A {@link Ext.Template Template} or
         * {@link Ext.XTemplate XTemplate} which may be provided to process the data object returned from
         * {@link #getTemplateArgs} to produce a clickable selector element in the tab strip.

         *
The main element created should be a <li> element. In order for a click event on
         * a selector element to be connected to its item, it must take its id from the TabPanel's
         * native {@link #getTemplateArgs}.

         *
The child element which contains the title text must be marked by the CSS class
         * x-tab-strip-inner.

         *
To enable closability, the created element should contain an element marked by the CSS class
         * x-tab-strip-close.

         *
If a custom itemTpl is supplied, it is the developer's responsibility to create CSS
         * style rules to create the desired appearance.

         * Below is an example of how to create customized tab selector items:

new Ext.TabPanel({
    renderTo: document.body,
    minTabWidth: 115,
    tabWidth: 135,
    enableTabScroll: true,
    width: 600,
    height: 250,
    defaults: {autoScroll:true},
    itemTpl: new Ext.XTemplate(
    '<li class="{cls}" id="{id}" style="overflow:hidden">',
         '<tpl if="closable">',
            '<a class="x-tab-strip-close"></a>',
         '</tpl>',
         '<a class="x-tab-right" href="#" style="padding-left:6px">',
            '<em class="x-tab-left">',
                '<span class="x-tab-strip-inner">',
                    '<img src="{src}" style="float:left;margin:3px 3px 0 0">',
                    '<span style="margin-left:20px" class="x-tab-strip-text {iconCls}">{text} {extra}</span>',
                '</span>',
            '</em>',
        '</a>',
    '</li>'
    ),
    getTemplateArgs: function(item) {
//      Call the native method to collect the base data. Like the ID!
        var result = Ext.TabPanel.prototype.getTemplateArgs.call(this, item);

//      Add stuff used in our template
        return Ext.apply(result, {
            closable: item.closable,
            src: item.iconSrc,
            extra: item.extraText || ''
        });
    },
    items: [{
        title: 'New Tab 1',
        iconSrc: '../shared/icons/fam/grid.png',
        html: 'Tab Body 1',
        closable: true
    }, {
        title: 'New Tab 2',
        iconSrc: '../shared/icons/fam/grid.png',
        html: 'Tab Body 2',
        extraText: 'Extra stuff in the tab button'
    }]
});

         */
        if(!this.itemTpl){
            var tt = new Ext.Template(
                 '
  • ',
                 '',
                 '{text}',
                 '
    • '
            );
            tt.disableFormats = true;
            tt.compile();
            Ext.TabPanel.prototype.itemTpl = tt;
        }

        this.items.each(this.initTab, this);
    },

    // private
    afterRender : function(){
        Ext.TabPanel.superclass.afterRender.call(this);
        if(this.autoTabs){
            this.readTabs(false);
        }
        if(this.activeTab !== undefined){
            var item = Ext.isObject(this.activeTab) ? this.activeTab : this.items.get(this.activeTab);
            delete this.activeTab;
            this.setActiveTab(item);
        }
    },

    // private
    initEvents : function(){
        Ext.TabPanel.superclass.initEvents.call(this);
        this.mon(this.strip, {
            scope: this,
            mousedown: this.onStripMouseDown,
            contextmenu: this.onStripContextMenu
        });
        if(this.enableTabScroll){
            this.mon(this.strip, 'mousewheel', this.onWheel, this);
        }
    },

    // private
    findTargets : function(e){
        var item = null,
            itemEl = e.getTarget('li:not(.x-tab-edge)', this.strip);

        if(itemEl){
            item = this.getComponent(itemEl.id.split(this.idDelimiter)[1]);
            if(item.disabled){
                return {
                    close : null,
                    item : null,
                    el : null
                };
            }
        }
        return {
            close : e.getTarget('.x-tab-strip-close', this.strip),
            item : item,
            el : itemEl
        };
    },

    // private
    onStripMouseDown : function(e){
        if(e.button !== 0){
            return;
        }
        e.preventDefault();
        var t = this.findTargets(e);
        if(t.close){
            if (t.item.fireEvent('beforeclose', t.item) !== false) {
                t.item.fireEvent('close', t.item);
                this.remove(t.item);
            }
            return;
        }
        if(t.item && t.item != this.activeTab){
            this.setActiveTab(t.item);
        }
    },

    // private
    onStripContextMenu : function(e){
        e.preventDefault();
        var t = this.findTargets(e);
        if(t.item){
            this.fireEvent('contextmenu', this, t.item, e);
        }
    },

    /**
     * True to scan the markup in this tab panel for {@link #autoTabs} using the
     * {@link #autoTabSelector}
     * @param {Boolean} removeExisting True to remove existing tabs
     */
    readTabs : function(removeExisting){
        if(removeExisting === true){
            this.items.each(function(item){
                this.remove(item);
            }, this);
        }
        var tabs = this.el.query(this.autoTabSelector);
        for(var i = 0, len = tabs.length; i < len; i++){
            var tab = tabs[i],
                title = tab.getAttribute('title');
            tab.removeAttribute('title');
            this.add({
                title: title,
                contentEl: tab
            });
        }
    },

    // private
    initTab : function(item, index){
        var before = this.strip.dom.childNodes[index],
            p = this.getTemplateArgs(item),
            el = before ?
                 this.itemTpl.insertBefore(before, p) :
                 this.itemTpl.append(this.strip, p),
            cls = 'x-tab-strip-over',
            tabEl = Ext.get(el);

        tabEl.hover(function(){
            if(!item.disabled){
                tabEl.addClass(cls);
            }
        }, function(){
            tabEl.removeClass(cls);
        });

        if(item.tabTip){
            tabEl.child('span.x-tab-strip-text', true).qtip = item.tabTip;
        }
        item.tabEl = el;

        // Route *keyboard triggered* click events to the tab strip mouse handler.
        tabEl.select('a').on('click', function(e){
            if(!e.getPageX()){
                this.onStripMouseDown(e);
            }
        }, this, {preventDefault: true});

        item.on({
            scope: this,
            disable: this.onItemDisabled,
            enable: this.onItemEnabled,
            titlechange: this.onItemTitleChanged,
            iconchange: this.onItemIconChanged,
            beforeshow: this.onBeforeShowItem
        });
    },

    /**
     *
    Provides template arguments for rendering a tab selector item in the tab strip.

     *
    This method returns an object hash containing properties used by the TabPanel's {@link #itemTpl}
     * to create a formatted, clickable tab selector element. The properties which must be returned
     * are:

     *
    • id : String
      A unique identifier which links to the item
      •
     *
    • text : String
      The text to display
      •
     *
    • cls : String
      The CSS class name
      •
     *
    • iconCls : String
      A CSS class to provide appearance for an icon.
      •
     *

     * @param {Ext.BoxComponent} item The {@link Ext.BoxComponent BoxComponent} for which to create a selector element in the tab strip.
     * @return {Object} An object hash containing the properties required to render the selector element.
     */
    getTemplateArgs : function(item) {
        var cls = item.closable ? 'x-tab-strip-closable' : '';
        if(item.disabled){
            cls += ' x-item-disabled';
        }
        if(item.iconCls){
            cls += ' x-tab-with-icon';
        }
        if(item.tabCls){
            cls += ' ' + item.tabCls;
        }

        return {
            id: this.id + this.idDelimiter + item.getItemId(),
            text: item.title,
            cls: cls,
            iconCls: item.iconCls || ''
        };
    },

    // private
    onAdd : function(c){
        Ext.TabPanel.superclass.onAdd.call(this, c);
        if(this.rendered){
            var items = this.items;
            this.initTab(c, items.indexOf(c));
            if(items.getCount() == 1 && !this.collapsed){
                this.syncSize();
            }
            this.delegateUpdates();
        }
    },

    // private
    onBeforeAdd : function(item){
        var existing = item.events ? (this.items.containsKey(item.getItemId()) ? item : null) : this.items.get(item);
        if(existing){
            this.setActiveTab(item);
            return false;
        }
        Ext.TabPanel.superclass.onBeforeAdd.apply(this, arguments);
        var es = item.elements;
        item.elements = es ? es.replace(',header', '') : es;
        item.border = (item.border === true);
    },

    // private
    onRemove : function(c){
        var te = Ext.get(c.tabEl);
        // check if the tabEl exists, it won't if the tab isn't rendered
        if(te){
            te.select('a').removeAllListeners();
            Ext.destroy(te);
        }
        Ext.TabPanel.superclass.onRemove.call(this, c);
        this.stack.remove(c);
        delete c.tabEl;
        c.un('disable', this.onItemDisabled, this);
        c.un('enable', this.onItemEnabled, this);
        c.un('titlechange', this.onItemTitleChanged, this);
        c.un('iconchange', this.onItemIconChanged, this);
        c.un('beforeshow', this.onBeforeShowItem, this);
        if(c == this.activeTab){
            var next = this.stack.next();
            if(next){
                this.setActiveTab(next);
            }else if(this.items.getCount() > 0){
                this.setActiveTab(0);
            }else{
                this.setActiveTab(null);
            }
        }
        if(!this.destroying){
            this.delegateUpdates();
        }
    },

    // private
    onBeforeShowItem : function(item){
        if(item != this.activeTab){
            this.setActiveTab(item);
            return false;
        }
    },

    // private
    onItemDisabled : function(item){
        var el = this.getTabEl(item);
        if(el){
            Ext.fly(el).addClass('x-item-disabled');
        }
        this.stack.remove(item);
    },

    // private
    onItemEnabled : function(item){
        var el = this.getTabEl(item);
        if(el){
            Ext.fly(el).removeClass('x-item-disabled');
        }
    },

    // private
    onItemTitleChanged : function(item){
        var el = this.getTabEl(item);
        if(el){
            Ext.fly(el).child('span.x-tab-strip-text', true).innerHTML = item.title;
        }
    },

    //private
    onItemIconChanged : function(item, iconCls, oldCls){
        var el = this.getTabEl(item);
        if(el){
            el = Ext.get(el);
            el.child('span.x-tab-strip-text').replaceClass(oldCls, iconCls);
            el[Ext.isEmpty(iconCls) ? 'removeClass' : 'addClass']('x-tab-with-icon');
        }
    },

    /**
     * Gets the DOM element for the tab strip item which activates the child panel with the specified
     * ID. Access this to change the visual treatment of the item, for example by changing the CSS class name.
     * @param {Panel/Number/String} tab The tab component, or the tab's index, or the tabs id or itemId.
     * @return {HTMLElement} The DOM node
     */
    getTabEl : function(item){
        var c = this.getComponent(item);
        return c ? c.tabEl : null;
    },

    // private
    onResize : function(){
        Ext.TabPanel.superclass.onResize.apply(this, arguments);
        this.delegateUpdates();
    },

    /**
     * Suspends any internal calculations or scrolling while doing a bulk operation. See {@link #endUpdate}
     */
    beginUpdate : function(){
        this.suspendUpdates = true;
    },

    /**
     * Resumes calculations and scrolling at the end of a bulk operation. See {@link #beginUpdate}
     */
    endUpdate : function(){
        this.suspendUpdates = false;
        this.delegateUpdates();
    },

    /**
     * Hides the tab strip item for the passed tab
     * @param {Number/String/Panel} item The tab index, id or item
     */
    hideTabStripItem : function(item){
        item = this.getComponent(item);
        var el = this.getTabEl(item);
        if(el){
            el.style.display = 'none';
            this.delegateUpdates();
        }
        this.stack.remove(item);
    },

    /**
     * Unhides the tab strip item for the passed tab
     * @param {Number/String/Panel} item The tab index, id or item
     */
    unhideTabStripItem : function(item){
        item = this.getComponent(item);
        var el = this.getTabEl(item);
        if(el){
            el.style.display = '';
            this.delegateUpdates();
        }
    },

    // private
    delegateUpdates : function(){
        if(this.suspendUpdates){
            return;
        }
        if(this.resizeTabs && this.rendered){
            this.autoSizeTabs();
        }
        if(this.enableTabScroll && this.rendered){
            this.autoScrollTabs();
        }
    },

    // private
    autoSizeTabs : function(){
        var count = this.items.length,
            ce = this.tabPosition != 'bottom' ? 'header' : 'footer',
            ow = this[ce].dom.offsetWidth,
            aw = this[ce].dom.clientWidth;

        if(!this.resizeTabs || count < 1 || !aw){ // !aw for display:none
            return;
        }

        var each = Math.max(Math.min(Math.floor((aw-4) / count) - this.tabMargin, this.tabWidth), this.minTabWidth); // -4 for float errors in IE
        this.lastTabWidth = each;
        var lis = this.strip.query('li:not(.x-tab-edge)');
        for(var i = 0, len = lis.length; i < len; i++) {
            var li = lis[i],
                inner = Ext.fly(li).child('.x-tab-strip-inner', true),
                tw = li.offsetWidth,
                iw = inner.offsetWidth;
            inner.style.width = (each - (tw-iw)) + 'px';
        }
    },

    // private
    adjustBodyWidth : function(w){
        if(this.header){
            this.header.setWidth(w);
        }
        if(this.footer){
            this.footer.setWidth(w);
        }
        return w;
    },

    /**
     * Sets the specified tab as the active tab. This method fires the {@link #beforetabchange} event which
     * can return false to cancel the tab change.
     * @param {String/Number} item
     * The id or tab Panel to activate. This parameter may be any of the following:
     *

     *
    • a String : representing the {@link Ext.Component#itemId itemId}
     * or {@link Ext.Component#id id} of the child component
      •
     *
    • a Number : representing the position of the child component
     * within the {@link Ext.Container#items items} property
      •
     *

     *
    For additional information see {@link Ext.util.MixedCollection#get}.
     */
    setActiveTab : function(item){
        item = this.getComponent(item);
        if(this.fireEvent('beforetabchange', this, item, this.activeTab) === false){
            return;
        }
        if(!this.rendered){
            this.activeTab = item;
            return;
        }
        if(this.activeTab != item){
            if(this.activeTab){
                var oldEl = this.getTabEl(this.activeTab);
                if(oldEl){
                    Ext.fly(oldEl).removeClass('x-tab-strip-active');
                }
            }
            if(item){
                var el = this.getTabEl(item);
                Ext.fly(el).addClass('x-tab-strip-active');
                this.activeTab = item;
                this.stack.add(item);

                this.layout.setActiveItem(item);
                if(this.scrolling){
                    this.scrollToTab(item, this.animScroll);
                }
            }
            this.fireEvent('tabchange', this, item);
        }
    },

    /**
     * Returns the Component which is the currently active tab. Note that before the TabPanel
     * first activates a child Component, this method will return whatever was configured in the
     * {@link #activeTab} config option.
     * @return {BoxComponent} The currently active child Component if one is active, or the {@link #activeTab} config value.
     */
    getActiveTab : function(){
        return this.activeTab || null;
    },

    /**
     * Gets the specified tab by id.
     * @param {String} id The tab id
     * @return {Panel} The tab
     */
    getItem : function(item){
        return this.getComponent(item);
    },

    // private
    autoScrollTabs : function(){
        this.pos = this.tabPosition=='bottom' ? this.footer : this.header;
        var count = this.items.length,
            ow = this.pos.dom.offsetWidth,
            tw = this.pos.dom.clientWidth,
            wrap = this.stripWrap,
            wd = wrap.dom,
            cw = wd.offsetWidth,
            pos = this.getScrollPos(),
            l = this.edge.getOffsetsTo(this.stripWrap)[0] + pos;

        if(!this.enableTabScroll || count < 1 || cw < 20){ // 20 to prevent display:none issues
            return;
        }
        if(l <= tw){
            wd.scrollLeft = 0;
            wrap.setWidth(tw);
            if(this.scrolling){
                this.scrolling = false;
                this.pos.removeClass('x-tab-scrolling');
                this.scrollLeft.hide();
                this.scrollRight.hide();
                // See here: http://extjs.com/forum/showthread.php?t=49308&highlight=isSafari
                if(Ext.isAir || Ext.isWebKit){
                    wd.style.marginLeft = '';
                    wd.style.marginRight = '';
                }
            }
        }else{
            if(!this.scrolling){
                this.pos.addClass('x-tab-scrolling');
                // See here: http://extjs.com/forum/showthread.php?t=49308&highlight=isSafari
                if(Ext.isAir || Ext.isWebKit){
                    wd.style.marginLeft = '18px';
                    wd.style.marginRight = '18px';
                }
            }
            tw -= wrap.getMargins('lr');
            wrap.setWidth(tw > 20 ? tw : 20);
            if(!this.scrolling){
                if(!this.scrollLeft){
                    this.createScrollers();
                }else{
                    this.scrollLeft.show();
                    this.scrollRight.show();
                }
            }
            this.scrolling = true;
            if(pos > (l-tw)){ // ensure it stays within bounds
                wd.scrollLeft = l-tw;
            }else{ // otherwise, make sure the active tab is still visible
                this.scrollToTab(this.activeTab, false);
            }
            this.updateScrollButtons();
        }
    },

    // private
    createScrollers : function(){
        this.pos.addClass('x-tab-scrolling-' + this.tabPosition);
        var h = this.stripWrap.dom.offsetHeight;

        // left
        var sl = this.pos.insertFirst({
            cls:'x-tab-scroller-left'
        });
        sl.setHeight(h);
        sl.addClassOnOver('x-tab-scroller-left-over');
        this.leftRepeater = new Ext.util.ClickRepeater(sl, {
            interval : this.scrollRepeatInterval,
            handler: this.onScrollLeft,
            scope: this
        });
        this.scrollLeft = sl;

        // right
        var sr = this.pos.insertFirst({
            cls:'x-tab-scroller-right'
        });
        sr.setHeight(h);
        sr.addClassOnOver('x-tab-scroller-right-over');
        this.rightRepeater = new Ext.util.ClickRepeater(sr, {
            interval : this.scrollRepeatInterval,
            handler: this.onScrollRight,
            scope: this
        });
        this.scrollRight = sr;
    },

    // private
    getScrollWidth : function(){
        return this.edge.getOffsetsTo(this.stripWrap)[0] + this.getScrollPos();
    },

    // private
    getScrollPos : function(){
        return parseInt(this.stripWrap.dom.scrollLeft, 10) || 0;
    },

    // private
    getScrollArea : function(){
        return parseInt(this.stripWrap.dom.clientWidth, 10) || 0;
    },

    // private
    getScrollAnim : function(){
        return {duration:this.scrollDuration, callback: this.updateScrollButtons, scope: this};
    },

    // private
    getScrollIncrement : function(){
        return this.scrollIncrement || (this.resizeTabs ? this.lastTabWidth+2 : 100);
    },

    /**
     * Scrolls to a particular tab if tab scrolling is enabled
     * @param {Panel} item The item to scroll to
     * @param {Boolean} animate True to enable animations
     */

    scrollToTab : function(item, animate){
        if(!item){
            return;
        }
        var el = this.getTabEl(item),
            pos = this.getScrollPos(),
            area = this.getScrollArea(),
            left = Ext.fly(el).getOffsetsTo(this.stripWrap)[0] + pos,
            right = left + el.offsetWidth;
        if(left < pos){
            this.scrollTo(left, animate);
        }else if(right > (pos + area)){
            this.scrollTo(right - area, animate);
        }
    },

    // private
    scrollTo : function(pos, animate){
        this.stripWrap.scrollTo('left', pos, animate ? this.getScrollAnim() : false);
        if(!animate){
            this.updateScrollButtons();
        }
    },

    onWheel : function(e){
        var d = e.getWheelDelta()*this.wheelIncrement*-1;
        e.stopEvent();

        var pos = this.getScrollPos(),
            newpos = pos + d,
            sw = this.getScrollWidth()-this.getScrollArea();

        var s = Math.max(0, Math.min(sw, newpos));
        if(s != pos){
            this.scrollTo(s, false);
        }
    },

    // private
    onScrollRight : function(){
        var sw = this.getScrollWidth()-this.getScrollArea(),
            pos = this.getScrollPos(),
            s = Math.min(sw, pos + this.getScrollIncrement());
        if(s != pos){
            this.scrollTo(s, this.animScroll);
        }
    },

    // private
    onScrollLeft : function(){
        var pos = this.getScrollPos(),
            s = Math.max(0, pos - this.getScrollIncrement());
        if(s != pos){
            this.scrollTo(s, this.animScroll);
        }
    },

    // private
    updateScrollButtons : function(){
        var pos = this.getScrollPos();
        this.scrollLeft[pos === 0 ? 'addClass' : 'removeClass']('x-tab-scroller-left-disabled');
        this.scrollRight[pos >= (this.getScrollWidth()-this.getScrollArea()) ? 'addClass' : 'removeClass']('x-tab-scroller-right-disabled');
    },

    // private
    beforeDestroy : function() {
        Ext.destroy(this.leftRepeater, this.rightRepeater);
        this.deleteMembers('strip', 'edge', 'scrollLeft', 'scrollRight', 'stripWrap');
        this.activeTab = null;
        Ext.TabPanel.superclass.beforeDestroy.apply(this);
    }

    /**
     * @cfg {Boolean} collapsible
     * @hide
     */

    /**
     * @cfg {String} header
     * @hide
     */

    /**
     * @cfg {Boolean} headerAsText
     * @hide
     */

    /**
     * @property header
     * @hide
     */

    /**
     * @cfg title
     * @hide
     */

    /**
     * @cfg {Array} tools
     * @hide
     */

    /**
     * @cfg {Array} toolTemplate
     * @hide
     */

    /**
     * @cfg {Boolean} hideCollapseTool
     * @hide
     */

    /**
     * @cfg {Boolean} titleCollapse
     * @hide
     */

    /**
     * @cfg {Boolean} collapsed
     * @hide
     */

    /**
     * @cfg {String} layout
     * @hide
     */

    /**
     * @cfg {Boolean} preventBodyReset
     * @hide
     */
});
Ext.reg('tabpanel', Ext.TabPanel);

    /**
 * See {@link #setActiveTab}. Sets the specified tab as the active tab. This method fires
 * the {@link #beforetabchange} event which can return false to cancel the tab change.
 * @param {String/Panel} tab The id or tab Panel to activate
 * @method activate
 */
Ext.TabPanel.prototype.activate = Ext.TabPanel.prototype.setActiveTab;

// private utility class used by TabPanel
Ext.TabPanel.AccessStack = function(){
    var items = [];
    return {
        add : function(item){
            items.push(item);
            if(items.length > 10){
                items.shift();
            }
        },

        remove : function(item){
            var s = [];
            for(var i = 0, len = items.length; i < len; i++) {
                if(items[i] != item){
                    s.push(items[i]);
                }
            }
            items = s;
        },

        next : function(){
            return items.pop();
        }
    };
};


The source code

/*!
 * licensing@extjs.com
 * http://www.extjs.com/license
 */
Ext.ns('Ext.ux');

Ext.ux.Tabs = Ext.extend(Ext.util.Observable, {
    // Configuration options
    activeTab: 0,

    // Our class constructor
    constructor : function(element, config) {
        Ext.apply(this, config);
        Ext.ux.Tabs.superclass.constructor.call(this);

        this.addEvents(
            'beforetabchange',
            'tabchange'
        );

        this.el = Ext.get(element);
        this.init();
    },

    init : function() {
        var me = this;

        this.el.addClass('ux-tabs-container');

        this.tabStrip = this.el.child('ul');
        this.tabStrip.addClass('ux-tabs-strip');

        this.tabStrip.on('click', this.onStripClick, this, {delegate: 'a'});

        this.tabs = this.tabStrip.select('> li');
        this.cards = this.el.select('> div');

        this.cardsContainer = this.el.createChild({
            cls: 'ux-tabs-cards'
        });
        this.cardsContainer.setWidth(this.el.getWidth());

        this.cards.addClass('ux-tabs-card');
        this.cards.appendTo(this.cardsContainer);

        this.el.createChild({
            cls: 'ux-tabs-clearfix'
        });

        this.setActiveTab(this.activeTab || 0);
    },

    onStripClick : function(ev, t) {
        if(t && t.href && t.href.indexOf('#')) {
            ev.preventDefault();
            this.setActiveTab(t.href.split('#')[1]);
        }
    },

    setActiveTab : function(tab) {
        var card;
        if(Ext.isString(tab)) {
            card = Ext.get(tab);
            tab = this.tabStrip.child('a[href=#' + tab + ']').parent();
        }
        else if (Ext.isNumber(tab)) {
            tab = this.tabs.item(tab);
            card = Ext.get(tab.first().dom.href.split('#')[1]);
        }

        if(tab && card && this.fireEvent('beforetabchange', tab, card) !== false) {
            card.radioClass('ux-tabs-card-active');
            tab.radioClass('ux-tabs-tab-active');
            this.fireEvent('tabchange', tab, card);
        }
    }
});


The source code

/*!
 * licensing@extjs.com
 * http://www.extjs.com/license
 */

/**
 * @class Ext.util.TaskRunner
 * Provides the ability to execute one or more arbitrary tasks in a multithreaded
 * manner.  Generally, you can use the singleton {@link Ext.TaskMgr} instead, but
 * if needed, you can create separate instances of TaskRunner.  Any number of
 * separate tasks can be started at any time and will run independently of each
 * other. Example usage:
 *

// Start a simple clock task that updates a div once per second
var updateClock = function(){
    Ext.fly('clock').update(new Date().format('g:i:s A'));
}
var task = {
    run: updateClock,
    interval: 1000 //1 second
}
var runner = new Ext.util.TaskRunner();
runner.start(task);

// equivalent using TaskMgr
Ext.TaskMgr.start({
    run: updateClock,
    interval: 1000
});

 *

 *
See the {@link #start} method for details about how to configure a task object.

 * Also see {@link Ext.util.DelayedTask}.
 *
 * @constructor
 * @param {Number} interval (optional) The minimum precision in milliseconds supported by this TaskRunner instance
 * (defaults to 10)
 */
Ext.util.TaskRunner = function(interval){
    interval = interval || 10;
    var tasks = [],
        removeQueue = [],
        id = 0,
        running = false,

        // private
        stopThread = function(){
            running = false;
            clearInterval(id);
            id = 0;
        },

        // private
        startThread = function(){
            if(!running){
                running = true;
                id = setInterval(runTasks, interval);
            }
        },

        // private
        removeTask = function(t){
            removeQueue.push(t);
            if(t.onStop){
                t.onStop.apply(t.scope || t);
            }
        },

        // private
        runTasks = function(){
            var rqLen = removeQueue.length,
                now = new Date().getTime();

            if(rqLen > 0){
                for(var i = 0; i < rqLen; i++){
                    tasks.remove(removeQueue[i]);
                }
                removeQueue = [];
                if(tasks.length < 1){
                    stopThread();
                    return;
                }
            }
            for(var i = 0, t, itime, rt, len = tasks.length; i < len; ++i){
                t = tasks[i];
                itime = now - t.taskRunTime;
                if(t.interval <= itime){
                    rt = t.run.apply(t.scope || t, t.args || [++t.taskRunCount]);
                    t.taskRunTime = now;
                    if(rt === false || t.taskRunCount === t.repeat){
                        removeTask(t);
                        return;
                    }
                }
                if(t.duration && t.duration <= (now - t.taskStartTime)){
                    removeTask(t);
                }
            }
        };

/**
     * Starts a new task.
     * @method start
     * @param {Object} task
A config object that supports the following properties:

     *
  • run : Function
    The function to execute each time the task is invoked. The
     * function will be called at each interval and passed the args argument if specified, and the
     * current invocation count if not.

     *
    If a particular scope (this reference) is required, be sure to specify it using the scope argument.

     *
    Return false from this function to terminate the task.
    •
     *
  • interval : Number
    The frequency in milliseconds with which the task
     * should be invoked.
    •
     *
  • args : Array
    (optional) An array of arguments to be passed to the function
     * specified by run. If not specified, the current invocation count is passed.
    •
     *
  • scope : Object
    (optional) The scope (this reference) in which to execute the
     * run function. Defaults to the task config object.
    •
     *
  • duration : Number
    (optional) The length of time in milliseconds to invoke
     * the task before stopping automatically (defaults to indefinite).
    •
     *
  • repeat : Number
    (optional) The number of times to invoke the task before
     * stopping automatically (defaults to indefinite).
    •
     *

     *
Before each invocation, Ext injects the property taskRunCount into the task object so
     * that calculations based on the repeat count can be performed.

     * @return {Object} The task
     */
    this.start = function(task){
        tasks.push(task);
        task.taskStartTime = new Date().getTime();
        task.taskRunTime = 0;
        task.taskRunCount = 0;
        startThread();
        return task;
    };

/**
     * Stops an existing running task.
     * @method stop
     * @param {Object} task The task to stop
     * @return {Object} The task
     */
    this.stop = function(task){
        removeTask(task);
        return task;
    };

/**
     * Stops all tasks that are currently running.
     * @method stopAll
     */
    this.stopAll = function(){
        stopThread();
        for(var i = 0, len = tasks.length; i < len; i++){
            if(tasks[i].onStop){
                tasks[i].onStop();
            }
        }
        tasks = [];
        removeQueue = [];
    };
};

/**
 * @class Ext.TaskMgr
 * @extends Ext.util.TaskRunner
 * A static {@link Ext.util.TaskRunner} instance that can be used to start and stop arbitrary tasks.  See
 * {@link Ext.util.TaskRunner} for supported methods and task config properties.
 *

// Start a simple clock task that updates a div once per second
var task = {
    run: function(){
        Ext.fly('clock').update(new Date().format('g:i:s A'));
    },
    interval: 1000 //1 second
}
Ext.TaskMgr.start(task);

 *
See the {@link #start} method for details about how to configure a task object.

 * @singleton
 */
Ext.TaskMgr = new Ext.util.TaskRunner();


The source code

/*!
 * licensing@extjs.com
 * http://www.extjs.com/license
 */
/**
 * @class Ext.Template
 */
Ext.apply(Ext.Template.prototype, {

/**
     * @cfg {Boolean} disableFormats Specify true to disable format
     * functions in the template. If the template does not contain
     * {@link Ext.util.Format format functions}, setting disableFormats
     * to true will reduce {@link #apply} time. Defaults to false.
     *

var t = new Ext.Template(
    '<div name="{id}">',
        '<span class="{cls}">{name} {value}</span>',
    '</div>',
    {
        compiled: true,      // {@link #compile} immediately
        disableFormats: true // reduce {@link #apply} time since no formatting
    }
);
     *

     * For a list of available format functions, see {@link Ext.util.Format}.
     */
    disableFormats : false,

/**
     * See {@link #disableFormats}.
     * @type Boolean
     * @property disableFormats
     */

/**
     * The regular expression used to match template variables
     * @type RegExp
     * @property
     * @hide repeat doc
     */
    re : /\{([\w-]+)(?:\:([\w\.]*)(?:\((.*?)?\))?)?\}/g,

/**
     * Returns an HTML fragment of this template with the specified values applied.
     * @param {Object/Array} values The template values. Can be an array if your params are numeric (i.e. {0}) or an object (i.e. {foo: 'bar'})
     * @return {String} The HTML fragment
     * @hide repeat doc
     */
    applyTemplate : function(values){
        var me = this,
            useF = me.disableFormats !== true,
            fm = Ext.util.Format,
            tpl = me;

        if(me.compiled){
            return me.compiled(values);
        }
        function fn(m, name, format, args){
            if (format && useF) {
                if (format.substr(0, 5) == "this.") {
                    return tpl.call(format.substr(5), values[name], values);
                } else {
                    if (args) {
                        // quoted values are required for strings in compiled templates,
                        // but for non compiled we need to strip them
                        // quoted reversed for jsmin
                        var re = /^\s*['"](.*)["']\s*$/;
                        args = args.split(',');
                        for(var i = 0, len = args.length; i < len; i++){
                            args[i] = args[i].replace(re, "$1");
                        }
                        args = [values[name]].concat(args);
                    } else {
                        args = [values[name]];
                    }
                    return fm[format].apply(fm, args);
                }
            } else {
                return values[name] !== undefined ? values[name] : "";
            }
        }
        return me.html.replace(me.re, fn);
    },

/**
     * Compiles the template into an internal function, eliminating the RegEx overhead.
     * @return {Ext.Template} this
     * @hide repeat doc
     */
    compile : function(){
        var me = this,
            fm = Ext.util.Format,
            useF = me.disableFormats !== true,
            sep = Ext.isGecko ? "+" : ",",
            body;

        function fn(m, name, format, args){
            if(format && useF){
                args = args ? ',' + args : "";
                if(format.substr(0, 5) != "this."){
                    format = "fm." + format + '(';
                }else{
                    format = 'this.call("'+ format.substr(5) + '", ';
                    args = ", values";
                }
            }else{
                args= ''; format = "(values['" + name + "'] == undefined ? '' : ";
            }
            return "'"+ sep + format + "values['" + name + "']" + args + ")"+sep+"'";
        }

        // branched to use + in gecko and [].join() in others
        if(Ext.isGecko){
            body = "this.compiled = function(values){ return '" +
                   me.html.replace(/\\/g, '\\\\').replace(/(\r\n|\n)/g, '\\n').replace(/'/g, "\\'").replace(this.re, fn) +
                    "';};";
        }else{
            body = ["this.compiled = function(values){ return ['"];
            body.push(me.html.replace(/\\/g, '\\\\').replace(/(\r\n|\n)/g, '\\n').replace(/'/g, "\\'").replace(this.re, fn));
            body.push("'].join('');};");
            body = body.join('');
        }
        eval(body);
        return me;
    },

    // private function used to call members
    call : function(fnName, value, allValues){
        return this[fnName](value, allValues);
    }
});
Ext.Template.prototype.apply = Ext.Template.prototype.applyTemplate;


The source code

/*!
 * licensing@extjs.com
 * http://www.extjs.com/license
 */

/**
 * @class Ext.Template
 *
Represents an HTML fragment template. Templates may be {@link #compile precompiled}
 * for greater performance.

 *
For example usage {@link #Template see the constructor}.

 *
 * @constructor
 * An instance of this class may be created by passing to the constructor either
 * a single argument, or multiple arguments:
 *

 *
  • single argument : String/Array
 *

 * The single argument may be either a String or an Array:

 *
    • String :
      •
var t = new Ext.Template("<div>Hello {0}.</div>");
t.{@link #append}('some-element', ['foo']);
 *

 *
    • Array :
      •
 * An Array will be combined with join('').

var t = new Ext.Template([
    '<div name="{id}">',
        '<span class="{cls}">{name:trim} {value:ellipsis(10)}</span>',
    '</div>',
]);
t.{@link #compile}();
t.{@link #append}('some-element', {id: 'myid', cls: 'myclass', name: 'foo', value: 'bar'});

 *
    •
 *
  • multiple arguments : String, Object, Array, ...
 *

 * Multiple arguments will be combined with join('').
 *

var t = new Ext.Template(
    '<div name="{id}">',
        '<span class="{cls}">{name} {value}</span>',
    '</div>',
    // a configuration object:
    {
        compiled: true,      // {@link #compile} immediately
        disableFormats: true // See Notes below.
    }
);
 *

 *
    Notes:

 *

 *
    • Formatting and disableFormats are not applicable for Ext Core.
      •
 *
    • For a list of available format functions, see {@link Ext.util.Format}.
      •
 *
    • disableFormats reduces {@link #apply} time
 * when no formatting is required.
      •
 *

 *
    •
 *

 * @param {Mixed} config
 */
Ext.Template = function(html){
    var me = this,
        a = arguments,
        buf = [];

    if (Ext.isArray(html)) {
        html = html.join("");
    } else if (a.length > 1) {
        Ext.each(a, function(v) {
            if (Ext.isObject(v)) {
                Ext.apply(me, v);
            } else {
                buf.push(v);
            }
        });
        html = buf.join('');
    }

    /**@private*/
    me.html = html;

/**
     * @cfg {Boolean} compiled Specify true to compile the template
     * immediately (see {@link #compile}).
     * Defaults to false.
     */
    if (me.compiled) {
        me.compile();
    }
};
Ext.Template.prototype = {

/**
     * @cfg {RegExp} re The regular expression used to match template variables.
     * Defaults to:

     * re : /\{([\w-]+)\}/g                                     // for Ext Core
     * re : /\{([\w-]+)(?:\:([\w\.]*)(?:\((.*?)?\))?)?\}/g      // for Ext JS
     *

     */
    re : /\{([\w-]+)\}/g,

/**
     * See {@link #re}.
     * @type RegExp
     * @property re
     */

/**
     * Returns an HTML fragment of this template with the specified values applied.
     * @param {Object/Array} values
     * The template values. Can be an array if the params are numeric (i.e. {0})
     * or an object (i.e. {foo: 'bar'}).
     * @return {String} The HTML fragment
     */
    applyTemplate : function(values){
        var me = this;

        return me.compiled ?
                me.compiled(values) :
                me.html.replace(me.re, function(m, name){
                    return values[name] !== undefined ? values[name] : "";
                });
    },

/**
     * Sets the HTML used as the template and optionally compiles it.
     * @param {String} html
     * @param {Boolean} compile (optional) True to compile the template (defaults to undefined)
     * @return {Ext.Template} this
     */
    set : function(html, compile){
        var me = this;
        me.html = html;
        me.compiled = null;
        return compile ? me.compile() : me;
    },

/**
     * Compiles the template into an internal function, eliminating the RegEx overhead.
     * @return {Ext.Template} this
     */
    compile : function(){
        var me = this,
            sep = Ext.isGecko ? "+" : ",";

        function fn(m, name){
            name = "values['" + name + "']";
            return "'"+ sep + '(' + name + " == undefined ? '' : " + name + ')' + sep + "'";
        }

        eval("this.compiled = function(values){ return " + (Ext.isGecko ? "'" : "['") +
             me.html.replace(/\\/g, '\\\\').replace(/(\r\n|\n)/g, '\\n').replace(/'/g, "\\'").replace(this.re, fn) +
             (Ext.isGecko ?  "';};" : "'].join('');};"));
        return me;
    },

/**
     * Applies the supplied values to the template and inserts the new node(s) as the first child of el.
     * @param {Mixed} el The context element
     * @param {Object/Array} values The template values. Can be an array if your params are numeric (i.e. {0}) or an object (i.e. {foo: 'bar'})
     * @param {Boolean} returnElement (optional) true to return a Ext.Element (defaults to undefined)
     * @return {HTMLElement/Ext.Element} The new node or Element
     */
    insertFirst: function(el, values, returnElement){
        return this.doInsert('afterBegin', el, values, returnElement);
    },

/**
     * Applies the supplied values to the template and inserts the new node(s) before el.
     * @param {Mixed} el The context element
     * @param {Object/Array} values The template values. Can be an array if your params are numeric (i.e. {0}) or an object (i.e. {foo: 'bar'})
     * @param {Boolean} returnElement (optional) true to return a Ext.Element (defaults to undefined)
     * @return {HTMLElement/Ext.Element} The new node or Element
     */
    insertBefore: function(el, values, returnElement){
        return this.doInsert('beforeBegin', el, values, returnElement);
    },

/**
     * Applies the supplied values to the template and inserts the new node(s) after el.
     * @param {Mixed} el The context element
     * @param {Object/Array} values The template values. Can be an array if your params are numeric (i.e. {0}) or an object (i.e. {foo: 'bar'})
     * @param {Boolean} returnElement (optional) true to return a Ext.Element (defaults to undefined)
     * @return {HTMLElement/Ext.Element} The new node or Element
     */
    insertAfter : function(el, values, returnElement){
        return this.doInsert('afterEnd', el, values, returnElement);
    },

/**
     * Applies the supplied values to the template and appends
     * the new node(s) to the specified el.
     *
For example usage {@link #Template see the constructor}.

     * @param {Mixed} el The context element
     * @param {Object/Array} values
     * The template values. Can be an array if the params are numeric (i.e. {0})
     * or an object (i.e. {foo: 'bar'}).
     * @param {Boolean} returnElement (optional) true to return an Ext.Element (defaults to undefined)
     * @return {HTMLElement/Ext.Element} The new node or Element
     */
    append : function(el, values, returnElement){
        return this.doInsert('beforeEnd', el, values, returnElement);
    },

    doInsert : function(where, el, values, returnEl){
        el = Ext.getDom(el);
        var newNode = Ext.DomHelper.insertHtml(where, el, this.applyTemplate(values));
        return returnEl ? Ext.get(newNode, true) : newNode;
    },

/**
     * Applies the supplied values to the template and overwrites the content of el with the new node(s).
     * @param {Mixed} el The context element
     * @param {Object/Array} values The template values. Can be an array if your params are numeric (i.e. {0}) or an object (i.e. {foo: 'bar'})
     * @param {Boolean} returnElement (optional) true to return a Ext.Element (defaults to undefined)
     * @return {HTMLElement/Ext.Element} The new node or Element
     */
    overwrite : function(el, values, returnElement){
        el = Ext.getDom(el);
        el.innerHTML = this.applyTemplate(values);
        return returnElement ? Ext.get(el.firstChild, true) : el.firstChild;
    }
};

/**
 * Alias for {@link #applyTemplate}
 * Returns an HTML fragment of this template with the specified values applied.
 * @param {Object/Array} values
 * The template values. Can be an array if the params are numeric (i.e. {0})
 * or an object (i.e. {foo: 'bar'}).
 * @return {String} The HTML fragment
 * @member Ext.Template
 * @method apply
 */
Ext.Template.prototype.apply = Ext.Template.prototype.applyTemplate;

/**
 * Creates a template from the passed element's value (display:none textarea, preferred) or innerHTML.
 * @param {String/HTMLElement} el A DOM element or its id
 * @param {Object} config A configuration object
 * @return {Ext.Template} The created template
 * @static
 */
Ext.Template.from = function(el, config){
    el = Ext.getDom(el);
    return new Ext.Template(el.value || el.innerHTML, config || '');
};


The source code

/*!
 * licensing@extjs.com
 * http://www.extjs.com/license
 */

/**
 * @class Ext.form.TextArea
 * @extends Ext.form.TextField
 * Multiline text field.  Can be used as a direct replacement for traditional textarea fields, plus adds
 * support for auto-sizing.
 * @constructor
 * Creates a new TextArea
 * @param {Object} config Configuration options
 * @xtype textarea
 */
Ext.form.TextArea = Ext.extend(Ext.form.TextField,  {

/**
     * @cfg {Number} growMin The minimum height to allow when {@link Ext.form.TextField#grow grow}=true
     * (defaults to 60)
     */
    growMin : 60,

/**
     * @cfg {Number} growMax The maximum height to allow when {@link Ext.form.TextField#grow grow}=true
     * (defaults to 1000)
     */
    growMax: 1000,
    growAppend : ' \n ',

    enterIsSpecial : false,

/**
     * @cfg {Boolean} preventScrollbars true to prevent scrollbars from appearing regardless of how much text is
     * in the field. This option is only relevant when {@link #grow} is true. Equivalent to setting overflow: hidden, defaults to
     * false.
     */
    preventScrollbars: false,

/**
     * @cfg {String/Object} autoCreate
A {@link Ext.DomHelper DomHelper} element spec, or true for a default
     * element spec. Used to create the {@link Ext.Component#getEl Element} which will encapsulate this Component.
     * See {@link Ext.Component#autoEl autoEl} for details.  Defaults to:

     *
{tag: "textarea", style: "width:100px;height:60px;", autocomplete: "off"}

     */

    // private
    onRender : function(ct, position){
        if(!this.el){
            this.defaultAutoCreate = {
                tag: "textarea",
                style:"width:100px;height:60px;",
                autocomplete: "off"
            };
        }
        Ext.form.TextArea.superclass.onRender.call(this, ct, position);
        if(this.grow){
            this.textSizeEl = Ext.DomHelper.append(document.body, {
                tag: "pre", cls: "x-form-grow-sizer"
            });
            if(this.preventScrollbars){
                this.el.setStyle("overflow", "hidden");
            }
            this.el.setHeight(this.growMin);
        }
    },

    onDestroy : function(){
        Ext.removeNode(this.textSizeEl);
        Ext.form.TextArea.superclass.onDestroy.call(this);
    },

    fireKey : function(e){
        if(e.isSpecialKey() && (this.enterIsSpecial || (e.getKey() != e.ENTER || e.hasModifier()))){
            this.fireEvent("specialkey", this, e);
        }
    },

    // private
    doAutoSize : function(e){
        return !e.isNavKeyPress() || e.getKey() == e.ENTER;
    },

/**
     * Automatically grows the field to accomodate the height of the text up to the maximum field height allowed.
     * This only takes effect if grow = true, and fires the {@link #autosize} event if the height changes.
     */
    autoSize: function(){
        if(!this.grow || !this.textSizeEl){
            return;
        }
        var el = this.el,
            v = Ext.util.Format.htmlEncode(el.dom.value),
            ts = this.textSizeEl,
            h;

        Ext.fly(ts).setWidth(this.el.getWidth());
        if(v.length < 1){
            v = "  ";
        }else{
            v += this.growAppend;
            if(Ext.isIE){
                v = v.replace(/\n/g, '
');
            }
        }
        ts.innerHTML = v;
        h = Math.min(this.growMax, Math.max(ts.offsetHeight, this.growMin));
        if(h != this.lastHeight){
            this.lastHeight = h;
            this.el.setHeight(h);
            this.fireEvent("autosize", this, h);
        }
    }
});
Ext.reg('textarea', Ext.form.TextArea);


The source code

/*!
 * licensing@extjs.com
 * http://www.extjs.com/license
 */

/**
 * @class Ext.form.TextField
 * @extends Ext.form.Field
 *
Basic text field.  Can be used as a direct replacement for traditional text inputs,
 * or as the base class for more sophisticated input controls (like {@link Ext.form.TextArea}
 * and {@link Ext.form.ComboBox}).

 *
Validation

 *
The validation procedure is described in the documentation for {@link #validateValue}.

 *
Alter Validation Behavior

 *
Validation behavior for each field can be configured:

 *

 *
  • {@link Ext.form.TextField#invalidText invalidText} : the default validation message to
 * show if any validation step above does not provide a message when invalid
    •
 *
  • {@link Ext.form.TextField#maskRe maskRe} : filter out keystrokes before any validation occurs
    •
 *
  • {@link Ext.form.TextField#stripCharsRe stripCharsRe} : filter characters after being typed in,
 * but before being validated
    •
 *
  • {@link Ext.form.Field#invalidClass invalidClass} : alternate style when invalid
    •
 *
  • {@link Ext.form.Field#validateOnBlur validateOnBlur},
 * {@link Ext.form.Field#validationDelay validationDelay}, and
 * {@link Ext.form.Field#validationEvent validationEvent} : modify how/when validation is triggered
    •
 *

 *
 * @constructor Creates a new TextField
 * @param {Object} config Configuration options
 *
 * @xtype textfield
 */
Ext.form.TextField = Ext.extend(Ext.form.Field,  {

/**
     * @cfg {String} vtypeText A custom error message to display in place of the default message provided
     * for the {@link #vtype} currently set for this field (defaults to '').  Note:
     * only applies if {@link #vtype} is set, else ignored.
     */

/**
     * @cfg {RegExp} stripCharsRe A JavaScript RegExp object used to strip unwanted content from the value
     * before validation (defaults to null).
     */

/**
     * @cfg {Boolean} grow true if this field should automatically grow and shrink to its content
     * (defaults to false)
     */
    grow : false,

/**
     * @cfg {Number} growMin The minimum width to allow when {@link #grow} = true (defaults
     * to 30)
     */
    growMin : 30,

/**
     * @cfg {Number} growMax The maximum width to allow when {@link #grow} = true (defaults
     * to 800)
     */
    growMax : 800,

/**
     * @cfg {String} vtype A validation type name as defined in {@link Ext.form.VTypes} (defaults to null)
     */
    vtype : null,

/**
     * @cfg {RegExp} maskRe An input mask regular expression that will be used to filter keystrokes that do
     * not match (defaults to null)
     */
    maskRe : null,

/**
     * @cfg {Boolean} disableKeyFilter Specify true to disable input keystroke filtering (defaults
     * to false)
     */
    disableKeyFilter : false,

/**
     * @cfg {Boolean} allowBlank Specify false to validate that the value's length is > 0 (defaults to
     * true)
     */
    allowBlank : true,

/**
     * @cfg {Number} minLength Minimum input field length required (defaults to 0)
     */
    minLength : 0,

/**
     * @cfg {Number} maxLength Maximum input field length allowed by validation (defaults to Number.MAX_VALUE).
     * This behavior is intended to provide instant feedback to the user by improving usability to allow pasting
     * and editing or overtyping and back tracking. To restrict the maximum number of characters that can be
     * entered into the field use {@link Ext.form.Field#autoCreate autoCreate} to add
     * any attributes you want to a field, for example:

var myField = new Ext.form.NumberField({
    id: 'mobile',
    anchor:'90%',
    fieldLabel: 'Mobile',
    maxLength: 16, // for validation
    autoCreate: {tag: 'input', type: 'text', size: '20', autocomplete: 'off', maxlength: '10'}
});

     */
    maxLength : Number.MAX_VALUE,

/**
     * @cfg {String} minLengthText Error text to display if the {@link #minLength minimum length}
     * validation fails (defaults to 'The minimum length for this field is {minLength}')
     */
    minLengthText : 'The minimum length for this field is {0}',

/**
     * @cfg {String} maxLengthText Error text to display if the {@link #maxLength maximum length}
     * validation fails (defaults to 'The maximum length for this field is {maxLength}')
     */
    maxLengthText : 'The maximum length for this field is {0}',

/**
     * @cfg {Boolean} selectOnFocus true to automatically select any existing field text when the field
     * receives input focus (defaults to false)
     */
    selectOnFocus : false,

/**
     * @cfg {String} blankText The error text to display if the {@link #allowBlank} validation
     * fails (defaults to 'This field is required')
     */
    blankText : 'This field is required',

/**
     * @cfg {Function} validator
     *
A custom validation function to be called during field validation ({@link #validateValue})
     * (defaults to null). If specified, this function will be called first, allowing the
     * developer to override the default validation process.

     *
This function will be passed the following Parameters:

     *

     *
  • value: Mixed
     *
    The current field value
    •
     *

     *
This function is to Return:

     *

     *
  • true: Boolean
     *
    true if the value is valid
    •
     *
  • msg: String
     *
    An error message if the value is invalid
    •
     *

     */
    validator : null,

/**
     * @cfg {RegExp} regex A JavaScript RegExp object to be tested against the field value during validation
     * (defaults to null). If the test fails, the field will be marked invalid using
     * {@link #regexText}.
     */
    regex : null,

/**
     * @cfg {String} regexText The error text to display if {@link #regex} is used and the
     * test fails during validation (defaults to '')
     */
    regexText : '',

/**
     * @cfg {String} emptyText The default text to place into an empty field (defaults to null).
     * Note: that this value will be submitted to the server if this field is enabled and configured
     * with a {@link #name}.
     */
    emptyText : null,

/**
     * @cfg {String} emptyClass The CSS class to apply to an empty field to style the {@link #emptyText}
     * (defaults to 'x-form-empty-field').  This class is automatically added and removed as needed
     * depending on the current field value.
     */
    emptyClass : 'x-form-empty-field',

/**
     * @cfg {Boolean} enableKeyEvents true to enable the proxying of key events for the HTML input
     * field (defaults to false)
     */

    initComponent : function(){
        Ext.form.TextField.superclass.initComponent.call(this);
        this.addEvents(

/**
             * @event autosize
             * Fires when the {@link #autoSize} function is triggered. The field may or
             * may not have actually changed size according to the default logic, but this event provides
             * a hook for the developer to apply additional logic at runtime to resize the field if needed.
             * @param {Ext.form.Field} this This text field
             * @param {Number} width The new field width
             */
            'autosize',

/**
             * @event keydown
             * Keydown input field event. This event only fires if {@link #enableKeyEvents}
             * is set to true.
             * @param {Ext.form.TextField} this This text field
             * @param {Ext.EventObject} e
             */
            'keydown',

/**
             * @event keyup
             * Keyup input field event. This event only fires if {@link #enableKeyEvents}
             * is set to true.
             * @param {Ext.form.TextField} this This text field
             * @param {Ext.EventObject} e
             */
            'keyup',

/**
             * @event keypress
             * Keypress input field event. This event only fires if {@link #enableKeyEvents}
             * is set to true.
             * @param {Ext.form.TextField} this This text field
             * @param {Ext.EventObject} e
             */
            'keypress'
        );
    },

    // private
    initEvents : function(){
        Ext.form.TextField.superclass.initEvents.call(this);
        if(this.validationEvent == 'keyup'){
            this.validationTask = new Ext.util.DelayedTask(this.validate, this);
            this.mon(this.el, 'keyup', this.filterValidation, this);
        }
        else if(this.validationEvent !== false && this.validationEvent != 'blur'){
            this.mon(this.el, this.validationEvent, this.validate, this, {buffer: this.validationDelay});
        }
        if(this.selectOnFocus || this.emptyText){
            this.mon(this.el, 'mousedown', this.onMouseDown, this);

            if(this.emptyText){
                this.applyEmptyText();
            }
        }
        if(this.maskRe || (this.vtype && this.disableKeyFilter !== true && (this.maskRe = Ext.form.VTypes[this.vtype+'Mask']))){
            this.mon(this.el, 'keypress', this.filterKeys, this);
        }
        if(this.grow){
            this.mon(this.el, 'keyup', this.onKeyUpBuffered, this, {buffer: 50});
            this.mon(this.el, 'click', this.autoSize, this);
        }
        if(this.enableKeyEvents){
            this.mon(this.el, {
                scope: this,
                keyup: this.onKeyUp,
                keydown: this.onKeyDown,
                keypress: this.onKeyPress
            });
        }
    },

    onMouseDown: function(e){
        if(!this.hasFocus){
            this.mon(this.el, 'mouseup', Ext.emptyFn, this, { single: true, preventDefault: true });
        }
    },

    processValue : function(value){
        if(this.stripCharsRe){
            var newValue = value.replace(this.stripCharsRe, '');
            if(newValue !== value){
                this.setRawValue(newValue);
                return newValue;
            }
        }
        return value;
    },

    filterValidation : function(e){
        if(!e.isNavKeyPress()){
            this.validationTask.delay(this.validationDelay);
        }
    },

    //private
    onDisable: function(){
        Ext.form.TextField.superclass.onDisable.call(this);
        if(Ext.isIE){
            this.el.dom.unselectable = 'on';
        }
    },

    //private
    onEnable: function(){
        Ext.form.TextField.superclass.onEnable.call(this);
        if(Ext.isIE){
            this.el.dom.unselectable = '';
        }
    },

    // private
    onKeyUpBuffered : function(e){
        if(this.doAutoSize(e)){
            this.autoSize();
        }
    },

    // private
    doAutoSize : function(e){
        return !e.isNavKeyPress();
    },

    // private
    onKeyUp : function(e){
        this.fireEvent('keyup', this, e);
    },

    // private
    onKeyDown : function(e){
        this.fireEvent('keydown', this, e);
    },

    // private
    onKeyPress : function(e){
        this.fireEvent('keypress', this, e);
    },

/**
     * Resets the current field value to the originally-loaded value and clears any validation messages.
     * Also adds {@link #emptyText} and {@link #emptyClass} if the
     * original value was blank.
     */
    reset : function(){
        Ext.form.TextField.superclass.reset.call(this);
        this.applyEmptyText();
    },

    applyEmptyText : function(){
        if(this.rendered && this.emptyText && this.getRawValue().length < 1 && !this.hasFocus){
            this.setRawValue(this.emptyText);
            this.el.addClass(this.emptyClass);
        }
    },

    // private
    preFocus : function(){
        var el = this.el;
        if(this.emptyText){
            if(el.dom.value == this.emptyText){
                this.setRawValue('');
            }
            el.removeClass(this.emptyClass);
        }
        if(this.selectOnFocus){
            el.dom.select();
        }
    },

    // private
    postBlur : function(){
        this.applyEmptyText();
    },

    // private
    filterKeys : function(e){
        if(e.ctrlKey){
            return;
        }
        var k = e.getKey();
        if(Ext.isGecko && (e.isNavKeyPress() || k == e.BACKSPACE || (k == e.DELETE && e.button == -1))){
            return;
        }
        var cc = String.fromCharCode(e.getCharCode());
        if(!Ext.isGecko && e.isSpecialKey() && !cc){
            return;
        }
        if(!this.maskRe.test(cc)){
            e.stopEvent();
        }
    },

    setValue : function(v){
        if(this.emptyText && this.el && !Ext.isEmpty(v)){
            this.el.removeClass(this.emptyClass);
        }
        Ext.form.TextField.superclass.setValue.apply(this, arguments);
        this.applyEmptyText();
        this.autoSize();
        return this;
    },

/**
     *
Validates a value according to the field's validation rules and returns an array of errors
     * for any failing validations. Validation rules are processed in the following order:

     *

     *
     *
  • 1. Field specific validator
     *

     *
    A validator offers a way to customize and reuse a validation specification.
     * If a field is configured with a {@link #validator}
     * function, it will be passed the current field value.  The {@link #validator}
     * function is expected to return either:
     *

     *
    • Boolean true if the value is valid (validation continues).
      •
     *
    • a String to represent the invalid message if invalid (validation halts).
      •
     *

     *
    •
     *
     *
  • 2. Basic Validation
     *

     *
    If the {@link #validator} has not halted validation,
     * basic validation proceeds as follows:

     *
     *

     *
     *
    • {@link #allowBlank} : (Invalid message =
     * {@link #emptyText})

     * Depending on the configuration of {@link #allowBlank}, a
     * blank field will cause validation to halt at this step and return
     * Boolean true or false accordingly.
     *
      •
     *
     *
    • {@link #minLength} : (Invalid message =
     * {@link #minLengthText})

     * If the passed value does not satisfy the {@link #minLength}
     * specified, validation halts.
     *
      •
     *
     *
    • {@link #maxLength} : (Invalid message =
     * {@link #maxLengthText})

     * If the passed value does not satisfy the {@link #maxLength}
     * specified, validation halts.
     *
      •
     *
     *

     *
    •
     *
     *
  • 3. Preconfigured Validation Types (VTypes)
     *

     *
    If none of the prior validation steps halts validation, a field
     * configured with a {@link #vtype} will utilize the
     * corresponding {@link Ext.form.VTypes VTypes} validation function.
     * If invalid, either the field's {@link #vtypeText} or
     * the VTypes vtype Text property will be used for the invalid message.
     * Keystrokes on the field will be filtered according to the VTypes
     * vtype Mask property.

     *
    •
     *
     *
  • 4. Field specific regex test
     *

     *
    If none of the prior validation steps halts validation, a field's
     * configured {@link #regex} test will be processed.
     * The invalid message for this test is configured with
     * {@link #regexText}.

     *
    •
     *
     * @param {Mixed} value The value to validate. The processed raw value will be used if nothing is passed
     * @return {Array} Array of any validation errors
     */
    getErrors: function(value) {
        var errors = Ext.form.TextField.superclass.getErrors.apply(this, arguments);

        value = value || this.processValue(this.getRawValue());

        if(Ext.isFunction(this.validator)){
            var msg = this.validator(value);
            if (msg !== true) {
                errors.push(msg);
            }
        }

        if (!this.allowBlank && (value.length < 1 || value === this.emptyText)) { // if it's blank
            errors.push(this.blankText);
        }

        if (value.length < this.minLength) {
            errors.push(String.format(this.minLengthText, this.minLength));
        }

        if (value.length > this.maxLength) {
            errors.push(String.format(this.maxLengthText, this.maxLength));
        }

        if (this.vtype) {
            var vt = Ext.form.VTypes;
            if(!vt[this.vtype](value, this)){
                errors.push(this.vtypeText || vt[this.vtype +'Text']);
            }
        }

        if (this.regex && !this.regex.test(value)) {
            errors.push(this.regexText);
        }

        return errors;
    },

    /**
     * Selects text in this field
     * @param {Number} start (optional) The index where the selection should start (defaults to 0)
     * @param {Number} end (optional) The index where the selection should end (defaults to the text length)
     */
    selectText : function(start, end){
        var v = this.getRawValue();
        var doFocus = false;
        if(v.length > 0){
            start = start === undefined ? 0 : start;
            end = end === undefined ? v.length : end;
            var d = this.el.dom;
            if(d.setSelectionRange){
                d.setSelectionRange(start, end);
            }else if(d.createTextRange){
                var range = d.createTextRange();
                range.moveStart('character', start);
                range.moveEnd('character', end-v.length);
                range.select();
            }
            doFocus = Ext.isGecko || Ext.isOpera;
        }else{
            doFocus = true;
        }
        if(doFocus){
            this.focus();
        }
    },

    /**
     * Automatically grows the field to accomodate the width of the text up to the maximum field width allowed.
     * This only takes effect if {@link #grow} = true, and fires the {@link #autosize} event.
     */
    autoSize : function(){
        if(!this.grow || !this.rendered){
            return;
        }
        if(!this.metrics){
            this.metrics = Ext.util.TextMetrics.createInstance(this.el);
        }
        var el = this.el;
        var v = el.dom.value;
        var d = document.createElement('div');
        d.appendChild(document.createTextNode(v));
        v = d.innerHTML;
        Ext.removeNode(d);
        d = null;
        v += ' ';
        var w = Math.min(this.growMax, Math.max(this.metrics.getWidth(v) + /* add extra padding */ 10, this.growMin));
        this.el.setWidth(w);
        this.fireEvent('autosize', this, w);
    },

    onDestroy: function(){
        if(this.validationTask){
            this.validationTask.cancel();
            this.validationTask = null;
        }
        Ext.form.TextField.superclass.onDestroy.call(this);
    }
});
Ext.reg('textfield', Ext.form.TextField);


The source code

/*!
 * licensing@extjs.com
 * http://www.extjs.com/license
 */

/**
 * @class Ext.menu.TextItem
 * @extends Ext.menu.BaseItem
 * Adds a static text string to a menu, usually used as either a heading or group separator.
 * @constructor
 * Creates a new TextItem
 * @param {Object/String} config If config is a string, it is used as the text to display, otherwise it
 * is applied as a config object (and should contain a text property).
 * @xtype menutextitem
 */
Ext.menu.TextItem = Ext.extend(Ext.menu.BaseItem, {

/**
     * @cfg {String} text The text to display for this item (defaults to '')
     */

/**
     * @cfg {Boolean} hideOnClick True to hide the containing menu after this item is clicked (defaults to false)
     */
    hideOnClick : false,

/**
     * @cfg {String} itemCls The default CSS class to use for text items (defaults to "x-menu-text")
     */
    itemCls : "x-menu-text",

    constructor : function(config){
        if(typeof config == 'string'){
            config = {text: config}
        }
        Ext.menu.TextItem.superclass.constructor.call(this, config);
    },

    // private
    onRender : function(){
        var s = document.createElement("span");
        s.className = this.itemCls;
        s.innerHTML = this.text;
        this.el = s;
        Ext.menu.TextItem.superclass.onRender.apply(this, arguments);
    }
});
Ext.reg('menutextitem', Ext.menu.TextItem);


The source code

/*!
 * licensing@extjs.com
 * http://www.extjs.com/license
 */

/**
 * @class Ext.util.TextMetrics
 * Provides precise pixel measurements for blocks of text so that you can determine exactly how high and
 * wide, in pixels, a given block of text will be. Note that when measuring text, it should be plain text and
 * should not contain any HTML, otherwise it may not be measured correctly.
 * @singleton
 */
Ext.util.TextMetrics = function(){
    var shared;
    return {

/**
         * Measures the size of the specified text
         * @param {String/HTMLElement} el The element, dom node or id from which to copy existing CSS styles
         * that can affect the size of the rendered text
         * @param {String} text The text to measure
         * @param {Number} fixedWidth (optional) If the text will be multiline, you have to set a fixed width
         * in order to accurately measure the text height
         * @return {Object} An object containing the text's size {width: (width), height: (height)}
         */
        measure : function(el, text, fixedWidth){
            if(!shared){
                shared = Ext.util.TextMetrics.Instance(el, fixedWidth);
            }
            shared.bind(el);
            shared.setFixedWidth(fixedWidth || 'auto');
            return shared.getSize(text);
        },

/**
         * Return a unique TextMetrics instance that can be bound directly to an element and reused.  This reduces
         * the overhead of multiple calls to initialize the style properties on each measurement.
         * @param {String/HTMLElement} el The element, dom node or id that the instance will be bound to
         * @param {Number} fixedWidth (optional) If the text will be multiline, you have to set a fixed width
         * in order to accurately measure the text height
         * @return {Ext.util.TextMetrics.Instance} instance The new instance
         */
        createInstance : function(el, fixedWidth){
            return Ext.util.TextMetrics.Instance(el, fixedWidth);
        }
    };
}();

Ext.util.TextMetrics.Instance = function(bindTo, fixedWidth){
    var ml = new Ext.Element(document.createElement('div'));
    document.body.appendChild(ml.dom);
    ml.position('absolute');
    ml.setLeftTop(-1000, -1000);
    ml.hide();

    if(fixedWidth){
        ml.setWidth(fixedWidth);
    }

    var instance = {

/**
         *
Only available on the instance returned from {@link #createInstance}, not on the singleton.

         * Returns the size of the specified text based on the internal element's style and width properties
         * @param {String} text The text to measure
         * @return {Object} An object containing the text's size {width: (width), height: (height)}
         */
        getSize : function(text){
            ml.update(text);
            var s = ml.getSize();
            ml.update('');
            return s;
        },

/**
         *
Only available on the instance returned from {@link #createInstance}, not on the singleton.

         * Binds this TextMetrics instance to an element from which to copy existing CSS styles
         * that can affect the size of the rendered text
         * @param {String/HTMLElement} el The element, dom node or id
         */
        bind : function(el){
            ml.setStyle(
                Ext.fly(el).getStyles('font-size','font-style', 'font-weight', 'font-family','line-height', 'text-transform', 'letter-spacing')
            );
        },

/**
         *
Only available on the instance returned from {@link #createInstance}, not on the singleton.

         * Sets a fixed width on the internal measurement element.  If the text will be multiline, you have
         * to set a fixed width in order to accurately measure the text height.
         * @param {Number} width The width to set on the element
         */
        setFixedWidth : function(width){
            ml.setWidth(width);
        },

/**
         *
Only available on the instance returned from {@link #createInstance}, not on the singleton.

         * Returns the measured width of the specified text
         * @param {String} text The text to measure
         * @return {Number} width The width in pixels
         */
        getWidth : function(text){
            ml.dom.style.width = 'auto';
            return this.getSize(text).width;
        },

/**
         *
Only available on the instance returned from {@link #createInstance}, not on the singleton.

         * Returns the measured height of the specified text.  For multiline text, be sure to call
         * {@link #setFixedWidth} if necessary.
         * @param {String} text The text to measure
         * @return {Number} height The height in pixels
         */
        getHeight : function(text){
            return this.getSize(text).height;
        }
    };

    instance.bind(bindTo);

    return instance;
};

Ext.Element.addMethods({

/**
     * Returns the width in pixels of the passed text, or the width of the text in this Element.
     * @param {String} text The text to measure. Defaults to the innerHTML of the element.
     * @param {Number} min (Optional) The minumum value to return.
     * @param {Number} max (Optional) The maximum value to return.
     * @return {Number} The text width in pixels.
     * @member Ext.Element getTextWidth
     */
    getTextWidth : function(text, min, max){
        return (Ext.util.TextMetrics.measure(this.dom, Ext.value(text, this.dom.innerHTML, true)).width).constrain(min || 0, max || 1000000);
    }
});


The source code

/*!
 * licensing@extjs.com
 * http://www.extjs.com/license
 */

/**
 * @class Ext.form.TimeField
 * @extends Ext.form.ComboBox
 * Provides a time input field with a time dropdown and automatic time validation.  Example usage:
 *

new Ext.form.TimeField({
    minValue: '9:00 AM',
    maxValue: '6:00 PM',
    increment: 30
});

 * @constructor
 * Create a new TimeField
 * @param {Object} config
 * @xtype timefield
 */
Ext.form.TimeField = Ext.extend(Ext.form.ComboBox, {

/**
     * @cfg {Date/String} minValue
     * The minimum allowed time. Can be either a Javascript date object with a valid time value or a string
     * time in a valid format -- see {@link #format} and {@link #altFormats} (defaults to undefined).
     */
    minValue : undefined,

/**
     * @cfg {Date/String} maxValue
     * The maximum allowed time. Can be either a Javascript date object with a valid time value or a string
     * time in a valid format -- see {@link #format} and {@link #altFormats} (defaults to undefined).
     */
    maxValue : undefined,

/**
     * @cfg {String} minText
     * The error text to display when the date in the cell is before minValue (defaults to
     * 'The time in this field must be equal to or after {0}').
     */
    minText : "The time in this field must be equal to or after {0}",

/**
     * @cfg {String} maxText
     * The error text to display when the time is after maxValue (defaults to
     * 'The time in this field must be equal to or before {0}').
     */
    maxText : "The time in this field must be equal to or before {0}",

/**
     * @cfg {String} invalidText
     * The error text to display when the time in the field is invalid (defaults to
     * '{value} is not a valid time').
     */
    invalidText : "{0} is not a valid time",

/**
     * @cfg {String} format
     * The default time format string which can be overriden for localization support.  The format must be
     * valid according to {@link Date#parseDate} (defaults to 'g:i A', e.g., '3:15 PM').  For 24-hour time
     * format try 'H:i' instead.
     */
    format : "g:i A",

/**
     * @cfg {String} altFormats
     * Multiple date formats separated by "|" to try when parsing a user input value and it doesn't match the defined
     * format (defaults to 'g:ia|g:iA|g:i a|g:i A|h:i|g:i|H:i|ga|ha|gA|h a|g a|g A|gi|hi|gia|hia|g|H|gi a|hi a|giA|hiA|gi A|hi A').
     */
    altFormats : "g:ia|g:iA|g:i a|g:i A|h:i|g:i|H:i|ga|ha|gA|h a|g a|g A|gi|hi|gia|hia|g|H|gi a|hi a|giA|hiA|gi A|hi A",

/**
     * @cfg {Number} increment
     * The number of minutes between each time value in the list (defaults to 15).
     */
    increment: 15,

    // private override
    mode: 'local',
    // private override
    triggerAction: 'all',
    // private override
    typeAhead: false,

    // private - This is the date to use when generating time values in the absence of either minValue
    // or maxValue.  Using the current date causes DST issues on DST boundary dates, so this is an
    // arbitrary "safe" date that can be any date aside from DST boundary dates.
    initDate: '1/1/2008',

    initDateFormat: 'j/n/Y',

    // private
    initComponent : function(){
        if(Ext.isDefined(this.minValue)){
            this.setMinValue(this.minValue, true);
        }
        if(Ext.isDefined(this.maxValue)){
            this.setMaxValue(this.maxValue, true);
        }
        if(!this.store){
            this.generateStore(true);
        }
        Ext.form.TimeField.superclass.initComponent.call(this);
    },

/**
     * Replaces any existing {@link #minValue} with the new time and refreshes the store.
     * @param {Date/String} value The minimum time that can be selected
     */
    setMinValue: function(value, /* private */ initial){
        this.setLimit(value, true, initial);
        return this;
    },

/**
     * Replaces any existing {@link #maxValue} with the new time and refreshes the store.
     * @param {Date/String} value The maximum time that can be selected
     */
    setMaxValue: function(value, /* private */ initial){
        this.setLimit(value, false, initial);
        return this;
    },

    // private
    generateStore: function(initial){
        var min = this.minValue || new Date(this.initDate).clearTime(),
            max = this.maxValue || new Date(this.initDate).clearTime().add('mi', (24 * 60) - 1),
            times = [];

        while(min <= max){
            times.push(min.dateFormat(this.format));
            min = min.add('mi', this.increment);
        }
        this.bindStore(times, initial);
    },

    // private
    setLimit: function(value, isMin, initial){
        var d;
        if(Ext.isString(value)){
            d = this.parseDate(value);
        }else if(Ext.isDate(value)){
            d = value;
        }
        if(d){
            var val = new Date(this.initDate).clearTime();
            val.setHours(d.getHours(), d.getMinutes(), d.getSeconds(), d.getMilliseconds());
            this[isMin ? 'minValue' : 'maxValue'] = val;
            if(!initial){
                this.generateStore();
            }
        }
    },

    // inherited docs
    getValue : function(){
        var v = Ext.form.TimeField.superclass.getValue.call(this);
        return this.formatDate(this.parseDate(v)) || '';
    },

    // inherited docs
    setValue : function(value){
        return Ext.form.TimeField.superclass.setValue.call(this, this.formatDate(this.parseDate(value)));
    },

    // private overrides
    validateValue : Ext.form.DateField.prototype.validateValue,

    formatDate : Ext.form.DateField.prototype.formatDate,

    parseDate: function(value) {
        if (!value || Ext.isDate(value)) {
            return value;
        }

        var id = this.initDate + ' ',
            idf = this.initDateFormat + ' ',
            v = Date.parseDate(id + value, idf + this.format), // *** handle DST. note: this.format is a TIME-only format
            af = this.altFormats;

        if (!v && af) {
            if (!this.altFormatsArray) {
                this.altFormatsArray = af.split("|");
            }
            for (var i = 0, afa = this.altFormatsArray, len = afa.length; i < len && !v; i++) {
                v = Date.parseDate(id + value, idf + afa[i]);
            }
        }

        return v;
    }
});
Ext.reg('timefield', Ext.form.TimeField);


The source code

/*!
 * licensing@extjs.com
 * http://www.extjs.com/license
 */

/**
 * @class Ext.Tip
 * @extends Ext.Panel
 * @xtype tip
 * This is the base class for {@link Ext.QuickTip} and {@link Ext.Tooltip} that provides the basic layout and
 * positioning that all tip-based classes require. This class can be used directly for simple, statically-positioned
 * tips that are displayed programmatically, or it can be extended to provide custom tip implementations.
 * @constructor
 * Create a new Tip
 * @param {Object} config The configuration options
 */
Ext.Tip = Ext.extend(Ext.Panel, {

/**
     * @cfg {Boolean} closable True to render a close tool button into the tooltip header (defaults to false).
     */

/**
     * @cfg {Number} width
     * Width in pixels of the tip (defaults to auto).  Width will be ignored if it exceeds the bounds of
     * {@link #minWidth} or {@link #maxWidth}.  The maximum supported value is 500.
     */

/**
     * @cfg {Number} minWidth The minimum width of the tip in pixels (defaults to 40).
     */
    minWidth : 40,

/**
     * @cfg {Number} maxWidth The maximum width of the tip in pixels (defaults to 300).  The maximum supported value is 500.
     */
    maxWidth : 300,

/**
     * @cfg {Boolean/String} shadow True or "sides" for the default effect, "frame" for 4-way shadow, and "drop"
     * for bottom-right shadow (defaults to "sides").
     */
    shadow : "sides",

/**
     * @cfg {String} defaultAlign Experimental. The default {@link Ext.Element#alignTo} anchor position value
     * for this tip relative to its element of origin (defaults to "tl-bl?").
     */
    defaultAlign : "tl-bl?",
    autoRender: true,
    quickShowInterval : 250,

    // private panel overrides
    frame:true,
    hidden:true,
    baseCls: 'x-tip',
    floating:{shadow:true,shim:true,useDisplay:true,constrain:false},
    autoHeight:true,

    closeAction: 'hide',

    // private
    initComponent : function(){
        Ext.Tip.superclass.initComponent.call(this);
        if(this.closable && !this.title){
            this.elements += ',header';
        }
    },

    // private
    afterRender : function(){
        Ext.Tip.superclass.afterRender.call(this);
        if(this.closable){
            this.addTool({
                id: 'close',
                handler: this[this.closeAction],
                scope: this
            });
        }
    },

/**
     * Shows this tip at the specified XY position.  Example usage:
     *

// Show the tip at x:50 and y:100
tip.showAt([50,100]);

     * @param {Array} xy An array containing the x and y coordinates
     */
    showAt : function(xy){
        Ext.Tip.superclass.show.call(this);
        if(this.measureWidth !== false && (!this.initialConfig || typeof this.initialConfig.width != 'number')){
            this.doAutoWidth();
        }
        if(this.constrainPosition){
            xy = this.el.adjustForConstraints(xy);
        }
        this.setPagePosition(xy[0], xy[1]);
    },

    // protected
    doAutoWidth : function(adjust){
        adjust = adjust || 0;
        var bw = this.body.getTextWidth();
        if(this.title){
            bw = Math.max(bw, this.header.child('span').getTextWidth(this.title));
        }
        bw += this.getFrameWidth() + (this.closable ? 20 : 0) + this.body.getPadding("lr") + adjust;
        this.setWidth(bw.constrain(this.minWidth, this.maxWidth));

        // IE7 repaint bug on initial show
        if(Ext.isIE7 && !this.repainted){
            this.el.repaint();
            this.repainted = true;
        }
    },

/**
     * Experimental. Shows this tip at a position relative to another element using a standard {@link Ext.Element#alignTo}
     * anchor position value.  Example usage:
     *

// Show the tip at the default position ('tl-br?')
tip.showBy('my-el');

// Show the tip's top-left corner anchored to the element's top-right corner
tip.showBy('my-el', 'tl-tr');

     * @param {Mixed} el An HTMLElement, Ext.Element or string id of the target element to align to
     * @param {String} position (optional) A valid {@link Ext.Element#alignTo} anchor position (defaults to 'tl-br?' or
     * {@link #defaultAlign} if specified).
     */
    showBy : function(el, pos){
        if(!this.rendered){
            this.render(Ext.getBody());
        }
        this.showAt(this.el.getAlignToXY(el, pos || this.defaultAlign));
    },

    initDraggable : function(){
        this.dd = new Ext.Tip.DD(this, typeof this.draggable == 'boolean' ? null : this.draggable);
        this.header.addClass('x-tip-draggable');
    }
});

Ext.reg('tip', Ext.Tip);

// private - custom Tip DD implementation
Ext.Tip.DD = function(tip, config){
    Ext.apply(this, config);
    this.tip = tip;
    Ext.Tip.DD.superclass.constructor.call(this, tip.el.id, 'WindowDD-'+tip.id);
    this.setHandleElId(tip.header.id);
    this.scroll = false;
};

Ext.extend(Ext.Tip.DD, Ext.dd.DD, {
    moveOnly:true,
    scroll:false,
    headerOffsets:[100, 25],
    startDrag : function(){
        this.tip.el.disableShadow();
    },
    endDrag : function(e){
        this.tip.el.enableShadow(true);
    }
});


The source code

/*!
 * licensing@extjs.com
 * http://www.extjs.com/license
 */

/**
 * @class Ext.Toolbar
 * @extends Ext.Container
 *
Basic Toolbar class. Although the {@link Ext.Container#defaultType defaultType} for Toolbar
 * is {@link Ext.Button button}, Toolbar elements (child items for the Toolbar container) may
 * be virtually any type of Component. Toolbar elements can be created explicitly via their constructors,
 * or implicitly via their xtypes, and can be {@link #add}ed dynamically.

 *
Some items have shortcut strings for creation:

 *
Shortcut  xtype          Class                  Description
'->'      'tbfill'       {@link Ext.Toolbar.Fill}       begin using the right-justified button container
'-'       'tbseparator'  {@link Ext.Toolbar.Separator}  add a vertical separator bar between toolbar items
' '       'tbspacer'     {@link Ext.Toolbar.Spacer}     add horiztonal space between elements
 *

 *
 * Example usage of various elements:
 *

var tb = new Ext.Toolbar({
    renderTo: document.body,
    width: 600,
    height: 100,
    items: [
        {
            // xtype: 'button', // default for Toolbars, same as 'tbbutton'
            text: 'Button'
        },
        {
            xtype: 'splitbutton', // same as 'tbsplitbutton'
            text: 'Split Button'
        },
        // begin using the right-justified button container
        '->', // same as {xtype: 'tbfill'}, // Ext.Toolbar.Fill
        {
            xtype: 'textfield',
            name: 'field1',
            emptyText: 'enter search term'
        },
        // add a vertical separator bar between toolbar items
        '-', // same as {xtype: 'tbseparator'} to create Ext.Toolbar.Separator
        'text 1', // same as {xtype: 'tbtext', text: 'text1'} to create Ext.Toolbar.TextItem
        {xtype: 'tbspacer'},// same as ' ' to create Ext.Toolbar.Spacer
        'text 2',
        {xtype: 'tbspacer', width: 50}, // add a 50px space
        'text 3'
    ]
});
 *

 * Example adding a ComboBox within a menu of a button:
 *

// ComboBox creation
var combo = new Ext.form.ComboBox({
    store: new Ext.data.ArrayStore({
        autoDestroy: true,
        fields: ['initials', 'fullname'],
        data : [
            ['FF', 'Fred Flintstone'],
            ['BR', 'Barney Rubble']
        ]
    }),
    displayField: 'fullname',
    typeAhead: true,
    mode: 'local',
    forceSelection: true,
    triggerAction: 'all',
    emptyText: 'Select a name...',
    selectOnFocus: true,
    width: 135,
    getListParent: function() {
        return this.el.up('.x-menu');
    },
    iconCls: 'no-icon' //use iconCls if placing within menu to shift to right side of menu
});

// put ComboBox in a Menu
var menu = new Ext.menu.Menu({
    id: 'mainMenu',
    items: [
        combo // A Field in a Menu
    ]
});

// add a Button with the menu
tb.add({
        text:'Button w/ Menu',
        menu: menu  // assign menu by instance
    });
tb.doLayout();
 *

 * @constructor
 * Creates a new Toolbar
 * @param {Object/Array} config A config object or an array of buttons to {@link #add}
 * @xtype toolbar
 */
Ext.Toolbar = function(config){
    if(Ext.isArray(config)){
        config = {items: config, layout: 'toolbar'};
    } else {
        config = Ext.apply({
            layout: 'toolbar'
        }, config);
        if(config.buttons) {
            config.items = config.buttons;
        }
    }
    Ext.Toolbar.superclass.constructor.call(this, config);
};

(function(){

var T = Ext.Toolbar;

Ext.extend(T, Ext.Container, {

    defaultType: 'button',

/**
     * @cfg {String/Object} layout
     * This class assigns a default layout (layout:'toolbar').
     * Developers may override this configuration option if another layout
     * is required (the constructor must be passed a configuration object in this
     * case instead of an array).
     * See {@link Ext.Container#layout} for additional information.
     */

    enableOverflow : false,

/**
     * @cfg {Boolean} enableOverflow
     * Defaults to false. Configure true to make the toolbar provide a button
     * which activates a dropdown Menu to show items which overflow the Toolbar's width.
     */

/**
     * @cfg {String} buttonAlign
     *
The default position at which to align child items. Defaults to "left"

     *
May be specified as "center" to cause items added before a Fill (A "->") item
     * to be centered in the Toolbar. Items added after a Fill are still right-aligned.

     *
Specify as "right" to right align all child items.

     */

    trackMenus : true,
    internalDefaults: {removeMode: 'container', hideParent: true},
    toolbarCls: 'x-toolbar',

    initComponent : function(){
        T.superclass.initComponent.call(this);

/**
         * @event overflowchange
         * Fires after the overflow state has changed.
         * @param {Object} c The Container
         * @param {Boolean} lastOverflow overflow state
         */
        this.addEvents('overflowchange');
    },

    // private
    onRender : function(ct, position){
        if(!this.el){
            if(!this.autoCreate){
                this.autoCreate = {
                    cls: this.toolbarCls + ' x-small-editor'
                };
            }
            this.el = ct.createChild(Ext.apply({ id: this.id },this.autoCreate), position);
            Ext.Toolbar.superclass.onRender.apply(this, arguments);
        }
    },

/**
     *
Adds element(s) to the toolbar -- this function takes a variable number of
     * arguments of mixed type and adds them to the toolbar.

     *
Note: See the notes within {@link Ext.Container#add}.

     * @param {Mixed} arg1 The following types of arguments are all valid:

     *

     *
  • {@link Ext.Button} config: A valid button config object (equivalent to {@link #addButton})
    •
     *
  • HtmlElement: Any standard HTML element (equivalent to {@link #addElement})
    •
     *
  • Field: Any form field (equivalent to {@link #addField})
    •
     *
  • Item: Any subclass of {@link Ext.Toolbar.Item} (equivalent to {@link #addItem})
    •
     *
  • String: Any generic string (gets wrapped in a {@link Ext.Toolbar.TextItem}, equivalent to {@link #addText}).
     * Note that there are a few special strings that are treated differently as explained next.
    •
     *
  • '-': Creates a separator element (equivalent to {@link #addSeparator})
    •
     *
  • ' ': Creates a spacer element (equivalent to {@link #addSpacer})
    •
     *
  • '->': Creates a fill element (equivalent to {@link #addFill})
    •
     *

     * @param {Mixed} arg2
     * @param {Mixed} etc.
     * @method add
     */

    // private
    lookupComponent : function(c){
        if(Ext.isString(c)){
            if(c == '-'){
                c = new T.Separator();
            }else if(c == ' '){
                c = new T.Spacer();
            }else if(c == '->'){
                c = new T.Fill();
            }else{
                c = new T.TextItem(c);
            }
            this.applyDefaults(c);
        }else{
            if(c.isFormField || c.render){ // some kind of form field, some kind of Toolbar.Item
                c = this.createComponent(c);
            }else if(c.tag){ // DomHelper spec
                c = new T.Item({autoEl: c});
            }else if(c.tagName){ // element
                c = new T.Item({el:c});
            }else if(Ext.isObject(c)){ // must be button config?
                c = c.xtype ? this.createComponent(c) : this.constructButton(c);
            }
        }
        return c;
    },

    // private
    applyDefaults : function(c){
        if(!Ext.isString(c)){
            c = Ext.Toolbar.superclass.applyDefaults.call(this, c);
            var d = this.internalDefaults;
            if(c.events){
                Ext.applyIf(c.initialConfig, d);
                Ext.apply(c, d);
            }else{
                Ext.applyIf(c, d);
            }
        }
        return c;
    },

/**
     * Adds a separator
     *
Note: See the notes within {@link Ext.Container#add}.

     * @return {Ext.Toolbar.Item} The separator {@link Ext.Toolbar.Item item}
     */
    addSeparator : function(){
        return this.add(new T.Separator());
    },

/**
     * Adds a spacer element
     *
Note: See the notes within {@link Ext.Container#add}.

     * @return {Ext.Toolbar.Spacer} The spacer item
     */
    addSpacer : function(){
        return this.add(new T.Spacer());
    },

/**
     * Forces subsequent additions into the float:right toolbar
     *
Note: See the notes within {@link Ext.Container#add}.

     */
    addFill : function(){
        this.add(new T.Fill());
    },

/**
     * Adds any standard HTML element to the toolbar
     *
Note: See the notes within {@link Ext.Container#add}.

     * @param {Mixed} el The element or id of the element to add
     * @return {Ext.Toolbar.Item} The element's item
     */
    addElement : function(el){
        return this.addItem(new T.Item({el:el}));
    },

/**
     * Adds any Toolbar.Item or subclass
     *
Note: See the notes within {@link Ext.Container#add}.

     * @param {Ext.Toolbar.Item} item
     * @return {Ext.Toolbar.Item} The item
     */
    addItem : function(item){
        return this.add.apply(this, arguments);
    },

/**
     * Adds a button (or buttons). See {@link Ext.Button} for more info on the config.
     *
Note: See the notes within {@link Ext.Container#add}.

     * @param {Object/Array} config A button config or array of configs
     * @return {Ext.Button/Array}
     */
    addButton : function(config){
        if(Ext.isArray(config)){
            var buttons = [];
            for(var i = 0, len = config.length; i < len; i++) {
                buttons.push(this.addButton(config[i]));
            }
            return buttons;
        }
        return this.add(this.constructButton(config));
    },

/**
     * Adds text to the toolbar
     *
Note: See the notes within {@link Ext.Container#add}.

     * @param {String} text The text to add
     * @return {Ext.Toolbar.Item} The element's item
     */
    addText : function(text){
        return this.addItem(new T.TextItem(text));
    },

/**
     * Adds a new element to the toolbar from the passed {@link Ext.DomHelper} config
     *
Note: See the notes within {@link Ext.Container#add}.

     * @param {Object} config
     * @return {Ext.Toolbar.Item} The element's item
     */
    addDom : function(config){
        return this.add(new T.Item({autoEl: config}));
    },

/**
     * Adds a dynamically rendered Ext.form field (TextField, ComboBox, etc). Note: the field should not have
     * been rendered yet. For a field that has already been rendered, use {@link #addElement}.
     *
Note: See the notes within {@link Ext.Container#add}.

     * @param {Ext.form.Field} field
     * @return {Ext.Toolbar.Item}
     */
    addField : function(field){
        return this.add(field);
    },

/**
     * Inserts any {@link Ext.Toolbar.Item}/{@link Ext.Button} at the specified index.
     *
Note: See the notes within {@link Ext.Container#add}.

     * @param {Number} index The index where the item is to be inserted
     * @param {Object/Ext.Toolbar.Item/Ext.Button/Array} item The button, or button config object to be
     * inserted, or an array of buttons/configs.
     * @return {Ext.Button/Item}
     */
    insertButton : function(index, item){
        if(Ext.isArray(item)){
            var buttons = [];
            for(var i = 0, len = item.length; i < len; i++) {
               buttons.push(this.insertButton(index + i, item[i]));
            }
            return buttons;
        }
        return Ext.Toolbar.superclass.insert.call(this, index, item);
    },

    // private
    trackMenu : function(item, remove){
        if(this.trackMenus && item.menu){
            var method = remove ? 'mun' : 'mon';
            this[method](item, 'menutriggerover', this.onButtonTriggerOver, this);
            this[method](item, 'menushow', this.onButtonMenuShow, this);
            this[method](item, 'menuhide', this.onButtonMenuHide, this);
        }
    },

    // private
    constructButton : function(item){
        var b = item.events ? item : this.createComponent(item, item.split ? 'splitbutton' : this.defaultType);
        return b;
    },

    // private
    onAdd : function(c){
        Ext.Toolbar.superclass.onAdd.call(this);
        this.trackMenu(c);
        if(this.disabled){
            c.disable();
        }
    },

    // private
    onRemove : function(c){
        Ext.Toolbar.superclass.onRemove.call(this);
        this.trackMenu(c, true);
    },

    // private
    onDisable : function(){
        this.items.each(function(item){
             if(item.disable){
                 item.disable();
             }
        });
    },

    // private
    onEnable : function(){
        this.items.each(function(item){
             if(item.enable){
                 item.enable();
             }
        });
    },

    // private
    onButtonTriggerOver : function(btn){
        if(this.activeMenuBtn && this.activeMenuBtn != btn){
            this.activeMenuBtn.hideMenu();
            btn.showMenu();
            this.activeMenuBtn = btn;
        }
    },

    // private
    onButtonMenuShow : function(btn){
        this.activeMenuBtn = btn;
    },

    // private
    onButtonMenuHide : function(btn){
        delete this.activeMenuBtn;
    }
});
Ext.reg('toolbar', Ext.Toolbar);

/**
 * @class Ext.Toolbar.Item
 * @extends Ext.BoxComponent
 * The base class that other non-interacting Toolbar Item classes should extend in order to
 * get some basic common toolbar item functionality.
 * @constructor
 * Creates a new Item
 * @param {HTMLElement} el
 * @xtype tbitem
 */
T.Item = Ext.extend(Ext.BoxComponent, {
    hideParent: true, //  Hiding a Toolbar.Item hides its containing TD
    enable:Ext.emptyFn,
    disable:Ext.emptyFn,
    focus:Ext.emptyFn

/**
     * @cfg {String} overflowText Text to be used for the menu if the item is overflowed.
     */
});
Ext.reg('tbitem', T.Item);

/**
 * @class Ext.Toolbar.Separator
 * @extends Ext.Toolbar.Item
 * A simple class that adds a vertical separator bar between toolbar items
 * (css class:'xtb-sep'). Example usage:
 *

new Ext.Panel({
    tbar : [
        'Item 1',
        {xtype: 'tbseparator'}, // or '-'
        'Item 2'
    ]
});

 * @constructor
 * Creates a new Separator
 * @xtype tbseparator
 */
T.Separator = Ext.extend(T.Item, {
    onRender : function(ct, position){
        this.el = ct.createChild({tag:'span', cls:'xtb-sep'}, position);
    }
});
Ext.reg('tbseparator', T.Separator);

/**
 * @class Ext.Toolbar.Spacer
 * @extends Ext.Toolbar.Item
 * A simple element that adds extra horizontal space between items in a toolbar.
 * By default a 2px wide space is added via css specification:

.x-toolbar .xtb-spacer {
    width:2px;
}
 *

 *
Example usage:

 *

new Ext.Panel({
    tbar : [
        'Item 1',
        {xtype: 'tbspacer'}, // or ' '
        'Item 2',
        // space width is also configurable via javascript
        {xtype: 'tbspacer', width: 50}, // add a 50px space
        'Item 3'
    ]
});

 * @constructor
 * Creates a new Spacer
 * @xtype tbspacer
 */
T.Spacer = Ext.extend(T.Item, {

/**
     * @cfg {Number} width
     * The width of the spacer in pixels (defaults to 2px via css style .x-toolbar .xtb-spacer).
     */

    onRender : function(ct, position){
        this.el = ct.createChild({tag:'div', cls:'xtb-spacer', style: this.width?'width:'+this.width+'px':''}, position);
    }
});
Ext.reg('tbspacer', T.Spacer);

/**
 * @class Ext.Toolbar.Fill
 * @extends Ext.Toolbar.Spacer
 * A non-rendering placeholder item which instructs the Toolbar's Layout to begin using
 * the right-justified button container.
 *

new Ext.Panel({
    tbar : [
        'Item 1',
        {xtype: 'tbfill'}, // or '->'
        'Item 2'
    ]
});

 * @constructor
 * Creates a new Fill
 * @xtype tbfill
 */
T.Fill = Ext.extend(T.Item, {
    // private
    render : Ext.emptyFn,
    isFill : true
});
Ext.reg('tbfill', T.Fill);

/**
 * @class Ext.Toolbar.TextItem
 * @extends Ext.Toolbar.Item
 * A simple class that renders text directly into a toolbar
 * (with css class:'xtb-text'). Example usage:
 *

new Ext.Panel({
    tbar : [
        {xtype: 'tbtext', text: 'Item 1'} // or simply 'Item 1'
    ]
});

 * @constructor
 * Creates a new TextItem
 * @param {String/Object} text A text string, or a config object containing a text property
 * @xtype tbtext
 */
T.TextItem = Ext.extend(T.Item, {

/**
     * @cfg {String} text The text to be used as innerHTML (html tags are accepted)
     */

    constructor: function(config){
        T.TextItem.superclass.constructor.call(this, Ext.isString(config) ? {text: config} : config);
    },

    // private
    onRender : function(ct, position) {
        this.autoEl = {cls: 'xtb-text', html: this.text || ''};
        T.TextItem.superclass.onRender.call(this, ct, position);
    },

/**
     * Updates this item's text, setting the text to be used as innerHTML.
     * @param {String} t The text to display (html accepted).
     */
    setText : function(t) {
        if(this.rendered){
            this.el.update(t);
        }else{
            this.text = t;
        }
    }
});
Ext.reg('tbtext', T.TextItem);

// backwards compat
T.Button = Ext.extend(Ext.Button, {});
T.SplitButton = Ext.extend(Ext.SplitButton, {});
Ext.reg('tbbutton', T.Button);
Ext.reg('tbsplit', T.SplitButton);

})();


The source code

/*!
 * licensing@extjs.com
 * http://www.extjs.com/license
 */

/**
 * @class Ext.layout.ToolbarLayout
 * @extends Ext.layout.ContainerLayout
 * Layout manager used by Ext.Toolbar. This is highly specialised for use by Toolbars and would not
 * usually be used by any other class.
 */
Ext.layout.ToolbarLayout = Ext.extend(Ext.layout.ContainerLayout, {
    monitorResize : true,

    type: 'toolbar',

/**
     * @property triggerWidth
     * @type Number
     * The width allocated for the menu trigger at the extreme right end of the Toolbar
     */
    triggerWidth: 18,

/**
     * @property noItemsMenuText
     * @type String
     * HTML fragment to render into the toolbar overflow menu if there are no items to display
     */
    noItemsMenuText : '
(None)
',

    /**
     * @private
     * @property lastOverflow
     * @type Boolean
     * Used internally to record whether the last layout caused an overflow or not
     */
    lastOverflow: false,

    /**
     * @private
     * @property tableHTML
     * @type String
     * String used to build the HTML injected to support the Toolbar's layout. The align property is
     * injected into this string inside the td.x-toolbar-left element during onLayout.
     */
    tableHTML: [
        '',
            '',
                '',
                    '',
                    '',
                '',
            '',
        '
',
                        '',
                            '',
                                '',
                            '',
                        '
',
                    ' 		',
                        '',
                            '',
                                '',
                                    '',
                                    '',
                                '',
                            '',
                        '
',
                                        '',
                                            '',
                                                '',
                                            '',
                                        '
',
                                    ' 		',
                                        '',
                                            '',
                                                '',
                                            '',
                                        '
',
                                    '
',
                    '
'
    ].join(""),

    /**
     * @private
     * Create the wrapping Toolbar HTML and render/move all the items into the correct places
     */
    onLayout : function(ct, target) {
        //render the Toolbar  HTML if it's not already present
        if (!this.leftTr) {
            var align = ct.buttonAlign == 'center' ? 'center' : 'left';

            target.addClass('x-toolbar-layout-ct');
            target.insertHtml('beforeEnd', String.format(this.tableHTML, align));

            this.leftTr   = target.child('tr.x-toolbar-left-row', true);
            this.rightTr  = target.child('tr.x-toolbar-right-row', true);
            this.extrasTr = target.child('tr.x-toolbar-extras-row', true);

            if (this.hiddenItem == undefined) {

/**
                 * @property hiddenItems
                 * @type Array
                 * Holds all items that are currently hidden due to there not being enough space to render them
                 * These items will appear on the expand menu.
                 */
                this.hiddenItems = [];
            }
        }

        var side     = ct.buttonAlign == 'right' ? this.rightTr : this.leftTr,
            items    = ct.items.items,
            position = 0;

        //render each item if not already rendered, place it into the correct (left or right) target
        for (var i = 0, len = items.length, c; i < len; i++, position++) {
            c = items[i];

            if (c.isFill) {
                side   = this.rightTr;
                position = -1;
            } else if (!c.rendered) {
                c.render(this.insertCell(c, side, position));
            } else {
                if (!c.xtbHidden && !this.isValidParent(c, side.childNodes[position])) {
                    var td = this.insertCell(c, side, position);
                    td.appendChild(c.getPositionEl().dom);
                    c.container = Ext.get(td);
                }
            }
        }

        //strip extra empty cells
        this.cleanup(this.leftTr);
        this.cleanup(this.rightTr);
        this.cleanup(this.extrasTr);
        this.fitToSize(target);
    },

    /**
     * @private
     * Removes any empty nodes from the given element
     * @param {Ext.Element} el The element to clean up
     */
    cleanup : function(el) {
        var cn = el.childNodes, i, c;

        for (i = cn.length-1; i >= 0 && (c = cn[i]); i--) {
            if (!c.firstChild) {
                el.removeChild(c);
            }
        }
    },

    /**
     * @private
     * Inserts the given Toolbar item into the given element
     * @param {Ext.Component} c The component to add
     * @param {Ext.Element} target The target to add the component to
     * @param {Number} position The position to add the component at
     */
    insertCell : function(c, target, position) {
        var td = document.createElement('td');
        td.className = 'x-toolbar-cell';

        target.insertBefore(td, target.childNodes[position] || null);

        return td;
    },

    /**
     * @private
     * Hides an item because it will not fit in the available width. The item will be unhidden again
     * if the Toolbar is resized to be large enough to show it
     * @param {Ext.Component} item The item to hide
     */
    hideItem : function(item) {
        this.hiddenItems.push(item);

        item.xtbHidden = true;
        item.xtbWidth = item.getPositionEl().dom.parentNode.offsetWidth;
        item.hide();
    },

    /**
     * @private
     * Unhides an item that was previously hidden due to there not being enough space left on the Toolbar
     * @param {Ext.Component} item The item to show
     */
    unhideItem : function(item) {
        item.show();
        item.xtbHidden = false;
        this.hiddenItems.remove(item);
    },

    /**
     * @private
     * Returns the width of the given toolbar item. If the item is currently hidden because there
     * is not enough room to render it, its previous width is returned
     * @param {Ext.Component} c The component to measure
     * @return {Number} The width of the item
     */
    getItemWidth : function(c) {
        return c.hidden ? (c.xtbWidth || 0) : c.getPositionEl().dom.parentNode.offsetWidth;
    },

    /**
     * @private
     * Called at the end of onLayout. At this point the Toolbar has already been resized, so we need
     * to fit the items into the available width. We add up the width required by all of the items in
     * the toolbar - if we don't have enough space we hide the extra items and render the expand menu
     * trigger.
     * @param {Ext.Element} target The Element the Toolbar is currently laid out within
     */
    fitToSize : function(target) {
        if (this.container.enableOverflow === false) {
            return;
        }

        var width       = target.dom.clientWidth,
            tableWidth  = target.dom.firstChild.offsetWidth,
            clipWidth   = width - this.triggerWidth,
            lastWidth   = this.lastWidth || 0,

            hiddenItems = this.hiddenItems,
            hasHiddens  = hiddenItems.length != 0,
            isLarger    = width >= lastWidth;

        this.lastWidth  = width;

        if (tableWidth > width || (hasHiddens && isLarger)) {
            var items     = this.container.items.items,
                len       = items.length,
                loopWidth = 0,
                item;

            for (var i = 0; i < len; i++) {
                item = items[i];

                if (!item.isFill) {
                    loopWidth += this.getItemWidth(item);
                    if (loopWidth > clipWidth) {
                        if (!(item.hidden || item.xtbHidden)) {
                            this.hideItem(item);
                        }
                    } else if (item.xtbHidden) {
                        this.unhideItem(item);
                    }
                }
            }
        }

        //test for number of hidden items again here because they may have changed above
        hasHiddens = hiddenItems.length != 0;

        if (hasHiddens) {
            this.initMore();

            if (!this.lastOverflow) {
                this.container.fireEvent('overflowchange', this.container, true);
                this.lastOverflow = true;
            }
        } else if (this.more) {
            this.clearMenu();
            this.more.destroy();
            delete this.more;

            if (this.lastOverflow) {
                this.container.fireEvent('overflowchange', this.container, false);
                this.lastOverflow = false;
            }
        }
    },

    /**
     * @private
     * Returns a menu config for a given component. This config is used to create a menu item
     * to be added to the expander menu
     * @param {Ext.Component} component The component to create the config for
     * @param {Boolean} hideOnClick Passed through to the menu item
     */
    createMenuConfig : function(component, hideOnClick){
        var config = Ext.apply({}, component.initialConfig),
            group  = component.toggleGroup;

        Ext.copyTo(config, component, [
            'iconCls', 'icon', 'itemId', 'disabled', 'handler', 'scope', 'menu'
        ]);

        Ext.apply(config, {
            text       : component.overflowText || component.text,
            hideOnClick: hideOnClick
        });

        if (group || component.enableToggle) {
            Ext.apply(config, {
                group  : group,
                checked: component.pressed,
                listeners: {
                    checkchange: function(item, checked){
                        component.toggle(checked);
                    }
                }
            });
        }

        delete config.ownerCt;
        delete config.xtype;
        delete config.id;

        return config;
    },

    /**
     * @private
     * Adds the given Toolbar item to the given menu. Buttons inside a buttongroup are added individually.
     * @param {Ext.menu.Menu} menu The menu to add to
     * @param {Ext.Component} component The component to add
     */
    addComponentToMenu : function(menu, component) {
        if (component instanceof Ext.Toolbar.Separator) {
            menu.add('-');

        } else if (Ext.isFunction(component.isXType)) {
            if (component.isXType('splitbutton')) {
                menu.add(this.createMenuConfig(component, true));

            } else if (component.isXType('button')) {
                menu.add(this.createMenuConfig(component, !component.menu));

            } else if (component.isXType('buttongroup')) {
                component.items.each(function(item){
                     this.addComponentToMenu(menu, item);
                }, this);
            }
        }
    },

    /**
     * @private
     * Deletes the sub-menu of each item in the expander menu. Submenus are created for items such as
     * splitbuttons and buttongroups, where the Toolbar item cannot be represented by a single menu item
     */
    clearMenu : function(){
        var menu = this.moreMenu;
        if (menu && menu.items) {
            menu.items.each(function(item){
                delete item.menu;
            });
        }
    },

    /**
     * @private
     * Called before the expand menu is shown, this rebuilds the menu since it was last shown because
     * it is possible that the items hidden due to space limitations on the Toolbar have changed since.
     * @param {Ext.menu.Menu} m The menu
     */
    beforeMoreShow : function(menu) {
        var items = this.container.items.items,
            len   = items.length,
            item,
            prev;

        var needsSep = function(group, item){
            return group.isXType('buttongroup') && !(item instanceof Ext.Toolbar.Separator);
        };

        this.clearMenu();
        menu.removeAll();
        for (var i = 0; i < len; i++) {
            item = items[i];
            if (item.xtbHidden) {
                if (prev && (needsSep(item, prev) || needsSep(prev, item))) {
                    menu.add('-');
                }
                this.addComponentToMenu(menu, item);
                prev = item;
            }
        }

        // put something so the menu isn't empty if no compatible items found
        if (menu.items.length < 1) {
            menu.add(this.noItemsMenuText);
        }
    },

    /**
     * @private
     * Creates the expand trigger and menu, adding them to the  at the extreme right of the
     * Toolbar table
     */
    initMore : function(){
        if (!this.more) {
            /**
             * @private
             * @property moreMenu
             * @type Ext.menu.Menu
             * The expand menu - holds items for every Toolbar item that cannot be shown
             * because the Toolbar is currently not wide enough.
             */
            this.moreMenu = new Ext.menu.Menu({
                ownerCt : this.container,
                listeners: {
                    beforeshow: this.beforeMoreShow,
                    scope: this
                }
            });

            /**
             * @private
             * @property more
             * @type Ext.Button
             * The expand button which triggers the overflow menu to be shown
             */
            this.more = new Ext.Button({
                iconCls: 'x-toolbar-more-icon',
                cls    : 'x-toolbar-more',
                menu   : this.moreMenu,
                ownerCt: this.container
            });

            var td = this.insertCell(this.more, this.extrasTr, 100);
            this.more.render(td);
        }
    },

    destroy : function(){
        Ext.destroy(this.more, this.moreMenu);
        delete this.leftTr;
        delete this.rightTr;
        delete this.extrasTr;
        Ext.layout.ToolbarLayout.superclass.destroy.call(this);
    }
});

Ext.Container.LAYOUTS.toolbar = Ext.layout.ToolbarLayout;


The source code

/*!
 * licensing@extjs.com
 * http://www.extjs.com/license
 */

/**
 * @class Ext.ToolTip
 * @extends Ext.Tip
 * A standard tooltip implementation for providing additional information when hovering over a target element.
 * @xtype tooltip
 * @constructor
 * Create a new Tooltip
 * @param {Object} config The configuration options
 */
Ext.ToolTip = Ext.extend(Ext.Tip, {

/**
     * When a Tooltip is configured with the {@link #delegate}
     * option to cause selected child elements of the {@link #target}
     * Element to each trigger a seperate show event, this property is set to
     * the DOM element which triggered the show.
     * @type DOMElement
     * @property triggerElement
     */

/**
     * @cfg {Mixed} target The target HTMLElement, Ext.Element or id to monitor
     * for mouseover events to trigger showing this ToolTip.
     */

/**
     * @cfg {Boolean} autoHide True to automatically hide the tooltip after the
     * mouse exits the target element or after the {@link #dismissDelay}
     * has expired if set (defaults to true).  If {@link closable} = true
     * a close tool button will be rendered into the tooltip header.
     */

/**
     * @cfg {Number} showDelay Delay in milliseconds before the tooltip displays
     * after the mouse enters the target element (defaults to 500)
     */
    showDelay : 500,

/**
     * @cfg {Number} hideDelay Delay in milliseconds after the mouse exits the
     * target element but before the tooltip actually hides (defaults to 200).
     * Set to 0 for the tooltip to hide immediately.
     */
    hideDelay : 200,

/**
     * @cfg {Number} dismissDelay Delay in milliseconds before the tooltip
     * automatically hides (defaults to 5000). To disable automatic hiding, set
     * dismissDelay = 0.
     */
    dismissDelay : 5000,

/**
     * @cfg {Array} mouseOffset An XY offset from the mouse position where the
     * tooltip should be shown (defaults to [15,18]).
     */

/**
     * @cfg {Boolean} trackMouse True to have the tooltip follow the mouse as it
     * moves over the target element (defaults to false).
     */
    trackMouse : false,

/**
     * @cfg {Boolean} anchorToTarget True to anchor the tooltip to the target
     * element, false to anchor it relative to the mouse coordinates (defaults
     * to true).  When anchorToTarget is true, use
     * {@link #defaultAlign} to control tooltip alignment to the
     * target element.  When anchorToTarget is false, use
     * {@link #anchorPosition} instead to control alignment.
     */
    anchorToTarget : true,

/**
     * @cfg {Number} anchorOffset A numeric pixel value used to offset the
     * default position of the anchor arrow (defaults to 0).  When the anchor
     * position is on the top or bottom of the tooltip, anchorOffset
     * will be used as a horizontal offset.  Likewise, when the anchor position
     * is on the left or right side, anchorOffset will be used as
     * a vertical offset.
     */
    anchorOffset : 0,

/**
     * @cfg {String} delegate
Optional. A {@link Ext.DomQuery DomQuery}
     * selector which allows selection of individual elements within the
     * {@link #target} element to trigger showing and hiding the
     * ToolTip as the mouse moves within the target.

     *
When specified, the child element of the target which caused a show
     * event is placed into the {@link #triggerElement} property
     * before the ToolTip is shown.

     *
This may be useful when a Component has regular, repeating elements
     * in it, each of which need a Tooltip which contains information specific
     * to that element. For example:

var myGrid = new Ext.grid.gridPanel(gridConfig);
myGrid.on('render', function(grid) {
    var store = grid.getStore();  // Capture the Store.
    var view = grid.getView();    // Capture the GridView.
    myGrid.tip = new Ext.ToolTip({
        target: view.mainBody,    // The overall target element.
        delegate: '.x-grid3-row', // Each grid row causes its own seperate show and hide.
        trackMouse: true,         // Moving within the row should not hide the tip.
        renderTo: document.body,  // Render immediately so that tip.body can be
                                  //  referenced prior to the first show.
        listeners: {              // Change content dynamically depending on which element
                                  //  triggered the show.
            beforeshow: function updateTipBody(tip) {
                var rowIndex = view.findRowIndex(tip.triggerElement);
                tip.body.dom.innerHTML = 'Over Record ID ' + store.getAt(rowIndex).id;
            }
        }
    });
});
     *

     */

    // private
    targetCounter : 0,

    constrainPosition : false,

    // private
    initComponent : function(){
        Ext.ToolTip.superclass.initComponent.call(this);
        this.lastActive = new Date();
        this.initTarget(this.target);
        this.origAnchor = this.anchor;
    },

    // private
    onRender : function(ct, position){
        Ext.ToolTip.superclass.onRender.call(this, ct, position);
        this.anchorCls = 'x-tip-anchor-' + this.getAnchorPosition();
        this.anchorEl = this.el.createChild({
            cls: 'x-tip-anchor ' + this.anchorCls
        });
    },

    // private
    afterRender : function(){
        Ext.ToolTip.superclass.afterRender.call(this);
        this.anchorEl.setStyle('z-index', this.el.getZIndex() + 1);
    },

/**
     * Binds this ToolTip to the specified element. The tooltip will be displayed when the mouse moves over the element.
     * @param {Mixed} t The Element, HtmlElement, or ID of an element to bind to
     */
    initTarget : function(target){
        var t;
        if((t = Ext.get(target))){
            if(this.target){
                var tg = Ext.get(this.target);
                this.mun(tg, 'mouseover', this.onTargetOver, this);
                this.mun(tg, 'mouseout', this.onTargetOut, this);
                this.mun(tg, 'mousemove', this.onMouseMove, this);
            }
            this.mon(t, {
                mouseover: this.onTargetOver,
                mouseout: this.onTargetOut,
                mousemove: this.onMouseMove,
                scope: this
            });
            this.target = t;
        }
        if(this.anchor){
            this.anchorTarget = this.target;
        }
    },

    // private
    onMouseMove : function(e){
        var t = this.delegate ? e.getTarget(this.delegate) : this.triggerElement = true;
        if (t) {
            this.targetXY = e.getXY();
            if (t === this.triggerElement) {
                if(!this.hidden && this.trackMouse){
                    this.setPagePosition(this.getTargetXY());
                }
            } else {
                this.hide();
                this.lastActive = new Date(0);
                this.onTargetOver(e);
            }
        } else if (!this.closable && this.isVisible()) {
            this.hide();
        }
    },

    // private
    getTargetXY : function(){
        if(this.delegate){
            this.anchorTarget = this.triggerElement;
        }
        if(this.anchor){
            this.targetCounter++;
            var offsets = this.getOffsets(),
                xy = (this.anchorToTarget && !this.trackMouse) ? this.el.getAlignToXY(this.anchorTarget, this.getAnchorAlign()) : this.targetXY,
                dw = Ext.lib.Dom.getViewWidth() - 5,
                dh = Ext.lib.Dom.getViewHeight() - 5,
                de = document.documentElement,
                bd = document.body,
                scrollX = (de.scrollLeft || bd.scrollLeft || 0) + 5,
                scrollY = (de.scrollTop || bd.scrollTop || 0) + 5,
                axy = [xy[0] + offsets[0], xy[1] + offsets[1]],
                sz = this.getSize();

            this.anchorEl.removeClass(this.anchorCls);

            if(this.targetCounter < 2){
                if(axy[0] < scrollX){
                    if(this.anchorToTarget){
                        this.defaultAlign = 'l-r';
                        if(this.mouseOffset){this.mouseOffset[0] *= -1;}
                    }
                    this.anchor = 'left';
                    return this.getTargetXY();
                }
                if(axy[0]+sz.width > dw){
                    if(this.anchorToTarget){
                        this.defaultAlign = 'r-l';
                        if(this.mouseOffset){this.mouseOffset[0] *= -1;}
                    }
                    this.anchor = 'right';
                    return this.getTargetXY();
                }
                if(axy[1] < scrollY){
                    if(this.anchorToTarget){
                        this.defaultAlign = 't-b';
                        if(this.mouseOffset){this.mouseOffset[1] *= -1;}
                    }
                    this.anchor = 'top';
                    return this.getTargetXY();
                }
                if(axy[1]+sz.height > dh){
                    if(this.anchorToTarget){
                        this.defaultAlign = 'b-t';
                        if(this.mouseOffset){this.mouseOffset[1] *= -1;}
                    }
                    this.anchor = 'bottom';
                    return this.getTargetXY();
                }
            }

            this.anchorCls = 'x-tip-anchor-'+this.getAnchorPosition();
            this.anchorEl.addClass(this.anchorCls);
            this.targetCounter = 0;
            return axy;
        }else{
            var mouseOffset = this.getMouseOffset();
            return [this.targetXY[0]+mouseOffset[0], this.targetXY[1]+mouseOffset[1]];
        }
    },

    getMouseOffset : function(){
        var offset = this.anchor ? [0,0] : [15,18];
        if(this.mouseOffset){
            offset[0] += this.mouseOffset[0];
            offset[1] += this.mouseOffset[1];
        }
        return offset;
    },

    // private
    getAnchorPosition : function(){
        if(this.anchor){
            this.tipAnchor = this.anchor.charAt(0);
        }else{
            var m = this.defaultAlign.match(/^([a-z]+)-([a-z]+)(\?)?$/);
            if(!m){
               throw 'AnchorTip.defaultAlign is invalid';
            }
            this.tipAnchor = m[1].charAt(0);
        }

        switch(this.tipAnchor){
            case 't': return 'top';
            case 'b': return 'bottom';
            case 'r': return 'right';
        }
        return 'left';
    },

    // private
    getAnchorAlign : function(){
        switch(this.anchor){
            case 'top'  : return 'tl-bl';
            case 'left' : return 'tl-tr';
            case 'right': return 'tr-tl';
            default     : return 'bl-tl';
        }
    },

    // private
    getOffsets : function(){
        var offsets,
            ap = this.getAnchorPosition().charAt(0);
        if(this.anchorToTarget && !this.trackMouse){
            switch(ap){
                case 't':
                    offsets = [0, 9];
                    break;
                case 'b':
                    offsets = [0, -13];
                    break;
                case 'r':
                    offsets = [-13, 0];
                    break;
                default:
                    offsets = [9, 0];
                    break;
            }
        }else{
            switch(ap){
                case 't':
                    offsets = [-15-this.anchorOffset, 30];
                    break;
                case 'b':
                    offsets = [-19-this.anchorOffset, -13-this.el.dom.offsetHeight];
                    break;
                case 'r':
                    offsets = [-15-this.el.dom.offsetWidth, -13-this.anchorOffset];
                    break;
                default:
                    offsets = [25, -13-this.anchorOffset];
                    break;
            }
        }
        var mouseOffset = this.getMouseOffset();
        offsets[0] += mouseOffset[0];
        offsets[1] += mouseOffset[1];

        return offsets;
    },

    // private
    onTargetOver : function(e){
        if(this.disabled || e.within(this.target.dom, true)){
            return;
        }
        var t = e.getTarget(this.delegate);
        if (t) {
            this.triggerElement = t;
            this.clearTimer('hide');
            this.targetXY = e.getXY();
            this.delayShow();
        }
    },

    // private
    delayShow : function(){
        if(this.hidden && !this.showTimer){
            if(this.lastActive.getElapsed() < this.quickShowInterval){
                this.show();
            }else{
                this.showTimer = this.show.defer(this.showDelay, this);
            }
        }else if(!this.hidden && this.autoHide !== false){
            this.show();
        }
    },

    // private
    onTargetOut : function(e){
        if(this.disabled || e.within(this.target.dom, true)){
            return;
        }
        this.clearTimer('show');
        if(this.autoHide !== false){
            this.delayHide();
        }
    },

    // private
    delayHide : function(){
        if(!this.hidden && !this.hideTimer){
            this.hideTimer = this.hide.defer(this.hideDelay, this);
        }
    },

/**
     * Hides this tooltip if visible.
     */
    hide: function(){
        this.clearTimer('dismiss');
        this.lastActive = new Date();
        if(this.anchorEl){
            this.anchorEl.hide();
        }
        Ext.ToolTip.superclass.hide.call(this);
        delete this.triggerElement;
    },

/**
     * Shows this tooltip at the current event target XY position.
     */
    show : function(){
        if(this.anchor){
            // pre-show it off screen so that the el will have dimensions
            // for positioning calcs when getting xy next
            this.showAt([-1000,-1000]);
            this.origConstrainPosition = this.constrainPosition;
            this.constrainPosition = false;
            this.anchor = this.origAnchor;
        }
        this.showAt(this.getTargetXY());

        if(this.anchor){
            this.syncAnchor();
            this.anchorEl.show();
            this.constrainPosition = this.origConstrainPosition;
        }else{
            this.anchorEl.hide();
        }
    },

    // inherit docs
    showAt : function(xy){
        this.lastActive = new Date();
        this.clearTimers();
        Ext.ToolTip.superclass.showAt.call(this, xy);
        if(this.dismissDelay && this.autoHide !== false){
            this.dismissTimer = this.hide.defer(this.dismissDelay, this);
        }
        if(this.anchor && !this.anchorEl.isVisible()){
            this.syncAnchor();
            this.anchorEl.show();
        }
    },

    // private
    syncAnchor : function(){
        var anchorPos, targetPos, offset;
        switch(this.tipAnchor.charAt(0)){
            case 't':
                anchorPos = 'b';
                targetPos = 'tl';
                offset = [20+this.anchorOffset, 2];
                break;
            case 'r':
                anchorPos = 'l';
                targetPos = 'tr';
                offset = [-2, 11+this.anchorOffset];
                break;
            case 'b':
                anchorPos = 't';
                targetPos = 'bl';
                offset = [20+this.anchorOffset, -2];
                break;
            default:
                anchorPos = 'r';
                targetPos = 'tl';
                offset = [2, 11+this.anchorOffset];
                break;
        }
        this.anchorEl.alignTo(this.el, anchorPos+'-'+targetPos, offset);
    },

    // private
    setPagePosition : function(x, y){
        Ext.ToolTip.superclass.setPagePosition.call(this, x, y);
        if(this.anchor){
            this.syncAnchor();
        }
    },

    // private
    clearTimer : function(name){
        name = name + 'Timer';
        clearTimeout(this[name]);
        delete this[name];
    },

    // private
    clearTimers : function(){
        this.clearTimer('show');
        this.clearTimer('dismiss');
        this.clearTimer('hide');
    },

    // private
    onShow : function(){
        Ext.ToolTip.superclass.onShow.call(this);
        Ext.getDoc().on('mousedown', this.onDocMouseDown, this);
    },

    // private
    onHide : function(){
        Ext.ToolTip.superclass.onHide.call(this);
        Ext.getDoc().un('mousedown', this.onDocMouseDown, this);
    },

    // private
    onDocMouseDown : function(e){
        if(this.autoHide !== true && !this.closable && !e.within(this.el.dom)){
            this.disable();
            this.doEnable.defer(100, this);
        }
    },

    // private
    doEnable : function(){
        if(!this.isDestroyed){
            this.enable();
        }
    },

    // private
    onDisable : function(){
        this.clearTimers();
        this.hide();
    },

    // private
    adjustPosition : function(x, y){
        if(this.contstrainPosition){
            var ay = this.targetXY[1], h = this.getSize().height;
            if(y <= ay && (y+h) >= ay){
                y = ay-h-5;
            }
        }
        return {x : x, y: y};
    },

    beforeDestroy : function(){
        this.clearTimers();
        Ext.destroy(this.anchorEl);
        delete this.anchorEl;
        delete this.target;
        delete this.anchorTarget;
        delete this.triggerElement;
        Ext.ToolTip.superclass.beforeDestroy.call(this);
    },

    // private
    onDestroy : function(){
        Ext.getDoc().un('mousedown', this.onDocMouseDown, this);
        Ext.ToolTip.superclass.onDestroy.call(this);
    }
});

Ext.reg('tooltip', Ext.ToolTip);


The source code

/*!
 * licensing@extjs.com
 * http://www.extjs.com/license
 */

/**
 * @class Ext.Direct.Transaction
 * @extends Object
 *
Supporting Class for Ext.Direct (not intended to be used directly).

 * @constructor
 * @param {Object} config
 */
Ext.Direct.Transaction = function(config){
    Ext.apply(this, config);
    this.tid = ++Ext.Direct.TID;
    this.retryCount = 0;
};
Ext.Direct.Transaction.prototype = {
    send: function(){
        this.provider.queueTransaction(this);
    },

    retry: function(){
        this.retryCount++;
        this.send();
    },

    getProvider: function(){
        return this.provider;
    }
};


The source code

/*!
 * licensing@extjs.com
 * http://www.extjs.com/license
 */

/**
 * @class Ext.data.Tree
 * @extends Ext.util.Observable
 * Represents a tree data structure and bubbles all the events for its nodes. The nodes
 * in the tree have most standard DOM functionality.
 * @constructor
 * @param {Node} root (optional) The root node
 */
Ext.data.Tree = function(root){
   this.nodeHash = {};

/**
    * The root node for this tree
    * @type Node
    */
   this.root = null;
   if(root){
       this.setRootNode(root);
   }
   this.addEvents(

/**
        * @event append
        * Fires when a new child node is appended to a node in this tree.
        * @param {Tree} tree The owner tree
        * @param {Node} parent The parent node
        * @param {Node} node The newly appended node
        * @param {Number} index The index of the newly appended node
        */
       "append",

/**
        * @event remove
        * Fires when a child node is removed from a node in this tree.
        * @param {Tree} tree The owner tree
        * @param {Node} parent The parent node
        * @param {Node} node The child node removed
        */
       "remove",

/**
        * @event move
        * Fires when a node is moved to a new location in the tree
        * @param {Tree} tree The owner tree
        * @param {Node} node The node moved
        * @param {Node} oldParent The old parent of this node
        * @param {Node} newParent The new parent of this node
        * @param {Number} index The index it was moved to
        */
       "move",

/**
        * @event insert
        * Fires when a new child node is inserted in a node in this tree.
        * @param {Tree} tree The owner tree
        * @param {Node} parent The parent node
        * @param {Node} node The child node inserted
        * @param {Node} refNode The child node the node was inserted before
        */
       "insert",

/**
        * @event beforeappend
        * Fires before a new child is appended to a node in this tree, return false to cancel the append.
        * @param {Tree} tree The owner tree
        * @param {Node} parent The parent node
        * @param {Node} node The child node to be appended
        */
       "beforeappend",

/**
        * @event beforeremove
        * Fires before a child is removed from a node in this tree, return false to cancel the remove.
        * @param {Tree} tree The owner tree
        * @param {Node} parent The parent node
        * @param {Node} node The child node to be removed
        */
       "beforeremove",

/**
        * @event beforemove
        * Fires before a node is moved to a new location in the tree. Return false to cancel the move.
        * @param {Tree} tree The owner tree
        * @param {Node} node The node being moved
        * @param {Node} oldParent The parent of the node
        * @param {Node} newParent The new parent the node is moving to
        * @param {Number} index The index it is being moved to
        */
       "beforemove",

/**
        * @event beforeinsert
        * Fires before a new child is inserted in a node in this tree, return false to cancel the insert.
        * @param {Tree} tree The owner tree
        * @param {Node} parent The parent node
        * @param {Node} node The child node to be inserted
        * @param {Node} refNode The child node the node is being inserted before
        */
       "beforeinsert"
   );

    Ext.data.Tree.superclass.constructor.call(this);
};

Ext.extend(Ext.data.Tree, Ext.util.Observable, {

/**
     * @cfg {String} pathSeparator
     * The token used to separate paths in node ids (defaults to '/').
     */
    pathSeparator: "/",

    // private
    proxyNodeEvent : function(){
        return this.fireEvent.apply(this, arguments);
    },

/**
     * Returns the root node for this tree.
     * @return {Node}
     */
    getRootNode : function(){
        return this.root;
    },

/**
     * Sets the root node for this tree.
     * @param {Node} node
     * @return {Node}
     */
    setRootNode : function(node){
        this.root = node;
        node.ownerTree = this;
        node.isRoot = true;
        this.registerNode(node);
        return node;
    },

/**
     * Gets a node in this tree by its id.
     * @param {String} id
     * @return {Node}
     */
    getNodeById : function(id){
        return this.nodeHash[id];
    },

    // private
    registerNode : function(node){
        this.nodeHash[node.id] = node;
    },

    // private
    unregisterNode : function(node){
        delete this.nodeHash[node.id];
    },

    toString : function(){
        return "[Tree"+(this.id?" "+this.id:"")+"]";
    }
});

/**
 * @class Ext.data.Node
 * @extends Ext.util.Observable
 * @cfg {Boolean} leaf true if this node is a leaf and does not have children
 * @cfg {String} id The id for this node. If one is not specified, one is generated.
 * @constructor
 * @param {Object} attributes The attributes/config for the node
 */
Ext.data.Node = function(attributes){
    /**
     * The attributes supplied for the node. You can use this property to access any custom attributes you supplied.
     * @type {Object}
     */
    this.attributes = attributes || {};
    this.leaf = this.attributes.leaf;
    /**
     * The node id. @type String
     */
    this.id = this.attributes.id;
    if(!this.id){
        this.id = Ext.id(null, "xnode-");
        this.attributes.id = this.id;
    }
    /**
     * All child nodes of this node. @type Array
     */
    this.childNodes = [];
    if(!this.childNodes.indexOf){ // indexOf is a must
        this.childNodes.indexOf = function(o){
            for(var i = 0, len = this.length; i < len; i++){
                if(this[i] == o){
                    return i;
                }
            }
            return -1;
        };
    }
    /**
     * The parent node for this node. @type Node
     */
    this.parentNode = null;
    /**
     * The first direct child node of this node, or null if this node has no child nodes. @type Node
     */
    this.firstChild = null;
    /**
     * The last direct child node of this node, or null if this node has no child nodes. @type Node
     */
    this.lastChild = null;
    /**
     * The node immediately preceding this node in the tree, or null if there is no sibling node. @type Node
     */
    this.previousSibling = null;
    /**
     * The node immediately following this node in the tree, or null if there is no sibling node. @type Node
     */
    this.nextSibling = null;

    this.addEvents({
       /**
        * @event append
        * Fires when a new child node is appended
        * @param {Tree} tree The owner tree
        * @param {Node} this This node
        * @param {Node} node The newly appended node
        * @param {Number} index The index of the newly appended node
        */
       "append" : true,
       /**
        * @event remove
        * Fires when a child node is removed
        * @param {Tree} tree The owner tree
        * @param {Node} this This node
        * @param {Node} node The removed node
        */
       "remove" : true,
       /**
        * @event move
        * Fires when this node is moved to a new location in the tree
        * @param {Tree} tree The owner tree
        * @param {Node} this This node
        * @param {Node} oldParent The old parent of this node
        * @param {Node} newParent The new parent of this node
        * @param {Number} index The index it was moved to
        */
       "move" : true,
       /**
        * @event insert
        * Fires when a new child node is inserted.
        * @param {Tree} tree The owner tree
        * @param {Node} this This node
        * @param {Node} node The child node inserted
        * @param {Node} refNode The child node the node was inserted before
        */
       "insert" : true,
       /**
        * @event beforeappend
        * Fires before a new child is appended, return false to cancel the append.
        * @param {Tree} tree The owner tree
        * @param {Node} this This node
        * @param {Node} node The child node to be appended
        */
       "beforeappend" : true,
       /**
        * @event beforeremove
        * Fires before a child is removed, return false to cancel the remove.
        * @param {Tree} tree The owner tree
        * @param {Node} this This node
        * @param {Node} node The child node to be removed
        */
       "beforeremove" : true,
       /**
        * @event beforemove
        * Fires before this node is moved to a new location in the tree. Return false to cancel the move.
        * @param {Tree} tree The owner tree
        * @param {Node} this This node
        * @param {Node} oldParent The parent of this node
        * @param {Node} newParent The new parent this node is moving to
        * @param {Number} index The index it is being moved to
        */
       "beforemove" : true,
       /**
        * @event beforeinsert
        * Fires before a new child is inserted, return false to cancel the insert.
        * @param {Tree} tree The owner tree
        * @param {Node} this This node
        * @param {Node} node The child node to be inserted
        * @param {Node} refNode The child node the node is being inserted before
        */
       "beforeinsert" : true
   });
    this.listeners = this.attributes.listeners;
    Ext.data.Node.superclass.constructor.call(this);
};

Ext.extend(Ext.data.Node, Ext.util.Observable, {
    // private
    fireEvent : function(evtName){
        // first do standard event for this node
        if(Ext.data.Node.superclass.fireEvent.apply(this, arguments) === false){
            return false;
        }
        // then bubble it up to the tree if the event wasn't cancelled
        var ot = this.getOwnerTree();
        if(ot){
            if(ot.proxyNodeEvent.apply(ot, arguments) === false){
                return false;
            }
        }
        return true;
    },

    /**
     * Returns true if this node is a leaf
     * @return {Boolean}
     */
    isLeaf : function(){
        return this.leaf === true;
    },

    // private
    setFirstChild : function(node){
        this.firstChild = node;
    },

    //private
    setLastChild : function(node){
        this.lastChild = node;
    },

    /**
     * Returns true if this node is the last child of its parent
     * @return {Boolean}
     */
    isLast : function(){
       return (!this.parentNode ? true : this.parentNode.lastChild == this);
    },

    /**
     * Returns true if this node is the first child of its parent
     * @return {Boolean}
     */
    isFirst : function(){
       return (!this.parentNode ? true : this.parentNode.firstChild == this);
    },

    /**
     * Returns true if this node has one or more child nodes, else false.
     * @return {Boolean}
     */
    hasChildNodes : function(){
        return !this.isLeaf() && this.childNodes.length > 0;
    },

    /**
     * Returns true if this node has one or more child nodes, or if the expandable
     * node attribute is explicitly specified as true (see {@link #attributes}), otherwise returns false.
     * @return {Boolean}
     */
    isExpandable : function(){
        return this.attributes.expandable || this.hasChildNodes();
    },

    /**
     * Insert node(s) as the last child node of this node.
     * @param {Node/Array} node The node or Array of nodes to append
     * @return {Node} The appended node if single append, or null if an array was passed
     */
    appendChild : function(node){
        var multi = false;
        if(Ext.isArray(node)){
            multi = node;
        }else if(arguments.length > 1){
            multi = arguments;
        }
        // if passed an array or multiple args do them one by one
        if(multi){
            for(var i = 0, len = multi.length; i < len; i++) {
                this.appendChild(multi[i]);
            }
        }else{
            if(this.fireEvent("beforeappend", this.ownerTree, this, node) === false){
                return false;
            }
            var index = this.childNodes.length;
            var oldParent = node.parentNode;
            // it's a move, make sure we move it cleanly
            if(oldParent){
                if(node.fireEvent("beforemove", node.getOwnerTree(), node, oldParent, this, index) === false){
                    return false;
                }
                oldParent.removeChild(node);
            }
            index = this.childNodes.length;
            if(index === 0){
                this.setFirstChild(node);
            }
            this.childNodes.push(node);
            node.parentNode = this;
            var ps = this.childNodes[index-1];
            if(ps){
                node.previousSibling = ps;
                ps.nextSibling = node;
            }else{
                node.previousSibling = null;
            }
            node.nextSibling = null;
            this.setLastChild(node);
            node.setOwnerTree(this.getOwnerTree());
            this.fireEvent("append", this.ownerTree, this, node, index);
            if(oldParent){
                node.fireEvent("move", this.ownerTree, node, oldParent, this, index);
            }
            return node;
        }
    },

    /**
     * Removes a child node from this node.
     * @param {Node} node The node to remove
     * @param {Boolean} destroy true to destroy the node upon removal. Defaults to false.
     * @return {Node} The removed node
     */
    removeChild : function(node, destroy){
        var index = this.childNodes.indexOf(node);
        if(index == -1){
            return false;
        }
        if(this.fireEvent("beforeremove", this.ownerTree, this, node) === false){
            return false;
        }

        // remove it from childNodes collection
        this.childNodes.splice(index, 1);

        // update siblings
        if(node.previousSibling){
            node.previousSibling.nextSibling = node.nextSibling;
        }
        if(node.nextSibling){
            node.nextSibling.previousSibling = node.previousSibling;
        }

        // update child refs
        if(this.firstChild == node){
            this.setFirstChild(node.nextSibling);
        }
        if(this.lastChild == node){
            this.setLastChild(node.previousSibling);
        }

        this.fireEvent("remove", this.ownerTree, this, node);
        if(destroy){
            node.destroy(true);
        }else{
            node.clear();
        }
        return node;
    },

    // private
    clear : function(destroy){
        // clear any references from the node
        this.setOwnerTree(null, destroy);
        this.parentNode = this.previousSibling = this.nextSibling = null;
        if(destroy){
            this.firstChild = this.lastChild = null;
        }
    },

    /**
     * Destroys the node.
     */
    destroy : function(/* private */ silent){
        /*
         * Silent is to be used in a number of cases
         * 1) When setRootNode is called.
         * 2) When destroy on the tree is called
         * 3) For destroying child nodes on a node
         */
        if(silent === true){
            this.purgeListeners();
            this.clear(true);
            Ext.each(this.childNodes, function(n){
                n.destroy(true);
            });
            this.childNodes = null;
        }else{
            this.remove(true);
        }
    },

    /**
     * Inserts the first node before the second node in this nodes childNodes collection.
     * @param {Node} node The node to insert
     * @param {Node} refNode The node to insert before (if null the node is appended)
     * @return {Node} The inserted node
     */
    insertBefore : function(node, refNode){
        if(!refNode){ // like standard Dom, refNode can be null for append
            return this.appendChild(node);
        }
        // nothing to do
        if(node == refNode){
            return false;
        }

        if(this.fireEvent("beforeinsert", this.ownerTree, this, node, refNode) === false){
            return false;
        }
        var index = this.childNodes.indexOf(refNode);
        var oldParent = node.parentNode;
        var refIndex = index;

        // when moving internally, indexes will change after remove
        if(oldParent == this && this.childNodes.indexOf(node) < index){
            refIndex--;
        }

        // it's a move, make sure we move it cleanly
        if(oldParent){
            if(node.fireEvent("beforemove", node.getOwnerTree(), node, oldParent, this, index, refNode) === false){
                return false;
            }
            oldParent.removeChild(node);
        }
        if(refIndex === 0){
            this.setFirstChild(node);
        }
        this.childNodes.splice(refIndex, 0, node);
        node.parentNode = this;
        var ps = this.childNodes[refIndex-1];
        if(ps){
            node.previousSibling = ps;
            ps.nextSibling = node;
        }else{
            node.previousSibling = null;
        }
        node.nextSibling = refNode;
        refNode.previousSibling = node;
        node.setOwnerTree(this.getOwnerTree());
        this.fireEvent("insert", this.ownerTree, this, node, refNode);
        if(oldParent){
            node.fireEvent("move", this.ownerTree, node, oldParent, this, refIndex, refNode);
        }
        return node;
    },

    /**
     * Removes this node from its parent
     * @param {Boolean} destroy true to destroy the node upon removal. Defaults to false.
     * @return {Node} this
     */
    remove : function(destroy){
        if (this.parentNode) {
            this.parentNode.removeChild(this, destroy);
        }
        return this;
    },

    /**
     * Removes all child nodes from this node.
     * @param {Boolean} destroy true to destroy the node upon removal. Defaults to false.
     * @return {Node} this
     */
    removeAll : function(destroy){
        var cn = this.childNodes,
            n;
        while((n = cn[0])){
            this.removeChild(n, destroy);
        }
        return this;
    },

    /**
     * Returns the child node at the specified index.
     * @param {Number} index
     * @return {Node}
     */
    item : function(index){
        return this.childNodes[index];
    },

    /**
     * Replaces one child node in this node with another.
     * @param {Node} newChild The replacement node
     * @param {Node} oldChild The node to replace
     * @return {Node} The replaced node
     */
    replaceChild : function(newChild, oldChild){
        var s = oldChild ? oldChild.nextSibling : null;
        this.removeChild(oldChild);
        this.insertBefore(newChild, s);
        return oldChild;
    },

    /**
     * Returns the index of a child node
     * @param {Node} node
     * @return {Number} The index of the node or -1 if it was not found
     */
    indexOf : function(child){
        return this.childNodes.indexOf(child);
    },

    /**
     * Returns the tree this node is in.
     * @return {Tree}
     */
    getOwnerTree : function(){
        // if it doesn't have one, look for one
        if(!this.ownerTree){
            var p = this;
            while(p){
                if(p.ownerTree){
                    this.ownerTree = p.ownerTree;
                    break;
                }
                p = p.parentNode;
            }
        }
        return this.ownerTree;
    },

    /**
     * Returns depth of this node (the root node has a depth of 0)
     * @return {Number}
     */
    getDepth : function(){
        var depth = 0;
        var p = this;
        while(p.parentNode){
            ++depth;
            p = p.parentNode;
        }
        return depth;
    },

    // private
    setOwnerTree : function(tree, destroy){
        // if it is a move, we need to update everyone
        if(tree != this.ownerTree){
            if(this.ownerTree){
                this.ownerTree.unregisterNode(this);
            }
            this.ownerTree = tree;
            // If we're destroying, we don't need to recurse since it will be called on each child node
            if(destroy !== true){
                Ext.each(this.childNodes, function(n){
                    n.setOwnerTree(tree);
                });
            }
            if(tree){
                tree.registerNode(this);
            }
        }
    },

    /**
     * Changes the id of this node.
     * @param {String} id The new id for the node.
     */
    setId: function(id){
        if(id !== this.id){
            var t = this.ownerTree;
            if(t){
                t.unregisterNode(this);
            }
            this.id = this.attributes.id = id;
            if(t){
                t.registerNode(this);
            }
            this.onIdChange(id);
        }
    },

    // private
    onIdChange: Ext.emptyFn,

    /**
     * Returns the path for this node. The path can be used to expand or select this node programmatically.
     * @param {String} attr (optional) The attr to use for the path (defaults to the node's id)
     * @return {String} The path
     */
    getPath : function(attr){
        attr = attr || "id";
        var p = this.parentNode;
        var b = [this.attributes[attr]];
        while(p){
            b.unshift(p.attributes[attr]);
            p = p.parentNode;
        }
        var sep = this.getOwnerTree().pathSeparator;
        return sep + b.join(sep);
    },

    /**
     * Bubbles up the tree from this node, calling the specified function with each node. The arguments to the function
     * will be the args provided or the current node. If the function returns false at any point,
     * the bubble is stopped.
     * @param {Function} fn The function to call
     * @param {Object} scope (optional) The scope (this reference) in which the function is executed. Defaults to the current Node.
     * @param {Array} args (optional) The args to call the function with (default to passing the current Node)
     */
    bubble : function(fn, scope, args){
        var p = this;
        while(p){
            if(fn.apply(scope || p, args || [p]) === false){
                break;
            }
            p = p.parentNode;
        }
    },

    /**
     * Cascades down the tree from this node, calling the specified function with each node. The arguments to the function
     * will be the args provided or the current node. If the function returns false at any point,
     * the cascade is stopped on that branch.
     * @param {Function} fn The function to call
     * @param {Object} scope (optional) The scope (this reference) in which the function is executed. Defaults to the current Node.
     * @param {Array} args (optional) The args to call the function with (default to passing the current Node)
     */
    cascade : function(fn, scope, args){
        if(fn.apply(scope || this, args || [this]) !== false){
            var cs = this.childNodes;
            for(var i = 0, len = cs.length; i < len; i++) {
                cs[i].cascade(fn, scope, args);
            }
        }
    },

    /**
     * Interates the child nodes of this node, calling the specified function with each node. The arguments to the function
     * will be the args provided or the current node. If the function returns false at any point,
     * the iteration stops.
     * @param {Function} fn The function to call
     * @param {Object} scope (optional) The scope (this reference) in which the function is executed. Defaults to the current Node in the iteration.
     * @param {Array} args (optional) The args to call the function with (default to passing the current Node)
     */
    eachChild : function(fn, scope, args){
        var cs = this.childNodes;
        for(var i = 0, len = cs.length; i < len; i++) {
            if(fn.apply(scope || this, args || [cs[i]]) === false){
                break;
            }
        }
    },

    /**
     * Finds the first child that has the attribute with the specified value.
     * @param {String} attribute The attribute name
     * @param {Mixed} value The value to search for
     * @param {Boolean} deep (Optional) True to search through nodes deeper than the immediate children
     * @return {Node} The found child or null if none was found
     */
    findChild : function(attribute, value, deep){
        return this.findChildBy(function(){
            return this.attributes[attribute] == value;
        }, null, deep);
    },

    /**
     * Finds the first child by a custom function. The child matches if the function passed returns true.
     * @param {Function} fn A function which must return true if the passed Node is the required Node.
     * @param {Object} scope (optional) The scope (this reference) in which the function is executed. Defaults to the Node being tested.
     * @param {Boolean} deep (Optional) True to search through nodes deeper than the immediate children
     * @return {Node} The found child or null if none was found
     */
    findChildBy : function(fn, scope, deep){
        var cs = this.childNodes,
            len = cs.length,
            i = 0,
            n,
            res;
        for(; i < len; i++){
            n = cs[i];
            if(fn.call(scope || n, n) === true){
                return n;
            }else if (deep){
                res = n.findChildBy(fn, scope, deep);
                if(res != null){
                    return res;
                }
            }

        }
        return null;
    },

    /**
     * Sorts this nodes children using the supplied sort function.
     * @param {Function} fn A function which, when passed two Nodes, returns -1, 0 or 1 depending upon required sort order.
     * @param {Object} scope (optional)The scope (this reference) in which the function is executed. Defaults to the browser window.
     */
    sort : function(fn, scope){
        var cs = this.childNodes;
        var len = cs.length;
        if(len > 0){
            var sortFn = scope ? function(){fn.apply(scope, arguments);} : fn;
            cs.sort(sortFn);
            for(var i = 0; i < len; i++){
                var n = cs[i];
                n.previousSibling = cs[i-1];
                n.nextSibling = cs[i+1];
                if(i === 0){
                    this.setFirstChild(n);
                }
                if(i == len-1){
                    this.setLastChild(n);
                }
            }
        }
    },

    /**
     * Returns true if this node is an ancestor (at any point) of the passed node.
     * @param {Node} node
     * @return {Boolean}
     */
    contains : function(node){
        return node.isAncestor(this);
    },

    /**
     * Returns true if the passed node is an ancestor (at any point) of this node.
     * @param {Node} node
     * @return {Boolean}
     */
    isAncestor : function(node){
        var p = this.parentNode;
        while(p){
            if(p == node){
                return true;
            }
            p = p.parentNode;
        }
        return false;
    },

    toString : function(){
        return "[Node"+(this.id?" "+this.id:"")+"]";
    }
});


The source code

/*!
 * licensing@extjs.com
 * http://www.extjs.com/license
 */

/**
 * @class Ext.tree.TreeDragZone
 * @extends Ext.dd.DragZone
 * @constructor
 * @param {String/HTMLElement/Element} tree The {@link Ext.tree.TreePanel} for which to enable dragging
 * @param {Object} config
 */
if(Ext.dd.DragZone){
Ext.tree.TreeDragZone = function(tree, config){
    Ext.tree.TreeDragZone.superclass.constructor.call(this, tree.innerCt, config);

/**
    * The TreePanel for this drag zone
    * @type Ext.tree.TreePanel
    * @property
    */
    this.tree = tree;
};

Ext.extend(Ext.tree.TreeDragZone, Ext.dd.DragZone, {

/**
     * @cfg {String} ddGroup
     * A named drag drop group to which this object belongs.  If a group is specified, then this object will only
     * interact with other drag drop objects in the same group (defaults to 'TreeDD').
     */
    ddGroup : "TreeDD",

    // private
    onBeforeDrag : function(data, e){
        var n = data.node;
        return n && n.draggable && !n.disabled;
    },

    // private
    onInitDrag : function(e){
        var data = this.dragData;
        this.tree.getSelectionModel().select(data.node);
        this.tree.eventModel.disable();
        this.proxy.update("");
        data.node.ui.appendDDGhost(this.proxy.ghost.dom);
        this.tree.fireEvent("startdrag", this.tree, data.node, e);
    },

    // private
    getRepairXY : function(e, data){
        return data.node.ui.getDDRepairXY();
    },

    // private
    onEndDrag : function(data, e){
        this.tree.eventModel.enable.defer(100, this.tree.eventModel);
        this.tree.fireEvent("enddrag", this.tree, data.node, e);
    },

    // private
    onValidDrop : function(dd, e, id){
        this.tree.fireEvent("dragdrop", this.tree, this.dragData.node, dd, e);
        this.hideProxy();
    },

    // private
    beforeInvalidDrop : function(e, id){
        // this scrolls the original position back into view
        var sm = this.tree.getSelectionModel();
        sm.clearSelections();
        sm.select(this.dragData.node);
    },

    // private
    afterRepair : function(){
        if (Ext.enableFx && this.tree.hlDrop) {
            Ext.Element.fly(this.dragData.ddel).highlight(this.hlColor || "c3daf9");
        }
        this.dragging = false;
    }
});
}


The source code

/*!
 * licensing@extjs.com
 * http://www.extjs.com/license
 */

/**
 * @class Ext.tree.TreeDropZone
 * @extends Ext.dd.DropZone
 * @constructor
 * @param {String/HTMLElement/Element} tree The {@link Ext.tree.TreePanel} for which to enable dropping
 * @param {Object} config
 */
if(Ext.dd.DropZone){

Ext.tree.TreeDropZone = function(tree, config){

/**
     * @cfg {Boolean} allowParentInsert
     * Allow inserting a dragged node between an expanded parent node and its first child that will become a
     * sibling of the parent when dropped (defaults to false)
     */
    this.allowParentInsert = config.allowParentInsert || false;

/**
     * @cfg {String} allowContainerDrop
     * True if drops on the tree container (outside of a specific tree node) are allowed (defaults to false)
     */
    this.allowContainerDrop = config.allowContainerDrop || false;

/**
     * @cfg {String} appendOnly
     * True if the tree should only allow append drops (use for trees which are sorted, defaults to false)
     */
    this.appendOnly = config.appendOnly || false;

    Ext.tree.TreeDropZone.superclass.constructor.call(this, tree.getTreeEl(), config);

/**
    * The TreePanel for this drop zone
    * @type Ext.tree.TreePanel
    * @property
    */
    this.tree = tree;

/**
    * Arbitrary data that can be associated with this tree and will be included in the event object that gets
    * passed to any nodedragover event handler (defaults to {})
    * @type Ext.tree.TreePanel
    * @property
    */
    this.dragOverData = {};
    // private
    this.lastInsertClass = "x-tree-no-status";
};

Ext.extend(Ext.tree.TreeDropZone, Ext.dd.DropZone, {

/**
     * @cfg {String} ddGroup
     * A named drag drop group to which this object belongs.  If a group is specified, then this object will only
     * interact with other drag drop objects in the same group (defaults to 'TreeDD').
     */
    ddGroup : "TreeDD",

/**
     * @cfg {String} expandDelay
     * The delay in milliseconds to wait before expanding a target tree node while dragging a droppable node
     * over the target (defaults to 1000)
     */
    expandDelay : 1000,

    // private
    expandNode : function(node){
        if(node.hasChildNodes() && !node.isExpanded()){
            node.expand(false, null, this.triggerCacheRefresh.createDelegate(this));
        }
    },

    // private
    queueExpand : function(node){
        this.expandProcId = this.expandNode.defer(this.expandDelay, this, [node]);
    },

    // private
    cancelExpand : function(){
        if(this.expandProcId){
            clearTimeout(this.expandProcId);
            this.expandProcId = false;
        }
    },

    // private
    isValidDropPoint : function(n, pt, dd, e, data){
        if(!n || !data){ return false; }
        var targetNode = n.node;
        var dropNode = data.node;
        // default drop rules
        if(!(targetNode && targetNode.isTarget && pt)){
            return false;
        }
        if(pt == "append" && targetNode.allowChildren === false){
            return false;
        }
        if((pt == "above" || pt == "below") && (targetNode.parentNode && targetNode.parentNode.allowChildren === false)){
            return false;
        }
        if(dropNode && (targetNode == dropNode || dropNode.contains(targetNode))){
            return false;
        }
        // reuse the object
        var overEvent = this.dragOverData;
        overEvent.tree = this.tree;
        overEvent.target = targetNode;
        overEvent.data = data;
        overEvent.point = pt;
        overEvent.source = dd;
        overEvent.rawEvent = e;
        overEvent.dropNode = dropNode;
        overEvent.cancel = false;
        var result = this.tree.fireEvent("nodedragover", overEvent);
        return overEvent.cancel === false && result !== false;
    },

    // private
    getDropPoint : function(e, n, dd){
        var tn = n.node;
        if(tn.isRoot){
            return tn.allowChildren !== false ? "append" : false; // always append for root
        }
        var dragEl = n.ddel;
        var t = Ext.lib.Dom.getY(dragEl), b = t + dragEl.offsetHeight;
        var y = Ext.lib.Event.getPageY(e);
        var noAppend = tn.allowChildren === false || tn.isLeaf();
        if(this.appendOnly || tn.parentNode.allowChildren === false){
            return noAppend ? false : "append";
        }
        var noBelow = false;
        if(!this.allowParentInsert){
            noBelow = tn.hasChildNodes() && tn.isExpanded();
        }
        var q = (b - t) / (noAppend ? 2 : 3);
        if(y >= t && y < (t + q)){
            return "above";
        }else if(!noBelow && (noAppend || y >= b-q && y <= b)){
            return "below";
        }else{
            return "append";
        }
    },

    // private
    onNodeEnter : function(n, dd, e, data){
        this.cancelExpand();
    },

    onContainerOver : function(dd, e, data) {
        if (this.allowContainerDrop && this.isValidDropPoint({ ddel: this.tree.getRootNode().ui.elNode, node: this.tree.getRootNode() }, "append", dd, e, data)) {
            return this.dropAllowed;
        }
        return this.dropNotAllowed;
    },

    // private
    onNodeOver : function(n, dd, e, data){
        var pt = this.getDropPoint(e, n, dd);
        var node = n.node;

        // auto node expand check
        if(!this.expandProcId && pt == "append" && node.hasChildNodes() && !n.node.isExpanded()){
            this.queueExpand(node);
        }else if(pt != "append"){
            this.cancelExpand();
        }

        // set the insert point style on the target node
        var returnCls = this.dropNotAllowed;
        if(this.isValidDropPoint(n, pt, dd, e, data)){
           if(pt){
               var el = n.ddel;
               var cls;
               if(pt == "above"){
                   returnCls = n.node.isFirst() ? "x-tree-drop-ok-above" : "x-tree-drop-ok-between";
                   cls = "x-tree-drag-insert-above";
               }else if(pt == "below"){
                   returnCls = n.node.isLast() ? "x-tree-drop-ok-below" : "x-tree-drop-ok-between";
                   cls = "x-tree-drag-insert-below";
               }else{
                   returnCls = "x-tree-drop-ok-append";
                   cls = "x-tree-drag-append";
               }
               if(this.lastInsertClass != cls){
                   Ext.fly(el).replaceClass(this.lastInsertClass, cls);
                   this.lastInsertClass = cls;
               }
           }
       }
       return returnCls;
    },

    // private
    onNodeOut : function(n, dd, e, data){
        this.cancelExpand();
        this.removeDropIndicators(n);
    },

    // private
    onNodeDrop : function(n, dd, e, data){
        var point = this.getDropPoint(e, n, dd);
        var targetNode = n.node;
        targetNode.ui.startDrop();
        if(!this.isValidDropPoint(n, point, dd, e, data)){
            targetNode.ui.endDrop();
            return false;
        }
        // first try to find the drop node
        var dropNode = data.node || (dd.getTreeNode ? dd.getTreeNode(data, targetNode, point, e) : null);
        return this.processDrop(targetNode, data, point, dd, e, dropNode);
    },

    onContainerDrop : function(dd, e, data){
        if (this.allowContainerDrop && this.isValidDropPoint({ ddel: this.tree.getRootNode().ui.elNode, node: this.tree.getRootNode() }, "append", dd, e, data)) {
            var targetNode = this.tree.getRootNode();
            targetNode.ui.startDrop();
            var dropNode = data.node || (dd.getTreeNode ? dd.getTreeNode(data, targetNode, 'append', e) : null);
            return this.processDrop(targetNode, data, 'append', dd, e, dropNode);
        }
        return false;
    },

    // private
    processDrop: function(target, data, point, dd, e, dropNode){
        var dropEvent = {
            tree : this.tree,
            target: target,
            data: data,
            point: point,
            source: dd,
            rawEvent: e,
            dropNode: dropNode,
            cancel: !dropNode,
            dropStatus: false
        };
        var retval = this.tree.fireEvent("beforenodedrop", dropEvent);
        if(retval === false || dropEvent.cancel === true || !dropEvent.dropNode){
            target.ui.endDrop();
            return dropEvent.dropStatus;
        }

        target = dropEvent.target;
        if(point == 'append' && !target.isExpanded()){
            target.expand(false, null, function(){
                this.completeDrop(dropEvent);
            }.createDelegate(this));
        }else{
            this.completeDrop(dropEvent);
        }
        return true;
    },

    // private
    completeDrop : function(de){
        var ns = de.dropNode, p = de.point, t = de.target;
        if(!Ext.isArray(ns)){
            ns = [ns];
        }
        var n;
        for(var i = 0, len = ns.length; i < len; i++){
            n = ns[i];
            if(p == "above"){
                t.parentNode.insertBefore(n, t);
            }else if(p == "below"){
                t.parentNode.insertBefore(n, t.nextSibling);
            }else{
                t.appendChild(n);
            }
        }
        n.ui.focus();
        if(Ext.enableFx && this.tree.hlDrop){
            n.ui.highlight();
        }
        t.ui.endDrop();
        this.tree.fireEvent("nodedrop", de);
    },

    // private
    afterNodeMoved : function(dd, data, e, targetNode, dropNode){
        if(Ext.enableFx && this.tree.hlDrop){
            dropNode.ui.focus();
            dropNode.ui.highlight();
        }
        this.tree.fireEvent("nodedrop", this.tree, targetNode, data, dd, e);
    },

    // private
    getTree : function(){
        return this.tree;
    },

    // private
    removeDropIndicators : function(n){
        if(n && n.ddel){
            var el = n.ddel;
            Ext.fly(el).removeClass([
                    "x-tree-drag-insert-above",
                    "x-tree-drag-insert-below",
                    "x-tree-drag-append"]);
            this.lastInsertClass = "_noclass";
        }
    },

    // private
    beforeDragDrop : function(target, e, id){
        this.cancelExpand();
        return true;
    },

    // private
    afterRepair : function(data){
        if(data && Ext.enableFx){
            data.node.ui.highlight();
        }
        this.hideProxy();
    }
});

}


The source code

/*!
 * licensing@extjs.com
 * http://www.extjs.com/license
 */

/**
 * @class Ext.tree.TreeEditor
 * @extends Ext.Editor
 * Provides editor functionality for inline tree node editing.  Any valid {@link Ext.form.Field} subclass can be used
 * as the editor field.
 * @constructor
 * @param {TreePanel} tree
 * @param {Object} fieldConfig (optional) Either a prebuilt {@link Ext.form.Field} instance or a Field config object
 * that will be applied to the default field instance (defaults to a {@link Ext.form.TextField}).
 * @param {Object} config (optional) A TreeEditor config object
 */
Ext.tree.TreeEditor = function(tree, fc, config){
    fc = fc || {};
    var field = fc.events ? fc : new Ext.form.TextField(fc);

    Ext.tree.TreeEditor.superclass.constructor.call(this, field, config);

    this.tree = tree;

    if(!tree.rendered){
        tree.on('render', this.initEditor, this);
    }else{
        this.initEditor(tree);
    }
};

Ext.extend(Ext.tree.TreeEditor, Ext.Editor, {

/**
     * @cfg {String} alignment
     * The position to align to (see {@link Ext.Element#alignTo} for more details, defaults to "l-l").
     */
    alignment: "l-l",
    // inherit
    autoSize: false,

/**
     * @cfg {Boolean} hideEl
     * True to hide the bound element while the editor is displayed (defaults to false)
     */
    hideEl : false,

/**
     * @cfg {String} cls
     * CSS class to apply to the editor (defaults to "x-small-editor x-tree-editor")
     */
    cls: "x-small-editor x-tree-editor",

/**
     * @cfg {Boolean} shim
     * True to shim the editor if selects/iframes could be displayed beneath it (defaults to false)
     */
    shim:false,
    // inherit
    shadow:"frame",

/**
     * @cfg {Number} maxWidth
     * The maximum width in pixels of the editor field (defaults to 250).  Note that if the maxWidth would exceed
     * the containing tree element's size, it will be automatically limited for you to the container width, taking
     * scroll and client offsets into account prior to each edit.
     */
    maxWidth: 250,

/**
     * @cfg {Number} editDelay The number of milliseconds between clicks to register a double-click that will trigger
     * editing on the current node (defaults to 350).  If two clicks occur on the same node within this time span,
     * the editor for the node will display, otherwise it will be processed as a regular click.
     */
    editDelay : 350,

    initEditor : function(tree){
        tree.on({
            scope      : this,
            beforeclick: this.beforeNodeClick,
            dblclick   : this.onNodeDblClick
        });

        this.on({
            scope          : this,
            complete       : this.updateNode,
            beforestartedit: this.fitToTree,
            specialkey     : this.onSpecialKey
        });

        this.on('startedit', this.bindScroll, this, {delay:10});
    },

    // private
    fitToTree : function(ed, el){
        var td = this.tree.getTreeEl().dom, nd = el.dom;
        if(td.scrollLeft >  nd.offsetLeft){ // ensure the node left point is visible
            td.scrollLeft = nd.offsetLeft;
        }
        var w = Math.min(
                this.maxWidth,
                (td.clientWidth > 20 ? td.clientWidth : td.offsetWidth) - Math.max(0, nd.offsetLeft-td.scrollLeft) - /*cushion*/5);
        this.setSize(w, '');
    },

/**
     * Edit the text of the passed {@link Ext.tree.TreeNode TreeNode}.
     * @param node {Ext.tree.TreeNode} The TreeNode to edit. The TreeNode must be {@link Ext.tree.TreeNode#editable editable}.
     */
    triggerEdit : function(node, defer){
        this.completeEdit();
        if(node.attributes.editable !== false){

/**
            * The {@link Ext.tree.TreeNode TreeNode} this editor is bound to. Read-only.
            * @type Ext.tree.TreeNode
            * @property editNode
            */
            this.editNode = node;
            if(this.tree.autoScroll){
                Ext.fly(node.ui.getEl()).scrollIntoView(this.tree.body);
            }
            var value = node.text || '';
            if (!Ext.isGecko && Ext.isEmpty(node.text)){
                node.setText(' ');
            }
            this.autoEditTimer = this.startEdit.defer(this.editDelay, this, [node.ui.textNode, value]);
            return false;
        }
    },

    // private
    bindScroll : function(){
        this.tree.getTreeEl().on('scroll', this.cancelEdit, this);
    },

    // private
    beforeNodeClick : function(node, e){
        clearTimeout(this.autoEditTimer);
        if(this.tree.getSelectionModel().isSelected(node)){
            e.stopEvent();
            return this.triggerEdit(node);
        }
    },

    onNodeDblClick : function(node, e){
        clearTimeout(this.autoEditTimer);
    },

    // private
    updateNode : function(ed, value){
        this.tree.getTreeEl().un('scroll', this.cancelEdit, this);
        this.editNode.setText(value);
    },

    // private
    onHide : function(){
        Ext.tree.TreeEditor.superclass.onHide.call(this);
        if(this.editNode){
            this.editNode.ui.focus.defer(50, this.editNode.ui);
        }
    },

    // private
    onSpecialKey : function(field, e){
        var k = e.getKey();
        if(k == e.ESC){
            e.stopEvent();
            this.cancelEdit();
        }else if(k == e.ENTER && !e.hasModifier()){
            e.stopEvent();
            this.completeEdit();
        }
    },

    onDestroy : function(){
        clearTimeout(this.autoEditTimer);
        Ext.tree.TreeEditor.superclass.onDestroy.call(this);
        var tree = this.tree;
        tree.un('beforeclick', this.beforeNodeClick, this);
        tree.un('dblclick', this.onNodeDblClick, this);
    }
});


The source code

/*!
 * licensing@extjs.com
 * http://www.extjs.com/license
 */
Ext.tree.TreeEventModel = function(tree){
    this.tree = tree;
    this.tree.on('render', this.initEvents, this);
};

Ext.tree.TreeEventModel.prototype = {
    initEvents : function(){
        var t = this.tree;

        if(t.trackMouseOver !== false){
            t.mon(t.innerCt, {
                scope: this,
                mouseover: this.delegateOver,
                mouseout: this.delegateOut
            });
        }
        t.mon(t.getTreeEl(), {
            scope: this,
            click: this.delegateClick,
            dblclick: this.delegateDblClick,
            contextmenu: this.delegateContextMenu
        });
    },

    getNode : function(e){
        var t;
        if(t = e.getTarget('.x-tree-node-el', 10)){
            var id = Ext.fly(t, '_treeEvents').getAttribute('tree-node-id', 'ext');
            if(id){
                return this.tree.getNodeById(id);
            }
        }
        return null;
    },

    getNodeTarget : function(e){
        var t = e.getTarget('.x-tree-node-icon', 1);
        if(!t){
            t = e.getTarget('.x-tree-node-el', 6);
        }
        return t;
    },

    delegateOut : function(e, t){
        if(!this.beforeEvent(e)){
            return;
        }
        if(e.getTarget('.x-tree-ec-icon', 1)){
            var n = this.getNode(e);
            this.onIconOut(e, n);
            if(n == this.lastEcOver){
                delete this.lastEcOver;
            }
        }
        if((t = this.getNodeTarget(e)) && !e.within(t, true)){
            this.onNodeOut(e, this.getNode(e));
        }
    },

    delegateOver : function(e, t){
        if(!this.beforeEvent(e)){
            return;
        }
        if(Ext.isGecko && !this.trackingDoc){ // prevent hanging in FF
            Ext.getBody().on('mouseover', this.trackExit, this);
            this.trackingDoc = true;
        }
        if(this.lastEcOver){ // prevent hung highlight
            this.onIconOut(e, this.lastEcOver);
            delete this.lastEcOver;
        }
        if(e.getTarget('.x-tree-ec-icon', 1)){
            this.lastEcOver = this.getNode(e);
            this.onIconOver(e, this.lastEcOver);
        }
        if(t = this.getNodeTarget(e)){
            this.onNodeOver(e, this.getNode(e));
        }
    },

    trackExit : function(e){
        if(this.lastOverNode){
            if(this.lastOverNode.ui && !e.within(this.lastOverNode.ui.getEl())){
                this.onNodeOut(e, this.lastOverNode);
            }
            delete this.lastOverNode;
            Ext.getBody().un('mouseover', this.trackExit, this);
            this.trackingDoc = false;
        }

    },

    delegateClick : function(e, t){
        if(this.beforeEvent(e)){
            if(e.getTarget('input[type=checkbox]', 1)){
                this.onCheckboxClick(e, this.getNode(e));
            }else if(e.getTarget('.x-tree-ec-icon', 1)){
                this.onIconClick(e, this.getNode(e));
            }else if(this.getNodeTarget(e)){
                this.onNodeClick(e, this.getNode(e));
            }
        }else{
            this.checkContainerEvent(e, 'click');
        }
    },

    delegateDblClick : function(e, t){
        if(this.beforeEvent(e)){
            if(this.getNodeTarget(e)){
                this.onNodeDblClick(e, this.getNode(e));
            }
        }else{
            this.checkContainerEvent(e, 'dblclick');
        }
    },

    delegateContextMenu : function(e, t){
        if(this.beforeEvent(e)){
            if(this.getNodeTarget(e)){
                this.onNodeContextMenu(e, this.getNode(e));
            }
        }else{
            this.checkContainerEvent(e, 'contextmenu');
        }
    },

    checkContainerEvent: function(e, type){
        if(this.disabled){
            e.stopEvent();
            return false;
        }
        this.onContainerEvent(e, type);
    },

    onContainerEvent: function(e, type){
        this.tree.fireEvent('container' + type, this.tree, e);
    },

    onNodeClick : function(e, node){
        node.ui.onClick(e);
    },

    onNodeOver : function(e, node){
        this.lastOverNode = node;
        node.ui.onOver(e);
    },

    onNodeOut : function(e, node){
        node.ui.onOut(e);
    },

    onIconOver : function(e, node){
        node.ui.addClass('x-tree-ec-over');
    },

    onIconOut : function(e, node){
        node.ui.removeClass('x-tree-ec-over');
    },

    onIconClick : function(e, node){
        node.ui.ecClick(e);
    },

    onCheckboxClick : function(e, node){
        node.ui.onCheckChange(e);
    },

    onNodeDblClick : function(e, node){
        node.ui.onDblClick(e);
    },

    onNodeContextMenu : function(e, node){
        node.ui.onContextMenu(e);
    },

    beforeEvent : function(e){
        var node = this.getNode(e);
        if(this.disabled || !node || !node.ui){
            e.stopEvent();
            return false;
        }
        return true;
    },

    disable: function(){
        this.disabled = true;
    },

    enable: function(){
        this.disabled = false;
    }
};


The source code

/*!
 * licensing@extjs.com
 * http://www.extjs.com/license
 */

/**
 * @class Ext.tree.TreeFilter
 * Note this class is experimental and doesn't update the indent (lines) or expand collapse icons of the nodes
 * @param {TreePanel} tree
 * @param {Object} config (optional)
 */
Ext.tree.TreeFilter = function(tree, config){
    this.tree = tree;
    this.filtered = {};
    Ext.apply(this, config);
};

Ext.tree.TreeFilter.prototype = {
    clearBlank:false,
    reverse:false,
    autoClear:false,
    remove:false,

/**
     * Filter the data by a specific attribute.
     * @param {String/RegExp} value Either string that the attribute value
     * should start with or a RegExp to test against the attribute
     * @param {String} attr (optional) The attribute passed in your node's attributes collection. Defaults to "text".
     * @param {TreeNode} startNode (optional) The node to start the filter at.
     */
    filter : function(value, attr, startNode){
        attr = attr || "text";
        var f;
        if(typeof value == "string"){
            var vlen = value.length;
            // auto clear empty filter
            if(vlen == 0 && this.clearBlank){
                this.clear();
                return;
            }
            value = value.toLowerCase();
            f = function(n){
                return n.attributes[attr].substr(0, vlen).toLowerCase() == value;
            };
        }else if(value.exec){ // regex?
            f = function(n){
                return value.test(n.attributes[attr]);
            };
        }else{
            throw 'Illegal filter type, must be string or regex';
        }
        this.filterBy(f, null, startNode);
    },

/**
     * Filter by a function. The passed function will be called with each
     * node in the tree (or from the startNode). If the function returns true, the node is kept
     * otherwise it is filtered. If a node is filtered, its children are also filtered.
     * @param {Function} fn The filter function
     * @param {Object} scope (optional) The scope (this reference) in which the function is executed. Defaults to the current Node.
     */
    filterBy : function(fn, scope, startNode){
        startNode = startNode || this.tree.root;
        if(this.autoClear){
            this.clear();
        }
        var af = this.filtered, rv = this.reverse;
        var f = function(n){
            if(n == startNode){
                return true;
            }
            if(af[n.id]){
                return false;
            }
            var m = fn.call(scope || n, n);
            if(!m || rv){
                af[n.id] = n;
                n.ui.hide();
                return false;
            }
            return true;
        };
        startNode.cascade(f);
        if(this.remove){
           for(var id in af){
               if(typeof id != "function"){
                   var n = af[id];
                   if(n && n.parentNode){
                       n.parentNode.removeChild(n);
                   }
               }
           }
        }
    },

/**
     * Clears the current filter. Note: with the "remove" option
     * set a filter cannot be cleared.
     */
    clear : function(){
        var t = this.tree;
        var af = this.filtered;
        for(var id in af){
            if(typeof id != "function"){
                var n = af[id];
                if(n){
                    n.ui.show();
                }
            }
        }
        this.filtered = {};
    }
};


The source code

/*!
 * licensing@extjs.com
 * http://www.extjs.com/license
 */

/**
 * @class Ext.tree.TreeLoader
 * @extends Ext.util.Observable
 * A TreeLoader provides for lazy loading of an {@link Ext.tree.TreeNode}'s child
 * nodes from a specified URL. The response must be a JavaScript Array definition
 * whose elements are node definition objects. e.g.:
 *

    [{
        id: 1,
        text: 'A leaf Node',
        leaf: true
    },{
        id: 2,
        text: 'A folder Node',
        children: [{
            id: 3,
            text: 'A child Node',
            leaf: true
        }]
   }]

 *

 * A server request is sent, and child nodes are loaded only when a node is expanded.
 * The loading node's id is passed to the server under the parameter name "node" to
 * enable the server to produce the correct child nodes.
 *

 * To pass extra parameters, an event handler may be attached to the "beforeload"
 * event, and the parameters specified in the TreeLoader's baseParams property:
 *

    myTreeLoader.on("beforeload", function(treeLoader, node) {
        this.baseParams.category = node.attributes.category;
    }, this);

 * This would pass an HTTP parameter called "category" to the server containing
 * the value of the Node's "category" attribute.
 * @constructor
 * Creates a new Treeloader.
 * @param {Object} config A config object containing config properties.
 */
Ext.tree.TreeLoader = function(config){
    this.baseParams = {};
    Ext.apply(this, config);

    this.addEvents(

/**
         * @event beforeload
         * Fires before a network request is made to retrieve the Json text which specifies a node's children.
         * @param {Object} This TreeLoader object.
         * @param {Object} node The {@link Ext.tree.TreeNode} object being loaded.
         * @param {Object} callback The callback function specified in the {@link #load} call.
         */
        "beforeload",

/**
         * @event load
         * Fires when the node has been successfuly loaded.
         * @param {Object} This TreeLoader object.
         * @param {Object} node The {@link Ext.tree.TreeNode} object being loaded.
         * @param {Object} response The response object containing the data from the server.
         */
        "load",

/**
         * @event loadexception
         * Fires if the network request failed.
         * @param {Object} This TreeLoader object.
         * @param {Object} node The {@link Ext.tree.TreeNode} object being loaded.
         * @param {Object} response The response object containing the data from the server.
         */
        "loadexception"
    );
    Ext.tree.TreeLoader.superclass.constructor.call(this);
    if(Ext.isString(this.paramOrder)){
        this.paramOrder = this.paramOrder.split(/[\s,|]/);
    }
};

Ext.extend(Ext.tree.TreeLoader, Ext.util.Observable, {

/**
    * @cfg {String} dataUrl The URL from which to request a Json string which
    * specifies an array of node definition objects representing the child nodes
    * to be loaded.
    */

/**
     * @cfg {String} requestMethod The HTTP request method for loading data (defaults to the value of {@link Ext.Ajax#method}).
     */

/**
     * @cfg {String} url Equivalent to {@link #dataUrl}.
     */

/**
     * @cfg {Boolean} preloadChildren If set to true, the loader recursively loads "children" attributes when doing the first load on nodes.
     */

/**
    * @cfg {Object} baseParams (optional) An object containing properties which
    * specify HTTP parameters to be passed to each request for child nodes.
    */

/**
    * @cfg {Object} baseAttrs (optional) An object containing attributes to be added to all nodes
    * created by this loader. If the attributes sent by the server have an attribute in this object,
    * they take priority.
    */

/**
    * @cfg {Object} uiProviders (optional) An object containing properties which
    * specify custom {@link Ext.tree.TreeNodeUI} implementations. If the optional
    * uiProvider attribute of a returned child node is a string rather
    * than a reference to a TreeNodeUI implementation, then that string value
    * is used as a property name in the uiProviders object.
    */
    uiProviders : {},

/**
    * @cfg {Boolean} clearOnLoad (optional) Default to true. Remove previously existing
    * child nodes before loading.
    */
    clearOnLoad : true,

/**
     * @cfg {Array/String} paramOrder Defaults to undefined. Only used when using directFn.
     * Specifies the params in the order in which they must be passed to the server-side Direct method
     * as either (1) an Array of String values, or (2) a String of params delimited by either whitespace,
     * comma, or pipe. For example,
     * any of the following would be acceptable:

nodeParameter: 'node',
paramOrder: ['param1','param2','param3']
paramOrder: 'node param1 param2 param3'
paramOrder: 'param1,node,param2,param3'
paramOrder: 'param1|param2|param|node'

     */
    paramOrder: undefined,

/**
     * @cfg {Boolean} paramsAsHash Only used when using directFn.
     * Send parameters as a collection of named arguments (defaults to false). Providing a
     * {@link #paramOrder} nullifies this configuration.
     */
    paramsAsHash: false,

/**
     * @cfg {String} nodeParameter The name of the parameter sent to the server which contains
     * the identifier of the node. Defaults to 'node'.
     */
    nodeParameter: 'node',

/**
     * @cfg {Function} directFn
     * Function to call when executing a request.
     */
    directFn : undefined,

/**
     * Load an {@link Ext.tree.TreeNode} from the URL specified in the constructor.
     * This is called automatically when a node is expanded, but may be used to reload
     * a node (or append new children if the {@link #clearOnLoad} option is false.)
     * @param {Ext.tree.TreeNode} node
     * @param {Function} callback Function to call after the node has been loaded. The
     * function is passed the TreeNode which was requested to be loaded.
     * @param {Object} scope The scope (this reference) in which the callback is executed.
     * defaults to the loaded TreeNode.
     */
    load : function(node, callback, scope){
        if(this.clearOnLoad){
            while(node.firstChild){
                node.removeChild(node.firstChild);
            }
        }
        if(this.doPreload(node)){ // preloaded json children
            this.runCallback(callback, scope || node, [node]);
        }else if(this.directFn || this.dataUrl || this.url){
            this.requestData(node, callback, scope || node);
        }
    },

    doPreload : function(node){
        if(node.attributes.children){
            if(node.childNodes.length < 1){ // preloaded?
                var cs = node.attributes.children;
                node.beginUpdate();
                for(var i = 0, len = cs.length; i < len; i++){
                    var cn = node.appendChild(this.createNode(cs[i]));
                    if(this.preloadChildren){
                        this.doPreload(cn);
                    }
                }
                node.endUpdate();
            }
            return true;
        }
        return false;
    },

    getParams: function(node){
        var bp = Ext.apply({}, this.baseParams),
            np = this.nodeParameter,
            po = this.paramOrder;

        np && (bp[ np ] = node.id);

        if(this.directFn){
            var buf = [node.id];
            if(po){
                // reset 'buf' if the nodeParameter was included in paramOrder
                if(np && po.indexOf(np) > -1){
                    buf = [];
                }

                for(var i = 0, len = po.length; i < len; i++){
                    buf.push(bp[ po[i] ]);
                }
            }else if(this.paramsAsHash){
                buf = [bp];
            }
            return buf;
        }else{
            return bp;
        }
    },

    requestData : function(node, callback, scope){
        if(this.fireEvent("beforeload", this, node, callback) !== false){
            if(this.directFn){
                var args = this.getParams(node);
                args.push(this.processDirectResponse.createDelegate(this, [{callback: callback, node: node, scope: scope}], true));
                this.directFn.apply(window, args);
            }else{
                this.transId = Ext.Ajax.request({
                    method:this.requestMethod,
                    url: this.dataUrl||this.url,
                    success: this.handleResponse,
                    failure: this.handleFailure,
                    scope: this,
                    argument: {callback: callback, node: node, scope: scope},
                    params: this.getParams(node)
                });
            }
        }else{
            // if the load is cancelled, make sure we notify
            // the node that we are done
            this.runCallback(callback, scope || node, []);
        }
    },

    processDirectResponse: function(result, response, args){
        if(response.status){
            this.handleResponse({
                responseData: Ext.isArray(result) ? result : null,
                responseText: result,
                argument: args
            });
        }else{
            this.handleFailure({
                argument: args
            });
        }
    },

    // private
    runCallback: function(cb, scope, args){
        if(Ext.isFunction(cb)){
            cb.apply(scope, args);
        }
    },

    isLoading : function(){
        return !!this.transId;
    },

    abort : function(){
        if(this.isLoading()){
            Ext.Ajax.abort(this.transId);
        }
    },

/**
    *
Override this function for custom TreeNode node implementation, or to
    * modify the attributes at creation time.

    * Example:

new Ext.tree.TreePanel({
    ...
    loader: new Ext.tree.TreeLoader({
        url: 'dataUrl',
        createNode: function(attr) {
//          Allow consolidation consignments to have
//          consignments dropped into them.
            if (attr.isConsolidation) {
                attr.iconCls = 'x-consol',
                attr.allowDrop = true;
            }
            return Ext.tree.TreeLoader.prototype.createNode.call(this, attr);
        }
    }),
    ...
});

    * @param attr {Object} The attributes from which to create the new node.
    */
    createNode : function(attr){
        // apply baseAttrs, nice idea Corey!
        if(this.baseAttrs){
            Ext.applyIf(attr, this.baseAttrs);
        }
        if(this.applyLoader !== false && !attr.loader){
            attr.loader = this;
        }
        if(Ext.isString(attr.uiProvider)){
           attr.uiProvider = this.uiProviders[attr.uiProvider] || eval(attr.uiProvider);
        }
        if(attr.nodeType){
            return new Ext.tree.TreePanel.nodeTypes[attr.nodeType](attr);
        }else{
            return attr.leaf ?
                        new Ext.tree.TreeNode(attr) :
                        new Ext.tree.AsyncTreeNode(attr);
        }
    },

    processResponse : function(response, node, callback, scope){
        var json = response.responseText;
        try {
            var o = response.responseData || Ext.decode(json);
            node.beginUpdate();
            for(var i = 0, len = o.length; i < len; i++){
                var n = this.createNode(o[i]);
                if(n){
                    node.appendChild(n);
                }
            }
            node.endUpdate();
            this.runCallback(callback, scope || node, [node]);
        }catch(e){
            this.handleFailure(response);
        }
    },

    handleResponse : function(response){
        this.transId = false;
        var a = response.argument;
        this.processResponse(response, a.node, a.callback, a.scope);
        this.fireEvent("load", this, a.node, response);
    },

    handleFailure : function(response){
        this.transId = false;
        var a = response.argument;
        this.fireEvent("loadexception", this, a.node, response);
        this.runCallback(a.callback, a.scope || a.node, [a.node]);
    },

    destroy : function(){
        this.abort();
        this.purgeListeners();
    }
});


The source code

/*!
 * licensing@extjs.com
 * http://www.extjs.com/license
 */

/**
 * @class Ext.tree.TreeNode
 * @extends Ext.data.Node
 * @cfg {String} text The text for this node
 * @cfg {Boolean} expanded true to start the node expanded
 * @cfg {Boolean} allowDrag False to make this node undraggable if {@link #draggable} = true (defaults to true)
 * @cfg {Boolean} allowDrop False if this node cannot have child nodes dropped on it (defaults to true)
 * @cfg {Boolean} disabled true to start the node disabled
 * @cfg {String} icon The path to an icon for the node. The preferred way to do this
 * is to use the cls or iconCls attributes and add the icon via a CSS background image.
 * @cfg {String} cls A css class to be added to the node
 * @cfg {String} iconCls A css class to be added to the nodes icon element for applying css background images
 * @cfg {String} href URL of the link used for the node (defaults to #)
 * @cfg {String} hrefTarget target frame for the link
 * @cfg {Boolean} hidden True to render hidden. (Defaults to false).
 * @cfg {String} qtip An Ext QuickTip for the node
 * @cfg {Boolean} expandable If set to true, the node will always show a plus/minus icon, even when empty
 * @cfg {String} qtipCfg An Ext QuickTip config for the node (used instead of qtip)
 * @cfg {Boolean} singleClickExpand True for single click expand on this node
 * @cfg {Function} uiProvider A UI class to use for this node (defaults to Ext.tree.TreeNodeUI)
 * @cfg {Boolean} checked True to render a checked checkbox for this node, false to render an unchecked checkbox
 * (defaults to undefined with no checkbox rendered)
 * @cfg {Boolean} draggable True to make this node draggable (defaults to false)
 * @cfg {Boolean} isTarget False to not allow this node to act as a drop target (defaults to true)
 * @cfg {Boolean} allowChildren False to not allow this node to have child nodes (defaults to true)
 * @cfg {Boolean} editable False to not allow this node to be edited by an {@link Ext.tree.TreeEditor} (defaults to true)
 * @constructor
 * @param {Object/String} attributes The attributes/config for the node or just a string with the text for the node
 */
Ext.tree.TreeNode = function(attributes){
    attributes = attributes || {};
    if(Ext.isString(attributes)){
        attributes = {text: attributes};
    }
    this.childrenRendered = false;
    this.rendered = false;
    Ext.tree.TreeNode.superclass.constructor.call(this, attributes);
    this.expanded = attributes.expanded === true;
    this.isTarget = attributes.isTarget !== false;
    this.draggable = attributes.draggable !== false && attributes.allowDrag !== false;
    this.allowChildren = attributes.allowChildren !== false && attributes.allowDrop !== false;

    /**
     * Read-only. The text for this node. To change it use {@link #setText}.
     * @type String
     */
    this.text = attributes.text;
    /**
     * True if this node is disabled.
     * @type Boolean
     */
    this.disabled = attributes.disabled === true;
    /**
     * True if this node is hidden.
     * @type Boolean
     */
    this.hidden = attributes.hidden === true;

    this.addEvents(
        /**
        * @event textchange
        * Fires when the text for this node is changed
        * @param {Node} this This node
        * @param {String} text The new text
        * @param {String} oldText The old text
        */
        'textchange',
        /**
        * @event beforeexpand
        * Fires before this node is expanded, return false to cancel.
        * @param {Node} this This node
        * @param {Boolean} deep
        * @param {Boolean} anim
        */
        'beforeexpand',
        /**
        * @event beforecollapse
        * Fires before this node is collapsed, return false to cancel.
        * @param {Node} this This node
        * @param {Boolean} deep
        * @param {Boolean} anim
        */
        'beforecollapse',
        /**
        * @event expand
        * Fires when this node is expanded
        * @param {Node} this This node
        */
        'expand',
        /**
        * @event disabledchange
        * Fires when the disabled status of this node changes
        * @param {Node} this This node
        * @param {Boolean} disabled
        */
        'disabledchange',
        /**
        * @event collapse
        * Fires when this node is collapsed
        * @param {Node} this This node
        */
        'collapse',
        /**
        * @event beforeclick
        * Fires before click processing. Return false to cancel the default action.
        * @param {Node} this This node
        * @param {Ext.EventObject} e The event object
        */
        'beforeclick',
        /**
        * @event click
        * Fires when this node is clicked
        * @param {Node} this This node
        * @param {Ext.EventObject} e The event object
        */
        'click',
        /**
        * @event checkchange
        * Fires when a node with a checkbox's checked property changes
        * @param {Node} this This node
        * @param {Boolean} checked
        */
        'checkchange',
        /**
        * @event beforedblclick
        * Fires before double click processing. Return false to cancel the default action.
        * @param {Node} this This node
        * @param {Ext.EventObject} e The event object
        */
        'beforedblclick',
        /**
        * @event dblclick
        * Fires when this node is double clicked
        * @param {Node} this This node
        * @param {Ext.EventObject} e The event object
        */
        'dblclick',
        /**
        * @event contextmenu
        * Fires when this node is right clicked
        * @param {Node} this This node
        * @param {Ext.EventObject} e The event object
        */
        'contextmenu',
        /**
        * @event beforechildrenrendered
        * Fires right before the child nodes for this node are rendered
        * @param {Node} this This node
        */
        'beforechildrenrendered'
    );

    var uiClass = this.attributes.uiProvider || this.defaultUI || Ext.tree.TreeNodeUI;

    /**
     * Read-only. The UI for this node
     * @type TreeNodeUI
     */
    this.ui = new uiClass(this);
};
Ext.extend(Ext.tree.TreeNode, Ext.data.Node, {
    preventHScroll : true,
    /**
     * Returns true if this node is expanded
     * @return {Boolean}
     */
    isExpanded : function(){
        return this.expanded;
    },

/**
 * Returns the UI object for this node.
 * @return {TreeNodeUI} The object which is providing the user interface for this tree
 * node. Unless otherwise specified in the {@link #uiProvider}, this will be an instance
 * of {@link Ext.tree.TreeNodeUI}
 */
    getUI : function(){
        return this.ui;
    },

    getLoader : function(){
        var owner;
        return this.loader || ((owner = this.getOwnerTree()) && owner.loader ? owner.loader : (this.loader = new Ext.tree.TreeLoader()));
    },

    // private override
    setFirstChild : function(node){
        var of = this.firstChild;
        Ext.tree.TreeNode.superclass.setFirstChild.call(this, node);
        if(this.childrenRendered && of && node != of){
            of.renderIndent(true, true);
        }
        if(this.rendered){
            this.renderIndent(true, true);
        }
    },

    // private override
    setLastChild : function(node){
        var ol = this.lastChild;
        Ext.tree.TreeNode.superclass.setLastChild.call(this, node);
        if(this.childrenRendered && ol && node != ol){
            ol.renderIndent(true, true);
        }
        if(this.rendered){
            this.renderIndent(true, true);
        }
    },

    // these methods are overridden to provide lazy rendering support
    // private override
    appendChild : function(n){
        if(!n.render && !Ext.isArray(n)){
            n = this.getLoader().createNode(n);
        }
        var node = Ext.tree.TreeNode.superclass.appendChild.call(this, n);
        if(node && this.childrenRendered){
            node.render();
        }
        this.ui.updateExpandIcon();
        return node;
    },

    // private override
    removeChild : function(node, destroy){
        this.ownerTree.getSelectionModel().unselect(node);
        Ext.tree.TreeNode.superclass.removeChild.apply(this, arguments);
        // only update the ui if we're not destroying
        if(!destroy){
            // if it's been rendered remove dom node
            if(node.ui.rendered){
                node.ui.remove();
            }
            if(this.childNodes.length < 1){
                this.collapse(false, false);
            }else{
                this.ui.updateExpandIcon();
            }
            if(!this.firstChild && !this.isHiddenRoot()){
                this.childrenRendered = false;
            }
        }
        return node;
    },

    // private override
    insertBefore : function(node, refNode){
        if(!node.render){
            node = this.getLoader().createNode(node);
        }
        var newNode = Ext.tree.TreeNode.superclass.insertBefore.call(this, node, refNode);
        if(newNode && refNode && this.childrenRendered){
            node.render();
        }
        this.ui.updateExpandIcon();
        return newNode;
    },

    /**
     * Sets the text for this node
     * @param {String} text
     */
    setText : function(text){
        var oldText = this.text;
        this.text = this.attributes.text = text;
        if(this.rendered){ // event without subscribing
            this.ui.onTextChange(this, text, oldText);
        }
        this.fireEvent('textchange', this, text, oldText);
    },

    /**
     * Triggers selection of this node
     */
    select : function(){
        var t = this.getOwnerTree();
        if(t){
            t.getSelectionModel().select(this);
        }
    },

    /**
     * Triggers deselection of this node
     * @param {Boolean} silent (optional) True to stop selection change events from firing.
     */
    unselect : function(silent){
        var t = this.getOwnerTree();
        if(t){
            t.getSelectionModel().unselect(this, silent);
        }
    },

    /**
     * Returns true if this node is selected
     * @return {Boolean}
     */
    isSelected : function(){
        var t = this.getOwnerTree();
        return t ? t.getSelectionModel().isSelected(this) : false;
    },

    /**
     * Expand this node.
     * @param {Boolean} deep (optional) True to expand all children as well
     * @param {Boolean} anim (optional) false to cancel the default animation
     * @param {Function} callback (optional) A callback to be called when
     * expanding this node completes (does not wait for deep expand to complete).
     * Called with 1 parameter, this node.
     * @param {Object} scope (optional) The scope (this reference) in which the callback is executed. Defaults to this TreeNode.
     */
    expand : function(deep, anim, callback, scope){
        if(!this.expanded){
            if(this.fireEvent('beforeexpand', this, deep, anim) === false){
                return;
            }
            if(!this.childrenRendered){
                this.renderChildren();
            }
            this.expanded = true;
            if(!this.isHiddenRoot() && (this.getOwnerTree().animate && anim !== false) || anim){
                this.ui.animExpand(function(){
                    this.fireEvent('expand', this);
                    this.runCallback(callback, scope || this, [this]);
                    if(deep === true){
                        this.expandChildNodes(true);
                    }
                }.createDelegate(this));
                return;
            }else{
                this.ui.expand();
                this.fireEvent('expand', this);
                this.runCallback(callback, scope || this, [this]);
            }
        }else{
           this.runCallback(callback, scope || this, [this]);
        }
        if(deep === true){
            this.expandChildNodes(true);
        }
    },

    runCallback : function(cb, scope, args){
        if(Ext.isFunction(cb)){
            cb.apply(scope, args);
        }
    },

    isHiddenRoot : function(){
        return this.isRoot && !this.getOwnerTree().rootVisible;
    },

    /**
     * Collapse this node.
     * @param {Boolean} deep (optional) True to collapse all children as well
     * @param {Boolean} anim (optional) false to cancel the default animation
     * @param {Function} callback (optional) A callback to be called when
     * expanding this node completes (does not wait for deep expand to complete).
     * Called with 1 parameter, this node.
     * @param {Object} scope (optional) The scope (this reference) in which the callback is executed. Defaults to this TreeNode.
     */
    collapse : function(deep, anim, callback, scope){
        if(this.expanded && !this.isHiddenRoot()){
            if(this.fireEvent('beforecollapse', this, deep, anim) === false){
                return;
            }
            this.expanded = false;
            if((this.getOwnerTree().animate && anim !== false) || anim){
                this.ui.animCollapse(function(){
                    this.fireEvent('collapse', this);
                    this.runCallback(callback, scope || this, [this]);
                    if(deep === true){
                        this.collapseChildNodes(true);
                    }
                }.createDelegate(this));
                return;
            }else{
                this.ui.collapse();
                this.fireEvent('collapse', this);
                this.runCallback(callback, scope || this, [this]);
            }
        }else if(!this.expanded){
            this.runCallback(callback, scope || this, [this]);
        }
        if(deep === true){
            var cs = this.childNodes;
            for(var i = 0, len = cs.length; i < len; i++) {
                cs[i].collapse(true, false);
            }
        }
    },

    // private
    delayedExpand : function(delay){
        if(!this.expandProcId){
            this.expandProcId = this.expand.defer(delay, this);
        }
    },

    // private
    cancelExpand : function(){
        if(this.expandProcId){
            clearTimeout(this.expandProcId);
        }
        this.expandProcId = false;
    },

    /**
     * Toggles expanded/collapsed state of the node
     */
    toggle : function(){
        if(this.expanded){
            this.collapse();
        }else{
            this.expand();
        }
    },

    /**
     * Ensures all parent nodes are expanded, and if necessary, scrolls
     * the node into view.
     * @param {Function} callback (optional) A function to call when the node has been made visible.
     * @param {Object} scope (optional) The scope (this reference) in which the callback is executed. Defaults to this TreeNode.
     */
    ensureVisible : function(callback, scope){
        var tree = this.getOwnerTree();
        tree.expandPath(this.parentNode ? this.parentNode.getPath() : this.getPath(), false, function(){
            var node = tree.getNodeById(this.id);  // Somehow if we don't do this, we lose changes that happened to node in the meantime
            tree.getTreeEl().scrollChildIntoView(node.ui.anchor);
            this.runCallback(callback, scope || this, [this]);
        }.createDelegate(this));
    },

    /**
     * Expand all child nodes
     * @param {Boolean} deep (optional) true if the child nodes should also expand their child nodes
     */
    expandChildNodes : function(deep){
        var cs = this.childNodes;
        for(var i = 0, len = cs.length; i < len; i++) {
            cs[i].expand(deep);
        }
    },

    /**
     * Collapse all child nodes
     * @param {Boolean} deep (optional) true if the child nodes should also collapse their child nodes
     */
    collapseChildNodes : function(deep){
        var cs = this.childNodes;
        for(var i = 0, len = cs.length; i < len; i++) {
            cs[i].collapse(deep);
        }
    },

    /**
     * Disables this node
     */
    disable : function(){
        this.disabled = true;
        this.unselect();
        if(this.rendered && this.ui.onDisableChange){ // event without subscribing
            this.ui.onDisableChange(this, true);
        }
        this.fireEvent('disabledchange', this, true);
    },

    /**
     * Enables this node
     */
    enable : function(){
        this.disabled = false;
        if(this.rendered && this.ui.onDisableChange){ // event without subscribing
            this.ui.onDisableChange(this, false);
        }
        this.fireEvent('disabledchange', this, false);
    },

    // private
    renderChildren : function(suppressEvent){
        if(suppressEvent !== false){
            this.fireEvent('beforechildrenrendered', this);
        }
        var cs = this.childNodes;
        for(var i = 0, len = cs.length; i < len; i++){
            cs[i].render(true);
        }
        this.childrenRendered = true;
    },

    // private
    sort : function(fn, scope){
        Ext.tree.TreeNode.superclass.sort.apply(this, arguments);
        if(this.childrenRendered){
            var cs = this.childNodes;
            for(var i = 0, len = cs.length; i < len; i++){
                cs[i].render(true);
            }
        }
    },

    // private
    render : function(bulkRender){
        this.ui.render(bulkRender);
        if(!this.rendered){
            // make sure it is registered
            this.getOwnerTree().registerNode(this);
            this.rendered = true;
            if(this.expanded){
                this.expanded = false;
                this.expand(false, false);
            }
        }
    },

    // private
    renderIndent : function(deep, refresh){
        if(refresh){
            this.ui.childIndent = null;
        }
        this.ui.renderIndent();
        if(deep === true && this.childrenRendered){
            var cs = this.childNodes;
            for(var i = 0, len = cs.length; i < len; i++){
                cs[i].renderIndent(true, refresh);
            }
        }
    },

    beginUpdate : function(){
        this.childrenRendered = false;
    },

    endUpdate : function(){
        if(this.expanded && this.rendered){
            this.renderChildren();
        }
    },

    //inherit docs
    destroy : function(silent){
        if(silent === true){
            this.unselect(true);
        }
        Ext.tree.TreeNode.superclass.destroy.call(this, silent);
        Ext.destroy(this.ui, this.loader);
        this.ui = this.loader = null;
    },

    // private
    onIdChange : function(id){
        this.ui.onIdChange(id);
    }
});

Ext.tree.TreePanel.nodeTypes.node = Ext.tree.TreeNode;


The source code

/*!
 * licensing@extjs.com
 * http://www.extjs.com/license
 */

/**
 * @class Ext.tree.TreeNodeUI
 * This class provides the default UI implementation for Ext TreeNodes.
 * The TreeNode UI implementation is separate from the
 * tree implementation, and allows customizing of the appearance of
 * tree nodes.

 *

 * If you are customizing the Tree's user interface, you
 * may need to extend this class, but you should never need to instantiate this class.

 *

 * This class provides access to the user interface components of an Ext TreeNode, through
 * {@link Ext.tree.TreeNode#getUI}
 */
Ext.tree.TreeNodeUI = function(node){
    this.node = node;
    this.rendered = false;
    this.animating = false;
    this.wasLeaf = true;
    this.ecc = 'x-tree-ec-icon x-tree-elbow';
    this.emptyIcon = Ext.BLANK_IMAGE_URL;
};

Ext.tree.TreeNodeUI.prototype = {
    // private
    removeChild : function(node){
        if(this.rendered){
            this.ctNode.removeChild(node.ui.getEl());
        }
    },

    // private
    beforeLoad : function(){
         this.addClass("x-tree-node-loading");
    },

    // private
    afterLoad : function(){
         this.removeClass("x-tree-node-loading");
    },

    // private
    onTextChange : function(node, text, oldText){
        if(this.rendered){
            this.textNode.innerHTML = text;
        }
    },

    // private
    onDisableChange : function(node, state){
        this.disabled = state;
        if (this.checkbox) {
            this.checkbox.disabled = state;
        }
        if(state){
            this.addClass("x-tree-node-disabled");
        }else{
            this.removeClass("x-tree-node-disabled");
        }
    },

    // private
    onSelectedChange : function(state){
        if(state){
            this.focus();
            this.addClass("x-tree-selected");
        }else{
            //this.blur();
            this.removeClass("x-tree-selected");
        }
    },

    // private
    onMove : function(tree, node, oldParent, newParent, index, refNode){
        this.childIndent = null;
        if(this.rendered){
            var targetNode = newParent.ui.getContainer();
            if(!targetNode){//target not rendered
                this.holder = document.createElement("div");
                this.holder.appendChild(this.wrap);
                return;
            }
            var insertBefore = refNode ? refNode.ui.getEl() : null;
            if(insertBefore){
                targetNode.insertBefore(this.wrap, insertBefore);
            }else{
                targetNode.appendChild(this.wrap);
            }
            this.node.renderIndent(true, oldParent != newParent);
        }
    },

/**
 * Adds one or more CSS classes to the node's UI element.
 * Duplicate classes are automatically filtered out.
 * @param {String/Array} className The CSS class to add, or an array of classes
 */
    addClass : function(cls){
        if(this.elNode){
            Ext.fly(this.elNode).addClass(cls);
        }
    },

/**
 * Removes one or more CSS classes from the node's UI element.
 * @param {String/Array} className The CSS class to remove, or an array of classes
 */
    removeClass : function(cls){
        if(this.elNode){
            Ext.fly(this.elNode).removeClass(cls);
        }
    },

    // private
    remove : function(){
        if(this.rendered){
            this.holder = document.createElement("div");
            this.holder.appendChild(this.wrap);
        }
    },

    // private
    fireEvent : function(){
        return this.node.fireEvent.apply(this.node, arguments);
    },

    // private
    initEvents : function(){
        this.node.on("move", this.onMove, this);

        if(this.node.disabled){
            this.onDisableChange(this.node, true);
        }
        if(this.node.hidden){
            this.hide();
        }
        var ot = this.node.getOwnerTree();
        var dd = ot.enableDD || ot.enableDrag || ot.enableDrop;
        if(dd && (!this.node.isRoot || ot.rootVisible)){
            Ext.dd.Registry.register(this.elNode, {
                node: this.node,
                handles: this.getDDHandles(),
                isHandle: false
            });
        }
    },

    // private
    getDDHandles : function(){
        return [this.iconNode, this.textNode, this.elNode];
    },

/**
 * Hides this node.
 */
    hide : function(){
        this.node.hidden = true;
        if(this.wrap){
            this.wrap.style.display = "none";
        }
    },

/**
 * Shows this node.
 */
    show : function(){
        this.node.hidden = false;
        if(this.wrap){
            this.wrap.style.display = "";
        }
    },

    // private
    onContextMenu : function(e){
        if (this.node.hasListener("contextmenu") || this.node.getOwnerTree().hasListener("contextmenu")) {
            e.preventDefault();
            this.focus();
            this.fireEvent("contextmenu", this.node, e);
        }
    },

    // private
    onClick : function(e){
        if(this.dropping){
            e.stopEvent();
            return;
        }
        if(this.fireEvent("beforeclick", this.node, e) !== false){
            var a = e.getTarget('a');
            if(!this.disabled && this.node.attributes.href && a){
                this.fireEvent("click", this.node, e);
                return;
            }else if(a && e.ctrlKey){
                e.stopEvent();
            }
            e.preventDefault();
            if(this.disabled){
                return;
            }

            if(this.node.attributes.singleClickExpand && !this.animating && this.node.isExpandable()){
                this.node.toggle();
            }

            this.fireEvent("click", this.node, e);
        }else{
            e.stopEvent();
        }
    },

    // private
    onDblClick : function(e){
        e.preventDefault();
        if(this.disabled){
            return;
        }
        if(this.fireEvent("beforedblclick", this.node, e) !== false){
            if(this.checkbox){
                this.toggleCheck();
            }
            if(!this.animating && this.node.isExpandable()){
                this.node.toggle();
            }
            this.fireEvent("dblclick", this.node, e);
        }
    },

    onOver : function(e){
        this.addClass('x-tree-node-over');
    },

    onOut : function(e){
        this.removeClass('x-tree-node-over');
    },

    // private
    onCheckChange : function(){
        var checked = this.checkbox.checked;
        // fix for IE6
        this.checkbox.defaultChecked = checked;
        this.node.attributes.checked = checked;
        this.fireEvent('checkchange', this.node, checked);
    },

    // private
    ecClick : function(e){
        if(!this.animating && this.node.isExpandable()){
            this.node.toggle();
        }
    },

    // private
    startDrop : function(){
        this.dropping = true;
    },

    // delayed drop so the click event doesn't get fired on a drop
    endDrop : function(){
       setTimeout(function(){
           this.dropping = false;
       }.createDelegate(this), 50);
    },

    // private
    expand : function(){
        this.updateExpandIcon();
        this.ctNode.style.display = "";
    },

    // private
    focus : function(){
        if(!this.node.preventHScroll){
            try{this.anchor.focus();
            }catch(e){}
        }else{
            try{
                var noscroll = this.node.getOwnerTree().getTreeEl().dom;
                var l = noscroll.scrollLeft;
                this.anchor.focus();
                noscroll.scrollLeft = l;
            }catch(e){}
        }
    },

/**
 * Sets the checked status of the tree node to the passed value, or, if no value was passed,
 * toggles the checked status. If the node was rendered with no checkbox, this has no effect.
 * @param {Boolean} value (optional) The new checked status.
 */
    toggleCheck : function(value){
        var cb = this.checkbox;
        if(cb){
            cb.checked = (value === undefined ? !cb.checked : value);
            this.onCheckChange();
        }
    },

    // private
    blur : function(){
        try{
            this.anchor.blur();
        }catch(e){}
    },

    // private
    animExpand : function(callback){
        var ct = Ext.get(this.ctNode);
        ct.stopFx();
        if(!this.node.isExpandable()){
            this.updateExpandIcon();
            this.ctNode.style.display = "";
            Ext.callback(callback);
            return;
        }
        this.animating = true;
        this.updateExpandIcon();

        ct.slideIn('t', {
           callback : function(){
               this.animating = false;
               Ext.callback(callback);
            },
            scope: this,
            duration: this.node.ownerTree.duration || .25
        });
    },

    // private
    highlight : function(){
        var tree = this.node.getOwnerTree();
        Ext.fly(this.wrap).highlight(
            tree.hlColor || "C3DAF9",
            {endColor: tree.hlBaseColor}
        );
    },

    // private
    collapse : function(){
        this.updateExpandIcon();
        this.ctNode.style.display = "none";
    },

    // private
    animCollapse : function(callback){
        var ct = Ext.get(this.ctNode);
        ct.enableDisplayMode('block');
        ct.stopFx();

        this.animating = true;
        this.updateExpandIcon();

        ct.slideOut('t', {
            callback : function(){
               this.animating = false;
               Ext.callback(callback);
            },
            scope: this,
            duration: this.node.ownerTree.duration || .25
        });
    },

    // private
    getContainer : function(){
        return this.ctNode;
    },

/**
 * Returns the element which encapsulates this node.
 * @return {HtmlElement} The DOM element. The default implementation uses a <li>.
 */
    getEl : function(){
        return this.wrap;
    },

    // private
    appendDDGhost : function(ghostNode){
        ghostNode.appendChild(this.elNode.cloneNode(true));
    },

    // private
    getDDRepairXY : function(){
        return Ext.lib.Dom.getXY(this.iconNode);
    },

    // private
    onRender : function(){
        this.render();
    },

    // private
    render : function(bulkRender){
        var n = this.node, a = n.attributes;
        var targetNode = n.parentNode ?
              n.parentNode.ui.getContainer() : n.ownerTree.innerCt.dom;

        if(!this.rendered){
            this.rendered = true;

            this.renderElements(n, a, targetNode, bulkRender);

            if(a.qtip){
               if(this.textNode.setAttributeNS){
                   this.textNode.setAttributeNS("ext", "qtip", a.qtip);
                   if(a.qtipTitle){
                       this.textNode.setAttributeNS("ext", "qtitle", a.qtipTitle);
                   }
               }else{
                   this.textNode.setAttribute("ext:qtip", a.qtip);
                   if(a.qtipTitle){
                       this.textNode.setAttribute("ext:qtitle", a.qtipTitle);
                   }
               }
            }else if(a.qtipCfg){
                a.qtipCfg.target = Ext.id(this.textNode);
                Ext.QuickTips.register(a.qtipCfg);
            }
            this.initEvents();
            if(!this.node.expanded){
                this.updateExpandIcon(true);
            }
        }else{
            if(bulkRender === true) {
                targetNode.appendChild(this.wrap);
            }
        }
    },

    // private
    renderElements : function(n, a, targetNode, bulkRender){
        // add some indent caching, this helps performance when rendering a large tree
        this.indentMarkup = n.parentNode ? n.parentNode.ui.getChildIndent() : '';

        var cb = Ext.isBoolean(a.checked),
            nel,
            href = a.href ? a.href : Ext.isGecko ? "" : "#",
            buf = ['
  • ',
            '',this.indentMarkup,"",
            '  ',
            '  ',
            cb ? ('' : '/>')) : '',
            '',n.text,"
    ",
            '
      ',
            "
      • "].join('');

        if(bulkRender !== true && n.nextSibling && (nel = n.nextSibling.ui.getEl())){
            this.wrap = Ext.DomHelper.insertHtml("beforeBegin", nel, buf);
        }else{
            this.wrap = Ext.DomHelper.insertHtml("beforeEnd", targetNode, buf);
        }

        this.elNode = this.wrap.childNodes[0];
        this.ctNode = this.wrap.childNodes[1];
        var cs = this.elNode.childNodes;
        this.indentNode = cs[0];
        this.ecNode = cs[1];
        this.iconNode = cs[2];
        var index = 3;
        if(cb){
            this.checkbox = cs[3];
            // fix for IE6
            this.checkbox.defaultChecked = this.checkbox.checked;
            index++;
        }
        this.anchor = cs[index];
        this.textNode = cs[index].firstChild;
    },

      /**
 * Returns the <a> element that provides focus for the node's UI.
 * @return {HtmlElement} The DOM anchor element.
 */
    getAnchor : function(){
        return this.anchor;
    },

      /**
 * Returns the text node.
 * @return {HtmlNode} The DOM text node.
 */
    getTextEl : function(){
        return this.textNode;
    },

      /**
 * Returns the icon <img> element.
 * @return {HtmlElement} The DOM image element.
 */
    getIconEl : function(){
        return this.iconNode;
    },

      /**
 * Returns the checked status of the node. If the node was rendered with no
 * checkbox, it returns false.
 * @return {Boolean} The checked flag.
 */
    isChecked : function(){
        return this.checkbox ? this.checkbox.checked : false;
    },

    // private
    updateExpandIcon : function(){
        if(this.rendered){
            var n = this.node,
                c1,
                c2,
                cls = n.isLast() ? "x-tree-elbow-end" : "x-tree-elbow",
                hasChild = n.hasChildNodes();
            if(hasChild || n.attributes.expandable){
                if(n.expanded){
                    cls += "-minus";
                    c1 = "x-tree-node-collapsed";
                    c2 = "x-tree-node-expanded";
                }else{
                    cls += "-plus";
                    c1 = "x-tree-node-expanded";
                    c2 = "x-tree-node-collapsed";
                }
                if(this.wasLeaf){
                    this.removeClass("x-tree-node-leaf");
                    this.wasLeaf = false;
                }
                if(this.c1 != c1 || this.c2 != c2){
                    Ext.fly(this.elNode).replaceClass(c1, c2);
                    this.c1 = c1; this.c2 = c2;
                }
            }else{
                if(!this.wasLeaf){
                    Ext.fly(this.elNode).replaceClass("x-tree-node-expanded", "x-tree-node-collapsed");
                    delete this.c1;
                    delete this.c2;
                    this.wasLeaf = true;
                }
            }
            var ecc = "x-tree-ec-icon "+cls;
            if(this.ecc != ecc){
                this.ecNode.className = ecc;
                this.ecc = ecc;
            }
        }
    },

    // private
    onIdChange: function(id){
        if(this.rendered){
            this.elNode.setAttribute('ext:tree-node-id', id);
        }
    },

    // private
    getChildIndent : function(){
        if(!this.childIndent){
            var buf = [],
                p = this.node;
            while(p){
                if(!p.isRoot || (p.isRoot && p.ownerTree.rootVisible)){
                    if(!p.isLast()) {
                        buf.unshift('  ');
                    } else {
                        buf.unshift('  ');
                    }
                }
                p = p.parentNode;
            }
            this.childIndent = buf.join("");
        }
        return this.childIndent;
    },

    // private
    renderIndent : function(){
        if(this.rendered){
            var indent = "",
                p = this.node.parentNode;
            if(p){
                indent = p.ui.getChildIndent();
            }
            if(this.indentMarkup != indent){ // don't rerender if not required
                this.indentNode.innerHTML = indent;
                this.indentMarkup = indent;
            }
            this.updateExpandIcon();
        }
    },

    destroy : function(){
        if(this.elNode){
            Ext.dd.Registry.unregister(this.elNode.id);
        }

        Ext.each(['textnode', 'anchor', 'checkbox', 'indentNode', 'ecNode', 'iconNode', 'elNode', 'ctNode', 'wrap', 'holder'], function(el){
            if(this[el]){
                Ext.fly(this[el]).remove();
                delete this[el];
            }
        }, this);
        delete this.node;
    }
};

      /**
 * @class Ext.tree.RootTreeNodeUI
 * This class provides the default UI implementation for root Ext TreeNodes.
 * The RootTreeNode UI implementation allows customizing the appearance of the root tree node.

 *

 * If you are customizing the Tree's user interface, you
 * may need to extend this class, but you should never need to instantiate this class.

 */
Ext.tree.RootTreeNodeUI = Ext.extend(Ext.tree.TreeNodeUI, {
    // private
    render : function(){
        if(!this.rendered){
            var targetNode = this.node.ownerTree.innerCt.dom;
            this.node.expanded = true;
            targetNode.innerHTML = '
      ';
            this.wrap = this.ctNode = targetNode.firstChild;
        }
    },
    collapse : Ext.emptyFn,
    expand : Ext.emptyFn
});


The source code

/*!
 * licensing@extjs.com
 * http://www.extjs.com/license
 */

/**
 * @class Ext.tree.TreePanel
 * @extends Ext.Panel
 *
The TreePanel provides tree-structured UI representation of tree-structured data.

 *
{@link Ext.tree.TreeNode TreeNode}s added to the TreePanel may each contain metadata
 * used by your application in their {@link Ext.tree.TreeNode#attributes attributes} property.

 *
A TreePanel must have a {@link #root} node before it is rendered. This may either be
 * specified using the {@link #root} config option, or using the {@link #setRootNode} method.
 *
An example of tree rendered to an existing div:

var tree = new Ext.tree.TreePanel({
    renderTo: 'tree-div',
    useArrows: true,
    autoScroll: true,
    animate: true,
    enableDD: true,
    containerScroll: true,
    border: false,
    // auto create TreeLoader
    dataUrl: 'get-nodes.php',

    root: {
        nodeType: 'async',
        text: 'Ext JS',
        draggable: false,
        id: 'source'
    }
});

tree.getRootNode().expand();
 *

 *
The example above would work with a data packet similar to this:

[{
    "text": "adapter",
    "id": "source\/adapter",
    "cls": "folder"
}, {
    "text": "dd",
    "id": "source\/dd",
    "cls": "folder"
}, {
    "text": "debug.js",
    "id": "source\/debug.js",
    "leaf": true,
    "cls": "file"
}]
 *

 *
An example of tree within a Viewport:

new Ext.Viewport({
    layout: 'border',
    items: [{
        region: 'west',
        collapsible: true,
        title: 'Navigation',
        xtype: 'treepanel',
        width: 200,
        autoScroll: true,
        split: true,
        loader: new Ext.tree.TreeLoader(),
        root: new Ext.tree.AsyncTreeNode({
            expanded: true,
            children: [{
                text: 'Menu Option 1',
                leaf: true
            }, {
                text: 'Menu Option 2',
                leaf: true
            }, {
                text: 'Menu Option 3',
                leaf: true
            }]
        }),
        rootVisible: false,
        listeners: {
            click: function(n) {
                Ext.Msg.alert('Navigation Tree Click', 'You clicked: "' + n.attributes.text + '"');
            }
        }
    }, {
        region: 'center',
        xtype: 'tabpanel',
        // remaining code not shown ...
    }]
});

 *
 * @cfg {Ext.tree.TreeNode} root The root node for the tree.
 * @cfg {Boolean} rootVisible false to hide the root node (defaults to true)
 * @cfg {Boolean} lines false to disable tree lines (defaults to true)
 * @cfg {Boolean} enableDD true to enable drag and drop
 * @cfg {Boolean} enableDrag true to enable just drag
 * @cfg {Boolean} enableDrop true to enable just drop
 * @cfg {Object} dragConfig Custom config to pass to the {@link Ext.tree.TreeDragZone} instance
 * @cfg {Object} dropConfig Custom config to pass to the {@link Ext.tree.TreeDropZone} instance
 * @cfg {String} ddGroup The DD group this TreePanel belongs to
 * @cfg {Boolean} ddAppendOnly true if the tree should only allow append drops (use for trees which are sorted)
 * @cfg {Boolean} ddScroll true to enable body scrolling
 * @cfg {Boolean} containerScroll true to register this container with ScrollManager
 * @cfg {Boolean} hlDrop false to disable node highlight on drop (defaults to the value of {@link Ext#enableFx})
 * @cfg {String} hlColor The color of the node highlight (defaults to 'C3DAF9')
 * @cfg {Boolean} animate true to enable animated expand/collapse (defaults to the value of {@link Ext#enableFx})
 * @cfg {Boolean} singleExpand true if only 1 node per branch may be expanded
 * @cfg {Object} selModel A tree selection model to use with this TreePanel (defaults to an {@link Ext.tree.DefaultSelectionModel})
 * @cfg {Boolean} trackMouseOver false to disable mouse over highlighting
 * @cfg {Ext.tree.TreeLoader} loader A {@link Ext.tree.TreeLoader} for use with this TreePanel
 * @cfg {String} pathSeparator The token used to separate sub-paths in path strings (defaults to '/')
 * @cfg {Boolean} useArrows true to use Vista-style arrows in the tree (defaults to false)
 * @cfg {String} requestMethod The HTTP request method for loading data (defaults to the value of {@link Ext.Ajax#method}).
 *
 * @constructor
 * @param {Object} config
 * @xtype treepanel
 */
Ext.tree.TreePanel = Ext.extend(Ext.Panel, {
    rootVisible : true,
    animate : Ext.enableFx,
    lines : true,
    enableDD : false,
    hlDrop : Ext.enableFx,
    pathSeparator : '/',

    /**
     * @cfg {Array} bubbleEvents
     *
An array of events that, when fired, should be bubbled to any parent container.
     * See {@link Ext.util.Observable#enableBubble}.
     * Defaults to [].
     */
    bubbleEvents : [],

    initComponent : function(){
        Ext.tree.TreePanel.superclass.initComponent.call(this);

        if(!this.eventModel){
            this.eventModel = new Ext.tree.TreeEventModel(this);
        }

        // initialize the loader
        var l = this.loader;
        if(!l){
            l = new Ext.tree.TreeLoader({
                dataUrl: this.dataUrl,
                requestMethod: this.requestMethod
            });
        }else if(Ext.isObject(l) && !l.load){
            l = new Ext.tree.TreeLoader(l);
        }
        this.loader = l;

        this.nodeHash = {};

        /**
        * The root node of this tree.
        * @type Ext.tree.TreeNode
        * @property root
        */
        if(this.root){
            var r = this.root;
            delete this.root;
            this.setRootNode(r);
        }

        this.addEvents(

            /**
            * @event append
            * Fires when a new child node is appended to a node in this tree.
            * @param {Tree} tree The owner tree
            * @param {Node} parent The parent node
            * @param {Node} node The newly appended node
            * @param {Number} index The index of the newly appended node
            */
           'append',
           /**
            * @event remove
            * Fires when a child node is removed from a node in this tree.
            * @param {Tree} tree The owner tree
            * @param {Node} parent The parent node
            * @param {Node} node The child node removed
            */
           'remove',
           /**
            * @event movenode
            * Fires when a node is moved to a new location in the tree
            * @param {Tree} tree The owner tree
            * @param {Node} node The node moved
            * @param {Node} oldParent The old parent of this node
            * @param {Node} newParent The new parent of this node
            * @param {Number} index The index it was moved to
            */
           'movenode',
           /**
            * @event insert
            * Fires when a new child node is inserted in a node in this tree.
            * @param {Tree} tree The owner tree
            * @param {Node} parent The parent node
            * @param {Node} node The child node inserted
            * @param {Node} refNode The child node the node was inserted before
            */
           'insert',
           /**
            * @event beforeappend
            * Fires before a new child is appended to a node in this tree, return false to cancel the append.
            * @param {Tree} tree The owner tree
            * @param {Node} parent The parent node
            * @param {Node} node The child node to be appended
            */
           'beforeappend',
           /**
            * @event beforeremove
            * Fires before a child is removed from a node in this tree, return false to cancel the remove.
            * @param {Tree} tree The owner tree
            * @param {Node} parent The parent node
            * @param {Node} node The child node to be removed
            */
           'beforeremove',
           /**
            * @event beforemovenode
            * Fires before a node is moved to a new location in the tree. Return false to cancel the move.
            * @param {Tree} tree The owner tree
            * @param {Node} node The node being moved
            * @param {Node} oldParent The parent of the node
            * @param {Node} newParent The new parent the node is moving to
            * @param {Number} index The index it is being moved to
            */
           'beforemovenode',
           /**
            * @event beforeinsert
            * Fires before a new child is inserted in a node in this tree, return false to cancel the insert.
            * @param {Tree} tree The owner tree
            * @param {Node} parent The parent node
            * @param {Node} node The child node to be inserted
            * @param {Node} refNode The child node the node is being inserted before
            */
            'beforeinsert',

            /**
            * @event beforeload
            * Fires before a node is loaded, return false to cancel
            * @param {Node} node The node being loaded
            */
            'beforeload',
            /**
            * @event load
            * Fires when a node is loaded
            * @param {Node} node The node that was loaded
            */
            'load',
            /**
            * @event textchange
            * Fires when the text for a node is changed
            * @param {Node} node The node
            * @param {String} text The new text
            * @param {String} oldText The old text
            */
            'textchange',
            /**
            * @event beforeexpandnode
            * Fires before a node is expanded, return false to cancel.
            * @param {Node} node The node
            * @param {Boolean} deep
            * @param {Boolean} anim
            */
            'beforeexpandnode',
            /**
            * @event beforecollapsenode
            * Fires before a node is collapsed, return false to cancel.
            * @param {Node} node The node
            * @param {Boolean} deep
            * @param {Boolean} anim
            */
            'beforecollapsenode',
            /**
            * @event expandnode
            * Fires when a node is expanded
            * @param {Node} node The node
            */
            'expandnode',
            /**
            * @event disabledchange
            * Fires when the disabled status of a node changes
            * @param {Node} node The node
            * @param {Boolean} disabled
            */
            'disabledchange',
            /**
            * @event collapsenode
            * Fires when a node is collapsed
            * @param {Node} node The node
            */
            'collapsenode',
            /**
            * @event beforeclick
            * Fires before click processing on a node. Return false to cancel the default action.
            * @param {Node} node The node
            * @param {Ext.EventObject} e The event object
            */
            'beforeclick',
            /**
            * @event click
            * Fires when a node is clicked
            * @param {Node} node The node
            * @param {Ext.EventObject} e The event object
            */
            'click',
            /**
            * @event containerclick
            * Fires when the tree container is clicked
            * @param {Tree} this
            * @param {Ext.EventObject} e The event object
            */
            'containerclick',
            /**
            * @event checkchange
            * Fires when a node with a checkbox's checked property changes
            * @param {Node} this This node
            * @param {Boolean} checked
            */
            'checkchange',
            /**
            * @event beforedblclick
            * Fires before double click processing on a node. Return false to cancel the default action.
            * @param {Node} node The node
            * @param {Ext.EventObject} e The event object
            */
            'beforedblclick',
            /**
            * @event dblclick
            * Fires when a node is double clicked
            * @param {Node} node The node
            * @param {Ext.EventObject} e The event object
            */
            'dblclick',
            /**
            * @event containerdblclick
            * Fires when the tree container is double clicked
            * @param {Tree} this
            * @param {Ext.EventObject} e The event object
            */
            'containerdblclick',
            /**
            * @event contextmenu
            * Fires when a node is right clicked. To display a context menu in response to this
            * event, first create a Menu object (see {@link Ext.menu.Menu} for details), then add
            * a handler for this event:

new Ext.tree.TreePanel({
    title: 'My TreePanel',
    root: new Ext.tree.AsyncTreeNode({
        text: 'The Root',
        children: [
            { text: 'Child node 1', leaf: true },
            { text: 'Child node 2', leaf: true }
        ]
    }),
    contextMenu: new Ext.menu.Menu({
        items: [{
            id: 'delete-node',
            text: 'Delete Node'
        }],
        listeners: {
            itemclick: function(item) {
                switch (item.id) {
                    case 'delete-node':
                        var n = item.parentMenu.contextNode;
                        if (n.parentNode) {
                            n.remove();
                        }
                        break;
                }
            }
        }
    }),
    listeners: {
        contextmenu: function(node, e) {
//          Register the context node with the menu so that a Menu Item's handler function can access
//          it via its {@link Ext.menu.BaseItem#parentMenu parentMenu} property.
            node.select();
            var c = node.getOwnerTree().contextMenu;
            c.contextNode = node;
            c.showAt(e.getXY());
        }
    }
});

            * @param {Node} node The node
            * @param {Ext.EventObject} e The event object
            */
            'contextmenu',
            /**
            * @event containercontextmenu
            * Fires when the tree container is right clicked
            * @param {Tree} this
            * @param {Ext.EventObject} e The event object
            */
            'containercontextmenu',
            /**
            * @event beforechildrenrendered
            * Fires right before the child nodes for a node are rendered
            * @param {Node} node The node
            */
            'beforechildrenrendered',
           /**
             * @event startdrag
             * Fires when a node starts being dragged
             * @param {Ext.tree.TreePanel} this
             * @param {Ext.tree.TreeNode} node
             * @param {event} e The raw browser event
             */
            'startdrag',
            /**
             * @event enddrag
             * Fires when a drag operation is complete
             * @param {Ext.tree.TreePanel} this
             * @param {Ext.tree.TreeNode} node
             * @param {event} e The raw browser event
             */
            'enddrag',
            /**
             * @event dragdrop
             * Fires when a dragged node is dropped on a valid DD target
             * @param {Ext.tree.TreePanel} this
             * @param {Ext.tree.TreeNode} node
             * @param {DD} dd The dd it was dropped on
             * @param {event} e The raw browser event
             */
            'dragdrop',
            /**
             * @event beforenodedrop
             * Fires when a DD object is dropped on a node in this tree for preprocessing. Return false to cancel the drop. The dropEvent
             * passed to handlers has the following properties:

             *

             *
  • tree - The TreePanel
    •
             *
  • target - The node being targeted for the drop
    •
             *
  • data - The drag data from the drag source
    •
             *
  • point - The point of the drop - append, above or below
    •
             *
  • source - The drag source
    •
             *
  • rawEvent - Raw mouse event
    •
             *
  • dropNode - Drop node(s) provided by the source OR you can supply node(s)
             * to be inserted by setting them on this object.
    •
             *
  • cancel - Set this to true to cancel the drop.
    •
             *
  • dropStatus - If the default drop action is cancelled but the drop is valid, setting this to true
             * will prevent the animated 'repair' from appearing.
    •
             *

             * @param {Object} dropEvent
             */
            'beforenodedrop',
            /**
             * @event nodedrop
             * Fires after a DD object is dropped on a node in this tree. The dropEvent
             * passed to handlers has the following properties:

             *

             *
  • tree - The TreePanel
    •
             *
  • target - The node being targeted for the drop
    •
             *
  • data - The drag data from the drag source
    •
             *
  • point - The point of the drop - append, above or below
    •
             *
  • source - The drag source
    •
             *
  • rawEvent - Raw mouse event
    •
             *
  • dropNode - Dropped node(s).
    •
             *

             * @param {Object} dropEvent
             */
            'nodedrop',
             /**
             * @event nodedragover
             * Fires when a tree node is being targeted for a drag drop, return false to signal drop not allowed. The dragOverEvent
             * passed to handlers has the following properties:

             *

             *
  • tree - The TreePanel
    •
             *
  • target - The node being targeted for the drop
    •
             *
  • data - The drag data from the drag source
    •
             *
  • point - The point of the drop - append, above or below
    •
             *
  • source - The drag source
    •
             *
  • rawEvent - Raw mouse event
    •
             *
  • dropNode - Drop node(s) provided by the source.
    •
             *
  • cancel - Set this to true to signal drop not allowed.
    •
             *

             * @param {Object} dragOverEvent
             */
            'nodedragover'
        );
        if(this.singleExpand){
            this.on('beforeexpandnode', this.restrictExpand, this);
        }
    },

    // private
    proxyNodeEvent : function(ename, a1, a2, a3, a4, a5, a6){
        if(ename == 'collapse' || ename == 'expand' || ename == 'beforecollapse' || ename == 'beforeexpand' || ename == 'move' || ename == 'beforemove'){
            ename = ename+'node';
        }
        // args inline for performance while bubbling events
        return this.fireEvent(ename, a1, a2, a3, a4, a5, a6);
    },

    /**
     * Returns this root node for this tree
     * @return {Node}
     */
    getRootNode : function(){
        return this.root;
    },

    /**
     * Sets the root node for this tree. If the TreePanel has already rendered a root node, the
     * previous root node (and all of its descendants) are destroyed before the new root node is rendered.
     * @param {Node} node
     * @return {Node}
     */
    setRootNode : function(node){
        this.destroyRoot();
        if(!node.render){ // attributes passed
            node = this.loader.createNode(node);
        }
        this.root = node;
        node.ownerTree = this;
        node.isRoot = true;
        this.registerNode(node);
        if(!this.rootVisible){
            var uiP = node.attributes.uiProvider;
            node.ui = uiP ? new uiP(node) : new Ext.tree.RootTreeNodeUI(node);
        }
        if(this.innerCt){
            this.clearInnerCt();
            this.renderRoot();
        }
        return node;
    },

    clearInnerCt : function(){
        this.innerCt.update('');
    },

    // private
    renderRoot : function(){
        this.root.render();
        if(!this.rootVisible){
            this.root.renderChildren();
        }
    },

    /**
     * Gets a node in this tree by its id
     * @param {String} id
     * @return {Node}
     */
    getNodeById : function(id){
        return this.nodeHash[id];
    },

    // private
    registerNode : function(node){
        this.nodeHash[node.id] = node;
    },

    // private
    unregisterNode : function(node){
        delete this.nodeHash[node.id];
    },

    // private
    toString : function(){
        return '[Tree'+(this.id?' '+this.id:'')+']';
    },

    // private
    restrictExpand : function(node){
        var p = node.parentNode;
        if(p){
            if(p.expandedChild && p.expandedChild.parentNode == p){
                p.expandedChild.collapse();
            }
            p.expandedChild = node;
        }
    },

    /**
     * Retrieve an array of checked nodes, or an array of a specific attribute of checked nodes (e.g. 'id')
     * @param {String} attribute (optional) Defaults to null (return the actual nodes)
     * @param {TreeNode} startNode (optional) The node to start from, defaults to the root
     * @return {Array}
     */
    getChecked : function(a, startNode){
        startNode = startNode || this.root;
        var r = [];
        var f = function(){
            if(this.attributes.checked){
                r.push(!a ? this : (a == 'id' ? this.id : this.attributes[a]));
            }
        };
        startNode.cascade(f);
        return r;
    },

    /**
     * Returns the default {@link Ext.tree.TreeLoader} for this TreePanel.
     * @return {Ext.tree.TreeLoader} The TreeLoader for this TreePanel.
     */
    getLoader : function(){
        return this.loader;
    },

    /**
     * Expand all nodes
     */
    expandAll : function(){
        this.root.expand(true);
    },

    /**
     * Collapse all nodes
     */
    collapseAll : function(){
        this.root.collapse(true);
    },

    /**
     * Returns the selection model used by this TreePanel.
     * @return {TreeSelectionModel} The selection model used by this TreePanel
     */
    getSelectionModel : function(){
        if(!this.selModel){
            this.selModel = new Ext.tree.DefaultSelectionModel();
        }
        return this.selModel;
    },

    /**
     * Expands a specified path in this TreePanel. A path can be retrieved from a node with {@link Ext.data.Node#getPath}
     * @param {String} path
     * @param {String} attr (optional) The attribute used in the path (see {@link Ext.data.Node#getPath} for more info)
     * @param {Function} callback (optional) The callback to call when the expand is complete. The callback will be called with
     * (bSuccess, oLastNode) where bSuccess is if the expand was successful and oLastNode is the last node that was expanded.
     */
    expandPath : function(path, attr, callback){
        attr = attr || 'id';
        var keys = path.split(this.pathSeparator);
        var curNode = this.root;
        if(curNode.attributes[attr] != keys[1]){ // invalid root
            if(callback){
                callback(false, null);
            }
            return;
        }
        var index = 1;
        var f = function(){
            if(++index == keys.length){
                if(callback){
                    callback(true, curNode);
                }
                return;
            }
            var c = curNode.findChild(attr, keys[index]);
            if(!c){
                if(callback){
                    callback(false, curNode);
                }
                return;
            }
            curNode = c;
            c.expand(false, false, f);
        };
        curNode.expand(false, false, f);
    },

    /**
     * Selects the node in this tree at the specified path. A path can be retrieved from a node with {@link Ext.data.Node#getPath}
     * @param {String} path
     * @param {String} attr (optional) The attribute used in the path (see {@link Ext.data.Node#getPath} for more info)
     * @param {Function} callback (optional) The callback to call when the selection is complete. The callback will be called with
     * (bSuccess, oSelNode) where bSuccess is if the selection was successful and oSelNode is the selected node.
     */
    selectPath : function(path, attr, callback){
        attr = attr || 'id';
        var keys = path.split(this.pathSeparator),
            v = keys.pop();
        if(keys.length > 1){
            var f = function(success, node){
                if(success && node){
                    var n = node.findChild(attr, v);
                    if(n){
                        n.select();
                        if(callback){
                            callback(true, n);
                        }
                    }else if(callback){
                        callback(false, n);
                    }
                }else{
                    if(callback){
                        callback(false, n);
                    }
                }
            };
            this.expandPath(keys.join(this.pathSeparator), attr, f);
        }else{
            this.root.select();
            if(callback){
                callback(true, this.root);
            }
        }
    },

    /**
     * Returns the underlying Element for this tree
     * @return {Ext.Element} The Element
     */
    getTreeEl : function(){
        return this.body;
    },

    // private
    onRender : function(ct, position){
        Ext.tree.TreePanel.superclass.onRender.call(this, ct, position);
        this.el.addClass('x-tree');
        this.innerCt = this.body.createChild({tag:'ul',
               cls:'x-tree-root-ct ' +
               (this.useArrows ? 'x-tree-arrows' : this.lines ? 'x-tree-lines' : 'x-tree-no-lines')});
    },

    // private
    initEvents : function(){
        Ext.tree.TreePanel.superclass.initEvents.call(this);

        if(this.containerScroll){
            Ext.dd.ScrollManager.register(this.body);
        }
        if((this.enableDD || this.enableDrop) && !this.dropZone){
           /**
            * The dropZone used by this tree if drop is enabled (see {@link #enableDD} or {@link #enableDrop})
            * @property dropZone
            * @type Ext.tree.TreeDropZone
            */
             this.dropZone = new Ext.tree.TreeDropZone(this, this.dropConfig || {
               ddGroup: this.ddGroup || 'TreeDD', appendOnly: this.ddAppendOnly === true
           });
        }
        if((this.enableDD || this.enableDrag) && !this.dragZone){
           /**
            * The dragZone used by this tree if drag is enabled (see {@link #enableDD} or {@link #enableDrag})
            * @property dragZone
            * @type Ext.tree.TreeDragZone
            */
            this.dragZone = new Ext.tree.TreeDragZone(this, this.dragConfig || {
               ddGroup: this.ddGroup || 'TreeDD',
               scroll: this.ddScroll
           });
        }
        this.getSelectionModel().init(this);
    },

    // private
    afterRender : function(){
        Ext.tree.TreePanel.superclass.afterRender.call(this);
        this.renderRoot();
    },

    beforeDestroy : function(){
        if(this.rendered){
            Ext.dd.ScrollManager.unregister(this.body);
            Ext.destroy(this.dropZone, this.dragZone);
        }
        this.destroyRoot();
        Ext.destroy(this.loader);
        this.nodeHash = this.root = this.loader = null;
        Ext.tree.TreePanel.superclass.beforeDestroy.call(this);
    },

    /**
     * Destroy the root node. Not included by itself because we need to pass the silent parameter.
     * @private
     */
    destroyRoot : function(){
        if(this.root && this.root.destroy){
            this.root.destroy(true);
        }
    }

    /**
     * @cfg {String/Number} activeItem
     * @hide
     */
    /**
     * @cfg {Boolean} autoDestroy
     * @hide
     */
    /**
     * @cfg {Object/String/Function} autoLoad
     * @hide
     */
    /**
     * @cfg {Boolean} autoWidth
     * @hide
     */
    /**
     * @cfg {Boolean/Number} bufferResize
     * @hide
     */
    /**
     * @cfg {String} defaultType
     * @hide
     */
    /**
     * @cfg {Object} defaults
     * @hide
     */
    /**
     * @cfg {Boolean} hideBorders
     * @hide
     */
    /**
     * @cfg {Mixed} items
     * @hide
     */
    /**
     * @cfg {String} layout
     * @hide
     */
    /**
     * @cfg {Object} layoutConfig
     * @hide
     */
    /**
     * @cfg {Boolean} monitorResize
     * @hide
     */
    /**
     * @property items
     * @hide
     */
    /**
     * @method cascade
     * @hide
     */
    /**
     * @method doLayout
     * @hide
     */
    /**
     * @method find
     * @hide
     */
    /**
     * @method findBy
     * @hide
     */
    /**
     * @method findById
     * @hide
     */
    /**
     * @method findByType
     * @hide
     */
    /**
     * @method getComponent
     * @hide
     */
    /**
     * @method getLayout
     * @hide
     */
    /**
     * @method getUpdater
     * @hide
     */
    /**
     * @method insert
     * @hide
     */
    /**
     * @method load
     * @hide
     */
    /**
     * @method remove
     * @hide
     */
    /**
     * @event add
     * @hide
     */
    /**
     * @method removeAll
     * @hide
     */
    /**
     * @event afterLayout
     * @hide
     */
    /**
     * @event beforeadd
     * @hide
     */
    /**
     * @event beforeremove
     * @hide
     */
    /**
     * @event remove
     * @hide
     */

    /**
     * @cfg {String} allowDomMove  @hide
     */
    /**
     * @cfg {String} autoEl @hide
     */
    /**
     * @cfg {String} applyTo  @hide
     */
    /**
     * @cfg {String} contentEl  @hide
     */
    /**
     * @cfg {Mixed} data  @hide
     */
    /**
     * @cfg {Mixed} tpl  @hide
     */
    /**
     * @cfg {String} tplWriteMode  @hide
     */
    /**
     * @cfg {String} disabledClass  @hide
     */
    /**
     * @cfg {String} elements  @hide
     */
    /**
     * @cfg {String} html  @hide
     */
    /**
     * @cfg {Boolean} preventBodyReset
     * @hide
     */
    /**
     * @property disabled
     * @hide
     */
    /**
     * @method applyToMarkup
     * @hide
     */
    /**
     * @method enable
     * @hide
     */
    /**
     * @method disable
     * @hide
     */
    /**
     * @method setDisabled
     * @hide
     */
});

Ext.tree.TreePanel.nodeTypes = {};

Ext.reg('treepanel', Ext.tree.TreePanel);


The source code

/*!
 * licensing@extjs.com
 * http://www.extjs.com/license
 */

/**
 * @class Ext.tree.DefaultSelectionModel
 * @extends Ext.util.Observable
 * The default single selection for a TreePanel.
 */
Ext.tree.DefaultSelectionModel = function(config){
   this.selNode = null;

   this.addEvents(

/**
        * @event selectionchange
        * Fires when the selected node changes
        * @param {DefaultSelectionModel} this
        * @param {TreeNode} node the new selection
        */
       'selectionchange',

/**
        * @event beforeselect
        * Fires before the selected node changes, return false to cancel the change
        * @param {DefaultSelectionModel} this
        * @param {TreeNode} node the new selection
        * @param {TreeNode} node the old selection
        */
       'beforeselect'
   );

    Ext.apply(this, config);
    Ext.tree.DefaultSelectionModel.superclass.constructor.call(this);
};

Ext.extend(Ext.tree.DefaultSelectionModel, Ext.util.Observable, {
    init : function(tree){
        this.tree = tree;
        tree.mon(tree.getTreeEl(), 'keydown', this.onKeyDown, this);
        tree.on('click', this.onNodeClick, this);
    },

    onNodeClick : function(node, e){
        this.select(node);
    },

/**
     * Select a node.
     * @param {TreeNode} node The node to select
     * @return {TreeNode} The selected node
     */
    select : function(node, /* private*/ selectNextNode){
        // If node is hidden, select the next node in whatever direction was being moved in.
        if (!Ext.fly(node.ui.wrap).isVisible() && selectNextNode) {
            return selectNextNode.call(this, node);
        }
        var last = this.selNode;
        if(node == last){
            node.ui.onSelectedChange(true);
        }else if(this.fireEvent('beforeselect', this, node, last) !== false){
            if(last && last.ui){
                last.ui.onSelectedChange(false);
            }
            this.selNode = node;
            node.ui.onSelectedChange(true);
            this.fireEvent('selectionchange', this, node, last);
        }
        return node;
    },

/**
     * Deselect a node.
     * @param {TreeNode} node The node to unselect
     * @param {Boolean} silent True to stop the selectionchange event from firing.
     */
    unselect : function(node, silent){
        if(this.selNode == node){
            this.clearSelections(silent);
        }
    },

/**
     * Clear all selections
     * @param {Boolean} silent True to stop the selectionchange event from firing.
     */
    clearSelections : function(silent){
        var n = this.selNode;
        if(n){
            n.ui.onSelectedChange(false);
            this.selNode = null;
            if(silent !== true){
                this.fireEvent('selectionchange', this, null);
            }
        }
        return n;
    },

/**
     * Get the selected node
     * @return {TreeNode} The selected node
     */
    getSelectedNode : function(){
        return this.selNode;
    },

/**
     * Returns true if the node is selected
     * @param {TreeNode} node The node to check
     * @return {Boolean}
     */
    isSelected : function(node){
        return this.selNode == node;
    },

/**
     * Selects the node above the selected node in the tree, intelligently walking the nodes
     * @return TreeNode The new selection
     */
    selectPrevious : function(/* private */ s){
        if(!(s = s || this.selNode || this.lastSelNode)){
            return null;
        }
        // Here we pass in the current function to select to indicate the direction we're moving
        var ps = s.previousSibling;
        if(ps){
            if(!ps.isExpanded() || ps.childNodes.length < 1){
                return this.select(ps, this.selectPrevious);
            } else{
                var lc = ps.lastChild;
                while(lc && lc.isExpanded() && Ext.fly(lc.ui.wrap).isVisible() && lc.childNodes.length > 0){
                    lc = lc.lastChild;
                }
                return this.select(lc, this.selectPrevious);
            }
        } else if(s.parentNode && (this.tree.rootVisible || !s.parentNode.isRoot)){
            return this.select(s.parentNode, this.selectPrevious);
        }
        return null;
    },

/**
     * Selects the node above the selected node in the tree, intelligently walking the nodes
     * @return TreeNode The new selection
     */
    selectNext : function(/* private */ s){
        if(!(s = s || this.selNode || this.lastSelNode)){
            return null;
        }
        // Here we pass in the current function to select to indicate the direction we're moving
        if(s.firstChild && s.isExpanded() && Ext.fly(s.ui.wrap).isVisible()){
             return this.select(s.firstChild, this.selectNext);
         }else if(s.nextSibling){
             return this.select(s.nextSibling, this.selectNext);
         }else if(s.parentNode){
            var newS = null;
            s.parentNode.bubble(function(){
                if(this.nextSibling){
                    newS = this.getOwnerTree().selModel.select(this.nextSibling, this.selectNext);
                    return false;
                }
            });
            return newS;
         }
        return null;
    },

    onKeyDown : function(e){
        var s = this.selNode || this.lastSelNode;
        // undesirable, but required
        var sm = this;
        if(!s){
            return;
        }
        var k = e.getKey();
        switch(k){
             case e.DOWN:
                 e.stopEvent();
                 this.selectNext();
             break;
             case e.UP:
                 e.stopEvent();
                 this.selectPrevious();
             break;
             case e.RIGHT:
                 e.preventDefault();
                 if(s.hasChildNodes()){
                     if(!s.isExpanded()){
                         s.expand();
                     }else if(s.firstChild){
                         this.select(s.firstChild, e);
                     }
                 }
             break;
             case e.LEFT:
                 e.preventDefault();
                 if(s.hasChildNodes() && s.isExpanded()){
                     s.collapse();
                 }else if(s.parentNode && (this.tree.rootVisible || s.parentNode != this.tree.getRootNode())){
                     this.select(s.parentNode, e);
                 }
             break;
        };
    }
});

/**
 * @class Ext.tree.MultiSelectionModel
 * @extends Ext.util.Observable
 * Multi selection for a TreePanel.
 */
Ext.tree.MultiSelectionModel = function(config){
   this.selNodes = [];
   this.selMap = {};
   this.addEvents(

/**
        * @event selectionchange
        * Fires when the selected nodes change
        * @param {MultiSelectionModel} this
        * @param {Array} nodes Array of the selected nodes
        */
       'selectionchange'
   );
    Ext.apply(this, config);
    Ext.tree.MultiSelectionModel.superclass.constructor.call(this);
};

Ext.extend(Ext.tree.MultiSelectionModel, Ext.util.Observable, {
    init : function(tree){
        this.tree = tree;
        tree.mon(tree.getTreeEl(), 'keydown', this.onKeyDown, this);
        tree.on('click', this.onNodeClick, this);
    },

    onNodeClick : function(node, e){
        if(e.ctrlKey && this.isSelected(node)){
            this.unselect(node);
        }else{
            this.select(node, e, e.ctrlKey);
        }
    },

/**
     * Select a node.
     * @param {TreeNode} node The node to select
     * @param {EventObject} e (optional) An event associated with the selection
     * @param {Boolean} keepExisting True to retain existing selections
     * @return {TreeNode} The selected node
     */
    select : function(node, e, keepExisting){
        if(keepExisting !== true){
            this.clearSelections(true);
        }
        if(this.isSelected(node)){
            this.lastSelNode = node;
            return node;
        }
        this.selNodes.push(node);
        this.selMap[node.id] = node;
        this.lastSelNode = node;
        node.ui.onSelectedChange(true);
        this.fireEvent('selectionchange', this, this.selNodes);
        return node;
    },

/**
     * Deselect a node.
     * @param {TreeNode} node The node to unselect
     */
    unselect : function(node){
        if(this.selMap[node.id]){
            node.ui.onSelectedChange(false);
            var sn = this.selNodes;
            var index = sn.indexOf(node);
            if(index != -1){
                this.selNodes.splice(index, 1);
            }
            delete this.selMap[node.id];
            this.fireEvent('selectionchange', this, this.selNodes);
        }
    },

/**
     * Clear all selections
     */
    clearSelections : function(suppressEvent){
        var sn = this.selNodes;
        if(sn.length > 0){
            for(var i = 0, len = sn.length; i < len; i++){
                sn[i].ui.onSelectedChange(false);
            }
            this.selNodes = [];
            this.selMap = {};
            if(suppressEvent !== true){
                this.fireEvent('selectionchange', this, this.selNodes);
            }
        }
    },

/**
     * Returns true if the node is selected
     * @param {TreeNode} node The node to check
     * @return {Boolean}
     */
    isSelected : function(node){
        return this.selMap[node.id] ? true : false;
    },

/**
     * Returns an array of the selected nodes
     * @return {Array}
     */
    getSelectedNodes : function(){
        return this.selNodes;
    },

    onKeyDown : Ext.tree.DefaultSelectionModel.prototype.onKeyDown,

    selectNext : Ext.tree.DefaultSelectionModel.prototype.selectNext,

    selectPrevious : Ext.tree.DefaultSelectionModel.prototype.selectPrevious
});


The source code

/*!
 * licensing@extjs.com
 * http://www.extjs.com/license
 */

/**
 * @class Ext.tree.TreeSorter
 * Provides sorting of nodes in a {@link Ext.tree.TreePanel}.  The TreeSorter automatically monitors events on the
 * associated TreePanel that might affect the tree's sort order (beforechildrenrendered, append, insert and textchange).
 * Example usage:

 *

new Ext.tree.TreeSorter(myTree, {
    folderSort: true,
    dir: "desc",
    sortType: function(node) {
        // sort by a custom, typed attribute:
        return parseInt(node.id, 10);
    }
});

 * @constructor
 * @param {TreePanel} tree
 * @param {Object} config
 */
Ext.tree.TreeSorter = function(tree, config){

/**
     * @cfg {Boolean} folderSort True to sort leaf nodes under non-leaf nodes (defaults to false)
     */

/**
     * @cfg {String} property The named attribute on the node to sort by (defaults to "text").  Note that this
     * property is only used if no {@link #sortType} function is specified, otherwise it is ignored.
     */

/**
     * @cfg {String} dir The direction to sort ("asc" or "desc," case-insensitive, defaults to "asc")
     */

/**
     * @cfg {String} leafAttr The attribute used to determine leaf nodes when {@link #folderSort} = true (defaults to "leaf")
     */

/**
     * @cfg {Boolean} caseSensitive true for case-sensitive sort (defaults to false)
     */

/**
     * @cfg {Function} sortType A custom "casting" function used to convert node values before sorting.  The function
     * will be called with a single parameter (the {@link Ext.tree.TreeNode} being evaluated) and is expected to return
     * the node's sort value cast to the specific data type required for sorting.  This could be used, for example, when
     * a node's text (or other attribute) should be sorted as a date or numeric value.  See the class description for
     * example usage.  Note that if a sortType is specified, any {@link #property} config will be ignored.
     */

    Ext.apply(this, config);
    tree.on("beforechildrenrendered", this.doSort, this);
    tree.on("append", this.updateSort, this);
    tree.on("insert", this.updateSort, this);
    tree.on("textchange", this.updateSortParent, this);

    var dsc = this.dir && this.dir.toLowerCase() == "desc";
    var p = this.property || "text";
    var sortType = this.sortType;
    var fs = this.folderSort;
    var cs = this.caseSensitive === true;
    var leafAttr = this.leafAttr || 'leaf';

    this.sortFn = function(n1, n2){
        if(fs){
            if(n1.attributes[leafAttr] && !n2.attributes[leafAttr]){
                return 1;
            }
            if(!n1.attributes[leafAttr] && n2.attributes[leafAttr]){
                return -1;
            }
        }
        var v1 = sortType ? sortType(n1) : (cs ? n1.attributes[p] : n1.attributes[p].toUpperCase());
        var v2 = sortType ? sortType(n2) : (cs ? n2.attributes[p] : n2.attributes[p].toUpperCase());
        if(v1 < v2){
            return dsc ? +1 : -1;
        }else if(v1 > v2){
            return dsc ? -1 : +1;
        }else{
            return 0;
        }
    };
};

Ext.tree.TreeSorter.prototype = {
    doSort : function(node){
        node.sort(this.sortFn);
    },

    compareNodes : function(n1, n2){
        return (n1.text.toUpperCase() > n2.text.toUpperCase() ? 1 : -1);
    },

    updateSort : function(tree, node){
        if(node.childrenRendered){
            this.doSort.defer(1, this, [node]);
        }
    },

    updateSortParent : function(node){
        var p = node.parentNode;
        if(p && p.childrenRendered){
            this.doSort.defer(1, this, [p]);
        }
    }
};


The source code

/*!
 * licensing@extjs.com
 * http://www.extjs.com/license
 */

/**
 * @class Ext.form.TriggerField
 * @extends Ext.form.TextField
 * Provides a convenient wrapper for TextFields that adds a clickable trigger button (looks like a combobox by default).
 * The trigger has no default action, so you must assign a function to implement the trigger click handler by
 * overriding {@link #onTriggerClick}. You can create a TriggerField directly, as it renders exactly like a combobox
 * for which you can provide a custom implementation.  For example:
 *

var trigger = new Ext.form.TriggerField();
trigger.onTriggerClick = myTriggerFn;
trigger.applyToMarkup('my-field');

 *
 * However, in general you will most likely want to use TriggerField as the base class for a reusable component.
 * {@link Ext.form.DateField} and {@link Ext.form.ComboBox} are perfect examples of this.
 *
 * @constructor
 * Create a new TriggerField.
 * @param {Object} config Configuration options (valid {@Ext.form.TextField} config options will also be applied
 * to the base TextField)
 * @xtype trigger
 */
Ext.form.TriggerField = Ext.extend(Ext.form.TextField,  {

/**
     * @cfg {String} triggerClass
     * An additional CSS class used to style the trigger button.  The trigger will always get the
     * class 'x-form-trigger' by default and triggerClass will be appended if specified.
     */

/**
     * @cfg {Mixed} triggerConfig
     *
A {@link Ext.DomHelper DomHelper} config object specifying the structure of the
     * trigger element for this Field. (Optional).

     *
Specify this when you need a customized element to act as the trigger button for a TriggerField.

     *
Note that when using this option, it is the developer's responsibility to ensure correct sizing, positioning
     * and appearance of the trigger.  Defaults to:

     *
{tag: "img", src: Ext.BLANK_IMAGE_URL, cls: "x-form-trigger " + this.triggerClass}

     */

/**
     * @cfg {String/Object} autoCreate
A {@link Ext.DomHelper DomHelper} element spec, or true for a default
     * element spec. Used to create the {@link Ext.Component#getEl Element} which will encapsulate this Component.
     * See {@link Ext.Component#autoEl autoEl} for details.  Defaults to:

     *
{tag: "input", type: "text", size: "16", autocomplete: "off"}

     */
    defaultAutoCreate : {tag: "input", type: "text", size: "16", autocomplete: "off"},

/**
     * @cfg {Boolean} hideTrigger true to hide the trigger element and display only the base
     * text field (defaults to false)
     */
    hideTrigger:false,

/**
     * @cfg {Boolean} editable false to prevent the user from typing text directly into the field,
     * the field will only respond to a click on the trigger to set the value. (defaults to true).
     */
    editable: true,

/**
     * @cfg {Boolean} readOnly true to prevent the user from changing the field, and
     * hides the trigger.  Superceeds the editable and hideTrigger options if the value is true.
     * (defaults to false)
     */
    readOnly: false,

/**
     * @cfg {String} wrapFocusClass The class added to the to the wrap of the trigger element. Defaults to
     * x-trigger-wrap-focus.
     */
    wrapFocusClass: 'x-trigger-wrap-focus',

/**
     * @hide
     * @method autoSize
     */
    autoSize: Ext.emptyFn,
    // private
    monitorTab : true,
    // private
    deferHeight : true,
    // private
    mimicing : false,

    actionMode: 'wrap',

    defaultTriggerWidth: 17,

    // private
    onResize : function(w, h){
        Ext.form.TriggerField.superclass.onResize.call(this, w, h);
        var tw = this.getTriggerWidth();
        if(Ext.isNumber(w)){
            this.el.setWidth(w - tw);
        }
        this.wrap.setWidth(this.el.getWidth() + tw);
    },

    getTriggerWidth: function(){
        var tw = this.trigger.getWidth();
        if(!this.hideTrigger && !this.readOnly && tw === 0){
            tw = this.defaultTriggerWidth;
        }
        return tw;
    },

    // private
    alignErrorIcon : function(){
        if(this.wrap){
            this.errorIcon.alignTo(this.wrap, 'tl-tr', [2, 0]);
        }
    },

    // private
    onRender : function(ct, position){
        this.doc = Ext.isIE ? Ext.getBody() : Ext.getDoc();
        Ext.form.TriggerField.superclass.onRender.call(this, ct, position);

        this.wrap = this.el.wrap({cls: 'x-form-field-wrap x-form-field-trigger-wrap'});
        this.trigger = this.wrap.createChild(this.triggerConfig ||
                {tag: "img", src: Ext.BLANK_IMAGE_URL, cls: "x-form-trigger " + this.triggerClass});
        this.initTrigger();
        if(!this.width){
            this.wrap.setWidth(this.el.getWidth()+this.trigger.getWidth());
        }
        this.resizeEl = this.positionEl = this.wrap;
    },

    getWidth: function() {
        return(this.el.getWidth() + this.trigger.getWidth());
    },

    updateEditState: function(){
        if(this.rendered){
            if (this.readOnly) {
                this.el.dom.readOnly = true;
                this.el.addClass('x-trigger-noedit');
                this.mun(this.el, 'click', this.onTriggerClick, this);
                this.trigger.setDisplayed(false);
            } else {
                if (!this.editable) {
                    this.el.dom.readOnly = true;
                    this.el.addClass('x-trigger-noedit');
                    this.mon(this.el, 'click', this.onTriggerClick, this);
                } else {
                    this.el.dom.readOnly = false;
                    this.el.removeClass('x-trigger-noedit');
                    this.mun(this.el, 'click', this.onTriggerClick, this);
                }
                this.trigger.setDisplayed(!this.hideTrigger);
            }
            this.onResize(this.width || this.wrap.getWidth());
        }
    },

    setHideTrigger: function(hideTrigger){
        if(hideTrigger != this.hideTrigger){
            this.hideTrigger = hideTrigger;
            this.updateEditState();
        }
    },

/**
     * @param {Boolean} value True to allow the user to directly edit the field text
     * Allow or prevent the user from directly editing the field text.  If false is passed,
     * the user will only be able to modify the field using the trigger.  Will also add
     * a click event to the text field which will call the trigger. This method
     * is the runtime equivalent of setting the 'editable' config option at config time.
     */
    setEditable: function(editable){
        if(editable != this.editable){
            this.editable = editable;
            this.updateEditState();
        }
    },

/**
     * @param {Boolean} value True to prevent the user changing the field and explicitly
     * hide the trigger.
     * Setting this to true will superceed settings editable and hideTrigger.
     * Setting this to false will defer back to editable and hideTrigger. This method
     * is the runtime equivalent of setting the 'readOnly' config option at config time.
     */
    setReadOnly: function(readOnly){
        if(readOnly != this.readOnly){
            this.readOnly = readOnly;
            this.updateEditState();
        }
    },

    afterRender : function(){
        Ext.form.TriggerField.superclass.afterRender.call(this);
        this.updateEditState();
    },

    // private
    initTrigger : function(){
        this.mon(this.trigger, 'click', this.onTriggerClick, this, {preventDefault:true});
        this.trigger.addClassOnOver('x-form-trigger-over');
        this.trigger.addClassOnClick('x-form-trigger-click');
    },

    // private
    onDestroy : function(){
        Ext.destroy(this.trigger, this.wrap);
        if (this.mimicing){
            this.doc.un('mousedown', this.mimicBlur, this);
        }
        delete this.doc;
        Ext.form.TriggerField.superclass.onDestroy.call(this);
    },

    // private
    onFocus : function(){
        Ext.form.TriggerField.superclass.onFocus.call(this);
        if(!this.mimicing){
            this.wrap.addClass(this.wrapFocusClass);
            this.mimicing = true;
            this.doc.on('mousedown', this.mimicBlur, this, {delay: 10});
            if(this.monitorTab){
                this.on('specialkey', this.checkTab, this);
            }
        }
    },

    // private
    checkTab : function(me, e){
        if(e.getKey() == e.TAB){
            this.triggerBlur();
        }
    },

    // private
    onBlur : Ext.emptyFn,

    // private
    mimicBlur : function(e){
        if(!this.isDestroyed && !this.wrap.contains(e.target) && this.validateBlur(e)){
            this.triggerBlur();
        }
    },

    // private
    triggerBlur : function(){
        this.mimicing = false;
        this.doc.un('mousedown', this.mimicBlur, this);
        if(this.monitorTab && this.el){
            this.un('specialkey', this.checkTab, this);
        }
        Ext.form.TriggerField.superclass.onBlur.call(this);
        if(this.wrap){
            this.wrap.removeClass(this.wrapFocusClass);
        }
    },

    beforeBlur : Ext.emptyFn,

    // private
    // This should be overriden by any subclass that needs to check whether or not the field can be blurred.
    validateBlur : function(e){
        return true;
    },

/**
     * The function that should handle the trigger's click event.  This method does nothing by default
     * until overridden by an implementing function.  See Ext.form.ComboBox and Ext.form.DateField for
     * sample implementations.
     * @method
     * @param {EventObject} e
     */
    onTriggerClick : Ext.emptyFn

/**
     * @cfg {Boolean} grow @hide
     */

/**
     * @cfg {Number} growMin @hide
     */

/**
     * @cfg {Number} growMax @hide
     */
});

/**
 * @class Ext.form.TwinTriggerField
 * @extends Ext.form.TriggerField
 * TwinTriggerField is not a public class to be used directly.  It is meant as an abstract base class
 * to be extended by an implementing class.  For an example of implementing this class, see the custom
 * SearchField implementation here:
 * http://extjs.com/deploy/ext/examples/form/custom.html
 */
Ext.form.TwinTriggerField = Ext.extend(Ext.form.TriggerField, {

/**
     * @cfg {Mixed} triggerConfig
     *
A {@link Ext.DomHelper DomHelper} config object specifying the structure of the trigger elements
     * for this Field. (Optional).

     *
Specify this when you need a customized element to contain the two trigger elements for this Field.
     * Each trigger element must be marked by the CSS class x-form-trigger (also see
     * {@link #trigger1Class} and {@link #trigger2Class}).

     *
Note that when using this option, it is the developer's responsibility to ensure correct sizing,
     * positioning and appearance of the triggers.

     */

/**
     * @cfg {String} trigger1Class
     * An additional CSS class used to style the trigger button.  The trigger will always get the
     * class 'x-form-trigger' by default and triggerClass will be appended if specified.
     */

/**
     * @cfg {String} trigger2Class
     * An additional CSS class used to style the trigger button.  The trigger will always get the
     * class 'x-form-trigger' by default and triggerClass will be appended if specified.
     */

    initComponent : function(){
        Ext.form.TwinTriggerField.superclass.initComponent.call(this);

        this.triggerConfig = {
            tag:'span', cls:'x-form-twin-triggers', cn:[
            {tag: "img", src: Ext.BLANK_IMAGE_URL, cls: "x-form-trigger " + this.trigger1Class},
            {tag: "img", src: Ext.BLANK_IMAGE_URL, cls: "x-form-trigger " + this.trigger2Class}
        ]};
    },

    getTrigger : function(index){
        return this.triggers[index];
    },

    initTrigger : function(){
        var ts = this.trigger.select('.x-form-trigger', true);
        var triggerField = this;
        ts.each(function(t, all, index){
            var triggerIndex = 'Trigger'+(index+1);
            t.hide = function(){
                var w = triggerField.wrap.getWidth();
                this.dom.style.display = 'none';
                triggerField.el.setWidth(w-triggerField.trigger.getWidth());
                this['hidden' + triggerIndex] = true;
            };
            t.show = function(){
                var w = triggerField.wrap.getWidth();
                this.dom.style.display = '';
                triggerField.el.setWidth(w-triggerField.trigger.getWidth());
                this['hidden' + triggerIndex] = false;
            };

            if(this['hide'+triggerIndex]){
                t.dom.style.display = 'none';
                this['hidden' + triggerIndex] = true;
            }
            this.mon(t, 'click', this['on'+triggerIndex+'Click'], this, {preventDefault:true});
            t.addClassOnOver('x-form-trigger-over');
            t.addClassOnClick('x-form-trigger-click');
        }, this);
        this.triggers = ts.elements;
    },

    getTriggerWidth: function(){
        var tw = 0;
        Ext.each(this.triggers, function(t, index){
            var triggerIndex = 'Trigger' + (index + 1),
                w = t.getWidth();
            if(w === 0 && !this['hidden' + triggerIndex]){
                tw += this.defaultTriggerWidth;
            }else{
                tw += w;
            }
        }, this);
        return tw;
    },

    // private
    onDestroy : function() {
        Ext.destroy(this.triggers);
        Ext.form.TwinTriggerField.superclass.onDestroy.call(this);
    },

/**
     * The function that should handle the trigger's click event.  This method does nothing by default
     * until overridden by an implementing function. See {@link Ext.form.TriggerField#onTriggerClick}
     * for additional information.
     * @method
     * @param {EventObject} e
     */
    onTrigger1Click : Ext.emptyFn,

/**
     * The function that should handle the trigger's click event.  This method does nothing by default
     * until overridden by an implementing function. See {@link Ext.form.TriggerField#onTriggerClick}
     * for additional information.
     * @method
     * @param {EventObject} e
     */
    onTrigger2Click : Ext.emptyFn
});
Ext.reg('trigger', Ext.form.TriggerField);


The source code

/*!
 * licensing@extjs.com
 * http://www.extjs.com/license
 */

/**
 * @class Ext.data.Types
 *
This is s static class containing the system-supplied data types which may be given to a {@link Ext.data.Field Field}.

 *
The properties in this class are used as type indicators in the {@link Ext.data.Field Field} class, so to
 * test whether a Field is of a certain type, compare the {@link Ext.data.Field#type type} property against properties
 * of this class.

 *
Developers may add their own application-specific data types to this class. Definition names must be UPPERCASE.
 * each type definition must contain three properties:

 *

 *
  • convert : Function
    A function to convert raw data values from a data block into the data
 * to be stored in the Field. The function is passed the collowing parameters:
 *

 *
    • v : Mixed
      The data value as read by the Reader, if undefined will use
 * the configured {@link Ext.data.Field#defaultValue defaultValue}.
      •
 *
    • rec : Mixed
      The data object containing the row as read by the Reader.
 * Depending on the Reader type, this could be an Array ({@link Ext.data.ArrayReader ArrayReader}), an object
 * ({@link Ext.data.JsonReader JsonReader}), or an XML element ({@link Ext.data.XMLReader XMLReader}).
      •
 *
    •
 *
  • sortType : Function
    A function to convert the stored data into comparable form, as defined by {@link Ext.data.SortTypes}.
    •
 *
  • type : String
    A textual data type name.
    •
 *

 *
For example, to create a VELatLong field (See the Microsoft Bing Mapping API) containing the latitude/longitude value of a datapoint on a map from a JsonReader data block
 * which contained the properties lat and long, you would define a new data type like this:

 *

// Add a new Field data type which stores a VELatLong object in the Record.
Ext.data.Types.VELATLONG = {
    convert: function(v, data) {
        return new VELatLong(data.lat, data.long);
    },
    sortType: function(v) {
        return v.Latitude;  // When sorting, order by latitude
    },
    type: 'VELatLong'
};

 *
Then, when declaring a Record, use

var types = Ext.data.Types; // allow shorthand type access
UnitRecord = Ext.data.Record.create([
    { name: 'unitName', mapping: 'UnitName' },
    { name: 'curSpeed', mapping: 'CurSpeed', type: types.INT },
    { name: 'latitude', mapping: 'lat', type: types.FLOAT },
    { name: 'latitude', mapping: 'lat', type: types.FLOAT },
    { name: 'position', type: types.VELATLONG }
]);

 * @singleton
 */
Ext.data.Types = new function(){
    var st = Ext.data.SortTypes;
    Ext.apply(this, {

/**
         * @type Regexp
         * @property stripRe
         * A regular expression for stripping non-numeric characters from a numeric value. Defaults to /[\$,%]/g.
         * This should be overridden for localization.
         */
        stripRe: /[\$,%]/g,

/**
         * @type Object.
         * @property AUTO
         * This data type means that no conversion is applied to the raw data before it is placed into a Record.
         */
        AUTO: {
            convert: function(v){ return v; },
            sortType: st.none,
            type: 'auto'
        },

/**
         * @type Object.
         * @property STRING
         * This data type means that the raw data is converted into a String before it is placed into a Record.
         */
        STRING: {
            convert: function(v){ return (v === undefined || v === null) ? '' : String(v); },
            sortType: st.asUCString,
            type: 'string'
        },

/**
         * @type Object.
         * @property INT
         * This data type means that the raw data is converted into an integer before it is placed into a Record.
         *
The synonym INTEGER is equivalent.

         */
        INT: {
            convert: function(v){
                return v !== undefined && v !== null && v !== '' ?
                    parseInt(String(v).replace(Ext.data.Types.stripRe, ''), 10) : 0;
            },
            sortType: st.none,
            type: 'int'
        },

/**
         * @type Object.
         * @property FLOAT
         * This data type means that the raw data is converted into a number before it is placed into a Record.
         *
The synonym NUMBER is equivalent.

         */
        FLOAT: {
            convert: function(v){
                return v !== undefined && v !== null && v !== '' ?
                    parseFloat(String(v).replace(Ext.data.Types.stripRe, ''), 10) : 0;
            },
            sortType: st.none,
            type: 'float'
        },

/**
         * @type Object.
         * @property BOOL
         *
This data type means that the raw data is converted into a boolean before it is placed into
         * a Record. The string "true" and the number 1 are converted to boolean true.

         *
The synonym BOOLEAN is equivalent.

         */
        BOOL: {
            convert: function(v){ return v === true || v === 'true' || v == 1; },
            sortType: st.none,
            type: 'bool'
        },

/**
         * @type Object.
         * @property DATE
         * This data type means that the raw data is converted into a Date before it is placed into a Record.
         * The date format is specified in the constructor of the {@link Ext.data.Field} to which this type is
         * being applied.
         */
        DATE: {
            convert: function(v){
                var df = this.dateFormat;
                if(!v){
                    return null;
                }
                if(Ext.isDate(v)){
                    return v;
                }
                if(df){
                    if(df == 'timestamp'){
                        return new Date(v*1000);
                    }
                    if(df == 'time'){
                        return new Date(parseInt(v, 10));
                    }
                    return Date.parseDate(v, df);
                }
                var parsed = Date.parse(v);
                return parsed ? new Date(parsed) : null;
            },
            sortType: st.asDate,
            type: 'date'
        }
    });

    Ext.apply(this, {

/**
         * @type Object.
         * @property BOOLEAN
         *
This data type means that the raw data is converted into a boolean before it is placed into
         * a Record. The string "true" and the number 1 are converted to boolean true.

         *
The synonym BOOL is equivalent.

         */
        BOOLEAN: this.BOOL,

/**
         * @type Object.
         * @property INTEGER
         * This data type means that the raw data is converted into an integer before it is placed into a Record.
         *
The synonym INT is equivalent.

         */
        INTEGER: this.INT,

/**
         * @type Object.
         * @property NUMBER
         * This data type means that the raw data is converted into a number before it is placed into a Record.
         *
The synonym FLOAT is equivalent.

         */
        NUMBER: this.FLOAT
    });
};


The source code

/*!
 * licensing@extjs.com
 * http://www.extjs.com/license
 */

/**
 * @class Ext.Updater
 * @extends Ext.util.Observable
 * Provides AJAX-style update capabilities for Element objects.  Updater can be used to {@link #update}
 * an {@link Ext.Element} once, or you can use {@link #startAutoRefresh} to set up an auto-updating
 * {@link Ext.Element Element} on a specific interval.

 * Usage:

 *

 * var el = Ext.get("foo"); // Get Ext.Element object
 * var mgr = el.getUpdater();
 * mgr.update({
        url: "http://myserver.com/index.php",
        params: {
            param1: "foo",
            param2: "bar"
        }
 * });
 * ...
 * mgr.formUpdate("myFormId", "http://myserver.com/index.php");
 *

 * // or directly (returns the same Updater instance)
 * var mgr = new Ext.Updater("myElementId");
 * mgr.startAutoRefresh(60, "http://myserver.com/index.php");
 * mgr.on("update", myFcnNeedsToKnow);
 *

 * // short handed call directly from the element object
 * Ext.get("foo").load({
        url: "bar.php",
        scripts: true,
        params: "param1=foo&param2=bar",
        text: "Loading Foo..."
 * });
 *

 * @constructor
 * Create new Updater directly.
 * @param {Mixed} el The element to update
 * @param {Boolean} forceNew (optional) By default the constructor checks to see if the passed element already
 * has an Updater and if it does it returns the same instance. This will skip that check (useful for extending this class).
 */
Ext.UpdateManager = Ext.Updater = Ext.extend(Ext.util.Observable,
function() {
    var BEFOREUPDATE = "beforeupdate",
        UPDATE = "update",
        FAILURE = "failure";

    // private
    function processSuccess(response){
        var me = this;
        me.transaction = null;
        if (response.argument.form && response.argument.reset) {
            try { // put in try/catch since some older FF releases had problems with this
                response.argument.form.reset();
            } catch(e){}
        }
        if (me.loadScripts) {
            me.renderer.render(me.el, response, me,
               updateComplete.createDelegate(me, [response]));
        } else {
            me.renderer.render(me.el, response, me);
            updateComplete.call(me, response);
        }
    }

    // private
    function updateComplete(response, type, success){
        this.fireEvent(type || UPDATE, this.el, response);
        if(Ext.isFunction(response.argument.callback)){
            response.argument.callback.call(response.argument.scope, this.el, Ext.isEmpty(success) ? true : false, response, response.argument.options);
        }
    }

    // private
    function processFailure(response){
        updateComplete.call(this, response, FAILURE, !!(this.transaction = null));
    }

    return {
        constructor: function(el, forceNew){
            var me = this;
            el = Ext.get(el);
            if(!forceNew && el.updateManager){
                return el.updateManager;
            }

/**
             * The Element object
             * @type Ext.Element
             */
            me.el = el;

/**
             * Cached url to use for refreshes. Overwritten every time update() is called unless "discardUrl" param is set to true.
             * @type String
             */
            me.defaultUrl = null;

            me.addEvents(

/**
                 * @event beforeupdate
                 * Fired before an update is made, return false from your handler and the update is cancelled.
                 * @param {Ext.Element} el
                 * @param {String/Object/Function} url
                 * @param {String/Object} params
                 */
                BEFOREUPDATE,

/**
                 * @event update
                 * Fired after successful update is made.
                 * @param {Ext.Element} el
                 * @param {Object} oResponseObject The response Object
                 */
                UPDATE,

/**
                 * @event failure
                 * Fired on update failure.
                 * @param {Ext.Element} el
                 * @param {Object} oResponseObject The response Object
                 */
                FAILURE
            );

            Ext.apply(me, Ext.Updater.defaults);

/**
             * Blank page URL to use with SSL file uploads (defaults to {@link Ext.Updater.defaults#sslBlankUrl}).
             * @property sslBlankUrl
             * @type String
             */

/**
             * Whether to append unique parameter on get request to disable caching (defaults to {@link Ext.Updater.defaults#disableCaching}).
             * @property disableCaching
             * @type Boolean
             */

/**
             * Text for loading indicator (defaults to {@link Ext.Updater.defaults#indicatorText}).
             * @property indicatorText
             * @type String
             */

/**
             * Whether to show indicatorText when loading (defaults to {@link Ext.Updater.defaults#showLoadIndicator}).
             * @property showLoadIndicator
             * @type String
             */

/**
             * Timeout for requests or form posts in seconds (defaults to {@link Ext.Updater.defaults#timeout}).
             * @property timeout
             * @type Number
             */

/**
             * True to process scripts in the output (defaults to {@link Ext.Updater.defaults#loadScripts}).
             * @property loadScripts
             * @type Boolean
             */

/**
             * Transaction object of the current executing transaction, or null if there is no active transaction.
             */
            me.transaction = null;

/**
             * Delegate for refresh() prebound to "this", use myUpdater.refreshDelegate.createCallback(arg1, arg2) to bind arguments
             * @type Function
             */
            me.refreshDelegate = me.refresh.createDelegate(me);

/**
             * Delegate for update() prebound to "this", use myUpdater.updateDelegate.createCallback(arg1, arg2) to bind arguments
             * @type Function
             */
            me.updateDelegate = me.update.createDelegate(me);

/**
             * Delegate for formUpdate() prebound to "this", use myUpdater.formUpdateDelegate.createCallback(arg1, arg2) to bind arguments
             * @type Function
             */
            me.formUpdateDelegate = (me.formUpdate || function(){}).createDelegate(me);

/**
             * The renderer for this Updater (defaults to {@link Ext.Updater.BasicRenderer}).
             */
            me.renderer = me.renderer || me.getDefaultRenderer();

            Ext.Updater.superclass.constructor.call(me);
        },

/**
         * Sets the content renderer for this Updater. See {@link Ext.Updater.BasicRenderer#render} for more details.
         * @param {Object} renderer The object implementing the render() method
         */
        setRenderer : function(renderer){
            this.renderer = renderer;
        },

/**
         * Returns the current content renderer for this Updater. See {@link Ext.Updater.BasicRenderer#render} for more details.
         * @return {Object}
         */
        getRenderer : function(){
           return this.renderer;
        },

/**
         * This is an overrideable method which returns a reference to a default
         * renderer class if none is specified when creating the Ext.Updater.
         * Defaults to {@link Ext.Updater.BasicRenderer}
         */
        getDefaultRenderer: function() {
            return new Ext.Updater.BasicRenderer();
        },

/**
         * Sets the default URL used for updates.
         * @param {String/Function} defaultUrl The url or a function to call to get the url
         */
        setDefaultUrl : function(defaultUrl){
            this.defaultUrl = defaultUrl;
        },

/**
         * Get the Element this Updater is bound to
         * @return {Ext.Element} The element
         */
        getEl : function(){
            return this.el;
        },

/**
         * Performs an asynchronous request, updating this element with the response.
         * If params are specified it uses POST, otherwise it uses GET.

         * Note: Due to the asynchronous nature of remote server requests, the Element
         * will not have been fully updated when the function returns. To post-process the returned
         * data, use the callback option, or an update event handler.
         * @param {Object} options A config object containing any of the following options:

         *
  • url : String/Function
    The URL to request or a function which
         * returns the URL (defaults to the value of {@link Ext.Ajax#url} if not specified).
    •
         *
  • method : String
    The HTTP method to
         * use. Defaults to POST if the params argument is present, otherwise GET.
    •
         *
  • params : String/Object/Function
    The
         * parameters to pass to the server (defaults to none). These may be specified as a url-encoded
         * string, or as an object containing properties which represent parameters,
         * or as a function, which returns such an object.
    •
         *
  • scripts : Boolean
    If true
         * any <script> tags embedded in the response text will be extracted
         * and executed (defaults to {@link Ext.Updater.defaults#loadScripts}). If this option is specified,
         * the callback will be called after the execution of the scripts.
    •
         *
  • callback : Function
    A function to
         * be called when the response from the server arrives. The following
         * parameters are passed:

         *
    • el : Ext.Element
      The Element being updated.
      •
         *
    • success : Boolean
      True for success, false for failure.
      •
         *
    • response : XMLHttpRequest
      The XMLHttpRequest which processed the update.
      •
         *
    • options : Object
      The config object passed to the update call.

         *
    •
         *
  • scope : Object
    The scope in which
         * to execute the callback (The callback's this reference.) If the
         * params argument is a function, this scope is used for that function also.
    •
         *
  • discardUrl : Boolean
    By default, the URL of this request becomes
         * the default URL for this Updater object, and will be subsequently used in {@link #refresh}
         * calls.  To bypass this behavior, pass discardUrl:true (defaults to false).
    •
         *
  • timeout : Number
    The number of seconds to wait for a response before
         * timing out (defaults to {@link Ext.Updater.defaults#timeout}).
    •
         *
  • text : String
    The text to use as the innerHTML of the
         * {@link Ext.Updater.defaults#indicatorText} div (defaults to 'Loading...').  To replace the entire div, not
         * just the text, override {@link Ext.Updater.defaults#indicatorText} directly.
    •
         *
  • nocache : Boolean
    Only needed for GET
         * requests, this option causes an extra, auto-generated parameter to be appended to the request
         * to defeat caching (defaults to {@link Ext.Updater.defaults#disableCaching}).

         *

         * For example:

    um.update({
        url: "your-url.php",
        params: {param1: "foo", param2: "bar"}, // or a URL encoded string
        callback: yourFunction,
        scope: yourObject, //(optional scope)
        discardUrl: true,
        nocache: true,
        text: "Loading...",
        timeout: 60,
        scripts: false // Save time by avoiding RegExp execution.
    });

         */
        update : function(url, params, callback, discardUrl){
            var me = this,
                cfg,
                callerScope;

            if(me.fireEvent(BEFOREUPDATE, me.el, url, params) !== false){
                if(Ext.isObject(url)){ // must be config object
                    cfg = url;
                    url = cfg.url;
                    params = params || cfg.params;
                    callback = callback || cfg.callback;
                    discardUrl = discardUrl || cfg.discardUrl;
                    callerScope = cfg.scope;
                    if(!Ext.isEmpty(cfg.nocache)){me.disableCaching = cfg.nocache;};
                    if(!Ext.isEmpty(cfg.text)){me.indicatorText = '
'+cfg.text+"
";};
                    if(!Ext.isEmpty(cfg.scripts)){me.loadScripts = cfg.scripts;};
                    if(!Ext.isEmpty(cfg.timeout)){me.timeout = cfg.timeout;};
                }
                me.showLoading();

                if(!discardUrl){
                    me.defaultUrl = url;
                }
                if(Ext.isFunction(url)){
                    url = url.call(me);
                }

                var o = Ext.apply({}, {
                    url : url,
                    params: (Ext.isFunction(params) && callerScope) ? params.createDelegate(callerScope) : params,
                    success: processSuccess,
                    failure: processFailure,
                    scope: me,
                    callback: undefined,
                    timeout: (me.timeout*1000),
                    disableCaching: me.disableCaching,
                    argument: {
                        "options": cfg,
                        "url": url,
                        "form": null,
                        "callback": callback,
                        "scope": callerScope || window,
                        "params": params
                    }
                }, cfg);

                me.transaction = Ext.Ajax.request(o);
            }
        },

/**
         *
Performs an asynchronous form post, updating this element with the response. If the form has the attribute
         * enctype="multipart/form-data", it assumes it's a file upload.
         * Uses this.sslBlankUrl for SSL file uploads to prevent IE security warning.

         *
File uploads are not performed using normal "Ajax" techniques, that is they are not
         * performed using XMLHttpRequests. Instead the form is submitted in the standard manner with the
         * DOM <form> element temporarily modified to have its
         * target set to refer
         * to a dynamically generated, hidden <iframe> which is inserted into the document
         * but removed after the return data has been gathered.

         *
Be aware that file upload packets, sent with the content type multipart/form-data
         * and some server technologies (notably JEE) may require some custom processing in order to
         * retrieve parameter names and parameter values from the packet content.

         * @param {String/HTMLElement} form The form Id or form element
         * @param {String} url (optional) The url to pass the form to. If omitted the action attribute on the form will be used.
         * @param {Boolean} reset (optional) Whether to try to reset the form after the update
         * @param {Function} callback (optional) Callback when transaction is complete. The following
         * parameters are passed:

         *
  • el : Ext.Element
    The Element being updated.
    •
         *
  • success : Boolean
    True for success, false for failure.
    •
         *
  • response : XMLHttpRequest
    The XMLHttpRequest which processed the update.

         */
        formUpdate : function(form, url, reset, callback){
            var me = this;
            if(me.fireEvent(BEFOREUPDATE, me.el, form, url) !== false){
                if(Ext.isFunction(url)){
                    url = url.call(me);
                }
                form = Ext.getDom(form);
                me.transaction = Ext.Ajax.request({
                    form: form,
                    url:url,
                    success: processSuccess,
                    failure: processFailure,
                    scope: me,
                    timeout: (me.timeout*1000),
                    argument: {
                        "url": url,
                        "form": form,
                        "callback": callback,
                        "reset": reset
                    }
                });
                me.showLoading.defer(1, me);
            }
        },

/**
         * Set this element to auto refresh.  Can be canceled by calling {@link #stopAutoRefresh}.
         * @param {Number} interval How often to update (in seconds).
         * @param {String/Object/Function} url (optional) The url for this request, a config object in the same format
         * supported by {@link #load}, or a function to call to get the url (defaults to the last used url).  Note that while
         * the url used in a load call can be reused by this method, other load config options will not be reused and must be
         * sepcified as part of a config object passed as this paramter if needed.
         * @param {String/Object} params (optional) The parameters to pass as either a url encoded string
         * "¶m1=1¶m2=2" or as an object {param1: 1, param2: 2}
         * @param {Function} callback (optional) Callback when transaction is complete - called with signature (oElement, bSuccess)
         * @param {Boolean} refreshNow (optional) Whether to execute the refresh now, or wait the interval
         */
        startAutoRefresh : function(interval, url, params, callback, refreshNow){
            var me = this;
            if(refreshNow){
                me.update(url || me.defaultUrl, params, callback, true);
            }
            if(me.autoRefreshProcId){
                clearInterval(me.autoRefreshProcId);
            }
            me.autoRefreshProcId = setInterval(me.update.createDelegate(me, [url || me.defaultUrl, params, callback, true]), interval * 1000);
        },

/**
         * Stop auto refresh on this element.
         */
        stopAutoRefresh : function(){
            if(this.autoRefreshProcId){
                clearInterval(this.autoRefreshProcId);
                delete this.autoRefreshProcId;
            }
        },

/**
         * Returns true if the Updater is currently set to auto refresh its content (see {@link #startAutoRefresh}), otherwise false.
         */
        isAutoRefreshing : function(){
           return !!this.autoRefreshProcId;
        },

/**
         * Display the element's "loading" state. By default, the element is updated with {@link #indicatorText}. This
         * method may be overridden to perform a custom action while this Updater is actively updating its contents.
         */
        showLoading : function(){
            if(this.showLoadIndicator){
                this.el.dom.innerHTML = this.indicatorText;
            }
        },

/**
         * Aborts the currently executing transaction, if any.
         */
        abort : function(){
            if(this.transaction){
                Ext.Ajax.abort(this.transaction);
            }
        },

/**
         * Returns true if an update is in progress, otherwise false.
         * @return {Boolean}
         */
        isUpdating : function(){
            return this.transaction ? Ext.Ajax.isLoading(this.transaction) : false;
        },

/**
         * Refresh the element with the last used url or defaultUrl. If there is no url, it returns immediately
         * @param {Function} callback (optional) Callback when transaction is complete - called with signature (oElement, bSuccess)
         */
        refresh : function(callback){
            if(this.defaultUrl){
                this.update(this.defaultUrl, null, callback, true);
            }
        }
    }
}());

/**
 * @class Ext.Updater.defaults
 * The defaults collection enables customizing the default properties of Updater
 */
Ext.Updater.defaults = {

/**
     * Timeout for requests or form posts in seconds (defaults to 30 seconds).
     * @type Number
     */
    timeout : 30,

/**
     * True to append a unique parameter to GET requests to disable caching (defaults to false).
     * @type Boolean
     */
    disableCaching : false,

/**
     * Whether or not to show {@link #indicatorText} during loading (defaults to true).
     * @type Boolean
     */
    showLoadIndicator : true,

/**
     * Text for loading indicator (defaults to '<div class="loading-indicator">Loading...</div>').
     * @type String
     */
    indicatorText : '
Loading...
',

/**
     * True to process scripts by default (defaults to false).
     * @type Boolean
     */
    loadScripts : false,

/**
    * Blank page URL to use with SSL file uploads (defaults to {@link Ext#SSL_SECURE_URL} if set, or "javascript:false").
    * @type String
    */
    sslBlankUrl : Ext.SSL_SECURE_URL
};

/**
 * Static convenience method. This method is deprecated in favor of el.load({url:'foo.php', ...}).
 * Usage:
 *
Ext.Updater.updateElement("my-div", "stuff.php");

 * @param {Mixed} el The element to update
 * @param {String} url The url
 * @param {String/Object} params (optional) Url encoded param string or an object of name/value pairs
 * @param {Object} options (optional) A config object with any of the Updater properties you want to set - for
 * example: {disableCaching:true, indicatorText: "Loading data..."}
 * @static
 * @deprecated
 * @member Ext.Updater
 */
Ext.Updater.updateElement = function(el, url, params, options){
    var um = Ext.get(el).getUpdater();
    Ext.apply(um, options);
    um.update(url, params, options ? options.callback : null);
};

/**
 * @class Ext.Updater.BasicRenderer
 *
This class is a base class implementing a simple render method which updates an element using results from an Ajax request.

 *
The BasicRenderer updates the element's innerHTML with the responseText. To perform a custom render (i.e. XML or JSON processing),
 * create an object with a conforming {@link #render} method and pass it to setRenderer on the Updater.

 */
Ext.Updater.BasicRenderer = function(){};

Ext.Updater.BasicRenderer.prototype = {

/**
     * This method is called when an Ajax response is received, and an Element needs updating.
     * @param {Ext.Element} el The element being rendered
     * @param {Object} xhr The XMLHttpRequest object
     * @param {Updater} updateManager The calling update manager
     * @param {Function} callback A callback that will need to be called if loadScripts is true on the Updater
     */
     render : function(el, response, updateManager, callback){
        el.update(response.responseText, updateManager.loadScripts, callback);
    }
};


The source code

/*!
 * licensing@extjs.com
 * http://www.extjs.com/license
 */

/**
 * @class Ext.Viewport
 * @extends Ext.Container
 *
A specialized container representing the viewable application area (the browser viewport).

 *
The Viewport renders itself to the document body, and automatically sizes itself to the size of
 * the browser viewport and manages window resizing. There may only be one Viewport created
 * in a page. Inner layouts are available by virtue of the fact that all {@link Ext.Panel Panel}s
 * added to the Viewport, either through its {@link #items}, or through the items, or the {@link #add}
 * method of any of its child Panels may themselves have a layout.

 *
The Viewport does not provide scrolling, so child Panels within the Viewport should provide
 * for scrolling if needed using the {@link #autoScroll} config.

 *
An example showing a classic application border layout:

new Ext.Viewport({
    layout: 'border',
    items: [{
        region: 'north',
        html: '<h1 class="x-panel-header">Page Title</h1>',
        autoHeight: true,
        border: false,
        margins: '0 0 5 0'
    }, {
        region: 'west',
        collapsible: true,
        title: 'Navigation',
        width: 200
        // the west region might typically utilize a {@link Ext.tree.TreePanel TreePanel} or a Panel with {@link Ext.layout.AccordionLayout Accordion layout}
    }, {
        region: 'south',
        title: 'Title for Panel',
        collapsible: true,
        html: 'Information goes here',
        split: true,
        height: 100,
        minHeight: 100
    }, {
        region: 'east',
        title: 'Title for the Grid Panel',
        collapsible: true,
        split: true,
        width: 200,
        xtype: 'grid',
        // remaining grid configuration not shown ...
        // notice that the GridPanel is added directly as the region
        // it is not "overnested" inside another Panel
    }, {
        region: 'center',
        xtype: 'tabpanel', // TabPanel itself has no title
        items: {
            title: 'Default Tab',
            html: 'The first tab\'s content. Others may be added dynamically'
        }
    }]
});

 * @constructor
 * Create a new Viewport
 * @param {Object} config The config object
 * @xtype viewport
 */
Ext.Viewport = Ext.extend(Ext.Container, {
    /*
     * Privatize config options which, if used, would interfere with the
     * correct operation of the Viewport as the sole manager of the
     * layout of the document body.
     */

/**
     * @cfg {Mixed} applyTo @hide
     */

/**
     * @cfg {Boolean} allowDomMove @hide
     */

/**
     * @cfg {Boolean} hideParent @hide
     */

/**
     * @cfg {Mixed} renderTo @hide
     */

/**
     * @cfg {Boolean} hideParent @hide
     */

/**
     * @cfg {Number} height @hide
     */

/**
     * @cfg {Number} width @hide
     */

/**
     * @cfg {Boolean} autoHeight @hide
     */

/**
     * @cfg {Boolean} autoWidth @hide
     */

/**
     * @cfg {Boolean} deferHeight @hide
     */

/**
     * @cfg {Boolean} monitorResize @hide
     */

    initComponent : function() {
        Ext.Viewport.superclass.initComponent.call(this);
        document.getElementsByTagName('html')[0].className += ' x-viewport';
        this.el = Ext.getBody();
        this.el.setHeight = Ext.emptyFn;
        this.el.setWidth = Ext.emptyFn;
        this.el.setSize = Ext.emptyFn;
        this.el.dom.scroll = 'no';
        this.allowDomMove = false;
        this.autoWidth = true;
        this.autoHeight = true;
        Ext.EventManager.onWindowResize(this.fireResize, this);
        this.renderTo = this.el;
    },

    fireResize : function(w, h){
        this.fireEvent('resize', this, w, h, w, h);
    }
});
Ext.reg('viewport', Ext.Viewport);


The source code

/*!
 * licensing@extjs.com
 * http://www.extjs.com/license
 */

/**
 * @class Ext.form.VTypes
 *
This is a singleton object which contains a set of commonly used field validation functions.
 * The validations provided are basic and intended to be easily customizable and extended.

 *
To add custom VTypes specify the {@link Ext.form.TextField#vtype vtype} validation
 * test function, and optionally specify any corresponding error text to display and any keystroke
 * filtering mask to apply. For example:

 *

// custom Vtype for vtype:'time'
var timeTest = /^([1-9]|1[0-9]):([0-5][0-9])(\s[a|p]m)$/i;
Ext.apply(Ext.form.VTypes, {
    //  vtype validation function
    time: function(val, field) {
        return timeTest.test(val);
    },
    // vtype Text property: The error text to display when the validation function returns false
    timeText: 'Not a valid time.  Must be in the format "12:34 PM".',
    // vtype Mask property: The keystroke filter mask
    timeMask: /[\d\s:amp]/i
});
 *

 * Another example:
 *

// custom Vtype for vtype:'IPAddress'
Ext.apply(Ext.form.VTypes, {
    IPAddress:  function(v) {
        return /^\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}$/.test(v);
    },
    IPAddressText: 'Must be a numeric IP address',
    IPAddressMask: /[\d\.]/i
});
 *

 * @singleton
 */
Ext.form.VTypes = function(){
    // closure these in so they are only created once.
    var alpha = /^[a-zA-Z_]+$/,
        alphanum = /^[a-zA-Z0-9_]+$/,
        email = /^(\w+)([\-+.][\w]+)*@(\w[\-\w]*\.){1,5}([A-Za-z]){2,6}$/,
        url = /(((^https?)|(^ftp)):\/\/([\-\w]+\.)+\w{2,3}(\/[%\-\w]+(\.\w{2,})?)*(([\w\-\.\?\\\/+@&#;`~=%!]*)(\.\w{2,})?)*\/?)/i;

    // All these messages and functions are configurable
    return {

/**
         * The function used to validate email addresses.  Note that this is a very basic validation -- complete
         * validation per the email RFC specifications is very complex and beyond the scope of this class, although
         * this function can be overridden if a more comprehensive validation scheme is desired.  See the validation
         * section of the Wikipedia article on email addresses
         * for additional information.  This implementation is intended to validate the following emails:
         * 'barney@example.de', 'barney.rubble@example.com', 'barney-rubble@example.coop', 'barney+rubble@example.com'
         * .
         * @param {String} value The email address
         * @return {Boolean} true if the RegExp test passed, and false if not.
         */
        'email' : function(v){
            return email.test(v);
        },

/**
         * The error text to display when the email validation function returns false.  Defaults to:
         * 'This field should be an e-mail address in the format "user@example.com"'
         * @type String
         */
        'emailText' : 'This field should be an e-mail address in the format "user@example.com"',

/**
         * The keystroke filter mask to be applied on email input.  See the {@link #email} method for
         * information about more complex email validation. Defaults to:
         * /[a-z0-9_\.\-@]/i
         * @type RegExp
         */
        'emailMask' : /[a-z0-9_\.\-@]/i,

/**
         * The function used to validate URLs
         * @param {String} value The URL
         * @return {Boolean} true if the RegExp test passed, and false if not.
         */
        'url' : function(v){
            return url.test(v);
        },

/**
         * The error text to display when the url validation function returns false.  Defaults to:
         * 'This field should be a URL in the format "http:/'+'/www.example.com"'
         * @type String
         */
        'urlText' : 'This field should be a URL in the format "http:/'+'/www.example.com"',

/**
         * The function used to validate alpha values
         * @param {String} value The value
         * @return {Boolean} true if the RegExp test passed, and false if not.
         */
        'alpha' : function(v){
            return alpha.test(v);
        },

/**
         * The error text to display when the alpha validation function returns false.  Defaults to:
         * 'This field should only contain letters and _'
         * @type String
         */
        'alphaText' : 'This field should only contain letters and _',

/**
         * The keystroke filter mask to be applied on alpha input.  Defaults to:
         * /[a-z_]/i
         * @type RegExp
         */
        'alphaMask' : /[a-z_]/i,

/**
         * The function used to validate alphanumeric values
         * @param {String} value The value
         * @return {Boolean} true if the RegExp test passed, and false if not.
         */
        'alphanum' : function(v){
            return alphanum.test(v);
        },

/**
         * The error text to display when the alphanumeric validation function returns false.  Defaults to:
         * 'This field should only contain letters, numbers and _'
         * @type String
         */
        'alphanumText' : 'This field should only contain letters, numbers and _',

/**
         * The keystroke filter mask to be applied on alphanumeric input.  Defaults to:
         * /[a-z0-9_]/i
         * @type RegExp
         */
        'alphanumMask' : /[a-z0-9_]/i
    };
}();


The source code

/*!
 * licensing@extjs.com
 * http://www.extjs.com/license
 */

/**
 * @class Ext.Window
 * @extends Ext.Panel
 *
A specialized panel intended for use as an application window.  Windows are floated, {@link #resizable}, and
 * {@link #draggable} by default.  Windows can be {@link #maximizable maximized} to fill the viewport,
 * restored to their prior size, and can be {@link #minimize}d.

 *
Windows can also be linked to a {@link Ext.WindowGroup} or managed by the {@link Ext.WindowMgr} to provide
 * grouping, activation, to front, to back and other application-specific behavior.

 *
By default, Windows will be rendered to document.body. To {@link #constrain} a Window to another element
 * specify {@link Ext.Component#renderTo renderTo}.

 *
Note: By default, the {@link #closable close} header tool destroys the Window resulting in
 * destruction of any child Components. This makes the Window object, and all its descendants unusable. To enable
 * re-use of a Window, use {@link #closeAction closeAction: 'hide'}.

 * @constructor
 * @param {Object} config The config object
 * @xtype window
 */
Ext.Window = Ext.extend(Ext.Panel, {

/**
     * @cfg {Number} x
     * The X position of the left edge of the window on initial showing. Defaults to centering the Window within
     * the width of the Window's container {@link Ext.Element Element) (The Element that the Window is rendered to).
     */

/**
     * @cfg {Number} y
     * The Y position of the top edge of the window on initial showing. Defaults to centering the Window within
     * the height of the Window's container {@link Ext.Element Element) (The Element that the Window is rendered to).
     */

/**
     * @cfg {Boolean} modal
     * True to make the window modal and mask everything behind it when displayed, false to display it without
     * restricting access to other UI elements (defaults to false).
     */

/**
     * @cfg {String/Element} animateTarget
     * Id or element from which the window should animate while opening (defaults to null with no animation).
     */

/**
     * @cfg {String} resizeHandles
     * A valid {@link Ext.Resizable} handles config string (defaults to 'all').  Only applies when resizable = true.
     */

/**
     * @cfg {Ext.WindowGroup} manager
     * A reference to the WindowGroup that should manage this window (defaults to {@link Ext.WindowMgr}).
     */

/**
    * @cfg {String/Number/Component} defaultButton
    *
Specifies a Component to receive focus when this Window is focussed.

    *
This may be one of:

    *
  • The index of a footer Button.
    •
    *
  • The id of a Component.
    •
    *
  • A Component.
    •
    *

    */

/**
    * @cfg {Function} onEsc
    * Allows override of the built-in processing for the escape key. Default action
    * is to close the Window (performing whatever action is specified in {@link #closeAction}.
    * To prevent the Window closing when the escape key is pressed, specify this as
    * Ext.emptyFn (See {@link Ext#emptyFn}).
    */

/**
     * @cfg {Boolean} collapsed
     * True to render the window collapsed, false to render it expanded (defaults to false). Note that if
     * {@link #expandOnShow} is true (the default) it will override the collapsed config and the window
     * will always be expanded when shown.
     */

/**
     * @cfg {Boolean} maximized
     * True to initially display the window in a maximized state. (Defaults to false).
     */

/**
    * @cfg {String} baseCls
    * The base CSS class to apply to this panel's element (defaults to 'x-window').
    */
    baseCls : 'x-window',

/**
     * @cfg {Boolean} resizable
     * True to allow user resizing at each edge and corner of the window, false to disable resizing (defaults to true).
     */
    resizable : true,

/**
     * @cfg {Boolean} draggable
     * True to allow the window to be dragged by the header bar, false to disable dragging (defaults to true).  Note
     * that by default the window will be centered in the viewport, so if dragging is disabled the window may need
     * to be positioned programmatically after render (e.g., myWindow.setPosition(100, 100);).
     */
    draggable : true,

/**
     * @cfg {Boolean} closable
     *
True to display the 'close' tool button and allow the user to close the window, false to
     * hide the button and disallow closing the window (defaults to true).

     *
By default, when close is requested by either clicking the close button in the header
     * or pressing ESC when the Window has focus, the {@link #close} method will be called. This
     * will {@link Ext.Component#destroy destroy} the Window and its content meaning that
     * it may not be reused.

     *
To make closing a Window hide the Window so that it may be reused, set
     * {@link #closeAction} to 'hide'.
     */
    closable : true,

/**
     * @cfg {String} closeAction
     *
The action to take when the close header tool is clicked:
     *

     *
  • '{@link #close}' : Default

     * {@link #close remove} the window from the DOM and {@link Ext.Component#destroy destroy}
     * it and all descendant Components. The window will not be available to be
     * redisplayed via the {@link #show} method.
     *
    •
     *
  • '{@link #hide}' :

     * {@link #hide} the window by setting visibility to hidden and applying negative offsets.
     * The window will be available to be redisplayed via the {@link #show} method.
     *
    •
     *

     *
Note: This setting does not affect the {@link #close} method
     * which will always {@link Ext.Component#destroy destroy} the window. To
     * programatically hide a window, call {@link #hide}.

     */
    closeAction : 'close',

/**
     * @cfg {Boolean} constrain
     * True to constrain the window within its containing element, false to allow it to fall outside of its
     * containing element. By default the window will be rendered to document.body.  To render and constrain the
     * window within another element specify {@link #renderTo}.
     * (defaults to false).  Optionally the header only can be constrained using {@link #constrainHeader}.
     */
    constrain : false,

/**
     * @cfg {Boolean} constrainHeader
     * True to constrain the window header within its containing element (allowing the window body to fall outside
     * of its containing element) or false to allow the header to fall outside its containing element (defaults to
     * false). Optionally the entire window can be constrained using {@link #constrain}.
     */
    constrainHeader : false,

/**
     * @cfg {Boolean} plain
     * True to render the window body with a transparent background so that it will blend into the framing
     * elements, false to add a lighter background color to visually highlight the body element and separate it
     * more distinctly from the surrounding frame (defaults to false).
     */
    plain : false,

/**
     * @cfg {Boolean} minimizable
     * True to display the 'minimize' tool button and allow the user to minimize the window, false to hide the button
     * and disallow minimizing the window (defaults to false).  Note that this button provides no implementation --
     * the behavior of minimizing a window is implementation-specific, so the minimize event must be handled and a
     * custom minimize behavior implemented for this option to be useful.
     */
    minimizable : false,

/**
     * @cfg {Boolean} maximizable
     * True to display the 'maximize' tool button and allow the user to maximize the window, false to hide the button
     * and disallow maximizing the window (defaults to false).  Note that when a window is maximized, the tool button
     * will automatically change to a 'restore' button with the appropriate behavior already built-in that will
     * restore the window to its previous size.
     */
    maximizable : false,

/**
     * @cfg {Number} minHeight
     * The minimum height in pixels allowed for this window (defaults to 100).  Only applies when resizable = true.
     */
    minHeight : 100,

/**
     * @cfg {Number} minWidth
     * The minimum width in pixels allowed for this window (defaults to 200).  Only applies when resizable = true.
     */
    minWidth : 200,

/**
     * @cfg {Boolean} expandOnShow
     * True to always expand the window when it is displayed, false to keep it in its current state (which may be
     * {@link #collapsed}) when displayed (defaults to true).
     */
    expandOnShow : true,

    // inherited docs, same default
    collapsible : false,

/**
     * @cfg {Boolean} initHidden
     * True to hide the window until show() is explicitly called (defaults to true).
     * @deprecated
     */
    initHidden : undefined,

/**
     * @cfg {Boolean} hidden
     * Render this component hidden (default is true). If true, the
     * {@link #hide} method will be called internally.
     */
    hidden : true,

    // The following configs are set to provide the basic functionality of a window.
    // Changing them would require additional code to handle correctly and should
    // usually only be done in subclasses that can provide custom behavior.  Changing them
    // may have unexpected or undesirable results.

/** @cfg {String} elements @hide */
    elements : 'header,body',

/** @cfg {Boolean} frame @hide */
    frame : true,

/** @cfg {Boolean} floating @hide */
    floating : true,

    // private
    initComponent : function(){
        this.initTools();
        Ext.Window.superclass.initComponent.call(this);
        this.addEvents(

/**
             * @event activate
             * Fires after the window has been visually activated via {@link #setActive}.
             * @param {Ext.Window} this
             */

/**
             * @event deactivate
             * Fires after the window has been visually deactivated via {@link #setActive}.
             * @param {Ext.Window} this
             */

/**
             * @event resize
             * Fires after the window has been resized.
             * @param {Ext.Window} this
             * @param {Number} width The window's new width
             * @param {Number} height The window's new height
             */
            'resize',

/**
             * @event maximize
             * Fires after the window has been maximized.
             * @param {Ext.Window} this
             */
            'maximize',

/**
             * @event minimize
             * Fires after the window has been minimized.
             * @param {Ext.Window} this
             */
            'minimize',

/**
             * @event restore
             * Fires after the window has been restored to its original size after being maximized.
             * @param {Ext.Window} this
             */
            'restore'
        );
        // for backwards compat, this should be removed at some point
        if(Ext.isDefined(this.initHidden)){
            this.hidden = this.initHidden;
        }
        if(this.hidden === false){
            this.hidden = true;
            this.show();
        }
    },

    // private
    getState : function(){
        return Ext.apply(Ext.Window.superclass.getState.call(this) || {}, this.getBox(true));
    },

    // private
    onRender : function(ct, position){
        Ext.Window.superclass.onRender.call(this, ct, position);

        if(this.plain){
            this.el.addClass('x-window-plain');
        }

        // this element allows the Window to be focused for keyboard events
        this.focusEl = this.el.createChild({
                    tag: 'a', href:'#', cls:'x-dlg-focus',
                    tabIndex:'-1', html: ' '});
        this.focusEl.swallowEvent('click', true);

        this.proxy = this.el.createProxy('x-window-proxy');
        this.proxy.enableDisplayMode('block');

        if(this.modal){
            this.mask = this.container.createChild({cls:'ext-el-mask'}, this.el.dom);
            this.mask.enableDisplayMode('block');
            this.mask.hide();
            this.mon(this.mask, 'click', this.focus, this);
        }
        if(this.maximizable){
            this.mon(this.header, 'dblclick', this.toggleMaximize, this);
        }
    },

    // private
    initEvents : function(){
        Ext.Window.superclass.initEvents.call(this);
        if(this.animateTarget){
            this.setAnimateTarget(this.animateTarget);
        }

        if(this.resizable){
            this.resizer = new Ext.Resizable(this.el, {
                minWidth: this.minWidth,
                minHeight:this.minHeight,
                handles: this.resizeHandles || 'all',
                pinned: true,
                resizeElement : this.resizerAction,
                handleCls: 'x-window-handle'
            });
            this.resizer.window = this;
            this.mon(this.resizer, 'beforeresize', this.beforeResize, this);
        }

        if(this.draggable){
            this.header.addClass('x-window-draggable');
        }
        this.mon(this.el, 'mousedown', this.toFront, this);
        this.manager = this.manager || Ext.WindowMgr;
        this.manager.register(this);
        if(this.maximized){
            this.maximized = false;
            this.maximize();
        }
        if(this.closable){
            var km = this.getKeyMap();
            km.on(27, this.onEsc, this);
            km.disable();
        }
    },

    initDraggable : function(){

/**
         *
If this Window is configured {@link #draggable}, this property will contain
         * an instance of {@link Ext.dd.DD} which handles dragging the Window's DOM Element.

         *
This has implementations of startDrag, onDrag and endDrag
         * which perform the dragging action. If extra logic is needed at these points, use
         * {@link Function#createInterceptor createInterceptor} or {@link Function#createSequence createSequence} to
         * augment the existing implementations.

         * @type Ext.dd.DD
         * @property dd
         */
        this.dd = new Ext.Window.DD(this);
    },

   // private
    onEsc : function(k, e){
        e.stopEvent();
        this[this.closeAction]();
    },

    // private
    beforeDestroy : function(){
        if(this.rendered){
            this.hide();
            this.clearAnchor();
            Ext.destroy(
                this.focusEl,
                this.resizer,
                this.dd,
                this.proxy,
                this.mask
            );
        }
        Ext.Window.superclass.beforeDestroy.call(this);
    },

    // private
    onDestroy : function(){
        if(this.manager){
            this.manager.unregister(this);
        }
        Ext.Window.superclass.onDestroy.call(this);
    },

    // private
    initTools : function(){
        if(this.minimizable){
            this.addTool({
                id: 'minimize',
                handler: this.minimize.createDelegate(this, [])
            });
        }
        if(this.maximizable){
            this.addTool({
                id: 'maximize',
                handler: this.maximize.createDelegate(this, [])
            });
            this.addTool({
                id: 'restore',
                handler: this.restore.createDelegate(this, []),
                hidden:true
            });
        }
        if(this.closable){
            this.addTool({
                id: 'close',
                handler: this[this.closeAction].createDelegate(this, [])
            });
        }
    },

    // private
    resizerAction : function(){
        var box = this.proxy.getBox();
        this.proxy.hide();
        this.window.handleResize(box);
        return box;
    },

    // private
    beforeResize : function(){
        this.resizer.minHeight = Math.max(this.minHeight, this.getFrameHeight() + 40); // 40 is a magic minimum content size?
        this.resizer.minWidth = Math.max(this.minWidth, this.getFrameWidth() + 40);
        this.resizeBox = this.el.getBox();
    },

    // private
    updateHandles : function(){
        if(Ext.isIE && this.resizer){
            this.resizer.syncHandleHeight();
            this.el.repaint();
        }
    },

    // private
    handleResize : function(box){
        var rz = this.resizeBox;
        if(rz.x != box.x || rz.y != box.y){
            this.updateBox(box);
        }else{
            this.setSize(box);
            if (Ext.isIE6 && Ext.isStrict) {
                this.doLayout();
            }
        }
        this.focus();
        this.updateHandles();
        this.saveState();
    },

/**
     * Focuses the window.  If a defaultButton is set, it will receive focus, otherwise the
     * window itself will receive focus.
     */
    focus : function(){
        var f = this.focusEl,
            db = this.defaultButton,
            t = typeof db,
            el,
            ct;
        if(Ext.isDefined(db)){
            if(Ext.isNumber(db) && this.fbar){
                f = this.fbar.items.get(db);
            }else if(Ext.isString(db)){
                f = Ext.getCmp(db);
            }else{
                f = db;
            }
            el = f.getEl();
            ct = Ext.getDom(this.container);
            if (el && ct) {
                if (!Ext.lib.Region.getRegion(ct).contains(Ext.lib.Region.getRegion(el.dom))){
                    return;
                }
            }
        }
        f = f || this.focusEl;
        f.focus.defer(10, f);
    },

/**
     * Sets the target element from which the window should animate while opening.
     * @param {String/Element} el The target element or id
     */
    setAnimateTarget : function(el){
        el = Ext.get(el);
        this.animateTarget = el;
    },

    // private
    beforeShow : function(){
        delete this.el.lastXY;
        delete this.el.lastLT;
        if(this.x === undefined || this.y === undefined){
            var xy = this.el.getAlignToXY(this.container, 'c-c');
            var pos = this.el.translatePoints(xy[0], xy[1]);
            this.x = this.x === undefined? pos.left : this.x;
            this.y = this.y === undefined? pos.top : this.y;
        }
        this.el.setLeftTop(this.x, this.y);

        if(this.expandOnShow){
            this.expand(false);
        }

        if(this.modal){
            Ext.getBody().addClass('x-body-masked');
            this.mask.setSize(Ext.lib.Dom.getViewWidth(true), Ext.lib.Dom.getViewHeight(true));
            this.mask.show();
        }
    },

/**
     * Shows the window, rendering it first if necessary, or activates it and brings it to front if hidden.
     * @param {String/Element} animateTarget (optional) The target element or id from which the window should
     * animate while opening (defaults to null with no animation)
     * @param {Function} callback (optional) A callback function to call after the window is displayed
     * @param {Object} scope (optional) The scope (this reference) in which the callback is executed. Defaults to this Window.
     * @return {Ext.Window} this
     */
    show : function(animateTarget, cb, scope){
        if(!this.rendered){
            this.render(Ext.getBody());
        }
        if(this.hidden === false){
            this.toFront();
            return this;
        }
        if(this.fireEvent('beforeshow', this) === false){
            return this;
        }
        if(cb){
            this.on('show', cb, scope, {single:true});
        }
        this.hidden = false;
        if(Ext.isDefined(animateTarget)){
            this.setAnimateTarget(animateTarget);
        }
        this.beforeShow();
        if(this.animateTarget){
            this.animShow();
        }else{
            this.afterShow();
        }
        return this;
    },

    // private
    afterShow : function(isAnim){
        if (this.isDestroyed){
            return false;
        }
        this.proxy.hide();
        this.el.setStyle('display', 'block');
        this.el.show();
        if(this.maximized){
            this.fitContainer();
        }
        if(Ext.isMac && Ext.isGecko2){ // work around stupid FF 2.0/Mac scroll bar bug
            this.cascade(this.setAutoScroll);
        }

        if(this.monitorResize || this.modal || this.constrain || this.constrainHeader){
            Ext.EventManager.onWindowResize(this.onWindowResize, this);
        }
        this.doConstrain();
        this.doLayout();
        if(this.keyMap){
            this.keyMap.enable();
        }
        this.toFront();
        this.updateHandles();
        if(isAnim && (Ext.isIE || Ext.isWebKit)){
            var sz = this.getSize();
            this.onResize(sz.width, sz.height);
        }
        this.onShow();
        this.fireEvent('show', this);
    },

    // private
    animShow : function(){
        this.proxy.show();
        this.proxy.setBox(this.animateTarget.getBox());
        this.proxy.setOpacity(0);
        var b = this.getBox();
        this.el.setStyle('display', 'none');
        this.proxy.shift(Ext.apply(b, {
            callback: this.afterShow.createDelegate(this, [true], false),
            scope: this,
            easing: 'easeNone',
            duration: 0.25,
            opacity: 0.5
        }));
    },

/**
     * Hides the window, setting it to invisible and applying negative offsets.
     * @param {String/Element} animateTarget (optional) The target element or id to which the window should
     * animate while hiding (defaults to null with no animation)
     * @param {Function} callback (optional) A callback function to call after the window is hidden
     * @param {Object} scope (optional) The scope (this reference) in which the callback is executed. Defaults to this Window.
     * @return {Ext.Window} this
     */
    hide : function(animateTarget, cb, scope){
        if(this.hidden || this.fireEvent('beforehide', this) === false){
            return this;
        }
        if(cb){
            this.on('hide', cb, scope, {single:true});
        }
        this.hidden = true;
        if(animateTarget !== undefined){
            this.setAnimateTarget(animateTarget);
        }
        if(this.modal){
            this.mask.hide();
            Ext.getBody().removeClass('x-body-masked');
        }
        if(this.animateTarget){
            this.animHide();
        }else{
            this.el.hide();
            this.afterHide();
        }
        return this;
    },

    // private
    afterHide : function(){
        this.proxy.hide();
        if(this.monitorResize || this.modal || this.constrain || this.constrainHeader){
            Ext.EventManager.removeResizeListener(this.onWindowResize, this);
        }
        if(this.keyMap){
            this.keyMap.disable();
        }
        this.onHide();
        this.fireEvent('hide', this);
    },

    // private
    animHide : function(){
        this.proxy.setOpacity(0.5);
        this.proxy.show();
        var tb = this.getBox(false);
        this.proxy.setBox(tb);
        this.el.hide();
        this.proxy.shift(Ext.apply(this.animateTarget.getBox(), {
            callback: this.afterHide,
            scope: this,
            duration: 0.25,
            easing: 'easeNone',
            opacity: 0
        }));
    },

/**
     * Method that is called immediately before the show event is fired.
     * Defaults to Ext.emptyFn.
     */
    onShow : Ext.emptyFn,

/**
     * Method that is called immediately before the hide event is fired.
     * Defaults to Ext.emptyFn.
     */
    onHide : Ext.emptyFn,

    // private
    onWindowResize : function(){
        if(this.maximized){
            this.fitContainer();
        }
        if(this.modal){
            this.mask.setSize('100%', '100%');
            var force = this.mask.dom.offsetHeight;
            this.mask.setSize(Ext.lib.Dom.getViewWidth(true), Ext.lib.Dom.getViewHeight(true));
        }
        this.doConstrain();
    },

    // private
    doConstrain : function(){
        if(this.constrain || this.constrainHeader){
            var offsets;
            if(this.constrain){
                offsets = {
                    right:this.el.shadowOffset,
                    left:this.el.shadowOffset,
                    bottom:this.el.shadowOffset
                };
            }else {
                var s = this.getSize();
                offsets = {
                    right:-(s.width - 100),
                    bottom:-(s.height - 25)
                };
            }

            var xy = this.el.getConstrainToXY(this.container, true, offsets);
            if(xy){
                this.setPosition(xy[0], xy[1]);
            }
        }
    },

    // private - used for dragging
    ghost : function(cls){
        var ghost = this.createGhost(cls);
        var box = this.getBox(true);
        ghost.setLeftTop(box.x, box.y);
        ghost.setWidth(box.width);
        this.el.hide();
        this.activeGhost = ghost;
        return ghost;
    },

    // private
    unghost : function(show, matchPosition){
        if(!this.activeGhost) {
            return;
        }
        if(show !== false){
            this.el.show();
            this.focus.defer(10, this);
            if(Ext.isMac && Ext.isGecko2){ // work around stupid FF 2.0/Mac scroll bar bug
                this.cascade(this.setAutoScroll);
            }
        }
        if(matchPosition !== false){
            this.setPosition(this.activeGhost.getLeft(true), this.activeGhost.getTop(true));
        }
        this.activeGhost.hide();
        this.activeGhost.remove();
        delete this.activeGhost;
    },

/**
     * Placeholder method for minimizing the window.  By default, this method simply fires the {@link #minimize} event
     * since the behavior of minimizing a window is application-specific.  To implement custom minimize behavior,
     * either the minimize event can be handled or this method can be overridden.
     * @return {Ext.Window} this
     */
    minimize : function(){
        this.fireEvent('minimize', this);
        return this;
    },

/**
     *
Closes the Window, removes it from the DOM, {@link Ext.Component#destroy destroy}s
     * the Window object and all its descendant Components. The {@link Ext.Panel#beforeclose beforeclose}
     * event is fired before the close happens and will cancel the close action if it returns false.

     *
Note: This method is not affected by the {@link #closeAction} setting which
     * only affects the action triggered when clicking the {@link #closable 'close' tool in the header}.
     * To hide the Window without destroying it, call {@link #hide}.

     */
    close : function(){
        if(this.fireEvent('beforeclose', this) !== false){
            if(this.hidden){
                this.doClose();
            }else{
                this.hide(null, this.doClose, this);
            }
        }
    },

    // private
    doClose : function(){
        this.fireEvent('close', this);
        this.destroy();
    },

/**
     * Fits the window within its current container and automatically replaces
     * the {@link #maximizable 'maximize' tool button} with the 'restore' tool button.
     * Also see {@link #toggleMaximize}.
     * @return {Ext.Window} this
     */
    maximize : function(){
        if(!this.maximized){
            this.expand(false);
            this.restoreSize = this.getSize();
            this.restorePos = this.getPosition(true);
            if (this.maximizable){
                this.tools.maximize.hide();
                this.tools.restore.show();
            }
            this.maximized = true;
            this.el.disableShadow();

            if(this.dd){
                this.dd.lock();
            }
            if(this.collapsible){
                this.tools.toggle.hide();
            }
            this.el.addClass('x-window-maximized');
            this.container.addClass('x-window-maximized-ct');

            this.setPosition(0, 0);
            this.fitContainer();
            this.fireEvent('maximize', this);
        }
        return this;
    },

/**
     * Restores a {@link #maximizable maximized}  window back to its original
     * size and position prior to being maximized and also replaces
     * the 'restore' tool button with the 'maximize' tool button.
     * Also see {@link #toggleMaximize}.
     * @return {Ext.Window} this
     */
    restore : function(){
        if(this.maximized){
            var t = this.tools;
            this.el.removeClass('x-window-maximized');
            if(t.restore){
                t.restore.hide();
            }
            if(t.maximize){
                t.maximize.show();
            }
            this.setPosition(this.restorePos[0], this.restorePos[1]);
            this.setSize(this.restoreSize.width, this.restoreSize.height);
            delete this.restorePos;
            delete this.restoreSize;
            this.maximized = false;
            this.el.enableShadow(true);

            if(this.dd){
                this.dd.unlock();
            }
            if(this.collapsible && t.toggle){
                t.toggle.show();
            }
            this.container.removeClass('x-window-maximized-ct');

            this.doConstrain();
            this.fireEvent('restore', this);
        }
        return this;
    },

/**
     * A shortcut method for toggling between {@link #maximize} and {@link #restore} based on the current maximized
     * state of the window.
     * @return {Ext.Window} this
     */
    toggleMaximize : function(){
        return this[this.maximized ? 'restore' : 'maximize']();
    },

    // private
    fitContainer : function(){
        var vs = this.container.getViewSize(false);
        this.setSize(vs.width, vs.height);
    },

    // private
    // z-index is managed by the WindowManager and may be overwritten at any time
    setZIndex : function(index){
        if(this.modal){
            this.mask.setStyle('z-index', index);
        }
        this.el.setZIndex(++index);
        index += 5;

        if(this.resizer){
            this.resizer.proxy.setStyle('z-index', ++index);
        }

        this.lastZIndex = index;
    },

/**
     * Aligns the window to the specified element
     * @param {Mixed} element The element to align to.
     * @param {String} position (optional, defaults to "tl-bl?") The position to align to (see {@link Ext.Element#alignTo} for more details).
     * @param {Array} offsets (optional) Offset the positioning by [x, y]
     * @return {Ext.Window} this
     */
    alignTo : function(element, position, offsets){
        var xy = this.el.getAlignToXY(element, position, offsets);
        this.setPagePosition(xy[0], xy[1]);
        return this;
    },

/**
     * Anchors this window to another element and realigns it when the window is resized or scrolled.
     * @param {Mixed} element The element to align to.
     * @param {String} position The position to align to (see {@link Ext.Element#alignTo} for more details)
     * @param {Array} offsets (optional) Offset the positioning by [x, y]
     * @param {Boolean/Number} monitorScroll (optional) true to monitor body scroll and reposition. If this parameter
     * is a number, it is used as the buffer delay (defaults to 50ms).
     * @return {Ext.Window} this
     */
    anchorTo : function(el, alignment, offsets, monitorScroll){
        this.clearAnchor();
        this.anchorTarget = {
            el: el,
            alignment: alignment,
            offsets: offsets
        };

        Ext.EventManager.onWindowResize(this.doAnchor, this);
        var tm = typeof monitorScroll;
        if(tm != 'undefined'){
            Ext.EventManager.on(window, 'scroll', this.doAnchor, this,
                {buffer: tm == 'number' ? monitorScroll : 50});
        }
        return this.doAnchor();
    },

    /**
     * Performs the anchor, using the saved anchorTarget property.
     * @return {Ext.Window} this
     * @private
     */
    doAnchor : function(){
        var o = this.anchorTarget;
        this.alignTo(o.el, o.alignment, o.offsets);
        return this;
    },

/**
     * Removes any existing anchor from this window. See {@link #anchorTo}.
     * @return {Ext.Window} this
     */
    clearAnchor : function(){
        if(this.anchorTarget){
            Ext.EventManager.removeResizeListener(this.doAnchor, this);
            Ext.EventManager.un(window, 'scroll', this.doAnchor, this);
            delete this.anchorTarget;
        }
        return this;
    },

/**
     * Brings this window to the front of any other visible windows
     * @param {Boolean} e (optional) Specify false to prevent the window from being focused.
     * @return {Ext.Window} this
     */
    toFront : function(e){
        if(this.manager.bringToFront(this)){
            if(!e || !e.getTarget().focus){
                this.focus();
            }
        }
        return this;
    },

/**
     * Makes this the active window by showing its shadow, or deactivates it by hiding its shadow.  This method also
     * fires the {@link #activate} or {@link #deactivate} event depending on which action occurred. This method is
     * called internally by {@link Ext.WindowMgr}.
     * @param {Boolean} active True to activate the window, false to deactivate it (defaults to false)
     */
    setActive : function(active){
        if(active){
            if(!this.maximized){
                this.el.enableShadow(true);
            }
            this.fireEvent('activate', this);
        }else{
            this.el.disableShadow();
            this.fireEvent('deactivate', this);
        }
    },

/**
     * Sends this window to the back of (lower z-index than) any other visible windows
     * @return {Ext.Window} this
     */
    toBack : function(){
        this.manager.sendToBack(this);
        return this;
    },

/**
     * Centers this window in the viewport
     * @return {Ext.Window} this
     */
    center : function(){
        var xy = this.el.getAlignToXY(this.container, 'c-c');
        this.setPagePosition(xy[0], xy[1]);
        return this;
    }

/**
     * @cfg {Boolean} autoWidth @hide
     **/
});
Ext.reg('window', Ext.Window);

// private - custom Window DD implementation
Ext.Window.DD = function(win){
    this.win = win;
    Ext.Window.DD.superclass.constructor.call(this, win.el.id, 'WindowDD-'+win.id);
    this.setHandleElId(win.header.id);
    this.scroll = false;
};

Ext.extend(Ext.Window.DD, Ext.dd.DD, {
    moveOnly:true,
    headerOffsets:[100, 25],
    startDrag : function(){
        var w = this.win;
        this.proxy = w.ghost();
        if(w.constrain !== false){
            var so = w.el.shadowOffset;
            this.constrainTo(w.container, {right: so, left: so, bottom: so});
        }else if(w.constrainHeader !== false){
            var s = this.proxy.getSize();
            this.constrainTo(w.container, {right: -(s.width-this.headerOffsets[0]), bottom: -(s.height-this.headerOffsets[1])});
        }
    },
    b4Drag : Ext.emptyFn,

    onDrag : function(e){
        this.alignElWithMouse(this.proxy, e.getPageX(), e.getPageY());
    },

    endDrag : function(e){
        this.win.unghost();
        this.win.saveState();
    }
});


The source code

/*!
 * licensing@extjs.com
 * http://www.extjs.com/license
 */

/**
 * @class Ext.WindowGroup
 * An object that manages a group of {@link Ext.Window} instances and provides z-order management
 * and window activation behavior.
 * @constructor
 */
Ext.WindowGroup = function(){
    var list = {};
    var accessList = [];
    var front = null;

    // private
    var sortWindows = function(d1, d2){
        return (!d1._lastAccess || d1._lastAccess < d2._lastAccess) ? -1 : 1;
    };

    // private
    var orderWindows = function(){
        var a = accessList, len = a.length;
        if(len > 0){
            a.sort(sortWindows);
            var seed = a[0].manager.zseed;
            for(var i = 0; i < len; i++){
                var win = a[i];
                if(win && !win.hidden){
                    win.setZIndex(seed + (i*10));
                }
            }
        }
        activateLast();
    };

    // private
    var setActiveWin = function(win){
        if(win != front){
            if(front){
                front.setActive(false);
            }
            front = win;
            if(win){
                win.setActive(true);
            }
        }
    };

    // private
    var activateLast = function(){
        for(var i = accessList.length-1; i >=0; --i) {
            if(!accessList[i].hidden){
                setActiveWin(accessList[i]);
                return;
            }
        }
        // none to activate
        setActiveWin(null);
    };

    return {

/**
         * The starting z-index for windows in this WindowGroup (defaults to 9000)
         * @type Number The z-index value
         */
        zseed : 9000,

/**
         *
Registers a {@link Ext.Window Window} with this WindowManager. This should not
         * need to be called under normal circumstances. Windows are automatically registered
         * with a {@link Ext.Window#manager manager} at construction time.

         *
Where this may be useful is moving Windows between two WindowManagers. For example,
         * to bring the Ext.MessageBox dialog under the same manager as the Desktop's
         * WindowManager in the desktop sample app:
var msgWin = Ext.MessageBox.getDialog();
MyDesktop.getDesktop().getManager().register(msgWin);

         * @param {Window} win The Window to register.
         */
        register : function(win){
            if(win.manager){
                win.manager.unregister(win);
            }
            win.manager = this;

            list[win.id] = win;
            accessList.push(win);
            win.on('hide', activateLast);
        },

/**
         *
Unregisters a {@link Ext.Window Window} from this WindowManager. This should not
         * need to be called. Windows are automatically unregistered upon destruction.
         * See {@link #register}.

         * @param {Window} win The Window to unregister.
         */
        unregister : function(win){
            delete win.manager;
            delete list[win.id];
            win.un('hide', activateLast);
            accessList.remove(win);
        },

/**
         * Gets a registered window by id.
         * @param {String/Object} id The id of the window or a {@link Ext.Window} instance
         * @return {Ext.Window}
         */
        get : function(id){
            return typeof id == "object" ? id : list[id];
        },

/**
         * Brings the specified window to the front of any other active windows in this WindowGroup.
         * @param {String/Object} win The id of the window or a {@link Ext.Window} instance
         * @return {Boolean} True if the dialog was brought to the front, else false
         * if it was already in front
         */
        bringToFront : function(win){
            win = this.get(win);
            if(win != front){
                win._lastAccess = new Date().getTime();
                orderWindows();
                return true;
            }
            return false;
        },

/**
         * Sends the specified window to the back of other active windows in this WindowGroup.
         * @param {String/Object} win The id of the window or a {@link Ext.Window} instance
         * @return {Ext.Window} The window
         */
        sendToBack : function(win){
            win = this.get(win);
            win._lastAccess = -(new Date().getTime());
            orderWindows();
            return win;
        },

/**
         * Hides all windows in this WindowGroup.
         */
        hideAll : function(){
            for(var id in list){
                if(list[id] && typeof list[id] != "function" && list[id].isVisible()){
                    list[id].hide();
                }
            }
        },

/**
         * Gets the currently-active window in this WindowGroup.
         * @return {Ext.Window} The active window
         */
        getActive : function(){
            return front;
        },

/**
         * Returns zero or more windows in this WindowGroup using the custom search function passed to this method.
         * The function should accept a single {@link Ext.Window} reference as its only argument and should
         * return true if the window matches the search criteria, otherwise it should return false.
         * @param {Function} fn The search function
         * @param {Object} scope (optional) The scope (this reference) in which the function is executed. Defaults to the Window being tested.
         * that gets passed to the function if not specified)
         * @return {Array} An array of zero or more matching windows
         */
        getBy : function(fn, scope){
            var r = [];
            for(var i = accessList.length-1; i >=0; --i) {
                var win = accessList[i];
                if(fn.call(scope||win, win) !== false){
                    r.push(win);
                }
            }
            return r;
        },

/**
         * Executes the specified function once for every window in this WindowGroup, passing each
         * window as the only parameter. Returning false from the function will stop the iteration.
         * @param {Function} fn The function to execute for each item
         * @param {Object} scope (optional) The scope (this reference) in which the function is executed. Defaults to the current Window in the iteration.
         */
        each : function(fn, scope){
            for(var id in list){
                if(list[id] && typeof list[id] != "function"){
                    if(fn.call(scope || list[id], list[id]) === false){
                        return;
                    }
                }
            }
        }
    };
};

/**
 * @class Ext.WindowMgr
 * @extends Ext.WindowGroup
 * The default global window group that is available automatically.  To have more than one group of windows
 * with separate z-order stacks, create additional instances of {@link Ext.WindowGroup} as needed.
 * @singleton
 */
Ext.WindowMgr = new Ext.WindowGroup();


The source code

/*!
 * licensing@extjs.com
 * http://www.extjs.com/license
 */

/**
 * @class Ext.data.XmlReader
 * @extends Ext.data.DataReader
 *
Data reader class to create an Array of {@link Ext.data.Record} objects from an XML document
 * based on mappings in a provided {@link Ext.data.Record} constructor.

 *
Note: that in order for the browser to parse a returned XML document, the Content-Type
 * header in the HTTP response must be set to "text/xml" or "application/xml".

 *
Example code:

 *

var Employee = Ext.data.Record.create([
   {name: 'name', mapping: 'name'},     // "mapping" property not needed if it is the same as "name"
   {name: 'occupation'}                 // This field will use "occupation" as the mapping.
]);
var myReader = new Ext.data.XmlReader({
   totalProperty: "results", // The element which contains the total dataset size (optional)
   record: "row",           // The repeated element which contains row information
   idProperty: "id"         // The element within the row that provides an ID for the record (optional)
   messageProperty: "msg"   // The element within the response that provides a user-feedback message (optional)
}, Employee);

 *

 * This would consume an XML file like this:
 *

<?xml version="1.0" encoding="UTF-8"?>
<dataset>
 <results>2</results>
 <row>
   <id>1</id>
   <name>Bill</name>
   <occupation>Gardener</occupation>
 </row>
 <row>
   <id>2</id>
   <name>Ben</name>
   <occupation>Horticulturalist</occupation>
 </row>
</dataset>

 * @cfg {String} totalProperty The DomQuery path from which to retrieve the total number of records
 * in the dataset. This is only needed if the whole dataset is not passed in one go, but is being
 * paged from the remote server.
 * @cfg {String} record The DomQuery path to the repeated element which contains record information.
 * @cfg {String} record The DomQuery path to the repeated element which contains record information.
 * @cfg {String} successProperty The DomQuery path to the success attribute used by forms.
 * @cfg {String} idPath The DomQuery path relative from the record element to the element that contains
 * a record identifier value.
 * @constructor
 * Create a new XmlReader.
 * @param {Object} meta Metadata configuration options
 * @param {Object} recordType Either an Array of field definition objects as passed to
 * {@link Ext.data.Record#create}, or a Record constructor object created using {@link Ext.data.Record#create}.
 */
Ext.data.XmlReader = function(meta, recordType){
    meta = meta || {};

    // backwards compat, convert idPath or id / success
    Ext.applyIf(meta, {
        idProperty: meta.idProperty || meta.idPath || meta.id,
        successProperty: meta.successProperty || meta.success
    });

    Ext.data.XmlReader.superclass.constructor.call(this, meta, recordType || meta.fields);
};
Ext.extend(Ext.data.XmlReader, Ext.data.DataReader, {
    /**
     * This method is only used by a DataProxy which has retrieved data from a remote server.
     * @param {Object} response The XHR object which contains the parsed XML document.  The response is expected
     * to contain a property called responseXML which refers to an XML document object.
     * @return {Object} records A data block which is used by an {@link Ext.data.Store} as
     * a cache of Ext.data.Records.
     */
    read : function(response){
        var doc = response.responseXML;
        if(!doc) {
            throw {message: "XmlReader.read: XML Document not available"};
        }
        return this.readRecords(doc);
    },

    /**
     * Create a data block containing Ext.data.Records from an XML document.
     * @param {Object} doc A parsed XML document.
     * @return {Object} records A data block which is used by an {@link Ext.data.Store} as
     * a cache of Ext.data.Records.
     */
    readRecords : function(doc){
        /**
         * After any data loads/reads, the raw XML Document is available for further custom processing.
         * @type XMLDocument
         */
        this.xmlData = doc;

        var root    = doc.documentElement || doc,
            q       = Ext.DomQuery,
            totalRecords = 0,
            success = true;

        if(this.meta.totalProperty){
            totalRecords = this.getTotal(root, 0);
        }
        if(this.meta.successProperty){
            success = this.getSuccess(root);
        }

        var records = this.extractData(q.select(this.meta.record, root), true); // <-- true to return Ext.data.Record[]

        // TODO return Ext.data.Response instance.  @see #readResponse
        return {
            success : success,
            records : records,
            totalRecords : totalRecords || records.length
        };
    },

    /**
     * Decode an XML response from server.
     * @param {String} action [{@link Ext.data.Api#actions} create|read|update|destroy]
     * @param {Object} response HTTP Response object from browser.
     * @return {Ext.data.Response} An instance of {@link Ext.data.Response}
     */
    readResponse : function(action, response) {
        var q   = Ext.DomQuery,
        doc     = response.responseXML;

        // create general Response instance.
        var res = new Ext.data.Response({
            action: action,
            success : this.getSuccess(doc),
            message: this.getMessage(doc),
            data: this.extractData(q.select(this.meta.record, doc) || q.select(this.meta.root, doc), false),
            raw: doc
        });

        if (Ext.isEmpty(res.success)) {
            throw new Ext.data.DataReader.Error('successProperty-response', this.meta.successProperty);
        }

        // Create actions from a response having status 200 must return pk
        if (action === Ext.data.Api.actions.create) {
            var def = Ext.isDefined(res.data);
            if (def && Ext.isEmpty(res.data)) {
                throw new Ext.data.JsonReader.Error('root-empty', this.meta.root);
            }
            else if (!def) {
                throw new Ext.data.JsonReader.Error('root-undefined-response', this.meta.root);
            }
        }
        return res;
    },

    getSuccess : function() {
        return true;
    },

    /**
     * build response-data extractor functions.
     * @private
     * @ignore
     */
    buildExtractors : function() {
        if(this.ef){
            return;
        }
        var s       = this.meta,
            Record  = this.recordType,
            f       = Record.prototype.fields,
            fi      = f.items,
            fl      = f.length;

        if(s.totalProperty) {
            this.getTotal = this.createAccessor(s.totalProperty);
        }
        if(s.successProperty) {
            this.getSuccess = this.createAccessor(s.successProperty);
        }
        if (s.messageProperty) {
            this.getMessage = this.createAccessor(s.messageProperty);
        }
        this.getRoot = function(res) {
            return (!Ext.isEmpty(res[this.meta.record])) ? res[this.meta.record] : res[this.meta.root];
        };
        if (s.idPath || s.idProperty) {
            var g = this.createAccessor(s.idPath || s.idProperty);
            this.getId = function(rec) {
                var id = g(rec) || rec.id;
                return (id === undefined || id === '') ? null : id;
            };
        } else {
            this.getId = function(){return null;};
        }
        var ef = [];
        for(var i = 0; i < fl; i++){
            f = fi[i];
            var map = (f.mapping !== undefined && f.mapping !== null) ? f.mapping : f.name;
            ef.push(this.createAccessor(map));
        }
        this.ef = ef;
    },

    /**
     * Creates a function to return some particular key of data from a response.
     * @param {String} key
     * @return {Function}
     * @private
     * @ignore
     */
    createAccessor : function(){
        var q = Ext.DomQuery;
        return function(key) {
            switch(key) {
                case this.meta.totalProperty:
                    return function(root, def){
                        return q.selectNumber(key, root, def);
                    };
                    break;
                case this.meta.successProperty:
                    return function(root, def) {
                        var sv = q.selectValue(key, root, true);
                        var success = sv !== false && sv !== 'false';
                        return success;
                    };
                    break;
                default:
                    return function(root, def) {
                        return q.selectValue(key, root, def);
                    };
                    break;
            }
        };
    }(),

    /**
     * extracts values and type-casts a row of data from server, extracted by #extractData
     * @param {Hash} data
     * @param {Ext.data.Field[]} items
     * @param {Number} len
     * @private
     * @ignore
     */
    extractValues : function(data, items, len) {
        var f, values = {};
        for(var j = 0; j < len; j++){
            f = items[j];
            var v = this.ef[j](data);
            values[f.name] = f.convert((v !== undefined) ? v : f.defaultValue, data);
        }
        return values;
    }
});


The source code

/*!
 * licensing@extjs.com
 * http://www.extjs.com/license
 */

/**
 * @class Ext.data.XmlStore
 * @extends Ext.data.Store
 *
Small helper class to make creating {@link Ext.data.Store}s from XML data easier.
 * A XmlStore will be automatically configured with a {@link Ext.data.XmlReader}.

 *
A store configuration would be something like:

var store = new Ext.data.XmlStore({
    // store configs
    autoDestroy: true,
    storeId: 'myStore',
    url: 'sheldon.xml', // automatically configures a HttpProxy
    // reader configs
    record: 'Item', // records will have an "Item" tag
    idPath: 'ASIN',
    totalRecords: '@TotalResults'
    fields: [
        // set up the fields mapping into the xml doc
        // The first needs mapping, the others are very basic
        {name: 'Author', mapping: 'ItemAttributes > Author'},
        'Title', 'Manufacturer', 'ProductGroup'
    ]
});
 *

 *
This store is configured to consume a returned object of the form:

<?xml version="1.0" encoding="UTF-8"?>
<ItemSearchResponse xmlns="http://webservices.amazon.com/AWSECommerceService/2009-05-15">
    <Items>
        <Request>
            <IsValid>True</IsValid>
            <ItemSearchRequest>
                <Author>Sidney Sheldon</Author>
                <SearchIndex>Books</SearchIndex>
            </ItemSearchRequest>
        </Request>
        <TotalResults>203</TotalResults>
        <TotalPages>21</TotalPages>
        <Item>
            <ASIN>0446355453</ASIN>
            <DetailPageURL>
                http://www.amazon.com/
            </DetailPageURL>
            <ItemAttributes>
                <Author>Sidney Sheldon</Author>
                <Manufacturer>Warner Books</Manufacturer>
                <ProductGroup>Book</ProductGroup>
                <Title>Master of the Game</Title>
            </ItemAttributes>
        </Item>
    </Items>
</ItemSearchResponse>
 *

 * An object literal of this form could also be used as the {@link #data} config option.

 *
Note: Although not listed here, this class accepts all of the configuration options of
 * {@link Ext.data.XmlReader XmlReader}.

 * @constructor
 * @param {Object} config
 * @xtype xmlstore
 */
Ext.data.XmlStore = Ext.extend(Ext.data.Store, {

/**
     * @cfg {Ext.data.DataReader} reader @hide
     */
    constructor: function(config){
        Ext.data.XmlStore.superclass.constructor.call(this, Ext.apply(config, {
            reader: new Ext.data.XmlReader(config)
        }));
    }
});
Ext.reg('xmlstore', Ext.data.XmlStore);


The source code

/*!
 * licensing@extjs.com
 * http://www.extjs.com/license
 */

/**
 * @class Ext.data.XmlWriter
 * @extends Ext.data.DataWriter
 * DataWriter extension for writing an array or single {@link Ext.data.Record} object(s) in preparation for executing a remote CRUD action via XML.
 * XmlWriter uses an instance of {@link Ext.XTemplate} for maximum flexibility in defining your own custom XML schema if the default schema is not appropriate for your needs.
 * See the {@link #tpl} configuration-property.
 */
Ext.data.XmlWriter = function(params) {
    Ext.data.XmlWriter.superclass.constructor.apply(this, arguments);
    // compile the XTemplate for rendering XML documents.
    this.tpl = (typeof(this.tpl) === 'string') ? new Ext.XTemplate(this.tpl).compile() : this.tpl.compile();
};
Ext.extend(Ext.data.XmlWriter, Ext.data.DataWriter, {

/**
     * @cfg {String} documentRoot [xrequest] (Optional) The name of the XML document root-node.  Note:
     * this parameter is required only when sending extra {@link Ext.data.Store#baseParams baseParams} to the server
     * during a write-request -- if no baseParams are set, the {@link Ext.data.XmlReader#record} meta-property can
     * suffice as the XML document root-node for write-actions involving just a single record.  For requests
     * involving multiple records and NO baseParams, the {@link Ext.data.XmlWriter#root} property can
     * act as the XML document root.
     */
    documentRoot: 'xrequest',

/**
     * @cfg {Boolean} forceDocumentRoot [false] Set to true to force XML documents having a root-node as defined
     * by {@link #documentRoot}, even with no baseParams defined.
     */
    forceDocumentRoot: false,

/**
     * @cfg {String} root [records] The name of the containing element which will contain the nodes of an write-action involving multiple records.  Each
     * xml-record written to the server will be wrapped in an element named after {@link Ext.data.XmlReader#record} property.
     * eg:

<?xml version="1.0" encoding="UTF-8"?>
<user><first>Barney</first></user>

     * However, when multiple records are written in a batch-operation, these records must be wrapped in a containing
     * Element.
     * eg:

<?xml version="1.0" encoding="UTF-8"?>
    <records>
        <first>Barney</first></user>
        <records><first>Barney</first></user>
    </records>

     * Defaults to records.  Do not confuse the nature of this property with that of {@link #documentRoot}
     */
    root: 'records',

/**
     * @cfg {String} xmlVersion [1.0] The version written to header of xml documents.

<?xml version="1.0" encoding="ISO-8859-15"?>

     */
    xmlVersion : '1.0',

/**
     * @cfg {String} xmlEncoding [ISO-8859-15] The encoding written to header of xml documents.

<?xml version="1.0" encoding="ISO-8859-15"?>

     */
    xmlEncoding: 'ISO-8859-15',

/**
     * @cfg {String/Ext.XTemplate} tpl The XML template used to render {@link Ext.data.Api#actions write-actions} to your server.
     *
One can easily provide his/her own custom {@link Ext.XTemplate#constructor template-definition} if the default does not suffice.

     *
Defaults to:

<?xml version="{version}" encoding="{encoding}"?>
    <tpl if="documentRoot"><{documentRoot}>
    <tpl for="baseParams">
        <tpl for=".">
            <{name}>{value}</{name}>
        </tpl>
    </tpl>
    <tpl if="records.length > 1"><{root}>',
    <tpl for="records">
        <{parent.record}>
        <tpl for=".">
            <{name}>{value}</{name}>
        </tpl>
        </{parent.record}>
    </tpl>
    <tpl if="records.length > 1"></{root}></tpl>
    <tpl if="documentRoot"></{documentRoot}></tpl>

     *
Templates will be called with the following API

     *

     *
  • {String} version [1.0] The xml version.
    •
     *
  • {String} encoding [ISO-8859-15] The xml encoding.
    •
     *
  • {String/false} documentRoot The XML document root-node name or false if not required.  See {@link #documentRoot} and {@link #forceDocumentRoot}.
    •
     *
  • {String} record The meta-data parameter defined on your {@link Ext.data.XmlReader#record} configuration represents the name of the xml-tag containing each record.
    •
     *
  • {String} root The meta-data parameter defined by {@link Ext.data.XmlWriter#root} configuration-parameter.  Represents the name of the xml root-tag when sending multiple records to the server.
    •
     *
  • {Array} records The records being sent to the server, ie: the subject of the write-action being performed.  The records parameter will be always be an array, even when only a single record is being acted upon.
     *     Each item within the records array will contain an array of field objects having the following properties:
     *

     *
    • {String} name The field-name of the record as defined by your {@link Ext.data.Record#create Ext.data.Record definition}.  The "mapping" property will be used, otherwise it will match the "name" property.  Use this parameter to define the XML tag-name of the property.
      •
     *
    • {Mixed} value The record value of the field enclosed within XML tags specified by name property above.
      •
     *
    •
     *
  • {Array} baseParams.  The baseParams as defined upon {@link Ext.data.Store#baseParams}.  Note that the baseParams have been converted into an array of [{name : "foo", value: "bar"}, ...] pairs in the same manner as the records parameter above.  See {@link #documentRoot} and {@link #forceDocumentRoot}.
    •
     *

     */
    // Encoding the ? here in case it's being included by some kind of page that will parse it (eg. PHP)
    tpl: '<\u003fxml version="{version}" encoding="{encoding}"\u003f><{documentRoot}><{name}>{value}<{root}><{parent.record}><{name}>{value}',

/**
     * XmlWriter implementation of the final stage of a write action.
     * @param {Object} params Transport-proxy's (eg: {@link Ext.Ajax#request}) params-object to write-to.
     * @param {Object} baseParams as defined by {@link Ext.data.Store#baseParams}.  The baseParms must be encoded by the extending class, eg: {@link Ext.data.JsonWriter}, {@link Ext.data.XmlWriter}.
     * @param {Object/Object[]} data Data-object representing the compiled Store-recordset.
     */
    render : function(params, baseParams, data) {
        baseParams = this.toArray(baseParams);
        params.xmlData = this.tpl.applyTemplate({
            version: this.xmlVersion,
            encoding: this.xmlEncoding,
            documentRoot: (baseParams.length > 0 || this.forceDocumentRoot === true) ? this.documentRoot : false,
            record: this.meta.record,
            root: this.root,
            baseParams: baseParams,
            records: (Ext.isArray(data[0])) ? data : [data]
        });
    },

/**
     * createRecord
     * @protected
     * @param {Ext.data.Record} rec
     * @return {Array} Array of name:value pairs for attributes of the {@link Ext.data.Record}.  See {@link Ext.data.DataWriter#toHash}.
     */
    createRecord : function(rec) {
        return this.toArray(this.toHash(rec));
    },

/**
     * updateRecord
     * @protected
     * @param {Ext.data.Record} rec
     * @return {Array} Array of {name:value} pairs for attributes of the {@link Ext.data.Record}.  See {@link Ext.data.DataWriter#toHash}.
     */
    updateRecord : function(rec) {
        return this.toArray(this.toHash(rec));

    },

/**
     * destroyRecord
     * @protected
     * @param {Ext.data.Record} rec
     * @return {Array} Array containing a attribute-object (name/value pair) representing the {@link Ext.data.DataReader#idProperty idProperty}.
     */
    destroyRecord : function(rec) {
        var data = {};
        data[this.meta.idProperty] = rec.id;
        return this.toArray(data);
    }
});


The source code

/*!
 * licensing@extjs.com
 * http://www.extjs.com/license
 */

/**
 * @class Ext.XTemplate
 * @extends Ext.Template
 *
A template class that supports advanced functionality like:

 *
  • Autofilling arrays using templates and sub-templates
    •
 *
  • Conditional processing with basic comparison operators
    •
 *
  • Basic math function support
    •
 *
  • Execute arbitrary inline code with special built-in template variables
    •
 *
  • Custom member functions
    •
 *
  • Many special tags and built-in operators that aren't defined as part of
 * the API, but are supported in the templates that can be created
    •
 *

 *
XTemplate provides the templating mechanism built into:

 *
  • {@link Ext.DataView}
    •
 *
  • {@link Ext.ListView}
    •
 *
  • {@link Ext.form.ComboBox}
    •
 *
  • {@link Ext.grid.TemplateColumn}
    •
 *
  • {@link Ext.grid.GroupingView}
    •
 *
  • {@link Ext.menu.Item}
    •
 *
  • {@link Ext.layout.MenuLayout}
    •
 *
  • {@link Ext.ColorPalette}
    •
 *

 *
 *
For example usage {@link #XTemplate see the constructor}.

 *
 * @constructor
 * The {@link Ext.Template#Template Ext.Template constructor} describes
 * the acceptable parameters to pass to the constructor. The following
 * examples demonstrate all of the supported features.

 *
 *

 *
 *
  • Sample Data
 *

 *
    This is the data object used for reference in each code example:

 *

var data = {
    name: 'Jack Slocum',
    title: 'Lead Developer',
    company: 'Ext JS, LLC',
    email: 'jack@extjs.com',
    address: '4 Red Bulls Drive',
    city: 'Cleveland',
    state: 'Ohio',
    zip: '44102',
    drinks: ['Red Bull', 'Coffee', 'Water'],
    kids: [{
        name: 'Sara Grace',
        age:3
    },{
        name: 'Zachary',
        age:2
    },{
        name: 'John James',
        age:0
    }]
};
 *

 *

 *
    •
 *
 *
 *
  • Auto filling of arrays
 *

 *
    The tpl tag and the for operator are used
 * to process the provided data object:
 *

 *
    • If the value specified in for is an array, it will auto-fill,
 * repeating the template block inside the tpl tag for each item in the
 * array.
      •
 *
    • If for="." is specified, the data object provided is examined.
      •
 *
    • While processing an array, the special variable {#}
 * will provide the current array index + 1 (starts at 1, not 0).
      •
 *

 *

 *

<tpl for=".">...</tpl>       // loop through array at root node
<tpl for="foo">...</tpl>     // loop through array at foo node
<tpl for="foo.bar">...</tpl> // loop through array at foo.bar node
 *

 * Using the sample data above:
 *

var tpl = new Ext.XTemplate(
    '<p>Kids: ',
    '<tpl for=".">',       // process the data.kids node
        '<p>{#}. {name}</p>',  // use current array index to autonumber
    '</tpl></p>'
);
tpl.overwrite(panel.body, data.kids); // pass the kids property of the data object
 *

 *
    An example illustrating how the for property can be leveraged
 * to access specified members of the provided data object to populate the template:

 *

var tpl = new Ext.XTemplate(
    '<p>Name: {name}</p>',
    '<p>Title: {title}</p>',
    '<p>Company: {company}</p>',
    '<p>Kids: ',
    '<tpl for="kids">',     // interrogate the kids property within the data
        '<p>{name}</p>',
    '</tpl></p>'
);
tpl.overwrite(panel.body, data);  // pass the root node of the data object
 *

 *
    Flat arrays that contain values (and not objects) can be auto-rendered
 * using the special {.} variable inside a loop.  This variable
 * will represent the value of the array at the current index:

 *

var tpl = new Ext.XTemplate(
    '<p>{name}\'s favorite beverages:</p>',
    '<tpl for="drinks">',
       '<div> - {.}</div>',
    '</tpl>'
);
tpl.overwrite(panel.body, data);
 *

 *
    When processing a sub-template, for example while looping through a child array,
 * you can access the parent object's members via the parent object:

 *

var tpl = new Ext.XTemplate(
    '<p>Name: {name}</p>',
    '<p>Kids: ',
    '<tpl for="kids">',
        '<tpl if="age > 1">',
            '<p>{name}</p>',
            '<p>Dad: {parent.name}</p>',
        '</tpl>',
    '</tpl></p>'
);
tpl.overwrite(panel.body, data);
 *

 *

 *
    •
 *
 *
 *
  • Conditional processing with basic comparison operators
 *

 *
    The tpl tag and the if operator are used
 * to provide conditional checks for deciding whether or not to render specific
 * parts of the template. Notes:

 *
    • Double quotes must be encoded if used within the conditional
      •
 *
    • There is no else operator — if needed, two opposite
 * if statements should be used.
      •
 *

 *

<tpl if="age > 1 && age < 10">Child</tpl>
<tpl if="age >= 10 && age < 18">Teenager</tpl>
<tpl if="this.isGirl(name)">...</tpl>
<tpl if="id==\'download\'">...</tpl>
<tpl if="needsIcon"><img src="{icon}" class="{iconCls}"/></tpl>
// no good:
<tpl if="name == "Jack"">Hello</tpl>
// encode " if it is part of the condition, e.g.
<tpl if="name == &quot;Jack&quot;">Hello</tpl>
 *

 * Using the sample data above:
 *

var tpl = new Ext.XTemplate(
    '<p>Name: {name}</p>',
    '<p>Kids: ',
    '<tpl for="kids">',
        '<tpl if="age > 1">',
            '<p>{name}</p>',
        '</tpl>',
    '</tpl></p>'
);
tpl.overwrite(panel.body, data);
 *

 *

 *
    •
 *
 *
 *
  • Basic math support
 *

 *
    The following basic math operators may be applied directly on numeric
 * data values:
     * + - * /
 *

 * For example:
 *

var tpl = new Ext.XTemplate(
    '<p>Name: {name}</p>',
    '<p>Kids: ',
    '<tpl for="kids">',
        '<tpl if="age &gt; 1">',  // <-- Note that the > is encoded
            '<p>{#}: {name}</p>',  // <-- Auto-number each item
            '<p>In 5 Years: {age+5}</p>',  // <-- Basic math
            '<p>Dad: {parent.name}</p>',
        '</tpl>',
    '</tpl></p>'
);
tpl.overwrite(panel.body, data);

 *

 *
    •
 *
 *
 *
  • Execute arbitrary inline code with special built-in template variables
 *

 *
    Anything between {[ ... ]} is considered code to be executed
 * in the scope of the template. There are some special variables available in that code:
 *

 *
    • values: The values in the current scope. If you are using
 * scope changing sub-templates, you can change what values is.
      •
 *
    • parent: The scope (values) of the ancestor template.
      •
 *
    • xindex: If you are in a looping template, the index of the
 * loop you are in (1-based).
      •
 *
    • xcount: If you are in a looping template, the total length
 * of the array you are looping.
      •
 *
    • fm: An alias for Ext.util.Format.
      •
 *

 * This example demonstrates basic row striping using an inline code block and the
 * xindex variable:

 *

var tpl = new Ext.XTemplate(
    '<p>Name: {name}</p>',
    '<p>Company: {[values.company.toUpperCase() + ", " + values.title]}</p>',
    '<p>Kids: ',
    '<tpl for="kids">',
       '<div class="{[xindex % 2 === 0 ? "even" : "odd"]}">',
        '{name}',
        '</div>',
    '</tpl></p>'
);
tpl.overwrite(panel.body, data);
 *

 *

 *
    •
 *
 *
  • Template member functions
 *

 *
    One or more member functions can be specified in a configuration
 * object passed into the XTemplate constructor for more complex processing:

 *

var tpl = new Ext.XTemplate(
    '<p>Name: {name}</p>',
    '<p>Kids: ',
    '<tpl for="kids">',
        '<tpl if="this.isGirl(name)">',
            '<p>Girl: {name} - {age}</p>',
        '</tpl>',
        // use opposite if statement to simulate 'else' processing:
        '<tpl if="this.isGirl(name) == false">',
            '<p>Boy: {name} - {age}</p>',
        '</tpl>',
        '<tpl if="this.isBaby(age)">',
            '<p>{name} is a baby!</p>',
        '</tpl>',
    '</tpl></p>',
    {
        // XTemplate configuration:
        compiled: true,
        disableFormats: true,
        // member functions:
        isGirl: function(name){
            return name == 'Sara Grace';
        },
        isBaby: function(age){
            return age < 1;
        }
    }
);
tpl.overwrite(panel.body, data);
 *

 *

 *
    •
 *
 *

 *
 * @param {Mixed} config
 */
Ext.XTemplate = function(){
    Ext.XTemplate.superclass.constructor.apply(this, arguments);

    var me = this,
        s = me.html,
        re = /]*>((?:(?=([^<]+))\2|<(?!tpl\b[^>]*>))*?)<\/tpl>/,
        nameRe = /^]*?for="(.*?)"/,
        ifRe = /^]*?if="(.*?)"/,
        execRe = /^]*?exec="(.*?)"/,
        m,
        id = 0,
        tpls = [],
        VALUES = 'values',
        PARENT = 'parent',
        XINDEX = 'xindex',
        XCOUNT = 'xcount',
        RETURN = 'return ',
        WITHVALUES = 'with(values){ ';

    s = ['', s, ''].join('');

    while((m = s.match(re))){
           var m2 = m[0].match(nameRe),
            m3 = m[0].match(ifRe),
               m4 = m[0].match(execRe),
               exp = null,
               fn = null,
               exec = null,
               name = m2 && m2[1] ? m2[1] : '';

       if (m3) {
           exp = m3 && m3[1] ? m3[1] : null;
           if(exp){
               fn = new Function(VALUES, PARENT, XINDEX, XCOUNT, WITHVALUES + RETURN +(Ext.util.Format.htmlDecode(exp))+'; }');
           }
       }
       if (m4) {
           exp = m4 && m4[1] ? m4[1] : null;
           if(exp){
               exec = new Function(VALUES, PARENT, XINDEX, XCOUNT, WITHVALUES +(Ext.util.Format.htmlDecode(exp))+'; }');
           }
       }
       if(name){
           switch(name){
               case '.': name = new Function(VALUES, PARENT, WITHVALUES + RETURN + VALUES + '; }'); break;
               case '..': name = new Function(VALUES, PARENT, WITHVALUES + RETURN + PARENT + '; }'); break;
               default: name = new Function(VALUES, PARENT, WITHVALUES + RETURN + name + '; }');
           }
       }
       tpls.push({
            id: id,
            target: name,
            exec: exec,
            test: fn,
            body: m[1]||''
        });
       s = s.replace(m[0], '{xtpl'+ id + '}');
       ++id;
    }
    Ext.each(tpls, function(t) {
        me.compileTpl(t);
    });
    me.master = tpls[tpls.length-1];
    me.tpls = tpls;
};
Ext.extend(Ext.XTemplate, Ext.Template, {
    // private
    re : /\{([\w-\.\#]+)(?:\:([\w\.]*)(?:\((.*?)?\))?)?(\s?[\+\-\*\\]\s?[\d\.\+\-\*\\\(\)]+)?\}/g,
    // private
    codeRe : /\{\[((?:\\\]|.|\n)*?)\]\}/g,

    // private
    applySubTemplate : function(id, values, parent, xindex, xcount){
        var me = this,
            len,
            t = me.tpls[id],
            vs,
            buf = [];
        if ((t.test && !t.test.call(me, values, parent, xindex, xcount)) ||
            (t.exec && t.exec.call(me, values, parent, xindex, xcount))) {
            return '';
        }
        vs = t.target ? t.target.call(me, values, parent) : values;
        len = vs.length;
        parent = t.target ? values : parent;
        if(t.target && Ext.isArray(vs)){
            Ext.each(vs, function(v, i) {
                buf[buf.length] = t.compiled.call(me, v, parent, i+1, len);
            });
            return buf.join('');
        }
        return t.compiled.call(me, vs, parent, xindex, xcount);
    },

    // private
    compileTpl : function(tpl){
        var fm = Ext.util.Format,
               useF = this.disableFormats !== true,
            sep = Ext.isGecko ? "+" : ",",
            body;

        function fn(m, name, format, args, math){
            if(name.substr(0, 4) == 'xtpl'){
                return "'"+ sep +'this.applySubTemplate('+name.substr(4)+', values, parent, xindex, xcount)'+sep+"'";
            }
            var v;
            if(name === '.'){
                v = 'values';
            }else if(name === '#'){
                v = 'xindex';
            }else if(name.indexOf('.') != -1){
                v = name;
            }else{
                v = "values['" + name + "']";
            }
            if(math){
                v = '(' + v + math + ')';
            }
            if (format && useF) {
                args = args ? ',' + args : "";
                if(format.substr(0, 5) != "this."){
                    format = "fm." + format + '(';
                }else{
                    format = 'this.call("'+ format.substr(5) + '", ';
                    args = ", values";
                }
            } else {
                args= ''; format = "("+v+" === undefined ? '' : ";
            }
            return "'"+ sep + format + v + args + ")"+sep+"'";
        }

        function codeFn(m, code){
            // Single quotes get escaped when the template is compiled, however we want to undo this when running code.
            return "'" + sep + '(' + code.replace(/\\'/g, "'") + ')' + sep + "'";
        }

        // branched to use + in gecko and [].join() in others
        if(Ext.isGecko){
            body = "tpl.compiled = function(values, parent, xindex, xcount){ return '" +
                   tpl.body.replace(/(\r\n|\n)/g, '\\n').replace(/'/g, "\\'").replace(this.re, fn).replace(this.codeRe, codeFn) +
                    "';};";
        }else{
            body = ["tpl.compiled = function(values, parent, xindex, xcount){ return ['"];
            body.push(tpl.body.replace(/(\r\n|\n)/g, '\\n').replace(/'/g, "\\'").replace(this.re, fn).replace(this.codeRe, codeFn));
            body.push("'].join('');};");
            body = body.join('');
        }
        eval(body);
        return this;
    },

/**
     * Returns an HTML fragment of this template with the specified values applied.
     * @param {Object} values The template values. Can be an array if your params are numeric (i.e. {0}) or an object (i.e. {foo: 'bar'})
     * @return {String} The HTML fragment
     */
    applyTemplate : function(values){
        return this.master.compiled.call(this, values, {}, 1, 1);
    },

/**
     * Compile the template to a function for optimized performance.  Recommended if the template will be used frequently.
     * @return {Function} The compiled function
     */
    compile : function(){return this;}

/**
     * @property re
     * @hide
     */

/**
     * @property disableFormats
     * @hide
     */

/**
     * @method set
     * @hide
     */

});

/**
 * Alias for {@link #applyTemplate}
 * Returns an HTML fragment of this template with the specified values applied.
 * @param {Object/Array} values The template values. Can be an array if your params are numeric (i.e. {0}) or an object (i.e. {foo: 'bar'})
 * @return {String} The HTML fragment
 * @member Ext.XTemplate
 * @method apply
 */
Ext.XTemplate.prototype.apply = Ext.XTemplate.prototype.applyTemplate;

/**
 * Creates a template from the passed element's value (display:none textarea, preferred) or innerHTML.
 * @param {String/HTMLElement} el A DOM element or its id
 * @return {Ext.Template} The created template
 * @static
 */
Ext.XTemplate.from = function(el){
    el = Ext.getDom(el);
    return new Ext.XTemplate(el.value || el.innerHTML);
};


The source code

/*!
 * licensing@extjs.com
 * http://www.extjs.com/license
 */
/*
Copyright (c) 2008, Yahoo! Inc. All rights reserved.
Code licensed under the BSD License:
http://developer.yahoo.net/yui/license.txt
version: 2.6.0
*/
if(typeof YAHOO=="undefined"||!YAHOO){var YAHOO={};}YAHOO.namespace=function(){var A=arguments,E=null,C,B,D;for(C=0;C0)?A.dump(D[F],I-1):L);}else{K.push(D[F]);}K.push(J);}if(K.length>1){K.pop();}K.push("]");}else{K.push("{");for(F in D){if(A.hasOwnProperty(D,F)){K.push(F+G);if(A.isObject(D[F])){K.push((I>0)?A.dump(D[F],I-1):L);}else{K.push(D[F]);}K.push(J);}}if(K.length>1){K.pop();}K.push("}");}return K.join("");},substitute:function(S,E,L){var I,H,G,O,P,R,N=[],F,J="dump",M=" ",D="{",Q="}";for(;;){I=S.lastIndexOf(D);if(I<0){break;}H=S.indexOf(Q,I);if(I+1>=H){break;}F=S.substring(I+1,H);O=F;R=null;G=O.indexOf(M);if(G>-1){R=O.substring(G+1);O=O.substring(0,G);}P=E[O];if(L){P=L(O,P,R);}if(A.isObject(P)){if(A.isArray(P)){P=A.dump(P,parseInt(R,10));}else{R=R||"";var K=R.indexOf(J);if(K>-1){R=R.substring(4);}if(P.toString===Object.prototype.toString||K>-1){P=A.dump(P,parseInt(R,10));}else{P=P.toString();}}}else{if(!A.isString(P)&&!A.isNumber(P)){P="~-"+N.length+"-~";N[N.length]=F;}}S=S.substring(0,I)+P+S.substring(H+1);}for(I=N.length-1;I>=0;I=I-1){S=S.replace(new RegExp("~-"+I+"-~"),"{"+N[I]+"}","g");}return S;},trim:function(D){try{return D.replace(/^\s+|\s+$/g,"");}catch(E){return D;}},merge:function(){var G={},E=arguments;for(var F=0,D=E.length;F=this.left&&A.right<=this.right&&A.top>=this.top&&A.bottom<=this.bottom);};YAHOO.util.Region.prototype.getArea=function(){return((this.bottom-this.top)*(this.right-this.left));};YAHOO.util.Region.prototype.intersect=function(E){var C=Math.max(this.top,E.top);var D=Math.min(this.right,E.right);var A=Math.min(this.bottom,E.bottom);var B=Math.max(this.left,E.left);if(A>=C&&D>=B){return new YAHOO.util.Region(C,D,A,B);}else{return null;}};YAHOO.util.Region.prototype.union=function(E){var C=Math.min(this.top,E.top);var D=Math.max(this.right,E.right);var A=Math.max(this.bottom,E.bottom);var B=Math.min(this.left,E.left);return new YAHOO.util.Region(C,D,A,B);};YAHOO.util.Region.prototype.toString=function(){return("Region {"+"top: "+this.top+", right: "+this.right+", bottom: "+this.bottom+", left: "+this.left+"}");};YAHOO.util.Region.getRegion=function(D){var F=YAHOO.util.Dom.getXY(D);var C=F[1];var E=F[0]+D.offsetWidth;var A=F[1]+D.offsetHeight;var B=F[0];return new YAHOO.util.Region(C,E,A,B);};YAHOO.util.Point=function(A,B){if(YAHOO.lang.isArray(A)){B=A[1];A=A[0];}this.x=this.right=this.left=this[0]=A;this.y=this.top=this.bottom=this[1]=B;};YAHOO.util.Point.prototype=new YAHOO.util.Region();YAHOO.register("dom",YAHOO.util.Dom,{version:"2.6.0",build:"1321"});YAHOO.util.CustomEvent=function(D,B,C,A){this.type=D;this.scope=B||window;this.silent=C;this.signature=A||YAHOO.util.CustomEvent.LIST;this.subscribers=[];if(!this.silent){}var E="_YUICEOnSubscribe";if(D!==E){this.subscribeEvent=new YAHOO.util.CustomEvent(E,this,true);}this.lastError=null;};YAHOO.util.CustomEvent.LIST=0;YAHOO.util.CustomEvent.FLAT=1;YAHOO.util.CustomEvent.prototype={subscribe:function(B,C,A){if(!B){throw new Error("Invalid callback for subscriber to '"+this.type+"'");}if(this.subscribeEvent){this.subscribeEvent.fire(B,C,A);}this.subscribers.push(new YAHOO.util.Subscriber(B,C,A));},unsubscribe:function(D,F){if(!D){return this.unsubscribeAll();}var E=false;for(var B=0,A=this.subscribers.length;B0){B=I[0];}try{G=M.fn.call(L,B,M.obj);}catch(F){this.lastError=F;if(A){throw F;}}}else{try{G=M.fn.call(L,this.type,I,M.obj);}catch(H){this.lastError=H;if(A){throw H;}}}if(false===G){if(!this.silent){}break;}}}return(G!==false);},unsubscribeAll:function(){for(var A=this.subscribers.length-1;A>-1;A--){this._delete(A);}this.subscribers=[];return A;},_delete:function(A){var B=this.subscribers[A];if(B){delete B.fn;delete B.obj;}this.subscribers.splice(A,1);},toString:function(){return"CustomEvent: "+"'"+this.type+"', "+"scope: "+this.scope;}};YAHOO.util.Subscriber=function(B,C,A){this.fn=B;this.obj=YAHOO.lang.isUndefined(C)?null:C;this.override=A;};YAHOO.util.Subscriber.prototype.getScope=function(A){if(this.override){if(this.override===true){return this.obj;}else{return this.override;}}return A;};YAHOO.util.Subscriber.prototype.contains=function(A,B){if(B){return(this.fn==A&&this.obj==B);}else{return(this.fn==A);}};YAHOO.util.Subscriber.prototype.toString=function(){return"Subscriber { obj: "+this.obj+", override: "+(this.override||"no")+" }";};if(!YAHOO.util.Event){YAHOO.util.Event=function(){var H=false;var I=[];var J=[];var G=[];var E=[];var C=0;var F=[];var B=[];var A=0;var D={63232:38,63233:40,63234:37,63235:39,63276:33,63277:34,25:9};var K=YAHOO.env.ua.ie?"focusin":"focus";var L=YAHOO.env.ua.ie?"focusout":"blur";return{POLL_RETRYS:2000,POLL_INTERVAL:20,EL:0,TYPE:1,FN:2,WFN:3,UNLOAD_OBJ:3,ADJ_SCOPE:4,OBJ:5,OVERRIDE:6,CAPTURE:7,lastError:null,isSafari:YAHOO.env.ua.webkit,webkit:YAHOO.env.ua.webkit,isIE:YAHOO.env.ua.ie,_interval:null,_dri:null,DOMReady:false,throwErrors:false,startInterval:function(){if(!this._interval){var M=this;var N=function(){M._tryPreloadAttach();};this._interval=setInterval(N,this.POLL_INTERVAL);}},onAvailable:function(R,O,S,Q,P){var M=(YAHOO.lang.isString(R))?[R]:R;for(var N=0;N-1;Q--){W=(this._removeListener(N[Q],M,V,Y)&&W);}return W;}}if(!V||!V.call){return this.purgeElement(N,false,M);}if("unload"==M){for(Q=J.length-1;Q>-1;Q--){X=J[Q];if(X&&X[0]==N&&X[1]==M&&X[2]==V){J.splice(Q,1);return true;}}return false;}var R=null;var S=arguments[4];if("undefined"===typeof S){S=this._getCacheIndex(N,M,V);}if(S>=0){R=I[S];}if(!N||!R){return false;}if(this.useLegacyEvent(N,M)){var P=this.getLegacyIndex(N,M);var O=E[P];if(O){for(Q=0,T=O.length;Q0&&F.length>0);}var R=[];var T=function(V,W){var U=V;if(W.override){if(W.override===true){U=W.obj;}else{U=W.override;}}W.fn.call(U,W.obj);};var N,M,Q,P,O=[];for(N=0,M=F.length;N-1;N--){Q=F[N];if(!Q||!Q.id){F.splice(N,1);}}this.startInterval();}else{clearInterval(this._interval);this._interval=null;}this.locked=false;},purgeElement:function(Q,R,T){var O=(YAHOO.lang.isString(Q))?this.getEl(Q):Q;var S=this.getListeners(O,T),P,M;if(S){for(P=S.length-1;P>-1;P--){var N=S[P];this._removeListener(O,N.type,N.fn,N.capture);}}if(R&&O&&O.childNodes){for(P=0,M=O.childNodes.length;P-1;O--){N=I[O];if(N){M._removeListener(N[M.EL],N[M.TYPE],N[M.FN],N[M.CAPTURE],O);}}N=null;}G=null;M._simpleRemove(window,"unload",M._unload);},_getScrollLeft:function(){return this._getScroll()[1];},_getScrollTop:function(){return this._getScroll()[0];},_getScroll:function(){var M=document.documentElement,N=document.body;if(M&&(M.scrollTop||M.scrollLeft)){return[M.scrollTop,M.scrollLeft];}else{if(N){return[N.scrollTop,N.scrollLeft];}else{return[0,0];}}},regCE:function(){},_simpleAdd:function(){if(window.addEventListener){return function(O,P,N,M){O.addEventListener(P,N,(M));};}else{if(window.attachEvent){return function(O,P,N,M){O.attachEvent("on"+P,N);};}else{return function(){};}}}(),_simpleRemove:function(){if(window.removeEventListener){return function(O,P,N,M){O.removeEventListener(P,N,(M));};}else{if(window.detachEvent){return function(N,O,M){N.detachEvent("on"+O,M);};}else{return function(){};}}}()};}();(function(){var EU=YAHOO.util.Event;EU.on=EU.addListener;EU.onFocus=EU.addFocusListener;EU.onBlur=EU.addBlurListener;
/* DOMReady: based on work by: Dean Edwards/John Resig/Matthias Miller */
if(EU.isIE){YAHOO.util.Event.onDOMReady(YAHOO.util.Event._tryPreloadAttach,YAHOO.util.Event,true);var n=document.createElement("p");EU._dri=setInterval(function(){try{n.doScroll("left");clearInterval(EU._dri);EU._dri=null;EU._ready();n=null;}catch(ex){}},EU.POLL_INTERVAL);}else{if(EU.webkit&&EU.webkit<525){EU._dri=setInterval(function(){var rs=document.readyState;if("loaded"==rs||"complete"==rs){clearInterval(EU._dri);EU._dri=null;EU._ready();}},EU.POLL_INTERVAL);}else{EU._simpleAdd(document,"DOMContentLoaded",EU._ready);}}EU._simpleAdd(window,"load",EU._load);EU._simpleAdd(window,"unload",EU._unload);EU._tryPreloadAttach();})();}YAHOO.util.EventProvider=function(){};YAHOO.util.EventProvider.prototype={__yui_events:null,__yui_subscribers:null,subscribe:function(A,C,F,E){this.__yui_events=this.__yui_events||{};
var D=this.__yui_events[A];if(D){D.subscribe(C,F,E);}else{this.__yui_subscribers=this.__yui_subscribers||{};var B=this.__yui_subscribers;if(!B[A]){B[A]=[];}B[A].push({fn:C,obj:F,override:E});}},unsubscribe:function(C,E,G){this.__yui_events=this.__yui_events||{};var A=this.__yui_events;if(C){var F=A[C];if(F){return F.unsubscribe(E,G);}}else{var B=true;for(var D in A){if(YAHOO.lang.hasOwnProperty(A,D)){B=B&&A[D].unsubscribe(E,G);}}return B;}return false;},unsubscribeAll:function(A){return this.unsubscribe(A);},createEvent:function(G,D){this.__yui_events=this.__yui_events||{};var A=D||{};var I=this.__yui_events;if(I[G]){}else{var H=A.scope||this;var E=(A.silent);var B=new YAHOO.util.CustomEvent(G,H,E,YAHOO.util.CustomEvent.FLAT);I[G]=B;if(A.onSubscribeCallback){B.subscribeEvent.subscribe(A.onSubscribeCallback);}this.__yui_subscribers=this.__yui_subscribers||{};var F=this.__yui_subscribers[G];if(F){for(var C=0;C


The source code

/*!
 * licensing@extjs.com
 * http://www.extjs.com/license
 */
if(typeof YAHOO == "undefined"){
    throw "Unable to load Ext, core YUI utilities (yahoo, dom, event) not found.";
}

(function(){
    var E = YAHOO.util.Event,
        D = YAHOO.util.Dom,
        CN = YAHOO.util.Connect,
        ES = YAHOO.util.Easing,
        A = YAHOO.util.Anim,
        libFlyweight,
        version = YAHOO.env.getVersion('yahoo').version.split('.'),
        mouseEnterSupported = parseInt(version[0]) >= 3,
        mouseCache = {},
        elContains = function(parent, child){
            if(parent && parent.firstChild){
                while(child){
                    if(child === parent){
                        return true;
                    }
                    child = child.parentNode;
                    if(child && (child.nodeType != 1)){
                        child = null;
                    }
                }
            }
            return false;
        }, checkRelatedTarget = function(e){
            return !elContains(e.currentTarget, Ext.lib.Event.getRelatedTarget(e));
        };

Ext.lib.Dom = {
    getViewWidth : function(full){
        return full ? D.getDocumentWidth() : D.getViewportWidth();
    },

    getViewHeight : function(full){
        return full ? D.getDocumentHeight() : D.getViewportHeight();
    },

    isAncestor : function(haystack, needle){
        return D.isAncestor(haystack, needle);
    },

    getRegion : function(el){
        return D.getRegion(el);
    },

    getY : function(el){
        return this.getXY(el)[1];
    },

    getX : function(el){
        return this.getXY(el)[0];
    },

    // original version based on YahooUI getXY
    // this version fixes several issues in Safari and FF
    // and boosts performance by removing the batch overhead, repetitive dom lookups and array index calls
    getXY : function(el){
        var p, pe, b, scroll, bd = (document.body || document.documentElement);
        el = Ext.getDom(el);

        if(el == bd){
            return [0, 0];
        }

        if (el.getBoundingClientRect) {
            b = el.getBoundingClientRect();
            scroll = fly(document).getScroll();
            return [Math.round(b.left + scroll.left), Math.round(b.top + scroll.top)];
        }
        var x = 0, y = 0;

        p = el;

        var hasAbsolute = fly(el).getStyle("position") == "absolute";

        while (p) {

            x += p.offsetLeft;
            y += p.offsetTop;

            if (!hasAbsolute && fly(p).getStyle("position") == "absolute") {
                hasAbsolute = true;
            }

            if (Ext.isGecko) {
                pe = fly(p);

                var bt = parseInt(pe.getStyle("borderTopWidth"), 10) || 0;
                var bl = parseInt(pe.getStyle("borderLeftWidth"), 10) || 0;

                x += bl;
                y += bt;

                if (p != el && pe.getStyle('overflow') != 'visible') {
                    x += bl;
                    y += bt;
                }
            }
            p = p.offsetParent;
        }

        if (Ext.isSafari && hasAbsolute) {
            x -= bd.offsetLeft;
            y -= bd.offsetTop;
        }

        if (Ext.isGecko && !hasAbsolute) {
            var dbd = fly(bd);
            x += parseInt(dbd.getStyle("borderLeftWidth"), 10) || 0;
            y += parseInt(dbd.getStyle("borderTopWidth"), 10) || 0;
        }

        p = el.parentNode;
        while (p && p != bd) {
            if (!Ext.isOpera || (p.tagName != 'TR' && fly(p).getStyle("display") != "inline")) {
                x -= p.scrollLeft;
                y -= p.scrollTop;
            }
            p = p.parentNode;
        }
        return [x, y];
    },

    setXY : function(el, xy){
        el = Ext.fly(el, '_setXY');
        el.position();
        var pts = el.translatePoints(xy);
        if(xy[0] !== false){
            el.dom.style.left = pts.left + "px";
        }
        if(xy[1] !== false){
            el.dom.style.top = pts.top + "px";
        }
    },

    setX : function(el, x){
        this.setXY(el, [x, false]);
    },

    setY : function(el, y){
        this.setXY(el, [false, y]);
    }
};

Ext.lib.Event = {
    getPageX : function(e){
        return E.getPageX(e.browserEvent || e);
    },

    getPageY : function(e){
        return E.getPageY(e.browserEvent || e);
    },

    getXY : function(e){
        return E.getXY(e.browserEvent || e);
    },

    getTarget : function(e){
        return E.getTarget(e.browserEvent || e);
    },

    getRelatedTarget : function(e){
        return E.getRelatedTarget(e.browserEvent || e);
    },

    on : function(el, eventName, fn, scope, override){
        if((eventName == 'mouseenter' || eventName == 'mouseleave') && !mouseEnterSupported){
            var item = mouseCache[el.id] || (mouseCache[el.id] = {});
            item[eventName] = fn;
            fn = fn.createInterceptor(checkRelatedTarget);
            eventName = (eventName == 'mouseenter') ? 'mouseover' : 'mouseout';
        }
        E.on(el, eventName, fn, scope, override);
    },

    un : function(el, eventName, fn){
        if((eventName == 'mouseenter' || eventName == 'mouseleave') && !mouseEnterSupported){
            var item = mouseCache[el.id],
                ev = item && item[eventName];

            if(ev){
                fn = ev.fn;
                delete item[eventName];
                eventName = (eventName == 'mouseenter') ? 'mouseover' : 'mouseout';
            }
        }
        E.removeListener(el, eventName, fn);;
    },

    purgeElement : function(el){
        E.purgeElement(el);
    },

    preventDefault : function(e){
        E.preventDefault(e.browserEvent || e);
    },

    stopPropagation : function(e){
        E.stopPropagation(e.browserEvent || e);
    },

    stopEvent : function(e){
        E.stopEvent(e.browserEvent || e);
    },

    onAvailable : function(el, fn, scope, override){
        return E.onAvailable(el, fn, scope, override);
    }
};

Ext.lib.Ajax = {
    request : function(method, uri, cb, data, options){
        if(options){
            var hs = options.headers;
            if(hs){
                for(var h in hs){
                    if(hs.hasOwnProperty(h)){
                        CN.initHeader(h, hs[h], false);
                    }
                }
            }
            if(options.xmlData){
                if (!hs || !hs['Content-Type']){
                    CN.initHeader('Content-Type', 'text/xml', false);
                }
                method = (method ? method : (options.method ? options.method : 'POST'));
                data = options.xmlData;
            }else if(options.jsonData){
                if (!hs || !hs['Content-Type']){
                    CN.initHeader('Content-Type', 'application/json', false);
                }
                method = (method ? method : (options.method ? options.method : 'POST'));
                data = typeof options.jsonData == 'object' ? Ext.encode(options.jsonData) : options.jsonData;
            }
        }
        return CN.asyncRequest(method, uri, cb, data);
    },

    formRequest : function(form, uri, cb, data, isUpload, sslUri){
        CN.setForm(form, isUpload, sslUri);
        return CN.asyncRequest(Ext.getDom(form).method ||'POST', uri, cb, data);
    },

    isCallInProgress : function(trans){
        return CN.isCallInProgress(trans);
    },

    abort : function(trans){
        return CN.abort(trans);
    },

    serializeForm : function(form){
        var d = CN.setForm(form.dom || form);
        CN.resetFormState();
        return d;
    }
};

Ext.lib.Region = YAHOO.util.Region;
Ext.lib.Point = YAHOO.util.Point;

Ext.lib.Anim = {
    scroll : function(el, args, duration, easing, cb, scope){
        this.run(el, args, duration, easing, cb, scope, YAHOO.util.Scroll);
    },

    motion : function(el, args, duration, easing, cb, scope){
        this.run(el, args, duration, easing, cb, scope, YAHOO.util.Motion);
    },

    color : function(el, args, duration, easing, cb, scope){
        this.run(el, args, duration, easing, cb, scope, YAHOO.util.ColorAnim);
    },

    run : function(el, args, duration, easing, cb, scope, type){
        type = type || YAHOO.util.Anim;
        if(typeof easing == "string"){
            easing = YAHOO.util.Easing[easing];
        }
        var anim = new type(el, args, duration, easing);
        anim.animateX(function(){
            Ext.callback(cb, scope);
        });
        return anim;
    }
};

// all lib flyweight calls use their own flyweight to prevent collisions with developer flyweights
function fly(el){
    if(!libFlyweight){
        libFlyweight = new Ext.Element.Flyweight();
    }
    libFlyweight.dom = el;
    return libFlyweight;
}

// prevent IE leaks
if(Ext.isIE) {
    function fnCleanUp() {
        var p = Function.prototype;
        delete p.createSequence;
        delete p.defer;
        delete p.createDelegate;
        delete p.createCallback;
        delete p.createInterceptor;

        window.detachEvent("onunload", fnCleanUp);
    }
    window.attachEvent("onunload", fnCleanUp);
}
// various overrides

// add ability for callbacks with animations
if(YAHOO.util.Anim){
    YAHOO.util.Anim.prototype.animateX = function(callback, scope){
        var f = function(){
            this.onComplete.unsubscribe(f);
            if(typeof callback == "function"){
                callback.call(scope || this, this);
            }
        };
        this.onComplete.subscribe(f, this, true);
        this.animate();
    };
}

if(YAHOO.util.DragDrop && Ext.dd.DragDrop){
    YAHOO.util.DragDrop.defaultPadding = Ext.dd.DragDrop.defaultPadding;
    YAHOO.util.DragDrop.constrainTo = Ext.dd.DragDrop.constrainTo;
}

YAHOO.util.Dom.getXY = function(el) {
    var f = function(el) {
        return Ext.lib.Dom.getXY(el);
    };
    return YAHOO.util.Dom.batch(el, f, YAHOO.util.Dom, true);
};

// workaround for Safari anim duration speed problems
if(YAHOO.util.AnimMgr){
    YAHOO.util.AnimMgr.fps = 1000;
}

YAHOO.util.Region.prototype.adjust = function(t, l, b, r){
    this.top += t;
    this.left += l;
    this.right += r;
    this.bottom += b;
    return this;
};

YAHOO.util.Region.prototype.constrainTo = function(r) {
    this.top = this.top.constrain(r.top, r.bottom);
    this.bottom = this.bottom.constrain(r.top, r.bottom);
    this.left = this.left.constrain(r.left, r.right);
    this.right = this.right.constrain(r.left, r.right);
    return this;
};

})();


The source code

/*!
 * licensing@extjs.com
 * http://www.extjs.com/license
 */
/*
Copyright (c) 2008, Yahoo! Inc. All rights reserved.
Code licensed under the BSD License:
http://developer.yahoo.net/yui/license.txt
version: 2.6.0
*/
YAHOO.namespace("tool");(function(){var A=0;YAHOO.tool.TestCase=function(B){this._should={};for(var C in B){this[C]=B[C];}if(!YAHOO.lang.isString(this.name)){this.name="testCase"+(A++);}};YAHOO.tool.TestCase.prototype={resume:function(B){YAHOO.tool.TestRunner.resume(B);},wait:function(D,C){var B=arguments;if(YAHOO.lang.isFunction(B[0])){throw new YAHOO.tool.TestCase.Wait(B[0],B[1]);}else{throw new YAHOO.tool.TestCase.Wait(function(){YAHOO.util.Assert.fail("Timeout: wait() called but resume() never called.");},(YAHOO.lang.isNumber(B[0])?B[0]:10000));}},setUp:function(){},tearDown:function(){}};YAHOO.tool.TestCase.Wait=function(C,B){this.segment=(YAHOO.lang.isFunction(C)?C:null);this.delay=(YAHOO.lang.isNumber(B)?B:0);};})();YAHOO.namespace("tool");YAHOO.tool.TestSuite=function(A){this.name="";this.items=[];if(YAHOO.lang.isString(A)){this.name=A;}else{if(YAHOO.lang.isObject(A)){YAHOO.lang.augmentObject(this,A,true);}}if(this.name===""){this.name=YAHOO.util.Dom.generateId(null,"testSuite");}};YAHOO.tool.TestSuite.prototype={add:function(A){if(A instanceof YAHOO.tool.TestSuite||A instanceof YAHOO.tool.TestCase){this.items.push(A);}},setUp:function(){},tearDown:function(){}};YAHOO.namespace("tool");YAHOO.tool.TestRunner=(function(){function B(C){this.testObject=C;this.firstChild=null;this.lastChild=null;this.parent=null;this.next=null;this.results={passed:0,failed:0,total:0,ignored:0};if(C instanceof YAHOO.tool.TestSuite){this.results.type="testsuite";this.results.name=C.name;}else{if(C instanceof YAHOO.tool.TestCase){this.results.type="testcase";this.results.name=C.name;}}}B.prototype={appendChild:function(C){var D=new B(C);if(this.firstChild===null){this.firstChild=this.lastChild=D;}else{this.lastChild.next=D;this.lastChild=D;}D.parent=this;return D;}};function A(){A.superclass.constructor.apply(this,arguments);this.masterSuite=new YAHOO.tool.TestSuite("YUI Test Results");this._cur=null;this._root=null;var D=[this.TEST_CASE_BEGIN_EVENT,this.TEST_CASE_COMPLETE_EVENT,this.TEST_SUITE_BEGIN_EVENT,this.TEST_SUITE_COMPLETE_EVENT,this.TEST_PASS_EVENT,this.TEST_FAIL_EVENT,this.TEST_IGNORE_EVENT,this.COMPLETE_EVENT,this.BEGIN_EVENT];for(var C=0;C0){return YAHOO.lang.substitute(B,{message:A});}else{return A;}},fail:function(A){throw new YAHOO.util.AssertionError(this._formatMessage(A,"Test force-failed."));},areEqual:function(B,C,A){if(B!=C){throw new YAHOO.util.ComparisonFailure(this._formatMessage(A,"Values should be equal."),B,C);}},areNotEqual:function(A,C,B){if(A==C){throw new YAHOO.util.UnexpectedValue(this._formatMessage(B,"Values should not be equal."),A);}},areNotSame:function(A,C,B){if(A===C){throw new YAHOO.util.UnexpectedValue(this._formatMessage(B,"Values should not be the same."),A);}},areSame:function(B,C,A){if(B!==C){throw new YAHOO.util.ComparisonFailure(this._formatMessage(A,"Values should be the same."),B,C);}},isFalse:function(B,A){if(false!==B){throw new YAHOO.util.ComparisonFailure(this._formatMessage(A,"Value should be false."),false,B);}},isTrue:function(B,A){if(true!==B){throw new YAHOO.util.ComparisonFailure(this._formatMessage(A,"Value should be true."),true,B);}},isNaN:function(B,A){if(!isNaN(B)){throw new YAHOO.util.ComparisonFailure(this._formatMessage(A,"Value should be NaN."),NaN,B);}},isNotNaN:function(B,A){if(isNaN(B)){throw new YAHOO.util.UnexpectedValue(this._formatMessage(A,"Values should not be NaN."),NaN);}},isNotNull:function(B,A){if(YAHOO.lang.isNull(B)){throw new YAHOO.util.UnexpectedValue(this._formatMessage(A,"Values should not be null."),null);}},isNotUndefined:function(B,A){if(YAHOO.lang.isUndefined(B)){throw new YAHOO.util.UnexpectedValue(this._formatMessage(A,"Value should not be undefined."),undefined);}},isNull:function(B,A){if(!YAHOO.lang.isNull(B)){throw new YAHOO.util.ComparisonFailure(this._formatMessage(A,"Value should be null."),null,B);}},isUndefined:function(B,A){if(!YAHOO.lang.isUndefined(B)){throw new YAHOO.util.ComparisonFailure(this._formatMessage(A,"Value should be undefined."),undefined,B);}},isArray:function(B,A){if(!YAHOO.lang.isArray(B)){throw new YAHOO.util.UnexpectedValue(this._formatMessage(A,"Value should be an array."),B);}},isBoolean:function(B,A){if(!YAHOO.lang.isBoolean(B)){throw new YAHOO.util.UnexpectedValue(this._formatMessage(A,"Value should be a Boolean."),B);}},isFunction:function(B,A){if(!YAHOO.lang.isFunction(B)){throw new YAHOO.util.UnexpectedValue(this._formatMessage(A,"Value should be a function."),B);}},isInstanceOf:function(B,C,A){if(!(C instanceof B)){throw new YAHOO.util.ComparisonFailure(this._formatMessage(A,"Value isn't an instance of expected type."),B,C);}},isNumber:function(B,A){if(!YAHOO.lang.isNumber(B)){throw new YAHOO.util.UnexpectedValue(this._formatMessage(A,"Value should be a number."),B);}},isObject:function(B,A){if(!YAHOO.lang.isObject(B)){throw new YAHOO.util.UnexpectedValue(this._formatMessage(A,"Value should be an object."),B);}},isString:function(B,A){if(!YAHOO.lang.isString(B)){throw new YAHOO.util.UnexpectedValue(this._formatMessage(A,"Value should be a string."),B);}},isTypeOf:function(A,C,B){if(typeof C!=A){throw new YAHOO.util.ComparisonFailure(this._formatMessage(B,"Value should be of type "+expected+"."),expected,typeof actual);}}};YAHOO.util.AssertionError=function(A){arguments.callee.superclass.constructor.call(this,A);this.message=A;this.name="AssertionError";};YAHOO.lang.extend(YAHOO.util.AssertionError,Error,{getMessage:function(){return this.message;},toString:function(){return this.name+": "+this.getMessage();},valueOf:function(){return this.toString();}});YAHOO.util.ComparisonFailure=function(B,A,C){arguments.callee.superclass.constructor.call(this,B);this.expected=A;this.actual=C;this.name="ComparisonFailure";};YAHOO.lang.extend(YAHOO.util.ComparisonFailure,YAHOO.util.AssertionError,{getMessage:function(){return this.message+"\nExpected: "+this.expected+" ("+(typeof this.expected)+")\nActual:"+this.actual+" ("+(typeof this.actual)+")";}});YAHOO.util.UnexpectedValue=function(B,A){arguments.callee.superclass.constructor.call(this,B);this.unexpected=A;this.name="UnexpectedValue";};YAHOO.lang.extend(YAHOO.util.UnexpectedValue,YAHOO.util.AssertionError,{getMessage:function(){return this.message+"\nUnexpected: "+this.unexpected+" ("+(typeof this.unexpected)+") ";}});YAHOO.util.ShouldFail=function(A){arguments.callee.superclass.constructor.call(this,A||"This test should fail but didn't.");this.name="ShouldFail";};YAHOO.lang.extend(YAHOO.util.ShouldFail,YAHOO.util.AssertionError);YAHOO.util.ShouldError=function(A){arguments.callee.superclass.constructor.call(this,A||"This test should have thrown an error but didn't.");
this.name="ShouldError";};YAHOO.lang.extend(YAHOO.util.ShouldError,YAHOO.util.AssertionError);YAHOO.util.UnexpectedError=function(A){arguments.callee.superclass.constructor.call(this,"Unexpected error: "+A.message);this.cause=A;this.name="UnexpectedError";this.stack=A.stack;};YAHOO.lang.extend(YAHOO.util.UnexpectedError,YAHOO.util.AssertionError);YAHOO.util.ArrayAssert={contains:function(E,D,B){var C=false;var F=YAHOO.util.Assert;for(var A=0;A0){var B=YAHOO.util.Assert;B.fail(B._formatMessage(A,"Array should be empty."));}},isNotEmpty:function(C,A){if(C.length===0){var B=YAHOO.util.Assert;B.fail(B._formatMessage(A,"Array should not be empty."));}},itemsAreSame:function(D,F,C){var A=Math.max(D.length,F.length);var E=YAHOO.util.Assert;for(var B=0;B=0;B--){if(D[B]===E){F.areEqual(A,B,F._formatMessage(C,"Value exists at index "+B+" but should be at index "+A+"."));return ;}}F.fail(F._formatMessage(C,"Value doesn't exist in array."));}};YAHOO.namespace("util");YAHOO.util.ObjectAssert={propertiesAreEqual:function(D,G,C){var F=YAHOO.util.Assert;var B=[];for(var E in D){B.push(E);}for(var A=0;A0)?M:N;F.fireEvent("on"+J,I);
}else{throw new Error("simulateKeyEvent(): No event simulation framework present.");}}},simulateMouseEvent:function(K,P,H,E,Q,J,G,F,D,B,C,A,O,M,I,L){K=YAHOO.util.Dom.get(K);if(!K){throw new Error("simulateMouseEvent(): Invalid target.");}if(YAHOO.lang.isString(P)){P=P.toLowerCase();switch(P){case"mouseover":case"mouseout":case"mousedown":case"mouseup":case"click":case"dblclick":case"mousemove":break;default:throw new Error("simulateMouseEvent(): Event type '"+P+"' not supported.");}}else{throw new Error("simulateMouseEvent(): Event type must be a string.");}if(!YAHOO.lang.isBoolean(H)){H=true;}if(!YAHOO.lang.isBoolean(E)){E=(P!="mousemove");}if(!YAHOO.lang.isObject(Q)){Q=window;}if(!YAHOO.lang.isNumber(J)){J=1;}if(!YAHOO.lang.isNumber(G)){G=0;}if(!YAHOO.lang.isNumber(F)){F=0;}if(!YAHOO.lang.isNumber(D)){D=0;}if(!YAHOO.lang.isNumber(B)){B=0;}if(!YAHOO.lang.isBoolean(C)){C=false;}if(!YAHOO.lang.isBoolean(A)){A=false;}if(!YAHOO.lang.isBoolean(O)){O=false;}if(!YAHOO.lang.isBoolean(M)){M=false;}if(!YAHOO.lang.isNumber(I)){I=0;}var N=null;if(YAHOO.lang.isFunction(document.createEvent)){N=document.createEvent("MouseEvents");if(N.initMouseEvent){N.initMouseEvent(P,H,E,Q,J,G,F,D,B,C,A,O,M,I,L);}else{N=document.createEvent("UIEvents");N.initEvent(P,H,E);N.view=Q;N.detail=J;N.screenX=G;N.screenY=F;N.clientX=D;N.clientY=B;N.ctrlKey=C;N.altKey=A;N.metaKey=M;N.shiftKey=O;N.button=I;N.relatedTarget=L;}if(L&&!N.relatedTarget){if(P=="mouseout"){N.toElement=L;}else{if(P=="mouseover"){N.fromElement=L;}}}K.dispatchEvent(N);}else{if(YAHOO.lang.isObject(document.createEventObject)){N=document.createEventObject();N.bubbles=H;N.cancelable=E;N.view=Q;N.detail=J;N.screenX=G;N.screenY=F;N.clientX=D;N.clientY=B;N.ctrlKey=C;N.altKey=A;N.metaKey=M;N.shiftKey=O;switch(I){case 0:N.button=1;break;case 1:N.button=4;break;case 2:break;default:N.button=0;}N.relatedTarget=L;K.fireEvent("on"+P,N);}else{throw new Error("simulateMouseEvent(): No event simulation framework present.");}}},fireMouseEvent:function(C,B,A){A=A||{};this.simulateMouseEvent(C,B,A.bubbles,A.cancelable,A.view,A.detail,A.screenX,A.screenY,A.clientX,A.clientY,A.ctrlKey,A.altKey,A.shiftKey,A.metaKey,A.button,A.relatedTarget);},click:function(B,A){this.fireMouseEvent(B,"click",A);},dblclick:function(B,A){this.fireMouseEvent(B,"dblclick",A);},mousedown:function(B,A){this.fireMouseEvent(B,"mousedown",A);},mousemove:function(B,A){this.fireMouseEvent(B,"mousemove",A);},mouseout:function(B,A){this.fireMouseEvent(B,"mouseout",A);},mouseover:function(B,A){this.fireMouseEvent(B,"mouseover",A);},mouseup:function(B,A){this.fireMouseEvent(B,"mouseup",A);},fireKeyEvent:function(B,C,A){A=A||{};this.simulateKeyEvent(C,B,A.bubbles,A.cancelable,A.view,A.ctrlKey,A.altKey,A.shiftKey,A.metaKey,A.keyCode,A.charCode);},keydown:function(B,A){this.fireKeyEvent("keydown",B,A);},keypress:function(B,A){this.fireKeyEvent("keypress",B,A);},keyup:function(B,A){this.fireKeyEvent("keyup",B,A);}};YAHOO.namespace("tool");YAHOO.tool.TestManager={TEST_PAGE_BEGIN_EVENT:"testpagebegin",TEST_PAGE_COMPLETE_EVENT:"testpagecomplete",TEST_MANAGER_BEGIN_EVENT:"testmanagerbegin",TEST_MANAGER_COMPLETE_EVENT:"testmanagercomplete",_curPage:null,_frame:null,_logger:null,_timeoutId:0,_pages:[],_results:null,_handleTestRunnerComplete:function(A){this.fireEvent(this.TEST_PAGE_COMPLETE_EVENT,{page:this._curPage,results:A.results});this._processResults(this._curPage,A.results);this._logger.clearTestRunner();if(this._pages.length){this._timeoutId=setTimeout(function(){YAHOO.tool.TestManager._run();},1000);}else{this.fireEvent(this.TEST_MANAGER_COMPLETE_EVENT,this._results);}},_processResults:function(C,A){var B=this._results;B.passed+=A.passed;B.failed+=A.failed;B.ignored+=A.ignored;B.total+=A.total;B.duration+=A.duration;if(A.failed){B.failedPages.push(C);}else{B.passedPages.push(C);}A.name=C;A.type="page";B[C]=A;},_run:function(){this._curPage=this._pages.shift();this.fireEvent(this.TEST_PAGE_BEGIN_EVENT,this._curPage);this._frame.location.replace(this._curPage);},load:function(){if(parent.YAHOO.tool.TestManager!==this){parent.YAHOO.tool.TestManager.load();}else{if(this._frame){var A=this._frame.YAHOO.tool.TestRunner;this._logger.setTestRunner(A);A.subscribe(A.COMPLETE_EVENT,this._handleTestRunnerComplete,this,true);A.run();}}},setPages:function(A){this._pages=A;},start:function(){if(!this._initialized){this.createEvent(this.TEST_PAGE_BEGIN_EVENT);this.createEvent(this.TEST_PAGE_COMPLETE_EVENT);this.createEvent(this.TEST_MANAGER_BEGIN_EVENT);this.createEvent(this.TEST_MANAGER_COMPLETE_EVENT);if(!this._frame){var A=document.createElement("iframe");A.style.visibility="hidden";A.style.position="absolute";document.body.appendChild(A);this._frame=A.contentWindow||A.contentDocument.parentWindow;}if(!this._logger){this._logger=new YAHOO.tool.TestLogger();}this._initialized=true;}this._results={passed:0,failed:0,ignored:0,total:0,type:"report",name:"YUI Test Results",duration:0,failedPages:[],passedPages:[]};this.fireEvent(this.TEST_MANAGER_BEGIN_EVENT,null);this._run();},stop:function(){clearTimeout(this._timeoutId);}};YAHOO.lang.augmentObject(YAHOO.tool.TestManager,YAHOO.util.EventProvider.prototype);YAHOO.namespace("tool");YAHOO.tool.TestLogger=function(B,A){YAHOO.tool.TestLogger.superclass.constructor.call(this,B,A);this.init();};YAHOO.lang.extend(YAHOO.tool.TestLogger,YAHOO.widget.LogReader,{footerEnabled:true,newestOnTop:false,formatMsg:function(B){var A=B.category;var C=this.html2Text(B.msg);return"
"+A.toUpperCase()+" "+C+"
";},init:function(){if(YAHOO.tool.TestRunner){this.setTestRunner(YAHOO.tool.TestRunner);}this.hideSource("global");this.hideSource("LogReader");this.hideCategory("warn");this.hideCategory("window");this.hideCategory("time");this.clearConsole();},clearTestRunner:function(){if(this._runner){this._runner.unsubscribeAll();this._runner=null;}},setTestRunner:function(A){if(this._runner){this.clearTestRunner();}this._runner=A;A.subscribe(A.TEST_PASS_EVENT,this._handleTestRunnerEvent,this,true);
A.subscribe(A.TEST_FAIL_EVENT,this._handleTestRunnerEvent,this,true);A.subscribe(A.TEST_IGNORE_EVENT,this._handleTestRunnerEvent,this,true);A.subscribe(A.BEGIN_EVENT,this._handleTestRunnerEvent,this,true);A.subscribe(A.COMPLETE_EVENT,this._handleTestRunnerEvent,this,true);A.subscribe(A.TEST_SUITE_BEGIN_EVENT,this._handleTestRunnerEvent,this,true);A.subscribe(A.TEST_SUITE_COMPLETE_EVENT,this._handleTestRunnerEvent,this,true);A.subscribe(A.TEST_CASE_BEGIN_EVENT,this._handleTestRunnerEvent,this,true);A.subscribe(A.TEST_CASE_COMPLETE_EVENT,this._handleTestRunnerEvent,this,true);},_handleTestRunnerEvent:function(D){var A=YAHOO.tool.TestRunner;var C="";var B="";switch(D.type){case A.BEGIN_EVENT:C="Testing began at "+(new Date()).toString()+".";B="info";break;case A.COMPLETE_EVENT:C="Testing completed at "+(new Date()).toString()+".\nPassed:"+D.results.passed+" Failed:"+D.results.failed+" Total:"+D.results.total;B="info";break;case A.TEST_FAIL_EVENT:C=D.testName+": "+D.error.getMessage();B="fail";break;case A.TEST_IGNORE_EVENT:C=D.testName+": ignored.";B="ignore";break;case A.TEST_PASS_EVENT:C=D.testName+": passed.";B="pass";break;case A.TEST_SUITE_BEGIN_EVENT:C="Test suite \""+D.testSuite.name+"\" started.";B="info";break;case A.TEST_SUITE_COMPLETE_EVENT:C="Test suite \""+D.testSuite.name+"\" completed.\nPassed:"+D.results.passed+" Failed:"+D.results.failed+" Total:"+D.results.total;B="info";break;case A.TEST_CASE_BEGIN_EVENT:C="Test case \""+D.testCase.name+"\" started.";B="info";break;case A.TEST_CASE_COMPLETE_EVENT:C="Test case \""+D.testCase.name+"\" completed.\nPassed:"+D.results.passed+" Failed:"+D.results.failed+" Total:"+D.results.total;B="info";break;default:C="Unexpected event "+D.type;C="info";}YAHOO.log(C,B,"TestRunner");}});YAHOO.namespace("tool.TestFormat");YAHOO.tool.TestFormat.JSON=function(A){return YAHOO.lang.JSON.stringify(A);};YAHOO.tool.TestFormat.XML=function(C){var A=YAHOO.lang;var B="<"+C.type+" name=\""+C.name.replace(/"/g,""").replace(/'/g,"'")+"\"";if(A.isNumber(C.duration)){B+=" duration=\""+C.duration+"\"";}if(C.type=="test"){B+=" result=\""+C.result+"\" message=\""+C.message+"\">";}else{B+=" passed=\""+C.passed+"\" failed=\""+C.failed+"\" ignored=\""+C.ignored+"\" total=\""+C.total+"\">";for(var D in C){if(A.hasOwnProperty(C,D)&&A.isObject(C[D])&&!A.isArray(C[D])){B+=arguments.callee(C[D]);}}}B+="";return B;};YAHOO.namespace("tool");YAHOO.tool.TestReporter=function(A,B){this.url=A;this.format=B||YAHOO.tool.TestFormat.XML;this._fields=new Object();this._form=null;this._iframe=null;};YAHOO.tool.TestReporter.prototype={constructor:YAHOO.tool.TestReporter,_convertToISOString:function(A){function B(C){return C<10?"0"+C:C;}return A.getUTCFullYear()+"-"+B(A.getUTCMonth()+1)+"-"+B(A.getUTCDate())+"T"+B(A.getUTCHours())+":"+B(A.getUTCMinutes())+":"+B(A.getUTCSeconds())+"Z";},addField:function(A,B){this._fields[A]=B;},clearFields:function(){this._fields=new Object();},destroy:function(){if(this._form){this._form.parentNode.removeChild(this._form);this._form=null;}if(this._iframe){this._iframe.parentNode.removeChild(this._iframe);this._iframe=null;}this._fields=null;},report:function(A){if(!this._form){this._form=document.createElement("form");this._form.method="post";this._form.style.visibility="hidden";this._form.style.position="absolute";this._form.style.top=0;document.body.appendChild(this._form);if(YAHOO.env.ua.ie){this._iframe=document.createElement(" ");}else{this._iframe=document.createElement("iframe");this._iframe.name="yuiTestTarget";}this._iframe.src="javascript:false";this._iframe.style.visibility="hidden";this._iframe.style.position="absolute";this._iframe.style.top=0;document.body.appendChild(this._iframe);this._form.target="yuiTestTarget";}this._form.action=this.url;while(this._form.hasChildNodes()){this._form.removeChild(this._form.lastChild);}this._fields.results=this.format(A);this._fields.useragent=navigator.userAgent;this._fields.timestamp=this._convertToISOString(new Date());for(var B in this._fields){if(YAHOO.lang.hasOwnProperty(this._fields,B)&&typeof this._fields[B]!="function"){if(YAHOO.env.ua.ie){input=document.createElement("");}else{input=document.createElement("input");input.name=B;}input.type="hidden";input.value=this._fields[B];this._form.appendChild(input);}}delete this._fields.results;delete this._fields.useragent;delete this._fields.timestamp;if(arguments[1]!==false){this._form.submit();}}};YAHOO.register("yuitest",YAHOO.tool.TestRunner,{version:"2.6.0",build:"1321"});


2010-03-16 jwr:
The CSS file, yourtheme.css, is an exact copy of xtheme-blue.css. Feel free to edit the images inside the yourtheme image directory to build your custom theme--just remember to update your background-image file paths in yourtheme.css.

2006-11-21 jvs:
ext-all.css contains all of the other css files combined and stripped of comments (except themes).


2010-03-16 jwr:
The image directory, "yourtheme", is an exact copy of the "default" image directory. Remember to update your file paths in "css/yourtheme.css" if you make changes or add your own custom images for your custom theme.


Easy CHM - http://www.eTextWizard.com

您现在使用的CHM文件由Easy CHM的未注册版本制作.
注册版本不会在CHM里自动添加此页面

Easy CHM 软件 软件出品: 国华软件 中国北京 |  | 截屏图片
 | 文件大小: 2989k - 2.84MB | 软件类型: 共享软件 购买注册: 这里
关键词: make chm, create chm, chm制作工具, chm电子书制作工具,chm帮助文件制作工具

描述:

Easy CHM是国华软件推出的一款强大的CHM电子书或CHM帮助文件的快速制作工具。使用EasyCHM只需要三个步骤就可以完成CHM的制作：1、用户指定一个目录，EasyCHM会自动导入全部目录及文件；2、设置CHM编译选项；3、开始制作。EasyCHM非常适合个人和单位制作高压缩比的带有全文检索及高亮显示搜索结果的网页集锦、CHM帮助文件、产品说明、公司介绍、CHM电子书等等。

主要功能：

  • 全自动的目录及文件导入（可以包括子目录）；
  • EasyCHM支持导入任意的文件类型；
  • EasyCHM操作速度快，性能稳定，EasyCHM因为上手容易深得广大用户好评；
  • EasyCHM自动生成CHM的目录列表并自动生成所有目录项；
  • 为CHM的目录列表自动添加多级编号；
  • 在编辑目录项、索引项时用到的移动、拖拽、替换等操作中Easy CHM完全支持多选操作，避免了一项一项地操作，极大的减少用户手工 － 非常适合企业维护CHM帮助文档；
  • 支持批量查找替换多级目录各项的标题文字内容；
  • 允许用户指定从文本文件的第N行自动截取标题；
  • 易用的目录编辑器；
  • 丰富实用的CHM制作选项帮助用户制作更加个性化的专业CHM电子书或CHM帮助文件；
  • EasyCHM自动生成输出Alias和Map头文件；
  • EasyCHM自动生成上下文相关的帮助文件（ContextID），适合于制作专业的支持Help Context ID的专业帮助文件；
  • EasyCHM可以保存工程文件，方便企业用户编辑维护文档。
  • 批量更换CHM目录各项的图标；
  • 内嵌CHM反编译工具；

EasyCHM未注册版本的主要限制：

  1. EasyCHM的未注册版本可以制作带任意层级目录的CHM，但是每个CHM的工具栏上都会自动添加一个ABOUT按钮，以提醒用户注册。注册版本不会添加ABOUT按钮。
  2. EasyCHM的未注册版本无法保存CHM的通用工程文件，如*.HHP、*.HHC、*.HHK等，未注册版本的EasyCHM会自动删除*.HHP、*.HHC、*.HHK这几个文件。

注册版本无任何限制。
如果EasyCHM可以为您的工作和学习提供帮助，请注册购买，感谢您给予软件作者的支持。
联系方式:
国华软件站点一: http://www.etextwizard.com
国华软件站点二: http://www.zipghost.com
技术支持信箱: webmaster@etextwizard.com
购买方式:
在线购买:（可提供发票，支持很多种支付方式，包括邮政汇款）
单用户企业版 299元 人民币 ：通过“共享软件注册中心”购买

单用户家庭版 99元 人民币： 通过“共享软件注册中心”购买
直接向作者注册（共3种方式）：
1、招商银行划款:
开户行： 招商银行北京分行双榆树支行
帐 号： 001015570093
户 名： 冯国华
2、中国农业银行金穗卡转帐（注意是卡号）：
金穗卡卡号： 95599 8001 42061 34216
收 款 人： 冯国华
3、中国工商银行牡丹灵通卡转帐：

开户城市：北京
牡丹灵通卡卡号：9558 8202 0000 3186295 （注意是卡号9558820200003186295）
收 款 人： 冯国华

注意事项：
直接向作者注册的用户请在汇出足额的注册费后以EMAIL形式通知作者，同时请尽量提供

  • 汇款日期

  • 汇出城市

  • 您汇到作者哪个帐号？

  • 汇款人姓名

  • 用于接收注册码的信箱（请确保可以接收邮件，最好多提供）

  • 您希望的注册用户名

  • 要注册的软件及套数

您提供的资料详细些会比较方便确认。
作者在确认支付已完成后将会马上发出注册码。
用户在收到注册信后请尽量给软件作者发个类似“已收到注册码”的确认信 - 感谢您的配合！
下载地址:

系统需求: Win98,WinME,WinXP,Windows2000,WinVista
安装支持: 支持安装及卸载